/* ================================================================
   ORION Observatory — Design System
   Space-themed learning platform design tokens & base styles
   ================================================================ */

/* ── Google Fonts ──
   Loaded once via <link> in index.html (preconnect + stylesheet).
   Do NOT re-add an @import here — that duplicates the request and can
   race the <link>, causing a flash of unstyled (native) text. */

/* ── Design Tokens ── */
:root {
  /* Void Palette — Pure Monochrome */
  --c-void:        #070708;
  --c-void-light:  #0a0a0d;
  --c-void-medium: #0d0d10;
  --c-void-panel:  #0d0d10;
  --c-void-raised: #121217;

  /* DC2 Tokens */
  --bg:#070708; 
  --panel:#0d0d10; 
  --raised:#121217; 
  --hair:rgba(255,255,255,0.09);
  --hair2:rgba(255,255,255,0.14); 
  --text:#f4f4f6; 
  --muted:#a7a7b1;
  --faint:#9a9aa4;
  --accent:#ffffff;
  --glow:255,255,255;

  /* Accent — White Only */
  --c-accent:      #ffffff;
  --c-glow:        255, 255, 255;
  --c-glow-rgba:   rgba(255, 255, 255, 0.25);

  /* Monochrome Accents (mapped from old color names for compatibility) */
  --c-purple:      rgba(255, 255, 255, 0.85);
  --c-purple-dim:  rgba(255, 255, 255, 0.10);
  --c-purple-glow: rgba(255, 255, 255, 0.12);

  --c-cyan:        rgba(255, 255, 255, 0.85);
  --c-cyan-glow:   rgba(255, 255, 255, 0.12);

  /* Text Hierarchy */
  --c-white:       #f4f4f6;
  --c-white-dim:   #d4d4da;
  --c-white-muted: #a7a7b1;
  --c-white-ghost: #8b8b96;

  /* Hair Lines */
  --c-hair:        rgba(255, 255, 255, 0.09);
  --c-hair2:       rgba(255, 255, 255, 0.14);

  /* Typography */
  --f-brand:    'Space Grotesk', system-ui, sans-serif;
  --f-heading:  'Space Grotesk', system-ui, sans-serif;
  --f-body:     'Space Grotesk', system-ui, sans-serif;
  --f-mono:     'Space Mono', monospace;

  /* ORION visual language */
  --brand-steel: linear-gradient(105deg, #d8dbe2 0%, #ffffff 18%, #7c838e 34%, #f1f3f7 52%, #aeb4bf 68%, #ffffff 84%, #747b86 100%);
  --brand-steel-shadow: 0 0 14px rgba(255,255,255,0.10), 0 0 32px rgba(181,197,218,0.08);
  --progress-gradient: linear-gradient(90deg, #f8f8fb 0%, #cbd5e4 38%, #ffffff 62%, #9fa8b8 100%);
  --progress-gradient-soft: linear-gradient(90deg, rgba(248,248,251,0.92), rgba(203,213,228,0.72), rgba(255,255,255,0.96));

  /* Letter-Spacing Scale */
  --ls-display:   -0.03em;  /* hero/display Grotesk */
  --ls-heading:   -0.02em;  /* page/section headings */
  --ls-title:     -0.01em;  /* card titles, sub-headings */
  --ls-body:       0;       /* running prose */
  --ls-action:     0.08em;  /* buttons/CTAs (mono, uppercase) */
  --ls-label:      0.02em;  /* persistent UI labels (Grotesk) */
  --ls-telemetry:  0.08em;  /* mono values, coordinates, counters */
  --ls-eyebrow:    0.28em;  /* mono kickers above section titles */

  /* ── Semantic type roles — `font` shorthand tokens ──
     weight size/line-height family. Use as `font: var(--font-*)`.
     RULES:
     · Space Mono ships ONLY 400/700 — mono roles never use other weights.
     · Size floor: nothing below --fs-micro (10px).
     · text-transform can't live in a font shorthand — roles marked
       "uppercase" pair with `text-transform: uppercase` at the use site
       (the matching .t-* classes below do this for you).
     · Actions/buttons/CTAs = Space Mono uppercase (owner decision). */
  --font-display:       700 var(--fs-3xl)/1.05 var(--f-heading);
  --font-section-title: 600 var(--fs-lg)/1.2 var(--f-heading);
  --font-body:          400 var(--fs-base)/1.6 var(--f-body);
  --font-action:        700 var(--fs-micro)/1 var(--f-mono);   /* uppercase */
  --font-label:         500 var(--fs-xs)/1.3 var(--f-body);
  --font-eyebrow:       400 var(--fs-micro)/1.3 var(--f-mono); /* uppercase */
  --font-telemetry:     400 var(--fs-xs)/1.4 var(--f-mono);
  --font-code:          400 var(--fs-sm)/1.6 var(--f-mono);

  /* Font Sizes — Fluid Scale */
  --fs-micro: 0.625rem;    /* 10px — micro-type floor for mono labels */
  --fs-xs:    0.6875rem;   /* 11px */
  --fs-sm:    0.8125rem;   /* 13px */
  --fs-base:  0.9375rem;   /* 15px */
  --fs-md:    1.0625rem;   /* 17px */
  --fs-lg:    1.25rem;     /* 20px */
  --fs-xl:    1.5rem;      /* 24px */
  --fs-2xl:   2rem;        /* 32px */
  --fs-3xl:   2.5rem;      /* 40px */
  --fs-4xl:   3.5rem;      /* 56px */
  --fs-hero:  5rem;        /* 80px */
  --fs-hero-mobile: 1.625rem; /* 26px — Phase C rule 4: the collapsed hero
                                  is eyebrow + one 26px line on every mobile
                                  (<=768px) screen; shared token so all six
                                  screens land on the exact same size. */

  /* Spacing */
  --sp-1:  0.25rem;
  --sp-2:  0.5rem;
  --sp-3:  0.75rem;
  --sp-4:  1rem;
  --sp-5:  1.25rem;
  --sp-6:  1.5rem;
  --sp-8:  2rem;
  --sp-10: 2.5rem;
  --sp-12: 3rem;
  --sp-16: 4rem;
  --sp-20: 5rem;
  --sp-24: 6rem;

  /* Borders & Radius */
  --r-sm:   8px;
  --r-md:   12px;
  --r-lg:   16px;
  --r-xl:   24px;
  --r-full: 9999px;

  /* Glass Effects */
  --glass-bg:       rgba(255, 255, 255, 0.018);
  --glass-bg-hover: rgba(255, 255, 255, 0.04);
  --glass-border:   var(--c-hair);
  --glass-border-h: var(--c-hair2);
  --glass-blur:     blur(14px);
  --glass-blur-lg:  blur(28px);

  /* Shadows */
  --shadow-sm:   0 1px 2px rgba(0,0,0,0.5);
  --shadow-md:   0 4px 12px rgba(0,0,0,0.6);
  --shadow-lg:   0 8px 32px rgba(0,0,0,0.7);
  --shadow-xl:   0 16px 48px rgba(0,0,0,0.8);
  --shadow-glow: 0 0 10px rgba(var(--c-glow), 0.08);

  /* Transitions */
  --ease-out:  cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in:   cubic-bezier(0.7, 0, 0.84, 0);
  --ease-both: cubic-bezier(0.87, 0, 0.13, 1);
  --t-fast:    150ms;
  --t-base:    250ms;
  --t-slow:    400ms;
  --t-slower:  600ms;

  /* Z-Index Scale */
  --z-starfield: 0;
  --z-content:   1;
  --z-sidebar:   10;
  --z-modal:     100;
  --z-toast:     200;
  --z-tooltip:   300;

  /* Layout */
  --sidebar-w:       262px;
  --sidebar-w-mini:  72px;
  --header-h:        0px;
  --bottom-nav-h:    64px;
}

body[data-theme="bw"] {
  --accent:#ffffff;
  --glow:255,255,255;
  --progress-gradient: linear-gradient(90deg, #f8f8fb 0%, #cbd5e4 38%, #ffffff 62%, #9fa8b8 100%);
  --brand-steel: linear-gradient(105deg, #d8dbe2 0%, #ffffff 18%, #7c838e 34%, #f1f3f7 52%, #aeb4bf 68%, #ffffff 84%, #747b86 100%);
}

body[data-theme="cy"] {
  --accent:#96eaff;
  --glow:150,234,255;
  --text:#f2fbff;
  --muted:#b0c8d2;
  --faint:#9db8c3;
  --progress-gradient: linear-gradient(90deg, #f5fdff 0%, #96eaff 42%, #ffffff 70%, #7ca7ff 100%);
  --brand-steel: linear-gradient(105deg, #d8f7ff 0%, #ffffff 20%, #7aa4b7 38%, #e7fbff 62%, #96eaff 100%);
}

body[data-theme="pr"] {
  --accent:#f1b5ff;
  --glow:241,181,255;
  --text:#fff7ff;
  --muted:#d6badc;
  --faint:#bb9ec2;
  --progress-gradient: linear-gradient(90deg, #fff7ff 0%, #f1b5ff 40%, #ffffff 68%, #b9b0ff 100%);
  --brand-steel: linear-gradient(105deg, #f5dfff 0%, #ffffff 22%, #927aa0 40%, #fff7ff 64%, #f1b5ff 100%);
}

/* ── Reset ── */
*,
*::before,
*::after {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html {
  font-size: 16px;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  scroll-behavior: smooth;
}

/* ── Native control font inheritance ──
   Browsers render buttons/inputs/etc. in a UA font (Arial-like) unless told
   otherwise. Inherit the app's typography (Space Grotesk) and colour so no
   control silently reverts to a native font. Individual controls that need
   Space Mono (telemetry) re-declare font-family locally. */
button,
input,
select,
textarea,
optgroup,
option {
  font: inherit;
  color: inherit;
  letter-spacing: inherit;
}

body {
  font-family: var(--f-body);
  font-size: var(--fs-base);
  font-weight: 400;
  line-height: 1.6;
  color: var(--text);
  background: var(--c-void);
  overflow-x: hidden;
  min-height: 100vh;
}

/* Bare code/kbd/samp must never fall back to the UA's generic monospace —
   route them through the same token .t-code uses. (finding T2) */
code,
kbd,
samp {
  font: var(--font-code);
  letter-spacing: 0;
}

/* ── Typography ── */
h1, h2, h3, h4, h5, h6 {
  font-family: var(--f-heading);
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: -0.02em;
  color: var(--c-white);
}

.t-label {
  font-family: var(--f-mono);
  font-size: var(--fs-xs);
  font-weight: 400; /* Space Mono only ships 400/700 */
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--c-white-muted);
}

.t-mono {
  font-family: var(--f-mono);
  font-size: var(--fs-sm);
}

/* ── Semantic typography roles ──
   Reusable classes for the most-repeated inline patterns across generated
   HTML. Prefer these over one-off inline font declarations.
   Grotesk = headings/nav/controls/prose; Mono = telemetry/technical values. */

.t-secondary {
  font-family: var(--f-body);
  font-size: var(--fs-sm);
  font-weight: 400;
  color: var(--muted);
  line-height: 1.55;
}

/* Sticky-header route title (the breadcrumb's second line). Was inline in
   index.html; promoted here so B1.3's mobile header work has a class to
   target instead of fighting an inline style attribute. */
.t-header-title {
  font-family: var(--f-heading);
  font-size: var(--fs-base);
  font-weight: 500;
  letter-spacing: var(--ls-label);
  color: var(--text);
}

/* Telemetry / coordinates / codes — the only broadly-approved Space Mono use. */
.t-telemetry {
  font-family: var(--f-mono);
  font-size: var(--fs-xs);
  font-weight: 400;
  letter-spacing: 0.08em;
  color: var(--muted);
}

/* ── Role classes bound to the --font-* shorthand tokens ── */

/* Mono kicker above section titles. */
.t-eyebrow {
  font: var(--font-eyebrow);
  letter-spacing: var(--ls-eyebrow);
  text-transform: uppercase;
  color: var(--muted);
}

/* ── Links ── */
a {
  color: var(--c-white);
  text-decoration: none;
  transition: color var(--t-fast) var(--ease-out);
}
a:hover {
  color: var(--c-white-dim);
  text-decoration: underline;
}

/* ── Selection ── */
::selection {
  background: rgba(255, 255, 255, 0.2);
  color: var(--c-white);
}

/* ── Scrollbar ── */
::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}
::-webkit-scrollbar-track {
  background: transparent;
}
::-webkit-scrollbar-thumb {
  background: var(--c-white-ghost);
  border-radius: var(--r-full);
}
::-webkit-scrollbar-thumb:hover {
  background: var(--c-white-muted);
}

/* ── Utility ── */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* ── Accessible checkbox row (finding 11 / B1.10) ──
   Native checkboxes render around 13px — well under the 44px touch-target
   floor. This wraps one in a full-width tappable row with a drawn ~20px
   indicator. The real <input> stays in the tab/AT order and keeps normal
   keyboard + screen-reader interaction: it is opacity-0 and positioned over
   its own indicator, not display:none/visibility:hidden, so focus, Space-to-
   toggle and AT announcement all still work on the native control. */
.check-row {
  align-items: center;
  cursor: pointer;
  display: flex;
  gap: var(--sp-2);
  min-height: 44px;
  padding: 4px 2px;
  position: relative;
}

.check-row__input {
  cursor: pointer;
  inset: 0;
  margin: 0;
  opacity: 0;
  position: absolute;
  height: 100%;
  width: 100%;
}

.check-row__box {
  align-items: center;
  border: 1px solid var(--hair2);
  border-radius: 4px;
  color: var(--bg);
  display: inline-flex;
  flex-shrink: 0;
  height: 20px;
  justify-content: center;
  width: 20px;
}

.check-row__box svg {
  height: 13px;
  opacity: 0;
  width: 13px;
}

.check-row__input:checked + .check-row__box {
  background: var(--accent);
  border-color: var(--accent);
}

.check-row__input:checked + .check-row__box svg {
  opacity: 1;
}

.check-row__input:focus-visible + .check-row__box {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

.check-row__label {
  font-size: var(--fs-sm);
}

/* Full-width variant for a vertical checkbox list (Command Deck's plan
   topic picker) rather than a wrapped chip cloud (Signal's topic pills). */
.check-row--block {
  width: 100%;
}

/* Focus Styles */
:focus-visible {
  outline: 2px solid rgba(255, 255, 255, 0.4);
  outline-offset: 2px;
  border-radius: var(--r-sm);
}

/* Visually hidden but accessible */
[hidden] { display: none !important; }

/* ── DC2 Animations ── */
@keyframes halo { 0%,100% { opacity: .25; } 50% { opacity: .7; } }
@keyframes pulseDot { 0%,100% { opacity: .85; } 50% { opacity: 1; } }
@keyframes spinSlow { to { transform: rotate(360deg); } }
@keyframes riseIn { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: translateY(0); } }
@keyframes barEq { 0%,100% { transform: scaleY(.4); } 50% { transform: scaleY(1); } }
@keyframes sweep { 0% { transform: translateX(-120%); } 100% { transform: translateX(220%); } }
@keyframes clickPulse { 0% { transform: scale(1); opacity: 1; stroke-width: 2px; } 100% { transform: scale(2.5); opacity: 0; stroke-width: 0.5px; } }

/* ── Shared ORION Components ── */
.section-heading {
  margin-bottom: var(--sp-6);
}

.section-heading__eyebrow {
  font: var(--font-eyebrow);
  letter-spacing: var(--ls-eyebrow);
  color: var(--muted);
  text-shadow: 0 0 12px rgba(var(--glow),0.10);
  text-transform: uppercase;
}

.section-heading__title {
  font-family: var(--f-heading);
  font-size: clamp(2rem, 5vw, 3.5rem);
  font-weight: 700;
  line-height: 0.98;
  letter-spacing: -0.03em;
  margin-top: 12px;
  max-width: 18ch;
}

.section-heading__secondary {
  color: var(--c-white-dim, var(--muted));
  font-weight: 300;
  font-size: 0.6em;
  letter-spacing: -0.01em;
}

.section-heading__copy {
  color: var(--muted);
  font-family: var(--f-heading);
  font-size: var(--fs-sm);
  letter-spacing: 0.005em;
  line-height: 1.7;
  margin-top: 12px;
  max-width: 72ch;
}

.orion-panel {
  border: 1px solid var(--hair);
  border-radius: 18px;
  background: linear-gradient(180deg, rgba(255,255,255,0.026), rgba(255,255,255,0.012)), var(--panel);
  padding: 22px;
}

.orion-panel--raised {
  background: linear-gradient(180deg, rgba(255,255,255,0.045), rgba(255,255,255,0.014)), var(--raised);
}

.orion-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr));
  gap: 16px;
}

.orion-grid--wide {
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 340px), 1fr));
}

.orion-split {
  display: grid;
  grid-template-columns: minmax(0, 1.65fr) minmax(280px, 1fr);
  gap: 18px;
  align-items: start;
}

.orion-progress {
  height: 7px;
  border-radius: 999px;
  background: var(--hair2);
  overflow: hidden;
}

.orion-progress__fill {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: var(--progress-gradient);
  box-shadow: 0 0 14px rgba(255,255,255,0.18);
}

.orion-chip {
  display: inline-flex;
  align-items: center;
  min-height: 28px;
  border: 1px solid var(--hair2);
  border-radius: 999px;
  padding: 6px 10px;
  font-family: var(--f-mono);
  font-size: var(--fs-micro);
  letter-spacing: 0.08em;
  color: var(--muted);
  text-transform: uppercase;
  white-space: nowrap;
}

.orion-chip--high,
.orion-chip--active {
  background: var(--accent);
  color: var(--bg);
  border-color: var(--accent);
  font-weight: 700;
}

.orion-chip--medium {
  background: rgba(255,255,255,0.15);
  color: var(--text);
  border-color: rgba(255,255,255,0.25);
  font-weight: 700; /* Space Mono ships 400/700 only */
}

.orion-chip--low {
  background: rgba(255,255,255,0.06);
  color: var(--muted);
  border-color: rgba(255,255,255,0.10);
  font-weight: 400;
}

.orion-stat {
  border: 1px solid var(--hair);
  border-radius: 16px;
  background: var(--panel);
  padding: 18px;
  min-width: 0;
}

.orion-stat__value {
  font-size: clamp(1.9rem, 4vw, 2.65rem);
  font-weight: 700;
  line-height: 0.95;
  letter-spacing: -0.03em;
}

.orion-stat__label {
  font-family: var(--f-mono);
  font-size: var(--fs-micro);
  letter-spacing: 0.16em;
  color: var(--muted);
  text-transform: uppercase;
  margin-top: 8px;
}

.orion-stat__detail {
  color: var(--c-white-dim);
  font-size: var(--fs-sm);
  line-height: 1.45;
  margin-top: 6px;
}

.orion-action {
  border: 1px solid var(--hair2);
  border-radius: 10px;
  background: transparent;
  color: var(--text);
  cursor: pointer;
  font: var(--font-action);
  letter-spacing: var(--ls-action);
  padding: 11px 14px;
  min-height: 44px;
  min-width: 44px;
  text-transform: uppercase;
}

.orion-action--primary {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--bg);
}

