/* Shared control system. See DESIGN_SYSTEM.md before extending. */
:root{
 --control-height:40px;--control-radius:9px;--control-border:var(--border-control);
 --control-padding:12px;--field-gap:24px;--label-gap:8px;--swatch-size:36px;--swatch-gap:8px;--swatch-inset:2px;
 --label-color:var(--text-muted);--label-size:13px;--control-size:14px;
 --panel-width:304px;--panel-mobile-width:380px;--panel-padding:20px;--tooltip-gap:12px;--tooltip-radius:8px;--tooltip-hover-delay:500ms;--icon-button-size:36px;--icon-size:16px;
 --control-color-duration:120ms;--control-color-easing:ease;
 --capture-bottom:calc(max(16px,env(safe-area-inset-bottom)) + 6px);--capture-tooltip-gap:14px;
 --control-hover:var(--surface-hover);
 --control-pressed:var(--surface-pressed);
}
.ai-settings,.task-shelf{padding:var(--panel-padding)}
.ai-settings #capture-provider,.ai-settings .configure-button,
.ai-settings input:not([type=checkbox]):not([type=range]),
.sound-control,.theme-segments{
 box-sizing:border-box;height:var(--control-height);min-height:var(--control-height);
 border:1px solid var(--control-border);border-radius:var(--control-radius);
 font-size:var(--control-size);
}
.ai-settings #capture-provider,.ai-settings .configure-button,
.ai-settings input:not([type=checkbox]):not([type=range]){padding:0 var(--control-padding);line-height:1.4}
.ai-settings #capture-provider{margin-top:var(--label-gap)}
.ai-settings .configure-button{flex:none}
.provider-row{gap:var(--control-padding)}
.ai-settings label,#provider-label,.sound-row>span,.appearance-field>span{color:var(--label-color);font-size:var(--label-size)}
.sound-row>span,.appearance-field>span{margin-bottom:var(--label-gap)}
.sound-row,.appearance-field,#connection-fields:not([hidden]){margin-top:var(--field-gap)}
.ai-settings input:not([type=checkbox]):not([type=range]){margin:var(--label-gap) 0 var(--field-gap)}
.sound-control{padding-right:var(--control-padding);gap:var(--control-padding)}
.ai-settings .sound-control #sound-toggle{height:calc(var(--control-height) - 2px);min-height:0;border-radius:calc(var(--control-radius) - 1px) 0 0 calc(var(--control-radius) - 1px);border-right-color:var(--control-border)}
.theme-segments{padding:0;gap:0;overflow:hidden}
.ai-settings .theme-segments button{padding:0 var(--control-padding);min-height:0;line-height:1.4;border-radius:0}
.ai-settings .configure-button:hover,.ai-settings #capture-provider:hover,.ai-settings #sound-toggle:hover,.ai-settings .theme-segments button:hover{background:var(--control-hover)}
.ai-settings .configure-button:active,.ai-settings #capture-provider:active,.ai-settings #sound-toggle:active,.ai-settings .theme-segments button:active{background:var(--control-pressed)}
#provider-options{border-color:var(--control-border);border-radius:var(--control-radius)}
.ai-settings #provider-options button{border-radius:calc(var(--control-radius) - 3px)}
.ai-settings .settings-actions button{min-height:var(--control-height);border-radius:var(--control-radius);padding:0 var(--control-padding);font-size:var(--control-size)}
.shelf-icon,#theme-toggle{width:var(--icon-button-size);height:var(--icon-button-size);border-radius:var(--control-radius);transition:background-color var(--control-color-duration) var(--control-color-easing),color var(--control-color-duration) var(--control-color-easing),border-color var(--control-color-duration) var(--control-color-easing)}
@media(prefers-reduced-motion:reduce){:root{--control-color-duration:0ms}}
.capture-actions{bottom:var(--capture-bottom)}
#voice-surface{bottom:calc(var(--capture-bottom) + 60px)}
.shelf-icon svg,#theme-toggle svg{width:var(--icon-size);height:var(--icon-size)}
#dictate-toggle{width:112px;border-radius:24px}

