/* =========================================================
   Relácia ON AIR — vizuální svět úvodní stránky V2
   ---------------------------------------------------------
   Sezení je relace: živé vysílání s Pastierom. Stránka je
   rozhlasové studio, ne AI landing.

   Barvy jsou pevně dané (tokeny ze style.css), mění se role:
     ink      pult a studio
     paper    tištěný programový list, páska s popisem
     yellow   jen to, co svítí: kontrolka ON AIR, táhla, ticker
     clay     červená zóna: REC, „nie je to pre teba"
   Písmo: Archivo (šířková osa: rozšířené na pultu, normální
   v textu, zúžené na páskách), DSEG7 jen pro čas.

   Načítá se jen na index.html, po svet.css (společný základ všech
   stránek). Tady je jen to, co patří úvodní stránce a oknu hovoru.
   ========================================================= */

/* ---------- Hero: pult a monitor ---------- */
.hero__glow { display: none; }
.hero__inner { padding-block: 3rem 4rem; gap: 3rem; }
@media (min-width: 640px) { .hero__inner { padding-block: 4.5rem 5rem; } }
@media (min-width: 1024px) {
  .hero__inner {
    grid-template-columns: minmax(0, 1.14fr) minmax(0, 0.86fr);
    gap: clamp(2.5rem, 5vw, 4.5rem);
    padding-bottom: 5.5rem;
  }
}

.hero h1 {
  margin-top: 0;
  font-size: clamp(2.1rem, 3.9vw, 3.55rem);
  font-stretch: 110%;
  line-height: 0.95;
  letter-spacing: -0.04em;
}
.hero h1 em { font-style: normal; }
.hero__lede { margin-top: 1.6rem; font-size: 1.08rem; line-height: 1.6; max-width: 33rem; }

/* Tři nároky jako tři kanály s rozsvícenou diodou. */
.hero__claims { border-left: 0; padding-left: 0; margin-top: 1.6rem; gap: 0.7rem; }
.hero__claims li {
  position: relative;
  padding-left: 1.35rem;
  font-size: 0.98rem;
}
.hero__claims li::before {
  content: "";
  position: absolute; left: 0; top: 0.52em;
  width: 0.5rem; height: 0.5rem; border-radius: 50%;
  background: var(--yellow);
}
.hero__claims strong { font-weight: 800; }

.hero__cta { margin-top: 2rem; gap: 0.9rem 1rem; align-items: stretch; }
.hero__cta .btn--ghost { align-self: stretch; padding-inline: 1.35rem; }

/* REC: hovory sú nahrávané. Statická červená tečka, žiadne blikanie. */
.hero__note { margin-top: 1.4rem; font-size: 0.86rem; color: var(--sand); }
.hero__note .dot {
  width: 0.5rem; height: 0.5rem;
  background: var(--clay);
}

/* Monitor: Pastier z teček za sklem pultu. */
.monitor {
  position: relative;
  width: 100%;
  max-width: 34rem;
  margin-inline: auto;
  padding: 0.7rem;
  border: 1px solid var(--ink-line);
  border-radius: 18px;
  background: var(--ink-soft);
  box-shadow: inset 0 1px 0 rgba(242, 237, 228, .05);
}
@media (min-width: 1024px) { .monitor { max-width: none; margin-inline: 0; } }
.monitor__bar {
  display: flex; align-items: center; justify-content: space-between;
  padding: 0.2rem 0.2rem 0.7rem;
}
.monitor .hero__portrait {
  max-width: none; margin: 0;
  aspect-ratio: 1;
  border-radius: 10px;
  overflow: hidden;
  background: var(--ink);
}
.monitor .hero__portrait::before { content: none; }
.monitor .hero__portrait img { width: 100%; height: 100%; object-fit: cover; }
.monitor__foot {
  display: flex; align-items: center; gap: 1rem;
  padding: 0.85rem 0.3rem 0.25rem;
}
.monitor__note { font-size: 0.9rem; line-height: 1.45; color: var(--sand); max-width: 22rem; }

/* Studiové hodiny: zhasnuté segmenty jsou nakreslené taky. */
.clock {
  position: relative; flex: none;
  font: 700 1.7rem/1 var(--font-seg);
  letter-spacing: 0.04em;
  color: var(--yellow);
}
.clock__ghost { color: var(--yellow); opacity: 0.1; }
.clock__now { position: absolute; inset: 0; text-align: right; }

/* ---------- Ticker témat: žlutý pás ---------- */
.topics {
  border: 0;
  background: var(--yellow);
  padding-block: 0.95rem;
  -webkit-mask-image: none; mask-image: none;
}
.topics__group {
  gap: 1.75rem; padding-right: 1.75rem;
  font: 800 1rem/1 var(--font-body);
  font-stretch: 82%;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: var(--ink);
}
.topics__group b { font-weight: 800; color: var(--ink); }
.topics__group i { width: 0.45rem; height: 0.45rem; border-radius: 1px; background: var(--ink); opacity: 1; transform: rotate(45deg); }

/* ---------- Sekce ---------- */
.section__head h2 {
  font-size: clamp(2rem, 4.4vw, 3.5rem);
  line-height: 0.97;
  letter-spacing: -0.04em;
}
.section__head h2::after, .section__head--sub h3::after { content: none; }
.section__head p { font-size: 1.04rem; line-height: 1.65; }
.section__head--sub h3 { font-size: clamp(1.6rem, 3.2vw, 2.3rem); letter-spacing: -0.035em; }
.section--band { background: var(--ink-soft); }

