@layer components {
  /* Checkbox & radio — native, tinted to the register ink. */
  .check { display: inline-flex; align-items: center; gap: var(--space-2); cursor: pointer; }
  .check input { width: 1.05em; height: 1.05em; accent-color: var(--accent); }

  /* Toggle switch — for binary settings. */
  .switch { display: inline-flex; align-items: center; gap: var(--space-2); cursor: pointer; }
  .switch input { position: absolute; width: 1px; height: 1px; opacity: 0; }
  .switch__track {
    position: relative;
    width: 2.2rem;
    height: 1.2rem;
    background: var(--control-bg);
    border: 1px solid var(--rule-strong);
    border-radius: 999px;
    transition: background-color 120ms ease, border-color 120ms ease;
  }
  .switch__track::after {
    content: "";
    position: absolute;
    top: 1px;
    left: 1px;
    width: calc(1.2rem - 4px);
    height: calc(1.2rem - 4px);
    background: var(--surface-raised);
    border-radius: 50%;
    box-shadow: 0 1px 2px rgba(20, 18, 12, 0.2);
    transition: transform 120ms ease;
  }
  .switch input:checked + .switch__track { background: var(--accent); border-color: var(--accent); }
  .switch input:checked + .switch__track::after { transform: translateX(1rem); }
  .switch input:focus-visible + .switch__track { outline: 2px solid var(--accent); outline-offset: 2px; }
}