/* Base look, map controls, panel/sheet, bottom bar, tables and page sections are reused from StreetScore
   (StreetGrader/static/style.css) so the two sites read as one family. Rail-specific parts are at the bottom. */
:root {
  --ink: #1d2433; --muted: #5d6679; --line: #d9dde5; --bg: #f6f7f9; --card: #ffffff; --accent: #c2302a;
  --radius: 14px; --green: #1b7f4b; --navy: #0c2f6e; --sky: #a9c9f2;
  --glass: rgba(255,255,255,.68); --glass-gray: rgba(220,225,233,.68); --blur: blur(16px); --float-shadow: 0 2px 10px rgba(0,0,0,.14);
  --fs-2xs: 10px; --fs-xs: 12px; --fs-sm: 14px; --fs-md: 16px; --fs-lg: 18px; --fs-xl: 22px; --fs-2xl: 26px; --fs-h1: 32px;
  --control: 44px; --control-md: 36px; --control-sm: 28px;
  --radius-sm: 10px; --radius-lg: 20px; --pill: 999px;
  /* Project status: one colour each, used on the map, pills, legend and charts */
  --st-live: #1b7f4b; --st-construction: #d97a00; --st-not-started: #6b7280; --st-shelved: #b23b3b; --st-proposed: #7c6fb0; --st-concept: #7b4fbf;
  /* StreetScore's night look (StreetGrader/static/style.css): the dark map, night glass floating on it, the deepest navy
     for the bottom bar and profile menu, text in --on-night */
  --night: #0b1729; --night-glass: rgba(21, 33, 52, .7); --night-raised: rgba(255,255,255,.1); --night-line: rgba(255,255,255,.12);
  --on-night: #eef3fa; --on-night-muted: #a3b2c7;
  /* Colour structure, as on StreetScore but with red as the hero colour (StreetScore's is blue): controls are white or
     grey when not selected, and hero red when selected, open, on, or the main action (the current tab's icon, the chosen
     view, primary buttons, links, keyboard focus). Text on hero red is white. Project status keeps its own colours. */
  --promise: #1f5fbf;  /* a promised date in timelines and charts: data, not a control, so it stays blue */
  --hero: #d93b30; --hero-soft: rgba(217,59,48,.2); --hero-quiet: #7a2e2e;
}
* { box-sizing: border-box; }
[hidden] { display: none !important; }
body { margin: 0; font: 16px/1.5 Helvetica, "Helvetica Neue", Arial, sans-serif; color: var(--ink); background: var(--bg); }
a { color: var(--accent); }
h1 { font-size: var(--fs-h1); line-height: 1.15; margin: 8px 0 12px; }
h2 { font-size: var(--fs-xl); line-height: 1.25; }
h3 { font-size: var(--fs-lg); line-height: 1.3; }
button, .btn { font: inherit; min-height: var(--control); padding: 8px 16px; border-radius: var(--radius); border: 1px solid var(--line); background: var(--card); color: var(--ink); cursor: pointer; text-decoration: none; display: inline-flex; align-items: center; justify-content: center; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
.muted { color: var(--muted); }
.small { font-size: var(--fs-sm); }

/* map page (StreetScore) */
body.map-page { display: flex; flex-direction: column; height: 100vh; height: 100dvh; overflow: hidden; }
#app { position: relative; flex: 1; min-height: 0; }
#map { position: absolute; inset: 0; }
.maplibregl-map, .maplibregl-ctrl, .maplibregl-ctrl-attrib { font-family: inherit; }
header.top { display: flex; align-items: center; gap: 8px; padding: 12px; }
.map-page header.top { position: absolute; top: 12px; left: 12px; right: 12px; z-index: 5; align-items: flex-start; padding: 0; pointer-events: none; }
.map-page header.top > * { pointer-events: auto; }
.logo-btn { flex: none; display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; border-radius: 50%;
  background: var(--glass); -webkit-backdrop-filter: var(--blur); backdrop-filter: var(--blur); box-shadow: var(--float-shadow); }
.logo-btn img { display: block; }
.title-chip { display: flex; flex-direction: column; justify-content: center; min-height: 44px; padding: 4px 16px; border-radius: var(--pill);
  background: var(--glass); -webkit-backdrop-filter: var(--blur); backdrop-filter: var(--blur); box-shadow: var(--float-shadow); line-height: 1.2; }
.title-chip b { font-size: var(--fs-md); }
.title-chip span { font-size: var(--fs-xs); color: var(--muted); }
#osmCredit { position: absolute; left: 0; bottom: 0; z-index: 3; padding: 1px 6px; font-size: var(--fs-2xs); line-height: 12px; color: rgba(29, 36, 51, .7);
  background: rgba(255,255,255,.55); -webkit-backdrop-filter: var(--blur); backdrop-filter: var(--blur); border-top-right-radius: 6px; text-decoration: none; }
#zoomCtl { position: absolute; right: 12px; bottom: 78px; z-index: 4; display: flex; flex-direction: column; align-items: center; gap: 2px;
  width: 52px; padding: 4px; background: var(--glass-gray); -webkit-backdrop-filter: var(--blur); backdrop-filter: var(--blur);
  border-radius: var(--pill); box-shadow: var(--float-shadow); }
#zoomIn, #zoomOut { width: 44px; min-height: var(--control); padding: 0; border: 0; border-radius: 50%; background: transparent;
  font-size: 24px; font-weight: 500; line-height: 1; color: var(--ink); }
#zoomIn:hover, #zoomOut:hover { background: rgba(255,255,255,.6); }

/* Status filter: StreetScore's Layers menu, always open as a legend */
#legend { position: absolute; top: 68px; left: 12px; z-index: 4; display: flex; flex-direction: column; min-width: 210px; padding: 4px;
  background: var(--glass); -webkit-backdrop-filter: var(--blur); backdrop-filter: var(--blur); border-radius: var(--radius); box-shadow: 0 4px 16px rgba(0,0,0,.18); }
#legendItems { display: flex; flex-direction: column; }
#legend .legend-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 0 0 0 10px; font-size: var(--fs-xs); font-weight: 700; color: var(--muted); text-transform: uppercase; letter-spacing: .04em; }
#legend .legend-hint { font-weight: 400; text-transform: none; letter-spacing: 0; }
#legend .fold { min-height: var(--control-md); width: var(--control-md); padding: 0; justify-content: center; border-radius: 50%; font-size: var(--fs-md); color: var(--ink); }
#legend .fold:hover { background: rgba(0,0,0,.06); }
#legend .fold span { display: inline-block; transition: transform .2s ease; }
#legend.folded .fold span { transform: rotate(-90deg); }
#legend.folded { min-width: 0; }
@media (prefers-reduced-motion: reduce) { #legend .fold span { transition: none; } }
#legend button { justify-content: flex-start; gap: 10px; min-height: var(--control-md); padding: 4px 10px; border: 0; background: transparent;
  font-size: var(--fs-sm); font-weight: 600; color: var(--muted); }
