/* Shared design system for heytoad.app/blog. Owned by the blog, deliberately
   separate from /style.css: the site doc pages are a 760px reading column and
   these pages are a 1120px layout with charts and a sticky CTA rail. */

/* Toad is a dark-only brand (navy ground, red and yellow accents), so this page
   commits to the one visual world and paints every colour explicitly.
   Chart hues carry two separate jobs and never share a chart:
     city      -> Boston red, Cambridge sky
     direction -> moving out purple, moving in yellow                         */
:root{
  --navy:#091F2F; --navy-2:#0E2A3E; --navy-3:#12344B;
  --rule:#1E4059; --rule-soft:#163247;
  --red:#FB4D42; --red-2:#FF6B62; --red-deep:#8E2A24;
  --sky:#38BDF8; --purple:#A78BFA; --yellow:#FFC61A; --yellow-hot:#FFE600;
  --green:#3FB950;
  --ink:#F5F7F9; --ink-dim:#B3C0CC; --ink-faint:#6F8294;
}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0; background:var(--navy); color:var(--ink);
  background-image:radial-gradient(ellipse 90% 55% at 50% 0%, var(--navy-2) 0%, var(--navy) 68%);
  background-attachment:fixed;
  font-family:"DM Sans",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;
  font-size:18px; line-height:1.65; -webkit-font-smoothing:antialiased;
}
.wrap{max-width:1120px; margin:0 auto; padding:0 22px}
.stack > * + *{margin-top:1.05em}
.pixel{font-family:"Press Start 2P","DM Sans",monospace}

/* ---------- header ---------- */
header.hero{padding:52px 0 0}
.kicker{display:flex; align-items:center; gap:12px; font-size:9.5px; letter-spacing:.06em; color:var(--red); text-transform:uppercase}
.kicker .bar{height:1px; background:var(--rule); flex:1}

h1{
  font-size:clamp(2.1rem,5.9vw,4.1rem); line-height:1.02; font-weight:700;
  letter-spacing:-.03em; margin:0;
}
.subhead{
  margin:14px 0 0; font-size:clamp(1.15rem,2.6vw,1.7rem); font-weight:700;
  letter-spacing:-.02em; color:var(--red); line-height:1.2;
}
.standfirst{margin:22px 0 0; font-size:1.14rem; line-height:1.55; color:var(--ink-dim)}
.meta{margin:18px 0 0; padding-top:15px; border-top:1px solid var(--rule-soft); font-size:.8rem; color:var(--ink-faint); line-height:1.6}

/* ---------- hero chart + stats ---------- */
.hero-plot{position:relative; margin-top:32px; border:1px solid var(--rule); border-radius:4px; background:var(--navy-2); padding:20px 18px 12px; overflow-x:auto}
.plot-cap{display:flex; justify-content:space-between; align-items:flex-end; gap:18px; flex-wrap:wrap; margin-bottom:12px}
.plot-cap .t{font-weight:700; font-size:1rem; letter-spacing:-.01em}
.plot-cap .s{color:var(--ink-faint); font-size:.8rem; margin-top:3px}

.strip{display:grid; grid-template-columns:repeat(auto-fit,minmax(178px,1fr)); border:1px solid var(--rule); border-radius:4px; background:var(--navy-2); margin-top:14px; overflow:hidden}
.strip .cell{padding:19px 20px; border-right:1px solid var(--rule-soft)}
.strip .cell:last-child{border-right:0}
.stat-k{font-size:12px; font-weight:700; letter-spacing:.1em; text-transform:uppercase; color:var(--ink-faint); display:block; margin-bottom:11px; line-height:1.3}
.stat-n{font-size:1.95rem; font-weight:700; letter-spacing:-.035em; line-height:1; font-variant-numeric:tabular-nums; display:block}
.stat-n.out{color:var(--purple)}
.stat-n.in{color:var(--yellow)}
.stat-n.sweep{color:var(--green)}
.stat-n.build{color:var(--sky)}

