/* Vyrobil sprava/vzhled.mjs z web/src/styles (písma, tokeny, vybrané oddíly site.css) a sprava/zdroje/styly.css. Neupravovat ručně. */
/* Písma jsou uložená přímo v projektu (žádné volání na cizí servery).
   Big Shoulders, Literata, IBM Plex Mono — licence SIL OFL 1.1, viz src/assets/fonts/LICENCE.txt
   Rozšířená latinka Literaty a Big Shoulders je zúžená na Latin Extended-A, tedy češtinu a jazyky střední
   Evropy (autor 12. 10. 2026, úspora dat; vyrábí tools/zmensi-pisma.py). */
@font-face{font-family:'Big Shoulders';font-style:normal;font-weight:100 900;font-display:swap;src:url('pisma/big-shoulders-latin-ext-cz-opsz-normal.woff2') format('woff2-variations');unicode-range:U+0100-017F}
@font-face{font-family:'Big Shoulders';font-style:normal;font-weight:100 900;font-display:swap;src:url('pisma/big-shoulders-latin-opsz-normal.woff2') format('woff2-variations');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:'Literata';font-style:normal;font-weight:200 900;font-display:swap;src:url('pisma/literata-latin-ext-cz-opsz-normal.woff2') format('woff2-variations');unicode-range:U+0100-017F}
@font-face{font-family:'Literata';font-style:normal;font-weight:200 900;font-display:swap;src:url('pisma/literata-latin-opsz-normal.woff2') format('woff2-variations');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:'Literata';font-style:italic;font-weight:200 900;font-display:swap;src:url('pisma/literata-latin-ext-cz-opsz-italic.woff2') format('woff2-variations');unicode-range:U+0100-017F}
@font-face{font-family:'Literata';font-style:italic;font-weight:200 900;font-display:swap;src:url('pisma/literata-latin-opsz-italic.woff2') format('woff2-variations');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:'IBM Plex Mono';font-style:normal;font-weight:400;font-display:swap;src:url('pisma/ibm-plex-mono-latin-ext-400-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:'IBM Plex Mono';font-style:normal;font-weight:400;font-display:swap;src:url('pisma/ibm-plex-mono-latin-400-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:'IBM Plex Mono';font-style:normal;font-weight:500;font-display:swap;src:url('pisma/ibm-plex-mono-latin-ext-500-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:'IBM Plex Mono';font-style:normal;font-weight:500;font-display:swap;src:url('pisma/ibm-plex-mono-latin-500-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}

/* Rozvržení: každá stránka je list rozříznutý řekou. Text se drží vlevo ve sloupci do 66 znaků,
   Systém mluví strojovým písmem v záznamech a všechno ostatní je potichu.
   Světlý vzhled je Pallium (polymer, černé sklo, studené světlo, oblé hrany).
   Tmavý vzhled je Archa (rez, olej, sodíkové výbojky, ostré hrany, šum). */

:root {
  /* Pallium */
  --bg: #ecf0f1; /* mléčně bílý polymer */
  --surface: #f9fbfb;
  --ink: #0e141a; /* černé sklo */
  --ink-2: #47545d;
  --line: #c2ccd1;
  --accent: #0d5a85; /* studené světlo dat */
  --on-accent: #ffffff;
  --scar: #c11f2a; /* jizva (červená smí být i jinde, autor 12. 10. 2026) */
  --pallium: #0d5a85;
  --archa: #9c4a14; /* rez */
  --zlato: #7d5f0f; /* vavříny vítězné povídky (na světlém pozadí tmavší, kontrast aspoň 4,5 : 1) */
  --river: #9aa9b1;
  --river-line: #7d8e97;
  --on-river: #0e141a;
  --cut-top: var(--ink);
  --cut-bottom: var(--archa);
  --ice-bg: #0c1a27; /* pruh druhého světa, v obou vzhledech stejný */
  --ice-ink: #dcecf5;
  --ice-line: #7fb2cf;

  /* Nápis na úvodu (CutTitle s obrazem města): v obou březích stejné kouřové sklo (autor 10. 10. 2026:
     noc „kouřové“, den „se stejnými efekty jako noční verze“). Barva písma průhledná = je vidět
     výplň (průsvitný tón a odlesk), skrz spodní půlku prosvítá řeka. */
  --napis-a: transparent;
  --napis-b: transparent;
  --napis-aura: none;
  --napis-odlesk: linear-gradient(112deg, transparent 30%, rgb(225 240 255 / 0.2) 37%, rgb(225 240 255 / 0.05) 41%, transparent 46%);
  --napis-ton-a: linear-gradient(172deg, rgb(44 62 86 / 0.58), rgb(14 21 32 / 0.68) 40%, rgb(34 50 72 / 0.55) 55%, rgb(9 13 21 / 0.72) 75%);
  --napis-ton-b: linear-gradient(180deg, rgb(62 36 20 / 0.62) 45%, rgb(26 13 7 / 0.78) 90%);
  /* obrys zesílený kvůli čitelnosti na slunci a pro horší zrak (autor 11. 10. 2026: síla 2,
     v obou březích ve stejných barvách jako dřív) */
  --napis-hrana-a: 0.011em rgb(240 248 255 / 1); /* světlá hrana skla */
  --napis-hrana-b: 0.009em rgb(255 220 170 / 0.8);
  --napis-zare-a: drop-shadow(0 0 0.03em rgb(170 215 255 / 0.85)) drop-shadow(0 0 0.18em rgb(90 150 255 / 0.5)); /* záře kolem horní půlky */
  --napis-zare-b: rgb(255 165 75 / 0.95); /* barva záře kolem spodní půlky */
  --napis-stin: block;
  /* Závoj za textem pod nápisem: ve dne jen měkký podklad pod každým odstavcem (drží se textu,
     bazar kolem zůstane vidět; autor 10. 10. 2026), v noci velký tmavý závoj (autor 9. 10. 2026) */
  --zavoj: none;
  --zavoj-odstavec: color-mix(in srgb, var(--bg) 88%, transparent);
  --zavoj-odstavec-rozmazani: 0.5em;
  --zavoj-halo: 0 0 0.1em var(--bg), 0 0 0.3em var(--bg);
  /* Displej u červeného světla: průsvitné sklo, za kterým se pozadí rozmaže */
  --displej-bg: rgb(250 248 247 / 0.78);
  --displej-text: var(--ink);
  --displej-zare: transparent;
  --jizva-jadro: #ffd9d4; /* bílý střed červeného světla */
  /* Stránky ve městě (Stranka.astro): záznam pod městem, dveře, hlášení jako terminál */
  --sys: var(--accent); /* hlas Systému: kódy, štítky, okraj záznamu */
  --sloupec: 38rem; /* sloupec čteného textu */
  --okraj: 13.5rem; /* okraj se záznamem vedle textu */
  --dvere-panorama: 3 / 1; /* panorama u dveří (povídka v seznamu povídek), všude stejný poměr stran */
  --sys-okno-sirka: 34rem; /* systémové okno (SystemoveOkno.astro) */
  --sys-okno-scena: clamp(6.5rem, 20vh, 9.5rem); /* výška živé scény nahoře v systémovém okně */
  --odsazeni-cteni: 16%; /* povídka s čítárnou: sloupec textu od levého kraje, okraje kolem patří atmosféře */
  --dvere-titul: clamp(2.3rem, 5.2vw, 4.4rem);
  --dvere-titul-sloupec: clamp(1.9rem, 2.8vw, 2.8rem); /* název dveří ve dvou sloupcích (seznam povídek) */
  --dvere-mezera-sloupcu: clamp(1.5rem, 3vw, 2.5rem);
  --terminal-bg: #e3e9ec;
  --terminal-ink: #0b4a70;
  --terminal-linka: #c3cfd5;

  --radius: 16px;
  --radius-s: 9px;
  --grain: 0;
  color-scheme: light;

  --display: 'Big Shoulders', 'Arial Narrow', 'Roboto Condensed', Impact, sans-serif;
  --text: 'Literata', Georgia, 'Times New Roman', serif;
  --mono: 'IBM Plex Mono', ui-monospace, 'SF Mono', Menlo, Consolas, monospace;

  --s--1: 0.875rem;
  --s-0: 1.0625rem;
  --s-1: 1.25rem;
  --s-2: 1.625rem;
  --s-3: clamp(1.9rem, 3.4vw, 2.5rem);
  --s-4: clamp(2.5rem, 5.6vw, 4.25rem);
  --s-5: clamp(3.4rem, 9.5vw, 7rem);
  /* --mesto: velikost, od které se odvozuje obraz města (na úvodu i na ostatních stránkách);
     --mega: velikost nápisu ve městě. Na úvodu jsou stejné, ostatní stránky mají nadpis menší
     (nastavuje Mesto.astro podle délky nadpisu) a město stejně velké. */
  --mesto: clamp(5.5rem, 31.5vw, 23rem);
  --mega: var(--mesto);

  --gutter: clamp(1rem, 4vw, 2.75rem);
  --gap-section: clamp(3.25rem, 7vw, 6rem);
  --measure: 66ch;
  /* úvod pod městem: odsazení cesty dál a odstup ke dveřím (podle nich sedí i přepínače pohybu
     a zvuku těsně nad první linkou) */
  --uvod-pod-mestem: clamp(0.5rem, 2vw, 1.5rem);
  --uvod-k-dverim: clamp(1.5rem, 4vw, 3rem);
  /* ostatní stránky pod městem: odsazení záznamu od města */
  --zaznam-odsazeni: clamp(1.5rem, 3.5vw, 2.75rem);
}

/* Telefon: nápis JERICHO o kus menší, ať má po stranách vzduch; zůstává zarovnaný vlevo
   (autor 8. 10. 2026, varianta B). Obraz města se zmenšuje s ním, takže je vidět zhruba 70 % jeho šířky. */
@media (max-width: 47.99rem) {
  :root {
    --mesto: clamp(4.75rem, 27vw, 23rem);
  }
}

/* Archa */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme='light']) {
    --bg: #1a1513;
    --surface: #251e1a;
    --ink: #efe8db;
    --ink-2: #b9ae9e;
    --line: #43382f;
    --accent: #e5a23c; /* sodíková výbojka */
    --on-accent: #1a1513;
    --scar: #ff5749;
    --pallium: #b7d3e2;
    --archa: #e5a23c;
    --zlato: #e8c25e;
    --river: #0a0908;
    --river-line: #3a4a52;
    --on-river: #8fa5b0;
    --cut-top: var(--pallium);
    --cut-bottom: var(--ink);
    --zavoj: radial-gradient(closest-side, color-mix(in srgb, var(--bg) 92%, transparent), color-mix(in srgb, var(--bg) 84%, transparent) 60%, transparent);
    --zavoj-odstavec: transparent;
    --zavoj-odstavec-rozmazani: 0;
    --zavoj-halo: 0 0 transparent;
    --displej-bg: rgb(14 9 12 / 0.62);
    --displej-text: #ffe4df;
    --displej-zare: rgb(255 87 73 / 0.55);
    --jizva-jadro: #fff1ee;
    --terminal-bg: #120d0b;
    --terminal-ink: #f0b562;
    --terminal-linka: #3a2e26;
    --radius: 2px;
    --radius-s: 1px;
    --grain: 0.13;
    color-scheme: dark;
  }
}
:root[data-theme='dark'] {
  --bg: #1a1513;
  --surface: #251e1a;
  --ink: #efe8db;
  --ink-2: #b9ae9e;
  --line: #43382f;
  --accent: #e5a23c;
  --on-accent: #1a1513;
  --scar: #ff5749;
  --pallium: #b7d3e2;
  --archa: #e5a23c;
  --zlato: #e8c25e;
  --river: #0a0908;
  --river-line: #3a4a52;
  --on-river: #8fa5b0;
  --cut-top: var(--pallium);
  --cut-bottom: var(--ink);
  --zavoj: radial-gradient(closest-side, color-mix(in srgb, var(--bg) 92%, transparent), color-mix(in srgb, var(--bg) 84%, transparent) 60%, transparent);
  --zavoj-odstavec: transparent;
  --zavoj-odstavec-rozmazani: 0;
  --zavoj-halo: 0 0 transparent;
  --displej-bg: rgb(14 9 12 / 0.62);
  --displej-text: #ffe4df;
  --displej-zare: rgb(255 87 73 / 0.55);
  --jizva-jadro: #fff1ee;
  --terminal-bg: #120d0b;
  --terminal-ink: #f0b562;
  --terminal-linka: #3a2e26;
  --radius: 2px;
  --radius-s: 1px;
  --grain: 0.13;
  color-scheme: dark;
}

