/* ==========================================================================
   MRC Miracle design system
   Palette derived from the MRC Miracle seal (dominant ink #4F2B92).
   Type: Nunito (rounded display) + Atkinson Hyperlegible (text), both self-hosted.
   ========================================================================== */

/* ---------- fonts ---------- */
@font-face {
  font-family: 'Atkinson Hyperlegible';
  src: url('../assets/fonts/atkinson-400.woff2') format('woff2');
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Atkinson Hyperlegible';
  src: url('../assets/fonts/atkinson-700.woff2') format('woff2');
  font-weight: 700; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Nunito';
  src: url('../assets/fonts/nunito-var.woff2') format('woff2-variations'),
       url('../assets/fonts/nunito-var.woff2') format('woff2');
  font-weight: 400 800; font-style: normal; font-display: swap;
}

/* ---------- tokens ---------- */
:root {
  --violet-900: #2a1550;
  --violet-800: #3d1f75;
  --violet-700: #4f2b92;   /* the seal */
  --violet-600: #6341a8;
  --violet-400: #9b83d4;
  --violet-200: #ddd2f2;
  --violet-100: #ece5f9;
  --violet-050: #f7f4fd;

  --brand: var(--violet-700);
  --brand-strong: var(--violet-800);
  --brand-soft: var(--violet-050);
  --brand-tint: var(--violet-100);
  --on-brand: #ffffff;

  --paper: #ffffff;
  --paper-2: #faf8fd;
  --paper-3: #f2eef9;
  --ink: #17131f;
  --ink-2: #4a4358;
  --ink-3: #6e6780;
  --line: #e6e0f1;
  --line-strong: #cec4e3;

  --smoke-ink: #8a4a05;
  --smoke-bg: #fff6e8;
  --smoke-line: #e5b775;
  --quake-ink: #97231f;
  --quake-bg: #feedec;
  --quake-line: #eeaaa6;

  --focus: #1568d4;
  /* Green is the "done / prepared" channel, the counterpart to the amber smoke
     and red earthquake channels. It never appears as decoration - see
     docs/DESIGN.md rule 1. */
  --ok: #1c6b45;
  --ok-bg: #e9f6ef;
  --ok-line: #8ccbaa;

  --font-display: 'Nunito', ui-rounded, 'SF Pro Rounded', 'Segoe UI Rounded', system-ui, sans-serif;
  --font-text: 'Atkinson Hyperlegible', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;

  --step--1: .875rem;
  --step-0: 1.0625rem;
  --step-1: 1.1875rem;
  --step-2: 1.375rem;
  --step-3: clamp(1.5rem, 4.5vw, 1.9rem);
  --step-4: clamp(2rem, 8vw, 3rem);

  --s1: .25rem; --s2: .5rem; --s3: .75rem; --s4: 1rem;
  --s5: 1.5rem; --s6: 2rem; --s7: 3rem; --s8: 4rem;

  --r-sm: 10px; --r: 16px; --r-lg: 22px; --r-pill: 999px;
  --maxw: 42rem;

  --shadow-1: 0 1px 2px rgba(42,21,80,.06), 0 1px 3px rgba(42,21,80,.05);
  --shadow-2: 0 4px 10px rgba(42,21,80,.07), 0 12px 28px rgba(42,21,80,.06);
  --shadow-brand: 0 6px 18px rgba(79,43,146,.22);

  /* Fixed backdrop wash. Deliberately faint: it must never come near the
     contrast of text sitting on top of it. */
  --veil-1: rgba(79, 43, 146, .20);
  --veil-2: rgba(28, 107, 69, .13);
  --veil-3: rgba(155, 131, 212, .18);
  --veil-grain: rgba(42, 21, 80, .035);
}

@media (prefers-color-scheme: dark) {
  :root {
    --brand: #b49bee;
    --brand-strong: #c9b6f5;
    --brand-soft: #201a30;
    --brand-tint: #2a2340;
    --on-brand: #16111f;

    --paper: #131019;
    --paper-2: #1a1624;
    --paper-3: #241f31;
    --ink: #f3f0f8;
    --ink-2: #bcb4cc;
    --ink-3: #948ca6;
    --line: #2f2940;
    --line-strong: #443c5c;

    --smoke-ink: #ffc274;
    --smoke-bg: #2b1f10;
    --smoke-line: #7a5a2a;
    --quake-ink: #ff9f9a;
    --quake-bg: #2c1615;
    --quake-line: #7d3b38;

    --focus: #7ab6ff;
    --ok: #63c99a;
    --ok-bg: #10251a;
    --ok-line: #2f7d55;

    --shadow-1: 0 1px 2px rgba(0,0,0,.4);
    --shadow-2: 0 6px 20px rgba(0,0,0,.45);
    --shadow-brand: 0 6px 18px rgba(0,0,0,.5);
    --veil-1: rgba(155, 131, 212, .17);
    --veil-2: rgba(99, 201, 154, .10);
    --veil-3: rgba(79, 43, 146, .30);
    --veil-grain: rgba(255, 255, 255, .022);
  }
}

/* Cross-document view transitions. Native, one declaration, and simply
   ignored where unsupported - navigation still works exactly as before. */
@view-transition { navigation: auto; }

@media (prefers-reduced-motion: reduce) {
  ::view-transition-group(*),
  ::view-transition-old(*),
  ::view-transition-new(*) { animation: none !important; }
}

/* ---------- base ---------- */
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

/* ---------- fixed backdrop ----------
   A still wash that does not scroll, with one very slow drift on top of it, so
   the page has depth while the content is what actually moves. Two rules keep
   it safe on the devices this site is built for:

   only `transform` is animated, so it stays on the compositor and costs no
   layout or paint; and it is switched off entirely under
   prefers-reduced-motion, where it becomes a plain static wash. */
html { background: var(--paper); }

body::before {
  content: "";
  position: fixed;
  inset: -30%;
  z-index: -2;
  pointer-events: none;
  background:
    radial-gradient(46rem 34rem at 12% 8%,  var(--veil-1), transparent 60%),
    radial-gradient(40rem 30rem at 88% 26%, var(--veil-3), transparent 58%),
    radial-gradient(44rem 32rem at 72% 88%, var(--veil-2), transparent 60%);
  animation: veil-drift 64s ease-in-out infinite alternate;
  will-change: transform;
}

/* A second layer, drifting the other way at a different speed, so the movement
   never looks like one sheet sliding about. Grain on top keeps the gradients
   from banding on a wide screen. */
body::after {
  content: "";
  position: fixed;
  inset: -30%;
  z-index: -1;
  pointer-events: none;
  opacity: .85;
  background-image:
    radial-gradient(30rem 24rem at 30% 72%, var(--veil-3), transparent 62%),
    radial-gradient(var(--veil-grain) 1px, transparent 1px);
  background-size: auto, 3px 3px;
  animation: veil-drift-2 91s ease-in-out infinite alternate;
  will-change: transform;
}

@keyframes veil-drift {
  from { transform: translate3d(-3%, -2%, 0) scale(1); }
  to   { transform: translate3d(3%, 2.5%, 0) scale(1.08); }
}
@keyframes veil-drift-2 {
  from { transform: translate3d(2.5%, 1.5%, 0) scale(1.05); }
  to   { transform: translate3d(-2.5%, -2%, 0) scale(1); }
}
@media (prefers-reduced-motion: reduce) {
  body::before, body::after { animation: none; transform: none; }
}