/* ---------- Kde si zaseknutý: výběr a teleprompter ---------- */
.starter__opt {
  font-family: var(--font-body);
  font-stretch: 100%;
  font-weight: 700;
  letter-spacing: -0.015em;
  padding-left: 1.6rem;
}
.starter__opt > span::before {
  content: "";
  position: absolute; left: 0; top: 50%;
  width: 0.55rem; height: 0.55rem; margin-top: -0.275rem;
  border-radius: 50%;
  background: var(--ink-line);
  transition: background-color 160ms var(--e-out), box-shadow 220ms var(--e-out);
}
.starter__opt[aria-checked="true"] > span::before {
  background: var(--yellow);
}
.starter__opt[aria-checked="true"] > span { transform: none; }
.starter__opt > span { position: static; }

.starter__stage {
  border-radius: 14px;
  background: var(--ink);
  box-shadow: inset 0 1px 0 rgba(242, 237, 228, .04);
  padding-top: clamp(2.5rem, 4.5vw, 3.25rem);
}
.starter__stage::before {
  content: "Prompter";
  position: absolute; top: 0.9rem; left: 1rem;
  padding: 0.2rem 0.5rem 0.18rem;
  border-radius: 2px;
  background: var(--paper); color: var(--ink);
  font: 800 0.72rem/1 var(--font-body); font-stretch: 72%;
  letter-spacing: 0.12em; text-transform: uppercase;
  transform: rotate(-1.2deg);
}
.starter__q {
  font-family: var(--font-body);
  font-stretch: 100%;
  font-weight: 700;
  font-size: clamp(1.45rem, 1.05rem + 1.45vw, 2.2rem);
  line-height: 1.26;
  letter-spacing: -0.025em;
}
.starter__who .logo__mark { border-radius: 4px; }
.starter__wave i { background: var(--yellow); border-radius: 1px; width: 4px; }

/* ---------- Dokumenty: přepis, ne bubliny ---------- */
.upload__list li::before { background: var(--yellow); border-radius: 50%; width: 0.45rem; height: 0.45rem; }
.hint { border-radius: 10px; }
.docdemo { border-radius: 14px; background: var(--ink); }
.docdemo__file { border-radius: 10px; }
.file-chip__name { font-weight: 700; font-stretch: 90%; }
.docdemo__page { font-variant-numeric: tabular-nums; font-weight: 700; }
.docdemo .bubble {
  display: grid;
  grid-template-columns: 5.5rem minmax(0, 1fr);
  column-gap: 1rem;
  padding: 0.9rem 0 0;
  border: 0; border-top: 1px solid var(--ink-line);
  border-radius: 0;
  background: none;
  font-size: 0.98rem;
}
.docdemo .bubble--you { justify-self: stretch; max-width: none; }
.docdemo .bubble > p { grid-column: 2; }
.docdemo .bubble__who {
  grid-column: 1; grid-row: 1 / span 3;
  margin: 0.15rem 0 0;
  font: 800 0.72rem/1.2 var(--font-body); font-stretch: 72%;
  letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--sand);
}
.docdemo .bubble--ai .bubble__who { color: var(--yellow); }
.docdemo .bubble--ai p { color: var(--paper); }
@media (max-width: 520px) {
  .docdemo .bubble { grid-template-columns: minmax(0, 1fr); }
  .docdemo .bubble__who { grid-row: auto; margin-bottom: 0.4rem; }
  .docdemo .bubble > p { grid-column: 1; }
}

/* ---------- Pult hovoru (#hovor) ---------- */
.agent-panel {
  border-radius: 20px;
  background: var(--ink-soft);
  box-shadow: inset 0 1px 0 rgba(242, 237, 228, .05);
}
.agent-panel.halftone-card::after { content: none; }
.agent-panel h3 { font-stretch: 110%; font-weight: 800; letter-spacing: -0.035em; }
.agent-locked .btn--onair { margin-inline: auto; }
.agent-locked h3 { font-size: clamp(1.8rem, 3.6vw, 2.6rem); }
.agent-panel__icon {
  border-radius: 12px;
  background: var(--ink);
  border: 1px solid var(--ink-line);
}
.agent-panel__icon::before { content: none; }
.agent-panel__icon svg { stroke: var(--sand); }

/* Program: klávesy s diodou. */
.call-topics span {
  position: relative;
  padding: 0.55rem 0.9rem 0.55rem 1.7rem;
  border-radius: 8px;
  background: var(--ink);
  font-weight: 600;
}
.call-topics span::before {
  content: ""; position: absolute; left: 0.75rem; top: 50%;
  width: 0.45rem; height: 0.45rem; margin-top: -0.225rem; border-radius: 50%;
  background: var(--ink-line);
  transition: background-color 160ms var(--e-out);
}
.call-topics input:checked + span { border-color: var(--yellow); background: var(--ink); color: var(--paper); }
.call-topics input:checked + span::before { background: var(--yellow); }

