/* ==========================================================================
   epozvanka.sk — editor
   Nástroj, nie plagát: pop-art znaky (atramentový rám, tvrdý tieň) ostávajú,
   ale v tichšej dávke — editor sa obsluhuje, nie číta.
   ========================================================================== */

body.is-editor { background: var(--cream); }

/* ── topbar ─────────────────────────────────────────────────────────────── */

.top {
  position: sticky; top: 0; z-index: 40;
  display: flex; align-items: center; gap: 14px;
  padding: 10px clamp(14px, 3vw, 26px);
  background: var(--blue);
  border-bottom: var(--rule) solid var(--ink);
}
.top .logo { font-family: var(--font-display); text-transform: uppercase; }
.top__spacer { margin-left: auto; }
.top__acts { display: flex; gap: 10px; }

/* ── rozloženie ─────────────────────────────────────────────────────────── */

.editor { display: grid; grid-template-columns: 1fr; }

.editor__pane { padding: clamp(18px, 3vw, 30px) clamp(14px, 3vw, 30px) 60px; }
.editor__pane--preview {
  background: var(--blue-deep);
  background-image: radial-gradient(rgba(255, 61, 154, 0.28) 22%, transparent 23%);
  background-size: 18px 18px;
  border-left: var(--rule) solid var(--ink);
}
.editor__sticky { position: sticky; top: calc(66px + clamp(18px, 3vw, 30px)); }

.switch {
  display: flex; gap: 0;
  margin: 12px clamp(14px, 3vw, 30px) 0;
  border: 3px solid var(--ink);
  background: #fff;
}
.switch button {
  flex: 1; padding: 12px 10px;
  background: none; border: 0; cursor: pointer;
  font-weight: 800; font-size: 0.86rem; letter-spacing: 0.08em; text-transform: uppercase;
}
.switch button[aria-pressed="true"] { background: var(--ink); color: var(--yellow); }

/* ── panely ─────────────────────────────────────────────────────────────── */

