/* Stage layout v2: 3-column pitch layout (nav | content | rating) with
   a single active "stage" section in the center, prev/next stage
   navigation, and a fixed bottom CTA bar that is always visible.

   v2 (2026-06-08):
   - Page-chrome band lives OUTSIDE the 3-column grid (title only)
   - The right aside is the home of HonestScore, byline, audience,
     countdown, vote widget, and the Report link
   - The CTA bar is renamed (.pitch-cta-center) and contains only
     the primary CTA — the Report link has moved
   - Archived / test-listing pitches tint the full page via body class
   - The legacy mobile-rating-toggle is removed */

.pitch-page--stage {
  max-width: none;
  width: 100%;
  /* Reserve bottom padding so the fixed CTA bar never covers
     pitch content. The bar is ~5rem tall; add a little more for
     breathing room. */
  padding-bottom: 7rem;
}

.pitch-page--stage .pitch-main {
  max-width: none;
  width: 100%;
  padding-left: 1rem;
  padding-right: 1rem;
}

/* ─── Page-chrome band (sits OUTSIDE the 3-column grid) ─────────────
   v3 (2026-06-09): the h1.pitch-title moved out of .pitch-chrome
   into .pitch-toolbar. The chrome band now hosts only the top-of-
   page status strips (archived / test-listing). The .pitch-title
   rule below scopes to the toolbar; the chrome block keeps its
   centering padding so the strips align with the rest of the
   centered 1200px content column. */
.pitch-chrome {
  max-width: 1200px;
  margin: 0 auto;
  padding: 1.5rem 1rem 0;
}

/* ─── Toolbar-hosted h1 (v3) ────────────────────────────────────────
   Stage-specific override on top of the .pitch-toolbar .pitch-title
   base in pitch-mockup.css. Slightly larger so it reads as a hero
   element even in the slim 52px toolbar row, and tighter letter-
   spacing to fit long titles like "Founding Pitcher: throw in $1,
   lock permanent pitch economics before launch" without truncation
   on a 1200px-wide content area. */
.pitch-toolbar .pitch-title {
  font-size: clamp(1.125rem, 1.8vw, 1.375rem);
  font-weight: 800;
  letter-spacing: -0.02em;
}

/* ─── Top-of-page banner strips (inside .pitch-chrome) ────────────── */
/* Shared base for any top-of-page strip (.pitch-archived-strip,
   .pitch-test-strip). Concrete color variants come below. */
.pitch-strip {
  margin: 0 0 1rem;
  padding: 0.5rem 1rem;
  color: #fff;
  text-align: center;
  font-weight: 600;
  border-radius: var(--hp-radius, 8px);
}

.pitch-archived-strip {
  background: #b45309;
}

.pitch-test-strip {
  background: #1f2937;
}

/* ─── Page-level tints driven by body class ───────────────────────── */
body.pitch-archived {
  background: #fef3c7; /* amber wash, full page */
}

body.pitch-test-listing {
  background: #f9fafb; /* soft gray wash, full page */
}

/* ─── HonestScore: enlarged + ring-on-left (prototype shape) ────── */
.honestscore-hero {
  /* v2 (rating overhaul 2026-06-08): the prototype puts the
     ring on the LEFT and the meta block on the RIGHT, so the
     eye lands on the score first and reads the proof copy
     second. The previous centered variant (ring stacked above
     the meta) is kept as a fallback for narrow viewports via
     the @media rule below. */
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: center;
  gap: 1.25rem;
  padding: 1.25rem 1rem;
  border: 1px solid var(--hp-border);
  border-radius: 16px;
  background: var(--hp-surface, transparent);
  margin-bottom: 1.25rem;
}

