/* Shared control states; tokens live in tokens.css. */
*, *::before, *::after { box-sizing: border-box; }
html { background: var(--wb-canvas); }
body { margin: 0; color: var(--wb-text); background: var(--wb-canvas); font-family: var(--wb-font); font-size: 14px; line-height: 1.45; }
button, input, select, textarea { font: inherit; }
button { cursor: pointer; }
button:disabled, input:disabled, select:disabled, textarea:disabled { cursor: not-allowed; opacity: .55; }
:focus-visible { outline: 2px solid var(--wb-focus); outline-offset: 2px; }
button,input,select,textarea{font:inherit;color:inherit}button,a,summary{touch-action:manipulation}button,summary{cursor:pointer}button{min-height:44px;border:1px solid var(--border);background:var(--surface);border-radius:var(--radius);padding:10px 14px;font-weight:500;line-height:1.4}button:hover{background:var(--subtle);border-color:var(--secondary)}button:active{background:var(--accent-tint)}button:disabled{background:var(--subtle);color:var(--muted);cursor:not-allowed}.primary{background:var(--text);color:var(--surface);border-color:var(--text)}.primary:hover{background:var(--secondary);color:var(--surface)}.primary:active{background:var(--text)}.primary:disabled{background:var(--subtle);border-color:var(--border);color:var(--muted)}.danger,.error{color:var(--error)}a{color:var(--text);text-underline-offset:4px}a:hover{text-decoration-color:var(--focus)}input,select,textarea{width:100%;min-height:44px;padding:10px 12px;border:1px solid var(--border);border-radius:var(--radius);background:var(--surface);line-height:1.5}input:hover,select:hover,textarea:hover{border-color:var(--secondary)}input[readonly]{background:var(--subtle)}input[type=checkbox]{width:20px;min-height:20px;height:20px;accent-color:var(--text);cursor:pointer;flex-shrink:0}textarea{min-height:116px;resize:vertical}
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { scroll-behavior: auto !important; transition-duration: .01ms !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; } }

/* Brief feedback preserves layout and never delays an action. */
:root{--motion-fast:140ms;--motion-panel:200ms;--motion-ease:cubic-bezier(.2,.7,.2,1)}
button,summary,input,select,textarea{transition:background-color var(--motion-fast),border-color var(--motion-fast),color var(--motion-fast)}
button[aria-busy="true"]{position:relative;cursor:progress;opacity:.75}
button[aria-busy="true"]::after{content:"";position:absolute;left:8px;right:8px;bottom:3px;height:2px;background:currentColor;opacity:.45;transform-origin:left;animation:wb-working 850ms ease-in-out infinite alternate}
.loading-state,.panel-loading{color:var(--secondary);line-height:1.8}.loading-indicator{display:inline-block;width:18px;height:18px;border:2px solid var(--border);border-top-color:var(--focus);border-radius:50%;animation:wb-spin 750ms linear infinite}
.skeleton{height:16px;border-radius:4px;background:var(--subtle);margin:16px 0;max-width:100%}.skeleton.short{width:65%}
html[data-network-busy="true"]::before{content:"";position:fixed;z-index:10000;top:0;left:0;width:35%;height:2px;background:var(--focus);animation:wb-network 1.1s ease-in-out infinite}
@keyframes wb-working{from{transform:scaleX(.25)}to{transform:scaleX(1)}}
@keyframes wb-spin{to{transform:rotate(360deg)}}
@keyframes wb-network{from{transform:translateX(-100%)}to{transform:translateX(390%)}}
@keyframes wb-panel{from{opacity:.65;transform:translateY(8px)}to{opacity:1;transform:none}}
@keyframes wb-drawer{from{opacity:.7;transform:translateX(20px)}to{opacity:1;transform:none}}
@keyframes wb-reveal{from{opacity:.75}to{opacity:1}}
@media(prefers-reduced-motion:no-preference){.modal>.dialog,.statistics-dialog[open]{animation:wb-panel var(--motion-panel) var(--motion-ease)}.modal.drawer>.dialog{animation-name:wb-drawer}.context-menu:popover-open{animation:wb-reveal var(--motion-fast) ease-out}.toast{animation:wb-reveal var(--motion-fast) ease-out}}
@media(prefers-reduced-motion:reduce){.loading-indicator,html[data-network-busy="true"]::before,button[aria-busy="true"]::after{animation:none!important}.modal>.dialog,.statistics-dialog[open],.context-menu:popover-open,.toast{animation:none!important}}
html[data-page-hidden="true"] *,html[data-page-hidden="true"]::before{animation-play-state:paused!important}
@media(forced-colors:active){.skeleton{border:1px solid CanvasText}.loading-indicator{border-color:CanvasText;border-top-color:Highlight}}

@media(min-width:601px){html{scrollbar-gutter:stable}}