/* A day's Plots and Compare tabs, the Scouting page and the day maps' overlays
   (plots.js, compare.js, scouting.js, layers.js). Its own file so the pages built in
   parallel with it never edit the same stylesheet lines; the tokens are app.css's. */

/* six tabs on a day: tighter labels at phone width */
@media (max-width: 420px) { .tabbar a { font-size: 9.5px; } }

/* ---------------------------------------------------------------- Plots */
/* One run's traces against distance. Phone: the run chips, a readout pinned under the
   bar, the charts stacked. Computer: the charts two by two under a readout that spans
   them. The cursor in each chart is an element moved by a transform (plots.js). */
.pl-top { margin-bottom: 10px; }
.pl-top .chip { min-height: 36px; display: inline-flex; align-items: center; gap: 4px; }
.pl-warn { color: var(--warn); }
.chip.on .pl-warn { color: #fff; }
.pl-sticky {
  position: sticky; top: calc(var(--bar-h, 52px) + env(safe-area-inset-top)); z-index: 5;
  display: flex; gap: 10px; align-items: center; justify-content: space-between;
  margin: 0 -16px 12px; padding: 8px 16px; min-height: 62px;
  background: rgba(12, 15, 20, 0.92); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--line);
}
.pl-readout { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 4px 12px; min-width: 0; flex: 1; }
.pl-readout > div { min-width: 0; }
.pl-readout span { display: block; font-size: 10px; font-weight: 600; letter-spacing: 0.05em; text-transform: uppercase; color: var(--text-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pl-readout b { display: block; font-size: 15px; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pl-readout.idle b { color: var(--text-2); font-weight: 600; }
.pl-readout b small { margin-left: 3px; font-size: 11px; font-weight: 600; color: var(--text-2); }
.pl-readout .hot b, .pl-readout .hot span { color: #ff6bd6; }
.pl-readout .brake b { color: var(--bad); }
.pl-insets { display: flex; gap: 8px; flex: none; }
/* small enough that the pinned readout never hides much of the chart under it */
.pl-insets .wheels svg { width: 60px; height: 55px; }
.pl-insets .push-card b { font-size: 20px; }
.pl-insets > div:empty { display: none; }
.pl-clear { flex: none; width: 36px; height: 36px; border-radius: 50%; border: 0; background: var(--card-2); color: var(--text-2); display: grid; place-items: center; cursor: pointer; }
.pl-clear[hidden] { display: none; }
.pl-grid { display: grid; gap: 12px; }
.pl-grid .block { margin: 0; }
.pl-card { min-width: 0; }
.pl-card .chart { position: relative; height: 220px; }
.pl-card .chart canvas { touch-action: pan-y; -webkit-user-select: none; user-select: none; -webkit-tap-highlight-color: transparent; }
.pl-card .chart canvas:focus { outline: none; }
.pl-card .chart canvas:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 4px; }
.pl-cur { position: absolute; left: 0; top: 0; width: 1px; margin-left: -0.5px; background: rgba(255, 255, 255, 0.85); pointer-events: none; will-change: transform; }
.pl-cur[hidden] { display: none; }
.pl-nochart { display: grid; place-items: center; height: 100%; margin: 0; text-align: center; }
.pl-h { font-size: 12px !important; letter-spacing: 0.06em; text-transform: uppercase; color: var(--text-2); }
.pl-legend { display: inline-flex; gap: 10px; font-size: 12px; color: var(--text-2); white-space: nowrap; }
.pl-legend i { display: inline-block; width: 7px; height: 7px; border-radius: 50%; margin-right: 4px; }
.pl-pushes { margin-top: 12px; }
.pl-pgrid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px 16px; }
.pl-pgrid span { display: block; font-size: 11px; font-weight: 600; letter-spacing: 0.05em; text-transform: uppercase; color: var(--text-2); }
.pl-pgrid b { font-size: 22px; font-weight: 700; }
.pl-pgrid small { margin-left: 4px; font-size: 12px; color: var(--text-2); }
.pl-empty { display: grid; justify-items: center; gap: 4px; padding: 48px 16px; text-align: center; color: var(--text-2); }
.pl-empty p { margin: 0; }
.pl-empty b { color: var(--text); }
.pl-hint-touch { display: none; }
@media (hover: none) { .pl-hint-hover { display: none; } .pl-hint-touch { display: inline; } }
@media (min-width: 560px) { .pl-readout { grid-template-columns: repeat(6, minmax(0, auto)); justify-content: start; gap: 4px 20px; } .pl-readout b { font-size: 17px; } }
@media (min-width: 768px) {
  .pl-sticky { margin: 0 0 12px; border: 1px solid var(--line); border-radius: 12px; }
  .pl-card .chart { height: 240px; }
  .pl-pgrid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
@media (min-width: 1100px) {
  .pl-sticky { top: calc(var(--bar-h, 52px) + 45px + 8px); }
  .pl-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .pl-card .chart { height: 260px; }
  .pl-insets .wheels svg { width: 64px; height: 58px; }
}

.push-card { display: grid; padding: 5px 10px; border-radius: 10px; background: rgba(0, 0, 0, 0.6); border: 1px solid rgba(89, 217, 140, 0.55); line-height: 1.05; }
.push-card span { font-size: 10px; font-weight: 800; color: #59d98c; }
.push-card b { font-size: 26px; font-weight: 800; color: #fff; }
.push-card small { font-size: 10px; color: rgba(255, 255, 255, 0.85); }

.wheels { display: grid; justify-items: center; padding: 4px 5px 2px; border-radius: 10px; background: rgba(0, 0, 0, 0.78); border: 1.5px solid transparent; }
.wheels.dim { opacity: 0.45; }
.wheels > span { font-size: 9px; font-weight: 800; color: rgba(255, 255, 255, 0.85); }
.wheels text { font-size: 9px; font-weight: 600; fill: #fff; font-variant-numeric: tabular-nums; dominant-baseline: middle; }

/* ---------------------------------------------------------------- Compare */
/* Two runs, blue and red. Phone: the two picks, the map edge to edge, then Play, the
   readout, the chart and the slider, the tables below. Computer: the map and the chart
   side by side under the picks, the tables in columns under both. */
.cmp-picks { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-bottom: 12px; }
.cmp-pick {
  display: grid; justify-items: start; align-content: start; gap: 2px; text-align: left; cursor: pointer;
  min-height: 96px; padding: 10px 12px; border-radius: 12px; background: var(--card); color: var(--text);
  border: 1px solid color-mix(in srgb, var(--c) 55%, transparent);
  transition: border-color 0.15s, background 0.15s;
}
.cmp-pick:active { background: var(--card-2); }
.cmp-run { display: inline-flex; align-items: center; gap: 6px; font-weight: 600; font-size: 15px; }
.cmp-run i { width: 9px; height: 9px; border-radius: 50%; background: var(--c); }
.cmp-pick b { font-size: 24px; font-weight: 800; color: var(--c); font-variant-numeric: tabular-nums; }
.cmp-pick .good, .cmp-tbl .good { color: var(--good); }
.cmp-pick .bad, .cmp-tbl .bad { color: var(--bad); }
.cmp-main { display: grid; gap: 0; min-width: 0; }
.cmp-side { min-width: 0; }
.cmp-map-wrap { position: relative; margin: 0 -16px 10px; }
.cmp-map { position: relative; height: 300px; background: var(--card-2); overflow: hidden; }
.cmp-plain { width: 100%; height: 100%; display: block; background: #10141b; }
.cmp-mode { position: absolute; top: 8px; left: 50%; transform: translateX(-50%); z-index: 3; background: rgba(18, 22, 29, 0.85); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); }
.cmp-mode button { min-height: 34px; padding: 5px 14px; }
.cmp-wheel { position: absolute; bottom: 8px; z-index: 3; pointer-events: none; }
.cmp-wheel.l { left: 8px; }
.cmp-wheel.r { right: 8px; }
.cmp-dot { width: 14px; height: 14px; border-radius: 50%; border: 2px solid #fff; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.6); }
.cmp-controls { display: flex; gap: 8px; align-items: center; margin-bottom: 8px; min-width: 0; }
.cmp-controls .chips { padding: 2px 0; }
.cmp-controls .chip { min-height: 36px; }
.cmp-play { width: 44px; height: 44px; border-radius: 50%; border: 0; background: var(--accent); color: #fff; display: grid; place-items: center; cursor: pointer; flex: none; transition: transform 0.12s ease-out, background 0.15s; }
.cmp-play:active { transform: scale(0.94); }
.cmp-play svg { margin-left: 2px; }
.cmp-play.on svg { margin-left: 0; }
.cmp-rate { height: 36px; background: var(--card); border: 1px solid var(--line); border-radius: 999px; padding: 0 12px; flex: none; }
.cmp-rate select { font-size: 14px; padding-right: 16px; font-variant-numeric: tabular-nums; }
.cmp-rate > .ic:last-child { right: 10px; }
.cmp-readout { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 8px; min-height: 36px; }
.cmp-readout .end { font-size: 12px; font-weight: 600; color: var(--text-2); white-space: nowrap; }
.cmp-readout .end.r { text-align: right; }
.cmp-readout .mid { display: inline-flex; align-items: baseline; gap: 8px; font-size: 20px; font-weight: 800; white-space: nowrap; }
.cmp-readout .mid .u { font-size: 11px; font-weight: 600; color: var(--text-2); min-width: 18px; text-align: center; }
.cmp-readout p { grid-column: 1 / -1; margin: 0; }
.cmp-chart { position: relative; height: 240px; background: var(--card); border: 1px solid var(--line); border-radius: 12px; overflow: hidden; cursor: grab; touch-action: pan-y; -webkit-user-select: none; user-select: none; }
.cmp-chart:active { cursor: grabbing; }
.cmp-chart canvas { width: 100%; height: 100%; display: block; -webkit-tap-highlight-color: transparent; }
.cmp-chart canvas:focus { outline: none; }
.cmp-chart:has(canvas:focus-visible) { outline: 2px solid var(--accent); outline-offset: 2px; }
.cmp-zoom { position: absolute; top: 6px; left: 50px; display: flex; gap: 6px; }
.cmp-zoom button { width: 36px; height: 36px; border-radius: 10px; border: 1px solid var(--line); background: rgba(18, 22, 29, 0.88); color: var(--text); display: grid; place-items: center; cursor: pointer; }
.cmp-scrub { width: 100%; height: 32px; margin: 6px 0 0; accent-color: var(--accent); cursor: pointer; }
.cmp-tbl td.frozen { color: var(--text-2); }
.cmp-tables { margin-top: 14px; display: grid; gap: 12px; }
.cmp-tables .block { margin: 0; min-width: 0; }
.cmp-sk { display: block; border-radius: 12px; background: linear-gradient(100deg, var(--card) 30%, var(--card-2) 50%, var(--card) 70%) 0 0 / 300% 100%; animation: rv-shimmer 1.3s linear infinite; }
.cmp-sk-pick { height: 96px; }
.cmp-sk-map { margin-bottom: 12px; }
.cmp-mapsk { position: absolute; inset: 0; display: block; background: linear-gradient(100deg, var(--card-2) 30%, #262e3c 50%, var(--card-2) 70%) 0 0 / 300% 100%; animation: rv-shimmer 1.3s linear infinite; }
@media (hover: hover) {
  .cmp-pick:hover { border-color: var(--c); }
  .cmp-play:hover { background: var(--accent-2); }
  .cmp-zoom button:hover, .cmp-rate:hover { border-color: var(--text-3); }
}
@media (min-width: 768px) {
  .cmp-map-wrap { margin: 0 0 12px; }
  .cmp-map { height: 380px; border-radius: var(--radius); }
  .cmp-chart { height: 280px; }
  .cmp-tables { grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: start; }
}
@media (min-width: 1100px) {
  .cmp-main { grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: 16px; align-items: start; }
  .cmp-map-wrap { position: sticky; top: calc(var(--bar-h, 52px) + 45px + 12px); margin: 0; }
  .cmp-map { height: 460px; margin: 0; }
  .cmp-chart { height: 300px; }
  .cmp-tables { grid-template-columns: repeat(auto-fit, minmax(440px, 1fr)); }
  .cmp-controls { flex-wrap: wrap; }
  .cmp-controls .chips { flex: 1 1 auto; flex-wrap: wrap; overflow: visible; }
}
@media (prefers-reduced-motion: reduce) { .cmp-sk, .cmp-mapsk { animation: none; } }

.pick-list { display: grid; margin-top: 10px; }
.pick-day { margin: 14px 0 4px; font-size: 12px; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; color: var(--text-2); }
.pick-row { display: flex; align-items: center; gap: 10px; min-height: 48px; padding: 10px 8px; border: 0; border-top: 1px solid var(--line); background: none; color: var(--text); font-size: 15px; text-align: left; cursor: pointer; border-radius: 8px; }
.pick-row.on { background: var(--accent-soft); }
.pick-row:disabled { cursor: default; color: var(--t); opacity: 0.8; }
.pick-row:disabled b { color: var(--t); }
.pick-row:focus { outline: none; }
.pick-row:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
@media (hover: hover) { .pick-row:not(:disabled):hover { background: rgba(255, 255, 255, 0.05); } }
.w58 { min-width: 54px; text-align: right; }
.dot-big { display: inline-block; width: 12px; height: 12px; border-radius: 50%; margin-right: 8px; vertical-align: 1px; }

/* ---------------------------------------------------------------- Scouting */
.view.scouting { max-width: 1100px; padding: 0; }
.sc-frame { height: calc(100vh - 56px - 68px - 40px - env(safe-area-inset-bottom)); min-height: 420px; }
.sc-frame iframe { width: 100%; height: 100%; border: 0; display: block; background: #000; }
.sc-estimate { display: flex; gap: 8px; align-items: flex-start; margin: 0; padding: 9px 16px; font-size: 12px; color: var(--text-2); border-top: 1px solid var(--line); background: var(--bg-2); }
.sc-estimate .ic { color: #ffd60a; margin-top: 1px; }
.sc-ack { max-width: 560px; margin: 0 auto; padding: 36px 20px 28px; }
.sc-flag { color: var(--accent); }
.sc-ack h1 { margin: 12px 0 8px; font-size: 26px; }
.sc-points { display: grid; gap: 14px; margin: 18px 0; padding: 16px; }
.sc-points > div { display: flex; gap: 12px; align-items: flex-start; }
.sc-points span { color: var(--accent); width: 26px; flex: none; display: grid; place-items: center; }
.sc-points p { margin: 0; font-size: 15px; }

/* ---------------------------------------------------------------- day map layers */
.layer-map { position: relative; height: 200px; margin: 0 -16px 12px; background: var(--card-2); overflow: hidden; }
.layer-map img, .layer-map svg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.layer-map text { font-size: 22px; font-weight: 700; paint-order: stroke; stroke: rgba(0, 0, 0, 0.85); stroke-width: 5px; fill: #fff; }
@media (min-width: 900px) { .layer-map { margin: 0 0 12px; height: 300px; border-radius: var(--radius); } }
.pin { display: flex; align-items: center; gap: 5px; white-space: nowrap; pointer-events: none; transform: translate(-11px, -11px); }
.pin i { width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center; background: rgba(0, 0, 0, 0.7); color: #fff; border: 1.5px solid #fff; flex: none; }
.pin.rec i { color: var(--gold); border-color: var(--gold); }
.pin span { font-size: 11px; font-weight: 700; color: #fff; text-shadow: 0 0 3px #000, 0 0 3px #000, 0 0 2px #000; line-height: 1.1; }
.pin span small { display: block; font-weight: 600; opacity: 0.9; }
.pin-layer { position: absolute; inset: 0; pointer-events: none; z-index: 2; }
.pin-layer .pin { position: absolute; }

/* ---------------------------------------------------------------- Replay (replay.js)
   A screen of its own over the day, like the phone's Replay tab. Phone and tablet: the
   bar, the map filling what is left, the strip and Play under the thumb, the options in
   a row at the bottom. Computer: the map large on the left, a side column with the live
   numbers and the options, the strip and Play under the map. */
.sheet-wrap.rv-wrap { display: block; background: var(--bg); animation: none; z-index: 60; }
.rv {
  position: absolute; inset: 0; display: grid; background: var(--bg);
  grid-template-columns: minmax(0, 1fr);
  grid-template-rows: auto minmax(0, 1fr) auto auto;
  grid-template-areas: "top" "stage" "dock" "tools";
}
.rv-in { animation: rv-in 0.22s ease-out; }
@keyframes rv-in { from { opacity: 0; transform: translateY(18px); } }
.rv-out .rv { animation: rv-out 0.18s ease-in forwards; }
@keyframes rv-out { to { opacity: 0; transform: translateY(18px); } }

.rv-top {
  grid-area: top; display: flex; align-items: center; gap: 10px; min-width: 0;
  min-height: 56px; padding: max(8px, env(safe-area-inset-top)) 12px 8px;
  background: var(--bg-2); border-bottom: 1px solid var(--line);
}
.rv-x { width: 44px; height: 44px; flex: none; border-radius: 50%; border: 0; background: var(--card-2); color: var(--text); display: grid; place-items: center; cursor: pointer; }
.rv-title { min-width: 0; display: flex; flex-direction: column; line-height: 1.2; }
.rv-title b { font-size: 16px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rv-title span { font-size: 12px; color: var(--text-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.rv-stage { grid-area: stage; position: relative; min-height: 0; overflow: hidden; background: var(--card-2); }
.rv-map { position: absolute; inset: 0; }
.rv-skel { position: absolute; inset: 0; background: linear-gradient(100deg, var(--card-2) 30%, #262e3c 50%, var(--card-2) 70%) 0 0 / 300% 100%; animation: rv-shimmer 1.3s linear infinite; }
@keyframes rv-shimmer { from { background-position: 100% 0; } to { background-position: -50% 0; } }
.rv-card { position: absolute; left: 0; top: 0; transform-origin: 0 0; will-change: transform; }
.rv-card img, .rv-card svg { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; }
.rv-card.plain { background: #10141b; border-radius: 4px; }
.rv-nomap { position: absolute; right: 8px; bottom: 8px; max-width: 58%; margin: 0; padding: 4px 10px; border-radius: 999px; background: rgba(0, 0, 0, 0.6); color: rgba(255, 255, 255, 0.85); font-size: 11px; z-index: 2; }

/* on the map: the live capsule and the push card top left, the wheels bottom left */
.rv-hud { position: absolute; top: 10px; left: 10px; right: 64px; z-index: 3; display: grid; gap: 8px; justify-items: start; pointer-events: none; }
.rv-pill {
  display: inline-flex; align-items: baseline; gap: 8px; max-width: 100%; overflow: hidden; white-space: nowrap;
  padding: 6px 12px; border-radius: 999px; background: rgba(0, 0, 0, 0.6);
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); font-size: 13px; font-weight: 600;
}
.rv-pv { color: #ff6b3b; font-size: 17px; font-weight: 800; }
.rv-pu { color: rgba(255, 107, 59, 0.85); font-size: 11px; margin-left: -4px; }
.rv-ps { color: #ff6bd6; font-size: 15px; }
.rv-ps.hot { color: #ff4d4d; }
.rv-verdict { font-size: 11px; font-weight: 800; letter-spacing: 0.04em; color: #9e59ff; }
.rv-verdict.slide { color: #ff4d4d; }
.rv-pg { color: #fff; font-size: 13px; overflow: hidden; text-overflow: ellipsis; }
.rv-pg.lost, .rv-cells b.lost { color: var(--bad); }
.rv-pg.gained, .rv-cells b.gained { color: var(--good); }
.rv-wheels { position: absolute; left: 10px; bottom: 10px; z-index: 3; pointer-events: none; }
.rv-wheels .wheels svg { width: 76px; height: 69px; }
.rv-maptools { position: absolute; top: 10px; right: 10px; z-index: 3; display: grid; gap: 8px; }
.rv-mb { width: 44px; height: 44px; border-radius: 12px; border: 0; background: rgba(0, 0, 0, 0.6); color: #fff; display: grid; place-items: center; cursor: pointer; backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); }

/* the board: a deck turned to the board's heading, a small arrow at the travel */
.rv-pin { position: relative; width: 56px; height: 56px; pointer-events: none; }
.rv-deck { position: absolute; left: 19px; top: 8px; width: 18px; height: 40px; filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.7)); will-change: transform; }
.rv-deck svg { display: block; }
.rv-pin.ghost .rv-deck svg { transform: scale(1.35); opacity: 0.9; }
.rv-pin.rv-me.sliding .rv-deck { filter: drop-shadow(0 0 5px rgba(255, 77, 77, 0.95)); }
.rv-chev { position: absolute; inset: 0; will-change: transform; }
.rv-chev::before { content: ""; position: absolute; left: 50%; top: -3px; margin-left: -6px; border: 6px solid transparent; border-bottom: 9px solid #4da3ff; border-top: 0; filter: drop-shadow(0 0 1px #000); }
.rv-pin.rv-oncard { position: absolute; left: -28px; top: -28px; z-index: 2; will-change: transform; }

/* the numbers, on a computer only (the capsule carries them on a phone) */
.rv-live { grid-area: live; display: none; }
.rv-big b { font-size: 56px; font-weight: 800; line-height: 1; letter-spacing: -0.02em; }
.rv-big span { margin-left: 6px; color: var(--text-2); font-size: 15px; }
.rv-cells { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px 16px; margin-top: 16px; }
.rv-cells span { display: block; font-size: 11px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--text-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rv-cells b { font-size: 22px; font-weight: 700; }
.rv-cells .hot b, .rv-cells .hot span { color: #ff4d4d; }
.rv-cells b.slide { color: #ff4d4d; }
.rv-cells b.brake { color: var(--bad); }
.rv-cells b.gain { color: var(--good); }
.rv-cells [data-o="verdict"] { color: var(--text-2); }
.rv-cells [data-o="verdict"].slide { color: #ff4d4d; }
.rv-cells [data-o="verdict"].brake { color: #b48cff; }

/* the options: a row of pills on a phone, labelled fields on a computer */
.rv-tools {
  grid-area: tools; display: flex; gap: 8px; align-items: center; min-width: 0;
  overflow-x: auto; scrollbar-width: none; overscroll-behavior-x: contain;
  padding: 6px 12px calc(10px + env(safe-area-inset-bottom)); background: var(--bg-2);
}
.rv-tools::-webkit-scrollbar { display: none; }
.rv-field { display: contents; }
.rv-field > span:first-child { display: none; }
.rv-sel, .rv-tog {
  flex: none; position: relative; display: inline-flex; align-items: center; gap: 6px; height: 40px;
  padding: 0 12px; border-radius: 999px; border: 1px solid var(--line); background: var(--card);
  color: var(--text); font-size: 14px; cursor: pointer;
}
.rv-sel select { font-size: 14px; padding-right: 18px; max-width: 46vw; text-overflow: ellipsis; }
@media (max-width: 767px) {
  .rv-tools { gap: 6px; }
  .rv-sel { padding: 0 10px; gap: 5px; }
  .rv-sel select { max-width: 28vw; padding-right: 16px; }
  .rv-runsel > .ic:first-child { display: none; }
}
.rv-sel > .ic:first-child { color: var(--text-2); }
.rv-sel > .ic:last-child { right: 10px; }
.rv-tog .ic { color: var(--text-2); }
.rv-tog.on { background: var(--accent-soft); border-color: rgba(255, 90, 42, 0.55); color: var(--accent-2); }
.rv-tog.on .ic { color: var(--accent); }
.rv-keys { display: none; }
.rv-camfield { display: none; }
.rv-mb.on { background: rgba(255, 90, 42, 0.9); }

/* the dock: Play (and its speed) beside the strip, which seeks on a tap or a drag */
.rv-dock { grid-area: dock; display: grid; grid-template-columns: auto minmax(0, 1fr); grid-template-areas: "tp scrub"; gap: 12px; align-items: center; padding: 10px 12px 4px; border-top: 1px solid var(--line); background: var(--bg-2); }
.rv-scrub { grid-area: scrub; min-width: 0; }
.rv-times { display: flex; justify-content: space-between; gap: 8px; font-size: 12px; color: var(--text-2); margin-bottom: 4px; }
.rv-strip { position: relative; height: 58px; border-radius: 10px; background: var(--card); border: 1px solid var(--line); overflow: hidden; touch-action: none; cursor: ew-resize; user-select: none; -webkit-user-select: none; }
.rv-strip canvas { width: 100%; height: 100%; display: block; }
.rv-cursor { position: absolute; left: 0; top: 0; bottom: 0; width: 2px; margin-left: -1px; background: #fff; box-shadow: 0 0 3px rgba(0, 0, 0, 0.8); will-change: transform; pointer-events: none; }
.rv-transport { grid-area: tp; display: grid; justify-items: center; gap: 6px; }
.rv-play { width: 56px; height: 56px; border-radius: 50%; border: 0; background: var(--accent); color: #fff; display: grid; place-items: center; cursor: pointer; transition: transform 0.12s ease-out, background 0.15s; }
.rv-play:active { transform: scale(0.94); }
.rv-play svg { margin-left: 2px; }
.rv-play.on svg { margin-left: 0; }
.rv-rate { height: 28px; padding: 0 8px; border-radius: 8px; background: var(--card); border: 1px solid var(--line); font-size: 13px; }
.rv-rate select { font-size: 13px; padding-right: 14px; font-variant-numeric: tabular-nums; }
.rv-rate > .ic:last-child { right: 6px; }

.rv button:focus-visible, .rv select:focus-visible, .rv-strip:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.rv button:focus:not(:focus-visible) { outline: none; }
@media (hover: hover) {
  .rv-x:hover, .rv-mb:hover { background: #2a3240; }
  .rv-sel:hover, .rv-tog:hover, .rv-rate:hover { border-color: var(--text-3); }
  .rv-play:hover { background: var(--accent-2); }
}

@media (min-width: 768px) {
  .rv-strip { height: 64px; }
  .rv-tools { justify-content: center; }
  .rv-wheels .wheels svg { width: 92px; height: 84px; }
}

/* the computer: the map on the left, a side column on the right */
@media (min-width: 1100px) {
  .rv {
    grid-template-columns: minmax(0, 1fr) 340px;
    grid-template-rows: auto auto minmax(0, 1fr) auto;
    grid-template-areas: "stage top" "stage live" "stage tools" "dock tools";
  }
  .rv-top, .rv-live, .rv-tools { border-left: 1px solid var(--line); background: var(--bg-2); }
  .rv-top { padding: 14px 16px; border-bottom: 0; }
  .rv-title b { font-size: 18px; }
  .rv-title span { font-size: 13px; }
  .rv-live { display: block; padding: 8px 20px 18px; border-bottom: 1px solid var(--line); }
  .rv-pill { display: none; }
  .rv-hud { right: 70px; }
  .rv-tools { flex-direction: column; align-items: stretch; justify-content: flex-start; gap: 14px; overflow: auto; padding: 18px 20px 20px; }
  .rv-field, .rv-camfield { display: grid; gap: 6px; }
  .rv-chase { display: none; }
  .rv-field > span:first-child { display: block; font-size: 11px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--text-2); }
  .rv-sel, .rv-tog { width: 100%; border-radius: 10px; }
  .rv-sel select { flex: 1; max-width: none; width: 100%; }
  .rv-keys { display: block; margin: auto 0 0; font-size: 12px; color: var(--text-3); line-height: 1.5; }
  .rv-dock { padding: 12px 16px 14px; }
  .rv-transport { grid-auto-flow: column; align-items: center; gap: 10px; }
}
/* a phone on its side: the map takes the height, the controls a column beside it */
@media (max-width: 1099px) and (max-height: 560px) and (orientation: landscape) {
  .rv {
    grid-template-columns: minmax(0, 1fr) min(320px, 42vw);
    grid-template-rows: auto auto minmax(0, 1fr);
    grid-template-areas: "stage top" "stage dock" "stage tools";
  }
  .rv-stage { padding-left: env(safe-area-inset-left); }
  .rv-top, .rv-dock, .rv-tools { border-left: 1px solid var(--line); padding-right: max(12px, env(safe-area-inset-right)); }
  .rv-top { min-height: 0; padding-top: max(6px, env(safe-area-inset-top)); padding-bottom: 6px; border-bottom: 0; }
  .rv-x { width: 40px; height: 40px; }
  .rv-dock { border-top: 0; padding-top: 4px; }
  .rv-strip { height: 52px; }
  .rv-play { width: 48px; height: 48px; }
  .rv-tools { flex-wrap: wrap; align-content: flex-start; overflow: auto; justify-content: flex-start; }
  .rv-sel select { max-width: 24vw; }
  .rv-wheels .wheels svg { width: 64px; height: 58px; }
}
@media (prefers-reduced-motion: reduce) {
  .rv-in, .rv-out .rv, .rv-skel { animation: none; }
}