/* ==========================================================================
   DriverZA

   The page reads as a maintained public record. Three rules the whole sheet
   follows:
     1. Uncertainty is typography, never a chip or an icon. Unknown facts are
        grey italic and say "Not confirmed" in words.
     2. Words instead of symbols. A cell that means no reads "No".
     3. One brand colour, spent on actions the reader takes.

   Warm stone neutrals against a cool saturated blue. Mobile first, for
   mid-range Android phones arriving from Google.
   ========================================================================== */

:root {
  --paper: #ffffff;
  --stone: #f7f5f1;
  --stone-2: #eeeae2;
  --line: #e2ddd3;
  --line-2: #c9c1b4;

  --ink: #16171a;
  --ink-2: #55575e;
  --ink-3: #6f717a;

  --brand: #1744bc;
  --brand-dark: #102f87;
  --brand-tint: #eef2ff;

  --yes: #0f7a4a;
  --no: #b3261e;
  --maybe: #9a5b00;
  --unsure: #6f717a;

  --display: Archivo, "Helvetica Neue", Arial, sans-serif;
  --text: "IBM Plex Sans", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;

  --wrap: 74rem;
  --read: 40rem;
  --tap: 2.875rem;
  --r: 6px;
  --r-lg: 10px;
}

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

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font: 1rem/1.6 var(--text);
  -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; height: auto; }

/* --- Type ----------------------------------------------------------------- */

h1, h2, h3, h4 {
  font-family: var(--display);
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: -0.018em;
  margin: 0 0 .5rem;
  text-wrap: balance;
}

h1 { font-size: clamp(2.1rem, 7vw, 3.35rem); max-width: 18ch; }
h2 { font-size: 1.375rem; margin-top: 2.5rem; letter-spacing: -0.014em; }
h3 { font-size: 1.0625rem; margin-top: 1.75rem; letter-spacing: -0.008em; }
h4 { font-size: .9375rem; margin-top: 1.25rem; }

@media (min-width: 48rem) {
  h1 { font-size: clamp(2.75rem, 5vw, 3.75rem); }
  h2 { font-size: 1.625rem; }
  h3 { font-size: 1.1875rem; }
}

p, ul, ol { margin: 0 0 1rem; }
ul, ol { padding-left: 1.15em; }
li { margin-bottom: .3em; }
li::marker { color: var(--line-2); }

a { color: var(--brand); text-decoration-thickness: 1px; text-underline-offset: .16em; }
a:hover { color: var(--brand-dark); }

strong, b { font-weight: 600; }

.lede { font-size: 1.0625rem; color: var(--ink-2); max-width: 38em; line-height: 1.55; }
@media (min-width: 48rem) { .lede { font-size: 1.1875rem; } }

.small { font-size: .875rem; }
.muted { color: var(--ink-3); }
.read { max-width: var(--read); }

.unconfirmed { color: var(--unsure); font-style: italic; }
.checked { display: block; font-size: .8125rem; color: var(--ink-3); font-variant-numeric: tabular-nums; }

/* --- Shell ---------------------------------------------------------------- */

.wrap { width: 100%; max-width: var(--wrap); margin-inline: auto; padding-inline: 1.25rem; }
.wrap--read { max-width: 48rem; }

.band { padding-block: 2.5rem; }
.band--stone { background: var(--stone); border-block: 1px solid var(--line); }
.band--tight { padding-block: 1.75rem; }

.skip-link { position: absolute; left: -9999px; top: 0; z-index: 100; background: var(--ink); color: #fff; padding: .75rem 1.25rem; }
.skip-link:focus { left: 0; }

:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; border-radius: 2px; }

/* A small inline aside next to a fact: "What is a PrDP?" beside the PrDP row.
   Quiet enough not to compete with the value, close enough to be the obvious
   next click. */
.note-inline {
  display: block;
  font-size: .8125rem;
  margin-top: .15rem;
}
.note-inline a { color: var(--ink-3); }
.note-inline a:hover, .note-inline a:focus { color: var(--brand); }

.sr-only {
  position: absolute !important; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
}

/* --- Header --------------------------------------------------------------- */

.top {
  position: relative; z-index: 30;
  background: color-mix(in srgb, var(--paper) 96%, transparent);
  border-bottom: 1px solid var(--line);
}

.top__bar { display: flex; align-items: center; gap: .75rem; min-height: 4.25rem; }

