/* =====================================================================
   Základ vzhledu dotazníku — společný pro všechny motivy
   ---------------------------------------------------------------------
   Motiv (assets/motivy/<motiv>.css) nastavuje tokeny níže a přidává
   vlastní charakter. Barvy palety dosazuje app.js do --barva, --tmava,
   --na a --akcent (viz motivy.json).

   Rozvržení (třída na <body>, nastavuje app.js):
     tok-strana    celá část dotazníku na jedné stránce (výchozí bez JS)
     tok-otazka    jedna otázka na obrazovku
     tok-rozhovor  otázky jako zprávy v chatu
   ===================================================================== */
:root{
  /* paleta — přepisuje app.js */
  --barva:#eef0f3; --tmava:#1d232b; --na:#1d232b; --akcent:var(--tmava);

  /* tokeny motivu */
  --pismo:system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --pismo-nadpis:var(--pismo);
  --vaha-nadpis:700; --vaha-volby:500;
  --pozadi:var(--barva); --text:var(--na);
  --tlumene:color-mix(in srgb, var(--text) 68%, transparent);
  --karta:#fff; --karta-text:#22262c; --karta-tlumene:#646a73;
  --okraj:rgba(0,0,0,.1); --okraj-sirka:1px; --hrana:3px; --hrana-barva:rgba(0,0,0,.14);
  --radius:12px; --radius-maly:9px; --stin:none;
  --vyber:var(--tmava); --na-vyberu:#fff;
  --chyba:#c62828;
  --max:760px;
}

/* ---------- reset ---------- */
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0; background:var(--pozadi); color:var(--text); font:17px/1.55 var(--pismo); -webkit-font-smoothing:antialiased;
  transition:background-color .5s, color .5s}
button, input, select, textarea{font:inherit; color:inherit}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
[hidden]{display:none !important}
:focus-visible{outline:2px solid var(--akcent); outline-offset:2px}

/* =====================================================================
   Rozvržení po stranách (výchozí)
   ===================================================================== */
.hlavicka{position:sticky; top:var(--nahled-vyska, 0px); z-index:20; background:var(--pozadi); padding:14px 20px 0;
  border-bottom:1px solid color-mix(in srgb, var(--text) 12%, transparent)}
