/* library - styles owned by mod/library.js (the Docs tile, 2026-09-24, port 3,
   decision 13) and the "In the library" part of a machine's Docs tab
   (mod/asset-tabs/docs.js). A file in the library is drawn as a document row
   (mod/docs.css .doc), so both lists read the same; this sheet adds the
   folders, the crumbs, the manager's tools and the scan's progress. Tokens
   only, so both themes work; square corners and the condensed type come
   from the skin (D102). */

.library .libfind{margin:0 0 10px;}
.library h3, .libhead{font-family:var(--cond); font-size:14px; letter-spacing:.04em; text-transform:uppercase;
  color:var(--muted); margin:16px 0 6px;}

/* ---- where you are ---- */
.libcrumbs{display:flex; flex-wrap:wrap; align-items:center; gap:4px; margin:2px 0 8px;}
.libcrumbs button.crumb{width:auto; min-height:32px; padding:4px 10px; font-size:13px; max-width:100%;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}
.libcrumbs .crumb.here{font-weight:700; font-size:13px; padding:4px 4px; word-break:break-word;}
.libcrumbs .sep{color:var(--muted); font-size:15px;}
.libsum{margin:0 0 10px;}

/* ---- a folder, a row you press ---- */
.libdirs{display:flex; flex-direction:column; gap:6px; margin:6px 0 12px;}
button.libdir{display:flex; align-items:center; gap:11px; width:100%; min-height:52px; padding:8px 12px;
  text-align:left; background:var(--panel); border:1px solid var(--line); border-radius:var(--r-sm); color:var(--text);}
button.libdir:hover:not(:disabled){border-color:var(--accent-line);}
button.libdir svg.ic{width:22px; height:22px; margin-right:0; flex:none;}
button.libdir .dc{flex:1; min-width:0; display:flex; flex-direction:column; gap:2px;}
button.libdir .dt{display:flex; flex-wrap:wrap; align-items:center; gap:8px; font-weight:600; font-size:15px;
  line-height:1.3; word-break:break-word;}
button.libdir .dm{font-family:var(--mono); font-size:11.5px; color:var(--muted); line-height:1.45; word-break:break-word;}
button.libdir .go{flex:none; color:var(--muted); font-size:20px; line-height:1;}

/* the way to the machine a folder belongs to */
button.libmachine{margin:2px 0 12px;}
button.libmachine svg.ic{margin-right:.5em;}

/* ---- the manager's tools and the scan's progress ---- */
.libtools{display:flex; flex-wrap:wrap; align-items:center; gap:8px; margin:0 0 12px;}
.libtools button.small{width:auto;}
.libprog{display:flex; flex-wrap:wrap; align-items:center; gap:8px 12px; margin:0 0 12px; padding:10px 12px;
  border:1px solid var(--line); border-radius:var(--r-sm); background:var(--panel);}
.libprog .bar{flex:1 1 100%; height:8px; overflow:hidden; background:var(--chrome); border:1px solid var(--line);}
/* The bar only says "working": the words beside it carry the count (never colour alone). */
.libprog .bar .fill{height:100%; width:30%; background:var(--accent); animation:libslide 1.4s ease-in-out infinite;}
@keyframes libslide{0%{margin-left:-30%;} 100%{margin-left:100%;}}
@media (prefers-reduced-motion:reduce){ .libprog .bar .fill{animation:none; width:100%; opacity:.5;} }
.libprog .lptext{flex:1; min-width:0; font-family:var(--mono); font-size:12px; color:var(--text);}
.libprog button.small{width:auto;}

/* ---- Folders and machines (a modal) ---- */
.libtops{display:flex; flex-direction:column; gap:6px; max-height:55vh; overflow-y:auto;}
button.libtop{display:flex; flex-wrap:wrap; align-items:center; gap:4px 8px; width:100%; min-height:48px; padding:8px 10px;
  text-align:left; background:var(--panel); border:1px solid var(--line); border-radius:var(--r-sm); color:var(--text);}
button.libtop .dt{flex:1 1 100%; font-weight:600; font-size:14.5px; word-break:break-word;}
button.libtop .dm{flex:1; font-family:var(--mono); font-size:11.5px; color:var(--muted);}
.libtopform input[type="checkbox"]{width:auto; margin:0 8px 0 0;}

/* ---- attach a file to machines ---- */
.libadd{display:flex; gap:8px; align-items:center;}
.libadd input{flex:1; min-width:0; margin:0;}
.libadd button{width:auto; flex:none;}

@media (pointer:coarse){
  .libcrumbs button.crumb{min-height:var(--tap);}
  button.libtop{min-height:var(--tap);}
}