/* roadmap.css - the board.
 *
 * Two layouts over one axis. Timeline is a grid where a bar SPANS the
 * bands it runs across; Cascade stacks those bands and repeats a
 * spanning item as a slim strip. Both carry the item's title on the
 * thing itself, so the board reads without opening anything.
 *
 * Theme colour rides a --rm-a (accent) / --rm-s (soft) pair set by the
 * rm-theme-* classes, so every surface mixes from the same two values
 * rather than hard-coding a colour per component. */

/* Theme lanes. Hue only - lightness and chroma come from the tokens, so
 * both themes stay balanced and neither is a second palette. */
.rm-theme-make_safe    { --rm-h: 28; }
.rm-theme-make_dry     { --rm-h: 245; }
.rm-theme-make_secure  { --rm-h: 285; }
.rm-theme-make_warm    { --rm-h: 55; }
.rm-theme-make_working { --rm-h: 200; }
.rm-theme-make_clean   { --rm-h: 175; }
.rm-theme-systems_tech { --rm-h: 265; }
.rm-theme-storage      { --rm-h: 95; }
.rm-theme-cosmetic     { --rm-h: 330; }
.rm-theme-outdoor      { --rm-h: 140; }
.rm-theme-comfort      { --rm-h: 15; }

[class*="rm-theme-"] {
  --rm-a: oklch(52% 0.11 var(--rm-h, 155));
  --rm-s: color-mix(in oklch, var(--rm-a) 10%, var(--paper-raised));
}
:root[data-theme="dark"] [class*="rm-theme-"],
.rmd [class*="rm-theme-"] { --rm-a: oklch(74% 0.115 var(--rm-h, 155)); }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) [class*="rm-theme-"] {
    --rm-a: oklch(74% 0.115 var(--rm-h, 155));
  }
}

/* --- Timeline -------------------------------------------------------- */

.rmv-tl {
  /* Grid tracks are custom properties so the collapse control can thin a
   * single column to a seam without touching the bar placement. */
  --tl-gutter: 8rem;
  --tl-col: minmax(4.5rem, 1fr);
  --tl-seam: 1.75rem;
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  padding: var(--space-3);
  background: var(--paper-raised);
  border: 1px solid var(--rule);
  border-radius: var(--radius);
}
@media (min-width: 768px) { .rmv-tl { --tl-gutter: 11rem; --tl-col: minmax(6rem, 1fr); } }

.rmv-tl-head,
.rmv-tl-row {
  display: grid;
  grid-template-columns:
    var(--tl-gutter) var(--tl-tracks, repeat(var(--tl-cols, 5), var(--tl-col)));
  gap: var(--space-2);
  align-items: center;
}
.rmv-tl-row {
  background: var(--paper-sunken);
  border-radius: var(--radius-sm);
  padding-block: var(--space-1);
}
.rmv-tl-row--child .rmv-tl-label { padding-inline-start: var(--space-3); }
.rmv-tl-row--child .rmv-tl-bar { height: 1.5rem; }

/* Wide widens every data column so a long board scrolls sideways on
 * purpose rather than cramming. */
.rmv-tl--wide .rmv-tl-head,
.rmv-tl--wide .rmv-tl-row {
  min-inline-size: calc(var(--tl-gutter)
    + var(--tl-full, var(--tl-cols, 5)) * 14rem
    + var(--tl-seams, 0) * var(--tl-seam));
}

.rmv-tl-head { position: sticky; top: 0; z-index: 2; background: var(--paper-raised); }

.rmv-tl-label {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  color: var(--ink-faint);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Column headers double as collapse toggles. */
.rmv-tl-col {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--ink-muted);
  background: transparent;
  border: 0;
  border-bottom: 2px solid var(--rule);
  padding-block: var(--space-2);
  min-height: var(--tap-min-floor);
  cursor: pointer;
  text-align: center;
}
.rmv-tl-col:hover { color: var(--ink); border-bottom-color: var(--accent-edge); }
.rmv-band-toggle--off { text-decoration: line-through; color: var(--ink-faint); }
.rmv-tl-col--seam { writing-mode: vertical-rl; font-size: 0.65rem; padding-inline: 0; }

/* The bar IS the item: title inside, owner alongside, theme colour on
 * the leading edge. A button, not a div, so it is reachable by keyboard
 * and announces itself. */
