/* One stylesheet, no framework, no webfont, no external request.
   The CSP forbids anything else, so this file is the whole visual system. */

:root {
  color-scheme: light dark;
  --bg: #fbfbfa;
  --fg: #16181d;
  --muted: #4a4f5a;
  --rule: #d8d6d1;
  --card: #ffffff;
  --accent: #1f3a8a;
  /* Ink for text on an --accent fill. Was a hard-coded #fff, which is 10.34:1 here and
     2.02:1 in the dark scheme -- see the note above `button:hover`. */
  --accent-ink: #ffffff;
  /* The edge of a form control, which WCAG 1.4.11 requires to reach 3:1 against its own
     background. --rule is 1.45:1 against --card and is right for a decorative separator;
     it was wrong for the boundary of the box a person types in. */
  --field: #7d8089;
  --measure: 42rem;
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg: #12141a;
    --fg: #e9eaee;
    --muted: #a3a9b6;
    --rule: #2b2f39;
    --card: #191c23;
    --accent: #9db4ff;
    --accent-ink: #12141a;
    --field: #6e7688;
  }
}

*, *::before, *::after { box-sizing: border-box; }

/* **Every link's colour was the user agent's, and the stylesheet claimed AA anyway.**
   Nothing here styled `a` except the wordmark, so a link took Chrome's `#0000EE` — 9.08:1
   on the light background and **1.96:1** on the dark one, with `:visited` at 1.67:1. Which
   of those a reader got depended on whether their browser had decided to apply its own
   dark-mode link colour, which is not something this project can assert and was asserting.

   `:link` and `:visited` are named explicitly: the user-agent rules for those pseudo-classes
   outrank a bare `a`, so `a { color: … }` alone would have left visited links untouched. */
a:link, a:visited { color: var(--accent); }

body {
  margin: 0;
  padding: 0 1.25rem 4rem;
  background: var(--bg);
  color: var(--fg);
  font: 16px/1.6 ui-serif, Georgia, "Times New Roman", serif;
}

header, main, footer { max-width: var(--measure); margin: 0 auto; }

.skip {
  position: absolute; left: -9999px;
}
.skip:focus {
  left: 1rem; top: 1rem; padding: .5rem .75rem;
  background: var(--card); border: 2px solid var(--accent); z-index: 10;
}

/* A visible focus ring everywhere, at a contrast that survives both themes. Removing
   this is the single most common way a keyboard user loses their place. */
:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }

header { padding: 3rem 0 1.5rem; }
h1 { font-size: 1.6rem; letter-spacing: .02em; margin: 0 0 .35rem; }
.tagline { color: var(--muted); margin: 0; max-width: 34rem; }

form { display: grid; gap: .6rem; margin: 1.5rem 0 2rem; }
label { font-weight: 600; font-size: .95rem; }
textarea {
  width: 100%; padding: .7rem .8rem; font: inherit;
  color: var(--fg); background: var(--card);
  border: 1px solid var(--field); border-radius: 6px; resize: vertical;
}
button {
  justify-self: start; padding: .55rem 1.4rem; font: inherit; font-weight: 600;
  color: var(--bg); background: var(--fg);
  border: 1px solid var(--fg); border-radius: 6px; cursor: pointer;
}
/* **The hover label was `#fff` and the dark scheme's accent is a pale blue.** Measured
   2026-09-07: white on #9db4ff is **2.02:1**, against the 4.5:1 WCAG 1.4.3 requires, so
   the label on the product's primary button all but disappeared on hover for every
   dark-scheme user. The stylesheet's own comment said "AA contrast in both schemes"; the
   comment was the only thing that had checked. `--accent-ink` is per scheme and
   `tests/test_the_stylesheet_meets_wcag_aa.py` computes every ratio from this file. */
button:hover { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); }

.error {
  padding: .75rem 1rem; border-left: 4px solid currentColor;
  background: var(--card); color: var(--fg);
}

/* Outcome. The glyph and the word carry the meaning; the tint is decoration only, so
   the page reads identically in greyscale. */
