/* Atlas — questionnaires: the builder (therapist) and the capture page
   (respondent). Tokens live in app.css; the shared list-page, drawer and
   history-item styles are in views.css.

   Two halves with opposite starting points, on purpose:

   - the BUILDER is a desk tool and follows the app's convention — written wide,
     narrowed by `max-width` queries, one rule at every width (a row that no
     longer fits folds; nothing is hidden).
   - the CAPTURE PAGE is written MOBILE-FIRST and widened by a `min-width`
     query, because respondents are on phones almost exclusively
     (SYSTEM-INTENT → "Responsive layout"). It is the one surface where the
     narrow case is the design rather than the degradation, so the base rules
     here ARE the phone and the desktop is the variant. */

/* --- The list page --------------------------------------------------------- */

.qn-new { display: flex; gap: 12px; align-items: center; padding: 16px 18px; margin: 16px 0 18px; flex-wrap: wrap; }
.qn-new-name { flex: 1; min-width: 200px; }

/* --- The builder ------------------------------------------------------------

   The builder IS the form (board task 55). Everything below exists to take
   chrome OFF the page: a field is a real input drawn as plain text until
   somebody reaches for it, a question shows the control a respondent answers
   with, and the tools that change it appear bottom-right of the one question
   being worked on and nowhere else.

   Two rules that are easy to break here.

   Hidden must mean HIDDEN. `.qn-q-tools` uses `visibility`, not opacity alone:
   a browser walk asking "is the chrome absent when nothing is focused" is
   answered `true` by a fully transparent control, and the whole reveal would
   then be untested (FIXER-NOTES footgun 22's family).

   There is no hover on a phone, so `@media (hover: none)` puts a permanent,
   faint mark under every editable field. Without it the page is a form with no
   sign that any of it can be typed in. */

.qn-head-row { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; margin-top: 6px; }
.qn-title-slot { flex: 1 1 260px; min-width: 0; }
.qn-head-badges { display: flex; gap: 6px; flex-wrap: wrap; }

/* `flex: 0 1 auto` + `min-width: 0` + wrap — footgun 34, three times over: a row
   of actions that grows by one is sliced off the side of a 390px pane when its
   children are pinned at max-content, and `overflow: hidden` cuts it in silence. */
.qn-actions {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  align-items: center;
  padding: 12px 14px;
  margin-bottom: 0;
}

.qn-actions > * { flex: 0 1 auto; min-width: 0; }

/* The draft strip. The badge in the head is a fact about the questionnaire; this
   is a warning about the SCREEN, and it is drawn at the width of the work it is
   protecting — the owner lost a whole form to a language switch and the only
   thing that had said so was a badge the size of a word. */
.qn-draft-strip {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  margin: 12px 0 0;
  padding: 10px 14px;
  border: 1px solid var(--warn-border);
  border-left: 4px solid var(--warn-text);
  border-radius: var(--radius-sm);
  background: var(--warn-bg);
  color: var(--warn-text);
  font-size: 13.5px;
}

.qn-draft-says { flex: 1 1 240px; min-width: 0; }

/* Its own line, and stronger: somebody else has saved since this draft began,
   which is a different thing from "you have not saved yet". */
.qn-draft-moved {
  flex: 1 1 100%;
  font-weight: 600;
}

/* Which side of the form is on screen. A row that folds, like the actions row
   above it — it holds a label, two buttons and a sentence (footgun 34). */
.qn-sides { padding: 10px 14px; margin-bottom: 14px; }

.qn-sides-row {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

.qn-sides-label { margin-bottom: 0; flex: none; }
.qn-sides-buttons { display: flex; gap: 6px; flex-wrap: wrap; }
.qn-side-btn { flex: 0 1 auto; min-width: 0; }
.qn-sides-hint { flex: 1 1 220px; min-width: 0; }

/* Saying which side is the original sits next to the buttons that name it, and
   shrinks before they do: it is a statement about the form, made once, and it
   must not read as the third choice in a row of three. */
.qn-sides-original { flex: 0 1 auto; min-width: 0; }

.qn-sides-offer {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px solid var(--border);
  font-size: 13.5px;
}

.qn-sides-empty { flex: 1 1 220px; min-width: 0; color: var(--text-soft); }

.qn-tab-bar { margin: 12px 0 14px; border: 1px solid var(--border); border-radius: var(--radius-sm); }
.qn-tabs { flex-wrap: wrap; }
.qn-tab { flex: 0 1 auto; min-width: 0; }

.qn-panel { display: flex; flex-direction: column; gap: 14px; }

.qn-setup, .qn-question-list, .qn-leads-panel, .qn-decisions,
.qn-presentation { padding: 18px 20px; }

.qn-section-title {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 18px;
  margin: 0;
}

.qn-question-head-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  flex-wrap: wrap;
  margin-bottom: 14px;
}

