/* ============ the self-check ============
   The stylesheet for one page, and deliberately not site.css.

   This page is not part of the website. It has no bar, no footer, no
   pager, no pill and nothing to navigate to but the way back — because
   the moment somebody starts a screener, every other link on the screen
   is an invitation to abandon it. Giving it its own file rather than a
   `body.is-test` branch inside site.css is the same decision made once
   more: a change to the site cannot reach in here and move something
   under a person answering questions about their own attention.

   Tokens and faces still come from theme.css, so it is recognisably the
   same brand — just none of the same furniture. */

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

body{
  background:var(--surface);
  color:var(--ink);
  font-family:var(--sans);
  line-height:1.5;
  -webkit-font-smoothing:antialiased;
  min-height:100dvh;
  display:flex; flex-direction:column;
}

.sprite{position:absolute; width:0; height:0; overflow:hidden}

/* ---------- the shell ----------
   One column, centred, capped at a reading measure. No full-bleed
   anything: this is a form, and a form that sprawls is a form you lose
   your place in. */
.t-wrap{
  width:100%; max-width:760px;
  margin-inline:auto;
  padding:clamp(20px,4vw,40px) clamp(20px,5vw,40px)
          calc(clamp(28px,5vh,56px) + env(safe-area-inset-bottom, 0px));
  flex:1;
  display:flex; flex-direction:column;
}

/* ---------- the head ----------
   The mark, and the one link off this page. It is a text link rather than
   a button because it must not compete with the answers. */
.t-head{
  display:grid; grid-template-columns:1fr auto 1fr; align-items:center;
  gap:16px; padding-block:clamp(4px,1.4vh,12px);
  margin-bottom:clamp(24px,5vh,52px);
}
.t-head .brand-lockup{justify-self:start}
.t-head-right{justify-self:end}
/* "3 / 6" — only while a question is up. */
.t-count{
  font-family:var(--mono); font-size:13px; letter-spacing:.06em;
  font-variant-numeric:tabular-nums; color:var(--faint);
  visibility:hidden;
}
body[data-view="quiz"] .t-count{visibility:visible}
/* While answering, the head stays put, so the way out and the count are
   never a scroll away. The shadow paints the surface out to both edges
   of the window and the clip keeps it off the top and bottom. */
body[data-view="quiz"] .t-head,
body[data-view="breath"] .t-head{
  position:sticky; top:0; z-index:5;
  background:var(--surface);
  box-shadow:0 0 0 100vmax var(--surface); clip-path:inset(0 -100vmax);
  margin-bottom:clamp(14px,3vh,32px);
  padding-top:clamp(10px,2vh,16px);
}
.t-head .brand-lockup{display:flex; align-items:center; gap:9px; text-decoration:none}
.t-head .logo{width:26px; height:26px; display:block}
.t-head .lg-star{fill:var(--orange)}
.t-head .lg-pill{stroke:var(--violet)}
.t-head .wordmark{
  font-family:var(--display); font-weight:800; font-size:20px;
  letter-spacing:-.02em; color:var(--ink);
}
.t-head .wordmark .accent{color:var(--wordmark-accent)}
/* The exit and the language switch share the right end of the head, in
   the same quiet register: nothing up here may compete with the answers.
   The switch is two letters each because the page has no room for a
   word — and "BM" is what every Malaysian form calls it. */
.t-head-right{display:flex; align-items:center; gap:clamp(14px,2.4vw,26px)}
/* On a phone the Malay exit label is longer than the English and there is
   no row that holds the lockup, the switch and it side by side without
   breaking the label in half. So the right end stacks: switch above,
   exit under it, both flush right, and the label keeps its one line. */
@media (max-width:480px){
  .t-head-right{flex-direction:column; align-items:flex-end; gap:6px}
  .t-exit{white-space:nowrap}
}
.t-lang{display:flex; align-items:center; gap:2px}
.t-lang button{
  font:inherit; font-size:13px; letter-spacing:.04em; line-height:1;
  color:var(--faint); background:none; border:1px solid transparent;
  border-radius:999px; padding:6px 9px; cursor:pointer;
  transition:color .18s var(--ease), border-color .18s var(--ease), background .18s var(--ease);
}
.t-lang button:hover{color:var(--ink)}
.t-lang button[aria-pressed="true"]{color:var(--ink); border-color:var(--line-strong); background:var(--wash)}
.t-lang button:focus-visible{outline:none; border-color:var(--accent); box-shadow:0 0 0 4px var(--focus)}
.t-exit{
  font-size:14px; color:var(--faint); text-decoration:none;
  border-bottom:1px solid transparent;
  transition:color .18s var(--ease), border-color .18s var(--ease);
}
.t-exit:hover{color:var(--ink); border-bottom-color:var(--line-strong)}
.t-exit:focus-visible{outline:2px solid var(--accent); outline-offset:3px; border-radius:3px}

