/* Upscaile Signal Intelligence · Ledger · Precision
   Direction: the week told chronologically, drawn as a blue-forward data product.
   Type: Geist (UI/display) + Geist Mono (every figure). The canvas is a cool blue-grey;
   white panels float on it. Blue lives in the DATA (charts, KPIs, gauges, nodes) and the
   CHROME (rail, masthead, active states), not on body labels. Hairlines still carry structure. */

:root {
  --brand: #3533CD;
  --brand-2: #4F4DE0;
  --brand-dark: #151452;
  --brand-light: #DFE1F2;
  --brand-wash: #F2F2FB;
  --navy: #151452;
  --navy-2: #1A1960;
  --ice: #C5E5FF;
  --green: #1FA34A;
  --green-ink: #15803D;
  --amber: #C9820B;
  --amber-ink: #8A5A06;
  --red: #D6453F;
  --red-ink: #A6261F;

  /* near-ink primary, true mid-greys for secondary structure */
  --text: #141A33;
  --text-sub: #4B5572;
  --text-muted: #7C84A0;
  --text-faint: #A4ACC4;

  /* a stronger hairline family carries the structural separation.
     --border is the visible panel edge; --border-soft the inner row hairlines. */
  --border: #C9D5EC;
  --border-soft: #DEE6F4;
  --border-strong: #B2C1DE;
  --hair: rgba(21, 20, 82, 0.08);

  /* canvas vs panel · the canvas sits deeper so white panels float */
  --bg: #FFFFFF;
  --bg-alt: #F3F6FE;
  --bg-cool: #EAF0FB;
  --bg-page: #E4EBF8;

  /* ── data + chrome tokens (the dashboard layer) ──
     accent  = primary interactive blue (links, active rail, focus)
     data-blue = the brighter blue that fills charts / gauges / KPI accents
     data-track = the muted blue rail behind a bar / gauge
     kpi-fill = faint tile wash so KPIs read as data tiles, not plain cards
     panel-rule = thin blue top-rule on panels; panel-mark = the small blue header marker */
  --accent: #3533CD;
  --data-blue: #2F5BFF;
  --data-blue-soft: rgba(47, 91, 255, 0.16);
  --data-track: #DCE4F6;
  --kpi-fill: linear-gradient(180deg, #F6F9FF 0%, #FFFFFF 62%);
  --kpi-value: #1B2A66;
  --panel-rule: rgba(47, 91, 255, 0.5);
  --panel-mark: #2F5BFF;
  /* border + subtle shadow recipe · a crisp 1px lift then a low-alpha soft drop.
     Border carries the edge, the two-stage shadow gives a real but restrained float. */
  --panel-elev: 0 1px 2px rgba(21, 20, 82, 0.07), 0 6px 16px -8px rgba(21, 20, 82, 0.14);
  --panel-elev-hover: 0 1px 2px rgba(21, 20, 82, 0.09), 0 12px 28px -12px rgba(21, 20, 82, 0.22);
  /* header underline · a hairline rule beneath every card-head separating it from content */
  --head-rule: var(--border-soft);

  /* ── themeable chrome: rail + masthead. The three light schemes leave these light;
     Midnight overrides them to navy. ── */
  --rail-bg: #F4F7FF;
  --rail-text: #4B5572;
  --rail-text-strong: #141A33;
  --rail-muted: #7C84A0;
  --rail-border: #DBE3F2;
  --rail-hover: #E5ECFB;
  --rail-active-bg: #3533CD;
  --rail-active-text: #FFFFFF;
  --rail-badge-bg: #EBF0FC;
  --rail-badge-text: #6A7392;
  --rail-badge-border: #D3DCEF;
  --mast-bg: #151452;
  --mast-text: #FFFFFF;

  /* spacing system · denser (~35% tighter) while holding an 8px-ish rhythm */
  --s1: 3px; --s2: 6px; --s3: 8px; --s4: 11px; --s5: 13px;
  --s6: 16px; --s7: 20px; --s8: 26px; --s9: 32px; --s10: 44px;

  /* tight, precise radii · cards 12, controls 8, pills stay round */
  --radius: 11px;
  --radius-lg: 13px;
  --radius-sm: 9px;
  --radius-xs: 7px;
  --rail-w: 220px;

  /* type families */
  --sans: 'Geist', 'Inter Tight', -apple-system, system-ui, 'Segoe UI', sans-serif;
  --mono: 'Geist Mono', 'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, monospace;

  /* ── Type scale · contrasty, clamp-based · denser ──
     display (briefing title) → section titles → body → micro labels.
     Body floor held at ~12.5px, micro at ~11px so nothing drops below legible. */
  --t-display: clamp(1.55rem, 1.24rem + 1.45vw, 2.05rem);
  --t-h1: clamp(1.28rem, 1.1rem + 0.85vw, 1.55rem);
  --t-h2: clamp(1.05rem, 0.97rem + 0.4vw, 1.2rem);
  --t-h3: 0.9375rem;
  --t-title: 0.85rem;    /* card titles */
  --t-body: 0.8125rem;   /* default reading size · ~13px */
  --t-sub: 0.78125rem;   /* secondary / detail · ~12.5px */
  --t-small: 0.71875rem; /* meta · ~11.5px */
  --t-micro: 0.6875rem;  /* eyebrows, mono labels · ~11px */
  --t-nano: 0.625rem;    /* smallest caps · ~10px */

  /* weights · used deliberately for contrast */
  --w-body: 440;
  --w-med: 500;
  --w-semi: 600;
  --w-bold: 700;
  --w-black: 800;

  /* tracking · tightened on display, opened on small caps */
  --trk-display: -0.028em;
  --trk-tight: -0.018em;
  --trk-caps: 0.085em;
  --trk-caps-wide: 0.12em;

  --navy-grad: linear-gradient(155deg, #1C1B66 0%, #151452 52%, #0E0D38 100%);
  --brand-grad: linear-gradient(135deg, #4F4DE0 0%, #3533CD 100%);

  /* elevation · hairline borders carry weight; one subtle lift on truly raised surfaces */
  --sh-1: none;
  --sh-2: 0 1px 2px rgba(21, 20, 82, 0.05);
  --sh-raise: 0 8px 24px -10px rgba(21, 20, 82, 0.18);
  --sh-brand: 0 2px 8px -2px rgba(53, 51, 205, 0.35);
  --sh-inset: none;
}

/* ════════════════════════════════════════════════
   Color themes · five blue-forward dashboard schemes.
   Every scheme deliberately separates CANVAS from PANELS: in the light schemes the
   canvas is a tinted/deeper blue-grey and panels are pure (or near-pure) white, so each
   panel floats; in the dark schemes panels read clearly lighter than the canvas.
   Blue lives in the DATA (charts, KPIs, gauges, nodes) and the CHROME (rail, masthead,
   active states), never on body labels. Brand blue (#3533CD) + navy (#151452) stay anchored.
   Each scheme overrides --panel-elev so the float reads on its own canvas.
   ════════════════════════════════════════════════ */

/* Azure · default · light blue-grey canvas, white panels, bright-blue data accents.
   Stronger panel separation than before: deeper canvas, near-white panels, crisper edges. */
:root[data-theme="azure"] {
  --text: #112045; --text-sub: #42547A; --text-muted: #6F80A4; --text-faint: #9BAAC9;
  --border: #C5D5F1; --border-soft: #DBE6F8; --border-strong: #ABC0E6; --hair: rgba(21, 30, 82, 0.08);
  --bg: #FFFFFF; --bg-alt: #F1F5FE; --bg-cool: #E6EEFC; --bg-page: #DCE7F8;
  --accent: #2563EB;
  --brand: #2563EB; --brand-2: #3533CD; --brand-grad: linear-gradient(135deg, #3B82F6 0%, #2563EB 100%);
  --brand-wash: #E6EFFE; --brand-light: #C6DBFA;
  --data-blue: #2563EB; --data-blue-soft: rgba(37, 99, 235, 0.2); --data-track: #CBDCF6;
  --kpi-value: #1546B8; --kpi-fill: linear-gradient(180deg, #DCE8FE 0%, #F4F8FF 100%);
  --panel-mark: #2563EB; --panel-rule: rgba(37, 99, 235, 0.6);
  --panel-elev: 0 1px 2px rgba(20, 33, 90, 0.08), 0 6px 16px -8px rgba(20, 33, 90, 0.16);
  --panel-elev-hover: 0 1px 2px rgba(20, 33, 90, 0.1), 0 12px 28px -12px rgba(20, 33, 90, 0.24);
  --head-rule: var(--border-soft);
  --rail-bg: #E7EFFE; --rail-text: #42547A; --rail-text-strong: #112045; --rail-muted: #6F80A4;
  --rail-border: #C9D8F3; --rail-hover: #D7E5FC;
  --rail-active-bg: #2563EB; --rail-active-text: #FFFFFF;
  --rail-badge-bg: #DAE7FE; --rail-badge-text: #2F5BAE; --rail-badge-border: #BFD5F6;
  --mast-bg: #14215A; --mast-text: #FFFFFF;
}

/* Slate · cooler, higher-contrast neutral-blue. Deeper slate canvas, crisp white panels,
   strong borders. Maximum legibility, calm. Blue stays in the data + chrome. */
:root[data-theme="slate"] {
  --text: #10192E; --text-sub: #3D4B66; --text-muted: #677591; --text-faint: #97A3BC;
  --border: #BFCBDD; --border-soft: #D7DFEC; --border-strong: #A6B5CC; --hair: rgba(16, 25, 46, 0.09);
  --bg: #FFFFFF; --bg-alt: #F1F4F9; --bg-cool: #E7ECF4; --bg-page: #DBE2EC;
  --accent: #2F4FE0;
  --brand: #2F4FE0; --brand-2: #3533CD; --brand-grad: linear-gradient(135deg, #4361F0 0%, #2F4FE0 100%);
  --brand-wash: #E9EDFB; --brand-light: #CCD5F2;
  --data-blue: #2F54E8; --data-blue-soft: rgba(47, 84, 232, 0.18); --data-track: #CAD3E4;
  --kpi-value: #1B2E73; --kpi-fill: linear-gradient(180deg, #E6EBF5 0%, #F6F8FC 100%);
  --panel-mark: #2F54E8; --panel-rule: rgba(47, 84, 232, 0.55);
  --panel-elev: 0 1px 2px rgba(16, 25, 46, 0.1), 0 6px 16px -8px rgba(16, 25, 46, 0.18);
  --panel-elev-hover: 0 1px 2px rgba(16, 25, 46, 0.12), 0 12px 28px -12px rgba(16, 25, 46, 0.26);
  --head-rule: var(--border-soft);
  --rail-bg: #E7ECF4; --rail-text: #3D4B66; --rail-text-strong: #10192E; --rail-muted: #677591;
  --rail-border: #C4CFDF; --rail-hover: #D8E0EC;
  --rail-active-bg: #2F4FE0; --rail-active-text: #FFFFFF;
  --rail-badge-bg: #DBE2EE; --rail-badge-text: #4A5775; --rail-badge-border: #C2CCDD;
  --mast-bg: #16213E; --mast-text: #FFFFFF;
}

/* Indigo · deeper, richer indigo-blue accents on a light cool canvas. Premium feel. */
:root[data-theme="indigo"] {
  --text: #171540; --text-sub: #45446F; --text-muted: #73729A; --text-faint: #9E9DC1;
  --border: #CFCEEC; --border-soft: #E0DFF4; --border-strong: #BBB9E0; --hair: rgba(24, 22, 64, 0.09);
  --bg: #FFFFFF; --bg-alt: #F2F1FC; --bg-cool: #E9E8F6; --bg-page: #E1E0F4;
  --accent: #4338CA;
  --brand: #4338CA; --brand-2: #5B52E0; --brand-grad: linear-gradient(135deg, #5B52E0 0%, #4338CA 100%);
  --brand-wash: #EEEDFB; --brand-light: #D4D1F2;
  --data-blue: #4F46E5; --data-blue-soft: rgba(79, 70, 229, 0.2); --data-track: #D6D3F2;
  --kpi-value: #2D2A7A; --kpi-fill: linear-gradient(180deg, #EDECFC 0%, #FAFAFF 64%);
  --panel-mark: #4F46E5; --panel-rule: rgba(79, 70, 229, 0.55);
  --panel-elev: 0 1px 2px rgba(35, 30, 90, 0.09), 0 6px 16px -8px rgba(35, 30, 90, 0.18);
  --panel-elev-hover: 0 1px 2px rgba(35, 30, 90, 0.11), 0 12px 28px -12px rgba(35, 30, 90, 0.26);
  --head-rule: var(--border-soft);
  --rail-bg: #EDECFA; --rail-text: #45446F; --rail-text-strong: #171540; --rail-muted: #73729A;
  --rail-border: #D2D0EE; --rail-hover: #E2E0F6;
  --rail-active-bg: #4338CA; --rail-active-text: #FFFFFF;
  --rail-badge-bg: #E5E3F8; --rail-badge-text: #5750A0; --rail-badge-border: #CFCCEE;
  --mast-bg: #1B1958; --mast-text: #FFFFFF;
}

/* Midnight · dark navy rail + masthead over a light blue-grey content canvas with white
   panels. Brighter blue accent that pops on light content. Panels float clearly on canvas. */
:root[data-theme="midnight"] {
  --text: #15203E; --text-sub: #46527A; --text-muted: #7683A4; --text-faint: #9EABCA;
  --border: #C7D2EC; --border-soft: #DCE4F4; --border-strong: #AEBDDB; --hair: rgba(16, 15, 62, 0.08);
  --bg: #FFFFFF; --bg-alt: #F1F5FE; --bg-cool: #E6EDF9; --bg-page: #E2E9F6;
  --accent: #4A48DC;
  --brand: #4A48DC; --brand-2: #5B6CFF; --brand-grad: linear-gradient(135deg, #5B6CFF 0%, #3533CD 100%);
  --brand-wash: #ECEDFC; --brand-light: #D3D5F4;
  --data-blue: #3D5BFF; --data-blue-soft: rgba(61, 91, 255, 0.2); --data-track: #CDD8F2;
  --kpi-value: #20307A; --kpi-fill: linear-gradient(180deg, #E5EDFE 0%, #F5F8FF 60%);
  --panel-mark: #3D5BFF; --panel-rule: rgba(61, 91, 255, 0.58);
  --panel-elev: 0 1px 2px rgba(16, 22, 60, 0.09), 0 6px 16px -8px rgba(16, 22, 60, 0.18);
  --panel-elev-hover: 0 1px 2px rgba(16, 22, 60, 0.11), 0 12px 28px -12px rgba(16, 22, 60, 0.26);
  --head-rule: var(--border-soft);
  /* dark chrome */
  --rail-bg: #100F3E; --rail-text: #C4CAEC; --rail-text-strong: #FFFFFF; --rail-muted: #9AA0C8;
  --rail-border: rgba(255, 255, 255, 0.09); --rail-hover: rgba(255, 255, 255, 0.08);
  --rail-active-bg: #5B6CFF; --rail-active-text: #FFFFFF;
  --rail-badge-bg: rgba(255, 255, 255, 0.08); --rail-badge-text: #C4CAEC; --rail-badge-border: rgba(255, 255, 255, 0.15);
  --mast-bg: #100F3E; --mast-text: #FFFFFF;
}

/* Carbon · the full dark dashboard · a dark slate-navy canvas with slightly lighter dark
   panels, light text, and bright-blue (#5B6CFF) data accents. The "dark mode" option.
   Panels read clearly above the canvas; semantic greens/ambers/reds shift lighter so pills,
   gauges, the org map, sparklines and the timeline all stay legible on dark. */
:root[data-theme="carbon"] {
  --text: #EAEEFB; --text-sub: #AEB8D6; --text-muted: #8089AB; --text-faint: #626B8C;
  --border: #2C3354; --border-soft: #242A47; --border-strong: #3C456C; --hair: rgba(255, 255, 255, 0.06);
  /* canvas darker than panels · panels sit ~7-10% lighter so they float */
  --bg: #1A2138; --bg-alt: #202841; --bg-cool: #232C48; --bg-page: #10162A;
  --accent: #5B6CFF;
  --brand: #5B6CFF; --brand-2: #7B86FF; --brand-dark: #3533CD;
  --brand-grad: linear-gradient(135deg, #7B86FF 0%, #4A48DC 100%);
  --brand-wash: rgba(91, 108, 255, 0.14); --brand-light: rgba(91, 108, 255, 0.32);
  --data-blue: #5B6CFF; --data-blue-soft: rgba(91, 108, 255, 0.26); --data-track: #2B3355;
  --kpi-value: #DCE3FF; --kpi-fill: linear-gradient(180deg, #232B46 0%, #1C2339 100%);
  --panel-mark: #6B7BFF; --panel-rule: rgba(107, 123, 255, 0.65);
  --panel-elev: 0 1px 2px rgba(0, 0, 0, 0.5), 0 8px 22px -10px rgba(0, 0, 0, 0.6);
  --panel-elev-hover: 0 1px 2px rgba(0, 0, 0, 0.55), 0 14px 32px -12px rgba(0, 0, 0, 0.7);
  --head-rule: var(--border);
  /* semantic colors shift lighter so they read on dark surfaces (pills, org map, deltas) */
  --green: #36D07A; --green-ink: #5FE39B; --amber: #F0B445; --amber-ink: #F7CA72;
  --red: #FF6B64; --red-ink: #FF938D; --ice: #BBD3FF;
  /* dark chrome · rail + masthead even deeper than the canvas */
  --rail-bg: #0E1426; --rail-text: #AEB8D6; --rail-text-strong: #FFFFFF; --rail-muted: #7E88AA;
  --rail-border: rgba(255, 255, 255, 0.08); --rail-hover: rgba(255, 255, 255, 0.06);
  --rail-active-bg: #5B6CFF; --rail-active-text: #FFFFFF;
  --rail-badge-bg: rgba(255, 255, 255, 0.07); --rail-badge-text: #AEB8D6; --rail-badge-border: rgba(255, 255, 255, 0.14);
  --mast-bg: #0E1426; --mast-text: #FFFFFF;
}

* { margin: 0; padding: 0; box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

body {
  font-family: var(--sans);
  font-size: var(--t-body);
  font-weight: var(--w-body);
  background: var(--bg-page);
  color: var(--text);
  line-height: 1.48;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-feature-settings: 'ss01' 1;
}

/* Every figure, score, timestamp, code and micro-label is set in Geist Mono
   with tabular, lining numerals. One class, used everywhere numbers live. */
.mono, .tnum,
.kpi .v, .led-mini .v, .score-chip, .delta-up, .delta-down, .match-pill,
.f-pts, .sig-time, .e-time, .day-count, .dept-hc, .metro-emp, .comp-lbls,
.comp-med-lbl, .spark-lbl, .stat-table td, .change-line .when,
.led-reqs .row b, .wl-c-tenure, .wl-c-match, .rail-link .count,
.drawer-link .count, .led-act .n, .action-item .n, .led-divider .day-date {
  font-family: var(--mono);
  font-variant-numeric: tabular-nums lining-nums;
  font-feature-settings: 'tnum' 1, 'lnum' 1;
}
.mono { letter-spacing: -0.01em; }

/* ── Motion ── */
@keyframes fadeUp { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } }
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
@keyframes pulseGreen {
  0%, 100% { box-shadow: 0 0 0 0 rgba(31, 163, 74, 0.5); }
  50% { box-shadow: 0 0 0 5px rgba(31, 163, 74, 0); }
}
@keyframes nodeIn { from { opacity: 0; transform: scale(0.4); } to { opacity: 1; transform: scale(1); } }
@keyframes barGrow { from { transform: scaleY(0); } to { transform: scaleY(1); } }
@keyframes barGrowX { from { transform: scaleX(0); } to { transform: scaleX(1); } }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
}

/* ── Layout ── */
.app { display: flex; min-height: 100vh; }

.rail {
  width: var(--rail-w);
  flex-shrink: 0;
  background: var(--rail-bg);
  border-right: 1px solid var(--rail-border);
  display: flex; flex-direction: column;
  position: sticky; top: 0; height: 100vh;
  padding: var(--s4) var(--s3);
  transition: background 0.2s ease, border-color 0.2s ease;
}
.rail-brand {
  font-size: 0.875rem; font-weight: var(--w-black); letter-spacing: 0.04em;
  color: var(--rail-text-strong); text-decoration: none;
  padding: var(--s2) var(--s3) var(--s1);
  display: inline-flex; align-items: center; gap: 8px;
}
.rail-brand::before {
  content: ''; width: 8px; height: 8px; border-radius: 2px;
  background: var(--data-blue);
}
.rail-client {
  font-family: var(--mono);
  font-size: var(--t-nano); font-weight: var(--w-med); color: var(--rail-muted);
  padding: var(--s3) var(--s3); line-height: 1.45;
  letter-spacing: var(--trk-caps); text-transform: uppercase;
}
.rail-client strong {
  display: block; color: var(--rail-text-strong); font-family: var(--sans);
  font-weight: var(--w-bold); font-size: 0.8125rem; margin-top: 4px;
  letter-spacing: var(--trk-tight); text-transform: none;
}
.rail-nav { display: flex; flex-direction: column; gap: 2px; }
.rail-link {
  display: flex; align-items: center; gap: 10px;
  font-size: var(--t-sub); font-weight: var(--w-med);
  color: var(--rail-text); text-decoration: none;
  padding: 7px 11px; border-radius: var(--radius-xs);
  transition: background 0.16s ease, color 0.16s ease;
  position: relative;
}
.rail-link svg { width: 16px; height: 16px; stroke: currentColor; fill: none; stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; flex-shrink: 0; opacity: 0.72; }
.rail-link:hover { background: var(--rail-hover); color: var(--rail-text-strong); }
.rail-link:hover svg { opacity: 0.95; }
.rail-link.active { background: var(--rail-active-bg); color: var(--rail-active-text); font-weight: var(--w-semi); box-shadow: var(--sh-brand); }
.rail-link.active svg { opacity: 1; }
.rail-link .count {
  margin-left: auto; font-size: var(--t-micro); font-weight: var(--w-semi);
  background: var(--rail-badge-bg); color: var(--rail-badge-text);
  border: 1px solid var(--rail-badge-border);
  border-radius: 99px; padding: 0 7px; min-width: 22px; height: 18px;
  display: inline-flex; align-items: center; justify-content: center;
}
.rail-link.active .count { background: rgba(255, 255, 255, 0.2); color: #fff; border-color: transparent; }
.rail-sep { height: 1px; background: var(--rail-border); margin: var(--s3) var(--s3); }
.rail-foot { margin-top: auto; padding: var(--s3); font-family: var(--mono); font-size: var(--t-nano); color: var(--rail-muted); letter-spacing: 0.03em; line-height: 1.7; opacity: 0.85; }
.rail-foot strong { color: var(--rail-text); font-weight: var(--w-med); }
.rail-foot a, .drawer-foot a { color: var(--rail-muted); text-decoration: underline; text-underline-offset: 2px; }
.rail-foot a:hover, .drawer-foot a:hover { color: var(--rail-text); }

.main { flex: 1; min-width: 0; display: flex; flex-direction: column; }

/* ── Masthead + ticker · app chrome bar · navy surface (Midnight goes deeper) ── */
.masthead {
  position: sticky; top: 0; z-index: 50;
  background: var(--mast-bg);
  color: var(--mast-text);
  padding: 8px 20px;
  display: flex; align-items: center; gap: 13px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  overflow: hidden;
}
.masthead::before {
  content: ''; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background:
    radial-gradient(560px 140px at 6% -30%, rgba(91, 108, 255, 0.34), transparent 72%),
    linear-gradient(155deg, color-mix(in srgb, var(--mast-bg) 86%, #2A2890) 0%, var(--mast-bg) 54%, color-mix(in srgb, var(--mast-bg) 86%, #000) 100%);
}
.masthead .live {
  display: flex; align-items: center; gap: 8px;
  font-family: var(--mono);
  font-size: var(--t-nano); font-weight: var(--w-med); letter-spacing: var(--trk-caps); text-transform: uppercase;
  color: rgba(255, 255, 255, 0.78); flex-shrink: 0;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.1);
  padding: 4px 10px; border-radius: 99px;
}
.masthead .live i {
  width: 6px; height: 6px; border-radius: 50%; background: var(--green);
  box-shadow: 0 0 7px rgba(31, 163, 74, 0.9);
  animation: pulseGreen 2.4s ease infinite;
}
/* demo-data variant of the status pill (amber notice, no live pulse) */
.masthead .live.demo { color: #FCD9A0; background: rgba(245, 158, 11, 0.14); border-color: rgba(245, 158, 11, 0.42); text-decoration: none; }
.masthead .live.demo i { background: #F59E0B; box-shadow: 0 0 7px rgba(245, 158, 11, 0.8); animation: none; }
.masthead .live.demo:hover { background: rgba(245, 158, 11, 0.22); }
.ticker-win { flex: 1; min-width: 0; height: 22px; overflow: hidden; position: relative; }
.ticker-win::after {
  content: ''; position: absolute; top: 0; right: 0; bottom: 0; width: 40px;
  background: linear-gradient(90deg, transparent, rgba(20, 19, 70, 0.0));
  pointer-events: none;
}
.ticker-item {
  height: 22px; display: flex; align-items: center; gap: 9px;
  font-size: var(--t-sub); font-weight: var(--w-med); color: rgba(230, 233, 247, 0.92);
  letter-spacing: var(--trk-tight);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  animation: fadeIn 0.5s ease;
}
.ticker-item::before {
  content: ''; width: 4px; height: 4px; border-radius: 50%;
  background: var(--brand-2); flex-shrink: 0;
}
.masthead .cadence {
  flex-shrink: 0; font-family: var(--mono); font-size: var(--t-nano); font-weight: var(--w-med);
  letter-spacing: 0.04em;
  color: rgba(255, 255, 255, 0.66);
  border: 1px solid rgba(255, 255, 255, 0.12);
  background: rgba(255, 255, 255, 0.03);
  padding: 4px 12px; border-radius: 99px;
  display: inline-flex; align-items: center; gap: 6px;
}
.masthead .cadence::before {
  content: ''; width: 4px; height: 4px; border-radius: 1px; background: rgba(255, 255, 255, 0.5);
}

.content { padding: var(--s6) var(--s6) var(--s8); max-width: 1240px; width: 100%; margin: 0 auto; animation: fadeUp 0.4s ease both; }

.view-head { margin-bottom: var(--s5); }
.view-eyebrow {
  font-family: var(--mono);
  font-size: var(--t-micro); font-weight: var(--w-med); letter-spacing: var(--trk-caps); text-transform: uppercase;
  color: var(--text-muted); margin-bottom: 8px; display: inline-flex; align-items: center; gap: 8px;
}
.view-eyebrow::before { content: ''; width: 14px; height: 1px; background: var(--text-faint); }
.view-title { font-size: var(--t-display); font-weight: var(--w-bold); letter-spacing: var(--trk-display); line-height: 1.05; color: var(--text); }
.view-sub { font-size: var(--t-sub); font-weight: var(--w-body); color: var(--text-sub); margin-top: 6px; max-width: 760px; line-height: 1.5; }

/* ── Cards + grids · white data panels floating on the tinted canvas ──
   Separation recipe: a visible 1px border + the two-stage --panel-elev shadow.
   Border carries the crisp edge; the shadow gives a real but restrained float. */
.card {
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: var(--s4) var(--s5) var(--s5);
  margin-bottom: var(--s4);
  position: relative;
  box-shadow: var(--panel-elev);
  transition: border-color 0.18s ease, box-shadow 0.18s ease;
}
.card::before {
  content: ''; position: absolute; left: 0; right: 0; top: 0; height: 2px;
  background: linear-gradient(90deg, var(--panel-rule), transparent 62%);
  border-radius: var(--radius) var(--radius) 0 0;
  opacity: 0.9; pointer-events: none;
}
.card:hover { border-color: var(--border-strong); box-shadow: var(--panel-elev-hover); }
/* card header · a hairline rule beneath separates the head from its content,
   the title is set slightly larger + heavier with the small blue marker kept */
.card-head {
  display: flex; align-items: baseline; justify-content: space-between; gap: 12px;
  margin: 0 0 var(--s4); padding-bottom: var(--s2);
  border-bottom: 1px solid var(--head-rule);
}
.card-title { font-size: var(--t-h3); font-weight: var(--w-bold); letter-spacing: var(--trk-tight); display: inline-flex; align-items: center; gap: 8px; color: var(--text); }
.card-title::before { content: ''; width: 4px; height: 14px; border-radius: 2px; background: var(--panel-mark); flex-shrink: 0; }
.card-meta { font-family: var(--mono); font-size: var(--t-small); color: var(--text-muted); font-weight: var(--w-med); letter-spacing: 0; }
a.card-meta { color: var(--accent); text-decoration: none; display: inline-flex; align-items: center; gap: 5px; transition: gap 0.16s ease; }
a.card-meta:hover { gap: 8px; }
a.card-meta::after { content: '\2192'; font-weight: var(--w-semi); }
.grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s4); align-items: start; }
.grid3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--s4); align-items: start; }

.kpi-row { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--s3); margin-bottom: var(--s4); }
.kpi {
  background: var(--kpi-fill); border: 1px solid var(--border); border-radius: var(--radius);
  padding: var(--s3) var(--s4);
  position: relative; overflow: hidden;
  box-shadow: var(--panel-elev);
  transition: border-color 0.18s ease, box-shadow 0.18s ease;
}
.kpi::before {
  content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 3px;
  background: var(--data-blue); opacity: 0.9;
}
.kpi:hover { border-color: var(--border-strong); box-shadow: var(--panel-elev-hover); }
/* inline borderless KPI (demand headline inside the market card): drop the tile chrome */
.kpi[style*="border:none"] { background: transparent; box-shadow: none; }
.kpi[style*="border:none"]::before { display: none; }
.kpi .v { font-family: var(--mono); font-size: clamp(1.32rem, 1.1rem + 0.95vw, 1.6rem); font-weight: var(--w-semi); letter-spacing: -0.03em; line-height: 1.0; font-variant-numeric: tabular-nums lining-nums; color: var(--kpi-value); }
.kpi .v .sub { font-size: 0.78rem; font-weight: var(--w-med); color: var(--text-muted); letter-spacing: 0; }
.kpi .l { font-family: var(--mono); font-size: var(--t-nano); font-weight: var(--w-med); color: var(--text-muted); text-transform: uppercase; letter-spacing: var(--trk-caps); margin-top: 6px; line-height: 1.35; }
.kpi .d { font-size: var(--t-small); font-weight: var(--w-semi); margin-top: 5px; }
.kpi-spark { position: absolute; right: 11px; bottom: 11px; display: flex; align-items: flex-end; gap: 2px; height: 20px; opacity: 0.9; }
.kpi-spark i { width: 3px; border-radius: 1px; background: var(--data-track); display: block; }
.kpi-spark i.on { background: var(--data-blue); }

/* ── The read · the one neutral block where brand earns the accent ── */
.read-block {
  background: var(--brand-wash);
  border: 1px solid var(--brand-light);
  border-left: 2px solid var(--brand);
  border-radius: var(--radius-sm);
  padding: var(--s4) var(--s5) var(--s4) var(--s5);
  margin-top: var(--s4);
  position: relative;
}
.read-block strong { color: var(--brand); font-weight: var(--w-semi); }
.read-block .read-tag {
  display: flex; align-items: center; gap: 8px;
  font-family: var(--mono);
  font-size: var(--t-micro); font-weight: var(--w-med); letter-spacing: var(--trk-caps); text-transform: uppercase;
  color: var(--brand); margin-bottom: 8px;
}
.read-block .read-tag::before { content: ''; width: 14px; height: 1px; background: var(--brand); flex-shrink: 0; }
.read-block .read-body { font-size: var(--t-sub); font-weight: var(--w-body); color: var(--text-sub); line-height: 1.56; }

/* ── Signals (generic feed rows) ── */
.sigfeed { display: flex; flex-direction: column; }
.sig {
  display: flex; gap: var(--s3); align-items: flex-start;
  padding: 10px var(--s2);
  border-bottom: 1px solid var(--border-soft);
  border-radius: var(--radius-xs);
  transition: background 0.15s ease;
  margin: 0 calc(var(--s2) * -1);
}
.sig:last-child { border-bottom: none; }
.sig:hover { background: var(--bg-cool); }
.sev-dot { width: 8px; height: 8px; border-radius: 50%; margin-top: 5px; flex-shrink: 0; position: relative; }
.sev-high { background: var(--green); }
.sev-med { background: var(--amber); }
.sev-low { background: var(--text-faint); }
.sig-body { flex: 1; min-width: 0; }
.sig-headline { font-size: var(--t-sub); font-weight: var(--w-semi); line-height: 1.4; letter-spacing: var(--trk-tight); color: var(--text); }
.sig-detail { font-size: var(--t-sub); font-weight: var(--w-body); color: var(--text-sub); margin-top: 2px; line-height: 1.45; }
.sig-meta { display: flex; align-items: center; gap: 6px; margin-top: 6px; flex-wrap: wrap; }
.source-tag {
  font-family: var(--mono);
  font-size: var(--t-nano); font-weight: var(--w-med); letter-spacing: 0.02em;
  color: var(--text-muted); background: var(--bg-cool);
  border: 1px solid var(--border);
  padding: 1px 7px; border-radius: 5px;
}
.sig-time { font-family: var(--mono); font-size: var(--t-small); color: var(--text-muted); font-weight: var(--w-med); flex-shrink: 0; margin-top: 3px; }

/* ════════════════════════════════════════════════
   LEDGER · the week as a timeline
   ════════════════════════════════════════════════ */

.ledger {
  display: grid;
  grid-template-columns: 320px minmax(0, 1fr);
  gap: var(--s5);
  align-items: start;
}

/* Pinned summary rail */
.led-rail { position: sticky; top: 70px; display: flex; flex-direction: column; gap: var(--s3); }

.led-summary {
  background: var(--navy-grad);
  border-radius: var(--radius);
  color: #fff;
  padding: var(--s5);
  position: relative; overflow: hidden;
  box-shadow: var(--sh-raise);
}
.led-summary::before {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(420px 220px at 100% -10%, rgba(79, 77, 224, 0.32), transparent 70%);
}
.led-summary > * { position: relative; }
.led-kicker {
  font-family: var(--mono);
  font-size: var(--t-micro); font-weight: var(--w-med); letter-spacing: var(--trk-caps); text-transform: uppercase;
  color: rgba(197, 229, 255, 0.9); margin-bottom: 9px; display: flex; gap: 8px; align-items: center;
}
.led-kicker i { width: 6px; height: 6px; border-radius: 50%; background: var(--green); box-shadow: 0 0 7px rgba(31,163,74,0.85); animation: pulseGreen 2.4s ease infinite; }
.led-summary h2 { font-size: var(--t-h2); font-weight: var(--w-bold); letter-spacing: var(--trk-display); line-height: 1.16; margin-bottom: 8px; color: #fff; }
.led-summary .led-lede { font-size: var(--t-sub); font-weight: var(--w-body); color: rgba(205, 208, 236, 0.92); line-height: 1.52; margin-top: 11px; }
.led-highlights { list-style: none; margin: 11px 0 0; padding: 0; display: flex; flex-direction: column; gap: 7px; }
.led-highlights li { position: relative; padding-left: 17px; font-size: var(--t-sub); line-height: 1.4; color: rgba(205, 208, 236, 0.95); }
.led-highlights li::before { content: ''; position: absolute; left: 3px; top: 8px; width: 5px; height: 5px; border-radius: 50%; background: var(--brand-2); box-shadow: 0 0 6px rgba(79, 77, 224, 0.6); }
.led-highlights li strong { color: #fff; font-weight: var(--w-semi); }

/* tight inline KPI strip · four compact stat cells, equal columns, hairline-divided */
.led-mini-kpis {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 0; margin-top: var(--s4);
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.1); border-radius: var(--radius-xs); overflow: hidden;
}
.led-mini {
  padding: 8px 9px;
  border-left: 1px solid rgba(255, 255, 255, 0.08);
}
.led-mini:first-child { border-left: none; }
.led-mini .v { font-family: var(--mono); font-size: 1.18rem; font-weight: var(--w-med); letter-spacing: -0.02em; line-height: 1; color: #fff; font-variant-numeric: tabular-nums lining-nums; }
.led-mini .v .of { font-size: 0.62rem; font-weight: var(--w-body); color: rgba(197, 229, 255, 0.66); }
.led-mini .l { font-family: var(--mono); font-size: 0.5625rem; font-weight: var(--w-med); text-transform: uppercase; letter-spacing: 0.06em; color: rgba(197, 229, 255, 0.78); margin-top: 5px; line-height: 1.3; }

.led-reviewed {
  margin-top: var(--s4); display: inline-flex; align-items: center; gap: 7px;
  font-family: var(--mono); font-size: var(--t-small); font-weight: var(--w-med); color: rgba(197, 229, 255, 0.9);
  border: 1px solid rgba(255, 255, 255, 0.14); background: rgba(255, 255, 255, 0.04);
  padding: 5px 11px; border-radius: 99px;
}

/* priority actions card in the rail */
.led-actions { background: var(--bg); border: 1px solid var(--border); border-radius: var(--radius); padding: var(--s4) var(--s5); }
.led-actions .h {
  font-family: var(--mono);
  font-size: var(--t-micro); font-weight: var(--w-med); letter-spacing: var(--trk-caps); text-transform: uppercase;
  color: var(--text-muted); margin-bottom: var(--s3); display: flex; align-items: center; gap: 8px;
}
.led-actions .h::before { content: ''; width: 14px; height: 1px; background: var(--text-faint); }
.led-act {
  display: flex; gap: 9px; align-items: flex-start;
  padding: 8px 0; border-top: 1px solid var(--border-soft);
  font-size: var(--t-sub); color: var(--text-sub); line-height: 1.42;
}
.led-act:first-of-type { border-top: none; padding-top: 1px; }
.led-act .n {
  font-size: var(--t-small); font-weight: var(--w-med); color: var(--brand);
  background: var(--brand-wash); border: 1px solid var(--brand-light);
  width: 20px; height: 20px; border-radius: 6px;
  display: flex; align-items: center; justify-content: center; flex-shrink: 0;
}

.led-reqs { background: var(--bg-cool); border: 1px solid var(--border); border-radius: var(--radius); padding: var(--s3) var(--s5); }
.led-reqs .h { font-family: var(--mono); font-size: var(--t-micro); font-weight: var(--w-med); letter-spacing: var(--trk-caps); text-transform: uppercase; color: var(--text-muted); margin-bottom: 7px; }
.led-reqs .row { font-size: var(--t-sub); color: var(--text-sub); display: flex; justify-content: space-between; gap: 12px; padding: 4px 0; line-height: 1.42; }
.led-reqs .row b { color: var(--text); font-weight: var(--w-semi); }

/* Timeline spine */
.led-timeline { position: relative; }
.led-tl-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-bottom: var(--s4); }
.led-tl-head .t { font-size: var(--t-h3); font-weight: var(--w-semi); letter-spacing: var(--trk-tight); display: inline-flex; align-items: center; gap: 8px; color: var(--text); }
.led-tl-head .t::before { content: ''; width: 6px; height: 6px; border-radius: 1px; background: var(--brand); }
.led-tl-head .m { font-family: var(--mono); font-size: var(--t-small); color: var(--text-muted); font-weight: var(--w-med); }

.led-day { position: relative; padding-left: 30px; }
.led-day::before {
  content: ''; position: absolute; left: 8px; top: 3px; bottom: -3px; width: 1px;
  background: linear-gradient(180deg, color-mix(in srgb, var(--data-blue) 30%, var(--border)), var(--border) 40%);
}
.led-day:last-child::before { background: linear-gradient(180deg, var(--border) 0%, transparent 100%); }

.led-divider { display: flex; align-items: center; gap: 9px; margin: var(--s2) 0 var(--s2); position: relative; }
.led-divider .knob {
  position: absolute; left: -30px; top: 50%; transform: translateY(-50%);
  width: 16px; height: 16px; border-radius: 50%;
  background: var(--bg); border: 1.5px solid var(--border-strong);
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 0 0 3px var(--bg-page);
}
.led-divider .knob::after { content: ''; width: 5px; height: 5px; border-radius: 50%; background: var(--text-faint); }
.led-divider.today .knob { border-color: var(--green); }
.led-divider.today .knob::after { background: var(--green); animation: pulseGreen 2.4s ease infinite; }
.led-divider .day-label { font-size: var(--t-sub); font-weight: var(--w-semi); letter-spacing: var(--trk-tight); color: var(--text); }
.led-divider.today .day-label { color: var(--green-ink); }
.led-divider .day-date { font-size: var(--t-micro); font-weight: var(--w-med); color: var(--text-faint); text-transform: uppercase; letter-spacing: 0.04em; }
.led-divider .day-rule { flex: 1; height: 1px; background: var(--border-soft); }
.led-divider .day-count {
  font-family: var(--mono); font-size: var(--t-nano); font-weight: var(--w-med); color: var(--text-muted);
  background: var(--bg-cool); border: 1px solid var(--border);
  padding: 1px 7px; border-radius: 5px;
}

/* timeline entry (signal) · a compact row card that floats on the canvas, crisp ring node */
.led-entry {
  position: relative; margin-bottom: 5px;
  background: var(--bg); border: 1px solid var(--border);
  border-radius: var(--radius-sm); padding: 9px var(--s4) 9px var(--s4);
  box-shadow: var(--panel-elev);
  transition: border-color 0.16s ease, transform 0.16s ease, box-shadow 0.16s ease;
  animation: fadeUp 0.4s ease both;
}
.led-entry:hover { transform: translateX(2px); border-color: var(--border-strong); box-shadow: var(--panel-elev-hover); }
.led-entry::before {
  content: ''; position: absolute; left: -25px; top: 13px;
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--data-blue);
  box-shadow: 0 0 0 3px var(--bg-page);
  animation: nodeIn 0.3s ease both;
}
.led-entry.sev-high::before { background: var(--green); }
.led-entry.sev-med::before { background: var(--amber); }
.led-entry.sev-low::before { background: var(--data-blue); opacity: 0.55; }
.led-entry-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; }
.led-entry .e-headline { font-size: var(--t-sub); font-weight: var(--w-semi); line-height: 1.38; letter-spacing: var(--trk-tight); color: var(--text); }
.led-entry .e-detail { font-size: var(--t-small); font-weight: var(--w-body); color: var(--text-sub); margin-top: 2px; line-height: 1.4; }
.led-entry .e-time {
  flex-shrink: 0; font-family: var(--mono); font-size: var(--t-small); font-weight: var(--w-med); color: var(--text-muted);
  padding-top: 1px;
}
.led-entry .e-meta { display: flex; align-items: center; gap: 6px; margin-top: 6px; flex-wrap: wrap; }
.entity-chip {
  font-size: var(--t-nano); font-weight: var(--w-med); letter-spacing: 0;
  color: var(--text-sub); background: var(--bg-cool);
  border: 1px solid var(--border);
  padding: 1px 8px 1px 7px; border-radius: 5px;
  display: inline-flex; align-items: center; gap: 4px;
}
.entity-chip::before { content: ''; width: 5px; height: 5px; border-radius: 50%; background: var(--text-faint); }
.entity-chip.who::before { background: var(--brand); }
.entity-chip.co::before { background: var(--navy); border-radius: 1px; }

/* highlighted entries: watchlist movers + competitor reads feeding the timeline */
.led-entry.hl-watch { border-left: 2px solid var(--brand); }
.led-entry.hl-comp { border-left: 2px solid var(--navy); }
.led-flag {
  display: inline-flex; align-items: center; gap: 5px;
  font-family: var(--mono);
  font-size: var(--t-nano); font-weight: var(--w-med); letter-spacing: 0.06em; text-transform: uppercase;
  padding: 1px 7px; border-radius: 5px;
}
.led-flag.watch { color: var(--brand); background: var(--brand-wash); border: 1px solid var(--brand-light); }
.led-flag.comp { color: var(--navy); background: rgba(21, 20, 82, 0.05); border: 1px solid rgba(21, 20, 82, 0.12); }

/* compact ledger nested inside a white card (competitors view) */
.co-ledger { margin-top: 2px; }
.co-ledger .led-day { padding-left: 26px; }
.co-ledger .led-day::before { left: 6px; }
.co-ledger .led-divider .knob { left: -26px; box-shadow: 0 0 0 3px var(--bg); }
.co-ledger .led-entry { background: var(--bg-alt); box-shadow: var(--sh-2); }
.co-ledger .led-entry:hover { box-shadow: var(--panel-elev); }
.co-ledger .led-entry::before { left: -22px; box-shadow: 0 0 0 3px var(--bg); }

/* top band: movers + competitor reads that feed the timeline */
.led-band { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s4); margin-bottom: var(--s5); }
.led-band-card {
  background: var(--bg); border: 1px solid var(--border); border-radius: var(--radius);
  padding: var(--s4) var(--s5);
  box-shadow: var(--panel-elev);
  transition: border-color 0.18s ease, box-shadow 0.18s ease;
}
.led-band-card .bh { padding-bottom: var(--s2); border-bottom: 1px solid var(--head-rule); }
.led-band-card:hover { border-color: var(--border-strong); box-shadow: var(--panel-elev-hover); }
.led-band-card .bh {
  display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 8px;
}
.led-band-card .bh .t { font-size: var(--t-title); font-weight: var(--w-semi); letter-spacing: var(--trk-tight); display: inline-flex; align-items: center; gap: 8px; color: var(--text); }
.led-band-card .bh .t .ic { width: 7px; height: 7px; border-radius: 50%; }
.led-band-card.watch .bh .t .ic { background: var(--brand); }
.led-band-card.comp .bh .t .ic { background: var(--navy); border-radius: 1px; }
.led-band-card .bh a { font-family: var(--mono); font-size: var(--t-small); font-weight: var(--w-med); color: var(--brand); text-decoration: none; display: inline-flex; align-items: center; gap: 4px; }
.led-band-card .bh a:hover { text-decoration: underline; }
.led-mover { display: flex; gap: 9px; align-items: flex-start; padding: 6px 0; border-top: 1px solid var(--border-soft); font-size: var(--t-sub); color: var(--text-sub); line-height: 1.42; }
.led-mover:first-of-type { border-top: none; }
.led-mover .dot { width: 5px; height: 5px; border-radius: 50%; margin-top: 6px; flex-shrink: 0; }
.led-band-card.watch .led-mover .dot { background: var(--brand); }
.led-band-card.comp .led-mover .dot { background: var(--navy); }
.led-mover strong { color: var(--text); font-weight: var(--w-semi); }

