/* poopik.cz — kvíz.
   Tenká vrstva nad design systémem Organic (ds/organic.css).
   Pravidlo: žádné hexy, žádná jména fontů, žádné px, které už nesou tokeny.
   Terakota = naléhavost a výzva k akci. Šalvěj = uklidnění a malé výhry. */

/* Písma řeší přímo design systém: --font-heading je Baloo 2 (800),
   --font-logo je Caprasimo a patří výhradně na logotyp. Zdejší override
   už není potřeba — opraveno ve zdrojové identitě 30. 7. 2026. */

/* Systémová .card nastavuje display:flex, což přebije prohlížečové
   [hidden]{display:none}. Bez tohohle by byly vidět všechny kroky kvízu naráz. */
[hidden] { display: none !important; }

/* — hlavička se značkou — */
.brand {
  max-width: 660px;
  margin: 0 auto;
  padding: var(--space-6) var(--space-4) var(--space-4);
}
.brand-lockup,
.brand-lockup:hover {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  text-decoration: none;
  color: var(--color-text);
}
.brand-word {
  font-family: var(--font-logo);
  font-weight: 400;
  font-size: 22px;
  color: var(--color-text);
}
.brand-tld {
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 14px;
  color: var(--color-accent-700);
}

/* — plátno — */
.wrap {
  max-width: 660px;
  margin: 0 auto;
  padding: 0 var(--space-4) calc(var(--space-8) * 2);
}

.panel {
  padding: var(--space-6);
  gap: 0;
}

h1 {
  font-size: clamp(32px, 7vw, 42px);
  margin-bottom: var(--space-3);
}
h2 { margin-bottom: var(--space-3); }

.lead {
  font-size: 18px;
  line-height: 1.6;
}

.tags {
  display: flex;
  gap: var(--space-2);
  margin-bottom: var(--space-4);
}

.step {
  font-size: 13px;
  color: color-mix(in srgb, var(--color-text) 55%, transparent);
  margin-bottom: var(--space-2);
}

.qnote { font-size: 14px; }

.fineprint {
  font-size: 12px;
  color: color-mix(in srgb, var(--color-text) 50%, transparent);
  margin: var(--space-4) 0 0;
}

/* velká varianta systémového tlačítka — hero a potvrzení */
.btn-lg {
  font-size: 17px;
  padding: var(--space-3) var(--space-6);
  margin-top: var(--space-2);
}

/* — postup — */
.progress {
  height: 5px;
  background: color-mix(in srgb, var(--color-text) 10%, transparent);
  border-radius: 999px;
  overflow: hidden;
  margin-bottom: var(--space-4);
}
.progress-bar {
  height: 100%;
  width: 0;
  background: var(--color-accent);
  border-radius: 999px;
  transition: width .25s ease;
}

/* — odpovědi — */
.options {
  display: grid;
  gap: var(--space-2);
  margin-top: var(--space-4);
}

.opt {
  display: block;
  width: 100%;
  text-align: left;
  font: inherit;
  color: inherit;
  cursor: pointer;
  background: var(--color-neutral-100);
  border: 1px solid transparent;
  border-radius: var(--radius-lg);
  padding: var(--space-3) var(--space-4);
  transition: background .15s, border-color .15s, transform .06s;
}
.opt:hover {
  background: var(--color-accent-100);
  border-color: var(--color-accent-300);
}
.opt:active {
  background: var(--color-accent-200);
  transform: scale(.995);
}

/* — zdravotní zaškrtávátka — */
.checks {
  display: grid;
  gap: var(--space-2);
  margin: var(--space-4) 0 var(--space-6);
}
.check {
  display: flex;
  gap: var(--space-3);
  align-items: flex-start;
  background: var(--color-neutral-100);
  border: 1px solid transparent;
  border-radius: var(--radius-lg);
  padding: var(--space-3) var(--space-4);
  cursor: pointer;
  font-size: 15px;
}
.check:hover { border-color: var(--color-accent-300); }
.check input {
  flex: none;
  width: 19px;
  height: 19px;
  margin: 2px 0 0;
  accent-color: var(--color-accent);
}

/* — formulář — */
#emailForm {
  display: grid;
  gap: var(--space-2);
  margin-top: var(--space-4);
}
.input { min-height: 48px; font-size: 16px; background: var(--color-neutral-100); }

/* — výsledek — */
#rbody { font-size: 16px; }

/* Malé výhry a konkrétní kroky — šalvěj. */
.steps {
  background: var(--color-accent-2-100);
  border-radius: var(--radius-lg);
  padding: var(--space-4) var(--space-6);
  margin: var(--space-6) 0;
}
.steps h3 {
  margin: 0 0 var(--space-3);
  font-size: 18px;
  color: var(--color-accent-2-800);
}
.steps ol { margin: 0; padding-left: var(--space-4); }
.steps li { margin-bottom: var(--space-2); }
.steps li:last-child { margin-bottom: 0; }

/* U zdravotního výsledku se tón přepíná do vážné polohy — tady se nežertuje. */
.result-flag .steps { background: var(--color-accent-100); }
.result-flag .steps h3 { color: var(--color-accent-800); }

/* Vztek a vina rodiče — uklidnění, tedy šalvěj. */
.vent {
  border-left: 3px solid var(--color-accent-2-500);
  padding: var(--space-1) 0 var(--space-1) var(--space-4);
  margin: var(--space-6) 0;
}
.vent h3 { margin: 0 0 var(--space-2); font-size: 18px; }

/* Výzva k akci — terakota. */
.cta {
  border-top: 1px solid var(--color-divider);
  padding-top: var(--space-6);
  margin-top: var(--space-6);
}
.cta h3 {
  margin: 0 0 var(--space-2);
  font-size: 20px;
  color: var(--color-accent-700);
}

.debug {
  margin-top: var(--space-6);
  padding: var(--space-3);
  background: var(--color-neutral-200);
  border-radius: var(--radius-md);
  font-size: 12px;
  white-space: pre-wrap;
  color: var(--color-neutral-700);
}

@media (max-width: 560px) {
  .brand { padding: var(--space-4) var(--space-3) var(--space-3); }
  .wrap { padding: 0 var(--space-3) var(--space-8); }
  .panel { padding: var(--space-4); }
  .steps { padding: var(--space-4); }
}