/*
 * Vivid Exodus — the development roadmap surface.
 *
 * ONE file, loaded by both the landing page and the /plan deck. There is no
 * design-repo copy and no production mirror, so there is nothing to hold
 * byte-equal and no gate needed to hold it. The sibling project this borrows
 * its lessons from keeps a mirror and pays for it with a `make verify-web`
 * equality check at every review; the cheaper move was to not have two files.
 *
 * Colours come from design/landing/tokens.css, which is GENERATED from
 * game/src/web/palette.ts. Nothing here invents a colour, for the reason that
 * file gives: a page that stops matching the game's colours fails silently,
 * because nothing about a marketing page breaks when its green drifts.
 *
 * The status mapping is the game's own vocabulary rather than traffic lights:
 *
 *   done     companion-saved     someone who got out
 *   wip      suspicious cone     something currently being watched
 *   todo     subdued text        unlit, not yet approached
 *   blocked  hazard              the one thing on the board that kills you
 *   cut      ledge               structure: decided, inert, still load-bearing
 *
 * Only `blocked` is allowed saturation, which is the palette's own rule —
 * "in a game whose core verb is 'am I visible?', saturation is a reserved
 * resource". A roadmap that floods itself with accent colour is not this game.
 */

.vx-roadmap {
  --vx-rm-done: var(--vx-actor-companion-saved, #8fd6a0);
  --vx-rm-wip: rgb(var(--vx-cone-suspicious, 235, 185, 90));
  --vx-rm-todo: var(--vx-text-subdued, #5c6b7d);
  --vx-rm-blocked: var(--vx-object-hazard, #8c2f2f);
  --vx-rm-cut: var(--vx-structure-ledge, #3a4a5e);

  --vx-rm-ink: var(--vx-text-clue, #9fb4c9);
  --vx-rm-ink-lit: var(--vx-text-title, #e8eef5);
  --vx-rm-line: rgba(159, 180, 201, 0.16);
  --vx-rm-well: var(--vx-structure-air, #0d1117);

  color: var(--vx-rm-ink);
  font-family: var(--vx-font-ui, ui-sans-serif, system-ui, sans-serif);
  container-type: inline-size;
}

/* ── The census: one bar for the whole project ─────────────────────────── */

.vx-rm__census {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.5rem 1.25rem;
  margin-bottom: 0.85rem;
}

.vx-rm__count {
  font-family: var(--vx-font-mono, ui-monospace, SFMono-Regular, monospace);
  font-size: clamp(1.6rem, 5cqi, 2.4rem);
  line-height: 1;
  color: var(--vx-rm-ink-lit);
  font-variant-numeric: tabular-nums;
}

.vx-rm__count small {
  font-size: 0.42em;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--vx-rm-ink);
  margin-left: 0.5em;
}

.vx-rm__asof {
  margin-left: auto;
  font-family: var(--vx-font-mono, ui-monospace, SFMono-Regular, monospace);
  font-size: 0.68rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--vx-rm-todo);
}

/* ── The stacked bar, used at project scale and per epic ───────────────── */

.vx-rm__bar {
  display: flex;
  width: 100%;
  height: 0.55rem;
  border-radius: 999px;
  overflow: hidden;
  background: var(--vx-rm-well);
  box-shadow: inset 0 0 0 1px var(--vx-rm-line);
}

.vx-rm__bar--lg { height: 0.85rem; }

.vx-rm__seg { height: 100%; }
.vx-rm__seg[data-status="done"] { background: var(--vx-rm-done); }
.vx-rm__seg[data-status="wip"] { background: var(--vx-rm-wip); }
.vx-rm__seg[data-status="todo"] { background: var(--vx-rm-todo); opacity: 0.5; }
.vx-rm__seg[data-status="blocked"] { background: var(--vx-rm-blocked); }
.vx-rm__seg[data-status="cut"] { background: var(--vx-rm-cut); }

/* ── Legend ────────────────────────────────────────────────────────────── */

.vx-rm__legend {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem 1.1rem;
  margin: 0.85rem 0 1.75rem;
  padding: 0;
  list-style: none;
  font-family: var(--vx-font-mono, ui-monospace, SFMono-Regular, monospace);
  font-size: 0.72rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.vx-rm__legend li {
  display: flex;
  align-items: center;
  gap: 0.45rem;
}

.vx-rm__dot {
  width: 0.5rem;
  height: 0.5rem;
  border-radius: 50%;
  flex: none;
}

.vx-rm__dot[data-status="done"] { background: var(--vx-rm-done); }
.vx-rm__dot[data-status="wip"] { background: var(--vx-rm-wip); }
.vx-rm__dot[data-status="todo"] { background: var(--vx-rm-todo); opacity: 0.5; }
.vx-rm__dot[data-status="blocked"] { background: var(--vx-rm-blocked); }
.vx-rm__dot[data-status="cut"] { background: var(--vx-rm-cut); }

.vx-rm__legend b {
  color: var(--vx-rm-ink-lit);
  font-weight: 500;
  font-variant-numeric: tabular-nums;
}

/* ── Epics ─────────────────────────────────────────────────────────────── */

.vx-rm__epics {
  margin: 0;
  padding: 0;
  list-style: none;
  border-top: 1px solid var(--vx-rm-line);
}

.vx-rm__epic {
  border-bottom: 1px solid var(--vx-rm-line);
  padding: 0.95rem 0;
}

.vx-rm__head {
  display: grid;
  grid-template-columns: 1.6rem minmax(0, 1fr) auto;
  align-items: center;
  gap: 0.5rem 0.85rem;
}

.vx-rm__key {
  font-family: var(--vx-font-mono, ui-monospace, SFMono-Regular, monospace);
  font-size: 0.95rem;
  color: var(--vx-rm-todo);
}

.vx-rm__title {
  color: var(--vx-rm-ink-lit);
  font-size: 0.98rem;
  margin: 0;
  font-weight: 500;
}

.vx-rm__tally {
  font-family: var(--vx-font-mono, ui-monospace, SFMono-Regular, monospace);
  font-size: 0.8rem;
  font-variant-numeric: tabular-nums;
  color: var(--vx-rm-ink);
  white-space: nowrap;
}

.vx-rm__tally em {
  font-style: normal;
  color: var(--vx-rm-blocked-ink, #d98080);
}

.vx-rm__epic .vx-rm__bar { grid-column: 2 / -1; }

/* Clamped, not truncated. The full prose is in the DOM and in the feed; a
 * roadmap row shows the opening claim and the document carries the argument.
 * Epic J's blurb is fifteen sentences long and would otherwise be taller than
 * the other nine epics put together. */
.vx-rm__blurb {
  grid-column: 2 / -1;
  margin: 0;
  font-size: 0.85rem;
  line-height: 1.55;
  color: var(--vx-rm-ink);
  opacity: 0.8;
  max-width: 62ch;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  line-clamp: 3;
  overflow: hidden;
}

.vx-rm__blurb code {
  font-family: var(--vx-font-mono, ui-monospace, SFMono-Regular, monospace);
  font-size: 0.92em;
}

.vx-rm__blurb a { color: inherit; }

/* ── Items: only ever rendered when the feed carries rows ──────────────── */

.vx-rm__items {
  grid-column: 2 / -1;
  margin: 0.35rem 0 0;
  padding: 0;
  list-style: none;
}

.vx-rm__more {
  grid-column: 2 / -1;
  font-family: var(--vx-font-mono, ui-monospace, SFMono-Regular, monospace);
  font-size: 0.7rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--vx-rm-todo);
  cursor: pointer;
  list-style: none;
  padding: 0.35rem 0;
}

.vx-rm__more::-webkit-details-marker { display: none; }
.vx-rm__more:hover { color: var(--vx-rm-ink-lit); }
.vx-rm__more::before { content: "+ "; }
details[open] > .vx-rm__more::before { content: "\2212 "; }

.vx-rm__item {
  display: grid;
  grid-template-columns: 0.5rem 3.2rem minmax(0, 1fr);
  gap: 0.5rem 0.7rem;
  align-items: baseline;
  padding: 0.45rem 0;
  border-top: 1px solid var(--vx-rm-line);
  font-size: 0.86rem;
  line-height: 1.5;
}

.vx-rm__item .vx-rm__dot { align-self: center; }

.vx-rm__id {
  font-family: var(--vx-font-mono, ui-monospace, SFMono-Regular, monospace);
  font-size: 0.76rem;
  color: var(--vx-rm-todo);
}

.vx-rm__item-body strong {
  color: var(--vx-rm-ink-lit);
  font-weight: 500;
  display: block;
}

.vx-rm__note {
  display: block;
  margin-top: 0.2rem;
  color: var(--vx-rm-ink);
  opacity: 0.78;
  font-size: 0.82rem;
}

.vx-rm__note a { color: inherit; }

.vx-rm__note code {
  font-family: var(--vx-font-mono, ui-monospace, SFMono-Regular, monospace);
  font-size: 0.92em;
  color: var(--vx-rm-ink-lit);
}

/* An empty roadmap is a broken deploy, and a page that hides that is the
 * failure this project keeps naming — a surface saying something untrue
 * because saying nothing looked tidier. It says so instead. */
.vx-rm__fail {
  font-family: var(--vx-font-mono, ui-monospace, SFMono-Regular, monospace);
  font-size: 0.78rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--vx-rm-blocked-ink, #d98080);
}

@media (prefers-reduced-motion: no-preference) {
  .vx-rm__seg { transition: flex-basis 400ms ease; }
}