/* The public link. A readonly input rather than a paragraph: it is selectable on a
   machine where the clipboard API is blocked, which is the fallback the copy
   button falls back TO. */
.qn-link-card { padding: 14px 16px; }
.qn-link-row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.qn-link-url { flex: 1 1 240px; min-width: 0; font-family: var(--font-mono); font-size: 12.5px; }

/* --- The field that does not look like a field ------------------------------ */

.quiet {
  display: block;
  width: 100%;
  box-sizing: border-box;
  font: inherit;
  color: inherit;
  background: transparent;
  border: 1px solid transparent;
  border-radius: var(--radius-sm);
  padding: 5px 8px;
  margin: -5px -8px;
  resize: none;
  overflow: hidden;
}

.quiet::placeholder { color: var(--text-soft); opacity: 0.75; }
/* Light, for the same reason `.qn-q:hover` is: hovering a field is a preview of
   typing in it, and `:focus` below goes white. Reaching for a box should not
   darken it on the way to a state that brightens it. */
.quiet:hover { background: #fff; border-color: var(--border); }

.quiet:focus {
  outline: none;
  background: #fff;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-soft);
}

.quiet-heading {
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--text-soft);
}

.qn-title {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 27px;
  line-height: 1.2;
}

.qn-setup-field { display: flex; flex-direction: column; gap: 5px; margin-bottom: 18px; }
.qn-setup-field:last-child { margin-bottom: 0; }
.qn-intro, .qn-thanks { font-size: 15px; color: var(--text-soft); }

/* A phone has no hover, so the affordance has to be standing there already -
   faint enough to read past, clear enough to reach for. */
@media (hover: none) {
  .quiet { border-bottom-color: var(--border); border-radius: 0; }
  .quiet:hover { background: transparent; }
}

/* --- A question, drawn as the respondent gets it ---------------------------- */

.qn-questions { display: flex; flex-direction: column; gap: 10px; margin-bottom: 14px; }

.qn-q {
  position: relative;
  border: 1px solid transparent;
  border-radius: var(--radius-sm);
  padding: 14px 16px 14px;
  background: transparent;
}

/* Hover LIFTS the question towards the state clicking into it produces; it used
   to darken it away from that state, which is backwards (owner, 2026-08-21:
   "I don't want to see it go dark, I want to see it go light, meaning it's
   going to stay light if I start typing in that area").
   `--surface-2` is a beige a shade heavier than the card, so hovering shaded the
   whole block - "a bit too visually impactful with the dark shading everywhere" -
   while `.is-active` went white. Same direction now, two strengths: hover is the
   white with a soft border, active firms the border up and adds the shadow. The
   border is what says WHICH question is in hand, which was the ask; the fill
   only stops it looking like a hole in the card. */
