/* ============================================================
   XYDeR — base theme
   Tokens, shell, typography. Lifted verbatim from XYDeR prototype.
   View-specific styles live in <view>.html or extend this file.
   ============================================================ */

/* === Default = Light (pure white) === */
:root, :root[data-theme="light"] {
  color-scheme: light;
  --bg:          #FFFFFF;
  --bg-elev:     #FFFFFF;
  --surface-glass: rgba(255,255,255,0.55);
  --bg-dark:     #1F2329;
  --bg-dark-elev:#272B31;

  --ink:         #15181D;
  --ink-2:       #444851;
  --ink-3:       #7E848B;
  --ink-on-dark: #F9F8F5;
  --ink-on-dark-2:#B8B6AF;
  --ink-on-dark-3:#9A9A9F;

  --line:        #C8C6BF;
  --line-soft:   #DEDCD5;
  --line-dark:   #3A3A3D;

  /* Brand accents — Mountain Pine + Delicate White (S43c) */
  --mountain-pine: #2D4148;
  --delicate-white:#E8E6DE;

  --accent:        #A8584D;
  --accent-soft:   #8C4A4A;
  --accent-bright: #C97171;
  --accent-bg:     rgba(168, 88, 77, 0.08);
  --mountain-pine-bg: rgba(45, 65, 72, 0.05);
  --mountain-pine-bg-strong: rgba(45, 65, 72, 0.10);
  --accent-bg-strong: rgba(168, 88, 77, 0.14);

  --good:    #3F7950;
  --warn:    #B58B4A;
  --elevated:#C97A5C;
  --bad:     #9B4646;
  --neutral: #6B737B;
  /* State background tokens — soft tints for chips, pills, badges */
  --good-bg:        rgba(63,121,80,0.08);
  --good-bg-strong: rgba(63,121,80,0.18);
  --bad-bg:         rgba(155,70,70,0.08);
  --bad-bg-strong:  rgba(155,70,70,0.18);
  --warn-bg:        rgba(181,139,74,0.10);
  --warn-bg-strong: rgba(181,139,74,0.22);
  --neutral-bg:     rgba(107,115,123,0.10);
  --neutral-bg-strong: rgba(107,115,123,0.20);
  --bar-range-bg: linear-gradient(90deg, rgba(155,70,70,0.45) 0%, rgba(181,139,74,0.40) 50%, rgba(63,121,80,0.45) 100%);
  /* ============================================================
     S45a — Universal design tokens (theme-independent)
     ============================================================ */
  /* Spacing — dense scale */
  --space-1: 2px;   --space-2: 4px;   --space-3: 6px;   --space-4: 8px;
  --space-5: 12px;  --space-6: 16px;  --space-7: 20px;  --space-8: 28px;
  /* Radius — balanced */
  --radius-xs: 4px;  --radius-sm: 6px;  --radius-md: 8px;  --radius-pill: 999px;
  /* Type sizes — dense, mono-heavy */
  --text-2xs:  9px;  --text-xs:   10px; --text-sm:   11px; --text-md:   12px;
  --text-lg:   13px; --text-xl:   16px; --text-h2:   22px; --text-h1:   36px;
  --text-hero: 42px;
  /* Font families */
  --font-mono: 'JetBrains Mono', ui-monospace, monospace;
  /* Mono only. --font-sans is retained as a name so the three rules that
     read it keep working, but it resolves to the mono stack: there is no
     sans face in this UI. */
  --font-sans: 'JetBrains Mono', ui-monospace, monospace;
  /* Letter tracking */
  --track-tight:  -0.01em;
  --track-base:    0;
  --track-wide:    0.06em;
  --track-wider:   0.08em;
  --track-widest:  0.1em;
  /* Transitions */
  --transition-fast:   120ms ease;
  --transition-base:   180ms ease;
  --transition-slow:   280ms ease;
  --transition-bounce: 220ms cubic-bezier(0.4, 0, 0.2, 1);
  /* Shadows — Light theme defaults */
  --shadow-card:  0 1px 2px rgba(20,24,30,.04), 0 2px 8px rgba(20,24,30,.03);
  --shadow-hover: 0 2px 6px rgba(20,24,30,.06), 0 4px 16px rgba(20,24,30,.05);
  --shadow-modal: 0 20px 60px rgba(20,24,30,.15);
}

/* === Beige (legacy warm) === */
:root[data-theme="warm"] {
  color-scheme: light;
  --bg:          #FAF8F3;
  --bg-elev:     #FFFFFF;
  --surface-glass: rgba(255,255,255,0.55);
  --bg-dark:     #1F2329;
  --bg-dark-elev:#272B31;

  --ink:         #1F2329;
  --ink-2:       #4A525B;
  --ink-3:       #8B939B;
  --ink-on-dark: #E8EBEE;
  --ink-on-dark-2:#B5BDC6;
  --ink-on-dark-3:#8B939B;

  --line:        #D6D2C9;
  --line-soft:   #E8E4DB;
  --line-dark:   #3A4049;

  --mountain-pine: #4A5D58;
  --mountain-pine-bg: rgba(74, 93, 88, 0.07);
  --mountain-pine-bg-strong: rgba(74, 93, 88, 0.14);
  --delicate-white:#EFEAE0;

  --accent:        #B05B5B;
  --accent-soft:   #8C4A4A;
  --accent-bright: #C97171;
  --accent-bg:     rgba(176, 91, 91, 0.08);
  --accent-bg-strong: rgba(176, 91, 91, 0.14);

  --good:    #5A8060;
  --warn:    #B58B4A;
  --elevated:#C97A5C;
  --bad:     #A35050;
  --neutral: #6B737B;
  --good-bg:        rgba(90,128,96,0.10);
  --good-bg-strong: rgba(90,128,96,0.20);
  --bad-bg:         rgba(163,80,80,0.10);
  --bad-bg-strong:  rgba(163,80,80,0.22);
  --warn-bg:        rgba(181,139,74,0.10);
  --warn-bg-strong: rgba(181,139,74,0.22);
  --neutral-bg:     rgba(107,115,123,0.10);
  --neutral-bg-strong: rgba(107,115,123,0.20);
  --bar-range-bg: linear-gradient(90deg, rgba(163,80,80,0.45) 0%, rgba(181,139,74,0.40) 50%, rgba(90,128,96,0.45) 100%);
  --shadow-card:  none;
  --shadow-hover: 0 1px 4px rgba(60,50,30,.05);
  --shadow-modal: 0 20px 60px rgba(60,50,30,.12);
}

/* === Dark (Carbon) === */
:root[data-theme="obsidian"] {
  /* Obsidian — warm near-black, brushed gold, quiet-luxury desk.
     Distinct from `dark`, which is a cool neutral grey-blue: this one is warm
     (green/olive-shifted blacks, cream ink) and swaps the terracotta accent for
     gold. Semantic colours are raised in saturation and lightness because the
     light-mode greens and reds sit too close to the background on true black
     and read as muddy rather than as signal. */
  color-scheme: dark;
  --bg:          #0E0F0C;
  --bg-elev:     #15160F;
  --surface-glass: rgba(21,22,15,0.72);
  --bg-dark:     #080907;
  --bg-dark-elev:#0E0F0C;
  --ink:         #EDEAE0;
  --ink-2:       #B5B2A6;
  --ink-3:       #7A786E;
  --ink-on-dark: #EDEAE0;
  --ink-on-dark-2:#B5B2A6;
  --ink-on-dark-3:#7A786E;
  --line:        #2C2C24;
  --line-soft:   #1E1F19;
  --line-dark:   #2C2C24;
  --mountain-pine: #D6CEB8;
  --mountain-pine-bg: rgba(214, 206, 184, 0.06);
  --mountain-pine-bg-strong: rgba(214, 206, 184, 0.12);
  --delicate-white:#EDEAE0;
  --accent:        #C9A227;
  --accent-soft:   #A88A20;
  --accent-bright: #E0BC4A;
  --accent-bg:     rgba(201, 162, 39, 0.10);
  --accent-bg-strong: rgba(201, 162, 39, 0.18);
  --good:    #6FBF87;
  --warn:    #D9AE5A;
  --elevated:#E8A06A;
  --bad:     #D97070;
  --neutral: #8E8C82;
  --good-bg:        rgba(111,191,135,0.12);
  --good-bg-strong: rgba(111,191,135,0.22);
  --bad-bg:         rgba(217,112,112,0.12);
  --bad-bg-strong:  rgba(217,112,112,0.24);
  --warn-bg:        rgba(217,174,90,0.12);
  --warn-bg-strong: rgba(217,174,90,0.24);
  --neutral-bg:     rgba(142,140,130,0.14);
  --neutral-bg-strong: rgba(142,140,130,0.26);
  --bar-range-bg: linear-gradient(90deg, rgba(217,112,112,0.50) 0%, rgba(217,174,90,0.45) 50%, rgba(111,191,135,0.50) 100%);
  --shadow-card:  none;
  --shadow-hover: 0 1px 4px rgba(0,0,0,.5);
  --shadow-modal: 0 20px 60px rgba(0,0,0,.7);
}

:root[data-theme="dark"] {
  color-scheme: dark;
  --bg:          #0D0E10;
  --bg-elev:     #161819;
  --surface-glass: rgba(22,24,25,0.72);
  --bg-dark:     #000000;
  --bg-dark-elev:#0D0E10;

  --ink:         #E6E7E8;
  --ink-2:       #A8ABAF;
  --ink-3:       #6B6E72;
  --ink-on-dark: #E6E7E8;
  --ink-on-dark-2:#A8ABAF;
  --ink-on-dark-3:#6B6E72;

  --line:        #2A2D30;
  --line-soft:   #1D1F22;
  --line-dark:   #2A2D30;

  --mountain-pine: #6E8C8F;
  --mountain-pine-bg: rgba(110, 140, 143, 0.08);
  --mountain-pine-bg-strong: rgba(110, 140, 143, 0.16);
  --delicate-white:#E6E7E8;

  --accent:        #D08E80;
  --accent-soft:   #B07266;
  --accent-bright: #E0A398;
  --accent-bg:     rgba(208, 142, 128, 0.10);
  --accent-bg-strong: rgba(208, 142, 128, 0.18);

  --good:    #7FA88B;
  --warn:    #CDA56C;
  --elevated:#E89878;
  --bad:     #CC7C7C;
  --neutral: #8A8D91;
  --good-bg:        rgba(127,168,139,0.12);
  --good-bg-strong: rgba(127,168,139,0.22);
  --bad-bg:         rgba(204,124,124,0.12);
  --bad-bg-strong:  rgba(204,124,124,0.24);
  --warn-bg:        rgba(205,165,108,0.12);
  --warn-bg-strong: rgba(205,165,108,0.24);
  --neutral-bg:     rgba(138,141,145,0.14);
  --neutral-bg-strong: rgba(138,141,145,0.26);
  --bar-range-bg: linear-gradient(90deg, rgba(204,124,124,0.50) 0%, rgba(205,165,108,0.45) 50%, rgba(127,168,139,0.50) 100%);
  --shadow-card:  none;
  --shadow-hover: 0 1px 4px rgba(0,0,0,.4);
  --shadow-modal: 0 20px 60px rgba(0,0,0,.6);
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html, body { height: 100%; overflow: hidden; }

body {
  font-family: var(--font-mono);
  background: var(--bg);
  color: var(--ink);
  font-size: 13px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-feature-settings: "ss01", "cv11";
}

/* ============ APP SHELL ============ */
.app {
  display: grid;
  grid-template-rows: 48px 1fr 28px;
  height: 100vh;
}

/* ===== TOP BAR ===== */
.topbar {
  display: flex;
  align-items: center;
  background: var(--bg-dark);
  color: var(--ink-on-dark);
  border-bottom: 1px solid var(--line-dark);
  padding: 0 20px;
  gap: 32px;
}
.brand {
  display: flex;
  align-items: center;
  gap: 10px;
  font-family: var(--font-mono);
  font-weight: 700;
  font-size: 15px;
  letter-spacing: 0.04em;
}
.brand .mark {
  width: 22px; height: 22px;
  position: relative;
}
.brand .mark svg { width: 100%; height: 100%; }
.brand .mark svg line { stroke: var(--accent); stroke-width: 1.5; }

.nav { display: flex; gap: 2px; height: 100%; }
.nav-item {
  height: 100%;
  padding: 0 18px;
  display: flex;
  align-items: center;
  cursor: pointer;
  color: var(--ink-on-dark-2);
  font-size: 12px;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  font-weight: 500;
  border-bottom: 2px solid transparent;
  transition: color 0.15s, border-color 0.15s;
  user-select: none;
  text-decoration: none;
}
.nav-item:hover { color: var(--ink-on-dark); }
.nav-item.active {
  color: var(--accent-bright);
  border-bottom-color: var(--accent-bright);
}

.topbar-spacer { flex: 1; }

.topbar-meta {
  display: flex;
  gap: 18px;
  align-items: center;
  color: var(--ink-on-dark-3);
  font-size: 11px;
  letter-spacing: 0.05em;
}
.topbar-meta .meta-item { display: flex; gap: 6px; align-items: center; }
.topbar-meta .dot {
  width: 6px; height: 6px;
  background: var(--good);
  border-radius: 50%;
}

/* ===== MAIN ===== */
.main { overflow: hidden; position: relative; }
.view {
  height: 100%;
  overflow-y: auto;
}

/* ===== STATUS BAR ===== */
.statusbar {
  background: var(--bg-dark);
  color: var(--ink-on-dark-3);
  border-top: 1px solid var(--line-dark);
  display: flex;
  align-items: center;
  padding: 0 20px;
  font-size: 10px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  gap: 24px;
}
.statusbar .status-item { display: flex; gap: 6px; align-items: center; }
.statusbar .status-item.ok::before {
  content: '';
  width: 6px; height: 6px;
  background: var(--good);
  border-radius: 50%;
}
.statusbar-spacer { flex: 1; }
.chain-display { color: var(--accent-bright); }

/* ===== Common section labels ===== */
.section-label {
  font-size: 10px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-3);
  font-weight: 600;
  margin-bottom: 10px;
  display: flex;
  align-items: center;
  gap: 10px;
}
.section-label.compact { margin-bottom: 8px; }
.accent-tag {
  font-size: 9px;
  letter-spacing: 0.08em;
  color: var(--accent);
  background: var(--accent-bg);
  padding: 2px 7px;
  text-transform: none;
  font-weight: 500;
  letter-spacing: 0.04em;
}

/* ===== Pills (filters) ===== */
.pill {
  font-size: 11px;
  padding: 5px 12px;
  border: 1px solid var(--line);
  background: var(--bg-elev);
  color: var(--ink-2);
  cursor: pointer;
  letter-spacing: 0.02em;
  user-select: none;
  transition: all 0.12s;
}
.pill:hover { border-color: var(--accent); color: var(--accent); }
.pill.active {
  border-color: var(--accent);
  background: var(--accent-bg);
  color: var(--accent);
  font-weight: 500;
}

/* ===== Auth-deny page ===== */
.deny-shell {
  font-family: var(--font-mono);
  padding: 60px 40px;
  color: var(--ink);
  background: var(--bg);
  height: 100vh;
}
.deny-shell h2 { font-size: 22px; margin-bottom: 12px; font-weight: 600; }
.deny-shell p { color: var(--ink-2); margin-bottom: 6px; }
.deny-shell code {
  font-family: 'JetBrains Mono', monospace;
  background: var(--bg-elev);
  padding: 2px 6px;
  border: 1px solid var(--line);
  font-size: 12px;
}


/* ===== FOOTER ===== */
.site-footer {
  border-top: 1px solid var(--line-soft);
  padding: 18px 0 4px;
  margin-top: 56px;
}
.site-footer .footer-disclaimer {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 400;
  color: var(--ink-3);
  line-height: 1.5;
  letter-spacing: 0;
  margin: 0 0 4px;
}
.site-footer .footer-brand {
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 400;
  color: var(--ink-3);
  letter-spacing: 0;
  margin: 0;
}

/* === SHARED PAGE-SHELL STANDARD (S36) — body prefix bumps specificity === */
body .page-shell {
  max-width: none !important;
  margin: 0 auto !important;
  padding: 32px 48px 60px !important;
}
body .page-shell h1 {
  font-size: 28px !important;
  font-weight: 600 !important;
  letter-spacing: -0.01em !important;
  color: var(--mountain-pine) !important;
}


/* S38 — Topbar search */
.topbar-search {
  position: relative;
  flex: 1 1 auto;
  max-width: 480px;
  margin: 0 auto;
}
.topbar-search input {
  width: 100%;
  background: #ffffff;
  border: 1px solid rgba(255,255,255,0.25);
  color: #1a1a1a;
  caret-color: #1a1a1a;
  font-family: 'JetBrains Mono', monospace;
  font-size: 12px;
  font-weight: 500;
  padding: 7px 12px;
  border-radius: 3px;
  outline: none;
  letter-spacing: 0.02em;
}
.topbar-search input:focus {
  border-color: #ffffff;
  background: #ffffff;
}
.topbar-search input::placeholder {
  color: #8a8a8a;
  font-size: 12px;
  font-weight: 400;
}
.topbar-search-results {
  position: absolute;
  top: calc(100% + 4px);
  left: 0;
  right: 0;
  background: var(--bg-elev);
  border: 1px solid var(--line);
  border-radius: 2px;
  max-height: 360px;
  overflow-y: auto;
  z-index: 1000;
  box-shadow: 0 4px 16px rgba(0,0,0,0.12);
}
.topbar-search-results .ts-row {
  display: grid;
  grid-template-columns: 130px 1fr auto;
  gap: 10px;
  align-items: baseline;
  padding: 7px 10px;
  cursor: pointer;
  border-bottom: 1px solid var(--line-soft);
  font-size: 11px;
}
.topbar-search-results .ts-row:last-child { border-bottom: none; }
.topbar-search-results .ts-row:hover,
.topbar-search-results .ts-row.active { background: var(--bg); }
.topbar-search-results .ts-sym {
  font-family: 'JetBrains Mono', monospace;
  font-size: 12px;
  font-weight: 600;
  color: var(--ink);
  letter-spacing: 0.02em;
}
.topbar-search-results .ts-name {
  font-size: 12px;
  color: var(--ink-2);
  font-weight: 400;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.topbar-search-results .ts-meta {
  font-size: 9px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-3);
}
.topbar-search-results .ts-empty {
  padding: 10px;
  font-size: 11px;
  color: var(--ink-3);
  text-align: center;
}




/* ============================================================
   S43c — card polish overlay (Light theme only)
   Adds soft elevation + slightly stronger borders on common
   card classes. Beige and Dark themes intentionally skip.
   ============================================================ */
:root[data-theme="light"] .ops-card,
:root[data-theme="light"] .section,
:root .ops-card,
:root .section {
  box-shadow: 0 1px 2px rgba(20, 24, 30, 0.04), 0 2px 8px rgba(20, 24, 30, 0.03);
}
:root[data-theme="light"] .pulse,
:root[data-theme="light"] .event-card,
:root[data-theme="light"] .scorecell,
:root[data-theme="light"] .indices,
:root .pulse,
:root .event-card,
:root .scorecell,
:root .indices {
  box-shadow: 0 1px 2px rgba(20, 24, 30, 0.04);
}

/* Beige + Dark: explicit no-shadow override */
:root[data-theme="warm"] .ops-card,
:root[data-theme="warm"] .section,
:root[data-theme="dark"] .ops-card,
:root[data-theme="dark"] .section,
:root[data-theme="warm"] .pulse,
:root[data-theme="warm"] .event-card,
:root[data-theme="warm"] .scorecell,
:root[data-theme="warm"] .indices,
:root[data-theme="dark"] .pulse,
:root[data-theme="dark"] .event-card,
:root[data-theme="dark"] .scorecell,
:root[data-theme="dark"] .indices,
:root[data-theme="obsidian"] .ops-card,
:root[data-theme="obsidian"] .section,
:root[data-theme="obsidian"] .pulse,
:root[data-theme="obsidian"] .event-card,
:root[data-theme="obsidian"] .scorecell,
:root[data-theme="obsidian"] .indices {
  box-shadow: none;
}

/* ============================================================
   S43c — Card vocabulary (global, theme-aware)
   Single source of truth for .section, .score-card, .description.
   Per-template inline rules with the same selectors should be
   deleted in favour of these globals.
   ============================================================ */

/* ---------- Section card (the workhorse) ---------- */
.section {
  background: var(--bg-elev);
  border: 0.5px solid var(--line-soft);
  border-left: 3px solid var(--mountain-pine);
  border-radius: var(--radius-sm);
  padding: var(--space-6) var(--space-7);
  margin-bottom: var(--space-7);
  box-shadow: var(--shadow-card);
}
/* S46e header mono: portfolio/detailed section headers are nested in a flex
   div, so .section > h2 (direct child) misses them. Catch nested h2 too. */
.section h2 { font-family: var(--font-mono); }

.section > h2, .section-head h2 {
  margin: 0 0 var(--space-6) 0;
  font-family: var(--font-mono);
  font-size: var(--text-lg);
  font-weight: 600;
  letter-spacing: var(--track-widest);
  text-transform: uppercase;
  color: var(--mountain-pine);
}

/* ---------- Hero score card (QS / MS / CP) ---------- */
.score-card {
  background: var(--bg-elev);
  border: 0.5px solid var(--line-soft);
  border-left: 3px solid var(--mountain-pine);
  border-radius: var(--radius-sm);
  padding: var(--space-7) var(--space-7) var(--space-7);
  box-shadow: var(--shadow-card);
}

/* Score-card supporting text */
.score-card .lbl {
  font-family: var(--font-mono);
  font-size: var(--text-sm);
  font-weight: 600;
  letter-spacing: var(--track-wider);
  text-transform: uppercase;
  color: var(--mountain-pine);
  margin-bottom: var(--space-4);
}
.score-card .sub {
  font-size: var(--text-md);
  color: var(--ink-3);
  margin-top: var(--space-3);
}
.score-card .score-change {
  font-family: var(--font-mono);
  font-size: var(--text-md);
  color: var(--ink-3);
}

/* Hero numeric inside score-card (Mountain Pine ink, 42px) */
.score-card .val,
.score-card .num,
.score-card .score-value {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 42px;
  font-weight: 600;
  color: var(--mountain-pine);
  letter-spacing: -0.01em;
  line-height: 1;
}
/* Thin score/progress bar (QS/MS/VS fill) */
.score-bar {
  position: relative;
  height: 4px;
  background: var(--line-soft, rgba(0,0,0,0.08));
  border-radius: 2px;
  overflow: hidden;
}
.score-bar > span {
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 0%;
  background: var(--good);
  transition: width 0.3s ease;
}
/* Panel: no left accent / heavy shadow on its sections (clean cards+chart) */
.pn-page .section {
  border-left: none !important;
  box-shadow: none !important;
  padding-left: 0 !important;
  background: transparent !important;
}
/* Panel dark-mode card: subtle border glow (shadow-card=none in dark) */
:root[data-theme="dark"] .pn-card,
:root[data-theme="dim"] .pn-card {
  box-shadow: 0 0 0 0.5px rgba(255,255,255,0.06), 0 2px 8px rgba(0,0,0,0.4);
}
@keyframes pn-blink {
  0%,100% { background: transparent; }
  20%,60% { background: var(--accent-bg, rgba(168,88,77,0.12)); }
}
.pn-blink { animation: pn-blink 3s ease; }
.pn-bottom { display: grid; grid-template-columns: 3fr 7fr; gap: var(--space-3); margin-top: var(--space-3); align-items: stretch; }
.pn-bottom > .pn-card { min-height: 450px; }
.pn-chart-card #pn-chart { height: 360px !important; margin-top: var(--space-3); }
.pn-side-panel { display: flex; flex-direction: column; gap: 0; }
.pn-side-panel .pn-card { flex: 1; min-height: 200px; }
.pn-side-label { font-family: var(--font-mono); font-size: var(--text-sm); font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-3); padding-bottom: var(--space-3); border-bottom: 0.5px solid var(--line-soft); margin-bottom: var(--space-3); }
.pn-placeholder { display: flex; align-items: center; justify-content: center; min-height: 200px; color: var(--ink-3); font-family: var(--font-mono); font-size: var(--text-sm); }
/* Compass — the narrated read on the name (short form; White Paper is long) */
.pn-compass-card { grid-column: span 1; display: flex; flex-direction: column; }
.pn-compass {
  flex: 1; overflow: hidden;
  font-family: var(--font-mono);
  font-size: var(--text-md);
  line-height: 1.72;
  color: var(--ink-2);
  margin-top: var(--space-3);
}
.pn-compass p { margin: 0 0 var(--space-4) 0; }

/* Panel layout classes. These were inline styles: every one theme-aware (no
   hardcoded colour survived the audit), but inline beats a stylesheet rule at
   equal specificity, which is exactly what broke the Compass mobile stacking --
   the media query could not override a grid-row set inline. */
.pn-chart-mount { width: 100%; height: 360px; position: relative; margin-top: var(--space-3); }
.pn-chart-mount--full { width: 100%; height: calc(100vh - 160px); position: relative; }
.pn-chart-card { padding: var(--space-5); display: flex; flex-direction: column; }
.pn-pillrow { display: flex; gap: var(--space-1); align-items: center; flex-wrap: wrap; }
.pn-pillrow--ov { margin-bottom: var(--space-3); }
.pn-granrow {
  display: none; gap: var(--space-1); margin-top: var(--space-2);
  padding-bottom: var(--space-3); border-bottom: 0.5px solid var(--line-soft);
}
.pn-granrow--ov { margin-top: 0; margin-left: var(--space-2); padding-bottom: 0; border-bottom: 0; }
.pn-overlay {
  display: none; position: fixed; inset: 0; z-index: 900;
  background: var(--bg); padding: var(--space-6);
}
.pn-ov-head { display: flex; align-items: center; margin-bottom: var(--space-4); }
.pn-ov-sym { font-size: 1.2rem; color: var(--ink-1); }
.pn-ohlc {
  font-size: var(--text-sm); font-weight: 600; color: var(--ink-2);
  margin-top: var(--space-3); min-height: 1.3em;
  white-space: nowrap; overflow: hidden;
}
.pn-ohlc--ov {
  font-size: 1.05rem; margin-top: 0; margin-bottom: var(--space-2); min-height: 1.4em;
}
.pn-sym-h1 { font-size: 2rem; margin-bottom: var(--space-2); }
.pn-idline { display: flex; align-items: center; flex-wrap: wrap; gap: var(--space-3); }
/* One ghost button. VIEW CHART and CLOSE carried near-identical inline
   declarations differing only in padding and ink step. */
.pn-btn-ghost {
  background: none; border: 0.5px solid var(--line-soft);
  border-radius: var(--radius-sm); padding: 3px 10px;
  font-family: var(--font-mono); font-size: var(--text-xs);
  color: var(--ink-3); cursor: pointer; margin-left: var(--space-2);
}
.pn-btn-ghost--lg {
  padding: 4px 14px; font-size: var(--text-sm); color: var(--ink-2);
  margin-left: auto;
}
.pn-btn-ghost__ico { vertical-align: middle; margin-right: 4px; }

/* Five-column header: label | book | prose | book figures | instrument props.
   Column 5 spans every book row -- governance and liquidity belong to the
   name, not to either call. */
.pn-cs-head5 {
  display: grid;
  grid-template-columns: 72px 56px minmax(360px,1fr) auto;
  min-width: 640px;
  gap: var(--space-3) var(--space-5);
  padding-bottom: var(--space-4); margin-bottom: var(--space-4);
  border-bottom: 0.5px solid var(--line-soft);
  align-items: start;
}
.pn-cs5-stancelbl {
  grid-column: 1; grid-row: 1 / -1; padding-top: 3px; margin-bottom: 0;
  white-space: normal; line-height: 1.35;
}
.pn-cs5-book { grid-column: 2; padding-top: 3px; margin-bottom: 0; color: var(--ink-2); font-weight: 600; }
.pn-cs5-prose { grid-column: 3; min-width: 0; }
.pn-cs5-prose p { margin: 0; }
.pn-cs5-na { color: var(--ink-3); font-style: italic; }
.pn-cs5-figs { grid-column: 4; display: flex; gap: var(--space-5); }
.pn-cs-row.pn-cs-row--props { grid-template-columns: 72px 56px minmax(360px,1fr) auto; min-width: 640px; }
.pn-cs-props { display: flex; flex-direction: column; gap: var(--space-3); padding-left: var(--space-5); }
/* Fixed height, scrolled inline: the Compass grows with the narration and was
   pushing its card past the chart beside it. */
.pn-compass { max-height: 420px; overflow-y: auto; overflow-x: auto; -webkit-overflow-scrolling: touch; max-width: 100%; }
.pn-compass-card { overflow: hidden; }
@media (max-width: 900px) {
  .pn-cs-head5 { grid-template-columns: 1fr; }
  .pn-cs5-stancelbl, .pn-cs5-book, .pn-cs5-prose, .pn-cs5-figs, .pn-cs5-props {
    grid-column: 1 !important; grid-row: auto !important;
  }
  .pn-cs5-figs { flex-wrap: wrap; }
  .pn-cs5-book { margin-top: var(--space-3); }
  .pn-cs-row, .pn-cs-row.pn-cs-row--props { grid-template-columns: 1fr; gap: var(--space-2); }
  .pn-cs-row__l { grid-column: 1 !important; word-break: normal; }
  .pn-cs-row__b { grid-column: 1 !important; }
  .pn-cs-props { padding-left: 0; flex-direction: row; gap: var(--space-5); }
  .pn-cs-figs { flex-wrap: wrap; gap: var(--space-4); }
  .pn-compass { max-height: none; }
}

/* Compass sections. The flat paragraph list read as one wall of prose with no
   signposting; a reader hunting the regime read had to scan for it. Gutter
   labels make the same narration scannable, and the numbers checked first
   (stance, terms) lift out of the prose into a header strip. */
.pn-cs-head {
  display: flex; align-items: flex-start; gap: var(--space-6);
  padding: 0 0 var(--space-4) 0; margin-bottom: var(--space-4);
  border-bottom: 0.5px solid var(--line-soft);
}
.pn-cs-head__l { flex: 1 1 auto; min-width: 0; }
.pn-cs-head__prose p { margin: 0; }
.pn-cs-head__r { align-items: flex-start; }
.pn-cs-fig--stance .pn-cs-fig__v { font-size: var(--text-xl); }
.pn-cs-head__r { display: flex; gap: var(--space-6); flex: 0 0 auto; }
.pn-cs-lbl {
  font-family: var(--font-mono); font-size: var(--text-2xs);
  letter-spacing: var(--track-wide); text-transform: uppercase;
  color: var(--ink-3); margin-bottom: var(--space-2);
}
.pn-cs-stance {
  font-family: var(--font-mono); font-size: var(--text-h2);
  font-weight: 600; line-height: 1.1; min-height: 1.2em;
}
.pn-cs-stance .v { font-weight: 700; }
.pn-cs-badges { margin-top: var(--space-2); display: flex; gap: var(--space-2); flex-wrap: wrap; }
.pn-cs-fig { min-width: 84px; }
.pn-cs-fig__v {
  font-family: var(--font-mono); font-size: var(--text-lg);
  font-weight: 600; color: var(--ink); line-height: 1.2; min-height: 1.2em;
}
.pn-cs-fig__p { font-family: var(--font-mono); font-size: var(--text-xs); min-height: 1.2em; }
.pn-cs-row {
  display: grid; grid-template-columns: 72px 56px 1fr; gap: var(--space-5);
  padding: var(--space-4) 0; border-bottom: 0.5px solid var(--line-soft);
}
.pn-cs-row:last-child { border-bottom: 0; }
.pn-cs-row__l {
  grid-column: 1; padding-top: 3px; margin-bottom: 0;
  white-space: normal; line-height: 1.35; word-break: break-word;
}
.pn-cs-row__b { grid-column: 2 / 4; min-width: 0; }
.pn-cs-row__b p:last-child { margin-bottom: 0; }
.pn-cs-figs {
  display: flex; gap: var(--space-6); margin-top: var(--space-3);
  padding-top: var(--space-3); border-top: 0.5px solid var(--line-soft);
}
/* Below the panel breakpoint the 128px gutter squeezes the prose into a
   column too narrow to read, so the label stacks above it instead. */
