/* Hall CV Manager — local styles. Light/dark aware. */
:root {
  --bg: #f6f7f9;
  --panel: #ffffff;
  --ink: #1a1f29;
  --muted: #5b6472;
  --line: #e2e6ec;
  /* THE OPUS PORTFOLIO PALETTE, sampled from the logo itself (the rose-to-
     slate book-and-nib mark): slate carries the interface — buttons, links,
     focus — because a full page of rose reads like a warning; rose is the
     secondary that used to be gold; the nib's plum is there for anything that
     wants the mark's own ink. Emory blue/gold retired 2026-08-19 with the
     logo change. */
  --brand: #4e6481;        /* slate — from the logo's right edge */
  --brand-2: #8c5665;      /* rose — from the logo's left edge */
  --plum: #6f5c72;         /* the nib */
  --accent: #4e6481;
  --danger: #c0392b;
  --ok: #1f8a4c;
  --chip: #eef1f6;
  --card: #ffffff;         /* input/card surfaces referenced as var(--card,#fff) */
  --link: #1a56b0;
  --shadow: 0 1px 3px rgba(16,24,40,.08), 0 1px 2px rgba(16,24,40,.06);
  --radius: 10px;
}
/* Explicit dark (Settings ▸ Theme = Dark) — forces dark regardless of the OS. */
:root[data-theme="dark"] {
  --bg: #0f1420; --panel: #161c2b; --ink: #e8ecf3; --muted: #9aa5b5;
  --line: #26304a; --brand: #8ba3c4; --accent: #8ba3c4; --chip: #1e2740;
  --card: #1e2740; --link: #a5b8d6;
  --shadow: none;
}
/* Auto: follow the OS, unless the user forced Light. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #0f1420; --panel: #161c2b; --ink: #e8ecf3; --muted: #9aa5b5;
    --line: #26304a; --brand: #8ba3c4; --accent: #8ba3c4; --chip: #1e2740;
    --card: #1e2740; --link: #a5b8d6;
    --shadow: none;
  }
}
/* ---- icons -------------------------------------------------------------
   The sprite in index.html carries geometry only; presentation lives HERE, so
   one rule flips the whole set with the theme. `stroke:currentColor` is what
   makes an icon inherit the colour of whatever row/button it sits in.

   The 16px toolbar size is not the only size these get drawn at — a doc-tile
   marker wants 20px and an empty state 34px — so the STROKE is stepped WITH
   the box. Held at a constant 1.5, the identical glyph renders a ~3.2px stroke
   in an empty state and a ~1.0px one in a chip, and the set stops looking like
   a set. Sizes are stepped, never `1em`.
   `vertical-align` because these sit inline beside text. */
.ico-i { width: 16px; height: 16px; flex: none; display: inline-block; vertical-align: -.15em;
  fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
/* 13px, not 11px: a 1.5-weight glyph drawn in a 16-unit box is a smudge below
   about 12px. */
.ico-i.sm { width: 13px; height: 13px; stroke-width: 1.75; }
.ico-i.lg { width: 20px; height: 20px; stroke-width: 1.3; }
.ico-i.xl { width: 34px; height: 34px; stroke-width: 1.05; }
/* Anything U.el built with `ico:` gets the label laid out beside the glyph.
   Buttons here are otherwise inline-block with a text label, so opting in per
   element (rather than restyling .btn wholesale) keeps every untouched control
   pixel-identical. */
.has-ico { display: inline-flex; align-items: center; gap: 6px; }
.has-ico.icon, button.icon.has-ico { justify-content: center; }
/* Headings put the glyph next to bold text; it should sit ON the baseline run. */
h2 .ico-i, h3 .ico-i, .so-head h2 .ico-i { vertical-align: -.16em; }

/* `hidden` must beat every display rule in this sheet. A class selector like
   .has-ico (display:inline-flex) outranks the UA's [hidden]{display:none} on
   specificity, which turned the header's fold into a silent no-op: the buttons
   kept their layout box at full width, hiding them freed nothing, and
   fitHeader folded the ENTIRE action rail trying to reclaim 25px. */
[hidden] { display: none !important; }

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; height: 100%; }
body {
  font: 14px/1.5 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  background: var(--bg); color: var(--ink);
  display: flex; flex-direction: column; height: 100vh; overflow: hidden;
  /* app chrome is pinned: the app bar and the footer never scroll away —
     the .view below is the only vertical scroller */
}
code { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: .9em;
  background: var(--chip); padding: 1px 5px; border-radius: 5px; }
a { color: var(--accent); }

/* ================= THE TWO-ROW HEADER =================
   Row 1 is identity (what you have open + the one primary action); row 2 is
   scope (what you are looking at + everything that acts on it). One scale,
   scoped to the bar: every square control is --tb-ctl, there are two type
   sizes, two radii and three gaps, and nothing else. */
.appbar {
  --tb-h: 54px; --tb-ctl: 30px;
  --tb-gap: 6px; --tb-gap-2: 12px; --tb-pad: 14px;
  --tb-r: 8px;
  --tb-fs: 12.5px; --tb-fs-2: 11px;
  height: var(--tb-h); min-height: var(--tb-h);
  display: flex; align-items: center; gap: var(--tb-gap-2);
  padding: 0 var(--tb-pad);
  background: var(--panel); border-bottom: 1px solid var(--line);
  position: relative; z-index: 20;
  /* `clip`, never `hidden`. hidden makes the bar a SCROLL CONTAINER: focusing
     anything that sticks out sets scrollTop and shoves the crumb, the save
     state and the primary action off the top, with no scrollbar to bring them
     back. clip cannot scroll. The margin lets a focus ring at outline-offset
     breathe instead of being sliced off. `hidden` stays first as the fallback
     for any engine without clip. */
  overflow: hidden; overflow: clip; overflow-clip-margin: 5px;
}
.appbar .tb-zone { display: flex; align-items: center; min-width: 0; }
.appbar .tb-lead { flex: 0 1 auto; gap: 10px; min-width: 210px; }
/* basis 0, not auto. On auto the centre zone declares the search field's full
   width as its basis, loses the shrink argument against a long document name,
   and ends up narrower than the field centred inside it — overflowing its own
   zone in both directions. On basis 0 the zone takes exactly what is LEFT,
   which also makes its measured width the honest answer to "how much room is
   there for a search field?" — and that answer does not change when the field
   inside it is swapped for a button. */
.appbar .tb-mid { flex: 1 1 0; justify-content: center; overflow: hidden; }
.appbar .tb-trail { flex: 0 0 auto; gap: 10px; margin-left: auto; }
.appbar .tb-sep { width: 1px; height: 20px; background: var(--line); flex: none; }
.appbar.no-actions .tb-sep.tb-sep-act { display: none; }

.brand { display: flex; align-items: center; cursor: pointer; flex: none; }
.logo {
  display: grid; place-items: center; width: 32px; height: 32px; border-radius: 8px;
  background: var(--brand); color: #fff; font-weight: 800; letter-spacing: .5px; font-size: 13px;
}
/* The real mark. The PNG carries its own rounded corners and gradient, so the
   square behind it goes; border-radius stays as a guard for the PNG's corners
   at small sizes. Works on both themes because the logo does. */
.logo-img { display: block; width: 32px; height: 32px; border-radius: 8px; }

/* ---- one button primitive for the whole bar ---- */
.tb-btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; flex: none;
  height: var(--tb-ctl); min-width: var(--tb-ctl); padding: 0 8px; border-radius: var(--tb-r);
  font-size: var(--tb-fs); font-weight: 600; white-space: nowrap; cursor: pointer;
  color: var(--ink); background: var(--panel); border: 1px solid var(--line); }
.tb-btn:hover { background: var(--chip); border-color: var(--muted); }
.tb-btn.primary { background: var(--brand); border-color: var(--brand); color: #fff; }
.tb-btn.primary:hover { filter: brightness(1.08); }
.tb-btn[disabled] { opacity: .45; pointer-events: none; }
.tb-btn .tb-lbl { overflow: hidden; text-overflow: ellipsis; }

/* ---- title block: the trail on top, what the thing IS underneath ---- */
.appbar .tb-title { display: flex; flex-direction: column; justify-content: center; gap: 1px;
  min-width: 0; flex: 0 1 auto; }
.appbar .crumb-trail { display: flex; align-items: baseline; gap: 5px; min-width: 0; }
.appbar .crumb-sec { font-size: var(--tb-fs); font-weight: 600; color: var(--muted);
  padding: 1px 4px; margin-left: -4px; border-radius: 5px; max-width: 45%;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; flex: 0 999 auto;
  background: none; border: 0; cursor: pointer; font-family: inherit; }
.appbar .crumb-sec:hover { background: var(--chip); color: var(--ink); text-decoration: underline; }
.appbar .crumb-sep { color: var(--muted); opacity: .6; font-size: var(--tb-fs); flex: none; }
/* The name is the LAST thing in the bar to give up a pixel. */
.appbar .crumb-name-h { flex: 0 1 auto; min-width: 0; display: flex; }
.appbar .crumb-name { font-size: 15px; font-weight: 700; color: var(--ink); line-height: 1.2;
  flex: 0 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  background: none; border: 0; padding: 0; margin: 0; font-family: inherit; text-align: left; }
button.crumb-name { cursor: pointer; }
button.crumb-name:hover { text-decoration: underline; }
.appbar .crumb-meta { display: flex; align-items: center; gap: 7px;
  font-size: var(--tb-fs-2); line-height: 1.25; color: var(--muted);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-variant-numeric: tabular-nums; }
/* The kind glyph leads the facts line; the WORD follows one item later, so the
   icon never has to carry the meaning alone. */
.appbar .crumb-meta .ico-i { flex: none; }
.appbar .crumb-meta .warn { color: #a6690a; font-weight: 700; }
:root[data-theme="dark"] .appbar .crumb-meta .warn { color: #f0c67a; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .appbar .crumb-meta .warn { color: #f0c67a; } }

/* ---- search: a button that LOOKS like a field ----
   min-width:0, deliberately. A floor here does not win space, it just makes the
   field overflow the zone that could not give it. How small it may get before
   it becomes an icon is decided by fitHeader from the room actually left over —
   a long document name eats the middle of the bar long before the WINDOW is
   narrow enough to trip a width tier. */
#tb-search { display: flex; align-items: center; gap: 7px; flex: 1 1 auto;
  max-width: 320px; min-width: 0; height: var(--tb-ctl); padding: 0 9px; cursor: pointer;
  border-radius: var(--tb-r); background: var(--bg); border: 1px solid var(--line);
  color: var(--muted); font-size: var(--tb-fs); font-weight: 500; text-align: left; font-family: inherit; }
#tb-search:hover { border-color: var(--muted); color: var(--ink); }
#tb-search .tb-lbl { flex: 1; min-width: 0; }
.tb-kbd { font-size: 10px; font-weight: 600; color: var(--muted); border: 1px solid var(--line);
  border-radius: 4px; padding: 0 4px; line-height: 15px; flex: none; }
#tb-search-btn { display: none; }

/* ---- save state: shape first, colour second, words third ----
   A write that has permanently FAILED must not render identically to one in
   flight — that is the whole reason this is three states and not a boolean. */
#save-ind { display: flex; align-items: center; gap: 5px; flex: none; height: var(--tb-ctl);
  font-size: var(--tb-fs); font-weight: 600; color: var(--muted); padding: 0 2px; }
#save-ind[data-state="saved"] .tb-save-ico { color: var(--ok); }
#save-ind[data-state="saving"] .tb-save-ico { color: var(--muted); animation: tb-spin 1.4s linear infinite; }
#save-ind[data-state="error"] { color: var(--danger); }
#save-ind[data-state="error"] .tb-save-ico { color: var(--danger); }
@keyframes tb-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { #save-ind[data-state="saving"] .tb-save-ico { animation: none; } }
#save-retry { font-size: var(--tb-fs); font-weight: 700; color: var(--danger); text-decoration: underline;
  padding: 2px 4px; border-radius: 5px; border: 0; background: none; cursor: pointer; font-family: inherit; }
#save-retry:hover { background: var(--chip); }

/* Visually hidden, still announced. */
.vh { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden;
  clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0; }

/* ---- the ⋯ overflow menu ----
   position:fixed and appended to <body> by openMoreMenu(), NEVER inside the
   bar: the bar is overflow:clip and 54px tall, so a menu laid out inside it
   would be invisible AND un-hittable — clicks would land on whatever sits
   underneath. z-index sits below the app's dialogs on purpose, because a
   dialog opened FROM the menu must cover it. */
#tb-more-menu { position: fixed; z-index: 60; min-width: 232px; max-width: 340px; padding: 5px;
  background: var(--panel); border: 1px solid var(--line); border-radius: 10px;
  box-shadow: 0 12px 32px rgba(16,24,40,.18), 0 2px 8px rgba(16,24,40,.10); }
:root[data-theme="dark"] #tb-more-menu { box-shadow: 0 12px 32px rgba(0,0,0,.55); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) #tb-more-menu { box-shadow: 0 12px 32px rgba(0,0,0,.55); } }
.tb-menu-item { display: flex; align-items: center; gap: 9px; width: 100%;
  padding: 7px 9px; border-radius: 6px; font-size: 13px; font-weight: 600;
  color: var(--ink); text-align: left; background: none; border: 0; cursor: pointer; font-family: inherit; }
.tb-menu-item:hover, .tb-menu-item:focus-visible { background: var(--chip); }
.tb-menu-item .ico-i { color: var(--muted); }
.tb-menu-item .tb-lbl { flex: 1; min-width: 0; }
.tb-menu-item.danger { color: var(--danger); }
.tb-menu-item.danger .ico-i { color: var(--danger); }
#tb-more-menu [role="separator"] { height: 1px; margin: 5px 7px; background: var(--line); }

/* ---- responsive tiers ----
   Applied by fitHeader from the MEASURED bar width, unconditionally and BEFORE
   any early return — how much room the WINDOW has is not a property of which
   route happens to be open. */