/* Tón: zvolený plný, ostatní jen čárkovaný obrys. */
.call-mode__seg { gap: 0.4rem; padding: 0; border: 0; background: none; }
.call-mode__thumb { display: none; }
.call-mode__seg span {
  padding: 0.65rem 0.5rem;
  border: 1.5px dashed var(--sand-deep);
  border-radius: 8px;
  font-weight: 700;
  color: var(--paper-dim);
  transition: background-color 160ms var(--e-out), border-color 160ms var(--e-out), color 160ms var(--e-out);
}
.call-mode__seg input:checked + span { border-style: solid; border-color: var(--yellow); background: var(--yellow); color: var(--ink); }
@media (hover: hover) and (pointer: fine) {
  .call-mode__seg label:hover input:not(:checked) + span { border-color: var(--paper-dim); color: var(--paper); }
}
.call-start__cta .btn--onair { width: 100%; min-width: 0; padding: 0.8rem 1.25rem 0.95rem; }
.call-start__cta .btn--onair .btn--onair__row { font-size: 1.15rem; }

/* ---------- Ohlasy ---------- */
.voice p {
  font-family: var(--font-display);
  font-stretch: 104%;
  font-weight: 700;
  letter-spacing: -0.035em;
  line-height: 1.12;
}
.voices__names button { font-weight: 700; }

/* ---------- Pre koho to nie je ---------- */
.nots li { font-size: 1.04rem; }

/* =========================================================
   Okno hovoru: živé vysílání
   ========================================================= */
.call__state {
  border-radius: 6px;
  font-weight: 700;
  transition: background-color 200ms var(--e-out), color 200ms var(--e-out), border-color 200ms var(--e-out);
}
.call[data-stav="speaking"] .call__state,
.call[data-stav="listening"] .call__state {
  background: var(--yellow); border-color: var(--yellow); color: var(--ink);
}
.call[data-stav="speaking"] .call__state::before,
.call[data-stav="listening"] .call__state::before {
  content: "On air";
  font: 800 0.72rem/1 var(--font-body); font-stretch: 72%;
  letter-spacing: 0.16em; text-transform: uppercase;
  padding-right: 0.55rem; margin-right: 0.1rem;
  border-right: 1px solid color-mix(in srgb, var(--ink) 30%, var(--yellow));
}
.call[data-stav="speaking"] .call__meter i,
.call[data-stav="listening"] .call__meter i { background: var(--ink); }

.call__time {
  position: relative;
  font: 700 1.05rem/1 var(--font-seg);
  letter-spacing: 0.04em;
  color: var(--yellow);
}
.call__time::before {
  content: "88:88";
  position: absolute; right: 0; top: 0;
  opacity: 0.1;
}

.call__agent {
  font-family: var(--font-body);
  font-stretch: 100%;
  font-weight: 600;
  letter-spacing: -0.02em;
}
.call__msg--agent p { font-family: var(--font-body); font-weight: 500; }
.call__who { font: 800 0.72rem/1.2 var(--font-body); font-stretch: 72%; letter-spacing: 0.14em; text-transform: uppercase; }
.call__msg--user p { border-radius: 10px; }

.call__controls { border-radius: 14px; box-shadow: inset 0 1px 0 rgba(242, 237, 228, .05); }
.call__btn { border-radius: 10px; font-weight: 700; }
.call__send, .call__composer input { border-radius: 10px; }
.call__tasks h3 { font-family: var(--font-display); font-stretch: 108%; font-weight: 800; }
.call__sheet { border-radius: 16px; }
.call__sheet h2 { font-family: var(--font-display); font-stretch: 110%; font-weight: 800; letter-spacing: -0.03em; }

/* ---------- Omezený pohyb ---------- */
@media (prefers-reduced-motion: reduce) {
  .lamp, .lamp i, .btn--onair { transition: none; }
}

/* ---------- Prázdné pravé poloviny: obsah vedle nadpisu ---------- */
@media (min-width: 1024px) {
  #dokumenty .wrap {
    display: grid;
    grid-template-columns: minmax(0, 0.92fr) minmax(0, 1.08fr);
    column-gap: clamp(2.5rem, 5vw, 4.5rem);
    align-items: start;
  }
  #dokumenty .upload__layout { display: contents; }
  #dokumenty .section__head { grid-column: 1; grid-row: 1; }
  #dokumenty .upload__layout > div:first-child { grid-column: 1; grid-row: 2; margin-top: 2rem; }
  #dokumenty .docdemo { grid-column: 2; grid-row: 1 / span 2; }

  #citaty .wrap {
    display: grid;
    grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr);
    column-gap: clamp(2.5rem, 5vw, 4.5rem);
    align-items: start;
  }
  #citaty .voices { margin-top: 0.5rem; }
}
.docdemo__note { margin-top: -0.25rem; }

/* Plovoucí výzva se ukáže, až hlavní spínač v hero zmizí z obrazu.
   Do té doby by jen zakrývala ticker a soupeřila s ON AIR. */
.agent-lock { transition: opacity 220ms var(--e-out), transform 220ms var(--e-out), visibility 0s linear 0s, border-color 200ms ease, box-shadow 200ms ease; }
.hero-cta-v-obraze .agent-lock.is-visible {
  opacity: 0; visibility: hidden; transform: translateY(8px);
  transition: opacity 160ms ease, transform 160ms ease, visibility 0s linear 160ms;
}
/* Kurzor psaní jen během psaní odpovědi, ne za hotovou větou. */
.docdemo .caret::after { content: none; }
.docdemo.je-pise .caret::after { content: "▍"; }
@media (prefers-reduced-motion: reduce) {
  .agent-lock, .hero-cta-v-obraze .agent-lock.is-visible { transition: none; }
  .docdemo.je-pise .caret::after { content: none; }
}

