/* ═══════════════════════════════════════════════════════════
   Vyvoláno — vstup kódem (/vyvolano), Ukázat kód (…/ukaz) a tisk
   kartičky A6 / plakátu A4 (…/ukaz?print=a6|a4). Spec kap. 5.1 a 5.6.
   Sdílené třídy (.live-dot, .code-display, .code-sep, .qr-tile, .sheet,
   .btn--xl, .sr-only) jsou v components/live.css a tady se jen skládají.
   ═══════════════════════════════════════════════════════════ */

/* Atribut hidden musí vyhrát nad display: z tříd níže (flex/grid by ho přebily). */
.vyv-body [hidden] { display: none !important; }

/* ── Logo VYVOLÁNO: čárka nad Á v akcentu ──
   Pod písmenem leží Á v akcentu, přes něj se kreslí A v barvě textu —
   ze spodního glyfu tak zůstane vidět jen čárka. Obal je aria-hidden,
   čtečka čte sousední .sr-only „Vyvoláno“, takže vygenerované A nepřekáží. */
.vyv-logo { font-weight: 700; white-space: nowrap; }
.vyv-acute { position: relative; color: var(--accent); }
.vyv-acute::after {
    content: 'A';
    position: absolute;
    left: 0;
    top: 0;
    color: var(--text);
}

/* ═══ Vstupní stránka ═══
   Obsah dole v dosahu palce, značka nahoře (auto margin sebere volné místo). */
.vyv-main {
    min-height: 100vh;
    min-height: 100dvh;
    max-width: 440px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    padding: env(safe-area-inset-top) max(16px, env(safe-area-inset-right)) calc(24px + env(safe-area-inset-bottom)) max(16px, env(safe-area-inset-left));
}

.vyv-brand {
    display: flex;
    align-items: center;
    gap: var(--s-2);
    margin-bottom: auto;
    padding: var(--s-4) 0 var(--s-6);
    font-family: var(--font-mono);
    font-size: 13px;
    line-height: 1.4;
    letter-spacing: .08em;
    color: var(--text);
}
.vyv-brand-by {
    margin-left: auto;
    color: var(--text-3);
    letter-spacing: .04em;
}

.vyv-title {
    font-size: var(--fs-2xl);
    margin-bottom: var(--s-2);
}
.vyv-lead {
    color: var(--text-2);
    line-height: 1.5;
    margin-bottom: var(--s-5);
}
.vyv-label {
    display: block;
    font-family: var(--font-mono);
    font-size: var(--fs-xs);
    font-weight: 600;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--text-2);
    margin-bottom: var(--s-2);
}

/* Značka, nadpis a popisky nejsou text k označení (dlouhý stisk by vyvolal lupu a Kopírovat).
   Pole na kód a formulář zůstávají mimo — WebKit předává user-select dolů do inputu. */
.vyv-brand, .vyv-title, .vyv-lead, .vyv-label {
    -webkit-user-select: none;
    user-select: none;
    -webkit-touch-callout: none;
}
.vyv-body .sheet { -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; }
.vyv-body .sheet input, .vyv-body .sheet textarea { -webkit-user-select: text; user-select: text; }

/* ── Pole na kód ──
   Bez JS je vidět obyčejný input (formulář funguje jako GET). S JS (třída .js
   na <html> z layoutu) leží neviditelný input přes 8 slotů: klávesnice, vkládání
   i automatické vyplnění dál patří skutečnému poli, sloty jen kreslí. */
.code-field { position: relative; }
.code-field input {
    display: block;
    width: 100%;
    min-height: 52px;
    padding: 12px 16px;
    background: var(--card-2);
    border: 1px solid var(--border);
    border-radius: var(--r-sm);
    color: var(--text);
    font-family: var(--font-mono);
    font-size: 20px;               /* ≥ 16 px, jinak iOS při fokusu zoomuje */
    font-weight: 700;
    letter-spacing: .18em;
    text-transform: uppercase;
}
.code-field input:focus {
    outline: none;
    border-color: var(--accent);
    box-shadow: 0 0 0 3px var(--accent-soft);
}
.code-slots { display: none; }

