/* eigenorg — visual pass (P5b) on the DESIGN.md Linear system.
   Near-black canvas, hairline-bordered charcoal panels, ONE lavender accent,
   a split system font stack (--font-display / --font-text, no webfont) with
   negative tracking on display sizes, mono reserved for run metadata (the
   reproducibility readout — this page's status/ID tokens). Nothing signals by
   color alone: states pair color with text, dashes or shape. */

:root {
  /* DESIGN.md colors */
  --color-primary: #5e6ad2;
  --color-primary-hover: #828fff;
  --color-primary-focus: #5e69d1;
  /* Focus ring (P10b §6.6): a brighter in-family lavender that clears contrast on
     the darker surface-2 setup/pane cards. In-family, no new hue. */
  --color-focus: var(--color-primary-hover);
  --color-ink: #f7f8f8;
  --color-ink-muted: #d0d6e0;
  --color-ink-subtle: #8a8f98;
  --color-ink-tertiary: #62666d;
  --color-canvas: #010102;
  --color-surface-1: #0f1011;
  --color-surface-2: #141516;
  --color-hairline: #23252a;
  --color-hairline-strong: #34343a;
  --color-success: #27a644;
  --color-error: #e5484d; /* semantic error; DESIGN.md marketing surface has none */

  /* Amber status for the "out of date" badge (spec §6). A FUNCTIONAL status
     colour like --color-success / --color-error — NOT a second brand accent;
     the stale signal is always carried by an icon + text, never colour alone. */
  --color-stale: #d9a441;

  /* DESIGN.md spacing rhythm (8px system) */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-6: 1.5rem;
  --space-8: 2rem;
  /* P10a warmth: more generous section rhythm for the two-altitude shell. */
  --space-10: 3rem;
  --space-12: 4rem;

  /* P10a warmth: slightly larger radii + soft depth on KEY panels only
     (doors, setup, the before/after story). Dense chart panels keep 8px. */
  --radius-md: 10px;
  --radius-lg: 12px;
  --radius-xl: 16px;
  --shadow-lift: 0 18px 48px -24px rgba(1, 1, 2, 0.9);
  --shadow-door: 0 24px 64px -32px rgba(1, 1, 2, 0.95);

  /* P10b §2d — depth that reads on OLED: light on the panel, not shadow under it.
     The lit top edge DESIGN.md called for but never shipped; a top-lit surface
     fill; and a key-panel elevation (edge highlight + honest minimal ambient).
     (--glow-hero + .landing::before are retired — atmosphere now localizes to the
     signature's seed glow, spec §2a.) */
  --edge-top: inset 0 1px 0 0 rgba(184, 192, 235, 0.09);
  --surface-door: linear-gradient(180deg, #18191a 0%, #0f1011 60%);
  --elev-key: var(--edge-top), 0 16px 40px -24px rgba(0, 0, 0, 0.55);
  --shadow-door-hover: 0 30px 72px -30px rgba(1, 1, 2, 0.98);

  /* P10b §2e — motion easing + durations (calm, ~40% faster than P10a). */
  --ease-out: cubic-bezier(0.16, 0.84, 0.44, 1); /* calm decel for entrances */
  --ease-emphasis: cubic-bezier(0.22, 1, 0.36, 1); /* the one signature settle */
  --ease-standard: cubic-bezier(0.4, 0, 0.2, 1); /* hover/press/color state */
  --dur-fade: 260ms;
  --dur-hover: 130ms;
  --dur-press: 90ms;

  /* P10b §2b — Font Option A: split system stacks (the phantom `Inter` lead is
     dropped — no font file was ever vendored). On Apple, -apple-system auto-picks
     SF Pro Display vs Text by size; Segoe UI Variable Display/Text gives Windows
     the same optical split. Tracking lives in `em` so it is correct on every face. */
  --font-display: -apple-system, BlinkMacSystemFont, "Segoe UI Variable Display", "Segoe UI", Roboto, system-ui, sans-serif;
  --font-text: -apple-system, BlinkMacSystemFont, "Segoe UI Variable Text", "Segoe UI", Roboto, system-ui, sans-serif;
  --font-mono: ui-monospace, "JetBrains Mono", "SF Mono", Menlo, Consolas, monospace;
}

* {
  box-sizing: border-box;
}

/* The `hidden` attribute must always win: several elements below carry a class
   that sets `display` (.landing grid, .stale-badge flex, .mode-content), and an
   equal-specificity author rule would otherwise beat the UA `[hidden]` rule and
   leave a "hidden" element on screen. */
[hidden] {
  display: none !important;
}

body {
  margin: 0;
  font-family: var(--font-text);
  line-height: 1.5;
  font-size: 16px;
  letter-spacing: -0.003em;
  color: var(--color-ink);
  background: var(--color-canvas);
}

main {
  max-width: 66rem;
  margin: 0 auto;
  padding: var(--space-8) var(--space-4) var(--space-6);
}

/* ---- header / footer ------------------------------------------------------ */

.page-header {
  margin-bottom: var(--space-8);
}

h1 {
  font-family: var(--font-display);
  font-size: 2rem;
  font-weight: 600;
  letter-spacing: -0.03em;
  line-height: 1.1;
  margin: 0 0 var(--space-2);
}

.framing {
  margin: 0;
  color: var(--color-ink-subtle);
  font-size: 0.875rem;
  max-width: 44rem;
}

.page-footer {
  max-width: 66rem;
  margin: var(--space-8) auto 0;
  padding: var(--space-4) var(--space-4) var(--space-8);
  border-top: 1px solid var(--color-hairline);
}

.page-footer .meta {
  margin: var(--space-2) 0 0;
}

/* ---- panels ---------------------------------------------------------------- */

.panel {
  background: var(--color-surface-1);
  border: 1px solid var(--color-hairline);
  border-radius: 8px;
  padding: var(--space-4) var(--space-6) var(--space-6);
  margin-bottom: var(--space-4);
}

/* P10b §2b — eyebrow AA fix: w600 / ink-subtle (~6.2:1, was ink-tertiary ~3.4:1)
   + em tracking. Makes the taxonomy layer visible and clears AA contrast. */
.eyebrow {
  margin: 0 0 var(--space-1);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--color-ink-subtle);
}

/* P10b §2b/C3 — panel headings 20 → 22px, em tracking: opens a real gap above
   the 17px subhead so the setup/results wall separates into levels. */
.panel h2 {
  font-family: var(--font-display);
  font-size: 1.375rem;
  font-weight: 600;
  letter-spacing: -0.018em;
  line-height: 1.2;
  margin: 0 0 var(--space-3);
}

/* ==================================================================== */
/* P10b §4d — plain-language layer: demoted .tech-label + inline ⓘ.      */
/* The plain lead is the h2; the technical term demotes below it; a      */
/* native-<details> ⓘ (the why-eigen idiom — keyboard + tap, never       */
/* hover-only) carries the curated blurb + an opt-in model deep-dive.    */
/* ==================================================================== */

/* The flow wrapper carrying data-term: the plain-lead <h2> + the ⓘ share line 1
   (baseline-aligned), the demoted .tech-label wraps to line 2 (flex-basis:100%).
   A flow element so the inserted <details> ⓘ is valid (it can't nest in an h2). */
.panel-title {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  margin: 0 0 var(--space-3);
}

.panel-title > h2 {
  margin: 0;
}

.panel-title > .tech-label {
  flex-basis: 100%;
}

/* The technical term, demoted below the plain lead (§2b): not uppercase,
   ink-subtle, block so it sits on its own line under the heading. */
.tech-label {
  display: block;
  margin-top: 2px;
  font-family: var(--font-text);
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: 0.02em;
  text-transform: none;
  color: var(--color-ink-subtle);
}

/* The inline ⓘ: a CSS-drawn serif "i" in a hairline circle (NOT an emoji —
   emoji picks up a system colour and breaks the single accent). */
.term-pop {
  position: relative;
  display: inline-block;
  vertical-align: middle;
  margin-left: 0.35em;
}

.term-info {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  border: 1px solid var(--color-hairline-strong);
  border-radius: 50%;
  font: italic 600 0.75rem/1 Georgia, 'Times New Roman', serif;
  color: var(--color-ink-subtle);
  cursor: pointer;
  list-style: none;
  user-select: none;
}

.term-info::-webkit-details-marker {
  display: none;
}

/* 44px tap target without disturbing inline layout (tap + keyboard). */
.term-info::after {
  content: '';
  position: absolute;
  inset: -13px;
}

.term-info:hover {
  color: var(--color-ink);
  border-color: var(--color-primary-hover);
}

.term-info:focus-visible {
  outline: 2px solid var(--color-focus);
  outline-offset: 2px;
}

.term-pop[open] > .term-info {
  color: var(--color-ink);
  border-color: var(--color-primary-hover);
}

/* Popover card — surface-2 hairline, mirrors .why-eigen-pop. Resets the
   heading's weight/casing/tracking so body copy reads as prose. */
.term-pop-body {
  position: absolute;
  z-index: 6;
  top: calc(100% + var(--space-1));
  left: 0;
  display: block;
  width: max-content;
  max-width: min(24rem, 82vw);
  padding: var(--space-3) var(--space-4);
  font-family: var(--font-text);
  font-size: 0.8125rem;
  font-weight: 400;
  line-height: 1.55;
  letter-spacing: normal;
  text-transform: none;
  color: var(--color-ink-muted);
  background: var(--color-surface-2);
  border: 1px solid var(--color-hairline-strong);
  border-radius: var(--radius-md);
  box-shadow: var(--elev-key);
  white-space: normal;
}