/* ── Watchlist · person cards · float on the canvas like every other panel ── */
.person-card {
  border: 1px solid var(--border); border-radius: var(--radius); background: var(--bg);
  padding: var(--s4) var(--s5); margin-bottom: var(--s3);
  box-shadow: var(--panel-elev);
  transition: border-color 0.18s ease, box-shadow 0.18s ease;
  position: relative; overflow: hidden;
}
.person-card:hover { border-color: var(--border-strong); box-shadow: var(--panel-elev-hover); }
.person-top {
  display: flex; align-items: flex-start; gap: var(--s4);
  width: 100%; text-align: left; background: none; border: none;
  font-family: inherit; color: inherit; cursor: pointer; padding: 0;
}
.person-id { flex: 1; min-width: 0; }
.person-name { font-size: var(--t-h3); font-weight: var(--w-bold); letter-spacing: var(--trk-tight); color: var(--text); }
.person-role { font-size: var(--t-sub); font-weight: var(--w-body); color: var(--text-sub); margin-top: 2px; }
.person-tags { display: flex; align-items: center; gap: 7px; margin-top: 7px; flex-wrap: wrap; }
.person-score { text-align: right; flex-shrink: 0; position: relative; }
.person-score .lbl { font-family: var(--mono); font-size: var(--t-nano); font-weight: var(--w-med); letter-spacing: var(--trk-caps); text-transform: uppercase; color: var(--text-muted); margin-bottom: 4px; }

