/* NeuroProfile — calm dark "lab notebook".
 *
 * Design intent: the audience is sensory-sensitive and often anxious, so the
 * page is deliberately low-luminance, low-motion, high-readability. The one
 * expressive element is the live estimates panel: mono numerals, thin bars
 * that breathe when an answer lands. Everything else stays quiet.
 *
 * Class colors come from config/model.json at runtime (inline styles); this
 * file only owns the neutral system.
 */

:root {
  --bg: #14171d;
  --panel: #1b2028;
  --panel-2: #222834;
  --ink: #e9e6de;
  /* one step down from --ink: for control labels that must READ as text a person
     chooses between, not as placeholder chrome (the answer buttons) */
  --ink-soft: #cdd2d9;
  --dim: #9aa3ae;
  --faint: #6b7480;
  --line: #2d3542;
  --accent: #d9a866;
  --accent-dim: #8a6c42;
  --good: #7fb069;
  --track: #191e27;
  --shadow: rgba(0, 0, 0, .25);
  --soft: #222834;
  --notice-panel: rgba(34, 40, 52, 0.55);
  --link-hover: #e8bd82;
  --primary-bg: #2a2519;
  --primary-ink: #e9e6de;
  --status-informed: #a3c98f;
  --status-heuristic: #d9c18a;
  --status-exploratory: #8fb0d9;
  --status-structural: #b9a6d9;
  --status-pending: #d9c18a;
  --radius: 10px;
  --font-display: "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, serif;
  --font-body: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-data: ui-monospace, "SF Mono", "Cascadia Code", Consolas, monospace;
}

