/* Replay page (read-only training replay). Theme-aware via ladder.css variables. */
.rp-card { display: flex; flex-direction: column; min-height: 0; }
/* --rp-banner-h: the sticky banner's exact height, shared with what pins under it (the phone P/L
   strip, the head's scroll margin) — a font-derived height let the strip ride 2 px over the banner */
.rp-card { --rp-banner-h: 32px; }
.rp-banner {
  position: sticky; top: 0; z-index: 5; padding: 0 14px; text-align: center; box-sizing: border-box;
  height: var(--rp-banner-h); line-height: calc(var(--rp-banner-h) - 2px); white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  font-weight: 700; letter-spacing: .08em; font-size: 12px; text-transform: uppercase;
  background: var(--gold); color: #000; border-bottom: 2px solid var(--down);
}
#rp-head { scroll-margin-top: calc(var(--rp-banner-h) + 6px); }
.rp-body { display: grid; grid-template-columns: 280px 1fr; gap: 12px; padding: 12px; min-height: 0; flex: 1; }
.rp-side { display: flex; flex-direction: column; gap: 8px; min-height: 0; overflow: auto; border-right: 1px solid var(--line); padding-right: 10px; }
.rp-list { display: flex; flex-direction: column; gap: 4px; }
.rp-item {
  text-align: left; padding: 6px 8px; border: 1px solid var(--line); border-radius: 6px;
  background: var(--bg-2, transparent); color: var(--ink); cursor: pointer; font-size: 12px; line-height: 1.4;
}
.rp-item:hover { border-color: var(--steel); }
.rp-item.sel { border-color: var(--gold); box-shadow: inset 3px 0 0 var(--gold); }
.rp-item .up { color: var(--up); font-weight: 600; }
.rp-item .down { color: var(--down); font-weight: 600; }
.rp-tag { font-size: 10px; padding: 0 5px; border-radius: 8px; border: 1px solid var(--steel); color: var(--steel); }
.rp-err { color: var(--down); }
.rp-main { display: grid; gap: 10px; min-width: 0; align-content: start; }
.rp-tabs { display: flex; gap: 6px; }
.rp-chart { min-height: 260px; border: 1px solid var(--line); border-radius: 6px; padding: 8px; }
.rp-transport { min-height: 32px; }
.rp-panels { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 10px; }
.rp-panel { min-height: 120px; border: 1px solid var(--line); border-radius: 6px; padding: 8px; overflow: auto; }
.rp-insights { min-height: 0; }

/* ---- player (replay_player.js) ------------------------------------------- */
.rp-head { font-size: 12px; color: var(--ink2); line-height: 1.6; }
.rp-head b { color: var(--ink); }
.rp-chip { font-size: 10.5px; padding: 1px 7px; border-radius: 9px; border: 1px solid var(--line2); white-space: nowrap; }
.rp-chip.warn { border-color: var(--warn); color: var(--warn); background: var(--warn-bg); }
.rp-acre-off { display: inline-block; font-size: 11px; padding: 1px 8px; border-radius: 9px; border: 1px dashed var(--ink3); color: var(--ink3); }
.rp-play { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 10px; min-width: 0; }
.rp-centre { display: grid; gap: 8px; min-width: 0; align-content: start; }
.rp-stage { display: flex; height: 560px; border: 1px solid var(--line); border-radius: 8px; background: var(--bg2); overflow: hidden; }
.rp-stage .rp-chart { flex: 1; min-width: 0; min-height: 0; border: 0; border-radius: 0; padding: 0; position: relative; }
.rp-stage .rp-chart > em { display: block; padding: 10px; }
.rp-lwc { position: absolute; inset: 0; }
.rp-stage .ladder-rail.rp-rail { width: 240px; height: auto; }
/* a resting box needs "B2 stop 3,924.40" in ~110 px: tighter spacing, and the redundant "stop"
   word goes (the dashed border already says pending) so the price is never clipped */
.rp-rail .rung { gap: 4px; padding: 0 5px; }
.rp-rail .rung:not(.filled) .u { display: none; }
/* compact rail: the closed box's ✓/✗ already gives the sign, so the +/− glyph goes */
.rp-rail .rung .rp-ck + b + .pl { display: none; }
/* strip labels live in the masked axis column beside their strip: never over data, flags or markers */
.rp-pane-lbl { position: absolute; right: 4px; z-index: 2; font: 500 9px/1.1 var(--mono); color: var(--ink3); pointer-events: none;
  text-transform: uppercase; letter-spacing: .03em; text-align: right; }
