/* The board: sections, market rows, axis, tables, lists */
.section {
  margin-bottom: var(--s6);
}
.section.d1 > .panel,
.section.lp > .panel,
.section.kick > .panel {
  background: none;
  border: 0;
  box-shadow: none;
  border-radius: 0;
  overflow: visible;
}
/* the Kicking tab: kicker boxes (every cell labelled with its line), then Game / Which team / Both teams; the 1st drive's
   boxes, stacked as Passing's */
.section.kick .onlyg,
.section.d1 .onlyg {
  display: grid;
  gap: var(--s5);
}
.section-h.kh {
  display: flex;
  align-items: center;
  gap: var(--s2);
}
.section-h.kh img {
  width: 18px;
  height: 18px;
  object-fit: contain;
}
.tdg.kk > span {
  height: 48px;
}
.pgroups {
  display: grid;
  gap: var(--s5);
}
.tdg > span.gs {
  box-shadow: inset 0 1px 0 var(--line-strong);
} /* a band table's row starting a new group (tables.js gsRow) */
.section-h .csh {
  font: 500 var(--t-xs)/1 var(--body);
  letter-spacing: 0.06em;
  color: var(--muted);
  margin-left: 6px;
}
.csboxes {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(480px, 100%), 1fr));
  gap: var(--s5);
  align-items: start;
}
.panel.csp {
  display: grid;
  gap: 0;
}
.cspair {
  display: grid;
}
.cst {
  max-height: 432px;
  overflow-y: auto;
}
.cst + .cst {
  border-left: 1px solid var(--line);
}
.tdg.csq {
  grid-template-columns: minmax(52px, 1fr) minmax(88px, 1.2fr);
  overflow: visible;
  background: none;
}
.tdg.csq .th {
  position: sticky;
  top: 0;
  z-index: 1;
  gap: 5px;
}
.tdg.csq .th img {
  width: 14px;
  height: 14px;
  object-fit: contain;
}
.tdg .tc.blank {
  border-bottom: 1px solid var(--line);
}
.tdg .tc.ln {
  font: 500 var(--t-md)/1 var(--body);
  font-variant-numeric: tabular-nums;
} /* a line value: the row labels' type */
.tdg .tn.sub span {
  padding-left: var(--s4);
  color: var(--muted);
}
.kstack {
  display: grid;
  gap: var(--s5);
  align-content: start;
}
/* a tab's section heading (1st score: First score, First touchdown, Last score): above its boxes, a rule under it */
.grp-h {
  margin: var(--s3) 0 calc(-1 * var(--s2));
  padding-bottom: var(--s2);
  border-bottom: 1px solid var(--line-strong);
  font: 700 var(--t-xl)/1 var(--display);
  letter-spacing: 0.03em;
  text-transform: uppercase;
  color: var(--ink);
} /* the box titles' (MONEYLINE's) type, a rule under it */
.grp-h:first-child {
  margin-top: 0;
}
.knote {
  margin: calc(-1 * var(--s3)) 0 0;
  font-size: var(--t-xs);
  color: var(--muted);
}
.tdg .th.l img {
  width: 14px;
  height: 14px;
  object-fit: contain;
  vertical-align: -2px;
}
/* a grid of outcomes (tables.js outcomeGrid): each team named once on its axis, over the columns and up the side; a cell
   shaded by how likely it is next to the grid's likeliest (--h, 0 to 1) */
.tdg.og .ogx {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 8px 0;
  font: 600 var(--t-xs)/1 var(--body);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--muted);
}
.tdg.og > .ogx,
.tdg.og > .ogc {
  border-bottom: 0;
}
.tdg.og > .ogx.y {
  height: auto;
  align-self: stretch;
  flex-direction: column;
  padding: 0 6px;
}
.tdg.og .ogx.y span {
  writing-mode: vertical-rl;
  transform: rotate(180deg);
}
.tdg.og .ogx img {
  width: 14px;
  height: 14px;
  object-fit: contain;
}
/* the rows' labels as the columns': both are the axis's values, not row names */
.tdg.og .tn {
  justify-content: center;
  padding: 0 var(--s3);
  background: var(--raised);
  font: 500 var(--t-xs)/1 var(--body);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--muted);
}
.tdg.og > .tc:not(.blank):not(.arb) {
  background: color-mix(in oklab, var(--accent) calc(var(--h, 0) * 34%), var(--surface));
}
.d1pair {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(320px, 100%), 1fr));
  gap: var(--s5);
  align-items: start;
}
/* By player: the list (a column per team, its players by position) and a player's page (his name, the line switch, the
   player menu, then the board's boxes); a player's name in any table opens his page */
