/* Shared question controls, rendered by runner.js, plus the base tokens the other stations consume.
   The existing tokens keep their values; the question layer below uses the overridable --house-* tokens
   and is scoped to .q-root, so pages and stages that load this file are not redesigned by it. */
:root {
  --bg: #f6f7f9;
  --card: #ffffff;
  --text: #1b1f24;
  --muted: #5b6573;
  --line: #d3d8df;
  --accent: #1f5fbf;
  --error: #b3261e;

  --house-deep: #163a34;
  --house-teal: #0f5e52;
  --house-amber: #e8a33d;
  --house-focus: #b36b00; /* amber, deep enough for a 3:1 focus ring on a light surface */
  --house-ink: #15211f;
  --house-ink-soft: #44554f;
  --house-rule: #cfd8d4;
  --house-surface: #ffffff;
  --house-option: #f4f7f5;
  --house-option-selected: #e4efea;
  --house-error: #9a2b1e;
  --house-on-deep: #ffffff;
  --house-serif: "Merriweather", Georgia, "Times New Roman", serif;
  --house-sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
}
@media (prefers-color-scheme: dark) {
  :root {
    --bg: #14171b;
    --card: #1d2127;
    --text: #e8ebef;
    --muted: #9aa4b1;
    --line: #39404a;
    --accent: #6ea2f0;
    --error: #f2877f;

    --house-deep: #8fd1c3;
    --house-teal: #6cc4b2;
    --house-focus: var(--house-amber);
    --house-ink: #e8efec;
    --house-ink-soft: #a9bab4;
    --house-rule: #3b4a46;
    --house-surface: #1b2422;
    --house-option: #212c29;
    --house-option-selected: #1f3a34;
    --house-error: #f2877f;
    --house-on-deep: #0f1715;
  }
}
* { box-sizing: border-box; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font: 16px/1.5 system-ui, -apple-system, "Segoe UI", sans-serif;
}
/* In a tenant frame the page behind the funnel is the tenant's: no ground of our own (owner, 2026-09-27). */
.in-frame body { background: transparent; }
/* Width-neutral frame: each stage sets its own measure. */
main { padding: 24px 16px 48px; }
.meta { color: var(--muted); font-size: 0.875rem; margin: 0 0 12px; }
#result { max-width: 40rem; margin: 0 auto; }
#result {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 24px 20px;
}
.field { border: 0; margin: 0 0 24px; padding: 0; min-width: 0; }
.field[hidden] { display: none; }
label[for], legend { display: block; font-weight: 600; margin-bottom: 8px; padding: 0; }
.optional { color: var(--muted); font-weight: 400; }
input[type="text"] {
  width: 100%;
  font: inherit;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--bg);
  color: var(--text);
}
.option {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  margin-bottom: 8px;
  cursor: pointer;
}
.option input { margin: 4px 0 0; width: 18px; height: 18px; flex: none; accent-color: var(--accent); }
.option:has(input:checked) { border-color: var(--accent); }
.invalid input[type="text"], .invalid .option { border-color: var(--error); }
.error { color: var(--error); margin: 6px 0 0; font-size: 0.9375rem; }
.error:empty { display: none; }
.actions { display: flex; flex-wrap: wrap; gap: 12px; justify-content: flex-end; }
button {
  font: inherit;
  font-weight: 600;
  padding: 12px 20px;
  border-radius: 8px;
  border: 1px solid var(--accent);
  cursor: pointer;
}
.primary { background: var(--accent); color: var(--card); }
.secondary { background: transparent; color: var(--accent); }
h2 { margin: 0 0 16px; font-size: 1.25rem; }
pre {
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 16px;
  overflow-x: auto;
  font-size: 0.875rem;
  margin: 0 0 20px;
}
@media (max-width: 480px) {
  .actions button { flex: 1 1 auto; }
}

/* ---------- House question controls (runner.js) ---------- */
/* The root is a size container: layout follows the width the runner is given, not the viewport. */
.q-root { container-type: inline-size; }
.q-root .q-screen {
  max-width: 64rem;
  margin: 0 auto;
  background: var(--house-surface);
  color: var(--house-ink);
  font-family: var(--house-sans);
  font-size: 1rem;
  line-height: 1.55;
  border: 1px solid var(--house-rule);
  border-radius: 10px;
  padding: 22px 18px;
}
.q-root .q-fields { display: grid; gap: 26px; }
.q-root .q-field { margin: 0; min-width: 0; }
.q-root .q-label {
  display: block;
  font-family: var(--house-serif);
  font-weight: 700;
  font-size: 1.1875rem;
  line-height: 1.35;
  color: var(--house-ink);
  margin: 0 0 6px;
  padding: 0;
}
.q-root .q-optional { font-family: var(--house-sans); font-weight: 400; font-size: 0.9375rem; color: var(--house-ink-soft); }
.q-root .q-help { color: var(--house-ink-soft); margin: 0 0 14px; overflow-wrap: anywhere; }
.q-root .q-options { display: grid; gap: 10px; margin-top: 12px; }
.q-root .q-help + .q-options { margin-top: 0; }
.q-root .q-options.q-row { grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); }