.rp-pane-lbl i { font-style: normal; text-transform: none; } .rp-pane-lbl .r { color: var(--steel); } .rp-pane-lbl .n { color: var(--gold); }
.rp-axis-mask { position: absolute; right: 0; z-index: 2; background: var(--bg2); border-left: 1px solid var(--line); pointer-events: none; }
.rp-badges { position: absolute; inset: 0; z-index: 4; pointer-events: none; overflow: hidden; }
.rp-flags { position: absolute; left: 0; right: 0; top: calc(70% - 17px); height: 16px; z-index: 3; pointer-events: none; }
.rp-flag { position: absolute; transform: translateX(-50%); pointer-events: auto; cursor: pointer; font: 600 9px/14px var(--mono);
  padding: 0 4px; border-radius: 3px; border: 1.2px solid var(--warn); color: var(--warn); background: var(--bg2); white-space: nowrap; }
.rp-flag.real { background: var(--warn); color: var(--bg); }          /* filled = a real ACRE action */
.rp-flag.hyp { border-style: dashed; background: transparent; }        /* outlined = shadow, "would have" */

/* replay-only rung states over paintRail's boxes */
.rung.never { border-style: dotted; opacity: .55; background: none; }
.rung.st-closed { opacity: .8; }
.rung.st-closed.win { box-shadow: inset 0 0 0 1px var(--up); }
.rung.st-closed.loss { box-shadow: inset 0 0 0 1px var(--down); }
.rung .rp-ck { font-style: normal; font-weight: 700; }
.rung.win .rp-ck { color: var(--up); } .rung.loss .rp-ck { color: var(--down); }
.rung.freed { background: none; border-style: dashed; opacity: .75; }
.rung.freed::after { content: "re-arm"; margin-left: auto; font-size: 9px; color: var(--ink3); }
.rung.done { opacity: .45; background: none; }
.rung.done b { text-decoration: line-through; }
.rung.fenced { background-image: repeating-linear-gradient(45deg, transparent 0 4px, color-mix(in srgb, var(--down) 35%, transparent) 4px 6px); }
.rung.fenced.fenced-hyp { background-image: none; outline: 1.4px dashed var(--down); outline-offset: -3px; }
.rung.chg { animation: rp-pulse .5s ease-in-out 3; z-index: 4; outline: 1.6px solid var(--focus); }
@keyframes rp-pulse { 50% { filter: brightness(1.6); } }
.rp-badge { position: absolute; z-index: 5; font: 600 9.5px/14px var(--mono); padding: 0 5px; border-radius: 3px; pointer-events: none;
  background: var(--focus); color: var(--bg); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rp-badge.B { background: var(--gold); color: var(--gold-ink); } .rp-badge.S { background: var(--steel); color: var(--bg); }

/* transport */
.rp-tbar { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.rp-tbar .btn { min-width: 34px; height: 30px; padding: 0 8px; }
.rp-tbar .btn[aria-pressed="true"] { border-color: var(--gold); color: var(--gold); }
.rp-pp { min-width: 46px !important; font-weight: 700; }
.rp-speeds { display: inline-flex; gap: 2px; }
.rp-ho, .rp-filter { font-size: 12px; color: var(--ink2); }
.rp-filter summary { cursor: pointer; }
.rp-filter[open] { position: relative; }
.rp-filter[open] > label { display: block; padding: 1px 0; }
.rp-clock { margin-left: auto; font: 500 11px/1 var(--mono); color: var(--ink2); }
.rp-bands { position: relative; height: 16px; margin-top: 6px; background: var(--bg3); border-radius: 3px; }
.rp-band { position: absolute; top: 0; bottom: 0; border: 0; padding: 0; font: 600 9px/16px var(--mono); color: var(--ink2);
  overflow: hidden; cursor: pointer; background: var(--bg4); border-left: 1px solid var(--line2); }
.rp-band.w { background: var(--up-bg); } .rp-band.l { background: var(--down-bg); }
.rp-band.cur { outline: 1.5px solid var(--gold); z-index: 1; color: var(--ink); }
.rp-hideout .rp-band.w, .rp-hideout .rp-band.l { background: var(--bg4); }
.rp-scrub { position: relative; margin-top: 4px; }
.rp-scrub input[type=range] { width: 100%; margin: 0; }
.rp-ticks { position: relative; height: 8px; }
.rp-tick { position: absolute; top: 0; width: 2px; height: 8px; background: var(--ink3); transform: translateX(-1px); }
.rp-tick.ty-fill { background: var(--gold); } .rp-tick.ty-close, .rp-tick.ty-target { background: var(--up); }
.rp-tick.ty-rescue { background: var(--warn); }
.rp-tick.fut { opacity: .35; }
.rp-hideout .rp-tick.fut { visibility: hidden; }
.rp-hideout .rp-filter .rp-fty-out { display: none; }

/* side panels */
.rp-play .rp-panels { grid-template-columns: 1fr; align-content: start; }
.rp-panel h4 { margin: 0 0 6px; font-size: 12.5px; color: var(--ink2); }
.rp-dl { display: grid; grid-template-columns: auto 1fr; gap: 3px 10px; margin: 0; font-size: 12px; }
.rp-dl dt { color: var(--ink2); }
.rp-dl dd { margin: 0; text-align: right; font: 12px/1.4 var(--mono); font-variant-numeric: tabular-nums; }
.rp-dl .up { color: var(--up); } .rp-dl .down { color: var(--down); } .rp-dl .warn { color: var(--warn); }
.rp-est { font-style: italic; }
.rp-src { font: 600 9.5px/1 var(--mono); padding: 1px 5px; border-radius: 8px; border: 1px solid var(--line2); }
.rp-src.est { color: var(--warn); border-color: var(--warn); font-style: italic; }
.rp-src.broker { color: var(--up); border-color: var(--up); }
.rp-acre-strip { display: flex; gap: 2px; margin-bottom: 6px; flex-wrap: wrap; }
.rp-acre-strip span { font: 600 9px/1 var(--mono); padding: 3px 4px; border-radius: 3px; color: var(--ink3); background: var(--bg3); }
.rp-acre-strip span.on { color: var(--bg); background: var(--warn); }
.rp-hyp, .rp-dec.hyp { border: 1px dashed var(--warn); color: var(--warn); padding: 0 4px; border-radius: 3px; }
.rp-dec.real { background: var(--warn); color: var(--bg); padding: 0 4px; border-radius: 3px; }
.rp-hist { margin-top: 8px; font-size: 12px; }
.rp-hist ol { list-style: none; margin: 4px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 2px 4px; }
.rp-hist li { cursor: pointer; font: 11.5px/1.5 var(--mono); }
.rp-hist li + li::before { content: "→ "; color: var(--ink3); }
.rp-hist .up { color: var(--up); } .rp-hist .down { color: var(--down); }
.rp-logp { max-height: 300px; display: flex; flex-direction: column; }
.rp-evs { overflow: auto; position: relative; min-height: 0; flex: 1; }
.rp-ev { font-size: 11.5px; padding: 2px 4px; border-radius: 3px; cursor: pointer; line-height: 1.35; }
.rp-ev .tm { font-family: var(--mono); color: var(--ink3); }
.rp-ev:hover { background: var(--bg3); }
.rp-ev.cur { background: var(--gold-bg); box-shadow: inset 2px 0 0 var(--gold); }
.rp-ev.fut { opacity: .45; }
.rp-ev.fut { color: var(--ink3); cursor: pointer; }
.rp-hideout .rp-ev.fut { display: none; }

/* ---- insights + compare (replay_insights.js) ------------------------------- */
.rp-insights { border-top: 1px solid var(--line); padding-top: 8px; display: grid; gap: 10px; }
.rp-ins-bar { display: flex; align-items: center; gap: 10px; justify-content: space-between; }
.rp-ins-bar h3, .rp-ins-bar h4 { margin: 0; font-size: 13px; color: var(--ink2); text-transform: uppercase; letter-spacing: .06em; }
.rp-ins-body { display: grid; grid-template-columns: repeat(auto-fit, minmax(420px, 1fr)); gap: 10px; }
.rp-ins-int { grid-column: 1 / -1; }
.rp-ins-sec { border: 1px solid var(--line); border-radius: 6px; padding: 8px; min-width: 0; }
.rp-ins-sec h4 { margin: 0 0 6px; font-size: 12.5px; color: var(--ink2); }
.rp-ins-sec h5 { margin: 6px 0 4px; font-size: 11.5px; color: var(--ink3); text-transform: uppercase; letter-spacing: .05em; }
.rp-sec > summary { cursor: pointer; font-size: 12.5px; font-weight: 600; color: var(--ink2); padding: 2px 0; list-style-position: inside; }
.rp-sec > summary:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; border-radius: 3px; }
.rp-sec[open] > summary { margin-bottom: 6px; }
.rp-ins-hidden { display: none; grid-column: 1 / -1; margin: 0; }
.rp-hideout .rp-ins-body > :not(.rp-ins-hidden), .rp-hideout .rp-ins-trend, .rp-hideout .rp-cmp { display: none; }
.rp-hideout .rp-ins-hidden { display: block; }
.rp-ins-trend .rp-ins-hidden { display: none !important; }   /* desktop: the body's note covers it */
.rp-int { display: flex; flex-wrap: wrap; gap: 4px; }
.rp-kpi { font: 600 11px/1.6 var(--mono); padding: 1px 8px; border-radius: 10px; border: 1px solid var(--line2); color: var(--ink2); background: none; }
.rp-kpi.pass { border-color: var(--up); color: var(--up); }
.rp-kpi.fail { border-color: var(--down); color: var(--down); background: var(--down-bg); cursor: pointer; }
.rp-kpi.fail:hover { filter: brightness(1.25); }
.rp-tscroll { overflow-x: auto; }
.rp-mt { border-collapse: collapse; width: 100%; font-size: 12px; }
.rp-mt th, .rp-mt td { padding: 3px 6px; border-bottom: 1px solid var(--line); text-align: left; vertical-align: top; }
.rp-mt td { font: 12px/1.4 var(--mono); font-variant-numeric: tabular-nums; }
.rp-cmpt td { white-space: nowrap; }
.rp-mt thead th { color: var(--ink3); font-weight: 600; font-size: 11px; }
.rp-mt tbody th { color: var(--ink2); font-weight: 500; white-space: nowrap; }
.rp-mt .up { color: var(--up); } .rp-mt .down { color: var(--down); }
.rp-flagw { color: var(--warn); }
.rp-trend { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 6px 14px; }
.rp-trend > div { min-width: 0; }
.rp-ins-dl { grid-template-columns: auto 1fr; }
.rp-find { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.rp-find li { font-size: 12.5px; line-height: 1.45; padding: 5px 8px; border-radius: 5px; border-left: 3px solid var(--line2); background: var(--bg3); }
.rp-find li.strength { border-left-color: var(--up); }
.rp-find li.weakness { border-left-color: var(--down); }
.rp-find li.info { border-left-color: var(--steel); }
.rp-k-strength { color: var(--up) !important; } .rp-k-weakness { color: var(--down) !important; }
.rp-low { font: 600 10px/1 var(--mono); padding: 2px 6px; border-radius: 8px; border: 1px dashed var(--warn); color: var(--warn); white-space: nowrap; }
.rp-show { height: 24px; padding: 0 8px; font-size: 11.5px; margin-left: 4px; }
.rp-cmp { border: 1px solid var(--steel); border-radius: 6px; padding: 8px; }
.rp-cmp-list { display: grid; gap: 4px; margin: 6px 0 8px; font-size: 12px; max-height: 220px; overflow: auto; }

/* stacked-layout widgets: hidden on desktop / tablet landscape */
.rp-tabs, .rp-cyclesel, .rp-pstrip { display: none; }
.rp-pstrip { position: sticky; top: var(--rp-banner-h); z-index: 6; gap: 14px; justify-content: space-around; padding: 6px 10px;
  background: var(--bg2); border: 1px solid var(--line); border-radius: 6px; font-size: 12px; white-space: nowrap; overflow: hidden; }
.rp-pstrip:empty { display: none !important; }
.rp-pstrip i { font-style: normal; color: var(--ink3); font-size: 10.5px; text-transform: uppercase; }
.rp-pstrip b { font: 600 13px/1 var(--mono); } .rp-pstrip .up { color: var(--up); } .rp-pstrip .down { color: var(--down); }
.rp-stage, .rp-rail { -webkit-touch-callout: none; -webkit-user-select: none; user-select: none; }

/* tablet landscape keeps the desktop sidebar; the panels move under the chart so chart + rail
 * get the full width (side by side they left the plot narrower than the rail) */
@media (min-width: 900px) and (max-width: 1199px) and (min-height: 501px) and (orientation: landscape) {
  .rp-body { grid-template-columns: 220px 1fr; }
  .rp-play { grid-template-columns: 1fr; }
  .rp-play .rp-panels { grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }
  .rp-stage .ladder-rail.rp-rail { width: 210px; }
}

/* stacked layout (spec §5.3) — phones in either orientation (short landscape screens too) and
 * tablet portrait; the phone blocks below add compact sizes. replay_player.js mirrors this
 * query (STACK_MQ) for the chart's touch options. */
@media (max-width: 759px), (min-width: 760px) and (max-width: 1199px) and (orientation: portrait), (max-height: 500px), (min-width: 760px) and (max-width: 899px) {
  .rp-body { grid-template-columns: 1fr; }
  .rp-stage { height: clamp(260px, 62vh, 560px); }
  .rp-side { border-right: 0; padding-right: 0; max-height: 26vh; }
  .rp-play { display: contents; }
  .rp-head { order: 1; } .rp-cyclesel { order: 2; } .rp-pstrip { order: 3; } .rp-centre { order: 4; }
  .rp-tabs { order: 5; } .rp-panels { order: 6; } .rp-insights { order: 7; }
  .rp-cyclesel { display: block; min-height: 44px; font-size: 14px; }
  .rp-pstrip { display: flex; }
  .rp-tabs { display: flex; overflow-x: auto; gap: 4px; scroll-snap-type: x mandatory; }
  .rp-tab { flex: 1 0 auto; min-height: 44px; padding: 0 14px; scroll-snap-align: start; border: 1px solid var(--line);
    border-radius: 6px; background: var(--bg2); color: var(--ink2); font-size: 13px; }
  .rp-tab[aria-selected="true"] { border-color: var(--gold); color: var(--gold); box-shadow: inset 0 -2px 0 var(--gold); }
  .rp-panels { grid-template-columns: 1fr; }
  .rp-main[data-tab] .rp-panels > .rp-panel { display: none; }
  .rp-main[data-tab="rungs"] #rp-rungdetail, .rp-main[data-tab="pnl"] #rp-pnl, .rp-main[data-tab="acre"] #rp-acre { display: block; }
  .rp-main[data-tab="log"] #rp-log { display: flex; max-height: 60vh; }
  .rp-main[data-tab]:not([data-tab="trend"]):not([data-tab="insights"]) #rp-insights { display: none; }
  .rp-main[data-tab="trend"] #rp-insights > :not(.rp-ins-trend) { display: none; }
  .rp-main[data-tab="insights"] #rp-insights > .rp-ins-trend { display: none; }
  .rp-insights { border-top: 0; padding-top: 0; }
  .rp-kpi.fail, .rp-show, .rp-ins-bar .btn { min-height: 44px; }
  /* hide outcome: the Trend tab shows its note instead of going blank */
  .rp-hideout .rp-main[data-tab="trend"] .rp-ins-trend { display: block; }
  .rp-hideout .rp-main[data-tab="trend"] .rp-ins-trend > :not(.rp-ins-hidden) { display: none; }
  .rp-hideout .rp-main[data-tab="trend"] .rp-ins-trend .rp-ins-hidden { display: block !important; }
}
/* phone landscape / short screens: the chart fills the screen under the sticky banner + strip */
@media (max-height: 500px) {
  .rp-stage { height: max(220px, calc(100vh - 120px)); }
  .rp-stage .ladder-rail.rp-rail { width: 170px; }
  .rp-side { max-height: 40vh; }
  .rp-tbar .btn { min-width: 44px; min-height: 44px; height: auto; }
}
@media (max-width: 759px) {
  .rp-body { padding: 8px; }
  .rp-side { max-height: 24vh; }
  .rp-cyclesel { font-size: 16px; }
  .rp-pstrip { gap: 8px; padding: 5px 8px; } .rp-pstrip b { font-size: 12px; } .rp-pstrip i { font-size: 9.5px; }
  .rp-tab { padding: 0 12px; }
  .rp-ins-body { grid-template-columns: 1fr; }
  .rp-stage { height: clamp(260px, 58vh, 460px); }
  .rp-stage .ladder-rail.rp-rail { width: 112px; }
  /* metrics: "this cycle" / "this session" stacked under each metric, no sideways scroll */
  .rp-mx thead { display: none; }
  .rp-mx tr { display: grid; grid-template-columns: 1fr; padding: 4px 0; border-bottom: 1px solid var(--line); }
  .rp-mx th, .rp-mx td { border: 0; padding: 1px 6px; }
  .rp-mx td::before { content: attr(data-l); display: inline-block; min-width: 92px; color: var(--ink3);
    font: 600 9.5px/1 var(--mono); text-transform: uppercase; }
  .rp-tbar .btn { min-width: 44px; min-height: 44px; height: auto; }
  .rp-clock { margin-left: 0; width: 100%; }
  .rp-cmp .btn { min-height: 44px; }
  .rp-cmp-list label { min-height: 44px; display: flex; align-items: center; gap: 6px; }
}

/* ---- v2 page shell: grouped session list, session header ------------------ */
.rp-grp { border: 1px solid var(--line); border-radius: 6px; }
.rp-grp > summary { cursor: pointer; padding: 5px 8px; font-size: 12px; font-weight: 600; color: var(--ink2); list-style: none; }
.rp-grp > summary::before { content: "▸ "; } .rp-grp[open] > summary::before { content: "▾ "; }
.rp-grp > summary .n { font-weight: 400; color: var(--ink3); }
.rp-grp .rp-list { padding: 0 6px 6px; }
.rp-livedot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: var(--down); margin-right: 4px; animation: rp-live 1.4s ease-in-out infinite; }
@keyframes rp-live { 50% { opacity: .25; } }
.rp-sesshead { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; font-size: 12px; color: var(--ink2); order: 0; }
.rp-sesshead b { color: var(--ink); }
.rp-sesshead .rp-chip.live { border-color: var(--down); color: var(--down); }
.rp-sesshead button { font-size: 11px; padding: 2px 9px; border: 1px solid var(--line2); border-radius: 6px; background: var(--bg2); color: var(--ink); cursor: pointer; }
.rp-sesshead button:disabled, .rp-sesshead button.grey { opacity: .45; cursor: not-allowed; }

/* ---- v2 whole-session UI (replay_timeline.js): cycle strip, cycle card, full screen ---- */
/* the strip under the chart's time axis supersedes the transport's percent bands */
#rp-transport .rp-bands { display: none; }
.rp-strip { position: relative; height: 20px; overflow: hidden; background: var(--bg3); border-radius: 3px; touch-action: pan-y; cursor: ew-resize; }
.rp-strip:empty { display: none; }
.rp-strip-in { position: absolute; top: 0; bottom: 0; }
.rp-sband { top: 2px; bottom: 2px; border-radius: 2px; line-height: 16px; text-align: left; padding-left: 3px; white-space: nowrap; }
.rp-sband.o { background-color: var(--bg4); }
.rp-sband.open { background-image: repeating-linear-gradient(135deg, transparent 0 5px, color-mix(in srgb, var(--steel) 40%, transparent) 5px 8px); }
.rp-sband.cur { outline: 2px solid var(--gold); outline-offset: -1px; color: var(--ink); filter: brightness(1.35); z-index: 2; }
.rp-hideout .rp-sband, .rp-hideout .rp-sband.w, .rp-hideout .rp-sband.l { background-color: var(--bg4); }
.rp-sph { position: absolute; top: 0; bottom: 0; width: 2px; margin-left: -1px; background: var(--gold); pointer-events: none; z-index: 3; }
.rp-cyclecard { min-height: 0; }
.rp-cyclecard .rp-int { margin-top: 6px; }
.rp-cyclecard .rp-kpi { font-size: 10.5px; padding: 0 6px; }
.rp-cc-hid { display: none; margin: 6px 0 0; font-size: 11.5px; }
.rp-hideout .rp-cyclecard .rp-out { display: none; }
.rp-hideout .rp-cc-hid { display: block; }
.rp-fsbtn { font-size: 15px; }
/* full screen: the Fullscreen API's top layer, or the fixed overlay fallback (iOS / rejected) */
.rp-centre:fullscreen, .rp-centre.rp-fs { position: fixed; inset: 0; z-index: 10000; box-sizing: border-box; width: 100%; height: 100%;
  padding: 8px; background: var(--bg); grid-template-rows: minmax(0, 1fr) auto auto; align-content: stretch; overflow: auto; }
.rp-centre:fullscreen .rp-stage, .rp-centre.rp-fs .rp-stage { height: auto; min-height: 200px; }
.rp-fs-lock, .rp-fs-lock body { overflow: hidden; }
@media (max-width: 759px), (min-width: 760px) and (max-width: 1199px) and (orientation: portrait), (max-height: 500px), (min-width: 760px) and (max-width: 899px) {
  .rp-main[data-tab="pnl"] #rp-cyclecard, .rp-main[data-tab="pnl"] #rp-gauge { display: block; }
  .rp-strip { height: 28px; } .rp-sband { line-height: 24px; }
}

/* Cycle basket gauge (ladder.js gaugeHTML) at the top of the right column */
.rp-gauge { min-height: 0; }
.rp-gauge .gauge { max-width: 200px; }
.rp-gauge .g-big { font-size: 24px; }
.rp-gauge .g-why { font-size: 12px; margin: 6px 0 0; }