/* =====================================================================
   PNDA — marketing.css
   Veřejná část (paleta P4 Ledger) + dvoupanelové přihlašovací obrazovky
   (paleta P5 Cobalt). Obě čtou stejné sémantické tokeny, proto zde
   nejsou žádné natvrdo psané barvy — vše přes var(--surface-*),
   var(--fg), var(--accent) atd.

   Předpokládá načtené: tokens.css → base.css → components.css
   Mobile-first: základ je mobil, rozšíření v min-width dotazech.
   Breakpointy: 560 / 860 / 1100 / 1440 / 1600 / 1920
   ===================================================================== */


/* ── Hlavička veřejné části ────────────────────────────────────────── */

.mhead {
  position: sticky;
  top: 0;
  z-index: var(--z-sticky);
  background: color-mix(in srgb, var(--surface-1) 86%, transparent);
  backdrop-filter: blur(14px) saturate(140%);
  -webkit-backdrop-filter: blur(14px) saturate(140%);
  border-bottom: 1px solid transparent;
  transition: border-color var(--dur) var(--ease),
              background-color var(--dur) var(--ease);
}

/* Stav nastavuje JS po odscrollování stránky */
.mhead[data-scrolled="true"] {
  border-bottom-color: var(--line);
}

.mhead__inner {
  display: flex;
  align-items: center;
  gap: var(--space-6);
  height: 76px;
}

.mhead__brand {
  display: inline-flex;
  align-items: center;
  gap: var(--space-3);
  color: var(--fg);
  text-decoration: none;
  flex: none;
}

.mhead__brand:focus-visible {
  outline: none;
  border-radius: var(--radius-sm);
  box-shadow: var(--ring);
}

.mhead__nav {
  display: none;
  align-items: center;
  gap: var(--space-1);
  margin-left: var(--space-8);
}

.mhead__link {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: 8px 14px;
  border-radius: var(--radius-pill);
  font-weight: 600;
  font-size: var(--text-sm);
  line-height: 1.2;
  color: var(--fg-muted);
  text-decoration: none;
  white-space: nowrap;
  transition: color var(--dur-fast) var(--ease),
              background-color var(--dur-fast) var(--ease);
}

.mhead__link:hover {
  color: var(--fg);
  background: var(--surface-2);
}

.mhead__link:focus-visible {
  outline: none;
  box-shadow: var(--ring);
}

.mhead__link--active,
.mhead__link[aria-current="page"] {
  color: var(--fg);
}

.mhead__actions {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: var(--space-3);
}

.mhead__burger {
  display: inline-grid;
}

/* Rozbalovací mobilní navigace pod hlavičkou */
.mnav-mobile {
  display: none;
  gap: var(--space-1);
  padding: var(--space-4);
  background: var(--surface-2);
  border-bottom: 1px solid var(--line);
}

.mnav-mobile[data-open="true"] {
  display: grid;
  animation: mnav-slide var(--dur) var(--ease-out) both;
}

.mnav-mobile__link {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-4);
  border-radius: var(--radius);
  font-weight: 600;
  font-size: var(--text-base);
  color: var(--fg-muted);
  text-decoration: none;
  transition: color var(--dur-fast) var(--ease),
              background-color var(--dur-fast) var(--ease);
}

.mnav-mobile__link:hover {
  color: var(--fg);
  background: var(--surface-3);
}

.mnav-mobile__link:focus-visible {
  outline: none;
  box-shadow: var(--ring);
}

.mnav-mobile__link--active,
.mnav-mobile__link[aria-current="page"] {
  color: var(--fg);
  background: var(--surface-3);
}

.mnav-mobile__actions {
  display: grid;
  gap: var(--space-3);
  margin-top: var(--space-3);
  padding-top: var(--space-4);
  border-top: 1px solid var(--line);
}

@keyframes mnav-slide {
  from { opacity: 0; transform: translateY(-8px); }
  to   { opacity: 1; transform: none; }
}

@media (min-width: 1100px) {
  .mhead__nav { display: flex; }
  .mhead__burger { display: none; }
  .mnav-mobile,
  .mnav-mobile[data-open="true"] { display: none; }
}


/* ── Hero ──────────────────────────────────────────────────────────── */

.hero {
  position: relative;
  overflow: hidden;
  padding-block: clamp(56px, 7vw, 120px);
}

/* Dekorace: rozostřený akcentní kruh */
.hero::before {
  content: "";
  position: absolute;
  top: -18%;
  right: -10%;
  width: min(760px, 70vw);
  aspect-ratio: 1;
  background: radial-gradient(circle at center,
              var(--accent) 0%,
              color-mix(in srgb, var(--accent) 40%, transparent) 45%,
              transparent 70%);
  opacity: .12;
  filter: blur(60px);
  pointer-events: none;
  z-index: 0;
}

/* Dekorace: jemná mřížka linek */
.hero::after {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    repeating-linear-gradient(to right, var(--line) 0 1px, transparent 1px 96px),
    repeating-linear-gradient(to bottom, var(--line) 0 1px, transparent 1px 96px);
  /* Maska pracuje s alfou, barva je proto jen nosič (currentColor) */
  -webkit-mask-image: radial-gradient(ellipse at 50% 0%, currentColor 0%, transparent 78%);
  mask-image: radial-gradient(ellipse at 50% 0%, currentColor 0%, transparent 78%);
  opacity: .35;
  pointer-events: none;
  z-index: 0;
}

[data-theme="dark"] .hero::after {
  opacity: .12;
}

.hero__inner {
  position: relative;
  z-index: 1;
  display: grid;
  gap: clamp(40px, 5vw, 88px);
  align-items: center;
}

.hero__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: 6px 14px;
  border-radius: var(--radius-pill);
  background: var(--accent-soft);
  color: var(--accent);
  font-size: var(--text-xs);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .08em;
  line-height: 1.2;
}

/* Tečka před textem — vlastní, aby nebyla v HTML */
.hero__eyebrow::before {
  content: "";
  width: 7px;
  height: 7px;
  border-radius: var(--radius-pill);
  background: currentColor;
  flex: none;
}

