/**
 * GLOBAL/UI/ELEMENTS/KEYPAD/KEYPAD.CSS — Ziffernblock (window.Keypad).
 *
 * Skalierung: `.kp` füllt seinen Host (Breite/Höhe 100 %) und ist ein
 * Size-Container — Raster, Abstände und Schrift richten sich nach DIESER
 * Fläche (cqw/cqh), nicht nach dem Fenster. So passt der Block in eine
 * schmale Spalte wie auf eine große Tafel, ohne feste px-Maße.
 * 🔴 Der Host muss dafür eine feste Höhe haben (z. B. Flex-Kind mit
 * `flex: 1 1 0; min-height: 0`).
 *
 * Farben stellt das Modul NUR über diese Variablen um:
 *   --kp-key-bg / --kp-key-fg   Zifferntasten
 *   --kp-del-bg / --kp-del-fg   Löschen-Taste
 *   --kp-ok-bg  / --kp-ok-fg    Bestätigen-Taste (Standard grün)
 */

.kp {
    --kp-key-bg: #ffffff;
    --kp-key-fg: #2d3436;
    --kp-del-bg: #e6ecf2;
    --kp-del-fg: #2d3436;
    --kp-ok-bg: var(--green-main, #27ae60);
    --kp-ok-fg: #ffffff;
    --kp-edge: rgba(0, 0, 0, 0.28);
    width: 100%;
    height: 100%;
    min-width: 0;
    min-height: 0;
    container-type: size;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Das Raster bleibt annähernd tastenquadratisch: in einer breiten Fläche wird
   es nicht breiter als ~0,9 × seine Höhe, in einer schmalen nicht höher als
   1,5 × seine Breite. Unten Platz für die 3D-Kante der letzten Reihe. */
.kp-grid {
    width: min(100cqw, 90cqh);
    height: min(100cqh, 150cqw);
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    grid-template-rows: repeat(4, minmax(0, 1fr));
    gap: min(3cqw, 2.4cqh);
    padding-bottom: min(1.4cqw, 1cqh);
    box-sizing: border-box;
}

.kp-key {
    min-width: 0;
    min-height: 0;
    margin: 0;
    padding: 0;
    border: none;
    border-radius: min(4cqw, 3cqh);
    background: var(--kp-key-bg);
    color: var(--kp-key-fg);
    font-family: var(--math-font);
    font-size: min(13cqw, 9.5cqh);
    font-weight: 700;
    line-height: 1;
    cursor: pointer;
    /* Multitouch an der Tafel: keine Doppeltipp-Zoom-Verzögerung, kein
       Halte-Menü, kein grauer Tipp-Schleier. */
    touch-action: manipulation;
    -webkit-touch-callout: none;
    -webkit-tap-highlight-color: transparent;
    box-shadow: 0 min(1.4cqw, 1cqh) 0 var(--kp-edge);
    transition:
        transform 0.1s ease,
        box-shadow 0.1s ease,
        filter 0.15s ease;
}

/* `kp-press` = Druck-Effekt per Finger (setzt keypad.js bei `pointerdown`). */
.kp-key:active,
.kp-key.kp-press {
    transform: translateY(min(1.4cqw, 1cqh));
    box-shadow: 0 0 0 var(--kp-edge);
    filter: brightness(0.94);
}

.kp-del {
    background: var(--kp-del-bg);
    color: var(--kp-del-fg);
    font-family: var(--ui-font);
    font-size: min(10cqw, 7.5cqh);
}

.kp-ok {
    background: var(--kp-ok-bg);
    color: var(--kp-ok-fg);
    font-family: var(--ui-font);
    font-weight: 900;
}

.kp-locked .kp-key {
    pointer-events: none;
    cursor: default;
}