/* Arb popup, line popup, price history */
/* arb popup: header, the two bets, what it pays, every book on one scale */
body.popped {
  overflow: hidden;
}
.pop {
  position: fixed;
  inset: 0;
  z-index: 60;
  display: grid;
  place-items: start center;
  padding: 8vh 16px 24px;
  background: rgb(8 12 16 / calc(0.5 * var(--pd, 1)));   /* the dim fades with the card (motion.js) */
  overflow-y: auto;
}
/* opening and closing: the card scales from the point that was pressed (motion.js sets the variables); only while it
   moves, so no transform stays on the card */
.pop.anim > .popcard {
  transform: scale(var(--ps, 1));
  transform-origin: var(--pox, 50%) var(--poy, 0);
  opacity: var(--po, 1);
  will-change: transform, opacity;
}
.popcard {
  width: min(700px, 100%);
  display: grid;
  gap: 16px;
  padding: 18px 20px 16px;
  background: var(--surface);
  border: 1px solid var(--line-strong);
  border-radius: 6px;
  box-shadow: var(--panel-shadow);
}
.popcard.arb {
  width: min(600px, 100%);
}
.popcard.gone .lgr,
.popcard.gone .scale {
  opacity: 0.5;
}
.ph {
  display: flex;
  align-items: center;
  gap: 14px;
}
.pg {
  display: flex;
  align-items: center;
  gap: 7px;
  font: 700 var(--t-xl)/1 var(--display);
  letter-spacing: 0.02em;
}
.pg img {
  width: 24px;
  height: 24px;
  object-fit: contain;
}
.pg i {
  font-style: normal;
  font: 500 var(--t-sm)/1 var(--body);
  color: var(--faint);
}
.pg .chip {
  margin-left: 6px;
  font: 600 var(--t-xs)/1 var(--body);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 3px 6px;
  border-radius: var(--r-sm);
  background: var(--flash-down);
  color: var(--bad);
}
/* the arb popup's head: the line as its title (the rung in the site's number face), the game small under it with
   Live and how long the arb has been open */
.popcard.arb .ph {
  align-items: flex-start;
}
.pt {
  flex: 1;
  min-width: 0;
  padding-top: 4px; /* one line sits centred on the 32px ×; a second line runs under it */
  font: 600 var(--t-xl)/1.25 var(--body);
  letter-spacing: -0.01em;
  color: var(--ink);
}
.pt b {
  font-family: var(--num);
  font-weight: 600;
}
.pg.sm {
  gap: 6px;
  margin-top: -6px;
  font: 600 var(--t-sm)/1 var(--display);
  color: var(--muted);
}
.pg.sm img {
  width: 16px;
  height: 16px;
}
.pg.sm .chip {
  margin-left: 2px;
}
.pg .age {
  margin-left: auto;
  font: 500 var(--t-sm)/1 var(--body);
  letter-spacing: 0;
  color: var(--faint);
  font-variant-numeric: tabular-nums;
}
.popcard.gone .pg .age {
  color: var(--near);
}
.pop .x {
  flex: none;
  width: 32px;
  height: 32px;
  border: 1px solid var(--line);
  border-radius: 4px;
  background: var(--surface);
  color: var(--muted);
  font: 400 20px/1 var(--body);
  cursor: pointer;
}
.pop .x:hover {
  color: var(--ink);
  background: var(--raised);
}
.pm {
  margin-top: -8px;
  font-size: var(--t-md);
  color: var(--muted);
}
.pm b {
  color: var(--ink);
  font-weight: 600;
}
.pm span {
  color: var(--faint);
}
.popcard.gone .pm span {
  color: var(--near);
  font-weight: 500;
}
.plegs {
  display: grid;
  border: 1px solid var(--line);
  border-radius: 4px;
  overflow: hidden;
}
.plh {
  display: grid;
  align-items: center;
  gap: 14px;
  padding: 8px 14px 8px 11px;
  background: var(--raised);
  font: 600 var(--t-xs)/1 var(--body);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--faint);
}
.plh .r {
  text-align: right;
}
.fs {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font: 500 var(--t-sm)/1 var(--body);
  color: var(--muted);
  white-space: nowrap;
  cursor: help;
}
.fs i {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--pos);
}
.fs.warn {
  color: var(--near);
}
.fs.warn i {
  background: var(--near);
}
.fs.bad {
  color: var(--bad);
}
.fs.bad i {
  background: var(--bad);
}
.tag {
  display: inline-block;
  font: 700 var(--t-xs)/1 var(--body);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 4px 7px;
  border-radius: var(--r-sm);
  cursor: help;
}
.tag.soft {
  background: var(--near-tint);
  color: var(--near);
}
.tag.sharp {
  background: var(--accent-tint);
  color: var(--accent-ink);
}
/* the ledger: a row per bet (logo · side · price · stake), a rule, then cost, the payout (typed) and profit, every
   money figure in the last column: the stakes add up to the cost, the payout less the cost is the profit. Hairlines
   between rows, no box; the profit is the one larger number */