/* =========================================================
   Roast webu: linkový vstup pultu a odečet z měřáků
   ---------------------------------------------------------
   Vstup = pole s páskou „Vstup · tvoj web" a klávesa. Výsledek
   = skóre jako velké číslo, čtyři VU metry (do 3 z 10 červená
   zóna), verdikt a „Oprav ako prvé" jako vytištěný lístek.
   ========================================================= */
@media (min-width: 1024px) {
  .roast {
    display: grid;
    grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr);
    column-gap: clamp(2.5rem, 5vw, 4.5rem);
    align-items: start;
  }
}
.roast__pult {
  margin-top: 2.5rem;
  padding: clamp(1.25rem, 3vw, 1.75rem);
  border: 1px solid var(--ink-line);
  border-radius: 18px;
  background: var(--ink-soft);
  box-shadow: inset 0 1px 0 rgba(242, 237, 228, .05);
}
@media (min-width: 1024px) { .roast__pult { margin-top: 0.5rem; } }
.roast__tape { margin-bottom: 0.9rem; }
.roast__riadok { display: flex; gap: 0.6rem; }
.roast__riadok input {
  flex: 1; min-width: 0;
  padding: 0.9rem 1rem;
  border: 1px solid var(--ink-line);
  border-radius: 8px;
  background: var(--ink);
  color: var(--paper);
  font: 600 1.02rem/1.2 var(--font-body);
  box-shadow: inset 0 2px 0 rgba(0, 0, 0, .25);
  transition: border-color 160ms ease;
}
.roast__riadok input::placeholder { color: var(--sand-deep); font-weight: 500; }
.roast__riadok input:focus { outline: none; border-color: var(--yellow); }
.roast__riadok input[readonly] { color: var(--paper-dim); background: color-mix(in srgb, var(--ink) 60%, var(--ink-soft)); }
.roast__go { flex: none; padding-inline: 1.3rem; }
.roast__vstup.is-bezi .roast__go { cursor: progress; opacity: 0.7; }
@media (max-width: 520px) {
  .roast__riadok { flex-direction: column; }
  .roast__go { width: 100%; }
}
.roast__pozn { margin-top: 0.75rem; min-height: 1.4em; font-size: 0.88rem; line-height: 1.45; color: var(--sand); }
.roast__pozn.is-chyba { color: var(--clay-text); }
.roast__vstup.is-bezi .roast__pozn { color: var(--paper-dim); }

.roast__vysledok {
  display: grid; gap: 1.25rem;
  margin-top: 1.4rem; padding-top: 1.4rem;
  border-top: 1px solid var(--ink-line);
  animation: settle 0.45s var(--e-out) both;
}
.roast__mer { display: grid; gap: 1.25rem; align-items: center; }
@media (min-width: 640px) { .roast__mer { gap: 2rem; } }
.roast__dalej { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 0.5rem 1rem; font-size: 0.9rem; }
.roast__dalej a { font-weight: 700; color: var(--yellow); text-decoration: none; }
.roast__dalej a:hover { text-decoration: underline; text-underline-offset: 0.2em; }
.roast__ai { color: var(--sand-deep); font-size: 0.8rem; }
@media (prefers-reduced-motion: reduce) {
  .roast__vysledok { animation: none; }
}

/* Nápověda u Michala z teček: tečky reagují na kurzor, jen to
   nikdo neví. Jen pro myš, zmizí po prvním pohybu nad portrétem. */
.monitor { position: relative; }
.monitor__hint { display: none; }
@media (hover: hover) and (pointer: fine) and (prefers-reduced-motion: no-preference) {
  .monitor__hint {
    display: block;
    position: absolute; left: 1.4rem; bottom: 5.4rem;
    padding: 0.35rem 0.6rem;
    border-radius: 4px;
    background: color-mix(in srgb, var(--ink) 82%, transparent);
    color: var(--paper-dim);
    font-size: 0.8rem; font-weight: 600;
    pointer-events: none;
    transition: opacity 260ms var(--e-out), transform 260ms var(--e-out);
  }
  .monitor.je-skuseny .monitor__hint { opacity: 0; transform: translateY(4px); }
}

/* =========================================================
   Přestavba úvodu (19. 10.): stránka jako jedna relácia
   hero → Prompter → Roast → Dokumenty → pult → ohlasy →
   pre koho nie → Koniec vysielania.
   ========================================================= */

/* ---------- Monitor: kdo je na obraze ---------- */
.monitor__who {
  position: absolute; left: 0.75rem; bottom: 0.75rem; right: 0.75rem;
  display: flex; flex-wrap: wrap; align-items: center; gap: 0.35rem 0.6rem;
  margin: 0;
  pointer-events: none;
}
.monitor__who-note {
  padding: 0.25rem 0.5rem;
  border-radius: 4px;
  background: color-mix(in srgb, var(--ink) 84%, transparent);
  color: var(--paper-dim);
  font-size: 0.78rem; font-weight: 600; line-height: 1.3;
}
@media (hover: hover) and (pointer: fine) and (prefers-reduced-motion: no-preference) {
  /* Nápověda kurzoru sedí nahoře, ne přes pásku se jménem. */
  .monitor__hint { bottom: auto; top: 3.4rem; }
}

