/* Polyh: Settled Picks — the results ledger.
 *
 * ⚠ EVERY VALUE HERE WAS MEASURED, NOT CHOSEN. The section this widget replaces was a
 * hand-built Elementor tree styled entirely by per-element CSS keyed to generated ids
 * (.elementor-element-345d876, -bfa2726, -61494ec …). Deleting those elements deletes
 * their rules, so the port had to carry the styling across itself or the ledger would
 * have rendered as an unstyled stack.
 *
 * Read off the LIVE page's computed styles on 2026-08-20, before the tree was touched:
 *   ledger   background rgb(19,21,24) · 1px solid rgba(255,255,255,.08) · radius 24px
 *   header   flex, space-between, align center, padding 14px 20px, 1px bottom rule
 *   row      flex, align center, gap 16px, padding 16px 20px; rows 2+ border-top
 *            rgba(255,255,255,.06); hover tint rgba(255,255,255,.03)
 *   columns  id 0 0 64px · stack 1 1 auto · odds 0 0 auto · result 0 0 56px
 *   id       JetBrains Mono 12px/16.8 400 #666C73
 *   match    Space Grotesk 14px/19.6 400 #F3F5F6
 *   market   Space Grotesk 12px/16.8 400 #9BA1A8
 *   odds     JetBrains Mono 14px/19.6 400 #F3F5F6
 *   result   PILL: radius 999px, padding 4px 8px, centred; JetBrains Mono 11px/14.3 600;
 *            hit #2FD37A on rgba(47,211,122,.12) · miss #FF5C63 on rgba(255,92,99,.12)
 *
 * ⚠ CORRECTED 2026-08-20 AFTER THE DELETE RETURNED THE ORIGINAL'S OWN CSS. This file
 * first claimed "the rows carry no divider — re-checked, it is the design". That was
 * WRONG, and the way it was wrong is worth keeping: the sample row measured was
 * `61494ec`, the FIRST row, which is the one row that legitimately has no top border.
 * Re-checking the same row twice is not a second measurement. Rows 2+ carry
 * border-top 1px rgba(255,255,255,.06), every row has a hover tint, the result is a
 * PILL not bare text, and the header is uppercase with letter-spacing.
 *
 * NOTHING HERE IS INVENTED. An earlier draft added a MISS colour of its own on the theory
 * that the old ledger had no losing state — it printed "WON" in green on five of six rows.
 * It did have one: row #10419 was LOST, in #FF5C63 on a 12% red tint. The theory came from
 * looking at the visible rows instead of the data behind them.
 */

.polyh-picks {
  display: flex;
  overflow: hidden;
  flex-direction: column;
  gap: 0;
  padding: 0;
  background: #131518;
  border: 1px solid rgba(255, 255, 255, .08);
  border-radius: 24px;
}

.polyh-picks__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 20px;
  border-bottom: 1px solid rgba(255, 255, 255, .08);
}

.polyh-picks__title {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 12px;
  line-height: 1.4;
  text-transform: uppercase;
  letter-spacing: .1em;
  color: #9BA1A8;
}

.polyh-picks__note {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 12px;
  line-height: 1.4;
  color: #666C73;
}

.polyh-picks__row {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 16px 20px;
  transition: background-color .2s;
}

/* Rows 2+ only — the first row sits under the header's own rule and would otherwise
   draw two lines 1px apart. This is the pair-selector form so it stays correct however
   many rows the worker returns. */
.polyh-picks__row + .polyh-picks__row {
  border-top: 1px solid rgba(255, 255, 255, .06);
}

.polyh-picks__row:hover {
  background: rgba(255, 255, 255, .03);
}

.polyh-picks__sid {
  flex: 0 0 64px;
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 12px;
  line-height: 1.4;
  color: #666C73;
}

.polyh-picks__stack {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  min-width: 0;
}

.polyh-picks__match {
  font-family: 'Space Grotesk', ui-sans-serif, system-ui, sans-serif;
  font-size: 14px;
  line-height: 1.4;
  color: #F3F5F6;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.polyh-picks__market {
  font-family: 'Space Grotesk', ui-sans-serif, system-ui, sans-serif;
  font-size: 12px;
  line-height: 1.4;
  color: #9BA1A8;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.polyh-picks__odds {
  flex: 0 0 auto;
  font-variant-numeric: tabular-nums;
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 14px;
  line-height: 1.4;
  color: #F3F5F6;
}

.polyh-picks__res {
  display: block;
  flex: 0 0 56px;
  padding: 4px 8px;
  border-radius: 999px;
  text-align: center;
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 11px;
  font-weight: 600;
  line-height: 1.3;
}

.polyh-picks__res--hit {
  color: #2FD37A;
  background: rgba(47, 211, 122, .12);
}

/* ⚠ #FF5C63, the ORIGINAL's colour — not the app's #FF7379 text twin I first reached
   for. The twin exists because the display red fails as text on a LIGHT ground; here it
   sits on a 12%-red tint over #131518 and measures ~5.3:1, comfortably AA. Substituting
   it would have been a redesign of the one row the client asked not to redesign. */
.polyh-picks__res--miss {
  color: #FF5C63;
  background: rgba(255, 92, 99, .12);
}

/* The teams are the first thing to lose on a narrow screen, and truncating them is
   better than wrapping a ledger row into three lines. The id column earns its width
   back below 480px, where 64px of monospace id is a quarter of the viewport. */
@media (max-width: 480px) {
  .polyh-picks__row {
    gap: 12px;
    padding: 14px 16px;
  }

  .polyh-picks__sid {
    flex-basis: 52px;
  }
}