/* ══ market ══════════════════════════════════════════════════════════════
 * A shop is a card, a product is a line, an offer is a row. The reading order
 * never changes: what it is, who runs it, what it costs, and the button.
 */

/* ── shop cards ─────────────────────────────────────────────────────── */
.shop-card { display: flex; gap: 13px; align-items: center; padding: 15px;
  text-align: left; cursor: pointer; border-radius: var(--r-lg);
  background: var(--panel-2); border: 2px solid var(--border); box-shadow: none;
  transition: transform .15s, border-color .15s; }
@media (hover: hover) {
  .shop-card:hover:not(:disabled) { transform: translateY(-2px);
    border-color: var(--accent); color: var(--text); }
}
.shop-sign { font-size: 26px; }
.shop-info { flex: 1; min-width: 0; display: grid; gap: 2px; }
.shop-info > b { font-family: var(--font-display); font-size: 15.5px; font-weight: 600;
  color: var(--text-hi); }
.shop-preview { display: flex; gap: 4px; margin-top: 2px; }
.shop-go { color: var(--accent); font-size: 17px; }

/* ── shelves ────────────────────────────────────────────────────────── */
.shelf { display: grid; gap: 8px; }
.shelf-row { display: flex; align-items: center; gap: 12px; padding: 11px 12px;
  border: 1.5px solid var(--border); border-radius: var(--r-md); background: var(--panel);
  /* A shelf row now carries a quantity picker, so it needs room to breathe. */
  flex-wrap: wrap; }
.shelf-main { flex: 1 1 180px; min-width: 0; }
.shelf-price { font-weight: 600; color: var(--gold); white-space: nowrap; }
.shelf-qty { justify-content: flex-end; }
/* Your own row: set a new asking price in place, or take the goods back. */
.shelf-mine { gap: 6px; align-items: center; flex-wrap: wrap; justify-content: flex-end; }
.shelf-mine .price-input { width: 84px; text-align: center; margin: 0; }
/* A store item, as a card in a grid rather than a line in a list - the same
   information, laid out where the screen actually has room for it. */
.shop-item-card { gap: 10px; }
.shop-item-foot { justify-content: space-between; align-items: center; }
.shop-item-foot .shelf-price { font-size: 14.5px; }

/* A shelf line is one *product*, not one seller's offer - "Wheat, 6 sellers,
   4–9 ⭗" instead of the same word six times. It is a button because opening it
   is the whole point: behind it are the individual offers, cheapest first. */
.shelf-line { cursor: pointer; text-align: left; }
@media (hover: hover) {
  .shelf-line:hover { border-color: var(--accent); }
}
.shelf-line .shop-go { margin-left: auto; }

/* Is this shelf a deal or a mugging? Read off the item's catalog value. */
.chip.bargain { background: rgba(66, 201, 124, .14); border-color: rgba(66, 201, 124, .35); color: var(--ok); }
.chip.steep { background: rgba(255, 159, 67, .14); border-color: rgba(255, 159, 67, .35); color: var(--warn); }
.chip.met { border-color: rgba(66, 201, 124, .35); color: var(--ok); }

/* ── picking what to sell ───────────────────────────────────────────── */
/* A grid of what you actually own, big icon first. A dropdown of item names
   asks you to read; this asks you to recognise, which is faster and is how a
   bag is remembered in the first place. */
.pick-grid { grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); margin: 10px 0; }
.pick-card { align-items: center; text-align: center; gap: 6px; padding: 12px 10px;
  cursor: pointer; }
.pick-card .qty-badge { margin: 0; }
.pick-card .fine { margin-top: auto; }
/* The one already picked, unmistakably: this grid *is* the choice, so the
   chosen card carries the accent the way a lit segment does. */
.pick-card.on { border-color: var(--accent);
  background: rgba(75, 123, 236, .12); box-shadow: inset 0 0 0 1px var(--accent); }
@media (hover: hover) {
  .pick-card:hover { border-color: var(--accent); }
}
/* The kit's item picker inside a dialog: the bag scrolls within its own well
   so the quantity row and the confirm button never drift out of reach under a
   forty-stack inventory. */
.bag-grid { max-height: 300px; overflow-y: auto; overscroll-behavior: contain;
  padding: 2px; }

/* Venue and shop pickers reuse the shelf row: same shape, same reading order -
   what it is, who runs it, what it costs, and the button. */
.venue-list { display: grid; gap: 8px; }
.venue-row .row { margin-top: 4px; gap: 6px; flex-wrap: wrap; }
.shelf-controls { gap: 8px; align-items: center; margin-bottom: 10px; }
.shelf-controls .search-row { flex: 1; }

/* ── the phone ──────────────────────────────────────────────────────── */
@media (max-width: 920px) {
  .shelf-mine button { min-height: 40px; min-width: 40px; }
  /* A shelf row is four things that fit on one line on a desktop and cannot
     here. Split it the way it reads: what and how much on top, the price beside
     the name where the eye already is, and the commitment on its own full-width
     line - which is also the only line a thumb has to hit accurately. */
  .shelf-row { align-items: flex-start; row-gap: 10px; }
  .shelf-icon { margin-top: 2px; }
  .shelf-price { margin-left: auto; padding-top: 3px; }
  .shelf-row > button, .shelf-mine { flex: 1 0 100%; }
  .shelf-mine { justify-content: flex-start; }
  .shelf-mine .price-input { flex: 1 1 auto; width: auto; }
}
@media (max-width: 560px) {
  /* Names and prices need the room more than the padding does. */
  .shop-card { padding: 14px; }
  .shelf-row { padding: 10px; gap: 10px; }
  /* `.pick-grid` sets its own tracks, so it has to be narrowed rather than
     inheriting `.grid`'s phone floor. It stays a *grid* - this used to be
     `1fr`, which turned choosing an item out of a full bag into a hundred-row
     scroll on the screen least able to afford one. A picker is tiles by
     nature: an icon, a count, a name. Three across at 360px. */
  .pick-grid { grid-template-columns: repeat(auto-fill, minmax(min(100%, 98px), 1fr)); }
}