/* ============================================================================
   NorthGrid — css/roadmap.css
   AUDIT 2026-10-01 BW: New file. Components for /roadmap/ only, loaded after
   css/ng-brand.css (which supplies every token, the inner-page hero, buttons,
   .callout, .legal-note, the Amber CTA band and the .oneline drawing base).
   Kept out of ng-brand.css so a roadmap tweak never forces a cache bump of
   the stylesheet every page shares. Version string: $ngRmCssVer in
   roadmap/index.php.

   The memorable element is the electrical one-line: the hero is a bus with a
   drop per status, and the board below hangs each status off a vertical bus
   with its breaker symbol (closed = shipped / in progress, open = planned,
   dashed = exploring). Everything else stays quiet.

   Contrast (WCAG 2.2 AA), all from the ng-brand.css measurements:
     card text Onyx on white 16.3, muted --ng-ink-2 on white > 5.65,
     category Copper on white 5.4 (allowed on white only), target pill Onyx on
     Amber 9.5, shipped band Chalk on Pine 9.8 / --ng-on-pine-2 8.15,
     Amber used on Pine only as graphics or large text (7.1 either way).
   ========================================================================== */

/* ── Hero drawing (extends .oneline from ng-brand.css) ─────────────────── */
.rm-diagram .contact { fill: var(--ng-white); stroke: var(--ng-onyx); stroke-width: 2; }
.rm-diagram .brk { stroke-linecap: round; stroke-width: 3; }
.rm-diagram .brk.draft { stroke-dasharray: 3 4; }
.rm-diagram .node.done { fill: var(--ng-pine); stroke: var(--ng-pine); }
.rm-diagram .node.draft { stroke-dasharray: 6 5; }
.rm-diagram text.on { fill: var(--ng-chalk); }
.rm-diagram text.sub.on { fill: var(--ng-on-pine-2); }
.rm-diagram .legend text { font-size: 12px; }

/* Jump links (also the accessible version of the drawing's counts) */
.rm-jump { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 28px; list-style: none; }
.rm-jump a {
  display: inline-flex; align-items: center; gap: 10px; min-height: 44px; padding: 8px 10px 8px 16px;
  border: 1.5px solid var(--ng-onyx); border-radius: var(--ng-radius-btn);
  font-size: 0.9375rem; font-weight: 600; text-decoration: none; color: var(--ng-ink);
  background: var(--ng-white); transition: background-color var(--ng-ease), color var(--ng-ease);
}
.rm-jump a .n {
  display: inline-grid; place-items: center; min-width: 28px; height: 28px; padding: 0 6px;
  border-radius: 7px 2px 7px 7px; background: var(--ng-chalk); font-size: 0.875rem;
}
.rm-jump a:hover { background: var(--ng-onyx); color: var(--ng-chalk); }
.rm-jump a:hover .n { background: var(--ng-amber); color: var(--ng-onyx); }
.rm-updated { margin-top: 18px; font-size: 0.9375rem; color: var(--ng-ink-2); }

/* ── Breaker symbol (inline SVG from $ngRmBreaker) ──────────────────────── */
.rm-brk { flex: none; width: 40px; height: 24px; overflow: visible; }
.rm-brk line { stroke: var(--ng-onyx); stroke-width: 2.5; stroke-linecap: round; }
.rm-brk circle { fill: var(--ng-white); stroke: var(--ng-onyx); stroke-width: 2; }
.rm-brk .blade { stroke-width: 3; }
.rm-brk .blade.draft { stroke-dasharray: 3 4; }

/* ── Board: vertical bus with a tap per status ─────────────────────────── */
.rm-board .section-inner { max-width: var(--ng-wrap); }
.rm-bus { position: relative; padding-left: 64px; }
.rm-bus::before {
  /* the bus */
  content: ''; position: absolute; left: 14px; top: 19px; bottom: 24px; width: 4px;
  border-radius: 2px; background: var(--ng-onyx);
}
.rm-horizon + .rm-horizon { margin-top: clamp(56px, 3rem + 2vw, 88px); }
.rm-horizon { scroll-margin-top: calc(var(--ng-nav-h) + 24px); }
.rm-horizon-head { position: relative; display: flex; align-items: flex-start; gap: 14px; margin-bottom: 26px; }
.rm-horizon-head::before {
  /* tap from the bus to the breaker */
  content: ''; position: absolute; left: -46px; top: 18px; width: 46px; height: 3px; background: var(--ng-onyx);
}
.rm-horizon-head::after {
  /* junction dot on the bus */
  content: ''; position: absolute; left: -54px; top: 13px; width: 13px; height: 13px; border-radius: 50%;
  background: var(--ng-onyx);
}
.rm-horizon-head .rm-brk { width: 56px; height: 34px; margin-top: -3px; margin-left: -6px; }
.rm-horizon-head h2 { font-size: clamp(1.75rem, 1.3rem + 1.6vw, 2.5rem); margin-bottom: 6px; }
.rm-horizon-head p { color: var(--ng-ink-2); max-width: 60ch; }
.rm-count {
  display: inline-block; vertical-align: middle; margin-left: 10px; padding: 4px 10px; border-radius: 999px;
  font-family: var(--ng-font-body); font-size: 0.8125rem; font-weight: 600; letter-spacing: 0;
  background: var(--ng-white); border: 1px solid var(--ng-line); color: var(--ng-ink-2);
  position: relative; top: -0.2em;
}

