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

   Generic bordered surface. Used across purchase (license card, account
   card), account (profile, plan, renewal, machines), dashboard glance
   strip, and modals.

   Variants:
     .card           — 1px rule border + default radius
     .card-soft      — same but on --bg-soft (for nested cards)
     .card-stark     — slightly heavier border (for white-bg pages where
                       --rule can disappear)

   Structure subcomponents are optional and additive.
============================================================================= */

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

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

.card-stark {
  background: var(--bg);
  border: 1px solid rgba(23, 23, 26, 0.08);
  border-radius: var(--radius-xl);
  overflow: hidden;
  box-shadow: var(--shadow-xs);
}

/* Structure */
.card-body    { padding: var(--space-5); }
.card-padded  { padding: var(--space-6) var(--space-7); }
.card-tight   { padding: var(--space-3) var(--space-4); }

.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);
}

.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 inside a card — used on the account profile block */
.info-row {
  display: grid;
  grid-template-columns: 120px 1fr auto;
  gap: var(--space-5);
  padding: var(--space-3-5, 0.875rem) var(--space-4-5, 1.125rem);
  align-items: center;
  border-top: 1px solid var(--rule);
}
.info-row:first-child { border-top: none; }
.info-row-key {
  font-family: var(--font-mono);
  font-size: 0.65625rem;
  text-transform: uppercase;
  letter-spacing: var(--tracking-widest);
  color: var(--ink-dim);
  font-weight: var(--font-medium);
}
.info-row-val {
  font-family: var(--font-sans);
  font-size: var(--text-md);
  color: var(--ink);
}
.info-row-val-mono {
  font-family: var(--font-mono);
  font-size: var(--text-sm);
}

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