/* ==========================================================================
   Yapped — landing, source picker, report, awards, share card

   The award section deliberately AVOIDS a card pile: one hero award gets full
   editorial treatment, the rest compress into a ledger. Hierarchy through
   scale contrast, not five identical boxes.
   ========================================================================== */

/* ---- Masthead ---------------------------------------------------------- */

.mast { display: flex; align-items: baseline; justify-content: space-between; gap: var(--s-2); }
.mast__logo {
  font-family: var(--f-display);
  font-variation-settings: 'wdth' 108, 'wght' 700;
  font-size: 1.0625rem;
  letter-spacing: 0.34em;      /* wide-tracked wordmark reads as considered */
  text-indent: 0.34em;
  line-height: 1;
  text-transform: uppercase;
}
.mast__logo sup {
  font-family: var(--f-mono);
  font-size: 0.5rem;
  letter-spacing: 0;
  vertical-align: super;
  color: var(--fade);
}

/* ---- Labels: the workhorse of the hierarchy ---------------------------- */

.label {
  font-size: var(--t-micro);
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
  color: var(--fade);
}

/* ---- Hero -------------------------------------------------------------- */

.hero__stat {
  font-family: var(--f-display);
  font-variation-settings: 'wdth' 118, 'wght' 700;
  font-size: var(--t-mega);
  line-height: 0.84;
  letter-spacing: -0.05em;
  margin-block: var(--s-3) var(--s-2);
  font-feature-settings: 'tnum';
}
.hero__caption {
  font-family: var(--f-serif);
  font-size: 1.125rem;
  line-height: 1.45;
  font-weight: 400;
  text-wrap: balance;
}
.hero__sub { font-size: var(--t-sm); color: var(--ink-soft); margin-top: var(--s-2); }

/* ---- Buttons ----------------------------------------------------------- */

.btn {
  --btn-bg: var(--ink);
  --btn-fg: var(--paper);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--s-2);
  width: 100%;
  min-height: 3rem;
  padding: 0 var(--s-3);
  background: var(--btn-bg);
  color: var(--btn-fg);
  font-size: var(--t-xs);
  font-weight: 500;
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
  transition: background var(--d-fast) var(--ease), color var(--d-fast) var(--ease);
}
.btn:hover { --btn-bg: var(--stamp); }
.btn:active { transform: scale(0.99); }

.btn--ghost {
  --btn-bg: transparent; --btn-fg: var(--ink-soft);
  border: 1px solid var(--rule);
  min-height: 2.75rem;
  letter-spacing: var(--ls-micro);
}
.btn--ghost:hover { --btn-bg: transparent; --btn-fg: var(--ink); border-color: var(--ink); }

/* ---- Source picker ----------------------------------------------------- */

.sources { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1px; background: var(--rule-fine); }
.source {
  display: grid;
  grid-template-columns: 16px 1fr;
  align-content: center;
  align-items: center;
  gap: 2px var(--s-2);
  min-height: 3.5rem;          /* keeps rows even whether or not there's a wait note */
  padding: var(--s-2);
  background: var(--paper);
  text-align: left;
  transition: background var(--d-fast) var(--ease), color var(--d-fast) var(--ease);
}
/* An odd source count would otherwise leave the grid's rule-coloured
   background showing through as an empty grey cell. */
.source:last-child:nth-child(odd) { grid-column: span 2; }
.source:hover { background: var(--accent-wash); }
.source[aria-pressed='true'] { background: var(--ink); color: var(--paper); }

.source__glyph { width: 15px; height: 15px; }
.source__glyph path, .source__glyph circle, .source__glyph rect {
  stroke: currentColor; stroke-width: 1.4; fill: none;
  stroke-linecap: square; stroke-linejoin: miter;
}
.source__name { font-size: var(--t-xs); letter-spacing: 0.05em; }
.source__wait {
  grid-column: 2;
  font-size: 0.5625rem;
  letter-spacing: var(--ls-micro);
  text-transform: uppercase;
  opacity: 0.55;
}

#source-note {
  margin-top: var(--s-2);
  font-size: var(--t-xs);
  line-height: 1.5;
  color: var(--fade);
}
#source-note.is-async { color: var(--stamp); }

/* ---- Section headings -------------------------------------------------- */

.sect__no {
  font-family: var(--f-mono);
  font-size: var(--t-micro);
  letter-spacing: var(--ls-label);
  color: var(--fade);
}
.sect__title {
  font-family: var(--f-display);
  font-variation-settings: 'wdth' 100, 'wght' 500;
  font-size: var(--t-xl);
  line-height: 1.1;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  margin-block: var(--s-1) var(--s-3);
}

/* ---- Leaderboard: a ledger, not a bar chart ---------------------------- */

.lb { display: grid; }
.lb__row {
  display: grid;
  grid-template-columns: 1.25rem 1fr auto;
  gap: var(--s-2);
  align-items: baseline;
  padding-block: var(--s-2);
  border-bottom: 1px solid var(--rule-fine);
}
.lb__row:first-child { border-top: 1px solid var(--rule-fine); }
.lb__rank { font-size: var(--t-micro); color: var(--fade); letter-spacing: var(--ls-micro); }
.lb__name { font-size: var(--t-lg); font-family: var(--f-serif); }
.lb__row:first-child .lb__name { font-style: italic; }
.lb__val { font-size: var(--t-xs); color: var(--ink-soft); }

