:root {
  color-scheme:dark;
  --bg:#14161a; --card:#1e2127; --line:#333843; --text:#eceff4; --muted:#9aa3b2; --accent:#4da3ff; --danger:#e5484d;
  --on-accent:#04121f; --flash:#23364f; --flash-err:#4f2328;
  --map-bg:#0e0f12; --wall:#8fc2e8; --label:#cfd8e3; --label-strong:#e8eef6; --label-accent:#e5484d;
  --seg-lo:#3c76b5; --seg-mid:#4da3ff; --seg-hi:#a8d2ff;
  --dot-ring:#fff; --dot-empty:#3a3f48; --dot-empty-ring:#8a8f98; --compass:#9db3c8;
}
:root[data-theme="light"] {
  color-scheme:light;
  --bg:#f3f5f8; --card:#fff; --line:#d3d9e2; --text:#1a1d23; --muted:#5b6574; --accent:#1a6fd1; --danger:#d02f35;
  --on-accent:#fff; --flash:#dbe9fb; --flash-err:#fbdcdf;
  --map-bg:#e8edf3; --wall:#4a7fa8; --label:#46566a; --label-strong:#22303f; --label-accent:#c7343a;
  --seg-lo:#5f95d3; --seg-mid:#2f6fbd; --seg-hi:#123f78;
  --dot-ring:#1a1d23; --dot-empty:#c9d0da; --dot-empty-ring:#7b8696; --compass:#46566a;
}
* { box-sizing: border-box; }
body { margin:0; background:var(--bg); color:var(--text); font:16px/1.4 system-ui, sans-serif; }
a { color:var(--accent); }
.bar { display:flex; justify-content:space-between; align-items:center; padding:10px 14px; background:var(--card); border-bottom:1px solid var(--line); }
.brand { font-weight:700; color:var(--text); text-decoration:none; }
.bar nav { display:flex; gap:14px; align-items:center; }
.inline { display:inline; margin:0; }
button.link { background:none; border:0; color:var(--accent); font:inherit; padding:0; cursor:pointer; }
.flash { margin:10px 14px; padding:10px 12px; background:var(--flash); border-radius:8px; }
.flash.err { background:var(--flash-err); }
.card { max-width:640px; margin:0 auto; padding:16px; }
.card.narrow { max-width:360px; }
h1 { font-size:1.4rem; margin:.3em 0; } h2 { font-size:1.1rem; margin:1em 0 .4em; color:var(--muted); }
label { display:block; margin:12px 0; font-size:.9rem; color:var(--muted); }
input, textarea, select { display:block; width:100%; margin-top:4px; padding:10px; font:inherit; color:var(--text); background:var(--bg); border:1px solid var(--line); border-radius:8px; }
input[type=radio], input[type=checkbox] { width:auto; display:inline; }
label.check { display:flex; gap:8px; align-items:center; }
button.primary, .btn.primary { background:var(--accent); color:var(--on-accent); }
button, .btn { display:inline-block; padding:10px 16px; font:inherit; font-weight:600; border:0; border-radius:8px; background:var(--line); color:var(--text); text-decoration:none; cursor:pointer; }
button:disabled { opacity:.5; cursor:default; }
.btn.danger { background:var(--danger); color:#fff; }
form > button.primary { width:100%; margin-top:8px; padding:12px; }
.grid { display:grid; grid-template-columns:repeat(auto-fill, minmax(100px,1fr)); gap:8px; }
.tile { background:var(--card); border:1px solid var(--line); border-radius:10px; padding:10px; text-decoration:none; color:var(--text); display:flex; flex-direction:column; gap:4px; }
.tile span { font-size:.85rem; color:var(--muted); display:flex; align-items:center; gap:3px; }
.chip { display:inline-block; width:14px; height:14px; border-radius:50%; border:1px solid #fff8; vertical-align:middle; }
.route { background:var(--card); border:1px solid var(--line); border-radius:10px; padding:12px; margin:10px 0; }
.rhead { font-size:1.1rem; display:flex; gap:8px; align-items:center; }
.meta { color:var(--muted); font-size:.9rem; margin-top:2px; } .small { font-size:.8rem; }
.actions { display:flex; gap:8px; margin-top:10px; }
.thumb { width:100%; max-height:320px; object-fit:cover; border-radius:8px; margin-top:8px; }
.swatches { display:flex; flex-wrap:wrap; gap:10px; margin-top:6px; }
.swatch span { display:block; width:38px; height:38px; border-radius:50%; border:3px solid transparent; }
.swatch input { position:absolute; opacity:0; }
.swatch input:checked + span { border-color:var(--text); box-shadow:0 0 0 2px var(--accent); }
.swatch { margin:0; position:relative; }
.feed { list-style:none; padding:0; } .feed li { padding:10px 0; border-bottom:1px solid var(--line); }

/* map */
.mapwrap { padding-bottom:40vh; }
/* Map filter: button in the top bar, panel drops below the bar */
.filter-btn { padding:5px 12px; font-size:.85rem; background:var(--card); color:var(--text); border:1px solid var(--line); border-radius:999px; }
.filter-btn.active { border-color:var(--accent); color:var(--accent); }
#filter-count { margin-left:6px; padding:0 6px; border-radius:999px; background:var(--accent); color:var(--on-accent); font-size:.75rem; }
.bar { position:relative; }
.filter-panel { position:absolute; top:100%; left:8px; z-index:50; width:max-content; max-width:min(250px, calc(100% - 16px)); max-height:min(70dvh, calc(100dvh - 70px)); overflow:auto; overflow-x:hidden; padding:10px 12px; background:color-mix(in srgb, var(--card) 88%, transparent); -webkit-backdrop-filter:blur(6px); backdrop-filter:blur(6px); border:1px solid var(--line); border-radius:12px; box-shadow:0 8px 24px #0009; }
.filter-title { font-size:.8rem; text-transform:uppercase; letter-spacing:.04em; color:var(--muted); margin-bottom:2px; }
.filter-grid { display:flex; flex-wrap:wrap; gap:5px; margin-top:4px; }
.filter-panel label.gpill { display:inline-flex; align-items:center; max-width:100%; overflow-wrap:anywhere; margin:0; padding:5px 10px; font-size:.8rem; line-height:1.2; color:var(--text); background:var(--bg); border:1px solid var(--line); border-radius:999px; cursor:pointer; user-select:none; }
.filter-panel label.gpill.on { background:var(--accent); border-color:var(--accent); color:var(--on-accent); font-weight:600; }
.filter-panel label.gpill input { position:absolute; opacity:0; width:0; height:0; margin:0; }
.filter-group { margin-bottom:8px; }
.filter-panel label.check { margin:0; padding:9px 0; font-size:1rem; color:var(--text); }
.filter-panel input[type=checkbox] { width:20px; height:20px; margin:0; }
.filter-foot { display:flex; align-items:center; gap:8px; position:sticky; bottom:-10px; padding:6px 0 2px; background:var(--card); }
.filter-foot .meta { flex:1; margin:0; }
.marker.dim { opacity:.15; }
.legend { padding:8px 14px; color:var(--muted); font-size:.85rem; white-space:nowrap; }
.legend-shape { width:16px; height:16px; vertical-align:middle; fill:none; stroke:currentColor; stroke-width:2.5; }
.olddot { display:inline-block; width:12px; height:12px; border-radius:50%; background:#e5484d; border:2px solid #111; vertical-align:middle; }
.newdot { display:inline-block; width:12px; height:12px; border-radius:50%; background:#2ecc40; border:2px solid #111; vertical-align:middle; }
@media (max-width:480px) { .legend { padding:8px 10px; font-size:.7rem; } .legend-shape { width:13px; height:13px; } .olddot, .newdot { width:10px; height:10px; } }
.maparea { width:100%; overflow:auto; touch-action:pan-x pan-y pinch-zoom; }
#map { width:100%; height:auto; min-width:640px; display:block; background:var(--map-bg); }
#map .walls path { stroke:var(--wall); stroke-width:8; }
#map .maplabel text { fill:var(--label); font-family:system-ui, sans-serif; font-size:34px; }
#map .maplabel text.large { font-size:90px; font-weight:700; fill:var(--label-strong); opacity:.9; }
#map .maplabel text.accent { font-size:76px; font-weight:800; fill:var(--label-accent); }
.maplabels-static { pointer-events:none; }
.maplabel.selected .hit { stroke:#4da3ff; stroke-width:3; stroke-dasharray:8 6; }
.marker { cursor:pointer; }
.marker .dot { stroke:var(--dot-ring); }
.marker .dot.empty { fill:var(--dot-empty); stroke:var(--dot-empty-ring); }
.marker.selected .dot, .marker.selected .dot.empty { stroke:#4da3ff; stroke-width:6; }
.dotlabel { fill:#fff; font:700 24px system-ui, sans-serif; stroke:#000; stroke-width:5px; paint-order:stroke; pointer-events:none; }
.tip rect { fill:#fff; stroke:#111; stroke-width:2; }
.tip text { fill:#111; font:700 30px system-ui, sans-serif; }
.sheet { position:fixed; left:0; right:0; bottom:0; max-height:60vh; overflow:auto; background:var(--card); border-top:1px solid var(--line); border-radius:16px 16px 0 0; padding:16px; box-shadow:0 -6px 20px #0008; }
.sheet[hidden] { display:none; }
.sheet .close { position:absolute; top:8px; right:12px; padding:2px 10px; font-size:1.4rem; background:none; }
@media (min-width:900px) { .sheet { left:auto; width:380px; top:60px; bottom:auto; max-height:calc(100vh - 80px); border-radius:12px; right:16px; } .mapwrap { padding-bottom:0; } }

/* layout editor */
.layout { display:grid; grid-template-columns:1fr 280px; gap:12px; padding:12px; }
.layout #map { min-width:0; cursor:crosshair; }
.panel { background:var(--card); border:1px solid var(--line); border-radius:10px; padding:12px; align-self:start; position:sticky; top:12px; }
.panel .btn { width:100%; margin-top:8px; }
@media (max-width:800px) { .layout { grid-template-columns:1fr; } }

.panel select { display:block; width:100%; margin-top:4px; padding:10px; font:inherit; color:var(--text); background:var(--bg); border:1px solid var(--line); border-radius:8px; }
.panel fieldset { border:1px solid var(--line); border-radius:8px; margin:12px 0; padding:6px 10px; color:var(--muted); font-size:.9rem; }
.panel fieldset label { margin:4px 0; display:flex; gap:6px; align-items:center; }

/* Public map: fill the viewport height. On a portrait phone the map is wider than the screen, so pan sideways. */
.mapwrap .maparea { height:calc(100dvh - 92px); }
.mapwrap #map { height:100%; width:auto; min-width:0; margin:0 auto; }
@media (max-width:899px) { .mapwrap { padding-bottom:0; } .mapwrap.sheet-open { padding-bottom:50vh; } }

/* Desktop: fit the whole map inside the window instead of scrolling. */
@media (min-width:900px) {
  .mapwrap .maparea { height:calc(100dvh - 92px); overflow:hidden; }
  .layout .maparea { height:calc(100dvh - 84px); overflow:hidden; }
  .maparea #map { height:100%; min-width:0; }
  .mapwrap #map { width:100%; margin:0; }
  .layout { align-items:start; }
}

/* Photo lightbox */
img.thumb { cursor:zoom-in; }
.lightbox { position:fixed; inset:0; z-index:100; background:#000d; display:flex; align-items:center; justify-content:center; padding:12px; cursor:zoom-out; }
.lightbox img { max-width:100%; max-height:100%; object-fit:contain; border-radius:6px; }

.sheethead { display:flex; align-items:center; gap:12px; padding-right:36px; }
.sheethead h2 { margin:0; color:var(--text); }
.btn.small { padding:4px 12px; font-size:.85rem; }
.sheet .thumb { margin:10px 0; }
.stationnote { margin:6px 0 10px; white-space:pre-wrap; }

/* Compass: north is to the right of the screen. Stays put while the map pans. */
.mapframe { position:relative; }
.compass { position:absolute; top:8px; left:8px; width:64px; color:var(--compass); opacity:.45; pointer-events:none; z-index:2; }

/* Theme toggle (sun shown in dark mode, moon in light mode) */
.bar-left { display:flex; align-items:center; gap:10px; }
.theme-toggle { display:inline-flex; align-items:center; justify-content:center; width:34px; height:34px; padding:0; background:none; color:var(--muted); border-radius:50%; }
.theme-toggle:hover { color:var(--text); background:var(--line); }
.theme-toggle svg { width:20px; height:20px; }
.theme-toggle .moon { display:none; }
:root[data-theme="light"] .theme-toggle .sun { display:none; }
:root[data-theme="light"] .theme-toggle .moon { display:inline; }
[hidden] { display:none !important; }

.station-settings { margin-top:28px; font-size:.8rem; color:var(--muted); }
.station-settings summary { cursor:pointer; }
.station-settings form { display:flex; flex-wrap:wrap; gap:8px; align-items:center; margin-top:8px; }
.station-settings label { margin:0; font-size:.8rem; flex-basis:100%; }
.station-settings input[name=updated_by] { width:160px; margin:0; padding:5px 8px; font-size:.8rem; }

/* Top bar: keep brand, theme toggle and filter in that order on one line; wrap only as a last resort */
.bar { flex-wrap:wrap; row-gap:4px; }
.bar-left > * { flex:none; white-space:nowrap; }
.bar nav a, .bar nav button.link { white-space:nowrap; }
@media (max-width:480px) {
  .bar { padding:8px 10px; }
  .bar-left { gap:6px; }
  .bar nav { gap:9px; font-size:.88rem; }
}

.statrow { display:flex; align-items:center; gap:8px; padding:6px 0; }
.statrow span { flex:1; }

.logout { margin-top:28px; }

.gradetable { width:100%; border-collapse:collapse; margin-top:4px; }
.gradetable th, .gradetable td { padding:5px 8px; text-align:center; font-weight:normal; }
.gradetable thead th { color:var(--muted); font-size:.85rem; }
.gradetable tbody th { text-align:left; font-weight:600; }
.gradetable tbody tr { border-top:1px solid var(--line); }
.gradetable td:last-child { text-align:right; }
.gradetable thead th:last-child { text-align:right; }

/* Routes-per-grade bar chart: stacked minus / plain / plus, one blue ramp */
.gk-lo { background:var(--seg-lo); } .gk-mid { background:var(--seg-mid); } .gk-hi { background:var(--seg-hi); }
.glegend { display:flex; gap:14px; font-size:.8rem; color:var(--muted); margin:2px 0 6px; }
.glegend span { display:inline-flex; align-items:center; gap:5px; }
.gk { display:inline-block; width:10px; height:10px; border-radius:2px; }
.grow { display:grid; grid-template-columns:3.4em 1fr; align-items:center; column-gap:8px; padding:3px 0; }
.glabel { color:var(--muted); font-size:.85rem; }
.gwrap { display:flex; align-items:center; gap:6px; min-width:0; }
.gtrack { flex:none; width:calc((100% - 2.4em) * var(--p)); display:flex; gap:2px; height:14px; }
.gtotal { font-size:.85rem; color:var(--text); }
.seg { display:block; height:100%; min-width:3px; position:relative; }
.seg:last-child { border-radius:0 4px 4px 0; }
.seg:hover, .seg:focus { filter:brightness(1.15); }
.seg:hover::after { content:attr(data-tip); position:absolute; bottom:calc(100% + 6px); left:50%; transform:translateX(-50%); white-space:nowrap; z-index:5; padding:3px 8px; border-radius:6px; background:var(--text); color:var(--bg); font-size:.8rem; font-style:normal; pointer-events:none; }
.chart-table { margin-top:10px; font-size:.85rem; color:var(--muted); }
.chart-table summary { cursor:pointer; }

.namebox .req { color:var(--danger); }
.namebox .flash { margin:8px 0 0; }