/* ---------- type ---------- */
.kicker{
  font-family:var(--mono); font-size:12px; letter-spacing:.12em;
  text-transform:uppercase; color:var(--faint);
  margin-bottom:clamp(14px,2.4vh,22px);
}
h1{
  font-family:var(--display); font-weight:600;
  font-size:clamp(28px,5.4vw,46px); line-height:1.1; letter-spacing:-.025em;
  color:var(--ink); text-wrap:balance;
}
.lede{
  margin-top:clamp(16px,2.6vh,24px);
  font-size:clamp(16px,2vw,19px); line-height:1.6; color:var(--ink-soft);
}
.adhd-word{color:var(--wordmark-accent)}

.t-actions{
  display:flex; flex-wrap:wrap; gap:14px 18px; align-items:center;
  margin-top:clamp(28px,4.4vh,44px);
}
/* Orange is the site's action colour and it means one thing — start here.
   It belongs on exactly one button on this page. */
.btn{
  display:inline-flex; align-items:center; gap:12px;
  padding:14px 22px 14px 24px; border-radius:999px;
  border:1.5px solid var(--line-strong); background:none;
  font-family:var(--sans); font-size:16px; color:var(--ink);
  text-decoration:none; cursor:pointer;
  transition:border-color .18s var(--ease), background .18s var(--ease);
}
.btn:hover{border-color:var(--accent); background:var(--wash)}
.btn:focus-visible{outline:none; border-color:var(--accent); box-shadow:0 0 0 4px var(--focus)}
.btn-go{
  background:var(--orange); border-color:var(--orange); color:#FFFFFF;
  font-weight:500;
}
.btn-go:hover{background:var(--orange); border-color:var(--orange); filter:brightness(1.06)}
.btn-go:focus-visible{box-shadow:0 0 0 4px rgba(247,92,3,.28)}

/* ---------- the progress bar ----------
   Six questions is short and eighteen is not, and the difference between
   "nearly there" and "no idea how long this is" is the difference between
   finishing and closing the tab. */
.q-bar{
  position:fixed; top:0; left:0; right:0; z-index:10;
  height:4px; background:var(--line);
  display:none;
}
body[data-view="quiz"] .q-bar,
body[data-view="breath"] .q-bar{display:block}
.bar-fill{
  display:block; height:100%; width:0%;
  background:var(--orange);
  transition:width .3s var(--ease);
}
.q-meta{
  font-family:var(--mono); font-size:12px; letter-spacing:.1em;
  text-transform:uppercase; color:var(--faint);
  margin-bottom:clamp(14px,2.4vh,22px);
}

/* ---------- the navigator ----------
   The intro's pill figure, made live: six long pills for Part A and, once
   it is taken on, twelve short ones for Part B after a wider gap. A lit
   pill is an answer given; the ringed one is where you are. Each is a
   button with room around it — the pill is 8px tall and a finger is not —
   so the hit area is the padding and the pill is drawn by ::before. */
.q-steps{
  display:flex; flex-wrap:wrap; align-items:center; gap:2px;
  margin:0 0 clamp(22px,4vh,40px) -5px;
}
.q-step{
  display:grid; place-items:center;
  padding:10px 5px; background:none; border:0; cursor:pointer;
}
.q-step::before{
  content:""; display:block; width:30px; height:8px; border-radius:999px;
  background:var(--line-strong);
  transition:background .2s var(--ease), box-shadow .2s var(--ease);
}
.q-step--b::before{width:16px; height:7px}
.q-step:nth-child(6){margin-right:12px}
.q-step.is-done::before{background:var(--orange)}
.q-step.is-here::before{box-shadow:0 0 0 2px var(--surface), 0 0 0 4px var(--accent)}
.q-step:not(:disabled):hover::before{box-shadow:0 0 0 2px var(--surface), 0 0 0 4px var(--line-strong)}
.q-step.is-here:hover::before{box-shadow:0 0 0 2px var(--surface), 0 0 0 4px var(--accent)}
.q-step:disabled{cursor:default}
.q-step:disabled::before{opacity:.55}
.q-step:focus-visible{outline:none}
.q-step:focus-visible::before{box-shadow:0 0 0 2px var(--surface), 0 0 0 5px var(--focus), 0 0 0 4px var(--accent)}

/* ---------- the question ----------
   Large, and alone on the screen. Nothing else is competing for the
   sentence you are being asked to be honest about. */
