/* ─────────────────────────────────────────────────────────────
   adhd-health-companion · "quiet instrument"
   editorial restraint applied to a clinical journal

   Fonts self-hosted under /static/fonts/ — no third-party CDN.
   Privacy alignment fix per output/project-critical-analysis.md.
   ───────────────────────────────────────────────────────────── */

@font-face {
  font-family: 'Fraunces';
  src: url('/static/fonts/fraunces.woff2') format('woff2-variations'),
       url('/static/fonts/fraunces.woff2') format('woff2');
  font-weight: 100 900;
  font-style: normal italic;
  font-display: swap;
}

@font-face {
  font-family: 'Schibsted Grotesk';
  src: url('/static/fonts/schibsted-grotesk.ttf') format('truetype-variations'),
       url('/static/fonts/schibsted-grotesk.ttf') format('truetype');
  font-weight: 100 900;
  font-style: normal italic;
  font-display: swap;
}

@font-face {
  font-family: 'JetBrains Mono';
  src: url('/static/fonts/jetbrains-mono.ttf') format('truetype-variations'),
       url('/static/fonts/jetbrains-mono.ttf') format('truetype');
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

/* ── Tokens ─────────────────────────────────────────────────── */

:root {
  color-scheme: dark;

  /* Paper — warm dark, sepia-shifted */
  --paper-1: #0c0a06;
  --paper-2: #14110b;
  --paper-3: #1d1812;
  --paper-4: #261f15;

  /* Ink — warm bone */
  --ink-1: #f6efe2;
  --ink-2: #d6cdbb;
  --ink-3: #9a8f7b;
  --ink-4: #5d5443;
  --ink-5: #3a3225;

  /* Hairlines */
  --rule-soft:    rgba(246, 239, 226, 0.06);
  --rule-medium:  rgba(246, 239, 226, 0.12);
  --rule-strong:  rgba(246, 239, 226, 0.20);

  /* Signal — warm gold, used sparingly */
  --signal:       #c9a049;
  --signal-soft:  rgba(201, 160, 73, 0.14);
  --signal-line:  rgba(201, 160, 73, 0.40);

  /* States — muted, never screaming */
  --good:         #8fa974;
  --good-soft:    rgba(143, 169, 116, 0.14);
  --warn:         #c9a049;
  --warn-soft:    rgba(201, 160, 73, 0.14);
  --bad:          #b86d5d;
  --bad-soft:     rgba(184, 109, 93, 0.14);
  --info:         #6f8aab;
  --info-soft:    rgba(111, 138, 171, 0.14);

  /* Type */
  --font-display: 'Fraunces', 'Charter', 'Iowan Old Style', Georgia, serif;
  --font-body:    'Schibsted Grotesk', 'Söhne', system-ui, -apple-system, sans-serif;
  --font-mono:    'JetBrains Mono', 'SF Mono', 'IBM Plex Mono', ui-monospace, monospace;

  /* Spatial */
  --gutter: 1.25rem;
  --max-w: 44rem;
  --radius-sm: 6px;
  --radius-md: 12px;
  --radius-lg: 18px;

  /* Page-anchor accents (P2.4). Each top-level page surfaces a
     distinct accent in its eyebrow + section heads so navigation
     reads visually, not just textually. The base remains warm gold;
     these override on a per-page basis. */
  --page-accent: var(--signal);
  --page-accent-soft: var(--signal-soft);
  --page-accent-line: var(--signal-line);

  /* Motion */
  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);
  --reveal-stagger: 60ms;
}

/* ── Reset ──────────────────────────────────────────────────── */

*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; padding: 0; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body { min-height: 100dvh; }
img, svg { display: block; max-width: 100%; }
button, input, textarea, select { font: inherit; color: inherit; background: none; border: 0; }
a { color: inherit; text-decoration: none; }
ul, ol { list-style: none; }

/* ── Page foundation ────────────────────────────────────────── */

html {
  background: var(--paper-1);
}

body {
  font-family: var(--font-body);
  font-size: 15px;
  line-height: 1.5;
  color: var(--ink-1);
  background:
    radial-gradient(1200px 600px at 50% -10%, rgba(201, 160, 73, 0.04), transparent 60%),
    var(--paper-1);
  font-feature-settings: 'ss01', 'cv11';
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

main {
  max-width: var(--max-w);
  margin: 0 auto;
  padding: 1.25rem var(--gutter) 6rem;
}

/* Dashboard wide-mode: at ≥1024px, content gets a two-column layout
   instead of a 672px reading column in a 1280px void. The primary
   column is the action surface (today, trends, plan); the secondary
   column is reference (supplements, labs, data spine). The today's-
   session card and the today numerals stay full-width on top. */
main.dashboard-wide {
  max-width: 76rem;
}

/* Per-page accent overrides (P2.4). The body class names are set in
   base.html via the active variable. Each page gets a visually
   distinct anchor color so eyebrows + nav-active underline distinguish
   surfaces at a glance. */
body.page-dashboard   { --page-accent: var(--signal); --page-accent-soft: var(--signal-soft); --page-accent-line: var(--signal-line); }
body.page-checkin     { --page-accent: var(--good);   --page-accent-soft: var(--good-soft);   --page-accent-line: rgba(143, 169, 116, 0.40); }
body.page-intake      { --page-accent: var(--info);   --page-accent-soft: var(--info-soft);   --page-accent-line: rgba(111, 138, 171, 0.40); }
body.page-supplements { --page-accent: var(--signal); --page-accent-soft: var(--signal-soft); --page-accent-line: var(--signal-line); }
body.page-labs        { --page-accent: var(--info);   --page-accent-soft: var(--info-soft);   --page-accent-line: rgba(111, 138, 171, 0.40); }

.dash-grid {
  display: grid;
  grid-template-columns: 1fr;
  grid-template-areas:
    "hero"
    "today"
    "trends"
    "workouts"
    "plan"
    "supplements"
    "labs"
    "data-spine";
  gap: 1.75rem;
  align-items: start;
}

@media (min-width: 1024px) {
  .dash-grid {
    grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr);
    grid-template-areas:
      "hero        hero"
      "today       today"
      "trends      supplements"
      "workouts    labs"
      "plan        data-spine";
    gap: 1.5rem 2rem;
  }
}

