/* Halcyon readiness-review candidate-branch demo · "Datum" design system
   =================================================================
   Halcyon keeps its own stylesheet, painted on the SAME dark cyan/gold Datum
   tokens as the shared template, so the shared rail (shell.js), theme toggle
   (theme.js) and motion grammar (motion.js) drop in with zero edits and every
   page repaints by token alone.

   Legibility contract:
   - Text always sits in its own panel, never over a busy image.
   - WCAG-AA on the ground color in both themes.
   - No horizontal overflow at 1280px or 375px: tracks use minmax(0,1fr),
     content columns set min-width:0, wide tables scroll inside a wrapper.

   Legacy token names (--blue, --line, --panel, --muted, --faint, --coral …)
   are kept as aliases onto the Datum scale so the existing Halcyon classes
   repaint to the new palette without per-rule edits. New surfaces use the
   Datum names (--accent, --surface, --text-dim, --border).
   ============================================================ */

:root {
  /* === DARK is the default skin (candidate "Hangar Night") === */
  --bg: #0E1014;                 /* deep cool ink, never pure black */
  --surface: #15181E;            /* panel */
  --surface-2: #1C2027;          /* panel-2 */
  --surface-3: #161C25;          /* faint accent-tint surface */
  --paper: #15181E;
  --bg-warm: #12151A;            /* band background */
  --text: #E7EAEE;
  --text-dim: #9AA2AD;
  --text-dimmer: #828A95;        /* AA: >=4.5:1 on --surface + --surface-2 (rail labels/glyphs) */

  /* --- instrument cyan: the single hero accent (links + active) --- */
  --accent: #54C7E0;             /* AA on dark ground */
  --accent-deep: #8BDCEE;
  --accent-soft: rgba(84, 199, 224, 0.18);
  --accent-pale: rgba(84, 199, 224, 0.12);
  --accent-bright: #3FB6D6;

  /* --- gold: RESERVED for the deliverable (readiness packet) + attention --- */
  --gold: #E0A24A;
  --gold-deep: #EEBB72;
  --gold-soft: rgba(224, 162, 74, 0.18);
  --gold-pale: rgba(224, 162, 74, 0.10);

  --subtle: #3A424D;
  --border: #2A2F38;
  --border-soft: #21262E;
  --border-accent: rgba(84, 199, 224, 0.30);

  --ok: #4BBF86;
  --warn-color: #E5786C;
  --info-color: #6FA7CC;
  --danger: #E5786C;
  --ok-wash: rgba(75, 191, 134, 0.12);
  --warn-wash: rgba(229, 120, 108, 0.12);

  /* crisp, tight shadows — engineering precision, not soft residential blur */
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.32);
  --shadow: 0 6px 22px rgba(0, 0, 0, 0.40);
  --shadow-lg: 0 16px 48px rgba(0, 0, 0, 0.52);
  --shadow-teal: 0 10px 30px rgba(0, 0, 0, 0.46);
  --shadow-gold: 0 10px 30px rgba(224, 162, 74, 0.22);

  /* engineered identity: system + mono only, no webfonts */
  --sans: -apple-system, BlinkMacSystemFont, "Inter", "Segoe UI", system-ui, sans-serif;
  --serif: var(--sans);
  --display: var(--sans);
  --mono: ui-monospace, "SF Mono", "JetBrains Mono", "Roboto Mono", Menlo, "Courier New", monospace;

  --radius: 10px;
  --radius-lg: 16px;
  --radius-sm: 7px;
  --rule: 1px;

  /* the diagram canvas (.analysis-stage) is a fixed dark instrument panel in
     BOTH themes. The diagram-label readability halo paints in this same color
     so it always matches the canvas behind the labels, never the page. */
  --diagram-canvas: #040506;

  /* ---- legacy aliases: old Halcyon classes resolve onto the Datum scale ---- */
  --bg-2: var(--bg-warm);
  --panel: var(--surface);
  --panel-strong: var(--surface-2);
  --line: var(--border);
  --line-blue: var(--border-accent);
  --muted: var(--text-dim);
  --faint: var(--text-dimmer);
  --blue: var(--accent);
  --green: var(--ok);
  --pink: #C77FB0;
  --violet: #9B8CE0;
  --coral: var(--warn-color);
  --warn: var(--gold);
  --info: var(--info-color);

  /* space ladder — every padding/gap/margin snaps to a step */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-8: 32px;
  --space-10: 40px;
  --space: var(--space-6); /* back-compat alias */
  color-scheme: dark;
}

* { box-sizing: border-box; }

html,
body {
  margin: 0;
  min-height: 100%;
  background: var(--bg);
  color: var(--text);
  font-family: ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  letter-spacing: 0;
}

body {
  overflow-x: hidden;
}

a {
  color: inherit;
  text-decoration: none;
}

button {
  font: inherit;
  color: inherit;
}

.halcyon-shell {
  min-height: 100vh;
  display: grid;
  grid-template-columns: 248px minmax(0, 1fr);
  background: var(--bg);
}

.halcyon-rail {
  min-height: 100vh;
  padding: var(--space-6) var(--space-4) var(--space-8);
  border-right: 1px solid var(--border);
  background: var(--surface);
  position: sticky;
  top: 0;
  min-width: 0;
}

.brand {
  display: block;
  color: var(--gold);
  text-transform: uppercase;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.14em;
  margin-bottom: var(--space-6);
}

.rail-links {
  display: grid;
  gap: var(--space-2);
}

.rail-link {
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr);
  gap: var(--space-3);
  align-items: center;
  min-height: 48px;
  padding: var(--space-3) var(--space-4);
  border: 1px solid rgba(255, 255, 255, 0.08);
  background: rgba(255, 255, 255, 0.025);
  border-radius: var(--radius-sm);
  border-left: 2px solid transparent;
  transition:
    border-color 180ms ease,
    background 180ms ease;
}

.rail-link:hover,
.rail-link:focus-visible {
  outline: none;
  border-color: var(--line);
}

/* cyan active state — gold is reserved for the deliverable */
.rail-link[aria-current="page"] {
  background: rgba(0, 229, 255, 0.10);
  border-color: rgba(0, 229, 255, 0.32);
  border-left: 2px solid var(--blue);
}

.rail-icon {
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  color: var(--blue);
  border: 1px solid var(--line-blue);
  border-radius: var(--radius-sm);
}

/* fill the active icon — closes the "unfinished" gap */
.rail-link[aria-current="page"] .rail-icon {
  color: var(--blue);
  border-color: var(--blue);
  background: rgba(0, 229, 255, 0.12);
}

.rail-title {
  display: block;
  font-size: 13px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

.rail-sub {
  display: block;
  margin-top: 3px;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.3;
}

.rail-foot {
  position: absolute;
  left: var(--space-4);
  right: var(--space-4);
  bottom: var(--space-5);
  color: var(--faint);
  font-size: 11px;
  line-height: 1.8;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

.halcyon-main {
  min-width: 0;
  /* Reserve space under the fixed launcher pills (.ti-dlt-launch-fixed +
     .vc-ask-pill, ~54px tall at bottom:20px) so the last body copy never
     renders beneath them when scrolled to the bottom. */
  padding-bottom: 88px;
}

@media (max-width: 560px) {
  .halcyon-main {
    /* both launcher pills plus content stack tighter on narrow screens */
    padding-bottom: 120px;
  }
}

.topbar {
  min-height: 76px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-5);
  padding: var(--space-5) var(--space-8);
  border-bottom: 1px solid var(--border);
  background: var(--surface);
  position: sticky;
  top: 0;
  z-index: 20;
}

.topbar h1 {
  margin: 0;
  font-size: clamp(20px, 2.1vw, 34px);
  line-height: 1.1;
  font-weight: 600;
}

.scope-line {
  margin-top: var(--space-2);
  color: var(--muted);
  font-size: 13px;
  max-width: 78ch;
}

/* info control (Guided/Visual/Detailed) — cyan, NOT a primary CTA.
   gold stays reserved for the deliverable per the beauty bar. */
.view-toggle {
  /* Removed per the founder 2026-06-14: the Guided/Visual/Detailed mode toggle did not
     visibly change content, so it is hidden everywhere. The "Viewing as
     <department>" switcher (.ti-viewas) is separate and stays. Each page keeps
     rendering its normal content; the mode JS is inert with no toggle to click. */
  display: none !important;
  gap: var(--space-1);
  padding: var(--space-1);
  border: 1px solid var(--line-blue);
  border-radius: 999px;
  background: rgba(0, 0, 0, 0.24);
  flex: 0 0 auto;
}

.view-toggle button {
  border: 0;
  background: transparent;
  border-radius: 999px;
  padding: var(--space-2) var(--space-4);
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  cursor: pointer;
  transition:
    background 180ms ease,
    color 180ms ease;
}

.view-toggle button.is-active {
  color: var(--blue);
  background: rgba(0, 229, 255, 0.14);
}

.view-toggle button:hover,
.view-toggle button:focus-visible {
  color: #fff;
  outline: none;
}

.view-toggle button.is-active:hover,
.view-toggle button.is-active:focus-visible {
  color: var(--blue);
}

.view-toggle button:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 2px;
}

/* topbar right-side cluster: holds the view toggle plus a page action
   (for example Back to agents on the request surface) side by side.
   Wraps before it can push past the viewport at narrow widths. */
.topbar-actions {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--space-3);
  flex: 0 0 auto;
}

.stage {
  padding: 28px;
}

.welcome-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) minmax(340px, 0.8fr);
  align-items: start;
  min-height: calc(100vh - 132px);
  gap: 20px;
}

.panel h3 {
  margin: 0 0 12px;
  color: var(--gold);
  font-size: 13px;
  text-transform: uppercase;
  letter-spacing: 0.1em;
}

.clean-list {
  margin: 0;
  padding: 0;
  list-style: none;
}

.clean-list li {
  padding: 9px 0;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  color: var(--muted);
  font-size: 13px;
}

.clean-list li:first-child {
  border-top: 0;
}

.guide-stack {
  display: grid;
  gap: 16px;
}

/* ============================================================
   CARD FAMILY — one base + 3 modifiers, two shadows total.
   .panel / .lane-card / .action-step inherit the base so the
   markup never churns. cyan = info/active, gold = the result.
   ============================================================ */
.card,
.panel {
  padding: var(--space-6);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--panel);
  box-shadow: var(--shadow-sm);
  transition:
    border-color 180ms ease,
    background 180ms ease,
    transform 180ms ease,
    box-shadow 180ms ease;
}

.card:hover,
.panel:hover {
  border-color: rgba(255, 255, 255, 0.22);
  transform: translateY(-2px);
  box-shadow: var(--shadow);
}

.card--accent { border-left: 3px solid var(--blue); }
.card--ok { border-left: 3px solid var(--green); }
.card--result {
  border-left: 3px solid var(--gold);
  background: linear-gradient(135deg, rgba(255, 209, 102, 0.10), var(--panel));
}

.guide-quote {
  font-size: 21px;
  line-height: 1.35;
  margin: 0 0 14px;
}

.micro-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
}

.micro {
  padding: 12px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 7px;
  background: rgba(255, 255, 255, 0.04);
}