.q-text{
  font-family:var(--display); font-weight:600;
  font-size:clamp(21px,3.4vw,32px); line-height:1.25; letter-spacing:-.015em;
  color:var(--ink); text-wrap:balance;
  outline:none;
}
/* The question and its EN chip, side by side. */
.q-legend{display:flex; align-items:flex-start; gap:14px}
.q-legend .q-text{flex:1}
.q-en{
  flex:none; margin-top:.35em;
  font-family:var(--mono); font-size:11px; letter-spacing:.06em; line-height:1;
  padding:6px 8px; border-radius:999px; cursor:pointer;
  color:var(--muted); background:none; border:1px solid var(--line-strong);
  transition:color .16s var(--ease), border-color .16s var(--ease), background .16s var(--ease);
}
.q-en:hover{color:var(--ink); border-color:var(--ink)}
.q-en[aria-expanded="true"]{background:var(--ink); border-color:var(--ink); color:var(--surface)}
.q-en:focus-visible{outline:none; box-shadow:0 0 0 4px var(--focus); border-color:var(--accent)}
.q-en-text{
  margin-top:14px; padding:12px 16px;
  border-left:3px solid var(--line-strong); background:var(--wash);
  border-radius:0 10px 10px 0;
  font-size:15px; line-height:1.55; color:var(--ink-soft);
}

/* ---------- the answers ----------
   The five steps of the scale in a row, left to right as the scale runs,
   each the same width — a row of equal cells, so a short label is no
   easier to press than a long one. The number is the key that picks it.
   On a phone the row would crush "Very often" into two lines of four
   letters, so the cells stack into full-width rows instead, in the same
   order. */
.q-options{
  display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); gap:10px;
  margin-top:clamp(26px,4.4vh,44px);
}
.ans{
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:10px;
  min-height:96px; padding:16px 8px;
  border:1.5px solid var(--line-strong); border-radius:14px;
  background:var(--surface); color:var(--ink);
  font-family:var(--sans); font-size:15px; line-height:1.25; text-align:center;
  cursor:pointer; hyphens:auto;
  transition:border-color .16s var(--ease), background .16s var(--ease), transform .16s var(--ease);
}
.ans-n{
  display:grid; place-items:center; width:26px; height:26px; border-radius:999px;
  border:1.5px solid var(--line-strong);
  font-family:var(--mono); font-size:12px; color:var(--faint);
  transition:background .16s var(--ease), border-color .16s var(--ease), color .16s var(--ease);
}
.ans:hover{border-color:var(--accent); background:var(--wash)}
.ans:active{transform:scale(.98)}
.ans[aria-pressed="true"]{
  border-color:var(--orange); background:rgba(247,92,3,.08); font-weight:600;
}
.ans[aria-pressed="true"] .ans-n{background:var(--orange); border-color:var(--orange); color:#FFFFFF}
.ans:focus-visible{outline:none; border-color:var(--accent); box-shadow:0 0 0 4px var(--focus)}
@media (max-width:640px){
  .q-options{grid-template-columns:1fr; gap:8px}
  .ans{flex-direction:row; justify-content:flex-start; min-height:0; padding:14px 16px; gap:14px; font-size:16px; text-align:left}
}

/* The question arrives with a short rise, restarted by render(). */
[data-screen="quiz"].is-in .q-meta,
[data-screen="quiz"].is-in .q-legend,
[data-screen="quiz"].is-in .q-en-text,
[data-screen="quiz"].is-in .q-options{animation:q-in .32s var(--ease) both}
[data-screen="quiz"].is-in .q-options{animation-delay:.05s}
@keyframes q-in{from{opacity:0; transform:translateY(8px)}}

/* The radio rows on the details form (gender). The quiz answers above
   are .ans, not .opt; .opt is the form's. */
.opt{
  display:flex; align-items:center; gap:14px;
  width:100%; padding:16px 20px;
  border:1.5px solid var(--line); border-radius:12px;
  background:var(--surface);
  font-family:var(--sans); font-size:clamp(15px,1.9vw,17px); color:var(--ink);
  text-align:left; cursor:pointer;
  transition:border-color .16s var(--ease), background .16s var(--ease);
}
.opt::before{
  content:""; flex:none; width:16px; height:16px; border-radius:999px;
  border:1.5px solid var(--line-strong);
  transition:border-color .16s var(--ease), box-shadow .16s var(--ease);
}
.opt:hover{border-color:var(--line-strong); background:var(--wash)}

/* ---------- the gate, the details form, the door that stays shut ----------
   Everything from here to the result belongs to the three screens in
   front of the questions. The fields are styles.css's .field trio, copied
   rather than imported: this page does not load the app's stylesheet and
   admin.css sets the precedent for restating a handful of rules instead
   of pulling in a file for three of them.

   No rule in this block sets display:grid or display:flex on a
   [data-screen] section. See the note at the foot of this file — an
   author sheet's display outranks [hidden], and a screen that forgets
   :not([hidden]) renders on top of question one. */
.field{display:block; width:100%; margin-top:clamp(20px,3vh,28px)}
.field-label{
  display:block; font-family:var(--sans); font-size:13px; font-weight:600;
  color:var(--muted); margin-bottom:8px;
}
.field-input{
  width:100%; font-family:var(--sans); font-size:16px; color:var(--ink);
  background:var(--surface); border:1.5px solid var(--line-strong);
  border-radius:12px; padding:13px 15px;
  transition:border-color .16s var(--ease), box-shadow .16s var(--ease);
}
.field-input:focus{
  outline:none; border-color:var(--accent); box-shadow:0 0 0 4px var(--focus);
}
.field-input[aria-invalid="true"]{border-color:var(--danger)}
/* 16px on the input above is not a taste decision: iOS Safari zooms the
   whole page in when a focused field is smaller than that, and a form
   that jumps on first tap reads as broken. */

.f-set{border:0; padding:0; margin-top:clamp(20px,3vh,28px)}
.f-set .field-label{padding:0}

/* "optional", in the label, in the same mono the rest of the page uses
   for a label about a label. It has to be visible before the field is
   filled in, not discovered after a validation error. */
.f-opt{
  font-family:var(--mono); font-size:11px; letter-spacing:.08em;
  text-transform:uppercase; color:var(--faint); font-weight:400;
  margin-left:8px;
}

/* The gender radios are .opt, and their state is :has(input:checked)
   because they are real radios. Where :has() is not understood the
   radio still works and simply loses its filled circle. */
.opt-set{display:grid; gap:10px}
.opt:has(input:checked){border-color:var(--orange)}
.opt:has(input:checked)::before{
  border-color:var(--orange);
  box-shadow:inset 0 0 0 4px var(--orange);
}
.opt:has(input:focus-visible){
  border-color:var(--accent); box-shadow:0 0 0 4px var(--focus);
}
.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;
}

