/* ==========================================================================
   ACA forms stylesheet
   The one form language of every surface; each section's markup contract is
   in .claude/docs/tech_stack.md ("css/aca-forms.css - the form language").
   Loaded by printCSSHeader() after css/aca-base.css, before css/aca-shell.css;
   depends on css/aca-tokens.css.
   Breakpoints: 991px (layout) and 576px (font-size) only.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Form standard
   -------------------------------------------------------------------------- */

.aca-form__grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr));
    gap: var(--aca-space-3) var(--aca-space-4);
}

/* A form's button right under its fields stands off them by the grid's own row gap. */
.aca-form__grid + .btn {
    margin-top: var(--aca-space-3);
}

.aca-form__field {
    display: flex;
    flex-direction: column;
    gap: var(--aca-space-1);
    min-width: 0;
}

.aca-form__field--full {
    grid-column: 1 / -1;
}

.aca-form__label {
    margin: 0;
    font-size: var(--aca-text-sm);
    font-weight: 600;
    color: var(--aca-fg);
}

.aca-form__label--required::after {
    content: " *";
    color: var(--aca-danger);
}

.aca-form__hint {
    font-size: var(--aca-text-xs);
    color: var(--aca-fg-muted);
}

.aca-form__section {
    grid-column: 1 / -1;
    margin-top: var(--aca-space-2);
    padding-top: var(--aca-space-3);
    border-top: 1px solid var(--aca-line);
    font-size: var(--aca-text-xs);
    font-weight: 600;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: var(--aca-muted);
}

/* A fieldset's UA min-width: min-content overflows a grid cell, and Chrome's
   UA legend is floated. */
.aca-form fieldset {
    min-width: 0;
    margin: 0;
    padding: 0;
    border: 0;
}

.aca-form legend {
    float: none;
    width: auto;
    margin: 0;
    padding: 0;
    font-size: inherit;
}

.aca-form .form-control {
    min-height: 38px;
}

/* --------------------------------------------------------------------------
   2. The one error look (.is-invalid + .invalid-feedback)
   -------------------------------------------------------------------------- */

.form-control.is-invalid,
.custom-select.is-invalid,
.aca-form .form-control.is-invalid,
.aca-form .custom-select.is-invalid {
    border-color: var(--aca-danger);
}

.form-control.is-invalid:focus,
.custom-select.is-invalid:focus,
.aca-form .form-control.is-invalid:focus,
.aca-form .custom-select.is-invalid:focus {
    border-color: var(--aca-danger);
    box-shadow: 0 0 0 3px var(--aca-danger-line);
}

.custom-control-input.is-invalid ~ .custom-control-label {
    color: var(--aca-danger);
}

.invalid-feedback {
    margin: var(--aca-space-1) 0 0;
    font-size: var(--aca-text-xs);
    font-weight: 400;
    color: var(--aca-danger);
}

.aca-password.is-invalid ~ .invalid-feedback,
.aca-option.is-invalid ~ .invalid-feedback,
.aca-dob.is-invalid ~ .invalid-feedback,
.aca-subject-toggle.is-invalid ~ .invalid-feedback,
.aca-option-list.is-invalid ~ .invalid-feedback {
    display: block;
}

/* --------------------------------------------------------------------------
   3. The join stepper (.aca-stepper, familyJoinStepperHtml())
   -------------------------------------------------------------------------- */

.aca-stepper--lg {
    margin-bottom: var(--aca-space-4);
}

.aca-stepper--sm,
.aca-stepper__now > .aca-status {
    max-width: 100%;
    white-space: normal;
}

/* The sm pill among a band's facts (the office family screen) takes the band pills' size and spacing. */
.family-hero__facts .aca-stepper--sm {
    min-height: 36px;
    margin: var(--aca-space-2) var(--aca-space-2) 0 0;
    padding: var(--aca-space-1) var(--aca-space-3);
    font-weight: 600;
}

.aca-stepper__step {
    display: inline-flex;
    align-items: center;
}

.aca-stepper--lg .aca-stepper__step > .aca-status {
    min-height: 2rem;
}