.ai-settings,.task-shelf{width:min(var(--panel-mobile-width),calc(100vw - 32px))}
@media(min-width:601px){.ai-settings,.task-shelf{width:var(--panel-width)}}
.ai-settings .theme-segments button{border-radius:0}
.ai-settings .theme-segments button+button{border-left:1px solid var(--control-border)}
.ui-floating-tooltip{position:fixed;inset:auto;margin:0;z-index:1000;width:max-content;max-width:calc(100vw - 16px);padding:8px 10px;border:1px solid var(--control-border);border-radius:var(--tooltip-radius);background:var(--surface-control);color:var(--ink);font:12px/1.4 Arial,Helvetica,sans-serif;white-space:pre-line;text-align:left;pointer-events:none}
.ui-floating-tooltip::backdrop{background:transparent;pointer-events:none}
#add-tooltip{bottom:calc(100% + var(--capture-tooltip-gap));border-radius:var(--tooltip-radius);border-color:var(--control-border)}

/* Color hierarchy. Every paint value resolves through ui-theme.css. */
.ui-button{--button-bg:transparent;--button-border:transparent;--button-color:var(--text-primary);--button-hover:var(--surface-hover);--button-pressed:var(--surface-pressed)}
.ui-button[data-variant=outline]{--button-bg:transparent;--button-border:var(--border-strong);--button-hover:transparent;--button-pressed:transparent}
.ui-button[data-variant=primary]{--button-bg:var(--surface-control);--button-border:var(--border-strong)}
.ui-button[data-variant=secondary]{--button-bg:var(--surface-control)}
.ui-button[role=option][aria-selected=true]{--button-bg:var(--accent-surface);--button-color:var(--text-primary)}
.ui-button[data-variant=field]{--button-bg:var(--surface-control);--button-border:var(--border-control)}
.ui-button[data-variant=segment][aria-pressed=true]{--button-bg:var(--accent-surface);--button-border:var(--accent-surface);--button-color:var(--text-primary);--button-hover:var(--accent-hover);--button-pressed:var(--accent-pressed)}
.ui-button[data-variant=segment][aria-pressed=false]{--button-color:var(--text-muted)}
.ui-button[data-variant=segment][aria-pressed=false]:hover,.ui-button[data-variant=segment][aria-pressed=false]:active{--button-color:var(--text-primary)}
/* Override legacy paint without changing control geometry. */
:is(#ui-button-system,button.ui-button).ui-button{background:var(--button-bg);color:var(--button-color);border:1px solid var(--button-border)}
:is(#ui-button-system,button.ui-button).ui-button:hover{background:var(--button-hover);color:var(--button-color);border-color:var(--button-border)}
:is(#ui-button-system,button.ui-button).ui-button:active{background:var(--button-pressed)}
:is(#ui-button-system,button.ui-button).ui-button:focus-visible{color:var(--button-color)}
.ui-button[data-variant=ghost].shelf-icon{--button-color:var(--text-muted);--button-hover:var(--icon-hover);--button-pressed:var(--icon-pressed)}
.ai-settings,.task-shelf,#provider-options{background:var(--surface-panel);border-color:var(--border-subtle);color:var(--text-primary)}
.ai-settings input:not([type=checkbox]):not([type=range]),.sound-control,.theme-segments{background:var(--surface-control);border:1px solid var(--border-control);color:var(--text-primary)}
.theme-segments{overflow:visible}
.ai-settings .theme-segments button:first-child{border-radius:calc(var(--control-radius) - 1px) 0 0 calc(var(--control-radius) - 1px)}
.ai-settings .theme-segments button:last-child{border-radius:0 calc(var(--control-radius) - 1px) calc(var(--control-radius) - 1px) 0}
.ui-floating-tooltip,#add-tooltip{background:var(--surface-control);border-color:var(--border-control);color:var(--text-primary)}
.fresh-list-footer{border-color:var(--border-subtle)}
.ai-settings input::placeholder,#voice-surface,#voice-text,#voice-retry{color:var(--text-muted);opacity:1}
main input[type=checkbox]{border-color:var(--border-strong)}
.ai-settings input[type=checkbox]{accent-color:var(--text-primary)}
.ai-settings #sound-volume::-webkit-slider-runnable-track{background:linear-gradient(to right,var(--text-muted) var(--volume),var(--border-subtle) var(--volume))}
.ai-settings #sound-volume::-webkit-slider-thumb{background:var(--text-primary);border-color:var(--surface-control);box-shadow:none}
.ai-settings #sound-volume::-moz-range-track{background:var(--border-subtle)}
.ai-settings #sound-volume::-moz-range-progress{background:var(--text-muted)}
.ai-settings #sound-volume::-moz-range-thumb{background:var(--text-primary);border-color:var(--surface-control);box-shadow:none}
/* Muted controls retain their surface; only unavailable content is subdued. */
:is(#ui-button-system,button.ui-button).ui-button:disabled:not([aria-busy=true]){color:var(--text-disabled);opacity:1;cursor:default}
.sound-row[data-muted=true] input,.sound-row[data-muted=true] output{opacity:1;color:var(--text-muted)}
/* Recording accent is shared by the complete button state. */
#dictate-toggle.ui-button:hover,#dictate-toggle.ui-button[data-state=acquiring],#dictate-toggle.ui-button[data-state=recording],#dictate-toggle.ui-button[data-state=processing]{--button-color:var(--record-accent);--button-border:var(--record-accent)}
#dictate-toggle.ui-button[aria-busy=true]::after{display:none}
#dictate-toggle.ui-button[aria-busy=true] svg{visibility:visible;width:20px;height:20px}
/* Steps spinner from https://loading.dev/spinners/steps */
.ld-steps{width:var(--ld-size,20px);height:var(--ld-size,20px)}
.ld-steps-segment{animation:ld-steps-light 1600ms linear infinite;animation-delay:calc(1600ms * (var(--ld-step) - 8) / 8)}
@keyframes ld-steps-light{0%,55%{opacity:1}60%,100%{opacity:.15}}
@media(prefers-reduced-motion:reduce){.ld-steps-segment{animation:none;opacity:calc(1 - var(--ld-step) * .25)}}

#dictate-toggle.ui-button{--button-hover:var(--button-bg)}

/* A selected choice has no action feedback; an on/off toggle still does. */
:is(#ui-button-system,button.ui-button)[data-selection-behavior=choice]:is([aria-pressed=true],[aria-selected=true],[aria-checked=true]),
:is(#ui-button-system,button.ui-button)[data-selection-behavior=choice]:is([aria-pressed=true],[aria-selected=true],[aria-checked=true]):hover,
:is(#ui-button-system,button.ui-button)[data-selection-behavior=choice]:is([aria-pressed=true],[aria-selected=true],[aria-checked=true]):active{background:var(--button-bg);color:var(--button-color);border-color:var(--button-border);cursor:default}
.accent-field{margin-top:var(--field-gap)}
.accent-field>span{display:block;color:var(--label-color);font-size:var(--label-size);margin-bottom:var(--label-gap)}
.accent-swatches{display:flex;gap:var(--swatch-gap);padding-inline:var(--swatch-inset)}
.ai-settings .accent-swatch{flex:0 1 var(--swatch-size);width:var(--swatch-size);height:auto;aspect-ratio:1;min-width:0;padding:0;border-radius:50%;display:grid;place-items:center;position:relative}
.ui-button[data-variant=swatch]{--button-bg:var(--swatch);--button-hover:var(--swatch);--button-pressed:var(--swatch);--button-color:var(--accent-contrast);--button-border:var(--border-strong)}
.ui-button[data-variant=swatch]:not([aria-checked=true]):hover{--button-border:var(--text-primary)}
.accent-swatch[aria-checked=true]::after{content:'✓';font-size:16px;line-height:1}
main input[type=checkbox]:checked{background:var(--accent);border-color:var(--accent)}
main input[type=checkbox]:checked::after{border-color:var(--accent-contrast)}
.ai-settings input[type=checkbox]{accent-color:var(--accent)}

.accent-swatch[data-accent-choice=neutral][aria-checked=true]::after{color:transparent;background:var(--swatch-check);background-clip:text;-webkit-background-clip:text}