:root{
  --navy:#1E2A78; --navy-deep:#141C52; --navy-line:#2E3C93;
  --gold:#F5C400; --gold-deep:#B08A00;
  --green:#3E9B33;
  --paper:#F6F7FA; --surface:#FFFFFF; --sunk:#EEF1F7;
  --ink:#101637; --body:#2B3352; --muted:#5F678A;
  --hair:#DCE1EC; --hair-strong:#BFC7D9;
  --r-vh:#96201B; --r-vh-bg:#F7E4E2;
  --r-h:#B85A10;  --r-h-bg:#FAEBDC;
  --r-m:#9A7A00;  --r-m-bg:#FAF3D8;
  --r-l:#2F7C2A;  --r-l-bg:#E5F1E2;
  --warn:#96201B; --warn-bg:#FDEBEA;
  /* One shell width for the masthead, the nav, the content and the footer:
     four separate copies of a number is three chances for them to drift.
     Widened from 1160px to make room for the risk table's eleven columns —
     prose is unaffected, being capped at its own 68ch measure. */
  --shell:1240px;
  --shadow:0 1px 2px rgba(16,22,55,.05), 0 12px 30px -22px rgba(16,22,55,.5);
}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){
    --navy:#3243AE; --navy-deep:#0B1030; --navy-line:#3F51C4;
    --gold:#FFD52E; --gold-deep:#D9AC00; --green:#57B84A;
    --paper:#0B1030; --surface:#131A3C; --sunk:#1A2249;
    --ink:#EAEDF7; --body:#C3CAE3; --muted:#8992B4;
    --hair:#28315C; --hair-strong:#3A4477;
    --r-vh:#F0837A; --r-vh-bg:#3A1815;
    --r-h:#EDA45C;  --r-h-bg:#3A2512;
    --r-m:#E3C24E;  --r-m-bg:#332A0D;
    --r-l:#6EC463;  --r-l-bg:#183218;
    --warn:#F0837A; --warn-bg:#3A1815;
    --shadow:0 1px 2px rgba(0,0,0,.5), 0 12px 30px -22px rgba(0,0,0,.9);
  }
}
:root[data-theme="dark"]{
  --navy:#3243AE; --navy-deep:#0B1030; --navy-line:#3F51C4;
  --gold:#FFD52E; --gold-deep:#D9AC00; --green:#57B84A;
  --paper:#0B1030; --surface:#131A3C; --sunk:#1A2249;
  --ink:#EAEDF7; --body:#C3CAE3; --muted:#8992B4;
  --hair:#28315C; --hair-strong:#3A4477;
  --r-vh:#F0837A; --r-vh-bg:#3A1815;
  --r-h:#EDA45C;  --r-h-bg:#3A2512;
  --r-m:#E3C24E;  --r-m-bg:#332A0D;
  --r-l:#6EC463;  --r-l-bg:#183218;
  --warn:#F0837A; --warn-bg:#3A1815;
  --shadow:0 1px 2px rgba(0,0,0,.5), 0 12px 30px -22px rgba(0,0,0,.9);
}

*{box-sizing:border-box}
/* An author rule such as .legend{display:flex} beats the user-agent's
   [hidden]{display:none}, which once left a legend on screen after its layer
   was switched off. This settles it for every element on the site. */
[hidden]{display:none!important}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--paper);color:var(--body);
  font-family:"Source Serif 4",Georgia,"Times New Roman",serif;
  font-size:17px;line-height:1.68;-webkit-font-smoothing:antialiased}
h1,h2,h3,h4{margin:0;color:var(--ink);letter-spacing:-.02em;text-wrap:balance;
  font-family:"Public Sans","Helvetica Neue",Arial,sans-serif}
p{margin:0}
a{color:var(--navy);text-decoration:none;
  border-bottom:1px solid color-mix(in srgb,var(--navy) 30%,transparent)}
a:hover{border-bottom-color:var(--navy)}
a:focus-visible,button:focus-visible,input:focus-visible{
  outline:2px solid var(--gold);outline-offset:2px;border-radius:2px}
