/*
 * Cílová skupina zahrnuje lidi nad sedmdesát — velká typografie, vysoký kontrast
 * a jednoznačné akce nejsou dodělávka, jsou základ. Viz Dokumentace/05-Architektura.md.
 */

:root {
  --barva-text: #1a1a1a;
  --barva-pozadi: #ffffff;
  --barva-hlavni: #14532d;
  --barva-hlavni-text: #ffffff;
  --barva-ramecek: #6b6b6b;
  --barva-fokus: #0b5fff;
  --mereni-pisma: 1;
}

* {
  box-sizing: border-box;
}

html {
  /* Respektuje systémové nastavení velikosti písma; --mereni-pisma je náš vlastní přepínač navrch. */
  font-size: calc(100% * var(--mereni-pisma));
}

body {
  margin: 0;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  font-size: 1.25rem;
  line-height: 1.5;
  color: var(--barva-text);
  background: var(--barva-pozadi);
}

:focus-visible {
  outline: 3px solid var(--barva-fokus);
  outline-offset: 2px;
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.preskocit-fokus {
  position: absolute;
  left: -999px;
  top: 0;
  background: var(--barva-hlavni);
  color: var(--barva-hlavni-text);
  padding: 0.75rem 1rem;
  z-index: 10;
}

.preskocit-fokus:focus {
  left: 0;
}

.hlavicka {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  padding: 0.75rem 1rem;
  border-bottom: 1px solid #e0e0e0;
}

.tlacitko-ikona {
  min-width: 48px;
  min-height: 48px;
  border: 2px solid var(--barva-ramecek);
  background: var(--barva-pozadi);
  border-radius: 8px;
  font-size: 1.25rem;
  cursor: pointer;
}

.progres {
  display: flex;
  gap: 0.6rem;
  list-style: none;
  margin: 0;
  padding: 0;
}

.progres li {
  width: 14px;
  height: 14px;
  border-radius: 50%;
  border: 2px solid var(--barva-ramecek);
  background: transparent;
}

/* Barva není jediný nositel informace — aktivní krok má i tlustší okraj a je "current". */
.progres li.aktivni {
  background: var(--barva-hlavni);
  border-color: var(--barva-hlavni);
  border-width: 3px;
}

.progres li.hotovo {
  background: var(--barva-ramecek);
}

.velikost-pisma {
  display: flex;
  gap: 0.4rem;
}

.velikost-pisma button {
  min-width: 44px;
  min-height: 44px;
  border: 2px solid var(--barva-ramecek);
  background: var(--barva-pozadi);
  border-radius: 8px;
  font-size: 1rem;
  cursor: pointer;
}

main {
  flex: 1;
  padding: 1.5rem 1.25rem;
  max-width: 40rem;
  margin: 0 auto;
  width: 100%;
}

h1 {
  font-size: 1.9rem;
  margin: 0 0 1rem;
}

h2 {
  font-size: 1.3rem;
}

.text-uvod {
  font-size: 1.35rem;
}

.dva-bloky {
  display: grid;
  gap: 1rem;
}

@media (min-width: 40rem) {
  .dva-bloky {
    grid-template-columns: 1fr 1fr;
  }
}

.blok {
  border: 2px solid var(--barva-ramecek);
  border-radius: 12px;
  padding: 1rem;
}

.blok-umim {
  border-color: var(--barva-hlavni);
}

.blok ul {
  margin: 0.5rem 0 0;
  padding-left: 1.2rem;
}

.blok li {
  margin-bottom: 0.5rem;
}

.prepinac {
  display: flex;
  gap: 0.75rem;
  margin: 1rem 0;
}

.prepinac-volba {
  flex: 1;
  min-height: 56px;
  font-size: 1.15rem;
  border: 2px solid var(--barva-ramecek);
  border-radius: 10px;
  background: var(--barva-pozadi);
  cursor: pointer;
}

.prepinac-volba[aria-pressed="true"] {
  background: var(--barva-hlavni);
  color: var(--barva-hlavni-text);
  border-color: var(--barva-hlavni);
  font-weight: 600;
}

.poznamka {
  font-style: italic;
}

.tri-vety {
  padding-left: 1.2rem;
}

.tri-vety li {
  margin-bottom: 0.75rem;
}

.odkaz-vic {
  color: var(--barva-fokus);
  cursor: pointer;
  font-size: 1.1rem;
}

.rozbaleni-vic p {
  margin-top: 0.5rem;
}

.paticka {
  display: flex;
  gap: 0.75rem;
  padding: 1rem 1.25rem 1.5rem;
  border-top: 1px solid #e0e0e0;
  max-width: 40rem;
  margin: 0 auto;
  width: 100%;
}

.tlacitko-hlavni,
.tlacitko-sekundarni {
  min-height: 56px;
  flex: 1;
  font-size: 1.2rem;
  border-radius: 10px;
  cursor: pointer;
}

.tlacitko-hlavni {
  background: var(--barva-hlavni);
  color: var(--barva-hlavni-text);
  border: 2px solid var(--barva-hlavni);
  font-weight: 600;
}

.tlacitko-sekundarni {
  background: var(--barva-pozadi);
  color: var(--barva-text);
  border: 2px solid var(--barva-ramecek);
}

.tlacitko-plna-sirka {
  width: 100%;
  margin-top: 1rem;
}

/* Obrazovka 5 — volba hloubky */

.karty-hloubky {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  margin: 1.5rem 0;
}

.karta-hloubky {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.35rem;
  text-align: left;
  min-height: 56px;
  padding: 1rem 1.25rem;
  border: 2px solid var(--barva-ramecek);
  border-radius: 12px;
  background: var(--barva-pozadi);
  cursor: pointer;
}

.karta-hloubky.karta-doporucena {
  border-color: var(--barva-hlavni);
  border-width: 3px;
}

.karta-cas {
  font-size: 0.95rem;
  color: var(--barva-ramecek);
}

/* Obrazovka 5b — volba persony */

.karty-persony {
  display: grid;
  gap: 1rem;
  margin: 1.5rem 0;
}

@media (min-width: 40rem) {
  .karty-persony {
    grid-template-columns: 1fr 1fr;
  }
}

.karta-persona {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.35rem;
  text-align: left;
  min-height: 56px;
  padding: 1rem 1.25rem;
  border: 2px solid var(--barva-ramecek);
  border-radius: 12px;
  background: var(--barva-pozadi);
  cursor: pointer;
}

.karta-persona .karta-nazev {
  font-size: 1.2rem;
  font-weight: 600;
}

.karta-persona .karta-popis {
  font-size: 1rem;
}

.karta-nazev {
  font-size: 1.3rem;
  font-weight: 600;
}

.karta-popis {
  font-size: 1rem;
}

/* Obrazovka 6 — dialog */

/* :not([hidden]) — jinak třídní pravidlo přebije UA styl [hidden]{display:none}
   kvůli vyšší specificitě a JS přepínání viditelnosti by přestalo fungovat. */
.obrazovka-dialog:not([hidden]) {
  display: flex;
  flex-direction: column;
  height: 100%;
}

.stav-spojeni {
  font-size: 0.95rem;
  color: var(--barva-ramecek);
  margin: 0 0 1rem;
}

/* Barva není jediný nositel informace — vypadek má i vlastní text a tučné písmo. */
.stav-spojeni-vypadek {
  color: #92400e;
  font-weight: 600;
}

.zpravy {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  margin-bottom: 1rem;
}

.zprava {
  max-width: 85%;
  padding: 0.75rem 1rem;
  border-radius: 12px;
  margin: 0;
  font-size: 1.15rem;
}

.zprava-ja {
  align-self: flex-end;
  background: var(--barva-hlavni);
  color: var(--barva-hlavni-text);
}

.zprava-libuse {
  align-self: flex-start;
  border: 2px solid var(--barva-ramecek);
}

.zprava-system {
  align-self: center;
  font-style: italic;
  border: 2px dashed var(--barva-ramecek);
  color: var(--barva-text);
}

.vstup-tahu {
  display: flex;
  gap: 0.5rem;
  align-items: center;
}

.tlacitko-mikrofon {
  min-width: 56px;
  min-height: 56px;
  font-size: 1.4rem;
  border: 2px solid var(--barva-ramecek);
  border-radius: 50%;
  background: var(--barva-pozadi);
  cursor: pointer;
}

.tlacitko-mikrofon:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

/* "Poslouchám" — barva není jediný nositel informace, proto i popisek a puls. */
.tlacitko-mikrofon[aria-pressed="true"] {
  background: #b91c1c;
  border-color: #b91c1c;
  color: var(--barva-hlavni-text);
  animation: mikrofon-puls 1.4s ease-in-out infinite;
}

@keyframes mikrofon-puls {
  0%, 100% {
    box-shadow: 0 0 0 0 rgba(185, 28, 28, 0.4);
  }
  50% {
    box-shadow: 0 0 0 10px rgba(185, 28, 28, 0);
  }
}

.tlacitko-prehrat {
  min-width: 40px;
  min-height: 40px;
  margin-top: 0.5rem;
  font-size: 1.1rem;
  border: 2px solid var(--barva-ramecek);
  border-radius: 8px;
  background: var(--barva-pozadi);
  cursor: pointer;
}

.pole-tahu {
  flex: 1;
  min-height: 56px;
  font-size: 1.15rem;
  padding: 0 1rem;
  border: 2px solid var(--barva-ramecek);
  border-radius: 10px;
}

.tlacitko-odeslat {
  flex: none;
  width: auto;
  padding: 0 1.5rem;
}

/* ─────────────────────────────────────────────── Panel voleb (tok dialogu)

   Teze, dotazník, výběr tématu a předvyplněné návrhy. Tlačítka vykresluje kód
   podle stavu ze serveru (web/src/tok.js), ne model — jejich znění je závazný
   obsah z podkladu.

   Cílový segment (Milan, Marie, Jaroslav, Petra) má nízkou digitální důvěru,
   takže: velké dotykové plochy, žádné ikony bez popisku, viditelný fokus.
*/

.panel-voleb {
  border-top: 2px solid var(--barva-ramecek);
  padding: 1rem 0;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.panel-nadpis {
  font-size: 1rem;
  font-weight: 600;
  margin: 0;
}

.panel-nadpis:empty {
  display: none;
}

.panel-obsah {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.teze {
  border: 2px solid var(--barva-ramecek);
  border-radius: 8px;
  padding: 0.75rem;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.teze-text {
  margin: 0;
  font-size: 1.05rem;
}

.teze-volby,
.volby-tlacitka {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

/* Obec má 27 položek — sloupec se scrollem, ne řada tlačítek přes obrazovku. */
.volby-seznam {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  max-height: 15rem;
  overflow-y: auto;
  border: 2px solid var(--barva-ramecek);
  border-radius: 8px;
  padding: 0.5rem;
}

.tlacitko-volba {
  min-height: 2.75rem;
  padding: 0.5rem 0.9rem;
  border: 2px solid var(--barva-ramecek);
  border-radius: 8px;
  background: var(--barva-pozadi);
  color: var(--barva-text);
  font: inherit;
  cursor: pointer;
}

.tlacitko-volba:hover {
  border-color: var(--barva-hlavni);
}

.volby-temata {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.tlacitko-tema {
  min-height: 3rem;
  padding: 0.75rem 1rem;
  text-align: left;
  border: 2px solid var(--barva-ramecek);
  border-radius: 8px;
  background: var(--barva-pozadi);
  color: var(--barva-text);
  font: inherit;
  cursor: pointer;
}

/*
  Model B: zvýraznění odráží, co člověk sám řekl („dělá mi to starost", „chci
  napsat víc"). NIC nezavírá — probrané téma jen zšedne, ale zůstává klikatelné.
*/
.tlacitko-tema-zvyraznene {
  border-color: var(--barva-hlavni);
  border-width: 3px;
  font-weight: 600;
}

.tlacitko-tema-probrane {
  opacity: 0.7;
}

.stitek-probrane {
  display: block;
  font-size: 0.85rem;
  font-weight: 400;
  opacity: 0.8;
}

.ovladani-dialogu {
  display: flex;
  gap: 0.5rem;
  padding: 0.5rem 0;
}

/*
  Zvolená reakce na tezi.

  Bez viditelného stavu vypadá klik na „Souhlasím" jako by tlačítko nefungovalo —
  panel se překreslí do stejné podoby a jediné, co se změnilo, je neviditelný stav
  na serveru. U cílového segmentu s nízkou digitální důvěrou (Milan, Marie) je to
  přesně ten typ ticha, po kterém člověk odejde.

  Zvýraznění nese barva I tvar (silnější rámeček, ✓), ne jen barva samotná —
  kvůli barvosleposti a kontrastu na slabších displejích.
*/
.tlacitko-volba-zvolena {
  background: var(--barva-hlavni);
  color: var(--barva-hlavni-text);
  border-color: var(--barva-hlavni);
  border-width: 3px;
  font-weight: 600;
}

.tlacitko-volba-zvolena::before {
  content: "✓ ";
}

.tlacitko-volba-zvolena:hover {
  border-color: var(--barva-hlavni);
}

/* Zodpovězená teze ustoupí do pozadí — je hotová, ale pořád čitelná a přepsatelná. */
.teze-zodpovezena {
  border-color: var(--barva-hlavni);
  background: color-mix(in srgb, var(--barva-hlavni) 4%, var(--barva-pozadi));
}

/* ───────────────────────────────────────────── Z5 — zpětná vazba na nástroj

   Plovoucí tlačítko mimo <header>/<footer>, aby přežilo dokoncitOnboarding()
   a bylo dostupné napříč všemi fázemi (viz app.js, index.html).
*/

.tlacitko-zpetna-vazba {
  position: fixed;
  right: 1rem;
  bottom: 1rem;
  z-index: 20;
  min-height: 48px;
  padding: 0.6rem 1rem;
  font-size: 1rem;
  border: 2px solid var(--barva-ramecek);
  border-radius: 999px;
  background: var(--barva-pozadi);
  color: var(--barva-text);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
  cursor: pointer;
}

.tlacitko-zpetna-vazba:hover {
  border-color: var(--barva-hlavni);
}

.dialog-zpetna-vazba {
  width: min(28rem, calc(100vw - 2rem));
  border: 2px solid var(--barva-ramecek);
  border-radius: 12px;
  padding: 1.25rem;
  color: var(--barva-text);
  background: var(--barva-pozadi);
}

.dialog-zpetna-vazba::backdrop {
  background: rgba(0, 0, 0, 0.4);
}

.dialog-zpetna-vazba h2 {
  margin-top: 0;
}

.zpetna-vazba-info {
  font-size: 1rem;
  color: var(--barva-ramecek);
}

.zpetna-vazba-textarea {
  width: 100%;
  font: inherit;
  padding: 0.75rem;
  border: 2px solid var(--barva-ramecek);
  border-radius: 10px;
  resize: vertical;
}

.zpetna-vazba-stav {
  min-height: 1.5rem;
  font-size: 1rem;
  margin: 0.5rem 0 0;
}

.zpetna-vazba-tlacitka {
  display: flex;
  gap: 0.75rem;
  margin-top: 0.75rem;
}