/**
 * Join — Desktop-/Laptop-Layout (ab 48rem / 768px).
 * Nutzt verfügbare Höhe in Firefox/Safari/Chromium, ohne Mobile-Daumenzone zu brechen.
 * Shell-Klassen ergänzen pulse-join-* — keine Ersetzung der mobilen Basis in join-mobile.css.
 */

/* --- Page Shell (Basis auch unter 768px für Tests/DOM-Kontrakt) --- */
.join-page {
  box-sizing: border-box;
  width: 100%;
  min-width: 0;
  /* Fallback + moderne Viewport-Einheit — innerhalb .app füllt 100% den sichtbaren Bereich oberhalb des Footers. */
  min-height: 100vh;
  min-height: 100dvh;
  min-height: 100%;
  display: flex;
  flex-direction: column;
}

.join-page__header,
.join-page__secondary,
.join-page__footer {
  flex: 0 0 auto;
}

.join-page__main {
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
  gap: clamp(0.5rem, 1.5vh, 1rem);
}

.join-page__content {
  width: min(100%, 62rem);
  margin-inline: auto;
}

.join-page__secondary {
  flex: 0 0 auto;
  width: min(100%, 62rem);
  margin-inline: auto;
  padding: 0 clamp(1rem, 4vw, 3rem) clamp(0.5rem, 1.5vh, 1rem);
}

/* --- Desktop: vertikale Höhe sinnvoll nutzen --- */
@media (min-width: 48rem) {
  .view-join.join-page.pulse-join-shell {
    /* Flex statt Grid — gleiche Zeilenverantwortlichkeit wie pulse-join-shell */
    display: flex;
    flex-direction: column;
    gap: clamp(0.5rem, 1.5vh, 1rem);
    padding: max(0.75rem, var(--spacing-safe-t, env(safe-area-inset-top)))
      max(1rem, env(safe-area-inset-right))
      max(0.5rem, var(--spacing-safe-b, env(safe-area-inset-bottom)))
      max(1rem, env(safe-area-inset-left));
    overflow-x: hidden;
    min-height: 100%;
  }

  body.route-join .view-join.join-page {
    /* App-Zelle füllen — Footer bleibt außerhalb in body-Grid erreichbar */
    min-height: 100%;
  }

  .join-page__header {
    flex-shrink: 0;
  }

  .join-page__main {
    flex: 1 1 auto;
    min-height: 0;
    display: flex;
    flex-direction: column;
    padding: clamp(1rem, 3vh, 2.5rem) clamp(1rem, 4vw, 3rem);
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
  }

  .join-page__main > .offline-banner,
  .join-page__main > .rehearsal-banner,
  .join-page__main > .pulse-offline-banner,
  .join-page__main > .pulse-rehearsal-banner {
    flex: 0 0 auto;
  }

  /* Fragekarte füllt verfügbare Höhe und zentriert Inhalt vertikal */
  .join-page__main > .join-page__content,
  .join-page__main > .join-question-card {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    justify-content: center;
    min-height: min-content;
    margin-block: auto;
  }

  .join-page__content {
    width: min(100%, 62rem);
    margin-inline: auto;
  }

  .join-page__content.join-interaction-card {
    width: min(100%, 56rem);
    max-height: 100%;
    padding: clamp(1.25rem, 3vh, 2.75rem) clamp(1rem, 3vw, 2.5rem);
    margin-inline: auto;
    align-self: center;
  }

  .join-interaction-card .pulse-join-question,
  .join-interaction-card .slide-question {
    margin-bottom: clamp(0.5rem, 1.5vh, 1rem);
  }

  .join-interaction-card .join-slide-hint {
    margin-bottom: clamp(1rem, 2.5vh, 2rem);
  }

  /* Daumenzone: auf Desktop kein künstliches Nach-unten-Schieben */
  .view-join .pulse-join-thumb {
    margin-top: 0;
    min-height: 0;
    justify-content: flex-start;
    padding-bottom: 0;
  }

  .view-join .pulse-join-main {
    overflow-y: visible;
  }

  .view-join.view-join--estimation-open .pulse-join-main,
  .view-join.view-join--estimation-open .join-page__main {
    overflow-y: auto;
  }

  /* Reaktionen: kompakte Reihe unterhalb der Karte, nicht über der Frage */
  .join-page__secondary {
    flex: 0 0 auto;
    width: 100%;
    max-width: none;
    padding: 0 clamp(1rem, 4vw, 3rem) clamp(0.5rem, 1.5vh, 1rem);
    margin-inline: 0;
  }

  .join-page__secondary .pulse-join-reactions {
    margin-top: 0;
    padding-top: 0;
    padding-bottom: max(4px, env(safe-area-inset-bottom, 0px));
  }

  /* Kompakter Footer auf Join-Route (globaler #app-footer) */
  body.route-join .app-footer {
    padding: clamp(0.75rem, 1.5vh, 1.25rem) clamp(1rem, 4vw, 3rem);
  }

  body.route-join .footer-links a {
    min-height: 36px;
    font-size: 0.85rem;
  }
}

