/*
  Landing page Protokollu (index.html). Spoločné tokeny, písma, hlavička,
  tlačidlá a päta sú v site.css; tu je iba rozloženie úvodu, príbehu listu a
  sekcií. Pôvod: prototyp F5 (história repozitára MeetAsist, commit 978dd99).
  Web je iba vo svetlej téme; okno hovoru je tmavé ako bežné aplikácie na hovory.
*/

/* Farba hlasu podľa poradia účastníka, ako ju generuje aplikácia. */
.who[data-name='Martina'],
.tile[data-tile='Martina'] {
  --hue: 50deg;
}
.who[data-name='Peter'],
.tile[data-tile='Peter'] {
  --hue: 300deg;
}
.tile[data-tile='Zuzana'] {
  --hue: 190deg;
}
.tile[data-tile='Jana'] {
  --hue: 140deg;
}

/* Hovoriaci v prepise: farebná značka a meno. */
.who {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-right: 8px;
  color: oklch(var(--speaker-lightness) var(--speaker-chroma) var(--hue, 0deg));
  font-family: var(--font-family-sans);
  font-size: var(--font-size-caption);
  font-weight: 600;
  vertical-align: 0.1em;
}
.who::before {
  content: '';
  width: 8px;
  height: 8px;
  border-radius: var(--radius-xs);
  background: currentcolor;
}
.who.me {
  color: var(--color-text-primary);
}

.row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 16px 24px;
}
.meta {
  color: var(--color-text-tertiary);
  font-size: var(--font-size-meta);
}
.nowrap {
  white-space: nowrap;
}
.optional__link {
  color: var(--color-text-secondary);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.15em;
}

/* Súkromie a stiahnutie: nadpis v Literate, krátky text. */
.net,
.end {
  padding: 96px 0;
  border-top: 1px solid var(--color-border-subtle);
}
.net h2,
.end h2 {
  max-width: 24ch;
  font-family: var(--font-family-read);
  font-size: clamp(1.75rem, 3.4vw, 2.75rem);
  font-weight: 500;
  letter-spacing: -0.02em;
  line-height: 1.05;
}
.net p,
.end p {
  max-width: 36rem;
  margin-top: 16px;
  color: var(--color-text-secondary);
}
.end .row {
  margin-top: 32px;
}

/*
  Snímky aplikácie ako jedna kompozícia s prekrytím: Domov vľavo ako podklad,
  súhrn cez jeho pravú dolnú časť a plávajúci panel navrchu vpravo, ako pláva
  nad oknom. Polohy sú v percentách šírky, takže kompozícia sa zmenšuje celá.
  Snímka pod myšou (alebo v fokuse) sa vysunie dopredu a nadvihne, ostatné
  ustúpia.
*/
.shots {
  margin: 0 auto;
  /* Iba spodok; bočné okraje dáva .wrap a skratka padding by ich zmazala. */
  padding-bottom: 96px;
}
/*
  Výška plochy je 45 % šírky: Domov (56 % šírky, pomer 1600 × 1204) siaha do
  42 % a súhrn (56 %, pomer 1600 × 883) od 13 % do 44 %. Polohy zhora sú
  percentá výšky plochy (29 % × 45 % = 13 % šírky).
*/
.shots__stage {
  position: relative;
  aspect-ratio: 1 / 0.45;
}
.shots__stage .win {
  position: absolute;
  transition:
    transform 220ms ease,
    box-shadow 220ms ease,
    opacity 220ms ease;
}
.shots__home {
  top: 0;
  left: 0;
  z-index: 1;
  width: 56%;
}
.shots__summary {
  top: 29%;
  left: 40%;
  z-index: 2;
  width: 56%;
}
.shots__panel {
  top: 3%;
  left: 76%;
  z-index: 3;
  width: 22%;
}
.shots__stage .win:hover,
.shots__stage .win:focus-visible {
  z-index: 4;
  box-shadow:
    0 2px 4px rgb(10 30 28 / 8%),
    0 28px 64px -20px rgb(10 40 36 / 40%);
  transform: translateY(-8px) scale(1.02);
}
.shots__stage:has(.win:hover, .win:focus-visible) .win:not(:hover, :focus-visible) {
  opacity: 0.72;
}
@media (prefers-reduced-motion: reduce) {
  .shots__stage .win {
    transition: none;
  }
  .shots__stage .win:hover,
  .shots__stage .win:focus-visible {
    transform: none;
  }
}
.win {
  overflow: hidden;
  border: 1px solid var(--color-border-subtle);
  border-radius: var(--radius-md);
  background: var(--color-surface);
  box-shadow: var(--shadow-lg);
}
.win img {
  display: block;
  width: 100%;
}
/* Snímka je odkaz na obrázok v plnej veľkosti. */
a.win {
  display: block;
  cursor: zoom-in;
}
.shots figcaption {
  margin-top: 20px;
  color: var(--color-text-tertiary);
  font-size: var(--font-size-meta);
}

