/* angielskilekcje.pl — K25 "Porównywarka diagramowa"
   biel + grafit + turkusowy akcent, duże diagramy CSS, siatka porównawcza formatów */

:root{
  --biel:#ffffff;
  --papier:#f4f7f8;
  --papier-2:#eaf0f1;
  --grafit:#12181c;
  --grafit-2:#39464d;
  --przygaszony:#657279;
  --turkus:#0a9396;
  --turkus-ciemny:#046b6e;
  --turkus-mgla:#e2f2f2;
  --linia:#d5dee1;
  --linia-mocna:#adbbc0;
  --mono:ui-monospace,"SFMono-Regular",Menlo,Consolas,"Liberation Mono",monospace;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  background:var(--biel);
  color:var(--grafit);
  font-family:system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  font-size:17px;
  line-height:1.62;
  -webkit-text-size-adjust:100%;
}
.ramka{max-width:72rem;margin:0 auto;padding:0 1.25rem}
.waski{max-width:46rem}
a{color:var(--turkus-ciemny);text-underline-offset:2px}
a:hover{color:var(--turkus)}
h1,h2,h3,h4{line-height:1.2;font-weight:700;letter-spacing:-.015em}
h1{font-size:2.25rem;margin:.3rem 0 .8rem}
h2{font-size:1.5rem;margin:2.6rem 0 .8rem}
h3{font-size:1.12rem;margin:1.7rem 0 .4rem}
h4{font-size:1rem;margin:1.2rem 0 .3rem}
p{margin:.7rem 0}
ul,ol{margin:.7rem 0;padding-left:1.15rem}
li{margin:.28rem 0}
img,svg{max-width:100%}
code{font-family:var(--mono)}
small{font-size:.82rem}

/* ── pasek górny + nagłówek ── */
.krecha{height:6px;background:var(--grafit)}
.krecha span{display:block;height:6px;width:22%;background:var(--turkus)}
.naglowek{border-bottom:1px solid var(--linia);background:var(--biel)}
.naglowek .ramka{display:flex;align-items:center;justify-content:space-between;gap:1rem;flex-wrap:wrap;padding-top:1rem;padding-bottom:1rem}
.marka{text-decoration:none;color:var(--grafit);display:flex;align-items:center;gap:.6rem}
.marka .znak{display:flex;flex-direction:column;gap:3px;width:26px}
.marka .znak i{display:block;height:5px;background:var(--turkus)}
.marka .znak i:nth-child(2){background:var(--grafit);width:64%}
.marka .znak i:nth-child(3){background:var(--linia-mocna);width:38%}
.marka b{font-size:1.22rem;font-weight:700;letter-spacing:-.02em;display:block;line-height:1.1}
.marka em{font-style:normal;font-size:.72rem;letter-spacing:.13em;text-transform:uppercase;color:var(--przygaszony)}
.menu{display:flex;flex-wrap:wrap;gap:1.1rem;font-size:.92rem}
.menu a{color:var(--grafit-2);text-decoration:none;padding-bottom:2px;border-bottom:2px solid transparent}
.menu a:hover,.menu a[aria-current]{color:var(--grafit);border-bottom-color:var(--turkus)}

/* ── okruszki, lead, disclosure ── */
.okruszki{font-size:.82rem;color:var(--przygaszony);padding:1rem 0 0}
.okruszki a{color:var(--przygaszony)}
.etykieta{display:inline-block;font-family:var(--mono);font-size:.7rem;letter-spacing:.16em;text-transform:uppercase;color:var(--turkus-ciemny);background:var(--turkus-mgla);padding:.25rem .5rem;margin-bottom:.6rem}
.lead{font-size:1.12rem;line-height:1.55;max-width:52rem}
.lead strong{font-weight:700}
.disclosure{font-size:.83rem;line-height:1.5;color:var(--grafit-2);border-left:3px solid var(--turkus);padding:.5rem 0 .5rem .8rem;margin:1.2rem 0;max-width:56rem}
.nota-wydawcy{color:var(--turkus-ciemny);font-weight:700}
.data-akt{font-family:var(--mono);font-size:.8rem;color:var(--przygaszony);letter-spacing:.02em}

