/* PRECISE-WORKBENCH-UI-1 — app.css */
:root {
  color-scheme: light;
  --bg: #ffffff;
  --surface: #f6f7f9;
  --surface-2: #eef1f6;
  --fg: #16181d;
  --muted: #5a6270;
  --border: #d9dde3;
  --border-subtle: #ebedf1;
  --accent: #1a4ea8;
  --accent-fg: #ffffff;
  --good: #1f7a3a;
  --warn: #b58000;
  --bad: #a32020;
  --row-hover: #eef3fb;
  --flag-bg: #fef0e6;
  --shadow: 0 1px 2px rgba(16,24,40,.05), 0 1px 3px rgba(16,24,40,.08);
  --radius: 7px;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme]) {
    color-scheme: dark;
    --bg: #0f1115; --surface: #161a22; --surface-2: #1e2330;
    --fg: #e7eaf0; --muted: #9aa3b2; --border: #2b3140; --border-subtle: #232a37;
    --accent: #6aa3ff; --accent-fg: #0b1220;
    --good: #4ccb78; --warn: #e3b341; --bad: #f2776f;
    --row-hover: #1b2433; --flag-bg: #3a2a1d;
    --shadow: 0 1px 2px rgba(0,0,0,.5);
  }
}
[data-theme="dark"] {
  color-scheme: dark;
  --bg: #0f1115; --surface: #161a22; --surface-2: #1e2330;
  --fg: #e7eaf0; --muted: #9aa3b2; --border: #2b3140; --border-subtle: #232a37;
  --accent: #6aa3ff; --accent-fg: #0b1220;
  --good: #4ccb78; --warn: #e3b341; --bad: #f2776f;
  --row-hover: #1b2433; --flag-bg: #3a2a1d;
  --shadow: 0 1px 2px rgba(0,0,0,.5);
}
body { transition: background-color .15s ease, color .15s ease; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 3px; }
@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; animation: none !important; scroll-behavior: auto !important; }
}

/* Wave 4 — provenance footer line inside a methodology box: the source gate
   + "as of" date, set apart from the prose above it. */
.methodology-box .prov {
  margin-top: 6px; padding-top: 5px;
  border-top: 1px solid var(--border-subtle);
  color: var(--muted); font-size: 11px;
}

/* Wave 4 — print / PDF-clean single-part view. Collapse every navigation
   surface and lay the open part out full-width on white, with all methodology
   + provenance boxes expanded so the printed evidence still carries its
   sources. Force the light palette so a dark-mode reviewer still prints clean. */
