/*
 * Dedicated phone layout for YAYA homework.
 * Loaded only at 540px and below; desktop styling stays in style.css.
 */

:root {
    --mobile-header-height: 64px;
    --mobile-edge: 5px;
}

html,
body {
    width: 100%;
    min-width: 0;
    min-height: 100%;
    overflow: hidden;
}

#task-viewport {
    width: 100vw;
    height: calc(100dvh - var(--mobile-header-height));
    min-height: 0;
    padding: 6px 4px;
    overflow: hidden;
}

.question-card.story-combined-card {
    width: calc(100vw - (var(--mobile-edge) * 2));
    height: calc(100dvh - 74px);
    max-height: calc(100dvh - 74px);
}

.story-combined-card .story-flow {
    grid-template-rows: minmax(0, 1fr) minmax(0, 1.15fr);
}

.story-combined-card .story-question-zone {
    align-self: start;
}

.story-combined-card .story-question-card {
    justify-content: flex-start;
}

.story-combined-card .story-question-actions {
    margin-top: 7px;
}

.side-nav {
    position: fixed;
    top: auto;
    bottom: max(14px, env(safe-area-inset-bottom));
    transform: none;
    padding: 0 8px;
}