/* ————— Čítárna (stránka povídky, zadani/04) —————
   Režim (den = světlý vzhled, noc = tmavý; volí čtenář přepínačem Pallium / Archa) určuje jas celé
   povídky. Místo děje (břeh úseku) mění jen charakter: barvy, hrany, šum. Čtyři vzory:
     den + Pallium  = světlé Pallium výše (bílý polymer)    noc + Archa   = tmavá Archa výše (rez, sodík)
     den + Archa    = denní Archa níže (světlý beton, rez)  noc + Pallium = noční Pallium níže (modročerné sklo)
   Značku data-rezim na <html> nastavuje čítárna (Citarna.astro, citarna.js). Autor 10. 10. 2026: vzory
   teď, s doladěním úvodu se případně sladí. */
:root[data-citarna='zap'][data-rezim='den'] [data-breh-useku='archa'] {
  --bg: #ece5da; /* světlý beton, nádech rzi */
  --surface: #f6f1ea;
  --ink: #1b1511;
  --ink-2: #5a4b3e;
  --line: #cdbfae;
  --accent: #9c4a14; /* rez */
  --on-accent: #ffffff;
  --scar: #c11f2a;
  --radius: 2px;
  --radius-s: 1px;
  --grain: 0.06;
  color-scheme: light;
}
:root[data-citarna='zap'][data-rezim='noc'] [data-breh-useku='pallium'] {
  --bg: #0f151c; /* modročerné sklo */
  --surface: #16202a;
  --ink: #e4edf3;
  --ink-2: #9fb2c0;
  --line: #2b3a47;
  --accent: #8cc4e3; /* studené světlo dat */
  --on-accent: #0f151c;
  --scar: #ff5749;
  --radius: 16px;
  --radius-s: 9px;
  --grain: 0;
  color-scheme: dark;
}

/* Barvy, které plátno kreslí kolem textu. Trojice R G B (rgb(var(--c-sodik) / 0.5)), plátno si je čte
   odsud. Varianta -den platí ve světlém režimu (na světlém pozadí jinak barva zmizí). Červená tu není:
   jizva používá --scar. */