/*
  Prototyp F5: F4 doplnené o okno hovoru s ľuďmi a opravený stred prechodu.
*/
/*
  F: Jeden list. Vľavo plynú kroky, vpravo je v rámci sekcie pripnutý
  jediný list prepisu, ktorý pri scrollovaní mení rolu: nahráva, pomenuje
  hovoriacich, zvýrazní dôležité vety, rozšíri sa o protokol (zvýraznenia
  doň preletia aj s časom) a nakoniec čaká na vaše schválenie.
  Žiadne pozadie z písmen; jediný pohyb nesie samotný obsah.
*/
.story {
  display: grid;
  grid-template-columns:
    minmax(16px, 1fr) minmax(300px, 480px) minmax(24px, 48px) minmax(560px, 694px)
    minmax(16px, 1fr);
}
.story__steps {
  --step-margin: 96px;
  grid-column: 2;
}
.story__stage {
  grid-column: 4 / 6;
  position: relative;
}
.story__pin {
  position: sticky;
  top: max(24px, calc(50vh - 260px));
  padding-block: 24px;
}

.step {
  display: grid;
  align-content: center;
  min-height: 74vh;
  padding-block: 48px;
}
.step h2 {
  max-width: 18ch;
  font-family: var(--font-family-read);
  font-size: clamp(1.6rem, 2.6vw, 2.25rem);
  font-weight: 500;
  letter-spacing: -0.02em;
  line-height: 1.08;
}
.step p {
  max-width: 26rem;
  margin-top: 14px;
  color: var(--color-text-secondary);
}
/*
  Časový okraj krokov, ako v súhrne aplikácie: čas v petroleji, pod ním
  menovka, za nimi linka. Kroky na seba nadväzujú bez medzery, takže linka
  je súvislá; úsek pri aktívnom kroku stmavne (trieda is-active z f-story.js).
*/
.step--margin {
  grid-template-columns: var(--step-margin) minmax(0, 1fr);
  align-content: stretch;
  column-gap: 20px;
  padding-block: 0;
}
.step__margin {
  border-right: 1px solid var(--color-margin-line);
  transition: border-color 240ms;
}
.step--margin.is-active .step__margin {
  border-right: 2px solid var(--color-primary);
}
.step__body {
  display: grid;
  align-content: center;
  padding-block: 48px;
}
.step__text {
  position: relative;
}
/* Čas a menovka stoja v okraji pri prvom riadku nadpisu. */
.step .step__stamp {
  position: absolute;
  top: 0.35rem;
  right: calc(100% + 20px + 14px);
  display: grid;
  justify-items: end;
  gap: 2px;
  width: calc(var(--step-margin) - 14px);
  margin: 0;
  text-align: right;
}
/* Okraj nesie iba menovku kroku, ako meno hovoriaceho v okraji súhrnu. */
.step__stamp small {
  color: var(--color-text-secondary);
  font-size: var(--font-size-meta);
  font-weight: 500;
  line-height: 1.3;
}
.step--hero {
  min-height: 92vh;
  padding-top: 120px;
}
.step--hero h1 {
  font-family: var(--font-family-read);
  font-size: clamp(2.4rem, 4.6vw, 3.9rem);
  font-weight: 500;
  letter-spacing: -0.028em;
  line-height: 1.02;
  text-wrap: balance;
}
.step--hero p {
  font-size: 1.125rem;
}
.step--hero .row {
  margin-top: 28px;
}
.step--hero .meta {
  margin-top: 14px;
  color: var(--color-text-tertiary);
  font-size: var(--font-size-meta);
}

