/* The results route. Loaded after web/event-grid.css, which owns the palette,
 * the face, the ground, the topbar, the footer, .panel, .control-search and the
 * card tint every surface below is drawn in. Nothing here redefines those. */

.results {
  max-width: 1360px;
  /* 88px of fixed topbar plus 8: the clearance .think and .hero take. */
  margin: 96px auto 0;
  display: grid;
  gap: 28px;
}

/* .panel carries 28px of top margin for stacking on the grid; the gap above
   already does that here. */
.results .panel { margin: 0; }

/* A STACK, NOT THE GRID'S ROW. event-grid.css defines .panel-head twice: a grid
   at the top of the file and, further down, a flex row with space-between for
   the grid's instruction and price. The later one wins, and here it put each
   heading at one edge of the panel and its line at the other. */
.results .panel-head {
  display: grid;
  justify-content: stretch;
  gap: 6px;
}

.results-lede {
  margin: 0;
  font-size: 15px;
  color: var(--text-primary);
  font-variation-settings: "FLAT" 0;
}

.results-copy {
  margin: 0;
  max-width: 62ch;
  font-size: 14px;
  line-height: 1.55;
  color: var(--text-muted);
  font-variation-settings: "FLAT" 0;
}

/* ---- the three cards ----------------------------------------------------- */

/* THE GRID CARD'S PADDING AND RIM ON THE PAGE'S OWN GROUND: .card's 10px plus
   the 2px its body adds, its border and its radius, filled with --bg-page rather
   than the card tint. No card has a height; the row shares the height of its
   cards, which are the same three lines each.

   COLUMNS ARE SET BY THE WIDEST HEADLINE FIGURE, which does not shrink. "Vlad
   Tenev" is 353px of ink at 64px and a card gives it its width less 26px. Three
   across need 1280 (370px each; 408px at 1470); two across need 880 (372px;
   382px at 900); below 880 the cards stack. */
