/* roadmap.css — public roadmap page. Layers on app.css (:root vars + .sc-space shell).
   CSP-safe: classes only, no inline styles/scripts. Player-facing. */

.rm-content{max-width:880px;margin:0 auto;padding:40px 20px 72px}
.rm-nav{position:absolute;top:-16px;left:20px;right:20px;display:flex;justify-content:space-between;
  font-family:var(--mono);font-size:13px;letter-spacing:1px}
.rm-nav a{color:var(--muted)}
.rm-nav a:hover{color:var(--accent)}
.rm-emblem{margin-top:8px}
.rm-wordmark{font-size:38px;letter-spacing:2px;margin-top:14px}
.rm-tagline{font-family:var(--mono);font-size:13px;letter-spacing:6px;color:var(--muted);margin-top:8px}
.rm-pill{margin-top:22px}
.rm-intro{max-width:60ch;margin:26px auto 0;color:var(--muted);font-size:15px;line-height:1.65}

/* section frame */
.rm-sec{width:100%;text-align:left;margin-top:52px}
.rm-sec-head{display:flex;align-items:baseline;gap:14px;flex-wrap:wrap;margin-bottom:22px}
.rm-eyebrow{font-family:var(--mono);font-size:11px;letter-spacing:3px;text-transform:uppercase;color:var(--accent);opacity:.85}
.rm-sec-head h2{font-family:var(--sans);font-size:24px;font-weight:600;color:#eaf7fb;margin:0}
.rm-rule{height:1px;flex:1;min-width:30px;background:linear-gradient(90deg,var(--edge2),transparent)}
.rm-sec-head .rm-note{font-family:var(--mono);font-size:12px;color:var(--muted)}

/* live grid */
.rm-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:14px}
.rm-card{border:1px solid var(--edge);border-top:2px solid var(--good);border-radius:12px;
  background:rgba(9,17,32,.55);padding:16px 18px}
.rm-card h3{font-family:var(--sans);font-size:16px;font-weight:600;color:#eaf7fb;margin:0 0 6px}
.rm-card p{margin:0;font-size:14px;color:var(--text);line-height:1.5}
.rm-live{display:inline-block;font-family:var(--mono);font-size:10px;letter-spacing:1.5px;text-transform:uppercase;
  color:var(--good);background:rgba(95,224,138,.09);border:1px solid rgba(95,224,138,.3);border-radius:5px;padding:2px 8px;margin-bottom:10px}

/* trajectory */
.rm-track{position:relative;padding-left:58px}
.rm-track::before{content:"";position:absolute;left:22px;top:8px;bottom:22px;width:2px;
  background:linear-gradient(180deg,var(--good),var(--accent) 26%,var(--accent) 56%,#ffd27a 80%,rgba(255,210,122,.2))}

.rm-now{position:relative;margin-bottom:26px}
.rm-now-dot{position:absolute;left:-43px;top:3px;width:18px;height:18px;border-radius:50%;background:var(--good);
  box-shadow:0 0 0 4px rgba(95,224,138,.14),0 0 12px var(--good)}
.rm-now-lab{font-family:var(--mono);font-size:11px;letter-spacing:2px;text-transform:uppercase;color:var(--good)}
.rm-now-txt{color:var(--muted);font-size:13.5px;margin-top:3px;line-height:1.5;max-width:62ch}

.rm-phase{position:relative;margin-bottom:18px}
.rm-num{position:absolute;left:-46px;top:15px;width:24px;height:24px;border-radius:50%;background:var(--bg);
  border:2px solid var(--edge2);text-align:center;line-height:21px;font-family:var(--mono);font-size:12px;font-weight:700;color:var(--accent)}
.rm-pcard{border:1px solid var(--edge);border-left:2px solid var(--accent);border-radius:12px;
  background:rgba(9,17,32,.55);padding:16px 20px;transition:transform .18s}
.rm-pcard:hover{transform:translateX(3px)}
.rm-status{font-family:var(--mono);font-size:10.5px;letter-spacing:1.5px;text-transform:uppercase;color:var(--muted)}
.rm-pcard h3{font-family:var(--sans);font-size:19px;font-weight:600;color:#eaf7fb;margin:5px 0 7px}
.rm-pcard p{margin:0 0 12px;font-size:14.5px;color:var(--text);line-height:1.55;max-width:64ch}
.rm-chips{display:flex;flex-wrap:wrap;gap:7px}
.rm-chip{font-family:var(--mono);font-size:11px;color:var(--text);background:rgba(95,214,230,.06);
  border:1px solid var(--edge);border-radius:999px;padding:4px 10px}

/* next emphasis (cyan) */
.rm-phase.is-next .rm-pcard{border-color:var(--edge2);box-shadow:0 0 0 1px rgba(95,214,230,.12),0 0 30px rgba(95,214,230,.09);background:rgba(12,24,40,.72)}
.rm-phase.is-next .rm-num{background:var(--accent);border-color:var(--accent);color:#05060d;box-shadow:0 0 0 4px rgba(95,214,230,.15),0 0 14px var(--accent)}
.rm-phase.is-next .rm-status{color:var(--accent)}

/* horizon emphasis (gold) */
.rm-phase.is-horizon .rm-pcard{border-left-color:#ffd27a}
.rm-phase.is-horizon .rm-num{border-color:#ffd27a;color:#ffd27a}
.rm-phase.is-horizon .rm-status{color:#ffd27a}
.rm-phase.is-horizon .rm-chip{background:rgba(255,210,122,.06);border-color:rgba(255,210,122,.2)}

/* always-on aside */
.rm-aside{margin:-2px 0 18px;padding:11px 18px;border:1px dashed var(--edge2);border-radius:10px;
  background:rgba(95,214,230,.03);font-size:13.5px;color:var(--muted);line-height:1.5}
.rm-aside b{color:var(--text)}
.rm-aside .k{display:block;font-family:var(--mono);font-size:10px;letter-spacing:2px;text-transform:uppercase;color:var(--accent);opacity:.75;margin-bottom:3px}

/* far horizon */
.rm-vgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(205px,1fr));gap:12px}
.rm-vcard{border:1px solid var(--edge);border-radius:11px;background:rgba(9,17,32,.4);padding:15px 17px}
.rm-vcard h4{font-family:var(--sans);font-size:15px;font-weight:600;color:#eaf7fb;margin:0 0 5px}
.rm-vcard p{margin:0;font-size:13px;color:var(--muted);line-height:1.5}

/* foot */
.rm-foot{margin-top:48px;text-align:center}
.rm-oneline{font-family:var(--mono);font-size:13px;color:var(--accent);opacity:.85;letter-spacing:.4px;line-height:1.8;max-width:72ch;margin:0 auto 12px}
.rm-foot-note{color:var(--muted);font-size:13px;max-width:56ch;margin:0 auto}
.rm-copy{margin-top:24px;font-family:var(--mono);font-size:11px;letter-spacing:2px;color:var(--muted)}

@media (max-width:560px){
  .rm-track{padding-left:46px}
  .rm-track::before{left:15px}
  .rm-num{left:-46px;width:22px;height:22px;line-height:19px}
  .rm-now-dot{left:-42px}
}