*{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%}
body{background:var(--plocha);color:var(--text);font-family:var(--font);
  font-weight:400;line-height:1.6;-webkit-font-smoothing:antialiased}
h1,h2,h3{font-weight:700;line-height:1.2;letter-spacing:-.01em;color:var(--text-silny)}
button,input,textarea,select{font:inherit;border-radius:var(--radius)}
:focus-visible{outline:3px solid var(--akcent);outline-offset:2px}
.obal{max-width:1200px;margin:0 auto;padding:var(--s6)}

/* ═══ formulář `/` ═══ */
/* Rozvržení „segmenty" je z vítězné varianty C prototypu Tasku 6 (beze změny geometrie —
   64 px dlaždice, mřížka s okrajem var(--linka), měřeno na 320/360/390 px). Vybraná
   dlaždice tu ale nese --akcent, ne --kat-1..4: ty barvy patří grafům (R18). */

.obal-formular{max-width:480px;margin:0 auto;
  padding:var(--s6) var(--s3) calc(var(--s20) + env(safe-area-inset-bottom))}
.obal-formular h1{font-size:20px;margin-bottom:var(--s2)}
.podtitul{color:var(--text-tichy);font-size:14px;margin-bottom:var(--s8)}

.legenda-polohy{margin-bottom:var(--s8)}
.legenda-polohy ul{list-style:none;font-size:13px;color:var(--text-tichy)}
.legenda-polohy li{margin-bottom:var(--s1);display:flex;gap:var(--s1);align-items:flex-start}
.legenda-polohy .ikona{flex:none}

.blok-nadpis{display:block;font-size:11px;font-weight:700;letter-spacing:.05em;
  text-transform:uppercase;color:var(--text-tichy);margin:var(--s8) 0 var(--s3);padding:0}
.legenda-polohy .blok-nadpis,.blok:first-of-type .blok-nadpis{margin-top:0}

.aktivita{border:none;margin:0 0 var(--s6);padding:0}
.aktivita-nazev{display:block;font-size:14px;line-height:1.4;margin-bottom:var(--s2);
  font-weight:700;color:var(--text-silny);padding:0}

/* Jednovýběrová dlaždicová skupina — poloha, vlastní poloha, důvod, roky, pracoviště.
   Počet sloupců řídí --sloupce, takže stačí jedna sada pravidel pro 2/3/4 volby. */
.segmenty{display:grid;grid-template-columns:repeat(var(--sloupce,4),1fr);
  gap:var(--s1);border:1px solid var(--linka)}
.segment-vstup{position:absolute;opacity:0;pointer-events:none}
.segment{display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:var(--s1);min-height:48px;padding:var(--s2) var(--s1);
  background:var(--plocha-alt);color:var(--text-tichy);cursor:pointer;
  text-align:center;font-size:12px;line-height:1.2}
/* U ikonových skupin (poloha, vlastní poloha) drží dlaždice 64 px — přesně ta výška,
   která byla změřená v prototypu na celém rozsahu 320–390 px. */
.segmenty-ikony .segment{min-height:64px}
.segment .ikona{font-size:20px;line-height:1}
.segment-vstup:checked + .segment{background:var(--akcent);color:var(--plocha);font-weight:700}
.segment-vstup:focus-visible + .segment{outline:3px solid var(--akcent);outline-offset:2px}

.sekce{border:none;margin:0 0 var(--s8);padding:0}
.sekce-otazka{display:block;font-size:15px;font-weight:700;color:var(--text-silny);
  line-height:1.4;margin-bottom:var(--s3);padding:0}

.pole{margin-bottom:var(--s4)}
.pole:last-child{margin-bottom:0}
.pole-stitek{display:block;font-size:13px;color:var(--text-tichy);margin-bottom:var(--s1)}

input[type=text],textarea{width:100%;min-height:48px;padding:var(--s2) var(--s3);
  background:var(--karta);border:1px solid var(--linka);color:var(--text-silny);
  font-family:var(--font);font-size:16px}   /* 16px, jinak Safari při focusu přiblíží stránku */
textarea{min-height:96px;resize:vertical}
input[type=text]::placeholder,textarea::placeholder{color:var(--text-tichy)}
input[type=text]:focus-visible,textarea:focus-visible{outline:3px solid var(--akcent);
  outline-offset:2px;border-color:var(--akcent)}

.napoveda{font-size:12px;color:var(--text-tichy);margin-top:var(--s1)}
.poznamka{font-size:12px;color:var(--text-tichy);margin-top:var(--s2);font-style:italic}

.odeslat{display:block;width:100%;min-height:48px;background:var(--akcent);
  color:var(--plocha);border:none;font-size:16px;font-weight:700;cursor:pointer;
  margin-top:var(--s4)}
.odeslat:hover,.odeslat:focus-visible{background:var(--akcent-hover)}
.odeslat:disabled{opacity:.6;cursor:default}

#stav{margin-top:var(--s3);font-size:14px;color:var(--text-tichy);min-height:1.4em}
#stav[data-chyba="1"]{color:var(--varovani)}

.podekovani{padding:var(--s8) 0}
.podekovani h2{font-size:20px;margin-bottom:var(--s3)}
.podekovani p{color:var(--text)}
.podekovani a{color:var(--akcent)}

/* ═══ /vysledky — plátno v sále, denní světlo venku, čtení z 8 m ═══ */
/* Velké typo, vysoký kontrast, žádné jemné odstíny (žádný text pod 60% krytí) —
   nese na sobě dramaturgii celého slotu. Sloupce mají ostré konce (--radius:0,
   brandový princip nad obecným doporučením dataviz skillu) a barvu jedné série
   --serie, nikdy --akcent (ta má na graf moc nízkou sytost, četla by jako šedá). */
.obal-vysledky{max-width:1800px;margin:0 auto;
  padding:var(--s12) var(--s8);display:flex;flex-direction:column;gap:var(--s16)}

.counter{text-align:center}
.counter .cislo{font-size:clamp(72px,14vw,180px);font-weight:700;line-height:1;
  color:var(--akcent);font-variant-numeric:tabular-nums}
.counter .stitek{font-size:28px;color:var(--text);margin-top:var(--s2)}

.sloupec-cinnosti h2{font-size:44px;margin-bottom:var(--s2)}
.podnadpis-cinnosti{font-size:24px;color:var(--text);margin-bottom:var(--s8)}
#graf-nebyl-cas svg{display:block}

/* Chybový stav je tichý proužek v rohu, ne přes půl plátna — poslední platná
   data zůstávají hlavním obsahem obrazovky (viz komentář ve vysledky.js). */
#chyba{position:fixed;right:var(--s4);bottom:var(--s4);max-width:440px;
  background:var(--karta);border:1px solid var(--varovani);color:var(--text-silny);
  font-size:16px;line-height:1.4;padding:var(--s3) var(--s4)}
#chyba[hidden]{display:none}