/* Takeoff pages and the list of takeoffs (/spot-<name>, /spots: scripts/spot-pages.ts, docs/seo.md). Text pages on base.css tokens. */
body{overflow-y:auto}
.pbar{position:sticky;top:max(12px,var(--sat));margin:12px 12px 0}
.doc{max-width:720px;margin:0 auto;padding:12px 16px calc(40px + var(--sab));font-size:14.5px;line-height:1.55}
.doc h1{margin:18px 0 8px;font-size:22px;line-height:1.25}
.doc h2{margin:28px 0 8px;font-size:16px}
.doc p,.doc ul{margin:0 0 10px}
.doc .lead{color:var(--ink2)}
.doc .mute{font-size:12.5px}
.row{display:flex;flex-wrap:wrap;gap:8px}
.row .btn{text-decoration:none}

/* next days: one row per day */
.days{list-style:none;margin:0 0 6px;padding:0;border:1px solid var(--line);border-radius:10px;background:var(--well)}
.days li{display:grid;grid-template-columns:92px 86px 1fr;gap:4px 10px;align-items:center;padding:9px 12px;border-top:1px solid var(--line)}
.days li:first-child{border-top:0}
.days .d{font-weight:600}
.days .b{justify-self:start;padding:1px 9px;border-radius:999px;font-size:12.5px;font-weight:600;color:var(--on-acc);background:var(--unk)}
.days .b.good{background:var(--good)}.days .b.ok{background:var(--ok)}.days .b.bad{background:var(--bad)}
.days .w{color:var(--ink2);font-variant-numeric:tabular-nums}
.days .w small{color:var(--mute);font-size:12.5px}

/* launch directions: eight chips */
.dirs{list-style:none;display:flex;flex-wrap:wrap;gap:6px;padding:0}
.dirs li{min-width:40px;padding:4px 0;text-align:center;border:1px solid var(--line);border-radius:8px;color:var(--mute);font-size:12.5px;font-weight:600}
.dirs li.g{background:var(--good);border-color:var(--good);color:var(--on-acc)}
.dirs li.p{background:var(--ok);border-color:var(--ok);color:var(--on-acc)}

.facts{margin:0 0 10px;border:1px solid var(--line);border-radius:10px;background:var(--well)}
.facts div{display:grid;grid-template-columns:170px 1fr;gap:10px;padding:8px 12px;border-top:1px solid var(--line)}
.facts div:first-child{border-top:0}
.facts dt{color:var(--mute)}
.facts dd{margin:0;overflow-wrap:anywhere}

.near{list-style:none;padding:0}
.near li{padding:5px 0;border-bottom:1px solid var(--line)}
.near a{display:inline-block;padding:3px 0;font-weight:600}

@media (max-width:760px){
 .pbar{top:max(8px,var(--sat));margin:8px 8px 0}
 .days li{grid-template-columns:86px 1fr}
 .days .w{grid-column:1 / -1}
 .facts div{grid-template-columns:1fr;gap:0}
 .near a{padding:8px 0}
}
