/* =====================================================================
   MHPSS Nepal -- the public website's own components (Layer 3)
   ---------------------------------------------------------------------
   Loaded after app.css and design.css on the eight public pages, and on
   no other page. The model is mhpssmyanmar.org, page for page; who reads
   each page, and what they came for, is written down in the page brief
   kept with the project documents.

   No colour is invented here. Every colour is a design.css token, so the
   contrast work already done on those tokens holds, and
   tools/contrast-sweep.py checks what actually rendered.

   Running text is justified and never hyphenated by the rule at the end
   of design.css. Nothing here sets text-align on running text, and no
   rule sets it on th and td together (tools/text-setting-check.py).
   ===================================================================== */

/* `hidden` loses to any display set on a class; restated for this sheet
   too, because it bit twice on the hub before it was fixed there. */
[hidden]{display:none!important}

/* ---------- one dark, not two ---------------------------------------
   app.css paints body text with its own --ink (#20313b), a blue-black
   close enough to --hc-ink (#153f4c) that the two read as a mistake
   rather than as two colours: on the Referral Directory 159 text nodes
   rendered in the old value beside 291 in the new one. Both are dark
   slate blues, so the page simply looked slightly dirty.

   design.css's --hc-ink is the site's body ink, so it is the one that
   wins here. Set in THIS sheet, which loads after app.css and after
   design.css on the eight public pages and on no other page, so the
   shared sheet is not mutated for the hub and the reference pages that
   also read it. Colour is not invented: it is design.css's token, which
   is what this sheet's header promises.

   The same one-dark rule covers the figures drawn inside flood-response:
   svg fill and stroke literals cannot read a custom property, so those
   were changed by hand to #153f4c and are recorded here so a future
   rebuild of a figure does not quietly put the old value back.

   NOT covered, and left alone on purpose: the translation bar's chip in
   assets/i18n.js sets its own literal on its own pale surface, and the
   reference pages (architecture, layer3, method, access-explained) read
   page.css and brand.css, which are not part of the public band. Both are
   out of this sheet's reach and neither carries body text. */
