/* OpsCon — admin interface.
   Palette is the municipal-seal family used across the generated sites, so
   the builder and its output read as one system. */

/* The clean theme — the same tokens as the published EWS (OpsCon clean):
   a pale blue-grey ground, white cards that float on soft shadows instead of
   borders, one blue accent, Figtree for text and IBM Plex Mono for figures.
   The old names are kept so every rule below picks the theme up. */
:root {
  --navy:#4668B0; --navy-deep:#172238; --navy-line:#3A5A9E; --cyan:#4FAED6; --brand-navy:#172238;
  --gold:#FEAC26; --gold-deep:#C9820A;
  --green:#12A06A; --sand:#D6B182;

  --paper:#F6F7F9; --surface:#FFFFFF; --sunk:#F1F3F7;
  --ink:#172238; --body:#3A4760; --muted:#5E6A82; --faint:#97A1B4;
  --hair:#E4E8EF; --hair-strong:#CFD6E2;
  --accent-soft:#EAEFF8;

  --ok:#0B7F53; --ok-bg:#E3F5EC;
  --warn:#9A6400; --warn-bg:#FFF4DE;
  --err:#C0281D; --err-bg:#FDEBEA;

  --shadow:0 1px 2px rgba(16,32,52,.06), 0 4px 12px rgba(16,32,52,.07);
  --shadow-lg:0 2px 4px rgba(16,32,52,.05), 0 10px 30px rgba(16,32,52,.09);
  --radius:14px; --rs:10px;
  --font:"Figtree", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
  --mono:"IBM Plex Mono", ui-monospace, Menlo, Consolas, monospace;
  color-scheme:light;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --navy:#7B96D6; --navy-deep:#E9EEF8; --navy-line:#95ABE0; --cyan:#6CC3E6;
    --paper:#0B1120; --surface:#141D30; --sunk:#10182A;
    --ink:#E9EEF8; --body:#C3CCDD; --muted:#95A1B8; --faint:#65718A;
    --hair:#22304A; --hair-strong:#2E3F5E; --accent-soft:#1C2945;
    --ok:#4CCB8F; --ok-bg:#0E2A1F; --warn:#F2B64A; --warn-bg:#2B2210; --err:#F0837A; --err-bg:#2E1513;
    --shadow:0 1px 2px rgba(0,0,0,.35), 0 4px 14px rgba(0,0,0,.4);
    --shadow-lg:0 2px 4px rgba(0,0,0,.4), 0 12px 34px rgba(0,0,0,.5);
    color-scheme:dark;
  }
}
:root[data-theme="dark"] {
  --navy:#7B96D6; --navy-deep:#E9EEF8; --navy-line:#95ABE0; --cyan:#6CC3E6;
  --paper:#0B1120; --surface:#141D30; --sunk:#10182A;
  --ink:#E9EEF8; --body:#C3CCDD; --muted:#95A1B8; --faint:#65718A;
  --hair:#22304A; --hair-strong:#2E3F5E; --accent-soft:#1C2945;
  --ok:#4CCB8F; --ok-bg:#0E2A1F; --warn:#F2B64A; --warn-bg:#2B2210; --err:#F0837A; --err-bg:#2E1513;
  --shadow:0 1px 2px rgba(0,0,0,.35), 0 4px 14px rgba(0,0,0,.4);
  --shadow-lg:0 2px 4px rgba(0,0,0,.4), 0 12px 34px rgba(0,0,0,.5);
  color-scheme:dark;
}

* { box-sizing: border-box; }

body {
  margin:0; background:var(--paper); color:var(--body);
  font:15px/1.55 var(--font);
  -webkit-font-smoothing:antialiased;
}
h1,h2,h3 { margin:0; color:var(--ink); letter-spacing:-.018em; text-wrap:balance; }
h1 { font-size:1.55rem; line-height:1.15; }
h2 { font-size:1.15rem; }
h3 { font-size:.95rem; }
p { margin:0; }
a { color:var(--navy); text-decoration:none; }
a:hover { text-decoration:underline; }
a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible {
  outline:2px solid var(--gold); outline-offset:2px; border-radius:2px;
}
code, .mono { font-family:var(--mono); font-size:.86em; }
code { background:var(--sunk); border:1px solid var(--hair); border-radius:3px; padding:.08em .35em; color:var(--ink); }
.muted { color:var(--muted); }
.small { font-size:.86rem; }
.eyebrow { font-size:.66rem; font-weight:700; letter-spacing:.15em; text-transform:uppercase; color:var(--muted); }

