/* नेपाली खबर
   ---------------------------------------------------------------------------
   Light theme, on purpose. The previous stylesheet was dark because it was a
   security console people opened for two minutes; this is a newspaper people
   read for twenty, mostly on a phone in daylight.

   Devanagari drives three decisions the rest of the sheet follows:
   · line-height 1.8, not 1.5 — matras sit above and below the baseline and
     collide at tighter leading
   · no webfont — the fallback stack is system-only, because a disaster page
     that waits on a 300KB font file on a 2G connection is a page nobody reads
   · slightly larger base size — Devanagari counters are smaller than Latin at
     the same point size                                                      */

:root {
  color-scheme: light;
  --bg: #FFFFFF;
  --bg-2: #F6F5F3;
  --card: #FFFFFF;
  --raised: #F2F1EE;
  --border: #E2DFDA;
  --border-2: #CFCAC2;
  --red: #C8102E;          /* the Nepali flag crimson, dulled for text use */
  --red-dark: #9C0D24;
  --blue: #12395E;
  --t1: #14110E;
  --t2: #4A443C;
  --t3: #7A736A;
  --sans: "Noto Sans Devanagari", "Mukta", "Kalimati", "Mangal",
          ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --serif: "Noto Serif Devanagari", "Kokila", Georgia, serif;
  --mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  --maxw: 1180px;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--t1);
  font-family: var(--sans);
  font-size: 17px;
  line-height: 1.8;
}

a { color: inherit; text-decoration: none; }
a:hover { color: var(--red); }
a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible {
  outline: 2px solid var(--red);
  outline-offset: 2px;
}

.wrap {
  max-width: var(--maxw);
  margin: 0 auto;
  padding: 0 max(18px, env(safe-area-inset-left)) 0 max(18px, env(safe-area-inset-right));
}

.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;
}

/* Keyboard users land here first. Hidden until focused. */
.skip {
  position: absolute; left: -9999px; top: 0; z-index: 100;
  background: var(--t1); color: #fff; padding: 10px 16px;
}
.skip:focus { left: 0; }

/* ── header ──────────────────────────────────────────────────────────────── */

header { border-bottom: 2px solid var(--t1); background: var(--bg); }