.hero__title {
  margin-top: var(--space-5);
  font-size: var(--text-display);
  font-weight: 800;
  line-height: 1.02;
  letter-spacing: -0.035em;
  max-width: 15ch;
  text-wrap: balance;
}

/* Zvýrazněné slovo v nadpisu — akcent + dekorativní podtržení */
.hero__title em {
  font-style: normal;
  color: var(--accent);
  /* Jemné podtržení, ne zvýrazňovač — na tmavém pozadí by silná plocha
     překryla samotné písmo. */
  background-image: linear-gradient(180deg,
                    transparent 0%,
                    color-mix(in srgb, var(--accent) 26%, transparent) 100%);
  background-repeat: no-repeat;
  background-size: 100% 0.14em;
  /* Pod dotahy písmen, ať neškrtá přes „š" a „u" */
  background-position: left calc(100% + 0.06em);
}

.hero__text {
  margin-top: var(--space-5);
  max-width: 56ch;
  font-size: var(--text-lg);
  color: var(--fg-muted);
}

.hero__cta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-4);
  margin-top: var(--space-8);
}

.hero__note {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  margin-top: var(--space-4);
  font-size: var(--text-sm);
  color: var(--fg-muted);
}

.hero__note .icon {
  color: var(--accent);
  flex: none;
}

.hero__proof {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-6);
  margin-top: var(--space-10);
  padding-top: var(--space-6);
  border-top: 1px solid var(--line);
}

.hero__proofitem {
  display: grid;
  gap: 2px;
}

.hero__proofitem strong {
  font-family: var(--pnda-font-mono);
  font-variant-numeric: tabular-nums;
  font-size: var(--text-h2);
  font-weight: 700;
  line-height: 1.1;
  color: var(--fg);
}

.hero__proofitem span {
  font-size: var(--text-xs);
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--fg-muted);
}

/* Pravý sloupec — pod 1100px se zobrazuje pod textem, nikdy se neskrývá */
.hero__visual {
  position: relative;
}

@media (min-width: 1100px) {
  .hero {
    min-height: min(88vh, 900px);
    display: grid;
    align-items: center;
  }

  .hero__inner {
    grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
  }

  .hero__visual {
    aspect-ratio: 4 / 3.4;
  }

  .hero__visual > .board {
    position: absolute;
    inset: 0;
  }
}

@media (min-width: 1920px) {
  .hero__inner {
    gap: var(--space-12);
  }

  .hero__proof {
    gap: var(--space-8);
  }
}


/* ── Motiv značky 3c Break ─────────────────────────────────────────── */

.breakmark {
  display: grid;
  gap: clamp(8px, 1.2vw, 16px);
  width: fit-content;
  /* Řádky mají šířku v %, proto potřebují referenční šířku bloku */
  min-width: var(--breakmark-size, clamp(120px, 14vw, 240px));
}

.breakmark__row {
  height: clamp(14px, 2vw, 26px);
  border-radius: var(--radius-pill);
  background: currentColor;
}

.breakmark__row--1 { width: 64%; }

/* Prostřední řádek MUSÍ přesahovat oba krajní — to je celá myšlenka značky */
.breakmark__row--2 {
  width: 104%;
  margin-left: -12%;
  background: var(--accent);
}

.breakmark__row--3 { width: 44%; }

/* Živý motiv značky.
   Krajní řádky pulzují proti sobě, akcentní se přes ně přelévá s přesahem
   a v nejširší fázi krátce zesvětlá. Rytmus je rychlejší než dech
   a fáze jsou posunuté, aby to nevypadalo jako logo, které jen dýchá. */
.breakmark--animated .breakmark__row--1 {
  animation: breakmark-row1 2.6s cubic-bezier(.45, .05, .25, 1) infinite;
}

.breakmark--animated .breakmark__row--2 {
  animation: breakmark-row2 1.9s cubic-bezier(.5, 0, .3, 1) infinite;
  transform-origin: center;
  will-change: width, margin-left, filter;
}

.breakmark--animated .breakmark__row--3 {
  animation: breakmark-row3 2.6s cubic-bezier(.45, .05, .25, 1) infinite;
  animation-delay: -1.3s;
}

@keyframes breakmark-row1 {
  0%, 100% { width: 52%; opacity: .75; }
  38%      { width: 78%; opacity: 1; }
  62%      { width: 60%; opacity: .85; }
}

@keyframes breakmark-row2 {
  0%, 100% { width: 88%;  margin-left: -4%;  filter: none; }
  30%      { width: 132%; margin-left: -26%; filter: brightness(1.35); }
  55%      { width: 104%; margin-left: -12%; filter: brightness(1.05); }
  78%      { width: 122%; margin-left: -20%; filter: brightness(1.2); }
}

@keyframes breakmark-row3 {
  0%, 100% { width: 34%; opacity: .7; }
  38%      { width: 58%; opacity: 1; }
  62%      { width: 40%; opacity: .8; }
}


/* ── Živý ukázkový panel v hero (board) ─────────────────────────────────
   Panel vypráví jeden průchod analýzou a jede v nekonečné smyčce.
   Jeden cyklus trvá --board-cycle (8 s). Klíčové snímky na 0 % a 100 %
   jsou totožné, takže se smyčka zavírá bez trhnutí — návrat (boomerang)
   je přímo součástí časové osy, posledních ~14 % cyklu.

     0–4 %      klid, panel čeká
     4–30 %     SKENOVÁNÍ  dva průjezdy scan pruhu, řádky se prosvěcují
                           shora dolů, čísla skáčou mezi průběžnými hodnotami
     30–50 %    HODNOCENÍ  skóre se usadí, každý řádek dostane verdikt
                           a barvu (--down zamítnuto, --warn sledovat,
                           --accent vybráno)
     50–70 %    VÝBĚR      zamítnuté řádky zeslábnou a stáhnou se doleva,
                           vítěz se zvětší a vysune dopředu, v patičce se
                           zleva rozjede jeho karta
     70–86 %    VÝDRŽ      vítěz drží
     86–100 %   NÁVRAT     vše se plynule vrátí do výchozího stavu

   Řádky startují postupně: --i (inline v šabloně) × --board-stagger.
   Patička má stejný posun jako vítězný řádek (--board-pick).
   Barvy jdou výhradně přes tokeny, --verdict je jen přepínač mezi nimi.
   ────────────────────────────────────────────────────────────────────── */

