/* app.css — rozloženie, typografia, komponenty.
 *
 * Paleta sem NEPATRÍ. Farby definuje `theme.css` ako premenné na `:root`
 * (--bg --surface --text --muted --accent --amber --green --red --line --radius).
 *
 * Prečo kaskádové vrstvy: `theme.css` je cudzí súbor a smie prísť neskôr alebo
 * vôbec. Bez záložných hodnôt by sa appka vykreslila ako neviditeľný text na
 * neviditeľnom pozadí. Vrstvy to riešia bez toho, aby sa fallback bil s témou:
 * `theme` prebíja `fallback`, `app` rieši rozloženie a farby nepretiera.
 */

@layer fallback, theme, app;
@import url('theme.css') layer(theme);

/* ------------------------------------------------------- záložná paleta */

@layer fallback {
    :root {
        --bg: #ffffff;
        --surface: #f4f3ef;
        --text: #1b1a17;
        --muted: #5c584f;
        --accent: #0d6a54;
        --amber: #8a5300;
        --green: #1f6b3a;
        --red: #a3231c;
        --line: #dcd8ce;
        --radius: 14px;
    }

    @media (prefers-color-scheme: dark) {
        :root {
            --bg: #15161a;
            --surface: #1f2126;
            --text: #eceae4;
            --muted: #a5a49d;
            --accent: #4fd1a5;
            --amber: #f0b357;
            --green: #6ede97;
            --red: #ff8b82;
            --line: #32353c;
        }
    }

    :root[data-theme='light'] {
        --bg: #ffffff;
        --surface: #f4f3ef;
        --text: #1b1a17;
        --muted: #5c584f;
        --accent: #0d6a54;
        --amber: #8a5300;
        --green: #1f6b3a;
        --red: #a3231c;
        --line: #dcd8ce;
    }

    :root[data-theme='dark'] {
        --bg: #15161a;
        --surface: #1f2126;
        --text: #eceae4;
        --muted: #a5a49d;
        --accent: #4fd1a5;
        --amber: #f0b357;
        --green: #6ede97;
        --red: #ff8b82;
        --line: #32353c;
    }

    /* Na slnku: telo textu ≥ 7:1, žiadne polotóny (ux-spec §10). */
    :root[data-sun] {
        --bg: #ffffff;
        --surface: #ffffff;
        --text: #000000;
        --muted: #2b2b2b;
        --accent: #00432f;
        --amber: #5a3600;
        --green: #0b4a22;
        --red: #7a0d08;
        --line: #000000;
    }
}

