/* CURRENT / ALPHA UI foundations / Selection controls (263:2240).
   Opt-in native inputs: label.alpha-control > input + span.alpha-control-body.
   Use alpha-control--chip for multiple choices, --radio for single choices.
   Keep help/error text outside the label and link it with aria-describedby.
   Focus uses outline, never a border that changes the control's geometry. */
:root {
  --alpha-control-hit-area: 44px;
  --alpha-control-indicator: 22px;
  --alpha-control-gap: 10px;
  --alpha-control-radius: 2px;
  --alpha-control-border: 1px;
  --alpha-control-focus-width: 3px;
}
label.alpha-control {
  display: block;
  position: relative;
  min-width: 0;
  margin: 0;
  color: var(--workspace-ink);
  font: 500 14px/20px Inter, sans-serif;
  cursor: pointer;
}
/* Reset shared text-input styling without changing legacy forms. This input
   stays in the accessibility tree and keeps native Space/arrow-key behavior. */
.alpha-control > input.alpha-control-input {
  position: absolute;
  width: 1px;
  height: 1px;
  min-width: 0;
  min-height: 0;
  margin: 0;
  padding: 0;
  border: 0;
  opacity: 0;
  overflow: hidden;
  clip-path: inset(50%);
  appearance: auto;
  outline: none;
  box-shadow: none;
}
.alpha-control-body {
  box-sizing: border-box;
  display: flex;
  width: 100%;
  color: inherit;
  font: inherit;
  align-items: center;
  gap: var(--alpha-control-gap);
  min-height: var(--alpha-control-hit-area);
  padding: 10px;
  border-radius: var(--alpha-control-radius);
  background: var(--foundation-sheet,var(--workspace-white));
  transition: background-color 120ms ease-out, border-color 120ms ease-out, color 120ms ease-out;
}
.alpha-control-label { min-width: 0; overflow-wrap: anywhere; }
/* A disabled fieldset must communicate the same state as a disabled input. */
.alpha-control:has(input:disabled) .alpha-control-label { color: var(--workspace-muted); }
.alpha-control-indicator {
  box-sizing: border-box;
  width: var(--alpha-control-indicator);
  height: var(--alpha-control-indicator);
  flex: 0 0 var(--alpha-control-indicator);
  border: var(--alpha-control-border) solid var(--workspace-ink);
  border-radius: var(--alpha-control-radius);
  background: var(--foundation-sheet,var(--workspace-white)) center / 100% 100% no-repeat;
  background-origin: border-box;
}
.alpha-control--radio .alpha-control-indicator { border-radius: 50%; }
.alpha-control-input:checked + .alpha-control-body .alpha-control-indicator {
  border-color: transparent;
  background-image: url('/assets/controls/checkbox-checked.svg');
}
.alpha-control--radio .alpha-control-input:checked + .alpha-control-body .alpha-control-indicator {
  background-image: url('/assets/controls/radio-checked.svg');
}
.alpha-control--chip .alpha-control-body {
  border: var(--alpha-control-border) solid var(--workspace-ink);
}
.alpha-control--chip .alpha-control-indicator {
  width: 16px;
  height: 20px;
  flex-basis: 16px;
  border: 0;
  border-radius: 0;
  background: transparent center / 100% 100% no-repeat;
}
.alpha-control--chip .alpha-control-input:checked + .alpha-control-body {
  background: var(--workspace-lilac);
}
.alpha-control--chip .alpha-control-input:checked + .alpha-control-body .alpha-control-indicator {
  background-image: url('/assets/controls/choice-mark.svg');
}
@media (hover: hover) {
  .alpha-control:hover > .alpha-control-input:not(:disabled) + .alpha-control-body { background-color: var(--workspace-field); }
}
.alpha-control:active > .alpha-control-input:not(:disabled) + .alpha-control-body { background-color: var(--workspace-lilac); }
.alpha-control-input:focus-visible + .alpha-control-body {
  outline: var(--alpha-control-focus-width) solid var(--workspace-focus);
  outline-offset: 4px;
}
.alpha-control:has(.alpha-control-input:disabled) { cursor: not-allowed; }
.alpha-control .alpha-control-input:disabled + .alpha-control-body {
  color: var(--workspace-muted);
  background-color: var(--workspace-paper);
  border-color: var(--workspace-muted);
}
.alpha-control-input:disabled + .alpha-control-body .alpha-control-indicator {
  border-color: var(--workspace-muted);
  background-color: var(--workspace-paper);
}
.alpha-control-input:checked:disabled + .alpha-control-body .alpha-control-indicator {
  border-color: transparent;
  background-image: url('/assets/controls/checkbox-disabled.svg');
}
.alpha-control--radio .alpha-control-input:checked:disabled + .alpha-control-body .alpha-control-indicator { background-image: url('/assets/controls/radio-disabled.svg'); }
.alpha-control--chip .alpha-control-input:checked:disabled + .alpha-control-body .alpha-control-indicator { background-image: url('/assets/controls/choice-mark-disabled.svg'); }
.alpha-control--chip .alpha-control-input:disabled + .alpha-control-body .alpha-control-indicator { background-color: transparent; }
.alpha-control-error:not([hidden]) {
  display: block;
  margin: 8px 0 0;
  padding: 4px 8px;
  background: var(--workspace-coral);
  color: var(--workspace-ink);
  font: 400 12px/18px Inter, sans-serif;
}
@media (prefers-reduced-motion: reduce) { .alpha-control-body { transition: none; } }
html[data-reduce-motion="true"] .alpha-control-body { transition: none; }
/* Existing immediate preference switches keep their familiar track and thumb.
   The enclosing label supplies the 44px target; forms use the controls above. */