/* Full-click option card around a native, focusable radio or checkbox. */
.q-root .q-option {
  position: relative;
  display: flex;
  align-items: flex-start;
  gap: 12px;
  margin: 0;
  padding: 14px 16px;
  background: var(--house-option);
  border: 2px solid var(--house-rule);
  border-radius: 8px;
  cursor: pointer;
  color: var(--house-ink);
}
.q-root .q-native {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  opacity: 0;
  cursor: inherit;
}
.q-root .q-tick {
  flex: none;
  width: 20px;
  height: 20px;
  margin-top: 2px;
  display: grid;
  place-items: center;
  border: 2px solid var(--house-rule);
  background: var(--house-surface);
}
.q-root .q-single .q-tick { border-radius: 50%; }
.q-root .q-multi .q-tick { border-radius: 4px; }
.q-root .q-option-text { display: grid; gap: 2px; min-width: 0; overflow-wrap: anywhere; }
.q-root .q-option-label { font-weight: 700; }
.q-root .q-option-desc { color: var(--house-ink-soft); font-size: 0.9375rem; }
.q-root .q-option:hover { border-color: var(--house-teal); }
.q-root .q-option:has(.q-native:checked) { border-color: var(--house-teal); background: var(--house-option-selected); }
.q-root .q-option:has(.q-native:checked) .q-tick { border-color: var(--house-teal); background: var(--house-teal); }
.q-root .q-single:has(.q-native:checked) .q-tick::after {
  content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--house-surface);
}
.q-root .q-multi:has(.q-native:checked) .q-tick::after {
  content: ""; width: 5px; height: 10px; margin-top: -2px;
  border: solid var(--house-surface); border-width: 0 2px 2px 0; transform: rotate(45deg);
}
.q-root .q-option:has(.q-native:focus-visible) { outline: 3px solid var(--house-focus); outline-offset: 2px; }
.q-root .q-option:has(.q-native:disabled) { opacity: 0.55; cursor: not-allowed; }
.q-root .q-option:has(.q-native:disabled):hover { border-color: var(--house-rule); }

/* Text entry, with a visible currency prefix for money. */
.q-root .q-input {
  display: flex;
  align-items: stretch;
  margin-top: 10px;
  background: var(--house-surface);
  border: 2px solid var(--house-rule);
  border-radius: 8px;
  overflow: hidden;
}
.q-root .q-help + .q-input { margin-top: 0; }
.q-root .q-input:hover { border-color: var(--house-teal); }
.q-root .q-input:focus-within { border-color: var(--house-teal); outline: 3px solid var(--house-focus); outline-offset: 2px; }
.q-root .q-prefix {
  display: grid;
  place-items: center;
  padding: 0 14px;
  background: var(--house-option);
  border-right: 2px solid var(--house-rule);
  font-weight: 700;
  color: var(--house-ink-soft);
}
.q-root .q-input input, .q-root .q-input select {
  flex: 1;
  min-width: 0;
  width: 100%;
  border: 0;
  border-radius: 0;
  outline: none;
  padding: 13px 14px;
  background: transparent;
  color: var(--house-ink);
  font: inherit;
}
.q-root .q-input:has(input:disabled) { opacity: 0.55; background: var(--house-option); }
.q-root .q-input input:disabled { cursor: not-allowed; }

/* "Not sure" toggle (BLUEPRINT B.2 "Not sure"): the same field tokens as every other control, no new
   colours; pressed reuses the choice-card selected look so it reads as a distinct, chosen state. */
.q-root .q-not-sure {
  display: inline-flex;
  align-items: center;
  margin-top: 10px;
  padding: 8px 14px;
  font-family: var(--house-sans);
  font-size: 0.9375rem;
  font-weight: 600;
  color: var(--house-ink-soft);
  background: var(--field-bg);
  border: 1.5px solid var(--field-border);
  border-radius: 8px;
  cursor: pointer;
}
.q-root .q-not-sure:hover { border-color: var(--field-border-hover); }
.q-root .q-not-sure:focus-visible { outline: 3px solid var(--house-focus); outline-offset: 2px; }
.q-root .q-not-sure[aria-pressed="true"] { background: var(--field-selected); border-color: var(--field-border-focus); color: var(--house-ink); }

