/* public/app/css/visual-ultra-stt.css
 * Synopsis: Mode Ultra — section Speech to text.
 * Objectif: Drapeaux et liste langues type galerie premium.
 */

html[data-vok-visual="ultra"] .dash .dash-panel--flags {
    background:
        radial-gradient(95% 70% at 50% 0%, color-mix(in srgb, var(--dash-accent) 14%, transparent), transparent 55%),
        linear-gradient(180deg, color-mix(in srgb, var(--dash-accent) 7%, transparent), transparent 2.4rem),
        var(--dash-elev);
}

html[data-vok-visual="ultra"] .dash .dash-panel--flags .dash-lang-head {
    border-bottom: 1px solid color-mix(in srgb, var(--dash-accent) 18%, var(--dash-line));
    margin-bottom: .15rem;
    padding-bottom: .25rem;
}

html[data-vok-visual="ultra"] .dash .lang-flags button {
    border-color: color-mix(in srgb, var(--dash-accent) 28%, var(--dash-line));
    box-shadow: 0 2px 6px color-mix(in srgb, var(--dash-text) 8%, transparent);
}

html[data-vok-visual="ultra"] .dash .lang-flags button[aria-pressed="true"],
html[data-vok-visual="ultra"] .dash .lang-flags button[aria-selected="true"] {
    box-shadow:
        0 0 0 2px color-mix(in srgb, var(--dash-accent) 55%, transparent),
        0 0 14px color-mix(in srgb, var(--dash-accent) 28%, transparent);
}

html[data-vok-visual="ultra"] .dash .lang-flags-grip {
    border-color: color-mix(in srgb, var(--dash-accent) 30%, var(--dash-line));
    box-shadow: 0 2px 8px color-mix(in srgb, var(--dash-text) 10%, transparent);
}

html[data-vok-visual="ultra"] .dash .dash-panel--flags .dash-rail-note a {
    color: var(--dash-accent);
    text-decoration-thickness: 2px;
    text-underline-offset: .18em;
}

@media (prefers-reduced-motion: no-preference) {
    html[data-vok-visual="ultra"] .dash .lang-flags button:hover {
        transform: translateY(-1px);
    }
}