@media (max-width: 768px) {
    .ks-sidebar-panel {
        width: 100%;
    }
    .ks-user-settings-panel .ks-input {
        min-height: 44px;
    }
    .ks-header {
        padding: 1rem 1rem 0.85rem;
    }

    .ks-header-row {
        display: grid;
        grid-template-columns: auto 1fr auto;
        align-items: center;
        gap: 0.85rem;
    }

    .ks-mobile-nav {
        display: block;
    }

    .ks-section-nav--desktop {
        display: none;
    }

    .ks-header-menu {
        display: none;
    }

    /* Bottom clearance lets the last row scroll out from under the FAB */
    .ks-table-wrap,
    .ks-lessons-wrap {
        padding: 0 1rem 5.5rem;
    }

    .ks-search-shell {
        max-width: none;
    }

    .ks-lesson-card-header {
        flex-direction: column;
        align-items: flex-start;
        gap: 0.35rem;
    }

    .ks-lesson-dance-pill {
        width: 100%;
        min-width: 0;
    }
}
@media (max-width: 768px) {
    /* The toolbar action buttons are replaced by the .ks-fab floating buttons */
    .ks-page-action-button {
        display: none;
    }

    .ks-page-toolbar {
        margin-bottom: 0.5rem;
    }
}

@media (max-width: 640px) {
    .ks-page-overline {
        display: none;
    }

    .ks-page-title {
        font-size: 1.15rem;
    }

    .ks-stats-header {
        gap: 0.4rem 0.75rem;
        margin-bottom: 0.5rem;
        font-size: 0.85rem;
    }

    .ks-stats-header .ks-stat:not(:first-child)::before {
        margin-right: 0.75rem;
    }
}

@media (max-width: 768px) {

    /* Mobile player: 3 stacked rows (progress / times + info / controls) */
    [data-testid="audio-player"] {
        display: grid;
        grid-template-columns: auto minmax(0, 1.1fr) minmax(0, 1fr) auto auto;
        grid-template-areas:
            "progress progress progress progress progress"
            "elapsed  dance    track    total    switch"
            "controls controls controls controls controls";
        align-items: center;
        column-gap: 0.5rem;
        height: auto;
        padding: 0;
    }

    [data-testid="audio-player"] .ks-player-row-time,
    [data-testid="audio-player"] .ks-player-row-info {
        display: contents;
    }

    [data-testid="audio-player"] [data-testid="player-time-elapsed"] {
        grid-area: elapsed;
        padding-left: 0.75rem;
    }

    [data-testid="audio-player"] [data-testid="player-time-total"] {
        grid-area: total;
        padding-right: 0.5rem;
    }

    [data-testid="player-progress"] {
        grid-area: progress;
        width: 100%;
        height: 36px;
        background: transparent;
        padding: 0;
        margin: 0;
    }

    [data-testid="player-progress"]::-webkit-slider-runnable-track {
        height: 4px;
        background: var(--ks-border);
        border-radius: 2px;
    }

    [data-testid="player-progress"]::-moz-range-track {
        height: 4px;
        background: var(--ks-border);
        border-radius: 2px;
    }

    [data-testid="player-progress"]::-webkit-slider-thumb {
        -webkit-appearance: none;
        width: 20px;
        height: 20px;
        border-radius: 50%;
        background: var(--ks-accent);
        margin-top: -8px;
    }

    [data-testid="player-progress"]::-moz-range-thumb {
        width: 20px;
        height: 20px;
        border-radius: 50%;
        background: var(--ks-accent);
        border: none;
    }

    [data-testid="audio-player"] [data-testid="player-dance-info"],
    [data-testid="audio-player"] [data-testid="player-track-info"] {
        max-width: none;
        min-width: 0;
        padding-top: 0.3rem;
        padding-bottom: 0.3rem;
    }

    [data-testid="audio-player"] [data-testid="player-dance-info"] {
        grid-area: dance;
    }

    [data-testid="audio-player"] [data-testid="player-track-info"] {
        grid-area: track;
        padding-left: 0.5rem;
    }

    [data-testid="audio-player"] [data-testid="switch-song-button"] {
        grid-area: switch;
        margin-right: 0.6rem;
    }

    [data-testid="audio-player"] .ks-player-row-controls {
        grid-area: controls;
        display: grid;
        grid-template-columns: 1fr auto 1fr;
        align-items: center;
        padding: 0.3rem 0.75rem 0.55rem;
        gap: 0.5rem;
    }

    [data-testid="audio-player"] .ks-player-controls-left {
        display: flex;
        justify-content: flex-start;
        align-items: center;
    }

    [data-testid="audio-player"] .ks-player-controls-center {
        display: flex;
        justify-content: center;
        align-items: center;
        gap: 0.4rem;
    }

    [data-testid="audio-player"] .ks-player-controls-right {
        display: flex;
        justify-content: flex-end;
        align-items: center;
        gap: 0.4rem;
    }
}

/* Shuffle config as a bottom sheet on phones */
@media (max-width: 640px) {
    .ks-shuffle-backdrop {
        align-items: flex-end;
    }

    .ks-shuffle-modal {
        max-width: none;
        margin: 0;
        border-left: none;
        border-right: none;
        border-bottom: none;
        border-radius: 28px 28px 0 0;
        padding-bottom: calc(1.5rem + env(safe-area-inset-bottom, 0px));
    }
}

/* Short viewports (landscape phones): compact the header and player */
@media (max-height: 500px) {
    .ks-masthead-overline,
    .ks-masthead-dedication {
        display: none;
    }

    .ks-header {
        margin-bottom: 0.5rem;
    }

    .ks-header h1 {
        font-size: 1.3rem;
        white-space: nowrap;
    }
}

@media (max-width: 768px) and (max-height: 500px) {
    [data-testid="player-progress"] {
        height: 28px;
    }

    [data-testid="audio-player"] [data-testid="player-dance-info"],
    [data-testid="audio-player"] [data-testid="player-track-info"] {
        padding-top: 0.1rem;
        padding-bottom: 0.1rem;
    }

    [data-testid="audio-player"] .ks-player-row-controls {
        padding: 0.15rem 0.75rem 0.35rem;
    }

    [data-testid="audio-player"] [data-testid="player-prev"],
    [data-testid="audio-player"] [data-testid="player-next"] {
        width: 40px;
        height: 40px;
    }

    [data-testid="audio-player"] [data-testid="player-play-pause"].ks-material-icon-button {
        width: 44px;
        height: 44px;
    }

    [data-testid="audio-player"] [data-testid="player-play-pause"] .material-symbols-outlined {
        font-size: 26px;
    }
}