/* ---------- the consent block ---------- */
.c-block{
  margin-top:clamp(28px,4.4vh,44px);
  padding:clamp(18px,3vw,26px);
  border:1.5px solid var(--line); border-radius:14px;
  background:var(--wash);
}
/* ---------- the figures ----------
   The same drawing language as the rest of the site (site.css `.cfig`),
   restated here because this page deliberately does not load site.css —
   see the head of this file. Same class names on purpose: a figure moved
   from a site page to this one keeps working, and one drawn here reads as
   the same hand.

   Every figure on this page carries a fact the prose beside it also
   states, which is the rule in docs/visual-first.md: take it out and the
   page loses something. Nothing here is decoration — a screener is the
   last place to spend a reader's attention on a picture that means
   nothing. */
.t-fig{max-width:300px; margin:20px 0 22px}
.cfig{display:block; width:100%; height:auto; overflow:visible}
.cfig .w{fill:none; stroke:var(--accent); stroke-width:2; stroke-linecap:round; stroke-linejoin:round}
.cfig .q{fill:none; stroke:var(--line-strong); stroke-width:2; stroke-linecap:round; stroke-linejoin:round}
.cfig .h{fill:none; stroke:var(--accent); stroke-width:3.2; stroke-linecap:round}
.cfig .d{fill:var(--accent)}
.cfig .dot-q{fill:var(--line-strong)}
/* The one dashed shape on the page: the thing this test does NOT give
   you. Drawn as an outline nobody has filled in, because that is what it
   is. */
.cfig .dash{fill:none; stroke:var(--line-strong); stroke-width:2; stroke-dasharray:7 6}

/* ---------- what is kept ----------
   The storage paragraph used to be one 121-word block. It is four facts —
   what, where, what for, how long — so it is set as four, each led by the
   fact it answers. */
.t-keeps{list-style:none; margin:14px 0 0; padding:0}
.t-keeps li{
  position:relative; padding-left:18px; margin-bottom:10px;
  font-size:15px; line-height:1.6; color:var(--muted);
}
.t-keeps li::before{
  content:""; position:absolute; left:0; top:.62em;
  width:7px; height:7px; border-radius:2px; background:var(--line-strong);
}
.t-keeps li b{color:var(--ink); font-weight:600}
/* The three purposes, under the label that introduces them. A nested list
   rather than three clauses in one 44-word sentence — and the label is a
   <span> with its own key, because applyLang() writes innerHTML and a key
   on the parent <li> would wipe the children out. */
.t-keeps-sub{margin:8px 0 0 2px}
.t-keeps-sub li{margin-bottom:6px; font-size:14.5px}
.t-keeps-sub li::before{width:5px; height:5px; border-radius:50%; top:.68em}

/* ---------- the notice, in parts ----------
   A block inside the notice paragraph. The PDPA text is not re-worded —
   it is the same sentences with air between the five things they say, so
   somebody who opens the disclosure meets five short blocks instead of a
   two-hundred-word wall. */
.c-para{display:block}
.c-para + .c-para{margin-top:11px}