.board {
  --board-cycle:   8s;      /* délka jednoho cyklu */
  --board-stagger: .16s;    /* posun startu mezi sousedními řádky */
  --board-pick:    3;       /* index vítězného řádku, přepisuje šablona */
  --board-rh:      1.35rem; /* výška jednoho políčka ve střídačce hodnot */
  position: relative;
  display: flex;
  flex-direction: column;
  min-height: 340px;
  background: var(--surface-2);
  border: 1px solid var(--line);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-3);
  transition: transform var(--dur-slow) var(--ease),
              box-shadow var(--dur-slow) var(--ease);
}

/* Vybraný řádek se vysouvá ven z obrysu, panel proto nesmí ořezávat.
   Zaoblení tedy drží hlavička a patička samy. */
.board__head {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-5);
  border-bottom: 1px solid var(--line);
  border-radius: calc(var(--radius-xl) - 1px) calc(var(--radius-xl) - 1px) 0 0;
  background: var(--surface-3);
  flex: none;
  --board-rh: 1.05rem;
}

.board__dot {
  width: 10px;
  height: 10px;
  border-radius: var(--radius-pill);
  background: var(--fg-muted);
  flex: none;
}

.board__dot:nth-of-type(1) { background: var(--down); }
.board__dot:nth-of-type(2) { background: var(--warn); }
.board__dot:nth-of-type(3) { background: var(--up); }

.board__title {
  flex: none;
  width: 8.2em;
  margin-left: var(--space-3);
  font-size: var(--text-xs);
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--fg-muted);
}

.board__count {
  display: flex;
  align-items: center;
  gap: .4em;
  margin-left: auto;
  font-family: var(--pnda-font-mono);
  font-variant-numeric: tabular-nums;
  font-size: var(--text-2xs);
  color: var(--fg-muted);
}

.board__count .board__roll {
  width: 2.6em;
  text-align: right;
}

.board__countsuf {
  opacity: .6;
}

/* ── Střídačka hodnot ────────────────────────────────────────────────
   Několik <span> naskládaných na sobě, animace přepíná jejich opacity.
   Výchozí stav zajišťuje animation-fill-mode: both — proto tu není
   žádný span natvrdo viditelný. */
.board__roll {
  position: relative;
  display: block;
  height: var(--board-rh);
}

.board__roll > span {
  position: absolute;
  inset: 0;
  opacity: 0;
  line-height: var(--board-rh);
  white-space: nowrap;
  animation-duration: var(--board-cycle);
  animation-timing-function: linear;
  animation-iteration-count: infinite;
  animation-fill-mode: both;
  animation-delay: calc(var(--i, 0) * var(--board-stagger));
}

.board__roll > span:nth-child(1) { animation-name: board-roll-1; }
.board__roll > span:nth-child(2) { animation-name: board-roll-2; }
.board__roll > span:nth-child(3) { animation-name: board-roll-3; }
.board__roll > span:nth-child(4) { animation-name: board-roll-4; }

/* Dvoustavová varianta: „měří se" → verdikt */
.board__roll--pair > span:nth-child(1) { animation-name: board-pair-1; }
.board__roll--pair > span:nth-child(2) { animation-name: board-pair-2; }

/* Název fáze v hlavičce — čtyři stavy vázané na fáze cyklu */
.board__roll--phase > span:nth-child(1) { animation-name: board-phase-1; }
.board__roll--phase > span:nth-child(2) { animation-name: board-phase-2; }
.board__roll--phase > span:nth-child(3) { animation-name: board-phase-3; }
.board__roll--phase > span:nth-child(4) { animation-name: board-phase-4; }

/* ── Seznam kandidátů ───────────────────────────────────────────────── */

.board__body {
  position: relative;
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  /* Na širokých displejích je panel vyšší, než kolik řádky potřebují —
     zbytek se rozpustí do mezer mezi ně, ne do jednoho prázdného pruhu. */
  justify-content: space-between;
  gap: 2px;
  padding: var(--space-2) var(--space-3);
  min-height: 0;
}

/* Pruh projíždějící seznamem shora dolů */
.board__scan {
  position: absolute;
  left: var(--space-2);
  right: var(--space-2);
  top: 0;
  height: 17%;
  border-radius: var(--radius);
  background: linear-gradient(180deg,
              transparent 0%,
              color-mix(in srgb, var(--accent) 22%, transparent) 65%,
              transparent 100%);
  box-shadow: 0 1px 0 color-mix(in srgb, var(--accent) 75%, transparent);
  opacity: 0;
  pointer-events: none;
  animation: board-scan var(--board-cycle) linear infinite both;
}

.board__row {
  position: relative;
  display: grid;
  grid-template-columns: 2.1em minmax(0, 1fr) auto auto;
  gap: var(--space-3);
  align-items: center;
  flex: 1 1 auto;
  min-height: 34px;
  max-height: 72px;
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius);
  font-size: clamp(0.875rem, 0.82vw, 1.0625rem);
  background-color: transparent;
  animation: board-row var(--board-cycle) var(--ease) infinite both;
  animation-delay: calc(var(--i, 0) * var(--board-stagger));
  will-change: transform, opacity, background-color;
}

/* Verdikt je jen volba tokenu, žádná nová barva */
.board__row--down { --verdict: var(--down); }
.board__row--warn { --verdict: var(--warn); }
.board__row--pick {
  --verdict: var(--accent);
  z-index: 2;
  animation-name: board-row-pick;
}

/* Měřicí proužek pod řádkem — během skenování kmitá, pak se usadí na skóre */
.board__row::after {
  content: "";
  position: absolute;
  left: var(--space-3);
  right: var(--space-3);
  bottom: 2px;
  height: 2px;
  border-radius: var(--radius-pill);
  background-color: var(--verdict, var(--fg-muted));
  transform-origin: left center;
  transform: scaleX(var(--score, .5));
  opacity: 0;
  animation: board-meter var(--board-cycle) var(--ease) infinite both;
  animation-delay: calc(var(--i, 0) * var(--board-stagger));
}

