/* ==========================================================
   TypingTutor.Online
   Tablet / Small-Laptop Balance Fix v17.1.6
   File: css/responsive-balance-v17.1.6.css
========================================================== */

/*
 * Between the desktop sidebar layout and the mobile keyboard-free layout,
 * the live statistics move below the lesson. Keep that row compact and
 * allow the lesson card to use its natural height instead of stretching.
 */
@media (min-width: 761px) and (max-width: 900px) {
    .lesson-practice-grid {
        grid-template-columns: minmax(0, 1fr) !important;
        grid-auto-rows: max-content !important;
        align-items: start !important;
    }

    .typing-practice-card {
        min-height: 0 !important;
        height: auto !important;
        align-self: start !important;
    }

    .statistics-panel {
        display: flex !important;
        flex-direction: row !important;
        align-items: stretch !important;
        width: 100% !important;
        min-height: 0 !important;
        height: max-content !important;
        block-size: max-content !important;
        align-self: start !important;
        gap: 8px !important;
        padding: 10px !important;
    }

    .statistics-panel .stat {
        display: grid !important;
        flex: 1 1 0 !important;
        min-width: 0 !important;
        min-height: 72px !important;
        height: auto !important;
        padding: 9px 6px !important;
        place-items: center !important;
        align-content: center !important;
        gap: 7px !important;
        text-align: center !important;
    }

    .statistics-panel .label {
        font-size: 9px !important;
        line-height: 1 !important;
    }

    .statistics-panel .stat > span:last-child {
        font-size: clamp(18px, 2.6vw, 23px) !important;
        line-height: 1 !important;
    }

    /*
     * The former fixed 66px key height made keys look tall and narrow after
     * the available keyboard width became smaller. Scale height, gaps,
     * padding, labels, and home-row bumps together so the keyboard keeps its
     * physical proportions while still fitting without horizontal clipping.
     */
    #keyboardContainer {
        --keyboard-type-key-height: clamp(44px, 6vw, 56px) !important;
        --keyboard-type-row-gap: clamp(4px, .65vw, 6px) !important;
        --keyboard-type-padding: clamp(8px, 1.25vw, 12px) !important;

        overflow: visible !important;
    }

    #keyboardContainer .key {
        min-width: 0 !important;
        padding-bottom: clamp(5px, .9vw, 8px) !important;
        border-radius: clamp(7px, .9vw, 10px) !important;
    }

    #keyboardContainer .key-primary {
        font-size: clamp(10px, 1.45vw, 14px) !important;
    }

    #keyboardContainer .key-secondary {
        top: clamp(4px, .65vw, 7px) !important;
        left: clamp(4px, .65vw, 7px) !important;
        font-size: clamp(7px, .9vw, 9px) !important;
    }

    #keyboardContainer .home-bump {
        bottom: clamp(3px, .45vw, 5px) !important;
        width: clamp(13px, 1.8vw, 19px) !important;
        height: clamp(2px, .28vw, 3px) !important;
    }

    .keyboard-guidance-card {
        padding: clamp(8px, 1.1vw, 11px) !important;
    }
}

/* Keep the compact live-stat row usable on very narrow tablets. */
@media (min-width: 761px) and (max-width: 820px) {
    .statistics-panel {
        gap: 6px !important;
        padding: 8px !important;
    }

    .statistics-panel .stat {
        min-height: 66px !important;
        padding-inline: 4px !important;
    }
}