/* ───────────────────────────────────────────────────────────────
 * Shared toggle / switch design — canonical `.cc-switch` component
 *
 * This is the toggle used on /dashboard/characters. Use this markup
 * for any new label-style toggle:
 *
 *   <label class="cc-switch">
 *     <input type="checkbox">
 *     <span class="cc-track"><span class="cc-knob"></span></span>
 *     <span class="cc-text">Label</span>
 *   </label>
 *
 * Bootstrap `.form-switch` toggles are styled to match this design in
 * overwrite-bootstrap.css, so existing Bootstrap switches stay in sync.
 * ─────────────────────────────────────────────────────────────── */

.cc-switch { display: inline-flex; align-items: center; gap: 0.6rem; cursor: pointer; margin: 0; user-select: none; }
.cc-switch input { position: absolute; opacity: 0; width: 0; height: 0; pointer-events: none; }
.cc-track {
    position: relative; flex: 0 0 auto; display: inline-block;
    width: 44px; height: 26px; border-radius: 999px;
    background: var(--fill-mid-soft);
    border: 1px solid rgba(0, 0, 0, 0.16);
    box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.16);
    transition: background 0.22s ease, border-color 0.22s ease, box-shadow 0.22s ease;
}
.cc-knob {
    position: absolute; top: 50%; left: 3px;
    width: 20px; height: 20px; border-radius: 50%;
    background: var(--on-media-ink);
    transform: translateY(-50%);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.16), 0 0 0 0.5px rgba(0, 0, 0, 0.08);
    transition: left 0.22s cubic-bezier(0.4, 0, 0.2, 1);
}
.cc-switch:hover .cc-track { border-color: var(--line-strong); }
.cc-switch input:focus-visible + .cc-track { box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.16), 0 0 0 3px var(--focus-ring); }
.cc-switch input:checked + .cc-track {
    background: var(--status-success);
    border-color: var(--status-success);
    box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.12);
}
.cc-switch input:checked + .cc-track .cc-knob { left: calc(100% - 23px); }
.cc-text { font-size: 0.85rem; font-weight: 600; color: var(--ink); }