/* ===========================================================================
   /emergency — Nepal emergency helplines
   Page: src/pages/emergency.astro · Data: src/data/emergency-contacts.js
   ===========================================================================

   Every colour here resolves through a semantic `--ice-color-*` token, so both
   themes are covered by the contract in docs/04 §5 rather than by a second set
   of values maintained here. The memorial band on the homepage is the site's
   one documented literal-colour exception; this page is not, and must not
   become one.

   Every selector is prefixed `.emg-` and every element rule is scoped under
   `.page-emergency`, per the AGENTS.md rule about broad selectors leaking into
   shared chrome.

   TAP TARGETS. This page is read one-handed, on a phone, by someone who is
   frightened. Every phone link is a real target: the four lifeline cards are
   96px+ tall, and no inline `.emg-num` is below the 48px control minimum.
   =========================================================================== */

/* Every Nepali string on this page — the lifeline labels, the desk names, the
   province names — is set in the same local Devanagari stack the homepage
   memorial and ice-tools.css use. Without this they inherit the Apple UI stack,
   which carries no Devanagari at all, so each reader got whatever their OS
   happened to substitute and the four emergency cards rendered in a different
   face on every phone. No @font-face and no download: PRODUCT.md forbids
   self-hosted faces. */
.page-emergency {
  /* Promoted from a repeated literal on 2026-08-28. Two surfaces now set
     Devanagari (this page and the homepage memorial), which is the point at
     which a value stops being local and starts being a token. */
  --emg-devanagari: "Noto Sans Devanagari", "Nirmala UI", Mangal, sans-serif;
}

.page-emergency [lang="ne"] {
  /* `!important` because `body.page-course main :is(p,li,dd)` pins font-family
     with !important and .emg-desk__np is a <p>. Inside the docs/04 §1 contract:
     Devanagari is a script the Apple UI stack cannot set. */
  font-family: var(--emg-devanagari) !important;
}

/* ── WIDTH: PROSE READS, DIRECTORIES FILL ─────────────────────────────────

   The defect this fixes: `.article-body` caps everything at
   `--ice-measure-prose-wide`, which is correct for /privacy and wrong here.
   This page is not an article, it is a DIRECTORY — 47 numbers, 7 provinces, 10
   desks — and on a 1440px screen it was rendering as a single ~680px column
   with the right half of the viewport empty and every card stacked one per row.
   That is what made it read as weird on a PC and bland everywhere.

   The fix is not "make it all wide". Body measure has to stay at 65-75ch or the
   prose becomes unreadable, so the two things are separated: **the reading
   column keeps its measure, and only the grids break out of it.** Standard
   editorial full-bleed-inside-prose, using the measure token the system already
   owns rather than a new number.

   Everything not listed as a grid below inherits the prose measure by default,
   so a new prose element needs no rule and a new grid needs one line. */

/* THE DEAD HALF OF THE SCREEN. `.article-layout` is `minmax(0,1fr) 320px` from
   760px up — a content column plus a 320px SIDEBAR. This page has no sidebar,
   so 320px of column and a 64px gap sat permanently blank and the directory was
   squeezed into 784px of a 1168px container. Collapsed to the one-column value
   the base rule already uses; the sidebar track was never earning its place
   here. */
.page-emergency .article-layout { grid-template-columns: minmax(0, 1fr); }

.page-emergency .article-body { max-width: none; }

.page-emergency .article-body > :is(p, h1, h2, h3, h4, blockquote),
.page-emergency .emg-checklist,
.page-emergency .updated-stamp,
.page-emergency .course-breadcrumb {
  max-width: var(--ice-measure-prose-wide);
}

.page-emergency .emg-standfirst {
  font-size: var(--ice-type-lede-size);
  line-height: var(--ice-type-lede-line);
  color: var(--ice-color-text);
  margin: 0 0 4px;
}

/* ── The four ──────────────────────────────────────────────────────────── */

