/* Material library — screen styles.
   Owned by ONE porting agent so screens can be built in parallel without
   racing on main.css. Loads AFTER main.css, so a bare class here beats a
   bare class there — but an ID rule in main.css still wins. Check the
   cascade before assuming a rule applies.
   Tokens, the .tip tooltip system and the chart series live in main.css and
   must not be redefined here. */

/* ══ LIBRARY — ported from design/ui/Library.dc.html ═══════════════════════
   The view's markup is generated by renderLibrary() (_libShell) into
   #view-library, so every selector here is scoped to that id (or to the
   row menu / edit modal the screen owns). Cascade notes, each grepped in
   main.css before this block was written:
   · .view h1 (0,1,1) sets font-family !important + weight 300 + tracking
     -1px. #view-library .lib-h1 (1,1,0) wins weight/tracking; the forced
     Fraunces is what we want.
   · input (0,0,1) gives 11px/14px padding, 1.5px dark border, radius 12;
     input:focus (0,1,1) tints the field var(--accent-l). The search field
     is restated at (1,1,1) / (1,2,1) so it stays white and 9px radius.
   · select (0,0,1) likewise; the brand/sort pills wrap a borderless select
     at (1,1,1) with its own caret.
   · .cmenu / .cmenu-item / .cmenu-div / .cmenu-danger (0,1,0) are reused
     for the row ⋯ menu; .lib-menu only adds the meta caption.
   · No bare button{} rule exists in main.css, so every button here sets its
     own font, border and background.
   · Board hexes are literal, as in the v220 Dashboard / Add / Schedule
     blocks. #3D4854 and #6E7F5C are general ink/accent — not bulk-replaced. */

/* ── Frame: title row and filter bar stay put, the list scrolls ── */
#view-library .lib-head{flex-shrink:0;display:flex;align-items:center;gap:20px;padding:24px 32px 0;width:100%;max-width:1244px;margin:0 auto;}
#view-library .lib-head-tx{flex:1;min-width:0;}
#view-library .lib-h1{font-family:var(--font-display);font-size:27px;font-weight:400;letter-spacing:-.5px;line-height:1.1;margin:0 0 3px;color:#2A323A;}
/* No overflow clipping here: the "shared practice-wide" tooltip lives inside. */
#view-library .lib-sub{font-size:12.5px;color:#6B7480;margin:0;line-height:1.3;}
#view-library .lib-sep{margin:0 6px;}
#view-library .lib-shared{border-bottom:1px dotted #A8AEB6;cursor:help;}

#view-library .lib-search{position:relative;width:252px;flex-shrink:0;}
#view-library .lib-search-ic{position:absolute;left:12px;top:50%;transform:translateY(-50%);display:inline-flex;pointer-events:none;}
#view-library .lib-search input{width:100%;box-sizing:border-box;padding:9px 13px 9px 33px;border:1px solid #D2DAE3;border-radius:9px;
  font-family:var(--font);font-size:12.5px;font-weight:400;color:#2A323A;background:#fff;box-shadow:none;transition:border-color .12s,box-shadow .12s;}
#view-library .lib-search input::placeholder{color:#A8AEB6;}
#view-library .lib-search input:hover:not(:focus){border-color:#D2DAE3;}
#view-library .lib-search input:focus{outline:none;background:#fff;border-color:#2A323A;box-shadow:0 0 0 3px rgba(42,50,58,.08);}

#view-library .lib-new{flex-shrink:0;background:#2A323A;color:#FCFBF9;border:none;border-radius:9999px;padding:9px 18px;
  font-family:var(--font);font-size:12.5px;font-weight:600;cursor:pointer;white-space:nowrap;
  box-shadow:0 1px 2px rgba(0,0,0,.2),0 0 0 1px rgba(0,0,0,.1);transition:background .12s,box-shadow .12s;}
#view-library .lib-new:hover{background:#3D4854;box-shadow:0 2px 6px rgba(0,0,0,.22),0 0 0 1px rgba(0,0,0,.12);}