#legend button .n { margin-left: auto; font-variant-numeric: tabular-nums; }
#legend button[aria-pressed="true"] { color: var(--ink); }
#legend button[aria-pressed="false"] .key-line { opacity: .25; }
#legend .asof { padding: 4px 10px 6px; font-size: var(--fs-xs); color: var(--muted); border-top: 1px solid var(--line); margin-top: 2px; }

/* Panel: StreetScore's side panel, a bottom sheet on phones */
#panel { position: absolute; right: 12px; top: 12px; width: 380px; max-height: calc(100% - 100px); overflow: auto; z-index: 6; background: #fff;
  border-radius: var(--radius); box-shadow: 0 4px 16px rgba(0,0,0,.25); padding: 16px; }
#panel h2 { margin: 0 34px 2px 0; font-size: var(--fs-xl); }
#panel .close { position: absolute; top: 8px; right: 8px; min-height: var(--control-md); padding: 2px 10px; }

/* Bottom bar (StreetScore) */
.bottom-nav { position: fixed; left: 50%; bottom: 16px; transform: translateX(-50%); z-index: 10; display: flex; gap: 4px; padding: 4px;
  width: min(372px, calc(100% - 24px)); background: var(--glass); -webkit-backdrop-filter: var(--blur); backdrop-filter: var(--blur);
  border-radius: var(--pill); box-shadow: var(--float-shadow); }
.bottom-nav a { flex: 1; display: flex; align-items: center; justify-content: center; gap: 6px; min-height: var(--control); border-radius: var(--pill);
  font-size: var(--fs-sm); font-weight: 600; color: var(--muted); text-decoration: none; white-space: nowrap; }