.lgr {
  display: grid;
  grid-template-columns: 28px minmax(0, 1fr) auto minmax(92px, auto);
  column-gap: 16px;
  padding: 4px 16px;
  border-radius: 20px; /* the ledger as one pill (Avi 10/29): --far, the one neutral that stands off the card in both themes */
  background: var(--far);
}
.lr {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: subgrid;
  align-items: center;
  padding: 12px 0;
  border-top: 1px solid color-mix(in srgb, var(--ink) 12%, transparent); /* the card's hairline tokens vanish on --far */
}
.lr:first-child {
  border-top: 0;
}
.lr.tot {
  padding: 6px 0;
  border-top: 0;
}
.lr:not(.tot) + .lr.tot {
  margin-top: 2px;
  padding-top: 12px;
  border-top: 1px solid color-mix(in srgb, var(--ink) 24%, transparent);
}
.lr.tot:last-child {
  padding-bottom: 12px;
}
/* the book: its logo, the link */
.lr .bk,
.lr .bk a,
.lr .bk img {
  display: block;
  width: 28px;
  height: 28px;
}
.lr .bk img {
  border-radius: 6px;
  background: var(--surface); /* a logo on transparency (Bally's bare B) gets its own tile */
  object-fit: cover;
}
.lr .sd {
  font: 700 var(--t-xs)/1 var(--body);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.lr .pr,
.lr .st,
.lr.tot b {
  font: 600 var(--t-lg)/1 var(--num);
  color: var(--ink);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.lr .pr {
  justify-self: end;
  text-align: right;
}
/* an exchange leg's quantity, before its price: 1,850 × 93.50¢ (the same figure, lighter) */
.lr .pr small {
  margin-right: 6px;
  font: 500 var(--t-lg)/1 var(--num);
  color: var(--muted);
}
/* soft or sharp (and a slow feed): words after the side, in the side's own small caps, no box */
.lr .sd .tag,
.lr .sd .fs {
  margin-left: 10px;
  padding: 0;
  background: none;
  font: inherit;
  letter-spacing: inherit;
}
.lr .sd .tag.soft {
  color: var(--near);
}
.lr .sd .tag.sharp {
  color: var(--accent-ink);
}
.lr .st,
.lr.tot b,
.lr.tot .in {
  grid-column: 4; /* the money column, whether or not the price column has a figure (the return, max) */
  justify-self: end;
  text-align: right;
}
.lr.tot > span:first-child {
  grid-column: 1 / 4;
  font: 500 var(--t-sm)/1 var(--body);
  color: var(--muted);
}
.lr.profit b {
  color: var(--pos); /* the same figure as the rest of the column; green is its emphasis */
}
.lr.profit.neg b {
  color: var(--bad);
}
/* the return, and the payout's cap (the contracts resting at an arb): in the price column, under the two prices, so
   the profit and the payout box end on the money edge like the cost */
.lr.profit > span:first-child,
.lr.pay > span:first-child {
  grid-column: 1 / 3;
}
.lr .ret,
.lr .max {
  grid-column: 3;
  justify-self: end;
  font: 500 var(--t-lg)/1 var(--num);
  color: var(--muted);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.lr .max {
  cursor: help;
}
/* the payout box: its digits end on the money edge, the box's own padding and border hanging past it */
.lr .in {
  position: relative;
  display: block;
  width: 92px; /* its number, not a field: the $ stays beside it */
  margin-right: -10px;
}
.lr .in::before {
  content: '$';
  position: absolute;
  left: 9px;
  top: 50%;
  transform: translateY(-50%);
  font: 600 var(--t-lg)/1 var(--num);
  color: var(--faint);
  pointer-events: none;
}
.pay input {
  box-sizing: border-box;
  width: 100%;
  height: var(--ctl);
  padding: 0 9px 0 20px;
  border: 1px solid var(--line-strong);
  border-radius: 4px;
  background: var(--surface);
  color: var(--ink);
  font: 600 var(--t-lg)/1 var(--num);
  font-variant-numeric: tabular-nums;
  text-align: right;
  appearance: textfield;
  -moz-appearance: textfield;
}
.pay input::-webkit-outer-spin-button,
.pay input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}
.pay input:focus {
  outline: 2px solid var(--accent);
  outline-offset: -1px;
}
.scale {
  display: grid;
  gap: 0;
  padding-top: 14px;
  border-top: 1px solid var(--line);
}
.scale .plot {
  display: grid;
  grid-template-columns: 28px 1fr;
  gap: 8px;
  margin-top: 12px;
}
.scale .ll {
  position: relative;
}
.scale .ll span {
  position: absolute;
  right: 0;
  transform: translateY(-50%);
  font: 600 var(--t-xs)/1 var(--body);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--muted);
}
.scale .track {
  position: relative;
}
.scale .axl {
  position: absolute;
  left: 0;
  right: 0;
  top: 45px;
  border-top: 1px solid var(--line-strong);
}
.scale .axt {
  position: absolute;
  top: 50px;
  transform: translateX(-50%);
  padding: 0 3px;
  background: var(--surface);
  font: 500 var(--t-xs)/1 var(--body);
  color: var(--muted);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.scale .axt::before {
  content: '';
  position: absolute;
  left: 50%;
  top: -5px;
  height: 5px;
  border-left: 1px solid var(--line-strong);
}
.scale .band {
  position: absolute;
  left: 0;
  right: 0;
  height: 40px;
  border-radius: 4px;
  background: var(--sunk);
}
.scale .gl {
  position: absolute;
  top: 0;
  bottom: 0;
  border-left: 1px solid var(--line);
}
/* line popup: price history, each book's Yes price over time (a step line each), then first recorded / now per book */
.hist {
  display: grid;
  gap: 10px;
  padding-top: 14px;
  border-top: 1px solid var(--line);
}
.hist .hh {
  display: flex;
  align-items: baseline;
  gap: 10px;
  flex-wrap: wrap;
}
.hist .hh b {
  font: 600 var(--t-xs)/1 var(--body);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
}
.hist .hh span {
  font-size: var(--t-sm);
  color: var(--faint);
}
.hist .he {
  font-size: var(--t-sm);
  color: var(--muted);
}
.hist .hside {
  display: grid;
  gap: 8px;
}
.hist .hside + .hside {
  padding-top: 12px;
  border-top: 1px dashed var(--line-strong);
}
.hist .hs {
  font: 700 var(--t-xs)/1 var(--body);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink);
}
.hist .hp {
  display: grid;
  grid-template-columns: 52px minmax(0, 1fr) 66px;
  gap: 8px;
}
.hist .hy,
.hist .hl {
  position: relative;
  height: 130px;
}
.hist .hl img {
  position: absolute;
  width: 16px;
  height: 16px;
  margin-top: -8px;
  border-radius: 4px;
  background: var(--surface); /* a logo on transparency (Bally's bare B) gets its own tile */
  object-fit: cover;
  box-shadow:
    0 0 0 1px var(--surface),
    0 0 0 2.5px var(--bbc);
}
.hist .hy span {
  position: absolute;
  right: 0;
  transform: translateY(-50%);
  font: 500 var(--t-xs)/1 var(--body);
  color: var(--muted);
  white-space: nowrap;
}
.hist .hg {
  position: relative;
  height: 130px;
  border-bottom: 1px solid var(--line-strong);
  cursor: crosshair;
  touch-action: pan-y;
}
.hist .bottom .hg {
  margin-bottom: 20px;
}
.hist .hg > svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
}
.hist .hg path {
  fill: none;
  stroke-width: 1.75;
  stroke-linejoin: round;
  vector-effect: non-scaling-stroke;
}
.hist .hgl {
  position: absolute;
  left: 0;
  right: 0;
  border-top: 1px solid var(--line);
}
.hist .hx {
  position: absolute;
  top: calc(100% + 6px);
  transform: translateX(-50%);
  font: 500 var(--t-xs)/1 var(--body);
  color: var(--muted);
  white-space: nowrap;
}
.hist .hx::before {
  content: '';
  position: absolute;
  left: 50%;
  top: -6px;
  height: 5px;
  border-left: 1px solid var(--line-strong);
}
.hist .hx.first {
  transform: none;
}
.hist .hx.first::before {
  left: 0;
}
.hist .hx.last {
  transform: translateX(-100%);
}
.hist .hx.last::before {
  left: auto;
  right: 0;
}
.hist .hcur {
  position: absolute;
  top: 0;
  bottom: 0;
  border-left: 1px solid var(--ink);
  pointer-events: none;
}
.hist .htip {
  position: absolute;
  top: 4px;
  z-index: 2;
  display: grid;
  gap: 4px;
  min-width: 150px;
  padding: 8px 10px;
  background: var(--surface);
  border: 1px solid var(--line-strong);
  border-radius: 4px;
  box-shadow: 0 6px 18px rgb(0 0 0 / 0.12);
  pointer-events: none;
  font-size: var(--t-sm);
}
.hist .htip time {
  font-weight: 600;
  color: var(--ink);
}
.hist .htip div {
  display: grid;
  grid-template-columns: 8px 1fr auto;
  align-items: center;
  gap: 7px;
  color: var(--muted);
}
.hist .htip div i {
  width: 8px;
  height: 8px;
  border-radius: 2px;
  background: var(--c);
}
.hist .htip div b {
  font-weight: 600;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
}
.scale .gap {
  position: absolute;
  top: 0;
  bottom: 0;
  background: var(--pos-tint);
  opacity: 0.85;
}
.scale .fair {
  position: absolute;
  top: -12px;
  bottom: 0;
  border-left: 2px dashed var(--muted);
}
.scale .fair span {
  position: absolute;
  top: -1px;
  left: 5px;
  font: 600 var(--t-xs)/1 var(--body);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--muted);
}
.scale .tk {
  position: absolute;
  width: 2px;
  height: 6px;
  margin-left: -1px;
}
.scale .bm {
  position: absolute;
  width: 18px;
  height: 18px;
  margin-left: -9px;
  border-radius: 4px;
  background: var(--surface); /* a logo on transparency (Bally's bare B) gets its own tile */
  object-fit: cover;
  box-shadow: 0 0 0 1px var(--surface);
  opacity: 0.75;
  z-index: 1;
}
.scale .bm.leg {
  width: 22px;
  height: 22px;
  margin: -2px 0 0 -11px;
  opacity: 1;
  box-shadow:
    0 0 0 2px var(--surface),
    0 0 0 4px var(--bbc);
  z-index: 2;
}
/* the arb panel's scale and history share the ledger's guides: their lane and axis labels on the card's left edge, the
   plots from 44px in (the ledger's side column) to the right edge; the leg's logo on the history's line end */
