/* ============================================================================
   BitcoinPuzzles — homepage
   Depends on tokens.css, base.css and puzzles.css (the challenge grid and card
   are shared with the index, not re-declared here).
   No !important: the layout now loads this sheet after the shell, so ordinary
   specificity is enough.
   ========================================================================= */

/* ---------------------------------------------------------------------------
   Hero
   Compact by intent. The old full-viewport hero spent the entire first screen
   on a claim; here the headline, the action and the live totals all land
   above the fold, and real challenges start immediately under them.
   ------------------------------------------------------------------------ */

/* Deliberately short. The contract puts the totals and then real challenges
   in the first screen, so the headline gets stated, not staged. */
.home-hero {
  padding-block: var(--sp-10) var(--sp-8);
  border-bottom: 1px solid var(--line);
}

.home-hero__title {
  font-size: var(--fs-4xl);
  font-weight: 800;
  letter-spacing: var(--tr-display);
  line-height: 1.05;
  max-width: 20ch;
  margin-bottom: var(--sp-4);
}

.home-hero__lede {
  font-size: var(--fs-lg);
  line-height: var(--lh-body);
  color: var(--ink-300);
  max-width: 58ch;
  margin-bottom: var(--sp-6);
}

/* The type keeps its own measure and the stake board takes the width the type
   does not use, so the first viewport gains proof without gaining height.
   Single column below 1024px — see the responsive block. */
.home-hero__grid {
  display: grid;
  margin-bottom: var(--sp-8);
}

.home-hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-3);
}

[dir="rtl"] .home-hero__actions .icon {
  transform: scaleX(-1);
}

/* Full-bleed across the container: the totals are the hero's horizontal
   anchor under the left-aligned type, not a third column of text. */
.home-hero__ledger {
  margin-bottom: 0;
}

/* ---------------------------------------------------------------------------
   Stake board
   The hero's right column: the largest live stakes, one real record per row.
   Reads as an explorer's pending panel, which is what it is — the rows are
   ordered by prize and every one of them links to the challenge itself.
   ------------------------------------------------------------------------ */

.stake-board {
  /* Rows run edge to edge, so they need clipping to the panel's radius. */
  overflow: hidden;
}

.stake-board__all {
  flex: none;
  font-size: var(--fs-sm);
  color: var(--ink-300);
  text-decoration: none;
  transition: color var(--dur-1) var(--ease);
}

.stake-board__all:hover {
  color: var(--accent);
}

.stake-board__list {
  margin: 0;
  padding: 0;
  list-style: none;
}

.stake-board__row + .stake-board__row {
  border-top: 1px solid var(--line);
}

/* Row height is the hero's height budget: five rows plus the header have to
   fit inside the intro column, or the board pushes the ledger strip and the
   featured cards down the page. Keep the glyph smaller than the stacked text
   so the text alone sets the row height. */
.stake-board__link {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: var(--sp-3);
  padding: var(--sp-2) var(--sp-5);
  color: inherit;
  text-decoration: none;
  transition: background-color var(--dur-1) var(--ease);
}

.stake-board .panel__header {
  padding-block: var(--sp-2);
}

.stake-board__link:hover {
  background: var(--ink-800);
}

.stake-board__glyph {
  display: block;
  flex: none;
  width: 24px;
  height: 24px;
  overflow: hidden;
  background: var(--ink-900);
  border-radius: var(--r-xs);
}

.stake-board__glyph .identicon {
  display: block;
}

.stake-board__id {
  min-width: 0;
}

.stake-board__title {
  display: block;
  overflow: hidden;
  font-size: var(--fs-sm);
  font-weight: 600;
  line-height: 1.25;
  color: var(--ink-100);
  text-overflow: ellipsis;
  white-space: nowrap;
  /* Titles are user content in whatever language the fallback lands on; under
     dir="rtl" the bidi algorithm renders "12 Palavras" as "Palavras 12".
     First-strong detection keeps every title in its own direction. */
  unicode-bidi: plaintext;
  transition: color var(--dur-1) var(--ease);
}

.stake-board__link:hover .stake-board__title {
  color: var(--accent);
}

/* Later in the cascade than .addr in base.css, so this wins at equal
   specificity — the row is a denser context than a card. */
/* .addr is inline-flex; block-level here drops the inline line-box leading that
   would otherwise add ~8px to every row. */
.stake-board__addr {
  display: flex;
  font-size: var(--fs-2xs);
  line-height: 1.25;
  color: var(--ink-400);
}

.stake-board__prize {
  font-family: var(--font-mono);
  font-size: var(--fs-sm);
  font-weight: 600;
  color: var(--accent);
  text-align: end;
  /* The one atom rule: ru delimits thousands with a plain space. */
  white-space: nowrap;
}