/* ---------- Studiové hodiny: čas a 60 teček vteřin ---------- */
.monitor__foot { gap: 1.1rem; padding-top: 0.95rem; }
.studio-clock {
  position: relative; flex: none;
  display: grid; place-items: center;
  width: 5.6rem; aspect-ratio: 1;
}
.studio-clock__ring { position: absolute; inset: 0; width: 100%; height: 100%; }
.studio-clock__ring circle { fill: var(--ink-line); transition: fill 120ms linear; }
.studio-clock__ring circle.je-zap { fill: var(--yellow); }
.studio-clock .clock { font-size: 1.05rem; }
/* Spínač ON AIR v hero rozsvítí celý kruh. */
.hero:has(.btn--onair:hover, .btn--onair:focus-visible) .studio-clock__ring circle { fill: var(--yellow); }
.monitor__note { display: grid; gap: 0.45rem; justify-items: start; }

/* ---------- Ticker: témy sa dajú kliknúť ---------- */
.topics__group button {
  padding: 0.25rem 0.3rem;
  border: 0; border-radius: 2px;
  background: none;
  font: inherit; letter-spacing: inherit; text-transform: inherit;
  color: var(--ink);
  cursor: pointer;
  transition: background-color 140ms var(--e-out), color 140ms var(--e-out);
}
.topics__group button:hover { background: var(--ink); color: var(--yellow); }
.topics__group button:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }
.topics:focus-within .topics__track { animation-play-state: paused; }

/* ---------- Prompter: vlastná veta ---------- */
.starter__own { margin-top: 1.75rem; }
.starter__own-lbl {
  display: block; margin-bottom: 0.6rem;
  font: 800 0.72rem/1 var(--font-body); font-stretch: 72%;
  letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--sand);
}
.starter__own-row { display: flex; gap: 0.5rem; }
.starter__own-row input {
  flex: 1; min-width: 0;
  padding: 0.85rem 1rem;
  border: 1px solid var(--ink-line);
  border-radius: 8px;
  background: var(--ink);
  color: var(--paper);
  font: 500 1rem/1.3 var(--font-body);
  box-shadow: inset 0 2px 0 rgba(0, 0, 0, .25);
  transition: border-color 160ms ease;
}
.starter__own-row input::placeholder { color: var(--sand-deep); }
.starter__own-row input:focus { outline: none; border-color: var(--yellow); }
.starter__own-go { flex: none; padding-inline: 1.1rem; }
@media (max-width: 520px) {
  .starter__own-row { flex-direction: column; }
  .starter__own-go { width: 100%; }
}
.starter__mine { display: grid; gap: 1.1rem; }
.starter__mine[hidden] { display: none; }
.starter__mine-you {
  display: grid; gap: 0.6rem;
  font-weight: 700;
  font-size: clamp(1.45rem, 1.05rem + 1.45vw, 2.2rem);
  line-height: 1.26; letter-spacing: -0.025em;
  color: var(--paper);
  text-wrap: pretty;
}
.starter__mine-you .w { display: inline-block; animation: starter-word .55s var(--ease) both; animation-delay: calc(var(--w) * 45ms + 120ms); }
.starter__mine-lbl {
  justify-self: start;
  font: 800 0.72rem/1 var(--font-body); font-stretch: 72%;
  letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--sand);
}
.starter__mine-note { font-size: 0.95rem; line-height: 1.55; color: var(--sand); max-width: 34rem; }
@media (prefers-reduced-motion: reduce) { .starter__mine-you .w { animation: none; } }

/* ---------- Pult po přihlášení: čeká na jeden klik ---------- */
.agent-panel.je-pripraveny { border-color: var(--yellow); }

/* ---------- Koniec vysielania ---------- */
.koniec { padding-bottom: 4rem; }
@media (min-width: 640px) { .koniec { padding-bottom: 5.5rem; } }
.koniec__head { display: grid; justify-items: start; gap: 1.25rem; }
.koniec__head h2 {
  margin: 0;
  font-size: clamp(2.6rem, 7vw, 5.25rem);
  line-height: 0.92;
  letter-spacing: -0.045em;
  font-stretch: 112%;
}
.koniec__lamp { padding: 0.45rem 0.75rem 0.42rem 0.6rem; font-size: 0.8rem; gap: 0.55rem; }
.koniec__lamp i { width: 0.6rem; height: 0.6rem; }
/* Zhasnutí: dvakrát problikne a zhasne. */
.koniec__lamp.je-off { animation: lamp-off 900ms steps(1, end) both; }
@keyframes lamp-off {
  0%   { background: var(--yellow); color: var(--ink); border-color: var(--yellow); }
  20%  { background: transparent; color: var(--sand-deep); border-color: var(--ink-line); }
  40%  { background: var(--yellow); color: var(--ink); border-color: var(--yellow); }
  60%  { background: transparent; color: var(--sand-deep); border-color: var(--ink-line); }
  75%  { background: var(--yellow); color: var(--ink); border-color: var(--yellow); }
  100% { background: transparent; color: var(--sand-deep); border-color: var(--ink-line); }
}
.koniec__grid { display: grid; gap: 2.5rem; margin-top: 3rem; }
@media (min-width: 1024px) {
  .koniec__grid { grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr); gap: clamp(2.5rem, 5vw, 4.5rem); align-items: start; }
}

