/* Tokeny i typografia przeniesione z ~/transkrypcja/_sporne2/buduj.py (ADR 0004).
   Uklad i nawigacja: ADR 0003. */
:root{
  --ground:#e9edf1; --panel:#fbfcfd; --panel2:#f1f4f7;
  --ink:#161d25; --muted:#5a6875; --line:#ccd6de;
  --accent:#a85f1e; --accent-soft:#f0e2d1;
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --ground:#0f151b; --panel:#171f28; --panel2:#1d2833;
    --ink:#dfe7ee; --muted:#8697a6; --line:#28333f;
    --accent:#e39b47; --accent-soft:#33261a;
  }
}
:root[data-theme="dark"]{
  --ground:#0f151b; --panel:#171f28; --panel2:#1d2833;
  --ink:#dfe7ee; --muted:#8697a6; --line:#28333f;
  --accent:#e39b47; --accent-soft:#33261a;
}
*{box-sizing:border-box}
body{background:var(--ground); color:var(--ink); margin:0;
     font:16px/1.6 "Source Sans 3", system-ui, sans-serif;}

/* Cokolwiek ma naturalna szerokosc wieksza niz kolumna tekstu (tabele dzis,
   bloki kodu gdyby sie pojawily) przewija sie we WLASNYM pojemniku — cialo
   strony nigdy w poziomie. Opakowanie stoi POZA elementem, ktorego dotyczy
   kotwica (table/pre), wiec nie zmienia tekstu, z ktorego liczy sie id. */
.szeroka-tresc{ overflow-x:auto; margin:0 0 20px; }
.szeroka-tresc table{ margin-bottom:0 }
pre{ overflow-x:auto; margin:0 0 14px; padding:10px 12px;
     background:var(--panel2); border-radius:6px; }

h1{font-family:Fraunces, Georgia, serif; font-weight:700;
   font-size:clamp(26px,4vw,38px); line-height:1.15; margin:0 0 16px;
   text-wrap:balance; letter-spacing:-.01em;}
h2{font-family:Fraunces, Georgia, serif; font-weight:700; font-size:22px;
   line-height:1.2; margin:32px 0 12px; letter-spacing:-.005em;}
h3{font-family:Fraunces, Georgia, serif; font-weight:500; font-size:18px;
   margin:24px 0 10px;}
h4{font-family:"IBM Plex Mono",monospace; font-size:13px; letter-spacing:.04em;
   text-transform:uppercase; color:var(--muted); margin:20px 0 8px;}

p{margin:0 0 14px}
strong{font-weight:600}
code{font-family:"IBM Plex Mono",monospace; font-size:.9em;
     background:var(--panel2); padding:1px 5px; border-radius:4px;}
a{color:var(--accent); text-decoration:underline; text-decoration-color:var(--line);
  text-underline-offset:2px;}
a:hover{text-decoration-color:var(--accent)}
hr{border:none; border-top:1px solid var(--line); margin:28px 0}

ul{margin:0 0 14px; padding-left:22px}
li{margin-bottom:6px}

blockquote{margin:0 0 16px; padding:12px 16px; background:var(--panel2);
           border-left:3px solid var(--line); border-radius:0 6px 6px 0;}
blockquote p{margin:0 0 8px; font-size:15px}
blockquote p:last-child{margin:0}

table{border-collapse:collapse; width:100%; margin:0 0 20px; font-size:15px}
td{border:1px solid var(--line); padding:8px 10px; vertical-align:top}

/* uklad: pasek boczny + kolumna tresci ~68ch (ADR 0003) */
.pasek-boczny{position:fixed; top:0; left:0; bottom:0; width:240px; overflow-y:auto;
              background:var(--panel); border-right:1px solid var(--line);
              padding:20px 16px 40px;}
.pasek-boczny ul{list-style:none; margin:0 0 4px; padding:0}
.pasek-boczny .gorne{margin-bottom:10px; padding-bottom:10px; border-bottom:1px solid var(--line)}
.pasek-boczny li{margin:0}
.pasek-boczny a{display:block; padding:5px 8px; border-radius:5px; font-size:14px;
                color:var(--ink); text-decoration:none;}
.pasek-boczny a:hover{background:var(--panel2)}
.pasek-boczny a.aktywna{background:var(--accent-soft); color:var(--accent); font-weight:600}
.dzial-nav{font-family:"IBM Plex Mono",monospace; font-size:11px; letter-spacing:.06em;
           text-transform:uppercase; color:var(--muted); margin:16px 0 4px; padding:0 8px;}

.strona{margin-left:240px; padding:48px 32px 80px; display:flex;
        flex-direction:column; align-items:center;}
.tresc{max-width:68ch; width:100%;}
footer{margin-left:240px; max-width:68ch; padding:0 32px 48px;
       color:var(--muted); font-size:13px; border-top:1px solid var(--line); padding-top:16px;}