.mono,code{font-family:"JetBrains Mono",ui-monospace,Menlo,monospace}
code{font-size:.78rem;background:var(--sunk);border:1px solid var(--hair);
  border-radius:3px;padding:.1em .35em;color:var(--ink)}
.break{word-break:break-all}
.small{font-size:.86em}
.muted{color:var(--muted)}
.strong{font-weight:700;color:var(--ink)}
.eyebrow{font-family:"Public Sans",sans-serif;font-size:.68rem;font-weight:700;
  letter-spacing:.15em;text-transform:uppercase;color:var(--muted)}

/* ============================================================ masthead */
.mast{background:var(--navy-deep);color:#fff;border-bottom:4px solid var(--gold)}
.mastin{max-width:var(--shell);margin:0 auto;padding:26px 26px 24px;
  display:flex;align-items:center;gap:20px;flex-wrap:wrap}
/* The seal sits on white so a transparent PNG reads as a disc rather than
   disappearing into the navy, and `object-fit:contain` keeps a rectangular
   logo from being squeezed into the circle. */
.mast .seal{width:74px;height:74px;border-radius:50%;background:#fff;padding:3px;
  flex:none;object-fit:contain}
.mtitle{display:flex;flex-direction:column;gap:3px;min-width:0;flex:1 1 320px}
.mtitle .lgu{font-family:"Public Sans",sans-serif;font-size:.7rem;font-weight:700;
  letter-spacing:.17em;text-transform:uppercase;color:var(--gold)}
.mtitle h1{font-family:"Public Sans",sans-serif;font-size:clamp(1.35rem,3vw,1.9rem);
  font-weight:700;color:#fff;line-height:1.1}
.mtitle .sub{font-family:"Public Sans",sans-serif;font-size:.83rem;color:rgba(255,255,255,.72)}
.dl{display:inline-flex;flex-direction:column;background:var(--gold);color:#3A2C00;
  border:1px solid var(--gold);padding:10px 16px;border-radius:3px;
  font-family:"Public Sans",sans-serif;font-size:.85rem;font-weight:700;
  text-decoration:none;white-space:nowrap}
.dl:hover{background:#fff;border-color:#fff}
.dl small{font-weight:500;font-size:.68rem;opacity:.75}

/* ========================================================== section nav */
.snav{background:var(--surface);border-bottom:1px solid var(--hair);
  position:sticky;top:0;z-index:600;box-shadow:0 1px 0 rgba(16,22,55,.04)}
.snavin{max-width:var(--shell);margin:0 auto;padding:0 26px;display:flex;gap:2px;overflow-x:auto}
.snavin a{background:transparent;border:0;border-bottom:3px solid transparent;
  padding:13px 13px 11px;white-space:nowrap;font-family:"Public Sans",sans-serif;
  font-size:.83rem;font-weight:600;color:var(--muted)}
.snavin a:hover{color:var(--ink);border-bottom-color:var(--hair-strong)}
.snavin a[aria-current="page"]{color:var(--navy);border-bottom-color:var(--gold)}
:root[data-theme="dark"] .snavin a[aria-current="page"]{color:var(--ink)}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]) .snavin a[aria-current="page"]{color:var(--ink)}}

/* ============================================================== layout */
.wrap{max-width:var(--shell);margin:0 auto;padding:34px 26px 90px;
  display:grid;grid-template-columns:1fr 232px;gap:44px;align-items:start}
main{min-width:0}
@media (max-width:1040px){.wrap{grid-template-columns:1fr;gap:0}.aside{display:none}}

.phead{display:flex;flex-direction:column;gap:8px;padding-bottom:16px;
  border-bottom:2px solid var(--ink);margin-bottom:26px}
.phead h2{font-size:clamp(1.5rem,3.4vw,2.05rem);font-weight:700;line-height:1.08}
.phead .std{font-family:"Public Sans",sans-serif;font-size:.88rem;color:var(--muted)}

main h2{font-family:"Public Sans",sans-serif;font-size:1.18rem;font-weight:700;
  margin:34px 0 12px;padding-top:6px}