.board__rank {
  font-family: var(--pnda-font-mono);
  font-variant-numeric: tabular-nums;
  font-size: var(--text-xs);
  color: var(--fg-muted);
}

.board__name {
  display: flex;
  align-items: baseline;
  gap: var(--space-2);
  min-width: 0;
}

.board__name b {
  font-family: var(--pnda-font-mono);
  font-weight: 700;
  letter-spacing: .02em;
  color: var(--fg);
}

.board__name em {
  font-style: normal;
  font-size: var(--text-xs);
  color: var(--fg-muted);
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.board__val {
  width: 3.4em;
  text-align: right;
  font-family: var(--pnda-font-mono);
  font-variant-numeric: tabular-nums;
  color: var(--fg-muted);
}

/* Usazená hodnota je ta poslední — ta jediná se čte jako výsledek */
.board__val > span:last-child {
  font-weight: 700;
  color: var(--fg);
}

.board__chg {
  width: 6.2em;
  text-align: right;
  font-family: var(--pnda-font-mono);
  font-variant-numeric: tabular-nums;
  font-size: var(--text-xs);
  color: var(--fg-muted);
}

/* Verdikt se přimíchá k popředí, ať drží kontrast v obou tématech */
.board__chg > span:last-child {
  font-weight: 700;
  color: color-mix(in srgb, var(--verdict) 80%, var(--fg));
}

.board__row--pick .board__chg > span:last-child {
  color: var(--fg);
  text-transform: uppercase;
  letter-spacing: .04em;
}

/* ── Patička: sem se vítěz vytáhne ──────────────────────────────────── */

.board__pick {
  position: relative;
  flex: none;
  height: 72px;
  border-top: 1px solid var(--line);
  border-radius: 0 0 calc(var(--radius-xl) - 1px) calc(var(--radius-xl) - 1px);
  background: var(--surface-3);
}

.board__pickwait {
  position: absolute;
  inset: var(--space-3) var(--space-4);
  display: grid;
  place-items: center;
  border: 1px dashed var(--line);
  border-radius: var(--radius);
  font-size: var(--text-2xs);
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--fg-muted);
  animation: board-wait var(--board-cycle) var(--ease) infinite both;
  animation-delay: calc(var(--board-pick) * var(--board-stagger));
}

.board__pickcard {
  position: absolute;
  inset: var(--space-3) var(--space-4);
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: var(--space-3);
  align-items: center;
  padding-inline: var(--space-4);
  border-radius: var(--radius);
  opacity: 0;
  animation: board-pickcard var(--board-cycle) var(--ease) infinite both;
  animation-delay: calc(var(--board-pick) * var(--board-stagger));
}

/* Výplň karty se rozjíždí zleva — to je ten okamžik „rozšíření a usazení" */
.board__pickcard::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  border-radius: inherit;
  border: 1px solid color-mix(in srgb, var(--accent) 45%, transparent);
  background: linear-gradient(90deg,
              var(--accent-soft) 0%,
              color-mix(in srgb, var(--accent) 14%, var(--surface-3)) 100%);
  box-shadow: 0 8px 22px -6px color-mix(in srgb, var(--accent) 40%, transparent);
  transform-origin: left center;
  transform: scaleX(.12);
  animation: board-pickfill var(--board-cycle) var(--ease) infinite both;
  animation-delay: calc(var(--board-pick) * var(--board-stagger));
}

.board__pickcard > * {
  position: relative;
  z-index: 1;
}

.board__picktag {
  font-size: var(--text-2xs);
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--accent);
}

.board__pickname {
  display: flex;
  align-items: baseline;
  gap: var(--space-2);
  min-width: 0;
}

.board__pickname b {
  font-family: var(--pnda-font-mono);
  font-size: var(--text-lg);
  font-weight: 700;
  color: var(--fg);
}

