/* Public questionnaire page. Colours are tokens so light and dark stay in sync. */
:root {
  color-scheme: light;
  --bg: #f8f6f1;
  --surface: #ffffff;
  --ink: #1d1b19;
  --ink2: #5a5650;
  --muted: #8b857c;
  --line: #e4dfd5;
  --accent: #b4421a;        /* buttons, selected bubbles (white text on it: 5.6:1) */
  --accent-text: #9c3813;   /* accent used as text on the page background */
  --accent-soft: #fbe9df;
  --focus: #f0a27c;
  --serif: "Source Serif 4", Georgia, serif;
  --sans: "Source Sans 3", "Segoe UI", system-ui, sans-serif;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --bg: #151413;
    --surface: #1f1e1c;
    --ink: #f0eee9;
    --ink2: #c2bdb4;
    --muted: #8f8a81;
    --line: #34322e;
    --accent: #b4421a;
    --accent-text: #f49a6e;
    --accent-soft: #3a241a;
    --focus: #f0a27c;
  }
}
:root[data-theme="dark"] {
  color-scheme: dark;
  --bg: #151413;
  --surface: #1f1e1c;
  --ink: #f0eee9;
  --ink2: #c2bdb4;
  --muted: #8f8a81;
  --line: #34322e;
  --accent: #b4421a;
  --accent-text: #f49a6e;
  --accent-soft: #3a241a;
  --focus: #f0a27c;
}

* { box-sizing: border-box; }
html, body { margin: 0; background: var(--bg); color: var(--ink); font: 17px/1.5 var(--sans); overflow-x: hidden; }
main { max-width: 760px; margin: 0 auto; padding: 24px max(16px, env(safe-area-inset-left)) 60px max(16px, env(safe-area-inset-right)); }
h1 { font: 700 clamp(26px, 5vw, 40px)/1.15 var(--serif); margin: 0 0 6px; text-wrap: balance; letter-spacing: -.01em; }
.eyebrow { font-size: 13px; letter-spacing: .12em; text-transform: uppercase; color: var(--accent-text); font-weight: 600; margin-bottom: 6px; }
.lead { color: var(--ink2); margin: 0 0 14px; }
.status { color: var(--ink2); font-size: 15px; margin: 0 0 18px; padding: 8px 12px; border-left: 3px solid var(--accent); background: var(--surface); border-radius: 0 8px 8px 0; }

.panel { background: var(--surface); border: 1px solid var(--line); border-radius: 14px; padding: 18px; margin: 10px 0 18px; }
.panel h2 { font: 600 20px/1.3 var(--serif); margin: 0 0 6px; }
.panel p { margin: 0; color: var(--ink2); }
.panel a { color: var(--accent-text); }
.panel.thanks { background: var(--accent-soft); border-color: transparent; }

.step { background: var(--surface); border: 1px solid var(--line); border-radius: 14px; padding: 18px 18px 16px; margin-bottom: 14px; }
.step h2 { font: 600 20px/1.3 var(--serif); margin: 0 0 4px; }
.step .hint { color: var(--muted); font-size: 14px; margin: 0 0 12px; }
.bubbles { display: flex; flex-wrap: wrap; gap: 8px; }
.bubble { border: 1.5px solid var(--line); background: var(--bg); color: var(--ink); border-radius: 999px; padding: 9px 16px; font: 600 16px var(--sans); cursor: pointer; transition: background .12s, border-color .12s; min-height: 44px; text-align: left; }
.bubble:hover { border-color: var(--muted); }
.bubble.on { background: var(--accent); border-color: var(--accent); color: #fff; }
.bubble:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }
.other { margin-top: 10px; }
input[type=text], textarea { width: 100%; font: 16px var(--sans); padding: 10px 12px; border: 1.5px solid var(--line); border-radius: 10px; background: var(--surface); color: var(--ink); }
textarea { min-height: 96px; resize: vertical; }
input:focus, textarea:focus { outline: none; border-color: var(--accent); }
.sub { margin-top: 14px; padding-top: 12px; border-top: 1px dashed var(--line); }
.sub h3 { font: 600 16px var(--sans); margin: 0 0 8px; color: var(--ink2); }
.sub .hint { margin-bottom: 8px; }
.sub.lone { border-top: 0; padding-top: 0; margin-top: 0; }
.sub.lone + .sub.lone { margin-top: 18px; }
.sub.lone h2 { margin-bottom: 4px; }

.submit-row { margin: 4px 0 0; display: flex; gap: 12px; align-items: center; flex-wrap: wrap; }
.btn { background: var(--accent); color: #fff; border: 0; border-radius: 10px; padding: 12px 22px; font: 600 17px var(--sans); cursor: pointer; }
.btn:disabled { opacity: .5; cursor: default; }
.btn:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }
.note { color: var(--ink2); font-size: 14px; }

footer { margin-top: 30px; color: var(--muted); font-size: 13px; }
.hidden { display: none !important; }