.popcard.arb .scale .plot,
.popcard.arb .hist .hp {
  grid-template-columns: 28px minmax(0, 1fr);
  gap: 16px;
}
/* the scale as a pill like the ledger (Avi 10/29), with its own geometry (scaleHtml GM): the axis stays between the
   lanes as on the board's scale, every tick hanging to a line (the Yes ticks to the axis line, the No ticks to a
   hairline on their lane's top edge), the gridlines and fair line skipping the label row so nothing is knocked out,
   the edge green on both lines between the legs, no fair line, the inset 16px all round. Lines are ink tints: the
   card's tokens vanish on --far */
.popcard.arb .scale {
  padding: 16px;
  border-top: 0;
  border-radius: 20px;
  background: var(--far);
}
.popcard.arb .scale .plot {
  margin-top: 0;
}
.popcard.arb .scale .axl {
  top: 40px;
  border-top-color: color-mix(in srgb, var(--ink) 24%, transparent);
}
.popcard.arb .scale .mid {
  position: absolute;
  left: 0;
  right: 0;
  top: 62px;
  border-top: 1px solid color-mix(in srgb, var(--ink) 18%, transparent);
}
/* the edge: each line green from its leg's tick (green, to the logo) to the other leg's price, where a short foot
   points at the other lane, so the two bars bracket the edge between the legs */