.board__pickname em {
  font-style: normal;
  font-size: var(--text-xs);
  color: var(--fg-muted);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.board__pickval {
  font-family: var(--pnda-font-mono);
  font-variant-numeric: tabular-nums;
  font-size: var(--text-h3);
  font-weight: 700;
  color: var(--fg);
}

/* Krátké potvrzení celého panelu ve chvíli výběru */
.board::after {
  content: "";
  position: absolute;
  inset: -1px;
  border-radius: inherit;
  border: 1px solid transparent;
  pointer-events: none;
  animation: board-glow var(--board-cycle) var(--ease) infinite both;
}

/* Sparkline zůstává kvůli designovému kontraktu (DESIGN-SPEC §4);
   živá ukázka ji nevykresluje. */
.board__spark {
  display: none;
  width: 64px;
  height: 20px;
  color: var(--fg-muted);
}

.board__spark.is-up   { color: var(--up); }
.board__spark.is-down { color: var(--down); }

.board__spark path,
.board__spark polyline {
  fill: none;
  stroke: currentColor;
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}

@media (min-width: 1100px) {
  /* Lehká 3D perspektiva jen na velkých displejích */
  .board {
    transform: perspective(1200px) rotateY(-6deg) rotateX(3deg);
  }

  .board:hover {
    transform: perspective(1200px) rotateY(0deg) rotateX(0deg);
  }
}

/* ── Klíčové snímky ─────────────────────────────────────────────────── */

/* Řádek, který neuspěl: dva průjezdy skenu, verdikt, ústup, návrat */
@keyframes board-row {
  0%, 4% {
    opacity: .5;
    transform: translateX(0) scale(1);
    background-color: color-mix(in srgb, var(--verdict) 0%, transparent);
    box-shadow: inset 0 0 0 0 transparent;
  }
  9%  { opacity: 1;   background-color: color-mix(in srgb, var(--fg) 9%, transparent); }
  14% { opacity: .62; background-color: color-mix(in srgb, var(--fg) 0%, transparent); }
  20% { opacity: 1;   background-color: color-mix(in srgb, var(--fg) 7%, transparent); }
  /* Do konce skenování nesmí prosvítat barva verdiktu — ještě není znám */
  26% {
    opacity: .72;
    background-color: color-mix(in srgb, var(--fg) 0%, transparent);
    box-shadow: inset 0 0 0 0 transparent;
  }
  36%, 48% {
    opacity: 1;
    transform: translateX(0) scale(1);
    background-color: color-mix(in srgb, var(--verdict) 15%, transparent);
    box-shadow: inset 2px 0 0 0 var(--verdict);
  }
  60%, 86% {
    opacity: .3;
    transform: translateX(-8px) scale(.965);
    background-color: color-mix(in srgb, var(--verdict) 5%, transparent);
    box-shadow: inset 2px 0 0 0 color-mix(in srgb, var(--verdict) 35%, transparent);
  }
  100% {
    opacity: .5;
    transform: translateX(0) scale(1);
    background-color: color-mix(in srgb, var(--verdict) 0%, transparent);
    box-shadow: inset 0 0 0 0 transparent;
  }
}

/* Vítěz: stejný začátek, ale ve fázi výběru se zvětší a vysune dopředu */
@keyframes board-row-pick {
  0%, 4% {
    opacity: .5;
    transform: translateX(0) scale(1);
    background-color: color-mix(in srgb, var(--accent) 0%, transparent);
    box-shadow: inset 0 0 0 0 transparent, 0 0 0 0 transparent;
  }
  9%  { opacity: 1;   background-color: color-mix(in srgb, var(--fg) 9%, transparent); }
  14% { opacity: .65; background-color: color-mix(in srgb, var(--fg) 0%, transparent); }
  20% { opacity: 1;   background-color: color-mix(in srgb, var(--fg) 7%, transparent); }
  26% {
    opacity: .78;
    background-color: color-mix(in srgb, var(--fg) 0%, transparent);
    box-shadow: inset 0 0 0 0 transparent, 0 0 0 0 transparent;
  }
  36% {
    opacity: 1;
    transform: translateX(0) scale(1);
    background-color: color-mix(in srgb, var(--accent) 16%, transparent);
    box-shadow: inset 2px 0 0 0 var(--accent), 0 0 0 0 transparent;
  }
  52%, 86% {
    opacity: 1;
    transform: translateX(6px) scale(1.035);
    background-color: var(--accent-soft);
    box-shadow: inset 3px 0 0 0 var(--accent),
                0 12px 28px -8px color-mix(in srgb, var(--accent) 55%, transparent);
  }
  100% {
    opacity: .5;
    transform: translateX(0) scale(1);
    background-color: color-mix(in srgb, var(--accent) 0%, transparent);
    box-shadow: inset 0 0 0 0 transparent, 0 0 0 0 transparent;
  }
}

/* Měřicí proužek — během skenování kmitá, ve fázi hodnocení se usadí */
@keyframes board-meter {
  0%, 4% {
    opacity: 0;
    transform: scaleX(.08);
    background-color: color-mix(in srgb, var(--fg) 45%, transparent);
  }
  9%  { opacity: .45; transform: scaleX(.58); }
  14% { transform: scaleX(.26); }
  20% { transform: scaleX(.74); }
  26% {
    transform: scaleX(.38);
    background-color: color-mix(in srgb, var(--fg) 45%, transparent);
  }
  36%, 86% {
    opacity: .8;
    transform: scaleX(var(--score, .5));
    background-color: var(--verdict);
  }
  100% {
    opacity: 0;
    transform: scaleX(.08);
    background-color: color-mix(in srgb, var(--fg) 45%, transparent);
  }
}

/* Scan pruh: dva průjezdy seznamem, mezi nimi neviditelný skok zpět nahoru */
@keyframes board-scan {
  0%, 3%    { transform: translateY(-110%); opacity: 0; }
  5%        { opacity: .95; }
  15%       { transform: translateY(455%);  opacity: .95; }
  16%       { transform: translateY(455%);  opacity: 0; }
  16.5%     { transform: translateY(-110%); opacity: 0; }
  18%       { opacity: .8; }
  28%       { transform: translateY(455%);  opacity: .8; }
  30%, 100% { transform: translateY(455%);  opacity: 0; }
}

/* Střídačka hodnot: tři průběžné hodnoty, čtvrtá usazená, pak návrat na první.
   Okna se nepřekrývají — odcházející hodnota zhasne dřív, než naskočí další,
   jinak by se texty na okamžik četly přes sebe. */
@keyframes board-roll-1 {
  0%, 9%      { opacity: 1; }
  10.5%, 93%  { opacity: 0; }
  95%, 100%   { opacity: 1; }
}

@keyframes board-roll-2 {
  0%, 10.5%   { opacity: 0; }
  12%, 17%    { opacity: 1; }
  18.5%, 100% { opacity: 0; }
}

@keyframes board-roll-3 {
  0%, 18.5%   { opacity: 0; }
  20%, 25%    { opacity: 1; }
  26.5%, 100% { opacity: 0; }
}

@keyframes board-roll-4 {
  0%, 26.5%   { opacity: 0; }
  28%, 91.5%  { opacity: 1; }
  93%, 100%   { opacity: 0; }
}

/* „měří se" → verdikt */
@keyframes board-pair-1 {
  0%, 30.5%   { opacity: 1; }
  32%, 92%    { opacity: 0; }
  93.5%, 100% { opacity: 1; }
}

@keyframes board-pair-2 {
  0%, 32%     { opacity: 0; }
  33.5%, 90.5% { opacity: 1; }
  92%, 100%   { opacity: 0; }
}

/* Název fáze v hlavičce */
@keyframes board-phase-1 {
  0%, 27%     { opacity: 1; }
  28.5%, 93%  { opacity: 0; }
  94.5%, 100% { opacity: 1; }
}

@keyframes board-phase-2 {
  0%, 28.5%   { opacity: 0; }
  30%, 46%    { opacity: 1; }
  47.5%, 100% { opacity: 0; }
}

@keyframes board-phase-3 {
  0%, 47.5%   { opacity: 0; }
  49%, 66%    { opacity: 1; }
  67.5%, 100% { opacity: 0; }
}

@keyframes board-phase-4 {
  0%, 67.5%   { opacity: 0; }
  69%, 91.5%  { opacity: 1; }
  93%, 100%   { opacity: 0; }
}

/* Placeholder v patičce ustoupí kartě vítěze a na konci se vrátí */
@keyframes board-wait {
  0%, 44%   { opacity: 1; }
  50%, 91%  { opacity: 0; }
  95%, 100% { opacity: 1; }
}

/* Karta vítěze přiletí shora do patičky — text naskočí až po výplni */
@keyframes board-pickcard {
  0%, 50%   { opacity: 0; transform: translateY(-16px); }
  60%, 86%  { opacity: 1; transform: translateY(0); }
  91%, 100% { opacity: 0; transform: translateY(-16px); }
}

/* Výplň karty se rozjede zleva a při návratu se zase složí */
@keyframes board-pickfill {
  0%, 47%   { opacity: 0; transform: scaleX(.12); }
  51%       { opacity: 1; }
  58%, 86%  { opacity: 1; transform: scaleX(1); }
  91%, 100% { opacity: 0; transform: scaleX(.12); }
}

/* Panel na okamžik potvrdí výběr — jen náznak, ne světelná show */
@keyframes board-glow {
  0%, 48%   { border-color: transparent; box-shadow: 0 0 0 0 transparent; }
  58%       {
    border-color: color-mix(in srgb, var(--accent) 30%, transparent);
    box-shadow: 0 0 22px 0 color-mix(in srgb, var(--accent) 14%, transparent);
  }
  74%, 100% { border-color: transparent; box-shadow: 0 0 0 0 transparent; }
}

/* ── Omezený pohyb ──────────────────────────────────────────────────
   Bez animace zůstane panel v čitelném koncovém stavu: usazená skóre,
   verdikty a jeden zvýrazněný vybraný řádek. */
@media (prefers-reduced-motion: reduce) {
  .board::after,
  .board__scan,
  .board__row,
  .board__row::after,
  /* :nth-child(n) jen dorovnává váhu selektoru výše, aby vypnutí zabralo */
  .board__roll > span:nth-child(n),
  .board__pickwait,
  .board__pickcard,
  .board__pickcard::before {
    animation: none;
  }

  .board__scan,
  .board__pickwait {
    opacity: 0;
  }

  .board__row {
    opacity: 1;
    transform: none;
    background-color: color-mix(in srgb, var(--verdict) 10%, transparent);
    box-shadow: inset 2px 0 0 0 var(--verdict);
  }

  .board__row--pick {
    background-color: var(--accent-soft);
    box-shadow: inset 3px 0 0 0 var(--accent);
  }

  .board__row::after {
    opacity: .8;
  }

  .board__roll > span:last-child {
    opacity: 1;
  }

  .board__pickcard {
    opacity: 1;
  }

  .board__pickcard::before {
    opacity: 1;
    transform: none;
  }
}


/* ── Sekce ─────────────────────────────────────────────────────────── */

.section {
  padding-block: clamp(64px, 8vw, 140px);
}

.section--alt {
  background: var(--surface-2);
}

/* Hlavička sekce smí být užší než rail (jde o souvislý text), ale ne „linka" —
   drží se nad prahem 900 px a na širokých displejích roste s railem. */
.section__head {
  max-width: min(72ch, calc(var(--rail) * 0.62));
  margin-bottom: clamp(40px, 5vw, 72px);
}

.section--center .section__head {
  margin-inline: auto;
  text-align: center;
}

.section__eyebrow {
  display: block;
  font-size: var(--text-xs);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .1em;
  color: var(--accent);
}

.section__title {
  margin-top: var(--space-3);
  font-size: var(--text-h1);
  font-weight: 800;
  line-height: 1.1;
  letter-spacing: -0.025em;
  text-wrap: balance;
}

.section__text {
  margin-top: var(--space-4);
  font-size: var(--text-lg);
  color: var(--fg-muted);
}


/* ── Bento mřížka ──────────────────────────────────────────────────── */

.bento {
  display: grid;
  gap: var(--space-5);
  grid-template-columns: repeat(2, 1fr);
}

.bento__tile {
  /* Pod 860px je každá dlaždice přes celou (dvousloupcovou) šířku */
  grid-column: span 2;
  grid-row: span 1;
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  padding: clamp(24px, 2.2vw, 40px);
  background: var(--surface-2);
  border: 1px solid var(--line);
  border-radius: var(--radius-xl);
  transition: transform var(--dur) var(--ease),
              border-color var(--dur) var(--ease),
              box-shadow var(--dur) var(--ease);
}

.bento__tile:hover {
  transform: translateY(-3px);
  border-color: color-mix(in srgb, var(--accent) 40%, var(--line));
  box-shadow: var(--shadow-2);
}

.bento__tile--accent {
  background: linear-gradient(150deg, var(--accent-soft), var(--surface-2));
}

.bento__icon {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border-radius: var(--radius-pill);
  background: var(--accent-soft);
  color: var(--accent);
  flex: none;
}

.bento__title {
  font-size: var(--text-h3);
  font-weight: 700;
  line-height: 1.2;
}

.bento__text {
  font-size: var(--text-sm);
  color: var(--fg-muted);
}

.bento__figure {
  margin-top: auto;
  position: relative;
}

.bento__figure img,
.bento__figure svg {
  display: block;
  max-width: 100%;
  height: auto;
}

@media (min-width: 860px) {
  .bento {
    grid-template-columns: repeat(4, 1fr);
  }

  .bento__tile {
    grid-column: span var(--span, 2);
    grid-row: span var(--rows, 1);
  }

  .bento__tile--wide { --span: 4; }
  .bento__tile--tall { --rows: 2; }
}

@media (min-width: 1440px) {
  .bento {
    grid-template-columns: repeat(6, 1fr);
    gap: var(--space-6);
  }
}


/* ── Kroky ─────────────────────────────────────────────────────────── */

.steps {
  display: grid;
  gap: var(--space-6);
  counter-reset: step;
}

.step {
  display: grid;
  gap: var(--space-3);
  align-content: start;
  padding-top: var(--space-6);
  border-top: 2px solid var(--line);
  counter-increment: step;
  transition: border-color var(--dur) var(--ease);
}

.step::before {
  content: counter(step);
  font-family: var(--pnda-font-mono);
  font-variant-numeric: tabular-nums;
  font-size: var(--text-h2);
  font-weight: 700;
  line-height: 1;
  color: var(--accent);
}

.step--done {
  border-top-color: var(--accent);
}

.step__title {
  font-size: var(--text-h3);
  font-weight: 700;
}

.step__text {
  font-size: var(--text-sm);
  color: var(--fg-muted);
}

@media (min-width: 860px) {
  .steps { grid-template-columns: repeat(2, 1fr); }
}

@media (min-width: 1440px) {
  .steps { grid-template-columns: repeat(4, 1fr); }
}


/* ── Časté dotazy ──────────────────────────────────────────────────── */

.faq {
  display: grid;
  gap: var(--space-3);
  align-items: start;
}

.faq__item {
  background: var(--surface-2);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: var(--space-5);
  transition: border-color var(--dur) var(--ease);
}

.faq__item[open] {
  border-color: color-mix(in srgb, var(--accent) 34%, var(--line));
}

.faq__item > summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  font-weight: 600;
  cursor: pointer;
  list-style: none;
}