:root[data-resolved-theme="light"] {
  color-scheme: light;
  --bg: #f4f1ea;
  --panel: #fffdf8;
  --panel-2: #ece7dc;
  --ink: #24262b;
  --ink-soft: #363b43;
  --dim: #59616c;
  --faint: #747d88;
  --line: #d8d1c4;
  --accent: #80561d;
  --accent-dim: #a4773a;
  --good: #477b38;
  --track: #ddd7cc;
  --shadow: rgba(57, 45, 28, .12);
  --soft: #ece7dc;
  --notice-panel: #ebe6dc;
  --link-hover: #5f3c0c;
  --primary-bg: #80561d;
  --primary-ink: #fffdf8;
  --status-informed: #35632b;
  --status-heuristic: #6b5115;
  --status-exploratory: #325c86;
  --status-structural: #634a83;
  --status-pending: #6b5115;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; font-size: 1rem; }
html[data-font="small"] { font-size: 0.9375rem; }
html[data-font="medium"] { font-size: 1.0625rem; }
html[data-font="large"] { font-size: 1.25rem; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 1rem;
  line-height: 1.55;
  overflow-wrap: break-word;
}

/* Disposable social/messenger webviews get a decision before any answers are
   created in storage that may disappear when the webview closes. */
.browser-handoff {
  min-height: 100vh; min-height: 100dvh; display: grid; place-items: center;
  padding: max(20px, env(safe-area-inset-top)) max(16px, env(safe-area-inset-right))
    max(20px, env(safe-area-inset-bottom)) max(16px, env(safe-area-inset-left));
}
.browser-handoff-card {
  width: min(100%, 520px); background: var(--panel); border: 1px solid var(--line);
  border-top: 3px solid var(--accent); border-radius: 16px; padding: 24px;
  box-shadow: 0 16px 48px rgba(0, 0, 0, .35);
}
.browser-handoff-icon { font-size: 2rem; }
.browser-handoff-warning {
  width: fit-content; margin-top: 8px; padding: 4px 9px; border-radius: 999px;
  background: rgba(181, 72, 93, .16); border: 1px solid #7d3d4b; color: #f2bdc8;
  font: 700 0.6875rem/1.35 var(--font-data); letter-spacing: .04em; text-transform: uppercase;
}
.browser-handoff h1 { font: 500 clamp(1.5625rem, 7vw, 2.125rem)/1.2 var(--font-display); margin: 8px 0 12px; }
.browser-handoff p { color: var(--dim); margin: 10px 0; }
.browser-handoff p strong { color: var(--ink); }
.browser-handoff-steps { font-size: 0.875rem; }
.browser-handoff-url {
  display: block; width: 100%; margin: 16px 0 12px; padding: 10px 12px; resize: none;
  color: var(--ink-soft); background: var(--bg); border: 1px solid var(--line); border-radius: 9px;
  font: 0.75rem/1.45 var(--font-data); white-space: pre-wrap; overflow-wrap: anywhere; word-break: normal;
}
.browser-handoff-actions { display: flex; gap: 8px; flex-wrap: wrap; }
.browser-handoff-actions .btn { min-height: 44px; flex: 1 1 180px; }
.browser-handoff-risk {
  flex: 1 1 100%; border: 0; background: none; color: var(--faint); padding: 8px;
  font-size: 0.75rem; text-decoration: underline; text-underline-offset: 3px;
}
.browser-handoff-risk:hover { color: var(--dim); }
a { color: var(--accent); text-decoration-thickness: 1px; text-underline-offset: 2px; }
a:hover { color: var(--link-hover); }
button { font: inherit; cursor: pointer; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 4px; }

/* ---------- layout ---------- */
.shell { max-width: 1480px; margin: 0 auto; padding: 0 20px 120px; }
.columns { display: flex; gap: 36px; align-items: flex-start; }
.flow { flex: 1 1 auto; min-width: 0; max-width: none; }
.aside { flex: 0 0 340px; position: sticky; top: 16px; }

/* ---------- reading progress ----------
   answered / total as a hairline across the top of the viewport. No text (every
   string on this page needs a Ukrainian twin), no height when nothing is
   answered, and no transition under prefers-reduced-motion. */
.read-progress {
  position: fixed; top: 0; left: 0; height: 3px; z-index: 60;
  background: linear-gradient(90deg, var(--accent-dim), var(--accent));
  border-radius: 0 3px 3px 0; pointer-events: none;
  transition: width 0.45s cubic-bezier(0.22, 1, 0.36, 1);
}

/* ---------- header ---------- */
.masthead { padding: 40px 0 18px; border-bottom: 1px solid var(--line); }
.masthead .kicker {
  font-family: var(--font-data); font-size: 0.75rem; letter-spacing: 0.14em;
  text-transform: uppercase; color: var(--faint);
  min-width: 0; overflow-wrap: anywhere;
}
/* the kicker is one long uppercase mono line and the letterspacing is what
   breaks it onto a second row next to the language toggle on a 390px phone —
   so the tracking goes first, the size second. */
@media (max-width: 560px) {
  .masthead .kicker { font-size: 0.65625rem; letter-spacing: 0.05em; }
}
@media (max-width: 430px) {
  .masthead .kicker { font-size: 0.59375rem; letter-spacing: 0; }
}
.masthead h1 {
  font-family: var(--font-display); font-weight: 500;
  font-size: clamp(1.875rem, 5vw, 2.75rem); margin: 6px 0 10px; letter-spacing: 0.01em;
}
.masthead .tagline { color: var(--dim); font-size: 1.0625rem; max-width: 60ch; margin: 0; }
.mast-actions { display: flex; align-items: center; gap: 8px; flex: 0 0 auto; }
.appearance-controls { display: flex; align-items: center; gap: 4px; }
.appearance-button {
  display: grid; place-items: center; min-width: 32px; height: 30px; padding: 0 6px;
  color: var(--dim); background: var(--panel); border: 1px solid var(--line); border-radius: 999px;
}
.appearance-button:hover:not(:disabled) { color: var(--ink); border-color: var(--accent-dim); }
.appearance-button:disabled { cursor: default; opacity: 0.35; }
.appearance-button.theme-toggle { font-size: 1rem; }

.notice {
  background: var(--panel); border: 1px solid var(--line); border-left: 3px solid var(--accent-dim);
  border-radius: var(--radius); padding: 14px 16px; margin: 18px 0; color: var(--dim); font-size: 0.875rem;
}
.notice strong { color: var(--ink); }
.notice.crisis { border-left-color: #b5485d; }

/* ---------- the secondary-notice strip ----------
   The disclaimer above stays a full amber-bordered warning (M12 — it may never
   fold and may never be quieted). These three are NOT warnings: privacy, what
   the numbers mean, why depression is asked. Stacked as four identical amber
   boxes they read as a wall of alarms before question one, so here they become
   one quiet, icon-led strip — three columns on desktop, a stack on a phone —
   with no accent edge and no extra vertical cost. Each keeps its own fold. */
.notice-strip {
  display: grid; gap: 10px; margin: 18px 0;
}
@media (min-width: 981px) {
  /* stretch, not start: three equal cards read as one strip, whereas three
     different heights read as three leftover boxes */
  /* the privacy note is the longest of the three by some way, so it gets the
     wider column — three equal columns left it eight lines tall next to two
     four-line neighbours */
  .notice-strip { grid-template-columns: 1.35fr 1fr 1fr; align-items: stretch; }
}
.notice-strip > .notice {
  margin: 0; padding: 10px 12px; font-size: 0.78125rem; color: var(--faint);
  background: var(--notice-panel);
  border: 1px solid var(--line); border-left-width: 1px; border-left-color: var(--line);
  border-radius: 10px; line-height: 1.45;
}
.notice-strip > .notice > summary { color: var(--faint); }
.notice-strip > .notice > summary:hover,
.notice-strip > .notice[open] > summary { color: var(--dim); }
.notice-strip > .notice .fold-rest { color: var(--dim); }

/* ---------- sections ---------- */
.section { margin-top: 52px; }
.section-head { display: flex; align-items: baseline; gap: 10px; border-bottom: 1px solid var(--line); padding-bottom: 10px; }
.section-head .emoji { font-size: 1.375rem; }
.section-head h2 { font-family: var(--font-display); font-weight: 500; font-size: 1.5rem; margin: 0; flex: 1 1 auto; min-width: 0; overflow-wrap: break-word; }
.section-head .count { font-family: var(--font-data); font-size: 0.75rem; color: var(--faint); white-space: nowrap; font-variant-numeric: tabular-nums; }
.section-intro { color: var(--dim); font-size: 0.90625rem; margin: 12px 0 4px; }
.optional-chip {
  font-size: 0.6875rem; font-family: var(--font-data); letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--accent); border: 1px solid var(--accent-dim); border-radius: 20px; padding: 2px 9px; white-space: nowrap;
}

/* ---------- items ----------
   A very quiet hover surface: enough to tell you which question the pointer is
   in (they are long and the faint rules between them are all the structure there
   is), far too little to flicker at someone who is sensory-sensitive. It bleeds
   into the gutter so the tint reads as a row, not as a box drawn around text. */
.item {
  padding: 20px 12px 22px; margin-inline: -12px; border-radius: 10px;
  border-bottom: 1px solid rgba(45, 53, 66, 0.55);
  transition: background 0.14s ease;
}
@media (hover: hover) {
  .item:hover { background: rgba(233, 230, 222, 0.022); }
}
@media (prefers-reduced-motion: reduce) { .item { transition: none; } }
.item-text { margin: 0 0 6px; font-size: 1.0312rem; max-width: 82ch; }
.item-text .qid { font-family: var(--font-data); font-size: 0.6875rem; color: var(--faint); margin-right: 8px; }
.item-tools { display: flex; gap: 14px; align-items: center; margin-top: 10px; flex-wrap: wrap; }
.linkish {
  background: none; border: none; padding: 2px 4px; color: var(--faint); font-size: 0.78125rem;
}
.linkish:hover { color: var(--dim); }
.linkish.active { color: var(--accent); }

.help {
  background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 10px 14px; margin: 10px 0 2px; color: var(--dim); font-size: 0.84375rem;
}

/* ---------- answer buttons ----------
   These are the one control the whole page is made of, and they used to read as
   five empty input boxes: label at 12px in --dim (dimmer than the stem above
   them), a selected state that differed from the rest only by a hairline. They
   are a CHOICE control now — bigger label, near-body-colour text at rest, an
   accent-tinted selected surface with its own tick, one consistent height.
   `data-n` (set in app.js from scale.labels.length) is what lets the phone
   breakpoint choose a sane number per row instead of squeezing five. */
.answers {
  display: flex; gap: 7px; margin-top: 14px; flex-wrap: wrap;
  align-items: stretch;
}
.ans {
  position: relative;
  flex: 1 1 0; min-width: 64px; min-height: 56px; padding: 9px 8px;
  background: var(--panel); color: var(--ink-soft);
  border: 1px solid var(--line); border-radius: 9px;
  font-size: 0.8125rem; line-height: 1.3; text-align: center;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  transition: background 0.15s, border-color 0.15s, color 0.15s;
}
.ans:hover { background: var(--panel-2); border-color: var(--faint); color: var(--ink); }
.ans:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 9px; }
.ans.sel {
  background: color-mix(in srgb, var(--accent) 15%, var(--panel));
  border-color: var(--accent); color: var(--ink);
}
.ans.sel:hover { background: color-mix(in srgb, var(--accent) 20%, var(--panel)); }
/* a CSS-only tick, so the chosen option is legible without relying on the tint
   alone (and adds no translatable string) */
