/* ============================================================
   Form-control utilities — global, NOT scoped.

   Why a separate stylesheet (not *.razor.css)?
     Same rationale as reader-panels.css and comments.css:
     these utilities are shared by multiple components
     (TopHeader's AI-filter popover and Pages/Profile/AiContent.razor
     today; future toggles will reuse them) and Blazor's scoped CSS
     attribute only attaches to elements inside the matching .razor
     file, so a scoped definition would silently fail to style
     consumers in other components.
   ============================================================ */

/* ── Toggle switch (.os-toggle) ──────────────────────────────────────── */

.os-toggle {
    position: relative;
    display: inline-flex;
    align-items: center;
    flex-shrink: 0;
}

.os-toggle input[type="checkbox"] {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
}

.os-toggle__track {
    display: block;
    width: 40px;
    height: 22px;
    border-radius: 11px;
    background: var(--os-border);
    transition: background-color var(--os-transition-fast);
    cursor: pointer;
}

.os-toggle__track::after {
    content: "";
    position: absolute;
    top: 3px;
    left: 3px;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: white;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25);
    transition: transform var(--os-transition-fast);
}

.os-toggle input:checked + .os-toggle__track {
    background: var(--os-primary);
}

.os-toggle input:checked + .os-toggle__track::after {
    transform: translateX(18px);
}

.os-toggle input:focus-visible + .os-toggle__track {
    outline: 2px solid var(--os-primary);
    outline-offset: 2px;
}