.results-cards {
  display: grid;
  gap: 10px;
  grid-template-columns: minmax(0, 1fr);
}
@media (min-width: 880px)  { .results-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1280px) { .results-cards { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

.results-card {
  display: grid;
  align-content: start;
  gap: 4px;
  min-width: 0;
  padding: 10px 12px 12px;
  border-radius: var(--radius-card);
  background: var(--bg-page);
  border: 1px solid var(--card-border);
  color: var(--card-ink);
}
.results-card p {
  margin: 0;
  font-variation-settings: "FLAT" 0;
}

/* EVERY CARD IS THE SAME THREE LINES, and each line has one size and one line
   height across the row, so the cards align line for line: label, figure, note. */
.results-card-label,
.results-card-note {
  font-size: 12px;
  line-height: 1.3;
  color: var(--card-ink-muted);
}

/* THE HEADLINE FIGURES. The name and the two counts share one size and one line
   box, the largest type on the page. Size is the only lever: the face has one
   weight, and a stroke or a shadow to thicken it is ruled out. 44px below 640,
   64px from 640. */
.results-goat-name,
.results-card-figure {
  font-size: 44px;
  line-height: 1.02;
}
@media (min-width: 640px) {
  .results-goat-name,
  .results-card-figure { font-size: 64px; }
}

.results-card-figure {
  color: var(--card-ink);
  font-variant-numeric: tabular-nums;
}

/* THE PAGE'S ONE LIME. --pons-green, the grid pill's own flat fill, taken by name
   rather than copied so the two cannot drift. No fill, no glow, no gradient, and
   nowhere else on this page. */
.results-goat-name { color: var(--pons-green); }

/* ---- check your vote ------------------------------------------------------ */

.results-check-controls {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}
.results-check-controls .control-search { flex: 1 1 280px; }

.results-connect {
  height: 40px;
  padding: 0 16px;
  background: none;
  border: 1px solid rgb(var(--warm-ink) / 0.20);
  border-radius: 8px;
  color: var(--text-primary);
  font: inherit;
  font-size: 13px;
  font-variation-settings: "FLAT" 0;
  white-space: nowrap;
  cursor: pointer;
  transition: border-color var(--duration-fast) var(--ease-out);
}
.results-connect:hover { border-color: rgb(var(--warm-ink) / 0.34); }
.results-connect:focus-visible { outline: 2px solid var(--text-muted); outline-offset: 3px; }
.results-connect:disabled { opacity: 0.6; cursor: progress; }

.results-check-failed {
  margin: 0;
  font-size: 13px;
  line-height: 1.5;
  color: var(--text-muted);
  font-variation-settings: "FLAT" 0;
}
.results-check-failed[hidden] { display: none; }

.results-check-result {
  display: grid;
  gap: 10px;
  padding: 16px;
  border-radius: var(--radius-card);
  background: rgb(var(--card-tint) / var(--card-opacity));
  border: 1px solid var(--card-border);
  color: var(--card-ink);
}
.results-check-result[hidden] { display: none; }

.results-check-line {
  margin: 0;
  font-size: 15px;
  line-height: 1.5;
  font-variation-settings: "FLAT" 0;
}

.results-check-txs {
  list-style: none;
  margin: -4px 0 0;
  padding: 0;
  display: grid;
  gap: 4px;
}

/* The full hash, never shortened: it is what someone pastes into the explorer
   to check us. It breaks anywhere rather than pushing the panel sideways. */
.results-check-txs a {
  font-size: 12px;
  line-height: 1.4;
  color: var(--card-ink-muted);
  overflow-wrap: anywhere;
  font-variation-settings: "FLAT" 0;
}
.results-check-txs a:hover { color: var(--card-ink); }

/* ---- the draw ------------------------------------------------------------ */

/* .panel sets its own display, which would beat the hidden attribute. */
.results-winners[hidden],
.results-winners-verify[hidden] { display: none; }

/* In draw order. NUMBERED BY A COUNTER IN ITS OWN COLUMN, not ::marker, so an
   address that wraps keeps its number beside its first line and the second
   line starts under the address rather than under the number. */
.results-winners-list {
  margin: 0;
  padding: 0;
  list-style: none;
  counter-reset: winner;
  display: grid;
  gap: 6px;
  font-size: 13px;
  line-height: 1.4;
  color: var(--text-muted);
  font-variant-numeric: tabular-nums;
}
.results-winners-list li {
  display: grid;
  grid-template-columns: 2.2em minmax(0, 1fr);
  align-items: baseline;
  counter-increment: winner;
}
.results-winners-list li::before {
  content: counter(winner) ".";
  padding-right: 0.5em;
  text-align: right;
  color: var(--text-subtle);
}

/* THE FULL ADDRESS, ALWAYS. It breaks anywhere rather than shrinking or pushing
   the panel sideways, so at 375 a 42-character address wraps onto a second line
   beside its number. */
.results-winner {
  min-width: 0;
  color: var(--card-ink);
  overflow-wrap: anywhere;
  font-variation-settings: "FLAT" 0;
}

.results-winners-verify {
  margin: 0;
  font-size: 13px;
  line-height: 1.5;
  color: var(--text-muted);
  font-variation-settings: "FLAT" 0;
}
.results-winners-verify a { color: inherit; text-decoration: underline; text-underline-offset: 3px; }
.results-winners-verify a:hover { color: var(--text-primary); }
.results-winners-verify a:focus-visible { outline: 2px solid var(--text-muted); outline-offset: 3px; }

/* ---- the sealed line ------------------------------------------------------ */

/* Between the check panel and the disclaimer, on the footer's own measure so its
   left edge is the bubble's. Small and muted, and the hash breaks anywhere rather
   than running past a phone's edge. */
.results-sealed {
  max-width: 1360px;
  margin: 24px auto 0;
  padding: 0 16px;
  font-size: 12px;
  line-height: 1.5;
  color: var(--text-subtle);
  overflow-wrap: anywhere;
  font-variation-settings: "FLAT" 0;
}
.results-sealed:empty { display: none; }
.results-sealed a { color: inherit; }