:root{ --ink:#153f4c; }

/* ---------- page head --------------------------------------------- */
/* A tinted band across the whole window, with the title on the frame. The
   band is painted by a spread shadow and clipped to the window's width, so
   the element itself keeps the frame's width and nothing scrolls sideways;
   the second shadow is the band's bottom rule. */
.phead{padding:40px 0 38px;margin:0 0 6px;background:var(--wh-t);
  box-shadow:0 0 0 100vmax var(--wh-t),0 1px 0 100vmax var(--wh-b);
  clip-path:inset(0 -100vmax -1px)}
.phead .eyebrow{font-size:13px;letter-spacing:1.4px;text-transform:uppercase;
  color:var(--wh-d);font-weight:700}
.phead h1{font-size:clamp(34px,3.6vw,54px);font-weight:700;line-height:1.12;
  color:var(--wh-dd);letter-spacing:-.8px;margin:8px 0 0;max-width:none}
.phead .subtitle{max-width:none;font-size:19px;line-height:1.6;margin-top:14px;color:var(--hc-mute)}
@media (max-width:620px){ .phead{padding:26px 0 24px} .phead .subtitle{font-size:17px} }
.state{display:inline-block;font-size:12px;font-weight:700;letter-spacing:.5px;
  text-transform:uppercase;color:var(--hc-mute);background:#fff;
  border:1px solid #939391;border-radius:3px;padding:2px 7px;vertical-align:middle;
  /* wraps rather than pushing the page sideways. It was nowrap, and a long
     state -- "Forms and dashboard built; field pilot next" is 304px at this
     size -- overflowed its container by 47px between 960 and 1024px viewports.
     A chip on two lines is better than a scrollbar on the whole page. */
  max-width:100%}
.state.ok{color:var(--wh-dd);border-color:var(--wh-d);background:var(--wh-t)}

/* ---------- the honest empty state -------------------------------- */
/* A page with nothing on it yet says so, says what will fill it, and says
   who decides. Dashed, not solid: it is a space, not a thing. */
.empty{display:grid;grid-template-columns:auto minmax(0,1fr);gap:4px 16px;
  background:var(--grey-1);border:1.5px dashed #939391;border-radius:var(--r-md);
  padding:24px 26px;margin:20px 0 0}
.empty .ico{grid-row:span 3;color:var(--hc-mute);padding-top:3px}
.empty h2{margin:0;font-size:20px;font-weight:700;color:var(--hc-ink);line-height:1.3;text-align:left}
.empty p{margin:8px 0 0;font-size:16px;line-height:1.66;color:var(--hc-ink);max-width:none}
.empty ul{margin:10px 0 0;padding-left:20px;font-size:15.5px;line-height:1.62;color:var(--hc-ink);
  max-width:none}
.empty ul li{margin:0 0 4px}
@media (max-width:560px){ .empty{grid-template-columns:1fr} .empty .ico{grid-row:auto} }

/* ---------- helplines --------------------------------------------- */
/* One lead line and two supporting ones, not three equal cards: the lead
   is the Government's own national line. */
.hl{display:grid;gap:18px;grid-template-columns:minmax(0,1.3fr) minmax(0,1fr) minmax(0,1fr);
  margin:18px 0 0}
/* minmax(0,1fr), not 1fr -- see .acts below for the full note. Here the
   column could not shrink below the widest helpline number, which pushed
   Flood Response and the Referral Directory 15px sideways at a 320px
   viewport (measured 20 Sep 2026: scrollWidth 335). */
@media (max-width:980px){ .hl{grid-template-columns:minmax(0,1fr) minmax(0,1fr)} .hl .hlc.lead{grid-column:1/-1} }
@media (max-width:620px){ .hl{grid-template-columns:minmax(0,1fr)} }
.hlc{border:1px solid var(--grey-3);border-radius:var(--r-md);background:#fff;padding:22px 24px;
  display:flex;flex-direction:column;gap:2px;min-width:0}
.hlc.lead{background:var(--wh-dd);border-color:var(--wh-dd)}
.hlc .kind{font-size:12px;letter-spacing:.8px;text-transform:uppercase;font-weight:700;
  color:var(--hc-mute)}
.hlc.lead .kind{color:#fff}
/* The number cannot wrap -- a helpline split across two lines is unreadable --
   so it scales down instead. "1660 010 2005" at a flat 42px is about 273px
   wide, more than the 208px a card has inside a 320px viewport, which is what
   actually held the grid open. 9.5vw keeps it inside the card and returns to
   42px at the 442px width where it fits. */
.hlc .num{font-size:clamp(28px,9.5vw,42px);font-weight:800;letter-spacing:-.5px;line-height:1.08;
  color:var(--wh-d);text-decoration:none;margin:4px 0 2px;
  font-variant-numeric:tabular-nums;white-space:nowrap}
.hlc .num:hover{text-decoration:underline}
.hlc.lead .num{color:#fff;font-size:clamp(34px,12vw,54px)}
.hlc .name{font-size:17.5px;font-weight:700;color:var(--hc-ink);line-height:1.3}
.hlc .np{font-size:15px;color:var(--hc-ink);line-height:1.4}
.hlc.lead .name,.hlc.lead .np{color:#fff}
.hlc .meta{margin:8px 0 0;font-size:15px;line-height:1.55;color:var(--hc-ink)}
.hlc.lead .meta{color:#fff}
.hlc .from{margin:auto 0 0;padding-top:12px;font-size:12.5px;line-height:1.5;color:var(--hc-mute)}
.hlc.lead .from{color:#fff}
.hlc .from a{color:var(--wh-tx)}
.hlc.lead .from a{color:#fff}
.hlnote{font-size:14px;color:var(--hc-mute);margin:10px 0 0;line-height:1.55;max-width:none}
/* under the card row, not glued to it: .sec2 p (0,1,1) set the top margin to 0 */
.sec2 .hlnote{margin:14px 0 0}

/* ---------- the event, as its sources state it -------------------- */
.facts{display:grid;gap:16px;grid-template-columns:minmax(0,1.25fr) minmax(0,1fr) minmax(0,1fr);
  margin:14px 0 0}
@media (max-width:980px){ .facts{grid-template-columns:1fr 1fr} .facts .f.lead{grid-column:1/-1} }
@media (max-width:620px){ .facts{grid-template-columns:1fr} }
.facts .f{background:#fff;border:1px solid var(--grey-3);border-top:3px solid var(--wh-d);
  border-radius:0 0 var(--r-md) var(--r-md);padding:16px 18px 17px;min-width:0}
.facts .f.lead{border-top-color:var(--hc-ink);background:var(--grey-1)}
.facts .f .k{display:block;font-size:12px;letter-spacing:.8px;text-transform:uppercase;
  color:var(--hc-mute);font-weight:700}
.facts .f .v{display:block;font-size:22px;font-weight:700;color:var(--hc-ink);line-height:1.3;
  margin-top:4px}
.facts .f.lead .v{font-size:30px;color:var(--wh-dd)}
.facts .f p{margin:8px 0 0;font-size:15px;line-height:1.58;color:var(--hc-ink)}
.facts .f .from{font-size:12.5px;color:var(--hc-mute);margin-top:7px}
.facts .f .from a{color:var(--wh-tx)}

/* ---------- official sources, linked out -------------------------- */
.srclist{list-style:none;margin:10px 0 0;padding:0;border-top:1px solid var(--grey-3)}
.srclist li{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:2px 16px;padding:13px 2px;
  border-bottom:1px solid var(--grey-3);align-items:baseline}
.srclist .t{font-size:16.5px;font-weight:700;line-height:1.4}
.srclist .t a{color:var(--wh-tx)}
.srclist .by{grid-column:1;font-size:14px;color:var(--hc-mute);line-height:1.5}
.srclist .lang{grid-column:2;grid-row:1;font-size:12px;font-weight:700;letter-spacing:.4px;
  color:var(--hc-mute);white-space:nowrap}
@media (max-width:560px){ .srclist li{grid-template-columns:1fr} .srclist .lang{grid-column:1;grid-row:auto} }

/* ---------- resource groups --------------------------------------- */
.resgroup{margin:22px 0 0}
.resgroup > h3{display:flex;align-items:baseline;gap:10px;margin:0 0 4px;font-size:19px;
  color:var(--hc-ink)}
.resgroup > p{font-size:15px;color:var(--hc-mute);margin:0 0 6px;max-width:none;line-height:1.6}
/* The authored list is the page. assets/media-gallery.js copies it into the
   thumbnail grid below and hides these, so everything here is complete and
   correct with no script running, and the grid is the enhancement. */
.mg-src[hidden]{display:none!important}

/* ---------- the media gallery ------------------------------------- */
.mg{margin:26px 0 0}
.mg-head{margin:0 0 4px;font-size:19px;color:var(--hc-ink)}
.mg-tools{display:grid;gap:8px 10px;align-items:end;margin:14px 0 0;
  grid-template-columns:minmax(0,1fr) minmax(140px,.3fr) minmax(140px,.3fr)}
@media (max-width:700px){
  .mg-tools{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
  .mg-tools .field:first-child{grid-column:1/-1}
}
.mg-count{margin:12px 0 0;font-size:14.5px;color:var(--hc-mute);line-height:1.5}
.mgrid{display:grid;gap:14px;margin:12px 0 0;padding:0;list-style:none;
  grid-template-columns:repeat(4,minmax(0,1fr))}
@media (max-width:1100px){ .mgrid{grid-template-columns:repeat(3,minmax(0,1fr))} }
@media (max-width:700px){ .mgrid{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px} }
.mgrid > li{display:flex;min-width:0}
.mgcard{border:1px solid var(--grey-3);border-radius:var(--r-md);background:#fff;
  display:flex;flex-direction:column;min-width:0;width:100%}

/* The cover stands for the document without pretending to be a screenshot of
   it: a sheet in the page's own palette carrying a short form of the real
   title and a rule, the way a report cover carries a title block. No invented
   page image, so nothing here can be mistaken for the publication itself.
   The sheet is capped to the height it has, because a sheet taller than its
   area simply loses its last lines and reads as a blank box.
   The 26px top padding is the strip the format badge sits in -- without it
   the badge lands on the sheet's own title, most visibly for the longer
   "Journal article" badge. */
.mg-thumb{aspect-ratio:4/3;background:var(--grey-1);border-bottom:1px solid var(--grey-3);
  display:flex;align-items:center;justify-content:center;position:relative;
  padding:30px 14px 14px;overflow:hidden}
.mg-format{position:absolute;left:10px;top:9px;z-index:2;background:var(--hc-ink);color:#fff;
  font-size:10px;font-weight:800;letter-spacing:.5px;text-transform:uppercase;
  padding:2px 6px;border-radius:2px;line-height:1.5}
.mg-sheet{width:54%;height:auto;max-height:100%;aspect-ratio:.72;background:#fff;
  border:1px solid #939391;padding:11px 9px;display:flex;flex-direction:column;
  justify-content:space-between;gap:8px;box-shadow:5px 5px 0 var(--wh-t);
  color:var(--hc-ink);overflow:hidden}
.mg-sheet .t{font-size:11px;line-height:1.2;font-weight:700;display:-webkit-box;
  -webkit-line-clamp:4;-webkit-box-orient:vertical;overflow:hidden;
  /* a cover must not break a word in half ("do / ing"): it wraps at spaces
     and the script keeps the title short enough to fit. It is also set left,
     not justified -- a 100px measure has no room for even edges. */
  text-align:left;hyphens:none;-webkit-hyphens:none;word-break:normal;
  overflow-wrap:normal}
.mg-sheet .r{height:3px;background:currentColor;opacity:.28;flex:0 0 auto}
/* A real document cover. object-fit:cover on a 4:3 frame would crop the
   title off a portrait cover, so the whole page is shown and the frame's
   own colour stands in for the margins. */
.mg-cover{width:100%;height:100%;object-fit:contain;display:block}
.mg-sheet.ne{background:var(--wh-dd);border-color:var(--wh-dd);color:#fff;
  box-shadow:5px 5px 0 var(--wh-b)}
@media (max-width:700px){ .mg-sheet{padding:8px 7px;gap:6px}
  .mg-sheet .t{font-size:10px;-webkit-line-clamp:3} }

.mg-body{padding:13px 13px 12px;display:flex;flex-direction:column;flex:1;min-width:0}
.mg-body h3{font-size:14.5px;line-height:1.3;font-weight:700;color:var(--hc-ink);margin:0}
.mg-by{font-size:12px;color:var(--hc-mute);margin:6px 0 0;line-height:1.35}
.mg-meta{display:flex;flex-wrap:wrap;gap:3px 9px;margin:7px 0 0;font-size:11px;
  text-transform:uppercase;letter-spacing:.4px;font-weight:700;color:var(--hc-mute)}
.mg-actions{display:flex;flex-wrap:wrap;gap:5px 12px;margin-top:auto;padding-top:10px}
.mg-actions a{font-size:12.5px;font-weight:700;color:var(--wh-tx)}
@media (max-width:700px){ .mg-body{padding:10px}.mg-body h3{font-size:13.5px} }
.mg-empty{border:1.5px dashed #939391;border-radius:var(--r-md);padding:16px 18px;
  background:var(--grey-1);color:var(--hc-ink);margin:12px 0 0;font-size:15px;line-height:1.6}

/* ---------- contributing organisations (contact) ------------------ */
/* Two kinds of slot, visibly different on purpose. A slot with a logo shows
   the emblem the organisation supplied; a slot waiting for one says so in
   words. Neither is an empty box: a blank logo frame reads as a broken
   image, and a broken image on a page like this reads as carelessness. */
.cb-h{margin:0 0 6px;font-size:22px;color:var(--hc-ink)}
.cb-p{font-size:16px;line-height:1.65;color:var(--hc-ink);margin:0 0 18px;max-width:none}
.cb-grid{display:grid;gap:16px;grid-template-columns:repeat(auto-fit,minmax(min(300px,100%),1fr));
  margin:0}
.cb-slot{border:1px solid var(--grey-3);border-radius:var(--r-md);background:#fff;
  padding:20px 22px;display:flex;flex-direction:column;gap:6px;min-width:0}
.cb-slot.pending{border-style:solid;border-left:4px solid var(--wh-d);background:var(--grey-1)}
.cb-slot.open{border-style:dashed;background:transparent}
.cb-role{font-size:12px;letter-spacing:.7px;text-transform:uppercase;font-weight:700;
  color:var(--hc-mute)}
.cb-emblem{display:flex;align-items:center;min-height:64px;margin:4px 0 2px}
.cb-emblem img{display:block;height:64px;width:auto;max-width:100%}
.cb-name{display:block;font-size:17px;font-weight:700;color:var(--hc-ink);line-height:1.35}
.cb-slot.pending .cb-name{font-size:16.5px}
.cb-name.none{color:var(--hc-mute);font-weight:700;font-size:15.5px}
.cb-wait{display:block;font-size:13px;line-height:1.5;color:var(--hc-mute)}
@media (max-width:620px){ .cb-slot{padding:16px 17px}.cb-emblem{min-height:52px}.cb-emblem img{height:52px} }

/* On a phone the thumbnail sits BESIDE the text instead of above it. A
   two-column grid leaves each card about 158px, and a 4:3 cover above a title
   in that space is neither legible nor compact: the cover text becomes
   unreadable and the title is forced into three cramped lines. Turned on its
   side, the same card gives the cover a readable strip and the title the rest
   of the row -- which is how a phone media list is normally read. Placed last
   in the block on purpose: these selectors have the same specificity as the
   base rules above, so at equal weight the later rule has to be the override.
   Measured 20 Sep 2026 -- at 390px the stacked card failed on both counts. */
@media (max-width:700px){
  .mgrid > li{grid-column:1/-1}
  .mgcard{flex-direction:row;align-items:stretch}
  .mg-thumb{flex:0 0 104px;width:104px;aspect-ratio:auto;border-bottom:0;
    border-right:1px solid var(--grey-3);padding:22px 0 0;align-items:flex-start;
    justify-content:center}
  .mg-sheet{width:60px;padding:6px 5px;gap:4px;box-shadow:3px 3px 0 var(--wh-t)}
  .mg-sheet .t{font-size:7.5px;line-height:1.18;-webkit-line-clamp:4}
  .mg-format{left:auto;right:4px;top:4px;font-size:8px;letter-spacing:.2px;padding:1px 3px}
  .mg-sheet.ne{box-shadow:3px 3px 0 var(--wh-b)}
  .mg-body{padding:11px 12px}
  .mg-body h3{font-size:15px;line-height:1.28}
  .mg-actions{padding-top:8px}
}

/* ---------- the live panel (public_stats) ------------------------- */
.live3{border:1px solid var(--grey-3);border-radius:var(--r-md);background:#fff;padding:20px 22px;
  margin:14px 0 0}
.live3 .lstrip{display:flex;flex-wrap:wrap;align-items:center;gap:6px 14px;font-size:14px;
  color:var(--hc-mute);padding-bottom:10px;border-bottom:1px solid var(--grey-2)}
.live3 .dot{width:8px;height:8px;border-radius:50%;background:#939391;flex:0 0 auto}
.live3.on .dot{background:var(--wh-d)}
.live3 .lstrip b{color:var(--hc-ink)}
.live3 .lbody{padding-top:12px}
.live3 .lbody > p{margin:0 0 8px;font-size:16px;line-height:1.66;color:var(--hc-ink);max-width:none}
.kpis{display:grid;gap:14px;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));margin:6px 0 16px}
.kpi{border-left:4px solid var(--wh-d);padding:14px 16px;background:var(--grey-1);
  border-radius:0 var(--r) var(--r) 0}
.kpi .n{display:block;font-size:38px;font-weight:800;color:var(--hc-ink);letter-spacing:-.8px;
  line-height:1.05;font-variant-numeric:tabular-nums}
.kpi .l{display:block;font-size:14px;color:var(--hc-mute);line-height:1.4;margin-top:4px}
.kpi.lead{border-left-color:var(--hc-ink)}
.kpi.lead .n{color:var(--wh-dd)}
/* bars with the value OUTSIDE the mark, in ink: a label inside a narrow bar
   is unreadable at any contrast (chart rules, rule 10) */
.hbars{list-style:none;margin:8px 0 0;padding:0}
.hbars li{display:grid;grid-template-columns:minmax(140px,240px) minmax(0,1fr);gap:4px 14px;
  align-items:center;padding:5px 0}
.hbars .hl3{font-size:15px;color:var(--hc-ink);line-height:1.35}
.hbars .track{display:flex;align-items:center;gap:8px;min-width:0}
.hbars .bar3{height:16px;background:var(--wh-d);border-radius:2px;min-width:2px}
.hbars .val{font-size:14px;font-weight:700;color:var(--hc-ink);font-variant-numeric:tabular-nums;
  white-space:nowrap}
@media (max-width:560px){ .hbars li{grid-template-columns:1fr} }

/* ---------- the map ----------------------------------------------- */
.mapgrid{display:grid;gap:18px;grid-template-columns:minmax(0,1.55fr) minmax(0,1fr);align-items:start}
@media (max-width:900px){ .mapgrid{grid-template-columns:1fr} }
/* the generated drawing only: Leaflet sizes its own SVG layers */
.mapwrap svg{display:block;width:100%;height:auto}
/* palika fills. Declared vs not is carried by a 6:1 fill difference, not a
   tint -- graphical objects need 3:1 against their neighbours too. */
.map .pal{fill:#fff;stroke:#939391;stroke-width:.7;vector-effect:non-scaling-stroke}
.map .pal.decl{fill:var(--wh-d);stroke:#fff}
.map .pal.ctx{fill:var(--grey-1)}
.map .pal.on{fill:var(--hc-ink)}
.map .pal.decl.on{fill:var(--hc-ink)}
.map .dist{fill:none;stroke:var(--hc-ink);stroke-width:1.6;vector-effect:non-scaling-stroke;
  pointer-events:none}
.map .dist.ctx{stroke:#939391;stroke-dasharray:4 3}
.map .srv{pointer-events:none}
.mapkey{display:flex;flex-wrap:wrap;gap:6px 18px;margin:12px 0 0;font-size:14px;color:var(--hc-ink)}
.mapkey span{display:inline-flex;align-items:center;gap:6px}
.mapkey i{display:inline-block;width:14px;height:14px;border:1px solid #939391;background:#fff}
.mapkey i.decl{background:var(--wh-d);border-color:var(--wh-d)}
.mapkey i.ctx{background:var(--grey-1)}
.mapkey i.dist{border:2px solid var(--hc-ink);background:transparent}
.mapkey i.dctx{border:2px dashed #939391;background:transparent}
.palist{margin:0;padding:0;list-style:none;font-size:15px}
.palist .dh{display:block;margin:12px 0 4px;font-size:12px;letter-spacing:.8px;text-transform:uppercase;
  color:var(--hc-mute);font-weight:700}
.palist .dh:first-child{margin-top:0}
.palist li{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:0 10px;padding:5px 6px;
  border-bottom:1px solid var(--grey-2);cursor:default;align-items:baseline}
.palist li.on{background:var(--wh-t)}
.palist .en{font-weight:600;color:var(--hc-ink)}
.palist .np{color:var(--hc-mute);font-size:14px}
.palist .ty{grid-column:2;grid-row:1;font-size:12px;color:var(--hc-mute);white-space:nowrap}

/* ---------- contact roles ----------------------------------------- */
.roles{display:grid;gap:18px;grid-template-columns:minmax(0,1.2fr) minmax(0,1fr) minmax(0,1fr);margin:18px 0 0}
@media (max-width:900px){ .roles{grid-template-columns:1fr} }
.role{border:1px solid var(--grey-3);border-radius:var(--r-md);padding:22px 24px;background:#fff}
.role.lead{border-top:4px solid var(--wh-d)}
.role h3{margin:0;font-size:12.5px;letter-spacing:.8px;text-transform:uppercase;color:var(--hc-mute);
  font-weight:700}
.role .who{display:block;margin:10px 0 4px;font-size:21px;font-weight:700;color:var(--hc-ink)}
.role .org{display:block;font-size:15.5px;color:var(--hc-ink);line-height:1.45}
.role .orgnp{display:block;font-size:14.5px;color:var(--hc-mute);line-height:1.45}
.role p{margin:10px 0 0;font-size:15px;line-height:1.58;color:var(--hc-ink)}

/* ---------- moved from the home page with its figures ------------- */
.split{display:grid;gap:32px;grid-template-columns:minmax(0,1.32fr) minmax(0,1fr);align-items:start}
@media (max-width:860px){ .split{grid-template-columns:1fr;gap:20px} }
.flowfig{background:#fff;border:1px solid var(--grey-3);border-radius:var(--r-md);padding:20px;margin-top:8px}
.flowfig svg{width:100%;height:auto;display:block;max-width:820px;margin:0 auto}
/* min(320px,100%), not a bare 320px: at a 320px viewport the content frame is
   256px, so a 320px track minimum overflows it and the page scrolls sideways
   (measured 20 Sep 2026: home scrollWidth 352 against a 320 viewport). Below
   the breakpoint the track now takes the container's width; above it, nothing
   changes. */
.twocol{display:grid;gap:28px;grid-template-columns:repeat(auto-fit,minmax(min(320px,100%),1fr))}
ul.tight{margin:8px 0 0;padding-left:20px;font-size:16px;line-height:1.66;color:var(--hc-ink)}
ul.tight li{margin-bottom:4px}
.defquote{border-left:4px solid var(--wh-d);background:var(--wh-t);padding:20px 24px;
  border-radius:0 var(--r-md) var(--r-md) 0;margin-top:18px}
.defquote p{margin:0;font-size:18px;line-height:1.66;color:var(--wh-dd);max-width:none}
.defquote cite{display:block;margin-top:9px;font-style:normal;font-size:13.5px;color:var(--wh-dd)}

/* ---------- home: activities, three blocks ------------------------ */
.acts{display:grid;gap:18px;grid-template-columns:minmax(0,1.2fr) minmax(0,1fr) minmax(0,1fr);margin:14px 0 0}
/* minmax(0,1fr), not 1fr: a bare 1fr is minmax(auto,1fr), so the column
   refuses to shrink below the widest thing inside it and the page gains a
   horizontal scrollbar on a phone. Measured 20 Sep 2026: the single column
   resolved to 353.5px inside a 256px container at a 320px viewport, and the
   home page scrolled 66px sideways from 320 to 375. The base rule above
   already used minmax(0,...); this override had lost it. */
@media (max-width:900px){ .acts{grid-template-columns:minmax(0,1fr)} }
.act{border:1px solid var(--grey-3);border-radius:var(--r-md);padding:22px 24px;background:#fff;position:relative}
.act.tint{background:var(--wh-t);border-color:var(--wh-b)}
.act .ico{position:absolute;top:15px;right:16px;color:var(--wh-d)}
.act h3{margin:0 0 8px;padding-right:34px;font-size:18.5px;font-weight:700;color:var(--hc-ink)}
.act p{margin:0 0 12px;font-size:15.5px;line-height:1.62;color:var(--hc-ink)}

/* ---------- a line of links that is navigation, not prose --------- */
.golinks{display:flex;flex-wrap:wrap;gap:10px 24px;margin:14px 0 0;font-size:15.5px;font-weight:700}
.golinks a{color:var(--wh-tx)}

/* The footer columns are links separated by <br>. They are NOT exempted from
   justification: a line ending in a forced break is set like a last line, so
   it already sits flush left, and an exemption here is exactly the kind the
   justification sweep exists to refuse (handover, mistake 6). */

/* ---------- map: labels and published presence -------------------- */
/* District names are HTML laid over the drawing, not <text> inside it: an
   SVG scales its own text down with the box, and on a phone that is 5px. */
.mapwrap{position:relative}
.dlab{position:absolute;transform:translate(-50%,-50%);font-size:12px;font-weight:700;
  color:var(--hc-ink);white-space:nowrap;pointer-events:none;
  background:rgba(255,255,255,.86);padding:0 4px;border-radius:2px;line-height:1.35}
.dlab.ctx{color:var(--hc-mute);font-weight:600}
@media (max-width:520px){ .dlab{font-size:10.5px;padding:0 3px} }
/* a palika the published directory lists: a thick ink outline, readable on
   the declared fill and on white alike */
.map .pal.served{stroke:var(--hc-ink);stroke-width:2.6}
.map .pal.decl.served{stroke:#fff;stroke-width:2.6}
.mapkey i.served{border:2.5px solid var(--hc-ink);background:#fff}
.palist .dhrow{display:block;border-bottom:0;padding:0}

/* the declared list on Flood Response, district by district */
.declist{list-style:none;margin:0;padding:0;display:grid;gap:10px 22px;
  grid-template-columns:repeat(auto-fit,minmax(230px,1fr))}
.declist .dg > b{display:block;font-size:11px;letter-spacing:.8px;text-transform:uppercase;
  color:var(--hc-mute);margin:0 0 4px}
.declist .dg ul{list-style:none;margin:0;padding:0}
.declist .dg li{padding:4px 0;border-bottom:1px solid var(--grey-2);font-size:15.5px;color:var(--hc-ink)}
.declist .np{color:var(--hc-mute);font-size:14px}

/* ---------- sub-sections inside a section ------------------------- */
.subsec{margin-top:26px;padding-top:22px;border-top:1px dashed var(--grey-3)}
.subh{font-size:21px!important;font-weight:700;color:var(--wh-tx)!important;margin:0 0 10px!important;
  letter-spacing:-.2px}
.sheet h3.title{font-size:clamp(26px,3vw,38px);font-weight:700;line-height:1.18;color:var(--wh-d);
  letter-spacing:-.5px;margin:12px 0 0;max-width:24ch}

/* a page on these eight is white, as the home page always was */
body{background:#fff}

/* ---------- home: the helplines, numbers only --------------------- */
.hlbox{background:#fff;border:1px solid var(--grey-3);border-radius:var(--r-md);padding:22px 24px}
.hlbox h4{margin:0 0 8px;font-size:12.5px;letter-spacing:.8px;text-transform:uppercase;color:var(--hc-mute);
  font-weight:700}
.hlmini{list-style:none;margin:0;padding:0}
.hlmini li{display:grid;grid-template-columns:auto minmax(0,1fr);gap:2px 16px;align-items:baseline;
  padding:11px 0;border-bottom:1px solid var(--grey-2)}
.hlmini li:last-child{border-bottom:0}
.hlmini .num{font-size:27px;font-weight:800;color:var(--wh-d);text-decoration:none;letter-spacing:-.3px;
  font-variant-numeric:tabular-nums;white-space:nowrap}
.hlmini li.lead .num{font-size:38px;color:var(--wh-dd)}
.hlmini .name{font-size:15.5px;color:var(--hc-ink);line-height:1.35}
/* on a phone the name goes under its number, so a two-word name is not
   spread across a narrow cell */
@media (max-width:560px){ .hlmini li{grid-template-columns:1fr;gap:2px 0} }

/* ---------- fixes found by looking at the rendered pages ---------- */
/* the stamp above the coordination sheet wraps instead of squeezing its pill */
.stamp{flex-wrap:wrap}
.stamp .tagpill{white-space:nowrap}
/* four text cards side by side left each one a column of rivers; two by two
   gives the words room, and varies the grid from the card rows above */
.rowcards.two{grid-template-columns:repeat(2,minmax(0,1fr))}
@media (max-width:700px){ .rowcards.two{grid-template-columns:1fr} }
/* a state is a chip, not a sentence: kept on one line so a narrow column
   does not justify three words across it (the table scrolls on a phone) */
.sec2 .t2 td.pend{white-space:nowrap}
.mapkey em{font-style:normal}
/* the palika list: name, Nepali name and type on one row where there is room */
.palist li{grid-template-columns:auto minmax(0,1fr) auto;gap:0 10px;padding:4px 6px}
.palist .np{grid-column:2;grid-row:1}
.palist .ty{grid-column:3;grid-row:1}
.mapgrid{grid-template-columns:minmax(0,1.9fr) minmax(0,1fr)}
@media (max-width:900px){ .mapgrid{grid-template-columns:1fr} }
@media (max-width:460px){ .palist li{grid-template-columns:1fr auto} .palist .np{grid-column:1/-1;grid-row:2} .palist .ty{grid-column:2;grid-row:1} }

/* numeral columns in the published tables: the header sits over its numbers */
.live3 .t2 th.n{text-align:right}

/* ---------- Find a service (referral-directory.html, section 2) ----------
   Filters, then the generated map with counts drawn over it, then the list.
   Counts sit on a palika -- or on a district when a hospital's address names
   no palika -- never on a point. Every colour is a design.css token; the
   count badge is Neutral Black with a white ring, so it reads on the white
   palikas and on the Pantone 299 C fill of the declared ones alike. */
.finder{display:grid;grid-template-columns:repeat(5,minmax(0,1fr)) auto;gap:10px 12px;
  align-items:end;margin:4px 0 8px}
@media (max-width:1100px){ .finder{grid-template-columns:repeat(3,minmax(0,1fr))} }
@media (max-width:640px){ .finder{grid-template-columns:repeat(2,minmax(0,1fr))} }
.finder .fld{display:flex;flex-direction:column;gap:4px;min-width:0;margin:0}
.finder .fl{font-size:12.5px;font-weight:700;letter-spacing:.4px;text-transform:uppercase;
  color:var(--hc-mute);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.finder select{font:inherit;font-size:15.5px;line-height:1.3;padding:9px 12px;min-height:44px;
  border:1px solid #939391;border-radius:var(--r);background:#fff;color:var(--hc-ink);
  width:100%;min-width:0}
.finder select:focus-visible{outline:3px solid var(--wh-d);outline-offset:1px}
.finder select:disabled{color:var(--hc-mute);background:var(--grey-1)}
.finder .fclear{min-height:40px;white-space:nowrap}
@media (max-width:640px){ .finder .fclear{grid-column:1/-1} }
.fsum{margin:6px 0 16px;font-size:16.5px;font-weight:700;color:var(--hc-ink)}
.findgrid{display:grid;grid-template-columns:minmax(0,1fr);gap:22px;align-items:start}
.findmap{margin:0}
.mapstage{position:relative}
.fbadges{position:absolute;inset:0;pointer-events:none}
.fbadge{position:absolute;transform:translate(-50%,-50%);pointer-events:auto;
  min-width:26px;height:26px;padding:0 7px;border-radius:13px;border:2px solid #fff;
  background:var(--hc-ink);color:#fff;font:700 13px/22px "Mukta",sans-serif;cursor:pointer;
  box-shadow:0 0 0 1px var(--hc-ink)}
/* a district-level count rides inside the district's name (pointer events
   back on for it: the name itself lets clicks through to the map) */
.dlab .dcount{pointer-events:auto;position:absolute;left:calc(100% - 7px);top:-12px;min-width:20px;height:18px;
  padding:0 5px;border:1px solid #fff;border-radius:3px;background:var(--hc-ink);color:#fff;
  font:700 11.5px/16px "Mukta",sans-serif;text-align:center;cursor:pointer}
.dlab .dcount:hover{background:var(--wh-dd)}
.dlab .dcount:focus-visible{outline:3px solid var(--wh-d);outline-offset:1px}
@media (max-width:520px){ .dlab .dcount{min-width:16px;height:15px;top:-10px;left:calc(100% - 5px);font-size:10px;line-height:13px;padding:0 3px} }
.fbadge:hover{background:var(--wh-dd)}
.fbadge:focus-visible{outline:3px solid var(--wh-d);outline-offset:2px}
.map .pal{cursor:pointer}
.map .pal.hit{stroke:var(--hc-ink);stroke-width:2.4}
.map .pal.decl.hit{stroke:#fff}
.map .pal.sel{stroke:var(--hc-ink);stroke-width:3.4}
.map .pal.decl.sel{stroke:#fff}
.map .dist.hit{stroke-width:3}
.map .dist.sel{stroke-width:3.6}
.ftip{position:absolute;z-index:3;transform:translate(-50%,calc(-100% - 14px));pointer-events:none;
  background:var(--hc-ink);color:#fff;padding:6px 10px;border-radius:var(--r);font-size:12.5px;
  line-height:1.4;white-space:nowrap}
.ftip b,.ftip span{display:block}
.ftip .n{color:#dadada}
.mapkey i.fb{width:16px;height:16px;border-radius:8px;background:var(--hc-ink);border:2px solid #fff;
  box-shadow:0 0 0 1px var(--hc-ink)}
.mapkey i.fb.bydist{width:20px;height:15px;border:0;border-radius:3px;box-shadow:none}
.fhint{margin:10px 0 0;font-size:14px;color:var(--hc-mute)}
.fres{min-width:0}
.fgroup{margin:0 0 18px}
.fgroup h3{display:flex;align-items:baseline;justify-content:space-between;gap:12px;margin:0 0 8px;
  padding-bottom:7px;border-bottom:2px solid var(--hc-ink);font-size:17px;line-height:1.3;color:var(--hc-ink)}
.fgroup h3 .n{flex:0 0 auto;font-size:14px;font-weight:800;color:var(--hc-mute);font-variant-numeric:tabular-nums}
.fcards{list-style:none;margin:0;padding:0;display:grid;gap:10px}
.fcard{border:1px solid var(--grey-3);border-radius:var(--r);padding:10px 12px;background:#fff}
.fcard .fc-h b{display:block;font-size:17px;line-height:1.3;color:var(--hc-ink)}
.fcard .fc-h .np{display:block;font-size:14.5px;color:var(--hc-mute)}
.fcard .fc-place{margin:4px 0 8px;font-size:14px;color:var(--hc-mute)}
.fchips{list-style:none;margin:0 0 6px;padding:0;display:flex;flex-wrap:wrap;gap:5px}
.fchips li{font-size:13.5px;line-height:1.35;padding:2px 9px;border-radius:11px;background:var(--wh-t);
  color:var(--wh-dd);border:1px solid var(--wh-b)}
.fcard .fc-meta,.fcard .fc-tel,.fcard .fc-src{margin:6px 0 0;font-size:14.5px;color:var(--hc-ink)}
.fcard .fc-meta .how{color:var(--hc-mute)}
.fcard .fc-tel a{font-weight:700;color:var(--wh-d);font-variant-numeric:tabular-nums}
.fcard .fc-tel .lab{color:var(--hc-mute)}
.fc-says{margin-top:8px;font-size:14px}
.fc-says summary{cursor:pointer;color:var(--wh-d);font-weight:700}
.fc-says .fc-page{display:block;margin:8px 0 0;font-weight:600}
.fc-says ul{margin:3px 0 0;padding-left:18px}
.fc-says li{margin:3px 0}
.fc-says .ctx{color:var(--hc-mute)}
.fc-read{margin:6px 0 0;font-size:13.5px;color:var(--hc-mute)}
.fempty{margin:0;font-size:15px;color:var(--hc-mute)}
.fnot{margin:8px 0 0;font-size:14.5px;color:var(--hc-mute)}
/* section 3: the declared list stands alone now, in two columns where there is room */
#map .palist{column-gap:36px}
@media (min-width:900px){ #map .palist{column-count:2} #map .palist li{break-inside:avoid} }
@media (max-width:520px){ .fbadge{min-width:20px;height:20px;padding:0 5px;border-radius:10px;font-size:11px;line-height:16px} }
/* a chosen district fills the map; the district names laid over the whole
   map would sit in the wrong places, so they step aside while it is zoomed */
.mapstage.zoomed .dlab{display:none}
.fzoom{position:absolute;left:8px;top:8px;z-index:2;display:flex;flex-wrap:wrap;align-items:center;gap:4px 10px;
  max-width:calc(100% - 16px);padding:5px 8px;border:1px solid var(--grey-3);border-radius:var(--r);
  background:rgba(255,255,255,.95);font-size:13px;line-height:1.35;color:var(--hc-ink)}
.fzoom b{font-weight:800}
.fzoom .fback{font:inherit;font-size:12.5px;font-weight:700;padding:3px 9px;border:1px solid var(--wh-d);
  border-radius:var(--r);background:#fff;color:var(--wh-d);cursor:pointer}
.fzoom .fback:hover{background:var(--wh-t)}
.fzoom .fback:focus-visible{outline:3px solid var(--wh-d);outline-offset:1px}
.fzoom .fdl{color:var(--hc-mute);font-size:12.5px}
/* a partner listing published in the hub's demonstration mode is marked as such */
.fgroup h3 .fdemo{flex:0 0 auto;margin-left:auto;margin-right:8px;padding:1px 7px;border-radius:3px;
  background:var(--hc-ink);color:#fff;font-size:11px;font-weight:800;letter-spacing:.4px;text-transform:uppercase}
/* on the Nepali page the helpline's name is already in Nepali, so the printed
   Nepali line under it would say the same thing twice */
html[lang="ne"] .hlc .np{display:none}

/* ---------- the interactive map (assets/referral-map.js, Leaflet) ----------
   Full width above the list. A hospital is a pin at its own location; a
   partner organisation is a count on a palika, never a point. The generated
   drawing stays underneath for a browser that runs no scripts. */
.fmaphead{display:flex;align-items:center;justify-content:space-between;gap:12px;margin:0 0 8px}
.fmaphead h4{margin:0}
.fbig{min-height:34px;white-space:nowrap}
.lmap{height:clamp(440px,64vh,660px);border:1px solid var(--grey-3);border-radius:var(--r-md);
  background:#eef0f0;z-index:0;overflow:hidden}
.findmap.big .lmap{height:calc(100vh - 150px);min-height:480px}
@media (max-width:640px){ .lmap{height:440px} .findmap.big .lmap{height:calc(100vh - 120px)} }
.map:not(.live) .lmap{display:none}
/* design.css sizes every figure's svg to its box; Leaflet's layers size themselves */
.fig .lmap svg{width:auto;height:auto}
.map.live .mapwrap{display:none}
/* min(300px,100%): the same bare-minimum bug as .twocol and .acts. At a 320px
   viewport a 300px track minimum is wider than the 256px frame, so every
   service card ran past the edge (measured 20 Sep 2026: scrollWidth 332). */
.fres .fcards{grid-template-columns:repeat(auto-fill,minmax(min(300px,100%),1fr))}
.leaflet-container{font-family:"Mukta","Noto Sans Devanagari","Noto Sans",system-ui,sans-serif;font-size:13px}
.leaflet-container a{color:var(--wh-d)}
.leaflet-control-attribution{background:#fff !important;color:var(--hc-ink) !important;font-size:11px;line-height:1.5}
.leaflet-control-attribution a{color:var(--wh-d) !important}
.leaflet-bar a{color:var(--hc-ink)}
.lm-dlab{pointer-events:none}
.lm-dlab span{position:absolute;left:0;top:0;transform:translate(-50%,-50%);white-space:nowrap;
  font:800 12px/1.2 "Mukta",sans-serif;letter-spacing:.6px;text-transform:uppercase;color:var(--hc-ink);
  text-shadow:0 0 3px #fff,0 0 3px #fff,0 0 5px #fff,0 0 7px #fff}
.lm-dlab.ctx span{color:var(--hc-mute)}
.lm-count{display:flex;align-items:center;justify-content:center;background:none;border:0}
.lm-count span{display:inline-flex;align-items:center;justify-content:center;min-width:26px;height:26px;
  padding:0 7px;border-radius:13px;border:2px solid #fff;background:var(--hc-ink);color:#fff;
  font:700 13px/1 "Mukta",sans-serif;box-shadow:0 0 0 1px var(--hc-ink);cursor:pointer}
.lm-count.bydist span{border-radius:4px;min-width:22px;height:20px;font-size:12px}
.lm-count:focus-visible span,.lm-pin:focus-visible svg{outline:3px solid var(--wh);outline-offset:2px}
.lm-count:hover span{background:var(--wh-dd)}
.lm-pin{background:none;border:0}
.lm-pin svg{display:block;filter:drop-shadow(0 1px 2px rgba(0,0,0,.35));transition:transform .12s}
.lm-pin:hover svg{transform:scale(1.12);transform-origin:50% 100%}
.lm-tip{background:var(--hc-ink);color:#fff;border:0;border-radius:var(--r);padding:6px 10px;
  font:13px/1.4 "Mukta",sans-serif;box-shadow:none}
.lm-tip b,.lm-tip span{display:block}
.lm-tip .n{color:#dadada}
.lm-tip.leaflet-tooltip-top:before{border-top-color:var(--hc-ink)}
.lm-popwrap .leaflet-popup-content{margin:10px 12px;font:13.5px/1.45 "Mukta",sans-serif;color:var(--hc-ink)}
.lm-pop b{display:block;font-size:15px;line-height:1.3}
.lm-pop .np{display:block;color:var(--hc-mute)}
.lm-pop p{margin:4px 0 8px;color:var(--hc-mute);font-size:13px}
.lm-inlist,.fc-map{font:inherit;font-size:13px;font-weight:700;padding:4px 10px;border:1px solid var(--wh-d);
  border-radius:var(--r);background:#fff;color:var(--wh-d);cursor:pointer}
.lm-inlist:hover,.fc-map:hover{background:var(--wh-t)}
.lm-inlist:focus-visible,.fc-map:focus-visible{outline:3px solid var(--wh-d);outline-offset:1px}
.fc-map{margin-top:7px}
.fcard.flash{box-shadow:0 0 0 3px var(--wh)}
.mapkey i.pin{width:12px;height:16px;border:0;border-radius:6px 6px 6px 0;transform:rotate(-45deg);background:var(--wh-dd)}
@media (max-width:640px){ .lm-pin svg{transform:scale(.8);transform-origin:50% 100%} }
/* the providers tier: a person's qualification and organisation under the name */
.fcard .fc-qual{margin:3px 0 0;font-size:15px;font-weight:600;color:var(--hc-ink)}
.fcard .fc-org{margin:3px 0 0;font-size:14.5px;color:var(--hc-ink)}
.fcard .fc-org .lab{color:var(--hc-mute)}

/* ---------- Staff deployed (referral-directory.html, section 5) ----------
   Counts only, from assets/workforce.js. The map is the same drawing as Find a
   service, shaded by how many staff name a palika; a hidden number is "<3" or
   "3+", written in the muted ink so it never reads as a count. */
.wfgrid{display:grid;grid-template-columns:minmax(0,1.9fr) minmax(0,1fr);gap:16px 24px;align-items:start;margin:6px 0 4px}
@media (max-width:900px){ .wfgrid{grid-template-columns:1fr} }
.wf h4{margin:0 0 10px;font-size:16px;font-weight:700;color:var(--hc-ink)}
.wf .wfh{margin:20px 0 4px}
.lmap.wfmap{height:clamp(380px,56vh,580px)}
.mapkey i.sh{border-color:rgba(0,105,150,.45)}
.mapkey i.sh1{background:rgba(0,105,150,.16)}
.mapkey i.sh2{background:rgba(0,105,150,.32)}
.mapkey i.sh3{background:rgba(0,105,150,.52)}
.mapkey i.sh4{background:rgba(0,105,150,.74)}
.mapkey i.cnt{width:16px;height:16px;border-radius:50%;background:var(--hc-ink);border:2px solid #fff;box-shadow:0 0 0 1px var(--hc-ink)}
.mapkey i.cnt.d{border-radius:4px}
.wfbars li{grid-template-columns:minmax(120px,170px) minmax(0,1fr)}
.wft th.n{text-align:right}
.wft td.n.s{color:var(--hc-mute);font-weight:600}
.wft td.n.z{color:var(--hc-mute);font-weight:400}
.wft tfoot td{border-top:2px solid var(--hc-ink);font-weight:700}
.wft tr.on td{background:#e3eff5}
.wflegend{font-size:14px;line-height:1.6;color:var(--hc-mute);margin:8px 0 0}
.wfd{border:1px solid var(--grey-3);border-radius:var(--r-md);margin:10px 0 0;background:#fff}
.wfd > summary{cursor:pointer;padding:13px 16px;font-weight:700;font-size:16px;color:var(--wh-tx)}
.wfd[open] > summary{border-bottom:1px solid var(--grey-3)}
.wfd .in{padding:8px 14px 14px}
.wforgs{font-size:15px;line-height:1.7;margin:10px 0 0}
/* organisation names wrap instead of running off the page; nowrap held a
   425px name inside a 256px column at a 320px viewport */
.wforg{white-space:normal;overflow-wrap:break-word}

/* ---------- home: the front door ---------------------------------- */
/* The hero is a solid band of the deep blue across the whole window --
   painted by a spread shadow, as the page head is, so the frame keeps its
   width -- with the group's name in white and the helplines as a white card
   beside it. One colour, hard edges, no picture: the site's own front door,
   not a stock photograph. Added 17 September 2026. */
.sheet.hero{background:var(--wh-dd);border:0;border-radius:0;color:#fff;
  padding:46px 0 50px;margin:0 0 10px;
  box-shadow:0 0 0 100vmax var(--wh-dd);clip-path:inset(0 -100vmax)}
.sheet.hero .stamp{color:var(--wh-b);font-size:13px;letter-spacing:1.4px;text-transform:uppercase;
  font-weight:700}
/* The title is SET IN THREE LINES, not wrapped by the browser: "MHPSS" /
   "Technical Working Group" / "Nepal", as the project owner asked on
   20 September 2026, carried as <br> in home.p023 so both languages break
   the same way (the Nepali third line is नेपाल).

   The size is driven by the MIDDLE line, which is the longest: "Technical
   Working Group" must fit the column on one line, or the forced break stops
   meaning three lines. Measured in this face at this letter-spacing it needs
   10.4x the font size in width, and the hero column is about half the
   viewport once the side column and the gutters are out -- so the size has
   to track vw, and the cap has to be small enough for the narrowest
   two-column viewport. 4.6vw sits just under the 4.8vw the measurement
   allows, for rounding. Checked at 320 through 1920: three lines, both
   languages, at every width. */
.sheet.hero h1.title{color:#fff;max-width:none;
  font-size:clamp(34px,5vw,64px);
  letter-spacing:-.9px;line-height:1.1;margin-top:10px}
.sheet.hero h1.title br{line-height:1.1}
.sheet.hero .subtitle{color:#e8f3f9;font-size:19px;line-height:1.62;margin-top:18px}
/* the links under the title, in white -- scoped to the title column, so the
   link inside the white helpline card keeps the page's blue */
.sheet.hero .split > div:first-child .golinks{margin-top:22px;gap:10px 26px;font-size:16px}
.sheet.hero .split > div:first-child .golinks a{color:#fff;text-decoration:underline;
  text-underline-offset:4px;text-decoration-thickness:1.5px}
.sheet.hero .split > div:first-child .golinks a:hover{color:var(--wh-b)}
/* one column since 7 October 2026: the helplines live on the Referral Directory,
   and the name reads on one line across the full width */
.sheet.hero .split{gap:40px;align-items:center;grid-template-columns:1fr}
.sheet.hero .hlbox{border-color:#fff;box-shadow:0 2px 8px rgba(0,0,0,.18)}
@media (max-width:860px){ .sheet.hero{padding:32px 0 36px} .sheet.hero .subtitle{font-size:17px} }
.roles.single{grid-template-columns:minmax(0,1fr)}

/* ---- Flood Response, section 2: the Ministry's MHPSS figures (1 Oct 2026) ---- */
.heoc{border:1px solid var(--grey-3);border-radius:var(--r-md);background:#fff;padding:20px 22px;margin:16px 0 26px}
.heoc .hc-asof{margin:0 0 14px;font-size:14px;color:var(--hc-mute)}
.hc-tiles{display:grid;gap:14px;grid-template-columns:repeat(4,minmax(0,1fr))}
@media (max-width:900px){ .hc-tiles{grid-template-columns:repeat(2,minmax(0,1fr))} }
.hc-k{border-left:4px solid #0B6E9F;background:#f4f9fc;padding:12px 14px}
.hc-k.lead{border-left-color:#0B3C5D}
.hc-k .num{display:block;font-size:30px;font-weight:800;line-height:1.1;color:#0B3C5D;font-variant-numeric:tabular-nums}
.hc-k .lab{display:block;margin-top:4px;font-size:13.5px;line-height:1.4;color:var(--hc-ink);text-align:left}
.hc-charts{display:grid;gap:22px;grid-template-columns:repeat(2,minmax(0,1fr));margin-top:20px}
@media (max-width:900px){ .hc-charts{grid-template-columns:1fr} }
.hc-chart h4{margin:0 0 6px;font-size:14.5px;color:var(--hc-ink)}
.hc-plot{position:relative}
.hc-plot svg{display:block;width:100%;height:auto}
.hc-plot circle[tabindex]{cursor:pointer;outline:none}
.hc-tip{position:absolute;transform:translate(-50%,calc(-100% - 12px));background:#153f4c;color:#fff;
  font-size:12.5px;line-height:1.4;padding:6px 9px;border-radius:4px;pointer-events:none;white-space:nowrap;text-align:left}
.hc-tip[hidden]{display:none!important}
.hc-tbl{margin-top:14px}
.hc-tbl summary{cursor:pointer;font-weight:700;color:var(--wh-d);font-size:14.5px}
.hc-tbl table{margin-top:10px}
.hc-tbl td.n,.hc-tbl th.n{text-align:right;font-variant-numeric:tabular-nums}

/* the IASC pyramid, drawn to the shape approved on 28 September 2026 */
.pyrgrid{grid-template-columns:minmax(0,420px) minmax(0,1fr)}
@media (max-width:760px){ .pyrgrid{grid-template-columns:1fr} }
.pyrgrid > svg{max-width:440px}
.playerlist .sw.l4{background:#0B3C5D;color:#fff}
.playerlist .sw.l3{background:#0B6E9F;color:#fff}
.playerlist .sw.l2{background:#009ADE;color:#0B2540}
.playerlist .sw.l1{background:#BFE3F5;color:#0B2540;border:0;line-height:26px}

/* Only the middle information links scroll; Home and Learning stay visible.
   Do not overlay the dedicated Learning action with the former phone fade. */

/* ---- the GBV & CP referral pathway, on Find a service (1 Oct 2026) ---- */
.pway{margin-top:30px;padding-top:22px;border-top:1px solid var(--grey-3)}
.pwres .pwd{border:1px solid var(--grey-3);border-radius:var(--r-md);margin:0 0 10px;background:#fff}
.pwres .pwd > summary{display:flex;align-items:baseline;justify-content:space-between;gap:12px;
  padding:11px 14px;cursor:pointer;font-size:16.5px;color:var(--hc-ink);list-style:none}
.pwres .pwd > summary::-webkit-details-marker{display:none}
.pwres .pwd > summary::before{content:"▸";color:var(--wh-d);margin-right:8px}
.pwres .pwd[open] > summary::before{content:"▾"}
.pwres .pwd > summary b{flex:1 1 auto}
.pwres .pwd > summary .n{font-weight:800;color:var(--hc-mute);font-variant-numeric:tabular-nums}
.pwres .fcards{padding:0 12px 12px;grid-template-columns:repeat(auto-fill,minmax(min(300px,100%),1fr))}
.pwtags{display:flex;flex-wrap:wrap;gap:6px;margin:0 0 4px}
.pwtags .tagpill{font-size:12.5px;padding:2px 8px;border-radius:999px;background:#eef6fb;color:var(--hc-ink);border:1px solid #cfe5f2}
.pwtags .tagpill.core{background:#0B3C5D;color:#fff;border-color:#0B3C5D}
.pwtags .tagpill.comp{background:#fff;color:#0B3C5D;border-color:#0B6E9F}
.pwtags .tagpill.spec{background:#fff7e6;color:#5a3d00;border-color:#e8c98a}
.pwcard .pwdet{font-style:italic}
.hc-tbl .tscroll{overflow-x:auto;max-width:100%}
.hc-tbl{min-width:0;max-width:100%;overflow:hidden}

/* ---------- IEC: the NHEICC materials, as cards -----------------------
   @media phone: the picture box is shorter so the title stays in view. 
   One card per material: the picture first (it is what people recognise
   and pass on), then the Nepali title as printed, one English line, and the
   facts a field worker needs to use it -- who it is for, which numbers it
   carries, the size it prints at -- and the file. */
.iecgrid{display:grid;gap:22px;margin:18px 0 8px;
  grid-template-columns:repeat(auto-fill,minmax(min(340px,100%),1fr))}
.iecard{display:flex;flex-direction:column;border:1px solid var(--grey-3);border-radius:var(--r-md);
  background:#fff;overflow:hidden;min-width:0}
.iecimg{display:flex;align-items:center;justify-content:center;background:#EEF4F8;
  height:270px;padding:14px;border-bottom:1px solid var(--grey-3)}
.iecimg img{max-width:100%;max-height:242px;width:auto;height:auto;object-fit:contain;
  border-radius:4px;box-shadow:0 1px 4px rgba(11,37,64,.18)}
.iecimg:hover img,.iecimg:focus-visible img{box-shadow:0 2px 10px rgba(11,37,64,.30)}
.iecbody{display:flex;flex-direction:column;gap:8px;padding:16px 18px 18px;flex:1 1 auto}
.iecbody h3,.iecbody h4{margin:0;font-size:19px;line-height:1.35;color:var(--wh-dd);font-weight:700;text-align:left}
.iecbody .gloss{margin:0;font-weight:700;color:var(--hc-ink);font-size:15px;line-height:1.45;text-align:justify;hyphens:none}
.iecbody .what{margin:0;font-size:15px;line-height:1.6;color:var(--hc-ink);text-align:justify;hyphens:none}
.iecmeta{display:grid;grid-template-columns:auto minmax(0,1fr);gap:6px 12px;margin:4px 0 0;font-size:14px}
.iecmeta dt{color:var(--hc-mute);font-weight:600}
.iecmeta dd{margin:0;color:var(--hc-ink)}
.iecmeta .hlpill{display:inline-block;margin:0 6px 4px 0;padding:1px 10px;border-radius:999px;
  background:var(--wh-d);color:#fff;font-weight:800;text-decoration:none;font-variant-numeric:tabular-nums}
.iecdl{margin-top:auto;align-self:flex-start;display:inline-flex;gap:8px;align-items:baseline;text-decoration:none}
.iecdl .sz{font-weight:600;opacity:.9}
/* CMC-Nepal block (22 Oct 2026): the materials are grouped by topic, so the group is the h3 and each card title an h4. */
.sec2 h3.iecgrp{margin:30px 0 0;font-size:18.5px;color:var(--wh-dd)}
.sec2 h3.iecgrp + .iecgrid{margin-top:12px}
@media (max-width:600px){ .iecimg{height:210px} .iecimg img{max-height:182px} }