/* Abrigo Venezuela — shared styles
   Calm public-safety instrument. System fonts, monospace instrument labels,
   one teal accent for action, amber for caution, red for hard stops. */

:root {
  /* Soft-dark default — off-white on charcoal, ~10:1 contrast: strong but no glare.
     Toggle to the light theme below via [data-theme="light"]. */
  --paper:#181b22;           /* page floor — deepest layer */
  --surface:#20252d;         /* cards — one step above the page */
  --surface-2:#29323a;
  --ink:#c9cfd6;
  --muted:#9aa5af;
  --faint:#6f7a84;
  --line:#2c353d;
  --line-strong:#3a444d;
  --header:#161a20;          /* sticky header — sits below the page floor */
  --wf-panel:#262c35;        /* opened accordion panel — above the card */

  --accent:#675dd1;          /* action / "do this" — soft violet */
  --accent-ink:#bcb2f2;
  --accent-soft:#272442;
  --accent-line:#403a63;

  --warn:#e0922f;            /* caution */
  --warn-ink:#f0c58a;
  --warn-soft:#2c2410;
  --warn-line:#4a3a18;

  --stop:#e5675c;            /* hard stop / danger */
  --stop-ink:#f2b1aa;
  --stop-soft:#2c1714;
  --stop-line:#4a2620;

  --danger:#d6392b;          /* solid red — the 911 call button, both themes */

  /* section bands — meta-sections alternate value (base ↔ lift) so each reads as
     its own slice, and carry a faint Spell-derived hue for identity. Cards sit one
     value-step above their band (surface on base bands, card-on-b on lift bands). */
  --lift:#222b33;            /* lifted band base value (dark) */
  --card-on-b:#333e49;       /* cards resting on a lifted band — clearly above it */
  --shadow-card:0 1px 2px rgba(0,0,0,.24),0 8px 22px rgba(0,0,0,.22); /* soft elevation */
  --band-base-amt:7%;        /* hue strength over the dark base band */
  --band-lift-amt:9%;        /* hue strength over the lifted band */

  /* Spell palette, deepened for the soft-dark theme — a calm categorical rainbow.
     Shared across themes; band tints and topic tags both read from these. */
  --h-blue:#5aa6dc;          /* sky — data / directory */
  --h-violet:#8b7fd6;        /* lilac — guides / interactive */
  --h-indigo:#6f82d4;        /* periwinkle, the "darker blue" — finding people / offline */
  --h-peach:#e0975c;         /* apricot, the "yellow-orange" — giving / maps */
  --h-orchid:#c47ec6;        /* orchid, the "pinkish purple" — health / feedback */
  --h-mint:#54b98a;          /* mint — shelter / safe */

  --radius:14px;
  --radius-sm:8px;
  --maxw:820px;
  --maxw-wide:1040px;
  --serif:"Iowan Old Style","Source Serif 4","Source Serif Pro",Charter,Cambria,Georgia,"Times New Roman",serif;
  --sans:system-ui,-apple-system,"Segoe UI",Roboto,Helvetica,Arial,"Apple Color Emoji","Segoe UI Emoji",sans-serif;
  --mono:ui-monospace,SFMono-Regular,"SF Mono",Menlo,Consolas,"Liberation Mono",monospace;
}

:root[data-theme="light"]{
  /* Calm light — softened from stark black/white so it stays easy on the eyes. */
  --paper:#f5f3ed;
  --surface:#fbfaf6;
  --surface-2:#eceae1;
  --ink:#2c343d;
  --muted:#5a6873;
  --faint:#8a95a0;
  --line:#e4e1d8;
  --line-strong:#d3cfc3;
  --header:#f5f3ed;          /* light header = paper (unchanged from before) */
  --wf-panel:#fbfaf6;        /* light accordion panel = surface (unchanged) */

  --accent:#5848c4;
  --accent-ink:#5142b8;
  --accent-soft:#ece9fb;
  --accent-line:#d2cbf3;

  --warn:#b45309;
  --warn-ink:#8a3f06;
  --warn-soft:#fbefe0;
  --warn-line:#e6cfa8;

  --stop:#b42318;
  --stop-ink:#8a1a12;
  --stop-soft:#fae9e7;
  --stop-line:#e9c2bc;

  --danger:#c52d20;

  /* lifted band is a gentle warm step below paper; cards are a WARM white (not pure
     #fff, which reads cold against the warm bands) lifted mainly by the soft shadow */
  --lift:#ece8de;
  --card-on-b:#fcfaf6;
  --band-base-amt:6%;
  --band-lift-amt:7%;
  --shadow-card:0 4px 16px rgba(23,36,64,.09); /* soft cool navy shadow (Spell) */
}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:104px}
body{
  margin:0;background:var(--paper);color:var(--ink);
  font-family:var(--sans);font-size:18px;line-height:1.62;
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
}
[data-lang="es"] .en{display:none}
[data-lang="en"] .es{display:none}

a{color:var(--accent-ink);text-decoration:underline;text-underline-offset:2px;text-decoration-thickness:1px}
a:hover{text-decoration-thickness:2px}

.container{max-width:var(--maxw);margin:0 auto;padding:0 20px}
.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:-999px;top:0;background:var(--accent);color:#fff;padding:10px 14px;border-radius:0 0 8px 0;z-index:100}
.skip:focus{left:0}

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

/* ---------- header ---------- */
.top{position:sticky;top:0;z-index:50;padding-top:env(safe-area-inset-top,0px);background:color-mix(in srgb,var(--header) 92%,transparent);backdrop-filter:saturate(1.1) blur(8px);border-bottom:1px solid var(--line)}
.top-row{display:flex;align-items:center;gap:12px;padding:10px 0;max-width:var(--maxw);margin:0 auto;padding-left:20px;padding-right:20px}
.brand{display:flex;align-items:center;gap:9px;font-weight:600;letter-spacing:-.01em;text-decoration:none;color:var(--ink);margin-right:auto;font-size:16px}
.brand img{width:26px;height:26px;border-radius:7px;display:block}
.brand b{font-weight:600}
.brand span{color:var(--muted);font-weight:400}

