:root {
    --checkbox-size: 26px;
    --checkbox-radius: 10px;
    --checkbox-gap: 10px;
    --checkbox-border: #b9cfe4;
    --checkbox-surface: transparent;
    --checkbox-accent-border: #f6781d;
    --checkbox-accent-fill: #ff761b;
    --checkbox-focus: rgb(255 118 27 / 34%);
    --checkbox-shadow: 0 .2rem .4rem rgb(10 43 85 / 8%);
}

:where(.check, .choice-control, .checkbox-field) {
    display: inline-flex;
    align-items: center;
    justify-content: flex-start;
    gap: var(--checkbox-gap);
    min-height: 44px;
    margin: 0;
    color: inherit;
    line-height: 1.45;
    cursor: pointer;
    touch-action: manipulation;
}

:where(.check, .choice-control, .checkbox-field) > span { min-width: 0; line-height: inherit; }

input[type="checkbox"],
.checkbox-control,
.checkbox-proxy {
    appearance: none;
    -webkit-appearance: none;
    box-sizing: border-box;
    flex: 0 0 var(--checkbox-size) !important;
    inline-size: var(--checkbox-size) !important;
    block-size: var(--checkbox-size) !important;
    width: var(--checkbox-size) !important;
    height: var(--checkbox-size) !important;
    min-inline-size: var(--checkbox-size) !important;
    min-block-size: var(--checkbox-size) !important;
    min-width: var(--checkbox-size) !important;
    min-height: var(--checkbox-size) !important;
    max-inline-size: var(--checkbox-size) !important;
    max-block-size: var(--checkbox-size) !important;
    max-width: var(--checkbox-size) !important;
    max-height: var(--checkbox-size) !important;
    aspect-ratio: 1;
    margin: 0 !important;
    padding: 0 !important;
    border: 1.5px solid var(--checkbox-border) !important;
    border-radius: var(--checkbox-radius) !important;
    background: var(--checkbox-surface) !important;
    background-position: center !important;
    background-repeat: no-repeat !important;
    background-size: 14px 14px !important;
    box-shadow: var(--checkbox-shadow);
    vertical-align: middle;
    cursor: pointer;
    pointer-events: auto;
    transition: border-color .16s ease, background .16s ease, box-shadow .16s ease, transform .16s ease;
}

input[type="checkbox"]::before,
.checkbox-control::before,
.checkbox-proxy::before { content: none !important; display: none !important; }

.checkbox-proxy::after { content: none !important; display: none !important; }

input[type="checkbox"]:checked,
.checkbox-control:checked,
*:has(> input[type="checkbox"]:checked) > .checkbox-proxy {
    border-color: var(--checkbox-accent-border) !important;
    /* Selection is communicated by an inset brand-orange square, not a check glyph. */
    background-color: var(--checkbox-surface) !important;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='26' height='26' viewBox='0 0 26 26'%3E%3Crect x='6' y='6' width='14' height='14' rx='3' fill='%23ff761b'/%3E%3C/svg%3E") !important;
    background-size: 100% 100% !important;
    box-shadow: 0 0 0 1px rgb(255 118 27 / 10%), var(--checkbox-shadow);
}

input[type="checkbox"]:hover:not(:disabled),
.checkbox-control:hover:not(:disabled),
.checkbox-proxy:hover { border-color: var(--checkbox-accent-border) !important; box-shadow: 0 0 0 4px rgb(255 118 27 / 12%), var(--checkbox-shadow); }

input[type="checkbox"]:focus-visible,
.checkbox-control:focus-visible,
*:has(> input[type="checkbox"]:focus-visible) > .checkbox-proxy { outline: 3px solid var(--checkbox-focus) !important; outline-offset: 2px; }

input[type="checkbox"]:disabled,
.checkbox-control:disabled,
*:has(> input[type="checkbox"]:disabled) > .checkbox-proxy { opacity: .48; cursor: not-allowed; }

.checkbox-proxy__input {
    position: absolute !important;
    inline-size: 1px !important;
    block-size: 1px !important;
    min-inline-size: 1px !important;
    min-block-size: 1px !important;
    max-inline-size: 1px !important;
    max-block-size: 1px !important;
    overflow: hidden;
    clip-path: inset(50%);
}

:where(.check, .choice-control, .checkbox-field):has(input[type="checkbox"]:disabled) { cursor: not-allowed; }

html[data-theme="dark"] { --checkbox-border: #75839a; --checkbox-surface: transparent; --checkbox-shadow: 0 .2rem .45rem rgb(0 0 0 / 24%); }

@media (prefers-color-scheme: dark) { html[data-theme="system"] { --checkbox-border: #75839a; --checkbox-surface: transparent; --checkbox-shadow: 0 .2rem .45rem rgb(0 0 0 / 24%); } }

@media (forced-colors: active) {
    input[type="checkbox"], .checkbox-control { appearance: auto; forced-color-adjust: auto; }
    .checkbox-proxy { forced-color-adjust: auto; }
}