/* Titulky: role zúžene vľavo, meno rozšírené vpravo. */
.titulky { margin: 0; border-top: 1px solid var(--ink-line); }
.titulky__row {
  display: grid; gap: 0.5rem;
  padding: 1.4rem 0 1.5rem;
  border-bottom: 1px solid var(--ink-line);
}
@media (min-width: 640px) { .titulky__row { grid-template-columns: 9rem minmax(0, 1fr); gap: 1.5rem; } }
.titulky dt {
  padding-top: 0.55rem;
  font: 800 0.72rem/1 var(--font-body); font-stretch: 72%;
  letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--sand);
}
.titulky dd { margin: 0; display: grid; gap: 0.45rem; }
.titulky dd b {
  font: 800 clamp(1.6rem, 3vw, 2.2rem)/1 var(--font-display);
  font-stretch: 112%; letter-spacing: -0.035em;
  color: var(--paper);
}
.titulky dd b a { color: inherit; text-decoration: none; }
.titulky dd b a:hover { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 0.12em; }
.titulky dd span { color: var(--sand); font-size: 0.98rem; line-height: 1.55; max-width: 34rem; }

/* Napíš do štúdia: žltá plocha (stála preferencia klienta). */
.studio-post {
  padding: clamp(1.5rem, 3.5vw, 2.25rem);
  border-radius: 20px;
  background: var(--yellow);
  color: var(--ink);
}
.studio-post h3 {
  margin: 0;
  font: 800 clamp(1.8rem, 3.4vw, 2.5rem)/0.98 var(--font-display);
  font-stretch: 110%; letter-spacing: -0.04em;
  color: var(--ink);
}
.studio-post h3 em { color: var(--ink); font-stretch: 125%; text-decoration: underline; text-decoration-thickness: 0.09em; text-underline-offset: 0.12em; }
.studio-post p { margin-top: 0.9rem; line-height: 1.6; color: color-mix(in srgb, var(--ink) 86%, var(--yellow)); }
.studio-post .btn--primary { margin-top: 1.5rem; background: var(--ink); color: var(--yellow); box-shadow: none; }
.studio-post .btn--primary:hover { background: color-mix(in srgb, var(--ink) 86%, var(--yellow)); }
.studio-post .btn--primary:focus-visible { outline-color: var(--ink); }
.studio-post ::selection { background: var(--ink); color: var(--yellow); }

@media (prefers-reduced-motion: reduce) {
  .koniec__lamp.je-off { animation: none; }
  .studio-clock__ring circle, .topics__group button { transition: none; }
}

.roast__vysledok.is-ukazka > :not(.roast__ukazka) { opacity: 0.55; }
.roast__ukazka {
  display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem 0.75rem;
  font-size: 0.88rem; line-height: 1.45; color: var(--sand);
}

/* Prompter: pole vlastnej vety patrí pod výber, jeviště ostáva vpravo. */
@media (min-width: 960px) {
  .starter__pick, .starter__own { grid-column: 1; }
  .starter__stage { grid-column: 2; grid-row: 1 / span 2; }
}
.starter__ans:has(.starter__mine:not([hidden])) .starter__who { display: none; }
.hero h1.rise { animation: none; opacity: 1; transform: none; filter: none; }

/* ---------- OFF AIR: konec hovoru ----------
   Kontrolka v listu dvakrát problikne a zhasne, časomíra nahoře
   dvakrát blikne a dohodnuté úkoly vyjedou jako vytištěný lístek. */
.call__offair { margin-bottom: 1rem; }
.call.je-offair .call__offair { animation: lamp-off 900ms steps(1, end) both; }
.call.je-offair .call__time { animation: cas-blik 900ms steps(1, end) both; }
@keyframes cas-blik { 0%, 40%, 80% { opacity: 1; } 20%, 60% { opacity: 0.15; } }

.call__done-tasks {
  position: relative;
  margin-top: 1.25rem;
  padding: 2.1rem 1.1rem 1rem;
  border: 0;
  border-radius: 3px;
  background: var(--paper);
  color: var(--ink);
  transform: rotate(-0.5deg);
  box-shadow: 0 14px 24px -18px rgba(0, 0, 0, .9);
}
.call__done-tasks::before {
  content: attr(data-lbl);
  position: absolute; top: 0.85rem; left: 1.1rem;
  font: 800 0.72rem/1 var(--font-body); font-stretch: 72%;
  letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--ink-72);
}
.call__done-tasks li { color: var(--ink); padding-top: 0.5rem; border-top: 1px solid var(--ink-18); font-weight: 600; }
.call__done-tasks li:first-child { border-top: 0; padding-top: 0; }
.call__done-tasks small { color: var(--ink-72); font-family: var(--font-body); font-variant-numeric: tabular-nums; font-weight: 700; }
.call__done-tasks ::selection { background: var(--ink); color: var(--paper); }
/* Lístek vyjede z tiskárny: odkrývá se shora dolů. */
.call.je-offair .call__done-tasks { animation: listok-tlac 700ms var(--e-out) 650ms both; }
@keyframes listok-tlac {
  from { clip-path: inset(0 0 100% 0); transform: rotate(-0.5deg) translateY(-0.75rem); }
  to   { clip-path: inset(0 0 0 0); transform: rotate(-0.5deg) translateY(0); }
}
@media (prefers-reduced-motion: reduce) {
  .call.je-offair .call__offair, .call.je-offair .call__time, .call.je-offair .call__done-tasks { animation: none; }
}

/* =========================================================
   Opravy po závěrečné kontrole (19. 10.)
   ========================================================= */