@layer app {
    /* ------------------------------------------------------------- základ */

    *,
    *::before,
    *::after {
        box-sizing: border-box;
    }

    html {
        -webkit-text-size-adjust: 100%;
    }

    /* ⚠️ `font: 600 16px/1.3 inherit` je NEPLATNÉ CSS a prehliadač zahodí celú
     * deklaráciu — `inherit` smie stáť v skratke `font` len ako celá hodnota,
     * nie na mieste rodiny písma. Päť takých riadkov tu ticho ležalo: tlačidlá
     * aj polia preto vychádzali 13,33 px Arial 400 namiesto 16 px system-ui 600.
     * Na iOS je to horšie než kozmetika — Safari pri fokuse do poľa pod 16 px
     * zazoomuje stránku a späť nezoomne, čiže sa to prejaví hneď na registrácii.
     * Píš dve deklarácie (`font-family: inherit` + `font-size`), nikdy skratku.
     *
     * Toto pravidlo je záchranná sieť pre polia, ktoré si veľkosť nedeklarujú
     * samy. Tlačidlá tu zámerne nie sú: iOS zoomuje len pri písaní, a plošné
     * `button{font-size:16px}` by prepísalo aj vedomé 13–14 px popisky v
     * záložkách obrazoviek. */
    input,
    select,
    textarea {
        font-family: inherit;
        font-size: 16px;
    }

    /* `[hidden]` z UA štýlu má nižšiu prioritu než `.btn { display: flex }`,
     * takže by skryté tlačidlo ostalo na obrazovke. `!important` je tu naozaj
     * na mieste — skrytie nesmie prehrať so žiadnym rozložením. */
    [hidden] {
        display: none !important;
    }

    body {
        margin: 0;
        background: var(--bg);
        color: var(--text);
        font: 400 16px/1.5 var(--font, system-ui, -apple-system, 'Segoe UI', Roboto, Arial, sans-serif);
        overflow-wrap: break-word;
    }

    body.is-locked {
        overflow: hidden;
    }

    #app {
        display: flex;
        flex-direction: column;
        max-width: 640px;
        min-height: 100dvh;
        margin: 0 auto;
    }

    h1,
    h2,
    h3 {
        margin: 0;
        font-weight: 600;
        line-height: 1.25;
    }

    p {
        margin: 0;
    }

    :focus-visible {
        outline: 3px solid var(--focus, var(--accent));
        outline-offset: 2px;
        border-radius: 4px;
    }

    .sr-only {
        position: absolute;
        width: 1px;
        height: 1px;
        margin: -1px;
        padding: 0;
        border: 0;
        overflow: hidden;
        clip-path: inset(50%);
        white-space: nowrap;
    }

    /* Preskakovací odkaz dodáva `index.php` nad `#app`. */
    .skip-link {
        position: absolute;
        left: 8px;
        top: -100px;
        z-index: 60;
        padding: 12px 16px;
        border-radius: var(--radius);
        background: var(--accent);
        color: var(--on-accent, var(--bg));
        font-weight: 600;
        text-decoration: none;
    }

    .skip-link:focus {
        top: 8px;
    }

    .ico {
        display: block;
        fill: currentColor;
        flex: none;
    }

    .muted {
        color: var(--muted);
        font-size: 14px;
    }

    .link {
        color: var(--accent);
        font-weight: 600;
        text-decoration: underline;
        text-underline-offset: 3px;
    }

    .link--quiet {
        display: block;
        min-height: 44px;
        padding: 12px 0;
        border: 0;
        background: none;
        font: inherit;
        text-align: center;
        cursor: pointer;
    }

    /* ---------------------------------------------------------- hlavička */

    .hdr {
        position: sticky;
        top: 0;
        z-index: 20;
        display: flex;
        align-items: center;
        gap: 4px;
        min-height: 56px;
        padding: 4px 8px;
        border-bottom: 1px solid var(--line);
        background: var(--bg);
    }

    /* The brand: the mark (36 px, free space 9 px — brand/README.md §4) on the
     * phone, the lockup from 900 px. Both come inline from brand.js; the link
     * keeps the 48 px tap target of every other header control. */
    .hdr__brand {
        display: flex;
        align-items: center;
        min-height: 48px;
    }

    .hdr__brandLink {
        display: inline-flex;
        align-items: center;
        min-height: 48px;
        padding-inline: 8px;
        border-radius: var(--radius-sm);
        color: var(--text);
    }

    .hdr__brandLink svg {
        display: block;
        height: 36px;
        width: auto;
    }

    /* The wordmark is stroked with currentColor, but the file carries a dark
     * fallback as an attribute on the group — and an attribute beats
     * inheritance, so the colour is set on the group itself. */
    .hdr__brandLink svg g,
    .door__mark svg g {
        color: var(--text);
    }

    .hdr__brandLink svg + svg {
        display: none;
    }

    .hdr__title {
        flex: 1;
        min-width: 0;
        font-size: 17px;
        font-weight: 600;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .hdr--main .hdr__title {
        flex: 1;
    }

    .hdr__right {
        display: flex;
        align-items: center;
        gap: 2px;
        margin-left: auto;
    }

    .hdr__actions {
        display: flex;
        align-items: center;
        gap: 2px;
    }

    .iconbtn {
        display: grid;
        place-items: center;
        min-width: 48px;
        min-height: 48px;
        padding: 0;
        border: 0;
        border-radius: 50%;
        background: none;
        color: inherit;
        font: inherit;
        cursor: pointer;
    }

    .iconbtn:hover {
        background: var(--surface);
    }

    /* Prepínač jazyka pre človeka bez účtu (`ui.js` — `langSwitch()`).
     * Dotykový cieľ drží `--tap`, na rozdiel od `.lang` na verejnom landingu
     * (`landing.css`), ktorý nie je appka a `--tap` sa naň nevzťahuje. */
    .lang {
        display: inline-flex;
        border: 1px solid var(--line);
        border-radius: 999px;
        overflow: hidden;
    }

    .lang__opt {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        min-width: var(--tap, 44px);
        min-height: var(--tap, 44px);
        padding: 0 12px;
        border: 0;
        background: none;
        color: var(--muted);
        font: inherit;
        font-size: 13px;
        font-weight: 700;
        letter-spacing: 0.04em;
        cursor: pointer;
    }

    .lang__opt:hover {
        background: var(--surface);
    }

    .lang__opt[aria-current='true'] {
        background: var(--accent);
        color: var(--on-accent);
    }

    .avatar {
        display: grid;
        place-items: center;
        min-width: var(--tap, 44px);
        min-height: var(--tap, 44px);
        margin-inline: 2px;
        padding: 0;
        border: 1px solid var(--line);
        border-radius: 50%;
        background: var(--surface);
        color: var(--text);
        font-family: inherit;
        font-size: 14px;
        font-weight: 600;
        line-height: 1;
        letter-spacing: 0.02em;
        cursor: pointer;
    }

    .avatar--sm {
        min-width: 32px;
        min-height: 32px;
        font-size: 12px;
    }

    /* Pás „server nekomunikuje". Informuje, neblokuje (ux-spec §9.2). */
    .offline {
        display: flex;
        align-items: center;
        gap: 8px;
        min-height: 40px;
        padding: 8px 12px;
        background: color-mix(in srgb, var(--amber) 16%, var(--bg));
        border-bottom: 1px solid var(--amber);
        color: var(--text);
        font-size: 14px;
    }

    .offline__ico {
        color: var(--amber);
    }

    .offline__msg {
        flex: 1;
    }

    .offline__retry {
        min-height: 44px;
        padding: 6px 14px;
        border: 1px solid var(--amber);
        border-radius: 999px;
        background: none;
        color: var(--text);
        font-family: inherit;
        font-size: 15px;
        font-weight: 600;
        line-height: 1;
        cursor: pointer;
    }

    /* -------------------------------------------------------- obrazovka */

    .screen {
        flex: 1;
        /* Miesto na snackbar a hlavné akcie v dolnej tretine. */
        padding: 16px 16px calc(112px + env(safe-area-inset-bottom));
    }

    .screen:focus {
        outline: none;
    }

    /* --------------------------------------------------------- tlačidlá */

    .btn {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: 10px;
        min-height: 48px;
        padding: 12px 20px;
        border: 1px solid var(--line);
        border-radius: var(--radius);
        background: var(--surface);
        color: var(--text);
        /* Hlavná akcia nesmie byť drobnejšia než text, ktorý ju obklopuje —
         * dvaja testeri nezávisle: „presne to, čo si musím prečítať pred
         * stlačením, je najdrobnejšie." 16 px je telo textu, nie menej. */
        font-family: inherit;
        font-size: 16px;
        font-weight: 600;
        line-height: 1.3;
        text-align: center;
        text-decoration: none;
        cursor: pointer;
    }

    .btn:disabled {
        opacity: 0.55;
        cursor: default;
    }

    .btn--wide {
        width: 100%;
    }

    .btn--primary {
        border-color: var(--accent);
        background: var(--accent);
        color: var(--on-accent, var(--bg));
    }

    .btn--ghost {
        background: none;
    }

    /* Nezvratná akcia musí vyzerať nezvratne. „Vynulovať postup?" ponúkalo
     * „Nechať tak" a „Vynulovať" v rovnakej bielej, rovnako drobné, s rovnakým
     * tenkým rámom — 71-ročná testerka nad tým držala prst a bála sa ho pustiť.
     * Appka to inde vie: „Odobrať zo zoznamu" je červené s košom a pochopila ho
     * bez čítania. Farba na to sama nestačí (ux-spec §10: stav nikdy len farbou),
     * preto `ui.js` pridá k červenej aj ikonu. */
    .btn--danger {
        border-color: var(--red);
        background: var(--red);
        color: var(--on-accent, var(--bg));
    }

    .btn--danger .btn__ico {
        color: inherit;
    }

    .btn--google {
        background: var(--bg);
    }

    .btn__ico {
        display: grid;
        place-items: center;
    }

    /* --------------------------------------------------------- formuláre */

    .form {
        display: flex;
        flex-direction: column;
        gap: 18px;
    }

    .form__err {
        padding: 10px 12px;
        border: 1px solid var(--red);
        border-radius: var(--radius);
        color: var(--red);
        font-size: 15px;
    }

    .form__err:empty {
        display: none;
    }

    .field {
        display: flex;
        flex-direction: column;
        gap: 6px;
    }

    .field__label {
        font-size: 14px;
        font-weight: 600;
        color: var(--muted);
    }

    .field__row {
        display: flex;
        align-items: stretch;
        gap: 4px;
    }

    .field__row .field__input {
        flex: 1;
        min-width: 0;
    }

    .field__input {
        min-height: 48px;
        padding: 12px 14px;
        border: 1px solid var(--line);
        border-radius: var(--radius);
        background: var(--bg);
        color: var(--text);
        /* 16 px je minimum, pri ktorom iOS Safari nezoomuje pri fokuse. */
        font-family: inherit;
        font-size: 16px;
        font-weight: 400;
        line-height: 1.4;
    }

    .field__input::placeholder {
        color: var(--muted);
        opacity: 0.75;
    }

    .field__eye {
        border: 1px solid var(--line);
        border-radius: var(--radius);
    }

    .field__hint {
        color: var(--muted);
        font-size: 14px;
    }

    .field__strength {
        font-weight: 600;
    }

    .field__err {
        color: var(--red);
        font-size: 14px;
        font-weight: 600;
    }

    .field__err:empty {
        display: none;
    }

    /* ------------------------------------------------------------- dvere */

    .door {
        display: flex;
        flex-direction: column;
        gap: 28px;
        justify-content: center;
        padding-top: max(24px, env(safe-area-inset-top));
    }

    .door__hero {
        display: flex;
        flex-direction: column;
        gap: 16px;
    }

    /* The lockup at the top of every door state. 220 px is well above the
     * 160 px minimum under which the letters of the wordmark run together
     * (brand/README.md §4); the free space is the hero's own gap. */
    .door__mark {
        color: var(--text);
    }

    .door__mark svg {
        display: block;
        width: 220px;
        max-width: 100%;
        height: auto;
    }

    .door__lead {
        max-width: 34ch;
        font-size: 17px;
        line-height: 1.55;
    }

    .door__actions {
        display: flex;
        flex-direction: column;
        gap: 12px;
    }

    .door__or {
        display: flex;
        align-items: center;
        gap: 12px;
        color: var(--muted);
        font-size: 14px;
    }

    .door__or::before,
    .door__or::after {
        content: '';
        flex: 1;
        height: 1px;
        background: var(--line);
    }

    .door__wall {
        display: flex;
        flex-direction: column;
        gap: 4px;
        color: var(--muted);
        font-size: 15px;
    }

    .door__bar {
        display: flex;
        align-items: center;
        gap: 4px;
        margin: -8px -8px 8px;
        min-height: 56px;
    }

    .door__barTitle {
        font-size: 19px;
        font-weight: 600;
    }

    .door__form {
        display: flex;
        flex-direction: column;
        gap: 20px;
    }

    .door__fine {
        color: var(--muted);
        font-size: 13px;
        line-height: 1.5;
    }

    .door__inviteFrom {
        display: flex;
        align-items: center;
        gap: 10px;
        color: var(--muted);
        font-size: 15px;
    }

    .door__inviteName {
        font-size: 26px;
        font-weight: 700;
        letter-spacing: -0.01em;
    }

    .door__receipt {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 16px;
        padding-top: 24px;
        text-align: center;
    }

    .door__receiptIco {
        color: var(--green);
    }

    .door__receiptTitle {
        font-size: 24px;
    }

    .door__receiptBody {
        max-width: 34ch;
        font-size: 16px;
        line-height: 1.55;
    }

    .door__receiptActions {
        display: flex;
        flex-wrap: wrap;
        gap: 12px;
        justify-content: center;
        margin-top: 8px;
    }

    /* -------------------------------------------------------- snackbar */

    .toast {
        position: fixed;
        left: 50%;
        bottom: calc(84px + env(safe-area-inset-bottom));
        z-index: 50;
        display: flex;
        align-items: center;
        gap: 12px;
        width: min(560px, calc(100vw - 24px));
        padding: 12px 12px 12px 16px;
        border: 1px solid var(--line);
        border-radius: var(--radius);
        background: var(--surface);
        box-shadow: var(--shadow, 0 8px 28px rgb(0 0 0 / 22%));
        transform: translate(-50%, 12px);
        opacity: 0;
        transition: transform 160ms ease, opacity 160ms ease;
    }

    .toast.is-in {
        transform: translate(-50%, 0);
        opacity: 1;
    }

    .toast__msg {
        flex: 1;
        font-size: 15px;
    }

    /* 88 px cieľ v strede dosahu palca (ux-spec §4.2). */
    .toast__action {
        min-width: 88px;
        min-height: 44px;
        padding: 10px 14px;
        border: 0;
        border-radius: 10px;
        background: none;
        color: var(--accent);
        font-family: inherit;
        font-size: 16px;
        font-weight: 700;
        line-height: 1;
        letter-spacing: 0.04em;
        text-transform: uppercase;
        cursor: pointer;
    }

    /* ------------------------------------------------------ spodný panel */

    .sheet,
    .dialog {
        position: fixed;
        inset: 0;
        z-index: 40;
        display: flex;
        flex-direction: column;
        justify-content: flex-end;
    }

    .sheet__scrim {
        position: absolute;
        inset: 0;
        background: rgb(0 0 0 / 45%);
        opacity: 0;
        transition: opacity 180ms ease;
    }

    .sheet.is-in .sheet__scrim,
    .dialog.is-in .sheet__scrim {
        opacity: 1;
    }

    .sheet__panel,
    .dialog__panel {
        position: relative;
        width: min(640px, 100%);
        margin: 0 auto;
        max-height: 88dvh;
        padding: 8px 16px calc(20px + env(safe-area-inset-bottom));
        border-radius: 20px 20px 0 0;
        background: var(--bg);
        overflow-y: auto;
        transform: translateY(16px);
        opacity: 0;
        transition: transform 180ms ease, opacity 180ms ease;
    }

    .sheet.is-in .sheet__panel,
    .dialog.is-in .dialog__panel {
        transform: translateY(0);
        opacity: 1;
    }

    .sheet__panel:focus,
    .dialog__panel:focus {
        outline: none;
    }

    .sheet__grip {
        width: 40px;
        height: 4px;
        margin: 4px auto 8px;
        border-radius: 2px;
        background: var(--line);
    }

    .sheet__head {
        display: flex;
        align-items: center;
        gap: 8px;
        margin-bottom: 8px;
    }

    .sheet__title {
        flex: 1;
        min-width: 0;
        font-size: 19px;
    }

    .sheet__body {
        padding-bottom: 8px;
    }

    .dialog__panel {
        padding-top: 24px;
    }

    .dialog__title {
        font-size: 20px;
        margin-bottom: 8px;
    }

    .dialog__body {
        color: var(--text);
        font-size: 16px;
        line-height: 1.55;
    }

    .dialog__actions {
        display: flex;
        flex-wrap: wrap;
        gap: 12px;
        margin-top: 24px;
    }

    .dialog__actions .btn {
        flex: 1;
        min-width: 140px;
    }

    /* ----------------------------------------------------------- zoznamy */

    .menu {
        display: flex;
        flex-direction: column;
    }

    .menu__row,
    .row {
        display: flex;
        align-items: center;
        gap: 14px;
        width: 100%;
        min-height: 56px;
        padding: 12px 4px;
        border: 0;
        border-bottom: 1px solid var(--line-soft, var(--line));
        background: none;
        color: inherit;
        font: inherit;
        text-align: left;
    }

    .menu__row {
        cursor: pointer;
    }

    .menu__row:last-child,
    .row:last-child {
        border-bottom: 0;
    }

    .menu__row--quiet {
        color: var(--muted);
    }

    .menu__ico,
    .row__ico {
        display: grid;
        place-items: center;
        color: var(--muted);
    }

    .menu__label {
        font-size: 16px;
        font-weight: 600;
    }

    .row__text {
        display: flex;
        flex: 1;
        flex-direction: column;
        gap: 2px;
        min-width: 0;
    }

    .row__label {
        font-size: 16px;
        font-weight: 600;
    }

    .row__hint {
        color: var(--muted);
        font-size: 14px;
        line-height: 1.4;
    }

    .row--switch {
        cursor: pointer;
    }

    .row--danger {
        cursor: pointer;
    }

    .row--danger .row__ico,
    .row--danger .row__label {
        color: var(--red);
    }

    /* ------------------------------------------------------- nastavenia */

    .settings {
        display: flex;
        flex-direction: column;
        gap: 16px;
    }

    .card {
        display: flex;
        flex-direction: column;
        gap: 4px;
        padding: 12px 16px;
        border: 1px solid var(--line);
        border-radius: var(--radius);
        background: var(--surface);
    }

    .card__title {
        padding: 4px 0 8px;
        color: var(--muted);
        font-size: 13px;
        font-weight: 700;
        letter-spacing: 0.08em;
        text-transform: uppercase;
    }

    .segmented {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: 8px;
        margin: 4px 0 12px;
    }

    .segmented__opt {
        position: relative;
    }

    /* Prepínač je priehľadný, ale kryje celú dlaždicu — inak by 1×1 px input
     * ležal kdesi v rohu a dotykovým cieľom by bol len text popisu. */
    .segmented__input {
        position: absolute;
        inset: 0;
        z-index: 1;
        width: 100%;
        height: 100%;
        margin: 0;
        opacity: 0;
        cursor: pointer;
    }

    .segmented__label {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 6px;
        min-height: 64px;
        padding: 10px 6px;
        border: 1px solid var(--line);
        border-radius: var(--radius);
        background: var(--bg);
        font-size: 13px;
        font-weight: 600;
        text-align: center;
        cursor: pointer;
    }

    /* Vybraný stav nesie rámik AJ ikonu — nikdy len farbu (ux-spec §10). */
    .segmented__input:checked + .segmented__label {
        border-color: var(--accent);
        box-shadow: inset 0 0 0 1px var(--accent);
        color: var(--accent);
    }

    .segmented__input:focus-visible + .segmented__label {
        outline: 3px solid var(--focus, var(--accent));
        outline-offset: 2px;
    }

    .switch {
        position: relative;
        width: 52px;
        height: 32px;
        flex: none;
        border: 1px solid var(--line);
        border-radius: 999px;
        background: var(--bg);
        transition: background 140ms ease;
    }

    .switch__knob {
        position: absolute;
        top: 3px;
        left: 3px;
        width: 24px;
        height: 24px;
        border-radius: 50%;
        background: var(--muted);
        transition: transform 140ms ease, background 140ms ease;
    }

    [aria-checked='true'] .switch {
        background: var(--accent);
        border-color: var(--accent);
    }

    [aria-checked='true'] .switch__knob {
        background: var(--on-accent, var(--bg));
        transform: translateX(20px);
    }

    /* ----------------------------------------------------- stavy obrazovky */

    .empty {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 14px;
        padding: 40px 8px;
        text-align: center;
    }

    .empty__icon {
        color: var(--muted);
    }

    .empty--error .empty__icon {
        color: var(--red);
    }

    .empty__title {
        font-size: 20px;
    }

    .empty__body {
        max-width: 34ch;
        color: var(--muted);
        font-size: 16px;
        line-height: 1.55;
    }

    .empty__cta {
        display: flex;
        flex-wrap: wrap;
        gap: 12px;
        justify-content: center;
        margin-top: 8px;
    }

    .loading {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 12px;
        padding: 48px 0;
    }

    .loading__ring {
        width: 28px;
        height: 28px;
        border: 3px solid var(--line);
        border-top-color: var(--accent);
        border-radius: 50%;
        animation: kf-spin 900ms linear infinite;
    }

    .loading__label {
        color: var(--muted);
        font-size: 14px;
    }

    @keyframes kf-spin {
        to {
            transform: rotate(1turn);
        }
    }

    /* ======================================================= ŠIROKÁ OBRAZOVKA
     *
     * Appka je telefónna a taká aj zostáva — všetko nad týmto komentárom platí
     * na telefóne bez zmeny. Toto je JEDNA vrstva navrch, ktorá sa zapne, keď
     * je okna dosť, a nemení ani jeden mobilný pixel.
     *
     * Prah je 900 px, nie 768: pod ním sa vedľa 248 px bočného panela nezmestia
     * dva stĺpce kariet po 320 px, a jeden stĺpec vedľa panela je horší než
     * dnešný vycentrovaný pásik. Hodnota je vypočítaná zo šírky, ktorú obsah
     * naozaj potrebuje (248 + 2×320 + medzery + odsadenie ≈ 900), nie odhad.
     *
     * ⚠️ Sem patrí len CHRÓM — `#app`, hlavička, bočný panel, plocha obrazovky,
     * panely a dialógy. Rozloženie JEDNEJ obrazovky sem NEPÍŠ: obrazovky si
     * svoje CSS vkladajú ako `<style>` do `<head>` až za týmto súborom a
     * NEVRSTVENE, takže by ich pravidlo túto vrstvu vždy prebilo (dôvod je
     * rozpísaný nižšie pri bloku TLAČ). Desktopové rozloženie obrazovky patrí
     * do jej vlastného modulu, k jej ostatným štýlom. */

    /* Bočný panel na telefóne neexistuje — navigácia tam býva pod avatarom.
     * `display: none` ho vyradí aj z prístupnostného stromu, takže čítačka
     * neprečíta menu dvakrát. */
    .side {
        display: none;
    }

    @media (min-width: 900px) {
        /* Široko sa ide LEN s bočným panelom. Dvere (prihlásenie, pozvánka)
         * panel nemajú, a tie musia zostať úzke — prihlasovací formulár cez
         * celú šírku monitora je horší, nie lepší. `:has()` to rozhodne bez
         * jedinej triedy navyše a bez toho, aby o tom router musel vedieť. */
        #app:has(> .side) {
            display: grid;
            grid-template-columns: 248px minmax(0, 1fr);
            grid-template-rows: auto;
            align-content: start;
            max-width: 1480px;
        }

        /* Hlavička aj pás „server nekomunikuje" idú cez obe kolóny. Pás vkladá
         * `app.js` hneď za hlavičku, takže je to druhý riadok mriežky. */
        #app:has(> .side) > .hdr,
        #app:has(> .side) > .offline {
            grid-column: 1 / -1;
        }

        #app:has(> .side) > .side {
            grid-column: 1;
        }

        #app:has(> .side) > .screen {
            grid-column: 2;
        }

        .side {
            display: flex;
            flex-direction: column;
            gap: 2px;
            position: sticky;
            /* 56 px je `min-height` hlavičky. Pri zväčšenom písme hlavička
             * narastie a panel sa o kúsok zasunie pod ňu — je to lepšie než
             * meranie za behu, ktoré by sa muselo prepočítavať pri každom
             * prekreslení. */
            top: 56px;
            align-self: start;
            max-height: calc(100dvh - 56px);
            padding: 16px 12px 24px;
            border-right: 1px solid var(--line-soft);
            overflow-y: auto;
        }

        .side__link {
            display: flex;
            align-items: center;
            gap: 12px;
            min-height: var(--tap, 44px);
            padding: 8px 12px;
            border: 0;
            border-radius: var(--radius-sm, 12px);
            background: none;
            color: var(--text);
            font-family: inherit;
            font-size: 15px;
            font-weight: 600;
            text-align: left;
            text-decoration: none;
            cursor: pointer;
        }

        .side__link:hover {
            background: var(--surface);
        }

        /* Kde som, nesie podfarbenie AJ farba textu a ikony — nikdy len farba
         * jedného prvku (ux-spec §10). */
        .side__link[aria-current='page'] {
            background: var(--accent-soft);
            color: var(--accent);
        }

        .side__ico {
            display: flex;
            flex: none;
            color: var(--muted);
        }

        .side__link[aria-current='page'] .side__ico {
            color: var(--accent);
        }

        .side__label {
            min-width: 0;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
        }

        .side__sep {
            height: 1px;
            margin: 10px 12px;
            background: var(--line-soft);
        }

        /* Ikona katalógu v hlavičke (do 3. 9. 2026 domček na „Moje veci").
         * V bočnom paneli je ten istý odkaz napísaný slovom, takže ikona je len
         * druhá cesta na to isté miesto — a druhá cesta bez popisu je šum. */
        .hdr__catalogue {
            display: none;
        }

        /* Room for the wordmark: the lockup replaces the bare mark. */
        .hdr__brandLink svg:first-child {
            display: none;
        }

        .hdr__brandLink svg + svg {
            display: block;
        }

        .screen {
            padding: 20px 24px 48px;
        }

        /* Nastavenia sú štyri až šesť krátkych kariet. Pod sebou v jednom
         * stĺpci zaberú dve obrazovky výšky a väčšina okna zostane prázdna. */
        .settings {
            display: grid;
            grid-template-columns: repeat(auto-fill, minmax(340px, 1fr));
            align-items: start;
        }

        /* Panel zdola je gesto telefónu. Myšou je to dialóg v strede — ťahať
         * oči do dolnej štvrtiny 27" monitora je horšie než ich nechať tam,
         * kam sa človek práve pozeral. */
        .sheet,
        .dialog {
            align-items: center;
            justify-content: center;
        }

        .sheet__panel,
        .dialog__panel {
            width: min(560px, calc(100vw - 48px));
            max-height: 86dvh;
            padding-bottom: 20px;
            border-radius: var(--radius);
            box-shadow: var(--shadow);
        }

        /* Úchyt na potiahnutie panela zdola. Myšou sa nikam neťahá. */
        .sheet__grip {
            display: none;
        }
    }

    /* --------------------------------------------------------- pohyb */

    @media (prefers-reduced-motion: reduce) {
        *,
        *::before,
        *::after {
            animation-duration: 1ms !important;
            animation-iteration-count: 1 !important;
            transition-duration: 1ms !important;
        }

        /* Bez prechodu by vrstvy ostali priehľadné — tu je viditeľnosť
         * dôležitejšia než animácia. */
        .sheet__scrim,
        .sheet__panel,
        .dialog__panel,
        .toast {
            opacity: 1;
            transform: none;
        }

        .toast {
            transform: translateX(-50%);
        }

        .loading__ring {
            border-top-color: var(--accent);
            animation: none;
        }
    }
}