.micro strong {
  display: block;
  color: var(--gold);
  font-size: 12px;
  margin-bottom: 6px;
  text-transform: uppercase;
}

.micro span,
.packet-row span,
.small {
  color: var(--muted);
  font-size: 12px;
  line-height: 1.35;
}

.chat-card {
  display: grid;
  gap: 10px;
}

.guide-prompts {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.guide-prompts button {
  min-height: 36px;
  padding: 0 12px;
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 999px;
  color: var(--muted);
  background: rgba(255, 255, 255, 0.04);
  font-size: 12px;
  font-weight: 800;
  cursor: pointer;
  transition:
    background 180ms ease,
    border-color 180ms ease,
    color 180ms ease,
    transform 180ms ease;
}

.guide-prompts button:hover,
.guide-prompts button:focus-visible {
  color: #fff;
  border-color: rgba(255, 255, 255, 0.28);
  outline: none;
  transform: translateY(-1px);
}

.guide-prompts button.is-active {
  color: #03100a;
  border-color: var(--green);
  background: var(--green);
}

.chat-bubble {
  padding: 12px 14px;
  border: 1px solid rgba(31, 155, 255, 0.25);
  border-radius: 8px;
  background: rgba(31, 155, 255, 0.08);
  font-size: 14px;
  line-height: 1.5;
}

.chat-bubble.ai {
  border-color: rgba(217, 183, 102, 0.28);
  background: rgba(217, 183, 102, 0.08);
}

.packet-preview {
  border-color: rgba(217, 183, 102, 0.42);
  background: linear-gradient(135deg, rgba(217, 183, 102, 0.12), rgba(9, 14, 15, 0.94));
}

.packet-row {
  display: grid;
  grid-template-columns: 150px minmax(0, 1fr);
  gap: 16px;
  padding: 9px 0;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
}

.packet-row:first-of-type {
  border-top: 0;
}

.packet-row strong {
  font-size: 13px;
  font-weight: 600;
}

.primary-cta,
.secondary-cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 42px;
  padding: 0 15px;
  border-radius: 7px;
  font-size: 12px;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

.primary-cta {
  /* primary navigation action = instrument cyan; gold is reserved for the
     deliverable, so the readiness-packet button uses .packet-cta */
  border: 1px solid var(--accent-bright);
  background: var(--accent-bright);
  color: #06101f;
}

.secondary-cta {
  border: 1px solid rgba(255, 255, 255, 0.18);
  color: var(--text);
  background: rgba(255, 255, 255, 0.04);
}

.route-spine {
  display: grid;
  grid-template-columns: repeat(6, minmax(120px, 1fr));
  gap: 12px;
  margin-top: 20px;
}

.route-step {
  min-height: 74px;
  padding: 12px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: var(--radius);
  background: rgba(255, 255, 255, 0.035);
}

.route-step.is-current {
  border-color: var(--gold);
  background: rgba(217, 183, 102, 0.1);
}

.route-step b {
  display: block;
  margin-bottom: 7px;
  color: var(--gold);
}

.route-step span {
  display: block;
  font-size: 12px;
  color: var(--muted);
}

.content-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(320px, 0.48fr);
  gap: 20px;
}

.section-stack {
  display: grid;
  grid-template-columns: minmax(0, 1fr); /* constrain the single column to the
     container width so a wide child (a nested grid) cannot push max-content
     past the viewport — overflow-safe at 375px */
  gap: 18px;
}
.section-stack > * { min-width: 0; }

.two-col {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
}

.lane-card {
  padding: var(--space-5);
  border: 1px solid rgba(255, 255, 255, 0.09);
  border-radius: var(--radius);
  background: rgba(255, 255, 255, 0.035);
  box-shadow: var(--shadow-sm);
  transition:
    border-color 180ms ease,
    transform 180ms ease,
    box-shadow 180ms ease;
}

.lane-card:hover {
  border-color: rgba(255, 255, 255, 0.22);
  transform: translateY(-2px);
  box-shadow: var(--shadow);
}

.lane-card h3 {
  color: var(--text);
  letter-spacing: 0;
  text-transform: none;
  font-size: 18px;
}

.lane-card p {
  color: var(--muted);
  line-height: 1.55;
}

.proof-map-copy {
  position: absolute;
  left: 28px;
  top: 28px;
  width: min(440px, calc(100% - 56px));
  color: #fff;
  text-shadow: 0 2px 20px rgba(0, 0, 0, 0.8);
}

.proof-map-copy h2 {
  margin: 0 0 10px;
  font-size: clamp(38px, 5.4vw, 72px);
  line-height: 0.94;
  font-weight: 700;
}

.proof-map-copy p {
  margin: 0;
  color: #fff;
  font-size: 16px;
  line-height: 1.5;
  max-width: 390px;
}

.welcome-proof-stage {
  min-height: min(720px, calc(100vh - 156px));
  isolation: isolate;
  display: grid;
}

/* the node-graph hero fills the welcome stage; copy + sweep + flow panel
   overlay it. The SVG keeps its own aspect ratio and centers in the stage. */
.welcome-proof-stage.has-graph .halcyon-proof-map {
  grid-area: 1 / 1;
  align-self: center;
  width: 100%;
  height: auto;
  max-height: 100%;
}

.welcome-proof-copy {
  width: min(600px, calc(100% - 64px));
}

.welcome-proof-copy h2 {
  max-width: 560px;
  font-size: clamp(46px, 5.5vw, 86px);
  letter-spacing: 0;
}

.welcome-proof-copy p {
  max-width: 510px;
  font-size: 17px;
}

.proof-map-sweep {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background: linear-gradient(100deg, transparent 0 44%, rgba(0, 229, 255, 0.18) 48%, rgba(255, 255, 255, 0.12) 49%, transparent 53% 100%);
  mix-blend-mode: screen;
  opacity: 0.65;
  transform: translateX(-42%);
  animation: sweep-scan 4.8s var(--cine-ease, ease) infinite;
}

.welcome-proof-stage .proof-map-copy,
.proof-flow-panel {
  z-index: 2;
}

/* Guided mode (the landing view): the node-graph is now a bright,
   information-bearing SVG, not a dim photo backdrop, so overlaying the copy
   on top collides with the node labels. Un-stack into vertical flow —
   copy, then graph, then the flow panel — so nothing overlaps. Scoped to
   .mode-guided; visual/report modes keep their own layouts. (2026-06-13) */
.mode-guided .welcome-proof-stage.has-graph {
  display: grid;
  grid-template-rows: auto minmax(280px, 1fr) auto;
  gap: 20px;
  min-height: 0;
  padding: 28px;
}
.mode-guided .welcome-proof-stage.has-graph .welcome-proof-copy {
  position: static;
  grid-area: auto;
  width: 100%;
  max-width: 720px;
}
.mode-guided .welcome-proof-stage.has-graph .halcyon-proof-map {
  grid-area: auto;
  width: 100%;
  height: 100%;
  max-height: none;
}
.mode-guided .welcome-proof-stage.has-graph .proof-flow-panel {
  position: static;
  left: auto;
  right: auto;
  bottom: auto;
  grid-area: auto;
}
.mode-guided .welcome-proof-stage.has-graph .proof-map-sweep { display: none; }

.proof-flow-panel {
  position: absolute;
  left: 28px;
  right: 28px;
  bottom: 28px;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}

.flow-row {
  min-height: 84px;
  padding: 14px;
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 8px;
  background: rgba(0, 0, 0, 0.72);
  backdrop-filter: blur(14px);
}

.flow-row span {
  display: block;
  color: var(--gold);
  font-size: 11px;
  font-weight: 900;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  margin-bottom: 8px;
}

.flow-row strong {
  color: #fff;
  font-size: 13px;
  line-height: 1.35;
}

@keyframes sweep-scan {
  0%, 28% { transform: translateX(-55%); opacity: 0; }
  42%, 68% { opacity: 0.72; }
  100% { transform: translateX(58%); opacity: 0; }
}

@media (prefers-reduced-motion: reduce) {
  .proof-map-sweep {
    animation: none;
  }
}

.mode-report .visual-only,
.mode-report .welcome-proof-stage {
  min-height: 320px;
}

.mode-visual .text-heavy {
  max-height: 82px;
  overflow: hidden;
  opacity: 0.2;
}

/* Get-started is the activation surface: its "Try it yourself" guidance and
   the checklist sub-copy must stay readable in Visual mode, since a newcomer
   reads them to run their first path. Exempt those from the Visual-mode dim. */
.mode-visual .gs-try-card .text-heavy,
.mode-visual .gs-activate .text-heavy,
.mode-visual .gs-activate .gs-section-sub,
.mode-visual .gs-checklist .text-heavy {
  max-height: none;
  overflow: visible;
  opacity: 1;
}

.mode-visual .guide-stack,
.mode-visual .content-grid {
  grid-template-columns: minmax(0, 1fr);
}

.mode-visual .proof-flow-panel {
  display: none;
}

.mode-visual .welcome-grid {
  grid-template-columns: minmax(0, 1fr);
}

.mode-visual .welcome-proof-stage {
  min-height: min(780px, calc(100vh - 154px));
}

.mode-visual .welcome-proof-copy {
  width: min(680px, calc(100% - 64px));
}

.mode-visual .welcome-proof-copy h2 {
  font-size: clamp(54px, 6vw, 96px);
}

