/* Aero readiness-review candidate-branch demo · "Datum" design system
   =================================================================
   Engineering-drawing restraint for a defense-adjacent aerospace reader.
   The calm structure itself signals AS9100-grade rigor. One accent
   (instrument cyan) for links and active state; gold is RESERVED for the
   deliverable (the proof packet) and "now / attention" only.

   Token NAMES match the shared chassis contract so the reused parts
   (shell.css rail, theme.js toggle, gate.js dock) repaint with zero edits.
   The VALUES are Aero's dark-default candidate identity, with full light
   parity so the theme toggle works both ways.

   No external fonts, no CDNs: system + mono stacks only. The engineered
   identity comes from mono micro-labels, hairline datum rules, a measured
   grid, and restraint. Works from disk.

   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.
   ============================================================ */

: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;              /* light ink */
  --text-dim: #9AA2AD;
  --text-dimmer: #838D98;        /* AA small-text on ground, panel, and panel-2 */

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

  /* --- gold: RESERVED for the deliverable (proof 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;             /* mid hairline / drawing line */
  --border: #2A2F38;             /* hairline rule */
  --border-soft: #21262E;
  --border-teal: rgba(84, 199, 224, 0.30);   /* legacy name = accent border */
  --border-accent: rgba(84, 199, 224, 0.30);

  --ok: #4BBF86;
  --warn: #E5786C;
  --info: #6FA7CC;
  --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);   /* legacy name = accent shadow */
  --shadow-gold: 0 10px 30px rgba(224, 162, 74, 0.22);

  --radius: 10px;                /* tight + precise */
  --radius-lg: 16px;
  --radius-sm: 7px;

  /* engineered identity from system + mono; --serif and --display alias
     --sans so any reused component that asks for a serif renders in the
     engineered face, never an editorial serif. */
  --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;

  --space: 24px;
  --rule: 1px;
}

* { box-sizing: border-box; margin: 0; padding: 0; }

html, body {
  background: var(--bg);
  color: var(--text);
  /* no horizontal scroll anywhere */
  max-width: 100%;
  overflow-x: hidden;
}

body {
  font-family: var(--sans);
  font-size: 15px;
  line-height: 1.62;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  min-height: 100vh;
}

p,
li {
  text-wrap: pretty;
}

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

/* ===== Engineered type scale — sans headlines, tight tracking ===== */

h1, h2, h3, h4, .serif {
  font-family: var(--display);
  font-weight: 600;
  letter-spacing: 0;
  color: var(--text);
}
h1 { font-size: 42px; line-height: 1.1; }
h2 { font-size: 27px; line-height: 1.2; }
h3 { font-size: 19px; line-height: 1.32; }
h4 { font-size: 16px; }
.display { font-size: 54px; line-height: 1.04; letter-spacing: 0; }

/* the eyebrow + every micro-label is a mono "dimension callout" */
.eyebrow {
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 1.8px;
  text-transform: uppercase;
  color: var(--accent);
}
.muted { color: var(--text-dim); }
.dim { color: var(--text-dimmer); }
.mono { font-family: var(--mono); font-size: 12px; letter-spacing: 0; }

/* a mono uppercase source / metadata tag — ECN-A-0142 · SCAR · FAT */
.src-tag {
  font-family: var(--mono);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 1.2px;
  text-transform: uppercase;
  color: var(--text-dimmer);
  border: 1px solid var(--border);
  border-radius: 4px;
  padding: 2px 6px;
  white-space: nowrap;
}
.src-tag.accent { color: var(--accent-deep); border-color: var(--border-accent); background: var(--accent-pale); }
/* gold tag is reserved for the deliverable only */
.src-tag.gold { color: var(--gold-deep); border-color: var(--gold-soft); background: var(--gold-pale); }

a {
  color: var(--accent);
  text-decoration: none;
  border-bottom: 1px solid var(--accent-soft);
  padding-bottom: 1px;
  transition: border-color 0.15s, color 0.15s;
}
a:hover { border-bottom-color: var(--accent); }
a.plain { border-bottom: none; }

button { font-family: var(--sans); cursor: pointer; border: none; background: none; color: var(--text); }

/* ===== Datum motifs ===== */

/* hairline rule, like a drawing datum line */
.datum-rule { height: var(--rule); background: var(--border); border: 0; margin: var(--space) 0; }
.datum-rule.accent { background: var(--border-accent); }

/* a very subtle blueprint grid — hero / deck plates only, never behind body text */
.blueprint-grid {
  background-image:
    linear-gradient(var(--accent-pale) var(--rule), transparent var(--rule)),
    linear-gradient(90deg, var(--accent-pale) var(--rule), transparent var(--rule));
  background-size: 28px 28px;
}

/* leader-line callout note (engineering annotation) */
.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);
}

/* the boundary scope line — appears on every page; the bright line, visible */
.scope-banner {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  background: var(--surface);
  border: 1px solid var(--border);
  border-left: 3px solid var(--accent);
  border-radius: var(--radius-sm);
  padding: 10px 14px;
  margin-bottom: 22px;
  font-family: var(--mono);
  font-size: 11.5px;
  line-height: 1.5;
  color: var(--text-dim);
  letter-spacing: 0.2px;
  min-width: 0;
}
.scope-banner strong {
  color: var(--accent-deep);
  font-weight: 700;
  letter-spacing: 1.2px;
  text-transform: uppercase;
  font-size: 10px;
}

/* steel / blueprint plate — re-skinned "image" placeholder (no real photos) */
.photo-frame {
  position: relative;
  border-radius: var(--radius);
  overflow: hidden;
  background:
    radial-gradient(120% 90% at 16% 12%, rgba(84,199,224,0.22), transparent 60%),
    linear-gradient(135deg, #11161d 0%, #18222d 52%, #1d2c3a 100%);
  border: 1px solid var(--border-accent);
  min-height: 180px;
  display: flex; align-items: flex-end;
  box-shadow: var(--shadow-sm);
}
.photo-frame::before {
  content: ""; position: absolute; inset: 0;
  background-image:
    linear-gradient(rgba(255,255,255,0.05) var(--rule), transparent var(--rule)),
    linear-gradient(90deg, rgba(255,255,255,0.05) var(--rule), transparent var(--rule));
  background-size: 22px 22px;
  opacity: 0.7;
}
.photo-frame .photo-label {
  position: relative; margin: 14px; padding: 6px 11px;
  background: rgba(8,11,16,0.62);
  border: 1px solid rgba(255,255,255,0.16);
  border-radius: 6px;
  font-family: var(--mono);
  font-size: 10.5px; font-weight: 600; letter-spacing: 0.6px;
  color: #eaf0fb;
  display: inline-flex; align-items: center; gap: 6px;
}
.photo-frame .photo-label::before { content: "[+]"; font-family: var(--mono); }
.photo-frame.tall { min-height: 280px; }
.photo-frame.short { min-height: 130px; }

/* ===== Aircraft accent ===== */
.ti-aero {
  width: min(100%, 760px);
  margin: 28px 0 28px;
  border: 1px solid var(--border-accent);
  border-radius: var(--radius-lg);
  overflow: hidden;
  background:
    radial-gradient(110% 90% at 18% 10%, rgba(84, 199, 224, 0.16), transparent 62%),
    linear-gradient(145deg, var(--surface-3), var(--surface));
  box-shadow: var(--shadow-sm);
}

.ti-aero-viewer {
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(240px, 0.65fr);
  align-items: stretch;
  aspect-ratio: 2.6337 / 1;
  min-height: 290px;
  min-width: 0;
}

.ti-aero-stage {
  position: relative;
  height: 100%;
  min-height: 0;
  min-width: 0;
  cursor: grab;
  touch-action: pan-y;
  user-select: none;
}

.ti-aero-viewer.is-loading .ti-aero-stage {
  cursor: grab;
}

.ti-aero-stage.is-dragging {
  cursor: grabbing;
}

.ti-aero-no-select,
.ti-aero-no-select * {
  user-select: none;
}

.ti-aero-frame {
  position: relative;
  width: 100%;
  height: 100%;
  aspect-ratio: 16 / 9;
  min-height: 0;
  overflow: hidden;
  background:
    linear-gradient(rgba(84, 199, 224, 0.08) 1px, transparent 1px),
    linear-gradient(90deg, rgba(84, 199, 224, 0.08) 1px, transparent 1px),
    linear-gradient(145deg, rgba(8, 12, 18, 0.26), rgba(8, 12, 18, 0.08)),
    url("assets/jet-hero.jpg") center / cover no-repeat;
  background-size: 32px 32px, 32px 32px, auto, cover;
}

.ti-aero-frame::before,
.ti-aero-frame::after {
  content: "";
  position: absolute;
  pointer-events: none;
  border-color: var(--border-accent);
  border-style: solid;
  opacity: 0.8;
}

.ti-aero-frame::before {
  inset: 18px;
  border-width: 1px;
}

.ti-aero-frame::after {
  left: 11%;
  right: 11%;
  top: 50%;
  border-width: 1px 0 0;
}

.ti-aero-img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  -webkit-user-drag: none;
  user-select: none;
}