/* List: povrch sa rozširuje (--reveal), obsah sa nepreteká. */
.sheet {
  --reveal: 0;
  --extra: 300px;
  position: relative;
  width: min(694px, 100%);
}
.sheet__surface {
  position: absolute;
  inset: 0 calc((1 - var(--reveal)) * var(--extra)) 0 0;
  border: 1px solid var(--color-border-subtle);
  border-radius: var(--radius-md);
  background: var(--color-surface);
  box-shadow: var(--shadow-lg);
}
.sheet__cols {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 390fr) minmax(0, 304fr);
}
.sheet__transcript {
  padding: 0 20px 12px;
}
.sheet__head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 12px;
  padding: 14px 0;
  border-bottom: 1px solid var(--color-border-subtle);
  font-size: var(--font-size-small);
}
.sheet__title {
  font-weight: 600;
}
.status {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--color-text-tertiary);
  font-size: var(--font-size-caption);
}
.status::before {
  content: '';
  width: 8px;
  height: 8px;
  border-radius: 999px;
  background: var(--color-record);
  transition: background-color 200ms;
}
/* Po nahrávaní už nič nie je červené a okrúhle. */
.status.is-saved::before {
  border-radius: var(--radius-xs);
  background: var(--color-text-tertiary);
}
.sheet__line {
  display: grid;
  grid-template-columns: 52px minmax(0, 1fr);
  gap: 12px;
  padding: 12px 0;
  opacity: 0;
  transition: opacity 200ms;
}
.sheet__line.is-started {
  opacity: 1;
}
.sheet__line .t {
  padding-top: 4px;
  border-right: 1px solid var(--color-margin-line);
  color: var(--color-primary);
  font-size: var(--font-size-caption);
}
.sheet__line .txt {
  font-family: var(--font-family-read);
  font-size: var(--font-size-read-compact);
  line-height: 1.55;
}
.who {
  transition: color 240ms;
}
/*
  Menovka hovoriaceho sa mení plynulo podľa scrollu (--t z f-story.js):
  pôvodná („Ja“, „Účastník 1“) sa vysunie nahor, meno sa nasunie zdola,
  šírka a farba značky prejdú postupne.
*/
.who[data-name] {
  --t: 0;
}
.who__slot {
  position: relative;
  display: inline-block;
  height: 1.25em;
  overflow: hidden;
  vertical-align: -0.3em;
}
.who__from,
.who__to {
  position: absolute;
  top: 0;
  left: 0;
  white-space: nowrap;
  line-height: 1.25em;
}
.who__from {
  color: var(--color-text-tertiary);
  opacity: calc(1 - var(--t));
  transform: translateY(calc(var(--t) * -100%));
}
.who__to {
  opacity: var(--t);
  transform: translateY(calc((1 - var(--t)) * 100%));
}
.who.me .who__from {
  color: var(--color-text-primary);
}
.who[data-name]:not(.me)::before {
  background: color-mix(
    in oklab,
    currentcolor calc(var(--t) * 100%),
    var(--color-text-tertiary)
  );
}
.w {
  opacity: 0;
}
.w.is-shown {
  opacity: 1;
}
/* Zvýrazňovač: farba zhody vyhľadávania z aplikácie, ťahom zľava doprava. */
/*
  Zvýrazňovač ide plynulo cez viac riadkov: pri „slice“ sa zalomené úseky
  správajú ako jeden pás, takže ťah prejde prvý riadok a pokračuje druhým.
*/
mark {
  --sweep: 0%;
  padding: 1px 0;
  color: inherit;
  background: linear-gradient(
    to right,
    var(--color-highlight) var(--sweep),
    transparent var(--sweep)
  );
  border-radius: var(--radius-xs);
  -webkit-box-decoration-break: slice;
  box-decoration-break: slice;
}