.mode-visual .guide-stack {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.mode-visual .guide-stack .panel:last-child {
  grid-column: 1 / -1;
}

.mode-report .welcome-grid {
  grid-template-columns: minmax(320px, 0.8fr) minmax(0, 1fr);
  align-items: start;
}

.mode-report .welcome-proof-stage {
  min-height: 360px;
}

.mode-report .welcome-proof-stage.has-graph .halcyon-proof-map {
  opacity: 0.55;
}

.mode-report .welcome-proof-copy h2 {
  font-size: clamp(30px, 3.2vw, 46px);
}

.mode-report .welcome-proof-copy p,
.mode-report .proof-flow-panel {
  display: none;
}

.mode-visual .report-only {
  display: none;
}

.mode-guided .report-only,
.mode-guided .visual-only-extra {
  display: none;
}

.mode-report .visual-only-extra {
  display: none;
}

/* ---- eased mode + department swaps ---------------------------------------
   Switching Guided / Visual / Detailed, or the "Viewing as" department, used to
   change these properties instantly, which read as a sudden snap. An eased
   transition on the properties the mode classes mutate (opacity, the dimmed
   text height, the proof-map fade, the headline size) lets the swap glide.
   Only behind prefers-reduced-motion: no-preference, so reduced motion stays
   instant. ~240ms with a soft cubic-bezier — the same gentle ease the deck and
   the traveling marker use, so the whole workspace settles the same way. */
@media (prefers-reduced-motion: no-preference) {
  .text-heavy {
    transition:
      opacity 240ms cubic-bezier(0.22, 0.61, 0.36, 1),
      max-height 280ms cubic-bezier(0.22, 0.61, 0.36, 1);
  }
  .welcome-proof-stage.has-graph .halcyon-proof-map {
    transition: opacity 280ms cubic-bezier(0.22, 0.61, 0.36, 1);
  }
  .welcome-proof-copy h2 {
    transition: font-size 280ms cubic-bezier(0.22, 0.61, 0.36, 1);
  }
}

.source-link {
  display: block;
  color: var(--blue);
  overflow-wrap: anywhere;
  font-size: 12px;
  margin-top: 8px;
}

.qa-options {
  display: grid;
  gap: 8px;
}

.qa-options button {
  text-align: left;
  padding: 12px;
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 7px;
  background: rgba(255, 255, 255, 0.035);
  cursor: pointer;
}

.qa-options button.is-correct {
  border-color: var(--gold);
  background: rgba(217, 183, 102, 0.1);
}

.qa-result {
  color: var(--ok);
  min-height: 20px;
  margin-top: 10px;
  font-size: 13px;
}

/* ============================================================
   The Datum token scale is set once in the top :root. The ported
   charts.css + action-map CSS reference --accent / --surface ladders,
   which already resolve there. This block intentionally adds nothing
   new — the single source of truth is the top :root.
   ============================================================ */

/* ============================================================
   ROI bridge classes — the shared salary/hours module renders
   on the Halcyon chassis. The companion demo ships these names;
   here they are defined for Halcyon in the dark palette.
   ============================================================ */
.scope-banner {
  display: flex;
  gap: 10px;
  align-items: center;
  flex-wrap: wrap;
  padding: 10px 14px;
  border: 1px solid var(--border);
  border-left: 3px solid var(--accent);
  border-radius: var(--radius-sm);
  background: var(--surface);
  margin-bottom: 18px;
  font-family: var(--mono);
  font-size: 11.5px;
  line-height: 1.5;
  letter-spacing: 0.2px;
  color: var(--text-dim);
  min-width: 0;
  /* When the banner sits inside a grid (content-grid), span every column so it
     reads as a full-width banner instead of eating one grid cell. Harmless in
     flex or block contexts. */
  grid-column: 1 / -1;
}

.scope-banner strong {
  color: var(--accent-deep);
  font-weight: 700;
  text-transform: uppercase;
  font-size: 10px;
  letter-spacing: 1.2px;
}

/* one micro-label grammar: 11px / 0.08em / line-height 1.4. Cyan, because
   gold is reserved for the deliverable. */
.eyebrow {
  display: inline-block;
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 1.8px;
  line-height: 1.4;
  text-transform: uppercase;
  color: var(--accent);
}

.src-tag {
  display: inline-block;
  font-size: 11px;
  font-weight: 900;
  letter-spacing: 0.08em;
  line-height: 1.4;
  text-transform: uppercase;
  padding: 3px 8px;
  border-radius: 999px;
  border: 1px solid var(--line);
  color: var(--muted);
  white-space: nowrap;
}

.src-tag.accent {
  color: var(--blue);
  border-color: var(--border-teal, rgba(0, 229, 255, 0.32));
  background: rgba(0, 229, 255, 0.08);
}

.src-tag.ok {
  color: var(--green);
  border-color: var(--green);
  background: rgba(45, 255, 136, 0.10);
}

.src-tag.warn {
  color: var(--gold);
  border-color: var(--gold);
  background: rgba(255, 209, 102, 0.10);
}

.src-tag.gold {
  color: var(--gold);
  border-color: var(--gold);
  background: rgba(217, 183, 102, 0.12);
}

.panel-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 14px;
  flex-wrap: wrap;
}

.panel-head h2 {
  margin: 6px 0 0;
  font-size: clamp(18px, 2vw, 24px);
  font-weight: 600;
}

.card-row {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
}

.card-row h2 {
  margin: 8px 0 8px;
  font-size: 19px;
  font-weight: 600;
}

.card-row p,
.card-row .sub {
  color: var(--muted);
  line-height: 1.55;
  font-size: 14px;
}

/* ===== Salary/hours ROI module ===== */
.roi-hero {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(280px, 0.7fr);
  gap: 20px;
  align-items: center;
  margin-bottom: 20px;
}

.roi-hero-copy h1 {
  margin: 10px 0 10px;
  font-size: clamp(26px, 3.2vw, 40px);
  line-height: 1.08;
  font-weight: 600;
}

.roi-hero-copy .sub {
  color: var(--muted);
  font-size: 15px;
  line-height: 1.55;
  max-width: 56ch;
  margin: 0;
}

.roi-hero-plate {
  padding: 22px;
  border-radius: var(--radius);
}

.roi-hero-plate h3 {
  font-size: clamp(34px, 4vw, 52px);
  font-variant-numeric: tabular-nums;
  font-weight: 700;
  color: var(--gold);
  margin: 10px 0 8px;
  line-height: 1;
  letter-spacing: 0;
  text-transform: none;
}

.roi-hero-plate p {
  color: var(--muted);
  font-size: 13px;
  line-height: 1.45;
  margin: 0;
}

.roi-calc-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 14px;
  margin-top: 16px;
}

.roi-field {
  display: grid;
  gap: 8px;
  padding: 16px;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm, 7px);
  background: var(--surface-2);
}

.roi-field span {
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--faint);
}

.roi-field input {
  width: 100%;
  accent-color: var(--gold);
}

.roi-field strong {
  font-size: 18px;
  font-variant-numeric: tabular-nums;
  color: var(--text);
}

.roi-cite {
  display: block;
  margin-top: 2px;
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.04em;
  color: var(--faint);
  font-style: normal;
}

.roi-field em.roi-cite {
  text-transform: none;
}

.roi-loaded-toggle {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 14px;
  padding: 12px 14px;
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-sm);
  background: var(--surface-2);
  font-size: 13px;
  color: var(--muted);
}

.roi-loaded-toggle input {
  accent-color: var(--gold);
  width: 18px;
  height: 18px;
}

.roi-loaded-toggle em {
  margin-left: auto;
}

.roi-result-row {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
  margin-top: 16px;
}

.roi-result-row article {
  padding: 18px;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm, 7px);
  background: linear-gradient(180deg, var(--panel), rgba(255, 255, 255, 0.02));
}

.roi-result-row h3 {
  font-size: 30px;
  font-variant-numeric: tabular-nums;
  margin: 12px 0 4px;
  color: var(--text);
  letter-spacing: 0;
  text-transform: none;
}

.roi-result-row p {
  color: var(--muted);
  font-size: 13px;
  margin: 0;
}

.roi-headline {
  border-color: var(--border-accent) !important;
  background: linear-gradient(135deg, var(--gold-pale), rgba(0, 0, 0, 0.9)) !important;
}

.roi-headline h3 {
  color: var(--gold);
}

.roi-result-secondary {
  margin-top: 14px;
}

.roi-small-figure {
  font-size: 15px !important;
  line-height: 1.4;
}

.roi-disclaimer {
  margin-top: 16px;
  color: var(--faint);
}

/* 2px gold focus ring on every ROI control */
.roi-field input:focus-visible,
.roi-loaded-toggle input:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 2px;
}

/* ============================================================
   ACTION-MAP lane engine — dark, Halcyon palette. Mirrors the
   companion demo's lane layout (source -> failure -> model fit
   -> human gate -> result) with cyan kickers + a gold result.
   ============================================================ */
.action-board {
  padding: 22px;
}

.action-board-head {
  align-items: flex-end;
}

.action-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.action-tab {
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--surface-2);
  color: var(--muted);
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.04em;
  padding: 8px 11px;
  cursor: pointer;
  transition:
    color 180ms ease,
    border-color 180ms ease,
    background 180ms ease,
    transform 180ms ease;
}

.action-tab.is-active,
.action-tab:hover,
.action-tab:focus-visible {
  color: var(--blue);
  border-color: var(--border-teal, rgba(0, 229, 255, 0.32));
  background: rgba(0, 229, 255, 0.08);
  outline: none;
  transform: translateY(-1px);
}

.action-tab:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 2px;
}

.action-lane {
  display: grid;
  grid-template-columns: 270px minmax(0, 1fr);
  gap: 18px;
}

.action-lane-title {
  padding: 16px;
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-sm);
  background:
    radial-gradient(100% 90% at 0% 0%, rgba(0, 229, 255, 0.08), transparent 62%),
    var(--surface-3);
}

.action-lane-title h3 {
  margin: 10px 0 8px;
  color: var(--text);
  letter-spacing: 0;
  text-transform: none;
  font-size: 18px;
}

.action-lane-title p {
  color: var(--muted);
  font-size: 14px;
  line-height: 1.5;
}

.action-flow {
  display: grid;
  grid-template-columns: repeat(5, minmax(130px, 1fr));
  gap: 10px;
}

.action-step {
  position: relative;
  min-height: 210px;
  padding: 15px 14px;
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-sm);
  background: rgba(255, 255, 255, 0.025);
}

.action-step::after {
  content: "";
  position: absolute;
  top: 34px;
  right: -10px;
  width: 10px;
  height: 1px;
  background: var(--border-accent);
}

.action-step:last-child::after {
  display: none;
}

.action-step.is-result {
  border-color: var(--border-accent);
  background: linear-gradient(135deg, var(--gold-pale), rgba(0, 0, 0, 0.85));
}

.step-kicker {
  display: block;
  margin-bottom: var(--space-3);
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.08em;
  line-height: 1.4;
  text-transform: uppercase;
  color: var(--blue);
}

.action-step.is-result .step-kicker {
  color: var(--gold);
}

.action-step h4 {
  margin: 0 0 8px;
  font-size: 14px;
  color: var(--text);
}

.action-step p {
  color: var(--muted);
  font-size: 13px;
  line-height: 1.5;
  margin: 0;
}

.action-split {
  align-items: start;
}

.guard-panel {
  border-left: 3px solid var(--gold);
}

/* ============================================================
   CHARTS — host wrappers for the ported TICharts kit on the
   readiness packet. charts.css owns the chart internals.
   ============================================================ */
.chart-block {
  display: grid;
  gap: 14px;
}

.chart-host {
  display: flex;
  justify-content: center;
}

.chart-caption {
  color: var(--faint);
  font-size: 12px;
  line-height: 1.45;
}

/* ============================================================
   ANALYSIS stage — the reference-a 2D node-graph proof map,
   drawn flat as inline SVG (proof-map.js). No WebGL, no Three.js.
   Source nodes -> controlled-data boundary -> gold human gate,
   color-by-source pointers travel the path, record blocks stay
   locked behind the dashed wall. WebGL-off is irrelevant; the SVG
   degrades to a static, fully-drawn graph under reduced motion.
   ============================================================ */
.analysis-stage {
  position: relative;
  min-height: 520px;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: var(--radius);
  /* The stage is a fixed dark instrument panel in BOTH themes, so the SVG text
     inside it must use dark-mode (light) text colors regardless of the page
     theme. Without this, light mode painted the node labels dark-on-dark and
     they read muddy (the founder 2026-06-14). These overrides cascade to every var(--text*)
     the proof-map SVG uses, so labels read crisp on the dark canvas. */
  --text: #EAEDF1;
  --text-dim: #B7BDC5;
  --text-dimmer: #8A929B;
  background:
    radial-gradient(120% 90% at 18% 12%, rgba(0, 229, 255, 0.05), transparent 60%),
    var(--diagram-canvas);
  box-shadow:
    0 0 0 1px rgba(255, 255, 255, 0.05) inset,
    var(--shadow);
}