.ans.sel::after {
  content: "✓"; position: absolute; top: 3px; right: 6px;
  font-size: 0.625rem; line-height: 1; color: var(--accent);
}
.ans .n {
  display: block; font-family: var(--font-data); font-size: 0.6875rem;
  color: var(--faint); margin-bottom: 3px; font-variant-numeric: tabular-nums;
}
.ans.sel .n { color: var(--accent); }
@media (prefers-reduced-motion: reduce) { .ans { transition: none; } }

/* Phones: five options across a 350px column shredded "Moderately / sometimes"
   into "Moderat / ely / sometim / es". Three per row for a 5-point scale, two
   for a 4-point one, and never narrower than ~100px. */
@media (max-width: 480px) {
  .answers { gap: 6px; }
  .ans { min-width: 100px; flex: 1 1 calc(50% - 3px); }
  .answers[data-n="5"] .ans, .answers[data-n="6"] .ans { flex: 1 1 calc(33.333% - 5px); }
  .answers[data-n="3"] .ans { flex: 1 1 calc(33.333% - 5px); }
}
.skipped-chip { color: var(--faint); font-size: 0.78125rem; font-style: italic; }

/* evidence details */
.evidence {
  background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 12px 14px; margin-top: 10px; font-size: 0.8125rem; color: var(--dim);
}
.evidence .chips { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 8px; }
.chip {
  font-family: var(--font-data); font-size: 0.6875rem; padding: 2px 8px; border-radius: 20px;
  border: 1px solid var(--line); color: var(--dim); background: var(--panel-2); white-space: nowrap;
}
.chip.status-informed { border-color: #4a6741; color: var(--status-informed); }
.chip.status-heuristic { border-color: #6b5d3a; color: var(--status-heuristic); }
.chip.status-exploratory { border-color: #445266; color: var(--status-exploratory); }
.chip.status-structural { border-color: #5a4f6b; color: var(--status-structural); }
.evidence .note { white-space: pre-line; }
.evidence .shared {
  margin-top: 8px; padding: 8px 10px; border-left: 3px solid var(--line); background: var(--panel-2);
  border-radius: 0 6px 6px 0;
}
.evidence .shared b { color: var(--text); font-weight: 600; }
.evidence ul { margin: 6px 0 0; padding-left: 18px; }
.evidence li { margin: 3px 0; }
.evidence .ref-note { color: var(--dim); }
.evidence .ref-pending { color: var(--status-pending); white-space: nowrap; }

/* ---------- estimates panel (the signature) ---------- */
.est {
  background: var(--panel); border: 1px solid var(--line); border-radius: 14px;
  padding: 16px 16px 12px; box-shadow: 0 8px 30px var(--shadow);
}
.est h3 {
  margin: 0; font-family: var(--font-data); font-size: 0.75rem; font-weight: 600;
  letter-spacing: 0.14em; text-transform: uppercase; color: var(--accent);
}
.est .basis { font-size: 0.75rem; color: var(--faint); margin: 0 0 10px; }
/* Every block in the panel is a separate claim (neurotype / trauma / mood /
   related patterns / modules): a hairline between them is what stops the column
   reading as one long list of bars. `.modules` and `.account` already drew one;
   this makes it the rule rather than the exception. */
.est-group { margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--line); }
.est-group .gtitle {
  font-size: 0.78125rem; color: var(--ink); margin-bottom: 8px;
  display: flex; justify-content: space-between; align-items: baseline;
}
/* the right-hand side of a group title is the "Σ=100%" annotation — mono and
   faint, so it reads as a property of the block rather than as part of its name.
   A .src-chip there is a chip of its own and keeps its own styling. */
.est-group .gtitle > span:last-child:not(:first-child):not(.src-chip) {
  font-family: var(--font-data); font-size: 0.6875rem; color: var(--faint);
  font-variant-numeric: tabular-nums; white-space: nowrap; flex: 0 0 auto;
}
.bar-row { margin: 8px 0; }
.bar-label { display: flex; justify-content: space-between; align-items: baseline; font-size: 0.8125rem; margin-bottom: 4px; gap: 8px; }
.bar-label .who { color: var(--ink); min-width: 0; }
.bar-label .pct {
  font-family: var(--font-data); font-size: 0.78125rem; color: var(--dim);
  font-variant-numeric: tabular-nums; text-align: right; flex: 0 0 auto; min-width: 4.5ch;
}
.track {
  height: 7px; background: var(--track); border-radius: 999px; overflow: hidden;
  box-shadow: inset 0 0 0 1px rgba(233, 230, 222, 0.06);
}
.fill { height: 100%; border-radius: 999px; transition: width 0.5s cubic-bezier(0.22, 1, 0.36, 1); min-width: 2px; }

.flag-row { display: flex; align-items: center; gap: 8px; font-size: 0.8125rem; margin: 6px 0; }
.flag-row .fl { flex: 1 1 auto; color: var(--dim); min-width: 0; }
.flag-row .fp {
  font-family: var(--font-data); font-size: 0.75rem; color: var(--dim); white-space: nowrap;
  font-variant-numeric: tabular-nums; text-align: right; min-width: 4.5ch;
}
.flag-row .mini { flex: 0 0 52px; height: 5px; background: var(--track); border-radius: 999px; overflow: hidden; box-shadow: inset 0 0 0 1px rgba(233, 230, 222, 0.06); }
.flag-row .mini > div { height: 100%; border-radius: 3px; transition: width 0.5s ease; }
.flag-row.unanswered { opacity: 0.45; }
.flag-row.direct { align-items: baseline; flex-wrap: wrap; }
.flag-row.direct .fp { min-width: 0; max-width: 100%; white-space: normal; color: var(--ink-soft); }

.gate-note {
  margin-top: 12px; padding: 10px 12px; border: 1px solid #5a3a44; border-radius: var(--radius);
  background: rgba(181, 72, 93, 0.08); color: var(--dim); font-size: 0.78125rem;
}

/* a row withheld for lack of evidence, and the g=0 confound screens' notes —
   both display-only, see config/questionnaire.json meta.trauma_evidence_gate */
.gate-note.held { margin-top: 8px; border-color: var(--line); background: rgba(127, 176, 105, 0.06); }
.gate-note.confound { border-color: #4a5a6e; background: rgba(91, 141, 238, 0.08); }
/* absolute misfit: the winning profile explains these answers no better than it
   expects to, so everything below it is "least bad of twelve" — see
   config/model.json response_model.out_of_model */
.gate-note.misfit { margin-top: 0; margin-bottom: 12px; border-color: #6e5a3a; background: rgba(244, 162, 89, 0.10); }
/* the two M12 abstention/labelling states (docs/findings/M12.md §1.4, §2):
   `indecisive` = several profiles fit about equally, so the leader is not a
   finding; `provisional` = too little answered yet for any of it to mean much.
   Both display-only, both deliberately quieter than the misfit warning. */
.gate-note.indecisive { margin-top: 8px; border-color: #4a5a6e; background: rgba(138, 154, 165, 0.10); }
/* the two M3 gates (docs/findings/M3.md), rendered above everything else in the
   panel: `quality` = how these questions were answered (midpointing, long runs,
   opposite statements agreed with equally), `fit` = whether any of the twelve
   profiles could have produced this vector at all. Loudness follows severity:
   `uninterpretable` and `outside` are the strongest states this panel has, since
   they say the numbers below cannot be read straight. */
.gate-note.quality { margin-top: 0; margin-bottom: 12px; border-color: #6e5a3a; background: rgba(244, 162, 89, 0.10); }
.gate-note.quality.uninterpretable { border-color: #8a4a3a; background: rgba(230, 116, 91, 0.13); }
.gate-note.fit { margin-top: 0; margin-bottom: 12px; border-color: #4a5a6e; background: rgba(91, 141, 238, 0.08); }
/* M28's deterministic degenerate-protocol notice. Deliberately the loudest note
   on the panel: it is the only one that REPLACES the rows instead of annotating
   them, so it has to read as "nothing is being shown", not as a footnote. */
.gate-note.degenerate { margin: 0 0 12px; border-color: #8a4a3a; background: rgba(230, 116, 91, 0.13); }
.gate-note.degenerate.insufficient_variation { border-color: #6e5a3a; background: rgba(244, 162, 89, 0.10); }
.gate-note.fit.outside { border-color: #6e5a3a; background: rgba(244, 162, 89, 0.12); }
.gate-note.provisional { margin-top: 0; margin-bottom: 12px; border-color: var(--line); background: rgba(138, 154, 165, 0.08); }
.basis.share-semantics { margin-top: 2px; opacity: 0.85; }
.held-inline { color: var(--dim); font-size: 0.8125rem; }
/* the CPTSD side is covered thinly while the PTSD side is readable — a caveat on
   part of a row, so quieter than either the held or the misfit state
   (docs/findings/M11.md §3) */
.gate-note.partial { margin-top: 8px; border-color: var(--line); background: rgba(138, 154, 165, 0.08); }
.gate-note .coverage { margin-top: 6px; opacity: 0.8; font-size: 0.71875rem; }
/* "Overlap not assessed: <condition>" — a heading and a shared not-a-diagnosis
   line, deliberately not a warning colour (docs/findings/M11.md §4) */
.overlap-head { font-weight: 600; color: var(--fg); margin-bottom: 4px; }
.overlap-nodx { margin-top: 6px; opacity: 0.75; font-style: italic; }
/* leaving a question unanswered, and saying why. Every reason is worth exactly
   the same to the maths (LR 1.0) — see config/model.json missingness */
.skip-menu {
  margin-top: 8px; padding: 10px 12px; border: 1px dashed var(--line);
  border-radius: var(--radius); background: rgba(138, 154, 165, 0.06);
}
.skip-menu-title { font-size: 0.75rem; color: var(--dim); margin-bottom: 8px; }
.skip-opts { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 6px; }
.skip-opt {
  padding: 7px 11px; border: 1px solid var(--line); border-radius: var(--radius);
  background: transparent; color: var(--fg); font: inherit; font-size: 0.78125rem; cursor: pointer;
  overflow-wrap: break-word; text-align: left;
}
.skip-opt:hover { border-color: var(--accent); color: var(--accent); }
.skip-state { margin-top: 8px; font-size: 0.75rem; color: var(--dim); overflow-wrap: break-word; }
.skip-state .skip-nil { opacity: 0.75; }
.skip-care { margin-top: 6px; padding: 8px 10px; border-radius: var(--radius); background: rgba(127, 176, 105, 0.08); }

.prior-toggle { display: flex; gap: 6px; margin-top: 14px; }
.prior-toggle button {
  flex: 1 1 0; font-size: 0.71875rem; padding: 6px 8px; border-radius: 8px;
  background: var(--panel-2); color: var(--dim); border: 1px solid var(--line); line-height: 1.3;
}
.prior-toggle button.sel { border-color: var(--accent); color: var(--ink); }
.est .footnote { font-size: 0.6875rem; color: var(--faint); margin-top: 12px; border-top: 1px solid var(--line); padding-top: 8px; }
.est .toolrow { display: flex; gap: 10px; margin-top: 10px; }
.est .toolrow button { flex: 1; }
.btn {
  background: var(--panel-2); color: var(--dim); border: 1px solid var(--line);
  border-radius: 8px; padding: 6px 10px; font-size: 0.78125rem;
}
.btn:hover { color: var(--ink); border-color: var(--faint); }
.btn.primary { color: var(--primary-ink); border-color: var(--accent-dim); background: var(--primary-bg); }
.btn.primary:hover { border-color: var(--accent); }

/* Handing the record to an AI. Given its own block rather than a third button in
 * the tool row because it is the one action here a person is likely to WANT and
 * unlikely to guess exists — a lone "Export answers" button reads as a backup
 * chore, not as "you can continue this conversation somewhere smarter". */
.est .export-block {
  margin-top: 16px; padding: 12px; border: 1px solid var(--line);
  border-radius: var(--radius); background: var(--panel-2);
}
.est .export-lead { font-size: 0.8125rem; color: var(--ink); margin-bottom: 4px; }
.est .export-blurb {
  font-size: 0.71875rem; color: var(--faint); line-height: 1.5; margin-bottom: 10px;
  overflow-wrap: break-word;
}
.est .export-block .toolrow { margin-top: 0; flex-wrap: wrap; }
.est .export-block .toolrow button { flex: 1 1 auto; min-width: 42%; }

/* the carry-over notice: answers kept across a version, minus reworded ones */
.notice.carry-note { border-left-color: var(--accent-dim); }

/* summary card */
.summary {
  margin-top: 48px; background: var(--panel); border: 1px solid var(--line);
  border-radius: 14px; padding: 20px;
}
.summary h2 { font-family: var(--font-display); font-weight: 500; margin: 0 0 10px; }
.summary p { color: var(--dim); font-size: 0.90625rem; }
.summary .lead { color: var(--ink); font-size: 1rem; }
/* M12 §12's result-page headline: the one line that has to be read before the
   pattern name below it, so it is styled as a label rather than as prose. */
.summary .fit-headline {
  font-family: var(--font-data); font-size: 0.75rem; letter-spacing: 0.06em;
  color: var(--accent); margin: 0 0 8px;
}
.summary .lead-caveat { color: var(--dim); font-size: 0.875rem; margin-top: -4px; }

/* mobile: estimates join the ordinary document flow after the questionnaire.
   Never turn this back into a fixed bottom sheet: iPhone and messenger browser
   toolbars cover it, and an open sheet obscures the result it is explaining. */
.est-fab { display: none; }
@media (max-width: 980px) {
  .columns { display: block; }
  .flow { max-width: none; }
  .aside {
    position: static; width: 100%; max-height: none; overflow: visible;
    margin-top: 48px; padding: 0; transform: none;
  }
  .est { border-radius: 14px; }
  .flow > .account {
    margin: 14px 0 18px; padding: 12px 14px;
    background: var(--panel); border: 1px solid var(--line); border-radius: 12px;
  }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .fill, .flag-row .mini > div, .sh-track > i, .read-progress { transition: none; }
}

/* ---- v0.2 additions (review batch + i18n) ---- */
.mast-top { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
/* a real segmented control: one pill that holds both languages, the chosen one
   raised inside it — rather than two separate buttons where "selected" was only
   a border colour */
.lang-toggle {
  display: inline-flex; gap: 2px; flex: 0 0 auto;
  background: var(--panel); border: 1px solid var(--line);
  border-radius: 999px; padding: 2px;
}
.lang-toggle button {
  background: transparent; border: 1px solid transparent; color: var(--faint);
  border-radius: 999px; padding: 3px 11px; font-size: 0.75rem; font-family: var(--font-data);
  letter-spacing: 0.04em; transition: background 0.15s, color 0.15s, border-color 0.15s;
}
.lang-toggle button:hover { color: var(--dim); }
.lang-toggle button.sel { background: var(--panel-2); border-color: var(--accent-dim); color: var(--ink); }
@media (prefers-reduced-motion: reduce) { .lang-toggle button { transition: none; } }
.masthead .audience { color: var(--faint); font-size: 0.78125rem; margin: 6px 0 0; }
.notice.tiny { font-size: 0.78125rem; padding: 8px 12px; color: var(--faint); }
.scale-hint { color: var(--faint); font-size: 0.78125rem; margin-top: 8px; font-style: italic; }
.defs { margin: 8px 0 0; }
.def {
  background: var(--panel-2); border-left: 3px solid var(--accent); border-radius: 0 8px 8px 0;
  padding: 8px 12px; margin: 6px 0; font-size: 0.84375rem; color: var(--dim);
}
.def b { color: var(--ink); font-weight: 600; }
/* The panel's own header: the title and the hide control were both loose inline
   text on one baseline, so the row read as two labels rather than as a heading
   with an action. The title keeps its mono/accent treatment; the control becomes
   a small ghost button that looks pressable and cannot be mistaken for prose. */
.est-title-row {
  display: flex; align-items: center; justify-content: space-between;
  gap: 10px; margin-bottom: 8px;
}
.est-title-row h3 { flex: 1 1 auto; min-width: 0; }
.est-title-row .linkish {
  flex: 0 0 auto; font-size: 0.71875rem; color: var(--dim);
  border: 1px solid var(--line); border-radius: 999px;
  padding: 3px 10px; background: transparent; white-space: nowrap;
  transition: border-color 0.15s, color 0.15s, background 0.15s;
}
.est-title-row .linkish:hover { color: var(--ink); border-color: var(--accent-dim); background: var(--panel-2); }
@media (prefers-reduced-motion: reduce) { .est-title-row .linkish { transition: none; } }
.hidden-note {
  background: var(--panel-2); border-radius: 8px; padding: 14px 12px; margin-top: 12px;
  color: var(--faint); font-size: 0.8125rem;
}
.prior-toggle { flex-wrap: wrap; }
.prior-toggle button { text-align: left; transition: border-color 0.15s, color 0.15s, background 0.15s; }
.prior-toggle button:hover { color: var(--ink); border-color: var(--faint); }
.prior-toggle button.sel { background: color-mix(in srgb, var(--accent) 13%, var(--panel-2)); }
@media (prefers-reduced-motion: reduce) { .prior-toggle button { transition: none; } }
/* the same squeeze the answer buttons had: a five-option relative row ("Clearly
   fits, never assessed", "No, not even a lean"…) shredded into one word a line
   on a phone. Two per row, never under ~100px. */
@media (max-width: 480px) {
  .prior-toggle button { flex: 1 1 calc(50% - 3px); min-width: 100px; }
}
.prior-note { color: var(--faint); font-size: 0.71875rem; margin-top: 6px; overflow-wrap: break-word; }
/* the prior-sensitivity line sits directly under a row of bars and is a caveat
   about them, so it gets a rule tying it to the bars rather than reading as a
   third unrelated footnote */
.prior-note.spread-note { border-top: 1px dashed var(--line, rgba(128,128,128,.35)); padding-top: 5px; }
/* prior-shift blocks (👤 demographics, 🧬 family history).
   One row per model class, ALWAYS in the model's own order — see ShiftRows in
   web/app.js for why the old sort-by-magnitude had to go. The two blocks sit one
   above the other, so the columns are fixed widths rather than content-sized:
   the labels, the bars, the arrows and the fold chips all line up vertically
   between blocks, which is what makes them comparable at a glance. */
/* the headline block: base rate -> starting point, said once */
.prior-note.start-note {
  margin-top: 11px; padding-top: 9px; border-top: 1px dashed var(--line);
}
.start-note .sh-head { color: var(--ink); font-size: 0.78125rem; }
.start-note .sh-lead { margin: 3px 0 9px; }

/* the two-step audit, folded away — see StartingPointNote for why it is not the
   default view any more */
.sh-steps { margin-top: 10px; }
.sh-steps > summary {
  cursor: pointer; color: var(--faint); font-size: 0.6875rem; list-style: none;
  padding: 3px 0; user-select: none;
}
.sh-steps > summary::-webkit-details-marker { display: none; }
.sh-steps > summary::before { content: "▸ "; }
.sh-steps[open] > summary::before { content: "▾ "; }
.sh-steps > summary:hover { color: var(--dim); }

/* inside the audit the two adjustments are separate steps, so they get a rule
   between them — without one they read as a single eleven-row list */
.prior-note.demo-note { margin-top: 10px; padding-top: 8px; border-top: 1px dashed var(--line); }
.sh-steps .prior-note.demo-note:first-of-type { border-top: 0; padding-top: 0; margin-top: 4px; }
.demo-note .sh-head { margin-bottom: 8px; }
.shift-rows { display: flex; flex-direction: column; gap: 7px; }
/* deliberately the same shape as .bar-row above — label line, track under it —
   because these rows are those rows one step earlier */
.shift-row .sh-label {
  display: flex; justify-content: space-between; align-items: baseline;
  gap: 8px; margin-bottom: 3px; font-size: 0.75rem;
}
/* wraps rather than truncates: the Ukrainian "Немає травматичного розладу" does
   not fit the 320px aside, and a row whose name is cut off is worse than a row
   two lines tall */
.shift-row .sh-who { color: var(--dim); min-width: 0; overflow-wrap: break-word; }
.shift-row.flat { opacity: 0.55; }
.shift-row.flat .sh-who { color: var(--faint); }

/* before/after on one shared 0-100% scale: solid to the smaller number, ghost
   on to the larger. Gain -> ghost leads; loss -> ghost trails. */
.sh-track {
  position: relative; height: 4px; border-radius: 3px;
  background: var(--panel-2); overflow: hidden;
}
.sh-track > i {
  position: absolute; left: 0; top: 0; height: 100%; border-radius: 3px;
  min-width: 2px; transition: width 0.45s cubic-bezier(0.22, 1, 0.36, 1);
}
.sh-ghost { opacity: 0.3; }
.sh-solid { opacity: 0.95; }

.sh-nums {
  font-family: var(--font-data); font-size: 0.71875rem; white-space: nowrap;
  display: inline-flex; align-items: baseline; gap: 4px; flex: 0 0 auto;
}
.sh-nums .sh-from { color: var(--faint); }
.sh-nums .sh-to { color: var(--ink); font-weight: 600; }
.sh-nums .sh-arrow { font-size: 0.625rem; color: var(--faint); }
.shift-row.up .sh-arrow, .shift-row.down .sh-arrow { color: var(--dim); }

/* the fold change, which is the only channel that stays readable when a row
   moves 0.29% -> 4.1%: fourteen-fold, and invisible on any absolute scale */
.sh-fold {
  font-family: var(--font-data); font-size: 0.65625rem; color: var(--faint);
  white-space: nowrap;
}
.shift-row.up .sh-fold, .shift-row.down .sh-fold {
  color: var(--dim); border: 1px solid var(--line); border-radius: 999px;
  padding: 0 5px; margin-left: 1px;
}
.shift-row.flat .sh-fold { font-family: var(--font-body); }
.summary .high-note { color: var(--ink); background: var(--panel-2); border-radius: 8px; padding: 10px 12px; font-size: 0.84375rem; }
.support-footer {
  position: fixed; bottom: 10px; left: 10px; z-index: 40;
  background: var(--panel); border: 1px solid var(--line); border-radius: 999px;
  padding: 6px 14px; font-size: 0.75rem; color: var(--dim); opacity: 0.92;
  max-width: min(92vw, 520px); overflow-wrap: break-word;
}
@media (max-width: 980px) {
  .support-footer { bottom: 64px; }
}

/* ---- "About you" profile card (optional sex/age for the depression baseline) ---- */
.profile-card {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 16px 18px;
  margin: 22px 0;
}
/* WRAPS, because heading chips do not. On a 390px phone two chips can leave the
   <h2> so little room that it shreds to one letter per line. */
.section-head.compact { border-bottom: none; padding-bottom: 2px; flex-wrap: wrap; }
.section-head.compact h2 { font-size: 1.1875rem; }
.pfield { margin-top: 12px; }
.pfield-label {
  display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap;
  font-size: 0.875rem; color: var(--ink);
}
.pfield .prior-toggle { margin-top: 6px; }
/* a titled block of profile fields (family history) — same card, own heading, so
   the "about you" facts and the "about your relatives" facts stay distinct */
.pgroup {
  margin-top: 18px;
  padding-top: 14px;
  border-top: 1px dashed var(--line);
}

/* ---- conditional block inside a section (the depression quick check) ---- */
.qgroup {
  margin: 20px 0 8px;
  padding: 16px 18px;
  background: var(--panel);
  border: 1px solid var(--line);
  border-left: 3px solid var(--accent);
  border-radius: var(--radius);
  /* the block appears mid-page in response to an answer: a short, low-motion
     reveal so it is noticed without being startling (sensory-sensitive audience) */
  animation: qgroup-in 220ms ease-out;
}
@keyframes qgroup-in { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .qgroup { animation: none; } }
.qgroup-head { display: flex; align-items: baseline; gap: 10px; }
.qgroup-head .emoji { font-size: 1.1875rem; }
.qgroup-head h3 {
  font-family: var(--font-display); font-weight: 500; font-size: 1.1875rem;
  margin: 0; flex: 1 1 auto; min-width: 0; overflow-wrap: break-word;
}
.qgroup-head .count { font-family: var(--font-data); font-size: 0.75rem; color: var(--faint); white-space: nowrap; }
.qgroup-result {
  margin-top: 14px; padding: 12px 14px;
  background: var(--panel-2); border-radius: 8px;
  font-size: 0.8125rem; color: var(--dim);
}
.qgroup-result .qr-top {
  display: flex; justify-content: space-between; align-items: baseline;
  gap: 10px; flex-wrap: wrap; margin-bottom: 8px;
}
.qgroup-result .qr-top b { font-family: var(--font-data); color: var(--ink); font-size: 0.875rem; }
.qgroup-result .band { font-size: 0.78125rem; }
.qgroup-result .track { position: relative; overflow: visible; }
.qgroup-result .track .fill { height: 100%; border-radius: 4px; transition: width 260ms ease; }
.qgroup-result .track .cutoff {
  position: absolute; top: -3px; width: 2px; height: 12px;
  background: var(--accent); border-radius: 1px;
}
.qgroup-result .qr-lead { margin-top: 9px; overflow-wrap: break-word; }
.qgroup-result .linkish { margin-top: 8px; }

/* ---- depression row in the estimates panel ---- */
.src-chip {
  font-size: 0.6875rem; color: var(--faint); font-family: var(--font-body);
  border: 1px solid var(--line); border-radius: 999px; padding: 1px 8px;
  white-space: nowrap;
}
.src-chip.known { color: var(--accent); border-color: var(--accent-dim); }
.dep-basis { font-size: 0.75rem; color: var(--faint); margin-top: 6px; overflow-wrap: break-word; }
.dep-note {
  font-size: 0.75rem; color: var(--dim); margin-top: 8px;
  padding: 8px 10px; background: var(--panel-2); border-radius: 8px;
  overflow-wrap: break-word;
}
.dep-note.warn { border-left: 2px solid var(--accent); }

/* ---- optional PsyMeasure account row (only rendered when the API is there) ---- */
.est-group.account { border-top: 1px solid var(--line); padding-top: 12px; }
.acct-lead, .acct-privacy, .acct-notice, .acct-state {
  font-size: 0.75rem; color: var(--dim); overflow-wrap: break-word;
}
.acct-privacy { color: var(--faint); margin-top: 8px; }
.acct-who { font-size: 0.78125rem; color: var(--ink); display: flex; align-items: center; gap: 7px; }
.acct-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--good); flex: 0 0 auto; }
.acct-dot[data-state="saving"] { background: var(--accent); }
.acct-dot[data-state="error"]  { background: #e07a5f; }
.acct-state { margin-top: 4px; }
.acct-gbtn { margin: 10px 0 6px; min-height: 40px; }
.acct-notice {
  margin-top: 8px; padding: 8px 10px;
  background: var(--panel-2); border-radius: 8px; border-left: 2px solid var(--accent);
}
.acct-notice .linkish { display: block; margin-top: 6px; }

/* ---- UX-1 (2026-08-29): foldable masthead notices + independent panel scroll ----
   ---- UX-2 (2026-09-01): the same fold generalized to every explanatory block ---- */

/* Every <details> on this page draws its OWN indicator (a .fold-more chevron, or
   ::before on .sh-steps), so the three engines' native triangles all go: Blink
   and WebKit use ::-webkit-details-marker, Firefox uses ::marker, and both need
   list-style off for the marker box itself. */
details > summary { list-style: none; }
details > summary::-webkit-details-marker { display: none; }
details > summary::marker { content: ""; }

/* A folded block (Fold in app.js) carries the SAME wrapper class as its flat
   twin — .section-intro, .prior-note, .notice.tiny, .mod-note, .dep-note,
   .pat-lead, .basis — so its typography, colour and spacing come from that class
   and are never restated here. These rules add only the affordance: a pointer, a
   chevron that turns, and a brightening on hover so the summary reads as
   clickable rather than as a sentence that happens to be short. */
.foldnote > summary { cursor: pointer; }
.foldnote > summary:hover { color: var(--ink); }
.fold-more {
  display: inline-block; margin-left: 6px; color: var(--dim);
  font-size: 0.6875rem; transition: transform 0.15s ease;
}
details[open] > summary .fold-more { transform: rotate(90deg); }
details > summary:hover .fold-more { color: var(--ink); }
.foldnote .fold-rest { margin-top: 8px; }
/* a <p class="section-intro"> that folds becomes a <details>: keep the paragraph
   margins it had, since the surrounding rhythm was set against them */
details.section-intro { margin: 12px 0 4px; }
/* the optional continuation of the "Before you start" disclaimer — inside the
   same notice as the disclaimer, which itself never folds (see App) */
.disclaimer-more { margin-top: 8px; }
.disclaimer-more.foldnote > summary { color: var(--dim); }

/* A profile group that scores NOTHING collapses to its own heading row
   (ProfileCard). The summary IS the .section-head.compact row, so it lays out as
   a flex line with the chevron parked at the end. */
.pgroup.foldgroup > summary { cursor: pointer; display: flex; align-items: baseline; gap: 8px; }
.pgroup.foldgroup > summary > .section-head { flex: 1 1 auto; min-width: 0; }
.pgroup.foldgroup > summary:hover h2 { color: var(--accent); }
@media (prefers-reduced-motion: reduce) { .fold-more { transition: none; } }

/* Desktop: the estimates panel scrolls on its own, independent of the main
 * question column — it is taller than the viewport, and without this its lower
 * half (reference population, account, export) was unreachable while sticky.
 * Mobile deliberately stays in the normal page scroll above. */
@media (min-width: 981px) {
  .aside {
    max-height: calc(100vh - 32px);
    overflow-y: auto;
    overscroll-behavior: contain;
    /* room for the scrollbar so it never sits on top of the numbers */
    padding-right: 6px;
    scrollbar-gutter: stable;
    scrollbar-width: thin;
    scrollbar-color: var(--line) transparent;
  }
  /* WebKit/Blink ignores scrollbar-color: without this the track is invisible
   * and the panel reads as "cut off" rather than "scrollable". */
  .aside::-webkit-scrollbar { width: 8px; }
  .aside::-webkit-scrollbar-track { background: transparent; }
  .aside::-webkit-scrollbar-thumb {
    background: var(--line); border-radius: 999px;
    border: 2px solid transparent; background-clip: content-box;
  }
  .aside:hover::-webkit-scrollbar-thumb { background: var(--dim); background-clip: content-box; }
}

/* ---- the screening-module panel (M32/M33/M36) ----
   Deliberately not bars: these are independent screens, they do not sum, and a
   bar chart would invite the joint reading the architecture forbids. */
.est-group.modules { border-top: 1px solid var(--line); padding-top: 12px; }
.clinical-history .hist-lead { font-size: 0.75rem; color: var(--dim); margin-bottom: 10px; overflow-wrap: break-word; }
.hist-scope + .hist-scope { margin-top: 10px; }
.hist-scope-title { color: var(--dim); font-size: 0.6875rem; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; margin-bottom: 5px; }
.hist-row { display: grid; grid-template-columns: minmax(72px, .42fr) minmax(0, 1fr); gap: 8px; padding: 7px 9px; border-left: 3px solid var(--line); background: var(--soft); font-size: 0.75rem; line-height: 1.35; }
.hist-row + .hist-row { margin-top: 5px; }
.hist-row span { overflow-wrap: anywhere; }
.mod-family { display: block; margin-top: 3px; color: var(--ink); }
.mod-lead { font-size: 0.75rem; color: var(--dim); margin-bottom: 10px; overflow-wrap: break-word; }
.mod-row {
  padding: 8px 10px; margin-top: 6px; border-radius: 8px;
  background: var(--panel-2); border-left: 2px solid var(--line);
}
.mod-row.pos { border-left-color: var(--accent); }
.mod-row.neg { border-left-color: var(--good); }
.mod-row.todo { opacity: 0.62; }
/* An unpriced row reports a score and no probability, so it must not LOOK like a
 * row whose percentage merely failed to render. The dashed edge marks it as a
 * different kind of statement, and the note below the panel says why. */
.mod-row.unpriced { border-left-style: dashed; border-left-color: var(--dim); }
.mod-row.unpriced .mod-verdict { color: var(--ink); font-style: italic; }
.mod-head { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.mod-name { font-size: 0.8125rem; color: var(--ink); overflow-wrap: break-word; }
.mod-verdict { font-size: 0.78125rem; color: var(--dim); white-space: normal; text-align: right; }
.mod-row.pos .mod-verdict { color: var(--ink); }
.mod-basis {
  font-size: 0.71875rem; color: var(--faint); margin-top: 4px;
  display: flex; justify-content: space-between; gap: 10px; flex-wrap: wrap;
  overflow-wrap: break-word;
}
.mod-inst { color: var(--faint); }
.mod-note {
  font-size: 0.75rem; color: var(--dim); margin-top: 8px;
  padding: 8px 10px; background: var(--panel-2); border-radius: 8px;
  overflow-wrap: break-word;
}
.mod-note.warn { border-left: 2px solid var(--accent); }