.orion-action:disabled {
  cursor: not-allowed;
  opacity: 0.42;
}

/* Finding 04 — the only two size variants of .orion-action. The base rule's
   44px min-height is the touch-target floor; nothing may undercut it below
   769px. --sm exists for dense, desktop-only control clusters (Command Deck
   list rows) and is a no-op below the guard, so mobile always gets the full
   button. --inline is for a link sitting inside running text, sized to match
   its surrounding copy rather than looking like a button. */
@media (min-width: 769px) {
  .orion-action--sm {
    min-height: 36px;
    min-width: 36px;
    padding: 7px 12px;
  }
}

.orion-action--inline {
  display: inline;
  min-height: 0;
  min-width: 0;
  padding: 0;
  border: none;
  background: none;
  font: inherit;
  letter-spacing: normal;
  text-transform: none;
  text-decoration: underline;
}

/* Finding 01 — inline SVG icon set (js/icons.js, OrionUI.icon()).
   Baseline-align an inline icon with the text it sits beside; a small
   gap when it has a text sibling in the same inline-flow container. */
.orion-icon {
  vertical-align: -0.15em;
  flex-shrink: 0;
}

.orion-icon + span,
.orion-icon + b,
.orion-icon + strong {
  margin-left: 6px;
}

span + .orion-icon,
b + .orion-icon,
strong + .orion-icon {
  margin-left: 6px;
}