.faq__item > summary::-webkit-details-marker {
  display: none;
}

.faq__item > summary:focus-visible {
  outline: none;
  border-radius: var(--radius-sm);
  box-shadow: var(--ring);
}

/* Vlastní ikona +/− vpravo */
.faq__item > summary::after {
  content: "+";
  flex: none;
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  border-radius: var(--radius-pill);
  background: var(--surface-3);
  color: var(--accent);
  font-family: var(--pnda-font-mono);
  font-size: var(--text-lg);
  line-height: 1;
  transition: background-color var(--dur-fast) var(--ease);
}

.faq__item[open] > summary::after {
  content: "–";
  background: var(--accent-soft);
}

.faq__answer {
  margin-top: var(--space-4);
  color: var(--fg-muted);
  font-size: var(--text-sm);
  max-width: 68ch;
}

@media (min-width: 1100px) {
  .faq { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}


/* ── Závěrečná výzva ───────────────────────────────────────────────── */

.cta {
  position: relative;
  overflow: hidden;
  padding: clamp(40px, 5vw, 80px);
  text-align: center;
  background: linear-gradient(160deg,
              var(--surface-2) 0%,
              color-mix(in srgb, var(--accent-soft) 70%, var(--surface-2)) 100%);
  border: 1px solid var(--line);
  border-radius: var(--radius-xl);
}

.cta::before {
  content: "";
  position: absolute;
  left: 50%;
  bottom: -60%;
  width: min(900px, 90%);
  aspect-ratio: 1;
  transform: translateX(-50%);
  background: radial-gradient(circle at center,
              var(--accent) 0%, transparent 68%);
  opacity: .10;
  filter: blur(50px);
  pointer-events: none;
}

.cta > * {
  position: relative;
  z-index: 1;
}

.cta__title {
  font-size: var(--text-h1);
  font-weight: 800;
  line-height: 1.1;
  letter-spacing: -0.025em;
  max-width: 20ch;
  margin-inline: auto;
  text-wrap: balance;
}

.cta__text {
  margin-top: var(--space-4);
  max-width: 60ch;
  margin-inline: auto;
  color: var(--fg-muted);
  font-size: var(--text-lg);
}

.cta__actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--space-4);
  margin-top: var(--space-8);
}