.dash-area-hero        { grid-area: hero; }
.dash-area-today       { grid-area: today; }
.dash-area-trends      { grid-area: trends; }
.dash-area-workouts    { grid-area: workouts; }
.dash-area-supplements { grid-area: supplements; }
.dash-area-labs        { grid-area: labs; }
.dash-area-plan        { grid-area: plan; }
.dash-area-data-spine  { grid-area: data-spine; }

/* Override the global "section + section { margin-top: 2.25rem }"
   inside the grid — the grid handles spacing now. */
.dash-grid > section { margin-top: 0; }

/* paper grain — subtle radial vignette only, no SVG noise on initial render */
@media (min-width: 720px) {
  body::before {
    content: '';
    position: fixed; inset: 0;
    pointer-events: none;
    background:
      radial-gradient(circle at 12% 5%, rgba(201, 160, 73, 0.025), transparent 30%),
      radial-gradient(circle at 88% 80%, rgba(143, 169, 116, 0.018), transparent 35%);
    z-index: 0;
  }
}

/* ── Type primitives ───────────────────────────────────────── */

.serif {
  font-family: var(--font-display);
  font-optical-sizing: auto;
  font-variation-settings: 'opsz' 24, 'SOFT' 50, 'wght' 400;
}

.italic {
  font-family: var(--font-display);
  font-style: italic;
  font-variation-settings: 'opsz' 24, 'SOFT' 50, 'wght' 400;
}

.mono {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums slashed-zero;
}

/* P2.4 + P2.5: eyebrows now carry the page accent via a small leading
   tick; section heads got slightly tighter rhythm. The tick gives
   the eye a per-section landmark without claiming the whole eyebrow. */
.eyebrow {
  font-family: var(--font-body);
  font-size: 0.6875rem;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-3);
  display: inline-flex;
  align-items: center;
  gap: 0.625rem;
  position: relative;
}

/* Leading tick — uses the page-accent color so identical eyebrows
   read as belonging to a particular surface. */
.eyebrow::before {
  content: '';
  display: inline-block;
  width: 0.875rem;
  height: 1px;
  background: var(--page-accent);
  opacity: 0.7;
  flex-shrink: 0;
}

/* Centered variant (used in legacy ornaments) keeps a pair of rules. */
.eyebrow.center {
  display: flex;
}
.eyebrow.center::before,
.eyebrow.center::after {
  content: '';
  height: 1px;
  background: var(--rule-soft);
  flex: 1;
  width: auto;
}

.caption {
  font-family: var(--font-display);
  font-style: italic;
  font-variation-settings: 'opsz' 14, 'SOFT' 80, 'wght' 400;
  font-size: 0.875rem;
  color: var(--ink-3);
  letter-spacing: 0.005em;
}

.dim { color: var(--ink-3); }
.faint { color: var(--ink-4); }

/* ── Masthead ──────────────────────────────────────────────── */

.masthead {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  padding: 0.5rem 0 1.5rem;
  border-bottom: 1px solid var(--rule-soft);
  margin-bottom: 1.75rem;
  position: relative;
}

.masthead .nameplate {
  font-family: var(--font-display);
  font-size: clamp(2.25rem, 6.5vw, 3.5rem);
  font-variation-settings: 'opsz' 144, 'SOFT' 30, 'wght' 380;
  letter-spacing: -0.03em;
  line-height: 1;
  color: var(--ink-1);
}

.masthead .nameplate em {
  font-style: italic;
  color: var(--page-accent);
  font-variation-settings: 'opsz' 144, 'SOFT' 70, 'wght' 320;
  transition: color 280ms var(--ease);
}

/* P2.3: status row under the nameplate. Date + live ingest indicator
   so the masthead reads as a status bar, not just a wordmark. */
.masthead .status-row {
  display: flex; align-items: baseline;
  flex-wrap: wrap;
  gap: 0.875rem;
  margin-top: 0.5rem;
}

.masthead .dateline {
  font-family: var(--font-display);
  font-style: italic;
  font-variation-settings: 'opsz' 14, 'SOFT' 80, 'wght' 400;
  font-size: 0.95rem;
  color: var(--ink-3);
  letter-spacing: 0.01em;
}

.masthead .live-indicator {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-family: var(--font-mono);
  font-size: 0.7rem;
  letter-spacing: 0.05em;
  color: var(--ink-3);
}
.masthead .live-indicator::before {
  content: '';
  display: inline-block;
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--good);
  box-shadow: 0 0 0 0 rgba(143, 169, 116, 0.55);
  animation: live-pulse 2.4s var(--ease) infinite;
}
.masthead .live-indicator.is-stale::before {
  background: var(--ink-4);
  animation: none;
  box-shadow: none;
}
@keyframes live-pulse {
  0%   { box-shadow: 0 0 0 0   rgba(143, 169, 116, 0.55); }
  70%  { box-shadow: 0 0 0 6px rgba(143, 169, 116, 0); }
  100% { box-shadow: 0 0 0 0   rgba(143, 169, 116, 0); }
}
@media (prefers-reduced-motion: reduce) {
  .masthead .live-indicator::before { animation: none; }
}

.masthead nav {
  margin-top: 0.875rem;
  display: flex;
  gap: 1.25rem;
  font-size: 0.78125rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-3);
}

.masthead nav a {
  position: relative;
  padding: 2px 0;
  transition: color 200ms var(--ease);
}

.masthead nav a:hover { color: var(--ink-1); }

.masthead nav a.is-active {
  color: var(--ink-1);
}
.masthead nav a.is-active::after {
  content: '';
  position: absolute;
  left: 0; right: 0; bottom: -2px;
  height: 1px;
  background: var(--page-accent);
  transition: background 280ms var(--ease);
}

/* ── Section eyebrow + spacing rhythm ──────────────────────── */

/* P2.5: tighter vertical rhythm. Section spacing reduced ~25%; the
   grid layout already owns gaps inside the dashboard. */
section + section { margin-top: 1.75rem; }
@media (min-width: 720px) {
  section + section { margin-top: 2rem; }
}

.section-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  margin-bottom: 0.75rem;
}

/* ── "Today" hero numerals ─────────────────────────────────── */

.today-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.5rem;
  padding: 0.5rem 0 0.25rem;
}

@media (min-width: 540px) {
  .today-grid {
    grid-template-columns: repeat(3, 1fr);
    gap: 1rem;
  }
}

.today-cell {
  display: flex;
  flex-direction: column;
  gap: 0.125rem;
  padding: 0.25rem 0;
  border-bottom: 1px solid var(--rule-soft);
}

