/* Shared selection controls for the user client and staff workbench. */
body{--choice-accent:var(--work-accent,var(--accent,#4f8fff));--choice-border:var(--work-border,var(--border-light,#dce3ed));--choice-surface:var(--work-input,var(--content-bg,#f5f7fb));--choice-muted:var(--work-muted,var(--text-secondary,#8190a4))}
.sng-auth-screen,.sng-auth-window .sng-close-dialog{--choice-accent:#347deb;--choice-border:#c7d3e3;--choice-surface:#fff;--choice-muted:#718093}
body input:is([type=checkbox],[type=radio]):not(.toggle-switch input,.work-switch input){appearance:none;-webkit-appearance:none;box-sizing:border-box;position:relative;display:inline-grid;place-content:center;vertical-align:middle;flex:0 0 16px;width:16px;height:16px;min-width:16px;min-height:16px;margin:0;padding:0;border:1px solid var(--choice-border);border-radius:5px;background:var(--choice-surface);color:var(--choice-accent);cursor:pointer;box-shadow:none;transition:border-color 120ms ease,background-color 120ms ease,box-shadow 120ms ease}
body input:is([type=checkbox],[type=radio]):not(.toggle-switch input,.work-switch input):checked{border-color:var(--choice-accent);background:color-mix(in srgb,var(--choice-accent) 12%,var(--choice-surface))}
body input:is([type=checkbox],[type=radio]):not(.toggle-switch input,.work-switch input)::after{content:'';opacity:0;transition:opacity 120ms ease,transform 120ms ease}
body input[type=checkbox]:not(.toggle-switch input,.work-switch input)::after{width:7px;height:4px;border-left:2px solid currentColor;border-bottom:2px solid currentColor;transform:translateY(-1px) rotate(-45deg) scale(.6)}
body input[type=checkbox]:not(.toggle-switch input,.work-switch input):checked::after{opacity:1;transform:translateY(-1px) rotate(-45deg) scale(1)}
body input[type=radio]:not(.toggle-switch input,.work-switch input){border-radius:50%}
body input[type=radio]:not(.toggle-switch input,.work-switch input)::after{width:6px;height:6px;border-radius:50%;background:currentColor;transform:scale(.6)}
body input[type=radio]:not(.toggle-switch input,.work-switch input):checked::after{opacity:1;transform:scale(1)}
body input:is([type=checkbox],[type=radio]):not(.toggle-switch input,.work-switch input):hover:not(:disabled){border-color:var(--choice-accent)}
body input:is([type=checkbox],[type=radio]):not(.toggle-switch input,.work-switch input):focus-visible{outline:2px solid var(--choice-accent);outline-offset:3px}
body input:is([type=checkbox],[type=radio]):not(.toggle-switch input,.work-switch input):disabled{opacity:.45;cursor:not-allowed}
body .sng-close-dialog .sng-close-remember{display:inline-flex;gap:9px;padding:9px 12px;border:1px solid var(--choice-border);border-radius:9px;line-height:18px;user-select:none;transition:background-color 120ms,border-color 120ms}
body .sng-close-dialog .sng-close-remember[hidden]{display:none}
body .sng-close-dialog .sng-close-remember:has(input:checked){border-color:color-mix(in srgb,var(--choice-accent) 45%,var(--choice-border));background:color-mix(in srgb,var(--choice-accent) 8%,transparent)}
body .sng-close-dialog .sng-close-remember:hover{background:color-mix(in srgb,var(--choice-accent) 8%,transparent)}
body .auth-login-preferences label{gap:8px;line-height:18px}
body .work-permission:has(input:checked){background:color-mix(in srgb,var(--choice-accent) 8%,var(--choice-surface))}
body .work-permission:has(input:disabled){cursor:not-allowed}
/* Settings use switches. Keep the native input focusable and label-clickable. */
body :is(.toggle-switch,.work-switch){position:relative;display:inline-flex;width:40px;height:24px;flex:0 0 40px;cursor:pointer}
body :is(.toggle-switch,.work-switch) input{position:absolute;inset:0;width:100%;height:100%;margin:0;opacity:0;z-index:1;cursor:pointer}
body :is(.toggle-switch,.work-switch)>span{position:absolute;inset:0;width:100%;height:100%;border:1px solid var(--choice-border);box-sizing:border-box;border-radius:24px;background:color-mix(in srgb,var(--choice-muted) 35%,var(--choice-surface));transition:background 120ms,border-color 120ms}
body :is(.toggle-switch,.work-switch)>span::before{content:'';position:absolute;left:3px;top:3px;bottom:auto;width:16px;height:16px;border-radius:50%;background:#fff;box-shadow:0 1px 3px #0003;transition:transform 120ms}
body :is(.toggle-switch,.work-switch) input:checked+span{background:var(--choice-accent);border-color:var(--choice-accent)}
body :is(.toggle-switch,.work-switch) input:checked+span::before{transform:translateX(16px)}
body :is(.toggle-switch,.work-switch) input:focus-visible+span{outline:2px solid var(--choice-accent);outline-offset:3px}
body :is(.toggle-switch,.work-switch):has(input:disabled){opacity:.45;cursor:not-allowed}
@media(prefers-reduced-motion:reduce){body input:is([type=checkbox],[type=radio]),body input:is([type=checkbox],[type=radio])::after,body :is(.toggle-switch,.work-switch)>span,body :is(.toggle-switch,.work-switch)>span::before{transition:none}}
@media(forced-colors:active){body input:is([type=checkbox],[type=radio]):not(.toggle-switch input,.work-switch input){appearance:auto}body input:is([type=checkbox],[type=radio])::after{display:none}}
.appearance-options{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.appearance-options label{display:flex;align-items:center;gap:8px;padding:9px 12px;border:1px solid var(--choice-border);border-radius:9px;background:var(--choice-surface);color:var(--choice-muted);cursor:pointer;font-size:14px;white-space:nowrap}
.appearance-options label:has(input:checked){color:var(--choice-accent);border-color:var(--choice-accent);background:color-mix(in srgb,var(--choice-accent) 10%,var(--choice-surface))}
.setting-row:has(.appearance-options),.work-setting-row:has(.appearance-options){gap:16px;flex-wrap:wrap}