.qn-q:hover { border-color: var(--border); background: #fff; }
.qn-q.is-active { border-color: var(--border-strong); background: #fff; box-shadow: var(--shadow); }
.qn-q.is-collapsed { padding-bottom: 10px; }

.qn-q-body { display: flex; flex-direction: column; gap: 6px; margin-top: 8px; }
.qn-q-prompt { font-size: 15.5px; font-weight: 600; }
.qn-q-answer { margin-top: 6px; display: flex; flex-direction: column; gap: 8px; }

/* The respondent's own control, shown but not operable: this is a picture of the
   form, and a therapist half-answering their own questionnaire is noise. */
.capture-input.is-inert, .capture-choice-box.is-inert { pointer-events: none; }

/* The answer box on a TEXT question, in the builder. It has to read as "the
   respondent types here, not you" without being the darkest thing on the page —
   it used to fill with `--surface-2`, the same beige the hover has now stopped
   using, so a form of text questions was a column of shaded blocks (owner,
   2026-08-21: "when we have a text option it still remains the darker beige
   colour").
   White like every other input, and DASHED instead: an outline says "a box goes
   here" where a fill says "this box is disabled". `pointer-events: none` above
   is what actually makes it inert; the colour never was. */
.capture-input.is-inert {
  background: #fff;
  border-style: dashed;
  border-color: var(--border);
  color: var(--text-soft);
}

.qn-q .capture-choice { cursor: default; }
.qn-q .capture-choice-label { flex: 1; min-width: 0; display: flex; align-items: center; gap: 6px; }
.qn-answer-label { font-size: 16px; }

.qn-icon {
  border: 0;
  background: transparent;
  color: var(--text-soft);
  font-size: 18px;
  line-height: 1;
  padding: 2px 6px;
  border-radius: var(--radius-sm);
  cursor: pointer;
  visibility: hidden;
}

.qn-q.is-active .qn-icon { visibility: visible; }
.qn-icon:hover:not(:disabled) { background: var(--danger-soft); color: var(--danger-strong); }
.qn-icon:disabled { opacity: 0.3; cursor: not-allowed; }

.qn-add-answer, .qn-add-question { align-self: flex-start; }
.qn-q .qn-add-answer { visibility: hidden; }
.qn-q.is-active .qn-add-answer { visibility: visible; }

/* --- The tools, bottom right ------------------------------------------------ */

.qn-q-tools {
  display: flex;
  gap: 6px;
  align-items: center;
  justify-content: flex-end;
  flex-wrap: wrap;
  margin-top: 10px;
  visibility: hidden;
  opacity: 0;
  transition: opacity 120ms ease;
}

.qn-q.is-active .qn-q-tools, .qn-q:hover .qn-q-tools { visibility: visible; opacity: 1; }

.qn-tool {
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--text-soft);
  font: inherit;
  font-size: 12px;
  font-weight: 600;
  padding: 4px 10px;
  border-radius: 999px;
  cursor: pointer;
  white-space: nowrap;
}

.qn-tool:hover { color: var(--text); border-color: var(--border-strong); }
.qn-tool.is-on { background: var(--accent-soft); border-color: var(--accent); color: var(--accent-strong); }

/* Upward and to the right, so it opens over the question it belongs to and
   inside the card rather than off the side of a 390px screen. */
.qn-menu {
  position: absolute;
  right: 12px;
  bottom: 46px;
  z-index: 20;
  min-width: 190px;
  max-width: calc(100% - 24px);
  display: flex;
  flex-direction: column;
  gap: 1px;
  padding: 6px;
  background: var(--surface);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow);
}

.qn-menu[hidden] { display: none; }

.qn-menu-head {
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-soft);
  padding: 4px 8px 2px;
}

.qn-menu-sep { border-top: 1px solid var(--border); margin: 5px 0; }

.qn-menu-item {
  border: 0;
  background: transparent;
  font: inherit;
  font-size: 13.5px;
  text-align: left;
  color: var(--text);
  padding: 7px 8px;
  border-radius: var(--radius-sm);
  cursor: pointer;
}

.qn-menu-item:hover:not(:disabled) { background: var(--surface-2); }
.qn-menu-item:disabled { opacity: 0.4; cursor: not-allowed; }
.qn-menu-item.is-on { background: var(--accent-soft); color: var(--accent-strong); font-weight: 600; }
.qn-menu-item.is-danger { color: var(--danger); }

/* --- The Russian drawer ----------------------------------------------------- */

.drawer-translate .drawer { width: min(560px, 96vw); }

/* The button that says how far the Russian side is behind. Not a global button
   variant: it is the only warning-coloured button in Atlas, and one page's need
   is a poor reason to add a fourth colour to every page's vocabulary.

   Two states, and both can be true at once: `is-stale` is a translation that no
   longer matches what it was made from, `is-behind` a field with no translation
   at all. The BLOCKER wins the colour, which is why it is written second — only
   `is-behind` stops a press of Publish, and the count of the other is on the
   button in words either way. */
.qn-russian.is-stale { border-color: var(--stale-border); background: var(--stale-bg); color: var(--stale-text); }
.qn-russian.is-behind { border-color: var(--warn-border); background: var(--warn-bg); color: var(--warn-text); }

.qn-tr-actions { display: flex; gap: 8px; flex-wrap: wrap; margin: 10px 0 6px; }
.qn-tr-status { margin: 0 0 12px; }
/* The drawer body does NOT scroll on its own (views.css) - the history list
   brings its own `overflow-y`, and so must this. Without it a nine-field
   questionnaire simply runs off the bottom of the panel: no scrollbar, no error,
   and the rows below the fold cannot be reached at all. Footgun 22's family, and
   it is what the browser walk caught first. */
.qn-tr-rows { flex: 1; min-height: 0; overflow-y: auto; display: flex; flex-direction: column; gap: 12px; }

.qn-tr-row {
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 10px 12px;
  background: var(--surface);
}

.qn-tr-row.is-missing { border-color: var(--warn-border); background: var(--warn-bg); }

/* A row whose translation was made from text that has since changed. A DIFFERENT
   colour from `is-missing`, not a louder one: the two are different jobs sitting
   next to each other in the same list, and a therapist scanning the drawer has to
   be able to tell at a glance which is which. The two are mutually exclusive by
   construction — a stale pair has text on both sides. */
