/* ============================================================
   ROADMAP — planning overlay behind the toolbar's "Roadmap" button.
   Desktop viewer only (it lives inside #viewer, which the mobile
   prototype hides wholesale — same containment rule as the rec box).

   Everything the user types is contenteditable and autosaves to
   localStorage; Export copies the whole thing back out as Markdown.
   See roadmap.js for the state model.
   ============================================================ */

#roadmap {
  position: absolute;
  inset: 0;
  z-index: 90;                    /* over #stage, under nothing else in the viewer */
  display: flex;
  flex-direction: column;
  background: var(--vbg);
  font-family: 'DM Sans', system-ui, sans-serif;
  color: var(--vtext);
}
#roadmap[hidden] { display: none; }

/* The overlay sits inside #stage, so the tray and the rec strip below it stay
   on screen unless we hide them. Set by toggleRoadmap(). */
#viewer.rm-open #thumb-tray,
#viewer.rm-open #recbox { display: none; }

/* ── Header ─────────────────────────────────────────────── */
.rm-hd {
  flex-shrink: 0;
  display: flex; align-items: center; gap: 12px;
  padding: 12px 16px;
  border-bottom: 1px solid var(--vborder);
  background: var(--vsurface);
}
.rm-hd-title { font-size: 14px; font-weight: 700; letter-spacing: -0.01em; }
.rm-hd-sub {
  font-family: 'SUSE Mono', ui-monospace, monospace;
  font-size: 10.5px; color: var(--vdim);
}
.rm-hd-spacer { flex: 1; }

