/* Baza: reset, typografia, kontener aplikacji, klasy pomocnicze. Kolory wyłącznie przez tokeny. */
/* fonts.css jest linkowany w <head> przed tym plikiem — @import opóźniał odkrycie @font-face i wydłużał podmianę kroju */

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;height:100%}
body{margin:0;background:var(--bg);color:var(--fg);font:16px/1.45 var(--font-body);-webkit-font-smoothing:antialiased;min-height:100vh;min-height:100dvh}
h1,h2,h3,h4{font-family:var(--font-display);margin:0;text-wrap:balance;line-height:1.2}
h1{font-size:24px;font-weight:800;letter-spacing:-.01em}
h2{font-size:20px;font-weight:800}
h3{font-size:17px;font-weight:700}
h4{font-size:15px;font-weight:700}
p{margin:0}
button{font:inherit;color:inherit}
a{color:var(--accent)}
img,svg,video{max-width:100%;height:auto}
i.fa-solid,i.fa-regular{flex:none}
:focus-visible{outline:none;box-shadow:var(--ring)}

/* Kontener aplikacji: na telefonie i tablecie pełna szerokość; od lg stała kolumna z paskiem po lewej — progi w components.css (sekcja „Siatka responsywna"). Wysokość = ekran, przewija .scroll. */
.app{display:flex;flex-direction:column;width:100%;max-width:100%;min-height:100vh;min-height:100dvh;height:100vh;height:100dvh;margin:0 auto;position:relative}
.app--minimal{min-height:100vh;min-height:100dvh}
body.locked,body.sheet-open{overflow:hidden}

/* Ekran i obszar przewijany (jak w makiecie) */
.screen{flex:1;display:flex;flex-direction:column;min-height:0}
.scroll{flex:1;min-height:0;overflow-y:auto;overscroll-behavior:contain;padding:12px 16px 24px;display:flex;flex-direction:column;gap:12px;-webkit-overflow-scrolling:touch}
.scroll.center{justify-content:center;align-items:stretch}
/* Element flex z overflow:hidden (.list, .tbl) dostaje min-height:0 i kurczy się zamiast wypchnąć
   przewijanie — lista 30 uczniów przycinała się do wysokości ekranu. Dzieci .scroll nie rosną i nie maleją. */
.scroll > *{flex:none}

/* Klasy pomocnicze */
.row{display:flex;align-items:center;gap:10px}
.row.between{justify-content:space-between}
.stack{display:flex;flex-direction:column;gap:8px}
.grow{flex:1;min-width:0}
.muted{color:var(--fg-muted)}
.small{font-size:13.5px}
.num{font-variant-numeric:tabular-nums}
.amount{font-family:var(--font-body);font-weight:700;font-variant-numeric:tabular-nums;white-space:nowrap}
.amount.big{font-size:28px;letter-spacing:-.01em}
.divider{height:1px;background:var(--border);margin:4px 0;border:0}
.eyebrow{font-size:11.5px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--fg-muted);margin-top:6px}
.eyebrow.sticky{position:sticky;top:0;background:var(--bg);padding:8px 0 4px;z-index:2;margin:0}
.center{text-align:center}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;margin:-1px;padding:0;border:0}
[hidden]{display:none!important}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}
}