.appbar.t-tight .tb-lead { min-width: 150px; }
.appbar.t-tight #save-txt { display: none; }        /* the words live on in #save-live */
.appbar.t-tight .crumb-meta { display: none; }
.appbar.t-tight #tb-search { max-width: 210px; }
.appbar.t-tiny .tb-lead { min-width: 120px; }
.appbar.t-tiny .brand { display: none; }
.appbar.t-nano .tb-lead { min-width: 84px; }
/* The search ladder, driven by measured leftover space rather than window
   width. The ⌘K badge goes first (it is a hint, not the control), then the
   wording, then the affordance itself — ⌘K still reaches the palette at every
   rung. */
.appbar.s-nokbd .tb-kbd { display: none; }
.appbar.s-icon #tb-search { display: none; }
.appbar.s-icon #tb-search-btn { display: inline-flex; }
.appbar.s-none #tb-search-btn { display: none; }
.appbar.t-nano .tb-btn.primary .tb-lbl { display: none; }

/* ---- the scope row ---- */
#scopebar { display: flex; align-items: center; gap: 8px; min-height: 44px;
  padding: 0 var(--tb-pad, 14px); background: var(--panel); border-bottom: 1px solid var(--line);
  position: relative; z-index: 19;
  overflow: hidden; overflow: clip; overflow-clip-margin: 5px; }
#scopebar[hidden] { display: none; }
/* The tab strip keeps its natural width (flex:none) and #scope-left clips it
   when squeezed — that clipping is the signal fitHeader folds on. Letting the
   strip itself shrink instead made the row "fit" at every width while the tabs
   became an unreadable stub. Past full fold it scrolls inside its own box, so
   the PAGE still never scrolls sideways. */
#scope-left { display: flex; align-items: center; gap: 10px; min-width: 0; flex: 1 1 auto;
  overflow-x: auto; scrollbar-width: none; }
#scope-left::-webkit-scrollbar { display: none; }
#scope-left select { padding: 5px 9px; border: 1px solid var(--line); border-radius: 7px;
  font-size: 12.5px; font-weight: 600; background: var(--panel); color: var(--ink); font-family: inherit; }
#topbar-actions { display: flex; align-items: center; gap: 6px; flex: 0 0 auto; }

/* The tab strip: a segmented control, because the tabs are mutually exclusive
   views of ONE document — that is what "scope" means on this route. */
.seg { display: flex; align-items: center; gap: 2px; padding: 2px; border-radius: 9px;
  background: var(--chip); flex: none; }
.seg button { display: inline-flex; align-items: center; gap: 5px; flex: none;
  border: 1px solid transparent; background: transparent; color: var(--muted);
  padding: 4px 10px; border-radius: 7px; cursor: pointer; font-size: 12.5px; font-weight: 600;
  font-family: inherit; white-space: nowrap; }
.seg button:hover { color: var(--ink); }
.seg button.active { background: var(--panel); color: var(--ink); box-shadow: var(--shadow); }
:root[data-theme="dark"] .seg button.active { background: var(--brand); color: #fff; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .seg button.active { background: var(--brand); color: #fff; } }

.am-save { cursor: default; color: var(--muted); font-weight: 700; font-size: 12.5px; }
.am-save:hover { background: transparent; }

button.btn {
  border: 1px solid var(--line); background: var(--panel); color: var(--ink);
  padding: 7px 12px; border-radius: 8px; cursor: pointer; font-size: 13px; font-weight: 600;
}
button.btn:hover { border-color: var(--accent); }
button.btn.primary { background: var(--brand); color: #fff; border-color: var(--brand); }
button.btn.gold { background: var(--brand-2); color: #fff; border-color: var(--brand-2); }
button.btn.ghost { background: transparent; }
button.btn.sm { padding: 3px 8px; font-size: 12px; }
button.btn.danger { color: var(--danger); }
button.icon { border: none; background: transparent; cursor: pointer; color: var(--muted);
  font-size: 15px; padding: 2px 6px; border-radius: 6px; }
button.icon:hover { background: var(--chip); color: var(--ink); }

.statusbar { padding: 8px 16px; font-size: 13px; font-weight: 600; text-align: center; }
.statusbar.ok { background: #e7f6ee; color: #145c34; }
.statusbar.warn { background: #fef3e0; color: #7a4b00; }
.statusbar.err { background: #fdeceb; color: #8a231b; }

/* Layout */
.view { flex: 1; min-height: 0; overflow-y: auto; padding: 22px 16px 48px; max-width: 1100px; width: 100%; margin: 0 auto; }
.view.wide { max-width: none; padding: 16px 20px 40px; }   /* editor uses the full window width */
.appfoot {
  display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap;
  padding: 10px 16px; font-size: 11.5px; color: var(--muted);
  border-top: 1px solid var(--line); background: var(--panel);
}

/* Cards */
.card { background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius);
  box-shadow: var(--shadow); padding: 16px 18px; margin-bottom: 16px; }
.card h2 { margin: 0 0 4px; font-size: 16px; }
.card h3 { margin: 0 0 10px; font-size: 14px; color: var(--muted); text-transform: uppercase; letter-spacing: .04em; }
.muted { color: var(--muted); }

/* Dashboard */
.grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px,1fr)); gap: 12px; }
.stat { background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 14px; box-shadow: var(--shadow); }
.stat .n { font-size: 26px; font-weight: 800; color: var(--brand); }
.stat .l { font-size: 12px; color: var(--muted); margin-top: 2px; }
.tiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(244px,1fr)); gap: 14px; }
.tile { display: flex; flex-direction: column; gap: 6px; text-align: left;
  background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 14px; cursor: pointer; box-shadow: var(--shadow); }
.tile:hover { border-color: var(--accent); }
.tile .t { font-weight: 700; }
.tile .d { font-size: 12px; color: var(--muted); }

/* Section list */
.sec-list { display: grid; gap: 8px; }
.sec-row { display: flex; align-items: center; gap: 12px; padding: 10px 12px;
  border: 1px solid var(--line); border-radius: 9px; background: var(--panel); cursor: pointer; box-shadow: var(--shadow); }
.sec-row:hover { border-color: var(--accent); }
.sec-row .num { width: 26px; height: 26px; border-radius: 7px; background: var(--chip);
  display: grid; place-items: center; font-weight: 700; font-size: 12px; flex: none; }
.sec-row .title { font-weight: 600; flex: 1; }
.sec-row .count { font-size: 12px; color: var(--muted); }

/* Editor tree */
.tree { display: grid; gap: 10px; min-width: 0; }
.tree > * , .grp, .entry { min-width: 0; }   /* grid/flex children must be allowed to shrink */
.grp { border-left: 3px solid color-mix(in srgb, var(--brand) 30%, var(--line)); padding-left: 12px; margin: 4px 0; }
/* group title band — tinted so sub-blocks ("Manuscripts", "Conference Abstracts", …)
   stand out from the entries when a section holds many groups; nested groups go lighter */
.grp > .grp-head { display: flex; align-items: center; gap: 8px; margin-bottom: 8px;
  background: color-mix(in srgb, var(--brand) 12%, var(--panel));
  border: 1px solid color-mix(in srgb, var(--brand) 22%, var(--line));
  border-radius: 8px; padding: 5px 8px; }
.grp > .grp-head .lbl { font-weight: 700; color: var(--brand); }
.grp > .grp-head input { flex:1 1 60px; min-width:0; width:auto; background: transparent; border: none; outline: none; color: var(--brand); font-weight: 700; }
.grp > .grp-head input:focus { background: var(--panel); border-radius: 4px; }
.grp .grp > .grp-head { background: color-mix(in srgb, var(--brand) 6%, var(--panel));
  border-color: color-mix(in srgb, var(--brand) 14%, var(--line)); }
.grp-toggle { flex:none; width:22px; height:22px; border:1px solid var(--line); background:var(--panel); color:var(--muted);
  cursor:pointer; border-radius:6px; font-size:11px; line-height:1; display:grid; place-items:center; }
.grp-toggle:hover { background:var(--chip); color:var(--ink); border-color:var(--accent); }
.grp-count { flex:none; font-size:11px; color:var(--muted); background:var(--chip); border-radius:20px; padding:1px 8px; }
.tree.collapsed { display:none; }
.entry { border: 1px solid var(--line); border-radius: 8px; background: var(--panel); padding: 8px 10px; }
.entry .row { display: flex; gap: 8px; align-items: flex-start; min-width: 0; }
.entry textarea { width: 100%; border: 1px solid var(--line); border-radius: 7px; padding: 8px;
  font: 13px/1.5 ui-monospace, Menlo, monospace; resize: vertical; min-height: 46px; background: var(--bg); color: var(--ink); }