/* ============================================================== TLAČ =======
 *
 * Appka je telefónna, papier nie je. Bez týchto pravidiel sa Ctrl+P vytlačilo
 * s plávajúcou lištou **doprostred zoznamu** — písmená hlavičky prekladali
 * riadky tak, že dve položky boli na papieri nečitateľné. Dve strany na 20
 * vecí, druhá poloprázdna, úzky stĺpec stredom A4, žiadne štvorčeky.
 * Ľubov testér si zoznam tlačí pred každou cestou a odškrtáva ho perom — je to
 * jeho podmienka, aby prestal používať Excel.
 *
 * ⚠️ Prečo je tento blok MIMO `@layer app` a prečo sú v ňom `!important`:
 * obrazovky si svoje CSS vkladajú ako `<style>` do `<head>` až za týmto
 * súborom a **nevrstvene**. Nevrstvené pravidlo prebije ktorúkoľvek vrstvu bez
 * ohľadu na špecificitu, takže vrstvený blok by na `.pk-bar` ani nesiahol; a aj
 * mimo vrstvy by pri rovnakej špecificite vyhral neskorší `<style>`. Rozloženie
 * sa preto prepisuje `!important`-om — čo je presne ten prípad, na aký je.
 *
 * FARBY sa riešia jedným miestom — predefinovaním tokenov z `theme.css`. Celá
 * appka potom zbelie sama, bez toho, aby sa tu vymenúvala každá trieda. Bez
 * toho by človek s tmavým režimom vytlačil takmer biely text na biely papier —
 * chyba, ktorá sa na obrazovke nikdy neukáže.
 *
 * `!important` je aj tu nutnosť, nie lenivosť: `index.php` linkuje `theme.css`
 * **aj samostatne a nevrstvene** (nielen cez `@import … layer(theme)`), takže
 * o víťazovi rozhoduje špecificita — a jeho `:root:not([data-theme=light])`
 * (0,2,0) aj `:root[data-sun][data-sun]` (0,3,0) sú vyššie než holý `:root`.
 * Overené tlačou do PDF v tmavom režime: bez `!important` vyšla strana čierna. */

