/* Roadmap flow chart. Tiers carry importance through size and weight — the
   previous single-lane layout gave every topic identical weight, which is what
   read as flat. */
/* Roadmap pages run without a sidebar: a flow chart wants the whole page, and
   the graph is its own navigation. Section links stay in the topbar. */
.rg-page { width: 100%; }
.rg-main {
  max-width: 1240px;
  margin: 0 auto;
  /* clears the fixed topbar */
  padding: calc(var(--topbar-h) + var(--safe-top) + 22px) max(20px, var(--safe-left,0px)) 64px max(20px, var(--safe-right,0px));
}
.rg-crumbs { display: flex; align-items: center; gap: 8px; font-size: 12px; margin-bottom: 18px; }
.rg-crumbs a { display: inline-flex; align-items: center; gap: 6px; color: var(--text2); text-decoration: none; }
.rg-crumbs a:hover { color: var(--text); }
.rg-crumb-sep { color: var(--text3); }
.rg-head { margin-bottom: 6px; }
.rg-h1 {
  font-family: var(--font-display);
  font-size: clamp(24px, 4.5vw, 36px);
  font-weight: 700; letter-spacing: -.6px;
  color: var(--text); margin-bottom: 10px;
  text-wrap: balance;
}
.rg-lede { font-size: 13px; color: var(--text2); line-height: 1.7; max-width: 68ch; text-wrap: pretty; }

/* A branching graph is wider than a text column. Scroll it inside the content
   area rather than letting it spill over and drag the whole page sideways. */
.rg-scroll { overflow-x: auto; overflow-y: hidden; margin: 28px 0 40px; padding: 2px; }
.rg-scroll:focus-visible { outline: 2px solid var(--accent, var(--blue)); outline-offset: 2px; }
.rg-wrap { position: relative; min-width: 100%; }
/* Left branches | spine | right branches. Three fixed tracks keep the graph
   inside the content column no matter how many topics a roadmap has. */
/* Side columns size to their content and the whole grid centres. With 1fr
   tracks the sides were 468px wide holding 140px pills, so a third of the page
   read as empty while the graph looked shoved left. */
.rg-grid {
  display: grid;
  grid-template-columns: max-content minmax(210px, 250px) max-content;
  justify-content: center;
  gap: 12px 22px;
  align-items: start;
  position: relative;
  z-index: 1;
  list-style: none;
  margin: 0;
  padding: 0;
}
.rg-cell { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
/* Branches point back at the trunk: left column hugs its right edge, and vice versa. */
.rg-cell.rg-at-0 { align-items: flex-end; }
.rg-cell.rg-at-2 { align-items: flex-start; }
.rg-cell.rg-at-1 { align-items: stretch; }

/* Compact pills, not cards. A roadmap is scanned at a glance; body copy on every
   node is what made 31 topics sprawl over the page. */
.rg-node {
  display: inline-flex;
  align-items: center;
  text-decoration: none;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  padding: 8px 12px;
  transition: border-color .18s ease, transform .18s ease, background-color .18s ease;
}
.rg-node:hover { border-color: var(--nc, var(--blue)); transform: translateY(-1px); }
.rg-title { font-weight: 600; color: var(--text); letter-spacing: -.1px; display: flex; align-items: center; gap: 6px; line-height: 1.25; }

/* Colour is wayfinding, not decoration: the trunk owns the section accent so the
   main path is unmistakable, and branches stay neutral so they read as detours.
   No per-category palette — that would be decoration. */
/* The trunk is a solid block of the section accent, not a tint. A filled node
   is what makes a roadmap readable at a glance from across the page — a 12%
   wash just reads as another grey box.
   --rg-ink is the text that sits ON the fill: the accent is bright in dark
   theme and near-black in light theme, so the ink has to flip with it. */
/* --rg-fill is a calmer version of the raw accent for the trunk: the full-
   saturation blue read as harsh over a large area. --rg-ink is the text on it,
   flipped per theme. */
.rg-scroll { --rg-ink: #04070d; --rg-fill: color-mix(in srgb, var(--rg-accent, var(--blue)) 78%, #0e1826); }
:root.light .rg-scroll { --rg-ink: #ffffff; --rg-fill: color-mix(in srgb, var(--rg-accent, var(--blue)) 88%, #ffffff); }

.rg-spine {
  width: 100%;
  justify-content: center;
  text-align: center;
  padding: 13px 16px;
  background: var(--rg-fill);
  border-color: var(--rg-fill);
  box-shadow: 0 2px 12px color-mix(in srgb, var(--rg-accent, var(--blue)) 22%, transparent);
}
.rg-spine .rg-title { font-size: 17px; font-weight: 700; color: var(--rg-ink); }
.rg-spine:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 22px color-mix(in srgb, var(--rg-accent, var(--blue)) 45%, transparent);
}

/* Branches carry the accent on their edge, so they read as attached to the
   trunk without competing with it. */
.rg-branch {
  padding: 11px 15px;
  border-color: color-mix(in srgb, var(--rg-accent, var(--blue)) 45%, var(--border));
  background: var(--card);
}
.rg-branch .rg-title { font-size: 15px; font-weight: 650; }
.rg-detail { padding: 9px 13px; background: var(--bg2); }
.rg-detail .rg-title { font-size: 14px; font-weight: 600; color: var(--text); }

/* Hovering a node lights its whole chain back to the root — the fastest answer
   to "what do I need before this?". It brightens the path rather than dimming
   everything else, because dimming means opacity on text and that costs contrast. */
.rg-node.rg-lit {
  border-color: var(--rg-accent, var(--blue));
  background: color-mix(in srgb, var(--rg-accent, var(--blue)) 20%, var(--card));
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--rg-accent, var(--blue)) 18%, transparent);
}
.rg-node.rg-lit .rg-title { color: var(--text); }
.rg-edge.rg-edge-lit { stroke: var(--rg-accent, var(--blue)); stroke-width: 2.5; }

