/* Assam Disaster Safety — mobile-first.
   Design constraints that drove these choices:
   - Read outdoors, one-handed, on a cheap phone, possibly in panic.
     → large type, high contrast, 48px touch targets, no thin weights.
   - Risk is never signalled by colour alone (colour-blind users, glare).
     → every risk state also carries an icon and a text label.
   - Assamese (Bengali script) has tall ascenders and descenders.
     → generous line-height and no tight letter-spacing on headings. */

/* Data face. Vendored, not CDN — the app has to work offline, and this is the
   face the numbers are set in: levels, distances, ETAs, station codes. A
   monospace with real tabular figures is the right instrument for a gauge
   readout, and it keeps a column of water levels aligned so they can be
   compared down the page rather than read one at a time. */
@font-face {
  font-family: 'Plex Mono';
  src: url('/vendor/plex-mono-400.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Plex Mono';
  src: url('/vendor/plex-mono-600.woff2') format('woff2');
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}

:root {
  /* ── Brahmaputra in spate ───────────────────────────────────────────────
     The river is not blue. Water coming off the Himalaya carries so much
     sediment that the Brahmaputra in flood runs opaque ochre-brown, and the
     chars it builds and destroys each year are pale sand. Every other flood
     app is blue; this one is the colour of the actual water.

     The important discipline: silt is the colour of WATER, at every level.
     It never means "danger". Danger is a painted line on the gauge that the
     water rises past — which is exactly how a real staff gauge works, and it
     keeps the alarm colours from being diluted by decoration. */
  --river-night: #0A1A1C;   /* base — river at night */
  --river-deep:  #102528;   /* raised surfaces */
  --river-mid:   #163336;   /* panels */
  --embankment:  #22474B;   /* rules and borders — the earthen dyke line */

  --silt:        #B3763A;   /* the water itself */
  --silt-bright: #D9954E;
  --silt-wash:   rgba(179, 118, 58, .16);

  --char-sand:   #ECE5D8;   /* text — pale sand of the chars */
  --char-dim:    #A6B6B3;
  --char-mute:   #6D8481;

  /* Threshold marks. Deliberately clinical, deliberately not silt. */
  --mark-safe:    #4FA46E;
  --mark-warning: #E0A32E;
  --mark-danger:  #C4342B;
  --mark-severe:  #8E2018;
  --mark-hfl:     #7E9A9C;

  /* Compatibility aliases so existing components keep working while the
     identity lands. New work should use the river/silt/char names above. */
  --bg: var(--river-night);
  --bg-raised: var(--river-deep);
  --bg-panel: var(--river-mid);
  --line: var(--embankment);
  --text: var(--char-sand);
  --text-dim: var(--char-dim);
  --text-mute: var(--char-mute);
  --safe: var(--mark-safe);
  --safe-bright: #5FBC82;
  --watch: var(--mark-warning);
  --warning: #D9822B;
  --danger: var(--mark-danger);
  --severe: var(--mark-severe);
  --accent: var(--silt-bright);
  --safe-fill: rgba(79, 164, 110, .18);
  --danger-fill: rgba(196, 52, 43, .26);
  --warning-fill: rgba(217, 130, 43, .22);

  /* Type ramp. Fixed steps rather than a modular scale, because the readings
     have to hit specific legibility floors on a cheap phone in daylight. */
  --t-xs: 11.5px;
  --t-sm: 13px;
  --t-base: 15px;
  --t-md: 17px;
  --t-lg: 21px;
  --t-xl: 28px;
  --t-display: 38px;

  /* 4px rhythm. */
  --s1: 4px;  --s2: 8px;  --s3: 12px; --s4: 16px;
  --s5: 20px; --s6: 24px; --s8: 32px;

  --radius: 14px;
  --radius-sm: 10px;
  --shadow: 0 6px 24px rgba(0, 0, 0, .45);

  --topbar-h: 56px;
  --tabbar-h: 62px;
  --safe-top: env(safe-area-inset-top, 0px);
  --safe-bottom: env(safe-area-inset-bottom, 0px);

  --font: system-ui, -apple-system, "Segoe UI", Roboto, "Noto Sans", "Noto Sans Bengali", sans-serif;
  --font-data: 'Plex Mono', ui-monospace, "SF Mono", Menlo, Consolas, monospace;
}

/* Every number in the app is set in the data face with tabular figures, so a
   level, a distance and an ETA all sit on the same rhythm and a changing
   reading does not shift the layout under someone's thumb. */
.num {
  font-family: var(--font-data);
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1;
  letter-spacing: -.01em;
}

/* Assamese renders in Bengali script — give it room to breathe. */
html[lang="as"] {
  --font: "Noto Sans Bengali", "Noto Serif Bengali", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}
html[lang="as"] body { line-height: 1.7; }

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  height: 100%;
  overscroll-behavior-y: none;
}

body {
  background: var(--bg);
  color: var(--text);
  font-family: var(--font);
  font-size: 16px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  -webkit-tap-highlight-color: transparent;
  display: flex;
  flex-direction: column;
}

/* Author CSS with display:flex would otherwise beat the `hidden` attribute. */
[hidden] { display: none !important; }

h1, h2, h3 { margin: 0; font-weight: 650; line-height: 1.3; }
button { font-family: inherit; font-size: inherit; color: inherit; }

/* Keyboard and switch-access users had no visible focus at all before this.
   Silt on a dark ground clears 3:1 against every surface in the palette, and
   the offset keeps the ring clear of the element's own border. */
:focus-visible {
  outline: 3px solid var(--silt-bright);
  outline-offset: 2px;
  border-radius: 4px;
}
/* Only suppress the ring for pointer users, never for keyboard. */
:focus:not(:focus-visible) { outline: none; }

/* Anything interactive clears 44px, the floor for a wet thumb on a cheap
   phone. Where the visual box must stay small, the hit area is grown with a
   pseudo-element so the design does not have to inflate to match. */
.tap-44 { position: relative; }
.tap-44::before {
  content: "";
  position: absolute;
  top: 50%; left: 50%;
  width: max(100%, 44px);
  height: max(100%, 44px);
  transform: translate(-50%, -50%);
}

/* ---------------------------------------------------------- disclaimer --
   Shown once before first use. It is deliberately not scary-looking: the point
   is to set expectations honestly, not to frighten someone who opened the app
   because water is rising. The emergency numbers are repeated at the bottom so
   the screen is still useful to somebody who cannot wait to read it. */