@media (min-width: 540px) {
  .today-cell { border-bottom: 0; border-right: 1px solid var(--rule-soft); padding: 0 1rem; }
  .today-cell:last-child { border-right: 0; padding-right: 0; }
  .today-cell:first-child { padding-left: 0; }
}

.today-cell .num {
  font-family: var(--font-display);
  font-variation-settings: 'opsz' 144, 'SOFT' 100, 'wght' 360;
  font-size: clamp(3rem, 11vw, 4.75rem);
  line-height: 0.95;
  letter-spacing: -0.035em;
  color: var(--ink-1);
  font-feature-settings: 'lnum', 'tnum';
}

.today-cell .num .frac {
  font-size: 0.55em;
  color: var(--ink-2);
  vertical-align: 0.1em;
  letter-spacing: -0.01em;
}

.today-cell .label {
  font-family: var(--font-display);
  font-style: italic;
  font-variation-settings: 'opsz' 14, 'SOFT' 80, 'wght' 400;
  font-size: 0.875rem;
  color: var(--ink-3);
  margin-top: 0.5rem;
}

.today-cell .delta {
  font-family: var(--font-mono);
  font-size: 0.75rem;
  color: var(--ink-3);
  margin-top: 0.25rem;
  letter-spacing: 0;
  font-variant-numeric: tabular-nums slashed-zero;
}

.today-cell .delta.up { color: var(--warn); }
.today-cell .delta.down { color: var(--good); }
.today-cell .delta.neutral { color: var(--ink-3); }

.today-cell.empty .num {
  color: var(--ink-4);
  font-variation-settings: 'opsz' 144, 'SOFT' 30, 'wght' 280;
}

/* ── Sparkline panels ─────────────────────────────────────── */

.spark-block {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.25rem;
  padding-top: 0.25rem;
}

.spark-row {
  display: grid;
  grid-template-columns: minmax(5rem, 7rem) 1fr auto;
  align-items: center;
  gap: 1rem;
  padding: 0.5rem 0;
  border-bottom: 1px dashed var(--rule-soft);
}

.spark-row:last-child { border-bottom: 0; }

.spark-row .label {
  font-family: var(--font-display);
  font-style: italic;
  font-variation-settings: 'opsz' 14, 'SOFT' 80, 'wght' 400;
  color: var(--ink-2);
  font-size: 0.95rem;
}

.spark {
  width: 100%;
  height: 38px;
  overflow: visible;
}

.spark .line {
  fill: none;
  stroke: var(--ink-2);
  stroke-width: 1.25;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.spark .line.weight  { stroke: var(--info); }
.spark .line.energy  { stroke: var(--good); }
.spark .line.sleep   { stroke: var(--signal); }

.spark .area {
  fill: currentColor;
  opacity: 0.08;
}

.spark .dot {
  fill: var(--paper-1);
  stroke-width: 1.25;
}

.spark .gridline {
  stroke: var(--rule-soft);
  stroke-width: 1;
  stroke-dasharray: 2 4;
}

.spark-stats {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  font-family: var(--font-mono);
  font-size: 0.75rem;
  color: var(--ink-3);
  font-variant-numeric: tabular-nums slashed-zero;
  line-height: 1.3;
}
.spark-stats .now { color: var(--ink-1); font-size: 0.875rem; }

/* ── List rows (workouts, supplements, plan, labs) ─────────── */

.row-list {
  display: flex;
  flex-direction: column;
}

/* P2.6: list rows now have a subtle hover state (background lift to
   paper-3) so tap targets are visually obvious. Padding bumped a hair
   for better thumb targets. */
.row {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: baseline;
  gap: 1rem;
  padding: 0.75rem 0.625rem;
  margin: 0 -0.625rem;
  border-bottom: 1px solid var(--rule-soft);
  border-radius: 6px;
  transition: background 160ms var(--ease);
}

.row:last-child { border-bottom: 0; }

.row:has(a.row-link):hover {
  background: var(--paper-3);
}

.row a.row-link {
  display: contents;
  cursor: pointer;
}

.row a.row-link:hover .row-lhs { color: var(--page-accent); }

.row .row-lhs {
  font-size: 0.95rem;
  color: var(--ink-1);
  transition: color 180ms var(--ease);
}

/* P2.2: row sub-text moves from italic display → sans body. Italic
   serif now reserved for accents and intentional thoughts. */
.row .row-lhs .sub {
  display: block;
  font-family: var(--font-body);
  font-style: normal;
  font-weight: 400;
  color: var(--ink-3);
  font-size: 0.8125rem;
  margin-top: 0.125rem;
  letter-spacing: 0.005em;
}

.row .row-rhs {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums slashed-zero;
  font-size: 0.8125rem;
  color: var(--ink-3);
  text-align: right;
  white-space: nowrap;
}

.row .row-rhs.with-pill { display: flex; align-items: center; gap: 0.5rem; }

/* Row variants for the plan/this-week panel — visible past/today
   distinction so the eye can locate "where am I in the week" without
   reading every label. */
.row.is-today .row-lhs strong {
  color: var(--signal);
  font-weight: 600;
}
.row.is-today .row-rhs {
  color: var(--ink-1);
}
.row.is-past {
  opacity: 0.45;
}

/* ── Verdict pills (wax-seal feel) ─────────────────────────── */

.pill {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  padding: 0.1875rem 0.5rem 0.1875rem;
  border-radius: 3px;
  font-size: 0.625rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  font-weight: 600;
  font-family: var(--font-body);
  border: 1px solid transparent;
  position: relative;
  white-space: nowrap;
}

.pill.discuss { background: var(--warn-soft); color: var(--warn); border-color: rgba(201, 160, 73, 0.3); }
.pill.reject  { background: var(--bad-soft);  color: var(--bad);  border-color: rgba(184, 109, 93, 0.3); }
.pill.clear   { background: var(--good-soft); color: var(--good); border-color: rgba(143, 169, 116, 0.3); }
.pill.pending { background: var(--info-soft); color: var(--info); border-color: rgba(111, 138, 171, 0.3); }
.pill.hard    { background: var(--bad-soft);  color: var(--bad);  border-color: rgba(184, 109, 93, 0.45); padding-left: 0.625rem; }

.pill.hard::before {
  content: '';
  width: 5px; height: 5px; border-radius: 50%;
  background: var(--bad);
  margin-right: 0.0625rem;
}

/* ── Note callouts (the "draw timing" reminder, etc.) ──────── */

.note {
  margin-top: 0.875rem;
  padding: 0.75rem 1rem 0.75rem 1.125rem;
  border-left: 1px solid var(--signal-line);
  background: linear-gradient(90deg, var(--signal-soft) 0%, transparent 60%);
  font-family: var(--font-display);
  font-style: italic;
  font-variation-settings: 'opsz' 14, 'SOFT' 80, 'wght' 400;
  font-size: 0.875rem;
  color: var(--ink-2);
  border-radius: 0 4px 4px 0;
}

.note .micro {
  font-family: var(--font-body);
  font-style: normal;
  font-size: 0.6875rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--signal);
  margin-right: 0.5rem;
}

