/* The sweeping checker. Rides on the main site's tokens in ../styles.css —
   only what this page adds lives here. */

.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* ---------------------------------------------------------------- the ask */

.check-hero { padding: 72px 0 40px; }
.check-hero__inner { max-width: 720px; }
.check-hero h1 {
  font-family: 'Bricolage Grotesque', system-ui, sans-serif;
  font-size: clamp(38px, 7vw, 62px);
  line-height: 1.02; letter-spacing: -.02em; margin: 10px 0 0; color: var(--ink);
}
.check-hero__sub {
  font-size: 18px; line-height: 1.55; color: var(--ink-2);
  margin: 18px 0 0; max-width: 56ch;
}
.check-hero__note {
  font-size: 13px; color: var(--ink-3); margin: 16px 0 0; max-width: 52ch;
}

.check-form { display: flex; gap: 10px; margin-top: 28px; flex-wrap: wrap; }
.check-form__input {
  flex: 1 1 300px; min-width: 0;
  font: inherit; font-size: 17px; color: var(--ink);
  padding: 16px 18px;
  background: var(--surface);
  border: 1px solid var(--hairline);
  border-radius: var(--r-control);
  box-shadow: var(--sh-card);
}
.check-form__input:focus {
  outline: none; border-color: var(--brand);
  box-shadow: 0 0 0 3px var(--brand-soft);
}
.check-form__geo {
  margin-top: 12px; padding: 0; border: 0; background: none;
  font: inherit; font-size: 15px; color: var(--brand);
  text-decoration: underline; text-underline-offset: 3px; cursor: pointer;
}
.check-form__geo:disabled { opacity: .55; cursor: default; }

/* ------------------------------------------------------------- the answer */

.check-results { padding-top: 8px; padding-bottom: 24px; scroll-margin-top: 88px; }
.results__heading {
  font-family: 'Bricolage Grotesque', system-ui, sans-serif;
  font-size: 26px; margin: 0 0 4px; color: var(--ink);
}
.results__note { font-size: 14px; color: var(--ink-2); margin: 0 0 16px; }
.results__list { display: grid; gap: 16px; }

.block {
  background: var(--surface);
  border: 1px solid var(--hairline);
  border-radius: var(--r-card);
  box-shadow: var(--sh-card);
  padding: 22px;
}
.block__head h3 {
  font-family: 'Bricolage Grotesque', system-ui, sans-serif;
  font-size: 22px; margin: 0; color: var(--ink);
}
.block__range { font-size: 14px; color: var(--ink-2); margin: 4px 0 0; }

/* The posted flag leads, because it is what decides whether the schedule
   below it costs money. Colour carries urgency and nothing else. */
.verdict {
  margin: 18px 0; padding: 14px 16px;
  border-radius: var(--r-control);
  border: 1px solid transparent;
}
.verdict__tag {
  display: inline-block; font-size: 12px; font-weight: 700;
  letter-spacing: .08em; text-transform: uppercase; margin-bottom: 6px;
}
.verdict p { margin: 0; font-size: 15px; line-height: 1.5; }
/* Tokens, not fixed hex. The site follows the reader's system theme, and the
   first pass here hardcoded light-mode colours — which put dark green body text
   on a dark green card in dark mode, i.e. made the single most important
   sentence on the page unreadable for half the audience. */
.verdict--posted {
  background: var(--verdict-posted-bg);
  border-color: var(--verdict-posted-line);
  color: var(--verdict-posted-ink);
}
.verdict--posted .verdict__tag { color: var(--verdict-posted-tag); }
.verdict--unposted {
  background: var(--verdict-ok-bg);
  border-color: var(--verdict-ok-line);
  color: var(--verdict-ok-ink);
}
.verdict--unposted .verdict__tag { color: var(--verdict-ok-tag); }
.verdict strong { color: inherit; font-weight: 700; }

:root {
  --verdict-posted-bg:   #FDECEA;
  --verdict-posted-line: #F5C6C1;
  --verdict-posted-ink:  #7A1C15;
  --verdict-posted-tag:  #C2261C;
  --verdict-ok-bg:       #E2F0EC;
  --verdict-ok-line:     #BFDCD4;
  --verdict-ok-ink:      #0A4437;
  --verdict-ok-tag:      #0E6F5C;
  --notice-warn-bg:      #FEF8EC;
  --notice-warn-line:    #F0D9A8;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --verdict-posted-bg:   #2A1412;
    --verdict-posted-line: #5B2721;
    --verdict-posted-ink:  #FFD9D4;
    --verdict-posted-tag:  #FF7A6E;
    --verdict-ok-bg:       #102C26;
    --verdict-ok-line:     #1F4C42;
    --verdict-ok-ink:      #C9EFE4;
    --verdict-ok-tag:      #2ED3A7;
    --notice-warn-bg:      #2A2413;
    --notice-warn-line:    #4E4326;
  }
}

