:root {
    --bg: #eef1f5; --surface: #ffffff; --surface-2: #e7ebf1;
    --ink: #16202c; --ink-soft: #44525a; --ink-faint: #5b626e;
    --line: #d5dbe4; --line-strong: #c2cad6;
    --accent: #d62027; --accent-tint: #fbe8e9; --accent-ink: #d62027;
    --ok: #06a6c4; --ok-ink: #06a6c4; --ok-tint: #e1f5f9; --pending: #8f5e0a; --pending-fill: #efa215; --pending-tint: #f6ecd9; --cov-on-ink: #ffffff; --cov-review-ink: #1a1206;
    --shadow-rest: 0 1px 1px rgba(20,30,50,.04);
    --shadow-hover: 0 2px 4px rgba(20,30,50,.08), 0 16px 40px rgba(20,30,50,.12);
    --font-ui: "Avenir Next", "Avenir", "Segoe UI Variable Text", "Segoe UI", system-ui, -apple-system, Roboto, sans-serif;
    --font-label: "Bahnschrift", "DIN Alternate", "Avenir Next Condensed", var(--font-ui);
    --font-mono: ui-monospace, "Cascadia Mono", "Cascadia Code", Consolas, "SF Mono", monospace;
    /* Corner-radius tier ladder: xs(4) chip(6) sm(8) ctl(10) card(12) lg(14) pill(full). */
    --r-xs: 4px; --r-chip: 6px; --r-sm: 8px; --r-ctl: 10px; --r-card: 12px; --r-lg: 14px; --r-pill: 999px;
    /* Type scale (font sizes) — one source of truth; values unchanged from the hand-tuned originals. */
    --fs-8-5: 8.5px; --fs-9: 9px; --fs-9-5: 9.5px; --fs-10: 10px; --fs-10-5: 10.5px; --fs-11: 11px;
    --fs-11-5: 11.5px; --fs-12: 12px; --fs-12-5: 12.5px; --fs-13: 13px; --fs-13-5: 13.5px; --fs-14: 14px;
    --fs-14-5: 14.5px; --fs-15: 15px; --fs-17: 17px; --fs-22: 22px; --fs-23: 23px; --fs-30: 30px;
    --fs-34: 34px;
    /* Spacing scale (padding / margin / gap) — values unchanged. */
    --sp-1: 1px; --sp-2: 2px; --sp-3: 3px; --sp-4: 4px; --sp-5: 5px; --sp-6: 6px;
    --sp-7: 7px; --sp-8: 8px; --sp-9: 9px; --sp-10: 10px; --sp-11: 11px; --sp-12: 12px;
    --sp-13: 13px; --sp-14: 14px; --sp-15: 15px; --sp-16: 16px; --sp-18: 18px; --sp-20: 20px;
    --sp-22: 22px; --sp-24: 24px; --sp-26: 26px; --sp-28: 28px; --sp-34: 34px; --sp-36: 36px;
    --sp-40: 40px; --sp-80: 80px; --sp-90: 90px;
  
  }
  /* DARK THEME — explicit toggle. ⚠ These tokens are DUPLICATED verbatim in the
     @media(prefers-color-scheme:dark) block just below (for users on system default). CSS can't share
     one rule across a media boundary, so EDIT BOTH BLOCKS together or the toggle and system themes drift. */
  :root[data-theme="dark"] {
    --bg: #0d131f; --surface: #151d2b; --surface-2: #1c2637; --ink: #e8edf6;
    --ink-soft: #97a3b8; --ink-faint: #8b93a4; --line: #263248; --line-strong: #33415b;
    --accent: #d62027; --accent-tint: #2a1517; --accent-ink: #d62027;
    --ok: #06a6c4; --ok-ink: #06a6c4; --ok-tint: #0f2a30; --pending: #dda344; --pending-fill: #efa215; --pending-tint: #2a2113; --cov-on-ink: #0c1622; --cov-review-ink: #1a1206;
    --shadow-rest: 0 1px 1px rgba(0,0,0,.25);
    --shadow-hover: 0 2px 6px rgba(0,0,0,.4), 0 18px 46px rgba(0,0,0,.5);
  }
  /* DARK THEME — system default (no explicit toggle). ⚠ Keep IDENTICAL to :root[data-theme="dark"] above — EDIT BOTH. */
  @media (prefers-color-scheme: dark) {
    :root:not([data-theme]) {
      --bg: #0d131f; --surface: #151d2b; --surface-2: #1c2637; --ink: #e8edf6;
      --ink-soft: #97a3b8; --ink-faint: #8b93a4; --line: #263248; --line-strong: #33415b;
      --accent: #d62027; --accent-tint: #2a1517; --accent-ink: #d62027;
      --ok: #06a6c4; --ok-ink: #06a6c4; --ok-tint: #0f2a30; --pending: #dda344; --pending-fill: #efa215; --pending-tint: #2a2113; --cov-on-ink: #0c1622; --cov-review-ink: #1a1206;
      --shadow-rest: 0 1px 1px rgba(0,0,0,.25);
      --shadow-hover: 0 2px 6px rgba(0,0,0,.4), 0 18px 46px rgba(0,0,0,.5);
    }
  }

  * { box-sizing: border-box; }
  body { margin: 0; background: var(--bg); color: var(--ink); font-family: var(--font-ui); line-height: 1.5; -webkit-font-smoothing: antialiased; }

  /* Header */
  .topbar { position: sticky; top: 0; z-index: 20; background: color-mix(in srgb, var(--surface) 88%, transparent); -webkit-backdrop-filter: saturate(1.4) blur(10px); backdrop-filter: saturate(1.4) blur(10px); border-bottom: 1px solid var(--line); }
  .topbar-inner { max-width: 1560px; margin: 0 auto; padding: var(--sp-14) var(--sp-28); display: flex; align-items: center; gap: var(--sp-20); flex-wrap: wrap; }
  .brand { display: flex; align-items: center; gap: var(--sp-11); cursor: pointer; user-select: none; background: none; border: 0; padding: 0; font: inherit; color: inherit; text-align: left; border-radius: var(--r-chip); }
  .brand:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
  .brand-mark { width: 38px; height: 38px; flex: none; display: grid; place-items: center; }
  .brand-mark svg { width: 38px; height: 38px; }
  .brand-mark path { fill: var(--ink); }
  .brand-mark path:last-of-type { fill: var(--accent); }
  .brand-lock { display: flex; flex-direction: column; line-height: 1.12; }
  .brand-name { font-weight: 700; font-size: var(--fs-15); letter-spacing: .01em; }
  .brand-sub { font-family: var(--font-label); font-size: var(--fs-11); font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-soft); }
  .search { margin-left: auto; position: relative; flex: 1 1 300px; max-width: 420px; min-width: 200px; }
  .search svg { position: absolute; left: 12px; top: 50%; transform: translateY(-50%); width: 16px; height: 16px; color: var(--ink-faint); pointer-events: none; }
  .search input { width: 100%; padding: var(--sp-10) var(--sp-36) var(--sp-10) var(--sp-36); border: 1px solid var(--line-strong); border-radius: var(--r-ctl); background: var(--bg); color: var(--ink); font-family: var(--font-ui); font-size: var(--fs-14); outline: none; transition: border-color .15s, box-shadow .15s; }
  .search input:focus { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-tint); }
  /* Discoverability hint for the "/" focus-search shortcut. Hidden while typing (focus), and on touch/narrow. */
  .search-kbd { position: absolute; right: 10px; top: 50%; transform: translateY(-50%); font-family: var(--font-mono); font-size: var(--fs-11); font-weight: 600; line-height: 1; color: var(--ink-faint); background: var(--surface-2); border: 1px solid var(--line); border-radius: var(--r-chip); padding: 2px 6px; pointer-events: none; }
  .search:focus-within .search-kbd { display: none; }
  @media (hover: none), (max-width: 620px) { .search-kbd { display: none; } }
  .theme-toggle { flex: none; width: 38px; height: 38px; border-radius: var(--r-ctl); border: 1px solid var(--line-strong); background: var(--surface); color: var(--ink-soft); cursor: pointer; display: grid; place-items: center; transition: color .15s, border-color .15s; }
  .theme-toggle:hover { color: var(--accent); border-color: var(--accent); }
  .theme-toggle:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
  .theme-toggle svg { width: 17px; height: 17px; transition: transform .2s ease; }
  .theme-toggle:active svg { transform: rotate(40deg); }

  /* Layout */
  main { max-width: 1560px; margin: 0 auto; padding: var(--sp-26) var(--sp-28) var(--sp-90); }
  .level-head { margin-bottom: var(--sp-22); }
  .eyebrow { font-family: var(--font-label); font-size: var(--fs-11); letter-spacing: .16em; text-transform: uppercase; color: var(--accent-ink); font-weight: 600; }
  h1 { font-size: clamp(var(--fs-22), 3vw, var(--fs-30)); letter-spacing: -.02em; margin: var(--sp-6) 0 var(--sp-4); text-wrap: balance; font-weight: 700; }
  .lead { color: var(--ink-soft); font-size: var(--fs-15); max-width: 1000px; margin: 0; }

  /* Roadmap hero */

  /* Available now */
  .now { margin: 0 0 var(--sp-26); }
  .now-head { font-family: var(--font-label); font-size: var(--fs-11); letter-spacing: .16em; text-transform: uppercase; color: var(--ok-ink); font-weight: 600; display: flex; align-items: center; gap: var(--sp-8); margin-bottom: var(--sp-12); }
  .now-head::before { content: ""; width: 18px; height: 2px; background: var(--ok); border-radius: 2px; }
  .now-grid { display: flex; flex-wrap: wrap; gap: var(--sp-8); }
  .now-card { display: flex; align-items: center; gap: var(--sp-12); text-decoration: none; color: inherit; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-card); padding: var(--sp-12) var(--sp-14); box-shadow: var(--shadow-rest); transition: transform .15s, box-shadow .15s, border-color .15s; flex: 1 1 236px; min-width: 236px; max-width: 460px; }
  .now-card:hover { transform: translateY(-1px); box-shadow: var(--shadow-hover); border-color: color-mix(in srgb, var(--ok) 45%, var(--line)); }
  .now-card:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
  .now-ic { width: 34px; height: 34px; flex: none; border-radius: var(--r-ctl); display: grid; place-items: center; background: var(--ok-tint); color: var(--ok-ink); transition: transform .15s ease; }
  .now-ic svg { width: 18px; height: 18px; }
  .now-card:hover .now-ic { transform: scale(1.06); }
  .now-body { display: flex; flex-direction: column; gap: var(--sp-1); min-width: 0; }
  .now-model { font-family: var(--font-mono); font-size: var(--fs-13); font-weight: 600; }
  /* "New" = added since the viewer's last visit. A small inline label on the What's New card — never its
     own row, so a first/rare visitor can't get a wall of items (a brand-new visitor sees none at all). */
  .now-new { display: inline-block; margin-left: var(--sp-6); font-family: var(--font-label); font-size: var(--fs-9-5); letter-spacing: .08em; text-transform: uppercase; font-weight: 700; color: var(--ok-ink); background: var(--ok-tint); border-radius: var(--r-chip); padding: 1px var(--sp-6); vertical-align: middle; }
  .favs-head svg { width: 15px; height: 15px; vertical-align: -3.5px; margin-right: var(--sp-5); }
  .favs-head .fav-star { font-size: 16px; line-height: 1; vertical-align: -1px; margin-right: var(--sp-5); }
  /* Metrics view */
  .met-section { margin-top: var(--sp-16); }
  .met-h { font-family: var(--font-ui); font-size: var(--fs-14); font-weight: 700; color: var(--ink); margin-bottom: var(--sp-6); }
  .met-h small { font-weight: 400; font-size: var(--fs-12); color: var(--ink-faint); margin-left: var(--sp-6); }
  .met-lead { font-size: var(--fs-13); color: var(--ink-soft); margin: 0 0 var(--sp-12); max-width: 640px; }
  .met-tiles { display: flex; flex-wrap: wrap; gap: var(--sp-12); }
  .met-tile { flex: 1 1 150px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-card); padding: var(--sp-16); }
  .met-num { font-family: var(--font-mono); font-size: var(--fs-34); font-weight: 700; line-height: 1; color: var(--ok-ink); } /* matches the app's hero-number convention (.cov-big) */
  .met-tlabel { font-size: var(--fs-13); font-weight: 600; color: var(--ink); margin-top: var(--sp-6); }
  .met-tsub { font-size: var(--fs-11); color: var(--ink-faint); margin-top: var(--sp-1); }
  .met-list { list-style: none; padding: 0; margin: 0; }
  .met-miss-row { display: flex; justify-content: flex-start; align-items: center; gap: var(--sp-8); padding: var(--sp-9) var(--sp-12); border: 1px solid var(--line); border-radius: var(--r-ctl); margin-bottom: var(--sp-6); background: var(--surface); }
  /* Name + type cluster on the left; the count (or the misses actions) is pushed to the right edge.
     Direct-child selector so the count INSIDE .met-miss-actions isn't also shoved. */
  .met-miss-row > .met-count, .met-miss-row > .met-miss-actions { margin-left: auto; }
  .met-q { font-size: var(--fs-13); font-weight: 600; color: var(--ink); }
  .met-q.mono { font-family: var(--font-mono); }
  /* Miss counts are a DEMAND/gap signal, not a success — neutral, not the teal "good" pill. */
  .met-count { flex: none; font-family: var(--font-mono); font-size: var(--fs-12); font-weight: 700; color: var(--ink-soft); background: var(--line); border-radius: var(--r-pill); padding: var(--sp-2) var(--sp-9); }
  /* Inline "turn this miss into a search alias" affordance on the miss list. */
  .met-miss-actions { display: inline-flex; align-items: center; gap: var(--sp-8); flex: none; }
  .met-alias-btn { font-size: var(--fs-11); font-weight: 600; color: var(--ok-ink); background: var(--ok-tint); border: 1px solid color-mix(in srgb, var(--ok) 30%, transparent); border-radius: var(--r-pill); padding: var(--sp-2) var(--sp-9); cursor: pointer; }
  .met-alias-btn:hover { border-color: var(--ok); }
  .met-alias-form { display: inline-flex; align-items: center; gap: var(--sp-6); flex: 1 1 auto; min-width: 0; margin-left: var(--sp-10); }
  .met-arrow { color: var(--ink-faint); flex: none; }
  .met-alias-in { flex: 1 1 auto; min-width: 0; font-size: var(--fs-13); padding: var(--sp-4) var(--sp-8); border: 1px solid var(--line-strong); border-radius: var(--r-ctl); background: var(--surface); color: var(--ink); }
  .met-alias-in.met-alias-bad { border-color: var(--accent); }
  .met-alias-save, .met-alias-cancel { flex: none; font-size: var(--fs-12); padding: var(--sp-4) var(--sp-10); border-radius: var(--r-ctl); cursor: pointer; border: 1px solid var(--line-strong); background: var(--surface); color: var(--ink); }
  .met-alias-save { background: var(--ok); color: #0c1622; border-color: var(--ok); font-weight: 600; } /* dark ink on teal (6.29:1) — the brand-safe save style */
  .met-alias-save:disabled { opacity: .6; cursor: default; }
  .met-alias-done { color: var(--ok-ink); font-weight: 600; }
  .met-jump { display: block; width: 100%; text-align: left; padding: var(--sp-8) var(--sp-12); border: 1px solid var(--line); border-radius: var(--r-ctl); margin-bottom: var(--sp-6); background: var(--surface); cursor: pointer; color: inherit; }
  /* Weekly adoption trend: two bars per week (opens = neutral volume, people = teal adoption). Bar heights
     are set in PX inline (against a fixed 110px track) — a % height wouldn't resolve inside the flex track. */
  .met-trend { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-card); padding: var(--sp-16); }
  .met-bars { display: flex; align-items: flex-end; gap: var(--sp-8); }
  .met-bcol { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; align-items: center; gap: var(--sp-6); }
  .met-bwrap { height: 110px; width: 100%; display: flex; align-items: flex-end; justify-content: center; gap: 3px; }
  .met-bar { width: 14px; max-width: 40%; min-height: 2px; border-radius: 3px 3px 0 0; }
  .met-bar.opens { background: color-mix(in srgb, var(--ink-soft) 45%, transparent); }
  .met-bar.people { background: var(--ok); }
  .met-blabel { font-size: var(--fs-11); color: var(--ink-faint); white-space: nowrap; }
  .met-legend2 { display: flex; gap: var(--sp-16); margin-top: var(--sp-10); }
  .met-lk { display: inline-flex; align-items: center; gap: var(--sp-6); font-size: var(--fs-12); color: var(--ink-soft); }
  .met-sw { width: 10px; height: 10px; border-radius: 2px; }
  .met-sw.opens { background: color-mix(in srgb, var(--ink-soft) 45%, transparent); }
  .met-sw.people { background: var(--ok); }
  /* Resource Impact (top of Metrics) — coverage × adoption */
  .impact-overtime { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-card); padding: var(--sp-14); margin-bottom: var(--sp-14); }
  .impact-building { font-size: var(--fs-13); color: var(--ink-soft); line-height: 1.6; }
  .impact-chart { width: 100%; height: auto; display: block; overflow: visible; }
  .impact-chart .ic-axis { stroke: var(--line-strong); stroke-width: 1; }
  .impact-chart .ic-cov { fill: none; stroke: var(--ok); stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; }
  .impact-chart .ic-cov-dot { fill: var(--ok); }
  .impact-chart .ic-use { fill: none; stroke: var(--accent); stroke-width: 2; stroke-dasharray: 4 3; stroke-linejoin: round; stroke-linecap: round; }
  .impact-chart .ic-use-dot { fill: var(--accent); }
  .impact-chart .ic-xl, .impact-chart .ic-yl { fill: var(--ink-faint); font-size: 10px; font-family: var(--font-ui); }
  .impact-chart .ic-yl { text-anchor: start; }
  .impact-chart .ic-yl-r { fill: var(--accent); } /* right axis = the opens scale, tinted to match the opens line */
  .impact-legend { display: flex; gap: var(--sp-16); margin-top: var(--sp-8); }
  .impact-legend .il { display: inline-flex; align-items: center; gap: var(--sp-6); font-size: var(--fs-12); color: var(--ink-soft); }
  .impact-legend .il-sw { width: 14px; height: 3px; border-radius: 2px; }
  .impact-legend .il-sw.cov { background: var(--ok); }
  .impact-legend .il-sw.use { background: var(--accent); }
  .impact-snapcount { margin-top: var(--sp-6); font-size: var(--fs-11-5); color: var(--ink-faint); }
  .impact-cols { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)); gap: var(--sp-14); } /* min(100%,…) so a <300px phone doesn't force a horizontal page scroll */
  .impact-col { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-card); padding: var(--sp-14); }
  .impact-h { font-family: var(--font-ui); font-size: var(--fs-14); font-weight: 700; color: var(--ink); margin-bottom: var(--sp-10); }
  .impact-h small { font-weight: 400; font-size: var(--fs-12); color: var(--ink-faint); margin-left: var(--sp-6); }
  .impact-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--sp-4); }
  .impact-jump { display: flex; align-items: center; gap: var(--sp-10); width: 100%; text-align: left; font: inherit; color: inherit; background: none; border: 1px solid transparent; border-radius: var(--r-ctl); padding: var(--sp-8) var(--sp-9); cursor: pointer; transition: background .12s, border-color .12s; }
  .impact-jump:hover { background: var(--surface-2); border-color: var(--line); }
  .impact-jump:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
  .impact-nm { flex: 1; min-width: 0; }
  .impact-name { font-family: var(--font-mono); font-size: var(--fs-13); font-weight: 600; }
  .impact-sub { color: var(--ink-faint); font-size: var(--fs-12); }
  .impact-metric { flex: none; font-size: var(--fs-12); color: var(--ink-soft); white-space: nowrap; }
  .impact-metric b { color: var(--ink); }
  .impact-gap { font-family: var(--font-mono); color: var(--ink-soft); }
  .impact-quiet-tag { color: var(--ink-faint); }
  .impact-types { margin-top: var(--sp-14); background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-card); padding: var(--sp-14); }
  .impact-tgrid { display: flex; flex-direction: column; gap: var(--sp-10); }
  .impact-trow { display: grid; grid-template-columns: 150px 1fr; align-items: center; gap: var(--sp-10); }
  .impact-tname { font-size: var(--fs-13); color: var(--ink); font-weight: 600; }
  .impact-tbars { display: flex; flex-direction: column; gap: var(--sp-4); }
  .impact-tline { display: flex; align-items: center; gap: var(--sp-8); }
  .impact-tbar { flex: 1; height: 8px; background: var(--surface-2); border-radius: var(--r-pill); overflow: hidden; }
  .impact-tbar-fill { height: 100%; border-radius: var(--r-pill); }
  .impact-tbar-fill.cov { background: var(--ok); }
  .impact-tbar-fill.use { background: var(--accent); }
  .impact-tval { flex: none; width: 96px; font-size: var(--fs-11); color: var(--ink-faint); white-space: nowrap; }
  @media (max-width: 620px) { .impact-trow { grid-template-columns: 1fr; gap: var(--sp-4); } }
  .met-jump:hover { border-color: var(--ok); }
  .met-sub { color: var(--ink-faint); font-size: var(--fs-12); }
  /* "last seen …" date on a preview-problem row — muted, pushed to the right just before the count. */
  .met-when { flex: none; font-size: var(--fs-11-5); color: var(--ink-faint); }
  .met-miss-row > .met-when { margin-left: auto; }
  .now-res { font-size: var(--fs-12); color: var(--ink-soft); }
  .now-open { margin-left: auto; color: var(--ok-ink); display: inline-flex; transition: transform .15s ease; }
  .now-open svg { width: 15px; height: 15px; }
  .now-card:hover .now-open { transform: translate(1.5px, -1.5px); }

  /* Column navigation */
  .cols-hint { font-size: var(--fs-12-5); color: var(--ink-faint); margin: 0 0 var(--sp-10); }
  .breadcrumb { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-4); margin: 0 0 var(--sp-10); font-size: var(--fs-12-5); }
  .bc-link { font: inherit; color: var(--ink-soft); background: none; border: 0; padding: var(--sp-2) var(--sp-4); border-radius: var(--r-chip); cursor: pointer; transition: color .15s; }
  .bc-link:hover { color: var(--accent); }
  .bc-link:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
  .bc-cur { color: var(--ink); font-weight: 600; padding: var(--sp-2) var(--sp-4); }
  .bc-cat { color: var(--ink-faint); font-weight: 500; }
  .bc-sep { color: var(--ink-faint); }
  .cols { display: flex; gap: var(--sp-14); align-items: flex-start; overflow-x: auto; padding: var(--sp-2) var(--sp-2) var(--sp-12); scroll-behavior: smooth; }
  .col { flex: 1 1 280px; min-width: 0; max-width: 480px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-card); box-shadow: var(--shadow-rest); display: flex; flex-direction: column; animation: colIn .22s cubic-bezier(.2,.7,.3,1); }
  .col-res { flex: 1 1 400px; max-width: 800px; }
  @keyframes colIn { from { opacity: 0; transform: translateX(-8px); } to { opacity: 1; transform: none; } }
  .col-head { font-family: var(--font-label); font-size: var(--fs-10); letter-spacing: .14em; text-transform: uppercase; color: var(--ink-faint); padding: var(--sp-13) var(--sp-14) var(--sp-9); border-bottom: 1px solid var(--line); flex: none; overflow-wrap: anywhere; }
  .col-head b { color: var(--ink-soft); font-family: var(--font-mono); font-weight: 600; letter-spacing: 0; text-transform: none; font-size: var(--fs-12); }
  .col-head.col-lead { font-family: var(--font-ui); font-size: var(--fs-17); font-weight: 700; letter-spacing: -.01em; text-transform: none; color: var(--ok-ink); padding: var(--sp-13) var(--sp-16) var(--sp-12); }
  .col-head.col-lead.mono { font-family: var(--font-mono); letter-spacing: 0; }
  .col-head.col-head-res { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-10); }
  .col-head.col-head-res .res-pin { flex: none; }
  .col-head.has-actions { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-10); }
  .col-head-actions { display: inline-flex; align-items: center; gap: var(--sp-8); flex: none; }
  /* "Copy links" share-pack pill — matches the favorites pin, teal on hover/after-copy. */
  .share-pack { display: inline-flex; align-items: center; gap: var(--sp-6); flex: none; font-family: var(--font-label); font-size: var(--fs-10-5); letter-spacing: .04em; text-transform: uppercase; font-weight: 700; color: var(--ink-soft); background: none; border: 1px solid var(--line-strong); border-radius: var(--r-pill); padding: var(--sp-4) var(--sp-10); cursor: pointer; transition: color .15s, border-color .15s; }
  .share-pack svg { width: 14px; height: 14px; flex: none; }
  .share-pack:hover, .share-pack.copied { color: var(--ok-ink); border-color: var(--ok-ink); }
  /* Collapsible "what the model-name letters mean" key at the top of the model column. */
  .model-key { margin: var(--sp-9) var(--sp-13) var(--sp-8); border: 1px solid var(--line); border-radius: var(--r-sm); }
  .model-key > summary { list-style: none; cursor: pointer; font-family: var(--font-label); font-size: var(--fs-10); letter-spacing: .1em; text-transform: uppercase; color: var(--ink-faint); padding: var(--sp-8) var(--sp-9); display: flex; align-items: center; gap: 6px; }
  .model-key > summary:hover { color: var(--ink-soft); }
  .model-key > summary::-webkit-details-marker { display: none; }
  .model-key > summary::before { content: "+"; font-family: var(--font-mono); width: 9px; display: inline-block; }
  .model-key[open] > summary::before { content: "\2013"; }
  .model-key dl { margin: 0; padding: 0 var(--sp-9) var(--sp-8); display: grid; grid-template-columns: auto 1fr; column-gap: var(--sp-8); row-gap: 3px; }
  .model-key dl > div { display: contents; }
  .model-key dt { font-family: var(--font-mono); font-weight: 600; color: var(--ok-ink); font-size: var(--fs-12); }
  .model-key dd { margin: 0; color: var(--ink-soft); font-size: var(--fs-12); }
  /* Find filter/sort toolbar — shared by the model column and search results */
  .ftbar { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-6) var(--sp-8); padding: var(--sp-7) var(--sp-9); margin: 0 0 var(--sp-14); border: 1px solid var(--line); border-radius: var(--r-ctl); background: var(--surface-2); }
  .ft-seg { display: inline-flex; border: 1px solid var(--line-strong); border-radius: var(--r-chip); overflow: hidden; }
  .ft-seg-btn { font: inherit; font-size: var(--fs-12); color: var(--ink-soft); background: var(--surface); border: 0; border-right: 1px solid var(--line); padding: var(--sp-4) var(--sp-9); cursor: pointer; transition: background .14s, color .14s; }
  .ft-seg-btn:last-child { border-right: 0; }
  .ft-seg-btn:hover { color: var(--ink); }
  .ft-seg-btn.on { background: var(--accent); color: #fff; font-weight: 600; }
  .ft-chips { display: inline-flex; flex-wrap: wrap; gap: var(--sp-4); }
  .ft-chip { font: inherit; font-size: var(--fs-12); color: var(--ink-soft); background: var(--surface); border: 1px solid var(--line-strong); border-radius: var(--r-pill); padding: var(--sp-3) var(--sp-9); cursor: pointer; transition: background .14s, color .14s, border-color .14s; }
  .ft-chip:hover { color: var(--ink); border-color: var(--ink-faint); }
  .ft-chip.on { background: var(--accent-tint); color: var(--accent-ink); border-color: color-mix(in srgb, var(--accent) 40%, transparent); font-weight: 600; }
  .ft-sort { display: inline-flex; align-items: center; gap: var(--sp-6); }
  .ft-sort-lbl { font-family: var(--font-label); font-size: var(--fs-10); letter-spacing: .1em; text-transform: uppercase; color: var(--ink-faint); }
  .ft-sort-sel { font: inherit; font-size: var(--fs-12); color: var(--ink); background: var(--surface); border: 1px solid var(--line-strong); border-radius: var(--r-chip); padding: var(--sp-3) var(--sp-8); cursor: pointer; }
  .ft-right { display: inline-flex; align-items: center; gap: var(--sp-8); margin-left: auto; }
  .ft-count { font-size: var(--fs-12); color: var(--ink-faint); white-space: nowrap; }
  .ft-clear { font: inherit; font-size: var(--fs-12); font-weight: 600; color: var(--accent-ink); background: none; border: 0; padding: var(--sp-3) var(--sp-4); cursor: pointer; }
  .ft-clear:hover { text-decoration: underline; }
  .ftbar button:focus-visible, .ft-sort-sel:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
  .ft-empty { padding: var(--sp-12) var(--sp-14); }
  .sr-empty-filter { font-size: var(--fs-13); color: var(--ink-faint); padding: var(--sp-8) 0; }
  .col-body { padding: var(--sp-6); display: flex; flex-direction: column; gap: var(--sp-2); }
  .cat-box-head { font-family: var(--font-label); font-size: var(--fs-17); font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--accent-ink); padding: var(--sp-13) var(--sp-16) var(--sp-12); border-bottom: 1px solid var(--line); }
  .col-item { display: flex; align-items: center; gap: var(--sp-10); width: 100%; text-align: left; font: inherit; color: inherit; background: none; border: 0; border-radius: var(--r-ctl); padding: var(--sp-10); cursor: pointer; transition: background .12s; }
  button.col-item:hover { background: var(--surface-2); }
  button.col-item:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
  .col-item.sel { background: var(--accent-tint); }
  .col-item.static { cursor: default; }
  .ci-name { flex: 1; min-width: 0; font-size: var(--fs-14); font-weight: 600; overflow-wrap: anywhere; }
  .ci-name.mono { font-family: var(--font-mono); font-size: var(--fs-13); letter-spacing: 0; }
  .col-item.soon .ci-name { color: var(--ink-faint); font-weight: 500; }
  /* Inline model-name suffix decode (e.g. "HPP 400 IR (Integrated · Reduced-height housing paddle)").
     Non-mono, faint, sized in em so it scales with both the models-list item and the larger panel header. */
  .ci-decode { font-family: var(--font-ui); font-weight: 400; font-size: .82em; letter-spacing: 0; text-transform: none; color: var(--ink-faint); }
  .col-head-res .lead-name { min-width: 0; overflow-wrap: anywhere; }
  .ci-meta { flex: none; font-size: var(--fs-11); color: var(--ink-soft); display: flex; align-items: center; gap: var(--sp-6); font-family: var(--font-mono); }
  .ci-chev { flex: none; display: inline-flex; color: var(--ink-faint); }
  .ci-chev svg { width: 16px; height: 16px; }
  .col-item.sel .ci-chev { color: var(--accent); }
  .col-empty { padding: var(--sp-20) var(--sp-16); font-size: var(--fs-13); color: var(--ink-faint); line-height: 1.6; }
  .col-item.flash { animation: itemFlash 1s ease; }
  @keyframes itemFlash { 0%,100% { background: transparent; } 30% { background: var(--accent-tint); } }
  .mdot { width: 5px; height: 5px; border-radius: 50%; background: var(--line-strong); }
  .okdot { width: 7px; height: 7px; border-radius: 50%; background: var(--ok); }
  .soon-tag { font-family: var(--font-label); font-size: var(--fs-9-5); letter-spacing: .08em; text-transform: uppercase; font-weight: 600; color: var(--pending); }

  /* View tabs (Find / Coverage) */
  .viewtabs { display: inline-flex; background: var(--surface-2); border: 1px solid var(--line); border-radius: var(--r-ctl); padding: var(--sp-3); gap: var(--sp-2); }
  .skip-link { position: absolute; left: var(--sp-8); top: -48px; z-index: 100; background: var(--surface); color: var(--ink); border: 1px solid var(--line-strong); border-radius: var(--r-sm); padding: var(--sp-8) var(--sp-14); font-size: var(--fs-13); font-weight: 600; box-shadow: var(--shadow-rest); transition: top .15s; }
  .skip-link:focus { top: var(--sp-8); }
  .vtab { font-family: var(--font-label); font-size: var(--fs-11); letter-spacing: .06em; text-transform: uppercase; font-weight: 700; color: var(--ink-faint); background: none; border: 0; border-radius: var(--r-chip); padding: var(--sp-7) var(--sp-13); cursor: pointer; transition: background .15s, color .15s; }
  .vtab.on { background: var(--surface); color: var(--ink); box-shadow: var(--shadow-rest); }
  .vtab:hover:not(.on) { color: var(--ink-soft); }

  /* Coverage tracker (product-team view) */
  .cov-view { display: flex; flex-direction: column; gap: var(--sp-16); max-width: 1000px; }
  .cov-summary { display: flex; align-items: center; gap: var(--sp-24); flex-wrap: wrap; padding: var(--sp-18) var(--sp-20); background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-card); box-shadow: var(--shadow-rest); }
  .cov-big { font-family: var(--font-mono); font-size: var(--fs-34); font-weight: 700; line-height: 1; color: var(--ok-ink); }
  .cov-big small { font-size: var(--fs-15); color: var(--ink-soft); font-weight: 600; margin-left: var(--sp-8); }
  .cov-sub { font-size: var(--fs-13); color: var(--ink-soft); margin-top: var(--sp-5); }
  .cov-barwrap { flex: 1 1 220px; min-width: 160px; }
  .cov-bar { height: 10px; border-radius: var(--r-pill); background: var(--surface-2); box-shadow: inset 0 0 0 1px var(--line); overflow: hidden; }
  .cov-bar-fill { height: 100%; background: var(--ok); border-radius: var(--r-pill); transition: width .5s cubic-bezier(.2,.7,.3,1); }
  .cov-types { display: flex; flex-wrap: wrap; gap: var(--sp-8); }
  .cov-type { flex: 1 1 150px; min-width: 130px; padding: var(--sp-10) var(--sp-12); background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-ctl); box-shadow: var(--shadow-rest); }
  .cov-type-name { font-size: var(--fs-12); font-weight: 600; color: var(--ink-soft); display: flex; justify-content: space-between; gap: var(--sp-8); }
  .cov-type-name b { font-family: var(--font-mono); color: var(--ink); font-weight: 700; }
  .cov-type .cov-bar { margin-top: var(--sp-7); }
  .cov-toolbar { display: flex; align-items: center; gap: var(--sp-16); flex-wrap: wrap; font-size: var(--fs-12-5); color: var(--ink-soft); }
  .cov-check { display: inline-flex; align-items: center; gap: var(--sp-8); cursor: pointer; user-select: none; }
  /* Themed checkbox (native box hidden, custom square that fills brand-red when checked) */
  .cov-check input { position: absolute; width: 1px; height: 1px; opacity: 0; }
  .cov-check-box { flex: none; display: inline-grid; place-items: center; width: 16px; height: 16px; border: 1px solid var(--line-strong); border-radius: var(--r-xs); background: var(--surface); transition: background .14s, border-color .14s; }
  .cov-check-box svg { width: 12px; height: 12px; color: #fff; opacity: 0; stroke-width: 3; transition: opacity .1s; }
  .cov-check:hover .cov-check-box { border-color: var(--ink-faint); }
  .cov-check input:checked + .cov-check-box { background: var(--accent); border-color: var(--accent); }
  .cov-check input:checked + .cov-check-box svg { opacity: 1; }
  .cov-check input:focus-visible + .cov-check-box { outline: 2px solid var(--accent); outline-offset: 2px; }
  .cov-legend { display: inline-flex; flex-wrap: wrap; align-items: center; gap: var(--sp-7) var(--sp-16); color: var(--ink-faint); }
  .cov-legend-item { display: inline-flex; align-items: center; gap: var(--sp-6); white-space: nowrap; }
  .cov-legend .cov-cell { margin: 0; }
  /* Visually-hidden text exposed only to screen readers (status dots, etc.). */
  .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
  .cov-matrix { display: flex; flex-direction: column; gap: var(--sp-14); overflow-x: auto; }
  /* Scroll the wide matrix rows (min-width 700px) horizontally on a narrow screen. overflow:hidden here
     clipped the rightmost resource columns unreachably (the outer .cov-matrix scroll never engaged because
     each card hid its own overflow first); overflow-x:auto makes each card scroll instead. y stays hidden so
     the rounded card corners still clip and no stray vertical scrollbar appears. */
  .cov-group { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-card); box-shadow: var(--shadow-rest); overflow-x: auto; overflow-y: hidden; }
  .cov-grp-head { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-10); padding: var(--sp-11) var(--sp-14); border-bottom: 1px solid var(--line); font-size: var(--fs-13); font-weight: 700; }
  /* Bigger product-group title so families/products are easy to scan-find down the matrix. */
  .cov-grp-title { font-size: var(--fs-17); }
  .cov-grp-head small { color: var(--ink-faint); font-weight: 600; font-family: var(--font-label); text-transform: uppercase; letter-spacing: .06em; font-size: var(--fs-10); margin-left: var(--sp-8); }
  .cov-grp-edit { flex: none; display: inline-flex; align-items: center; gap: var(--sp-6); font-family: var(--font-ui); font-size: var(--fs-12); font-weight: 600; color: var(--ink-soft); background: var(--surface); border: 1px solid var(--line-strong); border-radius: var(--r-ctl); padding: var(--sp-5) var(--sp-11); cursor: pointer; }
  .cov-grp-edit:hover { color: var(--accent); border-color: var(--accent); }
  .cov-grp-edit svg { width: 13px; height: 13px; }
  .cov-ed-actions { flex: none; display: flex; gap: var(--sp-8); }
  .cov-ed-actions .wire-btn { font-size: var(--fs-12); padding: var(--sp-6) var(--sp-14); }
  .cov-colhead, .cov-row { display: grid; grid-template-columns: minmax(150px, 1fr) repeat(9, 40px) 46px; align-items: center; gap: var(--sp-4); padding: var(--sp-7) var(--sp-14); min-width: 700px; }
  .cov-colhead { font-family: var(--font-label); font-size: var(--fs-9-5); letter-spacing: .05em; text-transform: uppercase; color: var(--ink-faint); padding-bottom: var(--sp-2); }
  .cov-colhead span { text-align: center; }
  .cov-colhead span:first-child { text-align: left; }
  .cov-row { border-top: 1px solid var(--line); font: inherit; background: none; text-align: left; cursor: pointer; width: 100%; color: inherit; }
  .cov-row:hover { background: var(--surface-2); }
  .cov-row:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
  .cov-mname { font-family: var(--font-mono); font-size: var(--fs-12-5); font-weight: 600; overflow-wrap: anywhere; }
  /* The model name is a real button (opens the model) but must read as the plain mono text it replaced. */
  .cov-mopen { all: unset; display: block; width: 100%; box-sizing: border-box; cursor: pointer; text-align: left; white-space: normal; overflow-wrap: anywhere; }
  .cov-mopen:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: var(--r-xs); }
  .cov-cell { width: 20px; height: 20px; border-radius: var(--r-chip); margin: 0 auto; box-shadow: inset 0 0 0 1.5px var(--line-strong); display: grid; place-items: center; font-family: var(--font-label); font-size: var(--fs-10); font-weight: 700; line-height: 1; color: var(--ink-faint); }
  .cov-cell.on { background: var(--ok); box-shadow: none; color: var(--cov-on-ink); }
  .cov-cell.on.review { background: var(--pending-fill); color: var(--cov-review-ink); } /* linked but older than the staleness window */
  .cov-cell.broken { background: var(--accent-tint); box-shadow: inset 0 0 0 1.5px color-mix(in srgb, var(--accent) 45%, transparent); color: var(--accent-ink); }
  /* not applicable — excluded from the count. Shown as a faint box with a diagonal line corner-to-corner
     (a "does not apply" slash), which reads more clearly than the old faded dot. The line is a thin band
     from a 45° gradient; on a square cell it spans the top-left↔bottom-right diagonal. */
  .cov-cell.na { box-shadow: inset 0 0 0 1.5px var(--line); color: transparent; background-image: linear-gradient(to top right, transparent calc(50% - 1px), var(--ink-faint) calc(50% - 1px), var(--ink-faint) calc(50% + 1px), transparent calc(50% + 1px)); }
  .cov-cnt { font-family: var(--font-mono); font-size: var(--fs-12); text-align: center; color: var(--ink-soft); }
  .cov-cnt.full { color: var(--ok-ink); font-weight: 700; }
  .cov-empty { padding: var(--sp-26); text-align: center; color: var(--ink-faint); font-size: var(--fs-13); }
  /* Progress tool: wire a folder to a product's resource */
  .wire { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-card); box-shadow: var(--shadow-rest); padding: var(--sp-16) var(--sp-18); margin-bottom: var(--sp-20); }
  .wire-head { display: flex; align-items: center; gap: var(--sp-8); font-weight: 700; font-size: var(--fs-15); }
  .wire-head svg { width: 18px; height: 18px; color: var(--ok-ink); }
  /* Red count badge to the right of "Files to place" — how many suggestions await review. Hidden at 0. */
  .ftp-badge { display: inline-flex; align-items: center; justify-content: center; box-sizing: border-box; min-width: 20px; height: 20px; padding: 0 6px 2px; margin-left: var(--sp-6); border-radius: 999px; background: var(--accent); color: #fff; font-size: var(--fs-12); font-weight: 700; line-height: 1; font-variant-numeric: tabular-nums; }
  /* Badge sits at the flex-centered position (pixel-measured within ~0.5px of the title's letter middle). */
  .ftp-badge[hidden] { display: none; }
  .ftp-showall { margin-top: var(--sp-4); }
  /* "Add files" mode toggle — one segmented control swapping the three upload flows */
  .af-seg { display: inline-flex; flex-wrap: wrap; margin: var(--sp-12) 0 var(--sp-4); border: 1px solid var(--line-strong); border-radius: var(--r-chip); overflow: hidden; }
  .af-seg-btn { font: inherit; font-size: var(--fs-13); font-weight: 600; color: var(--ink-soft); background: var(--surface); border: 0; border-right: 1px solid var(--line); padding: var(--sp-7) var(--sp-14); cursor: pointer; transition: background .14s, color .14s; }
  .af-seg-btn:last-child { border-right: 0; }
  .af-seg-btn:hover { color: var(--ink); }
  .af-seg-btn.on { background: var(--accent); color: #fff; }
  .af-seg-btn:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
  .af-body > [data-mode] .wire-lead { margin-top: var(--sp-10); }
  .wire-lead { margin: var(--sp-6) 0 var(--sp-12); font-size: var(--fs-13); color: var(--ink-soft); }
  .wire-steps { margin: 0 0 var(--sp-12); font-size: var(--fs-13); color: var(--ink); font-weight: 600; }
  /* Theme every native <select> dropdown popup to match the app (dark/light) instead of OS white. */
  select option { background-color: var(--surface); color: var(--ink); }
  .wire-help { margin: var(--sp-8) 0 0; }
  .wire-help summary { display: inline-flex; align-items: center; gap: var(--sp-7); cursor: pointer; font-size: var(--fs-12-5); font-weight: 600; color: var(--ok-ink); list-style: none; width: fit-content; user-select: none; }
  .wire-help summary::-webkit-details-marker { display: none; }
  .wire-help summary::before { content: "▸"; font-size: var(--fs-10); color: var(--ink-faint); transition: transform .15s; }
  .wire-help[open] summary::before { transform: rotate(90deg); }
  .wire-help summary:hover { color: var(--accent); }
  .wire-help-body { margin: var(--sp-10) 0 var(--sp-2); }
  .wire-help-steps { margin: 0 0 var(--sp-10); padding-left: var(--sp-20); font-size: var(--fs-12-5); color: var(--ink-soft); line-height: 1.75; max-width: 60ch; }
  .wire-help-steps em { color: var(--accent-ink); font-style: normal; }
  .wire-help-img { display: block; max-width: 100%; width: 720px; border: 1px solid var(--line); border-radius: var(--r-sm); box-shadow: var(--shadow-rest); }
  /* PM guide (collapsible one-pager at the top of the Admin tab) */
  .pm-guide { padding: 0; }
  .pm-guide > summary { display: flex; align-items: center; gap: var(--sp-8); cursor: pointer; list-style: none; padding: var(--sp-16) var(--sp-18); font-weight: 700; font-size: var(--fs-15); user-select: none; }
  .pm-guide > summary::-webkit-details-marker { display: none; }
  .pm-guide > summary svg { width: 18px; height: 18px; color: var(--ok-ink); }
  .pm-guide > summary::after { content: "▸"; margin-left: auto; color: var(--ink-faint); font-size: var(--fs-12); transition: transform .15s; }
  .pm-guide[open] > summary::after { transform: rotate(90deg); }
  .pmg-body { padding: 0 var(--sp-18) var(--sp-16); }
  .pmg-body > .wire-lead { margin-top: 0; }
  .pmg-h { margin: var(--sp-16) 0 var(--sp-6); font-size: var(--fs-12-5); font-weight: 700; color: var(--ink); text-transform: uppercase; letter-spacing: .04em; }
  .pmg-p { font-size: var(--fs-13); color: var(--ink-soft); margin: 0 0 var(--sp-6); line-height: 1.6; max-width: 72ch; }
  .pmg-list { margin: 0; padding-left: var(--sp-20); font-size: var(--fs-13); color: var(--ink-soft); line-height: 1.7; max-width: 72ch; }
  .pmg-list b, .pmg-steps b { color: var(--ink); }
  .pmg-steps { color: var(--ink-soft); max-width: 72ch; }
  .pmg-note { font-size: var(--fs-12-5); color: var(--ink-faint); margin: var(--sp-8) 0 0; line-height: 1.6; max-width: 72ch; }
  .wire-form { display: flex; gap: var(--sp-10); flex-wrap: wrap; align-items: center; }
  .wire-sel, .wire-input { font-family: var(--font-ui); font-size: var(--fs-13); border: 1px solid var(--line-strong); border-radius: var(--r-ctl); padding: var(--sp-9) var(--sp-11); background: var(--bg); color: var(--ink); outline: none; }
  /* Hide the native arrow and draw our own, precisely positioned with room on both sides. */
  .wire-sel { appearance: none; -webkit-appearance: none; -moz-appearance: none; padding-right: var(--sp-34);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%238b93a4' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
    background-repeat: no-repeat; background-position: right 12px center; background-size: 12px; }
  .wire-input { flex: 1 1 260px; min-width: 200px; }
  .wire-sel:focus, .wire-input:focus { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-tint); }
  .wire-btn { font-family: var(--font-ui); font-size: var(--fs-13); font-weight: 600; border-radius: var(--r-ctl); padding: var(--sp-9) var(--sp-16); cursor: pointer; border: 1px solid var(--line-strong); background: var(--surface); color: var(--ink-soft); transition: color .15s, border-color .15s; }
  .wire-btn:hover { color: var(--accent); border-color: var(--accent); }
  /* White ink on the brand teal — intentional (owner decision): the exact brand fill is kept and the
     contrast trade-off is accepted. Do NOT "reconcile" this back to dark ink. */
  .wire-btn.primary { background: var(--ok); color: #fff; border-color: var(--ok); }
  .wire-btn.danger { color: var(--accent); border-color: color-mix(in srgb, var(--accent) 45%, var(--line-strong)); }
  .wire-btn.danger:hover { background: var(--accent); color: #fff; border-color: var(--accent); }
  .wire-btn.primary:hover { background: var(--ok-ink); border-color: var(--ok-ink); color: #fff; }
  .wire-btn:disabled { opacity: .6; cursor: default; }
  /* Keyboard focus rings for the modal / gallery / tab / header controls that previously had hover-only
     states (review A4) — matches the house outline used across the browse surface. */
  .vtab:focus-visible, .wire-btn:focus-visible, .cov-grp-edit:focus-visible, .head-btn:focus-visible,
  .userchip .signout:focus-visible, .lb-close:focus-visible, .lb-open:focus-visible, .lb-openbtn:focus-visible,
  .bugm-close:focus-visible, .bugm-cancel:focus-visible, .bugm-submit:focus-visible,
  .cov-chip-act:focus-visible, .cov-ed-add:focus-visible,
  .gal-nav:focus-visible, .gal-thumb:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
  /* (.uns-file deliberately shows focus via its underline, not this ring — see .uns-file:focus-visible below.) */
  .wire-result { margin-top: var(--sp-14); }
  .wire-result:empty { margin-top: 0; }
  .wire-msg { font-size: var(--fs-13); color: var(--ink-soft); padding: var(--sp-6) 0; }
  .wire-msg.err { color: var(--accent-ink); }
  .wire-summary { font-size: var(--fs-12-5); color: var(--ink-faint); margin-bottom: var(--sp-6); }
  .wire-scope { font-size: var(--fs-13); color: var(--ink); background: var(--ok-tint); border: 1px solid var(--ok); border-radius: var(--r-chip); padding: var(--sp-6) var(--sp-10); margin-bottom: var(--sp-8); }
  .wire-scope b { color: var(--ok-ink); }
  .wire-model-name { font-family: var(--font-mono); font-size: var(--fs-13); font-weight: 600; margin-bottom: var(--sp-6); }
  .wire-model-name b { color: var(--ok-ink); }
  .wire-unmatched .wire-model-name b { color: var(--accent-ink); }
  .wire-none { font-size: var(--fs-12); color: var(--ink-faint); }
  .wire-files { display: flex; flex-wrap: wrap; gap: var(--sp-8); }
  .wire-file { display: flex; align-items: center; gap: var(--sp-6); max-width: 230px; border: 1px solid var(--line); border-radius: var(--r-sm); padding: var(--sp-4) var(--sp-9) var(--sp-4) var(--sp-4); background: var(--surface-2); font-size: var(--fs-11-5); }
  /* A child <img> is natively draggable and would HIJACK the chip's HTML5 drag (the browser drags the
     image instead of moving the chip) and swallow clicks that involve any micro-movement. Disable image
     drag + let pointer events fall through to the chip/opener so render thumbnails drag & click like icons. */
  .wire-file img { width: 34px; height: 26px; object-fit: cover; border-radius: var(--r-xs); flex: none; -webkit-user-drag: none; user-select: none; pointer-events: none; }
  .wire-ficon { width: 26px; height: 26px; display: grid; place-items: center; color: var(--ink-faint); flex: none; }
  .wire-ficon svg { width: 15px; height: 15px; }
  .wire-fname { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .wire-approve { margin-top: var(--sp-14); }
  .wire-elsewhere { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-8); margin-top: var(--sp-12); padding-top: var(--sp-10); border-top: 1px dashed var(--line); }
  .wire-elsewhere-lbl { font-size: var(--fs-12-5); font-weight: 600; color: var(--ink-soft); }
  .wire-elsewhere .wire-sel { flex: 0 1 auto; min-width: 150px; }
  .wire-elsewhere-hint { font-size: var(--fs-12); color: var(--ink-faint); margin-top: var(--sp-6); }
  /* Files-to-place / orphans / unknown-RSS list styles (shared by the PM panels). */
  .ui-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--sp-4); }
  .ui-orphan { display: flex; flex-direction: column; gap: 1px; padding: var(--sp-4) var(--sp-2); }
  .ui-orphan .ui-q { font-size: var(--fs-13); }
  .ui-orphan .ui-sub { font-size: var(--fs-12); color: var(--ink-faint); }
  .ui-orphan .ui-sub a, .wire-help-steps a { color: var(--ok-ink); text-decoration: underline; }
  .orphan-files .wire-warn-head svg { color: var(--pending-fill); }
  /* Admin heads-up banner (e.g. Graph secret nearing expiry) — shown at the top of the Admin tab. */
  .adm-alert { display: flex; align-items: flex-start; gap: var(--sp-8); font-size: var(--fs-13); line-height: 1.5; border-radius: var(--r-chip); padding: var(--sp-10) var(--sp-12); margin-bottom: var(--sp-12); }
  .adm-alert svg { width: 17px; height: 17px; flex: none; margin-top: 1px; }
  .adm-alert.warn { color: var(--ink); background: color-mix(in srgb, var(--pending-fill) 14%, transparent); border: 1px solid color-mix(in srgb, var(--pending-fill) 50%, transparent); }
  .adm-alert.warn svg { color: var(--pending-fill); }
  .adm-alert.err { color: var(--ink); background: var(--accent-tint); border: 1px solid color-mix(in srgb, var(--accent) 55%, transparent); }
  .adm-alert.err svg { color: var(--accent); }
  /* Flash a bucket that was just added via "Add this model" so the new drop target is unmissable. */
  .wire-bucket.justadded { animation: bucketFlash 1.4s ease; }
  @keyframes bucketFlash { 0%,100% { background: transparent; } 15% { background: var(--accent-tint); box-shadow: inset 0 0 0 1px var(--accent); } }
  .wire-otherpath { color: var(--ink-faint); font-weight: 500; }
  .wire-note { font-size: var(--fs-11-5); color: var(--pending); margin: var(--sp-2) 0 var(--sp-6); }
  /* Prominent warning banner for the "adding a file freezes the auto-updating folder" trade-off. */
  .wire-warn { display: flex; align-items: flex-start; gap: var(--sp-6); font-size: var(--fs-12); color: var(--ink); background: var(--pending-tint, color-mix(in srgb, var(--pending-fill) 14%, transparent)); border: 1px solid color-mix(in srgb, var(--pending-fill) 45%, transparent); border-radius: var(--r-chip); padding: var(--sp-6) var(--sp-8); }
  .wire-warn svg { width: 15px; height: 15px; flex: none; color: var(--pending-fill); margin-top: 1px; }
  .wire-none-actions { display: flex; flex-wrap: wrap; gap: var(--sp-8); margin: var(--sp-2) 0 var(--sp-9); }
  .uns-count { font-family: var(--font-mono); font-size: var(--fs-12); font-weight: 700; color: var(--ok-ink); margin-left: var(--sp-2); }
  .uns-empty { font-size: var(--fs-13); color: var(--ink-faint); padding: var(--sp-8) 0; }
  /* Coverage matrix: staged per-section link editor */
  .cov-ed-body { padding: var(--sp-6) var(--sp-14) var(--sp-12); }
  .cov-ed-model { border-top: 1px solid var(--line); padding: var(--sp-10) 0; }
  .cov-ed-model:first-child { border-top: 0; }
  .cov-ed-mname { font-family: var(--font-mono); font-size: var(--fs-12-5); font-weight: 600; margin-bottom: var(--sp-6); overflow-wrap: anywhere; }
  .cov-ed-links { display: flex; flex-wrap: wrap; gap: var(--sp-6); align-items: center; }
  .cov-ed-none { color: var(--ink-faint); font-size: var(--fs-12); }
  .cov-chip { display: inline-flex; align-items: center; gap: var(--sp-6); font-size: var(--fs-12); background: var(--surface-2); border: 1px solid var(--line); border-radius: var(--r-pill); padding: var(--sp-4) var(--sp-6) var(--sp-4) var(--sp-11); }
  .cov-chip.new { border-color: color-mix(in srgb, var(--ok) 32%, var(--line)); }
  .cov-chip.removed { opacity: .6; }
  .cov-chip.removed .cov-chip-name { text-decoration: line-through; }
  .ftp-bar { display: flex; align-items: center; gap: var(--sp-8); flex-wrap: wrap; margin: 0 0 var(--sp-8); }
  .ftp-bar-note { font-size: var(--fs-11); color: var(--ink-faint); }
  .ftp-plan { margin: 0 0 var(--sp-8); padding-left: var(--sp-16); font-size: var(--fs-12); color: var(--ink-soft); }
  .ftp-plan li { margin: var(--sp-3) 0; }
  /* file chips carry the real (sometimes long) filename — clickable to preview, capped so one long name
     can't push the ✕ off the row */
  .cov-chip-name { max-width: 260px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .cov-chip-prev { cursor: pointer; text-decoration: underline; text-decoration-style: dotted; text-underline-offset: 2px; }
  .cov-chip-prev:hover { color: var(--ok-ink); }
  .cov-chip-prev:focus-visible { outline: 2px solid var(--focus, var(--ok-ink)); outline-offset: 2px; border-radius: var(--r-ctl); }
  .cov-chip.flagfix { box-shadow: 0 0 0 2px var(--accent); border-color: var(--accent); } /* flashes the resource a PM clicked "Fix" for (removed after ~2.5s) */
  .cov-chip-tag { font-family: var(--font-label); font-size: var(--fs-9); letter-spacing: .05em; text-transform: uppercase; color: var(--ok-ink); }
  .cov-chip.na { border-color: var(--line); }
  .cov-chip.na .cov-chip-tag { color: var(--ink-faint); }
  .cov-chip-act { flex: none; border: 0; background: none; cursor: pointer; color: var(--ink-faint); font: inherit; font-size: var(--fs-11); border-radius: 50%; width: 24px; height: 24px; display: grid; place-items: center; }
  .cov-chip-act.del:hover, .cov-chip-act.unadd:hover { color: #fff; background: var(--accent); }
  .cov-chip-act svg { width: 13px; height: 13px; }
  .cov-chip-act.manage:hover { color: var(--accent); }
  .cov-chip-act.undo { width: auto; border-radius: var(--r-ctl); padding: 0 var(--sp-6); font-size: var(--fs-10); color: var(--accent-ink); }
  .cov-ed-addwrap { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-6); margin-top: var(--sp-8); }
  .cov-ed-add { border: 1px dashed var(--line-strong); background: none; color: var(--ink-soft); font: inherit; font-size: var(--fs-12); border-radius: var(--r-ctl); padding: var(--sp-5) var(--sp-11); cursor: pointer; }
  .cov-ed-add:hover { color: var(--accent); border-color: var(--accent); }
  .cov-add-res { min-width: 130px; }
  .cov-add-url { flex: 1 1 240px; min-width: 0; border: 1px solid var(--line-strong); border-radius: var(--r-ctl); background: var(--bg); color: var(--ink); font-family: var(--font-ui); font-size: var(--fs-13); padding: var(--sp-7) var(--sp-11); outline: none; }
  .cov-add-url:focus { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-tint); }
  .cov-add-ok, .cov-add-cancel { font-size: var(--fs-12); padding: var(--sp-6) var(--sp-12); }
  /* Link-check controls + badges, reused by the To-Do "Link Issues" tile and the coverage toolbar.
     (The standalone Link-health panel's styles — .lh-count/.lh-summary/.lh-pill/.lh-list/.lh-row/.lh-where/
     .lh-reason/.lh-acts — were removed with the panel.) */
  .lh-actions { display: flex; align-items: center; gap: var(--sp-12); margin: var(--sp-2) 0 var(--sp-6); }
  .lh-status { color: var(--ink-faint); font-size: var(--fs-12); font-variant-numeric: tabular-nums; }
  .lh-when { color: var(--ink-faint); font-size: var(--fs-12); }
  .lh-badge { font-family: var(--font-label); font-size: var(--fs-9); letter-spacing: .06em; padding: var(--sp-3) var(--sp-6); border-radius: var(--r-chip); background: var(--surface-2); color: var(--ink-soft); flex: none; }
  .lh-badge.bad { background: var(--accent-tint); color: var(--accent-ink); }
  .lh-badge.warn { background: var(--pending-tint); color: var(--pending); }
  .wl-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--sp-6); }
  .wl-row { display: flex; align-items: center; gap: var(--sp-10); }
  .wl-where { flex: 1 1 auto; min-width: 0; font-size: var(--fs-13); overflow-wrap: anywhere; }
  .wl-note { color: var(--pending); font-size: var(--fs-11-5); }
  .wl-row .wl-fix { flex: none; }
  /* "Wanted" = demand mined from search misses (folded into the worklist) */
  /* To-do inbox — ONE collapsible box containing collapsible result "tiles"; each hides when empty */
  .todo-wrap { margin-bottom: var(--sp-20); }
  .todo-wrap > summary.todo-head { list-style: none; cursor: pointer; display: flex; align-items: center; gap: var(--sp-8); font-weight: 700; font-size: var(--fs-17); }
  .todo-wrap > summary.todo-head::-webkit-details-marker { display: none; }
  .todo-wrap > summary.todo-head::after { content: ""; flex: none; width: 9px; height: 9px; border-right: 2px solid var(--ink-faint); border-bottom: 2px solid var(--ink-faint); transform: rotate(-45deg); transition: transform .15s; margin-left: var(--sp-4); }
  .todo-wrap[open] > summary.todo-head::after { transform: rotate(45deg); }
  .todo-head svg { width: 20px; height: 20px; color: var(--accent-ink); }
  .todo-boxes { display: flex; flex-direction: column; gap: var(--sp-10); margin-top: var(--sp-14); }
  /* each tile: a subtle nested box (box-within-the-box) that collapses */
  .todo-boxes > details { background: var(--surface-2); border: 1px solid var(--line); border-radius: var(--r-ctl); box-shadow: none; margin: 0; padding: 0; overflow: hidden; }
  .todo-boxes > details > summary { list-style: none; cursor: pointer; display: flex; align-items: center; gap: var(--sp-8); padding: var(--sp-11) var(--sp-14); font-weight: 700; font-size: var(--fs-14); }
  .todo-boxes > details > summary::-webkit-details-marker { display: none; }
  .todo-boxes > details > summary svg { width: 17px; height: 17px; }
  .todo-boxes > details > summary::after { content: ""; flex: none; width: 8px; height: 8px; border-right: 2px solid var(--ink-faint); border-bottom: 2px solid var(--ink-faint); transform: rotate(-45deg); transition: transform .15s; }
  .todo-boxes > details[open] > summary::after { transform: rotate(45deg); }
  .todo-boxes > details > .ui-body { padding: 0 var(--sp-14) var(--sp-14); }
  /* the count badge sits right after the title text, and the collapse chevron right after the badge */
  .todo-wrap .ftp-badge { margin-left: 0; }
  /* "Needs review" is non-urgent — its count reads amber, not the alarming red of Link Issues. */
  .todo-boxes .todo-review .ftp-badge { background: var(--pending-fill); color: var(--cov-review-ink); }
  /* neutralize inner panels' own card chrome so they read as sections, not cards-within-cards */
  .todo-boxes .wire.unsorted { background: transparent; border: 0; box-shadow: none; margin: 0; padding: 0; }
  /* "Re-check links" inside the Link Issues tile (present whenever there's a broken link) */
  .todo-recheck { margin-top: var(--sp-10); }
  .lh-recheck { display: inline-flex; align-items: center; gap: var(--sp-6); }
  .lh-recheck svg { width: 14px; height: 14px; }
  .wire-head small { font-weight: 400; font-size: var(--fs-12); color: var(--ink-faint); margin-left: var(--sp-6); text-transform: none; letter-spacing: 0; }
  /* "Check links" control in the coverage toolbar (manual check, always available) */
  .cov-lh-tool { display: inline-flex; align-items: center; gap: var(--sp-8); }
  .cov-lh-btn { display: inline-flex; align-items: center; gap: var(--sp-6); font: inherit; font-size: var(--fs-12); font-weight: 600; color: var(--ink-soft); background: var(--surface); border: 1px solid var(--line-strong); border-radius: var(--r-chip); padding: var(--sp-4) var(--sp-10); cursor: pointer; }
  .cov-lh-btn svg { width: 14px; height: 14px; }
  .cov-lh-btn:hover { color: var(--ink); border-color: var(--ink-faint); }
  .cov-lh-status { font-size: var(--fs-12); color: var(--ink-faint); font-family: var(--font-mono); }
  .cov-lh-when { font-size: var(--fs-12); color: var(--ink-faint); }
  /* Product dropdown in the "point this search at a product" picker */
  .met-alias-sel { flex: 1 1 auto; min-width: 0; font: inherit; font-size: var(--fs-13); padding: var(--sp-4) var(--sp-8); border: 1px solid var(--line-strong); border-radius: var(--r-ctl); background: var(--surface); color: var(--ink); }
  .met-alias-sel.met-alias-bad { border-color: var(--accent); }
  .wl-demand-head { font-family: var(--font-label); font-size: var(--fs-11); letter-spacing: .04em; text-transform: uppercase; color: var(--ink-soft); margin: var(--sp-12) 0 var(--sp-7); }
  .wl-demand-head small { text-transform: none; letter-spacing: 0; font-family: var(--font-ui); color: var(--ink-faint); margin-left: var(--sp-6); }
  .lh-badge.wanted, .lh-badge.ok { background: var(--ok-tint); color: var(--ok-ink); }
  .wl-q { font-style: italic; }
  .wl-req { flex: none; }
  .wl-dismiss { flex: none; border: 0; background: transparent; color: var(--ink-faint); font-size: var(--fs-17); line-height: 1; cursor: pointer; padding: 0 var(--sp-4); border-radius: var(--r-chip); }
  .wl-dismiss:hover { color: var(--ink); background: var(--surface-2); }
  .wl-loading { font-size: var(--fs-12); color: var(--ink-faint); margin-top: var(--sp-8); }
  /* "Files to place" inbox */
  .ftp-h { display: flex; align-items: center; gap: var(--sp-8); font-family: var(--font-label); font-size: var(--fs-11); letter-spacing: .04em; text-transform: uppercase; color: var(--ink-soft); margin: var(--sp-12) 0 var(--sp-7); }
  .ftp-h small { text-transform: none; letter-spacing: 0; font-family: var(--font-ui); color: var(--ink-faint); }
  .ftp-h .ftp-all { margin-left: auto; }
  /* "Place all" now sits below the list (footer), aligned with the per-row Place buttons */
  .ftp-allbar { display: flex; justify-content: flex-end; margin-top: var(--sp-10); }
  /* Clickable file name (opens the preview) — underlines on hover so it's obvious it's a link */
  .ftp-fname { font: inherit; font-weight: 700; color: var(--ink); background: none; border: 0; padding: 0; margin: 0; cursor: pointer; text-align: left; overflow-wrap: anywhere; }
  .ftp-fname:hover, .ftp-fname:focus-visible { text-decoration: underline; text-underline-offset: 2px; outline: none; }
  .ftp-trail { color: var(--ink-soft); }
  /* Subtle "Remove" — separated from the filled primary Keep/Place so the two don't compete */
  .ftp-reject { flex: none; font: inherit; font-size: var(--fs-12); font-weight: 600; color: var(--ink-faint); background: none; border: 0; padding: var(--sp-6) var(--sp-9); border-radius: var(--r-ctl); cursor: pointer; margin-left: var(--sp-6); transition: color .12s, background .12s; }
  .ftp-reject:hover { color: var(--accent); background: var(--accent-tint); }
  .ftp-reject:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
  .ftp-model { max-width: 220px; flex: none; }
  /* Explicit 2-line grid so every row is uniform regardless of filename length: filename + meta on the
     top line, the product/model/sort controls (+ delete) on the bottom line. A plain flex-wrap made a
     short-filename row collapse the controls up onto line 1 while long names wrapped them to line 2. */
  /* One-line rows like "New on SharePoint": filename + resource + inline age chip on the left, controls on the right */
  .uns-row { display: flex; align-items: center; flex-wrap: wrap; gap: var(--sp-6) var(--sp-8); border-top: 1px solid var(--line); padding: var(--sp-9) var(--sp-2); }
  .uns-where { flex: 1 1 320px; min-width: 0; display: flex; align-items: center; gap: var(--sp-8); }
  .uns-file { display: flex; align-items: center; gap: var(--sp-6); border: 0; background: none; cursor: pointer; color: var(--ink); font: inherit; font-weight: 700; font-size: var(--fs-13); padding: 0; min-width: 0; }
  .uns-file:hover .uns-name, .uns-file:focus-visible .uns-name { text-decoration: underline; text-underline-offset: 2px; }
  .uns-file:focus-visible { outline: none; }
  .uns-file svg { width: 15px; height: 15px; flex: none; color: var(--ink-faint); }
  .uns-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .uns-meta { flex: none; font-size: var(--fs-12); color: var(--ink-soft); white-space: nowrap; }
  .uns-sort { display: flex; align-items: center; gap: var(--sp-6); flex-wrap: wrap; flex: none; }
  .uns-sort .wire-sel { min-width: 104px; max-width: 180px; padding-top: var(--sp-6); padding-bottom: var(--sp-6); }
  .uns-del { flex: none; }
  /* Orphan rows (loose files found in a shared folder) folded into the Sort-the-Pile list. */
  .uns-file-plain { cursor: default; font-weight: 700; }
  .uns-file-plain:hover .uns-name { text-decoration: none; }
  .uns-orphan-tag { flex: none; display: inline-flex; align-items: center; line-height: 1; font-size: var(--fs-11); color: var(--pending); background: var(--pending-tint); border: 1px solid color-mix(in srgb, var(--pending-fill) 32%, var(--line)); border-radius: var(--r-chip); padding: var(--sp-4) var(--sp-6); white-space: nowrap; }
  .uns-folder-link { flex: none; font-size: var(--fs-12); color: var(--ok-ink); text-decoration: underline; text-underline-offset: 2px; white-space: nowrap; }
  .uns-orphan-hint { flex: 1 1 240px; font-size: var(--fs-12); color: var(--ink-soft); }
  .wire-file.existing { background: var(--ok-tint); border-color: color-mix(in srgb, var(--ok) 32%, var(--line)); }
  .wire-file.isnew { background: var(--ok-tint); border-color: color-mix(in srgb, var(--ok) 32%, var(--line)); }
  .wire-file.folder { background: var(--surface-2); border-style: dashed; cursor: default; }
  .wire-tag { flex: none; display: inline-flex; align-items: center; line-height: 1; font-family: var(--font-label); font-size: var(--fs-8-5); letter-spacing: .06em; text-transform: uppercase; font-weight: 700; color: var(--ok-ink); background: var(--surface); border: 1px solid color-mix(in srgb, var(--ok) 32%, var(--line)); border-radius: var(--r-chip); padding: var(--sp-5) var(--sp-6) var(--sp-3); }
  .wire-tag.new { color: var(--ok-ink); border-color: color-mix(in srgb, var(--ok) 32%, var(--line)); }
  .wire-bucket { border-top: 1px solid var(--line); padding: var(--sp-10) var(--sp-6); border-radius: var(--r-sm); transition: background .12s; }
  .wire-bucket.drop { background: var(--accent-tint); box-shadow: inset 0 0 0 1px var(--accent); }
  .wire-file { cursor: grab; }
  .wire-file:hover { border-color: var(--accent); }
  .wire-file.dragging { opacity: .45; }
  .wire-fname { flex: 1 1 auto; min-width: 0; }
  .wire-open { display: flex; align-items: center; gap: var(--sp-6); flex: 1 1 auto; min-width: 0; border: 0; background: none; margin: 0; padding: 0; font: inherit; color: inherit; text-align: left; cursor: pointer; }
  .wire-open:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: var(--r-chip); }
  .wire-move { flex: none; border: 0; background: none; color: var(--ink-faint); cursor: pointer; padding: var(--sp-2); min-width: 24px; min-height: 24px; display: inline-grid; place-items: center; border-radius: var(--r-xs); }
  .wire-move:hover, .wire-move[aria-expanded="true"] { color: var(--accent); background: var(--surface); }
  .wire-move:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
  .wire-move svg { width: 13px; height: 13px; }
  /* Custom themed Move dropdown (replaces the native <select> menu so it matches the app). */
  .wire-menu { position: fixed; z-index: 200; min-width: 180px; max-width: 340px; max-height: 60vh; overflow-y: auto; background: var(--surface); border: 1px solid var(--line-strong); border-radius: var(--r-ctl); box-shadow: var(--shadow-hover); padding: var(--sp-5); }
  .wire-menu-head { font-family: var(--font-label); font-size: var(--fs-9-5); letter-spacing: .06em; text-transform: uppercase; color: var(--ink-faint); padding: var(--sp-4) var(--sp-10) var(--sp-6); }
  .wire-menu-item { display: block; width: 100%; text-align: left; border: 0; background: none; color: var(--ink); font: inherit; font-size: var(--fs-13); padding: var(--sp-8) var(--sp-10); border-radius: var(--r-chip); cursor: pointer; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .wire-menu-item:hover, .wire-menu-item:focus { background: var(--accent-tint); color: var(--accent-ink); outline: none; }
  .wire-menu-item.wire-menu-none { color: var(--ink-soft); border-top: 1px solid var(--line); margin-top: var(--sp-4); padding-top: var(--sp-9); }
  .wire-menu-item.wire-menu-all { color: var(--accent-ink); font-weight: 600; border-bottom: 1px solid var(--line); margin-bottom: var(--sp-4); padding-bottom: var(--sp-9); }
  /* Multi-select model picker (Unsorted "Sort to models" + Files-to-place) — trigger + checkbox dropdown. */
  .uns-mbtn, .ftp-mbtn { text-align: left; cursor: pointer; }
  .ftp-mbtn { min-width: 160px; }
  .uns-mbtn:disabled, .ftp-mbtn:disabled { opacity: .55; cursor: default; }
  .uns-menu { min-width: 220px; }
  .uns-check { display: flex; align-items: center; gap: var(--sp-8); padding: var(--sp-7) var(--sp-9); border-radius: var(--r-chip); cursor: pointer; font-size: var(--fs-13); color: var(--ink); }
  .uns-check:hover { background: var(--accent-tint); }
  .uns-check input { flex: none; width: 15px; height: 15px; cursor: pointer; accent-color: var(--ok); }
  .uns-check-all { border-bottom: 1px solid var(--line); margin-bottom: var(--sp-4); padding-bottom: var(--sp-9); font-weight: 600; }
  .wire-allfam { margin-top: var(--sp-12); }
  /* Read as an actionable secondary option (a bordered teal button), not buried text. */
  .wire-allfam > summary { cursor: pointer; font-size: var(--fs-13); font-weight: 600; color: var(--ok-ink); display: inline-flex; align-items: center; gap: var(--sp-8); padding: var(--sp-7) var(--sp-12); border: 1px solid color-mix(in srgb, var(--ok) 35%, var(--line-strong)); border-radius: var(--r-ctl); background: var(--ok-tint); list-style: none; }
  .wire-allfam > summary::-webkit-details-marker { display: none; }
  .wire-allfam > summary:hover { border-color: var(--ok); }
  .wire-allfam > summary svg { width: 15px; height: 15px; }
  .wire-allfam-body { padding-top: var(--sp-10); }
  .wire-help-note { font-size: var(--fs-12); color: var(--ink-soft); max-width: 72ch; margin: 0 0 var(--sp-10); }
  .wire-fam-list { display: flex; flex-direction: column; gap: var(--sp-6); margin: var(--sp-10) 0; }
  .wire-fam-row { display: flex; align-items: center; gap: var(--sp-10); }
  .wire-fam-file { flex: 1 1 auto; min-width: 0; font-size: var(--fs-13); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .wire-fam-file.unmatched { color: var(--pending); }
  .wire-fam-sel { flex: 0 0 auto; max-width: 46%; }
  .wire-dup { flex: none; border: 0; background: none; color: var(--ink-faint); cursor: pointer; padding: var(--sp-2); min-width: 24px; min-height: 24px; display: inline-grid; place-items: center; border-radius: var(--r-xs); }
  .wire-dup:hover { color: var(--accent); background: var(--surface); }
  .wire-dup svg { width: 13px; height: 13px; }
  .wire-del { flex: none; border: 0; background: none; color: var(--ink-faint); cursor: pointer; padding: var(--sp-2); min-width: 24px; min-height: 24px; display: inline-grid; place-items: center; border-radius: var(--r-xs); }
  .wire-del:hover { color: #fff; background: var(--accent); }
  .wire-del svg { width: 13px; height: 13px; }
  .wire-dup:focus-visible, .wire-del:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
  /* Left panel: one box per category, stacked, each with its own header + divider */
  .col-tree { flex: 1 1 320px; min-width: 0; max-width: 520px; display: flex; flex-direction: column; gap: var(--sp-14); align-self: flex-start; }
  .cat-box { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-card); box-shadow: var(--shadow-rest); overflow: hidden; animation: colIn .22s cubic-bezier(.2,.7,.3,1); }
  .cat-box .col-body { padding: var(--sp-8) var(--sp-6); }
  .fam-row .ci-chev { transition: transform .22s cubic-bezier(.34,1.56,.64,1), color .18s ease; }
  .fam-row.open { background: var(--surface-2); }
  .fam-row.open .ci-chev { transform: rotate(90deg); color: var(--accent); }
  .tree-nest { margin: var(--sp-3) 0 var(--sp-7) var(--sp-11); padding-left: var(--sp-10); border-left: 2px solid var(--line); display: flex; flex-direction: column; gap: var(--sp-2); }
  .tree-nest > * { animation: nestRow .22s cubic-bezier(.2,.7,.3,1) backwards; animation-delay: calc(var(--i,0) * 28ms); }
  @keyframes nestRow { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } }
  .prod-row .ci-name { font-size: var(--fs-13-5); }

  /* "Other Collateral" — full-width collapsible channel panel above the breadcrumb. Native <details>. */
  .oc-panel { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-card); box-shadow: var(--shadow-rest); overflow: hidden; margin: 0 0 var(--sp-12); }
  .oc-panel > summary, .oc-channel > summary { list-style: none; cursor: pointer; }
  .oc-panel > summary::-webkit-details-marker, .oc-channel > summary::-webkit-details-marker { display: none; }
  .oc-head { display: flex; align-items: center; justify-content: flex-start; gap: var(--sp-8); padding: var(--sp-13) var(--sp-16); }
  .oc-title { font-family: var(--font-label); font-size: var(--fs-17); font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--accent-ink); }
  .oc-chev { display: inline-flex; color: var(--ink-faint); transition: transform .22s cubic-bezier(.34,1.56,.64,1), color .18s ease; }
  .oc-chev svg { width: 18px; height: 18px; }
  .oc-panel[open] > .oc-head { border-bottom: 1px solid var(--line); }
  .oc-panel[open] > .oc-head .oc-chev, .oc-channel[open] > .oc-channel-head .oc-chev { transform: rotate(90deg); color: var(--accent); }
  .oc-head:hover .oc-chev, .oc-channel-head:hover .oc-chev { color: var(--accent); }
  .oc-body { padding: var(--sp-8) var(--sp-12) var(--sp-12); display: flex; flex-direction: column; gap: var(--sp-6); }
  .oc-channel { border: 1px solid var(--line); border-radius: var(--r-chip); overflow: hidden; }
  .oc-channel-head { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-8); padding: var(--sp-10) var(--sp-12); }
  .oc-channel-head:hover { background: var(--surface-2); }
  .oc-ch-name { font-size: var(--fs-14); font-weight: 600; color: var(--ink); }
  .oc-ch-meta { margin-left: auto; margin-right: var(--sp-8); display: inline-flex; align-items: center; }
  .oc-channel-body { padding: var(--sp-6) var(--sp-12) var(--sp-11); display: flex; flex-direction: column; gap: var(--sp-4); border-top: 1px solid var(--line); }
  .oc-empty { font-size: var(--fs-13); color: var(--ink-faint); padding: var(--sp-6) 0; }
  .oc-doc { display: flex; align-items: center; gap: var(--sp-8); text-align: left; width: 100%; padding: var(--sp-8) var(--sp-10); border: 1px solid var(--line); border-radius: var(--r-chip); background: var(--surface); cursor: pointer; color: var(--ink); }
  .oc-doc:hover { border-color: var(--accent); color: var(--accent); }
  .oc-doc-ico svg, .oc-doc-open svg { width: 16px; height: 16px; }
  .oc-doc-ico { color: var(--ink-faint); display: inline-flex; }
  .oc-doc-name { flex: 1; min-width: 0; font-size: var(--fs-13); }
  .oc-doc-open { margin-left: auto; color: var(--ink-faint); display: inline-flex; }
  .prod-row.sel { background: var(--accent-tint); }

  /* Resource panel (rightmost column) */
  .res-panel { padding: var(--sp-10); display: flex; flex-direction: column; gap: var(--sp-10); }
  .res-pinrow { display: flex; justify-content: flex-end; margin-bottom: calc(-1 * var(--sp-4)); }
  /* White by default; lights up gold on hover (previewing the favorited color); turns gold (★) when selected (favorited). */
  .res-pin { font-family: var(--font-label); font-size: var(--fs-10-5); letter-spacing: .04em; text-transform: uppercase; font-weight: 700; color: var(--ink); background: none; border: 1px solid var(--line-strong); border-radius: var(--r-pill); padding: var(--sp-4) var(--sp-10); cursor: pointer; transition: color .15s, border-color .15s; }
  .res-pin:hover { color: var(--pending-fill); border-color: var(--pending-fill); }
  .res-pin.on, .res-pin.on:hover { color: var(--pending-fill); border-color: var(--pending-fill); }
  .favs { display: flex; flex-direction: column; gap: var(--sp-6); margin: var(--sp-8) 0 var(--sp-12); }
  .favs-head { font-family: var(--font-label); font-size: var(--fs-11); letter-spacing: .06em; text-transform: uppercase; color: var(--ok-ink); }
  .favs-row { display: flex; flex-wrap: wrap; gap: var(--sp-6); }
  .fav-chip { font-family: var(--font-ui); font-size: var(--fs-12-5); color: var(--ink); background: var(--surface); border: 1px solid var(--line-strong); border-radius: var(--r-pill); padding: var(--sp-6) var(--sp-12); cursor: pointer; transition: color .15s, border-color .15s; }
  .fav-chip:hover { color: var(--ok-ink); border-color: var(--ok); }
  /* Recently-viewed chips get a small remove-× badge on hover (top-right corner). */
  .rec-wrap { position: relative; display: inline-flex; }
  .rec-x { position: absolute; top: -6px; right: -6px; width: 18px; height: 18px; border-radius: 50%; border: 1px solid var(--line-strong); background: var(--surface); color: var(--ink-soft); font-size: 13px; line-height: 1; display: none; align-items: center; justify-content: center; cursor: pointer; padding: 0; box-shadow: var(--shadow-rest); }
  .rec-wrap:hover .rec-x, .rec-x:focus-visible { display: inline-flex; }
  .rec-x:hover { color: var(--accent); border-color: var(--accent); }
  /* Touch devices have no hover — the reveal-on-hover × would be permanently unreachable, so always show it. */
  @media (hover: none) { .rec-x { display: inline-flex; } }
  /* Age/triage chip: shared by the bug inbox, placement backlog, and unsorted pile so the longest-waiting
     item reads at a glance. Neutral until it's been sitting a while (warn = amber past ~1wk, bad = red past ~3wk). */
  .age-chip { display: inline-block; flex: none; font-family: var(--font-mono); font-size: var(--fs-11); font-weight: 700; line-height: 1.5; color: var(--ink-faint); background: var(--surface-2); border: 1px solid var(--line); border-radius: var(--r-pill); padding: var(--sp-1) var(--sp-8); white-space: nowrap; }
  .age-chip.warn { color: var(--pending); background: var(--pending-tint); border-color: color-mix(in srgb, var(--pending-fill) 35%, transparent); }
  .age-chip.bad { color: var(--accent-ink); background: var(--accent-tint); border-color: color-mix(in srgb, var(--accent) 35%, transparent); }
  /* Skeleton loading placeholders — a shimmering ghost of the Find layout while the catalog fetches. */
  @keyframes skShimmer { 0% { background-position: -220px 0; } 100% { background-position: calc(220px + 100%) 0; } }
  .sk { border-radius: var(--r-chip); background-color: var(--surface-2); background-image: linear-gradient(90deg, transparent 0, color-mix(in srgb, var(--surface) 60%, transparent) 50%, transparent 100%); background-size: 220px 100%; background-repeat: no-repeat; animation: skShimmer 1.25s ease-in-out infinite; }
  .sk-row { display: flex; gap: var(--sp-8); flex-wrap: wrap; margin-bottom: var(--sp-14); }
  .sk-chip { height: 30px; width: 108px; border-radius: var(--r-pill); }
  .sk-card { height: 82px; width: 188px; border-radius: var(--r-card); }
  .sk-line { height: 46px; width: 320px; max-width: 100%; margin-bottom: var(--sp-8); border-radius: var(--r-ctl); }
  @media (prefers-reduced-motion: reduce) { .sk { animation: none; } }
  .coverage { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: var(--sp-12); row-gap: var(--sp-8); padding: var(--sp-11) var(--sp-12); background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-card); box-shadow: var(--shadow-rest); }
  .cov-segs { display: flex; gap: var(--sp-4); flex: none; }
  .cseg { position: relative; width: 22px; height: 6px; border-radius: 2px; background: var(--surface-2); box-shadow: inset 0 0 0 1px var(--line); cursor: default; transition: box-shadow .15s ease, filter .15s ease; animation: segIn .3s ease backwards; animation-delay: calc(var(--i,0) * 45ms); }
  .cseg.on { background: var(--ok); box-shadow: none; }
  /* Hover: the segment you're on grows + rings so it's obvious which one it is; its name shows inline in
     the count line (see coverage() JS) — no floating tooltip, so nothing overlaps the header. */
  .cseg:hover { box-shadow: 0 0 0 1.5px var(--ok), 0 0 9px 2px color-mix(in srgb, var(--ok) 60%, transparent); filter: brightness(1.25) saturate(1.2); z-index: 3; }
  /* Small name popup ABOVE the hovered segment — above the cursor so the mouse never covers it. */
  .cseg[data-label]:hover::after { content: attr(data-label); position: absolute; bottom: calc(100% + 6px); left: 50%; transform: translateX(-50%); background: var(--surface); color: var(--ink); border: 1px solid var(--line-strong); padding: 2px 7px; border-radius: var(--r-chip); font-family: var(--font-ui); font-size: var(--fs-10-5); font-weight: 500; letter-spacing: normal; text-transform: none; white-space: nowrap; z-index: 20; pointer-events: none; box-shadow: var(--shadow-hover); }
  @keyframes segIn { from { opacity: 0; transform: translateY(3px); } to { opacity: 1; transform: none; } }
  /* Count stays on the right, always. nowrap so a short "6 of 9 linked" holds the right edge; the long
     "Resource pack work in progress · 0 of N" wraps to its own line via the parent's flex-wrap. */
  .coverage-num { font-family: var(--font-mono); font-size: var(--fs-12); color: var(--ink-soft); white-space: nowrap; }
  .coverage-num b { color: var(--ink); }
  .coverage-num.complete, .coverage-num.complete b { color: var(--ok-ink); }
  .res-list { display: flex; flex-direction: column; gap: var(--sp-8); }
  .res { display: flex; align-items: center; gap: var(--sp-13); background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-card); padding: var(--sp-11) var(--sp-12); text-align: left; font: inherit; color: inherit; width: 100%; cursor: pointer; box-shadow: var(--shadow-rest); transition: transform .14s, box-shadow .14s, border-color .14s, background .14s; text-decoration: none; }
  .res:hover { transform: translateY(-1px); box-shadow: var(--shadow-hover); }
  .res:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
  .res-icon { width: 34px; height: 34px; flex: none; border-radius: var(--r-ctl); display: grid; place-items: center; background: var(--ok-tint); color: var(--ok-ink); }
  .res-icon svg { width: 18px; height: 18px; }
  .res-body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: var(--sp-2); }
  .res-name { display: block; font-weight: 600; font-size: var(--fs-13-5); }
  .res-desc { display: block; font-size: var(--fs-11-5); color: var(--ink-soft); }
  .pill { font-family: var(--font-label); font-size: var(--fs-10-5); line-height: 1; letter-spacing: .08em; text-transform: uppercase; font-weight: 600; padding: var(--sp-6) var(--sp-10); border-radius: var(--r-pill); white-space: nowrap; display: inline-flex; align-items: center; gap: var(--sp-6); }
  .pill .pdot, .pill svg { flex: none; position: relative; top: -1px; }
  .pill.ok { background: var(--ok-tint); color: var(--ok-ink); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--ok) 22%, transparent); }
  .pill.pending { background: var(--pending-tint); color: var(--pending); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--pending) 22%, transparent); }
  .pill.bad { background: var(--accent-tint); color: var(--accent-ink); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--accent) 22%, transparent); }
  .pill.bad svg { width: 12px; height: 12px; }
  .res-broken { border-color: color-mix(in srgb, var(--accent) 38%, var(--line)); }
  .pill svg { width: 12px; height: 12px; opacity: .75; }
  .pill .pdot { width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
  .res .pill.ok svg { transition: transform .15s ease; }
  .res:hover .pill.ok svg { transform: translate(1.5px, -1.5px); }
  .res.pending { border-style: dashed; }
  .res.pending .res-icon { background: var(--surface-2); color: var(--ink-faint); }
  .res.pending:hover { transform: none; border-color: var(--pending); background: var(--pending-tint); box-shadow: var(--shadow-rest); }
  .res.pending .pdot { animation: pdotPulse 2.4s ease-in-out infinite; }
  @keyframes pdotPulse { 0%,100% { opacity: .5; } 50% { opacity: 1; } }

  /* Search results */
  .sr-head { font-size: var(--fs-13); color: var(--ink-soft); margin-bottom: var(--sp-14); }
  /* Results flow into as many columns as the window allows (single column on narrow screens), so a long
     result set uses the whole width instead of a tall strip pinned to the left. */
  .sr-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: var(--sp-8); align-content: start; }
  .sr { display: flex; align-items: center; gap: var(--sp-12); width: 100%; text-align: left; font: inherit; color: inherit; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-ctl); padding: var(--sp-12) var(--sp-14); cursor: pointer; transition: border-color .14s, background .14s; animation: srIn .22s cubic-bezier(.2,.7,.3,1) backwards; animation-delay: calc(var(--i,0) * 22ms); }
  .sr:hover { border-color: var(--accent); background: var(--accent-tint); }
  .sr:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
  @keyframes srIn { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }
  .sr-lvl { font-family: var(--font-label); font-size: var(--fs-10); letter-spacing: .1em; text-transform: uppercase; font-weight: 700; color: var(--ink-soft); background: var(--surface-2); padding: var(--sp-4) var(--sp-8); border-radius: var(--r-chip); flex: none; min-width: 62px; text-align: center; }
  .sr-lvl.live { color: var(--ok-ink); background: var(--ok-tint); }
  .sr-main { flex: 1; min-width: 0; }
  .sr-name { display: block; font-weight: 600; font-size: var(--fs-14); }
  .sr-name.mono { font-family: var(--font-mono); }
  .sr-path { display: block; margin-top: var(--sp-3); font-size: var(--fs-12); color: var(--ink-faint); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .sr-empty-cta { display: flex; align-items: center; gap: var(--sp-12); margin-top: var(--sp-14); flex-wrap: wrap; }
  .sr-empty-hint { font-size: var(--fs-13); color: var(--ink-faint); }
  .ci-chev.sr-chev svg { width: 18px; height: 18px; }
  .hl { background: color-mix(in srgb, var(--accent) 28%, var(--surface)); color: var(--ink); border-radius: 3px; padding: 0 var(--sp-1); }

  /* Toast */
  /* Above the lightbox (200) and bug modal (210): copy-link / download confirmations fire WHILE the
     preview is open, and a11yModal deliberately exempts #toastWrap from inert so it stays usable. */
  .toast-wrap { position: fixed; left: 50%; bottom: 26px; transform: translateX(-50%); z-index: 250; display: flex; flex-direction: column; gap: var(--sp-8); align-items: center; pointer-events: none; }
  .toast { background: var(--ink); color: var(--bg); padding: var(--sp-11) var(--sp-16); border-radius: var(--r-ctl); font-size: var(--fs-13); box-shadow: var(--shadow-hover); display: flex; align-items: center; gap: var(--sp-10); max-width: 90vw; animation: toast-in .25s cubic-bezier(.2,.7,.3,1); }
  .toast .tmono { font-family: var(--font-mono); font-weight: 600; }
  .toast svg { width: 16px; height: 16px; flex: none; }
  /* Actionable toast: the wrap is pointer-events:none, so re-enable clicks on the button itself. */
  .toast-act { pointer-events: auto; margin-left: var(--sp-4); flex: none; font-family: var(--font-label); font-size: var(--fs-10); letter-spacing: .08em; text-transform: uppercase; font-weight: 700; color: var(--bg); background: transparent; border: 1px solid color-mix(in srgb, var(--bg) 45%, transparent); border-radius: var(--r-sm); padding: var(--sp-6) var(--sp-11); cursor: pointer; white-space: nowrap; transition: background .15s, border-color .15s; }
  .toast-act:hover { background: color-mix(in srgb, var(--bg) 18%, transparent); border-color: var(--bg); }
  .toast-act:focus-visible { outline: 2px solid var(--bg); outline-offset: 2px; }
  @keyframes toast-in { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }

  .view { animation: view-in .2s ease; }
  @keyframes view-in { from { opacity: 0; transform: translateY(5px); } to { opacity: 1; transform: none; } }
  /* Entrance-animation scoping: suppress the entrance animation on elements that were already
     on screen last render, so a nav click animates only the newly-revealed column/rows. */
  .no-anim { animation: none !important; }


  @media (prefers-reduced-motion: reduce) { * { animation: none !important; transition: none !important; } }
  /* Print: PMs print the Progress matrix. Force the light palette (never waste ink on the dark
     chrome), keep the colored matrix cells (exact color), drop app chrome + interactive affordances,
     and don't split a product group across a page break. Specificity beats the dark blocks so a
     dark-theme user still prints light. */
  @media print {
    :root:not([data-theme]), :root[data-theme="dark"], :root[data-theme="light"] {
      --bg: #fff; --surface: #fff; --surface-2: #fff;
      --ink: #16202c; --ink-soft: #44525a; --ink-faint: #5b626e;
      --line: #d5dbe4; --line-strong: #c2cad6;
      --accent: #d62027; --accent-tint: #fbe8e9; --accent-ink: #d62027;
      --ok: #06a6c4; --ok-ink: #06a6c4; --ok-tint: #e1f5f9; --pending: #8f5e0a; --pending-fill: #efa215; --pending-tint: #f6ecd9; --cov-on-ink: #ffffff; --cov-review-ink: #1a1206;
    }
    * { box-shadow: none !important; -webkit-print-color-adjust: exact; print-color-adjust: exact; }
    .topbar, .bug-fab, .toast-wrap, .lb, .bugm, .cov-check, .cov-grp-edit, .cov-ed-actions { display: none !important; }
    main { padding: 0 !important; max-width: none !important; }
    .cov-view { max-width: none !important; }
    .cov-matrix { overflow: visible !important; }
    .cov-group { break-inside: avoid; page-break-inside: avoid; }
  }
  /* Tablet & phone: stack the family / model / resource columns vertically instead of
     side-scrolling, so each is full width and you scroll down through the path. */
  @media (max-width: 860px) {
    .cols { flex-direction: column; overflow-x: visible; gap: var(--sp-12); }
    .cols > .col, .cols > .col-tree { width: 100%; max-width: none; flex: 0 0 auto; align-self: stretch; }
  }
  @media (max-width: 620px) {
    .topbar-inner { padding: var(--sp-12) var(--sp-16); gap: var(--sp-12); }
    .search { order: 3; flex-basis: 100%; max-width: none; margin-left: 0; }
    main { padding: var(--sp-20) var(--sp-16) var(--sp-80); }
    .now-card { min-width: 0; flex: 1 1 100%; }
    .now-grid { flex-direction: column; }
    /* Preview header (title + Copy link / Download / Open in SharePoint / ✕): wrap onto rows */
    .lb { padding: var(--sp-12); }
    .lb-head { flex-wrap: wrap; gap: var(--sp-8); }
    .lb-title { flex-basis: 100%; white-space: normal; }
    .lb-close { margin-left: auto; }
    /* (The 2-row-header height reserve for .gal / .lb-body.doc lives in a <=760px block AFTER the default
       heights — see below — so it actually wins the cascade and covers the whole range where the header wraps.) */
    .cov-summary { gap: var(--sp-14); padding: var(--sp-14) var(--sp-16); }
  }
  /* --- Auth gate + sign-in screen --- */
  body.pre-auth .topbar, body.pre-auth main { display: none; }
  #signin { display: none; }
  body.pre-auth #signin { display: grid; }
  #signin { position: fixed; inset: 0; place-items: center; padding: var(--sp-24); background: var(--bg); z-index: 100; }
  .signin-card { width: 100%; max-width: 430px; background: var(--surface); border: 1px solid var(--line); border-radius: 16px; box-shadow: var(--shadow-hover); padding: var(--sp-36) var(--sp-34) var(--sp-28); text-align: center; }
  .signin-card .mark { display: block; width: 54px; height: 54px; margin: 0 auto var(--sp-8); }
  .signin-card .mark svg { width: 54px; height: 54px; }
  .signin-card .mark path { fill: var(--ink); }
  .signin-card .mark path:last-of-type { fill: var(--accent); }
  .signin-card h1 { font-size: var(--fs-23); font-weight: 700; letter-spacing: -.01em; margin: 0 0 var(--sp-24); }
  .signin-card .sub { font-family: var(--font-label); font-size: var(--fs-11); letter-spacing: .14em; text-transform: uppercase; color: var(--ink-faint); margin-bottom: var(--sp-20); }
  .signin-card p { color: var(--ink-soft); font-size: var(--fs-14-5); line-height: 1.55; margin: 0 auto var(--sp-24); max-width: 36ch; }
  .ms-btn { display: inline-flex; align-items: center; gap: var(--sp-11); border: 1px solid var(--line-strong); background: var(--surface); color: var(--ink); font: inherit; font-size: var(--fs-15); font-weight: 600; padding: var(--sp-12) var(--sp-22); border-radius: var(--r-ctl); cursor: pointer; transition: border-color .15s, box-shadow .15s, transform .08s; }
  .ms-btn:hover { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-tint); }
  .ms-btn:active { transform: translateY(1px); }
  .ms-btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
  .ms-logo { width: 18px; height: 18px; flex: none; }
  .signin-note { margin-top: var(--sp-18); font-size: var(--fs-12-5); color: var(--ink-faint); min-height: 16px; }
  .signin-note.err { color: var(--accent-ink); }
  /* signed-in chip in the topbar */
  .userchip { display: inline-flex; align-items: center; gap: var(--sp-10); margin-left: var(--sp-6); }
  .userchip .uname { font-size: var(--fs-13); color: var(--ink-soft); font-weight: 600; max-width: 170px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .userchip .signout { font-family: var(--font-label); font-size: var(--fs-10); letter-spacing: .08em; text-transform: uppercase; font-weight: 700; line-height: 1; color: var(--ink-faint); background: none; border: 1px solid var(--line-strong); border-radius: var(--r-ctl); padding: var(--sp-8) var(--sp-11) var(--sp-6); cursor: pointer; transition: color .15s, border-color .15s; }
  .userchip .signout:hover { color: var(--accent); border-color: var(--accent); }
  /* --- File preview lightbox --- */
  .lb[hidden] { display: none; }
  .lb { position: fixed; inset: 0; z-index: 200; display: grid; place-items: center; padding: var(--sp-24); }
  .lb-backdrop { position: absolute; inset: 0; background: rgba(8,12,20,.62); -webkit-backdrop-filter: blur(2px); backdrop-filter: blur(2px); }
  .lb-panel { position: relative; z-index: 1; width: min(1240px, 96vw); max-height: 96vh; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); box-shadow: var(--shadow-hover); display: flex; flex-direction: column; overflow: hidden; animation: view-in .2s ease; }
  /* wrap so the 7 header controls can't clip the ✕ on a ~620–760px panel; anchor the right-hand action
     cluster with a stable margin-left:auto on the first action, so alignment doesn't jump left when the
     "Updated…" date is absent (its old margin-right:auto used to do the pushing). */
  .lb-head { display: flex; align-items: center; flex-wrap: wrap; gap: var(--sp-12); row-gap: var(--sp-8); padding: var(--sp-12) var(--sp-14); border-bottom: 1px solid var(--line); }
  .lb-title { font-family: var(--font-mono); font-size: var(--fs-13); font-weight: 600; flex: 0 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .lb-updated { flex: none; font-family: var(--font-ui); font-size: var(--fs-11); color: color-mix(in srgb, var(--ink) 52%, transparent); white-space: nowrap; }
  .lb-updated.stale { color: var(--pending); }
  .lb-updated:empty { display: none; }
  .lb-head #lbCopyBtn { margin-left: auto; }
  .lb-open { font-family: var(--font-label); font-size: var(--fs-10); letter-spacing: .08em; text-transform: uppercase; font-weight: 700; color: var(--ok-ink); text-decoration: none; border: 1px solid color-mix(in srgb, var(--ok) 30%, var(--line)); border-radius: var(--r-ctl); padding: var(--sp-6) var(--sp-11); white-space: nowrap; }
  .lb-open:hover { border-color: var(--ok); }
  .lb-copy { display: inline-flex; align-items: center; gap: var(--sp-6); font-family: var(--font-label); font-size: var(--fs-10); letter-spacing: .08em; text-transform: uppercase; font-weight: 700; color: var(--ink-soft); background: var(--surface); cursor: pointer; border: 1px solid var(--line-strong); border-radius: var(--r-ctl); padding: var(--sp-6) var(--sp-10); white-space: nowrap; transition: color .15s, border-color .15s; }
  .lb-copy svg { width: 13px; height: 13px; }
  .lb-copy:hover { color: var(--accent); border-color: var(--accent); }
  .lb-copy:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
  .lb-copy.copied { color: var(--ok-ink); border-color: var(--ok); }
  .lb-copy:disabled { opacity: .6; cursor: default; }
  .lb-close { flex: none; width: 32px; height: 32px; border-radius: var(--r-ctl); border: 1px solid var(--line-strong); background: var(--surface); color: var(--ink-soft); cursor: pointer; font-size: var(--fs-14); line-height: 1; }
  .lb-close:hover { color: var(--accent); border-color: var(--accent); }
  .lb-body { flex: 1; min-height: 240px; display: grid; place-items: center; overflow: hidden; background: var(--surface-2); padding: var(--sp-14); }
  /* A document preview needs a DEFINITE height or it collapses: lb-body is flex:1 (basis 0%) inside a
     panel whose height is only max-height:96vh (no definite height), so there's no free space to grow
     into and the body falls back to its 240px min-height — leaving a portrait doc tiny with big margins.
     Give the doc body an explicit viewport height so the pdf/frame (flex:1) fills a full-height panel.
     flex-direction:column is required: .lb-body base carries place-items:center (align-items:center), so
     a plain flex row would center the frame at its content height instead of filling the body. The 60px
     reserve is the one-row header; the <=620px block bumps it for the wrapped two-row header. */
  .lb-body.doc { padding: 0; display: flex; flex-direction: column; align-items: stretch; flex: none; height: calc(96vh - 60px); }
  .lb-img { max-width: 100%; max-height: calc(96vh - 78px); object-fit: contain; border-radius: var(--r-chip); }
  .lb-pdf { display: block; width: 100%; flex: 1; min-height: 0; border: 0; background: #fff; }
  .lb-framewrap { position: relative; width: 100%; flex: 1; min-height: 0; overflow: hidden; background: #fff; }
  /* The MS embed viewer shows a ~48px OneDrive bar at the top; crop it by absolutely positioning the iframe
     48px taller than its wrapper and sliding it up 48px, so it fills the wrapper exactly at any height.
     Absolute positioning (not margin-top) makes the % height resolve reliably against the flex-sized wrapper
     -- an in-flow % height against a flex-stretched parent falls back to the 150px default iframe height. */
  .lb-frame { position: absolute; top: -48px; left: 0; width: 100%; height: calc(100% + 48px); border: 0; background: #fff; }
  .lb-loading { color: var(--ink-soft); font-size: var(--fs-14); }
  .lb-err { text-align: center; color: var(--ink-soft); padding: var(--sp-20); }
  .lb-err p { margin: 0 0 var(--sp-14); }
  .lb-openbtn { display: inline-block; font-weight: 600; color: var(--ok-ink); text-decoration: none; border: 1px solid var(--ok); border-radius: var(--r-ctl); padding: var(--sp-9) var(--sp-16); }
  .lb-openbtn:hover { background: var(--ok-tint); }
  /* --- Render gallery (multi-view) --- */
  /* Give .gal a DEFINITE viewport height (panel 96vh minus the header + lb-body padding, ~84px) so the
     flex chain below resolves: gal-main then flex-fills and the doc/image can be height:100% of it. The
     old fixed `calc(96vh - 230px)` reserve budgeted for a worst-case 2-row thumbnail strip, so a typical
     one-row strip wasted ~80px — leaving a portrait spec sheet cramped. Now the document takes ALL the
     room the strip doesn't, on any screen size. */
  .gal { position: relative; width: 100%; height: calc(96vh - 84px); display: flex; flex-direction: row; gap: var(--sp-12); }
  .gal-main { position: relative; flex: 1; min-width: 0; min-height: 0; display: grid; place-items: center; }
  .gal-main img { max-width: 100%; max-height: 100%; object-fit: contain; border-radius: var(--r-chip); }
  /* Arrows live inside .gal-main so top:50% centers them on the IMAGE, not the strip below. */
  .gal-nav { position: absolute; top: 50%; transform: translateY(-50%); z-index: 2; width: 42px; height: 42px; border-radius: 50%; border: 1px solid var(--line-strong); background: color-mix(in srgb, var(--surface) 82%, transparent); -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); color: var(--ink); cursor: pointer; display: grid; place-items: center; transition: color .15s, border-color .15s; }
  .gal-nav svg { width: 20px; height: 20px; }
  /* Definite height (not 100%): a percentage height has no definite parent here, so the iframe
     would collapse to ~150px. Tie it to the viewport, minus the header + thumbnail strip chrome. */
  .gal-doc { width: 100%; height: 100%; overflow: hidden; border-radius: var(--r-chip); background: #fff; }
  .gal-doc iframe { width: 100%; height: 100%; border: 0; display: block; }
  /* Office-doc embed: crop the ~48px OneDrive bar off the top of the MS viewer. PDFs use the native viewer (no crop). */
  .gal-doc.embed iframe { height: calc(100% + 48px); margin-top: -48px; }
  .gal-nav:hover { color: var(--accent); border-color: var(--accent); }
  .gal-nav:disabled { opacity: .6; cursor: default; color: var(--ink); border-color: var(--line-strong); }
  .gal-prev { left: 6px; } .gal-next { right: 6px; }
  /* Document list down the LEFT of the viewer — each row is a small preview + the file's name (no
     extension), so it's easy to see what each document actually is. Scrolls if there are many. */
  .gal-strip { flex: none; width: 220px; display: flex; flex-direction: column; gap: var(--sp-6); overflow-y: auto; max-height: 100%; }
  /* The preview header wraps to a 2nd row (title row + buttons row) anywhere up to ~760px wide, not just on
     phones — reserve for it there. Placed AFTER the default .gal/.lb-body.doc heights so it wins the cascade
     (a media query adds no specificity, so source order decides); the old copy in the <=620px block above
     sat BEFORE the defaults and was silently overridden, leaving a ~35px bottom clip at 621–760px. */
  @media (max-width: 760px) {
    .lb-body.doc { height: calc(96vh - 120px); }
    .gal { height: calc(96vh - 128px); }
  }
  /* Short viewports: drop the lb-body 240px floor so a short panel doesn't clip the bottom. */
  @media (max-height: 560px) { .lb-body { min-height: 0; } }
  /* Narrow screens (phones): the modal is ~96vw, too tight for a side list — put it back on top as a
     horizontal scroll strip so the viewer keeps the width. */
  @media (max-width: 620px) {
    .gal { flex-direction: column; }
    .gal-strip { width: 100%; flex-direction: row; overflow-x: auto; overflow-y: hidden; max-height: none; }
    .gal-thumb { flex: 0 0 auto; max-width: 200px; }
  }
  .gal-thumb { width: 100%; display: flex; align-items: center; gap: var(--sp-8); text-align: left; border-radius: var(--r-chip); border: 1px solid var(--line); background: var(--surface); cursor: pointer; padding: var(--sp-6); }
  .gal-thumb-fig { flex: none; width: 48px; height: 36px; border-radius: 6px; overflow: hidden; background: var(--surface-2); display: grid; place-items: center; }
  .gal-thumb-fig img { width: 100%; height: 100%; object-fit: cover; display: block; }
  .gal-thumb-fig .gal-tico svg { width: 18px; height: 18px; color: var(--ink-faint); }
  .gal-thumb-name { flex: 1; min-width: 0; font-size: var(--fs-12); line-height: 1.25; color: var(--ink-soft); overflow-wrap: anywhere; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
  .gal-thumb.on .gal-thumb-name { color: var(--ink); font-weight: 600; }
  /* --- Manage Document panel (cross-product document management) --- */
  .docp[hidden] { display: none; }
  .docp { position: fixed; inset: 0; z-index: 215; display: grid; place-items: center; padding: var(--sp-20); }
  .docp-backdrop { position: absolute; inset: 0; background: rgba(8,12,20,.55); -webkit-backdrop-filter: blur(2px); backdrop-filter: blur(2px); }
  .docp-panel { position: relative; z-index: 1; width: min(680px, 95vw); max-height: 92vh; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); box-shadow: var(--shadow-hover); display: flex; flex-direction: column; overflow: hidden; animation: view-in .2s ease; }
  .docp-head { display: flex; align-items: center; gap: var(--sp-12); padding: var(--sp-14) var(--sp-16); border-bottom: 1px solid var(--line); }
  .docp-thumb { flex: none; width: 40px; height: 40px; object-fit: cover; border-radius: var(--r-chip); border: 1px solid var(--line); background: var(--surface-2); }
  .docp-hmeta { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: var(--sp-6); }
  .docp-title { font-weight: 700; color: var(--ink); overflow-wrap: anywhere; line-height: 1.25; }
  .docp-badge { align-self: flex-start; font-family: var(--font-label); font-size: var(--fs-11); line-height: 1; text-transform: uppercase; letter-spacing: .05em; color: var(--ok-ink); border: 1px solid var(--ok); border-radius: 999px; padding: 4px var(--sp-8) 2px; }
  .docp-body { flex: 1; min-height: 0; overflow-y: auto; padding: var(--sp-16); display: flex; flex-direction: column; gap: var(--sp-16); }
  .docp-sec { display: flex; flex-direction: column; gap: var(--sp-8); }
  .docp-h { font-family: var(--font-label); font-size: var(--fs-12); text-transform: uppercase; letter-spacing: .05em; color: var(--ink-soft); }
  .docp-grp { margin-bottom: var(--sp-8); }
  .docp-grp-h { font-size: var(--fs-12); color: var(--ink-faint); margin-bottom: var(--sp-4); }
  .docp-row { display: flex; align-items: center; gap: var(--sp-10); padding: var(--sp-6) var(--sp-9); border: 1px solid var(--line); border-radius: var(--r-chip); background: var(--surface); margin-bottom: var(--sp-5); }
  .docp-row.removing { opacity: .6; }
  .docp-row.removing .docp-m { text-decoration: line-through; }
  .docp-m { flex: 1; min-width: 0; color: var(--ink); overflow-wrap: anywhere; }
  .docp-x { flex: none; font-size: var(--fs-12); color: var(--ink-soft); background: none; border: 1px solid var(--line-strong); border-radius: var(--r-ctl); padding: 2px var(--sp-8); cursor: pointer; }
  .docp-x:hover { color: var(--accent); border-color: var(--accent); }
  .docp-actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-10); }
  .docp-replacing { font-size: var(--fs-13); color: var(--ink-soft); }
  .docp-replace-form { display: flex; flex-wrap: wrap; gap: var(--sp-8); width: 100%; }
  .docp-replace-url { flex: 1; min-width: 200px; font-family: var(--font-ui); font-size: var(--fs-13); border: 1px solid var(--line-strong); border-radius: var(--r-ctl); padding: var(--sp-8) var(--sp-11); background: var(--surface); color: var(--ink); }
  .docp-tree { border: 1px solid var(--line); border-radius: var(--r-chip); padding: var(--sp-10); max-height: 320px; overflow-y: auto; }
  .docp-cat-h { font-weight: 700; color: var(--ink); font-size: var(--fs-13); margin: var(--sp-6) 0 var(--sp-4); }
  .docp-fam { margin: 0 0 var(--sp-4) var(--sp-6); }
  .docp-fam > summary { cursor: pointer; color: var(--ink-soft); font-size: var(--fs-13); padding: 2px 0; }
  .docp-prod { margin: var(--sp-4) 0 var(--sp-8) var(--sp-14); }
  .docp-prod-h { font-size: var(--fs-12); color: var(--ink-faint); margin-bottom: var(--sp-4); }
  .docp-models { display: flex; flex-wrap: wrap; gap: var(--sp-6) var(--sp-14); }
  .docp-mck { display: inline-flex; align-items: center; gap: var(--sp-6); font-size: var(--fs-13); color: var(--ink); cursor: pointer; }
  .docp-mck.placed { color: var(--ink-faint); cursor: default; }
  .docp-mck em { font-style: normal; color: var(--ok-ink); font-size: var(--fs-11); }
  .docp-foot { display: flex; align-items: center; gap: var(--sp-10); padding: var(--sp-12) var(--sp-16); border-top: 1px solid var(--line); }
  .docp-summary { flex: 1; min-width: 0; font-size: var(--fs-13); color: var(--ink-soft); }
  @media (max-width: 620px) { .docp-panel { max-height: 96vh; } .docp-body { padding: var(--sp-12); } }
  /* --- Report-a-bug floating button + modal --- */
  .bug-fab { position: fixed; right: 20px; bottom: 20px; z-index: 150; width: 48px; height: 48px; border-radius: 50%; border: 1px solid var(--line-strong); background: var(--surface); color: var(--ink-soft); box-shadow: var(--shadow-hover); cursor: pointer; display: grid; place-items: center; transition: color .15s, border-color .15s, transform .15s; }
  .bug-fab:hover { color: var(--accent); border-color: var(--accent); transform: translateY(-2px); }
  .bug-fab:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
  .bug-fab svg { width: 22px; height: 22px; }
  body.pre-auth .bug-fab { display: none; }
  /* Header action button (right side of the "Find your product" title row) */
  .level-head-row { display: flex; align-items: flex-end; justify-content: space-between; gap: var(--sp-20); flex-wrap: wrap; }
  .head-actions { display: flex; gap: var(--sp-10); padding-bottom: var(--sp-4); }
  .head-btn { display: inline-flex; align-items: center; gap: var(--sp-8); font-family: var(--font-ui); font-size: var(--fs-13); font-weight: 600; color: var(--ink-soft); background: var(--surface); border: 1px solid var(--line-strong); border-radius: var(--r-ctl); padding: var(--sp-10) var(--sp-15); cursor: pointer; transition: color .15s, border-color .15s; }
  .head-btn:hover { color: var(--accent); border-color: var(--accent); }
  .head-btn svg { width: 16px; height: 16px; }
  .bugm[hidden] { display: none; }
  .bugm { position: fixed; inset: 0; z-index: 210; display: grid; place-items: center; padding: var(--sp-20); }
  .bugm-backdrop { position: absolute; inset: 0; background: rgba(8,12,20,.55); -webkit-backdrop-filter: blur(2px); backdrop-filter: blur(2px); }
  .bugm-panel { position: relative; z-index: 1; width: min(520px, 94vw); background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); box-shadow: var(--shadow-hover); overflow: hidden; animation: view-in .2s ease; }
  .bugm-head { display: flex; align-items: center; gap: var(--sp-12); padding: var(--sp-14) var(--sp-16); border-bottom: 1px solid var(--line); }
  .bugm-title { font-weight: 700; font-size: var(--fs-15); flex: 1; }
  .bugm-close { flex: none; width: 30px; height: 30px; border-radius: var(--r-ctl); border: 1px solid var(--line-strong); background: var(--surface); color: var(--ink-soft); cursor: pointer; font-size: var(--fs-13); }
  .bugm-close:hover { color: var(--accent); border-color: var(--accent); }
  .bugm-body { padding: var(--sp-16); }
  .bugm-lead { margin: 0 0 var(--sp-14); font-size: var(--fs-13-5); color: var(--ink-soft); }
  .bugm-label { display: block; font-family: var(--font-label); font-size: var(--fs-11); letter-spacing: .08em; text-transform: uppercase; color: var(--ink-faint); font-weight: 700; margin-bottom: var(--sp-6); }
  .bugm-text { width: 100%; border: 1px solid var(--line-strong); border-radius: var(--r-ctl); background: var(--bg); color: var(--ink); font-family: var(--font-ui); font-size: var(--fs-14); padding: var(--sp-10) var(--sp-12); resize: vertical; outline: none; }
  .bugm-text:focus { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-tint); }
  .bugm-text[aria-invalid="true"] { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-tint); }
  .bugm-err { margin-top: var(--sp-6); font-size: var(--fs-12-5); color: var(--accent-ink); font-weight: 600; }
  .bugm-err:empty { display: none; }
  .bugm-ctx { margin-top: var(--sp-10); font-size: var(--fs-11-5); color: var(--ink-faint); overflow-wrap: anywhere; }
  .bugm-actions { display: flex; justify-content: flex-end; gap: var(--sp-10); margin-top: var(--sp-16); }
  .bugm-cancel, .bugm-submit { font-family: var(--font-ui); font-size: var(--fs-13); font-weight: 600; border-radius: var(--r-ctl); padding: var(--sp-9) var(--sp-16); cursor: pointer; border: 1px solid var(--line-strong); }
  .bugm-cancel { background: var(--surface); color: var(--ink-soft); }
  .bugm-cancel:hover { border-color: var(--accent); color: var(--accent); }
  .bugm-submit { background: var(--ok); color: #fff; border-color: var(--ok); }
  .bugm-submit:hover { background: color-mix(in srgb, var(--ok) 90%, #000); border-color: color-mix(in srgb, var(--ok) 90%, #000); }
  .bugm-submit:disabled { opacity: .6; cursor: default; }
  /* --- Admin: bug report inbox --- */
  .adm-bughead { margin-bottom: var(--sp-12); }
  .adm-toolbar { display: flex; align-items: center; gap: var(--sp-14); flex-wrap: wrap; margin-bottom: var(--sp-16); color: var(--ink-soft); font-size: var(--fs-13); }
  .adm-list { display: flex; flex-direction: column; gap: var(--sp-12); }
  .adm-card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-card); box-shadow: var(--shadow-rest); padding: var(--sp-14) var(--sp-16); }
  .adm-top { display: flex; align-items: center; gap: var(--sp-10); flex-wrap: wrap; margin-bottom: var(--sp-8); }
  .adm-who { font-weight: 700; font-size: var(--fs-13-5); }
  .adm-when { color: var(--ink-faint); font-size: var(--fs-12); }
  .adm-desc { font-size: var(--fs-14); white-space: pre-wrap; overflow-wrap: anywhere; margin: var(--sp-6) 0 var(--sp-10); }
  .adm-meta { font-size: var(--fs-11-5); color: var(--ink-faint); overflow-wrap: anywhere; }
  .adm-meta a { color: var(--ok-ink); }
  .adm-status { margin-left: auto; }
  .adm-status select { font-family: var(--font-ui); font-size: var(--fs-12); border: 1px solid var(--line-strong); border-radius: var(--r-ctl); padding: var(--sp-5) var(--sp-8); background: var(--surface); color: var(--ink); cursor: pointer; }
  .adm-status select:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
  .adm-badge { font-family: var(--font-label); font-size: var(--fs-9-5); letter-spacing: .06em; text-transform: uppercase; font-weight: 700; padding: var(--sp-3) var(--sp-8); border-radius: var(--r-pill); white-space: nowrap; }
  .adm-badge.new { background: var(--ok-tint); color: var(--ok-ink); }
  .adm-badge.in_progress { background: var(--pending-tint); color: var(--pending); }
  .adm-badge.resolved { background: var(--ok-tint); color: var(--ok-ink); }
  .adm-badge.wont_fix { background: var(--surface-2); color: var(--ink-faint); }
  .adm-del { font-family: var(--font-label); font-size: var(--fs-9-5); letter-spacing: .04em; text-transform: uppercase; font-weight: 700; color: var(--ink-faint); background: transparent; border: 1px solid var(--line-strong); border-radius: var(--r-pill); padding: var(--sp-3) var(--sp-8); cursor: pointer; white-space: nowrap; transition: color .15s, border-color .15s, background .15s; }
  .adm-del:hover { color: var(--accent); border-color: var(--accent); }
  .adm-del.armed { color: #fff; background: var(--accent); border-color: var(--accent); }
  .adm-del:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
  .adm-empty { padding: var(--sp-40); text-align: center; color: var(--ink-faint); }
  .gal-thumb:hover { border-color: var(--line-strong); }
  .gal-thumb.on { border-color: var(--ok); }

  /* --- utility classes: moved off inline style="" attributes so the CSP style-src can drop 'unsafe-inline' --- */
  .sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .vtab-pm-hidden { display: none; }
  .view-note { padding: 22px 4px; font-size: var(--fs-14); color: var(--ink-faint); }
  .view-note.note-strong { color: var(--ink-soft); }
  .sk-row-col { flex-direction: column; }
  .wire-open-static { cursor: default; }