.hlavicka > *{max-width:var(--max); margin-inline:auto}
.hlavicka-radek{display:flex; justify-content:space-between; align-items:center; gap:16px}
.nazev{font-size:14px; font-weight:600; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.postup-text{font-size:14px; color:var(--tlumene); white-space:nowrap}
.postup-text b{color:var(--text)}
.kroky{list-style:none; display:flex; gap:3px; padding:12px 0 14px; margin:0 auto}
.kroky li{flex:1; height:4px; border-radius:2px; background:color-mix(in srgb, var(--text) 14%, transparent)}
.kroky li.hotovo{background:var(--text)}
.kroky li.aktualni{background:var(--akcent)}
.kroky li.preskocena{flex:.35; opacity:.5}

.obsah{max-width:calc(var(--max) + 40px); margin:0 auto; padding:48px 20px 0}
.uvod{margin-bottom:40px}
.uvod h1{font:var(--vaha-nadpis) clamp(32px,5vw,52px)/1.08 var(--pismo-nadpis); letter-spacing:-.02em; margin:0 0 20px}
.uvod p{max-width:62ch; margin:0 0 12px}
.uvod a{color:inherit; text-decoration:underline; text-underline-offset:3px}
/* rozbalovací část úvodu (ochrana osobních údajů): <details class="rozbalit"><summary>…</summary>…</details> */
.uvod .rozbalit{max-width:62ch; margin:20px 0 0; border-block:1px solid color-mix(in srgb, currentColor 28%, transparent)}
.uvod .rozbalit > summary{display:flex; align-items:center; justify-content:space-between; gap:12px; padding:12px 2px; cursor:pointer; font-weight:600; list-style:none}
.uvod .rozbalit > summary::-webkit-details-marker{display:none}
.uvod .rozbalit > summary::after{content:""; flex:none; width:9px; height:9px; margin-right:6px; border:solid currentColor; border-width:0 2px 2px 0; transform:translateY(-2px) rotate(45deg); transition:transform .15s}
.uvod .rozbalit[open] > summary::after{transform:translateY(2px) rotate(-135deg)}
.uvod .rozbalit > :not(summary):last-child{margin-bottom:14px}
.strana-hlava{margin-bottom:20px}
.strana-cislo{font-size:14px; color:var(--tlumene)}
.strana-nazev{font:var(--vaha-nadpis) clamp(28px,4vw,42px)/1.12 var(--pismo-nadpis); letter-spacing:-.02em; margin:6px 0 0}

#formular{counter-reset:q}
.otazka{counter-increment:q; padding:28px 0}
.otazka-text{font-size:clamp(19px,2.2vw,23px); font-weight:var(--vaha-nadpis); line-height:1.3; letter-spacing:-.01em; margin:0}
.hvezda{color:var(--akcent)}
.napoveda{font-size:15.5px; color:var(--tlumene); margin:8px 0 0; max-width:62ch}
.odpovedi{margin-top:18px}
.kod-polozky{display:none}
.otazka-text strong{font-weight:inherit; text-decoration:underline; text-decoration-thickness:3px; text-underline-offset:5px}
.kaskada > .vylucujici:first-child{margin-bottom:18px}
.odpovedi > .vylucujici:first-child{margin-bottom:8px}
.napoveda.upozorneni{animation:napoveda-upozorni 1.2s ease-out; font-weight:700}
@keyframes napoveda-upozorni{0%,40%{color:var(--chyba)}}
.cislo-otazky{font-weight:800; opacity:.55; margin-right:4px; font-variant-numeric:tabular-nums}

/* =====================================================================
   Komponenty
   ===================================================================== */
.typ-single .odpovedi, .typ-multi .odpovedi, .typ-vineta .odpovedi{
  display:grid; grid-template-columns:repeat(auto-fill, minmax(220px, 1fr)); gap:10px}
.otazka.dlouhe-volby .odpovedi{grid-template-columns:1fr}
.otazka.dlouhe-volby .v-skupina{grid-template-columns:1fr}   /* oblasti ve výběru stejně jako běžné dlouhé volby */
.odpovedi > :not(.volba), .odpovedi > .vylucujici, .odpovedi > .jine-radek{grid-column:1 / -1}

/* volba = karta s hmatovou spodní hranou (motiv může hranu vynulovat) */
.volba{position:relative; display:flex; align-items:center; gap:12px; padding:13px 16px; cursor:pointer;
  background:var(--karta); color:var(--karta-text); font-weight:var(--vaha-volby); line-height:1.35;
  border:var(--okraj-sirka) solid var(--okraj); border-bottom:calc(var(--okraj-sirka) + var(--hrana)) solid var(--hrana-barva);
  border-radius:var(--radius); box-shadow:var(--stin); transition:transform .08s, background .15s, color .15s, box-shadow .12s}
.volba:hover{transform:translateY(-1px)}
.volba:active{transform:translateY(2px); border-bottom-width:var(--okraj-sirka); margin-bottom:var(--hrana)}
.volba:has(input:checked){background:var(--vyber); color:var(--na-vyberu); border-color:rgba(0,0,0,.25)}
.volba:has(input:focus-visible){outline:2px solid var(--akcent); outline-offset:2px}
.volba.vylucujici{border-style:dashed; border-bottom-style:solid}

/* vlastní přepínače a zaškrtávátka */
input[type=radio], input[type=checkbox]{appearance:none; -webkit-appearance:none; margin:0; flex:0 0 auto;
  width:20px; height:20px; border:1.5px solid currentColor; opacity:.55; background:transparent;
  display:inline-grid; place-content:center; cursor:pointer}
input[type=radio]{border-radius:50%}
input[type=checkbox]{border-radius:5px}
input[type=radio]::before{content:""; width:9px; height:9px; border-radius:50%; background:currentColor; transform:scale(0); transition:transform .12s}
input[type=checkbox]::before{content:""; width:12px; height:12px; background:currentColor; transform:scale(0); transition:transform .12s;
  clip-path:polygon(14% 52%, 0 66%, 38% 100%, 100% 22%, 86% 8%, 38% 72%)}
input:checked{opacity:1}
input:checked::before{transform:scale(1)}

/* klávesové zkratky: app.js doplní data-k, písmeno nahradí přepínač */
.volba[data-k] > input{position:absolute; opacity:0; pointer-events:none}
.volba[data-k]::before{content:attr(data-k); flex:0 0 28px; height:28px; display:grid; place-items:center;
  border:1.5px solid color-mix(in srgb, currentColor 25%, transparent); border-radius:7px;
  font-size:13px; font-weight:700; color:color-mix(in srgb, currentColor 60%, transparent)}
.volba[data-k]:has(input:checked)::before{border-color:color-mix(in srgb, currentColor 60%, transparent); color:inherit}
.volba[data-k]:has(input[type=checkbox]:checked)::before{content:"✓"}

.jine-radek{flex-wrap:wrap}
.jine-radek > span{flex:0 1 auto; min-width:0; max-width:calc(100% - 40px)}
.jine-text{flex:1 1 90px; min-width:0; width:auto !important; padding:2px 0 !important; border:0 !important;
  border-bottom:1.5px solid color-mix(in srgb, currentColor 35%, transparent) !important; border-radius:0 !important;
  background:transparent !important; box-shadow:none !important; color:inherit !important; font-size:inherit !important}
.jine-text:focus{outline:0}

/* text */
input[type=text], textarea, select{width:100%; padding:15px 18px; font-size:18px; outline:none;
  background:var(--karta); color:var(--karta-text);
  border:var(--okraj-sirka) solid var(--okraj); border-bottom:calc(var(--okraj-sirka) + var(--hrana)) solid var(--hrana-barva);
  border-radius:var(--radius); box-shadow:var(--stin)}
input[type=text]:focus, textarea:focus, select:focus{border-color:var(--vyber)}
textarea{resize:vertical; min-height:130px}
::placeholder{color:var(--karta-tlumene); opacity:.7}
select{appearance:none; -webkit-appearance:none; padding-right:44px; cursor:pointer;
  background-image:linear-gradient(45deg, transparent 50%, currentColor 50%), linear-gradient(-45deg, transparent 50%, currentColor 50%);
  background-position:calc(100% - 22px) 54%, calc(100% - 17px) 54%; background-size:5px 5px; background-repeat:no-repeat}

/* matice: řádek = karta s výrokem a tlačítky škály */
.matice{width:100%; border-collapse:separate; border-spacing:0}
.matice thead{display:none}
.matice tbody{display:grid; gap:10px}
.matice tr{display:grid; grid-template-columns:repeat(5, minmax(0,1fr)); gap:6px; padding:14px;
  background:var(--karta); color:var(--karta-text); border-radius:var(--radius); box-shadow:var(--stin);
  border:var(--okraj-sirka) solid var(--okraj); border-bottom:calc(var(--okraj-sirka) + var(--hrana)) solid var(--hrana-barva)}
.matice[data-n="2"] tr{grid-template-columns:repeat(2, minmax(0,1fr))}
.matice[data-n="3"] tr{grid-template-columns:repeat(3, minmax(0,1fr))}
.matice[data-n="4"] tr{grid-template-columns:repeat(4, minmax(0,1fr))}
.matice[data-n="6"] tr{grid-template-columns:repeat(6, minmax(0,1fr))}
.matice[data-n="7"] tr{grid-template-columns:repeat(7, minmax(0,1fr))}
.matice th, .matice td{padding:0; border:0}
.matice .radek-popis{grid-column:1 / -1; display:flex; gap:10px; text-align:left; font-weight:var(--vaha-volby);
  font-size:16.5px; line-height:1.35; margin-bottom:6px}
.matice .radek-popis::before{content:""; flex:0 0 20px; height:20px; margin-top:1px; border-radius:50%;
  border:1.5px solid color-mix(in srgb, currentColor 25%, transparent)}
.matice tr:has(input:checked) .radek-popis::before{content:"✓"; display:grid; place-items:center; font-size:12px;
  background:var(--vyber); border-color:var(--vyber); color:var(--na-vyberu)}
.matice label{position:relative; display:flex; align-items:center; justify-content:center; text-align:center; height:100%;
  min-height:48px; padding:8px 4px; cursor:pointer; font-size:13px; line-height:1.2; font-weight:var(--vaha-volby);
  color:var(--karta-tlumene); background:var(--karta); border-radius:var(--radius-maly);
  border:1px solid color-mix(in srgb, var(--karta-text) 14%, transparent); border-bottom-width:3px}
.matice label:hover{color:var(--karta-text)}
.matice label:active{transform:translateY(2px); border-bottom-width:1px}
.matice label:has(input:checked){background:var(--vyber); color:var(--na-vyberu); border-color:rgba(0,0,0,.25)}
.matice label:has(input:focus-visible){outline:2px solid var(--akcent); outline-offset:2px}
.matice label input{position:absolute; opacity:0; pointer-events:none}
.matice .sr{position:static; width:auto; height:auto; overflow:visible; clip:auto}

/* skupiny (oblasti) v matici a ve výběru — rozbalují se postupně */
.matice tbody.m-skupina + tbody.m-skupina{margin-top:18px}
.matice tr.skupina-radek{display:block; padding:0; background:none; box-shadow:none; border:0; color:inherit}
.skupina-prepinac{display:flex; align-items:center; gap:8px; width:100%; padding:4px 0; border:0; background:none; cursor:pointer;
  font:inherit; font-size:15px; font-weight:700; color:inherit; text-align:left}
.skupina-prepinac::before, .v-skupina > legend::before{content:""; width:8px; height:8px; flex:none; border-right:2px solid currentColor;
  border-bottom:2px solid currentColor; transform:rotate(45deg) translate(-2px,-2px); transition:transform .2s; opacity:.7}
.zabaleno .skupina-prepinac::before, .v-skupina.zabaleno > legend::before{transform:rotate(-45deg)}
.m-skupina.zabaleno tr.m-radek, .v-skupina.zabaleno > label{display:none}
/* zavřená oblast: výrazný čárkovaný pruh s počtem otázek a nápovědou, že se otevře sama */
.zabaleno .skupina-prepinac, .v-skupina.zabaleno > legend{padding:14px 16px; border:2px dashed currentColor; border-radius:var(--radius, 12px);
  opacity:1; flex-wrap:wrap; box-sizing:border-box}
.matice tr.skupina-radek th{display:block; width:100%}
.zabaleno .skupina-prepinac::after, .v-skupina.zabaleno > legend::after{content:attr(data-pocet) " · otevře se po vyplnění předchozí oblasti";
  flex-basis:100%; margin-left:16px; font-size:13px; font-weight:500; opacity:.85}
.zabaleno .skupina-prepinac:hover, .v-skupina.zabaleno > legend:hover{border-style:solid}
.zabaleno.rucne .skupina-prepinac::after, .v-skupina.zabaleno.rucne > legend::after{content:attr(data-pocet) " · kliknutím rozbalíte"}
.v-skupina > legend{cursor:pointer}
.v-dalsi{grid-column:1 / -1; justify-self:start; margin-top:4px; padding:10px 18px; border-radius:var(--radius); cursor:pointer;
  font:inherit; font-size:15px; font-weight:700; background:var(--vyber); color:var(--na-vyberu); border:0}
.v-dalsi::after{content:" ↓"}
.v-skupina.zabaleno > .v-dalsi{display:none}
.prave-otevreno .skupina-prepinac, .v-skupina.prave-otevreno > legend{animation:oblast-otevrena 1.4s ease-out}
@keyframes oblast-otevrena{0%{transform:translateX(0)} 15%{transform:translateX(8px)} 30%{transform:translateX(0)} 45%{transform:translateX(5px)} 60%{transform:translateX(0)}}
@media (prefers-reduced-motion: reduce){.prave-otevreno .skupina-prepinac, .v-skupina.prave-otevreno > legend{animation:none}}
.v-skupina{grid-column:1 / -1; display:grid; grid-template-columns:repeat(auto-fill, minmax(220px, 1fr)); gap:10px;
  border:0; padding:0; margin:0 0 14px; min-width:0}
.v-skupina > legend{display:flex; align-items:center; gap:8px; grid-column:1 / -1; padding:4px 0 6px; font-size:15px; font-weight:700;
  opacity:1; cursor:pointer; float:left; width:100%}
.v-skupina > .vylucujici{grid-column:1 / -1}

/* kaskáda */
.kaskada{display:grid; grid-template-columns:repeat(auto-fill, minmax(250px,1fr)); gap:10px}
.skupina-nadpis{grid-column:1 / -1; font-size:13px; font-weight:700; opacity:.75; margin:14px 0 0}
.skupina-nadpis:first-child{margin-top:0}
.kaskada > .vylucujici{grid-column:1 / -1}
.k-polozka{background:var(--karta); color:var(--karta-text); border-radius:var(--radius); box-shadow:var(--stin);
  border:var(--okraj-sirka) solid var(--okraj); border-bottom:calc(var(--okraj-sirka) + var(--hrana)) solid var(--hrana-barva)}
.k-polozka > .volba{border:0; background:none !important; color:inherit !important; box-shadow:none; transform:none !important}
.k-polozka.aktivni{grid-column:1 / -1; border-color:var(--vyber)}
.k-polozka.aktivni > .volba{font-weight:700}
.k-polozka.aktivni > .volba[data-k]::before{content:"✓"; background:var(--vyber); border-color:var(--vyber); color:var(--na-vyberu)}
.k-detail{display:flex; flex-wrap:wrap; gap:6px; align-items:center; padding:0 16px 16px 56px}
.k-jiny{flex:1 1 100%; margin-top:4px}
.k-podotazka{width:100%; font-size:13px; font-weight:600; color:var(--karta-tlumene)}
.kaskada + .jine-radek{margin-top:10px}
.chip{display:inline-flex; align-items:center; gap:8px; padding:7px 12px; cursor:pointer; font-size:14px; font-weight:var(--vaha-volby);
  background:var(--karta); color:var(--karta-text); border-radius:var(--radius-maly);
  border:1px solid color-mix(in srgb, var(--karta-text) 14%, transparent); border-bottom-width:3px}
.chip:active{transform:translateY(2px); border-bottom-width:1px}
.chip:has(input:checked){background:var(--vyber); color:var(--na-vyberu); border-color:rgba(0,0,0,.25)}
.chip input{width:15px; height:15px}

/* viněta */
.vineta{margin:0; padding:22px 24px; background:var(--karta); color:var(--karta-text); border-radius:var(--radius); box-shadow:var(--stin);
  border:var(--okraj-sirka) solid var(--okraj); border-bottom:calc(var(--okraj-sirka) + var(--hrana)) solid var(--hrana-barva);
  font-size:clamp(18px,2.1vw,22px); line-height:1.5}
.vineta::before{content:"Situace"; display:block; margin-bottom:8px; font-size:12px; font-weight:700; letter-spacing:.06em;
  text-transform:uppercase; color:var(--karta-tlumene)}
.vineta-otazka{font-weight:var(--vaha-nadpis); font-size:19px; margin:16px 0 0}

/* navigace (rozvržení po stranách) */
.navigace{display:flex; align-items:center; gap:14px; margin-top:24px; padding:18px 0 22px}
.navigace-stav{flex:1; font-size:14px; color:var(--tlumene); text-align:center}
.tlacitko{padding:13px 26px; font-weight:700; font-size:16px; cursor:pointer; border-radius:var(--radius);
  border:var(--okraj-sirka) solid var(--okraj); border-bottom:calc(var(--okraj-sirka) + var(--hrana)) solid var(--hrana-barva)}
.tlacitko.hlavni{background:var(--vyber); color:var(--na-vyberu); border-color:rgba(0,0,0,.25)}
.tlacitko.druhotne{background:transparent; color:var(--text)}
.tlacitko:active{transform:translateY(2px)}
.chyba-hlaska{padding:12px 16px; margin-bottom:12px; border-radius:var(--radius-maly); background:var(--chyba); color:#fff; font-weight:600}
.otazka.chybi .otazka-hlava::after{content:"Tato otázka je povinná."; display:inline-block; margin-top:10px; padding:4px 10px;
  border-radius:6px; background:var(--chyba); color:#fff; font-size:13px; font-weight:600}
.otazka.chybi{animation:tres .35s}
@keyframes tres{25%{transform:translateX(-5px)} 75%{transform:translateX(5px)}}
.paticka{font-size:13px; color:var(--tlumene); padding:8px 0 40px}

/* informační obrazovky */
.zprava-obal{min-height:80vh; display:grid; place-items:center; padding:48px 20px}
.zprava{max-width:600px}
.zprava h1{font:var(--vaha-nadpis) clamp(36px,6vw,60px)/1.08 var(--pismo-nadpis); letter-spacing:-.02em; margin:0 0 16px}
.zprava h2{font-size:17px; margin-top:28px}
.zprava p{font-size:18px; opacity:.85}
.zprava a{color:inherit; font-weight:700; text-decoration:underline; text-underline-offset:3px; white-space:nowrap}
.fajfka{width:64px; height:64px; margin:0 0 24px; display:grid; place-items:center; font-size:28px; font-weight:800;
  background:var(--karta); color:var(--vyber); border-radius:16px; border-bottom:3px solid var(--hrana-barva)}

/* volba barev pro návštěvníky */
.volba-barev{font-size:12px; font-weight:600; padding:4px 8px; border-radius:8px; cursor:pointer; max-width:170px;
  color:inherit; background:transparent; border:1px solid color-mix(in srgb, currentColor 40%, transparent)}
.volba-barev option{color:#222; background:#fff}
.volba-barev.plovouci{position:fixed; right:12px; bottom:12px; z-index:40; background:var(--pozadi)}

/* =====================================================================
   Rozvržení po otázkách a rozhovor (app.js)
   ===================================================================== */
body.tok-otazka .hlavicka, body.tok-otazka .strana-hlava, body.tok-otazka .navigace, body.tok-otazka .paticka,
body.tok-rozhovor .hlavicka, body.tok-rozhovor .strana-hlava, body.tok-rozhovor .navigace, body.tok-rozhovor .paticka{display:none}
body.tok-otazka .obsah, body.tok-rozhovor .obsah{padding:0 clamp(16px,5vw,48px)}

.tok-hlava{position:fixed; left:0; right:0; top:var(--nahled-vyska, 0px); z-index:30; display:flex; align-items:center; gap:18px;
  padding:16px clamp(16px,4vw,40px) 20px; background:linear-gradient(to bottom, var(--pozadi) 70%, transparent);
  transition:background .5s}
.tok-znacka{font-weight:700; font-size:14px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:28%}
.tok-postup{flex:1; max-width:560px; margin-inline:auto; height:8px; border-radius:99px; overflow:hidden;
  background:color-mix(in srgb, var(--text) 20%, transparent)}
.tok-postup span{display:block; height:100%; width:0; border-radius:99px; background:var(--text); transition:width .5s cubic-bezier(.3,1.3,.5,1)}
.tok-pocet{font-weight:700; font-size:14px; font-variant-numeric:tabular-nums; white-space:nowrap}

.tok-pata{position:fixed; left:0; right:0; bottom:0; z-index:30; display:flex; align-items:center; gap:14px;
  padding:16px clamp(16px,4vw,40px) 20px; background:linear-gradient(to top, var(--pozadi) 65%, transparent); transition:background .5s}
.tok-zpet{flex:0 0 48px; height:48px; border:0; border-radius:var(--radius); cursor:pointer; font-size:20px; font-weight:700;
  background:color-mix(in srgb, var(--text) 12%, transparent); color:var(--text)}
.tok-zprava{flex:1; font-weight:700; font-size:16px; opacity:0; transform:translateY(6px); transition:all .25s}
.tok-zprava.ukaz{opacity:1; transform:none}
.tok-zprava small{display:block; font-weight:500; font-size:13px; opacity:.75}
.tok-dal{padding:14px 28px; font-weight:700; font-size:16px; cursor:pointer; border:0; border-radius:var(--radius);
  background:var(--karta); color:var(--vyber); border-bottom:3px solid rgba(0,0,0,.2)}
.tok-dal:active{transform:translateY(2px); border-bottom-width:1px}
.tok-dal:disabled{opacity:.45; cursor:default}

body.tok-otazka #formular > .otazka, body.tok-otazka #formular > .tok-uvod{display:none}
body.tok-otazka #formular > .aktivni{display:flex; flex-direction:column; justify-content:center; max-width:var(--max); margin:0 auto;
  min-height:100dvh; padding:calc(var(--nahled-vyska, 0px) + 84px) 0 120px; animation:tok-vstup .45s cubic-bezier(.2,.8,.2,1)}
@keyframes tok-vstup{from{opacity:0; transform:translateY(28px)}}
body.tok-otazka .otazka-text{font-size:clamp(26px,3.4vw,40px); line-height:1.18; letter-spacing:-.02em}
body.tok-otazka .napoveda{font-size:17px; color:inherit; opacity:.8}
body.tok-otazka .odpovedi{margin-top:24px}
body.tok-otazka .otazka{padding:0}
.tok-meta{font-size:13px; font-weight:600; opacity:.75; margin-bottom:12px; text-transform:uppercase; letter-spacing:.05em}

.tok-cislo{width:64px; height:64px; display:grid; place-items:center; margin-bottom:22px; font-size:28px; font-weight:800;
  background:var(--karta); color:var(--vyber); border-radius:14px; border-bottom:3px solid var(--hrana-barva)}
.tok-nazev{font:var(--vaha-nadpis) clamp(32px,5vw,56px)/1.08 var(--pismo-nadpis); letter-spacing:-.03em; margin:0 0 14px}
.tok-info{font-size:18px; opacity:.8; margin:0}
.tok-uvod .uvod{margin:0}

/* rozhovor */
body.tok-rozhovor #formular{max-width:680px; margin:0 auto; padding:calc(var(--nahled-vyska, 0px) + 80px) 0 140px;
  display:flex; flex-direction:column; gap:10px}
body.tok-rozhovor #formular > .otazka, body.tok-rozhovor #formular > .tok-uvod{display:none; padding:0}
body.tok-rozhovor #formular > .aktivni, body.tok-rozhovor #formular > .shrnuto{display:block; animation:tok-vstup .35s ease-out}
body.tok-rozhovor .otazka-hlava, body.tok-rozhovor .tok-uvod > *{max-width:86%; padding:12px 16px; background:var(--karta); color:var(--karta-text);
  border:1px solid var(--okraj); border-radius:18px 18px 18px 6px}
body.tok-rozhovor .otazka-text{font-size:17px; font-weight:600}
body.tok-rozhovor .napoveda{font-size:14px}
body.tok-rozhovor .odpovedi{margin:10px 0 0}
body.tok-rozhovor .shrnuto .odpovedi{display:none}
.shrnuti{display:none}
body.tok-rozhovor .shrnuto .shrnuti{display:block; width:fit-content; max-width:80%; margin:8px 0 6px auto; padding:10px 16px; cursor:pointer;
  background:var(--vyber); color:var(--na-vyberu); border-radius:18px 18px 6px 18px; font-weight:500}
body.tok-rozhovor .tok-uvod .tok-cislo{display:none}
body.tok-rozhovor .tok-nazev{font-size:17px; letter-spacing:0; margin:0}
body.tok-rozhovor .tok-info{font-size:14px}

/* Velké monitory: lišty zarovnané k obsahu (tlačítko „Dál“ pod otázkou, ne v rohu obrazovky)
   a obsah úměrně zvětšený, aby otázka nepůsobila jako malý sloupec uprostřed prázdné plochy.
   Zvětšuje se jen obsah uvnitř, ne kontejnery s 100dvh a fixní lišty samotné. */
:root{--zvetseni:1}
@media (min-width:1400px) and (min-height:760px){:root{--zvetseni:1.1}}
@media (min-width:1600px) and (min-height:820px){:root{--zvetseni:1.18}}
@media (min-width:1880px) and (min-height:900px){:root{--zvetseni:1.3}}
@media (min-width:2400px) and (min-height:1300px){:root{--zvetseni:1.45}}
@media (min-width:3200px) and (min-height:1700px){:root{--zvetseni:1.8}}
@media (min-width:1100px){
  .tok-pata{padding-inline:max(40px, calc((100% - var(--max) * var(--zvetseni)) / 2))}
  .tok-hlava{padding-inline:max(40px, calc((100% - 1240px * var(--zvetseni)) / 2))}
  .tok-hlava > *, .tok-pata > *{zoom:var(--zvetseni)}
  body.tok-otazka .obsah{max-width:none}
  body.tok-otazka #formular > .aktivni{max-width:calc(var(--max) * var(--zvetseni))}
  body.tok-otazka #formular > .aktivni > *{zoom:var(--zvetseni)}
  body.tok-strana .obsah, body.tok-strana .hlavicka > *{zoom:var(--zvetseni)}
  .tok-znacka{max-width:none; flex:1 1 0}
  .tok-pocet{flex:1 1 0; text-align:right}
}

@media (max-width:640px){
  .tok-znacka{display:none}
  body.tok-otazka #formular > .aktivni{justify-content:flex-start; padding-top:calc(var(--nahled-vyska, 0px) + 72px)}
  .matice tr{display:flex; flex-wrap:wrap}
  .matice .radek-popis{width:100%}
  .matice td{flex:1 1 auto}
  .matice label{min-height:0; padding:9px 12px}
  .k-detail{padding-left:16px}
  .tok-zprava{font-size:14px}
  .tok-dal{padding:14px 20px}
  .navigace-stav{display:none}
  .navigace .tlacitko{flex:1}
}
@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation:none !important; transition:none !important}}