/* ── spis treści ── */
.spis{border-top:1px solid var(--linia);border-bottom:1px solid var(--linia);padding:.9rem 0;margin:1.4rem 0 0;font-size:.9rem}
.spis ol{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:.4rem 1.4rem;counter-reset:s}
.spis li{margin:0;counter-increment:s}
.spis li a{text-decoration:none;color:var(--grafit-2)}
.spis li a::before{content:counter(s,decimal-leading-zero) " ";font-family:var(--mono);color:var(--turkus);font-size:.8rem}
.spis li a:hover{color:var(--grafit);text-decoration:underline}

/* ── SIATKA FORMATÓW (główny diagram) ── */
.siatka-formatow{display:grid;grid-template-columns:repeat(auto-fit,minmax(15.5rem,1fr));gap:1px;background:var(--linia);border:1px solid var(--linia);margin:1.4rem 0}
.format{background:var(--biel);padding:1.1rem 1rem 1.2rem}
.format h3{margin:0 0 .1rem;font-size:1.06rem}
.format .rola{font-size:.78rem;color:var(--przygaszony);display:block;margin-bottom:.7rem}
.format dl{margin:.7rem 0 0;font-size:.86rem}
.format dt{font-size:.68rem;letter-spacing:.11em;text-transform:uppercase;color:var(--przygaszony);margin-top:.6rem}
.format dd{margin:.1rem 0 0}
.format .kwota{font-family:var(--mono);font-size:1.28rem;font-weight:700;letter-spacing:-.03em;display:block;line-height:1.15}
.format .kwota small{font-family:system-ui,sans-serif;font-size:.7rem;font-weight:400;color:var(--przygaszony);display:block;letter-spacing:0}

/* pasek 60 minut podzielony na uczniów */
.pasek60{display:flex;gap:2px;height:26px;margin:.5rem 0 .2rem}
.pasek60 i{display:block;flex:1;background:var(--turkus)}
.pasek60 i.cichy{background:var(--papier-2)}
.pasek60.pusty{border:1px dashed var(--linia-mocna);background:repeating-linear-gradient(135deg,var(--papier) 0 6px,var(--biel) 6px 12px)}
.podpis-paska{font-size:.74rem;color:var(--przygaszony);font-family:var(--mono)}

/* ── wykres słupkowy: koszt minuty mówienia ── */
.slupki{margin:1.2rem 0 .4rem;border-top:1px solid var(--linia)}
.slupki .rzad{display:grid;grid-template-columns:12.5rem 1fr 5.2rem;gap:.7rem;align-items:center;padding:.55rem 0;border-bottom:1px solid var(--linia)}
.slupki .opis{font-size:.88rem}
.slupki .opis small{display:block;color:var(--przygaszony);font-size:.76rem}
.slupki .tor{background:var(--papier);height:20px;position:relative}
.slupki .tor i{display:block;height:20px;background:var(--turkus)}
.slupki .tor i.ciemny{background:var(--grafit-2)}
.slupki .wart{font-family:var(--mono);font-size:.94rem;text-align:right;font-weight:700}
@media (max-width:640px){
  .slupki .rzad{grid-template-columns:1fr 4.6rem;grid-template-areas:"o w" "t t"}
  .slupki .opis{grid-area:o}.slupki .wart{grid-area:w}.slupki .tor{grid-area:t}
}

/* ── tabele ── */
.przewijak{overflow-x:auto;margin:1.1rem 0}
table{border-collapse:collapse;width:100%;font-size:.88rem;min-width:38rem}
caption{text-align:left;font-size:.82rem;color:var(--przygaszony);padding-bottom:.5rem}
th,td{border-bottom:1px solid var(--linia);padding:.55rem .6rem;text-align:left;vertical-align:top}
thead th{background:var(--grafit);color:var(--biel);font-size:.72rem;letter-spacing:.08em;text-transform:uppercase;border-bottom:none;font-weight:600}
tbody th{font-weight:600}
tbody tr:hover{background:var(--papier)}
td.liczba,th.liczba{font-family:var(--mono);white-space:nowrap}
.ocena-kol{font-family:var(--mono);font-weight:700;color:var(--turkus-ciemny)}

