/* ════════════════════════════════════════════════════════════════════════
   DS Card primitive (DS sub-step 2 — primitive 4)
   Refines the .card system IN PLACE (class names unchanged → app-wide upgrade).
   Consumes tokens.css. No JS.

   Variants:  default · elevated · interactive · flat
   Paddings:  .card--pad-sm · md (default) · lg
   Accents:   .card--accent-{red,amber,green,grey}  (left-border status overlay)
   Stat:      .card--stat  (compact KPI tile — no header/body split expected)
   Hover:     only .card--interactive — lift + shadow (mirrors Button primary
              tactile pattern). focus-visible ring on interactive.

   Notes:
     - .card-title snapped to --text-md (14) in MB8 — was 15 literal pre-MB8.
     - Specialized siblings (.stat-card legacy class, .tpl-card, .bcard,
       .lib-post-row, .nl-stat/.nl-kpi, .cma-card, .sub-count-block) still
       live in app.css; their migration to .card--* modifiers is the Card
       migration sub-phase (5-7 batches estimated).
   ════════════════════════════════════════════════════════════════════════ */

.card {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow);
}

.card-header {
  padding: var(--sp-4) var(--sp-5);
  border-bottom: 1px solid var(--border);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-3);
}

.card-title {
  font-size: var(--text-md);    /* snapped 15 → 14 in MB8 (closes primitive-build deferral) */
  font-weight: 600;
  color: var(--navy);
  margin: 0;
}

.card-body {
  padding: var(--sp-5);
}

.card-footer {
  padding: var(--sp-3) var(--sp-5);
  border-top: 1px solid var(--border);
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: var(--sp-2);
}

/* ── Variants ───────────────────────────────────────────── */
.card--elevated { box-shadow: var(--shadow-md); }

.card--flat { box-shadow: none; }

.card--interactive {
  cursor: pointer;
  transition: transform var(--dur) var(--ease),
              box-shadow var(--dur) var(--ease);
}
.card--interactive:hover {
  transform: translateY(-1px);
  box-shadow: var(--shadow-md);
}
.card--interactive:active { transform: translateY(0); }
.card--interactive:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

/* ── Padding sizes (apply to .card-body) ────────────────── */
.card--pad-sm .card-body { padding: var(--sp-3) var(--sp-4); }
.card--pad-md .card-body { padding: var(--sp-5); }            /* default */
.card--pad-lg .card-body { padding: var(--sp-6) var(--sp-8); }

/* ── Accents (left-border status overlay) ───────────────── */
.card--accent-red    { border-left: 3px solid var(--error); }
.card--accent-amber  { border-left: 3px solid var(--warning); }
.card--accent-green  { border-left: 3px solid var(--success); }
.card--accent-grey   { border-left: 3px solid var(--gray-400); }
.card--accent-brand  { border-left: 3px solid var(--accent); }

/* ── Stat variant — compact KPI tile ────────────────────── */
.card--stat { padding: var(--sp-4) var(--sp-5); }
.card--stat .card-body { padding: 0; }
.card--stat .stat-label {
  font-size: var(--text-xs);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .5px;
  color: var(--muted);
  margin-bottom: 6px;
}
.card--stat .stat-value {
  font-size: var(--text-2xl);
  font-weight: 700;
  color: var(--navy);
  line-height: 1;
}
.card--stat .stat-sub {
  font-size: var(--text-sm);
  color: var(--muted);
  margin-top: 2px;
}

/* ── Content Engine extensions (Step 2: shared content primitives) ──────
   ds_content_card / ds_section_card / ds_media_card. All on tokens.
   --accent here = product chrome (selection/badges), never agent-facing. */
.card--selectable { cursor: pointer; position: relative; }
/* Premium selected state — accent tint + inset ring + lift + corner check badge (no cheap border). */
.card--selected {
  border-color: var(--accent);
  background: var(--accent-bg);
  box-shadow: 0 0 0 2px var(--accent) inset, var(--shadow-md);
}
.card--selected::after {
  content: ''; position: absolute; top: var(--sp-3); right: var(--sp-3);
  width: 22px; height: 22px; border-radius: var(--radius-full); background: var(--accent);
  background-image: url("data:image/svg+xml,%3Csvg width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' d='M5 13l4 4L19 7'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: center; background-size: 12px;
}

/* content card text (ds_content_card) — premium scale */
.cc-title { font-size: var(--text-lg); font-weight: 700; color: var(--text); letter-spacing: -0.01em; }
.cc-blurb { font-size: var(--text-base); color: var(--muted); margin-top: var(--sp-2); line-height: 1.55; }
.cc-note  { font-size: var(--text-xs); color: var(--muted); margin-top: var(--sp-3); padding-top: var(--sp-2); border-top: 1px solid var(--border); }

/* section card header action (ds_section_card) */
.card-head-action { display: flex; align-items: center; gap: var(--sp-2); }

/* square media card (ds_media_card — Assets/Carousel pass) */
.card--media { padding: 0; overflow: hidden; }
.media-thumb { position: relative; aspect-ratio: 1; background: var(--gray-50); }
.media-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.media-ph { display: flex; align-items: center; justify-content: center; height: 100%; font-size: var(--text-xs); color: var(--muted); }
.media-badge { position: absolute; top: var(--sp-1); left: var(--sp-2); font-size: var(--text-2xs); font-weight: 700; color: var(--cf-on-accent); background: var(--accent); padding: 1px 6px; border-radius: var(--radius-sm); }
.media-meta { padding: var(--sp-2) var(--sp-3); }
.media-label { font-size: var(--text-sm); color: var(--text); }
.media-sub { font-size: var(--text-xs); color: var(--muted); display: block; }