/* 06-components/_switch.css — .c-switch: a checkbox styled as a toggle. */
.c-switch { position: relative; display: inline-block; width: 2.5rem; height: 1.375rem; flex: none; }
.c-switch input { position: absolute; opacity: 0; width: 100%; height: 100%; margin: 0; cursor: pointer; inset: 0; }
.c-switch__track { position: absolute; inset: 0; background: var(--rule-strong); border-radius: var(--radius-pill); transition: background var(--dur-fast) var(--ease-out); }
.c-switch__track::before { content: ""; position: absolute; top: 3px; inset-inline-start: 3px; width: 1rem; height: 1rem; border-radius: 50%; background: var(--surface); box-shadow: var(--shadow-card); transition: translate var(--dur-fast) var(--ease-out); }
.c-switch input:checked + .c-switch__track { background: var(--accent); }
.c-switch input:checked + .c-switch__track::before { translate: 1.125rem 0; }
.c-switch input:focus-visible + .c-switch__track { outline: 2px solid var(--focus-ring); outline-offset: 2px; }
.c-switch input:disabled + .c-switch__track { opacity: 0.5; }
@media (pointer: coarse) { .c-switch input { height: var(--height-control); inset-block: calc((1.375rem - var(--height-control)) / 2); } }