/* ==========================================================
   TypingTutor.Online
   Stable ANSI Keyboard Layout v17.0.3
   File: css/keyboard-types.css
========================================================== */

#keyboardContainer {
    --keyboard-type-max-width: 1120px;
    --keyboard-type-padding: 22px;
    --keyboard-type-key-height: 66px;
    --keyboard-type-row-gap: 8px;

    max-width:
        var(--keyboard-type-max-width);

    padding:
        var(--keyboard-type-padding);
}

#keyboardContainer .keyboard-row {
    gap: var(--keyboard-type-row-gap);
}

#keyboardContainer .keyboard-row + .keyboard-row {
    margin-top: var(--keyboard-type-row-gap);
}

#keyboardContainer .keyboard-key-spacer {
    min-width: 0;
    pointer-events: none;
}

#keyboardContainer .key {
    height: var(--keyboard-type-key-height);
    min-width: 0;
}

#keyboardContainer .key-primary {
    white-space: nowrap;
}

#keyboardContainer[data-keyboard-type="ansi-us"] {
    --keyboard-type-max-width: 1120px;
}

/* Dark mode inherits the existing keyboard palette. */
html[data-theme="dark"]
#keyboardContainer[data-keyboard-type] {
    color-scheme: dark;
}

/* Reduced motion */
html[data-reduced-motion="true"]
#keyboardContainer .key {
    transition: none !important;
}

@media (max-width: 1100px) {
    #keyboardContainer {
        --keyboard-type-padding: 16px;
        --keyboard-type-row-gap: 6px;
    }
}

@media (max-width: 760px) {
    /*
     * The tutor already hides its full on-screen keyboard on mobile.
     * These values keep the engine safe if that preference is changed.
     */
    #keyboardContainer {
        --keyboard-type-padding: 10px;
        --keyboard-type-row-gap: 4px;
        --keyboard-type-key-height: 50px;
    }
}


/* ==========================================================
   STABLE US ANSI PRODUCTION LAYOUT v17.0.3
========================================================== */

/*
 * The production keyboard and all three hand-guidance modes are calibrated
 * together at this width. The keyboard remains centered and the card does
 * not reserve unused space for an experimental compact layout.
 */
html[data-keyboard-type="ansi-us"] #keyboardContainer,
#keyboardContainer[data-keyboard-type="ansi-us"] {
    width: 100%;
    max-width: 1120px;
    margin-right: auto;
    margin-left: auto;
}

html[data-keyboard-type="ansi-us"] .keyboard-guidance-card {
    --active-keyboard-width: 1120px;
}