/* Forms: inputs, selects, radios, switch, segmented unit toggle (08 §7.2). */
.field { display: grid; gap: var(--space-2); }
.field__label { font-size: var(--text-small); font-weight: 600; }
.field__hint { font-size: var(--text-small); color: var(--color-text-muted); }

.input, .select {
  min-height: var(--tap-min); width: 100%; padding: 0 var(--space-3);
  background: var(--color-bg); color: var(--color-text);
  border: 1px solid var(--color-border-strong); border-radius: var(--radius-md);
}
.input:focus-visible, .select:focus-visible { outline-offset: 0; }
.input--num { font-variant-numeric: tabular-nums; }
.input-group { display: flex; gap: var(--space-2); }
.input-group > .input { flex: 1 1 auto; min-width: 0; }
.input-group > .select { flex: 0 0 auto; width: auto; }

.choice { display: flex; align-items: center; gap: var(--space-3); min-height: var(--tap-min); cursor: pointer; }
.choice input { width: 20px; height: 20px; margin: 0; accent-color: var(--color-primary); flex: none; }

/* Switch: <label class="switch"><input type="checkbox" role="switch"><span class="switch__track"></span> text</label> */
.switch { display: inline-flex; align-items: center; gap: var(--space-3); min-height: var(--tap-min); cursor: pointer; }
.switch input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.switch__track {
  position: relative; width: var(--switch-w); height: var(--switch-h); flex: none;
  border: 1px solid var(--color-border-strong); border-radius: var(--radius-pill); background: var(--color-bg);
  transition: background-color var(--dur-fast) var(--ease);
}
.switch__track::after {
  content: ""; position: absolute; top: 3px; left: 3px; width: var(--switch-knob); height: var(--switch-knob);
  border-radius: 50%; background: var(--color-text-muted); transition: transform var(--dur-fast) var(--ease);
}
.switch input:checked + .switch__track { background: var(--color-primary); border-color: var(--color-primary); }
.switch input:checked + .switch__track::after { transform: translateX(calc(var(--switch-w) - var(--switch-knob) - 8px)); background: var(--color-on-primary); }
.switch input:focus-visible + .switch__track { outline: var(--focus-width) solid var(--color-primary); outline-offset: 2px; }

/* Segmented control (unit toggle Mbps | MB/s) — role="radiogroup" with radio inputs */
.segmented { display: inline-flex; padding: 2px; border: 1px solid var(--color-border-strong); border-radius: var(--radius-pill); }
.segmented label { position: relative; }
.segmented input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.segmented span {
  display: inline-flex; align-items: center; min-height: var(--control-h-sm); padding: 0 var(--space-3);
  border-radius: var(--radius-pill); font-size: var(--text-small); font-weight: 600; color: var(--color-text-muted);
}
.segmented input:checked + span { background: var(--color-primary); color: var(--color-on-primary); }
.segmented input:focus-visible + span { outline: var(--focus-width) solid var(--color-primary); outline-offset: 2px; }