/* assets/kalendarz-ksc.css - os czasu i dwa pola narzedzia "Kalendarz KSC".
   Uzywa wylacznie zmiennych z :root w assets/style.css - zadnych wlasnych
   kolorow ani krojow, zeby zmiana palety obejmowala tez te strone.

   Pozycje punktow ustawia JS przez --pos. Arkusz decyduje, czy --pos znaczy
   left (os pozioma), czy top (os pionowa na waskim ekranie) - dzieki temu
   prog orientacji jest tylko tutaj, w jednym @media. */

/* ---------- rama narzedzia ---------- */

.ksc-cal{
  position:relative;
  margin:28px 0 44px;
  padding:30px 28px 26px;
  background:var(--bg-card);
  border:1px solid var(--border);
  border-radius:var(--radius);
  overflow:hidden;
  isolation:isolate;
}

/* Tlo: winieta Dziennika Ustaw. Ma byc czytelnym cytatem, a nie ozdoba -
   napis "DZIENNIK USTAW" musi dac sie przeczytac. Kadr obejmuje wylacznie
   orla, oba wiersze winiety i kreske pod nimi; wiersze "Warszawa, dnia
   2 marca 2026 r." i "Poz. 252" zostaly odciete, bo przy jakimkolwiek
   sensownym rozmiarze wchodzily na sama os. Proporcja odpowiada plikowi
   img/uoksc-winieta.jpg (1200x194).

   Skan jest czarnym drukiem na bialym papierze, wiec na ciemnej karcie samo
   opacity nie dziala: przy wartosci na tyle duzej, zeby litery byly widoczne,
   papier robi sie jasnym prostokatem, a przy malej nie widac niczego (0,07
   bylo dokladnie tym drugim przypadkiem). Dlatego invert(1) + mix-blend-mode:
   screen - po odwroceniu papier jest czarny, a czern w trybie screen nie
   zmienia tla, wiec zostaje sam napis, swiecacy na ciemnym. Opacity dawkuje
   juz tylko jego jasnosc. Maski nie ma i nie jest potrzebna: bialy margines
   skanu po odwroceniu jest czarny, czyli niewidoczny, wiec zadna krawedz
   nie wystaje.

   Pseudoelement wisi na .ksc-rail-wrap, a nie na .ksc-cal, i jest kotwiczony
   DOLEM. Dzieki temu odstep do osi jest staly, niezaleznie od tego, czy
   podpowiedz nad osia zawinie sie do dwoch wierszy (a po niemiecku zawija
   sie wczesniej). Przy kotwiczeniu gora obrazek wchodzil na szyne. */
.ksc-rail-wrap::before{
  content:"";
  position:absolute;
  /* 74px to padding-top .ksc-rail-wrap, czyli polozenie szyny liczone od gory;
     100% - 74px to ta sama szyna liczona od dolu. Dodane 30px to odstep miedzy
     dolna krawedzia winiety a osia; przy tej wartosci odstep od gory karty
     wychodzi 27-30 px przy 1100-1440 px, czyli winieta stoi rowno w pasie
     miedzy gornym brzegiem karty a osia. */
  bottom:calc(100% - 74px + 30px);
  right:-6px;
  width:min(700px,72%);
  aspect-ratio:1200 / 194;
  z-index:-1;
  background-image:url(../img/uoksc-winieta.jpg);
  background-repeat:no-repeat;
  background-size:100% 100%;
  filter:invert(1);
  mix-blend-mode:screen;
  opacity:0.30;
  pointer-events:none;
}

.ksc-cal-head{
  display:flex;flex-wrap:wrap;align-items:baseline;gap:8px 16px;
  margin-bottom:8px;
}

.ksc-cal-h2{
  font-family:var(--font-head);
  font-size:1.15rem;font-weight:700;letter-spacing:-0.01em;
  color:var(--light);
}

.ksc-cal-src{
  font-family:var(--font-mono);
  font-size:0.74rem;color:var(--text-muted);
}

