:root{
  --group:#f2f2f7; --cell:#fff; --fg:#1d1d1f; --fg2:#62626a; --line:#d2d2d7; --accent:#0b5cad;
  --font:-apple-system,BlinkMacSystemFont,"SF Pro Text","Segoe UI",system-ui,Roboto,"Helvetica Neue",Arial,sans-serif;
}
@media (prefers-color-scheme:dark){:root{
  --group:#000; --cell:#1c1c1e; --fg:#f5f5f7; --fg2:#a1a1a6; --line:#3a3a3c; --accent:#6cb2ff; color-scheme:dark}}

/* Type follows the iOS text styles at the default size (HIG, Typography): Large Title 34/41, Title 1 28/34,
   Title 3 20/25, Headline and Body 17/22, Subhead 15/20, Footnote 13/18, Caption 12/16. Nothing below 12px.
   Space follows a 4, 8, 16, 24, 32px scale with 16px side margins; every target is at least 44px (HIG, Layout). */
*{box-sizing:border-box}
[hidden]{display:none!important}
body{margin:0;background:var(--group);color:var(--fg);font:1.0625rem/1.294 var(--font);
  padding-bottom:calc(49px + env(safe-area-inset-bottom) + 1rem)}
header,main,footer{max-width:40rem;margin:0 auto;padding:0 1rem}
a{color:var(--accent);text-decoration:none}
p a{text-decoration:underline}
.gap a{text-decoration:none}
a:focus-visible,input:focus-visible{outline:3px solid var(--accent);outline-offset:2px}

/* navigation bar: 44px, stays on top */
header{position:sticky;top:0;z-index:2;display:flex;justify-content:space-between;align-items:center;gap:1rem;
  min-height:2.75rem;background:var(--group);border-bottom:1px solid var(--line)}
header a{display:inline-flex;align-items:center;min-height:2.75rem}
header a:first-child{color:var(--fg);font-weight:600}

/* tab bar: 49px at the bottom on a phone, four items, icon over label; the current one is the only blue one */
.tabs{position:fixed;z-index:2;left:0;right:0;bottom:0;display:flex;background:var(--cell);border-top:1px solid var(--line);
  padding-bottom:env(safe-area-inset-bottom)}
.tabs a{flex:1;min-width:0;min-height:49px;display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:2px;color:var(--fg2);font-size:.75rem;line-height:1rem}
.tabs a[aria-current]{color:var(--accent);font-weight:600}
.tabs svg{width:1.5rem;height:1.5rem;fill:none;stroke:currentColor;stroke-width:1.75;stroke-linecap:round;stroke-linejoin:round}
/* wide screens: the same four items become a side list left of the reading column */
@media (min-width:64rem){
  body{padding-bottom:0}
  .tabs{left:calc(50% - 34rem);right:auto;top:4rem;bottom:auto;width:13rem;flex-direction:column;gap:.25rem;
    background:none;border:0;padding:0}
  .tabs a{flex:none;flex-direction:row;justify-content:flex-start;gap:.75rem;min-height:2.75rem;padding:0 .75rem;
    border-radius:12px;font-size:1.0625rem;line-height:1.375rem;color:var(--fg)}
  .tabs a[aria-current]{background:var(--cell)}
}

/* footer is one text block; the 44px hit area is a pseudo-element, so it costs no layout */
/* In-text links: one 13px line each, with a pseudo-element that grows the hit area to 44px without taking
   layout space. Insets are hit area, not spacing. Neighbouring hit areas never overlap. */
footer a,.caption a{display:inline-block}
.rows small a{display:block}
footer a,.caption a,.rows small a,dd a{position:relative;font-size:.8125rem;line-height:1.125rem}
footer a::after,.caption a::after,.rows small a::after,dd a::after{content:"";position:absolute;left:-.25rem;right:-.25rem;
  top:calc((1.125rem - 2.75rem)/2);bottom:calc((1.125rem - 2.75rem)/2)}
footer{margin-top:2rem;padding-bottom:2rem}

/* vertical rhythm: 16px between blocks, 8px inside a block, 32px before a new section */
main>*{margin:0}
main>*+*{margin-top:1rem}
main>:first-child{margin-top:1rem}
main>.av+h1{margin-top:.5rem}
main>h1+.caption{margin-top:.25rem}
main>h1+p,main>p+.caption,main>.stats+.caption,main>label+input,main>h2+*{margin-top:.5rem}
main>h2,section+section{margin-top:2rem}
section>h2+*{margin-top:.5rem}
section>h2{margin:0}
/* a district with no barangay left after the search hides with its heading */
#places section:not(:has(li:not([hidden]))){display:none}

h1{font-size:1.75rem;line-height:2.125rem;letter-spacing:-.01em;font-weight:700;text-wrap:balance}
h2{font-size:1.25rem;line-height:1.5625rem;font-weight:600}
.caption,small,footer{color:var(--fg2);font-size:.8125rem;line-height:1.125rem}
label{display:block;color:var(--fg2);font-size:.9375rem;line-height:1.25rem}
/* search field: filled, no border, magnifier inside, the shape of the system search field */
input[type=search]{width:100%;min-height:2.75rem;padding:.5rem 1rem .5rem 2.5rem;font:inherit;color:var(--fg);
  border:0;border-radius:12px;background:var(--cell) no-repeat .75rem 50%/1.25rem
  url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='gray' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='m20 20-4-4'/%3E%3C/svg%3E")}

/* initials badge and status chip. Neither carries a colour: a status is the list's own word, not a verdict. */
.av{flex:none;display:inline-flex;align-items:center;justify-content:center;width:2.5rem;height:2.5rem;border-radius:50%;
  background:var(--group);color:var(--fg2);font-style:normal;font-weight:600;font-size:.9375rem}
main>.av{display:flex;width:4rem;height:4rem;font-size:1.375rem;background:var(--cell)}
.chip{flex:none;padding:.125rem .5rem;border-radius:6px;background:var(--group);color:var(--fg2);
  font-style:normal;font-weight:600;font-size:.75rem;line-height:1rem}

/* stat strip: three label and value pairs, label small on top, value below */
.stats{display:grid;grid-template-columns:1fr 1.5fr 1fr;background:var(--cell);border-radius:12px;padding:1rem 0;text-align:center}
.stats div{padding:0 .5rem;min-width:0}
.stats div+div{border-left:1px solid var(--line)}
.stats span{display:block;color:var(--fg2);font-size:.75rem;line-height:1rem}
.stats b{display:block;margin-top:.25rem;font-variant-numeric:tabular-nums;font-size:1.25rem;line-height:1.5625rem;font-weight:600;text-wrap:balance}

/* receipt hero: the amount leads, as on a payment receipt */
.hero{display:grid;gap:.25rem;justify-items:start;background:var(--cell);border-radius:12px;padding:1rem}
.amount{font-size:2.125rem;line-height:2.5625rem;font-weight:700;letter-spacing:-.01em;font-variant-numeric:tabular-nums}
.hero .chip{margin-top:.5rem}
.who a{display:inline-flex;align-items:center;min-height:2.75rem}
.none{color:var(--fg2)}

.rows{padding:0;list-style:none;background:var(--cell);border-radius:12px}
.row{display:flex;justify-content:space-between;align-items:first baseline;gap:1rem;min-height:2.75rem;
  margin-left:1rem;padding:.5rem 1rem .5rem 0;border-top:1px solid var(--line)}
.row:first-child{border-top:0}
.rows small{display:block;overflow-wrap:anywhere}
dd{margin:0;font-variant-numeric:tabular-nums;min-width:0;overflow-wrap:anywhere}

/* the five receipt rows are a trail: label over value, read down the left edge. A filled dot is a record we
   found; a hollow dot is a stage with no record. The dot repeats what the row says in words. */
dl.rows .row{display:block;position:relative;margin:0;padding:.5rem 1rem .5rem 3rem;border:0}
dl.rows .row::before{content:"";position:absolute;left:calc(1.5rem - 1px);top:0;bottom:0;width:2px;background:var(--line)}
dl.rows .row:first-child::before{top:1.25rem}
dl.rows .row:last-child::before{bottom:auto;height:1.25rem}
dl.rows dt{color:var(--fg2);font-size:.8125rem;line-height:1.125rem}
dl.rows dd::before{content:"";position:absolute;left:1rem;top:.75rem;width:1rem;height:1rem;border-radius:50%;
  background:var(--fg);border:2px solid var(--cell)}
dl.rows dd.none::before{background:var(--cell);border-color:var(--fg2)}
dd .v{display:block;font-weight:600}
dd.none{color:var(--fg2)}
/* links inside a row value sit on the 13px rhythm */
dd .v+small{margin-top:.25rem}
dd a{display:block}

/* source tag: quiet tinted text, 44px tap target, no pill */
.tag{font-size:.8125rem;white-space:nowrap}
dd .tag{margin-top:.5rem}
.nav .tag{display:inline-flex;align-items:center;justify-content:flex-end;min-width:2.75rem;min-height:2.75rem}

/* rows that navigate: text-colour title, source tag, then the grey chevron as the trailing element at the right edge.
   The chevron belongs to the title link (a pseudo-element of .item, placed against the row), so tapping it navigates. */
.row.nav{position:relative;align-items:center;padding:0 2.5rem 0 0}
.item{flex:1;min-width:0;display:flex;align-items:center;gap:.75rem;padding:.5rem 0;color:var(--fg);overflow-wrap:anywhere}
.item>span{flex:1;min-width:0}
.nav .item::after{content:"›";position:absolute;right:1rem;top:50%;transform:translateY(-50%);color:var(--fg2);
  font-size:1.25rem;line-height:1}
/* feed row: amount and status first, then the title */
.top{display:flex;align-items:center;gap:.5rem;margin-bottom:.25rem}
.top b{font-weight:600;font-variant-numeric:tabular-nums}
.top+small,.item small{margin-top:.25rem}

/* gap card: five segments, one per record, then the sentence */
.gap{background:var(--cell);border-radius:12px;padding:1rem 1rem .5rem}
.gap a{display:flex;align-items:center;min-height:2.75rem;font-size:.8125rem}
.meter{display:flex;gap:.25rem;margin-bottom:.5rem}
.meter i{flex:1;height:.25rem;border-radius:2px;background:var(--line)}
.meter .on{background:var(--fg)}

/* paper: content only, for a receipt handed over or a barangay hall poster */
@media print{
  header,.tabs,label,input,.nav .item::after{display:none}
  body{padding:0;background:none}
  a{text-decoration:underline}
}