.ti-aero-viewer.is-loading .ti-aero-img {
  opacity: 0.78;
}

.ti-aero-measure,
.ti-aero-hint,
.ti-aero-readout {
  position: absolute;
  z-index: 3;
  font-family: var(--mono);
  font-size: 10px;
  font-weight: 700;
  line-height: 1.35;
  letter-spacing: 0.7px;
  color: #F4FBFF;
  background: rgba(4, 10, 16, 0.9);
  border: 1px solid rgba(139, 220, 238, 0.72);
  border-radius: 5px;
  padding: 6px 8px;
  white-space: normal;
  box-shadow: 0 8px 18px rgba(0, 0, 0, 0.38);
  text-shadow: 0 1px 1px rgba(0, 0, 0, 0.62);
}

.ti-aero-measure {
  left: 28px;
  top: 28px;
  max-width: min(310px, calc(100% - 56px));
}

.ti-aero-hint {
  right: 28px;
  bottom: 24px;
  max-width: 150px;
  transition: opacity 0.18s ease;
}

.ti-aero-viewer.has-interacted .ti-aero-hint {
  opacity: 0;
}

.ti-aero-readout {
  left: 28px;
  bottom: 24px;
  max-width: 142px;
}

.ti-aero-callouts {
  position: absolute;
  inset: 0;
  z-index: 4;
  pointer-events: none;
}

.ti-aero-part {
  position: absolute;
  min-width: 34px;
  min-height: 34px;
  transform: translate(-50%, -50%);
  padding: 6px 9px;
  border: 1px solid rgba(139, 220, 238, 0.82);
  border-radius: 6px;
  background: rgba(4, 10, 16, 0.94);
  color: #F4FBFF;
  font-family: var(--mono);
  font-size: 10px;
  font-weight: 700;
  line-height: 1.15;
  text-align: center;
  white-space: normal;
  overflow-wrap: anywhere;
  pointer-events: auto;
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.46);
  text-shadow: 0 1px 1px rgba(0, 0, 0, 0.68);
}

.ti-aero-part-size {
  transform: translate(-62%, -50%);
}

.ti-aero-part::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 100%;
  width: 1px;
  height: 42px;
  background: rgba(139, 220, 238, 0.7);
}

.ti-aero-part.is-active {
  color: #FFFFFF;
  background: rgba(6, 23, 32, 0.98);
  border-color: #8BDCEE;
  box-shadow:
    0 0 0 1px rgba(139, 220, 238, 0.26),
    0 10px 24px rgba(0, 0, 0, 0.5);
}

.ti-aero-panel {
  display: flex;
  flex-direction: column;
  gap: 12px;
  max-height: 100%;
  min-height: 0;
  min-width: 0;
  overflow-y: auto;
  scrollbar-color: rgba(139, 220, 238, 0.58) rgba(244, 251, 255, 0.07);
  scrollbar-width: thin;
  border-left: 1px solid var(--border-soft);
  padding: 18px;
  background: rgba(4, 10, 16, 0.92);
}

.ti-aero-panel::-webkit-scrollbar {
  width: 8px;
}

.ti-aero-panel::-webkit-scrollbar-track {
  background: rgba(244, 251, 255, 0.07);
}

.ti-aero-panel::-webkit-scrollbar-thumb {
  background: rgba(139, 220, 238, 0.58);
  border: 2px solid rgba(4, 10, 16, 0.92);
  border-radius: 999px;
}

.ti-aero-panel-kicker,
.ti-aero-detail-meta {
  display: block;
  font-family: var(--mono);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 1.3px;
  text-transform: uppercase;
  color: #8BDCEE;
}

.ti-aero-panel-title {
  margin-top: 3px;
  font-size: 18px;
  color: #F4FBFF;
}

.ti-aero-spec-list {
  display: grid;
  gap: 8px;
}

.ti-aero-spec-row {
  display: grid;
  gap: 3px;
  width: 100%;
  min-width: 0;
  padding: 10px 11px;
  border: 1px solid rgba(139, 220, 238, 0.2);
  border-radius: var(--radius-sm);
  background: rgba(21, 26, 34, 0.9);
  color: #F4FBFF;
  text-align: left;
}

.ti-aero-spec-row.is-active {
  border-color: var(--accent);
  background: rgba(84, 199, 224, 0.14);
}

.ti-aero-row-label,
.ti-aero-row-summary,
.ti-aero-detail-title {
  min-width: 0;
}

.ti-aero-row-label {
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.4px;
  color: #F4FBFF;
}

.ti-aero-row-summary {
  font-size: 12px;
  line-height: 1.35;
  color: #C7D0DB;
}

.ti-aero-spec-detail {
  min-height: 138px;
  padding: 13px;
  border: 1px solid rgba(139, 220, 238, 0.18);
  border-radius: var(--radius-sm);
  background: rgba(5, 9, 14, 0.54);
}

.ti-aero-detail-title {
  margin: 4px 0 6px;
  font-size: 16px;
  color: #F4FBFF;
}

.ti-aero-detail-copy {
  color: #C7D0DB;
  font-size: 13px;
  line-height: 1.5;
}

.ti-aero-part:focus-visible,
.ti-aero-spec-row:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
}

@media (prefers-reduced-motion: reduce) {
  .ti-aero-hint {
    transition: none;
  }
}

@media (max-width: 860px) {
  .ti-aero-viewer {
    aspect-ratio: auto;
    grid-template-columns: 1fr;
    min-height: 0;
  }

  .ti-aero-stage {
    height: auto;
  }

  .ti-aero-frame {
    height: auto;
    min-height: 290px;
  }

  .ti-aero-panel {
    max-height: none;
    overflow-y: visible;
    border-left: 0;
    border-top: 1px solid var(--border-soft);
  }
}

@media (max-width: 640px) {
  .ti-aero {
    width: 100%;
    margin: 22px 0 24px;
  }

  .ti-aero-frame {
    min-height: 260px;
  }

  .ti-aero-measure,
  .ti-aero-hint,
  .ti-aero-readout {
    font-size: 9px;
    max-width: calc(100% - 32px);
  }

  .ti-aero-measure,
  .ti-aero-readout {
    left: 16px;
  }

  .ti-aero-measure {
    top: 16px;
  }

  .ti-aero-hint {
    right: 16px;
    bottom: 16px;
    max-width: 116px;
  }

  .ti-aero-readout {
    bottom: 16px;
    max-width: 118px;
  }

  .ti-aero-part {
    max-width: 92px;
    font-size: 9px;
  }
}

/* ===== App shell (grid contract shared with shell.css: 248px + minmax(0,1fr)) ===== */

.app, .app-shell {
  display: grid;
  grid-template-columns: 248px minmax(0, 1fr);
  min-height: 100vh;
}
.app-noshell { display: block; min-height: 100vh; }

/* legacy hand-rolled rail (kept styled in case any page ships one before
   shell.js mounts; shell.js replaces aside.nav / aside.sidebar at load) */
aside.nav, aside.sidebar {
  background: var(--surface);
  border-right: 1px solid var(--border);
  padding: 22px 16px 28px;
  position: sticky; top: 0; height: 100vh; overflow-y: auto;
  min-width: 0;
}

main.content, main.workspace {
  padding: 44px 56px;
  max-width: 1120px;
  width: 100%;
  min-width: 0;            /* never let a wide child force overflow */
}

.workspace-head { display: flex; align-items: baseline; justify-content: space-between; gap: 14px; flex-wrap: wrap; margin-bottom: 26px; }
.ws-title { font-size: 30px; }
.ws-sub { color: var(--text-dim); font-size: 14.5px; margin-top: 4px; line-height: 1.55; }
.ws-actions { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.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;
}

/* a wrapper that scrolls a wide table inside itself, 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; }

/* ===== Page header ===== */
.page-header { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: 30px; flex-wrap: wrap; gap: 14px; }
.page-header h1 { font-size: 35px; line-height: 1.08; margin-top: 5px; }
.page-header .date { color: var(--text-dim); font-size: 13px; font-family: var(--mono); }