main h3{font-family:"Public Sans",sans-serif;font-size:1rem;font-weight:700;margin:22px 0 8px}
main > p, main > .prose p{max-width:68ch;margin-bottom:15px}
.lede{font-size:1.1rem;line-height:1.6;color:var(--ink);max-width:68ch;margin-bottom:20px}
.note{font-family:"Public Sans",sans-serif;font-size:.83rem;line-height:1.6;
  color:var(--muted);max-width:74ch;margin:10px 0 20px}

/* ============================================================== tables */
.tw{overflow-x:auto;border:1px solid var(--hair);border-radius:4px;
  background:var(--surface);box-shadow:var(--shadow);margin:0 0 22px}
table.grid{border-collapse:collapse;width:100%;font-family:"Public Sans",sans-serif;
  font-size:.84rem;min-width:560px}
table.grid.wide{min-width:700px}
/* Headings wrap; cell values do not.

   The risk table has eleven columns and used to demand 1,037px inside an
   830px column, so it scrolled sideways on a full-size desktop. Measured
   column by column, most of that width was bought by the HEADINGS, not the
   data: "Likelihood" held a 103px column open for a single digit, "Land-use
   control" 155px for the word "Prohibited". Auto table layout still gives a
   heading its whole line when the space is there, so nothing wraps on a wide
   screen — the wrapping only happens once the column is squeezed, which is
   exactly when a second line is cheaper than a scrollbar. */
table.grid thead th{text-align:left;padding:10px 12px;background:var(--navy);color:#fff;
  font-size:.68rem;font-weight:700;letter-spacing:.09em;text-transform:uppercase;
  white-space:normal;vertical-align:bottom;position:sticky;top:0}
table.grid tbody td{padding:9px 12px;border-bottom:1px solid var(--hair);
  vertical-align:top;line-height:1.45}
/* Eleven columns cannot afford 13px of padding on each side of each one, nor
   .09em of letter-spacing on headings like SENSITIVITY and LIKELIHOOD — at
   eleven characters that spacing alone was holding a column ten pixels wider
   than the single digit underneath it. */
table.grid.wide thead th,table.grid.wide tbody td{padding-left:9px;padding-right:9px}
table.grid.wide thead th{letter-spacing:.035em}

/* On a phone, a wide table stops being a table.

   Eleven numeric columns will not fit in 390px at any font size worth
   reading, and a horizontal scrollbar inside a vertical page is the worst of
   both — you lose the row you were reading to find the column you wanted. So
   below 880px each row becomes a block and each cell carries its own label,
   from the data-l the renderer wrote. Nothing is dropped: every column is
   still there, one per line, in the same order. */
@media (max-width:880px){
  table.grid.stack{min-width:0}
  table.grid.stack thead{position:absolute;width:1px;height:1px;overflow:hidden;
    clip:rect(0 0 0 0);white-space:nowrap}
  table.grid.stack,table.grid.stack tbody,table.grid.stack tr,
  table.grid.stack td{display:block;width:auto}
  table.grid.stack tbody tr{border-bottom:1px solid var(--hair-strong);padding:4px 0 8px}
  table.grid.stack tbody tr:last-child{border-bottom:0}
  /* Flex, not grid. Under grid each run of cell content becomes its own
     grid item: "62.4%" and the score chip beside it landed on separate rows
     and the chip, stretched to the column, painted as a full-width red bar.
     Flex with a baseline alignment keeps them side by side at their own
     width, which is what they were before the row was ever stacked. */
  table.grid.stack tbody td{display:flex;flex-wrap:wrap;gap:4px 12px;
    align-items:baseline;border-bottom:0;padding:3px 12px;text-align:left}
  table.grid.stack tbody td::before{flex:0 0 11.6em}
  table.grid.stack tbody td::before{content:attr(data-l);font-family:"Public Sans",sans-serif;
    font-size:.68rem;font-weight:700;letter-spacing:.05em;text-transform:uppercase;
    color:var(--muted)}
  /* The barangay name heads its own block rather than sitting in the grid. */
  table.grid.stack tbody td.name{display:block;font-weight:700;font-size:1rem;
    padding:8px 12px 6px}
  table.grid.stack tbody td.name::before{content:none}
  table.grid.stack tbody td.num{white-space:normal}
  /* The scroller has nothing left to scroll. */
  .tw:has(table.grid.stack){overflow-x:visible}

  /* The severity matrix is the one table that must NOT stack: it is a grid
     of exposure against vulnerability, and its meaning is the two axes. Its
     cells are four characters wide, so it only ever needed permission to
     stop obeying the 560px floor. */
  /* And no table keeps the 560px floor on a phone. The floor exists so a
     table is not squashed into unreadability on a desktop; below this
     breakpoint the alternative is not a roomier table, it is a sideways
     scrollbar, and for a four-column table of short strings wrapping beats
     scrolling. */
  table.grid,table.grid.wide{min-width:0}
  .tw{overflow-x:auto}
  table.grid.matrix{min-width:0}
  table.grid.matrix thead th,table.grid.matrix tbody td,
  table.grid.matrix tbody th{padding-left:7px;padding-right:7px}
  .tw:has(table.grid.matrix){overflow-x:visible}
}
table.grid tbody tr:nth-child(even){background:var(--sunk)}
table.grid tbody tr:last-child td{border-bottom:0}
table.grid tbody tr.hit{background:color-mix(in srgb,var(--gold) 22%,transparent);
  box-shadow:inset 3px 0 0 var(--gold)}