label:has(.alpha-switch) { min-height: var(--alpha-control-hit-area); cursor: pointer; }
.switch.alpha-switch .switch-slider { background: var(--workspace-paper); border-color: var(--workspace-ink); transition: background-color 120ms ease-out, border-color 120ms ease-out; }
.switch.alpha-switch .switch-slider::before { background: var(--workspace-ink); transition: transform 120ms ease-out, background-color 120ms ease-out; }
.switch.alpha-switch input:checked + .switch-slider { background: var(--workspace-ink); border-color: var(--workspace-ink); }
.switch.alpha-switch input:checked + .switch-slider::before { background: var(--workspace-white); }
.switch.alpha-switch input:focus-visible + .switch-slider { outline: var(--alpha-control-focus-width) solid var(--workspace-focus); outline-offset: 4px; box-shadow: none; }
.switch.alpha-switch input:disabled + .switch-slider { border-color: var(--workspace-muted); background: var(--workspace-paper); }
.switch.alpha-switch input:disabled + .switch-slider::before { background: var(--workspace-muted); }
label:has(.alpha-switch input:disabled) { cursor: not-allowed; }
@media (prefers-reduced-motion: reduce) { .switch.alpha-switch .switch-slider, .switch.alpha-switch .switch-slider::before { transition: none; } }
html[data-reduce-motion="true"] .switch.alpha-switch .switch-slider,
html[data-reduce-motion="true"] .switch.alpha-switch .switch-slider::before { transition: none; }
@media (forced-colors: active) {
  /* Let the OS draw the native selected/disabled marks in high contrast. */
  label.alpha-control { display: flex; align-items: center; }
  .alpha-control > input.alpha-control-input {
    position: static;
    width: var(--alpha-control-indicator);
    height: var(--alpha-control-indicator);
    flex: 0 0 var(--alpha-control-indicator);
    margin-left: 10px;
    opacity: 1;
    clip-path: none;
    accent-color: auto;
  }
  .alpha-control-body { flex: 1; background: Canvas; color: CanvasText; }
  .alpha-control-indicator { display: none; }
  .alpha-control:has(:focus-visible) { outline: 3px solid Highlight; outline-offset: 4px; }
  .alpha-control-input:focus-visible + .alpha-control-body { outline: none; }
  .alpha-control-input:checked + .alpha-control-body { border-color: Highlight; }
  .alpha-control-input:disabled + .alpha-control-body { color: GrayText; }
  .switch.alpha-switch .switch-slider { forced-color-adjust: none; background: Canvas; border-color: CanvasText; }
  .switch.alpha-switch .switch-slider::before { background: CanvasText; }
  .switch.alpha-switch input:checked + .switch-slider { background: Highlight; border-color: Highlight; }
  .switch.alpha-switch input:checked + .switch-slider::before { background: HighlightText; }
  .switch.alpha-switch input:disabled + .switch-slider { background: Canvas; border-color: GrayText; }
  .switch.alpha-switch input:disabled + .switch-slider::before { background: GrayText; }
}