.pview .phead {
  margin-bottom: var(--s5);
}
.pview .phead.on {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--s3) var(--s4);
}
.pview .phead .knote {
  margin: 0;
}
.pback {
  border: 1px solid var(--line-strong);
  border-radius: var(--r);
  background: var(--surface);
  padding: 7px 11px;
  cursor: pointer;
  font: 500 var(--t-sm)/1 var(--body);
  color: var(--muted);
}
.pback::before {
  content: '‹ ';
}
.pback:hover {
  color: var(--ink);
}
.pwho {
  display: flex;
  align-items: center;
  gap: var(--s3);
  min-width: 0;
}
.pwho img {
  width: 40px;
  height: 40px;
  object-fit: contain;
}
.pwho h1 {
  margin: 0;
  font: 700 var(--t-2xl)/1 var(--display);
  letter-spacing: 0.02em;
  text-transform: uppercase;
}
.pwho small {
  display: block;
  margin-top: 4px;
  font-size: var(--t-sm);
  color: var(--muted);
}
.pwho .parb {
  color: var(--pos);
  font-weight: 600;
}
.pctl {
  display: flex;
  align-items: center;
  gap: var(--s2);
  margin-left: auto;
}
.pctl select {
  height: 30px;
  max-width: 240px;
  padding: 0 var(--s2);
  border: 1px solid var(--line-strong);
  border-radius: var(--r);
  background: var(--surface);
  color: var(--ink);
  font: 500 var(--t-sm)/1 var(--body);
}
.pbody {
  display: grid;
  gap: var(--s5);
}
.pbody .knote {
  margin: 0;
}
.pbody .d1pair {
  grid-template-columns: repeat(auto-fill, minmax(min(400px, 100%), 1fr));
} /* a box alone keeps half the width */
.tdg .tc.pmain {
  background: var(--accent-tint);
}
.pk {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(440px, 100%), 1fr));
  gap: var(--s5);
  align-items: start;
}
.pkg {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(176px, 1fr));
  gap: 6px;
  padding: var(--s3) var(--s4) var(--s4);
}
.pkg + .pkg {
  border-top: 1px solid var(--line);
}
.pkh,
.pfh {
  grid-column: 1 / -1;
  padding: 2px 0 4px;
  font: 600 var(--t-xs)/1 var(--body);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--faint);
}
.pkb {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  column-gap: var(--s2);
  align-items: center;
  padding: 8px 10px;
  border: 1px solid var(--line);
  border-radius: var(--r);
  background: var(--surface);
  text-align: left;
  cursor: pointer;
}
.pkb:hover {
  background: var(--raised);
  border-color: var(--line-strong);
}
.pkn {
  font: 600 14px/1.2 var(--row);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.pkm {
  grid-row: 2;
  font-size: var(--t-xs);
  color: var(--muted);
}
.pkb em {
  grid-row: 1 / 3;
  grid-column: 2;
  font: 500 var(--t-xs)/1 var(--body);
  color: var(--faint);
}
.pfound {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  margin-bottom: var(--s5);
}
.pfh {
  padding: 0 var(--s1) 0 0;
}
.pchip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 10px;
  border: 1px solid var(--line-strong);
  border-radius: 999px;
  background: var(--surface);
  cursor: pointer;
  font: 600 13px/1 var(--row);
}
.pchip:hover {
  background: var(--raised);
}
.pchip img {
  width: 16px;
  height: 16px;
  object-fit: contain;
}
.pchip em {
  font: 500 var(--t-xs)/1 var(--body);
  color: var(--faint);
}
.tdg .tn.pl,
.tdg .tn span.pl,
.fam-h .who b.pl {
  cursor: pointer;
}
.tdg .tn.pl:hover > span:not(.sd),
.tdg .tn span.pl:hover,
.fam-h .who b.pl:hover {
  text-decoration: underline;
  text-decoration-color: var(--faint);
  text-underline-offset: 3px;
}
@media (max-width: 640px) {
  .pctl {
    width: 100%;
    margin-left: 0;
  }
  .pctl select {
    flex: 1;
    max-width: none;
    height: 40px;
  }
  .pwho h1 {
    font-size: var(--t-xl);
  }
  .pbody .tdg .tn > span:not(.sd) {
    white-space: normal;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
  } /* a long label wraps, not cut */
  .pkg {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    padding-inline: var(--s3);
  }
}
.section-h {
  font: 700 var(--t-xl)/1 var(--display);
  letter-spacing: 0.03em;
  text-transform: uppercase;
  color: var(--ink);
  margin: 0 0 var(--s3);
} /* a box's title: the game lines' MONEYLINE, exactly */
.panel {
  background: var(--surface);
  border: 1px solid var(--line-strong);
  border-radius: var(--r);
  overflow: hidden;
  box-shadow: var(--panel-shadow);
}

/* family row */
.fam {
  border-bottom: 1px solid var(--line);
}
.fam:last-child {
  border-bottom: 0;
}
/* title block (market + side names) | axis */
.fam-h {
  display: grid;
  grid-template-columns: 200px minmax(0, 1fr);
  gap: 0 var(--s4);
  align-items: center;
  min-height: 72px;
  padding: var(--s2) var(--s4);
  box-sizing: border-box;
  user-select: none;
}
/* title block: the market name (the sides sit in the axis, right before the left arrow) */
.ftitle {
  display: grid;
  align-items: center;
  min-width: 0;
}
.axis .sn {
  display: grid;
  grid-template-rows: 16px 22px 22px;
  align-items: center;
  justify-items: end;
  font: 700 var(--t-sm)/1 var(--display);
  letter-spacing: 0.04em;
  color: color-mix(in srgb, var(--ink) 62%, var(--surface));
}
.axis .sn img {
  width: 16px;
  height: 16px;
  object-fit: contain;
  display: block;
}
/* the period and line count sit on the title's baseline, raised so their capitals centre on the title's capitals
   (both faces' capitals are ~0.7em: lift by half the difference). --tsz: the title's size */
