/* Rozvržení: kontejner max. 480 px, safe-area, sticky akce v dolní třetině (UX §3, §6). */
.tt-app {
    position: relative;
    isolation: isolate;
    min-height: 100vh;
    min-height: 100dvh;
    display: flex;
    flex-direction: column;
}

.tt-screen {
    --gut-l: max(var(--sp-4), var(--safe-left));
    --gut-r: max(var(--sp-4), var(--safe-right));
    position: relative;
    z-index: 1;
    width: 100%;
    max-width: 480px;
    margin-inline: auto;
    flex: 1 0 auto;
    display: flex;
    flex-direction: column;
    gap: var(--sp-4);
    padding-top: max(var(--sp-3), var(--safe-top));
    padding-left: var(--gut-l);
    padding-right: var(--gut-r);
}

.tt-stack { display: flex; flex-direction: column; gap: var(--sp-3); }
.tt-stack--lg { gap: var(--sp-5); }
.tt-stack--sm { gap: var(--sp-2); }

.tt-cluster { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-2); }
.tt-cluster--between { justify-content: space-between; }
.tt-cluster--center { justify-content: center; }
.tt-row { display: flex; align-items: center; gap: var(--sp-3); min-width: 0; }
.tt-grow { flex: 1 1 auto; min-width: 0; }

/* Spodní akce: vždy v dosahu palce, nad home indicatorem. */
.tt-actions {
    position: sticky;
    bottom: 0;
    z-index: 5;
    margin-top: auto;
    margin-inline: calc(-1 * var(--gut-l)) calc(-1 * var(--gut-r));
    padding: var(--sp-5) var(--gut-r) max(var(--sp-3), var(--safe-bottom)) var(--gut-l);
    display: flex;
    flex-direction: column;
    gap: var(--sp-2);
    background: linear-gradient(to top, var(--c-bg) 62%, transparent);
}

/* Obrazovka, která se nesmí scrollovat (otázka): výška = viewport, obsah se přizpůsobí. */
.tt-fit {
    height: 100vh;
    height: 100dvh;
    min-height: 0;
    overflow: hidden;
}

/* Úzké a nízké displeje */
@media (max-width: 339px) {
    .tt-screen {
        --gut-l: max(12px, var(--safe-left));
        --gut-r: max(12px, var(--safe-right));
    }
}

/* Landscape telefon: otázka dvousloupcově (viz AnsweringView), ostatní obrazovky scrollují. */
@media (orientation: landscape) and (max-height: 500px) {
    .tt-screen { max-width: 860px; }
}