/* expand caret · shared by mover cards, watching rows, dept heads */
.exp-caret { display: inline-block; width: 9px; height: 9px; flex-shrink: 0; position: relative; }
.exp-caret::after {
  content: ''; position: absolute; left: 0; top: 1px;
  width: 7px; height: 7px; border-right: 2px solid var(--text-muted); border-bottom: 2px solid var(--text-muted);
  transform: rotate(45deg); transform-origin: center; transition: transform 0.2s ease;
}
.person-score .exp-caret { position: absolute; right: 0; bottom: -2px; }
.is-collapsed .exp-caret::after { transform: rotate(-45deg); }
.person-top:hover .exp-caret::after,
.wl-row:hover .exp-caret::after,
.dept-head:hover .exp-caret::after { border-color: var(--brand); }

/* collapsible detail panel (mover cards + watching rows) */
.person-detail, .wl-detail { overflow: hidden; }
.is-collapsed > .person-detail,
.is-collapsed > .wl-detail { display: none; }
.changes-list { margin-top: 10px; }
.person-detail .factors { margin-top: var(--s4); }
.person-detail > .match-note:first-child { margin-top: 12px; }

.factors { margin-top: var(--s4); border-top: 1px solid var(--border-soft); padding-top: var(--s3); display: flex; flex-direction: column; gap: 8px; }
.factor { display: grid; grid-template-columns: 150px 1fr; gap: var(--s3); align-items: center; }
.factor .f-label { font-size: var(--t-small); font-weight: var(--w-med); color: var(--text-sub); }
.factor .f-why { font-size: var(--t-small); color: var(--text-muted); grid-column: 2; margin-top: -4px; line-height: 1.38; }
.f-bar { height: 6px; background: var(--data-track); border: 1px solid var(--border); border-radius: 99px; overflow: hidden; position: relative; }
.f-fill {
  height: 100%; background: linear-gradient(90deg, var(--accent), var(--data-blue)); border-radius: 99px;
  transform-origin: left center; animation: barGrowX 0.7s cubic-bezier(0.22, 1, 0.36, 1) both;
}
.f-pts { font-family: var(--mono); font-size: var(--t-small); font-weight: var(--w-med); color: var(--text-muted); min-width: 40px; text-align: right; }
.f-row { display: flex; align-items: center; gap: 10px; }
.f-row .f-bar { flex: 1; }