/* ===== Hero ===== */
.hero {
  display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); gap: 28px;
  align-items: stretch; margin-bottom: 34px;
}
.hero .hero-copy { display: flex; flex-direction: column; justify-content: center; min-width: 0; }
.hero .hero-copy h1 { font-size: 44px; margin: 8px 0 12px; }
.hero .hero-copy .sub { font-size: 16px; color: var(--text-dim); max-width: 46ch; }
.hero .hero-photo, .hero .hero-plate { min-height: 240px; min-width: 0; }

/* a structured "instrument plate" hero panel (no photos) */
.hero-plate {
  position: relative; border-radius: var(--radius-lg); overflow: hidden;
  border: 1px solid var(--border-accent);
  background:
    radial-gradient(130% 100% at 12% 8%, rgba(84,199,224,0.14), transparent 62%),
    linear-gradient(150deg, var(--surface-3), var(--surface));
  box-shadow: var(--shadow-sm);
  display: flex; align-items: flex-end; padding: 18px;
  min-width: 0;
}
/* compose the blueprint grid onto the plate as a faint TEXTURE behind the
   gradient. Without this the plate's background shorthand wiped the grid; with
   it the grid reads as a subtle drawing line, never competing with text. The
   plate's own content keeps a readable scrim (see below), so no copy ever sits
   directly on the grid. */
.hero-plate.blueprint-grid {
  background:
    radial-gradient(130% 100% at 12% 8%, rgba(84,199,224,0.14), transparent 62%),
    linear-gradient(var(--accent-pale) var(--rule), transparent var(--rule)),
    linear-gradient(90deg, var(--accent-pale) var(--rule), transparent var(--rule)),
    linear-gradient(150deg, var(--surface-3), var(--surface));
  background-size: auto, 28px 28px, 28px 28px, auto;
}
/* the datum text on a plate sits in its own legible section: a faint solid
   scrim under the rows so the mono labels never read against the grid lines. */
.hero-plate .bf-datum-card,
.hero-plate .datum-line {
  position: relative; z-index: 1;
}
.hero-plate.blueprint-grid .bf-datum-card {
  background: linear-gradient(180deg, rgba(21,24,30,0.0), var(--surface) 18%);
  border-radius: var(--radius-sm);
  padding: 12px 14px;
}

/* ===== Cards ===== */
.card, .panel {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 26px;
  margin-bottom: 20px;
  box-shadow: var(--shadow-sm);
  min-width: 0;
}
.panel-head { display: flex; align-items: baseline; justify-content: space-between; gap: 14px; margin-bottom: 16px; flex-wrap: wrap; }
.panel-title { font-size: 18.5px; line-height: 1.25; }
.panel-hint, .admin-hint { font-family: var(--mono); font-size: 11px; color: var(--text-dimmer); letter-spacing: 0.4px; }
.card-tight { padding: 15px; }
.card h2, .card h3, .panel h2, .panel h3 { margin-bottom: 14px; }
.card-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(280px, 100%), 1fr)); gap: 16px; margin-bottom: 18px; }

/* review / program card */
.thread-card, .program-card, .review-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 20px;
  transition: border-color 0.15s, transform 0.15s, box-shadow 0.15s;
  cursor: pointer; border-bottom: none; display: block; color: var(--text);
  min-width: 0;
}
.thread-card:hover, .program-card:hover, .review-card:hover { border-color: var(--border-accent); transform: translateY(-2px); box-shadow: var(--shadow); }
.thread-card .family, .program-card .program, .review-card .family { font-size: 18px; font-weight: 600; letter-spacing: 0; margin-bottom: 6px; line-height: 1.28; }
.thread-card .stage, .program-card .phase, .review-card .phase {
  font-family: var(--mono); font-size: 11px; letter-spacing: 1px; text-transform: uppercase;
  color: var(--accent-deep); margin-bottom: 12px; font-weight: 600;
}
.thread-card .next-action, .program-card .next-action, .review-card .next-action {
  font-size: 13px; color: var(--text-dim);
  border-top: 1px solid var(--border-soft); padding-top: 10px;
}
.thread-card .next-action strong, .program-card .next-action strong, .review-card .next-action strong { color: var(--text); font-weight: 600; }

/* ===== 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: 650; letter-spacing: 0; color: var(--text); }
.stat .num.accent { color: var(--accent); }
.stat .num.warn { color: var(--warn); }
.stat .label { font-family: var(--mono); font-size: 10px; letter-spacing: 1px; text-transform: uppercase; color: var(--text-dimmer); margin-top: 4px; }

/* ===== Inbox / signal rows ===== */
.inbox-item { display: grid; grid-template-columns: 120px minmax(0, 1fr) auto; gap: 18px; align-items: center; padding: 15px 0; border-bottom: 1px solid var(--border-soft); }
.inbox-item:last-child { border-bottom: none; }
.inbox-item .source { font-family: var(--mono); font-size: 10px; letter-spacing: 1px; text-transform: uppercase; color: var(--text-dimmer); font-weight: 600; }
.inbox-item .body { color: var(--text); font-size: 14px; min-width: 0; }
.inbox-item .action { font-size: 12px; color: var(--accent); white-space: nowrap; font-weight: 600; }

/* ===== Calendar / schedule rows ===== */
.calendar { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 16px; }
.cal-row { display: flex; align-items: center; padding: 11px 0; border-bottom: 1px solid var(--border-soft); gap: 16px; }
.cal-row:last-child { border-bottom: none; }
.cal-time { font-family: var(--mono); font-size: 12px; color: var(--text-dim); width: 92px; flex-shrink: 0; }
.cal-body { flex: 1; font-size: 14px; min-width: 0; }
.cal-tag { font-family: var(--mono); font-size: 10px; letter-spacing: 1px; text-transform: uppercase; color: var(--accent-deep); background: var(--accent-pale); border: 1px solid var(--border-accent); padding: 2px 7px; border-radius: 4px; font-weight: 600; white-space: nowrap; }
.cal-tag.personal { color: var(--text-dim); background: var(--surface-2); border-color: var(--border); }

/* ===== Phase / step track (readiness phases A–H) ===== */
.steps, .phase-track { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 8px; margin: 16px 0 26px; }
.step { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 13px 14px; position: relative; min-width: 0; }
.step.done { border-color: var(--ok); background: var(--ok-wash); }
.step.current { border-color: var(--accent); background: var(--accent-pale); }
.step.next { background: var(--surface-2); border-style: dashed; }
.step .num { font-family: var(--mono); font-size: 10px; letter-spacing: 1.2px; text-transform: uppercase; color: var(--text-dimmer); margin-bottom: 4px; font-weight: 600; }
.step.done .num { color: var(--ok); }
.step.current .num { color: var(--accent); }
.step .label { font-size: 13px; color: var(--text); }
.step .check { position: absolute; top: 10px; right: 12px; color: var(--ok); font-size: 14px; }

/* ===== Timeline (touch timeline on a Review) ===== */
.timeline { position: relative; padding-left: 22px; }
.timeline::before { content: ""; position: absolute; left: 6px; top: 8px; bottom: 8px; width: var(--rule); background: var(--subtle); }
.tl-item { position: relative; padding-bottom: 20px; }
.tl-item::before { content: ""; position: absolute; left: -22px; top: 7px; width: 9px; height: 9px; border-radius: 50%; background: var(--surface); border: 2px solid var(--accent); }
.tl-item .when { font-family: var(--mono); font-size: 11px; color: var(--text-dim); margin-bottom: 4px; display: block; }
.tl-item .what { font-size: 14px; color: var(--text); }
.tl-item .src { font-family: var(--mono); font-size: 10px; letter-spacing: 1px; text-transform: uppercase; color: var(--text-dimmer); margin-left: 6px; }

/* ===== Two-column ===== */
.two-col { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 340px); gap: 28px; align-items: start; }
.aside-card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 22px; margin-bottom: 18px; box-shadow: var(--shadow-sm); min-width: 0; }
.aside-card h3 { font-size: 12px; margin-bottom: 13px; font-family: var(--mono); font-weight: 600; letter-spacing: 1px; text-transform: uppercase; color: var(--text-dim); }
.aside-card .row { font-size: 13px; color: var(--text-dim); padding: 7px 0; border-bottom: 1px solid var(--border-soft); }
.aside-card .row:last-child { border-bottom: none; }
.aside-card .row strong { color: var(--text); font-weight: 600; }