.c-notice{
  font-size:13.5px; line-height:1.65; color:var(--muted);
  margin-bottom:14px;
}
.c-notice strong{color:var(--ink)}
.c-notice:last-child{margin-bottom:0}

/* ---------- the notice, in two languages ----------
   Both are on the page because the PDPA asks for both. Only one is open:
   the open one hides its own summary and reads as plain prose, and the
   closed one is a single line offering itself in its own language. That
   is why there is no disclosure triangle above the notice you are already
   reading — there is nothing there to press. */
.c-notice-wrap + .c-notice-wrap{
  margin-top:14px; padding-top:14px; border-top:1px solid var(--line);
}
.c-notice-wrap[open] > .c-notice-alt{display:none}

.c-notice-alt{
  display:inline-flex; align-items:center; gap:7px;
  font-size:13px; font-weight:600; color:var(--accent);
  cursor:pointer; list-style:none; padding:2px 0;
}
.c-notice-alt::-webkit-details-marker{display:none}
/* Its own caret, because the native one sits outside the text on Safari
   and inside it on Chrome, and this row has to line up with the prose. */
.c-notice-alt::before{
  content:''; width:0; height:0;
  border-left:5px solid currentColor;
  border-top:4px solid transparent; border-bottom:4px solid transparent;
  transition:transform .16s var(--ease);
}
.c-notice-alt:hover{text-decoration:underline}
.c-notice-alt:focus-visible{
  outline:none; border-radius:6px;
  box-shadow:0 0 0 3px var(--focus);
}
.check{
  display:flex; align-items:flex-start; gap:13px;
  margin-top:16px; cursor:pointer;
  font-family:var(--sans); font-size:14.5px; line-height:1.5; color:var(--ink);
}
/* Square, where .opt is round. A circle means "one of these"; these are
   three independent answers and two of them are required, so the shape
   has to say "many". */
.check::before{
  content:""; flex:none; width:18px; height:18px; margin-top:1px;
  border:1.5px solid var(--line-strong); border-radius:5px;
  transition:border-color .16s var(--ease), box-shadow .16s var(--ease);
}
.check:hover::before{border-color:var(--ink)}
/* Orange here is a state mark, not a second call to action — the one
   button rule above still holds. */
.check:has(input:checked)::before{
  border-color:var(--orange);
  box-shadow:inset 0 0 0 4px var(--orange);
}
.check:has(input:focus-visible)::before{
  border-color:var(--accent); box-shadow:0 0 0 4px var(--focus);
}
.check a{color:var(--accent)}

/* ---------- errors ---------- */
.f-err{
  margin-top:8px; font-family:var(--sans); font-size:13px;
  line-height:1.45; color:var(--danger);
}

/* A bare <p> on these screens has no margin of its own — the intro never
   needed one, because every paragraph there is a .lede or inside a
   .t-note. The young screen has two plain paragraphs in a row and they
   ran together. */
[data-screen="young"] .lede + p{
  margin-top:clamp(14px,2vh,20px);
  font-size:clamp(15px,1.8vw,17px); line-height:1.6; color:var(--ink-soft);
}

/* ---------- the small print under a button ---------- */
.t-fine{
  margin-top:clamp(18px,2.6vh,26px);
  font-size:13.5px; line-height:1.6; color:var(--faint);
}

/* One line under the result, written only once the save has actually
   landed or actually failed. Hidden until then, so a request that never
   finished says nothing rather than something untrue. */
.r-saved{
  margin-top:clamp(20px,3vh,28px);
  font-family:var(--mono); font-size:12px; letter-spacing:.06em;
  color:var(--faint);
}

.q-foot{
  display:flex; align-items:center; justify-content:space-between; gap:16px;
  margin-top:clamp(24px,4vh,36px);
}
.q-back{
  background:none; border:0; padding:6px 0; cursor:pointer;
  font-family:var(--sans); font-size:14px; color:var(--faint);
}
.q-back:hover:not(:disabled){color:var(--ink)}
.q-back:disabled{opacity:.35; cursor:default}
.q-back:focus-visible{outline:2px solid var(--accent); outline-offset:3px; border-radius:4px}
.q-hint{
  font-family:var(--mono); font-size:11px; letter-spacing:.1em;
  text-transform:uppercase; color:var(--faint); text-align:right;
}
@media (max-width:560px){ .q-hint{display:none} }