.qn-tr-row.is-stale { border-color: var(--stale-border); background: var(--stale-bg); }

.qn-tr-stale {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  margin-bottom: 8px;
}

.qn-tr-stale-note { flex: 1 1 180px; min-width: 0; font-size: 13px; color: var(--stale-text); }

.qn-tr-redraft { flex: 0 0 auto; border-color: var(--stale-border); color: var(--stale-text); }

.qn-tr-label {
  display: block;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-soft);
  margin-bottom: 4px;
}

.qn-tr-en { margin: 0 0 8px; font-size: 14px; color: var(--text-soft); overflow-wrap: anywhere; }
.qn-tr-ru { font-size: 14.5px; }

.qn-tr-proposal {
  margin-top: 10px;
  padding-top: 9px;
  border-top: 1px dashed var(--border);
  display: flex;
  gap: 8px;
  align-items: flex-start;
  flex-wrap: wrap;
}

.qn-tr-suggested { flex: 1 1 200px; min-width: 0; margin: 0; font-size: 14px; overflow-wrap: anywhere; }

/* --- The conversational builder (board task 57) ------------------------------

   A chat panel in the third drawer. The bubbles, the typing dots and the box
   itself are `chat.css`'s, shared with both chat surfaces rather than a third
   set of them - what is below is only the panel around them. */

.drawer-assist .drawer { width: min(560px, 96vw); }

.qn-assist { flex: 1; min-height: 0; display: flex; flex-direction: column; gap: 10px; }

.qn-assist-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
  flex-wrap: wrap;
}

.qn-assist-hint { margin: 0; flex: 1 1 220px; min-width: 0; }

/* The drawer body does NOT scroll on its own (views.css), exactly as the Russian
   rows above found out: without this a conversation four exchanges long simply
   runs off the bottom of the panel - no scrollbar, no error, and the composer
   pushed out of reach. */
.qn-assist-thread {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 2px;
}

.qn-assist-empty { display: flex; flex-direction: column; gap: 6px; }

/* The wait. The dots say "working"; the clock under them says it is still
   working at ninety seconds, which is the point three dots stop being believed.

   Two columns rather than a stack: the way OUT of the wait belongs on the
   clock's line, because the clock and the press that ends it are one thought.
   Under it, the button read as the next thing to do. `align-items: start` puts
   it against the note's first line, which is the clock itself in the ordinary
   case — a long wait adds a line above it, and the button still reads as
   belonging to that block rather than as an action of its own beneath it.
   A child dropped straight in still stretches to its column, which is what the
   wrapper in `assistant.js` is for. */
.qn-assist-waiting {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: start;
  gap: 4px 10px;
}

.qn-assist-typing { grid-column: 1 / -1; }

