/* Bildpunkt's native controls. Load after tokens.css and components.css.
 * Gesture geometry/touch targets stay physical; layout consumes semantic spacing.
 * Do not override [hidden], native form state, or host display/layout declarations.
 */
.tw-control{box-sizing:border-box;accent-color:var(--tw-accent-fill,var(--tw-accent))}
.tw-control:where(:not(.tw-button,.tw-glass-button,.tw-tab)){font:inherit}
.tw-control:focus-visible{outline:3px solid var(--tw-focus,var(--tw-accent-light));outline-offset:3px}
.tw-control:is(:disabled,[aria-disabled=true]){cursor:not-allowed;opacity:1}
.tw-control-field{display:grid;gap:var(--tw-space-label-gap);min-width:0;color:var(--tw-ink)}
.tw-control-label{font:inherit;line-height:1.2}
.tw-control-input,.tw-control-select{min-width:0;min-height:var(--tw-touch);padding:var(--tw-space-control-padding-block) var(--tw-space-control-padding-inline);border:1px solid var(--tw-control-edge,var(--tw-plate-shadow));border-radius:2px;background:var(--tw-glass);color:var(--tw-glass-ink);box-shadow:none}
.tw-control-input::placeholder{color:var(--tw-glass-muted);opacity:1}
.tw-control-input[readonly]{cursor:text}
textarea.tw-control-input{resize:vertical;line-height:1.4}
.tw-control-select{cursor:pointer}
.tw-control-select option{color:var(--tw-glass-ink);background:var(--tw-glass)}
.tw-control-input[type=color]{width:var(--tw-touch);min-width:var(--tw-touch);height:var(--tw-touch);padding:var(--tw-space-control-padding-compact);cursor:pointer}
.tw-control-input[type=color]::-webkit-color-swatch-wrapper{padding:0}
.tw-control-input[type=color]::-webkit-color-swatch{border:0;border-radius:0}
.tw-control-input[type=color]::-moz-color-swatch{border:0;border-radius:0}
/* A 20px paper/glass cap inside the unchanged 44px native target. The button's
 * exact cast/steel edge asset provides grain; palette roles supply all colors.
 * Only checkbox mixed state is engaged: an empty radio group also matches the
 * browser's :indeterminate selector and must keep its unselected presentation. */