.masthead {
  display: flex; align-items: center; gap: 12px;
  padding: 16px 0 12px;
}
.logo { flex: none; }
.brand .name {
  font-size: 27px; font-weight: 700; letter-spacing: -.01em; line-height: 1.2;
  color: var(--red);
}
.brand .sub { font-size: 13px; color: var(--t3); line-height: 1.4; }
.btn-sub {
  margin-inline-start: auto;
  background: var(--red); color: #fff;
  padding: 9px 16px; border-radius: 3px;
  font-size: 15px; font-weight: 600;
  min-height: 44px; display: inline-flex; align-items: center;
}
.btn-sub:hover { background: var(--red-dark); color: #fff; }

/* Below 620px the topic nav scrolls sideways and bleeds to the screen edge,
   so it reads as scrollable rather than clipped. */
.topics {
  display: flex; gap: 4px;
  border-top: 1px solid var(--border);
  overflow-x: auto; scrollbar-width: none;
  /* The nav scrolls, but a row of items running flush to the edge reads as
     broken text rather than as "there is more". The fade says it scrolls, and
     the padding stops the last item sitting under the fade. */
  padding-inline-end: 26px;
  -webkit-overflow-scrolling: touch;
  scroll-padding-inline-end: 26px;
  mask-image: linear-gradient(to right, #000 calc(100% - 26px), transparent);
}
.topics::-webkit-scrollbar { display: none; }
.topics a {
  padding: 11px 13px; font-size: 16px; font-weight: 600; white-space: nowrap;
  color: var(--t2); border-bottom: 3px solid transparent;
  min-height: 44px; display: inline-flex; align-items: center;
}
.topics a:hover { color: var(--red); background: var(--bg-2); }
.topics a[aria-current="page"] { color: var(--red); border-bottom-color: var(--red); }

.livestrip {
  display: flex; align-items: center; gap: 10px;
  border-top: 1px solid var(--border);
  padding: 7px 0; font-size: 13px; color: var(--t3);
}
.livestrip .left { display: flex; align-items: center; gap: 8px; }
.live-word { font-weight: 700; color: var(--red); letter-spacing: .02em; }
.live-word.idle { color: var(--t3); }
.dot {
  width: 8px; height: 8px; border-radius: 50%; background: var(--red);
  animation: pulse 2s ease-in-out infinite;
}
.dot-idle { background: var(--border-2); animation: none; }
@keyframes pulse { 0%, 100% { opacity: 1 } 50% { opacity: .3 } }
@media (prefers-reduced-motion: reduce) { .dot { animation: none } }

/* ── standing disaster coverage ──────────────────────────────────────────── */

.coverage {
  border: 1px solid var(--border);
  border-top: 4px solid var(--red);
  background: var(--bg-2);
  padding: 16px 18px;
  margin: 22px 0 0;
}
.coverage h2 { font-size: 22px; margin: 4px 0 6px; font-weight: 700; line-height: 1.45; }
.coverage p { margin: 0; color: var(--t2); font-size: 16px; }
.coverage-links { margin-top: 10px !important; display: flex; flex-wrap: wrap; gap: 8px 20px; }
.coverage-links a { color: var(--red); font-weight: 600; font-size: 15.5px; }
.dot-live {
  width: 8px; height: 8px; border-radius: 50%; background: var(--red);
  display: inline-block; margin-inline-end: 6px;
  animation: pulse 2s ease-in-out infinite;
}

.kicker {
  font-size: 13px; font-weight: 700; letter-spacing: .04em;
  color: var(--red); text-transform: uppercase; margin: 0 0 6px;
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
}
.kicker span { color: var(--t3); font-weight: 600; }

/* ── lead + rail ─────────────────────────────────────────────────────────── */

.lead-grid {
  display: grid; grid-template-columns: minmax(0, 1fr) 330px;
  gap: 30px; align-items: start;
  margin: 24px 0 0; padding-bottom: 26px;
  border-bottom: 1px solid var(--border);
}

.lead-headline {
  font-family: var(--serif);
  font-size: 38px; line-height: 1.35; font-weight: 700;
  margin: 0 0 12px; letter-spacing: -.01em;
}
.lead-headline a:hover { color: var(--red); }
.lead .dek { font-size: 19px; color: var(--t2); margin: 0 0 12px; }
.lead-empty .lead-headline { font-size: 27px; color: var(--t3); }

.why {
  font-size: 16px; color: var(--t2);
  border-inline-start: 3px solid var(--red);
  padding-inline-start: 12px; margin: 12px 0;
}
.why b { color: var(--t1); }

.meta { font-size: 13.5px; color: var(--t3); margin: 8px 0 0; }
.meta a { color: var(--blue); font-weight: 600; }
.cat-chip {
  color: var(--red); font-weight: 700; font-size: 13px;
  text-transform: uppercase; letter-spacing: .03em;
}
.ago { white-space: nowrap; }

.chips { display: flex; flex-wrap: wrap; gap: 6px; margin: 10px 0 0; }
.chip {
  font-size: 13px; color: var(--t2);
  border: 1px solid var(--border-2); border-radius: 3px;
  padding: 2px 9px; display: inline-block;
}

.rail { border-inline-start: 1px solid var(--border); padding-inline-start: 24px; }
.rail-head {
  display: flex; align-items: baseline; justify-content: space-between;
  border-bottom: 2px solid var(--t1); padding-bottom: 6px; margin-bottom: 4px;
}
.rail-head h2 { font-size: 19px; margin: 0; font-weight: 700; }
.rail-head a { font-size: 14px; color: var(--red); font-weight: 600; }
.rail-list { list-style: none; margin: 0; padding: 0; }
.rail-list li { padding: 11px 0; border-bottom: 1px solid var(--border); }
.rail-list li:last-child { border-bottom: 0; }
.rail-list a { font-size: 16px; font-weight: 600; line-height: 1.6; display: block; }
.rail-meta { display: block; font-size: 12.5px; color: var(--t3); margin-top: 3px; }

/* ── secondary strip ─────────────────────────────────────────────────────── */

.second-strip {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 24px; padding: 22px 0; border-bottom: 1px solid var(--border);
}
.second h3 { font-family: var(--serif); font-size: 20px; line-height: 1.45; margin: 0; font-weight: 700; }

/* ── category blocks ─────────────────────────────────────────────────────── */

.cat-grid {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 34px; margin: 26px 0 0;
}
.cat-head {
  display: flex; align-items: baseline; justify-content: space-between;
  border-bottom: 2px solid var(--t1); padding-bottom: 6px; margin-bottom: 12px;
}
.cat-head h2 { font-size: 21px; margin: 0; font-weight: 700; }
.cat-head a { font-size: 14px; color: var(--red); font-weight: 600; white-space: nowrap; }
.cat-lead h3 { font-family: var(--serif); font-size: 22px; line-height: 1.45; margin: 0 0 6px; font-weight: 700; }
.cat-lead .dek { font-size: 16px; color: var(--t2); margin: 0; }
.cat-list { list-style: none; margin: 14px 0 0; padding: 0; }
.cat-list li { padding: 10px 0; border-top: 1px solid var(--border); }
.cat-list a { font-size: 16.5px; font-weight: 600; line-height: 1.6; }

.block { margin: 30px 0 0; }
.page-h1 { font-family: var(--serif); font-size: 31px; font-weight: 700; margin: 0 0 6px; }
.subsec { font-size: 16px; color: var(--t3); margin: 0 0 16px; }

.item { padding: 15px 0; border-bottom: 1px solid var(--border); }
.item h3 { font-size: 19px; line-height: 1.55; margin: 0; font-weight: 600; }
.item .why { font-size: 15.5px; margin: 9px 0 0; }
.badge-new {
  background: var(--red); color: #fff; font-size: 12px; font-weight: 700;
  padding: 1px 7px; border-radius: 3px; vertical-align: middle;
}
.correction {
  font-size: 14px; color: var(--t2); background: var(--bg-2);
  border-inline-start: 3px solid var(--blue); padding: 7px 11px; margin: 9px 0 0;
}
.opinion .item h3 { font-family: var(--serif); font-style: italic; }

.viewall {
  display: inline-block; margin: 22px 0 0;
  font-size: 16px; font-weight: 700; color: var(--red);
}

/* ── provinces ───────────────────────────────────────────────────────────── */

.prov-grid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(148px, 1fr));
  gap: 10px; margin-top: 12px;
}
.prov-card {
  background: var(--bg-2); border: 1px solid var(--border);
  border-radius: 4px; padding: 12px 13px; display: block;
  min-height: 44px;
}
.prov-card:hover { border-color: var(--red); background: #fff; }
.prov-card .t { display: block; font-size: 17px; font-weight: 700; }
.prov-card .hq { display: block; font-size: 13px; color: var(--t3); }
.prov-card .n { display: block; font-size: 12.5px; color: var(--red); font-weight: 600; margin-top: 4px; }

/* ── newsletter ──────────────────────────────────────────────────────────── */

.news {
  background: var(--bg-2); border: 1px solid var(--border);
  border-top: 4px solid var(--red);
  padding: 22px; margin: 34px 0 40px;
}
.news h2 { font-size: 22px; margin: 0 0 6px; font-weight: 700; }
.news .vp { font-size: 16px; color: var(--t2); margin: 0 0 14px; }
.news form { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; }
.news input, .news select {
  font: inherit; font-size: 16px;   /* below 16px iOS zooms on focus and never
                                       zooms back out */
  padding: 11px 13px; min-height: 44px;
  border: 1px solid var(--border-2); border-radius: 3px;
  background: #fff; color: var(--t1);
}
.news select { min-width: 180px; }
.news input[type="email"] { flex: 1; min-width: 220px; }
.news input::placeholder { color: var(--t3); }
.news input[aria-invalid="true"] { border-color: var(--red); }
.news button {
  font: inherit; font-size: 16px; font-weight: 700; cursor: pointer;
  background: var(--red); color: #fff; border: 0; border-radius: 3px;
  padding: 12px 22px; min-height: 44px;
}
.news button:hover { background: var(--red-dark); }
.news button[disabled] { opacity: .6; cursor: default; }
.news .status { font-size: 14px; color: var(--t3); margin: 10px 0 0; min-height: 20px; }
.news .status.err { color: var(--red); }
.news .status.ok { color: #146B3A; }

/* ── live layer ──────────────────────────────────────────────────────────── */

.live-new {
  display: block; width: 100%; text-align: start; cursor: pointer;
  font: inherit; font-size: 15.5px; font-weight: 600;
  background: var(--bg-2); border: 1px solid var(--red); color: var(--red);
  border-radius: 3px; padding: 11px 14px; margin: 16px 0;
}
.live-new:hover { background: #fff; }
.live-new[hidden] { display: none; }
.item-new { background: #FFFBF0; }

/* ── prose (policy pages) ────────────────────────────────────────────────── */

.prose p { color: var(--t2); margin: 0 0 14px; }
.prose h3 { font-size: 19px; margin: 24px 0 8px; font-weight: 700; color: var(--t1); }
.prose b { color: var(--t1); }
.links { display: flex; flex-wrap: wrap; gap: 8px 20px; }
.links a { color: var(--red); font-weight: 600; }

/* ── footer ──────────────────────────────────────────────────────────────── */

footer { border-top: 2px solid var(--t1); margin-top: 40px; padding: 22px 0 40px; background: var(--bg-2); }
.foot-cats { display: flex; flex-wrap: wrap; gap: 8px 18px; margin-bottom: 14px; }
.foot-cats a { font-size: 16px; font-weight: 700; }
footer .links { gap: 6px 16px; margin-bottom: 14px; }
footer .links a { font-size: 14.5px; color: var(--t2); font-weight: 400; }
footer .links a:hover { color: var(--red); }
.disclosure { font-size: 13.5px; color: var(--t3); margin: 0; max-width: 76ch; }

/* ── disaster pages ──────────────────────────────────────────────────────── */

.ne-hero { margin: 26px 0 20px; }
.ne-hero h1 { font-family: var(--serif); font-size: 33px; font-weight: 700; margin: 6px 0 12px; line-height: 1.4; }
.ne-hero .mono { font-size: 13px; color: var(--t3); letter-spacing: .03em; margin: 0; }
.ne-standfirst { font-size: 18.5px; color: var(--t2); margin: 0 0 12px; max-width: 74ch; }
.ne-cause, .ne-body { font-size: 16.5px; color: var(--t2); max-width: 74ch; }

.notice {
  border: 1px solid var(--border); border-inline-start-width: 4px;
  background: var(--bg-2); padding: 14px 16px; margin: 0 0 26px;
}
.notice p { margin: 0 0 8px; font-size: 15.5px; color: var(--t2); }
.notice p:last-child { margin-bottom: 0; }
.notice .mono {
  font-size: 12.5px; letter-spacing: .06em; text-transform: uppercase;
  color: var(--t3); font-weight: 700;
}
.notice a { color: var(--red); font-weight: 600; }
.notice-warn { border-inline-start-color: var(--red); }
.notice-hold { border-inline-start-color: var(--border-2); }

/* Every tile carries its own attribution line — stat() in src/bipad.mjs cannot
   render a value without one. */
.stat-grid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(228px, 1fr));
  gap: 12px; margin: 14px 0 4px;
}
.stat { background: #fff; border: 1px solid var(--border); padding: 14px 15px; }
.stat.prov { border-top: 3px solid var(--red); }
.stat-label { font-size: 14.5px; color: var(--t3); }
.stat-value { font-size: 33px; font-weight: 700; line-height: 1.3; color: var(--t1); }
.stat-qual { font-size: 13.5px; color: var(--t2); }
.stat-src { font-size: 12px; color: var(--t3); margin-top: 7px; }
.stat-src a { color: var(--blue); }
.stat-note { font-size: 13.5px; color: var(--t2); margin: 8px 0 0; }
.await { font-size: 15px; color: var(--t3); font-style: italic; font-weight: 400; }

/* A four-column table at 360px either wraps every cell to one word or clips.
   Horizontal scroll is the honest option. */
.table-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; margin: 12px 0 0; }
.ne-table { border-collapse: collapse; width: 100%; min-width: 620px; font-size: 15.5px; }
.ne-table caption { text-align: start; color: var(--t3); font-size: 14px; padding-bottom: 8px; }
.ne-table th, .ne-table td {
  text-align: start; padding: 11px 13px;
  border-bottom: 1px solid var(--border); vertical-align: top;
}
.ne-table thead th {
  font-size: 13px; font-weight: 700; letter-spacing: .03em;
  text-transform: uppercase; color: var(--t3);
  border-bottom: 2px solid var(--t1);
}
.ne-table tbody th { font-weight: 700; white-space: nowrap; }
.ne-table td { color: var(--t2); }
.ne-table .td-impact { min-width: 260px; }
.ne-table .td-src { font-size: 12px; white-space: nowrap; }
.ne-table .td-src a { color: var(--blue); }
.ne-table tbody tr:hover { background: var(--bg-2); }
.ne-fields { margin: 10px 0 0; }
.ne-fields .chip { margin: 0 6px 6px 0; }

.ne-timeline { list-style: none; margin: 14px 0 0; padding: 0; }
.ne-timeline li {
  display: grid; grid-template-columns: 165px minmax(0, 1fr); gap: 16px;
  padding: 13px 0; border-bottom: 1px solid var(--border);
}
.ne-timeline li:last-child { border-bottom: 0; }
.tl-when { color: var(--red); font-size: 14px; font-weight: 700; }
.tl-what { color: var(--t2); font-size: 16px; }
.tl-src { font-size: 12px; color: var(--t3); margin-top: 4px; }
.tl-src a { color: var(--blue); }

.ne-help { margin: 12px 0 0; padding-inline-start: 20px; }
.ne-help li { color: var(--t2); font-size: 16px; margin-bottom: 8px; }
.ne-help b { color: var(--t1); }
.ne-help a { color: var(--blue); font-weight: 600; }

.ne-guidance { margin: 12px 0 0; padding-inline-start: 22px; }
.ne-guidance li { color: var(--t2); font-size: 16px; margin-bottom: 10px; max-width: 74ch; }

.donor {
  border: 1px solid var(--border); border-inline-start: 4px solid var(--blue);
  padding: 16px 17px; margin: 0 0 14px; background: #fff;
}
.donor-head { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.donor-head h3 { font-size: 19px; margin: 0; font-weight: 700; }
.donor-head a { color: var(--blue); }
.donor-en { font-size: 12.5px; color: var(--t3); margin: 3px 0 9px; letter-spacing: .01em; }
.donor-desc { font-size: 16px; color: var(--t2); margin: 0 0 9px; max-width: 78ch; }
.donor-caution { font-size: 15px; color: var(--red-dark); margin: 9px 0 0; max-width: 78ch; font-weight: 600; }
.donor-src { font-size: 12px; color: var(--t3); margin: 10px 0 0; }
.donor-src a { color: var(--blue); }

/* ── responsive ──────────────────────────────────────────────────────────── */

@media (max-width: 900px) {
  .lead-grid { grid-template-columns: 1fr; gap: 24px; }
  .rail { border-inline-start: 0; padding-inline-start: 0; border-top: 1px solid var(--border); padding-top: 16px; }
  .cat-grid { grid-template-columns: 1fr; gap: 26px; }
  .second-strip { grid-template-columns: 1fr; gap: 16px; }
  .second { padding-bottom: 14px; border-bottom: 1px solid var(--border); }
  .second:last-child { border-bottom: 0; padding-bottom: 0; }
}

@media (max-width: 620px) {
  body { font-size: 16.5px; }
  .topics { margin: 0 -18px; padding: 0 18px; }
  .lead-headline { font-size: 28px; }
  .lead .dek { font-size: 17px; }
  .ne-hero h1 { font-size: 26px; }
  .stat-value { font-size: 28px; }
  .ne-timeline li { grid-template-columns: 1fr; gap: 4px; }
  .masthead { flex-wrap: wrap; }
  .btn-sub { margin-inline-start: auto; }
}

@media print {
  header .topics, .livestrip, .news, .btn-sub, .rail { display: none; }
  body { font-size: 12pt; }
  a[href^="http"]::after { content: " (" attr(href) ")"; font-size: 9pt; color: #555; }
}

/* ── Missing-persons tracker and status page ───────────────────────────────
   Status is never carried by colour alone: every chip has a word in it. About
   8% of men have a colour vision deficiency, and "green dot vs amber dot" is
   the difference between "found alive" and "still missing" on this page. */

.st {
  display: inline-block;
  font-size: 13.5px;
  font-weight: 600;
  line-height: 1.5;
  padding: 3px 9px;
  border-radius: 3px;
  border: 1px solid;
  white-space: nowrap;
}
.st-ok    { color: #17663A; background: #E7F5EC; border-color: #B6DFC6; }
.st-warn  { color: #8A5200; background: #FDF3E2; border-color: #EBD4A6; }
.st-info  { color: #12395E; background: #E9F0F7; border-color: #BCD0E3; }
.st-grave { color: #8A1121; background: #FBEAED; border-color: #EBBDC5; }

.st-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 12px;
  margin: 20px 0 8px;
}
.st-card {
  border: 1px solid var(--border);
  border-top: 3px solid var(--border-2);
  border-radius: 4px;
  padding: 13px 14px;
  background: var(--card);
}
.st-card.st-ok    { border-top-color: #2E9E5B; background: #fff; }
.st-card.st-warn  { border-top-color: #D08A15; background: #fff; }
.st-card.st-info  { border-top-color: #2E6FA8; background: #fff; }
.st-card.st-grave { border-top-color: var(--red); background: #fff; }
.st-n { font-size: 30px; font-weight: 700; line-height: 1.3; color: var(--t1); }
.st-label { font-size: 15px; font-weight: 600; color: var(--t1); }
.st-desc { font-size: 13.5px; color: var(--t3); margin-top: 3px; }

.track-controls { margin: 14px 0 4px; }
.track-controls input[type="search"] {
  width: 100%;
  max-width: 420px;
  /* 16px minimum: anything smaller makes iOS zoom the viewport on focus, and
     it does not zoom back out. */
  font-size: 16px;
  min-height: 44px;
  padding: 10px 13px;
  border: 1px solid var(--border-2);
  border-radius: 3px;
  background: #fff;
  color: var(--t1);
}
.track-filters { display: flex; flex-wrap: wrap; gap: 8px; margin: 12px 0 0; }
.track-filters button {
  font: inherit;
  font-size: 14px;
  min-height: 44px;
  padding: 8px 14px;
  border: 1px solid var(--border-2);
  border-radius: 3px;
  background: #fff;
  color: var(--t2);
  cursor: pointer;
}
.track-filters button[aria-pressed="true"] {
  background: var(--red); border-color: var(--red); color: #fff; font-weight: 600;
}
.track-count { font-size: 13px; color: var(--t3); margin: 10px 0 0; min-height: 20px; }
.track-empty { color: var(--t3); padding: 18px 0; }
.row-en { display: block; font-size: 12.5px; color: var(--t3); font-weight: 400; }

.person .person-en { font-size: 16px; color: var(--t3); margin: -4px 0 10px; }
.person-status { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin: 8px 0 0; }
.person-status-desc { font-size: 15px; color: var(--t2); }
.person-fields { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 12px; margin: 12px 0 14px; }
.pf { border-bottom: 1px solid var(--border); padding-bottom: 9px; }
.pf dt { font-size: 13px; color: var(--t3); }
.pf dd { margin: 2px 0 0; font-size: 16px; color: var(--t1); }

.status-hero {
  display: flex; align-items: flex-start; gap: 14px;
  border: 1px solid var(--border); border-left-width: 4px;
  border-radius: 4px; padding: 16px 18px; margin: 6px 0 24px; background: #fff;
}
.status-hero p { margin: 4px 0 0; color: var(--t2); font-size: 15.5px; }
.status-word { font-size: 19px; font-weight: 700; color: var(--t1); }
.status-dot { width: 13px; height: 13px; border-radius: 50%; margin-top: 7px; flex: none; }
.status-ok    { border-left-color: #2E9E5B; }
.status-ok .status-dot { background: #2E9E5B; }
.status-warn  { border-left-color: #D08A15; }
.status-warn .status-dot { background: #D08A15; }
.status-down  { border-left-color: var(--red); }
.status-down .status-dot { background: var(--red); }

@media (max-width: 620px) {
  .st-n { font-size: 26px; }
  .track-filters button { flex: 1 1 auto; }
}

/* ── App shell: bottom nav, install bar, offline bar, share ────────────────
   Everything in this block is phone-first. The bottom nav is hidden from
   700px up, where the topic bar in the masthead is already within reach. */

html { -webkit-text-size-adjust: 100%; }

body {
  /* Kills the 300ms tap delay and the grey flash on tap without disabling
     zoom, which some resets do by breaking the viewport instead. */
  -webkit-tap-highlight-color: transparent;
  /* Stops the whole page rubber-banding when a scroll container hits its end. */
  overscroll-behavior-y: contain;
}

a, button, input, select, textarea, summary { touch-action: manipulation; }

/* Anchors would otherwise land under the sticky elements. */
html { scroll-padding-top: 16px; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

.offline-bar {
  margin: 0;
  padding: 9px max(18px, env(safe-area-inset-left));
  background: #FDF3E2;
  color: #7A4A00;
  border-bottom: 1px solid #EBD4A6;
  font-size: 14px;
}
.offline-bar[hidden] { display: none; }

.install-bar {
  display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
  margin: 14px max(18px, env(safe-area-inset-left)) 0;
  padding: 14px 16px;
  background: var(--bg-2);
  border: 1px solid var(--border);
  border-left: 3px solid var(--red);
  border-radius: 4px;
}
.install-bar[hidden] { display: none; }
.install-bar b { font-size: 16px; }
.install-bar p { margin: 3px 0 0; font-size: 14.5px; color: var(--t2); }
.install-actions { display: flex; gap: 8px; margin-inline-start: auto; }
.install-bar button {
  font: inherit; font-size: 15px; font-weight: 600;
  min-height: 44px; padding: 10px 18px;
  border: 1px solid var(--red); border-radius: 3px;
  background: var(--red); color: #fff; cursor: pointer;
}
.install-bar button.secondary { background: #fff; color: var(--t2); border-color: var(--border-2); }

.share-btn {
  display: inline-flex; align-items: center; gap: 8px;
  font: inherit; font-size: 15px; font-weight: 600;
  min-height: 44px; padding: 10px 16px;
  border: 1px solid var(--border-2); border-radius: 3px;
  background: #fff; color: var(--red); cursor: pointer;
}
.share-btn svg { width: 18px; height: 18px; fill: currentColor; }
.share-btn[hidden] { display: none; }

.bottom-nav { display: none; }

@media (max-width: 699px) {
  .bottom-nav {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    position: fixed;
    inset: auto 0 0 0;
    z-index: 40;
    background: #fff;
    border-top: 1px solid var(--border);
    /* The home indicator on a modern iPhone sits over the last ~34px. */
    padding-bottom: env(safe-area-inset-bottom);
  }
  .bottom-nav a {
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    gap: 3px;
    min-height: 56px;
    padding: 7px 2px;
    font-size: 12px;
    font-weight: 600;
    color: var(--t3);
    text-decoration: none;
  }
  .bottom-nav a:hover { text-decoration: none; }
  .bottom-nav svg { width: 23px; height: 23px; fill: currentColor; }
  .bottom-nav a[aria-current="page"] { color: var(--red); }
  .bottom-nav a[aria-current="page"] svg { fill: var(--red); }

  /* Content must clear the fixed bar, or the last paragraph and the footer
     links sit permanently underneath it. */
  body { padding-bottom: calc(58px + env(safe-area-inset-bottom)); }

  .install-bar { margin-inline: 0; border-radius: 0; border-inline: 0; }
  .install-actions { margin-inline-start: 0; width: 100%; }
  .install-actions button { flex: 1; }
}

@media print { .bottom-nav, .install-bar, .offline-bar, .share-btn { display: none !important; } }

.person-share { margin: 14px 0 0; }

/* Register thumbnails. 40px, square, and never a body — see validate() in
   src/bepatta.mjs, which refuses a photo on a deceased or unidentified record. */
.row-person { display: flex; align-items: center; gap: 10px; }
.row-photo {
  flex: none; width: 40px; height: 40px; border-radius: 3px; object-fit: cover;
  background: var(--raised); border: 1px solid var(--border);
}
.row-photo-none {
  display: flex; align-items: center; justify-content: center;
  font-size: 17px; font-weight: 700; color: var(--t3);
}
.person-photo {
  width: 96px; height: 96px; border-radius: 4px; object-fit: cover;
  border: 1px solid var(--border); margin: 4px 0 4px;
}
.person-photo-credit { font-size: 12px; color: var(--t3); margin: 0 0 8px; }

.nat-table th[scope="row"] { font-weight: 600; }
.nat-n { font-variant-numeric: tabular-nums; font-weight: 700; white-space: nowrap; }
.nat-bar { width: 45%; min-width: 90px; }
.nat-bar span {
  display: block; height: 9px; border-radius: 2px; background: var(--red); opacity: .8;
}

/* ── Missing-persons register ──────────────────────────────────────────────
   Built for a relative on a phone, often on a bad connection, often scrolling
   with one thumb while doing something else. Every decision here follows from
   that: whole rows are tap targets, the stat boxes double as filters so there
   is no separate control to find, and the drawer opens over the list so a
   search is never lost. */

.stat-filters { margin-top: 14px; }
.stat-filters .st-card {
  display: block; width: 100%; text-align: start; cursor: pointer;
  font: inherit; border-width: 1px; border-top-width: 3px;
  min-height: 44px; -webkit-tap-highlight-color: transparent;
}
.stat-filters .st-card span { display: block; }
.stat-filters .st-card[aria-pressed="true"] {
  background: var(--bg-2); border-color: var(--red-dark); border-top-color: var(--red);
  box-shadow: inset 0 0 0 1px var(--red);
}
.st-card.st-all { border-top-color: var(--blue); }

.track-controls select {
  font-size: 16px; min-height: 44px; margin-top: 10px;
  width: 100%; max-width: 420px; padding: 10px 12px;
  border: 1px solid var(--border-2); border-radius: 3px; background: #fff; color: var(--t1);
}

.person-list { list-style: none; margin: 14px 0 0; padding: 0; }
.person-row { border-bottom: 1px solid var(--border); }
.person-btn {
  display: flex; align-items: center; gap: 12px; width: 100%;
  font: inherit; text-align: start; background: none; border: 0; cursor: pointer;
  /* Comfortably over the 44px guideline: this list is scrolled fast. */
  padding: 12px 4px; min-height: 60px;
  /* One line. Adding the photo and the pencil pushed the total past the
     available width, and the status chip wrapped underneath — which read as a
     broken row rather than a full one. The name is the only part allowed to
     give up space. */
  flex-wrap: nowrap;
}
.person-btn:hover { background: var(--bg-2); }
.person-name:hover { text-decoration: underline; }
.person-name:focus-visible { outline: 2px solid var(--red); outline-offset: 2px; border-radius: 2px; }
/* flex-basis 0 so the name shrinks first and the controls keep their size,
   rather than the controls being squeezed onto the next line. */
.person-main { flex: 1 1 0; min-width: 0; }
.person-name {
  /* Now a real <button>: it is what the keyboard reaches and what a screen
     reader announces. Styled to look like the text it replaced. */
  display: block; width: 100%; text-align: start;
  font: inherit; background: none; border: 0; padding: 0; cursor: pointer;
  font-size: 16.5px; font-weight: 600; color: var(--t1); line-height: 1.4;
  /* Truncate rather than wrap: a two-line name doubles the row height and the
     list is 1,809 long. The full name is on the page it opens. */
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
/* Both were inline, so the name and the age ran together — "SUNDRASAN
   KANAGAMAH६० वर्ष". They are separate lines of information and need to be
   separate lines. */
.person-name { display: block; }
.person-meta {
  display: block; font-size: 13.5px; color: var(--t3); margin-top: 1px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

.more-btn {
  font: inherit; font-size: 15px; font-weight: 600; margin-top: 16px;
  min-height: 44px; padding: 11px 20px; width: 100%;
  border: 1px solid var(--border-2); border-radius: 3px; background: #fff; color: var(--red);
  cursor: pointer;
}
.more-btn[hidden] { display: none; }

/* Drawer. A sheet from the bottom on a phone, a side panel from 700px up. */
.drawer { position: fixed; inset: 0; z-index: 60; }
.drawer[hidden] { display: none; }
.drawer-scrim { position: absolute; inset: 0; background: rgba(20, 17, 14, .5); }
.drawer-panel {
  position: absolute; inset: auto 0 0 0;
  max-height: 88vh; max-height: 88dvh;
  overflow-y: auto; -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
  background: #fff; border-radius: 12px 12px 0 0;
  padding: 20px 20px calc(24px + env(safe-area-inset-bottom));
  animation: sheet-up .18s ease-out;
}
@keyframes sheet-up { from { transform: translateY(14px); opacity: .6 } to { transform: none; opacity: 1 } }
@media (prefers-reduced-motion: reduce) { .drawer-panel { animation: none } }
body.drawer-open { overflow: hidden; }

.drawer-close {
  position: absolute; top: 10px; inset-inline-end: 12px;
  font: inherit; font-size: 20px; line-height: 1;
  width: 44px; height: 44px; border: 0; border-radius: 50%;
  background: var(--raised); color: var(--t2); cursor: pointer;
}
.drawer-person { display: flex; gap: 14px; align-items: flex-start; padding-inline-end: 48px; }
.drawer-person h2 { font-size: 21px; margin: 0 0 2px; line-height: 1.4; overflow-wrap: anywhere; }
.drawer-actions { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; margin: 16px 0 0; }
.drawer-full { font-size: 15px; font-weight: 600; }
.drawer-note {
  font-size: 13.5px; color: var(--t3); margin: 16px 0 0;
  border-top: 1px solid var(--border); padding-top: 12px;
}

@media (min-width: 700px) {
  .drawer-panel {
    inset: 0 0 0 auto; width: min(460px, 100%);
    max-height: none; border-radius: 0; padding: 26px 28px;
    animation: sheet-in .18s ease-out;
  }
  @keyframes sheet-in { from { transform: translateX(18px); opacity: .6 } to { transform: none; opacity: 1 } }
}

/* The search link leads the coverage banner. During a disaster it is the thing
   people arrive for, and it was previously reachable from the front page only
   through the bottom nav — which is hidden above 700px, so desktop had no
   route to it at all. */
.coverage-links .coverage-primary {
  display: inline-flex; align-items: center; min-height: 44px;
  background: var(--red); color: #fff;
  padding: 10px 18px; border-radius: 3px;
  font-weight: 700; margin-inline-end: 6px;
}
.coverage-links .coverage-primary:hover { background: var(--red-dark); text-decoration: none; }

.foot-contact { font-size: 15px; color: var(--t2); margin: 0 0 10px; }
.foot-contact a { font-weight: 700; }
.foot-contact span { font-size: 13.5px; color: var(--t3); }

.stale-note {
  margin: 12px 0 0; padding: 11px 14px;
  background: #FDF3E2; border: 1px solid #EBD4A6; border-left: 3px solid #D08A15;
  border-radius: 4px; font-size: 15px; color: #7A4A00; max-width: 74ch;
}
.stale-note[hidden] { display: none; }

/* Language toggle. Shown only where a translation exists — the register, where
   it matters: most people on that list are foreign nationals. Two anchors
   styled as one control, so it works with no JavaScript. */
.lang-toggle {
  display: inline-flex;
  align-items: stretch;
  border: 1px solid var(--border-2);
  border-radius: 999px;
  overflow: hidden;
  background: #fff;
  margin-inline-start: auto;
  flex: none;
}
.lang-toggle .seg {
  display: flex; align-items: center; justify-content: center;
  /* 44px tall and 44px+ wide: this sits in a header people hit with a thumb. */
  min-height: 40px; min-width: 52px;
  padding: 8px 14px;
  font-size: 14.5px; font-weight: 600; line-height: 1;
  color: var(--t2); text-decoration: none; white-space: nowrap;
}
.lang-toggle .seg:hover { background: var(--bg-2); text-decoration: none; }
.lang-toggle .seg.on { background: var(--red); color: #fff; cursor: default; }

@media (max-width: 560px) {
  .lang-toggle .seg { min-width: 44px; padding: 8px 11px; font-size: 14px; }
}

/* Status icons. A second channel alongside the word — never instead of it. */
.st-icon {
  width: 14px; height: 14px; fill: currentColor;
  margin-inline-end: 5px; vertical-align: -2px;
  /* evenodd so an inner subpath cuts a hole instead of filling flat: the cross
     inside the hospital, the window in the pin, the arch in the headstone. */
  fill-rule: evenodd;
}
.st {
  display: inline-flex; align-items: center;
  /* Never shrinks and never wraps: the status is the one thing every row must
     show in full, and it sits at the end where flex would squeeze it first. */
  flex: none; white-space: nowrap;
}

/* Deceased and unidentified records show ॐ rather than a face. Police publish
   photographs of the unidentified through their own channels, where the viewer
   has chosen to look; a thumbnail in a scrolling list is something a relative
   comes upon without warning. */
.row-photo-rip {
  display: flex; align-items: center; justify-content: center;
  font-size: 19px; color: var(--t3); background: var(--raised);
}

.contact-links { margin: 12px 0 0; display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.contact-label { font-size: 14px; color: var(--t3); }
.contact-chip {
  display: inline-flex; align-items: center; min-height: 36px; padding: 7px 13px;
  border: 1px solid var(--border-2); border-radius: 999px;
  font-size: 14px; font-weight: 600; text-decoration: none; background: #fff;
}
.contact-chip:hover { background: var(--bg-2); text-decoration: none; }
.contact-by { font-size: 12px; color: var(--t3); width: 100%; }
.person-photo-rip {
  display: flex; align-items: center; justify-content: center;
  font-size: 40px; color: var(--t3); background: var(--raised);
  width: 96px; height: 96px; border-radius: 4px; border: 1px solid var(--border);
}

/* Memorial links read differently from contact links: softer, and the heading
   says श्रद्धाञ्जली rather than "contact". */
.contact-links.memorial .contact-chip { border-color: var(--border); background: var(--bg-2); }
.contact-links.memorial .contact-label { font-weight: 600; color: var(--t2); }

/* Sighting report form. Someone fills this in on a phone, often standing in a
   hospital corridor, sometimes shaking. Large targets, generous spacing, and
   the emergency numbers above everything. */
.sighting-urgent { font-weight: 600; }
.sighting form { margin-top: 16px; max-width: 620px; }
.fld { margin: 0 0 14px; }
.fld label { display: block; font-size: 14.5px; font-weight: 600; color: var(--t2); margin-bottom: 5px; }
.fld input, .fld select, .fld textarea {
  width: 100%;
  /* 16px, or iOS zooms the viewport on focus and does not zoom back. */
  font: inherit; font-size: 16px;
  min-height: 46px; padding: 11px 13px;
  border: 1px solid var(--border-2); border-radius: 3px;
  background: #fff; color: var(--t1);
}
.fld textarea { min-height: 104px; resize: vertical; line-height: 1.6; }
.fld-row { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.hint { display: block; font-size: 13px; color: var(--t3); margin: -8px 0 14px; }
.sighting-send {
  font: inherit; font-size: 16px; font-weight: 700;
  min-height: 48px; padding: 12px 26px; margin-top: 6px;
  border: 1px solid var(--red); border-radius: 3px;
  background: var(--red); color: #fff; cursor: pointer;
}
.sighting-send:disabled { opacity: .6; cursor: default; }
.sighting-status { margin-top: 12px; font-size: 15.5px; }
.sighting-status.ok { color: #17663A; font-weight: 600; }
.sighting-status.err { color: var(--red); font-weight: 600; }

@media (max-width: 560px) { .fld-row { grid-template-columns: 1fr; gap: 0; } }

/* Links out to the government portals. A name absent here may still be on
   theirs — the register says so, and then makes it one tap away. */
.portal-links { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.portal-links a {
  display: inline-flex; align-items: center; min-height: 38px; padding: 8px 13px;
  background: #fff; border: 1px solid #EBD4A6; border-radius: 3px;
  font-size: 14px; font-weight: 600; text-decoration: none;
}

/* Social icons. All three always shown: grey when no link exists, so the row
   never reflows and it is obvious which records still need one. Grey means
   "not supplied", never "no account" — we publish only what a family sends. */
.social-row { display: flex; gap: 4px; flex: none; margin-inline-start: 8px; align-items: center; }
.soc {
  display: flex; align-items: center; justify-content: center;
  width: 34px; height: 34px; border-radius: 50%;
}
.soc svg { width: 17px; height: 17px; fill: currentColor; }
.soc-off { color: var(--border-2); cursor: default; }
.soc-facebook  { color: #1877F2; }
.soc-instagram { color: #C13584; }
.soc-linkedin  { color: #0A66C2; }
.soc-facebook:hover, .soc-instagram:hover, .soc-linkedin:hover { background: var(--bg-2); }

@media (max-width: 620px) {
  /* On a narrow screen the name matters more than the icons; keep them but
     tighten so the status chip is never pushed off. */
  .soc { width: 28px; height: 28px; }
  .soc svg { width: 15px; height: 15px; }
  .social-row { gap: 2px; margin-inline-start: 4px; }
  .person-btn { gap: 9px; }
}

@media (max-width: 430px) {
  /* Below this the three greyed icons cost more than they give: they are only
     informative when one is coloured. The pencil stays, because adding a link
     is the action we are asking for. */
  .social-row .soc-off { display: none; }
}
.social-lg { margin: 8px 0 0; }
.social-lg .soc { width: 38px; height: 38px; }
.social-lg .soc svg { width: 19px; height: 19px; }
.nat-unstated th { color: var(--t3); font-style: italic; }
.nat-unstated .nat-bar span { opacity: .45; }

/* Diyo, drawn as SVG rather than the stock photograph — that image is licensed
   to someone else and would carry a watermark. The flame is the only warm
   colour on an otherwise grey mark, which is what makes it read as a memorial
   at 40px rather than as a generic icon. */
.rip-icon { width: 60%; height: 60%; }
.rip-flame { fill: #E8892B; }
.rip-bowl  { fill: var(--t3); opacity: .55; }
.person-photo-rip .rip-icon { width: 56%; height: 56%; }
.lookup-link { font-weight: 600; }

/* The pencil sits with the social icons, so "these are the links, and here is
   how to add one" reads as a single idea. */
.soc-edit {
  border: 1px dashed var(--border-2); background: none; cursor: pointer;
  color: var(--t3); padding: 0;
}
.soc-edit:hover { background: var(--bg-2); color: var(--red); }

/* The family appeal. Warm yellow with a fully round end, so it reads as an
   invitation rather than the crimson warnings elsewhere on these pages — those
   mean "be careful", this means "you can help". */
.appeal {
  background: #FEF7E4;
  border: 1px solid #EBD4A6;
  border-radius: 4px 22px 22px 4px;
  border-left: 4px solid #D9A02B;
  padding: 18px 22px;
  margin: 20px 0 6px;
  max-width: 74ch;
}
.appeal-head { font-size: 18.5px; font-weight: 700; color: #6B4300; margin: 0 0 8px; line-height: 1.45; }
.appeal-lede { font-size: 15.5px; color: #5A4522; margin: 0 0 12px; line-height: 1.75; }
.appeal-steps {
  margin: 0 0 12px; padding-inline-start: 22px;
  font-size: 15.5px; color: #5A4522; line-height: 1.8;
}
.appeal-steps li { margin-bottom: 5px; }
.appeal-foot { font-size: 14px; color: #7A5C2E; margin: 0; line-height: 1.7; }
.appeal-foot a { color: #8A4A00; font-weight: 700; }

@media (max-width: 560px) {
  .appeal { padding: 16px 17px; border-radius: 4px 18px 18px 4px; }
  .appeal-head { font-size: 17px; }
}

/* News coverage sits apart from the contact links, and reads as a citation
   rather than a way to reach anyone. */
.news-link { margin: 10px 0 0; font-size: 14.5px; }
.news-link a { font-weight: 600; }

/* An English way in, on a Nepali front page. Most of the people on that
   register are foreign nationals, and their families arrive here from a link
   in a foreign newspaper with no idea the site has an English side. */
.coverage-en {
  margin: 12px 0 0; padding-top: 11px;
  border-top: 1px solid var(--border);
  font-size: 15px; line-height: 1.6;
}
.coverage-en a { font-weight: 700; }
.coverage-en span { display: block; font-size: 13.5px; color: var(--t3); margin-top: 2px; }

/* One English item at the end of the Nepali nav. It names what it leads to
   rather than saying "English", because there is no English edition — only the
   register — and a bare language label would promise a whole site. */
/* A pill, so it reads as a deliberate separate thing rather than a category
   whose name happens to be in English. */
.topic-en {
  font-weight: 700; color: #fff !important; white-space: nowrap;
  background: var(--blue); border-radius: 999px;
  padding-block: 6px; padding-inline: 12px;
  margin-inline-start: 6px; margin-block: 6px;
  border-bottom: 0 !important; align-self: center; min-height: 32px;
}
.topic-en:hover { background: var(--red); color: #fff !important; }

/* The invitation that fills the empty middle of a row with nothing attached.
   Quiet until hovered — it must not compete with the name or the status, and
   there are 1,700 of these on the page. */
.add-link {
  display: inline-flex; align-items: center; gap: 6px; flex: none;
  margin-inline-start: 14px; padding: 7px 12px; min-height: 34px;
  font: inherit; font-size: 13.5px; font-weight: 600;
  color: var(--t3); background: none;
  border: 1px dashed var(--border-2); border-radius: 999px; cursor: pointer;
  white-space: nowrap;
}
.add-link svg { width: 14px; height: 14px; fill: currentColor; }
.add-link:hover { color: var(--red); border-color: var(--red); background: #FFF7F7; }

/* Below 760px the row needs its width for the name and the status; the pencil
   already carries the same action. */
@media (max-width: 760px) { .add-link { display: none; } }

/* The map. Sized generously — the points cluster along one river, so a small
   canvas is a smear rather than a map. */
.map-canvas {
  height: 62vh; min-height: 380px; max-height: 640px;
  margin: 18px 0 8px; border-top: 1px solid var(--border); border-bottom: 1px solid var(--border);
  background: var(--bg-2);
}
.map-attrib { max-width: 760px; margin: 0 auto 26px; padding: 0 16px; color: var(--t3); font-size: 12.5px; }

/* Legend swatches match the markers: fill and outline differ as well as
   colour, so the two kinds stay distinguishable without relying on hue. */
.lg { display: inline-block; width: 12px; height: 12px; border-radius: 50%; vertical-align: -1px; }
.lg-official { background: #C8102E; border: 2px solid #C8102E; }
.lg-reported { background: #fff; border: 2px solid #6B665E; }

.mp-kind { display: inline-block; margin-top: 4px; font-size: 12px; font-weight: 700; }
.mp-official { color: #C8102E; }
.mp-reported { color: #6B665E; }
.mp-place { color: var(--t3); font-size: 12.5px; }
.leaflet-control-layers-overlays label { font-size: 13.5px; line-height: 1.9; }
.map-link { margin: 14px 0 0; font-size: 15.5px; font-weight: 600; }
.coverage-links-more { margin-top: 8px; }
.topic-map { font-weight: 700; color: var(--red) !important; white-space: nowrap; }