.analysis-stage #halcyon-proof-map,
.analysis-stage .halcyon-proof-map {
  display: block;
  width: 100%;
  height: auto;
}

/* bold callout tags anchored on real nodes / the gate (welcome opt-in).
   The pill + text sit ON a feature coordinate inside the SVG, so they can
   never float over an empty region the way the old raster pills did. */
.pm-callout-pill {
  fill: #fff;
  stroke: rgba(0, 0, 0, 0.2);
  stroke-width: 1;
}
.pm-callout.is-coral .pm-callout-pill { fill: var(--coral); }
.pm-callout.is-cyan .pm-callout-pill { fill: var(--blue); }
.pm-callout.is-gold .pm-callout-pill { fill: var(--gold); }
.pm-callout-text {
  fill: #04131a;
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.pm-callout.is-coral .pm-callout-text { fill: #1a0606; }

/* node-graph element styling, driven by classes proof-map.js sets */
.pm-link { fill: none; stroke-linecap: round; }
.pm-link.is-cyan { stroke: var(--blue); }
.pm-link.is-gold { stroke: var(--gold); }
.pm-vehicle { fill: none; stroke: var(--line); stroke-width: 1; }
.pm-boundary-rule {
  stroke: var(--blue);
  stroke-width: 1.5;
  stroke-dasharray: 5 6;
  opacity: 0.78;
}
.pm-node-ring { fill: rgba(0, 0, 0, 0.55); stroke-width: 1.5; }
.pm-node-ring.is-cyan { stroke: var(--blue); }
.pm-node-ring.is-gold { stroke: var(--gold); }
.pm-node-ring.is-coral { stroke: var(--coral); }
.pm-node-core.is-cyan { fill: var(--blue); }
.pm-node-core.is-gold { fill: var(--gold); }
.pm-node-core.is-coral { fill: var(--coral); }
.pm-record { fill: rgba(255, 255, 255, 0.05); stroke: var(--faint); stroke-width: 1; }
.pm-gate-ring { fill: none; stroke: var(--gold); stroke-width: 2; }
.pm-pointer.is-cyan { fill: var(--blue); }
.pm-pointer.is-gold { fill: var(--gold); }
.pm-pointer.is-coral { fill: var(--coral); }
.pm-label {
  fill: var(--muted);
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.pm-label.is-gold { fill: var(--gold); }
.pm-label.is-faint { fill: var(--faint); }

/* ---- diagram-label readability halo --------------------------------------
   The snake-cap mono ZONE / boundary labels on the proof-map, boundary, and
   flow diagrams sit near connecting lines that can pass through the glyphs and
   make them hard to read. A bg-colored stroke painted BEHIND the fill
   (paint-order: stroke) gives each label a thin solid halo, so any line that
   crosses reads behind the text instead of through it. No layout change and no
   markup change: the halo costs zero space. Element+class selectors so these
   win over proof-map.css regardless of stylesheet order. --diagram-canvas is
   the fixed dark color the .analysis-stage sits on in BOTH themes, so the halo
   always matches the canvas directly behind the glyphs. */
/* Halo ONLY the zone / wall labels that the review line + connectors actually
   cross. The node-pill labels (.pm-label) and the hover callout (.pm-callout-text)
   sit on solid pills with no line through them, so the dark halo only muddied
   them (the founder 2026-06-14: "not as good as last time"). They render clean fill now. */
text.pm-zone,
text.pm-wall-label,
text.pm-wall-sub {
  paint-order: stroke;
  stroke: var(--diagram-canvas);
  stroke-width: 3px;
  stroke-linejoin: round;
  stroke-linecap: round;
}
/* pm-wall-label shipped with a DIM-colored stroke that rendered ON TOP of the
   fill (no paint-order), which is exactly the line-through-the-glyph effect.
   Repaint its stroke as the canvas halo and push it behind the fill. */
text.pm-wall-label { stroke: var(--diagram-canvas); stroke-width: 3px; }

.scene-fallback {
  position: absolute;
  inset: 0;
  display: grid;
  align-content: center;
  gap: 10px;
  padding: 32px;
  background: linear-gradient(135deg, rgba(0, 229, 255, 0.06), rgba(0, 0, 0, 0.92));
}

/* the [hidden] attribute must win over display:grid (scene.js toggles it) */
.scene-fallback[hidden] {
  display: none;
}

.scene-fallback strong {
  color: var(--gold);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  font-size: 13px;
}

.scene-fallback p {
  color: var(--muted);
  font-size: 14px;
  line-height: 1.55;
  max-width: 48ch;
  margin: 0;
}

.scene-legend {
  position: absolute;
  left: 18px;
  bottom: 18px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 14px;
  padding: 10px 14px;
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 8px;
  background: rgba(0, 0, 0, 0.72);
  backdrop-filter: blur(14px);
  color: var(--muted);
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

.legend-dot {
  width: 10px;
  height: 10px;
  border-radius: 999px;
  margin-left: 4px;
}

.legend-dot.dot-blue { background: var(--blue); }
.legend-dot.dot-gold { background: var(--gold); }
.legend-dot.dot-coral { background: var(--coral); }
.legend-dot.dot-gate {
  background: transparent;
  border: 2px solid var(--gold);
}

@media (max-width: 1100px) {
  /* The .halcyon-shell grid + rail collapse is owned by shell.css at 980px
     (one source of truth). This block keeps only page-content reflow. */
  .rail-foot {
    position: static;
    margin-top: 20px;
  }

  .welcome-grid,
  .content-grid {
    grid-template-columns: 1fr;
  }

  .route-spine {
    overflow-x: auto;
    grid-template-columns: repeat(6, 190px);
    padding-bottom: 8px;
  }

  .roi-calc-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .card-row,
  .action-split {
    grid-template-columns: 1fr;
  }

  .action-lane {
    grid-template-columns: 1fr;
  }

  .action-flow {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .roi-hero {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 720px) {
  /* The rail is NOT hidden on phones — it collapses to a top strip (shell.css).
     Hiding it left phones with no navigation; that bug is removed. */
  .topbar {
    align-items: stretch;
    flex-direction: column;
    position: static;
  }

  .stage {
    padding: 16px;
  }

  .welcome-proof-stage,
  .mode-visual .welcome-proof-stage,
  .mode-report .welcome-proof-stage {
    min-height: 600px;
  }

  .proof-map-copy {
    left: 20px;
    top: 20px;
    width: calc(100% - 40px);
  }

  .proof-map-copy h2 {
    max-width: 280px;
    font-size: 44px;
  }

  .welcome-proof-copy h2,
  .mode-visual .welcome-proof-copy h2,
  .mode-report .welcome-proof-copy h2 {
    max-width: 320px;
    font-size: 43px;
  }

  .proof-map-copy p {
    max-width: 300px;
    font-size: 15px;
  }

  .proof-flow-panel {
    left: 20px;
    right: 20px;
    bottom: 20px;
    grid-template-columns: 1fr;
    gap: 8px;
  }

  .flow-row {
    min-height: auto;
    padding: 11px 12px;
  }

  .mode-visual .guide-stack {
    grid-template-columns: 1fr;
  }

  .two-col,
  .micro-grid {
    grid-template-columns: 1fr;
  }

  .packet-row {
    grid-template-columns: 1fr;
    gap: 4px;
  }

  .roi-calc-grid,
  .roi-result-row,
  .roi-result-secondary,
  .action-flow {
    grid-template-columns: 1fr;
  }

  .action-step {
    min-height: 0;
  }

  .action-step::after {
    display: none;
  }

  .panel-head,
  .action-board-head {
    flex-direction: column;
    align-items: flex-start;
  }
}

/* ============================================================
   Ship-fidelity polish: focus rings + the metric display voice.
   The Datum identity is engineered, not editorial: --serif and
   --display alias the system sans (set in the top :root) so result
   numbers read in the same calm face as the rest of the skin.
   ============================================================ */
:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 2px;
  border-radius: 4px;
}
.roi-hero-plate h3, .roi-headline h3, .roi-result-row h3,
#roi-annual-hero, #roi-annual, #roi-company, .ti-ring-pct, .ti-donut-cval,
.roi-hero-number, .roi-jobs-head .roi-jobs-figure {
  font-family: var(--display);
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.01em;
}

/* ============================================================
   SETTLE — one signature reveal cadence.
   motion.js drives the IntersectionObserver reveal via the
   .settle.in transition; this @keyframes is the unified gesture
   for state changes (tab switch, panel reveal, ROI update) where
   no observer is wired. Reduced motion freezes it.
   ============================================================ */
@keyframes settle {
  from { opacity: 0; transform: translateY(14px); }
  to { opacity: 1; transform: none; }
}
.settle-now {
  animation: settle 0.30s var(--cine-ease, cubic-bezier(0.16, 1, 0.3, 1)) both;
}
@media (prefers-reduced-motion: reduce) {
  .settle-now { animation: none; }
}

/* ============================================================
   ONBOARDING-FIRST ENTRY — the newcomer card on Today. Mode-agnostic
   (shows in Guided, Visual, and Report) so a first-time reader always
   sees Get started before the working surfaces. Cyan for navigation;
   gold stays reserved for the deliverable.
   ============================================================ */
.onboarding-first {
  display: block;
  min-width: 0;
  background: var(--surface);
  border: 1px solid var(--line-blue);
  border-left: 3px solid var(--blue);
  border-radius: var(--radius-lg, 14px);
  padding: var(--space-5);
  margin-top: var(--space-4);
  text-decoration: none;
  transition: border-color 0.18s ease, transform 0.18s ease;
}
.onboarding-first:hover { border-color: var(--blue); transform: translateY(-1px); }
.onboarding-first:focus-visible { outline: 2px solid var(--blue); outline-offset: 2px; }
.onboarding-first .of-eyebrow {
  display: block;
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 1.4px;
  text-transform: uppercase;
  color: var(--blue);
}
.onboarding-first .of-title {
  display: block;
  font-size: clamp(16px, 1.8vw, 20px);
  font-weight: 650;
  letter-spacing: -0.01em;
  color: var(--text);
  margin-top: var(--space-2);
}
.onboarding-first .of-body {
  display: block;
  font-size: 13.5px;
  line-height: 1.55;
  color: var(--text-dim);
  margin-top: var(--space-2);
  max-width: 64ch;
}
@media (prefers-reduced-motion: reduce) {
  .onboarding-first { transition: none; }
  .onboarding-first:hover { transform: none; }
}

/* ============================================================
   ASK-YOUR-AI DOCK — cyan pill, lower-right, below
   the gate layer. No network: canned answers, textContent only.
   Halcyon dark palette. gold stays reserved for the deliverable.
   ============================================================ */
.vc-ask {
  position: fixed;
  right: var(--space-5);
  bottom: var(--space-5);
  z-index: 2147483200;
  font-family: ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}
.vc-ask-pill {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  background: var(--panel-strong);
  color: var(--blue);
  border: 1px solid var(--line-blue);
  border-radius: 999px;
  padding: 11px 17px;
  font-size: 13px;
  font-weight: 800;
  letter-spacing: 0.02em;
  cursor: pointer;
  box-shadow: var(--shadow-sm);
}
.vc-ask-pill:hover { background: var(--surface-2); border-color: var(--blue); }
.vc-ask-pill:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }
.vc-ask-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--blue);
  box-shadow: 0 0 0 3px rgba(0, 229, 255, 0.22);
}
.vc-ask-panel {
  position: fixed;
  right: var(--space-5);
  bottom: var(--space-5);
  width: min(360px, 92vw);
  height: min(520px, 76vh);
  display: none;
  flex-direction: column;
  background: var(--panel-strong);
  border: 1px solid var(--line);
  border-radius: 16px;
  box-shadow: var(--shadow);
  overflow: hidden;
}
.vc-ask.is-open .vc-ask-panel { display: flex; }
.vc-ask.is-open .vc-ask-pill { display: none; }
.vc-ask-head {
  position: relative;
  padding: var(--space-4);
  border-bottom: 1px solid var(--line);
}
.vc-ask-head h4 { margin: 0; font-size: 15px; color: var(--text); }
.vc-ask-note {
  font-size: 11px;
  color: var(--faint);
  margin-top: 3px;
  padding-right: 18px;
  line-height: 1.4;
}
.vc-ask-close {
  position: absolute;
  top: 10px;
  right: 12px;
  background: none;
  border: none;
  color: var(--faint);
  font-size: 20px;
  line-height: 1;
  cursor: pointer;
}
.vc-ask-close:hover { color: var(--text); }
.vc-ask-log {
  flex: 1;
  overflow-y: auto;
  padding: var(--space-4);
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}
.vc-ask-msg {
  max-width: 86%;
  padding: 9px 12px;
  border-radius: 12px;
  font-size: 13.5px;
  line-height: 1.5;
}
.vc-ask-msg.is-you {
  align-self: flex-end;
  background: rgba(0, 229, 255, 0.14);
  color: var(--text);
  border: 1px solid var(--line-blue);
  border-bottom-right-radius: 4px;
}
.vc-ask-msg.is-ai {
  align-self: flex-start;
  background: rgba(255, 255, 255, 0.04);
  color: var(--text);
  border: 1px solid var(--line);
  border-bottom-left-radius: 4px;
}
.vc-ask-chips {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  padding: 0 var(--space-4) var(--space-3);
}
.vc-ask-chip {
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 5px 11px;
  font-size: 12px;
  color: var(--muted);
  cursor: pointer;
}
.vc-ask-chip:hover { border-color: var(--line-blue); color: var(--text); }
.vc-ask-form {
  display: flex;
  gap: var(--space-2);
  padding: var(--space-3);
  border-top: 1px solid var(--line);
}
.vc-ask-input {
  flex: 1;
  min-width: 0;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 9px 11px;
  color: var(--text);
  font-size: 13.5px;
}
.vc-ask-input:focus-visible { outline: 2px solid var(--gold); outline-offset: 1px; }
.vc-ask-send {
  background: rgba(0, 229, 255, 0.14);
  color: var(--blue);
  border: 1px solid var(--line-blue);
  border-radius: 10px;
  padding: 0 15px;
  font-size: 13px;
  font-weight: 800;
  cursor: pointer;
}
.vc-ask-send:hover { background: rgba(0, 229, 255, 0.22); }
@media (prefers-reduced-motion: no-preference) {
  .vc-ask-msg { animation: vcAskIn 0.2s ease; }
}
@keyframes vcAskIn {
  from { opacity: 0; transform: translateY(4px); }
  to { opacity: 1; transform: none; }
}

/* ============================================================
   PAGE TOUR — spotlight scrim + ring + caption
   card + per-page nudge. Reuses the .ti-dlt-* class names.
   Halcyon dark palette; the scrim dim is pinned dark so it veils
   on #000. Below the gate layer, above the dock.
   ============================================================ */
.ti-dlt-scrim {
  position: fixed;
  inset: 0;
  z-index: 2147483300;
  opacity: 0;
  pointer-events: auto;
  transition: opacity 0.32s ease;
}
.ti-dlt-scrim.in { opacity: 1; }
.ti-dlt-ring {
  position: absolute;
  top: 0;
  left: 0;
  width: 0;
  height: 0;
  z-index: 2147483300;
  border-radius: var(--radius-sm);
  pointer-events: none;
  border: 2px solid var(--blue);
  box-shadow:
    0 0 0 9999px rgba(0, 0, 0, 0.72),
    0 0 0 3px rgba(0, 229, 255, 0.5),
    0 14px 40px rgba(0, 0, 0, 0.6);
  transition: top 0.34s ease, left 0.34s ease, width 0.34s ease, height 0.34s ease;
}
.ti-dlt-card {
  position: fixed;
  z-index: 2147483301;
  width: min(380px, calc(100vw - 32px));
  box-sizing: border-box;
  background: var(--panel-strong);
  color: var(--text);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: var(--space-5) var(--space-5) var(--space-4);
  box-shadow: var(--shadow);
  transition: top 0.34s ease, left 0.34s ease;
}
.ti-dlt-close {
  position: absolute;
  top: 10px;
  right: 10px;
  width: 28px;
  height: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(255, 255, 255, 0.04);
  color: var(--text);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  font-size: 14px;
  line-height: 1;
  cursor: pointer;
}
.ti-dlt-close:hover { background: rgba(0, 229, 255, 0.14); color: var(--blue); }
.ti-dlt-count {
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--blue);
  margin-bottom: var(--space-2);
  padding-right: 30px;
}
.ti-dlt-title-h {
  font-weight: 700;
  font-size: 19px;
  line-height: 1.25;
  margin: 0 0 7px;
  color: var(--text);
}
.ti-dlt-body {
  margin: 0 0 var(--space-4);
  color: var(--muted);
  font-size: 14px;
  line-height: 1.55;
}
.ti-dlt-toc { display: none; }
.ti-dlt-actions {
  display: flex;
  align-items: center;
  gap: var(--space-2);
}
.ti-dlt-btn {
  border-radius: var(--radius-sm);
  padding: 8px 14px;
  font-size: 13px;
  font-weight: 800;
  cursor: pointer;
  border: 1px solid var(--line);
  background: rgba(255, 255, 255, 0.04);
  color: var(--text);
}
.ti-dlt-btn-primary {
  border-color: var(--line-blue);
  background: rgba(0, 229, 255, 0.14);
  color: var(--blue);
}
.ti-dlt-btn:hover { border-color: var(--line-blue); }
.ti-dlt-skip {
  margin-left: auto;
  background: none;
  border: none;
  color: var(--faint);
  font-size: 12px;
  cursor: pointer;
}
.ti-dlt-skip:hover { color: var(--muted); }
.ti-dlt-launch {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  border: 1px solid var(--line-blue);
  border-radius: 999px;
  background: var(--panel-strong);
  color: var(--blue);
  padding: 7px 13px;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.04em;
  cursor: pointer;
}
.ti-dlt-launch:hover { background: var(--surface-2); border-color: var(--blue); }
.ti-dlt-launch:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }
.ti-dlt-launch-fixed {
  position: fixed;
  left: var(--space-5);
  bottom: var(--space-5);
  z-index: 2147483200;
}
/* On desktop the 248px rail (.halcyon-shell first column) is sticky and can
   fill the viewport, so its bottom rows reach the launcher in the bottom-left
   corner and the launcher would obscure + steal the click on the rail's last
   links (incl. the gold readiness-packet link). Clear the rail so the launcher
   sits over the content column, which already reserves space via
   .halcyon-main padding-bottom. Rail collapses at <=980px (shell.css), so the
   offset only applies while the rail is present. */