.sheet__protocol {
  padding: 0 20px 12px;
  border-left: 1px solid var(--color-border-subtle);
  opacity: 0;
}
.status-quiet {
  color: var(--color-text-tertiary);
  font-size: var(--font-size-caption);
}
.sheet__protocol h3 {
  margin-top: 14px;
  font-size: var(--font-size-caption);
  font-weight: 600;
  color: var(--color-text-tertiary);
}
.sheet__protocol .sheet__head {
  margin-bottom: 4px;
}
.prow {
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr);
  gap: 8px;
  margin-top: 8px;
  font-family: var(--font-family-read);
  font-size: var(--font-size-small);
  line-height: 1.45;
}
.prow .t {
  align-self: start;
  padding: 1px 4px;
  border-radius: var(--radius-xs);
  color: var(--color-primary);
  font-family: var(--font-family-mono);
  font-size: var(--font-size-caption);
  transition: background-color 400ms;
}
.prow .txt {
  opacity: 0;
  transform: translateY(3px);
  transition:
    opacity 260ms,
    transform 260ms;
}
.prow .t {
  opacity: 0;
}
.prow.is-landed .t,
.prow.is-landed .txt {
  opacity: 1;
  transform: none;
}
.prow.is-fresh .t {
  background: var(--color-highlight);
}
.task {
  display: grid;
  grid-template-columns: 12px minmax(0, 1fr);
  gap: 2px 8px;
}
.task .chip {
  grid-column: 2;
}
.box {
  width: 12px;
  height: 12px;
  border: 1px solid var(--color-border-default);
  border-radius: var(--radius-xs);
  margin-top: 4px;
}
.chip {
  font-family: var(--font-family-sans);
  font-size: var(--font-size-caption);
  color: var(--color-text-tertiary);
  transition: color 200ms;
}
.chip.is-accepted {
  color: var(--color-primary);
  font-weight: 600;
}
/* Prijatie a voliteľné odoslanie zdieľajú jedno miesto, nič neposúva riadky. */
.task-actions {
  display: grid;
  margin-top: 8px;
  padding-left: 20px;
}
.task-actions > * {
  grid-area: 1 / 1;
  align-self: start;
}
.accept {
  justify-self: start;
  display: inline-flex;
  align-items: center;
  height: 26px;
  padding-inline: 10px;
  border: 1px solid var(--color-border-default);
  border-radius: var(--radius-sm);
  background: var(--color-surface);
  color: var(--color-text-primary);
  font-family: var(--font-family-sans);
  font-size: var(--font-size-caption);
  font-weight: 500;
  opacity: 0;
  transition:
    background-color 160ms,
    border-color 160ms;
}
.accept.is-pressed {
  border-color: var(--color-primary);
  background: var(--color-primary-subtle);
}
.optional {
  font-family: var(--font-family-sans);
  font-size: var(--font-size-caption);
  line-height: 1.5;
  color: var(--color-text-tertiary);
  opacity: 0;
}
.optional a {
  color: var(--color-text-secondary);
}

/* Zvýraznenie na ceste do protokolu. */
.marker {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 2;
  display: grid;
  place-items: center start;
  padding-inline: 4px;
  border-radius: var(--radius-xs);
  background: var(--color-highlight);
  box-shadow: 0 6px 18px -8px rgb(0 0 0 / 35%);
  opacity: 0;
  pointer-events: none;
}
.marker__t {
  color: var(--color-primary);
  font-family: var(--font-family-mono);
  font-size: var(--font-size-caption);
}

/*
  Ilustračný kurzor v kroku 4: prejde k tlačidlu Prijať na riešenie a klikne
  naň (polohu a stlačenie nastavuje story.js). Šípka je tmavá s bielym
  obrysom, aby bola čitateľná na liste aj na tlačidle.
*/
.cursor {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 3;
  width: 16px;
  height: 20px;
  opacity: 0;
  pointer-events: none;
  transform-origin: 1px 1px;
}
.cursor svg {
  display: block;
  width: 100%;
  height: 100%;
  overflow: visible;
}
.cursor path {
  fill: var(--color-text-primary);
  stroke: var(--color-surface);
  stroke-width: 1.2;
  stroke-linejoin: round;
}

/* Úzka obrazovka a obmedzený pohyb: konečný stav bez pripnutia. */
/* Stredná šírka: list má prednosť, okraj krokov sa zúži. */
@media (max-width: 1180px) {
  .story__steps {
    --step-margin: 72px;
  }
  .step--margin {
    column-gap: 14px;
  }
}
@media (max-width: 960px) {
  .story {
    grid-template-columns: minmax(16px, 1fr) minmax(0, 720px) minmax(16px, 1fr);
  }
  .story__steps {
    display: contents;
  }
  .story__steps > .step,
  .story__stage {
    grid-column: 2;
  }
  .step--hero {
    order: 1;
    min-height: auto;
    padding-bottom: 32px;
  }
  .story__stage {
    order: 2;
  }
  .story__steps {
    --step-margin: 64px;
  }
  .story__steps > .step:not(.step--hero) {
    order: 3;
    min-height: auto;
  }
  .story__steps > .step:not(.step--hero) .step__body {
    padding-block: 24px;
  }
  .story__pin {
    position: static;
  }
  .sheet {
    width: 100%;
  }
  .sheet__cols {
    grid-template-columns: 1fr;
  }
  .sheet__protocol {
    border-left: 0;
    border-top: 1px solid var(--color-border-subtle);
  }
}

