/* =============================================================================
   Roadmap page. Loaded only on /roadmap — shared tokens live in site.css.
   A three-column board (In progress / Planned / Shipped) with real vote buttons.
   ========================================================================== */

.rm { color: var(--ink); background: var(--bg); overflow-x: hidden; }
.rm-inner { max-width: 1180px; margin: 0 auto; }

/* ------------------------------------------------------------------ hero -- */
.rm-hero { padding: 76px 32px 24px; }
.rm-eyebrow { display: inline-flex; align-items: center; gap: 12px; margin-bottom: 16px; }
.rm-eyebrow__rule { width: 26px; height: 2px; background: var(--accent-deep); }
.rm-eyebrow__text {
  font-size: 12.5px; letter-spacing: .16em; text-transform: uppercase;
  color: var(--accent-deep); font-weight: 600;
}
.rm-hero__title {
  margin: 0; font-size: 52px; line-height: 1.04; letter-spacing: -.03em;
  font-weight: 700; max-width: 860px;
}
.rm-hero__lede {
  margin: 20px 0 0; font-size: 18px; line-height: 1.55; color: #565a4f;
}

/* ----------------------------------------------------------------- board -- */

/* ============================================================== timeline ==
   Releases run top to bottom on a single rail. The board this replaced sorted
   by STATUS, which answered "is anyone working on it" but never "which release
   does it land in" — and that is the question people arrive with.

   Ordering inside a release is by votes, decided in the view. The rail only has
   to make the release boundaries unmistakable. */
.rm-timeline-wrap { padding: 26px 32px 96px; }

.rm-timeline { list-style: none; margin: 0; padding: 0; position: relative; }
/* The rail itself: one line behind every node, stopping at the last release so
   it does not trail off into whitespace. */
.rm-timeline::before {
  content: ""; position: absolute; left: 7px; top: 10px; bottom: 10px; width: 2px;
  background: linear-gradient(180deg, rgba(20,22,15,.16), rgba(20,22,15,.05));
}

.rm-ms { position: relative; padding: 0 0 46px 40px; }
.rm-ms:last-child { padding-bottom: 8px; }

.rm-ms__node {
  position: absolute; left: 0; top: 6px; width: 16px; height: 16px; border-radius: 50%;
  background: #fff; border: 2px solid rgba(20,22,15,.22); box-sizing: border-box;
}
/* The release being built now is the one the eye should land on first. */
.rm-ms--current .rm-ms__node { border-color: var(--accent); background: var(--accent); box-shadow: 0 0 0 5px rgba(0,214,119,.16); }
.rm-ms--shipped .rm-ms__node { border-color: var(--accent-deep); background: var(--accent-deep); }