/* ── Pás log ───────────────────────────────────────────────────────── */

.logos {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: var(--space-8);
  opacity: .6;
  filter: grayscale(1);
}

.logos img,
.logos svg {
  display: block;
  max-width: 100%;
  height: auto;
}


/* ── Patička ───────────────────────────────────────────────────────── */

.mfoot {
  border-top: 1px solid var(--line);
  padding-block: var(--space-10) var(--space-8);
  background: var(--surface-2);
}

.mfoot__grid {
  display: grid;
  gap: var(--space-8);
}

.mfoot__brand {
  display: grid;
  gap: var(--space-4);
  align-content: start;
  max-width: 34ch;
}

.mfoot__brandtext {
  font-size: var(--text-sm);
  color: var(--fg-muted);
}

.mfoot__col {
  display: grid;
  gap: var(--space-3);
  align-content: start;
}

.mfoot__title {
  font-size: var(--text-xs);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--fg-muted);
}

.mfoot__link {
  color: var(--fg-muted);
  font-size: var(--text-sm);
  font-weight: 600;
  text-decoration: none;
  width: fit-content;
  transition: color var(--dur-fast) var(--ease);
}

.mfoot__link:hover {
  color: var(--accent);
}

.mfoot__link:focus-visible {
  outline: none;
  border-radius: var(--radius-sm);
  box-shadow: var(--ring);
}

.mfoot__bottom {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  gap: var(--space-4);
  margin-top: var(--space-9);
  padding-top: var(--space-6);
  border-top: 1px solid var(--line);
  font-size: var(--text-sm);
  color: var(--fg-muted);
}

.mfoot__legal {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-5);
}

@media (min-width: 860px) {
  .mfoot__grid {
    grid-template-columns: 2fr 1fr 1fr 1fr;
  }
}

@media (min-width: 1440px) {
  .mfoot__grid {
    grid-template-columns: 2.4fr 1fr 1fr 1fr 1fr;
    gap: var(--space-9);
  }
}


/* ── Dvoupanelové přihlášení ───────────────────────────────────────── */

.split {
  min-height: 100dvh;
  display: grid;
  grid-template-columns: 1fr;
}

.split__brand {
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
  padding: var(--space-6) var(--gutter);
  background: var(--surface-2);
  border-bottom: 1px solid var(--line);
}

/* Dekorativní motiv 3c Break na pozadí panelu (není to logo) */
/* Dekorativní motiv značky v brand panelu.
   Kreslí se skutečnou komponentou .breakmark (kulaté kapsle),
   ne gradienty — ty by daly hranaté pruhy. */
/* Dekorativní motiv značky v brand panelu.
   Sedí v pravém dolním rohu, částečně přeteče ven a panel ho ořízne —
   tím vznikne dojem, že pokračuje za okrajem. */
