/* ============================================================================
   Reel Lab — the roadmap board (roadmap.html · js/roadmap.js)

   This file carries NO tokens. `css/site.css` :root is the machine truth for the
   palette, the two faces and the gutter, and this page loads it first — every
   colour below is a var() into that file. If you find yourself typing a hex
   here, the token is missing from site.css and that is where it goes.

   Component anatomy is lifted from site.css rather than reinvented: `.btn-buy`
   is the one solid accent fill on a screen and means "the primary action",
   `.btn-k` is everything else, `.chip` is the option pill, `.card` is the
   framed surface. The classes below extend those; they do not replace them.

   The selection recipe is site.css's, unchanged: accent edge, one bed strength,
   full-strength ink (--sel-bd / --sel-bg / --sel-ink).
   ============================================================================ */

.rm { padding-top: 56px; }                        /* clears the fixed .hdr */
.rm__wrap { max-width: 1320px; margin: 0 auto; padding: 0 var(--gutter); }

/* ---------- hero ---------- */

.rm__hero { padding: 44px 0 0; display: flex; align-items: flex-end; gap: 40px; }
.rm__heroL { flex: 1 1 auto; max-width: 620px; }
.rm__h1 {
  margin: 10px 0;
  font-size: clamp(26px, 3.2vw, 34px);
  line-height: 1.12;
  letter-spacing: -.02em;
  font-weight: 700;
  text-wrap: pretty;
}
.rm__sub { margin: 0; font-size: 14px; line-height: 1.6; color: var(--fg-muted); text-wrap: pretty; }
.rm__heroR { display: flex; align-items: center; gap: 10px; padding-bottom: 4px; }

@media (max-width: 860px) {
  .rm__hero { flex-direction: column; align-items: stretch; gap: 20px; }
  .rm__heroR { padding-bottom: 0; }
}

/* ---------- the pipeline (public) ---------- */

.rm__legend { display: flex; align-items: center; gap: 20px; padding: 26px 0 0; flex-wrap: wrap; }
.rm__leg { display: inline-flex; align-items: center; gap: 8px; }
.rm__dot { width: 6px; height: 6px; border-radius: 999px; }
.rm__legT {
  font-family: var(--mono); font-size: 9.5px; letter-spacing: .1em;
  text-transform: uppercase; color: var(--fg-faint);
}
.rm__sync { margin-left: auto; font-family: var(--mono); font-size: 9.5px; letter-spacing: .06em; color: var(--fg-faint); }

.rm__cols {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 18px;
  padding: 22px 0 0;
  align-items: start;
}
@media (max-width: 1100px) { .rm__cols { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 620px)  { .rm__cols { grid-template-columns: minmax(0, 1fr); } }

.rm__col { display: flex; flex-direction: column; gap: 10px; }
.rm__colH {
  display: flex; align-items: center; gap: 9px;
  padding: 12px 14px;
  border: 1px solid var(--border);
  border-top: 2px solid var(--stage, var(--border-3));
  border-radius: 10px;
  background: var(--surface);
}
.rm__colT {
  font-family: var(--mono); font-size: 10px; font-weight: 600;
  letter-spacing: .14em; text-transform: uppercase; color: var(--fg);
}
.rm__colN { margin-left: auto; font-family: var(--mono); font-size: 11px; font-weight: 600; color: var(--stage, var(--fg-muted)); }
.rm__colNote { margin: 0 0 2px; padding: 0 2px; font-size: 11.5px; line-height: 1.5; color: var(--fg-faint); text-wrap: pretty; }

.rm__pcard { border: 1px solid var(--border); border-radius: 12px; background: var(--surface); padding: 14px 15px; }
.rm__pcard--live { border-color: var(--accent-35); }
.rm__pcardTop { display: flex; align-items: center; gap: 7px; margin-bottom: 9px; }
.rm__pcardT { font-size: 13.5px; font-weight: 600; line-height: 1.35; margin-bottom: 6px; text-wrap: pretty; }
.rm__pcardB { font-size: 11.5px; line-height: 1.55; color: var(--fg-muted); text-wrap: pretty; }
.rm__pcardFoot {
  display: flex; align-items: center; gap: 7px;
  margin-top: 11px; padding-top: 10px; border-top: 1px solid var(--line);
  font-family: var(--mono); font-size: 9.5px; letter-spacing: .06em; color: var(--ok);
}

/* ---------- shared: kind + status pills ---------- */

.rm__tag {
  padding: 3px 8px;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--sunk);
  font-family: var(--mono); font-size: 9px; font-weight: 600;
  letter-spacing: .12em; text-transform: uppercase;
  color: var(--fg-soft);
  white-space: nowrap;
}
.rm__tag--bug { color: var(--danger); }
.rm__tag--improve { color: var(--warn); }
.rm__tag--considering { color: var(--fg-faint); }
.rm__tag--next { color: var(--marked); }
.rm__tag--building { color: var(--accent); border-color: var(--accent-35); background: var(--accent-12); }
.rm__tag--shipped { color: var(--ok); }
.rm__tag--declined { color: var(--fg-faint); }

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