/* An OPEN ⓘ must paint above sibling panels (beta feedback: popovers rendered
   under adjacent cards). Panels create stacking contexts (z-index:1 on
   panel-lift/reveal surfaces), so a child's z-index can't cross them — lift
   the HOST panel's whole context while its popover is open. */
.panel:has(.term-pop[open]),
.pane-card:has(.term-pop[open]),
.setup:has(.term-pop[open]),
.approval-shell:has(.term-pop[open]) {
  position: relative;
  z-index: 30;
}

/* Right-column chart panels: open the popover leftward so it cannot overflow
   the viewport edge (audit PRE-FLIP; 2-up grid at desktop widths). */
.charts-grid > *:nth-child(even) .term-pop-body {
  left: auto;
  right: 0;
}

.term-pop-plain {
  display: block;
  color: var(--color-ink);
}

.term-pop-why {
  display: block;
  margin-top: var(--space-2);
}

.term-pop-why strong {
  color: var(--color-ink);
  font-weight: 600;
}

/* Opt-in quantitative layer — the drift-gated model plainLanguage. */
.term-pop-more {
  margin-top: var(--space-3);
}

.term-pop-more-summary {
  font-size: 0.75rem;
  color: var(--color-primary-hover);
  cursor: pointer;
  list-style: none;
}

.term-pop-more-summary::-webkit-details-marker {
  display: none;
}

.term-pop-more-summary::before {
  content: '▸ ';
}

.term-pop-more[open] > .term-pop-more-summary::before {
  content: '▾ ';
}

.term-pop-more-summary:focus-visible {
  outline: 2px solid var(--color-focus);
  outline-offset: 2px;
  border-radius: 4px;
}

.term-pop-more-body {
  display: block;
  margin-top: var(--space-1);
  color: var(--color-ink-subtle);
}

/* The approval-stack drawer-title carries its tech-label INLINE (the summary is
   a flex row; a block tech-label would break its baseline). */
.drawer-title .tech-label {
  display: inline;
  margin-left: 0.5em;
}

.panel-header {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-2);
  flex-wrap: wrap;
}

.meta {
  color: var(--color-ink-subtle);
  font-size: 0.75rem;
  margin: 0;
}

.mono {
  font-family: var(--font-mono);
  font-size: 0.9em;
}

.note {
  margin: 0 0 var(--space-4);
  font-size: 0.85rem;
  color: var(--color-ink-subtle);
  max-width: 46rem;
}

.meaning {
  margin: 0 0 var(--space-3);
  font-size: 0.875rem;
  color: var(--color-ink-muted);
  max-width: 46rem;
}

.empty-note {
  margin: var(--space-3) 0 0;
  font-size: 0.875rem;
  color: var(--color-ink-subtle);
  border: 1px dashed var(--color-hairline-strong);
  border-radius: 8px;
  padding: var(--space-3) var(--space-4);
}

.banner {
  border: 1px solid var(--color-hairline-strong);
  border-left: 3px solid var(--color-primary);
  background: var(--color-surface-1);
  border-radius: 8px;
  padding: var(--space-3) var(--space-4);
  margin-bottom: var(--space-4);
  font-size: 0.875rem;
  color: var(--color-ink-muted);
}

/* ---- run row / readout ------------------------------------------------------ */

.run-row {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  flex-wrap: wrap;
  margin-bottom: var(--space-3);
}

/* Default button = neutral ghost (§2a accent budget): full-strength lavender is
   reserved for the run CTAs, active/selected states, and the signature order
   line, so ordinary commands (Copy share link, Download card, Set Structural
   Health) sit at a quieter weight. Geometry unchanged from the P5b button. */
button {
  font: inherit;
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--color-ink);
  background: transparent;
  border: 1px solid var(--color-hairline-strong);
  border-radius: 8px;
  padding: 0.625rem 1.25rem;
  min-height: 44px; /* tappable target (PLAN P5 mobile acceptance) */
  min-width: 44px;
  cursor: pointer;
}

button:hover:not(:disabled) {
  background: var(--color-surface-2); /* brighten the surface, not a lavender fill */
}

/* The run CTAs are the ONE full-strength lavender in the app shell (§2a). The
   primary #run-button carries .cta; #run-button-2 ("Run again", in .run-strip)
   shares the fill though it is not sized as a .cta. */
.cta,
#run-button-2 {
  color: #ffffff;
  background: var(--color-primary);
  border-color: transparent;
}

.cta:hover:not(:disabled),
#run-button-2:hover:not(:disabled) {
  background: var(--color-primary-hover);
  border-color: transparent;
}

button:focus-visible {
  outline: 2px solid var(--color-focus);
  outline-offset: 2px;
}

button:disabled {
  opacity: 0.5;
  cursor: default;
}

button.ghost {
  background: transparent;
  border-color: var(--color-hairline-strong);
  color: var(--color-ink-muted);
}

button.ghost:hover:not(:disabled) {
  background: var(--color-surface-2);
  color: var(--color-ink);
}

progress {
  flex: 1 1 10rem;
  height: 8px;
  /* Filled track = low-alpha lavender (§2a), dialed back from the solid Run CTA
     so it is no longer a full-strength competitor. The live status text carries
     the run state in words, so the bar is never a colour-alone signal. */
  accent-color: rgba(94, 106, 210, 0.5);
}

.status {
  margin: 0;
  font-size: 0.875rem;
  color: var(--color-ink-muted);
  font-variant-numeric: tabular-nums;
  min-height: 1.3125rem; /* keep layout stable while text swaps */
}

.status.ok {
  color: var(--color-success);
}

.status.error {
  color: var(--color-error);
}

.readout {
  margin: var(--space-3) 0 0;
  font-family: var(--font-mono);
  font-size: 0.75rem;
  color: var(--color-ink-subtle);
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2) 0;
}

.readout span:not(:empty) {
  padding-right: var(--space-3);
  margin-right: var(--space-3);
  border-right: 1px solid var(--color-hairline);
}

.readout span:not(:empty):last-child {
  border-right: none;
}

/* ---- preset chips ------------------------------------------------------------ */

.chip-row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin-bottom: var(--space-3);
}

.chip {
  background: transparent;
  border: 1px solid var(--color-hairline-strong);
  color: var(--color-ink-muted);
  font-weight: 400;
  padding: 0.5rem 0.875rem;
}

.chip:hover:not(:disabled) {
  background: var(--color-surface-2);
  color: var(--color-ink);
}

.chip.active {
  border-color: var(--color-primary);
  background: rgba(94, 106, 210, 0.12);
  color: var(--color-ink);
  font-weight: 500;
}

.chip.active:hover:not(:disabled) {
  /* Class-completion (mirrors the R2-2 segmented fold): .chip:hover (0-3-1)
     out-specifies .chip.active (0-2-0), so an active preset chip loses its
     lavender fill on hover — re-assert the resting active tint. */
  border-color: var(--color-primary);
  background: rgba(94, 106, 210, 0.12);
  color: var(--color-ink);
}

/* Active state is border + weight + background — plus aria-pressed. */

/* ---- before/after pane ------------------------------------------------------- */

.pane-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-4);
}

@media (min-width: 640px) {
  .pane-grid {
    grid-template-columns: 1fr 1fr;
  }
}

/* Grid children must be allowed to shrink below their content width, or the
   Chart.js canvases pin the column width and force horizontal scroll. */
.pane-grid > *,
.charts-grid > *,
.controls-grid > * {
  min-width: 0;
}

.pane-card {
  background: var(--color-surface-2);
  border: 1px solid var(--color-hairline);
  border-radius: 8px;
  padding: var(--space-3) var(--space-4) var(--space-4);
}

.pane-card h3 {
  margin: 0 0 var(--space-2);
  font-size: 0.9375rem;
  font-weight: 500;
  letter-spacing: -0.1px;
  display: flex;
  align-items: center;
  gap: var(--space-2);
}

.tag {
  font-size: 0.6875rem;
  font-weight: 500;
  color: var(--color-primary-hover);
  border: 1px solid var(--color-primary);
  border-radius: 999px;
  padding: 0.0625rem 0.5rem;
  white-space: nowrap;
}

.stat-row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2) var(--space-6);
  margin: var(--space-3) 0 0;
}

.stat-row div {
  min-width: 7rem;
}

.stat-row dt {
  font-size: 0.6875rem;
  letter-spacing: 0.3px;
  text-transform: uppercase;
  color: var(--color-ink-subtle); /* AA batch (pre-flip audit): ink-tertiary 3.17:1 -> ink-subtle 5.63:1 */
  margin: 0 0 0.125rem;
}

.stat-row dd {
  margin: 0;
  font-family: var(--font-mono);
  font-size: 1rem;
  color: var(--color-ink);
  font-variant-numeric: tabular-nums;
}

/* ---- controls ------------------------------------------------------------------ */

.controls-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-4) var(--space-6);
}

@media (min-width: 640px) {
  .controls-grid {
    grid-template-columns: 1fr 1fr;
  }
}

@media (min-width: 1024px) {
  .controls-grid {
    grid-template-columns: 1fr 1fr 1fr;
  }
}

.field-label-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-2);
  margin-bottom: var(--space-2);
}

.field label {
  font-size: 0.8125rem;
  font-weight: 500;
  color: var(--color-ink-muted);
}

.field-value {
  font-family: var(--font-mono);
  font-size: 0.8125rem;
  color: var(--color-ink);
  font-variant-numeric: tabular-nums;
}

.field-hint {
  margin: var(--space-1) 0 0;
  font-size: 0.75rem;
  /* AA fix (P10b-2 repair-1 F8): ink-tertiary was ~3.3:1 on surface; ink-subtle
     clears AA for this small body text, matching the .eyebrow precedent. */
  color: var(--color-ink-subtle);
}

