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

:root {
  --navy:#1E2A78; --navy-deep:#141C52; --navy-line:#2E3C93;
  --gold:#F5C400; --gold-deep:#B08A00;
  --green:#3E9B33; --sand:#D6B182;

  --paper:#F5F6FA; --surface:#FFFFFF; --sunk:#EEF1F7;
  --ink:#101637; --body:#2B3352; --muted:#5F678A;
  --hair:#DCE1EC; --hair-strong:#BFC7D9;

  --ok:#2F7C2A; --ok-bg:#E5F1E2;
  --warn:#9A7A00; --warn-bg:#FAF3D8;
  --err:#96201B; --err-bg:#F7E4E2;

  --shadow:0 1px 2px rgba(16,22,55,.05), 0 10px 26px -20px rgba(16,22,55,.45);
  --radius:4px;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --navy:#3243AE; --navy-deep:#0B1030; --navy-line:#3F51C4;
    --gold:#FFD52E; --gold-deep:#D9AC00; --green:#57B84A;
    --paper:#0B1030; --surface:#131A3C; --sunk:#1A2249;
    --ink:#EAEDF7; --body:#C3CAE3; --muted:#8992B4;
    --hair:#28315C; --hair-strong:#3A4477;
    --ok:#6EC463; --ok-bg:#183218;
    --warn:#E3C24E; --warn-bg:#332A0D;
    --err:#F0837A; --err-bg:#3A1815;
    --shadow:0 1px 2px rgba(0,0,0,.5), 0 10px 26px -20px rgba(0,0,0,.9);
  }
}

* { box-sizing: border-box; }

body {
  margin:0; background:var(--paper); color:var(--body);
  font:15px/1.55 "Public Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  -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:ui-monospace, "JetBrains Mono", Menlo, Consolas, monospace; 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; }
.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; }
.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; }