/* The 90-day roadmap as three steps: one screen a month. Structure only: each world sets the
   --rm-* colours and adds its own flourishes (.rm-rail is an empty slot a world may draw in).

   Stacked (the default): the title and the three months follow each other down the page, everything lit. Each
   month is its own four-week chart; under 760px a month becomes a list, its tasks in week order with their weeks
   spelled out.
   Staged (860x460 and up with motion allowed, the query ROADMAP_STAGED in roadmap.js): the section is tall and its
   stage is pinned. The title and the step marker stay put; the three months lie over each other as one calendar seen
   through a four-week window, and stageRoadmap() slides it. The names at the left do not move.

   Layout that cannot crunch or overlap:
   - a month is a grid: the names at the left, four week columns at the right; a task spans its weeks on its own line;
   - rows grow to fit their tallest label, and when staged the three months share their rows (subgrid), so the names
     stay level while the weeks slide;
   - what repeats sits on the rule under its group: a label above the rule, a point on it for each week it happens. */
.rm {
  --who-w: clamp(150px, 13.5vw, 250px);
  --rm-small: clamp(11.5px, 0.98vw, 16.5px); --rm-task: clamp(11.5px, 1.04vw, 18px);
  /* a line holds a two-line label with room to spare; what repeats gets its label, the rule's points, and air above */
  --lane-h: max(clamp(34px, 6.6vh, 80px), calc(var(--rm-task) * 2.32 + 15px)); --lane-gap: clamp(4px, 0.9vh, 8px); --pad: clamp(3px, 1.1vh, 14px);
  --rep-h: calc(var(--rm-small) * 1.2 + clamp(15px, 2.6vh, 22px));
  color: var(--rm-ink);
}
.rm-top, .rm-screen { width: min(94vw, 1640px); margin: 0 auto; }
.rm-top { display: flex; align-items: center; justify-content: space-between; gap: 12px 28px; }
.rm-steps { display: none; list-style: none; margin: 0; padding: 0; }
.rm-screen + .rm-screen { margin-top: clamp(56px, 11vh, 120px); }
.rm-cal { margin-top: clamp(30px, 6vh, 64px); }

/* ---- a month ---- */
.rm-m { display: grid; grid-template-columns: var(--who-w) minmax(0, 1fr); grid-template-rows: auto auto repeat(4, auto) auto; }
.rm-m + .rm-m { margin-top: clamp(48px, 9vh, 96px); }
.rm-m > h3 { grid-column: 1 / -1; grid-row: 1; margin-bottom: clamp(4px, 1.2vh, 14px); font-size: clamp(20px, min(2.2vw, 4.4vh), 44px); font-weight: 500; line-height: 1.15; letter-spacing: -0.02em; color: var(--rm-ink); }
.rm-key { grid-column: 2; grid-row: 1; justify-self: end; align-self: center; display: inline-flex; align-items: center; gap: 7px; font-size: var(--rm-small); color: var(--rm-muted); }
.rm-star { flex: none; line-height: 1; color: var(--rm-key-bg); }

.rm-who { grid-column: 1; grid-row: calc(var(--r) + 2); padding: var(--pad) 14px var(--pad) 0; border-top: 1px solid var(--rm-rule); }
.rm-who.last, .rm-lane.last { border-bottom: 1px solid var(--rm-rule); }
.rm-name { font-size: clamp(14px, 1.3vw, 23px); font-weight: 600; line-height: 1.2; letter-spacing: -0.01em; color: var(--rm-ink); }
.rm-note { margin-top: clamp(2px, 0.7vh, 7px); font-size: var(--rm-small); line-height: 1.25; color: var(--rm-muted); }

/* the four-week window */
.rm-view { grid-column: 2; grid-row: 2 / 7; position: relative; display: grid; grid-template-rows: subgrid; overflow-x: clip; }
.rm-head { grid-row: 1; padding-bottom: clamp(3px, 0.9vh, 9px); }
.rm-weeks { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); text-align: center; font-size: var(--rm-small); font-weight: 600; line-height: 1.25; color: var(--rm-muted); }
.rm-rail { height: clamp(8px, 1.6vh, 14px); margin-top: clamp(4px, 0.9vh, 8px); }
.rm-lane {
  grid-row: calc(var(--r) + 1); position: relative; display: flex; flex-direction: column; padding: var(--pad) 0;
  border-top: 1px solid var(--rm-rule); border-right: 1px solid var(--rm-hair);
  background: repeating-linear-gradient(90deg, var(--rm-hair) 0 1px, transparent 1px 25%);
}
.rm-lane.rep { padding-bottom: 0; }
.rm-bars { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); grid-template-rows: repeat(var(--lanes), minmax(var(--lane-h), auto)); row-gap: var(--lane-gap); }
.rm-task {
  grid-column: var(--from) / span var(--span); grid-row: var(--row);
  position: relative; z-index: 2; box-sizing: border-box; min-width: 0; margin: 0 5px; padding: 6px 12px; border-radius: 8px;
  display: flex; align-items: center; gap: 8px;
  background: var(--rm-task-bg); border: 1.5px solid var(--rm-task-line); color: var(--rm-task-ink);
  font-size: var(--rm-task); font-weight: 600; line-height: 1.16; letter-spacing: -0.005em; overflow-wrap: break-word;
}
.rm-task > span:last-child { min-width: 0; }
.rm-task.key { background: var(--rm-key-bg); border-color: var(--rm-key-line); color: var(--rm-key-ink); }
.rm-task.key .rm-star { color: inherit; }