.ftitle .who {
  display: flex;
  align-items: baseline;
  gap: var(--s2);
  min-width: 0;
  --tsz: var(--t-md);
}
.fam-h.primary .ftitle .who,
.fam-h.cat .ftitle .who {
  --tsz: var(--t-lg);
}
.fam-h.cat.primary .ftitle .who {
  --tsz: var(--t-xl);
}
.ftitle .who b {
  display: flex;
  align-items: baseline;
  gap: var(--s2);
  min-width: 0;
  font: 600 var(--t-md)/1.2 var(--body);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.ftitle .who b img {
  width: 20px;
  height: 20px;
  object-fit: contain;
  flex: none;
  align-self: center;
}
.ftitle .who b img + img {
  margin-left: -4px;
}
/* the main markets (moneyline, spread, total) carry the section; everything else reads one step down */
.fam-h.primary .ftitle .who b {
  font-size: var(--t-lg);
  font-weight: 600;
}
.fam-h:not(.primary) .ftitle .who b {
  font-weight: 500;
}
/* game-level market names read as category labels: condensed, bold, uppercase */
.fam-h.cat .ftitle .who b {
  font: 700 var(--t-lg)/1 var(--display);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.fam-h.cat.primary .ftitle .who b {
  font-size: var(--t-xl);
  letter-spacing: 0.03em;
}
.fam-h.cat .ftitle .who small {
  font: 500 var(--t-xs)/1 var(--body);
  text-transform: uppercase;
  letter-spacing: 0.06em;
}
.ftitle .who small {
  font: 400 var(--t-sm)/1.2 var(--body);
  color: var(--muted);
  white-space: nowrap;
  position: relative;
  top: calc((1em - var(--tsz)) * 0.35);
}
/* the row's axis: one column per line around the row's line (as many as fit, fitAxis); each column is the line and both
   sides' best price, marked in the best book's colour. The row's own line is the wide column: bigger prices, book logos */
.axis {
  display: grid;
  column-gap: 2px;
  min-width: 0;
} /* columns set per row: 20px arrow, lines, 20px arrow */
.axis .ac {
  display: grid;
  grid-template-rows: 16px 22px 22px;
  align-items: center;
}
.axis .ac {
  justify-items: center;
  border: 0;
  background: none;
  font: inherit;
  color: inherit;
  border-radius: var(--r-sm);
  cursor: pointer;
  padding: 0;
  min-width: 0;
  transition:
    background-color 0.15s ease,
    box-shadow 0.15s ease;
}
.axis .ac:focus-visible,
.axis .am:focus-visible {
  outline: 2px solid var(--ink);
  outline-offset: 1px;
}
.axis .ac:hover {
  background: var(--raised);
}
.axis .ac.sel {
  background: var(--raised);
}
.axis .al {
  font: 600 var(--t-sm)/1 var(--body);
  font-variant-numeric: tabular-nums;
  color: color-mix(in srgb, var(--ink) 62%, var(--surface));
  white-space: nowrap;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  padding-inline: 4px;
}
.axis .ac.sel .al {
  color: var(--ink);
  font-weight: 700;
}
.pc {
  display: inline-flex;
  align-items: center;
  gap: var(--s1);
  font: 400 var(--t-md)/1 var(--num);
  letter-spacing: -0.01em;
  font-variant-numeric: tabular-nums;
  color: var(--ink);
}
.pc .bk {
  width: 14px;
  height: 14px;
  border-radius: 3px;
  flex: none;
}
/* several books at the best price: a neutral badge the size of a logo, with how many */
.bk.many {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: auto !important;
  min-width: 14px;
  height: 14px;
  padding: 0 2px;
  border-radius: 3px;
  flex: none;
  background: var(--ink);
  font: 700 10px/1 var(--body);
  color: var(--surface);
  font-variant-numeric: tabular-nums;
}
.bk.many i {
  font-style: normal;
  font-size: 8px;
  margin-left: 1px;
  translate: 0 -1px;
} /* solid, the weight of a logo: ink with the count knocked out */
.pc.one .bk {
  opacity: 0.45;
}
.ac.sel .pc .bk {
  width: 16px;
  height: 16px;
}
.ac.sel .pc {
  font-size: var(--t-lg);
  font-weight: 600;
  color: var(--ink);
  gap: 6px;
}
.pc.none {
  color: var(--faint);
}
/* a beaten price (a better line costs the same or less) is struck through */
.pc.dom {
  text-decoration: line-through;
  text-decoration-thickness: 1.5px;
  color: var(--faint);
}
.axis .ac.one .al,
.axis .ac.one .pc {
  opacity: 0.55;
}
/* an arb at your books, everywhere the same (the tables' .tc.arb): a green foot line and corner, its line and prices green */
.axis .ac.arb .al {
  color: var(--pos);
  font-weight: 700;
}
.axis .ac.arb .pc {
  color: var(--pos);
  font-weight: 600;
}
.axis .ac.arb {
  position: relative;
  box-shadow: inset 0 -2px 0 var(--pos);
}
.axis .am.arb::before {
  border-color: var(--pos);
}
.pc {
  border-radius: var(--r-sm);
  padding: 2px var(--s1);
  transition: background-color 0.6s;
}
.pc.up {
  background: var(--flash-up);
  transition: none;
}
.pc.down {
  background: var(--flash-down);
  transition: none;
}
@media (prefers-reduced-motion: reduce) {
  .pc {
    transition: none;
  }
}
/* two-team market: the split bar */
.fam-h.bin {
  align-items: center;
}
.duel {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: var(--s3);
  padding-inline: var(--s5);
}
.duel[data-line] {
  cursor: pointer;
}
.duel .de {
  display: flex;
  align-items: center;
  gap: var(--s2);
}
.duel .bk {
  width: 16px;
  height: 16px;
  border-radius: 4px;
}
.duel .pc {
  font-size: var(--t-xl);
  font-weight: 600;
  padding: 2px var(--s1);
}
.duel .bar {
  display: flex;
  gap: 2px;
  height: var(--ctl);
}
.duel .bar i {
  display: flex;
  align-items: center;
  gap: var(--s2);
  min-width: 80px;
  height: 100%;
  padding: 0 var(--s2);
  border-radius: var(--r-sm);
  font: 600 var(--t-md)/1 var(--body);
  font-style: normal;
  letter-spacing: 0.02em;
  color: var(--ink);
  background: color-mix(in srgb, var(--tc) 22%, var(--surface));
  box-shadow: inset 3px 0 0 var(--tc);
}
.duel .bar i + i {
  box-shadow: inset -3px 0 0 var(--tc);
}
.duel .bar i + i {
  flex: 1;
  flex-direction: row-reverse;
}
.duel .bar i.tie {
  flex-direction: row;
  justify-content: center;
  gap: 6px;
  min-width: 96px;
  background: var(--sunk);
  box-shadow: none;
  color: var(--muted);
}
.duel .bar i.tie .de {
  gap: 4px;
}
.duel .bar i.tie .pc {
  font-size: var(--t-md);
  color: var(--ink);
}
.duel .bar i.tie .bk {
  width: 14px;
  height: 14px;
}
.duel .bar .chip {
  display: grid;
  place-items: center;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: #fff;
  flex: none;
}
.duel .bar .chip img {
  width: 16px;
  height: 16px;
  object-fit: contain;
}
/* arrows: more lines that way; each click moves the window by half its width */
.axis .am {
  display: grid;
  place-items: center;
  align-self: stretch;
  margin-top: 16px;
  border: 0;
  border-radius: var(--r);
  background: none;
  cursor: pointer;
  padding: 0;
  transition: background-color 0.15s ease;
}
.axis .am.r {
  grid-column: -2 / -1;
}
/* the player tables (playerGrid): the name column stays put while the columns scroll; ◀ ▶ over the header's right
   end, each shown while there's more that way (app.js gridArrows) */
.tdw {
  position: relative;
}
.tdw > .tdg .tn,
.tdw > .tdg .th.l {
  position: sticky;
  left: 0;
  z-index: 1;
  background: var(--surface);
}
.tdw > .tdg .th.l {
  background: var(--raised);
}
.tdw > .tda {
  display: none;
  place-items: center;
  position: absolute;
  top: 0;
  z-index: 2;
  width: 28px;
  height: 32px;
  border: 0;
  padding: 0;
  background: var(--raised);
  cursor: pointer;
}
.tdw > .tda.l {
  right: 28px;
}
.tdw > .tda.r {
  right: 0;
  box-shadow: -1px 0 0 var(--line);
}
.tdw.ovl > .tda.l,
.tdw.ovr > .tda.r {
  display: grid;
}
.tdw.ovl:not(.ovr) > .tda.l {
  right: 0;
}
.tdw > .tda::before {
  content: '';
  width: 7px;
  height: 7px;
  border-left: 1.75px solid var(--muted);
  border-bottom: 1.75px solid var(--muted);
  rotate: 45deg;
  translate: 1px 0;
}
.tdw > .tda.r::before {
  rotate: -135deg;
  translate: -1px 0;
}
.tdw > .tda:hover::before {
  border-color: var(--ink);
}
/* touchdown table */
.tdg {
  display: grid;
  align-items: center;
  overflow-x: auto;
}
/* more columns to the right: a shadow on the right edge, covered once you've scrolled to the end (the cover scrolls with the table) */
.tdg {
  background:
    linear-gradient(to left, var(--surface) 40%, transparent) right / 28px 100% no-repeat local,
    linear-gradient(to left, color-mix(in srgb, var(--ink) 16%, transparent), transparent) right / 16px 100% no-repeat
      scroll,
    var(--surface);
}
.tdg > span {
  padding: 0 var(--s3);
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-bottom: 1px solid var(--line);
  min-width: 0;
}
.tdg .th {
  height: 32px;
  background: var(--raised);
  font: 500 var(--t-xs)/1 var(--body);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--muted);
}
.tdg .th.l,
.tdg .tn {
  justify-content: flex-start;
  padding-left: var(--s4);
}
/* a row's name: Archivo, a step softer than the prices, which stay the brightest thing in a row */
.tdg .tn {
  gap: var(--s2);
  font: 600 14.5px/1.2 var(--row);
  letter-spacing: 0;
  color: color-mix(in srgb, var(--ink) 86%, var(--surface));
}
.tdg .tn > span:not(.sd) {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.tdg .tn .lg {
  display: flex;
  width: 18px;
  flex: none;
}
.tdg .tn .lg img {
  width: 18px;
  height: 18px;
  object-fit: contain;
}
.tdg .gap {
  box-shadow: inset 1px 0 0 var(--line);
}
/* a player table's vig row (tables.js playerGrid foot; the 1st score tab): a rule over it, the header's quiet type, the
   cents in the price face; the books together under $1 in the arb green */
.tdg .tn.ft,
.tdg .tc.ft {
  height: 30px;
  box-shadow: inset 0 1px 0 var(--line-strong);
  border-bottom: 0;
}
.tdg .tn.ft span {
  font: 500 var(--t-xs)/1 var(--body);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--muted);
}
.tdg .tc.ft {
  font: 400 var(--t-sm)/1 var(--num);
  font-variant-numeric: tabular-nums;
  color: var(--muted);
}
.tdg .tc.ft.pos {
  color: var(--pos);
}
/* a team row's vig cell (the 1st score tab's team grids: its exact outcomes' best prices over $1), the vig row's face in the row */
.tdg .tc.vg {
  font: 400 var(--t-sm)/1 var(--num);
  font-variant-numeric: tabular-nums;
  color: var(--muted);
}
.tdg .tc.vg.pos {
  color: var(--pos);
}
/* Head to head: a matchup's two players' rows together, the line under the pair only */
.tdg > span.in {
  border-bottom-color: transparent;
}
.tdg .tc.none {
  color: var(--faint);
}
/* an arb at your books (the Arbs tab's test): the cell outlined and its prices in the arb green, like the board rows */
/* an arb, the same everywhere (a table's .tc.arb, game lines' .ac.arb; Avi 10/9): a green line
   along the cell's foot, a small green corner at its top right, its prices green and bold */
.tdg .tc.arb {
  position: relative;
  box-shadow: inset 0 -2px 0 var(--pos);
}
.tdg .tc.arb .pc:not(.none) {
  color: var(--pos);
  font-weight: 600;
}
.tdg .tc.arb::after,
.axis .ac.arb::after {
  content: '';
  position: absolute;
  top: 0;
  right: 0;
  width: 10px;
  height: 10px;
  background: var(--pos);
  clip-path: polygon(0 0, 100% 0, 100% 100%);
  border-top-right-radius: inherit;
  pointer-events: none;
}
/* a line with both sides: Over above, Under below (marked U); the table's rows grow to fit two prices */
/* a table with two-price cells (the first side over the second): every cell stacks from the top, so a one-price cell's
   price sits level with the others' first side; the row's sides (OVER / UNDER, YES / NO) a column at the right of its name */
.tdg:has(.tc.ou) > span:not(.th) {
  height: 56px;
}
.tdg.kk:has(.tc.ou) > span:not(.th) {
  height: 68px;
}
.tdg:has(.tc.ou) > .tc {
  flex-direction: column;
  justify-content: flex-start;
  gap: 3px;
  padding-top: 6px;
}
.tdg:has(.tc.ou) > .tc > *,
.tdg .tn .sd > b {
  height: 20px;
  display: flex;
  align-items: center;
}
.tdg:has(.tc.ou) > .tc > small,
.tdg .tn .sd > b.top {
  height: 14px;
}
.tdg .tc.ou .pc.u {
  color: var(--muted);
}
.tdg .tn .sd {
  display: flex;
  flex-direction: column;
  gap: 3px;
  align-self: flex-start;
  margin: 6px 0 0 auto;
  padding-left: var(--s2);
}
.tdg .tn .sd > b {
  justify-content: flex-end;
  font: 700 var(--t-sm)/1 var(--display);
  letter-spacing: 0.04em;
  color: color-mix(in srgb, var(--ink) 62%, var(--surface));
} /* the game lines' OVER / UNDER (.axis .sn) */
.tdg .th.tt {
  gap: var(--s2);
}
.tdg .th.tt img {
  width: 16px;
  height: 16px;
  object-fit: contain;
}
/* table type, one set: column titles (.th) small uppercase grey; a line, on a cell or heading a column (.lnh: 5+, 1+ TD,
   the bands' ruler), the game lines' line numbers; row labels (.tn) and line values (.ln) the body's 13px; the sides
   (OVER / UNDER, YES / NO) the game lines' */
.tdg .tc > small,
.tdg .th.lnh {
  font: 600 var(--t-sm)/1 var(--body);
  font-variant-numeric: tabular-nums;
  letter-spacing: 0;
  text-transform: none;
  color: color-mix(in srgb, var(--ink) 62%, var(--surface));
  white-space: nowrap;
} /* a line (5+, −3.5): the game lines' line numbers */
.tdg .tc > small {
  display: block;
}
.tdg.kk > .tc {
  flex-direction: column;
  gap: 2px;
}
/* list markets: a board of outcomes, favourite first */
.fam-h.listrow {
  align-items: start;
  min-height: 0;
  padding-block: var(--s3);
}
.fam-h.listrow .ftitle {
  padding-top: 6px;
}
.olist {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(192px, 1fr));
  gap: 0 var(--s4);
  min-width: 0;
}
.oc {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s2);
  min-width: 0;
  padding: 6px 2px;
  border-bottom: 1px solid var(--line);
}
.oc .on {
  display: flex;
  align-items: center;
  gap: var(--s2);
  min-width: 0;
  font: 500 var(--t-md)/1.2 var(--body);
}
.oc .on span {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.oc .on img {
  width: 16px;
  height: 16px;
  object-fit: contain;
  flex: none;
}
.olmore {
  justify-self: start;
  border: 0;
  background: none;
  padding: var(--s2) 2px;
  cursor: pointer;
  font: 500 var(--t-sm)/1 var(--body);
  color: var(--muted);
}
.olmore:hover {
  color: var(--ink);
}
/* player ladders: one header row of lines for the whole section; rows drop their own labels and are shorter */
.fam-h.shead {
  min-height: 0;
  padding-block: var(--s2);
  background: var(--raised);
  border-bottom: 1px solid var(--line);
}
.fam-h.shead .am {
  margin-top: 0;
  height: 18px;
  align-self: center;
}
.shead .hl {
  text-align: center;
  font: 600 var(--t-sm)/1 var(--body);
  font-variant-numeric: tabular-nums;
  color: color-mix(in srgb, var(--ink) 62%, var(--surface));
}
.fam-h.sharedrow {
  min-height: 56px;
}
.axis.noh .ac,
.axis.noh .sn {
  grid-template-rows: 22px 22px;
}
.axis .ac.gap {
  margin-left: var(--s4);
} /* halves after quarters */
/* the arrows slide the lines in from the side they came from */
@keyframes axis-from-l {
  from {
    transform: translateX(-18px);
    opacity: 0.2;
  }
}
@keyframes axis-from-r {
  from {
    transform: translateX(18px);
    opacity: 0.2;
  }
}
@keyframes axis-pick {
  from {
    background: var(--sunk);
  }
}
.axis .ac.sel.just {
  animation: axis-pick 0.3s ease-out;
}
.axis.from-l .ac {
  animation: axis-from-l 0.22s cubic-bezier(0.2, 0.7, 0.3, 1);
}
.axis.from-r .ac {
  animation: axis-from-r 0.22s cubic-bezier(0.2, 0.7, 0.3, 1);
}
@media (prefers-reduced-motion: reduce) {
  .axis .ac,
  .axis .am {
    transition: none;
    animation: none !important;
  }
}
.axis .am::before {
  content: '';
  width: 7px;
  height: 7px;
  border-left: 1.75px solid var(--muted);
  border-bottom: 1.75px solid var(--muted);
  rotate: 45deg;
  translate: 1px 0;
}
.axis .am.r::before {
  rotate: -135deg;
  translate: -1px 0;
}
.axis .am:hover {
  background: var(--raised);
}
.axis .am:hover::before {
  border-color: var(--ink);
}
.axis .am[disabled] {
  visibility: hidden;
}
.edge {
  justify-self: end;
  display: inline-block;
  min-width: 72px;
  padding: 6px var(--s2);
  border-radius: var(--r);
  text-align: right;
  font: 600 var(--t-md)/1 var(--body);
  font-variant-numeric: tabular-nums;
  color: var(--faint);
  background: var(--sunk);
}
.edge.pos {
  background: var(--pos);
  color: var(--surface);
}
.edge.near {
  background: var(--near-tint);
  color: var(--near);
}

.empty {
  padding: 48px var(--s4);
  text-align: center;
  color: var(--muted);
  background: var(--surface);
  border: 1px dashed var(--line-strong);
  border-radius: var(--r);
}

/* More: its market names are long (a book's own wording): a wider name column, and they wrap instead of being cut */
@media (min-width: 641px) {
  .section[data-sec^='other:'] .fam-h {
    grid-template-columns: 300px minmax(0, 1fr);
  }
}
.section[data-sec^='other:'] .ftitle .who b {
  white-space: normal;
  overflow-wrap: anywhere;
  line-height: 1.25;
}

/* the grids that stack a tab's tables (.onlyg, .kstack, .pgroups) and a player's page (.pbody): one column the width of
   the page. Left to size itself, the column grows to its widest table, so a wide table widened the whole page (a phone
   zoomed out to 700–1,100px) instead of scrolling inside its box */
.section.kick .onlyg,
.section.d1 .onlyg,
.kstack,
.pgroups,
.pbody {
  grid-template-columns: minmax(0, 1fr);
}

/* ---------- a stat ladder's player table (tables.js ladderTable): Player · Line · Over · Under · his lines; a tap opens
   his whole ladder under the row. On a phone Over and Under stack in one column so the names fit ---------- */
.ldt {
  background: var(--surface);
}
.ldh,
.ldr {
  display: grid;
  grid-template-columns: minmax(180px, 1fr) 76px 128px 128px minmax(96px, 160px);
  grid-template-areas: 'nm ln ov un mo';
  column-gap: var(--s2);
  align-items: center;
}
/* headers align with their numbers (right), quiet and sentence case */
.ldh {
  height: 34px;
  background: var(--raised);
  font: 500 11.5px/1 var(--body);
  letter-spacing: 0.01em;
  color: var(--muted);
}
.ldh > span {
  text-align: right;
}
.ldh > span:first-child {
  text-align: left;
  padding-left: var(--s4);
}
.ldh .b,
.ldr .sides {
  display: none;
}
.ldr {
  min-height: 44px;
  border-top: 1px solid var(--line);
  cursor: pointer;
}
.ldr:hover {
  background: color-mix(in srgb, var(--ink) 3%, transparent);
}
.ldr.open {
  background: color-mix(in srgb, var(--ink) 4%, transparent);
}
/* a Yes / No row (NBA Game leaders): one price each side, no ladder to open */
.ldr.yn {
  cursor: default;
}
/* a ladder's vig row (NBA Game leaders), as a player table's (.tdg .ft): a rule over it, the header's quiet type, the
   cents in the price face; the books together under $1 in the arb green */
.ldr.ft {
  min-height: 30px;
  border-top-color: var(--line-strong);
}
.ldr.ft .tn span {
  font: 500 var(--t-xs)/1 var(--body);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--muted);
}
.ldr > .tc.ft {
  font: 400 var(--t-sm)/1 var(--num);
  font-variant-numeric: tabular-nums;
  color: var(--muted);
}
.ldr > .tc.ft.pos {
  color: var(--pos);
}
.ldr .tn {
  grid-area: nm;
  display: flex;
  align-items: center;
  gap: var(--s2);
  min-width: 0;
  padding-left: var(--s4);
  font: 500 14px/1.2 var(--row);
  color: color-mix(in srgb, var(--ink) 88%, var(--surface));
}
.ldr .tn img,
.ldr .tn i {
  width: 16px;
  height: 16px;
  flex: none;
  object-fit: contain;
}
/* Punting's and Kicking's game rows: a football in the logo slot, brown with white laces (Avi 10/30), either theme */
.ldr .tn .fball svg {
  display: block;
  width: 100%;
  height: 100%;
}
.ldr .tn .fball path:first-child {
  fill: #8b4a24;
}
.ldr .tn .fball path + path {
  fill: none;
  stroke: #fff;
  stroke-width: 1.1;
  stroke-linecap: round;
}
/* a basketball (tables.js BASKETBALL): orange, its seams dark */
.ldr .tn .bball circle {
  fill: #d9692b;
}
.ldr .tn .bball path,
.ldr .tn .bball path + path {
  fill: none;
  stroke: #3b2312;
  stroke-width: 0.9;
  stroke-linecap: round;
}
.ldr .tn > span {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.ldr .lnv {
  grid-area: ln;
  text-align: right;
  font: 600 14px/1 var(--num);
  letter-spacing: -0.01em;
}
.ldr > .tc {
  grid-area: ov;
  display: flex;
  justify-content: flex-end;
}
.ldr > .tc.u {
  grid-area: un;
}
/* one side only (tables.js statLadder one): no second price column */
.ldt.one .ldh,
.ldt.one .ldr {
  grid-template-columns: minmax(180px, 1fr) 76px 128px minmax(96px, 160px);
  grid-template-areas: 'nm ln ov mo';
}
.ldt .tc .pc:not(.none) {
  font-size: 13.5px;
  color: color-mix(in srgb, var(--ink) 88%, var(--surface));
}
.ldr .more {
  grid-area: mo;
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: 6px;
  padding-right: var(--s4);
  font: 400 var(--t-sm)/1 var(--body);
  color: var(--muted);
}
.ldr .more i {
  width: 7px;
  height: 7px;
  border-right: 1.75px solid currentColor;
  border-bottom: 1.75px solid currentColor;
  rotate: 45deg;
  translate: 0 -2px;
}
.ldr.open .more i {
  rotate: 225deg;
  translate: 0 2px;
}
/* an arb somewhere in his ladder: a small green dot before his line count */
.ldr .adot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--pos);
  flex: none;
}
/* the ladder: his lines as its own column heads, Over over Under, the main line shaded; scrolls sideways */
.ldl {
  display: grid;
  grid-template-rows: repeat(3, 30px);
  overflow-x: auto;
  overflow-y: hidden;
  padding: 8px 0 10px;
  border-top: 1px solid var(--line);
  background: color-mix(in srgb, var(--ink) 4%, transparent);
}
.ldl > span {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  height: 30px;
  padding-right: 14px;
  white-space: nowrap;
}
/* the yard markers: what the ladder is read by, ink and semibold */
.ldl .lh {
  font: 600 13px/1 var(--num);
  letter-spacing: -0.01em;
  color: var(--ink);
}
.ldl .lh.m {
  color: var(--ink);
}
/* a line's column box, behind its line, Over and Under: grey for his main line, green for an arb (the pair as one unit) */
.ldl .col {
  z-index: 0;
  margin: -4px 4px;
  border-radius: 8px;
}
.ldl .col.main {
  background: color-mix(in srgb, var(--ink) 7%, transparent);
}
.ldl > span:not(.col) {
  position: relative;
  z-index: 1;
}
/* an arb line: its head green with the site's green corner (its prices green: .tc.arb below) */
.ldl .lh.arb {
  color: var(--pos);
}
.ldl .lh.arb::after {
  content: '';
  position: absolute;
  top: -2px;
  right: 10px;
  width: 9px;
  height: 9px;
  background: var(--pos);
  clip-path: polygon(0 0, 100% 0, 100% 100%);
}
/* an inferior price: struck through and faded, its books dimmed */
.ldt .tc.beat .pc {
  color: var(--faint);
  text-decoration: line-through;
  text-decoration-thickness: 1.5px;
}
.ldt .tc.beat .bk,
.ldt .tc.beat .bkt {
  opacity: 0.45;
}
.ldl .sd {
  justify-content: flex-start;
  padding-left: var(--s4);
  font: 500 11.5px/1 var(--body);
  letter-spacing: 0.01em;
  color: var(--muted);
}
/* an arb's prices: green; in the row each leg is a small green chip (the ladder's green box in miniature) */
.ldt .tc.arb .pc:not(.none) {
  color: var(--pos);
  font-weight: 600;
}