/* Fakty pri tlačidle: tichý riadok oddelený bodkou, nie odznaky. */
.facts {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 18px;
  margin: 18px 0 0;
  padding: 0;
  list-style: none;
  color: var(--color-text-secondary);
  font-size: var(--font-size-small);
}
/* Značka pred každou položkou: pri zalomení nezačína riadok oddeľovačom. */
.facts li {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
/* Zaoblený štvorček ako značka hovoriaceho v prepise; flex ho nesmie zúžiť. */
.facts li::before {
  content: '';
  flex: none;
  width: 8px;
  height: 8px;
  border-radius: var(--radius-xs);
  background: var(--color-primary);
}
.step--hero .facts + .meta {
  margin-top: 8px;
}

.slovak {
  padding: 96px 0;
  border-top: 1px solid var(--color-border-subtle);
}
.slovak h2 {
  max-width: 24ch;
  font-family: var(--font-family-read);
  font-size: clamp(1.75rem, 3.4vw, 2.75rem);
  font-weight: 500;
  letter-spacing: -0.02em;
  line-height: 1.05;
}
.slovak__lead {
  max-width: 36rem;
  margin-top: 16px;
  color: var(--color-text-secondary);
  font-size: 1.0625rem;
}
.slovak__points {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 32px 48px;
  margin-top: 40px;
}
@media (max-width: 860px) {
  .slovak__points {
    grid-template-columns: 1fr;
  }
}
.slovak__points dt {
  font-weight: 600;
}
.slovak__points dd {
  margin-top: 6px;
  color: var(--color-text-secondary);
  font-size: var(--font-size-small);
  line-height: 1.6;
}
.slovak__credit {
  margin-top: 32px;
  color: var(--color-text-tertiary);
  font-size: var(--font-size-caption);
}

/* Položky sa čítajú po stĺpcoch zhora nadol, preto sú v HTML v tom poradí
   a na mobile ostane rovnaké. */
.features {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  grid-template-rows: repeat(3, auto);
  grid-auto-flow: column;
  gap: 28px 64px;
  margin-top: 40px;
}
@media (max-width: 720px) {
  .features {
    grid-template-columns: 1fr;
    grid-template-rows: none;
    grid-auto-flow: row;
  }
}
.features dt {
  font-weight: 600;
}
.features dd {
  margin-top: 4px;
  max-width: 30rem;
  color: var(--color-text-secondary);
  font-size: var(--font-size-small);
}
.more {
  padding: 96px 0;
  border-top: 1px solid var(--color-border-subtle);
}
.more h2 {
  max-width: 24ch;
  font-family: var(--font-family-read);
  font-size: clamp(1.75rem, 3.4vw, 2.75rem);
  font-weight: 500;
  letter-spacing: -0.02em;
  line-height: 1.05;
}
.end {
  padding: 96px 0;
}
.net--short h2 {
  max-width: 22ch;
}
.net--short p {
  max-width: 40rem;
}
.net--short p + p {
  margin-top: 12px;
}
/*
  F4: Veľký titulok ako v F2 a pod ním otvorený prepis cez celú šírku obsahu,
  bez rámu karty. Titulok nie je replika: nemá čas ani názov stretnutia. Pri
  scrollovaní sa celý list zmenší do pripnutého listu vpravo, titulok sa
  zbalí, objaví sa hlavička stretnutia a rám listu.
  Veľkosti v úvode sú vynásobené --k (= 1 / --fill), aby po roztiahnutí listu
  vyzerali tak, ako sú napísané; riadky prepisu sa roztiahnu naplno.
*/
.step--hero {
  min-height: 100vh;
}
/* Odsadenie je vo vnútri, aby sa zbalený blok zmenšil úplne na nulu. */
.sheet__intro {
  --k: calc(1 / var(--fill, 1));
  position: relative;
  padding: 0 20px;
}
.sheet__titlebody {
  padding: calc(8px * var(--k)) 0 calc(40px * var(--k));
}
.sheet__titlebody h1 {
  max-width: 18ch;
  font-family: var(--font-family-read);
  font-size: calc(clamp(2.6rem, 6.4vw, 5.8rem) * var(--k));
  font-weight: 500;
  letter-spacing: -0.03em;
  line-height: 0.98;
  text-wrap: balance;
}
.sheet__titlebody > p:not(.meta) {
  max-width: calc(36rem * var(--k));
  margin-top: calc(24px * var(--k));
  color: var(--color-text-secondary);
  font-size: calc(1.125rem * var(--k));
  line-height: 1.55;
}
.sheet__titlebody .row {
  gap: calc(16px * var(--k)) calc(24px * var(--k));
  margin-top: calc(26px * var(--k));
}
.sheet__titlebody .btn {
  height: calc(44px * var(--k));
  padding-inline: calc(20px * var(--k));
  border-radius: calc(4px * var(--k));
  font-size: calc(0.875rem * var(--k));
}
.sheet__titlebody .link {
  font-size: calc(0.875rem * var(--k));
}
.sheet__titlebody .facts {
  gap: calc(6px * var(--k)) calc(18px * var(--k));
  margin-top: calc(16px * var(--k));
  font-size: calc(0.875rem * var(--k));
}
.sheet__titlebody .facts li {
  gap: calc(8px * var(--k));
}
/*
  Značka sa nezmenšuje šírkou a výškou (8 px × --k vychádza na zlomky pixela a
  prehliadač ich zaokrúhli každú inak, štvorec by bol obdĺžnik), ale
  transformáciou, ktorá sa nezaokrúhľuje. Záporný okraj vráti v rozložení
  šírku 8 px × --k, aby sa medzera k textu nezmenila.
*/
.sheet__titlebody .facts li::before {
  margin-inline: calc((8px * var(--k) - 8px) / 2);
  transform: scale(var(--k));
}
.sheet__titlebody .meta {
  margin-top: calc(8px * var(--k));
  color: var(--color-text-tertiary);
  font-size: calc(0.8125rem * var(--k));
}
/* Na úzkej obrazovke je titulok v liste; prázdny krok úvodu sa nezobrazí. */
@media (max-width: 960px) {
  .step--hero {
    display: none;
  }
  .story__stage {
    padding-top: 72px;
  }
}
@media (min-width: 961px) and (prefers-reduced-motion: no-preference) {
  .story__pin {
    top: 84px;
  }
  .sheet {
    transform: translateX(calc(var(--intro, 0) * var(--shift, 0px) * -1))
      scale(calc(1 + var(--intro, 0) * (var(--fill, 1) - 1)));
    transform-origin: top left;
    will-change: transform;
  }
  /*
    Časovanie prechodu: titulok zmizne v prvej tretine, hlavička stretnutia
    a rám listu sa objavia až v poslednej, keď je list takmer na mieste.
  */
  .sheet__intro {
    max-height: calc(
      var(--intro-h, 560px) * clamp(0, calc(var(--intro, 0) * 1.6 - 0.6), 1)
    );
    overflow: hidden;
    opacity: clamp(0, calc(var(--intro, 0) * 1.8 - 0.8), 1);
  }
  .sheet__surface {
    opacity: clamp(0, calc(1 - var(--intro, 0) * 1.6), 1);
  }
  .sheet__transcript > .sheet__head {
    max-height: calc((1 - var(--intro, 0)) * 60px);
    overflow: hidden;
    opacity: clamp(0, calc(1 - var(--intro, 0) * 2.2), 1);
  }
}

/*
  F5: Ľudia v hovore. Vedľa prepisu stojí okno hovoru so štyrmi dlaždicami
  (kamery vypnuté, iniciály ako v Meet a Jitsi) a nad ním malý plávajúci
  panel Protokollu. V úvode je okno vytiahnuté hore vedľa odseku, aby boli
  ľudia vidieť bez scrollu. Kým sa prepis píše, dlaždica hovoriaceho má
  rám; v kroku „Kto čo povedal“ sa meno na dlaždici zvýrazní tesne predtým,
  ako prejde do prepisu. Keď nahrávanie skončí (krok „zastavené“), okno aj
  s panelom odíde.
  Okno hovoru je tmavé v oboch témach, ako bežné aplikácie na hovory.
*/
:root {
  --call-bg: #182120;
  --call-border: #182120;
  --call-tile-l: 32%;
  --call-text: #eef3f1;
  --call-muted: #a9b7b4;
  --call-active: #63b8ad;
}
.sheet__transcript {
  grid-area: 1 / 1;
}
.sheet__protocol {
  grid-area: 1 / 2;
}
.sheet__call {
  grid-area: 1 / 2;
  align-self: start;
  position: relative;
  z-index: 1;
  padding: 0 20px;
}
.call {
  padding: 10px;
  border: 1px solid var(--call-border);
  border-radius: var(--radius-md);
  background: var(--call-bg);
  box-shadow: var(--shadow-lg);
  color: var(--call-text);
  font-family: var(--font-family-sans);
}
.call__bar {
  display: flex;
  justify-content: space-between;
  gap: 8px;
  padding: 0 2px 8px;
  color: var(--call-muted);
  font-size: var(--font-size-caption);
}
.call__bar span:first-child {
  overflow: hidden;
  color: var(--call-text);
  font-weight: 600;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.call__grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 6px;
}
.tile {
  position: relative;
  display: grid;
  place-items: center;
  aspect-ratio: 4 / 3;
  border-radius: var(--radius-sm);
  background: oklch(var(--call-tile-l) 0.03 var(--hue));
  transition: box-shadow 200ms;
}
.tile.is-speaking {
  box-shadow: inset 0 0 0 2px var(--call-active);
}
/* Avatar v cudzej aplikácii hovoru je okrúhly ako v Meet a Jitsi. */
.tile__face {
  display: grid;
  place-items: center;
  width: 40%;
  aspect-ratio: 1;
  border-radius: 50%;
  background: oklch(58% 0.08 var(--hue));
  color: #fff;
  font-size: 0.95rem;
  font-weight: 600;
  letter-spacing: 0.02em;
}
/* Meno, ktoré Protokoll práve číta, dostane farbu zvýrazňovača (--read). */
.tile__name {
  position: absolute;
  left: 6px;
  bottom: 6px;
  z-index: 0;
  padding: 1px 4px;
  color: color-mix(
    in oklab,
    var(--color-text-primary) clamp(0%, calc(var(--read, 0) * 200% - 50%), 100%),
    var(--call-text)
  );
  font-size: var(--font-size-micro);
  font-weight: 500;
}
.tile__name::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  border-radius: var(--radius-xs);
  background: var(--color-highlight);
  opacity: var(--read, 0);
}
.tile__level {
  position: absolute;
  top: 6px;
  right: 6px;
  display: flex;
  align-items: end;
  gap: 2px;
  height: 10px;
  opacity: 0;
  transition: opacity 200ms;
}
.tile__level i {
  width: 2px;
  height: 40%;
  border-radius: var(--radius-xs);
  background: var(--call-active);
}
.tile.is-speaking .tile__level {
  opacity: 1;
}
.tile.is-speaking .tile__level i {
  animation: level 700ms ease-in-out infinite alternate;
}
.tile.is-speaking .tile__level i:nth-child(2) {
  animation-delay: -250ms;
}
.tile.is-speaking .tile__level i:nth-child(3) {
  animation-delay: -480ms;
}
@keyframes level {
  from {
    height: 30%;
  }
  to {
    height: 100%;
  }
}
/* Plávajúci panel Protokollu nad hovorom, v zjednodušenej podobe. */
.minipanel {
  position: absolute;
  right: 12px;
  bottom: -22px;
  display: grid;
  gap: 2px;
  min-width: 140px;
  padding: 8px 10px;
  border: 1px solid var(--color-border-subtle);
  border-radius: var(--radius-md);
  background: var(--color-surface);
  box-shadow: var(--shadow-lg);
  font-family: var(--font-family-sans);
}
.minipanel__rec {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 4px;
  color: var(--color-record);
  font-size: var(--font-size-micro);
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.minipanel__rec::before {
  content: '';
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--color-record);
}
.minipanel__label {
  color: var(--color-text-tertiary);
  font-size: var(--font-size-micro);
}
.minipanel__who {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: oklch(var(--speaker-lightness) var(--speaker-chroma) var(--hue, 0deg));
  font-size: var(--font-size-caption);
  font-weight: 600;
}
.minipanel__who::before {
  content: '';
  width: 8px;
  height: 8px;
  border-radius: var(--radius-xs);
  background: currentcolor;
}
.minipanel__who.is-me {
  color: var(--color-text-primary);
}
.minipanel__who.is-generic,
.minipanel__who.is-idle {
  color: var(--color-text-tertiary);
}
.minipanel__who.is-idle {
  font-weight: 400;
}
.minipanel__who.is-idle::before {
  display: none;
}
/* Konečný stav bez pohybu: hovor je pruh nad prepisom, panel sa neukazuje. */
.is-static .sheet__call {
  grid-area: 1 / 1 / 2 / -1;
  padding: 14px 20px 6px;
}
.is-static .sheet__transcript,
.is-static .sheet__protocol {
  grid-row: 2;
}
@media (min-width: 961px) {
  .is-static .call__grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}