@media print {
    :root {
        --bg: #fff !important;
        --surface: #fff !important;
        --surface2: #fff !important;
        --text: #000 !important;
        --muted: #444 !important;
        --line: #000 !important;
        --line-soft: #999 !important;
        --accent: #000 !important;
        --amber: #000 !important;
        --green: #000 !important;
        --red: #000 !important;
        --on-accent: #fff !important;
        --accent-soft: #fff !important;
        --amber-soft: #fff !important;
        --green-soft: #fff !important;
        --red-soft: #fff !important;
        --shadow: none !important;
        --focus-ring: none !important;
        --safe-t: 0px !important;
        --safe-b: 0px !important;
        --safe-l: 0px !important;
        --safe-r: 0px !important;
        --row-min: 0 !important;
        color-scheme: light !important;
    }

    @page {
        size: A4 portrait;
        margin: 12mm 10mm;
    }

    /* --- 1. preč so všetkým, čo sa nedá stlačiť prstom cez papier --------- */

    .skip-link,
    .offline,
    .toast,
    .sheet,
    .dialog,
    .side,
    .hdr__right,
    .hdr__actions,
    .iconbtn,
    .avatar,
    .loading,
    .btn,
    .empty__cta,
    .pk-bar,
    .pk-fab,
    .pl-fab,
    .gr-fab,
    .pk-row__more,
    .pk-tabs,
    .pk-search,
    .pk-rail,
    .pk-fold__chev,
    .pk-buy__foot,
    .pk-row__state,
    .pk-cheer,
    .pk-hint,
    .gr-bar,
    .gr-acts,
    .gr-invite,
    .gr-fold__chev,
    .inv__filter,
    /* Pás „pridávam do…" a tri bodky pri riadku katalógu. Oboje sa tlačilo:
     * pás sa v úzkom stĺpci lámal na „Ka / m / to / prid / áva / š?" a ⋮ zaberalo
     * miesto v každom riadku. Na papieri sa do balenia nič nepridáva. */
    .cat__target,
    .cat__more,
    .ev__more,
    .kfr-bar {
        display: none !important;
    }

    /* Ikony sú na papieri šum — okrem štvorčeka na odškrtnutie, ktorý si nižšie
     * vyrábame z ich vlastného miesta v riadku. */
    .pk-cat__ico svg,
    .pk-row__side svg,
    .pk-badge svg,
    .pk-fold svg,
    .kfr-sec svg,
    .gr-sec__head svg,
    .gr-need__ico svg,
    .gr-chip__ico svg {
        display: none !important;
    }

    /* --- 2. z appky spraviť dokument -------------------------------------- */

    html,
    body {
        background: #fff !important;
        color: #000 !important;
    }

    body.is-locked {
        overflow: visible !important;
    }

    #app {
        display: block !important;
        max-width: none !important;
        min-height: 0 !important;
    }

    /* Hlavička nesie názov balenia — jediné, čo na papieri identifikuje, o ktorú
     * cestu ide. `nowrap`/`ellipsis` z obrazovky by dlhý názov orezali. */
    .hdr {
        position: static !important;
        min-height: 0 !important;
        padding: 0 0 2mm !important;
        border-bottom: 0.4mm solid #000 !important;
    }

    .hdr__title {
        font-size: 15pt !important;
        line-height: 1.2 !important;
        white-space: normal !important;
        overflow: visible !important;
        text-overflow: clip !important;
    }

    .screen,
    .pk-screen {
        padding: 0 !important;
    }

    /* --- 3. tri stĺpce namiesto jedného telefónneho ------------------------ */

    /* Šírka, nie počet: na A4 na výšku z toho vyjdú tri stĺpce, na šírku štyri,
     * a nikde sa nerozsype na jeden úzky pásik stredom strany.
     *
     * Zámerne len obrazovky, ktoré SÚ zoznam — balenie, moje veci, katalóg.
     * Nastavenia či dvere sú formulár a trojstĺpcový formulár na papieri
     * vyzerá pokazene.
     *
     * Skupinová tabuľa tu zámerne NIE JE: jej riadok je viacriadkový stav
     * (názov, poznámka, kto to nesie, „CHÝBA 8"), nie odškrtávacia položka —
     * v 58 mm stĺpci by sa lámal na štyri riadky. */
    .pk-screen,
    .inv,
    .cat {
        columns: 58mm;
        column-gap: 7mm;
    }

    /* Zhrnutie („3 noci · 25 vecí") patrí pod nadpis, nie do prvého stĺpca. */
    .pk-top {
        column-span: all;
        padding: 1.5mm 0 2.5mm !important;
    }

    .pk-sub,
    .kfr-count {
        padding: 0 !important;
        font-size: 9pt !important;
    }

    /* Prázdny stav nie je zoznam — v troch stĺpcoch sa rozpadne na ikonu
     * v prvom, nadpis v druhom a vetu v treťom. Overené na `/nakup`, keď
     * netreba nič dokúpiť. */
    .empty {
        column-span: all;
        gap: 2mm !important;
        padding: 6mm 0 !important;
    }

    .empty__icon {
        display: none !important;
    }

    .empty__title {
        font-size: 12pt !important;
    }

    .empty__body {
        font-size: 9pt !important;
    }

    .pk-sec,
    .kfr-list,
    .gr-sec {
        break-inside: auto;
    }

    /* Pozor na mapovanie: `.pk-cat` a `.kfr-sec` SÚ nadpisy, ale `.gr-sec` je
     * OBAL sekcie — nadpis skupinovej tabule je `.gr-sec__head`. Keď sem
     * omylom prišiel obal, dostal `break-inside: avoid` na blok vysoký 1309 px
     * a Chrome celú sekciu z tlače vypustil: v PDF ostal nadpis, zhrnutie
     * a prázdna strana. */
    .pk-cat,
    .kfr-sec,
    .gr-sec__head {
        position: static !important;
        min-height: 0 !important;
        margin: 2.5mm 0 1mm !important;
        padding: 0 0 0.6mm !important;
        border-bottom: 0.2mm solid #000 !important;
        color: #000 !important;
        font-size: 8pt !important;
        break-after: avoid;
        break-inside: avoid;
    }

    .pk-fold {
        min-height: 0 !important;
        margin: 2.5mm 0 1mm !important;
        padding: 0 0 0.6mm !important;
        font-size: 8pt !important;
        text-transform: uppercase;
        break-after: avoid;
    }

    .pk-buy {
        margin: 2mm 0 !important;
        padding: 0 1.5mm !important;
        border-color: #000 !important;
    }

    /* --- 4. riadok = štvorček + názov, nič viac --------------------------- */

    /* Riadok balenia je obal (`.pk-row`) a v ňom cieľ (`.pk-row__hit`); riadok
     * katalógu je jedno tlačidlo. Vonkajšia vrstva nesie čiaru a zákaz zlomu,
     * vnútorná odsadenie — tak to sedí obom tvarom a ani jeden nedostane
     * odsadenie dvakrát. */
    .pk-row,
    .kfr-row {
        min-height: 0 !important;
        padding: 0 !important;
        border-bottom: 0.15mm solid #bbb !important;
        background: none !important;
        color: #000 !important;
        break-inside: avoid;
    }

    .pk-row__hit,
    .kfr-row {
        display: flex !important;
        align-items: flex-start !important;
        gap: 2mm !important;
        min-height: 0 !important;
        padding: 0.9mm 0 !important;
        border: 0 !important;
        background: none !important;
        color: #000 !important;
        -webkit-appearance: none;
        appearance: none;
    }

    /* Štvorček na odškrtnutie perom. Sadá presne tam, kde bola na obrazovke
     * ikona fázy — riadok si tým drží zarovnanie a nič sa neprepočítava.
     * Prázdny je zámerne aj pri už zbalených veciach: papier je pri balení
     * pravda pre tú jednu cestu, nie výpis toho, čo si appka pamätá. */
    .pk-row__ico,
    .kfr-row__ico {
        box-sizing: border-box !important;
        flex: 0 0 auto !important;
        width: 3.4mm !important;
        height: 3.4mm !important;
        margin-top: 0.4mm;
        border: 0.3mm solid #000 !important;
        border-radius: 0.5mm;
        color: #000 !important;
    }

    .pk-row__ico svg,
    .kfr-row__ico svg {
        display: none !important;
    }

    .pk-row__name,
    .kfr-row__name {
        font-size: 9pt !important;
        font-weight: 400 !important;
        line-height: 1.25 !important;
    }

    /* Množstvá na papieri ostávajú — `košeľa ×3` je celý rozdiel medzi zoznamom
     * a zoznamom, ktorý klame (a presne to je výhrada k exportu). */
    .pk-row__side,
    .kfr-row__meta,
    .inv__qty {
        font-size: 8pt !important;
        color: #000 !important;
    }

    .pk-row__note,
    .pk-row__prep,
    .kfr-row__sub {
        font-size: 7.5pt !important;
        line-height: 1.2 !important;
        color: #333 !important;
    }

    .pk-badge {
        padding: 0 !important;
        border-radius: 0 !important;
        background: none !important;
        font-size: 7.5pt !important;
        font-weight: 400 !important;
    }

    .pk-badge::before {
        content: '· ';
    }
}