.rm-btn {
  background: none;
  border: 1px solid var(--vborder);
  color: var(--vdim);
  font-family: inherit;
  font-size: 11px;
  padding: 5px 10px;
  border-radius: 6px;
  cursor: pointer;
  white-space: nowrap;
  transition: color .1s, border-color .1s, background .1s;
}
.rm-btn:hover { color: var(--vtext); border-color: #404040; }
.rm-btn--go { color: #e8a83c; border-color: rgba(232,168,60,0.4); }
.rm-btn--go:hover { color: #f5c069; border-color: #e8a83c; background: rgba(232,168,60,0.08); }
.rm-btn--x { font-size: 15px; line-height: 1; padding: 4px 9px; }

/* Saved / copied flash on the header buttons */
.rm-btn.is-ok { color: #6fcf8f; border-color: rgba(111,207,143,0.5); }

/* ── Body: calendar + timeline left · goals + notes right ─
   The right column is the whole of what gets WRITTEN during a meeting, so it
   takes the larger share; the left is the plan you're reading off. */
.rm-grid {
  flex: 1;
  min-height: 0;                  /* lets the children scroll instead of the page */
  display: grid;
  grid-template-columns: minmax(330px, 0.92fr) minmax(400px, 1.08fr);
  gap: 12px;
  padding: 12px 16px 16px;
}
.rm-col { min-height: 0; display: flex; flex-direction: column; gap: 12px; }

.rm-card {
  min-height: 0;
  display: flex; flex-direction: column;
  background: var(--vsurface);
  border: 1px solid var(--vborder);
  border-radius: 10px;
  overflow: hidden;
}
.rm-card-hd {
  flex-shrink: 0;
  display: flex; align-items: baseline; gap: 8px;
  padding: 10px 13px;
  border-bottom: 1px solid var(--vborder);
}
.rm-card-title { font-size: 12px; font-weight: 700; }
.rm-card-sub {
  font-family: 'SUSE Mono', ui-monospace, monospace;
  font-size: 9.5px; color: var(--vdim);
}
.rm-card-body { flex: 1; min-height: 0; overflow-y: auto; padding: 8px 13px 13px; }

/* ── Block calendar (top of the left column) ─────────────
   ONE month on screen, in a horizontal filmstrip paged by the header arrows,
   the pips, a drag, or a trackpad swipe. Each month is an 8-column grid: a
   W-number gutter, then Fri→Thu. That column order is not decorative — it
   makes one ROW exactly one roadmap week, which is the whole reason the
   calendar and the linear list can highlight each other. See roadmap.js.
   ──────────────────────────────────────────────────────── */
.rm-card--cal { flex: 0 0 auto; }        /* sized by its month; timeline takes the rest */
.rm-cal-body { overflow: hidden; padding: 10px 13px 11px; }

/* Header: ‹ Sep 2026 › then the pips, pushed to the right. */
.rm-cal-nav {
  flex-shrink: 0;
  width: 18px; height: 18px;
  margin-left: auto;
  padding: 0;
  border: 1px solid var(--vborder);
  border-radius: 5px;
  background: none;
  color: var(--vdim);
  font: inherit; font-size: 12px; line-height: 1;
  cursor: pointer;
  align-self: center;
}
.rm-cal-nav + .rm-cal-name + .rm-cal-nav { margin-left: 0; }
.rm-cal-nav:hover:not(:disabled) { color: var(--vtext); border-color: #404040; }
.rm-cal-nav:disabled { opacity: 0.28; cursor: default; }

.rm-cal-name {
  flex-shrink: 0;
  min-width: 62px;
  text-align: center;
  align-self: center;
  font-family: 'SUSE Mono', ui-monospace, monospace;
  font-size: 10px; color: var(--vtext);
  user-select: none;
}

.rm-cal-pips { display: flex; gap: 4px; align-self: center; margin-left: 4px; }
.rm-pip {
  width: 5px; height: 5px; padding: 0;
  border: none; border-radius: 50%;
  background: var(--vborder);
  cursor: pointer;
}
.rm-pip:hover { background: #4a4a4a; }
.rm-pip.is-on { background: var(--vaccent); }

/* The filmstrip. Translated in px off the viewport width by rmCalSlide. */
.rm-cal-view {
  overflow: hidden;
  cursor: grab;
  touch-action: pan-y;            /* let a vertical scroll through; we take X */
}
.rm-cal-view.is-grabbing { cursor: grabbing; }
.rm-cal-track {
  display: flex;
  will-change: transform;
  transition: transform .28s cubic-bezier(.4, 0, .2, 1);
}
/* ⚠️ TWO months on screen, so a slide is HALF the viewport — the strip still
   steps by one, which is what makes consecutive pages overlap. Keep this
   fraction and RM_CAL_SPAN in roadmap.js in step; the JS translates by
   clientWidth / SPAN and nothing here tells it otherwise. */
.rm-cal-m { flex: 0 0 50%; min-width: 0; padding: 0 5px; }

/* Each block names itself. With one month visible the card header was enough;
   with two it can only name the range, so the block carries its own label. */
.rm-cal-mname {
  font-family: 'SUSE Mono', ui-monospace, monospace;
  font-size: 9px; letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--vdim);
  text-align: center;
  margin-bottom: 5px;
}

/* Capped and centred: one month across a half-width column would otherwise
   give 60px-wide cells 17px tall, which reads as a table, not a calendar. */
.rm-cal-grid {
  display: grid;
  grid-template-columns: 20px repeat(7, minmax(0, 1fr));
  gap: 2px;
  max-width: 320px;
  margin: 0 auto;
  font-family: 'SUSE Mono', ui-monospace, monospace;
}
.rm-cal-cnr { display: block; }
.rm-cal-dow {
  text-align: center;
  font-size: 8.5px; line-height: 15px;
  color: var(--vdim);
  user-select: none;
}

/* Day cells and the week-number gutter are both buttons, and both HOVER to the
   same week — but they click to different things: a day opens its event
   popover, the gutter jumps to the week in the timeline. See rmInit. */
.rm-cal-d, .rm-cal-wk {
  position: relative;
  min-width: 0;
  height: 26px;
  padding: 0;
  border: 1px solid transparent;
  border-radius: 4px;
  background: rgba(255,255,255,0.035);
  color: var(--vtext);
  font: inherit;
  font-size: 10px;
  line-height: 24px;
  text-align: center;
  cursor: pointer;
}
.rm-cal-wk {
  background: none;
  color: var(--vdim);
  font-size: 8.5px;
  letter-spacing: -0.02em;
}
.rm-cal-d.is-out { color: var(--vdim); opacity: 0.32; }

/* Status tints the day the same way it tints the spine node in the list. */
.rm-cal-d[data-st="doing"] { background: rgba(232,168,60,0.20); color: #f0c079; }
.rm-cal-d[data-st="done"]  { background: rgba(111,207,143,0.16); color: #8fd9a8; }
.rm-cal-d[data-st="risk"]  { background: rgba(224,100,92,0.18); color: #ec8a83; }

/* A week with something written on it gets a marker under the date — the
   quick-read signal that this block is what the whole calendar is for. */
.rm-cal-d[data-mark="item"]::after,
.rm-cal-d[data-mark="ms"]::after {
  content: '';
  position: absolute;
  left: 50%; bottom: 2.5px;
  width: 3px; height: 3px;
  margin-left: -1.5px;
  border-radius: 50%;
  background: var(--vdim);
}
.rm-cal-d[data-mark="ms"]::after { background: #e8a83c; width: 4px; height: 4px; margin-left: -2px; }
.rm-cal-wk[data-mark="ms"] { color: #e8a83c; }

/* A day with events gets a corner flag — ::before, because ::after is already
   the WEEK's marker dot and a day can legitimately carry both. Top-right vs
   bottom-centre keeps the two readable side by side at this size. */
.rm-cal-d[data-ev="1"]::before {
  content: '';
  position: absolute;
  top: 3px; right: 3px;
  width: 4px; height: 4px;
  border-radius: 1px;
  background: var(--vaccent);
}
.rm-cal-d[data-ev="1"] { font-weight: 700; }

/* The subject bar — the week's short label, spanning its seven days. This is
   the whole point of the calendar: a couple of words you can read at a glance
   where a full line of detail would never fit.
   ⚠️ Always in the DOM, hidden by :empty, so typing a subject reveals it
   without a re-render. See rmCalHTML / rmCalMark. */
.rm-cal-tag {
  grid-column: 2 / -1;
  margin: -1px 0 2px;
  padding: 2px 5px;
  border-radius: 3px;
  background: rgba(255,255,255,0.06);
  color: var(--vdim);
  font-size: 8.5px;
  line-height: 1.35;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  cursor: pointer;
  user-select: none;
}
.rm-cal-tag:empty { display: none; }
.rm-cal-tag[data-track="dev"]      { background: rgba(143,184,224,0.16); color: #a9c9e8; }
.rm-cal-tag[data-track="design"]   { background: rgba(199,154,224,0.16); color: #d5b3ea; }
.rm-cal-tag[data-track="admin"]    { background: rgba(134,191,176,0.16); color: #9fd0c2; }
.rm-cal-tag[data-track="research"] { background: rgba(232,168,60,0.16);  color: #f0c079; }
.rm-cal-tag[data-mark="ms"] { font-weight: 700; box-shadow: inset 0 0 0 1px rgba(232,168,60,0.5); }

/* Today, and the hovered week — both drawn as a ring so a status tint under
   them still reads. */
.rm-cal-d.is-today { border-color: var(--vaccent); font-weight: 700; }
.rm-cal-d.is-hi, .rm-cal-wk.is-hi {
  border-color: #6a6a6a;
  background: rgba(255,255,255,0.13);
  color: var(--vtext);
}
.rm-cal-tag.is-hi { box-shadow: inset 0 0 0 1px #6a6a6a; }
.rm-cal-d.is-hi.is-out { opacity: 0.7; }

/* Readout under the calendar — the hover answer. Two lines, clamped and a
   fixed height, so a long week item can't make the card breathe on hover. */
.rm-cal-read {
  height: 26px;
  margin-top: 9px;
  padding-top: 8px;
  border-top: 1px solid var(--vborder);
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  font-family: 'SUSE Mono', ui-monospace, monospace;
  font-size: 9.5px; line-height: 1.42; color: var(--vdim);
}
.rm-cal-read em { font-style: italic; }
.rm-read-w { color: var(--vaccent); font-weight: 500; }
.rm-read-sep { opacity: 0.5; }

/* ── Timeline (left) ────────────────────────────────────── */
.rm-week {
  position: relative;
  display: grid;
  grid-template-columns: 74px 1fr auto;
  align-items: start;
  gap: 9px;
  padding: 7px 0 7px 14px;
}
/* The spine + node. Drawn on the row so it can't drift out of sync
   with the list the way a separate absolutely-positioned rail would. */
.rm-week::before {
  content: '';
  position: absolute;
  left: 4px; top: 0; bottom: 0;
  width: 1px;
  background: var(--vborder);
}
.rm-week:first-child::before { top: 15px; }
.rm-week:last-child::before  { bottom: calc(100% - 15px); }
.rm-week::after {
  content: '';
  position: absolute;
  left: 1px; top: 12px;
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--vbg);
  border: 1.5px solid var(--vdim);
}

.rm-week-lbl {
  font-family: 'SUSE Mono', ui-monospace, monospace;
  font-size: 10px;
  line-height: 1.45;
  color: var(--vdim);
  padding-top: 3px;
  user-select: none;
}
.rm-week-no { color: var(--vtext); font-weight: 500; }

/* A month's first week gets a heading rule above it */
.rm-month {
  display: flex; align-items: center; gap: 8px;
  margin: 14px 0 2px; padding-left: 14px;
  font-family: 'SUSE Mono', ui-monospace, monospace;
  font-size: 10px; letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--vaccent);
}
.rm-month:first-child { margin-top: 2px; }
.rm-month::after { content: ''; flex: 1; height: 1px; background: var(--vborder); }

/* Status — the node and the text both take the colour */
.rm-week[data-st="doing"]::after { border-color: #e8a83c; background: #e8a83c; }
.rm-week[data-st="done"]::after  { border-color: #6fcf8f; background: #6fcf8f; }
.rm-week[data-st="risk"]::after  { border-color: #e0645c; background: #e0645c; }
.rm-week[data-st="done"] .rm-week-text { color: var(--vdim); text-decoration: line-through; }

/* The middle column is a stack: subject over detail. */
.rm-week-main { min-width: 0; }

/* The subject — the short label the calendar prints. Faint until the row is
   hovered or it has something in it, so 19 empty rows don't read as 19
   unfilled form fields. */
.rm-week-tag {
  padding: 1px 4px;
  border-radius: 3px;
  outline: none;
  min-height: 15px;
  font-family: 'SUSE Mono', ui-monospace, monospace;
  font-size: 9px;
  line-height: 1.45;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  color: var(--vdim);
}
.rm-week-tag[data-track="dev"]      { color: #8fb8e0; }
.rm-week-tag[data-track="design"]   { color: #c79ae0; }
.rm-week-tag[data-track="admin"]    { color: #86bfb0; }
.rm-week-tag[data-track="research"] { color: #e8a83c; }
.rm-week-tag:empty { opacity: 0; transition: opacity .1s; }
.rm-week:hover .rm-week-tag:empty,
.rm-week-tag:empty:focus { opacity: 1; }
.rm-week-tag:hover { background: rgba(255,255,255,0.03); }
.rm-week-tag:focus { background: rgba(255,255,255,0.06); box-shadow: inset 0 0 0 1px var(--vborder); }

.rm-week-text {
  font-size: 12px;
  line-height: 1.5;
  color: var(--vtext);
  padding: 2px 4px;
  border-radius: 4px;
  outline: none;
  min-height: 20px;
}
.rm-week-text:hover  { background: rgba(255,255,255,0.03); }
.rm-week-text:focus  { background: rgba(255,255,255,0.06); box-shadow: inset 0 0 0 1px var(--vborder); }

/* Empty-state hint — :empty only matches with no child nodes at all,
   which plaintext-only contenteditable preserves. */
[data-ph]:empty::before {
  content: attr(data-ph);
  color: var(--vdim);
  font-style: italic;
  pointer-events: none;
}
/* The subject cell is uppercase mono; its placeholder is a prompt, not a
   value, so it opts out of both. */
.rm-week-tag[data-ph]:empty::before { text-transform: none; letter-spacing: 0; }

.rm-week-side { display: flex; align-items: center; gap: 5px; padding-top: 2px; }

.rm-chip {
  font-family: 'SUSE Mono', ui-monospace, monospace;
  font-size: 8.5px; letter-spacing: 0.04em; text-transform: uppercase;
  padding: 3px 6px;
  border-radius: 999px;
  border: 1px solid var(--vborder);
  background: none;
  color: var(--vdim);
  cursor: pointer;
  white-space: nowrap;
  font-weight: 500;
}
.rm-chip:hover { border-color: #404040; color: var(--vtext); }
/* ⚠️ Four tracks, four hues — keep these in step with RM_TRACKS in roadmap.js.
   Research takes the gold the retired "Both" used to, rather than a green that
   would read as the "done" status tint on the day cells underneath it. */
.rm-chip[data-track="dev"]      { color: #8fb8e0; border-color: rgba(143,184,224,0.35); }
.rm-chip[data-track="design"]   { color: #c79ae0; border-color: rgba(199,154,224,0.35); }
.rm-chip[data-track="admin"]    { color: #86bfb0; border-color: rgba(134,191,176,0.35); }
.rm-chip[data-track="research"] { color: #e8a83c; border-color: rgba(232,168,60,0.35); }

.rm-st { width: 20px; text-align: center; padding: 3px 0; }

/* The other half of the calendar link — a hovered week lights here too, and
   the current week carries a standing accent rail. */
.rm-week.is-hi { background: rgba(255,255,255,0.05); border-radius: 5px; }
.rm-week.is-now::before { background: var(--vaccent); width: 2px; left: 3.5px; }
.rm-week.is-now .rm-week-no { color: var(--vaccent); }

/* ── Goals (right, top) ─────────────────────────────────── */
.rm-term + .rm-term { margin-top: 14px; }
.rm-term-hd {
  display: flex; align-items: baseline; gap: 7px;
  margin-bottom: 5px;
}
.rm-term-name { font-size: 11.5px; font-weight: 700; }
.rm-term-when {
  font-family: 'SUSE Mono', ui-monospace, monospace;
  font-size: 9.5px; color: var(--vdim);
}
.rm-term[data-term="short"]  .rm-term-name { color: #6fcf8f; }
.rm-term[data-term="medium"] .rm-term-name { color: #e8a83c; }
.rm-term[data-term="long"]   .rm-term-name { color: #8fb8e0; }

.rm-goal {
  display: grid;
  grid-template-columns: 12px 1fr 18px;
  align-items: start;
  gap: 7px;
  padding: 3px 0;
}
.rm-goal-dot { color: var(--vdim); font-size: 12px; line-height: 1.55; user-select: none; }
.rm-goal-text {
  font-size: 12px; line-height: 1.55;
  padding: 2px 4px; border-radius: 4px; outline: none; min-height: 20px;
}
.rm-goal-text:hover { background: rgba(255,255,255,0.03); }
.rm-goal-text:focus { background: rgba(255,255,255,0.06); box-shadow: inset 0 0 0 1px var(--vborder); }

.rm-del {
  background: none; border: none; cursor: pointer;
  color: transparent;                 /* revealed on row hover */
  font-size: 13px; line-height: 1.4; padding: 0;
  transition: color .1s;
}
.rm-goal:hover .rm-del { color: var(--vdim); }
.rm-del:hover { color: #e0645c; }

.rm-add {
  margin-top: 5px; margin-left: 19px;
  background: none; border: 1px dashed var(--vborder);
  color: var(--vdim);
  font-family: inherit; font-size: 10.5px;
  padding: 3px 9px; border-radius: 6px; cursor: pointer;
}
.rm-add:hover { color: var(--vtext); border-color: #404040; }

/* ── The day popover ────────────────────────────────────
   Anchored to a day cell but appended to #roadmap, because .rm-cal-body clips
   its overflow to hold the filmstrip and would cut this in half. Positioned
   from JS; everything here is just the look and the size floor.
   ──────────────────────────────────────────────────────── */
.rm-day {
  position: absolute;
  z-index: 20;                    /* over the calendar card, inside the overlay */
  width: 230px;
  background: var(--vsurface);
  border: 1px solid #3a3a3a;
  border-radius: 9px;
  box-shadow: 0 10px 28px rgba(0,0,0,0.55);
  padding: 8px 9px 9px;
}
.rm-day[hidden] { display: none; }
.rm-day-hd {
  display: flex; align-items: center; gap: 6px;
  margin-bottom: 6px;
}
.rm-day-date {
  font-family: 'SUSE Mono', ui-monospace, monospace;
  font-size: 10px; letter-spacing: 0.03em;
  color: var(--vtext);
}
.rm-day-w {
  background: none;
  border: 1px solid var(--vborder);
  border-radius: 999px;
  color: var(--vdim);
  font-family: 'SUSE Mono', ui-monospace, monospace;
  font-size: 8px; letter-spacing: 0.04em;
  padding: 1px 5px;
  cursor: pointer;
}
.rm-day-w:hover { color: var(--vaccent); border-color: var(--vaccent); }
.rm-day-sp { flex: 1; }
.rm-day-x {
  background: none; border: none; padding: 0 2px;
  color: var(--vdim); font-size: 14px; line-height: 1; cursor: pointer;
}
.rm-day-x:hover { color: var(--vtext); }

.rm-day-list { max-height: 190px; overflow-y: auto; }
.rm-ev { display: flex; align-items: flex-start; gap: 5px; }
.rm-ev + .rm-ev { margin-top: 1px; }
.rm-ev-dot { color: var(--vaccent); font-size: 11px; line-height: 1.6; user-select: none; }
.rm-ev-text {
  flex: 1; min-width: 0;
  font-size: 11.5px; line-height: 1.5;
  padding: 1px 3px; border-radius: 3px;
  outline: none;
  word-break: break-word;
}
.rm-ev-text:hover { background: rgba(255,255,255,0.03); }
.rm-ev-text:focus { background: rgba(255,255,255,0.06); box-shadow: inset 0 0 0 1px var(--vborder); }
.rm-day-add { width: 100%; margin-top: 6px; }

/* ── Note session tabs ──────────────────────────────────
   One tab per meeting, in the notes card header. The strip scrolls sideways
   rather than wrapping — a second row would eat the notes area it sits above,
   which is the one thing this card is for.
   ──────────────────────────────────────────────────────── */
.rm-tabs {
  flex-shrink: 0;
  display: flex; align-items: center; gap: 4px;
  padding: 6px 13px 7px;
  border-bottom: 1px solid var(--vborder);
  overflow-x: auto;
  scrollbar-width: none;
}
.rm-tabs::-webkit-scrollbar { display: none; }
.rm-tab {
  flex-shrink: 0;
  display: flex; align-items: center; gap: 4px;
  max-width: 150px;
  padding: 3px 8px;
  border: 1px solid var(--vborder);
  border-radius: 999px;
  color: var(--vdim);
  font-family: 'SUSE Mono', ui-monospace, monospace;
  font-size: 9.5px;
  cursor: pointer;
  white-space: nowrap;
  transition: color .1s, border-color .1s, background .1s;
}
.rm-tab:hover { color: var(--vtext); border-color: #404040; }
.rm-tab.is-on {
  color: var(--vaccent);
  border-color: var(--vaccent);
  background: rgba(255,255,255,0.04);
}
/* The active tab's name is editable in place; the caret needs somewhere to
   sit when the name has been cleared to nothing. */
.rm-tab-name { outline: none; min-width: 14px; overflow: hidden; text-overflow: ellipsis; }
.rm-tab-x { color: var(--vdim); font-size: 12px; line-height: 1; }
.rm-tab-x:hover { color: #e0645c; }
.rm-tab--add { padding: 3px 9px; font-size: 12px; line-height: 1; }

/* ── Goals + meeting notes (the whole right column) ─────
   Notes take roughly two thirds and goals one. Goals are a short standing list
   that gets read; notes are written continuously through a meeting and are the
   thing that actually runs out of room, so the split is weighted to them.
   Both keep a floor so neither can be squeezed to nothing. */
.rm-card--goals { flex: 0 1 34%; min-height: 128px; }
.rm-card--notes { flex: 1 1 66%; min-height: 230px; }
.rm-notes {
  width: 100%; height: 100%;
  background: none; border: none; outline: none; resize: none;
  color: var(--vtext);
  font-family: 'DM Sans', system-ui, sans-serif;
  font-size: 12px; line-height: 1.6;
}
.rm-notes::placeholder { color: var(--vdim); font-style: italic; }

/* ── Scrollbars — match the viewer's understated chrome ─── */
.rm-card-body::-webkit-scrollbar { width: 9px; }
.rm-card-body::-webkit-scrollbar-track { background: none; }
.rm-card-body::-webkit-scrollbar-thumb {
  background: var(--vborder); border-radius: 5px;
  border: 3px solid var(--vsurface);
}
.rm-card-body::-webkit-scrollbar-thumb:hover { background: #383838; }

/* Narrow viewports: stack instead of letting the columns crush.
   ⚠️ The stacked layout SCROLLS THE GRID, it does not divide the height.
   `grid-template-rows: 1fr auto` was the bug here: four cards' worth of
   content does not fit one viewport at this width, so the left column
   overflowed its row and the goals card painted straight over the timeline.
   Rows are auto and .rm-grid takes the scrollbar; each card is capped instead,
   so they sit one after another and stay whole. */
@media (max-width: 1080px) {
  /* ⚠️ display:block, NOT a one-column grid. Every .rm-card carries
     `min-height: 0` so it can shrink inside the two-column flex layout, which
     means a grid row's content contribution here is effectively zero — Chrome
     split the height evenly between the two rows and both columns overflowed
     theirs. Block flow has no height to distribute, so each card is simply as
     tall as it needs and .rm-grid takes the scrollbar. */
  .rm-grid { display: block; overflow-y: auto; }
  .rm-col { display: block; }
  .rm-col + .rm-col,
  .rm-card + .rm-card { margin-top: 12px; }
  /* Caps, not fractions — cards are content-height now, and left alone the
     timeline would run to all 19 weeks and the notes to the whole session. */
  #rm-timeline { max-height: 46vh; }
  #rm-goals { max-height: 30vh; }
  .rm-card--goals, .rm-card--notes { flex: none; min-height: 0; }
  /* height:100% resolves against an auto-height parent as auto, which collapses
     the textarea to its default two rows. */
  .rm-notes { height: 34vh; }
  /* The calendar keeps both months here: the columns have collapsed to one,
     so it has the FULL width to draw them in — more than it had in the
     two-column layout, not less. Nothing to override. */
}