.ksc-cal-hint{
  font-size:0.86rem;color:var(--text-dim);
  max-width:74ch;margin-bottom:6px;
}

/* ---------- os ---------- */

/* position:relative, bo to on jest ukladem odniesienia dla znaku wodnego -
   zob. .ksc-rail-wrap::before. Ponizej 760 px wraca do static i pseudoelement
   odnosi sie wtedy do .ksc-cal, gdzie w ukladzie pionowym jest jego miejsce. */
.ksc-rail-wrap{position:relative;padding:74px 10px 190px}

.ksc-rail{
  position:relative;
  height:4px;
  background:linear-gradient(90deg,var(--border-hover),var(--border));
  border-radius:2px;
  cursor:pointer;
  outline:none;
}

.ksc-rail:focus-visible{
  box-shadow:0 0 0 3px var(--accent-glow),0 0 0 1px var(--accent);
  border-radius:2px;
}

/* Przebyty odcinek osi. Gradient rosnie w strone dnia dzisiejszego - to on
   niesie informacje o uplywie czasu, a nie sama kropka "dzis". */
.ksc-past{
  position:absolute;
  left:0;top:0;bottom:0;
  width:var(--fill,0%);
  border-radius:2px;
  background:linear-gradient(90deg,
    rgba(16,185,129,0.10) 0%,
    rgba(16,185,129,0.35) 45%,
    var(--accent) 100%);
  box-shadow:0 0 18px var(--accent-glow);
}

.ksc-rail[data-teraz="przed"] .ksc-past,
.ksc-rail[data-teraz="przed"] .ksc-now{display:none}

.ksc-now{
  position:absolute;
  left:var(--pos,0%);top:50%;
  width:2px;height:78px;
  margin-left:-1px;
  transform:translateY(-50%);
}

/* Kreska jest osobnym pseudoelementem, a nie tlem samego .ksc-now, zeby mogla
   pulsowac wlasnym opacity. Animacja nalozona na .ksc-now objelaby rowniez
   kropke (::after) i napis DZIS - a migajacy napis jest wszystkim, tylko nie
   dyskretnym sygnalem. */
.ksc-now::before{
  content:"";
  position:absolute;inset:0;
  background:linear-gradient(to bottom,transparent,var(--accent-light) 22%,var(--accent-light) 78%,transparent);
  animation:ksc-kreska 2.4s ease-in-out infinite;
}

.ksc-now::after{
  content:"";
  position:absolute;left:50%;top:50%;
  width:11px;height:11px;margin:-5.5px 0 0 -5.5px;
  border-radius:50%;
  background:var(--accent-light);
  box-shadow:0 0 0 0 rgba(16,185,129,0.55),0 0 12px var(--accent-glow);
  animation:ksc-puls 2.4s ease-in-out infinite;
}

/* Oba oddechy maja ten sam czas i to samo wygladzenie, wiec kropka i kreska
   pulsuja razem.

   Pierwsza wersja byla za slaba, zeby cokolwiek bylo widac: pierscien rosl
   z 4 do 7 px, ale rownoczesnie bladl z alfy 0,16 do 0,07, wiec jedno kasowalo
   drugie, a kreska schodzila tylko do 62 %. Teraz pierscien wychodzi od kropki
   i rozplywa sie do 14 px - to znany "puls nadajnika", czytelny katem oka,
   a mimo to spokojny, bo trwa 2,4 s i nie zmienia ukladu strony (box-shadow
   i transform nie wchodza do przeplywu). */
@keyframes ksc-puls{
  0%{box-shadow:0 0 0 0 rgba(16,185,129,0.55),0 0 12px var(--accent-glow);transform:scale(1)}
  50%{box-shadow:0 0 0 14px rgba(16,185,129,0),0 0 22px var(--accent-glow-strong);transform:scale(1.22)}
  100%{box-shadow:0 0 0 0 rgba(16,185,129,0),0 0 12px var(--accent-glow);transform:scale(1)}
}