@media print {
  :root, :root:not([data-theme]), [data-theme="dark"] {
    color-scheme: light;
    --bg: #ffffff; --surface: #ffffff; --surface-2: #ffffff; --fg: #000000;
    --muted: #333333; --border: #999999; --border-subtle: #cccccc;
    --accent: #00357a; --accent-fg: #ffffff; --row-hover: #ffffff;
    --good: #0a6b2e; --bad: #9a1414;
  }
  body { background: #fff; color: #000; font-size: 11pt; }
  header, #filter-rail, #search-bar, #results-pane, footer,
  .methodology-btn, .wide-btn, .overview-back, .export-btn, #cmd-overlay,
  .compare-toggle, .compare-unpin, .exception-seeall, .worklist-bar {
    display: none !important;
  }
  #layout, main { display: block; height: auto; overflow: visible; }
  #detail-pane, #detail { overflow: visible; height: auto; max-width: 100%; }
  .methodology-box { display: block !important; border-color: #ccc; }
  /* R22: print every parent-kit breakdown, open or collapsed on screen. */
  .fg-kit > table { display: table !important; }
  /* R25: print the inventory cost breakdowns even if collapsed on screen. */
  .inv-grid [data-grp] { display: block !important; }
  #detail h2, #detail h3 { break-after: avoid; color: #000; }
  .kv-grid, table, .stat-tiles, .cost-bar, .cat-chart, tr {
    break-inside: avoid;
  }
  .stat-tile { border: 1px solid #999; }
  a { color: #000; text-decoration: underline; }
}
* { box-sizing: border-box; }
body {
  margin: 0;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  font-size: 14px;
  color: var(--fg);
  background: var(--bg);
}
header {
  padding: 12px 20px;
  border-bottom: 1px solid var(--border);
  display: flex;
  align-items: baseline;
  gap: 20px;
}
header h1 { margin: 0; font-size: 18px; }
#meta-info { color: var(--muted); font-size: 12px; }
#layout {
  display: grid;
  grid-template-columns: 260px 1fr;
  min-height: calc(100vh - 90px);
}
#filter-rail {
  border-right: 1px solid var(--border);
  padding: 12px 14px;
  background: var(--surface);
  overflow-y: auto;
}
#filter-rail h2 {
  font-size: 13px; margin: 0 0 12px 0;
  text-transform: uppercase; color: var(--muted);
}
/* R41: role / person lens selector in the header. */
/* R45: persistent primary-view nav (Overview / Answers / Review queues),
   so the two palette-only destinations are discoverable without Ctrl-K. */
#view-nav { display: flex; gap: 6px; margin: 6px 0 2px; flex-wrap: wrap; }
.nav-btn {
  font: inherit; font-size: 13px; padding: 4px 12px; border-radius: 6px;
  background: var(--surface-2); border: 1px solid var(--border);
  color: var(--muted); cursor: pointer;
}
.nav-btn:hover { color: var(--fg); border-color: var(--accent); }
.nav-btn.is-active {
  background: var(--accent); color: var(--accent-fg); border-color: var(--accent);
}
.admin-file { font: inherit; font-size: 12px; }
#role-bar { margin: 8px 0 2px; }
.role-btns { display: flex; gap: 10px; flex-wrap: wrap; }
.role-btn {
  display: flex; flex-direction: column; align-items: center; gap: 3px;
  background: none; border: none; cursor: pointer; padding: 0; width: 58px;
  font: inherit; color: var(--muted);
}
.role-circle {
  width: 40px; height: 40px; border-radius: 50%; display: flex;
  align-items: center; justify-content: center; font-size: 12px;
  font-weight: 600; background: var(--surface-2); border: 1px solid var(--border);
}
.role-btn:hover .role-circle { border-color: var(--accent); color: var(--fg); }
.role-btn.is-active { color: var(--accent); }
.role-btn.is-active .role-circle {
  background: var(--accent); color: var(--accent-fg); border-color: var(--accent);
}
.role-label { font-size: 11px; line-height: 1.1; text-align: center; }
.role-people { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 8px; }
.person-chip {
  font: inherit; font-size: 12px; padding: 3px 10px; border-radius: 12px;
  background: var(--surface-2); border: 1px solid var(--border);
  color: var(--muted); cursor: pointer;
}
.person-chip:hover { color: var(--fg); border-color: var(--accent); }
.person-chip.is-active {
  background: var(--accent); color: var(--accent-fg); border-color: var(--accent);
}
/* R42/R43: lens wrappers for the role content lens — transparent to layout
   (display:contents) until a role hides them with display:none. */
.detail-section, .lens-ov { display: contents; }
.filter-group { margin-bottom: 16px; }
.filter-group h3 { font-size: 12px; margin: 0 0 6px 0; color: var(--muted); }
.filter-chip { display: block; font-size: 13px; padding: 2px 0; cursor: pointer; }
.filter-chip input { margin-right: 6px; }
.filter-chip .chip-count { color: var(--muted); font-size: 11px; margin-left: 4px; }
/* R8 — Category via parents drill-down: a collapsible section header
   (layer 1) over per-category collapsible part-type sublists (layer 2). */
.fg-toggle {
  display: flex; align-items: center; gap: 4px; width: 100%;
  margin: 0 0 6px 0; padding: 0; background: none; border: 0;
  font: inherit; font-size: 12px; color: var(--muted);
  text-align: left; cursor: pointer;
}
.fg-toggle:hover { color: var(--fg); }
.fg-caret { width: 10px; font-size: 9px; display: inline-block; }
.cat-tree.collapsed { display: none; }
/* R35: every rail filter group is collapsible (header toggles its chips). */
.fg-chips.collapsed { display: none; }
/* R10: parent super-category layer above the category nodes. */
.parent-node { margin-bottom: 1px; }
.parent-head { display: flex; align-items: center; gap: 2px; }
.parent-chip { font-weight: 600; }
.parent-sublist { margin: 1px 0 3px 14px; }
.parent-sublist.collapsed { display: none; }
.cat-node { margin-bottom: 1px; }
.cat-head { display: flex; align-items: center; gap: 2px; }
.cat-caret, .cat-caret-spacer, .parent-caret {
  flex: 0 0 14px; width: 14px; height: 18px; padding: 0; line-height: 18px;
  font-size: 9px; text-align: center; color: var(--muted);
  background: none; border: 0; cursor: pointer;
}
.cat-caret:hover, .parent-caret:hover { color: var(--accent); }
.cat-head .filter-chip, .parent-head .filter-chip { flex: 1 1 auto; }
.pt-sublist { margin: 1px 0 4px 20px; }
.pt-sublist.collapsed { display: none; }
.pt-chip { color: var(--muted); }
.pt-chip:hover { color: var(--fg); }
main { display: flex; flex-direction: column; min-width: 0; }
#search-bar {
  padding: 10px 16px;
  border-bottom: 1px solid var(--border);
  display: flex; gap: 12px; align-items: center;
  /* R17: wrap the controls onto a second row instead of squishing the
     result-count into a vertical sliver when the bar is narrow. */
  flex-wrap: wrap; row-gap: 8px;
}
#q {
  flex: 1 1 200px; padding: 6px 10px; font-size: 14px;
  border: 1px solid var(--border); border-radius: 3px;
}
#sort {
  padding: 6px 8px; font-size: 13px; color: var(--fg);
  border: 1px solid var(--border); border-radius: 3px; background: var(--bg);
}
#result-count { color: var(--muted); font-size: 12px; white-space: nowrap; }
.export-btn {
  margin-left: auto; padding: 6px 12px; font-size: 12px;
  color: var(--fg); background: var(--bg); cursor: pointer;
  border: 1px solid var(--border); border-radius: 3px; white-space: nowrap;
}
.export-btn:hover:not(:disabled) { border-color: var(--accent); }
.export-btn:disabled { opacity: 0.4; cursor: default; }
#results-pane {
  /* R15: taller default than the old 240px cramp, and drag-to-resize so a
     reviewer working an 8k exception list can open up the list. */
  height: 40vh;
  min-height: 160px;
  max-height: 72vh;
  overflow-y: auto;
  border-bottom: 1px solid var(--border);
  resize: vertical;
}
#results { margin: 0; padding: 0; list-style: none; }
.result-row {
  padding: 6px 16px;
  border-bottom: 1px solid var(--border-subtle);
  display: grid;
  grid-template-columns: 140px 1fr 90px 70px 80px 110px;
  gap: 12px;
  cursor: pointer;
  font-size: 13px;
}
.result-row:hover { background: var(--row-hover); }
.result-row.selected { background: var(--row-hover); border-left: 3px solid var(--accent); }
.result-row .col-item { font-family: ui-monospace, Menlo, Consolas, monospace; }
.result-row .col-desc {
  color: var(--muted); overflow: hidden;
  text-overflow: ellipsis; white-space: nowrap;
}
.result-row .col-metric {
  text-align: right; color: var(--muted);
  font-family: ui-monospace, Menlo, Consolas, monospace;
  font-variant-numeric: tabular-nums;
}
/* R7: sortable actual-financials results table (internal/customer). The
   header is sticky and shares the row grid; suppliers fall back to the
   classic .result-row grid above (no .results-financial class). */
