/* ==========================================================================
   Rideplot's pages on the shared kit (/apps/kit/kit.css).

   The idea: the park's own signage, made for one family. Hi-vis is a whole
   board (the next-ride board, the heights band, the close), never a marker;
   ink on it, moss for what can be tapped, on white and overcast grounds.
   Colours are the app's (Docs/design/design-system.md in the app's repo).
   ========================================================================== */

.k-rideplot {
  --k-bg: #FFFFFF;
  --k-bg-2: #ECEEEA;            /* overcast */
  --k-ink: #1B2008;             /* the app's field ink */
  --k-ink-2: #4A5132;
  --k-accent: #577100;          /* moss, the app's tint */
  --k-accent-ink: #FFFFFF;
  --k-card: #FFFFFF;
  --k-line: rgba(27, 32, 8, .13);
  --k-display: "Avenir Next", "Avenir", "Segoe UI", system-ui, -apple-system, sans-serif;

  --rp-vis: #C9E84C;            /* hi-vis: the board */
  --rp-vis-edge: #A3BD3A;
  --rp-ink-2: #39421B;          /* secondary ink on hi-vis */
  --rp-ctl: #B1CC42;            /* Skip and More on the board */
  --rp-char: #262B1C;           /* steel: posts, the icon's track */
  --rp-fill: #E3E7D4;           /* under the usual-wait curve */
  --rp-rule: #828477;
  --rp-bar: #CDD4B2;
  --rp-night: #14180A;
}
.k-rideplot main :where(h1, h2, h3) { font-weight: 600; letter-spacing: -0.012em; }
.k-rideplot .k-h1 { letter-spacing: -0.025em; }
.rp-hero .k-h1 { font-size: clamp(40px, min(5.4vw, 8.4svh), 92px); }
.k-rideplot .k-btn-primary.k-soon { cursor: default; }
.k-rideplot .k-btn-primary.k-soon:hover { transform: none; }
.k-rideplot .k-soon::before { background: var(--rp-vis); box-shadow: 0 0 0 3px rgba(201, 232, 76, .35); }
.rp-layers { display: grid; }
.rp-layers > * { grid-area: 1 / 1; }
.rp-layers > :not(.is-on) { opacity: 0; visibility: hidden; }

/* ---------- Hero: the queue board ---------- */
.rp-hero { background: var(--k-bg-2); overflow-x: clip; }
.rp-hero-stage { width: 100%; }
.rp-hero .k-hero-grid { align-items: center; }
.rp-price { font-size: 17px; line-height: 1.5; color: var(--k-ink); }
.k-rideplot .k-hero-more > * + * { margin-top: 24px; }
.k-rideplot .k-hero-head > * + * { margin-top: 24px; }
.rp-show { container-type: inline-size; width: min(100%, 580px, calc((100svh - 124px) * .70)); justify-self: center; position: relative; }
@media (min-width: 900px) and (min-height: 820px) {
  .rp-hero { display: block; min-height: 0; height: 190svh; padding: 0; }
  .rp-hero-stage { position: sticky; top: 0; height: 100svh; display: flex; align-items: center; padding: 88px 0 20px; box-sizing: border-box; }
}
@media (min-width: 900px) and (max-height: 819px) {
  .rp-show { width: min(100%, 580px, calc((100svh - 100px) * .70)); }
}

