@font-face{font-family:"Poltawski";font-style:normal;font-display:swap;font-weight:400 700;src:url(/assets/fonts/poltawski-nowy-latin-wght-normal.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Brygada";font-style:normal;font-display:swap;font-weight:400 700;src:url(/assets/fonts/brygada-1918-latin-wght-normal.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Poltawski";font-style:italic;font-display:swap;font-weight:400 700;src:url(/assets/fonts/poltawski-nowy-latin-wght-italic.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Brygada";font-style:italic;font-display:swap;font-weight:400 700;src:url(/assets/fonts/brygada-1918-latin-wght-italic.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Schibsted";font-style:normal;font-display:swap;font-weight:400 900;src:url(/assets/fonts/schibsted-grotesk-latin-wght-normal.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Poltawski";font-style:normal;font-display:swap;font-weight:400 700;src:url(/assets/fonts/poltawski-nowy-latin-ext-wght-normal.woff2) format("woff2");unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:"Brygada";font-style:normal;font-display:swap;font-weight:400 700;src:url(/assets/fonts/brygada-1918-latin-ext-wght-normal.woff2) format("woff2");unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:"Poltawski";font-style:italic;font-display:swap;font-weight:400 700;src:url(/assets/fonts/poltawski-nowy-latin-ext-wght-italic.woff2) format("woff2");unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:"Brygada";font-style:italic;font-display:swap;font-weight:400 700;src:url(/assets/fonts/brygada-1918-latin-ext-wght-italic.woff2) format("woff2");unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:"Schibsted";font-style:normal;font-display:swap;font-weight:400 900;src:url(/assets/fonts/schibsted-grotesk-latin-ext-wght-normal.woff2) format("woff2");unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
/* Wyrok dnia: dwa wyglądy tej samej strony, przełączane kartką 3D w nagłówku.
   ANTYKWA: polska typografia książkowa. Krój Półtawskiego (1928), druk dwubarwny czerń i cynober,
            winieta jak w dzienniku, zestawienie jak indeks w książce.
   TOGA:    kolory togi sędziego sądu powszechnego, czerń z fioletem. Ciemne czoło strony,
            Brygada 1918 w tytułach, grotesk prasowy w danych, fioletowa lamówka.
   Wspólna jest struktura HTML i siatka; tutaj są zmienne każdego wyglądu i różnice w układzie.
   Czego unikamy i dlaczego: skill "bez-ai-looku". */

/* ---------- zmienne wyglądów ---------- */
:root, [data-wyglad="antykwa"] {
  --bg: #fff; --ink: #1a1714; --szary: #605b56; --linia: #ddd8d1; --akcent: #c2331d;
  --kal-karne: #c2331d; --kal-firmy: #986000; --kal-urzad: #2f62a8; --kal-krzywdy: #1f7a4d;
  --czolo-bg: var(--bg); --czolo-ink: var(--ink); --czolo-szary: var(--szary);
  --f-tekst: "Poltawski", Georgia, serif; --f-tytul: "Poltawski", Georgia, serif; --f-dane: "Poltawski", Georgia, serif;
  --h1: min(4.9rem, 7.4svh); --gut: 2.5rem;
  color-scheme: light;
}
[data-wyglad="toga"] {
  --bg: #1a171d; --ink: #ece8f0; --szary: #a8a2b0; --linia: #312c37; --akcent: #b48cf0; --akcent-jasny: #c3a6f2;
  --kal-karne: #ed6970; --kal-firmy: #c08a1a; --kal-urzad: #6a8fd6; --kal-krzywdy: #45a26e;
  --czolo-bg: #121013; --czolo-ink: #f4efe6; --czolo-szary: #b9b1c3;
  --f-tekst: "Brygada", Georgia, serif; --f-tytul: "Brygada", Georgia, serif; --f-dane: "Schibsted", "Helvetica Neue", Arial, sans-serif;
  --h1: min(4.6rem, 7svh);
  color-scheme: dark;
}
/* Wygląd wybiera czytelnik przełącznikiem: Antykwa zawsze jasna, Toga zawsze ciemna,
   niezależnie od trybu ciemnego w telefonie (inaczej na iPhonie oba wyglądy były czarne). */

/* ---------- podstawa ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--bg); color: var(--ink); font: 400 1.1875rem/1.6 var(--f-tekst); font-optical-sizing: auto; }
a { color: inherit; text-decoration-thickness: 1px; text-underline-offset: .18em; }
a:hover { text-decoration-thickness: 2px; }
:focus-visible { outline: 3px solid var(--akcent); outline-offset: 2px; }
.wrap { max-width: 86rem; margin: 0 auto; padding: 0 var(--gut); }
@media (max-width: 60rem) { :root, [data-wyglad] { --gut: 1rem; } }
.skip { position: absolute; left: -999px; }
.skip:focus { left: 1rem; top: 1rem; background: var(--bg); padding: .5rem 1rem; z-index: 9; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.stopka .demo { font-style: italic; }
.drobne { font: 400 .95rem/1.5 var(--f-dane); color: var(--szary); margin: 0 0 1rem; }
.drobne a { color: var(--ink); }
/* Płynna zmiana wyglądu (View Transitions tam, gdzie przeglądarka je zna). */
/* Nowy wygląd rozlewa się kołem od przełącznika (src/scene/przelacznik.js); stary stoi pod spodem bez przenikania.
   Krawędź koła jest rozmyta na 160 px (maska), a promień --odslon animuje skrypt. */
@property --odslon { syntax: '<length>'; inherits: true; initial-value: -200px; }
::view-transition-old(root), ::view-transition-new(root) { animation: none; mix-blend-mode: normal; }
::view-transition-new(root) {
  -webkit-mask-image: radial-gradient(circle at var(--odslon-x, 50%) var(--odslon-y, 0), #000 var(--odslon), transparent calc(var(--odslon) + 160px));
  mask-image: radial-gradient(circle at var(--odslon-x, 50%) var(--odslon-y, 0), #000 var(--odslon), transparent calc(var(--odslon) + 160px));
}

/* ---------- nagłówek ---------- */
.glowka, .czolo { background: var(--czolo-bg); color: var(--czolo-ink); }
.glowka-in { display: grid; grid-template-columns: 1fr auto 1fr; align-items: end; gap: 1rem; padding: 1.6rem 0 1rem; border-bottom: 3px solid currentColor; }
.data-wyd { margin: 0; font-style: italic; color: var(--czolo-szary); font-size: 1rem; line-height: 1.3; }
.logo { font: 700 2.6rem/.9 var(--f-tytul); letter-spacing: -.02em; text-decoration: none; justify-self: center; white-space: nowrap; }
.logo i { color: var(--akcent); font-weight: 500; }
.glowka-prawa { justify-self: end; display: flex; align-items: center; gap: 1.5rem; }
.nav { display: flex; flex-wrap: wrap; gap: .3rem 1.4rem; font: 400 1.05rem/1.3 var(--f-dane); }
.nav a { text-decoration: none; }
.nav a:hover { text-decoration: underline; }
.nav a[aria-current] { color: var(--akcent); }
.folio { display: flex; justify-content: space-between; gap: 1rem; margin: 0; padding: .45rem 0; border-bottom: 1px solid var(--ink); font-size: .95rem; font-style: italic; color: var(--szary); }

[data-wyglad="toga"] .logo i { font-style: normal; font-weight: 700; color: var(--akcent-jasny); }

[data-wyglad="toga"] .nav a { color: var(--czolo-szary); }
[data-wyglad="toga"] .nav a[aria-current] { color: var(--czolo-ink); }

/* Przełącznik wyglądu: kartka 3D nad zwykłym przyciskiem (przycisk działa z klawiatury i bez WebGL). */
.przelacznik { position: relative; width: 5.25rem; height: 3.5rem; flex: none; }
.przelacznik-btn { position: absolute; inset: 0; width: 100%; height: 100%; padding: 0 .4rem; border: 1px solid currentColor; border-radius: 3px; background: none; color: inherit; font: 500 .75rem/1.2 var(--f-dane); cursor: pointer; }
.przelacznik canvas { position: absolute; inset: -.75rem; width: calc(100% + 1.5rem); height: calc(100% + 1.5rem); pointer-events: none; opacity: 0; transition: opacity .8s ease; }
.przelacznik.gotowy canvas { opacity: 1; }
.przelacznik.gotowy .przelacznik-btn { border-color: transparent; }
.przelacznik.gotowy .przelacznik-opis { position: absolute; left: 0; top: 0; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

@media (max-width: 60rem) {
  .glowka-in { grid-template-columns: 1fr auto; grid-template-areas: "logo prz" "nav nav"; padding-top: 1.1rem; row-gap: .75rem; }
  .data-wyd { display: none; }
  .logo { grid-area: logo; justify-self: start; font-size: 2.1rem; }
  .glowka-prawa { display: contents; }
  .nav { grid-area: nav; gap: .3rem 1.1rem; font-size: 1rem; }
  .przelacznik { grid-area: prz; justify-self: end; }

  /* Jak w wyglądzie "toga": bez paska z podtytułem, żeby sprawa dnia zmieściła się na pierwszym ekranie telefonu. */
  .folio { display: none; }
}

/* ---------- czoło strony: sprawa dnia i teczka akt ---------- */
/* Czoło wypełnia ekran pod nagłówkiem. Wysokość nagłówka podaje skrypt sceny (--nad-czolem), tu są wartości zapasowe. */
:root, [data-wyglad="antykwa"] { --nad-czolem: 9.6rem; }
[data-wyglad="toga"] { --nad-czolem: 4.9rem; }
.czolo { display: flex; flex-direction: column; min-height: calc(100svh - var(--nad-czolem)); }
.czolo > .wrap { flex: 1; width: 100%; display: flex; }
/* Czoło z nagłówkiem ma wypełnić dokładnie jeden ekran (100svh). Odstępy rosną z wysokością ekranu, a krój
   dopasowuje src/scene/czolo.js (zoom kolumny tekstu do najdłuższego z dni). "Co z tego wynika" jest na
   stronie sprawy, nie w czole. */
.czolo-in { flex: 1; display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 0 3rem; align-items: center; padding: clamp(1.25rem, 4.5svh, 3.25rem) 0 clamp(1.5rem, 5svh, 3.5rem); }
.rubryka { margin: 0 0 1.1rem; color: var(--akcent); font-style: italic; font-size: 1.15rem; }
.rubryka b { font-style: normal; font-weight: 600; }
.rubryka a { text-decoration: none; }
/* Link do treści orzeczenia zaraz pod tytułem, z czasem czytania (26.10): mały, w stylu metryki, nie przycisk. */
.do-orzeczenia-wiersz { margin: -.3rem 0 1.4rem; font-size: 1.05rem; font-style: italic; color: var(--szary); }
.do-orzeczenia { color: var(--akcent); text-decoration: underline !important; text-decoration-color: var(--akcent) !important; text-underline-offset: .2em; }
.wiecej-o-sprawie { margin: 0 0 1.2rem; }
.wiecej-o-sprawie > summary { cursor: pointer; margin: 0 0 .8rem; font-weight: 600; text-decoration: underline; text-decoration-color: var(--akcent); text-decoration-thickness: 2px; text-underline-offset: .22em; }
.r-b { display: none; }
h1 { font: 600 var(--h1)/.98 var(--f-tytul); letter-spacing: -.022em; margin: 0 0 1.6rem; text-wrap: balance; }
h1 a { text-decoration: none; }
h1 a:hover { text-decoration: underline; text-decoration-thickness: 3px; text-underline-offset: .08em; }
.lead { font-size: 1.45rem; line-height: 1.48; margin: 0 0 1.4rem; max-width: 34em; }
.sad { margin: 0 0 1.6rem; font-style: italic; color: var(--czolo-szary); font-size: 1.05rem; }
.liczby { display: flex; flex-wrap: wrap; gap: 1rem 3rem; margin: 0 0 1.8rem; padding: 1rem 0 0; border-top: 1px solid currentColor; }
.liczby div { margin: 0; }
.liczby dt { font-style: italic; color: var(--czolo-szary); font-size: .95rem; }
.liczby dd { margin: 0; font-size: 1.6rem; font-weight: 600; }
.liczby .kwota dd { color: var(--akcent); }
.liczby .l-sygn { display: none; }
.wniosek { margin: 0 0 1.5rem; max-width: 34em; }
/* Streszczenie w stałym układzie (25.10): akapity stykają się, cała część oddzielona od reszty jak lead. */
.streszczenie { margin: 0 0 1.6rem; max-width: 40em; }
.streszczenie p { margin: 0 0 .45rem; }
/* Pod streszczeniem lead i zajawka to zwykłe akapity historii (25.10 wieczorem): duży stopień zostaje tylko tam, gdzie
   streszczenia nie ma i lead stoi zaraz pod tytułem. */
.streszczenie ~ .lead, .streszczenie ~ .zajawka { font-size: 1.15rem; line-height: 1.6; max-width: 40em; }
.dalej-p { margin: 0; }
.dalej { font-size: 1.15rem; text-decoration-color: var(--akcent); text-decoration-thickness: 2px; text-underline-offset: .22em; }
.lamowka { display: none; }

[data-wyglad="toga"] .czolo-in { grid-template-columns: minmax(0, 6fr) minmax(0, 6fr); gap: 2rem; align-items: center; padding: clamp(1.25rem, 4.5svh, 3.5rem) 0 clamp(1.5rem, 5.5svh, 4rem); }
[data-wyglad="toga"] .rubryka { font: 600 .95rem/1.4 var(--f-dane); color: var(--akcent-jasny); }
[data-wyglad="toga"] .r-a { display: none; }
[data-wyglad="toga"] .r-b { display: inline; }
[data-wyglad="toga"] .r-b span { color: var(--czolo-szary); font-weight: 400; }
[data-wyglad="toga"] h1 { line-height: 1.01; letter-spacing: -.02em; }
[data-wyglad="toga"] .czolo .lead { font-size: 1.35rem; line-height: 1.5; color: #ddd6cc; }
[data-wyglad="toga"] .sad { font: 400 .95rem/1.5 var(--f-dane); font-style: normal; }
[data-wyglad="toga"] .liczby { display: grid; grid-template-columns: repeat(3, auto); justify-content: start; gap: .35rem 2.5rem; border: 0; padding: 0; font-family: var(--f-dane); }
[data-wyglad="toga"] .liczby dt { font-style: normal; font-size: .9rem; }
[data-wyglad="toga"] .liczby dd { font-size: 1.05rem; color: var(--czolo-ink); }
[data-wyglad="toga"] .liczby .l-sygn { display: block; }
[data-wyglad="toga"] .liczby .kwota dd { color: var(--czolo-ink); }
[data-wyglad="toga"] .dalej { display: inline-block; font: 600 1rem/1 var(--f-dane); color: var(--czolo-bg); background: var(--czolo-ink); padding: .95rem 1.3rem; border-radius: 2px; text-decoration: none; }
[data-wyglad="toga"] .lamowka { display: block; height: 14px; background: #6d3fb0; }

/* Mapa wydania obok sprawy dnia (do 12.10 teczka 3D): sądy z dzisiejszych spraw, pod mapą pieczątka z datą.
   Punkty pojawiają się po kolei (--i z src/mapa.js), pieczątka spada, gdy pojawi się ostatni (--punktow). */
.czolo-mapa { position: relative; display: grid; grid-template-columns: auto 1fr; align-items: end; gap: 0 1.5rem; }
.czolo-mapa-svg { grid-column: 1 / -1; }
.czolo-mapa .mapa { max-height: clamp(18rem, calc(100svh - var(--nad-czolem) - 17rem), 34rem); }
.czolo-mapa .mapa-kropka { stroke: var(--czolo-bg); }
.czolo-mapa .mapa-sad { fill: var(--czolo-ink); }
.czolo-mapa .mapa-zrodlo { margin: 0; text-align: right; }
.pieczatka { display: flex; flex-direction: column; align-items: center; margin: 1rem 0 0; padding: .4rem 1.1rem .45rem; border: 2px solid var(--akcent); border-radius: 3px; color: var(--akcent); font: 600 .78rem/1.25 var(--f-dane); letter-spacing: .14em; text-transform: uppercase; } /* wersaliki jak na prawdziwej pieczątce */
.pieczatka b { font: 700 1.55rem/1.1 var(--f-tytul); letter-spacing: .04em; }
[data-wyglad="toga"] .pieczatka { border-color: var(--akcent-jasny); color: var(--akcent-jasny); }
@media (prefers-reduced-motion: no-preference) {
  .mapa-punkt { animation: punkt 1.8s cubic-bezier(.2, .7, .2, 1) both; animation-delay: calc(var(--i) * .9s + .4s); }
  .pieczatka.spada { animation: pieczatka 1.6s cubic-bezier(.3, 1.3, .5, 1) both; animation-delay: calc(var(--punktow) * .9s + 1.4s); }
}
@keyframes punkt { from { opacity: 0; transform: scale(.25); } to { opacity: 1; transform: none; } }
@keyframes pieczatka { 0% { opacity: 0; transform: scale(1.7); } 55% { opacity: 1; transform: scale(.97); } 100% { opacity: 1; transform: none; } }
.akta.przewijane { cursor: grab; touch-action: pan-y; user-select: none; -webkit-user-select: none; }
.akta.przewijane:active { cursor: grabbing; }
/* Dni: wcześniejszy po lewej, późniejszy po prawej. */
.akta-nav { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: .5rem 1rem; margin: .75rem 0 0; font: 400 1.05rem/1.3 var(--f-dane); }
.akta-nav[hidden] { display: none; }
.akta-dzien { text-align: center; font-style: italic; color: var(--czolo-szary); }
.akta-dzien .dk { display: none; }
.akta-nav button { font: inherit; color: inherit; background: none; border: 0; padding: .6rem 0; cursor: pointer; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: .2em; }
.akta-nav button:hover { text-decoration-thickness: 2px; text-decoration-color: var(--akcent); }
.akta-nav .strzalka { width: 1.9em; height: .8em; vertical-align: -.02em; fill: none; stroke: currentColor; stroke-width: 1.4; stroke-linecap: round; stroke-linejoin: round; }
.akta-wstecz .strzalka { margin-right: .5em; }
.akta-dalej .strzalka { margin-left: .5em; }
.akta-nav button:hover .strzalka { stroke: var(--akcent); }
.akta-nav button[aria-disabled="true"] { opacity: .35; cursor: default; text-decoration: none; }
[data-wyglad="toga"] .akta-nav { font: 500 .95rem/1.3 var(--f-dane); }
[data-wyglad="toga"] .akta-dzien { font-style: normal; font-weight: 400; }
[data-wyglad="toga"] .akta-nav button { border: 1px solid #4a4452; border-radius: 2px; padding: .6rem 1rem; text-decoration: none; }
[data-wyglad="toga"] .akta-nav button:hover { border-color: var(--czolo-ink); }
@media (prefers-reduced-motion: no-preference) {
  .czolo-tekst, [data-pod-czolem] .wrap { transition: opacity 1s ease; }
  .czolo-tekst.gasnie, [data-pod-czolem] .wrap.gasnie { opacity: 0; transition-duration: .6s; }
}

@media (max-width: 60rem) {
  :root, [data-wyglad] { --h1: 2.7rem; }
  .czolo-in, [data-wyglad="toga"] .czolo-in { grid-template-columns: 1fr; align-content: start; padding: .75rem 0 2.5rem; }
  /* Telefon: tekst sprawy, pod nim pasek dni (1.11, właściciel: "na samej górze, jak jeszcze nie wiesz, co możesz
     przewinąć; powinna być POD SPRAWĄ"), mapa z pieczątką na końcu. Kolumna mapy "znika" z siatki, żeby pasek
     i mapa mogły stanąć w różnych miejscach. */
  .akta-kolumna { display: contents; }
  .akta-nav { order: 0; grid-template-columns: auto 1fr auto; gap: .5rem; margin: 1.25rem 0 0; padding: .2rem 0 .35rem; border-bottom: 1px solid var(--linia); font-size: 1rem; }
  .akta-nav button { padding: .55rem 0; }
  .akta-nav .strzalka { width: 1.5em; }
  .nav-dzien, .akta-dzien .dl { display: none; }
  .akta-dzien .dk { display: inline; }
  .czolo-tekst { scroll-margin-top: 1rem; }
  .akta { order: 1; margin: 1.75rem 0 0; }
  .czolo-mapa .mapa { max-height: none; max-width: 26rem; }
  [data-wyglad="toga"] .akta-nav button { padding: .45rem .7rem; }
  .lead, [data-wyglad="toga"] .czolo .lead { font-size: 1.22rem; }
  [data-wyglad="toga"] .liczby { grid-template-columns: repeat(2, auto); }
}

/* ---------- zestawienie dnia ---------- */
.zest-in { display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 9fr); grid-template-areas: "glowa lista"; gap: 0 3rem; padding: 2.25rem 0 4rem; border-top: 3px solid var(--ink); align-items: start; }
.zest-glowa { grid-area: glowa; }
.zest-lista { grid-area: lista; min-width: 0; }
.zest-boczne { grid-area: boczne; margin-top: 2.5rem; }
.zest-glowa h2 { font: 600 2.1rem/1.05 var(--f-tytul); letter-spacing: -.015em; margin: 0 0 .6rem; }
.opis { margin: 0; font-style: italic; color: var(--szary); font-size: 1.05rem; }
.boczne-blok { margin-bottom: 2rem; }
.boczne-blok h2 { font: 600 1.15rem/1.3 var(--f-tytul); margin: 0 0 .5rem; }
.lista { list-style: none; margin: 0 0 .6rem; padding: 0; font-size: 1.02rem; line-height: 1.5; }
.lista .n { color: var(--szary); font-style: italic; }
.lista.powiazane li { margin-bottom: .9rem; }
.sygn { font-variant-numeric: lining-nums; }
.pozostale { margin-top: 1.75rem; }
.pozostale summary { cursor: pointer; margin-bottom: .75rem; font-style: italic; }

[data-wyglad="toga"] .zest-in { grid-template-columns: minmax(0, 1fr); grid-template-areas: "glowa" "lista"; border: 0; padding: 3.5rem 0 4rem; }
[data-wyglad="toga"] .zest-glowa { display: flex; align-items: baseline; justify-content: space-between; gap: 2rem; margin-bottom: 1.5rem; }
[data-wyglad="toga"] .zest-glowa h2 { font-size: 2.3rem; }
[data-wyglad="toga"] .opis { font: 400 1rem/1.4 var(--f-dane); font-style: normal; }
[data-wyglad="toga"] .zest-boczne { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 3rem; padding-top: 2rem; border-top: 1px solid var(--linia); }
[data-wyglad="toga"] .lista, [data-wyglad="toga"] .drobne { font-family: var(--f-dane); font-size: .95rem; }
[data-wyglad="toga"] .lista .n { font-style: normal; }

/* Tabela: w Antykwie indeks z kolumnami i poziomymi liniami. */
.wokanda { width: 100%; border-collapse: collapse; font-size: 1.05rem; line-height: 1.35; }
.wokanda th { text-align: left; font-weight: 400; font-style: italic; color: var(--szary); font-size: .95rem; padding: 0 1rem .55rem 0; border-bottom: 1px solid var(--ink); vertical-align: bottom; }
.wokanda td { padding: .85rem 1rem .9rem 0; border-bottom: 1px solid var(--linia); vertical-align: top; }
.wokanda .grupa th { font-style: normal; color: var(--ink); font: 600 1.2rem/1.3 var(--f-tytul); padding: 1.6rem 0 .5rem; }
.wokanda .grupa th a { text-decoration: none; }
.wokanda .grupa th span { color: var(--szary); font-weight: 400; font-size: 1rem; }
.wokanda td.lp { color: var(--akcent); font-style: italic; width: 2.4rem; }
.wokanda td.sygn { white-space: nowrap; font-weight: 600; }
.wokanda td.sygn a, .wokanda td.przedmiot a { text-decoration: none; }
.wokanda td.sygn a:hover, .wokanda td.przedmiot a:hover { text-decoration: underline; }
.wokanda td.przedmiot a { font-weight: 600; }
.wokanda small { display: block; color: var(--szary); font-size: .92rem; font-weight: 400; margin-top: .15rem; }
.wokanda .m-sad { display: none; }
.wokanda td.sad { font-size: .95rem; }
.wokanda td.sad span { color: var(--szary); }
.wokanda .num { text-align: right; white-space: nowrap; font-variant-numeric: lining-nums tabular-nums; padding-right: 0; }
.wokanda td.data { white-space: nowrap; }

/* W Todze wiersze: sygnatura w fiolecie, duży tytuł, sąd pod tytułem, kwota z prawej. */
[data-wyglad="toga"] .wokanda { display: block; font-family: var(--f-dane); }
[data-wyglad="toga"] .wokanda thead { display: none; }
[data-wyglad="toga"] .wokanda tbody { display: block; border-top: 2px solid var(--ink); }
[data-wyglad="toga"] .wokanda tr { display: grid; grid-template-columns: 9.5rem minmax(0, 1fr) 11rem 8rem; gap: 1.5rem; align-items: baseline; padding: 1.15rem 0; border-bottom: 1px solid var(--linia); }
[data-wyglad="toga"] .wokanda td { display: block; padding: 0; border: 0; }
[data-wyglad="toga"] .wokanda td.lp, [data-wyglad="toga"] .wokanda td.sad { display: none; }
[data-wyglad="toga"] .wokanda td.sygn { color: var(--akcent); font-weight: 600; font-size: .95rem; }
[data-wyglad="toga"] .wokanda td.przedmiot a { font: 600 1.3rem/1.3 var(--f-tytul); }
[data-wyglad="toga"] .wokanda .m-sad { display: block; }
[data-wyglad="toga"] .wokanda .m-kat { display: none; }
[data-wyglad="toga"] .wokanda td.wynik { font-weight: 500; font-size: .95rem; }
[data-wyglad="toga"] .wokanda td.num { font-weight: 600; }
[data-wyglad="toga"] .wokanda tr.grupa { display: block; padding: 1.6rem 0 .2rem; border: 0; }
[data-wyglad="toga"] .wokanda .grupa th { display: block; padding: 0; font: italic 500 1.15rem/1.3 var(--f-tytul); }
[data-wyglad="toga"] .wokanda.kategorie tr, [data-wyglad="toga"] .wokanda.archiwum tr { grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr) 6rem; }
[data-wyglad="toga"] .wokanda.archiwum tr { grid-template-columns: 8rem minmax(0, 1fr) 6rem 6rem; }

@media (max-width: 60rem) {
  .zest-in, [data-wyglad="toga"] .zest-in { grid-template-columns: 1fr; grid-template-areas: "glowa" "lista"; gap: 1rem; }
  [data-wyglad="toga"] .zest-glowa { display: block; }
  [data-wyglad="toga"] .zest-boczne { grid-template-columns: 1fr; gap: 0; }
  .wokanda, .wokanda tbody, [data-wyglad="toga"] .wokanda tbody { display: block; }
  .wokanda thead { display: none; }
  .wokanda tr, [data-wyglad="toga"] .wokanda tr { display: grid; grid-template-columns: 2rem minmax(0, 1fr) auto; column-gap: .5rem; row-gap: .1rem; padding: .9rem 0; border-bottom: 1px solid var(--linia); }
  [data-wyglad="toga"] .wokanda tr { grid-template-columns: minmax(0, 1fr) auto; }
  .wokanda td { display: block; padding: 0; border: 0; }
  .wokanda td.lp { grid-row: 1 / span 4; }
  .wokanda td.sygn { grid-column: 2; }
  .wokanda td.num { grid-column: 3; grid-row: 1; }
  .wokanda td.przedmiot, .wokanda td.wynik, .wokanda td.data { grid-column: 2 / -1; }
  .wokanda td.sad { display: none; }
  .wokanda .m-sad { display: block; }
  .wokanda td.wynik { font-style: italic; color: var(--szary); }
  [data-wyglad="toga"] .wokanda td.sygn, [data-wyglad="toga"] .wokanda td.przedmiot, [data-wyglad="toga"] .wokanda td.wynik { grid-column: 1; }
  [data-wyglad="toga"] .wokanda td.num { grid-column: 2; grid-row: 1; }
  .wokanda tr.grupa, [data-wyglad="toga"] .wokanda tr.grupa { display: block; }
  .wokanda .grupa th { display: block; }
  .wokanda.kategorie tr, .wokanda.archiwum tr, [data-wyglad="toga"] .wokanda.kategorie tr, [data-wyglad="toga"] .wokanda.archiwum tr { grid-template-columns: minmax(0, 1fr) auto; }
  .wokanda.kategorie td, .wokanda.archiwum td { grid-column: 1; }
  .wokanda.kategorie td.num, .wokanda.archiwum td.num { grid-column: 2; grid-row: 1; }
  .wokanda.archiwum td.num + td.num { grid-row: 2; }
}

/* ---------- strony w układzie dokumentu ---------- */
.dok-in { display: grid; grid-template-columns: [m] minmax(0, 13rem) [t] minmax(0, 42rem) [b] minmax(0, 1fr); column-gap: 3rem; padding: 3rem 0 4rem; align-items: start; }
.dok-margines { grid-column: m; }
.dok-tekst { grid-column: t; min-width: 0; }
.dok-boczne { grid-column: b; }
.dok-szeroki { grid-column: t / -1; min-width: 0; margin-top: 1.5rem; }
/* Strona bez marginesu (katalog, radar, 404): nie zostawiamy pustej kolumny z lewej, treść od krawędzi jak nagłówek. */
.bez-marginesu > .dok-tekst { grid-column: 1 / -1; max-width: 58rem; }
.bez-marginesu > .dok-szeroki { grid-column: 1 / -1; }
@media (max-width: 77rem) { .dok-in { grid-template-columns: [m] minmax(0, 11rem) [t b] minmax(0, 1fr); column-gap: 2.5rem; } .dok-boczne { margin-top: 2rem; } }
@media (max-width: 50rem) {
  .dok-in { grid-template-columns: [m t b] minmax(0, 1fr); padding-top: 1.5rem; }
  .sprawa .dok-margines { order: 1; margin-top: 2rem; }
  /* Najpierw wszystko o sprawie (tekst, metryka), na końcu inne sprawy. */
  .dok-boczne { order: 2; }
  .wpis .dok-margines { order: 1; }
}
.dok h1 { --h1: 3.4rem; line-height: 1.02; }
@media (max-width: 60rem) { .dok h1 { --h1: 2.3rem; } }
.dok .rubryka a:hover { text-decoration: underline; }

.metryka { font-size: .98rem; line-height: 1.4; }
.metryka dl { margin: 0; }
.metryka dt { font-style: italic; color: var(--szary); }
.metryka dd { margin: 0 0 .7rem; }
.metryka .sygn-duza { font: 600 1.5rem/1.15 var(--f-tytul); color: var(--akcent); margin-bottom: 1rem; }
[data-wyglad="toga"] .metryka { font-family: var(--f-dane); font-size: .92rem; }
[data-wyglad="toga"] .metryka dt { font-style: normal; }
[data-wyglad="toga"] .metryka .sygn-duza { font: 700 1.3rem/1.2 var(--f-dane); }

.spis { font-size: 1rem; line-height: 1.45; }
.spis h2 { font: 600 1.1rem/1.3 var(--f-tytul); margin: 0 0 .5rem; }
.spis ol { margin: 0 0 1.5rem; padding-left: 1.25rem; }
.spis li { margin-bottom: .35rem; }
.spis li::marker { color: var(--akcent); }
[data-wyglad="toga"] .spis { font-family: var(--f-dane); font-size: .95rem; }
@media (min-width: 50.01rem) { .spis { position: sticky; top: 1.5rem; } }

.prose p { margin: 0 0 1rem; }
.prose h2 { font: 600 1.7rem/1.2 var(--f-tytul); letter-spacing: -.01em; margin: 2.75rem 0 .75rem; }
.prose h3 { font: 600 1.25rem/1.35 var(--f-tytul); margin: 1.75rem 0 .35rem; }
.prose ul { list-style-type: "- "; padding-left: 1.1rem; margin: 0 0 1rem; }
.prose li { margin-bottom: .45rem; }
/* O serwisie i polityka prywatności (30.10, właściciel: "jedna szpalta, akapity na pełnej szerokości, wszędzie ten sam
   font, przeplecione cytatem i infem o AI"). Szpalty z 26.10 cięły akapity, listy i śródtytuły w przypadkowych miejscach.
   Jeden krój (tekstowy) dla tytułów, śródtytułów, cytatu i ramki; jeden odstęp między działami (3rem). */
.wpis .dok-in:not(.bez-marginesu) > .dok-tekst { grid-column: t / -1; }
.wpis .prose > h1 { margin-bottom: 2.25rem; }
.wpis .prose > .lead { max-width: none; margin-bottom: 0; }
.wpis .prose h2 { margin: 3rem 0 .75rem; font: 600 1.45rem/1.25 var(--f-tekst); letter-spacing: 0; }
.wpis .prose h3 { margin: 1.5rem 0 .35rem; font: 600 1.1rem/1.35 var(--f-tekst); }
.wpis .prose h2 + h3 { margin-top: 0; }
/* "dnia" w tytule jak w logo (26.10, właściciel: czerwony akcent). */
.wpis .prose h1 i { color: var(--akcent); font-weight: 500; }
[data-wyglad="toga"] .wpis .prose h1 i { font-style: normal; font-weight: 700; color: var(--akcent-jasny); }
.wpis .prose .nota-ai { margin: 2.5rem 0; padding: 1.25rem 1.5rem; }
.wpis .prose .nota-ai h2 { margin: 0 0 .6rem; font: 600 1.15rem/1.3 var(--f-tekst); }
.wpis .prose .nota-ai p:last-child { margin-bottom: 0; }
/* Pytania zwijane: linia między pytaniami jak w liście, pytanie w kroju tekstu, czerwony znak plus albo minus. */
.wpis .faq { border-bottom: 1px solid var(--linia); }
.wpis .faq:first-of-type { border-top: 1px solid var(--linia); }
.wpis .faq > summary { display: flex; justify-content: space-between; gap: 1rem; padding: .85rem 0; cursor: pointer; list-style: none; font: 600 1.1rem/1.35 var(--f-tekst); }
.wpis .faq > summary::-webkit-details-marker { display: none; }
.wpis .faq > summary::after { content: "+"; flex: none; color: var(--akcent); font-weight: 400; }
.wpis .faq[open] > summary::after { content: "\2212"; }
.wpis .faq > summary:hover { text-decoration: underline; text-decoration-color: var(--akcent); text-underline-offset: .2em; }
.wpis .faq > p { margin: 0 0 1rem; }
.glossary { margin: 0 0 1rem; }
.glossary div { display: grid; grid-template-columns: 3.5rem minmax(0, 1fr); gap: 1rem; padding: .3rem 0; border-bottom: 1px solid var(--linia); }
.glossary dt { font-weight: 700; color: var(--akcent); }
.glossary dd { margin: 0; }

/* Treść orzeczenia złożona jak dokument: wcięcia, wyjustowanie, nagłówki na środku. */
.judgment { margin-top: 3rem; padding-top: 1rem; border-top: 3px solid var(--ink); }
[data-wyglad="toga"] .judgment { border-top: 2px solid var(--ink); }
.judgment > h2 { font: 600 1.35rem/1.3 var(--f-tytul); margin: 0 0 1.5rem; }
.judgment p { margin: 0 0 .4rem; text-align: justify; hyphens: auto; text-indent: 2.5em; line-height: 1.65; }
.judgment .j-sig, .judgment .j-line, .judgment .j-center, .judgment .j-head, .judgment .j-sign, .judgment .j-point, .judgment .dopisek, .judgment .teza { text-indent: 0; text-align: left; }
.judgment .j-sig { font-weight: 600; margin-bottom: 1.5rem; }
.judgment .j-head { text-align: center; font-weight: 700; letter-spacing: .12em; margin: 1.25rem 0 .5rem; }
.judgment .j-center { text-align: center; }
.judgment .j-line { margin-bottom: .1rem; }
.judgment .j-sign { text-align: right; margin-top: 1.25rem; font-style: italic; }
.judgment .j-point { display: grid; grid-template-columns: 2.5em minmax(0, 1fr); text-align: justify; }
.judgment details { margin-top: 1.5rem; }
.judgment summary { cursor: pointer; text-align: center; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; margin: 0 0 .75rem; }
.judgment .teza { margin-bottom: 1.5rem; }
.judgment .dopisek { margin-top: 1rem; font-size: 1rem; }
.nota { margin-top: 2.5rem; }
.czas-czytania { display: block; margin-top: .25rem; font: italic 400 .95rem/1.3 var(--f-dane); color: var(--szary); }
/* Cytat z uzasadnienia (summary.cytat, sprawdzony słowo w słowo z orzeczeniem): przerywnik jak w gazecie,
   duży stopień i wysunięty cudzysłów w kolorze akcentu, bez ramki z jednej strony. */
.cytat-uz { position: relative; margin: 2.2rem 0 0; padding: .3rem 0 0 2.4rem; }
.cytat-uz::before { content: "„"; position: absolute; left: 0; top: -.4rem; font: 600 4.6rem/1 var(--f-tytul); color: var(--akcent); }
.cytat-uz p { margin: 0; font: 400 clamp(1.3rem, 2.6vw, 1.7rem)/1.35 var(--f-tytul); text-wrap: pretty; }
.cytat-uz footer { margin-top: .7rem; font: italic 400 .95rem/1.4 var(--f-dane); color: var(--szary); }
[data-wyglad="toga"] .cytat-uz::before { color: var(--akcent-jasny); }
[data-wyglad="toga"] .cytat-uz footer { font-style: normal; }
/* Uzasadnienie na formularzu UK (build.js formularzUK): części jako nagłówki ze spisem, punkty wyroku
   małym kursywnym napisem, dowody zwinięte do jednej linii z numerami kart akt po rozwinięciu. */
.judgment .j-spis ul { list-style: none; margin: 0 0 1.4rem; padding: 0; display: flex; flex-wrap: wrap; gap: .4rem .5rem; }
.judgment .j-spis a { display: inline-block; padding: .4rem .7rem; border: 1px solid var(--linia); border-radius: 2px; text-decoration: none; font: 400 .92rem/1.2 var(--f-dane); }
.judgment .j-spis a:hover { border-color: var(--akcent); }
.judgment .j-czesc { margin: 2.4rem 0 .8rem; font: 600 1.28rem/1.25 var(--f-tytul); text-wrap: balance; scroll-margin-top: 1rem; }
.judgment .j-podczesc { margin: 1.4rem 0 .5rem; font: 600 1.02rem/1.3 var(--f-tytul); color: var(--szary); }
.judgment .j-pkt { text-indent: 0; text-align: left; margin: 1.1rem 0 .3rem; font: italic 400 .95rem/1.35 var(--f-dane); color: var(--akcent); }
.judgment .j-dowody { margin: .5rem 0 1.1rem; padding: .45rem 0; border-top: 1px solid var(--linia); border-bottom: 1px solid var(--linia); font: 400 .92rem/1.45 var(--f-dane); }
.judgment .j-dowody summary { margin: 0; text-align: left; font-weight: 400; letter-spacing: 0; text-transform: none; color: var(--szary); }
.judgment .j-dowody ul { margin: .5rem 0 .2rem; padding-left: 1.1rem; }
[data-wyglad="toga"] .judgment .j-pkt { font: 600 .85rem/1.35 var(--f-dane); font-style: normal; color: var(--akcent-jasny); }
@media (max-width: 50rem) {
  .judgment p { text-align: left; text-indent: 1.25em; hyphens: manual; }
  .judgment .j-point { grid-template-columns: 2em minmax(0, 1fr); text-align: left; }
}

/* Mapa (src/mapa.js): kontur Polski, kropki sądów w kolorze akcentu, w kropce numer sprawy (1, 2, 3, Z).
   Pod czołem kolumna obok spraw nr 2 i 3, na stronie sprawy w marginesie (komputer) albo w pasie metryki (telefon). */
.mapa { display: block; width: 100%; height: auto; }
.mapa-kraj { fill: #efebe6; stroke: #b9b1a8; stroke-width: 1.2; stroke-linejoin: round; }
/* Mała mapa w ramce dla trybunałów za granicą (31.10): Francja i Luksemburg. */
.mapa-mala { stroke-width: .8; }
.mapa-ramka { fill: none; stroke: #b9b1a8; stroke-width: 1; }
.mapa-kropka { fill: var(--akcent); stroke: var(--bg); stroke-width: 2.5; }
.mapa-znak { fill: var(--bg); font: 700 13px/1 var(--f-tytul); text-anchor: middle; }
.mapa-sad { fill: var(--ink); font: 400 15px/1 var(--f-dane); }
[data-wyglad="toga"] .mapa-kraj { fill: #2a2530; stroke: #5d5466; }
[data-wyglad="toga"] .mapa-ramka { stroke: #5d5466; }
[data-wyglad="toga"] .mapa-kropka { fill: var(--akcent-jasny); }
.mapa-zrodlo, .mapa-sadu small { display: block; margin: .4rem 0 0; font: 400 .78rem/1.3 var(--f-dane); color: var(--szary); }
.mapa-zrodlo a, .mapa-sadu small a { color: inherit; }
.mapa-sadu { margin: 1.6rem 0 0; }
.mapa-sadu .mapa { max-width: 11rem; }
.mapa-sadu figcaption { margin-top: .4rem; font: italic 400 .88rem/1.35 var(--f-dane); color: var(--szary); }
.pas-mapa .mapa { max-width: 7.5rem; }
@media (max-width: 60rem) { .dok-margines .mapa-sadu { display: none; } }

/* Pas metryki pod leadem strony sprawy: tylko na telefonie, gdzie margines z metryką spada pod orzeczenie. */
.metryka-pas { display: none; }
@media (max-width: 60rem) {
  .metryka-pas { display: grid; grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr)); gap: .7rem 1.4rem; margin: 1.3rem 0 0; padding-top: .9rem; border-top: 1px solid var(--linia); }
  .metryka-pas div { min-width: 0; }
  .metryka-pas dt { font: italic 400 .85rem/1.3 var(--f-dane); color: var(--szary); }
  .metryka-pas dd { margin: .1rem 0 0; font: 400 1rem/1.35 var(--f-dane); }
  .metryka-pas dd.duza { font: 600 1.3rem/1.2 var(--f-tytul); color: var(--akcent); }
  [data-wyglad="toga"] .metryka-pas dt { font-style: normal; }
  [data-wyglad="toga"] .metryka-pas dd.duza { color: var(--akcent-jasny); }
}

/* Oś czasu sprawy (build.js osCzasu): pozycje z dat, odcinek do publikacji w kolorze akcentu, szara kropka
   to mediana w archiwum. Etykiety pod osią; na telefonie oś pionowa z etykietami jedna pod drugą. */
.os-czasu { position: relative; margin: 1.6rem 0 0; padding-top: 1.9rem; }
.os-nad { position: absolute; top: 0; translate: -50% 0; margin: 0; font: 600 .98rem/1.2 var(--f-tytul); color: var(--akcent); white-space: nowrap; }
.os-tor { position: relative; height: 1.1rem; }
.os-linia, .os-zwloka { position: absolute; left: 0; top: .45rem; height: 3px; }
.os-linia { right: 0; background: var(--ink); }
.os-zwloka { background: var(--akcent); }
.os-pkt { position: absolute; top: .55rem; translate: -50% -50%; width: .95rem; height: .95rem; border-radius: 50%; background: var(--bg); border: 3px solid var(--ink); box-sizing: border-box; }
.os-pkt.wazny { border-color: var(--akcent); background: var(--akcent); }
.os-pkt.mediana { width: .7rem; height: .7rem; border: 2px solid var(--szary); }
.os-et { position: relative; list-style: none; margin: .5rem 0 0; padding: 0; min-height: 3.3rem; font: 400 .9rem/1.35 var(--f-dane); color: var(--szary); }
.os-et li { position: absolute; top: 0; max-width: 13rem; }
.os-et b { display: block; font: 600 .98rem/1.3 var(--f-tytul); color: var(--ink); }
.os-et .os-wyrok { left: 0; max-width: 8.5rem; }
.os-et .os-koniec { right: 0; text-align: right; }
[data-wyglad="toga"] .os-nad { color: var(--akcent-jasny); }
@media (max-width: 40rem) {
  .os-czasu { padding-top: 0; }
  .os-tor { display: none; }
  .os-nad { position: static; translate: none; white-space: normal; margin-bottom: .7rem; }
  .os-et { min-height: 0; margin-left: .45rem; padding-left: 1.4rem; display: grid; gap: .8rem; }
  .os-et::before { content: ""; position: absolute; left: 0; top: .4rem; bottom: .4rem; width: 3px; background: var(--akcent); }
  .os-et li { position: relative; left: auto !important; right: auto; text-align: left; max-width: none; }
  .os-et .os-wyrok, .os-et .os-koniec { max-width: none; text-align: left; }
  .os-et li::before { content: ""; position: absolute; left: -1.85rem; top: .25rem; width: .9rem; height: .9rem; border-radius: 50%; background: var(--akcent); }
  .os-et .os-med::before { background: var(--bg); border: 2px solid var(--szary); box-sizing: border-box; width: .75rem; height: .75rem; left: -1.78rem; }
}

/* ---------- stopka ---------- */
.stopka { margin-top: 3rem; border-top: 3px solid var(--ink); }
[data-wyglad="toga"] .stopka { background: var(--czolo-bg); color: var(--czolo-szary); border: 0; }
.stopka-in { display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 6fr) minmax(0, 3fr); gap: 1rem 3rem; padding: 1.5rem 0 3rem; font: 400 .95rem/1.55 var(--f-dane); color: var(--szary); }
[data-wyglad="toga"] .stopka-in { color: var(--czolo-szary); }
.stopka p { margin: 0 0 .6rem; }
.stopka a { color: inherit; }
.stopka-logo { font: 700 1.35rem/1 var(--f-tytul); color: var(--ink); }
[data-wyglad="toga"] .stopka-logo { color: var(--czolo-ink); }
.stopka-logo i { color: var(--akcent); font-weight: 500; }
.stopka-autor { font-style: italic; }
.stopka-autor a { text-decoration-color: var(--akcent); text-underline-offset: .2em; }
.stopka-kontakt { margin-top: .9rem; }
.stopka-kontakt a { text-decoration-color: var(--akcent); text-underline-offset: .2em; }
[data-wyglad="toga"] .stopka-autor { font-style: normal; }
[data-wyglad="toga"] .stopka-logo i { color: var(--akcent-jasny); font-style: normal; font-weight: 700; }
/* Stopka w grupach (12.10): marka i adres, potem trzy krótkie listy, na dole pas z zastrzeżeniami. */
.stopka-in { grid-template-columns: minmax(0, 3fr) repeat(3, minmax(0, 2.3fr)); }
.stopka-h { margin: 0 0 .55rem; font: 600 1rem/1.3 var(--f-tytul); color: var(--ink); }
[data-wyglad="toga"] .stopka-h { color: var(--czolo-ink); }
.stopka-lista { list-style: none; margin: 0; padding: 0; }
.stopka-lista li { margin: 0 0 .4rem; }
.stopka-nota { grid-column: 1 / -1; margin-top: .6rem; padding-top: 1rem; border-top: 1px solid var(--linia); font-size: .88rem; }
.stopka-nota p { max-width: 64rem; }
@media (max-width: 60rem) {
  .stopka-in { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.4rem 2rem; }
  .stopka-marka { grid-column: 1 / -1; }
}
@media (max-width: 24rem) { .stopka-in { grid-template-columns: minmax(0, 1fr); } }

@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }
@media print {
  .nav, .przelacznik, .akta, .zest-boczne, .dok-boczne, .stopka, .pozostale, .skip, .demo, .lamowka { display: none; }
  .glowka, .czolo { background: none; color: #000; }
  body { font-size: 12pt; }
}

/* ---------- radar mediów (strona robocza) ---------- */
.radar { padding-left: 1.4rem; }
.radar > li { margin: 0 0 1.4rem; }
.radar-tytul { margin: 0; }
.radar ul { margin: .3rem 0 0; padding-left: 1.1rem; font: 400 .95rem/1.5 var(--f-dane); }

/* ---------- pod sprawą dnia: druga i trzecia sprawa, perełka z archiwum ---------- */
/* Kolumny jak w gazecie: oddzielone cienką linią, bez ramek i cieni. */
.kolumny { display: grid; grid-template-columns: repeat(var(--kolumn, 2), minmax(0, 1fr)); border-top: 1px solid var(--ink); padding: 1.75rem 0 2.5rem; }
.kolumna-nr { margin: 0 0 .7rem; font: 600 4.4rem/.8 var(--f-tytul); color: var(--akcent); letter-spacing: -.03em; }
.kolumna { padding: 0 1.75rem; border-left: 1px solid var(--linia); }
.kolumna:first-child { padding-left: 0; border-left: 0; }
.kolumna:last-child { padding-right: 0; }
.kolumna-rubryka { margin: 0 0 .55rem; font-style: italic; color: var(--akcent); font-size: 1rem; }
.kolumna h3 { font: 600 1.65rem/1.14 var(--f-tytul); letter-spacing: -.01em; margin: 0 0 .6rem; text-wrap: balance; }
.kolumna h3 a { text-decoration: none; }
.kolumna h3 a:hover { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: .1em; }
.kolumna-sad { margin: .8rem 0 0; font-style: italic; color: var(--szary); font-size: .98rem; line-height: 1.45; }
.kolumna-sad b { font-style: normal; font-weight: 600; color: var(--ink); }
.kolumna-lead { margin: 0; font-size: 1.02rem; line-height: 1.55; }
[data-wyglad="toga"] .kolumny { border-top-color: var(--linia); }
[data-wyglad="toga"] .kolumna-rubryka { font: 600 .9rem/1.4 var(--f-dane); font-style: normal; }
[data-wyglad="toga"] .kolumna-sad { font: 400 .92rem/1.45 var(--f-dane); font-style: normal; }

/* ---------- w mediach ---------- */
.media-in { display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 9fr); gap: 0 3rem; padding: 2rem 0 2.5rem; border-top: 3px solid var(--ink); align-items: start; }
.media-glowa h2 { font: 600 2.1rem/1.05 var(--f-tytul); letter-spacing: -.015em; margin: 0 0 .6rem; }
.media-lista { list-style: none; margin: 0; padding: 0; }
.media-lista li { padding: .7rem 0; border-bottom: 1px solid var(--linia); font-size: 1.08rem; line-height: 1.4; }
.media-lista li:first-child { padding-top: 0; }
.media-lista a { text-decoration: none; }
.media-lista a:hover { text-decoration: underline; }
.media-rodzaj { font-style: italic; color: var(--akcent); margin-right: .35rem; }
.media-zrodlo { display: block; margin-top: .2rem; font: 400 .9rem/1.4 var(--f-dane); color: var(--szary); }
.media-ile { white-space: nowrap; }
[data-wyglad="toga"] .media-in { grid-template-columns: minmax(0, 1fr); border-top: 1px solid var(--linia); }
[data-wyglad="toga"] .media-lista li { font-family: var(--f-dane); font-size: 1rem; }
[data-wyglad="toga"] .media-rodzaj { font-style: normal; font-weight: 600; }

@media (max-width: 60rem) {
  .kolumny { grid-template-columns: 1fr; padding: .5rem 0 1.5rem; }
  .kolumna, .kolumna:first-child, .kolumna:last-child { padding: 1.25rem 0; border-left: 0; }
  .kolumna + .kolumna { border-top: 1px solid var(--linia); }
  .media-in { grid-template-columns: 1fr; }
}
.lista.wydania li { margin-bottom: .7rem; }
.lista.wydania .n { font-size: .95rem; line-height: 1.35; }

/* ---------- powiadomienia: pasek zachęty na dole i przycisk w stopce ---------- */
.powiadom-pasek { position: fixed; left: 0; right: 0; bottom: 0; z-index: 30; background: var(--bg); color: var(--ink); border-top: 1px solid var(--ink); transform: translateY(105%); transition: transform 1.4s ease; }
.powiadom-pasek.widoczny { transform: none; }
.powiadom-in { display: flex; align-items: center; justify-content: space-between; gap: .75rem 2rem; flex-wrap: wrap; padding-top: 1rem; padding-bottom: 1rem; }
.powiadom-tekst { margin: 0; font-size: 1.1rem; }
.powiadom-przyciski { display: flex; gap: 1.5rem; align-items: center; margin: 0; }
.powiadom-przyciski button, .link-przycisk { font: inherit; color: inherit; background: none; border: 0; padding: .4rem 0; cursor: pointer; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: .2em; }
.powiadom-przyciski .powiadom-wlacz { font-weight: 600; text-decoration-color: var(--akcent); text-decoration-thickness: 2px; }
.link-przycisk { padding: 0; text-align: left; }
[data-wyglad="toga"] .powiadom-pasek { background: var(--czolo-bg); color: var(--czolo-ink); border-top-color: var(--linia); }
[data-wyglad="toga"] .powiadom-tekst { font-family: var(--f-dane); font-size: 1rem; }
[data-wyglad="toga"] .powiadom-przyciski .powiadom-wlacz { color: var(--czolo-bg); background: var(--czolo-ink); padding: .65rem 1.2rem; border-radius: 2px; text-decoration: none; font-family: var(--f-dane); }
@media (prefers-reduced-motion: reduce) { .powiadom-pasek { transition: none; } }
@media print { .powiadom-pasek { display: none; } }
/* "Twój" w potwierdzeniu powiadomień wyróżnione jak "dnia" w nagłówku. */
.powiadom-tekst i { color: var(--akcent); font-weight: 500; }
[data-wyglad="toga"] .powiadom-tekst i { font-style: normal; font-weight: 700; color: var(--akcent-jasny); }

/* Z archiwum: osobny pas pod sprawami nr 2 i 3; duży rok wyroku po lewej robi za ilustrację. */
.perelka { display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 9fr); gap: 0 3rem; border-top: 1px solid var(--ink); padding: 1.75rem 0 2.5rem; }
.perelka-etykieta { margin: 0 0 .3rem; font-style: italic; color: var(--akcent); font-size: 1.05rem; }
.perelka-rok { margin: 0; font: 600 6rem/.85 var(--f-tytul); letter-spacing: -.04em; color: var(--ink); }
.perelka h3 { font: 600 2rem/1.1 var(--f-tytul); letter-spacing: -.015em; margin: 0 0 .8rem; text-wrap: balance; max-width: 30em; }
.perelka h3 a { text-decoration: none; }
.perelka h3 a:hover { text-decoration: underline; text-decoration-thickness: 2px; }
.perelka-lead { margin: 0 0 1rem; font-size: 1.15rem; line-height: 1.55; max-width: 46em; }
/* Drugi akapit ze sprawy (zajawka albo cytat z uzasadnienia, 25.10): ten sam stopień co lead, bez kursywy. */
.perelka-akapit { margin: 0 0 1rem; font-size: 1.15rem; line-height: 1.55; max-width: 46em; text-wrap: pretty; }
.perelka-cytat span { font: 400 .9rem/1.4 var(--f-dane); color: var(--szary); white-space: nowrap; }
.perelka-wniosek { margin: 0; max-width: 40em; }
[data-wyglad="toga"] .perelka { border-top-color: var(--linia); }
[data-wyglad="toga"] .perelka-etykieta { font: 600 .9rem/1.4 var(--f-dane); font-style: normal; }
[data-wyglad="toga"] .perelka-rok { color: var(--akcent); }

/* Poprzednie sprawy dnia: na końcu strony, w tej samej siatce co zestawienie i media. */
.poprzednie-in { display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 9fr); gap: 0 3rem; padding: 2rem 0 3rem; border-top: 3px solid var(--ink); align-items: start; }
.poprzednie h2 { font: 600 2.1rem/1.05 var(--f-tytul); letter-spacing: -.015em; margin: 0; }
.poprzednie-lista { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 2.5rem; }
.poprzednie-lista li { border-bottom: 1px solid var(--linia); }
/* Kartka z kalendarza: duży numer dnia po lewej (jak cyfry 2 i 3 pod sprawą dnia), treść obok. */
.poprzednie-lista > li > a { display: grid; grid-template-columns: 4.6rem minmax(0, 1fr); gap: 0 1.1rem; align-items: start; padding: 1.1rem 0 1.2rem; text-decoration: none; }
.poprzednie-lista > li > a:hover .poprzednie-tytul { text-decoration: underline; text-decoration-color: var(--akcent); }
.pop-dzien { display: flex; flex-direction: column; align-items: flex-start; }
.pop-dzien b { font: 600 3.6rem/.8 var(--f-tytul); color: var(--akcent); letter-spacing: -.03em; margin-bottom: .45rem; }
.pop-dzien span { font-style: italic; color: var(--szary); font-size: .9rem; line-height: 1.25; }
.pop-tresc { display: flex; flex-direction: column; gap: .3rem; }
.pop-rubryka { font-style: italic; color: var(--akcent); font-size: .95rem; }
.poprzednie-tytul { display: block; font: 600 1.15rem/1.3 var(--f-tytul); }
.pop-sad { color: var(--szary); font-size: .95rem; }
.poprzednie .drobne { grid-column: 2; margin-top: 1rem; }
[data-wyglad="toga"] .poprzednie-in { grid-template-columns: minmax(0, 1fr); border-top: 1px solid var(--linia); }
[data-wyglad="toga"] .poprzednie .drobne { grid-column: 1; }
[data-wyglad="toga"] .pop-dzien b { color: var(--akcent-jasny); }
[data-wyglad="toga"] .pop-dzien span, [data-wyglad="toga"] .pop-sad { font: 400 .85rem/1.35 var(--f-dane); font-style: normal; }
[data-wyglad="toga"] .pop-rubryka { font: 600 .85rem/1.35 var(--f-dane); font-style: normal; color: var(--akcent-jasny); }
[data-wyglad="toga"] .poprzednie-lista { grid-template-columns: repeat(3, minmax(0, 1fr)); }

/* "Zobacz archiwum" pod poprzednimi sprawami dnia: zwykły link w stopniu tytułu kartki, nie drobny dopisek. */
.pop-wiecej { grid-column: 2; margin: 1.2rem 0 0; text-align: right; font: 600 1.15rem/1.3 var(--f-tytul); }
.pop-wiecej a { text-decoration-color: var(--akcent); text-underline-offset: .2em; }
[data-wyglad="toga"] .pop-wiecej { grid-column: 1; }
/* Archiwum spraw dnia (/sprawy-dnia/): miesiąc w lewej kolumnie, kartki z kalendarza w prawej. W kartce
   numer dnia jest osobnym linkiem do wydania, tytuł do sprawy, niżej sprawy nr 2, 3 i "Z archiwum". */
.arch-wydania { padding-bottom: 3rem; }
.arch-miesiac .poprzednie-in { padding-bottom: 1.5rem; }
.arch-lista { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 2.5rem; }
.arch-lista > li { border-bottom: 1px solid var(--linia); display: grid; grid-template-columns: 4.6rem minmax(0, 1fr); gap: 0 1.1rem; align-items: start; padding: 1.1rem 0 1.2rem; }
.arch-lista .pop-dzien { text-decoration: none; }
.arch-lista .pop-dzien:hover b { text-decoration: underline; text-decoration-thickness: 2px; }
.arch-lista h3.poprzednie-tytul { margin: 0; }
.arch-lista .poprzednie-tytul a { text-decoration: none; }
.arch-lista .poprzednie-tytul a:hover { text-decoration: underline; text-decoration-color: var(--akcent); }
.arch-dalsze { list-style: none; margin: .55rem 0 0; padding: 0; font-size: .95rem; line-height: 1.35; }
.arch-dalsze li { display: grid; grid-template-columns: 1.4rem minmax(0, 1fr); gap: 0 .5rem; padding: .3rem 0; }
.arch-dalsze li.arch-z { display: block; margin-top: .35rem; }
.arch-z .arch-nr { display: block; font-style: italic; font-weight: 400; }
.arch-nr { font: 600 .95rem/1.35 var(--f-tytul); color: var(--akcent); }
.arch-dalsze a { text-decoration: none; }
.arch-dalsze a:hover { text-decoration: underline; text-decoration-color: var(--akcent); }
[data-wyglad="toga"] .arch-nr { font: 600 .85rem/1.35 var(--f-dane); color: var(--akcent-jasny); }

@media (max-width: 60rem) {
  .perelka, .poprzednie-in, .poprzednie-lista { grid-template-columns: 1fr; }
  .perelka-bok { display: flex; align-items: baseline; gap: 1rem; margin-bottom: .75rem; }
  .perelka-rok { font-size: 3.2rem; }
  .perelka h3 { font-size: 1.6rem; }
  .kolumna-nr { font-size: 3.4rem; }
  .poprzednie .drobne, .pop-wiecej { grid-column: 1; }
  .arch-lista { grid-template-columns: 1fr; }
  .poprzednie h2 { margin-bottom: .5rem; }
}

/* ---------- katalog spraw ---------- */
.kat-filtry { margin: 0 0 1.25rem; }
.kat-szukaj input { width: 100%; font: 400 1.35rem/1.3 var(--f-tekst); color: var(--ink); background: none; border: 0; border-bottom: 2px solid var(--ink); padding: .6rem 0; border-radius: 0; }
.kat-szukaj input::placeholder { color: var(--szary); font-style: italic; }
.kat-szukaj input:focus-visible { outline: none; border-bottom-color: var(--akcent); }
.kat-dzialy { display: flex; flex-wrap: wrap; gap: .35rem 1.4rem; margin: 1.1rem 0 .9rem; font-size: 1.02rem; }
.kat-dzial { text-decoration: none; white-space: nowrap; }
.kat-dzial span { color: var(--szary); font-style: italic; font-size: .92em; }
.kat-dzial:hover { text-decoration: underline; }
.kat-dzial[aria-current="true"] { color: var(--akcent); text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: .25em; }
.kat-opcje { display: flex; flex-wrap: wrap; gap: .5rem 2rem; align-items: center; font: 400 1rem/1.4 var(--f-dane); }
.kat-opcje select { font: inherit; color: inherit; background: var(--bg); border: 1px solid var(--linia); border-radius: 2px; padding: .25rem .4rem; margin-left: .35rem; }
.kat-opcje input { accent-color: var(--akcent); margin-right: .35rem; }
.kat-wynik { margin: 0 0 .6rem; font-style: italic; color: var(--szary); }
.kat-pusto { padding: 1.5rem 0; font-style: italic; color: var(--szary); }
.m-wydanie { display: block; font-style: italic; color: var(--akcent); font-size: .85rem; }
.kat-wiecej-p { margin: 1.25rem 0 0; }
.kat-wiecej { font: inherit; color: inherit; background: none; border: 0; padding: .4rem 0; cursor: pointer; text-decoration: underline; text-decoration-color: var(--akcent); text-decoration-thickness: 2px; text-underline-offset: .22em; }
[data-wyglad="toga"] .kat-szukaj input { font-family: var(--f-dane); font-size: 1.15rem; }
[data-wyglad="toga"] .kat-dzialy { font-family: var(--f-dane); font-size: .95rem; gap: .5rem .6rem; }
[data-wyglad="toga"] .kat-dzial { border: 1px solid var(--linia); border-radius: 2px; padding: .3rem .6rem; }
[data-wyglad="toga"] .kat-dzial span { font-style: normal; }
[data-wyglad="toga"] .kat-dzial[aria-current="true"] { border-color: var(--akcent); text-decoration: none; }

/* ---------- panel "W mediach": zakładka przy prawej krawędzi i panel z prawej ---------- */
/* Zakładka zawsze w kolorze akcentu (12.10: po pierwszym otwarciu wracała do czerni i ginęła, np. na /w-mediach/). */
/* Zakładka w górnej części ekranu: niżej, w rogu, stoi przycisk "Do góry" (też nad paskiem powiadomień). Bez transform:
   przy rotate 180deg translateY(-50%) przesuwało ją w dół zamiast w górę i w niskim oknie nachodziła na przycisk (12.10). */
.media-przycisk { position: fixed; right: 0; top: min(30%, calc(100% - 22rem)); z-index: 25; writing-mode: vertical-rl; rotate: 180deg; padding: 1.25rem .7rem; font: 600 1.15rem/1 var(--f-tytul); letter-spacing: .02em; color: #fff; background: var(--akcent); border: 0; border-radius: 0 3px 3px 0; cursor: pointer; }
.media-przycisk:hover { filter: brightness(.9); }
.media-licznik { display: inline-block; margin-top: .55rem; color: inherit; font-weight: 700; }
.media-przycisk[aria-expanded="true"] { visibility: hidden; }
[data-wyglad="toga"] .media-przycisk { font-family: var(--f-dane); font-size: 1.02rem; color: var(--czolo-bg); background: var(--akcent-jasny); }
[data-wyglad="toga"] .media-licznik { color: inherit; }
.media-tlo { position: fixed; inset: 0; z-index: 40; background: rgba(20, 18, 16, .35); opacity: 0; transition: opacity 1s ease; }
.media-tlo.otwarty { opacity: 1; }
.media-panel { position: fixed; top: 0; right: 0; bottom: 0; z-index: 41; width: min(33vw, 32rem); min-width: 22rem; overflow-y: auto; overscroll-behavior: contain; background: var(--bg); color: var(--ink); border-left: 1px solid var(--ink); padding: 1.25rem 1.5rem 2rem; transform: translateX(102%); transition: transform 1s ease; }
.media-panel.otwarty { transform: none; }
.media-panel-glowa { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; border-bottom: 3px solid var(--ink); padding-bottom: .6rem; }
.media-panel-glowa h2 { margin: 0; font: 600 1.9rem/1.05 var(--f-tytul); }
.media-panel-zamknij { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; text-decoration: underline; padding: .3rem 0; }
/* Opis panelu stoi na dole, przy "Zobacz więcej" (12.10: na górze powtarzał się przy każdym otwarciu). */
.media-panel-glowa + .media-panel-lista { margin-top: .3rem; }
.media-panel-lista { list-style: none; margin: 0; padding: 0; }
.media-panel-lista li { padding: .8rem 0; border-bottom: 1px solid var(--linia); }
.media-p-meta { display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: .8125rem; align-items: start; margin: 0 0 .5rem; font-size: .92rem; }
.media-p-meta-l { display: flex; flex-wrap: wrap; align-items: baseline; gap: .1rem .5rem; }
.media-p-meta .media-sygnaly { min-height: 1.6em; flex-wrap: nowrap; }
.media-p-meta .media-rozwoj, .media-p-meta .media-ogien { margin: 0; }
.media-p-rodzaj { font-style: italic; color: var(--akcent); }
.media-p-ile { font: 600 .82rem/1 var(--f-dane); color: var(--bg); background: var(--akcent); padding: .15rem .4rem; border-radius: 2px; margin-left: .3rem; }
.media-p-tytul { display: block; font: 600 1.1rem/1.3 var(--f-tytul); text-decoration: none; }
.media-p-tytul:hover { text-decoration: underline; }
.goraca .media-p-tytul { font-size: 1.3rem; }
.media-p-zrodlo { margin: .25rem 0 0; font: 400 .85rem/1.4 var(--f-dane); color: var(--szary); }
/* Historia z kilku artykułów (panel i /w-mediach/): tytuł rozwija listę artykułów, artykuł otwiera redakcję. */
.media-p-wiele > summary, .wm-wiele > summary { list-style: none; cursor: pointer; -webkit-user-select: none; user-select: none; }
.media-p-wiele > summary::-webkit-details-marker, .wm-wiele > summary::-webkit-details-marker { display: none; }
.media-p-wiele > summary:hover .media-p-tytul, .wm-wiele > summary:hover .wm-tytul { text-decoration: underline; }
/* 30.10 (właściciel: "21 artykułów i strzałka bardzo małe"): większy napis i strzałka. */
.media-p-rozwin, .wm-rozwin { display: inline-block; margin-top: .3rem; font: 600 1rem/1.4 var(--f-dane); color: var(--akcent); }
.media-p-rozwin::after, .wm-rozwin::after { content: ''; display: inline-block; width: .5em; height: .5em; margin: 0 0 .18em .45em; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(45deg); }
.media-p-wiele[open] .media-p-rozwin::after, .wm-wiele[open] .wm-rozwin::after { transform: rotate(-135deg); margin-bottom: -.05em; }
.media-panel-lista .media-p-artykuly, .wm-lista .wm-artykuly { list-style: none; margin: .45rem 0 .2rem; padding: 0; }
.media-panel-lista .media-p-artykuly li, .wm-lista .wm-artykuly li { padding: .45rem 0; border: 0; border-top: 1px solid var(--linia); }
.media-p-artykuly a, .wm-artykuly a { display: block; font: 400 1rem/1.4 var(--f-tekst); text-decoration: none; }
.media-p-artykuly a:hover, .wm-artykuly a:hover { text-decoration: underline; }
.media-p-redakcja, .wm-redakcja { font: 600 .8rem/1.4 var(--f-dane); color: var(--szary); margin-right: .3rem; }
[data-wyglad="toga"] .media-p-rozwin, [data-wyglad="toga"] .wm-rozwin { color: var(--akcent-jasny); }
[data-wyglad="toga"] .media-panel { background: var(--czolo-bg); color: var(--czolo-ink); border-left-color: var(--linia); }
[data-wyglad="toga"] .media-panel-glowa { border-bottom-color: var(--linia); }
[data-wyglad="toga"] .media-p-rodzaj { font: 600 .85rem/1 var(--f-dane); font-style: normal; color: var(--akcent-jasny); }
@media (max-width: 60rem) {
  .media-panel { width: 88vw; min-width: 0; padding: 1rem 1rem 2rem; }
  .media-przycisk { padding: 1rem .55rem; font-size: 1.02rem; }
}
@media (prefers-reduced-motion: reduce) { .media-panel, .media-tlo { transition: none; } }
@media print { .media-przycisk, .media-panel, .media-tlo { display: none; } }

/* ---------- przycisk "Do góry" na długich stronach (src/scene/do-gory.js) ---------- */
/* W kolorze zakładki "W mediach" (12.10). */
.do-gory { position: fixed; right: 1.25rem; bottom: 1.25rem; z-index: 25; display: inline-flex; align-items: center; gap: .55rem; padding: .75rem 1.1rem; font: 600 1.02rem/1 var(--f-dane); color: #fff; background: var(--akcent); border: 0; border-radius: 3px; cursor: pointer; opacity: 0; transition: opacity 1.5s ease; }
.do-gory.widoczny { opacity: 1; }
.do-gory:hover { filter: brightness(.9); }
[data-wyglad="toga"] .do-gory { color: var(--czolo-bg); background: var(--akcent-jasny); }
.do-gory:focus-visible { outline: 2px solid var(--akcent); outline-offset: 3px; }
.do-gory-strzalka { width: .5em; height: .5em; margin-top: .3em; border-left: 1.5px solid currentColor; border-top: 1.5px solid currentColor; transform: rotate(45deg); }
@media (max-width: 40rem) { .do-gory { right: .75rem; bottom: .75rem; } }
@media (prefers-reduced-motion: reduce) { .do-gory { transition: none; } }
@media print { .do-gory { display: none; } }

/* ---------- ikony liniowe (kreska jak strzałki dni) ---------- */
.ikona { width: 1.15em; height: 1.15em; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; vertical-align: -.2em; }
.media-panel-zamknij .ikona, .powiadom-pozniej .ikona { width: 1.6rem; height: 1.6rem; vertical-align: middle; }
.media-panel-zamknij, .powiadom-przyciski .powiadom-pozniej { text-decoration: none; padding: .35rem; margin: -.35rem; line-height: 0; }
.media-panel-zamknij:hover .ikona, .powiadom-pozniej:hover .ikona { stroke: var(--akcent); }
.link-przycisk .ikona { margin-right: .4rem; }
.link-przycisk { text-decoration: none; }
.link-przycisk .etykieta { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: .2em; }
/* "Zainstaluj aplikację" (src/scene/aplikacja.js): w stopce w osobnym wierszu jak linki nad nim, na stronie
   /strona-startowa/ w kolorze przycisku "Do góry". Ukryty, dopóki przeglądarka nie zgłosi, że da się zainstalować. */
.stopka-blok:not([hidden]) { display: block; }
.przycisk-zainstaluj { display: inline-flex; align-items: center; gap: .55rem; padding: .75rem 1.1rem; font: 600 1.02rem/1 var(--f-dane); color: #fff; background: var(--akcent); border: 0; border-radius: 3px; cursor: pointer; }
.przycisk-zainstaluj:hover { filter: brightness(.9); }
.przycisk-zainstaluj:focus-visible { outline: 2px solid var(--akcent); outline-offset: 3px; }
[data-wyglad="toga"] .przycisk-zainstaluj { color: var(--czolo-bg); background: var(--akcent-jasny); }
/* Zapis na wydanie e-mailem (/newsletter/): pole i przycisk w jednym wierszu, przycisk jak "Zainstaluj". */
.nl-form { margin: 1.5rem 0 1rem; max-width: 34rem; }
.nl-form label { display: block; margin: 0 0 .4rem; font: 400 1rem/1.3 var(--f-dane); }
.nl-wiersz { display: flex; flex-wrap: wrap; gap: .6rem; }
.nl-wiersz input { flex: 1 1 14rem; min-width: 0; padding: .7rem .8rem; font: 400 1.05rem/1.2 var(--f-dane); color: var(--ink); background: var(--bg); border: 1px solid var(--ink); border-radius: 3px; }
.nl-form button { padding: .75rem 1.2rem; font: 600 1.02rem/1 var(--f-dane); color: #fff; background: var(--akcent); border: 0; border-radius: 3px; cursor: pointer; }
.nl-form button:hover { filter: brightness(.9); }
[data-wyglad="toga"] .nl-form button { color: var(--czolo-bg); background: var(--akcent-jasny); }
.nl-pulapka { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
/* Pasek "Bez internetu" nad nagłówkiem: tylko wtedy, gdy strona jest kopią z pamięci urządzenia. */
.bez-sieci { margin: 0; padding: .55rem 1rem; font: 600 .9rem/1.35 var(--f-dane); color: var(--bg); background: var(--ink); text-align: center; }
.bez-sieci .link-przycisk { text-decoration: underline; text-underline-offset: .2em; }
/* Szukajka katalogu: lupa w polu, po lewej. */
.kat-szukaj { position: relative; display: block; }
.kat-szukaj .ikona { position: absolute; left: 0; top: 50%; translate: 0 -50%; width: 1.35rem; height: 1.35rem; color: var(--szary); pointer-events: none; }
.kat-szukaj input { padding-left: 2.1rem; }
/* Zakładka "W mediach": tekst czytany od dołu, młotek u góry (odwracamy go z powrotem). */
.media-przycisk .ikona { rotate: 180deg; width: 1.45rem; height: 1.45rem; margin-top: .6rem; vertical-align: middle; }

/* ---------- animacje z prawa: młotek sędziowski i waga ---------- */
.mlotek-glowa { transform-box: view-box; transform-origin: 4px 16px; }
.uderza .mlotek-glowa { animation: uderzenie 1.6s ease 1; }
@keyframes uderzenie {
  0% { transform: rotate(0); }
  35% { transform: rotate(-32deg); }
  58% { transform: rotate(7deg); }
  72% { transform: rotate(-3deg); }
  100% { transform: rotate(0); }
}
.kat-h1 .ikona { width: .8em; height: .8em; margin-right: .3em; vertical-align: -.05em; stroke-width: 1.3; color: var(--akcent); }
.waga-ramie { transform-box: view-box; transform-origin: 12px 7px; }
.laduje .waga-ramie, .katalog-dok:has(.laduje) .waga-ramie { animation: kolysanie 2.4s ease-in-out infinite alternate; }
@keyframes kolysanie {
  from { transform: rotate(-9deg); }
  to { transform: rotate(9deg); }
}
@media (prefers-reduced-motion: reduce) {
  .uderza .mlotek-glowa, .laduje .waga-ramie, .katalog-dok:has(.laduje) .waga-ramie { animation: none; }
}

/* Zestawienie: 7 najlepszych, reszta po rozwinięciu. */
.zest-wiecej { margin-top: 1.25rem; }
.zest-wiecej > summary { cursor: pointer; font-weight: 600; text-decoration: underline; text-decoration-color: var(--akcent); text-decoration-thickness: 2px; text-underline-offset: .22em; list-style: none; }
.zest-wiecej > summary::-webkit-details-marker { display: none; }
.zest-wiecej[open] > summary { margin-bottom: 1rem; }

/* Panel "W mediach": odnośnik do archiwum pod listą. */
.media-panel-wiecej { margin: 1.1rem 0 .5rem; }
.media-panel-wiecej a { font-weight: 600; text-decoration-color: var(--akcent); text-decoration-thickness: 2px; text-underline-offset: .22em; }

/* Strona /w-mediach/ i /tech/: archiwum panelu, dni od najnowszego, jak przegląd prasy w gazecie.
   Proporcje (16.10, właściciel: "policz to zgodnie z Fibonaccim"): wszystkie odstępy z ciągu 5, 8, 13, 21, 34, 55 px
   (każdy to poprzedni razy φ ≈ 1,618), pismo w tym samym łańcuchu: redakcje 13, tytuł karty 21, dzień 34,
   nagłówek strony 55 (.dok h1 3.4rem). W karcie rzeczy związane stykają się (5-8), osobne części dzieli 13,
   karty i nagłówek od kart 21, dni 55. Mur: karty wchodzą pod najkrótszą kolumnę (src/scene/media-archiwum.js,
   klasa wm-mur), bez skryptu zwykła siatka. */
.w-mediach { max-width: none; }
/* Zmienne na całej stronie mediów: przełącznik pojedynczych stoi poza .w-mediach (16.10 bez tego tracił styl). */
.media-strona { --f5: .3125rem; --f8: .5rem; --f13: .8125rem; --f21: 1.3125rem; --f34: 2.125rem; --f55: 3.4375rem; }
.wm-dzien { margin: 0 0 var(--f55); }
.wm-dzien h2 { font: 600 var(--f34)/1.272 var(--f-tytul); margin: 0 0 var(--f21); padding-bottom: var(--f8); border-bottom: 1px solid var(--ink); }
/* Telefon: dzień o krok niżej w skali (21 x pierwiastek z phi = 26,7 px), 34 px zajmowało całą szerokość. */
@media (max-width: 40rem) { .wm-dzien h2 { font-size: 1.66875rem; } }
/* Na stronach mediów zakładka "W mediach" jest zbędna (strona sama jest archiwum), a na telefonie zasłaniała tekst. */
body:has(.media-strona) .media-przycisk { display: none; }
.wm-lista { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(17rem, 1fr)); gap: 1.5rem; align-items: start; }
.wm-lista.wm-mur { grid-auto-rows: 1px; row-gap: 0; }
.wm-lista > li { padding: 1.75rem 1.9rem; border: 1px solid var(--linia); border-radius: 2px; background: var(--bg); }
.wm-lista > li.goraca { border-color: var(--ink); }
/* Wiersz meta w dwóch kolumnach (16.10, "przeskakuje"): przy długim rodzaju znaki tematu spadały samotnie do nowej
   linii. Z lewej rodzaj, godzina, redakcje zawijają się u siebie; z prawej bateria i ogień zawsze w pierwszej linii. */
.wm-meta { display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: var(--f13); align-items: start; margin: 0 0 .9rem; font-size: var(--f13); line-height: var(--f21); color: var(--szary); }
/* 30.10 (właściciel: plakietka redakcji w nowym wierszu "ściśnięta z tym, co powyżej"): odstęp między wierszami. */
.wm-meta-l { display: flex; flex-wrap: wrap; align-items: baseline; gap: .55rem var(--f8); }
.wm-rodzaj { font-style: italic; color: var(--akcent); }
.wm-ile { font: 600 var(--f13)/1 var(--f-dane); color: var(--bg); background: var(--akcent); padding: .1875rem var(--f5); border-radius: 2px; }
/* Bateria i ogień na prawym końcu wiersza meta (16.10: płomień zajmował cały wiersz, na telefonie to strata miejsca). */
.wm-meta .media-status-tekst, .media-p-meta .media-status-tekst { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.wm-meta .media-sygnaly { min-height: var(--f21); flex-wrap: nowrap; gap: var(--f8); }
.wm-lista .media-rozwoj, .wm-lista .media-ogien { margin: 0; }
.wm-tytul { display: block; font: 600 1.03rem/1.272 var(--f-tytul); text-decoration: none; text-wrap: pretty; }
.wm-rozwin { display: block; width: fit-content; margin-top: .6rem; }
.goraca .wm-tytul { font-size: var(--f21); line-height: 1.272; }
.wm-tytul:hover { text-decoration: underline; text-decoration-color: var(--akcent); }
.wm-zrodlo { margin: 1rem 0 0; font: 400 var(--f13)/var(--f21) var(--f-dane); color: var(--szary); }
/* Powiązane wątki (src/media-powiazane.js): osobna część karty (13 nad nią). Karta, do której prowadzi odnośnik,
   dostaje pełną ramkę w kolorze akcentu (cała ramka, nie jeden bok). */
.wm-powiazane { margin: 1rem 0 0; font: 400 var(--f13)/var(--f21) var(--f-dane); color: var(--szary); }
.media-p-powiazane { margin: .5rem 0 0; font: 400 .85rem/1.4 var(--f-dane); color: var(--szary); }
.wm-powiazane a, .media-p-powiazane a { color: var(--ink); text-decoration: underline; text-decoration-color: var(--akcent); text-underline-offset: .2em; }
.wm-powiazane a:hover, .media-p-powiazane a:hover { color: var(--akcent); }
.wm-powiazane > summary, .media-p-powiazane > summary { cursor: pointer; width: fit-content; }
.wm-powiazane > summary::marker, .media-p-powiazane > summary::marker { color: var(--akcent); }
.wm-powiazane ul, .media-p-powiazane ul { list-style: none; margin: .35rem 0 0; padding: 0; }
.wm-powiazane li, .media-p-powiazane li { padding: .35rem 0; border-top: 1px solid var(--linia); }
.wm-lista > li, .wm-pojedyncze li { scroll-margin: 5rem 0; }
.wm-lista > li.wm-cel { border-color: var(--akcent); box-shadow: 0 0 0 1px var(--akcent); }
/* Pojedyncze doniesienia (jedna redakcja, bez kafelka z oceny) tylko po włączeniu przełącznika w nagłówku (data-pojedyncze na
   kontenerze, wybór zapamiętany w przeglądarce). Dzień z samymi pojedynczymi bez przełącznika znika. */
.wm-opcja { display: inline-flex; align-items: center; gap: var(--f8); min-height: var(--f34); margin: 0 0 var(--f21); font: 400 var(--f13)/var(--f21) var(--f-dane); cursor: pointer; }
.wm-opcja input { width: 1.0625rem; height: 1.0625rem; margin: 0; accent-color: var(--akcent); }
.w-mediach:not([data-pojedyncze]) .wm-pojedyncze, .w-mediach:not([data-pojedyncze]) .wm-dzien--pojedyncze { display: none; }
.wm-pojedyncze { margin: var(--f21) 0 0; }
.wm-pojedyncze h3 { margin: 0 0 var(--f8); font: italic 400 var(--f13)/var(--f21) var(--f-dane); color: var(--szary); }
.wm-pojedyncze ul { list-style: none; margin: 0; padding: 0; columns: 2 24rem; column-gap: var(--f34); }
.wm-pojedyncze li { break-inside: avoid; padding: var(--f8) 0; border-top: 1px solid var(--linia); }
.wm-pojedyncze .wm-tytul { display: inline; font-size: 1.03rem; line-height: 1.272; }
.wm-pojedyncze-meta { font: 400 var(--f13)/var(--f21) var(--f-dane); color: var(--szary); }
.wm-pojedyncze .wm-powiazane { margin-top: var(--f5); }
[data-wyglad="toga"] .wm-pojedyncze h3 { font-style: normal; }
[data-wyglad="toga"] .wm-rodzaj { font: 600 .85rem/1.4 var(--f-dane); font-style: normal; color: var(--akcent-jasny); }
[data-wyglad="toga"] .wm-ile { color: var(--czolo-bg); background: var(--akcent-jasny); }
[data-wyglad="toga"] .wm-dzien h2 { border-bottom-color: var(--linia); }
[data-wyglad="toga"] .wm-lista > li { background: none; }
[data-wyglad="toga"] .wm-lista > li.goraca { border-color: var(--czolo-szary); }

/* Zaproszenie do panelu tylko przed pierwszym otwarciem. */
/* Kolor zakładki jest stały (wyżej), przed pierwszym otwarciem dochodzi tylko ruch. */
@media (prefers-reduced-motion: no-preference) {
  .media-przycisk.media-zaprasza { animation: media-zaproszenie 4.8s ease-in-out infinite; }
  @keyframes media-zaproszenie { 0%, 65%, 100% { translate: 0; } 76%, 89% { translate: -4px 0; } 82%, 95% { translate: 0; } }
}
/* Oś czasu na dole strony sprawy, po treści orzeczenia: dodatkowy fakt (12.10). */
.po-orzeczeniu { margin-top: 2.5rem; padding-top: .5rem; border-top: 1px solid var(--linia); }

.media-rozwoj{--sygnal:#c2331d;display:inline-flex;align-items:center;margin:.65em 0;color:var(--sygnal);vertical-align:middle}
.media-rozwoj--2{--sygnal:#c46519}.media-rozwoj--3{--sygnal:#ae8900}.media-rozwoj--4,.media-rozwoj--5{--sygnal:#34a85e}
.media-bateria{display:inline-flex;position:relative;gap:2px;padding:3px;border:1.5px solid currentColor;width:47px;height:18px;flex:none;margin-right:3px}
.media-bateria::after{content:"";position:absolute;right:-4px;top:4px;width:2px;height:7px;background:currentColor}
.media-bateria i{display:block;flex:1;background:currentColor;opacity:.14}.media-bateria i.pelny{opacity:1}
.media-rozwoj--5 .media-bateria{box-shadow:0 0 5px #29bf6270,0 0 12px #29bf6240}
.media-rozwoj--5 .media-bateria i{box-shadow:0 0 4px #29bf6280}
[data-wyglad="toga"] .media-rozwoj{--sygnal:#f87965}[data-wyglad="toga"] .media-rozwoj--2{--sygnal:#f5a14e}[data-wyglad="toga"] .media-rozwoj--3{--sygnal:#e9cd4b}[data-wyglad="toga"] .media-rozwoj--4,[data-wyglad="toga"] .media-rozwoj--5{--sygnal:#69e894}
[data-wyglad="toga"] .media-rozwoj--5 .media-bateria{box-shadow:0 0 6px #69e89499,0 0 15px #69e89455}

/* Wstęp archiwum mediów wyrównany do szerokości listy tematów. */
.media-strona .dok-tekst,.media-strona .lead{max-width:none}

.media-sygnaly{display:flex;align-items:center;flex-wrap:wrap;gap:.35em .7em}.media-status{font:600 .85rem/1.4 var(--f-dane);color:var(--akcent)}
/* Ogień: szybko przybywa publikacji (src/media-rozwoj.js), niezależnie od baterii. Wolne migotanie od podstawy płomienia. */
.media-ogien{display:inline-flex;width:1.35rem;height:1.35rem;margin:.55em 0;color:#e2560f;flex:none}
.media-ogien svg{width:100%;height:100%;fill:currentColor;transform-origin:50% 92%;filter:drop-shadow(0 0 3px #ff7a1a88)}
@media (prefers-reduced-motion:no-preference){.media-ogien svg{animation:ogien 2.4s ease-in-out infinite}}
@keyframes ogien{0%,100%{transform:scale(1,1);opacity:1}35%{transform:scale(1.06,1.12);opacity:.9}70%{transform:scale(.97,1.04);opacity:1}}
[data-wyglad="toga"] .media-ogien{color:#ff8a4c}

/* Wspólne zakładki monitoringu, również w wysuwanym panelu. */
.monitor-tabs { display:flex; gap:.75rem; flex-wrap:wrap; margin:1rem 0 1.5rem; }
.monitor-tabs a,.monitor-tabs button { font:inherit; color:inherit; background:transparent; border:1px solid currentColor; padding:.35em .75em; text-decoration:none; cursor:pointer; }
.monitor-tabs [aria-current="page"],.monitor-tabs [aria-pressed="true"],.monitor-tabs [aria-selected="true"] { font-weight:600; color:var(--bg); background:var(--akcent); border-color:var(--akcent); border-bottom-width:3px; }
.monitor-tabs :focus-visible { outline:2px solid currentColor; outline-offset:3px; }
/* Strony działów (20.10): pod zakładkami jedno ustawienie "Pokaż też pojedyncze doniesienia" dla wszystkich działów,
   z lewej (po prawej obok zakładek "nie pasowało", właściciel). */
.monitor-glowa { display:flex; flex-direction:column; align-items:flex-start; gap:var(--f13); margin:1rem 0 1.5rem; }
.monitor-glowa .monitor-tabs { margin:0; }
.monitor-glowa .wm-opcja { margin:0; }

/* Informacja o AI w opisie serwisu, zgodna z oboma motywami. */
.nota-ai { margin: 1.5rem 0; padding: 1rem 1.25rem; border: 1px solid var(--linia); }
.prose .nota-ai h2 { margin: 0 0 .75rem; font-size: 1.2em; }
.prose .nota-ai p:last-child { margin-bottom: 0; }

/* Udostępnianie sprawy (src/scene/udostepnij.js, 18.10): na komputerze rząd ikon jednym kolorem (kolor tekstu),
   wszystko wyśrodkowane w pionie; na telefonie dwa przyciski z napisem. Bez ramek i tła. */
.udostepnij { margin-top: 2rem; }
.udostepnij-linki { display: flex; flex-wrap: wrap; align-items: center; gap: .25rem 1rem; margin: 0 0 .75rem; font: 400 1rem/1.5 var(--f-dane); }
.udostepnij-etykieta { font-weight: 600; margin-right: .25rem; }
.udostepnij-ikona { display: inline-flex; align-items: center; justify-content: center; width: 2.5rem; height: 2.5rem; margin: 0 -.35rem; color: var(--ink); background: none; border: 0; padding: 0; cursor: pointer; }
.udostepnij-ikona svg { width: 1.3rem; height: 1.3rem; }
.udostepnij-ikona:hover, .udostepnij-ikona:focus-visible { color: var(--akcent); }
.udostepnij-linki .link-przycisk { display: inline-flex; align-items: center; gap: .45rem; color: var(--ink); padding: .5rem 0; text-decoration: none; }
.udostepnij-linki .link-przycisk svg { width: 1.2rem; height: 1.2rem; flex: none; }
.udostepnij-linki .link-przycisk span { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: .2em; }
.udostepnij-linki .link-przycisk:hover span { text-decoration-thickness: 2px; text-decoration-color: var(--akcent); }
.udostepnij-stan { color: var(--szary); font-size: .95rem; overflow-wrap: anywhere; }

/* Spis spraw dnia: poranne sprawy zastąpione wydaniem specjalnym (src/build.js, 18.10). */
.arch-poranne { margin: .75rem 0 0; }
.arch-poranne-h { margin: 0; font: italic 400 .85rem/1.35 var(--f-tytul); color: var(--szary); }
.arch-poranne .arch-dalsze { margin-top: .15rem; font-size: .85rem; }
.arch-poranne .arch-dalsze li { grid-template-columns: 1.1rem minmax(0, 1fr); padding: .2rem 0; }
.arch-poranne .arch-nr { font-size: .85rem; }

/* Skala płomienia (src/media-rozwoj.js, poziomOgnia, 19.10): mały bez poświaty i bez migotania, średni jak dawny ogień, duży większy. */
.media-ogien--1{width:.95rem;height:.95rem}
.media-ogien--1 svg{filter:none;animation:none}
.media-ogien--3{width:1.75rem;height:1.75rem}
.media-ogien--3 svg{filter:drop-shadow(0 0 5px #ff7a1aaa)}

/* Każdy kolejny płomień ciemniejszy (19.10, właściciel): jasny, pomarańczowy, ciemnoczerwony; w wyglądzie „toga” (ciemne tło) ta sama kolejność w jaśniejszych odcieniach. */
.media-ogien--1{color:#f59a52}
.media-ogien--3{color:#b8300c}
[data-wyglad="toga"] .media-ogien--1{color:#ffc08f}
[data-wyglad="toga"] .media-ogien--3{color:#ff5a24}

/* Pasek na stronie dawnego wydania (/dzien/RRRR-MM-DD/, src/build.js, 19.10): data i powrót do dzisiejszego. */
.wydanie-dawne { background: color-mix(in srgb, var(--akcent) 9%, var(--bg)); }
.wydanie-dawne p { margin: 0; padding: .65rem 0; font: 400 .95rem/1.4 var(--f-dane); color: var(--ink); display: flex; flex-wrap: wrap; gap: .25rem 1rem; align-items: baseline; }
.wydanie-dawne a { color: var(--akcent); font-weight: 600; text-decoration-thickness: 1px; text-underline-offset: .2em; }

/* Sprawy nr 2 i 3 pod kartką poprzedniej sprawy dnia (src/build.js, 19.10): jak w archiwum, mniejsze, wyrównane do tytułu. */
.pop-dalsze { margin: -.6rem 0 1.1rem 5.7rem; font-size: .85rem; }
.poprzednie-lista .pop-dalsze li { grid-template-columns: 1.1rem minmax(0, 1fr); padding: .15rem 0; border-bottom: 0; }
.pop-dalsze .arch-nr { font-size: .85rem; }
.pop-dalsze a { color: var(--ink); text-decoration: none; }
.pop-dalsze a:hover { text-decoration: underline; text-decoration-color: var(--akcent); }

/* Strony z listami (archiwum spraw dnia, kategorie, katalog): wstęp na całą szerokość, jak na stronach mediów (19.10:
   przy 34em łamał się w połowie szerokiego ekranu). Strony do czytania zostają z węższym wstępem. */
.lista-strona .dok-tekst, .lista-strona .lead, .katalog-dok .dok-tekst, .katalog-dok .lead { max-width: none; }
/* Z marginesem (kategorie) kolumna tekstu ma 42rem: na stronach z listami sięga do prawej krawędzi. */
.lista-strona .dok-in:not(.bez-marginesu) > .dok-tekst { grid-column: t / -1; }

/* Przyciski "więcej" pod listami (19.10, właściciel: "zasady dla wszystkich elementów takie same"): Zobacz archiwum,
   Pokaż pozostałe w zestawieniu, Pokaż więcej w katalogu. Prawa krawędź, ten sam krój, cienkie podkreślenie w kolorze akcentu. */
.pop-wiecej, .kat-wiecej-p, .zest-wiecej > summary { text-align: right; }
.pop-wiecej, .zest-wiecej > summary, .kat-wiecej { font: 600 1.15rem/1.3 var(--f-tytul); }
.pop-wiecej a, .zest-wiecej > summary, .kat-wiecej { color: var(--ink); text-decoration: underline; text-decoration-color: var(--akcent); text-decoration-thickness: 1px; text-underline-offset: .2em; }
.pop-wiecej a:hover, .zest-wiecej > summary:hover, .kat-wiecej:hover { text-decoration-thickness: 2px; }

/* Orzeczenia spoza tematów serwisu na końcu rozwiniętego zestawienia (src/build.js, 19.10). */
.zest-poza { margin: 2rem 0 .4rem; font: italic 600 1.1rem/1.3 var(--f-tytul); }

/* Zajawka pod leadem strony sprawy (src/zajawka.js, 23.10): drugi akapit leadu, ten sam krój i wielkość (właściciel:
   "czemu nagle te teksty AI są kursywą? może jako drugi akapit po prostu"). */
.zajawka { font-size: 1.45rem; line-height: 1.48; max-width: 34em; margin: 0 0 1.4rem; }
.lead:has(+ .zajawka) { margin-bottom: .7rem; }
@media (max-width: 60rem) { .zajawka { font-size: 1.22rem; } }

/* Szukanie innej sprawy po sygnaturze na stronie sprawy i stronie 404 (23.10), w stylu szukajki katalogu. */
.szukaj-sygn { margin: 0 0 2rem; }
.szukaj-sygn label { display: block; font: italic 400 .95rem/1.3 var(--f-dane); color: var(--szary); margin-bottom: .2rem; }
.szukaj-sygn-pole { position: relative; display: block; }
.szukaj-sygn-pole .ikona { position: absolute; left: 0; top: 50%; translate: 0 -50%; width: 1.1rem; height: 1.1rem; color: var(--szary); pointer-events: none; }
.szukaj-sygn input { width: 100%; font: 400 1.05rem/1.3 var(--f-tekst); color: var(--ink); background: none; border: 0; border-bottom: 1px solid var(--ink); padding: .45rem 0 .45rem 1.7rem; border-radius: 0; }
.szukaj-sygn input::placeholder { color: var(--szary); font-style: italic; }
.szukaj-sygn input:focus-visible { outline: none; border-bottom: 2px solid var(--akcent); }
.dok-tekst .szukaj-sygn { max-width: 26rem; margin-top: 1.5rem; }

/* Bateria stopień 6, temat od 10 dni z publikacjami (src/media-rozwoj.js, DNI_HYPER, 24.10): jak płomienie, każdy stopień
   ciemniejszy (właściciel: "jaśniejszy to lżejszy, na końcu najciemniejsza"): pełna bateria (6+ dni) jaśniejsza zieleń,
   stopień 6 najciemniejsza z poświatą, która powoli oddycha (3,2 s). W ciemnym wyglądzie odwrotnie: siła to jasność.
   Bez ruchu, gdy system prosi o ograniczenie animacji. */
.media-rozwoj--6 { --sygnal: #0b5a2b; }
.media-rozwoj--6 .media-bateria { box-shadow: 0 0 6px #29bf6299, 0 0 16px #29bf6266; }
.media-rozwoj--6 .media-bateria i { box-shadow: 0 0 5px #29bf62aa; }
[data-wyglad="toga"] .media-rozwoj--6 { --sygnal: #7dffab; }
[data-wyglad="toga"] .media-rozwoj--6 .media-bateria { box-shadow: 0 0 7px #69e894bb, 0 0 19px #69e89477; }
@media (prefers-reduced-motion: no-preference) {
  .media-rozwoj--6 .media-bateria { animation: bateria-hyper 3.2s ease-in-out infinite alternate; }
  @keyframes bateria-hyper { from { box-shadow: 0 0 4px #29bf6266, 0 0 10px #29bf6233; } to { box-shadow: 0 0 8px #29bf62bb, 0 0 22px #29bf6288; } }
}
@media (prefers-reduced-motion: no-preference) {
  [data-wyglad="toga"] .media-rozwoj--6 .media-bateria { animation-name: bateria-hyper-toga; }
  @keyframes bateria-hyper-toga { from { box-shadow: 0 0 5px #69e89466, 0 0 12px #69e89433; } to { box-shadow: 0 0 9px #69e894cc, 0 0 24px #69e89488; } }
}

/* Zestawienie miesięczne /raporty/RRRR-MM/ (src/strona-raportu.js, 24.10). Jeden system kwadratów jak we wzorze
   właściciela (podsumowanie miesiąca z Instagrama): kalendarz spraw dnia, rytm mediów, czas życia, opiniotwórczość.
   Kolory: karne = akcent, inne wydziały = tusz (druk dwubarwny), brak = linia; nasycenie akcentu (zmieszanego z tłem)
   to skala w wykresach mediów, więc działa w obu wyglądach. Odczyt (.ri-odczyt) nad wykresem: palcem dotyka się
   kwadratu i od razu widać opis bez zasłaniania. */
.raport .dok-tekst { max-width: none; }
.raport-lead { font-size: 1.85rem; line-height: 1.34; max-width: 72rem; margin: 0 0 2.6rem; text-wrap: pretty; }
/* Wstęp redakcji (pole "wstep" w pliku zestawienia), 25.10, właściciel: pełna szerokość, "jak w gazecie to złamane",
   możliwość zwinięcia. Łam na całą szerokość: 3 szpalty na komputerze, 2 na tablecie, 1 na telefonie. Bez ilustracji:
   ta sama co na głównej była tylko powtórzeniem (właściciel: "bez zdjęcia, sam tekst"). */
.raport-wstep { margin: -1rem 0 3rem; }
.raport-wstep > summary { cursor: pointer; margin: 0 0 1rem; font-weight: 600; text-decoration: underline; text-decoration-color: var(--akcent); text-decoration-thickness: 2px; text-underline-offset: .22em; }
.raport-wstep-lam { columns: 3; column-gap: 2.4rem; column-rule: 1px solid var(--linia); font-size: 1.12rem; line-height: 1.6; text-align: justify; hyphens: auto; }
.raport-wstep-lam p { margin: 0 0 1rem; }
@media (max-width: 75rem) { .raport-wstep-lam { columns: 2; } }
@media (max-width: 48rem) { .raport-wstep-lam { columns: 1; text-align: left; } }
.raport-lead b { font-weight: 600; }
.r-sprawy { color: var(--akcent); }
.raport-zasady p { max-width: 72rem; margin: 0; font-size: 1.05rem; color: var(--szary); text-wrap: pretty; }

.kal-blok { display: grid; grid-template-columns: minmax(0, 26rem) minmax(0, 1fr); gap: 2rem 4rem; align-items: start; }
.kal-tydzien, .kal-dni { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: .4rem; }
.kal-tydzien { margin-bottom: .45rem; font: 400 .85rem/1 var(--f-dane); color: var(--szary); text-align: center; }
.kal-dni { list-style: none; margin: 0; padding: 0; }
.kal-d { display: flex; box-sizing: border-box; aspect-ratio: 1; padding: .38rem .45rem; border-radius: 6px; font: 600 .9rem/1 var(--f-dane); color: var(--bg); text-decoration: none; }
.kal-d--sprawa { background: var(--akcent); }
/* Grupa sprawy dnia (26.10); paleta sprawdzona na daltonizm w obu wyglądach (dataviz validate_palette). */
.kal-d--karne { background: var(--kal-karne); } .kal-d--firmy { background: var(--kal-firmy); }
.kal-d--urzad { background: var(--kal-urzad); } .kal-d--krzywdy { background: var(--kal-krzywdy); }
.kal-d--brak { background: color-mix(in srgb, var(--linia) 75%, var(--bg)); color: var(--szary); font-weight: 400; }
.kal-d { position: relative; }
.kal-d--specjalne::after { content: ""; position: absolute; right: .42rem; bottom: .42rem; width: .42rem; height: .42rem; border-radius: 50%; background: var(--bg); }
.kal-legenda .kal-d--specjalne::after { right: .22rem; bottom: .22rem; width: .3rem; height: .3rem; }
a.kal-d:hover, a.kal-d:focus-visible, a.kal-d.jest { outline: 2px solid var(--ink); outline-offset: 2px; }
.kal-legenda { display: flex; flex-wrap: wrap; align-items: center; gap: .35rem .45rem; margin: 1rem 0 0; font: 400 .9rem/1.3 var(--f-dane); color: var(--szary); }
.kal-legenda .kal-d { width: .85rem; height: .85rem; padding: 0; border-radius: 2px; aspect-ratio: auto; }
.kal-legenda .kal-d:not(:first-child) { margin-left: .5rem; }
.kal-panele { border-top: 3px solid var(--ink); padding-top: 1rem; }
.kal-dzien { display: none; }
.kal-dzien.jest, .kal-blok:not(.z-js) .kal-dzien:target { display: block; }
.kal-blok:not(.z-js) .kal-panele:has(.kal-dzien:target) .kal-dzien.jest:not(:target) { display: none; }
.kal-data { margin: 0 0 .6rem; font-size: 1.1rem; font-style: italic; color: var(--akcent); }
.kal-tytul { margin: 0 0 .7rem; font: 600 2.1rem/1.08 var(--f-tytul); letter-spacing: -.015em; text-wrap: balance; }
.kal-tytul a { text-decoration: none; }
.kal-tytul a:hover { text-decoration: underline; text-decoration-thickness: 2px; }
.kal-sygn { margin: 0 0 1.3rem; font: 600 1rem/1.4 var(--f-dane); }
.kal-dalsze { list-style: none; margin: 0 0 1.1rem; padding: 0; border-top: 1px solid var(--linia); }
.kal-dalsze li { display: grid; grid-template-columns: 6.5rem minmax(0, 1fr); gap: 1rem; padding: .55rem 0; border-bottom: 1px solid var(--linia); font-size: 1.02rem; line-height: 1.35; }
.kal-nr { color: var(--szary); font-style: italic; }
.kal-wydanie { margin: 0; font-size: 1.05rem; }
.kal-wydanie a { text-decoration-color: var(--akcent); text-decoration-thickness: 2px; text-underline-offset: .22em; }

.raport-dzial { margin: 4.5rem 0 0; padding-top: 1.1rem; border-top: 3px solid var(--ink); }
.raport-dzial > h2 { margin: 0 0 .6rem; font: 600 2.4rem/1.05 var(--f-tytul); letter-spacing: -.015em; }
/* Działy mediów w kartach (te same .monitor-tabs co na /w-mediach/), pasek kart przyklejony u góry przy przewijaniu.
   Ze skryptem widać jeden dział, a jego nagłówek zostaje tylko dla czytników ekranu (nazwa jest na karcie). */
.raport-media { margin-top: 4.5rem; }
.raport-karty-pasek { position: sticky; top: 0; z-index: 4; display: flex; flex-wrap: wrap; align-items: center; gap: .8rem 2rem; padding: .8rem 0; background: var(--bg); border-top: 3px solid var(--ink); border-bottom: 1px solid var(--linia); }
.raport-karty-pasek h2 { margin: 0; font: 600 2.4rem/1.05 var(--f-tytul); letter-spacing: -.015em; }
.raport-karty { margin: 0; }

.raport-media .raport-dzial { margin-top: 1.6rem; padding-top: 0; border-top: 0; }
.raport-media:not(.z-js) .raport-dzial + .raport-dzial { margin-top: 4.5rem; padding-top: 1.1rem; border-top: 3px solid var(--ink); }
.raport-media.z-js .raport-dzial > h2 { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.raport-liczby { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 1.5rem 2.5rem; margin: 1.6rem 0 3rem; }
.raport-liczby > div { display: flex; flex-direction: column-reverse; justify-content: flex-end; }
/* 30.10: bez linii nad każdą liczbą; tuż nad nimi jest linia paska W mediach (właściciel: "podwójne linie"). */
.raport-liczby dd { margin: 0; font: 600 2.7rem/1 var(--f-tytul); letter-spacing: -.02em; }
.raport-liczby dt { margin-top: .45rem; font: 400 .92rem/1.3 var(--f-dane); color: var(--szary); }
.ri { margin: 0 0 3.2rem; }
.ri figcaption h3 { margin: 0 0 .25rem; font: 600 1.4rem/1.2 var(--f-tytul); }
.ri figcaption .drobne { max-width: none; margin-bottom: .7rem; }
.ri-odczyt { min-height: 1.4em; max-width: none; margin: 0 0 .7rem; font-size: 1.05rem; line-height: 1.4; }
.ri-odczyt span { font: 400 .95rem/1.4 var(--f-dane); color: var(--szary); }
.ri-legenda { display: flex; flex-wrap: wrap; align-items: center; gap: .35rem .4rem; margin: .9rem 0 0; font: 400 .88rem/1.3 var(--f-dane); color: var(--szary); }
.ri-legenda > span { margin-left: .5rem; }
.ri-legenda .rytm-k, .ri-legenda .kw { display: inline-block; width: .85rem; height: .85rem; cursor: default; }

.rytm-siatka { --et: 15rem; display: grid; row-gap: 3px; }
.rytm-w { display: grid; grid-template-columns: var(--et) repeat(var(--dni), minmax(0, 1fr)); column-gap: 3px; align-items: center; }
.rytm-et { padding-right: .8rem; overflow: hidden; font: 400 .9rem/1.25 var(--f-dane); color: var(--ink); white-space: nowrap; text-overflow: ellipsis; text-decoration: none; }
a.rytm-et:hover, a.rytm-et.jest { text-decoration: underline; }
.rytm-slupki { height: 7rem; align-items: stretch; margin-bottom: .45rem; border-bottom: 1px solid var(--szary); }
.rytm-slupki .rytm-et { align-self: end; padding-bottom: .2rem; color: var(--szary); }
.rytm-s { background-image: linear-gradient(to top, var(--akcent) calc(var(--v) * 100%), transparent 0); cursor: default; }
.rytm-s:hover, .rytm-s.jest { background-color: color-mix(in srgb, var(--ink) 9%, transparent); }
.rytm-k { height: 1.05rem; border-radius: 2px; background: color-mix(in srgb, var(--linia) 45%, var(--bg)); }
.rytm-k.k1 { background: color-mix(in srgb, var(--akcent) 22%, var(--bg)); }
.rytm-k.k2 { background: color-mix(in srgb, var(--akcent) 48%, var(--bg)); }
.rytm-k.k3 { background: color-mix(in srgb, var(--akcent) 74%, var(--bg)); }
.rytm-k.k4 { background: var(--akcent); }
.rytm-k[data-t] { cursor: pointer; }
.rytm-os { margin-top: .35rem; }
.rytm-os span { font: 400 .78rem/1 var(--f-dane); color: var(--szary); text-align: center; white-space: nowrap; }

.kw { display: inline-block; width: 1.1rem; height: 1.1rem; margin: 0; padding: 0; border: 0; border-radius: 3px; background: var(--akcent); cursor: pointer; }
.kw.k1 { background: color-mix(in srgb, var(--akcent) 28%, var(--bg)); }
.kw.k2 { background: color-mix(in srgb, var(--akcent) 52%, var(--bg)); }
.kw.k3 { background: color-mix(in srgb, var(--akcent) 76%, var(--bg)); }
.kw--udzial { background: transparent; box-shadow: inset 0 0 0 1.5px color-mix(in srgb, var(--akcent) 60%, var(--bg)); }
.rytm-k[data-t]:hover, .rytm-k.jest, .kw[data-t]:hover, .kw.jest, .kw:focus-visible { outline: 2px solid var(--ink); outline-offset: 1px; }

.zycie-g { display: grid; gap: .6rem; margin: 0; }
.zycie-g > div { display: grid; grid-template-columns: 10rem minmax(0, 1fr); gap: 1.2rem; align-items: start; }
.zycie-g dt { display: flex; justify-content: space-between; font: 400 .95rem/1.15 var(--f-dane); }
.zycie-g dt b { font-weight: 600; }
.zycie-g dd { display: flex; flex-wrap: wrap; gap: 3px; margin: 0; }
.zycie-g .kw { width: 1.45rem; height: 1.45rem; }

.opinio-lista { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--linia); }
.opinio-lista li { display: grid; grid-template-columns: 10rem 4.5rem minmax(0, 1fr) 12rem; gap: 1rem; align-items: center; padding: .5rem 0; border-bottom: 1px solid var(--linia); }
.op-nazwa { font: 600 1rem/1.2 var(--f-dane); }
.op-liczby { font: 400 .95rem/1.2 var(--f-dane); color: var(--szary); white-space: nowrap; }
.op-liczby b { font-size: 1.15rem; color: var(--ink); }
.op-kw { display: flex; flex-wrap: wrap; gap: 3px; }
.op-przewaga { font: 400 .88rem/1.3 var(--f-dane); color: var(--szary); text-align: right; }

.raport-listy { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0 3rem; }
.raport-listy h3 { margin: 0 0 .6rem; font: 600 1.15rem/1.3 var(--f-tytul); }
.raport-tematy { margin: 0; padding-left: 1.4rem; }
.raport-tematy li { margin: 0 0 .8rem; font-size: 1rem; line-height: 1.35; }

@media (max-width: 60rem) {
  .raport-lead { font-size: 1.35rem; }
  .raport-liczby { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.2rem 1.5rem; }
  .raport-liczby dd { font-size: 2.1rem; }
  .zycie-g .kw { width: 1.15rem; height: 1.15rem; }
  .kal-blok { grid-template-columns: minmax(0, 1fr); }
  .kal-tytul { font-size: 1.6rem; }
  .kal-dalsze li { grid-template-columns: 5.5rem minmax(0, 1fr); gap: .6rem; }
  .raport-dzial > h2 { font-size: 2rem; }
  .raport-karty-pasek { gap: .6rem 1rem; padding: .6rem 0; }
  .raport-karty-pasek h2 { font-size: 1.45rem; }
  .raport-karty { gap: .5rem; }
  .rytm-siatka { row-gap: 2px; }
  .rytm-w { grid-template-columns: repeat(var(--dni), minmax(0, 1fr)); column-gap: 2px; }
  .rytm-et { grid-column: 1 / -1; padding: .45rem 0 .15rem; }
  .rytm-slupki { height: auto; grid-template-rows: auto 5.5rem; }
  .rytm-os .rytm-et { display: none; }
  .rytm-k { height: .85rem; }
  .zycie-g > div { grid-template-columns: minmax(0, 1fr); gap: .35rem; }
  .zycie-g dt { justify-content: flex-start; gap: .5rem; }
  .opinio-lista li { grid-template-columns: minmax(0, 1fr) auto; gap: .35rem 1rem; }
  .op-kw, .op-przewaga { grid-column: 1 / -1; text-align: left; }
  .raport-listy { grid-template-columns: minmax(0, 1fr); }
}

/* Pasmo zestawienia miesiąca na dole strony głównej (src/strona-raportu.js pasmoRaportu, 24.10; wzór właściciela:
   zero.pl, duże zdjęcie z tytułem na dole, obok kolumna). Własne, ciemne tło na całą szerokość w obu wyglądach;
   ilustracja sprawy miesiąca od redakcji, bez niej kalendarz miesiąca z kwadratów. */
.pasmo { --pasmo-bg: #1f1a16; --pasmo-ink: #f5f0ea; --pasmo-szary: #b9b0a6; --pasmo-linia: #3d352e; --pasmo-akcent: #ef6a4f;
  margin-top: 4rem; padding: 4rem 0 3rem; background: var(--pasmo-bg); color: var(--pasmo-ink); }
[data-wyglad="toga"] .pasmo { --pasmo-bg: #2b2235; --pasmo-ink: #f1edf5; --pasmo-szary: #b7adc2; --pasmo-linia: #463b52; --pasmo-akcent: #c3a6f2; }
.pasmo a { color: inherit; }
.pasmo-in { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); gap: 2.5rem 3rem; align-items: stretch; }
.pasmo-karta { position: relative; aspect-ratio: 16 / 10; overflow: hidden; border-radius: 6px; background: #000; }
.pasmo-obraz { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.pasmo-obraz--kalendarz { display: grid; place-items: end end; padding: 2.4rem; background: radial-gradient(circle at 75% 25%, #3a2f27, #15110e 70%); }
[data-wyglad="toga"] .pasmo-obraz--kalendarz { background: radial-gradient(circle at 75% 25%, #3d3049, #17121c 70%); }
.pasmo-kal { display: grid; grid-template-columns: repeat(7, 2.6rem); gap: .45rem; }
.pasmo-kw { aspect-ratio: 1; border-radius: 6px; background: rgb(255 255 255 / .1); }
.pasmo-kw--sprawa { background: var(--pasmo-akcent); }
.pasmo-brak { position: absolute; top: 1rem; left: 1rem; padding: .3rem .6rem; border: 1px dashed var(--pasmo-szary); border-radius: 3px; font: 400 .85rem/1.3 var(--f-dane); color: var(--pasmo-szary); }
/* 30.10: nakładka kończyła się ostrą linią w połowie zdjęcia; teraz przechodzi płynnie w przezroczystość. */
.pasmo-nakladka { position: absolute; inset: 0 0 auto 0; padding: 2rem 2.4rem 7rem; background: linear-gradient(to bottom, rgb(0 0 0 / .85), rgb(0 0 0 / .6) 55%, rgb(0 0 0 / 0)); }
.pasmo-rubryka { margin: 0 0 .5rem; font-size: 1.15rem; font-style: italic; color: var(--pasmo-ink); }
.pasmo-nakladka h2 { max-width: 15em; margin: 0; font: 600 3rem/1.02 var(--f-tytul); letter-spacing: -.02em; text-wrap: balance; }
.pasmo-nakladka h2 a { text-decoration: none; }
.pasmo-nakladka h2 a:hover { text-decoration: underline; text-decoration-thickness: 3px; }
.pasmo-wnioski { display: flex; flex-direction: column; }
.pasmo-wnioski h3 { margin: 0 0 .4rem; padding-bottom: .6rem; border-bottom: 3px solid var(--pasmo-ink); font: 600 1.5rem/1.2 var(--f-tytul); }
.pasmo-wnioski ol { list-style: none; margin: 0; padding: 0; }
.pasmo-wnioski li { padding: 1rem 0; border-bottom: 1px solid var(--pasmo-linia); }
.pasmo-wnioski li p { margin: .4rem 0 0; font-size: 1rem; line-height: 1.4; color: var(--pasmo-szary); }
.pasmo-wnioski .pasmo-zdanie { margin: 0; font-size: 1.12rem; line-height: 1.3; color: var(--pasmo-ink); }
.pasmo-zdanie b { display: block; margin-bottom: .25rem; font: 600 2.3rem/1 var(--f-tytul); letter-spacing: -.02em; }
.pasmo-dalej { margin: auto 0 0; padding-top: 1.2rem; font-size: 1.05rem; }
.pasmo-dalej a { text-decoration-color: var(--pasmo-akcent); text-decoration-thickness: 2px; text-underline-offset: .22em; }
.pasmo-podpis { max-width: 52rem; margin: .9rem 0 0; font-size: 1rem; line-height: 1.45; color: var(--pasmo-szary); }
.pasmo-podpis a { color: var(--pasmo-ink); }
@media (max-width: 60rem) {
  .pasmo { padding: 2.5rem 0 2rem; }
  .pasmo-in { grid-template-columns: minmax(0, 1fr); }
  .pasmo-karta { aspect-ratio: 4 / 3; }
  .pasmo-obraz--kalendarz { padding: 1.4rem; }
  .pasmo-obraz--kalendarz:has(.pasmo-brak) { padding-top: 4.2rem; }
  .pasmo-kal { grid-template-columns: repeat(7, 1.7rem); gap: .3rem; }
  .pasmo-nakladka { padding: 1.2rem 1.2rem 4rem; }
  .pasmo-nakladka h2 { font-size: 1.9rem; }
  .pasmo-zdanie b { font-size: 2rem; }
}

/* Sprawa miesiąca na stronie zestawienia: druga ilustracja redakcji po lewej, sprawa po prawej (24.10). */
.sprawa-miesiaca { display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); gap: 2rem 3rem; align-items: center; margin: 4.5rem 0 0; padding-top: 1.2rem; border-top: 3px solid var(--ink); }
.sprawa-miesiaca--bez-obrazu { grid-template-columns: minmax(0, 1fr); }
.sm-obraz { margin: 0; }
.sm-obraz img { display: block; width: 100%; aspect-ratio: 16 / 10; object-fit: cover; border-radius: 6px; background: #000; }
.sm-obraz figcaption { margin-top: .5rem; font: 400 .85rem/1.4 var(--f-dane); color: var(--szary); }
.sm-tekst h2 { margin: 0 0 1rem; font: 600 2.3rem/1.08 var(--f-tytul); letter-spacing: -.015em; text-wrap: balance; }
.sm-tekst h2 a { text-decoration: none; }
.sm-tekst h2 a:hover { text-decoration: underline; text-decoration-thickness: 2px; }
.sm-lead { margin: 0 0 1rem; font-size: 1.2rem; line-height: 1.45; text-wrap: pretty; }
@media (max-width: 60rem) {
  .sprawa-miesiaca { grid-template-columns: minmax(0, 1fr); margin-top: 3rem; }
  .sm-tekst h2 { font-size: 1.7rem; }
}

/* Karta sprawy: jeden stopień pisma w środkowej kolumnie (25.10 wieczorem, właściciel: "te fonty, raz większy, raz
   mniejszy, lepiej ujednolicić; mamy metryczkę, pod spodem dodatkowe info i na końcu treść oficjalną"). Duży jest tylko
   tytuł i cytat (wyróżnienie jak w gazecie, właściciel: "cytat jak jest"); streszczenie, akapity historii, liczby
   i wniosek mają jeden stopień (akapitu), liczby wyróżnia pogrubienie. Na końcu treść orzeczenia, jak była. */
/* Stopień akapitu historii (1,45 rem, telefon 1,22 rem), właściciel 25.10: "ten większy, w którym był akapit, lepiej się sprawdzi".
   Pełna szerokość środkowej kolumny, bez max-width. */
.sprawa .lead, .sprawa .zajawka, .sprawa .wniosek, .sprawa .streszczenie { font-size: 1.45rem; line-height: 1.48; max-width: none; }
/* Streszczenie (26.10): etykieta nad akapitem, mniejsza i spokojna, odstęp ok. 22 px między częściami, interlinia 1,55. */
.sprawa .streszczenie { line-height: 1.55; }
.sprawa .streszczenie p { margin: 0; }
.str-cz { margin: 0 0 1.4rem; }
.str-cz:last-child { margin-bottom: 0; }
.str-etykieta { margin: 0 0 .15rem !important; font: 600 .95rem/1.3 var(--f-dane); color: var(--szary); }
.str-rozstrzygniecie .str-etykieta { color: var(--akcent); }
.sprawa .lead, .sprawa .zajawka { margin: 0 0 1.2rem; }
.sprawa .liczby dd { font-size: 1.45rem; }
@media (max-width: 60rem) { .sprawa .lead, .sprawa .zajawka, .sprawa .wniosek, .sprawa .streszczenie, .sprawa .liczby dd { font-size: 1.22rem; } }

/* Manifest i dyskretny skrót do raportu miesięcznego. */
.wpis .prose .manifest-cytat { margin: 2.5rem 0; padding: 0; border: 0; color: var(--akcent); font: 500 1.6rem/1.3 var(--f-tekst); text-wrap: balance; }
.wpis .prose .manifest-cytat p { margin: 0; }
.nav { align-items: center; }
.nav .nav-miesiac { display: inline-flex; align-items: center; justify-content: center; min-width: 2rem; min-height: 2rem; }
.nav .nav-miesiac .ikona { width: 1.25rem; height: 1.25rem; }
.nav .nav-miesiac:focus-visible { outline: 2px solid var(--akcent); outline-offset: 3px; }

/* Dwie kartki w nagłówku: miesięcznik i przełącznik kroju. */
.glowka-narzedzia { display: flex; align-items: center; gap: .6rem; }
.glowka-narzedzia .przelacznik { width: 4.25rem; height: 2.85rem; }
.kalendarz-link { display: flex; align-items: center; justify-content: center; text-decoration: none; }
.kalendarz-papier { display: flex; flex-direction: column; align-items: center; width: 88%; height: 88%; background: #fffdf8; color: #1a1714; border: 1px solid #d3ccc2; font-family: var(--f-tytul); }
.kalendarz-grzbiet { width: 100%; height: .35rem; background: #c2331d; }
.kalendarz-papier b { font-size: 1.5rem; line-height: 1.1; font-weight: 600; }
.kalendarz-papier small { font-size: .55rem; line-height: 1; }
.przelacznik-miesiac .przelacznik-btn { border: 0; padding: 0; }
.przelacznik-miesiac.gotowy .kalendarz-papier { opacity: 0; }
.kalendarz-link:focus-visible { outline: 2px solid var(--akcent); outline-offset: 4px; }
@media (max-width: 60rem) { .glowka-narzedzia { grid-area: prz; justify-self: end; gap: .4rem; } .glowka-narzedzia .przelacznik { width: 3.5rem; height: 2.85rem; } }

@media (max-width: 77rem) {
 .glowka-in, [data-wyglad="toga"] .glowka-in { grid-template-columns: 1fr auto; grid-template-areas: "logo prz" "nav nav"; }
 .data-wyd { display: none; }
 .logo { grid-area: logo; justify-self: start; }
 .glowka-prawa { display: contents; }
 .glowka-narzedzia { grid-area: prz; justify-self: end; }
 .nav { grid-area: nav; }
}
@media (max-width: 24rem) { .glowka .logo { font-size: 1.65rem; } }

.kal-legenda { gap: .6rem 1.1rem; }
.kal-legenda-item { display: inline-flex; align-items: center; gap: .45rem; white-space: nowrap; }
.kal-legenda-item .kal-d { flex: none; margin: 0; }
.monitor-opcje { display: flex; flex-direction: column; align-items: flex-start; gap: 0; }
.monitor-opcje .wm-opcja { display: inline-flex; align-items: center; gap: .55rem; margin: 0; min-height: 2.75rem; font: 400 .9rem/1.4 var(--f-dane); cursor: pointer; }
.monitor-opcje .wm-suwak { appearance: none; position: relative; width: 1.875rem; height: 1.125rem; flex: none; margin: 0; border: 0; border-radius: 1rem; background: #807c78; cursor: pointer; }
.monitor-opcje .wm-suwak::before { content: ''; position: absolute; width: .875rem; height: .875rem; top: .125rem; left: .125rem; border-radius: 50%; background: #fff; box-shadow: 0 1px 2px #0002; transition: transform .18s ease; }
.monitor-opcje .wm-suwak:checked { background: var(--akcent); border-color: var(--akcent); }
.monitor-opcje .wm-suwak:checked::before { transform: translateX(.75rem); background: #fff; }
.monitor-opcje .wm-suwak:focus-visible { outline: 2px solid var(--akcent); outline-offset: 4px; }
@media (prefers-reduced-motion: reduce) { .monitor-opcje .wm-suwak::before { transition: none; } }

.monitor-glowa { flex-direction: row; flex-wrap: wrap; align-items: center; gap: 1rem 2rem; }

[data-wyglad="toga"] .monitor-opcje .wm-suwak:checked::before { background: var(--bg); }

/* Wspólne progi widoku: 3+ domyślnie, 2 po włączeniu; pojedyncze pozostają w danych. */
.w-mediach:not([data-dwie]) .wm-dwie, .w-mediach:not([data-dwie]) .wm-dzien--dwie { display:none; }
.raport-media .raport-zakres { margin:.65rem 0; }
@media (min-width: 70rem) {
 .monitor-opcje { flex-direction:row; flex-wrap:wrap; gap:.5rem 1.5rem; }
 .raport-liczby { margin:1rem 0 2rem; }
 .ri figcaption { display:flex; flex-wrap:wrap; align-items:baseline; gap:.3rem 1rem; }
 .ri figcaption h3, .ri figcaption .drobne { margin:0 0 .5rem; }
}

/* Monitoring i raport korzystają z szerokości ekranu, z zachowaniem bocznych odstępów. */
.media-strona > .wrap, .raport > .wrap { max-width:none; }

/* Kartka kalendarza przy dacie (30.10, właściciel): to odnośnik do zestawienia miesiąca, nie przełącznik, więc nie stoi
   obok przełącznika kroju "Aa". W Todze (bez daty) przed logo, na wąskim ekranie po lewej stronie logo. */
.glowka-data { display: flex; align-items: center; gap: .9rem; justify-self: start; }
.glowka-data .przelacznik-miesiac { width: 2.6rem; height: 2.85rem; flex: none; }

@media (max-width: 77rem) {
  .glowka-in, [data-wyglad="toga"] .glowka-in { grid-template-columns: auto 1fr auto; grid-template-areas: "kal logo prz" "nav nav nav"; }
  .glowka-data { grid-area: kal; }
}

/* Pasek "W mediach" w zestawieniu w jednym wierszu (30.10, właściciel): tytuł, działy i "Dane od" wybranego działu obok
   siebie zamiast daty pod paskiem. Bez skryptu (bez .z-js) data zostaje w każdym dziale. */
.raport-zakres-pasek { display: none; margin: 0; }
.raport-media.z-js .raport-dzial > .raport-zakres { display: none; }
.raport-media.z-js .raport-karty-pasek:has(#karta-sady[aria-selected="true"]) [data-zakres-dla="sady"],
.raport-media.z-js .raport-karty-pasek:has(#karta-tech[aria-selected="true"]) [data-zakres-dla="tech"],
.raport-media.z-js .raport-karty-pasek:has(#karta-med[aria-selected="true"]) [data-zakres-dla="med"] { display: block; }

/* Data wydania w trzech wierszach: dzień, data, numer (także na telefonie, makieta właściciela 1.11). */
.data-wyd span { display: block; }

/* Kartka w zestawieniu (1.11, właściciel: "musimy podkreślać kartkę"; ramka "nie trafia, lepiej delikatne, zblurowane
   podświetlenie"): miękka czerwona poświata wokół kartki, także wokół kartki 3D (drop-shadow idzie za jej kształtem). */
.kalendarz-link[aria-current="page"] .kalendarz-papier { box-shadow: 0 0 .7rem .1rem rgb(194 51 29 / .45); }
.przelacznik-miesiac.gotowy:has(.kalendarz-link[aria-current="page"]) { filter: drop-shadow(0 0 .45rem rgb(194 51 29 / .55)); }
[data-wyglad="toga"] .kalendarz-link[aria-current="page"] .kalendarz-papier { box-shadow: 0 0 .8rem .15rem rgb(190 160 255 / .4); }
[data-wyglad="toga"] .przelacznik-miesiac.gotowy:has(.kalendarz-link[aria-current="page"]) { filter: drop-shadow(0 0 .5rem rgb(190 160 255 / .5)); }

/* Telefon według makiety właściciela (1.11, druga wersja: "przycisk dark mode i raportu wyglądają tak samo, to mylące";
   "raport jednak po lewej", "muszą być po dwóch różnych stronach"): w górnym wierszu kartka zestawienia po lewej,
   logo na środku i suwak wyglądu (księżyc/słońce) po prawej; w dolnym data w trzech wierszach i menu pod logo;
   na dole gruba linia. "Musi być ułożone równo na każdej szerokości":
   logo i menu stoją w jednej środkowej kolumnie (wspólna oś), a pismo rośnie z szerokością ekranu (vw, z górnym
   limitem), więc od 320 do 768 px układ jest ten sam, bez łamania wierszy i bez przewijania w bok. */
@media (max-width: 48rem) {
  .glowka-in, [data-wyglad="toga"] .glowka-in { grid-template-columns: auto minmax(0, 1fr) auto; grid-template-areas: none; align-items: center; column-gap: min(.6rem, 2.3vw); row-gap: .75rem; padding: .9rem 0 .8rem; }
  .glowka-data { display: contents; }
  .glowka .logo { grid-column: 2; grid-row: 1; justify-self: center; font-size: min(2.15rem, 8.4vw); }
  .glowka-narzedzia { grid-column: 3; grid-row: 1; justify-self: end; }
  .data-wyd { grid-column: 1; grid-row: 2; display: block; font-size: min(.64rem, 2.45vw); line-height: 1.3; }
  .data-wyd span { white-space: nowrap; }
  .nav { grid-column: 2; grid-row: 2; justify-self: center; flex-wrap: nowrap; white-space: nowrap; gap: 1em; font-size: min(1.02rem, 3.75vw); }
  .glowka-data .przelacznik-miesiac { grid-column: 1; grid-row: 1; justify-self: start; width: 2.7rem; height: 2.95rem; }

}
/* Przełącznik wyglądu jako suwak na każdej szerokości (1.11, właściciel: na stagingu na komputerze dalej było "Aa",
   które wyglądało jak kartka zestawienia). Kartki 3D przełącznika już nie ładujemy (src/scene/przelacznik.js). */
/* Suwak: pigułka z gałką; Antykwa (jasny) gałka z księżycem po lewej, Toga (ciemny) ze słońcem po prawej. */
.glowka-narzedzia .przelacznik, .glowka-narzedzia .przelacznik.gotowy { width: 3.7rem; height: 2.1rem; }
.glowka-narzedzia .przelacznik canvas { display: none; }
.glowka-narzedzia .przelacznik .przelacznik-btn, .glowka-narzedzia .przelacznik.gotowy .przelacznik-btn { padding: 0; border: 1.5px solid #b4b2c0; border-radius: 999px; background: #f3f2f6; }
.glowka-narzedzia .przelacznik .przelacznik-opis { position: absolute; left: 0; top: 0; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.przelacznik-suwak { display: block; position: absolute; inset: 0; }
.suwak-galka { position: absolute; top: 50%; left: .22rem; width: 1.55rem; height: 1.55rem; margin-top: -.775rem; display: grid; place-items: center; border-radius: 50%; background: #8c90a6; transition: transform 1.5s ease, background-color 1.5s ease; }
/* Księżyc zmienia się w słońce: cień zsuwa się z tarczy, tarcza maleje, promienie wysuwają się z obrotem. */
.suwak-galka { color: #fff; }
.ik-niebo { width: 1.05rem; height: 1.05rem; overflow: visible; transition: transform 1.5s ease; }
.ik-tarcza { fill: currentColor; transform-box: fill-box; transform-origin: center; transition: transform 1.5s ease; }
.ik-cien { transition: transform 1.5s ease; }
.ik-promienie { fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; transform-origin: 12px 12px; transform: rotate(-90deg) scale(.4); opacity: 0; transition: transform 1.5s ease, opacity 1s ease; }
[data-wyglad="toga"] .glowka-narzedzia .przelacznik .przelacznik-btn { border-color: #5d5466; background: #2a2530; }
[data-wyglad="toga"] .suwak-galka { transform: translateX(1.6rem); background: var(--akcent-jasny); }
[data-wyglad="toga"] .suwak-galka { color: #1a171d; }
[data-wyglad="toga"] .ik-niebo { transform: rotate(180deg); }
[data-wyglad="toga"] .ik-tarcza { transform: scale(.62); }
[data-wyglad="toga"] .ik-cien { transform: translate(9px, -9px); }
[data-wyglad="toga"] .ik-promienie { transform: rotate(0deg) scale(1); opacity: 1; transition-delay: .3s; }
@media (prefers-reduced-motion: reduce) { .suwak-galka, .ik-niebo, .ik-tarcza, .ik-cien, .ik-promienie { transition: none; } }

/* Znicz (albo flaga) wydania specjalnego obok pieczątki pod mapą (1.11, właściciel: "znicz lepiej przy tej pieczęci").
   Czoło dostaje trzecią kolumnę: pieczątka, znicz, podpis mapy. Znicz zapala się, gdy pieczątka już spadnie. */
.czolo-mapa:has(.swieto) { grid-template-columns: auto auto 1fr; }
.czolo-mapa:has(.swieto) .pieczatka { grid-column: 1; grid-row: 2; }
.czolo-mapa:has(.swieto) .mapa-zrodlo { grid-column: 3; grid-row: 2; }
.swieto { position: relative; grid-column: 2; grid-row: 2; align-self: end; width: 3.4rem; height: 5.3rem; margin-left: -.6rem; pointer-events: none; }
/* Przezroczystość płótna prowadzi skrypt (znicz wyłania się po pieczątce). */
.swieto canvas { position: absolute; left: 0; bottom: 0; width: 100%; height: 100%; display: block; }
.swieto[hidden] { display: none; }
/* Flaga (11.11) jest szersza od zniczu: maszt przy pieczątce, tkanina w prawo. */
.swieto[data-swieto="flaga"] { width: 4.9rem; margin-left: -.3rem; }

/* Metryka sprawy dnia w jednej strefie pod leadem (1.11, właściciel: "dopisek kursywą cały czerwony"): sąd, data,
   na końcu sygnatura i rodzaj wydania; cała linijka w kolorze akcentu, numer sygnatury pogrubiony. */
.sad-metryka { color: var(--akcent); }
[data-wyglad="toga"] .sad-metryka { color: var(--akcent-jasny); }
.sad-sygn { font-weight: 600; }
.sad-nr { white-space: nowrap; }
[data-wyglad="toga"] .liczby .l-sygn { display: none; }

/* Dopisek na pieczątce w wydaniu specjalnym (1.11, właściciel: "wydanie specjalne możemy dodać do pieczątki"). */
.pieczatka-dopisek { margin-top: .2rem; padding-top: .2rem; border-top: 1px solid currentColor; font: 600 .62rem/1.2 var(--f-dane); letter-spacing: .14em; }
.pieczatka-dopisek[hidden] { display: none; }

/* Telefon (1.11, właściciel: "dopracuj mocno RWD"): data na pieczątce w jednym wierszu, podpis mapy pod mapą
   w osobnym wierszu, a nie ściśnięty obok pieczątki i zniczu. */
.pieczatka b { white-space: nowrap; }
@media (max-width: 48rem) {
  .czolo-mapa .mapa-zrodlo, .czolo-mapa:has(.swieto) .mapa-zrodlo { grid-column: 1 / -1; grid-row: 3; margin-top: .6rem; }
}

/* "W mediach" na telefonie (1.11, właściciel: "dopracuj mocno RWD"): pionowa zakładka przy prawej krawędzi
   zasłaniała tytuły i leady. Na wąskim ekranie to poziomy przycisk w prawym dolnym rogu, nad treścią. */
@media (max-width: 48rem) {
  .media-przycisk { top: auto; bottom: max(1rem, env(safe-area-inset-bottom)); right: 1rem; writing-mode: horizontal-tb; rotate: none; display: inline-flex; align-items: center; gap: .45rem; padding: .7rem 1.05rem; border-radius: 999px; font-size: .98rem; box-shadow: 0 4px 14px rgb(0 0 0 / .22); }
  .media-przycisk .ikona { rotate: none; width: 1.15rem; height: 1.15rem; margin: 0; }
  .media-przycisk.media-zaprasza { animation-name: media-zaproszenie-tel; }
  @keyframes media-zaproszenie-tel { 0%, 65%, 100% { translate: 0; } 76%, 89% { translate: 0 -4px; } 82%, 95% { translate: 0; } }
  .stopka { padding-bottom: 4.5rem; }
}
.akta-dzien .dk { white-space: pre-line; line-height: 1.25; }

/* Nagłówek Togi w tym samym układzie i rozmiarach co Antykwa (1.11, właściciel: "zachowaj indywidualny styl, tylko niech
   header będzie align, przełącznik w tym samym miejscu"): przy zmianie wyglądu nic w nim nie skacze. Toga zostawia
   sobie kolory i kroje: menu w groteskowym kroju danych, ciemniejsza linia pod nagłówkiem. */
[data-wyglad="toga"] .nav { font-family: var(--f-dane); font-weight: 500; }
[data-wyglad="toga"] .glowka-in { border-bottom-color: #3a3440; }

/* Toga, zestawienie dnia (1.11, właściciel: "zobacz na Todze jaki bug"): wiersze z datą wyroku (showDay) mają pięć
   widocznych komórek, a siatka miała cztery kolumny, więc tytuł wpadał w wąską kolumnę, a kwota do nowego wiersza. */
@media (min-width: 60.0625rem) {
  [data-wyglad="toga"] .wokanda tr:has(> td.data) { grid-template-columns: 6.5rem 8.5rem minmax(0, 1fr) 10rem 7rem; }
}

/* Przełącznik poza rozlewaniem wyglądu (1.11, właściciel: "animacja suwaka nie jest płynna, po kliknięciu powinna się
   zacząć ruszać"): ma własną warstwę przejścia, rysowaną na żywo nad stroną, więc gałka rusza od razu po kliknięciu,
   a nie dopiero, gdy dojdzie do niej koło. */
.glowka-narzedzia .przelacznik-btn { view-transition-name: przelacznik; }
::view-transition-old(przelacznik) { display: none; }
::view-transition-new(przelacznik) { animation: none; }
::view-transition-group(przelacznik) { animation: none; }

/* "Do góry" (1.11, właściciel: "pływak na mobile zmienił miejsce, ale jak zwinę przeglądarkę, to nie działa"):
   niewidoczny przycisk leżał na "W mediach" i łapał kliknięcia. Kliknąć da się go tylko, gdy jest widoczny,
   a na wąskim ekranie stoi w lewym dolnym rogu, bo prawy zajmuje "W mediach". */
.do-gory { pointer-events: none; }
.do-gory[hidden] { display: none; }
.do-gory.widoczny { pointer-events: auto; }
@media (max-width: 48rem) { .do-gory { right: auto; left: 1rem; bottom: max(1rem, env(safe-area-inset-bottom)); } }

/* Kartka zestawienia bez podmiany przy ładowaniu (1.11): przy działającym skrypcie płaska kartka czeka ukryta, kartka 3D
   wyłania się łagodnie (src/scene/kalendarz.js), a płaska pokazuje się tylko awaryjnie (klasa bez-3d). */
.js .przelacznik-miesiac:not(.gotowy):not(.bez-3d) .kalendarz-papier { opacity: 0; }
.js .przelacznik-miesiac .kalendarz-papier { transition: opacity .8s ease; }
.js .przelacznik-miesiac.bez-3d:not(.gotowy) .kalendarz-papier { opacity: 1; }