.rm__rule { height: 1px; background: var(--line); margin: 56px 0 0; }

.rm__bar {
  display: flex; align-items: center; gap: 10px;
  padding: 28px 0 0;
  border-bottom: 1px solid var(--line);
  flex-wrap: wrap;
}
.rm__tab {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 0 2px 12px; margin-right: 20px;
  border: 0; border-bottom: 2px solid transparent;
  background: transparent; color: var(--fg-faint);
  font-family: var(--mono); font-size: 10px; font-weight: 600;
  letter-spacing: .12em; text-transform: uppercase; cursor: pointer;
  transition: color .14s var(--ease), border-color .14s var(--ease);
}
.rm__tab:hover { color: var(--fg-soft); }
.rm__tab[aria-selected='true'] { color: var(--sel-ink); border-bottom-color: var(--sel-bd); }
.rm__tabN { font-size: 9.5px; font-weight: 400; color: var(--fg-faint); }

.rm__sorts { display: flex; align-items: center; gap: 8px; margin-left: auto; padding-bottom: 10px; }
.rm__sortL { font-family: var(--mono); font-size: 9.5px; letter-spacing: .1em; text-transform: uppercase; color: var(--fg-faint); }
.chip[aria-pressed='true'] { border-color: var(--sel-bd); background: var(--sel-bg); color: var(--sel-ink); }

.rm__body { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 32px; padding: 26px 0 80px; align-items: start; }
@media (max-width: 1000px) { .rm__body { grid-template-columns: minmax(0, 1fr); } }

.rm__list { display: flex; flex-direction: column; gap: 10px; }

.rm__item {
  display: flex; gap: 16px; align-items: flex-start;
  padding: 16px 18px;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: var(--surface);
  cursor: pointer;
  transition: border-color .14s var(--ease);
}
.rm__item:hover { border-color: var(--border-3); }




