/* ============================================================
   <app-checkbox> — project-owned checkbox

   Native <input type="checkbox"> styled with appearance: none,
   paired with a sibling box span that renders the visual frame
   and checkmark. The input remains the source of truth for
   focus, keyboard activation, form serialization, and a11y;
   the box span is purely decorative (aria-hidden in markup).

   Lives in @layer components so it sits below @layer brand and
   @layer utilities — host brand overrides and per-element
   utility classes both win cleanly.

   Tokens consumed (semantic only):
     --color-accent       — checked box fill + check stroke
     --color-accent-deep  — focus halo
     --color-line         — unchecked border
     --color-ink          — label text + check on light fill
     --color-on-dark      — check stroke when fill is accent
     --color-surface      — unchecked fill
     --color-error        — invalid-state border
     --space-2            — label gap
     --space-3            — small inline padding
   ============================================================ */
@layer components {

    .app-checkbox {
        display: inline-flex;
        align-items: center;
        gap: var(--space-2);
        cursor: pointer;
        font-size: 0.9375rem;
        line-height: 1.4;
        color: var(--color-ink);
        user-select: none;
    }

    /* Native input — visually hidden but kept focusable and in the
       tab order. Positioned absolute so it doesn't reserve layout
       space; the visible box span stands in for it. */
    .app-checkbox__input {
        position: absolute;
        inline-size: 1px;
        block-size: 1px;
        margin: -1px;
        padding: 0;
        border: 0;
        clip: rect(0 0 0 0);
        clip-path: inset(50%);
        overflow: hidden;
        white-space: nowrap;
    }

    /* Visible box. Sized for legibility at standard form density. */
    .app-checkbox__box {
        inline-size: 1.125rem;
        block-size: 1.125rem;
        flex: 0 0 auto;
        border: 1.5px solid var(--color-line);
        border-radius: 3px;
        background: var(--color-surface);
        display: inline-grid;
        place-items: center;
        transition:
            background-color 120ms ease,
            border-color 120ms ease,
            box-shadow 120ms ease;
    }

    /* Checkmark — inline SVG via background-image so it inherits
       no font and can recolor via mask + currentColor if we want
       later. For now a fixed white stroke reads against the
       accent fill. */
    .app-checkbox__box::after {
        content: "";
        inline-size: 0.625rem;
        block-size: 0.625rem;
        background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='white' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'><polyline points='3 8 7 12 13 4'/></svg>");
        background-repeat: no-repeat;
        background-position: center;
        background-size: contain;
        opacity: 0;
        transform: scale(0.6);
        transition: opacity 120ms ease, transform 120ms ease;
    }

    /* Checked state — accent fill, white check. */
    .app-checkbox__input:checked + .app-checkbox__box {
        background-color: var(--color-accent);
        border-color: var(--color-accent);
    }
    .app-checkbox__input:checked + .app-checkbox__box::after {
        opacity: 1;
        transform: scale(1);
    }

    /* Indeterminate — dash glyph via a horizontal line. Less
       common but supported by the native input.indeterminate
       property; sites using it set the flag in JS after render. */
    .app-checkbox__input:indeterminate + .app-checkbox__box {
        background-color: var(--color-accent);
        border-color: var(--color-accent);
    }
    .app-checkbox__input:indeterminate + .app-checkbox__box::after {
        background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='white' stroke-width='3' stroke-linecap='round'><line x1='3' y1='8' x2='13' y2='8'/></svg>");
        opacity: 1;
        transform: scale(1);
    }

    /* Hover (on the label) — only when not disabled. Subtle
       darken of the border so it reads as interactive. */
    .app-checkbox:hover .app-checkbox__input:not(:disabled) + .app-checkbox__box {
        border-color: var(--color-accent-deep);
    }

    /* Focus ring — driven by :focus-visible on the input, applied
       to the box. Keyboard users get the ring; mouse users don't. */
    .app-checkbox__input:focus-visible + .app-checkbox__box {
        outline: 2px solid var(--color-accent-deep);
        outline-offset: 2px;
    }

    /* Active (pressing) — slight inset feedback. */
    .app-checkbox__input:active:not(:disabled) + .app-checkbox__box {
        transform: translateY(0.5px);
    }

    /* Disabled state. */
    .app-checkbox--disabled,
    .app-checkbox:has(.app-checkbox__input:disabled) {
        cursor: not-allowed;
        color: var(--color-ink-mute);
    }
    .app-checkbox__input:disabled + .app-checkbox__box {
        background-color: var(--color-surface-alt);
        border-color: var(--color-line);
        opacity: 0.6;
    }

    /* Validation — when the input is .input-validation-error
       (the class FormValidator and our app-form pipeline both
       apply), tint the box. Pairs with the per-field error span
       rendered by <app-form-field-wrapper>. */
    .app-checkbox__input.input-validation-error + .app-checkbox__box,
    .app-checkbox__input[aria-invalid="true"] + .app-checkbox__box {
        border-color: var(--color-error);
    }

    .app-checkbox__label {
        /* Inherits color from .app-checkbox; nothing to do unless
           a host wants to override. Kept as a hook for spacing /
           typography tweaks per surface. */
    }
}