/* ══════════════════════════════════════════════════════════════════════════
   cards.css — the example card, on all three surfaces that show one.

   The landing wall's ten, /gallery's fifty-two and /play's picker are the same
   card at three amounts of chrome. The rich case drove it: these are the
   wall's own rules, generalised, rather than the picker's grown — which is why
   `--card-span` and `--card-figure-height` survive as the wall's per-card
   levers rather than being averaged away.

   Loaded by every page that shows a card. `.pane` (the glass) and `.label`
   come from site.css.
   ══════════════════════════════════════════════════════════════════════════ */

/* Spans and card heights follow each figure's real aspect ratio rather than a
   uniform grid — a 1.79-wide mindmap and a 0.89 flow in identical cells would
   letterbox both. No borders: the grid gap is the separator. */
.example-card{grid-column:span var(--card-span);border-radius:var(--radius-pane);
  padding:20px 20px 17px;display:flex;flex-direction:column;gap:15px}
.example-card--grid{--card-span:4;--card-figure-height:250px}

/* The figure sits straight on the card's glass — the paper sheet under every
   thumbnail is gone. It was a plate the host put beneath all of them, and the
   beats already record why that arrangement ended: since 1.0.0-beta.4 a
   figure paints no ground it was not given, so the two that want paper (the
   drawing, the schematic) bring their own and the rest have nothing to sit a
   sheet under.

   The row has to be pinned to the box. Left implicit it sizes to the image's
   own intrinsic contribution — 329px for a 250px card on the widest of the
   wall's figures — and the `max-height:100%` below then resolves against that
   row rather than against the box, so the figure grew past the card and
   printed over its own caption. `100%` makes the single row the height
   declared here and the percentages have something fixed to chase. */
.example-card-figure{height:var(--card-figure-height);
  display:grid;grid-template-rows:100%;place-items:center;min-width:0}
/* Max constraints rather than `object-fit`: both fit the figure without
   stretching it, but under `object-fit` the element's box stays the full cell
   and only the paint shrinks, so a corner radius here would round the empty
   letterbox rather than the figure. With max sizing the box hugs what is
   drawn, and the radius lands on the two figures that paint their sheet edge
   to edge — the drawing and the schematic get rounded paper, and on a
   transparent figure it clips nothing anyone can see. */
.example-card-figure img{max-width:100%;max-height:100%;display:block;
  border-radius:var(--radius-pane-in)}

/* The title owns the auto margin rather than the row owning space-between:
   with the button as a third child, `space-between` would strand the code
   caption in the middle of the card. `center`, not `baseline`, because a
   26px control has no baseline worth aligning to. */
.example-card-caption{display:flex;align-items:center;gap:14px}
.example-card-caption b{font-size:16.5px;font-weight:600;letter-spacing:-.01em;
  margin-right:auto}
.example-card-caption span{font-family:var(--font-code);font-size:12px;
  color:var(--color-text-soft);white-space:nowrap}

/* The card still does not lift or tint on hover — these are specimens, and
   making the whole thing twitch as a pointer crosses the wall promised an
   interaction that does not exist. The button is the interaction, and it sits
   in the caption at full opacity now: it hid on the figure until a pointer
   crossed the card, which made the one control on the wall a secret handshake
   — hover-reveal tells nobody the affordance exists. A visible wash disc in
   the chrome row is quiet enough to leave the specimen alone; the pointer's
   answer is the accent, the same one the nav and the pager now give.

   And it INVERTS rather than tinting. A wash disc going to a slightly greener
   wash disc is a change you have to be looking for; the solid pill under a
   white mark is the same shape saying something happened. It is also the shape
   RUN already is, which makes the two green controls on the site one idea. */
.example-card-edit{flex:none;display:grid;place-items:center;
  width:26px;height:26px;border-radius:var(--radius-pill);
  color:var(--color-text-soft);background:var(--color-wash);
  transition:color var(--duration-hover) var(--ease-out),
             background-color var(--duration-hover) var(--ease-out)}
.example-card-edit:hover{color:var(--color-on-accent);background:var(--color-accent-solid)}

/* The wall's and the grid's, never the picker's. These are twelve-column
   spans, and a Pick card is not on that grid — it is on the dialog's own
   auto-fill track, which `grid-column:span 6` would flatten to two per row.
   The rule read `.example-card` while it was `.range-card` and Pick did not
   exist. */
@media (max-width:1040px){
  .example-card--wall,.example-card--grid{grid-column:span 6}
}
@media (max-width:680px){
  .example-card--wall,.example-card--grid{grid-column:span 12;
    --card-figure-height:230px !important}
}

/* ══ the picker's card ═════════════════════════════════════════════════════
   /play's overlay, where the whole card is the button. No caption row and no
   edit affordance: picking one *is* editing it. */
.example-card--pick{display:flex;flex-direction:column;gap:9px;padding:10px;
  border-radius:var(--radius-pane-in);text-align:left;
  transition:background-color var(--duration-hover) var(--ease-out)}
.example-card--pick:hover{background:var(--color-wash)}
.example-card--pick .example-card-figure{height:128px;padding:6px}
.example-card-title{font-size:13px;font-weight:500;color:var(--color-ink);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}