/* ── Filter bar: worksection chips · brand · sort ── */
#view-library .lib-bar{flex-shrink:0;display:flex;align-items:center;gap:8px;padding:22px 32px 14px;width:100%;max-width:1244px;margin:0 auto;flex-wrap:nowrap;}
/* One row of chips: the container shrinks before anything wraps and
   renderLibrary() drops the chips that no longer fit (see _LIB_CHIP_MAX). */
#view-library .lib-chips{display:flex;align-items:center;gap:8px;flex:0 1 auto;flex-wrap:nowrap;min-width:0;}
#view-library .lib-bar-sp{flex:1 1 0;min-width:8px;}
#view-library .lib-chip{display:inline-flex;align-items:center;gap:7px;background:#fff;border:1px solid #D2DAE3;border-radius:9999px;padding:6px 13px;
  font-family:var(--font);font-size:12px;font-weight:500;color:#3D4854;white-space:nowrap;cursor:pointer;transition:border-color .12s,background .12s;}
#view-library .lib-chip:hover{border-color:#9BA3AC;}
#view-library .lib-chip-c,#view-library .lib-chip-n{font-family:var(--font-mono);font-size:10px;letter-spacing:.06em;color:#9BA3AC;}
#view-library .lib-chip-t{max-width:132px;overflow:hidden;text-overflow:ellipsis;}
#view-library .lib-chip-on{background:#2A323A;border-color:#2A323A;color:#FCFBF9;font-weight:600;}
#view-library .lib-chip-on:hover{border-color:#2A323A;}
#view-library .lib-chip-on .lib-chip-c,#view-library .lib-chip-on .lib-chip-n{color:#A8AEB6;}

#view-library .lib-pill{display:inline-flex;align-items:center;gap:6px;flex-shrink:0;background:#fff;border-radius:9999px;padding:0 11px 0 13px;height:30px;
  font-family:var(--font);font-size:12px;font-weight:500;color:#2A323A;cursor:pointer;white-space:nowrap;
  box-shadow:0 1px 2px rgba(0,0,0,.1),0 0 0 1px rgba(0,0,0,.07);transition:box-shadow .12s;}
#view-library .lib-pill:hover{box-shadow:0 2px 5px rgba(0,0,0,.13),0 0 0 1px rgba(0,0,0,.11);}
#view-library .lib-pill[hidden]{display:none;}
#view-library .lib-pill-k{color:#6B7480;}
#view-library .lib-pill select{width:auto;max-width:150px;appearance:none;-webkit-appearance:none;border:none;background:transparent;padding:0;margin:0;
  font-family:var(--font);font-size:12px;font-weight:500;color:#2A323A;cursor:pointer;box-shadow:none;border-radius:0;line-height:1.2;text-overflow:ellipsis;}
#view-library .lib-pill select:hover:not(:focus){border:none;}
#view-library .lib-pill select:focus{outline:none;border:none;box-shadow:none;background:transparent;}
#view-library .lib-pill-car{opacity:.4;font-size:9px;pointer-events:none;}
#view-library .lib-pill-more{border:1px dashed #D2DAE3;box-shadow:none;}
#view-library .lib-pill-more:hover{border-color:#9BA3AC;box-shadow:none;}
#view-library .lib-pill-more select{width:118px;}

/* ── The list ── */
#view-library .lib-list{flex:1;min-height:0;overflow:auto;padding:0 32px 64px;background:#fff;display:flex;flex-direction:column;}
#view-library .lib-list>*{width:100%;max-width:1180px;margin-left:auto;margin-right:auto;flex-shrink:0;}

#view-library .lib-colhdr{position:sticky;top:0;z-index:3;display:flex;align-items:center;gap:14px;padding:4px 16px 8px;margin-bottom:10px;background:#fff;
  border-bottom:1px solid #E8EDF2;font-family:var(--font-mono);font-size:9.5px;letter-spacing:.09em;text-transform:uppercase;color:#9BA3AC;}
