/* checkbox.css — pattern: independent boolean.
   Uses native input with custom visual; touch target preserved.
   States: rest, hover, focus, checked, indeterminate, disabled.
   See FSE_UI.md → Checkbox. */

.biq-check {
    display: inline-flex;
    align-items: flex-start;
    gap: var(--biq-space-3);
    min-height: var(--biq-touch-target);
    padding: var(--biq-space-2) 0;
    cursor: pointer;
    user-select: none;
    color: var(--biq-color-text-primary);
}

.biq-check__input {
    appearance: none;
    -webkit-appearance: none;
    flex: 0 0 auto;
    width: var(--biq-space-5);
    height: var(--biq-space-5);
    margin: 0;
    background: var(--biq-color-surface-raised);
    border: 1px solid var(--biq-color-border-strong);
    border-radius: var(--biq-radius-sm);
    cursor: pointer;
    transition:
        background-color var(--biq-duration-fast) var(--biq-ease-standard),
        border-color var(--biq-duration-fast) var(--biq-ease-standard);
    display: inline-grid;
    place-content: center;
}

.biq-check__input:hover:not(:disabled) {
    border-color: var(--biq-color-action);
}

.biq-check__input:focus-visible {
    outline: 0;
    box-shadow: var(--biq-focus-ring);
}

.biq-check__input:checked {
    background: var(--biq-color-action);
    border-color: var(--biq-color-action);
}

.biq-check__input:checked::before {
    content: "";
    width: var(--biq-space-3);
    height: var(--biq-space-3);
    background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M2 6.5l3 3 5-6'/></svg>") center / contain no-repeat;
}

.biq-check__input:indeterminate {
    background: var(--biq-color-action);
    border-color: var(--biq-color-action);
}

.biq-check__input:indeterminate::before {
    content: "";
    width: var(--biq-space-3);
    height: 2px;
    background: var(--biq-color-action-on);
    border-radius: var(--biq-radius-pill);
}

.biq-check__input:disabled {
    cursor: not-allowed;
    opacity: 0.55;
}

.biq-check__label {
    line-height: var(--biq-lh-snug);
    padding-top: 2px;
}

.biq-check__hint {
    display: block;
    color: var(--biq-color-text-muted);
    font-size: var(--biq-fs-sm);
    margin-top: var(--biq-space-1);
}