.playback-panel {container-type:inline-size;padding:12px 14px;gap:10px;background:linear-gradient(140deg,#fff 0%,#f5f9ff 100%);color:#172340;overflow:auto;display:flex;flex-direction:column}
.replay-heading {display:flex;align-items:center;gap:10px;min-height:20px}
.replay-heading h2 {margin:0;font-size:calc(14px + var(--ui-font-increase, 2px));font-weight:650;letter-spacing:-.2px}
.replay-state {font-size:calc(10px + var(--ui-font-increase, 2px));color:#708098;padding:2px 7px;border-radius:9px;background:#edf2f8}
.replay-state.is-playing {color:#2069d5;background:#e8f1ff}
.replay-restart {margin-left:0;font-size:calc(11px + var(--ui-font-increase, 2px));border:0;background:transparent;color:#60728f;padding:3px 5px}
.replay-transport {display:flex;gap:9px;align-items:center;min-height:40px;flex-shrink:0}
.replay-toggle {display:grid;place-items:center;width:40px;height:40px;flex:none;padding:0;border:1px solid #2871de;border-radius:50%;color:#fff;background:linear-gradient(#438bfa,#236ce1);box-shadow:0 2px 4px #2475e528,inset 0 1px 0 #ffffff38}
.replay-toggle:hover:not(:disabled) {background:linear-gradient(#5597ff,#2975ec)}
.replay-toggle svg {width:24px;height:24px}
.replay-toggle:disabled {opacity:.5}
.replay-icon {display:grid;place-items:center;flex:none;width:26px;height:30px;padding:3px;border:0;background:transparent;color:#2d4168}
.replay-icon svg {width:21px;height:21px}
.replay-icon:disabled {opacity:.35;cursor:not-allowed;background:transparent}
.playback-time {font-size:calc(11px + var(--ui-font-increase, 2px));font-variant-numeric:tabular-nums;color:#455675;white-space:nowrap;flex:none}
.replay-timeline {flex:1;min-width:70px;display:flex;align-items:center}
.replay-timeline input,.replay-speed input {--progress:0%;width:100%;min-width:0;height:5px;margin:0;appearance:none;border:0;border-radius:10px;background:linear-gradient(to right,#32815f var(--progress),#d3e2d9 var(--progress));cursor:pointer}
.replay-timeline input::-webkit-slider-thumb,.replay-speed input::-webkit-slider-thumb {appearance:none;width:14px;height:14px;border:2px solid #fff;border-radius:50%;background:#32815f;box-shadow:0 0 0 1px #9bc4b1}
.replay-timeline input::-moz-range-thumb,.replay-speed input::-moz-range-thumb {width:10px;height:10px;border:2px solid #fff;border-radius:50%;background:#32815f;box-shadow:0 0 0 1px #9bc4b1}
.replay-timeline input:disabled {cursor:default;opacity:.6}
.replay-speed {position:relative;flex:none;color:#314665}
.replay-splits {display:flex;align-items:center;gap:12px;flex-shrink:0;min-width:0;padding-top:2px}
.replay-split-heading {display:flex;flex-direction:column;gap:3px;flex:none;font-size:calc(11px + var(--ui-font-increase, 2px));font-weight:600;white-space:nowrap}
.replay-placeholder {font-size:calc(9px + var(--ui-font-increase, 2px));font-weight:400;color:#8b98ad}
.replay-split-scroll {flex:1;min-width:0;overflow-x:auto;padding:3px 1px;scrollbar-width:thin}
.replay-split-stops {display:flex;justify-content:space-between;position:relative;min-width:max-content;gap:0}
.replay-split-stops::before {content:'';position:absolute;left:10px;right:10px;top:4px;height:1px;background:#c4cfdf}
.replay-split-stop {position:relative;display:flex;flex-direction:column;align-items:center;gap:6px;min-width:20px;flex:1;font-size:calc(9px + var(--ui-font-increase, 2px));color:#8a98ad;line-height:1}
.replay-split-stop i {display:block;width:9px;height:9px;border-radius:50%;border:1px solid #aebcd0;background:#f8fbff}
.playback-note {margin:0;font-size:calc(10px + var(--ui-font-increase, 2px));color:#7d8ba2;line-height:1.4}
.replay-sr-only {position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
@container(max-width:490px) {.replay-transport{flex-wrap:wrap;gap:8px}.replay-timeline{order:5;flex-basis:100%;padding:8px 0}.replay-splits{gap:8px}}
.replay-split-stop.is-complete{color:#2871de}
.replay-split-stop.is-complete i{background:#2871de;border-color:#2871de}
.replay-split-stop.is-next{color:#172340;font-weight:700}
.replay-progress-marker{position:absolute;top:-2px;width:13px;height:13px;box-sizing:border-box;border:2px solid white;border-radius:50%;background:var(--runner-color,#2871de);box-shadow:0 0 0 1px var(--runner-color,#2871de);transform:translateX(-50%);z-index:1}
.replay-progress-marker[hidden]{display:none}

.replay-speed{display:flex;align-items:center;gap:7px;width:155px;margin-left:auto}
.replay-speed-track{position:relative;display:block;flex:1;min-width:0;padding:5px 0}
.replay-speed input{display:block}
.replay-speed output{width:5ch;flex:none;text-align:right;font-size:calc(12px + var(--ui-font-increase, 2px));font-variant-numeric:tabular-nums}

@container(max-width:360px) {.replay-heading{flex-wrap:wrap}.replay-heading .replay-speed{width:115px}}

.vertical-playback-panel{min-height:0}
.vertical-playback-panel .replay-heading{flex-wrap:wrap;flex-shrink:0}
.vertical-playback-panel .replay-heading h2{flex:1}
.vertical-playback-panel .replay-heading .replay-speed{order:1;width:auto;flex:1 1 120px;margin-left:0}
.vertical-playback-panel .replay-restart{order:2}
.vertical-playback-body{display:grid;grid-template-columns:minmax(75px,1fr) minmax(95px,1fr);gap:12px;flex:1;min-height:180px}
.vertical-playback-panel .replay-transport{flex-direction:column;flex-wrap:nowrap;min-height:0}
.vertical-playback-panel .replay-timeline{order:0;flex:1;min-height:60px;min-width:0;width:100%;justify-content:center;padding:8px 0}
.vertical-playback-panel .replay-timeline input{writing-mode:vertical-lr;direction:ltr;width:5px;height:100%;background:linear-gradient(to bottom,#32815f var(--progress),#d3e2d9 var(--progress))}
.vertical-playback-panel .replay-splits{flex-direction:column;align-items:stretch;gap:8px;min-height:0;padding:0}
.vertical-playback-panel .replay-split-heading{text-align:center}
.vertical-playback-panel .replay-split-scroll{overflow-x:hidden;overflow-y:auto;min-height:0;padding:1px 4px}
.vertical-playback-panel .replay-split-stops{flex-direction:column;min-width:0;min-height:100%;height:max-content}
.vertical-playback-panel .replay-split-stops::before{left:50%;right:auto;top:14px;bottom:14px;width:1px;height:auto}
.vertical-playback-panel .replay-split-stop{flex-direction:row;justify-content:center;min-height:28px;min-width:0;flex:1 0 28px;gap:0}
.vertical-playback-panel .replay-split-stop>span{position:absolute;left:calc(50% + 12px)}
.vertical-playback-panel .replay-progress-marker{left:50%;transform:translate(-50%,-50%)}

/* Keep the 5px rail while making the horizontal timeline easier to target. */
.map-playback .replay-timeline input,.playback-panel:not(.vertical-playback-panel) .replay-timeline input{height:32px;border-radius:0;background-size:100% 5px;background-position:center;background-repeat:no-repeat}

.map-playback .replay-timeline input:not(:disabled):hover,.playback-panel:not(.vertical-playback-panel) .replay-timeline input:not(:disabled):hover{background-color:#e3edfc;box-shadow:-5px 0 #e3edfc,5px 0 #e3edfc}

/* Map playback uses the same green accents as the workspace controls. */
.map-toolbar .map-playback .replay-toggle{border-color:#256956;background:linear-gradient(#409977,#256956);box-shadow:0 2px 4px #25695628,inset 0 1px 0 #ffffff38}
.map-toolbar .map-playback .replay-toggle:hover:not(:disabled){background:linear-gradient(#50a987,#307e62)}
.map-toolbar .map-playback .playback-time,.map-toolbar .map-playback .replay-speed{color:#256956}
.map-toolbar .map-playback .replay-timeline input,.map-toolbar .map-playback .replay-speed input{background-image:linear-gradient(to right,#32815f var(--progress),#d3e2d9 var(--progress))}
.map-toolbar .map-playback input::-webkit-slider-thumb{background:#32815f;box-shadow:0 0 0 1px #9bc4b1}
.map-toolbar .map-playback input::-moz-range-thumb{background:#32815f;box-shadow:0 0 0 1px #9bc4b1}
.map-toolbar .map-playback .replay-timeline input:not(:disabled):hover{background-color:#e1eee9;box-shadow:-5px 0 #e1eee9,5px 0 #e1eee9}
.map-toolbar .map-playback button:focus-visible,.map-toolbar .map-playback input:focus-visible{outline:2px solid #256956;outline-offset:2px}

/* Give the speed rail the same hover target as the map timeline. */
.map-toolbar .map-playback .replay-speed-track{padding:0}
.map-toolbar .map-playback .replay-speed input{height:32px;border-radius:0;background-size:100% 5px;background-position:center;background-repeat:no-repeat}
.map-toolbar .map-playback .replay-speed input:not(:disabled):hover{background-color:#e1eee9;box-shadow:-5px 0 #e1eee9,5px 0 #e1eee9}