td.num{font-family:"JetBrains Mono",monospace;font-variant-numeric:tabular-nums;
  text-align:right;white-space:nowrap;font-size:.79rem}
th.num{text-align:right}
.gap{color:var(--muted);font-style:italic}

.score{display:inline-block;min-width:1.35em;padding:1px 5px;border-radius:2px;
  font-family:"Public Sans",sans-serif;font-size:.7rem;font-weight:700;
  text-align:center;color:#fff}
.score.s4{background:#96201B} .score.s3{background:#B85A10}
.score.s2{background:#9A7A00} .score.s1{background:#2F7C2A}

.riskpill,.pill{display:inline-flex;align-items:center;gap:7px;
  font-family:"Public Sans",sans-serif;font-size:.71rem;font-weight:700;
  padding:2px 9px 2px 6px;border-radius:2px;white-space:nowrap}
.riskpill::before{content:"";width:3px;height:12px;border-radius:1px;
  background:currentColor;flex:none}
.riskpill.r-veryhigh{color:var(--r-vh);background:var(--r-vh-bg)}
.riskpill.r-high{color:var(--r-h);background:var(--r-h-bg)}
.riskpill.r-moderate{color:var(--r-m);background:var(--r-m-bg)}
.riskpill.r-low{color:var(--r-l);background:var(--r-l-bg)}

.pill{background:var(--sunk);color:var(--muted);padding:2px 9px}
.pill.p-computed{background:var(--r-l-bg);color:var(--r-l)}
.pill.p-manual,.pill.p-pending{background:var(--r-m-bg);color:var(--r-m)}
.pill.p-nil{background:var(--sunk);color:var(--muted)}
/* Out of date reads as a problem, not as a neutral tag: it sits beside a
   "computed" pill and has to win the reader's eye, not blend into it. */
.pill.p-stale{background:var(--r-h-bg);color:var(--r-h)}

/* ===================================================== stats, callouts */
.stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));
  gap:1px;background:var(--hair);border:1px solid var(--hair);margin:0 0 28px}
.stat{background:var(--surface);padding:15px 16px;display:flex;flex-direction:column;gap:3px}
.stat .v{font-family:"Public Sans",sans-serif;font-size:1.5rem;font-weight:700;
  color:var(--ink);line-height:1.05;font-variant-numeric:tabular-nums;letter-spacing:-.025em}
.stat .k{font-family:"Public Sans",sans-serif;font-size:.7rem;font-weight:600;
  color:var(--muted);letter-spacing:.05em;text-transform:uppercase}

.callout{border-left:4px solid var(--gold);background:color-mix(in srgb,var(--gold) 9%,transparent);
  padding:16px 19px;margin:0 0 22px;border-radius:0 3px 3px 0;max-width:74ch}
