/* Public Sans (U.S. Web Design System), self-hosted. SIL OFL 1.1: /fonts/OFL-PublicSans.txt */
@font-face { font-family: "Public Sans"; font-style: normal; font-display: swap; font-weight: 100 900;
  src: url(/fonts/public-sans-latin-wght-normal.woff2) format("woff2-variations"); }
:root {
  --bg: #f7f6f2; --surface: #ffffff; --ink: #1d232a; --muted: #5d6670; --line: #dcd9d0; --accent: #0b5c8a;
  --accent-ink: #ffffff; --accent-hi: #0e74ad; --land: #e6e3da; --req: #c2410c; --border: #f7f6f2;
  --ok: #1f6b3a; --ok-bg: #e3f2e7; --err: #a3261b; --err-bg: #fbe9e6;
  font: 16px/1.5 "Public Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
}
@media (prefers-color-scheme: dark) {
  :root {
    --bg: #14171a; --surface: #1c2024; --ink: #e8e6e1; --muted: #9aa3ab; --line: #31373d; --accent: #4f9fd4;
    --accent-ink: #0d1114; --accent-hi: #7dbbe6; --land: #2a2f35; --req: #f08a4b; --border: #14171a;
    --ok: #7fd39a; --ok-bg: #18301f; --err: #ff8a7a; --err-bg: #3a1e1a;
  }
}
* { box-sizing: border-box; }
body { margin: 0; background: var(--bg); color: var(--ink); }
a { color: var(--accent); text-decoration-thickness: 1px; text-underline-offset: 2px; }
h1 { font-size: 2rem; line-height: 1.2; margin: .5em 0 .3em; }
h2 { font-size: 1.25rem; margin: 1.6em 0 .6em; }
.wrap { max-width: 1120px; margin: 0 auto; padding: 0 16px; }
.muted { color: var(--muted); }
.small { font-size: .85rem; }
.lede { font-size: 1.1rem; color: var(--muted); max-width: 46rem; margin: 0; }

.top { background: var(--surface); border-bottom: 1px solid var(--line); }
.top-inner { display: flex; align-items: center; gap: 24px; min-height: 56px; flex-wrap: wrap; }
.brand { font-weight: 700; color: var(--ink); text-decoration: none; display: flex; align-items: center; gap: 8px; }
.brand-mark { transition: transform 200ms ease; }
.brand:hover .brand-mark { transform: rotate(-8deg); }
.top nav { display: flex; gap: 16px; margin-left: auto; }
.top nav a { color: var(--ink); text-decoration: none; }
.top nav a:hover { color: var(--accent); }