.rmv-tl-bar {
  grid-column: var(--from) / var(--to);
  display: flex;
  align-items: center;
  gap: var(--space-2);
  min-width: 0;
  min-height: var(--tap-min-floor);
  height: 1.75rem;
  padding-inline: var(--space-2);
  font: inherit;
  font-size: var(--text-sm);
  text-align: start;
  color: var(--ink);
  cursor: pointer;
  background: color-mix(in oklch, var(--rm-a, var(--rule-strong)) 12%, var(--paper-raised));
  border: 1px solid color-mix(in oklch, var(--rm-a, var(--rule-strong)) 30%, transparent);
  border-inline-start: 3px solid var(--rm-a, var(--rule-strong));
  border-radius: var(--radius-sm);
  position: relative;
}
.rmv-tl-bar:hover { background: color-mix(in oklch, var(--rm-a, var(--rule-strong)) 22%, var(--paper-raised)); }
/* The title must claim the bar's free space. As a bare flex item with
 * overflow:hidden it collapses to zero width - overflow removes the
 * automatic minimum size - and the bar renders as an empty block, which
 * is exactly what happened. flex + min-width:0 is the pair that makes it
 * both fill and ellipsis correctly. */
.rmv-tl-title {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* A project reads as a stronger shade of its lane and a heavier edge. */
.rmv-tl-bar--project {
  border-inline-start-width: 5px;
  font-weight: 600;
  background: color-mix(in oklch, var(--rm-a, var(--rule-strong)) 20%, var(--paper-raised));
}
/* Delivered work reads as settled history: it gives up its lane fill,
 * which is why its theme survives as a dot instead. */
.rmv-tl-bar--done {
  background: var(--paper-raised);
  border-inline-start-color: var(--ok);
  color: var(--ink-muted);
  text-decoration: line-through;
  text-decoration-color: var(--ink-faint);
}
/* Parked reads as far-future: a whisper of the lane, dashed edge, so it
 * still reads as owned rather than detached. */
.rmv-tl-bar--parked {
  background: color-mix(in oklch, var(--rm-a, var(--rule-strong)) 5%, var(--paper-raised));
  border-inline-start-style: dashed;
  color: var(--ink-muted);
}

.rmv-tl-who {
  flex: 0 0 auto;
  font-size: var(--text-xs);
  color: var(--ink-faint);
  white-space: nowrap;
}
/* A faint dot at the bar's end: the item's own theme, where it differs
 * from the family colour it inherited. A quiet flag for misfiled work. */
.rmv-theme-dot {
  width: 0.5rem; height: 0.5rem;
  border-radius: 999px;
  background: var(--rm-a, var(--rule-strong));
  flex: none;
}

/* Progress as a hairline under the bar - a signal, never a number. */
.rmv-prog-25::after, .rmv-prog-50::after,
.rmv-prog-75::after, .rmv-prog-90::after {
  content: "";
  position: absolute;
  inset-block-end: 0; inset-inline-start: 0;
  block-size: 2px;
  background: var(--rm-a, var(--accent));
  border-end-start-radius: var(--radius-sm);
}
.rmv-prog-25::after { inline-size: 25%; }
.rmv-prog-50::after { inline-size: 50%; }
.rmv-prog-75::after { inline-size: 75%; }
.rmv-prog-90::after { inline-size: 90%; }

/* --- Cascade --------------------------------------------------------- */

.rmv-band { margin-bottom: var(--space-8); }
.rmv-band--off { margin-bottom: var(--space-3); }
.rmv-band-head {
  display: block;
  width: 100%;
  text-align: start;
  font-family: var(--font-display);
  font-size: var(--text-xl);
  color: var(--ink);
  background: transparent;
  border: 0;
  border-bottom: 2px solid var(--accent-edge);
  padding-block: var(--space-2);
  margin-bottom: var(--space-4);
  min-height: var(--tap-min);
  cursor: pointer;
}
.rmv-band-head:hover { border-bottom-color: var(--accent); }
.rmv-band-head.rmv-band-toggle--off { border-bottom-color: var(--rule); }

.rmv-themes { display: grid; grid-template-columns: 1fr; gap: var(--space-6); }
@media (min-width: 480px) { .rmv-themes { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .rmv-themes { grid-template-columns: repeat(3, 1fr); } }

.rm-lane-label {
  font-family: var(--font-body);
  font-size: var(--text-xs);
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: var(--rm-a, var(--ink-faint));
  margin: 0 0 var(--space-1);
}
.rmv-theme-desc { font-size: var(--text-xs); color: var(--ink-faint); margin: 0 0 var(--space-2); }
.rmv-cards { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-2); }

.rm-card {
  cursor: pointer;
  padding: var(--space-3);
  background: var(--paper-raised);
  border: 1px solid var(--rule);
  border-inline-start: 3px solid var(--rm-a, var(--rule-strong));
  border-radius: var(--radius-sm);
  position: relative;
}
.rm-card:hover { border-color: var(--rm-a, var(--rule-strong)); }
.rm-card h3 { font-family: var(--font-body); font-size: var(--text-sm); margin: 0; }
.rm-card-sum { font-size: var(--text-xs); color: var(--ink-muted); margin: var(--space-1) 0 0; }
.rm-card--project { border-inline-start-width: 5px; }
.rm-card--project h3 { font-weight: 700; }
.rm-card--child { margin-inline-start: var(--space-4); }
/* A continuation strip: this item runs through here, it does not restart. */
.rm-card--cont { opacity: 0.6; border-style: dashed; padding-block: var(--space-2); }
.rm-card--previously, .rm-card--recently { border-inline-start-color: var(--ok); }
.rm-card--parked { border-inline-start-style: dashed; }

.rmv-project-tag, .rmv-part-of {
  font-size: var(--text-xs);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--ink-faint);
  margin: 0 0 var(--space-1);
}
.rm-state {
  font-size: var(--text-xs);
  color: var(--accent);
  margin: 0 0 var(--space-1);
  font-weight: 600;
}
.rm-card-progress {
  margin-top: var(--space-2);
  height: 3px;
  background: var(--paper-sunken);
  border-radius: 999px;
  overflow: hidden;
}
.rm-card-progress > span { display: block; height: 100%; background: var(--rm-a, var(--accent)); }
.rmv-prog-0 > span { width: 0; }
.rmv-prog-25 > span { width: 25%; }
.rmv-prog-50 > span { width: 50%; }
.rmv-prog-75 > span { width: 75%; }
.rmv-prog-90 > span { width: 90%; }
.rmv-prog-100 > span { width: 100%; background: var(--ok); }
.rm-card .rmv-theme-dot { position: absolute; inset-block-start: var(--space-3); inset-inline-end: var(--space-3); }