/* ── mini-ranking ── */
.mini{border:1px solid var(--linia);margin:1.2rem 0 2rem}
.mini > header{background:var(--papier);border-bottom:1px solid var(--linia);padding:.85rem 1rem}
.mini > header h3{margin:0;font-size:1.14rem}
.mini > header p{margin:.25rem 0 0;font-size:.85rem;color:var(--grafit-2)}
.poz{display:grid;grid-template-columns:2.6rem 1fr 4.6rem;gap:.8rem;padding:.9rem 1rem;border-bottom:1px solid var(--linia)}
.poz:last-child{border-bottom:none}
.poz .nr{font-family:var(--mono);font-size:1.5rem;font-weight:700;color:var(--linia-mocna);line-height:1.1}
.poz h4{margin:0 0 .15rem;font-size:1.02rem}
.poz .cena{font-family:var(--mono);font-size:.9rem;color:var(--turkus-ciemny);font-weight:700}
.poz p{margin:.3rem 0 0;font-size:.9rem}
.poz .zrodlo{font-size:.76rem;color:var(--przygaszony);margin-top:.35rem;display:block}
.poz .zrodlo a{color:var(--przygaszony)}
.poz .punkty{font-family:var(--mono);font-size:1.24rem;font-weight:700;text-align:right;letter-spacing:-.03em}
.poz .punkty small{display:block;font-size:.66rem;font-weight:400;color:var(--przygaszony);letter-spacing:.06em}
.legenda-nota{font-size:.78rem;color:var(--przygaszony);margin:.4rem 0 0}
@media (max-width:560px){
  .poz{grid-template-columns:2.2rem 1fr;grid-template-areas:"n t" "n p"}
  .poz .nr{grid-area:n}.poz .tresc{grid-area:t}.poz .punkty{grid-area:p;text-align:left}
  .poz .punkty small{display:inline;margin-left:.4rem}
}

/* ── boks wyliczenia ── */
.rachunek{background:var(--papier);border-left:4px solid var(--turkus);padding:1rem 1.1rem;margin:1.3rem 0}
.rachunek h3{margin-top:0}
.rachunek .zalozenia{font-size:.86rem;margin:.5rem 0 0;padding-left:1.1rem}

/* ── karty artykułów ── */
.karty{display:grid;grid-template-columns:repeat(auto-fit,minmax(17rem,1fr));gap:1px;background:var(--linia);border:1px solid var(--linia);margin:1.2rem 0}
.karty article{background:var(--biel);padding:1rem}
.karty h3{margin:0 0 .3rem;font-size:1.02rem}
.karty h3 a{text-decoration:none;color:var(--grafit)}
.karty h3 a:hover{color:var(--turkus-ciemny)}
.karty p{margin:.2rem 0 0;font-size:.88rem;color:var(--grafit-2)}
.karty time{font-family:var(--mono);font-size:.74rem;color:var(--przygaszony)}

/* ── FAQ ── */
.faq h3{font-size:1.02rem;margin:1.4rem 0 .2rem}
.faq p{margin:.2rem 0 0;font-size:.94rem}

/* ── stopka ── */
.stopka{background:var(--grafit);color:#c9d4d8;margin-top:3.5rem;padding:2.2rem 0 1.6rem;font-size:.88rem}
.stopka a{color:#7fd3d4}
.stopka h2{color:var(--biel);font-size:.98rem;margin:0 0 .5rem}
.stopka-uklad{display:grid;grid-template-columns:2fr 1fr 1fr;gap:2rem}
.stopka ul{list-style:none;margin:0;padding:0}
.stopka li{margin:.2rem 0}
.stopka-nota{border-top:1px solid #2c3941;margin-top:1.6rem;padding-top:.9rem;font-size:.79rem;color:#8b9aa1}
@media (max-width:760px){.stopka-uklad{grid-template-columns:1fr;gap:1.4rem}}

/* ── 404 ── */
.blad{padding:4rem 0 2rem;text-align:left}
.blad .kod{font-family:var(--mono);font-size:5rem;font-weight:700;color:var(--turkus);line-height:1}

@media (max-width:640px){
  h1{font-size:1.75rem}
  h2{font-size:1.28rem}
  body{font-size:16px}
}