#view-library .lib-colhdr>span{flex-shrink:0;}
#view-library .lib-ch-thumb{width:44px;}
#view-library .lib-ch-prod{flex:1 1 auto;min-width:0;}
#view-library .lib-ch-brand{width:96px;}
#view-library .lib-ch-colour{width:104px;}
#view-library .lib-ch-rate{width:84px;}
#view-library .lib-ch-proj{width:64px;cursor:help;}
#view-library .lib-ch-act{width:168px;}

/* Worksection band: a slim tinted header over the rows filed under it.
   Inline background colours come from the code-hashed tint (see _libTint). */
#view-library .lib-band{display:flex;flex-direction:column;gap:8px;margin-bottom:14px;}
#view-library .lib-band-hdr{display:flex;align-items:center;gap:10px;padding:6px 14px;border-radius:9px;user-select:none;}
#view-library .lib-band-dot{width:7px;height:7px;border-radius:50%;flex-shrink:0;}
#view-library .lib-band-code{font-family:var(--font-mono);font-size:11px;font-weight:500;color:#2A323A;letter-spacing:.02em;flex-shrink:0;}
#view-library .lib-band-t{font-size:12.5px;font-weight:600;color:#2A323A;flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
#view-library .lib-band-t.lib-band-warn{color:#8A1C1C;}
#view-library .lib-band-n{font-family:var(--font-mono);font-size:10px;color:#4A5560;opacity:.8;white-space:nowrap;flex-shrink:0;}

#view-library .lib-row{display:flex;align-items:center;gap:14px;background:#fff;border:1px solid #E8EDF2;border-radius:14px;padding:14px 15px;
  box-shadow:0 1px 3px rgba(42,50,58,.04),0 4px 14px rgba(42,50,58,.06);transition:border-color .12s,box-shadow .12s;}
#view-library .lib-row:hover{border-color:#D2DAE3;box-shadow:0 6px 20px -14px rgba(42,50,58,.45);}
#view-library .lib-thumb{width:44px;height:44px;flex-shrink:0;border-radius:9px;background:#F7F7F7;border:1px solid #EFEFF1;display:inline-flex;align-items:center;justify-content:center;overflow:hidden;}
#view-library .lib-thumb-has{border-color:#E8EDF2;}
#view-library .lib-thumb-img{width:100%;height:100%;object-fit:cover;display:block;cursor:zoom-in;}
#view-library .lib-prod{flex:1 1 auto;min-width:0;display:flex;align-items:center;gap:11px;}
#view-library .lib-code{font-family:var(--font-mono);font-size:11px;color:#2A323A;background:#F7F7F7;border:1px solid #E8EDF2;border-radius:6px;padding:1px 8px;flex-shrink:0;cursor:help;line-height:1.5;}
#view-library .lib-name{min-width:0;font-size:13.5px;font-weight:600;letter-spacing:-.1px;color:#2A323A;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
#view-library .lib-brand,#view-library .lib-colour{flex-shrink:0;font-size:12.5px;color:#3D4854;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
#view-library .lib-brand{width:96px;}
#view-library .lib-colour{width:104px;}
/* Tooltip-bearing cells never clip themselves (the bubble is their child);
   an inner span does the ellipsis instead. */
#view-library .lib-rate{width:84px;flex-shrink:0;font-family:var(--font-mono);font-size:11px;color:#3D4854;cursor:help;}
#view-library .lib-rate-t,#view-library .lib-add-t{display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
#view-library .lib-proj{width:64px;flex-shrink:0;font-family:var(--font-mono);font-size:12px;color:#4A5560;}
#view-library .lib-dim{color:#C1C0C2;}
#view-library .lib-act{width:168px;flex-shrink:0;display:flex;align-items:center;gap:7px;justify-content:flex-end;}
#view-library .lib-add{flex:1;min-width:0;background:#fff;color:#2A323A;border:none;border-radius:9999px;padding:7px 8px;
  font-family:var(--font);font-size:11.5px;font-weight:600;white-space:nowrap;cursor:pointer;
  box-shadow:0 1px 2px rgba(0,0,0,.1),0 0 0 1px rgba(0,0,0,.07);transition:box-shadow .12s,background .12s;}
