/* angielskinaegzamin.pl — K16 "zeszyt ucznia"
   Papier w linie, atramentowy niebieski, czerwona korekta nauczyciela.
   Zero webfontów, zero JS. */

:root {
  --papier: #fbf7ec;
  --papier-ciemny: #f3eedd;
  --linia: rgba(58, 100, 170, .22);
  --atrament: #1d3a72;
  --atrament-ciemny: #12264e;
  --korekta: #c1272d;
  --korekta-jasna: rgba(193, 39, 45, .12);
  --margines: #e0888b;
  --olowek: #5d6472;
  --zakreslacz: #ffe873;
  --f-naglowek: "Avenir Next Condensed", "Arial Narrow", "Helvetica Neue", Arial, sans-serif;
  --f-tekst: Georgia, "Times New Roman", serif;
  --f-pismo: "Bradley Hand", "Segoe Print", "Comic Sans MS", cursive;
  --wys-linii: 28px;
}

* { margin: 0; padding: 0; box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  font-family: var(--f-tekst);
  font-size: 17px;
  line-height: var(--wys-linii);
  color: var(--atrament);
  background: var(--papier);
  /* delikatna faktura papieru */
  background-image:
    radial-gradient(rgba(29, 58, 114, .025) 1px, transparent 1px),
    radial-gradient(rgba(193, 39, 45, .015) 1px, transparent 1px);
  background-size: 190px 190px, 230px 230px;
  background-position: 0 0, 60px 90px;
}

/* ====== SZKIELET STRONY ====== */

.zeszyt {
  max-width: 960px;
  margin: 0 auto;
  padding: 0 20px;
}

/* kartka w linie: tekst siedzi na liniach */
.kartka {
  position: relative;
  background-image: repeating-linear-gradient(
    to bottom,
    transparent 0,
    transparent calc(var(--wys-linii) - 1px),
    var(--linia) calc(var(--wys-linii) - 1px),
    var(--linia) var(--wys-linii)
  );
  padding: var(--wys-linii) 8px var(--wys-linii) 76px;
  border-left: none;
}

/* czerwony margines jak w zeszycie */
.kartka::before {
  content: "";
  position: absolute;
  top: 0; bottom: 0; left: 52px;
  width: 2px;
  background: var(--margines);
}

/* dziurki na skoroszyt */
.kartka::after {
  content: "";
  position: absolute;
  top: 90px; left: 16px;
  width: 13px; height: 13px;
  border-radius: 50%;
  background: var(--papier-ciemny);
  box-shadow: inset 0 1px 2px rgba(18, 38, 78, .25), 0 240px 0 var(--papier-ciemny), inset 0 1px 2px rgba(18, 38, 78, .25);
}

/* ====== NAGŁÓWEK / NAKLEJKA NA ZESZYT ====== */

.oklejka {
  margin: 34px 0 8px;
  border: 3px double var(--atrament);
  background: #fffdf6;
  padding: 18px 24px 14px;
  box-shadow: 4px 5px 0 rgba(18, 38, 78, .12);
}

.oklejka .przedmiot {
  font-family: var(--f-naglowek);
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .04em;
  font-size: 15px;
  color: var(--olowek);
}

.oklejka h1, .oklejka .tytul {
  font-family: var(--f-naglowek);
  font-weight: 800;
  font-size: clamp(30px, 5.4vw, 46px);
  line-height: 1.06;
  text-transform: uppercase;
  color: var(--atrament-ciemny);
  margin: 6px 0 4px;
}

.oklejka .tytul a { color: inherit; text-decoration: none; }

.oklejka .podpis-zeszytu {
  font-family: var(--f-pismo);
  color: var(--korekta);
  font-size: 17px;
}

/* ====== NAWIGACJA — zakładki-rozdziały ====== */

.nawigacja { display: flex; flex-wrap: wrap; gap: 4px 18px; padding: 8px 2px 18px; }

.nawigacja a {
  font-family: var(--f-naglowek);
  font-weight: 700;
  font-size: 15px;
  text-transform: uppercase;
  letter-spacing: .05em;
  color: var(--atrament);
  text-decoration: none;
  border-bottom: 3px solid transparent;
  padding-bottom: 1px;
}

.nawigacja a:hover { color: var(--korekta); }
.nawigacja a[aria-current="page"] { border-bottom-color: var(--korekta); color: var(--atrament-ciemny); }

/* ====== TYPOGRAFIA TREŚCI ====== */

h2 {
  font-family: var(--f-naglowek);
  font-weight: 800;
  font-size: 27px;
  line-height: var(--wys-linii);
  text-transform: uppercase;
  letter-spacing: .01em;
  color: var(--atrament-ciemny);
  margin: var(--wys-linii) 0 0;
}