:root[data-theme="dark"] {
  --verdict-posted-bg:   #2A1412;
  --verdict-posted-line: #5B2721;
  --verdict-posted-ink:  #FFD9D4;
  --verdict-posted-tag:  #FF7A6E;
  --verdict-ok-bg:       #102C26;
  --verdict-ok-line:     #1F4C42;
  --verdict-ok-ink:      #C9EFE4;
  --verdict-ok-tag:      #2ED3A7;
  --notice-warn-bg:      #2A2413;
  --notice-warn-line:    #4E4326;
}

.sides { display: grid; gap: 10px; margin: 0 0 4px; }
.sides__row {
  display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap;
  padding: 10px 12px; border-radius: var(--r-control);
  background: var(--surface-raised); border: 1px solid var(--hairline);
}
.sides__label {
  margin: 0; font-size: 12px; font-weight: 700; letter-spacing: .06em;
  text-transform: uppercase; color: var(--ink-3); min-width: 88px;
}
.sides__when { margin: 0; font-size: 17px; color: var(--ink); }
.sides__when span { color: var(--ink-2); font-size: 14px; margin-left: 6px; }
.sides__note { margin: 2px 0 0; font-size: 13px; color: var(--ink-2); }

.block__label {
  font-size: 12px; font-weight: 700; letter-spacing: .08em;
  text-transform: uppercase; color: var(--ink-3); margin: 0 0 6px;
}
.block__next { margin: 0; font-size: 20px; color: var(--ink); }
.block__next strong { font-weight: 700; }
.block__next span { color: var(--ink-2); font-size: 15px; margin-left: 8px; }
.block__next--unknown strong { font-weight: 600; font-size: 17px; }
.block__later, .block__summary {
  margin: 6px 0 0; font-size: 14px; color: var(--ink-2);
}
.block__raw {
  margin: 16px 0 0; padding-top: 14px;
  border-top: 1px solid var(--hairline);
  font-size: 13px; color: var(--ink-2); line-height: 1.5;
}
.block__raw span {
  display: block; font-size: 11px; font-weight: 700; letter-spacing: .08em;
  text-transform: uppercase; color: var(--ink-3); margin-bottom: 3px;
}

.notice {
  background: var(--surface); border: 1px solid var(--hairline);
  border-radius: var(--r-card); padding: 22px; box-shadow: var(--sh-card);
}
.notice h3 {
  font-family: 'Bricolage Grotesque', system-ui, sans-serif;
  font-size: 20px; margin: 0 0 6px; color: var(--ink);
}
.notice p { margin: 0; font-size: 15px; line-height: 1.55; color: var(--ink-2); }
.notice--warn { border-color: var(--notice-warn-line); background: var(--notice-warn-bg); }

/* ----------------------------------------------------------- the context */

.check-explainer { padding: 32px 0 8px; }
.check-explainer__grid {
  display: grid; gap: 18px;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
}
.check-card {
  background: var(--surface-raised); border: 1px solid var(--hairline);
  border-radius: var(--r-card); padding: 24px;
}
.check-card h2 {
  font-family: 'Bricolage Grotesque', system-ui, sans-serif;
  font-size: 20px; margin: 0 0 10px; color: var(--ink);
}
.check-card p {
  margin: 0 0 10px; font-size: 15px; line-height: 1.6; color: var(--ink-2);
}
.check-card p:last-child { margin-bottom: 0; }

.check-cta { padding: 56px 0 72px; }
.check-cta__inner { max-width: 620px; }
.check-cta h2 {
  font-family: 'Bricolage Grotesque', system-ui, sans-serif;
  font-size: clamp(26px, 4vw, 34px); margin: 0 0 12px; color: var(--ink);
}
.check-cta p {
  font-size: 16px; line-height: 1.6; color: var(--ink-2); margin: 0 0 22px;
}

.check-footer__note {
  font-size: 13px; line-height: 1.6; color: var(--ink-3);
  max-width: 62ch; margin: 0 0 10px;
}
.check-footer__note a { color: var(--brand); }

@media (max-width: 640px) {
  .check-hero { padding: 48px 0 28px; }
  .check-form__input { flex-basis: 100%; }
  .check-form .btn { width: 100%; }
}