.bottom-nav a.on { background: var(--ink); color: #fff; }

@media (max-width: 700px) {
  #panel { right: 0; left: 0; top: auto; bottom: 0; width: auto; max-height: 62%; border-radius: var(--radius) var(--radius) 0 0; padding-bottom: 44px; z-index: 12; }
  .bottom-nav { bottom: 12px; }
  #zoomCtl { bottom: 74px; }
  #osmCredit { bottom: 70px; left: 12px; border-radius: var(--radius-sm); }
  #legend { min-width: 0; top: 64px; }
  .title-chip span { display: none; }
}

/* Pages (StreetScore) */
main.page { max-width: 1000px; margin: 0 auto; padding: 16px 16px 110px; }
header.top.page-top a.top-name { font-weight: 700; font-size: var(--fs-lg); color: var(--ink); text-decoration: none; }
table.data { width: 100%; border-collapse: collapse; background: #fff; border-radius: var(--radius); overflow: hidden; font-size: var(--fs-sm); }
table.data th, table.data td { padding: 8px 10px; border-bottom: 1px solid var(--line); text-align: left; vertical-align: top; }
table.data th { background: #eef0f4; }
.scroll { overflow-x: auto; }
.hero { background: var(--navy); color: #fff; border-radius: var(--radius); padding: 28px 24px; margin: 0 0 20px; }
.hero h1 { margin: 0 0 6px; font-size: clamp(28px, 6vw, 40px); color: #fff; }
.hero p { line-height: 1.6; color: #dfe3ea; margin: 6px 0; }
.hero .lead { font-size: var(--fs-lg); font-weight: 600; color: var(--sky); }
.card { background: #fff; border-radius: var(--radius); padding: 16px 20px; margin: 14px 0; box-shadow: 0 2px 8px rgba(0,0,0,.06); }
.card h2 { margin: 0 0 6px; }

/* ---------------------------------------------------------------- rail tracker */
.pill { display: inline-block; color: #fff; border-radius: var(--pill); padding: 1px 10px; font-size: var(--fs-xs); font-weight: 700; white-space: nowrap; vertical-align: 2px; }
.pill.live { background: var(--st-live); } .pill.construction { background: var(--st-construction); }
.pill.not-started { background: var(--st-not-started); } .pill.shelved { background: var(--st-shelved); } .pill.proposed { background: var(--st-proposed); }
.key-line { flex: none; display: inline-block; width: 26px; height: 0; border-top: 5px solid; border-radius: 3px; }
.key-line.live { border-color: var(--st-live); }
.key-line.construction { border-color: var(--st-construction); }
.key-line.not-started { border-top-style: dashed; border-top-width: 4px; border-color: var(--st-not-started); }
.key-line.shelved { border-top-style: dotted; border-top-width: 4px; border-color: var(--st-shelved); }
.key-line.proposed { border-top-style: dotted; border-top-width: 3px; border-color: var(--st-proposed); }
.key-line.concept { border-top-style: dashed; border-top-width: 3px; border-color: var(--st-concept); }
.key-line.existing { border-top-width: 3px; border-color: #9aa2b1; }

/* Citations: small numbered links; the number is the source's place in the panel's source list */
sup.cite { font-size: var(--fs-2xs); line-height: 0; margin-left: 1px; }
sup.cite a { text-decoration: none; font-weight: 700; padding: 0 1px; }
sup.cite a::before { content: "["; } sup.cite a::after { content: "]"; }

.status-box { margin: 10px 0; padding: 10px 12px; border-radius: var(--radius-sm); background: var(--bg); font-size: var(--fs-sm); }
.status-box .when { display: block; margin-top: 4px; font-size: var(--fs-xs); color: var(--muted); }
.plan-box { margin: 10px 0; padding: 10px 12px; border-left: 4px solid var(--navy); background: #eef3fb; border-radius: 0 var(--radius-sm) var(--radius-sm) 0; font-size: var(--fs-sm); }
.plan-box b { display: block; font-size: var(--fs-xs); text-transform: uppercase; letter-spacing: .04em; color: var(--navy); }
.diff-box { margin: 10px 0; padding: 10px 12px; border-left: 4px solid var(--st-concept); background: #f4effb; border-radius: 0 var(--radius-sm) var(--radius-sm) 0; font-size: var(--fs-sm); }
.diff-box b { display: block; font-size: var(--fs-xs); text-transform: uppercase; letter-spacing: .04em; color: var(--st-concept); }

/* Timeline: a dot per event, coloured by what kind of event it is */
.timeline { list-style: none; margin: 8px 0; padding: 0 0 0 4px; }
.timeline li { position: relative; padding: 0 0 12px 22px; font-size: var(--fs-sm); line-height: 1.4; }
.timeline li::before { content: ""; position: absolute; left: 5px; top: 6px; bottom: -6px; width: 2px; background: var(--line); }
.timeline li:last-child::before { display: none; }
.timeline li::after { content: ""; position: absolute; left: 0; top: 3px; width: 12px; height: 12px; border-radius: 50%; background: #fff; border: 3px solid var(--muted); box-sizing: border-box; }
.timeline li.plan::after { border-color: var(--navy); background: var(--navy); }
.timeline li.target::after { border-color: var(--promise); }
.timeline li.work::after { border-color: var(--st-construction); }
.timeline li.open::after { border-color: var(--st-live); background: var(--st-live); }
.timeline li.setback::after { border-color: var(--st-shelved); }
.timeline time { display: block; font-size: var(--fs-xs); font-weight: 700; color: var(--muted); }
.tl-key { display: flex; flex-wrap: wrap; gap: 4px 12px; font-size: var(--fs-xs); color: var(--muted); margin: 4px 0 8px; }
.tl-key i { display: inline-block; width: 10px; height: 10px; border-radius: 50%; border: 2.5px solid; margin-right: 4px; vertical-align: -1px; }

.src-list { margin: 6px 0 0; padding-left: 22px; font-size: var(--fs-xs); line-height: 1.45; color: var(--muted); }
.src-list li { margin: 4px 0; }
.src-list li:target { background: #fff6d6; }
.kind { display: inline-block; padding: 0 6px; border-radius: 4px; font-size: var(--fs-2xs); font-weight: 700; text-transform: uppercase; letter-spacing: .03em; vertical-align: 1px; }
.kind.primary { background: var(--navy); color: #fff; } .kind.official { background: #dbe7f8; color: var(--navy); }
.kind.news { background: #eef0f4; color: var(--muted); } .kind.company { background: #f3e8f8; color: #6b2f86; } .kind.secondary { background: #f6eedd; color: #7a5a12; }
.unverified { color: #9a5b00; font-weight: 600; }
.panel-links { display: flex; gap: 8px; margin-top: 12px; }
.panel-links .btn { flex: 1; min-height: var(--control-md); font-size: var(--fs-sm); font-weight: 600; }
.approx-note { font-size: var(--fs-xs); color: var(--muted); margin-top: 10px; }

/* Projects page */
.summary-row { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 10px; margin: 0 0 16px; }
.summary-tile { background: #fff; border-radius: var(--radius); padding: 12px 14px; box-shadow: 0 1px 4px rgba(0,0,0,.08); border-top: 5px solid; }
.summary-tile b { display: block; font-size: var(--fs-2xl); line-height: 1.1; }
.summary-tile span { font-size: var(--fs-sm); color: var(--muted); }
.summary-tile.live { border-color: var(--st-live); } .summary-tile.construction { border-color: var(--st-construction); }
.summary-tile.not-started { border-color: var(--st-not-started); } .summary-tile.shelved { border-color: var(--st-shelved); } .summary-tile.proposed { border-color: var(--st-proposed); }
@media (max-width: 600px) { .summary-row { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.project-card { scroll-margin-top: 12px; }
.project-card h2 { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; }
.project-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 0 24px; }
@media (max-width: 760px) { .project-grid { grid-template-columns: minmax(0, 1fr); } }

/* Slip chart: every promised opening date, against when it was promised */
.slip-wrap { position: relative; }
.slip svg { display: block; width: 100%; height: auto; overflow: visible; }
.slip .grid { stroke: #e9ecf1; } .slip .axis { fill: var(--muted); font-size: 11px; }
.slip .row-label { fill: var(--ink); font-size: 12px; font-weight: 600; }
.slip .today { stroke: var(--ink); stroke-dasharray: 3 3; } .slip .today-label { fill: var(--ink); font-size: 11px; font-weight: 700; }
.slip .span { stroke-width: 4; stroke-linecap: round; opacity: .35; }
.slip .hit { cursor: pointer; }
.slip-tip { position: absolute; z-index: 2; pointer-events: none; background: #fff; border: 1px solid var(--line); border-radius: var(--radius-sm);
  padding: 6px 10px; font-size: var(--fs-xs); line-height: 1.4; box-shadow: 0 4px 12px rgba(0,0,0,.12); max-width: 280px; }
.slip-key { display: flex; flex-wrap: wrap; gap: 4px 16px; font-size: var(--fs-xs); color: var(--muted); margin-top: 6px; }
.slip-key svg { vertical-align: -2px; margin-right: 4px; }

/* Station list: a numbered run of names, two columns when there's room */
ol.stations { margin: 6px 0; padding-left: 26px; columns: 2; column-gap: 20px; font-size: var(--fs-sm); line-height: 1.5; }
ol.stations li { break-inside: avoid; }
ol.stations li.unmapped { color: var(--muted); font-style: italic; }
@media (max-width: 380px) { ol.stations { columns: 1; } }

/* Station label on the map: name, then line and status */
.station-pop .maplibregl-popup-content { padding: 6px 10px; border-radius: var(--radius-sm); box-shadow: var(--float-shadow); font: inherit; line-height: 1.3; }
.station-pop b { display: block; font-size: var(--fs-sm); }
.station-pop span { font-size: var(--fs-xs); color: var(--muted); }

/* ---------------------------------------------------------------- project details (map panel and Projects cards) */
h3.sub { margin: 16px 0 4px; font-size: var(--fs-md); }
p.note { margin: 4px 0; }
.today-box { margin: 10px 0; padding: 10px 12px; border-left: 4px solid var(--ink); background: var(--bg); border-radius: 0 var(--radius-sm) var(--radius-sm) 0; font-size: var(--fs-sm); }
.today-box > b { display: block; font-size: var(--fs-xs); text-transform: uppercase; letter-spacing: .04em; color: var(--ink); margin-bottom: 4px; }
.today-box .when { display: block; margin-top: 4px; font-size: var(--fs-xs); color: var(--muted); }
/* The plan and today side by side on the Projects page; stacked when narrow */
.compare { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 12px; margin: 12px 0 4px; }
.compare > div { margin: 0; }
@media (max-width: 700px) { .compare { grid-template-columns: minmax(0, 1fr); } }
/* Milestone tag: funding confirmed, construction started */
.ms { display: inline-block; padding: 0 6px; border-radius: 4px; font-size: var(--fs-2xs); font-weight: 700; text-transform: uppercase; letter-spacing: .03em;
  background: #e0f2f1; color: #0b6b6d; vertical-align: 1px; }
li.ms-started .ms { background: #fdebd3; color: #8a4b00; }

/* Horizontal timeline: columns left to right on one track; the track is coloured by how far the project had got */
.htl-wrap { overflow-x: auto; margin: 4px -4px 0; padding: 0 4px 6px; scrollbar-width: thin; }
.htl { display: flex; list-style: none; margin: 0; padding: 0; min-width: min-content; }
.htl li { position: relative; flex: 0 0 172px; padding: 0 14px 0 0; font-size: var(--fs-sm); line-height: 1.4; }
.htl li time { display: block; height: 20px; font-size: var(--fs-xs); font-weight: 700; color: var(--muted); white-space: nowrap; }
.htl li::before { content: ""; position: absolute; left: 0; right: 0; top: 29px; height: 4px; background: #d5d9e0; }
.htl li:last-child::before { right: auto; width: 14px; }
.htl li[data-phase="funded"]::before { background: #7fc4c5; }
.htl li[data-phase="building"]::before { background: #f0b25e; }
.htl li[data-phase="open"]::before { background: #6fbf8f; }
.htl .dot { position: relative; z-index: 1; display: block; width: 14px; height: 14px; margin: 1px 0 8px; border-radius: 50%; background: #fff; border: 3px solid var(--muted); box-sizing: border-box; }
.htl li.plan .dot { border-color: var(--navy); background: var(--navy); }
.htl li.target .dot { border-color: var(--promise); }
.htl li.work .dot { border-color: var(--st-construction); }
.htl li.setback .dot { border-color: var(--st-shelved); }
.htl li.open .dot { border-color: var(--st-live); background: var(--st-live); }
.htl li.ms-funded .dot { border-color: #0b6b6d; background: #0b6b6d; border-radius: 3px; transform: rotate(45deg) scale(.9); }
.htl li.ms-started .dot { border-color: var(--st-construction); background: var(--st-construction); border-radius: 2px; }
.htl li.now .dot { width: 18px; height: 18px; margin: -1px 0 6px; border-color: var(--ink); background: var(--ink); }
.htl li .ms { margin-bottom: 4px; }
.htl li p { margin: 0; }

/* Stations as a rail map: dotted line in the status colour, a stop per station, names slanted above */
.rail-wrap { overflow-x: auto; margin: 0 -4px; padding: 0 4px; scrollbar-width: thin; }
.rail { --c: var(--muted); position: relative; display: flex; list-style: none; margin: 0; padding: 118px 16px 14px;
  min-width: max(100%, calc(var(--n) * 46px + 32px)); box-sizing: border-box; }
.rail.live:not([style*='--c']) { --c: var(--st-live); } .rail.construction:not([style*='--c']) { --c: var(--st-construction); }
.rail.not-started { --c: var(--st-not-started); } .rail.shelved { --c: var(--st-shelved); } .rail.proposed { --c: var(--st-proposed); }
.rail::before { content: ""; position: absolute; left: 22px; right: 22px; top: 123px; border-top: 5px dotted var(--c); }
.rail.live::before { border-top-style: solid; }
.rail li { position: relative; flex: 1 1 0; min-width: 46px; height: 16px; }
.rail li::after { content: ""; position: absolute; left: 50%; top: 0; width: 14px; height: 14px; margin-left: -7px; border-radius: 50%;
  background: #fff; border: 3px solid var(--c); box-sizing: border-box; }
.rail li span { position: absolute; left: 50%; bottom: 22px; transform-origin: 0 100%; transform: rotate(-45deg); white-space: nowrap;
  max-width: 150px; overflow: hidden; text-overflow: ellipsis; font-size: var(--fs-xs); font-weight: 600; color: var(--ink); }
.rail li.unmapped::after { border-color: #b8bec9; border-style: dashed; }
.rail li.unmapped span { color: var(--muted); font-style: italic; font-weight: 400; }

/* Collapsible source list */
details.sources { margin: 14px 0 0; border-top: 1px solid var(--line); padding-top: 8px; }
details.sources summary { cursor: pointer; font-size: var(--fs-sm); font-weight: 700; color: var(--ink); list-style: none; display: flex; align-items: center; gap: 6px; min-height: var(--control-sm); }
details.sources summary::-webkit-details-marker { display: none; }
details.sources summary::before { content: "▸"; display: inline-block; transition: transform .15s; color: var(--muted); }
details.sources[open] summary::before { transform: rotate(90deg); }
@media (prefers-reduced-motion: reduce) { details.sources summary::before { transition: none; } }

/* Chart: funding and construction markers, and the progress bands */
.slip .band { opacity: .45; }
.timeline li.ms-started .ms, .timeline .ms { margin-left: 4px; }
/* In the map's narrow panel, timeline columns are a little narrower so more of the story shows before scrolling */
#panel .htl li { flex-basis: 148px; font-size: var(--fs-xs); }
#panel .htl-wrap { margin: 4px -16px 0; padding: 0 16px 6px; }

/* Compact legend: tighter rows and a narrower card, so it doesn't crowd the map on desktop */
#legend { min-width: 0; width: 212px; padding: 2px 4px 4px; }
#legend.folded { width: auto; }
#legend .legend-head { padding-left: 8px; }
#legend .fold { min-height: 30px; width: 30px; font-size: var(--fs-sm); }
#legend button:not(.fold) { min-height: 28px; padding: 2px 8px; gap: 8px; font-size: var(--fs-xs); }
#legend .key-line { width: 20px; }
#legend .asof { padding: 4px 8px 2px; font-size: var(--fs-2xs); line-height: 1.35; }
.station-pop span.approx { display: block; font-style: italic; }
.rail li.approx::after { border-style: dotted; }

/* Status tiles double as the Projects filter */
button.summary-tile { display: block; width: 100%; min-height: 0; text-align: left; font: inherit; color: inherit; cursor: pointer;
  border: 0; border-top: 5px solid; border-radius: var(--radius); background: #fff; padding: 12px 14px; transition: opacity .15s, box-shadow .15s; }
button.summary-tile:hover { box-shadow: 0 3px 10px rgba(0,0,0,.14); }
.summary-row.filtering button.summary-tile[aria-pressed="false"] { opacity: .4; box-shadow: none; }
.summary-row.filtering button.summary-tile[aria-pressed="true"] { box-shadow: 0 0 0 2px var(--ink) inset, 0 1px 4px rgba(0,0,0,.08); }
@media (prefers-reduced-motion: reduce) { button.summary-tile { transition: none; } }
.filter-bar { display: flex; align-items: center; gap: 10px; min-height: 28px; margin: -8px 0 12px; }
.filter-bar .link-btn { min-height: 0; padding: 2px 6px; border: 0; background: none; color: var(--accent); font-size: var(--fs-sm); font-weight: 600; text-decoration: underline; cursor: pointer; }

/* Projects filter: a sticky row of buttons with counts, one choice at a time */
/* Stays in view while scrolling, as a floating glass bar like the bottom bar (not a full-width strip) */
.filter-bar { position: sticky; top: 12px; z-index: 8; display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: 0 0 14px; padding: 6px 6px 6px 14px;
  background: var(--glass); -webkit-backdrop-filter: var(--blur); backdrop-filter: var(--blur); border-radius: var(--radius-lg); box-shadow: var(--float-shadow);
  scrollbar-width: none; }
.filter-bar::-webkit-scrollbar { display: none; }
.filter-label { font-size: var(--fs-xs); font-weight: 700; color: var(--muted); text-transform: uppercase; letter-spacing: .04em; margin-right: 2px; }
.filter-bar button { min-height: var(--control-md); padding: 4px 12px; gap: 6px; border-radius: var(--pill); border: 1px solid var(--line); background: #fff;
  font-size: var(--fs-sm); font-weight: 600; color: var(--ink); }
.filter-bar button:hover { border-color: var(--ink); }
.filter-bar button b { font-weight: 700; color: var(--muted); font-variant-numeric: tabular-nums; }
.filter-bar button[aria-pressed="true"] { background: var(--ink); border-color: var(--ink); color: #fff; }
.filter-bar button[aria-pressed="true"] b { color: rgba(255,255,255,.75); }
.filter-bar .dot { width: 10px; height: 10px; border-radius: 50%; display: inline-block; }
.dot.live { background: var(--st-live); } .dot.construction { background: var(--st-construction); } .dot.not-started { background: var(--st-not-started); }
.dot.shelved { background: var(--st-shelved); } .dot.proposed { background: var(--st-proposed); }
@media (max-width: 600px) { .filter-bar { flex-wrap: nowrap; overflow-x: auto; border-radius: var(--pill); } .filter-bar button { flex: none; } }

/* Project list: one line per project, opening to the full entry */
.list-head { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; margin: 22px 0 8px; }
.list-head h2 { margin: 0; }
.list-head .link-btn { min-height: 0; padding: 2px 6px; border: 0; background: none; color: var(--accent); font-size: var(--fs-sm); font-weight: 600; text-decoration: underline; cursor: pointer; }
details.project-row { background: #fff; border-radius: var(--radius); margin: 0 0 8px; box-shadow: 0 1px 4px rgba(0,0,0,.07); scroll-margin-top: 130px; }
details.project-row > summary { display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "main chev" "line chev"; gap: 2px 12px;
  padding: 12px 16px; cursor: pointer; list-style: none; }
details.project-row > summary::-webkit-details-marker { display: none; }
details.project-row > summary::after { content: "▸"; grid-area: chev; align-self: center; color: var(--muted); transition: transform .15s; }
details.project-row[open] > summary::after { transform: rotate(90deg); }
details.project-row > summary:hover .row-main b { text-decoration: underline; }
.row-main { grid-area: main; display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; }
.row-main b { font-size: var(--fs-md); }
.row-line { grid-area: line; font-size: var(--fs-sm); color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
details.project-row[open] .row-line { display: none; }
.row-body { padding: 0 16px 16px; border-top: 1px solid var(--line); padding-top: 10px; }
@media (prefers-reduced-motion: reduce) { details.project-row > summary::after { transition: none; } }
a.archived { color: var(--muted); }


/* Why the Delays */
.slip-table td { vertical-align: top; }
.slip-table .said { display: block; font-size: var(--fs-xs); color: var(--muted); }
.slip-table .slip-n { font-weight: 700; white-space: nowrap; }
.slip-table .missed { color: var(--st-shelved); }
.cause { border-top: 1px solid var(--line); padding-top: 10px; margin-top: 14px; }
.cause h3 { margin: 0 0 2px; font-size: var(--fs-md); display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.cause-n { font-size: var(--fs-xs); font-weight: 700; color: #fff; background: var(--ink); border-radius: var(--pill); padding: 1px 8px; }
.cause p { margin: 0 0 6px; }
.cause ul { margin: 0; padding-left: 18px; font-size: var(--fs-sm); }
.cause li { margin: 4px 0; }
.cause-p { font-weight: 700; color: var(--ink); text-decoration: none; margin-right: 4px; }
.cause-p:hover { text-decoration: underline; }

/* A promise whose date passed without the line opening */
.ms.ms-missed { background: #fde2e1; color: #a32020; }
.htl li.missed .dot { border-color: var(--st-shelved); background: #fde2e1; }

/* Legend: status as stroke pattern, then which colour is which line */
#legend .key-svg { flex: none; display: block; }
#legend button[aria-pressed="false"] .key-svg { opacity: .25; }
#legend .legend-sub { padding: 6px 8px 2px; border-top: 1px solid var(--line); margin-top: 2px; font-size: var(--fs-2xs); font-weight: 700; color: var(--muted); text-transform: uppercase; letter-spacing: .04em; }
#legend .color-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 3px 8px; padding: 2px 8px 2px; font-size: var(--fs-2xs); font-weight: 600; color: var(--ink); }
#legend .color-grid span { display: flex; align-items: center; gap: 5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#legend .color-grid i { flex: none; width: 14px; height: 4px; border-radius: 2px; box-shadow: 0 0 0 .5px rgba(0,0,0,.25); }
#legend .color-note { padding: 2px 8px 4px; font-size: 9px; line-height: 1.3; color: var(--muted); }

/* ---------------------------------------------------------------- profile (from StreetScore's style.css) */
.profile { position: relative; margin-left: auto; flex: none; display: flex; }  /* flex: no line box below the button */
/* A profile picture: the animal on the person's colour */
.avatar { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; min-height: 0; padding: 0; flex: none;
  border-radius: 50%; border: 2px solid #fff; background: var(--glass-gray); font-size: 22px; line-height: 1; box-shadow: var(--float-shadow); }
.avatar { --skin: #f3e3c8; --skin-2: #dcc39a; --skin-3: #c4a473; overflow: hidden; }
.avatar svg { display: block; width: 100%; height: 100%; }
.avatar.big { width: 52px; height: 52px; font-size: 26px; }
.avatar.small { width: 26px; height: 26px; font-size: 14px; border-width: 1.5px; box-shadow: 0 1px 3px rgba(0,0,0,.2); }
.profile-menu { position: absolute; right: 0; top: calc(100% + 6px); z-index: 15; width: min(290px, calc(100vw - 24px)); padding: 6px;
  background: var(--glass); -webkit-backdrop-filter: var(--blur); backdrop-filter: var(--blur); border-radius: var(--radius); box-shadow: 0 4px 16px rgba(0,0,0,.2);
  transform: translateY(-6px) scale(.5); transform-origin: 100% 0; opacity: 0; transition: transform .2s ease, opacity .2s ease; }
.profile-menu.open { transform: translateY(0) scale(1); opacity: 1; }
@media (prefers-reduced-motion: reduce) { .profile-menu { transition: none; } }
.profile-head { display: flex; align-items: center; gap: 10px; padding: 8px 8px 12px; margin-bottom: 4px; border-bottom: 1px solid var(--line); }
.profile-head b { display: block; line-height: 1.3; }
.profile-note { margin-top: 2px; font-size: var(--fs-xs); line-height: 1.4; color: var(--muted); }
.profile-menu a { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: var(--radius-sm); color: var(--ink); font-weight: 600; text-decoration: none; }
.profile-menu a:hover, .profile-menu a.on { background: rgba(31,95,191,.12); }
/* Bottom bar on every page: Map, Insights, Submissions */
.view-switch { display: flex; gap: 4px; padding: 3px; margin: 0 0 12px; width: min(420px, 100%); background: #fff; border-radius: var(--radius);
  box-shadow: 0 2px 8px rgba(0,0,0,.08); }
.view-switch button { flex: 1; min-width: 0; min-height: var(--control-md); padding: 4px 6px; gap: 5px; border: 0; background: transparent; font-size: var(--fs-sm);
  font-weight: 600; color: var(--muted); white-space: nowrap; }
.view-switch button[aria-pressed="true"] { background: var(--ink); color: #fff; }
#report.street-mode .view-switch { display: none; }
.me-card { display: flex; align-items: center; gap: 14px; margin: 18px 0 14px; }
.me-card h2 { margin: 0; font-size: var(--fs-xl); }
.me-stats { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 10px; margin-bottom: 14px; }
.me-stat { background: var(--card); border-radius: var(--radius); padding: 12px; box-shadow: 0 1px 4px rgba(0,0,0,.08); }
.me-stat b { display: block; font-size: var(--fs-2xl); line-height: 1.1; }
.me-stat span { font-size: var(--fs-sm); color: var(--muted); }
.me-map { position: relative; height: 460px; border-radius: var(--radius); overflow: hidden; box-shadow: 0 2px 8px rgba(0,0,0,.1); }
.me-map #map { position: absolute; inset: 0; }
.me-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; }
.me-empty { background: var(--card); border-radius: var(--radius); padding: 16px; box-shadow: 0 1px 4px rgba(0,0,0,.08); }
@media (max-width: 800px) { .me-stats { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
/* Profile: a dot on the picture when something you follow has changed; follow buttons; the profile page */
.profile .avatar { position: relative; overflow: visible; }
.profile .avatar svg { border-radius: 50%; }
.avatar .new-dot { position: absolute; top: -2px; right: -2px; width: 12px; height: 12px; border-radius: 50%; background: #d7262b; border: 2px solid #fff; }
.map-page .profile { margin-left: auto; }
.follow-btn { min-height: var(--control-sm); padding: 2px 12px; gap: 6px; border-radius: var(--pill); font-size: var(--fs-sm); font-weight: 600; }
.follow-btn[aria-pressed="true"] { background: var(--ink); border-color: var(--ink); color: #fff; }
.me-stats { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.me-list { list-style: none; margin: 0; padding: 0; }
.me-list > li { background: #fff; border-radius: var(--radius); padding: 12px 14px; margin: 0 0 8px; box-shadow: 0 1px 4px rgba(0,0,0,.07); }
.me-list .me-row { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; }
.me-list .me-row a { font-weight: 700; color: var(--ink); text-decoration: none; }
.me-list .me-row a:hover { text-decoration: underline; }
.me-list .me-row .follow-btn { margin-left: auto; }
.me-list .me-line { margin: 4px 0 0; font-size: var(--fs-sm); color: var(--muted); }
.me-new { margin: 8px 0 0; padding: 8px 10px; border-left: 4px solid #d7262b; background: #fff4f4; border-radius: 0 var(--radius-sm) var(--radius-sm) 0; font-size: var(--fs-sm); }
.me-new b { display: block; font-size: var(--fs-xs); text-transform: uppercase; letter-spacing: .04em; color: #a32020; }
.me-new ul { margin: 4px 0 0; padding-left: 18px; }
.panel-meta { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 6px 10px; margin: 2px 0 4px; }
/* Text-style button, used anywhere a full button would be too loud */
.link-btn { min-height: 0; padding: 2px 4px; border: 0; background: none; color: var(--accent); font-size: var(--fs-sm); font-weight: 600; text-decoration: underline; cursor: pointer; }
/* The map panel starts below the top row, so it doesn't cover the profile picture */
@media (min-width: 701px) { #panel { top: 68px; max-height: calc(100% - 156px); } }

/* The legend grows open and shrinks shut: its body animates its height (grid rows 1fr <-> 0fr) and fades, and the card
   eases between full width and the small "Status" pill */
#legend { width: 212px; transition: width .28s ease, box-shadow .2s; }
#legend.folded { width: 116px; }
#legendBody { display: grid; grid-template-rows: 1fr; opacity: 1; transition: grid-template-rows .28s ease, opacity .2s ease .05s; }
#legend.folded #legendBody { grid-template-rows: 0fr; opacity: 0; transition: grid-template-rows .28s ease, opacity .12s ease; }
#legendBody > .legend-inner { min-height: 0; overflow: hidden; width: 204px; }
#legend .legend-hint { transition: opacity .2s; white-space: nowrap; }
#legend.folded .legend-hint { opacity: 0; }
#legend .legend-head > span { overflow: hidden; white-space: nowrap; }
#legend.folded #legendBody { visibility: hidden; transition: grid-template-rows .28s ease, opacity .12s ease, visibility 0s linear .28s; }
@media (prefers-reduced-motion: reduce) { #legend, #legendBody, #legend.folded #legendBody, #legend .legend-hint { transition: none; } }

/* ---------------------------------------------------------------- Votes */
.votes-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding-bottom: 12px; border-bottom: 1px solid var(--line); }
.votes-head b { display: block; font-size: var(--fs-lg); }
.vote-dots { display: flex; gap: 6px; }
.vote-dots i { width: 14px; height: 14px; border-radius: 50%; border: 2px solid var(--ink); }
.vote-dots i.used { background: var(--ink); }
.vote-msg { margin: 10px 0 0; padding: 8px 12px; border-radius: var(--radius-sm); background: #fff4f4; color: #a32020; font-size: var(--fs-sm); }
.votes-title { margin: 16px 0 6px; font-size: var(--fs-lg); }
ol.vote-list { list-style: none; margin: 0; padding: 0; }
.vote-list li { display: grid; grid-template-columns: 26px minmax(0, 1fr) auto auto; align-items: center; gap: 10px; padding: 9px 4px; border-bottom: 1px solid var(--line); }
.vote-list li.mine { background: #f2f6fd; border-radius: var(--radius-sm); }
.vote-rank { font-weight: 700; color: var(--muted); text-align: right; font-variant-numeric: tabular-nums; }
.vote-name { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; }
.vote-name a { font-weight: 700; color: var(--ink); text-decoration: none; }
.vote-name a:hover { text-decoration: underline; }
.vote-bar { height: 6px; margin-top: 6px; border-radius: 3px; background: #eef0f4; overflow: hidden; }
.vote-bar i { display: block; height: 100%; border-radius: 3px; transition: width .35s ease; }
.vote-n { min-width: 46px; text-align: right; font-weight: 700; font-size: var(--fs-lg); font-variant-numeric: tabular-nums; line-height: 1.1; }
.vote-n small { display: block; font-size: var(--fs-2xs); font-weight: 400; color: var(--muted); }
.vote-btn { min-height: var(--control-md); min-width: 86px; padding: 4px 12px; border-radius: var(--pill); font-size: var(--fs-sm); font-weight: 700; }
.vote-btn[aria-pressed="true"] { background: var(--ink); border-color: var(--ink); color: #fff; }
.vote-btn:not(:disabled):hover { border-color: var(--ink); }
@media (max-width: 520px) { .vote-list li { grid-template-columns: 20px minmax(0, 1fr) auto; } .vote-btn { grid-column: 2 / -1; justify-self: start; } }
@media (prefers-reduced-motion: reduce) { .vote-bar i { transition: none; } }

/* Bottom bar: the dark pill is one element that slides between buttons */
.bottom-nav { isolation: isolate; }
.bottom-nav .nav-pill { position: absolute; top: 4px; bottom: 4px; left: 0; z-index: -1; border-radius: var(--pill); background: var(--ink); will-change: transform; }
.bottom-nav.ready .nav-pill { transition: transform .24s cubic-bezier(.3, .7, .3, 1), width .24s cubic-bezier(.3, .7, .3, 1); }
.bottom-nav a { position: relative; transition: color .2s ease; }
.bottom-nav a.on { background: transparent; color: #fff; }
@media (prefers-reduced-motion: reduce) { .bottom-nav.ready .nav-pill, .bottom-nav a { transition: none; } }

/* Bus rapid transit tag, beside a project's name */
.mode-tag { display: inline-block; margin: 0 6px; padding: 0 6px; border: 1.5px solid #C2187A; border-radius: 4px; color: #C2187A;
  font-size: var(--fs-xs); font-weight: 800; letter-spacing: .04em; line-height: 1.5; vertical-align: 2px; white-space: nowrap; }
.filter-sep { width: 1px; align-self: stretch; margin: 2px 4px; background: var(--line); }

/* Map legend: Rail / BRT chips above the status list */
#legend .legend-modes { display: flex; gap: 4px; padding: 4px 6px 6px; border-bottom: 1px solid var(--line); margin-bottom: 2px; }
#legend .legend-modes button { flex: 1; justify-content: center; gap: 6px; min-height: 26px; padding: 2px 8px; border: 1px solid var(--line);
  border-radius: var(--pill); background: #fff; font-weight: 700; color: var(--ink); }
#legend .legend-modes button[aria-pressed="true"] { background: var(--ink); border-color: var(--ink); color: #fff; }
#legend .legend-modes button .n { margin-left: 0; opacity: .7; }
#legend .legend-modes button:hover { border-color: var(--ink); }
#legend #legendItems button.empty { color: var(--muted); }
#legend button:disabled { opacity: .4; cursor: default; }

/* ---------- welcome, on the first visit (as on StreetScore) ---------- */
button.primary, .btn.primary { background: var(--accent); border-color: var(--accent); color: #fff; font-weight: 600; }
button.title-chip { align-items: flex-start; text-align: left; cursor: pointer; border: 0; font: inherit; color: var(--ink); }
#overlay { position: fixed; inset: 0; background: rgba(20,25,40,.55); z-index: 60; display: flex; align-items: flex-start; justify-content: center; overflow: auto; padding: 16px; }
#overlay[hidden] { display: none; }
#sheet { position: relative; background: #fff; border-radius: var(--radius); width: min(560px, 100%); padding: 20px; margin: auto; transition: background-color .3s ease; }
#sheet h2 { margin-top: 0; }
#sheet:has(> .welcome.mission) { background: var(--navy); color: #fff; }
.step-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.step-head:has(.with-logo) { gap: 8px; }
.close-x { min-height: var(--control-md); padding: 0 10px; font-size: 20px; line-height: 1; flex: none; }
.step-dots { display: inline-flex; gap: 6px; align-items: center; }
.welcome > .step-dots { margin-bottom: 8px; }
.step-dots i { width: 8px; height: 8px; border-radius: 50%; background: var(--line); }
.step-dots i.on { width: 20px; border-radius: 4px; background: var(--ink); }
.mission-actions { display: flex; flex-wrap: wrap; gap: 10px; }
.mission-actions .primary { flex: 1; min-width: 140px; }
/* The second page has a fixed size: its top and button stay put and the middle scrolls. The first is only as tall as
   its text. The heights leave room for iPhone Safari's floating address bar. */
.welcome { display: flex; flex-direction: column; height: min(620px, calc(100vh - 112px)); height: min(620px, calc(100dvh - 112px));
  font-size: var(--fs-sm); line-height: 1.45; }
.welcome.mission { height: auto; max-height: min(760px, calc(100vh - 112px)); max-height: min(760px, calc(100dvh - 112px)); }
.welcome.resizing { transition: height .3s ease; }
.welcome.resizing .welcome-body { overflow: hidden; }
.welcome-body { flex: 1; min-height: 0; overflow-y: auto; -webkit-overflow-scrolling: touch; }
.welcome.mission .welcome-body { flex: 0 1 auto; }
.welcome-body > p { margin: 0 0 10px; }
.welcome .card-title { margin: 0 0 6px; font-size: var(--fs-xl); line-height: 1.25; }
.card-title.with-logo { display: flex; align-items: center; gap: 6px; }
.card-title.with-logo img { flex: none; }
.welcome-loop { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; margin: 2px 0 14px; border-radius: var(--radius); }
.mission p { color: #dfe3ea; }
.mission-terms { margin-top: 12px; padding: 10px 12px; border-radius: var(--radius); background: rgba(255,255,255,.1); font-size: var(--fs-sm); }
.mission .mission-terms p { margin: 0 0 4px; color: #fff; }
.mission-terms a { color: var(--sky); font-weight: 600; }
.mission .step-dots i { background: rgba(255,255,255,.35); }
.mission .step-dots i.on { background: #fff; }
.mission .close-x { background: transparent; border-color: rgba(255,255,255,.4); color: #fff; }
.mission .welcome-foot { border-top-color: rgba(255,255,255,.25); }
.mission #mNext { background: #fff; border-color: #fff; color: var(--ink); }
.mission .welcome-foot .btn { background: transparent; border-color: #fff; color: #fff; }
.welcome-foot { flex: none; padding-top: 12px; margin-top: 8px; border-top: 1px solid var(--line); }
.welcome-area { margin: 0 0 10px; padding: 8px 12px; border-radius: var(--radius); background: #e8f0fb; color: var(--navy); font-size: var(--fs-sm); }
.welcome-steps { list-style: none; padding: 0; margin: 10px 0; display: grid; gap: 8px; }
.welcome-steps li { display: flex; gap: 10px; align-items: flex-start; }
.welcome-steps li > span { font-size: 18px; line-height: 1.2; flex: none; width: 24px; text-align: center; }
.welcome-steps b { display: block; }
.welcome-key, .welcome-privacy, .welcome-credits { background: var(--bg); border-radius: var(--radius); padding: 10px 12px; margin: 0 0 8px; }
.welcome-key .key-row { display: flex; flex-wrap: wrap; gap: 4px 16px; margin-top: 6px; }
.welcome-key .key-item { display: inline-flex; align-items: center; gap: 6px; }
.welcome-key .key-note { margin-top: 6px; font-size: var(--fs-xs); }
.welcome-privacy p, .welcome-credits p { margin: 4px 0; }
.welcome-credits p { font-size: var(--fs-sm); }
@media (prefers-reduced-motion: reduce) { #sheet, .welcome.resizing { transition: none; } }


/* ---------------------------------------------------------------- StreetScore's look, with hero red */
/* Controls are pills, as on StreetScore */
button, .btn { border-radius: var(--pill); }
button.primary, .btn.primary { background: var(--hero); border-color: var(--hero); }
button.primary:hover, .btn.primary:hover { background: #c2302a; border-color: #c2302a; }
/* The map page's own background is the night map's land, so phone browsers' bars above and below it are dark too */
html:has(body.map-page), body.map-page { background: #18222f; }
/* Everything floating on the night map takes the night glass. The panel and the welcome sheet stay light */
.map-page :is(header.top, #legend, #zoomCtl, #osmCredit) {
  --glass: var(--night-glass); --glass-gray: var(--night-glass); --ink: var(--on-night); --muted: var(--on-night-muted); --line: var(--night-line);
}
.map-page .logo-btn, .map-page .avatar { border-color: var(--night-line); }
.map-page #zoomIn:hover, .map-page #zoomOut:hover, .map-page #legend .fold:hover { background: var(--night-raised); }
.map-page #legend { box-shadow: 0 4px 16px rgba(4, 10, 22, .35); }
.map-page #osmCredit { color: var(--on-night-muted); background: rgba(11, 23, 41, .6); }
.map-page #osmCredit, .map-page #osmCredit a { color: var(--on-night-muted); }
/* The bottom bar is the deepest navy on every page. Icons and names are white; the current page's icon turns hero red */
.bottom-nav { background: rgba(11, 23, 41, .8); box-shadow: 0 4px 18px rgba(4, 10, 22, .35); container-type: inline-size; }
.bottom-nav a { flex: 1 1 auto; padding: 0 12px; color: var(--on-night-muted); }
.bottom-nav a:hover, .bottom-nav a.on { color: var(--on-night); }
.bottom-nav .nav-pill { background: var(--night-raised); }
.bottom-nav .nav-icon { width: 20px; height: 20px; flex: none; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; transition: stroke .2s; }
.bottom-nav a.on .nav-icon { stroke: var(--hero); }
/* Line icons: drawn in the text colour, hero red when their control is selected */
.icon { width: 18px; height: 18px; flex: none; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
/* The profile menu is night on every page, like the bottom bar */
.profile-menu { background: rgba(11, 23, 41, .86); border: 1px solid var(--night-line); box-shadow: 0 8px 28px rgba(4, 10, 22, .45); color: var(--on-night); }
.profile-head { border-bottom-color: var(--night-line); }
.profile-head b { color: var(--on-night); }
.profile-note { color: var(--on-night-muted); }
.profile-menu a { color: var(--on-night-muted); }
.profile-menu a:hover { background: var(--night-raised); color: var(--on-night); }
.profile-menu a.on { background: var(--hero-soft); color: var(--on-night); }
.profile-menu a.on .icon { stroke: var(--hero); }
.profile-menu .avatar { border-color: var(--night-line); }
/* Projects / Sources & Method: a pill switch, the chosen view in hero red */
.view-switch { padding: 4px; border-radius: var(--pill); container-type: inline-size; }
.view-switch button { display: inline-flex; align-items: center; justify-content: center; }
.view-switch button[aria-pressed="true"] { background: var(--hero); color: #fff; }
/* Status filter: the chosen statuses in the night navy, not hero red, so their status dots stay readable and red
   doesn't read as Shelved */
.filter-bar button[aria-pressed="true"] { background: var(--night); border-color: var(--night); }
/* Too narrow for words: the switch and the bottom bar show only their icons. The words stay for screen readers */
@container (max-width: 300px) {
  .view-switch button .lbl, .bottom-nav a .lbl { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .view-switch .icon, .bottom-nav .nav-icon { width: 22px; height: 22px; }
}
/* How to Use steps: line icons; the first in hero red */
.welcome-steps .icon { width: 22px; height: 22px; }
.welcome-steps li.lead > span { color: var(--hero); }
/* Rail and BRT in the map legend: chosen ones in hero red, as on StreetScore's Layers menu */
#legend .legend-modes button[aria-pressed="true"] { background: var(--hero); border-color: var(--hero); color: #fff; }
#legend .legend-modes button:hover { border-color: var(--on-night-muted); }
/* Hero containers (page headers, the welcome card) in hero red, where StreetScore's are navy. White text on
   #d93b30 is 4.6:1; the lead line and links stay white so every line clears that bar */
.hero, #sheet:has(> .welcome.mission) { background: var(--hero); }
.hero p, .mission p { color: #fff; }
.hero .lead { color: #fff; }
.hero a, .mission-terms a { color: #fff; text-decoration: underline; }
.hero .mode-tag { border-color: #fff; color: #fff; }
.mission #mNext { color: var(--hero); }
/* Insights: Sources Last Updated, as four tiles */
.updated-card h2 { margin-bottom: 10px; }
.updated-tiles { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; }
.updated-tile { display: grid; align-content: start; gap: 2px; padding: 12px; border-radius: var(--radius-sm); background: var(--bg); }
.updated-tile b { font-size: var(--fs-lg); line-height: 1.2; }
.updated-tile span { font-size: var(--fs-sm); font-weight: 600; color: var(--muted); }
.updated-tile small { font-size: var(--fs-xs); color: var(--muted); }
@media (max-width: 600px) { .updated-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
/* Votes: your votes in hero red */
.vote-dots i { border-color: var(--hero); }
.vote-dots i.used { background: var(--hero); }
.vote-list li.mine { background: #fdeceb; }
.vote-btn[aria-pressed="true"] { background: var(--hero); border-color: var(--hero); color: #fff; }