/* By the Numbers: The Toronto Youth Report — shared stylesheet.
   Derived mechanically from the preview build 4936b77c stylesheet (civic palette,
   proven on the owner's reviewed preview) with ONLY these changes:
   (1) site-nav styles added for the multi-page header; (2) print rule extended so
   the JS-built findings tiles also print (bars keep auto width); (3) a changelog
   list style. Every colour value is carried over unchanged — the palette is locked. */
:root{
  color-scheme: light;
  /* Civic palette: white and near-white neutral grounds; Toronto civic blue (#003DA5 family)
     for headlines, kickers, rules, links, nav and footer; a darker navy for panels.
     --worse is the only route by which red reaches the page outside the active scroll-spy node disc. */
  --blue:#003DA5; --navy:#002855; --ink-blue:#001E42;
  --accent:#003DA5; --blue-soft:#DCE7F7;
  --ground:#FAFAF8; --mist:#EEF0F4; --paper:#FFFFFF;
  --ink:#191C22; --ink-soft:#3E4756; --line:#C6CEDA;
  --red:#C8102E;
  --tile:#FFFFFF;
  --worse:#C8102E; --cant:#55606E;
  --radius:12px;
  --soft-shadow:0 1px 3px rgba(18,24,38,.08),0 4px 14px rgba(18,24,38,.05);
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--ground);color:var(--ink);font-family:"Public Sans",system-ui,-apple-system,"Segoe UI",sans-serif;font-size:18px;line-height:1.6;-webkit-font-smoothing:antialiased}
h1,h2,h3,.disp{font-family:"Archivo","Helvetica Neue",Arial,system-ui,sans-serif;line-height:1.08;letter-spacing:-.01em}
.serif{font-family:"Source Serif 4",Georgia,"Times New Roman",serif}
a{color:var(--navy);text-decoration-thickness:2px;text-underline-offset:3px}
:focus-visible{outline:3px solid var(--accent);outline-offset:2px;border-radius:4px}
.wrap{max-width:1120px;margin:0 auto;padding:0 20px}
section{padding:56px 0 8px}
p{max-width:68ch}
.small{font-size:.86rem}
.muted{color:var(--ink-soft)}
.skip-link{position:fixed;top:10px;left:10px;z-index:200;transform:translateY(-300%);background:var(--navy);color:#fff;padding:12px 18px;border-radius:8px;font-weight:700;text-decoration:none}
.skip-link:focus{transform:none}

/* ---------- top bar ---------- */
.topnav{position:sticky;top:0;z-index:60;background:var(--navy);color:#FFFFFF;border-bottom:2px solid var(--blue)}
.topnav-in{display:flex;align-items:center;gap:14px;max-width:1120px;margin:0 auto;padding:7px 20px}
.topnav .brand{font-family:"Archivo",Arial,sans-serif;font-weight:700;font-size:.95rem;letter-spacing:.02em;white-space:nowrap}
.topnav .brand a{color:#FFFFFF;text-decoration:none}
.topnav nav{display:flex;gap:2px;overflow-x:auto;scrollbar-width:none;margin-left:auto;scroll-snap-type:x proximity;-webkit-mask-image:linear-gradient(90deg,#000 calc(100% - 26px),transparent);mask-image:linear-gradient(90deg,#000 calc(100% - 26px),transparent)}
.topnav nav::-webkit-scrollbar{display:none}
.topnav nav a{color:#FFFFFF;text-decoration:none;font-size:.82rem;font-weight:600;padding:10px 9px;border-radius:6px;white-space:nowrap;scroll-snap-align:start}
.topnav nav a:hover{background:rgba(255,255,255,.14)}
.topnav nav a.active{background:#FFFFFF;color:var(--ink-blue)}
.dl-btn{flex:none;background:#FFFFFF;color:var(--ink-blue);font-family:"Archivo",Arial,sans-serif;font-weight:700;font-size:.82rem;text-decoration:none;padding:10px 14px;border-radius:8px;white-space:nowrap}
.dl-btn:hover{background:var(--blue-soft);color:#001E42}
.preview-banner{background:var(--mist);color:var(--ink-soft);font-size:.8rem;text-align:center;padding:6px 16px;border-bottom:1px solid var(--line)}
.preview-banner[hidden]{display:none}
.stopbar{display:none}

/* ---------- hero ---------- */
.hero{padding:48px 0 36px;border-bottom:1px solid var(--line);background:radial-gradient(1100px 480px at 88% -140px, rgba(0,61,165,.10), transparent 70%)}
.eyebrow{font-size:.8rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--navy);margin:0 0 14px}
.eyebrow::before{content:"";display:inline-block;width:22px;height:3px;background:var(--blue-soft);vertical-align:middle;margin-right:10px}
.hero-grid{display:grid;grid-template-columns:minmax(0,1fr) 340px;gap:36px;align-items:start}
.hero h1{font-size:clamp(2.5rem,6vw,4rem);font-weight:700;margin:0 0 14px;max-width:13ch}
.hero h1 .accent{color:var(--ink-blue)}
.hero .subtitle{font-family:"Source Serif 4",Georgia,serif;font-size:clamp(1.2rem,2.6vw,1.5rem);line-height:1.32;max-width:34ch;margin:0 0 18px}
.takeaway{font-size:1.12rem;font-weight:600;line-height:1.5;max-width:56ch;margin:0 0 18px;padding-left:16px;border-left:4px solid var(--accent)}
.byline{font-weight:700;font-size:.95rem;margin:0 0 20px}
.hero-cta{display:flex;flex-wrap:wrap;gap:12px}
.btn{display:inline-block;font-family:"Archivo",Arial,sans-serif;font-weight:700;font-size:.95rem;text-decoration:none;padding:13px 20px;border-radius:10px;border:1px solid var(--navy);color:var(--navy);background:transparent;min-height:44px}
.btn.primary{background:var(--navy);color:#fff}
.btn:hover{border-color:var(--blue);color:var(--ink-blue)}
.btn.primary:hover{background:var(--blue);color:#fff}
.status-line{font-size:.85rem;color:var(--ink-soft);margin:18px 0 0}
.lead-stat{background:var(--paper);border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--soft-shadow);padding:22px 24px}
.lead-stat .ls-lab{font-size:.78rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--navy);margin:0}
.lead-stat .ls-num{font-family:"Archivo",Arial,sans-serif;font-weight:700;font-size:3.4rem;line-height:1.05;color:var(--ink-blue);margin:6px 0}
.lead-stat .ls-desc{font-size:.95rem;margin:0 0 10px}
.src-line{font-size:.78rem;color:var(--ink-soft);margin:0}
.stats-cap{font-size:.85rem;color:var(--ink-soft);margin:30px 0 10px;font-style:italic}
.hero-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
.stat{background:var(--tile);border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--soft-shadow);padding:16px 18px}
.stat .num{font-family:"Archivo",Arial,sans-serif;font-weight:700;font-size:2rem;line-height:1.05;color:var(--ink-blue)}
.stat .lab{font-size:.9rem;margin:6px 0 8px;line-height:1.45}

/* ---------- the route ---------- */
.route-wrap{position:relative}
.route-wrap::before{content:"";position:absolute;left:27px;top:0;bottom:0;width:6px;border-radius:3px;background:repeating-linear-gradient(180deg, transparent 0 56px, rgba(220,231,247,.9) 56px 60px),linear-gradient(var(--blue),var(--blue))}
.stop-section{position:relative;padding-left:92px}
.stop-head{display:block;margin-bottom:6px}
.stop-slot{position:absolute;left:0;top:52px;width:60px;text-align:center;z-index:2}
.stop-node{display:grid;place-items:center;width:60px;height:60px;border-radius:50%;background:var(--ground);border:3px solid var(--navy);text-decoration:none;color:var(--ink-blue);font-family:"Archivo",Arial,sans-serif;font-weight:700;font-size:1.15rem;position:relative}
.stop-node::after{content:"";position:absolute;inset:15px;border-radius:50%;background:var(--red);transform:scale(0);transition:transform .3s ease}
.stop-node.active::after{transform:scale(1)}
.stop-name{display:block;font-size:.68rem;font-weight:700;letter-spacing:.05em;text-transform:uppercase;color:var(--ink-soft);margin-top:7px;line-height:1.3}
.stop-eyebrow{font-size:.8rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--accent);margin:0 0 6px}
.stop-head h2,.terminus-head h2{font-size:clamp(1.75rem,4vw,2.25rem);font-weight:700;margin:0 0 8px}
.stop-head .lede,.terminus-head .lede{font-family:"Source Serif 4",Georgia,serif;font-size:1.12rem;color:var(--ink-soft);max-width:62ch;margin:0}
.anchor-link{color:var(--ink-soft);text-decoration:none;font-size:.6em;vertical-align:super;margin-left:6px}
.anchor-link:hover{color:var(--navy)}
.terminus-section{position:relative;padding-left:92px}
.terminus-tag{display:inline-block;font-size:.75rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--navy);border:1px solid var(--blue);border-radius:999px;padding:4px 12px;margin-bottom:12px}

/* ---------- 2-minute version ---------- */
.howto{background:var(--navy);color:#E9EEF6;border-radius:var(--radius);padding:18px 20px;margin:20px 0 26px}
.howto h3{color:#FFFFFF;margin:0 0 6px;font-size:.85rem;letter-spacing:.12em;text-transform:uppercase}
.howto p{margin:0;max-width:none;font-size:.95rem}
.finding{background:var(--tile);border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--soft-shadow);padding:18px 20px;margin:0 0 14px}
.finding-top{display:flex;justify-content:space-between;align-items:center;gap:10px;flex-wrap:wrap}
.finding h3{font-size:1.35rem;font-weight:700;margin:0}
.pill{flex:none;font-family:"Archivo",Arial,sans-serif;font-weight:700;font-size:.72rem;letter-spacing:.08em;padding:5px 10px;border-radius:999px;border:1px solid var(--ink);color:#fff;background:var(--worse)}
.finding[data-r="mixed"] .pill{background:var(--blue-soft);color:#001E42}
.finding[data-r="cant"] .pill{background:var(--cant);color:#fff}
.finding .conf{font-size:.8rem;font-weight:700;color:var(--ink-soft);margin:6px 0 0;text-transform:none}
.finding .meaning{font-family:"Source Serif 4",Georgia,serif;font-size:1.12rem;font-weight:600;line-height:1.35;margin:8px 0 4px}
.finding .measure{font-size:.85rem;color:var(--ink-soft);margin:0}
.then-now{display:flex;align-items:center;gap:12px;padding:12px 14px;background:var(--mist);border-radius:8px;font-family:"Archivo",Arial,sans-serif;margin:12px 0}
.then-now .tn b{display:block;font-size:1.25rem;font-weight:700;line-height:1.05}
.then-now .tn span{font-size:.68rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-soft)}
.then-now .arrow{font-size:1.25rem;font-weight:700;color:var(--navy)}
.caveat{font-size:.92rem;border-left:4px solid var(--accent);background:var(--ground);padding:10px 12px;border-radius:0 8px 8px 0;margin:0 0 10px}
.stop-link{font-weight:700;font-size:.92rem}
.response-strip{margin-top:22px;background:var(--navy);color:#E9EEF6;border-radius:var(--radius);padding:18px 20px;display:flex;flex-wrap:wrap;gap:8px 22px;align-items:baseline}
.response-strip h3{color:#FFFFFF;margin:0;font-size:.85rem;letter-spacing:.12em;text-transform:uppercase}
.response-strip p{margin:0;max-width:none;font-family:"Source Serif 4",Georgia,serif;font-size:1.08rem}

/* ---------- body components ---------- */
.thesis{font-family:"Source Serif 4",Georgia,serif;font-size:clamp(1.4rem,3.4vw,2rem);line-height:1.32;font-weight:600;border-left:6px solid var(--navy);padding:6px 0 6px 22px;margin:26px 0}
.keybox{background:var(--paper);border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--soft-shadow);padding:18px 20px;margin:18px 0}
.keybox h3{margin:0 0 8px;font-size:.85rem;letter-spacing:.12em;text-transform:uppercase;color:var(--navy)}
.keybox p{margin:0 0 8px}.keybox p:last-child{margin:0}
.cols{display:grid;grid-template-columns:1fr 1fr;gap:22px}
h3.sub{font-size:1.35rem;font-weight:700;margin:34px 0 6px}
h3.sub .k{color:var(--navy);font-size:.78rem;letter-spacing:.12em;display:block;text-transform:uppercase;margin-bottom:2px}
.bigfig{font-family:"Archivo",Arial,sans-serif;font-weight:700;color:var(--ink-blue)}

/* charts */
.chart{background:var(--paper);border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--soft-shadow);padding:18px 20px;margin:18px 0}
.chart h3{margin:0 0 6px;font-size:1.05rem}
.chart .src{font-size:.78rem;color:var(--ink-soft);margin-top:10px}
.chart .basis{font-size:.88rem;background:var(--ground);border-left:4px solid var(--accent);padding:9px 12px;border-radius:0 8px 8px 0;margin:8px 0 12px}
.bar-row{display:grid;grid-template-columns:118px 1fr 74px;gap:10px;align-items:center;margin:9px 0;font-size:.88rem}
.bar-row .bl{font-weight:600;line-height:1.25}
.bar-track{height:22px;background:var(--mist);border-radius:6px;overflow:hidden;border:1px solid var(--line)}
.bar-fill{height:100%;width:0;background:var(--blue);border-radius:0 6px 6px 0;transition:width 1s cubic-bezier(.22,.8,.3,1)}
.bar-fill.red{background:var(--worse)} .bar-fill.alt{background:#6E93C8} .bar-fill.grey{background:var(--cant)} .bar-fill.deep{background:var(--blue)}
.bar-row .bv{font-family:"Archivo",Arial,sans-serif;font-weight:700;text-align:right}
.chart .note{font-size:.86rem;color:var(--ink-soft);border-top:1px dashed var(--line);padding-top:8px;margin-top:12px}
.viewdata{font:inherit;font-size:.85rem;font-weight:700;color:var(--navy);background:transparent;border:1px solid var(--blue);border-radius:8px;padding:8px 14px;cursor:pointer;margin-top:12px;min-height:44px}
.viewdata:hover{background:var(--mist)}
.datawrap{margin-top:12px;overflow-x:auto}
.datawrap table{min-width:0;font-size:.88rem}
.datawrap caption{text-align:left;font-weight:700;font-size:.85rem;padding:0 0 6px}

/* tables */
.tablewrap{overflow-x:auto;border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--soft-shadow);background:var(--paper);margin:18px 0}
table{border-collapse:collapse;width:100%;min-width:560px;font-size:.92rem}
th,td{padding:11px 14px;text-align:left;border-bottom:1px solid var(--line);vertical-align:top}
th{font-family:"Archivo",Arial,sans-serif;font-size:.74rem;letter-spacing:.1em;text-transform:uppercase;background:var(--mist)}
td.unit{font-family:"Archivo",Arial,sans-serif;font-weight:700}
tr:last-child td{border-bottom:none}

/* $236 interactive */
.calc{background:var(--navy);color:#E9EEF6;border-radius:var(--radius);padding:24px;margin:22px 0;box-shadow:var(--soft-shadow)}
.calc h3{color:#fff;margin:0 0 4px;font-size:1.3rem}
.calc .sub2{color:#C7D2E4;font-size:.92rem;margin:0 0 18px;max-width:60ch}
.calc-eq{display:flex;flex-wrap:wrap;gap:12px;align-items:stretch}
.calc-cell{flex:1;min-width:180px;background:rgba(255,255,255,.07);border:1.5px solid rgba(255,255,255,.25);border-radius:12px;padding:14px 16px}
.calc-cell .cl{font-size:.7rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:#FFFFFF}
.calc-cell .cv{font-family:"Archivo",Arial,sans-serif;font-weight:700;font-size:1.7rem;line-height:1.15;margin-top:4px}
.calc-cell .cd{font-size:.8rem;color:#C7D2E4;line-height:1.45;margin-top:4px}
.calc-op{align-self:center;font-family:"Archivo",Arial,sans-serif;font-weight:700;font-size:1.6rem;color:#FFFFFF}
.calc-cell.result{background:var(--blue-soft);border-color:var(--blue-soft);color:#001E42}
.calc-cell.result .cl{color:var(--ink-blue)}
.calc-cell.result .cd{color:#3E4756}
.calc-toggles{display:flex;flex-wrap:wrap;gap:8px;margin-top:18px}
.calc-toggles button{font:inherit;font-size:.85rem;font-weight:700;border-radius:999px;border:2px solid var(--blue-soft);background:transparent;color:#E9EEF6;padding:9px 14px;cursor:pointer;min-height:44px}
.calc-toggles button[aria-pressed="true"]{background:var(--blue-soft);color:#001E42}
.calc-detail{margin-top:14px;font-size:.92rem;max-width:70ch;color:#E9EEF6}
.calc-detail[hidden]{display:none}

/* gap grid */
.gapgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:14px;margin:18px 0}
.gap{background:var(--paper);border:1.5px dashed var(--cant);border-radius:var(--radius);padding:16px 18px}
.gap h3{margin:0 0 4px;font-size:1.02rem}
.gap .np{display:inline-block;font-family:"Archivo",Arial,sans-serif;font-weight:700;font-size:.68rem;letter-spacing:.1em;background:var(--blue-soft);color:var(--ink-blue);padding:4px 8px;border-radius:5px;margin-bottom:8px}
.gap p{margin:0;font-size:.9rem;color:var(--ink-soft)}
.sidebar{background:var(--paper);color:var(--ink);border:1px solid var(--line);border-left:4px solid var(--accent);border-radius:var(--radius);box-shadow:var(--soft-shadow);padding:26px 28px;margin:26px 0}
.sidebar h3{margin:0 0 4px;font-size:.85rem;letter-spacing:.14em;text-transform:uppercase;color:var(--accent)}
.sidebar h4{font-family:"Source Serif 4",Georgia,serif;font-size:1.5rem;margin:0 0 12px}
.sidebar p{font-family:"Source Serif 4",Georgia,serif;font-size:1.06rem;max-width:70ch}

/* plan */
.proposal{background:var(--navy);color:#fff;border-radius:var(--radius);box-shadow:var(--soft-shadow);padding:26px 28px;margin:22px 0}
.proposal h3{margin:0 0 6px;font-size:.85rem;letter-spacing:.14em;text-transform:uppercase;color:#FFFFFF}
.proposal .big{font-family:"Archivo",Arial,sans-serif;font-weight:700;font-size:clamp(1.6rem,4vw,2.4rem);line-height:1.12;margin:0 0 12px}
.proposal p{color:#E9EEF6;max-width:72ch}
.tiers{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:16px;margin:18px 0}
.tier{background:var(--tile);border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--soft-shadow);padding:18px}
.tier h3{margin:0 0 2px;font-size:1.05rem}
.tier .places{font-family:"Archivo",Arial,sans-serif;font-weight:700;font-size:2.1rem;line-height:1;color:var(--ink-blue)}
.tier .cost{font-family:"Archivo",Arial,sans-serif;font-weight:700;font-size:1.15rem;color:var(--navy);margin-top:4px}
.tier p{font-size:.88rem;color:var(--ink-soft);margin:8px 0 0}
.tier .tbar{height:12px;background:var(--mist);border-radius:99px;margin-top:12px;overflow:hidden;border:1px solid var(--line)}
.tier .tbar i{display:block;height:100%;width:0;background:var(--blue);transition:width 1s cubic-bezier(.22,.8,.3,1)}
.honest{background:var(--ink);color:var(--ground);border-radius:var(--radius);padding:26px 28px;margin:26px 0}
.honest h3{color:#FFFFFF;margin:0 0 10px;font-size:.85rem;letter-spacing:.14em;text-transform:uppercase}
.honest blockquote{font-family:"Source Serif 4",Georgia,serif;font-size:clamp(1.25rem,3vw,1.65rem);line-height:1.35;margin:0;font-weight:600}
.four{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:14px;margin:18px 0}
.four .f{background:var(--paper);border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--soft-shadow);padding:16px 18px}
.four .f b.n{font-family:"Archivo",Arial,sans-serif;font-weight:700;font-size:1.6rem;color:var(--navy);display:block;line-height:1}
.four .f h3{margin:6px 0 4px;font-size:1rem}
.four .f p{margin:0;font-size:.9rem;color:var(--ink-soft)}

/* ---------- solutions (W4) ---------- */
.sol-kicker{font-size:.8rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--accent);margin:0 0 6px}
.sol1{margin:26px 0}
.sol1 .lead{font-family:"Source Serif 4",Georgia,serif;font-size:1.12rem;max-width:66ch;margin:0 0 6px}
.sol1 .seed{max-width:68ch}

/* closing + terminus */
.closing{font-family:"Source Serif 4",Georgia,serif;font-size:1.13rem}
.closing p{max-width:66ch}
.terminus-block{margin-top:34px}
.terminus-block>h3{font-size:1.35rem;font-weight:700;margin:0 0 8px}
.src-list{margin:10px 0;padding-left:20px}
.src-list li{margin:0 0 6px;max-width:68ch}
.citation-box{background:var(--paper);border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--soft-shadow);padding:16px 18px;font-family:"Source Serif 4",Georgia,serif;font-size:1.02rem}
.record-list{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:14px;margin:18px 0}
.rec{background:var(--paper);border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--soft-shadow);padding:16px 18px;display:flex;flex-direction:column;gap:4px}
.rec h3{margin:0;font-size:1.02rem}
.rec p{margin:0;font-size:.88rem;color:var(--ink-soft);flex:1}
.rec a.dl{font-family:"Archivo",Arial,sans-serif;font-weight:700;font-size:.85rem;text-decoration:none;background:var(--navy);color:#fff;padding:11px 14px;border-radius:8px;text-align:center;margin-top:10px;min-height:44px}
.rec a.dl:hover{background:var(--blue)}
.feedback-form{background:var(--paper);border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--soft-shadow);padding:20px 22px;margin:14px 0;max-width:720px}
.feedback-form .frow{margin:0 0 14px}
.feedback-form label{display:block;font-weight:700;font-size:.9rem;margin:0 0 5px}
.feedback-form label .opt{font-weight:400;color:var(--ink-soft)}
.feedback-form input,.feedback-form select,.feedback-form textarea{font:inherit;font-size:1rem;width:100%;padding:11px 12px;border:1px solid var(--ink-soft);border-radius:8px;background:#fff;color:var(--ink);min-height:44px}
.feedback-form textarea{min-height:120px;resize:vertical}
.feedback-form .send{font:inherit;font-family:"Archivo",Arial,sans-serif;font-weight:700;background:var(--navy);color:#fff;border:none;border-radius:8px;padding:13px 22px;cursor:pointer;min-height:44px}
.feedback-form .send:hover{background:var(--blue)}
.form-note{font-size:.85rem;color:var(--ink-soft);margin:12px 0 0}
.form-status{font-size:.92rem;font-weight:600;margin:12px 0 0}
footer{border-top:2px solid var(--blue);margin-top:70px;padding:28px 0 44px;background:var(--mist)}
footer p{font-size:.88rem;color:var(--ink-soft)}
footer p strong{color:var(--ink)}

/* ---------- site nav (multi-page build) ---------- */
.pagenav{display:flex;flex-wrap:wrap;gap:10px;margin:34px 0 4px}
.pagenav a{font-family:"Archivo",Arial,sans-serif;font-weight:700;font-size:.9rem;text-decoration:none;border:1px solid var(--navy);color:var(--navy);border-radius:10px;padding:12px 16px;min-height:44px}
.pagenav a:hover{border-color:var(--blue);color:var(--ink-blue)}
.subnav{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 10px}
.subnav a{font-size:.85rem;font-weight:700;text-decoration:none;border:1px solid var(--line);background:var(--paper);color:var(--navy);border-radius:999px;padding:9px 14px;min-height:44px;display:inline-flex;align-items:center}
.subnav a:hover{border-color:var(--blue)}
.changelog-list{margin:14px 0;padding-left:20px}
.changelog-list li{margin:0 0 10px;max-width:70ch}

@media (max-width:900px){
  .hero-grid{grid-template-columns:1fr}
  .lead-stat{max-width:480px}
}
@media (max-width:760px){
  .cols{grid-template-columns:1fr}
  .hero-stats{grid-template-columns:1fr}
  .route-wrap::before{left:13px;width:5px}
  .stop-section,.terminus-section{padding-left:52px}
  .stop-slot{top:50px;width:32px}
  .stop-node{width:32px;height:32px;border-width:2.5px;font-size:.82rem}
  .stop-node::after{inset:8px}
  .stop-name{display:none}
  .stopbar{display:block;position:sticky;top:57px;z-index:55;background:var(--ground);border-bottom:1px solid var(--line);font-size:.82rem;font-weight:700;color:var(--ink-blue);padding:8px 20px 8px 52px}
  table{min-width:0;font-size:.86rem}
  th,td{padding:9px 10px}
  td.unit{white-space:normal}
  #proof th,#proof td{padding:8px 6px;font-size:.8rem}
  #proof table{min-width:0;table-layout:fixed}
  #proof th,#proof td{white-space:normal;overflow-wrap:break-word}
  .bar-row{grid-template-columns:96px 1fr 62px}
  .topnav .brand{font-size:.85rem;white-space:normal;line-height:1.25}
  .dl-btn{padding:10px 10px}
}
@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto}
  .bar-fill,.tier .tbar i,.stop-node::after{transition:none}
}
.plan-feedback{background:var(--paper);border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--soft-shadow);padding:22px 24px;margin:26px 0}
.plan-feedback h3{margin:0 0 8px;font-size:1.25rem}
.plan-feedback .pf-lede{font-family:"Source Serif 4",Georgia,serif;font-size:1.05rem;max-width:66ch}
@media print{
  .topnav,.stopbar,.preview-banner,.stop-slot,.hero-cta,.viewdata,.feedback-form,.anchor-link,.pagenav,.subnav{display:none !important}
  body{background:#fff;font-size:11pt}
  .route-wrap::before{display:none}
  .stop-section,.terminus-section{padding-left:0}
  section{padding:18px 0 4px;page-break-inside:avoid}
  .bar-fill,.tier .tbar i{width:auto !important}
  .datawrap[hidden]{display:block !important}
  .finding{display:block !important}
  a{color:#000;text-decoration:none}
}


/* Supervisor fix pass, Nov 6 2026 — appended after @media print so the
   print display:none for .anchor-link still wins.
   F4 (re-fixed as FIX2): the F4 override that moved the route line to
   left:6px / 2px is WITHDRAWN. DOM measurement (re-audit Entry 14, and the
   FIX2 probe) showed it still clipped the first glyph of every left-flush
   hero element, because the hero has no left padding — its text edge is
   the wrap's left edge (rel 0), so no in-wrap line position both clears
   the hero text and threads the stop-node column (rel centre 30). The
   generator now emits the hero OUTSIDE .route-wrap, so the line exists
   only below the hero, where it keeps its base design position
   (left:27px desktop / left:13px mobile, in the base rules above):
   centred on the stop-node column inside the stop-section gutter
   (padding-left 92px desktop / 52px mobile), clear of all text.
   F6: permalink anchors invisible at rest; they reveal on heading hover or
   keyboard focus (they are also reachable in the tab order). */
.anchor-link{opacity:0}
.anchor-link:focus-visible{opacity:1}
h2:hover .anchor-link,h3:hover .anchor-link{opacity:1}

/* Sweep application, Nov 6 2026 (F10): the jobs tile leaves the
   not-published class (sweep §8) — .gap.watch carries a solid civic-blue
   border against the dashed --cant border of the seven standing tiles,
   and its chip is solid navy with white text against their soft-blue
   .np chip, so the watch item reads differently at a glance. */
.gap.watch{border-style:solid;border-color:var(--blue)}
.gap.watch .np{background:var(--navy);color:#fff}

/* Hero paired donuts, Nov 6 2026 (F14; owner-directed, 15:56–15:57 EST):
   replaces the F12 change bars, retired the same day — scaled to each
   card's latest value, the latest bar always filled its track completely
   and read as 100% whatever the figure. Each change card now carries two
   small rings side by side under its source line, earlier → latest, each
   drawn against the full circle so the arc IS the printed percentage
   (owner's scale calls: "25/100", "37/100"). Earlier ring --cant grey,
   latest --worse red (the standing WORSE semantic), --mist track — the
   same track grey the bars used — value centred in Archivo, year beneath
   in the small label style the bars used. The dash numbers are computed
   by the generator from the printed decimals and asserted before
   emission. Static geometry: no transition, nothing moves on load. */
.crings{display:flex;gap:20px;margin-top:12px}
.cring-cell{display:flex;flex-direction:column;align-items:center;gap:5px}
.cring{width:86px;height:86px;flex:none}
.cring circle{fill:none;stroke-width:11}
.cr-track{stroke:var(--mist)}
.cr-arc{stroke-linecap:butt;transform:rotate(-90deg);transform-origin:center}
.cring.then .cr-arc{stroke:var(--cant)}
.cring.now .cr-arc{stroke:var(--worse)}
.cr-pct{font-family:"Archivo",Arial,sans-serif;font-weight:700;font-size:19px;fill:var(--ink-blue);text-anchor:middle;dominant-baseline:central}
.cyr{font-family:"Archivo",Arial,sans-serif;font-weight:700;font-size:.74rem;white-space:nowrap}
@media (max-width:480px){.cring{width:80px;height:80px}}

/* Hero donut, Nov 6 2026 (F13; owner-approved, 15:41 EST): the lead-stat
   block's one share-of-a-whole figure (581,210 of 2,794,356 residents =
   20.8%) gains a ring at the head of the number row — civic-blue arc on a
   --mist track (the F12 bars' track colour), the printed percentage
   centred in Archivo. The arc's dash numbers are computed by the
   generator from the block's printed counts and asserted against the
   printed 20.8% before emission. Static geometry, nothing animates. The
   ≤480px trim keeps the number from being demoted on narrow screens:
   the ring steps down, the number's size is never reduced. */
.ls-top{display:flex;align-items:center;gap:16px;margin:6px 0}
.ls-top .ls-num{margin:0}
.ls-ring{width:92px;height:92px;flex:none}
.ls-ring circle{fill:none;stroke-width:11}
.ls-track{stroke:var(--mist)}
.ls-arc{stroke:var(--blue);stroke-linecap:butt;transform:rotate(-90deg);transform-origin:center}
.ls-pct{font-family:"Archivo",Arial,sans-serif;font-weight:700;font-size:19px;fill:var(--ink-blue);text-anchor:middle;dominant-baseline:central}
@media (max-width:480px){.ls-ring{width:76px;height:76px}.ls-pct{font-size:16px}.ls-top{gap:13px}}