@keyframes ksc-kreska{
  0%,100%{opacity:1}
  50%{opacity:0.32}
}

/* Przy wylaczonych animacjach w systemie znacznik nie moze po prostu zgasnac:
   pierscien kropki jest w klatce 0 % szeroki na 0 px, wiec bez animacji kropka
   zostalaby sama. Stan spoczynkowy dostaje wiec staly pierscien. */
@media (prefers-reduced-motion:reduce){
  .ksc-now::after,.ksc-now::before{animation:none}
  .ksc-now::after{box-shadow:0 0 0 5px rgba(16,185,129,0.20),0 0 16px var(--accent-glow-strong)}
}

.ksc-now-label{
  position:absolute;left:50%;bottom:calc(100% + 4px);
  transform:translateX(-50%);
  font-family:var(--font-mono);
  font-size:0.68rem;letter-spacing:0.08em;text-transform:uppercase;
  color:var(--accent-light);
  white-space:nowrap;
}

/* ---------- punkty ---------- */

.ksc-dot{
  position:absolute;
  left:var(--pos,0%);top:50%;
  width:0;height:0;
}

.ksc-dot-mark{
  position:absolute;left:50%;top:50%;
  width:13px;height:13px;margin:-6.5px 0 0 -6.5px;
  border-radius:50%;
  background:var(--bg-card);
  border:2px solid var(--border-strong);
  transition:transform .18s ease,border-color .18s ease,background .18s ease;
}

.ksc-w1 .ksc-dot-mark{width:17px;height:17px;margin:-8.5px 0 0 -8.5px;border-width:3px}

.ksc-dot.is-past .ksc-dot-mark{background:var(--accent-dark);border-color:var(--accent-dark)}

.ksc-dot.is-today .ksc-dot-mark{background:var(--accent-light);border-color:var(--accent-light)}

.ksc-dot.is-active .ksc-dot-mark{
  background:var(--accent);
  border-color:var(--accent-light);
  transform:scale(1.35);
  box-shadow:0 0 0 5px var(--accent-glow);
}

/* Etykiety stoja pod osia w TRZECH rzedach, cyklicznie. Dwa nie wystarczyly:
   02.03.2026 i 03.05.2026 dzieli na osi niecale 8 % jej dlugosci, wiec przy
   kolumnie 84 px ich etykiety nachodzily na siebie o 2 px przy oknie 1440 px.
   Przy trzech rzedach w jednym rzedzie sasiaduja punkty i oraz i+3 i najciasniejsza
   para ma ok. 163 px odstepu - zmierzone, nie oszacowane. */
/* Szerokosc kolumny rosnie z oknem: przy 84 px dluzsze napisy (a takie sa od
   2026-08-30 - "Pierwszy audyt KSC - od tego dnia mozliwe sa kary pieniezne")
   lamaly sie na piec wierszy i wchodzily na rzad nizej. Gorna granica 108 px
   bierze sie z najciasniejszej pary sasiadow w jednym rzedzie: 02.03 i 03.07
   dzieli przy 1440 px okolo 163 px, wiec 108 px zostawia miedzy nimi 55 px.
   Dolna granica 84 px obowiazuje tuz nad progiem przejscia osi w pion, gdzie
   ta sama para ma juz tylko okolo 100 px. */
.ksc-dot-label{
  position:absolute;
  left:50%;top:20px;
  width:clamp(84px,8vw,108px);
  transform:translateX(-50%);
  text-align:center;
  font-size:0.66rem;line-height:1.32;
  color:var(--text-muted);
  transition:color .18s ease;
}

.ksc-dot-date{
  display:block;
  font-family:var(--font-mono);
  font-size:0.68rem;
  color:var(--text-dim);
  margin-bottom:2px;
}

.ksc-dot.ksc-r1 .ksc-dot-label{top:70px}

.ksc-dot.ksc-r2 .ksc-dot-label{top:124px}