.qn-assist-wait-note {
  margin: 0 0 0 4px;
  font-size: 12.5px;
  color: var(--text-soft);
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.qn-assist-clock { font-family: var(--font-mono); }

/* An ESCAPE HATCH, never the way forward. The press abandons an answer the
   practice has already paid for — `qn.assist.stopCost` says so in the line
   beside it — so it is quieter than the note it sits next to: no fill, no
   border until it is reached for, and small enough that the eye passes over it
   unless it is being looked for. */
.qn-assist-stop-row { grid-column: 2; }

.qn-assist-stop {
  padding: 2px 8px;
  font-size: 12px;
  white-space: nowrap;
  color: var(--text-soft);
}

.qn-assist-stop:hover:not(:disabled) { color: var(--text); }

/* The document that rode with a message, inside her own bubble - so it inherits
   the bubble's colour rather than `.muted`'s, which is unreadable on the accent. */
.qn-assist-sent { font-size: 12px; opacity: 0.85; margin-top: 4px; overflow-wrap: anywhere; }

/* Hidden by the `hidden` ATTRIBUTE, never by opacity: a fully transparent line
   still answers `is_visible()` with true, and the browser walk asserting the
   counter stays out of the way until it matters would pass over nothing. */
.qn-assist-turns {
  margin: 0;
  font-size: 12.5px;
  color: var(--warn-text);
  background: var(--warn-bg);
  border: 1px solid var(--warn-border);
  border-radius: var(--radius-sm);
  padding: 7px 10px;
}

.qn-assist-composer { flex: none; display: flex; flex-direction: column; gap: 8px; }

/* Colour AND background, both spelled out on both boxes. `.chat-input` forces a
   white background, and the composer that shipped on 2026-08-02 inherited a
   light colour onto it: a chat box nobody could read what they had typed in.
   `flex: none` because this composer is a COLUMN - `.chat-input`'s `flex: 1` is
   written for the row the client's app puts it in. */
.qn-assist-input { flex: none; color: var(--text); background: #fff; }

.qn-assist-actions { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }

.qn-assist-file {
  flex: 1 1 200px;
  min-width: 0;
  font-size: 12.5px;
  color: var(--text);
  background: #fff;
  padding: 7px 9px;
}

.qn-assist-send { flex: none; }

/* The proposal, under the message that carried it. Accent-bordered while it is
   the one that can be applied; plain once it has been, or once a newer answer
   has replaced it. */
.qn-assist-proposal {
  border: 1px solid var(--accent);
  border-radius: var(--radius-sm);
  background: var(--surface-2);
  padding: 10px 12px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 8px;
}

.qn-assist-proposal.is-settled { border-color: var(--border); background: var(--surface); }
.qn-assist-proposal p { margin: 0; }
.qn-assist-summary { font-size: 14px; font-weight: 600; overflow-wrap: anywhere; }

/* --- Import, and the calls it made ------------------------------------------ */

.qn-import-form { display: flex; flex-direction: column; gap: 10px; }
.qn-import-text { resize: vertical; font-size: 14px; }
.qn-import-file { padding: 9px 10px; }
.qn-import-error { margin: 0; }

.qn-decisions { border-color: var(--accent); }
.qn-decision-list { display: flex; flex-direction: column; gap: 6px; margin-top: 12px; }

.qn-decision {
  display: flex;
  gap: 10px;
  align-items: center;
  flex-wrap: wrap;
  padding: 9px 11px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--surface-2);
}

.qn-decision-q { font-size: 11.5px; font-weight: 700; color: var(--text-soft); white-space: nowrap; }
.qn-decision-says { flex: 1 1 200px; min-width: 0; font-size: 14px; }
.qn-decision-ok { flex: none; }

/* --- Version history (in the shared drawer) --------------------------------- */

.qn-history-item { cursor: default; }
.qn-history-item:hover { border-color: var(--border); }

/* --- Responses ------------------------------------------------------------- */

.qn-leads { gap: 8px; }

.qn-lead { padding: 0; overflow: hidden; }

.qn-lead-head {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  padding: 11px 14px;
  cursor: pointer;
  list-style: none;
}

.qn-lead-head::-webkit-details-marker { display: none; }
.qn-lead-head:hover { background: var(--surface-2); }
.qn-lead-email { font-weight: 600; font-size: 14px; overflow-wrap: anywhere; }
.qn-lead-when { color: var(--text-soft); font-size: 12.5px; }
.qn-lead-code { margin-left: auto; font-family: var(--font-mono); text-transform: none; }

.qn-lead-answers {
  border-top: 1px solid var(--border);
  padding: 12px 14px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.qn-lead-answer { display: flex; flex-direction: column; gap: 2px; }
.qn-lead-q { font-size: 12.5px; font-weight: 600; color: var(--text-soft); }
/* `pre-line`: a long answer keeps the line breaks the respondent typed. */
.qn-lead-a { font-size: 14px; white-space: pre-line; overflow-wrap: anywhere; }

/* --- Builder, narrowed ------------------------------------------------------ */

@media (max-width: 700px) {
  .qn-setup, .qn-question-list, .qn-leads-panel, .qn-decisions { padding: 14px 14px; }
  .qn-q { padding: 12px 12px; }
  .qn-title { font-size: 23px; }
  .qn-menu { right: 8px; left: 8px; max-width: none; }
  .qn-lead-code { margin-left: 0; }
  /* The tools row is what grows by one when a question type changes, and this
     is the width it gets sliced at. Wrapping is what stops it. */
  .qn-q-tools { justify-content: flex-start; }
}

/* --- The capture page — MOBILE FIRST ---------------------------------------- */

/* No max-width query narrows anything below. What follows IS the phone: one
   column, full-width controls, generous tap targets, and 16px type in every
   field a respondent types into - anything smaller makes iOS Safari zoom the
   page on focus, which reads as the form jumping away from them. */

.capture-wrap { display: flex; justify-content: center; }

.capture-card {
  width: 100%;
  max-width: 34rem;
  padding: 22px 18px 26px;
}

.capture-title {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 25px;
  line-height: 1.25;
  margin: 0 0 10px;
  overflow-wrap: anywhere;
}

.capture-intro { color: var(--text-soft); font-size: 15px; margin-bottom: 20px; }
.capture-intro p { margin: 0.5em 0; }
.capture-intro ul, .capture-intro ol { margin: 0.5em 0; padding-left: 20px; }

.capture-form { display: flex; flex-direction: column; gap: 20px; }
.capture-questions { display: flex; flex-direction: column; gap: 20px; }

/* A fieldset so a screen reader reads the prompt with its answers, and reset
   because a browser's default fieldset border and padding would box every
   question on a screen this narrow. */
.capture-q { border: 0; margin: 0; padding: 0; min-width: 0; }
.capture-q-legend { padding: 0; margin-bottom: 8px; width: 100%; }
.capture-q-head { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.capture-q-prompt { font-size: 15.5px; font-weight: 600; overflow-wrap: anywhere; }

/* An optional heading above a question, drawn only when the therapist wrote one -
   most questions have none and the page must not reserve a line for it. */
.capture-q-title {
  flex-basis: 100%;
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-soft);
}

.capture-q-note {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--text-soft);
}

.capture-q-required { color: var(--accent-strong); }

.capture-input { font-size: 16px; padding: 12px 14px; }
textarea.capture-input { resize: vertical; }

.capture-choices { display: flex; flex-direction: column; gap: 8px; }

/* The whole row is the target, not the 13px dot inside it: a thumb on a moving
   train is the input device this page is actually operated with. */
.capture-choice {
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 12px 14px;
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-sm);
  background: #fff;
  font-size: 16px;
  cursor: pointer;
  min-height: 48px;
}

