/* Common geometry across the Valor showcases and valor.pro. */
.language-switch, .site-preferences { border-radius: 10px; }
.language-switch { display: inline-flex; align-items: center; flex-shrink: 0; gap: 2px; width: fit-content; padding: 3px; border: 1px solid var(--line); background: var(--paper, var(--surface)); }
.language-switch button { display: inline-flex; flex-direction: row; align-items: center; justify-content: center; gap: 5px; min-width: 48px; min-height: 36px; padding: 6px 8px; border: 0; border-radius: 7px; background: transparent; color: var(--ink); font: 600 12px/1.3 Aptos, 'Segoe UI', sans-serif; letter-spacing: normal; white-space: nowrap; }
.language-switch button:hover { background: var(--wash, var(--tint)); }
.language-switch button[aria-pressed='true'] { background: var(--control-accent, #155dc0); color: white; }
.language-switch :is(img, svg), .language-switch--compact .language-flag { display: block; flex: none; width: 20px; height: 14px; border-radius: 2px; }
.site-preferences button, .btn, .button { border-radius: 7px; }
@media (pointer: coarse) { .language-switch button { min-width: 48px; min-height: 44px; } }
@media (forced-colors: active) { .language-switch button[aria-pressed='true'] { outline: 2px solid Highlight; outline-offset: -2px; } }