#results.results-financial .result-row,
#results.results-financial .results-head {
  grid-template-columns: minmax(130px, 1.4fr) 64px 96px 96px 72px;
}
.results-head {
  display: grid; gap: 12px; padding: 6px 16px;
  position: sticky; top: 0; z-index: 1;
  background: var(--bg); border-bottom: 1px solid var(--border);
}
.results-head .col-head {
  background: none; border: 0; padding: 0; cursor: pointer;
  font: inherit; font-size: 11px; font-weight: 600; color: var(--muted);
  text-transform: uppercase; letter-spacing: 0.02em; text-align: left;
}
.results-head .col-head:hover { color: var(--fg); }
.results-head .col-head.col-num { text-align: right; }
.results-financial .result-row .col-label {
  display: flex; flex-direction: column; min-width: 0;
}
.results-financial .result-row .col-label .col-desc { font-size: 11px; }
.results-financial .result-row .col-num {
  text-align: right;
  font-family: ui-monospace, Menlo, Consolas, monospace;
  font-variant-numeric: tabular-nums;
}
#detail-pane { padding: 16px 20px; flex: 1; overflow-y: auto; }
#detail h2 { font-size: 16px; margin: 0 0 4px 0; }
#detail h3 {
  font-size: 13px; margin: 16px 0 6px 0;
  color: var(--muted); text-transform: uppercase;
}
.detail-meta { color: var(--muted); font-size: 12px; margin-bottom: 4px; }
.cust-total-row td { font-weight: 600; border-top: 2px solid var(--border); }
.cust-grand-total { font-weight: 600; color: var(--fg); margin: 6px 0 12px; }
.detail-legend {
  color: var(--muted);
  font-size: 11px;
  font-style: italic;
  margin-bottom: 12px;
  padding: 4px 8px;
  background: var(--surface);
  border-left: 2px solid var(--border);
}
.kv-grid {
  display: grid;
  grid-template-columns: 200px 1fr;
  gap: 4px 16px;
  font-size: 13px;
}
.kv-grid .k { color: var(--muted); }
.kv-grid .v { font-family: ui-monospace, Menlo, Consolas, monospace; }
/* R25: collapsible cost breakdowns in the inventory section. */
.kv-toggle { cursor: pointer; user-select: none; }
.kv-toggle:hover { color: var(--fg); }
.kv-marker { font-size: 9px; color: var(--muted); }
.kv-sub { padding-left: 16px; }
.cell-good { color: var(--good); }
.cell-warn { color: var(--warn); }
.cell-bad  { color: var(--bad); }
footer {
  padding: 8px 20px;
  border-top: 1px solid var(--border);
  display: flex; gap: 16px; font-size: 12px; color: var(--muted);
}
footer a { color: var(--accent); text-decoration: none; }
footer a:hover { text-decoration: underline; }
.posture-info { color: var(--muted); cursor: help; }
@media (max-width: 900px) {
  #layout { grid-template-columns: 1fr; }
  #filter-rail { border-right: none; border-bottom: 1px solid var(--border); }
  .result-row { grid-template-columns: 1fr 1fr; }
}
.methodology-btn {
  display: inline-block;
  margin-left: 6px;
  width: 16px;
  height: 16px;
  line-height: 14px;
  text-align: center;
  font-size: 11px;
  border: 1px solid var(--accent);
  border-radius: 50%;
  color: var(--accent);
  cursor: pointer;
  user-select: none;
}
.methodology-btn:hover { background: var(--accent); color: var(--accent-fg); }
.methodology-box {
  display: none;
  margin: 8px 0 12px 0;
  padding: 10px 14px;
  background: var(--surface-2);
  border-left: 3px solid var(--accent);
  font-size: 12px;
  line-height: 1.5;
  color: var(--fg);
}
.methodology-box.expanded { display: block; }
.methodology-box .step { margin: 4px 0; }
.methodology-btn.wide-btn { width: auto; height: auto; border-radius: 8px; padding: 1px 7px; }
.cov-grid { display: grid; grid-template-columns: 1fr auto auto; gap: 2px 14px; font-size: 12px; }
.cov-grid .cov-have { font-variant-numeric: tabular-nums; text-align: right; }
.cov-grid .cov-pct { font-variant-numeric: tabular-nums; text-align: right; color: var(--muted); }
.cov-grid .cov-hd { font-weight: 600; color: var(--muted); }
table { border-collapse: collapse; margin-top: 6px; }
table th, table td {
  border-bottom: 1px solid var(--border-subtle);
  padding: 4px 10px;
  text-align: left;
  font-size: 12px;
}
table th { color: var(--muted); font-weight: 600; }
.flag-chip-list {
  list-style: none;
  padding: 0;
  margin: 8px 0 4px 0;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.flag-chip {
  display: inline-block;
  padding: 3px 9px;
  background: var(--flag-bg);
  border: 1px solid var(--warn);
  border-radius: 10px;
  font-size: 11px;
  font-family: ui-monospace, Menlo, Consolas, monospace;
  color: var(--fg);
}
/* R0 — flag chips that carry an explanation expand to a full-width row. */
.flag-chip-expl {
  flex-basis: 100%; display: block; border-radius: 8px; padding: 6px 10px;
}
.flag-chip-expl > summary {
  cursor: pointer; font-family: ui-monospace, Menlo, Consolas, monospace;
}
.flag-meaning { margin: 5px 0 2px; font-size: 12px; color: var(--fg); }
.flag-cc-label { font-size: 11px; color: var(--muted); margin-top: 4px; }
.flag-cc {
  margin: 2px 0 0 16px; padding: 0; font-size: 11px; color: var(--muted);
}
/* R3 — Answers layer: hero chips on the overview + the answers index. */
.answers-hero { margin: 4px 0 14px 0; }
.answers-hero-label {
  font-size: 11px; text-transform: uppercase; letter-spacing: .06em;
  color: var(--muted); margin-bottom: 6px;
}
.answers-hero-row { display: flex; flex-wrap: wrap; gap: 6px; }
.answer-chip {
  font: inherit; font-size: 12px; padding: 5px 11px; cursor: pointer;
  background: var(--surface); color: var(--fg);
  border: 1px solid var(--border); border-radius: 999px;
}
.answer-chip:hover { background: var(--row-hover); border-color: var(--accent); }
.answer-chip-more { border-style: dashed; color: var(--muted); }
.answers-grid {
  display: grid; gap: 10px; margin: 10px 0 18px 0;
  grid-template-columns: repeat(auto-fill, minmax(290px, 1fr));
}
.answer-card {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius); padding: 12px 14px; box-shadow: var(--shadow);
  display: flex; flex-direction: column; gap: 6px;
}
.answer-card h3 { margin: 0; font-size: 13.5px; line-height: 1.35; }
.answer-with { font-size: 12px; color: var(--muted); }
.answer-src {
  font-size: 11px; color: var(--muted);
  font-family: ui-monospace, Menlo, Consolas, monospace;
}
.answer-cc {
  font-size: 11.5px; color: var(--muted); border-left: 3px solid var(--warn);
  padding-left: 8px;
}
.answer-open {
  font: inherit; font-size: 12px; align-self: flex-start; cursor: pointer;
  margin-top: 2px; padding: 4px 10px; border-radius: 6px;
  background: var(--accent); color: var(--accent-fg); border: 1px solid var(--accent);
}
.cannot-answer-card { border-left: 3px solid var(--bad); }
/* R3 — review queues hub. */
.queue-cc { margin: 8px 0 12px 0; display: flex; flex-direction: column; gap: 4px; }
.queue-table {
  width: 100%; border-collapse: collapse; font-size: 12.5px; margin: 10px 0;
}
.queue-table th {
  text-align: left; font-size: 11px; text-transform: uppercase;
  letter-spacing: .05em; color: var(--muted); padding: 6px 8px;
  border-bottom: 1px solid var(--border);
}
.queue-table td {
  padding: 6px 8px; border-bottom: 1px solid var(--border-subtle);
}
.queue-row-link { cursor: pointer; }
.queue-row-link:hover td { background: var(--row-hover); }
.queue-table .tone-warn { color: var(--warn); font-weight: 600; }
.queue-table .tone-bad { color: var(--bad); font-weight: 600; }
.queue-hist { margin: 10px 0 4px 0; display: flex; flex-direction: column; gap: 3px; }
.queue-hist-row { display: flex; align-items: center; gap: 8px; font-size: 11.5px; }
.queue-hist-label {
  width: 64px; color: var(--muted);
  font-family: ui-monospace, Menlo, Consolas, monospace;
}
.queue-hist-bar {
  display: inline-block; height: 10px; border-radius: 3px;
  background: var(--accent); opacity: .75;
}
.queue-hist-count { color: var(--muted); }
/* R3 — guided walkthrough overlay. */
.tour-card {
  position: fixed; right: 18px; bottom: 18px; z-index: 60;
  width: min(420px, calc(100vw - 36px));
  background: var(--surface); color: var(--fg);
  border: 1px solid var(--border); border-radius: 10px;
  box-shadow: 0 8px 28px rgba(0,0,0,.25); padding: 14px 16px;
  display: flex; flex-direction: column; gap: 8px;
}
.tour-head { display: flex; justify-content: space-between; align-items: baseline; }
.tour-count { font-size: 11px; color: var(--muted); }
.tour-caption { font-size: 13px; line-height: 1.45; }
.tour-talk {
  font-size: 12px; color: var(--muted); font-style: italic;
  border-left: 3px solid var(--accent); padding-left: 8px;
}
.tour-dots { display: flex; gap: 4px; }
.tour-dot {
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--border); display: inline-block;
}
.tour-dot-on { background: var(--accent); }
.tour-actions { display: flex; gap: 8px; justify-content: flex-end; }
.tour-actions button {
  font: inherit; font-size: 12px; padding: 4px 12px; cursor: pointer;
  border-radius: 6px; border: 1px solid var(--border);
  background: var(--surface-2); color: var(--fg);
}
.tour-actions button:disabled { opacity: .45; cursor: default; }
.tour-actions .tour-next {
  background: var(--accent); color: var(--accent-fg); border-color: var(--accent);
}
@media print { .tour-card { display: none; } }
.kv-grid .mono {
  font-family: ui-monospace, Menlo, Consolas, monospace;
  font-size: 11px; word-break: break-all;
}
/* R3.1 — P0 polish: section TOC, feedback, aligned numerals, sortable th. */
.section-toc {
  position: sticky; top: 0; z-index: 5;
  display: flex; flex-wrap: wrap; gap: 5px;
  padding: 8px 0; margin: 4px 0 10px 0;
  background: var(--bg);
  border-bottom: 1px solid var(--border-subtle);
}
.toc-chip {
  font: inherit; font-size: 11px; padding: 3px 9px; cursor: pointer;
  background: var(--surface); color: var(--muted);
  border: 1px solid var(--border); border-radius: 999px;
}
.toc-chip:hover { color: var(--fg); border-color: var(--accent); }
.loading-note {
  padding: 28px 0; color: var(--muted); font-size: 13px;
}
.toast {
  position: fixed; left: 50%; bottom: 26px; transform: translateX(-50%);
  z-index: 70; padding: 8px 16px; border-radius: 8px; font-size: 12.5px;
  background: var(--fg); color: var(--bg);
  box-shadow: 0 6px 20px rgba(0,0,0,.3);
}
.sortable-th { cursor: pointer; user-select: none; }
.sortable-th:hover { color: var(--fg); }
.sortable-th[aria-sort="descending"]::after { content: " \2193"; }
.sortable-th[aria-sort="ascending"]::after { content: " \2191"; }
/* Financial columns align on tabular figures everywhere numbers stack. */
.queue-table td, .kv-grid .v, .stat-val, .leaderboard, .compare-table td,
.answers-grid, .result-row {
  font-variant-numeric: tabular-nums;
}
@media print { .section-toc, .toast { display: none; } }
/* R3.2 — answer headlines + compact density. */
.answer-chip-val {
  display: block; font-size: 11px; font-weight: 600; margin-top: 2px;
  color: var(--accent); font-variant-numeric: tabular-nums;
}
.answer-chip { text-align: left; }
.answer-val {
  font-size: 17px; font-weight: 650; letter-spacing: -0.01em;
  font-variant-numeric: tabular-nums;
}
[data-density="compact"] .queue-table td { padding: 3px 6px; font-size: 11.5px; }
[data-density="compact"] .queue-table th { padding: 4px 6px; }
[data-density="compact"] .answer-card { padding: 8px 10px; gap: 4px; }
[data-density="compact"] .answers-grid {
  gap: 6px; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
}
[data-density="compact"] .stat-tile { padding: 5px 9px; }
[data-density="compact"] .stat-val { font-size: 15px; }
[data-density="compact"] #detail { font-size: 12.5px; }
[data-density="compact"] .result-row { padding-top: 3px; padding-bottom: 3px; }
[data-density="compact"] .kv-grid { row-gap: 2px; }
/* Wave 1b — stat-tile detail header + inline-SVG cost-decomposition bar. */
.stat-tiles { display: flex; flex-wrap: wrap; gap: 8px; margin: 10px 0 14px 0; }
.stat-tile {
  flex: 1 1 110px; min-width: 100px; padding: 8px 12px;
  background: var(--surface); border: 1px solid var(--border-subtle);
  border-radius: var(--radius); box-shadow: var(--shadow);
}
.stat-tile .stat-val {
  font-size: 17px; font-weight: 600; font-variant-numeric: tabular-nums;
  font-family: ui-monospace, Menlo, Consolas, monospace;
}
.stat-tile .stat-key {
  font-size: 11px; color: var(--muted); text-transform: uppercase;
  letter-spacing: .03em; margin-top: 2px;
}
.stat-tile.tone-good .stat-val { color: var(--good); }
.stat-tile.tone-bad .stat-val { color: var(--bad); }
.cost-bar { display: block; margin: 4px 0; border-radius: 4px; overflow: hidden; }
.cost-bar rect { stroke: var(--bg); stroke-width: 1; }
.cost-bar .seg-material { fill: var(--accent); }
.cost-bar .seg-tariff   { fill: var(--bad); }
.cost-bar .seg-freight  { fill: var(--warn); }
.cost-bar .seg-burden   { fill: var(--muted); }
.cost-bar-legend {
  display: flex; flex-wrap: wrap; gap: 10px; font-size: 11px;
  color: var(--muted); margin-bottom: 8px;
}
.cost-bar-legend .legend-swatch {
  display: inline-block; width: 9px; height: 9px; border-radius: 2px;
  margin-right: 4px; vertical-align: middle;
}
.legend-swatch.seg-material { background: var(--accent); }
.legend-swatch.seg-tariff   { background: var(--bad); }
.legend-swatch.seg-freight  { background: var(--warn); }
.legend-swatch.seg-burden   { background: var(--muted); }
/* Wave 5 — tariff-exposure meter: tariff $ as a share of inventory value. */
.tariff-meter { margin: 8px 0 16px; }
.tariff-meter-cap { font-size: 12px; color: var(--fg); margin-bottom: 4px; }
.tariff-meter-svg { display: block; max-width: 100%; }
.tariff-meter-sub { font-size: 11px; color: var(--muted); margin-top: 3px; }
.tariff-meter .meter-track { fill: var(--surface-2); }
.tariff-meter .meter-fill { fill: var(--bad); }
/* R9 — portfolio FY127 monthly sales sparkline (overview). */
.sales-spark { display: block; margin: 4px 0 6px; max-width: 100%; }
.sales-spark .spark-area { fill: var(--accent); opacity: 0.13; }
.sales-spark .spark-line { stroke: var(--accent); stroke-width: 1.5; }
.sales-spark .spark-dot { fill: var(--accent); }
.sales-spark .spark-xlabel { fill: var(--muted); font-size: 10px; }
/* Wave 5 — Ctrl/Cmd-K command palette overlay + its search-bar hint button. */
.cmd-open-btn {
  padding: 5px 9px; font-size: 11px; color: var(--muted);
  background: var(--bg); border: 1px solid var(--border);
  border-radius: 4px; cursor: pointer; white-space: nowrap;
  font-family: ui-monospace, Menlo, Consolas, monospace;
}
.cmd-open-btn:hover { border-color: var(--accent); color: var(--fg); }
#cmd-overlay {
  display: none; position: fixed; inset: 0; z-index: 100;
  background: rgba(0, 0, 0, 0.45);
  align-items: flex-start; justify-content: center;
}
#cmd-overlay.open { display: flex; }
#cmd-box {
  margin-top: 12vh; width: min(560px, 92vw);
  background: var(--surface); border: 1px solid var(--border);
  border-radius: 10px; box-shadow: 0 16px 48px rgba(0, 0, 0, 0.4);
  overflow: hidden;
}
#cmd-input {
  width: 100%; box-sizing: border-box; border: 0;
  border-bottom: 1px solid var(--border); background: var(--bg);
  color: var(--fg); font-size: 15px; padding: 12px 14px; outline: none;
}
#cmd-list {
  list-style: none; margin: 0; padding: 4px;
  max-height: 50vh; overflow-y: auto;
}
.cmd-item {
  display: flex; align-items: baseline; gap: 10px;
  padding: 8px 10px; border-radius: 6px; cursor: pointer;
}
.cmd-item.active { background: var(--row-hover); }
.cmd-item-label { color: var(--fg); font-size: 13px; white-space: nowrap; }
.cmd-item-hint {
  color: var(--muted); font-size: 11px; overflow: hidden;
  text-overflow: ellipsis; white-space: nowrap;
}
/* Wave 5c — multi-part compare: pin toggle + side-by-side table. */
.compare-toggle {
  margin: 2px 0 10px; padding: 4px 10px; font-size: 12px;
  color: var(--fg); background: var(--bg);
  border: 1px solid var(--border); border-radius: 4px; cursor: pointer;
}
.compare-toggle.on { border-color: var(--accent); color: var(--accent); }
/* R16: persistent worklist — pin toggle reuses .compare-toggle; list toolbar. */
.worklist-toggle { margin-left: 6px; }
.worklist-bar { display: flex; flex-wrap: wrap; gap: 8px; margin: 8px 0 14px; }
.worklist-table .lb-item, .worklist-table .lb-desc { cursor: pointer; }
.compare-table {
  border-collapse: collapse; width: 100%; margin: 8px 0 16px;
}
.compare-table th, .compare-table td {
  border: 1px solid var(--border-subtle); padding: 6px 10px;
  font-size: 13px; text-align: left; vertical-align: top;
}
.compare-table thead th { background: var(--surface-2); }
.compare-table tbody th {
  color: var(--muted); font-weight: 500; white-space: nowrap;
}
.compare-table td { font-variant-numeric: tabular-nums; }
.compare-item-link {
  color: var(--accent); text-decoration: none;
  font-family: ui-monospace, Menlo, Consolas, monospace;
}
.compare-unpin {
  margin-left: 6px; border: 0; background: transparent;
  color: var(--muted); cursor: pointer; font-size: 14px; line-height: 1;
}
.compare-unpin:hover { color: var(--bad); }
/* Wave 3 — portfolio overview: category bar chart + leaderboards. */
.cat-chart { display: block; margin: 4px 0 14px; max-width: 100%; }
.cat-chart .cat-label { fill: var(--fg); font-size: 11px; }
.cat-chart .cat-val { fill: var(--muted); font-size: 11px; }
.cat-chart .cat-track { fill: var(--surface-2); }
.cat-chart .cat-fill { fill: var(--accent); }
.leaderboard { width: 100%; margin-bottom: 14px; }
/* R11: manage-by-exception heading — flags the "needs attention" block. */
.exceptions-head { color: var(--warn); border-top: 1px solid var(--border);
  padding-top: 10px; margin-top: 14px; }