.rm__itemBody { flex: 1 1 auto; min-width: 0; }
.rm__tagRow { display: flex; align-items: center; gap: 7px; margin-bottom: 7px; flex-wrap: wrap; }
.rm__itemT { font-size: 15px; font-weight: 600; line-height: 1.35; margin-bottom: 5px; text-wrap: pretty; }
.rm__itemB { font-size: 12.5px; line-height: 1.55; color: var(--fg-muted); margin-bottom: 10px; text-wrap: pretty; }
.rm__meta { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.rm__metaT { font-family: var(--mono); font-size: 9.5px; letter-spacing: .06em; color: var(--fg-faint); }
.rm__metaC { display: inline-flex; align-items: center; gap: 5px; }

@media (max-width: 620px) {
  .rm__item { flex-direction: column; gap: 12px; }
  
}

/* ---------- rail ---------- */

.rm__rail { display: flex; flex-direction: column; gap: 14px; position: sticky; top: 72px; }
@media (max-width: 1000px) { .rm__rail { position: static; } }

.rm__panel { border: 1px solid var(--border); border-radius: 12px; background: var(--surface); overflow: hidden; }
.rm__panelH { padding: 14px 16px 12px; border-bottom: 1px solid var(--line); }
.rm__panelBody { padding: 15px 16px; }
.rm__stage { display: flex; align-items: center; gap: 10px; padding: 9px 16px; }
.rm__stageT { font-family: var(--mono); font-size: 10px; letter-spacing: .1em; text-transform: uppercase; color: var(--fg-soft); }
.rm__stageN { margin-left: auto; font-family: var(--mono); font-size: 11px; font-weight: 600; color: var(--stage, var(--fg-muted)); }





.rm__note { margin: 0; font-size: 11.5px; line-height: 1.55; color: var(--fg-faint); text-wrap: pretty; }
.rm__note + .rm__note { margin-top: 9px; }

/* ---------- sign-in ---------- */

.rm__gate { display: flex; justify-content: center; padding: 40px 0 80px; }
.rm__gateCard { width: 100%; max-width: 460px; }
.rm__field {
  width: 100%; padding: 13px 15px;
  border: 1px solid var(--border-2); border-radius: 8px;
  background: var(--sunk);
  font-family: var(--mono); font-size: 13px; color: var(--fg);
}
.rm__field::placeholder { color: var(--fg-faint); }
.rm__field:focus { outline: none; border-color: var(--accent-35); }
.rm__field--key { letter-spacing: .08em; font-size: 14px; text-transform: uppercase; }
.rm__say { margin: 10px 0 0; min-height: 15px; font-family: var(--mono); font-size: 10px; line-height: 1.6; letter-spacing: .04em; color: var(--fg-faint); }
.rm__say[data-tone='ok'] { color: var(--ok); }
.rm__say[data-tone='warn'] { color: var(--warn); }
.rm__say[data-tone='bad'] { color: var(--danger); }
.rm__wide { display: flex; align-items: center; justify-content: center; width: 100%; height: 44px; border-radius: 10px; font-size: 11px; }

/* ---------- thread ---------- */

.rm__back {
  display: inline-flex; align-items: center; gap: 8px;
  margin-bottom: 20px; padding: 0; border: 0; background: transparent; cursor: pointer;
  font-family: var(--mono); font-size: 9.5px; letter-spacing: .1em; text-transform: uppercase; color: var(--fg-faint);
}
.rm__back:hover { color: var(--fg-soft); }

.rm__head { display: flex; gap: 18px; align-items: flex-start; margin-bottom: 20px; }
.rm__headT { margin: 0 0 12px; font-size: clamp(20px, 2.4vw, 26px); line-height: 1.2; letter-spacing: -.015em; font-weight: 700; text-wrap: pretty; }
.rm__prose { margin: 0 0 10px; font-size: 14px; line-height: 1.65; color: var(--fg-soft); white-space: pre-wrap; text-wrap: pretty; }

.rm__shots { display: flex; gap: 10px; flex-wrap: wrap; margin: 0 0 26px; }
.rm__shot { width: 168px; }
.rm__shotImg {
  display: block; width: 168px; height: 104px; object-fit: cover;
  border: 1px solid var(--border-2); border-radius: 10px; background: var(--sunk); cursor: zoom-in;
}
.rm__shotN { margin: 7px 0 0; font-family: var(--mono); font-size: 9.5px; letter-spacing: .04em; color: var(--fg-faint); word-break: break-all; }

.rm__cmts { display: flex; flex-direction: column; gap: 16px; }
.rm__cmt { display: flex; gap: 13px; align-items: flex-start; }
.rm__av {
  width: 30px; height: 30px; flex: 0 0 auto;
  border-radius: 8px; border: 1px solid var(--border-2); background: var(--raise);
  display: flex; align-items: center; justify-content: center;
  font-family: var(--mono); font-size: 10px; font-weight: 600; color: var(--fg-soft);
}
.rm__av--team { border-color: var(--accent-35); background: var(--accent-12); color: var(--accent); }
.rm__bubble { flex: 1 1 auto; min-width: 0; border: 1px solid var(--border); border-radius: 12px; background: var(--surface); padding: 13px 15px; }
.rm__bubble--team { border-color: var(--accent-35); background: var(--surface-2); }
.rm__cmtTop { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; flex-wrap: wrap; }
.rm__who { font-size: 12.5px; font-weight: 600; }
.rm__badge {
  padding: 2px 7px; border-radius: 999px;
  background: var(--accent-12); border: 1px solid var(--accent-35);
  font-family: var(--mono); font-size: 8.5px; font-weight: 600;
  letter-spacing: .12em; text-transform: uppercase; color: var(--accent);
}
.rm__cmtB { margin: 0; font-size: 13px; line-height: 1.65; color: var(--fg-soft); white-space: pre-wrap; text-wrap: pretty; }
.rm__cmtActs { display: flex; align-items: center; gap: 16px; margin-top: 11px; }
.rm__act {
  display: inline-flex; align-items: center; gap: 5px;
  border: 0; background: transparent; cursor: pointer; padding: 0;
  font-family: var(--mono); font-size: 9.5px; letter-spacing: .1em; text-transform: uppercase; color: var(--fg-faint);
}
.rm__act:hover { color: var(--fg-soft); }
.rm__act[aria-pressed='true'] { color: var(--accent); }

/* ---------- composers (reply + new post) ---------- */

.rm__comp { border: 1px solid var(--border-2); border-radius: 12px; background: var(--sunk); overflow: hidden; }
.rm__compIn {
  display: block; width: 100%; min-height: 88px; resize: vertical;
  padding: 14px 15px; border: 0; background: transparent;
  font-family: var(--mono); font-size: 13px; line-height: 1.65; color: var(--fg);
}
.rm__compIn::placeholder { color: var(--fg-faint); }
.rm__compIn:focus { outline: none; }
.rm__compBar {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  padding: 10px 12px; border-top: 1px solid var(--line); background: var(--surface);
}
.rm__compSay { font-family: var(--mono); font-size: 9px; letter-spacing: .04em; color: var(--fg-faint); }
.rm__compGo { margin-left: auto; }

.rm__drop {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 7px;
  min-height: 92px; flex: 1 1 160px;
  border: 1px dashed var(--border-3); border-radius: 10px; background: var(--sunk); cursor: pointer;
  font-family: var(--mono); font-size: 9.5px; letter-spacing: .1em; text-transform: uppercase; color: var(--fg-faint);
}
.rm__drop:hover, .rm__drop[data-over='1'] { border-color: var(--accent-35); color: var(--fg-soft); }
.rm__thumbs { display: flex; gap: 10px; flex-wrap: wrap; margin-bottom: 10px; }
.rm__thumb { position: relative; width: 150px; height: 92px; border: 1px solid var(--border-2); border-radius: 10px; overflow: hidden; background: var(--sunk); }
.rm__thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.rm__thumbX {
  position: absolute; top: 5px; right: 5px; width: 22px; height: 22px;
  display: flex; align-items: center; justify-content: center;
  border: 1px solid var(--border-3); border-radius: 6px; background: var(--scrim);
  color: var(--fg-soft); cursor: pointer; font-size: 12px; line-height: 1;
}

/* ---------- modal ---------- */

.rm__scrim {
  position: fixed; inset: 0; z-index: 60;
  display: flex; align-items: flex-start; justify-content: center;
  padding: 5vh 20px 20px;
  background: var(--scrim);
  backdrop-filter: blur(6px);
  overflow-y: auto;
}
.rm__modal { width: 100%; max-width: 800px; border: 1px solid var(--border-2); border-radius: 14px; background: var(--surface); overflow: hidden; }
.rm__modalH { display: flex; align-items: center; gap: 12px; padding: 16px 20px; border-bottom: 1px solid var(--line); }
.rm__modalBody { padding: 20px; }
.rm__modalFoot { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; padding: 14px 20px; border-top: 1px solid var(--line); background: var(--ink); }
.rm__x {
  width: 26px; height: 26px; margin-left: auto;
  display: flex; align-items: center; justify-content: center;
  border: 1px solid var(--border-2); border-radius: 6px; background: var(--surface-2);
  color: var(--fg-muted); cursor: pointer; font-size: 13px; line-height: 1;
}

.rm__kinds { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin-bottom: 22px; }
@media (max-width: 620px) { .rm__kinds { grid-template-columns: minmax(0, 1fr); } }
.rm__kind {
  text-align: left; padding: 13px 14px;
  border: 1px solid var(--border); border-radius: 11px; background: var(--sunk);
  cursor: pointer; transition: border-color .12s ease, background .12s ease;
}
.rm__kind:hover { border-color: var(--border-3); }
.rm__kind[aria-pressed='true'] { border-color: var(--sel-bd); background: var(--sel-bg); }
.rm__kindTop { display: flex; align-items: center; gap: 8px; margin-bottom: 7px; }
.rm__kindT { font-family: var(--mono); font-size: 10px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--fg-muted); }
.rm__kind[aria-pressed='true'] .rm__kindT { color: var(--fg); }
.rm__kindN { display: block; font-size: 11.5px; line-height: 1.5; color: var(--fg-faint); }

