/* ── Central brand palette (spec §J companions). Swap a value here to re-theme the whole dashboard;
   every rule below references these var(--ev-*) tokens. The facet palette lives in the #evLibrary
   { --fac-* } block just below. Long-tail one-off status/badge colours are not yet tokenised. */
/* Fidelity S5b/§J: the prototype's BASE palette (warm-cream page + WHITE cards + warm ink/line) -
   production had adopted only accent + --st-*, leaving a flatter off-white look; now the full base. */
:root {
  /* ══ INK (Rishabh 2026-09-14 "ink is fine"): white surfaces on a quiet grey canvas, hairline borders, ONE ink
     accent - the team member's line, rebuilt on these tokens. Crimson survives only as the brand mark, the
     Invitations badge and the avatar. Token NAMES are the old ones so every rule below keeps reading them. ══ */
  --ev-display:'Clash Display','Inter',system-ui,sans-serif;   /* names + headings */
  --ev-font:'Inter',system-ui,-apple-system,sans-serif;         /* everything else (Rishabh: aidretech.com reads in Inter) */
  --ev-mono:ui-monospace,"Cascadia Code","SF Mono",Menlo,Consolas,monospace;   /* code only */
  /* ink ramp */
  --ev-ink:#14211b; --ev-ink-strong:#0b1a14; --ev-muted:#5c6b63; --ev-muted-2:#5c6b63; --ev-faint:#8a958d;
  --ev-label:#0b1a14; --ev-sub:#8a958d; --ev-placeholder:#a7aea6; --ev-glyph:#9aa39c; --ev-chev:#9aa39c;
  /* surfaces */
  --ev-page:#f4f4f6; --ev-page-warm:#f4f4f6; --ev-white:#ffffff; --ev-surface:#ffffff; --ev-side-bg:#fafafb;
  --ev-subtle:#f1f1f4; --ev-row-hover:#fafafb; --ev-kebab-hover:rgba(11,26,20,.06); --ev-menu-hover:rgba(11,26,20,.05);
  --ev-input-bg:#f1f1f4; --ev-input-line:transparent; --ev-input-line-hover:rgba(11,26,20,.14);
  /* hairlines - forest ink at low alpha */
  --ev-line:rgba(11,26,20,.09); --ev-line-warm:rgba(11,26,20,.13); --ev-rule:rgba(11,26,20,.07);
  --ev-hair:rgba(11,26,20,.06); --ev-hair-2:rgba(11,26,20,.08); --ev-menu-line:rgba(11,26,20,.10);
  --ev-btn-line:rgba(11,26,20,.14); --ev-btn-line-hover:#0b1a14;
  /* the ONE accent: ink. Primary = the ink pill; selected = ink. */
  --ev-accent:#0b1a14; --ev-accent-ink:#0b1a14; --ev-accent-soft:#ebebef; --btn-acc-bg:#0b1a14; --btn-acc-fg:#ffffff;
  --ev-on-ink:#ffffff; --ev-focus-ring:#0b1a14; --ev-card-active:rgba(11,26,20,.28); --ev-wiz-seg:#e9e9ee; --ev-wiz-ink:#0b1a14;
  --ev-selbar-bg:#ffffff; --ev-selbar-line:rgba(11,26,20,.14); --ev-connect-line:rgba(11,26,20,.09); --ev-connect-grad:#ffffff;
  /* brand crimson - mark, badge, avatar only */
  --ev-brand:#d23f52; --ev-brand-soft:#fdecee; --ev-brand-grad:linear-gradient(150deg,#e0576c,#b21d32); --ev-mark:#d23f52; --ev-av-bg:#fdecee; --ev-av-ink:#b21d32; --ev-link:#1d5fc4;
  /* semantic */
  --ev-ok:#0b7a53; --ev-ok-bg:#e3f3ec; --ev-ok-2:#0b7a53; --ev-ok-2-bg:#e3f3ec; --ev-ok-2-line:#c2e3d4;
  --ev-read:#a06a12; --ev-read-bg:#faf1de; --ev-read-line:#ecd9ac; --ev-invited:#a06a12; --ev-invited-bg:#faf1de; --ev-warn-bg:#faf1de;
  --ev-danger:#b42318; --ev-danger-bg:#fdecea; --ev-danger-hover-bg:#fdecea; --ev-err:#b42318;
  --ev-withdrawn:#5c6b63; --ev-withdrawn-bg:#ebebef;
  --ev-fail:var(--ev-white); --ev-fail-bg:var(--ev-danger);   /* H12: INVERTED - the one state nobody chose is the only filled pill */
  /* facets (Draft / Complete / Shared / Published / Retired / Unpublished edits) - quiet, one hue family each */
  --fac-draft:#5c6b63; --fac-draft-bg:#f1f1f4; --fac-complete:#6b5b8a; --fac-complete-bg:#efe9f6;
  --fac-shared:#2f6f8f; --fac-shared-bg:#e3f0f6; --fac-published:#0b7a53; --fac-published-bg:#e3f3ec;
  --fac-retired:#9a4a3a; --fac-retired-bg:#f7e9e5; --fac-edits:#6b4fbf; --fac-edits-bg:#ede9fb;
  /* book identity spines - the ORIGINAL eight (spineOf(id) hashes into them; same colour on the card + the Manage header).
     Rishabh 2026-09-14: the coloured spine is a feature; it stays. */
  --ev-spine-1:#B4832A; --ev-spine-2:#D96A18; --ev-spine-3:#C4643C; --ev-spine-4:#4C8C7A;
  --ev-spine-5:#2F8F7B; --ev-spine-6:#3E7D4F; --ev-spine-7:#7A6CC4; --ev-spine-8:#9A8C6A; }
@font-face { font-family:'Clash Display'; font-weight:500; font-style:normal; font-display:swap; src:url(../../fonts/ClashDisplay-500.woff2) format('woff2'); }
@font-face { font-family:'Clash Display'; font-weight:600; font-style:normal; font-display:swap; src:url(../../fonts/ClashDisplay-600.woff2) format('woff2'); }

#evLibrary { position:fixed; inset:0; z-index:8000; background:var(--ev-page-warm); overflow:auto;
  font-family:var(--ev-font); color:var(--ev-ink); -webkit-font-smoothing:antialiased; }
.evlib-head { display:flex; align-items:center; gap:.75rem; padding:1rem 1.5rem; border-bottom:1px solid var(--ev-line-warm); background:var(--ev-white); position:sticky; top:0; z-index:1; }
.evlib-brand { font-size:1.25rem; font-weight:700; letter-spacing:-.01em; }
.evlib-brand span { color:var(--ev-accent); }
.evlib-head .spacer { flex:1; }
.evlib-who { color:var(--ev-muted); font-size:.85rem; }
.evlib-body { max-width:1040px; margin:0 auto; padding:1.5rem; }
.evlib-shelf { margin-bottom:2rem; }
.evlib-shelf h2 { font-size:1.05rem; margin:0 0 .1rem; }
.evlib-shelf .sub { color:var(--ev-muted); font-size:.82rem; margin:0 0 .85rem; }
.evlib-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(230px,1fr)); gap:.9rem; }
/* The card (the team member's system, Rishabh 2026-09-14): borderless white on a 1px ring shadow, 16px radius, 18px
   padding, equal heights in a row (grid stretch + height:100%), a two-line title slot so every card's meta starts on the
   same line, the action row pinned to the bottom. The identity spine stays SHORT at the top-left - not his full-bleed edge. */
