:root {
  --bg: #f6f7f9; --panel: #ffffff; --ink: #14181f; --muted: #626b7a;
  --line: #dfe3ea; --line-soft: #eef1f5;
  --accent: #0f5f4e; --accent-soft: #e6f2ef; --accent-ink: #0b4a3d;
  --strong: #1f7a5c; --promising: #4f9d54; --marginal: #c98a1e;
  --weak: #d1642f; --poor: #b23b3b;
  --shadow: 0 1px 2px rgba(16,24,40,.05), 0 4px 12px rgba(16,24,40,.05);
  --radius: 10px;
}
@media (prefers-color-scheme: dark) {
  :root {
    --bg: #0e1116; --panel: #161b23; --ink: #e8ecf2; --muted: #97a1b0;
    --line: #262d38; --line-soft: #1e242e;
    --accent: #4fd1a5; --accent-soft: #14312a; --accent-ink: #7ee2bd;
    --shadow: 0 1px 2px rgba(0,0,0,.3), 0 4px 14px rgba(0,0,0,.25);
  }
}
* { box-sizing: border-box; }
body {
  margin: 0; background: var(--bg); color: var(--ink);
  font: 15px/1.5 -apple-system, BlinkMacSystemFont, "Segoe UI", Inter, Roboto, sans-serif;
  -webkit-font-smoothing: antialiased;
}
a { color: var(--accent); text-decoration: none; }
a:hover { text-decoration: underline; }

/* --- chrome --- */
header.top {
  display: flex; align-items: center; gap: 26px; padding: 0 22px;
  background: var(--panel); border-bottom: 1px solid var(--line);
  position: sticky; top: 0; z-index: 500; height: 56px;
}
.brand { font-weight: 700; letter-spacing: -.02em; font-size: 16px; white-space: nowrap; }
.brand span { color: var(--accent); }
nav.main { display: flex; gap: 2px; flex: 1; }
nav.main a {
  padding: 7px 13px; border-radius: 7px; color: var(--muted);
  font-weight: 500; font-size: 14px;
}
nav.main a:hover { background: var(--line-soft); text-decoration: none; color: var(--ink); }
nav.main a.on { background: var(--accent-soft); color: var(--accent-ink); }
.who { color: var(--muted); font-size: 13px; display: flex; align-items: center; gap: 12px; }

main { padding: 24px 22px 60px; max-width: 1500px; margin: 0 auto; }
h1 { font-size: 23px; margin: 0 0 4px; letter-spacing: -.02em; }
h2 { font-size: 16px; margin: 0 0 14px; letter-spacing: -.01em; }
.lede { color: var(--muted); margin: 0 0 22px; max-width: 78ch; font-size: 14px; }

/* --- surfaces --- */
.card {
  background: var(--panel); border: 1px solid var(--line);
  border-radius: var(--radius); padding: 18px; box-shadow: var(--shadow);
}
.grid { display: grid; gap: 16px; }
.g4 { grid-template-columns: repeat(4, 1fr); }
.g3 { grid-template-columns: repeat(3, 1fr); }
.g2 { grid-template-columns: repeat(2, 1fr); }
.split { grid-template-columns: 340px 1fr; align-items: start; }
@media (max-width: 1100px) { .g4 { grid-template-columns: repeat(2,1fr); } .split, .g3, .g2 { grid-template-columns: 1fr; } }
@media (max-width: 680px) { .g4 { grid-template-columns: 1fr; } }

.stat .k { color: var(--muted); font-size: 12px; text-transform: uppercase;
  letter-spacing: .06em; font-weight: 600; }
.stat .v { font-size: 27px; font-weight: 680; letter-spacing: -.03em; margin-top: 6px;
  font-variant-numeric: tabular-nums; }
.stat .s { color: var(--muted); font-size: 12.5px; margin-top: 3px; }

/* --- tables --- */
table { width: 100%; border-collapse: collapse; font-size: 13.5px; }
th, td { text-align: left; padding: 8px 10px; border-bottom: 1px solid var(--line-soft); }
th { color: var(--muted); font-weight: 600; font-size: 11.5px; text-transform: uppercase;
  letter-spacing: .05em; white-space: nowrap; position: sticky; top: 56px; background: var(--panel);
  box-shadow: inset 0 -1px 0 var(--line); }
/* A table inside .scroll or .tall is its own scroll container, so the header must
   pin to the container's top edge. The 56px offset above only clears the fixed
   page header, and applying it here pushes the header down over the first rows. */
.scroll th, .tall th { top: 0; }
th a { color: inherit; }
td.num, th.num { text-align: right; font-variant-numeric: tabular-nums; }
tbody tr:hover { background: var(--line-soft); }
.scroll { overflow-x: auto; }
.tall { max-height: 460px; overflow-y: auto; }

/* --- bits --- */
.pill { display: inline-block; padding: 2px 8px; border-radius: 20px; font-size: 11.5px;
  font-weight: 600; background: var(--line-soft); color: var(--muted); white-space: nowrap; }
