/* ==========================================================================
   Finish the Greenways — site styles
   Palette: fen chalk ground, ink with a green bias, greenway green accent,
   plus a seven-step status taxonomy used consistently across the audit data.
   ========================================================================== */

:root {
  --ground:#ECEFE9; --surface:#FBFCFA; --surface-2:#E2E7DE; --raise:#FFFFFF;
  --ink:#17201A; --ink-2:#4C584F; --ink-3:#75827A;
  --rule:#CFD7CA; --rule-soft:#DFE5DB;
  --accent:#2F6B44; --accent-ink:#20522F; --accent-wash:#DDE9DF;
  --flag:#8A4B12; --flag-wash:#F5E8D8;

  --s-open:#2C6440;       --s-open-bg:#D9E8DC;
  --s-building:#9C5A0C;   --s-building-bg:#F2E5CC;
  --s-programmed:#1F6270; --s-programmed-bg:#D6E6E9;
  --s-design:#45566A;     --s-design-bg:#DCE3EA;
  --s-changed:#63457C;    --s-changed-bg:#E4DAEC;
  --s-paused:#725C46;     --s-paused-bg:#E8DFD4;
  --s-disputed:#8C7A1E;   --s-disputed-bg:#EFE9C9;
  --s-dropped:#94332D;    --s-dropped-bg:#F0D9D6;

  --shadow:0 1px 2px rgba(23,32,26,.06), 0 6px 18px rgba(23,32,26,.05);
  --measure:66ch;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --ground:#12160F; --surface:#1A1F19; --surface-2:#222820; --raise:#242B22;
    --ink:#E7EDE3; --ink-2:#AEBAAD; --ink-3:#8A968A;
    --rule:#333B31; --rule-soft:#2A3128;
    --accent:#7DBE93; --accent-ink:#A6D6B5; --accent-wash:#1E3326;
    --flag:#D79A5A; --flag-wash:#332518;
    --s-open:#83C79A;       --s-open-bg:#1E3326;
    --s-building:#E0A759;   --s-building-bg:#35291A;
    --s-programmed:#78BECB; --s-programmed-bg:#17302F;
    --s-design:#9FB3C8;     --s-design-bg:#222B33;
    --s-changed:#C2A3DB;    --s-changed-bg:#2B2334;
    --s-paused:#C6A98C;     --s-paused-bg:#2E2721;
    --s-disputed:#D6C468;   --s-disputed-bg:#332E17;
    --s-dropped:#E08A84;    --s-dropped-bg:#361F1D;
    --shadow:0 1px 2px rgba(0,0,0,.4), 0 8px 22px rgba(0,0,0,.3);
  }
}
:root[data-theme="dark"] {
  --ground:#12160F; --surface:#1A1F19; --surface-2:#222820; --raise:#242B22;
  --ink:#E7EDE3; --ink-2:#AEBAAD; --ink-3:#8A968A;
  --rule:#333B31; --rule-soft:#2A3128;
  --accent:#7DBE93; --accent-ink:#A6D6B5; --accent-wash:#1E3326;
  --flag:#D79A5A; --flag-wash:#332518;
  --s-open:#83C79A;       --s-open-bg:#1E3326;
  --s-building:#E0A759;   --s-building-bg:#35291A;
  --s-programmed:#78BECB; --s-programmed-bg:#17302F;
  --s-design:#9FB3C8;     --s-design-bg:#222B33;
  --s-changed:#C2A3DB;    --s-changed-bg:#2B2334;
  --s-paused:#C6A98C;     --s-paused-bg:#2E2721;
  --s-disputed:#D6C468;   --s-disputed-bg:#332E17;
  --s-dropped:#E08A84;    --s-dropped-bg:#361F1D;
  --shadow:0 1px 2px rgba(0,0,0,.4), 0 8px 22px rgba(0,0,0,.3);
}

:root { color-scheme: light dark; }
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  * { transition: none !important; animation: none !important; }
}

