:root {
  --ink: #1d2433; --muted: #5d6679; --line: #d9dde5; --bg: #f6f7f9; --card: #ffffff; --accent: #2f6fe0;
  --radius: 14px; --none: #8a8a8a; --green: #1b7f4b; --navy: #0c2f6e; --sky: #a9c9f2;
  /* Everything that floats over the map shares one see-through look: white for the main controls and open menus,
     tinted grey for the less important ones */
  --glass: rgba(255,255,255,.68); --glass-gray: rgba(220,225,233,.68); --blur: blur(16px); --float-shadow: 0 2px 10px rgba(0,0,0,.14);
  /* Corners: every control and the row it sits in (buttons, inputs, tabs, toggles, the bottom bar, map buttons) is a
     pill (--pill), like the bottom bar. Cards, panels, menus and the 1 to 5 score tiles use --radius.
     One scale for the whole interface. Text sizes, control heights and corners come from here; emoji and icon sizes are
     set where they're used, since they're pictures, not text */
  --fs-2xs: 10px; --fs-xs: 12px; --fs-sm: 14px; --fs-md: 16px; --fs-lg: 18px; --fs-xl: 22px; --fs-2xl: 26px; --fs-h1: 32px;
  --fs-display-sm: 44px; --fs-display: 56px;
  --control: 44px; --control-md: 36px; --control-sm: 28px;  /* 44: the comfortable tap size, for anything people tap often */
  --radius-sm: 10px; --radius-lg: 20px; --pill: 999px;
  /* Night: the dark map and everything floating on it. From back to front: the map's land (--night-map, set in
     index.js), floating controls (--night-glass), the bottom bar (--night, the deepest navy), then text in
     --on-night and --on-night-muted */
  --night: #0b1729; --night-glass: rgba(21, 33, 52, .7); --night-raised: rgba(255,255,255,.1); --night-line: rgba(255,255,255,.12);
  --on-night: #eef3fa; --on-night-muted: #a3b2c7;
  /* Colour structure, on every page:
     - Scores own orange and blue: orange is a low score, blue a high one (BAND in common.js, MAP_BAND on the dark map).
       Orange appears nowhere else.
     - Controls are white or grey when not selected, and hero blue (--hero) when selected, open, on, or the main
       action: the current tab, the chosen map level, ticked layers, an open menu, your row on the leaderboard, primary
       buttons such as Submit and Score a Street, links and keyboard focus. Text on hero blue is white.
     - Supporting actions, such as Find My Location, take a quieter blue (--hero-quiet) so the main action leads.
     - Surfaces, from back to front: the dark map, night glass for things floating on it, the deepest navy for the
       bottom bar and the profile menu; light cards and pages for reading. */
  --hero: #2f6fe0; --hero-soft: rgba(47,111,224,.16); --hero-quiet: #2a4a78;
}
* { box-sizing: border-box; }
[hidden] { display: none !important; }
body { margin: 0; font: 16px/1.5 Helvetica, "Helvetica Neue", Arial, sans-serif; color: var(--ink); background: var(--bg); }
a { color: var(--accent); }
/* Headings: page titles, section and card titles, small headings */
h1 { font-size: var(--fs-h1); line-height: 1.15; margin: 8px 0 12px; }
h2 { font-size: var(--fs-xl); line-height: 1.25; }
h3 { font-size: var(--fs-lg); line-height: 1.3; }
main.page h1 { margin-bottom: 4px; }
main.page h1 + p.muted { margin-top: 0; }  /* a page's one-line description */
.btn-block { width: 100%; }
header.bar { display: flex; align-items: center; gap: 16px; padding: 10px 16px; background: var(--card); border-bottom: 1px solid var(--line); }
header.bar .brand { display: inline-flex; align-items: center; gap: 8px; font-weight: 700; font-size: var(--fs-lg); text-decoration: none; color: var(--ink); }
header.bar .brand img { display: block; flex: none; }
header.bar nav a { margin-right: 14px; text-decoration: none; font-weight: 600; }
header.bar nav a.active { border-bottom: 3px solid var(--accent); }
button, .btn { font: inherit; min-height: var(--control); padding: 8px 16px; border-radius: var(--pill); border: 1px solid var(--line); background: var(--card); color: var(--ink); cursor: pointer; text-decoration: none; display: inline-flex; align-items: center; justify-content: center; }
button.primary, .btn.primary { background: var(--accent); border-color: var(--accent); color: #fff; font-weight: 600; }
button:disabled { opacity: .5; cursor: not-allowed; }
/* Our own focus ring: browsers otherwise pick their own colour, which can be the device's accent colour */
:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
.mission :focus-visible, .about-gov :focus-visible, .about-vision :focus-visible { outline-color: #fff; }
input[type=text], input[type=search], input[type=number], select { font: inherit; min-height: var(--control); padding: 8px 14px; border: 1px solid var(--line); border-radius: var(--pill); background: #fff; color: var(--ink); }
.muted { color: var(--muted); }
.swatch { display: inline-block; width: 28px; height: 6px; border-radius: 3px; vertical-align: middle; margin-right: 6px; }

/* map page */
/* The map page fills exactly what the browser shows, so nothing is pushed below the screen. dvh follows the phone's
   address bar, which plain vh ignores; browsers without it use the vh line. */
/* The map page's own background is the dark map's land colour, so the space phone browsers leave above and below it
   (Safari's status and toolbar areas) is dark too, not the light page grey */
html.map-html, body.map-page { background: #18222f; }
body.map-page { display: flex; flex-direction: column; height: 100vh; height: 100dvh; overflow: hidden; }
#app { position: relative; flex: 1; min-height: 0; }
/* Map buttons are 44 px wide */
#map .maplibregl-ctrl-group button { width: 44px; height: 44px; }
#map .maplibregl-ctrl-group:has(.maplibregl-ctrl-zoom-in) { background: var(--glass-gray); -webkit-backdrop-filter: var(--blur); backdrop-filter: var(--blur); }
/* Find My Location: a blue circle with a white icon */
#map .maplibregl-ctrl-group:has(.maplibregl-ctrl-geolocate) { background: var(--hero-quiet); -webkit-backdrop-filter: var(--blur); backdrop-filter: var(--blur); border-radius: 50% !important; box-shadow: 0 2px 8px rgba(0, 0, 0, .15); }
#map .maplibregl-ctrl-group .maplibregl-ctrl-geolocate { border-radius: 50% !important; }
.map-page #map .maplibregl-ctrl-group .maplibregl-ctrl-geolocate { width: 52px; height: 52px; }  /* as wide as the zoom buttons below */
#map .maplibregl-ctrl-group .maplibregl-ctrl-geolocate:not(:disabled):hover { background-color: #345a91; }
#map .maplibregl-ctrl-geolocate .maplibregl-ctrl-icon { filter: brightness(0) invert(1); }
/* Map credits: small see-through text along the bottom of the map */
#map .maplibregl-ctrl-bottom-left { right: 0; }
#map .maplibregl-ctrl-bottom-left .maplibregl-ctrl-attrib { float: none; margin: 0; padding: 2px 8px; background: rgba(255,255,255,.55); -webkit-backdrop-filter: var(--blur); backdrop-filter: var(--blur); text-align: center; }  /* the same layer as the secondary menus keeps map labels from tangling with the words */
#map .maplibregl-ctrl-attrib-inner { font-size: var(--fs-2xs); line-height: 12px; color: rgba(29, 36, 51, .7); }
#map .maplibregl-ctrl-attrib-inner a { color: inherit; }
#map { position: absolute; inset: 0; }
/* Top row: the logo, then search on the map page (the page name elsewhere), then the profile picture on the right */
/* The logo and profile sit 12px from the top and sides on every page, the map included */
header.top { display: flex; align-items: center; gap: 8px; padding: 12px; }
.map-page header.top { position: absolute; top: 12px; left: 12px; right: 12px; z-index: 5; align-items: flex-start; padding: 0; pointer-events: none; }
.map-page header.top > * { pointer-events: auto; }
.logo-btn { flex: none; display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; border-radius: 50%;
  background: var(--glass); -webkit-backdrop-filter: var(--blur); backdrop-filter: var(--blur); box-shadow: var(--float-shadow); }
.logo-btn img { display: block; }
.top-name { font-weight: 700; font-size: var(--fs-lg); color: var(--ink); text-decoration: none; }
#searchbox { position: relative; flex: 0 1 360px; min-width: 0; }
.profile { position: relative; margin-left: auto; flex: none; display: flex; }  /* flex: no line box below the button */
/* A profile picture: the animal on the person's colour */
.avatar { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; min-height: 0; padding: 0; flex: none;
  border-radius: 50%; border: 2px solid #fff; background: var(--glass-gray); font-size: 22px; line-height: 1; box-shadow: var(--float-shadow); }
.avatar { --skin: #f3e3c8; --skin-2: #dcc39a; --skin-3: #c4a473; overflow: hidden; }
.avatar svg { display: block; width: 100%; height: 100%; }
.avatar.big { width: 52px; height: 52px; font-size: 26px; }
.avatar.small { width: 26px; height: 26px; font-size: 14px; border-width: 1.5px; box-shadow: 0 1px 3px rgba(0,0,0,.2); }
.profile-menu { position: absolute; right: 0; top: calc(100% + 6px); z-index: 15; width: min(290px, calc(100vw - 24px)); padding: 6px;
  background: var(--glass); -webkit-backdrop-filter: var(--blur); backdrop-filter: var(--blur); border-radius: var(--radius); box-shadow: 0 4px 16px rgba(0,0,0,.2);
  transform: translateY(-6px) scale(.5); transform-origin: 100% 0; opacity: 0; transition: transform .2s ease, opacity .2s ease; }
.profile-menu.open { transform: translateY(0) scale(1); opacity: 1; }
@media (prefers-reduced-motion: reduce) { .profile-menu { transition: none; } }
.profile-head { display: flex; align-items: center; gap: 10px; padding: 8px 8px 12px; margin-bottom: 4px; border-bottom: 1px solid var(--line); }
.profile-head b { display: block; line-height: 1.3; }
.profile-note { margin-top: 2px; font-size: var(--fs-xs); line-height: 1.4; color: var(--muted); }
.profile-menu a { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: var(--radius-sm); color: var(--ink); font-weight: 600; text-decoration: none; }
.profile-menu a:hover { background: rgba(29,36,51,.06); }
.profile-menu a.on { background: var(--hero-soft); }
/* Bottom bar on every page: Map, Insights, Submissions */
.bottom-nav { position: fixed; left: 50%; bottom: 16px; transform: translateX(-50%); z-index: 10; display: flex; gap: 4px; padding: 4px;
  width: min(372px, calc(100% - 24px)); background: var(--glass); -webkit-backdrop-filter: var(--blur); backdrop-filter: var(--blur);
  border-radius: var(--pill); box-shadow: var(--float-shadow); }
.bottom-nav a { position: relative; z-index: 1; flex: 1; display: flex; align-items: center; justify-content: center; gap: 6px;
  min-height: var(--control); border-radius: var(--pill); font-size: var(--fs-sm); font-weight: 600; color: var(--muted); text-decoration: none;
  white-space: nowrap; transition: color .2s; }
.bottom-nav a.on { color: #fff; }
/* The dark pill behind the current page. It's one element, so tapping another page slides it there before the page changes */
.bottom-nav .pill { position: absolute; top: 4px; bottom: 4px; left: 0; border-radius: var(--pill); background: var(--ink);
  transition: transform .26s cubic-bezier(.3, .7, .2, 1), width .26s cubic-bezier(.3, .7, .2, 1); }
@media (prefers-reduced-motion: reduce) { .bottom-nav .pill, .bottom-nav a { transition: none; } }
body[data-page] main.page { padding-bottom: 110px; }  /* clear of the bottom bar */
.welcome-area { margin: 0 0 10px; padding: 8px 12px; border-radius: var(--radius); background: #e8f0fb; color: var(--navy); font-size: var(--fs-sm); }
.step-dots { display: inline-flex; gap: 6px; align-items: center; }
.welcome > .step-dots { margin-bottom: 8px; }
.step-dots i { width: 8px; height: 8px; border-radius: 50%; background: var(--line); }
.step-dots i.on { width: 20px; border-radius: 4px; background: var(--ink); }
.mission-actions { display: flex; flex-wrap: wrap; gap: 10px; }
.mission-actions .primary { flex: 1; min-width: 140px; }
.welcome-key { background: var(--bg); border-radius: var(--radius); padding: 10px 12px; margin: 0 0 8px; }
.welcome-key .key-row { display: flex; flex-wrap: wrap; gap: 4px 16px; margin-top: 6px; }
.welcome-key .key-item { display: inline-flex; align-items: center; gap: 6px; }
.welcome-key .key-note { margin-top: 6px; font-size: var(--fs-xs); }
.key-scale { display: inline-flex; gap: 2px; }
.key-scale i { width: 16px; height: 8px; border-radius: 2px; }
.key-none { width: 26px; height: 3px; background: repeating-linear-gradient(90deg, var(--none) 0 4px, transparent 4px 7px); }
.key-pin { display: inline-flex; align-items: center; justify-content: center; width: 20px; height: 20px; border-radius: 50%; border: 2px solid; font-size: 10px; }
.key-pin.problem { background: #fde2e1; border-color: #c0392b; }
.key-pin.suggestion { background: #dcf3e4; border-color: var(--green); }
#searchbox input { width: 100%; border-radius: var(--pill); border: 0; background: var(--glass); -webkit-backdrop-filter: var(--blur); backdrop-filter: var(--blur); box-shadow: 0 2px 8px rgba(0,0,0,.15); padding-left: 40px; }
#searchbox .search-icon { position: absolute; z-index: 1; left: 14px; top: 12px; display: flex; color: var(--muted); pointer-events: none; }
#results { background: var(--glass); -webkit-backdrop-filter: var(--blur); backdrop-filter: var(--blur); border-radius: var(--radius); margin-top: 4px; box-shadow: 0 2px 8px rgba(0,0,0,.2); max-height: 50vh; overflow: auto; }
#results button { width: 100%; text-align: left; background: transparent; border: 0; border-bottom: 1px solid var(--line); border-radius: 0; display: block; }
#results small { display: block; color: var(--muted); }
#hint { position: absolute; bottom: 124px; left: 50%; transform: translateX(-50%); z-index: 4; background: #fff; padding: 8px 12px; border-radius: var(--radius); box-shadow: 0 2px 8px rgba(0,0,0,.15); max-width: min(360px, calc(100% - 24px)); }
.maplibregl-map, .maplibregl-ctrl, .maplibregl-ctrl-attrib { font-family: inherit; }
/* View switcher: City / Barangay / Street */
/* The one credit always on the main map, as OpenStreetMap's licence asks; the How to Use card has the full list */
#osmCredit { position: absolute; left: 0; bottom: 0; z-index: 3; padding: 1px 6px; font-size: var(--fs-2xs); line-height: 12px; color: rgba(29, 36, 51, .7);
  background: rgba(255,255,255,.55); -webkit-backdrop-filter: var(--blur); backdrop-filter: var(--blur); border-top-right-radius: 6px; text-decoration: none; }
/* Zoom, above the bottom bar: + and −, with the current level's name between them. The name opens City, Barangay
   and Street to its left */
#zoomCtl { position: absolute; right: 12px; bottom: 78px; z-index: 4; display: flex; flex-direction: column; align-items: center; gap: 2px;
  width: 52px; padding: 4px; background: var(--glass-gray); -webkit-backdrop-filter: var(--blur); backdrop-filter: var(--blur);
  border-radius: var(--pill); box-shadow: var(--float-shadow); }
#zoomIn, #zoomOut { width: 44px; min-height: var(--control); padding: 0; border: 0; border-radius: 50%; background: transparent;
  font-size: 24px; font-weight: 500; line-height: 1; color: var(--ink); }
#zoomIn:hover, #zoomOut:hover { background: rgba(255,255,255,.6); }
#level { position: relative; width: 100%; }
#levelBtn { width: 100%; min-height: var(--control-sm); padding: 2px 0; border: 0; border-radius: var(--pill); background: rgba(255,255,255,.7);
  font-size: var(--fs-2xs); font-weight: 700; color: var(--ink); letter-spacing: .02em; }
#views { position: absolute; right: calc(100% + 10px); top: 50%; display: flex; flex-direction: column; gap: 2px; padding: 4px; width: 110px;
  background: var(--glass); -webkit-backdrop-filter: var(--blur); backdrop-filter: var(--blur); border-radius: var(--radius-lg); box-shadow: 0 4px 16px rgba(0,0,0,.2);
  transform: translateY(-50%) scale(.5); transform-origin: 100% 50%; opacity: 0; transition: transform .2s ease, opacity .2s ease; }
#views.open { transform: translateY(-50%) scale(1); opacity: 1; }
@media (prefers-reduced-motion: reduce) { #views { transition: none; } }
#views button { min-height: var(--control-md); padding: 4px 8px; border: 0; border-radius: var(--pill); background: transparent;
  font-size: var(--fs-sm); font-weight: 600; color: var(--muted); white-space: nowrap; }
#views button.on { background: var(--hero); color: #fff; }
/* Find My Location sits above zoom */
.map-page #map .maplibregl-ctrl-bottom-right { bottom: 206px; }
.map-page #map .maplibregl-ctrl-bottom-right .maplibregl-ctrl { margin-right: 12px; }
/* Layers and How to Use: a matching pair under the search box, which covers them with its results. Layers' menu opens downwards */
#mapTools { position: absolute; top: 64px; left: 64px; z-index: 4; display: flex; gap: 6px; }
#layers { position: relative; }
#layersBtn, #infoBtn { min-height: var(--control-md); padding: 4px 14px; gap: 8px; border: 0; border-radius: var(--pill); background: var(--glass-gray); -webkit-backdrop-filter: var(--blur); backdrop-filter: var(--blur); color: var(--muted); font-size: var(--fs-sm); font-weight: 600;
  box-shadow: var(--float-shadow); white-space: nowrap; }  /* grey: less important than the search box above them */
.layer-icons { display: inline-flex; gap: 2px; font-size: var(--fs-sm); }
.layer-icons i { font-style: normal; transition: opacity .2s; }
.layer-icons i.off { opacity: .25; filter: grayscale(1); }
#layersMenu { position: absolute; left: 0; top: calc(100% + 6px); display: flex; flex-direction: column;
  min-width: 190px; padding: 4px; background: var(--glass); -webkit-backdrop-filter: var(--blur); backdrop-filter: var(--blur); border-radius: var(--radius); box-shadow: 0 4px 16px rgba(0,0,0,.22);
  transform: translateY(-6px) scale(.5); transform-origin: 0 0; opacity: 0; transition: transform .2s ease, opacity .2s ease; }
#layersMenu.open { transform: translateY(0) scale(1); opacity: 1; }
@media (prefers-reduced-motion: reduce) { #layersMenu { transition: none; } }
#layersMenu button { justify-content: flex-start; gap: 10px; min-height: var(--control); padding: 6px 10px; border: 0; background: transparent;
  font-size: var(--fs-sm); font-weight: 600; color: var(--muted); }
#layersMenu button::after { content: ""; margin-left: auto; width: 18px; height: 18px; border-radius: 5px; border: 2px solid var(--line); }
#layersMenu button[aria-pressed="true"] { color: var(--ink); }
#layersMenu button[aria-pressed="true"]::after { content: "✓"; border-color: var(--hero); background: var(--hero); color: #fff;
  font-size: var(--fs-xs); line-height: 14px; text-align: center; }
.maplibregl-ctrl-group { border-radius: var(--radius) !important; }
.maplibregl-ctrl-group button:first-child { border-radius: var(--radius) var(--radius) 0 0 !important; }
.maplibregl-ctrl-group button:last-child { border-radius: 0 0 var(--radius) var(--radius) !important; }
.maplibregl-ctrl-group button:only-child { border-radius: var(--radius) !important; }
.area-label { text-align: center; color: var(--ink); line-height: 1.25; white-space: nowrap; cursor: pointer;
  text-shadow: 0 0 2px #fff, 0 0 2px #fff, 0 0 4px #fff, 0 0 4px #fff; }
.area-label b { display: block; font-size: var(--fs-xs); }
.area-label span { font-size: var(--fs-xs); }
.area-label.cities b { font-size: var(--fs-sm); }
#panel { position: absolute; right: 12px; top: 64px; width: 340px; max-height: max(240px, calc(100% - 344px)); overflow: auto; z-index: 6; background: #fff; border-radius: var(--radius); box-shadow: 0 4px 16px rgba(0,0,0,.25); padding: 16px; }
/* Wider screens: the panel ends 12 px above Find My Location and zoom, which stay put; a long panel scrolls inside */
#panel h2 { margin: 0 0 2px; font-size: var(--fs-xl); }
#panel .close { position: absolute; top: 8px; right: 8px; min-height: var(--control-md); padding: 2px 10px; }
.address-line { display: flex; align-items: flex-start; gap: 8px; margin: 8px 0; font-size: var(--fs-sm); line-height: 1.4; color: var(--muted); }
.address-text { flex: 1; user-select: all; }
.copy-mini { min-height: var(--control-sm); padding: 2px 10px; font-size: var(--fs-xs); font-weight: 600; color: var(--accent); flex: none; }
.copy-mini.copied { color: var(--accent); border-color: var(--accent); }
.coord-pin { width: 14px; height: 14px; border-radius: var(--radius); background: var(--accent); border: 3px solid #fff;
  box-shadow: 0 1px 4px rgba(0,0,0,.4); pointer-events: none; }
.badge { display: inline-block; padding: 2px 10px; border-radius: var(--radius); color: #fff; font-weight: 700; margin: 8px 0; }
.bar-row { display: grid; grid-template-columns: 110px 1fr 36px; gap: 8px; align-items: center; font-size: var(--fs-sm); margin: 3px 0; }
.bar-track { background: #e9ecf1; height: 10px; border-radius: 5px; overflow: hidden; }
.bar-fill { height: 100%; }
@media (max-width: 700px) {
  #panel { right: 0; left: 0; top: auto; bottom: 0; width: auto; max-height: 60%; border-radius: var(--radius) var(--radius) 0 0; }
  /* The bottom bar keeps the same 12 px margin as the sides, at the same height on every page (Safari keeps the page
     above its own toolbar). On the map, the credit sits just above the bar */
  .bottom-nav { bottom: 12px; }
  #zoomCtl { bottom: 74px; }
  .map-page #map .maplibregl-ctrl-bottom-right { bottom: 202px; }
  #osmCredit { bottom: 70px; left: 12px; border-radius: var(--radius-sm); }
  #hint { bottom: 140px; }
  #panel { padding-bottom: 44px; z-index: 12; }  /* a sheet over the bottom bar */
}

/* grade form */
#overlay { position: fixed; inset: 0; background: rgba(20,25,40,.55); z-index: 20; display: flex; align-items: flex-start; justify-content: center; overflow: auto; padding: 16px; }
#sheet { background: #fff; border-radius: var(--radius); width: min(560px, 100%); padding: 20px; margin: auto; }
#sheet h2 { margin-top: 0; }
fieldset.q { position: relative; border: 1px solid var(--line); border-radius: var(--radius); margin: 12px 0; padding: 10px 12px; }
fieldset.q legend { font-weight: 700; padding: 0 6px; }
fieldset.q.disabled { opacity: .5; }
.q-emoji { margin-right: 6px; }
.choices { display: grid; grid-template-columns: repeat(5, 1fr); gap: 6px; margin: 8px 0 2px; }
.choices button { padding: 4px; }
/* 1-5 use the grade colours: tinted until chosen, solid when chosen */
.choices .score { flex-direction: column; gap: 0; min-height: 54px; border-radius: var(--radius); border: 2px solid var(--c);
  background: color-mix(in srgb, var(--c) 12%, #fff); }
.choices .score .e { font-size: 20px; line-height: 1.1; }
.choices .score .n { font-weight: 700; font-size: var(--fs-sm); }
.choices .score.on { background: var(--c); color: #fff; box-shadow: 0 0 0 2px #fff inset; }
.choices .score.light.on { color: var(--ink); }
.scale-ends { display: grid; grid-template-columns: 1fr 1fr; font-size: var(--fs-xs); color: var(--muted); }
.scale-ends span:last-child { text-align: right; }
.anchor { font-size: var(--fs-sm); color: var(--muted); min-height: 21px; margin-top: 4px; }
.anchor.chosen { color: var(--ink); border-left: 4px solid var(--c); padding-left: 8px; border-radius: 0; }
.info-icon { display: inline-block; width: 18px; height: 18px; margin-left: 4px; border-radius: var(--radius);
  background: var(--muted); color: #fff; font-size: var(--fs-xs); font-weight: 700; line-height: 18px; text-align: center; cursor: help; vertical-align: 1px; }
.info-pop { display: none; position: absolute; left: 8px; right: 8px; top: 14px; z-index: 30; padding: 10px;  /* spans the question box */
  background: #fff; color: var(--ink); border-radius: var(--radius); box-shadow: 0 4px 16px rgba(0,0,0,.25);
  font: 400 13px/1.4 Helvetica, Arial, sans-serif; text-align: left; cursor: auto; }
.info-pop::before { content: ""; position: absolute; left: 0; right: 0; top: -24px; height: 24px; }  /* keeps hover across the gap */
.info-icon:hover .info-pop, .info-icon:focus-within .info-pop, .info-icon:focus .info-pop { display: block; }
.guide-row { display: grid; grid-template-columns: 52px 1fr; gap: 8px; align-items: start; margin: 4px 0; }
.guide-num { color: #fff; font-weight: 700; text-align: center; border-radius: var(--radius); padding: 1px 0; white-space: nowrap; }
.seg { display: flex; gap: 8px; }
.seg button.on { background: var(--hero); color: #fff; border-color: var(--hero); }
.hp { position: absolute; left: -9999px; }
.error { color: #a32020; margin: 8px 0; }

/* list pages */
main.page { max-width: 1000px; margin: 0 auto; padding: 16px; }
.filters { display: flex; flex-wrap: wrap; gap: 8px; margin: 12px 0; }
.tabs button.on { background: var(--hero); color: #fff; }
table.data { width: 100%; border-collapse: collapse; background: #fff; border-radius: var(--radius); overflow: hidden; font-size: var(--fs-sm); }
table.data th, table.data td { padding: 8px 10px; border-bottom: 1px solid var(--line); text-align: left; vertical-align: top; }
table.data th { background: #eef0f4; }
.pill { color: #fff; border-radius: var(--radius); padding: 1px 9px; font-weight: 700; white-space: nowrap; }
.scroll { overflow-x: auto; }

/* insights: city picker and city report */
main.page.wide { max-width: 1280px; }
.city-search { width: min(360px, 100%); margin-top: 6px; }
.region-head { font-size: var(--fs-lg); margin: 22px 0 0; }
.region-head .muted { font-size: var(--fs-sm); font-weight: 400; }
.city-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 14px; margin-top: 16px; }
.city-tile { position: relative; display: flex; flex-direction: column; justify-content: flex-end; min-height: 150px; padding: 14px;
  border-radius: var(--radius); color: #fff; text-decoration: none; overflow: hidden; box-shadow: 0 2px 8px rgba(0,0,0,.12); background-color: #1d2433;
  transition: transform .12s, box-shadow .12s; }
.city-tile:hover, .city-tile:focus-within { transform: translateY(-2px); box-shadow: 0 6px 16px rgba(0,0,0,.2); }
.city-tile.big:hover { transform: none; box-shadow: 0 2px 8px rgba(0,0,0,.12); }
.city-tile .open { color: inherit; text-decoration: none; display: flex; flex-direction: column; }
.city-tile .open::after { content: ""; position: absolute; inset: 0; }  /* the whole tile opens the city */
.credit-info { position: absolute; top: 8px; right: 8px; z-index: 2; width: 20px; height: 20px; border-radius: var(--radius);
  background: rgba(0,0,0,.5); color: #fff; font-size: var(--fs-sm); font-weight: 700; line-height: 20px; text-align: center; cursor: help; }
.credit-pop { display: none; position: absolute; top: 20px; right: 0; width: max-content; max-width: 200px; padding: 6px 10px;
  margin-top: 4px; background: #fff; color: var(--ink); border-radius: var(--radius); box-shadow: 0 2px 8px rgba(0,0,0,.25);
  font: 12px/1.4 Helvetica, Arial, sans-serif; text-align: left; cursor: auto; }
.credit-pop::before { content: ""; position: absolute; left: 0; right: 0; top: -8px; height: 8px; }  /* keeps hover across the gap */
.credit-pop a { color: var(--accent); }
.credit-info:hover .credit-pop, .credit-info:focus-within .credit-pop { display: block; }
.panel-tile { min-height: 130px; margin: 28px 0 12px; }
.panel-tile .name { font-size: var(--fs-2xl); }
.headline.in-panel { padding: 0; box-shadow: none; }
.headline.in-panel .big-score .num { font-size: var(--fs-display-sm); }
.headline.in-panel .stat { font-size: var(--fs-lg); }
.headline.in-panel .sub { font-size: var(--fs-sm); }
.panel-actions { display: flex; gap: 8px; margin-top: 14px; }
.panel-actions .primary { flex: 1; }
.city-tile .name { font-size: var(--fs-xl); font-weight: 700; line-height: 1.15; text-shadow: 0 1px 3px rgba(0,0,0,.4); }
.city-tile .meta { font-size: var(--fs-sm); opacity: .92; margin-top: 4px; }
.city-tile.big { min-height: 180px; }
.city-tile.big .name { font-size: var(--fs-h1); }
.back { margin: 0 0 12px; }
#report.street-mode .city-head { display: none; }
#report.street-mode .city-body { grid-template-columns: minmax(0, 1fr); }  /* minmax: a wide table can't widen the map */
#report.street-mode .city-map { position: relative; top: 0; height: 380px; max-height: 50vh; order: -1; }
#report.street-mode .street-view { max-width: 760px; }
@media (min-width: 1000px) {
  #report.street-mode .street-view { max-width: none; display: grid; grid-template-columns: minmax(0, 440px) minmax(0, 1fr);
    gap: 40px; align-items: start; }
  #report.street-mode .street-grades h3 { margin-top: 0; }
}
.street-view .street-title { margin: 0 0 2px; }
.insight-filters:not(.show-more) .extra { display: none; }
.more-btn { align-self: flex-end; min-height: var(--control); gap: 6px; font-weight: 600; }
.more-btn[aria-expanded="true"] { background: var(--ink); color: #fff; border-color: var(--ink); }
.more-count { display: inline-block; min-width: 20px; padding: 0 6px; border-radius: var(--radius-sm); background: var(--accent); color: #fff;
  font-size: var(--fs-xs); line-height: 20px; }
.view-switch { display: flex; gap: 4px; padding: 4px; margin: 0 0 12px; width: min(420px, 100%); background: #fff; border-radius: var(--pill);
  box-shadow: 0 2px 8px rgba(0,0,0,.08); }
.view-switch button { flex: 1; min-width: 0; min-height: var(--control-md); padding: 4px 6px; gap: 5px; border: 0; background: transparent; font-size: var(--fs-sm);
  font-weight: 600; color: var(--muted); white-space: nowrap; }
.view-switch button.on { background: var(--hero); color: #fff; }
#report.street-mode .view-switch { display: none; }
.report-kinds { display: flex; flex-wrap: wrap; gap: 4px 14px; }
.report-count { display: inline-block; min-width: 26px; padding: 1px 8px; border-radius: var(--pill); color: #fff; text-align: center; font-size: var(--fs-sm); }
.trend-svg .bar { cursor: pointer; }
.street-totals { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin: 14px 0; max-width: 520px; }
.street-total { background: #fff; border: 1px solid var(--line); border-radius: var(--radius); padding: 10px 12px; font-weight: 600; }
.street-total .n { font-size: var(--fs-xl); font-weight: 700; }
.street-total.on { border-color: var(--hero); }
/* grade over time */
.headline .updated { margin-top: -2px; }
.trend { margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--line); }
.trend-head { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 4px 10px; font-size: var(--fs-sm);
  font-weight: 600; color: var(--muted); margin-bottom: 4px; }
.period-toggle { display: inline-flex; gap: 2px; padding: 3px; border-radius: var(--pill); background: var(--bg); }
.period-toggle button { min-height: var(--control-sm); padding: 2px 10px; border: 0; background: transparent; font-size: var(--fs-xs); font-weight: 600; color: var(--muted); }
.period-toggle button[aria-pressed="true"] { background: var(--hero); color: #fff; }
.trend-plot { position: relative; }
.trend-svg { display: block; max-width: 100%; height: auto; overflow: visible; }
.trend-svg .grid { stroke: #e9ecf1; stroke-width: 1; }
.trend-svg .axis { fill: var(--muted); font-size: var(--fs-2xs); }
.trend-svg .trend-line { fill: none; stroke: var(--accent); stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; }
.trend-svg .trend-dot { fill: var(--accent); stroke: #fff; stroke-width: 2; pointer-events: none; }
.trend-svg .cross { stroke: var(--muted); stroke-width: 1; stroke-dasharray: 3 3; pointer-events: none; }
.trend-svg .hit { fill: transparent; cursor: crosshair; }
.trend-tip { position: absolute; z-index: 2; pointer-events: none; background: #fff; border: 1px solid var(--line); border-radius: var(--radius);
  padding: 6px 10px; font-size: var(--fs-sm); line-height: 1.4; box-shadow: 0 4px 12px rgba(0,0,0,.12); white-space: nowrap; }

.street-view .street-grade { display: flex; align-items: center; flex-wrap: wrap; gap: 6px 12px; margin: 12px 0 8px; }
.street-view .bar-row { max-width: 420px; grid-template-columns: 150px 1fr 36px; }
.street-view h3 { margin: 20px 0 8px; }
.city-head { display: grid; grid-template-columns: minmax(260px, 1fr) 2fr; gap: 20px; align-items: stretch; }
.headline { display: flex; flex-direction: column; justify-content: center; gap: 6px; background: #fff; border-radius: var(--radius); padding: 16px 20px;
  box-shadow: 0 2px 8px rgba(0,0,0,.06); }
.big-score { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.big-score .num { font-size: var(--fs-display); font-weight: 700; line-height: 1; }
.big-score .of { font-size: var(--fs-lg); color: var(--muted); }
.headline .stat { font-size: var(--fs-xl); }
.headline .sub { font-size: var(--fs-sm); }
.toolbar { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 10px 14px; margin: 18px 0 12px; }
.toolbar label { display: flex; flex-direction: column; font-size: var(--fs-xs); font-weight: 600; color: var(--muted); gap: 2px; }
.toolbar .tabs button.on { background: var(--hero); color: #fff; border-color: var(--hero); }
.city-body { display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); gap: 16px; align-items: start; }
.city-map { position: sticky; top: 12px; height: calc(100vh - 24px); max-height: 600px; border-radius: var(--radius); overflow: hidden;
  box-shadow: 0 2px 8px rgba(0,0,0,.1); }
.city-map #map { position: absolute; inset: 0; }
#streets tr[data-key] { cursor: pointer; }
#streets tr[data-key]:hover td { background: #f3f6fb; }
#streets tr.on td { background: #e3ecfa; }
#streets.loading { opacity: .5; }
.pager { display: flex; align-items: center; gap: 8px; margin: 10px 0; }
.pager span { margin-right: auto; }
@media (max-width: 1200px) { .hide-md { display: none; } }
@media (max-width: 900px) {
  .city-head { grid-template-columns: 1fr; }
  .city-body { grid-template-columns: minmax(0, 1fr); }
  .city-map { position: relative; top: 0; height: 320px; order: -1; }
  .hide-sm { display: none; }
  .big-score .num { font-size: var(--fs-display-sm); }
}
@media (max-width: 500px) {
  .city-grid { grid-template-columns: 1fr 1fr; gap: 10px; }
  .city-tile { min-height: 120px; padding: 10px; }
  .city-tile .name { font-size: var(--fs-lg); }
  .city-tile .meta { font-size: var(--fs-xs); }
  .toolbar label, .toolbar select, .toolbar input { width: 100%; }
}

/* submissions: public history of grades */
.chips { white-space: nowrap; }
/* grade history: the Show More cell is for phones only */
.history .h-phone { display: none; }
@media (max-width: 700px) {
  .history, .history tbody { display: block; }
  .history tr:first-child { display: none; }  /* column headings */
  /* a card per grade: street (and its area) with the date on the right, the scores, then Show More */
  table.history tr { display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "street date" "scores scores" "more more";
    gap: 6px 12px; padding: 12px 14px; border-bottom: 1px solid var(--line); }
  table.history td { display: block; padding: 0; border: 0; }
  .history .h-wide { display: none; }
  .history .h-street { grid-area: street; font-weight: 600; }
  .history .h-street .small { font-weight: 400; }
  .history .h-date { grid-area: date; color: var(--muted); font-size: var(--fs-sm); text-align: right; }
  .history tr:not(:has(.h-street)) .h-date { grid-column: 1 / -1; text-align: left; }  /* on a street's own page */
  .history .h-scores { grid-area: scores; white-space: normal; }
  .history .h-phone { display: block; grid-area: more; }
  .history .h-phone summary { width: fit-content; color: var(--accent); font-size: var(--fs-sm); font-weight: 600; cursor: pointer;
    border-radius: var(--radius-sm); }
  .history .h-phone summary:focus:not(:focus-visible) { outline: none; }  /* ring for keyboards only, not taps */
  .history .h-phone details { font-size: var(--fs-sm); }
  .history .h-phone details[open] summary { margin-bottom: 4px; }
  /* filters: search across the top, city and barangay side by side, the checkbox under them */
  .history-filters { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
  .history-filters label { width: auto; min-width: 0; }
  .history-filters select, .history-filters input[type=search] { width: 100%; min-width: 0; }
  .history-filters .f-search, .history-filters .f-mine { grid-column: 1 / -1; }
  /* Insights filters: two even columns of smaller controls; the sort buttons share the first row with Show */
  .insight-filters { display: grid; grid-template-columns: 1fr 1fr; gap: 8px 10px; }
  .insight-filters label { width: auto; min-width: 0; font-size: var(--fs-xs); }
  .insight-filters select, .insight-filters input[type=search] { width: 100%; min-width: 0; min-height: var(--control); padding: 6px 10px; font-size: var(--fs-sm); }
  .insight-filters .more-btn { min-height: var(--control); font-size: var(--fs-sm); }
  .insight-filters .tabs { align-self: end; gap: 0; border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; background: #fff; }
  .insight-filters .tabs button { flex: 1; min-width: 0; min-height: var(--control-md); padding: 4px 4px; border: 0; border-radius: 0; font-size: var(--fs-xs);
    font-weight: 600; white-space: nowrap; letter-spacing: -.1px; }
}
@media (max-width: 420px) {
  .insight-filters .tabs button { font-size: var(--fs-xs); padding: 4px 2px; }
}
.chip { display: inline-block; min-width: 40px; margin: 1px 2px 1px 0; padding: 1px 6px; border-radius: var(--radius);
  color: #fff; font-size: var(--fs-xs); font-weight: 700; text-align: center; }
.chip.empty { background: #eef0f4; color: var(--muted); font-weight: 400; }
.nowrap { white-space: nowrap; }
.small { font-size: var(--fs-sm); }
.toolbar label.check { flex-direction: row; align-items: center; gap: 8px; color: var(--ink); font-weight: 400; font-size: var(--fs-sm); min-height: var(--control); }
.toolbar label.check input { width: 20px; height: 20px; }
.piece-note { margin: 0 0 12px; padding: 10px 12px; background: #fff; border-radius: var(--radius); box-shadow: 0 2px 8px rgba(0,0,0,.06); }

/* grading: one card per question */
#sheet { position: relative; }
.step-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.close-x { min-height: var(--control-md); padding: 0 10px; font-size: 20px; line-height: 1; flex: none; }
.progress { height: 6px; background: #e9ecf1; border-radius: var(--radius); overflow: hidden; margin: 10px 0 4px; }
.progress span { display: block; height: 100%; background: var(--accent); transition: width .25s; }
.step-count { margin-bottom: 8px; }
.card-body { position: relative; min-height: 260px; }  /* the i guide spans the card */
.card-body .info-pop { top: 40px; }
/* A new card slides in from the side it's coming from */
.card-body.slide-next { animation: card-next .28s ease-out; }
.card-body.slide-back { animation: card-back .28s ease-out; }
@keyframes card-next { from { opacity: 0; transform: translateX(20px); } }
@keyframes card-back { from { opacity: 0; transform: translateX(-20px); } }
@media (prefers-reduced-motion: reduce) { .card-body.slide-next, .card-body.slide-back { animation: none; } .progress span { transition: none; } }
.card-title { margin: 6px 0 2px; font-size: var(--fs-xl); }
/* The question and the score meaning each keep a set height, so the score buttons stay put from card to card */
.card-question { min-height: 104px; margin-top: 10px; }
.card-ask { font-size: var(--fs-lg); font-weight: 600; margin: 0 0 4px; }
.card-hint { font-size: var(--fs-sm); color: var(--muted); margin: 0; }
.card-body .choices .score { min-height: 64px; }
.card-body .choices .score .e { font-size: 24px; }
.anchor-slot { min-height: 66px; }
@media (max-width: 420px) { .anchor-slot { min-height: 88px; } }
@media (max-width: 360px) { .card-question { min-height: 124px; } }
#next[hidden] { display: none; }
.review-row { display: grid; grid-template-columns: 1fr auto auto; gap: 10px; align-items: center; padding: 8px 0;
  border-bottom: 1px solid var(--line); font-size: var(--fs-sm); }
.review-row .chip { min-width: 0; }
.link-btn { min-height: 0; padding: 2px 6px; border: 0; background: none; color: var(--accent); font-size: var(--fs-sm); text-decoration: underline; }
.loc-check { display: flex; gap: 8px; align-items: flex-start; margin: 14px 0 4px; font-size: var(--fs-sm); }
.loc-check input { width: 20px; height: 20px; flex: none; }
/* reports and suggestions */
.report-group { font-size: var(--fs-sm); margin: 14px 0 6px; }
.report-choices { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.report-choice { min-height: 72px; flex-direction: column; gap: 4px; font-weight: 600; border-radius: var(--radius); }
.report-choice span { font-size: 26px; line-height: 1; }
.report-choice.on { background: var(--hero); border-color: var(--hero); color: #fff; }
.report-list { margin: 4px 0 12px; padding: 10px 12px; background: var(--bg); border-radius: var(--radius); }
.report-list-head { font-weight: 600; font-size: var(--fs-sm); margin-bottom: 6px; }
.report-line { display: flex; gap: 10px; align-items: flex-start; padding: 4px 0; font-size: var(--fs-sm); }
.report-line > span:first-child { font-size: 20px; line-height: 1.2; }
.report-pin { min-height: 0; width: 32px; height: 32px; padding: 0; border-radius: 50%; border: 2px solid #fff; font-size: 17px;
  box-shadow: 0 2px 6px rgba(0,0,0,.35); position: relative; }
.report-pin.problem { background: #fde2e1; border-color: #c0392b; }
.report-pin.suggestion { background: #dcf3e4; border-color: var(--green); }
.report-pin.cluster { width: 34px; height: 34px; font-size: 15px; font-weight: 700; color: #fff; }
.report-pin.cluster.problem { background: #c0392b; border-color: #fff; }
.report-pin.cluster.suggestion { background: var(--green); border-color: #fff; }
.report-pin.cluster.mixed, .area-badge.mixed { border: 3px solid transparent;  /* the ring shows the share of problems and suggestions */
  background: linear-gradient(var(--ink), var(--ink)) padding-box, conic-gradient(#c0392b 0 var(--problem-share), #2fa866 0) border-box; }
.area-badge { position: absolute; top: -3px; left: 100%; margin-left: 3px; min-height: 0; min-width: 22px; height: 22px; padding: 0 6px;
  border-radius: var(--pill); border: 2px solid #fff; color: #fff; font-size: var(--fs-xs); font-weight: 700; line-height: 1;
  box-shadow: 0 1px 4px rgba(0,0,0,.35); text-shadow: none; }  /* sits beside the label, clear of its name (markers are positioned) */
.area-badge.on-left { left: auto; right: 100%; margin: 0 3px 0 0; }
.area-badge.problem { background: #c0392b; }
.area-badge.suggestion { background: var(--green); }
.grades-off .area-label span { display: none; }  /* grades hidden: names only */
.report-pin b { position: absolute; top: -6px; right: -8px; min-width: 18px; height: 18px; padding: 0 4px; border-radius: var(--pill);
  background: var(--ink); color: #fff; font-size: var(--fs-2xs); line-height: 18px; }
.graded-note { margin: 12px 0; padding: 10px 12px; border-radius: var(--radius); background: #e8f0fb; color: var(--navy); font-size: var(--fs-sm); }
.loc-msg { margin: 4px 0 0 28px; font-size: var(--fs-sm); color: var(--muted); }
/* Welcome pages. The second has a fixed size: its top and button stay put and the middle scrolls. The first is only as
   tall as its text. The heights leave room for iPhone Safari's floating address bar. */
/* One type scale: a 20 px title, 14 px for everything else (bold for section headings), 12 px for side notes. */
.welcome { display: flex; flex-direction: column; height: min(620px, calc(100vh - 112px)); height: min(620px, calc(100dvh - 112px));
  font-size: var(--fs-sm); line-height: 1.45; }
.welcome.mission { height: auto; max-height: min(760px, calc(100vh - 112px)); max-height: min(760px, calc(100dvh - 112px)); }  /* room for the animation */
.welcome.resizing { transition: height .3s ease; }
.welcome.resizing .welcome-body { overflow: hidden; }
.welcome-body { flex: 1; min-height: 0; overflow-y: auto; -webkit-overflow-scrolling: touch; }
.welcome.mission .welcome-body { flex: 0 1 auto; }
/* The mission card matches the vision block on the About page */
#sheet { transition: background-color .3s ease; }
#sheet:has(> .welcome.mission) { background: var(--navy); color: #fff; }
.mission p { color: #dfe3ea; }
.mission .small { color: var(--sky); }
/* The Terms on the first welcome card: what scores are, and that using the site means agreeing */
.mission-terms { margin-top: 12px; padding: 10px 12px; border-radius: var(--radius); background: rgba(255,255,255,.1); font-size: var(--fs-sm); }
.mission .mission-terms p { margin: 0 0 4px; color: #fff; }
.mission-terms a { color: var(--sky); font-weight: 600; }
.mission .step-dots i { background: rgba(255,255,255,.35); }
.mission .step-dots i.on { background: #fff; }
.mission .welcome-foot { border-top-color: rgba(255,255,255,.25); }
.mission #mNext { background: #fff; border-color: #fff; color: var(--ink); }
.mission .welcome-foot .btn { background: transparent; border-color: #fff; color: #fff; }
.welcome-foot { flex: none; padding-top: 12px; margin-top: 8px; border-top: 1px solid var(--line); }
.welcome .card-title { margin: 0 0 6px; font-size: var(--fs-xl); line-height: 1.25; }
.card-title.with-logo { display: flex; align-items: center; gap: 6px; }
.step-head:has(.with-logo) { gap: 8px; }  /* keeps the title on one line beside the close button on most phones */
.card-title.with-logo img { flex: none; }
.welcome-body > p { margin: 0 0 10px; }
.welcome .small { font-size: var(--fs-xs); }
.welcome-privacy { background: var(--bg); border-radius: var(--radius); padding: 10px 12px; margin: 0 0 4px; }
.welcome-privacy p { margin: 4px 0; }
.welcome-credits { background: var(--bg); border-radius: var(--radius); padding: 10px 12px; margin: 8px 0 4px; }
.welcome-credits p { margin: 4px 0; font-size: var(--fs-sm); }
.welcome-steps { list-style: none; padding: 0; margin: 10px 0; display: grid; gap: 8px; }
.welcome-steps li { display: flex; gap: 10px; align-items: flex-start; }
.welcome-steps li > span { font-size: 18px; line-height: 1.2; flex: none; width: 24px; text-align: center; }
.welcome-steps b { display: block; }
.welcome-loc { background: var(--bg); border-radius: var(--radius); padding: 10px 12px; margin: 0 0 8px; }
.welcome-loc p { margin: 4px 0 8px; }
.welcome-loc button { min-height: var(--control-md); padding: 4px 12px; }
.welcome-loc .loc-msg { margin: 8px 0 0; }
.step-nav { display: grid; grid-template-columns: auto 1fr; gap: 8px; margin-top: 4px; padding: 8px 0; background: #fff;
  position: sticky; bottom: 0; }  /* stays on screen when a long card scrolls on a small phone */
.step-nav .primary:disabled { opacity: .45; }
.done-card { text-align: center; padding: 12px 0 4px; }
.done-card button { width: 100%; }
.done-card button + button { margin-top: 8px; }
.done-mark { width: 56px; height: 56px; margin: 0 auto 6px; border-radius: var(--radius); background: var(--accent); color: #fff;
  font-size: 32px; line-height: 56px; font-weight: 700; }
.rating-line { display: flex; align-items: center; flex-wrap: wrap; gap: 6px 12px; margin: 4px 0; }
.see-all { font-size: var(--fs-sm); }

/* privacy and other text pages */
main.prose { max-width: 760px; }
main.prose h2 { font-size: var(--fs-lg); margin: 26px 0 6px; }
main.prose li { margin: 4px 0; }
/* About */
.about section { border-radius: var(--radius); padding: 20px 22px; margin: 20px 0; }
.about-vision { background: var(--navy); color: #fff; margin-top: 0 !important; padding: 28px 24px !important; }
.about-vision h1 { margin: 0 0 6px; font-size: clamp(30px, 6vw, 42px); line-height: 1.12; color: #fff; }
.about-vision p { line-height: 1.6; color: #dfe3ea; }
.about-vision .vision-lead { margin-top: 0; font-size: var(--fs-lg); font-weight: 600; color: var(--sky); }
.about-vision .vision-close { margin: 18px 0 0; padding-top: 16px; border-top: 1px solid rgba(255,255,255,.25); font-size: var(--fs-xl);
  font-weight: 700; line-height: 1.35; color: #fff; }
.about-action, main.prose .about-action h2 { background: #fff; color: var(--accent); }
main.prose .about-action h2, main.prose .about-gov h2, main.prose .about-guide h2 { margin-top: 0; font-size: var(--fs-xl); }
.about-action ol { margin: 10px 0 0; padding-left: 22px; font-size: var(--fs-lg); }
.about-action .about-cta { margin: 16px 0 0; }
.about-action .btn { font-weight: 700; border-color: var(--accent); background: var(--accent); color: #fff; }
.about-action .btn.ghost { background: transparent; color: var(--accent); }
.about-gov { background: var(--accent); color: #fff; }
.about-gov .gov-line { margin: 0 0 8px; font-size: var(--fs-xl); font-weight: 700; line-height: 1.3; }
.about-gov p:last-child { margin-bottom: 0; line-height: 1.55; }
.about-guide { background: var(--sky); color: var(--ink); }
/* How a score is worked out: steps, then the score ranges with their colours */
.about-how { background: #fff; scroll-margin-top: 12px; }
.panel-how { margin: 12px 0 6px; font-size: var(--fs-sm); font-weight: 600; }
main.prose .about-how h2 { margin-top: 0; font-size: var(--fs-xl); }
.about-how ol { margin: 10px 0; padding-left: 22px; }
.about-how li { margin: 8px 0; }
.weight-key { display: grid; gap: 6px; margin: 8px 0; }
.weight-key span { padding: 8px 12px; border-radius: var(--radius-sm); background: var(--bg); font-size: var(--fs-sm); }
.weight-key b { display: block; }
.score-key { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 6px 14px; margin: 6px 0 12px; font-size: var(--fs-sm); }
.score-key span { display: flex; align-items: center; gap: 8px; }
.score-key i { flex: none; width: 22px; height: 12px; border-radius: 4px; }
.score-key b { font-variant-numeric: tabular-nums; }
.about-how p:last-child { margin-bottom: 0; }
.about-guide p:last-child { margin-bottom: 0; line-height: 1.55; }
.about-cta { margin: 28px 0 8px; display: flex; flex-wrap: wrap; gap: 10px; }
@media (max-width: 500px) { header.bar nav a { margin-right: 10px; font-size: var(--fs-sm); } }
.menu-btn { display: none; }
@media (max-width: 700px) {
  header.bar.has-menu { position: relative; justify-content: space-between; z-index: 15; }
  header.bar.has-menu .menu-btn { display: inline-flex; min-height: var(--control); width: 44px; padding: 0; font-size: 20px; }
  /* A small menu under the ☰, on the right */
  header.bar.has-menu nav { display: none; position: absolute; top: calc(100% + 6px); right: 16px; min-width: 170px; padding: 4px;
    background: var(--glass); -webkit-backdrop-filter: var(--blur); backdrop-filter: var(--blur); border-radius: var(--radius); box-shadow: 0 4px 16px rgba(0,0,0,.22); }
  header.bar.has-menu.menu-open nav { display: block; }
  header.bar.has-menu nav a { display: block; margin: 0; padding: 10px 12px; font-size: var(--fs-md); border-bottom: 0; border-radius: var(--radius-sm); }
  header.bar.has-menu nav a.active { border-bottom: 0; background: rgba(31,95,191,.12); }
}

/* My Activity: the person's name and colour, their totals, and a map of the streets they scored */
.me-card { display: flex; align-items: center; gap: 14px; margin: 18px 0 14px; }
.me-card h2 { margin: 0; font-size: var(--fs-xl); }
.me-stats { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 10px; margin-bottom: 14px; }
.me-stat { background: var(--card); border-radius: var(--radius); padding: 12px; box-shadow: 0 1px 4px rgba(0,0,0,.08); }
.me-stat b { display: block; font-size: var(--fs-2xl); line-height: 1.1; }
.me-stat span { font-size: var(--fs-sm); color: var(--muted); }
.me-map { position: relative; height: 460px; border-radius: var(--radius); overflow: hidden; box-shadow: 0 2px 8px rgba(0,0,0,.1); }
.me-map #map { position: absolute; inset: 0; }
.me-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; }
.me-empty { background: var(--card); border-radius: var(--radius); padding: 16px; box-shadow: 0 1px 4px rgba(0,0,0,.08); }
@media (max-width: 800px) { .me-stats { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 500px) { .me-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); } .me-map { height: 360px; } }
.who-dot { display: inline-block; width: 10px; height: 10px; margin-right: 6px; border-radius: 50%; vertical-align: 0; }

/* Top 10 this month on Submissions: two columns of five on wide screens, the first five on phones until asked */
.leaders { background: var(--card); border-radius: var(--radius); padding: 12px 16px; margin: 14px 0 6px; box-shadow: 0 1px 4px rgba(0,0,0,.08); }
.leaders h2 { margin: 0; font-size: var(--fs-lg); }
.leaders .leaders-sub { margin: 2px 0 6px; }
.leaders ol { list-style: none; margin: 0; padding: 0; display: grid; grid-auto-flow: column; grid-template-rows: repeat(5, auto); gap: 0 24px; }
.leader { display: flex; align-items: center; gap: 6px; padding: 6px 0; border-bottom: 1px solid var(--line); min-width: 0; }
.leader .rank { width: 22px; font-weight: 700; color: var(--muted); }
.leader.podium .rank { color: var(--accent); }  /* the top three ranks, ties included */
.leader .avatar { margin-right: 2px; }
.leader-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.leader-n { font-weight: 700; font-variant-numeric: tabular-nums; }
.leader.me { background: var(--hero-soft); margin: 0 -6px; padding: 6px; border-radius: var(--radius-sm); }
.leaders .link-btn { margin-top: 6px; }
.leaders p { margin: 8px 0 0; }
@media (max-width: 700px) {
  .leaders ol { grid-auto-flow: row; grid-template-rows: none; }
  .leaders:not(.all) .leader:nth-child(n+6) { display: none; }
}
@media (min-width: 701px) { #moreLeaders { display: none; } }
.welcome-terms { margin: 8px 2px 0; }
.welcome-loop { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; margin: 2px 0 14px; border-radius: var(--radius); }
.about-art { display: block; width: 100%; height: auto; aspect-ratio: 16 / 7; margin: 0 0 18px; border-radius: var(--radius); }
.results-empty { padding: 10px; }


/* ---------------------------------------------------------------- night: the map's controls and the bottom bar */
/* Everything floating on the dark map takes the night glass. Panels and sheets that open over it stay light */
.map-page :is(header.top, #zoomCtl, #mapTools, #osmCredit) {
  --glass: var(--night-glass); --glass-gray: var(--night-glass); --ink: var(--on-night); --muted: var(--on-night-muted); --line: var(--night-line);
}
.map-page .logo-btn, .map-page .avatar { border-color: var(--night-line); }
.map-page #searchbox input { color: var(--on-night); }
.map-page #searchbox input::placeholder { color: var(--on-night-muted); }
.map-page #results { color: var(--on-night); }
.map-page #zoomIn:hover, .map-page #zoomOut:hover { background: var(--night-raised); }
.map-page #levelBtn { background: var(--night-raised); }
.map-page #views button.on, .map-page #layersMenu button[aria-pressed="true"]::after { background: var(--hero); border-color: var(--hero); color: #fff; }
.map-page #osmCredit { color: var(--on-night-muted); background: rgba(11, 23, 41, .6); }
.map-page #map .maplibregl-ctrl-group:has(.maplibregl-ctrl-zoom-in) { background: var(--night-glass); }
.area-label { color: var(--on-night); text-shadow: 0 0 2px #121b27, 0 0 2px #121b27, 0 0 4px #121b27, 0 0 4px #121b27; }
/* The bottom bar is the deepest navy on every page. Icons and names are white; the current page's icon turns hero blue */
.bottom-nav { background: rgba(11, 23, 41, .8); box-shadow: 0 4px 18px rgba(4, 10, 22, .35); }
.bottom-nav a { color: var(--on-night-muted); }
.bottom-nav a:hover { color: var(--on-night); }
.bottom-nav a.on { color: var(--on-night); }
.bottom-nav .pill { background: var(--night-raised); }
.bottom-nav svg { width: 20px; height: 20px; flex: none; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round;
  transition: stroke .2s; }
.bottom-nav a.on svg { stroke: var(--hero); }
/* Line icons: drawn in the text colour, hero blue when their control is selected or open */
.icon { width: 18px; height: 18px; flex: none; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
#layersBtn, #infoBtn { display: inline-flex; align-items: center; }
#layersBtn[aria-expanded="true"] .icon, #layersMenu button[aria-pressed="true"] .icon { stroke: var(--hero); }
/* Your location dot, in hero blue */
.maplibregl-user-location-dot, .maplibregl-user-location-dot::before { background-color: var(--hero); }
.maplibregl-user-location-accuracy-circle { background-color: var(--hero-soft); }
/* The street and area card slides in rather than appearing: up from the bottom on phones, in with a fade on wider
   screens. index.js adds .open, and hides the card once it has slid out */
#panel { opacity: 0; transform: translateY(14px) scale(.98); transform-origin: 100% 0;
  transition: opacity .22s ease, transform .3s cubic-bezier(.2, .8, .2, 1); }
#panel.open { opacity: 1; transform: none; }
@media (max-width: 700px) {
  #panel { opacity: 1; transform: translateY(100%); transition: transform .3s cubic-bezier(.2, .8, .2, 1); }
  #panel.open { transform: none; }
}
@media (prefers-reduced-motion: reduce) { #panel { transition: none; } }
/* The profile menu is night on every page, like the bottom bar: white name, grey note and links, hero blue for the
   page you're on */
.profile-menu { background: rgba(11, 23, 41, .86); -webkit-backdrop-filter: var(--blur); backdrop-filter: var(--blur); border: 1px solid var(--night-line); box-shadow: 0 8px 28px rgba(4, 10, 22, .45); color: var(--on-night); }
.profile-head { border-bottom-color: var(--night-line); }
.profile-head b { color: var(--on-night); }
.profile-note { color: var(--on-night-muted); }
.profile-menu a { color: var(--on-night-muted); }
.profile-menu a:hover { background: var(--night-raised); color: var(--on-night); }
.profile-menu a.on { background: var(--hero-soft); color: var(--on-night); }
.profile-menu a.on .icon { stroke: var(--hero); }
.profile-menu .avatar { border-color: var(--night-line); }
/* Score a Street: the map's main action, in hero blue, above Find My Location (which is quieter blue) */
#scoreBtn { position: absolute; right: 12px; bottom: 278px; z-index: 4; width: 52px; height: 52px; min-height: 0; padding: 0; border: 0;
  border-radius: 50%; background: var(--hero); color: #fff; box-shadow: 0 4px 14px rgba(4, 10, 22, .45); }
#scoreBtn .icon { width: 24px; height: 24px; }
#scoreBtn:hover { background: #2a62c8; }
#scoreBtn:disabled { opacity: .7; }
@media (max-width: 700px) { #scoreBtn { bottom: 274px; } }  /* 10 px above Find My Location */
/* Insights: Metro Manila's headline card (the city card, without a photo), then the cities as a list */
.headline.region { margin: 16px 0 28px; }
.region-title { display: flex; align-items: baseline; gap: 10px; margin-bottom: 10px; }
.region-title h2 { margin: 0; font-size: var(--fs-2xl); }
.region-title .muted { font-size: var(--fs-sm); }
.spread { display: grid; gap: 8px; margin-top: 16px; padding-top: 16px; border-top: 1px solid var(--line); }
.spread-title { font-weight: 700; color: var(--muted); }
.spread-bar { display: flex; gap: 3px; height: 14px; border-radius: var(--pill); overflow: hidden; }
.spread-bar i { display: block; min-width: 6px; }
.spread-key { display: flex; flex-wrap: wrap; gap: 6px 16px; font-size: var(--fs-sm); color: var(--muted); }
.spread-key span { display: inline-flex; align-items: center; gap: 6px; }
.spread-key i { width: 10px; height: 10px; border-radius: 50%; }
.city-pick-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 16px; margin-bottom: 10px; }
.city-pick-head h2 { margin: 0; }
.city-pick-head .muted { font-size: var(--fs-sm); font-weight: 400; }
.city-pick-head .city-search { margin: 0; }
.city-rows { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; }
.city-row { display: grid; grid-template-columns: minmax(0, 1fr) 56px 96px 20px; align-items: center; gap: 12px; width: 100%; min-height: 56px;
  padding: 8px 16px; border-bottom: 1px solid var(--line); color: var(--ink); text-decoration: none; }
.city-row:last-child { border-bottom: 0; }
.city-row:hover { background: rgba(29,36,51,.04); }
.cr-name { font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cr-score { display: inline-flex; align-items: center; gap: 6px; font-weight: 700; font-variant-numeric: tabular-nums; }
.cr-score i { width: 10px; height: 10px; border-radius: 50%; flex: none; }
.cr-cover { font-size: var(--fs-sm); color: var(--muted); text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }
.cr-mark { color: var(--muted); }
@media (max-width: 500px) {
  .city-row { grid-template-columns: minmax(0, 1fr) 48px 88px 18px; gap: 8px; padding: 8px 12px; }
}
.top-cities { display: grid; gap: 6px; margin: 0; padding-left: 20px; }
.top-cities li { display: list-item; }
.top-cities li > a { font-weight: 600; }
.top-cities li > b { float: right; font-variant-numeric: tabular-nums; }
/* Score a Street's location ask: shown when location is off or refused */
.loc-ask { display: grid; gap: 10px; }
.loc-ask p { margin: 0; }
.loc-noask { display: flex; align-items: center; gap: 8px; font-size: var(--fs-sm); color: var(--muted); }
.loc-ask-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 4px; }
.loc-ask-actions button { flex: 1; min-width: 140px; }
/* How to Use steps: line icons; the first, Score a Street, in the hero blue of its button */
.welcome-steps .icon { width: 22px; height: 22px; }
.welcome-steps li.lead > span { color: var(--hero); }
/* Scores, Problems and Suggestions: the full width on phones, three equal parts; left-aligned at 420px on wider screens */
@media (max-width: 600px) {
  .view-switch { width: 100%; }
  .view-switch button { padding: 4px 2px; gap: 4px; }
  .view-switch .icon { width: 16px; height: 16px; }
}
/* Too narrow for words: the switches and the bottom bar show only their icons. The words stay for screen readers */
.view-switch, .bottom-nav { container-type: inline-size; }
@container (max-width: 300px) {
  .view-switch button .lbl, .bottom-nav a .lbl { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .view-switch .icon, .bottom-nav svg { width: 22px; height: 22px; }
}
/* Buttons with a line icon before their label: Score This Segment (the pencil, as on the map), Report or Suggest */
.icon-btn { gap: 8px; }
.icon-btn .icon { width: 20px; height: 20px; }
/* The × that clears the search box */
#searchbox input { padding-right: 44px; }
#searchClear { position: absolute; z-index: 1; right: 4px; top: 4px; width: 36px; min-height: 36px; padding: 0; border: 0; background: transparent; color: var(--muted); }
#searchClear:hover { background: rgba(127,127,127,.15); }
.map-page #searchClear { color: var(--on-night-muted); }
/* Phones: zooming out lowers the open card to a peek, its title and close button showing; a tap raises it */
@media (max-width: 700px) {
  #panel.open.peek { transform: translateY(calc(100% - 108px)); overflow: hidden; cursor: pointer; }
  #panel.open.peek::before { content: ""; position: absolute; top: 6px; left: 50%; width: 40px; height: 4px; margin-left: -20px;
    border-radius: var(--pill); background: var(--line); }
}
/* The browser's own clear button in search boxes: hidden on the map, which has its own × */
#search::-webkit-search-cancel-button, #search::-webkit-search-decoration { -webkit-appearance: none; appearance: none; display: none; }
/* Bottom bar tabs size to their labels, with room inside the pill, so Submissions doesn't touch the bar's edge */
.bottom-nav a { flex: 1 1 auto; padding: 0 12px; }
/* Page Not Found */
.not-found { padding-top: 32px; }
.not-found-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 20px; }