/* ===== Next action (the "Open your flow" discoverability card) ===== */
.next-action-card { background: linear-gradient(135deg, var(--surface-3), var(--accent-pale)); border: 1px solid var(--border-accent); border-radius: var(--radius); padding: 22px; margin: 18px 0; }
.next-action-card .label { font-family: var(--mono); font-size: 10px; letter-spacing: 1.4px; text-transform: uppercase; color: var(--accent); margin-bottom: 8px; font-weight: 600; }
.next-action-card .body { font-size: 15px; color: var(--text); }
.next-action-card .meta { font-size: 12px; color: var(--text-dim); margin-top: 8px; }

/* ===== CTAs (accent for navigation; gold ONLY where it leads to the packet) ===== */
.primary-cta, .btn-primary {
  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;
}
.primary-cta:hover, .btn-primary:hover { background: var(--accent); transform: translateY(-1px); border-bottom: none; }
.secondary-cta, .btn-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; }
.secondary-cta:hover, .btn-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; }

/* ===== Setup / onboarding ===== */
.onboard-step { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 26px; margin-bottom: 18px; box-shadow: var(--shadow-sm); min-width: 0; }
.onboard-step .num { font-family: var(--mono); font-size: 11px; font-weight: 600; letter-spacing: 1.6px; text-transform: uppercase; color: var(--accent); margin-bottom: 6px; }
.onboard-step h2 { font-size: 22px; margin-bottom: 6px; }
.onboard-step .help { color: var(--text-dim); font-size: 14px; margin-bottom: 16px; }
.tool-row { display: flex; align-items: center; justify-content: space-between; padding: 13px 0; border-bottom: 1px solid var(--border-soft); gap: 12px; }
.tool-row:last-child { border-bottom: none; }
.tool-row .name { font-size: 14px; min-width: 0; }
.tool-row .status { font-family: var(--mono); font-size: 11px; font-weight: 600; letter-spacing: 0.4px; white-space: nowrap; }
.tool-row .status.connected { color: var(--ok); }
.tool-row .status.pending { color: var(--accent); }
.tool-row .status.later { color: var(--text-dimmer); }

.field { margin-bottom: 16px; min-width: 0; }
.field label { display: block; font-family: var(--mono); font-size: 11px; font-weight: 600; letter-spacing: 0.6px; text-transform: uppercase; color: var(--text-dim); margin-bottom: 6px; }
.field input, .field select, .field textarea { width: 100%; max-width: 100%; border: 1px solid var(--border); background: var(--surface-2); border-radius: var(--radius-sm); padding: 11px 13px; font-size: 14px; font-family: var(--sans); color: var(--text); }
.field input:focus, .field select:focus, .field textarea:focus { outline: none; border-color: var(--accent); background: var(--surface); box-shadow: 0 0 0 3px var(--accent-pale); }
.chips { display: flex; gap: 7px; flex-wrap: wrap; }
.chip { background: var(--surface-2); border: 1px solid var(--border); border-radius: 999px; padding: 6px 13px; font-size: 12px; color: var(--text-dim); cursor: pointer; transition: all 0.14s; }
.chip.on { background: var(--accent-pale); border-color: var(--border-accent); color: var(--accent-deep); font-weight: 600; }

/* ===== Patterns / insights / recurrence callouts ===== */
.pattern { background: var(--surface); border: 1px solid var(--border); border-left: 3px solid var(--accent); border-radius: var(--radius-sm); padding: 16px 20px; margin-bottom: 11px; min-width: 0; }
.pattern .label { font-family: var(--mono); font-size: 10px; letter-spacing: 1.4px; text-transform: uppercase; color: var(--accent); margin-bottom: 4px; font-weight: 600; }
.pattern .body { font-size: 14px; color: var(--text); }
.pattern .owner-line { font-family: var(--mono); font-size: 10.5px; letter-spacing: 0.3px; color: var(--text-dimmer); margin-top: 7px; }
.pattern.warn { border-left-color: var(--gold); }
.pattern.warn .label { color: var(--gold); }

/* ===== Flags (Signals feed + Evidence missing-evidence) ===== */
.flag {
  display: grid; grid-template-columns: 4px minmax(0, 1fr) auto; gap: 14px; align-items: start;
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-sm);
  padding: 14px 16px; margin-bottom: 10px; min-width: 0;
}
.flag::before { content: ""; align-self: stretch; border-radius: 4px; background: var(--subtle); }
.flag.sev-high::before { background: var(--warn); }
.flag.sev-watch::before { background: var(--gold); }
.flag.sev-info::before { background: var(--accent); }
.flag .flag-body { min-width: 0; }
.flag .flag-title { font-size: 14px; font-weight: 600; color: var(--text); }
.flag .flag-meta { font-family: var(--mono); font-size: 10.5px; letter-spacing: 0.4px; color: var(--text-dimmer); margin-top: 5px; }
.flag .flag-action { font-size: 12px; color: var(--accent); font-weight: 600; white-space: nowrap; }

/* a state pill (open / held / reviewed) */
.pill { font-family: var(--mono); font-size: 10.75px; font-weight: 650; letter-spacing: 0.55px; text-transform: uppercase; line-height: 1.25; border-radius: 999px; padding: 4px 10px; 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); 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); }

/* P1 type and marker pass */
.src-tag,
.pill,
.ws-chip,
.det-badge,
.ghost-pill,
.cal-tag {
  min-height: 24px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  border-radius: 999px;
  line-height: 1.2;
}
.src-tag,
.pill,
.ws-chip {
  letter-spacing: 0.7px;
}
.panel,
.card,
.aside-card,
.thread-card,
.program-card,
.review-card,
.next-action-card {
  padding: clamp(18px, 2.2vw, 26px);
}
.panel-head,
.workspace-head,
.page-header {
  row-gap: 10px;
}

/* ============================================================
   VIEW MODES - central fallback for every Aero surface.

   shell.js owns the keys and body classes:
   mode-guided = Guided, mode-visual = Visual, mode-detailed = Detailed.
   These rules sit in aero.css so every page visibly changes even when a
   page has no custom JavaScript for the toggle.
   ============================================================ */

.guided-only,
.visual-only,
.detailed-only,
.detail-only { display: none; }

.mode-guided .guided-only { display: block; }
.mode-visual .visual-only { display: block; }
.mode-detailed .detailed-only,
.mode-detailed .detail-only { display: block; }

.guided-only-inline,
.visual-only-inline,
.detailed-only-inline,
.detail-only-inline { display: none; }
.mode-guided .guided-only-inline { display: inline; }
.mode-visual .visual-only-inline { display: inline; }
.mode-detailed .detailed-only-inline,
.mode-detailed .detail-only-inline { display: inline; }

.guided-extra { display: none; }
.mode-guided .guided-extra { display: block; }

body.mode-guided {
  font-size: 16px;
  line-height: 1.72;
}
body.mode-visual {
  font-size: 15px;
  line-height: 1.56;
}
body.mode-detailed {
  font-size: 14.5px;
  line-height: 1.5;
}

body.mode-guided main.content,
body.mode-guided main.workspace { padding: 52px 64px; }
body.mode-visual main.content,
body.mode-visual main.workspace { padding: 36px 46px; }
body.mode-detailed main.content,
body.mode-detailed main.workspace { padding: 34px 44px; }

body.mode-guided .card,
body.mode-guided .panel,
body.mode-guided .aside-card,
body.mode-guided .thread-card,
body.mode-guided .program-card,
body.mode-guided .review-card,
body.mode-guided .next-action-card {
  padding: clamp(24px, 2.8vw, 34px);
  margin-bottom: 26px;
}
body.mode-visual .card,
body.mode-visual .panel,
body.mode-visual .aside-card,
body.mode-visual .thread-card,
body.mode-visual .program-card,
body.mode-visual .review-card,
body.mode-visual .next-action-card {
  padding: clamp(18px, 2vw, 24px);
  margin-bottom: 18px;
}
body.mode-detailed .card,
body.mode-detailed .panel,
body.mode-detailed .aside-card,
body.mode-detailed .thread-card,
body.mode-detailed .program-card,
body.mode-detailed .review-card,
body.mode-detailed .next-action-card {
  padding: clamp(14px, 1.8vw, 22px);
  margin-bottom: 14px;
}

body.mode-guided .card-row,
body.mode-guided .stat-strip,
body.mode-guided .hero,
body.mode-guided .two-col { gap: 22px; }
body.mode-visual .card-row,
body.mode-visual .stat-strip,
body.mode-visual .hero,
body.mode-visual .two-col { gap: 14px; }
body.mode-detailed .card-row,
body.mode-detailed .stat-strip,
body.mode-detailed .hero,
body.mode-detailed .two-col { gap: 10px; }