/* --- Drawer ---------------------------------------------------------- */

.rmd-scrim {
  position: fixed;
  inset: 0;
  background: oklch(20% 0.02 75 / 0.45);
  z-index: 40;
}
.rmd {
  position: fixed;
  z-index: 50;
  inset-block-end: 0;
  inset-inline-end: 0;
  inset-inline-start: 0;
  background: var(--paper);
  box-shadow: var(--shadow-sheet);
  display: flex;
  flex-direction: column;
}
/* Mobile-first: on a phone the drawer is a BOTTOM SHEET, because a side
 * panel at 390px is the whole screen anyway and a sheet is the expected
 * gesture. From 480 up it becomes the side panel. Written this way round
 * so the small screen is the base rather than the exception. */
.rmd {
  inset-block-start: auto;
  inline-size: 100%;
  max-block-size: 88dvh;
  border-radius: var(--radius-lg) var(--radius-lg) 0 0;
  border-inline-start: 0;
  border-block-start: 1px solid var(--rule);
}
@media (min-width: 480px) {
  .rmd {
    inset-block-start: 0;
    inline-size: min(34rem, 100%);
    max-block-size: 100dvh;
    border-radius: 0;
    border-inline-start: 1px solid var(--rule);
    border-block-start: 0;
  }
}
/* A short landscape viewport keeps the sheet, whatever its width: a
 * full-height side panel there is a letterbox. */
@media (max-height: 600px) {
  .rmd { inset-block-start: auto; max-block-size: 92dvh; }
}
.rmd-bar {
  display: flex;
  justify-content: flex-end;
  padding: var(--space-3);
  padding-top: max(var(--space-3), env(safe-area-inset-top));
  border-bottom: 1px solid var(--rule);
}
.rmd-body {
  overflow-y: auto;
  padding: var(--space-4);
  padding-bottom: max(var(--space-8), env(safe-area-inset-bottom));
}
body.rmd-open { overflow: hidden; }

