/* ============================================================
   COMPONENT · MODEL CARD  (the space model picker — M1-3)

   A grid of model subpanels with real vertical breathing room. The WHOLE card is
   no longer the button — each card carries one proper select control (LED + label)
   in its top-right corner, so only that control is the click target.

   The corner LED is the honest two-stage signal the auto-save UX rides on
   (model_picker_controller.js drives it):
     · off            — not the active model
     · amber + pulse  — a click is in flight ("saving…")
     · solid green    — the round-trip confirmed the save ("active")

   PROSE READABILITY: blurb + tradeoffs drop the global monospace for --font-prose
   (a proportional face) — paragraphs of JetBrains Mono are a wall to scan. Only the
   price readout keeps the data font; numbers want it.
   ============================================================ */

/* The grid: auto-fills as many ~22rem columns as fit, one per row on a phone, with
   a generous gap in BOTH axes (the old c-segmented flow left almost no vertical air
   between cards). */
.c-model-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(22rem, 1fr));
  gap: var(--space-5);
}

@media (max-width: 30rem) {
  .c-model-grid { grid-template-columns: 1fr; }
}

/* The card itself extends .c-card chrome; we only add the column layout + neutralise
   the inherited .c-card:hover accent (the card is no longer interactive — only the
   corner button is, and it carries its own hover). */
.c-model-card {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.c-model-card,
.c-model-card:hover {
  border-color: var(--color-border);
  box-shadow: var(--seam-embossed);
}

/* Selected: a quiet green frame — the calm replacement for the old "Recommended"
   badge. Hover-stable so it never flickers to the generic card-hover accent. */
.c-model-card.is-active,
.c-model-card.is-active:hover {
  border-color: var(--color-ok);
  box-shadow: var(--seam-embossed), 0 0 0 1px var(--color-ok);
}

.c-model-card__head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-3);
}

.c-model-card__name {
  font-family: var(--font-plaque);
  font-size: var(--fs-md);
  letter-spacing: var(--ls-wide);
  line-height: var(--lh-snug);
  color: var(--color-text-strong);
}

.c-model-card__tier {
  font-size: var(--fs-3xs);
  letter-spacing: var(--ls-widest);
  text-transform: uppercase;
  color: var(--color-text-muted);
}

/* The readable prose — proportional, comfortable line-height, full-contrast for the
   blurb and a calmer muted tone for the secondary tradeoffs line. */
.c-model-card__blurb,
.c-model-card__tradeoffs {
  font-family: var(--font-prose);
  font-size: var(--fs-sm);
  line-height: var(--lh-normal);
  letter-spacing: var(--ls-normal);
  text-transform: none;
}

.c-model-card__blurb     { color: var(--color-text-strong); }
.c-model-card__tradeoffs { color: var(--color-text-muted); }

/* Vision capability (email-attachments §8): a quiet data-font line telling the user
   whether THIS model can read a forwarded image — so the blind-model "sorry, I can't
   view images" reply is never a surprise. Muted, natural case, never an alarm. */
.c-model-card__vision {
  font-family: var(--font-data);
  font-size: var(--fs-xs);
  color: var(--color-text-muted);
}

/* Prices pinned to the card foot so the readouts line up across a row. Numbers keep
   the data font. */
.c-model-card__prices {
  margin-top: auto;
  padding-top: var(--space-3);
  font-family: var(--font-data);
  font-size: var(--fs-xs);
  color: var(--color-text-muted);
}

/* The corner select control: a small button that hosts the status LED. It never
   shrinks and aligns to the card name's top. */
.c-model-card__select {
  flex: 0 0 auto;
}