body.mode-guided .page-header { margin-bottom: 38px; }
body.mode-visual .page-header { margin-bottom: 24px; }
body.mode-detailed .page-header { margin-bottom: 18px; }

body.mode-guided table.data th,
body.mode-guided table.data td,
body.mode-guided .dash-table th,
body.mode-guided .dash-table td { padding-top: 14px; padding-bottom: 14px; }
body.mode-detailed table.data th,
body.mode-detailed table.data td,
body.mode-detailed .dash-table th,
body.mode-detailed .dash-table td { padding-top: 7px; padding-bottom: 7px; }

body.mode-guided .text-deep:not(.text-keep),
body.mode-visual .text-deep:not(.text-keep) {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
body.mode-guided .text-deep:not(.text-keep) { -webkit-line-clamp: 3; }
body.mode-visual .text-deep:not(.text-keep) { -webkit-line-clamp: 2; }
body.mode-detailed .text-deep {
  display: block;
  overflow: visible;
}

body.mode-guided .mono,
body.mode-guided .src-tag,
body.mode-guided .admin-hint,
body.mode-guided .page-footer { opacity: 0.78; }
body.mode-visual .mono,
body.mode-visual .src-tag:not(.gold),
body.mode-visual .admin-hint,
body.mode-visual .page-footer { opacity: 0.68; }
body.mode-detailed .mono,
body.mode-detailed .src-tag,
body.mode-detailed .admin-hint,
body.mode-detailed .page-footer { opacity: 1; }

body.mode-visual .visual-lead,
body.mode-visual .hero-plate,
body.mode-visual .photo-frame,
body.mode-visual .dash-plate,
body.mode-visual .ovr-viz,
body.mode-visual svg[role="img"] {
  border-color: var(--border-accent);
  transform: translateY(-1px);
  box-shadow: var(--shadow-teal);
}
body.mode-visual .visual-lead {
  order: -1;
}
body.mode-visual .hero {
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.12fr);
}
body.mode-visual .hero .hero-photo,
body.mode-visual .hero .hero-plate { min-height: 280px; }

.mode-guided .doc-how,
.mode-guided .next-action-card { display: block; }
.mode-visual .doc-how-body,
.mode-visual .doc-how-steps { display: none; }
.mode-detailed .next-action-card .meta { opacity: 0.9; }

/* Shared toggle paint lives here so the rail-less overview page can use the
   same shell.js control without also loading the full rail stylesheet. */
.ti-viewtoggle {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 4px;
  padding: 4px;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--surface-2);
}
.ti-viewtoggle button {
  min-height: 30px;
  border-radius: 999px;
  padding: 5px 8px;
  font-size: 11px;
  font-weight: 700;
  color: var(--text-dim);
}
.ti-viewtoggle button.is-on {
  color: #06101f;
  background: var(--accent-bright);
}
.ti-viewtoggle button:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px var(--accent-pale), 0 0 0 1px var(--accent);
}
.ti-viewtoggle-floating {
  position: fixed;
  top: 16px;
  right: 16px;
  z-index: var(--z-tour-ribbon, 2147483400);
  width: min(286px, calc(100vw - 32px));
  box-shadow: var(--shadow);
}

/* ===== Where AI helps page ===== */

.usecases-page .uc-hero {
  display: grid;
  grid-template-columns: minmax(0, 1.45fr) minmax(260px, 0.55fr);
  gap: 22px;
  align-items: stretch;
  margin-bottom: 24px;
}

.usecases-page .uc-hero h2 {
  margin-top: 14px;
  max-width: 780px;
  font-size: clamp(28px, 4vw, 52px);
  line-height: 1.05;
}

.usecases-page .uc-hero p {
  margin-top: 14px;
  max-width: 760px;
  color: var(--text-dim);
}

.uc-boundary-card,
.uc-mode-note,
.uc-review-strip,
.uc-column,
.uc-card {
  border: 1px solid var(--border);
  background: var(--surface);
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
}

.uc-boundary-card {
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  gap: 10px;
  min-height: 220px;
  padding: 22px;
  border-left: 3px solid var(--gold);
  background:
    linear-gradient(135deg, var(--surface) 0%, var(--surface-2) 100%);
}

.uc-boundary-card strong {
  font-size: 24px;
  line-height: 1.14;
}

.uc-boundary-card span:last-child,
.uc-mode-note span,
.uc-column-head p,
.uc-card p,
.uc-card dd,
.uc-review-strip p {
  color: var(--text-dim);
}

.uc-boundary-kicker {
  font-family: var(--mono);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 1.1px;
  text-transform: uppercase;
  color: var(--gold-deep);
}

.uc-mode-note {
  display: flex;
  gap: 10px;
  align-items: center;
  margin: 0 0 18px;
  padding: 12px 14px;
  border-left: 3px solid var(--accent);
}

.uc-mode-note strong {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.8px;
  text-transform: uppercase;
  color: var(--accent-deep);
  white-space: nowrap;
}

.uc-fit-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 22px;
  align-items: start;
}

.uc-column {
  padding: clamp(18px, 2.4vw, 28px);
}

.uc-column.good-fit {
  border-top: 3px solid var(--accent);
}

.uc-column.no-fit {
  border-top: 3px solid var(--gold);
}

.uc-column-head {
  margin-bottom: 18px;
}

.uc-column-head h2 {
  margin-top: 8px;
}

.uc-column-head p {
  margin-top: 8px;
}

.uc-card {
  padding: 18px;
  margin-top: 14px;
  background: var(--surface-2);
}

.uc-card-top,
.uc-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
}

.uc-card h3 {
  margin-top: 14px;
}

.uc-card p {
  margin-top: 8px;
}

.uc-card dl {
  display: grid;
  grid-template-columns: minmax(86px, 0.28fr) minmax(0, 1fr);
  gap: 8px 12px;
  margin-top: 14px;
  padding-top: 14px;
  border-top: 1px solid var(--border);
}

.uc-card dt {
  font-family: var(--mono);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.9px;
  text-transform: uppercase;
  color: var(--text-dimmer);
}

.uc-fit-meter {
  display: inline-flex;
  gap: 4px;
  align-items: center;
  min-width: 48px;
  justify-content: flex-end;
}

.uc-fit-meter span {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-pale);
}

.uc-fit-meter.no span {
  background: var(--gold);
  box-shadow: 0 0 0 3px var(--gold-pale);
}

.uc-fit-meter span.off {
  background: transparent;
  border: 1px solid var(--border);
  box-shadow: none;
}

.uc-review-strip {
  margin-top: 22px;
  padding: clamp(20px, 3vw, 34px);
  border-left: 3px solid var(--gold);
}

.uc-review-strip h2 {
  margin-top: 8px;
}

.uc-review-strip p {
  margin: 10px 0 18px;
  max-width: 900px;
}

body.mode-visual .usecases-page .uc-fit-grid {
  gap: 14px;
}

body.mode-visual .usecases-page .uc-card dl {
  display: none;
}

body.mode-detailed .usecases-page .uc-card {
  padding: 14px;
  margin-top: 10px;
}

@media (max-width: 980px) {
  .usecases-page .uc-hero,
  .uc-fit-grid {
    grid-template-columns: minmax(0, 1fr);
  }
}

@media (max-width: 640px) {
  .uc-card dl {
    grid-template-columns: minmax(0, 1fr);
  }

  .uc-mode-note {
    align-items: flex-start;
    flex-direction: column;
  }
}

@media (prefers-reduced-motion: no-preference) {
  body,
  main.content,
  main.workspace,
  .card,
  .panel,
  .aside-card,
  .thread-card,
  .program-card,
  .review-card,
  .next-action-card,
  .visual-lead,
  .hero-plate {
    transition: font-size 180ms ease, line-height 180ms ease, padding 180ms ease,
      margin 180ms ease, gap 180ms ease, border-color 180ms ease,
      box-shadow 180ms ease, transform 180ms ease, opacity 180ms ease;
  }
}

