.replay-desk,.combined-replay { --replay-force:#f1c56b; --replay-combined:#74dfdf; --replay-turning:#dfa7ec; --replay-x:#ed8585; --replay-y:#92d393; --replay-z:#82b8ef; --replay-floor:#3a4250; --replay-net:#8d99ad; --replay-wall:#9fc4e8; --replay-door:#ff8a3d; }
[data-theme=light] .replay-desk,[data-theme=light] .combined-replay { --replay-force:#8a5b00; --replay-combined:#006c72; --replay-turning:#81418f; --replay-x:#9b3434; --replay-y:#306734; --replay-z:#315b94; --replay-floor:#d9dee6; --replay-net:#7d8797; --replay-wall:#5b86b3; --replay-door:#c24e00; }
.replay-key span::before { content:""; display:inline-block; width:8px; height:8px; margin-right:7px; background:var(--replay-force); }
.replay-key .key-combined::before { background:var(--replay-combined); }
.replay-key .key-turning::before { background:var(--replay-turning); }
.replay-key .key-door::before { background:var(--replay-door); }
/* Heatmap colours are data colours, identical in both themes (debrief/wind.js). */
.replay-key .key-heat::before { display:none; }
.replay-key .key-heat i { display:inline-block; width:54px; height:8px; margin:0 6px; vertical-align:middle; border-radius:2px; background:linear-gradient(90deg,#526f90,#44a6b8 35%,#f4c957 70%,#f06437); }
/* The reconstruction is the working surface; controls share one source clock. */
.replay-desk { background:var(--surface); border:1px solid var(--line); border-radius:5px; overflow:hidden; }
.replay-heading { display:flex; align-items:center; gap:12px; padding:10px 16px; border-bottom:1px solid var(--line); min-width:0; }
.replay-heading h2 { font-size:16px; margin:0; white-space:nowrap; }
.replay-heading-tools { margin-left:auto; display:flex; align-items:center; gap:8px; flex-shrink:0; }
/* Full screen: the refly.ing mark and this flight's name take the heading, and
   the page header, flight title and tabs step aside (iPhone Safari cannot make
   the player itself full screen, so the page fills the screen with it). */
.replay-brand,.replay-flight-name { display:none; }
.replay-desk:fullscreen .replay-brand,.replay-expanded .replay-brand { display:block; flex-shrink:0; font-size:19px; font-weight:600; letter-spacing:-.04em; line-height:1; color:var(--text); white-space:nowrap; }
.replay-brand span { color:var(--accent); }
.replay-desk:fullscreen .replay-flight-name,.replay-expanded .replay-flight-name { display:flex; flex-direction:column; min-width:0; padding-left:12px; border-left:1px solid var(--line); line-height:1.3; }
.replay-flight-name strong { font-size:14px; font-weight:600; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.replay-flight-name span { font-size:12px; color:var(--muted); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.replay-desk:fullscreen .replay-heading h2,.replay-expanded .replay-heading h2 { display:none; }
/* One line when the 3D found saved names on the wrong flyer; its times play that moment. */
/* Saved names the cameras disagreed with: an amber chip beside the status. Its
   panel uses the report panel's surface, says where, and links to the fix. */
.replay-notice-toggle { display:inline-flex; align-items:center; gap:6px; min-width:0; min-height:0; padding:1px 10px; border:1px solid var(--line); border-radius:999px; background:var(--surface); color:var(--warning); font-size:12px; font-weight:500; line-height:20px; }
.replay-notice-toggle:hover { background:var(--hover); border-color:var(--warning); }
.replay-notice-toggle span { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.replay-notice-toggle svg { flex-shrink:0; }
.replay-notice p { margin:0 0 10px; font-size:14px; line-height:1.55; max-width:none; }
.replay-notice .moment-seek { margin:0; padding:0 2px; min-height:0; font:inherit; font-variant-numeric:tabular-nums; }
.replay-focus .app-header,.replay-focus .flight-workspace > .heading,.replay-focus .flight-workspace > .workspace-tabs { display:none; }
/* Icon-only controls keep a visible outline, their own label and a tooltip. */
.replay-icon { display:inline-grid; place-items:center; width:36px; height:36px; min-height:0; padding:0; border:1px solid var(--line); border-radius:6px; background:transparent; color:var(--text); flex-shrink:0; text-decoration:none; cursor:pointer; }
.replay-icon:hover { background:var(--hover); border-color:var(--quiet); }
.replay-badge { display:inline-flex; align-items:center; gap:6px; min-width:0; padding:2px 10px; border-radius:999px; background:var(--raised); color:var(--muted); font-size:12px; font-weight:500; line-height:20px; }
.replay-badge span { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.replay-badge svg { flex-shrink:0; }
.replay-badge[data-tone=ok] { background:var(--selection); color:var(--accent); }
.replay-badge[data-tone=busy] { color:var(--text); }
.replay-badge[data-tone=busy] svg { color:var(--accent); animation:replay-turn 1.6s linear infinite; }
.replay-badge[data-tone=warn] { color:var(--warning); }
@keyframes replay-turn { to { transform:rotate(360deg); } }
@media (prefers-reduced-motion:reduce) { .replay-badge[data-tone=busy] svg { animation:none; } }
.replay-display { display:flex; border:1px solid var(--line); border-radius:6px; overflow:hidden; }
.replay-display button { width:38px; height:34px; min-height:0; padding:0; border:0; border-radius:0; background:transparent; color:var(--muted); }
.replay-display button + button { border-left:1px solid var(--line); }
.replay-display button:hover { background:var(--hover); }
.replay-display [aria-pressed=true] { background:var(--selection); color:var(--accent); }
.replay-stages { display:grid; grid-template-columns:3fr 2fr; min-width:0; }
.replay-desk[data-display=model] .replay-stages,.replay-desk[data-display=video] .replay-stages { grid-template-columns:1fr; }
.replay-desk[data-display=model] .replay-source,.replay-desk[data-display=video] .analysis-panel { display:none; }
.replay-desk .analysis-panel { position:relative; border:0; padding:0; min-width:0; }
.replay-canvas-wrap { height:min(47vh, max(210px, calc(100dvh - 520px))); min-height:210px; position:relative; background:var(--input); }
/* The canvas fills its box without sizing it: a drawing buffer grown while expanded
   must never hold the view open afterwards. */
.replay-canvas-wrap canvas { position:absolute; inset:0; display:block; width:100%; height:100%; touch-action:none; }
.replay-message { position:absolute; inset:0; display:grid; place-content:center; justify-items:center; gap:16px; text-align:center; padding:28px; color:var(--muted); pointer-events:none; margin:0; background:var(--input); container-type:size; }
.replay-message[hidden],.replay-key[hidden],.replay-info[hidden] { display:none; }
/* The loading mark (replay-loading.js): the tunnel from above. Its wall fills with
   the measured progress while four flyers close into a star; when the replay is
   ready they take grips, a ripple runs out and the view fades in. */
.replay-message.is-leaving { opacity:0; transition:opacity .36s ease .42s; }
.replay-message.is-brief { transition-duration:.2s; transition-delay:.08s; }
.replay-loading { position:relative; width:clamp(64px, 30cqh, 92px); aspect-ratio:1; container-type:inline-size; animation:replay-loading-in .6s cubic-bezier(.2,.7,.2,1) .12s backwards; transition:transform .8s cubic-bezier(.2,.7,.2,1); }
.replay-loading[hidden] { display:none; }
/* Too short for the mark: only the words. Not display:none, which Chrome can apply
   for a moment while the scene adds its layers, restarting the animations. */
@container (max-height:160px) { .replay-loading { position:absolute; visibility:hidden; } }
.is-leaving:not(.is-brief) .replay-loading { transform:scale(1.05); }
.replay-loading::before { content:""; position:absolute; inset:16%; border-radius:50%; background:radial-gradient(closest-side, color-mix(in srgb, var(--accent) 20%, transparent), transparent); opacity:var(--glow, .35); transition:opacity .8s ease; }
.replay-loading > svg { position:absolute; inset:0; width:100%; height:100%; overflow:visible; transform:rotate(-90deg); }
.replay-loading-wall,.replay-loading-fill { fill:none; }
.replay-loading-wall { stroke:var(--line); stroke-width:1.2; }
.replay-loading-fill { stroke:var(--accent); stroke-width:2.4; stroke-linecap:round; stroke-dasharray:100; transition:stroke-dashoffset .7s cubic-bezier(.3,.7,.25,1); }
/* The leading edge of the ring, with a slow ping while work is under way. */
.replay-loading-tip { position:absolute; inset:0; transition:transform .7s cubic-bezier(.3,.7,.25,1); }
.replay-loading-tip::before,.replay-loading-tip::after { content:""; position:absolute; left:47.5%; top:3.5%; width:5cqw; height:5cqw; border-radius:50%; background:var(--accent); }
.replay-loading-tip::after { animation:replay-loading-ping 1.9s cubic-bezier(.2,.6,.3,1) infinite; }
.replay-loading-ripple { position:absolute; inset:6%; border:1px solid var(--accent); border-radius:50%; opacity:0; }
.replay-loading-formation { position:absolute; inset:0; animation:replay-loading-turn 18s linear infinite; }
.replay-loading i { position:absolute; left:38%; top:38%; width:24%; height:24%; transition:transform 1.3s cubic-bezier(.25,.8,.25,1); }
.replay-loading b { display:block; width:100%; height:100%; animation:replay-loading-float 3.3s ease-in-out infinite alternate; }
.replay-loading i:nth-child(2) b { animation-duration:3.9s; animation-delay:-1.7s; }
.replay-loading i:nth-child(3) b { animation-duration:3s; animation-delay:-2.4s; }
.replay-loading i:nth-child(4) b { animation-duration:3.6s; animation-delay:-.8s; }
.replay-loading i svg { display:block; width:100%; height:100%; fill:var(--text); stroke:var(--text); stroke-width:1.4; stroke-linecap:round; stroke-linejoin:round; opacity:.66; transition:fill .4s ease .2s, stroke .4s ease .2s, opacity .4s ease .2s; }
.replay-loading i path { fill:none; }
.replay-loading .replay-loading-torso { stroke-width:3.4; }
.is-docked i { transition-duration:.55s; }
.is-docked i svg { fill:var(--accent); stroke:var(--accent); opacity:1; }
.is-docked .replay-loading-tip { opacity:0; transition:transform .7s cubic-bezier(.3,.7,.25,1), opacity .3s ease .45s; }
.is-docked .replay-loading-tip::after { animation:none; opacity:0; }
.is-docked .replay-loading-ripple { animation:replay-loading-ripple .7s cubic-bezier(.2,.7,.3,1) .26s both; }
@keyframes replay-loading-in { from { opacity:0; transform:scale(.9); } }
@keyframes replay-loading-turn { to { transform:rotate(1turn); } }
@keyframes replay-loading-float { from { transform:translateY(-.7cqw) rotate(-6deg); } to { transform:translateY(.9cqw) rotate(6deg); } }
@keyframes replay-loading-ping { from { opacity:.55; transform:scale(1); } to { opacity:0; transform:scale(2.8); } }
@keyframes replay-loading-ripple { from { opacity:.7; transform:scale(.42); } to { opacity:0; transform:scale(1.1); } }
/* Flyer names over their heads in 3D, placed by replay-scene.js after each render;
   the dot is the flyer's colour, as in Settings › Flyers. Messages cover them. */
.replay-names { position:absolute; inset:0; overflow:hidden; pointer-events:none; }
.replay-name { position:absolute; left:0; top:0; display:inline-flex; align-items:center; gap:5px; max-width:160px; padding:0 8px; border:1px solid var(--line); border-radius:999px; background:var(--surface); color:var(--text); font-size:12px; font-weight:500; line-height:20px; white-space:nowrap; }
.replay-name[hidden] { display:none; }
.replay-name i { width:8px; height:8px; border-radius:50%; flex-shrink:0; }
.replay-name span { overflow:hidden; text-overflow:ellipsis; }
/* View presets: one compact strip over the 3D view (under it on phones). */
.replay-views { position:absolute; top:10px; right:10px; z-index:2; display:flex; flex-direction:column; border:1px solid var(--line); border-radius:8px; overflow:hidden; background:var(--surface); }
.replay-views button { width:32px; height:32px; min-height:0; padding:0; border:0; border-radius:0; background:transparent; color:var(--text); }
.replay-views button + button { border-top:1px solid var(--line); }
.replay-views button:hover { background:var(--hover); }
.replay-views button[hidden] { display:none; }
.replay-views svg { width:16px; height:16px; }
.analysis-panel:has(.replay-message:not([hidden])) .replay-views,.replay-message:not([hidden]) ~ .replay-legend { visibility:hidden; }
/* The legend stays behind the info button until the viewer opens it. */
.replay-legend { position:absolute; left:10px; bottom:10px; z-index:2; display:flex; align-items:flex-end; gap:8px; max-width:calc(100% - 20px); }
.replay-info { width:34px; height:34px; min-height:0; padding:0; border-radius:50%; background:var(--surface); }
.replay-info[aria-expanded=true] { background:var(--selection); color:var(--accent); border-color:var(--accent); }
.replay-key { font-size:12px; line-height:1.7; color:var(--text); background:var(--surface); border:1px solid var(--line); border-radius:6px; padding:6px 10px; margin:0; pointer-events:none; }
.replay-source { min-width:0; border-left:1px solid var(--line); background:var(--input); display:flex; flex-direction:column; }
.replay-source .footage-frame { flex:1; width:100%; height:auto; min-height:230px; border:0; border-radius:0; aspect-ratio:auto; }
.replay-source video { max-height:55vh; }
/* The 3D bodies over the video: aligned to the video's box, never in the way of controls. */
.replay-overlay { position:absolute; z-index:1; pointer-events:none; }
/* The camera angle picker sits over the video it controls. */
.replay-angle { position:absolute; top:10px; left:10px; z-index:2; display:flex; gap:6px; max-width:calc(100% - 20px); }
.replay-angle select { width:auto; min-width:0; max-width:220px; min-height:0; height:32px; padding:0 28px 0 10px; font-size:13px; background-color:var(--surface); border-radius:6px; }
.replay-angle .replay-icon { width:32px; height:32px; background:var(--surface); }
.replay-angle .replay-icon[hidden] { display:none; }
.replay-transport { display:flex; align-items:center; gap:10px; padding:10px 12px; border-block:1px solid var(--line); background:var(--raised); }
.replay-play { width:44px; height:44px; min-height:0; padding:0; border:0; border-radius:50%; background:var(--accent); color:var(--accent-ink); flex-shrink:0; }
.replay-play:hover { background:var(--accent); filter:brightness(.94); }
.replay-transport [data-seek] { flex:1; min-width:60px; min-height:0; padding:0; border:0; background:transparent; accent-color:var(--accent); }
.replay-transport output { font-size:13px; font-variant-numeric:tabular-nums; white-space:nowrap; color:var(--muted); }
.replay-transport [data-total]::before { content:" / "; }
.replay-speed { min-width:44px; height:36px; min-height:0; padding:0 8px; font-size:13px; font-variant-numeric:tabular-nums; flex-shrink:0; }
.replay-desk .error { margin:0 14px; }
.replay-desk .analysis-actions:not(:empty) { padding:12px; }
.replay-desk:fullscreen,.replay-expanded { display:flex; flex-direction:column; height:100dvh; width:100%; background:var(--surface); }
.replay-expanded { position:fixed; inset:0; z-index:100; }
.replay-desk:fullscreen .replay-stages,.replay-expanded .replay-stages { flex:1; min-height:0; }
.replay-desk:fullscreen .replay-canvas-wrap,.replay-expanded .replay-canvas-wrap { height:100%; min-height:120px; }
/* Desktop page: the status, report, names chip and layout float over the top of
   the stages, so the replay gets that height. Full screen keeps its bar; the
   stage's own top controls step below the floating row. */
@media(min-width:821px) {
 .replay-desk { position:relative; }
 .replay-desk:not(:fullscreen):not(.replay-expanded) .replay-heading { position:absolute; top:10px; left:10px; right:10px; z-index:3; padding:0; border:0; gap:8px; pointer-events:none; }
 .replay-desk:not(:fullscreen):not(.replay-expanded) .replay-heading > * { pointer-events:auto; }
 .replay-desk:not(:fullscreen):not(.replay-expanded) .replay-heading h2 { position:absolute; width:1px; height:1px; overflow:hidden; clip-path:inset(50%); }
 .replay-desk:not(:fullscreen):not(.replay-expanded) .replay-badge { border:1px solid var(--line); }
 .replay-desk:not(:fullscreen):not(.replay-expanded) :is(.report-toggle,.replay-display,[data-fullscreen]) { background:var(--surface); }
 .replay-desk:not(:fullscreen):not(.replay-expanded) :is(.replay-views,.replay-angle) { top:54px; }
}
@media(max-width:1100px) { .review-layout { grid-template-columns:minmax(0,1fr) 280px; } .replay-stages { grid-template-columns:1fr 1fr; } }
@media(max-width:820px) { .review-layout { grid-template-columns:1fr; } .replay-canvas-wrap { height:43vh; } .replay-stages { grid-template-columns:1fr; } .replay-source { border-left:0; } .replay-desk[data-display=split] .replay-source { border-top:1px solid var(--line); } .replay-source .footage-frame { height:240px; } .replay-display [data-display=split] { display:none; } }
/* Phones: the status and layout share the top row, view presets form a strip
   under the 3D view, and the seek bar spans the width above centred controls. */
@media(max-width:520px) {
 .replay-heading { padding:8px 12px; }
 .replay-heading h2,.replay-desk:fullscreen .replay-badge,.replay-expanded .replay-badge { display:none; }
 .replay-notice-toggle { padding:1px 6px; }
 .replay-notice-toggle span { position:absolute; width:1px; height:1px; overflow:hidden; clip-path:inset(50%); }
 .replay-desk .analysis-panel { display:flex; flex-direction:column; }
 .replay-views { position:static; flex-direction:row; align-self:flex-start; margin:8px 12px 0; }
 .replay-views button { width:40px; height:36px; }
 .replay-views button + button { border-top:0; border-left:1px solid var(--line); }
 .replay-views svg { width:18px; height:18px; }
 .replay-transport { display:grid; grid-template-columns:1fr 44px 44px 56px 44px 1fr; grid-template-areas:"seek seek seek seek seek seek" "time time time time time time" ". speed back play forward ."; column-gap:14px; row-gap:2px; padding:8px 16px 12px; }
 .replay-transport [data-seek] { grid-area:seek; width:100%; }
 .replay-transport output { grid-area:time; display:flex; justify-content:space-between; font-size:12px; }
 .replay-transport [data-total]::before { content:none; }
 .replay-speed { grid-area:speed; width:44px; height:44px; }
 .replay-transport [data-step="-1"] { grid-area:back; width:44px; height:44px; }
 .replay-play { grid-area:play; width:56px; height:56px; }
 .replay-transport [data-step="1"] { grid-area:forward; width:44px; height:44px; }
}
/* Body positions: one thin row per flyer on the seek bar's x-axis (aligned in
   JS), names under the play buttons, the key under the clock. Estimates. */
.replay-desk { --position-head-up:#6cc4a8; --position-head-down:#ab9df0; --position-belly:#f0a46e; --position-back:#ec8fb6; --position-ink:#11181b; }
[data-theme=light] .replay-desk { --position-head-up:#2c7f68; --position-head-down:#6a58c4; --position-belly:#b35c25; --position-back:#ad4674; --position-ink:#fff; }
.replay-transport [data-positions][aria-pressed=true] { background:var(--selection); color:var(--accent); border-color:transparent; }
.replay-positions { --positions-left:100px; --positions-right:150px; position:relative; min-height:34px; padding:5px 0 7px; border-bottom:1px solid var(--line); background:var(--raised); }
.positions-rows { position:relative; display:grid; gap:3px; }
.positions-row { display:grid; grid-template-columns:var(--positions-left) minmax(0,1fr) var(--positions-right); align-items:center; }
.positions-name { justify-self:end; display:inline-flex; align-items:center; gap:5px; max-width:calc(100% - 12px); min-height:0; height:16px; margin-right:8px; padding:0 3px; border:0; border-radius:3px; background:transparent; color:var(--muted); font-size:11px; font-weight:500; line-height:1; }
.positions-name:hover { background:var(--hover); color:var(--text); }
.positions-name[aria-pressed=true] { color:var(--text); }
.positions-name span { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.positions-name i { width:7px; height:7px; border-radius:50%; flex:none; }
.positions-bar { position:relative; height:16px; border-radius:3px; background:var(--surface); cursor:pointer; }
.is-solo .positions-bar { height:24px; }
.positions-block { position:absolute; top:0; bottom:0; min-width:2px; min-height:0; display:flex; align-items:center; gap:3px; padding:0 3px; border:0; border-radius:2px; overflow:hidden; background:var(--position-color); color:var(--position-ink); font-size:11px; font-weight:600; line-height:1; white-space:nowrap; }
.positions-block:hover { background:var(--position-color); filter:brightness(1.08); }
.positions-block:focus-visible { outline:2px solid var(--text); outline-offset:0; z-index:1; }
.positions-block.is-unclear { opacity:.42; }
.positions-block:not([data-fit]) > *,.positions-block[data-fit=none] > *,.positions-block[data-fit=icon] span { display:none; }
.positions-block svg { flex:none; }
[data-position=head-up] { --position-color:var(--position-head-up); }
[data-position=head-down] { --position-color:var(--position-head-down); }
[data-position=belly] { --position-color:var(--position-belly); }
[data-position=back] { --position-color:var(--position-back); }
.positions-playhead { position:absolute; top:-3px; bottom:-3px; width:2px; margin-left:-1px; border-radius:1px; background:var(--text); pointer-events:none; }
.positions-legend { position:absolute; top:5px; right:12px; width:calc(var(--positions-right) - 20px); display:grid; grid-template-columns:repeat(2,max-content); justify-content:end; gap:2px 10px; font-size:11px; line-height:14px; color:var(--muted); }
.positions-legend > span { display:inline-flex; align-items:center; gap:3px; }
.positions-legend svg { color:var(--position-color); }
.positions-tip { position:absolute; z-index:5; display:flex; align-items:center; gap:5px; padding:5px 9px; border:1px solid var(--line); border-radius:5px; background:var(--surface); box-shadow:var(--shadow); font-size:12px; white-space:nowrap; pointer-events:none; }
.positions-tip svg { color:var(--position-color); }
.positions-tip-time { color:var(--muted); }
.positions-note { margin:0; padding:2px 12px 0 var(--positions-left); font-size:12px; color:var(--muted); }
.positions-note button { min-height:0; padding:0 4px; border:0; background:none; color:var(--accent); font-size:12px; text-decoration:underline; }
@media(max-width:520px) {
 .replay-transport { grid-template-areas:"seek seek seek seek seek seek" "time time time time time time" ". speed back play forward positions"; }
 .replay-transport [data-positions] { grid-area:positions; justify-self:start; width:44px; height:44px; }
 .replay-positions { padding-bottom:4px; }
 .positions-row { grid-template-columns:var(--positions-left) minmax(0,1fr) var(--positions-right); }
 .replay-positions:not(.is-solo) .positions-name span { display:none; }
 .positions-name { margin-right:3px; padding:0; }
 .positions-legend { position:static; width:auto; display:flex; flex-wrap:wrap; justify-content:center; gap:2px 12px; margin-top:4px; }
}
@media(max-height:500px) and (orientation:landscape) { .replay-desk:fullscreen .replay-canvas-wrap,.replay-expanded .replay-canvas-wrap { min-height:90px; } }
/* Settings: one list of switches for what the 3D view shows. */
.replay-settings-list { padding:14px 18px 20px; }
.replay-settings-list h3 { margin:0 0 2px; font-size:12px; font-weight:600; letter-spacing:.06em; text-transform:uppercase; color:var(--quiet); }
.replay-settings-list h3:not(:first-child) { margin-top:22px; }
.replay-switch { display:flex; align-items:center; gap:12px; margin:0; padding:10px 0; border-bottom:1px solid var(--hover); color:var(--text); font-size:14px; cursor:pointer; }
.replay-switch[hidden] { display:none; }
.replay-switch > span { flex:1; display:flex; flex-direction:column; min-width:0; }
.replay-switch strong { font-weight:500; overflow-wrap:anywhere; }
.replay-switch small { font-size:12px; color:var(--quiet); }
.replay-switch > i { width:10px; height:10px; border-radius:50%; flex-shrink:0; }
.replay-switch input { appearance:none; -webkit-appearance:none; position:relative; flex:none; width:38px; height:22px; min-height:0; margin:0; padding:0; border:0; border-radius:999px; background:var(--line); cursor:pointer; transition:background .15s; }
.replay-switch input::before { content:""; position:absolute; top:3px; left:3px; width:16px; height:16px; border-radius:50%; background:var(--text); transition:transform .15s; }
.replay-switch input:checked { background:var(--accent); }
.replay-switch input:checked::before { transform:translateX(16px); background:var(--accent-ink); }
.replay-switch input:disabled { opacity:.5; cursor:default; }
.replay-switch input:focus-visible { outline:2px solid var(--accent); outline-offset:3px; }
@media (prefers-reduced-motion:reduce) { .replay-switch input,.replay-switch input::before { transition:none; } }
.replay-settings-list .hint { margin:12px 0 0; }
.replay-auto { display:flex; gap:8px; align-items:flex-start; }
.replay-auto svg { flex-shrink:0; margin-top:2px; }
.replay-auto[hidden],.replay-airflow-note[hidden] { display:none; }
.combined-report { min-width:0; max-width:100%; color:var(--text); }
.combined-report > header { max-width:76ch; }
.combined-report > header h3 { margin:0 0 6px; font-size:15px; }
.combined-report > header p,.combined-report > p { margin:6px 0 10px; line-height:1.5; }
.combined-report-facts { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:1px; margin:12px 0; background:var(--line); border:1px solid var(--line); }
.combined-report-facts > div { min-width:0; padding:9px 10px; background:var(--surface); }
.combined-report-facts dt { color:var(--muted); font-size:13px; overflow-wrap:anywhere; }
.combined-report-facts dd { margin:3px 0 0; overflow-wrap:anywhere; }
.combined-report > details { margin:0; border-top:1px solid var(--line); }
.combined-report > details:last-child { border-bottom:1px solid var(--line); }
.combined-report summary { cursor:pointer; min-height:44px; padding:12px 2px; font-weight:600; }
.combined-report summary:focus-visible { outline:2px solid var(--accent); outline-offset:-2px; }
.combined-report details > p,.combined-report details > dl,.combined-report details > .combined-report-table { margin:0 0 12px; }
.combined-report details > dl { overflow-wrap:anywhere; }
.combined-report-table { max-width:100%; overflow-x:auto; border:1px solid var(--line); }
.combined-report-table table { width:100%; border-collapse:collapse; font-variant-numeric:tabular-nums; }
.combined-report-table caption { padding:9px 10px; text-align:left; color:var(--muted); background:var(--raised); }
.combined-report-table th,.combined-report-table td { padding:8px 10px; text-align:left; vertical-align:top; border-top:1px solid var(--line); overflow-wrap:anywhere; }
.combined-report-table thead th { white-space:nowrap; font-size:13px; color:var(--muted); background:var(--raised); }
.combined-report-table tbody th { font-weight:600; }
.combined-report-table small { display:block; margin-top:3px; color:var(--muted); font-weight:400; }
@media(max-width:820px) { .combined-report-facts { grid-template-columns:repeat(2,minmax(0,1fr)); } .combined-report-table { margin-inline:0; } }
@media(max-width:520px) { .combined-report-facts { grid-template-columns:1fr; } .combined-report-table th,.combined-report-table td { padding:8px; } }

.combined-source { position: relative; width: 100%; aspect-ratio: 16 / 9; background: var(--bg); }
.combined-source video, .combined-source svg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; }
.combined-source svg { pointer-events: none; }
.combined-source .projection-line { stroke: var(--replay-combined); stroke-width: 2; vector-effect: non-scaling-stroke; }
.combined-source .observation-point { fill: none; stroke: var(--replay-force); stroke-width: 2; vector-effect: non-scaling-stroke; }
/* The Flight report: an icon beside the status badge and a panel under it
   (web/report-view.js), styled like the notification panel. */
.report-slot { display:inline-flex; flex-shrink:0; }
.report-toggle { position:relative; width:32px; height:32px; }
.report-dot { position:absolute; top:4px; right:4px; width:8px; height:8px; border-radius:50%; background:var(--warning); box-shadow:0 0 0 2px var(--surface); }
.report-dot[hidden] { display:none; }
.report-dot[data-tone=problem] { background:var(--danger); }
.report-panel { position:fixed; inset:auto; margin:0; width:min(420px, calc(100vw - 24px)); max-height:min(70vh, 640px); padding:0; overflow:auto; background:var(--raised); color:var(--text); border:1px solid var(--line); border-radius:7px; box-shadow:var(--shadow); }
.report-panel::backdrop { background:transparent; }
.report-body { padding:16px 20px 18px; }
.report-heading { display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:8px; }
.report-heading h2 { margin:0; font-size:17px; }
.report-heading .replay-icon { width:32px; height:32px; font-size:20px; line-height:1; }
.report-verdict { margin:0 0 14px; font-size:14px; max-width:none; }
.report-flyers { list-style:none; margin:0; padding:0; display:grid; gap:6px; }
.report-flyers li { display:grid; grid-template-columns:minmax(64px, max-content) 1fr 40px; align-items:center; gap:10px; font-size:13px; }
.report-flyers li span:last-child { text-align:right; font-variant-numeric:tabular-nums; color:var(--muted); }
.report-bar { height:6px; border-radius:3px; background:var(--line); overflow:hidden; }
.report-bar i { display:block; height:100%; background:var(--accent); }
.report-caption { margin:6px 0 14px; font-size:12px; }
.report-items { list-style:none; margin:0 0 14px; padding:0; display:grid; gap:12px; }
.report-items li { padding-left:12px; border-left:2px solid var(--line); font-size:13px; }
.report-items li[data-tone=minor] { border-left-color:var(--warning); }
.report-items li[data-tone=major] { border-left-color:var(--danger); }
.report-items strong { font-size:14px; font-weight:600; }
.report-items p { margin:3px 0 0; max-width:none; }
.report-times { display:flex; flex-wrap:wrap; gap:2px 12px; }
.report-times .moment-seek { margin:0; padding:0; min-height:0; font:inherit; }
.report-action { display:inline-block; margin-top:4px; color:var(--accent); }
.report-offer { margin:0 0 14px; padding:10px 12px; border:1px solid var(--line); border-radius:5px; font-size:13px; display:grid; gap:6px; justify-items:start; }
.report-offer strong { font-size:14px; font-weight:600; }
.report-offer p { margin:0; max-width:none; }
.report-offer [data-report-outcome]:empty { display:none; }
.report-cost { border-top:1px solid var(--line); padding-top:12px; font-size:13px; }
.report-cost p { margin:0; max-width:none; }
.report-cost details { margin-top:6px; }
.report-cost summary { cursor:pointer; color:var(--muted); }
.report-cost dl { display:grid; grid-template-columns:1fr; gap:4px; margin:8px 0; }
.report-cost dl div { display:flex; justify-content:space-between; gap:12px; }
.report-cost dd { margin:0; font-variant-numeric:tabular-nums; }
@media (max-width:600px) { .report-panel { left:12px; right:12px; top:64px; width:auto; max-height:calc(100dvh - 90px); } }