.is-static .minipanel {
  display: none;
}
@media (max-width: 960px) {
  .is-static .sheet__transcript,
  .is-static .sheet__protocol {
    grid-column: 1;
  }
  .is-static .sheet__protocol {
    grid-row: 3;
  }
}
@media (min-width: 961px) and (prefers-reduced-motion: no-preference) {
  /*
    Úvod (zmenšenie listu) trvá 75 % výšky okna. Krok 1 sa začne meniť, keď
    stred jeho textu príde na 108 % výšky okna, teda ešte pod spodný okraj
    (story.js). Pri tejto výške úvodného kroku to nastane až po skončení úvodu,
    takže sa prechody neprekrývajú.
  */
  .step--hero {
    min-height: 146vh;
  }
  /* V úvode je okno hovoru menšie a vytiahnuté k odseku pod titulkom. */
  .sheet__call {
    --c: clamp(0, calc(var(--intro, 0) * 1.6 - 0.6), 1);
    transform: translateY(calc(var(--call-lift, 0px) * var(--c) * -1))
      scale(calc(1 - var(--c) * 0.3));
    transform-origin: top right;
  }
}

/* Ikona Windows v tlačidle na stiahnutie (16 px, v úvode násobená --k). */
.btn {
  gap: 8px;
}
.btn__icon {
  flex: none;
  width: 16px;
  height: 16px;
}
.sheet__titlebody .btn {
  gap: calc(8px * var(--k));
}
.sheet__titlebody .btn__icon {
  width: calc(16px * var(--k));
  height: calc(16px * var(--k));
}
.beta .meta {
  margin-top: 14px;
  color: var(--color-text-tertiary);
  font-size: var(--font-size-meta);
}