.rm__dupes {
  display: flex; gap: 11px; align-items: flex-start;
  padding: 12px 14px; margin-bottom: 22px;
  border: 1px solid var(--border-2); border-radius: 10px; background: var(--surface-2);
}
.rm__dupeRow { display: flex; align-items: center; gap: 9px; padding: 3px 0; }
.rm__dupeV { font-family: var(--mono); font-size: 10.5px; font-weight: 600; color: var(--fg-muted); min-width: 26px; }
.rm__dupeT { font-size: 12px; color: var(--fg-soft); }
.rm__dupeGo {
  margin-left: auto; border: 0; background: transparent; cursor: pointer; padding: 0; white-space: nowrap;
  font-family: var(--mono); font-size: 9px; letter-spacing: .1em; text-transform: uppercase; color: var(--accent);
}

.rm__label {
  margin: 0 0 9px;
  font-family: var(--mono); font-size: 10px; font-weight: 600;
  letter-spacing: .14em; text-transform: uppercase; color: var(--fg-muted);
}
.rm__route { display: inline-flex; align-items: center; gap: 9px; }
.rm__routeGlyph {
  width: 18px; height: 18px; border-radius: 5px;
  display: flex; align-items: center; justify-content: center;
  font-family: var(--mono); font-size: 9px; font-weight: 700; color: var(--sunk);
  background: var(--marked);
}