.callout strong{font-family:"Public Sans",sans-serif;color:var(--ink)}
.callout.warn{border-left-color:var(--warn);background:var(--warn-bg)}
.callout.draft{border-left-color:var(--navy);background:color-mix(in srgb,var(--navy) 7%,transparent)}
.samplebar{background:var(--warn);color:#fff;font-family:"Public Sans",sans-serif;
  font-size:.82rem;padding:11px 26px;text-align:center}
.samplebar strong{color:#fff}

dl.facts{display:grid;grid-template-columns:max-content 1fr;gap:7px 20px;
  margin:0 0 22px;font-family:"Public Sans",sans-serif;font-size:.88rem}
dl.facts dt{font-weight:600;color:var(--muted)}
dl.facts dd{margin:0;color:var(--ink)}
dl.terms{margin:0;font-size:.95rem}
dl.terms dt{font-family:"Public Sans",sans-serif;font-weight:700;color:var(--ink);margin-top:14px}
dl.terms dd{margin:3px 0 0;max-width:68ch}

/* ============================================================== aside */
.aside{position:sticky;top:76px;display:flex;flex-direction:column;gap:22px}
.toc{border-left:2px solid var(--hair);padding-left:15px;display:flex;flex-direction:column;gap:8px}
.toc a{font-family:"Public Sans",sans-serif;font-size:.82rem;color:var(--muted);
  border:0;line-height:1.35}
.toc a:hover{color:var(--navy)}
.toc a.on{color:var(--ink);font-weight:700}
.meta{font-family:"Public Sans",sans-serif;font-size:.75rem;color:var(--muted);
  line-height:1.55;display:flex;flex-direction:column;gap:9px;
  border-top:1px solid var(--hair);padding-top:15px}
.meta b{color:var(--gold-deep);display:block;font-size:.68rem;letter-spacing:.12em;
  text-transform:uppercase;margin-bottom:2px}

footer.site{background:var(--navy-deep);color:rgba(255,255,255,.72)}
footer.site .fin{max-width:var(--shell);margin:0 auto;padding:32px 26px 40px;display:grid;
  grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:26px;
  font-family:"Public Sans",sans-serif;font-size:.8rem;line-height:1.6}
footer.site b{display:block;font-size:.72rem;letter-spacing:.13em;text-transform:uppercase;
  margin-bottom:8px;color:var(--gold)}
footer.site a{color:rgba(255,255,255,.82);border-bottom-color:rgba(255,255,255,.3)}

/* =============================================================== maps */
figure.map{margin:0 0 22px;display:flex;flex-direction:column;gap:9px}
figure.map svg{width:100%;height:auto;display:block;border:1px solid var(--hair);
  border-radius:4px;background:var(--surface)}
figcaption{font-family:"Public Sans",sans-serif;font-size:.79rem;color:var(--muted)}
.legend{display:flex;flex-wrap:wrap;gap:6px 16px}
.mapkey,.giskey{display:inline-flex;align-items:center;gap:7px;
  font-family:"Public Sans",sans-serif;font-size:.76rem;color:var(--body)}
.mapkey i,.giskey i{width:12px;height:12px;border-radius:2px;flex:none;
  border:1px solid rgba(16,22,55,.18)}
.maptabs{display:flex;flex-wrap:wrap;gap:4px}

/* ============================================================ GIS map */
.gis{border:1px solid var(--hair);border-radius:4px;background:var(--surface);
  box-shadow:var(--shadow);margin:0 0 22px;overflow:hidden}
/* The GIS layer tabs drive the Leaflet layer, so they stay hidden until
   there is a Leaflet layer to drive. Until then the SVG's own switcher is
   the working one, and showing both left two identical rows of hazard
   buttons where only the lower row did anything. */
.gisbar{display:none;align-items:center;gap:14px;padding:11px 14px;
  border-bottom:1px solid var(--hair);background:var(--sunk);flex-wrap:wrap}
.gis-live .gisbar{display:flex}
.gistabs{display:flex;gap:4px;flex-wrap:wrap}
.gistab{font-family:"Public Sans",sans-serif;font-size:.78rem;font-weight:600;
  padding:6px 12px;border:1px solid var(--hair-strong);border-radius:3px;
  background:var(--surface);color:var(--muted);cursor:pointer}
.gistab:hover{color:var(--ink);border-color:var(--navy)}
.gistab.on{background:var(--navy);border-color:var(--navy);color:#fff}
/* One column until the panel has something in it. Reserving 236px for a
   hidden panel left the static map squeezed into two thirds of the frame
   with white space beside it. */
.gisbody{display:grid;grid-template-columns:1fr}
.gis-live .gisbody{grid-template-columns:1fr 236px}
@media (max-width:820px){.gis-live .gisbody{grid-template-columns:1fr}}
.gisframe{position:relative;min-width:0}
.gismap{height:460px;width:100%;background:var(--sunk);z-index:1}
.gisfallback figure.map{margin:0;gap:0}
.gisfallback figure.map svg{border:0;border-radius:0}
.gisfallback .legend,.gisfallback figcaption,.gisfallback .maptabs{padding:10px 14px}
.gisreadout{position:absolute;left:10px;bottom:10px;z-index:500;
  background:rgba(255,255,255,.94);color:#101637;border:1px solid var(--hair-strong);
  border-radius:3px;padding:4px 9px;font-family:"Public Sans",sans-serif;font-size:.75rem;
  pointer-events:none;max-width:70%}
/* The panel scrolls inside the map's own height rather than setting the
   frame's. A panel taller than the map stretched the grid row and left a
   band of empty white under the map. */
.gispanel{border-left:1px solid var(--hair);padding:14px;display:flex;
  flex-direction:column;gap:16px;font-family:"Public Sans",sans-serif;
  height:460px;overflow-y:auto}
@media (max-width:820px){.gispanel{border-left:0;border-top:1px solid var(--hair);
  height:auto;max-height:none}}
@media (max-width:640px){.gispanel{height:auto}}
.gisgroup{display:flex;flex-direction:column;gap:7px}
/* The legend is the one thing that must stay visible while the rest of the
   panel scrolls — it is what makes the colours mean anything, and it was the
   first thing to scroll away. */
.gisgroup:first-child{position:sticky;top:-14px;z-index:2;background:var(--surface);
  padding:14px 0 8px;margin:-14px 0 0;border-bottom:1px solid var(--hair)}
.gisgroup h4{font-size:.68rem;font-weight:700;letter-spacing:.13em;
  text-transform:uppercase;color:var(--muted)}
.gislegend{display:flex;flex-direction:column;gap:5px}
.gisopts{display:flex;flex-direction:column;gap:5px}
.gischk{display:grid;grid-template-columns:auto 1fr;gap:4px 8px;align-items:start;
  font-size:.78rem;color:var(--body);cursor:pointer;line-height:1.35}
.gischk em{grid-column:2;font-style:normal;font-size:.7rem;color:var(--muted)}
.gischk.bad span{color:var(--warn)}
.gischk.bad em{color:var(--warn)}
.gisrange{display:flex;flex-direction:column;gap:5px;font-size:.78rem;color:var(--body)}
.gisrange input{width:100%}
.gishint,.gisnote{font-size:.71rem;color:var(--muted);line-height:1.5}
.giscap{font-family:"Public Sans",sans-serif;font-size:.79rem;color:var(--muted);
  padding:10px 14px;border-top:1px solid var(--hair);margin:0}
.gislabel{font-family:"Public Sans",sans-serif;font-size:10px;font-weight:600;
  color:#101637;text-shadow:0 0 3px #fff,0 0 3px #fff,0 0 3px #fff;white-space:nowrap;
  transform:translateX(-50%)}
.leaflet-container{font-family:"Public Sans",sans-serif;background:var(--sunk)}
.gispop b{display:block;font-family:"Public Sans",sans-serif;font-size:.9rem;color:#101637}
.gispop-l{display:block;font-size:.7rem;text-transform:uppercase;letter-spacing:.1em;
  color:#5F678A;margin-top:2px}
.gispop-v{display:block;font-size:.85rem;color:#101637;margin-top:6px}
.gispop-h{display:block;font-size:.7rem;color:#5F678A;margin-top:6px}
/* Once the slippy map is live the SVG stays in the document for printing
   only — the same shading, on paper, where tiles would be a grey mess. */
.gis-live .gis-print-only{display:none}

/* ---- shading switched off ----
   The tabs stop reading as "one of these is showing", the legend says why it
   no longer applies, and the opacity slider is disabled because it now
   adjusts something invisible. */
.gis-nofill .gislegend{opacity:.4}
.gis-nofill .gisrange.off,.gisrange.off{opacity:.5}
.gisrange input:disabled{cursor:not-allowed}
/* Only the drawn outline is clickable once the fill is transparent. Without
   this an invisible layer keeps swallowing every click meant for the base map
   or an agency layer underneath — which is the whole reason for switching the
   shading off.
   `.leaflet-interactive` is in the selector to win on specificity: Leaflet's
   own `.leaflet-pane > svg path.leaflet-interactive` scores 0-2-2, and the
   obvious `.gis-nofill .leaflet-overlay-pane path` scores 0-2-1 and loses by a
   single element — silently, with the rule visibly present in the
   stylesheet. */
.gis-nofill .leaflet-overlay-pane path.leaflet-interactive{pointer-events:visibleStroke}

/* ---- locator map ----
   No hazard, no legend: barangay names over a base map, linked to the table. */
.gis-locator .gismap{height:420px}
.gis-locator .gislabel{font-size:11px}

/* =========================================================== assistant */
/* Bottom-right, above everything. It sits clear of the sticky section nav at
   the top and of the map's control panel, and it is where people look for
   help. On a phone it collapses to a circle so it covers as little of the
   page as a control can. */
/* column-reverse so the LAUNCHER stays pinned at the bottom corner and the
   panel grows upward from it. In source order the launcher comes first, which
   is right for the tab order and for screen readers; laid out that way it
   pushed the launcher halfway up the page whenever the panel opened. */
.ask{position:fixed;right:18px;bottom:18px;z-index:1200;
  font-family:"Public Sans",sans-serif;display:flex;flex-direction:column-reverse;
  align-items:flex-end;gap:10px}
.asklaunch{display:inline-flex;align-items:center;gap:9px;cursor:pointer;
  background:var(--navy);color:#fff;border:0;border-radius:26px;
  padding:12px 18px;font-size:.85rem;font-weight:700;
  box-shadow:0 6px 24px -8px rgba(16,22,55,.55)}
.asklaunch:hover{background:var(--navy-line)}
.askicon{display:inline-flex}
.ask-open .asklaunch{background:var(--navy-deep)}

.askpanel{width:min(94vw,380px);max-height:min(74vh,560px);
  display:flex;flex-direction:column;overflow:hidden;
  background:var(--surface);border:1px solid var(--hair);border-radius:8px;
  box-shadow:0 18px 48px -18px rgba(16,22,55,.55)}
.askhead{display:flex;align-items:flex-start;gap:10px;padding:12px 14px;
  background:var(--navy-deep);color:#fff}
.askhead div{display:flex;flex-direction:column;flex:1 1 auto;min-width:0}
.askhead strong{font-size:.88rem}
.askhead span{font-size:.72rem;color:rgba(255,255,255,.7)}
.askclose{background:transparent;border:0;color:rgba(255,255,255,.8);
  font-size:1.3rem;line-height:1;cursor:pointer;padding:0 2px}
.askclose:hover{color:#fff}

.asklog{flex:1 1 auto;overflow-y:auto;padding:14px;display:flex;
  flex-direction:column;gap:11px;font-size:.85rem;line-height:1.55}
.askmsg{max-width:92%;padding:9px 12px;border-radius:10px}
.askmsg.bot{background:var(--sunk);color:var(--body);border-bottom-left-radius:3px}
.askmsg.me{background:var(--navy);color:#fff;align-self:flex-end;
  border-bottom-right-radius:3px}
.askmsg b{color:var(--ink)}
.askmsg.me b{color:#fff}
.askmsg ul{margin:7px 0 0;padding-left:1.1em;display:flex;flex-direction:column;gap:4px}
.askmsg a{color:var(--navy);font-weight:600}
.askdim{color:var(--muted);font-style:italic}
.askwhere{margin-top:8px;font-size:.78rem;color:var(--muted)}
.asknote{display:block;margin-top:7px;font-size:.75rem;color:var(--muted);font-style:italic}
.asknote.warn{color:var(--warn);font-style:normal;font-weight:600}

.askchips{display:flex;flex-wrap:wrap;gap:6px;padding:0 14px 10px}
.askchip{background:var(--surface);border:1px solid var(--hair-strong);
  border-radius:14px;padding:5px 11px;font-size:.75rem;color:var(--body);cursor:pointer}
.askchip:hover{border-color:var(--navy);color:var(--navy)}

.askform{display:flex;gap:7px;padding:10px 14px;border-top:1px solid var(--hair)}
.askform input{flex:1 1 auto;min-width:0;font:inherit;font-size:.83rem;
  padding:8px 11px;border:1px solid var(--hair-strong);border-radius:5px;
  background:var(--surface);color:var(--ink)}
.askform button{background:var(--navy);color:#fff;border:0;border-radius:5px;
  padding:8px 15px;font-size:.8rem;font-weight:700;cursor:pointer}
.askform button:hover{background:var(--navy-line)}
.askfoot{margin:0;padding:0 14px 12px;font-size:.7rem;color:var(--muted);line-height:1.45}
.visually-hidden{position:absolute;width:1px;height:1px;margin:-1px;padding:0;
  overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}

@media (max-width:640px){
  .ask{right:12px;bottom:12px}
  /* The label goes; the icon stays. A pill wide enough for four words covers
     a third of a phone screen. */
  .asklaunch .asklabel{display:none}
  .asklaunch{border-radius:50%;padding:14px}
  .askpanel{width:calc(100vw - 24px);max-height:70vh}
}

/* ============================================================ filters */
.filter{display:flex;gap:9px;flex-wrap:wrap;align-items:center;margin:0 0 14px}
.filter input,.filter select{font-family:"Public Sans",sans-serif;font-size:.84rem;
  background:var(--surface);border:1px solid var(--hair-strong);border-radius:3px;
  padding:7px 11px;color:var(--ink)}
.filter input{min-width:190px}
.filter .cnt{font-family:"Public Sans",sans-serif;font-size:.78rem;color:var(--muted);
  margin-left:auto}

@media (prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}
@media (max-width:640px){
  body{font-size:16px}
  .wrap{padding:26px 18px 60px}
  .mastin{padding:20px 18px}
  .snavin{padding:0 18px}
  .gismap{height:340px}
}

/* =============================================================== print */
@media print{
  :root{--paper:#fff;--surface:#fff;--sunk:#f4f4f4;--ink:#000;--body:#222;--muted:#555;
        --hair:#bbb;--hair-strong:#888}
  body{background:#fff;font-size:10.5pt}
  .snav,.aside,.dl,.filter,.gisbar,.gispanel,.gisreadout,.maptabs,
  .ask{display:none!important}
  .mast{background:#fff;color:#000;border-bottom:2px solid #000}
  .mtitle h1,.mtitle .lgu{color:#000}
  .mtitle .sub{color:#333}
  footer.site{background:#fff;color:#333;border-top:1px solid #bbb}
  footer.site b{color:#000}
  .wrap{display:block;max-width:none;padding:0}
  .tw{overflow:visible;box-shadow:none;border-color:#bbb}
  table.grid,table.grid.wide{min-width:0}
  table.grid thead th{background:#e8e8e8;color:#000;position:static}
  tr{page-break-inside:avoid}
  thead{display:table-header-group}
  figure.map{page-break-inside:avoid} figure.map svg{max-height:16cm}
  /* The slippy map cannot print — half-loaded tiles and a control panel.
     The SVG can, so on paper it comes back. */
  .gis{border:0;box-shadow:none}
  .gismap{display:none!important}
  .gis-live .gis-print-only{display:block!important}
  a[href^="http"]::after{content:" (" attr(href) ")";font-size:8pt;color:#666}
  .callout{border:1px solid #999;border-left-width:4px}
}