.ksc-dot.ksc-r1 .ksc-dot-label::before,
.ksc-dot.ksc-r2 .ksc-dot-label::before{
  content:"";
  position:absolute;left:50%;bottom:100%;
  width:1px;
  background:var(--border-hover);
}

.ksc-dot.ksc-r1 .ksc-dot-label::before{height:61px}

.ksc-dot.ksc-r2 .ksc-dot-label::before{height:115px}

.ksc-dot.is-active .ksc-dot-label{color:var(--light)}

.ksc-dot.is-active .ksc-dot-date{color:var(--accent-light)}

/* ---------- pola tekstowe ---------- */

.ksc-panels{
  display:grid;
  grid-template-columns:minmax(0,0.82fr) minmax(0,1.18fr);
  gap:18px;
  align-items:start;
}

.ksc-panel{
  background:var(--bg-card-soft);
  border:1px solid var(--border);
  border-radius:var(--radius-sm);
  padding:20px 22px;
  min-width:0;
}

.ksc-panel-detail{border-left:3px solid var(--accent)}

/* Pole "najblizszy obowiazek" jest kilka razy nizsze od pola z pelnym opisem,
   wiec przy align-items:start zostawia pod soba duza pusta kolumne. Przyklejone
   do gory towarzyszy czytaniu dlugiego opisu zamiast znikac po pierwszym
   przewinieciu. 92 px to ten sam odstep, ktorego uzywa .article-aside. */
@media (min-width:861px){
  .ksc-panel-next{position:sticky;top:92px}
}

.ksc-panel-head{
  display:flex;flex-wrap:wrap;align-items:baseline;gap:6px 12px;
  margin-bottom:10px;
}

.ksc-panel-tag{
  font-family:var(--font-mono);
  font-size:0.7rem;letter-spacing:0.1em;text-transform:uppercase;
  color:var(--accent-light);
}

.ksc-panel-date{
  font-family:var(--font-mono);
  font-size:0.72rem;color:var(--text-muted);
  margin-left:auto;
}

.ksc-count{display:flex;align-items:baseline;gap:8px;margin:2px 0 6px}

.ksc-count-n{
  font-family:var(--font-head);
  font-size:clamp(2.2rem,4vw,3.1rem);
  font-weight:800;line-height:1;letter-spacing:-0.03em;
  color:var(--accent-light);
}

.ksc-count-u{font-size:0.92rem;color:var(--text-dim)}

.ksc-next-date{
  font-family:var(--font-mono);
  font-size:0.76rem;color:var(--text-muted);
  margin-bottom:8px;
}

.ksc-next-h,.ksc-detail-h{
  font-family:var(--font-head);
  font-weight:700;line-height:1.3;
  color:var(--light);
  margin-bottom:8px;
}

.ksc-next-h{font-size:1.02rem}

.ksc-detail-h{font-size:1.12rem}

.ksc-next-p,.ksc-detail-lead{
  font-size:0.9rem;color:var(--text-dim);line-height:1.62;
  margin-bottom:10px;
}

.ksc-next-none{font-size:0.9rem;color:var(--text-dim);line-height:1.62}

.ksc-next-when,.ksc-detail-badges{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:12px}

.ksc-badge{
  display:inline-block;
  padding:3px 10px;
  border-radius:999px;
  font-family:var(--font-mono);
  font-size:0.68rem;letter-spacing:0.03em;
  border:1px solid var(--border-hover);
  color:var(--text-dim);
  background:var(--surface);
}

.ksc-badge-przed{color:var(--accent-light);border-color:var(--border-strong);background:var(--accent-bg)}