@media (max-width: 900px) {
  .pn-cs-row { grid-template-columns: 1fr; gap: var(--space-2); }
  .pn-cs-head { flex-direction: column; gap: var(--space-4); }
  .pn-cs-head__r { flex-wrap: wrap; }
}
.pn-compass .v { font-weight: 600; color: var(--mountain-pine); }
.pn-compass .v.good { color: var(--good); }
.pn-compass .v.warn { color: var(--warn); }
.pn-compass .v.bad  { color: var(--bad); }
.pn-compass .v.muted { color: var(--ink-3); font-weight: 600; }
.tone-good   { color: var(--good); }
.tone-bad    { color: var(--bad); }
.tone-warn   { color: var(--warn); }
.tone-muted  { color: var(--ink-3); }
.tone-info   { color: var(--mountain-pine); }
.pn-div { color: var(--line); margin: 0 var(--space-2); }
.pn-mt-1 { margin-top: var(--space-1); }
.pn-mt-4 { margin-top: var(--space-4); }
.pn-hidden { display: none; }
.pn-compass .cursor {
  display: inline-block; width: 7px; height: 1em;
  background: var(--accent); vertical-align: -0.15em;
  animation: pn-caret 1s step-end infinite;
}
@keyframes pn-caret { 0%,100% { opacity: 1; } 50% { opacity: 0; } }
/* "XYDeR is typing" — shown while the Compass narration renders */
.pn-typing {
  display: flex; align-items: center; gap: var(--space-3);
  margin-bottom: var(--space-4);
}
.pn-typing__who {
  font-family: var(--font-mono); font-size: var(--text-sm);
  font-weight: 700; letter-spacing: 0.08em; color: var(--accent);
}
.pn-typing__dots { display: inline-flex; gap: 4px; }
.pn-typing__dots i {
  width: 4px; height: 4px; border-radius: 50%;
  background: var(--accent); opacity: 0.35;
  animation: pn-dot 1.05s infinite ease-in-out;
}
.pn-typing__dots i:nth-child(2) { animation-delay: 0.15s; }
.pn-typing__dots i:nth-child(3) { animation-delay: 0.30s; }
@keyframes pn-dot {
  0%, 80%, 100% { opacity: 0.25; transform: translateY(0); }
  40%           { opacity: 1;    transform: translateY(-2px); }
}
/* Floating right-edge slide-out nav */
/* The float nav is absolutely positioned, so every page carrying it
   needs to be its containing block. */
.pn-page, .av-page, .wp-page { position: relative; }
.pn-floatnav {
  position: absolute; top: 16px; right: var(--space-6);
  z-index: 800; display: flex; align-items: flex-start;
}
/* Lens has a 40% bot rail on the right — push the handle in to clear it.
   Panel/other pages keep the default edge position above. */
.lens-split .pn-floatnav,
#lens-floatnav {
  right: calc(40% + var(--space-6));
}
.pn-floatnav__handle {
  display: flex; align-items: center; justify-content: center;
  width: 30px; height: 64px; cursor: pointer;
  background: var(--bg-elev); color: var(--accent);
  border: 0.5px solid var(--line-soft); border-right: none;
  border-radius: var(--radius-sm) 0 0 var(--radius-sm);
  box-shadow: -2px 0 8px rgba(0,0,0,0.15);
  transition: color 0.15s;
}
.pn-floatnav__handle:hover { color: var(--accent-bright, var(--accent)); }
.pn-floatnav__menu {
  display: flex; flex-direction: column; gap: 2px;
  max-width: 0; overflow: hidden; opacity: 0;
  background: var(--bg-elev); border: 0.5px solid var(--line-soft);
  border-radius: var(--radius-sm) 0 0 var(--radius-sm);
  box-shadow: -4px 0 16px rgba(0,0,0,0.2);
  transition: max-width 0.25s ease, opacity 0.2s ease, padding 0.25s ease;
  padding: 0;
}
.pn-floatnav:hover .pn-floatnav__menu {
  max-width: 320px; opacity: 1; padding: var(--space-4);
}
.pn-floatnav__inner {
  display: flex; flex-direction: column; gap: 2px;
  width: 100%; height: 100%;
  background: var(--bg-elev);
}

.pn-floatnav:hover .pn-floatnav__handle svg { transform: rotate(180deg); transition: transform 0.25s; }
.pn-floatnav__item {
  background: none; border: none; text-align: left; white-space: nowrap;
  font-family: var(--font-mono); font-size: var(--text-md);
  letter-spacing: 0.05em; text-transform: uppercase;
  color: var(--ink-2); padding: var(--space-4) var(--space-5);
  border-radius: var(--radius-sm); cursor: pointer; transition: background 0.12s, color 0.12s;
}
.pn-floatnav__item:hover { background: var(--accent-bg, rgba(168,88,77,0.1)); color: var(--accent); }

/* Topbar avatar (shared, all pages) */
.topbar-avatar {
  display: inline-flex; align-items: center; justify-content: center;
  width: 32px; height: 32px; border-radius: 50%;
  background: var(--accent-bg, rgba(168,88,77,0.14));
  color: var(--accent);
  border: 1px solid var(--accent);
  font-family: var(--font-mono); font-size: var(--text-md); font-weight: 700;
  text-decoration: none; line-height: 1; text-align: center;
  padding-top: 1px;
  transition: background 0.12s, color 0.12s;
}
.topbar-avatar:hover { background: var(--accent); color: var(--bg); }

/* Lens live status dot */
.lens-status-dot {
  display: inline-block; width: 7px; height: 7px; border-radius: 50%;
  margin-right: var(--space-2); vertical-align: middle;
}
.lens-status-dot--open { background: var(--good); animation: lens-pulse-open 1.6s ease-in-out infinite; }
.lens-status-dot--shut { background: var(--bad); animation: lens-pulse-shut 2.2s ease-in-out infinite; }
@keyframes lens-pulse-open { 0%,100% { opacity: 1; } 50% { opacity: 0.35; } }
@keyframes lens-pulse-shut { 0%,100% { opacity: 1; } 50% { opacity: 0.45; } }
/* Toast */
.pn-toast {
  position: fixed; bottom: 32px; left: 50%; transform: translateX(-50%) translateY(20px);
  background: var(--bg-elev); color: var(--ink-1);
  border: 0.5px solid var(--line-soft); border-radius: var(--radius-sm);
  box-shadow: 0 4px 20px rgba(0,0,0,0.25);
  padding: var(--space-4) var(--space-6); font-family: var(--font-mono);
  font-size: var(--text-md); letter-spacing: 0.03em;
  opacity: 0; pointer-events: none; z-index: 950;
  transition: opacity 0.2s, transform 0.2s;
}
.pn-toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }
/* ===== Instrument Panel (/panel) ===== */
.pn-grid { display: grid; gap: var(--space-3); margin-bottom: var(--space-3); }
.pn-grid--4 { grid-template-columns: repeat(4, 1fr); }
.pn-grid--3 { grid-template-columns: repeat(3, 1fr); }
.pn-grid--2 { grid-template-columns: repeat(2, 1fr); }
.pn-section { margin-top: var(--space-7); }
.pn-toggle { margin-left: var(--space-5); font-weight: 400; text-transform: none; letter-spacing: normal; }
/* Row 1 carries four cards: one merged DIRECTION card (delivery|intraday side
   by side) plus the three scores. DIRECTION is wider since it holds two calls;
   the reclaimed width goes to QS/MS/VS. */
.pn-grid--5 { grid-template-columns: 1.1fr 1.1fr 1fr 1fr 1fr; }
.pn-grid--5 .pn-num { font-size: 26px; }

/* Merged DIRECTION card: two columns split by a vertical rule. */
.pn-dir-split { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-4);
  margin-top: var(--space-2); }
.pn-dir-col { min-width: 0; }
.pn-dir-col + .pn-dir-col { padding-left: var(--space-4);
  border-left: 0.5px solid var(--line-soft); }
.pn-dir-tag { font-size: 10px; letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--ink-3); margin-bottom: var(--space-1); }

/* K call line: call + conviction on one baseline. */
.pn-call-line { display: flex; align-items: baseline; justify-content: space-between;
  gap: var(--space-3); }
/* magnitude: compact inline label + value, right-aligned on the call baseline. */
.pn-conv-hero { display: inline-flex; align-items: baseline; gap: var(--space-1); }
.pn-conv-hero:empty { display: none; }
.pn-conv-lbl { font-size: 10px; letter-spacing: 0.06em; color: var(--ink-3);
  text-transform: uppercase; }
.pn-conv-val { font-size: 15px; color: var(--ink-2); }

/* K meta footer: target / stop / timing, demoted, spread under a hairline. */
.pn-meta-footer { display: flex; flex-wrap: wrap; justify-content: space-between;
  gap: var(--space-3); margin-top: var(--space-3); padding-top: var(--space-3);
  border-top: 0.5px solid var(--line-soft); font-size: 12px; }
.pn-meta-footer:empty { display: none; }
.pn-meta-item { white-space: nowrap; }
.pn-meta-lbl { color: var(--ink-3); }
.pn-clock { vertical-align: -2px; }
.pn-num--na { color: var(--ink-3); font-size: 24px; }
.pn-card {
  background: var(--bg-elev);
  border: 0.5px solid var(--line-soft);
  border-radius: var(--radius-sm);
  padding: var(--space-6) var(--space-7);
  box-shadow: var(--shadow-card);
}
.pn-label {
  font-family: var(--font-mono);
  font-size: var(--text-sm);
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--mountain-pine);
}
.pn-num {
  font-family: var(--font-mono);
  font-size: 38px;
  font-weight: 600;
  line-height: 1;
  letter-spacing: -0.01em;
  color: var(--mountain-pine);
  margin-top: var(--space-4);
  display: flex;
  align-items: baseline;
  gap: var(--space-2);
}
.pn-num--sm { font-size: 22px; }
.pn-num .pn-unit { font-size: var(--text-md); color: var(--ink-3); font-weight: 500; }
.pn-sub { font-family: var(--font-mono); font-size: var(--text-md); color: var(--ink-3); margin-top: var(--space-3); }
.pn-arrow { font-size: 0.7em; }
.pn-52bar {
  position: relative; height: 6px; margin-top: var(--space-4);
  background: linear-gradient(to right, var(--bad-bg-strong), var(--line-soft), var(--good-bg-strong));
  border-radius: 3px;
}
.pn-52bar > span {
  position: absolute; top: -2px; width: 2px; height: 10px;
  background: var(--mountain-pine); border-radius: 1px;
}
.pn-fund { display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-5); }
.pn-fund > div { display: flex; flex-direction: column; gap: 2px; }
.pn-fund .pn-fk { font-family: var(--font-mono); font-size: var(--text-xs); text-transform: uppercase; letter-spacing: 0.06em; color: var(--ink-3); }
.pn-fund .pn-fv { font-family: var(--font-mono); font-size: var(--text-lg); font-weight: 600; color: var(--mountain-pine); }
.pn-pill {
  display: inline-flex; align-items: center; gap: 4px;
  font-family: var(--font-mono); font-size: var(--text-xs); font-weight: 600;
  letter-spacing: 0.05em; padding: 3px 10px; border-radius: 999px;
}
.pn-pill--clean { background: var(--good-bg-strong); color: var(--good); }
.pn-pill--warn  { background: var(--warn-bg-strong, rgba(180,140,40,0.12)); color: var(--warn); }
.pn-pill--bad   { background: var(--bad-bg-strong); color: var(--bad); }
.hero-num {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 42px;
  font-weight: 600;
  color: var(--mountain-pine);
  letter-spacing: -0.01em;
  line-height: 1;
}
/* Semantic colour overrides for hero values */
.hero-num--good, .score-card .val.cp-pos, .score-card .num.cp-pos { color: var(--good); }
.hero-num--bad,  .score-card .val.cp-neg, .score-card .num.cp-neg { color: var(--bad); }
/* Universal up/down semantics — apply on any element */
.cp-pos { color: var(--good); }
.cp-neg { color: var(--bad); }
/* delta--good / delta--bad: algo.html's deltaClass() output. Must beat .table tbody td. */
.delta--good { color: var(--good); }
.delta--bad  { color: var(--bad); }
.table tbody td .delta--good, .table tbody td .cell-val.delta--good, .table tbody td .cell-delta.delta--good { color: var(--good); }
.table tbody td .delta--bad,  .table tbody td .cell-val.delta--bad,  .table tbody td .cell-delta.delta--bad  { color: var(--bad); }
/* Table cells: cp semantics must beat .table tbody td base colour */
.table tbody td.cp-pos, .table tbody td.cp-pos .cell-val, .table tbody td.cp-pos .cell-delta { color: var(--good); }
.table tbody td.cp-neg, .table tbody td.cp-neg .cell-val, .table tbody td.cp-neg .cell-delta { color: var(--bad); }
/* cp semantics on inner spans (cell-val/cell-delta) when the TD itself has no cp class */
.table tbody td .cell-val.cp-pos, .table tbody td .cell-delta.cp-pos, .table tbody td span.cp-pos { color: var(--good); }
.table tbody td .cell-val.cp-neg, .table tbody td .cell-delta.cp-neg, .table tbody td span.cp-neg { color: var(--bad); }

/* ---------- Description block (loose info strip) ---------- */
.description {
  background: var(--bg-elev);
  border: 0.5px solid var(--line-soft);
  border-radius: var(--radius-sm);
  padding: var(--space-5) var(--space-6);
  margin-bottom: var(--space-6);
  font-size: var(--text-lg);
  line-height: 1.6;
  color: var(--ink-2);
  box-shadow: var(--shadow-card);
}

/* ============================================================
   S45a — Component: .shell (page wrapper)
   Replaces: .today-shell .home-body .lens-shell .wl-shell
             .audit-shell .ops-shell .algo-shell .instr-shell .sn-page
   Every page wraps its content in <main class="shell">.
   ============================================================ */
.shell {
  max-width: none;
  margin: 0;
  padding: var(--space-7) var(--space-7) var(--space-7);  /* 20 / 20 / 20 */
  height: 100%;
  overflow-y: auto;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font-sans);
  font-size: var(--text-md);
}
@media (max-width: 1024px) {
  .shell { padding: var(--space-7) var(--space-6) var(--space-6); }
}
@media (max-width: 640px) {
  .shell { padding: var(--space-6) var(--space-5) var(--space-5); }
}

/* ============================================================
   S45a — Component: .page-head
   Replaces: .today-head .sn-head .wl-head .audit-head .ops-head
             .algo-head .instr-head .instr-titlerow
   Markup contract:
     <header class="page-head">
       <div class="page-head__title">
         <h1>Page Title</h1>
         <p class="meta">optional subtitle/timestamp</p>
       </div>
       <div class="page-head__actions">
         <button>...</button>
       </div>
     </header>
   ============================================================ */
.page-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: var(--space-6);
  padding-bottom: var(--space-5);
  margin-bottom: var(--space-6);
  border-bottom: 0.5px solid var(--line-soft);
}
.page-head__title {
  flex: 1 1 auto;
  min-width: 0;
}
.page-head__title > h1 {
  font-family: var(--font-mono);
  font-size: var(--text-h1);
  font-weight: 500;
  line-height: 1.05;
  letter-spacing: var(--track-tight);
  color: var(--mountain-pine);
  margin: 0;
}
.page-head__title > .meta {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  letter-spacing: var(--track-wide);
  text-transform: uppercase;
  color: var(--ink-3);
  margin: calc(var(--space-3) + 2px) 0 0 0;  /* +2px nudge (SS1) */
  display: inline-flex;
  align-items: center;
  gap: var(--space-3);
}

/* Status dot — pairs with .meta for fresh/stale signalling */
.status-dot {
  display: inline-block;
  width: 7px;
  height: 7px;
  border-radius: 999px;
  background: var(--neutral);
  flex-shrink: 0;
  animation: prism-dot-pulse 1.6s ease-in-out infinite;
}
.meta.is-fresh .status-dot { background: var(--good); box-shadow: 0 0 0 2px var(--good-bg-strong); }
.meta.is-stale .status-dot { background: var(--bad);  box-shadow: 0 0 0 2px var(--bad-bg-strong); }
.page-head__actions {
  display: flex;
  gap: var(--space-3);
  align-items: center;
  flex: 0 0 auto;
}
@media (max-width: 640px) {
  .page-head { flex-direction: column; align-items: stretch; }
  .page-head__actions { justify-content: flex-end; }
}

/* ============================================================
   S45a — Component: .grid (layout primitive)
   ============================================================ */
.grid { display: grid; gap: var(--space-3); }
.grid--cols-2 { grid-template-columns: repeat(2, 1fr); }
.grid--cols-3 { grid-template-columns: repeat(3, 1fr); }
.grid--cols-4 { grid-template-columns: repeat(4, 1fr); }
.grid--cols-5 { grid-template-columns: repeat(5, 1fr); }
.grid--cols-6 { grid-template-columns: repeat(6, 1fr); }
.grid--cols-7 { grid-template-columns: repeat(7, 1fr); }
.grid--cols-8 { grid-template-columns: repeat(8, 1fr); }
.grid--main-rail { grid-template-columns: 1fr 320px; }
.grid--auto { grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); }
.grid--gap-tight { gap: var(--space-2); }
.grid--gap-loose { gap: var(--space-5); }
@media (max-width: 1024px) {
  .grid--cols-6, .grid--cols-7, .grid--cols-8 { grid-template-columns: repeat(4, 1fr); }
}
@media (max-width: 768px) {
  .grid--cols-4, .grid--cols-5, .grid--cols-6, .grid--cols-7, .grid--cols-8 { grid-template-columns: repeat(2, 1fr); }
  .grid--main-rail { grid-template-columns: 1fr; }
}
@media (max-width: 480px) {
  .grid--cols-3, .grid--cols-4, .grid--cols-5, .grid--cols-6, .grid--cols-7, .grid--cols-8 { grid-template-columns: 1fr; }
}

/* ============================================================
   S45a — Component: .row
   ============================================================ */
.row {
  display: grid;
  align-items: center;
  gap: var(--space-4);
  padding: var(--space-4) var(--space-5);
  border-bottom: 0.5px solid var(--line-soft);
  transition: background var(--transition-fast), box-shadow var(--transition-fast);
}
.row:last-child { border-bottom: 0; }
.row:hover {
  background: var(--bg);
  box-shadow: inset 2px 0 0 var(--mountain-pine);
}
.row--head {
  font-family: var(--font-mono);
  font-size: var(--text-2xs);
  color: var(--ink-3);
  letter-spacing: var(--track-wider);
  text-transform: uppercase;
  background: var(--bg);
  border-bottom-color: var(--line);
}
.row--head:hover { background: var(--bg); box-shadow: none; }
.row--link { cursor: pointer; text-decoration: none; color: inherit; }

/* ============================================================
   S45a — Component: .page-tabs
   ============================================================ */
.page-tabs {
  display: inline-flex;
  align-items: center;
  gap: var(--space-3);
  font-family: var(--font-mono);
}
.page-tabs .tab {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  background: var(--bg-elev);
  border: 0.5px solid var(--line);
  border-radius: var(--radius-sm);
  font-family: var(--font-mono);
  font-size: var(--text-sm);
  font-weight: 500;
  letter-spacing: var(--track-wide);
  text-transform: uppercase;
  color: var(--ink);
  padding: var(--space-4) var(--space-6);
  cursor: pointer;
  transition: background var(--transition-fast), color var(--transition-fast), border-color var(--transition-fast);
}
.page-tabs .tab:hover {
  background: var(--bg);
  border-color: var(--mountain-pine);
  color: var(--mountain-pine);
}
.page-tabs .tab.is-active {
  background: var(--mountain-pine);
  border-color: var(--mountain-pine);
  color: #fff;
}
.page-tabs .tab--danger {
  background: var(--bad);
  border-color: var(--bad);
  color: #fff;
}
.page-tabs .tab .caret { font-size: var(--text-2xs); opacity: 0.7; }

/* ============================================================
   S45a — Component: .card (lighter surface, semantic accent)
   Markup:
     <div class="card card--{info|good|bad|warn} card--clickable?">
       <div class="lbl">LABEL</div>
       <div class="val">VALUE</div>
       <div class="delta">±DELTA</div>
       <svg class="spark spark--{good|bad}" viewBox="0 0 100 26" preserveAspectRatio="none">
         <polygon class="spark__fill" points="..."/>
         <polyline class="spark__line" points="..."/>
         <circle class="spark__dot" cx="100" cy="..." r="2.2"/>
       </svg>
     </div>
   ============================================================ */
.card {
  background: var(--bg-elev);
  border: 0.5px solid var(--line-soft);
  border-left: 3px solid var(--neutral);
  border-radius: var(--radius-sm);
  padding: var(--space-4) var(--space-5);
  box-shadow: var(--shadow-card);
  transition: box-shadow var(--transition-base), border-color var(--transition-base);
}
.card--clickable { cursor: pointer; }
.card--clickable:hover { box-shadow: var(--shadow-hover); }
.card--info { border-left-color: var(--mountain-pine); }
.card--good { border-left-color: var(--good); }
.card--bad  { border-left-color: var(--bad); }
.card--warn { border-left-color: var(--warn); }
.card--elevated { border-left-color: var(--elevated); }

.card > .lbl,
.card .kv > .lbl {
  font-family: var(--font-mono);
  font-size: var(--text-2xs);
  font-weight: 700;
  letter-spacing: var(--track-wider);
  text-transform: uppercase;
  color: var(--mountain-pine);
  margin: 0 0 var(--space-3) 0;
}
.card > .val {
  font-family: var(--font-mono);
  font-size: var(--text-xl);
  font-weight: 500;
  color: var(--ink);
  line-height: 1.1;
}
.card > .delta {
  font-family: var(--font-mono);
  font-size: var(--text-sm);
  margin-top: var(--space-2);
}

/* Sparkline — area + line + endpoint dot */
.spark {
  width: 100%;
  height: 24px;
  margin-top: var(--space-3);
  display: block;
  overflow: visible;
}
.spark__line { fill: none; stroke: var(--neutral); stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.spark__fill { fill: var(--neutral); opacity: 0.12; }
.spark__dot  { fill: var(--neutral); }
.spark--good .spark__line, .spark--good .spark__dot { stroke: var(--good); fill: var(--good); }
.spark--good .spark__fill { fill: var(--good); opacity: 0.12; }
.spark--bad  .spark__line, .spark--bad  .spark__dot { stroke: var(--bad); fill: var(--bad); }
.spark--bad  .spark__fill { fill: var(--bad); opacity: 0.12; }
.spark--info .spark__line, .spark--info .spark__dot { stroke: var(--mountain-pine); fill: var(--mountain-pine); }
.spark--info .spark__fill { fill: var(--mountain-pine); opacity: 0.12; }

/* ============================================================
   S45a — Utility components (text & state helpers)
   ============================================================ */
/* .mono — tabular-nums for any monospaced numeric */
.mono { font-family: var(--font-mono); font-variant-numeric: tabular-nums; }

/* .lbl — uppercase metadata label (everywhere) */
.lbl {
  font-family: var(--font-mono);
  font-size: var(--text-2xs);
  font-weight: 500;
  letter-spacing: var(--track-wider);
  text-transform: uppercase;
  color: var(--ink-3);
}

/* .meta — small timestamp / secondary text */
.meta {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  letter-spacing: var(--track-wide);
  text-transform: uppercase;
  color: var(--ink-3);
}

/* .value — emphasised numeric in body context */
.value {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  font-size: var(--text-lg);
  font-weight: 500;
  color: var(--ink);
}

/* .title — generic surface title (smaller than .section > h2) */
.title {
  font-family: var(--font-mono);
  font-size: var(--text-md);
  font-weight: 600;
  letter-spacing: var(--track-wider);
  text-transform: uppercase;
  color: var(--mountain-pine);
}

/* .empty-state — "no data" placeholder */
.empty-state {
  padding: var(--space-7) var(--space-6);
  text-align: center;
  font-family: var(--font-mono);
  font-size: var(--text-sm);
  color: var(--ink-3);
  letter-spacing: var(--track-wide);
  text-transform: uppercase;
}

/* .copy-hash — clickable hash chip (audit) */
.empty-state.is-error { color: var(--bad); }
.copy-hash {
  font-family: var(--font-mono);
  font-size: var(--text-sm);
  color: var(--ink-3);
  cursor: pointer;
  padding: 1px 4px;
  border-radius: var(--radius-xs);
  transition: background var(--transition-fast), color var(--transition-fast);
}
.copy-hash:hover {
  background: var(--bg);
  color: var(--mountain-pine);
}
.copy-hash.is-copied { color: var(--good); }

/* ============================================================
   S45a — State modifiers (apply alongside any component)
   ============================================================ */
/* Engaged / selected / live */
.is-active, .is-open, .is-alive, .is-live, .is-on, .is-fresh {
  /* component-specific styles attach via .component.is-active */
}

/* Loading — spinning or pulsing */
.is-loading, .is-busy {
  opacity: 0.55;
  pointer-events: none;
  cursor: wait;
}
.is-spin {
  animation: prism-spin 800ms linear infinite;
}
@keyframes prism-spin {
  to { transform: rotate(360deg); }
}

/* Disabled */
.is-disabled, [disabled] {
  opacity: 0.4;
  pointer-events: none;
  cursor: not-allowed;
}

/* Stale */
.is-stale { /* paired with .meta + .status-dot rules above */ }

/* Semantic colour states (text-level) */
.is-good    { color: var(--good); }
.is-bad     { color: var(--bad); }
.is-warn    { color: var(--warn); }
.is-neutral { color: var(--neutral); }

/* Hidden / shown */
.is-hidden { display: none !important; }
.is-visible { display: block; }

/* ============================================================
   S45a — Controls: .btn .input .toggle .star
   ============================================================ */
/* .btn — universal button */
.btn {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  font-family: var(--font-mono);
  font-size: var(--text-sm);
  font-weight: 500;
  letter-spacing: var(--track-wide);
  text-transform: uppercase;
  padding: var(--space-3) var(--space-6);
  border-radius: var(--radius-sm);
  border: 0.5px solid var(--line);
  background: var(--bg-elev);
  color: var(--ink);
  cursor: pointer;
  transition: background var(--transition-base), color var(--transition-base), border-color var(--transition-base), transform var(--transition-fast);
}
.btn:hover {
  background: var(--bg-elev);
  border-color: var(--mountain-pine);
  color: var(--mountain-pine);
}
.btn:active { transform: scale(0.97); }

.btn--primary { background: var(--mountain-pine); color: #fff; border-color: var(--mountain-pine); }
.btn--primary:hover { background: var(--mountain-pine); border-color: var(--mountain-pine); color: #fff; filter: brightness(0.92); }

.btn--ghost { background: transparent; border-color: transparent; color: var(--ink-2); }
.btn--ghost:hover { background: var(--bg); color: var(--mountain-pine); border-color: transparent; }

.btn--danger { background: var(--bad); color: #fff; border-color: var(--bad); }
.btn--danger:hover { background: var(--bad); border-color: var(--bad); color: #fff; filter: brightness(0.92); }

.btn--icon { padding: var(--space-3) var(--space-3); }
.btn--sm   { font-size: var(--text-xs); padding: var(--space-2) var(--space-5); }
.btn--lg   { font-size: var(--text-md); padding: var(--space-4) var(--space-7); }

/* .input — text field */
.input {
  font-family: var(--font-mono);
  font-size: var(--text-sm);
  padding: var(--space-3) var(--space-5);
  border: 0.5px solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--bg-elev);
  color: var(--ink);
  transition: border-color var(--transition-base), box-shadow var(--transition-base);
}
.input:focus {
  outline: none;
  border-color: var(--mountain-pine);
  box-shadow: 0 0 0 3px rgba(61, 85, 96, 0.08);
}
.input::placeholder { color: var(--ink-3); }

/* .toggle — segmented control / pill toggle */
.toggle {
  display: inline-flex;
  border: 0.5px solid var(--line);
  border-radius: var(--radius-sm);
  overflow: hidden;
  background: var(--bg-elev);
}
.toggle__opt {
  font-family: var(--font-mono);
  font-size: var(--text-sm);
  letter-spacing: var(--track-wide);
  text-transform: uppercase;
  padding: var(--space-3) var(--space-5);
  background: transparent;
  border: none;
  color: var(--ink-2);
  cursor: pointer;
  transition: background var(--transition-fast), color var(--transition-fast);
}
.toggle__opt:hover { color: var(--mountain-pine); }
.toggle__opt.is-active { background: var(--mountain-pine); color: #fff; }

/* .star — favourite toggle */
.star {
  font-size: var(--text-xl);
  color: var(--ink-3);
  cursor: pointer;
  transition: color var(--transition-fast);
}
.star:hover { color: var(--warn); }
.star.is-fav { color: var(--warn); }

/* ============================================================
   S45a — Data display: chip pill dot bar staleness kv table
   ============================================================ */

/* .chip — small tag (sentiment, source, magnitude, gov) */
.chip {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  font-family: var(--font-mono);
  font-size: var(--text-2xs);
  font-weight: 500;
  letter-spacing: var(--track-wide);
  padding: 2px var(--space-3);
  border-radius: var(--radius-xs);
  background: var(--bg);
  color: var(--ink-2);
  border: 0.5px solid transparent;
}
.chip--info { background: rgba(61,85,96,0.08);  color: var(--mountain-pine); border-color: rgba(61,85,96,0.18); }
.chip--good { background: var(--good-bg); color: var(--good);           border-color: var(--good-bg-strong); }
.chip--bad  { background: var(--bad-bg); color: var(--bad);            border-color: var(--bad-bg-strong); }
.chip--warn { background: var(--warn-bg); color: var(--warn);             border-color: var(--warn-bg-strong); }

/* .pill — rounded pill (status / score / direction) */
.pill {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  font-weight: 500;
  padding: 2px var(--space-5);
  border-radius: var(--radius-pill);
  background: var(--bg);
  color: var(--ink-2);
}
.pill--up      { background: var(--good-bg-strong); color: var(--good); }
.pill--down    { background: var(--bad-bg-strong);  color: var(--bad); }
.pill--neutral { background: var(--neutral-bg-strong); color: var(--neutral); }
.pill--info    { background: rgba(61,85,96,0.12);   color: var(--mountain-pine); }

/* .dot — status indicator */
.dot {
  display: inline-block;
  width: 7px;
  height: 7px;
  border-radius: var(--radius-pill);
  background: var(--neutral);
  flex-shrink: 0;
}
.dot--good { background: var(--good); box-shadow: 0 0 0 2px var(--good-bg-strong); }
.dot--bad  { background: var(--bad);  box-shadow: 0 0 0 2px var(--bad-bg-strong); }
.dot--warn { background: var(--warn); box-shadow: 0 0 0 2px var(--warn-bg-strong); }
.dot--info { background: var(--mountain-pine); box-shadow: 0 0 0 2px rgba(61,85,96,0.18); }
.dot--pulse { animation: prism-dot-pulse 1.6s ease-in-out infinite; }
@keyframes prism-dot-pulse {
  0%, 100% { opacity: 1; }
  50%      { opacity: 0.4; }
}

/* .bar — solid bar (default green) */
.bar {
  display: inline-block;
  height: 6px;
  border-radius: 2px;
  background: var(--good);
  vertical-align: middle;
}
.bar--bad     { background: var(--bad); }
.bar--info    { background: var(--mountain-pine); }
.bar--neutral { background: var(--neutral); }

/* .bar--track — track with filled inner bar */
.bar--track {
  position: relative;
  display: block;
  background: var(--line-soft);
  border-radius: var(--radius-pill);
  overflow: visible;
}
.bar--track > .bar {
  position: absolute;
  left: 0;
  top: 0;
  height: 100%;
  border-radius: var(--radius-pill);
}

/* .bar--range — 52W range gradient + CMP marker */
.bar--range {
  position: relative;
  height: 6px;
  border-radius: var(--radius-pill);
  background: var(--bar-range-bg);
}
.bar--range > .bar__marker {
  position: absolute;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 10px;
  height: 10px;
  border-radius: var(--radius-pill);
  background: var(--mountain-pine);
  box-shadow: 0 0 0 2px var(--bg-elev), 0 0 0 3px rgba(61,85,96,0.22);
}

/* .staleness — data freshness label */
.staleness {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  font-family: var(--font-mono);
  font-size: var(--text-2xs);
  letter-spacing: var(--track-wide);
  text-transform: uppercase;
}
.staleness--fresh   { color: var(--good); }
.staleness--stale   { color: var(--warn); }
.staleness--missing { color: var(--bad); }

/* .kv — key-value block (modals, drill-downs) */
.kv {
  display: grid;
  grid-template-columns: 110px 1fr;
  gap: var(--space-2) var(--space-6);
  font-family: var(--font-mono);
  font-size: var(--text-sm);
}
.kv > .k {
  font-family: var(--font-mono);
  font-size: var(--text-2xs);
  color: var(--ink-3);
  letter-spacing: var(--track-wide);
  text-transform: uppercase;
  padding-top: 1px;
}
.kv > .v { color: var(--ink); }

/* .table — generic data table */
.table {
  width: 100%;
  border-collapse: collapse;
  font-family: var(--font-mono);
  font-size: var(--text-md);
}
.table thead th {
  font-family: var(--font-mono);
  font-size: var(--text-2xs);
  font-weight: 500;
  letter-spacing: var(--track-wider);
  text-transform: uppercase;
  color: var(--ink-3);
  text-align: left;
  padding: var(--space-3) var(--space-5);
  border-bottom: 0.5px solid var(--line);
  background: var(--bg);
}
.table tbody td {
  padding: var(--space-4) var(--space-5);
  border-bottom: 0.5px solid var(--line-soft);
  color: var(--ink);
}
.table tbody tr:last-child td { border-bottom: 0; }
.table tbody tr {
  transition: background var(--transition-fast), box-shadow var(--transition-fast);
}
.table tbody tr:hover {
  background: var(--bg);
  box-shadow: inset 2px 0 0 var(--mountain-pine);
  cursor: pointer;
}
.table .num { text-align: right; font-variant-numeric: tabular-nums; }

/* Portfolio cockpit positions table (S46e): fixed layout so the 12 columns
   sit tight and slack does not dump between Gov and Realised. */
.table--pf { table-layout: auto; width: 100%; }
.table--pfc { table-layout: auto; width: 100%; }
.table--pfc th, .table--pfc td { white-space: nowrap; }
.table--pfc th:first-child, .table--pfc td:first-child { padding-left: var(--space-6); }
.table--pf th, .table--pf td { white-space: nowrap; padding-left: var(--space-4); padding-right: var(--space-4); }
.table--pf th:first-child, .table--pf td:first-child { padding-left: var(--space-6); }
.table--pf th:last-child, .table--pf td:last-child { padding-right: var(--space-6); }
/* Trend sparkline column: fixed comfortable width, no stretch. */
.table--pf th:nth-child(5), .table--pf td:nth-child(5) { width: 90px; }

/* ============================================================
   S45a — Modal / Drawer / Timeline (overlay surfaces)
   ============================================================ */

/* .modal — centred overlay (replaces .iw-modal, .sn-modal, .wlp-modal, .pm-modal, .fin-overlay, .drill-backdrop, .key-modal) */
.modal-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(20, 24, 30, 0.42);
  z-index: 60;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-7);
  animation: prism-fade-in var(--transition-slow);
}
@keyframes prism-fade-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}

.modal {
  background: var(--bg-elev);
  border: 0.5px solid var(--line-soft);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-modal);
  max-width: 720px;
  width: 100%;
  max-height: 88vh;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  animation: prism-modal-in var(--transition-slow) cubic-bezier(0.4, 0, 0.2, 1);
}
@keyframes prism-modal-in {
  from { opacity: 0; transform: translateY(8px) scale(0.985); }
  to   { opacity: 1; transform: translateY(0)   scale(1); }
}
.modal--wide { max-width: 1080px; }
.modal--narrow { max-width: 420px; }

.modal__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--space-5) var(--space-6);
  border-bottom: 0.5px solid var(--line-soft);
  background: var(--bg);
}
.modal__title {
  font-family: var(--font-mono);
  font-size: var(--text-md);
  font-weight: 600;
  letter-spacing: var(--track-wider);
  text-transform: uppercase;
  color: var(--mountain-pine);
}
.modal__close {
  background: transparent;
  border: none;
  font-size: var(--text-xl);
  cursor: pointer;
  color: var(--ink-3);
  padding: 0 var(--space-3);
  line-height: 1;
  transition: color var(--transition-fast);
}
.modal__close:hover { color: var(--bad); }
.modal__body {
  padding: var(--space-6);
  overflow-y: auto;
  flex: 1;
  font-size: var(--text-md);
  color: var(--ink);
  line-height: 1.6;
}
.modal__meta {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  color: var(--ink-3);
  letter-spacing: var(--track-wide);
  text-transform: uppercase;
}