.capture-choice:hover { border-color: var(--accent); }
.capture-choice:focus-within { outline: var(--focus-ring); outline-offset: 1px; }
.capture-choice-box { width: 20px; height: 20px; flex: none; accent-color: var(--accent); }
.capture-choice-label { overflow-wrap: anywhere; }

.capture-email-field { margin-bottom: 0; display: flex; flex-direction: column; gap: 5px; }
.capture-email { font-size: 16px; padding: 12px 14px; }
.capture-submit { min-height: 50px; font-size: 16px; }

.capture-error { margin-bottom: 0; font-size: 14px; }

.capture-code {
  border: 1px solid var(--accent);
  background: var(--accent-soft);
  border-radius: var(--radius-sm);
  padding: 14px 16px;
  margin: 18px 0 12px;
  text-align: center;
}

.capture-code-value {
  display: block;
  font-family: var(--font-mono);
  font-size: 23px;
  font-weight: 700;
  letter-spacing: 0.08em;
  color: var(--accent-strong);
  margin: 4px 0 6px;
  overflow-wrap: anywhere;
}

.capture-thanks-title { margin-bottom: 8px; }
.capture-thanks-body { font-size: 16px; margin: 0 0 6px; white-space: pre-line; }
.capture-thanks-foot { margin: 14px 0 0; }
.capture-missing { text-align: center; }

/* The only widening: past a phone the card gets its breathing room back. The
   column does NOT grow with the window - a lead-capture form is read in one
   line-length whatever it is opened on. */
@media (min-width: 560px) {
  .capture-wrap { padding-top: 4vh; }
  .capture-card { padding: 32px 34px 34px; }
  .capture-title { font-size: 29px; }
}

/* --- Preview: the respondent's page, opened by the person writing it -------- */

/* The banner rides INSIDE the card, above the title, so it cannot be scrolled
   past or read as app chrome. This page needs a session, but a screenshot of it
   does not, and "is this the live form or a preview" must be answerable from
   the picture. */
.qn-preview-banner {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin-bottom: 16px;
  padding: 10px 12px;
  border: 1px dashed var(--border-strong);
  border-radius: var(--radius-sm);
  background: var(--surface-2);
}

.qn-preview-mark { flex: none; }
.qn-preview-says { font-size: 13px; color: var(--text-soft); line-height: 1.45; }
.qn-preview-back { display: inline-block; margin-bottom: 12px; }

/* Publishing lands on the Setup tab and the link is the reason it went there,
   so the card says so once and then stops. A permanent highlight would be a
   colour the page wears for the rest of its life. */
.qn-link-card.is-fresh {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-soft);
  transition: border-color 400ms ease, box-shadow 400ms ease;
}

/* --- Numbering, paging, counters (board task: the owner's list, 2026-08-24) --
   Everything below belongs to the respondent's page first. The builder inherits
   most of it by drawing the same classes, which is what keeps "the builder is
   the form" true rather than approximate. */

/* The number a respondent reads. Its own line above the prompt (flex-basis
   pushes it onto one), quiet and small: it is a landmark, not the question. */
.capture-q-number {
  flex-basis: 100%;
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--accent-strong);
}

/* A heading AND a number both want the first line, so the heading takes the
   second one when they meet. */
.capture-q-number + .capture-q-title { margin-top: -2px; }

/* "Choose 3", above the answers it is about. */
.capture-choose {
  margin: 0 0 2px;
  font-size: 13px;
  font-weight: 600;
  color: var(--accent-strong);
}