/* Cards: the brand tile, square top-right corner [Patterns] */
.rm-items { display: grid; grid-template-columns: repeat(auto-fill, minmax(270px, 1fr)); gap: 18px; list-style: none; }
.rm-item {
  position: relative; display: flex; flex-direction: column; min-width: 0;
  background: var(--ng-white); border: 1px solid var(--ng-line);
  border-radius: var(--ng-radius) 2px var(--ng-radius) var(--ng-radius);
  padding: 22px 22px 20px; box-shadow: var(--ng-shadow); scroll-margin-top: calc(var(--ng-nav-h) + 24px);
}
.rm-item.rm-in-progress { border-top: 4px solid var(--ng-amber); }
.rm-item.rm-exploring { border-style: dashed; border-color: var(--ng-line-ui); box-shadow: none; }
.rm-cat { font-size: 0.8125rem; font-weight: 600; color: var(--ng-copper); margin-bottom: 8px; }
.rm-item h3 { font-size: 1.1875rem; margin-bottom: 8px; }
.rm-sum { color: var(--ng-ink-2); font-size: 0.9375rem; line-height: 1.6; }
.rm-when {
  align-self: flex-start; margin-top: auto;
  display: inline-block; padding: 5px 12px; border-radius: 999px;
  background: var(--ng-amber); color: var(--ng-onyx); font-size: 0.8125rem; font-weight: 600;
}
.rm-item:has(.rm-when) > :nth-last-child(2) { margin-bottom: 16px; } /* gap above the pill; pill sits on the card floor */
.rm-item:target { outline: 3px solid var(--ng-pine); outline-offset: 3px; }

/* ── Recently shipped: Pine band with the tile strip ────────────────────── */
.rm-shipped {
  background: var(--ng-tile-pine) repeat-x var(--ng-gutter) 32px / 64px 64px, var(--ng-pine);
  padding-top: calc(clamp(64px, 4rem + 4vw, 120px) + 56px); color: var(--ng-chalk);
}
.rm-shipped .section-h2 { color: var(--ng-chalk); }
.rm-shipped .section-lead { color: var(--ng-on-pine-2); margin-bottom: 36px; }
.rm-ship-list { list-style: none; max-width: 900px; border-top: 1px solid rgba(234,230,221,0.16); }
.rm-ship-list > li {
  display: grid; grid-template-columns: 220px 1fr; gap: 24px; padding: 22px 0; align-items: start;
  border-bottom: 1px solid rgba(234,230,221,0.16); scroll-margin-top: calc(var(--ng-nav-h) + 24px);
}
.rm-ship-date { display: flex; align-items: center; gap: 12px; color: var(--ng-on-pine-2); font-size: 0.9375rem; }
.rm-shipped .rm-brk line { stroke: var(--ng-chalk); }
.rm-shipped .rm-brk circle { fill: var(--ng-pine); stroke: var(--ng-chalk); }
.rm-shipped .rm-brk .blade { stroke: var(--ng-amber); }
.rm-ship-list h3 { color: var(--ng-chalk); font-size: 1.125rem; margin-bottom: 4px; }
.rm-ship-list p { color: var(--ng-on-pine-2); font-size: 0.9375rem; }

/* ── How to read the roadmap ───────────────────────────────────────────── */
.rm-how { background: var(--ng-chalk); }
.rm-how-grid { display: grid; grid-template-columns: 0.9fr 1.1fr; gap: clamp(36px, 5vw, 72px); align-items: start; }
.rm-legend { background: var(--ng-white); border: 1px solid var(--ng-line); border-radius: var(--ng-radius); overflow: hidden; }
.rm-legend .row { display: grid; grid-template-columns: 190px 1fr; gap: 16px; padding: 16px 20px; border-bottom: 1px solid #ECE8E0; align-items: center; }
.rm-legend .row:last-child { border-bottom: 0; }
.rm-legend dt { display: flex; align-items: center; gap: 12px; font-weight: 600; }
.rm-legend dd { color: var(--ng-ink-2); font-size: 0.9375rem; line-height: 1.55; }

/* ── Responsive ────────────────────────────────────────────────────────── */
@media (max-width: 1024px) {
  .rm-how-grid { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
  .rm-hero .art { display: none; } /* drawing text is unreadable at phone width; the jump links carry the same counts */
  .rm-bus { padding-left: 34px; }
  .rm-bus::before { left: 4px; }
  .rm-horizon-head::before { left: -26px; width: 26px; }
  .rm-horizon-head::after { left: -34px; }
  .rm-horizon-head { gap: 10px; }
  .rm-horizon-head .rm-brk { width: 40px; height: 24px; margin-top: 3px; }
  .rm-count { display: table; margin: 8px 0 0; top: 0; }
  .rm-items { grid-template-columns: 1fr; }
  .rm-ship-list > li { grid-template-columns: 1fr; gap: 6px; }
  .rm-legend .row { grid-template-columns: 1fr; gap: 6px; }
  .rm-jump a { flex: 1 1 auto; justify-content: space-between; }
}

@media print {
  .rm-bus::before, .rm-horizon-head::before, .rm-horizon-head::after { display: none; }
  .rm-bus { padding-left: 0; }
  .rm-item { box-shadow: none; break-inside: avoid; }
  .rm-shipped { background: #fff; color: var(--ng-ink); }
  .rm-shipped .section-h2, .rm-ship-list h3 { color: var(--ng-ink); }
  .rm-shipped .section-lead, .rm-ship-list p, .rm-ship-date { color: var(--ng-ink-2); }
}