@media (min-width: 981px) {
  .ti-dlt-launch-fixed { left: calc(248px + var(--space-5)); }
}
.ti-dlt-launch-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--blue);
}
.ti-dlt-launch.ti-dlt-pulse { animation: dltPulse 1.8s ease infinite; }
/* First-run tour nudge. It used to be JS-positioned absolutely near the
   launcher, which left it floating mid-page over cards. Pin it to a single
   consistent spot (bottom-left, just above the launcher pill) so it never
   overlaps content. position:fixed + the pinned offsets win over the inline
   top/left tour.js still writes, so the nudge always lands in the same place. */
.ti-dlt-nudge {
  position: fixed !important;
  left: var(--space-5) !important;
  bottom: calc(var(--space-5) + 46px) !important; /* clears the launcher pill */
  top: auto !important;
  right: auto !important;
  z-index: 2147483205;
  display: flex;
  align-items: center;
  gap: var(--space-2);
  max-width: min(280px, calc(100vw - 40px));
  padding: 10px 12px;
  border: 1px solid var(--line-blue);
  border-radius: var(--radius-sm);
  background: var(--panel-strong);
  box-shadow: var(--shadow);
}
@media (min-width: 981px) {
  /* match the launcher's rail-clearing offset so the nudge stacks above it */
  .ti-dlt-nudge { left: calc(248px + var(--space-5)) !important; }
}
.ti-dlt-nudge-text { font-size: 13px; color: var(--text); }
.ti-dlt-nudge-take {
  border: 1px solid var(--line-blue);
  background: rgba(0, 229, 255, 0.14);
  color: var(--blue);
  border-radius: 999px;
  padding: 4px 10px;
  font-size: 12px;
  font-weight: 800;
  cursor: pointer;
}
.ti-dlt-nudge-close {
  background: none;
  border: none;
  color: var(--faint);
  font-size: 18px;
  line-height: 1;
  cursor: pointer;
}
@keyframes dltPulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(0, 229, 255, 0.4); }
  50% { box-shadow: 0 0 0 6px rgba(0, 229, 255, 0); }
}
@media (prefers-reduced-motion: reduce) {
  .ti-dlt-scrim, .ti-dlt-ring, .ti-dlt-card { transition: none; }
  .ti-dlt-launch.ti-dlt-pulse { animation: none; }
}

/* ============================================================
   PROVIDER NOTE — small "sample shape only" note
   on any field that would read from a real system of record.
   Turns mock-data honesty into a visible craft signal.
   ============================================================ */
.provider-note {
  display: flex;
  align-items: flex-start;
  gap: var(--space-2);
  margin-top: var(--space-3);
  padding: 10px 12px;
  border: 1px dashed var(--line-blue);
  border-radius: var(--radius-sm);
  background: rgba(0, 229, 255, 0.05);
  color: var(--muted);
  font-size: 12px;
  line-height: 1.45;
}
.provider-note::before {
  content: "i";
  flex: 0 0 auto;
  width: 16px;
  height: 16px;
  margin-top: 1px;
  display: grid;
  place-items: center;
  border: 1px solid var(--line-blue);
  border-radius: 50%;
  color: var(--blue);
  font-family: var(--mono);
  font-size: 10px;
  font-weight: 700;
}