.page-emergency .emg-lifeline {
  list-style: none;
  margin: 24px 0 32px;
  padding: 0;
  display: grid;
  gap: 12px;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

@media (min-width: 900px) {
  .page-emergency .emg-lifeline { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

.page-emergency .emg-lifeline__item { margin: 0; }

.page-emergency .emg-lifeline__link {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 4px;
  min-height: 104px;
  padding: 16px;
  border-radius: 8px;
  background: var(--ice-color-action);
  color: var(--ice-color-on-action);
  text-decoration: none;
  transition: background var(--dur-fast) var(--ease);
}

.page-emergency .emg-lifeline__link:hover { background: var(--ice-color-action-hover); }

.page-emergency .emg-lifeline__link:focus-visible {
  outline: 3px solid var(--ice-color-text);
  outline-offset: 3px;
}

.page-emergency .emg-lifeline__number {
  font-size: clamp(2.25rem, 1.9rem + 1.6vw, 3rem);
  line-height: 1;
  font-weight: 700;
  letter-spacing: -.02em;
  font-variant-numeric: tabular-nums;
}

.page-emergency .emg-lifeline__label {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 6px;
  font-size: var(--ice-type-button-size);
  line-height: var(--ice-type-button-line);
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
}

.page-emergency .emg-lifeline__np {
  font-weight: 400;
  letter-spacing: 0;
  text-transform: none;
  opacity: .85;
}

.page-emergency .emg-lifeline__detail {
  margin: 8px 2px 0;
  font-size: var(--ice-type-caption-size);
  line-height: var(--ice-type-caption-line);
  color: var(--ice-color-text-muted);
}

/* ── Toll figures ──────────────────────────────────────────────────────── */

.page-emergency .emg-toll {
  display: grid;
  gap: 1px;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  margin: 24px 0 12px;
  padding: 0;
  background: var(--ice-color-border);
  border: 1px solid var(--ice-color-border);
  border-radius: 8px;
  overflow: hidden;
}

@media (min-width: 720px) {
  .page-emergency .emg-toll { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

.page-emergency .emg-toll__cell {
  background: var(--ice-color-surface);
  padding: 16px 12px;
  text-align: center;
  /* "Confirmed dead" wrapped while "Injured" did not, which pushed its figure
     a line lower than the other three. The labels now share a fixed block so
     all four numbers sit on one baseline whatever the label length. */
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.page-emergency .emg-toll__cell dt { min-height: 2.8em; }

.page-emergency .emg-toll__cell dt {
  font-size: var(--ice-type-label-size);
  line-height: var(--ice-type-label-line);
  font-weight: var(--ice-type-label-weight);
  letter-spacing: var(--ice-type-label-track);
  text-transform: uppercase;
  color: var(--ice-color-text-muted);
  margin: 0 0 6px;
}

.page-emergency .emg-toll__cell dd {
  margin: 0;
  font-size: var(--ice-type-stat-size);
  line-height: var(--ice-type-stat-line);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  color: var(--ice-color-text);
}

/* The missing are the number this page exists for. */
.page-emergency .emg-toll__cell--accent dd { color: var(--ice-color-text-action); }

.page-emergency .emg-asof {
  font-size: var(--ice-type-caption-size);
  line-height: var(--ice-type-caption-line);
  color: var(--ice-color-text-muted);
  margin: 0 0 24px;
}

/* ── Checklist ─────────────────────────────────────────────────────────── */

.page-emergency .emg-checklist {
  list-style: none;
  margin: 0 0 24px;
  padding: 0;
  display: grid;
  gap: 10px;
}

.page-emergency .emg-checklist li {
  position: relative;
  padding: 12px 14px 12px 42px;
  border: 1px solid var(--ice-color-border);
  border-radius: 6px;
  background: var(--ice-color-surface-muted);
  color: var(--ice-color-on-surface-muted);
  font-size: var(--ice-type-body-size);
  line-height: var(--ice-type-body-line);
}

.page-emergency .emg-checklist li::before {
  content: '';
  position: absolute;
  left: 15px;
  top: 1.05em;
  width: 12px;
  height: 12px;
  border-radius: 2px;
  border: 2px solid var(--ice-color-accent);
}

/* ── Desk cards (national, specialist, relief points) ──────────────────── */

.page-emergency .emg-desks {
  list-style: none;
  margin: 20px 0 30px;
  padding: 0;
  display: grid;
  gap: 12px;
}

@media (min-width: 760px) {
  .page-emergency .emg-desks { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

.page-emergency .emg-desk {
  margin: 0;
  padding: 18px;
  border: 1px solid var(--ice-color-border);
  border-radius: 8px;
  background: var(--ice-color-surface);
  color: var(--ice-color-on-surface);
}

/* The "Toll free" badge used to live INSIDE this <h3>, which put it in the
   heading's own text: a screen reader and the document outline both read
   "Health Emergency Operation CentreToll free". The badge is now a sibling and
   this wrapper does the layout the heading used to do. */
.page-emergency .emg-desk__head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin-bottom: 2px;
}

.page-emergency .emg-desk__name {
  margin: 0;
  font-size: var(--ice-type-h4-size);
  line-height: var(--ice-type-h4-line);
  font-weight: var(--ice-type-h4-weight);
  letter-spacing: var(--ice-type-h4-track);
  color: var(--ice-color-text);
}

.page-emergency .emg-desk__free {
  flex: none;
  padding: 3px 8px;
  border-radius: 3px;
  background: var(--ice-color-accent);
  color: var(--ice-color-on-accent);
  font-size: 11px;
  line-height: 1.3;
  font-weight: 700;
  letter-spacing: .07em;
  text-transform: uppercase;
}

.page-emergency .emg-desk__np {
  margin: 0 0 10px;
  font-size: var(--ice-type-caption-size);
  line-height: var(--ice-type-caption-line);
  color: var(--ice-color-text-muted);
}

.page-emergency .emg-desk__numbers {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 2px;
  margin: 0 0 6px;
}

.page-emergency .emg-desk__also {
  margin: 0 0 6px;
  font-size: var(--ice-type-caption-size);
  line-height: var(--ice-type-caption-line);
  color: var(--ice-color-text-muted);
}

.page-emergency .emg-desk__also a { color: var(--ice-color-text-action); }

.page-emergency .emg-desk__detail {
  margin: 8px 0 0;
  font-size: var(--ice-type-caption-size);
  line-height: var(--ice-type-caption-line);
  color: var(--ice-color-text-muted);
}

/* The number itself. A control, not a run of text: 48px minimum, always. */
.page-emergency .emg-num {
  display: inline-flex;
  align-items: center;
  min-height: 48px;
  padding: 4px 12px;
  border-radius: 5px;
  background: var(--ice-color-surface-muted);
  border: 1px solid var(--ice-color-border);
  color: var(--ice-color-text-action);
  font-size: 1.0625rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  letter-spacing: .01em;
  text-decoration: none;
  white-space: nowrap;
  transition: background var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease);
}

.page-emergency .emg-num:hover {
  background: var(--ice-color-surface-field);
  border-color: var(--ice-color-text-action);
}

.page-emergency .emg-num:focus-visible {
  outline: 3px solid var(--ice-color-text-action);
  outline-offset: 2px;
}

.page-emergency .emg-sep { color: var(--ice-color-text-muted); padding: 0 2px; }

/* Alternate lines for the same desk. Quieter than the primary chip, still a
   real 48px target: on this page every callable number is something a person
   taps under stress, and a 20px inline link is not a control. Inline links
   inside running prose stay inline links — those are references to a number,
   not the button for it. */
.page-emergency .emg-desk__numbers--alt { margin-top: -2px; }

.page-emergency .emg-also-label {
  font-size: var(--ice-type-caption-size);
  color: var(--ice-color-text-muted);
  padding-right: 4px;
}

.page-emergency .emg-num--alt {
  font-size: .9375rem;
  font-weight: 600;
  background: transparent;
  color: var(--ice-color-text-muted);
}

.page-emergency .emg-num--alt:hover {
  background: var(--ice-color-surface-muted);
  color: var(--ice-color-text-action);
}

/* ── Provinces ─────────────────────────────────────────────────────────── */

.page-emergency .emg-provinces {
  list-style: none;
  margin: 20px 0 30px;
  padding: 0;
  display: grid;
  gap: 12px;
}

@media (min-width: 760px) {
  .page-emergency .emg-provinces { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* Same frame as .emg-desk, deliberately. An earlier revision gave these a 4px
   coloured left border, crimson on the two flood-affected provinces. It went:
   on five of the seven cards that stripe carried no information at all, and on
   the other two the meaning was already stated in words by the "Flood-affected"
   chip in the card header. A colour stripe needs a legend the reader does not
   have; a labelled chip does not. Do not reintroduce it. */
.page-emergency .emg-province {
  margin: 0;
  padding: 18px;
  border: 1px solid var(--ice-color-border);
  border-radius: 8px;
  background: var(--ice-color-surface);
  color: var(--ice-color-on-surface);
}

.page-emergency .emg-province__head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin-bottom: 2px;
}

.page-emergency .emg-province__name {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 8px;
  margin: 0;
  font-size: var(--ice-type-h4-size);
  line-height: var(--ice-type-h4-line);
  font-weight: var(--ice-type-h4-weight);
  letter-spacing: var(--ice-type-h4-track);
  color: var(--ice-color-text);
}

.page-emergency .emg-province__np {
  font-size: var(--ice-type-caption-size);
  font-weight: 400;
  color: var(--ice-color-text-muted);
}

.page-emergency .emg-province__flag {
  flex: none;
  padding: 3px 8px;
  border-radius: 3px;
  background: var(--ice-color-action);
  color: var(--ice-color-on-action);
  font-size: 11px;
  line-height: 1.3;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
}

.page-emergency .emg-province__seat,
.page-emergency .emg-province__districts,
.page-emergency .emg-province__source {
  margin: 0 0 8px;
  font-size: var(--ice-type-caption-size);
  line-height: var(--ice-type-caption-line);
  color: var(--ice-color-text-muted);
}

.page-emergency .emg-province__seat { margin-bottom: 10px; }
.page-emergency .emg-province__districts { margin-top: 4px; }
.page-emergency .emg-province__source { margin-bottom: 0; }
.page-emergency .emg-province__source a { color: var(--ice-color-text-action); }

/* ── Valley strip ──────────────────────────────────────────────────────── */

.page-emergency .emg-valley {
  list-style: none;
  margin: 18px 0 30px;
  padding: 0;
  display: grid;
  gap: 8px;
}

.page-emergency .emg-valley__item {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 8px 14px;
  border: 1px solid var(--ice-color-border);
  border-radius: 6px;
  background: var(--ice-color-surface);
}

.page-emergency .emg-valley__name {
  font-size: var(--ice-type-body-size);
  font-weight: 600;
  color: var(--ice-color-text);
}

.page-emergency .emg-valley__nums {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 2px;
}

/* ── Relief account ────────────────────────────────────────────────────── */

.page-emergency .emg-account {
  margin: 18px 0 26px;
  padding: 18px;
  border: 1px solid var(--ice-color-border);
  border-radius: 8px;
  background: var(--ice-color-surface-muted);
  color: var(--ice-color-on-surface-muted);
  display: grid;
  gap: 12px;
}

@media (min-width: 620px) {
  .page-emergency .emg-account { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

.page-emergency .emg-account dt {
  margin: 0 0 4px;
  font-size: var(--ice-type-label-size);
  line-height: var(--ice-type-label-line);
  font-weight: var(--ice-type-label-weight);
  letter-spacing: var(--ice-type-label-track);
  text-transform: uppercase;
  color: var(--ice-color-text-muted);
}

.page-emergency .emg-account dd {
  margin: 0;
  font-size: 1.0625rem;
  line-height: 1.4;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  color: var(--ice-color-text);
  /* Account numbers are long and must never widen the page on a 320px screen. */
  overflow-wrap: anywhere;
}

/* ── Roads ─────────────────────────────────────────────────────────────── */

.page-emergency .emg-roads {
  list-style: none;
  margin: 20px 0 30px;
  padding: 0;
  display: grid;
  gap: 10px;
}

.page-emergency .emg-road {
  margin: 0;
  padding: 16px 18px;
  border: 1px solid var(--ice-color-border);
  border-radius: 8px;
  background: var(--ice-color-surface);
  color: var(--ice-color-on-surface);
}

.page-emergency .emg-road__name {
  margin: 0 0 4px;
  font-size: var(--ice-type-h4-size);
  line-height: var(--ice-type-h4-line);
  font-weight: var(--ice-type-h4-weight);
  letter-spacing: var(--ice-type-h4-track);
  color: var(--ice-color-text);
}

.page-emergency .emg-road__status {
  margin: 0 0 6px;
  font-size: var(--ice-type-caption-size);
  line-height: var(--ice-type-caption-line);
  font-weight: 700;
  letter-spacing: .03em;
  text-transform: uppercase;
  color: var(--ice-color-text-action);
}

.page-emergency .emg-road__detail {
  margin: 0;
  font-size: var(--ice-type-caption-size);
  line-height: var(--ice-type-caption-line);
  color: var(--ice-color-text-muted);
}

/* ── Close ─────────────────────────────────────────────────────────────── */

.page-emergency .emg-close {
  margin-top: 28px;
  padding-top: 20px;
  border-top: 1px solid var(--ice-color-border);
  color: var(--ice-color-text-muted);
  font-size: var(--ice-type-caption-size);
  line-height: var(--ice-type-caption-line);
}

/* The same condolence that heads the homepage memorial, closing this page.
   One line, in the language the family reading it grieves in. */
.page-emergency .emg-close__np {
  display: block;
  margin-bottom: 6px;
  color: var(--ice-color-text-accent);
  font-size: 1.0625rem;
  line-height: 1.5;
  font-weight: 600;
}

/* ── Pressed state ─────────────────────────────────────────────────────────
   Declared for every control family on this page. A phone link that does not
   acknowledge the tap gets tapped twice, and on a page where a tap places a
   real call that is a defect rather than a nicety. Kept to a transform so it
   costs no repaint. */
.page-emergency .emg-lifeline__link:active,
.page-emergency .emg-num:active {
  transform: translateY(1px);
}

.page-emergency .emg-lifeline__link:active { background: var(--ice-color-action-hover); }
.page-emergency .emg-num:active { background: var(--ice-color-surface-field); }

@media (prefers-reduced-motion: reduce) {
  .page-emergency .emg-lifeline__link:active,
  .page-emergency .emg-num:active { transform: none; }
}

/* The grids take the room. `auto-fit` rather than a fixed count so the seven
   provinces and four roads reflow instead of leaving a stranded orphan at one
   specific width. */
@media (min-width: 1080px) {
  .page-emergency .emg-desks,
  .page-emergency .emg-provinces {
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  }
  .page-emergency .emg-roads { grid-template-columns: repeat(auto-fit, minmax(330px, 1fr)); }
  .page-emergency .emg-valley { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  /* The toll is four figures. Left to fill 1200px they drift apart into four
     unrelated numbers, so it keeps a measure of its own. */
  .page-emergency .emg-toll { max-width: 780px; }
  .page-emergency .emg-lifeline { gap: 16px; }
}