/* .drawer — side panel sliding from right (replaces .overview-drawer) */
.drawer-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(20, 24, 30, 0.32);
  z-index: 55;
  animation: prism-fade-in var(--transition-base);
}
.drawer {
  position: fixed;
  top: 0;
  right: 0;
  height: 100%;
  width: 480px;
  max-width: 100vw;
  background: var(--bg-elev);
  border-left: 0.5px solid var(--line);
  box-shadow: var(--shadow-modal);
  z-index: 56;
  display: flex;
  flex-direction: column;
  animation: prism-drawer-in var(--transition-slow) cubic-bezier(0.4, 0, 0.2, 1);
}
@keyframes prism-drawer-in {
  from { transform: translateX(100%); }
  to   { transform: translateX(0); }
}
.drawer--wide { width: 720px; }
.drawer--wide.dcm-host, #decomp-drawer.drawer--wide { width: 820px; }
.drawer__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--space-5) var(--space-6);
  border-bottom: 0.5px solid var(--line-soft);
  background: var(--bg);
}
.drawer__title {
  font-family: var(--font-mono);
  font-size: var(--text-md);
  font-weight: 600;
  letter-spacing: var(--track-wider);
  text-transform: uppercase;
  color: var(--mountain-pine);
}
.drawer__close {
  background: transparent;
  border: none;
  font-size: var(--text-xl);
  cursor: pointer;
  color: var(--ink-3);
  padding: 0 var(--space-3);
  line-height: 1;
  transition: color var(--transition-fast);
}
.drawer__close:hover { color: var(--bad); }
.drawer__body {
  padding: var(--space-6);
  overflow-y: auto;
  flex: 1;
}

/* .timeline — vertical event chain (audit, position history, modal timelines) */
.timeline {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  position: relative;
  padding-left: var(--space-5);
}
.timeline::before {
  content: "";
  position: absolute;
  left: 4px;
  top: 6px;
  bottom: 6px;
  width: 1px;
  background: var(--line-soft);
}
.timeline__item {
  position: relative;
  padding-left: var(--space-5);
}
.timeline__item::before {
  content: "";
  position: absolute;
  left: -8px;
  top: 4px;
  width: 9px;
  height: 9px;
  border-radius: var(--radius-pill);
  background: var(--bg-elev);
  border: 2px solid var(--mountain-pine);
}
.timeline__item.is-current::before { background: var(--mountain-pine); }
.timeline__item.is-bad::before     { border-color: var(--bad); }
.timeline__item.is-good::before    { border-color: var(--good); }
.timeline__time {
  font-family: var(--font-mono);
  font-size: var(--text-2xs);
  letter-spacing: var(--track-wide);
  text-transform: uppercase;
  color: var(--ink-3);
}
.timeline__title {
  font-size: var(--text-md);
  color: var(--ink);
  margin-top: 2px;
}

/* ============================================================
   S45a — Prism-specific composed components
   Most reuse .card / .chip / .dot / .bar / .spark with thin shell rules.
   ============================================================ */

/* .hero-score — big QS/MS/CP numeric (inside .score-card) */
.hero-score {
  font-family: var(--font-mono);
  font-size: var(--text-hero);
  font-weight: 500;
  color: var(--mountain-pine);
  letter-spacing: var(--track-tight);
  line-height: 1;
}
.hero-score--good { color: var(--good); }
.hero-score--bad  { color: var(--bad); }
.hero-score--neutral { color: var(--neutral); }

/* .pillar — P1/P2/P3 drill-down section (replaces .pillar, .pillar-row, .pillar-section, .subpillar) */
.pillar {
  margin-bottom: var(--space-6);
}
.pillar__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--space-3) var(--space-5);
  background: var(--bg);
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: background var(--transition-fast);
}
.pillar__head:hover { background: var(--line-soft); }
.pillar__title {
  font-family: var(--font-mono);
  font-size: var(--text-md);
  font-weight: 600;
  letter-spacing: var(--track-wide);
  text-transform: uppercase;
  color: var(--mountain-pine);
}
.pillar__body {
  padding: var(--space-4) var(--space-5);
}
.subpillar {
  padding: var(--space-3) 0;
  border-bottom: 0.5px solid var(--line-soft);
}
.subpillar:last-child { border-bottom: 0; }

/* .gov-flag — governance ribbon (replaces .gov, .gov-row, .gov-code, .chip-gov, .gov-tag) */
.gov-flag {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  letter-spacing: var(--track-wide);
  padding: var(--space-2) var(--space-4);
  border-radius: var(--radius-sm);
  background: var(--warn-bg);
  color: #A87919;
  border: 0.5px solid var(--warn-bg-strong);
}
.gov-flag--severe {
  background: var(--bad-bg);
  color: var(--bad);
  border-color: var(--bad-bg-strong);
}
.gov-flag__code {
  font-weight: 600;
  letter-spacing: var(--track-wider);
}

/* .sentinel-event — event row (replaces .sentinel-event, .sentinel-row, .sw-row, .sn-stream-row, .iw-sentinel) */
.sentinel-event {
  display: grid;
  grid-template-columns: 60px 140px 1fr auto;
  gap: var(--space-5);
  align-items: center;
  padding: var(--space-4) var(--space-5);
  border-bottom: 0.5px solid var(--line-soft);
  transition: background var(--transition-fast), box-shadow var(--transition-fast);
  cursor: pointer;
}
.sentinel-event:last-child { border-bottom: 0; }
.sentinel-event:hover {
  background: var(--bg);
  box-shadow: inset 2px 0 0 var(--mountain-pine);
}
.sentinel-event__time {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  color: var(--ink-3);
  letter-spacing: var(--track-wide);
  text-transform: uppercase;
}
.sentinel-event__entity {
  font-family: var(--font-mono);
  font-size: var(--text-md);
  font-weight: 600;
  color: var(--mountain-pine);
}
.sentinel-event__summary {
  font-size: var(--text-md);
  color: var(--ink);
  line-height: 1.5;
}
.sentinel-event__tags {
  display: flex;
  gap: var(--space-2);
  justify-content: flex-end;
}

/* .sentinel-pulse — live counter card (replaces .sn-pulse, .sw-pulse) */
.sentinel-pulse {
  display: flex;
  align-items: center;
  gap: var(--space-5);
  padding: var(--space-5) var(--space-6);
}
.sentinel-pulse__counter {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-1);
}
.sentinel-pulse__value {
  font-family: var(--font-mono);
  font-size: var(--text-h2);
  font-weight: 500;
  color: var(--ink);
}
.sentinel-pulse__label {
  font-family: var(--font-mono);
  font-size: var(--text-2xs);
  color: var(--ink-3);
  letter-spacing: var(--track-wider);
  text-transform: uppercase;
}
.sentinel-pulse__counter--gov .sentinel-pulse__value  { color: var(--warn); }
.sentinel-pulse__counter--high .sentinel-pulse__value { color: var(--bad); }
.sentinel-pulse__counter--breaking .sentinel-pulse__value { color: var(--bad); }

/* .cp-bar — Conviction Pressure visual (replaces .cp-bar, .cp-bar-detail, .cp-bar-wrap, .cp-fill-inner) */
.cp-bar {
  position: relative;
  height: 14px;
  background: var(--line-soft);
  border-radius: var(--radius-pill);
  overflow: hidden;
}
.cp-bar__fill {
  position: absolute;
  top: 0;
  bottom: 0;
  background: var(--bad);
  transition: width var(--transition-base);
}
.cp-bar__fill--good { background: var(--good); }
.cp-bar__midline {
  position: absolute;
  left: 50%;
  top: -2px;
  bottom: -2px;
  width: 1px;
  background: var(--ink-3);
}
.cp-bar__labels {
  display: flex;
  justify-content: space-between;
  margin-top: var(--space-2);
  font-family: var(--font-mono);
  font-size: var(--text-2xs);
  color: var(--ink-3);
  letter-spacing: var(--track-wide);
  text-transform: uppercase;
}

/* .lens-map — scatter map (replaces .map-col, .map-wrap, .map-svg, .marker, .grid-line, .axis-label, .quad-label) */
.lens-map { position: relative; }
.lens-map__svg { display: block; width: 100%; }
.lens-map__grid-line { stroke: var(--line-soft); stroke-width: 0.5; }
.lens-map__axis-label {
  font-family: var(--font-mono);
  font-size: var(--text-2xs);
  fill: var(--ink-3);
  letter-spacing: var(--track-wide);
  text-transform: uppercase;
}
.lens-map__quad-label {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  fill: var(--ink-2);
  letter-spacing: var(--track-wide);
  text-transform: uppercase;
}
.lens-map__marker {
  fill: var(--mountain-pine);
  stroke: var(--bg-elev);
  stroke-width: 1;
  cursor: pointer;
  transition: r var(--transition-fast), fill var(--transition-fast);
}
.lens-map__marker:hover { fill: var(--accent); r: 5; }
.lens-map__marker--good { fill: var(--good); }
.lens-map__marker--bad  { fill: var(--bad); }

/* .ati-narrative — LLM narrative panel (replaces .ati-box, .ati-section, .ati-text, .narrative-box) */
.ati-narrative {
  background: var(--bg-elev);
  border: 0.5px solid var(--line-soft);
  border-left: 3px solid var(--mountain-pine);
  border-radius: var(--radius-sm);
  padding: var(--space-5) var(--space-6);
  margin-bottom: var(--space-6);
}
.ati-narrative__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: var(--space-4);
}
.ati-narrative__title {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: var(--track-wider);
  text-transform: uppercase;
  color: var(--mountain-pine);
}
.ati-narrative__text {
  font-size: var(--text-md);
  line-height: 1.65;
  color: var(--ink-2);
}
.ati-narrative.is-loading .ati-narrative__text { color: var(--ink-3); font-style: italic; }

/* ============================================================
   S45a — Lens dashboard components (Watchlist/Portfolio/Indices/Market)
   ============================================================ */

/* 1. .lens-tabs — top-of-page tab strip */
/* Generic tabs primitive — Lens, Algo, future pages. .lens-* kept as aliases. */
.tabs, .lens-tabs { display: inline-flex; gap: 0; }
.tab, .lens-tab {
  font-family: var(--font-mono);
  font-size: var(--text-md);
  font-weight: 500;
  letter-spacing: var(--track-wide);
  text-transform: uppercase;
  padding: var(--space-4) var(--space-6);
  color: var(--ink-3);
  cursor: pointer;
  border-bottom: 2px solid transparent;
  display: inline-flex;
  align-items: center;
  gap: var(--space-3);
  transition: color var(--transition-base), border-color var(--transition-base);
}
.tab:hover, .lens-tab:hover { color: var(--mountain-pine); }
.tab.is-active, .lens-tab.is-active {
  color: var(--mountain-pine);
  border-bottom-color: var(--mountain-pine);
}
.tab__count, .lens-tab__count {
  font-size: var(--text-2xs);
  padding: 2px var(--space-3);
  border-radius: var(--radius-pill);
  background: var(--bg);
  color: var(--ink-2);
  letter-spacing: 0;
}
.tab.is-active .tab__count,
.lens-tab.is-active .lens-tab__count {
  background: var(--mountain-pine);
  color: var(--ink-on-dark);
}

/* 2. .watchlist-pills + .wpill — list selector */
.watchlist-pills {
  display: flex;
  gap: var(--space-2);
  flex-wrap: wrap;
  margin-bottom: var(--space-5);
}
.wpill {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  padding: var(--space-2) var(--space-5);
  border-radius: var(--radius-pill);
  background: var(--bg-elev);
  color: var(--ink-2);
  border: 0.5px solid var(--line);
  cursor: pointer;
  letter-spacing: var(--track-wide);
  text-transform: uppercase;
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  transition: background var(--transition-fast), color var(--transition-fast), border-color var(--transition-fast);
}
.wpill:hover { border-color: var(--mountain-pine); color: var(--mountain-pine); }
.wpill.is-active {
  background: var(--mountain-pine-bg-strong);
  color: var(--mountain-pine);
  border-color: var(--mountain-pine);
  font-weight: 700;
}
.wpill__count {
  display: none;
  font-size: var(--text-2xs);
  padding: 1px var(--space-3);
  border-radius: var(--radius-pill);
  background: var(--bg);
  color: var(--ink-2);
}
.wpill.is-active .wpill__count {
  background: var(--mountain-pine);
  color: var(--bg-elev);
  font-weight: 600;
}
.wpill--new {
  color: var(--ink-3);
  border-style: dashed;
}

/* 3. .dash — 12-col dashboard grid + .dash--with-rail */
.dash {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: var(--space-5);
  align-content: start;
}
.dash--with-rail {
  display: grid;
  grid-template-columns: 1fr 320px;
  gap: var(--space-4);
}
.dash--with-rail .dash {
  /* nested dash inside left column */
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: var(--space-3);
}

/* 4. .gcard — graph card with head + series toggles + time-frame strip */
.gcard {
  background: var(--bg-elev);
  border: 0.5px solid var(--line-soft);
  border-radius: var(--radius-sm);
  padding: var(--space-4) var(--space-5);
  box-shadow: var(--shadow-card);
}
.gcard__pickrow { display: flex; align-items: center; margin: var(--space-2) 0 var(--space-3); }
.gcard__footrow { display: flex; align-items: center; gap: var(--space-3); margin-top: 0; }
.gcard__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: var(--space-4);
}
.gcard__title {
  font-family: var(--font-mono);
  font-size: var(--text-sm);
  font-weight: 600;
  letter-spacing: var(--track-wider);
  text-transform: uppercase;
  color: var(--mountain-pine);
}

/* Series toggle chip — pill-style with colour swatch */
.s-tog {
  font-family: var(--font-mono);
  font-size: var(--text-2xs);
  padding: 2px var(--space-4);
  border-radius: var(--radius-pill);
  background: var(--bg-elev);
  color: var(--ink-3);
  cursor: pointer;
  letter-spacing: var(--track-wide);
  text-transform: uppercase;
  border: 0.5px solid var(--line);
  transition: background var(--transition-fast), color var(--transition-fast), border-color var(--transition-fast);
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
}
.s-tog__sw {
  width: 6px;
  height: 6px;
  border-radius: var(--radius-pill);
  background: currentColor;
}
.s-tog.is-active {
  background: var(--mountain-pine);
  color: #fff;
  border-color: var(--mountain-pine);
}
.s-tog.is-active.s-tog--good { background: var(--good); border-color: var(--good); }
.s-tog.is-active.s-tog--bad  { background: var(--bad);  border-color: var(--bad); }
.s-tog.is-active.s-tog--warn { background: var(--warn); border-color: var(--warn); }

/* Time-frame strip below graph */
.tf-row {
  display: flex;
  gap: 3px;
  justify-content: center;
  margin-top: var(--space-3);
  padding-top: var(--space-3);
  border-top: 0.5px solid var(--line-soft);
}
.tf {
  font-family: var(--font-mono);
  font-size: var(--text-2xs);
  padding: 2px var(--space-4);
  cursor: pointer;
  color: var(--ink-3);
  letter-spacing: var(--track-wide);
  border-radius: var(--radius-xs);
  transition: background var(--transition-fast), color var(--transition-fast);
}
.tf:hover { color: var(--mountain-pine); }
.tf.is-active {
  background: var(--mountain-pine);
  color: #fff;
}

/* 5. .card--coming-soon — placeholder variant */
.card--coming-soon {
  background: var(--bg);
  border: 0.5px dashed var(--line);
  cursor: not-allowed;
  box-shadow: none;
}
.card--coming-soon:hover {
  border-color: var(--line);
  box-shadow: none;
}
.card--coming-soon .lbl,
.card--coming-soon > .lbl {
  color: var(--ink-3);
}
.card--coming-soon .cs-body {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  color: var(--ink-3);
  line-height: 1.5;
  margin-top: var(--space-3);
}

/* 6. .idx-card — index snapshot card */
.idx-card {
  background: var(--bg-elev);
  border: 0.5px solid var(--line-soft);
  border-radius: var(--radius-sm);
  padding: var(--space-4) var(--space-5);
  box-shadow: var(--shadow-card);
  cursor: pointer;
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  transition: box-shadow var(--transition-base), border-color var(--transition-base);
}
.idx-card:hover { box-shadow: var(--shadow-hover); border-color: var(--mountain-pine); }
.idx-card--up   { border-left: 3px solid var(--good); padding-left: calc(var(--space-5) - 1px); }
.idx-card--down { border-left: 3px solid var(--bad);  padding-left: calc(var(--space-5) - 1px); }
.idx-card--warn { border-left: 3px solid var(--warn); padding-left: calc(var(--space-5) - 1px); }
.idx-card__top {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
}
.idx-card__name {
  font-family: var(--font-mono);
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--mountain-pine);
  letter-spacing: var(--track-wider);
  text-transform: uppercase;
}
.idx-card__time {
  font-family: var(--font-mono);
  font-size: var(--text-2xs);
  color: var(--ink-3);
  letter-spacing: var(--track-wide);
}
.idx-card__val {
  font-family: var(--font-mono);
  font-size: var(--text-xl);
  font-weight: 500;
  color: var(--ink);
  line-height: 1.1;
}
.idx-card__delta {
  font-family: var(--font-mono);
  font-size: var(--text-sm);
  font-weight: 600;
  display: inline-flex;
  align-items: center;
  gap: 3px;
}
.idx-card__delta.is-up   { color: var(--good); }
.idx-card__delta.is-down { color: var(--bad); }
.idx-card__delta.is-warn { color: var(--warn); }
.idx-card__meta {
  font-family: var(--font-mono);
  font-size: var(--text-2xs);
  color: var(--ink-3);
  letter-spacing: var(--track-wide);
  display: flex;
  justify-content: space-between;
}

/* 7. .contrib-row — sector contributors / detractors */
.contrib-row {
  display: grid;
  grid-template-columns: 80px 1fr 70px 50px;
  gap: var(--space-3);
  align-items: center;
  padding: var(--space-3) 0;
  border-bottom: 0.5px solid var(--line-soft);
  font-family: var(--font-mono);
  font-size: var(--text-sm);
  cursor: pointer;
  transition: color var(--transition-fast);
}
.contrib-row:last-child { border-bottom: 0; }
.contrib-row:hover { color: var(--mountain-pine); }
.contrib-row__sym { font-weight: 600; }
.contrib-row__bar-wrap {
  height: 6px;
  border-radius: var(--radius-pill);
  background: var(--line-soft);
  position: relative;
  overflow: hidden;
}
.contrib-row__bar-wrap > .fill {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  border-radius: var(--radius-pill);
}
.contrib-row__bar-wrap.is-up   > .fill { background: var(--good); }
.contrib-row__bar-wrap.is-down > .fill { background: var(--bad); }
.contrib-row__val {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  text-align: right;
}
.contrib-row__val.is-up   { color: var(--good); }
.contrib-row__val.is-down { color: var(--bad); }

.contrib-cols {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-5);
}
.contrib-cols__head {
  font-family: var(--font-mono);
  font-size: var(--text-2xs);
  color: var(--ink-3);
  letter-spacing: var(--track-wider);
  text-transform: uppercase;
  margin-bottom: var(--space-2);
  padding-bottom: var(--space-2);
  border-bottom: 0.5px solid var(--line);
}

/* 8. .donut — small donut for sector density / breakdowns */
.donut {
  display: inline-block;
  width: 60px;
  height: 60px;
  flex-shrink: 0;
}
.donut__bg   { fill: none; stroke: var(--line-soft); stroke-width: 4; }
.donut__seg  { fill: none; stroke-width: 4; transform: rotate(-90deg); transform-origin: center; }
.donut__seg--1 { stroke: var(--mountain-pine); }
.donut__seg--2 { stroke: var(--good); }
.donut__seg--3 { stroke: var(--warn); }
.donut__seg--4 { stroke: var(--bad); }
.donut__label {
  font-family: var(--font-mono);
  font-size: 7px;
  font-weight: 600;
  fill: var(--ink);
}
.donut-wrap {
  display: flex;
  align-items: center;
  gap: var(--space-4);
}
.donut-legend {
  display: flex;
  flex-direction: column;
  gap: 2px;
  flex: 1;
  font-family: var(--font-mono);
  font-size: var(--text-2xs);
}
.donut-legend__row {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  color: var(--ink-3);
}
.donut-legend__sw {
  width: 7px;
  height: 7px;
  border-radius: 2px;
  flex-shrink: 0;
}

/* 9. .cap-bar — capital fill bar (deployed vs total) */
.cap-bar {
  height: 6px;
  border-radius: var(--radius-pill);
  background: var(--line-soft);
  position: relative;
  margin-top: var(--space-3);
  overflow: hidden;
}
.cap-bar > .fill {
  position: absolute;
  left: 0;
  top: 0;
  height: 100%;
  background: var(--mountain-pine);
  border-radius: var(--radius-pill);
}
.cap-bar__sub {
  display: flex;
  justify-content: space-between;
  gap: var(--space-3);
  margin-top: var(--space-3);
  font-family: var(--font-mono);
  font-size: var(--text-2xs);
  color: var(--ink-3);
}
.cap-bar__sub .strong {
  color: var(--ink);
  font-weight: 600;
}


/* ---------- Lightweight-Charts attribution hide ---------- */
/* The v4.x library injects a TradingView watermark link into the chart
   container. We hide it via CSS rather than via options (option only
   exists in v5+). Applies to every chart on every page. */
#wl-conv-graph a[href*="tradingview"],
#wl-conv-graph a[title*="TradingView"],
.tv-lightweight-charts a[href*="tradingview"] {
  display: none !important;
}


/* ---------- Chart tooltip (shared across all charts) ---------- */
.chart-tt {
  position: absolute;
  z-index: 10;
  pointer-events: none;
  background: var(--bg-elev);
  border: 0.5px solid var(--line);
  border-radius: var(--radius-sm);
  padding: var(--space-3) var(--space-4);
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  line-height: 1.6;
  color: var(--ink);
  box-shadow: var(--shadow-card);
  min-width: 120px;
  white-space: nowrap;
}
.chart-tt__date {
  color: var(--ink-3);
  font-size: var(--text-2xs);
  margin-bottom: var(--space-1);
  letter-spacing: var(--track-wide);
  text-transform: uppercase;
}
.chart-tt__lbl {
  display: inline-block;
  min-width: 22px;
  font-weight: 500;
  color: var(--ink-2);
}

/* ===== Shared dropdown / popover menu =====================================
   Anchored popover used for index switcher, future card menus, etc.
   Parent must have .lens-dropdown-anchor (position: relative). */
.lens-dropdown-anchor { position: relative; }

.lens-dropdown-trigger {
  cursor: pointer;
  user-select: none;
}

.lens-dropdown {
  position: absolute;
  top: calc(100% + var(--space-2));
  right: var(--space-4);
  min-width: 180px;
  background: var(--bg-elev);
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-modal);
  padding: var(--space-2) 0;
  z-index: 50;
  display: none;
}
.lens-dropdown[data-open="true"] { display: block; }

.lens-dropdown__item {
  padding: var(--space-4) var(--space-5);
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  text-transform: uppercase;
  color: var(--ink);
  cursor: pointer;
  user-select: none;
  white-space: nowrap;
  letter-spacing: var(--track-wide);
  border-left: 3px solid var(--mountain-pine);
}
.lens-dropdown__item:hover { background: var(--accent-bg); }
.lens-dropdown[style*="overflow"] .lens-dropdown__item,
.lens-dropdown__item[style*="flex"] {
  border-left: none;
  padding-right: var(--space-6);
  gap: var(--space-6);
}
.lens-dropdown__item[style*="flex"] > span:first-child {
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0;
}
.lens-dropdown__item[style*="flex"] > span.meta {
  flex-shrink: 0; color: var(--ink-3);
}
.lens-dropdown__item[data-active="true"] {
  color: var(--accent);
  font-weight: 500;
}


/* ─────────────────────────────────────────────
   S45c — Watchlist auto-fit (Excel-style)
   Browser sizes each column to its widest cell, then distributes
   remaining width. Works for any future column add/remove.
   ───────────────────────────────────────────── */
#wl-table { width: 100%; table-layout: auto; }
#wl-table th, #wl-table td { white-space: nowrap; }


/* ─────────────────────────────────────────────
   S45c — Lens Sentinel rail: stop grid-stretch, scroll internally
   Container is .dash (#wl-dash). The aside.section is a grid sibling
   of the watchlist; without align-self it stretches to match a long list.
   ───────────────────────────────────────────── */
#wl-dash > aside.section {
  align-self: start;
  max-height: 80vh;
  display: flex;
  flex-direction: column;
}
#wl-dash > aside.section #wl-sentinel {
  flex: 1 1 auto;
  overflow-y: auto;
  min-height: 0;
}


/* ─────────────────────────────────────────────
   S45c — KPI cards with right-aligned sparkline
   Used by CP Momentum + Index cards on Lens
   ───────────────────────────────────────────── */
.card--with-spark .card__body {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: var(--space-3);
  margin-top: var(--space-2);
}
.card--with-spark .card__main { min-width: 0; }
.card--with-spark .card__spark {
  /* Was a fixed 80px thumbnail. renderSpark emits width as an SVG
     attribute, so the caller sizes it from clientWidth -- capping the
     container capped the graphic. Fills the space beside the number now,
     matching the price cards on Panel and Archivist. */
  min-width: 0;
  height: 46px;
  display: flex;
  align-items: center;
  justify-content: flex-end;
}
.card--with-spark .card__spark .spark {
  width: 100%;
  height: 100%;
}


/* ─────────────────────────────────────────────
   S45c — Lens Sentinel header
   Used by lens.html sentinel rail header
   ───────────────────────────────────────────── */
.lens-sn-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--space-4) var(--space-6);
  border-bottom: 0.5px solid var(--line-soft);
  gap: var(--space-3);
}
.lens-sn-head__left {
  display: flex;
  align-items: center;
  gap: var(--space-2);
}
.lens-sn-head .lens-sn-head__left h2 { margin: 0; line-height: 1; }
.lens-sn-head__dot { margin: 0; flex: 0 0 auto; }
.lens-sn-head__refresh { margin-left: var(--space-1); }
.lens-sn-head__right {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  margin-left: auto;
}


/* ─────────────────────────────────────────────
   S45c — Shared detail modal (.dm-*)
   Used via _detail_modal.html partial + openDetailModal helper
   ───────────────────────────────────────────── */