/* ROI SLIP/Jobs header (shared with the companion demo) */
.roi-jobs {
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr);
  gap: var(--space-8);
  align-items: center;
  margin-bottom: var(--space-8);
}
.roi-jobs > * { min-width: 0; }
.roi-jobs-head {
  font-size: clamp(26px, 3.4vw, 40px);
  line-height: 1.12;
  margin: var(--space-2) 0 var(--space-3);
  font-weight: 600;
}
.roi-jobs-sub {
  color: var(--muted);
  font-size: 15px;
  max-width: 46ch;
  margin: 0;
}
.roi-jobs-sub strong { color: var(--gold); }
.roi-hero-number {
  font-variant-numeric: tabular-nums;
  font-size: clamp(34px, 4vw, 52px);
  color: var(--gold);
  margin: var(--space-3) 0 var(--space-2);
  line-height: 1;
}
.roi-tchart {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: var(--space-6);
  margin-bottom: var(--space-8);
}
.roi-tchart > * { min-width: 0; }
.roi-tcol {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: var(--space-6);
}
.roi-tcol--before { border-left: 3px solid var(--coral); }
.roi-tcol--after { border-left: 3px solid var(--green); }
.roi-tlist { list-style: none; margin: var(--space-3) 0 0; padding: 0; }
.roi-tlist li {
  padding: var(--space-3) 0;
  border-bottom: 1px solid var(--line);
  color: var(--text);
  font-size: 14px;
  line-height: 1.5;
}
.roi-tlist li:last-child { border-bottom: 0; }
.roi-caps { margin-bottom: var(--space-8); }
.roi-cap-list {
  list-style: none;
  margin: var(--space-4) 0 0;
  padding: 0;
  display: grid;
  gap: var(--space-3);
}
.roi-cap {
  background: var(--panel);
  border: 1px solid var(--line);
  border-left: 3px solid var(--blue);
  border-radius: var(--radius);
  padding: var(--space-4) var(--space-5);
}
.roi-cap strong { color: var(--text); }
.roi-cap span {
  color: var(--muted);
  display: block;
  margin: 2px 0 var(--space-2);
  font-size: 14px;
  line-height: 1.5;
}
@media (max-width: 760px) {
  .roi-jobs, .roi-tchart { grid-template-columns: minmax(0, 1fr); gap: var(--space-5); }
}

/* ============================================================
   ============================================================
   DATUM SHARED LAYER (adopted from the shared template, 2026-06-13)
   The one rail (shell.js), the app-shell grid, and the Datum component
   vocabulary every page composes from. All token-driven, so the theme
   toggle (theme.js) repaints them in both directions. Overflow-safe at
   1280px and 375px: tracks use minmax(0,1fr), content cols min-width:0,
   wide tables scroll inside .table-scroll.
   ============================================================
   ============================================================ */

img, svg, video, canvas { max-width: 100%; height: auto; }

/* ===== App shell grid (shared 248px + minmax(0,1fr)) ===== */
.app-shell {
  display: grid;
  grid-template-columns: 248px minmax(0, 1fr);
  min-height: 100vh;
  background: var(--bg);
}
.app-main, main.workspace, main.content {
  min-width: 0;
  width: 100%;
}

/* ===== The one consistent left rail — styles moved to shell.css =====
   The rail (.ti-shell-nav / .ti-rail / .ti-rail-*) is now owned by
   shell.css (paired with shell.js) so the rail is one canonical file
   linked on every page. Do not re-add rail rules here. */

/* ===== Datum motifs ===== */
.datum-rule { height: var(--rule); background: var(--border); border: 0; margin: var(--space) 0; }
.datum-rule.accent { background: var(--border-accent); }
.mono { font-family: var(--mono); font-size: 12px; letter-spacing: -0.01em; }
.muted { color: var(--text-dim); }
.dim { color: var(--text-dimmer); }
.callout {
  position: relative; padding-left: 16px;
  font-family: var(--mono); font-size: 12px; color: var(--text-dim);
}
.callout::before {
  content: ""; position: absolute; left: 0; top: 7px; bottom: 7px;
  width: 2px; background: var(--accent);
}

/* ===== Page header ===== */
.page-header { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: 26px; flex-wrap: wrap; gap: 12px; }
.page-header h1 { font-size: 34px; margin-top: 4px; }
.page-header .date { color: var(--text-dim); font-size: 13px; font-family: var(--mono); }

/* ===== Workspace head (used inside .stage on each surface) ===== */
.ws-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-bottom: 22px; }
.ws-title { font-size: 30px; letter-spacing: -0.02em; font-weight: 600; }
.ws-sub { color: var(--text-dim); font-size: 14px; margin-top: 2px; }
.ws-chip {
  font-family: var(--mono); font-size: 10px; font-weight: 600;
  letter-spacing: 1.2px; text-transform: uppercase;
  color: var(--accent-deep); background: var(--accent-pale);
  border: 1px solid var(--border-accent); border-radius: 999px; padding: 4px 10px;
}

/* ===== Datum card / panel ===== */
.datum-card, .datum-panel {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius); padding: 24px; margin-bottom: 18px;
  box-shadow: var(--shadow-sm); min-width: 0;
}
.datum-card-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(280px, 100%), 1fr)); gap: 16px; margin-bottom: 18px; }

/* ===== Stat strip ===== */
.stat-strip { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(160px, 100%), 1fr)); gap: 12px; margin-bottom: 18px; }
.stat { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 16px 18px; min-width: 0; }
.stat .num { font-size: 30px; font-weight: 600; letter-spacing: -0.02em; color: var(--text); }
.stat .num.accent { color: var(--accent); }
.stat .label { font-family: var(--mono); font-size: 10px; letter-spacing: 1px; text-transform: uppercase; color: var(--text-dimmer); margin-top: 4px; }

/* ===== A wide table scrolls inside this wrapper, so the page never does ===== */
.table-scroll { width: 100%; max-width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; }
table.data { width: 100%; border-collapse: collapse; font-size: 13px; }
table.data th, table.data td { text-align: left; padding: 10px 12px; border-bottom: 1px solid var(--border-soft); }
table.data th { font-family: var(--mono); font-size: 10px; letter-spacing: 1px; text-transform: uppercase; color: var(--text-dimmer); font-weight: 600; }
table.data tr:last-child td { border-bottom: none; }

/* ===== State pill ===== */
.pill { font-family: var(--mono); font-size: 10px; font-weight: 600; letter-spacing: 1px; text-transform: uppercase; border-radius: 999px; padding: 3px 9px; border: 1px solid var(--border); color: var(--text-dim); white-space: nowrap; }
.pill.ok { color: var(--ok); border-color: rgba(75,191,134,0.4); background: var(--ok-wash); }
.pill.warn { color: var(--warn-color); border-color: rgba(229,120,108,0.4); background: var(--warn-wash); }
.pill.hold { color: var(--gold-deep); border-color: var(--gold-soft); background: var(--gold-pale); }
.pill.accent { color: var(--accent-deep); border-color: var(--border-accent); background: var(--accent-pale); }

/* ===== CTAs (accent for navigation; gold ONLY where it leads to the packet) ===== */
.datum-cta {
  display: inline-block; background: var(--accent-bright); color: #06101f;
  padding: 12px 24px; border-radius: var(--radius-sm); font-size: 14px; font-weight: 700;
  border: none; cursor: pointer; box-shadow: var(--shadow-teal);
  transition: background 0.15s, transform 0.15s; border-bottom: none;
}
.datum-cta:hover { background: var(--accent); transform: translateY(-1px); border-bottom: none; }
.datum-cta-ghost {
  display: inline-block; background: var(--surface); color: var(--text);
  padding: 12px 24px; border-radius: var(--radius-sm); font-size: 14px; font-weight: 600;
  border: 1px solid var(--border); cursor: pointer; border-bottom: none;
}
.datum-cta-ghost:hover { border-color: var(--border-accent); border-bottom: none; }
/* the deliverable CTA — the one place gold is allowed on a control */
.packet-cta {
  display: inline-block; background: var(--gold); color: #1a1206;
  padding: 12px 24px; border-radius: var(--radius-sm); font-size: 14px; font-weight: 700;
  border: 1px solid var(--gold); cursor: pointer; box-shadow: var(--shadow-gold);
  transition: filter 0.15s, transform 0.15s; border-bottom: none;
}
.packet-cta:hover { filter: brightness(1.04); transform: translateY(-1px); border-bottom: none; }

/* ===== Footer + promise row ===== */
.page-footer { margin-top: 42px; padding: 20px 0; border-top: 1px solid var(--border); font-family: var(--mono); font-size: 11px; color: var(--text-dimmer); letter-spacing: 0.3px; text-align: center; }
.page-footer .promise { display: inline-flex; gap: 16px; flex-wrap: wrap; justify-content: center; }
.page-footer .promise span::before { content: "[ok] "; color: var(--ok); }

/* Responsive rail collapse now lives in shell.css (under .halcyon-shell,
   the grid the pages actually use). The earlier .app-shell rules here
   were inert because no page uses .app-shell. */

@media (prefers-reduced-motion: reduce) {
  .datum-cta, .datum-cta-ghost, .packet-cta { transition: none; }
  .datum-cta:hover, .datum-cta-ghost:hover, .packet-cta:hover { transform: none; }
}

/* ============================================================
   LIGHT THEME — engineering-paper. Opt-in via the theme.js toggle.
   Mirrors the chassis: explicit data-theme drives it; dark is default.
   ============================================================ */
:root[data-theme="light"] {
  --bg: #ECEDE8;
  --surface: #FBFBF9;
  --surface-2: #E4E6E0;
  --surface-3: #E7F2F5;
  --paper: #FFFFFF;
  --bg-warm: #E2E4DE;
  --text: #15171C;
  --text-dim: #474C54;
  --text-dimmer: #5F656E;        /* AA: >=4.5:1 on --bg + --surface-2 (rail labels/glyphs) */

  --accent: #0E6E86;
  --accent-deep: #094C5C;
  --accent-soft: rgba(14, 110, 134, 0.14);
  --accent-pale: rgba(14, 110, 134, 0.07);
  --accent-bright: #1389A4;

  /* gold one notch deeper so even gold text on a gold-tinted wash clears AA
     (the old #9A6212 fell to 3.99:1 on the gold wash in light mode). #8A5710
     is >=4.5:1 on --surface, --surface-2, the gold-soft and the gold-pale
     washes for the small uppercase mono labels and status pills. */
  --gold: #8A5710;
  --gold-deep: #714710;
  --gold-soft: rgba(138, 87, 16, 0.16);
  --gold-pale: rgba(138, 87, 16, 0.08);

  --subtle: #B6BBC1;
  --border: #D6D9D3;
  --border-soft: #E5E7E1;
  --border-accent: rgba(14, 110, 134, 0.20);

  --ok: #2A724F;            /* deepened: clears AA (5.1:1) on the ok-wash pill */
  --warn-color: #B23A30;
  --info-color: #2D63C2;
  --danger: #B23A30;
  --ok-wash: #EAF3EE;
  --warn-wash: rgba(178, 58, 48, 0.08);

  --shadow-sm: 0 1px 2px rgba(18,22,30,0.05);
  --shadow: 0 4px 16px rgba(18,22,30,0.08);
  --shadow-lg: 0 14px 42px rgba(18,22,30,0.12);
  --shadow-teal: 0 8px 24px rgba(14,110,134,0.16);
  --shadow-gold: 0 8px 24px rgba(154,98,18,0.18);

  /* CONTRAST tokens — light-theme overrides. Without these, the four tokens
     keep their dark-theme values (near-white / pale-gray) and become illegible
     on light surfaces. Mirrors --text / --text-dimmer above. */
  --text-on-watermark: #15171C;               /* dark ink, AA on any light --surface */
  --watermark-ink: rgba(21, 23, 28, 0.05);    /* faint enough to never fight text */
  --control-text: #15171C;                    /* control labels + values */
  --control-text-dim: #5F656E;                /* AA >=4.5:1 on light --surface-2 */

  color-scheme: light;
}
/* CTA INK — light mode. The filled buttons (cyan navigation fill + gold
   deliverable fill) read with WHITE ink in light mode, where dark ink on a
   mid-tone fill loses contrast. The teal/gold fills (--accent-bright / --gold)
   are deep enough in light mode that white clears WCAG AA on the fill. Dark
   mode keeps its near-black ink (set on the base rules) untouched. */
