/* ==================================================================
   Krakowski Chór Lekarski - kompendium teorii muzyki (kompendium.html).
   Wszystkie reguly zawezone do body.kompendium, zeby nie zmienic
   wygladu innych stron. Rozdzialy to lista jak w kursie: numer,
   tytul, status, a tresc na cala szerokosc strony.
   ================================================================== */

/* jasniejsze linie i slabsze ziarno - te same wartosci co body.strefa
   w site.css, ale bez tej klasy: kompendium jest publiczne i nie moze
   dziedziczyc niczego ze strefy za haslem                              */
body.kompendium{--hair:rgba(20,19,16,.10)}
body.kompendium .grain{opacity:.08}

/* tresc na cala szerokosc, krawedzie rowno z naglowkiem: bez limitu
   --wrap, a na telefonie margines jak w .hdr (1.25rem zamiast 1.75rem) */
body.kompendium{--wrap:none}
@media(max-width:700px){
  body.kompendium .wrap{
    padding-left:max(1.25rem, env(safe-area-inset-left));
    padding-right:max(1.25rem, env(safe-area-inset-right));
  }
}

body.kompendium .kp-intro{max-width:56ch;margin-top:1.25rem}
/* rozdzialy na pasie odrobine bielszym od tla strony, od krawedzi do
   krawedzi ekranu - tekst w srodku zostaje rowno z naglowkiem         */
body.kompendium .kp-list{
  background:#fff;
  border-block:1px solid var(--hair);
  padding-block:clamp(.5rem,1.5vw,1rem);
  margin-bottom:clamp(3rem,8vw,6rem);
}

/* ---------------------------- rozdzial ---------------------------- */
/* przyklejony header (ok. 90-96 px po zwinieciu) nie moze zaslaniac
   rozdzialu otwartego z kotwicy                                       */
body.kompendium .kp-ch{border-bottom:1px solid var(--hair);scroll-margin-top:7.5rem}
body.kompendium .kp-ch:last-of-type{border-bottom:0}

body.kompendium .kp-sum{
  list-style:none;cursor:pointer;
  display:flex;align-items:center;gap:clamp(.9rem,2vw,1.5rem);
  padding:clamp(1.3rem,2.6vw,2rem) 0;
}
body.kompendium .kp-sum::-webkit-details-marker{display:none}
body.kompendium .kp-sum:focus-visible{outline:2px solid var(--ochre);outline-offset:4px}
body.kompendium .kp-head{flex:1 1 auto;min-width:0}
body.kompendium .kp-num{
  display:block;font-size:.68rem;font-weight:400;letter-spacing:.24em;
  text-transform:uppercase;color:var(--ochre);
}
body.kompendium .kp-title{
  display:block;margin-top:.45rem;
  font-family:var(--disp);font-weight:300;
  font-size:clamp(1.55rem,3vw,2.4rem);line-height:1.1;letter-spacing:-.005em;
  transition:color .4s ease;
}
body.kompendium .kp-sum:hover .kp-title{color:var(--ochre)}

/* szewron tuz za tytulem: w dol zamkniety, w gore otwarty. .kp-nw skleja
   go z ostatnim slowem, zeby nie przeskakiwal sam do nowej linii       */
body.kompendium .kp-nw{white-space:nowrap}
body.kompendium .kp-arrow{
  display:inline-block;width:.32em;height:.32em;margin-left:.5em;
  border-right:1.5px solid currentColor;border-bottom:1.5px solid currentColor;
  vertical-align:.22em;transform:rotate(45deg);
  transition:transform .45s cubic-bezier(.2,.7,.2,1);
}
body.kompendium .kp-ch[open] .kp-arrow{transform:translateY(.12em) rotate(225deg)}

/* status przeczytanego rozdzialu przy tytule */
body.kompendium .kp-done{
  flex:0 0 auto;display:inline-flex;align-items:center;gap:.5rem;
  font-size:.68rem;font-weight:400;letter-spacing:.16em;text-transform:uppercase;
  color:var(--ochre);
}
body.kompendium .kp-done[hidden]{display:none}
body.kompendium .kp-done svg{
  width:1.5rem;height:1.5rem;padding:.3rem;border-radius:50%;background:var(--ochre);
}
body.kompendium .kp-done svg,
body.kompendium .kp-read svg{
  fill:none;stroke:#fff;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round;
}
/* tekst tylko dla czytnikow ekranu; na telefonie tak samo napis przy
   ptaszku - zostaje samo kolko                                        */
body.kompendium .kp-sr{
  position:absolute;width:1px;height:1px;overflow:hidden;
  clip:rect(0 0 0 0);white-space:nowrap;
}
@media(max-width:600px){
  body.kompendium .kp-done__l{
    position:absolute;width:1px;height:1px;overflow:hidden;
    clip:rect(0 0 0 0);white-space:nowrap;
  }
}