.field input[type='number'] {
  width: 100%;
  min-height: 44px;
  font: inherit;
  font-family: var(--font-mono);
  font-size: 0.875rem;
  color: var(--color-ink);
  background: var(--color-surface-2);
  border: 1px solid var(--color-hairline-strong);
  border-radius: 8px;
  padding: 0.5rem 0.75rem;
}

.field input[type='number']:focus-visible {
  outline: 2px solid var(--color-focus);
  outline-offset: 1px;
}

/* Range sliders: full-row 44px touch target, large thumb. */
.field input[type='range'] {
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  min-height: 44px;
  background: transparent;
  margin: 0;
  cursor: pointer;
}

.field input[type='range']:focus-visible {
  outline: 2px solid var(--color-focus);
  outline-offset: 2px;
  border-radius: 8px;
}

.field input[type='range']::-webkit-slider-runnable-track {
  height: 4px;
  border-radius: 2px;
  background: var(--color-hairline-strong);
}

.field input[type='range']::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 20px;
  height: 20px;
  margin-top: -8px;
  border-radius: 50%;
  background: var(--color-primary-hover);
  border: 2px solid var(--color-canvas);
}

.field input[type='range']::-moz-range-track {
  height: 4px;
  border-radius: 2px;
  background: var(--color-hairline-strong);
}

.field input[type='range']::-moz-range-thumb {
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: var(--color-primary-hover);
  border: 2px solid var(--color-canvas);
}

/* Segmented groups (topology, modality) */
.segmented {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-1);
  background: var(--color-surface-2);
  border: 1px solid var(--color-hairline);
  border-radius: 8px;
  padding: var(--space-1);
  width: fit-content;
  max-width: 100%;
}

.segmented button {
  background: transparent;
  border: 1px solid transparent; /* R2-1: base button border must not leak into the segmented track (mirrors .altitude-seg) */
  border-radius: 6px;
  color: var(--color-ink-subtle);
  font-weight: 400;
  padding: 0.5rem 0.75rem;
  min-height: 44px;
}

.segmented button:hover:not(:disabled) {
  color: var(--color-ink);
  background: var(--color-surface-1);
}

.segmented button.active {
  background: var(--color-primary);
  color: #ffffff;
  font-weight: 500;
}

.segmented button.active:hover:not(:disabled) {
  /* R2-2 class-completion (pre-existing on base): .segmented button:hover (0-3-1)
     out-specifies .active (0-2-1) — re-assert the RESTING fill + color on hover
     (primary-hover #828fff fails AA at 2.7:1 under 14px white; primary = 4.7:1). */
  background: var(--color-primary);
  color: #ffffff;
}

/* ---- charts ---------------------------------------------------------------------- */

.charts-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-4);
}

@media (min-width: 900px) {
  .charts-grid {
    grid-template-columns: 1fr 1fr;
  }

  .charts-grid .panel {
    margin-bottom: 0;
  }
}

.charts-grid + .panel {
  margin-top: var(--space-4);
}

.chart-box {
  position: relative;
  width: 100%;
  height: 280px;
}

.chart-box-sm {
  height: 200px;
}

.badge {
  font-size: 0.75rem;
  font-weight: 500;
  color: var(--color-ink-muted);
  border: 1px solid var(--color-hairline-strong);
  border-radius: 999px;
  padding: 0.125rem 0.625rem;
  white-space: nowrap;
}

.badge::before {
  content: '▲ ';
  color: var(--color-primary-hover);
}

/* ---- responsive / a11y -------------------------------------------------------------- */

@media (max-width: 480px) {
  main {
    padding: var(--space-6) var(--space-3) var(--space-6);
  }

  .panel {
    padding: var(--space-4);
  }

  .chart-box {
    height: 240px;
  }

  h1 {
    font-size: 1.625rem;
  }

  /* The bottleneck badge is the one unguarded horizontal-scroll vector on the
     smallest viewport: let it wrap instead of forcing the panel-header wider.
     The full text also repeats in the "what this means" sentence below. */
  .badge {
    white-space: normal;
  }
}

/* (button/.chip transitions are defined in the P10b §6.5 motion block below.) */

/* ==================================================================== */
/* P6 — Prioritization Layer Configurator (signature feature)          */
/* Mobile-first; DESIGN.md Linear tokens reused, none restated.        */
/* Nothing signals by color alone: seat types carry a shape glyph +    */
/* text label, the busiest seat + recovery state + comparison pills    */
/* all carry words/patterns.                                           */
/* ==================================================================== */

.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;
}

.configurator {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

/* ---- toolbar ---- */
.cfg-toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2) var(--space-3);
}

.cfg-count {
  font-family: var(--font-mono);
  font-size: 0.8125rem;
  color: var(--color-ink-subtle);
  font-variant-numeric: tabular-nums;
  margin-right: auto; /* pushes controls to the right; count stays fixed-left (E2) */
}

.cfg-btn {
  background: transparent;
  border-color: var(--color-hairline-strong);
  color: var(--color-ink-muted);
  font-weight: 500;
}

.cfg-btn:hover:not(:disabled) {
  background: var(--color-surface-2);
  color: var(--color-ink);
}

.cfg-compare {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  min-height: 44px;
  font-size: 0.8125rem;
  color: var(--color-ink-muted);
  cursor: pointer;
}

.cfg-compare input[type='checkbox'] {
  width: 20px;
  height: 20px;
  accent-color: var(--color-primary);
  cursor: pointer;
}

.cfg-compare input[type='checkbox']:focus-visible {
  outline: 2px solid var(--color-focus);
  outline-offset: 2px;
}

/* ---- the stack ---- */
.cfg-stack {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.cfg-layer {
  background: var(--color-surface-2);
  border: 1px solid var(--color-hairline);
  border-left: 3px solid var(--color-hairline-strong);
  border-radius: 8px;
  padding: var(--space-3) var(--space-4) var(--space-4);
}

.cfg-layer-head {
  display: flex;
  align-items: baseline;
  gap: var(--space-2);
  margin-bottom: var(--space-2);
}

.cfg-layer-num {
  font-size: 0.9375rem;
  font-weight: 600;
  letter-spacing: -0.1px;
  color: var(--color-ink);
}

.cfg-layer-flow {
  font-size: 0.6875rem;
  font-weight: 500;
  letter-spacing: 0.3px;
  text-transform: uppercase;
  color: var(--color-primary-hover);
  border: 1px solid var(--color-primary);
  border-radius: 999px;
  padding: 0.0625rem 0.5rem;
}

/* type radiogroup: 2-up on phones, 4-up from 640px */
.cfg-types {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-2);
}

@media (min-width: 640px) {
  .cfg-types {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

.cfg-type {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  min-height: 44px;
  background: var(--color-surface-1);
  border: 1px solid var(--color-hairline-strong);
  border-radius: 8px;
  color: var(--color-ink-subtle);
  font-weight: 400;
  padding: 0.5rem;
  text-align: center;
}

.cfg-type:hover:not(:disabled) {
  color: var(--color-ink);
  background: var(--color-surface-2);
}

.cfg-type.active {
  border-color: var(--color-primary);
  background: rgba(94, 106, 210, 0.16);
  color: var(--color-ink);
  font-weight: 600;
}

.cfg-type.active:hover:not(:disabled) {
  /* Class-completion (mirrors R2-2): .cfg-type:hover (0-3-1) out-specifies
     .cfg-type.active (0-2-0) — re-assert the active seat tint on hover. */
  border-color: var(--color-primary);
  background: rgba(94, 106, 210, 0.16);
  color: var(--color-ink);
}

.cfg-type:focus-visible {
  outline: 2px solid var(--color-focus);
  outline-offset: 2px;
}

.cfg-type-glyph {
  font-size: 0.75rem;
  color: var(--color-primary-hover);
}

.cfg-type-label {
  font-size: 0.75rem;
  line-height: 1.2;
}

.cfg-layer-desc {
  margin: var(--space-3) 0 0;
  font-size: 0.8125rem;
  color: var(--color-ink-subtle);
}

/* ---- recovery indicator (read-only) ---- */
.cfg-recovery {
  display: flex;
  align-items: flex-start;
  gap: var(--space-2);
  border: 1px solid var(--color-hairline-strong);
  border-left: 3px solid var(--color-ink-tertiary);
  border-radius: 8px;
  padding: var(--space-3) var(--space-4);
  font-size: 0.8125rem;
  color: var(--color-ink-muted);
}

.cfg-recovery.owned {
  border-left-color: var(--color-success);
}

.cfg-recovery.unowned {
  border-left-color: var(--color-primary);
}

.cfg-recovery-icon {
  font-size: 1rem;
  line-height: 1.2;
}

/* ---- subheads for the flow + legibility blocks ---- */
.cfg-subhead {
  font-size: 0.9375rem;
  font-weight: 600;
  letter-spacing: -0.1px;
  color: var(--color-ink);
  margin: 0 0 var(--space-2);
}

.cfg-pending {
  margin: 0;
  font-size: 0.8125rem;
  color: var(--color-ink-subtle);
}

/* ---- flow diagram (semantic table) ---- */
.cfg-flow-scroll {
  overflow-x: auto; /* wide table scrolls itself, never the page body (E3) */
  margin-top: var(--space-2);
}

.cfg-flow-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.8125rem;
  min-width: 34rem; /* keeps 7 columns legible; the wrapper scrolls on phones */
}

.cfg-flow-caption {
  caption-side: bottom;
  text-align: left;
  margin-top: var(--space-2);
  font-size: 0.75rem;
  color: var(--color-ink-subtle); /* AA batch (pre-flip audit): ink-tertiary 3.17:1 -> ink-subtle 5.63:1 */
}

.cfg-flow-table th,
.cfg-flow-table td {
  padding: var(--space-2) var(--space-3);
  text-align: left;
  border-bottom: 1px solid var(--color-hairline);
  font-variant-numeric: tabular-nums;
}

.cfg-flow-table thead th {
  font-size: 0.6875rem;
  letter-spacing: 0.3px;
  text-transform: uppercase;
  color: var(--color-ink-subtle); /* AA batch (pre-flip audit): ink-tertiary 3.17:1 -> ink-subtle 5.63:1 */
  font-weight: 500;
}

.cfg-flow-table td {
  color: var(--color-ink-muted);
  font-family: var(--font-mono);
}

.cfg-flow-table tbody th[scope='row'] {
  font-family: var(--font-mono);
  color: var(--color-ink);
  font-weight: 600;
}

.cfg-flow-seat {
  font-family: var(--font-text);
}

.cfg-flow-busiest {
  background: rgba(94, 106, 210, 0.08);
}

.cfg-flow-busiest th[scope='row'] {
  box-shadow: inset 3px 0 0 0 var(--color-primary); /* pattern cue, not color-alone: paired with the text badge */
}

.cfg-busiest-badge {
  display: inline-block;
  margin-left: var(--space-2);
  font-family: var(--font-text);
  font-size: 0.625rem;
  font-weight: 600;
  letter-spacing: 0.3px;
  text-transform: uppercase;
  color: var(--color-primary-hover);
  border: 1px solid var(--color-primary);
  border-radius: 999px;
  padding: 0.0625rem 0.4375rem;
}

.cfg-flow-util {
  position: relative;
  min-width: 5rem;
}

.cfg-util-num {
  position: relative;
  z-index: 1;
}

.cfg-util-bar {
  position: absolute;
  left: var(--space-3);
  right: var(--space-3);
  bottom: 4px;
  height: 3px;
  /* Utilization is pure data-viz, not one of §2a's sanctioned lavender
     surfaces, so the bar is neutral ink — the accent stays on the busiest-row
     cue. The .cfg-util-num readout carries the value (never colour-alone). */
  background: var(--color-ink-subtle);
  border-radius: 2px;
  max-width: calc(100% - var(--space-6));
}

/* ---- legibility comparison ---- */
.cfg-leg-body {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  margin-bottom: var(--space-3);
}

.cfg-cmp-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2) var(--space-3);
}

