/* public/app/css/visual-ultra-kbd.css
 * Synopsis: Mode Ultra — section Saisie clavier.
 * Objectif: Touches et outils type console premium.
 */

html[data-vok-visual="ultra"] .dash .dash-panel--keyboard {
    --dash-kbd-hover: color-mix(in srgb, var(--dash-accent) 28%, var(--dash-elev2));
    --dash-kbd-ring: color-mix(in srgb, var(--dash-accent) 62%, var(--dash-line));
    --dash-kbd-face: color-mix(in srgb, var(--dash-input-bg) 55%, var(--dash-elev2) 45%);
    background:
        radial-gradient(120% 80% at 0% 0%, color-mix(in srgb, var(--dash-accent) 14%, transparent), transparent 55%),
        linear-gradient(180deg, color-mix(in srgb, var(--dash-accent) 8%, transparent), transparent 2.6rem),
        var(--dash-elev);
}

html[data-vok-visual="ultra"] .dash .dash-panel--keyboard .dash-kbd-tab,
html[data-vok-visual="ultra"] .dash .dash-panel--keyboard .dash-kbd-key {
    border-color: color-mix(in srgb, var(--dash-accent) 28%, var(--dash-line));
    box-shadow:
        inset 0 1px 0 color-mix(in srgb, #fff 62%, transparent),
        0 2px 6px color-mix(in srgb, var(--dash-text) 10%, transparent);
}

html[data-vok-visual="ultra"] .dash .dash-panel--keyboard .dash-kbd-tab[aria-selected="true"] {
    box-shadow:
        0 0 0 1px color-mix(in srgb, var(--dash-accent) 45%, transparent),
        0 0 14px color-mix(in srgb, var(--dash-accent) 28%, transparent);
}

html[data-vok-visual="ultra"] .dash .dash-panel--keyboard .dash-seg {
    background: color-mix(in srgb, var(--dash-accent) 8%, transparent);
    border-radius: var(--dash-radius);
    box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--dash-accent) 24%, transparent);
}

html[data-vok-visual="ultra"] .dash .dash-panel--keyboard .dash-seg-btn[aria-pressed="true"] {
    box-shadow:
        0 0 0 1px color-mix(in srgb, var(--dash-accent) 40%, transparent),
        0 4px 12px color-mix(in srgb, var(--dash-accent) 22%, transparent);
}

html[data-vok-visual="ultra"] .dash .dash-panel--keyboard .dash-act--mark {
    border-color: color-mix(in srgb, var(--dash-accent) 30%, var(--dash-line));
    box-shadow: inset 0 1px 0 color-mix(in srgb, #fff 50%, transparent);
}

html[data-vok-visual="ultra"] .dash .dash-panel--keyboard .dash-act--undo,
html[data-vok-visual="ultra"] .dash .dash-panel--keyboard .dash-act--redo,
html[data-vok-visual="ultra"] .dash .dash-panel--keyboard .dash-act--erase {
    border-color: color-mix(in srgb, var(--dash-accent) 26%, var(--dash-line));
    box-shadow: 0 2px 8px color-mix(in srgb, var(--dash-text) 8%, transparent);
}

@media (prefers-reduced-motion: no-preference) {
    html[data-vok-visual="ultra"] .dash .dash-panel--keyboard .dash-kbd-key:hover,
    html[data-vok-visual="ultra"] .dash .dash-panel--keyboard .dash-kbd-tab:hover {
        transform: translateY(-1px);
    }
}