.popcard.arb .scale .gap {
  top: 39px;
  bottom: auto;
  height: 3px;
  border-radius: 0;
  background: var(--pos);
  opacity: 1;
}
.popcard.arb .scale .gap::after {
  content: '';
  position: absolute;
  right: 0;
  top: 3px;
  width: 3px;
  height: 5px;
  background: var(--pos);
}
.popcard.arb .scale .gap.n {
  top: 61px;
}
.popcard.arb .scale .gap.n::after {
  right: auto;
  left: 0;
  top: -5px;
}
.popcard.arb .scale .tk.leg {
  width: 3px;
  margin-left: -1.5px;
  background: var(--pos) !important; /* the leg's tick over its inline book colour */
  z-index: 1;
}
.popcard.arb .scale .gl {
  top: 0;
  bottom: 62px;
  border-left-color: color-mix(in srgb, var(--ink) 10%, transparent);
}
.popcard.arb .scale .gl.n {
  top: 62px;
  bottom: 0;
}
.popcard.arb .scale .axt {
  top: 45px;
  padding: 0;
  background: none;
}
.popcard.arb .scale .axt::before {
  border-left-color: color-mix(in srgb, var(--ink) 24%, transparent);
}
.popcard.arb .scale .bm {
  box-shadow: 0 0 0 1px var(--far);
}
.popcard.arb .scale .bm.leg {
  width: 18px;
  height: 18px;
  margin: 0 0 0 -9px;
  box-shadow: 0 0 0 1px var(--far); /* the legs the size of the rest, no ring (Avi 10/29): their green ticks mark them */
}
.popcard.arb .scale .ll span,
.popcard.arb .hist .hs {
  right: auto;
  left: 0;
  font: 700 var(--t-xs)/1 var(--body);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
}
.popcard.arb .hist .hy span {
  font-family: var(--num);
}
.popcard.arb .hist .hg > img {
  position: absolute;
  width: 16px;
  height: 16px;
  margin-top: -8px;
  border-radius: 4px;
  background: var(--surface); /* a logo on transparency (Bally's bare B) gets its own tile */
  object-fit: cover;
  box-shadow:
    0 0 0 1px var(--surface),
    0 0 0 2.5px var(--bbc);
}
/* the history as a pill like the ledger and the scale (Avi 10/29): --far, 16px inset, its lines as ink tints */
.popcard.arb .hist {
  padding: 16px;
  border-top: 0;
  border-radius: 20px;
  background: var(--far);
}
.popcard.arb .hist .hside + .hside {
  border-top: 1px solid color-mix(in srgb, var(--ink) 12%, transparent);
}
.popcard.arb .hist .hgl {
  border-top-color: color-mix(in srgb, var(--ink) 10%, transparent);
}
.popcard.arb .hist .hg {
  border-bottom-color: color-mix(in srgb, var(--ink) 24%, transparent);
}
.popcard.arb .hist .hx::before {
  border-left-color: color-mix(in srgb, var(--ink) 24%, transparent);
}
.popcard.arb .hist .hg > img {
  box-shadow:
    0 0 0 1px var(--far),
    0 0 0 2.5px var(--bbc);
}
/* the arb panel's history: the range switch (the site's segmented control) on the head's right; the arb's two legs
   drawn over every other book */