.cfg-cmp-label {
  flex: 1 1 12rem;
  font-size: 0.8125rem;
  color: var(--color-ink-muted);
}

.cfg-cmp-pill {
  display: inline-flex;
  flex-direction: column;
  gap: 0.0625rem;
  padding: 0.25rem 0.625rem;
  border-radius: 8px;
  background: var(--color-surface-2);
  border: 1px solid var(--color-hairline-strong);
  min-width: 6.5rem;
}

/* Pattern distinction (not color-alone): AI = solid accent edge, all-human = dashed edge; each also carries its tag word. */
.cfg-cmp-ai {
  border-left: 3px solid var(--color-primary);
}

.cfg-cmp-human {
  border-left: 3px dashed var(--color-ink-subtle);
}

.cfg-cmp-tag {
  font-size: 0.625rem;
  letter-spacing: 0.3px;
  text-transform: uppercase;
  color: var(--color-ink-subtle); /* AA batch (pre-flip audit): ink-tertiary 3.17:1 -> ink-subtle 5.63:1 */
}

.cfg-cmp-val {
  font-family: var(--font-mono);
  font-size: 0.9375rem;
  color: var(--color-ink);
  font-variant-numeric: tabular-nums;
}

.cfg-leg-sentence {
  margin: 0;
  font-size: 0.875rem;
  color: var(--color-ink-muted);
  max-width: 46rem;
}

/* ==================================================================== */
/* P8 — Model Assumptions drawer                                        */
/* Rendered verbatim from www/assumptions.json; native <details> for    */
/* keyboard + screen-reader operability. Tiers are TEXT, never colour-  */
/* alone. DESIGN.md Linear tokens reused, none restated.                */
/* ==================================================================== */

.drawer {
  border: 1px solid var(--color-hairline);
  border-radius: 8px;
  background: var(--color-surface-2);
}

.drawer > summary.drawer-summary {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--space-2) var(--space-3);
  padding: var(--space-3) var(--space-4);
  min-height: 44px;
  cursor: pointer;
  list-style: none;
  border-radius: 8px;
}

.drawer > summary.drawer-summary::-webkit-details-marker {
  display: none;
}

.drawer > summary.drawer-summary::before {
  content: '▸';
  content: '▸' / ''; /* empty alt text: decorative marker, kept out of the summary's accessible name */
  color: var(--color-ink-subtle);
  margin-right: var(--space-1);
}

.drawer[open] > summary.drawer-summary::before {
  content: '▾';
  content: '▾' / '';
}

.drawer > summary.drawer-summary:hover {
  background: var(--color-surface-1);
}

.drawer > summary.drawer-summary:focus-visible {
  outline: 2px solid var(--color-focus);
  outline-offset: -2px;
}

.drawer-title {
  font-size: 0.9375rem;
  font-weight: 600;
  color: var(--color-ink);
}

.drawer-count {
  font-family: var(--font-mono);
  font-size: 0.75rem;
  color: var(--color-ink-subtle);
  font-variant-numeric: tabular-nums;
  margin-right: auto;
}

.drawer-note {
  margin: 0;
  padding: 0 var(--space-4) var(--space-3);
  font-size: 0.8125rem;
  color: var(--color-ink-subtle);
  max-width: 46rem;
}

.assum-group {
  padding: 0 var(--space-4) var(--space-3);
}

.assum-group-head {
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.4px;
  text-transform: uppercase;
  color: var(--color-ink-subtle); /* AA batch (pre-flip audit): ink-tertiary 3.17:1 -> ink-subtle 5.63:1 */
  margin: var(--space-3) 0 var(--space-2);
}

.assum-item {
  border-top: 1px solid var(--color-hairline);
}

.assum-summary {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-1);
  min-height: 44px;
  cursor: pointer;
  list-style: none;
}

.assum-summary::-webkit-details-marker {
  display: none;
}

.assum-summary::before {
  content: '+';
  content: '+' / ''; /* R2-3: decorative — keep out of the summary's accessible name (same class as .cta/.drawer-summary) */
  color: var(--color-ink-tertiary);
  font-family: var(--font-mono);
  width: 1rem;
}

.assum-item[open] > .assum-summary::before {
  content: '−';
  content: '−' / '';
}

.assum-summary:hover {
  color: var(--color-ink);
}

.assum-summary:focus-visible {
  outline: 2px solid var(--color-focus);
  outline-offset: -2px;
  border-radius: 4px;
}

.assum-id {
  font-family: var(--font-mono);
  font-size: 0.8125rem;
  color: var(--color-ink);
}

/* Tier badge: the WORD is the signal (never colour-alone). The border tint is
   a secondary, redundant cue only. */
.assum-tier {
  font-size: 0.625rem;
  font-weight: 500;
  letter-spacing: 0.3px;
  text-transform: uppercase;
  color: var(--color-ink-muted);
  border: 1px solid var(--color-hairline-strong);
  border-radius: 999px;
  padding: 0.0625rem 0.5rem;
  white-space: nowrap;
}

.assum-tier[data-tier='peer-reviewed'] {
  border-color: var(--color-success);
  color: var(--color-success);
}

.assum-tier[data-tier='industry-report'] {
  border-color: var(--color-primary);
  color: var(--color-primary-hover);
}

.assum-body {
  padding: 0 var(--space-1) var(--space-3) 1rem;
}

.assum-plain {
  margin: 0 0 var(--space-2);
  font-size: 0.8125rem;
  color: var(--color-ink-muted);
  max-width: 46rem;
}

.assum-meta {
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
}

.assum-meta-row {
  display: grid;
  grid-template-columns: 6rem 1fr;
  gap: var(--space-2);
}

.assum-meta-label {
  font-size: 0.6875rem;
  letter-spacing: 0.3px;
  text-transform: uppercase;
  color: var(--color-ink-subtle); /* AA batch (pre-flip audit): ink-tertiary 3.17:1 -> ink-subtle 5.63:1 */
  margin: 0;
}

.assum-meta-value {
  margin: 0;
  font-size: 0.75rem;
  color: var(--color-ink-muted);
  font-family: var(--font-mono);
  overflow-wrap: anywhere;
}

.assum-sublabel {
  font-size: 0.6875rem;
  letter-spacing: 0.3px;
  text-transform: uppercase;
  color: var(--color-ink-subtle); /* AA batch (pre-flip audit): ink-tertiary 3.17:1 -> ink-subtle 5.63:1 */
  margin: var(--space-3) 0 var(--space-1);
}

.assum-cites {
  margin: 0;
  padding-left: 1.1rem;
  font-size: 0.75rem;
  color: var(--color-ink-subtle);
}

.assum-cites li {
  margin-bottom: var(--space-1);
  overflow-wrap: anywhere;
}

/* ==================================================================== */
/* P8 — Structural-Health onboarding diagnostic                        */
/* Non-modal panel, shown once after the first result. fieldset/legend  */
/* radio groups (keyboard + screen-reader native); nothing colour-alone.*/
/* ==================================================================== */

/* ==================================================================== */
/* P10b §5 — optional inline Structural-Health helper (the single         */
/* SH-configuration surface; the P8 post-result auto-offer is retired).   */
/* The .diagnostic-* form styles below are REPURPOSED for the expander.   */
/* ==================================================================== */