/* what repeats: the label sits just above the rule under the group, the points on the rule */
.rm-rep { position: relative; height: var(--rep-h); margin-top: auto; }
.rm-rep-label { position: absolute; left: 8px; right: 8px; bottom: 8px; font-size: var(--rm-small); line-height: 1.2; color: var(--rm-muted); }
.rm-dots { position: absolute; z-index: 1; left: 0; right: 0; bottom: -5.5px; height: 10px; }
.rm-dots i { position: absolute; top: 0; left: calc((var(--w) - 0.5) * 25%); width: 10px; height: 10px; margin-left: -5px; border-radius: 50%; box-sizing: border-box; background: var(--rm-ring); border: 1.5px solid var(--rm-ring); }
.rm-now { display: none; }

.rm-done { grid-column: 1 / -1; grid-row: 7; justify-self: end; margin-top: clamp(9px, 2vh, 22px); font-size: clamp(12.5px, 1.16vw, 20px); font-weight: 600; line-height: 1.3; text-align: right; color: var(--rm-gate-text); }

/* ---- staged: one pinned stage, the months as one calendar that slides ---- */
@media (min-width: 860px) and (min-height: 460px) and (prefers-reduced-motion: no-preference) {
  .rm { height: calc((var(--screens) + 1) * 100vh); }
  .rm-stage { position: sticky; top: 0; height: 100vh; box-sizing: border-box; padding: calc(var(--nav-h, 72px) + 0.8vh) 0 2.6vh; display: grid; grid-template-rows: auto minmax(0, 1fr); overflow: clip; }
  .rm-steps { display: flex; align-items: center; gap: clamp(14px, 2.2vw, 34px); }
  .rm-step { position: relative; padding: 6px 0 6px 17px; font-size: var(--rm-small); font-weight: 600; color: var(--rm-muted); opacity: 0.62; transition: opacity 0.3s, color 0.3s; }
  .rm-step::before { content: ''; position: absolute; left: 0; top: 50%; width: 9px; height: 9px; margin-top: -4.5px; border-radius: 50%; box-sizing: border-box; border: 1.5px solid currentColor; transition: background-color 0.3s; }
  .rm-step.past { opacity: 0.86; }
  .rm-step.past::before { background: currentColor; }
  .rm-step.on { opacity: 1; color: var(--rm-ink); }
  .rm-step.on::before { background: var(--rm-key-bg); border-color: var(--rm-key-bg); }
  .rm-step:hover { opacity: 1; }

  .rm-screen + .rm-screen { margin-top: 0; }
  .rm-screen { grid-area: 2 / 1; align-self: center; }
  .rm-screen.rm-cal { align-self: start; margin-top: clamp(2px, 3.2vh, 52px); }        /* the calendar hangs from the title; spare room falls below it */
  .rm-cal { display: grid; grid-template-columns: var(--who-w) minmax(0, 1fr); grid-template-rows: auto auto repeat(4, auto) auto; }
  .rm-m, .rm-m + .rm-m { grid-area: 1 / 1 / -1 / -1; grid-template-columns: subgrid; grid-template-rows: subgrid; margin-top: 0; }
  .rm-m > h3, .rm-done { opacity: var(--near, 1); }
  .rm-m:not(.cur) :is(.rm-who, .rm-key, .rm-rep-label, .rm-rail, .rm-now) { visibility: hidden; }
  .rm-m.away :is(.rm-slide, h3, .rm-done) { visibility: hidden; }
  .rm-slide { transform: translateX(calc(var(--off, 0) * 100%)); }
  .rm-bars { position: relative; z-index: 2; }            /* above the "now" line, which each sliding layer would otherwise sit under */
  .rm-cal.panning .rm-slide { will-change: transform; }

  /* "now": a line that crosses the month's four weeks as stageRoadmap() sweeps it; it runs behind the task bars */
  .rm-now { display: block; position: absolute; z-index: 1; grid-row: 2 / -1; grid-column: 1; top: 0; bottom: 0; left: calc(var(--now, 0) * 100%); width: 2px; margin-left: -1px; background: var(--rm-now, var(--rm-ink)); opacity: 0; transition: opacity 0.35s; pointer-events: none; }
  .rm-m.sweeping .rm-now { opacity: 1; }

  /* things wait for the sweep: a task is an outline until "now" reaches its first week, a point a ring until its week */
  .rm.staged .rm-task { transition: background-color 0.14s, border-color 0.14s, color 0.14s; }      /* quick: light words on a light bar are never left hanging */
  .rm.staged .rm-task.on { animation: rm-land 0.5s cubic-bezier(.2, .8, .2, 1); }
  .rm.staged .rm-task:not(.on) { background: transparent; border-color: var(--rm-wait-line); color: var(--rm-wait-ink); }
  .rm.staged .rm-task.key:not(.on) .rm-star { color: var(--rm-key-bg); }
  .rm.staged .rm-dots i { transition: background-color 0.35s, border-color 0.35s, transform 0.35s cubic-bezier(.2, .8, .2, 1); }
  .rm.staged .rm-dots i:not(.on) { background: var(--rm-ground); border-color: var(--rm-wait-line); transform: scale(0.82); }
  .rm.staged .rm-done { opacity: calc(var(--near, 1) * var(--lit, 0.46)); color: var(--rm-muted); transition: color 0.5s, opacity 0.3s; }
  .rm.staged .rm-m.done .rm-done { --lit: 1; color: var(--rm-gate-text); }
}