/* --- The word counter ------------------------------------------------------
   Bottom right, inside the box's own footprint, so it reads as part of the
   field rather than as a line of page under it. `pointer-events: none` because
   it sits over a corner of a textarea somebody may be dragging to resize. */
.capture-counted { position: relative; display: flex; flex-direction: column; }

.capture-words {
  position: absolute;
  right: 10px;
  bottom: 6px;
  font-size: 11.5px;
  font-variant-numeric: tabular-nums;
  color: var(--text-soft);
  background: #fff;
  padding: 0 3px;
  border-radius: 3px;
  pointer-events: none;
}

.capture-words.is-over { color: var(--danger-strong); font-weight: 700; }

/* Room for the counter, so the last line of a long answer never runs under it.
   On the one-line field the counter sits beside the text instead of below it,
   which is why the padding is on the right there and at the bottom here. */
.capture-counted textarea.capture-input { padding-bottom: 26px; }
.capture-counted input.capture-input { padding-right: 68px; }

/* --- Paging ---------------------------------------------------------------- */

/* A step that is not the current one is GONE, not merely invisible: the pages
   are all in the DOM at once so that going back finds the answers still there,
   and `display: none` is what keeps the flex column from reserving a gap for
   each of them. */
.capture-q[hidden], .capture-email-field[hidden] { display: none; }

/* The pager gives the new page's heading focus so a screen reader lands on the
   question rather than on a Next button that has just moved. Both targets carry
   `tabindex="-1"`, so nothing can ever TAB to them - the only focus they get is
   ours - and a browser's default ring around a whole question reads as an error
   box. The real controls keep theirs. */
.capture-q-head:focus, .capture-email-field:focus { outline: none; }

.capture-nav { display: flex; align-items: center; gap: 10px; }
.capture-nav .capture-next, .capture-nav .capture-submit { flex: 1; min-height: 50px; }
.capture-back { flex: none; min-height: 50px; }
.capture-nav > [hidden] { display: none; }

/* --- The step bar ---------------------------------------------------------- */

.capture-progress {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-bottom: 4px;
}

.capture-progress-says {
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--text-soft);
}

/* The circles, joined by the line they sit on. No gap: the joining line is
   drawn across each item from the previous circle's centre, and a gap would
   break it into dashes. */
.capture-dots {
  display: flex;
  align-items: center;
  margin: 0;
  padding: 0;
  list-style: none;
}

/* The item stretches so the row always spans the card; the circle inside it does
   not. The line joining one step to the next is drawn across the item, from the
   previous circle's centre to this one's, which is why the two are separate
   elements. */
.capture-dot {
  flex: 1;
  min-width: 0;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
}

.capture-dot::before {
  content: "";
  position: absolute;
  top: 50%;
  left: -50%;
  right: 50%;
  height: 2px;
  background: var(--border-strong);
}

.capture-dot:first-child::before { display: none; }
.capture-dot.is-done::before, .capture-dot.is-now::before { background: var(--accent); }

.capture-dot-mark {
  position: relative;
  width: 24px;
  height: 24px;
  flex: none;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  color: var(--text-soft);
  background: var(--surface-2);
  border: 1px solid var(--border-strong);
  border-radius: 50%;
  /* A ring of card behind each circle, so at twelve steps on a 390px phone the
     beads read as separate rather than as one chain link. */
  box-shadow: 0 0 0 2px var(--surface);
  transition: background 200ms ease, color 200ms ease, border-color 200ms ease;
}

/* Done and now are told apart on purpose: in the middle of a long form, "where
   am I" and "what have I finished" are two different questions. */
.capture-dot.is-done .capture-dot-mark {
  background: var(--accent-soft);
  border-color: var(--accent);
  color: var(--accent-strong);
}

.capture-dot.is-now .capture-dot-mark {
  background: var(--accent);
  border-color: var(--accent-strong);
  color: #fff;
}

/* Past a dozen steps the circles stop being countable and the bar becomes a
   line — same information, at the size that still fits. */
.capture-track {
  height: 6px;
  border-radius: 3px;
  background: var(--surface-2);
  overflow: hidden;
}

.capture-fill {
  height: 100%;
  width: 0;
  background: var(--accent);
  border-radius: 3px;
  transition: width 250ms ease;
}

/* --- The builder: a question's two numbers --------------------------------- */

.qn-q-stamp {
  display: flex;
  align-items: baseline;
  gap: 8px;
  margin-bottom: 2px;
}

.qn-q-position {
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--accent-strong);
}

/* The permanent id, in the mono face every other identity in Atlas wears (a
   commit sha, a discount code), because that is what it is. */