.honestscore-ring {
  min-width: 7.5rem;
  min-height: 7.5rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  border: 3px solid var(--hp-score-green, #34d399);
  border-radius: 50%;
  padding: 0.5rem;
  box-shadow: 0 0 24px rgba(52, 211, 153, 0.18);
}

.honestscore-value {
  font-size: 3rem;
  font-weight: 900;
  line-height: 1;
  color: var(--hp-score-green, #34d399);
  font-variant-numeric: tabular-nums;
}

.honestscore-label {
  font-size: 0.625rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  margin-top: 0.15rem;
  color: var(--hp-text-muted, #6b7280);
}

.honestscore-meta {
  min-width: 0;
}

.honestscore-kicker {
  margin: 0 0 0.25rem;
  font-size: 0.6875rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--hp-text-muted, #6b7280);
}

.honestscore-blurb {
  margin: 0 0 0.5rem;
  font-size: 0.875rem;
  line-height: 1.4;
  color: var(--hp-text, #111827);
}

.honestscore-pill {
  display: inline-block;
  margin: 0 0 0.5rem;
  padding: 0.125rem 0.5rem;
  border-radius: 999px;
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.06em;
}
.honestscore-pill--illus {
  background: rgba(245, 158, 11, 0.12);
  color: var(--hp-score-orange, #f59e0b);
  border: 1px solid var(--hp-score-orange, #f59e0b);
}

.honestscore-stats {
  margin: 0;
  font-size: 0.8125rem;
  color: var(--hp-text-muted, #6b7280);
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.375rem;
}
.honestscore-stats strong {
  color: var(--hp-text, #111827);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}
.honestscore-stats-sep {
  opacity: 0.5;
}
.honestscore-hpcode {
  font-family: var(--hp-mono, ui-monospace, monospace);
  font-size: 0.75rem;
  background: var(--hp-surface-muted, #f3f4f6);
  border: 1px solid var(--hp-border, #e5e7eb);
  border-radius: 4px;
  padding: 0 0.25rem;
}

/* ─── Score breakdown: collapsible six-dim card with bar rows ─
   Wrapped in a native <details> for the disclosure — collapsed
   by default. The summary IS the title row; the [open] selector
   rotates the caret to give the user visual feedback that the
   card is now expanded. ────────────────────────────────────────── */
.pitch-score-breakdown {
  border: 1px solid var(--hp-border, #e5e7eb);
  border-radius: 12px;
  padding: 0.75rem 1.25rem 0.75rem;
  background: var(--hp-surface, transparent);
  margin-bottom: 1.25rem;
}
.pitch-score-breakdown[open] {
  padding-bottom: 1rem;
}

.pitch-score-breakdown-title {
  /* The summary is the disclosure trigger. Reset the native
     marker + cursor so it looks like the old <h2> title row. */
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin: 0;
  padding: 0.25rem 0;
  list-style: none;
  cursor: pointer;
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--hp-text, #111827);
  user-select: none;
  -webkit-tap-highlight-color: transparent;
}
/* Firefox renders the disclosure marker on <summary> by default;
   Chrome/Safari do too unless we explicitly suppress it. */
.pitch-score-breakdown-title::-webkit-details-marker {
  display: none;
}
.pitch-score-breakdown-title::marker {
  display: none;
  content: "";
}
.pitch-score-breakdown-title:focus-visible {
  outline: 2px solid var(--hp-primary, #e51923);
  outline-offset: 2px;
  border-radius: 4px;
}
.pitch-score-breakdown-caret {
  color: var(--hp-score-orange, #f59e0b);
  font-size: 0.75rem;
  transform: translateY(-1px);
  transition: transform 0.15s ease-out;
  display: inline-block;
}
.pitch-score-breakdown[open] .pitch-score-breakdown-caret {
  transform: translateY(-1px) rotate(90deg);
}
.pitch-score-breakdown-illus {
  margin-left: 0.5rem;
  color: var(--hp-text-muted, #6b7280);
  font-weight: 500;
  font-size: 0.75rem;
}

.pitch-score-breakdown-list {
  list-style: none;
  margin: 0.75rem 0 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}
.pitch-score-breakdown-empty {
  margin: 0.75rem 0 0;
  color: var(--hp-text-muted, #6b7280);
  font-size: 0.875rem;
}

.pitch-score-row {
  display: grid;
  grid-template-columns: 6.5rem 1fr 3rem 3.5rem;
  align-items: center;
  gap: 0.625rem;
  font-size: 0.875rem;
  line-height: 1.2;
}
.pitch-score-row-label {
  color: var(--hp-text, #111827);
  font-weight: 500;
}
.pitch-score-bar {
  display: block;
  height: 0.5rem;
  border-radius: 999px;
  background: var(--hp-surface-muted, #e5e7eb);
  overflow: hidden;
}
.pitch-score-bar-fill {
  display: block;
  height: 100%;
  background: linear-gradient(90deg, var(--hp-score-green, #34d399), #10b981);
  border-radius: 999px;
  transition: width 0.4s ease-out;
}
.pitch-score-row-num {
  text-align: right;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  color: var(--hp-text, #111827);
}
.pitch-score-row-count {
  text-align: right;
  color: var(--hp-text-muted, #6b7280);
  font-variant-numeric: tabular-nums;
}

@media (max-width: 480px) {
  .pitch-score-row {
    grid-template-columns: 5rem 1fr 2.5rem 3rem;
    gap: 0.5rem;
  }
}

@media (max-width: 600px) {
  .honestscore-hero {
    grid-template-columns: 1fr;
    text-align: center;
    justify-items: center;
  }
}

.honestscore-meta h2 {
  font-size: 1.25rem;
  margin: 0 0 0.5rem;
}

.pitch-layout--stage {
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
  width: 100%;
}

.pitch-layout--stage .pitch-col--nav,
.pitch-layout--stage .pitch-col--aside {
  display: none;
}

.pitch-nav--chips {
  display: block;
  margin: 0.5rem 0 1rem;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

.pitch-nav--chips .pitch-nav__list {
  display: flex;
  flex-direction: row;
  gap: 0.5rem;
  list-style: none;
  margin: 0;
  padding: 0 0 0.25rem;
}

.pitch-nav--chips .pitch-nav__link {
  display: inline-block;
  white-space: nowrap;
  padding: 0.35rem 0.75rem;
  border-radius: 999px;
  border: 1px solid var(--hp-border);
  background: var(--hp-surface-raised);
  font-size: 0.8125rem;
  text-decoration: none;
  color: var(--hp-text-muted);
}

.pitch-nav--chips .pitch-nav__link[aria-current="true"] {
  border-color: var(--hp-primary);
  color: var(--hp-text);
  background: color-mix(in srgb, var(--hp-primary) 12%, var(--hp-surface-raised));
}

.pitch-clip-player--hidden {
  display: none;
}

.pitch-clip-player:not(.pitch-clip-player--hidden) {
  width: 100%;
}

.pitch-clip-player iframe,
.pitch-clip-player video {
  width: 100%;
  aspect-ratio: 16 / 9;
  border: 0;
  border-radius: var(--hp-radius);
  background: #000;
}

/* Per-section media wrapper (rendered by pitchSectionMedia in
   pitch-sections.njk). Only the active section's media is
   visible — the rest are hidden by the [data-pitch-active="false"]
   rule below. */
.pitch-section-media {
  margin: 0 0 1.25rem;
}

.pitch-section-media__wrapper {
  position: relative;
  padding-bottom: 56.25%;
  height: 0;
  background: #000;
  border-radius: var(--hp-radius);
  overflow: hidden;
  border: 1px solid var(--hp-border);
}

.pitch-section-media__wrapper iframe,
.pitch-section-media__wrapper video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
  background: #000;
}

.pitch-section-media__meta {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 1.5rem;
  color: var(--hp-text-muted);
}

/* ─── Stage: the visible "now playing" section ───────────────────────── */
.pitch-stage {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.pitch-stage__body {
  position: relative;
}

/* The state machine flips data-pitch-active on the .pitch-block
   elements (pitch-cues.js does this). Inactive sections are hidden
   so only the active one takes the stage. We use the [hidden]
   attribute as a fallback AND the data-attribute for CSS. */
.pitch-block[hidden],
.pitch-block[data-pitch-active="false"] {
  display: none !important;
}

.pitch-block[data-pitch-active="true"] {
  display: block;
  animation: pitch-stage-fade-in 220ms ease-out;
}

@keyframes pitch-stage-fade-in {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: translateY(0); }
}

/* ─── Stage nav (prev / next) ───────────────────────────────────────── */
.pitch-stage__nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  padding-top: 0.5rem;
  border-top: 1px solid var(--hp-border);
}

.pitch-stage__btn {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.6rem 0.9rem;
  background: var(--hp-surface-raised);
  color: var(--hp-text);
  border: 1px solid var(--hp-border);
  border-radius: 8px;
  font: inherit;
  font-weight: 600;
  font-size: 0.875rem;
  cursor: pointer;
  min-width: 0;
  flex: 1 1 auto;
  max-width: 14rem;
  text-align: left;
}

.pitch-stage__btn--next {
  justify-content: flex-end;
  text-align: right;
}

.pitch-stage__btn:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

.pitch-stage__btn:hover:not(:disabled) {
  border-color: var(--hp-primary);
  color: var(--hp-text);
}

.pitch-stage__btn-label {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.pitch-stage__position {
  margin: 0;
  font-size: 0.75rem;
  color: var(--hp-text-muted);
  font-variant-numeric: tabular-nums;
  text-align: center;
  flex: 0 0 auto;
}

/* ─── Fixed bottom CTA bar (v2: .pitch-cta-center) ───────────────── */
.pitch-cta-center {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 20;
  background: linear-gradient(180deg, transparent, var(--hp-bg) 20%, var(--hp-bg));
  padding: 1rem 1rem 1rem;
  border-top: 1px solid var(--hp-border);
  box-shadow: 0 -8px 24px rgba(0, 0, 0, 0.35);
}

html[data-pitch-theme="light"] .pitch-cta-center {
  background: linear-gradient(180deg, transparent, var(--hp-bg) 25%, var(--hp-bg));
}

.pitch-cta-center__inner {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  align-items: stretch;
  max-width: 1200px;
  margin: 0 auto;
}

.pitch-cta-center .pitch-cta {
  /* Unmissable. The user said "can't miss it large". */
  display: block;
  width: 100%;
  text-align: center;
  background: var(--hp-primary);
  color: #fff;
  padding: 1.4rem 1.25rem;
  border-radius: 12px;
  font-size: 1.25rem;
  font-weight: 800;
  letter-spacing: -0.01em;
  text-decoration: none;
  transition: background 0.15s, transform 0.1s;
  box-shadow: 0 8px 24px rgba(229, 25, 35, 0.35);
}

.pitch-cta-center .pitch-cta:hover {
  background: var(--hp-primary-dark);
  text-decoration: none;
  transform: translateY(-1px);
}

.pitch-cta-center .pitch-cta:focus-visible {
  outline: 3px solid #fff;
  outline-offset: 3px;
}

/* ─── Aside: the right-side rating panel + migrated meta ─────────── */
.pitch-col--aside .pitch-report-link {
  margin: 1rem 0 0;
  text-align: center;
  font-size: 0.8125rem;
}

.pitch-col--aside .pitch-report-link a {
  color: var(--hp-text-muted);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.pitch-col--aside .pitch-byline,
.pitch-col--aside .pitch-audience,
.pitch-col--aside .listing-countdown {
  margin: 0.75rem 0;
  font-size: 0.875rem;
  text-align: center;
  color: var(--hp-text-muted);
}

.pitch-col--aside .pitch-byline {
  color: var(--hp-text);
  font-weight: 500;
}

/* ─── Desktop: 3-column grid + horizontal stage nav ────────────────── */
@media (min-width: 1100px) {
  .pitch-page--stage .pitch-toolbar,
  .pitch-page--stage .mockup-ribbon,
  .pitch-page--stage .disclosure-ribbon {
    max-width: none;
  }

  .pitch-layout--stage {
    display: grid;
    grid-template-columns: minmax(12rem, 16rem) minmax(0, 1fr) minmax(18rem, 22rem);
    gap: 1.5rem 2rem;
    align-items: start;
  }

  .pitch-layout--stage .pitch-col--nav,
  .pitch-layout--stage .pitch-col--aside {
    display: block;
  }

  .pitch-layout--stage .pitch-col--nav {
    position: sticky;
    top: 1rem;
    align-self: start;
    max-height: calc(100vh - 2rem);
    overflow-y: auto;
  }

  .pitch-layout--stage .pitch-col--aside {
    position: sticky;
    top: 1rem;
    align-self: start;
    max-height: calc(100vh - 2rem);
    overflow-y: auto;
  }

  .pitch-layout--stage .pitch-nav--chips {
    display: none;
  }

  .pitch-layout--stage .pitch-col--nav > .pitch-nav {
    display: block;
  }

  .pitch-cta-center__inner {
    flex-direction: row;
    align-items: center;
    justify-content: center;
    max-width: none;
    gap: 1.5rem;
  }

  .pitch-cta-center .pitch-cta {
    width: auto;
    min-width: 16rem;
    max-width: 32rem;
    flex: 0 0 auto;
  }

  .pitch-layout--stage .pitch-col--aside .honestscore-hero {
    grid-template-columns: 1fr;
    text-align: center;
  }

  .pitch-layout--stage .pitch-col--aside .pitch-pros-cons {
    grid-template-columns: 1fr;
  }
}

.pitch-nav__list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.pitch-nav__link {
  display: block;
  padding: 0.5rem 0.75rem;
  border-radius: 8px;
  text-decoration: none;
  color: var(--hp-text-muted);
  font-size: 0.9375rem;
  font-weight: 500;
}

.pitch-nav__link:hover {
  background: var(--hp-surface-raised);
  color: var(--hp-text);
}

.pitch-nav__link[aria-current="true"] {
  background: color-mix(in srgb, var(--hp-primary) 14%, transparent);
  color: var(--hp-text);
  font-weight: 700;
}

.pitch-context {
  max-width: var(--hp-max);
  margin: 0 auto;
  padding: 0 1rem 2rem;
}