/* SLE-TH-card — bordered container primitive per the 2026-06-12 UX audit (Tier H Step 1).
 *
 * Today's design audit + lists audit found ~15 card-like variants across
 * the 3 apps (camp-card, obj-card, recipe-card, household-card,
 * m-card-block, ann-card, doublon-card, ...) all building the same
 * structure: 1px border, rounded corners, padding, optional hover shadow.
 * Each app reimplemented the same primitive in its own stylesheet.
 *
 * `.suite-card` is the canonical primitive. Sub-elements:
 *   .suite-card-hd   — title strip with optional trailing actions
 *   .suite-card-body — content area (no styling — uses card padding)
 *   .suite-card-ft   — footer strip for actions (right-aligned)
 *
 * Variants (all opt-in, composable on `.suite-card`):
 *   --compact   — tighter padding for dense lists
 *   --alert     — amber left rail for warnings (e.g. secretariat doublons)
 *   --elevated  — pre-elevated (skip the hover transition; for KPI tiles)
 *   --media     — horizontal layout for media-left cards (camp listings)
 *   --person    — compact horizontal layout for person rows (avatar + name)
 *
 * All values are tokens — no hardcoded colors / radii / spacing. Transitions
 * use `--dur-normal` and are killed under prefers-reduced-motion.
 *
 * Depends on tokens.css.
 */
.suite-card {
  border: 1px solid var(--g2);
  border-radius: var(--radius-md);
  padding: var(--sp-4);
  background: var(--wh);
  transition: box-shadow var(--dur-normal), border-color var(--dur-normal);
}
.suite-card:hover {
  border-color: var(--g3);
  box-shadow: var(--shadow-md);
}

/* Sub-elements --------------------------------------------------------- */
.suite-card-hd {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-2);
  margin-bottom: var(--sp-3);
  font-weight: 500;
  padding-bottom: var(--sp-2);
  border-bottom: 1px solid var(--g1);
}
.suite-card-body {
  /* Intentionally empty — body inherits card padding. Reserved class so
   * markup can opt into future body-specific tweaks without churn. */
}
.suite-card-ft {
  display: flex;
  justify-content: flex-end;
  gap: var(--sp-2);
  padding-top: var(--sp-2);
  border-top: 1px solid var(--g1);
}

/* Variants ------------------------------------------------------------- */
.suite-card--compact { padding: var(--sp-2); }
.suite-card--alert   { border-left: 3px solid var(--amber); }
.suite-card--elevated { box-shadow: var(--shadow-md); }
.suite-card--media {
  display: flex;
  gap: var(--sp-3);
  align-items: stretch;
}
.suite-card--person {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
}

/* Motion: respect prefers-reduced-motion ------------------------------- */
@media (prefers-reduced-motion: reduce) {
  .suite-card { transition: none; }
}

/* PROPOSED CONSUMERS (Tier H sweep, separate per-app commits):
 *
 * campscout/.camp-card     → .suite-card                          (~94 LOC of campscout/css/style.css removed)
 * campscout/.obj-card      → .suite-card.suite-card--nested
 * campscout/.recipe-card   → .suite-card
 * matos/.m-card-block      → .suite-card                          (~50 LOC of matos/css/matos-shared.css removed)
 * matos/.m-co-card         → .suite-card
 * secretariat/.ann-card    → .suite-card
 * secretariat/.doublon-card → .suite-card.suite-card--alert
 *
 * Migration requires per-app:
 *   1. CSS audit (which legacy classes remain in use)
 *   2. HTML / JS template updates (className renames)
 *   3. Browser smoke test for visual regression
 *
 * See today's audit notes for the full inventory.
 */