/* =============================================================================
   @elements/style — card

   Generic bordered surface. One base class, intent variants, and a
   small set of scoped child names.

     <div class="card">…</div>              — default (white bg, 1px rule)
     <div class="card is-soft">…</div>         — on --bg-soft (nested cards)
     <div class="card is-stark">…</div>        — slightly heavier border + shadow

   Children use generic scoped names — same pattern as callout / sidebar:

     <div class="card">
       <div class="head">Plan</div>         <!-- header with optional right slot -->
       <div class="body">…</div>            <!-- main content -->
       <div class="foot">…</div>            <!-- footer (e.g. save / cancel) -->
     </div>

   For info rows (key/value/right grid) use `.card > .row` containers,
   each with `.key`, `.val`, optional right slot.
============================================================================= */

.card {
  background: var(--bg);
  border: 1px solid var(--rule);
  border-radius: var(--radius-xl);
  overflow: hidden;
}

.card.is-soft {
  background: var(--bg-soft);
}

.card.is-stark {
  border-color: rgba(23, 23, 26, 0.08);
  box-shadow: var(--shadow-xs);
}

/* ─── Scoped children ───────────────────────────────────────────── */

:where(.card > .body)   { padding: var(--space-5); }
:where(.card > .body.is-padded) { padding: var(--space-6) var(--space-7); }
:where(.card > .body.is-tight)  { padding: var(--space-3) var(--space-4); }

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

:where(.card > .foot) {
  padding: var(--space-3) var(--space-5);
  border-top: 1px solid var(--rule);
  background: var(--bg-soft);
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: var(--space-2);
}

/* ─── Info rows (key/value/right grid) ──────────────────────────────
   Stack of rows inside a card — profile data, plan details, etc.

     <div class="card">
       <div class="row"><span class="key">Name</span><span class="val">Chris</span></div>
       <div class="row"><span class="key">Plan</span><span class="val">Pro</span></div>
     </div> */

:where(.card > .row) {
  display: grid;
  grid-template-columns: 120px 1fr auto;
  gap: var(--space-5);
  padding: 0.875rem 1.125rem;
  align-items: center;
  border-top: 1px solid var(--rule);
}
:where(.card > .row:first-child) { border-top: none; }

:where(.card > .row > .key) {
  font-family: var(--font-sans);
  font-size: 0.65625rem;
  text-transform: uppercase;
  letter-spacing: var(--tracking-widest);
  color: var(--ink-dim);
  font-weight: var(--font-medium);
}
:where(.card > .row > .val) {
  font-family: var(--font-sans);
  font-size: var(--text-md);
  color: var(--ink);
}
:where(.card > .row > .val.is-mono) {
  font-family: var(--font-mono);
  font-size: var(--text-sm);
}

@media (max-width: 700px) {
  :where(.card > .row) {
    grid-template-columns: 1fr;
    gap: var(--space-1);
  }
}