/* s2s-roadmap.css — diagram and layout rules specific to this page.
   Loads after css/s2s.css, which carries the shared chrome and the palette.
   Scoped to .s2s so the bare element selectors in the original export cannot
   reach the site nav or footer. SVG type stays at its authored size; see the
   note in css/s2s.css. */
.s2s .tag { display:inline-block;font-size:10px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;padding:2px 8px;border-radius:999px;border:1px solid var(--line);color:var(--muted);white-space:nowrap }
.s2s .tag.new { border-color:var(--mint);color:var(--mint) }
.s2s .tag.enh { border-color:var(--amber);color:var(--amber) }
.s2s .tag.hi { border-color:var(--rose);color:var(--rose) }
.s2s .ta { display:grid;grid-template-columns:repeat(5,1fr);gap:8px }
.s2s .ta .s { background:var(--panel2);border:1px solid var(--line);border-radius:12px;padding:12px 12px;border-top:3px solid var(--blue2);position:relative }
.s2s .ta .s .n { font-size:10.5px;font-weight:800;letter-spacing:.1em;color:var(--blue2) }
.s2s .ta .s h4 { margin:3px 0 6px;font-size:13.5px }
.s2s .ta .s p { margin:0 0 4px;font-size:11.5px;color:var(--muted);line-height:1.4 }
.s2s .ta .s p b { color:var(--ink) }
@media (max-width:900px) {
  .s2s .ta { grid-template-columns:repeat(2,1fr) }
}
@media (max-width:520px) {
  .s2s .ta { grid-template-columns:1fr }
}
/* minmax(0, 1fr), not 1fr: a bare fr track floors at its item's min-content
   width, so the seven milestone columns refused to shrink below their bar
   width and pushed the page 23px past a 320px viewport. The label column
   steps down with the viewport instead of holding 230px. */
.s2s .gantt {
  display:grid;
  grid-template-columns:230px repeat(7, minmax(0, 1fr));
  gap:4px 6px; align-items:center;
  font-size:calc(12px * var(--fs, 1));
}
.s2s .gantt .h { font-size:10.5px;font-weight:800;letter-spacing:.08em;color:var(--blue2);text-align:center;padding:4px 0 }
.s2s .gantt .lbl { color:var(--ink);font-weight:700;padding:6px 0 }
.s2s .gantt .lbl small { display:block;color:var(--muted);font-weight:500;font-size:11px }
.s2s .gantt .bar { height:22px;border-radius:6px;background:var(--panel2);border:1px solid var(--line) }
.s2s .gantt .bar.on { background:linear-gradient(90deg,var(--blue),var(--blue2));border-color:var(--blue) }
.s2s .gantt .bar.v { background:linear-gradient(90deg,#0e9a6f,var(--mint));border-color:var(--mint) }
.s2s .gantt .bar.h { background:linear-gradient(90deg,#b98a2b,var(--amber));border-color:var(--amber) }
.s2s .gantt .bar.e { background:linear-gradient(90deg,#b23c7c,var(--rose));border-color:var(--rose) }
@media (max-width:760px) {
  .s2s .gantt { grid-template-columns:150px repeat(7, minmax(0, 1fr)) }
  .s2s .gantt .lbl small { display:none }
}

/* 320px: even a 150px label column leaves the seven bars under 10px each. */
@media (max-width:360px) {
  .s2s .gantt { grid-template-columns:96px repeat(7, minmax(0, 1fr)); gap:3px 4px; }
  .s2s .gantt .h { font-size:calc(9px * var(--fs, 1)); letter-spacing:.02em; }
}