.rmd-head .eyebrow {
  font-size: var(--text-xs);
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: var(--ink-faint);
}
.rmd-head h2 { font-size: var(--text-2xl); margin: var(--space-1) 0 var(--space-2); }
.rmd-summary { color: var(--ink-muted); }
.rmd-section { margin-bottom: var(--space-6); }
.rmd-section h3 {
  font-family: var(--font-body);
  font-size: var(--text-xs);
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: var(--ink-faint);
  margin: 0 0 var(--space-2);
}
.rmd-note { font-size: var(--text-sm); color: var(--ink-muted); margin: 0 0 var(--space-2); }
.rmd-rows { margin: 0; display: grid; gap: var(--space-1); }
.rmd-row { display: grid; grid-template-columns: 9rem 1fr; gap: var(--space-3); font-size: var(--text-sm); }
.rmd-row dt { color: var(--ink-faint); }
.rmd-row dd { margin: 0; }

.rmd-progress { display: flex; align-items: center; gap: var(--space-2); }
.rmd-progress__track { flex: 1; height: 6px; background: var(--paper-sunken); border-radius: 999px; overflow: hidden; }
.rmd-progress__fill { height: 100%; width: var(--pct, 0%); background: var(--accent); }

.rmv-step-list { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-1); }
.rmv-step {
  display: flex; align-items: center; gap: var(--space-2);
  min-height: var(--tap-min);
  padding: var(--space-1) var(--space-2);
  border: 1px solid var(--rule);
  border-radius: var(--radius-sm);
  font-size: var(--text-sm);
  cursor: pointer;
}
.rmv-step:hover { border-color: var(--accent-edge); }
.rmv-step-mark {
  inline-size: 0.9rem; block-size: 0.9rem; flex: none;
  border: 1.5px solid var(--rule-strong);
  border-radius: 3px;
}
.rmv-step--done .rmv-step-mark { background: var(--ok); border-color: var(--ok); }
.rmv-step--done .rmv-step-title { color: var(--ink-muted); text-decoration: line-through; }
.rmv-steps-head { font-size: var(--text-xs); color: var(--ink-faint); margin: 0 0 var(--space-2); }
.rmd-actions { display: flex; gap: var(--space-2); margin-top: var(--space-6); }

.btn--quiet.is-on { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); }

/* --- Trades roll-up -------------------------------------------------- */

/* A count board, not a chart. The numbers are the content, so they sit
 * on the mono ladder and everything else gets out of their way. */
.rmv-sum {
  display: grid;
  gap: var(--space-4);
  grid-template-columns: 1fr;
}
@media (min-width: 480px) { .rmv-sum { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .rmv-sum { grid-template-columns: repeat(3, 1fr); } }

.rmv-sum-trade {
  padding: var(--space-4);
  background: var(--paper-raised);
  border: 1px solid var(--rule);
  border-radius: var(--radius);
}

.rmv-sum-trade-name {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-3);
  margin: 0 0 var(--space-3);
  font-size: var(--text-base);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-muted);
}
.rmv-sum-trade-count { font-size: var(--text-sm); color: var(--ink-faint); }

.rmv-sum-themes,
.rmv-sum-items { list-style: none; margin: 0; padding: 0; }
.rmv-sum-themes { display: grid; gap: var(--space-2); }

/* The intent's colour arrives as a leading bar rather than a tinted
 * pill, so the lane coding matches the timeline without restating it. */
.rmv-sum-theme {
  padding: var(--space-2) var(--space-3);
  background: var(--rm-s, var(--paper-sunken));
  border-inline-start: 3px solid var(--rm-a, var(--rule));
  border-radius: var(--radius-sm);
}

.rmv-sum-theme-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-3);
  min-height: var(--tap-min-floor);
}
.rmv-sum-theme-name { font-weight: 600; }
.rmv-sum-count { font-size: var(--text-sm); color: var(--ink-muted); }

.rmv-sum-items { display: grid; gap: var(--space-1); margin-top: var(--space-2); }

.rmv-sum-item {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  min-height: var(--tap-min);
  padding: var(--space-2) var(--space-3);
  background: var(--paper);
  border: 1px solid var(--rule);
  border-inline-start: 3px solid var(--rule);
  border-radius: var(--radius-sm);
  font-size: var(--text-sm);
  cursor: pointer;
}
.rmv-sum-item:hover { border-color: var(--accent-edge); }
.rmv-sum-item:focus-visible { box-shadow: var(--focus-ring); outline: none; }
.rmv-sum-item-title { flex: 1 1 auto; min-width: 0; }
.rmv-sum-steps { flex: 0 0 auto; font-size: var(--text-xs); color: var(--ink-faint); }

/* The band is the timing this roll-up would otherwise lose. Kept quiet:
 * it is context for the count, not a second axis. */
.rmv-sum-band {
  flex: 0 0 auto;
  font-size: var(--text-xs);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-faint);
}