/* Site baseline, see DESIGN.md. Per-page: override --ah only. */
@font-face {
  font-family: "IBM Plex Sans"; font-weight: 100 700; font-display: swap;
  src: url(/fonts/IBMPlexSans-Variable.woff2) format("woff2");
}
@font-face {
  font-family: "IBM Plex Mono"; font-weight: 400; font-display: swap;
  src: url(/fonts/IBMPlexMono-Regular.woff2) format("woff2");
}
:root {
  color-scheme: light dark;                     /* light unless the browser asks for dark; no toggle */
  --h: 220;                                     /* site hue: every neutral, every page */
  --ah: var(--h);                               /* accent hue: a page overrides this when the subject earns it */
  --bg:     light-dark(oklch(97% 0.006 var(--h)),  oklch(18% 0.012 var(--h)));   /* #f1f6f8 / #0c1315 = theme-color */
  --fg:     light-dark(oklch(22% 0.02  var(--h)),  oklch(93% 0.01  var(--h)));
  --muted:  light-dark(oklch(48% 0.02  var(--h)),  oklch(70% 0.015 var(--h)));   /* 6.0:1 light */
  --accent: light-dark(oklch(50% 0.16  var(--ah)), oklch(72% 0.13  var(--ah)));  /* 4.8:1 light: large text and rings only */
  --ok:     light-dark(oklch(52% 0.15 145), oklch(75% 0.14 145));                /* 4.8:1 light */
  --warn:   light-dark(oklch(52% 0.15  80), oklch(80% 0.14  80));                /* 5.1:1 light */
  --down:   light-dark(oklch(52% 0.19  25), oklch(72% 0.17  25));                /* 5.6:1 light */
  --font: "IBM Plex Sans", system-ui, sans-serif;
  --mono: "IBM Plex Mono", ui-monospace, monospace;
}

body {
  margin: 0; min-height: 100dvh; display: grid; place-items: center;
  background: var(--bg); color: var(--fg);
  font: 400 clamp(1rem, .95rem + .3vw, 1.125rem)/1.45 var(--font);
  padding: calc(env(safe-area-inset-top, 0px) + 1.5rem)
           calc(env(safe-area-inset-right, 0px) + 1rem)
           calc(env(safe-area-inset-bottom, 0px) + 1.5rem)
           calc(env(safe-area-inset-left, 0px) + 1rem);
}
main { width: min(100%, 65ch); overflow-wrap: anywhere; }
h1 { font-size: clamp(2.5rem, 2rem + 4vw, 5rem); line-height: 1.05; margin: 0 0 .5rem; text-wrap: balance; }
.answer { min-height: 2.2em; }                  /* reserved so a refreshed verdict never shifts the page */
.num { font-variant-numeric: tabular-nums; }    /* digits that change or align; prose keeps proportional figures */
code, .id { font-family: var(--mono); }         /* identifiers the user copies, not decoration */
.muted { color: var(--muted); }
.ok { color: var(--ok); } .warn { color: var(--warn); } .down { color: var(--down); }
button, input, textarea, a.button { min-height: 44px; font: inherit; touch-action: manipulation; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
a { color: inherit; text-decoration: underline; text-underline-offset: .15em; }
a:hover { text-decoration-thickness: 2px; }
img, svg { max-width: 100%; height: auto; }
@media (prefers-contrast: more) { :root { --muted: var(--fg); } }
@media (prefers-reduced-motion: reduce) { *, ::before, ::after { animation: none !important; transition: none !important; } }

/* ---- page: /error/ (see DESIGN.md "Page: /error"). An explanation reads top-down, so the column
   starts at the top instead of centring, and the H1 is a sentence, not a verdict word. ---- */
body { place-items: start center; }
main { padding-block: 1rem 2rem; }
h1 { font-size: clamp(1.75rem, 1.25rem + 2.2vw, 2.75rem); line-height: 1.15; font-weight: 600; }
.lead { font-size: 1.125em; margin: 0 0 1.5rem; }
h2 { font-size: 1.375rem; line-height: 1.25; margin: 2.25rem 0 .5rem; }
h3 { font-size: 1.125rem; margin: 1.25rem 0 .25rem; }
p { margin: .5rem 0; }
ol, ul { margin: .5rem 0; padding-left: 1.25rem; }
li { margin: .4rem 0; }

/* where it failed: the three parties from the Cloudflare page, in words */
.fault { list-style: none; padding: 0; margin: 1.5rem 0 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; }
.fault li { margin: 0; border-top: 1px solid var(--muted); padding-top: .5rem; }
.fault .who { display: block; color: var(--muted); font-size: .9375rem; }
.fault .state { display: block; font-weight: 600; }
.fault .bad .state { color: var(--down); }
@media (max-width: 400px) { .fault { grid-template-columns: 1fr; gap: .25rem; } .fault li { display: flex; justify-content: space-between; gap: 1rem; } }

button { background: var(--fg); color: var(--bg); border: 0; border-radius: 4px; padding: .55rem 1rem; cursor: pointer; }
button:hover { opacity: .9; }
button[disabled] { opacity: .6; cursor: default; }
label { display: block; margin-bottom: .35rem; }
textarea { display: block; width: 100%; box-sizing: border-box; min-height: 6.5rem; padding: .6rem; margin-bottom: .6rem;
  border: 1px solid var(--muted); border-radius: 4px; background: var(--bg); color: var(--fg); font: inherit; resize: vertical; }
textarea::placeholder { color: var(--muted); opacity: .8; }
.decode { color: var(--accent); font-weight: 600; margin-top: 1rem; }
.small { font-size: .875rem; }
.codes a .id { font-family: var(--mono); }
details { margin: 2.25rem 0; }
summary { cursor: pointer; font-weight: 600; padding: .6rem 0; }   /* keeps the disclosure marker; 44px tall */
footer { margin-top: 3rem; padding-top: 1rem; border-top: 1px solid var(--muted); font-size: .9375rem; }
footer nav a { margin-right: 1.25rem; }
.codes { list-style: none; padding: 0; }
.codes li { display: grid; grid-template-columns: max-content 1fr; gap: .75rem; align-items: baseline; }