/* tresc rozdzialu - panel na cala szerokosc, bez wciecia */
body.kompendium .kp-body{padding-bottom:clamp(1.75rem,3.5vw,2.75rem)}

/* ------------------------- tekst rozdzialu ------------------------- */
/* kolumna tekstu rosnie z ekranem (46rem na tablecie, do 60rem na
   szerokim), a z nia lekko czcionka - zeby dlugi wiersz dalej dobrze
   sie czytal                                                          */
body.kompendium .kp-txt{
  max-width:clamp(46rem,62vw,60rem);color:var(--ink);
  font-size:clamp(1.05rem,.85rem + .3vw,1.15rem);line-height:1.7;
}
body.kompendium .kp-txt > * + *{margin-top:1rem}
body.kompendium .kp-txt strong{font-weight:500}
body.kompendium .kp-txt a{
  color:var(--ochre);text-decoration:underline;text-underline-offset:3px;
  text-decoration-thickness:1px;
}
body.kompendium .kp-txt a:hover{text-decoration-thickness:2px}
body.kompendium .kp-txt > .kp-h3,
body.kompendium .kp-txt > .kp-box{margin-top:2.6rem}
body.kompendium .kp-txt > .kp-h4{margin-top:1.9rem}
body.kompendium .kp-h3{
  font-family:var(--disp);font-weight:400;
  font-size:clamp(1.45rem,2.4vw,1.8rem);line-height:1.2;
}
body.kompendium .kp-h4{
  font-family:var(--disp);font-weight:400;font-size:clamp(1.2rem,1.9vw,1.4rem);line-height:1.25;
}

body.kompendium .kp-ul,
body.kompendium .kp-quiz{padding-left:1.3em}
body.kompendium .kp-ul li + li{margin-top:.4rem}
body.kompendium .kp-ul li::marker{color:var(--ochre)}

/* tabela nazw: cienkie linie poziome, bez pionowych */
body.kompendium .kp-tab{border-collapse:collapse;margin-top:1.5rem}
body.kompendium .kp-tab th,
body.kompendium .kp-tab td{
  text-align:left;padding:.45rem 2.2rem .45rem 0;border-bottom:1px solid var(--hair);
}
body.kompendium .kp-tab thead th{
  font-size:.68rem;font-weight:400;letter-spacing:.14em;text-transform:uppercase;
  color:var(--soft);padding-bottom:.6rem;
}
body.kompendium .kp-tab tbody th{font-weight:500}
body.kompendium .kp-tab tbody tr:last-child > *{border-bottom:0}
@media(max-width:600px){
  body.kompendium .kp-tab th,
  body.kompendium .kp-tab td{padding-right:1.3rem}
  body.kompendium .kp-tab thead th{letter-spacing:.08em}
}

/* bardzo waskie ekrany (ponizej 360 px): ciasniejsze kolumny, zeby
   trzykolumnowa tabela w rozdziale 3 nie rozpychala strony           */
@media(max-width:359px){
  body.kompendium .kp-tab th,
  body.kompendium .kp-tab td{padding-right:.55rem}
  body.kompendium .kp-tab thead th{letter-spacing:.02em}
}

/* ramka "Co warto zapamietac" */
body.kompendium .kp-box{
  padding:1.3rem clamp(1.1rem,2.5vw,1.7rem) 1.4rem;
  background:var(--ivory-2);border-left:2px solid var(--ochre);border-radius:.6rem;
}
body.kompendium .kp-box .kp-ul{margin-top:.8rem}

/* "Sprawdz sie": odpowiedz w zagniezdzonym <details>, dziala bez JS */
body.kompendium .kp-quiz li + li{margin-top:1.1rem}
body.kompendium .kp-quiz li::marker{color:var(--ochre);font-weight:500}
body.kompendium .kp-ans{margin-top:.3rem}
body.kompendium .kp-ans > summary{
  list-style:none;cursor:pointer;display:inline-flex;align-items:center;gap:.5rem;
  font-size:.8rem;font-weight:400;letter-spacing:.06em;color:var(--ochre);
}
body.kompendium .kp-ans > summary::-webkit-details-marker{display:none}
body.kompendium .kp-ans > summary::before{
  content:'';width:.4rem;height:.4rem;
  border-right:1.5px solid currentColor;border-bottom:1.5px solid currentColor;
  transform:translateY(-20%) rotate(-45deg);transition:transform .3s ease;
}
body.kompendium .kp-ans[open] > summary::before{transform:translateY(-20%) rotate(45deg)}
body.kompendium .kp-ans > summary:hover{text-decoration:underline;text-underline-offset:3px}
body.kompendium .kp-ans > summary:focus-visible{outline:2px solid var(--ochre);outline-offset:3px}
body.kompendium .kp-ans p{margin-top:.2rem;font-weight:500}

