/* Color usage LOCKED 2026-08-20: prefer var(--tokens); no ad-hoc hex outside
 * docs/pdp/PLINTH-COLOR-USAGE-RULE-LOCKED.md
 */
/* plinth-shared.css
 * Shared Plinth Decision Framework design system.
 * Loaded by Quick Underwriter, Portfolio View, and Opportunity Comparison.
 * Brand lock 2026-08-20: Quarry White / Concrete Mist / Foundation Graphite /
 * Ledger Navy / Asset Sage / Decision Bronze · Playfair Display + Inter.
 * Tokens also in css/plinth-tokens.css and brand/plinth/.
 */

:root {
  /* Brand palette (canonical) — see plinth-tokens.css / brand/plinth */
  --quarry-white: #F6F4EF;
  --concrete-mist: #E2DED5;
  --foundation-graphite: #2E3033;
  --ledger-navy: #0F2A52;
  --asset-sage: #7C8B74;
  --decision-bronze: #A9793E;

  --ledger-navy-soft: #E7EEF6;
  --ledger-navy-line: #B7C6DB;
  --ledger-navy-ink: #3D5271; /* small chrome ink — solid navy ≈ graphite at 11px */
  --asset-sage-soft: #EEF1EB;
  --asset-sage-line: #C5CFBE;
  --decision-bronze-soft: #F7F0E6;
  --decision-bronze-line: #E0C9A4;

  /* App surfaces */
  --bg: var(--concrete-mist); /* page ground — Option A */
  --panel: var(--quarry-white); /* content — Option A; no pure white */
  --ink: var(--foundation-graphite);
  --muted: #5C636A;
  --line: #D9D4CB;
  --line-strong: #C2BDB3;
  --input-bg: var(--quarry-white); /* content field on mist chrome */
  --soft: #F1F0EC;
  --chip: #EEEBE4;
  --metric: #4A5A45;
  --metric-bg: var(--asset-sage-soft, #EEF1EB);
  --metric-line: var(--asset-sage-line, #C5CFBE);
  --accent: var(--ledger-navy);
  --accent-ink: var(--ledger-navy-ink);
  --accent-soft: var(--ledger-navy-soft);
  --accent-line: var(--ledger-navy-line);
  --good: #2F6B4F;
  --good-soft: #E8F3EC;
  --good-line: #B7C9BA;
  --warn: #9A6700;
  --warn-soft: #FFF4D6;
  --bad: #A12622;
  --bad-soft: #FDECEC;
  --danger: #B91C1C;
  /* Decision Score accent — keep scarce */
  --gold: var(--decision-bronze);
  --gold-bg: var(--decision-bronze-soft);
  --gold-line: var(--decision-bronze-line);
  --shadow: 0 1px 2px rgba(46, 48, 51, 0.06), 0 8px 24px rgba(46, 48, 51, 0.06);
  --box-gap: 16px; /* exterior space around boxes; interior stays 12/14/16 */

  /* Framework signals: Client / Asset / Decision */
  --signal-client: var(--ledger-navy);
  --signal-client-ink: var(--ledger-navy-ink);
  --signal-client-soft: var(--ledger-navy-soft);
  --signal-client-line: var(--ledger-navy-line);
  --signal-asset: var(--asset-sage);
  --signal-asset-soft: var(--asset-sage-soft);
  --signal-asset-line: var(--asset-sage-line);
  --signal-decision: var(--decision-bronze);
  --signal-decision-soft: var(--decision-bronze-soft);
  --signal-decision-line: var(--decision-bronze-line);

  /* Origin aliases (existing class names) */
  --origin-asset: var(--signal-asset);
  --origin-asset-soft: var(--signal-asset-soft);
  --origin-asset-line: var(--signal-asset-line);
  --origin-client: var(--signal-client);
  --origin-client-soft: var(--signal-client-soft);
  --origin-client-line: var(--signal-client-line);
  --origin-derived: var(--signal-decision);
  --origin-derived-soft: var(--signal-decision-soft);
  --origin-derived-line: var(--signal-decision-line);
  --origin-mixed: #8B95A5;
  --origin-mixed-soft: var(--chip, #EEEBE4);
  --origin-mixed-line: var(--line, #D9D4CB);

  --font-display: "Playfair Display", Georgia, "Times New Roman", serif;
  --font-sans: "Inter", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-mono: "JetBrains Mono", "SF Mono", ui-monospace, monospace;

  --text-display: clamp(2.5rem, 4vw + 1rem, 4.25rem);
  --text-h1: clamp(2rem, 2.5vw + 1rem, 3rem);
  --text-h2: clamp(1.75rem, 1.8vw + 0.8rem, 2rem);
  --text-h3: clamp(1.375rem, 1.2vw + 0.7rem, 1.5rem);
  --text-h4: 1.25rem;
  --text-body-lg: 1.125rem;
  --text-body: 1rem;
  --text-body-sm: 0.875rem;
  --text-caption: 0.8125rem;
  --text-overline: 0.75rem;

  --weight-regular: 400;
  --weight-medium: 500;
  --weight-semibold: 600;
  --weight-bold: 700;

  --leading-tight: 1.15;
  --leading-snug: 1.25;
  --leading-normal: 1.5;
  --leading-relaxed: 1.6;
}

*, *::before, *::after { box-sizing: border-box; }
html { max-width: 100%; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font-sans);
  font-size: var(--text-body-sm);
  font-weight: var(--weight-regular);
  line-height: var(--leading-normal);
  overflow-x: hidden;
}

.display {
  font-family: var(--font-display);
  font-size: var(--text-display);
  font-weight: var(--weight-semibold);
  line-height: var(--leading-tight);
  letter-spacing: -0.02em;
}
.h1, h1 {
  font-family: var(--font-display);
  font-size: var(--text-h1);
  font-weight: var(--weight-semibold);
  line-height: var(--leading-tight);
  letter-spacing: -0.02em;
}
.h2, .h3 {
  font-family: var(--font-sans);
  font-weight: var(--weight-semibold);
  letter-spacing: -0.015em;
}
.h2 { font-size: var(--text-h2); line-height: var(--leading-tight); }
.h3 { font-size: var(--text-h3); line-height: var(--leading-snug); }
.body-text {
  font-family: var(--font-sans);
  font-size: var(--text-body);
  font-weight: var(--weight-regular);
  line-height: var(--leading-relaxed);
}
.tabular { font-variant-numeric: tabular-nums; font-feature-settings: "tnum"; }

.page { max-width: 1180px; margin: 0 auto; padding: 20px 18px 40px; }
.wrap { max-width: min(1480px, 100%); margin: 22px auto 36px; padding: 0 16px; }
.note {
  display: flex; justify-content: space-between; gap: 12px; align-items: center;
  margin-bottom: 10px; color: var(--muted); font-size: 12px; flex-wrap: wrap;
}
.app {
  background: var(--panel); border: 1px solid var(--line); border-radius: 14px;
  box-shadow: var(--shadow); overflow: hidden; /* clip outer card; nav menu is position:fixed */
}

.topbar, .plinth-topbar {
  position: sticky; top: 0; z-index: 40;
  display: flex; justify-content: space-between; align-items: center; gap: 12px;
  padding: 12px 16px; border-bottom: 1px solid var(--line);
  border-radius: 14px 14px 0 0; background: var(--panel);
  box-shadow: 0 1px 0 rgba(16, 24, 40, 0.04), 0 8px 16px rgba(16, 24, 40, 0.04);
  flex-wrap: wrap;
}
.brand { display: flex; align-items: center; gap: 16px; min-width: 0; flex: 1 1 240px; }
.brand .mark,
.brand img.mark,
img.plinth-mark {
  width: 51px !important;
  max-width: 51px !important;
  height: auto !important;
  max-height: 39px !important;
  border-radius: 0;
  background: transparent;
  color: inherit;
  display: block;
  object-fit: contain;
  flex: 0 0 auto;
}
.brand .mark-fallback {
  width: 51px; height: 51px; border-radius: 8px; background: var(--foundation-graphite, #2E3033); color: var(--quarry-white, #F6F4EF);
  display: grid; place-items: center; font-family: var(--font-sans);
  font-size: 13px; font-weight: 800; flex: 0 0 auto;
}
.brand-text { min-width: 0; }
.brand-kicker, .kicker, .brand .kicker {
  color: var(--accent-ink, var(--ledger-navy-ink, #3D5271)); font-family: var(--font-sans); font-size: 11px; font-weight: 800;
  letter-spacing: 0.06em; text-transform: uppercase; line-height: 1.2;
}
.brand-title, h1.brand-title, .topbar h1, .plinth-topbar h1 {
  margin: 2px 0 4px;
  font-family: var(--font-display);
  font-size: var(--text-h4);
  line-height: var(--leading-tight);
  font-weight: var(--weight-bold);
  letter-spacing: -0.01em;
  color: var(--ink);
}
.brand-sub, .sub, .brand .sub {
  display: block; margin-top: 2px;
  font-family: var(--font-sans);
  font-size: var(--text-overline);
  font-weight: var(--weight-medium);
  line-height: var(--leading-snug);
  color: var(--muted);
}
.topbar-right, .plinth-topbar-right {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  margin-left: auto; justify-content: flex-end; flex: 1 1 320px;
}
[data-plinth-nav-mount] { flex: 0 0 auto; }
.topbar .plinth-page-actions, .plinth-page-actions {
  display: flex; gap: 8px; flex-wrap: wrap; align-items: center;
}

.toolbar {
  display: flex; justify-content: space-between; align-items: center; gap: 12px;
  flex-wrap: wrap; padding: 10px 16px; border-bottom: 1px solid var(--line); background: var(--soft);
}
.toolbar-left, .toolbar-right { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }

.btn, a.btn, button.btn {
  border: 1px solid var(--line); background: var(--panel); color: var(--ink); border-radius: 8px;
  padding: 7px 11px; font-family: var(--font-sans); font-size: 12px; font-weight: 600;
  cursor: pointer; text-decoration: none; display: inline-flex; align-items: center; gap: 6px; line-height: 1.2;
}
.btn:hover:not(.navy):not(.primary), a.btn:hover:not(.navy):not(.primary) { background: var(--soft); }
.btn.ghost { background: transparent; }
.btn.navy, a.btn.navy, button.btn.navy,
.btn.primary, a.btn.primary, button.btn.primary {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--quarry-white, #F6F4EF);
}
.btn.navy:hover, a.btn.navy:hover, button.btn.navy:hover,
.btn.primary:hover, a.btn.primary:hover, button.btn.primary:hover {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--quarry-white, #F6F4EF);
  filter: brightness(1.05);
}
.btn.navy:active, a.btn.navy:active, button.btn.navy:active,
.btn.primary:active, a.btn.primary:active, button.btn.primary:active {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--quarry-white, #F6F4EF);
  filter: brightness(0.95);
}
.btn.navy:focus-visible, a.btn.navy:focus-visible, button.btn.navy:focus-visible,
.btn.primary:focus-visible, a.btn.primary:focus-visible, button.btn.primary:focus-visible {
  outline: 2px solid var(--accent, #0F2A52);
  outline-offset: 2px;
}
.btn.danger-ghost { color: #b91c1c; border-color: #fecaca; }
.btn.danger-ghost:hover { background: #fef2f2; }

.chip {
  display: inline-flex; align-items: center; gap: 5px; background: var(--chip);
  border: 1px solid var(--line); border-radius: 999px; padding: 4px 8px;
  font-family: var(--font-sans); font-size: 11px; font-weight: 650; color: var(--ink, #2E3033);
}
select, input[type="text"], input[type="number"], input[type="search"], textarea {
  border: 1px solid var(--line-strong); background: var(--panel); border-radius: 8px; padding: 7px 10px;
  color: var(--ink); font-family: var(--font-sans); font-size: inherit;
}
.labelish { color: var(--muted); font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; }

.origin-legend {
  display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin: 0 0 14px;
  padding: 10px 12px; border: 1px solid var(--line); border-radius: 12px; background: var(--panel);
}
.origin-legend .legend-title { font-size: 11px; font-weight: 800; letter-spacing: 0.04em; text-transform: uppercase; color: var(--muted); margin-right: 2px; }
.origin-swatch { display: inline-flex; align-items: center; gap: 7px; font-size: 12px; font-weight: 700; color: var(--ink); }
.origin-swatch i { display: inline-block; width: 18px; height: 12px; border-radius: 3px; border-style: solid; border-width: 3px; background: var(--panel); box-sizing: border-box; }
.origin-swatch.asset i { border-color: var(--origin-asset); background: var(--origin-asset-soft); }
.origin-swatch.client i { border-color: var(--origin-client); background: var(--origin-client-soft); }
.origin-swatch.derived i { border-color: var(--origin-derived); background: var(--origin-derived-soft); }
.origin-swatch.mixed i { border-color: var(--origin-mixed); background: var(--origin-mixed-soft); }
.origin-legend .hint { color: var(--muted); font-size: 12px; font-weight: 500; }
.origin-asset, .origin-client, .origin-derived, .origin-mixed { border-style: solid !important; border-width: 2.5px !important; border-radius: 12px; }
.origin-asset { border-color: var(--origin-asset) !important; background: linear-gradient(180deg, var(--origin-asset-soft) 0%, var(--quarry-white, #F6F4EF) 44px); }
.origin-client { border-color: var(--origin-client) !important; background: linear-gradient(180deg, var(--origin-client-soft) 0%, var(--quarry-white, #F6F4EF) 44px); }
.origin-derived { border-color: var(--origin-derived) !important; background: linear-gradient(180deg, var(--origin-derived-soft) 0%, var(--quarry-white, #F6F4EF) 44px); }
.origin-mixed { border-color: var(--origin-mixed) !important; background: linear-gradient(180deg, var(--origin-mixed-soft) 0%, var(--quarry-white, #F6F4EF) 44px); }

/* Origin panel package (canonical). Spec = PV Client Decision Weights rail.
   Fade + 2.5px origin border + 12px corners. End-stop --soft (#F1F0EC), not pure white, not Mist.
   Pills keep the generic .origin-* rules above. Do not fold .origin-mixed into sage. */
.panel.origin-client,
.side.origin-client,
.side-rail.origin-client,
.tool-side.origin-client,
.table-wrap.origin-client,
.section.origin-client,
.section-block.origin-client,
.card.origin-client,
.metrics.origin-client,
.call.origin-client,
.side-rail.role-client,
.tool-side.role-client {
  border: 2.5px solid var(--origin-client, var(--signal-client, #0F2A52));
  border-radius: 12px;
  background: linear-gradient(180deg, var(--origin-client-soft, var(--signal-client-soft, #E7EEF6)) 0%, var(--soft, #F1F0EC) 80px);
}
.panel.origin-asset,
.side.origin-asset,
.side-rail.origin-asset,
.tool-side.origin-asset,
.table-wrap.origin-asset,
.section.origin-asset,
.section-block.origin-asset,
.card.origin-asset,
.metrics.origin-asset,
.call.origin-asset,
.side-rail.role-asset,
.tool-side.role-asset {
  border: 2.5px solid var(--origin-asset, var(--signal-asset, #7C8B74));
  border-radius: 12px;
  background: linear-gradient(180deg, var(--origin-asset-soft, var(--signal-asset-soft, #EEF1EB)) 0%, var(--soft, #F1F0EC) 80px);
}
.panel.origin-derived,
.side.origin-derived,
.side-rail.origin-derived,
.tool-side.origin-derived,
.table-wrap.origin-derived,
.section.origin-derived,
.section-block.origin-derived,
.card.origin-derived,
.metrics.origin-derived,
.call.origin-derived,
.side-rail.role-decision,
.tool-side.role-decision {
  border: 2.5px solid var(--origin-derived, var(--signal-decision, #A9793E));
  border-radius: 12px;
  background: linear-gradient(180deg, var(--origin-derived-soft, var(--signal-decision-soft, #F7F0E6)) 0%, var(--soft, #F1F0EC) 80px);
}

/* Inner scrollport: origin frame clips to radius; sticky thead lives in .table-scroll */
.table-wrap.origin-client,
.table-wrap.origin-asset,
.table-wrap.origin-derived {
  overflow: hidden;
}
.table-wrap.origin-client > .table-scroll,
.table-wrap.origin-asset > .table-scroll,
.table-wrap.origin-derived > .table-scroll {
  overflow: auto;
  max-height: calc(100vh - 22.5rem);
}
.table-wrap.origin-client > .table-scroll > table thead th,
.table-wrap.origin-asset > .table-scroll > table thead th,
.table-wrap.origin-derived > .table-scroll > table thead th {
  position: sticky;
  top: 0;
  z-index: 5;
}

.origin-dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; margin-right: 6px; vertical-align: middle; }
.origin-dot.asset { background: var(--origin-asset); }
.origin-dot.client { background: var(--origin-client); }
.origin-dot.derived { background: var(--origin-derived); }
.origin-dot.mixed { background: var(--origin-mixed); }

.status-pill { display: inline-block; font-size: 10px; font-weight: 700; letter-spacing: 0.04em; padding: 2px 6px; border-radius: 999px; margin-left: 6px; vertical-align: middle; background: var(--accent-soft); color: var(--accent); border: 1px solid var(--accent-line); }
.status-pill.owned { background: var(--asset-sage-soft, #EEF1EB); color: var(--metric, #4A5A45); border-color: var(--asset-sage-line, #C5CFBE); }
.empty-state { padding: 48px 24px; text-align: center; color: var(--muted, #5C636A); }
.empty-state h3 { margin: 0 0 8px; color: var(--ink); font-family: var(--font-display); font-size: 18px; }
.empty-state p { margin: 0 0 16px; font-size: 14px; }
.empty-state a { display: inline-block; border: 1px solid var(--accent); background: var(--accent); color: var(--quarry-white, #F6F4EF); border-radius: 8px; padding: 10px 14px; font-size: 13px; font-weight: 600; text-decoration: none; }


/* Signal utilities — Client / Asset / Decision */
.signal-client { color: var(--signal-client); }
.signal-asset { color: var(--signal-asset); }
.signal-decision { color: var(--signal-decision); }
.signal-pill {
  display: inline-flex; align-items: center; gap: 6px;
  border-radius: 999px; padding: 3px 9px;
  font-size: 11px; font-weight: 700; letter-spacing: 0.03em;
  border: 1px solid transparent;
}
.signal-pill.client { color: var(--signal-client); background: var(--signal-client-soft); border-color: var(--signal-client-line); }
.signal-pill.asset { color: #3F4A3A; background: var(--signal-asset-soft); border-color: var(--signal-asset-line); }
.signal-pill.decision { color: #6B4A22; background: var(--signal-decision-soft); border-color: var(--signal-decision-line); }
.decision-score {
  color: var(--signal-decision);
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum";
}
.decision-score-card {
  border: 1.5px solid var(--signal-decision-line) !important;
  background: linear-gradient(180deg, var(--signal-decision-soft) 0%, var(--quarry-white, #F6F4EF) 52%);
}
.decision-score-card .score-value,
.decision-score-card .val.decision {
  color: var(--signal-decision);
  font-weight: 800;
}

@media (max-width: 980px) {
  .topbar, .plinth-topbar { align-items: flex-start; }
  .brand, .topbar-right { flex: 1 1 100%; }
  .topbar-right { margin-left: 0; justify-content: flex-start; }
}


/* === Plinth product shell v0.1 ===
 * Enforces: grey headers / Quarry content on Mist page (Option A; no pure white fills).
 * See PLINTH-SHELL-CONTRACT-v0.1.md
 */
.plinth-body {
  margin: 0;
  background: var(--bg, #E2DED5);
  color: var(--ink, #2E3033);
  font: 13px/1.4 var(--font-sans, Inter, system-ui, sans-serif);
}
.plinth-page {
  max-width: 1380px;
  margin: 18px auto 40px;
  padding: 0 16px;
}
.plinth-page.plinth-page--wide { max-width: 1440px; }

/* Shell card: header/intro lock; body scrolls (viewport-height frame) */
.plinth-app,
.app.plinth-app {
  background: var(--panel, #F6F4EF);
  border: 1px solid var(--line, #D9D4CB);
  border-radius: 14px;
  box-shadow: var(--shadow);
  margin-bottom: 14px;
  display: flex;
  flex-direction: column;
  max-height: calc(100vh - 36px);
  min-height: 0;
  overflow: hidden; /* clip to card; scrolling happens in .plinth-app-body */
}

/* Locked chrome rows */
.plinth-app > .plinth-topbar,
.app.plinth-app > .plinth-topbar,
.plinth-app > .topbar,
.app.plinth-app > .topbar,
.plinth-app > .plinth-intro,
.app.plinth-app > .plinth-intro,
.plinth-app > .page-intro,
.app.plinth-app > .page-intro {
  flex: 0 0 auto;
  position: relative; /* not viewport-sticky; body is the scrollport */
}

/* Topbar must stack above intro so hamburger menu is not buried under the ribbon */
.plinth-app > .plinth-topbar,
.app.plinth-app > .plinth-topbar,
.plinth-app > .topbar,
.app.plinth-app > .topbar {
  z-index: 30;
  overflow: hidden; /* clip Contours2 to title bar; hamburger menu is position:fixed */
}
.plinth-app > .plinth-intro,
.app.plinth-app > .plinth-intro,
.plinth-app > .page-intro,
.app.plinth-app > .page-intro {
  z-index: 5;
}

/* Hamburger nav dropdown (shared; chrome JS also injects fallback) */
.plinth-nav {
  position: relative;
  flex: 0 0 auto;
  z-index: 40;
}
.plinth-nav-menu {
  position: fixed;
  min-width: 240px;
  max-height: min(70vh, 520px);
  overflow: auto;
  z-index: 4000;
  background: var(--panel, #F6F4EF);
  border: 1px solid var(--line, #D9D4CB);
  border-radius: 12px;
  box-shadow: 0 14px 34px rgba(21, 32, 51, 0.14);
  padding: 8px;
  display: none;
}
.plinth-nav.open .plinth-nav-menu { display: block; }

/* Scrollport under chrome */
.plinth-app-body,
.plinth-app > [data-plinth-main],
.app.plinth-app > [data-plinth-main] {
  flex: 1 1 auto;
  min-height: 0;
  min-width: 0;
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 14px 16px 18px;
  background: var(--panel, #F6F4EF);
  -webkit-overflow-scrolling: touch;
}

/* Hand-built .app pages: .body is the scrollport. Do not add extra padding. */
.plinth-app > .body,
.app.plinth-app > .body {
  flex: 1 1 auto;
  min-height: 0;
  min-width: 0;
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
}

/* Footer is card chrome (meta/version), not an action row. */
.plinth-app > .footer-bar,
.app.plinth-app > .footer-bar {
  flex: 0 0 auto;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  padding: 12px 16px;
  border-top: 1px solid var(--line);
  background: var(--soft, #F1F0EC);
}
.footer-left {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}
.footer-bar .meta {
  color: var(--muted);
  font-size: 12px;
}
.footer-bar .app-version {
  color: var(--muted);
  font-size: 11px;
  font-weight: 500;
}
.footer-brand {
  display: flex;
  align-items: center;
  gap: 10px;
  flex: 0 0 auto;
  min-width: 0;
}
.footer-wordmark { min-width: 0; text-align: center; }
.footer-wordmark-name {
  font-family: var(--font-display, "Playfair Display", Georgia, serif);
  font-size: 16px;
  line-height: 1.15;
  font-weight: 750;
  letter-spacing: -0.01em;
  color: var(--ink);
}
.footer-wordmark-line {
  font-family: var(--font-sans, Inter, system-ui, sans-serif);
  margin-top: 1px;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  line-height: 1.2;
  color: var(--muted);
}

/* Wrapper used when toolbar sits with .body inside the scrollport. */
.plinth-app > .plinth-app-body:has(> .body),
.app.plinth-app > .plinth-app-body:has(> .body) {
  padding: 0;
  background: transparent;
}

/* Nested tool layouts: sub-panels, not separate floating cards */
.plinth-app-body > .layout,
.plinth-app-body .tool-layout {
  display: grid;
  gap: 12px;
  align-items: start;
  min-width: 0;
}

/* Sub-panels inside shell: lighter chrome (no double outer shadow) */
.plinth-app-body > .layout > .panel,
.plinth-app-body > .layout > main.panel,
.plinth-app-body > .layout > aside.panel,
.plinth-app-body .tool-layout > .panel {
  box-shadow: none;
  border-radius: 12px;
}

/* Sticky children stick within the shell body scrollport */
.plinth-app-body .layout > aside.panel,
.plinth-app-body .side-rail,
.plinth-app-body .tool-side {
  position: sticky;
  top: 0;
  align-self: start;
  max-height: 100%;
  overflow: auto;
}

/* Header strip = grey */
.plinth-app > .plinth-topbar,
.app.plinth-app > .plinth-topbar,
.plinth-app > .topbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  padding: 12px 16px;
  border-radius: 14px 14px 0 0;
  background: var(--soft, #F1F0EC) !important;
  border-bottom: 1px solid var(--line, #D9D4CB);
  box-shadow: none;
}
.plinth-topbar .brand {
  display: flex;
  align-items: center;
  gap: 16px;
  min-width: 0;
  flex: 1 1 auto;
}
.plinth-topbar .brand .mark,
.plinth-topbar .brand img.mark {
  width: 51px !important;
  max-width: 51px !important;
  height: auto !important;
  max-height: 39px !important;
  border-radius: 0;
  background: transparent;
  display: block;
  object-fit: contain;
  flex: 0 0 auto;
}
.plinth-topbar .brand-kicker {
  color: var(--accent-ink, var(--ledger-navy-ink, #3D5271));
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .06em;
  text-transform: uppercase;
  line-height: 1.2;
}
.plinth-topbar .brand-title,
.plinth-topbar h1.brand-title {
  margin: 1px 0 0;
  font-family: var(--font-display, "Playfair Display", Georgia, serif);
  font-size: 18px;
  line-height: 1.15;
  font-weight: 750;
  letter-spacing: -.01em;
  color: var(--ink, #2E3033);
}
.plinth-topbar .brand-sub {
  display: block;
  margin-top: 2px;
  font-size: 11.5px;
  line-height: 1.3;
  color: var(--muted, #5C636A);
  font-weight: 500;
}
.plinth-topbar-right {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  justify-content: flex-end;
  margin-left: auto;
}
.plinth-page-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  justify-content: flex-end;
}

/* Intro band under topbar = grey subheader */
.plinth-intro,
.page-intro {
  padding: 12px 16px 14px;
  border-bottom: 1px solid var(--line, #D9D4CB);
  background: var(--soft, #F1F0EC);
}
.plinth-intro .sub,
.page-intro .sub {
  color: var(--muted, #5C636A);
  font-size: 12.5px;
  max-width: 110ch;
  margin: 0;
  line-height: 1.5;
}
.plinth-intro .chiprow,
.page-intro .chiprow { margin-top: 12px; }

/* Standard panels: grey header / Quarry body */
.panel {
  background: var(--panel);
  border: 1px solid var(--line, #D9D4CB);
  border-radius: 14px;
  box-shadow: var(--shadow);
  overflow: hidden;
}
.panel + .panel {
  margin-top: var(--box-gap, 16px);
}
.section.origin-asset,
.section.origin-client,
.section.origin-derived,
.section.origin-mixed {
  margin-bottom: var(--box-gap, 16px);
}
.panel-hd,
.section-hd {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  align-items: center;
  padding: 10px 14px;
  border-bottom: 1px solid var(--line, #D9D4CB);
  background: var(--soft, #F1F0EC);
}
.panel-hd h2,
.section-hd h2,
.section-hd h3 {
  margin: 0;
  font-family: var(--font-sans, Inter, system-ui, sans-serif);
  font-size: 12px;
  letter-spacing: .05em;
  text-transform: uppercase;
  color: var(--muted, #5C636A);
  font-weight: 800;
}
.panel-hd .hint,
.section-hd .hint { color: var(--muted, #5C636A); font-size: 11.5px; }
.panel-bd,
.section-bd {
  padding: 12px 14px 16px;
  background: var(--panel);
}
.section-block {
  border: 1px solid var(--line, #D9D4CB);
  border-radius: 12px;
  overflow: hidden;
  margin: 0 0 var(--box-gap, 16px);
  background: var(--panel);
}
.section-block > .section-hd { border-radius: 0; }

/* Overline section titles: 1px Ledger Navy rule. Type color stays page-local. */
.section h2,
.metrics h2 {
  background: transparent;
  border-bottom: 1px solid var(--accent, var(--ledger-navy, #0F2A52));
}

/* Factor / entity identity strip */
.factor-hd,
.entity-hd {
  padding: 12px 14px;
  border-bottom: 1px solid var(--line, #D9D4CB);
  background: var(--soft, #F1F0EC);
}
.factor-hd .kicker,
.entity-hd .kicker {
  color: var(--accent-ink, var(--ledger-navy-ink, #3D5271));
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .06em;
  text-transform: uppercase;
}
.factor-hd h1,
.entity-hd h1 {
  margin: 4px 0 0;
  font-family: var(--font-display, "Playfair Display", Georgia, serif);
  font-size: 22px;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--ink, #2E3033);
  line-height: 1.15;
}
.factor-hd .desc,
.entity-hd .desc {
  color: var(--muted, #5C636A);
  font-size: 12.5px;
  max-width: 75ch;
  margin: 6px 0 0;
}

/* Controls used across shell pages */
.chiprow { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; align-items: center; }
.chip {
  display: inline-flex; align-items: center; gap: 6px;
  background: var(--panel); border: 1px solid var(--line, #D9D4CB); border-radius: 999px;
  padding: 5px 10px; font-size: 11px; font-weight: 700; color: var(--ink, #2E3033);
}
.chip.on { background: var(--accent-soft, #E7EEF6); border-color: var(--accent-line, #B7C6DB); color: var(--accent, #0F2A52); }
.chip.good { background: var(--good-soft, #E8F3EC); border-color: var(--good-line, #B7C9BA); color: var(--good, #2F6B4F); }
.chip.warn { background: var(--warn-soft, #FFF4D6); border-color: #f0d48a; color: #7a5200; }

.btn {
  border: 1px solid var(--line-strong, #C2BDB3); background: var(--panel); color: var(--ink, #2E3033);
  border-radius: 9px; padding: 8px 12px; font: inherit; font-weight: 700; cursor: pointer;
  display: inline-flex; align-items: center; gap: 6px; line-height: 1.2; text-decoration: none;
}
.btn:hover:not(.navy):not(.primary) { background: var(--soft, #F1F0EC); }
.btn.navy, a.btn.navy, button.btn.navy,
.btn.primary, a.btn.primary, button.btn.primary {
  background: var(--accent, #0F2A52);
  border-color: var(--accent, #0F2A52);
  color: var(--quarry-white, #F6F4EF);
}
.btn.navy:hover, a.btn.navy:hover, button.btn.navy:hover,
.btn.primary:hover, a.btn.primary:hover, button.btn.primary:hover {
  background: var(--accent, #0F2A52);
  border-color: var(--accent, #0F2A52);
  color: var(--quarry-white, #F6F4EF);
  filter: brightness(1.05);
}
.btn.navy:active, a.btn.navy:active, button.btn.navy:active,
.btn.primary:active, a.btn.primary:active, button.btn.primary:active {
  background: var(--accent, #0F2A52);
  border-color: var(--accent, #0F2A52);
  color: var(--quarry-white, #F6F4EF);
  filter: brightness(0.95);
}
.btn.navy:focus-visible, a.btn.navy:focus-visible, button.btn.navy:focus-visible,
.btn.primary:focus-visible, a.btn.primary:focus-visible, button.btn.primary:focus-visible {
  outline: 2px solid var(--accent, #0F2A52);
  outline-offset: 2px;
}
.btn.ghost { background: var(--panel); }
.btn.warn { background: var(--warn-soft, #FFF4D6); border-color: #f0d48a; color: #7a5200; }

table.plinth-table,
.panel table {
  width: 100%; border-collapse: collapse; font-size: 12.5px; background: var(--panel);
}
.panel th,
table.plinth-table th {
  font-size: 10.5px; letter-spacing: .04em; text-transform: uppercase;
  color: var(--muted, #5C636A); font-weight: 800;
  background: var(--soft, #F1F0EC);
  border-bottom: 1px solid var(--line, #D9D4CB);
  padding: 8px; text-align: left;
}
.panel td,
table.plinth-table td {
  border-bottom: 1px solid var(--line, #D9D4CB);
  padding: 8px; text-align: left; vertical-align: middle;
}

/* Pre-mount: hide raw slots so they don't flash before shell runs */
body.plinth-body > .plinth-page > [data-plinth-actions],
body.plinth-body > .plinth-page > [data-plinth-intro] {
  /* visible until mounted; shell moves them */
}
body.plinth-shell-ready > .plinth-page > [data-plinth-actions]:empty { display: none; }

/* =============================================================================
 * Working-tool primitives (extracted from Portfolio View patterns)
 * Role color model (locked): Client=Navy · Asset=Sage · Decision=Bronze(scarce)
 * Use these on working surfaces (Portfolio, QU, Compare, Asset Input).
 * Admin/reference pages may stay quieter.
 * Shell still owns frame/topbar; pages compose these inside main/body.
 * No pure #FFFFFF fills — Quarry / soft / role-soft only (Option A).
 * ========================================================================== */

/* --- Metric strip (top pulse) -------------------------------------------- */
.metric-strip,
.top-metrics {
  display: grid;
  grid-template-columns: repeat(6, minmax(64px, 1fr));
  gap: 8px;
  min-width: 0;
  max-width: 680px;
  flex: 1 1 420px;
}
.metric-strip.cols-3,
.top-metrics.cols-3 { grid-template-columns: repeat(3, minmax(72px, 1fr)); max-width: 420px; }
.metric-strip.cols-4,
.top-metrics.cols-4 { grid-template-columns: repeat(4, minmax(68px, 1fr)); max-width: 520px; }
.metric-strip.cols-5,
.top-metrics.cols-5 { grid-template-columns: repeat(5, minmax(64px, 1fr)); max-width: 600px; }

.metric-pill,
.metric-strip .pill,
.top-metrics .pill {
  background: var(--soft, #F1F0EC);
  border: 1px solid var(--line, #D9D4CB);
  border-radius: 10px;
  padding: 8px 10px;
  min-width: 0;
}
.metric-pill .lbl,
.metric-strip .pill .lbl,
.top-metrics .pill .lbl {
  display: block;
  color: var(--muted, #5C636A);
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  margin-bottom: 2px;
}
.metric-pill .val,
.metric-strip .pill .val,
.top-metrics .pill .val {
  font-size: 16px;
  font-weight: 750;
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum";
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  color: var(--ink, #2E3033);
  line-height: 1.2;
}
.metric-pill .val.delta-chip,
.top-metrics .pill .val.delta-chip {
  font-size: 12px;
  line-height: 1.2;
  white-space: nowrap;
}

/* Role / origin tints on metric pills */
.metric-pill.role-client,
.metric-pill.origin-client,
.metric-strip .pill.role-client,
.metric-strip .pill.origin-client,
.top-metrics .pill.role-client,
.top-metrics .pill.origin-client {
  border-color: var(--signal-client-line, var(--ledger-navy-line, #B7C6DB));
  background: linear-gradient(180deg, var(--signal-client-soft, var(--ledger-navy-soft, #E7EEF6)) 0%, var(--panel, #F6F4EF) 72%);
}
.metric-pill.role-asset,
.metric-pill.origin-asset,
.metric-strip .pill.role-asset,
.metric-strip .pill.origin-asset,
.top-metrics .pill.role-asset,
.top-metrics .pill.origin-asset {
  border-color: var(--signal-asset-line, var(--asset-sage-line, #C5CFBE));
  background: linear-gradient(180deg, var(--signal-asset-soft, var(--asset-sage-soft, #EEF1EB)) 0%, var(--panel, #F6F4EF) 72%);
}
.metric-pill.role-decision,
.metric-pill.origin-derived,
.metric-strip .pill.role-decision,
.metric-strip .pill.origin-derived,
.top-metrics .pill.role-decision,
.top-metrics .pill.origin-derived {
  border-color: var(--signal-decision-line, var(--decision-bronze-line, #E0C9A4));
  background: linear-gradient(180deg, var(--signal-decision-soft, var(--decision-bronze-soft, #F7F0E6)) 0%, var(--panel, #F6F4EF) 72%);
}
.metric-pill.role-decision .val,
.metric-pill.origin-derived .val,
.top-metrics .pill.role-decision .val,
.top-metrics .pill.origin-derived .val {
  color: var(--signal-decision, var(--decision-bronze, #A9793E));
}

/* --- Tool band (accent control strip; year slider, filters, mode) -------- */
.tool-band,
.year-bar {
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 14px;
  align-items: center;
  margin-bottom: 12px;
  padding: 12px 14px;
  border: 1px solid var(--accent-line, var(--ledger-navy-line, #B7C6DB));
  border-radius: 12px;
  background: linear-gradient(
    180deg,
    var(--accent-soft, var(--ledger-navy-soft, #E7EEF6)) 0%,
    var(--accent-soft, var(--ledger-navy-soft, #E7EEF6)) 100%
  );
}
.tool-band.role-client,
.year-bar.role-client {
  border-color: var(--signal-client-line, var(--ledger-navy-line, #B7C6DB));
  background: linear-gradient(180deg, var(--signal-client-soft, #E7EEF6) 0%, var(--signal-client-soft, #E7EEF6) 100%);
}
.tool-band.role-asset,
.year-bar.role-asset {
  border-color: var(--signal-asset-line, var(--asset-sage-line, #C5CFBE));
  background: linear-gradient(180deg, var(--signal-asset-soft, #EEF1EB) 0%, var(--signal-asset-soft, #EEF1EB) 100%);
}
.tool-band.role-decision,
.year-bar.role-decision {
  border-color: var(--signal-decision-line, var(--decision-bronze-line, #E0C9A4));
  background: linear-gradient(180deg, var(--signal-decision-soft, #F7F0E6) 0%, var(--signal-decision-soft, #F7F0E6) 100%);
}
.tool-band.role-mixed,
.year-bar.role-mixed,
.year-bar.origin-mixed {
  border-color: var(--origin-mixed-line, var(--line, #D9D4CB));
  background: linear-gradient(180deg, var(--origin-mixed-soft, var(--chip, #EEEBE4)) 0%, var(--panel, #F6F4EF) 100%);
}

.tool-band .band-label,
.year-bar .year-label {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 92px;
}
.tool-band .band-label .k,
.year-bar .year-label .k {
  color: var(--muted, #5C636A);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}
.tool-band .band-label .v,
.year-bar .year-label .v {
  font-size: 22px;
  font-weight: 800;
  letter-spacing: -0.03em;
  color: var(--accent, var(--ledger-navy, #0F2A52));
  line-height: 1;
  font-variant-numeric: tabular-nums;
}
.tool-band.role-asset .band-label .v,
.year-bar.role-asset .year-label .v {
  color: var(--metric, #4A5A45);
}
.tool-band.role-decision .band-label .v,
.year-bar.role-decision .year-label .v {
  color: var(--signal-decision, var(--decision-bronze, #A9793E));
}
.tool-band .band-label .hint,
.year-bar .year-label .hint {
  color: var(--muted, #5C636A);
  font-size: 11px;
}
.tool-band .band-meta,
.year-bar .year-meta {
  min-width: 118px;
  text-align: right;
}
.tool-band .band-meta .chip,
.year-bar .year-meta .chip {
  background: var(--panel, #F6F4EF);
  border-color: var(--accent-line, var(--ledger-navy-line, #B7C6DB));
  color: var(--accent, var(--ledger-navy, #0F2A52));
}
.tool-band .band-meta .subhint,
.year-bar .year-meta .subhint {
  margin-top: 4px;
  color: var(--muted, #5C636A);
  font-size: 11px;
}

/* Range control used inside tool bands */
.tool-band .range-control,
.year-control {
  display: grid;
  gap: 6px;
}
.tool-band input[type="range"],
.year-control input[type="range"] {
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  height: 8px;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--accent-line, #B7C6DB), var(--accent, #0F2A52));
  outline: none;
  cursor: pointer;
}
.tool-band input[type="range"]::-webkit-slider-thumb,
.year-control input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: var(--panel, #F6F4EF);
  border: 2px solid var(--accent, #0F2A52);
  box-shadow: 0 1px 4px rgba(46, 48, 51, 0.25);
}
.tool-band input[type="range"]::-moz-range-thumb,
.year-control input[type="range"]::-moz-range-thumb {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: var(--panel, #F6F4EF);
  border: 2px solid var(--accent, #0F2A52);
  box-shadow: 0 1px 4px rgba(46, 48, 51, 0.25);
}
.tool-band .range-ticks,
.year-ticks {
  display: flex;
  justify-content: space-between;
  color: var(--muted, #5C636A);
  font-size: 10px;
  font-weight: 700;
}

/* --- Config / filter bar ------------------------------------------------- */
.config-bar {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
  margin: 0 0 10px;
  padding: 10px 12px;
  border: 1px solid var(--line, #D9D4CB);
  border-radius: 12px;
  background: var(--soft, #F1F0EC);
}
.config-bar .labelish {
  color: var(--muted, #5C636A);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}
.config-bar select { min-width: 180px; }
.config-bar.role-client {
  border-color: var(--signal-client-line, #B7C6DB);
  background: var(--signal-client-soft, #E7EEF6);
}
.config-bar.role-asset {
  border-color: var(--signal-asset-line, #C5CFBE);
  background: var(--signal-asset-soft, #EEF1EB);
}

/* --- Column / zone legend ------------------------------------------------ */
.col-legend {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin-bottom: 10px;
}
.col-legend .chip.fixed,
.chip.zone-fixed {
  background: var(--soft, #F1F0EC);
  border-color: var(--line, #D9D4CB);
  color: var(--ink, #2E3033);
}
.col-legend .chip.swap,
.chip.zone-swap,
.chip.zone-client {
  background: var(--signal-client-soft, var(--accent-soft, #E7EEF6));
  border-color: var(--signal-client-line, var(--accent-line, #B7C6DB));
  color: var(--signal-client, var(--accent, #0F2A52));
}
.col-legend .chip.out,
.chip.zone-out,
.chip.zone-asset {
  background: var(--signal-asset-soft, var(--asset-sage-soft, #EEF1EB));
  border-color: var(--signal-asset-line, var(--asset-sage-line, #C5CFBE));
  color: var(--good, #2F6B4F);
}
.col-legend .chip.zone-decision,
.chip.zone-decision {
  background: var(--signal-decision-soft, #F7F0E6);
  border-color: var(--signal-decision-line, #E0C9A4);
  color: #6B4A22;
}

/* --- Zoned matrix table headers ------------------------------------------ */
.table-wrap {
  border: 1px solid var(--line, #D9D4CB);
  border-radius: 12px;
  overflow: auto;
  background: var(--panel, #F6F4EF);
}
table.plinth-matrix {
  width: 100%;
  border-collapse: collapse;
  background: var(--panel, #F6F4EF);
  min-width: 880px;
}
table.plinth-matrix thead th,
.table-wrap table thead th.fixed-col,
.table-wrap table thead th.swap-col,
.table-wrap table thead th.out-col,
th.col-fixed,
th.col-swap,
th.col-out,
th.col-decision {
  font-size: 10.5px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  font-weight: 800;
  text-align: right;
  padding: 10px 8px;
  border-bottom: 1px solid var(--line, #D9D4CB);
  white-space: nowrap;
  user-select: none;
  color: var(--muted, #5C636A);
  background: var(--soft, #F1F0EC);
}
th.col-fixed,
thead th.fixed-col {
  background: var(--soft, #F1F0EC);
  color: var(--muted, #5C636A);
}
th.col-swap,
thead th.swap-col {
  background: var(--signal-client-soft, var(--accent-soft, #E7EEF6));
  color: var(--signal-client, var(--accent, #0F2A52));
}
th.col-out,
thead th.out-col {
  background: var(--signal-asset-soft, var(--asset-sage-soft, #EEF1EB));
  color: var(--good, #2F6B4F);
}
th.col-decision,
thead th.decision-col {
  background: var(--signal-decision-soft, #F7F0E6);
  color: #6B4A22;
}
thead th.swap-col .slot,
th.col-swap .slot,
thead th .slot {
  display: block;
  font-size: 9px;
  font-weight: 700;
  color: var(--muted, #5C636A);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  margin-bottom: 2px;
}
thead th.swap-col .slot,
th.col-swap .slot {
  color: var(--signal-client, var(--accent, #0F2A52));
}
table.plinth-matrix tbody tr:hover,
.table-wrap table tbody tr.asset-row:hover {
  background: var(--signal-client-soft, var(--accent-soft, #E7EEF6));
}
table.plinth-matrix tbody tr.selected,
.table-wrap table tbody tr.selected {
  background: var(--signal-client-soft, var(--accent-soft, #E7EEF6));
}

/* --- Recommendation + status --------------------------------------------- */
.reco {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 58px;
  border-radius: 999px;
  padding: 4px 8px;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.02em;
  border: 1px solid transparent;
}
.reco.keep {
  background: var(--good-soft, #E8F3EC);
  color: var(--good, #2F6B4F);
  border-color: var(--good-line, #B7C9BA);
}
.reco.refi {
  background: var(--warn-soft, #FFF4D6);
  color: var(--warn, #9A6700);
  border-color: #f0d48a;
}
.reco.sell {
  background: var(--bad-soft, #FDECEC);
  color: var(--bad, #A12622);
  border-color: #f0bcbc;
}
.dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  display: inline-block;
}
.dot.keep { background: var(--good, #2F6B4F); }
.dot.refi { background: #d7910d; }
.dot.sell { background: var(--bad, #A12622); }

/* --- Score bar ----------------------------------------------------------- */
.score-cell { min-width: 88px; }
.score-row {
  display: grid;
  grid-template-columns: 30px 1fr;
  gap: 8px;
  align-items: center;
}
.score-num {
  font-weight: 800;
  text-align: right;
  font-variant-numeric: tabular-nums;
}
.score-bar {
  height: 8px;
  background: var(--line, #D9D4CB);
  border-radius: 999px;
  overflow: hidden;
}
.score-bar > i {
  display: block;
  height: 100%;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--accent, #0F2A52), var(--accent, #0F2A52));
}
.score-bar.role-decision > i,
.score-bar.decision > i {
  background: linear-gradient(90deg, var(--signal-decision, #A9793E), var(--signal-decision, #A9793E));
}
.score-bar.role-asset > i,
.score-bar.asset > i {
  background: linear-gradient(90deg, var(--asset-sage, #7C8B74), var(--good, #2F6B4F));
}

/* --- Side rail (inspector) ----------------------------------------------- */
.side-rail,
.tool-side {
  background: var(--soft, #F1F0EC);
  padding: 14px;
  min-width: 0;
  max-height: calc(100vh - 24px);
  overflow-y: auto;
  overflow-x: hidden;
  position: sticky;
  top: 0;
  align-self: start;
}
/* Origin/role paint for rails lives in the origin panel package above — do not fork. */
.side-rail h2,
.tool-side h2 {
  margin: 0 0 4px;
  font-size: 14px;
}
.side-rail .desc,
.tool-side .desc {
  color: var(--muted, #5C636A);
  font-size: 11.5px;
  margin-bottom: 12px;
}

/* Compact key/value rows inside rails and panels */
.mini-kv,
.mini {
  display: flex;
  justify-content: space-between;
  gap: 8px;
  align-items: center;
  padding: 8px 10px;
  border: 1px solid var(--line, #D9D4CB);
  border-radius: 8px;
  background: var(--soft, #F1F0EC);
}
.mini-kv .k,
.mini .k {
  color: var(--muted, #5C636A);
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.03em;
}
.mini-kv .v,
.mini .v {
  font-weight: 800;
  font-variant-numeric: tabular-nums;
}
.stack-kv,
.stack {
  display: grid;
  gap: 8px;
}

/* Live / active note (client-role by default) */
.live-note,
.live {
  display: flex;
  gap: 8px;
  align-items: flex-start;
  padding: 8px 10px;
  border-radius: 8px;
  background: var(--signal-client-soft, var(--accent-soft, #E7EEF6));
  border: 1px solid var(--signal-client-line, var(--accent-line, #B7C6DB));
  color: var(--signal-client, var(--accent, #0F2A52));
  font-size: 11.5px;
  line-height: 1.35;
}
.live-note strong,
.live strong { font-weight: 800; }
.live-note.role-asset,
.live.role-asset {
  background: var(--signal-asset-soft, #EEF1EB);
  border-color: var(--signal-asset-line, #C5CFBE);
  color: var(--metric, #4A5A45);
}
.live-note.role-decision,
.live.role-decision {
  background: var(--signal-decision-soft, #F7F0E6);
  border-color: var(--signal-decision-line, #E0C9A4);
  color: #6B4A22;
}

/* Weight / progress track (display)
 * NOTE: do not use bare .slider here — QU toggle switch owns .slider. */
.track,
.weight-track {
  position: relative;
  height: 8px;
  border-radius: 999px;
  background: var(--line, #D9D4CB);
  overflow: hidden;
}
.track > i,
.weight-track > i {
  display: block;
  height: 100%;
  background: var(--accent, #0F2A52);
  border-radius: 999px;
}
.track.role-asset > i,
.weight-track.role-asset > i { background: var(--asset-sage, #7C8B74); }
.track.role-decision > i,
.weight-track.role-decision > i { background: var(--signal-decision, #A9793E); }

/* Role-tinted standard panel headers (optional; default stays grey) */
.panel.role-client > .panel-hd,
.panel-hd.role-client,
.section-hd.role-client {
  background: var(--signal-client-soft, #E7EEF6);
  border-bottom-color: var(--signal-client-line, #B7C6DB);
}
.panel.role-client > .panel-hd h2,
.panel-hd.role-client h2,
.section-hd.role-client h2,
.section-hd.role-client h3 {
  color: var(--accent-ink, var(--ledger-navy-ink, #3D5271));
}
.panel.role-asset > .panel-hd,
.panel-hd.role-asset,
.section-hd.role-asset {
  background: var(--signal-asset-soft, #EEF1EB);
  border-bottom-color: var(--signal-asset-line, #C5CFBE);
}
.panel.role-asset > .panel-hd h2,
.panel-hd.role-asset h2,
.section-hd.role-asset h2,
.section-hd.role-asset h3 {
  color: var(--metric, #4A5A45);
}
.panel.role-decision > .panel-hd,
.panel-hd.role-decision,
.section-hd.role-decision {
  background: var(--signal-decision-soft, #F7F0E6);
  border-bottom-color: var(--signal-decision-line, #E0C9A4);
}
.panel.role-decision > .panel-hd h2,
.panel-hd.role-decision h2,
.section-hd.role-decision h2,
.section-hd.role-decision h3 {
  color: #6B4A22;
}

/* Dense metric number helper
 * NOTE: use span.metric / .metric-num only — bare .metric collides with QU metric cards. */
.metric-num,
span.metric,
td .metric,
th .metric {
  display: inline-block;
  white-space: nowrap;
  font-weight: 650;
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum";
}

/* Working-tool responsive */
@media (max-width: 980px) {
  .metric-strip,
  .top-metrics {
    min-width: 0;
    width: 100%;
    max-width: none;
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
  .tool-band,
  .year-bar {
    grid-template-columns: 1fr;
  }
  .tool-band .band-meta,
  .year-bar .year-meta {
    text-align: left;
  }
  .side-rail,
  .tool-side {
    position: relative;
    max-height: none;
  }
}