.logo { display: inline-flex; align-items: center; gap: .5rem; text-decoration: none; color: var(--ink); }
.logo svg { width: 2rem; height: 2rem; flex: 0 0 auto; display: block; }
.logo span {
  font-family: var(--display); font-weight: 700; font-size: 1.25rem;
  letter-spacing: -0.035em;
}
.logo:hover { color: var(--ink); }
.logo:hover span { color: var(--brand-dark); }

.top__spacer { flex: 1 1 auto; }

.lang { position: relative; display: flex; }
.lang select {
  appearance: none; min-height: 2.25rem; padding: .25rem 1.75rem .25rem .625rem;
  border: 1px solid var(--line-2); border-radius: var(--r);
  background: var(--paper); color: var(--ink); font: inherit; font-size: .8125rem; font-weight: 500;
}
.lang::after {
  content: ""; position: absolute; right: .625rem; top: 50%; width: .375rem; height: .375rem;
  border-right: 1.5px solid var(--ink-2); border-bottom: 1.5px solid var(--ink-2);
  transform: translateY(-70%) rotate(45deg); pointer-events: none;
}

/* The language form keeps a real submit button for anyone whose JavaScript
   never ran. Once it has, the select submits on change and the button goes. */
.js .lang__go { display: none; }
.lang__go { margin-left: .375rem; }

.menu-btn {
  display: inline-flex; align-items: center; gap: .4rem;
  min-height: 2.25rem; padding: .3rem .7rem; cursor: pointer;
  border: 1px solid var(--line-2); border-radius: var(--r);
  background: var(--paper); color: var(--ink); font: inherit; font-size: .8125rem; font-weight: 600;
}
@media (min-width: 60rem) { .menu-btn { display: none; } }

/* At 320px the wordmark, the language select and the Menu button together are
   wider than the bar, and the header pushes the whole document sideways. Buy
   the room back from the gutters and the gaps, not from the tap targets. */
@media (max-width: 22.5rem) {
  .wrap { padding-inline: 1rem; }
  .top__bar { gap: .5rem; }
  .logo span { font-size: 1.125rem; }
}

.drawer { border-top: 1px solid var(--line); padding-block: .5rem .875rem; }
.drawer[hidden] { display: none; }
.drawer ul { list-style: none; margin: 0; padding: 0; }
.drawer li { margin: 0; }
.drawer a {
  display: block; padding: .625rem 0; min-height: var(--tap);
  text-decoration: none; color: var(--ink); font-weight: 500; font-size: .9375rem;
}
.drawer a:hover { color: var(--brand); }

.find { display: flex; gap: .5rem; margin-top: .5rem; }
.find input[type="search"] {
  flex: 1 1 auto; min-width: 0; min-height: var(--tap);
  border: 1px solid var(--line-2); border-radius: var(--r);
  padding: .5rem .75rem; font: inherit; font-size: .9375rem; background: var(--paper); color: var(--ink);
}
.find input::placeholder { color: var(--ink-3); }

@media (min-width: 60rem) {
  .drawer { padding-block: 0; border-top: 1px solid var(--line); }
  .drawer[hidden] { display: block; }
  .drawer > div { display: flex; align-items: center; gap: 1.5rem; flex-wrap: wrap; }
  .drawer ul { display: flex; gap: 1.25rem; flex-wrap: wrap; flex: 1 1 auto; min-width: 0; }
  .drawer a { padding: .625rem 0; min-height: 0; font-size: .90625rem; }
  .find { margin: 0 0 0 auto; width: 18rem; flex: 0 0 auto; }
  .find input[type="search"] { min-height: 2.25rem; }
}

/* --- Buttons -------------------------------------------------------------- */