.langtog{display:inline-flex;border:1px solid var(--line-strong);border-radius:999px;overflow:hidden;font-family:var(--mono);font-size:12px}
.langtog button{appearance:none;border:0;background:transparent;color:var(--muted);padding:6px 10px;cursor:pointer;font-family:inherit;font-size:inherit;letter-spacing:.04em}
.langtog button[aria-pressed="true"]{background:var(--ink);color:var(--paper)}

.themetog{display:inline-flex;align-items:center;justify-content:center;width:34px;height:34px;border:1px solid var(--line-strong);border-radius:999px;background:transparent;color:var(--muted);cursor:pointer;flex:none;padding:0}
.themetog:hover{color:var(--ink);border-color:var(--faint)}
.themetog svg{width:17px;height:17px;display:block}
.themetog .ic-moon{display:none}
:root[data-theme="light"] .themetog .ic-sun{display:none}
:root[data-theme="light"] .themetog .ic-moon{display:block}

.btn-call{display:inline-flex;align-items:center;gap:6px;background:var(--danger);color:#fff;border-radius:999px;padding:7px 13px;font-weight:600;font-size:14px;text-decoration:none;white-space:nowrap}
.btn-call svg{width:15px;height:15px}
.btn-call:hover{filter:brightness(1.05);text-decoration:none}

/* ---------- site bar (unified primary nav) ----------
   The SAME five tabs on every page (Inicio · Rescate · Superv. · Comunic. ·
   Donar). Desktop: a sticky top row parked under the header (its top offset is
   synced by app.js). Narrow screens: a fixed bottom tab bar at thumb height.
   The active page carries aria-current="page". */
.sitebar{position:sticky;z-index:49;top:52px;background:var(--surface);border-bottom:1px solid var(--line)}
.sitebar .sb-inner{display:flex;gap:2px;max-width:var(--maxw);margin:0 auto;padding:0 12px;justify-content:center}
.sitebar a{display:flex;align-items:center;gap:7px;text-decoration:none;color:var(--muted);font-family:var(--mono);font-size:12.5px;letter-spacing:.03em;text-transform:uppercase;padding:12px 14px;border-bottom:2px solid transparent;transition:color .15s ease}
.sitebar a:hover{color:var(--ink)}
.sitebar a[aria-current="page"]{color:var(--ink);border-bottom-color:var(--accent)}
.sitebar a svg{width:15px;height:15px;flex:none;transition:fill .18s ease}
/* scroll-spy "you are here": the Ayudar tab lights up (heart fills) while #donar shows */
.sitebar a.in-view{color:var(--accent-ink)}
.sitebar a.in-view svg{fill:currentColor}
@media (max-width:720px){
  .sitebar{position:fixed;z-index:60;top:auto;bottom:0;left:0;right:0;background:color-mix(in srgb,var(--paper) 94%,transparent);backdrop-filter:saturate(1.1) blur(8px);border-bottom:0;border-top:1px solid var(--line)}
  /* Lift the fixed bottom nav clear of the home indicator / rounded corners:
     a small baseline gap PLUS the device safe-area insets (which only apply
     because the viewport meta now has viewport-fit=cover). */
  .sitebar .sb-inner{gap:0;padding:0 calc(env(safe-area-inset-right,0px) + 9px) calc(env(safe-area-inset-bottom,0px) + 4px) calc(env(safe-area-inset-left,0px) + 9px)}
  .sitebar a{flex:1;flex-direction:column;justify-content:center;gap:4px;padding:8px 2px 9px;font-family:var(--sans);font-size:10.5px;font-weight:600;letter-spacing:.01em;text-transform:none;border-bottom:0;position:relative;min-height:56px}
  .sitebar a svg{width:21px;height:21px}
  .sitebar a[aria-current="page"]{border-bottom:0}
  .sitebar a[aria-current="page"]::before{content:"";position:absolute;top:0;left:18%;right:18%;height:2px;border-radius:0 0 2px 2px;background:var(--accent)}
  body{padding-bottom:calc(58px + env(safe-area-inset-bottom,0px))}
}

/* ---------- section bands ----------
   Each meta-section is wrapped in a full-bleed .band. Bands alternate value
   (base ↔ lift) for a clear "new section" read, and carry a faint Spell hue for
   identity. A hairline at every seam draws the edge (Mux: define edges with line). */
.band{--bg:var(--paper);--card-bg:var(--surface);background:var(--bg)}
.band--base{--bg:var(--paper);--card-bg:var(--surface)}
.band--lift{--bg:var(--lift);--card-bg:var(--card-on-b)}
.band + .band{border-top:1px solid var(--line)}

/* per-band Spell hue tint — amount differs by base vs lift so strength stays even */
.band--base.band--blue  {background:color-mix(in srgb,var(--h-blue)   var(--band-base-amt),var(--bg))}
.band--base.band--violet{background:color-mix(in srgb,var(--h-violet) var(--band-base-amt),var(--bg))}
.band--base.band--peach {background:color-mix(in srgb,var(--h-peach)  var(--band-base-amt),var(--bg))}
.band--base.band--orchid{background:color-mix(in srgb,var(--h-orchid) var(--band-base-amt),var(--bg))}
.band--base.band--indigo{background:color-mix(in srgb,var(--h-indigo) var(--band-base-amt),var(--bg))}
.band--lift.band--blue  {background:color-mix(in srgb,var(--h-blue)   var(--band-lift-amt),var(--bg))}
.band--lift.band--violet{background:color-mix(in srgb,var(--h-violet) var(--band-lift-amt),var(--bg))}
.band--lift.band--peach {background:color-mix(in srgb,var(--h-peach)  var(--band-lift-amt),var(--bg))}
.band--lift.band--orchid{background:color-mix(in srgb,var(--h-orchid) var(--band-lift-amt),var(--bg))}
.band--lift.band--indigo{background:color-mix(in srgb,var(--h-indigo) var(--band-lift-amt),var(--bg))}

/* single-card blocks inside a band lift to that band's --card-bg (one value step
   up). NOT .items — that's a flex container; each .item card lifts on its own, so
   painting the container too would show as a stray panel behind/between the cards. */
.band .form,.band .cardlink{background:var(--card-bg)}

/* ---------- generic blocks ---------- */
main{padding:0}
.eyebrow{font-family:var(--mono);font-size:12px;letter-spacing:.16em;text-transform:uppercase;color:var(--accent-ink);margin:0 0 10px}
h1{font-family:var(--serif);font-size:clamp(2rem,6vw,2.8rem);line-height:1.1;letter-spacing:-.012em;font-weight:600;margin:.1em 0 .35em}
h2{font-family:var(--serif);font-size:clamp(1.4rem,4vw,1.8rem);line-height:1.2;letter-spacing:-.006em;font-weight:600;margin:0 0 .45em}
h3{font-family:var(--serif);font-size:1.18rem;font-weight:600;margin:0 0 .3em;letter-spacing:-.004em}
p{margin:0 0 1em}
.lede{font-size:1.12rem;color:var(--muted);margin-bottom:1.2em}
.hr{height:1px;background:var(--line);border:0;margin:40px 0}
.muted{color:var(--muted)}
.small{font-size:.92rem}

.hero{padding:22px 0 4px}
.stamp{font-family:var(--mono);font-size:11.5px;color:#828c95;letter-spacing:.04em;margin-top:6px} /* lifted from --faint (3.7:1) to 5.0:1 so "current?" is confirmable */
/* Disclaimer: deliberately quiet — plain muted text, NO box and NO amber, so the
   emergency numbers are the page's only amber-bordered element. */
.verifybar{display:flex;gap:8px;align-items:flex-start;background:none;border:0;border-radius:0;padding:0;margin:14px 0 2px;font-size:.86rem;color:var(--muted)}
.verifybar svg{width:15px;height:15px;flex:none;color:var(--faint);margin-top:3px}

.section{padding:44px 0}
.section-tag{font-family:var(--mono);font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--faint);margin:0 0 6px}

/* ---------- time-horizon label ----------
   Which stage of recovery a section serves, so the guide reads as useful today
   or after a future quake. A small pill that sits above the eyebrow / section-tag;
   its tone warms with urgency (now) and cools toward calm (long term). No JS. */
.horizon{display:inline-flex;align-items:center;gap:7px;font-family:var(--mono);font-size:11px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);background:var(--surface-2);border:1px solid var(--line-strong);border-radius:999px;padding:3px 11px 3px 9px;margin:0 0 12px}
.horizon::before{content:"";width:6px;height:6px;border-radius:50%;background:currentColor;flex:none}
.horizon--now{color:var(--stop-ink);background:var(--stop-soft);border-color:var(--stop-line)}
.horizon--days{color:var(--warn-ink);background:var(--warn-soft);border-color:var(--warn-line)}
.horizon--ongoing{color:var(--accent-ink);background:var(--accent-soft);border-color:var(--accent-line)}
/* reserved for the future recovery branch (not placed yet) */
.horizon--weeks{color:var(--accent-ink);background:var(--accent-soft);border-color:var(--accent-line)}
.horizon--long{color:var(--h-mint);background:color-mix(in srgb,var(--h-mint) 13%,var(--surface));border-color:color-mix(in srgb,var(--h-mint) 32%,var(--line-strong))}