/* Errors: the field and its message, never color alone. */
.q-root .invalid .q-option,
.q-root .invalid .q-input { border-color: var(--house-error); }
.q-root .q-error { color: var(--house-error); font-weight: 600; font-size: 0.9375rem; margin: 8px 0 0; }
.q-root .q-error:not(:empty)::before { content: "! "; }
/* Warnings: a figure that changed implausibly, never a block, so never 'invalid' or aria-invalid, and its own
   amber edge and pale background so it is never mistaken for an error (owner ruling 1A, 85-KNOWN-BUGS 019). */
.q-root .warned .q-option,
.q-root .warned .q-input { border-color: var(--field-warn); background: var(--field-warn-bg); }

/* One primary action; Back and a declared Skip are secondary. */
.q-root .q-actions {
  display: flex;
  flex-direction: column-reverse;
  align-items: stretch;
  gap: 12px;
  margin-top: 28px;
}
.q-root .q-actions button {
  font-family: var(--house-sans);
  font-size: 1rem;
  font-weight: 700;
  border-radius: 8px;
  padding: 14px 26px;
  cursor: pointer;
}
.q-root .q-next { background: var(--house-deep); color: var(--house-on-deep); border: 2px solid var(--house-deep); }
.q-root .q-back,
.q-root .q-skip { background: transparent; color: var(--house-ink-soft); border: 2px solid transparent; text-decoration: underline; }
.q-root .q-actions button:focus-visible { outline: 3px solid var(--house-focus); outline-offset: 2px; }
.q-root .q-actions button:disabled { opacity: 0.55; cursor: not-allowed; }

/* Wider containers: more air, a row of actions, paired entry fields and option columns where readable. */
@container (min-width: 36rem) {
  .q-root .q-screen { padding: 28px; }
  .q-root .q-label { font-size: 1.3125rem; }
  .q-root .q-actions { flex-direction: row; align-items: center; }
  .q-root .q-next { margin-left: auto; }
}
@container (min-width: 52rem) {
  /* Fields are spaced by margin, not row-gap: a gap would also fall between a pair's shared tracks. */
  .q-root .q-fields { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 28px; row-gap: 0; }
  .q-root .q-fields > .q-field { grid-column: 1 / -1; margin-bottom: 26px; }
  .q-root .q-fields + .q-actions { margin-top: 2px; }
  /* Paired entry fields share four row tracks (label, help, control, error), so their controls line up
     whatever the label length or help, without fixed heights. */
  .q-root .q-fields > .q-entry:has(+ .q-entry:not([hidden])),
  .q-root .q-fields > .q-entry:not([hidden]) + .q-entry {
    grid-column: auto;
    grid-row: span 4;
    display: grid;
    grid-template-rows: subgrid;
    row-gap: 0;
  }
  .q-root .q-fields > .q-entry > .q-label { grid-row: 1; align-self: end; margin-bottom: 10px; }
  .q-root .q-fields > .q-entry > .q-help { grid-row: 2; margin-top: -4px; }
  .q-root .q-fields > .q-entry > .q-input { grid-row: 3; align-self: start; margin-top: 0; }
  .q-root .q-fields > .q-entry > .q-error { grid-row: 4; }
  .q-root .q-options { grid-template-columns: repeat(auto-fit, minmax(20rem, 1fr)); }
}

/* ---- Every input field, on every surface (owner, 2026-09-27; BLUEPRINT.md B.2 "Field states") ----
   One place for every state, so a field is unmistakable wherever it appears: a white field with a firm border
   against a tinted surface; a hover cue; a glow when active; light placeholders and bold typed text; a
   completed edge; an error state; a disabled state. Surfaces never restyle these. */