.panel {
  margin-bottom: clamp(18px, 3vw, 26px);
  background: #fff;
  border: 4px solid var(--ink);
  box-shadow: 6px 6px 0 var(--ink);
}
.panel > summary {
  display: flex; align-items: center; gap: 10px;
  padding: 16px 18px;
  cursor: pointer;
  font-family: var(--font-display);
  font-size: 1rem; text-transform: uppercase; letter-spacing: -0.01em;
  list-style: none;
}
.panel > summary::-webkit-details-marker { display: none; }
.panel > summary::after { content: "+"; margin-left: auto; font-size: 1.4rem; line-height: 1; }
.panel[open] > summary::after { content: "–"; }
.panel[open] > summary { border-bottom: 3px solid var(--ink); }
.panel__body { padding: 20px 18px 24px; }
.panel__hint { margin: -8px 0 18px; font-size: 0.85rem; color: #55555f; }
/* Odkaz na miesto, kde vec naozaj je — stojí NAMIESTO skrytého panela,
   preto vyzerá ako poznámka, nie ako ďalší panel na rozklikanie. */
/* Zámerne NIE flex: pri `display:flex` sa z každého potomka stane vlastná
   položka, takže sa `<strong>` odtrhlo na samostatný riadok a veta sa
   rozpadla na tri. Odmerané na 390 px. Obyčajný text s tlačidlom pod ním. */
.panel__inde {
  margin: 0 0 14px; padding: 12px 14px;
  border: 2px dashed #c9c9d2; border-radius: 10px;
  font-size: 0.85rem; line-height: 1.5; color: #55555f;
}
.panel__inde .btn { display: inline-block; margin-top: 10px; }
.panel__inde strong { color: var(--ink, #101010); }

/* Ktoré polia sú naozaj nutné.

   Porota sa opakovane pýtala, čo musí vyplniť — formulár nemal označené nič
   a človek nevedel, či stačí nadpis. Slovom, nie hviezdičkou: hviezdička je
   dohovor, ktorý treba niekde vysvetliť, a nikto ju nevysvetľuje.
   Nie je to `required` na vstupe — pozvánka sa má dať rozpracovať a uložiť
   aj neúplná; toto je informácia, nie zámok. */
.nutne {
  margin-left: 6px; padding: 1px 6px;
  background: var(--zlta, #ffd400); color: var(--ink, #0b0b14);
  border-radius: 3px;
  font-style: normal; font-size: 0.75rem; font-weight: 800;
  letter-spacing: 0.08em; text-transform: uppercase;
  vertical-align: 1px;
}

/* ── polia ──────────────────────────────────────────────────────────────── */

.duo { display: grid; gap: 0 14px; grid-template-columns: 1fr 1fr; }
.duo > * { min-width: 0; }

/* ── výber dizajnu ──────────────────────────────────────────────────────── */

.designs { display: grid; gap: 12px; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); }
.design {
  position: relative;
  display: grid; gap: 8px;
  padding: 12px;
  background: #fff;
  border: 3px solid var(--ink);
  cursor: pointer;
  text-align: left;
}
/* Prepínač dizajnu NESMIE byť `opacity: 0`.

   Bol — a Chromium vtedy celý prvok vyradí zo stromu prístupnosti
   (namerané cez CDP: role „none", ignored: true, bez mena). Čítačka
   obrazovky teda o dvadsiatich piatich dizajnoch nevedela vôbec a človek,
   ktorý ju používa, si nemal ako vybrať dizajn. Porotkyňa, ktorá web
   ovláda klávesnicou a čítačkou, to označila za najväčší zásek.

   `appearance: none` s priehľadným podkladom spraví to isté opticky —
   prepínač nie je vidieť — ale zostane skutočným prvkom aj pre čítačku.
   Prekrytie celej karty (inset: 0) ostáva, takže sa ďalej dá kliknúť
   kamkoľvek na kartu. */
.design input {
  /* Nie `opacity: 0` a nie `inset: 0` bez rozmerov.

     Pôvodné `position:absolute; opacity:0; inset:0` dávalo prvku nulovú
     veľkosť a Chromium ho vyradilo zo stromu prístupnosti (namerané cez
     CDP: role „none", ignored: true, bez mena). Čítačka obrazovky teda
     o dvadsiatich piatich dizajnoch nevedela vôbec a človek, ktorý ju
     používa, si nemal ako vybrať dizajn. Porotkyňa, ktorá web ovláda
     klávesnicou a čítačkou, to označila za najväčší zásek.

     Toto je štandardné „vizuálne skryté, ale stále tam": jeden bod,
     orezaný, bez vplyvu na sadzbu. Kliknutie kamkoľvek na kartu funguje
     ďalej — chytá ho obalový <label>, nie tento prvok. */
  position: absolute;
  width: 1px; height: 1px;
  margin: -1px; padding: 0; border: 0;
  clip-path: inset(50%);
  overflow: hidden; white-space: nowrap;
}
.design { cursor: pointer; }
.design:has(input:checked) { background: var(--yellow); box-shadow: 5px 5px 0 var(--ink); }
.design:has(input:focus-visible) { outline: 4px solid var(--blue); outline-offset: 3px; }
/* ── náhľad dizajnu ────────────────────────────────────────────────────────
   Rám má PEVNÝ pomer strán, takže sa nič neposunie, keď náhľad dobehne —
   posun rozloženia je v editore aj tak na hrane (namerané 0,38 pri strope
   0,45). Kým náhľad nie je, v ráme sedia farebné pruhy: nikdy tam nie je
   prázdno. */
.design__mini {
  display: block;
  position: relative;
  aspect-ratio: 3 / 4;
  overflow: hidden;
  border: 2px solid var(--ink);
  background: var(--cream);
}
.design__sw { position: absolute; inset: 0; display: flex; }
.design__sw i { flex: 1; }
/* Keď náhľad dobehol, pruhy už len podfarbujú okraje pod ním. */
.design__mini[data-kreslene] .design__sw { opacity: 0.25; }
.design__stage {
  display: block;
  position: absolute;
  top: 0; left: 50%;
  width: 460px;
  transform: translateX(-50%) scale(var(--mini-scale, 0.4));
  transform-origin: top center;
  pointer-events: none;
}
.design__mini .invite { max-width: 460px; margin: 0; box-shadow: none; }
/* Spodok náhľadu sa stmaví, nech je vidieť, že pozvánka pokračuje ďalej. */
.design__mini::after {
  content: "";
  position: absolute; inset: auto 0 0; height: 24%;
  background: linear-gradient(transparent, rgba(0, 0, 0, 0.18));
}
.design__name { font-family: var(--font-display); font-size: 0.9rem; text-transform: uppercase; }
.design__typ { font-size: 0.76rem; font-weight: 700; color: var(--blue); }
.design__popis { font-size: 0.78rem; line-height: 1.45; color: #55555f; }

/* ── program ────────────────────────────────────────────────────────────── */

.rows { display: grid; gap: 10px; margin-bottom: 14px; }
.rows__row { display: grid; grid-template-columns: 5.5em 1fr auto; gap: 8px; align-items: center; }
.rows__row input { width: 100%; padding: 10px 12px; border: 3px solid var(--ink); font: inherit; font-size: 0.92rem; }
.rows__del {
  width: 42px; height: 42px;
  background: #fff; border: 3px solid var(--ink); cursor: pointer;
  font-weight: 900; line-height: 1;
}
.rows__del:hover { background: var(--pink-plocha); color: #fff; }

/* ── vlastný dizajn ─────────────────────────────────────────────────────── */

.design[data-custom="true"] { border-style: dashed; }

.katgroup + .katgroup { margin-top: 26px; padding-top: 22px; border-top: 3px solid var(--ink); }
.katgroup__name {
  margin: 0 0 4px;
  font-family: var(--font-display);
  font-size: 0.95rem; text-transform: uppercase; letter-spacing: -0.01em;
}
.katgroup__popis { margin: 0 0 14px; font-size: 0.82rem; color: #55555f; }

/* ── živý pásik obálky ────────────────────────────────────────────────
   Kto si vyberá farbu, musí ju hneď vidieť. Bez toho si ju vyberá naslepo
   a jediné potvrdenie by bolo spustiť si celú animáciu. */
.obalkap {
  position: relative;
  display: grid; place-items: center;
  height: 112px;
  margin: 0 0 16px;
  border: 3px solid var(--ink);
  background: var(--ep-pozadie, #1b2cc1);
  overflow: hidden;
}
/* obálka */
.obalkap__o {
  position: relative;
  width: 132px; height: 78px;
  background: var(--ep-obalka, #fff1dc);
  border: 3px solid var(--ep-atrament, #0b0b14);
}
/* chlopňa */
.obalkap__o::before {
  content: ''; position: absolute; inset: -3px -3px auto;
  height: 46px;
  background: var(--ep-obalka, #fff1dc);
  border: 3px solid var(--ep-atrament, #0b0b14);
  clip-path: polygon(0 0, 100% 0, 50% 100%);
}
/* pečať */
.obalkap__o i {
  position: absolute; left: 50%; top: 40px;
  width: 20px; height: 20px; margin-left: -10px;
  background: var(--ep-pecat, #ffd400);
  border: 3px solid var(--ep-atrament, #0b0b14);
  border-radius: 50%;
}
/* konfety — čisto ozdoba, preto box-shadow a nie ďalšie prvky */
.obalkap[data-konfety="ano"]::after {
  content: ''; position: absolute; left: 22px; top: 16px;
  width: 8px; height: 8px; background: var(--ep-konfeta, #ffd400);
  box-shadow:
    36px 12px 0 var(--ep-obalka, #fff), 92px -4px 0 var(--ep-konfeta, #ffd400),
    148px 20px 0 var(--ep-obalka, #fff), 196px 4px 0 var(--ep-konfeta, #ffd400),
    244px 26px 0 var(--ep-obalka, #fff), 18px 68px 0 var(--ep-konfeta, #ffd400),
    216px 74px 0 var(--ep-obalka, #fff), 268px 56px 0 var(--ep-konfeta, #ffd400);
}

/* ── prepínač v paneli ─────────────────────────────────────────────────
   Bežné políčko je na dotyk primalé, tak mu dáme celý riadok a väčší terč. */
.prepinac {
  display: flex; align-items: center; gap: 12px;
  margin: 0 0 14px;
  padding: 12px 14px;
  background: var(--cream-2, #f6f1e6);
  border: 3px solid var(--ink);
  font-weight: 700; cursor: pointer;
}
/* 24 px je minimum, ktoré žiada WCAG 2.2 (2.5.8 Target Size). Zaškrtávadlá
   mali 22 — o dva body menej. Celý riadok .prepinac je síce klikateľný, ale
   samotné zaškrtávadlo má byť trafiteľné tiež. */
.prepinac input { width: 24px; height: 24px; accent-color: var(--blue, #1b2cc1); flex: none; }
.prepinac:hover { background: #fff; }

#obalkaReset { margin-top: 4px; }

/* Odpoveď na vložený odkaz — zelená keď sedí, ružová keď nie. */
#spotifyStav[data-druh="ok"] { color: #0b6b3a; font-weight: 700; }
#spotifyStav[data-druh="chyba"] { color: #b3123c; font-weight: 700; }

.swatches { display: grid; gap: 12px; grid-template-columns: repeat(auto-fit, minmax(110px, 1fr)); margin-bottom: 18px; }
.swatch { display: grid; gap: 6px; }
/* 0,74rem vychádza na 11,8 px. Sú to popisky nad výbermi farby („Obálka",
   „Pozadie") — bez nich človek nevie, ktorý štvorček čo mení. Spodok 12 px. */
.swatch span { font-size: 0.75rem; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; }
.swatch input {
  width: 100%; height: 44px; padding: 3px;
  background: #fff; border: 3px solid var(--ink); cursor: pointer;
}

/* Správa o doladenej „Hlavnej" farbe. Vzorka je pravda o tom, čo uvidí
   hosť — nie ozdoba, preto má rám a nie je priehľadná. Text ide cez
   `--ink`, nie cez tlmenú šedú `panel__hint`: je to jediné miesto, kde sa
   človek dozvie, že jeho voľba nešla von tak, ako ju zadal. */
.sv-uprava {
  display: grid; gap: 10px;
  margin: -10px 0 16px; padding: 10px 12px;
  background: #fff3c4; border: 3px solid var(--ink);
  color: var(--ink); font-size: 0.85rem; line-height: 1.5;
}
.sv-uprava__r { display: flex; align-items: flex-start; gap: 10px; margin: 0; }
.sv-uprava__vzorka {
  flex: 0 0 auto; width: 22px; height: 22px; margin-top: 1px;
  border: 2px solid var(--ink);
}

.warn {
  margin: -6px 0 18px; padding: 12px 14px;
  background: #fff3c4; border: 3px solid var(--ink);
  font-size: 0.85rem; font-weight: 600;
}

.drop {
  position: relative;
  display: grid; place-items: center;
  min-height: 116px; padding: 20px;
  background: var(--cream);
  border: 3px dashed var(--ink);
  text-align: center; cursor: pointer;
}
.drop[data-over="true"] { background: var(--yellow); border-style: solid; }
.drop input { position: absolute; inset: 0; opacity: 0; cursor: pointer; }
.drop__label { font-weight: 800; font-size: 0.9rem; }

.photo__state { margin: 12px 0 0; font-size: 0.85rem; font-weight: 700; }
.photo__state[data-kind="ok"] { color: #1a7f47; }
.photo__state[data-kind="warn"] { color: #9a5b00; }
.photo__state[data-kind="error"] { color: #b3123c; }

#photoOpts { margin-top: 18px; }
.field input[type="range"] { padding: 0; border: 0; accent-color: var(--pink); }

/* ── zdieľanie ──────────────────────────────────────────────────────────── */

.share__label { margin: 0; font-size: 0.78rem; font-weight: 800; letter-spacing: 0.1em; text-transform: uppercase; }

.meter { height: 14px; background: #fff; border: 3px solid var(--ink); }
.meter i { display: block; height: 100%; width: var(--fill, 0%); background: var(--blue); transition: width 0.2s ease; }
.meter[data-level="ok"] i { background: #22a05b; }
.meter[data-level="warn"] i { background: var(--yellow); }
.meter[data-level="over"] i { background: var(--pink); }
.meter__note { margin: 0; font-size: 0.82rem; font-weight: 600; }


.share { display: grid; gap: 12px; }
.share__link {
  width: 100%; padding: 12px 14px;
  background: var(--cream); border: 3px solid var(--ink);
  font-family: var(--font-mono); font-size: 0.82rem;
  overflow-wrap: anywhere;
}
.share__acts { display: flex; flex-wrap: wrap; gap: 10px; }
.share__msg { margin: 0; min-height: 1.4em; font-size: 0.85rem; font-weight: 700; color: var(--blue); }

/* ── zoznam hostí ───────────────────────────────────────────────────────── */

.stats { display: grid; gap: 10px; grid-template-columns: repeat(auto-fit, minmax(96px, 1fr)); margin-bottom: 18px; }
.stat { padding: 12px 14px; border: 3px solid var(--ink); background: var(--cream); }
.stat b { display: block; font-family: var(--font-display); font-size: 1.6rem; line-height: 1; font-variant-numeric: tabular-nums; }
.stat span { font-size: 0.74rem; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; }
.stat[data-kind="prijdu"] { background: #d8ffe4; }
.stat[data-kind="neprijdu"] { background: #ffe0e9; }

.guests { overflow-x: auto; }
.guests table { width: 100%; border-collapse: collapse; font-size: 0.88rem; }
.guests th, .guests td { padding: 9px 10px; text-align: left; border-bottom: 2px solid var(--ink); white-space: nowrap; }
.guests th { font-size: 0.72rem; letter-spacing: 0.08em; text-transform: uppercase; }
.guests td:last-child, .guests th:last-child { white-space: normal; }
/* Na mobile z tabuľky spravíme karty.

   Päť stĺpcov s nezalomiteľným textom malo 518 px, displej má 375. Tabuľka
   roztiahla celú stránku a hlavička potom končila v polovici obrazovky —
   presne ten „odrezaný" vzhľad. overflow-x na .guests to nezachránil, lebo
   rástla už sekcia nad ňou.

   Karta ukáže to isté v troch riadkoch: meno s odpoveďou, počet s e-mailom
   a poznámku. Prázdne údaje sa vynechajú, nech tam nesvietia pomlčky. */
@media (max-width: 700px) {
  .guests { overflow-x: visible; }
  .guests table { display: block; font-size: 0.9rem; }
  .guests tr:first-child { display: none; }        /* hlavičkový riadok */

  .guests tr {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: baseline;
    gap: 3px 10px;
    margin-bottom: 10px;
    padding: 11px 13px;
    background: #fff;
    border: 3px solid var(--ink);
  }

  .guests td {
    padding: 0; border: 0;
    white-space: normal; overflow-wrap: anywhere;
  }
  .guests td[data-prazdne="ano"] { display: none; }

  .guests td[data-st="meno"] { font-weight: 800; }
  .guests td[data-st="odpoved"] { grid-column: 2; grid-row: 1; }

  /* počet a e-mail zdieľajú riadok ako jeden drobný popis */
  .guests td[data-st="pocet"] { grid-column: 1; font-size: 0.8rem; color: #55555f; }
  .guests td[data-st="pocet"]::after { content: " os."; }
  .guests td[data-st="email"] {
    grid-column: 2; justify-self: end;
    font-size: 0.78rem; color: #55555f;
  }

  .guests td[data-st="poznamka"] {
    grid-column: 1 / -1;
    margin-top: 5px; padding: 7px 9px;
    background: var(--cream); border-left: 3px solid var(--pink);
    font-size: 0.82rem; line-height: 1.45;
  }

  /* štyri čísla v dvoch radoch — v jednom rade sú na mobile nečitateľné */
  .stats { grid-template-columns: repeat(2, 1fr); gap: 8px; }
  .stat { padding: 9px 11px; }
  .stat b { font-size: 1.35rem; }
  .stat span { font-size: 0.68rem; letter-spacing: 0.05em; }
}

.pill {
  display: inline-block; padding: 3px 10px;
  border: 2px solid var(--ink); font-size: 0.74rem; font-weight: 800;
}
.pill[data-v="prijdem"] { background: #b7f5cb; }
.pill[data-v="neprijdem"] { background: #ffc9d8; }
.pill[data-v="este-neviem"] { background: var(--yellow); }
.guests__empty { margin: 0; font-size: 0.9rem; color: #55555f; }

/* ── náhľad ─────────────────────────────────────────────────────────────── */

.preview__label {
  margin: 0 0 14px;
  color: #fff; font-size: 0.74rem; font-weight: 800;
  letter-spacing: 0.18em; text-transform: uppercase;
}
.preview__guest { margin-top: 20px; }

/* ── responzivita ───────────────────────────────────────────────────────── */

@media (max-width: 979px) {
  .editor[data-view="preview"] .editor__pane--form { display: none; }
  .top__acts .btn span { display: none; }

  /* Náhľad je v poradí až za formulárom, takže by sa prilepil na spodok
     stránky, kam sa nikto nepozerá. Na mobile ho preto preradíme dopredu. */
  .editor { display: flex; flex-direction: column; }
  .editor__pane--preview { order: -1; }

  /* Na mobile bol náhľad v režime úprav úplne skrytý — človek písal naslepo
     a výsledok videl, až keď prepol kartu. Teraz nad formulárom stále visí
     zmenšená pozvánka, ktorá sa mení pri každom písmene. Ťuknutím sa
     roztiahne na celú obrazovku. */
  .editor[data-view="form"] .editor__pane--preview {
    position: sticky; top: 0; z-index: 25;
    height: 30vh; min-height: 190px; max-height: 260px;
    padding: 0; overflow: hidden;
    background: var(--cream);
    border-bottom: 4px solid var(--ink);
    cursor: zoom-in;
  }
  /* Prilepený náhľad prekrýva vrch obsahu pod sebou.

     Keď prehliadač po rozbalení „Všetky dizajny a vlastné farby" odroluje
     na obsah, nevie o ňom — a prvý riadok textu skončil presne pod ním,
     vodorovne preseknutý na polovicu. Dvaja ľudia z poroty to nahlásili
     nezávisle a obaja mysleli, že je to chyba vykreslenia.

     scroll-padding-top povie prehliadaču, koľko miesta si má nechať. Musí
     sedieť s výškou náhľadu vyššie, preto tie isté hodnoty. */
  html { scroll-padding-top: clamp(190px, 30vh, 260px); }

  .editor[data-view="form"] .editor__pane--preview .editor__sticky {
    transform: scale(0.46);
    transform-origin: top center;
    width: 217%;                 /* 100 / 0.46 — nech sa pozvánka nezúži */
    margin-left: -58.5%;
    pointer-events: none;        /* ťuknutie patrí celému pásu, nie tlačidlám v ňom */
  }
  .editor[data-view="form"] .editor__pane--preview .preview__label,
  .editor[data-view="form"] .editor__pane--preview .preview__guest { display: none; }

  /* jemný náznak, že sa dá zväčšiť */
  .editor[data-view="form"] .editor__pane--preview::after {
    content: "Ťukni pre veľký náhľad";
    position: absolute; right: 8px; bottom: 8px;
    padding: 4px 9px;
    background: var(--ink); color: #fff;
    font-size: 0.64rem; font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase;
  }
}

@media (max-width: 560px) {
  /* na úzkom mobile sa logo scvrkne na značku, nech sa akcie zmestia na riadok */
  .top { gap: 8px; padding-inline: 12px; }
  .top .logo__word { display: none; }
  .top__acts { gap: 8px; }
  .top__acts .btn { padding: 10px 12px; font-size: 0.8rem; box-shadow: 3px 3px 0 var(--ink); }
  .rows__row { grid-template-columns: 4.6em 1fr auto; }
  .rows__del { width: 38px; height: 38px; }
}

@media (min-width: 980px) {
  .switch { display: none; }
  /* zámerne BEZ align-items: start — panel s náhľadom musí byť vysoký ako
     formulár, inak nemá sticky náhľad kam cestovať a odscrolluje preč */
  .editor { grid-template-columns: minmax(0, 1fr) minmax(0, 46%); align-items: stretch; }
  .editor__pane--preview { min-height: calc(100vh - 66px); }

  /* náhľad ostáva na očiach po celý čas vypĺňania formulára */
  .editor__sticky {
    position: sticky;
    top: calc(66px + clamp(18px, 3vw, 30px));
    max-height: calc(100vh - 66px - clamp(18px, 3vw, 30px) - 24px);
    overflow-y: auto;
    overscroll-behavior: contain;
    scrollbar-width: thin;
  }
}

/* kontajner kategórií nesmie byť sám mriežka — inak sa sekcie poskladajú
   vedľa seba do stĺpcov namiesto pod seba */
.katgroups { display: grid; gap: 4px; }

/* ── QR kód ─────────────────────────────────────────────────────────────── */

.qr__styly { display: flex; flex-wrap: wrap; gap: 8px; }
.qr__styl {
  padding: 9px 14px;
  background: #fff; border: 3px solid var(--ink);
  font-weight: 800; font-size: 0.82rem; cursor: pointer;
}
.qr__styl[aria-pressed="true"] { background: var(--ink); color: var(--yellow); }
.qr__nahlad { margin-top: 18px; display: grid; place-items: center; }
.qr__nahlad canvas { width: 100%; max-width: 320px; height: auto; border: 3px solid var(--ink); }

/* ── Pás so stavom aktivácie ──────────────────────────────────────────────
   Sedí na vrchu formulára a hovorí jednu vetu: či odkaz hosťom funguje.
   Bez neho človek rozposiela odkaz, ktorý ukazuje zámok, a nevie o tom. */
.stavp {
  display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
  margin: 0 0 20px; padding: 14px 16px;
  border: 4px solid var(--ink); box-shadow: 6px 6px 0 var(--ink);
}
.stavp[data-stav="zamknute"] { background: var(--yellow); }
.stavp[data-stav="aktivne"] { background: #e7f7ec; }
.stavp__text { flex: 1 1 220px; min-width: 0; }
.stavp__head { margin: 0 0 3px; font-weight: 800; font-size: 0.98rem; line-height: 1.25; }
.stavp__note { margin: 0; font-size: 0.84rem; line-height: 1.45; color: #3a3a46; }
.stavp__cta { flex: 0 0 auto; }

/* Kým nie je aktivované, odkaz sa vôbec nevypisuje.

   Bol to blok base64 na desať riadkov, ktorý zaberal pol obrazovky a hosťovi
   by aj tak ukázal len zámok. Že je pozvánka zamknutá, hovorí žltý pás hore —
   opakovať to ešte raz pri odkaze je hluk. Po aktivácii je odkaz krátky
   (/pozvanka?id=…) a vtedy sa ukáže. */
.share[data-zamknute="ano"] .share__link,
.share[data-zamknute="ano"] .meter,
.share[data-zamknute="ano"] .meter__note,
.share[data-zamknute="ano"] .share__acts { display: none; }

.share[data-zamknute="ano"]::before {
  content: "Odkaz sa ti tu objaví hneď po aktivácii.";
  display: block; padding: 12px 14px;
  background: var(--cream); border: 3px dashed var(--ink);
  font-size: 0.88rem; font-weight: 700;
}

/* Meradlo dĺžky v bajtoch je vývojárska vec, nie zákaznícka. */
.meter, .meter__note { display: none; }

@media (max-width: 640px) {
  .stavp { position: sticky; top: 8px; z-index: 30; box-shadow: 4px 4px 0 var(--ink); }
  .stavp__cta { width: 100%; text-align: center; }
}

/* ══════════════════════════════════════════════════════════════════════════
   Editor v troch krokoch
   ══════════════════════════════════════════════════════════════════════════ */

.kroky { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; margin: 0 0 18px; }
.kroky__zal {
  display: grid; gap: 3px; justify-items: center;
  padding: 10px 6px; min-height: 56px;
  background: #fff; border: 3px solid var(--ink); cursor: pointer;
  font: inherit; color: var(--ink);
}
.kroky__zal b { font-family: var(--font-display); font-size: 1rem; line-height: 1; }
/* 0.68rem je pri základnom písme 10,9 px, na 320 px displeji ešte menej
   (9,6 px namerané). Sú to názvy troch krokov, čiže hlavná orientácia
   v editore — a stoja v pruhu, kde je miesta dosť. */
.kroky__zal span { font-size: 0.78rem; font-weight: 800; letter-spacing: 0.02em; text-transform: uppercase; text-align: center; line-height: 1.15; }
.kroky__zal[data-stav="aktivny"] { background: var(--blue); color: #fff; box-shadow: 4px 4px 0 var(--pink); }
.kroky__zal[data-stav="hotovy"] { background: var(--yellow); }
.kroky__zal[data-stav="caka"] { opacity: 0.55; }

.krok[hidden] { display: none; }
/* spodná lišta nesmie prekryť posledný panel */
.krok { padding-bottom: calc(var(--krokbar-h, 84px) + 12px); }

/* Drobná pätička musí obísť prilepenú lištu krokov.

   Lišta je fixed na dne obrazovky, takže pätičku prekryla o 76 bodov na
   mobile a o 178 na širokej obrazovke — údaje firmy aj odkaz na podmienky
   boli pod ňou. Odsadenie je rovnaké, aké má formulár. */
/* Výšku lišty meria js/kroky.js do --krokbar-h, lebo lišta rastie: hláška
   „Ešte chýba: …" ju z 79 px vytiahne na 135,6 px a na 320 px displeji až
   na 154,8 px. Napevno zapísaných 96 px tú hlášku neprežilo — odkaz na
   obchodné podmienky zostal pod lištou a nedalo sa k nemu dorolovať. */
/* Nameraná výška lišty už bezpečnú zónu telefónu obsahuje — lišta si ju
   pridáva sama. Zdvojiť ju treba len v záložnej hodnote pre prípad,
   že by sa meranie nespustilo. */
.patka { padding-bottom: calc(var(--krokbar-h, calc(96px + env(safe-area-inset-bottom, 0px))) + 24px); }

.krokbar {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 60;
  display: flex; gap: 10px; align-items: center;
  padding: 12px clamp(14px, 4vw, 30px);
  padding-bottom: calc(12px + env(safe-area-inset-bottom, 0px));
  background: var(--cream); border-top: 4px solid var(--ink);
}
.krokbar__dalej, .krokbar__cta { margin-left: auto; }
.krokbar .btn { min-height: 46px; }
/* Hláška o chýbajúcich nutných políčkach sedí NAD tlačidlami, cez celú
   šírku lišty — vedľa nich by ich stlačila k sebe. */
.krokbar { flex-wrap: wrap; }
.krokbar__chyba {
  order: -1; flex: 1 0 100%;
  margin: 0 0 8px;
  font-size: 0.86rem; font-weight: 700; line-height: 1.4;
  color: var(--ink);
}
@media (min-width: 980px) {
  /* na širokej obrazovke lišta patrí len nad formulárovú polovicu */
  .krokbar { right: 46%; }
}

/* ── Čo oslavuješ ─────────────────────────────────────────────────────── */

/* Rezervované miesto pre dlaždice „Čo oslavuješ" — výšky sú odmerané na
   hotovom bloku (358 px do 720 px šírky, 248 px nad ňou). Keď sa dlaždice
   postavia, `udalost.js` toto miesto nahradí a rozdiel je nulový. */
.udal-miesto { min-height: 358px; margin: 0 0 18px; }
@media (min-width: 721px) { .udal-miesto { min-height: 248px; } }

.udal { margin: 0 0 18px; }
.udal__otazka {
  margin: 0 0 10px;
  font-family: var(--font-display); font-size: 1.15rem; text-transform: uppercase; letter-spacing: 0.01em;
}
.udal__otazka { margin-bottom: 4px; }
/* Otázka „Čo oslavuješ?" znie ako zaradenie udalosti, ale dlaždica prepne
   dizajn aj ukážkový text. Tento riadok to povie skôr, než sa to stane. */
.udal__pod { margin: 0 0 10px; font-size: 0.8rem; color: #55555f; line-height: 1.4; }
.udal__mriezka { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
/* Návrat k predchádzajúcemu dizajnu. Nenápadný, ale musí byť dosť veľký
   na prst — 44 px aj s odsadením. */
.udal__spat { margin: 10px 0 0; }
.udal__spatBtn {
  padding: 10px 12px; min-height: 44px;
  background: none; border: 0; cursor: pointer;
  font: inherit; font-size: 0.82rem; font-weight: 700; color: var(--modra, #1b2cc1);
  text-decoration: underline; text-underline-offset: 3px;
}
.udal__spatBtn:hover { color: var(--ink, #0b0b14); }
.udal__spatBtn:focus-visible { outline: 3px solid var(--modra, #1b2cc1); outline-offset: 2px; }
.udal__d {
  display: grid; gap: 6px; justify-items: center; align-content: center;
  min-height: 88px; padding: 12px 6px;
  background: #fff; border: 3px solid var(--ink); box-shadow: 4px 4px 0 var(--ink);
  font: inherit; color: var(--ink); cursor: pointer;
  transition: transform 120ms ease, box-shadow 120ms ease;
}
.udal__d:hover { transform: translate(-2px, -2px); box-shadow: 6px 6px 0 var(--ink); }
.udal__d[data-vybrate="ano"] { background: var(--yellow); box-shadow: 4px 4px 0 var(--pink); }
/* Ikona je odteraz kresba, nie znak z písma — veľkosť teda drží obal,
   nie font-size, a je rovnaká pre všetkých šesť dlaždíc. */
.udal__ikona { display: block; width: 30px; height: 30px; }
.udal__ikona svg { display: block; width: 100%; height: 100%; }
.udal__nazov { font-size: 0.72rem; font-weight: 800; letter-spacing: 0.04em; text-transform: uppercase; text-align: center; line-height: 1.15; }

.viac { margin-top: 4px; border: 3px solid var(--ink); background: #fff; }
.viac > summary {
  padding: 12px 14px; cursor: pointer;
  font-size: 0.8rem; font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase;
}
.viac[open] > summary { border-bottom: 3px solid var(--ink); }
.viac > .katgroups { padding: 14px; }

/* ── mobilné opravy z rozboru ─────────────────────────────────────────── */

@media (max-width: 560px) {
  /* iOS Safari zoomuje pri klepnutí do poľa menšieho než 16 px a nevráti sa */
  /* max(), nie 16px natvrdo: 16 je spodná hranica proti iOS, nie strop.
     Kto má v prehliadači väčšie písmo, má ho mať aj v poliach. */
  .field input, .field select, .field textarea, .rows__row input { font-size: max(16px, 1rem); }
  /* dve polia vedľa seba sa na úzky displej nezmestia */
  .duo { grid-template-columns: 1fr; }
  /* mazacie tlačidlo malo 38 px, prst potrebuje aspoň 44 */
  .rows__del { width: 44px; height: 44px; }
}

/* Vyčistenie konceptu — tichý odkaz pod krokmi, nie ďalšie krikľavé tlačidlo. */
.odznova {
  display: block; margin: -10px 0 18px auto; padding: 4px 2px;
  background: none; border: 0; cursor: pointer;
  font: inherit; font-size: 0.78rem; font-weight: 700; color: #7a7a86;
  text-decoration: underline; text-underline-offset: 3px;
}
.odznova:hover { color: #b3123c; }

/* ══════════════════════════════════════════════════════════════════════════
   Mobil: menej ozdôb pred prvou otázkou
   Náhľad, pás so stavom a prepínač zaberali spolu vyše 600 px skôr, než
   človek uvidel prvú otázku. Náhľad je odteraz jediné, čo tam patrí.
   ══════════════════════════════════════════════════════════════════════════ */

@media (max-width: 979px) {
  /* Prepínač Upraviť/Náhľad je zbytočný — náhľad je stále na obrazovke
     a ťuknutím sa zväčší. Vo veľkom náhľade ho ale vrátime, inak by sa
     človek nemal ako dostať späť k formuláru.
     Pozor: .switch stojí v HTML PRED .editor, takže súrodenecký selektor
     tu nefunguje a musí to ísť cez :has() na tele stránky. */
  .switch { display: none; }
  body:has(.editor[data-view="preview"]) .switch { display: flex; }

  /* pás so stavom drží len jeden riadok, kým nie je človek pri aktivácii */
  .stavp { padding: 10px 12px; gap: 10px; margin-bottom: 14px; }
  .stavp__head { font-size: 0.88rem; }
  .stavp__note { display: none; }
  .stavp__cta { width: auto; padding: 10px 14px; font-size: 0.78rem; }

  /* na kroku „Pošli hosťom" sa pás rozvinie do plnej podoby */
  body[data-krok="3"] .stavp__note { display: block; }
  body[data-krok="3"] .stavp { padding: 14px 16px; }
  body[data-krok="3"] .stavp__cta { width: 100%; text-align: center; padding: 14px; font-size: 0.9rem; }

  .editor[data-view="form"] .editor__pane--preview { height: 26vh; min-height: 168px; max-height: 220px; }
  .editor[data-view="form"] .editor__pane--preview::after {
    content: "Zväčšiť"; right: 6px; bottom: 6px; padding: 3px 7px; font-size: 0.58rem;
  }

  /* v režime veľkého náhľadu sa treba vedieť vrátiť */
  .editor[data-view="preview"] ~ .krokbar { display: none; }
}


/* Tlačidlá v hlavičke pracujú s tým istým odkazom ako panel Zdieľanie.
   Kým je pozvánka zamknutá, nemajú čo kopírovať ani otvárať. */
body[data-zamknute="ano"] .top__acts { display: none; }

/* ── Sekcie dizajnov ──────────────────────────────────────────────────────
   Záložky namiesto jednej dlhej steny. Pri stovke dizajnov je toto rozdiel
   medzi „vyberiem si" a „zavriem to". */

.sekcie {
  display: flex; flex-wrap: wrap; gap: 6px;
  margin: 0 0 18px; padding-bottom: 16px;
  border-bottom: 3px solid var(--ink);
}
.sekcie__zal {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 9px 13px; min-height: 42px;
  background: #fff; border: 3px solid var(--ink); cursor: pointer;
  font: inherit; font-size: 0.8rem; font-weight: 800;
  letter-spacing: 0.03em; text-transform: uppercase; color: var(--ink);
}
.sekcie__zal i {
  padding: 1px 6px; background: var(--cream); border: 2px solid var(--ink);
  font-style: normal; font-size: 0.75rem; font-variant-numeric: tabular-nums;
}
.sekcie__zal:hover { background: var(--yellow); }
.sekcie__zal[data-stav="aktivna"] { background: var(--blue); color: #fff; box-shadow: 3px 3px 0 var(--pink); }
.sekcie__zal[data-stav="aktivna"] i { background: var(--blue-deep); color: #fff; border-color: #fff; }

/* nadpis sekcie je už v záložke, netreba ho opakovať nad zoznamom */
.katgroup__name { display: none; }
.katgroup + .katgroup { margin-top: 0; padding-top: 0; border-top: 0; }

@media (max-width: 560px) {
  .sekcie { gap: 5px; }
  .sekcie__zal { padding: 8px 10px; font-size: 0.78rem; }
}

/* ── Hlasový odkaz ────────────────────────────────────────────────────── */

.zv { display: grid; gap: 14px; }
.zv__akcie { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.zv__cas {
  margin: 0; font-family: var(--font-display); font-size: 1.6rem; line-height: 1;
  font-variant-numeric: tabular-nums; color: var(--pink);
}
.zv__hotovo { display: grid; gap: 12px; }
.zv__hotovo audio { width: 100%; }
[data-zamknute="ano"] .zv__akcie { opacity: 0.5; }

/* ══════════════════════════════════════════════════════════════════════════
   Mobil: poriadok v prilepených vrstvách

   Audit našiel osem chýb s jednou príčinou — akciový pás, hlavička, pás so
   stavom a náhľad sa lepili všetky na nulu a prekrývali sa. Z náhľadu bolo
   vidieť 98 px z 211 a počas písania 9 px. Tu sa to rovná.
   ══════════════════════════════════════════════════════════════════════════ */

@media (max-width: 979px) {
  /* Náhľad sa lepí POD hlavičku, nie na ňu. */
  .editor[data-view="form"] .editor__pane--preview {
    top: calc(var(--akcia-h, 0px) + var(--top-h, 48px));
  }

  /* Pás so stavom sa prestáva lepiť. Prilepený sedel celý pod hlavičkou,
     takže ho nikto nikdy nevidel — a náhľadu bral až 162 px. Tlačidlo
     „Aktivovať" nesie spodná lišta, ktorá je pod prstom vždy. */
  .stavp { position: static; }

  /* Na prvých dvoch krokoch je pás zbytočný — o aktivácii je až tretí krok
     a cenu drží spodná lišta. Ušetrí to 105 px nad prvou otázkou. */
  body[data-krok="1"] .stavp,
  body[data-krok="2"] .stavp { display: none; }

  /* Počas písania sa náhľad už neschováva. Po oprave odstupu je nad poľom,
     takže ho klávesnica nezakrýva, a práve vtedy je najviac potrebný. */
  /* Strop musí platiť aj pri písaní. Bez neho náhľad po otvorení klávesnice
     narástol o 40 px namiesto toho, aby ustúpil — a pri každom kliknutí do
     poľa nasledoval skok hore-dole. */
  body.pise .editor[data-view="form"] .editor__pane--preview {
    height: 22vh; min-height: 148px; max-height: 200px;
  }

  /* Nízka obrazovka (iPhone SE) — náhľad ustúpi, nech je vidieť aj otázka. */
  @media (max-height: 700px) {
    .editor[data-view="form"] .editor__pane--preview,
    body.pise .editor[data-view="form"] .editor__pane--preview {
      height: 20vh; min-height: 132px; max-height: 168px;
    }
  }

  /* Vo veľkom náhľade musí byť cesta späť vždy po ruke. */
  body:has(.editor[data-view="preview"]) .switch {
    position: sticky;
    top: calc(var(--akcia-h, 0px) + var(--top-h, 48px));
    z-index: 45;
    margin-top: 0;
  }

  /* ── dotykové terče, ktoré audit našiel pod 44 px ── */
  .odznova { padding: 12px 4px; margin-top: -6px; }
  .akcia__zavri { padding: 10px 12px; font-size: 1.5rem; }
  .field input[type="range"] { height: 44px; }
  .viac > summary { padding: 14px; }
  .viac .panel__hint { margin: 0; padding: 0 14px 14px; }
}

/* ── výber hudby ────────────────────────────────────────────────────────
   Nálady sú dlaždice, nie rozbaľovací zoznam. Zo zoznamu si človek nevyberie
   nič, kým to nepočuje — takto je ťuknutie zároveň ukážkou. */

.panel__label {
  margin: 0 0 6px;
  font-size: 0.78rem; font-weight: 800;
  letter-spacing: 0.1em; text-transform: uppercase;
}

.nalady { display: grid; gap: 8px; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); }
.nalada {
  display: grid; gap: 3px;
  padding: 11px 13px;
  background: #fff; border: 3px solid var(--ink); cursor: pointer;
  font: inherit; text-align: left;
}
.nalada strong { font-family: var(--font-display); font-size: 0.88rem; text-transform: uppercase; }
.nalada span { font-size: 0.76rem; line-height: 1.4; color: #55555f; }
.nalada:hover { background: var(--cream); }
.nalada[data-stav="vybrana"] { background: var(--yellow); box-shadow: 4px 4px 0 var(--ink); }
.nalada[data-stav="vybrana"] strong::after { content: " ♪"; }
.nalada:focus-visible { outline: 4px solid var(--blue); outline-offset: 3px; }

@media (max-width: 560px) {
  .nalady { grid-template-columns: 1fr 1fr; }
  .nalada { padding: 9px 10px; }
  .nalada span { display: none; }   /* na mobile stačí názov, popis prekáža */
}

/* ── druhý krok ako jeden formulár ──────────────────────────────────────
   Štyri panely so štyrmi rámami a štyrmi tvrdými tieňmi pôsobili, že práce
   je štyrikrát viac, než naozaj je. Vnútri kroku „Tvoje údaje" preto rámy
   zhasneme a z nadpisov spravíme tiché medzititulky. Rozdelenie v HTML
   ostáva — je to len iný pohľad na tie isté panely. */

.krok[data-spojene="ano"] .panel {
  margin-bottom: 0;
  background: none;
  border: 0;
  box-shadow: none;
}
.krok[data-spojene="ano"] .panel + .panel { margin-top: 26px; }

.krok[data-spojene="ano"] .panel > summary {
  padding: 0 0 10px;
  border-bottom: 3px solid var(--ink);
  font-size: 0.78rem; letter-spacing: 0.1em;
  cursor: default; pointer-events: none;   /* nie je čo rozbaľovať */
}
.krok[data-spojene="ano"] .panel > summary::after { content: none; }
.krok[data-spojene="ano"] .panel[open] > summary { border-bottom: 3px solid var(--ink); }
.krok[data-spojene="ano"] .panel__body { padding: 16px 0 0; }
.krok[data-spojene="ano"] .panel__hint { margin: -4px 0 16px; }

/* Celý krok dostane jeden spoločný rám namiesto štyroch. */
.krok[data-spojene="ano"] {
  padding: clamp(16px, 3vw, 24px);
  background: #fff;
  border: 4px solid var(--ink);
  box-shadow: 6px 6px 0 var(--ink);
}

/* ── prvý krok: jedna otázka, nič nad ňou ───────────────────────────────
   Otázka „Čo oslavuješ?" začínala 612 px nižšie na 812-pixelovom displeji.
   Nad ňou stálo päť pásov a dva nadpisy pre tú istú vec. Z prvej obrazovky
   tak bolo vidieť dve dlaždice zo šiestich. */

/* Akciový pás patrí tam, kde sa človek rozhoduje kúpiť — na tretí krok
   a na platbu. Kým skladá pozvánku, je to 95 px odpočtu do ničoho.
   Pás si výšku meria sám, takže sa odsadenie prepočíta na nulu. */
body.is-editor[data-krok="1"] .akcia,
body.is-editor[data-krok="2"] .akcia { display: none; }

/* Záložka kroku už hovorí „Čo oslavuješ" a hneď pod ňou to isté hovoril
   nadpis panelu aj otázka v ňom. Tri mená pre jedno rozhodnutie.

   Pravidlo platí LEN na panel „Dizajn" — pôvodne bralo `.panel` a tým aj
   všetky ostatné panely prvého kroku. `<details>` sa otvára výhradne
   ťuknutím na `<summary>`, takže so skrytým nadpisom sa zavretý panel
   nedal otvoriť myšou, prstom ani klávesnicou. „Obálka a konfety" tak bola
   v editore úplne nedostupná — aj s výberom vstupnej animácie, ktorý sa
   kvôli nej robil. Odmerané: summary mal display:none a výšku 0.

   Pri „Dizajne" to nevadí, lebo je `open` a jeho telo je vidieť vždy. */
#panelDizajn { margin-bottom: 0; box-shadow: none; }
.krok[data-krok="1"] > #panelDizajn > summary { display: none; }
.krok[data-krok="1"] > #panelDizajn > .panel__body { padding-top: 16px; }

@media (max-width: 979px) {
  /* Na prvom kroku vyberá dizajn — dlaždice sú dôležitejšie než veľký náhľad.
     Ten je aj tak hneď nad nimi a mení sa pri každom ťuknutí. */
  .editor[data-view="form"] .editor__pane--preview { height: 21vh; min-height: 140px; max-height: 178px; }
}

/* „Začať odznova" je nevratné — má byť na dohľad, nie po ruke. */
.odznova {
  display: block; margin: 22px auto 0;
  background: none; border: 0; cursor: pointer;
  font: inherit; font-size: 0.8rem; font-weight: 700;
  color: #7a7a86; text-decoration: underline; text-underline-offset: 3px;
}
.odznova:hover { color: var(--pink); }

/* ══════════════════════════════════════════════════════════════════════════
   MOBIL: editor je nástroj, nie plagát

   Pop-artový štýl (štvorbodové rámy, tvrdé tiene, tučné veľké písmená)
   funguje na landingu, kde má človek čítať. V editore na 375 px ho dusí:
   z 812-pixelového displeja ostávalo na formulár 455 px a v ňom boli vidieť
   tri políčka. Štítok každého poľa pritom kričal rovnako hlasno ako pole.

   Tu preto ubudneme na hrúbke, nie na funkciách. Nič nezmizne — len prestane
   pýtať pozornosť pre seba.
   ══════════════════════════════════════════════════════════════════════════ */

/* Prepínač náhľadu patrí len na mobil.

   Bol nastavený výhradne vnútri @media (max-width: 979px), takže na širšej
   obrazovke zostal obyčajným <button> — a keďže je priamym dieťaťom mriežky
   editora, zabral si v nej celú bunku. Náhľad pozvánky tým vypadol do druhého
   riadku, pod spodnú hranu okna, a na počítači bolo vidieť len prázdny rám. */
.nahladp { display: none; }

@media (max-width: 979px) {

  /* ── zbaliteľný náhľad ──────────────────────────────────────────────── */

  .nahladp {
    order: -2;                     /* ešte pred náhľad, ktorý má order: -1 */
    display: flex; align-items: center; justify-content: space-between;
    width: calc(100% - 2 * clamp(12px, 3vw, 18px));
    margin: 10px clamp(12px, 3vw, 18px) 0;
    /* 9 px odsadenia dávalo 42 px na výšku — dva pod normou. */
    min-height: 44px; padding: 9px 12px;
    background: #fff; border: 2px solid var(--ink); cursor: pointer;
    font: inherit; font-size: 0.78rem; font-weight: 800;
    letter-spacing: 0.06em; text-transform: uppercase;
  }
  /* Šípka ukazuje smer, ktorým sa to pohne po ťuknutí: zbalené → dole. */
  .nahladp i { width: 0; height: 0; border: 5px solid transparent; border-bottom-color: var(--ink); margin: -3px 0 0; }
  body.nahlad-zbaleny .nahladp i { border-bottom-color: transparent; border-top-color: var(--ink); margin: 3px 0 0; }

  body.nahlad-zbaleny .editor[data-view="form"] .editor__pane--preview { display: none; }

  /* ── tenšie rámy, žiadne tvrdé tiene ────────────────────────────────── */

  .editor__pane { padding: 12px clamp(12px, 3vw, 18px) 60px; }

  .panel, .krok[data-spojene="ano"], .krok[data-krok="1"] > .panel {
    border-width: 2px;
    box-shadow: none;
  }
  .krok[data-spojene="ano"], .krok[data-krok="1"] > .panel { padding: 14px; }
  .panel__body { padding: 14px 13px 16px; }
  .panel > summary { padding: 12px 13px; font-size: 0.88rem; }

  /* ── štítky polí prestanú kričať ────────────────────────────────────── */

  .field > span,
  .krok[data-spojene="ano"] .panel > summary {
    font-size: 0.72rem; font-weight: 700;
    letter-spacing: 0.02em; text-transform: none;
    color: #5a5a66;
  }
  .krok[data-spojene="ano"] .panel > summary {
    font-family: var(--font-body);
    font-size: 0.78rem; font-weight: 800; color: var(--ink);
    padding: 0 0 7px; border-bottom-width: 2px;
  }

  /* Písmo v poliach musí zostať 16 px — pod tým iOS pri klepnutí priblíži
     stránku a už sa nevráti. Uberáme teda na výške, nie na písme. */
  .field input, .field select, .field textarea, .rows__row input {
    padding: 9px 11px; border-width: 2px;
  }
  .field { margin-bottom: 13px; }

  /* ── záložky krokov a hlavička ──────────────────────────────────────── */

  .kroky { gap: 4px; margin-bottom: 12px; }
  .kroky__zal { padding: 7px 4px; border-width: 2px; box-shadow: none; }
  .kroky__zal b { font-size: 1rem; }
  /* 0.6rem je 9,6 px — namerané na 320 px displeji. Sú to názvy troch
     krokov, teda hlavná orientácia v editore; do pruhu sa väčšie zmestia. */
  /* 0,72rem vychádzalo na 390 px na 11,5 px — a toto je tá vetva, ktorá
     na mobile naozaj platí; základné pravidlo vyššie má 0,78rem a nikoho
     nepomýli, lebo sa sem nedostane. Sú to názvy troch krokov, podľa
     ktorých sa človek v editore orientuje. Spodok je 12 px. */
  .kroky__zal span { font-size: 0.75rem; }

  .top { padding: 7px clamp(10px, 3vw, 18px); }
  /* 0,72rem vychádzalo na 11,5 px — a toto je tá vetva, ktorá na mobile
     naozaj platí (pravidlo o 540 riadkov vyššie má 0,8rem a sem sa nedostane).
     Na platobnej stránke je v tomto páse jediná cesta späť do editora
     a `.top__acts .btn span` z tlačidiel na mobile skrýva text, takže to,
     čo zostane, musí byť čitateľné. Spodok je 12 px. */
  .top__acts .btn { padding: 7px 11px; font-size: 0.75rem; }

  /* ── dlaždice a tlačidlá ────────────────────────────────────────────── */

  .udal__d, .design, .nalada, .sekcie__zal {
    border-width: 2px; box-shadow: none;
  }
  .udal__d[data-vybrate="ano"], .design:has(input:checked), .nalada[data-stav="vybrana"] {
    box-shadow: 3px 3px 0 var(--ink);
  }
  .udal__otazka { font-size: 1rem; margin-bottom: 10px; }

  .btn { box-shadow: 3px 3px 0 var(--ink); }
  .krokbar .btn { box-shadow: 3px 3px 0 var(--ink); }
}

/* Zaplatenej pozvánke nemá čo svietiť odpočet zľavy.

   Akciový pás pozná len cenník, nie stav konkrétnej pozvánky. Nad už
   aktivovanou pozvánkou tak visel odpočet „ešte 19 €" a pôsobilo to,
   že sa má platiť znova. */
body:has(.stavp[data-stav="aktivne"]) .akcia { display: none; }

/* „Otvoriť prehľad" bolo na treťom kroku dvakrát — v páse so stavom aj
   v spodnej lište. Lišta je pod prstom, pás nech len informuje. */
@media (max-width: 979px) {
  body:has(.stavp[data-stav="aktivne"]) .stavp__cta { display: none; }
  .stavp[data-stav="aktivne"] { padding: 11px 13px; }
  .stavp[data-stav="aktivne"] .stavp__head { font-size: 0.9rem; }
  .stavp[data-stav="aktivne"] .stavp__note { font-size: 0.8rem; }
}

/* Dve akcie v jednej bunke tabuľky — nech si nelezú do seba. */
.adm__wrap td .zmaz, .adm__wrap td .odomkni { margin: 2px 4px 2px 0; }
.odomkni {
  padding: 5px 11px;
  background: #d8ffe4; border: 2px solid var(--ink);
  font: inherit; font-size: 0.74rem; font-weight: 800; cursor: pointer;
}
.odomkni:hover { background: #b7f5cb; }
.odomkni.zmaz { background: #ffe0e9; }
.odomkni.zmaz:hover { background: #ffc9d8; }
.odomkni:disabled { opacity: 0.5; cursor: default; }

/* ══════════════════════════════════════════════════════════════════════
   KROK 1 na telefóne — zvislý zoznam namiesto mriežky

   Mriežka 2×3 nútila oko robiť Z-pohyb cez šesť rovnakých bielych
   štvorcov a názov v nej musel mať 0,72rem, lebo do 150 px širokej
   dlaždice sa „FIREMNÁ AKCIA" väčšia nezmestí. V riadku má text cez
   200 px, takže sa dá zväčšiť — zmenšiť a zároveň sprehľadniť je tu
   ten istý krok, v mriežke sa tie dve veci vylučovali.

   Selektory sú dvojtriedne zámerne, aby prebili pravidlá pre .udal__d
   v @media (max-width: 979px) vyššie v tomto súbore.
   ══════════════════════════════════════════════════════════════════════ */

/* Dlaždiciam chýbal fokusový prstenec — .design aj .nalada ho majú. */
.udal__d:focus-visible { outline: 3px solid var(--pink); outline-offset: 2px; }

/* Prst nemá hover. Posun z pravidla vyššie by na iOS po ťuknutí zostal
   zaseknutý a riadok by visel odskočený, kým človek neťukne inam. */
@media (hover: none) {
  .udal__d:hover { transform: none; box-shadow: none; }
}

@media (max-width: 560px) {

  /* Jeden rám okolo celku namiesto šiestich samostatných: šesť rámov je
     osemnásť viditeľných hrán a čierna prestane byť konštrukciou.
     Zdieľané deliace čiary robia zo šiestich prvkov jeden objekt. */
  .udal .udal__mriezka {
    display: block;
    gap: 0;
    background: #fff;
    border: 2px solid var(--ink);
    box-shadow: 3px 3px 0 var(--ink);
  }

  /* Riadok: [ikona] [názov ..........] [značka]
     Cez celú šírku, takže palec ho trafí na svojom konci a nikdy sa
     nemusí naťahovať do ľavého horného rohu. */
  .udal__mriezka .udal__d {
    display: grid;
    grid-template-columns: 30px 1fr 22px;
    align-items: center;
    gap: 10px;
    width: 100%;
    min-height: 46px;                   /* 44 px terč + 2 px deliaca čiara */
    padding: 0 10px 0 8px;
    background: #fff;
    border: 0;
    border-top: 2px solid var(--ink);
    box-shadow: none;
    text-align: left;
    -webkit-tap-highlight-color: transparent;
  }
  .udal__mriezka .udal__d:first-child { border-top: 0; }

  /* Stlačenie NESMIE byť žlté — žltá znamená „vybraté" a pri ťuknutí
     vedľa by na okamih klamala presne vtedy, keď človek potrebuje
     jednoznačnú odpoveď. */
  .udal__mriezka .udal__d:active { background: var(--cream); }

  .udal__mriezka .udal__d:focus-visible {
    outline: 3px solid var(--pink);
    outline-offset: -3px;               /* dovnútra, nech neprečnieva cez rám */
  }

  /* Ikony ♥ ✦ ☁ ▲ ✱ ● nič nerozlišujú — „✱ = Rozlúčka" neuhádne nikto.
     V mriežke sa tvárili ako hlavný obsah, tu klesnú na kotvu vľavo. */
  .udal__mriezka .udal__ikona { width: 26px; height: 26px; margin-inline: auto; }

  /* Celú informáciu nesie text, tak nech ju nesie v písme tohto webu. */
  .udal__mriezka .udal__nazov {
    font-family: var(--font-display);
    font-size: 0.95rem;
    letter-spacing: 0.02em;
    line-height: 1.1;
    text-align: left;
    white-space: nowrap;
  }

  /* Značka vpravo je ::after, čiže tretia bunka mriežky — do HTML netreba
     pridávať nič. Štvorec, nie krúžok: guľatý prepínač je v tomto webe
     cudzí tvar. A vpravo preto, že tam pri ťuknutí neleží palec, takže
     potvrdenie výberu vidno hneď, nie až po zdvihnutí prsta. */
  .udal__mriezka .udal__d::after {
    content: '';
    justify-self: end;
    width: 20px; height: 20px;
    background: #fff;
    border: 2px solid var(--ink);
  }

  /* Vybraté = tvar aj farba aj pásik. Samotná žltá nestačí, lebo
     predvolený dizajn zaškrtne Svadbu hneď po načítaní — a „bolo to tam"
     sa potom nedá odlíšiť od „ja som klikol". */
  .udal__mriezka .udal__d[data-vybrate="ano"] {
    background: var(--yellow);
    box-shadow: inset 5px 0 0 var(--pink);
  }
  .udal__mriezka .udal__d[data-vybrate="ano"] .udal__nazov { letter-spacing: 0.05em; }
  .udal__mriezka .udal__d[data-vybrate="ano"]::after {
    content: '✓';
    display: grid; place-items: center;
    background: var(--ink); color: var(--yellow);
    font-size: 0.8rem; font-weight: 900; line-height: 1;
  }

  /* Otázka nad zoznamom je návestie, nie nadpis sekcie. */
  .udal { margin-bottom: 12px; }
  .udal .udal__otazka { font-size: 0.95rem; margin-bottom: 8px; }
}

/* Na 320 px sa uberá z odsadenia a písma, nikdy z výšky riadka — 44 px je
   hranica, ktorú si projekt sám určil. */
@media (max-width: 340px) {
  .udal__mriezka .udal__d { grid-template-columns: 26px 1fr 20px; gap: 8px; padding: 0 8px 0 6px; }
  .udal__mriezka .udal__nazov { font-size: 0.88rem; letter-spacing: 0.01em; }
}

/* Rám okolo rámu. Zoznam typov má vlastný rám aj tieň, takže panel okolo neho
   je druhá čierna linka bez obsahu — jeho nadpis je aj tak skrytý. Ostávalo
   z neho 32 px odsadenia a o 28 px užší obsah, takže sa „Všetky dizajny
   a vlastné farby" lámalo do dvoch riadkov. */
@media (max-width: 979px) {
  .krok[data-krok="1"] > .panel { padding: 0; border: 0; background: none; box-shadow: none; }
  .krok[data-krok="1"] > .panel > .panel__body { padding: 0; }
}

/* ══════════════════════════════════════════════════════════════════════
   Svadobný panel
   ══════════════════════════════════════════════════════════════════════ */

/* Motívy sú dlaždice, nie zoznam — človek si vyberá podľa toho, čo robí,
   a tú informáciu nesie druhý riadok („zubári, dentálne hygieničky").
   Farebný pásik vľavo je farba motívu, takže voľba ukazuje aj výsledok. */
.motivy { display: grid; gap: 8px; grid-template-columns: repeat(2, 1fr); }
.motivy > * { min-width: 0; }
@media (max-width: 520px) { .motivy { grid-template-columns: 1fr; } }

.motiv {
  display: grid; gap: 2px;
  min-height: 56px;
  padding: 10px 12px 10px 16px;
  position: relative;
  background: #fff;
  border: 2px solid var(--ink);
  font: inherit; color: var(--ink);
  text-align: left; cursor: pointer;
}
.motiv::before {
  content: ''; position: absolute; left: 0; top: 0; bottom: 0;
  width: 6px; background: var(--m, var(--ink));
}
.motiv__nazov { font-family: var(--font-display); font-size: 0.92rem; text-transform: uppercase; }
.motiv__pre { font-size: 0.76rem; color: #55555f; line-height: 1.25; }
.motiv[data-vybrate="ano"] { background: var(--yellow); box-shadow: 3px 3px 0 var(--ink); }
.motiv:focus-visible { outline: 3px solid var(--pink); outline-offset: 2px; }

/* Opakovaný riadok — dlaždica alebo otázka. Mazacie tlačidlo vpravo hore,
   nech neposkakuje podľa toho, aké dlhé sú políčka. */
.svr {
  position: relative;
  display: grid; gap: 10px;
  margin: 0 0 12px;
  padding: 14px 52px 14px 14px;
  background: var(--cream-2);
  border: 2px solid var(--ink);
}
.svr .rows__del { position: absolute; top: 10px; right: 10px; }
.svr .field { margin: 0; }

/* ── galéria v paneli ─────────────────────────────────────────────────
   Malé štvorce s krížikom v rohu. Mriežka sa prispôsobí šírke, aby na
   telefóne boli tri v rade a na monitore šesť. */
.svgal {
  display: grid; gap: 6px;
  grid-template-columns: repeat(auto-fill, minmax(76px, 1fr));
  margin-top: 12px;
}
.svgal__kus {
  position: relative;
  aspect-ratio: 1;
  border: 2px solid var(--ink);
  background: var(--cream-2);
  overflow: hidden;
}
.svgal__kus img { width: 100%; height: 100%; object-fit: cover; display: block; }
.svgal__x {
  position: absolute; top: 2px; right: 2px;
  /* 28 px je menej než 44, ale je to mazanie — malý terč je tu poistka,
     nie nedbanlivosť. Potvrdzuje sa aj otázkou. */
  width: 28px; height: 28px;
  display: grid; place-items: center;
  background: var(--ink); color: #fff;
  border: 0; font: inherit; font-size: 1rem; line-height: 1;
  cursor: pointer;
}
.svgal__x:hover { background: var(--pink-plocha); }
.svgal__x:focus-visible { outline: 3px solid var(--yellow); outline-offset: -3px; }

/* ── výrez fotky ──────────────────────────────────────────────────────
   Celá fotka v pomere 3:2 a v nej bod, ktorý hovorí, čo sa nemá odrezať.
   Ukazujeme ju celú (contain), nie orezanú — človek musí vidieť aj to, čo
   z nej vypadne, inak nevie, čo vlastne posúva. */
.vyrez {
  position: relative;
  aspect-ratio: 3 / 2;
  margin: 0 0 10px;
  background: var(--ink);
  border: 3px solid var(--ink);
  cursor: crosshair;
  overflow: hidden;
  touch-action: manipulation;
}
.vyrez img { width: 100%; height: 100%; object-fit: contain; display: block; }

.vyrez__bod {
  position: absolute;
  width: 26px; height: 26px;
  margin: -13px 0 0 -13px;
  border: 3px solid var(--yellow);
  border-radius: 50%;
  box-shadow: 0 0 0 2px var(--ink), inset 0 0 0 2px var(--ink);
  pointer-events: none;
  transition: left 120ms ease, top 120ms ease;
}
@media (prefers-reduced-motion: reduce) { .vyrez__bod { transition: none; } }
.vyrez:focus-visible { outline: 3px solid var(--pink); outline-offset: 2px; }

/* ── farebné zostavy ──────────────────────────────────────────────────
   Dlaždica predáva farby, nie názov — preto sú pruhy hore a veľké, a text
   je až pod nimi drobný. Kto vyberá farby, pozerá na farby.

   Dva stĺpce na mobile ako pri motívoch, aby panel držal jeden rytmus.
   Terč má 44 px na výšku aj s textom, čo je spodná hranica pre prst. */
.zostavy {
  display: grid; gap: 8px;
  grid-template-columns: repeat(2, 1fr);
  margin-bottom: 6px;
}
.zostava {
  display: flex; flex-direction: column; gap: 6px;
  padding: 8px; min-width: 0;
  background: #fff; color: inherit;
  border: 1.5px solid var(--linka, #e2d9c8); border-radius: 10px;
  cursor: pointer; text-align: left;
  transition: border-color .12s, box-shadow .12s;
}
.zostava:hover { border-color: var(--ink, #0b0b14); }
.zostava:focus-visible { outline: 3px solid var(--modra, #1b2cc1); outline-offset: 2px; }
/* Vybraná zostava musí byť rozoznateľná aj bez farby — nielen orámovaním,
   ale hrúbkou. Kto rozlišuje farby horšie, vidí rozdiel v rámčeku. */
.zostava[aria-pressed="true"] {
  border-color: var(--ink, #0b0b14);
  box-shadow: 0 0 0 2px var(--ink, #0b0b14);
}
.zostava__pruhy { display: flex; height: 26px; border-radius: 6px; overflow: hidden; }
.zostava__pruh { flex: 1; }
.zostava__nazov {
  font-size: .74rem; font-weight: 600; line-height: 1.25;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

/* ── poistka proti rozposlaniu ukážkových údajov ────────────────────────
   Nová pozvánka má v stave celý ukážkový obsah, ale polia ho ukazujú len
   ako placeholder — človek vidí prázdny formulár a myslí si, že pozvánka
   je prázdna. Tento box v poslednom kroku vypíše, čo je ešte z ukážky.

   Žltá, nie červená: nie je to chyba, je to vec na skontrolovanie. Červená
   by tu strašila pri každej novej pozvánke a ľudia by ju prestali čítať. */
.ukazkove {
  margin: 0 0 18px;
  padding: 14px 16px;
  background: #fff8dc;
  border: 3px solid var(--ink, #0b0b14);
  box-shadow: 5px 5px 0 var(--ink, #0b0b14);
}
.ukazkove__nadpis {
  margin: 0 0 6px;
  font-family: var(--font-display);
  font-size: 0.95rem;
  text-transform: uppercase;
  letter-spacing: 0.02em;
}
.ukazkove__text { margin: 0 0 10px; font-size: 0.86rem; line-height: 1.5; }
.ukazkove__zoznam { display: grid; gap: 6px; margin: 0 0 14px; font-size: 0.86rem; }
.ukazkove__zoznam li {
  display: grid; grid-template-columns: minmax(6.5em, auto) 1fr; gap: 4px 10px;
  align-items: baseline;
}
.ukazkove__zoznam b { font-weight: 800; }
/* Hodnota sa neláme na tri riadky — je to kontrola, nie čítanie. */
.ukazkove__zoznam span {
  min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  color: #55555f;
}
.ukazkove__pozn {
  grid-column: 2;
  font-size: 0.78rem; font-style: normal; color: #6b6b76;
}
.ukazkove__akcie { display: flex; flex-wrap: wrap; gap: 8px; }

/* ── panel „Predávam lístky" ───────────────────────────────────────────────
   Celý obsah panelu stavia js/editor-vstupne.js zo servera, takže tu sú len
   triedy, ktoré v editore inde nie sú: skupina prepínačov „predávaš ako"
   a riadok jedného druhu vstupného. */
.vstupne__kto { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 4px; }
.vstupne__volba { display: inline-flex; align-items: center; gap: 6px; font-size: 0.92rem; cursor: pointer; }
/* Dotyková plocha prepínača — 24 px kruh v 44 px riadku. Menší sa na
   telefóne netrafí a človek prepne opačnú možnosť, než chcel. */
.vstupne__volba input { width: 20px; height: 20px; margin: 12px 0; }

.vstupne__typy { display: grid; gap: 14px; margin: 10px 0 14px; }
.vstupne__typ {
  display: grid;
  grid-template-columns: 1fr 7rem 6rem;
  gap: 10px;
  align-items: end;
  padding: 12px;
  border: 1px solid var(--line, rgba(0, 0, 0, 0.18));
  border-radius: 6px;
}
/* Pod 560 px sa tri stĺpce nezmestia a čísla by sa zlomili na dva riadky
   uprostred poľa. Na telefóne teda pod seba. */
@media (max-width: 560px) {
  .vstupne__typ { grid-template-columns: 1fr; }
}
.vstupne__typ .field { margin: 0; }
/* Druh, ktorému organizátor ukončil predaj. Riadok ostáva — ukazuje naň
   vydaný lístok — ale musí byť na prvý pohľad vidieť, že sa hosťom už
   neponúka.

   BEZ PRIEHĽADNOSTI. Prvá verzia stlmila polia cez `opacity: 0.5` a zrazila
   tým popisky na 2,25 : 1 a vetu o predaných lístkoch na 2,31 : 1 — pod
   normou, pričom je to práve tá veta, ktorú organizátor potrebuje prečítať
   („Predaných 12, voľných zostáva 88"). Vypnutý stav preto nesie prerušovaný
   rám, tlmený podklad a ŠTÍTOK; text ostáva čitateľný, ako má. */
.vstupne__typ[data-vypnuty] {
  border-style: dashed;
  background: color-mix(in srgb, var(--line, rgba(0, 0, 0, 0.18)) 18%, transparent);
}
.vstupne__typ[data-vypnuty]::before {
  content: 'Predaj ukončený';
  grid-column: 1 / -1;
  font-size: 0.7rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  font-weight: 700;
  color: #6b5a00;
  background: #fdf3cd;
  border-radius: 3px;
  padding: 3px 8px;
  justify-self: start;
}
.vstupne__typ input[type="number"] { font-variant-numeric: tabular-nums; }
/* Poznámka o predaných lístkoch aj tlačidlo „Odobrať" idú cez celý riadok. */
.vstupne__typ > .panel__hint,
.vstupne__typ > .btn { grid-column: 1 / -1; margin: 0; justify-self: start; }

.vstupne__zap { display: flex; align-items: center; gap: 8px; }
.vstupne__zap input { width: 20px; height: 20px; margin: 12px 0; }

/* ── predaj lístkov v prehľade ─────────────────────────────────────────────
   Organizátor si prehľad otvára na mieste a na mobile, takže tu je jediné
   miesto, kde počas akcie nájde odkaz pre človeka pri dverách. Prázdny blok
   nič nezaberá — vykresľuje sa až vtedy, keď sa lístky naozaj predávajú. */
.listky:empty { display: none; }
.listky {
  margin: 0 0 18px; padding: 16px 18px;
  border: 3px solid var(--ink); background: #fff;
}
.listky__nadpis { margin: 0 0 12px; font-family: var(--font-display); font-size: 1.1rem; text-transform: uppercase; }
.listky__cisla { display: grid; gap: 10px; grid-template-columns: repeat(auto-fit, minmax(96px, 1fr)); margin-bottom: 14px; }
.listky__kus { padding: 10px 12px; border: 2px solid var(--ink); background: var(--cream); }
.listky__kus b { display: block; font-family: var(--font-display); font-size: 1.4rem; line-height: 1; font-variant-numeric: tabular-nums; }
.listky__kus span { font-size: 0.72rem; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; }
.listky__hint { margin: 10px 0 0; font-size: 0.84rem; line-height: 1.55; color: #4a4a58; }