/* ostatnidzwonek.pl: strona lektury. Wariant „Zeszyt” (Literata + Figtree, butelkowa zieleń, żółty akcent).
   Kolory i krój z projektu „Pary kolor i krój”, wariant 1b. Kroje ładuje <link> do Google Fonts w nagłówku strony. */
:root {
  --bg: #F4F6F2;
  --karta: #FFFFFF;
  --tekst: #17211B;
  --tekst2: #33413A;
  --przygaszony: #55655A;
  --linia: #E1E8E3;
  --linia2: #D3DDD5;
  --akcent: #1F5A3A;
  --jasny: #DDEBE1;
  --zolty: #F2C14E;
  --okno-tlo: #FFFFFF;
  --ramka-rozowa: #F9E8EC;
  --ramka-niebieska: #E6EEF7;
  --ramka-zielona: #E3F1E7;
  --ramka-szara: #EEF0EC;
  --serif: "Literata", Georgia, "Times New Roman", serif;
  --sans: "Figtree", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}
:root:not([data-theme="light"]) { color-scheme: light dark; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #0E1611; --karta: #16211A; --tekst: #E8EFE9; --tekst2: #C8D5CC; --przygaszony: #9DB0A3;
    --linia: #263529; --linia2: #324538; --akcent: #6CC596; --jasny: #1D3426; --zolty: #D9A93A; --okno-tlo: #16211A;
    --ramka-rozowa: #3A2327; --ramka-niebieska: #1F2B3A; --ramka-zielona: #1F3324; --ramka-szara: #222A24;
  }
}
:root[data-theme="dark"] {
  color-scheme: dark;
  --bg: #0E1611; --karta: #16211A; --tekst: #E8EFE9; --tekst2: #C8D5CC; --przygaszony: #9DB0A3;
  --linia: #263529; --linia2: #324538; --akcent: #6CC596; --jasny: #1D3426; --zolty: #D9A93A; --okno-tlo: #16211A;
  --ramka-rozowa: #3A2327; --ramka-niebieska: #1F2B3A; --ramka-zielona: #1F3324; --ramka-szara: #222A24;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: 8rem; }
body { margin: 0; background: var(--bg); color: var(--tekst); font: 17px/1.65 var(--serif); }
summary, .okno dt, .okno dd, .spis, table, .zobacz, .metryczka { font-family: var(--sans); }
a { color: var(--akcent); text-underline-offset: 3px; }

/* ---------- górna belka ---------- */
.belka { position: sticky; top: 0; z-index: 50; background: var(--karta); border-bottom: 1px solid var(--linia); font-family: var(--sans); box-shadow: 0 1px 3px rgba(0,0,0,.06); }
.belka a { text-decoration: none; }
.belka-wew { max-width: 74rem; margin: 0 auto; padding: 14px 32px 8px; display: flex; align-items: center; gap: 1.2rem; }
.marka { font: 700 18px var(--sans); letter-spacing: -.01em; color: var(--tekst); white-space: nowrap; }
.marka-znak { display: none; }
.marka-zolta { background: linear-gradient(transparent 55%, var(--zolty) 55%); padding: 0 2px; }
.menu { display: flex; gap: .15rem; margin-left: auto; flex-wrap: wrap; }
.menu a { padding: .3rem .7rem; border-radius: 6px; font: 500 14px var(--sans); color: var(--tekst2); }
.menu a:hover, .burger nav a:hover { background: var(--jasny); color: var(--akcent); }
.burger { display: none; margin-left: auto; position: relative; }
.burger summary { list-style: none; cursor: pointer; padding: .3rem .8rem; border: 1px solid var(--linia2); border-radius: 6px; font: 600 14px var(--sans); color: var(--tekst2); }
.burger summary::-webkit-details-marker { display: none; }
.burger nav { position: absolute; right: 0; top: calc(100% + .4rem); min-width: 13rem; background: var(--karta); border: 1px solid var(--linia2); border-radius: 10px; padding: .4rem; display: grid; box-shadow: 0 6px 18px rgba(0,0,0,.12); }
.burger nav a { padding: .55rem .75rem; border-radius: 6px; font: 500 14px var(--sans); color: var(--tekst2); }
.podmenu-wew { max-width: 74rem; margin: 0 auto; padding: 0 32px; display: flex; align-items: flex-end; gap: .1rem .15rem; overflow-x: auto; white-space: nowrap; }
.podmenu-tytul { font: 600 24px/1 var(--serif); letter-spacing: -.015em; margin-right: .5rem; padding: 6px 0 10px; color: var(--tekst); }
.podmenu-autor { font: 500 14px var(--sans); color: var(--przygaszony); margin-right: 1.2rem; padding: 6px 0 10px; }
.podmenu a { padding: 10px 8px 9px; font: 600 13.5px var(--sans); color: var(--tekst2); border-bottom: 3px solid transparent; }
.podmenu a:hover { color: var(--akcent); }
.podmenu a[aria-current="page"] { color: var(--akcent); border-bottom-color: var(--akcent); }

/* ---------- okruszki i karta treści ---------- */
.okruchy { max-width: 74rem; margin: 0 auto; padding: 14px 32px 0; font: 500 12px/1.4 var(--sans); color: var(--przygaszony); }
.okruchy ol { list-style: none; display: flex; flex-wrap: wrap; gap: .3rem; margin: 0; padding: 0; }
.okruchy li + li::before { content: "›"; margin-right: .35rem; }
.okruchy a { color: var(--przygaszony); text-decoration: none; }
.okruchy a:hover { color: var(--akcent); }
.lektura { max-width: 74rem; margin: 0 auto 2.5rem; padding: 18px 32px 40px; }

/* ---------- nagłówki i tekst ---------- */
h1 { font: 600 32px/1.2 var(--serif); letter-spacing: -.01em; margin: 0 0 1rem; text-wrap: pretty; }
.lede { font-size: 17px; color: var(--tekst2); max-width: 46rem; text-wrap: pretty; }
h2 { font: 700 23px/1.25 var(--sans); color: var(--akcent); margin: 2.4rem 0 .9rem; }
h3 { font: 700 18px/1.3 var(--sans); margin: 1.6rem 0 .5rem; color: var(--tekst); }
h4 { font: 700 15px/1.3 var(--sans); margin: 1.4rem 0 .3rem; color: var(--akcent); }
p { text-wrap: pretty; }
.spis ul { list-style: none; display: flex; flex-wrap: wrap; gap: .4rem .5rem; padding: 0; margin: 1rem 0 0; font-size: .9rem; }
.spis a { display: inline-block; padding: .25rem .7rem; border: 1px solid var(--linia2); border-radius: 99px; text-decoration: none; background: var(--karta); font-weight: 500; }
.spis a:hover { border-color: var(--akcent); background: var(--jasny); }

/* ---------- akapit z oknem definicji po prawej ---------- */
.wiersz { display: grid; grid-template-columns: minmax(0, 1fr); gap: .6rem 1.5rem; margin: 0 0 1.1rem; }
.wiersz p { margin: 0; max-width: 42rem; }
.okna { display: grid; gap: .7rem; align-content: start; }
.okno { margin: 0; padding: 14px 16px; background: var(--okno-tlo); border: 1px solid var(--linia2); border-radius: 10px; font: 400 13px/1.5 var(--sans); }
.okno dt { font: 700 13px var(--sans); color: var(--akcent); margin: 0 0 .25rem; }
.okno dd { margin: 0; color: var(--tekst2); }
.poj { background: linear-gradient(transparent 55%, var(--zolty) 55%); padding: 0 2px; }
@media (min-width: 62rem) {
  .wiersz:has(.okna) { grid-template-columns: minmax(0, 42rem) 210px; justify-content: start; }
  .wiersz .okna { padding-top: .1rem; }
}

/* ---------- zakładki i karty rozwijane ---------- */
.zakladka { margin: 0 0 .8rem; border: 1px solid var(--linia2); border-radius: 10px; background: var(--karta); }
.zakladka[open] { border-color: var(--akcent); }
.zakladka > summary { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: .9rem 1.1rem; cursor: pointer; list-style: none; font: 700 16px var(--sans); }
.zakladka > summary::-webkit-details-marker { display: none; }
.zakladka > summary::after { content: "+"; font-size: 1.5rem; line-height: 1; color: var(--akcent); margin-left: auto; }
.zakladka[open] > summary::after { content: "–"; }
.zakladka-ile { font: 400 12.5px var(--sans); color: var(--przygaszony); }
.zakladka-tresc { padding: 0 1.1rem 1.1rem; max-width: 48rem; }
.zakladka-tresc .opracowanie + .opracowanie { border-top: 1px solid var(--linia); margin-top: 1.6rem; }
.zakladka-tresc p { margin: 0 0 1rem; }
.postac { margin: 0 0 .6rem; border: 1px solid var(--linia); border-radius: 8px; background: var(--bg); }
.postac[open] { border-color: var(--linia2); background: var(--karta); }
.postac > summary { padding: .7rem 1rem; cursor: pointer; font: 700 15px var(--sans); }
.postac-tresc { padding: 0 1rem 1rem; }
.postac-tresc .lede { font-size: 16px; margin-top: 0; }
.postac-link { margin: .8rem 0 0; font: 700 14px var(--sans); }

/* ---------- ramki ze starego serwisu ---------- */
.ramka { margin: 1.2rem 0; padding: .9rem 1.1rem; border-radius: 8px; font-size: .95rem; line-height: 1.6; }
.ramka-rozowa { background: var(--ramka-rozowa); }
.ramka-niebieska { background: var(--ramka-niebieska); }
.ramka-zielona { background: var(--ramka-zielona); }
.ramka-szara { background: var(--ramka-szara); }
blockquote { margin: 1.2rem 0; padding: .2rem 1.1rem; border-left: 3px solid var(--zolty); color: var(--przygaszony); }
.cytat-karta { margin: 1.1rem 0; padding: 18px 22px; max-width: 46rem; background: var(--jasny); border: 0; border-radius: 12px; color: var(--tekst); }
.cytat-karta p { margin: 0 0 .5rem; font: italic 400 20px/1.45 var(--serif); }
.cytat-karta footer { font: 500 13px/1.5 var(--sans); color: var(--akcent); }

/* cytat wydzielony w tekście charakterystyki (osobne okno) */
.cytat-okno { margin: 1rem 0 1.2rem; padding: 14px 18px; max-width: 42rem; background: var(--jasny); border: 0; border-left: 4px solid var(--akcent); border-radius: 8px; color: var(--tekst); }
.cytat-okno p { margin: 0 0 .35rem; font: italic 400 18px/1.5 var(--serif); }
.cytat-okno footer { font: 500 12.5px/1.4 var(--sans); color: var(--akcent); }
.kompendium section > .cytat-okno { max-width: 42rem; }
.kompendium b, .kompendium strong { color: var(--tekst); }

/* ---------- układ tomów i listy ---------- */
.tom { max-width: 48rem; }
.tom p { margin: 0 0 1rem; }
.wiecej { max-width: 48rem; margin-top: 1.6rem; padding: 1rem 1.2rem; border: 1px dashed var(--linia2); border-radius: 10px; }
.wiecej h3 { margin-top: 0; }
.wiecej ul { columns: 2 16rem; margin: 0; padding-left: 1.1rem; }

/* ---------- kompendium ---------- */
.kompendium { max-width: 74rem; }
.kompendium section { margin: 0 0 1rem; }
.kompendium section > p, .kompendium section > ul, .kompendium section > ol, .kompendium section > table { max-width: 46rem; }
.kompendium-glowa { margin-bottom: 1rem; }
.metryczka { display: grid; margin: 1.2rem 0; max-width: 46rem; border: 1px solid var(--linia2); border-radius: 10px; overflow: hidden; background: var(--karta); }
.metryczka > div { display: grid; grid-template-columns: 11rem 1fr; gap: 1rem; padding: .65rem 1rem; border-top: 1px solid var(--linia); }
.metryczka > div:first-child { border-top: 0; }
.metryczka dt { font: 700 12px var(--sans); color: var(--przygaszony); text-transform: uppercase; letter-spacing: .04em; padding-top: .2rem; }
.metryczka dd { margin: 0; font-size: 16px; }
.porownanie { width: 100%; max-width: 46rem; border-collapse: separate; border-spacing: 0; margin: 1rem 0 1.4rem; font: 400 14px/1.45 var(--sans); background: var(--karta); border: 1px solid var(--linia2); border-radius: 10px; overflow: hidden; }
.porownanie th, .porownanie td { padding: 9px 12px; text-align: left; vertical-align: top; }
.porownanie thead th { background: var(--akcent); color: #fff; font-weight: 600; }
.porownanie tbody th { font-weight: 600; width: 9rem; }
.porownanie tbody tr:nth-child(even) > * { background: var(--bg); }
.etapy { list-style: none; padding: 0; margin: 1rem 0; }
.etapy li { position: relative; padding: 0 0 1.2rem 1.4rem; border-left: 3px solid var(--jasny); margin-left: .5rem; }
.etapy li:last-child { border-left-color: transparent; padding-bottom: 0; }
.etapy li::before { content: ""; position: absolute; left: -.58rem; top: .35rem; width: 1rem; height: 1rem; border-radius: 50%; background: var(--akcent); }
.etapy h3 { margin: 0 0 .3rem; font-size: 16px; }
.etapy p { margin: 0; }
.relacje { display: grid; gap: .9rem; grid-template-columns: repeat(auto-fill, minmax(18rem, 1fr)); margin: 1rem 0; }
.relacja { padding: .9rem 1.1rem; border: 1px solid var(--linia2); border-radius: 10px; background: var(--karta); }
.relacja h3 { margin: 0 0 .4rem; font-size: 16px; }
.relacja p { margin: 0; font-size: 15px; line-height: 1.6; }
.zobacz { max-width: 46rem; margin: 1rem 0; font: 400 14px/1.5 var(--sans); color: var(--tekst2); }
.zobacz p { margin: 0; }
.zobacz a { font-weight: 600; }
.tezy li { margin-bottom: .5rem; }
.kfaq { margin: 0 0 .6rem; max-width: 46rem; border: 1px solid var(--linia2); border-radius: 10px; background: var(--karta); }
.kfaq > summary { padding: .8rem 1.1rem; cursor: pointer; font: 700 15.5px var(--sans); }
.kfaq[open] { border-color: var(--akcent); }
.kfaq > p { margin: 0; padding: 0 1.1rem 1rem; }

@media (max-width: 46rem) {
  .menu { display: none; }
  .burger { display: block; }
  .belka-wew, .podmenu-wew, .okruchy { padding-left: 16px; padding-right: 16px; }
  .lektura { padding: 14px 16px 32px; }
  .podmenu-autor { display: none; }
  h1 { font-size: 26px; }
  .metryczka > div { grid-template-columns: 1fr; gap: .1rem; }
  body { font-size: 16px; }
}

/* ---------- biała karta strony na jasnym tle (jak w projekcie 1b) ---------- */
.strona { max-width: calc(74rem + 48px); margin: 0 auto; padding: 0 24px 28px; }
.karta-strony { background: var(--karta); border: 1px solid var(--linia); border-top: 0; border-radius: 0 0 8px 8px; box-shadow: 0 1px 3px rgba(0,0,0,.10); }
.karta-strony .belka { box-shadow: none; }
.karta-strony .belka-wew, .karta-strony .podmenu-wew, .karta-strony .okruchy, .karta-strony .lektura { max-width: none; }
.karta-strony .lektura { margin: 0; }
.karta-strony .podmenu { border-bottom: 1px solid var(--linia); }
@media (max-width: 46rem) { .strona { padding: 0 8px 16px; } }

/* odstęp nad szpaltą tekstu */
.karta-strony .okruchy { padding-top: 26px; }
.karta-strony .lektura { padding-top: 38px; }
.karta-strony .lektura > header h1, .karta-strony .lektura > .kompendium-glowa h1 { margin-top: 0; }
@media (max-width: 46rem) { .karta-strony .okruchy { padding-top: 18px; } .karta-strony .lektura { padding-top: 26px; } }

/* belka jak w projekcie 1b */
.belka { position: static; background: transparent; border: 0; box-shadow: none; }
.belka-marka { padding: 18px 32px 0; }
.belka .marka { font: 700 17px var(--sans); letter-spacing: -.01em; }
.belka-lektura { padding: 22px 32px 0; display: flex; flex-direction: column; gap: 14px; }
.belka-tytul { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; }
.belka .podmenu-tytul { font: 600 30px/1 var(--serif); letter-spacing: -.015em; padding: 0; margin: 0; color: var(--tekst); }
.belka .podmenu-autor { font: 500 14px var(--sans); color: var(--przygaszony); padding: 0; margin: 0; }
.belka .podmenu { display: flex; align-items: flex-end; margin: 0 -7px; overflow-x: auto; white-space: nowrap; background: none; border: 0; }
.belka .podmenu a { padding: 10px 7px 9px; font: 600 13.5px var(--sans); color: var(--tekst2); border-bottom: 3px solid transparent; }
.belka .podmenu a:hover { color: var(--akcent); }
.belka .podmenu a[aria-current="page"] { color: var(--akcent); border-bottom-color: var(--akcent); }
.karta-strony .okruchy { border-top: 1px solid var(--linia); margin-top: 6px; padding: 30px 32px 0; font: 500 12px/1.4 var(--sans); }
.karta-strony .lektura { padding-top: 20px; }
@media (max-width: 46rem) {
  .belka-marka, .belka-lektura, .karta-strony .okruchy { padding-left: 16px; padding-right: 16px; }
  .belka .podmenu-tytul { font-size: 26px; }
  .belka .podmenu-autor { display: inline; }
}

/* ---------- bohaterowie: główni jako tekst, drugoplanowi z płynnie rozwijanym ciągiem dalszym (bez ramki) ---------- */
.bohater-glowny .zajawka, .bohater-poboczny .zajawka { font-weight: 500; color: var(--tekst); max-width: 48rem; }
.bohater-poboczny { max-width: 48rem; margin: 0 0 1.6rem; padding: 0 0 1.2rem; border-bottom: 1px solid var(--linia); }
.bohater-poboczny:last-child { border-bottom: 0; }
.bohater-poboczny h3 { margin: 0 0 .3rem; }
.bohater-poboczny .zajawka { margin: 0 0 .5rem; }
.pelny-artykul { margin: .8rem 0 0; font: 500 15px var(--sans); }
.rozwin > summary { display: inline-flex; align-items: center; gap: .35rem; cursor: pointer; list-style: none; font: 600 15px var(--sans); color: var(--akcent); padding: .1rem 0; }
.rozwin > summary::-webkit-details-marker { display: none; }
.rozwin > summary::after { content: ""; width: .5em; height: .5em; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(45deg) translateY(-2px); transition: transform .3s ease; }
.rozwin[open] > summary::after { transform: rotate(-135deg) translateY(-2px); }
.rozwin > summary:hover { text-decoration: underline; }
.rozwin-tresc { padding-top: .6rem; }
.rozwin-tresc p { margin: 0 0 1rem; }
/* płynne rozwijanie (przeglądarki z ::details-content; w pozostałych treść pojawia się od razu) */
@supports selector(::details-content) {
  :root { interpolate-size: allow-keywords; }
  .rozwin::details-content { block-size: 0; overflow: hidden; opacity: 0; transition: block-size .4s ease, opacity .4s ease, content-visibility .4s allow-discrete; }
  .rozwin[open]::details-content { block-size: auto; opacity: 1; }
}
@media (prefers-reduced-motion: reduce) { .rozwin::details-content, .rozwin > summary::after { transition: none; } }

/* ===== BEZ RAMEK (wszędzie) ===== */
/* Zasada: żadnych ramek i kart wokół treści. Rozdzielają tylko cienkie linie, odstępy i kolor akcentu. */
.spis ul { gap: .3rem 1.1rem; }
.spis a { padding: 0; border: 0; border-radius: 0; background: none; text-decoration: underline; text-decoration-color: var(--linia2); text-underline-offset: 3px; }
.spis a:hover { background: none; text-decoration-color: var(--akcent); }

/* rozwijane pola: <details> bez obramowania, z szewronem i linią u góry */
.zakladka, .kfaq, .postac { border: 0; border-radius: 0; background: none; border-top: 1px solid var(--linia2); margin: 0; max-width: 48rem; }
.zakladka:last-of-type, .kfaq:last-of-type { border-bottom: 1px solid var(--linia2); }
.zakladka[open], .kfaq[open], .postac[open] { border-color: var(--linia2); background: none; }
.zakladka > summary, .kfaq > summary, .postac > summary { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: .85rem 0; cursor: pointer; list-style: none; font: 700 16px var(--sans); }
.zakladka > summary::-webkit-details-marker, .kfaq > summary::-webkit-details-marker, .postac > summary::-webkit-details-marker { display: none; }
.zakladka > summary::after, .kfaq > summary::after, .postac > summary::after { content: ""; flex: none; width: .5em; height: .5em; margin: 0 .3rem 0 auto; border-right: 2px solid var(--akcent); border-bottom: 2px solid var(--akcent); transform: rotate(45deg) translateY(-2px); transition: transform .3s ease; font-size: 16px; }
.zakladka[open] > summary::after, .kfaq[open] > summary::after, .postac[open] > summary::after { transform: rotate(-135deg) translateY(-2px); }
.zakladka > summary:hover, .kfaq > summary:hover { color: var(--akcent); }
.zakladka-tresc, .postac-tresc { padding: 0 0 1.2rem; max-width: 48rem; }
.kfaq > p, .kfaq > :not(summary) { margin-left: 0; margin-right: 0; padding: 0 0 1rem; }
.kfaq > p { margin: 0; padding: 0 0 1rem; }
@supports selector(::details-content) {
  :root { interpolate-size: allow-keywords; }
  .zakladka::details-content, .kfaq::details-content, .postac::details-content { block-size: 0; overflow: hidden; opacity: 0; transition: block-size .4s ease, opacity .4s ease, content-visibility .4s allow-discrete; }
  .zakladka[open]::details-content, .kfaq[open]::details-content, .postac[open]::details-content { block-size: auto; opacity: 1; }
}
@media (prefers-reduced-motion: reduce) { .zakladka::details-content, .kfaq::details-content, .postac::details-content { transition: none; } }

/* metryczka i tabele: tylko linie poziome */
.metryczka { border: 0; border-radius: 0; background: none; border-top: 2px solid var(--akcent); border-bottom: 1px solid var(--linia2); }
.metryczka > div { padding: .65rem 0; }
.porownanie { border: 0; border-radius: 0; background: none; border-collapse: collapse; }
.porownanie thead th { background: none; color: var(--akcent); border-bottom: 2px solid var(--akcent); }
.porownanie tbody tr > * { border-bottom: 1px solid var(--linia); background: none !important; }
.porownanie tbody tr:last-child > * { border-bottom: 1px solid var(--linia2); }
.porownanie th, .porownanie td { padding: 9px 12px 9px 0; }

/* karty relacji, okna pojęć, ramki kolorowe, ramka „więcej”: bez tła i obramowania, tylko cienka linia po lewej */
.relacja { border: 0; border-radius: 0; background: none; padding: .2rem 0 .2rem 1rem; border-left: 2px solid var(--linia2); }
.okno { border: 0; border-radius: 0; background: none; padding: .1rem 0 .1rem 12px; border-left: 2px solid var(--zolty); }
.ramka, .ramka-rozowa, .ramka-niebieska, .ramka-zielona, .ramka-szara { background: none; border-radius: 0; padding: .1rem 0 .1rem 1rem; border-left: 2px solid var(--linia2); }
.wiecej { border: 0; border-radius: 0; padding: 0; }
.cytat-karta, .cytat-okno { border-radius: 0; }
.zakladka-staly { max-width: 48rem; margin: 0 0 1.6rem; }
.zakladka-staly > h3 { margin: 0 0 .6rem; font-size: 20px; color: var(--akcent); }
.zakladka-staly p { margin: 0 0 1rem; }

/* animowana zachęta do rozwinięcia (tylko bloki z klasą z-zacheta) */
.z-zacheta > summary .zacheta { margin-left: auto; font: 700 12.5px var(--sans); color: var(--akcent); border: 1px solid var(--akcent); border-radius: 999px; padding: .15rem .7rem; animation: zacheta-puls 2s ease-in-out infinite; }
.z-zacheta > summary::after { animation: zacheta-skok 1.4s ease-in-out infinite; margin-left: .6rem; }
.z-zacheta[open] > summary .zacheta { display: none; }
.z-zacheta[open] > summary::after { animation: none; }
@keyframes zacheta-puls { 0%, 100% { box-shadow: 0 0 0 0 rgba(0,0,0,0); } 50% { box-shadow: 0 0 0 6px color-mix(in srgb, var(--akcent) 22%, transparent); } }
@keyframes zacheta-skok { 0%, 100% { transform: rotate(45deg) translateY(-2px); } 50% { transform: rotate(45deg) translate(2px, 2px); } }
@media (prefers-reduced-motion: reduce) { .z-zacheta > summary .zacheta, .z-zacheta > summary::after { animation: none; } }
.z-tyt { flex: 1; display: block; }
.z-zaj { display: block; margin-top: .15rem; font: 400 13.5px/1.4 var(--sans); color: var(--przygaszony); }
.zakladka > summary { cursor: pointer; transition: background-color .2s ease; }
.zakladka:not([open]) > summary:hover { background: color-mix(in srgb, var(--akcent) 7%, transparent); }
.z-zacheta > summary .zacheta { margin-left: 0; white-space: nowrap; }
.z-zacheta > summary .zakladka-ile { white-space: nowrap; }
.rozwin-wszystko { margin: 0 0 .8rem; max-width: 48rem; }
.rozwin-wszystko button { font: 600 13.5px var(--sans); color: var(--akcent); background: none; border: 1px solid var(--akcent); border-radius: 999px; padding: .3rem .9rem; cursor: pointer; }
.rozwin-wszystko button:hover { background: color-mix(in srgb, var(--akcent) 10%, transparent); }

/* ---------- hub: bohaterowie jako osobne karty ---------- */
.bh-karty { display: grid; gap: .9rem; margin: 0 0 1.4rem; }
.bh-karta { border: 1px solid var(--linia2); border-left: 4px solid var(--akcent); border-radius: 8px; background: var(--karta); padding: 1rem 1.1rem .9rem; }
.bh-karta:nth-child(even) { border-left-color: var(--zolty); }
.bh-imie { display: flex; flex-wrap: wrap; align-items: baseline; gap: .3rem .6rem; margin: 0 0 .5rem; font: 700 19px/1.3 var(--sans); color: var(--tekst); }
.bh-rola { font: 600 12px/1.4 var(--sans); letter-spacing: .04em; text-transform: uppercase; color: var(--akcent); background: var(--jasny); border-radius: 99px; padding: .15rem .65rem; }
.zakladka-tresc .bh-karta p { margin: 0 0 .7rem; }
.bh-fakty { display: grid; gap: 0; margin: 0; font: 15px/1.5 var(--sans); }
.bh-fakty > div { display: grid; grid-template-columns: 7.5rem 1fr; gap: .8rem; padding: .4rem 0; border-top: 1px solid var(--linia); }
.bh-fakty dt { font-weight: 700; color: var(--przygaszony); }
.bh-fakty dd { margin: 0; color: var(--tekst2); }
.bh-dalsi-h { margin: 1.5rem 0 .6rem; font: 700 17px/1.3 var(--sans); }
.bh-dalsi { list-style: none; margin: 0 0 1.2rem; padding: 0; }
.bh-dalsi li { margin: 0 0 .5rem; padding: .15rem 0 .15rem .9rem; border-left: 3px solid var(--linia2); }
@media (max-width: 560px) { .bh-fakty > div { grid-template-columns: 1fr; gap: 0; } }

/* ===== Szablon v3: nagłówek artykułu, „Lektura w pigułce”, bezszeryfowa i większa treść ===== */
body { font: 18px/1.72 var(--sans); }
.kompendium-glowa { background: var(--karta); padding: 36px 40px; border: 1px solid var(--linia); border-radius: 18px; box-shadow: 0 4px 16px rgba(0,0,0,.06); margin: 0 0 1.6rem; }
.odznaka-matura { display: inline-block; margin: 0 0 14px; padding: 4px 12px; background: var(--jasny); color: var(--akcent); border: 1px solid var(--linia2); border-radius: 99px; font: 700 12.5px/1.4 var(--sans); letter-spacing: .05em; text-transform: uppercase; }
.kompendium-glowa h1, .karta-strony .lektura > .kompendium-glowa h1 { font: 600 clamp(1.85rem, 3.2vw, 2.5rem)/1.22 var(--serif); letter-spacing: -.02em; margin: 0 0 18px; }
.kompendium-glowa .lede { font-size: 19px; line-height: 1.75; color: var(--przygaszony); max-width: none; margin: 0; }
#o-lekturze { margin: 0 0 1.6rem; padding: 26px 32px; background: var(--karta); border: 1px solid var(--linia); border-radius: 16px; box-shadow: 0 5px 18px rgba(24,45,54,.04); }
#o-lekturze h2 { margin: 0 0 16px; font-size: 19px; }
#o-lekturze ul { display: grid; grid-template-columns: 1fr 1fr; gap: 11px 28px; margin: 0; padding: 0; list-style: none; }
#o-lekturze li { position: relative; padding-left: 15px; color: var(--tekst2); font-size: 15.5px; line-height: 1.55; }
#o-lekturze li::before { content: ""; position: absolute; left: 0; top: .62em; width: 6px; height: 6px; border-radius: 50%; background: var(--akcent); }
#o-lekturze b { color: var(--tekst); }
.okno { font-size: 14px; }
.okno dt { font-size: 14px; }
.zakladka > summary { font-size: 17px; }
@media (max-width: 40rem) {
  .kompendium-glowa { padding: 24px 20px; border-radius: 14px; }
  .kompendium-glowa .lede { font-size: 17px; }
  #o-lekturze { padding: 20px; }
  #o-lekturze ul { grid-template-columns: 1fr; gap: 9px; }
}

/* ===== Szablon v3b: tło strony pod całą górą, treść w blokach (karty), jedna czcionka ===== */
:root { --serif: var(--sans); }
.karta-strony { background: transparent; border: 0; border-radius: 0; box-shadow: none; }
.lektura { background: transparent; }
.kompendium-glowa h1, .karta-strony .lektura > .kompendium-glowa h1 { font-weight: 700; }
.belka .podmenu-tytul { font-weight: 700; }
.zakladka-staly { max-width: none; padding: 30px 36px; background: var(--karta); border: 1px solid var(--linia); border-radius: 18px; box-shadow: 0 1px 3px rgba(0,0,0,.05); margin: 0 0 1.2rem; }
.zakladka-staly > h3:first-child { margin: 0 0 1.2rem; padding-bottom: 12px; border-bottom: 2px solid var(--linia); font-size: 1.4rem; }
.zakladka, .zakladka:last-of-type, .zakladka[open] { max-width: none; margin: 0 0 14px; background: var(--karta); border: 1px solid var(--linia); border-radius: 18px; box-shadow: 0 1px 3px rgba(0,0,0,.05); overflow: hidden; }
.zakladka:hover { border-color: var(--linia2); }
.zakladka[open] { border-color: var(--akcent); box-shadow: 0 4px 16px rgba(0,0,0,.06); }
.zakladka > summary { padding: 20px 28px; }
.zakladka-tresc { max-width: none; padding: 14px 32px 28px; border-top: 1px solid var(--linia); }
.zakladka-tresc > p, .zakladka-tresc > ul, .zakladka-tresc > ol { max-width: 50rem; }
.kfaq, .kfaq:last-of-type, .kfaq[open], .postac, .postac[open] { max-width: none; margin: 0 0 10px; padding: 0 22px; background: var(--karta); border: 1px solid var(--linia); border-radius: 12px; }
.kfaq > summary, .postac > summary { padding: 15px 0; }
.kfaq[open], .postac[open] { border-color: var(--linia2); }
.lektura > section[id]:not(#o-lekturze):not(#opracowanie):not(#faq):not(.faq) { background: var(--karta); border: 1px solid var(--linia); border-radius: 18px; box-shadow: 0 1px 3px rgba(0,0,0,.05); padding: 8px 36px 20px; margin: 0 0 1.2rem; }
.lektura > section[id]:not(#o-lekturze):not(#opracowanie):not(#faq):not(.faq) > h2:first-child { margin-top: 1.2rem; }
@media (max-width: 40rem) {
  .zakladka-staly { padding: 22px 18px; }
  .zakladka > summary { padding: 16px 18px; }
  .zakladka-tresc { padding: 12px 18px 22px; }
  .kfaq, .postac { padding: 0 16px; }
  .lektura > section[id]:not(#o-lekturze):not(#opracowanie):not(#faq):not(.faq) { padding: 4px 18px 14px; }
}

/* ===== Szablon v3c: tekst każdego bloku w stylu lede ===== */
.zakladka-staly p, .zakladka-staly li, .zakladka-tresc p, .zakladka-tresc li, .wiersz p, .kfaq p, .kfaq li, .postac-tresc p, .postac-tresc li,
.lektura > section p, .lektura > section li, .opracowanie p, .opracowanie li, .lektura > p, .lektura > ul > li, .lektura > ol > li {
  font-family: var(--sans); font-size: 19px; line-height: 1.75; color: var(--przygaszony);
}
.zakladka-staly p b, .zakladka-staly li b, .zakladka-tresc p b, .zakladka-tresc li b, .wiersz p b, .kfaq p b, .lektura > section p b, .lektura > section li b, .opracowanie p b,
.zakladka-staly strong, .zakladka-tresc strong, .lektura > section strong, .opracowanie strong { color: var(--tekst); }
#o-lekturze li { font-size: 17px; line-height: 1.6; color: var(--przygaszony); }
@media (max-width: 40rem) {
  .zakladka-staly p, .zakladka-staly li, .zakladka-tresc p, .zakladka-tresc li, .wiersz p, .kfaq p, .kfaq li, .postac-tresc p, .postac-tresc li,
  .lektura > section p, .lektura > section li, .opracowanie p, .opracowanie li, .lektura > p { font-size: 17px; }
  #o-lekturze li { font-size: 16px; }
}

/* ===== Szablon v3d: ramki ze starego tekstu, cytaty i karty postaci też w stylu lede ===== */
.ramka, .ramka p, .ramka li, blockquote, blockquote p, .bh-karta p, .bh-karta li {
  font-family: var(--sans); font-size: 19px; line-height: 1.75; color: var(--przygaszony);
}
.ramka b, .ramka strong, blockquote b, blockquote strong, .bh-karta p b, .bh-karta li b { color: var(--tekst); }
.bh-fakty { font: 17px/1.6 var(--sans); }
.bh-fakty dd { color: var(--przygaszony); }
@media (max-width: 40rem) {
  .ramka, .ramka p, .ramka li, blockquote, blockquote p, .bh-karta p, .bh-karta li { font-size: 17px; }
  .bh-fakty { font-size: 15.5px; }
}

/* ===== Szablon v3e: bloki pojęć i cytatów w kolorach (niebieski: pojęcia i cytaty, zielony: biogramy, różowy: uwagi); szare = zwykły tekst ===== */
.ramka-niebieska, .ramka-zielona, .ramka-rozowa { margin: 1.4rem 0; padding: 18px 24px; border-radius: 12px; border-left: 5px solid; }
.ramka-niebieska { background: var(--ramka-niebieska); border-left-color: color-mix(in srgb, var(--ramka-niebieska) 30%, #2f6db5); }
.ramka-zielona { background: var(--ramka-zielona); border-left-color: color-mix(in srgb, var(--ramka-zielona) 30%, #2e8b57); }
.ramka-rozowa { background: var(--ramka-rozowa); border-left-color: color-mix(in srgb, var(--ramka-rozowa) 30%, #c0506b); }
.ramka-niebieska > :first-child, .ramka-zielona > :first-child, .ramka-rozowa > :first-child { margin-top: 0; }
.ramka-niebieska > :last-child, .ramka-zielona > :last-child, .ramka-rozowa > :last-child { margin-bottom: 0; }
.cytat-karta, .cytat-okno { border-radius: 12px; }
@media (max-width: 40rem) { .ramka-niebieska, .ramka-zielona, .ramka-rozowa { padding: 14px 16px; } }

/* ── Szybki test (drugi szablon, ostatni_index_lektura2.php) ── */
.lektura .szybki-test { margin: 2.2rem 0 0; padding: 1.1rem 1.3rem 1.3rem; border: 1px solid color-mix(in srgb, currentColor 22%, transparent); border-radius: 12px; background: color-mix(in srgb, currentColor 4%, transparent); }
.lektura .szybki-test h2 { margin-top: 0; }
.lektura .szybki-test .pyt { margin: 1.1rem 0 0; padding-top: 1rem; border-top: 1px solid color-mix(in srgb, currentColor 14%, transparent); }
.lektura .szybki-test .pyt:first-of-type { border-top: 0; padding-top: 0; }
.lektura .szybki-test .pyt-tresc { font-weight: 600; margin: 0 0 .5rem; }
.lektura .szybki-test .odp { display: block; padding: .3rem 0; cursor: pointer; }
.lektura .szybki-test .pokaz { margin-top: .5rem; font: inherit; font-size: .92rem; padding: .35rem .9rem; border-radius: 999px; border: 1px solid currentColor; background: transparent; color: inherit; cursor: pointer; }
.lektura .szybki-test .rozw { margin: .6rem 0 0; }

/* ── Rozwijane menu lektury (grupy artykułów w belce; ostatni_index_lektura2.php) ── */
.belka .podmenu { overflow: visible; flex-wrap: wrap; white-space: normal; }
.belka .podmenu .pm { position: relative; }
.belka .podmenu .pm > summary { list-style: none; cursor: pointer; padding: 10px 7px 9px; font: 600 13.5px var(--sans); color: var(--tekst2); border-bottom: 3px solid transparent; user-select: none; }
.belka .podmenu .pm > summary::-webkit-details-marker { display: none; }
.belka .podmenu .pm > summary::after { content: "▾"; margin-left: .35em; font-size: .85em; }
.belka .podmenu .pm > summary:hover, .belka .podmenu .pm[open] > summary { color: var(--akcent); }
.belka .podmenu .pm-aktywna > summary { color: var(--akcent); border-bottom-color: var(--akcent); }
.belka .podmenu .pm-panel { position: absolute; left: 0; top: 100%; z-index: 60; width: min(36rem, 92vw); max-height: 70vh; overflow-y: auto; padding: 6px; background: var(--karta); border: 1px solid var(--linia); border-radius: 10px; box-shadow: 0 10px 28px rgba(0,0,0,.14); }
.belka .podmenu .pm-panel a { display: block; padding: 7px 10px; border: 0; border-radius: 6px; font: 500 14px/1.35 var(--sans); color: var(--tekst); white-space: normal; }
.belka .podmenu .pm-panel a:hover { background: color-mix(in srgb, var(--akcent) 10%, transparent); color: var(--akcent); }
.belka .podmenu .pm-panel a[aria-current="page"] { background: color-mix(in srgb, var(--akcent) 14%, transparent); color: var(--akcent); font-weight: 600; }
@media (max-width: 640px) {
  .belka .podmenu .pm { flex-basis: 100%; }
  .belka .podmenu .pm-panel { position: static; width: auto; max-height: 55vh; box-shadow: none; margin-bottom: 6px; }
}
.belka .podmenu .pm-podtytul { display: block; padding: 10px 10px 4px; font: 700 11.5px var(--sans); letter-spacing: .06em; text-transform: uppercase; color: var(--przygaszony); }

/* ── Artykuł zwykły: dwa okna (tytuł + lede; cała treść w jednej karcie) ── */
.tresc-karta { background: var(--karta); border: 1px solid var(--linia); border-radius: 18px; box-shadow: 0 1px 3px rgba(0,0,0,.05); padding: 10px 36px 24px; margin: 0 0 1.2rem; }
.tresc-karta > section[id] { margin: 0; padding: 0; border: 0; border-radius: 0; background: none; box-shadow: none; }
.tresc-karta > section + section, .tresc-karta > section + div, .tresc-karta > div + section { margin-top: 1.5rem; padding-top: .5rem; border-top: 1px solid var(--linia2); }
.tresc-karta > section:first-child > h2:first-child { margin-top: 1rem; }
.tresc-karta p, .tresc-karta li { font-family: var(--sans); font-size: 19px; line-height: 1.75; color: var(--przygaszony); }
.tresc-karta p b, .tresc-karta li b, .tresc-karta strong { color: var(--tekst); }
.tresc-karta .kfaq, .tresc-karta .kfaq[open], .tresc-karta .kfaq:last-of-type { max-width: none; margin: 0; padding: 0; background: none; border: 0; border-top: 1px solid var(--linia2); border-radius: 0; }
.tresc-karta .kfaq:last-of-type { border-bottom: 1px solid var(--linia2); }
.tresc-karta .kfaq > summary { padding: 14px 0; }
@media (max-width: 40rem) {
  .tresc-karta { padding: 6px 18px 16px; border-radius: 14px; }
  .tresc-karta p, .tresc-karta li { font-size: 17px; }
}

/* ── Okna pojęć: desktop = pole pływa po prawej, tekst zawija się wokół (bez pustej kolumny); telefon = pełna szerokość ── */
.tresc-karta, .zakladka-tresc, .zakladka-staly, .lektura > section { display: flow-root; }
.lektura h2, .lektura h3 { clear: right; }
@media (min-width: 62rem) {
  .wiersz, .wiersz:has(.okna) { display: block; max-width: 50rem; }
  .wiersz p { max-width: none; }
  .wiersz .okna { float: right; clear: right; width: 220px; margin: .25rem 0 .8rem 1.6rem; padding-top: 0; }
}
@media (max-width: 61.99rem) {
  .okna { width: 100%; margin: .2rem 0 .3rem; }
  .okno { padding-right: 0; }
}
/* telefon: mniej marginesów, treść na całą szerokość okna */
@media (max-width: 40rem) {
  .strona { padding-left: 6px; padding-right: 6px; padding-bottom: 16px; }
  .karta-strony { border-radius: 0 0 6px 6px; }
  .kompendium-glowa { padding: 20px 14px; border-radius: 12px; }
  .tresc-karta { padding: 4px 12px 14px; border-radius: 12px; }
  .zakladka-staly { padding: 18px 12px; border-radius: 12px; }
  .lektura > section[id]:not(#o-lekturze):not(#opracowanie):not(#faq):not(.faq) { padding: 2px 12px 12px; border-radius: 12px; }
  .zakladka > summary { padding-left: 12px; padding-right: 12px; }
  .zakladka-tresc { padding-left: 12px; padding-right: 12px; }
  .kfaq, .postac { padding: 0 12px; }
  .belka-marka, .belka-lektura, .karta-strony .okruchy { padding-left: 12px; padding-right: 12px; }
}

/* ── Okna pojęć: odstęp między hasłami; krótki akapit = okna pod nim w rzędzie (bez pustej przerwy) ── */
.okno > div + div { margin-top: .7rem; }
@media (min-width: 62rem) {
  .wiersz.wiersz-pod .okna { float: none; width: auto; margin: .6rem 0 .2rem; }
  .wiersz.wiersz-pod .okno { display: grid; grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr)); gap: .5rem 1.6rem; }
  .wiersz.wiersz-pod .okno > div + div { margin-top: 0; }
}

/* ── Okna pojęć v2: domyślnie pod akapitem w rzędzie; na desktopie skrypt ustawia je w wierszu z podkreślonym hasłem ── */
.wiersz, .wiersz:has(.okna) { display: block; max-width: 50rem; }
.wiersz p { max-width: none; }
.wiersz .okna, .wiersz.wiersz-pod .okna { float: none; width: auto; margin: .5rem 0 .2rem; padding-top: 0; }
@media (min-width: 62rem) {
  .wiersz .okno { display: grid; grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr)); gap: .5rem 1.6rem; }
  .wiersz .okno > div + div { margin-top: 0; }
  .wiersz.jsflot > .okna { display: none; }
}
.okno-float { float: right; clear: right; width: 220px; margin: .15rem 0 .6rem 1.6rem; padding: .1rem 0 .1rem 12px; border-left: 2px solid var(--zolty); font: 400 14px/1.5 var(--sans); color: var(--tekst2); }
.okno-float .okno-t { display: block; margin: 0 0 .25rem; font: 700 14px var(--sans); color: var(--akcent); }
.okno-float .okno-d { display: block; }
.poj[data-k] { cursor: help; }

/* ── Okna pojęć v3: desktop = przypis z boku na wysokości hasła; telefon = zwinięte, rozwijane dotknięciem hasła ── */
.wiersz { position: relative; }
@media (min-width: 62rem) {
  .wiersz, .wiersz:has(.okna) { max-width: calc(48rem + 244px); padding-right: 244px; }
  .wiersz p { max-width: 48rem; }
  .wiersz.bok > .okna { display: none; }
  .okno-bok { position: absolute; right: 0; width: 220px; margin: 0; padding: .1rem 0 .1rem 12px; border-left: 2px solid var(--zolty); font: 400 14px/1.5 var(--sans); color: var(--tekst2); }
  .okno-bok .okno-t { display: block; margin: 0 0 .25rem; font: 700 14px var(--sans); color: var(--akcent); }
  .okno-bok .okno-d { display: block; }
}
@media (max-width: 61.99rem) {
  .wiersz.kl > .okna { display: none; }
  .wiersz.kl.maotw > .okna { display: block; }
  .wiersz.kl .okno { display: block; }
  .wiersz.kl .okno > div { display: none; }
  .wiersz.kl .okno > div.otw { display: block; }
  .wiersz.kl .poj { cursor: pointer; }
  .wiersz.kl .poj::after { content: " ⓘ"; font-size: .72em; color: var(--akcent); }
  .wiersz.kl .poj[aria-expanded="true"]::after { content: " ▴"; }
}