.evlib-card { background:var(--ev-white); border:0; border-radius:16px; padding:18px 18px 16px; display:flex; flex-direction:column; gap:7px; min-height:0; height:100%; overflow:hidden; box-shadow:rgba(13,22,33,.035) 0 1px 1px, rgba(13,22,33,.07) 0 2px 5px -2px, rgba(255,255,255,.94) 0 1px 0 inset, rgba(13,22,33,.055) 0 0 0 1px; }
.evlib-card .t { font-family:var(--ev-display); font-weight:500; font-size:16px; line-height:1.28; letter-spacing:-.015em; color:var(--ev-ink-strong); overflow-wrap:anywhere; }
.evlib-card .m { color:var(--ev-muted); font-size:12.5px; line-height:1.5; font-variant-numeric:tabular-nums; }
.evlib-card .evlib-ver { display:inline-block; font-size:11px; font-weight:600; letter-spacing:.01em; color:var(--ev-muted); background:var(--ev-subtle); padding:1px 7px; border-radius:6px; margin-top:0; line-height:1.6; }   /* inline-block: the version card's "Shared · N" line is a block div wearing this class - as a block it painted a full-width grey bar (Rishabh 2026-09-14) */
.evlib-card .actions { margin-top:auto; padding-top:14px; display:flex; gap:8px; flex-wrap:wrap; align-items:center; }
.evlib-card .actions .btn { height:30px; padding:0 13px; font-size:12.5px; }
.evlib-card .actions .btn.primary { padding:0 16px; }
/* The Manage button on the title row - three menu lines, pinned right by margin-left:auto (Rishabh 2026-09-14: the
   pencil / book glyph becomes the Manage control; the card body opens nothing). Geometry lifted from .evlib-pill. */
.evlib-card .evlib-manage { display:inline-flex; align-items:center; justify-content:center; align-self:center; flex:none; margin-left:auto; width:20px; height:20px; padding:0; border-radius:6px; border:1px solid var(--ev-line); background:var(--ev-subtle); color:var(--ev-muted); cursor:pointer; transition:background .12s, color .12s; }
.evlib-card .evlib-manage:hover { color:var(--ev-ink-strong); background:var(--ev-surface); }
.evlib-card .evlib-manage:focus-visible { outline:2px solid var(--ev-accent-ink); outline-offset:2px; }
.evlib-card .evlib-manage svg { width:12px; height:12px; display:block; flex:none; }   /* the button matches the "v1 · Draft" chip height (Rishabh 2026-09-14) */
/* ONE row for the title, ONE row for the actions (Rishabh, 2026-09-02). The studio card's labels are longer than the
   rest - "Mark complete" alone is 119px in a 220px row - so the actions wrapped and dropped the kebab onto a second
   line, and the title row's wrap pushed the Manage button under the title. Opt-in via the vm's `nowrap`, so the
   surfaces that do not take it keep their old wrapping. */
.evlib-card-nowrap .actions { flex-wrap:nowrap; }
.evlib-card-nowrap .actions .btn { flex:none; }
.evlib-card-nowrap .evlib-titlerow > * { flex:none; }
/* The title SHRINKS but never GROWS (flex:0 1 auto). With 1 1 it swallowed the free space and shoved the
   version chip across to the right edge - Rishabh spotted it against prod. min-width:0 is what lets a flex
   item shrink below its content and actually ellipsise, and the wrapper div renderCard puts around .t needs
   it too or the ellipsis never engages. The chip and the button stay whole. */
