/* Suwak czasu – wybory prezydenckie USA */
.tl{margin:0;padding:14px 16px;border:1px solid var(--neu);border-radius:14px;background:var(--card);color:var(--fg)}
.tl[hidden]{display:none}
.tl-h{display:flex;align-items:baseline;gap:12px;flex-wrap:wrap}
.tl-t{font-size:12px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--mut)}
.tl-y{font:700 34px/1 Georgia,"Times New Roman",serif;font-variant-numeric:tabular-nums}
.tl-s{margin-left:auto;font-size:14px;font-weight:600;color:var(--mut);font-variant-numeric:tabular-nums}
.tl-r{display:flex;align-items:center;gap:12px;margin-top:12px}
.tl-play{flex:none;width:44px;height:44px;border-radius:50%;border:0;background:var(--fg);color:var(--bg);cursor:pointer;display:grid;place-items:center;padding:0}
.tl-play::before{content:"";width:0;height:0;border-style:solid;border-width:8px 0 8px 14px;border-color:transparent transparent transparent currentColor;margin-left:3px}
.tl-play.on::before{width:14px;height:16px;border:0;margin:0;background:linear-gradient(90deg,currentColor 0 36%,transparent 36% 64%,currentColor 64%)}
.tl-play:focus-visible,.tl input:focus-visible,.tl .b:focus-visible{outline:2px solid var(--dt);outline-offset:2px}
.tl input[type=range]{--p:100%;flex:1;min-width:0;height:28px;margin:0;background:transparent;-webkit-appearance:none;appearance:none;cursor:pointer}
.tl input[type=range]::-webkit-slider-runnable-track{height:6px;border-radius:3px;background:linear-gradient(90deg,var(--acc) var(--p),var(--neu) var(--p))}
.tl input[type=range]::-moz-range-track{height:6px;border-radius:3px;background:var(--neu)}
.tl input[type=range]::-moz-range-progress{height:6px;border-radius:3px;background:var(--acc)}
.tl input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:22px;height:22px;margin-top:-8px;border-radius:50%;background:var(--fg);border:3px solid var(--acc)}
.tl input[type=range]::-moz-range-thumb{width:16px;height:16px;border-radius:50%;background:var(--fg);border:3px solid var(--acc)}
.tl-m{display:flex;justify-content:space-between;margin:2px 0 0 56px;font-size:12px;color:var(--mut);font-variant-numeric:tabular-nums}
.tl-c{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-top:10px}
.tl-c .b{flex:0 0 auto;min-height:40px;padding:0 14px}
.tl-c #tl-prev,.tl-c #tl-next{width:48px;padding:0;font-size:20px}
.tl-sp{margin-left:auto;display:flex;align-items:center;gap:8px;font-size:13px;color:var(--mut)}
.tl-x{padding-top:10px;border-top:1px solid var(--neu)}
.tl-p{min-height:1.2em;margin-top:8px;font-size:13px;color:var(--mut)}
.tl.busy .tl-r,.tl.busy .tl-c{opacity:.6}
@media (max-width:520px){.tl-y{font-size:28px}.tl-s{width:100%;margin-left:0}.tl-sp{margin-left:0;width:100%}.tl-x .b{flex:1 1 0}}
@media (prefers-reduced-motion:reduce){.tl *{transition:none!important}}

/* panel po lewej, na wysokości mapy */
.tlrow{display:block}
.tlrow.on{display:grid;grid-template-columns:250px minmax(0,1fr);gap:16px;align-items:start;margin:14px 0}
.tlrow.on>.tl{grid-column:1;grid-row:1 / span 3;position:sticky;top:72px}
.tlrow.on>#geo,.tlrow.on>#grid{grid-column:2;min-width:0}
.tlrow:not(.on)>.tl{margin:14px 0}
.tlrow.on .tl-h{flex-direction:column;align-items:flex-start;gap:4px}
.tlrow.on .tl-s{margin-left:0}
.tlrow.on .tl-sp{margin-left:0;width:100%;justify-content:space-between}
.tlrow.on .tl-sp select{flex:1;max-width:150px}
.tlrow.on .tl-x{flex-direction:column;align-items:stretch}
.tlrow.on .tl-x .b{width:100%;flex:0 0 auto}
@media (max-width:900px){
  .tlrow.on{display:block}
  .tlrow.on>.tl{position:static;margin:0 0 14px}
}

/* zwijanie osi czasu – po zwinięciu zostaje wąski pasek, a mapa zajmuje całą szerokość */
.tl-col{margin-left:8px;display:inline-flex;align-items:center;gap:6px;min-height:32px;padding:0 10px;font-size:13px;cursor:pointer}
.tl-ci{width:8px;height:8px;border-left:2px solid currentColor;border-bottom:2px solid currentColor;transform:rotate(45deg) translate(-1px,1px);transition:transform .15s}
.tl.col .tl-ci{transform:rotate(-135deg) translate(-1px,1px)}
.tl-h .tl-col{order:9}
.tlrow.on:not(.col) .tl-col{margin-left:0;align-self:stretch;justify-content:center}
.tl.col>:not(.tl-h){display:none}
.tl.col{padding:8px 14px}
.tl.col .tl-h{flex-direction:row;align-items:center;gap:10px}
.tl.col .tl-y{font-size:20px}
.tl.col .tl-s{margin-left:auto;width:auto}
.tl.col .tl-col{margin-left:0}
.tlrow.on.col{display:block}
.tlrow.on.col>.tl{position:static;margin:0 0 14px}
.tl.busy .tl-col{opacity:.6}
.tl-col{flex:0 0 auto}
.tl.col .tl-s{margin-left:0}
.tl.col .tl-col{margin-left:auto}