/* ═══════════════════════════════════════════════════════════════
   OŚ CZASU — układ poziomy z punktami nad i pod linią

   Naprzemienność nie jest ozdobnikiem: daje dwa razy więcej miejsca na
   podpis bez zwężania kroku między punktami, a wzrok i tak wraca do
   jednej linii. Krok osi steruje zmienną --krok, którą ustawia JS przy
   przybliżaniu — dzięki temu zoom nie skaluje tekstu, tylko odstępy.
   ═══════════════════════════════════════════════════════════════ */

.oscz{margin-bottom:var(--s10);}
.oscz-h{display:flex;align-items:flex-start;justify-content:space-between;
  gap:var(--s5);flex-wrap:wrap;margin-bottom:var(--s5);}
.oscz-h h3{font-size:1.15rem;margin:0 0 4px;}

.oscz-ster{display:flex;align-items:center;gap:6px;flex:none;}
.oscz-b{background:var(--surface);border:1px solid var(--line);color:var(--ink-2);
  border-radius:8px;min-width:32px;height:32px;padding:0 10px;cursor:pointer;
  font-size:.95rem;line-height:1;transition:border-color .15s,color .15s;}
.oscz-b:hover{border-color:var(--accent);color:var(--ink);}
.oscz-reset{font-size:.78rem;}
.oscz-proc{font-family:var(--f-mono);font-size:.72rem;color:var(--ink-3);
  min-width:44px;text-align:center;}

/* okno przewijania — kursor mówi, że da się przeciągnąć */
.oscz-okno{position:relative;overflow:hidden;cursor:grab;
  padding:var(--s6) 0;border-radius:var(--r-md);
  /* poziomy gest należy do osi, pionowy do strony — bez tego telefon
     przewijał jednocześnie stronę i oś („wychodzenie poza ekran") */
  touch-action:pan-y;}
.oscz-okno.ciagnie{cursor:grabbing;}
/* w trakcie przeciągania żadnych przejść — transition na transform
   sprawiała, że oś goniła palec z opóźnieniem i czuła się wolna */
.oscz-okno.ciagnie .oscz-tor{transition:none;}
.oscz-okno:focus-visible{outline:2px solid var(--accent);outline-offset:3px;}

.oscz-tor{--krok:190px;position:relative;display:flex;align-items:center;
  gap:0;height:400px;width:max-content;padding:0 var(--s8);
  transition:transform .18s ease-out;will-change:transform;}

/* linia biegnie przez środek toru, pod punktami */
.oscz-linia{position:absolute;left:0;right:0;top:50%;height:2px;
  background:linear-gradient(90deg,transparent,var(--line) 6%,var(--line) 94%,transparent);}

.oscz-pkt{position:relative;width:var(--krok);flex:none;
  display:flex;flex-direction:column;align-items:center;height:100%;
  justify-content:center;}

/* węzeł na linii, karta nad albo pod nim */
.oscz-wezel{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);
  width:30px;height:30px;border-radius:50%;border:2px solid var(--line);
  background:var(--bg);color:var(--ink-3);font-family:var(--f-mono);font-size:.72rem;
  cursor:pointer;z-index:2;transition:border-color .18s,color .18s,transform .18s;}
.oscz-wezel:hover{border-color:var(--accent);color:var(--ink);}
.oscz-pkt.wybrany .oscz-wezel{border-color:var(--accent);background:var(--accent);
  color:var(--deep,#0D141C);transform:translate(-50%,-50%) scale(1.12);}

.oscz-karta{position:absolute;left:50%;transform:translateX(-50%);
  width:calc(var(--krok) - 18px);min-width:150px;
  background:var(--surface);border:1px solid var(--line);border-radius:12px;
  padding:12px 14px;transition:border-color .18s,transform .18s;}
.oscz-pkt.gora .oscz-karta{bottom:calc(50% + 26px);}
.oscz-pkt.dol  .oscz-karta{top:calc(50% + 26px);}
.oscz-pkt.wybrany .oscz-karta{border-color:var(--accent);}
.oscz-karta b{display:block;font-size:.92rem;line-height:1.3;margin-bottom:5px;}
.oscz-karta p{font-size:var(--t-xs);line-height:1.5;color:var(--ink-2);margin:0;
  display:-webkit-box;-webkit-line-clamp:6;-webkit-box-orient:vertical;overflow:hidden;}
.oscz-karta{max-height:170px;}

/* kreska łącząca kartę z węzłem — bez niej para „gubi się" przy zoomie */
.oscz-pkt::after{content:"";position:absolute;left:50%;width:1px;height:20px;
  background:var(--line);}
.oscz-pkt.gora::after{bottom:calc(50% + 14px);}
.oscz-pkt.dol::after {top:calc(50% + 14px);}

/* domknięcie osi */
.oscz-koniec{flex:none;display:flex;flex-direction:column;align-items:center;
  justify-content:center;height:100%;padding-left:var(--s6);}
.oscz-dz{--r:92px;}
.oscz-koniec-t{font-family:var(--f-mono);font-size:.68rem;letter-spacing:.1em;
  text-transform:uppercase;color:var(--ink-3);margin-top:6px;white-space:nowrap;}

.oscz-uwaga{font-size:var(--t-sm);line-height:1.6;color:var(--ink-2);
  border-left:2px solid var(--accent);padding-left:var(--s4);margin-top:var(--s5);}

@media(max-width:700px){
  .oscz-tor{height:360px;}
  .oscz-karta{min-width:130px;}
  .oscz-h{flex-direction:column;}
}
@media(prefers-reduced-motion:reduce){
  .oscz-tor,.oscz-wezel,.oscz-karta{transition:none;}
}