:root {
  --ink: #16202b;
  --ink-2: #4a5663;
  --ink-3: #6b7683;
  --line: #d9dee4;
  --panel: #ffffff;
  --bg: #f3f5f7;
  --accent: #2563eb;
  --accent-soft: #e8effd;
  --green: #15803d;
  --amber: #b45309;
  --red: #b91c1c;
  --green-bg: #e7f5ec;
  --amber-bg: #fdf1e3;
  --red-bg: #fbe9e9;
  --flood-high: #2b6cb0;
  --flood-mod: #7fb0dc;
  --flood-low: #d6e6f4;
  --warn-stripe: #7c2d12;
  --radius: 6px;
  --font: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}

* { box-sizing: border-box; }
html, body { margin: 0; min-height: 100%; }
/* The map shell fills the window. The public page, Sources, and the print
   sheets grow with their content, so a sticky header can stay in view. */
html:has(.app):not(:has(.prose)),
html:has(.app):not(:has(.prose)) body { height: 100%; }
body {
  font-family: var(--font);
  font-size: 14px;
  line-height: 1.45;
  color: var(--ink);
  background: var(--bg);
}
a { color: var(--accent); }
h1, h2, h3 { margin: 0; font-weight: 650; }
h2 { font-size: 13px; text-transform: uppercase; letter-spacing: .04em; color: var(--ink-2); }

/* ---------- shell ---------- */
.app { display: grid; grid-template-rows: auto auto 1fr auto; height: 100%; }
/* Shared page header (templates/partials/header.html): brand · view tabs · account buttons.
   CloudKlass tokens (BRAND.md): blue #2563eb/#1d4ed8, tint #eff6ff, 10px buttons. */
