/* ──────────────────────────────────────────────────────────────────────────
   max.css — the "max" design system for the FastAPI app.
   Ported verbatim from version_max/src/app/globals.css (the veriel/Next.js
   reference), 2026-08-13. Palette/type sampled from the approved onboarding
   reference. Only deltas from the source:
     * --font-serif / --font-sans defined here (Google Fonts via <link> in
       base_max.html) instead of Next's font loader variables.
     * The analytics-dashboard `.dash*` block is omitted (stays on
       admin_analytics.css).
   Keep component blocks byte-identical to the source where possible so
   future diffs against version_max stay readable.
   ────────────────────────────────────────────────────────────────────────── */

:root {
  /* Fonts (loaded in base_max.html) */
  --font-serif: 'Playfair Display';
  --font-sans:  'Inter';

  /* Surfaces */
  --bg:            #FBF8F5;
  --surface:       #FEFBF9;
  --surface-sage:  #F5F5EF;
  --chip:          #E3E6DB;

  /* Ink */
  --ink:           #14202B;
  --ink-body:      #2B3138;
  --ink-muted:     #6A7079;
  --ink-faint:     #949AA1;

  /* Accent — the olive used by the CTA and every line icon */
  --accent:        #5A6952;
  --accent-hover:  #4C5A45;
  --accent-ink:    #516048;
  --accent-wash:   #EEF1E9;

  /* Lines */
  --line:          #E7E2DA;
  --line-strong:   #D8D2C8;

  /* Status */
  --danger:        #A5352F;
  --danger-bg:     #FCF1F0;
  --danger-line:   #EFD3D1;

  /* Shape */
  --r-xs: 8px;
  --r-sm: 12px;
  --r-md: 16px;
  --r-lg: 22px;
  --r-pill: 999px;

  /* Elevation — barely there. Depth comes from the paper tone, not shadows. */
  --shad-sm: 0 1px 2px rgba(20, 32, 43, 0.04);
  --shad-md: 0 2px 10px rgba(20, 32, 43, 0.05);
  --shad-lift: 0 10px 30px rgba(20, 32, 43, 0.09);

  --page: 41rem;      /* content column */

  /* The ground the app card sits on. An alias, not a new colour: the border
     tone is the only warm step darker than --surface the palette owns. */
  --ground: var(--line);

  --ease: cubic-bezier(0.2, 0.8, 0.25, 1);
}

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

html {
  font-size: 16px;
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}

body {
  background: var(--ground);
  color: var(--ink-body);
  font-family: var(--font-sans), -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-size: 1rem;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  min-height: 100dvh;
}

::selection { background: var(--accent-wash); color: var(--ink); }

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

.display {
  font-family: var(--font-serif), Georgia, serif;
  font-weight: 700;
  color: var(--ink);
  letter-spacing: -0.015em;
  line-height: 1.06;
  text-wrap: balance;
}

h1.display { font-size: clamp(2.35rem, 8.2vw, 3.35rem); }
h2.display { font-size: clamp(1.65rem, 5.2vw, 2.1rem); line-height: 1.14; }

h2, h3 {
  font-family: var(--font-sans), sans-serif;
  color: var(--ink);
  letter-spacing: -0.01em;
}

h2.section { font-size: 1.0625rem; font-weight: 600; }
h3 { font-size: 1rem; font-weight: 600; }

p { text-wrap: pretty; }

/* The measure is capped for readability, but the block is NOT centred by
   default: on a left-aligned page that left the lede indented relative to the
   heading above it (Matthew, 26 Aug). Centring is opted into via .center. */
.lede {
  font-size: 1.0625rem;
  line-height: 1.62;
  color: var(--ink-muted);
  max-width: 30rem;
}
.center .lede { margin-inline: auto; }

.muted { color: var(--ink-muted); }
.small { font-size: 0.875rem; }
.tiny  { font-size: 0.8125rem; }

/* The hand-drawn olive underline beneath a single hero word. */
.mark {
  position: relative;
  white-space: nowrap;
}
.mark::after {
  content: "";
  position: absolute;
  left: 2%;
  right: 2%;
  bottom: 0.02em;
  height: 0.09em;
  border-radius: var(--r-pill);
  background: var(--accent);
  opacity: 0.42;
}

/* ── Layout ───────────────────────────────────────────────────────────────── */

/* The app surface. Full-bleed on a phone, a framed card once there is room to
   show an edge — below 27rem a border would eat width the content needs. */
.app-card {
  width: 100%;
  max-width: var(--page);
  min-height: 100dvh;
  margin-inline: auto;
  background: var(--surface);
  /* A column so the footer sits at the bottom of the card rather than
     wherever the content happens to end. <main> is a flex ITEM, not a flex
     container, so nothing inside it changes. */
  display: flex;
  flex-direction: column;
}
.app-card > .page { flex: 1 1 auto; }

@media (min-width: 27rem) {
  .app-card {
    min-height: calc(100dvh - 2.3rem);
    margin-block: 1.15rem;
    border: 1px solid var(--line);
    border-radius: var(--r-lg);
    box-shadow: var(--shad-lift);
  }
}

/* The masthead the top padding used to stand in for now exists: .appbar. */
.page {
  width: 100%;
  padding: 1.5rem 1.15rem 1.75rem;
}

/* One question standing as the whole screen wants a field to match. 18px, so
   still comfortably over the 16px iOS uses to decide whether to zoom on focus. */
.input-lg { font-size: 1.125rem; }

/* The progress card on the welcome-back screens. The rail inside it is the
   evidence for the sentence above it, so the bar is a little heavier than the
   one that runs across the top of a form. */
.progress-at { margin: 0 0 0.85rem; color: var(--ink); font-weight: 600; }
.card .rail { padding: 0; }
.card .rail-track { height: 6px; }
.next-up-line { margin: 0; color: var(--ink-body); }

/* The one word that separates the two reasons passes — "others" and "you".
   Underlined rather than bold: the eyebrow is already small and grey, and
   weight alone does not survive that. Offset so it does not clip descenders. */
.emph {
  text-decoration: underline;
  text-underline-offset: 0.18em;
  text-decoration-thickness: 1.5px;
}

/* Option 10b: two questions on one screen, each in its own numbered panel.
   The screen before the interview is not the place to add a page turn, but a
   single scroll of two stacked questions reads as a form. A card each, with
   the number doing the work a "Question 1 of 2" line used to. */
.panel-head {
  display: flex; align-items: flex-start; gap: 0.65rem;
  margin: 0 0 0.9rem;
  font-family: var(--font-serif), Georgia, serif;
  font-size: 1.25rem; font-weight: 600; line-height: 1.3; color: var(--ink);
}
.panel-num {
  flex: none; display: grid; place-items: center;
  width: 26px; height: 26px; margin-top: 0.2rem; border-radius: 50%;
  background: var(--accent); color: var(--surface);
  font-family: var(--font-sans), sans-serif;
  font-size: 0.8125rem; font-weight: 700;
}