.popcard.arb .hist .hh {
  align-items: center;
}
.popcard.arb .hist .hh .hsc {
  margin-left: auto;
}
.popcard.arb .hist .hh .hsc button {
  padding: 5px 9px;
  font-size: var(--t-xs);
}
/* the arb panel's chart: the edge, shaded between the two legs' lines where the No line is above the Yes line */
.hist .hg svg rect.edge {
  fill: var(--pos);
  opacity: 0.16;
}
.hist .hg path.ho {
  opacity: 0.22;
}
.hist .hg path.hf {
  stroke-width: 2.75;
}
.hist .hl img.ho {
  opacity: 0.4;
}
.pn {
  margin: 0;
  font-size: var(--t-xs);
  line-height: 1.45;
  color: var(--faint);
}
@media (max-width: 640px) {
  .pop {
    padding: 0;
    place-items: stretch;
  }
  .popcard {
    border-radius: 0;
    border: 0;
    min-height: 100%;
    align-content: start;
    padding: 14px 16px;
  }
  .plh {
    display: none;
  }
  .pt {
    font-size: 17px;
  }
  .lgr {
    grid-template-columns: 28px minmax(0, 1fr) auto auto;
    column-gap: 12px;
  }
  .arow .mk b {
    white-space: normal;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    font-size: var(--t-lg);
  } /* the market on up to two lines */
}
.adact {
  display: flex;
  align-items: center;
  gap: var(--s5);
  flex-wrap: wrap;
}
.adact small {
  font-size: var(--t-sm);
  color: var(--muted);
}
.link {
  justify-self: start;
  border: 0;
  background: none;
  color: var(--accent-ink);
  font: 600 var(--t-sm)/1 var(--body);
  cursor: pointer;
  padding: 0;
}

