/* ============================================
   WAB OS — le bouton « touche » (.key-btn)
   Un rectangle aux coins à peine arrondis, en relief comme une touche
   de clavier : reflet blanc sur l'arête haute, pénombre de 2 px en bas,
   liseré d'un pixel, ombre courte dessous. À l'appui, la touche
   descend d'un pixel et son ombre disparaît.
   — par défaut : touche blanche, encre fixe (--glass-ink) ;
   — .key-btn--klein : touche bleu Klein, texte blanc (8,5:1) et petite
     flèche ↗ — l'action principale, une par écran ;
   — .key-btn--sm : barres, fenêtres, cartes ;
   — .key-btn--deep : les actions d'un premier écran, en vraie touche.
   Sur une surface Klein (.on-klein), le bleu plein deviendrait bleu sur
   bleu : la touche principale passe en blanc à texte Klein, la
   secondaire en touche translucide à texte blanc.
   ============================================ */

.key-btn {
    --kb-fill: var(--key-light);
    --kb-edge: var(--edge);
    --kb-relief: var(--key-light-relief);
    --kb-ink: var(--glass-ink);
    --kb-sheen: oklch(1 0 0 / 0);
    position: relative;
    isolation: isolate;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: 46px;
    padding: 0 20px;
    border: var(--hair) solid var(--kb-edge);
    border-radius: var(--r-key);
    background: linear-gradient(var(--kb-sheen), var(--kb-sheen)), var(--kb-fill);
    box-shadow: var(--kb-relief);
    font: inherit;
    font-size: 0.9375rem;
    font-weight: var(--w-medium);
    letter-spacing: -0.005em;
    line-height: 1;
    white-space: nowrap;
    color: var(--kb-ink);
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    touch-action: manipulation;
    transition:
        translate var(--dur-1) var(--ease-out),
        box-shadow var(--dur-1) var(--ease-out),
        --kb-sheen var(--dur-1) var(--ease-out);
}

@property --kb-sheen {
    syntax: '<color>';
    inherits: false;
    initial-value: transparent;
}

/* La flèche ↗ de la touche principale, peinte en masque : elle prend
   la couleur du texte de la touche. */
.key-btn--klein::after {
    content: '';
    flex: none;
    width: 0.8em;
    height: 0.8em;
    background: currentColor;
    -webkit-mask: url('../assets/icons/sym-arrow.svg') center / contain no-repeat;
    mask: url('../assets/icons/sym-arrow.svg') center / contain no-repeat;
    transition: translate var(--dur-2) var(--ease-out);
}

@media (hover: hover) {
    .key-btn:hover {
        --kb-sheen: oklch(1 0 0 / 0.1);
    }

    .key-btn:not(.key-btn--klein):hover {
        --kb-sheen: oklch(0.18 0.005 265 / 0.025);
    }

    .key-btn--klein:hover::after {
        translate: 1px -1px;
    }
}

/* L'appui : la touche descend d'un pixel, l'ombre se résorbe. */
.key-btn:active {
    translate: 0 1px;
    box-shadow: var(--key-pressed);
}

.key-btn:focus-visible {
    outline-offset: 3px;
}

.key-btn--klein {
    --kb-fill: var(--key-klein);
    --kb-edge: var(--key-klein-edge);
    --kb-relief: var(--key-klein-relief);
    --kb-ink: var(--on-klein);
}

.key-btn--sm {
    min-height: 34px;
    padding: 0 12px;
    font-size: var(--t-small);
}

/* ── La touche profonde (.key-btn--deep) ── les actions d'un premier
   écran, du même clavier que le nom en touches : la face claire posée
   sur sa jupe, les coins d'une touche ; la principale en bleu comme le
   point, l'autre en blanc comme les lettres. Sa taille suit --key (la
   touche du nom, desk-hero.css), 72 px à défaut. Jamais moins de 48 px
   de haut au doigt. */
.key-btn--deep {
    --skirt: oklch(0.8 0.01 85);
    --skirt-h: max(4px, calc(var(--key, 72px) * 0.09));
    --kb-fill: linear-gradient(160deg, oklch(1 0 0), oklch(0.95 0.004 85));
    --kb-edge: oklch(0.18 0.005 265 / 0.28);
    --kb-relief:
        inset 0 calc(-1 * var(--skirt-h)) 0 var(--skirt),
        inset 0 1px 0 oklch(1 0 0 / 0.9),
        0 calc(var(--key, 72px) * 0.05) calc(var(--key, 72px) * 0.12) oklch(0.18 0.005 265 / 0.16);
    min-height: max(48px, calc(var(--key, 72px) * 0.78));
    padding: 0 max(20px, calc(var(--key, 72px) * 0.3)) var(--skirt-h);
    border-radius: max(10px, calc(var(--key, 72px) * 0.21));
    font-size: clamp(0.9375rem, calc(var(--key, 72px) * 0.22), 1.125rem);
}

.key-btn--deep.key-btn--klein {
    --skirt: var(--klein-deep);
    --kb-fill: linear-gradient(160deg, var(--klein-hi), var(--klein));
    --kb-edge: var(--klein-deep);
    --kb-ink: var(--on-klein);
}

/* L'appui : la face descend sur sa jupe, comme une touche du nom. */
.key-btn--deep:active {
    translate: 0 calc(var(--skirt-h) / 2);
    box-shadow:
        inset 0 calc(-1 * var(--skirt-h) / 2) 0 var(--skirt),
        0 1px 2px oklch(0.18 0.005 265 / 0.16);
}

/* ── Sur une surface Klein ── */
.on-klein .key-btn--klein {
    --kb-fill: var(--key-light);
    --kb-edge: oklch(1 0 0);
    --kb-relief: inset 0 -2px 0 color-mix(in oklch, var(--klein-deep) 14%, transparent), 0 1px 2px color-mix(in oklch, var(--klein-deep) 30%, transparent), 0 4px 12px color-mix(in oklch, var(--klein-deep) 30%, transparent);
    --kb-ink: var(--klein-ink);
}

.on-klein .key-btn:not(.key-btn--klein) {
    --kb-fill: color-mix(in oklch, var(--on-klein) 10%, transparent);
    --kb-edge: color-mix(in oklch, var(--on-klein) 40%, transparent);
    --kb-relief: inset 0 1px 0 oklch(1 0 0 / 0.24), 0 1px 2px color-mix(in oklch, var(--klein-deep) 24%, transparent);
    --kb-ink: var(--on-klein);
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
}

.key-btn:disabled,
.key-btn[aria-disabled='true'] {
    opacity: 0.5;
    translate: none;
    cursor: not-allowed;
}

@media (prefers-reduced-motion: reduce) {
    .key-btn,
    .key-btn::after {
        transition: none;
    }

    .key-btn:active {
        translate: none;
    }
}

@media (min-width: 600px) {
    .key-btn:not(.key-btn--sm) {
        min-height: 48px;
        padding: 0 22px;
        font-size: 1rem;
    }
}