h2 .nr-tematu {
  color: var(--korekta);
  font-family: var(--f-pismo);
  font-size: 19px;
  text-transform: none;
  letter-spacing: 0;
  margin-right: 8px;
}

h3 {
  font-family: var(--f-naglowek);
  font-weight: 700;
  font-size: 20px;
  line-height: var(--wys-linii);
  color: var(--atrament-ciemny);
  margin-top: var(--wys-linii);
}

p, ul, ol { margin: 0 0 var(--wys-linii); }
h2 + p, h3 + p, h2 + ul, h3 + ul { margin-top: 0; }

ul, ol { padding-left: 26px; }
li { margin-bottom: 0; }

a { color: var(--atrament); text-decoration-color: rgba(29, 58, 114, .5); }
a:hover { color: var(--korekta); text-decoration-color: var(--korekta); }

strong { color: var(--atrament-ciemny); }

/* zakreślacz na kluczowe liczby */
.zakreslone {
  background: linear-gradient(100deg, rgba(255, 232, 115, 0) 1%, var(--zakreslacz) 4%, var(--zakreslacz) 96%, rgba(255, 232, 115, 0) 99%);
  padding: 0 3px;
}

/* czerwona korekta nauczyciela */
.korekta {
  color: var(--korekta);
  text-decoration: underline wavy var(--korekta) 1.5px;
  text-underline-offset: 4px;
}

.notka-marginesowa {
  font-family: var(--f-pismo);
  color: var(--korekta);
  font-size: 16px;
  line-height: 1.25;
}

/* data aktualizacji — pieczątka */
.pieczatka {
  display: inline-block;
  font-family: var(--f-naglowek);
  font-weight: 700;
  font-size: 13px;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--korekta);
  border: 2px solid var(--korekta);
  border-radius: 4px;
  padding: 2px 10px;
  transform: rotate(-1.6deg);
  background: rgba(255, 253, 246, .8);
}

/* ====== WERDYKT (answer-first) ====== */

.werdykt {
  border: 2.5px solid var(--korekta);
  border-radius: 10px 14px 9px 16px / 14px 9px 15px 10px; /* "odręczna" ramka */
  background: #fffdf6;
  padding: 18px 22px 12px;
  margin: 18px 0 var(--wys-linii);
  position: relative;
}

.werdykt .etykieta {
  position: absolute;
  top: -14px; left: 18px;
  background: var(--korekta);
  color: #fffdf6;
  font-family: var(--f-naglowek);
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .07em;
  font-size: 13px;
  padding: 2px 12px;
  transform: rotate(-1.2deg);
}

/* ====== OCENA — czerwone kółko jak na klasówce ====== */

.ocena {
  display: inline-block;
  font-family: var(--f-pismo);
  color: var(--korekta);
  font-size: 19px;
  line-height: 1;
  border: 2.5px solid var(--korekta);
  border-radius: 48% 52% 55% 45% / 58% 48% 52% 42%;
  padding: 7px 10px 6px;
  transform: rotate(-3deg);
  white-space: nowrap;
}

.ocena small { font-size: 13px; }

/* ====== DISCLOSURE ====== */

.disclosure {
  border-top: 1px solid var(--linia);
  padding: 6px 0 0;
  margin: 0 0 var(--wys-linii);
  font-size: 13px;
  line-height: 20px;
  color: var(--olowek);
}

/* ====== BADGE REKLAMA ====== */

.badge-reklama {
  display: inline-block;
  vertical-align: 2px;
  margin-left: 10px;
  font-family: var(--f-naglowek);
  font-weight: 600;
  font-size: 11.5px;
  text-transform: uppercase;
  letter-spacing: .12em;
  color: var(--atrament);
  border: 1px solid var(--linia);
  padding: 1px 7px;
  background: transparent;
}

/* ====== STATYSTYKI CKE ====== */

.statystyki {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: 14px;
  margin: 0 0 var(--wys-linii);
}

.statystyki .stat {
  border: 2px solid var(--atrament);
  background: #fffdf6;
  padding: 12px 14px 10px;
  box-shadow: 3px 3px 0 rgba(18, 38, 78, .14);
}

.statystyki .liczba {
  display: block;
  font-family: var(--f-naglowek);
  font-weight: 800;
  font-size: 34px;
  line-height: 1;
  color: var(--korekta);
}

.statystyki .opis { display: block; font-size: 14px; line-height: 20px; color: var(--olowek); margin-top: 6px; }
.statystyki .opis a { color: var(--olowek); }

/* ====== TABELA RANKINGU ====== */

.tabela-obwoluta { overflow-x: auto; margin: 0 0 var(--wys-linii); }

