/* fairness page styles (Binder). Colours come from inject/theme.css variables only.
   The step-by-step verifier output is styled in inject/pages/verify-lib.css. */

/* hero counters */
.fv-hero-stats { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px 24px; max-width: 760px; margin-top: 22px; }
@media (min-width: 640px) { .fv-hero-stats { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.fv-hero-stats div { min-width: 0; padding-left: 12px; border-left: 2px solid var(--sw-edge); }
.fv-hero-stats b { display: block; font: 400 clamp(22px, 3.6vw, 32px)/1 var(--sw-display); color: var(--cream); font-variant-numeric: tabular-nums; }
.fv-hero-stats div:nth-child(3) b { color: var(--red-hot); }
.fv-hero-stats span { display: block; margin-top: 4px; font: 700 9.5px/1.3 var(--sw-mono); letter-spacing: 0.14em; text-transform: uppercase; color: var(--cream-mute); }

.fv-steps > li { min-width: 0; }
.fv-box { min-width: 0; }
@media (max-width: 480px) { .fv-box { padding: 16px; } }

/* recent draws */
.fv-recent { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.fv-recent__msg { font: 500 12.5px/1.5 var(--sw-body); color: var(--ink-soft); }
.fv-recent__msg a { color: var(--red); font-weight: 700; }
.fv-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  max-width: 100%;
  padding: 6px 10px;
  border: 1.5px solid var(--ink);
  border-radius: 3px;
  background: var(--cream);
  color: var(--color-ink);
  font: 600 11px/1.2 var(--sw-mono);
  cursor: pointer;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.fv-chip b { font-weight: 800; }
.fv-chip span { color: var(--ink-mute); font-size: 10px; }
.fv-chip i { font-style: normal; }
.fv-chip:hover { background: var(--cream-3); }
.fv-chip[aria-pressed="true"] { background: var(--color-ink); color: var(--cream); }
.fv-chip[aria-pressed="true"] span { color: color-mix(in srgb, var(--cream) 72%, transparent); }
.fv-retry { margin-left: 6px; padding: 2px 8px; border: 1.5px solid var(--ink); border-radius: 3px; background: var(--cream); font: 800 10px/1.3 var(--sw-mono); letter-spacing: 0.1em; text-transform: uppercase; cursor: pointer; }

/* summary of the draw being verified */
.fv-sum { display: grid; grid-template-columns: 44px minmax(0, 1fr) auto; gap: 12px; align-items: center; margin-bottom: 12px; padding: 10px 12px; border: 1.5px solid var(--ink); border-radius: 4px; background: var(--cream); }
.fv-sum__img { position: relative; width: 44px; height: 60px; overflow: hidden; border: 1px solid var(--ink); border-radius: 2px; background: var(--cream-3); }
.fv-sum__img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.fv-sum__txt { min-width: 0; }
.fv-sum__name { font: 400 16px/1.15 var(--sw-display); color: var(--color-ink); overflow-wrap: anywhere; }
.fv-sum__meta { margin-top: 3px; font: 600 10px/1.4 var(--sw-mono); letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink-mute); overflow-wrap: anywhere; }
.fv-sum__meta b { color: var(--color-ink); }
.fv-sum__link { font: 800 10.5px/1.2 var(--sw-mono); letter-spacing: 0.12em; text-transform: uppercase; color: var(--red); text-decoration: none; white-space: nowrap; }
.fv-sum__link:hover { text-decoration: underline; }
@media (max-width: 520px) {
  .fv-sum { grid-template-columns: 40px minmax(0, 1fr); }
  .fv-sum__img { width: 40px; height: 54px; }
  .fv-sum__link { grid-column: 2; }
}

/* blockhash-only vs Binder */
.fv-vs { margin: 10px 0 0; padding-left: 10px; border-left: 2px solid var(--ink-faint); font: 500 12.5px/1.45 var(--sw-body); color: var(--ink-soft); }
.fv-vs__k { display: block; margin-bottom: 2px; font: 800 9.5px/1.2 var(--sw-mono); letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-mute); }
.fv-vs--us { border-left-color: var(--red); color: var(--color-ink); }
.fv-vs--us .fv-vs__k { color: var(--red); }

/* code block: never push the page wider than the screen */
[data-fv-code] { white-space: pre; }
figure:has([data-fv-code]) { max-width: 100%; }
[data-fv-code] { font-variant-ligatures: none; font-feature-settings: "liga" 0, "calt" 0; }
/* keep the reference code next to a long verification on wide screens */
@media (min-width: 1024px) { #verify > div:last-child { position: sticky; top: 84px; align-self: start; } }
@media (max-width: 639px) { .fv-steps { grid-auto-rows: auto !important; } }

/* keyboard focus: the id input uses outline-none, so ring its frame */
[data-fv-form] label:focus-within { box-shadow: 0 0 0 2px var(--cream), 0 0 0 4px var(--red); }
.fv-chip:focus-visible, .fv-retry:focus-visible { outline: 2px solid var(--red); outline-offset: 2px; }
[data-fv-copy]:focus-visible { outline: 2px solid var(--red-hot); outline-offset: 2px; }
/* step cards: keep a gap between the text and the formula bar when the text fills the card */
.fv-steps > li > div:nth-last-child(2) { margin-bottom: 10px; }
/* the sticky header must not cover the verifier when it is scrolled into view */
#verify { scroll-margin-top: 80px; }
/* the reference code scrolls sideways: it is focusable so keyboard users can scroll it */
pre:has(> [data-fv-code]):focus-visible { outline: 2px solid var(--red-hot); outline-offset: -3px; }