.js .code-field input {
    position: absolute;
    inset: 0;
    z-index: 1;
    height: 100%;
    min-height: 0;
    padding: 0;
    border: 0;
    opacity: 0;
    color: transparent;
    caret-color: transparent;
    font-size: 16px;
    letter-spacing: 0;
    cursor: text;
    -webkit-user-select: none;
    user-select: none;
}
.js .code-slots {
    display: flex;
    align-items: center;
    gap: clamp(3px, 1.4vw, 6px);
}
.code-slot {
    position: relative;
    display: grid;
    place-items: center;
    flex: none;
    /* Spec: clamp(34px, 9.2vw, 40px). Na displejích pod 360 px by se 8 slotů
       nevešlo, tak je strop ještě podíl šířky (gutter + mezery + tečka ≈ 88 px). */
    width: min(clamp(34px, 9.2vw, 40px), calc((100vw - 88px) / 8));
    height: 52px;
    background: var(--card-2);
    border: 1px solid var(--border);
    border-radius: var(--r-sm);
    font-family: var(--font-mono);
    font-size: 24px;
    font-weight: 700;
    line-height: 1;
    color: var(--text);
    transition: border-color var(--t-fast), box-shadow var(--t-fast), background var(--t-fast);
}
.code-slot.is-filled { border-color: var(--border-strong); }
.code-field.is-focused .code-slot.is-active {
    border-color: var(--accent);
    box-shadow: 0 0 0 3px var(--accent-soft);
}
.code-slot.is-error {
    border-color: var(--red);
    background: rgba(255, 69, 58, .08);
}
.code-field.is-focused .code-slot.is-error.is-active { border-color: var(--red); box-shadow: 0 0 0 3px rgba(255, 69, 58, .18); }
/* Kurzor: 2px čára v akcentu v prvním prázdném slotu */
.code-slot.is-caret::after {
    content: '';
    position: absolute;
    left: 50%;
    top: 14px;
    bottom: 14px;
    width: 2px;
    margin-left: -1px;
    border-radius: 1px;
    background: var(--accent);
    animation: vyv-caret 1s steps(1) infinite;
}
@keyframes vyv-caret { 50% { opacity: 0; } }
.code-slots .code-sep {
    flex: none;
    width: 12px;
    text-align: center;
    font-family: var(--font-mono);
    font-size: 24px;
    font-weight: 700;
    line-height: 1;
}
/* Neplatný kód: 3× ±6 px za 300 ms (při omezeném pohybu JS třídu nepřidá) */
.code-slots.is-shake { animation: vyv-shake 300ms linear; }
@keyframes vyv-shake {
    0%, 100% { transform: none; }
    16.6%, 50%, 83.3% { transform: translateX(-6px); }
    33.3%, 66.6% { transform: translateX(6px); }
}

/* Nápověda a chyba sdílí jedno místo, výška se nemění → tlačítko neposkočí */
.vyv-hint, .vyv-error {
    min-height: calc(1.5em * 2);
    margin: var(--s-2) 0 var(--s-3);
    font-size: var(--fs-sm);
    line-height: 1.5;
}
.vyv-hint { color: var(--text-3); }
.vyv-error { color: var(--red); font-weight: 500; }

#codeSubmit.is-busy { opacity: .75; cursor: progress; }
#codeSubmit[aria-disabled="true"] { opacity: .55; cursor: not-allowed; transform: none; }

.vyv-foot {
    margin-top: var(--s-4);
    font-size: var(--fs-xs);
    line-height: 1.5;
    color: var(--text-3);
    text-align: center;
}
/* Odkaz na zásady (sekce Vyvoláno): cíl ≥ 44 px i jako řádek textu */
.vyv-foot a {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    color: var(--text-2);
    text-decoration: underline;
    text-underline-offset: 3px;
}