.split__decor {
  position: absolute;
  right: -10%;
  bottom: -12%;
  width: 72%;
  color: var(--fg);
  opacity: .05;
  transform: rotate(-10deg);
  transform-origin: bottom right;
  pointer-events: none;
  user-select: none;
}

.split__decor .breakmark {
  width: 100%;
  min-width: 0;
  gap: clamp(14px, 2.6vw, 34px);
}

.split__decor .breakmark__row {
  height: clamp(28px, 4.4vw, 62px);
}

/* Na úzkých displejích by dekorace lezla do textu */
@media (max-width: 1099.98px) {
  .split__decor { display: none; }
}

.split__brand > * {
  position: relative;
  z-index: 1;
}

.split__brandtop {
  display: flex;
  align-items: center;
  gap: var(--space-3);
}

.split__claim {
  margin-top: auto;
  font-size: var(--text-h1);
  font-weight: 800;
  line-height: 1.1;
  letter-spacing: -0.025em;
  max-width: 18ch;
  text-wrap: balance;
}

.split__points {
  display: grid;
  gap: var(--space-4);
  font-size: var(--text-sm);
}

.split__point {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  color: var(--fg-muted);
}

.split__point > svg,
.split__pointicon {
  flex: none;
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  border-radius: var(--radius-pill);
  background: var(--accent-soft);
  color: var(--accent);
}

.split__foot {
  margin-top: auto;
  font-size: var(--text-xs);
  color: var(--fg-muted);
}

/* Pod 1100px zůstane jen logo a jednořádkový claim */
.split__brand > .split__hideSm {
  display: none;
}

.split__form {
  display: grid;
  place-items: center;
  padding: clamp(24px, 4vw, 72px) var(--gutter);
}

.authcard {
  width: min(520px, 100%);
  display: grid;
  gap: var(--space-6);
}

.authcard__head {
  display: grid;
  gap: var(--space-2);
}

.authcard__head h1 {
  font-size: var(--text-h2);
  font-weight: 800;
  line-height: 1.15;
  letter-spacing: -0.02em;
}

.authcard__head p {
  color: var(--fg-muted);
}

.authcard__body {
  display: grid;
  gap: var(--space-4);
}

.authcard__foot {
  font-size: var(--text-sm);
  color: var(--fg-muted);
  text-align: center;
}

.authcard .btn--block {
  margin-top: var(--space-2);
}

.authswitch {
  font-size: var(--text-sm);
  text-align: center;
  color: var(--fg-muted);
}

.authswitch a {
  color: var(--accent);
  font-weight: 600;
}

@media (min-width: 1100px) {
  .split {
    grid-template-columns: 46% 54%;
  }

  .split__brand {
    gap: var(--space-8);
    padding: clamp(32px, 4vw, 72px);
    border-bottom: none;
    border-right: 1px solid var(--line);
  }

  .split__brand > .split__hideSm {
    display: grid;
  }
}

@media (min-width: 1600px) {
  .split {
    grid-template-columns: 52% 48%;
  }
}

@media (min-width: 1920px) {
  .authcard {
    width: min(560px, 100%);
  }

  .split__form {
    padding: var(--space-11) var(--space-12);
  }
}


/* ── Stav stránky chyby ────────────────────────────────────────────── */

.errpage {
  min-height: 100dvh;
  display: grid;
  place-items: center;
  align-content: center;
  gap: var(--space-4);
  padding: var(--space-8);
  text-align: center;
}

.errpage__code {
  font-family: var(--pnda-font-mono);
  font-size: clamp(4rem, 12vw, 9rem);
  font-weight: 700;
  line-height: 1;
  color: var(--accent);
}

.errpage__title {
  font-size: var(--text-h2);
  font-weight: 800;
  letter-spacing: -0.02em;
}

.errpage__text {
  max-width: 52ch;
  color: var(--fg-muted);
}

.errpage__actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--space-4);
  margin-top: var(--space-4);
}


/* ── Omezený pohyb ─────────────────────────────────────────────────── */

@media (prefers-reduced-motion: reduce) {
  .breakmark--animated .breakmark__row--1,
  .breakmark--animated .breakmark__row--2,
  .breakmark--animated .breakmark__row--3 {
    animation: none;
  }
  .breakmark--animated .breakmark__row--2 {
    width: 104%;
    margin-left: -12%;
  }

  .mnav-mobile[data-open="true"] {
    animation: none;
  }

  .board,
  .board:hover {
    transform: none;
  }

  .bento__tile:hover {
    transform: none;
  }
}


/* ── Tělo přihlašovacích obrazovek ─────────────────────────────────── */

.page-auth {
  background: var(--surface-1);
  color: var(--fg);
}


/* ── Přepínač vzhledu v brand panelu přihlašovací obrazovky ────────── */

.split__appearance {
  position: relative;
  z-index: 1;
  margin-top: auto;
  padding-top: var(--space-6);
}

@media (min-width: 1100px) {
  .split__appearance {
    margin-top: 0;
  }
}


/* Na telefonu se přepínač vzhledu z hlavičky stěhuje do rozbalovacího
   menu — v řádku s tlačítkem „Vytvořit účet" a burgerem se nevešel
   a odtlačoval celou stránku do strany. */
@media (max-width: 859.98px) {
  .mhead__actions .appearance {
    display: none;
  }
}

.mnav-mobile__appearance {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  padding-top: var(--space-3);
  margin-top: var(--space-2);
  border-top: 1px solid var(--line);
}

@media (min-width: 860px) {
  .mnav-mobile__appearance { display: none; }
}

/* Na nejužších telefonech se hlavička ještě o pár pixelů nevejde —
   stačí utáhnout mezery a odsazení, o obsah se tím nepřijde. */
@media (max-width: 559.98px) {
  .mhead__actions { gap: var(--space-2); }
  .mhead__actions .btn--primary {
    padding-inline: var(--space-3);
    font-size: var(--text-sm);
  }
  /* .rail nastavuje šířku, ne odsazení — zmenšit jde jen mezera uvnitř */
  .mhead__inner { gap: var(--space-3); }
}