/* ---------- evidence ---------- */

.rm__ev { border: 1px solid var(--border); border-radius: 12px; background: var(--surface); overflow: hidden; }
.rm__evH { display: flex; align-items: center; gap: 10px; padding: 13px 16px; border-bottom: 1px solid var(--line); flex-wrap: wrap; }
.rm__evRow { display: flex; align-items: baseline; gap: 16px; padding: 10px 16px; border-bottom: 1px solid var(--surface-2); flex-wrap: wrap; }
.rm__evK { width: 150px; flex: 0 0 auto; font-family: var(--mono); font-size: 10px; letter-spacing: .1em; text-transform: uppercase; color: var(--fg-faint); }
.rm__evV { font-family: var(--mono); font-size: 12px; color: var(--fg-soft); }
.rm__evV--safe { color: var(--ok); }

/* ---------- misc ---------- */

.rm__empty { padding: 46px 20px; text-align: center; border: 1px dashed var(--border-2); border-radius: 12px; color: var(--fg-faint); }
.rm__spin { padding: 40px 0; text-align: center; font-family: var(--mono); font-size: 10px; letter-spacing: .12em; text-transform: uppercase; color: var(--fg-faint); }
.rm__lb { position: fixed; inset: 0; z-index: 70; display: flex; align-items: center; justify-content: center; padding: 24px; background: var(--scrim-deep); cursor: zoom-out; }
.rm__lb img { max-width: 100%; max-height: 100%; border-radius: 10px; }
.rm__sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ---------- the #roadmap section on index.html ----------------------------
   The strip at the foot of the landing page. It reuses .rm__legend / .rm__cols
   and everything under them verbatim — one pipeline renderer, two mounts — and
   adds only the closing line and its call to action.

   `.sec` already supplies the padding, the top rule and the measure, so nothing
   here re-states them. */

.sec--roadmap .rm__legend { padding-top: 0; }
.sec--roadmap .rm__cols { padding-top: 20px; }

.rmx__foot {
  display: flex;
  align-items: center;
  gap: 24px;
  flex-wrap: wrap;
  margin-top: 34px;
  padding: 18px 20px;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: var(--surface);
}
.rmx__note {
  margin: 0;
  flex: 1 1 420px;
  font-size: 12.5px;
  line-height: 1.6;
  color: var(--fg-muted);
  text-wrap: pretty;
}
.rmx__foot .btn-buy { flex: 0 0 auto; }

/* ---------- replies ------------------------------------------------------
   One level of nesting, matching the schema. The rail on the left is what
   says "this belongs to the comment above" — an indent alone reads as an
   accident once two of them stack. */

.rm__replies {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-top: 12px;
  padding-left: 16px;
  border-left: 1px solid var(--border);
}
.rm__cmt--reply .rm__av { width: 24px; height: 24px; font-size: 9px; border-radius: 6px; }
.rm__cmt--reply .rm__bubble { padding: 11px 13px; }
.rm__cmt--reply .rm__cmtB { font-size: 12.5px; }

@media (max-width: 620px) {
  /* A staircase is unreadable on a phone; the rail carries the relationship instead. */
  .rm__replies { padding-left: 10px; }
}

/* The reply composer sits tighter than the one at the foot of a thread. */
.rm__compIn--sm { min-height: 64px; padding: 11px 13px; font-size: 12.5px; }