.ksc-badge-dzis{color:#0b1f17;background:var(--accent-light);border-color:var(--accent-light)}

.ksc-badge-minal{color:var(--text-muted)}

.ksc-badge-w1{color:var(--light);border-color:var(--border-strong)}

.ksc-detail-sub{
  font-family:var(--font-head);
  font-size:0.76rem;font-weight:700;
  letter-spacing:0.09em;text-transform:uppercase;
  color:var(--accent-light);
  margin:14px 0 5px;
}

.ksc-panel-detail p{font-size:0.9rem;line-height:1.68;color:var(--text-dim)}

.ksc-detail-law{
  font-size:0.84rem;
  color:var(--text-muted);
  border-left:2px solid var(--border-hover);
  padding-left:12px;
}

.ksc-detail-steps{margin:4px 0 0;padding-left:20px}

.ksc-detail-steps li{
  font-size:0.88rem;line-height:1.64;color:var(--text-dim);
  margin-bottom:7px;
}

.ksc-detail-steps li::marker{color:var(--accent);font-family:var(--font-mono);font-size:0.82em}

.ksc-noscript{
  margin:0 0 18px;
  font-size:0.88rem;color:var(--orange);
}

/* ---------- os pionowa na waskim ekranie ---------- */

@media (max-width:860px){
  .ksc-panels{grid-template-columns:1fr}
}

@media (max-width:760px){
  .ksc-cal{padding:24px 18px 22px}

  /* Na waskim ekranie os jest pionowa i biegnie przez cala karte, wiec nie ma
     juz pasa "nad osia". .ksc-rail-wrap wraca do static, przez co znak wodny
     odnosi sie do .ksc-cal i siada w prawym gornym rogu karty. Karta nie ma
     tam wolnego miejsca - naglowek narzedzia i podpowiedz stoja dokladnie tam,
     gdzie na szerokim ekranie jest sam papier - wiec winieta schodzi do roli
     faktury: mniejsza i wyraznie slabsza, zeby nie konkurowala z naglowkiem. */
  .ksc-rail-wrap{position:static;padding:8px 4px 8px 6px}

  .ksc-rail-wrap::before{
    bottom:auto;top:4px;right:-12px;
    width:min(330px,74%);
    opacity:0.11;
  }

  .ksc-rail{
    height:auto;min-height:640px;width:4px;
    margin-left:8px;
    background:linear-gradient(180deg,var(--border-hover),var(--border));
  }

  .ksc-past{
    left:0;right:0;top:0;bottom:auto;
    width:auto;height:var(--fill,0%);
    background:linear-gradient(180deg,
      rgba(16,185,129,0.10) 0%,
      rgba(16,185,129,0.35) 45%,
      var(--accent) 100%);
  }

  /* Na waskim ekranie znacznik "dzis" biegnie w PRAWO, przez cala szerokosc
     kolumny etykiet, a napis stoi na jego koncu. Wersja pozioma trzymala napis
     po lewej stronie kreski - przy osi pionowej wypadal on poza lewa krawedz
     okna (zmierzone przy 477 px: prawy brzeg napisu na x=8, sam napis szeroki
     na ok. 30 px, czyli w calosci poza ekranem). */
  .ksc-now{
    left:50%;top:var(--pos,0%);
    width:calc(100vw - 96px);max-width:430px;height:2px;
    margin-left:-10px;margin-top:-1px;
    transform:none;
  }

  .ksc-now::before{
    background:linear-gradient(to right,var(--accent-light),rgba(52,211,153,0.15));
  }

  .ksc-now::after{left:10px}

  .ksc-now-label{
    left:auto;right:0;bottom:calc(100% + 3px);top:auto;
    transform:none;
  }

  .ksc-dot{left:50%;top:var(--pos,0%)}

  .ksc-dot-label,
  .ksc-dot.ksc-r1 .ksc-dot-label,
  .ksc-dot.ksc-r2 .ksc-dot-label{
    left:18px;top:50%;
    width:calc(100vw - 108px);max-width:420px;
    margin-left:0;
    transform:translateY(-50%);
    text-align:left;
    font-size:0.74rem;
  }

  .ksc-dot .ksc-dot-label::before{display:none}

  .ksc-dot-date{display:inline-block;margin:0 8px 0 0}
}