.pill.ok { background: #e4f4ea; color: #17693c; }
.pill.no { background: #fbe6e6; color: #a63232; }
.pill.wait { background: #fdf1dc; color: #8a5d10; }
.pill.live { background: var(--accent-soft); color: var(--accent-ink); }
@media (prefers-color-scheme: dark) {
  .pill.ok { background: #123020; color: #7fdca4; }
  .pill.no { background: #3a1a1a; color: #f0a0a0; }
  .pill.wait { background: #33280f; color: #e8c47a; }
}
.bar { height: 6px; background: var(--line-soft); border-radius: 4px; overflow: hidden; min-width: 60px; }
.bar > i { display: block; height: 100%; background: var(--accent); }

.band { font-weight: 700; }
.band.Strong { color: var(--strong); } .band.Promising { color: var(--promising); }
.band.Marginal { color: var(--marginal); } .band.Weak { color: var(--weak); }
.band.Poor { color: var(--poor); }

/* --- forms --- */
label { display: block; font-size: 12px; font-weight: 600; color: var(--muted);
  margin-bottom: 5px; text-transform: uppercase; letter-spacing: .05em; }
input[type=text], input[type=email], input[type=password], input[type=number], select, textarea {
  width: 100%; padding: 8px 10px; border: 1px solid var(--line); border-radius: 7px;
  background: var(--bg); color: var(--ink); font: inherit; font-size: 14px;
}
input:focus, select:focus, textarea:focus { outline: 2px solid var(--accent); outline-offset: -1px; border-color: transparent; }
select[multiple] { height: 108px; }
.field { margin-bottom: 13px; }
button, .btn {
  padding: 8px 15px; border-radius: 7px; border: 1px solid transparent; cursor: pointer;
  background: var(--accent); color: #fff; font: inherit; font-weight: 600; font-size: 14px;
}
button:hover, .btn:hover { filter: brightness(1.08); text-decoration: none; }
button.ghost, .btn.ghost { background: transparent; color: var(--ink); border-color: var(--line); }
button:disabled { opacity: .55; cursor: not-allowed; }
.row { display: flex; gap: 9px; align-items: center; flex-wrap: wrap; }

/* --- auth --- */
.auth-wrap { min-height: 100vh; display: grid; place-items: center; padding: 24px; }
.auth { width: 100%; max-width: 380px; }
.auth h1 { font-size: 20px; margin-bottom: 6px; }
.err { background: #fbe6e6; color: #a63232; padding: 9px 12px; border-radius: 7px;
  font-size: 13.5px; margin-bottom: 14px; }
@media (prefers-color-scheme: dark) { .err { background: #3a1a1a; color: #f0a0a0; } }
.ok { background: #e4f4ea; color: #17693c; padding: 9px 12px; border-radius: 7px;
  font-size: 13.5px; margin-bottom: 14px; }
@media (prefers-color-scheme: dark) { .ok { background: #123020; color: #7fdca4; } }

/* --- map --- */
#map, #screenmap { border-radius: var(--radius); border: 1px solid var(--line); z-index: 1; }
/* Size both maps to the viewport rather than a fixed pixel height: the screening
   sidebar is three explanatory cards tall now, and a short map left dead space
   beside it and cramped the grid-point popup. */
#map { height: clamp(520px, 78vh, 900px); }
#landmap { height: clamp(420px, 58vh, 700px); border-radius: var(--radius);
  border: 1px solid var(--line); z-index: 1; }
#screenmap { height: clamp(440px, 62vh, 760px); }
.legend { background: var(--panel); padding: 9px 11px; border-radius: 8px; box-shadow: var(--shadow);
  font-size: 12px; line-height: 1.7; border: 1px solid var(--line); }
.legend i { width: 10px; height: 10px; border-radius: 50%; display: inline-block; margin-right: 6px; }

/* --- misc --- */
.note { font-size: 12.5px; color: var(--muted); background: var(--line-soft);
  padding: 9px 12px; border-radius: 7px; border-left: 3px solid var(--accent); }
.muted { color: var(--muted); }
.small { font-size: 12.5px; }
.mono { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 12.5px; }
.spacer { height: 20px; }
.factor { border: 1px solid var(--line); border-radius: 9px; padding: 13px; margin-bottom: 10px; }
.factor h3 { margin: 0; font-size: 14px; display: flex; justify-content: space-between; align-items: center; gap: 10px; }
.factor p { margin: 7px 0 0; font-size: 13px; color: var(--muted); }
details summary { cursor: pointer; font-size: 12.5px; color: var(--accent); margin-top: 8px; }

/* --- explanatory copy --- */
.hint { font-size: 12px; color: var(--muted); margin: 5px 0 0; line-height: 1.45; }
.hint em { font-style: normal; font-weight: 600; color: var(--ink); }
.weight { padding: 9px 0; border-bottom: 1px solid var(--line-soft); }
.weight:last-of-type { border-bottom: 0; padding-bottom: 0; }
.weight p { margin: 3px 0 0; font-size: 12px; color: var(--muted); line-height: 1.45; }
.empty-state { border-style: dashed; box-shadow: none; }
.legend-inline i { width: 9px; height: 9px; border-radius: 50%; display: inline-block; margin-right: 5px; }

.glossary dl { margin: 4px 0 0; columns: 2; column-gap: 34px; }
.glossary dt { font-weight: 650; font-size: 13.5px; margin-top: 14px; break-after: avoid; }
.glossary dd { margin: 3px 0 0; font-size: 13px; color: var(--muted); line-height: 1.5;
  break-inside: avoid; }
@media (max-width: 900px) { .glossary dl { columns: 1; } }

/* --- map popups --- */
.leaflet-popup-content-wrapper, .leaflet-popup-tip {
  background: var(--panel); color: var(--ink); box-shadow: var(--shadow);
}
.leaflet-popup-content { margin: 12px 14px; font: inherit; }
.pop strong { font-size: 14px; }
.pop p { line-height: 1.45; }
.popstats { margin: 0 0 4px; }
.popstats dt { font-size: 11px; text-transform: uppercase; letter-spacing: .05em;
  color: var(--muted); font-weight: 600; margin-top: 8px; }
.popstats dd { margin: 2px 0 0; font-size: 13px; }
.popbtn { width: 100%; margin-top: 4px; padding: 7px 12px; font-size: 13px; }