/* ── MuzzleCheck — shared site foundation ─────────────────────────────
   Design tokens, reset, and the furniture every page carries (banner,
   header, status strip, nav, footer).

   THIS FILE IS THE ONLY PLACE THE TOKENS LIVE. A second page that
   re-declares --ink or --fs-1 is how two pages quietly stop looking like
   one site. Page-specific components (the check console, the result
   cards, the About page's lists) stay inline in their own page.

   Palette: register paper, warm ink, ear-tag yellow, verdict colours.
   No-match is deliberately NEUTRAL grey — never green. */

:root{
  /* Warm-tinted neutrals — never pure black, never flat gray. */
  --paper:#FAFAF7;
  --ink:#211F1A;
  --ink-soft:#575349;
  --line:#DCDAD2;
  --tag:#FFCE31;
  --tag-deep:#8A6D07;
  --flag:#A61B12;
  --flag-bg:#FBEDEB;
  --maybe:#8A5A00;
  --maybe-bg:#FBF3E2;
  --none:#46505B;
  --none-bg:#EEF0F2;
  --wa:#1B7A43;
  --mono:ui-monospace,"Cascadia Mono",Consolas,"Courier New",monospace;
  --sans:-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  /* Strict modular type scale, ratio 1.25 on a 1rem base. */
  --fs-s:0.8rem;      /* 12.8px — labels, hints, footer */
  --fs-0:1rem;        /* 16px  — body */
  --fs-1:1.25rem;     /* 20px  — section headings, verdicts */
  --fs-2:1.5625rem;   /* 25px  — hero floor */
  --fs-3:2.441rem;    /* 39px  — hero ceiling */
  /* Spacing rhythm: tight inside a group, generous between groups. */
  --sp-1:8px; --sp-2:12px; --sp-3:20px; --sp-4:32px; --sp-5:52px;
}
@supports (color: oklch(0% 0 0)){
  :root{
    --paper:oklch(98.2% 0.004 95);
    --ink:oklch(22% 0.012 95);
    --ink-soft:oklch(42% 0.015 95);
    --tag:oklch(86.5% 0.17 92);
    --tag-deep:oklch(52% 0.11 92);
    --flag:oklch(45% 0.17 30);
    --none:oklch(41% 0.03 255);
  }
}

*{margin:0;padding:0;box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  background:var(--paper);color:var(--ink);
  font-family:var(--sans);font-size:16px;line-height:1.55;
}
::selection{background:var(--tag);color:var(--ink)}
input{caret-color:var(--ink);accent-color:var(--tag-deep)}
a{color:inherit;text-underline-offset:3px}
:focus-visible{outline:3px solid var(--ink);outline-offset:2px}
.wrap{max-width:680px;margin:0 auto;padding:0 20px}

/* Status banner — the site is honest about what is and isn't live. */
.preview{background:var(--tag);border-bottom:2px solid var(--ink);
  font:700 var(--fs-s) var(--sans);text-align:center;padding:var(--sp-1) 14px}

header{border-bottom:3px solid var(--ink);background:var(--paper)}
/* Wraps rather than overflows: on a narrow phone the nav drops to its own
   row (still right-aligned by the auto margin) instead of pushing past the
   page padding. No breakpoint needed — it wraps exactly when it must. */
/* Horizontal padding is repeated from .wrap on purpose: this shorthand
   overrides .wrap's, and without the 20px the header content sits flush
   against the screen edge while every other section is inset. */
.bar{display:flex;align-items:center;gap:var(--sp-2);padding:14px 20px;flex-wrap:wrap}
.roundel{flex:0 0 auto;width:44px;height:44px}
/* Shrinkable, so it takes the space left beside the roundel and lets its
   subtitle wrap — rather than claiming its full content width and pushing
   the roundel onto a row of its own. */
.wordmark{font-weight:900;font-size:var(--fs-1);letter-spacing:-.02em;line-height:1.05;
  flex:1 1 0;min-width:0}
.wordmark a{text-decoration:none}
.wordmark small{display:block;font-weight:600;font-size:var(--fs-s);letter-spacing:.1em;
  text-transform:uppercase;color:var(--ink-soft)}

/* Nav — two pages, so it is a row of words, not a menu system. */
.nav{margin-left:auto;display:flex;gap:var(--sp-2);flex-wrap:wrap;justify-content:flex-end}
.nav a{font:700 var(--fs-s) var(--sans);letter-spacing:.08em;text-transform:uppercase;
  color:var(--ink-soft);text-decoration:none;padding:4px 0;border-bottom:2px solid transparent;
  white-space:nowrap}
.nav a:hover{color:var(--ink);border-bottom-color:var(--line)}
.nav a[aria-current="page"]{color:var(--ink);border-bottom-color:var(--tag-deep)}
/* On a phone the nav takes a row of its own. Without this it competes with
   the wordmark for the same row and squeezes it to a couple of characters. */
@media (max-width:560px){
  .nav{flex:1 0 100%;margin-left:0;justify-content:flex-start;
    border-top:1px solid var(--line);padding-top:6px}
}

.strip{background:var(--ink);color:var(--paper);font-family:var(--mono);
  font-size:var(--fs-s);padding:7px 0;overflow:hidden;white-space:nowrap}
.strip .wrap{display:flex;gap:28px}
.strip b{color:var(--tag);font-weight:700}

h2{font-weight:900;font-size:var(--fs-1);letter-spacing:-.01em;margin-bottom:6px;text-wrap:balance}

footer{margin:var(--sp-5) 0 0;border-top:3px solid var(--ink);padding:var(--sp-3) 0 40px;
  font-size:var(--fs-s);color:var(--ink-soft)}
footer .fline{display:flex;flex-wrap:wrap;gap:6px 22px;margin-bottom:10px}
footer b{color:var(--ink)}
footer .mono{font-family:var(--mono)}
footer a{color:var(--ink)}