.card-tile { min-width: 0; display: flex; flex-direction: column; gap: 8px; }
.card-tile__link { position: relative; display: block; border-radius: var(--radius-s); }
.card-tile__link:hover .card-image { box-shadow: 0 0 0 1px var(--border-strong), 0 10px 30px rgba(0, 0, 0, .25); }
.card-tile__body { min-width: 0; display: grid; gap: 2px; }
.card-tile__name { font: 500 13px/1.25 var(--font); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.card-tile__meta { font: 11px var(--font-mono); color: var(--text-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* A stepper in the footer (Ui:Stepper) spans the tile: − left, + right, the number in between. Styled by where it is:
   a Turbo Stream replaces every stepper of a card or printing with one markup, so a class on one would be lost. */
.card-tile .stepper { display: flex; width: 100%; margin-top: 4px; }
.card-tile .stepper__value { flex: 1; }

/* A phone's grid has three columns (~105px a tile): ✕ − N + ⤒ would not fit, and − / + would shrink below a touch
   target. A tile keeps − N +; ✕ and ⤒ stay in the deck's rows and in the popover. */
@media (max-width: 767px) {
    .card-tile .stepper__button--extra { display: none; }
}