.touch-block {
  margin-top: var(--s3); padding: var(--s3) var(--s4);
  background: var(--bg-cool);
  border: 1px solid var(--border); border-left: 2px solid var(--brand-light); border-radius: var(--radius-sm);
  font-size: var(--t-sub); color: var(--text-sub); line-height: 1.5;
}
.touch-block .t-lbl { font-family: var(--mono); font-size: var(--t-nano); font-weight: var(--w-med); letter-spacing: var(--trk-caps); text-transform: uppercase; color: var(--text-muted); display: flex; align-items: center; gap: 7px; margin-bottom: 6px; }
.touch-block .t-lbl::before { content: ''; width: 10px; height: 10px; border-radius: 3px; background: var(--brand); flex-shrink: 0; }

.change-line { font-size: var(--t-sub); color: var(--text-sub); display: flex; gap: 9px; align-items: baseline; padding: 3px 0; line-height: 1.4; }
.change-line .when { color: var(--text-muted); font-family: var(--mono); font-size: var(--t-small); font-weight: var(--w-med); flex-shrink: 0; }

/* Watching · expandable rows (replaces the old table) */
.wl-list { display: flex; flex-direction: column; }
.wl-item { border-bottom: 1px solid var(--border-soft); }
.wl-item:last-child { border-bottom: none; }
.wl-row {
  display: grid; grid-template-columns: minmax(0, 2.1fr) 0.8fr 1.3fr 1.4fr 16px;
  align-items: center; gap: 12px; width: 100%;
  background: none; border: none; font-family: inherit; color: inherit; cursor: pointer;
  text-align: left; padding: 9px var(--s2); margin: 0 calc(var(--s2) * -1);
  border-radius: var(--radius-xs); transition: background 0.14s ease;
}
.wl-row:hover { background: var(--bg-cool); }
.wl-c { display: flex; flex-direction: column; gap: 2px; min-width: 0; font-size: var(--t-sub); }
.wl-c-score { flex-direction: row; align-items: center; gap: 7px; flex-wrap: wrap; }
.wl-k { display: none; font-family: var(--mono); font-size: var(--t-nano); font-weight: var(--w-med); letter-spacing: 0.05em; text-transform: uppercase; color: var(--text-faint); }
.wl-c .nm { font-weight: var(--w-semi); color: var(--text); }
.wl-c .sub { color: var(--text-muted); font-size: var(--t-small); line-height: 1.35; }
.wl-row .exp-caret { justify-self: end; }
.wl-detail { padding: 2px var(--s2) var(--s3); }
.wl-detail .factors { margin-top: 0; border-top: none; padding-top: 0; }
.wl-detail > .match-note:first-child { margin-top: 0; margin-bottom: 12px; }