/* ---------- the result ---------- */
.r-head{display:flex; align-items:baseline; gap:16px; flex-wrap:wrap}
.r-score{
  font-family:var(--display); font-weight:600;
  font-size:clamp(52px,12vw,96px); line-height:1; letter-spacing:-.04em;
  color:var(--orange);
}
.r-of{
  font-family:var(--mono); font-size:13px; letter-spacing:.1em;
  text-transform:uppercase; color:var(--faint);
}
.r-verdict{
  margin-top:clamp(18px,3vh,28px);
  font-family:var(--display); font-weight:600;
  font-size:clamp(20px,3.2vw,30px); line-height:1.22; letter-spacing:-.02em;
  color:var(--ink); text-wrap:balance;
}
.r-detail{
  margin-top:clamp(14px,2.4vh,22px);
  font-size:clamp(15px,1.9vw,18px); line-height:1.65; color:var(--ink-soft);
}
.r-partb{
  margin-top:clamp(24px,4vh,36px); padding:18px 20px;
  border:1px solid var(--line); border-radius:12px;
  font-size:15px; line-height:1.6; color:var(--muted);
}
/* ---------- the meter ----------
   Six pips for Part A, twelve for Part B. The same fact as the number
   beside them, in a form you can read without reading — which is worth
   something to somebody who has just answered eighteen questions. Orange
   is the signal colour here exactly as it is everywhere else: a lit pip is
   an answer in the band, and the unlit ones are the rest of the scale. */
.r-meter{
  display:flex; gap:6px; flex-wrap:wrap;
  margin-top:clamp(14px,2vh,20px);
}
.pip{
  width:34px; height:8px; border-radius:999px;
  background:var(--line-strong);
}
.pip.is-on{background:var(--orange)}
.r-meter--b{margin-top:14px}
.r-meter--b .pip{width:18px; height:6px}

/* ---------- what this is not, on the result ----------
   One line where there used to be two sections. It keeps its own edge so
   it does not read as another paragraph of the explanation above it. */
.r-caution{
  margin-top:clamp(24px,4vh,34px);
  padding:16px 18px; border-left:3px solid var(--orange);
  background:var(--wash); border-radius:0 12px 12px 0;
  font-size:15px; line-height:1.6; color:var(--ink-soft);
}
.r-caution b{color:var(--ink)}

/* ---------- the next three things ----------
   Numbered, because they are in an order: take it to someone, bring your
   own notes, and the day still has to get done. */
.r-next{
  list-style:none; counter-reset:step;
  margin-top:clamp(26px,4vh,40px);
  display:grid; gap:10px;
}
/* Padding and an absolute number, NOT grid or flex. A grid makes every
   child its own cell, and the third of these rows ends in a link — which
   landed in a cell of its own, on a line of its own, with the full stop
   after it stranded in a third. Inline content has to stay inline. */
.r-next li{
  counter-increment:step; position:relative;
  padding:15px 16px 15px 52px;
  border:1px solid var(--line); border-radius:12px;
  font-size:15px; line-height:1.6; color:var(--ink-soft);
}
.r-next li::before{
  content:counter(step);
  position:absolute; left:16px; top:15px;
  font-family:var(--mono); font-size:12px; color:var(--faint);
  width:22px; height:22px;
  display:grid; place-items:center;
  border:1px solid var(--line-strong); border-radius:999px;
}

/* ---------- the credit ----------
   Small, last, and not a wall. The full attribution and the full storage
   notice are on the intro, where they are read before anything is
   answered rather than after. */
.r-credit{
  margin-top:clamp(26px,4vh,36px);
  padding-top:16px; border-top:1px solid var(--line);
  font-size:13px; line-height:1.65; color:var(--faint);
}
.r-credit a{color:var(--muted)}

/* ---------- the small print, folded ----------
   Who wrote the instrument, and what this page is not. Both are read
   before anybody answers — folded under the start button rather than
   standing between a reader and it. The summary is a full-width row in
   the mono the page uses for labels, with a plus that turns as it opens. */
.t-more{
  width:100%; max-width:640px; margin-inline:auto;
  border-top:1px solid var(--line);
}
.t-more:last-of-type{border-bottom:1px solid var(--line)}
.t-hero + .t-more{margin-top:clamp(40px,8vh,88px)}
.t-more > summary{
  display:flex; align-items:center; justify-content:space-between; gap:16px;
  padding:18px 2px; cursor:pointer; list-style:none;
  font-family:var(--mono); font-size:12px; letter-spacing:.12em;
  text-transform:uppercase; color:var(--muted);
  transition:color .16s var(--ease);
}
.t-more > summary::-webkit-details-marker{display:none}
.t-more > summary::after{
  content:"+"; flex:none; font-size:18px; line-height:1; letter-spacing:0;
  color:var(--faint); transition:transform .2s var(--ease);
}
.t-more[open] > summary::after{transform:rotate(45deg)}
.t-more > summary:hover{color:var(--ink)}
.t-more > summary:focus-visible{outline:none; box-shadow:0 0 0 3px var(--focus); border-radius:6px}
.t-more-body{padding:0 2px 26px}
.t-more-body p{font-size:15px; line-height:1.7; color:var(--muted); max-width:68ch}
.t-more-body p + p, .t-more-body ul + p{margin-top:.9em}
.t-more-body > ul:not(.t-keeps){list-style:none; margin-top:10px; display:grid; gap:6px}
.t-more-body > ul:not(.t-keeps) li{font-size:14.5px; line-height:1.6; color:var(--muted)}
.t-more-body li b{font-weight:600; color:var(--ink-soft)}
.t-more-body .warn{color:var(--ink-soft)}
.t-more-body .t-fig{max-width:260px}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms !important; transition-duration:.01ms !important}
}

