/* ============================================================================
   25r-okna-os-czasu.css — oś czasu w oknach Design i Plany (28.10.2026; js/okna/plany-os.js, os-okna-adapter.js, os-okna-gesty.js, os-okna-paski.js)
   ----------------------------------------------------------------------------
   To TA SAMA oś co w Zadania → Timeline i Pulpit → Działy: panel, nagłówek, linie jednostek, tło dni, kolumna osób, paski dwuliniowe ze statusem, legenda — wszystko
   z reguł 15d-zadania-os-czasu.css, 16d-pulpit-dzialy.css, 16e-os-gesty.css i 16g-przeciaganie.css (te same klasy .zo-*, .pd-pasek, .pp-*). Tu tylko to, czego tamte nie mają:
   okno zawsze pokazuje pasek sterowania nad osią, oś mieści się w oknie (bez przewijania), paski tego okna i cudze prace, brudnopis, zakres planów, wąskie okno (kółka).
   Tylko tokeny (jasny i ciemny motyw), bez !important i surowych kolorów.
   ============================================================================ */
.zo-w-oknie { margin-top: 0; }
.zo-w-oknie > .zo-pasek-osi { display: flex; flex-wrap: wrap; }
.zo-w-oknie .zo-przewijak { overflow: hidden; touch-action: pan-y; }
.zo-w-oknie .zo-rog-napis { display: block; }
.zo-w-oknie .zo-os { -webkit-user-select: none; user-select: none; }

/* Sterowanie nad osią: przycisk okna („Termin Designu”, „Plany”) jak lista zakresu, informacja po prawej. */
.zo-ster-btn { height: var(--h-control); padding: 0 var(--s-3); border: 1px solid var(--pole-ramka); border-radius: var(--r-sm); background: var(--pole-tlo); color: var(--text); font: inherit; font-size: var(--t-sm); font-weight: var(--w-bold); cursor: pointer; }
.zo-ster-btn:hover { background: var(--surface-2); }
.zo-ster-btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.zo-okno-info { min-width: 0; margin-left: auto; color: var(--text-muted); font-size: var(--t-xs); text-align: right; }
.zo-okno-info b { color: var(--text); font-weight: var(--w-strong); }
.zo-okno-info .dsg-os-info b:not(:first-child) { color: inherit; font-weight: inherit; }

/* Paski: cudze prace jaśniejsze i nie do chwytania; pasek tego okna do przeciągania; brudnopis (zmiana niezapisana albo niezatwierdzona) — ramka przerywana w kolorze akcentu. */
.zo-w-oknie .zo-pasek { cursor: default; }
.zo-w-oknie .zo-pasek.is-inne, .zo-w-oknie .pd-poza.is-inne { opacity: .55; }
.zo-w-oknie .zo-pasek.is-wyb { box-shadow: var(--cien-1); }
.zo-w-oknie .zo-pasek.is-roboczy { border: 2px dashed var(--accent); background: color-mix(in srgb, var(--accent) 12%, var(--surface)); }
[data-os-bar] { cursor: grab; touch-action: pan-y; }
[data-os-bar]:is(:hover, :focus-visible) .pp-uchwyt { background: color-mix(in srgb, var(--hg-ton) 45%, transparent); }
[data-os-bar]:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
:root:not([data-ui="desktop"]) .zo-w-oknie .pp-uchwyt { width: min(16px, 30%); }
:root:not([data-ui="desktop"]) [data-os-bar] { -webkit-touch-callout: none; -webkit-user-select: none; user-select: none; -webkit-tap-highlight-color: transparent; }
[data-os-bar].is-przeciagany { opacity: .35; }
[data-os-bar].is-uniesiony { outline: 2px solid var(--accent); outline-offset: 1px; box-shadow: var(--cien-2); }
[data-os-bar].is-przeciagany.is-uniesiony { outline: 0; box-shadow: none; }

