.task-replay-layers { position:relative; max-width:calc(100% - 20px); color:var(--ui-color-text); font:14px/1.35 var(--ui-font-family,Barlow,sans-serif); pointer-events:none!important; }
.task-replay-layers__top { display:flex; align-items:center; gap:4px; max-width:100%; pointer-events:none; }
.task-replay-layers__task-tools { display:inline-flex; align-items:center; gap:2px; pointer-events:auto; }
.task-replay-layers__mode { pointer-events:auto; }
.task-replay-layers__buttons { display:flex; align-items:flex-start; flex-direction:column; gap:6px; width:44px; overflow:visible; margin-top:8px; pointer-events:auto; }
.task-replay-layers__control { display:inline-flex; justify-content:center; align-items:center; flex:none; width:44px; height:44px; min-width:44px; min-height:44px; padding:8px; border:1px solid var(--ui-color-border); border-radius:var(--ui-radius-md,6px); color:var(--ui-color-text); background:var(--ui-color-surface); box-shadow:0 1px 4px #0003; font:inherit; cursor:pointer; pointer-events:auto; }
.task-replay-layers__control:hover { color:var(--ui-color-primary-strong); background:var(--ui-color-surface-hover); }
.task-replay-layers__control[aria-expanded=true], .task-replay-layers__control[aria-pressed=true] { color:var(--ui-color-on-primary); border-color:var(--ui-color-primary-strong); background:var(--ui-color-primary-strong); }
.task-replay-layers__control[data-layer-error=true] { color:var(--ui-color-warning); }
.task-replay-layers__option { display:flex; align-items:center; gap:8px; width:100%; min-height:44px; padding:8px; border:0; border-radius:var(--ui-radius-sm,4px); background:transparent; color:var(--ui-color-text); text-align:left; font:inherit; }
.task-replay-layers__option:is(:hover,[aria-pressed=true]) { color:var(--ui-color-primary-strong); background:var(--ui-color-surface-hover); }
.task-replay-layers__option[aria-pressed=true] { font-weight:600; }
.task-replay-layers__panel { position:absolute; top:62px; left:60px; width:var(--replay-layer-panel-width,280px); max-height:var(--replay-layer-panel-height,260px); overflow:auto; overscroll-behavior:contain; padding:8px; background:var(--ui-color-surface); color:var(--ui-color-text); border:1px solid var(--ui-color-border); border-radius:var(--ui-radius-overlay,10px); box-shadow:var(--ui-shadow-overlay); pointer-events:auto; scrollbar-gutter:stable; }
.task-replay-layers__panel[hidden] { display:none; }
.task-replay .maplibregl-ctrl-top-left:has(.task-replay-layers__panel:not([hidden]),.map-controls-layout__panel:not([hidden]),[data-replay-weather]:not([hidden])) { z-index:6; }
.task-replay-layers__heading { display:flex; align-items:center; justify-content:space-between; gap:8px; min-height:44px; padding-left:4px; }
.task-replay-layers__heading>strong { font-size:1rem; font-weight:600; }
.task-replay-layers__close { display:inline-flex; align-items:center; justify-content:center; width:44px; min-width:44px; min-height:44px; padding:8px; border:0; border-radius:var(--ui-radius-md,6px); background:transparent; color:var(--ui-color-text-muted); font:inherit; }
.task-replay-layers__close:hover { color:var(--ui-color-primary-strong); background:var(--ui-color-surface-hover); }
.task-replay-layers__group { border-top:1px solid var(--ui-color-border); margin-top:8px; padding-top:8px; }
.task-replay-layers__group h3 { margin:0 4px 4px; font-size:.75rem; font-weight:600; color:var(--ui-color-text-muted); }
.task-replay-layers__panel label { display:flex; align-items:center; width:100%; min-height:44px; gap:8px; margin:0; padding:4px; border-radius:var(--ui-radius-sm,4px); }
.task-replay-layers__panel label:has(input[type=checkbox]):hover { background:var(--ui-color-surface-hover); }
.task-replay-layers__panel label:has(input:disabled) { color:var(--ui-color-text-muted); }
.task-replay-layers__panel input[type=checkbox] { width:20px; height:20px; flex:none; }
.task-replay-layers__panel .task-replay__toolbar { display:flex; align-items:stretch; flex-direction:column; gap:0; margin:0; }
.task-replay-layers__panel .task-replay__select-label { display:grid; grid-template-columns:minmax(0,1fr); gap:8px; margin-top:8px; }
.task-replay__select-label>span { display:inline-flex; align-items:center; gap:8px; }
.task-replay-layers__panel select { width:100%; max-width:100%; font-size:1rem; padding:8px; }
.task-replay-layers__panel .task-replay__meta { margin:8px 4px 4px; font-size:.75rem; }
.task-replay-layers__country { flex-wrap:wrap; padding-top:8px!important; margin-top:4px!important; }
.task-replay-layers__country input { width:100%; min-height:44px; padding:8px; border:1px solid var(--ui-color-border); border-radius:var(--ui-radius-md,6px); color:var(--ui-color-text); background:var(--ui-color-surface-alt); font:16px/1.35 var(--ui-font-family,Barlow,sans-serif); }
.task-replay-layers__apply { width:100%; min-height:44px; margin:8px 0 0; 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-primary-strong); font:inherit; }
.task-replay-layers__apply:hover { background:var(--ui-color-surface-hover); }
.task-replay-layers__note, .task-replay-layers__status { font-size:12px; line-height:1.5; margin:8px 4px 0; color:var(--ui-color-text-muted); }
.task-replay-layers__status { color:var(--ui-color-warning); }
.task-replay-layers :is(button,input,select):focus-visible { outline:2px solid var(--ui-color-primary); outline-offset:2px; }
.task-replay-layers__info { color:var(--ui-color-text); font:14px/1.4 var(--ui-font-family,Barlow,sans-serif); overflow-wrap:anywhere; }
.task-replay-layers__info section+section { border-top:1px solid var(--ui-color-border); padding-top:8px; margin-top:8px; }
.task-replay-layers__info p { margin:4px 0; }
.task-replay-layers__info>p:last-child { font-size:12px; color:var(--ui-color-text-muted); }
.task-replay-layers-popup { z-index:5; }
.task-replay-layers-popup .maplibregl-popup-content { padding-top:36px; max-height:min(60vh,360px); overflow:auto; color:var(--ui-color-text); background:var(--ui-color-surface); border:1px solid var(--ui-color-border); border-radius:var(--ui-radius-md,6px); }
.task-replay-layers-popup .maplibregl-popup-close-button { color:var(--ui-color-text); min-width:44px; min-height:44px; }
.task-replay .maplibregl-ctrl-group button { width:44px; height:44px; }
.task-replay-layers__panel .task-replay__legend { display:flex; flex-direction:column; align-items:flex-start; gap:12px; margin:8px 4px; }
.task-replay-context__instruments { position:absolute; left:72px; bottom:48px; z-index:3; width:max-content; max-width:min(420px,calc(100% - 140px)); padding:8px; 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:12px/1.45 var(--ui-font-family,Barlow,sans-serif); font-variant-numeric:tabular-nums; overflow-wrap:anywhere; pointer-events:none; }
.task-replay-context-popup { z-index:5; }
.task-replay-context-popup .maplibregl-popup-content { max-height:min(60vh,360px); overflow:auto; padding:44px 12px 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:14px/1.4 var(--ui-font-family,Barlow,sans-serif); }
.task-replay-context-popup .maplibregl-popup-close-button { min-width:44px; min-height:44px; color:var(--ui-color-text); }
.task-replay-context__popup img { display:block; max-width:100%; max-height:220px; object-fit:contain; }
.task-replay-context__popup p { margin:8px 0 0; }
@media(max-width:600px) {
 .task-replay .maplibregl-ctrl-top-right { top:60px; }
 .task-replay-layers__panel { scrollbar-gutter:auto; }
}