:root {
  --c-sodik: 229 162 60; /* sodíkové výbojky Archy */
  --c-sodik-den: 190 112 34;
  --c-neon-modra: 70 175 225;
  --c-neon-zelena: 120 205 95; /* jedovatě zelená tržiště */
  --c-neon-fialova: 150 85 205;
  --c-pallium-svetlo: 183 211 226; /* uklidňující modrá Pallia */
  --c-pallium-svetlo-den: 104 142 172;
  --c-pallium-chlad: 225 238 246;
  --c-pallium-chlad-den: 132 162 188;
  --c-soumrak: 52 76 104; /* noc v Palliu: věčný den ztlumený do modravého soumraku */
  --c-hala: 10 16 24; /* tma datové haly */
  --c-monitor: 150 200 245; /* záře terminálu */
  --c-monitor-den: 62 112 172;
  --c-data: 95 215 160; /* zelená obrana Systému */
  --c-data-den: 34 138 96;
  --c-kod: 110 235 150; /* zelené znaky na monitoru */
  --c-kod-den: 18 112 66;
  --c-teplo: 255 196 140; /* vzpomínka */
  --c-teplo-den: 200 132 72;
  --c-mlha-archa: 128 120 115; /* teplá šedá mlha jako na úvodu */
  --c-mlha-pallium: 205 218 228;
  --c-mlha-den: 150 140 132;
  --c-mlha-pallium-den: 128 146 162;
  --c-dest-archa: 232 196 150; /* déšť nasvícený sodíkem */
  --c-dest-pallium: 196 210 224;
  --c-dest-den: 88 98 110; /* déšť na světlém pozadí */
  --c-para: 222 216 206;
  --c-para-den: 150 142 134;
  --c-stin-archa: 8 6 5;
  --c-stin-pallium: 34 52 70;
  --c-stin-den: 96 84 72;
  --c-sum: 255 255 255;
  --c-reka: 10 9 8; /* voda Delkaru */
  --c-reka-den: 70 86 96;
  --c-reka-odlesk: 183 211 226;
  --c-sklo: 210 225 238; /* kapky na skle */
  --c-sklo-den: 120 140 160;
  --c-jed: 168 146 48; /* žlutá pára chemikálií při bouři (Kodex) */
  /* třetí kolo (autor 10. 10. 2026): hologram, záblesky, jiskry, noční vidění, poplach, vzpomínka */
  --c-holo: 92 168 255; /* modrá 3D mřížka hologramu (Řez: „modrobílá síť“) */
  --c-holo-den: 28 92 178;
  --c-vyboj: 150 205 255; /* záblesk pulzní zbraně a výboje */
  --c-vyboj-den: 46 110 190;
  --c-ohen: 255 168 92; /* výbuch, oheň */
  --c-ohen-den: 196 96 28;
  --c-zablesk: 255 248 236; /* jádro velkého záblesku (granát); nikdy přes text */
  --c-jiskra: 255 214 150;
  --c-jiskra-den: 176 100 20;
  --c-nocni: 96 255 140; /* noční vidění */
  --c-nocni-den: 34 120 60;
  /* výstražná červená: jen v čítárně a jen tam, kde ji má text (poplach, paprsek dronu, strážní robot);
     jiný odstín než jizva (--scar). Autor 11. 10. 2026: „to pravidlo klidně přepiš“. */
  --c-poplach: 236 44 58;
  --c-poplach-den: 176 22 36;
  --c-krev: 176 20 32; /* krev, která cákne vedle textu (jen kde je krev v textu) */
  --c-krev-den: 122 10 18;
  --c-opar: 255 238 220; /* zamlžená vzpomínka */
  --c-opar-den: 214 192 168;
  --c-zhar: 104 52 22; /* okraj ohnivé koule, chladnoucí úlomky */
  --c-dym: 74 68 64; /* kouř po výbuchu */
  --c-dym-den: 118 110 102;
  --c-vicka: 24 19 17; /* probuzení: zavřené oči = barva pozadí stránky (tmavý režim) */
  --c-vicka-den: 234 230 222; /* ve světlém režimu oslnivá světlost pozadí */
  /* tunel a baterky (autor 11. 10. 2026: „rozmazaný tunel a svit baterek, když se jde“) */
  --c-svitilna: 255 236 204; /* kužel baterky, teplá bílá */
  --c-svitilna-den: 150 112 56; /* na světlé stránce baterka barví do jantarova */
  --c-tunel: 120 138 118; /* mokré stěny tunelu, nazelenalá šedá */
  --c-tunel-den: 92 98 88;

  --pismo-povidky: clamp(1.125rem, 1.06rem + 0.32vw, 1.25rem); /* = písmo povídky v site.css */
  --pismo-systemu: 0.86; /* hlášení Systému: podíl písma povídky */
  --citarna-predel: max(8vh, 5rem); /* průhled mezi scénami na stejném břehu (autor 10. 10.: poloviční) */
  --citarna-predel-reka: max(32vh, 14rem); /* průhled s řekou, když příběh přejde na druhý břeh */
  --citarna-predel-kraj: 1.5rem; /* vstup do povídky a konec povídky */
  --citarna-nabeh: 9rem; /* jak pozvolna atmosféra nad textem nabíhá a pod ním doznívá */
  --citarna-list: 9rem; /* jak daleko od textu efekty slábnou do ztracena */
  --citarna-obraz: 20rem; /* obraz města slábne do ztracena na delší vzdálenost (širší rámeček) */
  --citarna-presah: 1.25rem; /* jak daleko smějí měkké efekty místy zasáhnout okraj textu */
  --citarna-svetlo: 3rem; /* jak daleko smějí světla plynule do textu (na okraji čtvrtina síly; autor 10. 10.) */
  --citarna-svisle: 6rem; /* přechod mezi textem a průhledem nad ním a pod ním */
  --citarna-cteni: 0.38; /* čtecí linka: výška v okně, kde čtenář právě čte (podíl výšky) */
  --citarna-okno: 0.33; /* okno se scénou na telefonu na výšku: podíl výšky obrazovky (autor 11. 10. 2026) */
  --citarna-pasmo-od: 0.12; /* čtecí pásmo: horní střed okna (rešerše 10. 10. 2026, zadani/04) */
  --citarna-pasmo-do: 0.6;
  --citarna-cteni-slov: 3.5; /* odhad rychlosti čtení (slov za vteřinu), než se ozve ruch pod čtecí linkou */
  --citarna-prechod: 4s; /* jak dlouho se mění atmosféra uvnitř scény */
  --citarna-lista: 3.25rem; /* výška lišty s ovládáním */
  /* vyskakovací okna: rámeček a záře v barvě zvýraznění vzhledu --accent, v Palliu modrá, v Arše sodík (autor
     12. 10. 2026; dřív napevno Archa). Autor 11. 10. 2026: „všechny výrazněji orámovat,
     takto hodně splývají“; jako hláška se zvukem). */
  --citarna-okno-ramecek: 2px;
  --citarna-okno-zare: 4px;
  --citarna-znacka: -2.1rem; /* záložka: vlevo od textu */
  --citarna-kolej: -0.95rem; /* ukazatel čtení: tečky a značka vlevo od textu */
  --citarna-jizva-x: -1.4rem; /* jizva: vpravo od textu */
  --citarna-jizva-paprsek: 72px; /* světelný paprsek jizvy jako na úvodu */
  --citarna-jizva-jadro: #ffd9d4; /* bílé jádro jizvy jako na úvodu (main má --jizva-jadro; po sloučení platí to) */
}
/* pozadí břehů v daném režimu (průhledy mezi břehy, vstup a konec povídky) */
:root[data-rezim='den'] {
  --citarna-bg-archa: #ece5da;
  --citarna-bg-pallium: #ecf0f1;
}
:root[data-rezim='noc'] {
  --citarna-bg-archa: #1a1513;
  --citarna-bg-pallium: #0f151c;
  --citarna-jizva-jadro: #fff1ee;
}
@media (max-width: 47.99rem) {
  :root {
    --citarna-predel: max(11vh, 5.5rem);
    --citarna-predel-reka: max(38vh, 15rem);
    --citarna-list: 1rem;
    --citarna-obraz: 2rem;
    --citarna-presah: 0.75rem;
    --citarna-svetlo: 1.5rem;
    --citarna-nabeh: 6rem;
    --citarna-svisle: 2rem;
    --citarna-znacka: -0.9rem;
    --citarna-kolej: -0.45rem;
    --citarna-jizva-x: -0.55rem;
    --citarna-jizva-paprsek: 24px;
  }
}
@media (min-width: 48rem) and (max-width: 63.99rem) {
  :root {
    --citarna-list: 4rem;
    --citarna-obraz: 9rem;
  }
}