:root[data-theme="light"] .datum-cta,
:root[data-theme="light"] .primary-cta,
:root[data-theme="light"] .packet-cta,
:root[data-theme="light"] .datum-cta:hover,
:root[data-theme="light"] .primary-cta:hover,
:root[data-theme="light"] .packet-cta:hover { color: #fff; }
/* the gold deliverable fill deepens one notch in light mode so white ink on it
   clears AA; the base --gold (#8A5710) already reads as a deep amber-brown. */
:root[data-theme="light"] .packet-cta { background: var(--gold); border-color: var(--gold); }
/* the cyan navigation fills deepen to --accent (#0E6E86) in light mode so white
   ink clears AA (5.8:1) at any size, not only large-bold. Hover keeps the same
   deep cyan so the label never dips below AA on press. */
:root[data-theme="light"] .primary-cta,
:root[data-theme="light"] .primary-cta:hover {
  background: var(--accent);
  border-color: var(--accent);
}
:root[data-theme="light"] .datum-cta { background: var(--accent); box-shadow: var(--shadow-teal); }
:root[data-theme="light"] .datum-cta:hover { background: var(--accent-deep); }

/* ============================================================
   THEME TOGGLE BUTTON (injected by theme.js, bottom-LEFT) — token-styled.
   ============================================================ */
.ti-theme-toggle {
  position: fixed; left: 18px; bottom: 18px; z-index: 2147483000;
  width: 44px; height: 44px; display: inline-flex; align-items: center; justify-content: center;
  border-radius: 999px; background: var(--surface); color: var(--accent);
  border: 1px solid var(--border-accent); box-shadow: var(--shadow);
  font-size: 18px; line-height: 1; cursor: pointer; -webkit-tap-highlight-color: transparent;
  transition: transform 0.16s ease, box-shadow 0.16s ease, background 0.16s ease, color 0.16s ease, border-color 0.16s ease;
}
.ti-theme-toggle:hover { transform: translateY(-2px); border-color: var(--accent); box-shadow: var(--shadow-teal); }
.ti-theme-toggle:focus-visible { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-pale), var(--shadow); }
.ti-theme-toggle .ti-theme-glyph { display: block; pointer-events: none; }
@media (prefers-reduced-motion: reduce) {
  .ti-theme-toggle { transition: none; }
  .ti-theme-toggle:hover { transform: none; }
}
@media (max-width: 560px) {
  .ti-theme-toggle { left: 14px; bottom: 14px; width: 42px; height: 42px; }
}

/* ============================================================
   TRUST GRAMMAR — the fixed visual language every surface shares so a
   reader sees at a glance what is automatic and what a person decides.
   Cyan = agent work (a verified, deterministic fact). Cyan + a "suggested"
   badge = agent inference (a probabilistic estimate). Gold = the human
   decision gate. Gold check = human verified. Gray dashed = empty state.

   All colors come from the theme vars (--accent / --gold / --border /
   --text-dim), so the grammar inherits light + dark automatically and holds
   WCAG AA on both grounds. Reusable on every surface (Documents, Dashboards,
   Inbox, Agents, Flow, Simulator, Requests). Spec 4.3.
   ============================================================ */

/* deterministic agent work: a fact the agent verified. Cyan, calm, factual. */
.km-agent-work {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 2px 9px;
  border-radius: 999px;
  font-size: 12.5px;
  line-height: 1.5;
  color: var(--accent-deep);
  background: var(--accent-soft);
  border: 1px solid var(--border-accent);
}
.km-agent-work::before {
  content: "";
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--accent);
  flex: none;
}

/* probabilistic agent inference: an estimate, not a fact. Same cyan family,
   plus an explicit "suggested" badge so a reader never reads it as settled. */
.km-agent-suggestion {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 2px 9px 2px 6px;
  border-radius: 999px;
  font-size: 12.5px;
  line-height: 1.5;
  color: var(--accent-deep);
  background: var(--accent-pale);
  border: 1px dashed var(--border-accent);
}
.km-agent-suggestion::before {
  content: "suggested";
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--accent);
  background: var(--accent-soft);
  border-radius: 999px;
  padding: 1px 6px;
  flex: none;
}

/* the human decision gate: gold, the place a person decides. Reads as the
   most important thing on the surface, which it is. */
.km-human-gate {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 2px 9px;
  border-radius: 999px;
  font-size: 12.5px;
  line-height: 1.5;
  color: var(--gold-deep);
  background: var(--gold-soft);
  border: 1px solid var(--gold);
}
.km-human-gate::before {
  content: "";
  width: 7px;
  height: 7px;
  border-radius: 2px;
  background: var(--gold);
  flex: none;
}
.km-human-gate::after {
  content: "reviewer decides";
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  color: var(--gold-deep);
}

/* a thing a person verified: gold check, settled by a human. */
.km-verified {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 12.5px;
  color: var(--gold);
  font-weight: 600;
}
.km-verified::before {
  content: "\2713"; /* check */
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: var(--gold-soft);
  color: var(--gold);
  font-size: 11px;
  flex: none;
}

/* compact inline variants for tight rows (badges inside cards / list items) */
.km-agent-work.is-compact,
.km-agent-suggestion.is-compact,
.km-human-gate.is-compact { font-size: 11.5px; padding-top: 1px; padding-bottom: 1px; }

/* the shared empty state: gray dashed, never a dead end. A region uses this
   when it has nothing to show yet, then coaches the first action (the
   .empty-coach pattern in enrich.css carries the copy + CTAs). */
.km-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  text-align: center;
  min-height: 160px;
  padding: 28px 22px;
  border: 1.5px dashed var(--border);
  border-radius: var(--radius);
  background: transparent;
  color: var(--text-dim);
}
.km-empty strong { color: var(--text); font-size: 15px; }
.km-empty p { margin: 0; max-width: 46ch; font-size: 13.5px; line-height: 1.6; }
.km-empty-actions { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; }

/* ============================================================
   FIND HELP — the searchable tooltip index on get-started. tour.js harvests
   every [data-tip] + nearest label into an index; this styles the field, the
   live results, and the brief flash on the control it jumps to. Theme-var
   colors only, so it holds in light + dark. (The rest of the .gs-* system
   lives in onboarding.css; this block owns only the new help-search surface.)
   ============================================================ */
.gs-findhelp {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: 20px 22px;
}
.gs-findhelp-head h3 { margin: 0 0 2px; font-size: 17px; color: var(--text); }
.gs-findhelp-field { margin-top: 14px; }
.gs-findhelp-label {
  display: block;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: var(--text-dim);
  margin-bottom: 6px;
}
.gs-findhelp-input {
  width: 100%;
  box-sizing: border-box;
  padding: 11px 14px;
  font-size: 15px;
  font-family: var(--sans);
  color: var(--text);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
.gs-findhelp-input:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-soft);
}
.gs-findhelp-input::placeholder { color: var(--text-dimmer); }
.gs-findhelp-count { margin: 8px 0 0; font-size: 12.5px; color: var(--text-dim); }
.gs-findhelp-results {
  list-style: none;
  margin: 12px 0 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
  max-height: 320px;
  overflow-y: auto;
}
.gs-help-result-btn {
  display: flex;
  flex-direction: column;
  gap: 2px;
  width: 100%;
  text-align: left;
  padding: 9px 12px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: border-color 0.18s ease, background 0.18s ease;
}
.gs-help-result-btn:hover,
.gs-help-result-btn:focus-visible {
  outline: none;
  border-color: var(--border-accent);
  background: var(--accent-pale);
}
.gs-help-result-label { font-weight: 600; font-size: 13.5px; color: var(--text); }
.gs-help-result-tip { font-size: 12.5px; color: var(--text-dim); line-height: 1.45; }
.gs-findhelp-empty { margin: 12px 0 0; font-size: 13px; color: var(--text-dim); }

/* the brief highlight on a control the search jumps to */
.gs-help-flash {
  border-radius: var(--radius-sm);
  box-shadow: 0 0 0 3px var(--gold-soft), 0 0 0 1px var(--gold);
}
@media (prefers-reduced-motion: no-preference) {
  .gs-help-flash { animation: gs-help-pulse 2.2s ease-out 1; }
}
@keyframes gs-help-pulse {
  0% { box-shadow: 0 0 0 4px var(--gold-soft), 0 0 0 1px var(--gold); }
  100% { box-shadow: 0 0 0 0 rgba(0,0,0,0); }
}
@media (prefers-reduced-motion: reduce) {
  .gs-findhelp-input { transition: none; }
  .gs-help-result-btn { transition: none; }
  .gs-help-flash { animation: none; }
}

/* =================================================================
   Lane 0 foundation layer (2026-06-13): contrast + legibility tokens,
   the app-wide view-as switcher + shell find-help, the ExampleFlow
   "here is what would happen" component, friendlier inputs, and the
   Learn and practice page. All on the Datum tokens, AA on the ground
   color, no horizontal overflow at 375 / 768 / 1280px.
   ================================================================= */

:root {
  /* CONTRAST tokens. A guaranteed-legible foreground for text that must sit
     in front of a faint background watermark, plus a readable control text
     color that clears AA on every surface. */
  --text-on-watermark: #F2F4F7;          /* near-white, AA on any --surface */
  --watermark-ink: rgba(231, 234, 238, 0.05); /* faint enough to never fight text */
  --control-text: #E7EAEE;               /* control labels + values */
  --control-text-dim: #AEB6C0;           /* AA >=4.5:1 on --surface-2 */
  --focus-ring: 0 0 0 3px var(--accent-soft), 0 0 0 1px var(--accent);
}

/* Watermark-safe text. Put a faint word/number behind a heading WITHOUT the
   text-on-text legibility trap: the watermark renders in a pseudo-element at a
   very low alpha and a negative z-index, and the real text always sits in its
   own opaque-enough layer above it. Never put live copy directly over the
   watermark layer — this utility keeps them on separate planes. */
.km-watermark-safe {
  position: relative;
  isolation: isolate;
  z-index: 0;
}
.km-watermark-safe > * { position: relative; z-index: 1; }
.km-watermark-safe::before {
  content: attr(data-watermark);
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  font-family: var(--mono);
  font-weight: 800;
  font-size: clamp(48px, 12vw, 132px);
  letter-spacing: -0.02em;
  color: var(--watermark-ink);
  pointer-events: none;
  user-select: none;
  z-index: -1;            /* always behind the real text */
  overflow: hidden;
  white-space: nowrap;
}
/* the real foreground text in a watermarked hero is always fully legible */
.km-watermark-safe .km-on-watermark,
.km-on-watermark { color: var(--text-on-watermark); }