/* Pult hovoru vidí i nepřihlášený: v pohotovosti, klávesy vedou
   přes registraci. Žádná přihlašovací zeď uprostřed stránky. */
.agent-panel { text-align: left; padding: clamp(1.5rem, 4vw, 3rem); }
.agent-panel .agent-live.call-start { display: grid; gap: 2rem; }
@media (min-width: 900px) {
  .agent-panel .agent-live.call-start {
    grid-template-columns: minmax(0, 1fr) minmax(0, 26rem);
    gap: clamp(2.5rem, 6vw, 5rem);
    align-items: start;
  }
}
.notice--short {
  display: block;
  margin: 1.75rem 0 0; max-width: none;
  padding-top: 1.1rem;
  border-top: 1px solid var(--ink-line);
  font-size: 0.82rem; line-height: 1.5; color: var(--sand-deep);
  text-align: left;
}
.notice--short a { color: var(--sand); }
body .agent-panel .notice--short { text-align: left; }
body:not(.is-unlocked) .agent-panel .notice--short { text-align: left; }

/* Titulky hovoru: zalomení „balance" s ořezem řádků a slovy jako
   inline-block v Chrome ztrácelo slovo. Slova jsou inline a nabíhají
   jen průhledností a rozostřením. */
.call__agent { text-wrap: pretty; }
.call__agent.is-new .call__w { display: inline; animation-name: call-word-flat; }
@keyframes call-word-flat { from { opacity: 0; } }

/* Konec hovoru: kontrolka vedle nadpisu, ne nad ním. */
.call__done-head { display: flex; flex-wrap: wrap; align-items: center; gap: 0.6rem 0.9rem; }
.call__done-head h2 { margin: 0; }
.call__offair { margin: 0; }

/* Ukázka roastu: žádné ztlumení (z papíru by byla šedá deska a ze
   žluté olivová). Ukázku nese páska, měřák kreslí písek a papír;
   žlutá a hlína patří jen skutečnému výsledku. */
.roast__vysledok.is-ukazka > :not(.roast__ukazka) { opacity: 1; }
.is-ukazka .roast__rucicka line { stroke: var(--paper-dim); }
.is-ukazka .roast__merak circle { stroke: var(--paper-dim); }
.is-ukazka .roast__skore b { color: var(--paper-dim); }
.is-ukazka .roast__vu i,
.is-ukazka .roast__vu.is-cervena i { background: repeating-linear-gradient(90deg, var(--sand) 0 6px, transparent 6px 8px); }

/* =========================================================
   Pre koho nie je: „Mimo programu"
   Požiadavka vľavo ako citát v rozšírenom Archive, prečiarknutá
   čiarou červenej zóny (odmietnutie = clay, len čiara, nie text).
   Vpravo poctivá odpoveď. Čiara sa dotiahne pri prvom zobrazení.
   ========================================================= */
.mimo__zoznam {
  list-style: none; margin: 3rem 0 0; padding: 0;
  border-top: 1px solid var(--ink-line);
  counter-reset: mimo;
}
.mimo__riadok {
  counter-increment: mimo;
  display: grid; gap: 0.75rem;
  padding: 1.6rem 0 1.75rem;
  border-bottom: 1px solid var(--ink-line);
}
@media (min-width: 900px) {
  .mimo__riadok {
    grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
    column-gap: clamp(2rem, 5vw, 4.5rem);
    align-items: start;
    padding: 2rem 0 2.1rem;
  }
}
.mimo__ziadost {
  margin: 0;
  font: 800 clamp(1.45rem, 1.05rem + 1.5vw, 2.25rem)/1.14 var(--font-display);
  font-stretch: 108%;
  letter-spacing: -0.03em;
  color: var(--paper-dim);
  text-wrap: balance;
}
.mimo__ziadost::before {
  content: counter(mimo, decimal-leading-zero);
  display: block;
  margin-bottom: 0.7rem;
  font: 800 0.72rem/1 var(--font-body); font-stretch: 72%;
  letter-spacing: 0.14em;
  color: var(--sand-deep);
}
/* Prečiarknutie cez každý riadok citátu. */
.mimo__text {
  background-image: linear-gradient(var(--clay), var(--clay));
  background-repeat: no-repeat;
  background-position: 0 54%;
  background-size: 100% 3px;
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
}
@media (prefers-reduced-motion: no-preference) {
  .js .mimo__zoznam .mimo__text { background-size: 0 3px; transition: background-size 700ms var(--e-out); }
  .js .mimo__zoznam.is-in .mimo__text { background-size: 100% 3px; }
  .js .mimo__zoznam.is-in .mimo__riadok:nth-child(2) .mimo__text { transition-delay: 120ms; }
  .js .mimo__zoznam.is-in .mimo__riadok:nth-child(3) .mimo__text { transition-delay: 240ms; }
  .js .mimo__zoznam.is-in .mimo__riadok:nth-child(4) .mimo__text { transition-delay: 360ms; }
  .js .mimo__zoznam.is-in .mimo__riadok:nth-child(5) .mimo__text { transition-delay: 480ms; }
}
.mimo__odpoved {
  margin: 0;
  font-size: 1.04rem; line-height: 1.6;
  color: var(--paper);
  max-width: 34rem;
}
@media (min-width: 900px) { .mimo__odpoved { padding-top: 1.45rem; } }

