/* ============================================================
 * Platform menu_check — single source of truth for menu-row
 * check marks. Spec: specs/ui-platform.yaml §components.menu_check.
 *
 * Loaded by every app in the monorepo (sift, shed, app/next).
 *
 * Use case: a row inside a popover / menu / picker that toggles
 * state on/off (column picker, future view-menu, future filter
 * pickers). NOT a form checkbox — see §components.menu_check
 * non_goals.
 *
 * NSMenuItem convention: when checked, the row paints a check
 * glyph on its leading edge; when unchecked, the slot is BLANK
 * but reserves the same width so labels stay aligned.
 *
 * DOM contract:
 *   <span class="sift-menu-check" aria-checked="true|false">
 *     <i data-lucide="check"></i>
 *   </span>
 * The <i> is ALWAYS rendered; off state hides it via opacity, not
 * via DOM removal, so hosts can toggle without re-rendering rows.
 *
 * Checked-state signals (per spec checked_signals):
 *   • class `.is-checked`
 *   • attr  `[aria-checked="true"]`
 *
 * Layer assignment (TRK-394 Phase 3):
 *   @layer platform → shape, glyph sizing, label gap
 *   @layer module   → state rules (on / disabled)
 * ============================================================ */

@layer platform {
  .sift-menu-check {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: var(--menu-check-size, 14px);
    height: var(--menu-check-size, 14px);
    flex-shrink: 0;
    /* Spec §components.menu_check.spacing.label_gap = 6.
       Applied on the wrapper so consumers don't have to space-pad. */
    margin-inline-end: var(--menu-check-label-gap, 6px);
    color: currentColor;
  }

  /* Glyph — inherits color from the row label, hidden by default
     so the slot reads as "blank but reserved" (NSMenuItem off state). */
  .sift-menu-check > svg,
  .sift-menu-check > i {
    width: 100%;
    height: 100%;
    stroke-width: 1.8;
    color: currentColor;
    opacity: 0;
    transition: opacity 120ms;
  }
}

@layer module {
  /* Checked — glyph visible. Per spec checked_signals: class OR aria-checked. */
  :is(.sift-menu-check.is-checked,
      .sift-menu-check[aria-checked="true"]) > svg,
  :is(.sift-menu-check.is-checked,
      .sift-menu-check[aria-checked="true"]) > i {
    opacity: 1;
  }

  /* Disabled — glyph dims to opacity_disabled when checked; off slot
     is already invisible, so this is a no-op there. */
  .sift-menu-check[aria-disabled="true"] > svg,
  .sift-menu-check[aria-disabled="true"] > i,
  .sift-menu-check.is-disabled > svg,
  .sift-menu-check.is-disabled > i {
    opacity: 0.35;
  }
}