/* ── Section ornament ──────────────────────────────────────── */

.ornament {
  display: flex;
  justify-content: center;
  margin: 2.25rem 0 1.5rem;
  color: var(--ink-4);
  font-size: 0.875rem;
  letter-spacing: 0.5em;
  user-select: none;
}

/* ── Footer ─────────────────────────────────────────────────── */

footer.colophon {
  margin-top: 3.5rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--rule-soft);
  font-family: var(--font-body);
  font-size: 0.6875rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-4);
  text-align: center;
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 0.5rem 1rem;
}

footer.colophon span + span::before {
  content: '·';
  margin-right: 1rem;
  color: var(--ink-5);
}

footer.colophon .mark {
  color: var(--signal);
}

/* ── Form (checkin) ─────────────────────────────────────────── */

.checkin-form {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
  padding-top: 0.5rem;
}

.field {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.field label {
  font-family: var(--font-display);
  font-style: italic;
  font-variation-settings: 'opsz' 14, 'SOFT' 80, 'wght' 400;
  color: var(--ink-2);
  font-size: 1rem;
}

.field .hint {
  font-size: 0.75rem;
  color: var(--ink-4);
  letter-spacing: 0.04em;
}

.field input[type='number'],
.field input[type='text'] {
  width: 100%;
  font-family: var(--font-display);
  font-variation-settings: 'opsz' 144, 'SOFT' 80, 'wght' 360;
  font-size: clamp(3rem, 10vw, 5rem);
  line-height: 1;
  letter-spacing: -0.03em;
  color: var(--ink-1);
  padding: 0.5rem 0;
  border-bottom: 2px solid var(--rule-medium);
  caret-color: var(--signal);
  font-feature-settings: 'lnum', 'tnum';
  outline: none;
  transition: border-color 220ms var(--ease);
  -moz-appearance: textfield;
  appearance: textfield;
}

/* Kill the default browser spinner arrows on number inputs. */
.field input[type='number']::-webkit-outer-spin-button,
.field input[type='number']::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

.field input[type='number']:focus,
.field input[type='text']:focus {
  border-bottom-color: var(--signal);
  border-bottom-width: 2px;
}

.field input::placeholder {
  color: var(--ink-5);
  font-variation-settings: 'opsz' 144, 'SOFT' 30, 'wght' 280;
}

.field textarea {
  width: 100%;
  min-height: 4rem;
  font-family: var(--font-body);
  font-size: 0.95rem;
  color: var(--ink-1);
  padding: 0.625rem 0;
  border-bottom: 1px solid var(--rule-medium);
  resize: vertical;
  outline: none;
  transition: border-color 220ms var(--ease);
}

.field textarea:focus { border-bottom-color: var(--signal); }
.field textarea::placeholder { color: var(--ink-5); font-style: italic; }

.field-row {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.5rem;
}

@media (min-width: 540px) {
  .field-row { grid-template-columns: repeat(3, 1fr); gap: 1.5rem; }
}

.submit-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin-top: 0.5rem;
  padding-top: 1.25rem;
  border-top: 1px solid var(--rule-soft);
}

/* Unified primary action button. Gold pill with shadow, italic
   Fraunces label. This is THE primary CTA across the whole app —
   today's-session card, /checkin, /intake forms, /plan/save. */
button.submit, a.submit {
  display: inline-flex; align-items: center; gap: 0.4rem;
  font-family: var(--font-display);
  font-variation-settings: 'opsz' 14, 'SOFT' 60, 'wght' 500;
  font-style: italic;
  font-size: 1.0625rem;
  color: var(--paper-1);
  background: var(--signal);
  padding: 0.7rem 1.5rem;
  border-radius: 999px;
  cursor: pointer;
  text-decoration: none;
  letter-spacing: 0.005em;
  box-shadow: 0 4px 16px -4px rgba(201, 160, 73, 0.4);
  transition: transform 220ms var(--ease), box-shadow 220ms var(--ease);
}

button.submit:hover, a.submit:hover {
  transform: translateY(-1px);
  box-shadow: 0 8px 24px -6px rgba(201, 160, 73, 0.5);
}

button.submit:active, a.submit:active { transform: translateY(0); }

button.submit.is-saving {
  background: var(--good);
  color: var(--paper-1);
  pointer-events: none;
  box-shadow: 0 4px 16px -4px rgba(143, 169, 116, 0.4);
}

button.submit.is-saving::before {
  content: '✓ ';
  display: inline-block;
  margin-right: 0.125rem;
}

a.skip {
  font-family: var(--font-display);
  font-style: italic;
  font-size: 0.875rem;
  color: var(--ink-3);
  border-bottom: 1px dashed var(--rule-medium);
  padding-bottom: 1px;
  transition: color 180ms var(--ease);
}

a.skip:hover { color: var(--ink-1); }

/* ── Supplement detail ─────────────────────────────────────── */

.detail-head {
  padding: 1rem 0 1.25rem;
  border-bottom: 1px solid var(--rule-soft);
  margin-bottom: 1.5rem;
}

.detail-head .name {
  font-family: var(--font-display);
  font-variation-settings: 'opsz' 144, 'SOFT' 50, 'wght' 380;
  font-size: clamp(1.75rem, 5vw, 2.25rem);
  letter-spacing: -0.015em;
  line-height: 1.1;
  color: var(--ink-1);
}

.detail-head .verdict {
  margin-top: 0.875rem;
  display: flex;
  align-items: center;
  gap: 0.75rem;
  flex-wrap: wrap;
}

.detail-head .verdict-text {
  font-family: var(--font-display);
  font-style: italic;
  font-variation-settings: 'opsz' 14, 'SOFT' 80, 'wght' 400;
  color: var(--ink-2);
  font-size: 0.95rem;
}