.topbar {
  display: grid; grid-template-columns: minmax(0, auto) 1fr auto; align-items: center; gap: 10px 20px;
  padding: 8px 16px; background: var(--panel); border-bottom: 1px solid var(--line);
  box-shadow: 0 1px 3px rgba(15, 23, 42, .05); position: sticky; top: 0; z-index: 1200;
}
/* Print bars (atlas, and any direct toolbar) scroll with the sheet. The view bar above stays. */
body > .toolbar { position: static; }
.app:has(.prose) { height: auto; min-height: 100%; }
.tb-brand { display: flex; align-items: center; gap: 10px; min-width: 0; color: inherit; text-decoration: none; }
.tb-mark { width: 36px; height: 36px; border-radius: 9px; flex: none; box-shadow: 0 0 0 1px var(--line); }
.tb-title { display: flex; flex-direction: column; min-width: 0; }
.topbar h1 { font-size: 15.5px; font-weight: 700; color: #0f172a; letter-spacing: -.01em;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.topbar .sub { color: var(--ink-3); font-size: 12px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tb-tabs { justify-self: center; display: flex; gap: 2px; padding: 3px; max-width: 100%; overflow-x: auto;
  background: #f1f5f9; border: 1px solid #e2e8f0; border-radius: 11px; scrollbar-width: none; }
.tb-tabs::-webkit-scrollbar { display: none; }
.tb-tabs a { display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; border-radius: 8px;
  font-size: 13px; font-weight: 500; color: #475569; text-decoration: none; white-space: nowrap;
  transition: background .12s, color .12s; }
.tb-tabs a:hover { color: #0f172a; background: #e2e8f0; }
.tb-tabs a[aria-current="page"] { background: #fff; color: #1d4ed8; font-weight: 600;
  box-shadow: 0 1px 2px rgba(15, 23, 42, .10), 0 0 0 1px #e2e8f0; }
.tb-demo { font-size: 9.5px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase;
  padding: 1px 6px; border-radius: 999px; background: #fef3c7; color: #92400e; }
.tb-tabs a[aria-current="page"] .tb-demo { background: #fde68a; }
.tb-account { display: flex; align-items: center; gap: 8px; }
.tb-btn { display: inline-flex; align-items: center; gap: 7px; padding: 7px 13px; border-radius: 10px;
  font-size: 13px; font-weight: 600; white-space: nowrap; text-decoration: none;
  color: #1d4ed8; background: #eff6ff; border: 1px solid #bfdbfe; transition: background .12s, border-color .12s, color .12s; }
.tb-btn:hover { background: #dbeafe; border-color: #93c5fd; }
.tb-btn:focus-visible, .tb-tabs a:focus-visible, .tb-brand:focus-visible { outline: 2px solid #2563eb; outline-offset: 2px; }
.tb-btn svg { width: 15px; height: 15px; flex: none; }
.tb-btn-out { color: #475569; background: #fff; border-color: #e2e8f0; }
.tb-btn-out:hover { color: #b91c1c; background: #fef2f2; border-color: #fecaca; }
@media (max-width: 1180px) {
  .topbar { grid-template-columns: minmax(0, 1fr) auto; }
  .tb-tabs { grid-column: 1 / -1; grid-row: 2; justify-self: stretch; }
}
@media (max-width: 560px) {
  .tb-lbl, .topbar .sub { display: none; }
  .tb-btn { padding: 8px 10px; }
}
@media print { .topbar { display: none; } }

.banner {
  padding: 6px 16px; font-size: 12.5px; font-weight: 600;
  background: #fff7ed; color: var(--warn-stripe); border-bottom: 1px solid #fed7aa;
}
.banner.synthetic { background: var(--red-bg); color: var(--red); border-bottom-color: #f5c2c2; }

.main { display: grid; grid-template-columns: 360px 1fr; min-height: 0; }
.side {
  overflow-y: auto; background: var(--panel); border-right: 1px solid var(--line);
  padding: 14px 16px 24px; display: flex; flex-direction: column; gap: 18px;
}
#map, #m-map { min-height: 0; background: #eef1f4; }
.foot {
  padding: 6px 16px; font-size: 11.5px; color: var(--ink-3);
  background: var(--panel); border-top: 1px solid var(--line);
  display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap;
}

/* ---------- controls ---------- */
.field { display: flex; flex-direction: column; gap: 4px; }
.field label, .legend-title { font-size: 12px; color: var(--ink-2); font-weight: 600; }
input[type="search"], select {
  font: inherit; padding: 7px 9px; border: 1px solid var(--line); border-radius: var(--radius);
  background: #fff; color: var(--ink); width: 100%;
}
input[type="search"]:focus, select:focus, button:focus-visible, a:focus-visible {
  outline: 2px solid var(--accent); outline-offset: 1px;
}
.row2 { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.check { display: flex; align-items: flex-start; gap: 8px; font-size: 13px; cursor: pointer; }
.check input { margin-top: 3px; }
.checks { display: flex; flex-direction: column; gap: 6px; }
button, .btn {
  font: inherit; font-weight: 600; padding: 7px 12px; border-radius: var(--radius);
  border: 1px solid var(--accent); background: var(--accent); color: #fff; cursor: pointer;
  text-decoration: none; display: inline-block; text-align: center;
}
button.ghost, .btn.ghost { background: #fff; color: var(--accent); }
.count { font-size: 13px; color: var(--ink-2); }
.count strong { color: var(--ink); }

/* ---------- panels ---------- */
.panel { display: flex; flex-direction: column; gap: 8px; }
.cards { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.card {
  border: 1px solid var(--line); border-radius: var(--radius); padding: 8px 10px; background: #fff;
}
.card .v { font-size: 18px; font-weight: 700; }
.card .l { font-size: 11.5px; color: var(--ink-2); }
.card .n { font-size: 11px; color: var(--ink-3); }
.card.over { border-color: #f1c0c0; background: var(--red-bg); }
.card.over .v { color: var(--red); }
.src { font-size: 11px; color: var(--ink-3); }
.reference {
  border: 1px dashed #9aa6b2; border-radius: var(--radius); padding: 10px; background: #fafbfc;
}
.reference table { width: 100%; border-collapse: collapse; font-size: 12.5px; }
.reference td { padding: 3px 0; border-bottom: 1px solid #eceff2; }
.reference td:last-child { text-align: right; font-weight: 650; }
/* LGA comparison (public view, DNEMIS census totals) */
.lga-rank { width: 100%; border-collapse: collapse; font-size: 12.5px; }
.lga-rank th { text-align: left; font-size: 11px; color: var(--ink-3); font-weight: 600; padding: 2px 4px; border-bottom: 1px solid var(--line); }
.lga-rank td { padding: 3px 4px; border-bottom: 1px solid #eceff2; }
.lga-rank .num { text-align: right; }
.lga-rank tbody tr { cursor: pointer; }
.lga-rank tbody tr:hover { background: var(--accent-soft); }
.lga-rank tbody tr.sel { background: var(--accent-soft); font-weight: 650; }
.lga-rank tfoot td { font-weight: 650; border-top: 1px solid var(--line); border-bottom: 0; }
.note { font-size: 12px; color: var(--ink-2); background: var(--accent-soft); padding: 8px 10px; border-radius: var(--radius); }

[hidden] { display: none !important; }
.legend { display: flex; flex-direction: column; gap: 4px; font-size: 12px; }
.swatch { display: inline-block; width: 12px; height: 12px; border-radius: 2px; vertical-align: -2px; margin-right: 6px; border: 1px solid rgba(0,0,0,.15); }
.dot { display: inline-block; width: 10px; height: 10px; border-radius: 50%; vertical-align: -1px; margin-right: 6px; }

/* ---------- traffic lights ---------- */
.tl { display: inline-block; min-width: 44px; padding: 1px 6px; border-radius: 10px; font-size: 12px; font-weight: 650; text-align: center; }
.tl.g { background: var(--green-bg); color: var(--green); }
.tl.a { background: var(--amber-bg); color: var(--amber); }
.tl.r { background: var(--red-bg); color: var(--red); }
.tl.n { background: #eef0f2; color: var(--ink-3); font-weight: 500; }

/* ---------- result list (manager) ---------- */
.results { display: flex; flex-direction: column; border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; }
.results button.item {
  all: unset; box-sizing: border-box; cursor: pointer; display: grid; grid-template-columns: 1fr auto;
  gap: 2px 8px; padding: 7px 10px; border-bottom: 1px solid #eef0f2; font-size: 12.5px; background: #fff;
}
.results button.item:hover, .results button.item:focus-visible { background: var(--accent-soft); }
.results .item .meta { grid-column: 1 / -1; color: var(--ink-3); font-size: 11.5px; }
.results .empty { padding: 12px; color: var(--ink-3); font-size: 12.5px; }

/* ---------- leaflet popups ---------- */
.leaflet-popup-content { margin: 10px 12px; font-family: var(--font); font-size: 12.5px; min-width: 220px; }
.pop h3 { font-size: 14px; margin-bottom: 4px; }
.pop table { border-collapse: collapse; width: 100%; }
.pop td { padding: 2px 0; vertical-align: top; }
.pop td:first-child { color: var(--ink-3); padding-right: 10px; white-space: nowrap; }
.pop .vint { margin-top: 6px; font-size: 11px; color: var(--ink-3); }
.lga-label { background: none; border: none; box-shadow: none; font-size: 11px; font-weight: 650; color: #334155; text-shadow: 0 0 3px #fff, 0 0 3px #fff; }
.lga-label::before { display: none; }
.ctx-label { background: none; border: none; box-shadow: none; font-size: 12px; font-style: italic; color: #8a95a1; }
.ctx-label::before { display: none; }

/* ---------- prose pages ---------- */
.prose { max-width: 860px; margin: 0 auto; padding: 24px 16px 48px; background: var(--panel); min-height: 100%; }
.prose h1 { font-size: 22px; margin-bottom: 6px; }
.prose h2 { margin: 26px 0 8px; font-size: 14px; }
.prose table { border-collapse: collapse; width: 100%; font-size: 13px; }
.prose th, .prose td { text-align: left; border-bottom: 1px solid var(--line); padding: 6px 8px 6px 0; vertical-align: top; }
.prose th { color: var(--ink-2); font-size: 12px; }

@media (max-width: 820px) {
  .main { grid-template-columns: 1fr; grid-template-rows: 62vh auto; }
  #map, #m-map { order: -1; }
  .side { border-right: none; border-bottom: 1px solid var(--line); overflow: visible; }
  html, body, .app { height: auto; min-height: 100%; }
  .topbar { flex-direction: column; align-items: flex-start; }
}

/* ---------- priority bands (manager view, atlas) ---------- */
.band { display: inline-block; padding: 1px 7px; border-radius: 10px; font-size: 11.5px; font-weight: 650; white-space: nowrap; }
.band-critical { background: #7f1d1d; color: #fff; }
.band-priority { background: #fde2e2; color: #b91c1c; }
.band-watch { background: #fdf1e3; color: #92400e; }
.band-routine { background: #eef0f2; color: #475569; }
.band-unreported { background: #fff; color: #6b7280; border: 1px solid #cbd2d9; }