/* ============================================================================
   Final look
   ---------------------------------------------------------------------------
   The page as a visitor sees it once the campaign closes. It replaces the
   viewport rather than living on a second URL, and it never scrolls: the grid
   is flexed to whatever height is left after the bar and the footer, so every
   sponsor is on screen at once. Scroll costs sponsors visibility, so there is
   none.
   ========================================================================= */

.final {
  position: fixed;
  inset: 0;
  z-index: 90;
  display: flex;
  flex-direction: column;
  /* No explicit height: `inset: 0` on a fixed element already gives exactly the
     visual viewport. `100dvh` resolves larger than that on mobile (it reserves
     room for retracting browser chrome) and pushed the footer off screen. */
  background: var(--bg);
  opacity: 0;
  transform: scale(1.015);
  pointer-events: none;
  transition: opacity var(--t-base) var(--ease), transform var(--t-base) var(--ease);
}

.final.is-open {
  opacity: 1;
  transform: none;
  pointer-events: auto;
}

.final[hidden] {
  display: none;
}

/* ------------------------------------------------------------------- Bar */

.final__bar {
  display: flex;
  align-items: center;
  gap: var(--sp-4);
  flex: none;
  padding: var(--sp-3) var(--sp-5);
  border-bottom: 1px solid var(--line);
}

.final__count {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  font-size: var(--step--2);
  color: var(--ink-3);
}

.final__count b {
  font-family: var(--font-mono);
  font-weight: 550;
  color: var(--ink);
}

/* Self-documenting: this view is the one built to be screenshotted and sent
   around, so the "not real sponsors yet" disclaimer needs to survive a tight
   crop, not just live in the footer. Dropped on narrow screens, where the bar
   is already tight with the brandmark, the count and both actions. */
.final__demo-note {
  white-space: nowrap;
}

@media (max-width: 640px) {
  .final__demo-note {
    display: none;
  }
}

.final__actions {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  margin-inline-start: auto;
}

/* ----------------------------------------------------------------- Title */

.final__title {
  flex: none;
  padding: var(--sp-5) var(--sp-5) var(--sp-4);
  text-align: center;
}

.final__title h2 {
  font-size: var(--step-2);
}

.final__title p {
  margin-top: var(--sp-2);
  font-size: var(--step--1);
  color: var(--ink-2);
}

/* Vertical space is the scarce resource here. The title is the first thing to
   go — on any short viewport, and on phones regardless of height, where those
   ~95px are worth more to the grid than to a heading. */
@media (max-height: 760px), (max-width: 639px) {
  .final__title {
    display: none;
  }
}

/* ----------------------------------------------------------------- Stage */

.final__stage {
  flex: 1;
  min-height: 0;
  padding: var(--sp-4) var(--sp-5);
}

.final__stage .grid {
  /* Override the section grid's clamp — here it simply fills what is left. */
  height: 100%;
  max-width: var(--content);
  margin-inline: auto;
  border-color: transparent;
  background: transparent;
  padding: 0;
}

/* ---------------------------------------------------------------- Footer */

.final__foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-3);
  flex: none;
  padding: var(--sp-3) var(--sp-5);
  border-top: 1px solid var(--line);
  font-size: var(--step--2);
  color: var(--ink-3);
}

.final__foot a {
  color: var(--ink-2);
}

.final__foot a:hover {
  color: var(--accent-text);
}

@media (max-width: 560px) {
  .final__bar,
  .final__foot {
    padding-inline: var(--sp-4);
  }
  .final__stage {
    padding: var(--sp-3) var(--sp-4);
  }
  /* The tagline is the second span, not the last child — the last child is the
     mailto link. Dropping it keeps the footer to a single line, which is what
     stops the overlay overflowing the viewport on a phone. */
  .final__foot span:nth-of-type(2) {
    display: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .final {
    transition-duration: 1ms;
    transform: none;
  }
}