table {
  border-collapse: collapse;
  width: 100%;
  min-width: 780px;
  background: #fffdf6;
  font-size: 15px;
  line-height: 22px;
}

caption {
  text-align: left;
  font-family: var(--f-naglowek);
  font-weight: 700;
  font-size: 15px;
  text-transform: uppercase;
  letter-spacing: .04em;
  color: var(--olowek);
  padding-bottom: 8px;
}

th, td { border: 1.5px solid var(--atrament); padding: 9px 12px; text-align: left; vertical-align: top; }

thead th {
  font-family: var(--f-naglowek);
  font-weight: 800;
  text-transform: uppercase;
  font-size: 13px;
  letter-spacing: .05em;
  background: var(--atrament);
  color: var(--papier);
  border-color: var(--atrament);
}

tbody th[scope="row"] { font-family: var(--f-tekst); font-weight: 700; }

td.kol-ocena { font-family: var(--f-naglowek); font-weight: 800; font-size: 17px; color: var(--korekta); white-space: nowrap; }

/* ====== KARTY POZYCJI — wpisy w zeszycie ====== */

.wpis {
  position: relative;
  margin: 0 0 var(--wys-linii);
  padding-top: 2px;
}

.wpis .nr-wpisu {
  position: absolute;
  left: -66px;
  top: 0;
  width: 44px;
  text-align: center;
  font-family: var(--f-pismo);
  font-size: 25px;
  line-height: var(--wys-linii);
  color: var(--korekta);
}

.wpis h3 { margin-top: 0; font-size: 22px; }
.wpis h3 a { text-decoration: none; border-bottom: 2px solid var(--atrament); }
.wpis h3 a:hover { border-bottom-color: var(--korekta); }

.wpis .kim-sa { display: block; font-family: var(--f-tekst); font-weight: 400; font-size: 15px; color: var(--olowek); text-transform: none; letter-spacing: 0; }

.wpis .naglowek-wpisu { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; }

.wpis dl.fakty { margin: 0 0 var(--wys-linii); }
.wpis dl.fakty div { display: flex; gap: 8px; }
.wpis dl.fakty dt { font-weight: 700; white-space: nowrap; }
.wpis dl.fakty dt::after { content: ":"; }

.plus-minus { display: grid; grid-template-columns: 1fr 1fr; gap: 0 24px; margin-bottom: var(--wys-linii); }
.plus-minus h4 { font-family: var(--f-naglowek); font-size: 15px; text-transform: uppercase; letter-spacing: .05em; line-height: var(--wys-linii); }
.plus-minus .minusy h4 { color: var(--korekta); }
.plus-minus ul { margin-bottom: 0; }

.zrodla-wpisu { font-size: 13.5px; line-height: 20px; color: var(--olowek); }
.zrodla-wpisu a { color: var(--olowek); word-break: break-all; }

/* ====== FAQ ====== */

.faq h3 { color: var(--atrament-ciemny); }
.faq h3::before { content: "Q: "; color: var(--korekta); font-family: var(--f-pismo); }

/* ====== KRYTERIA (metodologia) ====== */

.kryteria td:first-child { font-weight: 700; }

/* ====== STOPKA ====== */

.stopka {
  margin-top: 40px;
  border-top: 3px double var(--atrament);
  padding: 22px 0 46px;
  font-size: 14px;
  line-height: 22px;
  color: var(--olowek);
}

.stopka a { color: var(--olowek); }
.stopka .kolumny { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 18px; margin-bottom: 16px; }
.stopka h4 { font-family: var(--f-naglowek); text-transform: uppercase; font-size: 13px; letter-spacing: .06em; color: var(--atrament); margin-bottom: 6px; }

/* ====== 404 ====== */

.strona-404 { text-align: center; padding: 80px 20px; }
.strona-404 .wielka-ocena {
  font-family: var(--f-pismo);
  font-size: 120px;
  line-height: 1;
  color: var(--korekta);
  display: inline-block;
  border: 4px solid var(--korekta);
  border-radius: 46% 54% 52% 48% / 56% 46% 54% 44%;
  padding: 30px 44px;
  transform: rotate(-5deg);
  margin-bottom: 30px;
}

/* ====== RESPONSYWNOŚĆ ====== */

@media (max-width: 720px) {
  .kartka { padding-left: 46px; }
  .kartka::before { left: 30px; }
  .kartka::after { display: none; }
  .wpis .nr-wpisu { left: -42px; font-size: 20px; width: 30px; }
  .plus-minus { grid-template-columns: 1fr; }
  .wpis .naglowek-wpisu { flex-direction: column; }
  .statystyki { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 460px) {
  body { font-size: 16px; }
  .statystyki { grid-template-columns: 1fr; }
}

@media print {
  .nawigacja, .stopka { display: none; }
}