/* R13: "See all" drill button under each exception teaser. */
.exception-seeall {
  display: inline-block; margin: 2px 0 16px; padding: 4px 11px;
  font: inherit; font-size: 12px; font-weight: 600; color: var(--accent);
  background: transparent; border: 1px solid var(--border);
  border-radius: 6px; cursor: pointer;
}
.exception-seeall:hover { border-color: var(--accent); background: var(--surface-2); }
/* R13: removable chip in the search bar for the active exception drill. */
.exception-chip {
  display: inline-flex; align-items: center; margin-left: 8px;
  padding: 3px 11px; font: inherit; font-size: 12px; font-weight: 600;
  color: var(--warn); background: var(--surface);
  border: 1px solid var(--warn); border-radius: 999px; cursor: pointer;
  white-space: nowrap;
}
.exception-chip:hover { background: var(--surface-2); }
/* R17: the class sets display:inline-flex, which overrode the [hidden] hide. */
.exception-chip[hidden] { display: none; }
/* R14: combined-risk flag badges in the priority lead list. */
.leaderboard .lb-flags { white-space: normal; line-height: 1.7; }
.risk-flag {
  display: inline-block; margin: 1px 4px 1px 0; padding: 1px 7px;
  font-size: 10.5px; font-weight: 600; border-radius: 999px;
  color: var(--warn); border: 1px solid var(--warn); background: var(--surface);
}
.risk-flag-bad { color: var(--bad); border-color: var(--bad); }
/* R11: part health scorecard pills (detail header). */
.scorecard { display: flex; flex-wrap: wrap; gap: 6px; margin: 8px 0 4px; }
.scorecard .pill {
  font-size: 12px; padding: 3px 10px; border-radius: 999px;
  border: 1px solid var(--border); background: var(--surface); color: var(--fg);
}
.scorecard .pill-good { border-color: var(--good); color: var(--good); }
.scorecard .pill-warn { border-color: var(--warn); color: var(--warn); }
.scorecard .pill-bad { border-color: var(--bad); color: var(--bad); }
.scorecard .pill-muted { color: var(--muted); }
.leaderboard .lb-row { cursor: pointer; }
.leaderboard .lb-row:hover { background: var(--row-hover); }
.leaderboard .lb-item { font-family: ui-monospace, Menlo, Consolas, monospace; }
.leaderboard .lb-desc { color: var(--muted); }
.leaderboard .lb-val {
  text-align: right; font-variant-numeric: tabular-nums;
  font-family: ui-monospace, Menlo, Consolas, monospace;
}
/* R19: sales-share + cumulative cell on the Top sellers leaderboard. */
.leaderboard .lb-share {
  text-align: right; color: var(--muted); font-size: 12px;
  white-space: nowrap; padding-left: 14px;
  font-variant-numeric: tabular-nums;
}
.overview-back {
  display: inline-block; margin-bottom: 8px; color: var(--accent);
  text-decoration: none; font-size: 12px; cursor: pointer;
}
.overview-back:hover { text-decoration: underline; }
/* R20: clickable FG number on a part detail (search -> the FG's members). */
.fg-search-link {
  font: inherit; color: var(--accent); background: none; border: none;
  padding: 0; cursor: pointer; text-decoration: underline;
  text-underline-offset: 2px;
}
.fg-search-link:hover { color: var(--fg); }
/* R22: collapsible per-kit customer breakdown (Top customers by parent FG). */
.fg-kit { margin: 6px 0; border: 1px solid var(--border-subtle); border-radius: 5px; }
.fg-kit-summary {
  cursor: pointer; padding: 7px 10px; font-size: 12px; color: var(--muted);
  user-select: none;
}
.fg-kit-summary:hover { background: var(--surface-2); }
.fg-kit[open] > .fg-kit-summary { border-bottom: 1px solid var(--border-subtle); }
.fg-kit > table { margin: 0; }
/* R23/R24: per-kit Budget|Actual metrics CELL table + the FCS1 sub-heading. */
.kit-metrics-table { margin: 4px 10px 10px; border-collapse: collapse; font-size: 12px; }
.kit-metrics-table th {
  padding: 2px 18px 4px 0; text-align: right;
  color: var(--muted); font-weight: 600;
}
.kit-metrics-table th:first-child { text-align: left; }
.kit-metrics-table td {
  padding: 2px 18px 2px 0; text-align: right;
  font-variant-numeric: tabular-nums;
}
.kit-metrics-table td.kmt-label { text-align: left; color: var(--muted); }
.kit-totals { margin-bottom: 12px; }
.fg-kit-subhead { padding: 2px 10px; font-weight: 600; color: var(--fg); }
/* R31: catalog-interchange cross-reference table (8-prefix parts). */
.interchange-table { margin: 4px 10px 10px; border-collapse: collapse; font-size: 12px; }
.interchange-table th {
  text-align: left; padding: 2px 18px 4px 0; color: var(--muted);
  font-weight: 600; border-bottom: 1px solid var(--border-subtle);
}
.interchange-table td {
  padding: 2px 18px 2px 0; text-align: left; vertical-align: top;
  font-variant-numeric: tabular-nums;
}
.interchange-table td:first-child { font-weight: 600; }
/* R40: competitor shop-price cell (hover shows the per-retailer split). */
.interchange-table td.ci-price {
  text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap;
  color: var(--accent); cursor: help;
}
.ci-none { padding: 4px 10px 8px; font-style: italic; }
/* R32: NCP (non-conforming product) record table. */
.ncp-table { margin: 4px 0 12px; border-collapse: collapse; font-size: 12px; width: 100%; }
.ncp-table th {
  text-align: left; padding: 3px 12px 4px 0; color: var(--muted);
  font-weight: 600; border-bottom: 1px solid var(--border-subtle);
}
.ncp-table td { padding: 3px 12px 3px 0; text-align: left; vertical-align: top; }
.ncp-table td.ncp-num {
  font-weight: 600; font-variant-numeric: tabular-nums; white-space: nowrap;
}
/* R15: overview section tabs — group the long scroll into Act / Mix / Risk. */
.overview-tabs {
  display: flex; flex-wrap: wrap; gap: 2px; margin: 16px 0 6px;
  border-bottom: 1px solid var(--border);
}
.overview-tab {
  font: inherit; font-size: 13px; font-weight: 600; padding: 7px 15px;
  color: var(--muted); background: transparent; border: none;
  border-bottom: 2px solid transparent; margin-bottom: -1px; cursor: pointer;
}
.overview-tab:hover { color: var(--fg); }
.overview-tab.is-active { color: var(--accent); border-bottom-color: var(--accent); }
.overview-panel { padding-top: 2px; }