@media (max-width: 640px) {
  .ldh,
  .ldr {
    grid-template-columns: minmax(0, 1fr) 42px 40px 80px 20px;
    grid-template-areas: 'nm ln sd ov mo' 'nm ln sd un mo';
    column-gap: 6px;
  }
  .ldh {
    grid-template-areas: 'nm ln sd ov mo';
  }
  .ldh .o,
  .ldh .u,
  .ldr .nl {
    display: none;
  }
  .ldh .b {
    display: block;
    grid-area: ov;
    text-align: left;
  }
  .ldr {
    min-height: 58px;
    row-gap: 6px;
    padding-block: 6px;
  }
  .ldr .tn {
    padding-left: var(--s3);
  }
  .ldr .sides {
    display: block;
    grid-area: sd;
    font: 600 10px/1.9 var(--display);
    letter-spacing: 0.06em;
    color: var(--muted);
    text-align: right;
  }
  .ldr > .tc {
    justify-content: flex-start;
  }
  .ldr .more {
    padding-right: 6px;
  }
  .ldt.one .ldh,
  .ldt.one .ldr {
    grid-template-columns: minmax(0, 1fr) 42px 40px 80px 20px;
    grid-template-areas: 'nm ln sd ov mo';
  }
  .ldt.one .ldr {
    min-height: 44px;
  }
}

