/* Card marketplace: same tokens, type, and feel as the rest of Below The Show. */
.mk-hero { display: grid; gap: var(--s-2); margin: var(--s-3) 0 var(--s-4); padding: var(--s-5) var(--s-4); border-radius: 18px; color: #fff;
  background-color: #1f4d36; background-image: radial-gradient(700px 240px at 10% 0%, #2f6b4c, #163a28); }
.mk-hero h1 { margin: 0; font-size: clamp(26px, 5vw, 40px); line-height: 1.05; letter-spacing: -.02em; }
.mk-hero p { margin: 0; color: #d7e8dc; max-width: 40rem; }
.mk-hero .btn { justify-self: start; }
.mk-tools { display: flex; flex-wrap: wrap; gap: var(--s-2); align-items: center; margin-bottom: var(--s-3); }
.mk-tools input[type="search"] { flex: 1 1 14rem; min-width: 0; }
.mk-tools select, .mk-tools input { min-height: 44px; }
.mk-chips { display: flex; gap: var(--s-2); flex-wrap: wrap; margin-bottom: var(--s-3); }
.mk-chip { border: 1px solid var(--chalk); background: var(--card); border-radius: 999px; min-height: 36px; padding: 0 14px; font: 600 14px var(--sans); cursor: pointer; color: var(--ink); }
.mk-chip[aria-pressed="true"] { background: var(--mustard); border-color: var(--mustard-strong); }
.mk-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(12.5rem, 1fr)); gap: var(--s-3); }
.mk-card { background: var(--card); border: 1px solid var(--chalk); border-radius: 14px; overflow: hidden; transition: transform .15s ease, box-shadow .15s ease; }
.mk-card:hover { transform: translateY(-2px); box-shadow: 0 10px 24px rgb(16 40 28 / .12); }
.mk-card__link { color: inherit; text-decoration: none; display: block; }
.mk-card__link:focus-visible { outline: 3px solid var(--forest); outline-offset: -3px; }
.mk-card__img { position: relative; aspect-ratio: 3 / 4; background: var(--paper); display: grid; place-items: center; overflow: hidden; }
.mk-card__img img { width: 100%; height: 100%; object-fit: cover; }
.mk-noimg { color: var(--muted); font-size: 13px; }
.mk-badge, .mk-serial { position: absolute; top: 8px; font: 700 12px/1 var(--sans); padding: 5px 8px; border-radius: 999px; background: rgb(255 255 255 / .92); color: var(--ink); }
.mk-badge { left: 8px; }
.mk-badge.is-graded { background: var(--forest); color: #fff; }
.mk-serial { right: 8px; background: var(--mustard); }
.mk-card__body { padding: var(--s-3); display: grid; gap: 6px; }
.mk-card__title { margin: 0; font-size: 15px; line-height: 1.3; font-weight: 700; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; min-height: 2.6em; }
.mk-card__price { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.mk-price { font: 800 19px/1 var(--sans); color: var(--ink); }
.mk-sub { font-size: 13px; color: var(--muted); }
.mk-card__meta { display: flex; justify-content: space-between; gap: 8px; align-items: center; min-height: 20px; }
.mk-time { font: 700 13px var(--sans); color: var(--forest); font-variant-numeric: tabular-nums; }
.mk-time.is-urgent { color: var(--brick); }
.mk-empty { grid-column: 1 / -1; padding: var(--s-5) var(--s-3); text-align: center; color: var(--muted); background: var(--card); border: 1px dashed var(--chalk); border-radius: 14px; }
.mk-closed { margin-top: var(--s-4); }

/* listing page */
.mk-listing { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: var(--s-5); align-items: start; margin-top: var(--s-3); }
@media (max-width: 820px) { .mk-listing { grid-template-columns: 1fr; gap: var(--s-4); } }
.mk-gallery__main { aspect-ratio: 3 / 4; background: var(--paper); border-radius: 16px; overflow: hidden; display: grid; place-items: center; border: 1px solid var(--chalk); }
.mk-gallery__main img { width: 100%; height: 100%; object-fit: contain; background: var(--card); }
.mk-thumbs { display: flex; gap: 8px; margin-top: 8px; overflow-x: auto; }
.mk-thumb { flex: 0 0 64px; height: 84px; border-radius: 8px; overflow: hidden; border: 2px solid transparent; padding: 0; background: var(--paper); cursor: pointer; }
.mk-thumb[aria-current="true"] { border-color: var(--forest); }
.mk-thumb img { width: 100%; height: 100%; object-fit: cover; }
.mk-panel { position: sticky; top: 84px; display: grid; gap: var(--s-3); }
@media (max-width: 820px) { .mk-panel { position: static; } }
.mk-panel h1 { margin: 0; font-size: clamp(22px, 3.4vw, 30px); line-height: 1.15; }
.mk-facts { display: flex; gap: 6px; flex-wrap: wrap; }
.mk-bidbox { background: var(--card); border: 1px solid var(--chalk); border-radius: 16px; padding: var(--s-4); display: grid; gap: var(--s-3); }
.mk-bidbox__now { display: flex; justify-content: space-between; align-items: flex-end; gap: var(--s-3); flex-wrap: wrap; }
.mk-bidbox__now .mk-price { font-size: 32px; }
.mk-clock { text-align: right; }
.mk-clock strong { display: block; font: 800 22px/1.1 var(--sans); color: var(--forest); font-variant-numeric: tabular-nums; }
.mk-clock strong.is-urgent { color: var(--brick); }
.mk-leading { padding: 10px 12px; border-radius: 10px; font-weight: 700; }
.mk-leading.is-you { background: var(--forest-tint); color: var(--forest); }
.mk-leading.is-out { background: var(--brick-tint); color: var(--brick); }
.mk-bidrow { display: flex; gap: 8px; }
.mk-bidrow input { flex: 1; min-width: 0; font: 700 18px var(--sans); min-height: 48px; }
.mk-quick { display: flex; gap: 6px; flex-wrap: wrap; }
.mk-quick button { flex: 1 1 auto; }
.mk-help { font-size: 13px; color: var(--muted); margin: 0; }
.mk-history { list-style: none; margin: 0; padding: 0; }
.mk-history li { display: grid; grid-template-columns: 1fr auto auto; gap: var(--s-2); padding: 8px 0; border-bottom: 1px solid var(--chalk); font-size: 14px; font-variant-numeric: tabular-nums; }
.mk-history li:last-child { border-bottom: 0; }
.mk-history .mk-hash { color: var(--muted); font: 12px var(--mono, ui-monospace, monospace); }
.mk-desc { white-space: pre-wrap; line-height: 1.5; }
.mk-trust { display: grid; gap: 6px; font-size: 14px; color: var(--ink-soft); }
.mk-trust div::before { content: "✓ "; color: var(--forest); font-weight: 800; }

/* orders */
.mk-steps { list-style: none; margin: var(--s-3) 0; padding: 0; display: grid; gap: 0; }
.mk-steps li { position: relative; padding: 0 0 var(--s-3) 30px; color: var(--muted); }
.mk-steps li::before { content: ""; position: absolute; left: 6px; top: 4px; width: 14px; height: 14px; border-radius: 50%; border: 2px solid var(--chalk); background: var(--card); }
.mk-steps li::after { content: ""; position: absolute; left: 12px; top: 20px; bottom: -2px; width: 2px; background: var(--chalk); }
.mk-steps li:last-child::after { display: none; }
.mk-steps li.is-done { color: var(--ink); }
.mk-steps li.is-done::before { background: var(--forest); border-color: var(--forest); }
.mk-steps li.is-now { color: var(--ink); font-weight: 700; }
.mk-steps li.is-now::before { border-color: var(--mustard-strong); background: var(--mustard); }
.mk-steps small { display: block; font-weight: 400; color: var(--muted); }
.mk-olist { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--s-2); }
.mk-orow { display: grid; grid-template-columns: 56px 1fr auto; gap: var(--s-3); align-items: center; padding: var(--s-3); background: var(--card); border: 1px solid var(--chalk); border-radius: 12px; color: inherit; text-decoration: none; }
.mk-orow:hover { border-color: var(--forest); }
.mk-orow img, .mk-orow .mk-noimg { width: 56px; height: 74px; object-fit: cover; border-radius: 6px; background: var(--paper); display: grid; place-items: center; }
.mk-orow strong { display: block; }
.mk-tabs { display: flex; gap: var(--s-2); margin: var(--s-2) 0 var(--s-3); }
.mk-tabs .btn[aria-pressed="true"] { background: var(--mustard); border-color: var(--mustard-strong); }

/* seller hub, account */
.mk-checklist { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--s-2); }
.mk-checklist li { display: grid; grid-template-columns: 32px 1fr auto; gap: var(--s-3); align-items: center; padding: var(--s-3); background: var(--card); border: 1px solid var(--chalk); border-radius: 12px; }
.mk-check { width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; font-weight: 800; background: var(--paper); color: var(--muted); }
.mk-checklist li.is-done .mk-check { background: var(--forest); color: #fff; }
.mk-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr)); gap: var(--s-2); margin: var(--s-3) 0; }
.mk-stat { background: var(--card); border: 1px solid var(--chalk); border-radius: 12px; padding: var(--s-3); }
.mk-stat strong { display: block; font: 800 22px var(--sans); }
.mk-stat span { font-size: 13px; color: var(--muted); }
.mk-list { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--s-2); }
.mk-list li { display: flex; justify-content: space-between; align-items: center; gap: var(--s-3); padding: var(--s-3); background: var(--card); border: 1px solid var(--chalk); border-radius: 12px; flex-wrap: wrap; }
.mk-form { display: grid; gap: var(--s-3); }
.mk-row2 { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-3); }
@media (max-width: 560px) { .mk-row2 { grid-template-columns: 1fr; } }
.mk-form .field { margin: 0; }
.mk-form input, .mk-form select, .mk-form textarea { width: 100%; box-sizing: border-box; min-height: 44px; font: inherit; padding: 8px 12px; border: 1px solid var(--chalk); border-radius: var(--r-control); background: var(--card); }
.mk-form textarea { min-height: 120px; }
.mk-photos { display: grid; grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); gap: 8px; }
.mk-photo { position: relative; aspect-ratio: 3 / 4; border-radius: 10px; overflow: hidden; background: var(--paper); border: 1px solid var(--chalk); }
.mk-photo img { width: 100%; height: 100%; object-fit: cover; }
.mk-photo button { position: absolute; top: 4px; right: 4px; width: 32px; height: 32px; border-radius: 50%; border: 0; background: rgb(0 0 0 / .65); color: #fff; cursor: pointer; }
.mk-photo__add { display: grid; place-items: center; text-align: center; color: var(--forest); font-weight: 700; cursor: pointer; border: 2px dashed var(--forest); background: var(--paper-sunk); }
.mk-photo__add input { position: absolute; inset: 0; opacity: 0; cursor: pointer; }
.mk-receive { background: var(--forest-tint); border-radius: 12px; padding: var(--s-3) var(--s-4); display: grid; gap: 4px; }
.mk-receive strong { font-size: 22px; color: var(--forest); }
.mk-seg { display: flex; border: 1px solid var(--chalk); border-radius: 12px; overflow: hidden; background: var(--card); }
.mk-seg label { flex: 1; display: flex; align-items: center; justify-content: center; gap: 6px; min-height: 48px; font-weight: 700; cursor: pointer; border-right: 1px solid var(--chalk); }
.mk-seg label:last-child { border-right: 0; }
.mk-seg input { position: absolute; opacity: 0; pointer-events: none; }
.mk-seg label:has(input:checked) { background: var(--mustard); }
.mk-seg label:focus-within { outline: 3px solid var(--forest); outline-offset: -3px; }
.mk-err { color: var(--brick); font-weight: 600; margin: 0; min-height: 1em; }
.mk-stripe { min-height: 120px; margin: var(--s-2) 0; }
.mk-dialog .btn--wide { width: 100%; margin-top: var(--s-2); }
.mk-cards-tab { margin-top: var(--s-4); }
.mk-cards-tab__head { display: flex; justify-content: space-between; align-items: center; gap: var(--s-3); flex-wrap: wrap; }
.mk-strip { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(11rem, 1fr); gap: var(--s-3); overflow-x: auto; padding-bottom: 6px; }
.mk-sales { font-size: 14px; color: var(--ink-soft); }
.mk-address { font-style: normal; background: var(--card); border: 1px solid var(--chalk); border-radius: 12px; padding: var(--s-3); line-height: 1.5; }
.mk-money { display: grid; grid-template-columns: 1fr auto; gap: 6px var(--s-3); margin: var(--s-3) 0; padding: var(--s-3); background: var(--card); border: 1px solid var(--chalk); border-radius: 12px; }
.mk-money dt { color: var(--ink-soft); }
.mk-money dd { margin: 0; text-align: right; font-variant-numeric: tabular-nums; }
.mk-dispute summary { cursor: pointer; font-weight: 700; min-height: 44px; display: flex; align-items: center; color: var(--brick); }
.mk-list li.is-new { border-color: var(--mustard-strong); background: var(--mustard-tint); }
.btn--wide { width: 100%; }
.mk-tools select, .mk-tools input[type="search"] { border: 1px solid var(--chalk); border-radius: var(--r-control); background: var(--card); padding: 0 12px; font: inherit; color: var(--ink); }
@media (max-width: 560px) {
  .mk-tools { display: grid; grid-template-columns: 1fr 1fr; }
  .mk-tools input[type="search"] { grid-column: 1 / -1; }
  .mk-tools select { width: 100%; min-width: 0; }
}
.mk-fair { display: grid; gap: var(--s-2); background: var(--card); border: 1px solid var(--chalk); border-left: 4px solid var(--forest); border-radius: 12px; padding: var(--s-3) var(--s-4); }
.mk-fair strong { display: block; font: 800 22px var(--sans); }
.mk-fair.is-none { border-left-color: var(--chalk); }
.mk-fair.is-none strong { font-size: 16px; }
.mk-fair__meta { display: flex; flex-wrap: wrap; gap: 6px var(--s-3); align-items: center; }
/* owner console and status */
.oc-tabs { display: flex; gap: 6px; overflow-x: auto; padding: 4px 0 var(--s-2); margin-bottom: var(--s-3); border-bottom: 1px solid var(--chalk); }
.oc-tabs .btn { flex: 0 0 auto; }
.oc-tabs .btn[aria-pressed="true"] { background: var(--mustard); border-color: var(--mustard-strong); }
.oc-switch { display: flex; justify-content: space-between; align-items: center; gap: var(--s-3); padding: var(--s-3) 0; border-bottom: 1px solid var(--chalk); flex-wrap: wrap; }
.oc-switch:last-child { border-bottom: 0; }
.oc-seg { display: flex; gap: 4px; }
.oc-seg .btn[aria-pressed="true"] { background: var(--forest); border-color: var(--forest); color: #fff; }
.oc-warn p { margin: 4px 0; font-weight: 600; color: var(--brick); }
.oc-ok { color: var(--forest); font-weight: 700; }
.oc-ok::before { content: "✓ "; }
.oc-list li { align-items: flex-start; }
.oc-acts { display: flex; gap: 6px; flex-wrap: wrap; }
.oc-link { text-decoration: none; color: inherit; }
.oc-link:hover { border-color: var(--forest); }
.oc-state { border-radius: 14px; padding: var(--s-4); margin: var(--s-3) 0 var(--s-4); border: 1px solid var(--chalk); background: var(--card); border-left: 6px solid var(--muted); }
.oc-state strong { font-size: 20px; }
.oc-state p { margin: 4px 0 0; }
.oc-state.is-ok { border-left-color: var(--forest); }
.oc-state.is-warn { border-left-color: var(--mustard-strong); }
.oc-state.is-down, .oc-state.is-off { border-left-color: var(--brick); }
.mk-hero__link { color: #fff; font-weight: 700; margin-left: var(--s-3); }

/* =====================================================================
   The auction Room (Build 2). Listing page and market home share these.
   The slab is the star: dark stage, a glow in the parallel's color, the
   price in big numerals, the ring clock beside it, bids flipping onto a board.
   ===================================================================== */
body.auc-room .page { max-width: var(--measure-wide); }

.auc-head { display: grid; gap: var(--s-2); margin: var(--s-3) 0 var(--s-4); }
.auc-head .lede { margin: 0; color: var(--ink-soft); max-width: 44rem; }
.auc-title { margin: var(--s-3) 0 var(--s-2); font: 600 var(--t-xl)/1.2 var(--serif); letter-spacing: -.01em; }
@media (min-width: 720px) { .auc-title { font-size: var(--t-2xl); } }
.auc-hero { margin: var(--s-3) 0 var(--s-4); }
.auc-hero__row { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; }
.auc-hero__ship { margin: 0; color: var(--muted); font-size: var(--t-sm); }
.auc-hero .big-num { font-size: clamp(32px, 6vw, 56px); }
.auc-hero .ring-clock { --ring: 128px; }
@media (max-width: 719px) { .auc-hero { padding: var(--s-4); } .auc-hero .ring-clock { --ring: 112px; } }

/* the stage: slab photo on a dark field, glowing in the parallel color */
.mk-gallery { --rail: var(--par-base); }
.mk-gallery__main {
  aspect-ratio: 3 / 4; border-radius: 18px; overflow: hidden; display: grid; place-items: center;
  background: radial-gradient(60% 50% at 50% 45%, color-mix(in srgb, var(--rail) 22%, transparent), transparent 70%), var(--paper-sunk);
  box-shadow: inset 0 0 0 1px var(--line), 0 0 60px color-mix(in srgb, var(--rail) 18%, transparent);
}
.mk-gallery__main img { width: 100%; height: 100%; object-fit: contain; background: transparent; filter: drop-shadow(0 24px 40px rgb(0 0 0 / .45)); }
.mk-thumb[aria-current="true"] { border-color: var(--mustard); }

/* bid panel */
.mk-bidbox { border-color: var(--line); }
.mk-bidrow input { font: 800 22px var(--mono); font-variant-numeric: tabular-nums; min-height: 52px; background: var(--paper-sunk); border: 1px solid var(--line); border-radius: var(--r-control); padding: 0 12px; color: var(--ink); }
.mk-bidrow .btn--primary { min-width: 6.5rem; font-weight: 800; }
.mk-leading.is-you { background: color-mix(in srgb, var(--live) 18%, transparent); color: var(--ink); border-left: 4px solid var(--live); }
.mk-leading.is-out { background: color-mix(in srgb, var(--danger) 18%, transparent); color: var(--ink); border-left: 4px solid var(--danger); }

/* bid board */
.auc-board { display: grid; gap: 2px; perspective: 800px; }
.auc-board .rail { margin: 0; }
.auc-board .rail__who strong { font-weight: 600; }
.auc-board .rail:first-child .rail__val { color: var(--mustard-ink); font-size: var(--t-lg); }
.auc-board__empty { padding: var(--s-3) 0; }

/* listing cards on the board */
.mk-card { border-left: 4px solid var(--rail, var(--line)); border-color: var(--line); border-left-color: var(--rail, var(--line)); }
.mk-card.is-live { box-shadow: 0 0 0 1px color-mix(in srgb, var(--live) 40%, transparent), 0 0 24px color-mix(in srgb, var(--live) 18%, transparent); }
.mk-card__live { position: absolute; left: 8px; bottom: 8px; }
.mk-card__img { position: relative; }
.mk-time.is-urgent { color: var(--danger); font-weight: 800; }

/* the live lane on the market home */
.auc-lane { display: grid; gap: var(--s-3); margin: 0 0 var(--s-5); }
.auc-lane__hero { text-decoration: none; color: inherit; }
.auc-lane__hero:hover { border-color: var(--mustard-strong); }
.auc-lane__hero .hero-live__media img { height: 170px; }
.auc-lane__noimg { height: 170px; width: 128px; display: grid; place-items: center; border-radius: 10px; background: var(--paper-sunk); color: var(--muted); font-size: var(--t-sm); }
.auc-lane__queue { display: grid; gap: 2px; }
.auc-lane__h { margin: 0 0 4px; font: 600 var(--t-sm)/1 var(--sans); color: var(--muted); }
.auc-lane .rail { text-decoration: none; color: inherit; }
.auc-lane .rail:hover { background: color-mix(in srgb, var(--rail) 14%, transparent); }

/* ---------- listing rails (Build 4): watchlist, seller hub, queues ---------- */
.mk-rail { text-decoration: none; color: inherit; }
.mk-rail:hover { background: color-mix(in srgb, var(--rail) 14%, transparent); }
.mk-rail__img { width: 48px; height: 64px; object-fit: cover; border-radius: 6px; background: var(--paper-sunk); display: grid; place-items: center; }
.mk-rail.is-live { box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--live) 35%, transparent); }
.mk-rail .mk-time { font: 700 var(--t-sm)/1 var(--mono); font-variant-numeric: tabular-nums; color: var(--live); white-space: nowrap; }
.mk-rail .mk-time.is-urgent { color: var(--danger); }
.meter.is-bad span { background: var(--danger); }

/* orders as rails with a progress meter */
.ord-rail { display: grid; gap: 6px; padding: 10px 12px; border-radius: 10px; border-left: 4px solid var(--rail, var(--muted)); background: rgb(255 255 255 / .03); text-decoration: none; color: inherit; margin-bottom: 4px; }
.ord-rail:hover { background: color-mix(in srgb, var(--rail) 14%, transparent); }
.ord-rail__top { display: grid; grid-template-columns: 48px 1fr auto; gap: 10px; align-items: center; }
.ord-rail__top img, .ord-rail__top .mk-noimg { width: 48px; height: 64px; object-fit: cover; border-radius: 6px; background: var(--paper-sunk); display: grid; place-items: center; }
.ord-rail__who { display: grid; min-width: 0; } .ord-rail__who strong { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ord-rail__val { font: 800 var(--t-md)/1 var(--mono); font-variant-numeric: tabular-nums; }
.ord-rail__foot { display: flex; align-items: center; gap: 10px; }
.ord-rail__foot .meter { flex: 1; }
.ord-rail__foot small { color: var(--muted); white-space: nowrap; }

/* seller hub numbers */
.mk-stats { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--s-3); }
@media (min-width: 720px) { .mk-stats { grid-template-columns: repeat(4, 1fr); } }
.mk-stat { background: var(--card); border: 1px solid var(--line); border-radius: 14px; padding: var(--s-3) var(--s-4); }
.mk-stat .big-num { font-size: clamp(22px, 3.2vw, 34px); }

/* the sell Room: form on the left, the listing taking shape on the right */
.sell-room { display: grid; grid-template-columns: minmax(0, 1fr) minmax(280px, .8fr); gap: var(--s-5); align-items: start; }
@media (max-width: 900px) { .sell-room { grid-template-columns: 1fr; } .sell-preview { position: static; } }
.sell-preview { position: sticky; top: 84px; display: grid; gap: var(--s-3); }
.sell-preview__stage { aspect-ratio: 3 / 4; max-height: 360px; border-radius: 18px; display: grid; place-items: center; overflow: hidden;
  background: radial-gradient(60% 50% at 50% 45%, color-mix(in srgb, var(--rail) 26%, transparent), transparent 70%), var(--paper-sunk);
  box-shadow: inset 0 0 0 1px var(--line), 0 0 60px color-mix(in srgb, var(--rail) 18%, transparent); }
.sell-preview__stage img { width: 100%; height: 100%; object-fit: contain; filter: drop-shadow(0 24px 40px rgb(0 0 0 / .45)); }
.sell-preview__stage .mk-noimg { font-size: var(--t-sm); }
.sell-preview__title { margin: 0; font: 600 var(--t-lg)/1.25 var(--sans); }
.sell-steps { display: grid; gap: 6px; margin: 0 0 var(--s-4); }
.sell-steps__row { display: flex; justify-content: space-between; font-size: var(--t-xs); color: var(--muted); }
.sell-steps__row b { color: var(--ink); }
.par-pick { display: flex; flex-wrap: wrap; gap: 6px; }
.par-pick button { --rail: var(--par-base); min-height: 36px; padding: 0 12px; border-radius: 999px; border: 1px solid var(--line); background: var(--card); color: var(--ink); font: 600 var(--t-sm)/1 var(--sans); cursor: pointer; border-left: 4px solid var(--rail); }
.par-pick button[aria-pressed="true"] { background: color-mix(in srgb, var(--rail) 22%, var(--card)); border-color: var(--rail); }

/* the live page */
.live-room { display: grid; gap: var(--s-4); }
.live-room__queue { display: grid; gap: 2px; }
.live-room__h { margin: 0; font: 600 var(--t-sm)/1 var(--sans); color: var(--muted); }
.live-room .auc-hero { margin: 0; }
.live-room__bids { display: grid; grid-template-columns: 1fr; gap: var(--s-4); }
@media (min-width: 900px) { .live-room__bids { grid-template-columns: 1.2fr 1fr; } }

/* Fix 60: nothing on the auction pages is wider than the screen */
body.auc-room { overflow-x: hidden; }
body.auc-room .page > * { max-width: 100%; min-width: 0; }
.mk-bidrow { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px; }
.mk-bidrow input { min-width: 0; width: 100%; }
.mk-quick { display: flex; flex-wrap: wrap; gap: 6px; }
.mk-quick .btn { flex: 1 1 auto; }
.auc-hero .big-num small, .auc-lane .big-num small { white-space: normal; overflow-wrap: anywhere; max-width: 100%; }
.auc-board .rail, .live-room .rail, .auc-lane .rail { min-width: 0; }
.auc-board .rail__val, .auc-lane .rail__val { max-width: 9rem; overflow: hidden; text-overflow: ellipsis; }
.live-room__bids { min-width: 0; }
/* Fix 61: on phones the hero is one compact row: thumb · chips/price/title · ring */
@media (max-width: 719px) {
  .auc-hero.hero-live--media, .live-room .auc-hero { grid-template-columns: auto minmax(0, 1fr) auto; text-align: left; justify-items: start; align-items: center; padding: var(--s-3); gap: var(--s-2); }
  .auc-hero .hero-live__media { grid-row: auto; }
  .auc-hero .hero-live__media img, .auc-hero .auc-lane__noimg { height: 84px; width: 60px; border-radius: 8px; }
  .auc-hero .auc-lane__noimg { font-size: 10px; }
  .auc-hero .big-num { font-size: 26px; }
  .auc-hero .ring-clock { --ring: 76px; }
  .auc-hero__row .chip { font-size: 11px; min-height: 22px; padding: 0 8px; }
  .auc-hero__ship { font-size: var(--t-xs); }
}

/* an ended auction's clock (Fix 104) */
.ring-clock.is-ended { display: grid; place-items: center; }
.ring-ended { text-align: center; } .ring-ended strong { display: block; font: 800 var(--t-md)/1 var(--sans); } .ring-ended small { color: var(--muted); font-size: var(--t-xs); }

/* a field the server would refuse (Fix 117) */
.field-problem { margin: 4px 0 0; color: var(--danger); font-size: var(--t-xs); }
input.is-bad { border-color: var(--danger); }
/* Starting bid and Reserve line up (Fix 112) */
.mk-row2 > .field { display: grid; align-content: start; }

/* ---------- the price index on the page (Fix 67) ---------- */
.pi-box { display: grid; gap: 10px; padding: 12px 14px; border-radius: 14px; background: var(--card); border: 1px solid var(--line); }
.pi-box.is-none { color: var(--muted); }
.pi-box__head { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.pi-box__nums { display: flex; gap: 16px; flex-wrap: wrap; }
.pi-box__nums span { display: grid; } .pi-box__nums small { font-size: 10px; color: var(--muted); text-transform: uppercase; letter-spacing: .04em; } .pi-box__nums strong { font: 800 var(--t-md)/1.2 var(--mono); }
.pi-strip { position: relative; display: flex; align-items: flex-end; gap: 3px; height: 64px; padding: 4px 0; border-bottom: 1px solid var(--line); }
.pi-bar { flex: 1 1 0; max-width: 18px; border-radius: 3px 3px 0 0; background: var(--live); opacity: .85; }
.pi-bar--ebay { background: var(--mustard); }
.pi-est { position: absolute; left: 0; right: 0; border-top: 1px dashed var(--ink-soft); }
.pi-ask { display: grid; gap: 6px; }
.pi-ask__words { font-size: var(--t-sm); font-weight: 600; }
.pi-read { font-size: var(--t-sm); font-weight: 700; }
.pi-read--below { color: var(--live); } .pi-read--above { color: var(--warn); } .pi-read--at { color: var(--ink); }
.pi-askhost { display: grid; gap: 8px; margin-top: 8px; }
.pi-book { display: grid; gap: 8px; padding: 10px 12px; border-radius: 12px; background: var(--paper-sunk); }
.pi-book__nums { display: flex; gap: 16px; } .pi-book__nums span { display: grid; } .pi-book__nums small { font-size: 10px; color: var(--muted); text-transform: uppercase; letter-spacing: .04em; } .pi-book__nums strong { font: 800 var(--t-md)/1.2 var(--mono); }
.pi-bidform { display: flex; gap: 8px; } .pi-bidform input { flex: 1; min-width: 0; }