/* A static step marker. Deliberately NOT 44px and with no pointer: 44px is
   the tap-target floor, and a label that wears a tappable chip's clothes is a
   lie about what it does. Colours match .steps-mini-num, which is the same
   idea one page later. */
.step-chip {
  display: inline-flex; align-items: center; gap: 0.4rem;
  padding: 0.35rem 0.75rem; border-radius: var(--r-pill);
  background: var(--accent-wash); color: var(--accent-ink);
  font-size: 0.875rem; font-weight: 600;
}
.step-chips { display: flex; flex-wrap: wrap; gap: 0.45rem; }

/* A field most people do not need, behind a row that says what it is. Native
   <details>, so it opens with JavaScript off — and a closed <details> still
   submits the input inside it, so the posted body is identical either way. */
.disclose {
  border: 1px dashed var(--line-strong);
  border-radius: var(--r-sm);
  background: var(--surface);
}
.disclose > summary {
  display: flex; align-items: center; gap: 0.5rem;
  min-height: 48px; padding: 0.7rem 1rem;
  cursor: pointer; list-style: none;
  color: var(--accent-ink); font-weight: 600; font-size: 1rem;
}
.disclose > summary::-webkit-details-marker { display: none; }
.disclose > summary::before { content: "+"; font-size: 1.15rem; line-height: 1; }
.disclose[open] > summary::before { content: "\2013"; }
.disclose[open] > summary { border-bottom: 1px dashed var(--line-strong); }
.disclose > summary:hover { background: rgba(90, 105, 82, 0.035); }
.disclose-body { padding: 0.9rem 1rem 1rem; }

/* ── App bar ──────────────────────────────────────────────────────────────── */
/* One row, always the same: who this is on the left, read-aloud on the right.
   Sits outside <main data-tts> so the wordmark is not read out on every page. */
.appbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.7rem 1.15rem;
  border-bottom: 1px solid var(--line);
}

.appbar-mark {
  font-family: var(--font-serif), Georgia, serif;
  font-size: 1.0625rem;
  font-weight: 600;
  color: var(--ink);
  letter-spacing: -0.01em;
}

.stack   { display: flex; flex-direction: column; }
.gap-xs  { gap: 0.5rem; }
.gap-sm  { gap: 0.75rem; }
.gap-md  { gap: 1.15rem; }
.gap-lg  { gap: 1.75rem; }
.center  { text-align: center; }

.rule {
  border: 0;
  border-top: 1px solid var(--line);
  margin: 1.75rem 0;
}

/* Every route fades up once. Cheap, and it makes step changes feel continuous
   rather than like a full page reload. */
.enter { animation: enter 0.34s var(--ease) both; }
@keyframes enter {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: none; }
}

/* ── Top progress hairline ────────────────────────────────────────────────── */

.topbar {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: var(--line);
  z-index: 50;
}

.topbar-fill {
  height: 100%;
  background: var(--accent);
  border-radius: 0 var(--r-pill) var(--r-pill) 0;
  transition: width 0.7s var(--ease);
}

/* ── Progress rail ────────────────────────────────────────────────────────── */

.rail { padding: 0 0 1.35rem; }

.rail-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 0.55rem;
}

.rail-step {
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--ink);
  letter-spacing: -0.005em;
}

.rail-left { font-size: 0.8125rem; color: var(--ink-muted); }

.rail-track {
  height: 4px;
  border-radius: var(--r-pill);
  background: var(--line);
  overflow: hidden;
}

.rail-fill {
  height: 100%;
  border-radius: var(--r-pill);
  background: var(--accent);
  transition: width 0.55s var(--ease);
}

/* ── Cards ────────────────────────────────────────────────────────────────── */

.card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  box-shadow: var(--shad-sm);
}

.card-pad { padding: 1.15rem 1.25rem; }

.sage {
  background: var(--surface-sage);
  border-color: #E6E8DC;
}

/* Highlight strip — the "takes about 7 minutes" row. */
.timecard {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 1.05rem 1.15rem;
}

.timecard-body { flex: 1; min-width: 0; }
.timecard-title { font-weight: 600; color: var(--ink); font-size: 1.0625rem; }
.timecard-sub { font-size: 0.9375rem; color: var(--ink-muted); }

/* ── Hero support ─────────────────────────────────────────────────────────── */

.credit {
  margin-top: 0.85rem;
  font-size: 0.8125rem;
  color: var(--ink-faint);
}

.hero-actions {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.6rem;
  margin-top: 1.35rem;
}

.hero-actions .btn { padding-inline: 2.25rem; }

.scroll-cue {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: 1px solid var(--line);
  background: var(--surface);
  color: var(--ink-muted);
  display: grid;
  place-items: center;
  cursor: pointer;
  transition: border-color 0.16s var(--ease), color 0.16s var(--ease),
              transform 0.16s var(--ease);
  animation: cue 2.4s var(--ease) infinite;
}

.scroll-cue:hover {
  border-color: var(--accent);
  color: var(--accent);
  animation: none;
  transform: translateY(2px);
}

/* Just enough movement to read as "there is more below" without nagging. */
@keyframes cue {
  0%, 72%, 100% { transform: translateY(0); }
  82%           { transform: translateY(4px); }
}

/* ── What happens next ────────────────────────────────────────────────────── */

.steps {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0.85rem;
  margin-top: 1.75rem;
}

.step-item {
  display: flex;
  align-items: flex-start;
  gap: 0.6rem;
}

.step-num {
  flex: none;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--accent-wash);
  color: var(--accent-ink);
  font-size: 0.75rem;
  font-weight: 700;
  display: grid;
  place-items: center;
  margin-top: 1px;
}

.step-title { display: block; font-size: 0.875rem; font-weight: 600; color: var(--ink); }
.step-sub { display: block; font-size: 0.8125rem; color: var(--ink-muted); line-height: 1.4; }

@media (max-width: 34rem) {
  .steps { grid-template-columns: 1fr; gap: 0.7rem; }
}

/* ── Value pillars (the four icon columns) ────────────────────────────────── */

.pillars {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  margin: 1.9rem 0 1.6rem;
}

.pillar {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.55rem;
  padding: 0 0.5rem;
  text-align: center;
  border-left: 1px solid var(--line);
}
.pillar:first-child { border-left: 0; }

.pillar-disc {
  width: 52px;
  height: 52px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: var(--accent-wash);
}

.pillar-title { font-size: 0.9375rem; font-weight: 600; color: var(--ink); }
.pillar-sub {
  font-size: 0.8125rem;
  color: var(--ink-muted);
  line-height: 1.4;
  text-wrap: balance;
}

/* Below ~26rem the chip and the title fight for the same row; give the chip
   its own line rather than squeezing the headline to two words. */
@media (max-width: 26rem) {
  .timecard { flex-wrap: wrap; align-items: flex-start; }
  .timecard-body { flex-basis: calc(100% - 26px - 1rem); }
  .timecard .chip { margin-left: auto; }
}