.evlib-card-nowrap .evlib-titlerow > div:first-child { flex:0 1 auto; min-width:0; }
.evlib-card-nowrap .evlib-titlerow .t { white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.evlib-card-nowrap .evlib-titlerow .evlib-ver { white-space:nowrap; margin-top:0; }
.evlib-new { align-items:center; justify-content:center; color:var(--ev-muted); cursor:pointer; text-align:center; border:0; background:rgba(241,241,244,.6); box-shadow:rgba(13,22,33,.1) 0 1px 2.5px inset, rgba(13,22,33,.05) 0 0 0 1px inset; }
.evlib-new:hover { color:var(--ev-ink-strong); background:rgba(241,241,244,.95); }
/* An empty state is a centred, full-width dashed card (the team member's Consent treatment, applied everywhere):
   the lead line reads as the title, the rest as the explanation. "Loading…" wears the same frame for the moment it shows. */
.evlib-empty { color:var(--ev-muted); font-size:13.5px; line-height:1.55; text-align:center; padding:40px 24px; border:1.5px dashed var(--ev-btn-line); border-radius:13px; margin:6px 0; max-width:none; }
.evlib-empty > div:first-child { font-family:var(--ev-display); font-weight:500; font-size:15px; color:var(--ev-ink-strong); margin-bottom:6px; }
/* The full-screen dashboard overlay is position:fixed; without locking the page
   behind it, BOTH the overlay and the underlying tracker body show a scrollbar
   (the "two scrollbars" bug). Lock the body while the dashboard is open. */
body.tt-evlib-open { overflow:hidden; }
/* The column filter/search popup (tvBuildFilterPop) is appended to <body>; lift it
   above the z-index:8000 dashboard overlay, else it opens BEHIND it and looks like
   "search doesn't work" (mirrors the deployed body.tts-modal-open rule). */
body.tt-evlib-open .tv-filter-pop { z-index:9600; }
/* "Shared by me" (Manage Access who-has-what) + the "My students" modal table: the tracker's
   generic table rule (table-layout:fixed; width:100%) forces EQUAL narrow columns that CLIP
   long emails + the "Remove access" button. Override JUST these share tables to size columns to
   content (auto layout), keep cells on one line, fill the container as a minimum, and let the
   overflow-x:auto wrapper SCROLL when the content genuinely can't fit (no cropping). */
.evlib-sbm-wrap { overflow-x:auto; max-width:100%; }
.evlib-sbm-wrap .tts-tbl, .evlib-modal .tts-tbl { table-layout:auto; width:auto; min-width:100%; }
.evlib-sbm-wrap .tts-tbl th, .evlib-sbm-wrap .tts-tbl td,
.evlib-modal .tts-tbl th, .evlib-modal .tts-tbl td { white-space:nowrap; }
.evlib-stat { display:inline-block; font-size:.7rem; font-weight:600; padding:.13rem .5rem; border-radius:20px; white-space:nowrap; }
.evlib-stat.live { color:var(--ev-ok); background:var(--ev-ok-bg); }
.evlib-stat.pending { color:var(--ev-accent); background:var(--ev-warn-bg); }
.evlib-stat.hidden { color:var(--ev-muted); background:var(--fac-draft-bg); }
.evlib-stat.revoked { color:var(--ev-danger); background:var(--ev-danger-bg); }
.evlib-stat.withdrawn { color:var(--ev-withdrawn); background:var(--ev-withdrawn-bg); }
.evlib-stat.rejected { color:var(--ev-danger); background:var(--fac-draft-bg); }   /* F6: declined invite - danger ink on a neutral ground, distinct from a revoked (Removed) read */
.evlib-stat.blocked { color:var(--ev-danger); background:var(--ev-danger-bg); }     /* F6: consent-blocked sender (rare in Readers) */
.evlib-stat.delivering { color:var(--ev-accent-ink); background:var(--ev-accent-soft); }   /* H14: work in flight - warmer than Invited, so "Sending…" and "Invited" are not one colour */
.evlib-stat.failed { color:var(--ev-fail); background:var(--ev-fail-bg); }         /* H12/H13: nobody chose this - the only FILLED pill, so it cannot be skimmed past */
/* Facet palette (Draft=grey · Complete=plum · Shared=teal · Published=green · Retired=rust ·
   Unpublished-edits=violet) now lives in the single :root token block above - one swappable place. */
.evlib-pills { display:flex; gap:.3rem; flex-wrap:wrap; padding-left:1.4rem; margin-top:.15rem; }
/* F4/F5: the 1.4rem indent above is for the card (checkbox gutter); in the Manage hub the pill row
   sits in a KV value / at the tab's left edge, so it must be flush (no indent, no top margin). */
.evlib-pills-flush { padding-left:0; margin-top:0; }
.evlib-pill { display:inline-flex; align-items:center; gap:6px; font-size:11px; font-weight:600; padding:3px 9px 3px 7px; border-radius:99px; border:1px solid var(--ev-line); background:var(--ev-subtle); white-space:nowrap; }
.evlib-dot { width:7px; height:7px; border-radius:50%; background:currentColor; flex:none; }
.evlib-spine { position:absolute; left:0; right:0; top:0; height:3px; width:auto; margin:0 !important; border-radius:16px 16px 0 0; opacity:.9; flex:none; }   /* the identity colour is the card's full-width top edge (Rishabh 2026-09-14 20:0x: "they were fine horizontal full width") */   /* the new look, narrower (Rishabh 2026-09-14 19:5x "new look only but width kam"): the identity colour sits ON the card's top edge from the left corner, a third of the card, not the whole edge */
.evlib-sp2 { display:inline-block; width:4px; height:15px; border-radius:2px; margin-right:8px; vertical-align:middle; }
.evlib-pill.draft { color:var(--fac-draft); }
.evlib-pill.complete { color:var(--fac-complete); }
.evlib-pill.shared { color:var(--fac-shared); }
.evlib-pill.published { color:var(--fac-published); }
.evlib-pill.retired { color:var(--fac-retired); }
.evlib-pill.edits { color:var(--fac-edits); }
.evlib-fcount { font-size:11.5px; color:var(--ev-faint); margin-left:.4rem; font-weight:600; background:var(--ev-subtle); padding:1px 7px; border-radius:99px; }
.evlib-subtabs button.on .evlib-fcount { background:var(--ev-ink-strong); color:var(--ev-on-ink); }
.evlib-subtabs button.on .evlib-fcount { opacity:.85; }
#evLibrary .btn { font:inherit; font-weight:500; height:32px; padding:0 15px; border:0; background:var(--ev-white); color:var(--ev-muted); border-radius:10px; cursor:pointer; font-size:13px; line-height:1; letter-spacing:-.005em; white-space:nowrap; display:inline-flex; align-items:center; justify-content:center; gap:7px; box-shadow:rgba(13,22,33,.035) 0 1px 1px, rgba(13,22,33,.07) 0 2px 5px -2px, rgba(255,255,255,.94) 0 1px 0 inset, rgba(13,22,33,.07) 0 0 0 1px; transition:box-shadow .12s, background .12s, color .12s, transform .12s; }
#evLibrary .btn:hover { color:var(--ev-ink-strong); box-shadow:rgba(13,22,33,.06) 0 2px 3px, rgba(13,22,33,.1) 0 6px 14px -6px, rgba(255,255,255,.94) 0 1px 0 inset, rgba(13,22,33,.08) 0 0 0 1px; transform:translateY(-1px); }
#evLibrary .btn:active { transform:none; box-shadow:rgba(13,22,33,.1) 0 1px 2.5px inset, rgba(13,22,33,.05) 0 0 0 1px inset; }
#evLibrary .btn.primary { background:var(--btn-acc-bg); color:var(--btn-acc-fg); box-shadow:rgba(11,26,20,.18) 0 1px 1px, rgba(11,26,20,.3) 0 5px 12px -4px, rgba(255,255,255,.17) 0 1px 0 inset; }
#evLibrary .btn.primary:hover { background:#000; color:var(--btn-acc-fg); box-shadow:rgba(11,26,20,.22) 0 1px 1px, rgba(11,26,20,.36) 0 7px 14px -4px, rgba(255,255,255,.17) 0 1px 0 inset; }
/* Library modals render in document.body (outside #evLibrary), so the accent-primary rule must also
   target the modal overlay - else a modal's primary button (e.g. Share) falls back to a plain button. */
.evlib-modal-ov .btn { font:inherit; font-weight:500; height:32px; padding:0 15px; border:0; background:var(--ev-white); color:var(--ev-muted); border-radius:10px; cursor:pointer; font-size:13px; line-height:1; white-space:nowrap; display:inline-flex; align-items:center; justify-content:center; gap:7px; box-shadow:rgba(13,22,33,.035) 0 1px 1px, rgba(13,22,33,.07) 0 2px 5px -2px, rgba(255,255,255,.94) 0 1px 0 inset, rgba(13,22,33,.07) 0 0 0 1px; }
.evlib-modal-ov .btn:hover { color:var(--ev-ink-strong); box-shadow:rgba(13,22,33,.06) 0 2px 3px, rgba(13,22,33,.1) 0 6px 14px -6px, rgba(255,255,255,.94) 0 1px 0 inset, rgba(13,22,33,.08) 0 0 0 1px; }
.evlib-modal-ov .btn.primary { background:var(--btn-acc-bg); color:var(--btn-acc-fg); box-shadow:rgba(11,26,20,.18) 0 1px 1px, rgba(11,26,20,.3) 0 5px 12px -4px, rgba(255,255,255,.17) 0 1px 0 inset; }
.evlib-modal-ov .btn.primary:hover { background:#000; color:var(--btn-acc-fg); }
.evlib-modal-ov { position:fixed; inset:0; background:rgba(17,24,39,.45); z-index:9000; display:flex; align-items:flex-start; justify-content:center; padding:5vh 1rem; }
.evlib-modal { background:var(--ev-white); color:var(--ev-ink); border-radius:14px; max-width:560px; width:100%; max-height:84vh; overflow:auto; box-shadow:0 10px 40px rgba(0,0,0,.2); }
/* A modal holding a wide table (My students) gets more room so the table fits without a horizontal
   scrollbar; forms keep the narrower default. Capped at 94vw for small screens. */
.evlib-modal.evlib-modal-wide { max-width:min(820px, 94vw); }
.evlib-modal .mh { display:flex; align-items:center; justify-content:space-between; padding:1rem 1.25rem; border-bottom:1px solid var(--ev-hair); }
.evlib-modal .mb { padding:1rem 1.25rem 1.4rem; display:flex; flex-direction:column; gap:.8rem; }
.evlib-modal label.fld { font-size:.85rem; color:var(--ev-muted); display:block; margin-bottom:.2rem; }
.evlib-modal input, .evlib-modal select, .evlib-modal textarea { font:inherit; padding:.55rem .7rem; border:1px solid var(--ev-btn-line); border-radius:10px; width:100%; background:var(--ev-surface); color:var(--ev-ink); }
.evlib-modal input:focus, .evlib-modal select:focus, .evlib-modal textarea:focus { outline:none; border-color:var(--ev-focus-ring); }
/* Radios/checkboxes are native controls - the width:100% above pushed the
   label text to the far edge; keep them intrinsic-sized and inline. */
.evlib-modal input[type=radio], .evlib-modal input[type=checkbox] { width:auto; padding:0; border:0; border-radius:0; margin:0; flex:none; }
.evlib-radio { align-items:flex-start; }
.evlib-row { display:flex; gap:1rem; flex-wrap:wrap; }
.evlib-radio { display:inline-flex; align-items:center; gap:.4rem; cursor:pointer; font-size:.9rem; }
.evlib-err { color:var(--ev-err); font-size:.85rem; min-height:1em; }
.evlib-ok { color:var(--ev-ok); font-size:.85rem; }
/* A5: the book create / details form - a tighter, more polished modal (scoped to .evb-*
   so the other modals keep the generic .mb styling). */
.evlib-modal.evb-modal { max-width:452px; border-radius:16px; }
.evb-modal .mh { padding:1.15rem 1.35rem .9rem; border-bottom:0; }
.evb-modal .mb { padding:0 1.35rem 1.35rem; }
.evb-form { display:flex; flex-direction:column; gap:1rem; }
.evb-sub { margin:0 0 .2rem; font-size:.9rem; color:var(--ev-sub); line-height:1.45; }
.evb-2col { display:grid; grid-template-columns:1fr 1fr; gap:.85rem; }
.evb-1col { display:grid; grid-template-columns:1fr; gap:.85rem; }   /* a modal with ONE field (Notes details) - full width, so its placeholder is never cropped */
.evb-field { display:flex; flex-direction:column; min-width:0; }
.evb-field label.fld { font-size:.78rem; font-weight:600; color:var(--ev-label); letter-spacing:.01em; margin:0 0 .35rem; }
.evb-inwrap { position:relative; }
.evb-field input { width:100%; font:inherit; background:var(--ev-input-bg); border:1px solid var(--ev-input-line); border-radius:10px; padding:.6rem .7rem; color:var(--ev-ink); transition:border-color .12s, box-shadow .12s, background .12s; }
.evb-field input:hover { border-color:var(--ev-input-line-hover); }
.evb-field input:focus { outline:none; border-color:var(--ev-focus-ring); box-shadow:0 0 0 3px rgba(200,183,138,.30); background:var(--ev-white); }
.evb-field input::placeholder { color:var(--ev-placeholder); }
.evb-field.pick input { padding-right:1.9rem; }
.evb-field select { width:100%; font:inherit; background:var(--ev-input-bg); border:1px solid var(--ev-input-line); border-radius:10px; padding:.6rem 1.9rem .6rem .7rem; color:var(--ev-ink); appearance:none; -webkit-appearance:none; cursor:pointer; transition:border-color .12s, box-shadow .12s, background .12s; }
.evb-field select:hover { border-color:var(--ev-input-line-hover); }
.evb-field select:focus { outline:none; border-color:var(--ev-focus-ring); box-shadow:0 0 0 3px rgba(200,183,138,.30); background:var(--ev-white); }
.evb-field .evb-other { margin-top:.5rem; }   /* the free-text input "Other…" reveals */
.evb-chev { position:absolute; right:.7rem; top:50%; transform:translateY(-50%); pointer-events:none; color:var(--ev-chev); font-size:.62rem; }
.evb-foot { display:flex; gap:.6rem; align-items:center; justify-content:flex-end; border-top:1px solid var(--ev-page); padding-top:1.05rem; margin-top:.25rem; }
.evb-err { color:var(--ev-mark); font-size:.83rem; min-height:1.1rem; flex:1; text-align:left; margin:0; }
.evb-modal .evb-foot .btn { padding:.5rem 1.1rem; }
/* B4: a Share-owned toast ABOVE the z-8000 overlay + z-9000 modal (the tracker's #toast renders inside
   #app, behind the overlay = invisible here). F-19: a bottom-RIGHT accent CARD (was a flat dark
   bottom-middle pill) - a card ground with a colored LEFT accent bar (green ok / red err), a leading
   status icon, and a slide-up + fade entrance (`.show` toggled by libToast). Reuses the app's .tt-busy
   bottom-right card language. display + `.show` are driven by libToast. */
.evlib-toast { position:fixed; right:1.5rem; bottom:1.5rem; z-index:9500;
  align-items:center; gap:.6rem; max-width:min(90vw,360px);
  background:var(--ev-white); color:var(--ev-ink); padding:.7rem .95rem .7rem .85rem;
  border:1px solid var(--ev-line-warm); border-left:4px solid var(--ev-ok); border-radius:10px;
  font-size:.9rem; box-shadow:0 8px 30px rgba(0,0,0,.18);
  transform:translateY(80px); opacity:0; transition:transform .2s ease, opacity .2s ease; }
.evlib-toast.show { transform:translateY(0); opacity:1; }
.evlib-toast.err { border-left-color:var(--ev-err); }
/* 'warn' = a neutral caution notice (e.g. a degraded-version warning): never the green success look. */
.evlib-toast.warn { border-left-color:var(--ev-ink); }
/* 'busy' = still happening. Neutral for the same reason 'warn' is: green is the app saying the thing is
   DONE, and this toast exists precisely for the window where it is not. Tokens only - no literal here. */
.evlib-toast.busy { border-left-color:var(--ev-ink-soft, var(--ev-ink)); }
.evlib-toast-icon { flex:none; width:20px; height:20px; border-radius:50%; display:grid; place-items:center;
  font-size:.78rem; font-weight:800; line-height:1; color:var(--ev-white); background:var(--ev-ok); }
.evlib-toast.err .evlib-toast-icon { background:var(--ev-err); }
.evlib-toast.warn .evlib-toast-icon { background:var(--ev-ink); }
.evlib-toast-msg { flex:1; min-width:0; }
/* B5: the message and its optional quieter second line stack in one column; one optional action (Stop). */
.evlib-toast-body { flex:1; min-width:0; display:flex; flex-direction:column; gap:.15rem; }
.evlib-toast-sub { font-size:.74rem; opacity:.72; }
.evlib-toast-act { flex:none; margin-left:.3rem; padding:.3rem .7rem; font:inherit; font-size:.8rem; font-weight:600;
  border-radius:8px; border:1px solid var(--ev-line-warm); background:var(--ev-white); color:var(--ev-ink); cursor:pointer; }
.evlib-toast-act:disabled { opacity:.6; cursor:default; }
/* F-19 part 1: Manage-hub first-paint skeleton (3 gray bars + a subtle shimmer sweep) - painted only on
   an EMPTY mount, so a refresh keeps the current hub on screen until _studioData() returns. */
.evmh-skel { padding:1.5rem; display:flex; flex-direction:column; gap:.9rem; }
.evmh-skel-bar { height:14px; border-radius:7px; background:var(--ev-subtle);
  background-image:linear-gradient(90deg, var(--ev-subtle) 0%, var(--ev-page) 50%, var(--ev-subtle) 100%);
  background-size:200% 100%; animation:evmhShimmer 1.3s ease-in-out infinite; }
.evmh-skel-bar:nth-child(1) { width:38%; }
.evmh-skel-bar:nth-child(2) { width:70%; }
.evmh-skel-bar:nth-child(3) { width:55%; }
@keyframes evmhShimmer { 0% { background-position:200% 0; } 100% { background-position:-200% 0; } }
/* Card selection (multi-select) + the per-card ⋮ menu. */
.evlib-card { position:relative; }
#evLibrary .evlib-card.sel { box-shadow:rgba(13,22,33,.035) 0 1px 1px, rgba(13,22,33,.07) 0 2px 5px -2px, rgba(255,255,255,.94) 0 1px 0 inset, rgba(13,22,33,.055) 0 0 0 1px, 0 0 0 2px var(--ev-accent); }
/* the tick is a small well (his): appearance none, inset shadow, ink when checked */
.evlib-cardsel { position:absolute; top:18px; left:14px; width:16px; height:16px; margin:0; border:0; border-radius:5px; cursor:pointer; appearance:none; -webkit-appearance:none; background:var(--ev-white); box-shadow:rgba(13,22,33,.1) 0 1px 2.5px inset, rgba(13,22,33,.05) 0 0 0 1px inset; }
.evlib-cardsel:checked { background:var(--ev-ink-strong); box-shadow:none; }
.evlib-cardsel:checked::after { content:''; position:absolute; left:5px; top:2px; width:4px; height:8px; border:solid var(--ev-white); border-width:0 2px 2px 0; transform:rotate(45deg); }
.evlib-kebab { position:absolute; top:.4rem; right:.5rem; background:none; border:none;
  font-size:1.1rem; line-height:1; cursor:pointer; color:var(--ev-muted); padding:.1rem .3rem; border-radius:6px; }
.evlib-kebab:hover { background:var(--ev-kebab-hover); color:var(--ev-ink); }
.evlib-menu { position:fixed; z-index:9600; background:var(--ev-white); border:1px solid var(--ev-menu-line);
  border-radius:10px; box-shadow:0 8px 30px rgba(0,0,0,.16); padding:.3rem; min-width:150px; }
.evlib-menu button { display:block; width:100%; text-align:left; background:none; border:none;
  padding:.45rem .6rem; border-radius:7px; cursor:pointer; font:inherit; font-size:.88rem; color:var(--ev-ink); }
.evlib-menu button:hover { background:var(--ev-menu-hover); }
.evlib-menu button.danger { color:var(--ev-danger); }
.evlib-menu button.danger:hover { background:var(--ev-danger-hover-bg); }
.evlib-selbar { display:flex; align-items:center; gap:.6rem; background:var(--ev-selbar-bg); border:1px solid var(--ev-selbar-line);
  border-radius:10px; padding:.55rem .8rem; margin-bottom:.7rem; font-size:.88rem; }
.evlib-selbar .spacer { flex:1; }
.evlib-linkbox { display:flex; gap:.4rem; align-items:center; background:var(--ev-page-warm); border:1px solid var(--ev-line-warm);
  border-radius:8px; padding:.4rem .5rem; }
.evlib-linkbox input { border:none; background:transparent; font-size:.82rem; padding:.2rem; }
/* Book scope: while a book is open, the sidebar shows ONLY that book's tab. */
body.tt-book-scope .sidebar .tab:not(.active) { display:none; }
body.tt-book-scope .sidebar .add-tab { display:none; }
body.tt-book-scope .sidebar .tab.active .del-tab { display:none; }

/* ── Dashboard SHELL (redesign Slice 1): a left sidebar-nav + one section at a
   time, replacing the single-scroll header + 6-shelf body. Warm cream chrome to
   match the Interactive Book brand (mockup DASHBOARD_REDESIGN_MOCKUP.html). The card /
   modal / tableView styles above are reused as-is by the section renderers. */
#evLibrary { background:var(--ev-page); }
.evlib-shell { display:grid; grid-template-columns:264px 1fr; min-height:100vh; }
.evlib-side { background:var(--ev-side-bg); border-right:0; display:flex; flex-direction:column; padding:22px 12px 16px; position:sticky; top:0; height:100vh; }
.evlib-sbrand { display:flex; align-items:center; gap:10px; padding:6px 8px 16px; }
/* The mark: a flat crimson badge with the book glyph KNOCKED OUT of it (img/ib-mark.png is a white glyph on
   transparent - used as a mask so the badge colour is one token, --ev-mark). The team member's mark, kept. */
.evlib-sbrand .mark { width:30px; height:30px; border-radius:9px; background:var(--ev-brand-grad); position:relative; flex:none; box-shadow:inset 0 .5px 0 rgba(255,255,255,.28), 0 1px 2px rgba(11,26,20,.10); }
.evlib-sbrand .mark::after { content:""; position:absolute; inset:0; background:var(--ev-on-ink); -webkit-mask:url(../../img/ib-mark.png) center / 20px 20px no-repeat; mask:url(../../img/ib-mark.png) center / 20px 20px no-repeat; }
.evlib-sbrand b { display:flex; flex-direction:column; justify-content:center; line-height:1.1; min-width:0; font-weight:500; }
.evlib-sbrand b strong { font-family:var(--ev-display); font-weight:500; font-size:15px; letter-spacing:-.01em; color:var(--ev-ink-strong); white-space:nowrap; }
.evlib-sbrand b small { margin-top:3px; font-family:var(--ev-display); font-weight:500; font-size:10.5px; letter-spacing:.02em; color:var(--ev-faint); white-space:nowrap; }
/* ── Connect any AI - the team member's card, verbatim (his repo: dashboard styles.css, "evCaiSweep").
   Two background layers on one element: white clipped to padding-box, a conic gradient clipped to border-box showing
   through the 1px transparent border; the angle is a registered @property so it animates as a sweep. Where @property
   is unsupported the gradient holds still - a tinted hairline. The red lives on the AI mark and nowhere else. ── */
@property --cai-a { syntax: "<angle>"; initial-value: 0deg; inherits: false; }
@keyframes evCaiSweep { to { --cai-a: 360deg; } }
#evLibrary .evlib-connect {
  --cai-a: 0deg;
  position: relative; overflow: visible; isolation: auto;
  display: flex; align-items: center; gap: 10px;
  width: 100%; margin: 2px 0 2px; padding: 9px 10px;
  border: 1px solid transparent; border-radius: 12px;
  background-color: transparent;
  background-image:
    linear-gradient(var(--ev-surface), var(--ev-surface)),
    conic-gradient(from var(--cai-a),
      rgba(178,29,50,.55) 0deg, rgba(178,29,50,0) 60deg,
      rgba(178,29,50,0) 300deg, rgba(178,29,50,.55) 360deg);
  background-origin: padding-box, border-box;
  background-clip: padding-box, border-box;
  color: var(--ev-ink-strong); text-align: left; cursor: pointer; font-family: inherit;
  box-shadow: 0 1px 2px rgba(11,26,20,.04);
  animation: evCaiSweep 7s linear infinite;
  transition: box-shadow .2s ease;
}
#evLibrary .evlib-connect:hover {
  box-shadow: 0 1px 2px rgba(11,26,20,.05), 0 8px 18px -10px rgba(11,26,20,.18);
  animation-duration: 3.2s;
}
#evLibrary .evlib-connect:active { transform: none; }
@media (prefers-reduced-motion: reduce) {
  #evLibrary .evlib-connect, #evLibrary .evlib-connect:hover { animation: none; }
}
#evLibrary .evlib-connect .sc-ic {
  flex: none; display: grid; place-items: center;
  width: 28px; height: 28px; border-radius: 9px;
  background-color: rgba(178,29,50,.07); background-image: none;
  box-shadow: none;
  color: #b21d32;
  transition: background-color .2s ease;
}
#evLibrary .evlib-connect:hover .sc-ic { background-color: rgba(178,29,50,.12); }
#evLibrary .evlib-connect .sc-ic svg { width: 16px; height: 16px; display: block; }
#evLibrary .evlib-connect .sc-x { flex: 1; min-width: 0; line-height: 1.3; }
#evLibrary .evlib-connect .sc-x b {
  display: block; font-family: var(--ev-display);
  font-size: 12.5px; font-weight: 500; letter-spacing: -.01em;
  color: var(--ev-ink-strong);
}
#evLibrary .evlib-connect .sc-x small {
  display: block; margin-top: 1px; font-family: var(--ev-font);
  font-size: 11px; font-weight: 400; color: var(--ev-faint);
}
#evLibrary .evlib-connect .sc-chev {
  flex: none; color: var(--ev-glyph);
  transition: color .2s ease, transform .22s cubic-bezier(.32,.72,0,1);
}
#evLibrary .evlib-connect:hover .sc-chev { color: var(--ev-ink-strong); transform: translateX(2px); }
#evLibrary .evlib-connect .sc-chev svg { width: 12px; height: 12px; display: block; }
.evlib-navlabel { font-family:var(--ev-display); font-size:10px; letter-spacing:1.3px; text-transform:uppercase; color:var(--ev-faint); padding:16px 10px 6px; font-weight:500; }
.evlib-nav { display:flex; flex-direction:column; gap:2px; }
.evlib-nav button { display:flex; align-items:center; gap:10px; width:100%; text-align:left; height:34px; padding:6px 11px; border:0; background:transparent; border-radius:10px; color:var(--ev-muted-2); font-weight:500; font-size:12.5px; cursor:pointer; transition:background .14s, color .14s, box-shadow .14s; font-family:inherit; }
.evlib-nav button svg { width:16px; height:16px; flex:none; opacity:.9; }
.evlib-nav button:hover { background:var(--ev-subtle); color:var(--ev-ink-strong); }
/* the active row is the ink pill - the same ink the primary button wears, so "where am I" and "what is the main action" share one colour */
.evlib-nav button.active { background:var(--ev-ink-strong); color:var(--ev-on-ink); font-weight:500; box-shadow:rgba(11,26,20,.18) 0 1px 1px, rgba(11,26,20,.3) 0 5px 12px -4px, rgba(255,255,255,.17) 0 1px 0 inset; }
.evlib-nav button.active svg { opacity:1; color:var(--ev-on-ink); }
.evlib-nav button.active .evlib-navbadge { background:var(--ev-on-ink); color:var(--ev-ink-strong); }
/* Invitations pending-count badge (right-aligned pill). NOTE: .evlib-navbadge sets display, so the
   native [hidden] attribute is overridden -> the explicit [hidden] rule below re-hides it at 0. */