/*
  Mobil (do 960 px): úvod stojí na podklade stránky ako na počítači, bez listu
  okolo. Namiesto pripnutého listu má každý krok pod textom kartu s výrezom
  svojho stavu (data-card), ktorá sa vypĺňa pri posúvaní (story.js). Na počítači
  sú karty skryté.
*/
.step-card {
  display: none;
}
@media (max-width: 960px) {
  .sheet__surface,
  .sheet__cols,
  .sheet > .marker,
  .sheet > .cursor {
    display: none;
  }
  .sheet__intro {
    padding: 0;
  }
  .step--margin .step__margin {
    grid-column: 1;
    grid-row: 1 / span 2;
  }
  .step--margin .step__body {
    grid-column: 2;
    grid-row: 1;
  }
  .step-card {
    position: relative;
    display: block;
    grid-column: 1 / -1;
    grid-row: 2;
    margin-bottom: 24px;
    padding: 0 16px 12px;
    border: 1px solid var(--color-border-subtle);
    border-radius: var(--radius-md);
    background: var(--color-surface);
    box-shadow: var(--shadow-lg);
  }
  .step-card .sheet__head {
    align-items: center;
  }
  .step-card .sheet__title {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .step-card .status,
  .step-card .status-quiet {
    flex: none;
    white-space: nowrap;
  }
  .step-card .sheet__line {
    grid-template-columns: 44px minmax(0, 1fr);
    gap: 10px;
    padding: 10px 0;
  }
  /* Menovka bez merania šírky: obe mená v jednej bunke, slot má šírku dlhšieho. */
  .step-card .who__slot {
    display: inline-grid;
  }
  .step-card .who__from,
  .step-card .who__to {
    position: static;
    grid-area: 1 / 1;
    justify-self: start;
  }
  .step-card .who.is-named {
    --t: 1;
  }
  .step-card__call {
    margin-top: 12px;
    padding: 6px;
    box-shadow: none;
  }
  .step-card__call .call__grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 4px;
  }
  .step-card__call .tile {
    aspect-ratio: 1;
    place-items: start center;
    padding-top: 12%;
  }
  .step-card__call .tile__face {
    width: 44%;
    font-size: var(--font-size-caption);
  }
  .step-card__call .tile__name {
    left: 3px;
    right: 3px;
    bottom: 3px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .step-card .sheet__protocol {
    padding: 0;
    border: 0;
    opacity: 1;
  }
}