.clash{display:grid; grid-template-columns:repeat(auto-fit,minmax(320px,1fr)); border:1px solid var(--rule);
  border-radius:4px; background:var(--navy-2); overflow:hidden; margin-top:26px}
.clash-item{padding:26px 24px 24px; border-right:1px solid var(--rule-soft)}
.clash-item:last-child{border-right:0}
.clash-n{display:flex; align-items:center; gap:16px; font-size:3.1rem; font-weight:700;
  letter-spacing:-.04em; line-height:1; font-variant-numeric:tabular-nums}
.clash-n.sweep{color:var(--green)}
.clash-n.build{color:var(--sky)}
.clash-ico{display:inline-flex; align-items:center; gap:3px; color:var(--ink-faint)}
.clash-ico .material-icons{font-size:32px; line-height:1}
.clash-item p{margin:16px 0 0; font-size:1rem; line-height:1.5; color:var(--ink-dim)}
.clash-item p b{color:var(--ink); font-weight:700}
@media (max-width:720px){
  .clash-item{border-right:0; border-bottom:1px solid var(--rule-soft)}
  .clash-item:last-child{border-bottom:0}
  .clash-n{font-size:2.6rem}
}
.stat-l{font-size:.78rem; color:var(--ink-dim); margin-top:9px; line-height:1.4; display:block}

/* ---------- body grid + sticky CTA ---------- */
.body-grid{display:grid; grid-template-columns:minmax(0,1fr) 300px; gap:46px; align-items:start; margin-top:8px}
.main{grid-column:1; grid-row:1; min-width:0}
.cta{grid-column:2; grid-row:1; position:sticky; top:22px; margin-top:46px}