/* Zakres planów (okno Plany): delikatne tło za wierszami i znacznik pod nagłówkiem. */
.zo-zakres-plan { position: absolute; top: 0; bottom: 0; border-inline: 1px dashed color-mix(in srgb, var(--accent) 45%, transparent); background: color-mix(in srgb, var(--accent) 6%, transparent); }
.zo-zakres-znacznik { position: absolute; bottom: 0; z-index: 1; height: 3px; border-radius: 2px 2px 0 0; background: var(--accent); }

/* Wąskie okno (telefon): w kolumnie osób same kółka z inicjałami; imię i rola w `title` i w komunikacie po stuknięciu. */
.zo-w-oknie.is-kolka .zo-rog .zo-rog-napis { display: none; }
.zo-w-oknie.is-kolka .zo-rog { padding: 0; }
.zo-w-oknie.is-kolka .zo-w:not(.zo-glowa) .zo-n { align-items: center; padding: var(--s-3) 0 0; cursor: pointer; }
.zo-w-oknie.is-kolka .zo-n :is(b, small) { display: none; }

/* Legenda: kolory statusów jak paski (planowany = przerywana ramka), paski tego okna, cudze prace, brudnopis, zakres planów, dziś. */
.zo-okno-leg .zo-leg-kolor[data-st="active"] { --hg-ton: var(--status-wtoku); }
.zo-okno-leg .zo-leg-kolor[data-st="planned"] { --hg-ton: var(--status-oczekuje); }
.zo-okno-leg .zo-leg-kolor[data-st="late"] { --hg-ton: var(--danger); }
.zo-okno-leg .zo-leg-kolor[data-st="done"] { --hg-ton: var(--status-gotowy); }
.zo-leg-wyb, .zo-leg-inne { box-sizing: border-box; width: 18px; height: 10px; border: 1px solid var(--text-faint); border-radius: 3px; background: color-mix(in srgb, var(--text-faint) 22%, var(--surface)); }
.zo-leg-wyb { box-shadow: var(--cien-1); }
.zo-leg-inne { opacity: .55; }
.zo-leg-rob { box-sizing: border-box; width: 18px; height: 10px; border: 2px dashed var(--accent); border-radius: 3px; background: color-mix(in srgb, var(--accent) 12%, var(--surface)); }
.zo-leg-zakres { box-sizing: border-box; width: 14px; height: 10px; border-inline: 1px dashed color-mix(in srgb, var(--accent) 55%, transparent); background: color-mix(in srgb, var(--accent) 10%, var(--surface)); }
.zo-leg-dzien { box-sizing: border-box; width: 10px; height: 10px; background: color-mix(in srgb, var(--accent) 10%, var(--surface)); box-shadow: inset 1px 0 0 color-mix(in srgb, var(--accent) 45%, transparent), inset -1px 0 0 color-mix(in srgb, var(--accent) 45%, transparent); }
.zo-leg-pod { flex-basis: 100%; color: var(--text-faint); }

/* Telefon: sterowanie zawija się, informacja pod spodem na całą szerokość. */
:root[data-ui="mobile"] .zo-w-oknie > .zo-pasek-osi { flex-wrap: wrap; }
:root[data-ui="mobile"] .zo-okno-info { flex-basis: 100%; order: 3; margin-left: 0; text-align: left; }
:root[data-ui="mobile"] .zo-ster-btn { min-height: 44px; }

/* Okno Plany: legenda kratek kalendarza (telefon, widok „Kalendarz”) — na osi legendę rysuje sama oś. */
.pln-leg-kal { display: none; }
:root[data-ui="mobile"] .pln-har.w-lista .pln-leg-kal { display: flex; }
:root[data-ui="mobile"]:not([data-telefon-poziomo]) .pln-har.w-lista .zo-w-oknie { display: none; }   /* telefon pionowo, widok „Kalendarz”: kratki zamiast osi */