.btn {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: var(--tap); padding: .625rem 1.125rem;
  border: 1px solid transparent; border-radius: var(--r);
  font: inherit; font-weight: 600; font-size: .9375rem;
  text-decoration: none; cursor: pointer; text-align: center; max-width: 100%;
  transition: background-color .12s linear, border-color .12s linear, color .12s linear;
}
.btn--go { background: var(--brand); color: #fff; }
.btn--go:hover { background: var(--brand-dark); color: #fff; }
.btn--line { background: var(--paper); border-color: var(--line-2); color: var(--ink); }
.btn--line:hover { border-color: var(--ink-2); color: var(--ink); }
.btn--wa { background: #1a8a4b; color: #fff; }
.btn--wa:hover { background: #14713d; color: #fff; }
.btn--sm { min-height: 2.375rem; padding: .375rem .75rem; font-size: .875rem; }
.btn--wide { width: 100%; }

.actions { display: flex; flex-wrap: wrap; gap: .625rem; }

/* --- Hero ----------------------------------------------------------------- */

.hero {
  position: relative; overflow: hidden;
  padding-block: 2.75rem 3rem;
  background:
    linear-gradient(112deg, var(--paper) 0%, var(--paper) 52%, var(--brand-tint) 100%);
  border-bottom: 1px solid var(--line);
}
.hero::after {
  content: ""; position: absolute; inset: auto -5rem -9rem auto;
  width: 19rem; height: 19rem; border: 1px solid #dce4ff; border-radius: 50%;
  box-shadow: 0 0 0 3.5rem #f7f9ff, 0 0 0 3.6rem #dce4ff;
  pointer-events: none;
}
.hero .wrap { position: relative; z-index: 1; }
.hero h1 { max-width: 15ch; }
.hero .lede { margin-top: .75rem; }
@media (min-width: 48rem) { .hero { padding-block: 3.25rem 3.5rem; } }
@media (min-width: 62rem) {
  .hero__grid {
    display: grid; grid-template-columns: minmax(0, 1fr) 29rem;
    grid-template-areas: "intro action" "extra action";
    column-gap: 3.5rem; align-items: start;
  }
  .hero__intro { grid-area: intro; }
  .hero__action { grid-area: action; }
  .hero__extra { grid-area: extra; }
  .hero__grid .starter { margin-top: 0; max-width: none; }
  .hero h1 { font-size: 3.75rem; }
}

.parent-link { margin: 0 0 .5rem; font-size: .9375rem; }

.page-intro { padding-block: 2.75rem 2.25rem; }
.page-intro .lede { margin-top: .85rem; }

/* The hero centrepiece is question one of the eligibility checker, working.
   It is the only fully blue block on the site, which is how a reader finds the
   thing to do first. */
.starter {
  margin-top: 2rem; max-width: 33rem;
  border: 2px solid var(--brand); border-radius: var(--r-lg);
  background: var(--paper); overflow: hidden;
}
.starter__head {
  position: relative; margin: 0; padding: .8125rem 1.25rem;
  background: var(--brand); color: #fff;
  font-family: var(--display); font-weight: 700; font-size: 1.0625rem;
  letter-spacing: -.01em;
}
/* One orchestrated moment on page load: the blue bar draws in like a road
   being painted. It runs once, never loops, and is skipped entirely when the
   reader has asked for less motion. */
.starter__head::before {
  content: ""; position: absolute; inset: 0; background: var(--paper);
  transform-origin: right center; animation: paint .5s .15s ease-out both;
}
@keyframes paint { from { transform: scaleX(1); } to { transform: scaleX(0); } }
@media (prefers-reduced-motion: reduce) { .starter__head::before { display: none; } }
.starter__head > span { position: relative; }
.starter__body { padding: 1.125rem 1.25rem 1.25rem; }
.starter__alt { margin-top: .75rem; }
.starter fieldset { border: 0; padding: 0; margin: 0; min-width: 0; }
.starter__grid { list-style: none; margin: 0 0 1.125rem; padding: 0; display: grid; grid-template-columns: repeat(2, 1fr); gap: .5rem; }
@media (min-width: 34rem) { .starter__grid { grid-template-columns: repeat(3, 1fr); } }
.starter__grid li { margin: 0; }
.starter__grid label {
  display: flex; align-items: center; gap: .4375rem; min-height: var(--tap);
  padding: .5rem .5rem; cursor: pointer; font-size: .875rem; white-space: nowrap;
  border: 1px solid var(--line-2); border-radius: var(--r); background: var(--paper);
}
.starter__grid label:hover { border-color: var(--brand); }
.starter__grid input { accent-color: var(--brand); width: 1.125rem; height: 1.125rem; flex: 0 0 auto; }
.starter__grid input:checked + span { font-weight: 600; }

.hero__meta { margin: 1.25rem 0 0; font-size: .875rem; color: var(--ink-3); max-width: 42ch; }
.hero__links { margin: 1.5rem 0 0; font-size: .9375rem; }
.hero__links ul { list-style: none; margin: .375rem 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: .375rem 1.125rem; }
.hero__links li { margin: 0; }

.research-note {
  display: flex; flex-wrap: wrap; gap: .25rem .65rem; align-items: baseline;
  max-width: 46rem; margin-top: 1.25rem; padding-top: .875rem;
  border-top: 1px solid var(--line); color: var(--ink-3); font-size: .8125rem;
}
.research-note__label {
  color: var(--ink); font-family: var(--display); font-weight: 700;
  letter-spacing: .02em;
}
.research-note a { color: var(--ink-2); }

.steps { border-bottom: 1px solid var(--line); background: var(--paper); }
.steps__grid { display: grid; }
.steps__grid a {
  display: grid; grid-template-columns: auto 1fr; column-gap: .75rem; align-items: baseline;
  padding: 1rem 0; border-top: 1px solid var(--line);
  text-decoration: none; color: var(--ink);
}
.steps__grid a:first-child { border-top: 0; }
.steps__grid a:hover strong { color: var(--brand); text-decoration: underline; }
.steps__n {
  grid-row: 1 / span 2; align-self: start;
  font-family: var(--display); font-weight: 700; font-size: 1.125rem;
  color: var(--brand); font-variant-numeric: tabular-nums;
}
.steps__grid strong { font-weight: 600; font-size: .9375rem; }
.steps__d { color: var(--ink-3); font-size: .875rem; }
@media (min-width: 48rem) {
  .steps__grid { grid-template-columns: repeat(3, 1fr); }
  .steps__grid a { padding: 1.125rem 1.75rem; border-top: 0; border-left: 1px solid var(--line); }
  .steps__grid a:first-child { padding-left: 1.75rem; }
  .steps__grid a:last-child { padding-right: 0; }
}

/* --- Record sheet --------------------------------------------------------- */

.record { margin: 0; }
.record > div {
  display: grid; grid-template-columns: 1fr; gap: .125rem;
  padding: .8125rem 0; border-top: 1px solid var(--line);
}
.record > div:first-child { border-top: 0; }
.record dt { color: var(--ink-2); font-size: .875rem; }
.record dd { margin: 0; font-weight: 500; }
.record dd .qual { display: block; font-weight: 400; font-size: .875rem; color: var(--ink-2); margin-top: .1875rem; }

@media (min-width: 40rem) {
  .record > div { grid-template-columns: 12rem 1fr; gap: 1.5rem; align-items: baseline; }
}

.record--panel {
  background: var(--paper); border: 1px solid var(--line); border-radius: var(--r-lg);
  padding: .25rem 1.25rem;
}

.value-yes { color: var(--yes); font-weight: 600; }
.value-no { color: var(--no); font-weight: 600; }
.value-maybe { color: var(--maybe); font-weight: 600; }
.value-unsure { color: var(--unsure); font-style: italic; font-weight: 400; }
.value-neutral { color: var(--ink); font-weight: 500; }

/* --- Tables --------------------------------------------------------------- */

.scroller {
  overflow-x: auto; -webkit-overflow-scrolling: touch;
  border: 1px solid var(--line); border-radius: var(--r-lg); background: var(--paper);
}
.grid-table { border-collapse: collapse; width: 100%; font-size: .9375rem; font-variant-numeric: tabular-nums; }
.grid-table caption { text-align: left; padding: .875rem 1rem; color: var(--ink-2); font-size: .875rem; }
.grid-table th, .grid-table td {
  padding: .625rem .875rem; text-align: left; vertical-align: top; border-top: 1px solid var(--line);
}
.grid-table thead th {
  background: var(--stone); border-top: 0; border-bottom: 1px solid var(--line);
  font-family: var(--display); font-weight: 600; font-size: .8125rem; color: var(--ink);
  white-space: nowrap; letter-spacing: -0.005em;
}
.grid-table tbody th { font-weight: 600; }
.grid-table tbody tr:nth-child(even) > * { background-color: #fcfbf9; }
.grid-table .sub { display: block; font-size: .8125rem; color: var(--ink-3); font-weight: 400; margin-top: .125rem; }
.grid-table .cell-cities { max-width: 11rem; }
.grid-table td a[title] { white-space: nowrap; }
/* Keep single-word verdicts on one line so rows stay scannable. */
.grid-table td .unconfirmed,
.grid-table td .value-yes,
.grid-table td .value-no,
.grid-table td .value-maybe,
.grid-table td .value-neutral { white-space: nowrap; }

.grid-table--pinned th:first-child,
.grid-table--pinned td:first-child {
  position: sticky; left: 0; background: var(--paper);
  border-right: 1px solid var(--line); min-width: 9rem;
}
.grid-table--pinned thead th:first-child { background: var(--stone); z-index: 1; }
.grid-table--pinned tbody tr:nth-child(even) > :first-child { background: #fcfbf9; }

.scrollnote { margin: .5rem 0 0; font-size: .8125rem; color: var(--ink-3); }

/* --- Panels and notes ----------------------------------------------------- */

.panel { background: var(--paper); border: 1px solid var(--line); border-radius: var(--r-lg); padding: 1.5rem; }
.panel h2, .panel h3 { margin-top: 0; }
.panel > :last-child { margin-bottom: 0; }

.cols { display: grid; gap: 1rem; }
@media (min-width: 42rem) { .cols--2 { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 56rem) { .cols--3 { grid-template-columns: repeat(3, 1fr); } }

.note {
  border-left: 3px solid var(--line-2); padding: .875rem 1.125rem; margin: 1.5rem 0;
  background: var(--stone); font-size: .9375rem; border-radius: 0 var(--r) var(--r) 0;
}
.note > :last-child { margin-bottom: 0; }
.note h2, .note h3 { font-size: 1rem; margin: 0 0 .375rem; }
.note--warn { border-left-color: var(--no); background: #fdf2f0; }
.note--info { border-left-color: var(--brand); background: var(--brand-tint); }
.note--ok { border-left-color: var(--yes); background: #eff7f2; }

.blank {
  border: 1px dashed var(--line-2); border-radius: var(--r);
  padding: .75rem 1rem; color: var(--ink-3); font-size: .9375rem; background: var(--stone);
}

/* --- Breadcrumbs ---------------------------------------------------------- */

.trail { font-size: .8125rem; color: var(--ink-3); padding-top: 1rem; }
.trail ol { list-style: none; display: flex; flex-wrap: wrap; gap: .375rem; margin: 0; padding: 0; }
.trail li { margin: 0; }
.trail li::after { content: "/"; margin-left: .375rem; color: var(--line-2); }
.trail li:last-child::after { content: none; }
.trail a { color: var(--ink-2); }

/* --- Company list --------------------------------------------------------- */

.company { border-top: 1px solid var(--line); padding: 1.25rem 0; }
.company:first-child { border-top: 0; }
.company__head { display: flex; align-items: baseline; gap: .625rem; flex-wrap: wrap; }
.company__head h3 { margin: 0; font-size: 1.1875rem; }
.company__head h3 a { color: var(--ink); text-decoration: none; }
.company__head h3 a:hover { color: var(--brand); text-decoration: underline; }
.company__kind { color: var(--ink-3); font-size: .8125rem; }
.company__facts {
  margin: .625rem 0 0; display: flex; flex-wrap: wrap; gap: .25rem 1.5rem; font-size: .875rem;
}
.company__facts span { color: var(--ink-3); }
.company__facts b { font-weight: 600; color: var(--ink); }
.company .actions { margin-top: .875rem; }

.company-list { margin-top: 1.5rem; border-block: 1px solid var(--line); }
@media (min-width: 56rem) {
  .company-list {
    display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: 2rem;
  }
  .company-list .company:nth-child(2) { border-top: 0; }
}

/* --- Long-form ------------------------------------------------------------ */

.prose { max-width: var(--read); }
.prose h2 { scroll-margin-top: 1rem; }
.prose ul li::marker { color: var(--brand); }
.prose table { width: 100%; border-collapse: collapse; font-size: .9375rem; }
.prose th, .prose td { border: 1px solid var(--line); padding: .5rem .625rem; text-align: left; }

/* Long-form copy in the main column keeps a readable measure. Tables and
   record sheets sit outside these selectors and stay full width. */
.layout > div > section > p,
.layout > div > section > ul,
.layout > div > section > ol,
.layout > div > section > h3,
.layout > div > section > blockquote { max-width: var(--read); }

/* The single mobile column must be allowed to shrink below its content. An
   auto track takes its floor from the widest descendant, so a wide table would
   otherwise stretch the column and scroll the whole page sideways. */
.layout { display: grid; grid-template-columns: minmax(0, 1fr); gap: 2rem; }
@media (min-width: 62rem) {
  .layout { grid-template-columns: minmax(0, 1fr) 16.5rem; align-items: start; gap: 3rem; }
  .layout__side { position: sticky; top: 1rem; }
}

.sidelist { border-top: 2px solid var(--ink); padding-top: .75rem; }
.sidelist + .sidelist { margin-top: 1.75rem; }
.sidelist h2 { font-size: .875rem; margin: 0 0 .625rem; }
.sidelist ul, .sidelist ol { list-style: none; margin: 0; padding: 0; font-size: .9375rem; }
.sidelist li { margin-bottom: .4375rem; }
.sidelist p { font-size: .875rem; color: var(--ink-2); }

/* --- Sources -------------------------------------------------------------- */

.sources { list-style: none; margin: 0; padding: 0; }
.sources li { padding: .75rem 0; border-top: 1px solid var(--line); }
.sources li:first-child { border-top: 0; }
.sources__kind {
  display: inline-block; font-size: .75rem; color: var(--ink-2); font-weight: 500;
  border: 1px solid var(--line-2); border-radius: 3px; padding: 0 .375rem; margin-left: .375rem;
}
.sources__kind--official { color: var(--brand); border-color: var(--brand); background: var(--brand-tint); }

/* --- FAQ ------------------------------------------------------------------ */

.faq { border-top: 1px solid var(--line); }
.faq details { border-bottom: 1px solid var(--line); }
.faq summary {
  cursor: pointer; padding: .875rem 0; min-height: var(--tap);
  font-weight: 600; list-style: none; display: flex; align-items: center; gap: .75rem;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::before {
  content: ""; flex: 0 0 auto; width: .4375rem; height: .4375rem;
  border-right: 2px solid var(--brand); border-bottom: 2px solid var(--brand);
  transform: rotate(-45deg); transition: transform .12s linear;
}
.faq details[open] summary::before { transform: rotate(45deg); }
.faq__answer { padding: 0 0 1rem 1.1875rem; max-width: var(--read); }
.faq__answer > :last-child { margin-bottom: 0; }

/* --- Forms ---------------------------------------------------------------- */

.question { border: 0; padding: 1.5rem 0; margin: 0; min-width: 0; position: relative; }
.question:first-of-type { padding-top: .5rem; }
.question + .question::before { content: ""; position: absolute; inset: 0 0 auto 0; height: 1px; background: var(--line); }
.question legend { font-family: var(--display); font-weight: 700; font-size: 1.0625rem; padding: 0; margin-bottom: .75rem; }
.question ul { list-style: none; margin: 0; padding: 0; display: grid; gap: .5rem; }
@media (min-width: 40rem) { .question ul { grid-template-columns: repeat(2, 1fr); } }
.question li { margin: 0; }
.question li label {
  display: flex; align-items: center; gap: .625rem; min-height: var(--tap);
  padding: .5rem .75rem; cursor: pointer; font-size: .9375rem;
  border: 1px solid var(--line-2); border-radius: var(--r); background: var(--paper);
}
.question li label:hover { border-color: var(--brand); }
.question input[type="radio"] { accent-color: var(--brand); width: 1.125rem; height: 1.125rem; flex: 0 0 auto; }
.question .hint { display: block; margin-top: .625rem; font-size: .875rem; color: var(--ink-2); max-width: 52ch; }

.field { margin-top: .875rem; }
.question .field:first-of-type { margin-top: 0; }
.field label { display: block; font-weight: 600; font-size: .875rem; margin-bottom: .3125rem; }
.field select, .field input[type="text"], .field input[type="email"], .field textarea {
  width: 100%; min-height: var(--tap); padding: .5rem .75rem; font: inherit; font-size: .9375rem;
  border: 1px solid var(--line-2); border-radius: var(--r); background: var(--paper); color: var(--ink);
}
.field textarea { min-height: 9rem; resize: vertical; line-height: 1.55; }
.field .hint { display: block; margin-top: .3125rem; font-size: .8125rem; color: var(--ink-2); }

/* The honeypot. Off-screen rather than display:none, which a bot reads as a
   field it should skip. A reader never reaches it: it is aria-hidden and out
   of the tab order. */
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.errorlist { list-style: none; margin: .375rem 0 0; padding: 0; color: var(--no); font-size: .875rem; font-weight: 600; }

.filters { display: grid; gap: .875rem; }
@media (min-width: 42rem) { .filters { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 62rem) { .filters { grid-template-columns: repeat(4, 1fr); } }
.filters .field { margin-top: 0; }

/* --- Results -------------------------------------------------------------- */

/* The eligibility form posts to #results, so the browser lands the reader on
   the answers. scroll-behavior on <html> makes that a smooth move. */
#results { scroll-margin-top: 1rem; }
#results:focus { outline: none; }
.result { border-top: 1px solid var(--line); padding: 1.125rem 0; }
.result__head { display: flex; justify-content: space-between; gap: .75rem; align-items: baseline; flex-wrap: wrap; }
.result__head h3 { margin: 0; font-size: 1.0625rem; }
.result__head h3 a { color: var(--ink); text-decoration: none; }
.result__head h3 a:hover { color: var(--brand); text-decoration: underline; }
.verdict { font-size: .8125rem; font-weight: 600; white-space: nowrap; }
.verdict--likely { color: var(--yes); }
.verdict--possible { color: var(--maybe); }
.verdict--unclear { color: var(--unsure); }
.verdict--missing { color: var(--no); }
.reasons { list-style: none; margin: .625rem 0 0; padding: 0; font-size: .875rem; color: var(--ink-2); }
.reasons li { margin-bottom: .25em; }
.reasons b { font-weight: 600; color: var(--ink); }
.result .actions { margin-top: .875rem; }

/* --- Checklist ------------------------------------------------------------ */

.tick { display: flex; gap: .75rem; padding: .8125rem 0; border-top: 1px solid var(--line); align-items: flex-start; }
.tick input[type="checkbox"] { width: 1.25rem; height: 1.25rem; margin-top: .15rem; flex: 0 0 auto; accent-color: var(--brand); }
.tick label { font-weight: 500; cursor: pointer; }
.tick .say { display: block; font-weight: 400; font-size: .875rem; color: var(--ink-2); margin-top: .125rem; }
.tick input:checked ~ div label { color: var(--ink-3); text-decoration: line-through; }

/* --- Sticky apply --------------------------------------------------------- */

.applybar {
  position: sticky; bottom: 0; z-index: 20; background: var(--paper);
  border-top: 1px solid var(--line-2);
  padding: .625rem 0 calc(.625rem + env(safe-area-inset-bottom));
}
.applybar > div { display: flex; gap: .75rem; align-items: center; }
.applybar .btn { flex: 1 1 auto; }
@media (min-width: 48rem) { .applybar .btn { flex: 0 0 auto; margin-left: auto; } }
.applybar__who { display: none; font-weight: 600; }
@media (min-width: 48rem) { .applybar__who { display: block; } }

/* --- Footer --------------------------------------------------------------- */

.foot { background: var(--ink); color: #cfd0d5; border-top: 1px solid var(--ink); margin-top: 3rem; padding: 2.75rem 0 2.5rem; font-size: .9375rem; }
.foot__brand { max-width: 30rem; margin-bottom: 2rem; }
.foot__brand p { margin: .75rem 0 0; color: #aeb0b7; }
.brand-lockup { display: inline-flex; align-items: center; gap: .7rem; text-decoration: none; }
.brand-lockup svg { display: block; width: 2.5rem; height: 2.5rem; flex: 0 0 auto; }
.brand-lockup__word { color: #fff; font: 700 1.65rem/1 var(--display); letter-spacing: -.04em; }
.brand-lockup:hover { text-decoration: none !important; }
.brand-lockup:hover .brand-lockup__word { color: #fff; }
.foot h2 { font-size: .875rem; margin: 0 0 .625rem; }
.foot ul { list-style: none; padding: 0; margin: 0; }
.foot li { margin-bottom: .4375rem; }
.foot h2 { color: #fff; }
.foot a { color: #fff; text-decoration: none; }
.foot a:hover { color: #fff; text-decoration: underline; }
.foot__fine { border-top: 1px solid #35363b; margin-top: 2rem; padding-top: 1.25rem; font-size: .8125rem; color: #aeb0b7; max-width: 76ch; }

/* --- Utilities ------------------------------------------------------------ */

.mt0 { margin-top: 0; }
.mb0 { margin-bottom: 0; }
.flow > * + * { margin-top: 1rem; }

@media print {
  .top, .foot, .applybar, .actions, .trail, .noprint { display: none !important; }
  body { background: #fff; font-size: 11pt; }
  .panel, .scroller, .record--panel { border-color: #999; }
  a[href^="http"]::after { content: " (" attr(href) ")"; font-size: 9pt; color: #555; }
}