/* Провідник. Спокійно, велико, з високим контрастом — читач може бути після
   поранення, з порушенням зору, у втомі. Дрібний шрифт і сірий текст тут не
   стиль, а бар'єр.

   РОЗМІРИ ШРИФТУ — У rem, НЕ В px. Найпоширеніший спосіб, яким людина 65+
   пристосовує сторінку під себе, — «збільшити шрифт» у налаштуваннях браузера.
   На px він не діє взагалі: лишається тільки Ctrl+ і розтягування пальцями,
   про які знають не всі. Відступи, рамки й радіуси лишаються в px свідомо —
   вони не є текстом, і тягнути їх разом зі шрифтом означало б ламати сітку. */
:root {
  --bg: #fbfaf7; --card: #fff; --line: #e3e0d8; --fg: #1b1a17; --muted: #5f5b52;
  --accent: #2f6b4f; --accent-soft: #e8f2ec;
  --warn: #8a4b12; --warn-soft: #fdf1e3;
  --urgent: #a3301f; --urgent-soft: #fdeceb;

  /* МЕЖА ЕЛЕМЕНТА КЕРУВАННЯ — окремий колір, не --line.
     --line малює розділювачі, і його контраст до тла 1.26:1 для цього
     достатній. Але тим самим кольором були обведені кнопки-відповіді й УСІ
     поля вводу на екрані звернення — а там 1.26:1 означає, що людина бачить
     пʼять підписів і не бачить, де поле починається. Норма для меж елементів
     керування — 3:1 (WCAG 1.4.11). Тут 3.5:1 до картки й 3.4:1 до тла. */
  --control: #8d887c;
}
@media (prefers-color-scheme: dark) {
  :root {
    --bg: #14161a; --card: #1b1e23; --line: #2b3038; --fg: #f0eee9; --muted: #a8a49b;
    --accent: #6fbf95; --accent-soft: #1a2b23;
    --warn: #e0a45f; --warn-soft: #2a2118;
    --urgent: #f08b7c; --urgent-soft: #2c1a18;
    --control: #767d88;   /* 4:1 до картки */
  }
}
* { box-sizing: border-box; }
body {
  margin: 0; background: var(--bg); color: var(--fg);
  font: 1.125rem/1.6 -apple-system, "Segoe UI", system-ui, sans-serif;
  -webkit-font-smoothing: antialiased;
}
main { max-width: 760px; margin: 0 auto; padding: 32px 20px 80px; }
.hidden { display: none; }
.top { margin-bottom: 28px; }
h1 { font-size: clamp(1.75rem, 5vw, 2.375rem); line-height: 1.15; margin: 0 0 8px; letter-spacing: -0.02em; }
.lead { color: var(--muted); margin: 0 0 24px; font-size: 1.125rem; max-width: 54ch; }

/* Заголовок екрана приймає фокус під час переходу — тому в нього tabindex="-1".
   Власної обводки він не отримує: людина туди не «перейшла клавішею», її туди
   перевели, і рамка навколо заголовка читалась би як помилка. */
h1:focus { outline: none; }