/* map */
.map-wrap { position: relative; margin: 20px 0 0; }
.map { width: 100%; max-width: 1000px; height: auto; display: block; margin: 0 auto; }
.st path { stroke: var(--border); stroke-width: 1; stroke-linejoin: round; transition: fill 120ms ease; }
.st-none path { fill: color-mix(in oklab, var(--req) calc(var(--p, 0%) * .85), var(--land)); }
.st-live path { fill: var(--accent); }
.st-building path { fill: url(#hatch); }
.hatch-bg { fill: var(--land); }
.hatch-fg { fill: var(--accent); opacity: .55; }
.st { cursor: pointer; outline: none; }
.st:hover path, .st:focus-visible path, .st.active path { stroke: var(--ink); stroke-width: 2; }
.st-live:hover path, .st-live:focus-visible path { fill: var(--accent-hi); }
.st-none:hover path, .st-none:focus-visible path { fill: color-mix(in oklab, var(--req) calc(var(--p, 0%) * .85 + 15%), var(--land)); }
/* draw the hovered state last so its outline isn't covered by neighbours */
.labels { pointer-events: none; }
.labels text { font-size: 12px; font-weight: 600; fill: var(--muted); text-anchor: middle; dominant-baseline: central; }
.labels text.on { fill: var(--accent-ink); }
.labels text.half { paint-order: stroke; stroke: var(--land); stroke-width: 3px; fill: var(--ink); }
.labels text.sm { font-size: 8.5px; }
.callout { cursor: pointer; outline: none; }
.callout text { font-size: 8.5px; font-weight: 600; fill: var(--muted); dominant-baseline: central; }
.callout:hover text, .callout:focus-visible text, .callout.active text { fill: var(--ink); text-decoration: underline; }
.legend { display: flex; flex-wrap: wrap; gap: 8px 20px; justify-content: center; font-size: .9rem; color: var(--muted);
  margin-top: 8px; }
.legend span { display: inline-flex; align-items: center; gap: 6px; }
.sw { display: inline-block; width: 14px; height: 14px; border-radius: 3px; }
.sw-live { background: var(--accent); }
.sw-building { background: repeating-linear-gradient(45deg, color-mix(in oklab, var(--accent) 55%, var(--land)) 0 3px, var(--land) 3px 6px); }
.sw-ramp { width: 44px; background: linear-gradient(90deg, var(--land), color-mix(in oklab, var(--req) 85%, var(--land))); }
.tip { position: absolute; z-index: 5; pointer-events: none; background: var(--surface); color: var(--ink);
  border: 1px solid var(--line); border-radius: 8px; padding: 8px 12px; width: max-content; max-width: 280px; font-size: .9rem;
  box-shadow: 0 4px 16px rgba(0, 0, 0, .12); transform: translate(-50%, calc(-100% - 14px)); }
.tip strong { display: block; }
.tip .go { color: var(--accent); font-weight: 600; }

/* site cards */
.cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 12px; }
.card { background: var(--surface); border: 1px solid var(--line); border-radius: 10px; padding: 14px 16px; }
.site-card { display: flex; flex-direction: column; gap: 6px; text-decoration: none; color: var(--ink);
  transition: border-color 120ms ease, transform 120ms ease; }
.site-card:hover { border-color: var(--accent); transform: translateY(-1px); }
.site-card .host { color: var(--accent); font-size: .9rem; margin-top: auto; }
.pill { align-self: flex-start; font-size: .72rem; font-weight: 700; text-transform: uppercase; letter-spacing: .03em;
  padding: 1px 8px; border-radius: 999px; background: var(--land); color: var(--muted); }

/* request form + leaderboard */
.request { display: grid; grid-template-columns: 1fr 1fr; gap: 16px 48px; }
@media (max-width: 760px) { .request { grid-template-columns: 1fr; } }
.req-form { display: flex; flex-direction: column; gap: 14px; }
.req-form label { display: flex; flex-direction: column; gap: 4px; font-weight: 600; }
.req-form label .muted { font-weight: 400; }
select, textarea, button { font: inherit; color: var(--ink); background: var(--surface); border: 1px solid var(--line);
  border-radius: 8px; padding: 8px 10px; }
textarea { resize: vertical; font-weight: 400; }
select:focus, textarea:focus, button:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
button { background: var(--accent); color: var(--accent-ink); border-color: var(--accent); font-weight: 600;
  cursor: pointer; align-self: flex-start; padding: 9px 18px; }
button:hover { background: var(--accent-hi); }
button:disabled { opacity: .6; cursor: default; }
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.flash { border-radius: 8px; padding: 10px 14px; }
.flash-ok { background: var(--ok-bg); color: var(--ok); }
.flash-err { background: var(--err-bg); color: var(--err); }
.board { list-style: none; padding: 0; margin: 0; counter-reset: b; }
.board li { display: grid; grid-template-columns: 9rem 1fr 3rem; align-items: center; gap: 10px; padding: 5px 0;
  counter-increment: b; }
.board li a { color: var(--ink); text-decoration: none; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.board li a::before { content: counter(b) ". "; color: var(--muted); }
.board li a:hover { color: var(--accent); }
.bar { height: 10px; border-radius: 5px; background: linear-gradient(var(--req), var(--req)) left / var(--w) 100% no-repeat,
  var(--land); }
.n { text-align: right; font-variant-numeric: tabular-nums; color: var(--muted); }

.foot { border-top: 1px solid var(--line); margin-top: 56px; padding-top: 12px; padding-bottom: 32px; font-size: .9rem;
  color: var(--muted); }
@media (prefers-reduced-motion: reduce) { * { transition: none !important; } }