@media (max-width: 980px) {
  body.mode-guided main.content,
  body.mode-guided main.workspace { padding: 28px; }
  body.mode-visual main.content,
  body.mode-visual main.workspace { padding: 22px; }
  body.mode-detailed main.content,
  body.mode-detailed main.workspace { padding: 20px; }
  body.mode-visual .hero { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 520px) {
  body.mode-guided main.content,
  body.mode-guided main.workspace { padding: 20px; }
  body.mode-visual main.content,
  body.mode-visual main.workspace { padding: 16px; }
  body.mode-detailed main.content,
  body.mode-detailed main.workspace { padding: 14px; }
  .ti-viewtoggle-floating {
    top: 10px;
    right: 10px;
    width: min(270px, calc(100vw - 20px));
  }
}

/* ===== Shared coordination view (shared.html) ===== */
.consent-head {
  display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 16px; align-items: center;
  background: linear-gradient(135deg, var(--surface-3), var(--accent-pale));
  border: 1px solid var(--border-accent); border-radius: var(--radius);
  padding: 18px 22px; margin-bottom: 18px;
}
.consent-head .ch-label { font-family: var(--mono); font-size: 10px; font-weight: 600; letter-spacing: 1.4px; text-transform: uppercase; color: var(--accent); margin-bottom: 6px; }
.consent-head .ch-program { font-size: 20px; font-weight: 600; letter-spacing: -0.01em; color: var(--text); }
.consent-head .ch-meta { font-size: 13px; color: var(--text-dim); margin-top: 4px; }
.consent-head .ch-meta strong { color: var(--text); font-weight: 600; }
.consent-head .ch-seal { text-align: right; }
.consent-head .ch-seal .ch-phase { font-family: var(--mono); font-size: 10px; font-weight: 600; letter-spacing: 1.2px; text-transform: uppercase; color: var(--accent-deep); background: var(--paper); border: 1px solid var(--border-accent); border-radius: 999px; padding: 4px 11px; white-space: nowrap; }
.consent-head .ch-seal .ch-consent { display: block; font-family: var(--mono); font-size: 10.5px; color: var(--ok); margin-top: 8px; letter-spacing: 0.3px; }
.consent-head .ch-seal .ch-consent::before { content: "[ok] "; }

/* role rows on the shared view, a side dot, never a real name */
.poc-row { display: flex; align-items: flex-start; gap: 12px; padding: 11px 0; border-bottom: 1px solid var(--border-soft); }
.poc-row:last-child { border-bottom: none; }
.poc-dot { width: 9px; height: 9px; border-radius: 50%; margin-top: 5px; flex-shrink: 0; }
.poc-dot.is-host { background: var(--accent); }
.poc-dot.is-counterpart { background: var(--gold); }
.poc-who { font-size: 14px; font-weight: 600; color: var(--text); }
.poc-role { font-size: 12px; color: var(--text-dim); }

/* the "what is not shared" reassurance list (the bright line, made visible) */
.not-shared { list-style: none; margin: 4px 0 0; padding: 0; }
.not-shared li { position: relative; padding-left: 20px; font-size: 13px; color: var(--text-dim); padding-top: 6px; padding-bottom: 6px; border-bottom: 1px solid var(--border-soft); }
.not-shared li:last-child { border-bottom: none; }
.not-shared li::before { content: "x"; position: absolute; left: 0; top: 6px; color: var(--warn); font-size: 12px; font-weight: 700; }

@media (max-width: 720px) {
  .consent-head { grid-template-columns: minmax(0, 1fr); }
  .consent-head .ch-seal { text-align: left; }
}

/* ===== 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); }

/* ===== thread-strip breadcrumb (proof packet) ===== */
.thread-strip { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 22px; font-family: var(--mono); font-size: 11px; }
.thread-strip .ts-step { display: inline-flex; align-items: center; gap: 6px; color: var(--text-dimmer); }
.thread-strip .ts-step.is-current { color: var(--accent-deep); }
.thread-strip .ts-sep { color: var(--subtle); }

/* ===== Responsive ===== */
@media (max-width: 980px) {
  .app, .app-shell { grid-template-columns: minmax(0, 1fr); }
  aside.nav, aside.sidebar { position: static; height: auto; border-right: none; border-bottom: 1px solid var(--border); padding-bottom: 22px; }
  .hero { grid-template-columns: minmax(0, 1fr); }
  .two-col { grid-template-columns: minmax(0, 1fr); }
  .phase-track, .steps { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  main.content, main.workspace { padding: 24px; }
}
@media (max-width: 520px) {
  .phase-track, .steps { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .inbox-item { grid-template-columns: minmax(0, 1fr); gap: 4px; }
  .inbox-item .action { white-space: normal; }
  h1 { font-size: 32px; }
  .hero .hero-copy h1 { font-size: 34px; }
  .display { font-size: 38px; }
  main.content, main.workspace { padding: 18px; }
}

/* ============================================================
   LIGHT THEME — engineering-paper. Opt-in via the toggle.
   Three control paths mirror the chassis:
     1. :root[data-theme="light"]  manual force-light
     2. :root[data-theme="dark"]   manual force-dark (re-asserts ink)
     3. the candidate skin defaults to dark; the toggle drives light.
   ============================================================ */
: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: #5C636D;        /* AA small-text on paper, panel, and panel-2 */

  --accent: #0E6E86;             /* deep instrument cyan, AA on paper */
  --accent-deep: #094C5C;
  --accent-soft: rgba(14, 110, 134, 0.14);
  --accent-pale: rgba(14, 110, 134, 0.07);
  --accent-bright: #1389A4;

  --gold: #86540E;               /* AA as warn-label text on paper and panel-2 */
  --gold-deep: #6B430B;
  --gold-soft: rgba(134, 84, 14, 0.16);
  --gold-pale: rgba(134, 84, 14, 0.07);

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

  --ok: #1F6B49;                 /* deepened for AA as small text on paper + ok-wash */
  --warn: #B23A30;
  --info: #2D63C2;
  --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);
}

/* light-mode plate uses dark steel so labels still ride dark glass */
:root[data-theme="light"] .photo-frame {
  background:
    radial-gradient(120% 90% at 16% 12%, rgba(14,110,134,0.18), transparent 60%),
    linear-gradient(135deg, #1b2430 0%, #233244 52%, #2c405a 100%);
}
:root[data-theme="light"] .primary-cta,
:root[data-theme="light"] .btn-primary { background: var(--accent); color: #fff; }
/* the deliverable CTA in light mode rides WHITE ink on the brown gold, not the
   near-black ink the dark skin uses. White on --gold #86540E is ~6.3:1, well
   past WCAG-AA, where the dark ink was ~2.9:1 and read low-contrast. Gold stays
   reserved for the proof packet; only the ink changes for legibility. */
:root[data-theme="light"] .packet-cta { color: #fff; }

/* ============================================================
   SHARED CONVENTION 1 of 2: DETERMINISM BADGE (.det-badge)
   ============================================================
   A small inline marker the surfaces stamp on every computed claim so the
   reader can tell a rule-gated outcome from a model-judged one at a glance.
   Token-driven only (cyan for rule-based, gold edge for model-judged, warn
   for needs-a-person). No new color tokens. WCAG-AA on the dark ground.

   Usage (built by the surface JS via createElement + textContent):
     <span class="det-badge is-deterministic" data-tip="ROUTE-RULE-003">
       <span class="det-badge-glyph" aria-hidden="true">[lock]</span>
       <span class="det-badge-label">RULE-BASED</span>
     </span>
     <span class="det-badge is-probabilistic" data-tip="top alt: important 0.07">
       ... label MODEL-JUDGED ... <span class="det-badge-conf">0.87</span>
     </span>
     <span class="det-badge is-pending">... label NEEDS A PERSON ...</span>
   The rule id (deterministic) or the top alternative (probabilistic) rides in
   the [data-tip] attribute the tooltip layer reads.
   ============================================================ */
.det-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-width: 0;                       /* overflow-safe inside any flex/grid cell */
  max-width: 100%;
  vertical-align: middle;
  font-family: var(--mono);
  font-size: 10.75px;
  font-weight: 650;
  letter-spacing: 0.55px;
  text-transform: uppercase;
  line-height: 1.25;
  padding: 5px 9px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border);
  background: var(--surface-2);
  color: var(--text-dim);
  white-space: nowrap;
}
.det-badge-glyph { font-size: 11px; line-height: 1; flex: 0 0 auto; }
.det-badge-label { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.det-badge-conf {
  font-variant-numeric: tabular-nums;
  letter-spacing: 0;
  padding-left: 6px;
  margin-left: 2px;
  border-left: 1px solid var(--border);
  flex: 0 0 auto;
}

/* deterministic: rule-gated, instrument cyan, lock glyph, no percent */
.det-badge.is-deterministic {
  color: var(--accent-deep);
  background: var(--accent-pale);
  border-color: var(--border-accent);
}
.det-badge.is-deterministic .det-badge-conf { border-left-color: var(--border-accent); }

/* probabilistic: model-judged, gold edge, confidence percent shown */
.det-badge.is-probabilistic {
  color: var(--gold-deep);
  background: var(--gold-pale);
  border-color: var(--gold-soft);
}
.det-badge.is-probabilistic .det-badge-conf { border-left-color: var(--gold-soft); }

/* pending: a person owns the call, warn color, person glyph */
.det-badge.is-pending {
  color: var(--warn);
  background: var(--warn-wash);
  border-color: var(--warn);
}
.det-badge.is-pending .det-badge-conf { border-left-color: var(--warn); }

/* a row of claims wraps calmly, never pushes a horizontal scrollbar */
.det-badge-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  min-width: 0;
}

@media (prefers-reduced-motion: no-preference) {
  .det-badge { transition: border-color 0.16s ease, background 0.16s ease; }
}

/* ============================================================
   SHARED CONVENTION 2 of 2: SIMULATOR PREVIEW (.sim-preview)
   ============================================================
   A reusable panel any surface opens before a committing action, so the
   operator sees the result of the action before it is taken. Three sections:
   what always happens (deterministic), what is likely (probabilistic, with
   confidence), and what stays locked (the boundary list). The commit control
   stays disabled until the operator has seen this preview once for that action.

   Usage (built by the surface JS via createElement + textContent):
     <section class="sim-preview" aria-label="Simulator preview">
       <header class="sim-preview-head"> ... title ... </header>
       <div class="sim-preview-grid">
         <div class="sim-col is-deterministic"> ... </div>
         <div class="sim-col is-probabilistic"> ... </div>
         <div class="sim-col is-locked"> ... </div>
       </div>
       <footer class="sim-preview-foot"> ... commit control ... </footer>
     </section>
   Token-driven, WCAG-AA, overflow-safe: the grid uses minmax(0,1fr) so a long
   line wraps inside its column rather than widening the page.
   ============================================================ */
.sim-preview {
  border: 1px solid var(--border-accent);
  border-radius: var(--radius);
  background: var(--surface);
  box-shadow: var(--shadow-sm);
  overflow: hidden;                   /* clip any child that tries to overflow */
  min-width: 0;
  margin: var(--space) 0;
}
.sim-preview-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  padding: 14px 18px;
  background: var(--surface-2);
  border-bottom: 1px solid var(--border);
}
.sim-preview-title {
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 1.4px;
  text-transform: uppercase;
  color: var(--accent);
  min-width: 0;
}
.sim-preview-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(0, 1fr));
  gap: 1px;
  background: var(--border);          /* hairline gutters between columns */
}
.sim-col {
  background: var(--surface);
  padding: 16px 18px;
  min-width: 0;                       /* the overflow-safe column guard */
}
.sim-col-label {
  display: flex;
  align-items: center;
  gap: 6px;
  font-family: var(--mono);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 1px;
  text-transform: uppercase;
  margin-bottom: 10px;
}
.sim-col.is-deterministic .sim-col-label { color: var(--accent-deep); }
.sim-col.is-probabilistic .sim-col-label { color: var(--gold-deep); }
.sim-col.is-locked .sim-col-label { color: var(--text-dimmer); }
.sim-col ul { list-style: none; display: grid; gap: 8px; }
.sim-col li {
  font-size: 13px;
  line-height: 1.5;
  color: var(--text);
  padding-left: 16px;
  position: relative;
  overflow-wrap: anywhere;            /* a long token wraps, never overflows */
  word-break: break-word;
  min-width: 0;
}
.sim-col li::before {
  content: "";
  position: absolute;
  left: 0; top: 0.62em;
  width: 6px; height: 6px;
  border-radius: 2px;
  background: var(--text-dimmer);
}
.sim-col.is-deterministic li::before { background: var(--accent); }
.sim-col.is-probabilistic li::before { background: var(--gold); }
.sim-col.is-locked li { color: var(--text-dim); }
.sim-col.is-locked li::before {
  background: transparent;
  border: 1px solid var(--warn);
  border-radius: 999px;
}
.sim-preview-foot {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 12px;
  flex-wrap: wrap;
  padding: 14px 18px;
  background: var(--surface-2);
  border-top: 1px solid var(--border);
}
.sim-preview-note {
  font-size: 12px;
  color: var(--text-dim);
  margin-right: auto;
  min-width: 0;
}
.sim-preview [disabled] { opacity: 0.5; cursor: not-allowed; }

