/* card-block -labeled summary tile with optional head + sub.
 * Generalized from .pos-card-block (which was scoped to .pos-focused-page
 * and then de-scoped). Used by:
 *   - POS order builder context card (table + customer + sent time)
 *   - POS shift close / transfer / cash movement focused flows
 *   - Recipes detail "Ingredients" wrap
 *   - Any surface that needs "label · big value · sub" inside a card.
 *
 * The legacy ``.pos-card-block`` class name is kept as an alias on every
 * rule so prod templates don't need a sweep at the same time as the
 * atlas adopts the canonical name. Drop the alias once every prod
 * template has migrated to .card-block.
 */
.card-block,
.pos-card-block {
  background: var(--surface);
  border: 1px solid var(--divider);
  border-radius: var(--radius);
  padding: var(--space-3);
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.card-block-head,
.pos-card-block-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2);
}

.card-block-title,
.pos-card-block-title {
  font-size: var(--font-size-body);
  font-weight: 800;
  color: var(--text);
}

.card-block-amount,
.pos-card-block-amount {
  font-variant-numeric: tabular-nums;
  font-weight: 800;
  color: var(--text);
}

.card-block-sub,
.pos-card-block-sub {
  font-size: var(--font-size-small);
  color: var(--muted);
  margin: 0;
  line-height: 1.4;
}

.card-block-sub.is-strong,
.pos-card-block-sub.is-strong {
  font-weight: 800;
  color: var(--text);
}