/* ---- friendlier inputs: range sliders, selects, search fields ----
   These lift the low-contrast controls (the ROI "set a pilot cost" slider and
   its siblings) to a legible, consistent look without editing each page. */
input[type="range"].km-range,
.roi-control input[type="range"],
input[type="range"]#roi-pilot-cost,
input[type="range"]#roi-employees,
input[type="range"]#roi-hours,
input[type="range"]#roi-salary,
input[type="range"]#roi-weeks {
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  height: 8px;
  border-radius: 999px;
  background: var(--surface-2);
  border: 1px solid var(--border);
  outline: none;
  cursor: pointer;
}
input[type="range"].km-range::-webkit-slider-thumb,
.roi-control input[type="range"]::-webkit-slider-thumb,
input[type="range"]#roi-pilot-cost::-webkit-slider-thumb,
input[type="range"]#roi-employees::-webkit-slider-thumb,
input[type="range"]#roi-hours::-webkit-slider-thumb,
input[type="range"]#roi-salary::-webkit-slider-thumb,
input[type="range"]#roi-weeks::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: var(--accent);
  border: 2px solid var(--bg);
  box-shadow: var(--shadow-sm);
  cursor: pointer;
}
input[type="range"].km-range::-moz-range-thumb,
.roi-control input[type="range"]::-moz-range-thumb,
input[type="range"]#roi-pilot-cost::-moz-range-thumb {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: var(--accent);
  border: 2px solid var(--bg);
  cursor: pointer;
}
input[type="range"].km-range:focus-visible,
.roi-control input[type="range"]:focus-visible,
input[type="range"]#roi-pilot-cost:focus-visible {
  box-shadow: var(--focus-ring);
}
/* the pilot-cost echo value reads at full contrast, not dim */
#roi-gain-pain { color: var(--control-text); }

.km-select {
  appearance: none;
  -webkit-appearance: none;
  font: inherit;
  font-size: 13.5px;
  color: var(--control-text);
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 8px 30px 8px 12px;
  cursor: pointer;
  max-width: 100%;
  /* a plain caret drawn with a CSS gradient (no inline data-uri) */
  background-image:
    linear-gradient(45deg, transparent 50%, var(--text-dim) 50%),
    linear-gradient(135deg, var(--text-dim) 50%, transparent 50%);
  background-position:
    calc(100% - 16px) calc(50% - 2px),
    calc(100% - 11px) calc(50% - 2px);
  background-size: 5px 5px, 5px 5px;
  background-repeat: no-repeat;
}
.km-select:hover { border-color: var(--border-accent); }
.km-select:focus-visible { outline: none; box-shadow: var(--focus-ring); }
.km-select option { color: var(--text); background: var(--surface); }

.km-btn-ghost {
  font: inherit;
  font-size: 13px;
  font-weight: 600;
  color: var(--accent);
  background: var(--accent-pale);
  border: 1px solid var(--border-accent);
  border-radius: 999px;
  padding: 8px 16px;
  cursor: pointer;
}
.km-btn-ghost:hover { background: var(--accent-soft); }
.km-btn-ghost:focus-visible { outline: none; box-shadow: var(--focus-ring); }

/* ---- the app-wide top bar (shell.js mounts it into .halcyon-main) ---- */
.ti-topbar {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  padding: 10px 16px;
  border-bottom: 1px solid var(--border);
  background: var(--surface);
}
.ti-viewas {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
}
.ti-viewas-label {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--control-text-dim);
  white-space: nowrap;
}
.ti-viewas-select { min-width: 0; }
.ti-help-trigger {
  margin-left: auto;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font: inherit;
  font-size: 13px;
  font-weight: 600;
  color: var(--control-text);
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 7px 14px;
  cursor: pointer;
}
.ti-help-trigger:hover { border-color: var(--border-accent); color: var(--text); }
.ti-help-trigger:focus-visible { outline: none; box-shadow: var(--focus-ring); }

/* The consistent tour starter (onboarding.js). One chip, same spot on every
   page — the top bar, just before "Find help". Never floats over content. */
.onb-tour {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  margin-left: auto;            /* push the two help controls to the right */
  font: inherit;
  font-size: 13px;
  font-weight: 600;
  color: var(--accent-deep);    /* AA on accent-pale in both themes */
  background: var(--accent-pale);
  border: 1px solid var(--border-accent);
  border-radius: 999px;
  padding: 7px 14px;
  cursor: pointer;
  white-space: nowrap;
  transition: background 160ms ease, border-color 160ms ease;
}
/* when the tour chip is present it owns the right-push; the help trigger then
   sits next to it instead of also pushing, so they group cleanly */
.ti-topbar .onb-tour + .ti-help-trigger { margin-left: 10px; }
.onb-tour:hover { background: var(--accent-soft); border-color: var(--accent); }
.onb-tour:focus-visible { outline: none; box-shadow: var(--focus-ring); }
.onb-tour-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--accent); flex: none; }
@media (max-width: 560px) {
  .onb-tour { margin-left: 0; }
}
.ti-help-trigger-ico {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: var(--accent);
  color: var(--bg);
  font-weight: 800;
  font-size: 12px;
}
@media (max-width: 560px) {
  .ti-help-trigger { margin-left: 0; }
}

/* ---- the shell find-help panel ---- */
.ti-help-panel {
  display: none;
  position: fixed;
  top: 64px;
  right: 16px;
  width: min(380px, calc(100vw - 32px));
  max-height: min(70vh, 560px);
  overflow-y: auto;
  z-index: 2147483645;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-lg);
  padding: 16px;
}
.ti-help-panel.is-open { display: block; }
.ti-help-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 10px;
}
.ti-help-title { margin: 0; font-size: 15px; color: var(--text); }
.ti-help-close {
  font: inherit;
  font-size: 20px;
  line-height: 1;
  color: var(--text-dim);
  background: transparent;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  width: 30px;
  height: 30px;
  cursor: pointer;
}
.ti-help-close:hover { color: var(--text); border-color: var(--border-accent); }
.ti-help-label { display: block; font-size: 12.5px; color: var(--control-text-dim); margin-bottom: 6px; }
.ti-help-input {
  width: 100%;
  font: inherit;
  font-size: 14px;
  color: var(--text);
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 9px 12px;
}
.ti-help-input:focus-visible { outline: none; box-shadow: var(--focus-ring); }
.ti-help-count { margin: 10px 0 6px; font-size: 12px; color: var(--control-text-dim); }
.ti-help-results { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.ti-help-result {
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 10px 12px;
}
.ti-help-result-tip { margin: 0; font-size: 13.5px; color: var(--text); line-height: 1.45; }
.ti-help-result-ctx { margin: 5px 0 0; font-size: 12px; color: var(--control-text-dim); }
.ti-help-empty { margin: 12px 0 0; font-size: 13px; color: var(--text-dim); }
@media (max-width: 560px) {
  .ti-help-panel { top: 120px; left: 16px; right: 16px; width: auto; }
}

/* ---- the ExampleFlow "here is what would happen" component ---- */
.km-example-flow {
  margin-top: 14px;
  padding: 14px 16px;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-left: 3px solid var(--accent);
  border-radius: var(--radius-sm);
}
.km-ef-caption { margin: 0 0 12px; font-size: 13.5px; color: var(--text-dim); line-height: 1.5; }
.km-ef-caption strong { color: var(--text); }
.km-ef-intro { color: var(--control-text-dim); }
.km-ef-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.km-ef-step {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 10px 12px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  opacity: 0.32;
  transform: translateY(4px);
}
.km-ef-step[data-ef-state="on"] { opacity: 1; transform: none; }
@media (prefers-reduced-motion: no-preference) {
  .km-ef-step { transition: opacity 0.28s ease, transform 0.28s ease; }
}
@media (prefers-reduced-motion: reduce) {
  .km-ef-step { transition: none; opacity: 1; transform: none; }
}
.km-ef-marker {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  font-size: 12px;
  font-weight: 800;
  font-family: var(--mono);
  color: var(--accent);
  background: var(--accent-pale);
  border: 1px solid var(--border-accent);
}
.km-ef-step.is-decide .km-ef-marker { color: var(--gold); background: var(--gold-pale); border-color: var(--gold); }
.km-ef-step.is-result .km-ef-marker { color: var(--ok); background: var(--ok-wash); border-color: var(--ok); }
.km-ef-body { min-width: 0; flex: 1; }
.km-ef-title { font-size: 13.5px; font-weight: 600; color: var(--text); }
.km-ef-detail { margin-top: 3px; font-size: 12.5px; color: var(--control-text-dim); line-height: 1.45; }
.km-ef-outcome {
  flex: 0 0 auto;
  align-self: center;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--ok);
  white-space: nowrap;
}
.km-ef-step.is-decide .km-ef-outcome { color: var(--gold); }
.km-ef-status { margin: 12px 0 0; font-size: 12px; color: var(--control-text-dim); }
.km-ef-foot { margin: 8px 0 0; font-size: 11.5px; color: var(--text-dimmer); font-style: italic; }
@media (max-width: 560px) {
  .km-ef-step { flex-wrap: wrap; }
  .km-ef-outcome { align-self: flex-start; }
}

/* ---- the Learn and practice page ---- */
.learn-block {
  margin: 0 auto 22px;
  max-width: 880px;
  padding: 20px 22px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
}
.learn-block-head { margin-bottom: 14px; }
.learn-block-head h2 { margin: 0 0 6px; font-size: 19px; color: var(--text); }
.learn-block-sub { margin: 0; font-size: 14px; color: var(--text-dim); line-height: 1.55; }
.learn-finder-field { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 14px; }
.learn-finder-label { font-size: 12.5px; font-weight: 600; color: var(--control-text-dim); }
.learn-finder-card {
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 16px 18px;
}
.learn-finder-card-head { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 10px; }
.learn-finder-card-head h3 { margin: 0; font-size: 16px; color: var(--text); }
.learn-finder-tag {
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--bg);
  background: var(--accent);
  border-radius: 999px;
  padding: 3px 9px;
}
.learn-finder-task { margin: 0 0 10px; font-size: 14px; color: var(--control-text); line-height: 1.55; }
.learn-finder-count { margin: 0 0 12px; font-size: 12.5px; color: var(--control-text-dim); }
.learn-finder-actions { margin-bottom: 4px; }
.learn-finder-flow { }

.learn-where-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.learn-where-step { display: flex; align-items: flex-start; gap: 14px; }
.learn-where-num {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  font-weight: 800;
  font-family: var(--mono);
  color: var(--accent);
  background: var(--accent-pale);
  border: 1px solid var(--border-accent);
}
.learn-where-gate .learn-where-num { color: var(--gold); background: var(--gold-pale); border-color: var(--gold); }
.learn-where-step h3 { margin: 0 0 4px; font-size: 14.5px; color: var(--text); }
.learn-where-step p { margin: 0; font-size: 13.5px; color: var(--control-text-dim); line-height: 1.55; }
.learn-where-actions { margin-top: 16px; }