.detail-meta {
  display: grid;
  grid-template-columns: max-content 1fr;
  gap: 0.25rem 1.25rem;
  margin-top: 1rem;
  font-size: 0.8125rem;
}

.detail-meta dt {
  font-family: var(--font-body);
  font-size: 0.6875rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-3);
  align-self: center;
}

.detail-meta dd {
  font-family: var(--font-mono);
  font-size: 0.8125rem;
  color: var(--ink-2);
  word-break: break-word;
}

.detail-meta dd a { color: var(--signal); border-bottom: 1px solid var(--signal-line); }

/* P2.2: the default prose register is now Schibsted Grotesk, not
   Fraunces. Italic-serif is reserved for accents (em → matched
   thought). Rule of thumb: italic serif = a *thought*; sans = a
   *fact*. The previous all-italic-everywhere read like a literary
   essay where it should read like a tool. */
.prose {
  font-family: var(--font-body);
  font-weight: 400;
  font-size: 1rem;
  line-height: 1.6;
  color: var(--ink-2);
  letter-spacing: 0.005em;
  margin: 0.875rem 0 1.25rem;
  max-width: 36rem;
}

.prose em {
  font-family: var(--font-display);
  font-style: italic;
  font-variation-settings: 'opsz' 24, 'SOFT' 80, 'wght' 420;
  color: var(--ink-1);
}

/* Used on key product copy where the literary register IS the right
   call (supplement detail rationale, lab handoff intro). */
.prose-display {
  font-family: var(--font-display);
  font-variation-settings: 'opsz' 24, 'SOFT' 50, 'wght' 380;
  font-size: 1.0625rem;
  line-height: 1.55;
  color: var(--ink-2);
  letter-spacing: 0.005em;
  margin: 1rem 0 1.5rem;
  max-width: 36rem;
}
.prose-display em {
  font-style: italic;
  font-variation-settings: 'opsz' 24, 'SOFT' 80, 'wght' 380;
  color: var(--ink-1);
}

.ingredients {
  display: flex;
  flex-direction: column;
}

.ingredients li {
  padding: 0.625rem 0;
  border-bottom: 1px solid var(--rule-soft);
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 1rem;
  font-size: 0.95rem;
}

.ingredients li:last-child { border-bottom: 0; }

.ingredients .name {
  color: var(--ink-1);
}

.ingredients sup {
  font-family: var(--font-display);
  font-style: italic;
  font-variation-settings: 'opsz' 14, 'SOFT' 80, 'wght' 400;
  font-size: 0.7em;
  color: var(--signal);
  margin-left: 0.125rem;
  vertical-align: super;
  line-height: 0;
}

.ingredients .qty {
  font-family: var(--font-mono);
  font-size: 0.8125rem;
  color: var(--ink-3);
}

.footnotes {
  margin-top: 2rem;
  padding-top: 1.25rem;
  border-top: 1px solid var(--rule-soft);
  font-size: 0.8125rem;
  line-height: 1.5;
  color: var(--ink-3);
}

.footnotes ol { counter-reset: fn; }
.footnotes li {
  position: relative;
  padding: 0.375rem 0 0.375rem 1.5rem;
  font-family: var(--font-display);
  font-variation-settings: 'opsz' 14, 'SOFT' 50, 'wght' 380;
  font-size: 0.875rem;
  color: var(--ink-2);
}
.footnotes li::before {
  counter-increment: fn;
  content: counter(fn);
  position: absolute;
  left: 0; top: 0.5rem;
  font-style: italic;
  font-variation-settings: 'opsz' 14, 'SOFT' 80, 'wght' 400;
  color: var(--signal);
  font-size: 0.75rem;
}

/* ── Empty / pending states ────────────────────────────────── */

.empty-state {
  padding: 1.5rem 0;
  text-align: center;
  color: var(--ink-3);
}

.empty-state .glyph {
  font-family: var(--font-display);
  font-style: italic;
  font-variation-settings: 'opsz' 144, 'SOFT' 100, 'wght' 280;
  font-size: 4rem;
  color: var(--ink-4);
  line-height: 1;
}

.empty-state p {
  margin-top: 0.5rem;
  font-family: var(--font-display);
  font-style: italic;
  font-size: 0.95rem;
}

/* Collapsed empty-state for dashboard panels. Replaces the full
   centered glyph + paragraph with a single quiet line — the panel
   hint is the "this section will populate when X" message, not a
   200px tall placeholder. */
.empty-line {
  font-family: var(--font-display); font-style: italic;
  font-variation-settings: 'opsz' 14, 'SOFT' 80, 'wght' 400;
  font-size: 0.875rem;
  color: var(--ink-4);
  padding: 0.5rem 0;
}

/* Stronger ALARM treatment for ingest stats. is-attention (yellow
   gold) for "files awaiting" — visible but not panic. is-error
   (rust) for "failed in 24h" — the real alarm. Previously both
   used the same gold; that erased the safety signal. */
.ingest-stat.is-attention {
  border-color: var(--signal-line);
  background: linear-gradient(135deg,
    rgba(201, 160, 73, 0.18),
    var(--paper-2) 70%);
  box-shadow: 0 0 0 1px var(--signal-line) inset;
}
.ingest-stat.is-attention .ingest-num {
  color: var(--signal);
  font-variation-settings: 'opsz' 144, 'SOFT' 60, 'wght' 500;
}

.ingest-stat.is-error {
  border-color: rgba(184, 109, 93, 0.55);
  background: linear-gradient(135deg,
    rgba(184, 109, 93, 0.20),
    var(--paper-2) 70%);
  box-shadow: 0 0 0 1px rgba(184, 109, 93, 0.45) inset;
}
.ingest-stat.is-error .ingest-num {
  color: var(--bad);
  font-variation-settings: 'opsz' 144, 'SOFT' 60, 'wght' 500;
}


/* ── Intake form polish ───────────────────────────────────── */