.outcome {
  display: flex; gap: .6rem; align-items: baseline;
  padding: .7rem .9rem; margin: 0 0 1.5rem;
  border: 1px solid var(--rule); border-left-width: 5px; border-radius: 4px;
  background: var(--card); color: var(--muted); font-size: .95rem;
}
.outcome strong { color: var(--fg); text-transform: capitalize; }
.outcome span { font-size: 1.1rem; }
.outcome-supported { border-left-color: #2f6b3f; }
.outcome-conditional, .outcome-mixed { border-left-color: #8a6a1f; }
.outcome-unresolved, .outcome-insufficient_evidence { border-left-color: #7a4a8a; }
.outcome-refused { border-left-color: #8a2f2f; }

h2 {
  font-size: 1.05rem; text-transform: uppercase; letter-spacing: .09em;
  color: var(--muted); margin: 2.25rem 0 .6rem;
  padding-bottom: .3rem; border-bottom: 1px solid var(--rule);
}
h3 { font-size: 1rem; margin: 0 0 .5rem; }

/* The answer itself, set larger than everything around it. Its prominence is the
   product's central claim, so it is not a styling detail. */
.ultimate { font-size: 1.2rem; line-height: 1.65; white-space: pre-wrap; }

.dispute {
  padding: .9rem 1rem; margin: 0 0 1rem;
  background: var(--card); border: 1px solid var(--rule); border-radius: 6px;
}
.positions { margin: 0 0 .7rem; padding-left: 1.2rem; }
.positions li { margin-bottom: .3rem; }
.resolution { margin: 0; color: var(--muted); font-size: .95rem; }
.resolution strong { color: var(--fg); text-transform: capitalize; }

blockquote {
  margin: .4rem 0 0; padding-left: .9rem;
  border-left: 3px solid var(--rule); color: var(--muted);
}

details { margin-top: 1.5rem; }
summary { cursor: pointer; font-weight: 600; padding: .4rem 0; }
dl { display: grid; grid-template-columns: auto 1fr; gap: .3rem 1rem; margin: .6rem 0; }
dt { color: var(--muted); }

table { width: 100%; border-collapse: collapse; margin-top: .6rem; font-size: .93rem; }
th, td { text-align: left; padding: .45rem .5rem; border-bottom: 1px solid var(--rule); vertical-align: top; }
th { color: var(--muted); font-weight: 600; }

/* Wide content scrolls inside its own box rather than making the page scroll sideways. */
details > table { display: block; overflow-x: auto; }

footer {
  margin-top: 4rem; padding-top: 1rem;
  border-top: 1px solid var(--rule); color: var(--muted); font-size: .9rem;
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
}

/* Source labels next to an agreement. Smaller, but never colour-only: the words
   "agreed by N independent sources" carry the meaning on their own. */
.sources {
  display: block;
  font-size: 0.875rem;
  color: var(--muted);
}

/* ---------------------------------------------------------------------------
   Account pages, added 2026-09-07 with passwordless sign-in.
   Same rules as everything above: no colour-only meaning, visible focus,
   AA contrast in both schemes -- **computed from this file by
   `tests/test_the_stylesheet_meets_wcag_aa.py` rather than asserted here, because when
   this comment first claimed it, two pairs failed** -- and nothing that needs JavaScript.
   --------------------------------------------------------------------------- */

header nav {
  margin-top: .35rem;
  font-size: .93rem;
}
/* `:link`/`:visited` by name here too, and not for symmetry: `a:link` is specificity
   (0,1,1) and `header h1 a` is (0,0,3), so the general link colour outranked the wordmark
   and turned it accent-blue. Caught in a real render, not in the arithmetic. */
header h1 a:link, header h1 a:visited { color: inherit; text-decoration: none; }
header h1 a:hover, header h1 a:focus { text-decoration: underline; }

/* A single visible focus ring for every interactive element, so keyboard use is
   never a guess. `:focus-visible` alone would leave older engines with nothing. */
a:focus, button:focus, input:focus, textarea:focus, summary:focus {
  outline: 3px solid var(--accent);
  outline-offset: 2px;
}

/* **1.4.11, and the border was 1.45:1 in light and 1.27:1 in dark.** A person could not
   see where the box they type in begins -- on the one field the whole sign-in journey
   depends on. `--field` is 3.95:1 and 3.74:1 against the field's own background. */
input[type="email"], input[type="text"] {
  width: 100%;
  max-width: 24rem;
  padding: .5rem .6rem;
  font: inherit;
  color: var(--fg);
  background: var(--card);
  border: 1px solid var(--field);
  border-radius: 4px;
}

fieldset {
  border: 1px solid var(--rule);
  border-radius: 4px;
  margin: .8rem 0;
  padding: .6rem .8rem;
}
legend { color: var(--muted); font-size: .93rem; padding: 0 .3rem; }
fieldset label { display: block; margin: .25rem 0; }

/* The two sign-out forms sit side by side on a wide screen and stack on a narrow
   one, without a media query and without a grid the content has to fit. */
form + form { margin-top: .5rem; }

.notice {
  border-left: 4px solid var(--accent);
  padding: .6rem .9rem;
  background: var(--card);
  margin: 1rem 0;
}

/* A token is shown once. It must be selectable, must wrap rather than overflow,
   and must not be mistaken for prose. */
code.token {
  display: block;
  padding: .7rem .9rem;
  background: var(--card);
  border: 1px solid var(--rule);
  border-radius: 4px;
  font: .95rem/1.5 ui-monospace, SFMono-Regular, Menlo, monospace;
  word-break: break-all;
  user-select: all;
}

table.account th { width: 10rem; }

/* Every table on these pages can be wider than a phone. Each scrolls in its own
   box; the page body never scrolls sideways. */
main > table, h3 + table { display: block; overflow-x: auto; }

/* A column of buttons still needs a header: an empty `th` is a column a screen reader
   announces as nothing at all, and the row's other cells are then read without the label
   that says what the control does. Visible to assistive technology, not to the eye --
   never `display: none`, which removes it from both.

   `clip-path` rather than the old `clip` rectangle, and a 1px box rather than zero, so
   the text is still laid out and still reachable by a screen reader's virtual cursor. */
.at-sr {
  position: absolute;
  width: 1px; height: 1px;
  margin: -1px; padding: 0; border: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* The confirmation on the one form whose result cannot be undone. `required` on the
   checkbox is what stops a mis-click in a browser; `app.delete_account_page` refuses the
   POST without it, because a control is not an enforcement. */
label.confirm {
  display: flex;
  gap: .5rem;
  align-items: baseline;
  font-weight: 400;
  margin: .2rem 0 .4rem;
}