/* a past arb (pastPop, from a Replay row): its return over time as steps (a dot where it moved to other books), times
   under it; then every price change, the last row what ended it */
.rpp-chart {
  position: relative;
  padding: 0 0 18px 40px;
}
.rpp-plot {
  position: relative;
  height: 120px;
  border-bottom: 1px solid var(--line-strong);
}
.rpp-plot svg {
  display: block;
  width: 100%;
  height: 100%;
  overflow: visible;
}
.rpp-y {
  position: absolute;
  left: 0;
  top: 0;
  bottom: 18px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  font: 500 var(--t-xs)/1 var(--body);
  color: var(--faint);
  font-variant-numeric: tabular-nums;
}
.rpp-x {
  display: flex;
  justify-content: space-between;
  margin-top: 6px;
  font: 500 var(--t-xs)/1 var(--body);
  color: var(--faint);
  font-variant-numeric: tabular-nums;
}
.rpp-mv {
  position: absolute;
  width: 9px;
  height: 9px;
  margin: -5px 0 0 -5px;
  border: 2px solid var(--pos);
  border-radius: 50%;
  background: var(--surface);
}
.rpp-tbl {
  max-height: 320px;
  overflow-y: auto;
}
.rpp-r {
  display: grid;
  grid-template-columns: 92px minmax(0, 1fr) minmax(0, 1fr) 72px;
  align-items: center;
  gap: 12px;
  padding: 9px 14px;
  border-bottom: 1px solid var(--line);
  font-size: var(--t-sm);
  font-variant-numeric: tabular-nums;
}
.rpp-r.plh {
  padding-block: 8px;
  grid-template-columns: 92px minmax(0, 1fr) minmax(0, 1fr) 72px;
}
.rpp-r > span:first-child {
  color: var(--muted);
}
.rpp-r .lg {
  display: flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
  white-space: nowrap;
  overflow: hidden;
}
.rpp-r .lg img {
  width: 18px;
  height: 18px;
  border-radius: 4px;
}
.rpp-r .lg small {
  color: var(--faint);
  font-size: var(--t-xs);
  text-transform: uppercase;
  letter-spacing: 0.06em;
}
.rpp-r .r {
  text-align: right;
}
.rpp-r .r b {
  display: block;
  color: var(--pos);
}
.rpp-r .r small {
  color: var(--muted);
}
.rpp-end {
  border-bottom: 0;
  background: var(--raised);
}
.rpp-why {
  grid-column: 2 / -1;
  color: var(--muted);
}
@media (max-width: 640px) {
  .rpp-r,
  .rpp-r.plh {
    grid-template-columns: 64px minmax(0, 1fr) minmax(0, 1fr) 56px;
    gap: 8px;
    padding-inline: 10px;
  }
  .rpp-r .lg {
    font-size: 0;
  }
  .rpp-r .lg small,
  .rpp-r .lg b {
    font-size: var(--t-sm);
  }
}