/* ═══ Ukázat kód ═══
   Mřížka s pojmenovanými oblastmi: na výšku jeden sloupec, na šířku QR vlevo
   přes celou výšku. Mezery jsou marginy, ne gap — skrytý chip nebo nápověda
   jinak nechají prázdnou mezeru. */
.vyv-show {
    --qr: min(78vw, 46vh);
    --qr: min(78vw, 46dvh);
    min-height: 100vh;
    min-height: 100dvh;
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas: "bar" "." "head" "qr" "code" "hint" "status" "chip" "bright" ".";
    grid-template-rows: auto 1fr auto auto auto auto auto auto auto 1fr;
    justify-items: center;
    text-align: center;
    padding: env(safe-area-inset-top) max(16px, env(safe-area-inset-right)) calc(16px + env(safe-area-inset-bottom)) max(16px, env(safe-area-inset-left));
}
.vyv-show-bar   { grid-area: bar; }
.vyv-show-head  { grid-area: head; }
.vyv-show-qr    { grid-area: qr; }
.vyv-show-code  { grid-area: code; }
.vyv-show-hint  { grid-area: hint; }
.vyv-show-status{ grid-area: status; }
.vyv-chip       { grid-area: chip; }
.vyv-bright     { grid-area: bright; }

.vyv-show-bar {
    justify-self: stretch;
    display: flex;
    align-items: center;
    justify-content: space-between;
    min-height: 48px;
    margin-bottom: var(--s-3);
}
/* Podrž pro zavření: dlouhý stisk, ne klepnutí — host, kterému Adam podá
   telefon, obrazovku omylem nezavře. Žádná bublina ani výběr textu při držení. */
.vyv-hold {
    display: inline-flex;
    align-items: center;
    gap: var(--s-2);
    min-height: 48px;
    padding: 0 var(--s-3) 0 var(--s-1);
    border-radius: 50px;
    color: var(--text-2);
    font-size: var(--fs-sm);
    font-weight: 500;
    -webkit-user-select: none;
    user-select: none;
    -webkit-touch-callout: none;
    /* none, ne manipulation: posun prstu o pár px by jinak prohlížeč vzal jako
       začátek scrollu, poslal pointercancel a držení by se nedalo dokončit. */
    touch-action: none;
}
.vyv-hold-ring { display: grid; place-items: center; width: 32px; height: 32px; }
.vyv-hold-ring svg { display: block; transform: rotate(-90deg); overflow: visible; }
.vyv-hold-ring circle { fill: none; stroke-width: 2.5; }
.vyv-hold-track { stroke: var(--border-strong); }
.vyv-hold-fill {
    stroke: var(--accent);
    stroke-linecap: round;
    stroke-dasharray: 56.55;       /* 2π · 9 */
    stroke-dashoffset: 56.55;
    transition: stroke-dashoffset 150ms ease;
}
/* Plnění je ukazatel průběhu, ne ozdoba: běží lineárně i při omezeném pohybu */
.vyv-hold.is-holding .vyv-hold-fill {
    stroke-dashoffset: 0;
    transition: stroke-dashoffset 800ms linear !important;
}
.vyv-hold.is-holding { color: var(--text); }
.vyv-more {
    display: grid;
    place-items: center;
    width: 48px;
    height: 48px;
    border-radius: 50%;
    color: var(--text);
}
@media (hover: hover) {
    .vyv-hold:hover, .vyv-more:hover { background: var(--glass-2); }
}

.vyv-show-head { margin-bottom: var(--s-4); max-width: 100%; }
.vyv-show-sub {
    font-size: 19px;
    line-height: 1.3;
    color: var(--text-2);
}
.vyv-show-title {
    font-size: 24px;
    line-height: 1.2;
    margin-top: var(--s-1);
    overflow-wrap: anywhere;
    /* Dlouhý název nesmí odsunout QR a kód z displeje */
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    overflow: hidden;
}
.vyv-show-qr {
    width: var(--qr);
    margin-bottom: var(--s-5);
}
/* Velký kód musí vejít i na úzký displej: spec clamp(56px, 16vw, 120px),
   strop podle šířky. Nejširší kód WWWW·WWWW má ve Space Grotesku s prostrkáním
   ≈ 7,95 em (měřeno v Chrome), proto dělitel 8 — s 6,2 kód s M/W přetekl displej. */
