/* Platform-wide checkbox component. `.global-checkbox` is the canonical box for
   SELECTING FROM A LIST — pick these three files, show these four columns.

   Scope: this is the CHECKBOX only. It deliberately does NOT cover
     • switches / toggles (.form-switch, .global-toggle-switch) —
       turning ONE thing on or off is a different control and stays separate;
     • the form builder (apps/forms) — that editor legitimately renders both
       semantics and is not a sweep target;
     • native accent-color checkboxes (.calendar-filter-item, .calendar-avail-day-toggle,
       .opportunities-property-filter-option) — those never left the OS widget, so pulling
       them in here would be a visual change, not an absorption.

       <input type="checkbox" class="global-checkbox">

   Why appearance:none rather than accent-color: accent-color is honored
   unevenly on iOS Safari, so the box is drawn here and filled with
   var(--color-action) when checked — the fixed action ink, identical across
   browsers and tenants (a checkbox is a quiet control, so it never takes the
   brand color). The check glyph is an inline SVG data URI (no icon font inside
   a form control, and it stays crisp at any DPR), masked so its color comes
   from var(--color-neutral-ink-fg) — always legible on the ink fill.

   The one component-local custom property below is the size knob, kept local so
   the component owns its own recipe. The focus ring reuses the platform's
   canonical focus-visible declaration verbatim (see main.css / filter-bar.css). */

.global-checkbox {
    /* Box edge. 1rem matches both absorbed clones (the deliverables file row
       and the opportunities column drawer both drew a 16px box). */
    --global-checkbox-size: 1rem;

    appearance: none;
    -webkit-appearance: none;
    position: relative;
    flex: 0 0 auto;
    width: var(--global-checkbox-size);
    height: var(--global-checkbox-size);
    margin: 0;
    padding: 0;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    background: var(--color-card-bg);
    cursor: pointer;
    transition: background 0.12s ease, border-color 0.12s ease, box-shadow 0.12s ease;
}

.global-checkbox:hover {
    border-color: var(--color-action);
}

.global-checkbox:checked {
    background: var(--color-action);
    border-color: var(--color-action);
}

/* The tick. Painted on a full-bleed ::after so the glyph centers itself at any
   box size — no per-size offset math to drift.

   The glyph is MASKED, not drawn: the data URI supplies only the shape (a mask
   samples alpha, so the stroke color inside it is inert) and the paint comes
   from background: var(--color-neutral-ink-fg), the fixed foreground of the
   ink fill the box takes when checked (14.6:1 on #24292f).
   Same -webkit-mask/mask pairing the search-clear control uses in
   filter-bar.css. */
.global-checkbox:checked::after {
    content: "";
    position: absolute;
    inset: 0;
    background: var(--color-neutral-ink-fg);
    -webkit-mask: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='black' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='3 8 7 12 13 5'/%3E%3C/svg%3E") center / 75% 75% no-repeat;
    mask: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='black' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='3 8 7 12 13 5'/%3E%3C/svg%3E") center / 75% 75% no-repeat;
}

.global-checkbox:focus-visible {
    outline: none;
    border-color: var(--color-focus-ring);
    box-shadow: var(--shadow-focus-ring);
}

.global-checkbox:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}