/* The inactive tone's grey is a cancelled row's; a step still to do stays readable. */
.aca-stepper__step[data-state="todo"] > .aca-status {
    color: var(--aca-muted-strong);
}

.aca-stepper__step.is-current > .aca-status,
.aca-stepper__step[aria-current="step"] > .aca-status {
    box-shadow: 0 0 0 2px var(--aca-orange);
}

.aca-stepper__step.is-current .aca-stepper__label,
.aca-stepper__step[aria-current="step"] .aca-stepper__label {
    font-weight: 700;
}

/* The rule between two steps of the journey bar turns green once the step before it is done. */
.aca-stepper--lg .aca-stepper__step + .aca-stepper__step::before {
    content: "";
    flex: 0 0 auto;
    width: var(--aca-space-4);
    height: 2px;
    margin-right: var(--aca-space-2);
    border-radius: var(--aca-radius-pill);
    background: var(--aca-fg-line);
}

.aca-stepper--lg .aca-stepper__step.is-done + .aca-stepper__step::before,
.aca-stepper--lg .aca-stepper__step[data-state="done"] + .aca-stepper__step::before {
    background: var(--aca-fg-green);
}

.aca-stepper__dot {
    display: inline-flex;
    flex: 0 0 auto;
    align-items: center;
    justify-content: center;
    min-width: 1.5rem;
    height: 1.5rem;
    padding: 0 var(--aca-space-1);
    border: 1px solid var(--aca-line-strong);
    border-radius: var(--aca-radius-pill);
    background: var(--aca-surface);
    color: var(--aca-muted-strong);
    font-size: var(--aca-text-xs);
    font-weight: 700;
    line-height: 1;
}

.aca-stepper__step.is-current .aca-stepper__dot,
.aca-stepper__step[data-state="current"] .aca-stepper__dot {
    border-color: var(--aca-orange-strong);
    background: var(--aca-orange-strong);
    color: var(--aca-on-brand);
}

/* --------------------------------------------------------------------------
   4. The action bar (.aca-actionbar)
   -------------------------------------------------------------------------- */

.aca-actionbar {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    flex-wrap: wrap;
    gap: var(--aca-space-3);
    margin: var(--aca-space-4) 0;
    padding: var(--aca-space-3) var(--aca-space-4);
    border: 1px solid var(--aca-line);
    border-radius: var(--aca-radius);
    background: var(--aca-surface-2);
    box-shadow: var(--aca-shadow-sm);
}

.aca-actionbar__back {
    margin-right: auto;
}

@media (max-width: 991px) {
    .aca-actionbar {
        position: sticky;
        bottom: 0;
        z-index: 1;
        gap: var(--aca-space-2);
        margin-bottom: 0;
        padding: var(--aca-space-3);
        padding-bottom: calc(var(--aca-space-3) + env(safe-area-inset-bottom, 0px));
        box-shadow: var(--aca-shadow-up);
    }

    body.aca-has-tabbar .aca-actionbar {
        padding-bottom: var(--aca-space-3);
    }

    .aca-actionbar .btn {
        min-height: 44px;
    }

    .aca-actionbar .btn-primary {
        flex: 1 1 auto;
    }
}

/* --------------------------------------------------------------------------
   5. Option cards and yes / no pairs (.aca-option, .aca-option--pair)
   -------------------------------------------------------------------------- */

.aca-option {
    position: relative;
    display: block;
    margin: 0 0 var(--aca-space-2);
    cursor: pointer;
}

.aca-option__input {
    position: absolute;
    top: 0;
    left: 0;
    width: 1px;
    height: 1px;
    margin: 0;
    opacity: 0;
}

.aca-option__text {
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: center;
    min-height: 44px;
    padding: var(--aca-space-3) var(--aca-space-3) var(--aca-space-3) calc(var(--aca-space-3) * 2 + var(--aca-tick));
    border: 1px solid var(--aca-line-strong);
    border-radius: var(--aca-radius-sm);
    background: var(--aca-surface);
    color: var(--aca-fg);
    font-weight: 400;
    line-height: 1.4;
    transition: background-color var(--aca-transition), border-color var(--aca-transition), box-shadow var(--aca-transition);
}