:root {
  --field-bg: #ffffff;
  --field-border: #7f948c;
  --field-border-hover: #1d6b5c;
  --field-border-focus: #1d6b5c;
  --field-glow: 0 0 0 4px rgba(29, 107, 92, .22);
  --field-inset: inset 0 1px 2px rgba(15, 40, 34, .10);
  --field-text: #13241f;
  --field-placeholder: #8a9892;
  --field-done: #2f7d62;
  --field-error: #9a2b1e;
  --field-error-bg: #fdf3f2;
  --field-warn: #8a6100;
  --field-warn-bg: #fbf3df;
  --field-disabled-bg: #eef1f0;
  --field-surface: #f3f7f5;
  --field-selected: #e1efe9;
}
@media (prefers-color-scheme: dark) {
  :root {
    --field-bg: #202a28;
    --field-border: #8ba59c;
    --field-border-hover: #8fd1c3;
    --field-border-focus: #8fd1c3;
    --field-glow: 0 0 0 4px rgba(143, 209, 195, .25);
    --field-inset: inset 0 1px 2px rgba(0, 0, 0, .35);
    --field-text: #eef4f2;
    --field-placeholder: #9cafa8;
    --field-done: #7fd1a8;
    --field-error: #f2877f;
    --field-error-bg: #3a2220;
    --field-warn: #e0b84d;
    --field-warn-bg: #3a3018;
    --field-disabled-bg: #2a3230;
    --field-surface: #182120;
    --field-selected: #24403a;
  }
}
/* The field: a wrapper holding an input (.q-input, .a-fi) or the input itself. */
.q-root .q-input, .a-fi, .cm-f input, .cm-f textarea, .cm-time select, .c-field input, .c-slot {
  background: var(--field-bg);
  border: 1.5px solid var(--field-border);
  box-shadow: var(--field-inset);
  transition: border-color .12s ease, box-shadow .12s ease, background-color .12s ease;
}
.q-root .q-input:hover, .a-fi:hover, .cm-f input:hover, .cm-f textarea:hover, .cm-time select:hover, .c-field input:hover, .c-slot:hover { border-color: var(--field-border-hover); }
.q-root .q-input:focus-within, .a-fi:focus-within, .cm-f input:focus, .cm-f textarea:focus, .cm-time select:focus, .c-field input:focus, .c-slot:focus {
  /* A solid outline stays for forced-colour modes, which drop the glow. */
  border-color: var(--field-border-focus); box-shadow: var(--field-glow), var(--field-inset); outline: 2px solid var(--field-border-focus); outline-offset: 2px;
}
/* Typed text is bold and dark; the placeholder is light. */
.q-root .q-input input, .q-root .q-input select, .a-fi input, .cm-f input, .cm-f textarea, .cm-time select, .c-field input, .c-slot { color: var(--field-text); font-weight: 600; }
.q-root .q-input input::placeholder, .a-fi input::placeholder, .cm-f input::placeholder, .cm-f textarea::placeholder, .c-field input::placeholder, .c-slot::placeholder {
  color: var(--field-placeholder); font-weight: 400; opacity: 1;
}
/* Completed: a filled field carries a green edge. */
.q-root .q-input:has(input:not(:placeholder-shown):not([aria-invalid="true"])), .q-root .q-input:has(select option:checked:not([value=""])), .a-fi:has(input:not(:placeholder-shown)),
.cm-f input:not(:placeholder-shown):not([aria-invalid="true"]), .cm-f textarea:not(:placeholder-shown), .c-field input:not(:placeholder-shown), .c-slot:not(:placeholder-shown) {
  border-left: 4px solid var(--field-done);
}
.c-slot:not(:placeholder-shown) { border-left-width: 1.5px; border-color: var(--field-done); }
/* Error: red edge and a pale red field, with the message beside it. */
.q-root .q-input:has(:is(input, select)[aria-invalid="true"]), .a-fi:has(input[aria-invalid="true"]), .cm-f input[aria-invalid="true"], .c-field input[aria-invalid="true"], .c-slot[aria-invalid="true"] {
  border-color: var(--field-error); background: var(--field-error-bg);
}
.q-root .q-input:has(input[aria-invalid="true"]):focus-within, .cm-f input[aria-invalid="true"]:focus { box-shadow: 0 0 0 4px rgba(154, 43, 30, .18), var(--field-inset); }
/* Disabled: plainly unavailable. */
.q-root .q-input:has(input:disabled), .a-fi:has(input:disabled), .cm-f input:disabled, .c-field input:disabled, .c-slot:disabled {
  background: var(--field-disabled-bg); border-style: dashed; box-shadow: none; cursor: not-allowed;
}
/* Controls are white; the surface holding them is tinted, so no field blends into its background. */
.q-root .q-screen { background: var(--field-surface); }
/* Choice options: white like every field, with the same cues. */
.q-root .q-option { background: var(--field-bg); border-color: var(--field-border); box-shadow: var(--field-inset); }
.q-root .q-option:hover { border-color: var(--field-border-hover); }
.q-root .q-option:has(.q-native:checked) { background: var(--field-selected); border-color: var(--field-border-focus); }
.q-root .q-option:has(.q-native:focus-visible) { box-shadow: var(--field-glow); }
@media (prefers-reduced-motion: reduce) { .q-root .q-input, .a-fi, .cm-f input, .c-field input, .c-slot { transition: none; } }