body {
  margin: 0;
  background: transparent;
  font-family: var(--font-text);
  font-size: var(--step-0);
  line-height: 1.6;
  color: var(--ink);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

.wrap { max-width: var(--maxw); margin: 0 auto; padding: 0 var(--s4); }

/* ---------- container width, by device ----------

   42rem is a good reading measure and exactly right on a phone, but it was
   applied at every size, so a laptop got a 672px column inside a 1440px
   window - 47% content, 53% empty margin (measured, not estimated). The
   container now grows in steps with the viewport.

   Prose does NOT grow with it. A paragraph running the full width of a wide
   monitor is hard to read, so text blocks that sit directly in the container
   keep their own measure below; cards, grids and the dashboard take the extra
   room instead, which is what actually wanted it. */
@media (min-width: 48rem)  { :root { --maxw: 46rem; } }   /* small tablet      */
@media (min-width: 64rem)  { :root { --maxw: 58rem; } }   /* laptop            */
@media (min-width: 80rem)  { :root { --maxw: 68rem; } }   /* large laptop      */
@media (min-width: 100rem) { :root { --maxw: 76rem; } }   /* desktop monitor   */

/* Side gutters grow a little too, so a wide window does not look like the
   content is pinned to the glass. */
@media (min-width: 64rem) { .wrap { padding: 0 var(--s6); } }

/* Keep lines readable once the container is wider than a comfortable measure.
   Direct children only: text inside a card is already constrained by the card. */
@media (min-width: 64rem) {
  main .wrap > p,
  main .wrap > ul,
  main .wrap > ol,
  main .wrap > .lede { max-width: 46rem; }
}

/* The serif is now reserved for display moments - the one h1 per page, the
   wordmark and the big numbers. Section headings run in the sans, which is the
   same face as the body text, so a page reads as one voice instead of
   alternating between two. */
h1, h2, h3 {
  font-family: var(--font-display);
  font-weight: 800;
  letter-spacing: -.012em;
  line-height: 1.2;
  color: var(--ink);
  text-wrap: balance;
}
h1 {
  font-family: var(--font-display);
  font-weight: 800; letter-spacing: -.02em; line-height: 1.15;
  font-size: var(--step-4); margin: 0 0 var(--s3);
}
h2 { font-size: var(--step-3); margin: var(--s7) 0 var(--s3); }
h3 { font-size: var(--step-2); margin: var(--s5) 0 var(--s2); }

/* Top-level section headings sit under a rule, the way a printed notice
   divides its sections. Scoped to direct children of the page wrap so panel
   and card headings are untouched. */
main .wrap > h2 {
  border-top: 1.5px solid var(--ink);
  padding-top: var(--s3);
  margin-top: var(--s7);
}
main .wrap > h2:first-child { margin-top: var(--s5); }
p { margin: 0 0 var(--s4); }
.lede { font-size: var(--step-1); color: var(--ink-2); line-height: 1.55; text-wrap: pretty; }
.small { font-size: var(--step--1); color: var(--ink-3); }

a { color: var(--brand); text-underline-offset: .18em; text-decoration-thickness: .07em; }
a:hover { color: var(--brand-strong); }

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

/* eyebrow label */
.eyebrow {
  font-family: var(--font-text);
  font-size: .74rem; font-weight: 700; text-transform: uppercase;
  letter-spacing: .12em; color: var(--ink-3); margin: 0 0 var(--s3);
}

/* ---------- header ---------- */
.site-head {
  background: var(--paper);
  border-bottom: 1px solid var(--line);
  padding: var(--s3) 0;
  position: sticky; top: 0; z-index: 50;
  backdrop-filter: saturate(1.4) blur(8px);
}
.head-row { display: flex; align-items: center; gap: var(--s3); justify-content: space-between; }
.brand { display: flex; align-items: center; gap: .6rem; text-decoration: none; color: var(--ink); min-width: 0; }
.brand-mark { width: 38px; height: 38px; flex: 0 0 auto; border-radius: 50%; }
.brand-text { display: flex; flex-direction: column; min-width: 0; }
.brand-name {
  font-family: var(--font-display);
  font-weight: 700; font-size: 1.08rem; line-height: 1.1; letter-spacing: -.01em;
  /* "MRC Miracle Health Corps" is four words in a lockup that also carries two
     seals, the language switch and sign-in. Left alone it broke into three
     ragged lines on a phone and cost 19px of header height. Balanced, it falls
     as "MRC Miracle / Health Corps", and it drops a step below 26rem where the
     tagline is hidden anyway. */
  text-wrap: balance;
}
@media (max-width: 26rem) { .brand-name { font-size: 1rem; } }
.brand-sub { font-size: .68rem; color: var(--ink-3); line-height: 1.25; display: none; }
@media (min-width: 26rem) { .brand-sub { display: block; } }

.langswitch { display: flex; gap: 2px; background: var(--paper-3); border-radius: var(--r-pill); padding: 3px; flex: 0 0 auto; }
.langswitch button {
  font: inherit; font-size: .78rem; font-weight: 700; letter-spacing: .02em;
  padding: .3rem .6rem; min-height: 32px; border: 0; border-radius: var(--r-pill);
  background: transparent; color: var(--ink-3); cursor: pointer;
}
.langswitch button[aria-pressed="true"] { background: var(--brand); color: var(--on-brand); box-shadow: var(--shadow-1); }

/* ---------- nav ---------- */
.subnav { border-bottom: 1px solid var(--line); background: var(--paper); overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none; }
.subnav::-webkit-scrollbar { display: none; }
.subnav ul { display: flex; gap: var(--s1); list-style: none; margin: 0; padding: var(--s2) var(--s4); }
.subnav a {
  display: block; white-space: nowrap; text-decoration: none; color: var(--ink-2);
  font-size: .9rem; font-weight: 600; padding: .45rem .75rem; border-radius: var(--r-pill);
  min-height: 38px; line-height: 1.75;
}
.subnav a:hover { background: var(--paper-3); color: var(--ink); }
.subnav a[aria-current="page"] { background: var(--brand-tint); color: var(--brand); }
@media (prefers-color-scheme: dark) { .subnav a[aria-current="page"] { color: var(--brand-strong); } }

main { padding-bottom: var(--s8); }

/* ---------- hero ---------- */
.hero {
  position: relative; overflow: hidden;
  background:
    radial-gradient(120% 90% at 12% 0%, var(--violet-800) 0%, transparent 60%),
    linear-gradient(155deg, var(--violet-700) 0%, var(--violet-900) 100%);
  color: #fff;
  padding: var(--s7) 0 var(--s6);
  margin-bottom: var(--s6);
}
.hero::after {
  content: ""; position: absolute; inset: auto -20% -55% auto;
  width: 320px; height: 320px; border-radius: 50%;
  border: 44px solid rgba(255,255,255,.055); pointer-events: none;
}
.hero > .wrap { position: relative; z-index: 1; }
.hero .eyebrow { color: rgba(255,255,255,.72); }
.hero h1 { color: #fff; margin-bottom: var(--s4); }
.hero .lede { color: rgba(255,255,255,.86); margin-bottom: 0; }

/* ---------- right now ---------- */
.rn-zone { padding: var(--s5) 0 var(--s2); }
.rn-label { font-size: .74rem; text-transform: uppercase; letter-spacing: .12em; color: var(--ink-3); margin: 0 0 var(--s3); font-weight: 700; }
.hero .rn-label { color: rgba(255,255,255,.72); }
.rn-row { display: grid; gap: var(--s3); }

.rn-btn {
  position: relative; display: block; width: 100%; text-align: left;
  font: inherit; font-weight: 700; font-size: 1.12rem; line-height: 1.25;
  padding: var(--s4) 3rem var(--s4) var(--s4);
  border-radius: var(--r); border: 2px solid transparent; cursor: pointer;
  min-height: 64px; box-shadow: var(--shadow-2);
  transition: transform .14s ease, box-shadow .14s ease;
}
.rn-btn small { display: block; font-weight: 400; font-size: .8rem; opacity: .8; margin-top: .15rem; }
.rn-btn::after {
  content: ""; position: absolute; right: 1.1rem; top: 50%; width: 9px; height: 9px;
  border-right: 2.5px solid currentColor; border-bottom: 2.5px solid currentColor;
  transform: translateY(-50%) rotate(-45deg); opacity: .55;
}
.rn-btn:hover { transform: translateY(-2px); }
.rn-btn:active { transform: translateY(0); }
.rn-smoke { background: var(--smoke-bg); color: var(--smoke-ink); border-color: var(--smoke-line); }
.rn-quake { background: var(--quake-bg); color: var(--quake-ink); border-color: var(--quake-line); }
.rn-hint { font-size: .8rem; color: var(--ink-3); margin: 0 0 var(--s2); }

.rn-panel { border: 2px solid; border-radius: var(--r); padding: var(--s4); margin-bottom: var(--s5); box-shadow: var(--shadow-2); }
.rn-panel[hidden] { display: none; }
.rn-panel.smoke { border-color: var(--smoke-line); background: var(--smoke-bg); }
.rn-panel.quake { border-color: var(--quake-line); background: var(--quake-bg); }
.rn-panel h2 { margin: 0 0 var(--s1); font-size: var(--step-3); }
.rn-panel.smoke h2 { color: var(--smoke-ink); }
.rn-panel.quake h2 { color: var(--quake-ink); }
.rn-panel .sub { font-weight: 700; margin: 0 0 var(--s4); color: var(--ink-2); }
.rn-panel ol { margin: 0 0 var(--s4); padding: 0; list-style: none; counter-reset: step; }
.rn-panel li {
  counter-increment: step; position: relative;
  padding: 0 0 var(--s4) 2.4rem; margin: 0;
}
.rn-panel li::before {
  content: counter(step); position: absolute; left: 0; top: -1px;
  width: 1.7rem; height: 1.7rem; border-radius: 50%;
  display: grid; place-items: center;
  font-size: .82rem; font-weight: 700; font-family: var(--font-text);
  background: var(--paper); border: 2px solid currentColor;
}
.rn-panel.smoke li::before { color: var(--smoke-ink); }
.rn-panel.quake li::before { color: var(--quake-ink); }
.rn-panel li:last-of-type { padding-bottom: 0; }
.call911 {
  font-weight: 700; padding: var(--s3) var(--s4); border-radius: var(--r-sm);
  background: var(--paper); border: 2px solid currentColor; margin: var(--s4) 0;
}
.rn-close {
  font: inherit; font-weight: 700; padding: .65rem 1.1rem; min-height: 46px; cursor: pointer;
  border: 1.5px solid var(--line-strong); background: var(--paper); color: var(--ink); border-radius: var(--r-sm);
}

/* ---------- buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
  font: inherit; font-weight: 700; text-decoration: none; text-align: center;
  padding: .8rem 1.25rem; min-height: 50px; line-height: 1.3;
  border-radius: var(--r-sm); cursor: pointer;
  background: var(--brand); color: var(--on-brand); border: 2px solid var(--brand);
  box-shadow: var(--shadow-brand);
  transition: transform .14s ease, background .14s ease, box-shadow .14s ease;
}
.btn:hover { background: var(--brand-strong); border-color: var(--brand-strong); color: var(--on-brand); transform: translateY(-1px); }
.btn:active { transform: translateY(0); }
.btn-secondary {
  background: var(--paper); color: var(--ink); border-color: var(--line-strong); box-shadow: var(--shadow-1);
}
.btn-secondary:hover { background: var(--paper-3); color: var(--ink); border-color: var(--line-strong); }
.btn-block { display: flex; width: 100%; }
/* Full width is right on a phone. Once the container grows, a button that
   still fills it becomes a 990px slab (measured on the wound page at 1440px),
   which reads as a banner rather than something to press. */
@media (min-width: 48rem) { .btn-block { max-width: 24rem; margin-inline: auto; } }
.btn[disabled], .btn[aria-disabled="true"] { opacity: .55; cursor: default; box-shadow: none; transform: none; }

/* ---------- cards: a ruled index, not a grid of boxes ----------
   Almanac register. Hairline rules and typographic weight carry the
   structure; the whole row is the tap target on a phone. */
.cards { display: grid; gap: 0; border-top: 1.5px solid var(--ink); }
.card {
  position: relative;
  display: grid; grid-template-columns: 2.75rem 1fr;
  column-gap: var(--s4); row-gap: 0;
  align-items: start;
  border: 0; border-bottom: 1px solid var(--line); border-radius: var(--r);
  background: none; box-shadow: none;
  padding: var(--s5) var(--s3);
  margin: 0 calc(var(--s3) * -1);
  transition: background .16s ease;
}
.card:hover { transform: none; box-shadow: none; background: var(--paper-2); }
/* The mark holds column one; every piece of text stacks in column two.
   Without this, grid auto-placement drops the paragraph into the mark's
   column and squeezes it to the mark's width. */
.card > .card-icon { grid-column: 1; grid-row: 1 / -1; }
.card > :not(.card-icon) { grid-column: 2; }
.card h3 { margin: 0 0 var(--s2); font-size: var(--step-2); }
.card p { margin: 0 0 var(--s3); font-size: .95rem; color: var(--ink-2); }

/* A drawn keyline mark, not a filled app tile. */
.card-icon {
  width: 2.75rem; height: 2.75rem; border-radius: var(--r-sm); display: grid; place-items: center;
  background: none; border: 1.5px solid var(--brand); color: var(--brand); margin: .1rem 0 0;
}
.card-icon svg { width: 22px; height: 22px; }
@media (prefers-color-scheme: dark) { .card-icon { color: var(--brand-strong); border-color: var(--brand-strong); } }

/* The call to action reads as a link and stretches over the whole row, so the
   tap target is the entry rather than a small button inside it. */
.card .btn {
  display: inline-flex; width: auto; justify-content: flex-start;
  background: none; border: 0; box-shadow: none; color: var(--brand);
  padding: .35rem 0; min-height: 32px; font-weight: 700;
  text-decoration: underline; text-underline-offset: .18em;
}
@media (prefers-color-scheme: dark) { .card .btn { color: var(--brand-strong); } }
.card .btn::after {
  content: ""; width: 7px; height: 7px; margin-left: .1rem;
  border-right: 2px solid currentColor; border-bottom: 2px solid currentColor;
  transform: rotate(-45deg);
}
.card .btn:hover { background: none; transform: none; color: var(--brand-strong); }
.card .btn:not([aria-disabled="true"])::before { content: ""; position: absolute; inset: 0; }
.card .btn[aria-disabled="true"] { text-decoration: none; color: var(--ink-3); opacity: 1; }
.card .btn[aria-disabled="true"]::after { opacity: .5; }

.card-wound { background: none; }
.card-wound .card-icon { border-style: dashed; }

/* stat strip: a ruled ledger, read left to right */
.stats {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(96px, 1fr));
  gap: 0; margin: var(--s6) 0; text-align: left;
  border-top: 1.5px solid var(--ink); border-bottom: 1px solid var(--line-strong);
}
.stat { padding: var(--s4) var(--s3); background: none; border: 0; border-left: 1px solid var(--line); border-radius: var(--r-sm); }
.stat:first-child { border-left: 0; padding-left: 0; }
.stat b {
  display: block; font-family: var(--font-display);
  font-size: clamp(1.7rem, 8vw, 2.3rem); font-weight: 700; color: var(--brand);
  line-height: 1; letter-spacing: -.02em; font-variant-numeric: tabular-nums lining-nums;
}
@media (prefers-color-scheme: dark) { .stat b { color: var(--brand-strong); } }
.stat span { font-size: .74rem; color: var(--ink-3); line-height: 1.3; display: block; margin-top: .35rem; }

/* ---------- preparedness check ----------
   Sits between the emergency panels and the planning tools, so it is never in
   the way of someone who opened this page because something is happening. */
.prepbox {
  border: 1px solid var(--line-strong);
  border-left: 4px solid var(--brand);
  border-radius: var(--r);
  background: var(--paper-2);
  padding: var(--s5) var(--s4);
  margin: var(--s6) 0;
}
.prepbox[hidden] { display: none; }
.prepbox h2 { margin: 0 0 var(--s2); font-size: var(--step-2); }
.prepbox > .small { margin-bottom: var(--s5); }
.prepbox legend { font-weight: 700; margin-bottom: var(--s2); line-height: 1.35; }
.prepbox .field:last-of-type { margin-bottom: var(--s4); }
.prep-thanks { font-weight: 700; color: var(--ok); margin-bottom: var(--s3); }
.prep-fixes { margin: var(--s2) 0 0; padding-left: 1.1rem; }
.prep-fixes li { margin-bottom: var(--s2); }
.prep-fixes a { font-weight: 700; display: inline-block; padding: .25rem 0; }
.prep-allset {
  border: 1px solid var(--ok-line); background: var(--ok-bg); color: var(--ok);
  border-radius: var(--r-sm); padding: var(--s3) var(--s4); font-weight: 700; margin: 0;
}

/* ---------- impact tables ----------
   Wide content must scroll inside its own container, never make the page
   scroll sideways. */
.impact-table { width: 100%; border-collapse: separate; border-spacing: 0; margin: var(--s3) 0 var(--s5); font-size: .92rem; }
.impact-table th, .impact-table td { text-align: left; padding: var(--s3) var(--s2); border-bottom: 1px solid var(--line); vertical-align: top; }
.impact-table thead th { font-size: .72rem; text-transform: uppercase; letter-spacing: .09em; color: var(--ink-3); border-bottom: 1.5px solid var(--ink); }
.impact-table tbody th { font-weight: 700; }
.impact-table td { font-variant-numeric: tabular-nums lining-nums; }

/* ---------- wound check ---------- */
.notice-strong { border-width: 2px; border-left-width: 5px; font-weight: 600; }

#wound-file { position: absolute; width: 1px; height: 1px; opacity: 0; }
#wound-file:focus-visible + * , label[for="wound-file"]:focus-within { outline: 3px solid var(--focus); }
.wound-preview-img {
  display: block; width: 100%; max-height: 18rem; object-fit: contain;
  border-radius: var(--r); border: 1px solid var(--line); background: var(--paper-3);
  margin: var(--s4) 0 var(--s2);
}
.wound-red { margin: 0 0 var(--s4); padding-left: 1.2rem; }
.wound-red li { margin-bottom: var(--s2); font-weight: 600; }

.wound-answer {
  border: 2px solid var(--brand); border-radius: var(--r);
  background: var(--brand-soft); padding: var(--s4); margin: var(--s4) 0;
}
.wound-answer.is-unsure { border-color: var(--line-strong); background: var(--paper-3); }
.wound-eyebrow {
  font-size: .72rem; font-weight: 700; text-transform: uppercase; letter-spacing: .1em;
  color: var(--ink-3); margin: 0 0 var(--s2);
}
.wound-label {
  font-family: var(--font-display); font-weight: 800;
  font-size: clamp(1.5rem, 7vw, 2rem); line-height: 1.15; margin: 0;
  color: var(--brand);
}
@media (prefers-color-scheme: dark) { .wound-label { color: var(--brand-strong); } }
.is-unsure .wound-label { color: var(--ink-2); }
.wound-confidence {
  margin: var(--s2) 0 0; font-weight: 700;
  font-variant-numeric: tabular-nums lining-nums; color: var(--ink-2);
}
.wound-tips { margin: 0 0 var(--s4); padding-left: 1.2rem; }
.wound-tips li { margin-bottom: var(--s2); }

/* ---------- forms ---------- */
.field { margin-bottom: var(--s5); }
.field > label, .field > legend { display: block; font-weight: 700; margin-bottom: var(--s2); padding: 0; font-size: 1.02rem; }
input[type="text"], input[type="number"], input[type="tel"], select {
  font: inherit; width: 100%; padding: .75rem .85rem; min-height: 50px;
  border: 1.5px solid var(--line-strong); border-radius: var(--r-sm);
  background: var(--paper); color: var(--ink);
}
input:focus, select:focus { border-color: var(--brand); }
fieldset { border: 0; margin: 0; padding: 0; }
.choices { display: flex; gap: var(--s2); }
.choices label {
  flex: 1; text-align: center; border: 1.5px solid var(--line-strong); border-radius: var(--r-sm);
  padding: .7rem .5rem; min-height: 50px; cursor: pointer; background: var(--paper);
  line-height: 2; font-weight: 600; transition: background .12s ease, border-color .12s ease;
}
.choices input { position: absolute; opacity: 0; width: 0; height: 0; }
.choices label:has(input:checked) { background: var(--brand-tint); border-color: var(--brand); color: var(--brand); }
@media (prefers-color-scheme: dark) { .choices label:has(input:checked) { color: var(--brand-strong); } }
.choices label:has(input:focus-visible) { outline: 3px solid var(--focus); outline-offset: 2px; }
.err { color: var(--quake-ink); font-weight: 700; font-size: .9rem; margin-top: var(--s2); }
.err[hidden] { display: none; }

/* ---------- notices ---------- */
.notice {
  border: 1px solid var(--smoke-line); border-left: 4px solid var(--smoke-line);
  background: var(--smoke-bg); color: var(--ink);
  padding: var(--s3) var(--s4); border-radius: var(--r-sm); font-size: .92rem; margin-bottom: var(--s5);
}
.notice strong { display: block; margin-bottom: .15rem; }

/* ---------- live status ---------- */
.live-now {
  border: 1px solid var(--violet-200); background: var(--brand-soft);
  border-radius: var(--r); padding: var(--s4); margin-bottom: var(--s5); box-shadow: none;
}
@media (prefers-color-scheme: dark) { .live-now { border-color: var(--line-strong); } }
.live-now h2 { margin: 0 0 var(--s2); font-size: var(--step-2); }
.live-now p { margin: 0 0 var(--s3); font-size: .92rem; color: var(--ink-2); }
.live-211 { background: var(--paper); border: 1px solid var(--line); border-radius: var(--r-sm); padding: var(--s3) var(--s4); }
.live-links { margin: var(--s3) 0 0; padding-left: 1.1rem; font-size: .92rem; }
.live-links li { margin-bottom: var(--s2); }
.live-links a { display: inline-block; padding: .25rem 0; }

/* ---------- live air quality ---------- */
.aqi {
  border: 2px solid; border-radius: var(--r); padding: var(--s4);
  margin-bottom: var(--s5); box-shadow: none;
}
.aqi[hidden] { display: none; }
.aqi-head { font-size: .82rem; font-weight: 700; text-transform: uppercase;
  letter-spacing: .06em; margin: 0 0 var(--s2); opacity: .85; }
.aqi-row { display: flex; align-items: baseline; gap: var(--s3); margin-bottom: var(--s2); }
.aqi-num {
  font-family: var(--font-display);
  font-size: clamp(2.4rem, 12vw, 3.2rem); font-weight: 700; line-height: 1; letter-spacing: -.03em;
  font-variant-numeric: tabular-nums lining-nums;
}
.aqi-cat { font-weight: 700; font-size: var(--step-1); line-height: 1.2; }
.aqi-do { margin: 0 0 var(--s2); font-size: .95rem; }
.aqi-action { font-weight: 700; margin: 0 0 var(--s2); font-size: .9rem; }
.aqi-meta { margin: 0; opacity: .8; font-size: .78rem; }
.aqi-none { margin: 0; }

/* EPA AQI bands. Colours are darkened from the official scale so text on them
   still meets contrast; the number is never the only signal - the category
   name and the advice line always say the same thing in words. */
.aqi-good      { border-color: #1c6b45; background: #e8f6ee; color: #12482f; }
.aqi-moderate  { border-color: #9a7b00; background: #fdf6dd; color: #5d4a00; }
.aqi-usg       { border-color: #b25a00; background: #fff0e0; color: #7a3d00; }
.aqi-unhealthy { border-color: #b3231d; background: #fdeceb; color: #7d1814; }
.aqi-very      { border-color: #6b2a91; background: #f4ebfa; color: #4a1d66; }
.aqi-hazardous { border-color: #7a1229; background: #fbe9ed; color: #570d1d; }

@media (prefers-color-scheme: dark) {
  .aqi-good      { border-color: #2f7d55; background: #10251a; color: #7fd7a5; }
  .aqi-moderate  { border-color: #8a7100; background: #241f0c; color: #f0d264; }
  .aqi-usg       { border-color: #a5560b; background: #271807; color: #ffb46b; }
  .aqi-unhealthy { border-color: #a83029; background: #2a1211; color: #ff9c95; }
  .aqi-very      { border-color: #7b3aa3; background: #1f1229; color: #d3a8f0; }
  .aqi-hazardous { border-color: #8d2038; background: #260d13; color: #f2909f; }
}

/* ---------- clean air results ---------- */
.site-card {
  border: 1px solid var(--line); border-radius: var(--r); padding: var(--s4);
  margin-bottom: var(--s3); background: var(--paper-2); box-shadow: none;
}
.site-card h3 { margin: 0 0 var(--s1); font-size: var(--step-1); }

/* A site Unit 503 has switched on for the current smoke event. Amber is the
   smoke channel and means only that - see docs/DESIGN.md rule 1. The badge
   says so in words too, so the colour is never the only signal. */
.site-card-active { border-color: var(--smoke-line); border-left: 4px solid var(--smoke-line); }
.site-badge {
  display: inline-block; margin: 0 0 var(--s2);
  font-size: .7rem; font-weight: 700; text-transform: uppercase; letter-spacing: .09em;
  color: var(--smoke-ink); background: var(--smoke-bg);
  border: 1px solid var(--smoke-line); border-radius: var(--r-pill);
  padding: .2rem .6rem;
}
.site-dist { font-size: .82rem; color: var(--ink-3); font-weight: 600; margin: 0 0 var(--s3); }
.site-card dl { margin: 0; font-size: .92rem; display: grid; grid-template-columns: 5.5rem 1fr; gap: var(--s2) var(--s3); }
.site-card dt { color: var(--ink-3); font-weight: 700; font-size: .82rem; }
.site-card dd { margin: 0; }
.tags { list-style: none; display: flex; flex-wrap: wrap; gap: var(--s1); margin: var(--s3) 0 0; padding: 0; }
.tags li { font-size: .76rem; background: var(--paper-3); border: 1px solid var(--line); border-radius: var(--r-pill); padding: .22rem .6rem; }

/* Directions: the visitor chooses the map app they already have. A ruled row
   of plain links, not three competing buttons - the branch name above is the
   thing being scanned, and these are the follow-up. */
.dirs {
  display: flex; flex-wrap: wrap; align-items: baseline;
  gap: 0 var(--s4); margin-top: var(--s3);
  padding-top: var(--s3); border-top: 1px solid var(--line);
}
.dirs-label {
  flex: 1 0 100%;
  font-size: .72rem; font-weight: 700; text-transform: uppercase;
  letter-spacing: .1em; color: var(--ink-3); margin-bottom: .1rem;
}
.dirs-link {
  font-weight: 700; font-size: .92rem;
  padding: .55rem 0; display: inline-block;
  text-underline-offset: .18em;
}
#map { height: 340px; border-radius: var(--r); border: 1px solid var(--line); margin-bottom: var(--s4); background: var(--paper-3); }
#map[hidden] { display: none; }

/* ---------- checklist ---------- */
.water-box {
  border: 1px solid var(--violet-200); border-radius: var(--r);
  background: linear-gradient(160deg, var(--brand-tint), var(--paper-2));
  padding: var(--s5) var(--s4); margin-bottom: var(--s5); text-align: center;
}
@media (prefers-color-scheme: dark) { .water-box { border-color: var(--line-strong); } }
.water-box h3 { margin: 0 0 var(--s2); font-size: var(--step-1); color: var(--ink-2); }
.water-n {
  font-family: var(--font-display);
  font-size: clamp(2.6rem, 13vw, 3.6rem); font-weight: 700; line-height: 1;
  color: var(--brand); letter-spacing: -.03em;
  font-variant-numeric: tabular-nums lining-nums;
}
@media (prefers-color-scheme: dark) { .water-n { color: var(--brand-strong); } }
.water-math {
  font-size: .84rem; color: var(--ink-3);
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  margin: var(--s2) 0 var(--s3);
}

.checklist { list-style: none; margin: 0 0 var(--s3); padding: 0; border: 1px solid var(--line); border-radius: var(--r); overflow: hidden; background: var(--paper-2); }
.checklist li { border-bottom: 1px solid var(--line); }
.checklist li:last-child { border-bottom: 0; }
.checklist label { display: flex; gap: var(--s3); align-items: flex-start; padding: var(--s3) var(--s4); cursor: pointer; min-height: 46px; }
.checklist label:hover { background: var(--paper-3); }
.checklist input[type="checkbox"] { width: 24px; height: 24px; margin: .15rem 0 0; flex: 0 0 auto; accent-color: var(--brand); }
.ck-name { font-weight: 700; }
.ck-qty { font-weight: 700; color: var(--brand); white-space: nowrap; }
@media (prefers-color-scheme: dark) { .ck-qty { color: var(--brand-strong); } }
.ck-note { display: block; font-size: .86rem; color: var(--ink-3); font-weight: 400; margin-top: .1rem; }

/* A ticked item is a thing this household now has. Green says so, and the
   strikethrough says it again without relying on colour. */
.checklist label:has(input:checked) { background: var(--ok-bg); }
.checklist label:has(input:checked) .ck-name { color: var(--ok); text-decoration: line-through; text-decoration-thickness: .08em; }
.checklist label:has(input:checked) .ck-qty { color: var(--ok); }

/* ---------- checklist progress ---------- */
.progress { margin: 0 0 var(--s5); }
.progress-text { font-size: .9rem; font-weight: 700; color: var(--ink-2); margin: 0 0 var(--s2); }
.progress-bar {
  height: 10px; border-radius: var(--r-pill); background: var(--paper-3);
  border: 1px solid var(--line); overflow: hidden;
}
.progress-bar span {
  display: block; height: 100%; width: 0;
  background: linear-gradient(90deg, var(--violet-600), var(--brand));
  border-radius: var(--r-pill); transition: width .3s ease;
}
@media (prefers-color-scheme: dark) {
  .progress-bar span { background: linear-gradient(90deg, var(--violet-400), var(--brand)); }
}
@media (prefers-reduced-motion: reduce) { .progress-bar span { transition: none; } }
.progress.is-complete .progress-bar span { background: linear-gradient(90deg, var(--ok), var(--ok)); }
.progress.is-complete .progress-text { color: var(--ok); }

.progress-clear {
  font: inherit; font-size: .82rem; font-weight: 700; color: var(--ink-3);
  background: none; border: 0; padding: var(--s2) 0 0; cursor: pointer; text-decoration: underline;
}
.progress-clear[hidden] { display: none; }

/* ---------- save code ---------- */
.savebox {
  border: 1px solid var(--line); border-radius: var(--r); padding: var(--s5) var(--s4);
  margin: var(--s6) 0; background: var(--paper-2); box-shadow: none;
}
.code-display {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: clamp(1.7rem, 9vw, 2.2rem); font-weight: 700; letter-spacing: .14em;
  text-align: center; padding: var(--s4); background: var(--paper);
  border: 2px dashed var(--violet-200); border-radius: var(--r-sm);
  margin: var(--s3) 0; color: var(--brand); word-break: break-all;
}
@media (prefers-color-scheme: dark) { .code-display { border-color: var(--line-strong); color: var(--brand-strong); } }
.row { display: flex; gap: var(--s2); flex-wrap: wrap; }
.row > * { flex: 1 1 8rem; }

/* ---------- optional sign-in ---------- */
.authbox {
  margin-top: var(--s5); padding-top: var(--s4);
  border-top: 1px solid var(--line);
}
.authbox[hidden] { display: none; }
.authbox h3 { margin: 0 0 var(--s2); font-size: var(--step-1); }
.authbox p { margin: 0 0 var(--s3); }
.authbox .row { margin-top: var(--s3); }
.auth-providers { display: grid; gap: var(--s2); }

/* Coordinator view (admin.html) — internal, not part of the public site. */
.admin-row { display: flex; align-items: center; gap: var(--s3); justify-content: space-between; padding: var(--s3) var(--s4); }
.admin-row > div { min-width: 0; }
.admin-row .btn { flex: 0 0 auto; min-height: 44px; padding: .5rem .9rem; }
.auth-who {
  font-weight: 700; color: var(--ok); margin: 0 0 var(--s3);
  display: flex; align-items: center; gap: .5rem;
}

/* ---------- final question ---------- */
.askbox {
  border: 1px solid var(--violet-200); border-radius: var(--r); padding: var(--s5) var(--s4);
  margin: var(--s6) 0; background: var(--brand-soft);
}
@media (prefers-color-scheme: dark) { .askbox { border-color: var(--line-strong); } }
.askbox .checklist { background: var(--paper); }
.ask-done { font-weight: 700; color: var(--ok); font-size: var(--step-1); }

/* ---------- collapsible reference ---------- */
details.sect {
  border: 1px solid var(--line); border-radius: var(--r); margin-bottom: var(--s3);
  background: var(--paper-2); overflow: hidden;
}
details.sect > summary {
  font-weight: 700; font-size: var(--step-1);
  padding: var(--s4); cursor: pointer; list-style: none; min-height: 54px;
  display: flex; align-items: center; justify-content: space-between; gap: var(--s3);
}
details.sect > summary::-webkit-details-marker { display: none; }
details.sect > summary:hover { background: var(--paper-3); }
details.sect > summary::after {
  content: ""; flex: 0 0 auto; width: 10px; height: 10px;
  border-right: 2.5px solid var(--ink-3); border-bottom: 2.5px solid var(--ink-3);
  transform: rotate(45deg) translateY(-3px); transition: transform .18s ease;
}
details.sect[open] > summary::after { transform: rotate(-135deg) translateY(-3px); }
details.sect[open] > summary { border-bottom: 1px solid var(--line); background: var(--paper-3); }
.sect-body { padding: var(--s4); }
.sect-body p:last-child { margin-bottom: 0; }

/* ---------- footer ---------- */
.site-foot {
  border-top: 1px solid var(--line); background: var(--paper-2);
  padding: var(--s7) 0 var(--s8); font-size: .88rem; color: var(--ink-3);
}
.site-logo { display: block; width: 84px; height: 84px; margin-bottom: var(--s4); }
.site-foot .org { font-weight: 700; color: var(--ink); margin-bottom: var(--s3); line-height: 1.5; }
.footer-contact { margin-bottom: var(--s3); }
.footer-contact a { font-weight: 700; display: inline-block; padding: .3rem 0; }
.site-foot details a, .site-foot p a { display: inline-block; padding: .25rem 0; }
main p.small > a { display: inline-block; padding: .25rem 0; }
.footer-contact span { margin: 0 .35rem; color: var(--ink-3); }
.site-foot details { margin-top: var(--s3); border-top: 1px solid var(--line); padding-top: var(--s3); }
.site-foot summary { cursor: pointer; font-weight: 700; padding: var(--s2) 0; min-height: 34px; color: var(--ink-2); }

/* ---------- utilities ---------- */
.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-link { position: absolute; left: -9999px; }
.skip-link:focus { left: .5rem; top: .5rem; z-index: 100; background: var(--paper); padding: .6rem 1rem; border: 2px solid var(--focus); border-radius: var(--r-sm); }

/* ---------- reveal on scroll ----------
   Two implementations, in order of preference:

   1. A native scroll-driven animation where the browser supports it. It runs
      off the main thread and needs no JavaScript at all, so content is never
      waiting on a script to become visible.
   2. The IntersectionObserver path (`.is-in`) everywhere else.

   Both start from opacity 0, so the noscript rule in every page's head remains
   the backstop: if scripting is off AND scroll timelines are unsupported,
   everything is simply visible. */
.reveal { opacity: 0; transform: translateY(14px); transition: opacity .5s ease, transform .5s ease; }
.reveal.is-in { opacity: 1; transform: none; }

@supports (animation-timeline: view()) {
  .reveal {
    animation: reveal-in linear both;
    animation-timeline: view();
    animation-range: entry 0% cover 22%;
    transition: none;
  }
  /* If the observer got there first, do not fight it. */
  .reveal.is-in { animation: none; opacity: 1; transform: none; }
}
@keyframes reveal-in {
  from { opacity: 0; transform: translateY(14px); }
  to   { opacity: 1; transform: none; }
}

@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1; transform: none; transition: none; animation: none; }
}

/* ---------- offline ----------
   A quiet, permanent marker rather than a dismissable toast: if the network is
   down during an emergency, that fact should stay on screen. */
.is-offline .site-head::after {
  content: "Offline — showing your saved copy";
  display: block;
  margin-top: var(--s2);
  font-size: .72rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
  color: var(--smoke-ink); background: var(--smoke-bg);
  border: 1px solid var(--smoke-line); border-radius: var(--r-pill);
  padding: .25rem .7rem; text-align: center;
}
html:lang(es).is-offline .site-head::after { content: "Sin conexión — mostrando su copia guardada"; }

/* ---------- two-column layout on real screens ----------
   The reading measure stays narrow, because long lines are harder to read and
   this site is read under stress. What changes on a wide screen is that the
   secondary panels move beside the content instead of far below it, so the
   save code and sign-in are reachable without scrolling past a long checklist,
   and the window is not mostly empty margin.

   Below this width nothing applies: the aside is a plain block in DOM order. */
@media (min-width: 64rem) {
  .kit-layout {
    max-width: 66rem;
    display: grid;
    grid-template-columns: minmax(0, 1fr) 21rem;
    column-gap: var(--s7);
    align-items: start;
  }
  .kit-layout > h1,
  .kit-layout > .lede,
  .kit-layout > #kit-load-err { grid-column: 1 / -1; }
  .kit-layout > form,
  .kit-layout > #kit-result { grid-column: 1; min-width: 0; }
  .kit-layout > .kit-side {
    grid-column: 2;
    grid-row: 3 / span 2;
    position: sticky;
    /* clears the sticky site header */
    top: 5.5rem;
  }
  .kit-side > section { margin-top: 0; }
  .kit-side > section + section { margin-top: var(--s5); }
}

/* ---------- wider screens ---------- */
@media (min-width: 40rem) {
  body { font-size: 1.125rem; }
  .card { grid-template-columns: 3.25rem 1fr; padding: var(--s5) var(--s4); margin: 0 calc(var(--s4) * -1); }
  .card-icon { width: 3.25rem; height: 3.25rem; }
  .rn-row { grid-template-columns: 1fr 1fr; }
  .brand-mark { width: 44px; height: 44px; }
  .hero { padding: var(--s8) 0 var(--s7); }
}

/* ---------- print ---------- */
@media print {
  body::before, body::after { display: none !important; }
  :root {
    --paper: #fff; --paper-2: #fff; --paper-3: #fff; --ink: #000; --ink-2: #222; --ink-3: #444;
    --line: #999; --line-strong: #666; --brand: #000; --brand-tint: #fff; --brand-soft: #fff;
    --shadow-1: none; --shadow-2: none; --shadow-brand: none;
  }
  .site-head, .subnav, .site-foot, .savebox, .askbox, .no-print,
  .rn-zone, .rn-panel, #map, .live-now, .hero, .stats { display: none !important; }
  body { font-size: 11pt; }
  .wrap { max-width: none; padding: 0; }
  .checklist { border: 1pt solid #000; }
  .checklist input[type="checkbox"] { -webkit-appearance: none; appearance: none; border: 1.5pt solid #000; border-radius: 2pt; }
  .checklist li { break-inside: avoid; }
  h2, h3 { break-after: avoid; }
  .water-box { border: 1.5pt solid #000; }
  a[href]::after { content: ""; }
  .print-foot { display: block !important; margin-top: var(--s5); padding-top: var(--s2); border-top: 1pt solid #000; font-size: 9pt; }
}
.print-foot { display: none; }

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

/* ==========================================================================
   Wound-first home
   The wound check is the landing page's whole reason to exist, so it gets the
   hero rather than a card. The tool sits on a paper panel INSIDE the violet
   hero: the surrounding field stays brand-dark, while the thing you actually
   operate reads as ordinary page furniture at full text contrast.
   ========================================================================== */
.hero-wound { padding-bottom: var(--s7); }
.hero-wound h1 { margin-bottom: var(--s3); }
.hero-wound .lede { margin-bottom: var(--s5); max-width: 34rem; }

.wound-stage {
  position: relative;
  background: var(--paper);
  color: var(--ink);
  border-radius: var(--r-lg);
  padding: var(--s5) var(--s4) var(--s4);
  box-shadow: var(--shadow-2);
}
/* Everything inside the stage is on paper, so inherit page ink rather than
   the hero's white-on-violet. */
.wound-stage .small { color: var(--ink-3); }

.wound-cta-row { margin: 0 0 var(--s2); }
/* The card's own padding is the space above its heading. An h2 carrying its
   usual top margin as the first child added ~49px on top of that, which read
   as a gap rather than as padding. */
.wound-stage > :first-child { margin-top: 0; }
.btn-hero {
  width: 100%;
  font-size: var(--step-2);
  padding: var(--s4) var(--s5);
  min-height: 60px;
  border-radius: var(--r);
  box-shadow: var(--shadow-brand);
}
.wound-privacy { margin: 0 0 var(--s4); text-align: center; }

/* Focus ring for the photo button.
   The input is visually hidden, so the ring has to be drawn on the label. The
   previous rule used "#wound-file:focus-visible + *", which matches the
   element AFTER the input - but the label comes BEFORE it, so nothing was
   ever highlighted and keyboard users got no focus indicator at all.
   :has() makes this independent of source order. */
:has(> #wound-file:focus-visible) > label[for="wound-file"] {
  outline: 3px solid var(--focus);
  outline-offset: 3px;
}

.hero-disclaim {
  margin: var(--s5) 0 var(--s3);
  padding-top: var(--s4);
  border-top: 1px solid var(--line);
  font-size: .92rem;
  color: var(--ink-2);
  line-height: 1.55;
}
.hero-disclaim strong { color: var(--ink); }
.hero-links { margin: 0; display: flex; flex-wrap: wrap; gap: .35rem 1.25rem; align-items: center; }
.hero-links a { white-space: nowrap; }
.hero-links a { color: var(--brand); font-weight: 700; }

/* Two tools rather than five cards. On a wide screen they sit side by side;
   the hairline register from .cards still carries the structure. */
@media (min-width: 40rem) {
  .cards-2 { grid-template-columns: 1fr 1fr; column-gap: var(--s6); }
  .cards-2 .card { margin-inline: 0; }
}

.footer-links { display: flex; flex-wrap: wrap; gap: .45rem; justify-content: center; }

/* The hero panel must not glow through the fixed backdrop when printing. */
@media print {
  .hero-wound { background: none; color: #000; padding: 0; }
  .hero-wound h1, .hero-wound .lede, .hero-wound .eyebrow { color: #000; }
  .wound-stage { box-shadow: none; border: 1px solid #999; }
}

/* The folded remainder of the kit list. Styled as a quiet secondary block so
   it reads as "there is more if you want it", not as unfinished work. */
.kit-extras {
  margin: var(--s5) 0 0;
  padding: var(--s4);
  border: 1px solid var(--line);
  border-radius: var(--r);
  background: var(--paper-2);
}
.kit-extras > summary {
  cursor: pointer; font-weight: 700; font-family: var(--font-display);
  color: var(--brand); min-height: 24px; padding: var(--s1) 0;
}
.kit-extras > summary:focus-visible { outline: 3px solid var(--focus); outline-offset: 3px; }
.kit-extras[open] > summary { margin-bottom: var(--s3); }
.kit-extras > p.small { margin: 0 0 var(--s3); }
.kit-extras h3:first-of-type { margin-top: 0; }
@media (prefers-color-scheme: dark) { .kit-extras > summary { color: var(--brand-strong); } }

/* ---------- the photo picker ----------
   Four routes in - the native picker, drag and drop, paste, and (desktop only)
   the camera. js/wound.js decides which of them this device actually has and
   writes the hint to match; the CSS just has to make the extra affordances
   read as secondary to the one big button. */
.wound-alt { margin: var(--s3) 0 0; text-align: center; }
.wound-alt .btn { width: auto; }
.wound-alt .btn[hidden] { display: none; }
.picker-hint { margin: var(--s3) 0 0; text-align: center; color: var(--ink-3); }

/* The whole stage is the drop target, not just the button. */
.wound-stage.is-dropping {
  outline: 3px dashed var(--brand);
  outline-offset: -6px;
  background: var(--brand-soft);
}
.wound-stage.is-dropping * { pointer-events: none; }

.wound-cam { margin: var(--s4) 0 0; }
.wound-cam[hidden] { display: none; }
.wound-cam video {
  width: 100%; max-height: 52vh; border-radius: var(--r);
  border: 1px solid var(--line-strong); background: #000; display: block;
  /* Mirrored would be wrong here: the reader is pointing the camera at an
     injury, not at their own face. */
}
.wound-cam-row { display: flex; flex-wrap: wrap; gap: var(--s3); margin: var(--s3) 0 0; }
.wound-cam-row .btn { width: auto; flex: 1 1 auto; }

/* ==========================================================================
   Site chrome v2 — a toolbar that does not move.
   Four separate things made the toolbar look like it changed on every click:
     1. every page had a different menu            (fixed in the HTML)
     2. the active tab was highlighted by JS late  (fixed in the HTML + app.js)
     3. the header was sticky but the toolbar was not, so scrolling slid it
        away under the header                      (toolbar now inside header)
     4. the page-wide view transition cross-faded the header along with the
        content                                    (fixed below)
   ========================================================================== */

/* The header (brand, language, toolbar) is one sticky box. */
.site-head { padding: 0; }
/* Vertical padding only. .wrap makes the side gutters with horizontal
   padding, and an earlier `padding: var(--s2) 0` here zeroed them - the
   logo and the sign-in pill were pressed against the edges of the screen. */
.head-row { padding-block: var(--s2); }
.head-actions { display: flex; align-items: center; gap: var(--s2); flex: 0 0 auto; }

/* 4. Name the header so a cross-document view transition captures it as its
   own group. Its old and new snapshots are identical on every page, so it
   stays exactly where it is while only the content transitions underneath. */
.site-head { view-transition-name: site-head; }
::view-transition-group(site-head) { animation: none; }
::view-transition-old(site-head),
::view-transition-new(site-head) { animation: none; mix-blend-mode: normal; }

/* The toolbar sits inside the header now, so it inherits the stickiness and
   drops its own border/background. */
.site-head .subnav {
  border-top: 1px solid var(--line);
  border-bottom: 0;
  background: transparent;
  overflow: visible;
}
/* Four equal slots that ALWAYS fit - no sideways scroll, which on a phone was
   another way the bar appeared to shift. Measured to fit at 320px in English
   and Spanish; the longest label is "Guía de heridas".

   Nav labels are kept SHORT on purpose. The font here is clamped by viewport,
   not by content, so a long label does not shrink the type - it wraps, and at
   375px a three-line label in a 44px box is what "Wound first aid guide"
   produced across all four slots. The full name lives on the page, in the
   <title> and on the home button, where there is room for it. */
.site-head .subnav ul {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 2px;
  padding-block: 4px;               /* block only - keep .wrap's side gutters */
  margin-inline: auto;
}
.site-head .subnav a {
  text-align: center;
  white-space: normal;
  line-height: 1.15;
  font-size: clamp(.74rem, 2.9vw, .9rem);
  padding: .5rem .25rem;
  min-height: 44px;                 /* comfortable tap target */
  display: flex; align-items: center; justify-content: center;
  border-radius: var(--r-sm);
}

/* ---------- home: big buttons ---------- */
.home h1 { margin: var(--s6) 0 var(--s2); }
.home .lede { margin: 0 0 var(--s5); }
.bigbtns { display: grid; gap: var(--s3); margin: 0 0 var(--s7); }
@media (min-width: 46rem) { .bigbtns { grid-template-columns: repeat(3, 1fr); } }
.bigbtn {
  display: flex; align-items: center; gap: var(--s4);
  padding: var(--s4) var(--s4);
  min-height: 84px;
  border: 1.5px solid var(--line-strong);
  border-radius: var(--r-lg);
  background: var(--paper);
  color: var(--ink);
  text-decoration: none;
  box-shadow: var(--shadow-1);
  transition: border-color .15s ease, box-shadow .15s ease, transform .15s ease;
}
.bigbtn:hover { border-color: var(--brand); box-shadow: var(--shadow-2); transform: translateY(-1px); }
.bigbtn:focus-visible { outline: 3px solid var(--focus); outline-offset: 3px; }
.bigbtn-icon {
  flex: 0 0 auto; width: 48px; height: 48px; border-radius: var(--r);
  display: grid; place-items: center;
  background: var(--brand-tint); color: var(--brand);
}
.bigbtn-icon svg { width: 26px; height: 26px; }
.bigbtn-text { display: flex; flex-direction: column; min-width: 0; }
.bigbtn-text b { font-family: var(--font-display); font-size: var(--step-1); line-height: 1.2; }
.bigbtn-text small { color: var(--ink-3); font-size: .88rem; margin-top: .15rem; }
/* The emergency button keeps the red channel it has everywhere else. */
.bigbtn-alert { border-color: var(--quake-line); background: var(--quake-bg); }
.bigbtn-alert .bigbtn-icon { background: #fff; color: var(--quake-ink); }
.bigbtn-alert .bigbtn-text b { color: var(--quake-ink); }
@media (prefers-color-scheme: dark) { .bigbtn-icon { color: var(--brand-strong); } }

/* ---------- survey ---------- */
.survey {
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  background: var(--paper-2);
  padding: var(--s5) var(--s4);
  margin: 0 0 var(--s6);
}
.survey h2 { margin: 0 0 var(--s1); font-size: var(--step-2); }
.survey > .small { margin: 0 0 var(--s4); }
.sv-q { margin: 0 0 var(--s5); }
.sv-q legend { font-weight: 700; font-size: 1rem; margin: 0 0 var(--s2); padding: 0; }
.sv-hint { margin: calc(var(--s1) * -1) 0 var(--s2); }

.sv-checks { display: grid; gap: var(--s2); }
.sv-checks label, .sv-radios label {
  display: flex; align-items: center; gap: .6rem;
  padding: .6rem .75rem; min-height: 44px;
  border: 1.5px solid var(--line); border-radius: var(--r);
  background: var(--paper); cursor: pointer;
}
.sv-checks input, .sv-radios input { width: 20px; height: 20px; flex: 0 0 auto; accent-color: var(--brand); margin: 0; }
.sv-checks label:has(input:checked), .sv-radios label:has(input:checked) {
  border-color: var(--brand); background: var(--brand-tint);
}
.sv-checks label:has(input:focus-visible), .sv-radios label:has(input:focus-visible) {
  outline: 3px solid var(--focus); outline-offset: 2px;
}

.sv-chips { display: flex; flex-wrap: wrap; gap: var(--s2); }

/* 1-5 scale: five equal targets in one row, ends labelled underneath. */
.sv-scale-row { display: grid; grid-template-columns: repeat(5, 1fr); gap: var(--s2); }
.sv-scale-row label { justify-content: center; padding: .5rem 0; font-weight: 700; }
.sv-scale-row input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.sv-scale-ends { display: flex; justify-content: space-between; margin-top: var(--s1); }

.sv-stepper { display: inline-flex; align-items: stretch; border: 1.5px solid var(--line-strong); border-radius: var(--r); overflow: hidden; background: var(--paper); }
.sv-step {
  font: inherit; font-size: 1.3rem; font-weight: 700; width: 48px; min-height: 48px;
  border: 0; background: var(--paper-3); color: var(--brand); cursor: pointer;
}
.sv-step:focus-visible { outline: 3px solid var(--focus); outline-offset: -3px; }
.sv-num {
  width: 4rem; border: 0; text-align: center; font: inherit; font-size: 1.15rem; font-weight: 700;
  background: var(--paper); color: var(--ink); -moz-appearance: textfield;
}
.sv-num::-webkit-outer-spin-button, .sv-num::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.sv-num:focus-visible { outline: 3px solid var(--focus); outline-offset: -3px; }

.sv-privacy { margin: var(--s4) 0 0; }
.sv-next { font-weight: 700; margin: var(--s4) 0 var(--s2); }
.sv-links { margin: 0; padding-left: 1.1rem; }
.sv-links li { margin-bottom: var(--s2); }

/* ---------- emergencies page ---------- */
.emerg-jump { display: grid; gap: var(--s3); margin: 0 0 var(--s6); }
@media (min-width: 40rem) { .emerg-jump { grid-template-columns: 1fr 1fr; } }
.emerg-jump .rn-btn { text-decoration: none; }
/* Anchored sections must clear the sticky header when jumped to. */
#smoke, #earthquake { scroll-margin-top: 130px; }
.emerg-more { margin: var(--s5) 0 var(--s3); font-size: var(--step-1); color: var(--ink-2); }
#earthquake { margin-top: var(--s7); }

/* ---------- account: sign-in pill, signed-in initial, panel ---------- */
.account { position: relative; flex: 0 0 auto; display: flex; }
.account:empty { display: none; }

/* Same height and radius as the EN/ES switch beside it, so the two read as
   one control group rather than two unrelated widgets. */
.signin-pill {
  display: inline-flex; align-items: center; gap: .4rem;
  font: inherit; font-size: .8rem; font-weight: 700;
  min-height: 38px; padding: 0 .75rem 0 .55rem;
  border: 1.5px solid var(--line-strong); border-radius: var(--r-pill);
  background: var(--paper); color: var(--ink); cursor: pointer;
  white-space: nowrap;
}
.signin-pill:hover { border-color: var(--brand); }
.signin-pill:focus-visible, .account-dot:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }
.g-mark { width: 18px; height: 18px; flex: 0 0 auto; }

.account-dot {
  width: 38px; height: 38px; border-radius: 50%;
  border: 0; cursor: pointer;
  background: var(--brand); color: var(--on-brand);
  font: inherit; font-family: var(--font-display); font-weight: 800; font-size: 1.05rem;
}
.account-panel {
  position: absolute; right: 0; top: calc(100% + 8px); z-index: 60;
  min-width: 15rem; max-width: calc(100vw - 1.5rem);
  background: var(--paper); border: 1px solid var(--line-strong);
  border-radius: var(--r); box-shadow: var(--shadow-2);
  padding: var(--s2);
}
.account-panel[hidden] { display: none; }
.account-email {
  margin: 0; padding: var(--s2) var(--s3) var(--s3);
  font-size: .82rem; color: var(--ink-3);
  border-bottom: 1px solid var(--line); overflow-wrap: anywhere;
}
.account-link {
  display: flex; align-items: center; width: 100%; min-height: 44px;
  padding: 0 var(--s3); margin-top: 2px;
  font: inherit; font-size: .95rem; font-weight: 600; text-align: left;
  color: var(--ink); text-decoration: none;
  background: none; border: 0; border-radius: var(--r-sm); cursor: pointer;
}
.account-link:hover, .account-link:focus-visible { background: var(--paper-3); }
.account-signout { color: var(--quake-ink); }

/* On the narrowest phones the tagline is already hidden; also tighten the
   header gap so brand + language + sign-in fit side by side at 320px. */
@media (max-width: 22rem) {
  .head-row { gap: var(--s2); }
  .brand-name { font-size: .98rem; }
  .brand-mark { width: 32px; height: 32px; }
  .langswitch button { padding: .3rem .45rem; }
  .signin-pill { padding: 0 .55rem 0 .45rem; }
}

/* ---------- age check ---------- */
.age-dialog {
  border: 0; border-radius: var(--r-lg); padding: var(--s5);
  max-width: min(26rem, calc(100vw - 2rem));
  box-shadow: var(--shadow-2); background: var(--paper); color: var(--ink);
}
.age-dialog::backdrop { background: rgba(23, 19, 31, .55); }
.age-dialog h2 { margin: 0 0 var(--s2); font-size: var(--step-2); }
.age-dialog p { margin: 0 0 var(--s4); color: var(--ink-2); }

/* ---------- wound history ---------- */
.wound-history {
  border: 1px solid var(--line); border-radius: var(--r-lg);
  background: var(--paper-2); padding: var(--s4); margin: 0 0 var(--s5);
}
.wound-history h2 { margin: 0 0 var(--s1); font-size: var(--step-2); }
.wound-history > .small { margin: 0 0 var(--s3); }
.history-list { list-style: none; margin: 0 0 var(--s4); padding: 0; }
.history-list li {
  display: grid; grid-template-columns: 1fr auto; gap: 0 var(--s3);
  padding: var(--s3) 0; border-bottom: 1px solid var(--line);
}
.history-list li:last-child { border-bottom: 0; }
.h-label { font-weight: 700; text-transform: capitalize; }
.h-conf { color: var(--ink-2); font-size: .9rem; text-align: right; }
.h-date { grid-column: 1 / -1; color: var(--ink-3); font-size: .82rem; }
.saved-note { color: var(--ok); font-weight: 700; margin-top: var(--s3); }

/* ---------- coordinator dashboard: QR codes ---------- */
.qr-root { margin-top: var(--s7); }
.qr-root:empty { display: none; }
.qr-create {
  display: grid; gap: var(--s3); align-items: end;
  border: 1px solid var(--line); border-radius: var(--r); background: var(--paper-2);
  padding: var(--s4); margin: var(--s5) 0;
}
@media (min-width: 44rem) { .qr-create { grid-template-columns: 2fr 1fr auto; } }
.qr-create h3, .qr-create p { grid-column: 1 / -1; margin: 0; }
.qr-create label { display: grid; gap: var(--s1); font-weight: 700; font-size: .9rem; }
.qr-create input, .qr-create select {
  font: inherit; min-height: 44px; padding: 0 var(--s3);
  border: 1.5px solid var(--line-strong); border-radius: var(--r-sm); background: var(--paper); color: var(--ink);
}
.qr-list { display: grid; gap: var(--s3); }
.qr-card { border: 1px solid var(--line); border-radius: var(--r); padding: var(--s4); background: var(--paper); }
.qr-card.is-off { opacity: .6; }
.qr-card-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--s2) var(--s3); }
.qr-card-head h3 { margin: 0; font-size: var(--step-1); }
.qr-card-head code { font-size: .82rem; color: var(--ink-3); }
.qr-nums { margin: var(--s2) 0 var(--s1); font-weight: 600; }
.qr-card .row { margin-top: var(--s3); }
.qr-card .row .btn { width: auto; }
.qr-check { margin: var(--s2) 0 0; }

/* ---------- sources ----------
   The evidence behind a piece of medical guidance, attached under it.

   Collapsed by default and set in small type: someone acting on the steps in
   a hurry should not have to scroll past a bibliography to reach the next
   instruction, while someone checking the claim - MRC reviewing the page, a
   clinician, a teacher - is one tap away. It is quiet, not hidden. */
.srcs { margin-top: var(--s4); border-top: 1px dashed var(--line-strong); padding-top: var(--s2); }
.srcs > summary {
  cursor: pointer; list-style: none; display: flex; align-items: center; gap: var(--s2);
  font-size: .78rem; letter-spacing: .06em; text-transform: uppercase;
  color: var(--ink-3); padding: var(--s1) 0;
}
.srcs > summary::-webkit-details-marker { display: none; }
.srcs > summary::before {
  content: '';
  width: .5rem; height: .5rem; flex: none;
  border-right: 2px solid currentColor; border-bottom: 2px solid currentColor;
  transform: rotate(-45deg); transition: transform .15s ease;
}
.srcs[open] > summary::before { transform: rotate(45deg); }
.srcs > summary:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
.srcs-count {
  font-size: .72rem; line-height: 1; padding: .2rem .4rem; border-radius: 99px;
  background: var(--brand-tint); color: var(--brand-strong); letter-spacing: 0;
}
.src-list { list-style: none; margin: var(--s2) 0 var(--s1); padding: 0; }
.src-list > li {
  font-size: .82rem; line-height: 1.5; color: var(--ink-2);
  padding: var(--s2) 0 var(--s3); border-bottom: 1px solid var(--line);
}
.src-list > li:last-child { border-bottom: 0; padding-bottom: var(--s1); }
.src-authors { color: var(--ink-2); }
.src-title { color: var(--brand-strong); font-weight: 600; }
.src-where { color: var(--ink-3); }
/* An agency instruction is not a research finding; say which one the reader
   is looking at rather than letting the list imply everything is a study. */
.src-tag {
  display: inline-block; margin-left: var(--s2); padding: .05rem .4rem;
  border: 1px solid var(--line-strong); border-radius: 99px;
  font-size: .68rem; text-transform: uppercase; letter-spacing: .05em; color: var(--ink-3);
}
/* What the paper actually found, so the citation is checkable without opening it. */
.src-claim { display: block; margin-top: var(--s1); color: var(--ink); }
.src-ids { display: block; margin-top: var(--s1); font-size: .76rem; }
.src-ids a { color: var(--ink-3); }
.src-sep { margin: 0 .4rem; color: var(--line-strong); }
.src-missing { color: var(--quake-ink); font-weight: 700; }

/* Inside a hazard panel the dashed rule and chip have to sit on the amber or
   red ground, not the paper ground. */
.rn-panel .srcs { border-top-color: currentColor; opacity: .95; }
.rn-panel .srcs > summary { color: inherit; }
.rn-panel .srcs-count { background: rgba(255,255,255,.55); color: inherit; }
/* The panel numbers its steps with a counter on every li it contains. A
   reference is not step 9 of the instructions, so the marker and its indent
   are cancelled for this list. */
.rn-panel .src-list > li {
  color: inherit; border-bottom-color: rgba(0,0,0,.12);
  counter-increment: none; padding-left: 0;
}
.rn-panel .src-list > li::before { content: none; }
.rn-panel .src-title,
.rn-panel .src-claim,
.rn-panel .src-authors,
.rn-panel .src-where,
.rn-panel .src-ids a { color: inherit; }

/* ---------- impact dashboard ----------
   Read in this order: totals, then the working behind them. The page is a
   reporting surface, not an emergency one, so it may carry more density than
   anything a reader reaches mid-smoke-event - but it stays in the same
   palette, and colour still means something: violet is this project, amber
   and red stay reserved for the hazard channels and appear nowhere here. */
.kpi-grid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(8.5rem, 1fr));
  gap: var(--s3); margin: var(--s4) 0 var(--s5);
}
.kpi {
  border: 1px solid var(--line); border-radius: var(--r);
  background: var(--paper); padding: var(--s4) var(--s3);
}
.kpi.is-muted { background: var(--paper-2); }
.kpi-num {
  font-family: var(--font-display); font-size: clamp(1.6rem, 6vw, 2.1rem);
  font-weight: 700; line-height: 1; color: var(--brand);
  letter-spacing: -.02em; font-variant-numeric: tabular-nums lining-nums;
}
.kpi.is-muted .kpi-num { color: var(--ink-2); }
.kpi-label { font-size: .8rem; color: var(--ink); margin-top: .4rem; line-height: 1.35; }
.kpi-sub { font-size: .72rem; color: var(--ink-3); margin-top: .2rem; }

.dash-card {
  border: 1px solid var(--line); border-radius: var(--r-lg);
  background: var(--paper); padding: var(--s5) var(--s4);
  margin: 0 0 var(--s5);
}
.dash-head h2 { margin: 0; font-size: var(--step-2); }
.dash-hint { font-size: .88rem; color: var(--ink-2); margin: var(--s2) 0 var(--s4); }
.dash-sub {
  font-family: var(--font-text); font-size: .74rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: .09em; color: var(--ink-3);
  margin: var(--s5) 0 var(--s2);
}
.dash-note { font-size: .82rem; color: var(--ink-3); margin: var(--s3) 0 0; line-height: 1.5; }
.dash-figure { font-size: .92rem; color: var(--ink-2); margin: var(--s4) 0 0; line-height: 1.55; }
.dash-figure b { color: var(--brand); font-variant-numeric: tabular-nums lining-nums; }
.dash-card .kpi-grid { margin-bottom: var(--s4); }
.dash-card > .notice { margin-top: var(--s4); }

/* horizontal bars: the label and the number are text, the bar is decoration */
.bars { display: grid; gap: var(--s2); margin: var(--s3) 0 0; }
.bar-row { display: grid; grid-template-columns: minmax(6rem, 11rem) 1fr auto; gap: var(--s3); align-items: center; }
.bar-label { font-size: .86rem; color: var(--ink); }
.bar-track { background: var(--paper-3); border-radius: var(--r-pill); height: 12px; overflow: hidden; }
.bar-fill { display: block; height: 100%; background: var(--brand); border-radius: var(--r-pill); }
.bar-fill.tone-flat { background: var(--ink-3); }
.bar-value { font-size: .8rem; color: var(--ink-2); font-variant-numeric: tabular-nums lining-nums; white-space: nowrap; }
.bar-row.is-zero .bar-label, .bar-row.is-zero .bar-value { color: var(--ink-3); }

/* before / after */
.pair-legend { display: flex; gap: var(--s4); margin: 0 0 var(--s3); font-size: .78rem; color: var(--ink-2); }
.key::before {
  content: ''; display: inline-block; width: .8rem; height: .55rem;
  border-radius: 2px; margin-right: .4rem; vertical-align: baseline;
}
.key-before::before { background: var(--violet-200); }
.key-after::before { background: var(--brand); }
.pair-grid { display: grid; gap: var(--s4); }
.pair-line { display: grid; grid-template-columns: minmax(7rem, 13rem) 1fr auto; gap: var(--s3); align-items: center; }
.pair-label { font-size: .86rem; }
.pair-nums { font-size: .8rem; color: var(--ink-2); font-variant-numeric: tabular-nums lining-nums; white-space: nowrap; }
.chart-pair { width: 100%; height: 30px; display: block; }
.pair-before { fill: var(--violet-200); }
.pair-after { fill: var(--brand); }

/* when people scan */
.hours-bars { display: flex; align-items: flex-end; gap: 2px; height: 64px; margin-top: var(--s2); }
.hour { flex: 1; background: var(--brand); border-radius: 2px 2px 0 0; min-height: 3px; }
.hour.is-zero { background: var(--line); }
.hours-axis { display: flex; justify-content: space-between; font-size: .68rem; color: var(--ink-3); margin-top: .3rem; }

@media (max-width: 34rem) {
  .bar-row, .pair-line { grid-template-columns: 1fr auto; }
  .bar-track { grid-column: 1 / -1; order: 3; }
  .chart-pair { grid-column: 1 / -1; order: 3; }
}

/* The one instruction that changes the answer rate: measured 48% of close-ups
   answered against 31% of arm's-length shots. It sits with the picker, before
   the photo is taken, not only in the advice shown after a "not sure". */
.wound-framing { color: var(--ink-2); margin: var(--s3) 0 0; }

/* ---------- "How this works" (wound page) ----------
   Sits above the upload button because the question it answers - who is
   looking at my photo - is the one a reader has BEFORE they hand over a
   picture of their own injury, not after. */
.how-box {
  border: 1px solid var(--line-strong); border-radius: var(--r);
  background: var(--paper-2); padding: var(--s4); margin: 0 0 var(--s5);
}
.how-h { margin: 0 0 var(--s3); font-size: var(--step-1); }
.how-list { margin: 0; padding-left: 1.2rem; display: grid; gap: var(--s2); }
.how-list li { line-height: 1.55; }

/* The care box repeated under every result. Deliberately in the earthquake
   red channel: it is the one thing on the page that does not depend on the
   model being right. */
.care-box {
  border: 2px solid var(--quake-line); background: var(--quake-bg);
  border-radius: var(--r); padding: var(--s4); margin: var(--s5) 0 0;
}
.care-box h3 { margin: 0 0 var(--s2); color: var(--quake-ink); font-size: var(--step-1); }
.care-box ul { margin: 0; padding-left: 1.1rem; display: grid; gap: var(--s1); }
.care-box li { line-height: 1.5; }
.care-note { font-size: .84rem; color: var(--ink-2); margin: var(--s3) 0 0; }
.sure-line { font-family: var(--font-text); font-weight: 700; margin: 0 0 var(--s2); }

/* King County resources, added at PHRC's request. A card, like everything
   else on these pages - as a bare rule it read as leftover text rather than a
   deliberate section. It still points away from this site, so it stays quiet:
   no hazard colour, secondary button, muted body. */
.more-box {
  border: 1px solid var(--line); border-radius: var(--r-lg);
  background: var(--paper-2);
  margin: var(--s6) 0 0; padding: var(--s5) var(--s4);
}
.more-box h2 { font-size: var(--step-1); margin: 0 0 var(--s2); }
.more-box p { color: var(--ink-2); margin: 0 0 var(--s4); max-width: 34rem; }
/* A link, not a button. This points off the site, so it should not carry the
   same weight as "Find clean air near me" two sections above it. Padded to a
   44px tap target even though it reads as text. */
.more-link { margin: 0; }
.more-link a {
  display: inline-flex; align-items: center; gap: .45rem;
  min-height: 44px; font-weight: 700; color: var(--brand);
  text-decoration: underline; text-underline-offset: 3px;
}
.more-link a:hover { color: var(--brand-strong); }
.more-link .ext { font-size: .85em; }
@media (min-width: 34rem) { .more-box { padding: var(--s5); } }

/* ---------- PHRC partner mark ----------
   Their logo sits beside ours, the same size, in the header and the footer.
   It is a partner mark, not a second brand: no link of its own, and it never
   appears without the HOSA seal next to it.

   The header is tight on a phone - two 44px marks, the wordmark, the language
   switch and the sign-in pill all share one row - so below 30rem the partner
   mark steps down rather than pushing the wordmark into a wrap. */
.brand-phrc { margin-left: .35rem; }
/* Not in the header on a phone. That row already holds the seal, the
   wordmark, the language switch and the sign-in pill; a second seal either
   pushed "MRC Miracle" onto two lines or, once told not to wrap, clipped it
   behind the language buttons. Both were measured at 375px. PHRC is still
   credited on every page - in the footer, at full size, where there is room
   for it - and the header mark returns above 30rem. */
@media (max-width: 30rem) {
  .brand-phrc { display: none; }
}

/* Footer: the two seals share a row, wrapping together on narrow screens. */
.foot-marks { display: flex; align-items: center; gap: var(--s4); flex-wrap: wrap; margin-bottom: var(--s4); }
.foot-marks .site-logo { margin-bottom: 0; }