.replay-layout{display:grid;grid-template-columns:minmax(0,1fr) minmax(220px,280px);gap:20px;align-items:start}.replay-layout>*{min-width:0}.replay-ranking{padding:16px;border:1px solid #36515d;border-radius:12px;background:#102733}.replay-ranking h4{margin:0 0 12px}.replay-ranking ol{padding-left:22px;max-height:340px;overflow:auto}.replay-ranking li{padding:10px 0;border-bottom:1px solid #36515d}.replay-ranking li span{display:block;margin-top:5px;font-size:.76rem}.replay-leader{font-size:.8rem;color:#78ebc4}.replay-transport{display:flex;align-items:center;gap:8px;flex-wrap:wrap}.replay-transport button,.replay-events button{border:1px solid #568d9c;background:#102d3b;color:#e5f2f5;border-radius:8px;padding:10px 12px;cursor:pointer}.replay-transport button:disabled{opacity:.45;cursor:default}.replay-transport input[type=range]{flex:1;min-width:150px;accent-color:#78ebc4}.replay-transport select{width:auto;min-width:80px}.replay-status{font-variant-numeric:tabular-nums;font-size:.82rem;color:#b8d5de}.replay-error{color:#f3c96a}.replay-error:empty{display:none}.replay-cursor{stroke:#e5f2f5;stroke-width:1;stroke-dasharray:3 4}.replay-leader-marker{stroke:#f3c96a;stroke-width:1.5;stroke-dasharray:6 4}.replay-events{display:flex;flex-wrap:wrap;gap:10px;align-items:center;font-size:.78rem;margin-top:16px}.replay-events strong{flex-basis:100%}.replay-events button{text-align:left;font-size:.76rem}.replay-transport :focus-visible,.replay-events :focus-visible{outline:2px solid #78ebc4;outline-offset:3px}@media(max-width:850px){.replay-layout{grid-template-columns:1fr}.replay-ranking ol{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 24px;max-height:250px}.replay-transport input[type=range]{order:5;flex-basis:100%}}@media(prefers-reduced-motion:reduce){.replay-layout *{animation:none!important;transition:none!important}}

.replay-rail .studio-choices{flex-wrap:nowrap!important}.workspace-ready #panel-studio>.comparison-controls{display:none}.workspace-ready #studioOverlays{max-height:85px;overflow:auto;padding:6px;gap:8px}.workspace-ready #studioOverlays label{font-size:.67rem}.workspace-ready .replay-rail{max-height:500px;overflow:auto}.workspace-ready .replay-rail .studio-choices{max-height:190px}.workspace-ready .studio-surface .surface-heading{margin-bottom:8px}.replay-rail{display:grid;gap:16px}.replay-rail .studio-choices{display:flex;flex-direction:column;gap:8px;max-height:330px;overflow:auto;margin:0;min-width:0;padding:12px;border:1px solid #36515d;border-radius:12px}.replay-rail .studio-choices strong{margin-top:8px}.studio-overlays{grid-column:1/-1;display:flex;flex-wrap:wrap;gap:12px;border:1px solid #36515d;border-radius:10px;padding:12px}.studio-overlays label,.replay-rail .studio-choices label{display:flex;align-items:center;gap:8px;font-size:.78rem}.studio-overlays input,.replay-rail .studio-choices input{width:auto;flex:none;accent-color:#78ebc4}.studio-overlays label:has(input:disabled){opacity:.6}.replay-ranking section+section{border-top:1px solid #568d9c;margin-top:18px;padding-top:16px}.replay-ranking li{padding-left:8px}.replay-margin{padding:10px;background:#193947;border-radius:8px;font-size:.8rem;font-variant-numeric:tabular-nums}.studio-tooltip{pointer-events:none}.replay-rail :focus-visible,.studio-overlays :focus-visible{outline:2px solid #78ebc4;outline-offset:3px}

/* Keep series beside the plot on tablet too; rankings must not displace controls. */
.replay-layout{grid-template-columns:minmax(0,1fr) minmax(170px,230px);gap:12px}
.replay-layout>.replay-ranking{grid-column:1/-1}
.replay-layout>.chart-wrap{margin-top:0;min-height:0;align-self:start}
.workspace-ready .replay-layout>.replay-rail{max-height:none;overflow:visible}
.replay-layout .replay-rail .studio-choices{max-height:clamp(160px,29dvh,300px);overflow:auto;overscroll-behavior:contain}
.replay-rail .studio-choices label{min-height:32px;overflow-wrap:anywhere}
.replay-status{margin:8px 0;line-height:1.4}
.replay-transport #replayScrub{order:6;flex-basis:100%;min-height:28px}
.studio-surface>.studio-legend{max-height:48px;overflow:auto}
@media(max-width:600px){
 .replay-layout{grid-template-columns:minmax(0,1fr);gap:8px}
 .replay-layout>.replay-rail{grid-row:1}
 .replay-layout>.chart-wrap{grid-row:2}
 .workspace-ready .replay-layout .replay-rail .studio-choices,.replay-layout .replay-rail .studio-choices{display:flex;flex-direction:row;flex-wrap:wrap!important;max-height:100px;padding:5px;gap:4px}
 .replay-rail .studio-choices strong{flex-basis:100%;margin:0;font-size:.65rem}
 .replay-rail .studio-choices legend{font-size:.68rem}
 .replay-rail .studio-choices label{font-size:.65rem;min-height:32px;padding:4px}
 .replay-transport{gap:5px}
 .replay-transport button{padding:7px;font-size:.7rem;min-height:36px}
 .replay-transport select{min-width:60px;min-height:36px;padding:5px}
 .replay-status{font-size:.69rem}
 .studio-surface>.studio-legend{max-height:28px;padding:4px 0}
}
.studio-builder>.microcopy{grid-column:1/-1;margin:0;font-size:11px}
@media(max-width:600px){.workspace-ready .replay-layout .replay-rail .studio-choices{display:grid;grid-template-columns:1fr 1fr;align-content:start}.replay-rail .studio-choices strong{grid-column:1/-1}.workspace-ready .replay-rail .studio-choices label{margin:0;min-height:30px;font-size:10px}.replay-rail .studio-choices input{height:14px;width:14px}}