/* ---------------------------- ilustracje ---------------------------- */
body.kompendium .kp-fig{margin-top:1.6rem}
body.kompendium .kp-svg{display:block;width:100%;height:auto}
body.kompendium .kp-svg text{font-family:var(--ui);font-weight:400;fill:var(--ink)}

/* klawiatura */
body.kompendium .kp-klaw{max-width:22.5rem}
body.kompendium .kp-klaw text{font-size:16px}
body.kompendium .kp-kw{fill:#fff;stroke:var(--ink);stroke-width:1.2}
body.kompendium .kp-kb{fill:var(--ink)}

/* linia dzwiekow: zielen i czerwien w tonacji ochry, kontrast z biela
   5,4:1 i 6,0:1 (WCAG AA). -is zawsze nad linia, -es zawsze pod nia,
   wiec kolor nie jest jedyna wskazowka                                 */
body.kompendium{--kp-is:#3b7553;--kp-es:#b2382c}
body.kompendium .kp-legend{
  display:flex;flex-wrap:wrap;gap:.3rem 1.6rem;margin-bottom:.6rem;
  font-size:.85rem;font-weight:400;letter-spacing:.02em;
}
/* Jost nie ma znakow ♯ i ♭ - domyslny zastepczy krój rysuje je bardzo
   drobno. STIX (macOS, iOS) ma je w ksztalcie z zapisu nutowego.      */
body.kompendium .kp-acc{
  font-family:'STIX Two Math','STIXGeneral','Segoe UI Symbol','Noto Sans Symbols 2','Noto Music',serif;
  font-size:1.2em;line-height:1;
}
body.kompendium .kp-legend .kp-is{color:var(--kp-is)}
body.kompendium .kp-legend .kp-es{color:var(--kp-es)}
/* przewija sie tylko sama grafika i tylko ponizej ok. 360 px ekranu:
   min-width pilnuje, zeby napisy nie zeszly ponizej 12 px             */
body.kompendium .kp-scroll{overflow-x:auto}
body.kompendium .kp-linia{min-width:324px;max-width:32.5rem}
body.kompendium .kp-l{stroke:var(--ink);stroke-width:1.2}
body.kompendium .kp-nat{fill:#fff;stroke:var(--ink);stroke-width:1.3}
body.kompendium .kp-dot{fill:var(--ink)}
body.kompendium .kp-arr{fill:none;stroke-width:1.4;stroke-linecap:round;stroke-linejoin:round}
body.kompendium .kp-arr.kp-is{stroke:var(--kp-is)}
body.kompendium .kp-arr.kp-es{stroke:var(--kp-es)}
body.kompendium .kp-linia text.kp-is{fill:var(--kp-is)}
body.kompendium .kp-linia text.kp-es{fill:var(--kp-es)}
/* zapis nutowy z abcjs: stala szerokosc 17rem (miesci sie od 320 px
   ekranu), wiec nuty i podpisy maja ten sam rozmiar na kazdym ekranie.
   Szerokosc ogranicza .kp-abc-box, bo abcjs ustala wysokosc przez
   padding-bottom w %, liczony od szerokosci rodzica. line-height:0 -
   abcjs robi z kontenera inline-block, ktory dostalby pusta linie pod soba */
body.kompendium .kp-abc-box{max-width:17rem;line-height:0}
/* klucze z dziewiecioma nutami: szersze; min-width trzyma podpisy
   >= 12 px, ponizej ok. 350 px ekranu przewija sie tylko grafika     */
body.kompendium .kp-nuty--szer .kp-abc-box{max-width:28rem;min-width:310px}
body.kompendium .kp-nuty--partytura .kp-abc-box{max-width:20rem}
/* oba klucze z calym zakresem: na szerokosc kolumny tekstu; ponizej
   700 px grafika przewija sie w bok (podpisy zostaja >= 12 px)        */
body.kompendium .kp-nuty--zakres .kp-abc-box{max-width:none;min-width:700px}
body.kompendium .kp-abc-out .kp-wyr path,
body.kompendium .kp-abc-out .kp-wyr text{fill:var(--ochre)}
body.kompendium .kp-abc-out .kp-pas{fill:var(--ochre);opacity:.12}
/* podpowiedz "przesun w bok" - kompendium.js dodaje .kp-przewija, gdy
   grafika rzeczywiscie sie przewija                                    */
body.kompendium .kp-cap__tel{display:none}
body.kompendium .kp-przewija .kp-cap__tel{display:inline}
body.kompendium .kp-abc-out{color:var(--ink)}
body.kompendium .kp-abc-out svg{display:block}
body.kompendium .kp-abc-out .abcjs-note{cursor:pointer}
/* klikniecia przyjmuje tylko niewidoczny prostokat .kp-hit, ktory
   kompendium.js wstawia w kazda nute - linie pieciolinii lezace nad
   nuta ani pusty srodek calej nuty nie przechwytuja klikniecia      */
body.kompendium .kp-abc-out svg *{pointer-events:none}
body.kompendium .kp-abc-out .kp-hit{fill:transparent;pointer-events:all}
body.kompendium .kp-abc-out .abcjs-note:focus{outline:none}
body.kompendium .kp-abc-out .abcjs-note:hover path,
body.kompendium .kp-abc-out .abcjs-note:hover text,
body.kompendium .kp-abc-out .abcjs-note:focus-visible path,
body.kompendium .kp-abc-out .abcjs-note:focus-visible text,
body.kompendium .kp-abc-out .abcjs-note.kp-gra path,
body.kompendium .kp-abc-out .abcjs-note.kp-gra text{fill:var(--ochre)}
body.kompendium .kp-cap{margin-top:.7rem;font-size:.88rem;color:var(--soft)}
body.kompendium .kp-cap[hidden],
body.kompendium .kp-abc-msg[hidden]{display:none}
body.kompendium .kp-abc-msg{margin-top:.6rem;font-size:.88rem;color:var(--kp-es)}

/* ------------------------- rozdzial 3: rytm ------------------------- */
/* przyklady rytmiczne: szerokosc z szerokosci zapisu abcjs (--kp-szer,
   w jednostkach abcjs), wiec pieciolinie maja ten sam rozmiar w calym
   rozdziale; na waskim ekranie zmniejszaja sie do szerokosci kolumny  */
body.kompendium .kp-nuty--rzad .kp-abc-box,
body.kompendium .kp-nuty--sredni .kp-abc-box,
body.kompendium .kp-nuty--metrum .kp-abc-box,
body.kompendium .kp-nuty--cw .kp-abc-box,
body.kompendium .kp-nuty--znaki .kp-abc-box{max-width:calc(var(--kp-szer) * 1.45px)}
/* skala co najmniej 1 (podpisy >= 12 px): wezej przewija sie sama grafika */
body.kompendium .kp-nuty--rzad .kp-abc-box,
body.kompendium .kp-nuty--sredni .kp-abc-box,
body.kompendium .kp-nuty--metrum .kp-abc-box,
body.kompendium .kp-nuty--cw .kp-abc-box{min-width:calc(var(--kp-szer) * 1.04px)}
/* nazwy znakow przykluczowych sa o 1/4 mniejsze - skala co najmniej 1,34 */
body.kompendium .kp-nuty--znaki .kp-abc-box{min-width:calc(var(--kp-szer) * 1.34px)}
body.kompendium .kp-abc-out .kp-gra,
body.kompendium .kp-abc-out .kp-gra path{fill:var(--ochre)}
body.kompendium .kp-abc-out .kp-melizmat{stroke:var(--ink);stroke-width:1}

/* przycisk "Posluchaj" / "Zatrzymaj" */
body.kompendium .kp-play,
body.kompendium .kp-btn{
  display:inline-flex;align-items:center;gap:.55rem;margin-top:.7rem;
  padding:.45rem .95rem .45rem .75rem;border:1px solid rgba(20,19,16,.13);border-radius:999px;
  background:#fff;color:var(--ink);cursor:pointer;
  font-family:var(--ui);font-weight:400;font-size:.76rem;letter-spacing:.06em;line-height:1.2;
  transition:border-color .3s ease,background .3s ease;
}
body.kompendium .kp-play[hidden]{display:none}
body.kompendium .kp-play:hover,
body.kompendium .kp-btn:hover:not(:disabled){border-color:var(--ochre)}
body.kompendium .kp-play:focus-visible,
body.kompendium .kp-btn:focus-visible{outline:2px solid var(--ochre);outline-offset:2px}
body.kompendium .kp-play__i{
  flex:0 0 auto;width:.62rem;height:.7rem;background:var(--ochre);
  clip-path:polygon(0 0,100% 50%,0 100%);
}
body.kompendium .kp-play.is-on{border-color:var(--ochre);background:rgba(168,102,58,.07)}
body.kompendium .kp-play.is-on .kp-play__i{width:.6rem;height:.6rem;clip-path:none;border-radius:1px}

/* drzewko wartosci: nazwa i przycisk nad kazdym rzedem */
body.kompendium .kp-drzewo{max-width:calc(300 * 1.45px)}
body.kompendium .kp-nuty--rzad{
  display:grid;grid-template-columns:1fr auto;align-items:center;column-gap:1rem;
  grid-template-areas:"l b" "n n" "m m";
}
body.kompendium .kp-nuty--rzad + .kp-nuty--rzad{margin-top:1.1rem}
body.kompendium .kp-nuty--rzad .kp-rz__l{grid-area:l;font-size:.85rem;color:var(--soft)}
body.kompendium .kp-nuty--rzad .kp-play{grid-area:b;margin-top:0}
body.kompendium .kp-nuty--rzad .kp-scroll{grid-area:n;margin-top:.3rem}
body.kompendium .kp-nuty--rzad .kp-abc-msg{grid-area:m}

/* cwiczenia rytmiczne: tytul i przycisk nad pieciolinia, pod nia faza
   ("Twoja kolej: takt 2 z 4", "Odpowiedz"); w czasie proby pas pod
   biezacym taktem                                                      */
body.kompendium .kp-fig--cw{max-width:calc(320 * 1.45px)}
body.kompendium .kp-nuty--cw{
  display:grid;grid-template-columns:1fr auto;align-items:center;column-gap:1rem;
  grid-template-areas:"h b" "n n" "f f" "m m";
}
body.kompendium .kp-nuty--cw + .kp-nuty--cw{margin-top:2rem}
body.kompendium .kp-cw__h{grid-area:h}
body.kompendium .kp-cw__t{font-weight:500;font-size:.95rem}
body.kompendium .kp-cw__t span{font-weight:400;color:var(--soft)}
body.kompendium .kp-cw__o{font-size:.85rem;color:var(--soft);line-height:1.4}
body.kompendium .kp-nuty--cw .kp-play{grid-area:b;margin-top:0}
body.kompendium .kp-nuty--cw .kp-scroll{grid-area:n;margin-top:.5rem}
body.kompendium .kp-nuty--cw .kp-abc-msg{grid-area:m}
body.kompendium .kp-faza{grid-area:f;margin-top:.4rem;font-size:.88rem;color:var(--ochre);font-weight:400}
body.kompendium .kp-faza[hidden]{display:none}
body.kompendium .kp-abc-out .kp-takt{fill:var(--ochre);opacity:.12}

/* metrum: trzy takty obok siebie, na waskim ekranie jeden pod drugim */
body.kompendium .kp-metrum{display:flex;flex-wrap:wrap;align-items:flex-end;gap:1.4rem 2.2rem}
body.kompendium .kp-nuty--metrum{width:calc(var(--kp-szer) * 1.45px);max-width:100%}

/* pauzy: rzad nut i pod nim rzad pauz; na telefonie pary obok siebie */
body.kompendium .kp-pz{
  display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:.9rem 1rem;max-width:40rem;
}
body.kompendium .kp-pz__c{text-align:center}
body.kompendium .kp-pz__l{font-size:.8rem;line-height:1.3;color:var(--soft);margin-bottom:.35rem;min-height:2.1em}
body.kompendium .kp-nuty--mini .kp-abc-box{max-width:4.5rem;margin:0 auto}
@media(max-width:600px){
  body.kompendium .kp-pz{
    grid-template-columns:repeat(2,minmax(0,1fr));grid-template-rows:repeat(5,auto);grid-auto-flow:column;
  }
}

/* schematy dyrygowania */
body.kompendium .kp-dyr{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(9.5rem,1fr));gap:1rem 1.5rem;max-width:40rem;
}
body.kompendium .kp-dyr__svg{max-width:12rem;margin:0 auto}
body.kompendium .kp-dyr__l{text-align:center;font-size:.85rem;color:var(--soft);margin-top:.2rem}
body.kompendium .kp-dyr__r{fill:none;stroke:var(--ink);stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
body.kompendium .kp-dyr__p{fill:var(--ochre)}
body.kompendium .kp-dyr__svg text{fill:#fff;font-size:17px;font-weight:500}
body.kompendium .kp-fig--dyr .kp-cap{margin-top:.9rem}

/* pieciolinia z numerami: linie na czarno z lewej, pola na ochro z prawej */
body.kompendium .kp-5l{max-width:22rem}
body.kompendium .kp-5l text{font-size:16px}
body.kompendium .kp-5l text.kp-nr-p{fill:var(--ochre)}
body.kompendium .kp-5l text.kp-nr-h{
  font-size:14px;letter-spacing:.1em;text-transform:uppercase;fill:var(--soft);
}

/* ----------------------- rozdzial 4: tonacje ----------------------- */
/* znaki przykluczowe: krzyzyki i bemole obok siebie, na telefonie pod soba */
body.kompendium .kp-znaki{display:flex;flex-wrap:wrap;gap:1.4rem 3rem}
body.kompendium .kp-znaki__l{font-size:.85rem;color:var(--soft);margin-bottom:.3rem}
body.kompendium .kp-abc-out .kp-znak{fill:var(--ink)}
/* znaki chromatyczne i gamy: nazwa i przycisk nad kazda pieciolinia,
   jak w drzewku wartosci                                               */
body.kompendium .kp-fig--rzedy{max-width:calc(300 * 1.45px)}
body.kompendium .kp-fig--rzedy .kp-cap{margin-top:.9rem}
/* dwie duze czesci rozdzialu (znaki, tonacje): linia nad tytulem,
   wiecej miejsca i wiekszy tytul niz zwykly kp-h3                    */
body.kompendium .kp-txt > .kp-dzial{
  margin-top:3.6rem;padding-top:2rem;border-top:1px solid var(--hair);
  font-size:clamp(1.75rem,3vw,2.2rem);
}
/* polton w gamie: luk i podpis ½ na ochro */
body.kompendium .kp-abc-out .kp-polton{fill:var(--ochre)}
body.kompendium .kp-abc-out .kp-polton-luk{fill:none;stroke:var(--ochre);stroke-width:1}
body.kompendium .kp-gama{font-size:1.1em;letter-spacing:.02em}
/* nazwy tonacji nie lamia sie na lączniku (cis-|moll); zawija sie tylko
   lista znakow w pierwszej kolumnie                                    */
body.kompendium .kp-tab--tonacje td{white-space:nowrap}

/* ---------------------- rozdzial 5: interwaly ---------------------- */
/* przyklady: jedna pieciolinia z aktualnie granym przykladem; nad nia
   nazwa przykladu, przy kazdym przykladzie przyciski w gore / w dol /
   razem (dorabia je kompendium.js - bez JS kolumna jest ukryta)      */
body.kompendium .kp-iw:not(.kp-iw--js) .kp-iw__b{display:none}
body.kompendium .kp-iw .kp-abc-box{max-width:calc(120 * 1.45px);min-width:calc(120 * 1.04px)}
body.kompendium .kp-iw__l{font-size:.85rem;color:var(--soft);min-height:1.5em}
body.kompendium .kp-iw__leg{display:flex;flex-wrap:wrap;gap:.2rem 1.1rem;margin-top:.3rem;font-size:.8rem;color:var(--soft)}
body.kompendium .kp-iw__leg[hidden]{display:none}
body.kompendium .kp-iw__leg span{display:inline-flex;align-items:center;gap:.35rem}
body.kompendium .kp-iw__leg svg{width:.95rem;height:.95rem;fill:var(--ochre)}
/* tabela: pieciolinia przykleja sie pod naglowkiem strony (90 px na
   telefonie, 96 px szerzej - 6 px gornego marginesu moze sie schowac),
   wiec widac ja przy kazdym wierszu                                  */
body.kompendium .kp-iw--tab{margin-top:1.6rem}
body.kompendium .kp-iw--tab .kp-iw__nuty{
  position:sticky;top:90px;z-index:2;background:#fff;
  padding:.5rem 0 .6rem;border-bottom:1px solid var(--hair);
}
body.kompendium .kp-iw--tab .kp-tab{margin-top:.4rem}
body.kompendium .kp-tab--iw td:nth-child(2){font-variant-numeric:tabular-nums}
body.kompendium .kp-tab--iw .kp-iw__b,
body.kompendium .kp-tab--iw td.kp-iw__b{white-space:nowrap;padding-right:0}
body.kompendium .kp-iw__btn{
  display:inline-flex;align-items:center;justify-content:center;vertical-align:middle;
  width:2rem;height:2rem;padding:0;border:1px solid rgba(20,19,16,.13);border-radius:50%;
  background:#fff;cursor:pointer;transition:border-color .3s ease,background .3s ease;
}
body.kompendium .kp-iw__btn + .kp-iw__btn{margin-left:.25rem}
body.kompendium .kp-iw__btn svg{width:.95rem;height:.95rem;fill:var(--ink)}
body.kompendium .kp-iw__btn:hover{border-color:var(--ochre)}
body.kompendium .kp-iw__btn:focus-visible{outline:2px solid var(--ochre);outline-offset:2px}
body.kompendium .kp-iw__btn.is-on{border-color:var(--ochre);background:rgba(168,102,58,.07)}
body.kompendium .kp-iw__btn.is-on svg{fill:var(--ochre)}
/* telefon: wezsze kolumny i przyciski, zeby tabela miescila sie w 335 px */
@media(max-width:600px){
  body.kompendium .kp-tab--iw th,
  body.kompendium .kp-tab--iw td{padding-right:.7rem}
  body.kompendium .kp-iw__btn{width:1.85rem;height:1.85rem}
  body.kompendium .kp-iw__btn + .kp-iw__btn{margin-left:.15rem}
}
/* grupy w "Jak brzmia": pieciolinia obok listy, na telefonie nad nia */
body.kompendium .kp-iw--grupa{display:flex;flex-wrap:wrap;align-items:flex-start;gap:.8rem 2.5rem}
body.kompendium .kp-iw__lista{
  display:grid;grid-template-columns:auto auto auto;align-items:center;gap:.35rem 1.1rem;
  font-size:.95rem;
}
body.kompendium .kp-iw__p{display:contents}
body.kompendium .kp-iw__d{color:var(--soft)}
/* stala szerokosc, zeby pieciolinia nie zmieniala sie z dlugoscia podpisu */
body.kompendium .kp-iw--grupa .kp-iw__nuty{width:calc(120 * 1.45px);max-width:100%}

/* cwiczenie: ustawienia, pieciolinia, przyciski, odpowiedz */
body.kompendium .kp-zad{
  margin-top:1.6rem;max-width:40rem;padding:1.3rem clamp(1rem,2.5vw,1.6rem) 1.4rem;
  border:1px solid var(--hair);border-radius:.8rem;background:#fff;
}
body.kompendium .kp-zad[hidden]{display:none}
body.kompendium .kp-zad fieldset{border:0;margin:0;padding:0;min-width:0}
body.kompendium .kp-zad legend{
  padding:0;margin-bottom:.45rem;
  font-size:.68rem;font-weight:400;letter-spacing:.14em;text-transform:uppercase;color:var(--soft);
}
body.kompendium .kp-zad__opc{display:flex;flex-wrap:wrap;gap:1.1rem 2rem}
body.kompendium .kp-zad__iw{flex:1 1 100%}
/* przelaczniki: radio ukryte, napis jako pigulka */
body.kompendium .kp-seg label{position:relative;display:inline-block;margin:0 .3rem .35rem 0}
body.kompendium .kp-seg input{position:absolute;opacity:0;inset:0;margin:0;cursor:pointer}
body.kompendium .kp-seg span{
  display:inline-block;padding:.38rem .85rem;border:1px solid rgba(20,19,16,.13);border-radius:999px;
  font-size:.8rem;line-height:1.3;transition:border-color .3s ease,background .3s ease;
}
body.kompendium .kp-seg input:hover + span{border-color:var(--ochre)}
body.kompendium .kp-seg input:checked + span{border-color:var(--ochre);background:rgba(168,102,58,.1);color:var(--ink)}
body.kompendium .kp-seg input:focus-visible + span{outline:2px solid var(--ochre);outline-offset:2px}
body.kompendium .kp-zad__pola{display:grid;grid-template-columns:repeat(auto-fill,minmax(8rem,1fr));gap:.3rem 1rem}
body.kompendium .kp-zad__pola label{display:flex;align-items:center;gap:.5rem;font-size:.88rem;line-height:1.4;cursor:pointer}
body.kompendium .kp-zad__pola input{accent-color:var(--ochre);width:1rem;height:1rem;margin:0}
body.kompendium .kp-zad__uw{margin-top:.4rem;font-size:.85rem;color:var(--kp-es)}
body.kompendium .kp-zad__uw[hidden]{display:none}
body.kompendium .kp-zad__nuty{margin-top:1.2rem;padding-top:1rem;border-top:1px solid var(--hair)}
body.kompendium .kp-zad .kp-abc-box{max-width:calc(150 * 1.45px);min-width:calc(150 * 1.04px)}
body.kompendium .kp-zad__btns{display:flex;flex-wrap:wrap;gap:.5rem;margin-top:.8rem}
body.kompendium .kp-btn{padding:.5rem 1rem}
body.kompendium .kp-btn:disabled{opacity:.45;cursor:default}
body.kompendium .kp-btn--glowny{border-color:var(--ochre);background:var(--ochre);color:#fff}
body.kompendium .kp-btn--glowny:hover:not(:disabled){background:#97592f}
body.kompendium .kp-zad__odp{margin-top:.8rem;min-height:1.6em;font-weight:500;color:var(--ochre)}

/* ----------------------- rozdzial 6: slownik ----------------------- */
/* tabele: termin | w nutach (ilustracja + podpis) | znaczenie         */
body.kompendium .kp-sl{width:100%}
body.kompendium .kp-sl th,
body.kompendium .kp-sl td{vertical-align:top}
body.kompendium .kp-sl tbody th{width:11.5rem}
body.kompendium .kp-sl .kp-sl__zn{width:13.5rem}
body.kompendium .kp-sl--2 tbody th{width:11.5rem}
/* haslo otwarte z kotwicy (#slownik-fermata): pod naglowkiem strony,
   z chwilowym ochrowym tlem                                          */
body.kompendium .kp-sl tr{scroll-margin-top:7.5rem}
body.kompendium .kp-sl tr.kp-cel > *{animation:kp-cel 2.6s ease-out}
@keyframes kp-cel{0%,35%{background:rgba(168,102,58,.14)}100%{background:transparent}}
/* ilustracja nad podpisem z kolumny "w nutach" */
body.kompendium .kp-sl__p{display:block;font-size:.85rem;line-height:1.4;color:var(--soft)}
body.kompendium .kp-nuty--sl{margin:.1rem 0 .35rem}
body.kompendium .kp-nuty--sl .kp-abc-box{width:calc(var(--kp-szer) * 1.1px);max-width:100%}
body.kompendium .kp-nuty--glif .kp-abc-box{width:auto}
body.kompendium .kp-glif{display:block}
/* oznaczenia slowne jak w nutach: kursywa szeryfowa; Tempo I, D.C.
   i D.S. prosto                                                      */
body.kompendium .kp-sl__il{display:flex;align-items:center;gap:.7rem;margin:.05rem 0 .3rem}
body.kompendium .kp-sl__txt{font-family:var(--disp);font-style:italic;font-weight:400;font-size:1.35rem;line-height:1.2;color:var(--ink)}
body.kompendium .kp-sl__txt--prosto{font-style:normal;font-weight:500}
body.kompendium .kp-sl__hp{width:2.8rem;height:.9rem;fill:none;stroke:var(--ink);stroke-width:1.1;stroke-linejoin:round}
body.kompendium .kp-abc-out .kp-cezura{fill:none;stroke:var(--ink);stroke-width:1.3;stroke-linecap:round}

/* telefon: kazdy wiersz jako karta - termin, ilustracja z podpisem,
   znaczenie. Role w HTML zachowuja semantyke tabeli dla czytnikow.   */
@media(max-width:600px){
  body.kompendium .kp-sl:not(.kp-sl--2),
  body.kompendium .kp-sl:not(.kp-sl--2) tbody{display:block}
  body.kompendium .kp-sl:not(.kp-sl--2) thead{display:none}
  body.kompendium .kp-sl:not(.kp-sl--2) tr{display:block;padding:.75rem 0;border-bottom:1px solid var(--hair)}
  body.kompendium .kp-sl:not(.kp-sl--2) tbody tr:last-child{border-bottom:0}
  body.kompendium .kp-sl:not(.kp-sl--2) th,
  body.kompendium .kp-sl:not(.kp-sl--2) td{display:block;width:auto;padding:0;border:0}
  body.kompendium .kp-sl:not(.kp-sl--2) .kp-sl__zn{margin-top:.35rem}
  body.kompendium .kp-sl:not(.kp-sl--2) .kp-sl__brak{display:none}
  body.kompendium .kp-sl:not(.kp-sl--2) td:last-child{margin-top:.3rem}
  body.kompendium .kp-sl--2 tbody th{width:auto}
}

/* miejsce na ilustracje, ktorej jeszcze nie ma */
body.kompendium .kp-ph{
  margin-top:1.6rem;padding:1rem 1.25rem;
  border:1px dashed rgba(20,19,16,.28);border-radius:.6rem;
  font-size:.9rem;line-height:1.5;color:var(--soft);
}
body.kompendium .kp-ph__l{
  display:block;margin-bottom:.3rem;
  font-size:.68rem;font-weight:400;letter-spacing:.18em;text-transform:uppercase;color:var(--ochre);
}
body.kompendium .kp-nuty .kp-ph{margin-top:0}

body.kompendium .kp-slur{fill:var(--soft)}
body.kompendium .kp-linia text.kp-pt{fill:var(--soft)}

/* przycisk "Przeczytane" na koncu rozdzialu */
body.kompendium .kp-read{
  display:inline-flex;align-items:center;gap:.6rem;margin-top:1.4rem;
  padding:.55rem 1rem .55rem .65rem;border:1px solid rgba(20,19,16,.13);border-radius:999px;
  background:#fff;color:var(--ink);cursor:pointer;
  font-family:var(--ui);font-weight:400;font-size:.74rem;letter-spacing:.06em;
  transition:border-color .3s ease,background .3s ease;
}
body.kompendium .kp-read[hidden]{display:none}
body.kompendium .kp-read:hover{border-color:var(--ochre)}
body.kompendium .kp-read:focus-visible{outline:2px solid var(--ochre);outline-offset:2px}
body.kompendium .kp-read__box{
  display:inline-flex;align-items:center;justify-content:center;
  width:1.3rem;height:1.3rem;border-radius:50%;border:1px solid rgba(20,19,16,.25);
  transition:background .3s ease,border-color .3s ease;
}
body.kompendium .kp-read__box svg{width:14px;height:14px;opacity:0}
body.kompendium .kp-read[aria-pressed="true"]{border-color:var(--ochre);background:rgba(168,102,58,.07)}
body.kompendium .kp-read[aria-pressed="true"] .kp-read__box{background:var(--ochre);border-color:var(--ochre)}
body.kompendium .kp-read[aria-pressed="true"] .kp-read__box svg{opacity:1}

@media(prefers-reduced-motion:reduce){
  body.kompendium .kp-title,
  body.kompendium .kp-arrow,
  body.kompendium .kp-read,
  body.kompendium .kp-read__box,
  body.kompendium .kp-ans > summary::before,
  body.kompendium .kp-play,
  body.kompendium .kp-btn,
  body.kompendium .kp-iw__btn,
  body.kompendium .kp-seg span{transition:none}
  body.kompendium .kp-sl tr.kp-cel > *{animation:none;background:rgba(168,102,58,.1)}
}