/* A single hairline rule whose LENGTH is the datum. Restraint over bars. */
.lb__bar {
  display: block;
  height: 1px;
  margin-top: 6px;
  background: var(--ink);
  opacity: 0.28;
  width: var(--w, 50%);
  animation: grow var(--d-slow) var(--ease) both;
  animation-delay: calc(var(--i, 0) * 80ms);
}
.lb__row:first-child .lb__bar { height: 2px; opacity: 1; background: var(--stamp); }

@keyframes grow { from { width: 0; } to { width: var(--w, 50%); } }

/* ---- Awards: ONE hero, then a ledger ----------------------------------- */

.award-hero { padding-block: var(--s-2) var(--s-3); }
.award-hero__label {
  font-size: var(--t-micro);
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
  color: var(--stamp);
}
.award-hero__title {
  font-family: var(--f-display);
  font-variation-settings: 'wdth' 112, 'wght' 700;
  font-size: clamp(1.75rem, 9cqw, 2.25rem);
  line-height: 0.98;
  letter-spacing: -0.03em;
  text-transform: uppercase;
  margin-block: var(--s-2) var(--s-2);
}
.award-hero__line {
  font-family: var(--f-serif);
  font-size: 1.0625rem;
  line-height: 1.5;
}
.award-hero__line b { font-style: italic; font-weight: 400; }
.award-hero__proof {
  margin-top: var(--s-2);
  font-size: var(--t-micro);
  letter-spacing: var(--ls-micro);
  text-transform: uppercase;
  color: var(--fade);
}

.award-list { display: grid; }
.award-row {
  display: grid;
  grid-template-columns: 1.5rem 1fr;
  gap: var(--s-2);
  padding-block: var(--s-3);
  border-top: 1px solid var(--rule-fine);
}
.award-row__no {
  font-family: var(--f-mono);
  font-size: var(--t-micro);
  color: var(--fade);
  letter-spacing: var(--ls-micro);
  padding-top: 3px;
}
.award-row__title {
  font-family: var(--f-display);
  font-variation-settings: 'wdth' 100, 'wght' 600;
  font-size: var(--t-sm);
  letter-spacing: 0.14em;
  text-transform: uppercase;
}
.award-row__line { font-family: var(--f-serif); font-size: 1rem; line-height: 1.45; margin-top: 5px; }
.award-row__line b { font-style: italic; font-weight: 400; }
.award-row__rarity {
  display: inline-block;
  margin-top: var(--s-1);
  font-family: var(--f-mono);
  font-size: 0.5625rem;
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
  color: var(--stamp);
  border-bottom: 1px solid currentColor;
}

/* ---- Emoji DNA: emoji here are DATA, not ornament ---------------------- */

.dna { display: grid; gap: var(--s-2); }
.dna__cell { display: grid; grid-template-columns: 1.5rem 1fr auto; gap: var(--s-2); align-items: center; }
.dna__e { font-size: 0.9375rem; }
.dna__track { height: 1px; background: var(--ink); opacity: 0.22; width: var(--w); }
.dna__cell:first-child .dna__track { height: 2px; opacity: 1; background: var(--accent); }
.dna__n { font-family: var(--f-mono); font-size: var(--t-micro); color: var(--fade); }

/* ---- Barcode ----------------------------------------------------------- */

.barcode { display: grid; gap: var(--s-2); justify-items: center; }
.barcode__bars { display: flex; align-items: flex-end; gap: 1.5px; height: 34px; }
.barcode__bars i { display: block; width: var(--w, 2px); height: 100%; background: var(--ink); }
.barcode__num {
  font-size: var(--t-micro); letter-spacing: 0.42em;
  text-indent: 0.42em; color: var(--fade);
}

/* ---- Threshold --------------------------------------------------------- */

.threshold { display: grid; gap: var(--s-3); padding-block: var(--s-4); text-align: center; }
.threshold__q {
  font-family: var(--f-serif);
  font-size: 1.375rem;
  line-height: 1.35;
  font-weight: 400;
  text-wrap: balance;
}

/* ---- Share card -------------------------------------------------------- */

.sharecard-wrap { display: grid; gap: var(--s-2); justify-items: center; }
.sharecard {
  width: 100%; max-width: 13rem;
  aspect-ratio: 1080 / 1350;
  box-shadow: 0 8px 26px oklch(0% 0 0 / 0.30);
}

/*
 * Desktop gets LESS headroom, not more.
 *
 * This used to raise padding-top to 5.5rem on wide screens, which pushed the
 * hook and the drop zone below the fold and cost two or three scrolls before
 * anything actionable appeared. A phone needs breathing room at the top; a
 * 900px-tall laptop viewport needs the content.
 */
@media (min-width: 60rem) { .stage { padding-top: var(--s-3); } }