.auc{padding:clamp(1rem,2.6vw,1.9rem);display:grid;gap:1rem}
.auc:focus-visible{outline:none;box-shadow:inset 0 0 0 2px var(--yellow)}

/* price axis — same grid as a bid row, so ticks sit over the bars */
.auc__axis{opacity:1!important;filter:none!important;padding-block:0;align-items:end;min-height:1.2rem}
.auc__axis-track{position:relative;height:1.1rem}
.auc__tick{position:absolute;bottom:0;transform:translateX(-50%);white-space:nowrap}
.auc__tick:first-child{transform:translateX(-15%)}
.auc__tick:last-child{transform:translateX(-85%)}
.auc__tick b{font-family:var(--mono);font-size:.6rem;font-weight:500;letter-spacing:.08em;color:var(--text-4)}

.auc__rows{display:grid;gap:.42rem;position:relative}

.auc__row{
  display:grid;align-items:center;gap:0 .75rem;
  grid-template-columns:2.2rem 7.4rem minmax(0,1fr) 6.2rem 2.4rem;
  padding:.5rem .55rem;border:1px solid transparent;border-radius:var(--radius);
  opacity:.3;filter:saturate(.25);
  transition:opacity var(--dur-2) var(--ease),filter var(--dur-2) var(--ease),
             background var(--dur-2) var(--ease),border-color var(--dur-2) var(--ease);
}
.auc__row.is-on{opacity:1;filter:none}
.auc__row.is-cur{background:var(--surface-2);border-color:var(--line-2)}

.auc__row[data-party="goog"]{--p:var(--cyan);--p-deep:var(--cyan-deep)}
.auc__row[data-party="merc"]{--p:var(--violet);--p-deep:var(--violet-deep)}

.auc__no{font-size:.62rem;font-weight:600;letter-spacing:.1em;color:var(--text-4);text-align:right}
.auc__row.is-cur .auc__no{color:var(--yellow)}
.auc__row.is-winner.is-on .auc__no{color:var(--yellow)}

.auc__who{display:grid;gap:.05rem;min-width:0}
.auc__who b{font-family:var(--mono);font-size:.76rem;font-weight:600;letter-spacing:.03em;color:var(--p)}
.auc__kind{font-style:normal;font-family:var(--mono);font-size:.56rem;line-height:1.25;letter-spacing:.07em;text-transform:uppercase;color:var(--text-4)}
.auc__row.is-raw .auc__kind{color:var(--violet)}

.auc__track{position:relative;height:1.35rem;background:var(--surface);border-radius:2px;overflow:hidden;box-shadow:inset 0 0 0 1px var(--line-soft)}
.auc__fill{
  position:absolute;left:0;top:0;bottom:0;width:0;border-radius:2px;
  background:linear-gradient(90deg,var(--p-deep),var(--p));
  transition:width var(--dur-4) var(--ease);
}
.auc__row.is-raw .auc__fill{
  background:var(--violet-deep);
  background-image:repeating-linear-gradient(45deg,var(--violet) 0 2px,transparent 2px 6px);
  box-shadow:inset 0 0 0 1px var(--violet);
}
.auc__row.is-backup .auc__fill{
  background:transparent;box-shadow:inset 0 0 0 1px var(--violet);
  background-image:repeating-linear-gradient(90deg,var(--violet-deep) 0 3px,transparent 3px 7px);
}

.auc__amt{font-size:.82rem;font-weight:500;color:var(--text);text-align:right;letter-spacing:-.02em}
.auc__row.is-winner.is-on .auc__amt{color:var(--yellow)}

.auc__flag{font-size:.55rem;font-weight:600;letter-spacing:.1em;color:var(--text-4);text-align:right}
.auc__row.is-winner .auc__flag{color:var(--yellow)}

/* the backup bid is not part of the ladder; separate it */
.auc__row.is-backup{margin-top:.5rem;border-top:1px dashed var(--line-2);border-radius:0 0 var(--radius) var(--radius);padding-top:.75rem}

.auc__cap{
  border-top:1px solid var(--line);padding-top:.95rem;display:grid;gap:.42rem;min-height:5.4rem;
}
.auc__cap-lab{color:var(--yellow);letter-spacing:.14em}
.auc__cap-body{font-size:.94rem;line-height:1.55;color:var(--text-2);max-width:62ch}
.auc__cap-body em{color:var(--violet);font-style:italic}

.auc__ctrl{border-top:1px solid var(--line);padding-top:.9rem}

/* ------- narrow: the row form survives, the columns restack ------- */
@media (max-width:720px){
  .auc{--auc-lead:0rem;--auc-tail:0rem;gap:.85rem}
  .auc__axis{height:.95rem}
  .auc__tick::after{display:none}
  .auc__axis{grid-template-areas:"no who amt" "trk trk trk"}
  .auc__axis-track{grid-area:trk}
  .auc__row{
    grid-template-columns:2rem minmax(0,1fr) auto;
    grid-template-areas:"no who amt" "trk trk trk";
    row-gap:.4rem;padding:.6rem .55rem;
  }
  .auc__no{grid-area:no}
  .auc__who{grid-area:who}
  .auc__amt{grid-area:amt;font-size:.86rem}
  .auc__track{grid-area:trk;height:1.15rem}
  .auc__flag{display:none}
  .auc__row.is-winner.is-on .auc__who b::after{content:" \00b7 WON";color:var(--yellow);font-size:.6rem;letter-spacing:.1em}
  .auc__row.is-backup .auc__who b::after{content:" \00b7 STANDBY";color:var(--text-4);font-size:.6rem;letter-spacing:.1em}
  .auc__ctrl{gap:.7rem;justify-content:center}
  .auc__cap{min-height:6.6rem}
}
@media (max-width:420px){
  .auc__kind{font-size:.54rem}
  .auc__amt{font-size:.78rem}
}