/* Tokens come from the v3 brand work (color-and-type.md). Contrast for every text pair is in README.md. */
@font-face{
  font-family:'Atkinson Hyperlegible Next';
  src:url('fonts/AtkinsonHyperlegibleNext-latin.woff2') format('woff2');
  font-weight:200 800;
  font-style:normal;
  font-display:swap;
}
:root{
  color-scheme:light dark;
  --brand:#24456B;
  --on-brand:#FAF7F2;
  --on-brand-muted:#D5DEE8;
  --ink:#1B2430;
  --ink-muted:#5B6672;
  --paper:#FAF7F2;
  --card:#FFFFFF;
  --link:#24456B;
  /* rgba fallback; the color-mix value is applied below only where supported. A custom property cannot fall back by cascade. */
  --line:rgba(91,102,114,.22);
  --aware:#1F6E8C;
  --ready:#A46000;
  --act:#8E1B14;
  --on-act:#FFFFFF;
  --clear:#5B6672;
  --display:'Atkinson Hyperlegible Next',-apple-system,BlinkMacSystemFont,system-ui,sans-serif;
  --body:-apple-system,BlinkMacSystemFont,'SF Pro Text',system-ui,'Segoe UI',Roboto,sans-serif;
  --gutter:1.25rem;
  --measure:40rem;
}
@media (min-width:48rem){:root{--gutter:2.5rem}}
@media (min-width:72rem){:root{--gutter:4rem}}
@media (prefers-color-scheme:dark){
  :root{
    --ink:#E8EDF2;
    --ink-muted:#9AA6B2;
    --paper:#121820;
    --card:#1B2430;
    --link:#A9C4E4;
    --line:rgba(154,166,178,.24);
    --aware:#6FC3E8;
    --ready:#FFCB7A;
    --act:#F0604F;
    --on-act:#121820;
    --clear:#9AA6B2;
  }
}

