/* =====================================================
   Toggle switch — app\widgets\ToggleSwitch

   A track and a knob, so the control reads as pressable while sitting still.
   Geometry arrives as custom properties on `.tgl-wrap`, written into an inline
   style by the widget from its size preset.

   A media query cannot redefine one of those: an inline custom property beats any
   rule on the same element. So the phone variant at the bottom re-declares `width`
   itself, reading the `--tgl-w-sm` the widget emits alongside the base value.
   Overriding the property rather than the variable is what makes it work without
   `!important`.

   Colour comes from the :root tokens through the widget's defaults — the labels
   are text ON the track and need 4.5:1 against it, which is stricter than the
   3:1 the track itself owes the page.
   ===================================================== */

.tgl-wrap {
    display: inline-block;
    vertical-align: middle;
    line-height: 1;
}

.tgl-input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

.tgl-track {
    position: relative;
    display: block;
    width: var(--tgl-w);
    height: var(--tgl-h);
    background: var(--tgl-off);
    border-radius: var(--tgl-r);
    cursor: pointer;
    transition: background .25s cubic-bezier(.4, 0, .2, 1), box-shadow .25s ease;
    box-shadow: inset 0 1px 3px rgba(0, 0, 0, .18);
    overflow: hidden;
    user-select: none;
}

.tgl-track:hover {
    box-shadow: inset 0 1px 3px rgba(0, 0, 0, .18), 0 0 0 3px rgba(0, 0, 0, .06);
}

.tgl-label {
    position: absolute;
    top: 0;
    height: 100%;
    display: flex;
    align-items: center;
    font-size: var(--tgl-font);
    font-weight: 700;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: var(--white);
    pointer-events: none;
    transition: opacity .2s ease;
    font-family: var(--font-family);
}

.tgl-on {
    left: var(--tgl-lpl);
    opacity: 0;
}

.tgl-off {
    right: var(--tgl-lpr);
    opacity: 1;
}

/* The short label only exists on a responsive toggle, and only shows at phone width. */
.tgl-label-short {
    display: none;
}

.tgl-knob {
    position: absolute;
    top: var(--tgl-offset);
    left: var(--tgl-offset);
    width: var(--tgl-knob);
    height: var(--tgl-knob);
    background: var(--tgl-knob-color);
    border-radius: var(--tgl-r);
    transition: left .25s cubic-bezier(.4, 0, .2, 1), box-shadow .25s ease;
    box-shadow: 0 1px 3px rgba(0, 0, 0, .25), 0 1px 1px rgba(0, 0, 0, .15);
}

.tgl-track:active .tgl-knob {
    box-shadow: 0 1px 3px rgba(0, 0, 0, .3), 0 0 0 4px rgba(0, 0, 0, .06);
}

.tgl-input:checked + .tgl-track {
    background: var(--tgl-on);
    box-shadow: inset 0 1px 3px rgba(0, 0, 0, .12);
}

.tgl-input:checked + .tgl-track:hover {
    box-shadow: inset 0 1px 3px rgba(0, 0, 0, .12), 0 0 0 3px rgba(0, 0, 0, .06);
}

/* Parked from the track's OWN width, so the narrow variant needs no second travel
   value and no rule of its own — and the position survives a resize across the
   breakpoint, which a `transform` reading a swapped custom property did not. */
.tgl-input:checked + .tgl-track .tgl-knob {
    left: calc(100% - var(--tgl-knob) - var(--tgl-offset));
}

.tgl-input:checked + .tgl-track .tgl-on {
    opacity: 1;
}

.tgl-input:checked + .tgl-track .tgl-off {
    opacity: 0;
}

.tgl-input:focus-visible + .tgl-track {
    outline: 2px solid var(--primary);
    outline-offset: 2px;
}

.tgl-disabled {
    opacity: .5;
    pointer-events: none;
}

/* --- phone --------------------------------------------------------------- */

@media (max-width: 480px) { /* phone chrome only, matching app.css:1058 — the header this
                               variant exists for has already given up its padding by here */
    /* Re-declares `width`, rather than swapping the `--tgl-w` it reads: that one is inline
       on the wrapper, and an inline custom property beats any rule redefining it. `width`
       is never inline, so an ordinary selector wins it. */
    .tgl-wrap--sm .tgl-track {
        width: var(--tgl-w-sm, var(--tgl-w));
    }

    .tgl-wrap--sm .tgl-label-full {
        display: none;
    }

    .tgl-wrap--sm .tgl-label-short {
        display: inline;
    }
}