/* ── Pills + chips · compact, mono, square-ish; color stays semantic ── */
.pill {
  display: inline-flex; align-items: center; gap: 5px;
  font-family: var(--mono);
  font-size: var(--t-nano); font-weight: var(--w-med); letter-spacing: 0.04em; text-transform: uppercase;
  padding: 2px 8px; border-radius: 5px; white-space: nowrap;
}
.pill::before { content: ''; width: 5px; height: 5px; border-radius: 50%; background: currentColor; }
.pill-act { background: rgba(31, 163, 74, 0.1); color: var(--green-ink); }
.pill-climb { background: rgba(201, 130, 11, 0.12); color: var(--amber-ink); }
.pill-watch { background: var(--bg-cool); color: var(--text-sub); border: 1px solid var(--border); }
.pill-watch::before { background: var(--text-muted); }
.pill-process { background: var(--brand-wash); color: var(--brand); border: 1px solid var(--brand-light); }
.pill-exit { background: rgba(214, 69, 63, 0.09); color: var(--red-ink); }
.pill-arrive { background: rgba(31, 163, 74, 0.1); color: var(--green-ink); }
.pill-freeze { background: rgba(197, 229, 255, 0.4); color: #1D4ED8; }
.pill-surge { background: rgba(201, 130, 11, 0.12); color: var(--amber-ink); }

.score-chip {
  display: inline-flex; align-items: baseline; gap: 3px;
  font-family: var(--mono);
  font-weight: var(--w-med); font-size: 0.95rem; letter-spacing: -0.02em;
  padding: 3px 10px; border-radius: var(--radius-xs);
  font-variant-numeric: tabular-nums lining-nums;
}
.score-hi { background: rgba(31, 163, 74, 0.11); color: var(--green-ink); border: 1px solid rgba(31,163,74,0.2); }
.score-mid { background: rgba(201, 130, 11, 0.11); color: var(--amber-ink); border: 1px solid rgba(201,130,11,0.22); }
.score-low { background: var(--bg-cool); color: var(--text-sub); border: 1px solid var(--border); }
.score-chip .max { font-size: 0.62rem; font-weight: var(--w-body); opacity: 0.6; }
.delta-up { color: var(--green-ink); font-weight: var(--w-med); font-size: var(--t-small); display: inline-flex; align-items: center; gap: 3px; }
.delta-down { color: var(--text-muted); font-weight: var(--w-med); font-size: var(--t-small); }

.match-pill {
  font-family: var(--mono); font-size: var(--t-small); font-weight: var(--w-med);
  color: var(--brand); background: var(--brand-wash);
  border: 1px solid var(--brand-light);
  padding: 2px 9px; border-radius: 5px; white-space: nowrap;
}
.match-note { font-size: var(--t-small); color: var(--text-muted); margin-top: 6px; }

/* ── Org map · responsive grid, no horizontal scroll ── */
.org-legend { display: flex; gap: 14px; flex-wrap: wrap; margin-bottom: var(--s3); }
.org-legend span { display: inline-flex; align-items: center; gap: 6px; font-family: var(--mono); font-size: var(--t-small); font-weight: var(--w-med); color: var(--text-muted); }
.org-legend i { width: 9px; height: 9px; border-radius: 2px; flex-shrink: 0; }
.org-legend .lx { background: var(--red); }
.org-legend .la { background: var(--green); }
.org-legend .lw { background: var(--brand); border-radius: 50%; }

.org-grid {
  display: grid; gap: var(--s3);
  grid-template-columns: repeat(auto-fit, minmax(232px, 1fr));
  align-items: start;
}
.dept-col {
  background: var(--bg-alt); border: 1px solid var(--border); border-radius: var(--radius-sm);
  overflow: hidden; transition: border-color 0.18s ease;
}
.dept-col:hover { border-color: var(--border-strong); }
.dept-col.other { opacity: 0.75; border-style: dashed; }
.dept-head {
  display: flex; align-items: center; gap: 9px; flex-wrap: wrap;
  width: 100%; text-align: left; background: none; border: none; font-family: inherit; color: inherit;
  cursor: pointer; padding: 8px var(--s3);
}
.dept-head[disabled] { cursor: default; }
.dept-name { font-size: var(--t-sub); font-weight: var(--w-semi); letter-spacing: var(--trk-tight); color: var(--text); }
.dept-hc { font-family: var(--mono); font-size: var(--t-small); color: var(--text-muted); font-weight: var(--w-med); display: inline-flex; gap: 6px; align-items: center; flex-wrap: wrap; }
.dept-head .exp-caret { margin-left: auto; }
.dept-body { padding: 0 var(--s3) 9px; }
.is-collapsed > .dept-body { display: none; }
.senior-grid { display: grid; gap: 6px; grid-template-columns: repeat(auto-fill, minmax(184px, 1fr)); }
.senior {
  background: var(--bg); border: 1px solid var(--border); border-radius: var(--radius-xs);
  padding: 6px 9px;
  transition: transform 0.15s ease, border-color 0.15s ease;
}
.senior:hover { transform: translateX(2px); border-color: var(--border-strong); }
.senior .s-name { font-size: var(--t-small); font-weight: var(--w-semi); display: flex; align-items: center; gap: 6px; color: var(--text); }
.senior .s-title { font-size: var(--t-micro); color: var(--text-muted); margin-top: 1px; }
.senior.exited { border-color: rgba(214, 69, 63, 0.3); background: rgba(214, 69, 63, 0.035); }
.senior.arrived { border-color: rgba(31, 163, 74, 0.3); background: rgba(31, 163, 74, 0.035); }
.senior .s-note { font-size: var(--t-micro); font-weight: var(--w-med); margin-top: 3px; line-height: 1.35; }
.senior.exited .s-note { color: var(--red-ink); }
.senior.arrived .s-note { color: var(--green-ink); }
.watch-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--brand); flex-shrink: 0; box-shadow: 0 0 0 2px var(--brand-light); }
.org-note { font-size: var(--t-small); color: var(--text-muted); margin-top: var(--s3); }

/* ── Competitor cards ── */
.co-switch { margin-bottom: var(--s4); }
.co-tabs { display: inline-flex; gap: 3px; flex-wrap: wrap; max-width: 100%; background: var(--bg-cool); border: 1px solid var(--border); padding: 3px; border-radius: var(--radius-sm); }
.co-tab {
  font-family: inherit; font-size: var(--t-sub); font-weight: var(--w-med);
  background: transparent; color: var(--text-sub);
  border: none; border-radius: 7px;
  padding: 6px 13px; cursor: pointer; white-space: nowrap;
  transition: color 0.16s ease, background 0.16s ease;
}
.co-tab:hover { color: var(--text); }
.co-tab.active { background: var(--bg); color: var(--brand); font-weight: var(--w-semi); border: 1px solid var(--border); box-shadow: var(--sh-2); }
/* native select · only surfaces on very narrow screens */
.co-select-wrap { display: none; flex-direction: column; gap: 6px; }
.co-select-lbl { font-family: var(--mono); font-size: var(--t-nano); font-weight: var(--w-med); letter-spacing: var(--trk-caps); text-transform: uppercase; color: var(--text-muted); }
.co-select {
  font-family: inherit; font-size: var(--t-body); font-weight: var(--w-med); color: var(--text);
  background: var(--bg); border: 1px solid var(--border); border-radius: var(--radius-xs);
  padding: 11px 38px 11px 14px; width: 100%; cursor: pointer;
  -webkit-appearance: none; appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%2382849C' stroke-width='2' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 14px center;
}
.rail-link:focus-visible, .co-tab:focus-visible, .btn:focus-visible, a:focus-visible, button:focus-visible {
  outline: 2px solid var(--brand); outline-offset: 2px; border-radius: 6px;
}

