/* The two preferences share the production header's compact geometry. */
.preference-toggle { display:inline-flex;align-items:center;gap:3px;border:1px solid color-mix(in srgb,var(--color-text-ghost, #888e9d) 30%,transparent);padding:4px 8px;background:transparent;font:400 10px/1 var(--font-headline, Arial, sans-serif);letter-spacing:.1em;text-transform:uppercase;white-space:nowrap;color:var(--color-text-ghost, #888e9d);cursor:pointer;transition:color .2s,border-color .2s; }
:root {--site-control-primary:#acc7ff;}
html.light {--site-control-primary:#1d4f9e;}
.preference-value { color:var(--color-primary, var(--blue, var(--site-control-primary)));font-weight:400; }
.preference-toggle:hover {color:var(--color-primary, var(--blue, var(--site-control-primary)));border-color:var(--color-primary, var(--blue, var(--site-control-primary)));}
.preference-toggle:focus {outline:none;}
.preference-toggle:focus-visible {outline:2px solid var(--color-primary, var(--blue, var(--site-control-primary)));outline-offset:3px;}
@media(max-width:767px) { .preview-controls .preference-toggle {min-width:44px;min-height:44px;} .preference-prefix {display:none;} }
@media(prefers-reduced-motion:reduce) { .preference-toggle {transition:none;} }

.preferences .preference-toggle {padding:4px 8px;}
/* Remove the hosted app's extra border around its language button group. */
.language-control:has(.preference-toggle) {border:0;padding:0;background:transparent;min-height:0;}
.language-control .preference-toggle {font-size:10px;line-height:1;height:20px;min-height:0;box-sizing:border-box;}
@media(max-width:767px) { .site-controls .preference-toggle, .controls .preference-toggle, .preferences .preference-toggle {height:auto;min-width:44px;min-height:44px;} }