.stake-board__unit {
  margin-inline-start: 0.35em;
  font-size: var(--fs-2xs);
  opacity: 0.7;
}

/* ---------------------------------------------------------------------------
   Featured challenges
   ------------------------------------------------------------------------ */

.home-featured {
  padding-block: var(--sp-12);
}

/* ---------------------------------------------------------------------------
   Close
   The settled side of the ledger the hero opened: the hero's stake board
   lists what is pending in orange, the close lists what is finished in green.
   Same row grammar as the stake board so the two read as one instrument,
   different hue because claimed is a different state than at-risk.
   ------------------------------------------------------------------------ */

.home-close {
  padding-block: var(--sp-16) var(--sp-20);
  text-align: center;
  border-top: 1px solid var(--line);
}

.home-close .container {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.home-close__title {
  margin-bottom: var(--sp-3);
}

.home-close__text {
  font-size: var(--fs-lg);
  color: var(--ink-300);
  max-width: 46ch;
  margin-bottom: var(--sp-8);
  /* Centered two-liner: without balancing, the second line is one word. */
  text-wrap: balance;
}

/* Records read start-aligned even inside a centered section: a ledger is a
   table, not a toast. Width caps at a comfortable row measure. */
.home-close__board {
  width: min(100%, 620px);
  margin-bottom: var(--sp-6);
  overflow: hidden;
  text-align: start;
}

.home-close__list {
  margin: 0;
  padding: 0;
  list-style: none;
}

.home-close__row + .home-close__row {
  border-top: 1px solid var(--line);
}

.home-close__link {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: var(--sp-3);
  padding: var(--sp-3) var(--sp-5);
  color: inherit;
  text-decoration: none;
  transition: background-color var(--dur-1) var(--ease);
}

.home-close__link:hover {
  background: var(--ink-800);
}

.home-close__glyph {
  display: block;
  flex: none;
  width: 24px;
  height: 24px;
  overflow: hidden;
  background: var(--ink-900);
  border-radius: var(--r-xs);
}

.home-close__glyph .identicon {
  display: block;
}

.home-close__id {
  min-width: 0;
}

.home-close__name {
  display: block;
  overflow: hidden;
  font-size: var(--fs-sm);
  font-weight: 600;
  line-height: 1.25;
  color: var(--ink-100);
  text-overflow: ellipsis;
  white-space: nowrap;
  /* Same rationale as .stake-board__title: user titles carry their own
     direction under dir="rtl". */
  unicode-bidi: plaintext;
  transition: color var(--dur-1) var(--ease);
}

.home-close__link:hover .home-close__name {
  color: var(--accent);
}

/* The solver is the proof the section exists for: the connective stays
   muted, the name itself steps up a weight and an ink. */
.home-close__solver {
  display: block;
  overflow: hidden;
  font-size: var(--fs-2xs);
  line-height: 1.25;
  color: var(--ink-400);
  text-overflow: ellipsis;
  white-space: nowrap;
}

.home-close__solver-name {
  font-weight: 600;
  color: var(--ink-200);
}

.home-close__meta {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 2px;
  text-align: end;
}

/* Claimed, not at-risk: the one place the homepage prints money in green.
   The word carrying the state is the section's own heading and lede. */
.home-close__prize {
  font-family: var(--font-mono);
  font-size: var(--fs-sm);
  font-weight: 600;
  color: var(--solved);
  white-space: nowrap;
}

.home-close__unit {
  margin-inline-start: 0.35em;
  font-size: var(--fs-2xs);
  opacity: 0.7;
}

.home-close__date {
  font-family: var(--font-mono);
  font-size: var(--fs-2xs);
  line-height: 1.25;
  color: var(--ink-400);
  white-space: nowrap;
}

/* ---------------------------------------------------------------------------
   Responsive
   ------------------------------------------------------------------------ */

/* Two columns only where the spare width actually exists. */
@media (min-width: 1024px) {
  .home-hero__grid {
    grid-template-columns: minmax(0, 1fr) 380px;
    align-items: start;
    gap: var(--sp-12);
  }
}

/* Below 1024px the board is dropped rather than stacked: the featured grid
   immediately beneath carries the same challenges at higher fidelity, and
   stacking it here would push real records further down on exactly the
   viewport with the least room to spare. */
@media (max-width: 1023.98px) {
  .stake-board {
    display: none;
  }
}

@media (max-width: 768px) {
  .home-hero {
    padding-block: var(--sp-12) var(--sp-10);
  }

  .home-hero__title {
    max-width: none;
  }

  .home-hero__lede {
    font-size: var(--fs-md);
    margin-bottom: var(--sp-6);
  }

  .home-hero__actions .btn {
    flex: 1 1 100%;
  }

  .home-featured,
  .home-close {
    padding-block: var(--sp-12);
  }
}