.evlib-navbadge { margin-left:auto; min-width:20px; height:20px; padding:0 6px; border-radius:999px; background:var(--ev-brand); color:var(--ev-white); font-size:11px; font-weight:700; display:inline-flex; align-items:center; justify-content:center; line-height:1; }
.evlib-navbadge[hidden] { display:none; }
.evlib-sfoot { margin-top:auto; display:flex; flex-direction:column; gap:8px; padding-top:12px; }
.evlib-acct { display:flex; align-items:center; gap:10px; padding:10px 11px; border-radius:12px; border:1px solid var(--ev-line); background:var(--ev-surface); box-shadow:rgba(13,22,33,.035) 0 1px 1px, rgba(13,22,33,.07) 0 2px 5px -2px, rgba(255,255,255,.94) 0 1px 0 inset; }
.evlib-acct .av { width:32px; height:32px; border-radius:50%; background:var(--ev-av-bg); color:var(--ev-av-ink); display:grid; place-items:center; font-weight:700; font-size:13px; flex:none; text-transform:uppercase; }
.evlib-acct .who { line-height:1.25; min-width:0; flex:1; }
.evlib-acct .who b { font-size:13.5px; display:block; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.evlib-acct .who small { font-size:11.5px; color:var(--ev-faint); }
.evlib-sfoot .evlib-facts { display:flex; flex-wrap:wrap; gap:6px; }
.evlib-sfoot .evlib-facts .btn { flex:1 1 auto; text-align:center; justify-content:center; }
.evlib-content { min-width:0; padding:36px 40px 96px 32px; }   /* Rishabh 2026-09-14 20:1x: less air between the rail and the shelf (was 48px both sides) */
.evlib-view { display:none; }
.evlib-view.active { display:block; }
.evlib-vhead { display:flex; align-items:flex-start; gap:16px; flex-wrap:nowrap; margin-bottom:22px; }
.evlib-vhead .title { min-width:0; }
.evlib-vhead h1 { font-family:var(--ev-display); font-size:22px; font-weight:500; letter-spacing:-.018em; margin:0; color:var(--ev-ink-strong); }
.evlib-vhead p { color:var(--ev-muted); font-size:13.5px; line-height:1.66; margin:7px 0 0; max-width:none; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.evlib-vhead .actions { margin-left:auto; display:flex; align-items:center; gap:10px; flex-wrap:wrap; flex:none; padding-top:2px; }
.evlib-vhead .actions .btn.primary { height:38px; padding:0 22px; font-size:14px; }
.evlib-subtabs { display:flex; gap:2px; border-bottom:1px solid var(--ev-line); margin-bottom:20px; }
.evlib-studiobar { display:flex; align-items:flex-end; gap:1rem; flex-wrap:wrap; margin-bottom:20px; }
.evlib-studiobar .evlib-subtabs { margin-bottom:0; flex-wrap:wrap; }
.evlib-subtabs button { border:0; background:transparent; color:var(--ev-muted-2); font-weight:500; font-size:14px; padding:9px 2px; margin-right:22px; border-bottom:2px solid transparent; margin-bottom:-1px; cursor:pointer; font-family:var(--ev-display);   /* Rishabh 2026-09-15: the facet tabs read as headings, so they take the heading face */ transition:color .14s, border-color .14s; }
.evlib-subtabs button:hover { color:var(--ev-ink-strong); }
.evlib-subtabs button.on { color:var(--ev-ink-strong); border-bottom-color:var(--ev-accent); }
.evlib-secsub { color:var(--ev-muted-2); font-size:.82rem; margin:0 0 .85rem; }

/* ── My books card system + grouping controls + table (redesign Slice 2) ── */
#evLibrary .evlib-grid { grid-template-columns:repeat(auto-fill,minmax(268px,1fr)); gap:16px; align-items:stretch; }   /* 248 -> 268: the redesigned actions row needs ~229px and 248 left only 220, so the kebab wrapped (Rishabh, 2026-09-02) */
#evLibrary .evlib-card { transition:box-shadow .16s, transform .16s; }
#evLibrary .evlib-card:hover { box-shadow:rgba(13,22,33,.06) 0 2px 3px, rgba(13,22,33,.12) 0 12px 28px -10px, rgba(255,255,255,.94) 0 1px 0 inset, rgba(13,22,33,.07) 0 0 0 1px; transform:translateY(-2px); }
.evlib-badge { font-size:11px; font-weight:650; padding:2px 9px; border-radius:20px; white-space:nowrap; display:inline-flex; align-items:center; gap:5px; line-height:1.5; }
.evlib-badge .d { width:6px; height:6px; border-radius:50%; background:currentColor; }
.evlib-badge.draft { background:var(--ev-subtle); color:var(--ev-muted-2); border:1px solid var(--ev-line); }
.evlib-badge.live, .evlib-badge.accepted, .evlib-badge.edit { background:var(--ev-ok-2-bg); color:var(--ev-ok-2); border:1px solid var(--ev-ok-2-line); }
.evlib-badge.read { background:var(--ev-read-bg); color:var(--ev-read); border:1px solid var(--ev-read-line); }
.evlib-badge.invited { background:var(--ev-invited-bg); color:var(--ev-invited); }
.evlib-badge.retired { background:var(--fac-draft-bg); color:var(--ev-sub); }
#evLibrary .btn.danger { color:var(--ev-danger); }
#evLibrary .btn.danger:hover { color:var(--ev-danger); box-shadow:0 2px 6px rgba(11,26,20,.08), 0 0 0 1px rgba(180,35,24,.35); }
/* When the ⋮ kebab lives in the card foot (book cards) instead of the absolute top-right. */
.evlib-kebab-foot { position:static; top:auto; right:auto; margin:0; width:30px; height:30px; display:inline-grid; place-items:center; color:var(--ev-faint); font-size:13.5px; border-radius:8px; }
.evlib-new small { display:block; font-size:12px; color:var(--ev-faint); margin-top:2px; }
.evlib-controls { display:flex; align-items:center; gap:12px; flex-wrap:wrap; margin-bottom:18px; }
/* "Sort  Recently edited ⌄" is ONE control: the label lives inside the white box with the value (the team member's) */
.evlib-glabel { font-size:10.5px; color:var(--ev-faint); display:inline-flex; align-items:center; gap:2px; height:34px; padding:0 0 0 12px; background:var(--ev-surface); border-radius:10px; box-shadow:rgba(13,22,33,.035) 0 1px 1px, rgba(13,22,33,.07) 0 2px 5px -2px, rgba(255,255,255,.94) 0 1px 0 inset, rgba(13,22,33,.055) 0 0 0 1px; }
.evlib-glabel:hover { box-shadow:rgba(13,22,33,.06) 0 2px 3px, rgba(13,22,33,.1) 0 6px 14px -6px, rgba(255,255,255,.94) 0 1px 0 inset, rgba(13,22,33,.08) 0 0 0 1px; }
.evlib-glabel .evlib-select { border:0; box-shadow:none; background-color:transparent; height:34px; padding:0 30px 0 6px; border-radius:0 10px 10px 0; }
.evlib-glabel .evlib-select:hover, .evlib-glabel .evlib-select:focus { border:0; box-shadow:none; }
.evlib-select { font:inherit; font-size:13px; font-weight:500; color:var(--ev-ink-strong); background:var(--ev-surface) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%235c6b63' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E") no-repeat right 9px center / 13px 13px; border:1px solid var(--ev-btn-line); border-radius:10px; padding:7px 28px 7px 11px; cursor:pointer; appearance:none; -webkit-appearance:none; box-shadow:0 1px 2px rgba(11,26,20,.04); }
.evlib-select:hover { border-color:var(--ev-btn-line-hover); }
.evlib-select:focus { outline:none; border-color:var(--ev-focus-ring); }
.evlib-search { font:inherit; font-size:13px; height:38px; color:var(--ev-ink-strong); background:var(--ev-surface) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238a958d' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='M20 20l-3.5-3.5'/%3E%3C/svg%3E") no-repeat 14px center / 15px 15px; border:0; border-radius:10px; padding:0 14px 0 38px; min-width:220px; flex:1 1 220px; box-shadow:rgba(13,22,33,.1) 0 1px 2.5px inset, rgba(13,22,33,.05) 0 0 0 1px inset; }
.evlib-search::placeholder { color:var(--ev-placeholder); }
.evlib-search:hover { box-shadow:rgba(13,22,33,.1) 0 1px 2.5px inset, rgba(13,22,33,.05) 0 0 0 1px inset, 0 0 0 1px rgba(11,26,20,.06); }
.evlib-search:focus { outline:none; box-shadow:rgba(13,22,33,.1) 0 1px 2.5px inset, rgba(13,22,33,.05) 0 0 0 1px inset, 0 0 0 2px var(--ev-focus-ring); }
.evlib-search::placeholder { color:var(--ev-faint); }
.evlib-iconbtn { display:inline-grid; place-items:center; width:30px; height:30px; padding:0; border:1px solid var(--ev-line); background:var(--ev-surface); border-radius:8px; color:var(--ev-muted-2); cursor:pointer; }
.evlib-iconbtn:hover { border-color:var(--ev-btn-line-hover); color:var(--ev-ink-strong); }
.evlib-iconbtn svg { width:17px; height:17px; }
.evlib-seg { display:inline-flex; background:#f1f1f4; border:0; border-radius:10px; padding:3px; gap:2px; box-shadow:rgba(13,22,33,.1) 0 1px 2.5px inset, rgba(13,22,33,.05) 0 0 0 1px inset; }
.evlib-seg button { border:0; background:transparent; color:var(--ev-muted-2); height:28px; padding:0 14px; border-radius:8px; font-size:12.5px; font-weight:500; cursor:pointer; font-family:inherit; display:inline-flex; align-items:center; transition:background .12s, color .12s; }
.evlib-seg button:hover { color:var(--ev-ink-strong); }
.evlib-seg button.on { background:var(--ev-ink-strong); color:var(--ev-on-ink); box-shadow:rgba(11,26,20,.18) 0 1px 1px, rgba(11,26,20,.3) 0 5px 12px -4px, rgba(255,255,255,.17) 0 1px 0 inset; }
.evlib-seg button svg { width:16px; height:16px; display:block; }
/* A "wide" segmented control fills its container and splits the width evenly across its buttons -
   used when a seg sits in a fixed-width column (the Access | Scope row) so it never overflows and
   both columns line up (prototype .seg.segwide). */
.evlib-seg.segwide { display:flex; width:100%; }
/* R6-4 / R7-1: even, centred pills. min-height 2.5rem = the natural height of a TWO-LINE wrapped pill, so
   a 1-line pill (e.g. "Read only") renders the SAME height as a wrapped one (e.g. "Specific chapters").
   That keeps the Access and Scope columns level in the 2-column row even when a scope label wraps. */
.evlib-seg.segwide button { flex:1; text-align:center; display:flex; align-items:center; justify-content:center; min-height:2.5rem; line-height:1.15; }
/* Two-column field row (prototype .frow): Access | Scope sit side by side, collapsing to one column
   on a narrow viewport. Grid cells get min-width:0 so a wide seg shrinks to the column, not past it. */
.evlib-frow { display:grid; grid-template-columns:1fr 1fr; gap:14px; align-items:start; }
.evlib-frow > * { min-width:0; }
@media (max-width:520px) { .evlib-frow { grid-template-columns:1fr; } }
.evlib-chip { display:inline-flex; align-items:center; gap:3px; font-size:12px; font-weight:500; padding:3px 4px 3px 9px; border-radius:99px; background:var(--ev-subtle); border:1px solid var(--ev-line); color:var(--ev-ink-strong); }
.evlib-chip b { color:var(--ev-muted); font-weight:700; padding:0 4px; }
/* Full-width "add" row at the bottom of a table (studio New-book row / Versions Start-a-new-version
   row) - the table sibling of the card grid's dashed .evlib-new tile. */
.tts-tbl tr.tv-footrow td { padding:0; }
.evlib-addrow { display:flex; flex-direction:column; align-items:center; justify-content:center; gap:1px; padding:.7rem; cursor:pointer; text-align:center; color:var(--ev-muted); border-top:1px dashed var(--ev-line-warm); background:var(--ev-white); }
.evlib-addrow:hover { color:var(--ev-accent); background:var(--ev-subtle); }
.evlib-addrow .lead { font-weight:650; font-size:.9rem; }
.evlib-addrow small { color:var(--ev-faint); font-size:.76rem; }
.evlib-addrow:hover small { color:var(--ev-accent); }
.evlib-gshelf { margin-bottom:26px; }
.evlib-gh { display:flex; align-items:center; gap:10px; margin-bottom:12px; }
.evlib-gh h3 { font-family:var(--ev-display); font-size:14.5px; font-weight:500; margin:0; color:var(--ev-ink-strong); }
.evlib-gh .rule { flex:1; height:1px; background:var(--ev-rule); }
.evlib-gh .n { font-size:12px; color:var(--ev-faint); white-space:nowrap; }
/* ── Professional table look for EVERY dashboard tableView (Drafts / Manage readers /
   Shared with me use ONE component + this ONE style). Scoped to #evLibrary + built on the
   shared .tts-tbl markup so the sort/filter (tv-sort/tv-filter + tvBuildFilterPop) still work.
   Width is left to context: the sbm-wrap rule keeps Manage-readers columns content-sized. */
#evLibrary .evlib-tvwrap { border:1px solid var(--ev-line); border-radius:13px; overflow:hidden; background:var(--ev-surface); box-shadow:0 1px 2px rgba(11,26,20,.04); }
#evLibrary .evlib-tvscroll { overflow-x:auto; max-width:100%; }
#evLibrary .tts-tbl { font-size:13.5px; }
/* Studio table: content-sized columns (auto layout) + nowrap so the Actions cell (Open/Manage/Share)
   never clips; the .evlib-tvscroll wrapper scrolls if the row genuinely can't fit. Scoped to the studio
   table only, so the other dashboard tables keep their layout. */
#evLibrary .evlib-studiotbl .tts-tbl { table-layout:auto; width:100%; }
#evLibrary .evlib-studiotbl .tts-tbl th, #evLibrary .evlib-studiotbl .tts-tbl td { white-space:nowrap; }
/* Readers (Rishabh 2026-09-12): the table must not scroll sideways, and the Domain / Topics NAMES must stay (a selective share is
   only readable by its names). So every Readers cell may wrap, and the two name cells get a width band so they read as two or
   three lines rather than a column of single words. The +N more tail stays on the last line. Buttons never wrap. */
#evLibrary .evlib-readers .tts-tbl th, #evLibrary .evlib-readers .tts-tbl td { white-space:normal; vertical-align:top; line-height:1.35; }
#evLibrary .evlib-readers .tts-tbl td.evlib-wrap { min-width:120px; max-width:300px; }   /* 120 not 170: eight columns must fit a 1024 px tablet without the table scrolling (visual sweep 2026-09-12) */
#evLibrary .evlib-readers .tts-tbl td .bk { overflow-wrap:anywhere; }   /* a long e-mail may break rather than push the table wider */
#evLibrary .evlib-readers .tts-tbl td .btn, #evLibrary .evlib-readers .tts-tbl td select { white-space:nowrap; }
#evLibrary .evlib-studiotbl td.num, #evLibrary .evlib-studiotbl td.subj { color:var(--ev-muted); font-variant-numeric:tabular-nums; }
#evLibrary .evlib-studiotbl td.num .vacc { color:var(--ev-accent-ink); font-weight:650; }
#evLibrary .tts-tbl thead th { text-align:left; font-size:12px; letter-spacing:.02em; color:var(--ev-muted); font-weight:500; padding:10px 16px; border-bottom:1px solid var(--ev-line); background:var(--ev-subtle); white-space:nowrap; position:static; }
#evLibrary .tts-tbl tbody td { padding:12px 16px; border-bottom:1px solid var(--ev-rule); color:var(--ev-ink-strong); vertical-align:middle; }
#evLibrary .tts-tbl td:first-child, #evLibrary .tts-tbl th:first-child { padding-left:16px; }
#evLibrary .tts-tbl tbody tr:last-child td { border-bottom:0; }
#evLibrary .tts-tbl tbody tr:hover { background:var(--ev-row-hover); }
#evLibrary .tts-tbl .bk { font-weight:650; }
#evLibrary .tts-tbl .sub { color:var(--ev-muted-2); font-size:12.5px; }
#evLibrary .tts-tbl tr.grp td { border-top:1px solid var(--ev-line); }
#evLibrary .tts-tbl td.mem { font-weight:650; color:var(--ev-ink-strong); }
#evLibrary .tts-tbl td.subj { color:var(--ev-muted-2); }
#evLibrary .tts-empty { color:var(--ev-faint); padding:24px 16px; text-align:center; }
#evLibrary .tv-sort, #evLibrary .tv-filter { margin-left:.3rem; cursor:pointer; color:var(--ev-glyph); font-size:.82em; }
#evLibrary .tv-sort:hover, #evLibrary .tv-filter:hover { color:var(--ev-accent); }
#evLibrary .tv-sort.tv-on, #evLibrary .tv-filter.tv-on { color:var(--ev-accent); }
#evLibrary .evlib-rowacts { display:flex; gap:6px; justify-content:flex-end; align-items:center; }
#evLibrary .evmh-own { color:var(--ev-muted); font-size:12px; white-space:nowrap; }
#evLibrary select.evmh-access { font-size:12px; padding:2px 6px; border:1px solid var(--ev-input-line); background:var(--ev-input-bg); color:var(--ev-ink); border-radius:6px; cursor:pointer; }
#evLibrary select.evmh-access:hover { border-color:var(--ev-input-line-hover); }
/* P3 per-book Manage hub (header + Overview + actions). Fidelity S3: spine + At-a-glance KV list. */
.evmh-head { display:flex; align-items:flex-start; gap:1rem; margin-bottom:1.1rem; flex-wrap:wrap; }
.evmh-head h1 { font-family:var(--ev-display); font-size:24px; font-weight:600; letter-spacing:-.015em; margin:0; color:var(--ev-ink-strong); }
.evmh-spine { height:44px; width:9px; border-radius:99px; flex:none; margin-top:2px; }
.evmh-glance { border:1px solid var(--ev-line); background:var(--ev-surface); border-radius:14px; padding:1.1rem 1.25rem; max-width:560px; }
.evmh-glance h4 { margin:0 0 .85rem; font-size:.95rem; font-weight:680; color:var(--ev-ink-strong); }
.evmh-kv { display:grid; grid-template-columns:max-content 1fr; gap:.55rem 1.4rem; align-items:center; }
.evmh-kv .k { color:var(--ev-faint); font-size:12px; font-weight:500; }
.evmh-crumb { display:flex; align-items:center; gap:.4rem; font-size:12.5px; color:var(--ev-faint); margin-bottom:.7rem; flex-wrap:wrap; }
.evmh-crumblink { background:none; border:0; padding:0; font:inherit; color:var(--ev-accent-ink); font-weight:650; cursor:pointer; }
.evmh-crumblink:hover { text-decoration:underline; }
.evmh-meta { font-size:12.5px; color:var(--ev-faint); margin-top:3px; }
.evmh-kv .v { font-size:.9rem; color:var(--ev-ink-strong); }
.evmh-future { border:1px dashed var(--ev-line); border-radius:14px; padding:1.05rem 1.25rem; margin-top:.9rem; max-width:560px; }
.evmh-future h4 { margin:0 0 .3rem; color:var(--ev-ink-strong); font-size:.95rem; font-weight:680; }
.evmh-future p { color:var(--ev-muted); font-size:.85rem; }
.evlib-soon { font-size:.56rem; letter-spacing:.06em; text-transform:uppercase; background:var(--ev-subtle); color:var(--ev-faint); padding:2px 5px; border-radius:5px; font-weight:700; margin-left:.3rem; vertical-align:middle; }
.evmh-ov { max-width:720px; }
.evmh-acts { display:flex; gap:8px; flex-wrap:wrap; }
@media (max-width:860px) {
  .evlib-shell { grid-template-columns:1fr; }
  .evlib-side { position:static; height:auto; flex-direction:row; align-items:center; flex-wrap:wrap; gap:8px; padding:12px 14px; }
  .evlib-sbrand { padding:0 8px 0 0; }
  .evlib-navlabel, .evlib-sfoot, .evlib-connect { display:none; }
  .evlib-nav { flex-direction:row; flex-wrap:wrap; gap:6px; margin-left:auto; }
  .evlib-content { padding:20px 18px 50px; }
  .evlib-vhead h1 { font-size:20px; }
}
/* Tablet band (861-1199 px, Rishabh 2026-09-12): the sidebar collapses to its ICONS (72 px) so the content keeps ~900 px at
   1024 - the eight-column Readers table needs ~890 px and the 256 px sidebar left it 698 (visual sweep). Labels move to
   tooltips (each nav button carries its label as title); the account footer keeps the avatar and the two small buttons. */
@media (min-width:861px) and (max-width:1199px) {
  .evlib-shell { grid-template-columns:72px 1fr; }
  .evlib-side { padding:14px 8px; align-items:stretch; }
  .evlib-sbrand { justify-content:center; padding:4px 0 12px; }
  .evlib-sbrand b, .evlib-navlabel, .evlib-connect .sc-x, .evlib-connect .sc-chev, .evlib-nav button > span:not(.evlib-navbadge), .evlib-acct .who { display:none; }
  .evlib-connect { justify-content:center; padding:8px 0; }
  .evlib-nav button { position:relative; justify-content:center; padding:10px 0; }
  .evlib-navbadge { position:absolute; top:2px; right:4px; margin-left:0; }
  .evlib-acct { justify-content:center; padding:6px; }
  .evlib-sfoot .evlib-facts { flex-direction:column; gap:4px; }   /* two buttons side by side overflowed the 72px rail (RUN 1024px) */
  .evlib-sfoot .evlib-facts .btn { font-size:11px; padding:5px 2px; width:100%; }
  .evlib-content { padding:22px 22px 60px; }
}

/* Manage hub: the Overview card's level switch (the version you came from / the whole book) + the Versions
   row you arrived from. The switch is the existing .evlib-seg; the pills carry real names, so cap them. */
/* Heading left, level pills right, ONE row (Rishabh 2026-09-09: "same row as At a glance"): the pills shrink to
   the room the heading leaves rather than wrapping under it. */
.evmh-glance-head { display:flex; align-items:center; justify-content:space-between; gap:.8rem; margin-bottom:.85rem; flex-wrap:nowrap; }
.evmh-glance-head h4 { margin:0; flex:0 0 auto; white-space:nowrap; }
/* Inside a pill the name (.t) gives way to an ellipsis while the distinguishing tag (.v, " - v3") keeps its full
   width - so two pills that start with the same long title never read as the same pill. */
.evmh-glance .evlib-seg { display:flex; min-width:0; flex:0 1 auto; }
.evmh-glance .evlib-seg button { display:inline-flex; align-items:center; min-width:0; flex:0 1 auto; white-space:nowrap; }   /* center, not baseline: an overflow:hidden span (.t) synthesises its baseline from its box edge, so the name text sat above the tag and the pill grew (Rishabh 2026-09-14: "text not aligned in the toggle") */
.evmh-glance .evlib-seg button .t { min-width:0; overflow:hidden; text-overflow:ellipsis; }
.evmh-glance .evlib-seg button .v { flex:0 0 auto; }
.evmh-focus { font-weight:720; }
#evLibrary tr:has(.evmh-focus) td { background:var(--ev-subtle); }

/* MU-1 Manage › Editors + Contributions (owner only). The add row reuses the modal field look (.evb-field input) so the tab matches the rest of the hub. */
.evmh-editors-add { display:flex; gap:.5rem; align-items:center; margin:0 0 .8rem; max-width:560px; }
.evmh-editors-add input { flex:1; min-width:0; font:inherit; background:var(--ev-input-bg); border:1px solid var(--ev-input-line); border-radius:10px; padding:.6rem .7rem; color:var(--ev-ink); }
.evmh-editors-add input:focus { outline:none; box-shadow:0 0 0 2px var(--ev-focus-ring); }
.evmh-muted { color:var(--ev-muted); }