/* roadmap page (/roadmap/): loaded after legal.css + docs.css. The board, cards, timeline and stat chips are rendered
   by roadmap-sync from the roadmap board; this file only styles them. Light and warm like the home hero; the four
   column accents (Now amber, Next blue, Later violet, Shipped green) are decorative, all text stays ink or muted. */
:root{--rm-hero:#edecea;--rm-col:#faf9f6;--rm-soft:#e9e7e1;--rm-focus:#2458b8;--rm-shadow:0 1px 0 #16211b0a,0 10px 24px -14px #16211b33;
  --now:#b8560a;--now-tile:#fcead6;--next:#2b5fb8;--next-tile:#e2ebfa;--later:#6a4fc0;--later-tile:#ebe5fa;--shipped:#12694a;--shipped-tile:#dcf1e6}
@media (prefers-color-scheme:dark){:root{--rm-hero:#0f1a30;--rm-col:#0e182c;--rm-soft:#1f2b42;--rm-focus:#8bb8ff;--rm-shadow:0 1px 0 #0003,0 10px 24px -14px #000a;
  --now:#f2a660;--now-tile:#3a2716;--next:#86b1ff;--next-tile:#15274a;--later:#bba6ff;--later-tile:#241c45;--shipped:#4fd39d;--shipped-tile:#0f3027}}

.sprite{position:absolute;width:0;height:0;overflow:hidden}
.page-roadmap .site-header,.page-roadmap .site-footer{max-width:1280px;padding-left:32px;padding-right:32px}
.roadmap{max-width:1280px;padding:8px 32px 64px}
.roadmap a:focus-visible,.page-roadmap .site-header a:focus-visible{outline:3px solid var(--rm-focus);outline-offset:3px;border-radius:6px}
.roadmap svg{fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round;flex:none}
.vh{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}

/* hero strip */
.rm-hero{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,.8fr);gap:24px 40px;align-items:center;background:var(--rm-hero);
  border-radius:28px;padding:44px 48px;overflow:hidden}
.rm-eyebrow{display:flex;align-items:center;gap:10px;margin:0;text-transform:uppercase;font-size:11.5px;letter-spacing:1.8px;font-weight:650;color:var(--muted)}
.status-dot{width:8px;height:8px;border-radius:50%;background:var(--mint);box-shadow:0 0 0 4px color-mix(in srgb,var(--mint) 22%,transparent)}
.roadmap h1{font-size:clamp(38px,4.6vw,60px);line-height:1.02;letter-spacing:-.04em;font-weight:650;margin:16px 0 16px}
.rm-lead{font-size:18px;line-height:1.55;color:var(--muted);max-width:32em;margin:0}
.stats{list-style:none;margin:28px 0 0;padding:0;display:flex;flex-wrap:wrap;gap:10px}
.stats li{display:inline-flex;align-items:center;gap:8px;background:var(--card);border-radius:100px;padding:8px 16px 8px 10px;font-size:14px;color:var(--muted);box-shadow:var(--rm-shadow)}
.stats strong{color:var(--ink);font-size:16px;font-weight:700;font-variant-numeric:tabular-nums;letter-spacing:-.2px}
.stat-icon{width:28px;height:28px;padding:5px;border-radius:50%;background:var(--shipped-tile);color:var(--shipped)}
.stats li:first-child .stat-icon{background:var(--now-tile);color:var(--now)}
.stats li:last-child .stat-icon{background:var(--next-tile);color:var(--next)}
.rm-hero-art{display:block;margin:-24px -24px -24px 0}
.rm-hero-art img{width:100%;height:auto;-webkit-mask-image:radial-gradient(ellipse 62% 64% at 50% 50%,#000 72%,transparent 100%);mask-image:radial-gradient(ellipse 62% 64% at 50% 50%,#000 72%,transparent 100%)}

/* jump nav (no script: plain anchors; sticky on phones) */
.rm-jump{display:flex;flex-wrap:wrap;gap:8px;margin:32px 0 18px}
.rm-jump a{display:inline-flex;align-items:center;gap:8px;padding:8px 15px 8px 11px;border-radius:100px;font-size:14px;font-weight:600;color:var(--ink);text-decoration:none;
  background:var(--card);box-shadow:inset 0 0 0 1px var(--line)}
.rm-jump a:hover{box-shadow:inset 0 0 0 1px var(--ink)}
.rm-jump svg{width:18px;height:18px}
.rm-jump a[href="#now"] svg{color:var(--now)}.rm-jump a[href="#next"] svg{color:var(--next)}
.rm-jump a[href="#later"] svg{color:var(--later)}.rm-jump a[href="#shipped"] svg{color:var(--shipped)}

/* the board */
.board{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:18px;align-items:start}
.col{--accent:var(--now);--tile:var(--now-tile);background:var(--rm-col);border:1px solid var(--line);border-top:4px solid var(--accent);border-radius:20px;padding:20px 16px 18px;scroll-margin-top:16px}
.col-next{--accent:var(--next);--tile:var(--next-tile)}.col-later{--accent:var(--later);--tile:var(--later-tile)}.col-shipped{--accent:var(--shipped);--tile:var(--shipped-tile)}
.col-head{display:grid;grid-template-columns:44px 1fr;gap:0 12px;align-items:center;margin:0 2px 18px}
.col-icon{grid-row:span 2;width:44px;height:44px;border-radius:13px;background:var(--tile);color:var(--accent);display:grid;place-items:center}
.col-icon svg{width:24px;height:24px;stroke-width:1.8}
.roadmap .col h2{margin:0;font-size:21px;line-height:1.2;letter-spacing:-.3px;color:var(--ink)}
.col-tag{margin:2px 0 0;font-size:13.5px;line-height:1.3;color:var(--muted)}
.cards{list-style:none;margin:0;padding:0;display:grid;gap:12px}
.card{display:grid;grid-template-columns:34px minmax(0,1fr);gap:10px 12px;align-items:start;background:var(--card);border-radius:14px;padding:14px 14px 13px;box-shadow:var(--rm-shadow);
  transition:transform .2s ease,box-shadow .2s ease}
.card:hover{transform:translateY(-2px);box-shadow:0 1px 0 #16211b0a,0 16px 30px -16px #16211b47}
.card-icon{width:34px;height:34px;padding:7px;border-radius:10px;background:var(--tile);color:var(--accent)}
.roadmap .card-line{margin:0;font-size:15px;line-height:1.45;font-weight:520;color:var(--ink);align-self:center}
.card-line em{display:block;margin-top:4px;font-size:13px;font-weight:500;color:var(--muted)}
.card-tags{grid-column:2;margin:0;display:flex;flex-wrap:wrap;align-items:center;gap:6px 12px;font-size:12px;line-height:1.2;color:var(--muted)}
.tag-effort,.key-effort{display:inline-block;padding:3px 9px;border-radius:100px;background:var(--rm-soft);color:var(--ink);font-size:12px;font-weight:600;letter-spacing:.2px}
.tag-impact{display:inline-flex;align-items:center;gap:6px;font-weight:600}
.dots,.key-dots{display:inline-flex;gap:3px}
.dots i,.key-dots i{width:7px;height:7px;border-radius:50%;background:var(--rm-soft)}
.dots i.on{background:var(--accent)}.key-dots i.on{background:var(--ink)}

/* shipped timeline */
.timeline{list-style:none;margin:0;padding:0 0 0 2px;position:relative}
.timeline::before{content:"";position:absolute;left:17px;top:10px;bottom:18px;width:2px;border-radius:2px;background:linear-gradient(var(--accent),var(--line))}
.timeline>li{position:relative;padding:0 0 18px 48px}
.timeline>li:last-child{padding-bottom:4px}
.tl-icon{position:absolute;left:2px;top:0;width:32px;height:32px;padding:6px;border-radius:50%;background:var(--card);color:var(--accent);box-shadow:0 0 0 2px var(--accent)}
.timeline>li:first-child .tl-icon{background:var(--accent);color:var(--card)}
.roadmap .tl-head{display:flex;flex-wrap:wrap;align-items:center;gap:4px 8px;margin:4px 0 4px;font-size:12.5px;color:var(--muted)}
.tl-badge{display:inline-block;padding:2px 9px;border-radius:100px;background:var(--tile);color:var(--accent);font-weight:700;font-size:12px;letter-spacing:.2px}
.roadmap .tl-line{margin:0;font-size:14px;line-height:1.5;font-weight:600;color:var(--ink)}
.roadmap .tl-items{margin:6px 0 0;padding:0 0 0 18px;list-style:disc;font-size:13.5px;line-height:1.5;color:var(--muted)}
.roadmap .tl-items li{margin:2px 0;padding:0}
.roadmap .col-more{margin:14px 2px 0;font-size:13.5px;color:var(--muted)}

/* how to read it */
.rm-key{margin-top:40px;border-top:1px solid var(--line);padding-top:8px}
.rm-key ul{list-style:none;margin:12px 0 0;padding:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px 28px}
.rm-key li{display:grid;grid-template-columns:auto 1fr;gap:12px;align-items:start}
.rm-key li p{margin:0;font-size:14.5px;line-height:1.5}
.rm-key li strong{color:var(--ink)}
.rm-key li>svg{width:22px;height:22px;margin-top:1px;color:var(--ink)}
.key-dots{margin-top:8px}
.rm-key .meta{margin:20px 0 0}
.roadmap .next ul{max-width:720px}

@media (max-width:1100px){.board{grid-template-columns:repeat(2,minmax(0,1fr))}.rm-hero{padding:36px}}
@media (max-width:720px){
  .page-roadmap .site-header,.page-roadmap .site-footer{padding-left:16px;padding-right:16px}
  .roadmap{padding:8px 16px 48px}
  .rm-hero{grid-template-columns:1fr;padding:26px 20px 8px;border-radius:22px}
  .roadmap h1{font-size:38px}
  .rm-lead{font-size:16.5px}
  .stats{margin-top:20px;gap:8px}.stats li{font-size:13px;padding:6px 13px 6px 8px}.stats strong{font-size:15px}
  .rm-hero-art{margin:0 auto;max-width:320px}
  .rm-jump{position:sticky;top:0;z-index:5;margin:20px -16px 14px;padding:10px 16px;gap:6px;flex-wrap:nowrap;overflow-x:auto;background:color-mix(in srgb,var(--bg) 92%,transparent);
    -webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);border-bottom:1px solid var(--line)}
  .rm-jump a{padding:7px 12px 7px 9px;font-size:13.5px;white-space:nowrap}
  .board{grid-template-columns:1fr;gap:16px}
  .col{scroll-margin-top:70px;padding:18px 14px 16px}
  .rm-key ul{grid-template-columns:1fr}
}
@media (prefers-reduced-motion:reduce){.card{transition:none}.card:hover{transform:none}}
.tag-status{display:inline-block;padding:3px 9px;border-radius:100px;font-size:12px;font-weight:600;letter-spacing:.2px;background:var(--rm-soft);color:var(--ink)}
.tag-status-building{box-shadow:inset 0 0 0 1px currentColor}
.tag-status-merged{background:color-mix(in srgb,var(--rm-soft) 60%,#2e9d5b 40%)}
/* 2026-10-30: public stages — designed · being built · in review · testing · built (next beta); Now opens with a count per stage */
.tag-status-review{background:var(--next-tile);color:var(--next)}
.tag-status-testing{background:var(--later-tile);color:var(--later)}
.col-stages{margin:-6px 2px 12px;font-size:13.5px;line-height:1.45;color:var(--muted)}
.col-stages strong{color:var(--ink);font-weight:700;font-variant-numeric:tabular-nums}
.rm-key .key-stage{margin-top:1px;white-space:nowrap}