.rm-ms__head { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.rm-ms__version { margin: 0; font-size: 24px; font-weight: 800; letter-spacing: -.01em; }
.rm-ms__now, .rm-ms__out {
  font-size: 11.5px; font-weight: 800; letter-spacing: .04em; text-transform: uppercase;
  padding: 4px 10px; border-radius: 100px;
}
.rm-ms__now { background: rgba(0,214,119,.14); color: var(--accent-deep); }
.rm-ms__out { background: rgba(20,22,15,.07); color: #6b6f63; }
.rm-ms__lede { margin: 8px 0 0; font-size: 14.5px; line-height: 1.55; color: #565a4f; max-width: 78ch; text-wrap: pretty; }

.rm-ms__list { margin-top: 18px; display: flex; flex-direction: column; gap: 12px; }

/* ------------------------------------------------------------------ card -- */
.rm-card {
  background: #fff; border: 1px solid rgba(20,22,15,.09); border-radius: 16px;
  padding: 16px 18px; box-shadow: 0 14px 34px -30px rgba(18,40,28,.3);
  transition: box-shadow .16s ease;
  display: flex; align-items: flex-start; gap: 18px;
}
.rm-card:hover { box-shadow: 0 22px 44px -32px rgba(18,40,28,.34); }
.rm-card--shipped { background: #fbfcfa; }
.rm-card__main { flex: 1 1 auto; min-width: 0; }
.rm-card__title { font-size: 16px; font-weight: 700; margin-bottom: 5px; }
.rm-card__desc { margin: 0; font-size: 13.5px; line-height: 1.5; color: #565a4f; text-wrap: pretty; }
.rm-card--shipped .rm-card__desc { color: #8b8f82; }

/* ------------------------------------------------------- the withheld one --
   One card on the page describes nothing on purpose. Said in words alone it
   lands in the same visual class as the features we ARE describing, so it
   inverts instead: dark where every other card is white.

   No animation. A single card pulsing on an otherwise still page reads as
   "loading" rather than "secret", and any effect built out of motion vanishes
   for a reader browsing with reduced motion — which leaves exactly that reader
   with the one card we wanted them to notice looking like all the others. */
.rm-card--mystery {
  background: linear-gradient(180deg, #1b1e16, #14160f);
  border-color: rgba(0,214,119,.26);
  box-shadow: 0 18px 40px -28px rgba(0,60,32,.55);
}
.rm-card--mystery:hover { box-shadow: 0 26px 52px -30px rgba(0,80,45,.6); }
.rm-card--mystery .rm-card__title {
  color: #fff; display: flex; align-items: center; gap: 8px;
}
.rm-card--mystery .rm-card__mark { color: var(--accent); flex: none; }
.rm-card--mystery .rm-card__desc { color: #a4ab9d; }

/* The tag and the vote button carry their own light backgrounds, which turn
   into two bright blocks on a dark card. Both are re-tinted rather than hidden:
   the card is different, not a different kind of thing. */
.rm-card--mystery .rm-tag { background: rgba(255,255,255,.10); color: #ccd3c4; }
.rm-card--mystery .rm-vote {
  background: rgba(255,255,255,.06); border-color: rgba(255,255,255,.18); color: #e6ebe1;
}
.rm-card--mystery .rm-vote:hover { border-color: var(--accent); }
.rm-card--mystery .rm-vote--on { background: rgba(0,214,119,.20); border-color: var(--accent); color: #74eeb2; }
.rm-card--mystery .rm-vote__count { color: inherit; }

/* Status and vote share the right edge, so a scan down the column reads the
   states first and the numbers second. */
.rm-card__side { flex: none; display: flex; flex-direction: column; align-items: flex-end; gap: 9px; }

.rm-tag {
  font-size: 11px; font-weight: 800; letter-spacing: .03em; text-transform: uppercase;
  padding: 4px 9px; border-radius: 100px; white-space: nowrap;
}
.rm-tag--progress { background: rgba(245,166,35,.16); color: #8a5d05; }
.rm-tag--planned  { background: rgba(43,127,208,.13); color: #1f5f9e; }
.rm-tag--shipped  { background: rgba(0,214,119,.14); color: var(--accent-deep); }

.rm-card__check {
  width: 22px; height: 22px; border-radius: 50%;
  background: rgba(0,214,119,.16); color: var(--accent-deep);
  display: flex; align-items: center; justify-content: center;
}

/* ------------------------------------------------------------------ vote -- */
.rm-vote-form { margin: 0; }
.rm-vote {
  display: inline-flex; align-items: center; gap: 7px;
  background: #f6f8f4; border: 1px solid rgba(20,22,15,.14); border-radius: 10px;
  padding: 6px 12px; font: inherit; font-size: 13px; font-weight: 700; color: #3d4136;
  cursor: pointer; transition: transform .12s ease, border-color .14s ease, background .14s ease;
}
.rm-vote:hover { border-color: var(--accent); }
.rm-vote:active { transform: translateY(1px); }
.rm-vote--on { background: rgba(0,214,119,.12); border-color: var(--accent); color: var(--accent-deep); }
.rm-vote__count { font-size: 13px; font-weight: 700; color: var(--ink-2); line-height: 1; }

.rm-foot {
  margin: 8px 0 0; padding-left: 40px;
  font-size: 13px; color: #8b8f82; max-width: 78ch; text-wrap: pretty;
}

/* The measure above is counted in `ch`, the width of a zero, which is a Latin
   letter. A CJK glyph is about twice that, so 78ch lands at roughly 39 hanzi or
   kana and the same blurb breaks two lines earlier than it should. These three
   scripts get their measure in `em` instead, where one unit really is one
   character. */
:is(:lang(ja), :lang(ko), :lang(zh)) :is(.rm-ms__lede, .rm-foot) { max-width: 44em; }

/* ------------------------------------------------------------ responsive -- */
@media (max-width: 640px) {
  .rm-hero, .rm-timeline-wrap { padding-left: 20px; padding-right: 20px; }
  .rm-hero__title { font-size: 40px; }
  .rm-ms { padding-left: 30px; padding-bottom: 36px; }
  .rm-foot { padding-left: 30px; }
  .rm-ms__version { font-size: 21px; }
  /* Stack: a 100px-wide description beside a tag column is not a card. */
  .rm-card { flex-direction: column; gap: 12px; }
  .rm-card__side { flex-direction: row; align-items: center; align-self: stretch; justify-content: space-between; }
}