.aca-option__text::before {
    content: "";
    position: absolute;
    top: calc(var(--aca-space-3) + 1px);
    left: var(--aca-space-3);
    width: var(--aca-tick);
    height: var(--aca-tick);
    border: 2px solid var(--aca-muted);
    border-radius: var(--aca-radius-sm);
    background: var(--aca-surface);
}

.aca-option__input[type="radio"] + .aca-option__text::before {
    border-radius: var(--aca-radius-pill);
}

.aca-option__title {
    font-weight: 600;
}

.aca-option__hint {
    color: var(--aca-fg-muted-strong);
}

.aca-option:hover .aca-option__text,
.aca-option__choice:hover .aca-option__text,
.aca-option__input:focus-visible + .aca-option__text {
    border-color: var(--aca-orange);
}

.aca-option__input:focus-visible + .aca-option__text {
    box-shadow: var(--aca-focus);
}

.aca-option__input:checked + .aca-option__text {
    border-color: var(--aca-orange);
    background: var(--aca-orange-soft);
}

.aca-option__input:checked + .aca-option__text::before {
    border-color: var(--aca-orange-strong);
    background: var(--aca-orange-strong);
}

/* The tick: an L of two borders turned 45 degrees inside the filled box. */
.aca-option__input:checked + .aca-option__text::after {
    content: "";
    position: absolute;
    top: calc(var(--aca-space-3) + 5px);
    left: calc(var(--aca-space-3) + 7px);
    width: 6px;
    height: 11px;
    border: solid var(--aca-on-brand);
    border-width: 0 2px 2px 0;
    transform: rotate(45deg);
}

.aca-option__input[type="radio"]:checked + .aca-option__text::after {
    top: calc(var(--aca-space-3) + 7px);
    left: calc(var(--aca-space-3) + 6px);
    width: 8px;
    height: 8px;
    border: 0;
    border-radius: var(--aca-radius-pill);
    background: var(--aca-on-brand);
    transform: none;
}

.aca-option__input:disabled + .aca-option__text {
    cursor: not-allowed;
    opacity: .6;
}

.aca-option.is-invalid .aca-option__text,
.aca-option__input.is-invalid + .aca-option__text {
    border-color: var(--aca-danger);
}

.aca-option--pair {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--aca-space-2);
    max-width: 20rem;
    margin: 0;
    cursor: auto;
}

.aca-option__choice {
    position: relative;
    display: block;
    margin: 0;
    cursor: pointer;
}

.aca-option--pair .aca-option__text {
    align-items: center;
    padding: var(--aca-space-2) var(--aca-space-3);
    font-weight: 600;
    text-align: center;
}

.aca-option--pair .aca-option__text::before,
.aca-option--pair .aca-option__input:checked + .aca-option__text::after {
    content: none;
}

.aca-option--pair .aca-option__input:checked + .aca-option__text {
    border-color: var(--aca-orange-strong);
    background: var(--aca-orange-strong);
    color: var(--aca-on-brand);
}

/* --------------------------------------------------------------------------
   6. The person card (.aca-card--person, FamilyPersonCardRenderFunctions.php)
   -------------------------------------------------------------------------- */

.aca-card--person > .aca-card__body > * + * {
    margin-top: var(--aca-space-4);
}

.aca-card--person.is-folded > .aca-card__body,
.aca-card--person.is-folded > .aca-card__footer {
    display: none;
}

.aca-card--person.is-folded > .aca-card__header {
    border-radius: calc(var(--aca-radius) - 1px);
}

/* --------------------------------------------------------------------------
   7. The password group (.aca-password, acaFormPasswordInput())
   -------------------------------------------------------------------------- */

.aca-password {
    display: flex;
    align-items: stretch;
    min-width: 0;
}

.aca-password > .form-control {
    flex: 1 1 auto;
    min-width: 0;
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
}

.aca-password__toggle {
    flex: 0 0 auto;
    min-width: 4.5rem;
    margin-left: -1px;
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
}

.aca-password > .form-control:focus,
.aca-password__toggle:focus-visible {
    position: relative;
    z-index: 1;
}