/* A grouping node has no page of its own — label, not link. */
.rg-group { background: transparent; border-style: dashed; cursor: default; }

/* Sub-items sit in their own rows now; the rule and inset are what still tie
   them to the node above. */
.rg-in-bus { padding-left: 16px; border-left: 1px solid var(--border); }
.rg-cell.rg-at-0.rg-in-bus { padding-left: 0; padding-right: 16px; border-left: 0; border-right: 1px solid var(--border); }

/* Band labels belong to the trunk, so they centre over it. Left-aligned inside a
   side cell they floated free of anything and read as stray text. */
.rg-group-label {
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--rg-accent, var(--blue));
  margin-bottom: 4px;
  align-self: center;
  text-align: center;
}
/* A band label belongs to the node under it. Centring it inside a side cell put
   it up to 193px away from the pill it names, reading as stray text. */
.rg-cell.rg-at-0 .rg-group-label { align-self: flex-end; text-align: right; }
.rg-cell.rg-at-2 .rg-group-label { align-self: flex-start; text-align: left; }

/* Motion. The trunk draws itself downward and branches settle in after it, so
   the eye is led along the main path on arrival. Transform and stroke only —
   animating opacity on text makes any frame caught mid-flight fail contrast. */
@media (prefers-reduced-motion: no-preference) {
  @keyframes rgRise { from { transform: translateY(10px); } to { transform: none; } }
  @keyframes rgDrawEdge { from { stroke-dashoffset: var(--rg-len, 400); } to { stroke-dashoffset: 0; } }

  .rg-cell { animation: rgRise .4s cubic-bezier(.22,1,.36,1) backwards; }
  .rg-edge { stroke-dasharray: var(--rg-len, 400); animation: rgDrawEdge .55s cubic-bezier(.22,1,.36,1) backwards; }

  .rg-node { transition: border-color .18s ease, background-color .18s ease, transform .18s ease, box-shadow .18s ease; }
  .rg-edge { transition: stroke .18s ease, stroke-width .18s ease; }
  @keyframes rgPop { 0% { transform: scale(1); } 45% { transform: scale(1.25); } 100% { transform: scale(1); } }
  .rg-check.rg-pop { animation: rgPop .36s cubic-bezier(.22,1,.36,1); }
}

/* Mobile keeps the flow chart — same spine, same branches, same connectors —
   just scaled down. Collapsing to a single column threw away the structure that
   makes it a roadmap in the first place; the scroller handles the width. */
@media (max-width: 760px) {
  .rg-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .rg-grid { grid-template-columns: max-content minmax(160px, 190px) max-content; gap: 9px 14px; }
  .rg-node { padding: 8px 11px; border-radius: var(--r-md); }
  .rg-spine { padding: 10px 12px; }
  .rg-spine .rg-title { font-size: 14px; }
  .rg-branch .rg-title { font-size: 13px; }
  .rg-detail { padding: 7px 10px; }
  .rg-detail .rg-title { font-size: 12.5px; }
  .rg-group-label { font-size: 10.5px; }
  .rg-in-bus { padding-left: 10px; }
  .rg-cell.rg-at-0.rg-in-bus { padding-right: 10px; }
}

.rg-edges { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: 0; overflow: visible; }
.rg-edge { fill: none; stroke: color-mix(in srgb, var(--rg-accent, var(--blue)) 45%, var(--border2)); stroke-width: 2; }
.rg-edge-done { stroke: var(--rg-accent, var(--blue)); }
/* The bus trunk is the shared line a group of sub-items hangs off; its stubs
   are the short links into each. One line reads cleaner than six diagonals. */
.rg-edge-bus { stroke-linecap: round; }