footer p{max-width:62ch}

.nav-guzik{display:none; position:fixed; top:12px; left:12px; z-index:10;
           width:38px; height:38px; border-radius:8px; background:var(--panel);
           border:1px solid var(--line); align-items:center; justify-content:center;
           font-size:18px; cursor:pointer;}

@media (max-width:820px){
  .pasek-boczny{transform:translateX(-100%); transition:transform .2s; z-index:9;
                box-shadow:2px 0 12px rgba(0,0,0,.15);}
  .nav-otw:checked ~ .pasek-boczny{transform:translateX(0)}
  .nav-guzik{display:flex}
  .strona, footer{margin-left:0; padding-left:20px; padding-right:20px;}
  .strona{padding-top:72px}
}
@media (prefers-reduced-motion: reduce){ *{transition:none !important} }

/* widget komentarzy — ADR 0005, zawezone 15.09.2026: wylacznie zapis. Zaden
   blok nigdy nie pokazuje istniejacych uwag, wiec znaczniki sa rownowazne —
   nie ma juz stanu "aktywny/z uwaga" do wyrozniania. */
.uwaga-znacznik{
  display:inline-flex; align-items:center; gap:3px; margin-left:8px;
  border:1px solid transparent; background:none; border-radius:5px;
  padding:1px 5px; font-size:12px; line-height:1.4; color:var(--muted);
  opacity:.55; cursor:pointer; vertical-align:middle;
}
.uwaga-znacznik:hover, .uwaga-znacznik:focus-visible{
  opacity:1; background:var(--panel2); border-color:var(--line);
}
td .uwaga-znacznik{ float:right }

/* Mateusz: znacznik na najechaniu, nie staly — nota w ADR 0005. Widocznosc
   przez klase/CSS, NIE przez wstawianie/usuwanie z drzewa (to zmienia tekst
   bloku, ktory jest podstawa kotwicy — ta sama pulapka co przy cytacie
   liczonym po wstawieniu znacznika). Poza (hover: hover) nic sie nie zmienia,
   wiec na dotyku (ADR 0003: czytane tez przy stole, na telefonach) znaczniki
   zostaja widoczne zawsze. */
@media (hover: hover){
  .uwaga-znacznik{ opacity:0 }
  [id]:hover .uwaga-znacznik,
  [id]:focus-within .uwaga-znacznik{ opacity:.55 }
  [id] .uwaga-znacznik:hover,
  [id] .uwaga-znacznik:focus-visible{ opacity:1 }
}

.uwaga-panel-wiersz td{ background:var(--panel2); border-top:none }

.uwaga-panel{
  position:relative; max-width:60ch; margin:6px 0 18px; padding:34px 14px 14px;
  background:var(--panel2); border:1px solid var(--line); border-radius:8px;
  font-size:14px;
}
.uwaga-panel-otwarty{ display:block }
.uwaga-zamknij{
  position:absolute; top:6px; right:8px; width:24px; height:24px;
  display:flex; align-items:center; justify-content:center;
  border:none; background:none; border-radius:5px; cursor:pointer;
  font-size:18px; line-height:1; color:var(--muted);
}
.uwaga-zamknij:hover, .uwaga-zamknij:focus-visible{ background:var(--panel); color:var(--ink) }

.uwaga-cytowany{
  font-style:italic; color:var(--muted); font-size:13px; margin:0 0 8px;
  padding-left:8px; border-left:2px solid var(--line);
}

.uwaga-formularz{ display:flex; flex-direction:column; gap:8px }
.uwaga-wiersz{ display:flex; align-items:center; gap:10px }
.uwaga-imie{
  font:inherit; font-size:13px; padding:5px 8px; border-radius:5px;
  border:1px solid var(--line); background:var(--panel); color:var(--ink); max-width:14em;
}
.uwaga-formularz textarea{
  font:inherit; font-size:14px; padding:8px 10px; border-radius:6px;
  border:1px solid var(--line); background:var(--panel); color:var(--ink); resize:vertical;
}
.uwaga-formularz button{
  font:inherit; font-size:13px; padding:6px 14px; border-radius:6px; border:1px solid var(--line);
  background:var(--panel); color:var(--ink); cursor:pointer;
}
.uwaga-formularz button:hover{ border-color:var(--accent) }
.uwaga-formularz button:disabled{ opacity:.6; cursor:default }
.uwaga-stan{ font-size:12px; color:var(--muted) }

.uwaga-plywajaca{
  position:fixed; z-index:20; font:inherit; font-size:13px;
  padding:6px 12px; border-radius:16px; border:1px solid var(--accent);
  background:var(--panel); color:var(--accent); cursor:pointer;
  box-shadow:0 2px 8px rgba(0,0,0,.15);
}

@media (max-width:820px){
  .uwaga-panel{ max-width:none }
  .uwaga-imie{ max-width:none; flex:1 }
}