/* several books at the best price (prices.js bestMark): on a desktop the logos, the best's in the single logo's place and
   the others out to its left (taking no width, so the prices in a column stay in line), only in the row views (a stat
   ladder's collapsed rows, the outcome lists, the two-ended rows); the views with lots of prices across (an opened
   ladder, the player tables, the game lines' strips) show the best's logo alone (Avi 10/15). A phone: the "N+" badge */
.bkt {
  position: relative;
  display: inline-flex;
  flex: none;
}
.bkx {
  position: absolute;
  top: 0;
  bottom: 0;
  right: calc(100% + 2px);
  display: none;
  flex-direction: row-reverse;
  align-items: center;
  gap: 2px;
}
.ldr .bkx,
.oc .bkx,
.de .bkx {
  display: inline-flex;
}
.bkx .bkn {
  font: 600 11px/1 var(--body);
  color: var(--muted);
  margin-right: 1px;
}
@media (min-width: 641px) {
  .bk.many.tie {
    display: none;
  }
}
@media (max-width: 640px) {
  .bkt {
    display: none;
  }
}
/* the game strip's chips are too narrow: the badge there, at every width */
.game .bkt {
  display: none;
}
.game .bk.many.tie {
  display: inline-flex;
}

/* the phone's one-line game chip and league picker (phone.css): hidden on a desktop */
.game .g1,
.lgsel {
  display: none;
}