.vyv-show-code {
    font-size: min(clamp(36px, 16vw, 120px), calc((100vw - 32px) / 8));
    margin-bottom: var(--s-3);
    max-width: 100%;
}
.vyv-show-hint {
    font-size: var(--fs-base);
    line-height: 1.45;
    color: var(--text-2);
    margin-bottom: var(--s-3);
    max-width: 34ch;
}
.vyv-show-url {
    color: var(--accent-hover);
    font-weight: 600;
    white-space: nowrap;
}
.vyv-show-status {
    display: inline-flex;
    align-items: center;
    gap: var(--s-2);
    font-size: var(--fs-base);
    font-weight: 500;
    color: var(--text);
    font-variant-numeric: tabular-nums;
    margin-bottom: var(--s-3);
}
.vyv-chip {
    display: inline-flex;
    align-items: center;
    gap: var(--s-2);
    max-width: 100%;
    padding: 6px 14px;
    background: var(--card-2);
    border: 1px solid var(--border);
    border-radius: var(--r);
    font-size: var(--fs-xs);
    line-height: 1.4;
    color: var(--text-2);
    text-align: left;
    margin-bottom: var(--s-3);
}
.vyv-chip .icon { color: var(--text-2); }
.vyv-chip.is-warn .icon { color: var(--orange); }
.vyv-bright {
    display: flex;
    align-items: center;
    gap: var(--s-3);
    max-width: 440px;
    padding: var(--s-2) var(--s-2) var(--s-2) var(--s-4);
    background: var(--card);
    border: 1px solid var(--border-strong);
    border-radius: var(--r);
    font-size: var(--fs-sm);
    line-height: 1.45;
    text-align: left;
    box-shadow: var(--glint-top);
}
.vyv-bright p { flex: 1 1 auto; }
.vyv-bright-ok { flex: none; min-height: 44px; }

/* Kód přestal platit (Adam vygeneroval nový): QR a kód zešednou, ať ho nikdo nenaskenuje */
.vyv-show.is-gone .vyv-show-qr,
.vyv-show.is-gone .vyv-show-code { opacity: .15; }
.vyv-show.is-gone .vyv-show-status { color: var(--red); }

@media (orientation: landscape) {
    .vyv-show {
        --qr: min(calc(100vh - 32px), 46vw);
        --qr: min(calc(100dvh - 32px - env(safe-area-inset-top) - env(safe-area-inset-bottom)), 46vw);
        grid-template-columns: auto minmax(0, 1fr);
        grid-template-areas:
            "qr bar" "qr ." "qr head" "qr code" "qr hint" "qr status" "qr chip" "qr bright" "qr .";
        grid-template-rows: auto 1fr auto auto auto auto auto auto 1fr;
        column-gap: var(--s-6);
        padding-top: calc(16px + env(safe-area-inset-top));
    }
    /* QR drží nahoře (sticky): když se vpravo sejde nápověda k jasu i varování
       o zhasínání, sloupec se odscrolluje, ale QR zůstane celý vidět. */
    .vyv-show-qr {
        align-self: start;
        position: sticky;
        top: calc(16px + env(safe-area-inset-top));
        margin-bottom: 0;
    }
    .vyv-show-bar { margin-bottom: 0; }
    /* Na šířku je výška vzácná: menší rozestupy (pořád ≥ 8 px) */
    .vyv-show-head, .vyv-show-code, .vyv-show-hint, .vyv-show-status, .vyv-chip { margin-bottom: var(--s-2); }
    .vyv-show-hint { max-width: none; }
    .vyv-show-code { font-size: min(120px, 16vh, calc((100vw - var(--qr) - 64px) / 8)); }
    .vyv-show-code { font-size: min(120px, 16dvh, calc((100vw - var(--qr) - 64px) / 8)); }
}