.tw-control-toggle{appearance:none;-webkit-appearance:none;position:relative;flex:none;box-sizing:border-box;width:var(--tw-touch);height:var(--tw-touch);min-width:var(--tw-touch);min-height:var(--tw-touch);margin:0;border:0;border-radius:8px;padding:0;background:transparent;cursor:pointer;touch-action:manipulation;vertical-align:middle}
.tw-control-toggle::before{content:"";position:absolute;inset:12px;border:1px solid var(--tw-control-edge,var(--tw-plate-light));border-bottom-width:2px;border-radius:4px;background-color:var(--tw-glass);background-image:var(--tw-button-texture,url("./assets/button-edge-cast.svg")),linear-gradient(135deg,color-mix(in srgb,var(--tw-glass-light) 14%,transparent),transparent 52%);background-position:left top,left top;background-size:100% 100%,100% 100%;background-repeat:no-repeat;image-rendering:pixelated;pointer-events:none;transition:filter 120ms ease}
.tw-control-toggle:is(:checked,[type=checkbox]:indeterminate)::before{border-color:var(--tw-button-primary-edge,var(--tw-accent));background-color:var(--tw-button-primary,var(--tw-accent))}
.tw-control-toggle::after{content:"";position:absolute;left:16px;top:17px;width:12px;height:10px;border:0;background:var(--tw-button-on-primary,var(--tw-on-accent,var(--tw-seam)));clip-path:polygon(0 4px,2px 4px,2px 6px,4px 6px,4px 8px,6px 8px,6px 6px,8px 6px,8px 4px,10px 4px,10px 2px,12px 2px,12px 6px,10px 6px,10px 8px,8px 8px,8px 10px,4px 10px,4px 8px,2px 8px,2px 6px,0 6px);opacity:0;pointer-events:none}
.tw-control-toggle:checked::after{opacity:1}
.tw-control-toggle[type=checkbox]:indeterminate::after{left:17px;top:21px;width:10px;height:2px;clip-path:none;opacity:1}
.tw-control-toggle[type=radio]::before{border-radius:50%}
.tw-control-toggle[type=radio]::after{inset:18px;width:auto;height:auto;border-radius:50%;clip-path:none}
.tw-control-toggle:hover:not(:disabled,[aria-disabled=true])::before{filter:brightness(1.06)}
.tw-control-toggle:active:not(:disabled,[aria-disabled=true])::before{border-bottom-width:1px}
.tw-control-toggle:disabled::before{border-style:dashed}
.tw-control-field:has(>.tw-control-toggle){grid-template-columns:var(--tw-touch) minmax(0,1fr);align-items:center;gap:var(--tw-space-control-gap);cursor:pointer}
.tw-control-field:has(>.tw-control-toggle:disabled){cursor:not-allowed}
.tw-control-field:has(>.tw-control-toggle)>.tw-control-label{grid-column:2;grid-row:1}
.tw-control-field>.tw-control-toggle{grid-column:1;grid-row:1}
@media(prefers-reduced-motion:reduce){.tw-control-toggle::before{transition:none}}
/* Button surfaces/hover/pressed states come exclusively from the tw-button skin. */
.tw-control-button,.tw-control-toggle-button,.tw-control-reset{min-height:var(--tw-touch)}
.tw-control-reset{width:max-content}
/* Overlay the real input in the existing knob housing. Its focus ring stays visible. */
.tw-control-knob-face{position:relative;flex:none;width:var(--tw-knob-size,80px);height:var(--tw-knob-size,80px);background-position:center;background-repeat:no-repeat;background-size:80% 80%!important;image-rendering:pixelated}
.tw-control-knob-face:is([data-bildpunkt-knob=detail-14-brushed],[data-bildpunkt-knob=detail-14-dither]){background-size:auto 70%!important}
.tw-control-knob-face>svg[data-bildpunkt-indicator]{inset:10%!important;width:80%!important;height:80%!important}
.tw-control-knob-face::before{background-size:100% 100%}
.tw-control-knob-face:is([data-tw-indicator=tick],[data-tw-indicator=early])::after{--tw-knob-unit:calc(var(--tw-knob-size,80px)/40);left:calc((var(--tw-tick-x,16) + 3)*var(--tw-knob-unit));top:calc((var(--tw-tick-y,5) + 3)*var(--tw-knob-unit));width:calc(2*var(--tw-knob-unit));height:calc(2*var(--tw-knob-unit))}
.tw-control-knob-face[data-tw-indicator=early]::after{height:calc(3*var(--tw-knob-unit))}
.tw-control-rotary{position:absolute;inset:0;width:100%;height:100%;margin:0;opacity:0;cursor:ns-resize;touch-action:none;z-index:1}
.tw-control-knob-face:has(>.tw-control-rotary:focus-visible){outline:3px solid var(--tw-focus,var(--tw-accent-light));outline-offset:3px}
.tw-control-knob-face:has(>.tw-control-rotary:disabled){opacity:1}
/* Disabled inputs remain invisible over their visible artwork. */
.tw-control-rotary:disabled{opacity:0}
/* Existing fader sprites and thumb geometry stay shared; length is host-configurable. */
.tw-control-range[data-bildpunkt-range=fader]{--tw-fader-cap:url("./assets/fader-cast.png");width:var(--tw-fader-length,136px);height:44px;min-width:0;min-height:0;max-width:100%;touch-action:auto}
.tw-control-range[data-bildpunkt-range=fader]::-webkit-slider-runnable-track{width:100%;height:8px}
.tw-control-range[data-bildpunkt-range=fader]::-moz-range-track{width:100%;height:8px}
.tw-control-range[data-bildpunkt-range=fader][data-bildpunkt-orientation=vertical]{writing-mode:vertical-lr;direction:rtl;width:44px;height:var(--tw-fader-length,136px);max-width:none;max-height:100%;cursor:ns-resize}
.tw-control-range[data-bildpunkt-range=fader][data-bildpunkt-orientation=vertical]::-webkit-slider-runnable-track{width:8px;height:100%}
.tw-control-range[data-bildpunkt-range=fader][data-bildpunkt-orientation=vertical]::-webkit-slider-thumb{margin-left:-12px;margin-top:0}
.tw-control-range[data-bildpunkt-range=fader][data-bildpunkt-orientation=vertical]::-moz-range-track{width:8px;height:100%}
@media(forced-colors:active){
 .tw-control-toggle{appearance:auto;-webkit-appearance:auto}
 .tw-control-toggle::before,.tw-control-toggle::after{display:none}
 .tw-knob__face input.tw-control-rotary,.tw-knob__face input.tw-control-rotary:disabled{opacity:1;appearance:auto;-webkit-appearance:auto}
 .tw-control-knob-face:has(>.tw-control-rotary){background:none!important}
 .tw-control-knob-face>svg,.tw-control-knob-face::before,.tw-control-knob-face::after{display:none!important}
}
/* Choice labels use real native radios/checkboxes, including arrow navigation. */
.tw-control-choice{position:relative;display:flex;align-items:center;justify-content:center;gap:var(--tw-space-label-gap);min-width:0;min-height:var(--tw-touch);padding:var(--tw-space-control-padding-compact);border:1px solid transparent;background:var(--tw-recess);color:var(--tw-ink);text-align:center;cursor:pointer}
.tw-control-choice:has(>.tw-control-choice-input:checked){border-color:var(--tw-accent-light);background:var(--tw-recess-light)}
.tw-control-choice:has(>.tw-control-choice-input:focus-visible){outline:3px solid var(--tw-focus,var(--tw-accent-light));outline-offset:2px}
.tw-control-choice:has(>.tw-control-choice-input:disabled){opacity:1;cursor:not-allowed}
.tw-control-choice>.tw-control-choice-input{position:absolute;inset:0;width:100%;height:100%;opacity:0;z-index:1}
.tw-control-choice[data-bildpunkt-choice=image],.tw-control-choice[data-bildpunkt-choice=text]{flex-direction:column}
.tw-control-choice[data-bildpunkt-choice=image]>img{width:var(--tw-choice-image-size,64px);height:var(--tw-choice-image-size,64px);max-width:100%;object-fit:contain;image-rendering:pixelated}
.tw-control-choice>span{max-width:100%;line-height:1.15;overflow-wrap:anywhere}
.tw-control-choice[data-bildpunkt-choice=swatch]>span{display:flex;align-items:center;justify-content:center;min-width:var(--tw-touch);min-height:32px;padding:var(--tw-space-control-padding-compact);background:var(--tw-choice-color,var(--finish,var(--tw-recess-light)));color:#fff;text-shadow:0 1px 2px #000}
@media(forced-colors:active){.tw-control-choice:has(>.tw-control-choice-input:checked){border:2px solid Highlight}.tw-control-choice>.tw-control-choice-input{opacity:1;width:var(--tw-touch);height:var(--tw-touch)}}

/* Opaque monochrome keeps disabled surfaces independent of the parent's hue. */
.tw-control-button:disabled,.tw-control-toggle-button:disabled,.tw-control-reset:disabled{opacity:1}
.tw-control-choice:has(>.tw-control-choice-input:disabled:checked){border-color:var(--tw-accent)}
@media(forced-colors:active){
 .tw-control-choice:has(>.tw-control-choice-input:disabled){color:GrayText;border-color:GrayText}
}