.rp-sign { position: relative; padding-bottom: 5cqw; }
.rp-post { position: absolute; top: 8cqw; bottom: 0; width: 3.4cqw; border-radius: .8cqw .8cqw .3cqw .3cqw;
  background: linear-gradient(90deg, #1A1E12, #3B4229 46%, #1A1E12); }
.rp-post-l { left: 17%; }
.rp-post-r { right: 17%; }
.rp-sign::after { /* the posts' shadow on the ground */ content: ""; position: absolute; left: 8%; right: 8%; bottom: -1.6cqw; height: 3.2cqw; border-radius: 50%;
  background: radial-gradient(closest-side, rgba(27, 32, 8, .28), transparent); }

.rp-board { position: relative; z-index: 1; background: var(--rp-vis); color: var(--k-ink); border-radius: 5cqw;
  padding: 4.6cqw 6cqw 4.8cqw; box-shadow: 0 1.5cqw 0 var(--rp-vis-edge), 0 7cqw 10cqw -6cqw rgba(27, 32, 8, .5); }
.rp-board p { margin: 0; }
.rp-eyebrow { font-size: 3.5cqw; line-height: 1.25; color: var(--rp-ink-2); }
.rp-name { font: 600 7cqw/1.12 var(--k-display); letter-spacing: -0.012em; margin-top: 1cqw !important; }
.rp-figrow { display: flex; align-items: flex-end; gap: 2cqw; margin-top: .4cqw; }
.rp-fig { font: 600 22cqw/.84 var(--k-display); letter-spacing: -0.035em; margin-left: -1.2cqw; font-variant-numeric: tabular-nums; }
.rp-fig.is-stale { color: var(--rp-ink-2); }
.rp-unit { font: 600 6cqw/1 var(--k-display); padding-bottom: 1.4cqw; }
.rp-src { font-size: 3.3cqw; line-height: 1.3; color: var(--rp-ink-2); padding-bottom: 1.5cqw; margin-left: 2.4cqw; }
.rp-usual { font-size: 3.3cqw; line-height: 1.3; color: var(--rp-ink-2); margin-top: 2cqw !important; }
.rp-bubble { position: relative; margin-top: 2.6cqw; background: #FFFFFF; border-radius: 2.4cqw; padding: 2.4cqw 2.4cqw 1.6cqw; }
.rp-curve { display: block; width: 100%; height: 13cqw; overflow: visible; }
.rp-area { fill: var(--rp-fill); }
.rp-line { fill: none; stroke: var(--k-ink); stroke-width: 2.4px; stroke-linecap: round; vector-effect: non-scaling-stroke; }
.rp-rule { stroke: var(--rp-rule); stroke-width: 1.2px; vector-effect: non-scaling-stroke; }
.rp-dot { position: absolute; width: 2.4cqw; height: 2.4cqw; margin: -1.2cqw 0 0 -1.2cqw; border-radius: 50%; background: var(--k-ink);
  box-shadow: 0 0 0 .5cqw #FFFFFF; left: calc(2.4cqw + (100% - 4.8cqw) * var(--x, 0)); top: calc(2.4cqw + 13cqw * var(--y, 1)); }
.rp-times { display: flex; justify-content: space-between; margin-top: 1.2cqw; font-size: 2.7cqw; font-weight: 600; color: var(--rp-ink-2); font-variant-numeric: tabular-nums; }
.rp-btns { display: flex; gap: 2cqw; margin-top: 3cqw; }
.rp-btns > span { height: 9cqw; border-radius: 999px; display: flex; align-items: center; justify-content: center; gap: 1.6cqw;
  font-size: 3.5cqw; font-weight: 600; }
.rp-done { flex: 1.25; background: #577100; color: #FFFFFF; transform-origin: 50% 50%; }
.rp-done svg { width: 3.2cqw; height: 2.8cqw; fill: none; stroke: currentColor; stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; }
.rp-skip { flex: .62; background: var(--rp-ctl); }
.rp-more { width: 9cqw; background: var(--rp-ctl); letter-spacing: .1em; }

.rp-plaque { position: relative; z-index: 1; margin: 3.2cqw 11% 0; background: var(--k-ink); color: #F1F4E6; border-radius: 1.8cqw;
  padding: 2.2cqw 3.4cqw; box-shadow: 0 2cqw 3cqw -2cqw rgba(0, 0, 0, .5); }
.rp-plaque p { display: flex; justify-content: space-between; align-items: baseline; gap: 3cqw; font-size: 2.9cqw; line-height: 1.3; margin: 0; }
.rp-plaque b { font-weight: 600; white-space: nowrap; }
.rp-plaque span { color: #C9D0B2; text-align: right; }
.rp-plate { position: relative; z-index: 1; margin: 2.4cqw 5% 0; background: #FFFFFF; border-radius: 3cqw; padding: 3cqw 4.4cqw 1.4cqw;
  box-shadow: 0 0 0 1px rgba(27, 32, 8, .06), 0 3cqw 5cqw -3cqw rgba(27, 32, 8, .35); }
.rp-plate-h { font: 600 3.9cqw/1.2 var(--k-text); margin: 0 0 1cqw !important; }
.rp-plate ol { list-style: none; margin: 0; padding: 0; }
.rp-plate li { display: flex; align-items: baseline; gap: 3cqw; padding: 1.5cqw 0; border-top: 1px solid rgba(27, 32, 8, .1); font-size: 3.1cqw; line-height: 1.2; }
.rp-plate li:first-child { border-top: 0; }
.rp-plate li b { width: 9cqw; font-weight: 600; font-variant-numeric: tabular-nums; }
.rp-plate li span { flex: 1; font-weight: 600; }
.rp-plate li small { display: block; font-weight: 400; font-size: 2.6cqw; color: #6E6E73; margin-top: .4cqw; }
.rp-plate li em { font-style: normal; font-variant-numeric: tabular-nums; }
.rp-lunch { font-weight: 400 !important; color: #6E6E73; }

@media (max-width: 899px) {
  .rp-hero { padding-top: 96px; }
  .rp-show { width: min(100%, 460px); }
  .k-rideplot .k-h1 { font-size: clamp(36px, 10vw, 52px); }
}

/* ---------- Chapters: shared ---------- */
.rp-band { min-height: 100svh; display: flex; align-items: center; }
.rp-band > .k-section { width: 100%; }
.rp-waits .k-visual, .rp-plan .k-visual, .rp-replan .k-visual { gap: clamp(20px, 3vw, 48px); }

/* 1 · Waits now: a departures board of the park's posted waits */
.rp-board-list { width: min(330px, 30vw); background: var(--rp-night); color: #F1F4E6; border-radius: 22px; padding: 18px 18px 14px;
  box-shadow: 0 30px 50px -30px rgba(0, 0, 0, .55); align-self: center; }
.rp-bl-h { display: flex; justify-content: space-between; font-size: 13px; color: #B9C0A2; margin: 0 0 8px !important; }
.rp-board-list ol { list-style: none; margin: 0; padding: 0; }
.rp-board-list li { display: grid; grid-template-columns: 1fr auto; grid-template-rows: auto auto; column-gap: 10px; padding: 7px 0;
  border-top: 1px solid rgba(255, 255, 255, .1); transition: opacity .3s ease; }
.rp-board-list li b { font-size: 14px; font-weight: 600; }
.rp-board-list li em { font: 600 17px/1 var(--k-display); font-style: normal; text-align: right; font-variant-numeric: tabular-nums; }
.rp-board-list li span { grid-column: 1; font-size: 12px; color: #B9C0A2; }
.rp-board-list li span.rp-go { color: #F1F4E6; }
.rp-board-list li i { grid-column: 2; grid-row: 2; align-self: center; width: 92px; height: 6px; border-radius: 3px; background: rgba(255, 255, 255, .12); position: relative; justify-self: end; }
.rp-board-list li i::before { content: ""; position: absolute; inset: 0 auto 0 0; width: calc(100% * var(--p)); border-radius: 3px; background: #F1F4E6; transform-origin: 0 50%; transform: scaleX(var(--s, 1)); }
.rp-board-list li i::after { content: ""; position: absolute; top: -3px; bottom: -3px; left: calc(100% * var(--u)); width: 2px; background: var(--rp-vis); border-radius: 1px; }
.rp-bl-key { display: flex; gap: 14px; font-size: 12px; color: #B9C0A2; margin: 10px 0 0 !important; }
.rp-bl-key span::before { content: ""; display: inline-block; width: 12px; height: 4px; border-radius: 2px; background: #F1F4E6; margin-right: 6px; vertical-align: middle; }
.rp-bl-key .rp-k-u::before { width: 2px; height: 12px; background: var(--rp-vis); }
@media (max-width: 1099px) { .rp-board-list { display: none; } }
.rp-strip-waits span { font-size: 13px; padding: 6px 10px; border-radius: 999px; background: var(--k-bg-2); color: var(--k-ink); }
.rp-strip-waits b { font-weight: 600; }

/* 2 · A ride's usual day */
.rp-bars { background: var(--k-bg-2); }
.rp-chart { margin: 0; background: #FFFFFF; border-radius: 28px; padding: clamp(20px, 3vw, 36px); box-shadow: 0 0 0 1px var(--k-line); }
.rp-chart-head { display: flex; justify-content: space-between; align-items: center; gap: 16px; flex-wrap: wrap; }
.rp-chart-ride { font: 600 clamp(26px, 2.6vw, 38px)/1.1 var(--k-display); }
.rp-days { display: flex; background: var(--k-bg-2); border-radius: 999px; padding: 4px; }
.rp-days span { font-size: 15px; font-weight: 600; padding: 7px 14px; border-radius: 999px; color: var(--k-ink-2); }
.rp-days span.is-on { background: #FFFFFF; color: var(--k-ink); box-shadow: 0 1px 3px rgba(0, 0, 0, .12); }
.rp-chart-peak { display: grid; margin-top: 14px; font-size: 17px; color: var(--k-ink-2); }
.rp-chart-peak > * { grid-area: 1 / 1; }
.rp-chart-peak > :not(.is-on) { opacity: 0; visibility: hidden; }
.rp-chart-peak b { color: var(--k-ink); font-weight: 600; }
.rp-chart-plot { position: relative; height: clamp(220px, 34svh, 320px); margin-top: 22px; }
.rp-grid span { position: absolute; left: 0; right: 0; bottom: calc(100% * var(--y)); border-top: 1px dashed rgba(27, 32, 8, .14);
  font-size: 12px; color: #6E6E73; text-align: right; line-height: 1; padding-top: 3px; }
.rp-cols { position: absolute; inset: 0 52px 0 0; display: flex; align-items: flex-end; gap: 6%; }
.rp-cols i { flex: 1; height: 100%; display: block; position: relative; }
.rp-cols i::before { content: ""; position: absolute; inset: 0; border-radius: 6px 6px 2px 2px; background: var(--rp-bar);
  transform-origin: 50% 100%; transform: scaleY(var(--v, .5)); }
.rp-cols i.is-peak::before { background: #577100; }
.rp-chart-hours { display: flex; justify-content: space-between; margin: 10px 52px 0 0 !important; font-size: 13px; color: #6E6E73; font-variant-numeric: tabular-nums; }

/* 3 · Plan a day: the day drawn to scale */
.rp-day { width: min(300px, 26vw); align-self: center; }
.rp-day-h { margin: 0 0 14px !important; }
.rp-day-h span { display: block; font-size: 14px; color: var(--k-ink-2); }
.rp-day-h b { display: block; font: 600 clamp(24px, 2.2vw, 32px)/1.1 var(--k-display); font-variant-numeric: tabular-nums; }
.rp-day-col { position: relative; height: clamp(320px, 54svh, 500px); margin-left: 46px; border-left: 3px solid var(--rp-char); }
.rp-hr { position: absolute; left: -46px; top: calc(100% * var(--t)); transform: translateY(-50%); font-size: 12px; color: #6E6E73; font-variant-numeric: tabular-nums; }
.rp-hr::after { content: ""; position: absolute; left: 40px; top: 50%; width: 9px; border-top: 1px solid #A1ABB3; }
.rp-hr-end { color: var(--k-ink); font-weight: 600; }
.rp-blk { position: absolute; left: 10px; right: 0; top: calc(100% * var(--t)); height: calc(100% * var(--d)); min-height: 3px;
  display: flex; align-items: flex-start; gap: 8px; transform-origin: 0 0; }
.rp-blk i { width: 8px; flex: none; height: 100%; border-radius: 3px; background: #577100; }
.rp-blk i.rp-q { background: var(--k-ink); }
.rp-blk span { font-size: 12px; line-height: 1.15; white-space: nowrap; margin-top: -1px; }
.rp-blk span b { font-weight: 600; font-variant-numeric: tabular-nums; margin-right: 4px; }
.rp-blk.rp-blk-lunch i { background: repeating-linear-gradient(-45deg, #DCE0D2 0 4px, #FFFFFF 4px 8px); box-shadow: inset 0 0 0 1px #C6CBB8; }
.rp-blk.rp-blk-lunch span { color: #6E6E73; }
.rp-wf { margin: 18px 0 0 !important; font-size: 13px; line-height: 1.4; color: var(--k-ink-2); }
.rp-wf b { display: block; color: var(--k-ink); font-weight: 600; }
@media (max-width: 1099px) { .rp-day { display: none; } }
.rp-strip-day { flex-direction: column; align-items: stretch !important; gap: 4px !important; width: 100%; }
.rp-sd-bar { position: relative; height: 14px; border-radius: 4px; background: var(--k-bg-2); display: block; }
.rp-sd-bar i { position: absolute; top: 2px; bottom: 2px; left: calc(100% * var(--a)); width: calc(100% * (var(--b) - var(--a))); border-radius: 2px; background: #577100; transform-origin: 0 50%; }
.rp-sd-bar i.rp-l { background: repeating-linear-gradient(-45deg, #C6CBB8 0 3px, #FFFFFF 3px 6px); }
.rp-sd-t { display: flex; justify-content: space-between; font-size: 12px; color: #6E6E73; }

/* 4 · Heights: the measuring post, on a whole hi-vis board */
.rp-heights { background: var(--rp-vis); color: var(--k-ink); }
.rp-heights .k-eyebrow, .rp-heights .k-body { color: var(--rp-ink-2); }
.rp-post-fig { margin: 0; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr); gap: clamp(20px, 3vw, 40px); align-items: center; }
.rp-postwrap { position: relative; height: clamp(360px, 60svh, 520px); }
.rp-ruler { position: absolute; top: 0; bottom: 0; right: 0; width: 74px; border-radius: 14px; background: #FFFFFF;
  box-shadow: inset 0 0 0 2px var(--k-ink), 0 20px 30px -22px rgba(27, 32, 8, .6);
  background-image: repeating-linear-gradient(to top, var(--k-ink) 0 1.5px, transparent 1.5px calc(100% / 14));
  background-size: 18px 100%; background-repeat: no-repeat; background-position: left bottom; overflow: hidden; }
.rp-ruler span { position: absolute; left: 24px; bottom: calc(100% * var(--h)); transform: translateY(50%); font-size: 12px; font-weight: 600; font-variant-numeric: tabular-nums; }
.rp-ruler span:last-of-type { transform: translateY(0); bottom: 6px; }
.rp-band-zone { position: absolute; left: 0; right: 0; bottom: 0; height: 100%; transform-origin: 0 100%;
  background: repeating-linear-gradient(-45deg, rgba(87, 113, 0, .28) 0 5px, transparent 5px 10px);
  transform: translateY(calc(-100% * var(--zb, 0))) scaleY(var(--zh, 0)); }
.rp-min { position: absolute; right: -10px; width: 94px; top: 0; height: 100%; transform: translateY(calc(-100% * var(--mh, 0))); pointer-events: none; }
.rp-min::after { content: ""; position: absolute; left: 0; right: 0; bottom: -2px; border-top: 4px solid var(--k-ink); border-radius: 2px; }
.rp-kids { position: absolute; top: 0; bottom: 0; left: 0; right: 92px; }
.rp-kids span { position: absolute; right: 0; bottom: calc(100% * var(--h)); transform: translateY(50%); font-size: 14px; font-weight: 600;
  display: flex; align-items: center; gap: 8px; white-space: nowrap; }
.rp-kids span::after { content: ""; width: 26px; border-top: 2px dashed var(--k-ink); }
.rp-hcard { background: #FFFFFF; border-radius: 22px; padding: 18px 20px; box-shadow: 0 24px 40px -28px rgba(27, 32, 8, .6); }
.rp-hcard .rp-layers > div p { margin: 0; padding: 10px 0; border-top: 1px solid rgba(27, 32, 8, .1); font-size: 15px; line-height: 1.35; }
.rp-hcard .rp-layers > div p:first-child { border-top: 0; padding-top: 0; }
.rp-hcard .rp-hc-ride { font: 600 22px/1.2 var(--k-display) !important; }
.rp-hcard .rp-hc-lim { color: var(--k-ink-2); }
.rp-hcard small { display: block; margin-top: 3px; font-size: 14px; color: #4C4C50; }
.rp-hcard small.rp-warn::before { content: ""; display: inline-block; width: 0; height: 0; margin-right: 6px; vertical-align: -1px;
  border-left: 6px solid transparent; border-right: 6px solid transparent; border-bottom: 11px solid #FF9500; }
.rp-hsrc { margin: 4px 0 0 !important; padding-top: 10px; border-top: 1px solid rgba(27, 32, 8, .1); font-size: 13px; color: #4C4C50; }
.rp-hcard .rp-other { font-size: 13px !important; color: #4C4C50; }
.rp-post-fig .rp-layers > :not(.is-on) { visibility: hidden; }
@media (max-width: 899px) {
  .rp-post-fig { grid-template-columns: minmax(0, 1fr); }
  .rp-postwrap { height: clamp(300px, 52svh, 420px); max-width: 340px; width: 100%; }
}

/* 5 · Re-plans: a split-flap timetable, in the dark */
.rp-replan { background: var(--rp-night); color: #F1F4E6; }
.rp-replan .k-h2, .rp-replan h2 { color: #FFFFFF; }
.rp-replan .k-body, .rp-replan .k-eyebrow { color: #C3C9AD; }
.rp-replan .k-pips i { background: rgba(255, 255, 255, .16); }
.rp-replan .k-pips i.is-on { background: var(--rp-vis); }
.rp-flap { width: min(330px, 30vw); align-self: center; }
.rp-flap-h { display: grid; gap: 6px; margin: 0 0 12px !important; font-size: 14px; color: #C3C9AD; }
.rp-flap-note { color: #FFFFFF; font-weight: 600; opacity: var(--note, 1); }
.rp-flap-rows { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; perspective: 600px; }
.rp-flap-rows li { position: relative; height: 54px; }
.rp-flap-rows .rp-f { position: absolute; inset: 0; display: grid; grid-template-columns: 52px 1fr auto; align-items: center; gap: 10px;
  padding: 0 14px; border-radius: 10px; background: #262B1C; box-shadow: inset 0 -1px 0 rgba(255, 255, 255, .06), inset 0 1px 0 rgba(0, 0, 0, .4);
  backface-visibility: hidden; transform-origin: 50% 50%; }
.rp-flap-rows .rp-f::after { content: ""; position: absolute; left: 0; right: 0; top: 50%; border-top: 1px solid rgba(0, 0, 0, .55); }
.rp-flap-rows b { font-weight: 600; font-variant-numeric: tabular-nums; font-size: 16px; }
.rp-flap-rows span { font-size: 15px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rp-flap-rows span small { display: block; font-weight: 400; font-size: 12px; color: #B9C0A2; }
.rp-flap-rows em { font-style: normal; font-size: 14px; color: #D6DBC5; font-variant-numeric: tabular-nums; }
.rp-flap-rows li:first-child .rp-f { background: #3A4227; }
.rp-flap-rows .rp-f-b { transform: rotateX(0deg); }
.rp-flap-rows .rp-f-a { transform: rotateX(90deg); }
@media (max-width: 1099px) { .rp-flap { display: none; } }
.rp-strip-flap { display: none; }
@media (max-width: 899px) {
  .rp-strip-flap { display: grid !important; gap: 4px; margin-top: 12px; }
  .rp-strip-flap .rp-sf { display: grid; position: relative; height: 30px; perspective: 400px; }
  .rp-strip-flap .rp-sf > span { grid-area: 1 / 1; display: flex; gap: 10px; align-items: center; padding: 0 10px; border-radius: 7px;
    background: #262B1C; font-size: 13px; backface-visibility: hidden; }
  .rp-strip-flap b { font-weight: 600; font-variant-numeric: tabular-nums; }
  .rp-strip-flap .rp-f-a { transform: rotateX(90deg); }
}

/* 6 · Quieter days: the next ten open days on one board */
.rp-quiet { background: var(--k-bg-2); }
.rp-quiet-head { max-width: 760px; }
.rp-quiet-head > * + * { margin-top: 22px !important; }
.rp-cal { display: grid; grid-template-columns: repeat(10, minmax(0, 1fr)); margin-top: 44px; background: #FFFFFF; border-radius: 28px;
  padding: 28px clamp(16px, 2vw, 32px) 20px; box-shadow: 0 0 0 1px var(--k-line), 0 30px 50px -40px rgba(27, 32, 8, .4); }
.rp-qd { display: flex; flex-direction: column; align-items: stretch; gap: 10px; padding: 0 clamp(4px, .7vw, 12px); border-left: 1px solid rgba(27, 32, 8, .08); }
.rp-qd:first-child { border-left: 0; }
.rp-lvl { font-size: 15px; font-weight: 600; display: flex; align-items: center; gap: 5px; min-height: 22px; white-space: nowrap; }
.rp-lvl.rp-none { font-weight: 400; font-size: 13px; color: #6E6E73; white-space: normal; line-height: 1.2; }
.rp-lvl svg { width: 14px; height: 14px; flex: none; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.rp-cbars { display: flex; align-items: flex-end; gap: 4px; height: clamp(160px, 26svh, 260px); border-bottom: 2px solid var(--k-ink); }
.rp-cbars i { flex: 1; height: 100%; position: relative; }
.rp-cbars i::before { content: ""; position: absolute; inset: 0; border-radius: 4px 4px 1px 1px; background: var(--c); transform-origin: 50% 100%; transform: scaleY(calc(var(--v) * var(--s, 1))); }
.rp-cbars i span { position: absolute; left: 50%; bottom: calc(100% * var(--v) * var(--s, 1) + 4px); transform: translateX(-50%); font-size: 12px; font-weight: 600; font-variant-numeric: tabular-nums; color: var(--k-ink-2); opacity: var(--s, 1); }
.rp-cbars i:nth-child(1) { --c: #1B2008; }
.rp-cbars i:nth-child(2) { --c: #577100; }
.rp-cbars i:nth-child(3) { --c: #9DB83A; }
.rp-qday { font-size: 14px; color: var(--k-ink-2); line-height: 1.25; margin: 0 !important; }
.rp-qday b { display: block; color: var(--k-ink); font-weight: 600; font-size: 16px; }
.rp-cal-key { display: flex; flex-wrap: wrap; gap: 8px 18px; margin: 18px 0 0 !important; font-size: 14px; color: var(--k-ink-2); }
.rp-cal-key i { display: inline-block; width: 12px; height: 12px; border-radius: 3px; margin-right: 6px; vertical-align: -1px; }
.rp-c1 { background: #1B2008; } .rp-c2 { background: #577100; } .rp-c3 { background: #9DB83A; }
@media (max-width: 1099px) and (min-width: 900px) { .rp-cbars i span { font-size: 10px; } }
@media (max-width: 899px) {
  /* A row a day: the day, its estimate, and the three usual waits across */
  .rp-cal { grid-template-columns: minmax(0, 1fr); padding: 6px 16px; border-radius: 22px; margin-top: 30px; }
  .rp-qd { display: grid; grid-template-columns: 70px 1fr; grid-template-rows: auto auto; column-gap: 12px; row-gap: 4px; padding: 10px 0; border-left: 0; border-top: 1px solid rgba(27, 32, 8, .08); }
  .rp-qd:first-child { border-top: 0; }
  .rp-qday { grid-column: 1; grid-row: 1 / span 2; align-self: center; }
  .rp-lvl { grid-column: 2; grid-row: 1; font-size: 14px; min-height: 0; }
  .rp-cbars { grid-column: 2; grid-row: 2; flex-direction: column; align-items: stretch; height: auto; gap: 3px; border-bottom: 0; border-left: 2px solid var(--k-ink); padding-left: 0; }
  .rp-cbars i { height: 9px; flex: none; }
  .rp-cbars i::before { transform-origin: 0 50%; transform: scaleX(calc(var(--v) * var(--s, 1) * .82)); border-radius: 0 3px 3px 0; }
  .rp-cbars i span { bottom: auto; top: 50%; left: calc(82% * var(--v) * var(--s, 1) + 6px); transform: translateY(-50%); font-size: 11px; line-height: 1; }
}

/* ---------- The rest ---------- */
.rp-rest .k-tiles { margin-top: 44px; }
.rp-demo-art { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; padding-top: 18px; }
.rp-demo-clock { font: 600 54px/1 var(--k-display); }
.rp-demo-line { position: relative; flex: 1; min-width: 160px; height: 8px; border-radius: 4px; background: var(--k-bg-2); }
.rp-demo-line i { position: absolute; inset: 0 30% 0 0; border-radius: 4px; background: var(--k-ink); }
.rp-demo-line b { position: absolute; left: 70%; top: -26px; transform: translateX(-50%); font-size: 14px; font-weight: 600; }
.rp-demo-note { width: 100%; font-size: 14px; display: flex; align-items: center; gap: 8px; }
.rp-demo-note::before { content: ""; border-left: 7px solid transparent; border-right: 7px solid transparent; border-bottom: 12px solid #FF9500; }
.rp-row-art { display: flex; align-items: baseline; gap: 14px; padding: 14px 16px; border-radius: 14px; background: var(--k-bg-2); font-size: 16px; }
.rp-row-art b { font-weight: 600; font-variant-numeric: tabular-nums; }
.rp-row-art span { flex: 1; font-weight: 600; }
.rp-row-art small { display: block; font-weight: 400; font-size: 13px; color: #6E6E73; }
.rp-row-art em { font-style: normal; }
.rp-refresh span { font-weight: 400; color: #4C4C50; text-align: center; }
.rp-share-art { padding: 14px 16px; border-radius: 14px; background: var(--k-bg-2); font-size: 14px; line-height: 1.5; font-variant-numeric: tabular-nums; }
.rp-share-art span { color: #6E6E73; }

.rp-compare { background: var(--k-bg-2); }
.rp-compare .k-teaser li { background: #FFFFFF; }

.rp-close { background: var(--rp-vis); }
.rp-close .k-h2 { color: var(--k-ink); max-width: 16ch; }
.rp-close .k-lockup span { color: var(--rp-ink-2); }
.rp-subnav { justify-content: center; margin-top: 36px; }
.rp-subnav a { box-shadow: inset 0 0 0 1.5px rgba(27, 32, 8, .35); }
.rp-credit { margin-top: 22px !important; font-size: 14px; color: var(--rp-ink-2); }
.rp-credit a { color: var(--k-ink); text-decoration: underline; text-underline-offset: 3px; }

/* ---------- Child pages ---------- */
.k-rideplot .k-sub-hero { background: var(--k-bg-2); }
.k-rideplot .k-sub-hero .k-h1 { color: var(--k-ink); }
.k-rideplot .k-doc .k-note { background: #FFFFFF; }
.k-rideplot .k-sub-hero .k-standout { background: var(--rp-vis); box-shadow: none; color: var(--k-ink); }
.k-rideplot .k-standout > span { color: var(--rp-ink-2); }
.k-rideplot .sp-support-form { --sf-accent: #577100; }
.rp-days { position: relative; }
.rp-days span { position: relative; z-index: 1; flex: 1; text-align: center; min-width: 46px; }
.rp-pill { position: absolute; z-index: 0; top: 4px; bottom: 4px; left: 4px; width: calc((100% - 8px) / 4); border-radius: 999px; background: #FFFFFF; box-shadow: 0 1px 3px rgba(0, 0, 0, .12); }
html.k-motion .rp-days span.is-on { background: none; box-shadow: none; }
@media (max-width: 899px) {
  .rp-cal > div:nth-child(n+7) { display: none; }
  .rp-cbars { height: 64px; }
  .rp-cal { gap: 10px; margin-top: 32px; }
  .rp-cal > div { padding: 14px 14px 12px; }
}
.rp-plate li.rp-plate-note { display: block; border-top: 0; padding: 0 0 1.4cqw; font-size: 2.8cqw; font-weight: 600; color: var(--k-ink); }
.rp-plate li.rp-plate-note::before { content: "↻"; margin-right: 1.4cqw; color: #577100; }
.k-rideplot .k-doc :is(p, li, td, th, summary) { overflow-wrap: break-word; }
@media (max-width: 759px) {
  /* Long app names: the name sits over its value rather than squeezing it sideways */
  .k-rideplot .k-table td { display: block; }
  .k-rideplot .k-table td::before { display: block; margin-bottom: 2px; font-size: 14px; }
}
/* The departures board beside the phone, in a short laptop window */
@media (min-width: 900px) and (max-height: 760px) {
  .rp-board-list { padding: 14px 16px 10px; }
  .rp-board-list li { padding: 4px 0; }
  .rp-board-list li b { font-size: 13px; }
  .rp-board-list li em { font-size: 15px; }
  .rp-bl-key { display: none; }
}
/* With motion the layers slide through a frame of their own, so clip them to it */
html.k-motion .rp-board .rp-layers, html.k-motion .rp-plaque .rp-layers, html.k-motion .rp-plate .rp-layers,
html.k-motion .rp-hcard .rp-layers { overflow: hidden; }
html.k-motion .rp-board .rp-layers { margin: -1.4cqw; padding: 1.4cqw; }

/* ---------- Round 2 of the design review ---------- */
.k-rideplot .k-h2, .k-rideplot .k-h1 { text-wrap: balance; }
html.k-motion .k-rideplot .k-step { transition: opacity .22s ease, transform .3s ease; }
html.k-motion .k-rideplot .k-step.is-on { transition-delay: .08s; }
/* The layers clip to their own frame: no widening, so nothing of a neighbour shows */
html.k-motion .rp-board .rp-layers { margin: 0; padding: 0; }
/* The sign: the posts run to the ground beside the plaque and the plate, hung between them */
.rp-post-l { left: 14%; } .rp-post-r { right: 14%; }
.rp-sign { padding-bottom: 8cqw; }
.rp-plaque { margin: 3cqw 19.5% 0; padding: 2cqw 2.8cqw; }
.rp-plaque p { flex-direction: column; align-items: flex-start; gap: .4cqw; font-size: 2.8cqw; }
.rp-plaque span { text-align: left; }
.rp-plate { margin: 2cqw 19.5% 0; padding: 2.6cqw 3.4cqw 1cqw; border-radius: 2.4cqw; }
.rp-plate li { font-size: 2.9cqw; gap: 2.4cqw; }
.rp-plate li b { width: 8cqw; }
.rp-plate-h { font-size: 3.4cqw; }
@media (max-width: 899px) {
  .rp-plate ol li:last-child:not(:first-child) { display: none; }   /* two rows on a phone, so the board stays in view */
}
/* Heights: the ride and its minimum ride on the line */
.rp-postwrap { --rw: 74px; }
.rp-ruler { right: 108px; }
.rp-kids { right: 200px; }
.rp-min { right: 98px; }
.rp-mtag { position: absolute; left: 100%; bottom: -16px; margin-left: 6px; width: 104px; }
.rp-mtag .rp-layers { overflow: hidden; }
.rp-mtag span span { display: block; font-size: 13px; line-height: 1.2; color: var(--k-ink); font-variant-numeric: tabular-nums; }
.rp-mtag b { display: block; font-weight: 600; font-size: 14px; }
/* The re-plan board: the seam sits behind the figures, and a long name wraps */
.rp-flap-rows li { height: 58px; }
.rp-flap-rows .rp-f { background: linear-gradient(to bottom, #262B1C 0 calc(50% - 1px), #171B0E calc(50% - 1px) calc(50% + 1px), #262B1C calc(50% + 1px)); }
.rp-flap-rows li:first-child .rp-f { background: linear-gradient(to bottom, #3A4227 0 calc(50% - 1px), #22281A calc(50% - 1px) calc(50% + 1px), #3A4227 calc(50% + 1px)); }
.rp-flap-rows .rp-f::after { content: none; }
.rp-flap-rows span { white-space: normal; overflow: visible; font-size: 14px; line-height: 1.2; }
.rp-flap-rows .rp-f-empty { visibility: hidden; }
/* The departures board: room around the lit row */
.rp-board-list li { padding: 7px 8px; margin: 0 -8px; border-radius: 8px; }
/* The ride's usual day: the peak in ink, the drop in moss */
.rp-cols i.is-peak::before { background: var(--k-ink); }
.rp-cols i.is-drop::before { background: #577100; }
/* How it compares, on the app's page: lines, not boxes */
.rp-compare .k-teaser li { background: none; box-shadow: none; border-top: 1px solid var(--k-line); border-radius: 0; padding: 22px 0 6px; }
.rp-compare .k-teaser ul { gap: 4px; }
/* Fewer, quieter cards on a phone */
@media (max-width: 899px) {
  .rp-rest .k-tile { padding: 22px 22px 20px; gap: 10px; }
  .rp-share-art { display: none; }
  .k-rideplot .k-plan { padding: 22px; }
  .k-rideplot .k-plan ul { margin-top: 14px; gap: 8px; }
}
/* The compare page's standout: ink on white with a moss rule, not a hi-vis box */
.k-rideplot .k-sub-hero .k-standout { background: #FFFFFF; box-shadow: inset 0 0 0 1px var(--k-line); border-top: 4px solid #577100; border-radius: 4px 4px 20px 20px; color: var(--k-ink); }
.k-rideplot .k-standout > span { color: #577100; }
.k-rideplot .k-sub-hero .k-h1 { font-size: clamp(40px, 4.8vw, 76px); }
@media (max-width: 899px) {
  .rp-postwrap { max-width: none; }
  .rp-kids span { white-space: normal; width: 118px; justify-content: flex-end; text-align: right; font-size: 13px; line-height: 1.15; }
  .rp-kids span::after { width: 14px; flex: none; }
}
/* Scene captions sit beside the phone at a size that doesn't dwarf it */
@media (min-width: 900px) { .k-rideplot .k-step .k-h2 { font-size: clamp(34px, min(3.7vw, 7svh), 60px); } }
html.k-motion .rp-chart-peak { overflow: hidden; }

/* ---------- Round 3 of the design review ---------- */
/* Hero: a wider copy column for a two-line headline, a bigger, more compact board, and a sign
   that reads as made: posts capped above the board, bolts where it's fixed to them, a firm shadow. */
@media (min-width: 900px) { .rp-hero .k-hero-grid { grid-template-columns: minmax(0, 6fr) minmax(0, 6fr); } }
.rp-hero .k-h1 { font-size: clamp(40px, min(3.9vw, 6.8svh), 64px); }
.rp-name { font-size: 6.8cqw; }
.rp-fig { font-size: 19.5cqw; }
.rp-usual { margin-top: 1.4cqw !important; }
.rp-bubble { margin-top: 2cqw; }
.rp-curve { height: 11.5cqw; }
.rp-dot { top: calc(2.4cqw + 11.5cqw * var(--y, 1)); }
.rp-btns > span { height: 8.4cqw; }
.rp-more { width: 8.4cqw; }
.rp-post { top: -3.2cqw; border-radius: 1.7cqw 1.7cqw .3cqw .3cqw; }
.rp-board::before { content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
  background:
    radial-gradient(circle at calc(14% + 1.7cqw) 2.2cqw, #6F8A22 0 .75cqw, #A3BD3A .8cqw 1.05cqw, transparent 1.1cqw),
    radial-gradient(circle at calc(86% - 1.7cqw) 2.2cqw, #6F8A22 0 .75cqw, #A3BD3A .8cqw 1.05cqw, transparent 1.1cqw),
    radial-gradient(circle at calc(14% + 1.7cqw) calc(100% - 2.2cqw), #6F8A22 0 .75cqw, #A3BD3A .8cqw 1.05cqw, transparent 1.1cqw),
    radial-gradient(circle at calc(86% - 1.7cqw) calc(100% - 2.2cqw), #6F8A22 0 .75cqw, #A3BD3A .8cqw 1.05cqw, transparent 1.1cqw); }
.rp-board > * { position: relative; }
.rp-sign::after { background: radial-gradient(closest-side, rgba(27, 32, 8, .42), transparent); height: 3.6cqw; bottom: -1.8cqw; }
.rp-plate li { padding: 1.2cqw 0; }
.rp-plate li small { margin-top: .2cqw; }
@media (max-width: 899px) {
  .rp-eyebrow, .rp-src, .rp-usual { font-size: max(3.5cqw, 13px); }
  .rp-times { font-size: max(2.7cqw, 12px); }
  .rp-plaque p { font-size: max(2.8cqw, 13px); }
  .rp-plate-h { font-size: max(3.4cqw, 15px); }
  .rp-plate li { font-size: max(2.9cqw, 14px); }
  .rp-plate li small { font-size: max(2.6cqw, 12px); }
  .rp-plate li b { width: auto; min-width: 9cqw; }
  .rp-plate li.rp-plate-note { font-size: max(2.8cqw, 13px); }
  .rp-plaque, .rp-plate { margin-left: 18%; margin-right: 18%; }
}
/* Chapter 1: a row a ride, posted against usual drawn wide, and the advice lighting as it lands */
.rp-board-list { width: min(360px, 32vw); }
.rp-board-list li { grid-template-columns: minmax(0, 1fr) 62px 92px 36px; grid-template-rows: auto; align-items: center; column-gap: 10px; padding: 6px 8px; }
.rp-board-list li b { font-size: 14px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rp-board-list li span { grid-column: auto; font-size: 12px; color: #B9C0A2; white-space: nowrap; }
.rp-board-list li span.rp-now { color: #F1F4E6; font-weight: 600; }
.rp-board-list li i { grid-column: auto; grid-row: auto; width: 92px; height: 8px; border-radius: 4px; }
.rp-board-list li i::before { border-radius: 4px; }
.rp-board-list li i::after { top: -4px; bottom: -4px; width: 2.5px; }
.rp-board-list li em { font-size: 18px; }
@media (min-width: 900px) and (max-height: 760px) { .rp-board-list li { padding: 3px 8px; } }
/* Chapter 3: the day's frame, then the ticked rides, then the rides landing */
.rp-day-h { margin: 0 0 14px; }
.rp-day-h b { display: block; font: 600 clamp(22px, 2vw, 30px)/1.15 var(--k-display); font-variant-numeric: tabular-nums; }
html.k-motion .rp-day-h .rp-layers, html.k-motion .rp-wf.rp-layers { overflow: hidden; }
.rp-wf p { margin: 0 !important; font-size: 13px; line-height: 1.4; color: var(--k-ink-2); }
.rp-wf p b { display: block; color: var(--k-ink); font-weight: 600; }
/* Heights, at every width: the post with the children, the ride's card beside it on a wide screen,
   under it on a narrow one, and on a phone a strip with the one child line that matters. */
.rp-hstrip { display: none; }
@media (min-width: 900px) {
  .rp-mtag { display: none; }
  .rp-ruler { right: 12px; } .rp-min { right: 2px; } .rp-kids { right: 104px; }
  .rp-post-fig { grid-template-columns: 280px minmax(0, 1fr); }
  .rp-postwrap { width: 280px; }
}
@media (min-width: 900px) and (max-width: 1199px) {
  .rp-post-fig { grid-template-columns: minmax(0, 1fr); }
  .rp-postwrap { height: clamp(300px, 46svh, 420px); }
}
@media (max-width: 899px) {
  .rp-hcard { display: none; }
  .rp-hstrip { display: block; background: #FFFFFF; border-radius: 18px; padding: 14px 16px; margin-top: 4px;
    box-shadow: 0 20px 30px -24px rgba(27, 32, 8, .6); }
  html.k-motion .rp-hstrip .rp-layers { overflow: hidden; }
  .rp-hstrip p { margin: 0 !important; font-size: 14px; line-height: 1.35; color: #3B3F2E; }
  .rp-hstrip p b { color: var(--k-ink); font-weight: 600; }
  .rp-hstrip p + p { margin-top: 4px !important; }
  .rp-hstrip .rp-hs-note { color: var(--k-ink); }
}
/* The scene strips also carry the moment between 900 and 1099 px, where the side visuals don't fit */
.rp-strip-flap .rp-sf { display: grid; position: relative; height: 30px; perspective: 400px; }
.rp-strip-flap .rp-sf > span { grid-area: 1 / 1; display: flex; gap: 10px; align-items: center; padding: 0 10px; border-radius: 7px;
  background: #262B1C; font-size: 13px; backface-visibility: hidden; }
.rp-strip-flap b { font-weight: 600; font-variant-numeric: tabular-nums; }
.rp-strip-flap .rp-f-a { transform: rotateX(90deg); }
@media (min-width: 900px) and (max-width: 1099px) {
  .k-rideplot .rp-strip-waits, .k-rideplot .rp-strip-day { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-top: 18px; }
  .k-rideplot .rp-strip-day { flex-direction: column; align-items: stretch; gap: 4px; }
  .k-rideplot .rp-strip-flap { display: grid; gap: 4px; margin-top: 18px; max-width: 360px; }
}
/* Tiles: small timetables from the app */
.rp-mini { border-radius: 14px; background: var(--k-bg-2); padding: 6px 14px; }
.rp-mini p { display: flex; align-items: baseline; gap: 12px; padding: 8px 0; margin: 0 !important; border-top: 1px solid rgba(27, 32, 8, .1); font-size: 15px; }
.rp-mini p:first-child { border-top: 0; }
.rp-mini b { font-weight: 600; font-variant-numeric: tabular-nums; width: 44px; flex: none; }
.rp-mini span { flex: 1; font-weight: 600; }
.rp-mini small { display: block; font-weight: 400; font-size: 13px; color: #6E6E73; }
.rp-mini em { font-style: normal; font-variant-numeric: tabular-nums; }
.rp-mini-lunch span { font-weight: 400; color: #6E6E73; }
.rp-mini-stale em { color: #6E6E73; }
.rp-mini-note { font-size: 13px !important; color: #4C4C50; justify-content: center; }
/* Quieter days: a bar's figure shows once the bar has risen */
.rp-cbars i span { opacity: calc((var(--s, 1) - .85) * 7); }
.rp-board-list { flex: none; }
.rp-board-list { width: min(380px, 33vw); }
.rp-board-list li { grid-template-columns: minmax(0, 1fr) 58px 80px 34px; }
.rp-board-list li i { width: 80px; }
@media (max-width: 899px) { .rp-hero .k-h1 { font-size: clamp(32px, 8.6vw, 44px); } }

/* ---------- After round 3 ---------- */
/* Hero: the post caps clear the nav; in a window under 900 tall the plate keeps two rows */
@media (min-width: 900px) and (min-height: 820px) { .rp-hero-stage { padding-top: 104px; } }
@media (min-width: 900px) and (max-height: 899px) { .rp-plate ol li:last-child:not(:first-child) { display: none; } }
.rp-show { width: min(100%, 560px, calc((100svh - 130px) * .72)); }
.rp-plaque span { text-wrap: balance; }
.rp-plate li small { white-space: nowrap; }
/* Chapter 1: tracks wide enough to read posted against usual */
.rp-board-list { width: min(430px, 36vw); }
.rp-board-list li { grid-template-columns: minmax(0, 1fr) 58px 112px 34px; }
.rp-board-list li i { width: 112px; }
/* Chapter 3: the day as a timetable board */
.rp-day { width: min(390px, 31vw); background: #FFFFFF; border-radius: 22px; padding: 18px 20px 16px; box-shadow: 0 0 0 1px var(--k-line), 0 30px 50px -40px rgba(27, 32, 8, .45); }
.rp-day-h span { font-size: 14px; }
.rp-day-h b { font-size: clamp(26px, 2.3vw, 34px); }
.rp-day-col { height: clamp(300px, 50svh, 480px); margin-left: 50px; }
.rp-hr { left: -50px; font-size: 13px; }
.rp-blk span { font-size: 13px; }
.rp-ticked span { display: inline-block; margin: 4px 4px 0 0; padding: 3px 9px; border-radius: 999px; background: var(--k-bg-2); color: var(--k-ink); font-size: 12px; }
.rp-sd-say { display: grid; font-size: 13px; font-weight: 600; color: var(--k-ink); margin-top: 2px; }
html.k-motion .rp-sd-say { overflow: hidden; }
/* Heights: a roomier figure; the ruler's figures stay above the ride's line */
.rp-heights .k-band-grid { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); }
@media (min-width: 1200px) { .rp-post-fig { grid-template-columns: 300px minmax(0, 1fr); } .rp-postwrap { width: 300px; } .rp-kids { right: 108px; } }
.rp-min { z-index: 2; }
.rp-ruler span { z-index: 3; background: #FFFFFF; padding: 0 4px; border-radius: 3px; }
.rp-hcard { min-width: 0; }
@media (max-width: 899px) { .rp-heights .k-band-grid { grid-template-columns: minmax(0, 1fr); } }
/* Quieter days: one height for every label row, so the columns line up */
.rp-lvl { min-height: 34px; align-items: flex-end; }
.rp-cal-key { margin: 30px 0 0 !important; }
.rp-cal { margin-top: 14px; }
@media (max-width: 899px) { .rp-lvl { min-height: 0; } }
.rp-day, .rp-flap { flex: none; }
.rp-day-h span { white-space: nowrap; }
/* Chapters 1–3, from 1100 px where the side card shows: the phone and its card share one column
   and scale to it, so the card never runs over the words beside it however wide or tall the
   window. The column takes a little more of the row, and the board list narrows its tracks
   before it would cut a ride's name short. */
@media (min-width: 1100px) {
  .rp-waits .k-stage-grid, .rp-replan .k-stage-grid { grid-template-columns: minmax(0, 4.4fr) minmax(0, 7.6fr); }
  .rp-plan.k-flip .k-stage-grid { grid-template-columns: minmax(0, 7.6fr) minmax(0, 4.4fr); }
  .rp-waits .k-visual, .rp-plan .k-visual, .rp-replan .k-visual { container-type: inline-size; gap: min(4cqw, 36px); }
  .rp-plan .k-device, .rp-replan .k-device { --k-device-w: clamp(200px, min(24vw, calc((100svh - 150px) * .46), 44cqw), 360px); }
  .rp-waits .k-device { --k-device-w: clamp(200px, min(24vw, calc((100svh - 150px) * .46), 40cqw), 360px); }
  .rp-board-list, .rp-day, .rp-flap { flex: 0 1 auto; min-width: 0; }
  .rp-board-list { container: rp-board / inline-size; }
}
@container rp-board (max-width: 419px) {
  .rp-board-list li { grid-template-columns: minmax(0, 1fr) 50px 56px 30px; column-gap: 8px; }
  .rp-board-list li i { width: 56px; }
}
/* Chapter 3 in a short window (a 1366 × 768 laptop leaves about 657 px): the day card keeps to the
   screen. It sits a little tighter, its ticked-ride chips are smaller, its timeline gives up
   height before the card would run off the bottom, and below 720 px the ride labels get smaller
   so they don't run into each other. */
@media (min-width: 1100px) and (max-height: 799px) {
  .rp-day { padding-top: 14px; padding-bottom: 12px; }
  .rp-day-h { margin-bottom: 10px !important; }
  .rp-wf { margin-top: 12px !important; }
  .rp-ticked span { margin: 3px 3px 0 0; padding: 2px 7px; font-size: 11.5px; }
  .rp-day-col { height: clamp(250px, min(50svh, 100svh - 330px), 480px); }
}
@media (min-width: 1100px) and (max-height: 719px) {
  .rp-blk span { font-size: 11.5px; line-height: 1; margin-top: 0; }
}