@media (max-width: 30rem) {
  .pillars { grid-template-columns: repeat(2, 1fr); row-gap: 1.4rem; }
  .pillar:nth-child(3) { border-left: 0; }
  .pillar-disc { width: 46px; height: 46px; }
}

/* ── Disclosure rows (the compliance click-downs) ─────────────────────────── */

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

.disclosure {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  overflow: hidden;
  transition: border-color 0.2s var(--ease), box-shadow 0.2s var(--ease);
}

.disclosure[data-open="true"] {
  border-color: var(--line-strong);
  box-shadow: var(--shad-md);
}

.disclosure-btn {
  display: flex;
  align-items: center;
  gap: 1rem;
  width: 100%;
  padding: 1rem 1.15rem;
  background: none;
  border: 0;
  text-align: left;
  cursor: pointer;
  font: inherit;
  color: inherit;
  min-height: 56px;
}

.disclosure-btn:hover { background: rgba(90, 105, 82, 0.035); }

.disclosure-icon { flex: none; display: grid; place-items: center; width: 26px; }

.disclosure-text { flex: 1; min-width: 0; }
.disclosure-title { font-weight: 600; color: var(--ink); font-size: 1rem; line-height: 1.35; }
.disclosure-sub { font-size: 0.9375rem; color: var(--ink-muted); line-height: 1.45; }

.disclosure-chev {
  flex: none;
  color: var(--ink-faint);
  transition: transform 0.28s var(--ease), color 0.2s var(--ease);
}
.disclosure[data-open="true"] .disclosure-chev { transform: rotate(180deg); color: var(--accent); }

.disclosure-panel {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 0.3s var(--ease);
}
.disclosure[data-open="true"] .disclosure-panel { grid-template-rows: 1fr; }

.disclosure-inner { overflow: hidden; }

.disclosure-body {
  padding: 0 1.15rem 1.15rem calc(1.15rem + 26px + 1rem);
  color: var(--ink-body);
  font-size: 0.9375rem;
  line-height: 1.66;
}
.disclosure-body > * + * { margin-top: 0.7rem; }
.disclosure-body ul { padding-left: 1.1rem; }
.disclosure-body li + li { margin-top: 0.3rem; }
.disclosure-body a { color: var(--accent); }

@media (max-width: 30rem) {
  .disclosure-body { padding-left: 1.15rem; }
}

/* Numbered full-detail list (the 14 information-sheet items) */
.faq { display: flex; flex-direction: column; gap: 0.4rem; margin-top: 0.9rem; }

.faq-item {
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  background: var(--surface);
  overflow: hidden;
}

.faq-btn {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  width: 100%;
  padding: 0.8rem 1rem;
  background: none;
  border: 0;
  font: inherit;
  color: var(--ink);
  text-align: left;
  cursor: pointer;
  font-weight: 500;
  font-size: 0.9375rem;
  min-height: 48px;
}
.faq-btn:hover { background: rgba(90, 105, 82, 0.035); }
.faq-num { color: var(--accent); font-variant-numeric: tabular-nums; font-weight: 600; flex: none; }
.faq-btn .disclosure-chev { margin-left: auto; }
.faq-item .disclosure-body { padding: 0 1rem 1rem 2.4rem; }

/* ── Buttons ──────────────────────────────────────────────────────────────── */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.55rem;
  min-height: 52px;
  padding: 0.85rem 1.65rem;
  border-radius: var(--r-pill);
  border: 1px solid transparent;
  font: inherit;
  font-weight: 600;
  font-size: 1.0625rem;
  letter-spacing: -0.005em;
  cursor: pointer;
  text-decoration: none;
  transition: background 0.18s var(--ease), transform 0.18s var(--ease),
              box-shadow 0.18s var(--ease), color 0.18s var(--ease);
}

.btn:active { transform: translateY(1px); }

.btn-primary {
  background: var(--accent);
  color: #FFFFFF;
  box-shadow: var(--shad-md);
}
.btn-primary:hover:not(:disabled) { background: var(--accent-hover); box-shadow: var(--shad-lift); }

.btn-primary:disabled {
  background: #C6CBC0;
  color: #FBFBF8;
  cursor: not-allowed;
  box-shadow: none;
}

.btn-secondary {
  background: transparent;
  color: var(--ink);
  border-color: var(--line-strong);
}
.btn-secondary:hover { background: rgba(20, 32, 43, 0.035); }

.btn-quiet {
  background: none;
  border: 0;
  color: var(--ink-muted);
  font-weight: 500;
  font-size: 0.9375rem;
  min-height: 44px;
  padding: 0.5rem 0.75rem;
  cursor: pointer;
  border-radius: var(--r-xs);
}
.btn-quiet:hover { color: var(--ink); background: rgba(20, 32, 43, 0.04); }

.btn-full { width: 100%; }

.btn-arrow { transition: transform 0.2s var(--ease); }
.btn:hover .btn-arrow { transform: translateX(3px); }

/* Footer action bar — sticky so the primary action is always one thumb-reach
   away. On mobile this is the single biggest completion lever. */
.actions {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
  margin-top: 1.9rem;
}

.actions-row { flex-direction: row; align-items: center; justify-content: space-between; }

/* The action bar. One primary action per screen, pinned to the bottom of the
   card so it is above the fold whatever the content does. The quiet secondary
   goes under it, never beside it.

   Renamed from .sticky-actions, which had no users. Its gradient faded to
   --bg, the old page colour; against a --surface card that would have been
   visibly the wrong tone, so it is a flat fill and a hairline instead.

   Negative inline margins bleed it to the card edge: .page supplies the
   1.15rem the content sits in, and the bar must not inherit it. */
.actionbar {
  position: sticky;
  bottom: 0;
  z-index: 20;
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  margin: 1.9rem -1.15rem 0;
  padding: 0.85rem 1.15rem calc(0.85rem + env(safe-area-inset-bottom));
  background: var(--surface);
  border-top: 1px solid var(--line);
}

@media (min-width: 27rem) {
  /* Follow the card's own corners, or the fill squares them off. */
  .actionbar { border-radius: 0 0 var(--r-lg) var(--r-lg); }
}

/* Mid-page start bar. Only mounted while the consent tick is off-screen. */
.startbar {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 30;
  padding: 0.7rem 1.15rem calc(0.7rem + env(safe-area-inset-bottom));
  background: linear-gradient(to bottom, rgba(251, 248, 245, 0) 0%, var(--bg) 32%);
}

.startbar-inner {
  max-width: var(--page);
  margin-inline: auto;
}

.startbar .btn { min-height: 48px; font-size: 1rem; }

/* ── Consent gate ─────────────────────────────────────────────────────────── */