/* Sticky progress strip for intake forms — "answered / total" + bar. */
.intake-progress {
  position: sticky;
  top: 0;
  z-index: 10;
  margin: 0 -1.25rem 1.5rem;
  padding: 0.625rem 1.25rem;
  background: rgba(12, 10, 6, 0.92);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--rule-soft);
  display: flex; align-items: center; gap: 1rem;
  font-family: var(--font-mono);
  font-size: 0.75rem;
  color: var(--ink-3);
  letter-spacing: 0.04em;
}
.intake-progress .progress-counter {
  font-family: var(--font-display);
  font-variation-settings: 'opsz' 14, 'SOFT' 80, 'wght' 500;
  font-style: italic;
  color: var(--ink-1);
  font-size: 0.875rem;
  white-space: nowrap;
}
.intake-progress .progress-counter strong {
  color: var(--signal);
  font-variation-settings: 'opsz' 14, 'SOFT' 60, 'wght' 600;
}
.intake-progress .progress-bar-track {
  flex: 1;
  height: 3px;
  background: var(--rule-soft);
  border-radius: 999px;
  overflow: hidden;
}
.intake-progress .progress-bar-fill {
  height: 100%;
  background: linear-gradient(90deg, var(--signal), var(--good));
  border-radius: 999px;
  transition: width 280ms var(--ease);
}

/* Better radio button rendering — kill the OS circle, render our own
   filled-dot indicator inside a custom-sized control. */
.intake-option input[type='radio'] {
  appearance: none;
  -webkit-appearance: none;
  width: 16px;
  height: 16px;
  border: 1.5px solid var(--ink-4);
  border-radius: 50%;
  margin: 0;
  flex-shrink: 0;
  background: transparent;
  position: relative;
  transition: border-color 150ms var(--ease), background 150ms var(--ease);
}

.intake-option input[type='radio']::after {
  content: '';
  position: absolute;
  inset: 0;
  margin: auto;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--signal);
  transform: scale(0);
  transition: transform 150ms var(--ease);
}

.intake-option input[type='radio']:checked {
  border-color: var(--signal);
}
.intake-option input[type='radio']:checked::after {
  transform: scale(1);
}

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

/* The "selected" affordance lives on the LABEL via :has(), so the whole
   row reads as picked. */
.intake-option:has(input:checked) {
  background: var(--signal-soft);
  border-color: var(--signal-line);
}

/* ── Lab status timeline ───────────────────────────────────── */

.timeline {
  display: flex;
  flex-direction: column;
  margin: 0.5rem 0 0.75rem;
}

.tl-step {
  display: grid;
  grid-template-columns: 1.5rem 1fr auto;
  gap: 0.875rem;
  align-items: baseline;
  padding: 0.625rem 0;
  position: relative;
}

.tl-step::before {
  content: '';
  position: absolute;
  left: 0.4375rem;
  top: 1.625rem;
  bottom: -0.625rem;
  width: 1px;
  background: var(--rule-soft);
}

.tl-step:last-child::before { display: none; }

.tl-step .marker {
  width: 0.75rem; height: 0.75rem;
  border-radius: 50%;
  border: 1px solid var(--ink-4);
  background: var(--paper-1);
  margin-top: 0.375rem;
  position: relative;
  z-index: 1;
}

.tl-step.done .marker {
  background: var(--signal);
  border-color: var(--signal);
}

.tl-step.pending .marker {
  border: 1px dashed var(--ink-4);
  background: transparent;
}

.tl-step .what {
  font-size: 0.95rem;
  color: var(--ink-1);
}
.tl-step.pending .what { color: var(--ink-3); }

.tl-step .when {
  font-family: var(--font-mono);
  font-size: 0.75rem;
  color: var(--ink-3);
  font-variant-numeric: tabular-nums;
}

/* ── Reveal animation (page load only) ─────────────────────── */

@media (prefers-reduced-motion: no-preference) {
  .reveal {
    opacity: 0;
    transform: translateY(8px);
    animation: reveal 600ms var(--ease) forwards;
  }
  .reveal:nth-child(1)  { animation-delay: calc(0 * var(--reveal-stagger)); }
  .reveal:nth-child(2)  { animation-delay: calc(1 * var(--reveal-stagger)); }
  .reveal:nth-child(3)  { animation-delay: calc(2 * var(--reveal-stagger)); }
  .reveal:nth-child(4)  { animation-delay: calc(3 * var(--reveal-stagger)); }
  .reveal:nth-child(5)  { animation-delay: calc(4 * var(--reveal-stagger)); }
  .reveal:nth-child(6)  { animation-delay: calc(5 * var(--reveal-stagger)); }
  .reveal:nth-child(7)  { animation-delay: calc(6 * var(--reveal-stagger)); }
  .reveal:nth-child(8)  { animation-delay: calc(7 * var(--reveal-stagger)); }

  @keyframes reveal {
    to { opacity: 1; transform: none; }
  }

  /* HTMX swap animation */
  .htmx-swapping {
    opacity: 0.4;
    transition: opacity 200ms var(--ease);
  }
  .htmx-settling .reveal { animation: none; opacity: 1; transform: none; }
}

/* ── Tablet / desktop scaling ──────────────────────────────── */

@media (min-width: 720px) {
  main { padding: 2rem var(--gutter) 6rem; }
  .masthead { padding: 1rem 0 2rem; margin-bottom: 2.25rem; }
  section + section { margin-top: 3rem; }
}

/* ── Today's session card — gravity center of the dashboard ── */

.todays-session-card {
  position: relative;
  margin: 0 0 2rem;
  padding: 1.5rem 1.5rem 1.75rem;
  border-radius: 18px;
  border: 1px solid var(--rule-medium);
  background:
    radial-gradient(800px 200px at 0% 0%, rgba(201, 160, 73, 0.10), transparent 60%),
    linear-gradient(160deg, var(--paper-3) 0%, var(--paper-2) 65%);
  overflow: hidden;
}