body {
  margin:0; background:var(--ground); color:var(--ink);
  font-family:"Source Serif 4", Georgia, "Times New Roman", serif;
  font-size:17px; line-height:1.62; -webkit-font-smoothing:antialiased;
}
img { max-width:100%; height:auto; }
h1,h2,h3,h4,.ui { font-family:"Overpass","Helvetica Neue",Arial,sans-serif; }
.mono { font-family:"IBM Plex Mono", ui-monospace, Menlo, monospace; }
h1,h2,h3,h4 { margin:0; text-wrap:balance; }
p { margin:0 0 1em; }
a { color:var(--accent-ink); text-underline-offset:3px; }
:root[data-theme="dark"] a { color:var(--accent); }
@media (prefers-color-scheme: dark){ :root:not([data-theme="light"]) a { color:var(--accent); } }
:focus-visible { outline:2px solid var(--accent); outline-offset:2px; border-radius:3px; }

.wrap { max-width:1120px; margin:0 auto; padding-inline:20px; }
.narrow { max-width:760px; }
.skip {
  position:absolute; left:-9999px; top:0; background:var(--accent); color:#fff;
  padding:10px 16px; z-index:99; font-family:"Overpass",sans-serif;
}
.skip:focus { left:8px; top:8px; }

/* ---------- anniversary banner ---------- */
.anniv-banner { background:var(--accent); color:#fff; }
.anniv-banner .wrap {
  display:flex; align-items:center; gap:16px; padding-block:10px;
}
.anniv-banner p {
  margin:0; font-size:13.5px; line-height:1.5; font-family:"Overpass",sans-serif;
}
:root[data-theme="dark"] .anniv-banner { background:var(--accent-ink); }
@media (prefers-color-scheme: dark){ :root:not([data-theme="light"]) .anniv-banner { background:var(--accent-ink); } }

/* ---------- masthead + nav ---------- */
.site-head { background:var(--surface); border-bottom:1px solid var(--rule); }
.site-head .wrap { display:flex; flex-wrap:wrap; gap:14px 28px; align-items:baseline; padding-block:16px; }
.brand {
  font-family:"Overpass",sans-serif; font-weight:800; font-size:18px;
  letter-spacing:-.01em; text-decoration:none; color:var(--ink);
}
.brand span { color:var(--accent); }
.site-nav { display:flex; flex-wrap:wrap; gap:4px 18px; margin-left:auto; }
.site-nav a {
  font-family:"Overpass",sans-serif; font-size:14px; text-decoration:none;
  color:var(--ink-2); padding:4px 0; border-bottom:2px solid transparent;
}
.site-nav a:hover { color:var(--accent-ink); }
.site-nav a[aria-current="page"] { color:var(--ink); border-bottom-color:var(--accent); font-weight:600; }

/* ---------- hero ---------- */
.hero { background:var(--surface); border-bottom:1px solid var(--rule); }
.hero .wrap { padding-block:52px 44px; }
.eyebrow {
  font-family:"IBM Plex Mono",monospace; font-size:11.5px; letter-spacing:.16em;
  text-transform:uppercase; color:var(--ink-3); margin:0 0 18px;
}
.hero h1 {
  font-size:clamp(34px,6.2vw,60px); line-height:1.02; font-weight:800; letter-spacing:-.025em;
}
.hero h1 em { font-style:normal; color:var(--accent); }
.lede {
  font-size:clamp(18px,2.2vw,22px); color:var(--ink-2); max-width:var(--measure);
  margin:22px 0 0;
}
.lede strong { color:var(--ink); font-weight:600; }

/* the bold statement of position the site opens on */
.position {
  margin:30px 0 0; padding:22px 24px; background:var(--accent-wash);
  border-left:5px solid var(--accent); border-radius:0 8px 8px 0;
  max-width:var(--measure);
}
.position p { margin:0; font-size:18px; color:var(--ink); }
.position p + p { margin-top:12px; }
.position strong { font-weight:600; }

/* ---------- counters ---------- */
.counters {
  display:grid; grid-template-columns:repeat(auto-fit,minmax(168px,1fr));
  gap:1px; background:var(--rule); border:1px solid var(--rule);
  border-radius:8px; overflow:hidden; margin-top:34px;
}
.counter { background:var(--surface); padding:18px 20px; }
.counter b {
  display:block; font-family:"Overpass",sans-serif; font-weight:800;
  font-size:38px; line-height:1; letter-spacing:-.03em; color:var(--accent);
  font-variant-numeric:tabular-nums;
}
.counter.warn b { color:var(--s-dropped); }
.counter span {
  display:block; margin-top:8px; font-size:14px; color:var(--ink-2); line-height:1.35;
}

/* ---------- sections ---------- */
main section { padding-block:46px; }
main section + section { border-top:1px solid var(--rule-soft); }
.sec-head { display:flex; align-items:baseline; gap:14px; flex-wrap:wrap; margin-bottom:8px; }
.sec-head h2 { font-size:clamp(24px,3.4vw,33px); font-weight:700; letter-spacing:-.018em; }
.kicker {
  font-family:"IBM Plex Mono",monospace; font-size:11.5px; letter-spacing:.14em;
  text-transform:uppercase; color:var(--ink-3);
}
.sec-intro { color:var(--ink-2); max-width:var(--measure); margin:12px 0 0; font-size:17.5px; }
.prose { max-width:var(--measure); }
.prose h3 { font-size:20px; font-weight:700; margin:30px 0 10px; }
.prose ul { padding-left:1.15em; color:var(--ink-2); }
.prose li { margin-bottom:9px; }

/* ---------- pull quote / campaign lines ---------- */
.claim {
  margin:32px 0; padding:26px 28px; background:var(--surface);
  border:1px solid var(--rule); border-left:5px solid var(--accent); border-radius:0 8px 8px 0;
}
.claim p { margin:0; font-family:"Overpass",sans-serif; font-weight:700; font-size:clamp(19px,2.6vw,25px); line-height:1.25; letter-spacing:-.015em; }
.claim small { display:block; margin-top:12px; font-family:"Source Serif 4",serif; font-weight:400; font-size:15.5px; color:var(--ink-2); line-height:1.55; letter-spacing:0; }

/* ---------- status pills ---------- */
.pill {
  display:inline-block; font-family:"Overpass",sans-serif; font-size:11.5px;
  font-weight:600; letter-spacing:.05em; text-transform:uppercase;
  padding:3px 8px; border-radius:3px; white-space:nowrap;
}
.f-open       { color:var(--s-open);       background:var(--s-open-bg); }
.f-building   { color:var(--s-building);   background:var(--s-building-bg); }
.f-programmed { color:var(--s-programmed); background:var(--s-programmed-bg); }
.f-design     { color:var(--s-design);     background:var(--s-design-bg); }
.f-changed    { color:var(--s-changed);    background:var(--s-changed-bg); }
.f-paused     { color:var(--s-paused);     background:var(--s-paused-bg); }
.f-disputed   { color:var(--s-disputed);    background:var(--s-disputed-bg); }
.f-dropped    { color:var(--s-dropped);    background:var(--s-dropped-bg); }
.dot-open{background:var(--s-open)} .dot-building{background:var(--s-building)}
.dot-programmed{background:var(--s-programmed)} .dot-design{background:var(--s-design)}
.dot-changed{background:var(--s-changed)} .dot-paused{background:var(--s-paused)}
.dot-disputed{background:var(--s-disputed)} .dot-dropped{background:var(--s-dropped)}

/* ---------- fate bar ---------- */
.fatebar { display:flex; height:32px; border:1px solid var(--rule); border-radius:4px; overflow:hidden; margin-top:18px; }
.fatebar span { display:block; }
.fatelegend { display:grid; grid-template-columns:repeat(auto-fit,minmax(190px,1fr)); gap:0 24px; list-style:none; padding:0; margin:16px 0 0; }
.fatelegend li { display:flex; align-items:baseline; gap:9px; font-size:14.5px; color:var(--ink-2); padding:5px 0; border-bottom:1px solid var(--rule-soft); }
.fatelegend i { width:9px; height:9px; border-radius:2px; flex:none; transform:translateY(-1px); }
.fatelegend b { margin-left:auto; font-family:"IBM Plex Mono",monospace; font-size:14px; font-weight:500; color:var(--ink); font-variant-numeric:tabular-nums; }

/* ---------- corridor strip (data-driven "what was cut") ---------- */
.corridor { margin:20px 0 0; }
.corridor-bar { display:flex; gap:2px; height:15px; border-radius:3px; overflow:hidden; }
.corridor-bar span { flex:1 1 0; min-width:4px; }
.corridor-key { display:flex; flex-wrap:wrap; gap:6px 16px; margin-top:10px; font-family:"IBM Plex Mono",monospace; font-size:11.5px; color:var(--ink-3); }
.corridor-key span { display:flex; align-items:center; gap:6px; }
.corridor-key i { width:8px; height:8px; border-radius:2px; }

/* ---------- controls + table ---------- */
.controls {
  display:flex; flex-wrap:wrap; gap:12px; align-items:flex-end;
  margin:26px 0 18px; padding:14px; background:var(--surface);
  border:1px solid var(--rule); border-radius:6px;
}
.field { flex:1 1 190px; min-width:0; }
.field label {
  display:block; margin-bottom:5px; font-family:"Overpass",sans-serif;
  font-size:12px; letter-spacing:.06em; text-transform:uppercase; color:var(--ink-3);
}
select, input[type=search] {
  width:100%; font-family:"Overpass",sans-serif; font-size:14.5px; padding:8px 10px;
  border:1px solid var(--rule); border-radius:4px; background:var(--raise); color:var(--ink);
}
.btn {
  font-family:"Overpass",sans-serif; font-size:13px; padding:9px 13px; border-radius:4px;
  border:1px solid var(--rule); background:var(--surface-2); color:var(--ink-2); cursor:pointer;
}
.btn:hover { border-color:var(--accent); color:var(--accent-ink); }
.count { font-family:"IBM Plex Mono",monospace; font-size:12.5px; color:var(--ink-3); padding-bottom:10px; }

.tablewrap { overflow-x:auto; border:1px solid var(--rule); border-radius:6px; background:var(--surface); }
table { border-collapse:collapse; width:100%; min-width:760px; }
thead th {
  position:sticky; top:0; z-index:2; text-align:left; padding:12px 14px;
  font-family:"Overpass",sans-serif; font-size:11.5px; letter-spacing:.1em;
  text-transform:uppercase; font-weight:600; color:var(--ink-3);
  background:var(--surface-2); border-bottom:1px solid var(--rule);
}
tbody td { padding:13px 14px; border-bottom:1px solid var(--rule-soft); vertical-align:top; font-size:15.5px; }
tbody tr:last-child td { border-bottom:none; }
tbody tr:hover { background:var(--surface-2); }
td.route { font-family:"Overpass",sans-serif; font-weight:600; font-size:14px; white-space:nowrap; }
td.route a { color:inherit; text-decoration:none; border-bottom:1px solid var(--rule); }
td.route a:hover { color:var(--accent-ink); border-bottom-color:var(--accent); }
td.scale { font-family:"IBM Plex Mono",monospace; font-size:13px; color:var(--ink-2); white-space:nowrap; font-variant-numeric:tabular-nums; }
td.note { color:var(--ink-2); font-size:14.5px; max-width:34ch; }
td.kind { font-family:"IBM Plex Mono",monospace; font-size:11px; letter-spacing:.06em; text-transform:uppercase; color:var(--ink-3); white-space:nowrap; }
.empty { padding:30px 14px; color:var(--ink-3); font-style:italic; }

/* ---------- cards / panels ---------- */
.grid2 { display:grid; grid-template-columns:1fr 1fr; gap:24px; margin-top:24px; }
.grid3 { display:grid; grid-template-columns:repeat(auto-fit,minmax(260px,1fr)); gap:20px; margin-top:24px; }
@media (max-width:780px){ .grid2 { grid-template-columns:1fr; } }
.panel { background:var(--surface); border:1px solid var(--rule); border-radius:8px; padding:22px; }
.panel h3 { font-size:17px; font-weight:700; margin-bottom:10px; }
.panel ul { margin:0; padding-left:1.1em; color:var(--ink-2); font-size:15px; }
.panel li { margin-bottom:8px; }
.panel li:last-child { margin-bottom:0; }

/* ---------- the asks ---------- */
.asks {
  list-style:none; margin:22px 0 0; padding:0;
  display:grid; grid-template-columns:1fr 1fr; gap:16px;
  counter-reset:ask;
}
@media (max-width:780px){ .asks { grid-template-columns:1fr; } }
.asks li {
  counter-increment:ask;
  background:var(--surface); border:1px solid var(--rule); border-left:5px solid var(--accent);
  border-radius:8px; padding:20px 22px 20px 20px; box-shadow:var(--shadow); position:relative;
}
.asks h3 { font-size:17px; font-weight:700; margin:0 0 8px; padding-left:30px; }
.asks h3::before {
  content:counter(ask); position:absolute; left:20px; top:20px;
  font-family:"IBM Plex Mono",monospace; font-size:13px; font-weight:600; color:var(--accent);
  width:20px; height:20px; line-height:20px; text-align:center; border-radius:50%;
  background:var(--accent-wash);
}
.asks p { font-size:14.5px; color:var(--ink-2); margin:0; padding-left:30px; }

/* ---------- measures ---------- */
.measure-group { margin-top:40px; }
.measure-group > h2 { font-size:25px; font-weight:700; letter-spacing:-.015em; }
.measure-group > p { color:var(--ink-2); max-width:var(--measure); margin-top:10px; }
.measure {
  background:var(--surface); border:1px solid var(--rule); border-radius:8px;
  padding:22px 24px; margin-top:16px; box-shadow:var(--shadow);
}
.measure.flagged { border-left:5px solid var(--flag); background:var(--flag-wash); }
.measure h3 { font-size:18.5px; font-weight:700; margin-bottom:10px; }
.measure .ask { font-size:16.5px; color:var(--ink); margin:0 0 12px; }
.measure .why { font-size:15px; color:var(--ink-2); margin:0; padding-top:12px; border-top:1px solid var(--rule-soft); }
.measure .why::before {
  content:"Why"; display:block; font-family:"IBM Plex Mono",monospace; font-size:11px;
  letter-spacing:.12em; text-transform:uppercase; color:var(--ink-3); margin-bottom:6px;
}
.flagnote {
  display:inline-block; font-family:"Overpass",sans-serif; font-size:11px; font-weight:700;
  letter-spacing:.08em; text-transform:uppercase; color:var(--flag);
  border:1px solid var(--flag); border-radius:3px; padding:2px 7px; margin-bottom:10px;
}

/* ---------- route pages ---------- */
.routenav { display:flex; flex-wrap:wrap; gap:7px; margin:22px 0 0; }
.routenav a {
  font-family:"Overpass",sans-serif; font-size:13px; text-decoration:none; color:var(--ink-2);
  border:1px solid var(--rule); border-radius:999px; padding:5px 12px; background:var(--surface);
}
.routenav a:hover, .routenav a[aria-current="page"] { border-color:var(--accent); color:var(--accent-ink); background:var(--raise); }

.routecards { display:grid; grid-template-columns:repeat(auto-fit,minmax(300px,1fr)); gap:18px; margin-top:26px; }
.routecard {
  display:block; text-decoration:none; color:inherit; background:var(--surface);
  border:1px solid var(--rule); border-radius:8px; overflow:hidden; box-shadow:var(--shadow);
}
.routecard:hover { border-color:var(--accent); }
.routecard img { display:block; width:100%; aspect-ratio:16/9; object-fit:cover; border-bottom:1px solid var(--rule); background:var(--surface-2); }
.routecard .body { padding:16px 18px 18px; }
.routecard h3 { font-size:18px; font-weight:700; margin-bottom:8px; }
.routecard p { font-size:14.5px; color:var(--ink-2); margin:10px 0 0; }

.mapfig { margin:26px 0 0; }
.mapfig img { width:100%; border:1px solid var(--rule); border-radius:8px; background:var(--raise); }
.mapfig figcaption { margin-top:10px; font-size:13.5px; color:var(--ink-3); }

.dgrid { display:grid; grid-template-columns:1fr 1fr; gap:30px; margin-top:26px; }
@media (max-width:780px){ .dgrid { grid-template-columns:1fr; gap:24px; } }
.dgrid h3, .subhead {
  font-family:"IBM Plex Mono",monospace; font-size:11.5px; letter-spacing:.12em;
  text-transform:uppercase; color:var(--ink-3); font-weight:600; margin:0 0 12px;
}
.asked { list-style:none; margin:0; padding:0; }
.asked li { display:flex; gap:10px; align-items:baseline; font-size:15px; color:var(--ink-2); padding:8px 0; border-bottom:1px solid var(--rule-soft); }
.asked li:last-child { border-bottom:none; }
.asked i { width:8px; height:8px; border-radius:2px; flex:none; transform:translateY(-1px); }
.timeline { list-style:none; margin:0; padding:0; position:relative; }
.timeline::before { content:""; position:absolute; left:4px; top:8px; bottom:8px; width:1px; background:var(--rule); }
.timeline li { position:relative; padding:0 0 15px 24px; font-size:15px; color:var(--ink-2); }
.timeline li::before { content:""; position:absolute; left:0; top:8px; width:9px; height:9px; border-radius:50%; background:var(--surface); border:2px solid var(--accent); }
.timeline li:last-child { padding-bottom:0; }
.timeline .when { display:block; font-family:"IBM Plex Mono",monospace; font-size:11.5px; letter-spacing:.05em; color:var(--ink-3); text-transform:uppercase; }
.stats { display:flex; flex-wrap:wrap; gap:8px 28px; margin-top:20px; padding-top:14px; border-top:1px solid var(--rule-soft); font-family:"IBM Plex Mono",monospace; font-size:12.5px; color:var(--ink-3); }
.stats b { color:var(--ink); font-weight:500; font-variant-numeric:tabular-nums; }

.pager { display:flex; justify-content:space-between; gap:16px; margin-top:44px; padding-top:20px; border-top:1px solid var(--rule); font-family:"Overpass",sans-serif; font-size:14px; }
.pager a { text-decoration:none; }
.pager span { color:var(--ink-3); }

/* ---------- document / source panel ---------- */
.docpanel { display:grid; grid-template-columns:200px 1fr; gap:26px; align-items:start; margin-top:26px; }
@media (max-width:640px){ .docpanel { grid-template-columns:1fr; } }
.docpanel img { width:100%; border:1px solid var(--rule); border-radius:6px; box-shadow:var(--shadow); background:var(--raise); }
.doclinks { display:flex; flex-wrap:wrap; gap:10px; margin-top:16px; }
.doclinks a {
  font-family:"Overpass",sans-serif; font-size:14px; font-weight:600; text-decoration:none;
  padding:9px 15px; border-radius:5px; border:1px solid var(--accent); color:var(--accent-ink);
}
.doclinks a.primary { background:var(--accent); color:#fff; border-color:var(--accent); }
:root[data-theme="dark"] .doclinks a.primary { color:#12160F; }
@media (prefers-color-scheme: dark){ :root:not([data-theme="light"]) .doclinks a.primary { color:#12160F; } }

/* ---------- budget ---------- */
.budget { list-style:none; margin:18px 0 0; padding:0; display:grid; gap:2px; max-width:620px; }
.budget li { display:grid; grid-template-columns:150px 1fr 74px; align-items:center; gap:12px; font-size:14.5px; padding:5px 0; }
.budget .nm { font-family:"Overpass",sans-serif; font-weight:600; font-size:13.5px; }
.budget .track { height:11px; background:var(--surface-2); border-radius:2px; overflow:hidden; }
.budget .fill { display:block; height:100%; background:var(--accent); }
.budget .amt { font-family:"IBM Plex Mono",monospace; font-size:13px; text-align:right; font-variant-numeric:tabular-nums; color:var(--ink-2); }
@media (max-width:560px){ .budget li { grid-template-columns:110px 1fr 64px; } }

/* ---------- sources ---------- */
.sources { columns:2; column-gap:32px; margin-top:18px; font-size:14px; color:var(--ink-2); padding-left:1.2em; }
@media (max-width:700px){ .sources { columns:1; } }
.sources li { break-inside:avoid; margin-bottom:9px; }

/* ---------- footer ---------- */
.site-foot { border-top:1px solid var(--rule); background:var(--surface); margin-top:20px; }
.site-foot .wrap { padding-block:30px 46px; color:var(--ink-3); font-size:13.5px; }
.site-foot p { max-width:var(--measure); }
.site-foot a { color:var(--ink-2); }

/* keep measure card copy within a readable line length on wide screens */
.measure .ask, .measure .why { max-width:78ch; }