.qn-q-id {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--text-soft);
  background: var(--surface-2);
  border-radius: 3px;
  padding: 1px 5px;
  cursor: help;
}

.qn-q-id.is-unsaved { font-family: var(--font-body); font-style: italic; }

/* --- The builder: the limits inside a question's menu ---------------------- */

.qn-menu-limits {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 8px 4px 2px;
  border-top: 1px solid var(--border);
  margin-top: 6px;
}

.qn-count-field { display: flex; align-items: center; gap: 8px; }
.qn-count-label { flex: 1; font-size: 13px; color: var(--text-soft); }
.qn-count { width: 86px; flex: none; font-size: 14px; padding: 5px 8px; }
.qn-menu-note { margin: 2px 0 0; font-size: 11.5px; color: var(--text-soft); line-height: 1.4; }

/* --- The builder: how the form is shown ------------------------------------ */

.qn-presentation { display: flex; flex-direction: column; gap: 4px; }

.qn-switch-row {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 10px 0;
  border-top: 1px solid var(--border);
}

.qn-switch-row:first-of-type { border-top: 0; }
.qn-switch-says { display: flex; flex-direction: column; gap: 2px; flex: 1; min-width: 0; }

/* A setting that cannot apply yet is dimmed where it stands rather than removed:
   the step bar follows pagination, and a control that disappears is a control
   somebody goes looking for. */
.qn-switch { flex: none; min-width: 62px; justify-content: center; }
.qn-switch-row.is-unavailable .qn-switch-says { opacity: 0.55; }

/* --- Who saved this, and what respondents are reading (owner, 2026-08-27) ---
   Two lines under the title, because a questionnaire belongs to the PRACTICE and
   the last save is routinely somebody else's. Quiet by default: this is a
   caption on the page, not a warning about it - the one thing that IS a warning
   (the last save was not yours) wears a badge and nothing else does. */

.qn-byline { display: flex; flex-direction: column; gap: 2px; margin-top: 6px; }
.qn-byline-row { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.qn-byline-saved { color: var(--text-soft); font-size: 13px; }

/* The published version, named. Drawn only while it DIFFERS from the version on
   screen, so the line's presence is itself the message. */
.qn-byline-live {
  color: var(--warn-text);
  font-size: 13px;
}

/* --- The history drawer: a version, and what it changed -------------------- */

.qn-version-n { flex: none; font-variant-numeric: tabular-nums; }

/* The sha keeps its place beside the author rather than leading the row: it is
   the durable name and the unreadable one, so the number leads and this is the
   thing you copy into a log search. */
.qn-history-item .history-meta {
  display: flex;
  align-items: baseline;
  gap: 8px;
  flex-wrap: wrap;
}

.qn-version-actions { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 8px; }
.qn-change-panel { margin-top: 10px; border-top: 1px solid var(--border); padding-top: 10px; }

.qn-changes { display: flex; flex-direction: column; gap: 8px; }
.qn-changes-caption { margin: 0; }
.qn-change-list { display: flex; flex-direction: column; gap: 8px; }
.qn-changes-more { color: var(--warn-text); font-size: 12px; margin: 0; }

.qn-change {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 8px 10px;
  border-radius: var(--radius-sm);
  background: var(--surface-2);
}

.qn-change-head { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.qn-change-kind { flex: none; }
.qn-change-what { font-size: 13px; font-weight: 500; }

/* Added is the accent, removed is the danger surface - the same two tokens
   `prism-ui`'s DiffView is mapped onto in `fred.css`. One colour grammar across
   both comparison surfaces even though only one of them is a text diff. */
.qn-kind-added { background: var(--accent-soft); color: var(--accent-strong); }
.qn-kind-removed { background: var(--danger-soft); color: var(--danger-strong); }
.qn-kind-changed { background: var(--warn-bg); color: var(--warn-text); }
.qn-kind-moved { background: var(--surface); color: var(--text-soft); }

/* A bar down the side rather than a full wash: these are two lines of a
   therapist's own writing, and a solid red block behind her sentence reads as an
   error rather than as "this is what it used to say". */
.qn-change-side {
  display: flex;
  gap: 8px;
  align-items: baseline;
  padding: 3px 0 3px 8px;
  border-left: 3px solid var(--border-strong);
  font-size: 13px;
}

.qn-change-before { border-left-color: var(--danger); }
.qn-change-after { border-left-color: var(--accent); }

.qn-change-label { flex: none; color: var(--text-soft); font-size: 12px; min-width: 44px; }

/* Wraps and keeps its line breaks: a thank-you paragraph is one field, and
   collapsing it onto one line would make two versions of it look identical. */
.qn-change-text { white-space: pre-wrap; overflow-wrap: anywhere; min-width: 0; }