/* Plain-lead wrapper carrying data-term (the ⓘ mounts here, before the
   .tech-label). A flow div so the inline ⓘ <details> is valid; flow-flex so the
   label + ⓘ share line 1 and the demoted .tech-label wraps to line 2. */
.field-lead {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  min-width: 0;
}

.field-lead > .tech-label {
  flex-basis: 100%;
}

/* Directional anchors under the SH slider — a bare "N" carries no direction.
   Non-judgmental (strained / sound). AA at 11px via ink-subtle. */
.field-anchors {
  display: flex;
  justify-content: space-between;
  margin-top: var(--space-1);
  font-size: 0.6875rem;
  color: var(--color-ink-subtle);
}

.sh-helper {
  margin-top: var(--space-3);
}

/* Text-button affordance ("Not sure? …"), 44px tap target, subordinate to the
   Run CTA — the in-family lavender-hover, not a filled button. */
.link-btn {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 0;
  font: inherit;
  font-size: 0.8125rem;
  color: var(--color-primary-hover);
  background: none;
  border: none;
  text-align: left;
  text-decoration: underline dotted;
  text-underline-offset: 3px;
  cursor: pointer;
}

.link-btn:focus-visible {
  outline: 2px solid var(--color-focus);
  outline-offset: 2px;
  border-radius: 4px;
}

.sh-helper-panel {
  margin-top: var(--space-3);
  padding: var(--space-4);
  background: var(--color-surface-2);
  border: 1px solid var(--color-hairline);
  border-radius: var(--radius-md);
}

.sh-helper-panel[hidden] {
  display: none;
}

.diagnostic-intro {
  margin: 0 0 var(--space-4);
  font-size: 0.875rem;
  color: var(--color-ink-subtle);
  max-width: 46rem;
}

.diagnostic-form {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

.diagnostic-q {
  border: 1px solid var(--color-hairline);
  border-radius: 8px;
  padding: var(--space-3) var(--space-4) var(--space-4);
  margin: 0;
  min-width: 0;
}

.diagnostic-legend {
  padding: 0;
  display: block;
}

.diagnostic-dim {
  display: block;
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.4px;
  text-transform: uppercase;
  color: var(--color-primary-hover);
  margin-bottom: var(--space-1);
}

.diagnostic-question {
  display: block;
  font-size: 0.9375rem;
  color: var(--color-ink);
  margin-bottom: var(--space-3);
}

.diagnostic-options {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-2);
}

@media (min-width: 640px) {
  .diagnostic-options {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

/* Inside the narrow inline SH helper the 3-across layout clips its own labels
   ("Somewhere in between" → "Some in bet") — the breakpoint keys off VIEWPORT
   width, but the helper panel is ~19rem wide at any viewport. Stay one-per-row
   there (pre-flip audit + beta feedback). */
.sh-helper .diagnostic-options {
  grid-template-columns: 1fr;
}

.diagnostic-option {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  min-height: 44px;
  padding: var(--space-2) var(--space-3);
  background: var(--color-surface-2);
  border: 1px solid var(--color-hairline-strong);
  border-radius: 8px;
  cursor: pointer;
  font-size: 0.8125rem;
  color: var(--color-ink-muted);
}

.diagnostic-option:hover {
  color: var(--color-ink);
  border-color: var(--color-primary-focus);
}

.diagnostic-option input[type='radio'] {
  width: 20px;
  height: 20px;
  accent-color: var(--color-primary);
  flex: none;
  cursor: pointer;
}

.diagnostic-option input[type='radio']:focus-visible {
  outline: 2px solid var(--color-focus);
  outline-offset: 2px;
}

/* Checked state = accent border + weight (never colour-alone: the radio dot +
   the label text carry it too). :has() is well-supported; the radio dot is the
   primary cue regardless. */
.diagnostic-option:has(input:checked) {
  border-color: var(--color-primary);
  background: rgba(94, 106, 210, 0.12);
  color: var(--color-ink);
  font-weight: 500;
}

.diagnostic-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  margin-top: var(--space-2);
}

/* ==================================================================== */
/* P8 — output / share card                                            */
/* The canvas backing store is 1200×628 (the exported PNG size); CSS    */
/* scales the preview down to fit the column.                           */
/* ==================================================================== */

.card-preview {
  margin-bottom: var(--space-4);
}

.card-preview canvas {
  display: block;
  width: 100%;
  height: auto;
  max-width: 100%;
  border: 1px solid var(--color-hairline);
  border-radius: 8px;
}

/* ==================================================================== */
/* P10a — two-altitude shell: landing doors, altitude toggle, setup     */
/* strip, results bar, warmth (depth/radii/spacing) + quiet motion.     */
/* Refined Linear per DESIGN.md; single accent; no new decorative hue.  */
/* Nothing signals by colour alone (active door + stale both carry a     */
/* non-colour cue). All motion honours prefers-reduced-motion.          */
/* ==================================================================== */

/* ---- soft depth on KEY panels only (setup/story; spec §2d) — top-lit surface
   + key elevation. Dense chart panels stay flat surface-1 (restraint). ---- */
.panel-lift {
  background: var(--surface-door);
  border-radius: var(--radius-lg);
  box-shadow: var(--elev-key);
}

/* ---- landing: anchored hero + signature + two doors (spec §4a) ---- */
/* A slim rail gives the page a top edge; the signature gives the composition
   horizontal mass — together they kill the centered "float". No page-level glow:
   atmosphere now localizes to the signature's seed (--glow-hero retired). */
.landing {
  position: relative;
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  padding: var(--space-8) var(--space-4) var(--space-10);
  overflow: hidden;
}

.landing-inner {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 66rem;
  margin: 0 auto;
  text-align: left;
}

/* Rail — anchors the top edge: wordmark left, in-browser reassurance right. */
.landing-rail {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-3);
  flex-wrap: wrap;
  margin-bottom: var(--space-10);
}

.brand-mark {
  margin: 0;
  font-family: var(--font-display);
  font-size: 1.0625rem;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--color-ink);
}

.brand-mid {
  margin: 0 0.05em;
  color: var(--color-ink-subtle);
}

/* Decorative lavender on "org" — grayscale-safe (meaning carried by the descriptor). */
.brand-org {
  color: var(--color-primary);
}

.landing-stat {
  margin: 0;
  font-family: var(--font-mono);
  font-size: 0.75rem;
  letter-spacing: 0.01em;
  /* ink-subtle (~6.2:1), not the spec's ink-tertiary (~3.4:1) — clears AA for this
     12px reassurance text, consistent with the eyebrow AA fix (§2b). */
  color: var(--color-ink-subtle);
}

/* Hero: asymmetric split — copy left, signature right (≥960px); stacked below. */
.hero-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-6);
  align-items: center;
}

@media (min-width: 960px) {
  .hero-grid {
    grid-template-columns: minmax(0, 30rem) minmax(0, 1fr);
    gap: var(--space-10);
  }
}

.hero-copy {
  min-width: 0;
}

.hero-descriptor {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: var(--space-1) var(--space-3);
  margin: 0 0 var(--space-4);
}

.hero-descriptor-text {
  font-size: clamp(1rem, 0.5vw + 0.9rem, 1.125rem);
  line-height: 1.5;
  letter-spacing: -0.006em;
  color: var(--color-ink-muted);
}

/* "why eigen?" — a self-contained native <details> popover (tap / keyboard). */
.why-eigen {
  position: relative;
  display: inline-block;
}

.why-eigen-summary {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  font-size: 0.8125rem;
  color: var(--color-primary-hover);
  text-decoration: underline dotted;
  text-underline-offset: 3px;
  cursor: pointer;
  list-style: none;
  white-space: nowrap;
}

.why-eigen-summary::-webkit-details-marker {
  display: none;
}

.why-eigen-summary:focus-visible {
  outline: 2px solid var(--color-focus);
  outline-offset: 2px;
  border-radius: 4px;
}

.why-eigen-pop {
  position: absolute;
  z-index: 5;
  top: calc(100% + var(--space-1));
  left: 0;
  display: block;
  width: max-content;
  max-width: min(22rem, 80vw);
  padding: var(--space-3) var(--space-4);
  font-size: 0.8125rem;
  line-height: 1.55;
  color: var(--color-ink-muted);
  background: var(--color-surface-2);
  border: 1px solid var(--color-hairline-strong);
  border-radius: var(--radius-md);
  box-shadow: var(--elev-key);
}

.landing-title {
  margin: 0 0 var(--space-4);
  max-width: 16ch;
  font-family: var(--font-display);
  font-size: clamp(2.5rem, 3.6vw + 1.4rem, 4rem);
  font-weight: 600;
  line-height: 1.04;
  letter-spacing: -0.032em;
  color: var(--color-ink);
}

.landing-lede {
  margin: 0;
  max-width: 34rem;
  font-size: clamp(1rem, 0.5vw + 0.9rem, 1.125rem);
  line-height: 1.55;
  letter-spacing: -0.006em;
  color: var(--color-ink-muted);
}

/* The Divergence signature. Base state fully drawn (reduced-motion safe); the
   one-time draw lives in the motion section (§6.2). The bands + medians ARE the
   spec (order settles low/narrow lavender; disorder frays up/wide grey). */
.hero-signature {
  min-width: 0;
}

.hero-divergence {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 56 / 34;
}

.median {
  fill: none;
  stroke-linecap: round;
}

.median-ord {
  stroke: var(--color-primary);
  stroke-width: 2.25;
  opacity: 0.92;
}

.median-dis {
  stroke: var(--color-ink-subtle);
  stroke-width: 1.5;
  opacity: 0.5;
}

.band-ord {
  fill: rgba(94, 106, 210, 0.1);
}

.band-dis {
  fill: rgba(247, 248, 248, 0.05);
}