/* sparkline (postings) · area-fill blue, hot weeks in vivid data-blue */
.spark { display: flex; align-items: flex-end; gap: 4px; height: 54px; position: relative; padding-top: 6px; }
.spark .bar {
  flex: 1; background: linear-gradient(180deg, var(--data-blue-soft), var(--data-track));
  border-radius: 2px 2px 0 0; min-height: 3px; position: relative;
  transform-origin: bottom; animation: barGrow 0.6s cubic-bezier(0.22, 1, 0.36, 1) both;
}
.spark .bar.hot { background: linear-gradient(180deg, var(--data-blue), color-mix(in srgb, var(--data-blue) 78%, #fff)); }
.spark .bar.last-pt::after {
  content: ''; position: absolute; top: -3px; left: 50%; transform: translateX(-50%);
  width: 6px; height: 6px; border-radius: 50%; background: var(--data-blue);
  border: 2px solid var(--bg); box-shadow: 0 0 0 2px var(--data-blue-soft);
}
.spark .bar.zero { height: 6px !important; background: transparent; border-top: 2px dotted rgba(214, 69, 63, 0.7); border-radius: 0; min-height: 0; animation: none; }
.spark-base { position: absolute; left: 0; right: 0; border-top: 1px dashed var(--border-strong); pointer-events: none; }
.spark-base::after {
  content: 'baseline'; position: absolute; right: 0; top: -13px;
  font-family: var(--mono); font-size: var(--t-nano); font-weight: var(--w-med); color: var(--text-faint); text-transform: uppercase; letter-spacing: 0.05em;
}
.zero-flag { color: var(--red-ink); font-weight: var(--w-med); display: inline-flex; align-items: center; gap: 4px; }
.zero-flag::before { content: ''; width: 5px; height: 5px; border-radius: 50%; background: var(--red); }
.spark-lbl { display: flex; justify-content: space-between; font-family: var(--mono); font-size: var(--t-nano); color: var(--text-muted); font-weight: var(--w-med); margin-top: 6px; }

.window-row {
  display: flex; gap: var(--s3); align-items: center;
  border: 1px solid var(--border); border-radius: var(--radius-sm);
  background: var(--bg-alt); padding: 9px var(--s4); margin-bottom: 6px;
  transition: border-color 0.18s ease;
}
.window-row:hover { border-color: var(--border-strong); }
.window-req { flex: 1; min-width: 0; }
.window-req .r-t { font-size: var(--t-sub); font-weight: var(--w-semi); letter-spacing: var(--trk-tight); color: var(--text); }
.window-req .r-d { font-size: var(--t-small); color: var(--text-sub); margin-top: 1px; line-height: 1.4; }

/* ── Market ── */
.metro-block { margin-bottom: var(--s3); }
.metro-head { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 6px; flex-wrap: wrap; gap: 2px 10px; }
.metro-name { font-size: var(--t-sub); font-weight: var(--w-semi); color: var(--text); }
.metro-emp { font-size: var(--t-small); color: var(--text-muted); font-weight: var(--w-med); white-space: nowrap; }
.comp-band {
  position: relative; height: 26px;
  background: var(--bg-cool);
  border: 1px solid var(--border); border-radius: var(--radius-xs);
  overflow: hidden;
}
.comp-range {
  position: absolute; top: 6px; bottom: 6px;
  background: var(--data-blue-soft);
  border-radius: 4px; box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--data-blue) 32%, transparent);
}
.comp-range::before, .comp-range::after {
  content: ''; position: absolute; top: -3px; bottom: -3px; width: 1.5px;
  background: color-mix(in srgb, var(--data-blue) 55%, transparent); border-radius: 1px;
}
.comp-range::before { left: 0; }
.comp-range::after { right: 0; }
.comp-tick { position: absolute; top: 3px; bottom: 3px; width: 1px; background: rgba(21,20,82,0.1); }
.comp-med {
  position: absolute; top: 1px; bottom: 1px; width: 2px;
  background: var(--data-blue); border-radius: 1px; box-shadow: 0 0 0 2px var(--bg);
}
.comp-med::after {
  content: ''; position: absolute; top: -3px; left: 50%; transform: translateX(-50%);
  width: 0; height: 0; border-left: 3px solid transparent; border-right: 3px solid transparent; border-top: 4px solid var(--data-blue);
}
.comp-lbls { display: flex; justify-content: space-between; font-family: var(--mono); font-size: var(--t-small); color: var(--text-muted); font-weight: var(--w-med); margin-top: 5px; }
.comp-med-lbl { font-size: var(--t-small); font-weight: var(--w-semi); color: var(--accent); }
.src-note { font-size: var(--t-small); color: var(--text-muted); margin-top: 8px; line-height: 1.42; }
.src-note strong { color: var(--text-sub); font-weight: var(--w-med); }
.stat-table { width: 100%; border-collapse: collapse; }
.stat-table th { font-family: var(--mono); font-size: var(--t-nano); font-weight: var(--w-med); letter-spacing: 0.04em; text-transform: uppercase; color: var(--text-muted); text-align: right; padding: 6px 8px; border-bottom: 1px solid var(--border-strong); }
.stat-table th:first-child, .stat-table td:first-child { text-align: left; }
.stat-table td { font-size: var(--t-sub); padding: 6px 8px; text-align: right; border-bottom: 1px solid var(--border-soft); }
.stat-table td:first-child { font-family: var(--sans); }
.stat-table tr:last-child td { border-bottom: none; }
.stat-table tbody tr { transition: background 0.14s ease; }
.stat-table tbody tr:hover { background: var(--bg-cool); }

.demand-spark { display: flex; align-items: flex-end; gap: 3px; height: 44px; margin-top: 6px; padding-top: 4px; }
.demand-spark .bar {
  flex: 1; background: linear-gradient(180deg, var(--data-blue-soft), var(--data-track));
  border-radius: 2px 2px 0 0; min-height: 3px; position: relative;
  transform-origin: bottom; animation: barGrow 0.6s cubic-bezier(0.22, 1, 0.36, 1) both;
}
.demand-spark .bar.last { background: linear-gradient(180deg, var(--data-blue), color-mix(in srgb, var(--data-blue) 78%, #fff)); }
.demand-spark .bar.last::after {
  content: ''; position: absolute; top: -3px; left: 50%; transform: translateX(-50%);
  width: 6px; height: 6px; border-radius: 50%; background: var(--data-blue);
  border: 2px solid var(--bg); box-shadow: 0 0 0 2px var(--data-blue-soft);
}

/* ── Briefing legacy bits reused elsewhere (reports) ── */
.brief-item { display: flex; gap: 9px; padding: 7px 0; border-bottom: 1px solid var(--border-soft); font-size: var(--t-sub); font-weight: var(--w-body); color: var(--text-sub); align-items: baseline; line-height: 1.45; }
.brief-item:last-child { border-bottom: none; }
.brief-item .b-dot { width: 5px; height: 5px; border-radius: 1px; background: var(--text-faint); flex-shrink: 0; position: relative; top: 0; }
.brief-item strong { color: var(--text); font-weight: var(--w-semi); }
.action-list { display: flex; flex-direction: column; gap: 7px; }
.action-item {
  display: flex; gap: var(--s3); align-items: flex-start;
  background: var(--bg-alt); border: 1px solid var(--border); border-radius: var(--radius-sm);
  padding: 9px 13px; font-size: var(--t-sub); color: var(--text-sub); line-height: 1.42;
  transition: border-color 0.16s ease;
}
.action-item:hover { border-color: var(--border-strong); }
.action-item .n {
  font-size: var(--t-small); font-weight: var(--w-med); color: var(--brand);
  background: var(--brand-wash); border: 1px solid var(--brand-light);
  width: 21px; height: 21px; border-radius: 6px;
  display: flex; align-items: center; justify-content: center; flex-shrink: 0;
}

/* ════════════════════════════════════════════════
   Theme control · masthead (compact) + drawer
   ════════════════════════════════════════════════ */
.theme-ctl { display: flex; align-items: center; gap: 10px; }
.theme-ctl-lbl { font-family: var(--mono); font-size: var(--t-nano); font-weight: var(--w-med); letter-spacing: var(--trk-caps); text-transform: uppercase; color: var(--text-muted); flex-shrink: 0; }
.theme-opts { display: inline-flex; gap: 4px; flex-wrap: wrap; }
.theme-opt {
  display: inline-flex; align-items: center; gap: 6px;
  font-family: inherit; font-size: var(--t-small); font-weight: var(--w-med); color: var(--text-sub);
  background: var(--bg); border: 1px solid var(--border); border-radius: 99px;
  padding: 5px 11px 5px 7px; cursor: pointer;
  transition: border-color 0.15s ease, color 0.15s ease;
}
.theme-opt .sw { width: 13px; height: 13px; border-radius: 4px; flex-shrink: 0; border: 1px solid rgba(21,20,82,0.18); overflow: hidden; }
/* each swatch previews the scheme: canvas tint + a blue data chip */
.theme-opt.theme-cobalt .sw { background: linear-gradient(135deg, #EDF1FB 0 55%, #2F5BFF 55% 100%); }
.theme-opt.theme-azure .sw { background: linear-gradient(135deg, #E7EFFE 0 55%, #2563EB 55% 100%); }
.theme-opt.theme-slate .sw { background: linear-gradient(135deg, #DBE2EC 0 55%, #2F4FE0 55% 100%); }
.theme-opt.theme-indigo .sw { background: linear-gradient(135deg, #EAEAF8 0 55%, #4F46E5 55% 100%); }
.theme-opt.theme-midnight .sw { background: linear-gradient(135deg, #100F3E 0 55%, #5B6CFF 55% 100%); border-color: rgba(21,20,82,0.3); }
.theme-opt.theme-carbon .sw { background: linear-gradient(135deg, #10162A 0 55%, #5B6CFF 55% 100%); border-color: rgba(21,20,82,0.3); }
.theme-opt:hover { border-color: var(--border-strong); color: var(--text); }
.theme-opt.active { border-color: var(--accent); color: var(--accent); box-shadow: inset 0 0 0 1px var(--accent); }
.theme-opt.active .sw { border-color: var(--accent); }

/* compact theme control in the masthead (sits on the navy surface) */
.masthead-theme { flex-shrink: 0; }
.masthead-theme .theme-ctl-lbl { color: rgba(255, 255, 255, 0.6); }
.masthead-theme .theme-ctl { gap: 8px; }
.masthead-theme .theme-opts { gap: 3px; }
.masthead-theme .theme-opt {
  background: rgba(255, 255, 255, 0.05); border-color: rgba(255, 255, 255, 0.12); color: #E6ECFF;
  padding: 4px 7px; font-size: 0; gap: 0;
}
.masthead-theme .theme-opt .sw { width: 13px; height: 13px; border-color: rgba(255,255,255,0.3); }
.masthead-theme .theme-opt:hover { border-color: rgba(255, 255, 255, 0.4); }
.masthead-theme .theme-opt.active { border-color: var(--ice); box-shadow: inset 0 0 0 1px var(--ice); }

/* ════════════════════════════════════════════════
   Mobile nav · hamburger + off-canvas drawer
   ════════════════════════════════════════════════ */
.nav-burger {
  display: none; /* shown on narrow widths only */
  flex-direction: column; justify-content: center; align-items: stretch; gap: 5px;
  width: 46px; height: 38px; flex-shrink: 0;
  background: rgba(255, 255, 255, 0.14); border: 1px solid rgba(255, 255, 255, 0.45);
  border-radius: var(--radius-xs); cursor: pointer; padding: 0 10px;
}
.nav-burger:hover { background: rgba(255, 255, 255, 0.22); }
.nav-burger span { display: block; height: 2.5px; border-radius: 2px; background: #fff; transition: transform 0.2s ease, opacity 0.2s ease; }
.nav-burger[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav-burger[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.nav-burger[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

.drawer-backdrop {
  position: fixed; inset: 0; z-index: 90;
  background: rgba(16, 15, 46, 0.5); -webkit-backdrop-filter: blur(2px); backdrop-filter: blur(2px);
  opacity: 0; transition: opacity 0.24s ease;
}
.drawer-backdrop.show { opacity: 1; }
.drawer {
  position: fixed; top: 0; left: 0; bottom: 0; z-index: 95;
  width: 84%; max-width: 320px;
  background: var(--rail-bg); border-right: 1px solid var(--rail-border);
  box-shadow: var(--sh-raise);
  display: flex; flex-direction: column;
  padding: var(--s5) var(--s4) var(--s4);
  transform: translateX(-100%); transition: transform 0.26s cubic-bezier(0.22, 1, 0.36, 1);
  overflow-y: auto; overscroll-behavior: contain;
}
.drawer.open { transform: translateX(0); }
.drawer-top { display: flex; align-items: center; justify-content: space-between; margin-bottom: var(--s4); }
.drawer-brand { font-size: 0.9rem; font-weight: var(--w-black); letter-spacing: 0.04em; color: var(--rail-text-strong); display: inline-flex; align-items: center; gap: 8px; }
.drawer-brand::before { content: ''; width: 8px; height: 8px; border-radius: 2px; background: var(--data-blue); }
.drawer-close { font-size: 1.6rem; line-height: 1; color: var(--rail-muted); background: none; border: none; cursor: pointer; width: 36px; height: 36px; border-radius: var(--radius-xs); }
.drawer-close:hover { background: var(--rail-hover); color: var(--rail-text-strong); }
.drawer-client { font-family: var(--mono); font-size: var(--t-nano); font-weight: var(--w-med); color: var(--rail-muted); line-height: 1.5; letter-spacing: var(--trk-caps); text-transform: uppercase; padding-bottom: var(--s4); margin-bottom: var(--s3); border-bottom: 1px solid var(--rail-border); }
.drawer-client strong { display: block; color: var(--rail-text-strong); font-family: var(--sans); font-weight: var(--w-bold); font-size: 0.9rem; margin-top: 4px; letter-spacing: var(--trk-tight); text-transform: none; }
.drawer-nav { display: flex; flex-direction: column; gap: 3px; }
.drawer-link {
  display: flex; align-items: center; gap: 10px;
  font-size: 0.9rem; font-weight: var(--w-med); color: var(--rail-text); text-decoration: none;
  padding: 12px 13px; border-radius: var(--radius-xs);
  transition: background 0.15s ease, color 0.15s ease;
}
.drawer-link:hover { background: var(--rail-hover); color: var(--rail-text-strong); }
.drawer-link.active { background: var(--rail-active-bg); color: var(--rail-active-text); font-weight: var(--w-semi); box-shadow: var(--sh-brand); }
.drawer-link .count {
  margin-left: auto; font-size: var(--t-micro); font-weight: var(--w-semi);
  background: var(--rail-badge-bg); color: var(--rail-badge-text); border: 1px solid var(--rail-badge-border);
  border-radius: 99px; padding: 0 8px; min-width: 22px; height: 18px;
  display: inline-flex; align-items: center; justify-content: center;
}
.drawer-link.active .count { background: rgba(255,255,255,0.2); color: #fff; border-color: transparent; }
.drawer-sep { height: 1px; background: var(--rail-border); margin: var(--s2) var(--s3); }

/* Booking CTA styled as an accent nav item (desktop rail + mobile drawer) */
.rail-link.book, .drawer-link.book {
  margin-top: 8px; border: 1px solid var(--brand-2);
  background: color-mix(in srgb, var(--brand-2) 16%, transparent);
  color: #fff; font-weight: var(--w-semi); cursor: pointer;
}
.rail-link.book svg, .drawer-link.book svg {
  width: 16px; height: 16px; stroke: currentColor; fill: none; stroke-width: 1.75;
  stroke-linecap: round; stroke-linejoin: round; opacity: 0.95; flex-shrink: 0;
}
.rail-link.book:hover, .drawer-link.book:hover { background: var(--brand-2); color: #fff; box-shadow: var(--sh-brand); }
.rail-link.book:hover svg, .drawer-link.book:hover svg { opacity: 1; }
.drawer-theme { margin-top: var(--s4); padding-top: var(--s4); border-top: 1px solid var(--rail-border); }
.drawer-theme .theme-ctl-lbl { color: var(--rail-muted); }
.drawer-theme .theme-ctl { flex-direction: column; align-items: flex-start; gap: 10px; }
.drawer-theme .theme-opts { gap: 6px; }
.drawer-theme .theme-opt { font-size: var(--t-sub); padding: 7px 13px 7px 9px; }
.drawer-foot { margin-top: auto; padding-top: var(--s5); font-family: var(--mono); font-size: var(--t-nano); color: var(--rail-muted); letter-spacing: 0.03em; line-height: 1.7; opacity: 0.85; }
.drawer-foot strong { color: var(--rail-text); font-weight: var(--w-med); }
body.drawer-lock { overflow: hidden; }

/* ── Buttons ── */
.btn {
  display: inline-flex; align-items: center; gap: 7px;
  font-family: inherit; font-size: var(--t-sub); font-weight: var(--w-semi);
  background: var(--brand); color: #fff;
  border: 1px solid var(--brand); border-radius: var(--radius-xs);
  padding: 8px 16px; cursor: pointer; text-decoration: none;
  box-shadow: var(--sh-brand);
  transition: transform 0.16s ease, background 0.16s ease;
}
.btn:hover { transform: translateY(-1px); background: var(--brand-2); }
.btn-ghost { background: var(--bg); color: var(--brand); border: 1px solid var(--border); box-shadow: none; }
.btn-ghost:hover { background: var(--bg-cool); border-color: var(--border-strong); }

/* ── Responsive ── */
@media (max-width: 1080px) {
  .ledger { grid-template-columns: 1fr; }
  .led-rail { position: static; flex-direction: column; }
}

/* Header + meta pairs: stack vertically on narrow widths so nothing clips.
   Applied to every title/meta-on-one-row pattern across all views. */
@media (max-width: 760px) {
  .card-head { flex-direction: column; align-items: flex-start; gap: 5px; }
  .led-tl-head { flex-direction: column; align-items: flex-start; gap: 5px; }
  .led-band-card .bh { flex-direction: column; align-items: flex-start; gap: 6px; }
  .view-title { line-height: 1.18; }
}

/* Masthead ticker is too cramped to read on phones (truncates mid-word); hide it there.
   The RADAR LIVE pill keeps the live cue and the full signals live in the feed below. */
@media (max-width: 600px) {
  .ticker-win { display: none; }
}

/* Nav: desktop rail at >= 900px, hamburger drawer below */
@media (max-width: 899px) {
  .rail { display: none; }
  .nav-burger { display: flex; }
  .masthead-theme { display: none; } /* theme lives in the drawer on mobile */
  .masthead { padding: 9px 15px; gap: 11px; }
  .content { padding: var(--s5) var(--s4) var(--s8); }
  .grid2, .grid3 { grid-template-columns: 1fr; }
  .kpi-row { grid-template-columns: 1fr 1fr; }
  .led-band { grid-template-columns: 1fr; }
  .factor { grid-template-columns: 130px 1fr; }
  /* keep dense controls tappable on touch widths (>=36px high) */
  .co-tab { padding: 9px 14px; }
  .kpi { padding: var(--s4); }
}

/* Watching rows: stack into labelled blocks on narrow screens */
@media (max-width: 760px) {
  .wl-row {
    grid-template-columns: 1fr auto; gap: 8px 12px;
    padding: 13px 4px; margin: 0;
  }
  .wl-c-person { grid-column: 1; grid-row: 1; }
  .wl-c-score { grid-column: 2; grid-row: 1; flex-direction: column; align-items: flex-end; text-align: right; gap: 4px; }
  .wl-c-tenure { grid-column: 1; grid-row: 2; flex-direction: row; align-items: baseline; gap: 7px; }
  .wl-c-match { grid-column: 1 / -1; grid-row: 3; flex-direction: row; align-items: center; gap: 7px; flex-wrap: wrap; }
  .wl-row .exp-caret { grid-column: 2; grid-row: 2; align-self: center; justify-self: end; }
  .wl-k { display: inline; }
}

@media (max-width: 480px) {
  .masthead .cadence { display: none; }
  .kpi-row { grid-template-columns: 1fr 1fr; }
  /* KPI strip wraps to 2x2 on the narrowest screens; restore the hairlines for the wrap */
  .led-mini-kpis { grid-template-columns: 1fr 1fr; }
  .led-mini:nth-child(2) { border-left: 1px solid rgba(255, 255, 255, 0.08); }
  .led-mini:nth-child(3) { border-left: none; border-top: 1px solid rgba(255, 255, 255, 0.08); }
  .led-mini:nth-child(4) { border-top: 1px solid rgba(255, 255, 255, 0.08); }
  .led-day { padding-left: 26px; }
  .led-day::before { left: 6px; }
  .led-entry::before { left: -22px; }
  .led-divider .knob { left: -26px; }
  .factor { grid-template-columns: 1fr; gap: 6px; }
  .factor .f-why { grid-column: 1; margin-top: 0; }
  /* competitor selector: switch to native select on the smallest screens */
  .co-tabs { display: none; }
  .co-select-wrap { display: flex; }
  /* org departments: single column, comfortable stacked blocks */
  .org-grid { grid-template-columns: 1fr; }
  .senior-grid { grid-template-columns: 1fr; }
}

@media (max-width: 420px) {
  .person-top { flex-wrap: wrap; }
  .person-score { text-align: left; min-width: 100%; margin-top: 4px; display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
  .person-score .lbl { margin-bottom: 0; }
  .person-score .exp-caret { position: static; }
}

/* ════════════════════════════════════════════════
   Self-serve layer · booking CTA, jump affordances, expand hint, welcome overlay
   ════════════════════════════════════════════════ */

/* ── Booking CTA · masthead (on navy) + drawer ── */
.masthead-cta { flex-shrink: 0; display: inline-flex; align-items: center; gap: 10px; }
.book-btn {
  display: inline-flex; align-items: center; gap: 7px;
  font-family: inherit; font-size: var(--t-sub); font-weight: var(--w-semi); letter-spacing: -0.005em;
  color: #fff; background: var(--brand-2);
  border: 1px solid color-mix(in srgb, var(--brand-2) 60%, #fff);
  border-radius: var(--radius-xs); padding: 7px 14px; cursor: pointer; white-space: nowrap;
  box-shadow: 0 1px 0 rgba(255,255,255,0.12) inset, 0 2px 8px -2px rgba(0,0,0,0.4);
  transition: transform 0.16s ease, background 0.16s ease, box-shadow 0.16s ease;
}
.book-btn svg { width: 14px; height: 14px; stroke: currentColor; fill: none; stroke-width: 1.85; stroke-linecap: round; stroke-linejoin: round; opacity: 0.92; flex-shrink: 0; }
.book-btn .bk-short { display: none; }
.book-btn:hover { transform: translateY(-1px); background: color-mix(in srgb, var(--brand-2) 86%, #fff); box-shadow: 0 1px 0 rgba(255,255,255,0.18) inset, 0 4px 12px -3px rgba(0,0,0,0.45); }
.book-btn:active { transform: translateY(0); }
.masthead-cta .book-btn:focus-visible { outline: 2px solid var(--ice); outline-offset: 2px; }
.book-note {
  font-family: var(--mono); font-size: var(--t-nano); font-weight: var(--w-med);
  color: rgba(230, 236, 255, 0.86); letter-spacing: 0.01em; max-width: 200px; line-height: 1.4;
}
.book-note.show { animation: fadeIn 0.3s ease both; }

/* drawer booking block · light surface, full-width button */
.drawer-cta { margin-top: var(--s4); padding-top: var(--s4); border-top: 1px solid var(--rail-border); display: flex; flex-direction: column; gap: 9px; }
.drawer-book { width: 100%; justify-content: center; font-size: var(--t-body); padding: 12px 16px; background: var(--brand); border-color: var(--brand); box-shadow: var(--sh-brand); }
.drawer-book:hover { background: var(--brand-2); }
.drawer-cta .book-note { color: var(--rail-muted); max-width: none; text-align: center; }

/* ── Jump affordances · clickable movers + flagged timeline entries chain views ── */
a.led-mover.jump { text-decoration: none; color: var(--text-sub); border-radius: var(--radius-xs); margin: 0 -6px; padding: 6px 6px; position: relative; transition: background 0.14s ease; }
a.led-mover.jump:hover { background: var(--bg-cool); }
a.led-mover.jump .jump-go { margin-left: auto; align-self: center; flex-shrink: 0; width: 7px; height: 7px; opacity: 0; transition: opacity 0.16s ease, transform 0.16s ease; }
a.led-mover.jump .jump-go::after {
  content: ''; position: absolute; width: 6px; height: 6px;
  border-right: 1.75px solid var(--brand); border-top: 1.75px solid var(--brand);
  transform: rotate(45deg);
}
a.led-mover.jump:hover .jump-go, a.led-mover.jump:focus-visible .jump-go { opacity: 1; transform: translateX(2px); }
a.led-mover.jump:hover strong { color: var(--brand); }

a.led-entry.jump { display: block; text-decoration: none; color: inherit; cursor: pointer; }
a.led-entry.jump:hover { transform: translateX(2px); border-color: var(--border-strong); box-shadow: var(--panel-elev-hover); }
a.led-entry.jump .e-meta .jump-go { margin-left: auto; align-self: center; flex-shrink: 0; width: 8px; height: 8px; position: relative; opacity: 0.55; transition: opacity 0.16s ease, transform 0.16s ease; }
a.led-entry.jump .e-meta .jump-go::after {
  content: ''; position: absolute; right: 0; top: 1px; width: 6px; height: 6px;
  border-right: 1.75px solid var(--brand); border-top: 1.75px solid var(--brand);
  transform: rotate(45deg);
}
a.led-entry.jump:hover .jump-go { opacity: 1; transform: translateX(2px); }
a.led-entry.jump:hover .e-headline { color: var(--brand); }

/* ── One-time "tap to expand" cue ── */
.expand-hint {
  font-family: var(--mono); font-size: var(--t-nano); font-weight: var(--w-med);
  letter-spacing: 0.04em; text-transform: uppercase;
  color: var(--brand); background: var(--brand-wash);
  border: 1px solid var(--brand-light); border-radius: 5px;
  padding: 2px 8px; white-space: nowrap; flex-shrink: 0;
  animation: fadeIn 0.4s ease both;
}
.wl-row .expand-hint { margin-left: 8px; align-self: center; }
.dept-head .expand-hint { margin-left: 8px; }
@keyframes hintPulse {
  0%, 100% { box-shadow: 0 0 0 0 var(--data-blue-soft); }
  50% { box-shadow: 0 0 0 5px transparent; }
}
.hint-pulse { animation: hintPulse 2.2s ease 3; border-color: var(--brand-light); }
@media (prefers-reduced-motion: reduce) {
  .hint-pulse { animation: none; }
}

/* ── First-visit welcome overlay ── */
.welcome {
  position: fixed; inset: 0; z-index: 200;
  display: flex; align-items: center; justify-content: center;
  padding: 24px;
  background: rgba(14, 13, 56, 0.55); -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px);
  opacity: 0; transition: opacity 0.22s ease;
}
.welcome.show { opacity: 1; }
.welcome-card {
  position: relative; width: 100%; max-width: 500px;
  background: var(--bg); border: 1px solid var(--border-strong); border-radius: var(--radius-lg);
  box-shadow: 0 1px 2px rgba(21,20,82,0.06), 0 40px 80px -28px rgba(16,15,46,0.55);
  padding: var(--s6) var(--s6) var(--s5);
  max-height: calc(100vh - 48px); overflow-y: auto; overscroll-behavior: contain;
  transform: translateY(10px) scale(0.99); transition: transform 0.24s cubic-bezier(0.22, 1, 0.36, 1);
}
.welcome.show .welcome-card { transform: translateY(0) scale(1); }
.welcome-card::before {
  content: ''; position: absolute; left: 0; right: 0; top: 0; height: 3px;
  background: linear-gradient(90deg, var(--brand), var(--data-blue) 60%, transparent);
  border-radius: var(--radius-lg) var(--radius-lg) 0 0;
}
.welcome-x {
  position: absolute; top: 12px; right: 12px; width: 34px; height: 34px;
  font-size: 1.5rem; line-height: 1; color: var(--text-muted);
  background: none; border: none; border-radius: var(--radius-xs); cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease;
}
.welcome-x:hover { background: var(--bg-cool); color: var(--text); }
.welcome-brand {
  display: inline-flex; align-items: center; gap: 9px;
  font-size: 0.85rem; font-weight: var(--w-black); letter-spacing: 0.04em; color: var(--text);
}
.welcome-brand .wb-mark { width: 9px; height: 9px; border-radius: 2px; background: var(--data-blue); flex-shrink: 0; }
.welcome-brand .wb-sub { font-family: var(--mono); font-size: var(--t-nano); font-weight: var(--w-med); letter-spacing: var(--trk-caps); text-transform: uppercase; color: var(--text-muted); }
.welcome-title { font-size: var(--t-h1); font-weight: var(--w-bold); letter-spacing: var(--trk-display); line-height: 1.12; color: var(--text); margin-top: 12px; }
.welcome-lede { font-size: var(--t-sub); font-weight: var(--w-body); color: var(--text-sub); line-height: 1.5; margin-top: 8px; }
.welcome-map { display: grid; grid-template-columns: 1fr; gap: 1px; background: var(--border-soft); border: 1px solid var(--border); border-radius: var(--radius-sm); overflow: hidden; margin-top: var(--s4); }
.wm-item { display: flex; align-items: baseline; gap: 12px; background: var(--bg); padding: 7px 13px; }
.wm-item .wm-k { font-family: var(--mono); font-size: var(--t-small); font-weight: var(--w-semi); letter-spacing: 0.02em; color: var(--brand); min-width: 92px; flex-shrink: 0; }
.wm-item .wm-v { font-size: var(--t-sub); color: var(--text-sub); line-height: 1.4; }
.welcome-hint { font-size: var(--t-sub); color: var(--text-muted); line-height: 1.48; margin-top: var(--s3); }
.welcome-actions { display: flex; gap: 10px; flex-wrap: wrap; margin-top: var(--s4); }
.welcome-actions .btn { padding: 10px 17px; font-size: var(--t-sub); }
.welcome-go { flex: 1; min-width: 180px; justify-content: center; }
.welcome-actions .btn-ghost { justify-content: center; }
.welcome-book-note { display: block; margin-top: 11px; color: var(--text-muted); max-width: none; }
body.welcome-lock { overflow: hidden; }

@media (max-width: 480px) {
  .welcome { padding: 14px; align-items: flex-end; }
  .welcome-card { padding: var(--s6) var(--s5) var(--s5); max-height: calc(100vh - 28px); }
  .welcome-actions { flex-direction: column; }
  .welcome-go, .welcome-actions .btn-ghost { width: 100%; flex: none; min-width: 0; }
  .wm-item .wm-k { min-width: 86px; }
}

/* Mobile top bar: show a compact "Book" CTA (the full label and the drawer item remain) */
@media (max-width: 899px) {
  .masthead-cta { display: inline-flex; margin-left: auto; }
  .masthead-cta .book-btn { padding: 7px 12px; }
  .masthead-cta .book-btn .bk-full { display: none; }
  .masthead-cta .book-btn .bk-short { display: inline; }
}

/* ════════════════════════════════════════════════
   EMAIL DIGEST · in-app view (the weekly email preview, same chrome as every section)
   ════════════════════════════════════════════════ */
.digest-view { max-width: 600px; margin: 0 auto; }
.digest-view .mail { background: var(--bg); border-radius: var(--radius); overflow: hidden; border: 1px solid var(--border); box-shadow: var(--panel-elev); }
.digest-view .mhead { background: var(--navy-grad); color: #fff; padding: 22px 26px; position: relative; overflow: hidden; }
.digest-view .mhead::before { content: ''; position: absolute; inset: 0; pointer-events: none; background: radial-gradient(420px 190px at 100% -20%, rgba(91,108,255,0.34), transparent 72%); }
.digest-view .mhead > * { position: relative; }
.digest-view .mbrand { font-size: 0.82rem; font-weight: 800; letter-spacing: 0.04em; color: #fff; display: inline-flex; align-items: center; gap: 8px; }
.digest-view .mbrand::before { content: ''; width: 8px; height: 8px; border-radius: 2px; background: var(--brand-2); }
.digest-view .mkick { font-family: var(--mono); font-size: 0.625rem; font-weight: 500; letter-spacing: 0.085em; text-transform: uppercase; color: rgba(197,229,255,0.85); margin-top: 13px; }
.digest-view .mhead h2 { font-size: 1.3rem; font-weight: 700; letter-spacing: -0.025em; margin: 5px 0 0; color: #fff; line-height: 1.16; }
.digest-view .mhead p { font-size: 0.8125rem; color: rgba(205,208,236,0.92); margin-top: 8px; line-height: 1.5; }
.digest-view .mbody { padding: 20px 26px; }
.digest-view .sec { margin-bottom: 16px; }
.digest-view .sec:last-of-type { margin-bottom: 0; }
.digest-view .sec-t { font-family: var(--mono); font-size: 0.6875rem; font-weight: 500; letter-spacing: 0.085em; text-transform: uppercase; color: var(--text-muted); border-bottom: 1px solid var(--border-soft); padding-bottom: 6px; margin-bottom: 8px; }
.digest-view .it { font-size: 0.8125rem; color: var(--text-sub); padding: 5px 0 5px 17px; position: relative; line-height: 1.45; }
.digest-view .it::before { content: ''; position: absolute; left: 3px; top: 12px; width: 5px; height: 5px; border-radius: 50%; background: var(--brand-2); }
.digest-view .it strong { color: var(--text); font-weight: 600; }
.digest-view .act { display: flex; gap: 10px; font-size: 0.8125rem; color: var(--text-sub); padding: 5px 0; align-items: baseline; line-height: 1.45; }
.digest-view .act .n { font-family: var(--mono); font-size: 0.72rem; font-weight: 500; color: var(--brand); background: var(--brand-wash); border: 1px solid var(--brand-light); border-radius: 6px; min-width: 21px; height: 21px; display: flex; align-items: center; justify-content: center; position: relative; top: 2px; flex-shrink: 0; }
.digest-view .readb { background: var(--brand-wash); border: 1px solid var(--brand-light); border-left: 2px solid var(--brand); border-radius: 10px; padding: 13px 16px; font-size: 0.8125rem; color: var(--text-sub); line-height: 1.52; margin-top: 4px; }
.digest-view .readb .rt { font-family: var(--mono); font-size: 0.6875rem; font-weight: 500; letter-spacing: 0.085em; text-transform: uppercase; color: var(--brand); display: flex; align-items: center; gap: 8px; margin-bottom: 7px; }
.digest-view .readb .rt::before { content: ''; width: 14px; height: 1px; background: var(--brand); }
.digest-view .readb strong { color: var(--brand); font-weight: 600; }
.digest-view .cta { display: block; width: 100%; text-align: center; background: var(--brand); color: #fff; border: none; cursor: pointer; text-decoration: none; font-weight: 600; font-size: 0.8125rem; font-family: var(--sans); padding: 11px; border-radius: 8px; margin: 18px 0 5px; }
.digest-view .cta:hover { background: var(--brand-2); }
.digest-view .mfoot { padding: 16px 26px 22px; text-align: center; font-family: var(--mono); font-size: 0.6875rem; color: var(--text-muted); letter-spacing: 0.03em; line-height: 1.6; }

/* ════════════════════════════════════════════════
   DATA VISUALS · inline SVG + CSS charts
   Every chart is computed from window.DATA / window.MARKET and every color is a
   theme token, so the set renders in all five schemes (including Midnight + Carbon).
   Compact by design: small, tight, scoped to the card. Bars are CSS divs; the radar
   is inline SVG using currentColor + theme vars. Entrance animation is reduced-motion
   gated by the global rule near the top of this file.
   ════════════════════════════════════════════════ */

/* shared figure scaffold · a labelled chart block inside a card */
.chart { margin-top: var(--s3); }
.chart + .chart { margin-top: var(--s4); }
.chart-head {
  display: flex; align-items: baseline; justify-content: space-between; gap: 10px;
  margin-bottom: var(--s2);
}
.chart-title {
  font-family: var(--mono); font-size: var(--t-micro); font-weight: var(--w-med);
  letter-spacing: var(--trk-caps); text-transform: uppercase; color: var(--text-muted);
  display: inline-flex; align-items: center; gap: 7px;
}
.chart-title::before { content: ''; width: 11px; height: 1px; background: var(--text-faint); }
.chart-note { font-size: var(--t-small); color: var(--text-muted); margin-top: var(--s2); line-height: 1.4; }

/* ── Horizontal bar chart · used for skills, departments, pool sizes ── */
.hbars { display: flex; flex-direction: column; gap: 7px; }
.hbar { display: grid; grid-template-columns: minmax(0, 1fr); gap: 3px; }
.hbar-top { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; }
.hbar-label { font-size: var(--t-small); font-weight: var(--w-med); color: var(--text-sub); line-height: 1.3; min-width: 0; }
.hbar-val {
  font-family: var(--mono); font-size: var(--t-small); font-weight: var(--w-med);
  color: var(--text-sub); flex-shrink: 0; font-variant-numeric: tabular-nums lining-nums;
}
.hbar-track {
  height: 9px; background: var(--data-track); border: 1px solid var(--border);
  border-radius: 99px; overflow: hidden; position: relative;
}
.hbar-fill {
  height: 100%; border-radius: 99px; transform-origin: left center;
  background: linear-gradient(90deg, var(--accent), var(--data-blue));
  animation: barGrowX 0.7s cubic-bezier(0.22, 1, 0.36, 1) both;
}
/* a paired comparison bar (two metros / two periods inside one row) */
.hbar-fill.alt { background: linear-gradient(90deg, color-mix(in srgb, var(--data-blue) 52%, var(--bg)), color-mix(in srgb, var(--data-blue) 70%, var(--bg))); }
.hbar-fill.up { background: linear-gradient(90deg, var(--green), color-mix(in srgb, var(--green) 72%, #fff)); }
.hbar-fill.down { background: linear-gradient(90deg, var(--red), color-mix(in srgb, var(--red) 72%, #fff)); }
.hbar-fill.flat { background: linear-gradient(90deg, var(--text-faint), var(--data-track)); }
.hbar-delta { font-family: var(--mono); font-size: var(--t-nano); font-weight: var(--w-med); flex-shrink: 0; }
.hbar-delta.up { color: var(--green-ink); }
.hbar-delta.down { color: var(--red-ink); }
.hbar-delta.flat { color: var(--text-muted); }
/* tag for a line with no honest numeric value (rendered instead of a bar) */
.chart-tags { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 7px; }
.chart-tag {
  font-size: var(--t-small); font-weight: var(--w-med); color: var(--text-sub);
  background: var(--bg-cool); border: 1px solid var(--border);
  border-radius: 99px; padding: 3px 10px; line-height: 1.3;
}
.chart-tag::before { content: ''; display: inline-block; width: 5px; height: 5px; border-radius: 50%; background: var(--accent); margin-right: 6px; vertical-align: middle; }
/* small inline legend for paired-series charts */
.chart-legend { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 8px; }
.chart-legend span { display: inline-flex; align-items: center; gap: 6px; font-family: var(--mono); font-size: var(--t-nano); font-weight: var(--w-med); color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.04em; }
.chart-legend i { width: 9px; height: 9px; border-radius: 3px; flex-shrink: 0; }
.chart-legend i.k-prime { background: var(--data-blue); }
.chart-legend i.k-alt { background: color-mix(in srgb, var(--data-blue) 60%, var(--bg)); border: 1px solid var(--border); }
.chart-legend i.k-nat { background: var(--text-faint); }
.chart-legend i.k-up { background: var(--green); }
.chart-legend i.k-down { background: var(--red); }

/* ── Ratio bar · "this quarter vs baseline" (Reports) ── */
.ratio { display: flex; flex-direction: column; gap: 8px; margin-top: var(--s2); }
.ratio-row { display: grid; grid-template-columns: 70px 1fr auto; align-items: center; gap: 10px; }
.ratio-k { font-family: var(--mono); font-size: var(--t-small); font-weight: var(--w-med); color: var(--text-muted); }
.ratio-track { height: 16px; background: var(--data-track); border: 1px solid var(--border); border-radius: var(--radius-xs); overflow: hidden; position: relative; }
.ratio-fill { height: 100%; transform-origin: left center; animation: barGrowX 0.75s cubic-bezier(0.22, 1, 0.36, 1) both; border-radius: var(--radius-xs) 0 0 var(--radius-xs); }
.ratio-fill.base { background: var(--text-faint); }
.ratio-fill.now { background: linear-gradient(90deg, var(--amber), color-mix(in srgb, var(--amber) 70%, #fff)); }
.ratio-v { font-family: var(--mono); font-size: var(--t-body); font-weight: var(--w-semi); letter-spacing: -0.02em; flex-shrink: 0; font-variant-numeric: tabular-nums lining-nums; }
.ratio-row.now .ratio-v { color: var(--amber-ink); }
.ratio-row.base .ratio-v { color: var(--text-muted); }

/* ── Talent flows · schematic directional rows (Reports) ── */
.flowmap { display: flex; flex-direction: column; gap: 8px; margin-top: var(--s2); }
.flow-row {
  display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 9px;
  background: var(--bg-alt); border: 1px solid var(--border); border-radius: var(--radius-sm);
  padding: 8px 11px;
}
.flow-node { font-size: var(--t-small); font-weight: var(--w-semi); color: var(--text); line-height: 1.25; min-width: 0; }
.flow-node.src { text-align: right; }
.flow-node.dst { text-align: left; }
.flow-node .sub { display: block; font-family: var(--mono); font-size: var(--t-nano); font-weight: var(--w-med); color: var(--text-muted); margin-top: 2px; text-transform: uppercase; letter-spacing: 0.04em; }
.flow-arrow { display: flex; flex-direction: column; align-items: center; gap: 2px; flex-shrink: 0; min-width: 44px; }
.flow-arrow .line { position: relative; width: 100%; height: 2px; background: linear-gradient(90deg, var(--data-track), var(--data-blue)); border-radius: 2px; }
.flow-arrow .line::after { content: ''; position: absolute; right: -1px; top: 50%; transform: translateY(-50%); width: 0; height: 0; border-top: 4px solid transparent; border-bottom: 4px solid transparent; border-left: 6px solid var(--data-blue); }
.flow-arrow .mag { font-family: var(--mono); font-size: var(--t-nano); font-weight: var(--w-med); color: var(--accent); }

/* ── Open-to-move factor radar (Watchlist) · inline SVG ── */
.radar-wrap { display: flex; align-items: center; gap: var(--s4); flex-wrap: wrap; }
.radar-svg { width: 132px; height: 132px; flex-shrink: 0; overflow: visible; }
.radar-grid { fill: none; stroke: var(--border); stroke-width: 1; }
.radar-grid.outer { stroke: var(--border-strong); }
.radar-spoke { stroke: var(--border); stroke-width: 1; }
.radar-area { fill: var(--data-blue-soft); stroke: var(--data-blue); stroke-width: 1.5; stroke-linejoin: round; }
.radar-dot { fill: var(--data-blue); stroke: var(--bg); stroke-width: 1.5; }
.radar-axis-lbl { font-family: var(--mono); font-size: 8.5px; font-weight: 500; fill: var(--text-muted); }
.radar-key { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.radar-key-row { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; font-size: var(--t-small); }
.radar-key-row .rk-l { color: var(--text-sub); font-weight: var(--w-med); }
.radar-key-row .rk-v { font-family: var(--mono); font-weight: var(--w-med); color: var(--text-muted); font-variant-numeric: tabular-nums lining-nums; flex-shrink: 0; }

/* ── Score-distribution histogram (Watchlist) · vertical bars ── */
.histo { display: flex; align-items: flex-end; gap: 8px; height: 64px; margin-top: var(--s2); padding-top: 14px; }
.histo-col { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; height: 100%; gap: 0; min-width: 0; }
.histo-bar {
  width: 100%; max-width: 46px; border-radius: 3px 3px 0 0; min-height: 3px; position: relative;
  background: linear-gradient(180deg, var(--data-blue), color-mix(in srgb, var(--data-blue) 72%, var(--bg)));
  transform-origin: bottom; animation: barGrow 0.6s cubic-bezier(0.22, 1, 0.36, 1) both;
}
.histo-bar.hot { background: linear-gradient(180deg, var(--green), color-mix(in srgb, var(--green) 70%, #fff)); }
.histo-bar .cnt { position: absolute; top: -14px; left: 50%; transform: translateX(-50%); font-family: var(--mono); font-size: var(--t-nano); font-weight: var(--w-semi); color: var(--text-sub); }
.histo-x { display: flex; gap: 8px; margin-top: 5px; }
.histo-x span { flex: 1; text-align: center; font-family: var(--mono); font-size: var(--t-nano); font-weight: var(--w-med); color: var(--text-muted); }

/* ── Exit-cluster timeline (Competitors) · dots on a 30-day axis ── */
.exittl { margin-top: var(--s2); }
.exittl-track { position: relative; height: 30px; }
.exittl-axis { position: absolute; left: 0; right: 0; top: 19px; height: 1px; background: var(--border-strong); }
.exittl-tick { position: absolute; top: 15px; width: 1px; height: 9px; background: var(--border); }
.exittl-dot {
  position: absolute; top: 13px; width: 11px; height: 11px; border-radius: 50%;
  background: var(--red); border: 2px solid var(--bg); transform: translateX(-50%);
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--red) 22%, transparent);
  animation: nodeIn 0.35s ease both;
}
.exittl-x { display: flex; justify-content: space-between; font-family: var(--mono); font-size: var(--t-nano); font-weight: var(--w-med); color: var(--text-muted); margin-top: 3px; }

/* ── Briefing · signal mini-bar (by day) + category mix ── */
.sigbars { display: flex; align-items: flex-end; gap: 4px; height: 46px; margin-top: var(--s2); padding-top: 12px; }
.sigbar-col { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; height: 100%; min-width: 0; }
.sigbar {
  width: 100%; max-width: 16px; border-radius: 2px 2px 0 0; min-height: 3px; position: relative;
  background: linear-gradient(180deg, var(--data-blue), color-mix(in srgb, var(--data-blue) 70%, var(--bg)));
  transform-origin: bottom; animation: barGrow 0.55s cubic-bezier(0.22, 1, 0.36, 1) both;
}
.sigbar.wk { background: linear-gradient(180deg, var(--green), color-mix(in srgb, var(--green) 70%, #fff)); }
.sigbar .cnt { position: absolute; top: -12px; left: 50%; transform: translateX(-50%); font-family: var(--mono); font-size: var(--t-nano); font-weight: var(--w-semi); color: var(--text-sub); }
.sigbar-mono { /* dashes-as-axis labels under the day bars */ }
.sig-mix { display: flex; flex-direction: column; gap: 6px; margin-top: var(--s2); }
.sig-mix-row { display: grid; grid-template-columns: 96px 1fr auto; align-items: center; gap: 9px; }
.sig-mix-k { font-size: var(--t-small); font-weight: var(--w-med); color: var(--text-sub); }
.sig-mix-track { height: 8px; background: var(--data-track); border: 1px solid var(--border); border-radius: 99px; overflow: hidden; }
.sig-mix-fill { height: 100%; border-radius: 99px; transform-origin: left center; animation: barGrowX 0.65s cubic-bezier(0.22, 1, 0.36, 1) both; }
.sig-mix-fill.k-watch { background: linear-gradient(90deg, var(--brand), var(--brand-2)); }
.sig-mix-fill.k-comp { background: linear-gradient(90deg, var(--navy), color-mix(in srgb, var(--navy) 60%, var(--data-blue))); }
.sig-mix-fill.k-market { background: linear-gradient(90deg, var(--amber), color-mix(in srgb, var(--amber) 70%, #fff)); }
.sig-mix-fill.k-pipeline { background: linear-gradient(90deg, var(--green), color-mix(in srgb, var(--green) 72%, #fff)); }
.sig-mix-v { font-family: var(--mono); font-size: var(--t-small); font-weight: var(--w-med); color: var(--text-muted); flex-shrink: 0; font-variant-numeric: tabular-nums lining-nums; }

/* dept headcount summary sits above the detailed org grid · add separation */
.chart-dept { margin-bottom: var(--s4); padding-bottom: var(--s3); border-bottom: 1px solid var(--border-soft); }

/* charts stay tight on mobile */
@media (max-width: 480px) {
  .sigbars { gap: 2px; }
  .sigbar { max-width: 10px; }
  .radar-wrap { gap: var(--s3); }
  .radar-svg { width: 116px; height: 116px; }
  .ratio-row { grid-template-columns: 56px 1fr auto; gap: 8px; }
  .sig-mix-row { grid-template-columns: 80px 1fr auto; gap: 7px; }
  .flow-row { grid-template-columns: 1fr; gap: 6px; text-align: center; }
  .flow-node.src, .flow-node.dst { text-align: center; }
  .flow-arrow { flex-direction: row; min-width: 0; width: 60px; margin: 0 auto; }
  .flow-arrow .line { width: 40px; }
}