.consent-gate {
  display: flex;
  align-items: flex-start;
  gap: 0.85rem;
  padding: 1rem 1.15rem;
  border: 1px solid var(--line-strong);
  border-radius: var(--r-md);
  background: var(--surface);
  cursor: pointer;
  transition: border-color 0.2s var(--ease), background 0.2s var(--ease);
  user-select: none;
}
.consent-gate:hover { border-color: var(--accent); }
.consent-gate[data-checked="true"] { border-color: var(--accent); background: var(--accent-wash); }

/* Arriving here from a start button: say where to look, once. */
.consent-gate.flag {
  border-color: var(--accent);
  animation: flag 1.6s var(--ease) 2;
}
@keyframes flag {
  0%, 100% { box-shadow: 0 0 0 0 rgba(90, 105, 82, 0); }
  40%      { box-shadow: 0 0 0 5px rgba(90, 105, 82, 0.18); }
}

.consent-copy { font-size: 0.9375rem; color: var(--ink); line-height: 1.5; }

/* The tick is the page's one action, so it is weighted like one: a sage card
   with a heavier border and a real shadow, lifting it clear of the seven
   promise rows above it. The unticked state must still read as unfinished —
   hence the accent border only on hover/checked, not at rest. */
.consent-gate-weighted {
  padding: 1.25rem 1.25rem;
  border-width: 2px;
  background: var(--surface-sage);
  box-shadow: 0 2px 10px rgba(20, 32, 43, 0.06);
}
.consent-gate-weighted .consent-copy { font-size: 1rem; font-weight: 500; }
.consent-gate-weighted .box { width: 26px; height: 26px; }


/* ── Checkbox / radio ─────────────────────────────────────────────────────── */

.box {
  flex: none;
  width: 22px;
  height: 22px;
  margin-top: 1px;
  border: 1.5px solid var(--line-strong);
  border-radius: 6px;
  display: grid;
  place-items: center;
  background: #FFF;
  transition: background 0.16s var(--ease), border-color 0.16s var(--ease);
}
.box svg { opacity: 0; transform: scale(0.7); transition: all 0.16s var(--ease); }
[data-checked="true"] .box { background: var(--accent); border-color: var(--accent); }
[data-checked="true"] .box svg { opacity: 1; transform: none; }

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

/* ── Choice cards (survey options) ────────────────────────────────────────── */

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

.choice {
  display: flex;
  align-items: center;
  gap: 0.85rem;
  width: 100%;
  padding: 0.95rem 1.1rem;
  min-height: 56px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  font: inherit;
  color: var(--ink-body);
  text-align: left;
  cursor: pointer;
  transition: border-color 0.16s var(--ease), background 0.16s var(--ease),
              transform 0.16s var(--ease);
}
.choice:hover { border-color: var(--line-strong); background: #FFF; }
.choice[data-selected="true"] {
  border-color: var(--accent);
  background: var(--accent-wash);
  color: var(--ink);
  font-weight: 500;
}

.choice-dot {
  flex: none;
  width: 20px; height: 20px;
  border-radius: 50%;
  border: 1.5px solid var(--line-strong);
  display: grid; place-items: center;
  background: #FFF;
}
.choice[data-selected="true"] .choice-dot { border-color: var(--accent); }
.choice-dot::after {
  content: "";
  width: 10px; height: 10px;
  border-radius: 50%;
  background: var(--accent);
  transform: scale(0);
  transition: transform 0.16s var(--ease);
}
.choice[data-selected="true"] .choice-dot::after { transform: scale(1); }

/* ── Fields ───────────────────────────────────────────────────────────────── */

.field { display: flex; flex-direction: column; gap: 0.4rem; }
.field + .field { margin-top: 1.15rem; }

.label { font-size: 0.9375rem; font-weight: 600; color: var(--ink); }
.optional { font-weight: 400; color: var(--ink-faint); }
/* 16px, not 13px: this is what carries the privacy promise under the email
   field. Chrome (.rail-step, .credit, .foot, .tiny) stays small on purpose. */
.hint { font-size: 1rem; color: var(--ink-muted); }

.input, .textarea {
  width: 100%;
  padding: 0.85rem 1rem;
  min-height: 52px;
  font: inherit;
  font-size: 1rem;
  color: var(--ink);
  background: #FFF;
  border: 1px solid var(--line-strong);
  border-radius: var(--r-sm);
  transition: border-color 0.16s var(--ease), box-shadow 0.16s var(--ease);
}
.input::placeholder, .textarea::placeholder { color: var(--ink-faint); }
.input:focus, .textarea:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(90, 105, 82, 0.14);
}
.textarea { min-height: 120px; resize: vertical; line-height: 1.6; }

.code-input {
  font-size: 1.4rem;
  letter-spacing: 0.22em;
  text-align: center;
  font-weight: 600;
  text-transform: uppercase;
}

/* ── Sliders ──────────────────────────────────────────────────────────────── */

.slider-row { display: flex; flex-direction: column; gap: 0.6rem; }

.slider-head { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; }
.slider-value {
  font-variant-numeric: tabular-nums;
  font-weight: 600;
  color: var(--accent);
  font-size: 1rem;
  min-width: 2.5rem;
  text-align: right;
}

input[type="range"] {
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  height: 28px;
  background: transparent;
  cursor: pointer;
}
input[type="range"]::-webkit-slider-runnable-track {
  height: 6px;
  border-radius: var(--r-pill);
  background: var(--line);
}
input[type="range"]::-moz-range-track {
  height: 6px;
  border-radius: var(--r-pill);
  background: var(--line);
}
input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 26px; height: 26px;
  margin-top: -10px;
  border-radius: 50%;
  background: var(--accent);
  border: 3px solid #FFF;
  box-shadow: var(--shad-md);
}
input[type="range"]::-moz-range-thumb {
  width: 26px; height: 26px;
  border-radius: 50%;
  background: var(--accent);
  border: 3px solid #FFF;
  box-shadow: var(--shad-md);
}
input[type="range"]:disabled { opacity: 0.45; cursor: not-allowed; }

.poles {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  font-size: 0.75rem;
  color: var(--ink-faint);
}

/* ── Reason bars ──────────────────────────────────────────────────────────── */

.bars {
  display: grid;
  grid-auto-flow: column;
  /* minmax(0, …) so a seventh column can appear without the long labels
     forcing the row wider than the card. */
  grid-auto-columns: minmax(0, 1fr);
  gap: 0.3rem;
  align-items: end;
  padding: 0.5rem 0 0;
}

.bar-col {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.45rem;
  min-width: 0;
}

.bar-label {
  font-size: 0.6875rem;
  line-height: 1.25;
  color: var(--ink-muted);
  text-align: center;
  height: 2.6rem;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  /* break-word, not anywhere: `anywhere` shrinks the intrinsic min-content
     width, which lets the grid squeeze columns until every label hyphenates
     mid-syllable. This only breaks a word that genuinely cannot fit. */
  overflow-wrap: break-word;
  hyphens: none;
}

/* Seven bars across a phone gives each one ~33px — too narrow to label and too
   narrow to drag accurately. Below this width they wrap to two rows instead, so
   every bar keeps a readable label and a thumb-sized target. The 25/50/75
   guides on each bar carry the scale once the shared anchor is gone. */