/* Rotates the shared chevron-down icon for expand/collapse affordances
   instead of swapping between two different glyphs (⌄/⌃). */
.orion-icon--rotated {
  transform: rotate(180deg);
}

.orion-input {
  width: 100%;
  border: 1px solid var(--hair2);
  border-radius: 10px;
  background: rgba(255,255,255,0.025);
  color: var(--text);
  font: 500 var(--fs-sm) var(--f-body);
  /* 44px, not 42 - the same "one shared component, one definition" fix
     A3 already applied to .orion-action (finding 04). Several views
     (Orbit, Gravity Well, Signal, Trajectory) had already patched this
     to 44px locally in their own mobile media queries because the base
     was 2px short; Profile and Mission Control never got that patch and
     stayed under the touch-target floor at every width. Fixing it here
     makes those per-view overrides redundant (harmless) instead of load-
     bearing, and closes the gap everywhere at once. */
  min-height: 44px;
  padding: 10px 12px;
}

/* ── Range slider — 44px hit area via the element's own box, track kept
   thin (finding 11 / B1.10: an 801×16 native range collapsed to its track
   height). The track/thumb are the only visible parts; the extra height is
   invisible padding-equivalent space around a 4px track. ── */
.orion-range {
  appearance: none;
  -webkit-appearance: none;
  background: transparent;
  cursor: pointer;
  flex: 1;
  min-height: 44px;
  min-width: 180px;
  padding: 0;
}
.orion-range::-webkit-slider-runnable-track {
  background: var(--hair2);
  border-radius: var(--r-full);
  height: 4px;
}
.orion-range::-webkit-slider-thumb {
  appearance: none;
  -webkit-appearance: none;
  background: var(--text);
  border-radius: 50%;
  height: 18px;
  margin-top: -7px;
  width: 18px;
}
.orion-range::-moz-range-track {
  background: var(--hair2);
  border-radius: var(--r-full);
  height: 4px;
}
.orion-range::-moz-range-thumb {
  background: var(--text);
  border: none;
  border-radius: 50%;
  height: 18px;
  width: 18px;
}