/* ---------- chrome ---------- */
.topbar {
  background:var(--navy-deep); color:#fff; display:flex; align-items:center; gap:26px;
  padding:0 22px; border-bottom:3px solid var(--gold);
}
.brand { display:flex; align-items:baseline; gap:7px; padding:14px 0; color:#fff; }
.brand:hover { text-decoration:none; }
.brand .mark { font-weight:800; letter-spacing:.06em; }
.brand .sub { font-size:.75rem; color:var(--gold); letter-spacing:.14em; text-transform:uppercase; }
.topbar nav { display:flex; gap:18px; }
.topbar nav a { color:rgba(255,255,255,.78); font-size:.88rem; font-weight:500; }
.topbar nav a:hover { color:#fff; text-decoration:none; }
.topbar .who { margin-left:auto; font-size:.82rem; color:rgba(255,255,255,.6); display:flex; gap:14px; align-items:center; }
.topbar .who a { color:var(--gold); }

.wrap { max-width:1240px; margin:0 auto; padding:26px 22px 70px; }
.sitefoot { max-width:1240px; margin:0 auto; padding:0 22px 34px; font-size:.78rem; color:var(--muted); }
body.bare { display:grid; place-items:center; min-height:100vh; }
body.install .wrap { max-width:760px; }

.pagehead { display:flex; align-items:flex-end; gap:20px; margin-bottom:22px; flex-wrap:wrap; }
.pagehead > div:first-child { display:flex; flex-direction:column; gap:5px; }
.pagehead .headactions { margin-left:auto; }

/* ---------- cards ---------- */
.card {
  background:var(--surface); border:1px solid var(--hair); border-radius:var(--radius);
  padding:22px; box-shadow:var(--shadow); display:flex; flex-direction:column; gap:14px;
}
.card.narrow { max-width:620px; }
/* A card that is telling the operator something is wrong with the data it is
   showing. Tinted rather than merely outlined, because it sits directly above
   the table it is contradicting. */
.card.warn { background:var(--warn-bg); border-color:var(--warn); }
.card.warn h2 { color:var(--warn); }
.card.empty { align-items:flex-start; }
.login { width:min(420px, 92vw); }
.login .card { gap:16px; }

/* ---------- forms ---------- */
label { display:flex; flex-direction:column; gap:5px; font-size:.86rem; font-weight:600; color:var(--ink); }
label.check { flex-direction:row; align-items:flex-start; gap:10px; font-weight:500; }
label.check input { margin-top:3px; accent-color:var(--navy); }
label.check .muted { font-weight:400; display:block; }
input[type=text], input[type=email], input[type=password], input[type=number], input:not([type]), select, .sel {
  font:inherit; font-weight:400; padding:8px 11px; border:1px solid var(--hair-strong);
  border-radius:3px; background:var(--surface); color:var(--ink); width:100%;
}
.grid2 { display:grid; grid-template-columns:1fr 1fr; gap:14px; }
hr { border:0; border-top:1px solid var(--hair); margin:4px 0; }
form { display:flex; flex-direction:column; gap:14px; }

.btn {
  display:inline-flex; align-items:center; justify-content:center; gap:7px; align-self:flex-start;
  background:var(--navy); color:#fff; border:1px solid var(--navy); padding:9px 17px;
  border-radius:3px; font-size:.87rem; font-weight:600; cursor:pointer;
}
.btn:hover { background:var(--navy-line); text-decoration:none; color:#fff; }
.btn[disabled] { opacity:.45; cursor:not-allowed; }
.btn.ghost { background:transparent; color:var(--ink); border-color:var(--hair-strong); }
.btn.ghost:hover { background:var(--sunk); color:var(--ink); }
.btn.small { padding:6px 12px; font-size:.8rem; }

/* type-ahead */
.results { border:1px solid var(--hair-strong); border-radius:3px; background:var(--surface); max-height:280px; overflow:auto; }
.result {
  display:flex; flex-direction:column; gap:2px; width:100%; text-align:left;
  background:transparent; border:0; border-bottom:1px solid var(--hair);
  padding:9px 12px; cursor:pointer; font:inherit; color:var(--body);
}
.result:last-child { border-bottom:0; }
.result:hover { background:var(--sunk); }
.result strong { color:var(--ink); font-size:.88rem; }
.result span { font-size:.76rem; color:var(--muted); }
.chosen { font-size:.86rem; padding:9px 12px; background:var(--ok-bg); color:var(--ok); border-radius:3px; }

/* ---------- alerts ---------- */
.alert { padding:12px 15px; border-radius:3px; font-size:.88rem; border-left:4px solid; margin-bottom:16px; }
.alert.ok   { background:var(--ok-bg);   border-color:var(--ok);   color:var(--ok); }
.alert.warn { background:var(--warn-bg); border-color:var(--warn); color:var(--warn); }
.alert.error{ background:var(--err-bg);  border-color:var(--err);  color:var(--err); }
.alert code { background:rgba(0,0,0,.06); }

/* ---------- tables ---------- */
.tw { overflow-x:auto; border:1px solid var(--hair); border-radius:var(--radius); background:var(--surface); box-shadow:var(--shadow); }
.tw.scroll { max-height:340px; overflow-y:auto; }
table { border-collapse:collapse; width:100%; font-size:.86rem; }
thead th {
  text-align:left; padding:9px 13px; background:var(--navy); color:#fff;
  font-size:.66rem; font-weight:700; letter-spacing:.09em; text-transform:uppercase; white-space:nowrap;
  position:sticky; top:0;
}
tbody td { padding:9px 13px; border-bottom:1px solid var(--hair); }
tbody tr:last-child td { border-bottom:0; }
tbody tr:hover { background:var(--sunk); cursor:default; }
td.name { font-weight:600; color:var(--ink); white-space:nowrap; }
td.num, th.num { text-align:right; font-variant-numeric:tabular-nums; font-family:ui-monospace, monospace; font-size:.8rem; white-space:nowrap; }
table.compact tbody td { padding:6px 11px; font-size:.82rem; }

.pill { display:inline-block; font-size:.7rem; font-weight:700; padding:2px 9px; border-radius:10px; background:var(--sunk); color:var(--muted); }
.pill.s-draft { background:var(--sunk); color:var(--muted); }
.pill.s-geography { background:var(--warn-bg); color:var(--warn); }
.pill.s-intake { background:var(--warn-bg); color:var(--warn); }
.pill.s-scored { background:var(--ok-bg); color:var(--ok); }
.pill.s-published { background:var(--navy); color:#fff; }

/* ---------- stats ---------- */
.stats { display:grid; grid-template-columns:repeat(auto-fit,minmax(150px,1fr)); gap:1px; background:var(--hair); border:1px solid var(--hair); margin-bottom:20px; }
.stat { background:var(--surface); padding:14px 16px; display:flex; flex-direction:column; gap:3px; }
.stat .v { 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-size:.68rem; font-weight:600; color:var(--muted); letter-spacing:.06em; text-transform:uppercase; }

/* ---------- map ---------- */
.maplayout { display:grid; grid-template-columns:1fr 320px; gap:18px; align-items:start; }
@media (max-width:940px) { .maplayout { grid-template-columns:1fr; } }
/* overflow:hidden is deliberate. Leaflet's own stylesheet sets it, but if
   that stylesheet ever fails to load the tiles are absolutely positioned with
   nothing to clip them and spread across the entire page. This keeps a
   missing stylesheet looking like a broken map rather than a broken site. */
.map { height:min(72vh, 660px); overflow:hidden; position:relative;
  border:1px solid var(--hair); border-radius:var(--radius); background:var(--sunk); box-shadow:var(--shadow); }
.mapnote { font-size:.76rem; margin-top:8px; }
.mapside { display:flex; flex-direction:column; gap:14px; }
.panel { background:var(--surface); border:1px solid var(--hair); border-radius:var(--radius); padding:15px; display:flex; flex-direction:column; gap:10px; box-shadow:var(--shadow); }
.toggles { display:flex; flex-direction:column; gap:2px; }
.toggle { display:grid; grid-template-columns:auto 1fr auto; gap:9px; align-items:center; padding:7px 0; border-bottom:1px solid var(--hair); font-weight:400; cursor:pointer; }
.toggle:last-child { border-bottom:0; }
.toggle input { accent-color:var(--navy); }
.toggle .t { display:flex; flex-direction:column; gap:1px; }
.toggle .t strong { font-size:.83rem; color:var(--ink); font-weight:600; }
.toggle .agency { font-size:.7rem; color:var(--muted); }
.toggle .status { font-size:.68rem; color:var(--muted); font-family:ui-monospace,monospace; }
.toggle.failed .t strong { color:var(--err); }
.toggle.failed .status { color:var(--err); }

/* leaflet popups inherit the app's type rather than the library's */
.leaflet-popup-content { font:inherit; font-size:.84rem; }
.leaflet-container { font:inherit; }

/* ---------- installer ---------- */
.ihead { padding:44px 0 22px; display:flex; flex-direction:column; gap:12px; }
.steps { list-style:none; display:flex; gap:8px; margin:8px 0 0; padding:0; flex-wrap:wrap; }
.steps li { display:flex; align-items:center; gap:7px; font-size:.8rem; color:var(--muted); padding:5px 12px 5px 5px; border:1px solid var(--hair); border-radius:20px; background:var(--surface); }
.steps li span { width:20px; height:20px; border-radius:50%; display:grid; place-items:center; background:var(--sunk); font-size:.7rem; font-weight:700; }
.steps li.now { border-color:var(--gold); color:var(--ink); font-weight:600; }
.steps li.now span { background:var(--gold); color:#3A2C00; }
.steps li.done span { background:var(--ok); color:#fff; }
.checks { width:100%; border-collapse:collapse; font-size:.86rem; }
.checks td { padding:7px 9px; border-bottom:1px solid var(--hair); vertical-align:top; }
.checks .mark { width:26px; font-weight:700; text-align:center; }
.checks tr.ok  .mark { color:var(--ok); }
.checks tr.bad .mark { color:var(--err); }
.checks tr.warn .mark { color:var(--warn); }
.next { margin:0; padding-left:1.2em; display:flex; flex-direction:column; gap:8px; font-size:.88rem; }
.next li::marker { color:var(--gold-deep); }
.foot { text-align:center; font-size:.78rem; color:var(--muted); padding:26px 0; }

@media (prefers-reduced-motion: reduce) { * { transition:none !important; animation:none !important; } }

/* ---------- setup ---------- */
.regiongrid { display:flex; flex-direction:column; gap:1px; background:var(--hair); border:1px solid var(--hair); }
.regionrow { display:grid; grid-template-columns:1fr auto auto; gap:12px; align-items:center;
  background:var(--surface); padding:8px 13px; margin:0; }
.regionrow .rlabel { font-size:.86rem; color:var(--ink); font-weight:500; }
.regionrow .rcount { font-size:.74rem; color:var(--muted); font-family:ui-monospace,monospace; white-space:nowrap; }
.regionrow .rcount.has { color:var(--ok); }
.shellnote { font-size:.84rem; color:var(--muted); border-top:1px solid var(--hair); padding-top:12px; }
.shellnote summary { cursor:pointer; font-weight:600; color:var(--ink); }
.shellnote p { margin-top:8px; }

/* probe report — monospaced, selectable, scrolls rather than stretching */
pre.probe { margin:0; background:var(--navy-deep); color:#E8ECFB; border-radius:4px;
  padding:15px 17px; overflow-x:auto; font-family:ui-monospace,"JetBrains Mono",Menlo,monospace;
  font-size:.78rem; line-height:1.62; white-space:pre; user-select:all; }

/* ---------- map legends ----------
   Swatch images come from the agency's own service, so they are whatever size
   ArcGIS produced; constrain them rather than trusting the source. */
.legend { display:flex; flex-direction:column; gap:5px; padding:8px 0 10px 26px; }

/* An author `display` rule beats the browser's own `[hidden] { display: none }`,
   so `.legend { display:flex }` kept the legend on screen after its layer was
   switched off — the checkbox was doing its job and the CSS was overruling it.
   Stated once, globally, because every element this file gives a display value
   to is a candidate for the same bug. */
[hidden] { display:none !important; }
.legend.own { padding:0; gap:6px; }
.legenditem { display:flex; align-items:center; gap:8px; font-size:.76rem; color:var(--body); line-height:1.3; }
.legenditem img { width:17px; height:17px; object-fit:contain; flex:none;
  border:1px solid var(--hair); border-radius:2px; background:#fff; }
.legenditem i { width:17px; height:17px; flex:none; border-radius:2px; display:block; }
.legenditem i.sw-outline { border:2px dashed var(--navy); background:transparent; }
.legenditem i.sw-brgy { border:1px solid var(--navy); background:color-mix(in srgb,var(--navy) 8%,transparent); }
.legendnote { font-size:.74rem; color:var(--muted); font-style:italic; }

/* ---------- progressive runners (probe, overlay) ----------
   The output pane starts hidden and grows; it is capped so a run over forty
   layers cannot push the rest of the page off the screen. `user-select:all`
   on pre.probe already makes one click select the whole block for pasting. */
.runstatus { margin:8px 0 0; min-height:1.1em; font-style:italic; }
.panel pre.probe { margin-top:10px; max-height:300px; overflow-y:auto;
  font-size:.72rem; line-height:1.55; white-space:pre-wrap; word-break:break-word; }

/* ---------- overlay results ---------- */
.tw.tall { max-height:520px; overflow-y:auto; }
table.runs tr.msg td { border-top:0; padding-top:0; padding-bottom:9px; line-height:1.45; }
table.overlay td.nil { color:var(--muted); }
table.overlay td.strong { font-weight:700; }
table.overlay thead th.num { font-size:.72rem; }


/* ---------- municipal data intake ---------- */
/* A LOADED DATASET LOOKED EXACTLY LIKE AN EMPTY ONE.
   `.pill.s-ready` was used on this screen and never defined, so it fell back to
   the grey default — the one pill on the page whose whole job is saying "this
   is done" was the same colour as "this is not". */
.pill.s-ready{background:var(--ok-bg);color:var(--ok)}

.sectionhead{margin:22px 0 10px}

/* The individual-upload fallback, inside a disclosure. Separated by a rule
   rather than a card each, because they are an escape hatch and should not
   compete with the two datasets that genuinely still need a file. */
.dsalt{padding:12px 0;border-top:1px solid var(--hair)}
.dsalt h3{margin:0 0 8px}
.dsalt .dsactions{margin:0 0 8px}

.datasets{display:grid;gap:14px;margin-bottom:18px}
.card.dataset{margin:0}
.dshead{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap}
.dshead h2{margin:0}
.dsactions{display:flex;align-items:baseline;gap:10px;margin:10px 0 12px}
.dsupload{display:flex;align-items:center;gap:10px;flex-wrap:wrap;
  background:var(--ground,#F6F7FB);border:1px solid var(--hair);border-radius:6px;padding:10px 12px}
.dsupload input[type=file]{font-size:.82rem;flex:1 1 240px;min-width:0}
.dsupload button{flex:0 0 auto}

/* Findings read top-to-bottom under pressure, so the severity marker is a
   glyph in its own column rather than a colour on the row: colour alone is
   not readable to everyone, and this table is where someone is being told
   their data is wrong. */
table.findings td.mark{width:1.6em;text-align:center;font-weight:700}
table.findings tr.error td.mark{color:#96201B}
table.findings tr.warning td.mark{color:#B85A10}
table.findings tr.error{background:#FFF6F5}
table.findings tr.warning{background:#FFFBF3}




/* ============================================================ app shell ==
   The project page used to be a map with eight panels stacked beside it —
   a list of everything the software can do, in no particular order. What
   follows turns it into a workspace: one identity bar, one row of tabs, and
   one thing on screen at a time. */

.projhead{display:flex;align-items:flex-end;gap:20px;flex-wrap:wrap;
  margin:0 0 16px;padding-bottom:0}
.projhead .idblock{display:flex;flex-direction:column;gap:3px;min-width:0}
.projhead .eyebrow a{color:var(--muted)}
.projhead .headmeta{margin-left:auto;display:flex;align-items:center;gap:12px;flex-wrap:wrap}

/* Tabs. The underline sits on the tab rather than the bar so the active tab
   reads as attached to the content below it. */
nav.tabs{display:flex;gap:2px;border-bottom:1px solid var(--hair);
  margin:0 0 22px;overflow-x:auto;scrollbar-width:none}
nav.tabs::-webkit-scrollbar{display:none}
nav.tabs button{appearance:none;background:none;border:0;cursor:pointer;
  font:inherit;font-size:.88rem;font-weight:500;color:var(--muted);
  padding:10px 15px;white-space:nowrap;border-bottom:2px solid transparent;
  margin-bottom:-1px}
nav.tabs button:hover{color:var(--ink)}
nav.tabs button.on{color:var(--navy);border-bottom-color:var(--navy);font-weight:600}
nav.tabs button.far{margin-left:auto}

.tabpane{animation:fadein .12s ease-out}
@keyframes fadein{from{opacity:.4}to{opacity:1}}

/* ---------- the workflow, as state ---------- */
.worklist{display:flex;flex-direction:column;gap:1px;background:var(--hair);
  border:1px solid var(--hair);border-radius:var(--radius);
  box-shadow:var(--shadow);margin-bottom:20px;overflow:hidden}
.workstep{display:flex;align-items:center;gap:14px;background:var(--surface);
  padding:13px 16px;color:inherit;text-decoration:none}
.workstep:hover{background:var(--sunk);text-decoration:none}
.workstep .marker{flex:none;width:26px;height:26px;border-radius:50%;
  display:inline-flex;align-items:center;justify-content:center;
  font-size:.78rem;font-weight:700;font-variant-numeric:tabular-nums;
  background:var(--sunk);color:var(--muted);border:1px solid var(--hair-strong)}
.workstep .body{display:flex;flex-direction:column;gap:1px;min-width:0}
.workstep .body strong{color:var(--ink);font-size:.92rem;font-weight:600}
.workstep .state{margin-left:auto;flex:none;font-size:.68rem;font-weight:700;
  letter-spacing:.06em;text-transform:uppercase;color:var(--muted)}
.workstep.done .marker{background:var(--ok-bg);color:var(--ok);border-color:transparent}
.workstep.done .state{color:var(--ok)}
.workstep.ready .marker{background:var(--navy);color:#fff;border-color:transparent}
.workstep.ready .state{color:var(--navy)}
.workstep.waiting{opacity:.55}

/* ---------- cards ---------- */
.cols2{display:grid;grid-template-columns:repeat(auto-fit,minmax(340px,1fr));
  gap:18px;align-items:start}
.cardhead{display:flex;align-items:flex-start;gap:18px;flex-wrap:wrap;margin-bottom:6px}
.cardhead > div:first-child{min-width:0;flex:1 1 320px}
.cardhead h2{margin-bottom:3px}
.cardhead form,.cardhead > a{flex:none;margin-left:auto}
.published{display:flex;align-items:center;gap:18px;flex-wrap:wrap;
  background:var(--sunk);border:1px solid var(--hair);border-radius:var(--radius);
  padding:13px 15px;margin-top:12px}
.published .pubactions{margin-left:auto;display:flex;gap:8px;flex-wrap:wrap}
.btn.ghost.danger{color:var(--err);border-color:var(--err)}
.btn.ghost.danger:hover{background:var(--err-bg)}
.block{display:block}

/* ---------- data tables ----------
   Thirty-six barangays by several classes is a table people scan rather than
   read, so: a sticky header that survives scrolling, tabular figures that line
   up on the decimal, and a visible difference between a measured zero and a
   value nobody supplied. */
table.dtable{width:100%;border-collapse:collapse;font-size:.85rem}
table.dtable thead th{position:sticky;top:0;z-index:2;background:var(--sunk);
  color:var(--muted);text-align:left;font-size:.68rem;font-weight:700;
  letter-spacing:.06em;text-transform:uppercase;padding:8px 11px;
  border-bottom:1px solid var(--hair-strong);white-space:nowrap}
table.dtable td{padding:8px 11px;border-bottom:1px solid var(--hair);
  vertical-align:top;color:var(--body)}
table.dtable tbody tr:hover td{background:var(--sunk)}
table.dtable td.num,table.dtable th.num{text-align:right;white-space:nowrap;
  font-variant-numeric:tabular-nums;font-family:ui-monospace,Menlo,monospace;font-size:.8rem}
table.dtable td.strong{font-weight:700;color:var(--ink)}
table.dtable td.nil,.nil{color:var(--muted)}
table.dtable tbody tr[hidden]{display:none}
.tw.tall{max-height:460px}

.filterbox{display:flex;align-items:center;gap:10px;flex:none;margin-left:auto}
.filterbox input[type=search]{padding:6px 10px;font:inherit;font-size:.84rem;
  border:1px solid var(--hair-strong);border-radius:var(--radius);
  background:var(--surface);color:var(--ink);min-width:170px}

/* ---------- map pane ---------- */
[data-pane="map"] .maplayout{grid-template-columns:1fr 330px}
[data-pane="map"] .map{height:min(72vh,720px)}
@media (max-width:900px){
  [data-pane="map"] .maplayout{grid-template-columns:1fr}
  .projhead .headmeta{margin-left:0}
}

.mapfail{display:flex;flex-direction:column;gap:8px;align-items:flex-start;
  justify-content:center;height:100%;padding:26px;text-align:left;color:var(--body)}
.mapfail strong{color:var(--ink)}
.mapfail span{font-size:.86rem;color:var(--muted);max-width:46ch;line-height:1.55}

.riskpill{display:inline-block;padding:2px 8px;border-radius:3px;color:#fff;
  font-size:.7rem;font-weight:700;white-space:nowrap}
.r-veryhigh{background:#96201B} .r-high{background:#B85A10}
.r-moderate{background:#9A7A00} .r-low{background:#2F7C2A}

/* ---------- publishing ---------- */
.deployform{display:flex;flex-direction:column;gap:14px;margin-top:12px;max-width:560px}
.subdomain{display:flex;align-items:stretch}
.subdomain input{border-radius:var(--radius) 0 0 var(--radius);flex:1 1 auto;min-width:0}
.subdomain .suffix{display:flex;align-items:center;padding:0 12px;font-size:.85rem;
  color:var(--muted);background:var(--sunk);border:1px solid var(--hair-strong);
  border-left:0;border-radius:0 var(--radius) var(--radius) 0;white-space:nowrap}
.deployactions{display:flex;gap:8px;flex-wrap:wrap}

/* What the next Generate will bake into the page. A count of zero is the row
   that matters — it is the difference between "not built yet" and "broken" —
   so it is the row that is marked, and marked in text as well as in weight. */
.layercount{width:100%;border-collapse:collapse;margin:10px 0 16px}
.layercount th,.layercount td{padding:6px 10px 6px 0;text-align:left;vertical-align:top;
  border-bottom:1px solid var(--hair)}
.layercount th{font-weight:600;white-space:nowrap}
.layercount td:nth-child(2){font-variant-numeric:tabular-nums;white-space:nowrap;
  padding-right:16px}
.layercount tr.zero td:nth-child(2){color:var(--muted);font-style:italic}

/* ---------- the LGU seal ---------- */
/* A second heading inside the Settings card, so it needs less air above it
   than a card's own <h2> does. */
h2.tight{margin-top:22px}
/* Checkered behind the preview, so a seal with a transparent background reads
   as transparent rather than as white — which is what it will look like
   against the navy masthead, and the difference is worth seeing before it is
   published rather than after. */
.sealprev{margin:10px 0;display:inline-block;padding:8px;border-radius:var(--radius);
  border:1px solid var(--hair);
  background-color:#fff;
  background-image:linear-gradient(45deg,#EEF1F7 25%,transparent 25%),
    linear-gradient(-45deg,#EEF1F7 25%,transparent 25%),
    linear-gradient(45deg,transparent 75%,#EEF1F7 75%),
    linear-gradient(-45deg,transparent 75%,#EEF1F7 75%);
  background-size:12px 12px;
  background-position:0 0,0 6px,6px -6px,-6px 0}
.sealprev img{display:block;object-fit:contain}

/* ---------- accounts ---------- */
/* The reset and remove controls live in the row they act on, so a mis-click
   cannot apply to the account above or below the one being looked at. */
.rowactions{display:flex;gap:8px;align-items:center;flex-wrap:nowrap;white-space:nowrap}
.inlineform{display:flex;gap:6px;align-items:center;margin:0}
/* The password box does not grow: letting it wrap put Reset on a second line
   and left Remove sitting beside the input it has nothing to do with, which
   is exactly the arrangement a mis-click needs. The table already scrolls. */
.inlineform input{font-size:.8rem;padding:5px 9px;width:150px;flex:none}
/* Destructive actions are red on hover rather than red at rest: a row of
   permanently red buttons stops registering as a warning within a day. */
.btn.danger:hover{border-color:var(--warn);color:var(--warn);background:var(--warn-bg)}

/* ------------------------------------------------------------------ EWS
   The admin side of the early warning module. The band colours are the
   published page's own, so a threshold checked here and a colour seen there
   are recognisably the same thing. */
.pill.b-fresh   { background:#E4F2E1; color:#2F7C2A }
.pill.b-stale   { background:#FCEBD8; color:#B85A10 }
.pill.b-dark    { background:#FBE0DE; color:#96201B }
.pill.b-green   { background:#E4F2E1; color:#2F7C2A }
.pill.b-orange  { background:#FCEBD8; color:#B85A10 }
.pill.b-red     { background:#FBE0DE; color:#96201B }
.pill.b-unknown { background:#E8EAED; color:#5A6270 }
td.num, .tw td.num { font-family: var(--mono, ui-monospace, monospace); white-space:nowrap }
details.setup > summary { cursor:pointer; font-weight:600; padding:.4rem 0 }
details.setup[open] > summary { margin-bottom:.4rem }


/* ================================================================ clean ==
   The builder in the published EWS's clothes. Everything above still
   applies; this re-dresses the chrome and the common components. */
body { background:var(--paper); }
h1 { font-size:1.7rem; font-weight:700; letter-spacing:-.025em; }
h2 { font-size:1.08rem; font-weight:700; letter-spacing:-.01em; }
a { color:var(--navy); }
a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible {
  outline:none; box-shadow:0 0 0 3px color-mix(in srgb, var(--navy) 28%, transparent); border-radius:var(--rs); }
code { background:var(--sunk); border:1px solid var(--hair); border-radius:6px; }
.eyebrow { font-size:.66rem; letter-spacing:.14em; color:var(--faint); }

/* chrome: a floating bar, like the Atlas c-bar */
.topbar { position:sticky; top:0; z-index:1000; gap:14px; padding:12px 22px; border:0;
  background:color-mix(in srgb, var(--paper) 82%, transparent);
  -webkit-backdrop-filter:saturate(1.4) blur(12px); backdrop-filter:saturate(1.4) blur(12px); color:var(--ink); }
.brand { background:var(--surface); box-shadow:var(--shadow); border-radius:var(--radius);
  padding:9px 16px 9px 10px; align-items:center; gap:10px; color:var(--ink); }
.brand .logo { width:26px; height:26px; border-radius:8px; display:grid; place-items:center;
  background:#172238; color:#fff; }
.brand .logo svg { width:15px; height:15px; }
.brand .mark { font-weight:700; letter-spacing:0; font-size:.95rem; }
.brand .mark b { color:var(--navy); font-weight:700; }
.brand .sub { color:var(--muted); font-size:.82rem; letter-spacing:0; text-transform:none; font-weight:500;
  border-left:1px solid var(--hair); padding-left:10px; }
.topbar nav { background:#0E1A26; border-radius:999px; padding:5px; gap:2px;
  box-shadow:0 2px 4px rgba(16,32,52,.08), 0 10px 30px rgba(16,32,52,.18); overflow-x:auto; scrollbar-width:none; }
.topbar nav::-webkit-scrollbar { display:none; }
.topbar nav a { color:rgba(255,255,255,.72); font-size:.84rem; font-weight:600; padding:7px 15px; border-radius:999px;
  display:inline-flex; align-items:center; gap:7px; white-space:nowrap; }
.topbar nav a svg { width:15px; height:15px; opacity:.85; }
.topbar nav a:hover { color:#fff; background:rgba(255,255,255,.08); text-decoration:none; }
.topbar nav a.on { background:#4668B0; color:#fff; }
.topbar .who { background:var(--surface); box-shadow:var(--shadow); border-radius:var(--radius);
  padding:6px 8px 6px 14px; color:var(--muted); gap:10px; font-weight:500; }
.topbar .who a { color:var(--muted); font-weight:600; font-size:.8rem; padding:5px 10px; border-radius:8px; }
.topbar .who a:hover { background:var(--sunk); color:var(--ink); text-decoration:none; }
.topbar .who .av { width:26px; height:26px; border-radius:50%; display:grid; place-items:center;
  background:var(--accent-soft); color:var(--navy); font-weight:700; font-size:.75rem; }
.themebtn { appearance:none; border:0; background:transparent; color:var(--muted); cursor:pointer;
  width:30px; height:30px; border-radius:8px; display:grid; place-items:center; }
.themebtn:hover { background:var(--sunk); color:var(--ink); }
.themebtn svg { width:16px; height:16px; }
@media (max-width:860px) {
  .topbar { flex-wrap:wrap; padding:10px 16px; }
  .topbar nav { order:3; width:100%; }
  .topbar .who { margin-left:auto; }
  .who .nm { display:none; }
}
.wrap { padding:18px 22px 70px; }
.sitefoot { color:var(--faint); }

/* cards float; no borders */
.card, .panel, .tw, .worklist, .map { border:0; border-radius:var(--radius); box-shadow:var(--shadow); }
.card { padding:22px 24px; margin-bottom:16px; }
.card .card { box-shadow:none; background:var(--sunk); }
.card.warn { background:var(--warn-bg); border:0; box-shadow:inset 3px 0 0 var(--warn), var(--shadow); }
.card .tw { box-shadow:none; border:1px solid var(--hair); }
.pagehead { margin-bottom:20px; }

/* forms */
label { font-weight:600; font-size:.84rem; }
input[type=text], input[type=email], input[type=password], input[type=number], input[type=search], input[type=url],
input[type=date], input[type=datetime-local], input:not([type]), select, textarea, .sel {
  border:1px solid var(--hair-strong); border-radius:var(--rs); padding:9px 12px; background:var(--surface);
  color:var(--ink); transition:border-color .12s, box-shadow .12s; }
input:hover, select:hover, textarea:hover { border-color:var(--faint); }
input:focus, select:focus, textarea:focus { border-color:var(--navy); outline:none;
  box-shadow:0 0 0 3px color-mix(in srgb, var(--navy) 18%, transparent); }
label.check input, .toggle input { accent-color:var(--navy); }

/* buttons */
.btn { border-radius:var(--rs); padding:9px 16px; font-weight:600; font-size:.86rem; border:1px solid transparent;
  background:var(--navy); color:#fff; box-shadow:0 1px 2px rgba(70,104,176,.25); transition:background .12s, transform .06s; }
.btn:hover { background:var(--navy-line); color:#fff; }
.btn:active { transform:translateY(1px); }
.btn.ghost { background:var(--surface); color:var(--ink); border-color:var(--hair-strong); box-shadow:none; }
.btn.ghost:hover { background:var(--sunk); }
.btn.sm, .btn.small { padding:6px 11px; font-size:.78rem; }
.btn.danger:hover, .btn.ghost.danger:hover { background:var(--err-bg); color:var(--err); border-color:var(--err); }
.btn.ghost.danger { border-color:color-mix(in srgb, var(--err) 45%, transparent); }

/* type-ahead */
.results { border:0; border-radius:var(--rs); box-shadow:var(--shadow-lg); background:var(--surface); }
.result { border-bottom-color:var(--hair); }
.chosen { border-radius:var(--rs); }

/* alerts */
.alert { border:0; border-radius:var(--rs); padding:12px 16px; box-shadow:inset 3px 0 0 currentColor; }

/* tables: light header, like the Console */
thead th { background:var(--sunk); color:var(--muted); font-size:.66rem; letter-spacing:.08em;
  border-bottom:1px solid var(--hair); padding:10px 14px; }
tbody td { padding:11px 14px; border-bottom-color:var(--hair); }
tbody tr:hover { background:color-mix(in srgb, var(--navy) 4%, transparent); }
tbody th { text-align:left; padding:11px 14px; border-bottom:1px solid var(--hair); font-weight:600; color:var(--ink); }
td.num, th.num, table.dtable td.num { font-family:var(--mono); }
table.dtable thead th { background:var(--sunk); }

/* pills and chips */
.pill { border-radius:999px; padding:3px 10px; font-size:.68rem; font-weight:700; background:var(--sunk); color:var(--muted);
  border:1px solid var(--hair); vertical-align:middle; }
a.pill:hover { text-decoration:none; border-color:var(--navy); color:var(--navy); }
.pill.s-published { background:var(--accent-soft); color:var(--navy); border-color:transparent; }
.pill.s-scored, .pill.s-ready, .pill.b-fresh, .pill.b-green { background:var(--ok-bg); color:var(--ok); border-color:transparent; }
.pill.s-geography, .pill.s-intake, .pill.b-stale, .pill.b-orange { background:var(--warn-bg); color:var(--warn); border-color:transparent; }
.pill.b-dark, .pill.b-red { background:var(--err-bg); color:var(--err); border-color:transparent; }
.chips { display:flex; flex-wrap:wrap; gap:6px; }
.chip { display:inline-flex; align-items:center; gap:6px; padding:5px 6px 5px 12px; border-radius:999px;
  background:var(--accent-soft); color:var(--ink); font-size:.82rem; font-weight:600; }
.chip button { border:0; background:transparent; color:var(--muted); cursor:pointer; font-size:1rem; line-height:1;
  width:20px; height:20px; border-radius:50%; }
.chip button:hover { background:var(--surface); color:var(--err); }

/* stats */
.stats { gap:12px; background:transparent; border:0; }
.stat { border-radius:var(--radius); box-shadow:var(--shadow); padding:16px 18px; }
.stat .v { font-family:var(--mono); font-weight:500; letter-spacing:-.02em; }

/* segmented tabs (project, EWS) */
nav.tabs, .toggles[data-tabs], .modetabs { display:inline-flex; gap:2px; padding:4px; border:0; border-radius:12px;
  background:var(--surface); box-shadow:var(--shadow); margin:0 0 20px; flex-direction:row; max-width:100%; overflow-x:auto; }
nav.tabs button, .toggles[data-tabs] .toggle, .modetabs a { border:0; margin:0; padding:8px 15px; border-radius:9px;
  font-size:.85rem; font-weight:600; color:var(--muted); background:transparent; cursor:pointer; white-space:nowrap;
  display:inline-flex; grid-template-columns:none; }
nav.tabs button:hover, .toggles[data-tabs] .toggle:hover, .modetabs a:hover { color:var(--ink); background:var(--sunk); text-decoration:none; }
nav.tabs button.on, .toggles[data-tabs] .toggle[aria-selected="true"], .modetabs a.on { background:var(--navy); color:#fff; border:0; }
.modetabs { display:flex; width:max-content; }

/* workflow list */
.worklist { gap:0; background:var(--surface); }
.workstep { border-bottom:1px solid var(--hair); }
.workstep:last-child { border-bottom:0; }
.workstep .marker { border:0; }
.workstep.ready .marker { background:var(--navy); }

/* runner output and probes */
pre.probe { background:#172238; color:#D8E4F0; border-radius:var(--rs); font-family:var(--mono); }
.published, .dsupload { border:0; background:var(--sunk); border-radius:var(--rs); }
.steps li { border:0; box-shadow:var(--shadow); }
.steps li.now { box-shadow:0 0 0 2px var(--navy); }
.steps li.now span { background:var(--navy); color:#fff; }
.regiongrid { border:0; border-radius:var(--rs); overflow:hidden; }

/* EWS: three ways to add a location */
.addgrid { display:grid; grid-template-columns:repeat(auto-fit, minmax(240px, 1fr)); gap:14px; }
.addopt { background:var(--sunk); border-radius:var(--rs); padding:16px; display:flex; flex-direction:column; gap:10px; }
.addopt h3 { font-size:.95rem; }
.addopt form { gap:10px; }
.card.coverage { flex-direction:row; flex-wrap:wrap; align-items:baseline; gap:8px; padding:14px 18px; }
.pinsearch .results { background:var(--surface); }

/* login */
body.bare { background:radial-gradient(1200px 600px at 20% -10%, var(--accent-soft), transparent), var(--paper); }
.login .card { box-shadow:var(--shadow-lg); padding:28px; }
.pagehead { align-items:center; }
.pagehead > :nth-child(2) { margin-left:auto; }
.inlineform { flex-direction:row; flex-wrap:wrap; }
.inlineform input[type=number] { width:120px; }
label > .muted { font-weight:400; font-size:.78rem; margin-top:-3px; }

/* ============================================================ SaaS shell ==
   A fixed sidebar on the left, the page on the right. On a phone the
   sidebar slides in from a menu button. */
body { min-height:100vh; }
.app { display:grid; grid-template-columns:252px minmax(0,1fr); min-height:100vh; }
.side { position:sticky; top:0; height:100vh; overflow-y:auto; display:flex; flex-direction:column; gap:6px;
  background:var(--surface); border-right:1px solid var(--hair); padding:18px 14px 14px; z-index:1100; }
.side .brand { box-shadow:none; background:transparent; padding:4px 8px 10px; border-radius:0; }
.side .org { font-size:.76rem; color:var(--muted); padding:0 8px 8px; margin-top:-6px; }
.side nav { display:flex; flex-direction:column; gap:2px; flex:1; }
.side .navh { font-size:.64rem; font-weight:700; letter-spacing:.12em; text-transform:uppercase; color:var(--faint);
  padding:16px 10px 6px; }
.side nav a { display:flex; align-items:center; gap:11px; padding:9px 10px; border-radius:10px; color:var(--body);
  font-size:.88rem; font-weight:600; }
.side nav a svg { width:18px; height:18px; flex:none; color:var(--faint); }
.side nav a:hover { background:var(--sunk); color:var(--ink); text-decoration:none; }
.side nav a:hover svg { color:var(--ink); }
.side nav a.on { background:var(--accent-soft); color:var(--navy); }
.side nav a.on svg { color:var(--navy); }
.side nav a.sub { padding-left:22px; font-weight:500; font-size:.84rem; }
.side nav a.sub svg { width:16px; height:16px; }
.side .who { display:flex; align-items:center; gap:10px; padding:10px; border-radius:12px; background:var(--sunk); margin-top:12px; }
.side .who .av { width:32px; height:32px; border-radius:50%; display:grid; place-items:center; flex:none;
  background:var(--navy); color:#fff; font-weight:700; font-size:.82rem; }
.side .who .nm { display:flex; flex-direction:column; min-width:0; flex:1; line-height:1.25; }
.side .who .nm strong { color:var(--ink); font-size:.84rem; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.side .who .nm span { font-size:.72rem; color:var(--muted); }
.side .who .themebtn:hover { background:var(--surface); }
.side .ver { font-size:.68rem; color:var(--faint); padding:10px 8px 0; }
.appmain { min-width:0; }
.appmain .wrap { max-width:1320px; padding:28px 32px 70px; }
.mobbar { display:none; }
.scrim { display:none; }
@media (max-width:900px) {
  .app { grid-template-columns:1fr; }
  .side { position:fixed; left:0; top:0; bottom:0; width:270px; transform:translateX(-100%);
    transition:transform .2s ease; box-shadow:var(--shadow-lg); }
  body.navopen .side { transform:none; }
  body.navopen .scrim { display:block; position:fixed; inset:0; background:rgba(8,13,20,.4); z-index:1050; }
  .mobbar { display:flex; align-items:center; gap:10px; position:sticky; top:0; z-index:1000; padding:10px 16px;
    background:color-mix(in srgb, var(--surface) 88%, transparent); backdrop-filter:blur(10px);
    border-bottom:1px solid var(--hair); }
  .mobbar .mark { font-weight:700; color:var(--ink); }
  .mobbar .mark b { color:var(--navy); }
  .appmain .wrap { padding:18px 16px 60px; }
}

/* EWS page: settings on the left, locations on the right */
.cols-ews { display:grid; grid-template-columns:minmax(0,1fr) 400px; gap:18px; align-items:start; }
@media (max-width:1180px) { .cols-ews { grid-template-columns:1fr; }  }
.cols-loc .addgrid { grid-template-columns:1fr; }
.loclist { list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:6px; }
.loc { display:flex; align-items:center; gap:12px; padding:10px 12px; border-radius:var(--rs); background:var(--sunk); color:inherit; }
.loc:hover { text-decoration:none; box-shadow:inset 0 0 0 1px var(--navy); }
.loc-ic { width:30px; height:30px; flex:none; border-radius:9px; display:grid; place-items:center;
  background:var(--accent-soft); color:var(--navy); font-weight:700; font-size:.78rem; }
.loc-ic:empty::before { content:""; width:12px; height:12px; border-radius:3px; border:2px solid currentColor; }
.loc-ic.pts { background:#E3F5EC; color:#0B7F53; font-size:.9rem; }
.loc-b { display:flex; flex-direction:column; min-width:0; flex:1; gap:1px; }
.loc-b strong { color:var(--ink); font-size:.9rem; }
.loc-go { color:var(--faint); font-size:1.3rem; }
.minimap { height:220px; border-radius:var(--rs); overflow:hidden; cursor:crosshair; background:var(--hair); }
.app { background:linear-gradient(to right, var(--surface) 251px, var(--hair) 251px, var(--hair) 252px, transparent 252px); }
.side { border-right:0; background:transparent; }
@media (max-width:900px) { .app { background:none; } .side { background:var(--surface); } }
.card code, .card li code { overflow-wrap:anywhere; word-break:break-word; }
.cols-loc .cardhead { flex-wrap:nowrap; align-items:center; }
.cols-loc .cardhead > div:first-child { flex:1 1 auto; }

/* ============================================================ Queay brand ==
   Navy #172238, blue #4668B0, cyan #4FAED6 on #F7F7F7 — the logo's own
   colours. The wordmark is Poppins, as in the logo. */
.qmark { width:30px; height:32px; flex:none; color:var(--brand-navy); }
.qmark.sm { width:22px; height:24px; }
.qmark.lg { width:44px; height:46px; }
:root[data-theme="dark"] .qmark { color:#E9EEF8; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .qmark { color:#E9EEF8; } }
.qword { display:flex; flex-direction:column; line-height:1; gap:3px; }
.qword .q1 { font-family:"Poppins", var(--font); font-weight:700; font-size:1.18rem; letter-spacing:.02em; color:var(--ink); }
.qword .q2 { font-family:"Poppins", var(--font); font-weight:600; font-size:.6rem; letter-spacing:.24em; text-transform:uppercase; color:var(--cyan); }
.side .brand { display:flex; align-items:center; gap:11px; padding:6px 8px 14px; }
.mobbar .qword .q1 { font-size:1rem; }
h1 { font-family:"Poppins", var(--font); font-weight:600; letter-spacing:-.015em; }
.eyebrow { color:var(--cyan); }
.side .navh { color:var(--faint); }
.side nav a.on { box-shadow:inset 3px 0 0 var(--navy); }
.side .who .av { background:var(--brand-navy); }
:root[data-theme="dark"] .side .who .av { background:var(--navy); }
.loginbrand { display:flex; align-items:center; gap:12px; margin-bottom:6px; }
.loginbrand .q2 { letter-spacing:.14em; font-size:.56rem; }
body.bare { background:radial-gradient(900px 500px at 15% -10%, #E7EDF8, transparent), radial-gradient(700px 400px at 100% 110%, #E3F2F9, transparent), var(--paper); }
:root[data-theme="dark"] body.bare { background:var(--paper); }
.loc-ic.pts { background:#E4F3FA; color:#2A87B0; }
.card pre { white-space:pre-wrap; overflow-wrap:anywhere; max-width:100%; }
/* The brand blue carries white text in both themes (5:1); the lighter
   dark-mode blue is for links and outlines only. */
.btn { background:#4668B0; }
.btn:hover { background:#3A5A9E; }
.btn.ghost { background:var(--surface); }
.btn.ghost:hover { background:var(--sunk); }
.leaflet-container .leaflet-popup-content-wrapper, .leaflet-container .leaflet-popup-tip { background:var(--surface); color:var(--ink); box-shadow:var(--shadow-lg); }
.leaflet-container a.leaflet-popup-close-button { color:var(--muted); }

/* ============================================================ workflows ==
   Two ways in: an LGU, or a company. The chooser, the numbered steps shown
   on every page of a workflow, and the "what next" strip. */
.startgrid { display:grid; grid-template-columns:repeat(auto-fit,minmax(320px,1fr)); gap:18px; }
.startcard { display:flex; flex-direction:column; gap:10px; background:var(--surface); border-radius:var(--radius);
  box-shadow:var(--shadow); padding:26px 28px; color:var(--body); border:2px solid transparent; transition:border-color .15s, transform .15s; }
.startcard:hover { border-color:var(--navy); text-decoration:none; transform:translateY(-2px); }
.startcard h2 { font-family:"Poppins",var(--font); font-size:1.35rem; }
.startcard p { color:var(--muted); }
.startcard ol { margin:4px 0 8px; padding-left:1.2em; display:flex; flex-direction:column; gap:6px; font-size:.9rem; color:var(--ink); }
.startcard ol li::marker { color:var(--cyan); font-weight:700; }
.startcard .btn { margin-top:auto; }
.sc-k { font-size:.7rem; font-weight:700; letter-spacing:.14em; text-transform:uppercase; color:var(--cyan); }
.sc-ic { width:48px; height:48px; border-radius:14px; display:grid; place-items:center; color:#fff; flex:none; }
.sc-ic svg { width:26px; height:26px; fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; }
.sc-ic.lgu { background:#4668B0; } .sc-ic.co { background:#172238; }
:root[data-theme="dark"] .sc-ic.co { background:#2E3F5E; }
.startmini { display:grid; grid-template-columns:repeat(auto-fit,minmax(280px,1fr)); gap:12px; margin-bottom:18px; }
.startmini a { display:flex; align-items:center; gap:14px; background:var(--surface); border-radius:var(--radius); box-shadow:var(--shadow);
  padding:14px 16px; color:var(--body); border:1px solid transparent; }
.startmini a:hover { border-color:var(--navy); text-decoration:none; }
.startmini .sc-ic { width:40px; height:40px; border-radius:12px; }
.startmini b { display:block; color:var(--ink); } .startmini small { color:var(--muted); font-size:.8rem; }

.flow-steps { list-style:none; margin:0 0 18px; padding:6px; display:flex; gap:4px; background:var(--surface);
  border-radius:var(--radius); box-shadow:var(--shadow); overflow-x:auto; }
.flow-steps li { flex:1 1 0; min-width:150px; display:flex; align-items:center; gap:10px; padding:10px 12px; border-radius:10px; color:var(--muted); }
.flow-steps .fs-n { width:28px; height:28px; border-radius:50%; flex:none; display:grid; place-items:center; font:700 .8rem var(--mono);
  background:var(--sunk); color:var(--muted); border:1px solid var(--hair-strong); }
.flow-steps .fs-t { display:flex; flex-direction:column; min-width:0; line-height:1.25; }
.flow-steps b { font-size:.85rem; color:var(--ink); font-weight:600; }
.flow-steps small { font-size:.74rem; }
.flow-steps li.now { background:var(--accent-soft); }
.flow-steps li.now .fs-n { background:var(--navy); color:#fff; border-color:transparent; }
.flow-steps li.done .fs-n { background:var(--ok-bg); color:var(--ok); border-color:transparent; }
.flow-next { display:flex; align-items:center; gap:14px; flex-wrap:wrap; justify-content:space-between; background:var(--accent-soft);
  border-radius:var(--rs); padding:12px 16px; margin:-6px 0 18px; font-size:.9rem; }
.flow-next form { margin:0; }
.stepno { display:inline-grid; place-items:center; width:24px; height:24px; border-radius:50%; background:var(--navy); color:#fff;
  font:700 .75rem var(--mono); margin-right:8px; vertical-align:2px; }

/* EWS Settings: locations beside the ways to add one. */
.cols-loc { display:grid; grid-template-columns:minmax(0,1.1fr) minmax(0,1fr); gap:18px; align-items:start; }
@media (max-width:1100px) { .cols-loc { grid-template-columns:1fr; } }
.tab-n { font:600 .7rem var(--mono); padding:1px 7px; border-radius:999px; background:var(--sunk); color:var(--muted); margin-left:4px; }
nav.tabs button.on .tab-n { background:rgba(255,255,255,.25); color:#fff; }
.tab-dot { display:inline-block; width:8px; height:8px; border-radius:50%; background:var(--err); margin-left:6px; vertical-align:1px; }

/* ── sidebar: BUILD and MANAGE ── */
.side nav a.navcta { margin:4px 0 8px; justify-content:center; background:var(--navy); color:#fff; font-weight:700;
  box-shadow:0 2px 8px color-mix(in srgb, var(--navy) 35%, transparent); }
.side nav a.navcta svg { color:#fff; }
.side nav a.navcta:hover, .side nav a.navcta.on { background:var(--navy-line); color:#fff; }
.side nav a .nav-n { margin-left:auto; font:600 .7rem var(--mono); color:var(--faint); }
.side nav a.on .nav-n { color:var(--navy); }

.ews-status { display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); gap:12px; margin-bottom:18px; }
.ews-status .es { display:flex; align-items:center; gap:12px; background:var(--surface); border-radius:var(--radius); box-shadow:var(--shadow);
  padding:14px 16px; color:var(--muted); font-size:.84rem; border:1px solid transparent; }
.ews-status .es:hover { text-decoration:none; border-color:var(--navy); }
.ews-status .es i { width:10px; height:10px; border-radius:50%; flex:none; background:var(--faint); }
.ews-status .es.ok i { background:var(--ok); } .ews-status .es.bad i { background:var(--err); box-shadow:0 0 0 4px var(--err-bg); }
.ews-status .es span { display:flex; flex-direction:column; }
.ews-status .es b { color:var(--ink); font-size:.92rem; }

/* ============================================================ setup ==
   The catalogue as a map on the left; database, connectivity and security
   as three status cards on the right. */
.setgrid { display:grid; grid-template-columns:minmax(0,1.05fr) minmax(0,1fr); gap:18px; align-items:start; }
@media (max-width:1100px) { .setgrid { grid-template-columns:1fr; } }
.setcol { display:flex; flex-direction:column; gap:16px; }
.setcol .card { margin-bottom:0; }
.setcard-h { display:flex; align-items:flex-start; gap:14px; }
.setcard-h > div { flex:1; min-width:0; display:flex; flex-direction:column; gap:3px; }
.set-ic { width:42px; height:42px; border-radius:12px; flex:none; display:grid; place-items:center; background:var(--sunk); color:var(--muted); }
.set-ic svg { width:22px; height:22px; fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; }
.set-ic.ok { background:var(--ok-bg); color:var(--ok); } .set-ic.warn { background:var(--warn-bg); color:var(--warn); } .set-ic.bad { background:var(--err-bg); color:var(--err); }
.set-st { flex:none; font-size:.72rem; font-weight:700; padding:4px 10px; border-radius:999px; background:var(--sunk); color:var(--muted); white-space:nowrap; }
.set-st.ok { background:var(--ok-bg); color:var(--ok); } .set-st.warn { background:var(--warn-bg); color:var(--warn); } .set-st.bad { background:var(--err-bg); color:var(--err); }
.setcard .checks { font-size:.84rem; }
.phmap { position:relative; background:linear-gradient(180deg, color-mix(in srgb, var(--cyan) 10%, var(--surface)), var(--surface)); border-radius:var(--rs); padding:6px; }
.phmap svg { display:block; width:100%; max-height:640px; }
.phmap .coast { fill:none; stroke:color-mix(in srgb, var(--navy) 45%, transparent); stroke-width:1.2; stroke-linejoin:round; }
.phmap .reg { cursor:pointer; outline:none; }
.phmap .reg circle { fill:var(--surface); stroke:var(--faint); stroke-width:1.6; stroke-dasharray:3 3; transition:transform .15s, fill .15s; transform-box:fill-box; transform-origin:center; }
.phmap .reg.has circle { fill:var(--navy); stroke:#fff; stroke-width:2; stroke-dasharray:none; filter:drop-shadow(0 2px 4px rgba(16,32,52,.25)); }
.phmap .reg .n { font:700 10.5px var(--mono); text-anchor:middle; dominant-baseline:middle; fill:var(--muted); pointer-events:none; }
.phmap .reg.has .n { fill:#fff; }
.phmap .reg .lb { font:600 11px var(--font); fill:var(--ink); paint-order:stroke; stroke:var(--surface); stroke-width:3px; pointer-events:none; }
.phmap .reg .lb.l { text-anchor:end; }
.phmap .reg:hover circle, .phmap .reg:focus circle { transform:scale(1.12); stroke:var(--cyan); stroke-dasharray:none; }
.phmap .reg.sel circle { stroke:var(--cyan); stroke-width:3.5; stroke-dasharray:none; }
.phkey { position:absolute; left:14px; bottom:12px; display:flex; flex-direction:column; gap:4px; font-size:.72rem; color:var(--muted);
  background:color-mix(in srgb, var(--surface) 85%, transparent); padding:8px 10px; border-radius:10px; }
.phkey i { display:inline-block; width:11px; height:11px; border-radius:50%; margin-right:6px; vertical-align:-1px; border:1.5px dashed var(--faint); }
.phkey i.has { background:var(--navy); border:0; }
.regpick { flex-direction:row; align-items:center; gap:14px; background:var(--sunk); border-radius:var(--rs); padding:12px 14px; }
.regpick > div { flex:1; display:flex; flex-direction:column; gap:2px; min-width:0; }
.regpick b { color:var(--ink); }
.regpick small { font-size:.78rem; }
.regchips { display:flex; flex-wrap:wrap; gap:6px; margin-top:10px; }
.regchip { border:1px solid var(--hair-strong); background:var(--surface); border-radius:999px; padding:4px 10px; font:inherit; font-size:.76rem; color:var(--body); cursor:pointer; }
.regchip em { font-style:normal; font-family:var(--mono); color:var(--muted); margin-left:4px; }
.regchip.has em { color:var(--ok); }
.regchip.sel { border-color:var(--navy); background:var(--accent-soft); }

/* Every remove / close control is a circle with an X, the same as on the
   published early warning sites. */
.chip button, .pinitems li>button, .modal-close, [data-close] {
  width:22px; height:22px; border-radius:50%; display:inline-grid; place-items:center; padding:0;
  border:1px solid var(--line, #d9dfe8); background:var(--surface, #fff); color:var(--muted, #5b6778);
  font-size:15px; line-height:1; cursor:pointer; box-shadow:0 1px 2px rgba(16,32,52,.10); flex:none; }
.chip button:hover, .pinitems li>button:hover, .modal-close:hover, [data-close]:hover {
  background:var(--ink, #172238); color:var(--surface, #fff); border-color:var(--ink, #172238); }


/* ================================================================ OpsCon == */
.pill.s-demo   { background:var(--warn-bg); color:var(--warn); }
.pill.s-live   { background:var(--ok-bg); color:var(--ok); }
.pill.s-paused { background:#FBE0DE; color:#96201B; }
.slots { display:flex; gap:6px; margin-top:6px; }
.slots i { flex:1; height:8px; border-radius:4px; background:var(--hair); }
.slots i.on { background:var(--navy); }
.approw-actions { display:flex; gap:8px; justify-content:flex-end; flex-wrap:wrap; }
.actform { display:flex; gap:6px; align-items:center; flex-wrap:wrap; }
.actform select, .actform input { width:auto; min-width:0; }
.admingrid { display:grid; gap:8px; grid-template-columns:repeat(auto-fit,minmax(130px,1fr)); align-items:end; }
.admingrid label { font-size:.75rem; }
.note-lock { border:1px dashed var(--hair); border-radius:12px; padding:12px 14px; }
.signup { max-width:460px; }
.hp { position:absolute; left:-10000px; width:1px; height:1px; overflow:hidden; }

/* ============================================================ Release 2 == */
.r2grid { display:grid; gap:16px; grid-template-columns:repeat(auto-fit,minmax(300px,1fr)); align-items:start; margin-top:16px; }
.r2grid > .card { margin:0; }
.bigval { font:700 2.1rem/1.1 Poppins, Figtree, sans-serif; letter-spacing:-.02em; color:var(--ink); }
.bigval small { font:500 .85rem Figtree, sans-serif; color:var(--muted); margin-left:6px; letter-spacing:0; }
.packgrid { display:grid; gap:10px; grid-template-columns:repeat(auto-fit,minmax(150px,1fr)); margin:12px 0; }
.packopt { display:flex; flex-direction:column; gap:2px; border:1px solid var(--hair-strong, #d9dfe8); border-radius:12px; padding:12px 14px; cursor:pointer; }
.packopt input { position:absolute; opacity:0; pointer-events:none; }
.packopt b { font-size:1.05rem; color:var(--ink); }
.packopt:has(input:checked) { border-color:var(--navy, #4668B0); box-shadow:0 0 0 1px var(--navy, #4668B0) inset; }
.methods { display:flex; gap:6px; flex-wrap:wrap; margin:6px 0 10px; }
.methods span { font-size:.72rem; font-weight:600; padding:3px 9px; border-radius:999px; background:var(--sunk, #EEF2F7); color:var(--body); }
.subrow { display:flex; gap:10px; align-items:center; justify-content:space-between; flex-wrap:wrap; padding:10px 0; border-bottom:1px solid var(--hair, #E2E8F0); }
.subrow:last-child { border-bottom:0; }
.subrow .what { font-weight:600; color:var(--ink); }
.pill.st-active { background:var(--ok-bg); color:var(--ok); }
.pill.st-past_due, .pill.st-incomplete { background:var(--warn-bg); color:var(--warn); }
.pill.st-unpaid { background:var(--err-bg); color:var(--err); }
.pill.st-cancelled, .pill.st-incomplete_cancelled { background:var(--sunk, #EEF2F7); color:var(--muted); }
.payform { max-width:440px; display:grid; gap:12px; }
.payform .row2 { display:grid; grid-template-columns:1fr 1fr 1fr; gap:10px; }
.payform input { font-family:"IBM Plex Mono", monospace; letter-spacing:.04em; }
.paybox { display:grid; gap:18px; grid-template-columns:minmax(0,1fr) minmax(0,340px); align-items:start; }
@media (max-width:820px) { .paybox { grid-template-columns:1fr; } .payform .row2 { grid-template-columns:1fr 1fr; } }
.secure { display:flex; gap:8px; align-items:center; font-size:.78rem; color:var(--muted); }
.libtable td.kind { white-space:nowrap; }
.libbar { height:8px; border-radius:4px; background:var(--hair, #E2E8F0); overflow:hidden; margin-top:6px; }
.libbar i { display:block; height:100%; background:var(--navy, #4668B0); }
.chunk { white-space:pre-wrap; font-size:.84rem; line-height:1.5; background:var(--sunk, #F4F7FA); border-radius:10px; padding:10px 12px; margin:8px 0; max-height:220px; overflow:auto; }
.wlist { display:grid; gap:10px; margin:12px 0; }
.wrow { border:1px solid var(--hair-strong, #d9dfe8); border-radius:12px; padding:12px; display:grid; gap:8px; grid-template-columns:repeat(auto-fit,minmax(140px,1fr)); align-items:end; }
.wrow .wh { grid-column:1/-1; display:flex; gap:8px; align-items:center; }
.wrow .wh b { flex:1; }
.wrow textarea { min-height:70px; grid-column:1/-1; }
.agentbox { border:1px solid var(--hair-strong, #d9dfe8); border-radius:12px; overflow:hidden; }
.agentlog { max-height:340px; overflow:auto; padding:12px; display:flex; flex-direction:column; gap:8px; background:var(--sunk, #F4F7FA); }
.agentlog .m { max-width:85%; padding:8px 11px; border-radius:12px; font-size:.88rem; line-height:1.45; white-space:pre-wrap; }
.agentlog .u { align-self:flex-end; background:var(--navy, #4668B0); color:#fff; }
.agentlog .a { align-self:flex-start; background:var(--surface, #fff); border:1px solid var(--hair, #E2E8F0); }
.agentlog .a.no { background:var(--warn-bg); color:var(--warn); }
.agentform { display:flex; gap:8px; padding:10px; }
.agentform input { flex:1; }
.checklist { display:grid; gap:6px; margin:10px 0; }
.checklist label { font-size:.88rem; font-weight:500; }

.viewas { position:sticky; top:0; z-index:50; display:flex; gap:12px; align-items:center; justify-content:space-between; flex-wrap:wrap;
  padding:10px 16px; background:#FFF4DE; color:#6B4A00; border-bottom:1px solid #E8C77A; font-size:.86rem; }