@supports (color:color-mix(in srgb,red,blue)){
  :root{--line:color-mix(in srgb,#5B6672 22%,transparent)}
  @media (prefers-color-scheme:dark){:root{--line:color-mix(in srgb,#9AA6B2 24%,transparent)}}
}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%}
body{margin:0;background:var(--paper);color:var(--ink);font-family:var(--body);font-size:1.125rem;line-height:1.6;overflow-wrap:break-word}
h1,h2,h3{font-family:var(--display);font-weight:700;line-height:1.2;letter-spacing:-.005em;margin:0}
h2{font-size:clamp(1.6rem,1.2rem + 1.8vw,2.25rem)}
h3{font-size:1.25rem}
p,ul,ol{margin:0}
a{color:var(--link);text-underline-offset:.18em;text-decoration-thickness:.08em}
a:hover{text-decoration-thickness:.16em}
:focus-visible{outline:3px solid var(--link);outline-offset:3px;border-radius:2px}
img,svg{max-width:100%}
strong{font-weight:700;color:var(--ink)}

/* The gutter lives on .wrap as left and right padding only, so section padding never overrides it. */
.wrap{max-width:68rem;margin:0 auto;padding-left:max(var(--gutter),env(safe-area-inset-left,0px));padding-right:max(var(--gutter),env(safe-area-inset-right,0px))}

.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}
.skip{position:absolute;left:.75rem;top:-10rem;z-index:20;background:var(--card);color:var(--link);padding:.6rem 1rem;border:2px solid var(--link);border-radius:.5rem;font-weight:700}
.skip:focus{top:.75rem}

/* Site header: brand and three links. The links wrap instead of hiding on narrow screens and at 200% zoom. */
.site-head{border-bottom:1px solid var(--line);background:var(--paper)}
.site-head .wrap{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:.5rem 1.5rem;padding-top:.85rem;padding-bottom:.85rem}
.brand{display:inline-flex;align-items:center;gap:.6rem;color:var(--ink);text-decoration:none;font-family:var(--display);font-weight:700;font-size:1.2rem}
.brand picture{display:flex}
.brand img{width:2rem;height:2rem;border-radius:22.37%;box-shadow:0 0 0 1px rgba(27,36,48,.18)}
/* The icon tile matches the header background in both themes, so a hairline shows the rounded tile edge. */
@media (prefers-color-scheme:dark){.brand img{box-shadow:0 0 0 1px rgba(232,237,242,.28)}}
.site-nav ul{list-style:none;padding:0;display:flex;flex-wrap:wrap;gap:.25rem 1.25rem}
.site-nav a{display:inline-block;padding:.35rem 0;color:var(--ink-muted);font-weight:600;text-decoration:none}
.site-nav a:hover{color:var(--link);text-decoration:underline}
.site-nav a[aria-current="page"]{color:var(--ink);text-decoration:underline;text-decoration-thickness:.12em}

/* Hero: brand slate in both themes, so it reads the same day and night. */
.hero{background:var(--brand);color:var(--on-brand)}
.hero .wrap{padding-top:clamp(3rem,8vw,6rem);padding-bottom:clamp(3rem,8vw,6rem);display:grid;gap:2rem;align-items:center}
@media (min-width:52rem){.hero .wrap{grid-template-columns:minmax(0,1fr) auto}}
.hero h1{font-size:clamp(2.25rem,1.6rem + 3.2vw,3.75rem);letter-spacing:-.015em}
.hero .subtitle{font-family:var(--display);font-size:clamp(1.25rem,1rem + 1vw,1.6rem);font-weight:600;margin-top:.5rem}
.hero .lead{max-width:var(--measure);margin-top:1.25rem;color:var(--on-brand)}
/* Plain text, not a pill: nothing to tap until the app is listed. */
.hero .status{margin-top:1.75rem;font-family:var(--display);font-size:1.2rem;font-weight:700;color:var(--on-brand)}
.hero .note{margin-top:.9rem;color:var(--on-brand-muted);font-size:1rem}
.hero a{color:var(--on-brand)}
.hero :focus-visible{outline-color:var(--on-brand)}
.hero picture{display:block;justify-self:start}
/* The dark icon tile (#121820) is close in lightness to the hero band, so a hairline keeps the tile edge visible. Decorative, not meaning-bearing. */
/* 22.37% is the iOS app icon corner proportion; the art itself stays square. */
.hero-icon{display:block;width:clamp(7rem,18vw,11rem);height:auto;border-radius:22.37%;box-shadow:0 .5rem 2rem rgba(0,0,0,.25)}
@media (prefers-color-scheme:dark){.hero-icon{box-shadow:0 0 0 1px rgba(232,237,242,.3),0 .5rem 2rem rgba(0,0,0,.35)}}

section .wrap{padding-top:clamp(2.75rem,6vw,4.5rem);padding-bottom:clamp(2.75rem,6vw,4.5rem)}
section + section{border-top:1px solid var(--line)}
.eyebrow{font-family:var(--display);font-size:.9rem;letter-spacing:.08em;text-transform:uppercase;font-weight:700;color:var(--ink-muted);margin-bottom:.5rem}
.intro{max-width:var(--measure);color:var(--ink-muted);margin-top:.9rem}

.grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,16rem),1fr));gap:1rem;margin-top:1.75rem;padding:0;list-style:none}
.card{background:var(--card);border:1px solid var(--line);border-radius:1rem;padding:1.4rem}
.card h3{margin-bottom:.5rem}
.card p{color:var(--ink-muted)}

/* Severity tiers. Each badge is the v8 tier shape with a hazard glyph inside, drawn from the inline sprite.
   The badge is aria-hidden; the tier word next to it carries the meaning and always identifies the tier.
   Heads up and All clear share the same ring and differ by color (teal vs gray) and by word. */