/* =========================================================
   Čo je nové vo V2 (brief P0.9): tlačený list pod tickerom
   Papier, ink linka hore, štyri novinky vedľa seba. Krátke,
   aby sa stránka znova nenafúkla.
   ========================================================= */
.nove-v2 { background: var(--paper); color: var(--ink); padding-block: 3.5rem 3.75rem; }
@media (min-width: 640px) { .nove-v2 { padding-block: 4.5rem 4.75rem; } }
.nove-v2 + .section { padding-top: 5rem; }
@media (min-width: 640px) { .nove-v2 + .section { padding-top: 7rem; } }
.nove-v2__in { display: grid; gap: 2rem; }
@media (min-width: 1024px) {
  .nove-v2__in { grid-template-columns: minmax(0, 0.7fr) minmax(0, 1.3fr); column-gap: clamp(2.5rem, 5vw, 4.5rem); align-items: start; }
}
.nove-v2__head { display: grid; gap: 0.9rem; justify-items: start; }
.nove-v2__tape { transform: rotate(-2deg); background: var(--ink); color: var(--paper); box-shadow: none; }
.nove-v2__head h2 {
  margin: 0;
  font: 800 clamp(2rem, 4vw, 3rem)/0.97 var(--font-display);
  font-stretch: 112%; letter-spacing: -0.04em;
  color: var(--ink);
}
.nove-v2__head h2 em {
  color: var(--ink); font-stretch: 112%;
  background: linear-gradient(transparent 58%, var(--yellow) 58%, var(--yellow) 90%, transparent 90%);
  padding-inline: 0.04em;
}
.nove-v2__head p { margin: 0; color: color-mix(in srgb, var(--ink) 74%, var(--paper)); line-height: 1.55; max-width: 26rem; }
.nove-v2__list {
  list-style: none; margin: 0; padding: 0;
  display: grid; gap: 0;
  border-top: 2px solid var(--ink);
  counter-reset: nove;
}
@media (min-width: 640px) { .nove-v2__list { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 2rem; } }
@media (min-width: 1200px) { .nove-v2__list { grid-template-columns: repeat(4, minmax(0, 1fr)); column-gap: 1.5rem; } }
.nove-v2__list li {
  counter-increment: nove;
  padding: 1.1rem 0 1.25rem;
  border-bottom: 1px solid color-mix(in srgb, var(--ink) 18%, var(--paper));
}
.nove-v2__list h3 {
  margin: 0 0 0.45rem;
  font: 800 1.2rem/1.1 var(--font-display);
  font-stretch: 84%; text-transform: uppercase; letter-spacing: 0.01em;
  color: var(--ink);
}
.nove-v2__list h3::before {
  content: counter(nove, decimal-leading-zero) " ";
  font-stretch: 72%; letter-spacing: 0.1em;
  color: color-mix(in srgb, var(--ink) 55%, var(--paper));
}
.nove-v2__list p { margin: 0; font-size: 0.94rem; line-height: 1.55; color: color-mix(in srgb, var(--ink) 80%, var(--paper)); }
@media (hover: hover) and (pointer: fine) {
  .nove-v2__list h3 { transition: background-size 220ms var(--e-out); background: linear-gradient(var(--yellow), var(--yellow)) no-repeat 0 85% / 0 40%; }
  .nove-v2__list li:hover h3 { background-size: 100% 40%; }
}
.nove-v2 ::selection { background: var(--ink); color: var(--paper); }
.nove-v2 a:focus-visible { outline-color: var(--ink); }
@media (prefers-reduced-motion: reduce) { .nove-v2__list h3 { transition: none; } }
.header__nav a[hidden], .menu__panel a[hidden], .nove-v2[hidden] { display: none; }

/* ---------- Roast webu: čítanie (roast.js, cita()) ----------
   Kým Pastier číta web, výsledok alebo ukážka stmavne a cez pult
   prechádza čítacia linka ako skener. Len transform a opacity. */
.roast__vysledok { position: relative; }
.roast__vysledok > * { transition: opacity 240ms ease; }
.roast__vysledok.je-cita > * { opacity: 0.28 !important; }
.roast__vysledok.je-cita::after {
  content: ""; position: absolute; left: 0; right: 0; top: 1.4rem;
  height: 2px; background: var(--yellow);
  animation: roast-cita 1.4s cubic-bezier(0.77, 0, 0.175, 1) infinite alternate;
  pointer-events: none;
}
.roast__vysledok.je-cita .roast__rucicka { animation: roast-hlada 1.1s cubic-bezier(0.77, 0, 0.175, 1) infinite alternate; }
@keyframes roast-cita { from { transform: translateY(0); } to { transform: translateY(calc(var(--vyska, 18rem) - 1.4rem)); } }
@keyframes roast-hlada { from { transform: rotate(-60deg); } to { transform: rotate(40deg); } }
@media (prefers-reduced-motion: reduce) {
  .roast__vysledok.je-cita::after, .roast__vysledok.je-cita .roast__rucicka { animation: none; }
}

/* Odkaz „Zmeniť v profile" pod zamknutým webom v Roaste. */
.roast__zmena {
  color: var(--yellow); font-weight: 600;
  text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px;
  transition: text-decoration-thickness .15s ease;
}
.roast__zmena:hover { text-decoration-thickness: 2px; }
.roast__zmena:focus-visible { outline: 2px solid var(--yellow); outline-offset: 3px; border-radius: 2px; }