/* pruh náhledu na serveru (stav „návrh“) a drobnosti rozvržení */
.nahled-pruh{background:#111; color:#eee; text-align:center; padding:6px 12px; font-size:13px}
body.tok-otazka > .nahled-pruh, body.tok-rozhovor > .nahled-pruh{position:fixed; left:12px; bottom:88px; z-index:40; border-radius:8px; opacity:.85}
body.tok-rozhovor .tok-meta{display:none}

/* nenápadný odkaz do správy (úvod dotazníku, stránka „neprobíhá žádný dotazník“) */
.odkaz-sprava{margin:28px 0 0 !important; font-size:13px !important; opacity:.6}
.odkaz-sprava a{color:inherit}

/* úvod na samostatné obrazovce (rozvržení po stranách) */
.uvod-navigace{display:none}
body.jen-uvod .uvod-navigace{display:flex; justify-content:flex-start; margin-top:32px}
.uvod-zacit{padding:16px 44px; font-size:18px}
.uvod-znovu{display:block; margin:8px 0 0; padding:0; border:0; background:none; color:inherit; font-size:15px; text-decoration:underline; text-underline-offset:3px; cursor:pointer}
body.jen-uvod .strana-hlava, body.jen-uvod #formular, body.bez-uvodu .obsah > .uvod{display:none}
/* úvod se má na počítači vejít na jednu obrazovku i s tlačítkem Začít */
@media (min-width:1100px){
  body.jen-uvod .obsah{padding-top:24px}
  body.jen-uvod .uvod{margin-bottom:0}
  body.jen-uvod .uvod h1{font-size:clamp(28px,2.6vw,38px); margin-bottom:12px}
  body.jen-uvod .uvod p{max-width:none; margin-bottom:8px; line-height:1.45}
  body.jen-uvod .uvod .rozbalit{max-width:none; margin-top:12px}
  body.jen-uvod .uvod-navigace{margin-top:16px}
  body.jen-uvod .uvod-zacit{padding:11px 40px}
}

/* s obrázkem se obsah zvětšuje méně: text by jinak překrýval ilustraci a úvod by se nevešel na obrazovku */
@media (min-width:1600px) and (min-height:820px){:root.s-obrazkem{--zvetseni:1.1}}
@media (min-width:1880px) and (min-height:900px){:root.s-obrazkem{--zvetseni:1.15}}
@media (min-width:2400px) and (min-height:1300px){:root.s-obrazkem{--zvetseni:1.3}}
@media (min-width:3200px) and (min-height:1700px){:root.s-obrazkem{--zvetseni:1.6}}
/* obrázek na pozadí části (definice → „pozadi“): nahrazuje barvu palety; vrstva je fixní i na mobilech */
:root.s-obrazkem{--pozadi:#254672; --text:#fff; --vyber:#14315a; --na-vyberu:#fff; --akcent:#9ec5f2}
:root.s-obrazkem body{background:var(--pozadi)}
:root.s-obrazkem.s-svetlym{--text:#1f2329}
:root.s-obrazkem body::before{content:""; position:fixed; inset:0; z-index:-1; pointer-events:none;
  background-position:center; background-size:cover; background-repeat:no-repeat}
:root.s-obrazkem .hlavicka{background:color-mix(in srgb, var(--pozadi) 82%, transparent); -webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px)}
:root.s-obrazkem .volba-barev{display:none}
/* na tmavém obrázku hlavní tlačítko bílé, jinak by splynulo s pozadím */
:root.s-obrazkem:not(.s-svetlym) .tlacitko.hlavni{background:#fff; color:var(--vyber); border-color:#fff}
/* obrázky mají ilustraci vpravo: na širokých obrazovkách obsah do volné levé části */
@media (min-width: 1200px){
  :root.s-obrazkem .obsah{margin-left:max(20px, calc((9vw - 20px) / var(--zvetseni))); margin-right:auto}
  :root.s-obrazkem .hlavicka > *{margin-left:max(0px, calc((9vw - 40px) / var(--zvetseni) + 20px)); margin-right:auto}
}
/* úzké obrazovky: z obrázku jen volná levá část, ilustrace by ležela pod textem */
@media (max-width: 1000px){
  :root.s-obrazkem body::before{background-position:8% center}
}
/* podklad pod otázkami, nadpisem části, úvodem a lištou: text se nebije s ilustrací na pozadí */
:root.s-obrazkem .otazka, :root.s-obrazkem .strana-hlava, :root.s-obrazkem .obsah > .uvod, :root.s-obrazkem .navigace{
  background:color-mix(in srgb, var(--pozadi) 88%, transparent); -webkit-backdrop-filter:blur(10px); backdrop-filter:blur(10px);
  border-radius:20px; padding:24px 28px}
:root.s-obrazkem .otazka{margin-bottom:16px}
:root.s-obrazkem .strana-hlava{padding:20px 28px; margin-bottom:16px}
:root.s-obrazkem .obsah > .uvod{padding:32px 36px}
@media (min-width:1100px){:root.s-obrazkem body.jen-uvod .obsah > .uvod{padding:22px 32px}}
:root.s-obrazkem .navigace{padding:14px 18px}
@media (max-width:640px){
  :root.s-obrazkem .otazka, :root.s-obrazkem .strana-hlava, :root.s-obrazkem .obsah > .uvod{padding:18px 16px; border-radius:16px}
  :root.s-obrazkem .obsah{padding-inline:10px}
}
/* stránka se zprávou (poděkování, vyřazení) na obrázku: podklad a na širokých obrazovkách vlevo */
:root.s-obrazkem .zprava{background:color-mix(in srgb, var(--pozadi) 88%, transparent); -webkit-backdrop-filter:blur(10px); backdrop-filter:blur(10px);
  border-radius:20px; padding:36px 40px}
@media (min-width: 1200px){
  :root.s-obrazkem .zprava-obal{justify-items:start; padding-left:max(20px, calc((9vw - 20px) / var(--zvetseni))); zoom:var(--zvetseni)}
}