.aca-password.is-invalid > .form-control,
.aca-password.is-invalid > .aca-password__toggle {
    border-color: var(--aca-danger);
}

/* --------------------------------------------------------------------------
   8. The date of birth (.aca-dob, familyFieldBirthdateHtml(), D5)
   -------------------------------------------------------------------------- */

.aca-dob__boxes {
    display: grid;
    grid-template-columns: minmax(0, 2fr) minmax(0, 1fr) minmax(0, 1.4fr);
    gap: var(--aca-space-2);
    max-width: 24rem;
}

.aca-dob__box {
    display: flex;
    flex-direction: column;
    min-width: 0;
    margin: 0;
}

.aca-dob__caption {
    margin-bottom: var(--aca-space-1);
    color: var(--aca-fg-muted);
    font-weight: 400;
}

.aca-dob__readback {
    margin: var(--aca-space-1) 0 0;
    color: var(--aca-fg-muted-strong);
}

.aca-dob__readback:empty {
    display: none;
}

.aca-dob__readback.is-warning {
    color: var(--aca-warning);
    font-weight: 600;
}

.aca-dob.is-invalid .form-control,
.aca-dob.is-invalid .custom-select {
    border-color: var(--aca-danger);
}

/* --------------------------------------------------------------------------
   9. The choice chip (.aca-chip--choice, familyFieldNameChipsHtml())
   -------------------------------------------------------------------------- */

.aca-chip--choice {
    margin: var(--aca-space-1) var(--aca-space-2) 0 0;
}

.aca-chip--choice[aria-pressed="true"] {
    background: var(--aca-ghost-active-bg);
    border-color: var(--aca-ghost-active-line);
    color: var(--aca-ghost-active-fg);
}

@media (max-width: 991px) {
    .aca-chip--choice {
        min-height: 44px;
    }
}

/* --------------------------------------------------------------------------
   10. The subject toggles (.aca-subject-toggle, familyFieldSubjectsHtml())
   -------------------------------------------------------------------------- */

.aca-subject-toggle {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(5.5rem, 1fr));
    gap: var(--aca-space-2);
    max-width: 40rem;
}

.aca-subject-toggle__choice {
    margin: 0;
}

/* The box moves into the card's corner and the picture starts under it. */
.aca-subject-toggle .aca-option__text {
    align-items: center;
    justify-content: flex-start;
    height: 100%;
    padding: calc(var(--aca-space-2) + var(--aca-tick)) var(--aca-space-3) var(--aca-space-3);
    text-align: center;
}

.aca-subject-toggle .aca-option__text::before {
    top: var(--aca-space-2);
    left: var(--aca-space-2);
}

.aca-subject-toggle .aca-option__input:checked + .aca-option__text::after {
    top: calc(var(--aca-space-2) + 4px);
    left: calc(var(--aca-space-2) + 7px);
}

.aca-subject-toggle .family-subject__img,
.aca-subject-toggle .family-subject__icon {
    width: 2.5rem;
    height: 2.5rem;
    margin: 0 0 var(--aca-space-2);
    border-radius: var(--aca-radius-pill);
    object-fit: contain;
}

.aca-subject-toggle .family-subject__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.aca-subject-toggle.is-invalid .aca-option__text {
    border-color: var(--aca-danger);
}

/* --------------------------------------------------------------------------
   11. The card blocks (.aca-form__stack / __reveal / __chips / __more, .aca-option-list)
   -------------------------------------------------------------------------- */

/* Each pair names .aca-form too, to out-rank the fieldset reset of section 1. */
.aca-form__stack > * + *,
.aca-form .aca-form__stack > * + * {
    margin-top: var(--aca-space-5);
}

.aca-form__reveal > * + *,
.aca-form .aca-form__reveal > * + * {
    margin-top: var(--aca-space-4);
}

.aca-form__reveal,
.aca-form .aca-form__stack > .aca-form__reveal {
    margin-top: var(--aca-space-3);
}

.aca-form__reveal {
    padding-left: var(--aca-space-3);
    border-left: 3px solid var(--aca-line-strong);
}