.seed {
  fill: var(--color-primary);
}

/* Connective line above the doors. */
.landing-connective {
  margin: var(--space-12) 0 var(--space-6);
  max-width: 46rem;
  font-size: 0.9375rem;
  color: var(--color-ink-subtle);
}

.landing-foot {
  margin: var(--space-10) 0 0;
  max-width: 46rem;
  text-align: left;
}

/* Broken-shared-link notice on the landing (BLOCKER B). Amber FUNCTIONAL status
   colour + icon + text — never colour alone. Left-aligned block on the anchored
   (no longer centered) landing. */
.landing-notice {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  margin: 0 0 var(--space-6);
  padding: var(--space-3) var(--space-4);
  max-width: 46rem;
  font-size: 0.9375rem;
  text-align: left;
  color: var(--color-stale);
  background: rgba(217, 164, 65, 0.08);
  border: 1px solid rgba(217, 164, 65, 0.35);
  border-radius: var(--radius-md);
}

.landing-notice-icon {
  flex: none;
  font-size: 1rem;
  line-height: 1;
}

.door-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-4);
  text-align: left;
}

@media (min-width: 720px) {
  .door-grid {
    grid-template-columns: 1fr 1fr;
    gap: var(--space-6);
  }
}

/* A door is a big tappable card that doubles as the explainer. Full override of
   the primary-button base (transparent surface, not the accent fill). */
/* P10b §2d — top-lit door material (reads on OLED) + warm accent hairline (the
   same lavender at low alpha — no second hue) + key elevation (edge highlight +
   honest minimal ambient). */
.door {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-2);
  min-height: 0;
  padding: var(--space-8);
  text-align: left;
  color: var(--color-ink);
  background: var(--surface-door);
  border: 1px solid rgba(94, 106, 210, 0.16);
  border-radius: var(--radius-xl);
  box-shadow: var(--elev-key);
  cursor: pointer;
}

.door:hover:not(:disabled) {
  background: var(--surface-door); /* LOW fold: re-assert the top-lit gradient — base button:hover would flatten it to surface-2 */
  border-color: var(--color-primary);
  /* The hover LIFT (transform) + deeper shadow are motion — they live in the
     reduced-motion guard below (§6.5); the border warm-up stays here. */
}

.door:focus-visible {
  outline: 2px solid var(--color-focus);
  outline-offset: 3px;
}

.door-icon {
  font-size: 2rem;
  line-height: 1;
  margin-bottom: var(--space-2);
}

.door-label {
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--color-primary-hover);
}

.door-question {
  font-family: var(--font-display);
  font-size: 1.375rem;
  font-weight: 600;
  letter-spacing: -0.018em;
  line-height: 1.2;
  color: var(--color-ink);
}

.door-desc {
  font-size: 0.9375rem;
  line-height: 1.55;
  color: var(--color-ink-subtle);
}

.door-enter {
  margin-top: var(--space-2);
  font-size: 0.8125rem;
  font-weight: 500;
  color: var(--color-primary-hover);
}

.door-enter::after {
  content: ' \2192';
}

/* ---- shell: persistent altitude bar + segmented toggle (spec section 4) ---- */
.altitude-bar {
  position: sticky;
  top: 0;
  z-index: 10;
  display: flex;
  align-items: center;
  gap: var(--space-3);
  flex-wrap: wrap;
  max-width: 66rem;
  margin: 0 auto;
  padding: var(--space-3) var(--space-4);
  background: color-mix(in srgb, var(--color-canvas) 88%, transparent);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--color-hairline);
}

.altitude-brand {
  font-size: 0.9375rem;
  font-weight: 600;
  letter-spacing: -0.2px;
  color: var(--color-ink);
}

.altitude-toggle {
  display: flex;
  gap: var(--space-1);
  padding: var(--space-1);
  margin: 0 auto 0 var(--space-2);
  background: var(--color-surface-1);
  border: 1px solid var(--color-hairline);
  border-radius: var(--radius-md);
}

/* Segment: full override of the primary-button base. Active = accent fill +
   weight + underline + aria-current (never colour alone). */
.altitude-seg {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  min-height: 40px;
  padding: 0.375rem 0.875rem;
  background: transparent;
  border: 1px solid transparent;
  border-radius: 6px;
  color: var(--color-ink-subtle);
  font-weight: 400;
}

.altitude-seg:hover:not(.active) {
  color: var(--color-ink);
  background: var(--color-surface-2);
}

.altitude-seg.active {
  background: var(--color-primary);
  color: #ffffff;
  font-weight: 600;
  box-shadow: inset 0 -2px 0 0 rgba(255, 255, 255, 0.5); /* underline cue, not colour-alone */
}

.altitude-seg.active:hover:not(:disabled) {
  /* R2-2: keep the selected fill on hover — the neutral base button:hover (0-2-1)
     would otherwise out-specify .altitude-seg.active and flicker it dark. Resting
     primary, not primary-hover: #828fff fails AA (2.87:1) under the white label. */
  background: var(--color-primary);
}

.altitude-seg:focus-visible {
  outline: 2px solid var(--color-focus);
  outline-offset: 2px;
}

.altitude-seg-icon {
  font-size: 0.9375rem;
}

.altitude-restart {
  flex: none;
}

/* ---- mode content ---- */
.mode-content[hidden] {
  display: none;
}

/* P10b §2c — chunked rhythm: more air below the intro before the setup wall. */
.mode-intro {
  margin: var(--space-8) 0 var(--space-10);
}

.mode-title {
  margin: var(--space-1) 0 var(--space-3);
  font-family: var(--font-display);
  font-size: clamp(1.75rem, 2.5vw + 1rem, 2.25rem);
  font-weight: 600;
  letter-spacing: -0.022em;
  line-height: 1.08;
  color: var(--color-ink);
}

.mode-sub {
  margin: 0;
  max-width: 34rem;
  font-size: clamp(1rem, 0.5vw + 0.9rem, 1.125rem);
  line-height: 1.55;
  letter-spacing: -0.006em;
  color: var(--color-ink-muted);
}

/* ---- setup panel (collapses to the "Your setup" chips, spec section 6) ---- */
.setup {
  padding: var(--space-8);
}

.setup-summary-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-3);
  margin-bottom: var(--space-3);
}

.setup-chips {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
}

.setup-chip {
  display: inline-flex;
  align-items: baseline;
  gap: 0.375rem;
  padding: 0.3125rem 0.625rem;
  font-size: 0.8125rem;
  color: var(--color-ink);
  background: var(--color-surface-2);
  border: 1px solid var(--color-hairline-strong);
  border-radius: var(--radius-md);
}

.setup-chip-key {
  font-size: 0.6875rem;
  letter-spacing: 0.3px;
  text-transform: uppercase;
  color: var(--color-ink-subtle); /* AA batch (pre-flip audit): ink-tertiary 3.17:1 -> ink-subtle 5.63:1 */
}

.setup-body[hidden] {
  display: none;
}

/* P10b §2c — chunked rhythm: loose between sub-groups (32 margin + 24 pad-top). */
.setup-group {
  margin-top: var(--space-8);
  padding-top: var(--space-6);
  border-top: 1px solid var(--color-hairline);
}

/* Primary CTA: larger tap target + a quiet breathing focus halo (spec §6.6). */
.cta {
  font-size: 1rem;
  font-weight: 600;
  padding: 0.875rem 1.75rem;
  min-height: 52px;
}

/* ---- P10b §4b: setup précis + run dock + progressive disclosure ---- */
.org-precis {
  margin: var(--space-4) 0;
  font-size: 1rem;
  line-height: 1.6;
  color: var(--color-ink-muted);
  max-width: 46rem;
}

/* Editable values in the précis: bold ink — NOT lavender (the accent stays
   reserved for the Run CTA + the signature order-line, §C6). */
.org-precis strong {
  font-weight: 600;
  color: var(--color-ink);
}

/* Run dock (M4): the promoted #run-button, framed top+bottom by a hairline.
   Desktop in-flow; mobile sticky-bottom (see the ≤560px block). */
.setup-run-dock {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  flex-wrap: wrap;
  margin: var(--space-6) 0;
  padding: var(--space-4) 0;
  border-top: 1px solid var(--color-hairline);
  border-bottom: 1px solid var(--color-hairline);
}

/* Play glyph — survives main.js's textContent / data-run-label swap. The '/ '''
   alternative-text form keeps it out of the CTA's accessible name (engines
   without the '/' syntax fall back to the first, glyph-only declaration). */
.setup-run-dock .cta::before {
  content: '\25B6';
  content: '\25B6' / '';
  margin-right: 0.5em;
  font-size: 0.85em;
}

.run-dock-caption {
  font-size: 0.8125rem;
  color: var(--color-ink-subtle);
}

/* "Tune your org · optional" — the eyebrow is uppercase; the optional tag resets. */
.optional-tag {
  font-weight: 500;
  letter-spacing: 0;
  text-transform: none;
  color: var(--color-ink-subtle);
}

/* Approval-stack drawer: live value + optional tag in the summary (M5). */
.drawer-value {
  font-family: var(--font-mono);
  font-size: 0.75rem;
  color: var(--color-ink-subtle);
  font-variant-numeric: tabular-nums;
}

.drawer-optional {
  margin-left: auto;
  font-size: 0.6875rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--color-ink-subtle); /* AA at 11px: ink-subtle 5.63:1, matching .optional-tag (was ink-tertiary 3.17:1) */
}

.approval-drawer .drawer-body {
  padding: 0 var(--space-4) var(--space-4);
}