/* ————— základ ————— */
*,
*::before,
*::after {
  box-sizing: border-box;
}
html {
  -webkit-text-size-adjust: 100%;
}
body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font: 400 var(--s-0) / 1.65 var(--text);
  font-optical-sizing: auto;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
/* šum: v Palliu žádný, v Arše všude */
body::after {
  content: '';
  position: fixed;
  inset: 0;
  z-index: 40;
  pointer-events: none;
  opacity: var(--grain);
  mix-blend-mode: soft-light;
  background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='200' height='200'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 1  0 0 0 0 1  0 0 0 0 1  0 0 0 .6 0'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
}
img,
svg,
canvas {
  max-width: 100%;
}
p,
dl,
dd,
figure {
  margin: 0;
}
h1,
h2,
h3 {
  margin: 0;
  font-family: var(--display);
  font-weight: 800;
  line-height: 1;
  letter-spacing: -0.005em;
  text-wrap: balance;
}
h2 {
  font-size: var(--s-4);
}
h3 {
  font-size: var(--s-2);
  font-weight: 700;
  line-height: 1.08;
}
a {
  color: var(--accent);
  text-decoration-thickness: 0.07em;
  text-underline-offset: 0.2em;
}
a:hover {
  text-decoration-thickness: 0.14em;
}
:focus-visible {
  outline: 3px solid var(--accent);
  outline-offset: 3px;
}
::selection {
  background: var(--ink);
  color: var(--bg);
}
[hidden] {
  display: none !important;
}

.sr {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}
.skip {
  position: absolute;
  left: var(--gutter);
  top: -4rem;
  z-index: 70;
  padding: 0.6rem 1rem;
  background: var(--ink);
  color: var(--bg);
  font: 700 1.0625rem/1 var(--display);
}
.skip:focus {
  top: 0.5rem;
}
main {
  overflow-x: hidden;
  overflow-x: clip;
}
.wrap {
  width: 100%;
  max-width: 80rem;
  margin-inline: auto;
  padding-inline: var(--gutter);
}
.quiet {
  color: var(--ink-2);
}
.lede {
  font-size: var(--s-1);
  line-height: 1.5;
  max-width: 54ch;
}

/* text stránek: sloupec odsazený od levého okraje, nadpis zůstává na kraji */
.col {
  max-width: var(--measure);
}
@media (min-width: 64rem) {
  .col {
    margin-left: 16%;
  }
}
.prose > * + * {
  margin-top: 1.05em;
}
.prose h2 {
  font-size: var(--s-3);
  margin-top: 1.9em;
}
.prose h3 {
  margin-top: 1.6em;
}
.prose ul {
  padding-left: 1.2em;
  margin-block: 1em;
}
.prose li + li {
  margin-top: 0.35em;
}


/* ————— tlačítka ————— */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 3rem;
  padding: 0.55rem 1.3rem;
  border: 1.5px solid var(--ink);
  border-radius: var(--radius-s);
  background: var(--ink);
  color: var(--bg);
  font: 700 1.1875rem/1 var(--display);
  letter-spacing: 0.01em;
  text-decoration: none;
  cursor: pointer;
}
.btn:hover {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--on-accent);
}
.btn--ghost {
  background: transparent;
  color: var(--ink);
}
.btn--ghost:hover {
  background: var(--ink);
  border-color: var(--ink);
  color: var(--bg);
}
.more {
  font: 700 1.125rem/1.2 var(--display);
}


/* ————— hlavička ————— */
/* Jméno autora vede na stránku o něm. Vedle je svět (tučně) a za ním jeho oddíly. */
.top {
  position: relative;
  z-index: 3;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.6rem 1.75rem;
  padding-block: 1rem;
}
.brand {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  margin-right: auto;
  padding-block: 0.25rem;
  border-bottom: 2px solid transparent;
  color: var(--ink);
  text-decoration: none;
  font: 700 1.3125rem/1 var(--display);
}
.brand:hover {
  border-color: var(--line);
}
.brand[aria-current='page'] {
  border-color: var(--ink);
}
.brand svg {
  flex: none;
  width: 1.35rem;
  height: 1.35rem;
}
.nav {
  order: 3;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.1rem 1.1rem;
  width: 100%;
}
.nav a {
  padding-block: 0.4rem 0.25rem;
  border-bottom: 2px solid transparent;
  color: var(--ink);
  text-decoration: none;
  font: 600 1.125rem/1.2 var(--display);
}
.nav a:hover {
  border-color: var(--line);
}
.nav a[aria-current='page'] {
  border-color: var(--ink);
}
/* svět: tučně a oddělený čárkou od svých oddílů */
.nav .nav__svet {
  position: relative;
  margin-right: 1.1rem;
  font-weight: 800;
}
.nav .nav__svet::after {
  content: '';
  position: absolute;
  right: -1.1rem;
  top: 0.5rem;
  bottom: 0.35rem;
  width: 1.5px;
  background: var(--line);
}
.nav .nav__akce {
  margin-left: auto;
}
/* na telefonu je Propustka v patičce a ve formulářích; v hlavičce by se nevešla na jeden řádek */
@media (max-width: 23.99rem) {
  .nav {
    gap: 0.1rem 0.8rem;
  }
  .nav .nav__svet {
    margin-right: 0.8rem;
  }
  .nav .nav__svet::after {
    right: -0.8rem;
  }
}
@media (min-width: 62rem) {
  .nav {
    order: 0;
    width: auto;
    gap: 0.1rem 1.35rem;
  }
  .nav .nav__svet {
    margin-right: 1.35rem;
  }
  .nav .nav__svet::after {
    right: -1.35rem;
  }
  .nav .nav__akce {
    margin-left: 1.1rem;
  }
}
.bank {
  display: inline-flex;
  gap: 2px;
  padding: 2px;
  border: 1.5px solid var(--ink);
  border-radius: calc(var(--radius) * 2);
}
.bank button {
  appearance: none;
  border: 0;
  border-radius: calc(var(--radius) * 2 - 3px);
  padding: 0.42rem 0.75rem;
  background: transparent;
  color: var(--ink);
  font: 600 1rem/1 var(--display);
  cursor: pointer;
}
.bank button[aria-pressed='true'] {
  background: var(--ink);
  color: var(--bg);
}