/* ---------- the intro: one screen ----------
   What it is, two things to keep in mind, and the button — centred, and
   all of it above the fold on a 720-tall laptop, so the decision and the
   means to act on it are on the same screen. */
.t-hero{
  width:100%; max-width:620px; margin-inline:auto;
  text-align:center;
  padding-block:clamp(4px,3vh,40px) 0;
}
.t-hero .lede{max-width:54ch; margin-inline:auto}

.t-points{
  list-style:none; text-align:left;
  max-width:440px; margin:clamp(26px,4.4vh,40px) auto 0;
  display:grid; gap:clamp(14px,2.2vh,20px);
}
.t-points li{display:flex; align-items:flex-start; gap:15px}
.t-point-icon{
  flex:none; display:grid; place-items:center;
  width:46px; height:46px; border-radius:999px;
  background:var(--wash);
}
.t-point-icon .cfig{width:24px; height:24px}
.t-point-body{display:grid; gap:2px; padding-top:3px}
.t-point-body b{font-weight:600; font-size:16px; color:var(--ink)}
.t-point-body span{font-size:14.5px; line-height:1.5; color:var(--muted)}

.btn-lg{
  justify-content:center; width:100%; max-width:440px;
  margin-top:clamp(26px,4.4vh,40px);
  padding:18px 26px; font-size:17px;
  box-shadow:0 12px 30px -12px rgba(247,92,3,.55);
}
.btn-lg:hover{box-shadow:0 14px 34px -10px rgba(247,92,3,.6)}
.t-meta{
  margin-top:16px;
  font-family:var(--mono); font-size:12px; letter-spacing:.06em;
  color:var(--muted);
}
.t-meta-sub{
  max-width:44ch; margin:6px auto 0;
  font-size:13px; line-height:1.55; color:var(--faint);
}

/* ---------- the breather ---------- */
[data-screen="breath"]{text-align:center}
.b-mark{display:block; width:52px; height:52px; margin:clamp(8px,4vh,48px) auto clamp(18px,3vh,28px)}
.b-h{
  font-family:var(--display); font-weight:600;
  font-size:clamp(26px,4.6vw,40px); line-height:1.12; letter-spacing:-.02em;
  color:var(--ink); text-wrap:balance; outline:none;
}
[data-screen="breath"] .lede{max-width:50ch; margin-inline:auto}
.b-fig{margin:clamp(24px,4vh,36px) auto 0; max-width:220px}
[data-screen="breath"] .t-actions{justify-content:center}
[data-screen="breath"] .q-foot{justify-content:center}

/* ---------- the result, as a card ----------
   The score sits in the warm wash the homepage gives its Start here
   door, so the page that door leads to ends in the same light. */
.r-card{
  padding:clamp(22px,4vw,36px);
  border:1px solid var(--line); border-radius:var(--radius-lg);
  background:
    linear-gradient(158deg, rgba(247,92,3,.10), rgba(247,92,3,.02) 62%),
    var(--surface);
}
.r-card .r-verdict{margin-top:clamp(20px,3vh,28px)}
.r-actions{margin-top:clamp(24px,4vh,34px)}

/* Every answer. Number, question, the answer as a chip; the chips in
   the shaded band take the accent, which is the one thing on this list a
   clinician scans for. */
.r-answers{margin-top:clamp(34px,6vh,56px)}
.r-sub{
  font-family:var(--mono); font-size:12px; font-weight:400;
  letter-spacing:.12em; text-transform:uppercase; color:var(--faint);
  outline:none;
}
.r-sub-note{margin-top:8px; font-size:14px; line-height:1.6; color:var(--muted)}
.r-list{list-style:none; margin-top:14px; border-top:1px solid var(--line)}
.r-list li{
  display:grid; grid-template-columns:34px 1fr auto; align-items:baseline; gap:6px 14px;
  padding:13px 0; border-bottom:1px solid var(--line);
}
.r-q-n{font-family:var(--mono); font-size:12px; color:var(--faint)}
.r-q{font-size:14.5px; line-height:1.55; color:var(--ink-soft)}
.r-a{
  justify-self:end; white-space:nowrap;
  padding:4px 11px; border-radius:999px;
  font-size:12.5px; font-weight:500; line-height:1.4;
  background:var(--wash); color:var(--muted);
}
.r-a.is-band{
  background:color-mix(in srgb, var(--accent) 14%, transparent);
  color:var(--accent); font-weight:600;
}
@media (max-width:560px){
  .r-list li{grid-template-columns:28px 1fr}
  .r-a{grid-column:2; justify-self:start}
}