.modal {
  border: none;
  padding: 0;
  background: transparent;
  max-width: min(440px, calc(100vw - 24px));
  width: 100%;
  max-height: calc(100vh - 32px);
  color: var(--char-sand);
}
.modal::backdrop {
  background: rgba(4, 12, 13, .82);
  backdrop-filter: blur(3px);
}
.modal[open] { animation: modalIn .3s cubic-bezier(.2,.8,.3,1); }
@keyframes modalIn {
  from { opacity: 0; transform: translateY(14px) scale(.98); }
  to { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) { .modal[open] { animation: none; } }

.modal__inner {
  background: var(--river-deep);
  border: 1px solid var(--embankment);
  /* Silt rule along the top — the one place the water colour appears as a
     graphic rather than as a reading. */
  border-top: 3px solid var(--silt);
  border-radius: var(--radius);
  padding: var(--s5) var(--s5) var(--s4);
  box-shadow: 0 18px 50px rgba(0,0,0,.6);
  max-height: calc(100vh - 32px);
  overflow-y: auto;
}

.modal__mark { color: var(--silt-bright); margin-bottom: var(--s3); }
.modal__title { font-size: var(--t-lg); font-weight: 750; letter-spacing: -.01em; }
.modal__lead {
  margin: var(--s2) 0 0;
  font-size: var(--t-base);
  color: var(--char-dim);
  line-height: 1.55;
}

.modal__points { list-style: none; margin: var(--s4) 0 0; padding: 0; display: flex; flex-direction: column; gap: var(--s3); }
.modal__points li {
  font-size: var(--t-sm);
  color: var(--char-dim);
  line-height: 1.55;
  padding-left: var(--s5);
  position: relative;
}
.modal__points li::before {
  content: "";
  position: absolute;
  left: 0; top: .52em;
  width: 10px; height: 2px;
  background: var(--silt);
  border-radius: 1px;
}
.modal__points b { color: var(--char-sand); font-weight: 650; }

.modal__emergency {
  margin: var(--s4) 0 0;
  padding: var(--s3);
  border-radius: var(--radius-sm);
  background: rgba(196, 52, 43, .13);
  border: 1px solid rgba(196, 52, 43, .35);
  font-size: var(--t-sm);
  color: #F2C4BF;
  line-height: 1.55;
}
.modal__emergency b { font-family: var(--font-data); font-weight: 600; color: #fff; }

/* Silt, not the safe-green used elsewhere. Green in this app specifically means
   "safe" or "relief camp"; spending it on a generic acknowledgement would
   weaken it where it actually carries meaning. */
.modal__accept {
  width: 100%;
  margin-top: var(--s4);
  background: var(--silt);
  color: #1B0F04;
  font-weight: 700;
}
.modal__accept:active { background: #9C6530; }

/* ------------------------------------------------------------- alert bar */

.alert-bar {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  padding-top: calc(10px + var(--safe-top));
  background: var(--danger);
  color: #fff;
  position: relative;
  z-index: 60;
  animation: alertIn .28s ease-out;
}
.alert-bar--severe { background: var(--severe); }
.alert-bar--warning { background: var(--warning); color: #1a1005; }
.alert-bar--severe .alert-bar__icon { animation: pulse 1.1s ease-in-out infinite; }

@keyframes alertIn { from { transform: translateY(-100%); } to { transform: none; } }
@keyframes pulse { 0%, 100% { opacity: 1; transform: scale(1); } 50% { opacity: .55; transform: scale(1.12); } }

.alert-bar__icon { font-size: 22px; line-height: 1; flex: none; }
.alert-bar__body { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.alert-bar__title { font-size: 15px; font-weight: 700; }
.alert-bar__text { font-size: 13.5px; opacity: .93; }
.alert-bar__action {
  flex: none;
  background: rgba(255, 255, 255, .2);
  border: 1px solid rgba(255, 255, 255, .38);
  border-radius: 999px;
  padding: 8px 14px;
  font-size: 13.5px;
  font-weight: 650;
  cursor: pointer;
  min-height: 40px;
}
.alert-bar__close {
  flex: none;
  background: none;
  border: none;
  font-size: 26px;
  line-height: 1;
  opacity: .8;
  cursor: pointer;
  padding: 0 4px;
  min-width: 34px;
  min-height: 40px;
}

.offline-bar {
  background: #3a3020;
  color: #f0d9a8;
  font-size: 13px;
  padding: 7px 14px;
  text-align: center;
  border-bottom: 1px solid #574828;
  z-index: 55;
}

/* ---------------------------------------------------------------- topbar */

.topbar {
  height: var(--topbar-h);
  padding: 0 12px;
  padding-top: var(--safe-top);
  height: calc(var(--topbar-h) + var(--safe-top));
  background: #0d1b2a;
  border-bottom: 1px solid var(--line);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  flex: none;
  z-index: 50;
}
.topbar__brand { display: flex; align-items: center; gap: 9px; min-width: 0; }
.topbar__mark { color: var(--accent); display: flex; flex: none; }
.topbar__title {
  font-size: 16.5px;
  font-weight: 700;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.topbar__actions { display: flex; align-items: center; gap: 8px; flex: none; }

.icon-btn {
  width: 44px; height: 44px;
  display: grid; place-items: center;
  background: var(--bg-raised);
  border: 1px solid var(--line);
  border-radius: 10px;
  cursor: pointer;
  color: var(--text-dim);
}
.icon-btn:active { background: var(--bg-panel); }
.icon-btn.is-busy svg { animation: spin .9s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }

.lang-switch {
  display: flex;
  background: var(--bg-raised);
  border: 1px solid var(--line);
  border-radius: 10px;
  overflow: hidden;
}
.lang-switch button {
  background: none;
  border: none;
  padding: 0 11px;
  height: 44px;
  font-size: 13.5px;
  font-weight: 600;
  color: var(--text-mute);
  cursor: pointer;
  white-space: nowrap;
}
.lang-switch button.is-active { background: var(--accent); color: #fff; }

/* ------------------------------------------------------------------ views */

.app { flex: 1; min-height: 0; position: relative; }

.view {
  position: absolute;
  inset: 0;
  display: none;
  flex-direction: column;
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
}
.view.is-active { display: flex; }
.view:not([data-view="map"]) { padding: 12px 12px calc(20px + var(--safe-bottom)); gap: 12px; }
.view[data-view="map"] { overflow: hidden; }

/* ----------------------------------------------------------- status card */

.status-card {
  margin: 10px 10px 0;
  padding: 13px 14px;
  border-radius: var(--radius);
  background: var(--bg-raised);
  border: 1px solid var(--line);
  border-left: 5px solid var(--text-mute);
  flex: none;
}
.status-card--safe    { border-left-color: var(--safe);    background: linear-gradient(100deg, rgba(31,157,85,.14), var(--bg-raised) 62%); }
.status-card--watch   { border-left-color: var(--watch);   background: linear-gradient(100deg, rgba(217,164,65,.14), var(--bg-raised) 62%); }
.status-card--warning { border-left-color: var(--warning); background: linear-gradient(100deg, rgba(232,121,43,.17), var(--bg-raised) 62%); }
.status-card--danger  { border-left-color: var(--danger);  background: linear-gradient(100deg, rgba(217,58,58,.20), var(--bg-raised) 62%); }
.status-card--severe  { border-left-color: var(--severe);  background: linear-gradient(100deg, rgba(178,30,47,.30), var(--bg-raised) 62%); }

/* Copy on the left, gauge on the right — the staff stands vertically the way
   the real thing stands in the river. */
.status-card__top { display: flex; align-items: stretch; gap: var(--s2); }
.status-card__copy { flex: 1; min-width: 0; display: flex; flex-direction: column; }

.status-card__main { display: flex; align-items: flex-start; gap: var(--s3); }
.status-card__icon {
  width: 38px; height: 38px;
  flex: none;
  display: grid; place-items: center;
  border-radius: 10px;
  background: rgba(236, 229, 216, .07);
  font-size: 20px;
}

.status-card__station {
  margin-top: var(--s3);
  padding-top: var(--s3);
  border-top: 1px solid var(--embankment);
  font-size: var(--t-sm);
  color: var(--char-dim);
  display: flex;
  align-items: baseline;
  gap: var(--s2);
  flex-wrap: wrap;
}
.status-card__station:empty { display: none; }
.status-card__station b { color: var(--char-sand); font-weight: 650; }
.status-card--danger .status-card__icon,
.status-card--severe .status-card__icon { background: rgba(217, 58, 58, .26); }
.status-card--safe .status-card__icon { background: rgba(31, 157, 85, .22); }

.status-card__copy { min-width: 0; flex: 1; }
.status-card__level { font-size: var(--t-md); font-weight: 750; letter-spacing: -.01em; text-wrap: balance; }
.status-card--safe .status-card__level    { color: var(--safe-bright); }
.status-card--watch .status-card__level   { color: var(--watch); }
.status-card--warning .status-card__level { color: var(--warning); }
.status-card--danger .status-card__level,
.status-card--severe .status-card__level  { color: #ff7a7a; }

.status-card__msg { margin: 3px 0 0; font-size: 14px; color: var(--text-dim); }

.status-card__meta { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
.chip {
  font-size: 11.5px;
  font-weight: 600;
  padding: 4px 9px;
  border-radius: 999px;
  background: rgba(255, 255, 255, .08);
  color: var(--text-dim);
  white-space: nowrap;
}
.chip--ghost { border: 1px solid var(--line); background: transparent; }
.chip--live { color: var(--safe-bright); border-color: rgba(53,196,111,.4); }
.chip--stale { color: var(--watch); border-color: rgba(217,164,65,.45); }

.reasons { list-style: none; margin: 10px 0 0; padding: 0; display: flex; flex-direction: column; gap: 5px; }
.reasons:empty { display: none; }
/* Two reasons is enough to justify the state at a glance; the rest are in
   Alerts. Beyond two the card starts pushing the map off screen. */
.reasons li:nth-child(n + 3) { display: none; }
.reasons li {
  font-size: 13px;
  color: var(--text-dim);
  padding-left: 16px;
  position: relative;
  line-height: 1.45;
}
.reasons li::before {
  content: "";
  position: absolute;
  left: 4px; top: .55em;
  width: 5px; height: 5px;
  border-radius: 50%;
  background: var(--text-mute);
}
.reasons li.is-critical { color: #ffb0b0; }
.reasons li.is-critical::before { background: var(--danger); }

/* ------------------------------------------------------- the gauge staff --
   The signature element, and the one place boldness is spent.

   CWC defines flood risk as water level against two painted thresholds, and
   its 332 stations are literally graduated posts standing in the river. This
   renders that instrument rather than describing it: silt water rises from the
   bottom, the warning and danger marks are rules across the staff, and the
   highest flood on record is a dashed line above.

   It carries information a coloured word cannot — how much headroom is left.
   "Danger" tells you the threshold is crossed; the staff tells you whether the
   water is a hand's width over it or halfway to the worst year on record. */

.gauge {
  display: flex;
  align-items: stretch;
  gap: var(--s3);
  flex: none;
}

.gauge__staff {
  position: relative;
  width: 30px;
  min-height: 128px;
  flex: none;
  border-radius: 5px;
  background:
    /* graduations, every 10% — the painted ticks of a real staff */
    repeating-linear-gradient(
      to top,
      transparent 0 9%,
      rgba(236, 229, 216, .10) 9% 9.6%
    ),
    linear-gradient(to bottom, rgba(0,0,0,.28), rgba(0,0,0,.12));
  border: 1px solid var(--embankment);
  overflow: hidden;
}

/* The water. Always silt, at every level — see the palette note above. */
.gauge__water {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  background:
    linear-gradient(to top, var(--silt) 0%, var(--silt-bright) 100%);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.35);
  transition: height .9s cubic-bezier(.22,.8,.28,1);
}
/* Surface line, so the water reads as a level and not a bar chart. */
.gauge__water::after {
  content: "";
  position: absolute;
  left: 0; right: 0; top: -1px;
  height: 2px;
  background: #F0C08A;
  opacity: .95;
}

.gauge__mark {
  position: absolute;
  left: -3px; right: -3px;
  height: 0;
  border-top: 2px solid currentColor;
  pointer-events: none;
}
.gauge__mark--warning { color: var(--mark-warning); }
.gauge__mark--danger  { color: var(--mark-danger); }
.gauge__mark--hfl     { color: var(--mark-hfl); border-top-style: dashed; border-top-width: 1.5px; }

/* Labels sit to the LEFT of the staff, right-aligned against it, each pinned
   to the height of its own mark. Growing leftward means a long reading extends
   into free space instead of clipping off the edge of the card — which is what
   happened when they sat on the outside. */
.gauge__scale {
  position: relative;
  width: 84px;
  flex: none;
  min-height: 128px;
}
.gauge__label {
  position: absolute;
  right: 0;
  transform: translateY(50%);
  display: flex;
  align-items: baseline;
  justify-content: flex-end;
  gap: var(--s2);
  white-space: nowrap;
  font-size: var(--t-xs);
  line-height: 1;
}
.gauge__label-k { color: var(--char-mute); }
.gauge__label--warning .gauge__label-v { color: var(--mark-warning); }
.gauge__label--danger  .gauge__label-v { color: var(--mark-danger); }
.gauge__label--hfl     .gauge__label-v { color: var(--mark-hfl); }
.gauge__label-v { font-family: var(--font-data); font-variant-numeric: tabular-nums; font-weight: 600; }

/* The live reading, pinned to the water surface and right-aligned with it. */
.gauge__reading {
  position: absolute;
  right: 0;
  transform: translateY(50%);
  display: flex;
  align-items: baseline;
  justify-content: flex-end;
  gap: var(--s2);
  white-space: nowrap;
  transition: bottom .9s cubic-bezier(.22,.8,.28,1);
}
.gauge__reading-v {
  font-family: var(--font-data);
  font-variant-numeric: tabular-nums;
  font-weight: 600;
  font-size: var(--t-md);
  color: #F5D6A8;
  letter-spacing: -.02em;
}
.gauge__reading-u { font-size: var(--t-xs); color: var(--char-dim); }
.gauge__trend { font-size: var(--t-xs); font-weight: 700; }
.gauge__trend--rising  { color: var(--mark-danger); }
.gauge__trend--falling { color: var(--mark-safe); }
.gauge__trend--steady  { color: var(--char-mute); }

/* No live reading: show the staff dry and say so, rather than implying a level. */
.gauge--dry .gauge__staff { opacity: .55; }
.gauge__nodata {
  position: absolute;
  bottom: 0; right: 0;
  text-align: right;
  font-size: var(--t-xs);
  color: var(--char-mute);
  line-height: 1.3;
}

@media (prefers-reduced-motion: reduce) {
  .gauge__water, .gauge__reading { transition: none; }
}

/* ------------------------------------------------------------- skeletons --
   The app's first paint used to be empty cards. A skeleton says "a reading is
   coming" rather than "there is nothing here", which are very different
   messages when you are checking whether to leave your house. */
.skel {
  background: linear-gradient(90deg, var(--river-mid) 25%, #1D3C40 50%, var(--river-mid) 75%);
  background-size: 200% 100%;
  animation: skel 1.4s ease-in-out infinite;
  border-radius: 6px;
  color: transparent !important;
}
@keyframes skel { 0% { background-position: 200% 0; } 100% { background-position: -200% 0; } }
@media (prefers-reduced-motion: reduce) { .skel { animation: none; } }

.skel--line { height: 13px; margin: 6px 0; }
.skel--title { height: 20px; width: 52%; }
.skel--wide { width: 88%; }
.skel--half { width: 46%; }

/* --------------------------------------------------- flood arrival estimate */

/* Urgency is carried by three things at once — colour, the band label, and the
   size of the number — so it survives glare, colour-blindness and a cracked
   screen. Colour alone would fail all three. */
.arrival {
  margin: 8px 10px 0;
  padding: 12px 14px;
  border-radius: var(--radius);
  background: var(--bg-raised);
  border: 1px solid var(--line);
  border-left: 5px solid var(--text-mute);
  flex: none;
}
.arrival--imminent { border-left-color: var(--severe); background: linear-gradient(100deg, rgba(178,30,47,.30), var(--bg-raised) 60%); }
.arrival--urgent   { border-left-color: var(--danger); background: linear-gradient(100deg, rgba(217,58,58,.20), var(--bg-raised) 60%); }
.arrival--soon     { border-left-color: var(--warning); background: linear-gradient(100deg, rgba(232,121,43,.17), var(--bg-raised) 60%); }
.arrival--watch    { border-left-color: var(--watch); background: linear-gradient(100deg, rgba(217,164,65,.14), var(--bg-raised) 60%); }
.arrival--monitor  { border-left-color: var(--accent); }

.arrival__head { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.arrival__urgency {
  font-size: 11px;
  font-weight: 750;
  text-transform: uppercase;
  letter-spacing: .06em;
  padding: 3px 8px;
  border-radius: 999px;
  background: rgba(255, 255, 255, .1);
  color: var(--text);
  white-space: nowrap;
}
html[lang="as"] .arrival__urgency { text-transform: none; letter-spacing: 0; font-size: 12px; }
.arrival--imminent .arrival__urgency { background: var(--severe); color: #fff; animation: pulse 1.2s ease-in-out infinite; }
.arrival--urgent .arrival__urgency   { background: var(--danger); color: #fff; }
.arrival--soon .arrival__urgency     { background: var(--warning); color: #1a1005; }
.arrival--watch .arrival__urgency    { background: var(--watch); color: #1a1005; }
.arrival--monitor .arrival__urgency  { background: var(--accent); color: #fff; }

.arrival__title { font-size: 12.5px; color: var(--text-dim); }

.arrival__range { display: flex; align-items: baseline; gap: 7px; margin-top: 7px; }
.arrival__value {
  font-family: var(--font-data);
  font-size: var(--t-xl);
  font-weight: 600;
  letter-spacing: -.03em;
  line-height: 1.1;
  font-variant-numeric: tabular-nums;
}
.arrival--imminent .arrival__value { color: #ff8a8a; }
.arrival--urgent .arrival__value   { color: #ff9b9b; }
.arrival--soon .arrival__value     { color: #ffb37a; }
.arrival--watch .arrival__value    { color: #ecc776; }
.arrival__unit { font-size: 15px; color: var(--text-dim); font-weight: 600; }

.arrival__action { font-size: 13.5px; color: var(--text); margin-top: 5px; }

/* On the Map tab this card is a glance, not a briefing: urgency, the window,
   and what to do. The source station, the crest note and the caveat are real
   content but they are reading material, and they were pushing the map — the
   whole point of the tab — down to a sliver. They live in Alerts, where
   renderArrivalPanel already shows them in full. */
#arrivalCard .arrival__from,
#arrivalCard .arrival__crest,
#arrivalCard .arrival__approx { display: none; }
.arrival__from { font-size: 12.5px; color: var(--text-mute); margin-top: 7px; line-height: 1.45; }
.arrival__crest {
  font-size: 12.5px;
  color: var(--watch);
  margin-top: 6px;
  padding-left: 16px;
  position: relative;
  line-height: 1.45;
}
.arrival__crest::before { content: "↓"; position: absolute; left: 3px; top: 0; font-weight: 700; }
.arrival__approx {
  font-size: 11.5px;
  color: var(--text-mute);
  margin-top: 8px;
  padding-top: 8px;
  border-top: 1px solid var(--line);
  line-height: 1.45;
}

/* Fuller breakdown in the Alerts tab */
.arr-row {
  display: flex; align-items: center; gap: 11px;
  padding: 10px 12px;
  background: var(--bg-panel);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
}
.arr-row + .arr-row { margin-top: 8px; }
.arr-row__bar { width: 4px; align-self: stretch; border-radius: 2px; background: var(--text-mute); flex: none; }
.arr-row__bar--imminent { background: var(--severe); }
.arr-row__bar--urgent   { background: var(--danger); }
.arr-row__bar--soon     { background: var(--warning); }
.arr-row__bar--watch    { background: var(--watch); }
.arr-row__bar--monitor  { background: var(--accent); }
.arr-row__body { flex: 1; min-width: 0; }
.arr-row__name { font-size: 13.5px; font-weight: 620; }
.arr-row__meta { font-size: 12px; color: var(--text-mute); margin-top: 1px; }
.arr-row__eta { text-align: right; flex: none; }
.arr-row__v {
  font-family: var(--font-data); font-size: 14px; font-weight: 700; font-variant-numeric: tabular-nums; }
.arr-row__t { font-size: 11px; color: var(--text-mute); }

/* -------------------------------------------------------------------- map */

/* The map is the point of this tab, so it gets a floor it cannot be squeezed
   below no matter how much the cards above it have to say. */
.map-wrap {
  flex: 1 1 auto;
  min-height: 220px;
  position: relative;
  margin: var(--s3) var(--s3) 0;
}
#map {
  position: absolute;
  inset: 0;
  border-radius: var(--radius);
  background: #101d29;
  border: 1px solid var(--line);
}
.leaflet-container { font-family: var(--font); background: var(--river-deep); }

/* Leaflet's own zoom buttons are redundant on a touch screen — pinch does the
   job — and they were colliding with the recentre and layers controls. Shown
   only where there is a mouse and room for them. */
.leaflet-control-zoom { display: none; }
@media (min-width: 720px) {
  .leaflet-control-zoom { display: block; }
  .leaflet-control-zoom a {
    background: rgba(16, 37, 40, .95);
    color: var(--char-sand);
    border-color: var(--embankment);
  }
  .leaflet-control-zoom a:hover { background: var(--river-mid); }
}
.leaflet-control-attribution {
  background: rgba(11, 22, 34, .82) !important;
  color: var(--text-mute) !important;
  font-size: 9.5px !important;
}
.leaflet-control-attribution a { color: var(--text-dim) !important; }

.map-controls {
  position: absolute;
  right: 10px; top: 10px;
  z-index: 500;
  display: flex; flex-direction: column; gap: 8px;
}
.map-btn {
  width: 44px; height: 44px;
  display: grid; place-items: center;
  background: rgba(20, 36, 51, .95);
  border: 1px solid var(--line);
  border-radius: 11px;
  color: var(--text);
  cursor: pointer;
  box-shadow: var(--shadow);
}
.map-btn:active { background: var(--bg-panel); }
.map-btn.is-on { background: var(--accent); border-color: var(--accent); color: #fff; }

.layer-panel {
  position: absolute;
  right: 10px; top: 62px;
  z-index: 500;
  width: 214px;
  background: rgba(20, 36, 51, .97);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 12px;
  box-shadow: var(--shadow);
  backdrop-filter: blur(8px);
}
.layer-panel__title {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: .07em;
  color: var(--text-mute);
  margin-bottom: 8px;
}
html[lang="as"] .layer-panel__title { text-transform: none; letter-spacing: 0; }
.layer-panel__title--sep { margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--line); }

.toggle { display: flex; align-items: center; gap: 9px; padding: 6px 0; font-size: 13.5px; cursor: pointer; }
.toggle input { width: 17px; height: 17px; accent-color: var(--accent); flex: none; }

.legend { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 7px; }
.legend li { display: flex; align-items: center; gap: 9px; font-size: 12.5px; color: var(--text-dim); }
.swatch { width: 15px; height: 15px; border-radius: 4px; flex: none; }
.swatch--danger  { background: var(--danger-fill);  border: 1.5px solid var(--danger); }
.swatch--warning { background: var(--warning-fill); border: 1.5px solid var(--warning); }
.swatch--safe    { background: var(--safe-fill);    border: 1.5px solid var(--safe-bright); border-radius: 50%; }
.swatch--you     { background: var(--accent); border: 2px solid #fff; border-radius: 50%; }

.geo-status {
  position: absolute;
  left: 10px; bottom: 10px;
  z-index: 500;
  font-size: 11.5px;
  color: var(--text-dim);
  background: rgba(11, 22, 34, .88);
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 5px 9px;
  max-width: 62%;
}
.geo-status.is-error { color: #ffb0b0; border-color: rgba(217,58,58,.5); }

/* Map marker for the user's live position */
.you-dot {
  width: 18px; height: 18px;
  border-radius: 50%;
  background: var(--accent);
  border: 3px solid #fff;
  box-shadow: 0 0 0 2px rgba(61, 154, 224, .45), 0 2px 6px rgba(0,0,0,.5);
}
.you-dot::after {
  content: "";
  position: absolute;
  inset: -9px;
  border-radius: 50%;
  border: 2px solid rgba(61, 154, 224, .55);
  animation: ping 2s ease-out infinite;
}
@keyframes ping { 0% { transform: scale(.6); opacity: 1; } 100% { transform: scale(1.5); opacity: 0; } }

.camp-pin, .gauge-pin {
  display: grid; place-items: center;
  border-radius: 50%;
  font-size: 12px;
  font-weight: 700;
  color: #fff;
  border: 2px solid rgba(255,255,255,.9);
  box-shadow: 0 2px 6px rgba(0,0,0,.5);
}
.camp-pin { width: 26px; height: 26px; background: var(--safe); }
.gauge-pin { width: 22px; height: 22px; background: var(--text-mute); font-size: 10px; }
.gauge-pin--warning { background: var(--warning); }
.gauge-pin--danger  { background: var(--danger); animation: pulse 1.4s ease-in-out infinite; }

.leaflet-popup-content-wrapper {
  background: var(--bg-panel);
  color: var(--text);
  border-radius: var(--radius-sm);
  border: 1px solid var(--line);
}
.leaflet-popup-tip { background: var(--bg-panel); border: 1px solid var(--line); }
.leaflet-popup-content { margin: 11px 13px; font-size: 13.5px; line-height: 1.5; }
.leaflet-popup-content b { display: block; font-size: 14.5px; margin-bottom: 3px; }
.leaflet-popup-content .pop-meta { color: var(--text-dim); font-size: 12.5px; }
.leaflet-popup-content .pop-btn {
  display: inline-block;
  margin-top: 8px;
  background: var(--accent);
  color: #fff;
  border: none;
  border-radius: 8px;
  padding: 8px 12px;
  font-size: 13px;
  font-weight: 650;
  cursor: pointer;
}
.leaflet-container a.leaflet-popup-close-button { color: var(--text-mute); }

/* ---------------------------------------------------------- bottom sheet */

.sheet {
  flex: none;
  background: var(--bg-raised);
  border-top: 1px solid var(--line);
  border-radius: var(--radius) var(--radius) 0 0;
  margin-top: 10px;
  padding-bottom: var(--safe-bottom);
  box-shadow: 0 -6px 20px rgba(0,0,0,.3);
  max-height: 62%;
  display: flex;
  flex-direction: column;
}
.sheet__handle {
  background: none; border: none;
  padding: 8px 0 4px;
  display: grid; place-items: center;
  cursor: pointer;
  flex: none;
}
.sheet__grip { width: 38px; height: 4px; border-radius: 2px; background: var(--line); display: block; }

.sheet__head {
  display: flex; align-items: center; gap: 12px;
  padding: 2px 14px 12px;
  flex: none;
}
.sheet__label {
  font-size: 10.5px;
  text-transform: uppercase;
  letter-spacing: .07em;
  color: var(--text-mute);
  font-weight: 650;
}
html[lang="as"] .sheet__label { text-transform: none; letter-spacing: 0; font-size: 11.5px; }
.sheet__title { font-size: 15.5px; font-weight: 650; margin-top: 2px; }
.sheet__sub { font-size: 13px; color: var(--safe-bright); margin-top: 2px; }

.sheet__body { display: none; overflow-y: auto; padding: 0 14px 14px; }
.sheet.is-open .sheet__body { display: block; }
.sheet.is-open { max-height: 62%; }

.btn {
  border: none;
  border-radius: 10px;
  padding: 11px 15px;
  font-size: 14px;
  font-weight: 650;
  cursor: pointer;
  min-height: 46px;
  white-space: nowrap;
  flex: none;
}
.btn--primary { background: var(--safe); color: #fff; }
.btn--primary:active { background: #197f45; }
.btn--ghost { background: transparent; border: 1px solid var(--line); color: var(--text-dim); }
.btn--danger { background: var(--danger); color: #fff; }
.btn:disabled { opacity: .5; cursor: default; }

.route-info {
  background: var(--bg-panel);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  padding: 11px 12px;
  font-size: 13.5px;
  margin-bottom: 10px;
}
.route-info__row { display: flex; justify-content: space-between; gap: 10px; }
.route-info__row + .route-info__row { margin-top: 5px; }
.route-info__k { color: var(--text-mute); }
.route-info__v {
  font-family: var(--font-data); font-variant-numeric: tabular-nums; font-weight: 650; }
.route-info__note { margin-top: 8px; font-size: 12.5px; color: var(--watch); }

.route-steps { list-style: none; margin: 0 0 12px; padding: 0; counter-reset: step; }
.route-steps:empty { display: none; }
.route-steps li {
  counter-increment: step;
  font-size: 13px;
  color: var(--text-dim);
  padding: 8px 0 8px 30px;
  border-bottom: 1px solid var(--line);
  position: relative;
}
.route-steps li::before {
  content: counter(step);
  position: absolute; left: 0; top: 8px;
  width: 21px; height: 21px;
  display: grid; place-items: center;
  border-radius: 50%;
  background: var(--bg-panel);
  border: 1px solid var(--line);
  font-size: 11px;
  color: var(--text-mute);
}
.route-steps li:last-child { border-bottom: none; }

.shelter-list { display: flex; flex-direction: column; gap: 8px; }
.shelter-item {
  display: flex; align-items: center; gap: 11px;
  padding: 11px 12px;
  background: var(--bg-panel);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  cursor: pointer;
  text-align: left;
  width: 100%;
}
.shelter-item:active { background: #1f3348; }
.shelter-item__icon {
  width: 34px; height: 34px;
  display: grid; place-items: center;
  border-radius: 9px;
  background: rgba(31,157,85,.2);
  color: var(--safe-bright);
  flex: none;
  font-size: 16px;
}
.shelter-item__body { flex: 1; min-width: 0; }
.shelter-item__name { font-size: 14px; font-weight: 620; }
.shelter-item__meta { font-size: 12.5px; color: var(--text-mute); margin-top: 1px; }
.shelter-item__dist {
  font-family: var(--font-data); font-variant-numeric: tabular-nums; font-size: 13px; font-weight: 700; color: var(--safe-bright); flex: none; }

/* ---------------------------------------------------------------- panels */

.panel {
  background: var(--bg-raised);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 14px;
}
.panel__row { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.panel__title { font-size: 15px; font-weight: 680; }
.panel__sub { margin: 3px 0 0; font-size: 13px; color: var(--text-mute); }

.alert-list { display: flex; flex-direction: column; gap: 10px; }
.alert-card {
  background: var(--bg-raised);
  border: 1px solid var(--line);
  border-left: 4px solid var(--warning);
  border-radius: var(--radius);
  padding: 12px 14px;
}
.alert-card--danger { border-left-color: var(--danger); }
.alert-card--severe { border-left-color: var(--severe); }
.alert-card__title { font-size: 14.5px; font-weight: 680; }
.alert-card__body { font-size: 13.5px; color: var(--text-dim); margin-top: 4px; }
.alert-card__time { font-size: 11.5px; color: var(--text-mute); margin-top: 6px; }
.empty { font-size: 13.5px; color: var(--text-mute); padding: 6px 0; }

.rain-body { display: flex; flex-direction: column; gap: 10px; margin-top: 10px; }
.rain-headline { display: flex; align-items: baseline; gap: 9px; }
.rain-headline__n {
  font-family: var(--font-data); font-variant-numeric: tabular-nums; font-size: 26px; font-weight: 750; }
.rain-headline__u { font-size: 14px; color: var(--text-mute); }
.rain-headline__band { font-size: 13.5px; margin-left: auto; }
.rain-band--heavy { color: var(--danger); }
.rain-band--moderate { color: var(--warning); }
.rain-band--light { color: var(--watch); }
.rain-band--none { color: var(--safe-bright); }
.rain-days { display: flex; gap: 7px; }
.rain-day {
  flex: 1;
  background: var(--bg-panel);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  padding: 8px 6px;
  text-align: center;
}
.rain-day__d { font-size: 11px; color: var(--text-mute); }
.rain-day__v {
  font-family: var(--font-data); font-variant-numeric: tabular-nums; font-size: 14px; font-weight: 680; margin-top: 3px; }

.gauge-list { display: flex; flex-direction: column; gap: 8px; margin-top: 10px; }
.gauge-item {
  display: flex; align-items: center; gap: 11px;
  padding: 10px 12px;
  background: var(--bg-panel);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
}
.gauge-item__dot { width: 10px; height: 10px; border-radius: 50%; background: var(--text-mute); flex: none; }
.gauge-item__dot--warning { background: var(--warning); }
.gauge-item__dot--danger { background: var(--danger); }
.gauge-item__body { flex: 1; min-width: 0; }
.gauge-item__name { font-size: 13.5px; font-weight: 620; }
.gauge-item__meta { font-size: 12px; color: var(--text-mute); margin-top: 1px; }
.gauge-item__lvl { text-align: right; flex: none; }
.gauge-item__v {
  font-family: var(--font-data); font-variant-numeric: tabular-nums; font-size: 14px; font-weight: 700; }
.gauge-item__t { font-size: 11px; color: var(--text-mute); }
.gauge-item--stale .gauge-item__v { color: var(--text-mute); font-weight: 500; }

.sources { list-style: none; margin: 8px 0 0; padding: 0; display: flex; flex-direction: column; gap: 7px; }
.sources li { font-size: 13px; color: var(--text-dim); padding-left: 15px; position: relative; }
.sources li::before {
  content: ""; position: absolute; left: 3px; top: .58em;
  width: 5px; height: 5px; border-radius: 50%; background: var(--accent);
}
.disclaimer {
  margin: 12px 0 0;
  padding-top: 11px;
  border-top: 1px solid var(--line);
  font-size: 12px;
  color: var(--text-mute);
  line-height: 1.55;
}

.tips-group + .tips-group { margin-top: 12px; }
.tips-group__title { font-size: 15px; font-weight: 680; margin-bottom: 9px; }
.tips-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.tips-list li {
  font-size: 14px;
  color: var(--text-dim);
  padding: 10px 12px 10px 38px;
  background: var(--bg-panel);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  position: relative;
  line-height: 1.5;
}
.tips-list li::before {
  content: "✓";
  position: absolute; left: 13px; top: 10px;
  color: var(--safe-bright);
  font-weight: 700;
}

/* ------------------------------------------------------ recovery section */

/* Numbered first-steps list. The order is load-bearing (survey before cleanup,
   FIR before duplicate applications), so the numbers are prominent rather than
   decorative. */
.steps { list-style: none; margin: 12px 0 0; padding: 0; counter-reset: rstep; }
.steps li {
  counter-increment: rstep;
  position: relative;
  padding: 0 0 16px 40px;
  border-left: 2px solid var(--line);
  margin-left: 13px;
}
.steps li:last-child { border-left-color: transparent; padding-bottom: 0; }
.steps li::before {
  content: counter(rstep);
  position: absolute;
  left: -14px; top: 0;
  width: 26px; height: 26px;
  display: grid; place-items: center;
  border-radius: 50%;
  background: var(--accent);
  color: #fff;
  font-size: 12.5px;
  font-weight: 750;
  border: 3px solid var(--bg-raised);
}
.steps__title { font-size: 14.5px; font-weight: 650; line-height: 1.4; }
.steps__body { font-size: 13.5px; color: var(--text-dim); margin-top: 4px; line-height: 1.55; }

.rec-list { display: flex; flex-direction: column; gap: 10px; margin-top: 12px; }

.rec-card {
  background: var(--bg-panel);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  padding: 12px 13px;
}
.rec-card__head { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; }
.rec-card__name { font-size: 14.5px; font-weight: 650; line-height: 1.35; }
.rec-card__issuer { font-size: 12px; color: var(--text-mute); margin-top: 2px; }
.rec-card__how { font-size: 13.5px; color: var(--text-dim); margin-top: 8px; line-height: 1.55; }

/* An amount is never shown bare — the period badge and the verify note travel
   with it, because a stale figure could make someone accept the wrong payment. */
.rec-card__amount {
  display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap;
  margin-top: 9px;
  padding: 9px 11px;
  background: rgba(53, 196, 111, .1);
  border: 1px solid rgba(53, 196, 111, .28);
  border-radius: var(--radius-sm);
}
.rec-card__value {
  font-family: var(--font-data); font-size: 19px; font-weight: 780; color: var(--safe-bright); font-variant-numeric: tabular-nums; }
.rec-card__amnote { font-size: 12.5px; color: var(--text-dim); flex: 1 1 100%; line-height: 1.5; }
.rec-card__period {
  font-size: 10.5px;
  font-weight: 650;
  padding: 2px 7px;
  border-radius: 999px;
  background: rgba(255, 255, 255, .1);
  color: var(--text-mute);
  white-space: nowrap;
}
.rec-card__topup {
  font-size: 12.5px;
  color: var(--watch);
  margin-top: 8px;
  padding-left: 15px;
  position: relative;
  line-height: 1.5;
}
.rec-card__topup::before { content: "+"; position: absolute; left: 3px; top: 0; font-weight: 800; }

.rec-card__meta { margin-top: 9px; font-size: 12.5px; }
.rec-card__metak { color: var(--text-mute); }
.rec-card__needs { list-style: none; margin: 5px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 5px; }
.rec-card__needs li {
  font-size: 11.5px;
  padding: 3px 8px;
  border-radius: 999px;
  background: rgba(255, 255, 255, .06);
  border: 1px solid var(--line);
  color: var(--text-dim);
}

.rec-card__actions { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 11px; }
.rec-link {
  display: inline-flex; align-items: center; gap: 6px;
  background: var(--accent);
  color: #fff;
  text-decoration: none;
  border-radius: 9px;
  padding: 9px 13px;
  font-size: 13px;
  font-weight: 650;
  min-height: 42px;
  box-sizing: border-box;
}
.rec-link:active { background: #2f7db8; }
.rec-link--ghost { background: transparent; border: 1px solid var(--line); color: var(--text-dim); }
.rec-link--offline { color: var(--text-mute); font-size: 12.5px; align-self: center; }

.rec-kind {
  font-size: 10.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .05em;
  padding: 3px 8px;
  border-radius: 999px;
  white-space: nowrap;
  flex: none;
}
html[lang="as"] .rec-kind { text-transform: none; letter-spacing: 0; font-size: 11.5px; }
.rec-kind--government { background: rgba(61,154,224,.2); color: #8cc6f0; }
.rec-kind--ngo { background: rgba(53,196,111,.18); color: var(--safe-bright); }
.rec-kind--csr { background: rgba(217,164,65,.18); color: var(--watch); }

/* --------------------------------------------------------- earthquake --
   Flood and earthquake advice contradict each other — one says leave the
   building, the other says do not — so the switch between them is a hard,
   visible mode change, not a scroll. */

.segmented {
  display: flex;
  gap: 3px;
  padding: 3px;
  background: var(--river-deep);
  border: 1px solid var(--embankment);
  border-radius: 12px;
}
.segmented__btn {
  flex: 1;
  background: none;
  border: none;
  border-radius: 9px;
  padding: 11px 8px;
  min-height: 44px;
  font-size: var(--t-sm);
  font-weight: 650;
  color: var(--char-mute);
  cursor: pointer;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.segmented__btn.is-active { background: var(--silt); color: #1B0F04; }

.hazard { display: flex; flex-direction: column; gap: var(--s3); }

/* Zone V is the single most under-known fact about Assam's exposure, so it
   leads the section and is set as a plate rather than a sentence. */
.zone { display: flex; align-items: center; gap: var(--s4); }
.zone__badge { flex: none; }
.zone__code {
  display: grid;
  place-items: center;
  width: 54px; height: 54px;
  border-radius: 12px;
  background: rgba(196, 52, 43, .16);
  border: 1.5px solid rgba(196, 52, 43, .5);
  color: #FF9A8F;
  font-family: var(--font-data);
  font-size: var(--t-lg);
  font-weight: 600;
  letter-spacing: .02em;
}
.zone__body { min-width: 0; }

.dch__lead {
  margin: var(--s2) 0 0;
  font-size: var(--t-md);
  font-weight: 700;
  color: var(--char-sand);
  line-height: 1.4;
}
.dch { list-style: none; margin: var(--s4) 0 0; padding: 0; counter-reset: dch; display: flex; flex-direction: column; gap: var(--s3); }
.dch li {
  counter-increment: dch;
  display: flex;
  gap: var(--s3);
  align-items: flex-start;
}
.dch li::before {
  content: counter(dch);
  flex: none;
  width: 30px; height: 30px;
  display: grid; place-items: center;
  border-radius: 50%;
  background: var(--silt);
  color: #1B0F04;
  font-family: var(--font-data);
  font-size: var(--t-sm);
  font-weight: 600;
}
.dch__t { font-size: var(--t-base); font-weight: 700; }
.dch__b { font-size: var(--t-sm); color: var(--char-dim); margin-top: 2px; line-height: 1.55; }

/* The "do not" list. Running outside during shaking is the most common fatal
   mistake in this region, so these are given the same weight as the do's. */
.dont { list-style: none; margin: var(--s4) 0 0; padding: var(--s3) 0 0; border-top: 1px solid var(--embankment); display: flex; flex-direction: column; gap: var(--s2); }
.dont li {
  font-size: var(--t-sm);
  color: var(--char-dim);
  line-height: 1.55;
  padding-left: var(--s5);
  position: relative;
}
.dont li::before {
  content: "×";
  position: absolute; left: 3px; top: -1px;
  color: var(--mark-danger);
  font-weight: 800;
  font-size: 15px;
}

.quake-list { display: flex; flex-direction: column; gap: var(--s2); margin-top: var(--s3); }
.quake {
  display: flex; align-items: center; gap: var(--s3);
  padding: 10px var(--s3);
  background: var(--river-mid);
  border: 1px solid var(--embankment);
  border-radius: var(--radius-sm);
}
.quake__mag {
  flex: none;
  width: 48px; height: 40px;
  display: grid; place-items: center;
  border-radius: 8px;
  font-family: var(--font-data);
  font-size: var(--t-md);
  font-weight: 600;
  background: rgba(236,229,216,.07);
  color: var(--char-dim);
}
.quake__mag--light    { background: rgba(224,163,46,.16); color: var(--mark-warning); }
.quake__mag--moderate { background: rgba(217,130,43,.20); color: #F0A868; }
.quake__mag--strong   { background: rgba(196,52,43,.22); color: #FF9A8F; }
.quake__mag--major    { background: var(--mark-danger); color: #fff; }
.quake__body { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.quake__place { font-size: var(--t-sm); font-weight: 620; line-height: 1.35; }
.quake__meta { font-size: var(--t-xs); color: var(--char-mute); margin-top: 2px; }
.quake__dist { flex: none; font-family: var(--font-data); font-size: var(--t-sm); color: var(--char-dim); }

.historic { display: flex; flex-direction: column; gap: var(--s2); margin-top: var(--s3); }
.hist {
  display: flex; gap: var(--s3);
  padding: var(--s3);
  background: var(--river-mid);
  border: 1px solid var(--embankment);
  border-radius: var(--radius-sm);
}
.hist__year {
  flex: none;
  font-family: var(--font-data);
  font-size: var(--t-base);
  font-weight: 600;
  color: var(--silt-bright);
}
.hist__body { min-width: 0; display: flex; flex-direction: column; }

/* Several card bodies are built from nested <span>s so the whole row can be a
   single button or anchor. Spans are inline by default, so their lines run
   together — these stacks have to be told to behave as blocks. */
.shelter-item__body,
.rec-card__head > div,
.emergency-item__body { display: flex; flex-direction: column; min-width: 0; }
.shelter-item__name, .shelter-item__meta,
.emergency-item__name { display: block; }
.hist__name { font-size: var(--t-sm); font-weight: 650; }
.hist__mag { font-family: var(--font-data); color: var(--char-dim); font-weight: 400; }
.hist__note { font-size: var(--t-xs); color: var(--char-mute); margin-top: 3px; line-height: 1.55; }

/* Aftershock banner — shown only when a felt event happened close by recently. */
.aftershock {
  margin-top: var(--s3);
  padding: var(--s3);
  border-radius: var(--radius-sm);
  background: rgba(196, 52, 43, .13);
  border: 1px solid rgba(196, 52, 43, .38);
  font-size: var(--t-sm);
  color: #F2C4BF;
  line-height: 1.55;
}

.emergency-list { display: flex; flex-direction: column; gap: 8px; margin-top: 10px; }
.emergency-item {
  display: flex; align-items: center; gap: 12px;
  padding: 12px;
  background: var(--bg-panel);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  text-decoration: none;
  color: inherit;
  min-height: 58px;
}
.emergency-item:active { background: #1f3348; }
.emergency-item__icon {
  width: 38px; height: 38px;
  display: grid; place-items: center;
  border-radius: 10px;
  background: rgba(217,58,58,.2);
  color: #ff8a8a;
  flex: none;
}
.emergency-item__body { flex: 1; min-width: 0; }
.emergency-item__name { font-size: 14.5px; font-weight: 620; }
.emergency-item__num {
  font-family: var(--font-data); font-size: 20px; font-weight: 750; letter-spacing: .02em; flex: none; color: var(--accent); }

/* ---------------------------------------------------------------- tabbar */

.tabbar {
  height: calc(var(--tabbar-h) + var(--safe-bottom));
  padding-bottom: var(--safe-bottom);
  background: #0d1b2a;
  border-top: 1px solid var(--line);
  display: flex;
  flex: none;
  z-index: 50;
}
.tab {
  flex: 1;
  background: none;
  border: none;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3px;
  color: var(--text-mute);
  font-size: 11px;
  font-weight: 600;
  cursor: pointer;
  position: relative;
  padding: 0 2px;
}
.tab span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
.tab.is-active { color: var(--accent); }
.tab__dot {
  position: absolute;
  top: 9px; right: 50%;
  transform: translateX(19px);
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--danger);
  border: 1.5px solid #0d1b2a;
}

/* ----------------------------------------------------------- wider views */

@media (min-width: 720px) {
  .status-card, .map-wrap { margin-left: auto; margin-right: auto; width: min(100%, 900px); }
  .map-wrap { width: min(100%, 900px); }
  .view:not([data-view="map"]) { max-width: 760px; margin: 0 auto; width: 100%; }
  .sheet { max-width: 900px; margin-left: auto; margin-right: auto; border-radius: var(--radius); }
}

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