.sprite{position:absolute;width:0;height:0;overflow:hidden}
.tiers{list-style:none;padding:0;margin-top:1.75rem;display:grid;gap:1rem}
.tier{background:var(--card);border:1px solid var(--line);border-radius:1rem;padding:1.25rem 1.4rem;display:grid;grid-template-columns:auto minmax(0,1fr);align-items:start;column-gap:1.1rem}
.badge{width:3.75rem;height:3.75rem;flex:none}
.badge use{fill:currentColor}
.tier-aware{color:var(--aware)}
.tier-ready{color:var(--ready)}
.tier-act{color:var(--act)}
.tier-act .badge .glyph{fill:var(--on-act)}
.tier-clear{color:var(--clear)}
.tier-label{font-size:1.35rem;color:inherit}
/* The only red in the system is the Act now fill, so its word is set in ink. */
.tier-act .tier-label{color:var(--ink)}
.tier .meaning{color:var(--ink);margin-top:.3rem}
.tier blockquote{margin:.6rem 0 0;padding-left:.9rem;border-left:3px solid var(--line);color:var(--ink-muted)}
/* At narrow widths and high zoom the badge sits above the text instead of squeezing it. */
@media (max-width:24rem){.tier{grid-template-columns:minmax(0,1fr);row-gap:.75rem}}

/* Key to the hazard pictures: neutral color, so no tier is implied. */
.key-title{margin-top:2.25rem}
.glyph-keys{list-style:none;padding:0;margin-top:1rem;display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,10.5rem),1fr));gap:.6rem 1rem}
.glyph-keys li{display:flex;align-items:center;gap:.6rem;color:var(--ink)}
.glyph-key{width:2rem;height:2rem;flex:none;fill:var(--ink);overflow:visible}
.glyph-key use{fill:inherit}

ul.plain{list-style:none;padding:0;margin-top:1.4rem;display:grid;gap:.8rem;max-width:var(--measure)}
ul.plain li{position:relative;padding-left:1.5rem;color:var(--ink-muted)}
ul.plain li::before{content:"";position:absolute;left:.2rem;top:.6em;width:.5rem;height:.5rem;border-radius:2px;background:var(--ink-muted)}

.site-foot{border-top:1px solid var(--line)}
.site-foot .wrap{padding-top:2rem;padding-bottom:2.5rem;color:var(--ink-muted);font-size:1rem;display:grid;gap:.75rem}
.site-foot ul{list-style:none;padding:0;display:flex;flex-wrap:wrap;gap:.25rem 1.25rem}
.site-foot a{color:var(--ink-muted)}
.site-foot a:hover{color:var(--link)}

/* Long-form pages (privacy, support): one readable column. */
.doc .wrap{max-width:calc(var(--measure) + 2 * var(--gutter));padding-top:clamp(2.5rem,6vw,4rem);padding-bottom:clamp(2.5rem,6vw,4rem)}
.doc h1{font-size:clamp(2rem,1.5rem + 2.4vw,2.75rem)}
.doc h2{font-size:1.4rem;margin-top:2.4rem}
.doc h3{font-size:1.15rem;margin-top:1.6rem}
.doc p,.doc li{color:var(--ink-muted);margin-top:.75rem}
.doc ul,.doc ol{padding-left:1.25rem}
.doc .dated{font-size:1rem;margin-top:.5rem}
.doc table{border-collapse:collapse;width:100%;margin-top:1rem;font-size:1rem}
.doc th,.doc td{text-align:left;vertical-align:top;padding:.6rem .75rem .6rem 0;border-bottom:1px solid var(--line)}
.doc th{font-family:var(--display);color:var(--ink)}
.doc td{color:var(--ink-muted)}
.table-scroll{overflow-x:auto}

/* Draft marker: neutral on purpose. Tier colors carry alert meaning and are not reused for page status. */
.draft{margin-top:1.25rem;padding:1rem 1.2rem;border:2px dashed var(--ink-muted);border-radius:.75rem;background:var(--card)}
.draft p{margin-top:0;color:var(--ink)}
.draft p + p{margin-top:.5rem;color:var(--ink-muted)}