/* ---------- wayfinder / situation router ----------
   Each row reads left→right: where you are  →  where that takes you.
   Tapping opens the concrete steps below (accordion via app.js).
   Each path carries its own calm, earthy tone (--tone) so it stays memorable. */
.section--router{padding-top:8px;width:min(var(--maxw-wide), 100vw - 32px);position:relative;left:50%;transform:translateX(-50%)}
/* break a section out to the wider board width (like the wayfinder above),
   so a card directory gets room for more columns than the prose measure. */
.section--wide{width:min(var(--maxw-wide), 100vw - 32px);position:relative;left:50%;transform:translateX(-50%)}
.wf{display:flex;flex-direction:column;gap:14px;margin-top:8px}

.wf-item{--tone:var(--accent);background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;transition:border-color .15s ease}
.wf-item:hover{border-color:color-mix(in srgb,var(--tone) 50%,var(--line-strong))}
/* Router tones — one balanced, evenly-spaced Spell wheel (green · orange · azure ·
   orchid · violet) instead of the old muddy mix of two greens + a teal. Deepened
   as a set to a 5.4–6.4:1 band so white text (incl. the .92-alpha sub-line) stays
   readable on cheap screens in direct sunlight, not just ≥4.5:1 indoors. */
.tone-safe{--tone:#3a7659}     /* safety — green/mint   · white 5.36:1 */
.tone-signal{--tone:#a8521f}   /* signal / urgent — warm orange · 5.40:1 */
.tone-find{--tone:#3d6096}     /* find people — azure blue · 6.34:1 */
.tone-give{--tone:#834b80}     /* help / give — orchid · 6.40:1 */
.tone-build{--tone:#6a5fbf}    /* build / abroad — violet (off-homepage) */

.wf-head{position:relative;width:100%;display:flex;align-items:stretch;text-align:left;background:transparent;border:0;cursor:pointer;padding:0;font-family:inherit;color:inherit}

/* left — the situation you're in */
.wf-sit{flex:1 1 0;min-width:0;display:flex;align-items:center;gap:14px;padding:16px 14px 16px 18px}
.wf-ico{flex:none;width:46px;height:46px;border-radius:12px;background:color-mix(in srgb,var(--tone) 15%,var(--surface-2));border:1px solid color-mix(in srgb,var(--tone) 32%,var(--line-strong));color:color-mix(in srgb,var(--tone) 52%,var(--ink));display:flex;align-items:center;justify-content:center}
.wf-ico svg{width:24px;height:24px;display:block}
.wf-titles{min-width:0}
.wf-titles b{display:block;font-family:var(--serif);font-weight:600;font-size:1.1rem;line-height:1.2;letter-spacing:-.004em}
.wf-titles small{display:block;color:#b3bcc4;font-size:.92rem;margin-top:2px;line-height:1.3} /* lifted off --muted so it holds up outdoors (8:1 on the card) */

/* the connector — tinted toward where it leads */
.wf-arrow{flex:none;align-self:center;color:color-mix(in srgb,var(--tone) 55%,var(--ink));display:flex;align-items:center;padding:0 6px}
.wf-arrow svg{width:22px;height:22px;display:block}

/* right — where that path leads (the answer), filled in its tone */
.wf-act{flex:1 1 0;min-width:0;display:flex;flex-direction:column;justify-content:center;gap:3px;background:var(--tone);padding:16px 18px}
/* the recommendation (right panel) is the action — heavier + pure white so it wins
   the eye over the muted problem label on the left. */
.wf-act b{font-family:var(--serif);font-weight:700;font-size:1.12rem;line-height:1.2;letter-spacing:-.004em;color:#fff}
.wf-act small{color:rgba(255,255,255,.94);font-size:.9rem;line-height:1.3}

.wf-chev{flex:none;align-self:center;color:var(--faint);padding:0 14px;transition:transform .2s ease}
.wf-chev svg{width:20px;height:20px;display:block}
.wf-head:hover .wf-chev{color:color-mix(in srgb,var(--tone) 55%,var(--ink))}
.wf-head[aria-expanded="true"] .wf-chev{transform:rotate(180deg);color:color-mix(in srgb,var(--tone) 55%,var(--ink))}
.wf-head[aria-expanded="true"] .wf-act{background:color-mix(in srgb,var(--tone) 88%, black 12%)}

.wf-body{padding:2px 18px 18px;border-top:1px solid var(--line);background:var(--wf-panel)} /* opened panel lifts one step above the card */
.wf-body[hidden]{display:none}

/* expanded detail inherits the path's tone (--tone from .wf-item) */
.wf-body ol.steps li::before{background:color-mix(in srgb,var(--tone) 18%,var(--surface-2));color:color-mix(in srgb,var(--tone) 62%,var(--ink));border-color:color-mix(in srgb,var(--tone) 38%,var(--line-strong))}
.wf-body ol.steps li:not(:last-child)::after{background:color-mix(in srgb,var(--tone) 38%,var(--line-strong))}
.wf-body .linkbtn{border-color:color-mix(in srgb,var(--tone) 40%,var(--line-strong));background:color-mix(in srgb,var(--tone) 14%,var(--surface));color:color-mix(in srgb,var(--tone) 60%,var(--ink))}
.wf-body .linkbtn:hover{border-color:var(--tone)}

@media (max-width:640px){
  /* a touch more breathing room at the screen edges on phones */
  .container{padding-left:24px;padding-right:24px}
  .top-row{padding-left:24px;padding-right:24px}
  .wf-head{flex-direction:column;align-items:stretch}
  .wf-sit{padding-right:46px}
  .wf-arrow{align-self:center;transform:rotate(90deg);padding:4px 0}
  .wf-act{border-left:0;border-top:0}
  .wf-chev{position:absolute;top:14px;right:10px;padding:0}
}

ol.steps{margin:14px 0 4px;padding:0;list-style:none;counter-reset:s}
ol.steps li{position:relative;padding:0 0 14px 38px;counter-increment:s}
ol.steps li::before{content:counter(s);position:absolute;left:0;top:-1px;width:26px;height:26px;border-radius:50%;background:var(--accent-soft);color:var(--accent-ink);border:1px solid var(--accent-line);font-family:var(--mono);font-size:13px;font-weight:500;display:flex;align-items:center;justify-content:center}
ol.steps li:not(:last-child)::after{content:"";position:absolute;left:13px;top:26px;bottom:2px;width:1px;background:var(--accent-line)}

.note{display:flex;gap:9px;align-items:flex-start;font-size:.95rem;color:var(--muted);margin:10px 0 0}
.note svg{width:17px;height:17px;flex:none;margin-top:2px;color:var(--faint)}

.callout{display:flex;gap:10px;align-items:flex-start;border-radius:var(--radius-sm);padding:12px 14px;margin:14px 0 0;font-size:.96rem}
.callout svg{width:18px;height:18px;flex:none;margin-top:2px}
.callout b{font-weight:600}
.callout.warn{background:var(--warn-soft);border:1px solid var(--warn-line);color:var(--warn-ink)}
.callout.warn svg{color:var(--warn)}
.callout.stop{background:var(--stop-soft);border:1px solid var(--stop-line);color:var(--stop-ink)}
.callout.stop svg{color:var(--stop)}
.callout.calm{background:var(--accent-soft);border:1px solid var(--accent-line);color:var(--accent-ink)}
.callout.calm svg{color:var(--accent-ink)}

/* hero emergency numbers — the ONE amber-bordered box on the homepage. Deep
   charcoal panel, 4px amber rule, white text; the dial numbers are near-white
   pills with dark digits so they stay legible in direct sunlight. Theme-agnostic
   on purpose (these exact values both themes) — it's the page's hard anchor. */
.callout.emergency{background:#22262d;border:1px solid var(--line-strong);border-left:4px solid #f59e0b;color:#fff;border-radius:0 var(--radius-sm) var(--radius-sm) 0}
.callout.emergency b{color:#fff}
.callout.emergency svg{color:#f59e0b}
.callout.emergency p{color:rgba(255,255,255,.82)}
.emergency .links{gap:9px;margin-top:12px}
.emergency .linkbtn{background:#f1f1f1;border-color:#f1f1f1;color:#1a1a1a;font-weight:700;font-size:1.15rem;padding:9px 16px;letter-spacing:.01em} /* ~+25% size & padding; 15:1 contrast */
.emergency .linkbtn:hover{background:#fff;border-color:#fff;color:#1a1a1a}
/* Protección Civil — the long, important number — gets its own full-width row at
   equal weight, instead of trailing the short pills as a faint runt. */
/* Protección Civil — the long number gets its own full-width chip: a quiet label
   stacked over a big bold number (left-aligned, no separator, never wraps), so
   it scans instantly under stress instead of reading like a table in a pill. */
.emergency .linkbtn.pc{flex-basis:100%;flex-direction:column;align-items:flex-start;gap:2px;padding:14px 24px}
.emergency .linkbtn.pc .pc-label{font-weight:600;font-size:.84rem;letter-spacing:.01em;opacity:.72}
.emergency .linkbtn.pc .pc-num{font-weight:800;font-size:1.4rem;line-height:1.06;letter-spacing:.02em;white-space:nowrap}

/* ---- Install / add-to-home-screen ----
   Hidden by default; app.js reveals it only when the PWA is installable
   (Android) or as a manual hint (iOS), and hides it once installed. Accent
   "do-this" tone — a calm preparedness action that never competes with the
   amber emergency box. ([hidden] needs the explicit rule below, or the
   .install display:flex would override it.) */
.install[hidden],.install-foot[hidden]{display:none}
.install{display:flex;align-items:center;gap:11px;margin:14px 0 0;padding:11px 13px;background:var(--accent-soft);border:1px solid var(--accent-line);border-radius:var(--radius-sm);color:var(--accent-ink)}
.install-ic{width:22px;height:22px;flex:none;color:var(--accent-ink)}
.install-go{display:flex;align-items:center;gap:11px;flex:1;min-width:0;background:none;border:0;margin:0;padding:0;text-align:left;color:inherit;font:inherit;cursor:pointer}
.install-txt{display:flex;flex-direction:column;gap:1px;min-width:0}
.install-txt b{font-weight:600;font-size:1rem}
.install-txt small{color:var(--muted);font-size:.85rem}
.install--ios{cursor:default}
.install--ios .install-txt{font-size:.92rem}
.install-x{flex:none;background:none;border:0;margin:-6px -4px -6px 0;padding:6px;color:var(--muted);cursor:pointer;border-radius:8px;line-height:0}
.install-x svg{width:16px;height:16px}
.install-x:hover{color:var(--ink)}
.install-foot{display:inline-flex;align-items:center;gap:5px;margin-left:6px;padding:2px 10px;border:1px solid var(--accent-line);background:var(--accent-soft);color:var(--accent-ink);border-radius:999px;font:inherit;font-size:.86rem;cursor:pointer;vertical-align:baseline}
.install-foot:hover{border-color:var(--accent)}

.links{display:flex;flex-wrap:wrap;gap:8px;margin-top:14px}
.linkbtn{display:inline-flex;align-items:center;gap:6px;border:1px solid var(--accent-line);background:var(--accent-soft);color:var(--accent-ink);border-radius:999px;padding:7px 13px;font-size:.92rem;text-decoration:none;font-weight:500}
.linkbtn:hover{text-decoration:none;border-color:var(--accent)}
.linkbtn svg{width:13px;height:13px;opacity:.7}

/* ---------- decision tree (acute life-safety flows) ----------
   One question at a time → branch → the next correct action. Progressive
   enhancement: without JS every step is visible as a plain top-to-bottom guide;
   app.js adds .dt-on, hides all but the current step, and moves focus on branch. */
.dtree{margin-top:16px}
.dtree:not(.dt-on) .dt-step + .dt-step{margin-top:18px;padding-top:18px;border-top:1px dashed var(--line)}
.dtree:not(.dt-on) .dt-back{display:none}
.dt-step{scroll-margin-top:120px}
.dt-step:focus{outline:none}
.dt-step:focus-visible{outline:3px solid var(--accent);outline-offset:6px;border-radius:10px}
.dt-q{font-family:var(--serif);font-weight:600;font-size:1.18rem;line-height:1.25;letter-spacing:-.004em;margin:0 0 13px;color:var(--ink)}
.dt-opts{display:flex;flex-wrap:wrap;gap:10px;margin:0}
.dt-opt{flex:1 1 200px;display:flex;align-items:center;gap:11px;text-align:left;font-family:inherit;font-size:1rem;font-weight:600;color:var(--ink);background:color-mix(in srgb,var(--tone,var(--accent)) 12%,var(--card-bg,var(--surface)));border:1px solid color-mix(in srgb,var(--tone,var(--accent)) 40%,var(--line-strong));border-radius:12px;padding:14px 16px;cursor:pointer;transition:border-color .15s ease,background .15s ease}
.dt-opt:hover{border-color:var(--tone,var(--accent));background:color-mix(in srgb,var(--tone,var(--accent)) 19%,var(--card-bg,var(--surface)))}
.dt-opt-ic{flex:none;width:28px;height:28px;border-radius:50%;display:flex;align-items:center;justify-content:center;background:color-mix(in srgb,var(--tone,var(--accent)) 24%,var(--card-bg,var(--surface)));color:color-mix(in srgb,var(--tone,var(--accent)) 62%,var(--ink))}
.dt-opt-ic svg{width:16px;height:16px;display:block}
/* back = a clear pill, not a faint text link — easy to find, with room beneath */
.dt-back{display:inline-flex;align-items:center;gap:7px;appearance:none;background:var(--surface-2);border:1px solid var(--line-strong);border-radius:999px;color:var(--muted);font-family:var(--mono);font-size:12.5px;letter-spacing:.06em;text-transform:uppercase;cursor:pointer;padding:8px 15px 8px 13px;margin:0 0 18px}
.dt-back svg{width:15px;height:15px}
.dt-back:hover{color:var(--ink);border-color:var(--faint)}
.dt-step ol.steps{margin-top:4px}

/* priority action — a sharper, heavier headline for the one thing to do now.
   Calm amber accent + left rule, no glare (honors the soft-contrast aesthetic). */
.actblock{border:1px solid var(--warn-line);border-left:5px solid var(--warn);background:var(--warn-soft);border-radius:0 var(--radius-sm) var(--radius-sm) 0;padding:14px 16px;margin:4px 0 14px}
.actblock .lead{display:flex;gap:10px;align-items:center;font-family:var(--serif);font-weight:600;font-size:1.26rem;line-height:1.16;letter-spacing:-.008em;color:var(--warn-ink);margin:0 0 5px}
.actblock .lead svg{width:22px;height:22px;flex:none;stroke-width:2.4}
.actblock p{margin:0;font-size:.98rem;color:var(--ink)}
.actblock p + p{margin-top:6px}

/* rhythm strip — the tap·pause·repeat locating signal, given visual weight */
.rhythm{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:6px 10px;margin:14px 0 4px;padding:15px 14px;border:1px solid var(--line-strong);border-radius:12px;background:var(--card-bg,var(--surface))}
.rhythm .beat{display:flex;flex-direction:column;align-items:center;text-align:center;gap:3px;min-width:78px}
.rhythm .beat b{font-family:var(--serif);font-size:1.12rem;font-weight:600;line-height:1.05;color:var(--ink)}
.rhythm .beat small{font-family:var(--mono);font-size:10px;letter-spacing:.06em;text-transform:uppercase;color:var(--faint)}
.rhythm .sep{flex:none;color:color-mix(in srgb,var(--tone,var(--accent)) 58%,var(--faint))}
.rhythm .sep svg{width:18px;height:18px;display:block}

/* ---------- teaching diagram ----------
   A wordless line illustration that teaches an action at a glance — language-
   independent, themeable via currentColor, soft strokes (no glare). Sibling of
   the rhythm strip: a bordered figure that floats methods side by side, each a
   <figure> of icon + bilingual label + dose chip, joined by an "o / or". */
.diagram{display:flex;flex-wrap:wrap;align-items:flex-start;justify-content:center;gap:8px 24px;width:fit-content;max-width:100%;margin:16px auto 4px;padding:18px 26px;border:1px solid var(--line-strong);border-radius:12px;background:var(--card-bg,var(--surface))}
.dia-method{display:flex;flex-direction:column;align-items:center;text-align:center;gap:8px;min-width:104px;margin:0}
.dia-method svg{width:52px;height:52px;display:block;color:var(--ink)}
.dia-method figcaption{font-family:var(--serif);font-size:1.06rem;font-weight:600;line-height:1.12;color:var(--ink)}
.dia-method .ic-heat{color:var(--warn)}   /* the flame under the pot */
.dia-method .ic-drop{color:var(--accent-ink)} /* the bleach drop */
/* the either/or connector — italic serif (a conjunction, not a "0") */
.dia-or{align-self:center;font-family:var(--serif);font-style:italic;font-size:1.02rem;color:var(--muted)}

/* solo variant: one iconic figure (drop·cover·hold) over an ordered word
   sequence — the mantra read left→right under the picture */
.diagram--solo{flex-direction:column;align-items:center;gap:11px;padding:18px 26px}
.dia-fig{margin:0;display:flex}
.dia-fig svg{width:134px;height:auto;display:block;color:var(--ink)}
.dia-seq{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:5px 11px;margin:0}
.dia-seq b{font-family:var(--serif);font-size:1.04rem;font-weight:600;line-height:1.1;color:var(--ink)}
.dia-seq .dia-dot{color:var(--faint)}

/* ---------- threshold flourish ---------- */
/* A full-bleed crown-of-thorns vine straddling the colour-change between the
   in-distress content and the "give back" bands (donate, feedback) — extra
   separation beyond the band colour. The host band is position:relative; the
   vine is absolutely centred on the band's top edge (the seam) and spans edge
   to edge. Decorative (aria-hidden), themeable (currentColor in a muted apricot
   "giving" tone), tiled via an SVG <pattern> so it stays a fixed size at any
   width, and faded a touch at the very edges. */
.band--seam{position:relative}
.vine-sep{position:absolute;top:0;left:0;right:0;z-index:2;transform:translateY(-50%);line-height:0;pointer-events:none;opacity:.72;color:color-mix(in srgb,var(--h-peach) 55%,var(--faint));-webkit-mask-image:linear-gradient(to right,transparent 0,#000 14px,#000 calc(100% - 14px),transparent 100%);mask-image:linear-gradient(to right,transparent 0,#000 14px,#000 calc(100% - 14px),transparent 100%)}
.vine-sep svg{display:block;width:100%;height:17px}

/* ---------- resource / item lists ---------- */
/* each entry is its own slightly-elevated card so it reads distinctly off the band */
.items{display:flex;flex-direction:column;gap:10px;margin-top:14px;background:transparent;border:0;overflow:visible}
.item{display:flex;gap:13px;align-items:flex-start;padding:16px 18px;border:1px solid var(--line-strong);border-radius:11px;background:linear-gradient(180deg,color-mix(in srgb,#fff 5%,var(--card-bg,var(--surface))),var(--card-bg,var(--surface)) 62%);box-shadow:var(--shadow-card);transition:border-color .15s ease,transform .15s ease}
.item:hover{border-color:var(--faint)}
.item-main{flex:1;min-width:0}
.item-main a.title,.item-main span.title{font-family:var(--serif);font-weight:600;text-decoration:none;color:var(--ink);font-size:1.06rem}
.item-main a.title:hover{color:var(--accent-ink)}
.item-main p{margin:.15em 0 0;color:var(--muted);font-size:.95rem}
.item-go{flex:none;color:var(--faint);margin-top:3px}
.item-go svg{width:17px;height:17px}
/* Whole-card click target — opt-in via .items--clickable on the list. An overlay
   on the title link covers the entire card, so the body and arrow are clickable
   too, while the <a> stays the real link (keyboard + screen-reader name). Only
   safe where each card has exactly one link, hence opt-in (not global). */
.items--clickable .item{position:relative}
.items--clickable .item:hover{cursor:pointer;border-color:var(--faint)}
.items--clickable .item:hover .item-main a.title{color:var(--accent-ink)}
.items--clickable .item:hover .item-go{color:var(--accent-ink)}
.items--clickable .item-main a.title::after{content:"";position:absolute;inset:0}

/* ---------- drop-off directory (diaspora) ----------
   Progressive enhancement over the static .dir-sec city cards: JS derives the
   country jump-bar, counts, and a client-side city filter (nothing leaves the
   device). Sky hue (--h-blue) = "data / directory" per the palette. .dir-tools
   stays [hidden] until JS enables it, so no-JS users keep the full static list. */
.dir{margin:30px 0 8px}
.dir .num{font-family:var(--mono);font-size:12px;letter-spacing:.1em;color:color-mix(in srgb,var(--h-blue) 58%,var(--ink));margin-bottom:6px}
.dir-label{display:block;font-size:.92rem;color:var(--muted);margin:15px 0 7px}
.dir-search-wrap{position:relative}
.dir-search-wrap .ic{position:absolute;left:14px;top:50%;transform:translateY(-50%);width:17px;height:17px;color:var(--faint);pointer-events:none}
.dir-search{width:100%;box-sizing:border-box;font-family:var(--sans);font-size:1rem;color:var(--ink);background:var(--surface);border:1px solid var(--line-strong);border-radius:999px;padding:12px 44px}
.dir-search::placeholder{color:var(--faint)}
.dir-search::-webkit-search-cancel-button{-webkit-appearance:none}
.dir-search:focus{outline:none;border-color:color-mix(in srgb,var(--h-blue) 55%,var(--line-strong));box-shadow:0 0 0 3px color-mix(in srgb,var(--h-blue) 20%,transparent)}
.dir-clear{position:absolute;right:9px;top:50%;transform:translateY(-50%);width:30px;height:30px;border:0;background:transparent;color:var(--faint);cursor:pointer;border-radius:999px;display:none;align-items:center;justify-content:center}
.dir-clear:hover{color:var(--ink)}
.dir-clear svg{width:16px;height:16px}
.dir-clear.show{display:inline-flex}
.dir-jump{display:flex;flex-wrap:wrap;gap:8px;margin-top:13px}
.dir-chip{display:inline-flex;align-items:center;gap:7px;border:1px solid color-mix(in srgb,var(--h-blue) 28%,var(--line-strong));background:color-mix(in srgb,var(--h-blue) 12%,var(--surface));color:color-mix(in srgb,var(--h-blue) 60%,var(--ink));border-radius:999px;padding:6px 13px;font-size:.92rem;font-weight:500;text-decoration:none;white-space:nowrap}
.dir-chip:hover{border-color:color-mix(in srgb,var(--h-blue) 52%,var(--line-strong));text-decoration:none}
.dir-chip .flag{font-size:1.05em;line-height:1}
.dir-chip .n{font-family:var(--mono);font-size:11px;color:var(--faint)}
.dir-chip.is-hidden{display:none}
.dir-count{font-family:var(--mono);font-size:12px;letter-spacing:.03em;color:var(--faint);margin:12px 0 0}
.dir-empty{display:none;color:var(--muted);font-size:.96rem;margin:10px 0 0}
.dir-empty.show{display:block}
.dir-legend{margin:12px 0 0;font-size:.88rem;color:var(--muted);line-height:1.85}
.dir-tier{margin:-2px 0 11px}
.dir-band{font-family:var(--mono);font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:color-mix(in srgb,var(--h-blue) 58%,var(--ink));border-top:1px solid var(--line-strong);padding-top:20px;margin:36px 0 2px}
.item.is-hidden,.dir-sec.is-hidden,.dir-band.is-hidden{display:none}

.tag{font-family:var(--mono);font-size:10.5px;letter-spacing:.05em;text-transform:uppercase;padding:3px 7px;border-radius:5px;white-space:nowrap;border:1px solid transparent;align-self:flex-start;margin-top:3px}
.tag.trust{background:var(--accent-soft);color:var(--accent-ink);border-color:var(--accent-line)}
.tag.community{background:var(--surface-2);color:var(--muted);border-color:var(--line-strong)}
.tag.verify{background:var(--warn-soft);color:var(--warn-ink);border-color:var(--warn-line)}

/* a resource carries two chips side by side: a colored TOPIC tag (what it's for)
   + a trust tag. (Class is .tag--topic, NOT .topic — .topic is the page-block style.) */
.tags{display:flex;flex-wrap:wrap;gap:6px;align-items:center;justify-content:flex-end;flex:none;padding-top:2px}
.tags .tag{margin-top:0}
/* one category chip per comms card sits in the content column, left-aligned */
.item-main .tags{justify-content:flex-start;margin-top:9px;padding-top:0}
.tag--topic{background:color-mix(in srgb,var(--tt) 16%,var(--card-bg,var(--surface)));color:color-mix(in srgb,var(--tt) 62%,var(--ink));border-color:color-mix(in srgb,var(--tt) 34%,var(--line-strong))}
.t-missing{--tt:var(--h-indigo)}
.t-shelter{--tt:var(--h-mint)}
.t-health {--tt:var(--h-orchid)}
.t-data   {--tt:var(--h-blue)}
.t-map    {--tt:var(--h-peach)}
.t-relief {--tt:var(--h-violet)}
.t-transport{--tt:var(--h-violet)}
.t-pets   {--tt:var(--h-mint)}
.t-verify {--tt:var(--h-blue)}
/* comms entry categories: free public access · how-to tip · app/tool */
.t-free{--tt:var(--h-mint)}
.t-tip {--tt:var(--h-violet)}
.t-app {--tt:var(--h-blue)}

/* directory laid out as side-by-side columns (kanban-style) instead of one
   tall list. Cards stack title/desc over tags so they read in a narrow column.
   auto-fill + min() keeps it 1 col on phones, ~2-3 on wider screens. */
/* directory as a kanban-style board: vertical topic lanes side by side.
   Each .dir-col is a lane; its cards stack under the label. Collapses to a
   single lane on narrow screens. Headings are real <h3>s, so the board is
   navigable by heading for screen readers. */
.items--board{display:flex;flex-direction:row;gap:16px;align-items:flex-start}
.dir-col{flex:1 1 0;min-width:0;display:flex;flex-direction:column;gap:10px}
.items--board .item{flex-wrap:wrap}
.items--board .item-main{flex-basis:100%}
.items--board .tags{justify-content:flex-start;width:100%}
.dir-group{margin:0;font-family:var(--mono);font-size:12px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--faint)}
.dir-col .item + .dir-group{margin-top:6px;padding-top:16px;border-top:1px solid var(--line)}
/* On a phone the lanes would collapse into one very long stack. Instead a JS
   enhancement turns the board into a tabbed switcher: a scrollable row of lane
   tabs (.dir-tabs) + one lane shown at a time. .dir-tabs is hidden on wide
   screens; without JS it never appears and the board just stacks (the rule
   below). */
.dir-tabs{display:none}
@media (max-width:720px){
  .items--board{flex-direction:column}
  .dir-tabs{display:flex;gap:6px;overflow-x:auto;-webkit-overflow-scrolling:touch;scrollbar-width:none;margin:2px 0 14px;padding-bottom:2px}
  .dir-tabs::-webkit-scrollbar{display:none}
  .dir-tab{flex:0 0 auto;cursor:pointer;font-family:var(--mono);font-size:12px;font-weight:600;letter-spacing:.05em;text-transform:uppercase;color:var(--muted);background:var(--surface);border:1px solid var(--line);border-radius:999px;padding:9px 15px;white-space:nowrap;transition:color .15s ease,border-color .15s ease,background .15s ease}
  .dir-tab:hover{color:var(--ink)}
  .dir-tab[aria-selected="true"]{color:var(--ink);background:color-mix(in srgb,var(--accent) 14%,var(--surface));border-color:color-mix(in srgb,var(--accent) 45%,var(--line))}
  .items--board.tabs-on > .dir-col{display:none}
  .items--board.tabs-on > .dir-col.is-active{display:flex}
}
@media (max-width:560px){
  .item{flex-wrap:wrap}
  .item-main{flex-basis:100%}
  .tags{justify-content:flex-start;width:100%}
}

.cardlink{display:flex;gap:14px;align-items:center;background:var(--surface);border:1px solid var(--line-strong);border-radius:var(--radius);padding:20px 22px;text-decoration:none;color:var(--ink);margin-top:14px;box-shadow:var(--shadow-card)}
.cardlink:hover{border-color:var(--accent);text-decoration:none}
.cardlink .ar{margin-left:auto;color:var(--accent-ink)}
.cardlink .ar svg{width:22px;height:22px}
.cardlink b{font-family:var(--serif);font-size:1.16rem;font-weight:600}
.cardlink p{margin:.2em 0 0;color:var(--muted);font-size:.95rem}

/* help chooser — two square cards: donate online vs find a collection point */
.choose{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-top:18px}
.choose-card{display:flex;flex-direction:column;align-items:flex-start;gap:7px;background:var(--surface);border:1px solid var(--line-strong);border-radius:var(--radius);padding:24px 22px;text-decoration:none;color:var(--ink);box-shadow:var(--shadow-card);transition:border-color .15s ease,transform .15s ease}
.choose-card:hover{border-color:var(--accent);text-decoration:none;transform:translateY(-2px)}
.choose-art{width:100%;max-width:104px;height:auto;color:var(--accent-ink);margin-bottom:4px}
.choose-card b{font-family:var(--serif);font-size:1.24rem;font-weight:600}
.choose-card p{margin:0;color:var(--muted);font-size:.95rem;flex:1}
.choose-go{margin-top:6px;color:var(--accent-ink)}
.choose-go svg{width:22px;height:22px}
@media (max-width:560px){.choose{grid-template-columns:1fr}}

/* topic preview grid — a calm "what's inside" funnel into a guide */
.preview{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:10px;margin-top:16px}
.ptile{display:flex;align-items:center;gap:11px;padding:12px 13px;background:var(--card-bg,var(--surface));border:1px solid var(--line-strong);border-radius:12px;text-decoration:none;color:var(--ink);box-shadow:var(--shadow-card);transition:border-color .15s ease,transform .15s ease}
.ptile:hover{border-color:var(--accent);text-decoration:none}
.ptile-ic{flex:none;width:38px;height:38px;border-radius:10px;display:flex;align-items:center;justify-content:center;background:color-mix(in srgb,var(--h-indigo) 14%,var(--surface-2));border:1px solid color-mix(in srgb,var(--h-indigo) 30%,var(--line-strong));color:color-mix(in srgb,var(--h-indigo) 55%,var(--ink))}
.ptile-ic svg{width:20px;height:20px}
.ptile-lbl{font-weight:600;font-size:.95rem;line-height:1.2;min-width:0}

/* numbered topic blocks (rescate / supervivencia) */
.topic{padding:26px 0;border-top:1px solid var(--line);scroll-margin-top:104px}
.topic:first-of-type{border-top:0}
.topic .num{font-family:var(--mono);font-size:12px;letter-spacing:.1em;color:var(--accent-ink);margin-bottom:6px}
.topic ul{margin:.4em 0 1em;padding-left:1.15em}
.topic ul li{margin:.3em 0}
.dose{font-family:var(--mono);font-size:.92rem;background:var(--surface-2);border:1px solid var(--line);border-radius:6px;padding:2px 6px;white-space:nowrap}

/* ---------- form ---------- */
.form{background:var(--surface);border:1px solid var(--line-strong);border-radius:var(--radius);padding:20px;margin-top:16px;box-shadow:var(--shadow-card)}
.form label{display:block;font-weight:500;font-size:.95rem;margin:14px 0 6px}
.form label:first-child{margin-top:0}
.form select,.form input,.form textarea{width:100%;font-family:inherit;font-size:16px;color:var(--ink);background:var(--paper);border:1px solid var(--line-strong);border-radius:var(--radius-sm);padding:11px 12px}
.form textarea{min-height:96px;resize:vertical}
.form .hp{position:absolute;left:-9999px}
.form button{margin-top:18px;background:var(--accent);color:#fff;border:0;border-radius:999px;padding:12px 22px;font-size:1rem;font-weight:600;cursor:pointer;font-family:inherit}
.form button:hover{filter:brightness(1.05)}
.priv{font-size:.88rem;color:var(--muted);margin-top:14px;display:flex;gap:8px;align-items:flex-start}
.priv svg{width:16px;height:16px;flex:none;margin-top:2px;color:var(--accent)}

/* ---------- footer ---------- */
footer{border-top:1px solid var(--line);background:var(--surface);padding:30px 0 50px;margin-top:30px}
footer .container{color:var(--muted);font-size:.92rem}
footer .ft-stamp{font-family:var(--mono);font-size:11.5px;color:#828c95;letter-spacing:.03em} /* matches hero .stamp — lifted from --faint (3.5:1) to 4.5:1 on surface */
footer a{color:var(--accent-ink)}

@media (prefers-reduced-motion: reduce){
  *{animation:none!important;transition:none!important}
  html{scroll-behavior:auto}
}
@media (max-width:560px){
  body{font-size:16px}
  .brand span{display:none}
  .top-row{gap:8px}
}