/**
 * Teilnehmerseite auf dem Handy: Anleitung, fester Sende-Bereich, Bestätigung mit eigener Antwort und die Eingaben je Folientyp
 * (UX-Prüfung Join mobil, 13.10.2026). Lädt nach join-slides.css und mood-meter.css, vor join-desktop.css.
 */

/* Anleitung unter der Frage: ein Satz, ruhig, immer an derselben Stelle. */
.view-join .join-instruction {
  margin: 4px 0 0;
  text-align: center;
  font-size: 1rem;
  line-height: 1.4;
  color: var(--muted, #4b5563);
}
.view-join .join-instruction[hidden] {
  display: none;
}

/* Fester Bereich unten: Zustandszeile und Sende-Knopf bleiben beim Scrollen langer Listen im Blick. */
.view-join .join-actionbar {
  position: sticky;
  bottom: 0;
  z-index: 5;
  display: grid;
  gap: 6px;
  margin: 4px -12px 0;
  padding: 10px 12px max(10px, env(safe-area-inset-bottom, 0px));
  background: linear-gradient(to top, var(--bg-elev, #fff) 78%, color-mix(in srgb, var(--bg-elev, #fff) 0%, transparent));
}
.view-join .join-actionbar .btn {
  width: 100%;
  min-height: 52px;
  font-size: 1.05rem;
}
.view-join .join-actionbar .points-sum {
  margin: 0;
  text-align: center;
  font-weight: 650;
}
.view-join .points-sum.is-over {
  color: var(--danger, #b91c1c);
}

/* Bestätigung: grünes Häkchen, darunter die eigene Antwort und wo die Ergebnisse erscheinen. */
.view-join .pulse-join-feedback:not(:empty):not([data-state]) {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  background: var(--status-ok-bg, #dcfce7);
  color: var(--status-ok, #166534);
  font-weight: 700;
}
.view-join .pulse-join-feedback:not(:empty):not([data-state])::before {
  content: "✓";
  display: inline-grid;
  place-items: center;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: var(--status-ok, #15803d);
  color: #fff;
  font-size: 0.85rem;
  flex: none;
}
.view-join .join-own-answer {
  display: grid;
  gap: 2px;
  margin: 0;
  text-align: center;
  font-size: 0.95rem;
  line-height: 1.4;
}
.view-join .join-own-answer[hidden] {
  display: none;
}
.view-join .join-own-answer__label {
  color: var(--muted, #4b5563);
  font-size: 0.85rem;
}
.view-join .join-own-answer__value {
  overflow-wrap: anywhere;
}
.view-join .join-own-answer__next {
  margin-top: 6px;
  color: var(--muted, #4b5563);
}

/* Rangfolge: ↑/↓ je Zeile (Umsortieren ohne Ziehen), Ziehen nur am Griff. */
.view-join .rank-item {
  gap: 8px;
  padding: 6px 6px 6px 4px;
}
.view-join .rank-item .rank-label {
  flex: 1;
  min-width: 0;
  overflow-wrap: anywhere;
}
.view-join .rank-handle {
  min-width: 36px;
  min-height: 44px;
  display: inline-grid;
  place-items: center;
  touch-action: none;
  cursor: grab;
}
.view-join .rank-moves {
  display: inline-flex;
  gap: 4px;
  flex: none;
}
.view-join .rank-move {
  width: 44px;
  height: 44px;
  border-radius: 10px;
  border: 1px solid var(--line);
  background: var(--bg, #f8fafc);
  color: var(--ink);
  font-size: 1.15rem;
  font-weight: 700;
  cursor: pointer;
}
.view-join .rank-move:disabled {
  opacity: 0.3;
  cursor: default;
}

/* 100 Punkte: Name mit Anteilsbalken, darunter − Wert +. */
.view-join .points-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-areas: "label ctl" "bar bar";
  gap: 6px 10px;
  align-items: center;
}
.view-join .points-row__label {
  grid-area: label;
  font-weight: 600;
  overflow-wrap: anywhere;
}
.view-join .points-row__ctl {
  grid-area: ctl;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.view-join .points-row__ctl input {
  width: 4rem;
  min-height: 44px;
  text-align: center;
  font-size: 1.05rem;
}
.view-join .points-step {
  width: 44px;
  height: 44px;
  border-radius: 10px;
  border: 1px solid var(--line);
  background: var(--bg, #f8fafc);
  color: var(--ink);
  font-size: 1.3rem;
  font-weight: 700;
  cursor: pointer;
}
.view-join .points-step:disabled {
  opacity: 0.35;
  cursor: default;
}
.view-join .points-row__bar {
  grid-area: bar;
  height: 6px;
  border-radius: 3px;
  background: linear-gradient(90deg, var(--primary-color, #007cc1) calc(var(--share, 0) * 100%), color-mix(in srgb, var(--line, #9ca3af) 30%, transparent) 0);
}

/* Termine: größerer Haken, gewählte Zeile hervorgehoben (auch nach dem Senden). */
.view-join .datetime-slot input[type="checkbox"] {
  width: 24px;
  height: 24px;
}

/* Stimmungsbarometer: fünf Gesichter in einer Reihe, lesbare Beschriftung. */
.view-join .mood-meter-join__grid {
  grid-template-columns: repeat(var(--mood-cols, 5), minmax(0, 1fr));
  gap: 6px;
}
.view-join .mood-meter-join__option {
  min-height: 0;
  padding: 8px 2px;
}
.view-join .mood-meter-join__label {
  font-size: 0.8rem;
  max-width: none;
}

/* Skala mit Zahlen: Raster mit bis zu fünf je Reihe (1–10 in zwei Reihen), Enden beschriftet. */
.view-join .rating-scale.rating-scale--numbers {
  display: grid;
  grid-template-columns: repeat(var(--rating-cols, 5), minmax(0, 1fr));
  gap: 8px;
}
.view-join .rating-scale--numbers .rating-btn {
  min-width: 0;
  min-height: 56px;
  font-size: 1.3rem;
  font-weight: 700;
}
.view-join .rating-ends {
  grid-column: 1 / -1;
  display: flex;
  justify-content: space-between;
  gap: 12px;
  margin: 0;
  font-size: 0.85rem;
  color: var(--muted, #4b5563);
}

/* Sterne: größer und mit Abstand (vorher 49 × 52 px). */
.view-join .rating-scale.rating-scale--stars {
  gap: 8px;
}
.view-join .rating-scale.rating-scale--stars .rating-btn.rating-btn--star {
  min-width: 56px;
  min-height: 56px;
  font-size: 2.9rem;
}

/* Bildauswahl: zwei Spalten, quadratische Bilder — vier Entwürfe passen ohne langes Scrollen. */
.view-join .image-choice-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}
.view-join .image-choice-btn img {
  aspect-ratio: 1 / 1;
}
.view-join .image-choice-btn span {
  padding: 8px 10px;
  font-size: 0.95rem;
}

/* Auf dem Handy scrollt die Seite (body), nicht #join-main: Ein Bereich mit overflow: auto ohne eigene Höhe würde den festen
   Sende-Bereich (position: sticky) an sich binden, und er bliebe nie unten stehen. clip schneidet waagrecht ab, ohne einen
   Scroll-Bereich zu erzeugen. */
@media (max-width: 767px) {
  .view-join.pulse-join-shell {
    overflow-x: clip;
    overflow-y: visible;
  }
  .view-join .pulse-join-main {
    overflow: visible;
  }
}

/* Bestätigung: Schrift in der Farbe des Häkchens. pulse.css (Tailwind-Komponente) setzt die Farbe mit !important auf Blau —
   nur so lässt sie sich hier überschreiben. */
.view-join #join-feedback.pulse-join-feedback:not(:empty):not([data-state]) {
  color: var(--status-ok, #166534) !important;
  background: color-mix(in srgb, var(--status-ok, #15803d) 12%, var(--bg-elev, #fff));
}

/* Q&A auf der Teilnehmerseite: Eingabe oben, Filter als ein Umschalter, kein „Kein Zeitlimit aktiv“. */
.view-join .qa-timer-join[data-status="idle"] {
  display: none;
}
.view-join .qa-filters--segmented {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0;
  padding: 3px;
  border-radius: 12px;
  background: color-mix(in srgb, var(--line, #9ca3af) 22%, transparent);
}
.view-join .qa-filters--segmented .btn {
  min-height: 44px;
  border: 0;
  border-radius: 9px;
  background: transparent;
}
.view-join .qa-filters--segmented .btn.is-on {
  background: var(--bg-elev, #fff);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12);
  font-weight: 700;
}
.view-join .qa-composer button[type="submit"] {
  min-height: 52px;
}

/* Quiz auf dem Handy: ein schmaler Zeitbalken mit Sekunden statt Ring und Balken, Antworten als 2×2-Raster mit Form und Farbe
   (● ▲ ■ ◆ wie auf der Leinwand) — alle vier ohne Scrollen sichtbar. Nach der Runde tritt der Zeitbalken zurück. */
.view-join .quiz-head {
  display: grid;
  gap: 8px;
}
.view-join .quiz-timer {
  display: flex;
  align-items: center;
  gap: 10px;
}
.view-join .quiz-timer .quiz-ring {
  display: none;
}
.view-join .quiz-timer .quiz-timer-wrap {
  width: auto;
  height: auto;
  flex: none;
}
.view-join .quiz-timer .quiz-seconds {
  position: static;
  min-width: 2ch;
  font-size: 1.5rem;
  font-variant-numeric: tabular-nums;
}
.view-join .quiz-timer .quiz-timer-bar {
  flex: 1;
  height: 10px;
  margin: 0;
}
.view-join .quiz-timer[data-state="ended"] {
  display: none;
}
.view-join .quiz-cards {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}
.view-join .quiz-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  min-height: 88px;
  padding: 10px 8px;
  border-left-width: 1px;
  text-align: center;
  overflow-wrap: anywhere;
}
.view-join .quiz-card[data-index]::before {
  font-size: 1.5rem;
  line-height: 1;
}
.view-join .quiz-card[data-index="0"]::before { content: "●"; color: var(--c1); }
.view-join .quiz-card[data-index="1"]::before { content: "▲"; color: var(--c2); }
.view-join .quiz-card[data-index="2"]::before { content: "■"; color: var(--c3); }
.view-join .quiz-card[data-index="3"]::before { content: "◆"; color: var(--c4); }
.view-join .quiz-card[data-index="4"]::before { content: "★"; color: var(--c5); }
.view-join .quiz-card[data-index="5"]::before { content: "✚"; color: var(--c6); }

/* Ergebnisse auf dem Handy: kompakte Zeilen — Antwort und Prozent in einer Zeile, darunter ein schmaler Balken (vorher etwa 140 px
   je Antwort). Die eigene Antwort trägt weiter das ✓. */
.view-join .poll:not(.poll--stage) {
  gap: 12px;
  padding: 4px 0;
}
.view-join .poll:not(.poll--stage) .poll-row {
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-areas: "label pct" "track track";
  gap: 4px 12px;
}
.view-join .poll:not(.poll--stage) .poll-label {
  grid-area: label;
  white-space: normal;
  overflow-wrap: anywhere;
}
.view-join .poll:not(.poll--stage) .poll-pct {
  grid-area: pct;
  min-width: 0;
}
.view-join .poll:not(.poll--stage) .poll-track {
  grid-area: track;
  height: 12px;
  border-radius: 6px;
  border: 0;
}
.view-join .poll:not(.poll--stage) .poll-count {
  display: none;
}

/* Neue Frage: sanftes Einblenden (nicht bei reduzierter Bewegung). */
@media (prefers-reduced-motion: no-preference) {
  .view-join .join-question-card.is-new-slide {
    animation: join-new-slide 0.35s ease-out;
  }
}
@keyframes join-new-slide {
  from {
    opacity: 0.4;
    transform: translateY(8px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}