/* staged in a short window: the month's heading moves up beside the title (the step marker makes way for it), the
   key to the star moves into the corner above the names, and everything is set a little tighter */
@media (min-width: 860px) and (min-height: 460px) and (max-height: 560px) and (prefers-reduced-motion: no-preference) {
  .rm { --lane-h: calc(var(--rm-task) * 2.32 + 15px); --lane-gap: 3px; --pad: 2px; --who-w: clamp(132px, 13.5vw, 250px); }
  .rm-task { margin: 0 3px; padding: 6px 9px; gap: 6px; }
  .rm-done { margin-top: 11px; }                          /* clear of the points on the rule above it */
  .rm-stage { padding: calc(var(--nav-h, 72px) + 2px) 0 6px; }
  .rm-screen.rm-cal { margin-top: 1px; }
  .rm-head { padding-bottom: 3px; }
  .rm-steps { display: none; }
  /* out of the calendar and into the stage's first row, the title's: an absolutely placed box takes its grid area from the grid that contains it */
  .rm-m > h3 { position: absolute; grid-row: 1; grid-column: 1; top: 0; left: 0; right: 0; width: min(94vw, 1640px); margin: 0 auto; text-align: right; pointer-events: none; font-size: clamp(18px, 4.2vh, 23px); line-height: clamp(30px, 6.6vh, 36px); }
  .rm-key { grid-column: 1; grid-row: 2; justify-self: start; align-self: end; padding-bottom: 7px; }
}

@keyframes rm-land { from { transform: scale(0.972); } to { transform: none; } }

/* ---- narrow screens: a month becomes a list, one block per group, tasks in week order with their weeks spelled out ---- */
@media (max-width: 759px) {
  .rm-top, .rm-screen { width: 92vw; }
  .rm-m { grid-template-columns: minmax(0, 1fr); grid-template-rows: none; }
  .rm-m > h3, .rm-key, .rm-done { grid-column: 1; grid-row: auto; justify-self: start; text-align: left; }
  .rm-key { margin-bottom: 6px; }
  .rm-view { display: contents; }
  .rm-head { display: none; }
  .rm-who { grid-row: calc(var(--r) * 2 + 1); padding: 18px 0 8px; border-bottom: 0 !important; }
  .rm-lane { grid-column: 1; grid-row: calc(var(--r) * 2 + 2); padding: 0 0 16px; border: 0 !important; background: none; }
  .rm-done { grid-row: 12; }
  .rm-bars { display: flex; flex-wrap: wrap; gap: 8px; }
  .rm-task { margin: 0; padding: 8px 12px; flex-wrap: wrap; row-gap: 3px; font-size: 13px; }
  .rm-task::before { content: attr(data-wk); flex-basis: 100%; font-size: 11px; font-weight: 500; letter-spacing: 0.04em; opacity: 0.74; }
  .rm-rep { height: auto; margin-top: 10px; display: flex; align-items: center; gap: 9px; }
  .rm-rep::before { content: ''; flex: none; width: 10px; height: 10px; border-radius: 50%; background: var(--rm-ring); }
  .rm-rep-label { position: static; font-size: 12.5px; }
  .rm-dots { display: none; }
}