/* ————— nadpis rozříznutý řekou ————— */
.cut {
  --cfb: 0.36em; /* výška řezu ode dna řádku */
  --gap: 0.028em; /* šířka řeky */
  position: relative;
  width: fit-content;
  margin: 0;
  padding-top: 0.06em;
  font: 900 var(--s-5) / 0.8 var(--display);
  letter-spacing: -0.015em;
  white-space: nowrap;
  text-wrap: nowrap;
}
.cut--mega {
  font-size: var(--mega);
}
/* obě půlky se kreslí z atributu, v textu stránky je nadpis jen jednou */
.cut__a::before,
.cut__b::before {
  content: attr(data-text);
}
.cut__a {
  display: block;
  color: var(--cut-top);
  clip-path: inset(-0.3em -0.6em var(--cfb) -0.6em);
}
.cut__b {
  position: absolute;
  left: 0;
  top: 0;
  padding-top: inherit;
  color: var(--cut-bottom);
  clip-path: inset(calc(100% - var(--cfb) + var(--gap)) -0.6em -0.3em -0.6em);
  transform: translate(0.03em, 0.012em);
  filter: url(#koroze);
}
.cut__river {
  position: absolute;
  left: -100vw;
  right: -100vw;
  bottom: calc(var(--cfb) - var(--gap));
  height: var(--gap);
  min-height: 2px;
  background-color: var(--river);
  background-image: repeating-linear-gradient(90deg, transparent 0 46px, var(--river-line) 46px 47px);
  background-size: 94px 100%;
  animation: proud 16s linear infinite;
}
@keyframes proud {
  to {
    background-position: 94px 0;
  }
}
/* řez na titulu knihy: tenký, čistý, červený */
.cut--rez .cut__b {
  color: var(--cut-top);
  filter: none;
  transform: translateX(0.1em);
}
.cut--rez .cut__river {
  background: var(--scar);
  animation: none;
  min-height: 2px;
}
.cut--rez {
  --gap: 0.016em;
  --cfb: 0.33em;
}
/* Spodní půlka ve vodě (úvod s obrazem města): dvanáct vodorovných pruhů textu, každý se pomalu
   posouvá do stran s jiným zpožděním, níž o něco víc. Jiný rytmus než voda v obraze (ta má
   zhruba 9 a 14 s, pruhy 6,5 s). Zastaví se s pohybem stránky, když úvod není vidět, i při omezení
   pohybu v systému. Písmena se nekrátí, pruhy se o půl bodu překrývají, aby nebyla vidět spára. */
.cut--vlna .cut__b {
  inset: 0;
  clip-path: none;
  filter: none;
}
.cut__pruh {
  --pruh: calc((var(--cfb) + 0.12em) / 12);
  --a: calc(0.002em + var(--i) * 0.0007em);
  position: absolute;
  inset: 0;
  padding-top: inherit;
  color: var(--cut-bottom);
  clip-path: inset(calc(100% - var(--cfb) + var(--i) * var(--pruh) - 0.5px) -0.6em calc(var(--cfb) - (var(--i) + 1) * var(--pruh)) -0.6em);
  filter: url(#koroze);
  will-change: translate;
  animation: vlna 6.5s ease-in-out infinite;
  animation-delay: calc(var(--i) * -0.42s);
}
.cut__pruh::before {
  content: attr(data-text);
}
@keyframes vlna {
  0%,
  100% {
    translate: 0 0;
  }
  25% {
    translate: var(--a) 0;
  }
  75% {
    translate: calc(var(--a) * -1) 0;
  }
}
.uvod-mimo .cut__pruh {
  animation-play-state: paused;
}
@media (max-width: 40rem) {
  .cut__b,
  .cut__pruh {
    filter: url(#koroze-s);
  }
  .cut--rez .cut__b,
  .cut--vlna .cut__b {
    filter: none;
  }
}


/* ————— hlas Systému ————— */
.sys {
  display: grid;
  gap: 0.15rem;
  max-width: var(--measure);
  padding: 1rem 1.15rem;
  border: 1px solid var(--line);
  border-radius: var(--radius-s);
  background: var(--surface);
  font: 500 0.8125rem/1.6 var(--mono);
  letter-spacing: 0.02em;
  overflow-wrap: anywhere;
}
.sys__row {
  display: block;
}
.sys--big {
  max-width: 46rem;
  padding: clamp(1.25rem, 3.2vw, 2.25rem);
  font-size: clamp(0.95rem, 1.9vw, 1.3125rem);
  line-height: 1.5;
}
.notice {
  display: grid;
  gap: 1.25rem 3rem;
}
@media (min-width: 58rem) {
  .notice {
    grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
    align-items: end;
  }
}
.notice__cap {
  max-width: 46ch;
  font-size: var(--s-1);
  line-height: 1.45;
}
.record {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 0.25rem 1.5rem;
  max-width: 36rem;
  font: 400 0.8125rem/1.55 var(--mono);
  letter-spacing: 0.02em;
  text-transform: uppercase;
}
.record__par {
  display: contents;
}
.record dt {
  color: var(--ink-2);
}
.record dd {
  overflow-wrap: anywhere;
}


/* ————— propustka ————— */
.pass {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.5rem 3rem;
  padding: clamp(1.5rem, 4.5vw, 3.25rem);
  border: 1.5px solid var(--ink);
  border-radius: var(--radius);
  background: var(--surface);
}
@media (min-width: 58rem) {
  .pass {
    grid-template-columns: minmax(0, 1fr) minmax(0, 25rem);
    align-items: end;
  }
}
.pass__lead {
  display: grid;
  gap: 0.9rem;
  max-width: 46ch;
}
.pass__form {
  display: grid;
  gap: 0.75rem;
}
.field {
  display: grid;
  gap: 0.4rem;
}
.field label {
  font: 600 1.0625rem/1.2 var(--display);
}
.field input {
  width: 100%;
  min-width: 0;
  padding: 0.75rem 0.9rem;
  border: 1.5px solid var(--ink);
  border-radius: var(--radius-s);
  background: var(--bg);
  color: var(--ink);
  font: 400 1.0625rem/1.25 var(--text);
}
.pass__note {
  color: var(--ink-2);
  font-size: var(--s--1);
  line-height: 1.5;
}
.pass__msg {
  padding: 0.7rem 0.85rem;
  border: 1px solid var(--line);
  border-radius: var(--radius-s);
  background: var(--bg);
  font: 500 0.8125rem/1.5 var(--mono);
  letter-spacing: 0.02em;
  text-transform: uppercase;
}


/* ————— hlavička: kronikář, cesta ve městě, propustka a břeh (autor 11. 10. 2026) ————— */
.brand {
  gap: 0.65rem;
}
.brand__znak {
  flex: none;
  width: 1.55rem;
  height: 1.55rem;
}
.brand__text {
  display: grid;
  gap: 0.2rem;
}
.brand__jmeno {
  font: 700 1.3125rem/1 var(--display);
}
.brand__podpis {
  color: var(--sys);
  font: 500 0.66rem/1 var(--mono);
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
/* menu jako cesta: svět výrazně, lomítko, jeho oddíly menším písmem */
.nav {
  gap: 0.1rem 1.05rem;
}
.nav .nav__svet {
  margin-right: 0;
  font: 900 1.4rem/1 var(--display);
  letter-spacing: 0.02em;
  text-transform: uppercase;
}
.nav .nav__svet::after {
  content: none;
}
/* lomítko mezi světem a jeho oddíly: musí být vidět (autor 11. 10. 2026) */
.nav__lomitko {
  margin-inline: -0.15rem 0.1rem;
  color: var(--ink-2);
  font: 500 1.6rem/1 var(--display);
}
.panel {
  display: flex;
  align-items: center;
  gap: 1.1rem;
}
.panel .nav__akce {
  margin: 0;
  padding-block: 0.4rem 0.25rem;
  border-bottom: 2px solid transparent;
  color: var(--ink);
  text-decoration: none;
  font: 700 1.125rem/1.2 var(--display);
}
.panel .nav__akce:hover {
  border-color: var(--line);
}
.panel .nav__akce[aria-current='page'] {
  border-color: var(--ink);
}
/* oddíly světa: na počítači v řadě za lomítkem */
.nav__oddily {
  display: contents;
}
.nav .nav__akce-tel {
  display: none;
}
/* Telefon (autor 11. 10. 2026): nahoře pečeť se jménem a vpravo JERICHO, pod tím celý řádek pro
   oddíly a Propustku. Břeh, pohyb a zvuk jsou pod tlačítkem v rohu města (.mesto-nastaveni). */
@media (max-width: 47.99rem) {
  .top {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-areas:
      'znacka svet'
      'oddily oddily';
    align-items: center;
    gap: 0.6rem 0.9rem;
  }
  .brand {
    grid-area: znacka;
    margin-right: 0;
  }
  .brand__jmeno {
    font-size: 1.2rem;
  }
  .nav {
    display: contents;
  }
  .nav .nav__svet {
    grid-area: svet;
    font-size: 1.45rem;
  }
  .nav__lomitko,
  .panel {
    display: none;
  }
  .nav__oddily {
    grid-area: oddily;
    display: flex;
    gap: 0.2rem 1.15rem;
    overflow-x: auto;
    scrollbar-width: none;
    padding-top: 0.45rem;
    border-top: 1px solid var(--line);
  }
  .nav__oddily::-webkit-scrollbar {
    display: none;
  }
  .nav__oddily a {
    flex: none;
  }
  .nav .nav__akce-tel {
    display: inline-block;
    margin-left: auto;
    font-weight: 700;
  }
}


/* ————— pohyb a zvuk v rohu města: údaje jako na záznamu z kamery ————— */
/* Na počítači vpravo dole v obrazu města, na všech stránkách (autor 12. 10. 2026: mimo obraz
   „vzniká zmatek“, „posunout do části obrázku jako na hlavní straně“). Na úvodu kousek nad
   linkou nad dveřmi (autor 11. 10. 2026: „skoro úplný spodek obrázku“). Ovládají jen obraz města;
   na stránce povídky je nad nimi drobný nápis (Mesto.astro, ovladaniPopis), čítárna má vlastní. */
.mesto-ovladani {
  position: absolute;
  z-index: 3;
  right: max(var(--gutter), calc((100% - 80rem) / 2 + var(--gutter)));
  bottom: clamp(0.75rem, 2vw, 1.25rem);
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 0.4rem;
  max-width: 18.4rem;
}
.mesto-ovladani__popis {
  flex-basis: 100%;
  color: var(--ink-2);
  font: 500 0.66rem/1 var(--mono);
  letter-spacing: 0.1em;
  text-align: right;
  text-transform: uppercase;
  text-shadow: 0 0 0.5rem var(--bg);
}
.hero--obraz:not(.hero--stranka) .mesto-ovladani {
  bottom: calc(0.6rem - var(--uvod-pod-mestem) - var(--uvod-k-dverim));
}
/* Přepínač (autor 12. 10. 2026: „všechny přepínače na webu budou vypadat stejně jako Pohyb a Zvuk v obraze
   města“, „a zároveň opět rozlišit barevně Archa/Pallium“): kontrolka, název a stav strojovým písmem.
   Kontrolka svítí, když je věc zapnutá, v barvě zvýraznění vzhledu (Pallium modrá, Archa sodík).
   Stav má pevnou šířku, aby se přepínač při přepnutí nezvětšoval ani nezmenšoval. */
.prepinac {
  appearance: none;
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  min-height: 2.25rem;
  padding: 0.3rem 0.7rem;
  border: 1px solid color-mix(in srgb, var(--ink) 30%, transparent);
  border-radius: var(--radius-s);
  background: transparent;
  color: var(--ink-2);
  font: 500 0.7rem/1 var(--mono);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  cursor: pointer;
}
.prepinac__stav {
  display: inline-block;
  min-width: 5.2ch;
  margin-left: auto;
  color: var(--ink);
  text-align: left;
}
.prepinac:hover {
  border-color: var(--ink);
  color: var(--ink);
}
.prepinac__kontrolka {
  flex: none;
  width: 0.5rem;
  height: 0.5rem;
  border: 1px solid var(--ink-2);
}
.prepinac[aria-pressed='true'] .prepinac__kontrolka {
  border-color: var(--sys);
  background: var(--sys);
  box-shadow: 0 0 0.4rem var(--sys);
}
/* v obraze města: lehce průhledné (autor 11. 10. 2026: město prosvítá), oba stejně široké */
.mesto-ovladani__prep {
  width: 9rem;
  background: color-mix(in srgb, var(--bg) 48%, transparent);
  -webkit-backdrop-filter: blur(4px);
  backdrop-filter: blur(4px);
}
/* když systém pohyb omezuje, rozhoduje systém a přepínač pohybu není potřeba */
@media (prefers-reduced-motion: reduce) {
  .mesto-ovladani__pohyb {
    display: none;
  }
}
/* Telefon (autor 11. 10. 2026: „menší tlačítka a tu ikonu dej do rohu obrázku“): místo dvou
   přepínačů jedno kulaté tlačítko v pravém horním rohu města. Otevře pod sebou panel s břehem,
   pohybem a zvukem ve stejném strojovém písmu a skle jako přepínače na počítači. */
.mesto-nastaveni,
.nastaveni {
  display: none;
}
@media (max-width: 47.99rem) {
  .mesto-ovladani {
    display: none;
  }
  .mesto-nastaveni {
    position: absolute;
    z-index: 4;
    top: 0.6rem;
    right: var(--gutter);
    appearance: none;
    display: grid;
    place-items: center;
    width: 2.5rem;
    height: 2.5rem;
    padding: 0;
    border: 1px solid color-mix(in srgb, var(--ink) 30%, transparent);
    border-radius: 50%;
    background: color-mix(in srgb, var(--bg) 48%, transparent);
    -webkit-backdrop-filter: blur(4px);
    backdrop-filter: blur(4px);
    color: var(--ink);
    cursor: pointer;
  }
  .mesto-nastaveni svg {
    width: 1.15rem;
    height: 1.15rem;
  }
  .mesto-nastaveni[aria-expanded='true'] {
    border-color: var(--ink);
    background: var(--ink);
    color: var(--bg);
  }
  .nastaveni {
    position: absolute;
    z-index: 4;
    top: 3.5rem;
    right: var(--gutter);
    display: grid;
    gap: 0.5rem;
    width: min(16.5rem, calc(100% - 2 * var(--gutter)));
    padding: 0.7rem;
    border: 1px solid color-mix(in srgb, var(--ink) 22%, transparent);
    border-radius: var(--radius);
    background: color-mix(in srgb, var(--bg) 84%, transparent);
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
    box-shadow: 0 0.75rem 2rem rgb(0 0 0 / 0.22);
    visibility: hidden;
    opacity: 0;
    transform: translateY(-0.3rem);
    transition:
      opacity 0.2s ease,
      transform 0.2s ease,
      visibility 0s linear 0.2s;
  }
  .nastaveni.is-otevreno {
    visibility: visible;
    opacity: 1;
    transform: none;
    transition:
      opacity 0.2s ease,
      transform 0.2s ease;
  }
  .nastaveni__radek {
    display: grid;
    grid-template-columns: 3.4rem minmax(0, 1fr);
    align-items: center;
    gap: 0.5rem;
  }
  .nastaveni__nazev {
    color: var(--sys);
    font: 500 0.68rem/1 var(--mono);
    letter-spacing: 0.1em;
    text-transform: uppercase;
  }
  /* nadpis panelu na stránce povídky: ovládá jen obraz města, čítárna má své nastavení */
  .nastaveni__popis {
    padding-bottom: 0.45rem;
    border-bottom: 1px solid var(--line);
    color: var(--ink-2);
    font: 500 0.68rem/1.3 var(--mono);
    letter-spacing: 0.1em;
    text-transform: uppercase;
  }
  .nastaveni .bank {
    display: grid;
    grid-template-columns: 1fr 1fr;
    border-width: 1px;
    border-color: color-mix(in srgb, var(--ink) 40%, transparent);
    border-radius: var(--radius-s);
  }
  .nastaveni .bank button {
    min-height: 2.1rem;
    padding: 0.3rem 0.5rem;
    border-radius: calc(var(--radius-s) - 2px);
    font: 500 0.72rem/1 var(--mono);
    letter-spacing: 0.08em;
    text-transform: uppercase;
  }
}
@media (max-width: 47.99rem) and (prefers-reduced-motion: reduce) {
  .nastaveni__pohyb {
    display: none;
  }
  .nastaveni {
    transition: none;
  }
}


/* ————— hlášení: záznamy jako v terminálu ————— */
.terminal {
  padding: clamp(1rem, 3vw, 1.75rem) clamp(1rem, 3vw, 2rem);
  border: 1px solid var(--terminal-linka);
  border-radius: var(--radius-s);
  background: var(--terminal-bg);
  color: var(--terminal-ink);
  font: 400 0.95rem/1.65 var(--mono);
}
.terminal__hlava {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 0.5rem 1rem;
  padding-bottom: 0.8rem;
  border-bottom: 1px solid var(--terminal-linka);
  font-size: 0.72rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  opacity: 0.85;
}
.zapis {
  display: grid;
  gap: 0.35rem;
  padding-block: 1.15rem;
  border-bottom: 1px dashed var(--terminal-linka);
}
.zapis:last-of-type {
  border-bottom: 0;
}
.zapis__cas {
  font-size: 0.75rem;
  letter-spacing: 0.06em;
  opacity: 0.75;
}
.zapis__radek {
  font: 500 1.02rem/1.45 var(--mono);
  letter-spacing: 0.02em;
  text-transform: uppercase;
}
.zapis__radek a {
  color: inherit;
  text-decoration-thickness: 1px;
}
.zapis__text {
  max-width: 62ch;
  color: var(--ink);
  font: 400 1.02rem/1.6 var(--text);
}
.zapis__text > * + * {
  margin-top: 0.9em;
}
.zapis__text a {
  color: var(--accent);
}
/* kurzor na konci: stojí, nebliká (pohyb na webu nebliká) */
.terminal__kurzor {
  margin-top: 0.75rem;
}
.terminal__kurzor::after {
  content: '';
  display: inline-block;
  width: 0.62em;
  height: 1.1em;
  margin-left: 0.25em;
  vertical-align: -0.2em;
  background: currentColor;
  opacity: 0.7;
}


/* ————— omezení pohybu v systému: bez přechodů ————— */
@media (prefers-reduced-motion: reduce) {
  .dvere__polozka::before,
  .dvere__titul,
  .hlaska {
    transition: none;
  }
}



/* ————— systémové okno (SystemoveOkno.astro, scripts/okno.js) ————— */
/* Hlášení Systému jako okno uprostřed obrazovky, společné pro celý web (autor 12. 10. 2026). Rámeček
   a záře v barvě zvýraznění vzhledu jako okna čítárny (Pallium modrá, Archa sodík), stránka za oknem ztlumená a lehce rozmazaná. */
.sys-okno {
  position: fixed;
  z-index: 80;
  inset: 0;
  display: grid;
  place-items: center;
  padding: 0.5rem;
  background: color-mix(in srgb, var(--bg) 58%, transparent);
  -webkit-backdrop-filter: blur(3px);
  backdrop-filter: blur(3px);
}
.sys-okno[hidden] {
  display: none;
}
.sys-okno__ram {
  display: flex;
  flex-direction: column;
  width: min(var(--sys-okno-sirka), 100%);
  max-height: calc(100dvh - 1rem);
  overflow: hidden;
  border: var(--citarna-okno-ramecek) solid var(--accent);
  border-radius: var(--radius);
  background: var(--surface);
  color: var(--ink);
  box-shadow:
    0 0 0 var(--citarna-okno-zare) color-mix(in srgb, var(--accent) 22%, transparent),
    0 18px 50px -20px rgb(0 0 0 / 0.5);
  animation: sys-okno-prichod 0.35s ease;
}
@keyframes sys-okno-prichod {
  from {
    opacity: 0;
    transform: translateY(0.5rem);
  }
}
@media (prefers-reduced-motion: reduce) {
  .sys-okno__ram {
    animation: none;
  }
}
/* obsah se posouvá uvnitř rámečku (posuvník nevyleze přes zaoblené rohy, autor 12. 10. 2026) */
.sys-okno__obsah {
  display: grid;
  gap: 1rem;
  min-height: 0;
  overflow: auto;
  overscroll-behavior: contain;
  padding: clamp(1rem, 3vw, 1.4rem);
}
/* živá scéna nahoře v okně (úvodní okno čítárny): celou šířkou, pod ní linka; „zhasne“, když čtenář
   zvolí čistý text (autor 12. 10. 2026: „když v okně dám vypnout, tak zhasne“) */
.sys-okno__scena {
  display: block;
  flex: none;
  width: 100%;
  height: var(--sys-okno-scena);
  border-bottom: 1px solid var(--line);
  background: var(--bg);
  transition: opacity 0.8s ease;
}
.sys-okno__scena[data-zhasnuto] {
  opacity: 0.12;
}
@media (prefers-reduced-motion: reduce) {
  .sys-okno__scena {
    transition: none;
  }
}
/* volby v okně: přepínač a pod ním drobná poznámka */
.sys-okno__volby {
  display: grid;
  gap: 0.35rem 1rem;
  grid-template-columns: max-content 1fr;
  align-items: center;
}
.sys-okno__volby .prepinac {
  min-height: 44px;
  width: 100%;
}
.sys-okno__pozn {
  color: var(--ink-2);
  font: 400 0.8rem/1.35 var(--mono);
}
@media (max-width: 30rem) {
  .sys-okno__volby {
    grid-template-columns: 1fr;
  }
  .sys-okno__pozn {
    margin-bottom: 0.35rem;
  }
}
.sys-okno__nadpis {
  color: var(--sys);
  font: 500 0.78rem/1.4 var(--mono);
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
.sys-okno__radky {
  display: grid;
  gap: 0.55rem;
  margin: 0;
  font: 400 0.95rem/1.5 var(--mono);
}
.sys-okno__radky div {
  display: block;
}
.sys-okno__radky dt {
  display: inline;
  color: var(--sys);
  text-transform: uppercase;
}
.sys-okno__radky dd {
  display: inline;
  margin: 0 0 0 0.4em;
}
.sys-okno__tlacitka {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
}
.sys-okno__tl {
  appearance: none;
  min-height: 44px;
  padding: 0.55rem 1.1rem;
  border: 1px solid var(--line);
  border-radius: var(--radius-s);
  background: transparent;
  color: var(--ink);
  font: 600 1.05rem/1.1 var(--display);
  cursor: pointer;
}
.sys-okno__tl:hover {
  border-color: var(--ink);
}
.sys-okno__tl--hlavni {
  border-color: var(--accent);
  background: var(--accent);
  color: var(--on-accent);
}
.sys-okno__tl--hlavni:hover {
  border-color: var(--ink);
}
.sys-okno__volba {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  min-height: 44px;
  color: var(--ink-2);
  font: 400 0.85rem/1.3 var(--mono);
  cursor: pointer;
}
.sys-okno__volba input {
  width: 1.15rem;
  height: 1.15rem;
  accent-color: var(--accent);
}

/* Správa (zadani/03): části, které web nemá. Všechno ostatní (tokeny, písma, tlačítka, přepínače, záznam, systémové
   okno, nadpis rozříznutý řekou) je převzaté z webu, sprava/vzhled.mjs to skládá z web/src/styles. Barvy a rozměry
   jen z tokenů; vlastní tokeny správy jsou tady nahoře. */
:root {
  --sprava-sirka: 54rem; /* sloupec správy: seznam fází, záznam */
}

.filtry {
  position: absolute;
}
.sprava {
  padding-bottom: var(--gap-section);
}
.sprava-nadpis {
  margin-block: clamp(1.25rem, 4vw, 2.75rem) clamp(1.25rem, 3vw, 2rem);
}
.sprava h2 {
  font-size: var(--s-3);
}
/* hlavička: pečeť se jménem a přepínač břehu, na telefonu v jednom řádku */
@media (max-width: 47.99rem) {
  .top--sprava {
    grid-template-areas: 'znacka breh';
  }
  .top--sprava .bank {
    grid-area: breh;
  }
}

/* hlášení Systému po akci */
.sprava-zprava {
  margin-bottom: clamp(1.25rem, 3vw, 2rem);
  border-left: 3px solid var(--sys);
}
.sprava-zprava[data-druh='chyba'] {
  border-left-color: var(--scar);
}
.sprava-zprava__kdo {
  color: var(--sys);
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
.sprava-zprava[data-druh='chyba'] .sprava-zprava__kdo {
  color: var(--scar);
}
.sprava-pozor {
  color: var(--scar);
}

/* ————— fáze ————— */
.faze {
  display: grid;
  max-width: var(--sprava-sirka);
  margin: clamp(2rem, 5vw, 3.25rem) 0 0;
  padding: 0;
  border-top: 1.5px solid var(--ink);
  list-style: none;
}
.faze__polozka {
  display: grid;
  gap: 0.55rem;
  padding-block: clamp(1.25rem, 3vw, 1.75rem);
  border-bottom: 1px solid var(--line);
}
.faze__hlava {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.35rem 0.9rem;
}
.faze__cislo {
  color: var(--ink-2);
  font: 500 0.8125rem/1 var(--mono);
  letter-spacing: 0.1em;
}
.faze__nazev {
  font-size: var(--s-3);
}
.faze__stav {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  margin-left: auto;
  color: var(--ink-2);
  font: 500 0.7rem/1 var(--mono);
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
.faze__kontrolka {
  flex: none;
  width: 0.5rem;
  height: 0.5rem;
  border: 1px solid var(--ink-2);
}
.faze__stav[data-stav='venku'] {
  color: var(--ink);
}
.faze__stav[data-stav='venku'] .faze__kontrolka {
  border-color: var(--sys);
  background: var(--sys);
  box-shadow: 0 0 0.4rem var(--sys);
}
.faze__stav[data-stav='pozdrzena'] {
  color: var(--scar);
}
.faze__stav[data-stav='pozdrzena'] .faze__kontrolka {
  border-color: var(--scar);
  background: var(--scar);
}
.faze__datum {
  font: 400 0.95rem/1.45 var(--mono);
  letter-spacing: 0.02em;
}
.faze__upraveno {
  margin-left: 0.4rem;
  color: var(--ink-2);
  font-size: 0.72rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.faze__co {
  max-width: var(--measure);
}
.faze__chybi {
  color: var(--scar);
  font: 400 0.8125rem/1.5 var(--mono);
}
.faze__akce {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.6rem;
  margin-top: 0.35rem;
}
.faze__akce > form {
  display: contents;
}
/* přepínače mezi tlačítky: stejně vysoké jako tlačítka a dost velké pro prst */
.faze__akce .prepinac {
  min-height: 3rem;
}
.faze__posun summary {
  list-style: none;
}
.faze__posun summary::-webkit-details-marker {
  display: none;
}
.faze__posun[open] {
  flex-basis: 100%;
}
.faze__posun[open] summary {
  border-color: var(--ink);
  color: var(--ink);
}
.faze__posun-form {
  display: flex;
  flex-wrap: wrap;
  align-items: end;
  gap: 0.6rem;
  margin-top: 0.75rem;
}
.faze__posun-form .field {
  flex: 0 1 15rem;
}

/* co se ve fázi změní (seznam ze sestavení) */
.faze__zmeny summary {
  list-style: none;
  width: fit-content;
  min-height: 3rem;
}
.faze__zmeny summary::-webkit-details-marker {
  display: none;
}
.faze__zmeny[open] summary {
  border-color: var(--ink);
  color: var(--ink);
}
.faze__zmeny-obsah {
  display: grid;
  gap: 0.4rem;
  margin-top: 0.75rem;
  padding: 0.9rem 1rem;
  border-left: 3px solid var(--sys);
  background: var(--surface);
}
.faze__zmeny-nadpis {
  margin-top: 0.4rem;
  color: var(--sys);
  font: 500 0.72rem/1.4 var(--mono);
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
.faze__zmeny-seznam,
.faze__zmeny-stranky {
  display: grid;
  gap: 0.35rem;
  margin: 0;
  padding-left: 1.1em;
}
.faze__zmeny-stranky {
  padding-left: 0;
  list-style: none;
}
.faze__zmeny-stranky li {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.15rem 0.7rem;
  padding-block: 0.3rem;
  border-bottom: 1px dashed var(--line);
}
.faze__zmeny-titul {
  font-weight: 600;
}
.faze__zmeny-pocet {
  color: var(--ink-2);
  font: 400 0.8rem/1.4 var(--mono);
}
.faze__zmeny-odkaz {
  margin-left: auto;
  font: 600 1rem/1.2 var(--display);
}
.faze__zmeny-prazdne {
  color: var(--ink-2);
  font: 400 0.8rem/1.4 var(--mono);
}

/* ————— záznam správy ————— */
.sprava-zaznam {
  max-width: var(--sprava-sirka);
  margin-top: var(--gap-section);
}
.terminal__hlava .sprava-zaznam__nadpis {
  font: inherit;
  letter-spacing: inherit;
}
.sprava-zaznam__radky {
  display: grid;
  gap: 0.45rem;
  margin: 0;
  padding: 0.9rem 0 0;
  font-size: 0.85rem;
  list-style: none;
  overflow-wrap: anywhere;
}
.sprava-zaznam__radky .zapis__cas {
  margin-right: 0.4rem;
}

/* ————— přihlášení a nastavení ————— */
.sprava-vstup {
  max-width: var(--sprava-sirka);
}
.sprava-oddil {
  display: grid;
  gap: 1rem;
  max-width: var(--sprava-sirka);
  padding-block: clamp(1.5rem, 3vw, 2.25rem);
  border-top: 1px solid var(--line);
}
.sprava-text {
  max-width: var(--measure);
}
.sprava-text code {
  font: 400 0.92em/1 var(--mono);
}
.sprava-prazdno {
  margin-top: 2rem;
}

/* ————— spodní řádek: fáze, nastavení, odhlášení ————— */
.sprava-pata {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem 1.5rem;
  padding-block: 1.25rem calc(2rem + env(safe-area-inset-bottom));
  border-top: 1px solid var(--line);
  font: 600 1.125rem/1.2 var(--display);
}
.sprava-pata a,
.sprava-pata__odhlasit {
  padding-block: 0.4rem 0.25rem;
  border-bottom: 2px solid transparent;
  color: var(--ink);
  text-decoration: none;
}
.sprava-pata a:hover,
.sprava-pata__odhlasit:hover {
  border-color: var(--line);
}
.sprava-pata form {
  margin-left: auto;
}
.sprava-pata__odhlasit {
  appearance: none;
  border-width: 0 0 2px;
  background: none;
  color: var(--ink-2);
  font: inherit;
  cursor: pointer;
}