/* ═══ Tisk: kartička A6 a plakát A4 ═══
   Rozměry v „milimetrech papíru“: --u = šířka papíru / šířka v mm (container
   units). Na displeji je tak náhled věrně zmenšený, v tisku je 1 --u = 1 mm.
   Bílý papír, černý text, crimson jen tenká linka. */
.vyv-print {
    min-height: 100vh;
    min-height: 100dvh;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--s-4);
    padding: calc(16px + env(safe-area-inset-top)) max(16px, env(safe-area-inset-right)) calc(24px + env(safe-area-inset-bottom)) max(16px, env(safe-area-inset-left));
}
.vyv-print-actions {
    display: flex;
    justify-content: space-between;
    gap: var(--s-2);
    width: 100%;
    max-width: 420px;
}
.vyv-print--a4 .vyv-print-actions { max-width: 640px; }
.vyv-print-actions .btn { min-height: 48px; }

.vyv-paper {
    container-type: inline-size;
    /* Obsah svisle na střed papíru (na displeji výšku dává poměr stran, v tisku min-height) */
    display: flex;
    flex-direction: column;
    justify-content: center;
    width: 100%;
    max-width: 420px;
    aspect-ratio: 105 / 148;
    background: #fff;
    color: #111;
    border-radius: 4px;
    box-shadow: var(--shadow-2);
}
.vyv-print--a4 .vyv-paper { max-width: 640px; aspect-ratio: 210 / 297; }

.vyv-sheet {
    --u: calc(100cqw / 105);
    --ink: #111;
    --line: #c8102e;
    margin: calc(8 * var(--u));
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    color: var(--ink);
    font-family: var(--font-display);
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
}
.vyv-print--a4 .vyv-sheet {
    --u: calc(100cqw / 210);
    margin: calc(12 * var(--u));
}
.vyv-sheet p, .vyv-sheet h1 { margin: 0; }
.vyv-sheet-brand {
    font-size: calc(6 * var(--u));
    letter-spacing: .14em;
    line-height: 1.1;
}
.vyv-sheet-brand::after {
    content: '';
    display: block;
    width: calc(18 * var(--u));
    margin: calc(2.5 * var(--u)) auto calc(3 * var(--u));
    border-top: max(1px, calc(.4 * var(--u))) solid var(--line);
}
.vyv-logo--paper .vyv-acute { color: inherit; }
/* Na papíře je Á celé černé — překryvné A by jen zdvojilo tah */
.vyv-logo--paper .vyv-acute::after { content: none; }
.vyv-sheet-sub {
    font-family: var(--font-body);
    font-size: calc(3.8 * var(--u));
    line-height: 1.3;
    color: #333;
}
.vyv-sheet-title {
    font-size: calc(6.5 * var(--u));
    line-height: 1.15;
    letter-spacing: -0.01em;
    margin-top: calc(1 * var(--u)) !important;
    max-width: 100%;
    overflow-wrap: anywhere;
    /* Dlouhý název nesmí kartičku přetéct na druhou stránku */
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    overflow: hidden;
}
.vyv-sheet-qr {
    width: calc(60 * var(--u));
    margin: calc(3 * var(--u)) 0;
    line-height: 0;
}
.vyv-sheet-qr svg { display: block; width: 100%; height: auto; }
.vyv-sheet-url {
    font-size: calc(5.2 * var(--u));
    font-weight: 700;
    line-height: 1.2;
}
.vyv-sheet-code {
    font-size: calc(4.2 * var(--u));
    line-height: 1.3;
    margin-top: calc(1 * var(--u)) !important;
}
.vyv-sheet-code-val {
    font-size: calc(5.6 * var(--u));
    font-weight: 700;
    letter-spacing: .06em;
    white-space: nowrap;
}
.vyv-sheet .code-sep { color: inherit; }
.vyv-sheet-tag {
    font-size: calc(3.4 * var(--u));
    font-weight: 500;
    line-height: 1.3;
    margin-top: calc(3 * var(--u)) !important;
}
.vyv-sheet-small {
    font-family: var(--font-body);
    font-size: calc(2.8 * var(--u));
    line-height: 1.35;
    color: #333;
    margin-top: calc(1.2 * var(--u)) !important;
    max-width: calc(70 * var(--u));
}