.todays-session-card.is-action {
  border-color: var(--signal-line);
  background:
    radial-gradient(900px 240px at 0% 0%, rgba(201, 160, 73, 0.18), transparent 55%),
    radial-gradient(700px 200px at 100% 100%, rgba(143, 169, 116, 0.08), transparent 50%),
    linear-gradient(160deg, #1f1812 0%, var(--paper-2) 70%);
  box-shadow: 0 1px 0 rgba(255,255,255,0.03) inset, 0 8px 24px -16px rgba(0,0,0,0.5);
}

.todays-session-card.is-rest {
  background: linear-gradient(160deg, var(--paper-2) 0%, var(--paper-1) 70%);
  border-style: dashed;
  border-color: var(--rule-soft);
  opacity: 0.85;
}

.todays-session-card.is-empty {
  background: var(--paper-2);
  border-style: dashed;
  border-color: var(--rule-soft);
}

.tsc-eyebrow {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 1rem; margin-bottom: 0.875rem;
}

.tsc-headline {
  font-family: var(--font-display);
  font-variation-settings: 'opsz' 144, 'SOFT' 60, 'wght' 380;
  font-size: clamp(1.4rem, 4.5vw, 2rem);
  line-height: 1.15;
  letter-spacing: -0.02em;
  color: var(--ink-1);
  margin-bottom: 0.625rem;
}

.tsc-headline .tsc-prompt strong {
  color: var(--signal);
  font-variation-settings: 'opsz' 144, 'SOFT' 60, 'wght' 500;
}

.tsc-headline .tsc-mark {
  display: inline-block;
  font-family: var(--font-display);
  font-style: italic;
  font-variation-settings: 'opsz' 144, 'SOFT' 100, 'wght' 320;
  color: var(--signal);
  margin-right: 0.5rem;
  letter-spacing: 0;
}

.tsc-sub {
  font-family: var(--font-display);
  font-style: italic;
  font-variation-settings: 'opsz' 14, 'SOFT' 80, 'wght' 400;
  color: var(--ink-3);
  font-size: 0.95rem;
  line-height: 1.5;
  max-width: 36rem;
}

.tsc-sub code {
  font-family: var(--font-mono);
  font-style: normal;
  font-size: 0.85em;
  background: rgba(201, 160, 73, 0.10);
  border: 1px solid rgba(201, 160, 73, 0.25);
  border-radius: 4px;
  padding: 0.05em 0.35em;
  color: var(--signal);
}

.tsc-meta {
  display: flex; flex-wrap: wrap; gap: 0.875rem 1.25rem;
  margin: 0.875rem 0 1.25rem;
  font-family: var(--font-body); font-size: 0.875rem; color: var(--ink-2);
}

.tsc-meta-item .micro {
  font-family: var(--font-body); font-size: 0.625rem;
  letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--ink-3); margin-right: 0.5rem;
}

.tsc-actions {
  display: flex; align-items: center; gap: 1.25rem;
  flex-wrap: wrap; margin-top: 0.5rem;
}

.tsc-cta {
  display: inline-flex; align-items: center; gap: 0.4rem;
  padding: 0.7rem 1.25rem;
  background: var(--signal);
  color: var(--paper-1);
  border-radius: 999px;
  font-family: var(--font-display); font-style: italic;
  font-variation-settings: 'opsz' 14, 'SOFT' 60, 'wght' 500;
  font-size: 1rem;
  transition: transform 200ms var(--ease), box-shadow 200ms var(--ease);
  box-shadow: 0 4px 16px -4px rgba(201, 160, 73, 0.4);
}

.tsc-cta:hover {
  transform: translateY(-1px);
  box-shadow: 0 8px 24px -6px rgba(201, 160, 73, 0.5);
}

.tsc-skip {
  font-family: var(--font-display); font-style: italic;
  font-size: 0.875rem; color: var(--ink-3);
  border-bottom: 1px dashed var(--rule-medium);
  padding-bottom: 1px;
  transition: color 180ms var(--ease);
}
.tsc-skip:hover { color: var(--ink-1); }


/* ── Ingest health stats grid ──────────────────────────────── */

.ingest-health-section { margin-top: 2.5rem; }

.ingest-stats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0.75rem;
  margin-bottom: 1rem;
}
@media (max-width: 540px) {
  .ingest-stats { grid-template-columns: repeat(2, 1fr); }
}

.ingest-stat {
  background: var(--paper-2);
  border: 1px solid var(--rule-soft);
  border-radius: 10px;
  padding: 0.875rem 1rem;
  text-align: left;
}

.ingest-stat.is-attention {
  border-color: var(--signal-line);
  background: linear-gradient(135deg, var(--signal-soft), var(--paper-2));
}

.ingest-stat.is-error {
  border-color: rgba(184, 109, 93, 0.45);
  background: linear-gradient(135deg, var(--bad-soft), var(--paper-2));
}

.ingest-num {
  font-family: var(--font-display);
  font-variation-settings: 'opsz' 144, 'SOFT' 60, 'wght' 380;
  font-size: 1.75rem;
  letter-spacing: -0.02em;
  line-height: 1;
  color: var(--ink-1);
}

.ingest-stat.is-attention .ingest-num { color: var(--signal); }
.ingest-stat.is-error     .ingest-num { color: var(--bad); }

.ingest-label {
  font-family: var(--font-body); font-size: 0.625rem;
  letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--ink-3); margin-top: 0.25rem;
}


/* ─────────────────────────────────────────────────────────────
   PHASE 3 · Polish
   ───────────────────────────────────────────────────────────── */

/* P3.1 — Phase tracker timeline (dashboard hero strip).
   Compact horizontal timeline showing Phase 0 → 1 → 2 → 3 with the
   current phase highlighted. Mirrors the lab-timeline affordance the
   audit identified as the strongest visualization in the system. */
.phase-tracker {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0;
  margin-top: 0.875rem;
  position: relative;
}
.phase-tracker .phase-step {
  position: relative;
  padding: 0.625rem 0.75rem 0.5rem;
  text-align: left;
}
.phase-tracker .phase-step::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0; right: 0;
  height: 2px;
  background: var(--rule-soft);
}
.phase-tracker .phase-step:first-child::before { border-radius: 2px 0 0 2px; }
.phase-tracker .phase-step:last-child::before  { border-radius: 0 2px 2px 0; }

.phase-tracker .phase-step.is-done::before {
  background: linear-gradient(90deg, var(--good), var(--signal));
}
.phase-tracker .phase-step.is-current::before {
  background: var(--signal);
  box-shadow: 0 0 8px -1px var(--signal);
}

.phase-tracker .phase-name {
  font-family: var(--font-body);
  font-size: 0.625rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-3);
  margin-top: 0.25rem;
}
.phase-tracker .phase-step.is-current .phase-name {
  color: var(--signal);
  font-weight: 600;
}
.phase-tracker .phase-step.is-done .phase-name {
  color: var(--good);
}

.phase-tracker .phase-detail {
  font-family: var(--font-display);
  font-style: italic;
  font-variation-settings: 'opsz' 14, 'SOFT' 80, 'wght' 400;
  font-size: 0.75rem;
  color: var(--ink-3);
  margin-top: 0.125rem;
}
.phase-tracker .phase-step.is-current .phase-detail {
  color: var(--ink-2);
}