.cta-card{
  border:1px solid rgba(255,230,0,.28); border-radius:8px; overflow:hidden;
  background:#2a0907;
  background-image:
    radial-gradient(ellipse 120% 80% at 50% -10%, rgba(251,77,66,.55) 0%, rgba(251,77,66,0) 60%),
    linear-gradient(165deg,#c0291f 0%,#7a1610 45%,#2a0907 100%);
  padding:22px 20px 20px;
}
.cta-card .wm{display:block; width:104px; height:auto; margin-bottom:16px}
.cta-card h2{font-size:1.06rem; line-height:1.32; letter-spacing:-.015em; margin:0; color:#fff}
.cta-card p{margin:11px 0 0; font-size:.86rem; line-height:1.5; color:rgba(255,255,255,.84)}
.cta-btns{display:flex; flex-direction:column; gap:10px; margin-top:18px}
.store-btn{
  font-family:inherit; display:flex; align-items:center; gap:13px;
  background:rgba(20,6,4,.62); border:3px solid rgba(255,230,0,.72);
  color:#fff; padding:9px 14px 9px 11px; border-radius:12px;
  text-decoration:none; cursor:pointer;
  transition:border-color 120ms ease, background 120ms ease, transform 120ms ease;
}
.store-btn:hover{border-color:var(--yellow-hot); background:rgba(30,10,6,.85); transform:translateY(-1px)}
.store-ico{height:34px; width:auto; flex:none}
.store-tx{display:flex; flex-direction:column; gap:1px; line-height:1.15}
.store-eyebrow{font-size:10.5px; letter-spacing:.08em; text-transform:uppercase; color:rgba(255,255,255,.78)}
.store-name{font-size:16px; font-weight:700; letter-spacing:-.01em}

/* ---------- article ---------- */
section{padding:46px 0 0}
.sec-head{border-top:1px solid var(--rule); padding-top:24px; margin-bottom:20px}
h2{font-size:clamp(1.4rem,3.1vw,1.85rem); font-weight:700; letter-spacing:-.024em; line-height:1.16; margin:0}
p{margin:0}
.lede{font-size:1.08rem; line-height:1.6}
strong{font-weight:700; color:#fff}

/* ---------- figures ---------- */
figure{margin:0}
.fig-head{display:flex; justify-content:space-between; align-items:flex-end; gap:16px; flex-wrap:wrap; margin-bottom:12px}
.fig-title{font-weight:700; font-size:1rem; letter-spacing:-.012em}
.fig-sub{color:var(--ink-faint); font-size:.8rem; margin-top:3px}
figcaption{color:var(--ink-dim); font-size:.86rem; margin-top:13px; line-height:1.58}
figcaption b{font-weight:700; color:var(--ink)}

.legend{display:flex; gap:15px; flex-wrap:wrap; font-size:.78rem; color:var(--ink-dim); font-weight:700}
.legend span{display:inline-flex; align-items:center; gap:7px}
.legend i{width:11px; height:11px; border-radius:2px; display:block; flex:none}

.plot{position:relative; border:1px solid var(--rule); border-radius:4px; background:var(--navy-2); padding:16px 14px 10px; overflow-x:auto}
.plot svg{display:block; width:100%; height:auto}

.tip{
  position:absolute; pointer-events:none; opacity:0; transition:opacity .09s;
  background:var(--navy); color:var(--ink); border:1px solid var(--rule);
  border-radius:4px; padding:9px 12px; font-size:12px; line-height:1.5;
  z-index:6; white-space:nowrap; font-variant-numeric:tabular-nums;
}
.tip b{font-weight:700; display:block; margin-bottom:5px; font-size:12.5px}
.tip .r{display:flex; align-items:center; justify-content:space-between; gap:22px}
.tip .r i{width:8px; height:8px; border-radius:2px; display:inline-block; margin-right:6px}
.tip .r em{font-style:normal; color:var(--ink-dim)}
.tip .r .v{font-variant-numeric:tabular-nums; font-weight:700; color:var(--ink)}
.tip .sep{margin-top:5px; border-top:1px solid var(--rule); padding-top:5px}

/* ---------- map thumbnail + lightbox ---------- */
.map-thumb{
  display:block; width:100%; padding:0; border:1px solid var(--rule); border-radius:4px;
  background:var(--navy-2); cursor:zoom-in; overflow:hidden; position:relative;
  transition:border-color 120ms ease;
}
.map-thumb:hover{border-color:var(--sky)}
.map-thumb img{display:block; width:100%; height:auto}
.map-thumb .zoom{
  position:absolute; right:11px; bottom:11px; padding:6px 10px; border-radius:4px;
  font-family:inherit; font-size:11px; font-weight:700; letter-spacing:.08em; text-transform:uppercase;
  color:var(--ink-dim); background:rgba(9,31,47,.9); border:1px solid var(--rule);
}
.map-thumb:hover .zoom{color:var(--sky); border-color:var(--sky)}

.lb{position:fixed; inset:0; z-index:60; background:rgba(5,12,19,.94); display:flex; align-items:center; justify-content:center; padding:28px; cursor:zoom-out}
.lb[hidden]{display:none}
.lb img{max-width:100%; max-height:100%; object-fit:contain; border:1px solid var(--rule); border-radius:4px}
.lb-close{
  position:absolute; top:16px; right:20px; width:40px; height:40px; border-radius:6px;
  background:var(--navy-2); border:1px solid var(--rule); color:var(--ink);
  font-size:22px; line-height:1; cursor:pointer; font-family:inherit;
}
.lb-close:hover{border-color:var(--red); color:var(--red)}

/* ---------- table ---------- */
.tablewrap{overflow-x:auto; border:1px solid var(--rule); border-radius:4px; background:var(--navy-2); margin-top:20px}
table{border-collapse:collapse; width:100%; min-width:760px; font-size:.85rem}
caption{text-align:left; padding:0 0 12px; color:var(--ink-faint); font-size:.83rem; line-height:1.55}
th,td{padding:9px 14px; text-align:right; border-bottom:1px solid var(--rule-soft); font-variant-numeric:tabular-nums}
th{font-size:11px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:var(--ink-faint); white-space:nowrap; background:var(--navy-3); position:sticky; top:0; border-bottom:1px solid var(--rule)}
th:first-child,td:first-child{text-align:left; white-space:nowrap}
td:first-child{font-size:.91rem}
tbody tr:last-child td{border-bottom:0}
tbody tr.grp td{background:var(--navy-3); font-weight:700; font-size:.74rem; letter-spacing:.06em; text-transform:uppercase; color:var(--ink-dim)}
td.o{color:var(--purple); font-weight:700}
td.i{color:var(--yellow); font-weight:700}
td.net{font-weight:700}
td.net.neg{color:var(--red-2)}
td.net.pos{color:var(--green)}
td.net.zero{color:var(--ink-faint)}
td .mute{color:var(--ink-faint)}

details.notes{border:1px solid var(--rule); border-radius:4px; background:var(--navy-2); margin-top:26px}
details.notes summary{cursor:pointer; padding:15px 19px; font-weight:700; font-size:.92rem; list-style:none; display:flex; justify-content:space-between; align-items:center; gap:12px}
details.notes summary::-webkit-details-marker{display:none}
details.notes summary::after{content:"+"; color:var(--ink-faint); font-size:1.15rem; line-height:1}
details.notes[open] summary::after{content:"\2013"}
details.notes .inner{padding:16px 19px 20px; border-top:1px solid var(--rule-soft)}
details.notes ol{margin:0; padding-left:1.3em; font-size:.88rem; color:var(--ink-dim); line-height:1.62}
details.notes ol li + li{margin-top:.65em}
details.notes b{color:var(--ink); font-weight:700}

footer{border-top:1px solid var(--rule); margin-top:52px; padding:26px 0 64px; color:var(--ink-faint); font-size:.8rem}

:focus-visible{outline:2px solid var(--yellow); outline-offset:3px; border-radius:3px}
@media (prefers-reduced-motion:reduce){*{animation:none !important; transition:none !important}}

@media (max-width:880px){
  .body-grid{grid-template-columns:minmax(0,1fr); gap:0}
  .main{grid-column:1; grid-row:auto}
  .cta{grid-column:1; grid-row:auto; position:static; margin-top:32px}
  /* grid, not flex-wrap: with flex-wrap the pair breaks to two lines as soon as
     2x190px of basis exceeds the card, because flex wraps before it shrinks. */
  .cta-btns{display:grid; grid-template-columns:1fr 1fr; gap:10px}
  .store-btn{min-width:0}
  .store-tx{min-width:0}
}
@media (max-width:720px){
  body{font-size:17px}
  header.hero{padding-top:32px}
  .strip .cell{border-right:0; border-bottom:1px solid var(--rule-soft)}
  .strip .cell:last-child{border-bottom:0}
  section{padding-top:34px}
}

/* ---------- site chrome ---------- */
.site-head{display:flex; align-items:center; justify-content:space-between; gap:20px; flex-wrap:wrap;
  padding:26px 0 0}
.site-head .logo{display:block; height:30px; width:auto}
.site-head a{color:var(--ink-faint); text-decoration:none; font-size:.86rem; font-weight:700}
.site-head a:hover{color:var(--red)}
.site-foot{border-top:1px solid var(--rule); margin-top:52px; padding:26px 0 64px;
  color:var(--ink-faint); font-size:.8rem; line-height:1.7}
.site-foot a{color:var(--ink-dim); text-decoration:none}
.site-foot a:hover{color:var(--red)}
.site-foot .links{margin-top:6px}

@media (max-width:420px){
  .store-btn{gap:9px; padding:8px 10px 8px 8px; border-width:2px}
  .store-ico{height:28px}
  .store-eyebrow{font-size:9px; letter-spacing:.05em}
  .store-name{font-size:14px}
}