/* A4 plakát: stejné pořadí, větší písmo a QR 140 mm */
.vyv-print--a4 .vyv-sheet-brand { font-size: calc(11 * var(--u)); }
.vyv-print--a4 .vyv-sheet-brand::after { width: calc(36 * var(--u)); margin: calc(5 * var(--u)) auto calc(6 * var(--u)); border-top-width: max(1px, calc(.6 * var(--u))); }
.vyv-print--a4 .vyv-sheet-sub { font-size: calc(7 * var(--u)); }
.vyv-print--a4 .vyv-sheet-title { font-size: calc(11 * var(--u)); margin-top: calc(2 * var(--u)) !important; }
.vyv-print--a4 .vyv-sheet-qr { width: calc(140 * var(--u)); margin: calc(6 * var(--u)) 0; }
.vyv-print--a4 .vyv-sheet-url { font-size: calc(10 * var(--u)); }
.vyv-print--a4 .vyv-sheet-code { font-size: calc(7.5 * var(--u)); margin-top: calc(2 * var(--u)) !important; }
.vyv-print--a4 .vyv-sheet-code-val { font-size: calc(10 * var(--u)); }
.vyv-print--a4 .vyv-sheet-tag { font-size: calc(6 * var(--u)); margin-top: calc(5 * var(--u)) !important; }
.vyv-print--a4 .vyv-sheet-small { font-size: calc(4.6 * var(--u)); max-width: calc(140 * var(--u)); margin-top: calc(2 * var(--u)) !important; }

@media print {
    html, body { background: #fff !important; color: #000 !important; min-height: 0 !important; }
    body::before, body::after { display: none !important; }
    .vyv-print-actions, .toast-wrap { display: none !important; }
    .vyv-print { display: block; min-height: 0; padding: 0; }
    /* Papír = obsahová plocha stránky (@page margin už okraj dělá). Selektor musí
       přebít i .vyv-print--a4 .vyv-paper, jinak by plakát zůstal 640 px široký. */
    .vyv-print .vyv-paper {
        max-width: none;
        width: auto;
        aspect-ratio: auto;
        min-height: 126mm;         /* A6: 148 − 2 × 8 mm, s rezervou na zaokrouhlení */
        border-radius: 0;
        box-shadow: none;
        break-inside: avoid;
    }
    .vyv-print--a4 .vyv-paper { min-height: 265mm; }   /* A4: 297 − 2 × 12 mm, s rezervou */
    .vyv-sheet { margin: 0; --u: calc(100cqw / 89); }                   /* A6 105 − 2 × 8 mm */
    .vyv-print--a4 .vyv-sheet { margin: 0; --u: calc(100cqw / 186); }   /* A4 210 − 2 × 12 mm */
}

/* ── Přechod ze vstupu kódem do galerie ──
   Cross-document view transition: Safari 18.2+ a Chrome 126+ stránky prolnou, jinde se
   pravidlo ignoruje. Opt-in musí mít obě stránky (gallery-live.css to dělá taky).
   Při omezeném pohybu se nezapíná vůbec. */
@media (prefers-reduced-motion: no-preference) {
    @view-transition { navigation: auto; }
    ::view-transition-old(root), ::view-transition-new(root) { animation-duration: 250ms; }
}

/* ── Omezený pohyb: kurzor nebliká, pole se netřese ── */
@media (prefers-reduced-motion: reduce) {
    .code-slot.is-caret::after { animation: none; }
    .code-slots.is-shake { animation: none; }
}