/* receiving yards' pairs (tables.js pairLadder): the switch (Players · Two players · Three players) and, on a pairs view,
   a chip per player, over the ladder table */
.section.lp .rows {
  display: grid;
  gap: var(--s3);
}
.lpbar {
  display: grid;
  gap: var(--s3);
  min-width: 0;
}
.lpbar .seg {
  justify-self: start;
}
.ppick {
  display: flex;
  gap: 6px;
  overflow-x: auto;
  scrollbar-width: none;
}
.ppick::-webkit-scrollbar {
  display: none;
}
.ppick button {
  flex: none;
  height: 28px;
  padding: 0 11px;
  border: 1px solid var(--line-strong);
  border-radius: 14px;
  background: none;
  color: var(--muted);
  font: 500 var(--t-sm)/1 var(--body);
  cursor: pointer;
}
.ppick button:hover {
  color: var(--ink);
}
.ppick button.on {
  background: var(--ink);
  border-color: var(--ink);
  color: var(--surface);
}
.ldr .tn .pplus,
.tdg .tn .pplus {
  font-style: normal;
  color: var(--faint);
}
.tdg .tn > span:not(.sd) b,
.ldr .tn b {
  font-weight: 600;
  color: var(--ink);
}

/* More's book chips (layout.js moreBar): logo, name, its count of More props; All first */
.morebk {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: var(--s5);
}
.morebk button {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  height: 32px;
  padding: 0 11px;
  border: 1px solid var(--line-strong);
  border-radius: 16px;
  background: none;
  color: var(--muted);
  font: 500 var(--t-sm)/1 var(--body);
  cursor: pointer;
}
.morebk button:has(img) {
  padding-left: 8px;
}
.morebk button img {
  width: 18px;
  height: 18px;
  border-radius: 4px;
}
.morebk button em {
  font: 500 12px/1 var(--num);
  font-style: normal;
  color: var(--faint);
}
.morebk button:hover {
  color: var(--ink);
}
.morebk button.on {
  background: var(--ink);
  border-color: var(--ink);
  color: var(--surface);
}
.morebk button.on em {
  color: color-mix(in srgb, var(--surface) 70%, var(--ink));
}
@media (max-width: 640px) {
  /* a phone: one row that scrolls sideways */
  .morebk {
    flex-wrap: nowrap;
    overflow-x: auto;
    scrollbar-width: none;
    margin-bottom: var(--s4);
  }
  .morebk::-webkit-scrollbar {
    display: none;
  }
  .morebk button {
    flex: none;
  }
}

/* the Defense tab's defenders (tabs-teams.js defenseTables) and the NBA 1st score tab (tabs-more.js firstScoreTables):
   the switch, then the table */
.lpbar + .dpl {
  margin-top: var(--s3);
}