/* ============================================
   <xm-card> — general-purpose containment surface.

   Surface / ink (AD-13; ADR 0006): the CARD-STACK family — background
   var(--md-sys-color-inverse-surface), ink var(--md-sys-color-inverse-on-surface).
   The card tier is theme-following: a lifted dark surface in dark theme, white
   in light; the ink follows (light on the dark card, dark on the white one).

   Spec (DESIGN components.card): 1px outline-variant border, 14px medium
   corner, level2 elevation (1px brightening top edge + soft 24px drop).
   Header / footer split from the body by a 1px rule — not padding alone.
   Header padding 22px 24px 14px; footer 14px 24px 18px.

   BEM: block `card`; elements `__header` `__body` `__footer`
   `__footer-content` `__action`; modifiers `--elevation-0..5`, `--xs|sm|md|lg`.
   ============================================ */

.card {
  display: flex;
  flex-direction: column;
  box-sizing: border-box;
  background: var(--md-sys-color-inverse-surface);
  color: var(--md-sys-color-inverse-on-surface);
  border: 1px solid var(--md-sys-color-outline-variant);
  border-radius: var(--md-sys-shape-corner-medium);
  box-shadow: var(--md-sys-elevation-level2);
  overflow: hidden;
}

/* ---------- Elevation ---------- */
.card--elevation-0 { box-shadow: var(--md-sys-elevation-level0); }
.card--elevation-1 { box-shadow: var(--md-sys-elevation-level1); }
.card--elevation-2 { box-shadow: var(--md-sys-elevation-level2); }
.card--elevation-3 { box-shadow: var(--md-sys-elevation-level3); }
.card--elevation-4 { box-shadow: var(--md-sys-elevation-level4); }
.card--elevation-5 { box-shadow: var(--md-sys-elevation-level5); }

/* ---------- Header ---------- */
.card__header {
  display: flex;
  align-items: center;
  gap: var(--s-2);
  padding: var(--s-5) var(--s-6) var(--s-3);
  border-bottom: 1px solid var(--md-sys-color-outline-variant);
  font-family: var(--md-sys-typescale-title-medium-font);
  font-size: var(--md-sys-typescale-title-medium-size);
  line-height: var(--md-sys-typescale-title-medium-line-height);
  font-weight: var(--md-sys-typescale-title-medium-weight);
  letter-spacing: var(--md-sys-typescale-title-medium-tracking);
  color: var(--md-sys-color-inverse-on-surface);
}
.card__header.is-empty {
  display: none;
}

/* ---------- Body ---------- */
.card__body {
  flex: 1 1 auto;
  padding: var(--s-5) var(--s-6);
  font-family: var(--md-sys-typescale-body-medium-font);
  font-size: var(--md-sys-typescale-body-medium-size);
  line-height: var(--md-sys-typescale-body-medium-line-height);
  letter-spacing: var(--md-sys-typescale-body-medium-tracking);
  color: var(--md-sys-color-inverse-on-surface);
}

/* ---------- Footer ---------- */
.card__footer {
  display: flex;
  align-items: center;
  gap: var(--s-3);
  padding: var(--s-3) var(--s-6) var(--s-4);
  border-top: 1px solid var(--md-sys-color-outline-variant);
}
.card__footer.is-empty {
  display: none;
}
.card__footer-content {
  flex: 1 1 auto;
  min-width: 0;
  font-size: var(--md-sys-typescale-body-small-size);
  line-height: var(--md-sys-typescale-body-small-line-height);
  color: var(--xm-color-inverse-on-surface-muted);
}
.card__footer-content.is-empty {
  display: none;
}

/* ---------- Action (singular trailing region in the footer) ---------- */
.card__action {
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
  flex-shrink: 0;
  margin-inline-start: auto;
}
.card__action.is-empty {
  display: none;
}