.task-replay { max-width:1600px; margin:auto; padding:20px 16px; color:var(--ui-color-text); }
.task-replay * { box-sizing:border-box; min-width:0; }
.task-replay__header { display:flex; align-items:center; justify-content:space-between; gap:12px 24px; flex-wrap:wrap; margin-bottom:12px; }
.task-replay h1 { font-size:1.75rem; line-height:1.2; margin:4px 0; }
.task-replay__meta { color:var(--ui-color-text-muted); font-size:.875rem; line-height:1.5; }
.task-replay__header .task-replay__meta { margin:0; }
.task-replay a { color:var(--ui-color-primary); }
.task-replay__back { display:inline-flex; align-items:center; gap:8px; min-height:44px; font-size:.875rem; }
.task-replay__toolbar { display:flex; align-items:center; gap:4px 16px; flex-wrap:wrap; margin:8px 0; }
.task-replay select, .task-replay__play, .task-replay__follow-pilot, .task-replay [data-replay-follow-release] { min-height:44px; padding:8px 12px; border:1px solid var(--ui-color-border); border-radius:var(--ui-radius-md,6px); color:var(--ui-color-text); background:var(--ui-color-surface); font:inherit; }
.task-replay button { cursor:pointer; }
.task-replay button:disabled { opacity:.6; cursor:default; }
.task-replay label { display:inline-flex; align-items:center; gap:8px; min-height:44px; }
.task-replay [hidden] { display:none!important; }
.task-replay input[type=checkbox] { width:20px; height:20px; flex:none; accent-color:var(--ui-color-primary-strong); }
.task-replay :is(button,input,select,a,summary):focus-visible { outline:2px solid var(--ui-color-primary); outline-offset:2px; }
.task-replay__settings { border-block:1px solid var(--ui-color-border); }
.task-replay__workspace { position:relative; overflow:hidden; border:1px solid var(--ui-color-border); border-radius:var(--ui-radius-lg,12px); background:var(--ui-color-surface); }
.task-replay__map { height:clamp(430px,68dvh,800px); position:relative; background:var(--ui-color-surface-alt); }
.task-replay__canvas { position:absolute; inset:0; width:100%; height:100%; pointer-events:none; z-index:2; }
.task-replay__models-overlay { position:absolute; inset:0; width:100%; height:100%; pointer-events:none; z-index:1; }
.task-replay__timeline { display:grid; grid-template-columns:auto minmax(0,1fr) auto; align-items:center; gap:12px 16px; padding:12px; border-top:1px solid var(--ui-color-border); background:var(--ui-color-surface); }
.task-replay__transport { display:inline-flex; align-items:center; gap:4px; }
.task-replay__play { display:inline-flex; align-items:center; justify-content:center; gap:8px; min-width:44px; font-weight:600; }
.task-replay__play:hover:enabled, .task-replay__follow-pilot:hover, .task-replay [data-replay-follow-release]:hover { background:var(--ui-color-surface-hover); color:var(--ui-color-primary-strong); }
.task-replay__play[aria-pressed=true], .task-replay__follow-pilot[aria-pressed=true] { background:var(--ui-color-primary-strong); color:var(--ui-color-on-primary); border-color:var(--ui-color-primary-strong); }
.task-replay__timeline .task-replay__time-control { display:grid; grid-template-columns:auto minmax(0,1fr); gap:0 12px; min-height:44px; font-size:.875rem; }
.task-replay__timeline input[type=range] { grid-column:1/-1; width:100%; min-height:36px; margin:0; accent-color:var(--ui-color-primary-strong); }
.task-replay__time-control output { overflow-wrap:anywhere; }
.task-replay__speed-control { gap:8px; font-size:.875rem; }
.task-replay__speed-control>span { flex:none; }
.task-replay__speed-control select { flex:none; width:5.25rem; font-size:1rem; }
.task-replay output { font-variant-numeric:tabular-nums; text-align:right; }
.task-replay__follow { position:absolute; top:64px; right:56px; z-index:4; max-width:min(320px,calc(100% - 132px)); display:flex; flex-direction:column; gap:8px; padding:8px; border:1px solid var(--ui-color-border); border-radius:var(--ui-radius-md,6px); background:var(--ui-color-surface); color:var(--ui-color-text); box-shadow:var(--ui-shadow-overlay); font-size:.875rem; line-height:1.35; }
.task-replay__follow-status { display:flex; align-items:baseline; gap:8px; overflow-wrap:anywhere; }
.task-replay__follow-status>i { color:var(--ui-color-primary-strong); flex:none; }
.task-replay [data-replay-follow-release] { display:inline-flex; align-items:center; justify-content:center; gap:8px; padding:6px 8px; font-size:.875rem; }
.task-replay__workspace:is(:fullscreen,.is-expanded) { position:fixed; inset:0; z-index:10020; display:flex; flex-direction:column; width:100%; height:100dvh; margin:0; border:0; background:var(--ui-color-surface); }
.task-replay__workspace:is(:fullscreen,.is-expanded) .task-replay__map { flex:1 1 0; height:auto; min-height:0; }
.task-replay__workspace:is(:fullscreen,.is-expanded) .task-replay__timeline { flex:none; padding-bottom:max(12px,env(safe-area-inset-bottom)); }
body.task-replay-map-expanded { overflow:hidden; }
.task-replay__help { margin-top:8px; border-bottom:1px solid var(--ui-color-border); }
.task-replay__help summary { padding:8px 0; color:var(--ui-color-text-muted); font-size:.875rem; font-weight:400; }
.task-replay__help .task-replay__meta { margin:0 0 8px; }
.task-replay__legend { display:flex; gap:8px 16px; flex-wrap:wrap; font-size:.875rem; margin:8px 0; }
.task-replay__legend>span { display:inline-flex; align-items:center; gap:6px; }
.task-replay__legend:empty { display:none; }
.task-replay__pilots { border-top:1px solid var(--ui-color-border); margin-top:16px; }
.task-replay summary { min-height:44px; padding:12px 0; cursor:pointer; font-weight:600; }
.task-replay__pilot-tools { display:flex; align-items:center; justify-content:space-between; gap:8px 16px; flex-wrap:wrap; }
.task-replay__pilot-tools select { max-width:100%; }
.task-replay__table-scroll { max-width:100%; overflow-x:auto; overscroll-behavior-x:contain; }
.task-replay__table-scroll:focus-visible { outline:2px solid var(--ui-color-primary); outline-offset:2px; }
.task-replay__table { width:100%; min-width:1100px; border-collapse:separate; border-spacing:0; font-size:.875rem; line-height:1.35; font-variant-numeric:tabular-nums; }
.task-replay__table :is(th,td) { padding:8px; border-bottom:1px solid var(--ui-color-border); vertical-align:middle; text-align:left; }
.task-replay__table thead { background:var(--ui-color-surface-alt); }
.task-replay__table th { font-weight:600; }
.task-replay__table thead th { white-space:nowrap; }
.task-replay__table thead small { display:block; font-size:.75rem; font-weight:400; color:var(--ui-color-text-muted); }
.task-replay__table tbody tr { background:var(--ui-color-bg); }
.task-replay__table tbody tr:is(:hover,:focus-within) { background:var(--ui-color-surface-hover); }
.task-replay__table .task-replay__number, .task-replay__table .task-replay__rank { text-align:right; white-space:nowrap; }
.task-replay__table .task-replay__rank { min-width:3.25rem; }
.task-replay__table .task-replay__track-column { width:60px; text-align:center; }
.task-replay__table .task-replay__pilot-column { min-width:180px; max-width:240px; position:sticky; left:0; z-index:1; background:inherit; }
.task-replay__table thead .task-replay__pilot-column { z-index:2; background:var(--ui-color-surface-alt); }
.task-replay__table .task-replay__progress { min-width:144px; max-width:200px; }
.task-replay__table a { min-height:44px; display:inline-flex; align-items:center; gap:6px; padding:8px 0; }
.task-replay__table [data-replay-pilot-name]>small { font-weight:400; }
.task-replay__identity { display:flex; align-items:center; gap:4px 8px; flex-wrap:wrap; overflow-wrap:anywhere; }
.task-replay__identity>a { font-weight:600; }
.task-replay__identity>small { width:100%; color:var(--ui-color-text-muted); }
.task-replay__flag { width:20px; height:14px; object-fit:cover; flex:none; }
.task-replay__visibility { gap:4px!important; justify-content:center; width:44px; }
.task-replay__name-choice { justify-content:center; width:44px; }
.task-replay__actions { display:flex; align-items:center; gap:4px; white-space:nowrap; }
.task-replay__actions a, .task-replay__follow-pilot { width:44px; min-width:44px; min-height:44px; justify-content:center; }
.task-replay__follow-pilot { display:inline-flex; align-items:center; padding:8px; }
.task-replay__progress { color:var(--ui-color-text-muted); }
.task-replay__sr-only { position:absolute; width:1px; height:1px; padding:0; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }
.task-replay__key { width:16px; height:4px; background:var(--pilot-color); display:inline-block; flex:none; }
.task-replay [data-replay-status] { min-height:1.5em; margin:8px 0; font-size:.875rem; color:var(--ui-color-text-muted); }
.task-replay .maplibregl-ctrl-top-left, .task-replay .maplibregl-ctrl-top-right, .task-replay .maplibregl-ctrl-bottom-right { z-index:4; }
@media(max-width:600px) {
 .task-replay { padding:16px 8px; }
 .task-replay h1 { font-size:1.5rem; }
 .task-replay__header { gap:4px 12px; }
 .task-replay__map { height:58vh; min-height:360px; }
 .task-replay__toolbar { gap:4px 12px; }
 .task-replay__timeline { grid-template-columns:auto minmax(0,1fr); gap:8px; padding:8px; }
 .task-replay__speed-control { grid-column:2; justify-self:end; }
 .task-replay__speed-control>span { max-width:104px; }
 .task-replay__pilot-tools label { flex:1; flex-wrap:wrap; }
 .task-replay__pilot-tools select { flex:1; font-size:1rem; }
}
@media(max-width:360px) {
 .task-replay__speed-control { flex-direction:column; align-items:flex-end; gap:2px; }
}
@media(prefers-reduced-motion:reduce) { .task-replay *, .task-replay *::before, .task-replay *::after { scroll-behavior:auto!important; transition:none!important; } }