/* F9 — the approval-stack ⓘ. glossary.decorate mounts it as a sibling of the
   drawer <details> inside this relative shell (a <details> ⓘ can't nest in a
   <summary>, and content after the summary is hidden while the drawer is closed),
   so it stays visible open or closed. It floats into the summary row's top-right;
   the summary reserves padding-right so it never overlaps the "optional" tag
   (which is pushed right by margin-left:auto). */
.approval-shell {
  position: relative;
}

.approval-drawer > summary.drawer-summary {
  /* reserve a lane on the right for the absolutely-positioned ⓘ */
  padding-right: calc(var(--space-4) + 1.75rem);
}

.approval-shell > .term-pop {
  position: absolute;
  top: var(--space-3);
  right: var(--space-4);
  z-index: 5;
}

/* Right-edge ⓘ → open its popover leftward so it can't overflow the viewport. */
.approval-shell > .term-pop > .term-pop-body {
  left: auto;
  right: 0;
}

/* Gate the results-shaped blocks (Prioritization flow, AI-seat-vs-all-human) on
   hasRun (main.js toggles .pre-run) so they never sit empty in the setup. */
.approval-drawer.pre-run .cfg-flow,
.approval-drawer.pre-run .cfg-legibility {
  display: none;
}

/* ---- run strip (always visible) + gated results (spec section 6, BLOCKER A) ---- */
/* The run feedback + persistent actions live in .run-strip, OUTSIDE #org-results,
   so first-run progress/status show while #org-results stays gated on hasRun. */
.run-strip {
  margin: var(--space-10) 0 var(--space-8);
}

.results {
  margin-top: 0;
}

.results-actions {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  flex-wrap: wrap;
  margin-bottom: var(--space-3);
}

.results-actions progress {
  flex: 1 1 10rem;
}

/* Stale badge: amber STATUS colour + icon + text — never colour alone. */
.stale-badge {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  margin: 0 0 var(--space-2);
  padding: var(--space-2) var(--space-3);
  font-size: 0.8125rem;
  font-weight: 500;
  color: var(--color-stale);
  background: rgba(217, 164, 65, 0.08);
  border: 1px solid rgba(217, 164, 65, 0.35);
  border-radius: var(--radius-md);
}

.stale-icon {
  font-size: 0.9375rem;
  line-height: 1;
}

/* Stale = the charts are dimmed as a SECONDARY cue (the badge is the primary,
   colour-independent signal). Instant under reduced motion; eased otherwise. */
.results.is-stale .charts-grid,
.results.is-stale .pane-grid {
  opacity: 0.5;
}

/* ---- Team Building placeholder (P7b builds the real content) ---- */
.placeholder {
  text-align: center;
  padding: var(--space-10) var(--space-6);
}

.placeholder-icon {
  margin: 0 0 var(--space-3);
  font-size: 2.5rem;
  line-height: 1;
}

.placeholder-title {
  margin: 0 0 var(--space-3);
  font-size: 1.25rem;
  font-weight: 600;
  letter-spacing: -0.4px;
  color: var(--color-ink);
}

.placeholder-body {
  margin: 0 auto;
  max-width: 40rem;
  font-size: 0.9375rem;
  line-height: 1.6;
  color: var(--color-ink-subtle);
}

/* ==================================================================== */
/* P10b §6 — motion system (CSS + WAAPI, NO GSAP). ALL of it lives behind  */
/* prefers-reduced-motion: no-preference; transform / opacity / box-shadow */
/* / stroke-dashoffset (SVG-only) only — no per-frame JS, Chart.js         */
/* animation stays OFF, canvas inert. Base state is fully-drawn / opacity 1 */
/* / no curtain, so reduced-motion degrades to instant with no flash.      */
/* ==================================================================== */

@keyframes eig-fade-up {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: none; }
}

/* The looping Divergence (beta feedback 2026-07-07, full sequence): the story
   replays on a shared 10s clock — seed dot → glow blooms → the two paths draw
   → their outcome bands settle → hold → everything dissolves → repeat. Resets
   happen at opacity 0 (and, for strokes, at offset 100 where nothing is
   visible), so the cycle is seamless. */
@keyframes eig-loop-seed {
  0% { opacity: 0; }
  3% { opacity: 1; }
  86% { opacity: 1; }
  92% { opacity: 0; }
  100% { opacity: 0; }
}
@keyframes eig-loop-glow {
  0%, 4% { opacity: 0; }
  10% { opacity: 1; }
  86% { opacity: 1; }
  92% { opacity: 0; }
  100% { opacity: 0; }
}
@keyframes eig-draw-loop {
  0% { stroke-dashoffset: 100; opacity: 1; }
  8% { stroke-dashoffset: 100; }
  20% { stroke-dashoffset: 0; }
  86% { stroke-dashoffset: 0; opacity: 1; }
  92% { stroke-dashoffset: 0; opacity: 0; }
  93% { stroke-dashoffset: 100; opacity: 0; }
  100% { stroke-dashoffset: 100; opacity: 1; }
}
@keyframes eig-loop-band {
  0%, 20% { opacity: 0; }
  28% { opacity: 1; }
  86% { opacity: 1; }
  92% { opacity: 0; }
  100% { opacity: 0; }
}

@keyframes eig-wipe {
  from { transform: scaleX(1); }
  to { transform: scaleX(0); }
}

@keyframes eig-settle-ring {
  0% { box-shadow: 0 0 0 0 rgba(94, 106, 210, 0); }
  35% { box-shadow: 0 0 0 1px rgba(94, 106, 210, 0.5), 0 0 22px 2px rgba(94, 106, 210, 0.22); }
  100% { box-shadow: 0 0 0 0 rgba(94, 106, 210, 0); }
}

@keyframes eig-breathe {
  0%, 100% { box-shadow: 0 0 0 1px rgba(94, 106, 210, 0.35); }
  50% { box-shadow: 0 0 0 1px rgba(94, 106, 210, 0.45), 0 0 16px 1px rgba(94, 106, 210, 0.2); }
}

@media (prefers-reduced-motion: no-preference) {
  /* §6.2 amended (beta feedback 2026-07-07): the FULL Divergence sequence loops
     on one shared 10s clock — seed dot, then the glow, then the two paths draw
     (the calm order line still leads via its small delay), then the outcome
     bands settle; hold; dissolve; repeat. dasharray/offset + the opacity-0
     starts live ONLY here, so the base state stays fully drawn and static
     under reduced-motion. */
  .median { stroke-dasharray: 100; stroke-dashoffset: 100; animation: eig-draw-loop 10s cubic-bezier(0.2, 0.7, 0.2, 1) infinite; }
  .median-ord { animation-delay: 160ms; }
  .median-dis { animation-delay: 300ms; }
  .seed { opacity: 0; animation: eig-loop-seed 10s ease infinite; }
  .glow { opacity: 0; animation: eig-loop-glow 10s ease infinite; }
  .band { opacity: 0; animation: eig-loop-band 10s ease infinite; }
  .band-dis { animation-delay: 150ms; }

  /* §6.4 — entrances (calm, ~40% faster than P10a). */
  .landing-rail { animation: eig-fade-up 240ms var(--ease-out) both; }
  .hero-copy { animation: eig-fade-up 260ms var(--ease-out) both; animation-delay: 60ms; }
  .hero-signature { animation: eig-fade-up 260ms var(--ease-out) both; animation-delay: 120ms; }
  .landing-connective { animation: eig-fade-up 240ms var(--ease-out) both; animation-delay: 200ms; }
  .door { animation: eig-fade-up 300ms var(--ease-out) backwards; } /* backwards, NOT both — fixes the hover/press lift (M8) */
  .door:nth-child(1) { animation-delay: 90ms; }
  .door:nth-child(2) { animation-delay: 165ms; }
  .landing-foot { animation: eig-fade-up 240ms var(--ease-out) both; animation-delay: 250ms; }

  .mode-content.entered .mode-intro { animation: eig-fade-up 240ms var(--ease-out) both; }
  .mode-content.entered > .setup { animation: eig-fade-up 260ms var(--ease-out) both; animation-delay: 60ms; }
  .mode-content.entered .placeholder { animation: eig-fade-up 260ms var(--ease-out) both; animation-delay: 60ms; }

  /* §6.3 — results climax: the before/after pane charts sweep in on simulation
     time (a surface-2 curtain collapsing to the right edge), "after" trailing
     "before"; then the six explore charts arrive as a second wave. The curtain
     uses `both` so it holds scaleX(1) during the 180ms lead-in AND scaleX(0)
     after (its base ::after would otherwise re-cover on any repaint). */
  .charts-revealed > .reveal-item:first-of-type { animation: eig-fade-up 280ms var(--ease-out) both; }
  .charts-revealed .pane-card .chart-box { overflow: hidden; }
  .charts-revealed .pane-card .chart-box::after {
    content: '';
    position: absolute;
    inset: 0;
    background: var(--color-surface-2);
    transform-origin: right center;
    animation: eig-wipe 640ms cubic-bezier(0.2, 0, 0.1, 1) both;
    animation-delay: 180ms;
    pointer-events: none;
  }
  .charts-revealed .pane-card:nth-child(2) .chart-box::after { animation-delay: 340ms; }
  /* one lavender settle-pulse on the user's own org (the tagged pane card). */
  .charts-revealed .pane-card:has(.tag:not([hidden])) { animation: eig-settle-ring 900ms var(--ease-emphasis) 860ms both; }

  /* second wave: the six explore charts fade up AFTER the payoff registers. */
  .charts-revealed .charts-grid .reveal-item { animation: eig-fade-up var(--dur-fade) var(--ease-out) both; animation-delay: 300ms; }
  .charts-revealed .charts-grid .reveal-item:nth-child(2) { animation-delay: 355ms; }
  .charts-revealed .charts-grid .reveal-item:nth-child(3) { animation-delay: 410ms; }
  .charts-revealed .charts-grid .reveal-item:nth-child(4) { animation-delay: 465ms; }
  .charts-revealed .charts-grid .reveal-item:nth-child(5) { animation-delay: 520ms; }
  .charts-revealed .charts-grid .reveal-item:nth-child(6) { animation-delay: 575ms; }
  /* The team charts-grid has 7 panels (org has 6); keep the left-to-right cadence
     on the 7th (review-queue) chart instead of letting it fall back to 300ms. */
  .charts-revealed .charts-grid .reveal-item:nth-child(7) { animation-delay: 630ms; }

  /* §6.5 — micro-interactions (the phone audience's only tactile feedback). */
  .door { transition: transform var(--dur-hover) var(--ease-standard), box-shadow var(--dur-hover) var(--ease-standard); }
  .door:hover:not(:disabled) { transform: translateY(-3px); box-shadow: var(--shadow-door-hover); }
  .door:active:not(:disabled) { transform: translateY(-1px) scale(0.995); }
  button, .chip {
    transition: background-color var(--dur-hover) var(--ease-standard),
      color var(--dur-hover) var(--ease-standard),
      border-color var(--dur-hover) var(--ease-standard),
      transform var(--dur-press) var(--ease-standard);
  }
  button:active:not(:disabled), .chip:active:not(:disabled),
  .cfg-type:active, .segmented button:active { transform: translateY(1px); }
  .altitude-seg { transition: box-shadow var(--dur-hover) var(--ease-standard); }
  .altitude-seg:active { transform: translateY(1px); }

  /* §6.6 — a quiet breathing ring while the CTA holds keyboard focus. */
  .cta:focus-visible { animation: eig-breathe 3200ms var(--ease-standard) infinite; }

  /* Smooth stale -> fresh (P10a). */
  .results .charts-grid,
  .results .pane-grid { transition: opacity 240ms ease; }
}