/* In a field grid a reveal takes the whole row under the field it answers. */
.aca-form__grid > .aca-form__reveal {
    grid-column: 1 / -1;
    margin-top: 0;
}

/* The one-tap name chips (section 9) under their box, wrapping on a phone. */
.aca-form__chips {
    display: flex;
    flex-wrap: wrap;
}

.aca-chip--choice:disabled,
.aca-chip--choice:disabled:hover {
    border-color: var(--aca-ghost-line);
    color: var(--aca-ghost-fg);
    opacity: .6;
    cursor: not-allowed;
}

.aca-option-list {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr));
    gap: var(--aca-space-2);
}

.aca-option-list > .aca-option {
    margin: 0;
}

.aca-option-list.is-invalid .aca-option__text {
    border-color: var(--aca-danger);
}

.aca-form__more > .aca-form__more-toggle {
    display: flex;
    align-items: center;
    min-height: 44px;
    color: var(--aca-fg-link);
    font-weight: 600;
    list-style: none;
    cursor: pointer;
}

.aca-form__more > .aca-form__more-toggle::-webkit-details-marker {
    display: none;
}

/* The disclosure chevron (a flex summary loses its marker): right when folded, down when open. */
.aca-form__more > .aca-form__more-toggle::before {
    content: "";
    flex: 0 0 auto;
    width: .5rem;
    height: .5rem;
    margin: 0 var(--aca-space-3) 0 var(--aca-space-1);
    border: solid currentColor;
    border-width: 0 2px 2px 0;
    transform: rotate(-45deg);
    transition: transform var(--aca-transition);
}

.aca-form__more[open] > .aca-form__more-toggle::before {
    transform: rotate(45deg);
}

.aca-form__more > .aca-form__more-toggle:hover {
    color: var(--aca-fg-link-hover);
}

.aca-form__more > .aca-form__more-toggle:focus-visible {
    border-radius: var(--aca-radius-sm);
    outline: none;
    box-shadow: var(--aca-focus);
}

.aca-form__more > .aca-form__grid {
    margin-top: var(--aca-space-2);
}