/* the shaper bar: dropdown filters + slider refinements the viewer sets to
   shape the simulated outcome. The three columns re-render live on change.
   Overflow-safe: the bar wraps, each control has min-width:0, and the grid
   never pushes the page wider at 1280px or 375px. */
.sim-shaper {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 12px 16px;
  padding: 12px 18px;
  background: var(--surface-2);
  border-bottom: 1px solid var(--border);
  min-width: 0;
}
.sim-shaper-ctl {
  display: flex;
  flex-direction: column;
  gap: 5px;
  min-width: 0;
  flex: 1 1 150px;
  max-width: 100%;
}
.sim-shaper-ctl.is-refine { flex: 1 1 180px; }
.sim-shaper-label {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
  font-family: var(--mono);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.8px;
  text-transform: uppercase;
  color: var(--text-dimmer);
  min-width: 0;
}
.sim-shaper-out {
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 600;
  color: var(--accent);
  flex: 0 0 auto;
}
.sim-shaper-select {
  width: 100%;
  max-width: 100%;
  min-width: 0;
  box-sizing: border-box;
  font-size: 13px;
  color: var(--text);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 7px 10px;
}
.sim-shaper-select:focus-visible {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 2px var(--accent-soft);
}
.sim-shaper-range {
  width: 100%;
  max-width: 100%;
  min-width: 0;
  box-sizing: border-box;
  accent-color: var(--accent);
  margin: 6px 0 2px;
}
.sim-shaper-range:focus-visible {
  outline: none;
  box-shadow: 0 0 0 2px var(--accent-soft);
  border-radius: 999px;
}

@media (max-width: 720px) {
  .sim-preview-grid { grid-template-columns: minmax(0, 1fr); }
}

/* ============================================================
   SNAKE-CAP SECTION TITLE — one reusable header treatment.
   The spaced uppercase mono grammar already used on micro-labels (SCOPE /
   WORKSPACE / REVIEW ID), promoted to a section-title style so headers across
   the surfaces read in one calm engineered voice. A short accent tick sits to
   the left of the words. Token-driven, AA in both themes, sizes with the
   reader. Use on a section heading where the snake-cap voice fits; it does not
   replace the display h1/h2 on hero plates.

   Usage (CSP-safe, built by the surface JS via createElement + textContent):
     <span class="snake-cap">How and where</span>            (kicker scale)
     <h3 class="snake-cap snake-cap-lg">Where AI helps you</h3>  (title scale)
   ============================================================ */
.snake-cap {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  font-family: var(--mono);
  font-weight: 600;
  font-size: 11px;
  letter-spacing: 1.8px;
  text-transform: uppercase;
  color: var(--accent);
  line-height: 1.4;
  margin: 0;
}
.snake-cap::before {
  content: "";
  width: 16px;
  height: 2px;
  border-radius: 2px;
  background: var(--accent);
  flex: 0 0 auto;
}
/* a larger section-title scale: still mono + spaced, but heavier and bigger so
   it can carry a panel heading rather than only a kicker */
.snake-cap-lg {
  font-size: clamp(13px, 1.4vw, 16px);
  letter-spacing: 2px;
  color: var(--text);
}
.snake-cap-lg::before { width: 22px; background: var(--accent); }
/* gold variant: reserved for the deliverable + the result heading only */
.snake-cap.is-gold,
.snake-cap.is-gold.snake-cap-lg { color: var(--gold-deep); }
.snake-cap.is-gold::before { background: var(--gold); }
/* a quiet variant for a secondary header that should sit back */
.snake-cap.is-dim { color: var(--text-dimmer); }
.snake-cap.is-dim::before { background: var(--subtle); }

/* ============================================================
   CONTROL + CHIP POLISH. A calm control grammar re-themed onto the Aero
   Datum palette (cyan for navigation, gold reserved for the deliverable, in
   both light and dark). The buttons gain the lift-on-hover plus focus-ring
   grammar. The chips and cards gain the calm hover the demo already uses on
   review cards, applied consistently. No new color token, no copy.
   ============================================================ */

/* the navigation CTAs lift a hair on hover (matches the card lift) and carry a
   visible focus ring; the deliverable CTA keeps gold and lifts the same way */