/* ---- responsive: the altitude bar + setup on small viewports ---- */
@media (max-width: 560px) {
  .altitude-toggle {
    order: 3;
    width: 100%;
    margin: var(--space-2) 0 0;
    justify-content: center;
  }

  .altitude-restart {
    margin-left: auto;
  }

  .setup {
    padding: var(--space-4);
  }

  .door {
    padding: var(--space-4);
  }

  /* Run dock → sticky bottom, always reachable (§4b.3). It hides with the
     setup-body after the first run, handing off to the run-strip's "Run again". */
  .setup-run-dock {
    position: sticky;
    bottom: 0;
    z-index: 5;
    margin-inline: calc(-1 * var(--space-4));
    padding: var(--space-3) var(--space-4);
    border-top: 1px solid var(--color-hairline);
    border-bottom: none;
    background: color-mix(in srgb, var(--color-canvas) 92%, transparent);
    backdrop-filter: blur(8px);
  }

  .setup-run-dock .cta {
    width: 100%;
  }

  .setup-body {
    padding-bottom: var(--space-4);
  }
}

/* ====================================================================
   Team Building (P7b) — the function-coverage heatmap. The setup, charts,
   run-strip, results and card reuse the org classes (.setup, .charts-grid,
   .chart-box, .results, .card-preview …); only the coverage heatmap is new.
   State is carried by a shape GLYPH + a plain WORD + the score, so colour is
   supplementary — a grayscale render stays fully readable (no colour-alone).
   ==================================================================== */
.fc-mount {
  margin-top: var(--space-3);
  overflow-x: auto; /* the small table scrolls inside itself, never the page */
}

.fc-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.9375rem;
}

.fc-caption {
  caption-side: top;
  text-align: left;
  color: var(--color-ink-subtle);
  font-size: 0.8125rem;
  line-height: 1.45;
  margin-bottom: var(--space-3);
}

.fc-table th[scope="col"] {
  text-align: left;
  color: var(--color-ink-subtle);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  padding: 0 var(--space-3) var(--space-2);
  border-bottom: 1px solid var(--color-hairline);
}

.fc-table th[scope="col"]:last-child { text-align: right; }

.fc-row td,
.fc-row th {
  padding: var(--space-2) var(--space-3);
  border-bottom: 1px solid var(--color-hairline);
  vertical-align: baseline;
}

.fc-row th[scope="row"] { text-align: left; font-weight: 500; }

.fc-job-plain { display: block; color: var(--color-ink); }
.fc-job-tech {
  display: block;
  color: var(--color-ink-subtle);
  font-size: 0.75rem;
  margin-top: 1px;
}

.fc-cov { white-space: nowrap; }
.fc-glyph {
  display: inline-block;
  margin-right: var(--space-2);
  font-size: 1rem;
  line-height: 1;
}
.fc-word { color: var(--color-ink-muted); }
.fc-att {
  text-align: right;
  font-family: var(--font-mono);
  color: var(--color-ink-muted);
  font-size: 0.875rem;
}

/* Rating tint — supplementary to the glyph + word. Covered = accent (on-brand),
   thin = amber status, gap = muted ink (non-alarmist / non-judgmental register,
   matching the card's grey open cell). */
.fc-green .fc-glyph { color: var(--color-primary-hover); }
.fc-amber .fc-glyph { color: var(--color-stale); }
.fc-red .fc-glyph { color: var(--color-ink-subtle); }
.fc-red td, .fc-red th { background: color-mix(in srgb, var(--color-surface-2) 60%, transparent); }

.fc-pending { color: var(--color-ink-subtle); font-size: 0.9375rem; }

/* ====================================================================
   Team composer (P7b polish) — tap-to-assign roster + team dials. Reuses the
   .field / .segmented controls for the dials; the palette + roster are new.
   Tap is primary; the drag affordance is a desktop enhancement (drop-zone tint).
   ==================================================================== */
.composer {
  margin-top: var(--space-6);
  display: flex;
  flex-direction: column;
  gap: var(--space-5, 1.25rem);
}
.tc-section { display: flex; flex-direction: column; gap: var(--space-3); }

/* Guard note: a blocked add/remove surfaces its reason VISIBLY here (F4 —
   actor-observability, not sr-only). The descriptive text carries the meaning,
   so the error tint is a secondary cue, never the only signal. Empty = hidden. */
.tc-guard {
  margin: 0;
  font-size: 0.875rem;
  color: var(--color-error);
  padding: var(--space-2) var(--space-3);
  border: 1px solid color-mix(in srgb, var(--color-error) 40%, transparent);
  border-radius: var(--radius-md);
  background: color-mix(in srgb, var(--color-error) 8%, transparent);
}
.tc-guard:empty { display: none; }

.tc-palette { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.tc-add-chip {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-3);
  border: 1px solid var(--color-hairline-strong);
  border-radius: var(--radius-md);
  background: var(--color-surface-2);
  color: var(--color-ink);
  font: inherit;
  font-size: 0.875rem;
  cursor: pointer;
}
.tc-add-chip:hover { border-color: var(--color-primary); background: color-mix(in srgb, var(--color-primary) 12%, var(--color-surface-2)); }
.tc-add-chip:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 2px; }
.tc-add-plus { color: var(--color-primary-hover); font-weight: 700; }
.tc-kind {
  font-size: 0.6875rem;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  padding: 1px var(--space-1);
  border-radius: 4px;
  border: 1px solid var(--color-hairline);
  color: var(--color-ink-subtle);
}
.tc-kind-ai { color: var(--color-primary-hover); border-color: color-mix(in srgb, var(--color-primary) 40%, transparent); }

.tc-roster {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-4);
  padding: var(--space-3);
  border: 1px dashed var(--color-hairline);
  border-radius: var(--radius-lg);
}
.tc-drop-active { border-color: var(--color-primary); background: color-mix(in srgb, var(--color-primary) 8%, transparent); }

/* Composer hover transitions live behind the reduced-motion guard (P10b §6.5
   convention — even colour-only transitions stay inside the guard). */
@media (prefers-reduced-motion: no-preference) {
  .tc-add-chip { transition: border-color var(--dur-hover) var(--ease-standard), background var(--dur-hover) var(--ease-standard); }
  .tc-roster { transition: border-color var(--dur-hover) var(--ease-standard), background var(--dur-hover) var(--ease-standard); }
}
.tc-role-head {
  font-size: 0.75rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--color-ink-subtle);
  margin-bottom: var(--space-2);
}
.tc-cards { list-style: none; display: flex; flex-wrap: wrap; gap: var(--space-2); margin: 0; padding: 0; }
.tc-card {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-1) var(--space-1) var(--space-1) var(--space-3);
  border: 1px solid var(--color-hairline);
  border-radius: var(--radius-md);
  background: var(--color-surface-1);
}
.tc-card-name { font-size: 0.875rem; color: var(--color-ink); }
.tc-remove {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.5rem;
  height: 1.5rem;
  border: none;
  border-radius: 6px;
  background: transparent;
  color: var(--color-ink-subtle);
  font-size: 1.1rem;
  line-height: 1;
  cursor: pointer;
}
.tc-remove:hover { background: color-mix(in srgb, var(--color-error) 18%, transparent); color: var(--color-ink); }
.tc-remove:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 1px; }

.tc-dials { display: grid; grid-template-columns: 1fr; gap: var(--space-4); }
.tc-cap { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); }
.tc-cap-num {
  width: 5rem;
  padding: var(--space-2);
  border: 1px solid var(--color-hairline-strong);
  border-radius: var(--radius-md);
  background: var(--color-surface-2);
  color: var(--color-ink);
  font: inherit;
}

@media (min-width: 640px) {
  .tc-dials { grid-template-columns: repeat(3, 1fr); }
}