/* Mobile navigation and playback refinements. Desktop composition stays in app.css. */
@media (max-width: 767px), (max-height: 520px) and (orientation: landscape) and (max-width: 900px) {
    .topbar {
        align-items: center;
        grid-template-rows: var(--touch-target);
        overflow: visible;
    }

    .topbar > .curriculum-trigger {
        grid-column: 1;
        grid-row: 1;
    }

    .has-workspace .topbar-search-area,
    .has-workspace .topbar-search-placeholder {
        grid-column: 2;
        grid-row: 1;
    }

    .has-workspace .topbar-actions {
        grid-column: 3;
        grid-row: 1;
    }

    /* Keep the toggle in normal grid flow, including while the search is open.
       The field opens below the toolbar, never over menu/theme/notifications. */
    .topbar .topbar-search-area,
    .topbar .topbar-search-area.is-open {
        position: static;
        inset: auto;
        z-index: auto;
        display: flex;
        align-items: center;
        justify-content: flex-end;
        justify-self: end;
        width: var(--touch-target);
        height: var(--touch-target);
        min-width: var(--touch-target);
        margin: 0;
        padding: 0;
        gap: 0;
        background: transparent;
    }

    .topbar .topbar-search-area .topbar-search {
        display: none;
    }

    .topbar .topbar-search-area.is-open .topbar-search {
        position: absolute;
        z-index: 5;
        top: calc(100% + 4px);
        left: max(8px, env(safe-area-inset-left));
        right: max(8px, env(safe-area-inset-right));
        display: grid;
        width: auto;
        min-height: var(--touch-target);
        height: auto;
        background: var(--color-surface);
        box-shadow: var(--elevation-floating);
    }

    .topbar .topbar-search-toggle {
        position: static;
        display: inline-grid;
        flex: 0 0 var(--touch-target);
        width: var(--touch-target);
        height: var(--touch-target);
        min-height: var(--touch-target);
        margin: 0;
    }

    .mobile-nav .nav-item {
        touch-action: manipulation;
        /* A former current tab must lose its fill immediately, not fade out. */
        transition: none;
    }
}

@media (hover: none), (pointer: coarse) {
    .mobile-nav .nav-item:not(.active),
    .mobile-nav .nav-item:not(.active):hover,
    .mobile-nav .nav-item:not(.active):active,
    .mobile-nav .nav-item:not(.active):focus {
        color: var(--color-text-muted);
        background: transparent;
        border-color: transparent;
        box-shadow: none;
    }

    .mobile-nav .nav-item:focus-visible {
        outline: 3px solid var(--color-focus-ring);
        outline-offset: -3px;
    }
}

.lesson-replay-actions {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--space-3);
    padding: var(--space-3) var(--space-4);
    color: var(--color-text);
    background: var(--color-surface);
}

.lesson-replay-actions small {
    flex: 1 1 180px;
    color: var(--color-text-muted);
}

[data-player-state="offline"] .video-state-fraction::after {
    animation: none;
}