.entry .ops { display: flex; flex-direction: column; gap: 2px; flex: none; }
.grp-head .grp-ops { display: flex; flex-direction: row; gap: 2px; flex: none; }
.tree-add { gap: 6px; margin-top: 2px; }
/* structured field entries (Education) */
.entry.fieldentry { border:1px solid var(--line); border-radius:9px; background:var(--panel); overflow:hidden; }
.fe-head { display:flex; align-items:center; gap:8px; padding:8px 10px; cursor:pointer; }
.fe-head:hover { background:var(--chip); }
.fe-chev { border:0; background:transparent; color:var(--muted); font-size:12px; cursor:pointer; flex:none; width:14px; }
.fe-summary { flex:1; min-width:0; font-size:13.5px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.entry.fieldentry .fe-grid { padding:2px 10px 10px; }
.fe-preview { font-size:12.5px; color:var(--muted); margin-bottom:6px; font-style:italic; }
.fe-grid { display:grid; grid-template-columns:repeat(4, minmax(0,1fr)); gap:6px 10px; flex:1; }
.fe-field { display:flex; flex-direction:column; gap:2px; font-size:11px; color:var(--muted); }
.fe-field input { font-size:13px; padding:4px 6px; border:1px solid var(--line); border-radius:6px; background:var(--card,#fff); color:var(--ink); }
@media (max-width:820px) { .fe-grid { grid-template-columns:repeat(2, minmax(0,1fr)); } }
.addrow { display: flex; gap: 8px; }

/* Preview (rendered CV) */
.preview { background: #fff; color: #111; border: 1px solid var(--line); border-radius: var(--radius);
  padding: 40px 48px; box-shadow: var(--shadow); max-width: 850px; margin: 0 auto; }
@media (prefers-color-scheme: dark) { .preview { background: #f7f7f7; } }
.preview .cvhead { text-align: center; font-weight: 700; }
.preview ol.top { list-style: none; padding: 0; margin: 14px 0 0; counter-reset: sec; }
.preview ol.top > li { counter-increment: sec; margin: 12px 0; padding-left: 30px; position: relative; }
.preview ol.top > li::before { content: counter(sec) "."; position: absolute; left: 0; font-weight: 700; }
.preview ol.lvl { margin: 4px 0; padding-left: 22px; }
.preview .sectitle { font-weight: 700; }
.preview.onepage { font-size: 12.5px; }
.preview.onepage h4 { text-decoration: underline; margin: 12px 0 4px; text-transform: uppercase; font-size: 12px; }
.preview.onepage ul { margin: 0 0 6px; padding-left: 20px; list-style: none; }

/* Additions composer */
.composer textarea { width: 100%; min-height: 160px; border: 1px solid var(--line); border-radius: 8px;
  padding: 10px; font: 13px/1.5 ui-monospace, Menlo, monospace; background: var(--bg); color: var(--ink); }
select, input[type=text], input[type=date], input[type=number] { border: 1px solid var(--line); border-radius: 7px; padding: 7px 9px;
  background: var(--panel); color: var(--ink); font-size: 13px; }
.field { display: flex; flex-direction: column; gap: 5px; margin-bottom: 10px; }
.field label { font-size: 12px; font-weight: 700; color: var(--muted); }
.row-inline { display: flex; gap: 10px; flex-wrap: wrap; align-items: flex-end; min-width:0; }
.row-inline > input[type="text"] { flex:1 1 110px; min-width:60px; }

pre.tex { background: var(--bg); border: 1px solid var(--line); border-radius: 8px; padding: 12px;
  overflow: auto; font-size: 12px; max-height: 60vh; }
.hint { font-size: 12px; color: var(--muted); }
.kbd { background: var(--chip); border: 1px solid var(--line); border-radius: 5px; padding: 1px 6px; font-size: 12px; }

/* ---- theme toggle overrides (Settings) ---- */
:root[data-theme="dark"] { --bg:#0f1420; --panel:#161c2b; --ink:#e8ecf3; --muted:#9aa5b5; --line:#26304a; --chip:#1e2740; --card:#1e2740; --link:#8ab4f8; --shadow:none; }
:root[data-theme="light"] { --bg:#f6f7f9; --panel:#ffffff; --ink:#1a1f29; --muted:#5b6472; --line:#e2e6ec; --chip:#eef1f6; --shadow:0 1px 3px rgba(16,24,40,.08); }

/* ---- library home ---- */
.libbar { display:flex; gap:8px; margin-bottom:16px; flex-wrap:wrap; align-items:center; }
.menu { position:relative; }
.menu-list { display:none; position:absolute; top:112%; left:0; background:var(--panel); border:1px solid var(--line);
  border-radius:10px; box-shadow:0 10px 34px rgba(16,24,40,.18); z-index:30; min-width:230px; padding:6px; }
.menu.open .menu-list { display:block; }
.menu-item { display:block; width:100%; text-align:left; border:none; background:transparent; padding:9px 10px;
  border-radius:7px; cursor:pointer; color:var(--ink); font-size:13px; font-weight:600; }
.menu-item:hover { background:var(--chip); }

.badge { display:inline-flex; align-items:center; gap:5px; font-size:10px; font-weight:800; padding:2px 8px; border-radius:6px;
  background:var(--chip); color:var(--muted); text-transform:uppercase; letter-spacing:.04em; }
.badge.cv { background:#e6efff; color:#1f4fa0; }
.badge.one-page { background:#eae6ff; color:#5a3fa0; }
.badge.portfolio { background:#e3f6ea; color:#1c7a45; }
.badge.biosketch { background:#fdeede; color:#9a5a12; }
@media (prefers-color-scheme: dark) { .badge.cv,.badge.one-page,.badge.portfolio,.badge.biosketch,.badge.accolades,.badge.ccpr { filter:brightness(.85); } }

.tile.doc { position:relative; padding:15px 16px 14px; gap:5px; min-height:112px; }
.tile.doc .badge { align-self:flex-start; }
.tile.doc .t { font-size:14.5px; line-height:1.3; padding-right:44px; }   /* room for the tools cluster */
/* Grip + ⋯ ride the top-right corner: legible but quiet until the tile is hovered
   or something inside it takes focus, so the eye lands on the name first. */
.tile-tools { position:absolute; top:8px; right:9px; display:flex; align-items:center; gap:1px;
  opacity:.4; transition:opacity .12s; }
.tile.doc:hover .tile-tools, .tile.doc:focus-within .tile-tools { opacity:1; }
.tile-more { display:inline-grid; place-items:center; width:24px; height:24px; padding:0; border:0; border-radius:7px;
  background:transparent; color:var(--muted); cursor:pointer; }
.tile-more:hover { background:var(--chip); color:var(--ink); }
.tile-more:focus-visible { outline:2px solid var(--accent); outline-offset:1px; opacity:1; }

/* ---- document editor ---- */
/* Fixed-height header bar: sticks flush at the scrollport top (top:0 — a negative
   top slides it above the clip edge and cuts it off) and carries the pane's top
   padding itself, so ← Library · name · actions stay fully visible while the
   document scrolls beneath. Border matches the library rail's person header. */
.dochead { display:flex; align-items:center; gap:12px; margin-bottom:14px; flex-wrap:wrap; min-width:0;
  position:sticky; top:0; z-index:6; background:var(--bg); padding:10px 0; border-bottom:1px solid var(--line); }
.dochead .backbtn { flex:none; font-weight:700; }
.dochead-actions { margin-left:auto; display:flex; gap:6px; align-items:center; flex:0 1 auto; flex-wrap:wrap; justify-content:flex-end; }
.menu-list.menu-right { left:auto; right:0; }
.brand[data-nav] { cursor:pointer; }

/* ---- full-height editor workspace (resizable / collapsible panes) ---- */
/* editor = [ persistent library rail | document pane ] */
.view.editor { display:flex; flex-direction:row; align-items:stretch; gap:0; max-width:none; padding:0; overflow:hidden; position:relative; }
.docpane { flex:1 1 auto; min-width:0; overflow-y:auto; padding:0 20px 40px; display:flex; flex-direction:column; }   /* top padding lives in .dochead */
.docpane.workbench { overflow:hidden; padding:0 16px 0; }
.docpane .dochead { flex:0 0 auto; }
.docpane .docbody { flex:1 1 auto; min-height:0; }
.docpane:not(.workbench) .docbody { flex:0 0 auto; }   /* normal docs: pane scrolls, body flows */
.workbench-body { flex:1 1 auto; min-height:0; display:flex; }

/* the library rail */
.librail { flex:0 0 250px; overflow-y:auto; background:var(--panel); border-right:1px solid var(--line); padding:10px 8px; }
.librail.collapsed { flex-basis:0; width:0; padding:0; border:none; overflow:hidden; }
.rail-person { display:flex; align-items:center; gap:8px; padding:6px 8px 10px; cursor:pointer; border-bottom:1px solid var(--line); margin-bottom:6px; }
.rail-person:hover { background:var(--chip); border-radius:8px; }
.rail-person-txt { min-width:0; flex:1; }
.rail-person-name { font-weight:700; font-size:13px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.rail-person-sub { font-size:11px; color:var(--muted); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.rail-collapse { flex:none; display:grid; place-items:center; color:var(--muted); padding:0 4px; cursor:pointer; }
.rail-collapse:hover { color:var(--ink); }
.rail-tree { display:flex; flex-direction:column; gap:1px; }
.rail-folder-h { display:flex; align-items:center; gap:6px; padding:5px 6px; border-radius:6px; cursor:pointer; font-size:12.5px; font-weight:700; }
.rail-folder-h:hover { background:var(--chip); }
.rail-folder-h.muted { cursor:default; color:var(--muted); font-weight:600; }
.rail-caret { flex:none; display:grid; place-items:center; width:14px; color:var(--muted); }
.rail-fname { flex:1; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.rail-fcount { flex:none; font-size:10px; color:var(--muted); background:var(--chip); border-radius:10px; padding:0 6px; }
.rail-doc { display:flex; align-items:center; gap:7px; padding:4px 6px 4px 20px; border-radius:6px; cursor:pointer; font-size:12.5px; }
.rail-doc:hover { background:var(--chip); }
.rail-doc.active { background:var(--brand); color:#fff; }
.rail-badge { flex:none; display:grid; place-items:center; width:22px; height:22px; border-radius:6px; background:var(--chip); color:var(--muted); }
.rail-doc.active .rail-badge { background:rgba(255,255,255,.25); color:#fff; }
.rail-doc-name { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.rail-foot { margin-top:10px; border-top:1px solid var(--line); padding-top:8px; }
.rail-foot .btn { width:100%; }
.rail-toggle.on { color:var(--brand); border-color:var(--brand); }
@media (max-width:820px) {
  .librail { position:absolute; z-index:60; top:0; bottom:0; left:0; flex-basis:240px; box-shadow:2px 0 16px rgba(0,0,0,.25); }
  .librail.collapsed { transform:translateX(-100%); flex-basis:0; box-shadow:none; }
}
.editwrap { display:flex; align-items:stretch; width:100%; min-height:0;
  border:1px solid var(--line); border-radius:12px; overflow:hidden; box-shadow:var(--shadow); background:var(--panel); }
.pane { min-width:0; display:flex; flex-direction:column; min-height:0; }
.pane-sections { flex:0 0 var(--secW,180px); border-right:1px solid var(--line); background:var(--panel); }
.pane-editor { flex:1 1 0; min-width:0; overflow:auto; background:var(--bg); }
.pane-editor-inner { padding:14px 16px 40px; }
.pane-editor-inner .card { margin:0 0 14px 0; }
.pane-preview { flex:0 0 var(--pvW,520px); min-width:0; border-left:1px solid var(--line); background:#5b6067; }
/* while dragging a splitter, let pointer events pass over the preview iframe so the drag survives */
body.dragging-split { cursor:col-resize; user-select:none; }
body.dragging-split iframe { pointer-events:none; }
.pv-mode { white-space:nowrap; }
/* profile picture (Microsoft 365-style avatar) */
.avatar { border-radius:50%; border:0; background-size:cover; background-position:center; color:#fff; font-weight:700;
  font-size:12px; line-height:1; display:grid; place-items:center; cursor:pointer; padding:0; flex:none;
  box-shadow:0 0 0 1px var(--line), 0 1px 2px rgba(0,0,0,.15); transition:transform .1s, box-shadow .1s; }
.avatar:hover { transform:scale(1.06); box-shadow:0 0 0 2px var(--accent); }
.avatar.has-img { color:transparent; }
.avatar-menu { position:fixed; z-index:60; width:264px; background:var(--panel); border:1px solid var(--line);
  border-radius:14px; box-shadow:0 14px 44px rgba(0,0,0,.28); padding:14px; }
.avatar-menu-head { display:flex; gap:11px; align-items:center; margin-bottom:12px; }
.am-name { font-weight:800; font-size:14px; }
.am-sub { font-size:12px; color:var(--muted); }
.am-divider { height:1px; background:var(--line); margin:12px -14px 8px; }
.am-label { font-size:11px; font-weight:800; text-transform:uppercase; letter-spacing:.05em; color:var(--muted); margin:0 0 6px; }
.am-person { display:flex; align-items:center; gap:10px; width:100%; text-align:left; border:0; background:transparent;
  padding:6px 8px; border-radius:9px; cursor:pointer; color:var(--ink); }
.am-person:hover { background:var(--chip); }
.am-person.active { background:var(--chip); }
.am-person-t { min-width:0; flex:1; }
.am-person-n { font-weight:700; font-size:13px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.am-person-s { font-size:11.5px; color:var(--muted); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.am-check { color:var(--accent); font-weight:800; }
.am-add { color:var(--accent); font-weight:700; font-size:13px; margin-top:2px; }
.am-remove { color:#b42318; font-weight:600; font-size:12.5px; }
/* person banner on the library */
.person-banner { display:flex; align-items:center; gap:12px; padding:12px 14px; margin-bottom:14px;
  border:1px solid var(--line); border-radius:14px; background:var(--panel); box-shadow:var(--shadow); }
.pb-txt { flex:1; min-width:0; }
.pb-name { font-weight:800; font-size:16px; }
.pb-sub { font-size:12.5px; color:var(--muted); }
.snapbox { margin-top:16px; }
.snapbox h3 { margin-bottom:4px; }
.vchip.snap { background:#6b7280; }

/* ---- credentialing tracker ---- */
.cred-dash { display:flex; gap:12px; flex-wrap:wrap; align-items:stretch; margin-bottom:14px; }
.cred-stat { flex:1 1 120px; min-width:110px; border:1px solid var(--line); border-radius:12px; background:var(--panel); padding:12px 14px; box-shadow:var(--shadow); }
.cred-stat .num { font-size:26px; font-weight:800; line-height:1; }
.cred-stat .lab { font-size:12px; color:var(--muted); margin-top:4px; font-weight:600; }
.cred-stat.ok .num { color:#137a3b; } .cred-stat.soon .num { color:#9a5b00; } .cred-stat.exp .num { color:#b42318; }
.cred-stat.brand .num { color:var(--brand); }   /* neutral accent for non-status counts */
/* N/A checkbox on sections/subsections */
.na-check { display:inline-flex; align-items:center; gap:4px; font-size:11.5px; font-weight:700; color:var(--muted); cursor:pointer; user-select:none; padding:2px 6px; border:1px solid var(--line); border-radius:6px; background:var(--chip); }
.na-check input { margin:0; accent-color:var(--brand); }
.grp-na > .grp-head input[type=text] { opacity:.55; text-decoration:line-through; }
.ts-pop { padding:12px 14px; }
.tpl-bar { display:flex; flex-direction:column; gap:6px; margin:8px 6px 4px; padding:8px; border:1px solid var(--line); border-radius:8px; background:var(--chip); }
.tpl-bar-row { display:flex; align-items:center; gap:6px; }
.tpl-check { max-width:600px; }
.tpl-list { display:flex; flex-direction:column; gap:4px; margin-top:4px; }
.tpl-item { display:flex; align-items:center; justify-content:space-between; gap:10px; padding:5px 8px; border:1px solid var(--line); border-radius:6px; background:var(--panel); font-size:13px; }
.tpl-item > span:first-child { min-width:0; overflow:hidden; }
/* group sub-headers rendered in the app UI (evaluators External/Internal, etc.) */
.bs-h { font-weight:700; font-size:12px; text-transform:uppercase; letter-spacing:.03em; color:var(--muted); margin:12px 0 4px; }
.field textarea { border:1px solid var(--line); border-radius:7px; padding:7px 9px; background:var(--card,#fff); color:inherit; font:inherit; width:100%; }
.cred-alert { flex:2 1 300px; min-width:240px; border:1px solid var(--line); border-radius:12px; background:var(--panel); padding:10px 12px; box-shadow:var(--shadow); }
.cred-alert-h { font-size:12px; font-weight:800; color:#9a5b00; margin-bottom:6px; }
.cred-alert-row { display:flex; align-items:center; gap:8px; font-size:12.5px; padding:2px 0; }
.cred-alert-row .dot { width:8px; height:8px; border-radius:50%; flex:none; background:#9a5b00; }
.cred-alert-row.expired .dot { background:#b42318; } .cred-alert-row.soon .dot { background:#e08b00; }
.cred-alert-row .nm { font-weight:600; } .cred-alert-row .st { color:var(--muted); margin-left:auto; white-space:nowrap; }
.cred-list { display:flex; flex-direction:column; gap:10px; }
.cred-item { border:1px solid var(--line); border-left:4px solid var(--line); border-radius:12px; background:var(--panel); padding:12px 14px; box-shadow:var(--shadow); }
.cred-item.expired { border-left-color:#b42318; } .cred-item.soon { border-left-color:#e08b00; } .cred-item.active { border-left-color:#2f9e5b; }
.cred-item-h { display:flex; align-items:center; gap:10px; margin-bottom:10px; }
.cred-item-h .cred-cat { flex:1; }
.cred-badge { font-size:11px; font-weight:800; padding:2px 9px; border-radius:20px; white-space:nowrap; }
.cred-badge.expired { background:#fbe6e4; color:#b42318; } .cred-badge.soon { background:#fbeeda; color:#9a5b00; }
.cred-badge.active { background:#e7f6ee; color:#137a3b; } .cred-badge.none { background:var(--chip); color:var(--muted); }
.cred-grid { display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:8px 12px; }
.cred-field { display:flex; flex-direction:column; gap:3px; font-size:11px; color:var(--muted); font-weight:600; }
.cred-field input { font-size:13px; color:var(--ink); }
.cred-field.check { flex-direction:row; align-items:center; gap:7px; align-self:end; padding-bottom:5px; font-weight:600; color:var(--ink); cursor:pointer; }
.cred-field.check input { width:auto; flex:0 0 auto; }
.cred-field textarea { font-size:13px; color:var(--ink); font-family:inherit; width:100%; resize:vertical; padding:5px 7px; border:1px solid var(--line); border-radius:6px; background:var(--card,#fff); }
/* biosketch form: every field fills the card (a bare <textarea> defaults to ~20 columns) */
.bs-form textarea { width:100%; box-sizing:border-box; font-family:inherit; font-size:13.5px; line-height:1.5;
  color:var(--ink); background:var(--card,#fff); border:1px solid var(--line); border-radius:8px;
  padding:8px 10px; resize:vertical; }
.bs-form textarea:focus { outline:2px solid var(--accent); outline-offset:-1px; }
@media (max-width:720px) { .cred-grid { grid-template-columns:repeat(2, minmax(0,1fr)); } }

/* ---- Credentials tracker v2: expandable / reorderable rows ---- */
.cred-list2 { display:flex; flex-direction:column; gap:7px; }
.cred-row { border:1px solid var(--line); border-left:4px solid var(--line); border-radius:11px; background:var(--panel); box-shadow:var(--shadow); overflow:hidden; }
.cred-row.expired { border-left-color:#b42318; } .cred-row.soon { border-left-color:#e08b00; } .cred-row.active { border-left-color:#2f9e5b; } .cred-row.none { border-left-color:#9aa4b2; }
.cred-row-head { display:flex; align-items:center; gap:10px; padding:9px 12px; cursor:pointer; }
.cred-row-head:hover { background:var(--chip); }
.cred-chev { border:0; background:transparent; color:var(--muted); font-size:13px; cursor:pointer; flex:none; width:16px; }
.cred-badge { flex:none; font-size:11px; font-weight:700; padding:2px 8px; border-radius:20px; white-space:nowrap; background:var(--chip); color:var(--muted); }
.cred-badge.expired { background:#fbe9e7; color:#b42318; } .cred-badge.soon { background:#fdf0d5; color:#8a5a00; } .cred-badge.active { background:#e7f6ee; color:#137a3b; }
.cred-row-title { flex:1; min-width:0; }
.cred-row-name { font-weight:700; font-size:14px; }
.cred-row-cat { font-size:11px; color:var(--muted); margin-left:8px; }
.cred-row-sub { font-size:12px; color:var(--muted); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.cred-thumb { flex:none; width:40px; height:40px; border-radius:7px; background:var(--chip); background-size:cover; background-position:center; }
.cred-thumb.has-img { border:1px solid var(--line); }
.cred-row-ops { flex:none; display:flex; gap:2px; }
.cred-row-body { padding:2px 14px 12px; border-top:1px solid var(--line); }
.cred-row-body .cred-grid { margin-top:10px; }
.cred-thumbpick { display:flex; align-items:center; gap:6px; flex-wrap:wrap; margin-top:8px; }
.cred-thumbpick-h { font-size:12px; color:var(--muted); font-weight:700; }
.cred-archive { margin-top:16px; }
.cred-archive-h { width:100%; text-align:left; border:1px dashed var(--line); background:transparent; color:var(--muted); border-radius:10px; padding:8px 12px; font-weight:700; font-size:13px; cursor:pointer; }
.cred-archive-h:hover { background:var(--chip); }
.cred-archive .cred-list2 { margin-top:8px; opacity:.85; }

/* CCPR annual-review: configure panel + mission×year trend matrix */
.ccpr-config { margin:6px 0; }
.ccpr-config-body { margin-top:8px; padding:10px 12px; border:1px solid var(--line); border-radius:8px; background:var(--chip); }
.ccpr-sub-h { font-weight:700; font-size:12px; text-transform:uppercase; letter-spacing:.03em; color:var(--muted); margin:12px 0 4px; }
.ccpr-trend-wrap { overflow-x:auto; margin:10px 0 2px; }
table.ccpr-trend { border-collapse:collapse; font-size:12px; min-width:min(100%,520px); }
table.ccpr-trend th, table.ccpr-trend td { border:1px solid var(--line); padding:3px 8px; text-align:left; white-space:nowrap; }
table.ccpr-trend th { background:var(--chip); font-weight:600; }
table.ccpr-trend td:first-child, table.ccpr-trend th:first-child { position:sticky; left:0; background:var(--card,#fff); font-weight:600; }
tr.ccpr-trend-overall td { border-top:2px solid var(--muted); font-weight:700; }
.ccpr-year { margin-top:8px; }
.badge.accolades { background:#fff3d6; color:#8a6100; }
.badge.ccpr { background:#e8eefc; color:#33489a; }
.badge.signature { background:#e6f7f4; color:#0d6e63; }

/* email signature editor: stacked panes (edit above, preview below), CENTERED on the page */
.sig-wrap { display:flex; flex-direction:column; gap:18px; align-items:stretch; max-width:900px; margin:0 auto; width:100%; }
.sig-col { min-width:0; }

/* signature builder panel */
.sig-builder { margin:0 0 10px; }
.sig-builder-body { margin-top:8px; padding:12px; border:1px solid var(--line); border-radius:10px; background:var(--chip); display:flex; flex-direction:column; gap:6px; }
.sig-lbl { flex:none; min-width:88px; font-size:12px; font-weight:600; color:var(--muted); }
.sig-lbl-val { flex:none; font-size:11px; color:var(--muted); font-variant-numeric:tabular-nums; min-width:44px; }
.sig-sliderrow { display:flex; align-items:center; gap:8px; }
.sig-sliderrow input[type=range] { flex:1; accent-color:var(--brand); }
.sig-sliderrow input[type=number] { width:60px; }
.sig-palette { display:flex; align-items:center; gap:6px; flex-wrap:wrap; }
.sig-chip { width:24px; height:24px; border-radius:12px; border:2px solid transparent; cursor:pointer; padding:0; }
.sig-chip.on { border-color:var(--ink); box-shadow:0 0 0 2px var(--panel); }
.sig-linkdlg { min-width:240px; }
.sig-linkdlg .tbl-form-row input[type=text] { width:150px; }
/* per-link icon picker (social & contact links) */
.sig-iconbtn { display:inline-flex; align-items:center; justify-content:center; padding:2px; border:1px solid var(--line); border-radius:8px; background:var(--card,#fff); cursor:pointer; line-height:0; flex:none; }
.sig-iconbtn:hover { border-color:var(--brand); }
.sig-iconchip { display:inline-flex; align-items:center; justify-content:center; border-radius:50%; color:#fff; overflow:hidden; flex:none; }
.sig-iconchip svg { display:block; }
.sig-iconmono { font-family:Arial,Helvetica,sans-serif; font-weight:700; line-height:1; color:#fff; }
.sig-iconpick { min-width:290px; max-width:330px; }
.sig-iconpick-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:2px; padding:6px 6px 8px; max-height:320px; overflow:auto; }
.sig-icontile { display:flex; flex-direction:column; align-items:center; gap:4px; padding:7px 3px; border:1px solid transparent; border-radius:8px; background:none; cursor:pointer; color:var(--ink); }
.sig-icontile:hover { background:var(--chip); }
.sig-icontile.on { border-color:var(--brand); background:var(--chip); }
.sig-icontile-lbl { font-size:9.5px; line-height:1.1; text-align:center; color:var(--muted); width:100%; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
/* custom uploaded icons + the "add custom" tile */
.sig-customtile { position:relative; }
.sig-icontile-del { position:absolute; top:1px; right:1px; width:15px; height:15px; padding:0; line-height:13px; font-size:10px; border:none; border-radius:50%; background:var(--panel,#fff); color:var(--muted); cursor:pointer; box-shadow:0 0 0 1px var(--line); }
.sig-icontile-del:hover { background:#c0392b; color:#fff; }
.sig-icontile-add { border:1px dashed var(--line); }
.sig-iconchip-add { background:var(--chip); color:var(--muted); font-size:16px; font-weight:700; width:26px; height:26px; }
/* reorder list for identity/body blocks — compact, small footprint */
.sig-order { display:flex; flex-direction:column; gap:2px; margin:4px 0; }
.sig-order-row { display:flex; align-items:center; gap:8px; padding:2px 8px; min-height:26px; border:1px solid var(--line); border-radius:6px; background:var(--card,#fff); font-size:12.5px; line-height:1.2; }
.sig-order-row.sig-empty { opacity:.5; }
.sig-order-lbl { font-weight:500; }
.sig-order-empty { font-size:10px; color:var(--muted); text-transform:uppercase; letter-spacing:.04em; }
.sig-order .icon { padding:0 5px; line-height:1.4; }
/* per-logo cards (multiple photos/logos) */
.sig-logos { display:flex; flex-direction:column; gap:6px; margin:6px 0 2px; }
.sig-logo-card { border:1px solid var(--line); border-radius:9px; padding:8px 10px; background:var(--card,#fff); display:flex; flex-direction:column; gap:6px; }
.sig-logo-thumb { width:30px; height:30px; border-radius:6px; flex:none; background:var(--chip) center/contain no-repeat; border:1px solid var(--line); }
.sig-logo-lbl { font-weight:600; font-size:12.5px; }
/* mobile signature panel */
.sig-mobile { display:flex; flex-direction:column; }
.sig-mobile-body { margin-top:8px; border:1px solid var(--line); border-radius:10px; padding:12px; background:var(--card,#fff); display:flex; flex-direction:column; gap:8px; }
.sig-mobile-toggles { display:flex; flex-wrap:wrap; gap:4px 14px; }
.sig-mobile-prev { border:1px solid var(--line); border-radius:8px; padding:12px; background:#ffffff; color:#111111; overflow:auto; }
.sig-mobile-text { margin:0; font-family:-apple-system,'Segoe UI',Roboto,Helvetica,Arial,sans-serif; font-size:13px; line-height:1.45; white-space:pre-wrap; word-break:break-word; color:#111111; }
.sig-mobile-html { font-size:13px; line-height:1.45; color:#222222; }
.sig-mobile-html a { color:#1a56db; text-decoration:none; }

/* mock email frame in the preview */
.sig-mock { border-bottom:1px solid #e3e3e3; padding-bottom:8px; margin-bottom:10px; }
.sig-mock-h { font-size:11px; color:#888; }
.sig-mock-body { font-size:13px; margin-top:6px; color:inherit; }
.sig-preview.dark .sig-mock { border-bottom-color:#3a3a3a; }
.sig-preview.dark .sig-mock-h { color:#9a9a9a; }
.sig-mock-sig { margin-top:10px; }
.sig-h { font-weight:700; font-size:12px; text-transform:uppercase; letter-spacing:.03em; color:var(--muted); margin:0 0 6px; }
.sig-bar { flex-wrap:wrap; }
.sig-editor { min-height:220px; background:#ffffff; color:#111111; border:1px solid var(--line); border-top:none; border-radius:0 0 8px 8px; padding:14px; overflow:auto; font-family:Arial,Helvetica,sans-serif; font-size:11pt; line-height:1.4; }
.sig-editor:focus { outline:2px solid #9db8e8; outline-offset:-1px; }
.sig-editor img { max-width:100%; height:auto; }
.sig-preview { background:#ffffff; color:#111111; border:1px solid var(--line); border-radius:8px; padding:16px; min-height:120px; overflow:auto; }
.sig-preview img { max-width:100%; height:auto; }
.sig-preview .muted { color:#999; }
.sig-preview.dark { background:#1e1e1e; color:#e6e6e6; }
/* auto-adapted (colorless) links render the way real dark-mode email clients show them —
   light blue on dark. Links with a FIXED inline color keep it (that's what fixed colors do). */
.sig-preview.dark a:not([style*="color:"]) { color:#8ab4f8; }
.sig-preview.dark [style*="color:#012169"], .sig-preview.dark [style*="color: #012169"] { color:#9db8e8 !important; }
.sig-preview.mobile { max-width:360px; }
.sig-h-row { display:flex; align-items:center; justify-content:space-between; gap:10px; flex-wrap:wrap; }
.sig-modes { display:flex; gap:4px; }
.sig-modes .btn.sm { padding:2px 8px; }
.sig-checks { margin-top:8px; display:flex; flex-direction:column; gap:4px; }
.sig-check-h { font-size:11px; text-transform:uppercase; letter-spacing:.04em; color:var(--muted); font-weight:700; }
.sig-check { font-size:12px; line-height:1.35; padding:5px 8px; border-radius:6px; }
.sig-check.ok { color:#137a3b; background:#e7f6ee; }
.sig-check.warn { color:#8a5a00; background:#fff5e0; }
.sig-html { width:100%; min-height:240px; font-family:'SF Mono',Menlo,Consolas,monospace; font-size:12.5px; line-height:1.5; color:var(--ink); background:var(--card,#fff); border:1px solid var(--line); border-top:none; border-radius:0 0 8px 8px; padding:12px; resize:vertical; white-space:pre; }
.sig-html-note { font-size:11px; color:var(--muted); margin-left:6px; align-self:center; }
.rt-btn.on { background:var(--brand); color:#fff; }
@media (prefers-color-scheme: dark) { .sig-check.ok { color:#7fe0a6; background:#123524; } .sig-check.warn { color:#f0c26b; background:#3a2e12; } }
:root[data-theme="dark"] .sig-check.ok { color:#7fe0a6; background:#123524; }
:root[data-theme="dark"] .sig-check.warn { color:#f0c26b; background:#3a2e12; }
.sig-editor table, .sig-preview table { border-collapse:collapse; }
.sig-editor th, .sig-editor td, .sig-preview th, .sig-preview td { min-width:24px; }
/* …but divider/spacer cells must render at their TRUE width — the 24px editing
   affordance was inflating every vertical divider thinner than 24px */
.sig-editor td[bgcolor], .sig-preview td[bgcolor],
.sig-editor td[style*="font-size:0"], .sig-preview td[style*="font-size:0"] { min-width:0; }

/* shared table insert/edit popup menu (TableTools) */
.tbl-menu { position:absolute; z-index:1000; min-width:170px; background:var(--card,#fff); color:var(--ink); border:1px solid var(--line); border-radius:8px; box-shadow:0 8px 28px rgba(0,0,0,.18); padding:4px; font-size:13px; }
.tbl-item { display:block; width:100%; text-align:left; background:none; border:none; color:var(--ink); padding:6px 10px; border-radius:6px; cursor:pointer; font:inherit; }
.tbl-item:hover { background:var(--chip); }
.tbl-sep { height:1px; background:var(--line); margin:4px 2px; }
.tbl-align { display:flex; gap:2px; padding:2px 4px; }
.tbl-align .tbl-al { width:auto; flex:1; text-align:center; border:1px solid var(--line); }
.tbl-form-h { font-weight:700; padding:4px 8px 2px; }
.tbl-form-row { display:flex; align-items:center; justify-content:space-between; gap:10px; padding:4px 8px; font-size:13px; }
.tbl-num { width:64px; font-size:13px; padding:3px 6px; border:1px solid var(--line); border-radius:6px; background:var(--card,#fff); color:var(--ink); }
.tbl-form-btns { display:flex; gap:6px; padding:6px 8px 4px; }
.tbl-form-btns .tbl-item { text-align:center; border:1px solid var(--line); }
.tbl-form-btns .tbl-form-go { background:var(--brand); color:#fff; border-color:var(--brand); font-weight:600; }

/* year sub-folders inside CME (collapsible group headers) */
.cred-year-h { display:flex; align-items:center; gap:8px; padding:7px 10px; margin:8px 0 2px; border-radius:8px; background:var(--chip); cursor:pointer; font-size:13px; user-select:none; }
.cred-year-h:hover { background:color-mix(in srgb, var(--ink) 8%, var(--chip)); }
.cred-year-h .muted { font-size:12px; }

/* per-item attachments (upload a copy of a license / CME certificate) */
.itemfiles { margin-top:8px; border-top:1px dashed var(--line); padding-top:8px; }
.itemfiles .if-row { display:flex; align-items:center; gap:8px; flex-wrap:wrap; }
.itemfiles .if-hint { font-size:11px; color:var(--muted); }
.itemfiles-list { display:flex; flex-direction:column; gap:4px; margin-top:6px; }
.itemfile { display:flex; align-items:center; gap:8px; font-size:12px; background:var(--chip); border:1px solid var(--line); border-radius:6px; padding:3px 8px; }
.itemfile .if-icon { flex:0 0 auto; }
.itemfile .if-name { flex:1 1 auto; text-align:left; background:none; border:none; color:var(--link, #1a56b0); cursor:pointer; padding:0; font:inherit; text-decoration:underline; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.itemfile .if-size { flex:0 0 auto; color:var(--muted); font-variant-numeric:tabular-nums; }
@media (prefers-color-scheme: dark) {
  .cred-badge.expired { background:#3a1c1a; color:#f2938a; } .cred-badge.soon { background:#3a2c10; color:#f0c67a; } .cred-badge.active { background:#12351f; color:#7fe0a5; }
  .cred-stat.ok .num{color:#7fe0a5;} .cred-stat.soon .num{color:#f0c67a;} .cred-stat.exp .num{color:#f2938a;}
  .cred-alert-h{color:#f0c67a;} .cred-alert-row .dot{background:#f0c67a;} .cred-alert-row.expired .dot{background:#f2938a;}
}
:root[data-theme="dark"] .cred-stat.ok .num{color:#7fe0a5;} :root[data-theme="dark"] .cred-stat.soon .num{color:#f0c67a;} :root[data-theme="dark"] .cred-stat.exp .num{color:#f2938a;}
:root[data-theme="dark"] .cred-alert-h{color:#f0c67a;} :root[data-theme="dark"] .cred-alert-row .dot{background:#f0c67a;} :root[data-theme="dark"] .cred-alert-row.expired .dot{background:#f2938a;}
:root[data-theme="dark"] .cred-badge.expired{background:#3a1c1a;color:#f2938a;} :root[data-theme="dark"] .cred-badge.soon{background:#3a2c10;color:#f0c67a;} :root[data-theme="dark"] .cred-badge.active{background:#12351f;color:#7fe0a5;}
.pane-h { flex:0 0 auto; display:flex; align-items:center; justify-content:space-between; gap:8px; padding:7px 10px; flex-wrap:wrap; min-width:0;
  border-bottom:1px solid var(--line); font-size:12px; font-weight:700; color:var(--muted); background:var(--panel);
  text-transform:uppercase; letter-spacing:.04em; }
.pane-sections .sec-nav { flex:1 1 auto; overflow:auto; padding:6px; }
.sec-nav-row { display:flex; align-items:center; gap:8px; padding:6px 8px; border-radius:7px; cursor:pointer; font-size:12.5px; min-width:0; }
.sec-nav-row:hover { background:var(--chip); }
.sec-nav-row.active { background:var(--brand); color:#fff; }
.sec-nav-row .num { flex:none; width:22px; height:20px; display:grid; place-items:center; font-weight:700;
  font-size:11px; background:var(--chip); border-radius:5px; }
.sec-nav-row.active .num { background:rgba(255,255,255,.25); color:#fff; }
.sec-nav-row .t { flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.sec-nav-row .c { flex:none; font-size:11px; color:var(--muted); }
.sec-nav-row.active .c { color:rgba(255,255,255,.85); }
.addsec { margin:8px 6px 6px; width:calc(100% - 12px); border-style:dashed; }
/* preview pane */
.pv-head { color:#cfd3da; background:#3f434a; border-bottom-color:#2c2f34; }
.pv-title { flex:0 0 auto; }
.pv-ctrls { display:flex; align-items:center; gap:4px; flex-wrap:wrap; justify-content:flex-end; }
.pv-ctrls .icon { color:#e7e9ee; background:transparent; border:1px solid #5c626b; width:24px; height:24px; }
.pv-ctrls .icon:hover { background:#565c65; }
.pv-ctrls .btn.ghost, .pv-ctrls .btn.sm { color:#cfd3da; border-color:#5c626b; }
.pv-zoom, .pv-pages { font-size:10.5px; color:#aeb4bd; text-transform:none; letter-spacing:0; padding:0 4px; white-space:nowrap; }
.pane-pv-body { flex:1 1 auto; min-height:0; }
.pane-pv-body .livepreview, .fullpv-body .livepreview { width:100%; height:100%; border:0; background:#5b6067; display:block; }
/* splitter + collapsed rails */
.splitter { flex:0 0 7px; cursor:col-resize; background:transparent; position:relative; }
.splitter::after { content:""; position:absolute; left:3px; top:0; bottom:0; width:1px; background:var(--line); }
.splitter:hover::after { left:2px; width:3px; background:var(--accent); }
.pane-rail { flex:0 0 26px; border:0; border-right:1px solid var(--line); background:var(--panel); color:var(--muted);
  cursor:pointer; font-size:13px; writing-mode:vertical-rl; }
.pane-rail:hover { background:var(--chip); color:var(--ink); }
/* full-window preview tab */
.fullpv { display:flex; flex-direction:column; width:100%; min-height:0;
  border:1px solid var(--line); border-radius:12px; overflow:hidden; box-shadow:var(--shadow); }
.fullpv-bar { flex:0 0 auto; display:flex; align-items:center; justify-content:space-between; gap:10px; flex-wrap:wrap;
  padding:8px 12px; background:#3f434a; color:#cfd3da; border-bottom:1px solid #2c2f34; font-size:12px; font-weight:700; }
.fullpv-bar .icon { color:#e7e9ee; background:transparent; border:1px solid #5c626b; width:26px; height:26px; }
.fullpv-bar .icon:hover { background:#565c65; }
.fullpv-bar .btn.sm { color:#fff; background:#565c65; border:1px solid #6b727c; }
.fullpv-bar .btn.sm:hover { background:#646b75; }
.fullpv-body { flex:1 1 auto; min-height:0; }
@media (max-width:900px) { .pane-preview { display:none; } .pane-editor { min-width:0; } }

/* ---- save indicator + command palette ---- */
.savechip { font-size:12px; font-weight:700; padding:3px 10px; border-radius:20px; align-self:center; white-space:nowrap; }
.savechip.saved { background:#e7f6ee; color:#145c34; }
.savechip.saving { background:#fef3e0; color:#7a4b00; }
@media (prefers-color-scheme: dark) { .savechip.saved { background:#12351f; color:#7fe0a5; } .savechip.saving { background:#3a2c10; color:#f0c67a; } }
:root[data-theme="dark"] .savechip.saved { background:#12351f; color:#7fe0a5; }
.kbtn { font-family:ui-monospace, Menlo, monospace; font-weight:700; letter-spacing:.02em; }

.palette { position:fixed; inset:0; background:rgba(8,12,20,.45); z-index:60; display:flex; justify-content:center; align-items:flex-start; padding-top:12vh; }
.palette-box { width:560px; max-width:92vw; background:var(--panel); border:1px solid var(--line); border-radius:14px;
  box-shadow:0 24px 60px rgba(0,0,0,.4); overflow:hidden; }
.palette-input { width:100%; border:none; border-bottom:1px solid var(--line); padding:14px 16px; font-size:15px;
  background:var(--panel); color:var(--ink); outline:none; }
.palette-list { max-height:52vh; overflow:auto; padding:6px; }
.palette-row { display:flex; justify-content:space-between; align-items:center; gap:12px; padding:10px 12px; border-radius:9px; cursor:pointer; }
.palette-row.active { background:var(--brand); color:#fff; }
.palette-row .pl { font-weight:600; }
.palette-row .ps { font-size:11px; color:var(--muted); text-transform:uppercase; letter-spacing:.04em; }
.palette-row.active .ps { color:rgba(255,255,255,.85); }

/* ---- rich text editor (WYSIWYG) ---- */
.rt { border:1px solid var(--line); border-radius:8px; overflow:hidden; background:var(--panel); flex:1 1 auto; min-width:0; }
/* toolbar WRAPS when the pane narrows (splitter drags, small windows) instead of clipping */
.rt-bar { display:flex; flex-wrap:wrap; gap:2px; row-gap:3px; padding:4px 6px; border-bottom:1px solid var(--line); background:var(--bg); }
.rt-btn { border:1px solid transparent; background:transparent; cursor:pointer; min-width:28px; height:26px; border-radius:6px;
  font-size:13px; color:var(--ink); line-height:1; }
.rt-btn:hover { background:var(--chip); }
.rt-btn[data-f="bold"] { font-weight:800; }
.rt-btn[data-f="italic"] { font-style:italic; }
.rt-btn[data-f="underline"] { text-decoration:underline; }
.rt-ed { min-height:46px; resize:vertical; overflow:auto; padding:9px 11px; outline:none; color:var(--ink); background:var(--panel);
  font:14px/1.55 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; }
.rt-ed:focus { box-shadow: inset 0 0 0 2px color-mix(in srgb, var(--accent) 35%, transparent); }
.rt-ed strong { font-weight:700; } .rt-ed em { font-style:italic; } .rt-ed u { text-decoration:underline; }
.rt-ed ul { list-style:disc; margin:4px 0 4px 22px; padding:0; }
.rt-ed ol { list-style:decimal; margin:4px 0 4px 22px; padding:0; }
.rt-ed li { margin:2px 0; }
.rt-sep { width:1px; align-self:stretch; background:var(--line); margin:2px 4px; }
.rt-sel { font-size:11px; padding:2px 4px; border:1px solid var(--line); border-radius:6px; background:var(--panel); color:var(--ink); }
.rt-color { width:26px; height:24px; padding:0 2px; border:1px solid var(--line); border-radius:6px; background:var(--panel); cursor:pointer; }
.rt-ed code, .rt-ed tt { font-family:ui-monospace, Menlo, monospace; background:var(--chip); padding:0 3px; border-radius:4px; font-size:.92em; }
.rt-ed a { color:var(--accent); }
.rt-ed table.cvtab { border-collapse:collapse; margin:6px 0; font-size:.92em; width:auto; }
.rt-ed table.cvtab td, .rt-ed table.cvtab th { border:1px solid var(--line); padding:3px 6px; min-width:40px; vertical-align:top; }
.rt-ed table.cvtab th { font-weight:normal; background:var(--chip); }  /* bold comes from the stored \textbf markup, matching the PDF */
.entry .row .rt { flex:1; min-width:0; }

/* ---- section header (rename / reorder / delete) ---- */
.card.sechead { padding:12px 14px; overflow:hidden; }
/* wrap + min-width:0 so the title input and the ops row shrink/stack instead of
   running outside the card when the editor pane is narrow */
.sechead-top { display:flex; align-items:center; gap:10px; flex-wrap:wrap; min-width:0; }
.secnum { font-weight:800; color:var(--brand); font-size:16px; }
.sectitle-input { flex:1 1 140px; min-width:0; width:auto; font-size:16px; font-weight:700; border:1px solid transparent; background:transparent;
  color:var(--ink); padding:5px 8px; border-radius:7px; }
.sectitle-input:hover, .sectitle-input:focus { border-color:var(--line); background:var(--bg); outline:none; }
.sechead-ops { display:flex; gap:4px; align-items:center; flex:0 1 auto; flex-wrap:wrap; }
.addsec { width:100%; margin-top:8px; border-style:dashed; }

/* ---- per-document Format slide-over ---- */
.ov-tag { margin-left:8px; font-size:11px; font-weight:700; color:var(--accent); cursor:pointer;
  border:1px solid var(--line); border-radius:20px; padding:1px 7px; background:var(--chip); }
.ov-tag:hover { border-color:var(--accent); }
.footprev { border:1px solid var(--line); background:var(--bg); border-radius:8px; padding:9px 12px;
  font:12.5px/1.5 Arial, Helvetica, sans-serif; color:var(--ink); white-space:pre-wrap; word-break:break-word; }
.btn.disabled { opacity:.45; pointer-events:none; }

/* ---- version history + diff ---- */
.slideover-panel.wide-so { max-width:640px; }
.ver-save { margin:8px 0 14px; padding:10px 12px; border:1px solid var(--line); border-radius:10px; background:var(--panel); }
.ver-save label { display:block; margin-bottom:6px; }
.ver-list { display:flex; flex-direction:column; gap:8px; }
.ver-row { display:flex; align-items:flex-start; justify-content:space-between; gap:10px; flex-wrap:wrap;
  border:1px solid var(--line); border-radius:10px; padding:9px 11px; background:var(--panel); }
.ver-main { min-width:0; flex:1; }
.ver-lab { display:flex; align-items:center; gap:8px; }
.vchip { font-weight:800; font-size:12.5px; color:#fff; background:var(--brand); border-radius:20px; padding:2px 9px; }
.ver-date { font-size:12px; color:var(--muted); }
.ver-note { font-size:13px; color:var(--ink); margin-top:3px; word-break:break-word; }
.ver-size { font-size:11px; margin-top:2px; }
.ver-ops { display:flex; flex-wrap:wrap; gap:4px; align-items:center; }
.diffbox { margin-top:14px; }
.diffbox:empty { display:none; }
.diff-h { display:flex; align-items:center; justify-content:space-between; font-weight:800; font-size:13px;
  margin-bottom:6px; color:var(--ink); }
.diff-stat { font-size:12.5px; font-weight:700; margin-bottom:8px; }
.diff-stat .add, .diff-row.add { color:#137a3b; }
.diff-stat .del, .diff-row.del { color:#b42318; }
.diff-sec { margin-bottom:10px; }
.diff-sec-h { font-size:11px; text-transform:uppercase; letter-spacing:.05em; color:var(--muted); font-weight:800; margin:6px 0 3px; }
.diff-row { font:12.5px/1.45 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; white-space:pre-wrap;
  word-break:break-word; padding:2px 8px; border-radius:5px; }
.diff-row.add { background:rgba(19,122,59,.10); }
.diff-row.del { background:rgba(180,35,24,.10); }
@media (prefers-color-scheme: dark) {
  .diff-stat .add, .diff-row.add { color:#6fd396; } .diff-row.add { background:rgba(111,211,150,.12); }
  .diff-stat .del, .diff-row.del { color:#f2938a; } .diff-row.del { background:rgba(242,147,138,.12); }
}
:root[data-theme="dark"] .diff-row.add { color:#6fd396; background:rgba(111,211,150,.12); }
:root[data-theme="dark"] .diff-row.del { color:#f2938a; background:rgba(242,147,138,.12); }

/* ---- folder dashboard ---- */
/* The library is an app shell, not a centred page: [ folder pane | content ], both
   flush to the window. The pane is furniture — it takes the window's left edge and a
   single hairline, no card border/shadow/radius, exactly like the editor rail. */
.view.library { max-width:none; padding:0; overflow:hidden; display:flex; }
.dash { display:flex; flex:1 1 auto; min-width:0; min-height:0; }
.dash-side { flex:0 0 264px; min-width:0; background:var(--panel);
  border:0; border-right:1px solid var(--line); border-radius:0; box-shadow:none;
  padding:14px 12px 12px; display:flex; flex-direction:column; gap:4px; }
.dash-side-h { font-size:11px; text-transform:uppercase; letter-spacing:.06em; color:var(--muted); font-weight:800; padding:2px 6px 6px; }
.folder-row { display:flex; align-items:center; justify-content:space-between; gap:8px; padding:8px 10px; border-radius:8px; cursor:pointer; font-size:13.5px; font-weight:600; }
.folder-row:hover { background:var(--chip); }
.folder-row.active { background:var(--brand); color:#fff; }
.folder-row .fname { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.folder-row .fcount { flex:none; font-size:11px; background:var(--chip); color:var(--muted); border-radius:20px; padding:1px 8px; }

/* drag-to-reorder: a ≡ grip handle initiates the drag; the rest keeps the normal
   pointer cursor + hover, so plain clicks select/open as usual */
.drag-handle { display:inline-grid; place-items:center; cursor:grab; color:inherit; opacity:.45; line-height:1; padding:0 3px; user-select:none; flex:none; }
.drag-handle:hover { opacity:.9; }
.drag-handle:active { cursor:grabbing; }
.folder-row .fname { flex:1; }
.tile.doc .drag-handle { position:static; }
.tile.doc:hover .drag-handle { opacity:.7; }
.dragging { opacity:.45; }
.folder-row.drop-before { box-shadow:inset 0 3px 0 -1px var(--brand); }
.folder-row.drop-after { box-shadow:inset 0 -3px 0 -1px var(--brand); }
.tile.doc.drop-before { box-shadow:inset 3px 0 0 -1px var(--brand); }
.tile.doc.drop-after { box-shadow:inset -3px 0 0 -1px var(--brand); }
.folder-row.active .fcount { background:rgba(255,255,255,.25); color:#fff; }
.addfolder { margin-top:6px; border-style:dashed; }
.dash-tools { display:flex; flex-direction:column; gap:4px; margin-top:8px; border-top:1px solid var(--line); padding-top:8px; }
/* Content scrolls; the pane does not. Same division of labour as .docpane/.librail. */
.dash-main { flex:1 1 auto; min-width:0; overflow-y:auto; padding:20px 26px 52px; }
/* A section, not a panel — a bordered box around the grid was a second frame inside
   the content area, and the tiles already carry their own. */
.card.card-flush { background:transparent; border:0; box-shadow:none; padding:0; margin-bottom:24px; }
.dash-head { display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:14px; flex-wrap:wrap; }
.dash-head h2 { margin:0; font-size:18px; }
.dash-head-ops { display:flex; gap:6px; align-items:center; flex-wrap:wrap; }
.movesel { font-size:11px; padding:3px 6px; }

.dropzone { border:2px dashed var(--line); border-radius:10px; padding:16px; text-align:center; color:var(--muted); margin:6px 0 10px; font-size:13px; }
.dropzone.over { border-color:var(--accent); background:color-mix(in srgb, var(--accent) 8%, transparent); color:var(--ink); }
.filelist { display:flex; flex-direction:column; gap:6px; }
.file-row { display:flex; align-items:center; gap:10px; padding:7px 10px; border:1px solid var(--line); border-radius:9px; background:var(--panel); }
.file-row > .ico-i { flex:none; color:var(--muted); }
.file-row .fnm { flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-weight:600; font-size:13px; }
.file-row .fsz { flex:none; font-size:11px; color:var(--muted); }
/* Narrow: the shell stacks and the PAGE scrolls again (a 264px pane beside content
   leaves neither enough room). The pane keeps its own flow height and a bottom rule
   instead of the side one. */
@media (max-width:760px) {
  .view.library { overflow-y:auto; }
  .dash { flex-direction:column; }
  .dash .dash-side { flex:none; max-height:none; border-right:0; border-bottom:1px solid var(--line); }
  .dash .dash-main { overflow:visible; padding:16px 16px 40px; }
}
.docname { flex:1 1 180px; min-width:0; width:auto; font-size:18px; font-weight:700; border:1px solid transparent; background:transparent; color:var(--ink);
  padding:5px 8px; border-radius:8px; flex:1; min-width:200px; }
.docname:hover, .docname:focus { border-color:var(--line); background:var(--panel); outline:none; }
.previewframe { width:100%; height:78vh; border:1px solid var(--line); border-radius:10px; background:#fff; }

/* ---- settings slide-over ---- */
.slideover { position:fixed; inset:0; background:rgba(8,12,20,.4); z-index:50; display:flex; justify-content:flex-end; }
.slideover-panel { width:400px; max-width:94vw; height:100%; background:var(--panel); box-shadow:-10px 0 34px rgba(0,0,0,.25);
  padding:18px 20px; overflow:auto; }
.slideover-panel h3 { margin:16px 0 6px; font-size:12px; text-transform:uppercase; letter-spacing:.05em; color:var(--muted); }
.so-head { display:flex; justify-content:space-between; align-items:center; margin-bottom:6px; }
.so-head h2 { margin:0; font-size:17px; }
.slideover-panel input[type=color] { width:46px; height:32px; padding:2px; border:1px solid var(--line); border-radius:6px; background:var(--panel); }

/* ---- counters / checklist ---- */
.counterwrap { display:flex; justify-content:space-between; align-items:center; margin-top:4px; }
.counter { font-size:12px; color:var(--muted); }
.counter.over { color:var(--danger); font-weight:800; }
.checklist { margin:8px 0 0 18px; font-size:13px; }
.checklist li { margin:5px 0; }
.entry input[type=text] { flex:1; min-width:120px; }

.empty { text-align:center; padding:44px 20px; }
body.compact .card { padding:10px 12px; margin-bottom:12px; }
body.compact .tile, body.compact .stat { padding:10px; }

/* Forced-dark (Settings ▸ Theme = Dark) parity for component-specific colors that
   were previously only under @media (prefers-color-scheme: dark). */
:root[data-theme="dark"] .cred-badge.expired { background:#3a1c1a; color:#f2938a; }
:root[data-theme="dark"] .cred-badge.soon { background:#3a2c10; color:#f0c67a; }
:root[data-theme="dark"] .cred-badge.active { background:#12351f; color:#7fe0a5; }
:root[data-theme="dark"] .savechip.saved { background:#12351f; color:#7fe0a5; }
:root[data-theme="dark"] .savechip.saving { background:#3a2c10; color:#f0c67a; }
:root[data-theme="dark"] .badge.cv, :root[data-theme="dark"] .badge.one-page,
:root[data-theme="dark"] .badge.portfolio, :root[data-theme="dark"] .badge.biosketch,
:root[data-theme="dark"] .badge.accolades, :root[data-theme="dark"] .badge.ccpr { filter:brightness(.85); }

/* ---- sticky notes ---- */
.notes-list { display:grid; gap:10px; margin-top:12px; }
.note-card { background: color-mix(in srgb, #f7d774 22%, var(--panel)); border:1px solid color-mix(in srgb, #b58500 35%, var(--line)); border-radius:10px; padding:8px 10px; }
/* per-section notes strip in the CV editor */
.secnotes { margin-top:12px; }
.secnotes-h { font-size:11.5px; font-weight:800; text-transform:uppercase; letter-spacing:.04em; color:color-mix(in srgb, #b58500 70%, var(--muted)); margin:0 0 6px; }
.secnotes .note-card { margin-bottom:6px; padding:6px 10px; }
.secnotes .note-text { min-height:24px; }
.secnote-new .note-text::placeholder { color:color-mix(in srgb, #b58500 45%, var(--muted)); }
.note-card.done { opacity:.62; background: color-mix(in srgb, #9aa 12%, var(--panel)); }
.note-card.done .note-text { text-decoration: line-through; }
.note-head { display:flex; align-items:center; gap:8px; margin-bottom:6px; }
.note-when { flex:1; font-size:11.5px; color:var(--muted); font-variant-numeric:tabular-nums; }
.note-text { width:100%; min-height:54px; border:none; outline:none; background:transparent; resize:vertical; color:var(--ink); font:14px/1.45 inherit; font-family:inherit; }

/* ---- in-app dialogs (replace native confirm/alert/prompt — no-ops in the desktop webview) ---- */
.dlg-over { position:fixed; inset:0; background:rgba(10,14,25,.45); z-index:400; display:grid; place-items:center; }
.dlg { background:var(--panel); border:1px solid var(--line); border-radius:12px; box-shadow:0 12px 40px rgba(0,0,0,.35);
  padding:18px 20px; max-width:420px; width:calc(100vw - 48px); }
.dlg-msg { font-size:14px; line-height:1.5; white-space:pre-wrap; }
.dlg-input { width:100%; margin-top:12px; padding:8px 10px; border:1px solid var(--line); border-radius:8px;
  background:var(--bg); color:var(--ink); font-size:14px; }
.dlg-input:focus { outline:none; border-color:var(--accent); }
.dlg-row { display:flex; justify-content:flex-end; gap:8px; margin-top:16px; }
.dlg-choices { display:flex; flex-direction:column; gap:8px; margin:10px 0 4px; }
.dlg-choice { text-align:left; border:1px solid var(--line); background:var(--card,#fff); color:var(--ink);
  border-radius:10px; padding:10px 12px; cursor:pointer; }
.dlg-choice:hover, .dlg-choice:focus { border-color:var(--accent); background:var(--chip); outline:none; }
.dlg-choice-l { font-weight:700; font-size:14px; }
.dlg-choice-s { font-size:12.5px; color:var(--muted); margin-top:2px; }
/* Asset Storage */
.assets-dlg { max-width:640px; width:94vw; }
.asset-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(130px,1fr)); gap:10px; margin:12px 0 4px; max-height:52vh; overflow-y:auto; }
.asset-card { position:relative; border:1px solid var(--line); border-radius:10px; padding:8px; background:var(--card,#fff); }
.asset-card.pickable { cursor:pointer; }
.asset-card.pickable:hover { border-color:var(--accent); background:var(--chip); }
.asset-thumb { height:84px; border-radius:7px; background-color:var(--chip); background-size:contain; background-repeat:no-repeat; background-position:center; }
.asset-name { font-size:12px; font-weight:700; margin-top:6px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.asset-sub { font-size:11px; color:var(--muted); }
.asset-ops { display:flex; gap:2px; margin-top:4px; }
.dlg .btn.danger { border-color:var(--danger); }

/* Boot-loop breaker banner (shown after the WebView reload-storms) */
.safe-banner { position:fixed; left:0; right:0; bottom:0; z-index:300; display:flex; align-items:center; gap:14px;
  flex-wrap:wrap; padding:10px 16px; background:#7a1f16; color:#fff; border-top:1px solid #a8352a; box-shadow:0 -6px 20px rgba(0,0,0,.28); }
.safe-banner-txt { flex:1 1 340px; font-size:12.5px; line-height:1.45; }
.safe-banner-ops { display:flex; gap:8px; flex:0 0 auto; }
.safe-banner .btn.ghost { color:#fff; border-color:rgba(255,255,255,.5); background:transparent; }
.safe-banner .btn.ghost:hover { background:rgba(255,255,255,.12); }
.safe-banner .btn.danger { background:#fff; color:#7a1f16; border-color:#fff; font-weight:700; }

/* ---- Evaluator guidelines: hideable side sheet (slides in from the right) ---- */
.sheet-over { position:fixed; inset:0; background:rgba(10,14,25,.45); z-index:420; display:flex; justify-content:flex-end; }
.info-sheet { background:var(--panel); border-left:1px solid var(--line); box-shadow:-16px 0 46px rgba(0,0,0,.28);
  width:min(500px,94vw); height:100%; overflow-y:auto; padding:18px 22px 30px; animation:sheetIn .2s ease; }
@keyframes sheetIn { from { transform:translateX(26px); opacity:.4; } to { transform:none; opacity:1; } }
.gl-head { display:flex; justify-content:space-between; align-items:flex-start; gap:12px; margin-bottom:4px; }
.gl-title { font-size:17px; font-weight:800; margin:0; line-height:1.25; }
.gl-source { font-size:11.5px; color:var(--muted); margin-top:4px; }
.gl-x { border:none; background:transparent; font-size:17px; line-height:1; cursor:pointer; color:var(--muted); padding:4px 7px; border-radius:8px; flex:none; }
.gl-x:hover { background:var(--chip); color:var(--ink); }
.gl-sec-h { font-weight:800; font-size:11.5px; text-transform:uppercase; letter-spacing:.04em; color:var(--brand); margin:18px 0 8px; }
.gl-letter { display:flex; gap:12px; padding:8px 0; border-bottom:1px dashed var(--line); }
.gl-letter-rank { flex:0 0 40%; font-weight:700; font-size:13px; }
.gl-letter-txt { flex:1; font-size:13px; line-height:1.5; }
.gl-note { background:var(--chip); border:1px solid var(--line); border-radius:10px; padding:10px 12px; font-size:12.5px; line-height:1.5; margin:12px 0 2px; }
.gl-cat { border:1px solid var(--line); border-radius:12px; padding:11px 14px; margin-bottom:10px; background:var(--card,#fff); }
.gl-cat-head { display:flex; justify-content:space-between; align-items:baseline; gap:10px; margin-bottom:4px; }
.gl-cat-title { font-weight:700; font-size:14px; }
.gl-cat-count { font-size:12px; font-weight:800; color:var(--brand); white-space:nowrap; }
.gl-rules { margin:2px 0 0; padding-left:18px; }
.gl-rules li { font-size:12.5px; line-height:1.55; margin:4px 0; }
.gl-tips li { color:var(--muted); }
.gl-foot { margin-top:18px; display:flex; justify-content:flex-end; }
.btn.gl-open { border-color:var(--accent); }

/* ---- in-app documentation viewer (full-window iframe over the app) ---- */
.docviewer-over { position:fixed; inset:0; z-index:430; background:var(--panel); display:flex; flex-direction:column; }
.docviewer-bar { flex:0 0 auto; display:flex; align-items:center; gap:12px; padding:8px 14px;
  border-bottom:1px solid var(--line); background:var(--panel); }
.docviewer-title { font-weight:700; font-size:14px; }
.docviewer-x { margin-left:auto; border:none; background:transparent; font-size:16px; line-height:1; cursor:pointer;
  color:var(--muted); padding:4px 9px; border-radius:8px; }
.docviewer-x:hover { background:var(--chip); color:var(--ink); }
.docviewer-frame { flex:1 1 auto; width:100%; border:0; background:#fff; }

.rail-doc { position:relative; }
.rail-doc-ops { display:none; gap:1px; margin-left:auto; flex:none; }
.rail-doc:hover .rail-doc-ops, .rail-doc.active .rail-doc-ops { display:flex; }
.rail-folder-h { display:flex; align-items:center; }
.rail-folder-h .rail-doc-ops { margin-left:auto; }
.rail-folder-h:hover .rail-doc-ops { display:flex; }
.rail-fcount { margin-left:6px; }
.rail-doc-ops .icon.xs { font-size:13px; padding:1px 4px; line-height:1; color:var(--muted); border-radius:5px; }
.rail-doc-ops .icon.xs:hover:not([disabled]) { background:color-mix(in srgb, var(--accent) 18%, transparent); color:var(--ink); }
.rail-doc-ops .icon.xs[disabled] { opacity:.3; cursor:default; }

/* ===== CONTROLS ON A SELECTED ROW =====================================
   A selected row is filled with --brand and its text turns white, but the
   controls sitting ON that fill kept `color: var(--muted)` — grey furniture on
   a saturated ground, which is the one combination that disappears. The
   reorder arrows were effectively invisible exactly when you had selected the
   thing you wanted to move.

   The row already solved this for its other children (.num, .c, .fcount ride
   the fill at 25% white). These do the same, stated once for every filled row
   rather than per component, so a control added to one of these rows tomorrow
   inherits the contrast instead of repeating the bug.

   `inherit` deliberately, not #fff: the row owns the foreground colour, so if
   the fill ever changes the furniture follows it. Disabled goes to 55% rather
   than the flat .3 opacity — on a dark fill .3 is indistinguishable from
   absent, and "you cannot move this one up" has to read as a state, not as a
   missing button. */
.rail-doc.active .rail-doc-ops .icon.xs,
.folder-row.active .rail-doc-ops .icon.xs,
.sec-nav-row.active .rail-doc-ops .icon.xs,
.rail-folder-h.active .rail-doc-ops .icon.xs { color:inherit; }
.rail-doc.active .rail-doc-ops .icon.xs:hover:not([disabled]),
.folder-row.active .rail-doc-ops .icon.xs:hover:not([disabled]),
.sec-nav-row.active .rail-doc-ops .icon.xs:hover:not([disabled]),
.rail-folder-h.active .rail-doc-ops .icon.xs:hover:not([disabled]) {
  background:rgba(255,255,255,.28); color:inherit;
}
.rail-doc.active .rail-doc-ops .icon.xs[disabled],
.folder-row.active .rail-doc-ops .icon.xs[disabled],
.sec-nav-row.active .rail-doc-ops .icon.xs[disabled],
.rail-folder-h.active .rail-doc-ops .icon.xs[disabled] { opacity:.55; }
/* The drag grip rides the fill too — it was .45 of a muted grey on slate. */
.folder-row.active .drag-handle, .rail-doc.active .drag-handle { color:inherit; opacity:.8; }

/* ---- icon-era chrome tweaks (see the sprite block in index.html) ---- */
/* The folder sidebar row gained a leading glyph; the marker keeps the muted
   colour of the row's furniture, not the row's text, so the NAME stays the
   thing your eye lands on. */
.folder-row .fico { flex:none; color:var(--muted); }
.folder-row.active .fico { color:inherit; }
/* Sticky-note count: a text node BESIDE the glyph. It has to be a sibling —
   rewriting the button's textContent to show a count would delete the <svg>. */
.tb-count { font-variant-numeric:tabular-nums; font-size:12px; font-weight:700; }
.tb-count:empty { display:none; }
/* Icon-only controls: keep the glyph optically centred now that there is no
   text baseline to sit on. */
button.icon.xs { display:inline-grid; place-items:center; }
button.icon .ico-i { pointer-events:none; }

/* The folder pane collapses the way the editor rail does — same header toggle,
   same setting shape, so one control drives whichever pane the route has. */
.dash.side-off { grid-template-columns: 1fr; }
.dash-side.collapsed { display: none; }

/* ================= SIDE PANE FOOTER =================
   The system cluster and the account block. Bottom-up, pinned below whatever
   the pane's own list is, so they sit in the same place on every route. */
.side-foot { margin-top: auto; padding-top: 10px; border-top: 1px solid var(--line); }
.side-sys { display: flex; flex-direction: column; gap: 1px; margin-bottom: 8px; }
/* Rounded-pill rows: margin + radius, no edge bar. */
.sys-row { display: flex; align-items: center; gap: 9px; width: 100%; margin: 0;
  padding: 6px 9px; border: 0; border-radius: 8px; background: none; cursor: pointer;
  font: inherit; font-size: 12.5px; font-weight: 600; color: var(--muted); text-align: left; }
.sys-row:hover { background: var(--chip); color: var(--ink); }
.sys-row .ico-i { flex: none; }
.sys-lbl { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* The unread mark: a dot, not a count — there is only ever one thing behind it,
   and it survives a reload because it is keyed by build, not by session. */
.sys-dot { flex: none; width: 7px; height: 7px; border-radius: 50%; background: var(--accent); }
.sys-meta { flex: none; font-size: 11px; color: var(--muted); font-variant-numeric: tabular-nums; }
.sys-meta:empty { display: none; }

.side-acct { display: flex; align-items: center; gap: 9px; padding: 7px 6px; border-radius: 9px; }
.side-acct:hover { background: var(--chip); }
.acct-txt { flex: 1; min-width: 0; }
.acct-name { font-size: 12.5px; font-weight: 700; color: var(--ink);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.acct-sub { font-size: 10.5px; color: var(--muted);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.acct-more { flex: none; display: grid; place-items: center; width: 26px; height: 26px;
  border: 0; border-radius: 7px; background: none; color: var(--muted); cursor: pointer; }
.acct-more:hover { background: var(--panel); color: var(--ink); }

/* Both panes become columns so `margin-top:auto` can push the footer down. */
.dash-side, .librail { display: flex; flex-direction: column; }
.librail .rail-tree { flex: 1 1 auto; }
.dash-side .folder-row { flex: none; }

/* What's new */
.whatsnew .md h2, .whatsnew .md h3 { margin: 14px 0 6px; font-size: 14px; }
.whatsnew .md h2:first-child, .whatsnew .md h3:first-child { margin-top: 0; }
.whatsnew .md p { margin: 6px 0; font-size: 13px; }
.whatsnew .md ul { margin: 6px 0; padding-left: 20px; }
.whatsnew .md li { font-size: 13px; margin: 3px 0; }
.whatsnew .md code { font-size: 12px; }

/* The pane is a column with ONE scrolling region: its list. The footer under it
   keeps its place no matter how many folders or documents there are. It is a flex
   child of a fixed-height shell now, so it takes its height from that — the old
   viewport calculation guessed at the chrome above it and drifted. */
.dash-side { max-height: none; }
.side-list { flex: 1 1 auto; min-height: 0; overflow-y: auto; display: flex; flex-direction: column; gap: 2px; }
.librail .rail-tree { min-height: 0; overflow-y: auto; }
.librail .rail-foot, .librail .side-foot, .dash-side .side-foot { flex: none; }

/* ---- value slots ----
   Trailing meta on a nav row. Neutral by default; the two tones are the only
   colour allowed in these rows, because they are the only thing here that is
   asking to be dealt with. */
.val-slot { flex: none; font-size: 10.5px; font-weight: 700; padding: 1px 6px; border-radius: 10px;
  background: var(--chip); color: var(--muted); font-variant-numeric: tabular-nums; white-space: nowrap; }
.val-slot.warn { background: #fdf1dc; color: #7a4b00; }
.val-slot.bad { background: #fdeceb; color: #8a231b; }
:root[data-theme="dark"] .val-slot.warn { background: #3a2c10; color: #f0c67a; }
:root[data-theme="dark"] .val-slot.bad { background: #3a1c1a; color: #f2938a; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .val-slot.warn { background: #3a2c10; color: #f0c67a; }
  :root:not([data-theme="light"]) .val-slot.bad { background: #3a1c1a; color: #f2938a; }
}
/* On the active (filled) row the chip grounds would fight the fill — let the
   slot ride the row's own colour instead, the way the count already does. */
.folder-row.active .val-slot, .rail-doc.active .val-slot { background: rgba(255,255,255,.22); color: #fff; }
.rail-doc .val-slot { margin-left: auto; }
.rail-doc:hover .val-slot, .rail-doc.active .val-slot { display: none; }  /* the reorder arrows take this space */

/* The drag grip is pure affordance: it took 20px from every folder row
   permanently so that "Credentials · 2 expired" truncated to "Cre…". It appears
   on hover / keyboard focus instead, which is when a drag can actually start.
   display, not opacity — opacity:0 still holds the column open. */
.folder-row .drag-handle { display: none; }
.folder-row:hover .drag-handle, .folder-row:focus-within .drag-handle { display: inline-grid; }
/* Slightly tighter than a count chip: the slot carries two words, not one. */
.val-slot { padding: 1px 5px; letter-spacing: -.1px; }

/* ================= THE DOCS PAGE =================
   Full-window: a manual is something you read, and a 380px slide-over is not
   where anyone reads one. The chip TOC is sticky; only the body scrolls. */
.docs-over { position: fixed; inset: 0; z-index: 70; display: flex; flex-direction: column;
  background: var(--bg); }
.docs-bar { display: flex; align-items: center; gap: 10px; padding: 10px 16px;
  background: var(--panel); border-bottom: 1px solid var(--line); flex: none; }
.docs-title { display: inline-flex; align-items: center; gap: 8px; font-weight: 700; font-size: 15px; flex: 1; }
.docs-ver { font-size: 11.5px; color: var(--muted); font-variant-numeric: tabular-nums; }
.docs-x { display: grid; place-items: center; width: 30px; height: 30px; flex: none;
  border: 1px solid var(--line); border-radius: 8px; background: var(--panel);
  color: var(--muted); cursor: pointer; }
.docs-x:hover { color: var(--ink); border-color: var(--muted); }
.docs-toc { display: flex; gap: 6px; flex-wrap: wrap; padding: 10px 16px; flex: none;
  background: var(--panel); border-bottom: 1px solid var(--line); }
.docs-chip { display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px;
  border: 1px solid var(--line); border-radius: 20px; background: var(--panel);
  color: var(--muted); font: inherit; font-size: 12px; font-weight: 600; cursor: pointer; }
.docs-chip:hover, .docs-chip:focus-visible { background: var(--chip); color: var(--ink); border-color: var(--muted); }
.docs-scroll { flex: 1; min-height: 0; overflow-y: auto; }
.docs-body { max-width: 820px; margin: 0 auto; padding: 20px 16px 60px; }
.docs-card { scroll-margin-top: 12px; }
.docs-card h2 { display: flex; align-items: center; gap: 8px; margin: 0 0 10px; font-size: 16px; }
.docs-prose { font-size: 13.5px; line-height: 1.62; color: var(--ink); }
.docs-prose p { margin: 0 0 9px; }
.docs-prose p:last-child { margin-bottom: 0; }
.docs-prose b { font-weight: 700; }
.docs-prose code { font-size: 12.5px; }
/* the changelog card, rendered through mdLite */
.docs-prose.md h2 { font-size: 15px; margin: 18px 0 6px; display: block; }
.docs-prose.md h3 { font-size: 13.5px; margin: 14px 0 5px; color: var(--muted);
  text-transform: none; letter-spacing: 0; }
.docs-prose.md h2:first-child { margin-top: 0; }
.docs-prose.md ul { margin: 6px 0 10px; padding-left: 20px; }
.docs-prose.md li { margin: 3px 0; }

/* Keyboard focus has to be VISIBLE on the rows that are now reachable by it —
   a focus ring is the only thing telling you where Enter will take you. */
.folder-row:focus-visible, .rail-doc:focus-visible, .tile.doc:focus-visible,
.sys-row:focus-visible, .docs-chip:focus-visible, .tb-btn:focus-visible,
.crumb-sec:focus-visible, .crumb-name:focus-visible, #tb-search:focus-visible {
  outline: 2px solid var(--accent); outline-offset: 2px;
}

/* ============================================================================
   Publication tools — the PubMed bibliography checker (.cvf-*) and the citation
   metrics panel (.cvm-*), both opened from the Additions Composer.

   These shipped briefly as a runtime <style> injected by their own module while
   this sheet was being rewritten by concurrent work. They belong here.

   Screen-only by nature: neither panel is ever part of an exported document.
   ========================================================================= */

.cvf-over, .cvm-over {
  position: fixed; inset: 0; background: rgba(12,16,24,.55); z-index: 70;
  display: flex; align-items: center; justify-content: center; padding: 24px;
}
.cvf, .cvm {
  background: var(--panel); color: var(--ink); border: 1px solid var(--line);
  border-radius: 12px; box-shadow: 0 18px 50px rgba(0,0,0,.28);
  max-height: 100%; display: flex; flex-direction: column;
}
.cvf { width: min(980px, 100%); }
.cvm { width: min(880px, 100%); }
.cvf-h, .cvm-h {
  display: flex; align-items: center; gap: 10px; padding: 12px 14px;
  border-bottom: 1px solid var(--line); flex: none;
}
.cvf-h h3, .cvm-h h3 { margin: 0; font-size: 15px; }
.cvf-sub, .cvm-sub { color: var(--muted); font-size: 12px; }
.cvf-body, .cvm-body { overflow: auto; flex: 1 1 auto; }
.cvf-body { padding: 10px 14px; min-height: 120px; }
.cvm-body { padding: 12px 14px; }
.cvf-f, .cvm-f {
  display: flex; gap: 9px; padding: 10px 14px; border-top: 1px solid var(--line);
  flex: none; align-items: center; flex-wrap: wrap;
}

/* ---- bibliography checker ---- */
.cvf-style {
  display: flex; flex-wrap: wrap; gap: 10px; align-items: center;
  padding: 9px 14px; border-bottom: 1px solid var(--line);
  background: var(--bg); flex: none; font-size: 12px;
}
.cvf-style label { display: flex; align-items: center; gap: 4px; color: var(--muted); }
.cvf-style select, .cvf-style input[type=number] {
  font: inherit; padding: 2px 4px; border: 1px solid var(--line);
  border-radius: 6px; background: var(--panel); color: var(--ink);
}
.cvf-row {
  border: 1px solid var(--line); border-radius: 9px; padding: 9px 11px;
  margin-bottom: 9px; background: var(--panel);
}
.cvf-row.done { opacity: .55; }
.cvf-top { display: flex; align-items: flex-start; gap: 8px; }
.cvf-chip {
  flex: none; font-size: 11px; font-weight: 700; padding: 2px 7px;
  border-radius: 999px; white-space: nowrap;
}
.cvf-chip.match    { background: #e7f6ee; color: #137a3b; }
.cvf-chip.conflict { background: #fff5e0; color: #8a5a00; }
.cvf-chip.notfound { background: var(--chip); color: var(--muted); }
.cvf-chip.err      { background: #fdecea; color: #a3271e; }
.cvf-cur { font-size: 12px; line-height: 1.45; color: var(--muted); flex: 1 1 auto; min-width: 0; }
.cvf-diffs { margin: 7px 0 0; display: flex; flex-direction: column; gap: 3px; }
.cvf-d { font-size: 11.5px; line-height: 1.4; display: flex; gap: 6px; align-items: baseline; }
.cvf-d b { flex: none; font-weight: 600; min-width: 104px; }
.cvf-d.fact b { color: #a3271e; }
.cvf-d.style b, .cvf-d.missing b { color: #8a5a00; }
.cvf-was { text-decoration: line-through; opacity: .7; }
.cvf-prop {
  width: 100%; box-sizing: border-box; margin-top: 7px;
  font: 12px/1.5 ui-monospace, Menlo, monospace; padding: 7px 8px;
  border: 1px solid var(--line); border-radius: 7px;
  background: var(--bg); color: var(--ink); min-height: 58px; resize: vertical;
}
.cvf-acts { display: flex; gap: 6px; margin-top: 7px; align-items: center; flex-wrap: wrap; }
.cvf-prog { flex: 1 1 auto; color: var(--muted); font-size: 12px; }

/* ---- citation metrics ---- */
.cvm-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(215px, 1fr)); gap: 10px; }
.cvm-card { border: 1px solid var(--line); border-radius: 10px; padding: 11px 12px; background: var(--bg); }
.cvm-src { font-size: 11px; text-transform: uppercase; letter-spacing: .04em; color: var(--muted); font-weight: 700; }
.cvm-h1 { font-size: 30px; font-weight: 700; line-height: 1.1; margin: 6px 0 1px; font-variant-numeric: tabular-nums; }
.cvm-lab { font-size: 11px; color: var(--muted); }
.cvm-stats { display: flex; gap: 12px; margin-top: 7px; flex-wrap: wrap; }
.cvm-stat b { display: block; font-size: 15px; font-variant-numeric: tabular-nums; }
.cvm-note { font-size: 11px; color: var(--muted); margin-top: 7px; line-height: 1.4; }
.cvm-err { font-size: 12px; line-height: 1.45; padding: 7px 9px; border-radius: 7px; background: #fff5e0; color: #8a5a00; margin-top: 6px; }
.cvm-keys { margin-top: 14px; border-top: 1px solid var(--line); padding-top: 11px; }
.cvm-key { display: flex; gap: 8px; align-items: center; margin: 6px 0; flex-wrap: wrap; }
.cvm-key label { font-size: 12px; min-width: 132px; color: var(--muted); }
.cvm-key input {
  flex: 1 1 240px; font: 12px/1.4 ui-monospace, Menlo, monospace; padding: 5px 7px;
  border: 1px solid var(--line); border-radius: 7px; background: var(--panel); color: var(--ink);
}

/* Dark: chip and callout grounds go LIGHTER than the surface, not darker. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .cvf-chip.match { background: #123524; color: #7fe0a6; }
  :root:not([data-theme="light"]) .cvf-chip.conflict { background: #3a2e12; color: #f0c26b; }
  :root:not([data-theme="light"]) .cvf-chip.err { background: #3a1c1a; color: #f2938a; }
  :root:not([data-theme="light"]) .cvf-d.fact b { color: #f2938a; }
  :root:not([data-theme="light"]) .cvf-d.style b,
  :root:not([data-theme="light"]) .cvf-d.missing b { color: #f0c26b; }
  :root:not([data-theme="light"]) .cvm-err { background: #3a2e12; color: #f0c26b; }
}
:root[data-theme="dark"] .cvf-chip.match { background: #123524; color: #7fe0a6; }
:root[data-theme="dark"] .cvf-chip.conflict { background: #3a2e12; color: #f0c26b; }
:root[data-theme="dark"] .cvf-chip.err { background: #3a1c1a; color: #f2938a; }
:root[data-theme="dark"] .cvf-d.fact b { color: #f2938a; }
:root[data-theme="dark"] .cvf-d.style b,
:root[data-theme="dark"] .cvf-d.missing b { color: #f0c26b; }
:root[data-theme="dark"] .cvm-err { background: #3a2e12; color: #f0c26b; }

/* ================= SIDE-PANE DELETE + ORGANISE =================
   Every colour here comes from the token set, so the dark theme follows
   automatically rather than needing a second copy of these rules. */

/* The folder rows in the HOME pane hold ops now, exactly as the editor rail's
   folder heads do. Without this they were built and never shown: .rail-doc-ops
   is display:none until something reveals it. */
.folder-row:hover .rail-doc-ops,
.folder-row:focus-within .rail-doc-ops,
.folder-row.active .rail-doc-ops { display:flex; }
/* Touch and keyboard have no hover, so the ops must not be hover-ONLY. */
.rail-doc:focus-within .rail-doc-ops,
.rail-folder-h:focus-within .rail-doc-ops { display:flex; }
@media (hover:none) {
  .rail-doc-ops { display:flex; }
}
.rail-doc-ops .icon.xs.danger:hover:not([disabled]) {
  background:color-mix(in srgb, var(--danger) 16%, transparent);
  color:var(--danger);
}

/* ---- the Organise screen ---- */
.org-wrap { max-width:900px; margin:0 auto; padding:18px 16px 64px; display:flex; flex-direction:column; gap:14px; }
.org-head { display:flex; align-items:flex-start; justify-content:space-between; gap:12px; flex-wrap:wrap; }
.org-title { margin:0; font-size:20px; }
.org-sub { font-size:12px; margin-top:2px; }
.org-bar { display:flex; align-items:center; gap:8px; flex-wrap:wrap; }
.org-select {
  font:inherit; font-size:12px; padding:5px 8px; border-radius:8px;
  border:1px solid var(--line); background:var(--panel); color:var(--ink); max-width:180px;
}
.org-select.sm { font-size:11px; padding:3px 6px; max-width:150px; }

/* The selection bar keeps its place in the layout but stays inert until
   something is ticked — controls that act on a selection should never be
   offered without one. */
.org-bulk {
  display:flex; align-items:center; gap:8px; flex-wrap:wrap;
  padding:8px 10px; border-radius:var(--radius);
  border:1px solid var(--line); background:var(--chip);
  opacity:.5; transition:opacity .12s ease;
}
.org-bulk.on { opacity:1; border-color:color-mix(in srgb, var(--accent) 45%, var(--line)); }
.org-bulk-n { font-size:12px; color:var(--muted); font-weight:600; min-width:76px; }
.org-bulk.on .org-bulk-n { color:var(--ink); }

.org-list { display:flex; flex-direction:column; gap:12px; }
.org-folder { border:1px solid var(--line); border-radius:var(--radius); background:var(--panel); overflow:hidden; }
.org-folder-h {
  display:flex; align-items:center; gap:8px;
  padding:9px 12px; background:var(--chip); border-bottom:1px solid var(--line);
}
.org-folder-h .fico { flex:none; color:var(--muted); }
.org-folder-name { font-weight:600; font-size:13px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.org-count {
  flex:none; font-size:11px; color:var(--muted);
  background:var(--panel); border-radius:999px; padding:1px 7px;
  font-variant-numeric:tabular-nums;
}
.org-folder-h .org-ops { margin-left:auto; }
.org-ops { display:flex; gap:1px; flex:none; }
.org-ops .icon.xs {
  font-size:13px; padding:2px 5px; line-height:1; color:var(--muted);
  border:0; background:none; cursor:pointer; border-radius:6px;
}
.org-ops .icon.xs:hover:not([disabled]) { background:color-mix(in srgb, var(--accent) 18%, transparent); color:var(--ink); }
.org-ops .icon.xs.danger:hover:not([disabled]) { background:color-mix(in srgb, var(--danger) 16%, transparent); color:var(--danger); }
.org-ops .icon.xs[disabled] { opacity:.3; cursor:default; }

.org-row { display:flex; align-items:center; gap:8px; padding:7px 12px; border-top:1px solid var(--line); }
.org-folder-h + .org-row { border-top:0; }
.org-row:hover { background:var(--chip); }
.org-row.sel { background:color-mix(in srgb, var(--accent) 10%, transparent); }
.org-cb { flex:none; margin:0; cursor:pointer; }
.org-name {
  flex:1; min-width:0; text-align:left; font:inherit; font-size:13px;
  background:none; border:0; padding:0; color:var(--ink); cursor:pointer;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.org-name:hover { color:var(--link); text-decoration:underline; }
.org-type { flex:none; font-size:11px; }
.org-empty { padding:10px 12px; font-size:12px; }

@media (max-width:640px) {
  /* The type label and the per-row folder picker are the first things to go:
     the name, the checkbox and the delete are what the row is FOR. */
  .org-type { display:none; }
  .org-row .org-select { max-width:110px; }
}

/* ---- duplicate sweep ---- */
.org-dup-note { padding:2px 2px 6px; }
/* The keeper is marked by a rail on its leading edge rather than a fill: the
   rows below it are the ones you are about to tick, and a filled row reads as
   already selected. */
.org-row.keep { box-shadow:inset 3px 0 0 var(--ok); }
.org-keep {
  flex:none; font-size:10px; font-weight:700; letter-spacing:.05em; text-transform:uppercase;
  color:var(--ok); border:1px solid color-mix(in srgb, var(--ok) 45%, transparent);
  border-radius:999px; padding:1px 7px;
}
.org-fact {
  flex:none; font-size:11px; color:var(--muted); font-variant-numeric:tabular-nums;
  min-width:64px; text-align:right;
}
/* "has files" is the deciding fact in this view, so it is the one thing that
   is not grey. */
.org-fact.has { color:var(--ink); font-weight:600; }
.org-row.keep .org-name { font-weight:600; }

@media (max-width:640px) {
  .org-fact { min-width:0; }
  .org-row.keep .org-keep { padding:1px 5px; }
}