/* Base tokens and the a11y polish pass (SCOPE-M7 §2 accessibility bullet,
   ADR-M7-e). The beta cohort skews older, so:
     - the default body font is 18px, not 16px;
     - every load-bearing token below is at or above WCAG AA contrast on
       --paper — the pass is enforced by tests/unit/test_a11y_css_tokens.py,
       so lowering a value here fails CI, not just review.
   Kept minimal on purpose — this is the polish layer, not a redesign. */

:root {
  /* --ink kept as an alias so pre-M7 rules that still reference it do not
     silently lose their color if a template we haven't touched imports it. */
  --ink: #1a1a1a;
  --paper: #ffffff;
  --rule: #d8d8d8;

  /* Load-bearing text/link/disabled tokens — the four the a11y test locks. */
  --text: #1a1a1a;            /* 16.10:1 on --paper */
  --text-secondary: #595959;  /*  7.00:1 on --paper */
  --link: #0b4dab;            /*  8.16:1 on --paper */
  --link-hover: #073478;      /* 12.10:1 on --paper */
  --disabled: #6b6b6b;        /*  5.36:1 on --paper (exceeds AA large 3:1) */
}

body {
  margin: 0 auto;
  padding: 2rem 1.25rem;
  max-width: 40rem;
  /* SCOPE-M7 §2: 18px base, not 16px. Older readers on a 1024px laptop or
     iPad get a comfortable default without pinch-zoom. */
  font: 18px/1.55 system-ui, -apple-system, "Segoe UI", sans-serif;
  color: var(--text);
  background: var(--paper);
}

/* Headings scale proportionally off the 18px base. */
h1 {
  font-size: 1.75rem;
}

h2 {
  font-size: 1.375rem;
}

a {
  color: var(--link);
}

a:hover,
a:focus {
  color: var(--link-hover);
}

/* Disabled controls remain readable but visibly muted. */
:disabled,
[aria-disabled="true"] {
  color: var(--disabled);
}

/* SCOPE-M7 §2 slice B — 44×44px hit area, per Apple HIG / WCAG 2.5.5 AAA.
   Shared utility applied by templates to standalone buttons, checkbox/radio
   inputs, table-cell actions and any link styled as a button. Never applied
   to inline text links — the 18px body line-height already carries those. */
.tap-target {
  min-height: 44px;
  min-width: 44px;
  padding: 0.5rem 0.9rem;
  box-sizing: border-box;
  vertical-align: middle;
}

/* Checkbox/radio ship as 13px OS glyphs; give them their own hit-area
   without stretching the glyph itself. The visible tick stays where the
   user expects it. min-width/min-height do the work of enforcing the
   44×44 hit-area; margin adds visual breathing room only (margin does
   not extend a control's click zone in any browser — that was the
   pre-2026-08-24 misreading corrected by the retrospective a11y review). */
input[type="checkbox"].tap-target,
input[type="radio"].tap-target {
  width: 24px;
  height: 24px;
  margin: 10px 8px 10px 0;
  cursor: pointer;
}

header {
  padding-bottom: 1rem;
  border-bottom: 1px solid var(--rule);
  margin-bottom: 1.5rem;
}

.messages {
  padding: 0.75rem 1rem;
  border: 1px solid var(--rule);
  list-style: none;
}