/*
 * Reusable iOS-style switch toggle.
 * Mirrors the visual treatment of .profile-edit-toggle / .mp-toggle so that
 * all "on/off" switches across the app render identically.
 *
 * Markup contract:
 *   <button class="ios-toggle" role="switch" aria-checked="true|false">
 *     <span class="ios-toggle-track">
 *       <span class="ios-toggle-thumb"></span>
 *     </span>
 *   </button>
 */

.ios-toggle {
    background: none;
    border: none;
    cursor: pointer;
    padding: 4px;
    min-width: 56px;
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    flex-shrink: 0;
    border-radius: 18px;
}

.ios-toggle:focus-visible {
    outline: 2px solid var(--community-primary, #3b82f6);
    outline-offset: 2px;
}

.ios-toggle[disabled],
.ios-toggle:disabled {
    cursor: not-allowed;
    opacity: 0.6;
}

.ios-toggle-track {
    width: 52px;
    height: 28px;
    border-radius: 14px;
    background: #d1d5db;
    position: relative;
    transition: background 0.2s ease;
}

.ios-toggle[aria-checked="true"] .ios-toggle-track {
    background: var(--community-primary, #3b82f6);
}

.ios-toggle-thumb {
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background: #ffffff;
    position: absolute;
    top: 2px;
    left: 2px;
    transition: transform 0.2s ease;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.15);
}

.ios-toggle[aria-checked="true"] .ios-toggle-thumb {
    transform: translateX(24px);
}

@media (prefers-reduced-motion: reduce) {
    .ios-toggle-track,
    .ios-toggle-thumb {
        transition: none;
    }
}