@media (max-width: 30rem) {
  .bars {
    grid-auto-flow: row;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 0.9rem 0.5rem;
  }
  .bar-shell { height: 132px; }
  .bar-label { height: 2.4rem; }
}

@media (max-width: 22rem) {
  .bars { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

.bar-shell {
  position: relative;
  width: 100%;
  max-width: 54px;
  height: 168px;
  border-radius: var(--r-xs);
  background: #F1EDE6;
  border: 1px solid var(--line);
  overflow: hidden;
  cursor: ns-resize;
  touch-action: none;
}

.bar-fill {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  transition: height 0.1s linear;
}

.bar-guide {
  position: absolute;
  left: 0;
  right: 0;
  height: 1px;
  background: rgba(20, 32, 43, 0.06);
}

.bar-emoji { font-size: 1.05rem; line-height: 1; }

/* Bars sit against a fixed scale, so a height means the same thing on every
   bar and between the two pages. */
.vwrap { display: flex; gap: 0.5rem; align-items: stretch; }

.vanchor {
  flex: none;
  width: 3.2rem;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: calc(2.6rem + 0.45rem) 0 calc(1.6rem + 0.9rem);
  font-size: 0.6875rem;
  color: var(--ink-faint);
  text-align: right;
  line-height: 1;
}

.vwrap .bars { flex: 1; min-width: 0; }

/* Must stay after the .vanchor rule above — same specificity, later wins.
   The anchor goes at the width where the bars wrap to two rows, since a single
   shared scale can't line up with two rows of bars. */
@media (max-width: 30rem) {
  .vanchor { display: none; }
}

/* ── Yes / No pair ────────────────────────────────────────────────────────── */

.addq { margin-top: 1.35rem; }

.yn { display: flex; gap: 0.5rem; margin-top: 0.6rem; }

.yn-btn {
  flex: 1;
  min-height: 48px;
  border-radius: var(--r-sm);
  border: 1px solid var(--line);
  background: var(--surface);
  font: inherit;
  font-weight: 500;
  color: var(--ink-body);
  cursor: pointer;
  transition: all 0.16s var(--ease);
}
.yn-btn:hover { border-color: var(--line-strong); }
.yn-btn[data-active="true"] {
  border-color: var(--accent);
  background: var(--accent-wash);
  color: var(--ink);
  font-weight: 600;
}

/* ── Landing warm-up questions (one revealed at a time) ───────────────────── */

.q-head {
  font-family: var(--font-serif), Georgia, serif;
  color: var(--ink);
  font-size: clamp(1.4rem, 5vw, 1.85rem);
  line-height: 1.16;
  letter-spacing: -0.01em;
  text-align: center;
  text-wrap: balance;
  margin: 0 0 1rem;
}

/* A height + fade reveal with no measuring: 0fr → 1fr animates the row open. */
.reveal {
  display: grid;
  grid-template-rows: 0fr;
  opacity: 0;
  transition: grid-template-rows 0.44s var(--ease), opacity 0.4s var(--ease);
}
.reveal.open { grid-template-rows: 1fr; opacity: 1; }
.reveal > .reveal-inner { overflow: hidden; min-height: 0; }

.payoff { text-align: center; margin-top: 2rem; }
.payoff-line {
  font-family: var(--font-serif), Georgia, serif;
  color: var(--ink);
  font-size: clamp(1.55rem, 5.5vw, 2.1rem);
  line-height: 1.16;
  letter-spacing: -0.012em;
  text-wrap: balance;
  margin: 0 auto;
  max-width: 22rem;
}

/* ── Pie ──────────────────────────────────────────────────────────────────── */

/* The old CSS-gradient pie and its floating labels were removed on 2026-08-26.
   Their `.pie-label { position: absolute }` had the same specificity as the new
   legend's `.pie-label`, so it kept winning on `position` — the label escaped
   its row and floated over the page. The reasons page now draws an SVG pie with
   a plain list beneath it; see the block near the end of this file. */

.legend {
  display: flex;
  flex-direction: column;
  gap: 0.1rem;
  margin-top: 1rem;
}

.cl-row {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.4rem 0.15rem;
  font-size: 0.875rem;
  border-bottom: 1px solid var(--line);
}
.cl-row:last-child { border-bottom: 0; }

.cl-sw { width: 12px; height: 12px; border-radius: 3px; flex: none; }
.cl-name { flex: 1; min-width: 0; color: var(--ink-body); }
.cl-pct { font-variant-numeric: tabular-nums; font-weight: 600; color: var(--ink); }
.bar-num { font-size: 0.75rem; font-variant-numeric: tabular-nums; color: var(--ink-muted); }

/* ── Chat ─────────────────────────────────────────────────────────────────── */

.thread { display: flex; flex-direction: column; gap: 1.1rem; padding: 0.5rem 0 1rem; }

.turn { display: flex; gap: 0.75rem; align-items: flex-start; max-width: 100%; }
.turn.user { flex-direction: row-reverse; }

.avatar {
  flex: none;
  width: 30px; height: 30px;
  border-radius: 50%;
  background: var(--accent-wash);
  border: 1px solid #E1E6D9;
  display: grid; place-items: center;
  margin-top: 2px;
}
.turn.user .avatar { background: #EDEAE4; border-color: var(--line); }

.bubble {
  padding: 0.85rem 1.1rem;
  border-radius: var(--r-lg);
  font-size: 1rem;
  line-height: 1.62;
  max-width: 33rem;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

.turn.assistant .bubble {
  background: var(--surface);
  border: 1px solid var(--line);
  border-top-left-radius: 6px;
  color: var(--ink-body);
}

.turn.user .bubble {
  background: var(--accent);
  color: #FFF;
  border-top-right-radius: 6px;
}

.dots { display: inline-flex; gap: 4px; padding: 0.25rem 0; }
.dots span {
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--ink-faint);
  animation: blink 1.3s infinite ease-in-out;
}
.dots span:nth-child(2) { animation-delay: 0.18s; }
.dots span:nth-child(3) { animation-delay: 0.36s; }
@keyframes blink { 0%, 60%, 100% { opacity: 0.25; } 30% { opacity: 1; } }

.caret::after {
  content: "";
  display: inline-block;
  width: 2px; height: 1.05em;
  margin-left: 2px;
  vertical-align: -0.18em;
  background: var(--accent);
  animation: caret 1s steps(2) infinite;
}
@keyframes caret { 50% { opacity: 0; } }

.composer {
  position: sticky;
  bottom: 0;
  z-index: 20;
  display: flex;
  gap: 0.5rem;
  align-items: flex-end;
  padding: 0.75rem 0 calc(0.9rem + env(safe-area-inset-bottom));
  background: linear-gradient(to bottom, rgba(251, 248, 245, 0) 0%, var(--bg) 22%);
}

.composer-static {
  position: static;
  background: none;
  padding: 0.5rem 0 0;
}

.composer-input {
  flex: 1;
  min-height: 52px;
  max-height: 8.5rem;
  padding: 0.85rem 1rem;
  font: inherit;
  font-size: 1rem;
  line-height: 1.5;
  color: var(--ink);
  background: #FFF;
  border: 1px solid var(--line-strong);
  border-radius: var(--r-lg);
  resize: none;
  overflow-y: auto;
}
.composer-input:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(90, 105, 82, 0.14);
}

.icon-btn {
  flex: none;
  width: 52px; height: 52px;
  border-radius: 50%;
  border: 1px solid var(--line-strong);
  background: #FFF;
  color: var(--ink);
  display: grid; place-items: center;
  cursor: pointer;
  transition: all 0.16s var(--ease);
}
.icon-btn:hover:not(:disabled) { border-color: var(--accent); color: var(--accent); }
.icon-btn:disabled { opacity: 0.45; cursor: not-allowed; }

.icon-btn.send { background: var(--accent); border-color: var(--accent); color: #FFF; }
.icon-btn.send:hover:not(:disabled) { background: var(--accent-hover); color: #FFF; }
.icon-btn.rec { color: var(--danger); border-color: var(--danger); animation: pulse 1.4s infinite; }
@keyframes pulse { 50% { box-shadow: 0 0 0 6px rgba(165, 53, 47, 0.13); } }

/* ── Notices ──────────────────────────────────────────────────────────────── */

.notice {
  padding: 0.85rem 1.1rem;
  border-radius: var(--r-sm);
  border: 1px solid var(--line);
  background: var(--surface-sage);
  font-size: 1rem;
  line-height: 1.55;
}

.notice-error {
  background: var(--danger-bg);
  border-color: var(--danger-line);
  color: var(--danger);
}

.resume {
  display: flex;
  align-items: center;
  gap: 0.85rem;
  padding: 0.9rem 1.1rem;
  border: 1px solid var(--line-strong);
  border-radius: var(--r-md);
  background: var(--surface);
  box-shadow: var(--shad-md);
  margin-bottom: 1.25rem;
}
.resume-text { flex: 1; min-width: 0; font-size: 0.9375rem; }
.resume .btn { min-height: 44px; padding: 0.55rem 1.15rem; font-size: 0.9375rem; }

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

.foot {
  margin-top: 2rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.6rem;
  text-align: center;
  color: var(--ink-muted);
  font-size: 0.875rem;
}
.foot a { color: var(--ink-muted); }
.foot-line { display: inline-flex; align-items: center; gap: 0.45rem; }

/* ── Done mark ────────────────────────────────────────────────────────────── */

.done-mark {
  width: 62px; height: 62px;
  border-radius: 50%;
  background: var(--accent-wash);
  display: grid; place-items: center;
  margin: 0.5rem auto 1.15rem;
  animation: pop 0.5s var(--ease) both;
}
@keyframes pop {
  from { transform: scale(0.6); opacity: 0; }
  to   { transform: none; opacity: 1; }
}

/* ── Modal ────────────────────────────────────────────────────────────────── */

.scrim {
  position: fixed;
  inset: 0;
  z-index: 60;
  background: rgba(20, 32, 43, 0.28);
  display: grid;
  place-items: center;
  padding: 1.25rem;
  animation: fade 0.2s var(--ease) both;
}
@keyframes fade { from { opacity: 0; } to { opacity: 1; } }

.modal {
  width: 100%;
  max-width: 25rem;
  background: var(--surface);
  border-radius: var(--r-lg);
  padding: 1.5rem;
  box-shadow: var(--shad-lift);
  animation: enter 0.26s var(--ease) both;
}

/* ── Focus ────────────────────────────────────────────────────────────────── */

:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  border-radius: 4px;
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* ── FastAPI additions (not in version_max/globals.css) ───────────────────────
   Small helpers the server-rendered app needs on top of the verbatim port. */

/* Reasons page: empty-pie note + the adjust/confirm pair under the pie. */
.pie-empty { grid-column: 1 / -1; font-size: 0.8125rem; color: var(--ink-muted); text-align: center; padding: 0.4rem 0; }
.confirm-btns { display: flex; gap: 0.6rem; margin-top: 1.15rem; flex-wrap: wrap; }
.confirm-btns .btn { flex: 1 1 0; }

/* Slider value stays blank until the participant moves the slider (the
   touched_* hidden-field pattern) — an untouched slider must not read as an
   answered 50. */
.slider-value:empty::before { content: "–"; color: var(--ink-faint); font-weight: 400; }

/* "I can't say" as a compact tappable card, matching .choice. */
label.choice input[type="checkbox"] { position: absolute; opacity: 0; pointer-events: none; }
label.choice { position: relative; }

/* The hidden attribute must always win — several components set an explicit
   display (flex/grid) which would otherwise override it and show "hidden" UI
   (same guard as journey.css). */
[hidden] { display: none !important; }

/* ── "Listen to this page" ────────────────────────────────────────────────
   Browser speechSynthesis (static/tts.js). Outlined pill so it reads as an
   offer, not as the page's action — the CTA stays the only filled button.
   Sized to the 44px tap target this audience needs on a phone. */
.listen {
  display: inline-flex; align-items: center; gap: 0.45rem;
  min-height: 44px; padding: 0.5rem 0.95rem;
  border: 1px solid var(--accent); border-radius: 999px;
  background: transparent; color: var(--accent-ink);
  font-family: var(--font-sans), system-ui, sans-serif;
  font-size: 0.8125rem; font-weight: 600; line-height: 1;
  cursor: pointer; -webkit-tap-highlight-color: transparent;
  transition: background-color 0.15s ease, color 0.15s ease;
}
.listen:hover { background: var(--accent-wash); }
.listen:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.listen.is-speaking { background: var(--accent); color: #fff; border-color: var(--accent); }
.listen svg { flex: none; }

/* Centred above the page body, where a struggling reader looks first. */

/* ── Access-code loop (accessibility redesign §3) ─────────────────────────── */

/* Register: the two-step process as numbered lines, not a paragraph. */
.steps-mini { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.55rem; }
.steps-mini li {
  display: flex; align-items: center; gap: 0.7rem;
  font-size: 1rem; color: var(--ink-body);
}
.steps-mini-num {
  flex: none; display: grid; place-items: center;
  width: 26px; height: 26px; border-radius: 50%;
  background: var(--accent-wash); color: var(--accent-ink);
  font-size: 0.8125rem; font-weight: 700;
}

/* Verify: eight character boxes. A character-sized tap target beats hitting a
   cursor position inside one long field. Revealed by JS — with it off, the
   plain .code-input above stays visible and works. */
.code-boxes-row {
  display: flex; align-items: center; justify-content: center;
  gap: 0.4rem;
}
.code-box {
  width: 100%; max-width: 46px; min-width: 0;
  aspect-ratio: 3 / 4;
  padding: 0;
  border: 2px solid var(--line-strong); border-radius: var(--r-sm, 10px);
  background: var(--surface);
  font-family: var(--font-sans), system-ui, sans-serif;
  font-size: 1.5rem; font-weight: 700; text-align: center;
  color: var(--ink); text-transform: uppercase;
  transition: border-color 0.15s var(--ease), background 0.15s var(--ease);
}
.code-box:focus {
  outline: none;
  border-color: var(--accent);
  background: var(--accent-wash);
}
.code-dash { flex: none; color: var(--ink-faint); font-size: 1.25rem; padding: 0 0.1rem; }

@media (max-width: 380px) {
  .code-box { font-size: 1.25rem; }
  .code-boxes-row { gap: 0.25rem; }
}

/* Resend was fine print under the button. The participant whose code never
   arrived is the one most likely to leave, so the way out is a card. */
.resend-card {
  display: flex; align-items: center; gap: 0.8rem; flex-wrap: wrap;
  margin-top: 1.25rem; padding: 0.9rem 1rem;
  border: 1px solid var(--line); border-radius: var(--r-md);
  background: var(--surface-sage);
}
.resend-icon { flex: none; color: var(--accent-ink); display: grid; place-items: center; }
.resend-body { flex: 1 1 12rem; min-width: 0; }
.resend-title { display: block; font-weight: 600; color: var(--ink); font-size: 0.9375rem; }
.resend-sub { display: block; font-size: 0.8125rem; color: var(--ink-muted); line-height: 1.45; }
.resend-btn {
  flex: none; min-height: 44px; padding: 0.5rem 1rem;
  border: 1px solid var(--accent); border-radius: 999px;
  background: transparent; color: var(--accent-ink);
  font-size: 0.875rem; font-weight: 600; cursor: pointer;
}
.resend-btn:hover { background: var(--accent-wash); }

/* ── Survey: one question per screen (accessibility redesign §4/§5) ───────── */

.eyebrow {
  font-size: 0.8125rem; font-weight: 600; letter-spacing: 0.02em;
  color: var(--ink-muted); margin: 0 0 0.6rem;
}

/* The question is the screen. One per page, so it can be big. */
.q-title {
  font-family: var(--font-serif), Georgia, serif;
  font-size: clamp(1.4rem, 5.2vw, 1.85rem);
  font-weight: 600; line-height: 1.3; color: var(--ink);
  margin: 0;
}

/* One 0–100 bar, alone. The scale is unchanged from the seven-bar version —
   only the number of decisions per screen is. */
.bar-wrap { margin-top: 1.6rem; }
.bar-ends {
  display: flex; justify-content: space-between;
  font-size: 0.8125rem; color: var(--ink-muted); margin-bottom: 0.5rem;
}
.bar {
  -webkit-appearance: none; appearance: none;
  width: 100%; height: 44px; background: transparent; cursor: pointer;
}
.bar::-webkit-slider-runnable-track {
  height: 14px; border-radius: 999px;
  background: linear-gradient(to right, var(--accent) var(--fill, 50%), var(--chip) var(--fill, 50%));
}
.bar::-moz-range-track { height: 14px; border-radius: 999px; background: var(--chip); }
.bar::-moz-range-progress { height: 14px; border-radius: 999px; background: var(--accent); }
.bar::-webkit-slider-thumb {
  -webkit-appearance: none; appearance: none;
  width: 40px; height: 40px; margin-top: -13px;
  border-radius: 50%; background: var(--surface);
  border: 3px solid var(--accent);
  box-shadow: 0 2px 8px rgba(20, 32, 43, 0.16);
}
.bar::-moz-range-thumb {
  width: 34px; height: 34px; border-radius: 50%;
  background: var(--surface); border: 3px solid var(--accent);
  box-shadow: 0 2px 8px rgba(20, 32, 43, 0.16);
}
.bar:focus-visible { outline: 2px solid var(--accent); outline-offset: 6px; }

/* The bar's value in words. The participant never sees the number: the scale
   is 0–100 for the instrument's sake, not for theirs. */
.bar-band {
  margin: 0.7rem 0 0; text-align: center; min-height: 1.5rem;
  font-size: 1.0625rem; font-weight: 600; color: var(--accent-ink);
}

/* "I can't say", always last and always present — this is what keeps the
   consent promise "you can skip any question" true while every screen still
   forces a response. */
.choice-quiet {
  width: 100%; margin-top: 0.6rem;
  background: none; border-style: dashed;
}

/* Section skip. Understyled on purpose: findable by someone who has had
   enough, never competing with the answer above it. */
.skip-form { text-align: center; margin-top: 1.5rem; }
.skip-link {
  background: none; border: 0; padding: 0.5rem;
  font: inherit; font-size: 0.8125rem;
  color: var(--ink-faint); text-decoration: underline; cursor: pointer;
}
.skip-link:hover { color: var(--ink-muted); }

.quiet-link { font-size: 0.875rem; color: var(--ink-muted); text-decoration: underline; }

/* ── The pie: recognition, not arithmetic ─────────────────────────────────── */
/* No percentages, no "adds up to 100%". The old copy asked for proportional
   reasoning this audience does not have. */
.pie-wrap { display: grid; place-items: center; margin: 1.35rem 0 1.1rem; }
#pie { width: min(62vw, 220px); height: auto; }

.pie-legend { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.45rem; }
.pie-legend li {
  display: flex; align-items: center; gap: 0.65rem;
  padding: 0.55rem 0.7rem;
  border: 1px solid var(--line); border-radius: var(--r-sm);
  background: var(--surface);
}
.pie-swatch { flex: none; width: 14px; height: 14px; border-radius: 4px; }
.pie-label { flex: 1; min-width: 0; font-size: 0.9375rem; color: var(--ink); }
.pie-band { flex: none; font-size: 0.8125rem; font-weight: 600; color: var(--ink-muted); }

.change-list { list-style: none; margin: 1.2rem 0 0; padding: 0; display: grid; gap: 0.5rem; }
.change-row {
  display: flex; align-items: center; gap: 0.65rem;
  min-height: 52px; padding: 0.6rem 0.75rem;
  border: 1px solid var(--line-strong); border-radius: var(--r-sm);
  background: var(--surface); text-decoration: none;
}
.change-row:hover { border-color: var(--accent); background: var(--accent-wash); }

/* Seven tap segments in place of a 1–7 drag. Same scale, same anchors —
   dragging is precision work on a phone, tapping is not. */
.segments { border: 0; margin: 0; padding: 0; }
.segments legend { padding: 0; }
.segment-row { display: flex; gap: 0.35rem; margin-top: 0.75rem; }
.segment {
  flex: 1 1 0; min-width: 0;
  display: grid; place-items: center;
  min-height: 52px; padding: 0.4rem 0;
  border: 1px solid var(--line-strong); border-radius: var(--r-sm);
  background: var(--surface);
  font-size: 1rem; font-weight: 600; color: var(--ink-body);
  cursor: pointer; -webkit-tap-highlight-color: transparent;
  transition: background 0.15s var(--ease), border-color 0.15s var(--ease), color 0.15s var(--ease);
}
.segment:hover { border-color: var(--accent); }
.segment[data-selected="true"] {
  background: var(--accent); border-color: var(--accent); color: #fff;
}
.segment:focus-within { outline: 2px solid var(--accent); outline-offset: 2px; }

/* Feedback tap-chips (§5.4). Multi-select, so they are chips rather than the
   single-answer .choice cards used elsewhere. */
.chip-field { border: 0; margin: 0 0 1.5rem; padding: 0; }
.chip-field legend { padding: 0; margin-bottom: 0.7rem; }
.chips { display: flex; flex-wrap: wrap; gap: 0.45rem; margin-bottom: 0.8rem; }
.chip {
  display: inline-flex; align-items: center;
  min-height: 44px; padding: 0.5rem 0.95rem;
  border: 1px solid var(--line-strong); border-radius: 999px;
  background: var(--surface); color: var(--ink-body);
  font-size: 0.875rem; font-weight: 500;
  cursor: pointer; -webkit-tap-highlight-color: transparent;
  transition: background 0.15s var(--ease), border-color 0.15s var(--ease), color 0.15s var(--ease);
}
.chip:hover { border-color: var(--accent); }
.chip[data-selected="true"] {
  background: var(--accent); border-color: var(--accent); color: #fff;
}
.chip:focus-within { outline: 2px solid var(--accent); outline-offset: 2px; }

/* Done screen: the file downloads, demoted below the one real action. */
.done-files { margin-top: 1.75rem; padding-top: 1.25rem; border-top: 1px solid var(--line); }
.done-files-row {
  display: flex; flex-wrap: wrap; gap: 0.4rem 1.25rem;
  justify-content: center; margin-top: 0.6rem;
}

/* ── Consent: the live form in the new palette (2026-08-26) ───────────────── */
/* The page reverted to production's wording and structure, which uses native
   <details> rather than the button/panel disclosures elsewhere in max.css.
   Styled to match them so the page does not look like a different app. */

.faq-item > summary.faq-btn {
  display: flex; align-items: center; gap: 0.75rem;
  padding: 0.8rem 1rem; cursor: pointer; list-style: none;
  font-size: 0.9375rem; font-weight: 600; color: var(--ink);
}
.faq-item > summary.faq-btn::-webkit-details-marker { display: none; }
.faq-item > summary.faq-btn::after {
  content: ""; flex: none; margin-left: auto;
  width: 9px; height: 9px; border-right: 2px solid var(--ink-faint);
  border-bottom: 2px solid var(--ink-faint); transform: rotate(45deg) translateY(-2px);
  transition: transform 0.25s var(--ease), border-color 0.2s var(--ease);
}
.faq-item[open] > summary.faq-btn::after {
  transform: rotate(-135deg) translateY(-2px); border-color: var(--accent);
}
.faq-item > summary.faq-btn:hover { background: rgba(90, 105, 82, 0.035); }
.faq-item > .disclosure-body { padding: 0 1rem 1rem; }

/* Key phrases the live page highlights. Blue there, accent here. */
.hi { color: var(--accent-ink); font-weight: 600; }

/* The persistent privacy summary, restored from the live site's base template.
   Fixed to the corner on every page; the "?" opens a one-paragraph statement. */
/* Clears the action bar. The '?' is fixed bottom-right and the CTA is
   full-width on a phone, so at 14px it sat on top of the primary button on
   every screen in the app. On the two screens with no action bar it floats a
   little high, which is the cheaper mistake. */
.privacy-hint {
  position: fixed; right: 14px; z-index: 40;
  bottom: calc(14px + 4.75rem + env(safe-area-inset-bottom));
}
.privacy-hint__btn {
  width: 34px; height: 34px; border-radius: 50%;
  border: 1px solid var(--line-strong); background: var(--surface);
  color: var(--ink-muted); font: 600 15px/1 var(--font-sans), sans-serif;
  cursor: pointer; box-shadow: 0 2px 8px rgba(20, 32, 43, 0.10);
}
.privacy-hint__btn:hover { border-color: var(--accent); color: var(--accent-ink); }
.privacy-hint__body {
  position: absolute; right: 0; bottom: 44px; width: min(78vw, 320px);
  padding: 0.85rem 1rem;
  border: 1px solid var(--line); border-radius: var(--r-md);
  background: var(--surface); box-shadow: 0 6px 24px rgba(20, 32, 43, 0.14);
  font-size: 0.8125rem; line-height: 1.55; color: var(--ink-body);
}
.privacy-hint__body p { margin: 0; }

/* The live page's prose summary. Paragraph spacing matches it — the reset in
   this stylesheet strips <p> margins, which ran the nine paragraphs together. */
.consent-prose { margin-top: 1.35rem; }
.consent-prose p { margin: 0 0 0.95rem; line-height: 1.62; color: var(--ink-body); }
.consent-prose p:last-child { margin-bottom: 0; }
.consent-prose a { color: var(--accent-ink); }

/* The participant's own bar position, beside the word for it. Five reasons all
   reading "A lot" while their slices plainly differ is a contradiction the
   picture loses an argument with; the number resolves it. It is their 0–100
   value, not a percentage — the pie still asks for recognition, not
   arithmetic. */
.pie-value {
  display: inline-block; min-width: 2.2ch; margin-left: 0.35rem;
  padding: 0.05rem 0.35rem; border-radius: 999px;
  background: var(--chip); color: var(--accent-ink);
  font-size: 0.75rem; font-weight: 700; font-variant-numeric: tabular-nums;
}

/* ── Consent promise cards as native <details> (2026-09-25) ──────────────────
   The seven promise rows use the same .disclosure shell as the rest of max.css,
   but driven by <details>/<summary> rather than data-open. Nothing in the app
   ships JavaScript for .disclosure-btn, so the button/panel version renders a
   card that cannot be opened. Native <details> also means the promises are
   readable with JavaScript off, which on a consent page is the difference
   between informed and not. Same pattern as the fourteen items below it. */

.disclosure > summary.disclosure-btn {
  display: flex; align-items: center; gap: 1rem;
  width: 100%; padding: 1rem 1.15rem; min-height: 56px;
  cursor: pointer; list-style: none;
  font: inherit; color: inherit; text-align: left;
}
.disclosure > summary.disclosure-btn::-webkit-details-marker { display: none; }
.disclosure > summary.disclosure-btn:hover { background: rgba(90, 105, 82, 0.035); }

details.disclosure[open] { border-color: var(--line-strong); box-shadow: var(--shad-md); }
details.disclosure[open] > summary.disclosure-btn .disclosure-chev {
  transform: rotate(180deg); color: var(--accent);
}

/* A closed <details> renders nothing, so the panel needs no collapsed state —
   the 0fr default that the data-open version animates from would hide the body
   even while open. */
details.disclosure > .disclosure-body { padding-top: 0; }