/* P3.2 — Intake completion strip (horizontal dot row).
   Five dots, gold for done + filled, hollow for not-yet, sage on
   AIMS specifically since AIMS is the headline. Replicates the lab-
   timeline marker affordance horizontally. */
.intake-completion {
  display: flex;
  gap: 0.5rem;
  padding: 0.5rem 0;
  align-items: center;
  flex-wrap: wrap;
}
.intake-completion .ic-dot {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-family: var(--font-body);
  font-size: 0.6875rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-4);
  padding: 0.25rem 0.625rem 0.25rem 0.5rem;
  border-radius: 999px;
  background: var(--paper-2);
  border: 1px solid var(--rule-soft);
  transition: color 200ms var(--ease), border-color 200ms var(--ease), background 200ms var(--ease);
}
.intake-completion .ic-dot::before {
  content: '';
  width: 8px; height: 8px;
  border-radius: 50%;
  background: transparent;
  border: 1.5px solid var(--ink-4);
  transition: background 200ms var(--ease), border-color 200ms var(--ease);
}
.intake-completion .ic-dot.is-done {
  color: var(--ink-2);
  border-color: var(--rule-medium);
}
.intake-completion .ic-dot.is-done::before {
  background: var(--signal);
  border-color: var(--signal);
}
.intake-completion .ic-dot.is-aims-done {
  color: var(--good);
  border-color: rgba(143, 169, 116, 0.40);
  background: var(--good-soft);
}
.intake-completion .ic-dot.is-aims-done::before {
  background: var(--good);
  border-color: var(--good);
}


/* P3.3 — Gradient phase bands on today's-session card.
   The audit called out the arc-visualization as the visual the user
   actually liked. Bring the phase-band radial gradient INTO the
   today's-session card, varying by phase. .is-action retains the
   primary look; .data-phase-{n} subtly tints. */
.todays-session-card.data-phase-0 {
  background:
    radial-gradient(900px 240px at 0% 0%, rgba(143, 169, 116, 0.16), transparent 55%),
    radial-gradient(700px 200px at 100% 100%, rgba(201, 160, 73, 0.10), transparent 50%),
    linear-gradient(160deg, #1a1810 0%, var(--paper-2) 70%);
}
.todays-session-card.data-phase-1 {
  background:
    radial-gradient(900px 240px at 0% 0%, rgba(201, 160, 73, 0.18), transparent 55%),
    radial-gradient(700px 200px at 100% 100%, rgba(143, 169, 116, 0.08), transparent 50%),
    linear-gradient(160deg, #1f1812 0%, var(--paper-2) 70%);
}
.todays-session-card.data-phase-2 {
  background:
    radial-gradient(900px 240px at 0% 0%, rgba(111, 138, 171, 0.15), transparent 55%),
    radial-gradient(700px 200px at 100% 100%, rgba(201, 160, 73, 0.10), transparent 50%),
    linear-gradient(160deg, #131720 0%, var(--paper-2) 70%);
}
.todays-session-card.data-phase-3 {
  background:
    radial-gradient(900px 240px at 0% 0%, rgba(184, 109, 93, 0.12), transparent 55%),
    radial-gradient(700px 200px at 100% 100%, rgba(111, 138, 171, 0.10), transparent 50%),
    linear-gradient(160deg, #1c1410 0%, var(--paper-2) 70%);
}

/* The phase chip in the card eyebrow row. */
.tsc-phase-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-family: var(--font-body);
  font-size: 0.6875rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-3);
}
.tsc-phase-chip strong {
  color: var(--page-accent);
  font-weight: 600;
}


/* P3.3 — CTA gold-glow pulse.
   Subtle; only on idle CTAs (when not actively hovered). Pauses on
   hover, resets on click. Honors prefers-reduced-motion. */
@media (prefers-reduced-motion: no-preference) {
  .tsc-cta {
    animation: cta-glow 5.5s ease-in-out infinite;
    animation-delay: 1.5s;
  }
  .tsc-cta:hover { animation: none; }

  @keyframes cta-glow {
    0%, 100% {
      box-shadow: 0 4px 16px -4px rgba(201, 160, 73, 0.4);
    }
    50% {
      box-shadow: 0 4px 24px -2px rgba(201, 160, 73, 0.65);
    }
  }
}


/* P3.4 — Ghost-sparkline empty state.
   For the trends panel when there's no data. A faint dashed arc
   showing where the sparkline WILL appear, with a label that names
   the activation condition without shame. */
.ghost-sparkline {
  display: grid;
  grid-template-columns: minmax(5rem, 7rem) 1fr;
  align-items: center;
  gap: 1rem;
  padding: 0.625rem 0;
  border-bottom: 1px dashed var(--rule-soft);
  opacity: 0.6;
}
.ghost-sparkline:last-of-type { border-bottom: 0; }
.ghost-sparkline .label {
  font-family: var(--font-display);
  font-style: italic;
  font-variation-settings: 'opsz' 14, 'SOFT' 80, 'wght' 400;
  color: var(--ink-4);
  font-size: 0.95rem;
}
.ghost-sparkline svg {
  width: 100%;
  height: 28px;
  overflow: visible;
}
.ghost-sparkline svg .ghost-line {
  fill: none;
  stroke: var(--ink-4);
  stroke-width: 1;
  stroke-dasharray: 3 4;
  opacity: 0.7;
}


/* P3.5 — HTMX swap polish.
   Tighter than the previous 0.4 opacity drop. */
@media (prefers-reduced-motion: no-preference) {
  .htmx-swapping {
    opacity: 0;
    transform: translateY(4px);
    transition: opacity 180ms var(--ease), transform 180ms var(--ease);
  }
  .htmx-settling {
    opacity: 1;
    transform: none;
    transition: opacity 220ms var(--ease), transform 220ms var(--ease);
  }
}


/* P3.6 — Focus-visible ring everywhere.
   Currently only form inputs got focus styling. Buttons, links,
   row-links should all show a clear gold ring on keyboard focus. */
@media (prefers-reduced-motion: no-preference) {
  *:focus-visible {
    outline: 2px solid var(--signal);
    outline-offset: 3px;
    border-radius: 4px;
  }
}

/* Reveal animation: tighten the stagger from 60ms → 40ms per spec. */
@media (prefers-reduced-motion: no-preference) {
  :root { --reveal-stagger: 40ms; }
}


/* ── Print (just in case operator wants to print) ──────────── */

@media print {
  body { background: white; color: black; }
  .masthead nav, button, .submit-row { display: none; }
}