/* --- Zustand: Wartestatus vertikal zentrieren --- */
@media (min-width: 48rem) {
  .join-page[data-join-state="waiting"] .join-page__main > .join-question-card {
    justify-content: center;
  }

  .join-page[data-join-state="waiting"] .join-waiting-hint {
    width: min(100%, 48rem);
    padding: clamp(1.5rem, 4vh, 3rem);
  }
}

/* --- Zustand: offene Interaktion — mittig vs. scroll bei wenig Höhe --- */
@media (min-width: 48rem) and (min-height: 720px) {
  .join-page[data-join-state="interactive-open"] .join-page__main {
    overflow-y: visible;
  }

  .join-page[data-join-state="interactive-open"] .join-page__main > .join-question-card {
    justify-content: center;
  }
}

@media (min-width: 48rem) and (max-height: 719px) {
  .join-page[data-join-state="interactive-open"] .join-page__main {
    overflow-y: auto;
  }

  .join-page[data-join-state="interactive-open"] .join-page__main > .join-question-card {
    justify-content: flex-start;
    margin-block: 0;
  }
}

/* --- Zustand: Ergebnisansicht — Diagramm darf wachsen --- */
@media (min-width: 48rem) {
  .join-page[data-join-state="results"] .join-page__main > .join-question-card {
    justify-content: center;
    flex: 1 1 auto;
  }

  .join-page[data-join-state="results"] .join-interaction-card {
    width: min(100%, 68rem);
  }

  .join-page[data-join-state="results"] .join-results-card,
  .join-page[data-join-state="results"] .join-extra-host.join-results-card {
    width: min(100%, 68rem);
    min-height: min(38rem, 100%);
    display: flex;
    flex-direction: column;
    max-height: none;
  }

  .join-page[data-join-state="results"] .join-results-card__chart,
  .join-page[data-join-state="results"] .estimation-column-chart-wrap.join-results-card__chart {
    flex: 1 1 auto;
    min-height: clamp(14rem, 34vh, 28rem);
    display: flex;
    flex-direction: column;
  }

  .join-page[data-join-state="results"] .estimation-column-chart {
    flex: 1 1 auto;
    min-height: clamp(14rem, 30vh, 26rem);
  }

  .join-page[data-join-state="results"] .estimation-column-plot {
    min-height: clamp(12rem, 28vh, 24rem);
    flex: 1 1 auto;
  }

  .join-page[data-join-state="results"] .estimation-results--compact .estimation-column-chart {
    min-height: clamp(14rem, 34vh, 28rem);
  }
}

/* --- Schätzfrage: Eingabe auf Desktop begrenzte Breite --- */
@media (min-width: 48rem) {
  .view-join .join-estimation-form,
  .view-join .estimation-form.join-estimation-form {
    width: min(100%, 34rem);
    margin-inline: auto;
  }

  .view-join .join-wordcloud-live {
    margin-top: 1.1rem;
  }

  .view-join .wordcloud-paper[data-wordcloud-mode="join"] {
    height: clamp(18rem, 44vh, 32rem);
  }
}

/* --- Mobile: Secondary bleibt im normalen Fluss, Daumenzone unverändert --- */
@media (max-width: 47.99rem) {
  .join-page__secondary {
    padding: 0 0 clamp(0.25rem, 1vh, 0.5rem);
    width: 100%;
  }

  .join-page__main {
    overflow-y: auto;
  }
}