/* ============================================================
 * lab-icon-button.css — Axismundi Icon button lab module
 * v3.5.2 Phase 2
 *
 * Lab-internal pattern page scaffolding on top of baseline:
 *   - components.css §3 Icon button — CURRENT baseline primitive
 *   - components.css §0 State-layer foundation — CURRENT
 *   - icons.css §1 + §5 Material Symbols integration — CURRENT
 *
 * Infrastructure dependencies:
 *   - icon-system/ — CURRENT unconditional
 *
 * Target / future dependencies (NOT wired at v3.5.2):
 *   - lab/modules/ripple/ — TARGET, deferred to Ripple v2
 *     (BACKLOG #25 + #27)
 *
 * Audit docs:
 *   - docs/ICON-BUTTON-SPEC-AUDIT.md
 *   - docs/ICON-BUTTON-MEASUREMENT-AUDIT.md
 *   - docs/ICON-BUTTON-WP-MAPPING.md
 *
 * Baseline/public files remain unchanged.
 * ============================================================ */

.lab-icon-button-demo {
  --lab-icon-button-gap: var(--space-md);
  --lab-icon-button-section-gap: var(--space-xl);
  --lab-icon-button-caption-color: var(--md-sys-color-on-surface-variant);
  --lab-icon-button-panel: color-mix(in srgb, var(--md-sys-color-surface-container), transparent 8%);
  --lab-icon-button-border: color-mix(in srgb, var(--md-sys-color-outline-variant), transparent 12%);
  display: grid;
  gap: var(--lab-icon-button-section-gap);
  max-width: 960px;
  margin: 0 auto;
  padding: var(--space-xl);
}

.lab-icon-button-section {
  display: grid;
  gap: var(--space-md);
}

.lab-icon-button-section__head {
  display: grid;
  gap: var(--space-xs);
}

.lab-icon-button-section__title {
  margin: 0;
}

.lab-icon-button-section__supporting {
  max-width: 72ch;
  margin: 0;
  color: var(--lab-icon-button-caption-color);
}

.lab-icon-button-row {
  display: flex;
  flex-wrap: wrap;
  align-items: start;
  gap: var(--lab-icon-button-gap);
}

.lab-icon-button-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
  gap: var(--space-md);
}

.lab-icon-button-specimen {
  display: grid;
  justify-items: center;
  align-content: start;
  gap: var(--space-xs);
  min-width: 112px;
  padding: var(--space-md);
  border: 1px solid var(--lab-icon-button-border);
  border-radius: var(--md-sys-shape-corner-medium);
  background: var(--lab-icon-button-panel);
}

.lab-icon-button-specimen__caption {
  max-width: 24ch;
  margin: 0;
  color: var(--lab-icon-button-caption-color);
  font-size: var(--md-sys-typescale-body-small-size);
  line-height: var(--md-sys-typescale-body-small-line-height);
  text-align: center;
}

.lab-icon-button-specimen__caption--ko {
  font-weight: 500;
}

.lab-icon-button-banner {
  padding: var(--space-md);
  border: 1px solid var(--lab-icon-button-border);
  border-radius: var(--md-sys-shape-corner-medium);
  background: var(--md-sys-color-surface-container-high);
}

.lab-icon-button-banner p {
  margin: 0;
}

.lab-icon-button-snippet {
  border: 1px solid var(--lab-icon-button-border);
  border-radius: var(--md-sys-shape-corner-small);
  background: var(--md-sys-color-surface-container-low);
}

.lab-icon-button-snippet > summary {
  cursor: pointer;
  padding: var(--space-sm) var(--space-md);
  color: var(--md-sys-color-primary);
}

.lab-icon-button-snippet pre {
  overflow-x: auto;
  margin: 0;
  padding: var(--space-md);
  border-block-start: 1px solid var(--lab-icon-button-border);
}

.lab-icon-button-xref {
  display: grid;
  gap: var(--space-xs);
}

.lab-icon-button-xref a {
  color: var(--md-sys-color-primary);
}

.lab-icon-button-note {
  max-width: 78ch;
  margin: 0;
  color: var(--lab-icon-button-caption-color);
}

/* Verification guide:
 * - No unscoped baseline component selectors should appear in this file.
 * - No JS dependency exists for v3.5.2 Phase 2.
 * - Any future visual helper must be scoped under .lab-icon-button-demo.
 */