/* The heading of each form screen — the three quick things, the last
   step, the door that stays shut — in the display face, like every
   other heading on the page. They were falling back to the sans. */
[data-screen="about"] > h2,
[data-screen="details"] > h2,
[data-screen="young"] > h2{
  font-family:var(--display); font-weight:600;
  font-size:clamp(26px,4.6vw,40px); line-height:1.12; letter-spacing:-.02em;
  color:var(--ink); text-wrap:balance; outline:none;
}

/* ---------- three quick things ----------
   The details form's own .field and .opt-set, a screen before the
   questions. The diagnosis list is five rows long, so its rows are a
   touch tighter than gender's three. */
[data-screen="about"] .opt-set{gap:8px}
[data-screen="about"] .f-set + .f-err{margin-top:8px}

/* ---------- the unlock ----------
   The score and verdict first, in the same warm card the full result
   uses, so what is free and what is offered read as one thing. Then the
   four things the sign-in adds, set like the intro's two points. */
.u-preview{
  margin-top:4px;
  padding:clamp(20px,3.6vw,30px);
  border:1px solid var(--line); border-radius:var(--radius-lg);
  background:
    linear-gradient(158deg, rgba(247,92,3,.10), rgba(247,92,3,.02) 62%),
    var(--surface);
}
.u-preview .r-score{font-size:clamp(46px,9vw,72px)}
.u-verdict{
  margin-top:clamp(14px,2.4vh,20px);
  font-family:var(--display); font-weight:600;
  font-size:clamp(18px,2.6vw,24px); line-height:1.25; letter-spacing:-.015em;
  color:var(--ink); text-wrap:balance; outline:none;
}
.u-h{
  margin-top:clamp(30px,5vh,48px);
  font-family:var(--display); font-weight:600;
  font-size:clamp(24px,4vw,34px); line-height:1.15; letter-spacing:-.02em;
  color:var(--ink); text-wrap:balance; outline:none;
}
.u-gets{
  list-style:none; margin-top:clamp(18px,3vh,26px);
  display:grid; gap:clamp(14px,2.2vh,18px);
}
.u-gets li{display:flex; align-items:flex-start; gap:15px}
.u-gets .t-point-icon{width:42px; height:42px}
.u-gets .cfig{width:22px; height:22px}
[data-screen="gate"] .t-actions{margin-top:clamp(26px,4vh,36px)}
[data-screen="gate"] .btn-go{padding-inline:30px}
.u-leave{margin-top:14px; font-size:14px}
.g-leave{color:var(--faint); text-decoration:none; border-bottom:1px solid var(--line-strong)}
.g-leave:hover{color:var(--ink); border-bottom-color:var(--ink)}
.g-leave:focus-visible{outline:2px solid var(--accent); outline-offset:3px; border-radius:3px}

/* Paper only. */
.r-print-head{display:none}

/* ---------- on paper ----------
   "A copy that stays yours" is the headline's promise, and this is it:
   the result, the caution, and every answer, in black on white whatever
   theme the screen was in, with the pips and band marks drawn so they
   survive a printer that drops backgrounds. The #_ is only there to
   outrank the dark-theme selectors in theme.css. */
@media print{
  html:not(#_){
    --surface:#FFFFFF; --wash:#FFFFFF; --ink:#101018; --ink-soft:#26262F;
    --muted:#3D3D48; --faint:#55555F; --line:#CFCFD6; --line-strong:#8E8E99;
    --accent:#101018;
  }
  @page{margin:16mm 16mm 18mm}
  body{background:#FFFFFF; display:block; -webkit-print-color-adjust:exact; print-color-adjust:exact}
  .t-head, .q-bar, .r-actions, .r-saved, .r-next{display:none !important}
  .t-wrap{max-width:none; padding:0}
  .r-print-head{
    display:flex; justify-content:space-between; gap:16px;
    font-family:var(--mono); font-size:10px; letter-spacing:.08em; text-transform:uppercase;
    padding-bottom:8px; margin-bottom:18px; border-bottom:1px solid var(--ink);
  }
  .r-card{background:none; break-inside:avoid}
  .r-score{color:var(--ink)}
  .pip{background:none; border:1.5px solid var(--ink)}
  .pip.is-on{background:var(--ink)}
  .r-caution{border-left-color:var(--ink); background:none}
  .r-partb{break-inside:avoid}
  .r-list li{break-inside:avoid}
  .r-a{background:none; border:1px solid var(--line-strong); color:var(--ink-soft)}
  .r-a.is-band{background:none; border:1.5px solid var(--ink); color:var(--ink); font-weight:700}
  .r-a.is-band::before{content:"\25CF\00A0"}
}