/* a past arb's every book (pregame): its Yes and No at the price change picked (a row of the changes under it); the
   arb's two legs then in green */
.rpp-b {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 80px 80px;
  align-items: center;
  gap: 12px;
  padding: 8px 14px;
  border-bottom: 1px solid var(--line);
  font-size: var(--t-sm);
  font-variant-numeric: tabular-nums;
}
.rpp-b:last-child {
  border-bottom: 0;
}
.rpp-b.plh span:first-child {
  letter-spacing: 0.08em;
}
.rpp-b .lg {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
  white-space: nowrap;
}
.rpp-b .lg img {
  width: 18px;
  height: 18px;
  border-radius: 4px;
}
.rpp-b .r {
  text-align: right;
}
.rpp-b .best {
  color: var(--pos);
  font-weight: 700;
}
.rpp-none {
  font-size: var(--t-sm);
  color: var(--faint);
}
.rpp-r[data-t] {
  cursor: pointer;
}
.rpp-r[data-t]:hover {
  background: var(--raised);
}
.rpp-r.on {
  background: var(--pos-tint);
}
/* ---------- the arb panel: on a wide screen the Arbs tab's arb opens in a column beside the list (under the tab's
   controls and filters) instead of over it, so the live rows stay in view and clickable while one is worked. openPop
   moves #arbPop into #arbView and sets body.arbside; closePop puts it back. Narrower screens keep the popup. ---------- */
@media (min-width: 1600px) {
  body.arbside {
    --apw: 560px;
    overflow: auto;
  }
  body.arbside #arbView:not([hidden]) {
    display: grid;
    grid-template-columns: minmax(0, 1fr) var(--apw);
    column-gap: var(--s4);
    align-items: start;
  }
  body.arbside #arbView > :not(#arbRows, #arbPop) {
    grid-column: 1 / -1;
  }
  body.arbside #arbView > .pop {
    position: sticky;
    inset: auto;
    top: var(--s4);
    z-index: 1;
    display: block;
    max-height: calc(100vh / 1.2 - 2 * var(--s4)); /* the page's zoom (chrome.css) */
    padding: 0;
    background: none;
    overflow-y: auto;
  }
  body.arbside #arbView > .pop > .popcard {
    width: 100%;
    border-radius: 4px;
  }
  body.arbside #arbView > .pop.anim > .popcard {
    transform: translateX(calc((1 - var(--po, 1)) * 32px));
  }
  /* the list beside it: the Feed column goes (each leg's dot carries it in the panel), the rest tighten */
  body.arbside .arow,
  body.arbside .ahead {
    grid-template-columns: minmax(110px, 130px) minmax(120px, 1fr) minmax(190px, 230px) 64px 96px;
    gap: 12px;
    padding: 0 12px;
  }
  body.arbside .arow > .ck,
  body.arbside .ahead > :last-child {
    display: none;
  }
}