.primary-cta, .btn-primary, .secondary-cta, .btn-ghost, .packet-cta {
  transition: background 0.16s ease, border-color 0.16s ease, color 0.16s ease,
    transform 0.16s ease, box-shadow 0.16s ease;
}
.primary-cta:hover, .btn-primary:hover,
.secondary-cta:hover, .btn-ghost:hover,
.packet-cta:hover { transform: translateY(-1px); }
.primary-cta:focus-visible, .btn-primary:focus-visible,
.secondary-cta:focus-visible, .btn-ghost:focus-visible,
.packet-cta:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px var(--accent-pale), 0 0 0 1px var(--accent);
}
.packet-cta:focus-visible {
  box-shadow: 0 0 0 3px var(--gold-pale), 0 0 0 1px var(--gold);
}

/* a ghost pill control for a calm secondary action that should read as a pill
   rather than a block button */
.ghost-pill {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-family: var(--sans);
  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;
  border-bottom: none;
  transition: background 0.16s ease, border-color 0.16s ease, transform 0.16s ease;
}
.ghost-pill:hover { background: var(--accent-soft); border-color: var(--accent); transform: translateY(-1px); border-bottom: none; }
.ghost-pill:focus-visible { outline: none; box-shadow: 0 0 0 3px var(--accent-pale), 0 0 0 1px var(--accent); }
.ghost-pill .gp-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--accent); flex: 0 0 auto; }

/* the selectable chip gains a lift on hover + a real focus ring, so a
   filter chip reads as pressable and stays AA on its wash */
.chip { transition: background 0.14s ease, border-color 0.14s ease, color 0.14s ease, transform 0.14s ease; }
.chip:hover { border-color: var(--border-accent); color: var(--text); transform: translateY(-1px); }
.chip:focus-visible { outline: none; box-shadow: 0 0 0 3px var(--accent-pale), 0 0 0 1px var(--accent); }
.chip.on { color: var(--accent-deep); }

/* the ws-chip + cal-tag pick up the same calm lift so every chip family reads
   from one grammar */
.ws-chip { transition: border-color 0.14s ease, transform 0.14s ease; }
.ws-chip:hover { border-color: var(--accent); transform: translateY(-1px); }

/* the review / program / thread cards get a card-hover (lift + accent
   border + a slightly deeper shadow), refining the demo's existing hover */
.thread-card:focus-visible, .program-card:focus-visible, .review-card:focus-visible {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-pale), var(--shadow);
}

@media (prefers-reduced-motion: reduce) {
  .ghost-pill, .chip, .ws-chip { transition: none; }
  .ghost-pill:hover, .chip:hover, .ws-chip:hover { transform: none; }
  .primary-cta:hover, .btn-primary:hover, .secondary-cta:hover,
  .btn-ghost:hover, .packet-cta:hover { transform: none; }
}

/* ============================================================
   SHARED DOCK LAYER — one source of truth for every floating affordance,
   so the three (tour ribbon, help pill, ask-AI dock) can never collide again.
   ------------------------------------------------------------------------
   Three fixed zones, each with its own token:
   - TOP RIBBON (top-center): the tour starter, identical on every surface.
   - BOTTOM-RIGHT COLUMN: the Help pill (upper slot) stacked over the
     Ask-AI dock (lower slot) with a fixed gap. tooltip.css + assistant.css
     read these tokens, so neither can wander on top of the other.
   - BOTTOM-LEFT: the theme toggle stays alone in its own corner.
   - BOTTOM-CENTER: the gate.js status dock keeps the highest z so it is
     never occluded (its own inline style sets z 2147483646).
   z order rises with importance: theme toggle < dock column < tour ribbon
   < help overlay < gate dock.
   ============================================================ */
:root {
  /* fixed insets shared by every corner affordance */
  --dock-inset-x: 18px;          /* distance from the right edge */
  --dock-inset-bottom: 18px;     /* distance from the bottom edge */
  --dock-gap: 12px;              /* clear gap between stacked dock items */
  --dock-item-h: 44px;          /* nominal height of one dock pill */
  --dock-ribbon-top: 14px;       /* distance from the top edge */

  /* z layers, named so no two affordances guess each other's stack order */
  --z-theme-toggle: 2147483000;
  --z-dock-ask: 2147483100;      /* lower slot of the bottom-right column */
  --z-dock-help: 2147483120;     /* upper slot of the bottom-right column */
  --z-tour-ribbon: 2147483400;   /* the top ribbon */
  --z-help-overlay: 2147483600;  /* the help search overlay, over everything but the gate */
}

/* the bottom-right dock column anchors:
   - the Ask-AI pill sits at the bottom (the lower slot)
   - the Help pill sits one row up, lifted by the Ask pill height + the gap
   tooltip.css and assistant.css set ONLY position + z from these vars, so the
   geometry lives here and the two surfaces can never overlap. */

.ti-theme-toggle {
  position: fixed; left: 18px; bottom: 18px; z-index: var(--z-theme-toggle, 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; }
  .thread-card, .program-card, .review-card, .primary-cta, .secondary-cta, .packet-cta { transition: none; }
  .thread-card:hover, .program-card:hover, .review-card:hover, .primary-cta:hover, .secondary-cta:hover, .packet-cta:hover { transform: none; }
  * { scroll-behavior: auto !important; }
}
@media (max-width: 560px) {
  .ti-theme-toggle { left: 14px; bottom: 14px; width: 42px; height: 42px; }
}

/* ============================================================
   DOCK COLUMN GEOMETRY (bottom-right). Position + z only; the surfaces keep
   their own paint. The Ask-AI dock sits in the lower slot, the Help pill one
   row above it, so the two never overlap at 1280 or 375.
   ============================================================ */
/* lower slot: the Ask-AI pill (assistant.css paints it) */
.ti-ask {
  position: fixed;
  right: var(--dock-inset-x, 18px);
  bottom: var(--dock-inset-bottom, 18px);
  z-index: var(--z-dock-ask, 2147483100);
}
/* upper slot: the Help pill, lifted clear of the Ask pill by one row + the gap */
.ti-help-launch {
  position: fixed;
  right: var(--dock-inset-x, 18px);
  bottom: calc(var(--dock-inset-bottom, 18px) + var(--dock-item-h, 44px) + var(--dock-gap, 12px));
  z-index: var(--z-dock-help, 2147483120);
}
/* the expanded Ask-AI panel floats above BOTH dock pills so neither is covered,
   anchored to the same corner. Its bottom clears the two stacked pill rows. */
.ti-ask-panel {
  position: fixed;
  right: var(--dock-inset-x, 18px);
  bottom: calc(var(--dock-inset-bottom, 18px) + (var(--dock-item-h, 44px) + var(--dock-gap, 12px)) * 2);
  z-index: calc(var(--z-dock-help, 2147483120) + 5);
}

/* TOP slot of the column: the Leave-feedback pill, lifted two rows above the
   Ask-AI pill (clear of the Ask pill AND the Help pill below it), so all three
   stack and never overlap at 1280 or 375. feedback.css paints it. */
:root { --z-dock-feedback: 2147483140; }
.ti-feedback-launch {
  position: fixed;
  right: var(--dock-inset-x, 18px);
  bottom: calc(var(--dock-inset-bottom, 18px) + (var(--dock-item-h, 44px) + var(--dock-gap, 12px)) * 2);
  z-index: var(--z-dock-feedback, 2147483140);
}
/* the feedback panel anchors to the same corner, its bottom clearing all three
   stacked pill rows so no pill is covered while it is open. */
.ti-fb-panel {
  position: fixed;
  right: var(--dock-inset-x, 18px);
  bottom: calc(var(--dock-inset-bottom, 18px) + (var(--dock-item-h, 44px) + var(--dock-gap, 12px)) * 3);
  z-index: calc(var(--z-dock-feedback, 2147483140) + 5);
}

/* phone: keep the column, tighten the inset so all three pills stay on-screen
   and reachable above the static gate dock (the gate dock goes static under
   820px) */
@media (max-width: 560px) {
  :root { --dock-inset-x: 12px; --dock-inset-bottom: 14px; --dock-gap: 10px; }
}

/* ============================================================
   CLICKABLE CARD / ROW — the shared affordance for a card or feed row that
   opens its related result. Used by signals + dashboards (and anywhere a
   whole card routes somewhere) so no card is a dead end. Token-driven,
   keyboard-reachable, reduced-motion-safe. The inner link keeps its own
   click; this only lifts the whole surface and shows it is interactive.
   ============================================================ */
.is-clickable { cursor: pointer; transition: transform 0.16s ease, box-shadow 0.16s ease, border-color 0.16s ease; }
.is-clickable:hover { transform: translateY(-1px); border-color: var(--border-accent); box-shadow: var(--shadow-teal); }
.is-clickable:focus-visible { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-pale), var(--shadow-sm); }
@media (prefers-reduced-motion: reduce) {
  .is-clickable { transition: none; }
  .is-clickable:hover { transform: none; }
}