.orion-heatmap-wrap { overflow-x: auto; padding-bottom: 4px; }

/* Grid (not flex) so a month label can span the exact number of week-columns
   it covers via grid-column, matching the 14px/4px-gap pitch of the week
   grid below it. (finding 09) */
.orion-heatmap__months {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 14px;
  column-gap: 4px;
  margin-bottom: 6px;
}
.orion-heatmap__mon {
  font-family: var(--f-mono); font-size: var(--fs-micro); letter-spacing: 0.06em;
  color: var(--muted); text-transform: uppercase; white-space: nowrap;
  text-align: left;
}

.orion-heatmap__body { display: flex; align-items: flex-start; }
.orion-heatmap__days { display: flex; flex-direction: column; gap: 4px; width: 30px; padding-right: 6px; }
.orion-heatmap__day {
  height: 14px; line-height: 14px; text-align: right;
  font-family: var(--f-mono); font-size: var(--fs-micro); color: var(--muted);
}

.orion-heatmap {
  display: flex;
  gap: 4px;
}

.orion-heatmap__week {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

/* Daily-credit ramp: faint → pale-green → mid-green → solid green (GitHub-style). */
.orion-heatmap__cell {
  width: 14px;
  height: 14px;
  flex: 0 0 14px;
  border-radius: 3px;
  background: rgba(255,255,255,0.05);
  transition: transform 0.1s ease;
}
.orion-heatmap__cell:hover { transform: scale(1.25); outline: 1px solid var(--hair); }

.orion-heatmap__cell[data-level="1"] { background: rgba(255,255,255,0.12); }
.orion-heatmap__cell[data-level="2"] { background: rgba(255,255,255,0.35); }
.orion-heatmap__cell[data-level="3"] { background: rgba(255,255,255,0.65); }

.metric-list {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.metric-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 12px;
  /* finding 12 — label (Grotesk) and value (Mono) read as one phrase, so
     they share a text baseline instead of being centred against each
     other's differing font metrics. */
  align-items: baseline;
}

.metric-row__label {
  font-size: var(--fs-base);
  font-weight: 600;
}

.metric-row__value {
  font-family: var(--f-mono);
  font-size: var(--fs-xs);
  /* Match .metric-row__label's absolute line-height (not just its ratio) —
     align-items:baseline only lines up cleanly when both sides' line boxes
     are the same height, since it's the half-leading above each item's own
     box that shifts the baseline. */
  line-height: calc(var(--fs-base) * 1.6);
  color: var(--muted);
}

/* Shared row: a Grotesk label + a Mono action/CTA in one row (Command Deck's
   curriculum toggles, plan pickers, etc.). The button is a chip, not a
   reading-line word, so it keeps center; the label/eyebrow pairing beside
   it shares a baseline. */
.cur-base-row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 10px;
  font-size: var(--fs-sm);
  padding: 5px 0;
  border-bottom: 1px solid var(--hair);
}

.cur-base-row .orion-action {
  align-self: center;
}

@media (max-width: 900px) {
  .orion-split {
    grid-template-columns: 1fr;
  }
}

/* M9: Mobile hardening — image responsiveness */
img {
  max-width: 100%;
  height: auto;
}

/* M9: Respect reduced-motion preference */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}