/* ════════════════════════════════════════════════════════════════════════
   zCheckbox_demo.css — a ONE-OFF reskinned checkbox (opt in: zBrush [page, leaf, demo.zCheckbox_demo]).
   Shows how far a zCheckbox reskins from a class — here a plain tick becomes a
   sliding sunset toggle (_zClass: switch-check).

   SCOPING NOTE: the client puts _zClass on BOTH the <input> and its .zForm-check
   wrapper, so every selector here is `input.switch-check` — it targets only the box
   and never the row, so the row keeps its canonical flex layout (box + label inline).
   The canonical theme styles checkboxes by element type with high specificity, so the
   toggle visuals assert with !important. Bifrost-only — the terminal asks (y/n).
   ════════════════════════════════════════════════════════════════════════ */

/* the control — turn the box into a rounded track */
input.switch-check {
    appearance:     none !important;
    -webkit-appearance: none !important;
    position:       relative !important;
    display:        inline-block !important;
    flex:           0 0 auto !important;
    width:          2.7rem !important;
    height:         1.5rem !important;
    border:         none !important;
    border-radius:  999px !important;
    background:     #475569 !important;          /* off — slate track */
    box-shadow:     none !important;
    cursor:         pointer;
    transition:     background 0.25s ease, box-shadow 0.25s ease;
}

/* the sliding knob (override the canonical checkmark glyph) */
input.switch-check::after {
    content:        "" !important;
    position:       absolute !important;
    top:            50% !important;
    left:           0.2rem !important;
    transform:      translateY(-50%) !important;
    width:          1.1rem !important;
    height:         1.1rem !important;
    border:         none !important;
    border-radius:  50% !important;
    background:     #ffffff !important;
    box-shadow:     0 1px 3px rgba(2, 6, 23, 0.4);
    transition:     left 0.25s ease;
}

/* on — sunset gradient track, knob slides right, soft glow */
input.switch-check:checked {
    background:     linear-gradient(90deg, #fb7185, #f59e0b) !important;
    border-color:   transparent !important;
    box-shadow:     0 0 16px rgba(245, 158, 11, 0.5) !important;
}
input.switch-check:checked::after {
    left:           1.4rem !important;
    transform:      translateY(-50%) !important;
}

/* keyboard focus — a clear ring */
input.switch-check:focus-visible {
    outline:        none;
    box-shadow:     0 0 0 3px rgba(244, 114, 182, 0.45) !important;
}

/* locked toggle */
input.switch-check:disabled {
    opacity:        0.5;
    cursor:         not-allowed;
}