/* =========================================================
   Zeal Portal — Cards
   Generic panel primitive. Padding scales with tier via --card-pad
   (48px T1 / 24px T2 / 12px T3 — see tier CSS). Hairline borders,
   square corners, no shadows.
   ========================================================= */

.card {
  background: var(--paper, #fff);
  color: var(--ink, #000);
  border: 1px solid var(--rule, rgba(0, 0, 0, 0.08));
  border-radius: var(--r-0, 0);
  padding: var(--card-pad, 24px);
}
.card + .card { margin-top: var(--s-4, 16px); }

/* --- Header + title + meta --- */

.card__header {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--s-4, 16px);
  margin-bottom: var(--s-3, 12px);
}
.card__title {
  font-family: var(--font-ex);
  font-weight: var(--w-bold);
  font-size: var(--t-h5, 21px);
  letter-spacing: var(--track-sub, -0.03em);
  line-height: var(--lh-snug, 1.15);
  margin: 0;
}
.card__title a {
  color: inherit;
  text-decoration: none;
}
.card__title a:hover { color: var(--accent, #FF5800); }

.card__meta {
  font-family: var(--font-cd);
  font-size: var(--t-small, 13px);
  color: var(--ink-3, rgba(0, 0, 0, 0.55));
  letter-spacing: 0.02em;
}
.card__meta .sep { opacity: 0.5; padding: 0 6px; }

/* --- Body + footer --- */

.card__body {
  /* Body inherits its own paragraph/inner element styles */
}
.card__body > :last-child { margin-bottom: 0; }

.card__footer {
  margin-top: var(--s-4, 16px);
  padding-top: var(--s-3, 12px);
  border-top: 1px solid var(--rule, rgba(0, 0, 0, 0.08));
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-3, 12px);
}

/* --- Variants --- */

/* Flush — no padding; child controls layout. Useful for tables
   and rows that want to sit edge-to-edge inside the card border. */
.card--flush {
  padding: 0;
}

/* Ghost — borderless, used inside other cards or sections where
   the outer context already provides visual separation. */
.card--ghost {
  border-color: transparent;
  background: transparent;
}

/* Dense padding override — forces Tier 3 density on any tier. */
.card--pad-dense {
  padding: var(--s-3, 12px);
}

/* Warm panel — lightly tinted card for warm-register contexts
   (sidebar info panels, renewal reminders). */
.card--warm {
  background: var(--paper-2, #f4eee8);
  border-color: transparent;
}

/* Subtle hairline between stacked rows inside a flush card */
.card--flush > * + * {
  border-top: 1px solid var(--rule, rgba(0, 0, 0, 0.08));
}