@media (max-width: 991px) {
    .aca-card[data-family-card] .form-control {
        min-height: 44px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .aca-form__more > .aca-form__more-toggle::before {
        transition: none;
    }
}

/* --------------------------------------------------------------------------
   12. Tick boxes (.custom-checkbox, .custom-radio, the native checkbox)
   ONE box everywhere: --aca-tick square, a visible --aca-muted edge on the
   card's parchment, --aca-orange-strong with a white tick once ticked, and a
   light ring on a dark band (--aca-tick-ring, the surface registry's). Every
   state Bootstrap 4.1.3 paints blue is redrawn here at Bootstrap's own
   specificity, so this sheet wins on order alone. The box sits on the label's
   first line; a label holding nothing but an .aca-sr-only sentence is a box
   with no visible words, and that label becomes a 44px square target whose
   extra width reaches back over the row's text, never over the next control.
   The store's payment radios (#paymentMethodForm, tuition_flow.css) keep their
   own green under their id, and the attendance segments are radios, not boxes.
   -------------------------------------------------------------------------- */

.custom-control {
    padding-left: calc(var(--aca-tick) + var(--aca-space-2));
}

.custom-control-label {
    min-height: 1.5rem;
    vertical-align: top;
}

.custom-control-label::before,
.custom-control-label::after {
    top: calc((1.5em - var(--aca-tick)) / 2);
    left: calc(-1 * (var(--aca-tick) + var(--aca-space-2)));
    width: var(--aca-tick);
    height: var(--aca-tick);
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
}

.custom-control-label::before {
    border: 2px solid var(--aca-muted);
    background-color: var(--aca-surface);
    box-shadow: 0 0 0 2px var(--aca-tick-ring);
}

.custom-checkbox .custom-control-label::before {
    border-radius: var(--aca-radius-sm);
}

.custom-checkbox .custom-control-label::after {
    background-size: 100% 100%;
}

.custom-control-input:focus ~ .custom-control-label::before {
    box-shadow: 0 0 0 2px var(--aca-tick-ring);
}

.custom-control-input:focus-visible ~ .custom-control-label::before {
    box-shadow: 0 0 0 2px var(--aca-tick-ring), var(--aca-focus);
}

.custom-control-input:active ~ .custom-control-label::before {
    border-color: var(--aca-orange);
    background-color: var(--aca-orange-soft);
}

.custom-control-input.is-invalid ~ .custom-control-label::before {
    border-color: var(--aca-danger);
    background-color: var(--aca-danger-soft);
}

.custom-control-input:disabled ~ .custom-control-label::before {
    border-color: var(--aca-line-strong);
    background-color: var(--aca-surface-2);
}

.custom-control-input:checked ~ .custom-control-label::before,
.custom-checkbox .custom-control-input:checked ~ .custom-control-label::before,
.custom-checkbox .custom-control-input:indeterminate ~ .custom-control-label::before,
.custom-radio .custom-control-input:checked ~ .custom-control-label::before {
    border-color: var(--aca-orange-strong);
    background-color: var(--aca-orange-strong);
}

.custom-checkbox .custom-control-input:checked ~ .custom-control-label::after {
    background-image: var(--aca-tick-mark);
}

.custom-checkbox .custom-control-input:indeterminate ~ .custom-control-label::after {
    background-image: var(--aca-tick-dash);
}

.custom-checkbox .custom-control-input:disabled:checked ~ .custom-control-label::before,
.custom-checkbox .custom-control-input:disabled:indeterminate ~ .custom-control-label::before,
.custom-radio .custom-control-input:disabled:checked ~ .custom-control-label::before {
    border-color: var(--aca-orange-strong);
    background-color: var(--aca-orange-strong);
    opacity: .6;
}

.custom-control-input:disabled:checked ~ .custom-control-label::after,
.custom-control-input:disabled:indeterminate ~ .custom-control-label::after {
    opacity: .6;
}

/* A box with no visible words: the label is the 44px target, the box at its
   right-hand end, so the control still takes only the box's width in a row. */
.custom-control:has(> .custom-control-label > .aca-sr-only:only-child) {
    padding-left: 0;
}

.custom-control-label:has(> .aca-sr-only:only-child) {
    display: block;
    width: 44px;
    height: 44px;
    margin-left: calc(var(--aca-tick) - 44px);
}

.custom-control-label:has(> .aca-sr-only:only-child)::before,
.custom-control-label:has(> .aca-sr-only:only-child)::after {
    top: calc((44px - var(--aca-tick)) / 2);
    left: calc(44px - var(--aca-tick));
}

/* The native box (the table select columns, the dialogs' lists, the reminder
   cards, the parent's "I have reviewed"), drawn the same. input:where() weighs
   no more than Bootstrap's reboot, so a page sheet's rule for its own box still
   applies; the hidden inputs a custom control or an option card draws over, and
   the phone's More-sheet toggle, are not boxes and are left out. What is drawn
   is the padding box - the edge an inset line, the ring an outline - so a
   transparent border --aca-tick-reach wide can grow the element's target while
   the box, and the slot the negative margins leave it, stay --aca-tick. The
   even margins make that slot one 1.5em line tall, so the box sits centred on a
   line of text and on a flex or grid row alike - including a table's select
   cell, where this takes over from aca-base.css section 9's 13px-box rule. */
input:where([type="checkbox"]:not(.custom-control-input):not(.aca-option__input):not(.aca-sr-only):not(.aca-tabbar__more-toggle)) {
    --aca-tick-reach: 0px;
    --aca-tick-edge: var(--aca-muted);
    flex-shrink: 0;
    box-sizing: border-box;
    width: calc(var(--aca-tick) + 2 * var(--aca-tick-reach));
    height: calc(var(--aca-tick) + 2 * var(--aca-tick-reach));
    margin: calc((1.5em - var(--aca-tick)) / 2 - var(--aca-tick-reach)) calc(-1 * var(--aca-tick-reach));
    padding: 0;
    border: var(--aca-tick-reach) solid transparent;
    border-radius: calc(var(--aca-radius-sm) + var(--aca-tick-reach));
    background: var(--aca-surface) no-repeat center / 100% 100% padding-box;
    box-shadow: inset 0 0 0 2px var(--aca-tick-edge);
    outline: 2px solid var(--aca-tick-ring);
    outline-offset: calc(-1 * var(--aca-tick-reach));
    vertical-align: top;
    cursor: pointer;
    -webkit-appearance: none;
    appearance: none;
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
}

/* A native box with no visible words - named only by its aria-label, or alone
   in a table cell - reaches out to a 44px square target. */
input:where([type="checkbox"]:not(.custom-control-input):not(.aca-option__input):not(.aca-sr-only):not(.aca-tabbar__more-toggle)[aria-label]),
:where(td, th) > input:where([type="checkbox"]:not(.custom-control-input):not(.aca-option__input):not(.aca-sr-only):not(.aca-tabbar__more-toggle)) {
    --aca-tick-reach: calc((44px - var(--aca-tick)) / 2);
}

.aca-table__select > input[type="checkbox"] {
    margin: calc((1.5em - var(--aca-tick)) / 2 - var(--aca-tick-reach)) calc(-1 * var(--aca-tick-reach));
    vertical-align: top;
}

input:where([type="checkbox"]:not(.custom-control-input):not(.aca-option__input):not(.aca-sr-only):not(.aca-tabbar__more-toggle):active) {
    --aca-tick-edge: var(--aca-orange);
    background-color: var(--aca-orange-soft);
}

input:where([type="checkbox"]:not(.custom-control-input):not(.aca-option__input):not(.aca-sr-only):not(.aca-tabbar__more-toggle):disabled) {
    --aca-tick-edge: var(--aca-line-strong);
    background-color: var(--aca-surface-2);
    cursor: not-allowed;
}

input:where([type="checkbox"]:not(.custom-control-input):not(.aca-option__input):not(.aca-sr-only):not(.aca-tabbar__more-toggle):checked) {
    --aca-tick-edge: var(--aca-orange-strong);
    background-color: var(--aca-orange-strong);
    background-image: var(--aca-tick-mark);
}

input:where([type="checkbox"]:not(.custom-control-input):not(.aca-option__input):not(.aca-sr-only):not(.aca-tabbar__more-toggle):indeterminate) {
    --aca-tick-edge: var(--aca-orange-strong);
    background-color: var(--aca-orange-strong);
    background-image: var(--aca-tick-dash);
}

input:where([type="checkbox"]:not(.custom-control-input):not(.aca-option__input):not(.aca-sr-only):not(.aca-tabbar__more-toggle):disabled:checked),
input:where([type="checkbox"]:not(.custom-control-input):not(.aca-option__input):not(.aca-sr-only):not(.aca-tabbar__more-toggle):disabled:indeterminate) {
    opacity: .6;
}

/* Keyboard focus draws the glow round the box itself, so the reach folds away
   while it shows; the slot, and so the row, never move. */
input:where([type="checkbox"]:not(.custom-control-input):not(.aca-option__input):not(.aca-sr-only):not(.aca-tabbar__more-toggle)):focus-visible {
    --aca-tick-reach: 0px;
    outline: 2px solid var(--aca-tick-ring);
    box-shadow: inset 0 0 0 2px var(--aca-tick-edge), var(--aca-focus);
}

/* Bootstrap's print sheet strips every box-shadow, so on paper the native
   box's edge is an outline laid just inside it. */
@media print {
    input:where([type="checkbox"]:not(.custom-control-input):not(.aca-option__input):not(.aca-sr-only):not(.aca-tabbar__more-toggle)) {
        outline: 2px solid var(--aca-tick-edge);
        outline-offset: calc(-2px - var(--aca-tick-reach));
    }
}

/* Forced colours paint every border, the transparent reach included, and drop
   the drawn edge: there the native box is the system's own. */
@media (forced-colors: active) {
    input:where([type="checkbox"]:not(.custom-control-input):not(.aca-option__input):not(.aca-sr-only):not(.aca-tabbar__more-toggle)) {
        --aca-tick-reach: 0px;
        -webkit-appearance: auto;
        appearance: auto;
    }
}