/* Element defaults and shared accessible controls. Page layouts live in pages.css. */
*, *::before, *::after { box-sizing: border-box; }
html { font-family: var(--font); font-size: 14px; line-height: 22.75px; background: var(--canvas); color: var(--ink); }
body { margin: 0; min-width: 280px; font-weight: 400; }
button, input, select, textarea { font: inherit; color: inherit; }
a { color: var(--brand); text-underline-offset: 3px; }
button, a, input, textarea, select, summary { -webkit-tap-highlight-color: transparent; }
button { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: var(--control-height); padding: 8px 16px; border: 1px solid transparent; border-radius: var(--radius); background: var(--brand); color: var(--on-brand); font-weight: 500; line-height: 22.75px; cursor: pointer; transition: background-color var(--motion),border-color var(--motion),color var(--motion); }
button:hover:not(:disabled) { background: var(--brand-hover); }
button:active:not(:disabled) { filter: brightness(.96); }
button:disabled, [aria-disabled="true"] { opacity: .5; cursor: not-allowed; }
:where(button, a, input, select, textarea, summary, [tabindex]):focus-visible { outline: 2px solid var(--brand); outline-offset: 3px; }
input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]), select, textarea { display: block; width: 100%; min-width: 0; min-height: var(--control-height); padding: 8px 12px; border: 1px solid var(--line); border-radius: var(--radius); background-color: var(--surface); line-height: 1.5; }
input::placeholder, textarea::placeholder { color: var(--muted); opacity: .85; }
input:disabled, select:disabled, textarea:disabled { background: var(--surface-subtle); color: var(--muted); cursor: not-allowed; opacity: .65; }
input[readonly], textarea[readonly] { background: var(--surface-subtle); }
textarea { resize: vertical; min-height: 100px; }
input[type="search"] { padding-left: 36px!important; background-image: url("icons/search.svg"); background-repeat: no-repeat; background-position: 11px center; background-size: 16px; }
input[type="checkbox"], input[type="radio"] { width: 16px; height: 16px; flex: 0 0 16px; margin: 0; accent-color: var(--brand); cursor: pointer; }
label { display: grid; gap: 6px; min-width: 0; align-content: start; }
label > span:first-child, label > strong:first-child { color: var(--muted); font-size: 14px; line-height: 22.75px; }
label:has(> input[type="checkbox"]), label:has(> input[type="radio"]) { display: flex; align-items: center; gap: 8px; }
fieldset { min-width: 0; padding: 0; margin: 0; border: 0; }
fieldset:disabled { opacity: .65; }
h1,h2,h3,h4,p { margin: 0; }
h1 { font-size: 20px; line-height: 36px; font-weight: 600; letter-spacing: -.02em; }
h2 { font-size: 16px; line-height: 24px; font-weight: 600; }
h3 { font-size: 14px; line-height: 24px; font-weight: 600; }
h4 { font-size: 13px; }
p { line-height: 22.75px; }
small { color: var(--muted); font-size: 12px; line-height: 18px; }
strong { font-weight: 600; }
code { overflow-wrap: anywhere; word-break: break-word; }
pre { max-width: 100%; white-space: pre-wrap; overflow-wrap: anywhere; margin: 0; font-size: 12px; }
img,svg { max-width: 100%; vertical-align: middle; }
[hidden],.hidden { display: none!important; }
.sr-only,.ai-schemes-sr-only,.nav-symbols { position: absolute!important; width: 1px!important; height: 1px!important; padding: 0!important; margin: -1px!important; overflow: hidden!important; clip-path: inset(50%); white-space: nowrap; border: 0!important; }
.secondary,.row-action-button,.small-button.secondary,.text-button,.text-action,.list-action-button,.ghost,.danger-outline,.ghost-danger { background: var(--surface); color: var(--ink); border-color: var(--line); }
.secondary:hover:not(:disabled),.row-action-button:hover:not(:disabled),.text-button:hover:not(:disabled),.text-action:hover:not(:disabled),.list-action-button:hover:not(:disabled),.ghost:hover:not(:disabled) { background: var(--hover); border-color: var(--line-strong); }
.text-button,.text-action { padding: 4px 8px; color: var(--brand); border-color: transparent; background: transparent; }
.danger { background: var(--danger); color: var(--on-danger); }
.danger:hover:not(:disabled) { background: var(--danger); filter: brightness(.94); }
.danger-outline,.ghost-danger,.danger-text { color: var(--danger); }
.danger-outline:hover:not(:disabled),.ghost-danger:hover:not(:disabled) { background: var(--danger-tint); }
.small-button,.compact-button,.row-action-button,.list-action-button { min-height: var(--compact-height); padding: 5px 10px; font-size: 13px; }
svg:has(> use),.ui-icon,.nav-icon,.theme-control-icon { display: inline-flex; width: 16px; height: 16px; flex: 0 0 16px; fill: none; stroke: currentColor; stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; }
.nav-icon > svg,.theme-control-icon > svg { display: block; width: 100%; height: 100%; overflow: visible; }
.title-help-button { display: inline-grid; place-items: center; width: 16px; height: 16px; min-height: 16px; flex: 0 0 16px; padding: 0; border: 0; background: transparent; color: var(--muted); vertical-align: middle; font-size: 0; border-radius: 4px; }
.title-help-button::before { content: ""; width: 16px; height: 16px; background: currentColor; mask: url("icons/info.svg") center / contain no-repeat; }
.title-help-button:hover:not(:disabled) { background: var(--hover); color: var(--brand); }
.help-title-inline,.field-label-with-help,.field-label,.speech-library-filter-label { display: inline-flex; align-items: center; gap: 4px; min-height: 24px; }
.help-tooltip-layer { position: fixed; z-index: 20000; max-width: min(340px,calc(100vw - 24px)); max-height: min(240px,calc(100dvh - 24px)); padding: 10px 12px; color: var(--ink); background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); font-size: 12px; line-height: 1.65; pointer-events: none; opacity: 0; visibility: hidden; transition: opacity var(--motion),visibility 0s linear var(--motion); overflow: auto; overscroll-behavior: contain; scrollbar-width: var(--scrollbar-width); overflow-wrap: anywhere; }
.help-tooltip-layer.visible { opacity: 1; visibility: visible; pointer-events: auto; transition: opacity var(--motion),visibility 0s linear 0s; }
input.toggle-switch-input { appearance: none; width: var(--switch-width); height: var(--switch-height); flex: 0 0 var(--switch-width); border: 2px solid transparent; border-radius: 999px; background: var(--switch-off); padding: 0; transition: background 250ms cubic-bezier(.77,0,.175,1),box-shadow var(--motion); position: relative; }
input.toggle-switch-input::before { content: ""; position: absolute; left: 0; top: 0; display: block; height: var(--switch-thumb); width: var(--switch-thumb); background: var(--on-brand); border-radius: 50%; box-shadow: 0 2px 6px rgba(0,0,0,.18); transition: transform 250ms cubic-bezier(.77,0,.175,1),width 250ms cubic-bezier(.77,0,.175,1); }
input.toggle-switch-input:checked { background: var(--brand); }
input.toggle-switch-input:checked::before { transform: translateX(20px); }
input.toggle-switch-input:active::before { width: 24px; }
input.toggle-switch-input:checked:active::before { transform: translateX(16px); }
input.toggle-switch-input:disabled { opacity: .4; cursor: not-allowed; }
.switch-label,.switch-row,.modal-switch-row,.automation-editor-switch,.automation-list-switch { display: flex; align-items: center; gap: 10px; }
.field-error,.form-error,[aria-invalid="true"] { color: var(--danger); }
[aria-invalid="true"] { border-color: var(--danger)!important; }
.field-helper-text,.panel-note,.ai-schemes-muted { color: var(--muted); font-size: 12px; line-height: 1.6; overflow-wrap: anywhere; }
.form-error { background: var(--danger-tint); padding: 12px; border-radius: var(--radius); }
@media(max-width:768px) {
  button { min-height: var(--touch-height); }
  input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]),select,textarea { font-size: 16px; min-height: var(--touch-height); }
  .small-button,.compact-button,.row-action-button,.list-action-button { min-height: 40px; }
  .title-help-button { min-height: 16px; width: 16px; height: 16px; flex-basis: 16px; }
}
@media(prefers-reduced-motion:reduce) { *,*::before,*::after { scroll-behavior: auto!important; transition: none!important; animation-duration: .01ms!important; animation-iteration-count: 1!important; } }