.dm-backdrop {
  position: fixed; inset: 0;
  background: rgba(0,0,0,0.5);
  display: none;
  align-items: center; justify-content: center;
  z-index: 1000;
}
.dm-backdrop.is-open { display: flex; }
.dm-card {
  background: var(--bg-elev);
  width: 1000px; max-width: 94vw;
  max-height: 90vh; overflow-y: auto;
  padding: var(--space-7) var(--space-7);
  box-shadow: 0 12px 40px rgba(0,0,0,0.18);
  position: relative;
  border-radius: 2px;
}
.dm-close {
  position: absolute; top: 10px; right: 12px;
  background: none; border: none;
  font-size: 22px; line-height: 1;
  color: var(--ink-3); cursor: pointer;
  padding: 0 6px;
}
.dm-close:hover { color: var(--ink); }
.dm-title {
  font-size: var(--text-lg);
  font-weight: 600;
  color: var(--ink);
  letter-spacing: -0.01em;
  margin-bottom: var(--space-5);
  padding-right: var(--space-7);
}
.dm-body { color: var(--ink); }
.dm-section { margin-bottom: var(--space-5); }
.dm-section:last-child { margin-bottom: 0; }
.dm-section-h {
  font-family: var(--font-mono);
  font-size: var(--text-2xs);
  letter-spacing: var(--track-wider);
  text-transform: uppercase;
  color: var(--ink-3);
  margin-bottom: var(--space-3);
}
.dm-row {
  display: grid;
  grid-template-columns: 60px 1fr auto;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-3) 0;
  border-bottom: 0.5px solid var(--line-soft);
  cursor: pointer;
}
.dm-row:last-child { border-bottom: 0; }
.dm-row:hover { background: var(--bg); }
.dm-row__sym { font-family: var(--font-mono); font-weight: 600; font-size: var(--text-xs); }
.dm-row__detail { font-size: var(--text-sm); color: var(--ink-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dm-row__meta { font-family: var(--font-mono); font-size: var(--text-xs); color: var(--ink-3); text-align: right; }
.dm-spark-large {
  width: 100%; height: 120px;
  margin-bottom: var(--space-5);
  display: flex; align-items: center; justify-content: center;
}
.dm-spark-large .spark { width: 100%; height: 100%; }
.dm-empty {
  text-align: center; padding: var(--space-7) 0;
  color: var(--ink-3); font-size: var(--text-sm);
}


/* ─────────────────────────────────────────────
   S45c — Detail modal: summary block, pills, larger spark
   ───────────────────────────────────────────── */
.dm-summary {
  background: var(--bg);
  border-left: 3px solid var(--mountain-pine);
  padding: var(--space-4) var(--space-5);
  margin-bottom: var(--space-6);
  border-radius: 2px;
}
.dm-summary__h {
  font-family: var(--font-mono);
  font-size: var(--text-2xs);
  letter-spacing: var(--track-wider);
  text-transform: uppercase;
  color: var(--ink-3);
  margin-bottom: var(--space-2);
}
.dm-summary__body {
  font-size: var(--text-md);
  color: var(--ink);
  line-height: 1.5;
}
.dm-hero {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-2);
  margin-bottom: var(--space-5);
}
.dm-hero__value {
  font-size: var(--text-3xl);
  font-weight: 600;
  color: var(--ink);
  letter-spacing: -0.02em;
  line-height: 1;
}
.dm-hero__label {
  font-family: var(--font-mono);
  font-size: var(--text-2xs);
  letter-spacing: var(--track-wider);
  text-transform: uppercase;
  color: var(--ink-3);
}
.dm-hero__delta {
  font-size: var(--text-md);
  margin-top: var(--space-1);
}
.dm-pill {
  display: inline-flex;
  align-items: center;
  font-family: var(--font-mono);
  font-size: var(--text-2xs);
  letter-spacing: var(--track-wide);
  text-transform: uppercase;
  padding: 2px 7px;
  font-weight: 600;
  border-radius: 2px;
  line-height: 1.6;
}
.dm-pill--good   { background: var(--good); color: #fff; }
.dm-pill--bad    { background: var(--bad);  color: #fff; }
.dm-pill--warn   { background: var(--warn); color: #fff; }
.dm-pill--neutral{ background: var(--neutral); color: #fff; }
.dm-pill--info   { background: var(--mountain-pine); color: var(--delicate-white, #E8E6DE); }
.dm-spark-large {
  width: 100%;
  height: 160px;
  margin-bottom: var(--space-6);
}
.dm-spark-large .spark.spark-large {
  width: 100%; height: 100%;
}
.spark.spark-large .spark__line { stroke-width: 2.5; }
.spark.spark-large .spark__dot  { r: 5; }
.dm-row {
  grid-template-columns: 90px 1fr auto;
}
.dm-row__chips {
  display: inline-flex;
  gap: var(--space-2);
  margin-right: var(--space-2);
}

.dm-tf-row {
  display: flex;
  gap: var(--space-2);
  margin-bottom: var(--space-3);
  flex-wrap: wrap;
}
.dm-tf-row .tf {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  padding: 3px 9px;
  border-radius: 2px;
  color: var(--ink-3);
  cursor: pointer;
}
.dm-tf-row .tf.is-active {
  background: var(--carbon, var(--ink));
  color: var(--delicate-white, #E8E6DE);
}


/* ─────────────────────────────────────────────
   S45c — Bars + Heatmap reusable components
   Used by CP momentum card, CP modal, and any
   future need for daily-delta or grid views.
   ───────────────────────────────────────────── */
.bars {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  width: 100%;
  height: 100%;
  gap: 2px;
}
.bars__bar {
  flex: 1;
  min-width: 4px;
  background: var(--ink-3);
  border-radius: 1px;
  transition: height 200ms ease, background-color 200ms ease;
  position: relative;
}
.bars__bar--good { background: var(--good); }
.bars__bar--bad  { background: var(--bad); }
.bars__bar--flat { background: var(--ink-3); opacity: 0.5; }
.bars__bar__label {
  position: absolute;
  bottom: -16px;
  left: 0;
  right: 0;
  text-align: center;
  font-family: var(--font-mono);
  font-size: var(--text-2xs);
  color: var(--ink-3);
  white-space: nowrap;
}
.bars__zero {
  position: absolute;
  left: 0; right: 0;
  height: 0.5px;
  background: var(--line-soft);
  pointer-events: none;
}
.bars--mini {
  height: 32px;
}


/* Heatmap grid */
.heat {
  display: grid;
  gap: 2px;
  width: 100%;
}
.heat__row {
  display: grid;
  grid-template-columns: 100px repeat(7, 1fr);
  gap: 2px;
  align-items: stretch;
}
.heat__sym {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  font-weight: 600;
  color: var(--ink);
  padding: var(--space-2) var(--space-2);
  display: flex;
  align-items: center;
  background: var(--bg);
}
.heat__cell {
  font-family: var(--font-mono);
  font-size: var(--text-2xs);
  text-align: center;
  padding: var(--space-2) 2px;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 28px;
  font-weight: 500;
}
/* Colour stops driven by data-intensity attribute (CSS attr selectors) */
.heat__cell[data-intensity="strong-good"]   { background: var(--good); color: #fff; }
.heat__cell[data-intensity="mid-good"]      { background: var(--good); color: #fff; opacity: 0.7; }
.heat__cell[data-intensity="weak-good"]     { background: var(--good); color: var(--ink); opacity: 0.4; }
.heat__cell[data-intensity="flat"]          { background: var(--bg);   color: var(--ink-3); }
.heat__cell[data-intensity="weak-bad"]      { background: var(--bad);  color: var(--ink); opacity: 0.4; }
.heat__cell[data-intensity="mid-bad"]       { background: var(--bad);  color: #fff; opacity: 0.7; }
.heat__cell[data-intensity="strong-bad"]    { background: var(--bad);  color: #fff; }
.heat__cell[data-intensity="empty"]         { background: var(--bg);   color: var(--ink-3); opacity: 0.4; }
.heat__head {
  font-family: var(--font-mono);
  font-size: var(--text-2xs);
  color: var(--ink-3);
  text-transform: uppercase;
  letter-spacing: var(--track-wider);
  text-align: center;
  padding: var(--space-1) 0;
}


/* ─────────────────────────────────────────────
   S45c — Dots-strip reusable component
   N daily dots, coloured by direction per day.
   ───────────────────────────────────────────── */
.dots-strip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
}
.dots-strip__dot {
  width: 7px; height: 7px;
  border-radius: 50%;
  display: inline-block;
}
.dots-strip__dot--good { background: var(--good); }
.dots-strip__dot--bad  { background: var(--bad); }
.dots-strip__dot--flat { background: var(--ink-3); opacity: 0.5; }
.dots-strip__dot--empty{ background: transparent; border: 0.5px dashed var(--ink-3); }
.dots-row {
  display: grid;
  grid-template-columns: 110px 1fr 80px;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-2) 0;
  border-bottom: 0.5px solid var(--line-soft);
  cursor: pointer;
}
.dots-row:hover { background: var(--bg); }
.dots-row:last-child { border-bottom: 0; }
.dots-row__sym {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  font-weight: 600;
  color: var(--ink);
}
.dots-row__delta {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  text-align: right;
}


/* ─────────────────────────────────────────────
   S45c — Bars-large columnar layout (with value + date labels)
   ───────────────────────────────────────────── */
.bars--large {
  display: flex;
  align-items: flex-end;
  justify-content: center;
  gap: var(--space-3);
  height: auto;
  padding: var(--space-3) 0;
}
.bars__col {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 60px;
  flex: 0 0 60px;
}
.bars__col .bars__bar__bar-wrap,
.bars__col .bars__bar-area {
  display: flex; align-items: flex-end; justify-content: center;
  height: 96px; width: 100%;
}
.bars__col .bars__bar {
  width: 28px;
  min-height: 4px;
}
.bars__bar__value {
  font-family: var(--font-mono);
  font-size: var(--text-2xs);
  color: var(--ink-2);
  margin-bottom: var(--space-2);
  white-space: nowrap;
}
.bars--large .bars__bar__label {
  position: static;
  margin-top: var(--space-2);
  color: var(--ink-3);
  font-family: var(--font-mono);
  font-size: var(--text-2xs);
  letter-spacing: 0.02em;
}

/* ─────────────────────────────────────────────
   S45c — Dots-row 4-column variant (+ header)
   ───────────────────────────────────────────── */
.dots-row--4col {
  grid-template-columns: 110px 110px 1fr 100px;
}
.dots-row--header {
  border-bottom: 0.5px solid var(--line);
  padding: var(--space-2) 0 var(--space-2);
  cursor: default;
  background: transparent;
}
.dots-row--header:hover { background: transparent; }
.dots-row__hdr {
  font-family: var(--font-mono);
  font-size: var(--text-2xs);
  letter-spacing: var(--track-wider);
  text-transform: uppercase;
  color: var(--ink-3);
}
.dots-row__hdr--right { text-align: right; }
.dots-row__cp {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  color: var(--ink-2);
  text-align: right;
}


/* ─────────────────────────────────────────────
   S45c — Alerts mood gauge + quadrant
   ───────────────────────────────────────────── */
.mood-row {
  display: grid;
  grid-template-columns: 260px 1fr;
  gap: var(--space-5);
  margin-bottom: var(--space-5);
  align-items: center;
}
.mood-gauge {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: var(--space-3);
  background: transparent;
}
.mood-gauge__svg {
  width: 220px;
  height: 130px;
}
.mood-gauge__score {
  font-family: var(--font-mono);
  font-size: 32px;
  font-weight: 500;
  color: var(--ink);
  letter-spacing: -0.02em;
  margin-top: var(--space-1);
  line-height: 1;
}
.mood-gauge {
  text-align: center;
}
.mood-gauge__posture {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  letter-spacing: var(--track-wider);
  font-weight: 600;
  margin-top: var(--space-2);
}
.mood-gauge__posture--panic     { color: var(--bad); }
.mood-gauge__posture--cautious  { color: var(--warn); }
.mood-gauge__posture--neutral   { color: var(--good); }
.mood-gauge__posture--elevated  { color: var(--elevated); }
.mood-gauge__posture--euphoric  { color: var(--bad); }

.quadrant {
  position: relative;
  width: 100%;
  height: 280px;
  background: transparent;
  overflow: visible;
}
.quadrant__svg { width: 100%; height: 100%; display: block; }
.quadrant__tooltip {
  position: absolute;
  pointer-events: none;
  background: var(--bg-elev);
  border: 0.5px solid var(--line);
  color: var(--ink);
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  padding: var(--space-3) var(--space-4);
  border-radius: var(--radius-sm);
  white-space: nowrap;
  z-index: 10;
  opacity: 0;
  transition: opacity 120ms;
  transform: translate(-50%, -100%);
  max-width: 200px;
  box-shadow: var(--shadow-card);
}
.quadrant__tooltip .chart-tt__date { color: var(--ink-3); margin-bottom: 3px; text-transform: uppercase; letter-spacing: var(--track-wide); }
.quadrant__tooltip .chart-tt__lbl { color: var(--ink-2); display: inline-block; min-width: 38px; }
.quadrant__tooltip > div { line-height: 1.7; }
.quadrant__tooltip.is-visible { opacity: 1; }
.quadrant__dot {
  cursor: pointer;
  transition: r 120ms;
}
.quadrant__dot:hover { r: 8; }

.leader-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-5) var(--space-5);
  margin-bottom: var(--space-4);
}
.leader {
  display: flex; flex-direction: column;
}
.leader__h {
  font-family: var(--font-mono);
  font-size: var(--text-2xs);
  letter-spacing: var(--track-wider);
  text-transform: uppercase;
  color: var(--ink-3);
  margin-bottom: var(--space-2);
  padding-bottom: var(--space-2);
  border-bottom: 0.5px solid var(--line);
  display: grid;
  grid-template-columns: 1fr auto auto;
  gap: var(--space-2);
}
.leader__h-right { text-align: right; }
.leader__row {
  display: grid;
  grid-template-columns: 1fr auto auto;
  gap: var(--space-2);
  align-items: center;
  padding: var(--space-2) 0;
  border-bottom: 0.5px solid var(--line-soft);
  cursor: pointer;
}
.leader__row:hover { background: var(--bg); }
.leader__row:last-child { border-bottom: 0; }
.leader__sym {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  font-weight: 600;
  color: var(--ink);
}
.leader__val {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  color: var(--ink-2);
  text-align: right;
}
.leader__delta {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  font-weight: 600;
  text-align: right;
  min-width: 60px;
}
.leader__delta.is-good { color: var(--good); }
.leader__delta.is-bad  { color: var(--bad); }

.sentinel-link {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  color: var(--mountain-pine);
  text-decoration: none;
  margin-top: var(--space-3);
}
.sentinel-link:hover { text-decoration: underline; }


/* S45c — Coming-soon nav items + clickable admin link */
.nav-item.nav-item--soon {
  color: var(--ink-3);
  cursor: not-allowed;
  position: relative;
  opacity: 0.55;
}
.nav-item.nav-item--soon::after {
  content: "SOON";
  font-family: var(--font-mono);
  font-size: var(--text-2xs);
  margin-left: var(--space-2);
  color: var(--ink-3);
  letter-spacing: 0.05em;
}
.meta-item--clickable {
  cursor: pointer;
  text-decoration: none;
  color: inherit;
  border-bottom: 0.5px dashed transparent;
  transition: border-color 120ms;
}
.meta-item--clickable:hover {
  border-bottom-color: var(--ink-3);
}


/* S45c — Cards that are entirely clickable links (admin shortcuts, etc) */
.card.card--link {
  display: block;
  cursor: pointer;
  transition: transform 100ms ease, border-color 100ms ease;
}
.card.card--link:hover {
  border-color: var(--ink-3);
}





/* ─────────────────────────────────────────────
   S45c — Mobile responsiveness (rewritten)
   Architecture note: .app is a 3-row grid (topbar 48px + main 1fr + statusbar 28px).
   On narrow viewports the topbar may need more height; let it auto-grow.
   Never apply overflow-x:hidden to body -- it interacts badly with the grid.
   Only the inner .view scrolls.
   ───────────────────────────────────────────── */

/* .dash 12-col responsive cascade */
@media (max-width: 1280px) {
  .dash { grid-template-columns: repeat(8, 1fr); }
}
@media (max-width: 1180px) {
  .dash { grid-template-columns: repeat(6, 1fr); }
  .dash > [style*="grid-column: span 7"],
  .dash > [style*="grid-column: span 5"] { grid-column: 1 / -1 !important; }
  /* Wide tables (watchlist) need horizontal scroll containment on iPad landscape too */
  .section > table, .card > table {
    display: block;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    max-width: 100%;
  }
  /* Make .main scroll-y in case content overflows on iPad too */
  .main { overflow-y: auto; }
}
@media (max-width: 768px) {
  .dash { grid-template-columns: repeat(4, 1fr); gap: var(--space-4); }
  .dash > [style*="grid-column: span 6"],
  .dash > [style*="grid-column: span 7"],
  .dash > [style*="grid-column: span 5"] { grid-column: 1 / -1 !important; }
  /* Tables inside cards scroll horizontally rather than push the page wide */
  .section > table, .card > table { display: block; overflow-x: auto; -webkit-overflow-scrolling: touch; max-width: 100%; }
}
@media (max-width: 640px) {
  .dash { grid-template-columns: repeat(2, 1fr); gap: var(--space-3); }
  .dash > [style*="grid-column: span 2"] { grid-column: 1 / -1 !important; }
}

/* .app grid: let topbar grow on narrow widths and use min-height not fixed height */
@media (max-width: 768px) {
  .app {
    display: block;
    height: auto;
    min-height: 100vh;
  }
  .topbar {
    height: auto;
    padding: var(--space-3) var(--space-4);
    flex-wrap: wrap;
    gap: var(--space-3);
  }
  .topbar .brand { order: 1; flex: 0 0 auto; }
  .topbar .topbar-meta { order: 2; margin-left: auto; flex: 0 0 auto; }
  .topbar .nav {
    order: 3;
    flex-basis: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  .topbar .nav::-webkit-scrollbar { display: none; }
  .topbar .topbar-search { order: 4; flex-basis: 100%; max-width: none; margin: 0; }
  .nav-item { padding: 0 var(--space-3); font-size: var(--text-2xs); flex: 0 0 auto; }
  /* Statusbar auto-height + wrap so disclaimer is fully readable */
  .statusbar {
    height: auto;
    padding: var(--space-2) var(--space-4);
    flex-wrap: wrap;
    gap: var(--space-2);
  }
  .statusbar .status-item { font-size: 9px; }
  .statusbar-spacer { display: none; }
  /* On phone: release the height:100%/overflow:hidden chain from html->body->.app->.main->.view
     so the page scrolls naturally end-to-end. */
  html, body { height: auto; overflow: visible; }
  .main { overflow: visible; height: auto; position: static; }
  .view { height: auto; overflow: visible; }
}

/* Mood-row and leader-grid in alerts modal */
@media (max-width: 768px) {
  .mood-row { grid-template-columns: 1fr; gap: var(--space-4); }
  .quadrant { height: 240px; }
  .leader-grid { grid-template-columns: 1fr; }
}

/* Lens tabs horizontal scroll */
@media (max-width: 640px) {
  .lens-tabs {
    overflow-x: auto;
    flex-wrap: nowrap;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  .lens-tabs::-webkit-scrollbar { display: none; }
  .lens-tab { flex: 0 0 auto; }
  .watchlist-pills { flex-wrap: wrap; gap: var(--space-2); }
}

/* Charts stack on narrow */
@media (max-width: 768px) {
  .chart-row { grid-template-columns: 1fr !important; }
}

/* Modal: full screen on phone */
@media (max-width: 640px) {
  .modal {
    width: 100% !important;
    max-width: 100% !important;
    height: 100% !important;
    max-height: 100% !important;
    border-radius: 0;
    margin: 0;
  }
}
/* Drawer: full screen on phone (matches modal treatment) */
@media (max-width: 640px) {
  .drawer, .drawer--wide {
    width: 100vw !important;
    max-width: 100vw !important;
  }
}


/* ============================================================
   S45d — Algo-driven primitives (shared, token-only)
   ============================================================ */
.table-responsive {
  position: relative;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  max-width: 100%;
  border-radius: var(--radius-sm);
}
.table-responsive > .table thead th {
  position: sticky; top: 0;
  background: var(--bg);
  z-index: 2;
  box-shadow: 0 1px 0 var(--line-soft);
}
/* Sticky first column — pin Symbol while wide table scrolls horizontally */
.table--sticky-first th:first-child,
.table--sticky-first td:first-child {
  position: sticky;
  left: 0;
  background: var(--bg-elev);
  z-index: 1;
}
/* First header cell must sit above both sticky axes (corner) */
.table-responsive > .table--sticky-first thead th:first-child {
  z-index: 3;
}
/* Preserve hover bg on the pinned cell so it doesn't look detached */
.table--sticky-first tbody tr:hover td:first-child {
  background: var(--bg-elev);
}
@media (max-width: 768px) {
  .table-responsive { overflow-x: visible; }
  .table-responsive > .table,
  .table-responsive > .table thead,
  .table-responsive > .table tbody,
  .table-responsive > .table tr,
  .table-responsive > .table td { display: block; width: 100%; }
  .table-responsive > .table thead { display: none; }
  .table-responsive > .table tbody tr {
    border: 0.5px solid var(--line-soft);
    border-radius: var(--radius-sm);
    margin-bottom: var(--space-4);
    padding: var(--space-4);
    background: var(--bg-elev);
  }
  .table-responsive > .table tbody tr:hover { background: var(--bg-elev); }
  .table-responsive > .table tbody td {
    display: flex; justify-content: space-between; align-items: center;
    gap: var(--space-4); padding: var(--space-2) 0;
    border: 0; border-bottom: 0.5px dashed var(--line-soft);
    text-align: right;
  }
  .table-responsive > .table tbody td:last-child { border-bottom: 0; }
  .table-responsive > .table tbody td::before {
    content: attr(data-label);
    font-family: var(--font-mono);
    font-size: var(--text-2xs);
    text-transform: uppercase;
    letter-spacing: var(--track-wide);
    color: var(--ink-3);
    text-align: left;
    flex: 0 0 auto;
  }
}

.reason-chip {
  display: inline-flex; align-items: center;
  font-family: var(--font-mono);
  font-size: var(--text-2xs);
  font-weight: 600;
  letter-spacing: var(--track-wide);
  padding: 2px var(--space-3);
  border-radius: var(--radius-pill);
  background: var(--bg);
  color: var(--ink-2);
  border: 0.5px solid var(--line);
  cursor: help;
  position: relative;
}
.reason-chip--good { background: var(--good-bg); color: var(--good); border-color: var(--good-bg-strong); }
.reason-chip--bad  { background: var(--bad-bg);  color: var(--bad);  border-color: var(--bad-bg-strong); }
.reason-chip--warn { background: var(--warn-bg); color: var(--warn); border-color: var(--warn-bg-strong); }

/* S47 Double-down lots — averaged-position expander (tokenised) */
.lots-toggle {
  font-family: var(--font-mono);
  font-size: var(--text-2xs);
  letter-spacing: var(--track-wide);
  color: var(--accent);
  cursor: pointer;
  margin-left: var(--space-2);
  user-select: none;
}
.lots-toggle:hover { color: var(--accent-bright); }
.lots-detail { display: none; }
.lots-detail.is-open { display: table-row; }

/* Shareholding pattern nests four levels -- public shareholding, foreign
   institutions, portfolio investors, and the named holder beneath. Indent
   from the same spacing scale as everything else. */
.av-line[data-depth="1"] { padding-left: calc(var(--space-5) * 2); }
.av-line[data-depth="2"] { padding-left: calc(var(--space-5) * 3); }
.av-line[data-depth="3"] { padding-left: calc(var(--space-5) * 4); }
.av-line[data-depth="4"] { padding-left: calc(var(--space-5) * 5); }
/* The balance sheet reaches five: trade payables current splits into the
   micro-enterprise and other-creditor dues the filer reports beneath it. */
.av-line[data-depth="5"] { padding-left: calc(var(--space-5) * 6); }
.av-line[data-depth="6"] { padding-left: calc(var(--space-5) * 7); }
.av-holder .av-line { color: var(--ink-2); }
.av-line--open { cursor: pointer; }
.av-line--open:hover { color: var(--mountain-pine); }
/* Trades is an action, not a view, so it takes the export button's
   treatment rather than the tab strip's underline. */
#av-trades {
  margin-left: auto;
  border: 1px solid var(--bad);
  border-radius: var(--radius-sm);
  padding: var(--space-2) var(--space-4);
  background: var(--bad);
  color: var(--bg);
}
#av-trades:hover { background: var(--bad-bg-strong); color: var(--bad); }
/* ============================================================================
   .dcm — Decomposition Modal (unified QS|MS|CP audit drawer). S46d.
   Names not codes. Layout B dual-column. Read-only audit surface.
   .dcm-up/.dcm-down/.dcm-stale shared with Tape. Inherits global scrollbar.
   ============================================================================ */
.dcm { display: flex; flex-direction: column; height: 100%; font-family: var(--font-mono); color: var(--ink); }

.dcm__head { padding: var(--space-5) var(--space-7) var(--space-4); border-bottom: 1px solid var(--line-soft); background: var(--bg-elev); }
.dcm__ticker { font-size: var(--text-xl); font-weight: 600; color: var(--mountain-pine); letter-spacing: 0.3px; line-height: 1.1; }
.dcm__name { font-size: var(--text-md); color: var(--ink-2); font-weight: 500; margin-top: var(--space-2); }
.dcm__meta { display: flex; flex-wrap: wrap; gap: var(--space-1) var(--space-5); margin-top: var(--space-3); font-size: var(--text-2xs); color: var(--ink-3); }
.dcm__meta-item { display: flex; gap: var(--space-2); align-items: baseline; }
.dcm__meta-lbl { text-transform: uppercase; letter-spacing: 0.08em; }
.dcm__meta-val { color: var(--ink-2); font-weight: 600; word-break: break-all; }

.dcm__scratch { display: inline-flex; align-items: center; gap: var(--space-2); margin-top: var(--space-4); padding: var(--space-1) var(--space-4); border: 1px solid var(--warn); border-radius: var(--radius-pill); font-size: var(--text-xs); color: var(--warn); text-transform: uppercase; letter-spacing: 0.08em; font-weight: 600; }

.dcm__export { display: flex; gap: var(--space-3); margin-top: var(--space-4); }
.dcm__export a { font-size: var(--text-xs); font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; padding: var(--space-2) var(--space-4); border: 1px solid var(--line-soft); border-radius: var(--radius-sm); color: var(--ink-2); text-decoration: none; background: var(--bg); }
.dcm__export a:hover { border-color: var(--mountain-pine); color: var(--mountain-pine); }

.dcm__tabs { padding: 0 var(--space-7); border-bottom: 1px solid var(--line-soft); background: var(--bg-elev); }

.dcm__body { flex: 1; overflow-y: auto; padding: var(--space-6) var(--space-7) var(--space-7); }
.dcm__label { font-size: var(--text-xs); letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-3); font-weight: 600; margin-bottom: var(--space-4); }

.dcm-eq { background: var(--bg-elev); border: 1px solid var(--line-soft); border-radius: var(--radius-sm); padding: var(--space-5) var(--space-6); font-size: var(--text-md); line-height: 1.9; color: var(--ink); margin-bottom: var(--space-6); }
.dcm-eq__lbl { color: var(--mountain-pine); font-weight: 600; }
.dcm-eq__num { color: var(--ink); font-weight: 600; }
.dcm-eq__op { color: var(--ink-3); }

.dcm-desk { border-bottom: 1px solid var(--line-soft); }
.dcm-desk > summary, .dcm-sub > summary, .dcm-analyst > summary { cursor: pointer; display: flex; align-items: center; gap: var(--space-3); list-style: none; }
.dcm-desk > summary > span:first-of-type, .dcm-sub > summary > span:first-of-type, .dcm-analyst > summary > span:first-of-type { flex: 1; text-align: left; }
.dcm-desk > summary::-webkit-details-marker, .dcm-sub > summary::-webkit-details-marker, .dcm-analyst > summary::-webkit-details-marker { display: none; }
.dcm-desk > summary::before, .dcm-sub > summary::before, .dcm-analyst > summary::before { content: "\25B6"; font-size: 9px; margin-right: var(--space-3); color: var(--ink-3); transition: transform var(--transition-fast); }
.dcm-desk[open] > summary::before, .dcm-sub[open] > summary::before, .dcm-analyst[open] > summary::before { transform: rotate(90deg); }
.dcm-desk > summary { padding: var(--space-5) 0; font-weight: 600; font-size: var(--text-lg); color: var(--mountain-pine); }
.dcm-sub { padding-left: var(--space-6); }
.dcm-sub > summary { padding: var(--space-4) 0; font-size: var(--text-md); font-weight: 600; color: var(--mountain-pine); }
.dcm-analyst { padding-left: var(--space-6); }
.dcm-analyst > summary { padding: var(--space-3) 0; font-size: var(--text-md); font-weight: 500; color: var(--ink-2); }
.dcm-lvl-nums { display: flex; gap: var(--space-5); font-variant-numeric: tabular-nums; }
.dcm-lvl-score { color: var(--ink); font-weight: 600; }
.dcm-lvl-contrib { font-weight: 600; }

.dcm-grid-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; margin: var(--space-3) 0 var(--space-5); }
.dcm-grid { width: 100%; border-collapse: collapse; font-size: var(--text-sm); font-variant-numeric: tabular-nums; min-width: 640px; }
.dcm-grid th { text-align: right; padding: var(--space-3) var(--space-4); border-bottom: 1px solid var(--line-soft); font-size: var(--text-2xs); letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink-3); font-weight: 600; white-space: nowrap; }
.dcm-grid th:first-child, .dcm-grid td:first-child { text-align: left; }
.dcm-grid th.dcm-th-range, .dcm-grid td.dcm-c-range { text-align: left; }
.dcm-grid th.dcm-th-raw, .dcm-grid td.dcm-c-raw { text-align: left; }
.dcm-grid td { padding: var(--space-3) var(--space-4); border-bottom: 1px solid var(--line-soft); color: var(--ink); white-space: nowrap; }
.dcm-grid td.dcm-c-field { color: var(--ink); font-weight: 500; }
.dcm-grid td.dcm-c-range { color: var(--ink-3); text-align: left; white-space: normal; min-width: 140px; }
.dcm-grid td.dcm-c-raw, .dcm-grid td.dcm-c-norm, .dcm-grid td.dcm-c-weight { color: var(--ink-2); }

.dcm-up { color: var(--good); }
.dcm-down { color: var(--bad); }
.dcm-stale { color: var(--bad); }
.dcm-grid tr.dcm-row--stale td { color: var(--bad); }

.dcm-adj { margin-top: var(--space-6); padding-top: var(--space-5); border-top: 1px solid var(--line-soft); }
.dcm-adj__row { display: grid; grid-template-columns: 90px 1fr auto; gap: var(--space-4); padding: var(--space-3) 0; border-bottom: 1px dashed var(--line-soft); font-size: var(--text-md); align-items: baseline; }
.dcm-adj__code { font-size: var(--text-sm); color: var(--ink-3); }
.dcm-pen { color: var(--bad); font-weight: 600; }
.dcm-bonus { color: var(--good); font-weight: 600; }

@media (max-width: 768px) {
  #decomp-drawer.drawer--wide, .drawer--wide.dcm-host { width: 100vw; }
  .dcm__head { padding: var(--space-5) var(--space-5) var(--space-4); }
  .dcm__tabs { padding: 0 var(--space-5); }
  .dcm__body { padding: var(--space-5) var(--space-5) var(--space-6); }
  .dcm-sub, .dcm-analyst { padding-left: var(--space-5); }
}
@media (max-width: 480px) {
  .dcm__meta { gap: var(--space-1) var(--space-4); }
  .dcm-eq { font-size: var(--text-sm); padding: var(--space-4); }
}

/* .dcm export button + menu — token-based, theme-aware, parent-independent */
.dcm__export .itab-icon {
  display: inline-flex; align-items: center; justify-content: center;
  padding: var(--space-3) var(--space-4);
  background: transparent;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  color: var(--ink-2);
  cursor: pointer;
  transition: background 0.12s, color 0.12s, border-color 0.12s;
}
.dcm__export .itab-icon:hover { background: var(--mountain-pine-bg); border-color: var(--mountain-pine); color: var(--mountain-pine); }
.dcm__export .itab-export-menu {
  position: absolute; top: calc(100% + var(--space-2)); right: 0;
  background: var(--bg-elev); border: 1px solid var(--line-soft);
  border-radius: var(--radius-sm); box-shadow: var(--shadow-modal);
  min-width: 160px; z-index: 20; padding: var(--space-2) 0;
  font-family: var(--font-mono);
}
.dcm__export .itab-export-menu a {
  display: block; padding: var(--space-3) var(--space-5);
  font-size: var(--text-sm); font-weight: 500;
  color: var(--ink); text-decoration: none;
  letter-spacing: 0.04em; text-transform: uppercase;
}
.dcm__export .itab-export-menu a:hover { background: var(--mountain-pine-bg); color: var(--mountain-pine); }

/* Mono masthead: page title + nav (S46d) */
#ih-symbol { font-family: var(--font-mono); }
.nav-item { font-family: var(--font-mono); }

/* ── Tape live terminal (S46d) ── */
.tape__controls { display: flex; gap: var(--space-2); margin-right: var(--space-4); }
.tape__range { display: inline-flex; }
.tape__range-trig { width: auto; min-width: 0; gap: var(--space-2); padding: 0 var(--space-4); white-space: nowrap; }
.tape__range-lbl { font-family: var(--font-mono); font-size: var(--text-sm); letter-spacing: var(--track-wide); white-space: nowrap; }
.tape__confirm { display: flex; align-items: center; gap: var(--space-5); width: 100%; margin-top: var(--space-5); flex-wrap: wrap; }
.tape__mount-go { flex: 0 0 auto; }
.tape__confirm-txt { font-family: var(--font-mono); font-size: var(--text-md); color: var(--ink-2); }
.tape__mount-go { width: auto; padding: 0 var(--space-4); color: var(--mountain-pine); border-color: var(--mountain-pine); font-size: var(--text-sm); }
.tape__mount-go:hover { background: var(--mountain-pine-bg); }
.tape__range-trig svg { width: 14px; height: 14px; }
.tape__range-trig[data-on="true"] { color: var(--accent); border-color: var(--accent); }
.tape__ctrl--on { background: var(--accent-bg-strong); border-color: var(--accent); color: var(--accent); }
button.tape__ctrl.tape__ctrl--sel, button.tape__ctrl.tape__ctrl--sel:hover { background: var(--mountain-pine); border-color: var(--mountain-pine); color: var(--ink-on-dark); }
button.tape__ctrl.tape__ctrl--sel svg { stroke: var(--ink-on-dark); }
button.tape__ctrl.tape__ctrl--rec, button.tape__ctrl.tape__ctrl--rec:hover { background: var(--bad); border-color: var(--bad); color: var(--ink-on-dark); }
button.tape__ctrl.tape__idle-play, button.tape__ctrl.tape__idle-play:hover { background: var(--mountain-pine); border-color: var(--mountain-pine); color: var(--ink-on-dark); }
button.tape__ctrl.tape__idle-play svg { stroke: var(--ink-on-dark); }
.tape__ctrl--rec { background: var(--bad); border-color: var(--bad); color: var(--ink-on-dark); }
.tape__mount-go { width: auto; height: 26px; padding: 0 var(--space-5); display: inline-flex; align-items: center; font-family: var(--font-mono); font-size: var(--text-sm); font-weight: 700; background: var(--mountain-pine); color: var(--ink-on-dark); border: 1px solid var(--mountain-pine); border-radius: var(--radius-sm); cursor: pointer; white-space: nowrap; transition: all var(--transition-fast); }
.tape__mount-go:hover { background: var(--mountain-pine-bg-strong); color: var(--mountain-pine); }
.tape__range .lens-dropdown { min-width: 80px; }
.tape__ctrl { font-family: var(--font-mono); font-size: var(--text-md); width: 30px; height: 26px; display: inline-flex; align-items: center; justify-content: center; background: var(--bg-elev); border: 1px solid var(--line); border-radius: var(--radius-sm); color: var(--ink-2); cursor: pointer; transition: all var(--transition-fast); }
.tape__ctrl:hover { color: var(--ink); border-color: var(--mountain-pine); }
.tape__ctrl--eject:hover { color: var(--bad); border-color: var(--bad); }
.tape__idle { display: flex; flex-direction: column; align-items: center; gap: var(--space-5); padding: var(--space-8) var(--space-4); }
.tape__idle-prompt { font-family: var(--font-mono); font-size: var(--text-h2); color: var(--mountain-pine); letter-spacing: var(--track-tight); }
.tape__picker { width: 100%; max-width: 480px; position: relative; }
.tape__search { width: 100%; font-family: var(--font-mono); font-size: var(--text-lg); padding: var(--space-4) var(--space-5); background: var(--bg); border: 1px solid var(--line); border-radius: var(--radius-md); color: var(--ink); outline: none; transition: border-color var(--transition-fast); }
.tape__search:focus { outline: none; }
.tape__search::placeholder { color: var(--ink-3); }
/* (stale .tape__results block removed — floating version below is the keeper) */
.tape__idle-hint { color: var(--ink-3); font-size: var(--text-xs); letter-spacing: var(--track-wide); text-transform: uppercase; }
.tape__chips { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.tape__chip { display: inline-flex; align-items: center; justify-content: center; gap: 4px; font-family: var(--font-mono); font-size: var(--text-sm); font-weight: 700; padding: 3px var(--space-4); border: 1px solid var(--line-soft); border-radius: var(--radius-pill); color: var(--ink-2); white-space: nowrap; line-height: 1.4; }
.tape__chip b { font-weight: 700; }
.tape__feed { max-height: 58vh; overflow-y: auto; padding-right: var(--space-5); }
.tape__feed.is-picking { max-height: none; overflow: visible; }
.tape__line { padding: var(--space-3) 0; border-bottom: 1px dashed var(--line-soft); font-size: var(--text-md); }
.tape__line-head { display: flex; align-items: baseline; gap: var(--space-4); flex-wrap: wrap; }
.tape__line-ts { color: var(--ink-3); font-size: var(--text-sm); min-width: 64px; }
.tape__line-tag { color: var(--mountain-pine); font-size: var(--text-2xs); letter-spacing: var(--track-wide); text-transform: uppercase; padding: 1px var(--space-2); border: 1px solid var(--line); border-radius: var(--radius-xs); }
.tape__line-tag--intraday { color: var(--ink-3); }
.tape__delta { font-weight: 600; }
.tape__delta--up { color: var(--good); }
.tape__delta--down { color: var(--bad); }
.tape__delta--flat { color: var(--ink-3); }
.tape__gov { color: var(--warn); font-weight: 600; }
.tape__running { color: var(--ink-3); font-size: var(--text-sm); margin-left: auto; padding-left: var(--space-5); }
.tape__report-head { color: var(--mountain-pine); font-size: var(--text-sm); margin: var(--space-2) 0 1px var(--space-3); font-weight: 600; }
.tape__mover { display: flex; align-items: baseline; gap: var(--space-4); padding: 1px 0 1px var(--space-6); color: var(--ink-2); font-size: var(--text-sm); }
.tape__mover-field { color: var(--ink); min-width: 180px; }
.tape__mover-raw { color: var(--ink-3); font-family: var(--font-mono); }
.tape__mover-contrib { font-weight: 600; margin-left: auto; }
.tape__mover-stale { color: var(--warn); font-size: var(--text-2xs); letter-spacing: var(--track-wide); }
.tape__heartbeat { display: flex; align-items: center; gap: 2px; padding: var(--space-3) 0; }
.tape__heartbeat .tape__cursor { background: var(--mountain-pine); }
.tape__hb-mark { font-family: var(--font-mono); font-size: var(--text-sm); letter-spacing: var(--track-wide); color: var(--mountain-pine); font-weight: 600; }
.tape__hb-dots { color: var(--mountain-pine); animation: tape-hb 1.4s ease-in-out infinite; }
@keyframes tape-hb { 0%,100% { opacity: 0.35; } 50% { opacity: 0.7; } }
.pill--inactive { opacity: 0.6; }

/* ── Lens 60/40 split + XYDeR bot rail ─────────────────────────────── */
.lens-split { display: grid; grid-template-columns: 60% 40%; gap: var(--space-5); align-items: start; }
.lens-split__main { min-width: 0; }
@media (max-width: 900px) { .lens-split { grid-template-columns: 1fr; } .xbot { display: none; } }

.xbot {
  position: sticky; top: var(--space-5);
  height: calc(100vh - 140px);
  display: flex; flex-direction: column;
  background: var(--bg-elev); border: 1px solid var(--line);
  border-radius: var(--radius-md); overflow: hidden;
  font-family: var(--font-mono);
}
.xbot__head {
  display: flex; align-items: center; gap: var(--space-2);
  padding: var(--space-4) var(--space-5);
  border-bottom: 1px solid var(--line);
  font-size: var(--text-sm); letter-spacing: var(--track-wide);
  color: var(--mountain-pine); font-weight: 700; text-transform: uppercase;
  flex-shrink: 0;
}
.xbot__dot { width: 7px; height: 7px; border-radius: 50%; background: var(--good) !important; box-shadow: 0 0 6px var(--good); animation: tape-hb 1.4s ease-in-out infinite; }
.xbot__head-sub { margin-left: auto; color: var(--ink-3); font-weight: 400; font-size: var(--text-2xs); }
.xbot__stream { flex: 1; overflow-y: auto; padding: var(--space-4) var(--space-5); display: flex; flex-direction: column; gap: var(--space-4); }
.xbot__line { display: flex; flex-direction: column; gap: 3px; padding-bottom: var(--space-3); border-bottom: 0.5px solid var(--line-soft); cursor: pointer; }
.xbot__line:hover { background: var(--accent-bg); }
.xbot__meta { display: flex; align-items: center; gap: var(--space-2); }
.xbot__chip {
  display: inline-flex; align-items: center; font-family: var(--font-mono);
  font-size: var(--text-2xs); font-weight: 700; letter-spacing: var(--track-wide);
  padding: 1px var(--space-3); border: 1px solid var(--line-soft);
  border-radius: var(--radius-pill); color: var(--ink-2); text-transform: uppercase;
}
.xbot__chip--call      { color: #C08A3E; border-color: #C08A3E; }
.xbot__chip--sentinel  { color: var(--accent); border-color: var(--accent); }
.xbot__chip--archivist { color: var(--good); border-color: var(--good); }
.xbot__chip--quant     { color: var(--ink-2); border-color: var(--line); }
.xbot__ts { color: var(--ink-3); font-size: var(--text-2xs); }
.xbot__sym { margin-left: auto; color: var(--ink-2); font-size: var(--text-2xs); font-weight: 700; }
.xbot__prose { color: var(--ink); font-size: var(--text-sm); line-height: 1.55; }
.xbot__cursor { display: inline-block; width: 7px; height: 1em; vertical-align: text-bottom; background: var(--mountain-pine); animation: tape-hb 1.1s ease-in-out infinite; margin-left: 1px; }
.xbot__empty { color: var(--ink-3); font-size: var(--text-sm); text-align: center; padding: var(--space-6); }
.xbot__brand { text-transform: none; }
.xbot__hero { font-weight: 700; color: var(--mountain-pine); }
.lens-heroes { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: var(--space-5); margin-bottom: var(--space-5); }
/* iPad + tablet: keep all three heroes in one row (tighter gap), lens only. */
@media (max-width: 1180px){ .lens-heroes { grid-template-columns: repeat(3, minmax(0,1fr)); gap: var(--space-3); } }
/* Only stack on true mobile. */
@media (max-width: 560px){ .lens-heroes { grid-template-columns: 1fr; } }
.lens-hero { background: var(--bg-elev); border: 0.5px solid var(--line-soft); border-left: 2px solid var(--accent); border-radius: var(--radius-sm); padding: var(--space-6) var(--space-7); box-shadow: var(--shadow-card); display: flex; flex-direction: column; gap: var(--space-3); min-height: 120px; min-width: 0; overflow: hidden; }
.lens-hero__label { font-family: var(--font-mono); font-size: var(--text-2xs); letter-spacing: var(--track-wide); color: var(--mountain-pine); text-transform: uppercase; font-weight: 700; }
.lens-hero__row { display: flex; align-items: baseline; gap: var(--space-3); }
.lens-hero__val { font-family: var(--font-mono); font-size: 32px; font-weight: 700; color: var(--ink); line-height: 1.05; }
.lens-hero__chg { font-size: var(--text-sm); font-weight: 700; }
.lens-hero__chg.up, .lens-hero__state.bull { color: var(--good); }
.lens-hero__chg.down, .lens-hero__state.bear { color: var(--bad); }
.lens-hero__split { display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); min-width: 0; }
.lens-hero__left { min-width: 0; }
.lens-hero__left { display: flex; flex-direction: column; gap: 2px; }
.lens-hero__spark { width: 96px; max-width: 40%; height: 44px; flex-shrink: 1; min-width: 40px; }
/* On tablet the split cramps — drop the spark so the number breathes. */
@media (max-width: 1366px){ .lens-hero__spark { display: none; } .lens-hero__split { justify-content: flex-start; } }
.lens-hero__state { font-size: var(--text-md); font-weight: 700; letter-spacing: var(--track-wide); }
.lens-hero__movers { display: flex; flex-direction: column; gap: 2px; font-family: var(--font-mono); font-size: var(--text-sm); }
.lens-hero__mv { display: flex; justify-content: space-between; gap: var(--space-3); }
.lens-hero__mv .sym { color: var(--ink-2); }
.lens-hero__mv.up .pct { color: var(--good); }
.lens-hero__mv.down .pct { color: var(--bad); }
.lens-hero__signals { display: flex; flex-wrap: wrap; gap: 4px 10px; font-size: var(--text-2xs); color: var(--ink-3); }
.lens-hero__flash { animation: pn-blink 0.6s ease; }

.xbot__hcursor { display: inline-block; width: 7px; height: 0.95em; background: var(--mountain-pine); animation: tape-hb 1.1s ease-in-out infinite; margin-left: 3px; vertical-align: text-bottom; }
.xbot__stream { padding-top: var(--space-4); }
.xbot__stream > .xbot__line:first-child { border-top: none; }


.tape__snap-overlay { position: fixed; inset: 0; background: rgba(13,14,16,0.55); display: flex; align-items: center; justify-content: center; z-index: 200; padding: var(--space-6); }
.tape__snap-card { background: var(--bg-elev); border: 1px solid var(--line); border-radius: var(--radius-md); box-shadow: var(--shadow-modal); max-width: 900px; width: 100%; max-height: 84vh; display: flex; flex-direction: column; font-family: var(--font-mono); }
.tape__snap-head { display: flex; justify-content: space-between; align-items: center; padding: var(--space-4) var(--space-5); border-bottom: 1px solid var(--line); color: var(--mountain-pine); font-size: var(--text-sm); letter-spacing: var(--track-wide); }
.tape__snap-close { background: none; border: none; color: var(--ink-3); cursor: pointer; font-size: var(--text-lg); }
.tape__snap-close:hover { color: var(--ink); }
.tape__snap-body { overflow-y: auto; padding: var(--space-5); }

/* Tape inline picker + reporting hierarchy (S46d rework) */
.tape__prompt { display: flex; align-items: center; gap: var(--space-4); flex-wrap: wrap; padding: var(--space-3) 0; }
.tape__prompt-q { font-family: var(--font-mono); font-size: var(--text-lg); color: var(--mountain-pine); }
.tape__picker { position: relative; flex: 1; min-width: 240px; max-width: 420px; }
.tape__search { width: 100%; font-family: var(--font-mono); font-size: var(--text-md); padding: var(--space-3) var(--space-2); background: transparent; border: none; border-radius: 0; color: var(--ink); outline: none; }
.tape__search:focus { border-color: var(--mountain-pine); }
.tape__search::placeholder { color: var(--ink-3); }
.tape__results { position: absolute; top: calc(100% + 4px); left: 0; right: 0; z-index: 30; display: none; flex-direction: column; gap: 1px; max-height: 280px; overflow-y: auto; background: var(--bg-elev); border: 1px solid var(--line); border-radius: var(--radius-sm); box-shadow: var(--shadow-card); }
.tape__results.is-open { display: flex; }
.tape__result { display: grid; grid-template-columns: 80px 1fr; gap: var(--space-3); align-items: baseline; padding: var(--space-3) var(--space-4); cursor: pointer; font-size: var(--text-md); border-bottom: 1px solid var(--line-soft); }
.tape__result:hover { background: var(--mountain-pine-bg); }
.tape__result-id { font-family: var(--font-mono); font-weight: 600; color: var(--ink); }
.tape__result-name { color: var(--ink-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tape__result--none { color: var(--ink-3); grid-template-columns: 1fr; cursor: default; }
.tape__result--none:hover { background: var(--bg-elev); }
.tape__result-id { font-family: var(--font-mono); font-weight: 600; color: var(--ink); }
.tape__result-name { color: var(--ink-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tape__result--none { grid-template-columns: 1fr; color: var(--ink-3); cursor: default; }
.tape__desk { font-family: var(--font-mono); color: var(--mountain-pine); font-weight: 700; font-size: var(--text-md); margin: var(--space-3) 0 1px; }
.tape__sub { color: var(--ink-2); font-size: var(--text-sm); margin: 1px 0 1px var(--space-4); font-weight: 600; }
.tape__report-head { color: var(--ink-3); font-size: var(--text-sm); margin: 1px 0 1px var(--space-5); font-style: italic; }
.tape__mover { padding-left: var(--space-6); }

.tape__section--live { display: flex; align-items: center; }

/* Tape narrative (S46d Tier 2) */
.tape__narr { padding: var(--space-3) 0 var(--space-2) var(--space-4); }
.tape__narr-sec { color: var(--mountain-pine); font-size: var(--text-2xs); letter-spacing: var(--track-wide); text-transform: uppercase; margin: var(--space-3) 0 1px; font-weight: 600; }
.tape__narr-field { color: var(--ink); font-size: var(--text-md); line-height: 1.6; padding: 1px 0; }
.tape__narr-cp { color: var(--ink-2); font-size: var(--text-sm); font-family: var(--font-mono); line-height: 1.6; }
.tape__narr-price { color: var(--ink-2); font-size: var(--text-sm); font-family: var(--font-mono); line-height: 1.6; }
.tape__narr-muted { color: var(--ink-3); font-style: italic; }

/* Tape synthesis summary (S46d Tier 2) */
.tape__summary { margin: var(--space-3) 0 var(--space-2) var(--space-4); padding: var(--space-3) var(--space-4); border-left: 2px solid var(--mountain-pine); background: var(--mountain-pine-bg); border-radius: var(--radius-xs); }
.tape__summary-lead { color: var(--mountain-pine); font-size: var(--text-2xs); letter-spacing: var(--track-wide); text-transform: uppercase; font-weight: 600; margin-bottom: var(--space-2); }
.tape__summary-body { color: var(--ink-2); font-size: var(--text-md); line-height: 1.7; }
.tape__summary-mkt { color: var(--ink-2); font-size: var(--text-sm); font-family: var(--font-mono); line-height: 1.7; margin-top: var(--space-2); padding-top: var(--space-2); border-top: 1px dashed var(--line-soft); }
.tape__hero { font-weight: 700; color: var(--ink); }
.tape__hero--neutral { color: var(--mountain-pine); }
.tape__hero--up { color: var(--good); }
.tape__hero--down { color: var(--bad); }
.tape__hero--flat { color: var(--ink-3); }
.tape__hero--state { color: var(--mountain-pine); }

/* Tape base chip + score colours (S46d) */
.tape__chip--good { color: var(--good); border-color: var(--good); }
.tape__chip--good b { color: var(--good); }
.tape__chip--bad { color: var(--bad); border-color: var(--bad); }
.tape__chip--bad b { color: var(--bad); }
.tape__qs { color: var(--mountain-pine); font-weight: 700; }
.tape__ms { color: #B5803C; font-weight: 700; }
.tape__chip--gov { font-family: var(--font-mono); border-radius: var(--radius-pill) !important; padding: 3px var(--space-4) !important; display: inline-flex !important; align-items: center; letter-spacing: 0.04em; }

/* S47 Themed scrollbars (tokenised, theme-aware) */
* { scrollbar-width: thin; scrollbar-color: var(--mountain-pine) transparent; }
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb {
  background: var(--mountain-pine);
  border-radius: var(--radius-pill);
  border: 2px solid var(--bg);
}
::-webkit-scrollbar-thumb:hover { background: var(--accent); }

.lots-detail-cell {
  font-family: var(--font-mono);
  font-size: var(--text-2xs);
  color: var(--ink-2);
  background: var(--mountain-pine-bg);
  padding: var(--space-3) var(--space-5);
  border-bottom: 0.5px solid var(--line);
}
.reason-chip[data-tooltip]:hover::after,
[data-tooltip]:hover::after {
  content: attr(data-tooltip);
  position: absolute; bottom: 100%; left: 50%;
  transform: translateX(-50%);
  margin-bottom: var(--space-2);
  background: var(--bg-dark);
  color: var(--ink-on-dark);
  font-family: var(--font-sans);
  font-size: var(--text-xs);
  font-weight: 400;
  letter-spacing: 0;
  text-transform: none;
  padding: var(--space-3) var(--space-4);
  border-radius: var(--radius-xs);
  white-space: nowrap;
  max-width: 320px;
  z-index: 50;
  box-shadow: var(--shadow-modal);
}

.pager {
  display: inline-flex; align-items: center;
  gap: var(--space-3);
  font-family: var(--font-mono);
  font-size: var(--text-sm);
  color: var(--ink-2);
}
.pager__btn {
  width: 28px; height: 28px;
  display: inline-flex; align-items: center; justify-content: center;
  border: 0.5px solid var(--line);
  background: var(--bg-elev);
  color: var(--ink-2);
  cursor: pointer;
  border-radius: var(--radius-xs);
  user-select: none;
  transition: all var(--transition-fast);
}
.pager__btn:hover:not(:disabled) { border-color: var(--mountain-pine); color: var(--mountain-pine); }
.pager__btn:disabled { opacity: 0.4; cursor: not-allowed; }
.pager__input {
  width: 48px; text-align: center;
  font-family: var(--font-mono);
  font-size: var(--text-sm);
  padding: var(--space-2) var(--space-3);
  border: 0.5px solid var(--line);
  border-radius: var(--radius-xs);
  background: var(--bg-elev);
  color: var(--ink);
}
.pager__input:focus { outline: none; border-color: var(--mountain-pine); }
.pager__total {
  font-family: var(--font-mono);
  font-size: var(--text-sm);
  color: var(--ink-3);
}

.dir-badge {
  display: inline-flex; align-items: center; justify-content: center;
  font-family: var(--font-mono);
  font-size: var(--text-2xs);
  font-weight: 700;
  letter-spacing: var(--track-wider);
  padding: 1px var(--space-3);
  border-radius: var(--radius-xs);
  text-transform: uppercase;
  min-width: 44px;
}
.dir-badge--long  { background: var(--good-bg-strong); color: var(--good); border: 0.5px solid var(--good); }
.dir-badge--short { background: var(--bad-bg-strong);  color: var(--bad);  border: 0.5px solid var(--bad); }


/* ============================================================
   S45f — Layout utilities (generic, reusable across all pages)
   ============================================================ */
/* Horizontal flex cluster with token gap + centered items */
.cluster {
  display: flex;
  gap: var(--space-2);
  align-items: center;
}
.cluster--wrap   { flex-wrap: wrap; }
.cluster--gap-lg { gap: var(--space-5); }
.cluster--gap-sm { gap: var(--space-2); }
/* Push an element (or remaining cluster items) to the right */
.ml-auto { margin-left: auto; }
/* Spacing helpers (token-based, no raw px) */
.mb-5 { margin-bottom: var(--space-5); }
.pad-4 { padding: var(--space-4); }
/* Date input — fixed comfortable width */
.input--date { width: 150px; }
/* Reset label margin when used inline in a cluster */
.lbl--inline { margin: 0; }


/* === XYDeR candlestick component + chart modal (S47) === */
/* Migrated from inline styles in renderAutoCycleCandles -- token values
   identical to prior inline rules, so rendering is unchanged. New chrome
   (expand icon, range bar, focus selector) added as tokenised classes. */

.acc-head {
  display: flex; justify-content: space-between; align-items: center;
  margin-bottom: var(--space-2);
}
.acc-hl { display: flex; align-items: center; gap: var(--space-4); transition: opacity .45s; }
.acc-sym { font-size: var(--text-md); font-weight: 600; color: var(--ink-1); }
.acc-dir {
  font-size: var(--text-2xs); font-weight: 600; letter-spacing: 1px;
  padding: var(--space-1) var(--space-3); border-radius: 4px;
}
.acc-dir--long  { background: var(--good-bg); color: var(--good); }
.acc-dir--short { background: var(--bad-bg);  color: var(--bad); }
.acc-dir--flat  { background: transparent;    color: var(--ink-3); }
.acc-hr { display: flex; align-items: center; gap: var(--space-4); text-align: right; transition: opacity .45s; }
.acc-ltp { font-family: var(--font-mono); font-size: var(--text-md); font-weight: 600; font-variant-numeric: tabular-nums; }
.acc-ltp__chg { font-size: var(--text-xs); font-weight: 500; margin-left: var(--space-2); }
.acc-meta { font-size: var(--text-2xs); color: var(--ink-3); margin-bottom: var(--space-3); }
.acc-chart { width: 100%; position: relative; overflow: hidden; margin-bottom: var(--space-2); }
.acc-dots { display: flex; gap: var(--space-3); justify-content: center; margin-top: var(--space-4); min-height: var(--space-5); }
.acc-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--line-soft); transition: background .4s; }
.acc-dot--on { background: var(--accent); }
.acc-empty {
  position: absolute; inset: 0; display: flex; flex-direction: column;
  align-items: center; justify-content: center; color: var(--ink-3);
  background: var(--bg-elev);
}
.acc-empty__icon { font-size: 26px; margin-bottom: var(--space-3); }
.acc-empty__txt  { font-size: var(--text-sm); }
/* S47a: loading shimmer bars for the candlestick widget (theme-token, CSS-only) */
.acc-empty--loading { background: var(--bg); }
.acc-skel-bars { display: flex; align-items: flex-end; gap: 6px; width: 70%; max-width: 360px; height: 55%; }
.acc-skel-bars span {
  flex: 1; border-radius: 3px 3px 0 0;
  background: linear-gradient(180deg, var(--mountain-pine) 0%, var(--mountain-pine-bg-strong) 100%);
  animation: accSkelPulse 1.1s ease-in-out infinite;
}
.acc-skel-bars span:nth-child(1) { height: 40%; animation-delay: 0s; }
.acc-skel-bars span:nth-child(2) { height: 66%; animation-delay: .08s; }
.acc-skel-bars span:nth-child(3) { height: 50%; animation-delay: .16s; }
.acc-skel-bars span:nth-child(4) { height: 80%; animation-delay: .24s; }
.acc-skel-bars span:nth-child(5) { height: 58%; animation-delay: .32s; }
.acc-skel-bars span:nth-child(6) { height: 72%; animation-delay: .40s; }
.acc-skel-bars span:nth-child(7) { height: 46%; animation-delay: .48s; }
.acc-skel-bars span:nth-child(8) { height: 64%; animation-delay: .56s; }
@keyframes accSkelPulse { 0%,100% { opacity: .35; transform: scaleY(.85); transform-origin: bottom; } 50% { opacity: .9; transform: scaleY(1); transform-origin: bottom; } }

/* expand-to-modal icon button */
.acc-expand {
  display: inline-flex; align-items: center; justify-content: center;
  width: 22px; height: 22px; padding: 0; margin-left: var(--space-4);
  background: transparent; border: 0.5px solid var(--line-soft);
  border-radius: 4px; color: var(--ink-3); cursor: pointer;
  transition: color .2s, border-color .2s, background .2s;
}
.acc-expand:hover { color: var(--accent); border-color: var(--accent); background: var(--accent-bg); }
.acc-expand svg { width: 13px; height: 13px; }

/* focus selector (chips) + reset */
.acc-ltprow { display: flex; justify-content: flex-end; align-items: baseline; margin: 0 0 var(--space-1); min-height: 1.2em; }
.acc-focus { display: inline-flex; align-items: center; position: relative; }
.acc-focus .lens-dropdown { text-align: left; left: 0; right: auto; }
.acc-focus .lens-dropdown { max-height: 320px; overflow-y: auto; }
#wl-price-graph .acc-dots { display: none; }
.acc-focus__chip {
  font-size: var(--text-2xs); font-weight: 500; letter-spacing: .5px;
  padding: var(--space-1) var(--space-4); border-radius: 10px;
  background: transparent; color: var(--ink-3);
  border: 0.5px solid var(--line-soft); cursor: pointer;
  transition: color .2s, border-color .2s, background .2s;
}
.acc-focus__chip:hover { color: var(--ink-2); border-color: var(--ink-3); }
.acc-focus__chip--on { color: var(--accent); border-color: var(--accent); background: var(--accent-bg); }
.acc-focus__reset {
  font-size: var(--text-2xs); font-weight: 500; letter-spacing: .5px;
  padding: var(--space-1) var(--space-4); border-radius: 10px;
  background: transparent; color: var(--ink-3);
  border: 0.5px dashed var(--line-soft); cursor: pointer;
}
.acc-focus__reset:hover { color: var(--bad); border-color: var(--bad); }

/* chart modal body: range bar + chart mount (reuses dm-* shell) */
.cmodal-range { display: flex; flex-wrap: wrap; gap: var(--space-2); justify-content: center; margin: var(--space-3) 0 var(--space-4); }
.cmodal-range__btn {
  font-size: var(--text-xs); font-weight: 500;
  padding: var(--space-2) var(--space-5); border-radius: 6px;
  background: transparent; color: var(--ink-3);
  border: 0.5px solid var(--line-soft); cursor: pointer;
  transition: color .2s, border-color .2s, background .2s;
}
.cmodal-range__btn:hover { color: var(--ink-2); border-color: var(--ink-3); }
.cmodal-range__btn--active { color: #fff; background: var(--mountain-pine); border-color: var(--mountain-pine); }
.cmodal-chart { width: 100%; height: 560px; position: relative; }
.cmodal-ltp { display: flex; align-items: baseline; gap: var(--space-3); margin: var(--space-3) 0; }
.cmodal-ltp #cm-ltp { font-size: var(--text-lg); font-weight: 600; font-variant-numeric: tabular-nums; }
.cmodal-ltp #cm-chg { font-size: var(--text-xs); font-variant-numeric: tabular-nums; }
.cmodal-status { font-size: var(--text-2xs); color: var(--ink-3); margin-left: auto; text-transform: uppercase; letter-spacing: var(--track-wide); }
/* === end S47 candlestick block === */


/* =================================================================
   INSTRUMENT PAGE  (migrated from instrument.html <style>, S46b)
   ================================================================= */
  .instr-page table, .instr-page td, .instr-page th,
  .instr-page div, .instr-page span, .instr-page strong {
    font-family: var(--font-mono);
  }
  .instr-page .mono, .instr-page [style*="monospace"],
  .instr-page [style*="--font-mono"], .instr-page [style*="--font-mono"] *,
  .instr-page .verdict-band, .instr-page .verdict-band *,
  .instr-page .vb-statusrow, .instr-page .vb-statusrow *,
  .instr-page .ph-tooltip, .instr-page .ph-tooltip *,
  .ph-tooltip, .ph-tooltip *,
  .instr-page .chart-tt, .instr-page .chart-tt *,
  .instr-page .quadrant__tooltip, .instr-page .quadrant__tooltip *,
  .chart-tt, .chart-tt *,
  .quadrant__tooltip, .quadrant__tooltip * {
    font-family: var(--font-mono) !important;
  }
  .instr-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 24px; margin-bottom: 24px; }
  .instr-head .left h1 { margin: 0 0 4px 0; font-size: 32px; letter-spacing: -0.01em; }
  .instr-head .left .name { font-size: 16px; color: var(--ink-2); margin-bottom: 12px; }
  .instr-head .left .meta { display: flex; gap: 24px; font-size: 11px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink-3); }
  .instr-head .left .meta strong { color: var(--ink); font-weight: 600; margin-left: 4px; }
  .instr-head .actions { display: flex; gap: 8px; }
  .instr-head .actions a {
    display: inline-block; padding: 10px 18px;
    background: #fff; border: 1px solid #d8d3c8; border-radius: 4px;
    font-size: 11px; letter-spacing: 0.06em; text-transform: uppercase;
    color: #2a2a2a; text-decoration: none; font-weight: 600;
    transition: background 0.15s ease, color 0.15s ease;
  }
  .instr-head .actions a:hover { background: var(--mountain-pine); color: #fff; }

  .description { background: var(--bg-elev); padding: 16px 20px; border-radius: 4px; margin-bottom: 24px; font-size: 13px; line-height: 1.6; color: var(--ink-2); }

  .range-cell { display: flex; flex-direction: column; }
.range-row { display: flex; align-items: center; gap: 10px; margin-top: 4px; }
.range-end { font-family: var(--font-mono, 'JetBrains Mono', monospace); font-size: 12px; color: var(--ink-2, #4a4a4a); white-space: nowrap; font-weight: 500; }
.range-low { color: #b94545; }
.range-high { color: #2c8a4d; }
.range-track {
  flex: 1;
  height: 8px;
  background: linear-gradient(to right, #d97a6e 0%, #d97a6e 12%, #e8d4a8 50%, #6ba874 88%, #4d9461 100%);
  border-radius: 4px;
  position: relative;
  overflow: visible;
  box-shadow: inset 0 1px 2px rgba(0,0,0,0.08);
}
.range-fill {
  position: absolute;
  top: 0; left: 0;
  height: 100%;
  background: rgba(28,27,24,0.10);
  border-radius: 4px 0 0 4px;
}
.range-marker {
  position: absolute;
  top: -5px;
  width: 3px;
  height: 18px;
  background: var(--ink, #1c1b18);
  border-radius: 2px;
  transform: translateX(-1.5px);
  transition: left 0.25s ease;
  box-shadow: 0 0 0 2px rgba(255,255,255,0.85), 0 1px 3px rgba(0,0,0,0.25);
}
.range-hover-tip {
  position: absolute;
  bottom: 16px;
  left: 0;
  transform: translateX(-50%);
  font-family: var(--font-mono, monospace);
  font-size: 10px;
  font-weight: 500;
  color: var(--ink, #1c1b18);
  background: var(--bg, #fff);
  padding: 3px 7px;
  border-radius: 3px;
  border: 1px solid rgba(0,0,0,0.12);
  white-space: nowrap;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.12s ease;
  box-shadow: 0 1px 3px rgba(0,0,0,0.08);
  z-index: 5;
}
.range-track:hover .range-hover-tip { opacity: 1; }

.price-strip {
    display: grid; grid-template-columns: repeat(8, 1fr); gap: 0;
    margin-bottom: 28px; background: var(--bg-elev);
    border: 1px solid var(--line-soft);
    border-left: 4px solid var(--mountain-pine);
    border-radius: 4px;
    box-shadow: 0 1px 2px rgba(20, 24, 30, 0.04), 0 2px 8px rgba(20, 24, 30, 0.03);
    overflow: hidden;
  }
  .price-strip .val.up { color: #2c8a4d; }
  .price-strip .val.down { color: #b94545; }
  .price-strip .change {
    font-size: 11px; font-weight: 500; margin-top: 2px;
    font-variant-numeric: tabular-nums;
  }
  .price-strip .change.up { color: #2c8a4d; }
  .price-strip .change.down { color: #b94545; }
  .price-strip .cell {
    text-align: center; padding: 14px 12px; background: var(--bg-elev);
  }
  /* CMP/LTP — vertical accent line to separate live data from static OHLC */
  /* Group dividers — separate Live | Intraday | 52W | All-time */
  .price-strip .cell:nth-child(1),
  .price-strip .cell:nth-child(4),
  .price-strip .cell:nth-child(5) {
    border-right: 1px solid rgba(0, 0, 0, 0.12);
  }
  .price-strip .val.day-high { color: #2c8a4d; }
  .price-strip .val.day-low { color: #b58b4a; }
  .price-strip .lbl {
    font-size: 9px; letter-spacing: 0.1em; text-transform: uppercase;
    color: var(--ink-3); margin-bottom: 6px; font-weight: 600;
  }
  .price-strip .val {
    font-size: 20px; font-weight: 300; letter-spacing: -0.01em;
    font-variant-numeric: tabular-nums; color: var(--ink);
  }

  .scores-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin-bottom: 28px; }
.score-card .score-change {
  font-size: 12px;
  font-family: var(--font-mono, 'JetBrains Mono', monospace);
  font-variant-numeric: tabular-nums;
  margin-top: 4px;
  min-height: 16px;
  letter-spacing: 0.01em;
}
.score-card .score-change.up { color: var(--good); }
.score-card .score-change.down { color: var(--bad); }
.score-card .score-change.flat { color: var(--ink-3); }
.score-card .score-change .arrow { font-size: 10px; margin-right: 4px; vertical-align: 1px; }
  .cp-pos { color: var(--good); }
  .cp-neg { color: var(--bad); }

  /* S47e: CP visual is the full-width linear band scale (.cs-scale). */
  .vb-col--convstate { flex-direction: column; align-items: stretch; }
  .cs-scale { margin-top: var(--space-4); }
  /* CP card top split: value left, sparkline right (sparkline 2px up) */
  .score-card-cp .cp-top {
    display: grid; grid-template-columns: 1fr 1fr;
    gap: 18px; align-items: start;
    margin-bottom: 16px;
  }
  .score-card-cp .cp-top-left .val { line-height: 1.05; }
  .score-card-cp .cp-top-right {
    display: flex; flex-direction: column; justify-content: flex-start;
    padding-top: 2px;
  }
  .cp-spark-label {
    font-family: var(--font-mono); font-size: 9px;
    letter-spacing: 0.08em; text-transform: uppercase;
    color: var(--ink-3); margin-bottom: 4px; text-align: right;
  }
  .cp-spark { width: 100%; height: 38px; display: block; }
  /* Standalone summary card (Phase B v4) */
    .nar-gov-row {
    display: grid; grid-template-columns: 55% 45%;
    gap: 16px; margin-bottom: 20px;
    align-items: stretch;
  }
  .nar-gov-row > .ngr-left, .nar-gov-row > .ngr-right { display: flex; }
  .nar-gov-row .ngr-left > .section,
  .nar-gov-row .ngr-right > .section {
    flex: 1; margin-bottom: 0; display: flex; flex-direction: column;
  }
  .nar-gov-row .ngr-left > .section > .narrative-box { flex: 1; }
  .nar-gov-row .ngr-right > .section > #governance-body { flex: 1; }
    .score-card-clickable {
    cursor: pointer;
    transition: background 0.12s, border-color 0.12s, transform 0.12s;
  }
  .score-card-clickable:hover {
    background: var(--bg-elev);
    border-color: var(--ln-soft);
  }
  .score-card-summary {
    font-family: var(--font-mono); font-size: 13px;
    line-height: 1.7; color: var(--ink-2);
    padding: 18px 22px;
  }
  /* ---------- Phase B v2: score band layout (55/45) ---------- */
  .score-band {
    display: grid; grid-template-columns: 55% 45%; gap: 16px;
    margin-bottom: 18px;
    align-items: stretch;
  }
  .score-band-left {
    display: flex; flex-direction: column; gap: 14px;
  }
  .sbl-row-top {
    display: grid; grid-template-columns: 1fr 1fr; gap: 14px;
  }
  .sbl-row-cp .score-card-cp { width: 100%; }
  .sbl-row-status { margin-top: auto; }
  .score-band-right { display: flex; min-width: 0; width: 100%; }
  .score-band-right > .iw-sentinel { flex: 1; min-width: 0; width: 100%; box-sizing: border-box; }
  .sb-sentinel {
    flex: 1; background: var(--bg-elev); border-radius: 4px;
    display: flex; flex-direction: column;
    border: 1px solid var(--ln-soft);
    overflow: hidden;
    max-height: 100%;
  }
  .sb-sentinel-head {
    padding: 12px 16px; font-family: var(--font-mono);
    font-size: 10px; font-weight: 600; letter-spacing: 0.12em;
    text-transform: uppercase; color: var(--ink-2);
    border-bottom: 1px solid var(--ln-soft); background: #fff;
    flex-shrink: 0;
  }
  .sb-sentinel-body {
    flex: 1; overflow-y: auto; padding: 0;
    font-family: var(--font-mono);
    min-height: 0; background: #fff;
  }
  .sb-sentinel-body .loading { color: var(--ink-3); padding: 16px; font-style: italic; font-size: 12px; }
  .sb-sentinel-body .se-empty { color: var(--ink-3); padding: 16px; font-size: 12px; }
  .sb-sentinel-body .se-row {
    padding: 14px 16px;
    border-bottom: 1px solid #E8E4DB;
    cursor: pointer;
    transition: background 0.1s;
  }
  .sb-sentinel-body .se-row:hover { background: #f6f5f0; }
  .sb-sentinel-body .se-row:last-child { border-bottom: none; }
  .sb-sentinel-body .se-top {
    display: flex; justify-content: space-between; align-items: baseline;
    margin-bottom: 5px;
  }
  .sb-sentinel-body .se-entity {
    font-size: 13px; font-weight: 600; color: var(--ink-1, #1a1a1a);
    line-height: 1.3;
  }
  .sb-sentinel-body .se-ago {
    font-size: 11px; color: var(--ink-3, #8a8a8a);
    white-space: nowrap; margin-left: 8px;
  }
  .sb-sentinel-body .se-summary {
    font-size: 12px; color: var(--ink-2, #4a525b);
    line-height: 1.55; margin-bottom: 8px;
  }
  .sb-sentinel-body .se-meta {
    display: flex; flex-wrap: wrap; gap: 5px; align-items: center;
  }
  .sb-sentinel-body .se-chip {
    display: inline-block; padding: 2px 7px;
    font-size: 9px; font-weight: 700; letter-spacing: 0.06em;
    border-radius: 3px; text-transform: uppercase;
    font-family: var(--font-mono);
  }
  .sb-sentinel-body .se-chip-src { background: #e6e2d8; color: #2a2a2a; }
  .sb-sentinel-body .se-chip-gov { background: #fef3c7; color: #92400e; }
  .sb-sentinel-body .se-chip-mag { background: #fff; color: var(--ink-2); border: 1px solid var(--ln-soft); }
  .sb-sentinel-body .se-chip-pos { background: #d1fae5; color: #064e3b; }
  .sb-sentinel-body .se-chip-neg { background: #fee2e2; color: #7f1d1d; }
  .sb-sentinel-body .se-chip-neu { background: #f3f4f6; color: #374151; }
  .sb-sentinel-body .se-chip-type {
    background: #fff; color: var(--ink-2);
    border: 1px solid var(--ln-soft); font-weight: 600;
  }
  /* Phase B v2: status bar inside left column */
  .score-statusbar {
    display: flex; align-items: center; gap: 12px;
    padding: 10px 14px;
    background: var(--bg-elev); border-radius: 4px;
    font-family: var(--font-mono); font-size: 11px;
    color: var(--ink-3); letter-spacing: 0.06em;
  }
  .score-statusbar .ssb-label { text-transform: uppercase; }
  .score-statusbar .ssb-time { color: var(--ink-1); font-weight: 600; }
  .score-statusbar .ssb-icon {
    display: inline-flex; align-items: center; justify-content: center;
    width: 32px; height: 28px;
    background: transparent; border: 1px solid #d8d3c8; border-radius: 4px;
    color: #4a525b; cursor: pointer; margin-left: auto;
    transition: background 0.12s, border-color 0.12s;
  }
  .score-statusbar .ssb-icon:hover { background: #fff; border-color: #b8b3a4; }
  .score-statusbar .ssb-icon + .ssb-refresh { margin-left: 8px; }
  .cp-spark-head { display: flex; align-items: center; justify-content: flex-end; gap: 8px; margin-bottom: 4px; }
  .cp-spark-head .cp-spark-label { margin-bottom: 0; }
  .cp-hist-btn {
    display: inline-flex; align-items: center; justify-content: center;
    width: 22px; height: 18px;
    background: transparent; border: 1px solid #d8d3c8; border-radius: 3px;
    color: #4a525b; cursor: pointer; padding: 0;
  }
  .cp-hist-btn:hover { background: var(--bg-elev); border-color: var(--ink-3); }
  .score-statusbar .ssb-refresh {
    margin-left: 0;
    background: #6b8a8a; border: 1px solid #5a7575; border-radius: 4px;
    font-family: var(--font-mono); font-size: 10px; font-weight: 600;
    letter-spacing: 0.08em; text-transform: uppercase;
    color: #fff; padding: 7px 16px; cursor: pointer;
    transition: background 0.12s, border-color 0.12s;
  }
  .score-statusbar .ssb-refresh:hover { background: #5a7575; border-color: #4a6363; }
  .score-statusbar .ssb-refresh.busy { opacity: 0.6; pointer-events: none; }

  .section { background: var(--bg-elev); padding: 20px 24px; border-radius: 4px; margin-bottom: 20px; }
  .section h2 { margin: 0 0 16px 0; font-size: 14px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--mountain-pine); font-weight: 600; }

  .narrative-box { font-size: 13px; line-height: 1.7; color: var(--ink); font-style: italic; }
  .narrative-loading { color: var(--ink-3); font-style: italic; }

  /* Governance tier badges — muted XYDeR palette */
  .tier-badge {
    display: inline-block; padding: 4px 12px; border-radius: 3px;
    font-size: 11px; font-weight: 700; letter-spacing: 0.08em;
    text-transform: uppercase; border: 1px solid;
  }
  .tier-badge.t1 { background: var(--line-soft); color: var(--ink-2); border-color: var(--line); }
  .tier-badge.t2 { background: var(--warn-bg); color: var(--warn); border-color: var(--warn); }
  .tier-badge.t3 { background: var(--bad-bg); color: var(--bad); border-color: var(--bad); }
  /* Header meta-row variant: smaller, baseline-aligned with surrounding uppercase text */
  .instr-head .left .meta .tier-badge {
    padding: 1px 7px; font-size: 9px; letter-spacing: 0.06em;
    margin-left: 6px; vertical-align: middle; line-height: 1.4;
  }

  .gov-row {
    display: flex; padding: 10px 0;
    border-bottom: 1px solid var(--ln-soft);
    align-items: baseline;
  }
  .gov-row:last-child { border-bottom: none; }
  .gov-row .label {
    font-size: 10px; letter-spacing: 0.08em; text-transform: uppercase;
    color: var(--ink-3); font-weight: 600;
    width: 140px; flex-shrink: 0;
  }
  .gov-row .value {
    font-size: 13px; color: var(--ink); flex: 1;
  }
  .gov-code {
    display: inline-block; padding: 2px 8px;
    font-family: var(--font-mono);
    font-size: 13px; font-weight: 600;
    background: var(--bg-elev); border: 1px solid var(--ln-soft);
    border-radius: 3px; margin: 0 4px; color: var(--ink-2);
    letter-spacing: 0.02em; vertical-align: baseline;
  }
  .gov-filing-period {
    display: inline-block; font-size: 13px; color: var(--ink-2);
    margin-left: 10px; padding: 2px 8px; background: var(--bg-elev);
    border: 1px solid var(--ln-soft); border-radius: 3px;
    letter-spacing: 0.02em; vertical-align: baseline;
  }


  details.pillar { border-bottom: 1px solid var(--ln-soft); padding: 10px 0; }
  details.pillar > summary { cursor: pointer; font-weight: 600; font-size: 13px; display: flex; justify-content: space-between; align-items: center; padding: 6px 0; }
  details.pillar > summary::-webkit-details-marker { display: none; }
  details.pillar > summary::before { content: "▶"; font-size: 9px; margin-right: 8px; color: var(--ink-3); transition: transform 0.15s; }
  details.pillar[open] > summary::before { transform: rotate(90deg); }
  details.subpillar { padding-left: 20px; padding-top: 6px; }
  details.subpillar > summary { font-size: 12px; font-weight: 500; color: var(--ink-2); }

  table.field-table { width: 100%; border-collapse: collapse; margin-top: 10px; font-size: 11px; }
  table.field-table th { text-align: left; padding: 6px 8px; border-bottom: 1px solid var(--ln-soft); font-weight: 600; color: var(--ink-3); letter-spacing: 0.04em; text-transform: uppercase; font-size: 10px; }
  table.field-table td { padding: 6px 8px; border-bottom: 1px solid var(--ln-soft); font-variant-numeric: tabular-nums; }
  table.field-table td.staleness-FRESH { color: var(--ink); }
  table.field-table td.staleness-STALE { color: #b58a2e; }
  table.field-table td.staleness-MISSING { color: var(--ink-3); }

  table.history { width: 100%; border-collapse: collapse; font-size: 11px; }
  table.history th { text-align: left; padding: 6px 8px; border-bottom: 1px solid var(--ln-soft); font-size: 10px; color: var(--ink-3); letter-spacing: 0.04em; text-transform: uppercase; }
  table.history td { padding: 5px 8px; border-bottom: 1px solid var(--ln-soft); font-variant-numeric: tabular-nums; }

  .sentinel-event { padding: 10px 0; border-bottom: 1px solid var(--ln-soft); }
  .sentinel-event:last-child { border-bottom: none; }
  .sentinel-event .src { font-size: 10px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink-3); }
  .sentinel-event .head { font-size: 13px; margin-top: 4px; }

  .loading { color: var(--ink-3); font-style: italic; padding: 12px 0; }

/* ---------- S38 Phase A: title row + tabs ---------- */
[hidden] { display: none !important; }
/* ===== VERDICT BAND (S46b — 6-col, token-clean, directional tint) ===== */
.verdict-band {
  display: flex; align-items: stretch; gap: 0;
  border: 0.5px solid var(--line-soft);
  border-left: 3px solid var(--mountain-pine);
  border-radius: var(--radius-sm);
  background: var(--bg-elev);
  margin-bottom: var(--space-4);
  overflow: visible;
}
.verdict-band.is-up      { border-left-color: var(--good); }
.verdict-band.is-down    { border-left-color: var(--bad); }
.verdict-band.is-neutral { border-left-color: var(--mountain-pine); }
.vb-col { flex: 1 1 0; padding: var(--space-5) var(--space-6); display: flex; flex-direction: column; justify-content: center; font-family: var(--font-mono); }
.vb-col + .vb-col { border-left: 0.5px solid var(--line-soft); }
.vb-col--state { min-width: 190px; }
.vb-col--price { min-width: 175px; }
.vb-col--ranges { min-width: 230px; justify-content: center; gap: var(--space-4); }
.vb-col--scores { min-width: 170px; flex: 1.15 1 0; }
.vb-score-row strong { font-family: var(--font-mono); font-size: 24px; font-weight: 800; color: var(--ink); line-height: 1.1; }
.vb-col--cp { min-width: 170px; justify-content: center; gap: var(--space-2); }
.vb-col--facts { margin-left: auto; min-width: 110px; gap: var(--space-2); }
.vb-col--scores, .vb-col--cp, .vb-qsms-q, .vb-qsms-m { cursor: pointer; }
.vb-col--scores:hover, .vb-col--cp:hover { background: rgba(45,65,72,0.04); }
.vb-col--scores, .vb-col--cp { position: relative; }
.vb-col--scores::after, .vb-col--cp::after {
  content: "\2197"; position: absolute; top: var(--space-3); right: var(--space-4);
  font-size: var(--text-2xs); color: var(--ink-3); opacity: 0.5;
  font-family: var(--font-mono); transition: opacity var(--transition-fast);
}
.vb-col--scores:hover::after, .vb-col--cp:hover::after { opacity: 1; color: var(--mountain-pine); }
.vb-eyebrow {
  font-family: var(--font-mono); font-size: var(--text-2xs);
  letter-spacing: var(--track-wider); text-transform: uppercase;
  color: var(--mountain-pine); font-weight: 600;
}
.verdict-band.is-up   .vb-eyebrow#vb-state-eyebrow { color: var(--good); }
.verdict-band.is-down .vb-eyebrow#vb-state-eyebrow { color: var(--bad); }
.vb-label { font-family: var(--font-mono); font-size: 19px; font-weight: 700; color: var(--ink-1); margin-top: 2px; }
.vb-label.state-conviction { color: var(--good); }
.vb-label.state-price { color: var(--bad); }
.vb-label.state-balanced { color: var(--mountain-pine); }
.vb-pills { display: flex; flex-wrap: wrap; gap: var(--space-2); margin-top: var(--space-3); }
.vb-pill {
  font-family: var(--font-mono); font-size: var(--text-2xs);
  padding: 2px var(--space-4); border-radius: var(--radius-pill);
  background: var(--accent-bg-strong); border: 0.5px solid var(--line-soft);
  color: var(--ink-2); letter-spacing: var(--track-wide); white-space: nowrap;
}
.vb-cmp-eyebrow { display: flex; align-items: center; gap: var(--space-3); }
.vb-livepill {
  font-family: var(--font-mono); font-size: var(--text-2xs); font-weight: 600;
  padding: 1px var(--space-3); border-radius: var(--radius-pill); letter-spacing: var(--track-wide);
}
.vb-livepill.is-live   { background: var(--good-bg-strong); color: var(--good); }
.vb-livepill.is-closed { background: var(--bad-bg-strong);  color: var(--bad); }
.vb-cmp-row { display: flex; align-items: baseline; gap: var(--space-4); margin-top: 2px; }
.vb-cmp { font-family: var(--font-mono); font-size: 30px; font-weight: 800; color: var(--ink-1); line-height: 1.05; }
.vb-cmp { color: var(--mountain-pine); }
.verdict-band.is-up   .vb-cmp { color: var(--good); }
.verdict-band.is-down .vb-cmp { color: var(--bad); }
.vb-change { font-family: var(--font-mono); font-size: var(--text-sm); font-variant-numeric: tabular-nums; }
.vb-change.up { color: var(--good); } .vb-change.down { color: var(--bad); }
/* ===== TOOLKIT: candle strip (reusable) ===== */
.spark-candle, .vb-candle { display: flex; align-items: flex-end; gap: 1.5px; height: 30px; margin-top: var(--space-4); }
.spark-candle span, .vb-candle span { flex: 1; border-radius: 1px; min-width: 2px; }
.vb-candle-wrap { position: relative; }
.vb-candle-bar { cursor: pointer; transition: opacity var(--transition-fast); }
.vb-candle-bar:hover { opacity: 0.7; }
.candle-tt { position: absolute; bottom: 36px; left: 50%; transform: translateX(-50%); z-index: 30; }
/* ===== TOOLKIT: range bars (day + 52w), reusable ===== */
.range-day { display: flex; align-items: center; gap: var(--space-3); font-family: var(--font-mono); }
.range-day .range-end { font-size: var(--text-xs); color: var(--ink-3); white-space: nowrap; font-variant-numeric: tabular-nums; }
.range-day .range-lbl { width: 28px; color: var(--ink-3); letter-spacing: var(--track-wide); text-transform: uppercase; }
.range-day__track { flex: 1 1 auto; height: 6px; border-radius: var(--radius-pill); position: relative; min-width: 60px; cursor: pointer;
  background: linear-gradient(90deg, var(--bad) 0%, var(--line) 50%, var(--good) 100%); opacity: 0.9; }
.range-day__track--52w { background: linear-gradient(90deg, var(--bad) 0%, var(--line) 50%, var(--good) 100%); }
.range-day__fill { display: none; }
.range-tt { position: absolute; bottom: 18px; transform: translateX(-50%); z-index: 30; }
.vb-dayline { display: flex; flex-direction: column; gap: 2px; margin-bottom: var(--space-4); }
.vb-dayline-lbl { font-family: var(--font-mono); font-size: 9px; color: var(--mountain-pine); text-transform: uppercase; letter-spacing: var(--track-wide); }
.vb-dayline-val { font-family: var(--font-mono); font-size: 17px; color: var(--ink-2); font-variant-numeric: tabular-nums; }
.vb-dayline-val strong { color: var(--ink-1); font-weight: 700; }
.range-52w { display: flex; flex-direction: column; gap: var(--space-3); }
.range-52w-head { display: flex; justify-content: space-between; align-items: baseline; }
.range-52w-lbl { font-family: var(--font-mono); font-size: 9px; color: var(--mountain-pine); text-transform: uppercase; letter-spacing: var(--track-wide); }
.range-52w-ends { display: none; }
.range-52w-ends span { color: var(--ink-1); font-weight: 600; }
.range-52w .range-day__track { height: 9px; width: 100%; }
.range-day__track::before { content: ""; position: absolute; left: 0; right: 0; top: -8px; bottom: -8px; }
.range-day--solo { gap: var(--space-4); }
.range-day__marker { position: absolute; top: 50%; transform: translate(-50%,-50%); width: 3px; height: 12px; background: var(--ink-1); border-radius: 1px; z-index: 3; box-shadow: 0 0 0 1.5px var(--bg-elev); }
.range-day.is-dead { opacity: 0.35; }
.range-day.is-dead .range-day__marker { background: var(--ink-3); }
/* facts */
.vb-col--facts { min-width: 150px; display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-3) var(--space-5); align-content: center; }
.vb-col--facts .fact, .vb-col--facts .fact-open { font-family: var(--font-mono); font-size: 9px; color: var(--ink-3); text-transform: uppercase; letter-spacing: var(--track-wide); display: flex; flex-direction: column; gap: 1px; }
.vb-col--facts strong { color: var(--mountain-pine); font-weight: 800; margin-left: 0; font-size: 14px; }
.vb-col--facts .fact-roe strong { color: var(--good); }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); border: 0; }
/* QS+MS merged cell — neutral values, token sparkline (QS=pine, MS=ink-3), arrows carry good/bad */
.vb-col--scores { gap: var(--space-4); }
.vb-score-row { display: flex; align-items: center; justify-content: flex-start; gap: var(--space-5); cursor: pointer; white-space: nowrap; padding: var(--space-2) 0; }
.vb-score-main { display: flex; flex-direction: column; gap: 1px; }
.vb-score-val { display: flex; align-items: baseline; gap: var(--space-3); }
.vb-clickline * { pointer-events: none; }
.vb-score-row:hover { background: rgba(45,65,72,0.04); border-radius: var(--radius-sm); }
.vb-qsms-k { font-family: var(--font-mono); font-size: var(--text-md); font-weight: 600; letter-spacing: var(--track-wide); width: 26px; }
#card-qs .vb-qsms-k { color: var(--mountain-pine); }
#card-ms .vb-qsms-k { color: var(--warn); }
#card-qs strong { color: var(--mountain-pine); font-size: 21px; font-weight: 800; }
#card-ms strong { color: var(--warn); font-size: 21px; font-weight: 800; }
.vb-row-spark { width: 64px; height: 40px; flex-shrink: 0; margin-left: 16px; }
.vb-qsms-arrow { font-size: var(--text-2xs); }
.vb-qsms-arrow.up { color: var(--good); } .vb-qsms-arrow.down { color: var(--bad); }
.vb-qsms-spark { width: 70px; height: 38px; flex-shrink: 0; }
/* CP cell with pressure bar — neutral eyebrow + value */
.vb-cp-eyebrow { color: var(--mountain-pine); font-size: var(--text-md); }
.vb-cp-val { font-family: var(--font-mono); font-size: 26px; font-weight: 800; color: var(--ink-1); margin: 3px 0; }
.verdict-band.is-up .vb-cp-val, .vb-cp-val.cp-pos { color: var(--good); }
.vb-cp-val.cp-neg { color: var(--bad); }
/* S47e: merged Conviction State + CP card (takes ~2 column widths). */
.vb-col--convstate { flex: 2 1 0; min-width: 230px; justify-content: center; gap: var(--space-2); position: relative; cursor: pointer; }
.vb-col--convstate:hover { background: var(--neutral-bg); }
.vb-col--convstate .vb-cp-val { font-family: var(--font-mono); font-weight: 700; font-size: var(--text-h1); line-height: 1; margin-top: var(--space-1); }
/* S47e: convstate card inner layout — state/hero/stats left, gauge right. */
/* S47e: convstate card = top row (state left, hero+stats right) + full-width scale. */
.vb-col--convstate { flex-direction: column; align-items: stretch; gap: var(--space-3); }
.cs-top { display: flex; justify-content: space-between; align-items: flex-start; gap: var(--space-4); }
.cs-state { display: flex; flex-direction: column; }
.cs-vals { display: flex; flex-direction: column; align-items: flex-end; }
.cs-vals .vb-cp-val { margin-top: 0; }
.cs-stats { display: flex; gap: var(--space-4); margin-top: var(--space-2); justify-content: flex-end; }
.cs-stat { display: flex; flex-direction: column; gap: 1px; align-items: flex-end; }
.cs-stat-k { font-family: var(--font-mono); font-size: var(--text-2xs); color: var(--ink-3); text-transform: uppercase; letter-spacing: var(--track-wide); }
.cs-stat-v { font-family: var(--font-mono); font-size: var(--text-sm); font-weight: 600; color: var(--ink); }
.cs-stat-v.cp-pos { color: var(--good); }
.cs-stat-v.cp-neg { color: var(--bad); }
/* full-width CP band scale */
.cs-scale { margin-top: auto; }
.cs-scale__track { position: relative; height: 10px; border-radius: var(--radius-pill); overflow: hidden; }
.cs-scale__marker { position: absolute; top: -3px; bottom: -3px; width: 2px; background: var(--ink); border-radius: var(--radius-pill); transform: translateX(-1px); box-shadow: 0 0 0 1.5px var(--bg-elev); }
.cs-scale__ends { display: flex; justify-content: space-between; font-family: var(--font-mono); font-size: var(--text-2xs); color: var(--ink-3); text-transform: uppercase; letter-spacing: var(--track-wide); margin-top: var(--space-2); }
.cs-scale__ends span:last-child { text-align: right; }
/* status row under band */
.vb-statusrow { display: flex; justify-content: flex-end; align-items: center; gap: var(--space-5); margin-bottom: var(--space-6); font-family: var(--font-mono); font-size: var(--text-xs); color: var(--ink-3); }
.vb-hist-link { background: var(--bg-elev); border: 0.5px solid var(--line); color: var(--mountain-pine); font-family: var(--font-mono); font-size: var(--text-xs); cursor: pointer; padding: 4px var(--space-5); border-radius: var(--radius-sm); letter-spacing: var(--track-wide); transition: all var(--transition-fast); }
.vb-hist-link:hover { border-color: var(--mountain-pine); background: var(--accent-bg); }
.instr-sentinel { margin-bottom: var(--space-6); }
/* S46b — Sentinel header: title + pulse + meta + arrow inline */
.iw-sent-header { display: flex; align-items: center; gap: var(--space-3); margin-bottom: var(--space-4); flex-wrap: wrap; }
.iw-sent-header h2 { margin: 0 var(--space-2) 0 0; }
.iw-sent-header .iw-sent-meta { font-family: var(--font-mono); font-size: var(--text-xs); color: var(--ink-3); }
.iw-sent-header .iw-sent-explore { margin-left: auto; color: var(--mountain-pine); text-decoration: none; font-size: var(--text-sm); font-weight: 600; padding: 0 var(--space-2); }
.iw-sent-header .iw-sent-explore:hover { color: var(--accent); }
.iw-sent-symbol-row { margin-bottom: var(--space-4); }
.iw-sent-symbol-row .iw-sent-meta { font-family: var(--font-mono); font-size: var(--text-sm); color: var(--mountain-pine); font-weight: 600; }
/* S46b — page rows below band */
.instr-row { display: grid; gap: var(--space-5); margin-bottom: var(--space-5); align-items: stretch; }
/* S46b — instrument page responsive (tablet + phone) */
@media (max-width: 900px) {
  /* Band: 7-col flex row -> wrap to multi-row (each col min 50%) */
  .instr-page .verdict-band { flex-wrap: wrap; }
  .instr-page .vb-col { flex: 1 1 45%; min-width: 45%; border-top: 0.5px solid var(--line-soft); }
  .instr-page .vb-col + .vb-col { border-left: none; }  /* drop vertical dividers when wrapped */
  /* Banner: title row + tabs stack */
  .instr-banner { flex-direction: column; align-items: stretch; gap: var(--space-4); }
  .instr-banner__right { flex-wrap: wrap; }
  .instr-tabs { flex-wrap: wrap; }
}
@media (max-width: 560px) {
  /* Phone: band columns stack 1-up */
  .instr-page .vb-col { flex: 1 1 100%; min-width: 100%; }
  /* page rows already stack via the 1000px rule; ensure quadrant/chart full width */
  .instr-page #peer-quadrant { height: 260px; }
  /* tabs: each tab can shrink */
  .instr-tabs .itab { padding: 8px 12px; font-size: 10px; }
}
.instr-row--2col { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
.instr-row--3col { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.instr-row .section { margin-bottom: 0; }
#peer-quadrant { height: 300px; width: 100%; }
#instr-price-chart { position: relative; }
#instr-price-chart .acc-dots, #instr-price-chart .acc-focus, #instr-price-chart .acc-ltp { display: none; }
#instr-price-chart .acc-expand { position: absolute; top: 0; right: 0; z-index: 5; }

/* PRICE SERIES title -> EXACT match to .section h2 */
#instr-price-chart .gcard__title { font-family: var(--font-mono); font-size: 14px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--mountain-pine); font-weight: 600; }
/* coming-soon desk cards */
.desk-soon { display: flex; flex-direction: column; }
.desk-soon-body { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--space-3); padding: var(--space-7) var(--space-5); text-align: center; }
.desk-soon-badge { font-family: var(--font-mono); font-size: var(--text-2xs); text-transform: uppercase; letter-spacing: var(--track-wider); color: var(--ink-3); background: var(--line-soft); padding: 3px var(--space-4); border-radius: var(--radius-pill); }
.desk-soon-text { font-family: var(--font-mono); font-size: var(--text-xs); color: var(--ink-3); margin: 0; max-width: 200px; line-height: 1.5; }
@media (max-width: 1000px) {
  .instr-row--2col, .instr-row--3col { grid-template-columns: 1fr; }
}

/* ===== INSTRUMENT BANNER (S46b — replaces instr-titlerow) ===== */
.instr-banner {
  display: flex; align-items: flex-end; justify-content: space-between;
  gap: var(--space-6); padding-bottom: var(--space-5); margin-bottom: var(--space-6);
  border-bottom: 0.5px solid var(--line-soft);
}
.instr-banner__titlerow { display: flex; align-items: center; gap: var(--space-7); }
.instr-banner__left h1 {
  font-family: var(--font-sans); font-size: var(--text-h1); font-weight: 500;
  line-height: 1.05; margin: 0 0 6px; letter-spacing: var(--track-tight); color: var(--mountain-pine);
}
.instr-banner__right { display: flex; align-items: flex-start; gap: var(--space-5); }
.instr-banner__meta {
  display: flex; flex-wrap: wrap; gap: 6px 14px; align-items: center;
  font-family: var(--font-mono); font-size: 11px;
  color: var(--ink-3); letter-spacing: 0.4px;
}
.instr-banner__meta .tl-name { font-size: 12px; color: var(--ink-2); font-weight: 500; }
.instr-banner__meta .tl-chip { white-space: nowrap; }
.instr-banner__meta .tl-chip strong { color: var(--ink-1); font-weight: 600; margin-left: 3px; }
.instr-banner #ih-addto-pill .wl-icon { font-weight: 600; font-size: 13px; line-height: 1; }
.instr-tabs {
  display: inline-flex; align-items: center; gap: 4px;
  font-family: var(--font-mono);
}
.instr-tabs .itab {
  display: inline-block;
  background: transparent; border: 1px solid var(--line); border-radius: 4px;
  font-family: var(--font-mono); font-size: 11px; font-weight: 600;
  letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--ink-2);
  padding: 10px 18px; cursor: pointer;
  transition: background 0.12s, color 0.12s, border-color 0.12s;
}
.instr-tabs .itab:hover { background: var(--mountain-pine-bg); border-color: var(--mountain-pine); }
.instr-tabs .itab.active { background: var(--mountain-pine); border-color: var(--mountain-pine); color: #fff; }
.instr-tabs .caret { font-size: 9px; margin-left: 2px; opacity: 0.7; }
.instr-tabs .itab-icon { display: inline-flex; align-items: center; justify-content: center; padding: 8px 12px; color: var(--ink-2); }
.instr-tabs .itab-icon:hover { background: var(--mountain-pine-bg); border-color: var(--mountain-pine); color: var(--mountain-pine); }
.itab-export-wrap { position: relative; display: inline-block; }
.itab-export-menu {
  position: absolute; top: calc(100% + 4px); right: 0;
  background: #fff; border: 1px solid var(--ln-soft); border-radius: 4px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.06); min-width: 160px; z-index: 20;
  padding: 4px 0; font-family: var(--font-mono);
}
.itab-export-menu a {
  display: block; padding: 8px 14px; font-size: 11px; font-weight: 500;
  color: var(--ink-1, #1a1a1a); text-decoration: none; letter-spacing: 0.4px;
  text-transform: uppercase;
}
.itab-export-menu a:hover { background: var(--mountain-pine-bg); }
.overview-drawer {
  margin: 0 0 18px; padding: 0; background: #fff;
  border: 1px solid var(--ln-soft); border-radius: 4px; overflow: hidden;
}
.overview-drawer .ov-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 10px 16px; border-bottom: 1px solid var(--ln-soft);
  background: var(--bg-tint, #f6f5f0);
}
.overview-drawer .ov-title {
  font-family: var(--font-mono); font-size: 11px; font-weight: 600;
  letter-spacing: 0.6px; text-transform: uppercase; color: var(--ink-2, #4a525b);
}
.overview-drawer .ov-close {
  background: transparent; border: none; font-size: 18px; cursor: pointer;
  color: var(--ink-3, #8a8a8a); padding: 0 4px; line-height: 1;
}
.overview-drawer .ov-close:hover { color: var(--bad); }
.overview-drawer .ov-body {
  padding: 14px 18px; font-size: 13px; line-height: 1.6;
  color: var(--ink-1, #1a1a1a);
}
.fin-overlay {
  position: fixed; inset: 0; background: rgba(20,20,20,0.42); z-index: 60;
  display: flex; align-items: center; justify-content: center;
}
.fin-overlay .fin-card {
  background: #fff; border: 1px solid var(--ln-soft); border-radius: 6px;
  padding: 36px 56px; position: relative; min-width: 320px; text-align: center;
  font-family: var(--font-mono);
}
.fin-overlay .fin-title { font-size: 18px; font-weight: 600; color: var(--ink-1, #1a1a1a); margin-bottom: 8px; }
.fin-overlay .fin-msg { font-size: 12px; color: var(--ink-3, #8a8a8a); letter-spacing: 0.5px; text-transform: uppercase; }
.fin-overlay .fin-close {
  position: absolute; top: 10px; right: 14px; background: transparent;
  border: none; font-size: 20px; cursor: pointer; color: var(--ink-3, #8a8a8a);
}
.fin-overlay .fin-close:hover { color: #b94545; }
.instr-page { position: relative; }
.page-close-x {
  position: absolute; top: 12px; right: 40px;
  background: transparent; border: none;
  font-size: 22px; line-height: 1; cursor: pointer;
  color: var(--ink-3, #8a8a8a); padding: 4px 8px;
  z-index: 10;
}
.page-close-x:hover { color: #b94545; }
.instr-tabs .itab.itab-red {
  background: var(--accent); color: #fff; border-color: var(--accent);
  font-weight: 600; box-shadow: 0 1px 2px rgba(0,0,0,0.08);
}
.instr-tabs .itab.itab-red:hover { background: var(--accent-soft); border-color: var(--accent-soft); }
.instr-tabs .itab.itab-red.active { background: var(--accent-soft); border-color: var(--accent-soft); }
.instr-tabs .caret { display: none !important; }

/* Price History chart range buttons */
.ph-rbtn {
  font-family: var(--font-mono); font-size: 10px;
  padding: 4px 10px; border: 1px solid var(--line-soft); background: var(--bg-elev);
  color: var(--ink-3); border-radius: 3px; cursor: pointer;
  letter-spacing: 0.02em;
}
.ph-rbtn:hover { color: var(--ink); border-color: var(--ink-3); }
.ph-rbtn-active, .ph-rbtn-active:hover {
  background: var(--mountain-pine); color: #fff; border-color: var(--mountain-pine);
}
.ph-rbtn-pending { color: var(--ink-3); }  /* S39: no ranges pending */
.ph-rbtn-pending:hover { color: var(--ink-3); border-color: var(--line-soft); }


/* Overview drawer — force the mono face on description body
   (drawer is rendered outside .instr-shell so the global rule
    .instr-shell div { font-family: var(--font-mono);
}
#overview-drawer #desc {
  font-family: var(--font-mono) !important;
  font-weight: 400;
  letter-spacing: 0;
  font-feature-settings: normal;
  font-variant-ligatures: normal;
}
/* Restore mono where we explicitly want it inside the drawer */
#overview-drawer [style*="monospace"],
#overview-drawer .mono {
  font-family: 'JetBrains Mono', ui-monospace, monospace !important;
}


/* Overview drawer sub-tabs (Fundamentals → Overview / Financials) */
.ov-subtab {
  background: transparent; border: none;
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 11px; font-weight: 600; letter-spacing: 0.06em;
  text-transform: uppercase; color: #8a8579;
  padding: 8px 14px 10px; cursor: pointer;
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
}
.ov-subtab:hover { color: var(--ink); }
.ov-subtab-active {
  color: var(--mountain-pine); border-bottom-color: var(--mountain-pine);
}


/* Company Overview description clamp + inline toggle */
#desc.desc-clamped {
  display: -webkit-box;
  -webkit-line-clamp: 5;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
#desc.desc-expanded { display: block; overflow: visible; }
.desc-toggle {
  display: inline-block; margin-top: 6px;
  background: transparent; border: none; padding: 0;
  font-family: var(--font-mono);
  font-size: 12px; font-weight: 500;
  color: #4a525b; cursor: pointer;
  letter-spacing: 0;
}
.desc-toggle:hover { color: #1c1b18; text-decoration: underline; }


/* S39d — Watchlist picker popup */
.wlp-overlay {
  position: fixed; inset: 0;
  background: rgba(28,27,24,0.45);
  display: none; align-items: center; justify-content: center;
  z-index: 2000;
}
.wlp-overlay.is-open { display: flex; }
.wlp-modal {
  background: #fff; border-radius: 6px;
  width: 460px; max-width: 92vw; max-height: 86vh;
  overflow: hidden; display: flex; flex-direction: column;
  box-shadow: 0 20px 60px rgba(0,0,0,0.25);
  font-family: var(--font-mono);
}
.wlp-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 16px 22px 10px;
  border-bottom: 1px solid #e6e4dc;
}
.wlp-title { font-size: 15px; font-weight: 600; color: #1c1b18; }
.wlp-close {
  background: transparent; border: none; cursor: pointer;
  font-size: 16px; color: #8a8579; padding: 4px 8px;
}
.wlp-close:hover { color: #1c1b18; }
.wlp-sub {
  padding: 8px 22px;
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 11px; color: #8a8579; letter-spacing: 0.04em;
  border-bottom: 1px solid #f0eee5;
}
.wlp-body { padding: 6px 14px 12px; overflow: auto; max-height: 60vh; }
.wlp-list { display: flex; flex-direction: column; gap: 0; }
.wlp-row {
  display: grid;
  grid-template-columns: 28px 1fr 50px;
  align-items: center; gap: 10px;
  padding: 9px 10px;
  background: transparent; border: none;
  border-bottom: 1px solid #f5f3eb;
  cursor: pointer; text-align: left;
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 12px; color: #1c1b18;
}
.wlp-row:last-child { border-bottom: none; }
.wlp-row:hover { background: #fafaf8; }
.wlp-row.is-in { background: #f1f6f1; }
.wlp-row.is-in:hover { background: #e8efe8; }
.wlp-row .wlp-tick { color: #2f7a4f; font-size: 14px; text-align: center; }
.wlp-row .wlp-name { color: #1c1b18; }
.wlp-unnamed { color: #8a8579; font-style: italic; }
.wlp-row .wlp-count {
  color: #8a8579; text-align: right; font-size: 11px;
}
.wlp-foot {
  border-top: 1px solid #e6e4dc;
  padding: 10px 22px;
  background: #fafaf8;
}
.wlp-hint {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 10px; color: #8a8579; letter-spacing: 0.04em;
}


/* === Narrow phone (<=560px) — additional shrink === */
@media (max-width: 560px) {
  .today-shell, .wl-shell, .instr-shell, .audit-shell, .algo-shell, .lens-shell {
    padding: 10px 10px 32px !important;
  }
  .today-head h1, .wl-head h1, .audit-head h1, .algo-head h1, .lens-head h1 {
    font-size: 20px !important;
  }
  .totals {
    grid-template-columns: 1fr !important;
  }
}



/* === S43a Sentinel instrument wrapper styles === */
.iw-sent-subhead { display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; }
.iw-sent-subhead-left { display: flex; align-items: center; gap: 8px; }
.iw-dot { display: inline-block; width: 7px; height: 7px; border-radius: 50%; animation: iwBlink 1.6s infinite; }
.iw-dot-green { background: var(--good); }
.iw-dot-red { background: var(--bad); }
@keyframes iwBlink { 0%,100% { opacity: 1; } 50% { opacity: 0.25; } }
.iw-sent-meta { font-size: 11px; color: var(--ink-2); font-family: 'JetBrains Mono', ui-monospace, monospace; letter-spacing: 0.04em; }
.iw-sent-explore { font-size: 11px; color: var(--ink-2); text-decoration: none; padding: 4px 10px; border: 1px solid var(--line-soft); background: var(--bg); letter-spacing: 0.02em; }
.iw-sent-explore:hover { background: var(--bg-elev); border-color: var(--line); }
.iw-sent-chips { display: flex; gap: 4px; flex-wrap: wrap; margin-bottom: 12px; align-items: center; }
.iw-chip { font-family: 'JetBrains Mono', ui-monospace, monospace; font-size: 10px; padding: 3px 9px; background: var(--bg); color: var(--ink-2); border: 1px solid var(--line-soft); cursor: pointer; letter-spacing: 0.02em; }
.iw-chip:hover { background: var(--bg-elev); border-color: var(--line); }
.iw-chip.active { background: var(--ink); color: var(--bg-elev); border-color: var(--ink); }
.iw-sent-summary { padding: 10px 14px; background: var(--bg); font-size: 12px; line-height: 1.5; color: var(--ink); margin-bottom: 12px; border-left: 3px solid var(--ink-3); }
.iw-sent-body { max-height: 360px; overflow-y: auto; border-top: 1px solid var(--line-soft); }
.iw-loading { padding: 12px; color: var(--ink-3); font-size: 12px; font-style: italic; text-align: center; }
.iw-empty { padding: 16px; color: var(--ink-3); font-size: 12px; text-align: center; }
.iw-row { padding: 10px 0; border-bottom: 1px solid var(--line-soft); cursor: pointer; transition: background 0.15s; }
.iw-row:hover { background: var(--bg); }
.iw-row:last-child { border-bottom: none; }
.iw-row-head { display: flex; gap: 10px; align-items: flex-start; flex-wrap: nowrap; margin-bottom: 8px; }
.iw-row-tags { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; padding-left: 70px; }
.iw-row .iw-row-head .iw-tag + .iw-tag { margin-left: 2px; }
.iw-row-tags { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.iw-row-head .iw-time { flex: 0 0 60px; }
.iw-row-head .iw-summary { flex: 1 1 auto; min-width: 0; }
.iw-row-head .iw-tag { flex: 0 0 auto; }
.iw-time { color: var(--accent); font-variant-numeric: tabular-nums; font-size: 11px; font-family: 'JetBrains Mono', ui-monospace, monospace; }
.iw-summary { font-size: 12px; color: var(--ink); line-height: 1.5; }
.iw-lbl { color: var(--ink-3); }
.iw-tag { font-family: 'JetBrains Mono', ui-monospace, monospace; font-size: 10px; padding: 3px 9px; font-weight: 600; letter-spacing: 0.04em; color: #fff; text-transform: uppercase; display: inline-flex; align-items: center; line-height: 1.5; }
.iw-tag-pos { background: var(--good); }
.iw-tag-neg { background: var(--bad); }
.iw-tag-neu { background: var(--ink-3); }
.iw-tag-gov { background: var(--accent); }
.iw-tag-src { background: var(--ink-2); }
.iw-tag-mc { background: var(--ink-2); }
.iw-tag-mag { background: var(--warn); }
.iw-tag-warn { background: var(--warn); }
.iw-tag-conf { background: var(--bg); color: var(--ink-2); border: 1px solid var(--line-soft); font-variant-numeric: tabular-nums; text-transform: none; font-weight: 500; }
.iw-sent-foot { padding: 8px 0 0; font-size: 10px; color: var(--ink-3); text-align: right; border-top: 1px solid var(--line-soft); margin-top: 12px; }

/* Modal -- matches /sentinel canonical .sn-modal style */
.iw-modal-backdrop {
  position: fixed; inset: 0; background: rgba(0,0,0,0.5); display: none;
  align-items: center; justify-content: center; z-index: 1000;
}
.iw-modal-backdrop.show { display: flex; }
.iw-modal {
  background: var(--bg-elev); border: 1px solid var(--line-soft);
  width: 640px; max-width: 90vw; max-height: 80vh; overflow-y: auto;
  padding: 24px 28px; box-shadow: 0 12px 40px rgba(0,0,0,0.2);
  font-family: inherit;
}
.iw-modal-head { position: relative; margin-bottom: 12px; }
.iw-modal-title { font-size: 16px; font-weight: 600; margin: 0; color: var(--ink); padding-right: 28px; }
.iw-modal-meta { font-size: 11px; color: var(--ink-3); letter-spacing: 0.04em; margin-top: 2px; }
.iw-modal-close {
  position: absolute; top: -4px; right: -4px;
  background: none; border: none; font-size: 18px;
  color: var(--ink-3); cursor: pointer; padding: 0 6px;
}
.iw-modal-close:hover { color: var(--ink); }
.iw-modal-body { font-size: 13px; line-height: 1.5; color: var(--ink); }
/* Solid pills (S43b) */

/* Modal eyebrow + title */
.mod-eyebrow { font-family: 'JetBrains Mono', ui-monospace, monospace; font-size: 10px; color: var(--ink-3); letter-spacing: 0.1em; text-transform: uppercase; margin-bottom: 10px; }
.mod-eyebrow .time-strong { color: var(--accent); font-weight: 600; }
.mod-title { font-size: 17px; font-weight: 600; color: var(--ink); line-height: 1.3; margin-bottom: 14px; letter-spacing: -0.01em; padding-right: 28px; }
.mod-pills { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 18px; padding-bottom: 18px; border-bottom: 1px solid var(--line-soft); }
.mod-pullquote { font-size: 14px; line-height: 1.55; color: var(--ink); font-style: italic; border-left: 2px solid var(--ink); padding: 0 0 0 14px; margin-bottom: 18px; }
/* Why this matters card */
.mod-why { background: var(--bg); padding: 14px 16px; border-left: 3px solid var(--accent); margin-bottom: 18px; }
.mod-why-label { font-size: 9px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--accent); font-weight: 700; margin-bottom: 6px; }
.mod-why-body { font-size: 12px; color: var(--ink); line-height: 1.6; }
/* Sections */
.mod-section { margin-bottom: 18px; }
.mod-section-h { font-family: 'JetBrains Mono', ui-monospace, monospace; font-size: 9px; color: var(--accent); letter-spacing: 0.14em; text-transform: uppercase; font-weight: 700; margin-bottom: 8px; }
.mod-section-h.neutral { color: var(--ink-3); font-weight: 600; }
.mod-impact-list { display: flex; flex-direction: column; gap: 8px; }
.mod-impact-item { font-size: 12px; line-height: 1.55; color: var(--ink-2); padding: 8px 12px; background: var(--bg); border-left: 2px solid var(--line); }
.mod-impact-item .sym { font-family: 'JetBrains Mono', ui-monospace, monospace; font-weight: 600; color: var(--ink); margin-right: 8px; }
.mod-meta-grid { display: grid; grid-template-columns: auto 1fr; gap: 6px 16px; font-size: 11px; }
.mod-meta-grid .k { color: var(--ink-3); font-family: 'JetBrains Mono', ui-monospace, monospace; font-size: 10px; letter-spacing: 0.04em; text-transform: uppercase; }
.mod-meta-grid .v { color: var(--ink-2); }
.mod-footer { padding-top: 14px; margin-top: 18px; border-top: 1px solid var(--line-soft); display: flex; justify-content: space-between; align-items: center; font-size: 10px; color: var(--ink-3); font-family: 'JetBrains Mono', ui-monospace, monospace; letter-spacing: 0.06em; text-transform: uppercase; gap: 12px; }
.mod-footer a { color: var(--accent); text-decoration: none; font-family: var(--font-mono); font-size: 11px; letter-spacing: 0; text-transform: none; }
.mod-footer a:hover { text-decoration: underline; }



/* ── TAPE — conviction terminal (one-way live console) ───────────── */
.tape {
  background: var(--bg-elev);
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  padding: var(--space-6);
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  font-size: var(--text-md);
  line-height: 1.85;
  color: var(--ink);
}
.tape__head {
  display: flex;
  justify-content: space-between;
  color: var(--ink-3);
  border-bottom: 1px solid var(--line);
  padding-bottom: var(--space-4);
  margin-bottom: var(--space-4);
}
.tape__section {
  color: var(--mountain-pine);
  font-size: var(--text-xs);
  letter-spacing: var(--track-wider);
  margin: var(--space-3) 0 var(--space-2);
  font-weight: 600;
}
.tape__base {
  display: grid;
  grid-template-columns: 90px 1fr;
  gap: var(--space-1) var(--space-6);
  margin-bottom: var(--space-5);
}
.tape__sym { color: var(--ink-2); }
.tape__feed { display: flex; flex-direction: column; gap: var(--space-1); }
.tape__line { color: var(--ink); }
.tape__ts { color: var(--ink-3); margin-right: var(--space-5); }
.tape__up { color: var(--good); }
.tape__down { color: var(--bad); }
.tape__cluster { color: var(--warn); }
.tape__meta { color: var(--ink-3); }
.tape__cursor {
  display: inline-block;
  width: 7px; height: var(--text-md);
  background: var(--ink);
  vertical-align: text-bottom;
  animation: tape-blink 1.1s steps(1) infinite;
}
.tape__empty { color: var(--ink-3); }
@keyframes tape-blink { 0%,50% { opacity: 1; } 50.01%,100% { opacity: 0; } }


/* Shared greeting (Lens + Tape) — mono font; id beats .page-head__title>h1 */
#xyder-greeting { font-family: var(--font-mono); }
/* Tape greeting — mountain-pine, console-native */
.tape__greeting {
  color: var(--mountain-pine);
  font-size: var(--text-h2);
  font-weight: 600;
  letter-spacing: var(--track-tight);
  margin: 0;
  line-height: 1.1;
}
.tape__status { display: flex; align-items: center; gap: var(--space-4); }

/* ============================================================
   PrismDatePicker (S46e) — custom mono date picker
   ============================================================ */
.pdp {
  z-index: 200;
  width: 248px;
  background: var(--bg-elev);
  border: 0.5px solid var(--line-soft);
  border-radius: var(--radius-md);
  box-shadow: 0 8px 28px rgba(0,0,0,0.18);
  padding: var(--space-4);
  font-family: var(--font-mono);
}
.pdp__head { display: flex; align-items: center; justify-content: space-between; margin-bottom: var(--space-3); }
.pdp__title { font-family: var(--font-mono); font-size: var(--text-sm); font-weight: 600; color: var(--ink); letter-spacing: 0.3px; }
.pdp__nav { display: flex; gap: var(--space-2); }
.pdp__arw {
  background: transparent; border: 0.5px solid var(--line-soft); color: var(--ink-2);
  border-radius: var(--radius-sm); width: 24px; height: 24px; cursor: pointer; font-size: 14px; line-height: 1;
}
.pdp__arw:hover { background: var(--mountain-pine-bg); border-color: var(--mountain-pine); color: var(--mountain-pine); }
.pdp__week { display: grid; grid-template-columns: repeat(7, 1fr); gap: 1px; margin-bottom: var(--space-2); }
.pdp__week span { text-align: center; font-family: var(--font-mono); font-size: 10px; color: var(--ink-3); letter-spacing: 0.4px; }
.pdp__grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 1px; }
.pdp__d {
  text-align: center; padding: 6px 0; font-family: var(--font-mono); font-size: var(--text-xs);
  color: var(--ink); cursor: pointer; border-radius: var(--radius-sm); user-select: none;
}
.pdp__d:hover { background: var(--mountain-pine-bg); }
.pdp__d--empty { cursor: default; }
.pdp__d.is-today { color: var(--mountain-pine); font-weight: 600; }
.pdp__d.is-sel { background: var(--mountain-pine); color: var(--ink-on-dark); font-weight: 600; }
.pdp__foot { display: flex; justify-content: space-between; margin-top: var(--space-3); padding-top: var(--space-3); border-top: 0.5px solid var(--line-soft); }
.pdp__act { background: transparent; border: none; color: var(--mountain-pine); cursor: pointer; font-family: var(--font-mono); font-size: var(--text-xs); }
.pdp__act:hover { text-decoration: underline; }

/* ============================================================
   S46f — Direction pill (LONG green, SHORT red) for portfolio tables
   ============================================================ */
.dir-pill {
  display: inline-block;
  padding: 1px 6px;
  font-family: var(--font-mono);
  font-size: 9px;
  font-weight: 600;
  letter-spacing: 0.5px;
  border-radius: var(--radius-sm);
  border: 0.5px solid;
}
.dir-pill--long  { color: var(--good); border-color: var(--good); background: var(--good-bg); }
.dir-pill--short { color: var(--bad);  border-color: var(--bad);  background: var(--bad-bg); }


/* S46f — direction toggle pills: .is-active state for .btn used as toggles. */
.btn.is-active {
  background: var(--mountain-pine);
  color: var(--ink-on-dark);
  border-color: var(--mountain-pine);
}
.btn.is-active:hover { background: var(--mountain-pine); color: var(--ink-on-dark); }

/* ── S47a: watchlist table skeleton (perceived-perf; CSS-only, theme-token) ── */
@keyframes wlSkelShimmer { 0% { background-position: -480px 0; } 100% { background-position: 480px 0; } }
.table tbody tr.wl-skel td { padding: var(--space-4) var(--space-5); }
.table tbody tr.wl-skel .wl-skel-bar {
  display: inline-block; width: 100%; height: 11px; border-radius: 3px; vertical-align: middle;
  background: linear-gradient(90deg, var(--line-soft) 25%, var(--line) 37%, var(--line-soft) 63%);
  background-size: 960px 100%;
  animation: wlSkelShimmer 1.2s linear infinite;
}
.table tbody tr.wl-skel .wl-skel-bar.w-sm { width: 42%; }
.table tbody tr.wl-skel .wl-skel-bar.w-md { width: 68%; }

/* ── S47a: chart loading shimmer overlay (perceived-perf; CSS-only) ── */
.chart-mount-wrap { position: relative; }
.chart-loading-overlay {
  position: absolute; inset: 0; z-index: 5; display: flex; align-items: flex-end; gap: 6px;
  padding: 18px; pointer-events: none; background: var(--bg);
}
.chart-loading-overlay .clo-bar {
  flex: 1; border-radius: 3px 3px 0 0;
  background: linear-gradient(180deg, var(--line) 0%, var(--line-soft) 100%);
  animation: cloPulse 1.1s ease-in-out infinite;
}
.chart-loading-overlay .clo-bar:nth-child(1) { height: 38%; animation-delay: 0s; }
.chart-loading-overlay .clo-bar:nth-child(2) { height: 62%; animation-delay: .08s; }
.chart-loading-overlay .clo-bar:nth-child(3) { height: 48%; animation-delay: .16s; }
.chart-loading-overlay .clo-bar:nth-child(4) { height: 78%; animation-delay: .24s; }
.chart-loading-overlay .clo-bar:nth-child(5) { height: 55%; animation-delay: .32s; }
.chart-loading-overlay .clo-bar:nth-child(6) { height: 70%; animation-delay: .40s; }
.chart-loading-overlay .clo-bar:nth-child(7) { height: 44%; animation-delay: .48s; }
.chart-loading-overlay .clo-bar:nth-child(8) { height: 66%; animation-delay: .56s; }
@keyframes cloPulse { 0%,100% { opacity: .35; transform: scaleY(.85); transform-origin: bottom; } 50% { opacity: .9; transform: scaleY(1); transform-origin: bottom; } }
  to   { opacity: 1; }
}


/* S47a perf: page-shimmer -- full-page loading overlay using the same
   Mountain Pine pulsing bars as .acc-skel-bars (re-uses @keyframes
   accSkelPulse), scaled to the content area. Used on /algo (delivery +
   intraday tabs) and /algo/positions where server response on contended
   2vCPU exceeds 5s per call. Theme-token throughout. */
.page-shimmer {
  position: fixed;
  top: 64px;          /* clears the top nav (base.html) */
  left: 0;
  right: 0;
  bottom: 0;
  display: none;
  align-items: center;
  justify-content: center;
  background: var(--bg);
  z-index: 50;
}
.page-shimmer.is-visible { display: flex; }
.page-shimmer-inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 24px;
  width: 90%;
  max-width: 720px;
}
.page-shimmer-bars {
  display: flex;
  align-items: flex-end;
  gap: 10px;
  width: 100%;
  height: 220px;
}
.page-shimmer-bars span {
  flex: 1;
  border-radius: 4px 4px 0 0;
  background: linear-gradient(180deg, var(--mountain-pine) 0%, var(--mountain-pine-bg-strong) 100%);
  animation: accSkelPulse 1.1s ease-in-out infinite;
}
.page-shimmer-bars span:nth-child(1)  { height: 42%; animation-delay: .00s; }
.page-shimmer-bars span:nth-child(2)  { height: 68%; animation-delay: .07s; }
.page-shimmer-bars span:nth-child(3)  { height: 54%; animation-delay: .14s; }
.page-shimmer-bars span:nth-child(4)  { height: 82%; animation-delay: .21s; }
.page-shimmer-bars span:nth-child(5)  { height: 60%; animation-delay: .28s; }
.page-shimmer-bars span:nth-child(6)  { height: 74%; animation-delay: .35s; }
.page-shimmer-bars span:nth-child(7)  { height: 48%; animation-delay: .42s; }
.page-shimmer-bars span:nth-child(8)  { height: 90%; animation-delay: .49s; }
.page-shimmer-bars span:nth-child(9)  { height: 56%; animation-delay: .56s; }
.page-shimmer-bars span:nth-child(10) { height: 72%; animation-delay: .63s; }
.page-shimmer-bars span:nth-child(11) { height: 44%; animation-delay: .70s; }
.page-shimmer-bars span:nth-child(12) { height: 78%; animation-delay: .77s; }
.page-shimmer-bars span:nth-child(13) { height: 52%; animation-delay: .84s; }
.page-shimmer-bars span:nth-child(14) { height: 66%; animation-delay: .91s; }
.page-shimmer-label {
  font-family: var(--font-mono, monospace);
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-muted, var(--ink-3));
}


/* ─── CP v3 conviction-state tokens (S47e) ───────────────────────────────
   The stored cp_v3_state is the final answer. Diverging scale: conviction
   ahead = opportunity (good/green), price ahead = caution (bad/red),
   balanced = neutral (mountain-pine). Leaning states are the mid tints.
   All resolve from existing theme tokens — no hardcoded colour. */
.tape__state { font-weight: 700; letter-spacing: var(--track-wide); }
.tape__state--conviction-ahead   { color: var(--good); }
.tape__state--conviction-leaning { color: var(--good); opacity: 0.78; }
.tape__state--balanced           { color: var(--mountain-pine); }
.tape__state--price-leaning      { color: var(--warn); }
.tape__state--price-ahead        { color: var(--bad); }

/* Tape P&L box — make the running P&L stand out from the muted header row */
.tape__pnl-box {
  display: inline-flex; flex-direction: column; align-items: stretch; gap: 4px;
  padding: 8px 12px; border: 1px solid var(--line);
  border-radius: var(--radius-sm); background: var(--bg-elev);
  font-family: var(--font-mono); font-size: var(--text-sm);
  max-width: 100%;
}
.tape__pnl-row { display: inline-flex; align-items: center; gap: var(--space-2); }
.tape__pnl-label {
  font-size: var(--text-xs); letter-spacing: 0.06em;
  color: var(--ink-3); text-transform: uppercase;
}
.tape__pnl-box #tape-pnl { font-weight: 600; color: var(--ink); }
.tape__pnl-narr {
  font-size: var(--text-xs); color: var(--ink);
  line-height: 1.4; border-top: 0.5px solid var(--line-soft); padding-top: 4px;
}

/* ============================================================
   SENTINEL PAGE COMPONENTS  (s51a rebuild)
   app.css-only, token-driven, theme-aware, mono throughout.
   ============================================================ */

/* Pulse counter grid — four across, left-aligned (distinct from
   cs-stats which is a right-aligned compact cluster). */
.sn-counters {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--space-6);
  margin-top: var(--space-5);
}
.sn-counter {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}
.sn-counter__k {
  font-family: var(--font-mono);
  font-size: var(--text-2xs);
  color: var(--ink-3);
  text-transform: uppercase;
  letter-spacing: var(--track-wider);
}
.sn-counter__v {
  font-family: var(--font-mono);
  font-size: var(--text-h2);
  font-weight: 600;
  color: var(--ink);
  line-height: 1;
}
.sn-counter__v.is-accent { color: var(--accent); }
.sn-counter__v.is-warn   { color: var(--warn); }
.sn-counter__v.is-good   { color: var(--good); }
.sn-counter__v.is-bad    { color: var(--bad); }

/* Pulse text line (honest state until synthesiser is rebuilt). */
.sn-pulse-text {
  font-family: var(--font-mono);
  font-size: var(--text-sm);
  color: var(--ink-2);
  font-style: italic;
  margin-top: var(--space-3);
}

/* Stream / filter controls. */
.sn-controls {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  margin: var(--space-5) 0;
}
.sn-chip-row {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  flex-wrap: wrap;
}
.sn-chip-row__label {
  font-family: var(--font-mono);
  font-size: var(--text-2xs);
  color: var(--ink-3);
  text-transform: uppercase;
  letter-spacing: var(--track-wider);
  margin-right: var(--space-2);
}
.chip.is-active {
  background: var(--accent-bg);
  color: var(--accent);
  border-color: var(--accent-bg-strong);
}
.chip.is-clickable { cursor: pointer; }

/* Search input — mono, tokenized, theme-aware. */
.sn-search {
  width: 100%;
  font-family: var(--font-mono);
  font-size: var(--text-sm);
  color: var(--ink);
  background: var(--bg);
  border: 0.5px solid var(--line-soft);
  border-radius: var(--radius-sm);
  padding: var(--space-4) var(--space-5);
}
.sn-search::placeholder { color: var(--ink-3); }
.sn-search:focus {
  outline: none;
  border-color: var(--accent-bg-strong);
}

/* Event row — shared by radar + stream lists. */
.sn-list { display: flex; flex-direction: column; }
.sn-item {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  padding: var(--space-5) 0;
  border-bottom: 0.5px solid var(--line-soft);
  cursor: pointer;
}
.sn-item:last-child { border-bottom: none; }
.sn-item.is-gov { border-left: 2px solid var(--accent); padding-left: var(--space-5); }
.sn-item__top {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  flex-wrap: wrap;
}
.sn-item__entity {
  font-family: var(--font-mono);
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--ink);
}
.sn-item__summary {
  font-family: var(--font-mono);
  font-size: var(--text-sm);
  color: var(--ink-2);
  line-height: 1.5;
}
.sn-item__meta {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  font-family: var(--font-mono);
  font-size: var(--text-2xs);
  color: var(--ink-3);
  letter-spacing: var(--track-wide);
}
.sn-item__time { margin-left: auto; }

/* ============================================================
   SENTINEL PAGE COMPONENTS  (s51a rebuild)
   app.css-only, token-driven, theme-aware, mono throughout.
   ============================================================ */

/* Pulse counter grid — four across, left-aligned (distinct from
   cs-stats which is a right-aligned compact cluster). */
.sn-counters {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--space-6);
  margin-top: var(--space-5);
}
.sn-counter {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}
.sn-counter__k {
  font-family: var(--font-mono);
  font-size: var(--text-2xs);
  color: var(--ink-3);
  text-transform: uppercase;
  letter-spacing: var(--track-wider);
}
.sn-counter__v {
  font-family: var(--font-mono);
  font-size: var(--text-h2);
  font-weight: 600;
  color: var(--ink);
  line-height: 1;
}
.sn-counter__v.is-accent { color: var(--accent); }
.sn-counter__v.is-warn   { color: var(--warn); }
.sn-counter__v.is-good   { color: var(--good); }
.sn-counter__v.is-bad    { color: var(--bad); }

/* Pulse text line (honest state until synthesiser is rebuilt). */
.sn-pulse-text {
  font-family: var(--font-mono);
  font-size: var(--text-sm);
  color: var(--ink-2);
  font-style: italic;
  margin-top: var(--space-3);
}

/* Stream / filter controls. */
.sn-controls {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  margin: var(--space-5) 0;
}
.sn-chip-row {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  flex-wrap: wrap;
}
.sn-chip-row__label {
  font-family: var(--font-mono);
  font-size: var(--text-2xs);
  color: var(--ink-3);
  text-transform: uppercase;
  letter-spacing: var(--track-wider);
  margin-right: var(--space-2);
}
.chip.is-active {
  background: var(--accent-bg);
  color: var(--accent);
  border-color: var(--accent-bg-strong);
}
.chip.is-clickable { cursor: pointer; }

/* Search input — mono, tokenized, theme-aware. */
.sn-search {
  width: 100%;
  font-family: var(--font-mono);
  font-size: var(--text-sm);
  color: var(--ink);
  background: var(--bg);
  border: 0.5px solid var(--line-soft);
  border-radius: var(--radius-sm);
  padding: var(--space-4) var(--space-5);
}
.sn-search::placeholder { color: var(--ink-3); }
.sn-search:focus {
  outline: none;
  border-color: var(--accent-bg-strong);
}

/* Event row — shared by radar + stream lists. */
.sn-list { display: flex; flex-direction: column; }
.sn-item {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  padding: var(--space-5) 0;
  border-bottom: 0.5px solid var(--line-soft);
  cursor: pointer;
}
.sn-item:last-child { border-bottom: none; }
.sn-item.is-gov { border-left: 2px solid var(--accent); padding-left: var(--space-5); }
.sn-item__top {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  flex-wrap: wrap;
}
.sn-item__entity {
  font-family: var(--font-mono);
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--ink);
}
.sn-item__summary {
  font-family: var(--font-mono);
  font-size: var(--text-sm);
  color: var(--ink-2);
  line-height: 1.5;
}
.sn-item__meta {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  font-family: var(--font-mono);
  font-size: var(--text-2xs);
  color: var(--ink-3);
  letter-spacing: var(--track-wide);
}
.sn-item__time { margin-left: auto; }

/* Sentinel FinBERT confidence inline label (s51a). */
.sn-finbert-conf {
  font-family: var(--font-mono);
  font-size: var(--text-2xs);
  color: var(--ink-3);
  letter-spacing: var(--track-wide);
}

/* Sentinel FinBERT signed score (s51a) — sign-colored numeric sentiment. */
.sn-finbert-score {
  font-family: var(--font-mono);
  font-size: var(--text-sm);
  font-weight: 600;
  letter-spacing: var(--track-wide);
}
.sn-finbert-score.is-pos { color: var(--good); }
.sn-finbert-score.is-neg { color: var(--bad); }
.sn-finbert-score.is-zero { color: var(--ink-3); }

/* ============================================================
   SENTINEL BULLETIN — live typewriter news feed (s51a)
   ============================================================ */
.sn-bulletin {
  margin-top: var(--space-6);
  border-top: 0.5px solid var(--line-soft);
  padding-top: var(--space-5);
  display: flex;
  flex-direction: column;
}
.sn-bulletin__line {
  padding: var(--space-4) 0;
  border-bottom: 0.5px solid var(--line-soft);
}
.sn-bulletin__line:last-of-type { border-bottom: none; }
.sn-bulletin__head {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  flex-wrap: wrap;
  margin-bottom: var(--space-2);
}
.sn-bulletin__score {
  font-family: var(--font-mono);
  font-size: var(--text-sm);
  font-weight: 600;
  letter-spacing: var(--track-wide);
}
.sn-bulletin__score.is-pos { color: var(--good); }
.sn-bulletin__score.is-neg { color: var(--bad); }
.sn-bulletin__tag {
  font-family: var(--font-mono);
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--ink);
}
.sn-bulletin__src {
  font-family: var(--font-mono);
  font-size: var(--text-2xs);
  color: var(--ink-3);
  letter-spacing: var(--track-wide);
}
.sn-bulletin__headline {
  font-family: var(--font-mono);
  font-size: var(--text-sm);
  font-weight: 500;
  color: var(--ink);
  line-height: 1.5;
  margin-bottom: var(--space-2);
}
.sn-bulletin__snippet {
  font-family: var(--font-mono);
  font-size: var(--text-sm);
  color: var(--ink-2);
  line-height: 1.6;
}
.sn-bulletin__more {
  font-family: var(--font-mono);
  font-size: var(--text-2xs);
  color: var(--accent);
  text-decoration: none;
  letter-spacing: var(--track-wide);
  margin-left: var(--space-2);
  white-space: nowrap;
}
.sn-bulletin__more:hover { text-decoration: underline; }
.sn-bulletin__heartbeat {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-4) 0;
  font-family: var(--font-mono);
  font-size: var(--text-2xs);
  color: var(--ink-3);
  letter-spacing: var(--track-wide);
}
.sn-bulletin__hb-mark { color: var(--mountain-pine); font-weight: 600; }
.sn-bulletin__cursor {
  display: inline-block;
  width: 6px; height: 12px;
  background: var(--accent);
  animation: sn-blink 1s steps(2, start) infinite;
}
@keyframes sn-blink { to { visibility: hidden; } }


/* ===================================================================
   RESPONSIVE -- moved to end of file so they win at equal specificity.
   These were inserted above the .pn-grid base rules, which therefore
   overrode them at every width: the phone kept rendering 5 columns.
   =================================================================== */
/* small screens: nothing may exceed the viewport.
   The topbar is a non-wrapping flex row -- brand + eight nav items + search
   with a 32px gap -- so on a phone it was wider than the screen and pushed the
   whole page out. A page wider than the viewport also defeats every narrower
   breakpoint below, because the layout viewport stays wide. */
@media (max-width: 720px) {
  html, body { max-width: 100vw; overflow-x: hidden; }
  .shell { padding: var(--space-5); overflow-x: hidden; }
  .topbar {
    flex-wrap: wrap;
    gap: var(--space-3) var(--space-4);
    padding: var(--space-3) var(--space-4);
    row-gap: var(--space-2);
  }
  .nav {
    order: 3;
    width: 100%;
    overflow-x: auto;          /* the nav itself scrolls, not the page */
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    gap: var(--space-3);
  }
  .nav::-webkit-scrollbar { display: none; }
  .nav-item { padding: 0 10px; white-space: nowrap; font-size: var(--text-2xs); }
  .topbar-search { order: 4; width: 100%; }
  .topbar-search input { width: 100%; }
  .topbar-spacer { display: none; }
}

/* Instrument Panel -- small screens.
   Every .pn-* grid was written desktop-only with a fixed column count, so a
   5-across row stayed 5-across at 390px. Cards stack; the chart and Compass
   take the full width; the floating nav moves out of the thumb zone. */
@media (max-width: 1024px) {
  .pn-grid--5 { grid-template-columns: repeat(3, 1fr); }
  .pn-grid--4 { grid-template-columns: repeat(2, 1fr); }
  .pn-bottom  { grid-template-columns: 1fr 1fr; }
  .pn-compass-card { grid-column: span 2; }
}
@media (max-width: 720px) {
  .pn-grid--5,
  .pn-grid--3,
  .pn-grid--4 { grid-template-columns: repeat(2, 1fr); }
  .pn-bottom  { grid-template-columns: 1fr; }
  .pn-compass-card { grid-column: span 1; }
  .pn-grid--5 .pn-num, .pn-num { font-size: 26px; }
  .pn-num--sm { font-size: 18px; }
  .pn-card { padding: var(--space-5); }
  /* The canvas height is set in JS at creation (360) and JS wins over CSS --
     a shorter card just lets the canvas bleed into the card below, which is
     what was swallowing the Compass. Size the card to fit the canvas and clip
     anything that still overruns. */
  .pn-bottom > .pn-card { min-height: 0; }
  .pn-chart-card { overflow: hidden; }
  .pn-chart-card #pn-chart { height: 360px !important; }
  /* the identity line wraps rather than pushing the page wide */
  .page-head__title h1 { font-size: 1.5rem; }
  #pn-ident { flex-wrap: wrap; row-gap: var(--space-2); font-size: var(--text-xs); }
}
@media (max-width: 480px) {
  .pn-grid--5,
  .pn-grid--3,
  .pn-grid--2,
  .pn-grid--4 { grid-template-columns: 1fr; }
  .pn-grid--5 .pn-num, .pn-num { font-size: 30px; }
  .pn-compass { font-size: var(--text-sm); line-height: 1.6; }
  /* interval pills wrap instead of overflowing the card */
  .pn-chart-card .pill { padding: 2px 8px; font-size: var(--text-2xs); }
  /* The handle is position:absolute inside .pn-page on desktop, so "bottom"
     meant the bottom of the PAGE and it ended up far down the scroll. On a
     phone it floats with the VIEWPORT on mobile instead, sitting above the
     browser chrome and out of the thumb zone. */
  .pn-floatnav {
    position: fixed;
    top: auto;
    bottom: 96px;
    right: var(--space-3);
  }
  .pn-floatnav__handle { width: 24px; height: 48px; }
  .pn-floatnav:hover .pn-floatnav__menu { max-width: 260px; }
}

/* D2 execution-timing. Colour carries the meaning; the label is short
   (good/flat/bad). Only actionable states pulse (FAVOURABLE/UNFAVOURABLE);
   NEUTRAL is static. Two forms: a top-right pill on the delivery card, and an
   inline badge in the diary table. */
@keyframes pn-timing-pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.4; } }
.pn-label-row { display: flex; align-items: center; justify-content: space-between; gap: var(--space-2); }
.pn-timing-pill { font-size: 11px; font-family: var(--mono); padding: 3px 10px;
  border-radius: 999px; border: 1px solid var(--ink-3); white-space: nowrap; }
.pn-timing-pill:empty { display: none; }
.pn-timing-pill--fav { color: var(--good); border-color: var(--good);
  background: var(--good-bg); animation: pn-timing-pulse 1.5s ease-in-out infinite; }
.pn-timing-pill--unfav { color: var(--bad); border-color: var(--bad);
  background: var(--bad-bg); animation: pn-timing-pulse 1.5s ease-in-out infinite; }
.pn-timing-pill--neutral { color: var(--ink-3); }
/* diary inline badge (kept from C1) */
.pn-timing { font-size: 11px; font-family: var(--mono); }
.pn-timing--fav { color: var(--good); animation: pn-timing-pulse 1.5s ease-in-out infinite; }
.pn-timing--unfav { color: var(--bad); animation: pn-timing-pulse 1.5s ease-in-out infinite; }
.pn-timing--neutral { color: var(--ink-3); }

/* Blinking XYDeR mark in the Compass header (replaces the COMPASS label). */
.pn-xyder-blink { animation: pn-timing-pulse 1.6s ease-in-out infinite; }

/* D3 band-transition arrow on the direction call. Only real transitions show:
   up = strengthened (good), down = weakened (bad). */
.pn-trans { font-size: 0.7em; vertical-align: 0.15em; }
.pn-trans--up { color: var(--good); }
.pn-trans--dn { color: var(--bad); }



/* ─────────────────────────────────────────────────────────────────────────
   WHITE PAPER — long-form engine narration. Built on the panel idiom
   (.pn-card / .pn-label); only document-level rules live here.

   Reading model is two fixed columns: LEFT is the engine's numbers, RIGHT is
   the narration of those numbers. A reader auditing a figure and a reader
   reading the argument both scan one column and never lose the other.
   ───────────────────────────────────────────────────────────────────────── */
.wp__stamp {
  margin: var(--space-4) 0 var(--space-6);
  padding: var(--space-3) var(--space-4);
  background: var(--mountain-pine-bg);
  border-left: 2px solid var(--mountain-pine);
  border-radius: var(--radius-sm);
  color: var(--mountain-pine);
  font-family: var(--font-mono);
  font-size: var(--text-sm);
  letter-spacing: 0.08em;
}
.wp__doc { padding-bottom: var(--space-9); }

/* Numbered section rule — the document's spine. */
.wp__sec {
  display: flex; align-items: baseline; gap: var(--space-4);
  margin: var(--space-8) 0 var(--space-4);
  padding-bottom: var(--space-3);
  border-bottom: 1px solid var(--mountain-pine);
  font-family: var(--font-mono);
  font-size: var(--text-md);
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--mountain-pine);
}
.wp__sec-n { color: var(--mountain-pine); opacity: 0.55; font-weight: 400; }

/* The two-column spine: data left, prose right. Equal columns, top-aligned,
   so a long narration never drags its figures down the page. */
.wp__row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: var(--space-3);
  align-items: start;
  margin-bottom: var(--space-3);
}
/* Wide artefacts (contributor tables, the twelve votes) take the full measure:
   five numeric columns cannot survive half a viewport. */
.wp__row--full { grid-template-columns: minmax(0, 1fr); }

.wp__prose {
  font-family: var(--font-mono);
  font-size: var(--text-md);
  line-height: 1.85;
  color: var(--ink);
}
.wp__prose + .wp__prose { margin-top: var(--space-4); }
.wp__rule-txt {
  font-family: var(--font-mono);
  font-size: var(--text-sm);
  line-height: 1.7;
  color: var(--ink-2);
  padding-left: var(--space-4);
  border-left: 2px solid var(--mountain-pine);
}
.wp__v { font-weight: 600; }
.wp__v--good  { color: var(--good); }
.wp__v--bad   { color: var(--bad); }
.wp__v--warn  { color: var(--warn); }
.wp__v--muted { color: var(--ink-3); }

.wp__kv-r {
  display: flex; justify-content: space-between; gap: var(--space-5);
  padding: var(--space-3) 0;
  border-bottom: 1px solid var(--rule);
  font-family: var(--font-mono);
}
.wp__kv-r:last-child { border-bottom: 0; }
.wp__kv-k { color: var(--ink-3); font-size: var(--text-sm); letter-spacing: 0.06em; }
.wp__kv-v { color: var(--ink); font-size: var(--text-md); text-align: right; }

/* Section divider inside a peer matrix. Toned so the two halves of the
   contribution story read apart at a glance: green carries, red drags. */
.wp__band td {
  padding-top: var(--space-4);
  font-size: var(--text-sm);
  letter-spacing: 0.1em;
  color: var(--mountain-pine);
  border-bottom: 1px solid var(--mountain-pine);
}
.wp__band--good td {
  color: var(--good);
  background: var(--good-bg);
  border-bottom-color: var(--good);
}
.wp__band--bad td {
  color: var(--bad);
  background: var(--bad-bg);
  border-bottom-color: var(--bad);
}
/* What satisfied a rule: the test on the left, the reading that met it on
   the right, so the two are never separated. */
.wp__ev { margin: var(--space-3) 0 var(--space-2); }
.wp__ev-r {
  display: flex; justify-content: space-between; gap: var(--space-5);
  padding: var(--space-2) 0;
  border-bottom: 1px dotted var(--rule);
  font-family: var(--font-mono); font-size: var(--text-sm);
}
.wp__ev-r:last-child { border-bottom: 0; }
.wp__ev-t { color: var(--ink-3); }
.wp__ev-o { color: var(--ink); text-align: right; font-weight: 600; }

/* A column marked wide takes all the slack, so the numeric columns sit
   against the text instead of drifting to the far edge. */
.wp__col-wide { width: 100%; }

/* A news row: headline, an extract, and the source it came from. */
.wp__hl { color: var(--ink); line-height: 1.5; }
.wp__body {
  color: var(--ink-3); font-size: var(--text-sm);
  line-height: 1.5; margin-top: var(--space-2);
}
.wp__src {
  display: inline-flex; align-items: center; gap: 4px;
  margin-top: var(--space-2);
  padding: 2px 8px;
  border: 1px solid var(--rule); border-radius: var(--radius-pill);
  font-size: var(--text-sm); color: var(--mountain-pine);
  text-decoration: none;
}
.wp__src:hover { border-color: var(--mountain-pine); background: var(--mountain-pine-bg); }
.wp__src-ico { opacity: 0.7; }

/* An 18-peer matrix is wider than the viewport; scroll it rather than clip
   the tail columns off the page. */
.wp__row--full .pn-card { overflow-x: auto; }

@media (max-width: 1000px) {
  .wp__row { grid-template-columns: minmax(0, 1fr); }
  .wp__kv-r { flex-direction: column; gap: 0; }
  .wp__kv-v { text-align: left; }
}

@media print {
  .topbar, .page-head__actions, .wp__stamp { display: none !important; }
  .shell { padding: 0 !important; }
  .pn-card { border: 0 !important; background: none !important; box-shadow: none !important; }
  .wp__row { grid-template-columns: minmax(0,1fr) !important; }
  .wp__sec { break-after: avoid; page-break-after: avoid; }
  .pn-card, .table { break-inside: avoid; page-break-inside: avoid; }
  .wp__prose { orphans: 3; widows: 3; }
}

/* ══ ARCHIVIST — filed financials ═══════════════════════════════════
   A statement is not a flat list. Components sum into subtotals, and the
   reader scans right-to-left from the latest period. Three devices carry
   that and nothing else does any work:
     · subtotal rows take a rule above and full ink; components sit under
       them lighter, so the arithmetic is visible without a single label
     · the newest column holds full weight and a faint ground; older ones
       recede, so the eye lands on the period that matters
     · ƒ marks a computed line, and every row carries its source on hover
   Everything token-driven. No sparklines, no badges, no gradients. */

.av-tabs {
  display: flex; gap: var(--space-7);
  margin: var(--space-6) 0 0;
  border-bottom: 1px solid var(--line-soft);
}
.av-tab {
  font-family: var(--font-mono); font-size: var(--text-sm);
  letter-spacing: var(--track-wide); text-transform: uppercase;
  color: var(--ink-3); background: none; border: none;
  padding: 0 0 var(--space-5); cursor: pointer;
  border-bottom: 1px solid transparent; margin-bottom: -1px;
  transition: color var(--transition-fast), border-color var(--transition-fast);
}
.av-tab:hover { color: var(--ink-2); }
.av-tab.active { color: var(--mountain-pine); border-bottom-color: var(--mountain-pine); }
.av-tab:focus-visible { outline: 1px solid var(--accent); outline-offset: 3px; }

.av-bar {
  display: flex; align-items: baseline; justify-content: flex-end;
  padding: var(--space-6) 0 var(--space-5);
}
.av-bar__basis {
  font-size: var(--text-2xs); letter-spacing: var(--track-wider);
  text-transform: uppercase; color: var(--ink-3);
}

.av-tablewrap { overflow-x: auto; }
.av-empty {
  padding: var(--space-8) 0; color: var(--ink-3);
  font-size: var(--text-md); letter-spacing: var(--track-wide);
}

.av-table {
  width: 100%; border-collapse: collapse;
  font-family: var(--font-mono); font-size: var(--text-md);
  font-variant-numeric: tabular-nums;
}
.av-table th {
  position: sticky; top: 0; z-index: 2; background: var(--bg);
  padding: var(--space-4) var(--space-4) var(--space-4) var(--space-5);
  text-align: right; white-space: nowrap;
  font-size: var(--text-sm); font-weight: 400;
  letter-spacing: var(--track-base); text-transform: uppercase;
  border-bottom: 1px solid var(--line);
}
.av-th-line { text-align: left; min-width: 200px; }
.av-th--far  { color: var(--mountain-pine); }
.av-th--near { color: var(--mountain-pine); }
.av-th--now  { color: var(--mountain-pine); }

.av-row td { border-bottom: 1px solid var(--line-soft); }
.av-line {
  position: sticky; left: 0; z-index: 1; background: var(--bg);
  padding: var(--space-3) var(--space-5);
  text-align: left; color: var(--ink); white-space: nowrap;
}
.av-val {
  padding: var(--space-3) var(--space-4) var(--space-3) var(--space-5);
  text-align: right; white-space: nowrap; color: var(--ink);
}
.av-val--far { color: var(--ink); }
.av-val--now { color: var(--ink); }
.av-neg { color: var(--bad); }

/* Subtotals: rule above, full ink. The arithmetic of the statement made
   visible without a word of explanation. */
.av-row--total td {
  border-top: 1px solid var(--mountain-pine);
  border-bottom: 1px solid var(--line-soft);
  background: var(--mountain-pine-bg);
  color: var(--mountain-pine);
}
.av-row--total .av-line {
  color: var(--mountain-pine); background: var(--mountain-pine-bg);
}
.av-row--total .av-val, .av-row--total .av-val--far { color: var(--mountain-pine); }
.av-row--total .av-val--now { background: var(--mountain-pine-bg-strong); }

.av-row:hover td { background: var(--mountain-pine-bg); }
.av-row:hover .av-line { background: var(--mountain-pine-bg); }


.av-secrow td {
  padding: var(--space-8) var(--space-6) var(--space-3);
  border: none; background: var(--bg);
  position: sticky; left: 0;
}
.av-secrow span {
  display: inline-block;
  font-size: var(--text-sm); letter-spacing: var(--track-wide);
  text-transform: uppercase; color: var(--accent);
  padding-bottom: var(--space-2); position: relative;
}
.av-secrow span::after {
  content: ""; position: absolute; left: 0; bottom: 0;
  width: 50%; height: 1px; background: var(--accent);
}

.av-fx {
  font-style: normal; color: var(--accent);
  font-size: var(--text-sm); margin-left: var(--space-3);
  vertical-align: super; line-height: 0;
}

.av-foot {
  display: flex; align-items: baseline; gap: var(--space-4);
  padding: var(--space-7) 0 var(--space-8);
  font-size: var(--text-2xs); letter-spacing: var(--track-wide);
  color: var(--ink-3);
}
.av-foot__mark { color: var(--accent); font-size: var(--text-sm); }

@media (max-width: 720px) {
  .av-tabs { gap: var(--space-5); overflow-x: auto; }
  .av-th-line { min-width: 180px; }
}
@media (prefers-reduced-motion: reduce) {
  .av-tab { transition: none; }
}

.av-heroes { margin: var(--space-7) 0 0; }
/* Carrying and dragging, on the signal colours -- these say which way a
   field moved the score, which is signal meaning, not decoration. */
/* Ownership split. The bar carries the shape, the existing data-tooltip
   carries the numbers -- promoter and float are one fact seen two ways,
   and spending a legend row on repeating them is the wrong trade. */
/* No overflow clip: the tooltip is an ::after on the segment, and a
   5px-tall parent with overflow hidden cuts it off entirely. The two
   segments round their own outer ends instead. */
.av-own { display: flex; height: 5px; margin-top: var(--space-5);
  margin-bottom: var(--space-5); }
.av-own > span { position: relative; }
.av-own__promoter { background: var(--mountain-pine);
  border-radius: var(--radius-pill) 0 0 var(--radius-pill); }
.av-own__float { background: var(--line-soft);
  border-radius: 0 var(--radius-pill) var(--radius-pill) 0; }

/* Frequency switch. Quarterly and annual are one statement read two
   ways, so this is a switch rather than a second tab. */
.av-freq { display: inline-flex; align-items: center; gap: var(--space-3);
  margin-right: auto; order: -1; cursor: pointer; }
.av-freq input { position: absolute; opacity: 0; width: 0; height: 0; }
.av-freq__l { font-size: var(--text-2xs); letter-spacing: var(--track-wider);
  text-transform: uppercase; color: var(--ink-3); }
.av-freq input:not(:checked) ~ .av-freq__l:first-of-type,
.av-freq input:checked ~ .av-freq__l:last-of-type { color: var(--mountain-pine); }
.av-freq__track { position: relative; width: 26px; height: 14px;
  border-radius: var(--radius-pill); background: var(--line-soft);
  transition: background var(--transition-fast); }
.av-freq__knob { position: absolute; top: 2px; left: 2px;
  width: 10px; height: 10px; border-radius: var(--radius-pill);
  background: var(--bg-elev); transition: transform var(--transition-fast); }
.av-freq input:checked ~ .av-freq__track { background: var(--mountain-pine); }
.av-freq input:checked ~ .av-freq__track .av-freq__knob { transform: translateX(12px); }

/* The field column is a row label, not a number: it reads from the left
   the way every line in it does. */
.av-table th.av-th-line { text-align: left; }

/* A table standing on the page background reads as loose rows; the same
   panel the cards sit on gives it an edge to sit inside. */
.pn-tablecard {
  background: var(--bg-elev);
  border: 0.5px solid var(--line-soft);
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow-card);
  padding: var(--space-5) var(--space-7);
  margin-top: var(--space-3);
  /* the pattern library is twelve columns; it scrolls inside its own panel
     rather than pushing the page sideways */
  overflow-x: auto;
}
.pn-tablecard > .av-table { margin-top: 0; }

.av-filings { margin-top: var(--space-4); }
.av-filing { display: flex; justify-content: space-between; gap: var(--space-4);
  font-family: var(--font-mono); font-size: var(--text-sm);
  line-height: 1.9; }
.av-filing__k { color: var(--ink-2); }
.av-filing__v { color: var(--ink-3); white-space: nowrap; }

.av-pair__v.is-pos { color: var(--good); }
.av-pair__v.is-neg { color: var(--bad); }
/* Price sits with the name, not in a card of its own. */
/* Price beside the name. The h1 keeps its own size and margin -- the
   title is the same element it is on the panel and should not change
   because something now sits next to it. */
/* page-head__title > h1 is a DIRECT-child selector, so wrapping the h1 to
   put the price beside it dropped the title out of its own type rule.
   The wrapper carries it back rather than restating the size here. */
.page-head__title > .av-head > h1 {
  font-family: var(--font-mono);
  font-size: var(--text-h1);
  font-weight: 500;
  line-height: 1.05;
  letter-spacing: var(--track-tight);
  color: var(--mountain-pine);
  margin: 0;
}
/* The wrapper must not add height of its own: page-head aligns to
   flex-end, so any extra line-box in this row pushes the title up away
   from the identity line below it. line-height matches the h1's so the
   row is exactly as tall as the title is on the panel. */
.av-head { display: flex; align-items: baseline; gap: var(--space-5);
  line-height: 1.05; margin-bottom: var(--space-2); }
.av-head > * { line-height: 1.05; }
.av-head__price { flex: 0 0 auto; display: flex; align-items: baseline;
  gap: var(--space-3); }
.av-head__price .pn-num { font-size: 2rem; line-height: inherit; }
.av-head__price .pn-sub { font-size: var(--text-lg); }
.av-filed {
  display: block; margin-top: var(--space-2);
  font-style: normal; font-size: var(--text-2xs);
  letter-spacing: var(--track-base); text-transform: none;
  color: var(--ink-3); font-weight: 400;
}
.av-th--now .av-filed { color: var(--mountain-pine); }

/* Hero pairs: two figures per card at the same weight as a single hero
   number. PE and EPS are read together, as are revenue and profit -- a
   small key over a large value, not a label-value row. */
/* Two by two rather than one row: a long label -- dividend yield, ebitda
   margin -- wraps inside its own cell instead of pushing the row wider
   than the card. It also puts the two carrying fields above the two
   dragging ones, which is how they read. */
.av-pair {
  display: grid; grid-template-columns: 1fr 1fr;
  gap: var(--space-4) var(--space-6); margin-top: var(--space-4);
}
.av-pair > div { display: flex; flex-direction: column; gap: var(--space-2); }
/* Each column reads to its own outer edge -- left column left, right
   column right -- so the card has two clean margins rather than four
   ragged ones. Label and value move together. */
.av-pair > div:nth-child(odd) { align-items: flex-start; text-align: left; }
.av-pair > div:nth-child(even) { align-items: flex-end; text-align: right; }
.av-pair__k {
  font-size: var(--text-2xs); letter-spacing: var(--track-wider);
  text-transform: uppercase; color: var(--ink-3);
}
.av-pair__v {
  display: block; width: 100%;
  font-size: var(--text-h2); color: var(--ink);
  font-variant-numeric: tabular-nums; line-height: 1;
}


/* Price card: the number on the left, the session's shape filling the
   space to its right. That space is empty in every price card in the
   product, and a 375-minute session squeezed into an 80px thumbnail is a
   smudge -- given the width it is legible. */
.price-row {
  display: grid; grid-template-columns: auto 1fr;
  align-items: center; gap: var(--space-6);
}
.price-row__main { min-width: 0; }
.price-row__spark { min-width: 0; height: 46px; }
.price-row__spark .spark { width: 100%; height: 100%; }

/* The statement sits ON something. Floating the table straight onto the
   page background leaves the numbers unbounded -- the eye has no edge to
   read against, and a dense grid needs one. Same elevated surface every
   other card in the product uses, so it inherits the theme rather than
   naming a colour. */
.av-sheet {
  background: var(--bg-elev);
  border: 0.5px solid var(--line-soft);
  border-radius: var(--radius-sm);
  padding: var(--space-5) var(--space-6) var(--space-7);
  margin-top: var(--space-5);
}
.av-sheet .av-bar { padding: 0 0 var(--space-4); }
/* Sticky cells inherit the sheet, not the page, or they punch a hole in
   it while scrolling. */
.av-sheet .av-table th,
.av-sheet .av-table td.av-line,
.av-sheet .av-secrow td { background: var(--bg-elev); }
.av-sheet .av-table th.av-th--now,
.av-sheet .av-table td.av-val--now { background: var(--mountain-pine-bg); }
.av-sheet .av-row:hover td { background: var(--mountain-pine-bg); }
.av-sheet .av-row:hover .av-line { background: var(--mountain-pine-bg); }


.av-sheet .av-row--total td,
.av-sheet .av-row--total .av-line { background: var(--mountain-pine-bg); }


.av-sheet .av-table th.av-th--now,
.av-sheet .av-table td.av-val--now { background: var(--mountain-pine-bg); }

.av-row--total td { border-bottom: 1px solid var(--mountain-pine); }

/* TTM is not another period. It sits after the sequence, behind a rule,
   because it answers a different question: not "what did this quarter do"
   but "where does the company stand now". */
.av-th-ttm {
  text-align: right; border-left: 1px solid var(--line);
  color: var(--mountain-pine);
}
.av-val-ttm { border-left: 1px solid var(--line); }