/* ==========================================================
   TypingTutor.Online
   Keyboard Type Engine v17.0
   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;
}

/* Laptop/compact physical keyboard */
#keyboardContainer[data-keyboard-type="compact-ansi"] {
    --keyboard-type-max-width: 1010px;
    --keyboard-type-padding: 18px;
    --keyboard-type-key-height: 62px;
    --keyboard-type-row-gap: 7px;
}

#keyboardContainer[data-keyboard-type="compact-ansi"]
.keyboard-row-function .key {
    height: 54px;
}

#keyboardContainer[data-keyboard-type="compact-ansi"]
.keyboard-row-function .key-primary {
    font-size: .88em;
}

#keyboardContainer[data-keyboard-type="compact-ansi"]
.keyboard-row-modifier .key-primary {
    font-size: .90em;
}

/*
 * Keep hand overlays synchronized with the active keyboard width.
 * Their key-target calculations use the real rendered key rectangles.
 */
html[data-keyboard-type="compact-ansi"]
.keyboard-guidance-card {
    --active-keyboard-width: 1010px;
}

/* 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;
    }

    #keyboardContainer[data-keyboard-type="compact-ansi"] {
        --keyboard-type-padding: 14px;
        --keyboard-type-row-gap: 5px;
    }
}

@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;
    }
}