#view-library .lib-add:hover{box-shadow:0 2px 5px rgba(0,0,0,.13),0 0 0 1px rgba(0,0,0,.11);}
#view-library .lib-add-in{background:#DFF5E1;color:#1B5E20;box-shadow:none;}
#view-library .lib-add-in:hover{background:#D3EED6;box-shadow:none;}
#view-library .lib-add-noproj{color:#6B7480;}
#view-library .lib-more{width:26px;height:26px;flex-shrink:0;border:1px solid #E8EDF2;background:#fff;border-radius:8px;font-size:12px;color:#6B7480;line-height:1;padding:0;cursor:pointer;
  font-family:var(--font);transition:border-color .12s,color .12s;}
#view-library .lib-more:hover,#view-library .lib-more.lib-menu-open{border-color:#D2DAE3;color:#2A323A;}
/* While its menu is open the ⋯ tooltip would sit on top of the menu — hide it. */
#view-library .lib-more.lib-menu-open::after,#view-library .lib-more.lib-menu-open::before{display:none;}

#view-library .lib-foot{font-size:11.5px;color:#9BA3AC;padding:2px 15px 0;}

/* ── Empty state ── */
#view-library .lib-empty{display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;flex:1 1 auto;min-height:300px;
  margin-top:6px;padding:32px;border:1px dashed #D2DAE3;border-radius:14px;background:#FDFDFC;}
#view-library .lib-empty-ic{width:66px;height:66px;border-radius:50%;background:#F7F7F7;display:inline-flex;align-items:center;justify-content:center;margin-bottom:18px;}
#view-library .lib-empty-t{font-family:var(--font-display);font-size:20px;font-weight:400;letter-spacing:-.3px;color:#2A323A;margin-bottom:20px;max-width:640px;}
#view-library .lib-empty-s{font-size:12.5px;color:#6B7480;margin-top:-8px;max-width:520px;line-height:1.5;}
#view-library .lib-empty-btn{background:#fff;border:none;border-radius:9999px;padding:8px 16px;font-family:var(--font);font-size:12.5px;font-weight:500;color:#2A323A;cursor:pointer;
  box-shadow:0 1px 2px rgba(0,0,0,.1),0 0 0 1px rgba(0,0,0,.07);}
#view-library .lib-empty-btn:hover{box-shadow:0 2px 5px rgba(0,0,0,.13),0 0 0 1px rgba(0,0,0,.11);}

/* ── Row ⋯ menu (reuses .cmenu from main.css) ── */
.lib-menu{min-width:216px;}
.lib-menu .lib-menu-meta{font-size:11px;color:#6B7480;padding:6px 12px 8px;line-height:1.45;border-bottom:1px solid #E8EDF2;margin-bottom:4px;white-space:nowrap;}

/* ── Narrow panes: drop the two least-needed columns before anything wraps ── */
@media (max-width:1180px){
  #view-library .lib-proj,#view-library .lib-ch-proj{display:none;}
}
@media (max-width:1040px){
  #view-library .lib-rate,#view-library .lib-ch-rate{display:none;}
  #view-library .lib-brand,#view-library .lib-ch-brand{width:84px;}
  #view-library .lib-colour,#view-library .lib-ch-colour{width:88px;}
  #view-library .lib-search{width:200px;}
}
@media (max-width:860px){
  #view-library .lib-head{flex-wrap:wrap;gap:12px;}
  #view-library .lib-head-tx{flex-basis:100%;}
  #view-library .lib-search{flex:1;width:auto;}
  #view-library .lib-colour,#view-library .lib-ch-colour{display:none;}
  #view-library .lib-act,#view-library .lib-ch-act{width:150px;}
}