/**
 * Stimmungsbarometer — Join, Stage und Ergebnislandschaft.
 */

.mood-meter-join {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  width: 100%;
  max-width: 42rem;
  margin-inline: auto;
}

.mood-meter-join__intro {
  text-align: center;
  font-weight: 600;
  margin: 0;
}

.mood-meter-join__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(4.5rem, 1fr));
  gap: 0.5rem;
  width: 100%;
}

.mood-meter-join__option {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.35rem;
  min-height: 5.5rem;
  padding: 0.5rem 0.25rem;
  border: 2px solid var(--line, #6b7280);
  border-radius: 0.75rem;
  background: var(--bg-elev, #fff);
  color: var(--ink, #1a1d23);
  cursor: pointer;
  transition: border-color 0.15s, box-shadow 0.15s, transform 0.15s;
}

.mood-meter-join__option:hover:not(:disabled) {
  border-color: var(--primary-color, #007cc1);
  box-shadow: 0 2px 8px rgb(0 0 0 / 8%);
}

.mood-meter-join__option.is-selected {
  border-color: var(--primary-color, #007cc1);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--primary-color, #007cc1) 25%, transparent);
}

.mood-meter-join__option:focus-visible {
  outline: 2px solid var(--focus, #0052cc);
  outline-offset: 2px;
}

.mood-meter-join__option:disabled {
  opacity: 0.55;
  cursor: not-allowed;
}

.mood-meter-join__label {
  font-size: 0.7rem;
  line-height: 1.2;
  text-align: center;
  max-width: 5.5rem;
}

.mood-meter-join__submit {
  align-self: center;
  min-width: 12rem;
}

/* Feldfehler Radiogroup — Danger-Token, analog Schätzfrage/Wortwolke */
.mood-meter-join__error.form-error {
  margin: 0;
  text-align: center;
  font-size: 0.85rem;
  color: var(--danger, #b91c1c);
}

.mood-meter-join__error.form-error:empty,
.mood-meter-join__error.form-error[hidden] {
  display: none;
}

.mood-meter-join__grid[aria-invalid="true"] {
  outline: 2px solid var(--danger, #b91c1c);
  outline-offset: 4px;
  border-radius: 0.5rem;
}

/* Icon-Töne */
.mood-icon--very-negative { color: #b4534a; }
.mood-icon--negative { color: #c2785c; }
.mood-icon--neutral { color: #64748b; }
.mood-icon--positive { color: #3d8b7a; }
.mood-icon--very-positive { color: #2a9d8f; }

/* Ergebnislandschaft (ohne redundanten Titel über den Smileys) */
.mood-meter-landscape {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(3.5rem, 1fr));
  gap: 0.35rem;
  align-items: end;
  min-height: 10rem;
  margin-bottom: 0.75rem;
}

.mood-meter-station {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.25rem;
  position: relative;
  min-height: 8rem;
}

.mood-meter-station__wave {
  position: absolute;
  bottom: 1.6rem;
  left: 8%;
  right: 8%;
  height: var(--mood-wave-height, 20%);
  max-height: 70%;
  border-radius: 0.5rem 0.5rem 0 0;
  background: color-mix(in srgb, currentColor 18%, transparent);
  z-index: 0;
  transition: height 0.45s ease;
}

.mood-meter-station[data-tone="very-negative"] { color: #b4534a; }
.mood-meter-station[data-tone="negative"] { color: #c2785c; }
.mood-meter-station[data-tone="neutral"] { color: #64748b; }
.mood-meter-station[data-tone="positive"] { color: #3d8b7a; }
.mood-meter-station[data-tone="very-positive"] { color: #2a9d8f; }

.mood-meter-station__icon,
.mood-meter-station__count,
.mood-meter-station__label {
  position: relative;
  z-index: 1;
}

.mood-meter-station__count {
  font-weight: 700;
  font-size: 1.1rem;
}

.mood-meter-station__label {
  font-size: 0.65rem;
  text-align: center;
  line-height: 1.15;
  max-width: 5rem;
}

.mood-meter-station--animate {
  animation: mood-station-in 0.45s ease both;
}

@keyframes mood-station-in {
  from { opacity: 0; transform: translateY(0.4rem); }
  to { opacity: 1; transform: translateY(0); }
}

@media (prefers-reduced-motion: reduce) {
  .mood-meter-station--animate {
    animation: none;
  }
  .mood-meter-station__wave {
    transition: none;
  }
}

.mood-meter-results__summary {
  text-align: center;
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}

.mood-meter-results__total,
.mood-meter-results__average,
.mood-meter-results__positive {
  margin: 0;
}

.mood-meter-results--compact .mood-meter-landscape {
  min-height: 7rem;
}

/* ==========================================================================
 * Bühne: Stimmungslandschaft füllt die verfügbare Fläche
 *
 * Gemessen bei 1920×1080 vor dem Fix: Die Landschaft war 220×262 px groß
 * (2,8 % der Bühne), die fünf Smileys brachen in 3 + 2 um, Beschriftungen
 * lagen bei 10 px. Drei Ursachen:
 *   1. renderMoodMeterResults überschrieb className und löschte damit die
 *      Bühnenklassen des Hosts (behoben in moodResults.js).
 *   2. `repeat(auto-fit, minmax(3.5rem, 1fr))` brach die Reihe um, sobald der
 *      Container schmal war — hier feste Spaltenzahl aus --mood-station-count.
 *   3. Smiley-, Zahlen- und Beschriftungsgröße waren fest in rem verdrahtet;
 *      sie kommen jetzt aus stageMoodLayoutMetrics.js.
 * ========================================================================== */

/*
 * Alle Regeln unten sind bewusst auf .stage-frame--mood-meter eingegrenzt, also
 * auf die echte Bühne. Nur dort läuft stageMoodLayoutMetrics.js und füllt die
 * --mood-*-Variablen. Die Editor-Vorschau nutzt weiterhin die kompakten
 * Standardgrößen und bleibt von dieser Änderung unberührt.
 */
.stage-frame--mood-meter .stage-results.stage-mood-meter-results {
  flex: 1 1 auto;
  min-height: 0;
  width: 100%;
  max-width: none;
  display: flex;
  flex-direction: column;
  gap: 0.5vh;
}

.stage-frame--mood-meter .mood-meter-landscape,
.stage-frame--mood-meter .mood-meter-preview__row {
  display: grid;
  /* Feste Spaltenzahl: Die 5er-Anordnung bleibt garantiert eine Reihe. */
  grid-template-columns: repeat(var(--mood-station-count, 5), minmax(0, 1fr));
  gap: var(--mood-station-gap, 0.75rem);
  align-items: stretch;
  flex: 1 1 auto;
  min-height: 0;
  margin: 0 0 0.3vh;
  overflow: hidden;
}

.stage-frame--mood-meter .mood-meter-station,
.stage-frame--mood-meter .mood-meter-preview__cell {
  min-height: 0;
  /* Smileys aller Stufen auf gleicher Höhe — nur die Säule dahinter zeigt die
     Verteilung. Das hält die 5er-Reihe auf einen Blick vergleichbar. */
  justify-content: center;
  gap: 0.5vh;
  max-width: 100%;
}

.stage-frame--mood-meter .mood-meter-station__icon,
.stage-frame--mood-meter .mood-meter-preview__cell > svg {
  width: var(--mood-icon-size, 96px);
  height: var(--mood-icon-size, 96px);
  flex: 0 0 auto;
}

.stage-frame--mood-meter .mood-meter-station__count {
  font-size: var(--mood-count-size, 34px);
  line-height: 1.05;
}

.stage-frame--mood-meter .mood-meter-station__label,
.stage-frame--mood-meter .mood-meter-preview__label {
  font-size: var(--mood-label-size, 20px);
  line-height: 1.15;
  max-width: 100%;
}

/*
 * Welle als Säule über die volle Stationshöhe. Bisher endete sie 1,6rem über
 * dem Stationsboden und war auf 70 % gedeckelt — bei 128 px hohen Stationen
 * blieb davon ein kaum sichtbarer Streifen.
 */
.stage-frame--mood-meter .mood-meter-station__wave {
  bottom: 0;
  left: 6%;
  right: 6%;
  max-height: 100%;
  border-radius: 0.75rem 0.75rem 0 0;
  background: color-mix(in srgb, currentColor 20%, transparent);
}

.stage-frame--mood-meter .mood-meter-results__summary {
  flex: 0 0 auto;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.2rem 2.5rem;
  font-size: clamp(16px, 1.6vw, 26px);
}

/* Stage-Fragevorschau */
.mood-meter-preview__row {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 1rem 1.25rem;
  margin-top: 1.5rem;
}

.mood-meter-preview__cell {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.35rem;
  opacity: 0.92;
}

.mood-meter-preview__label {
  font-size: 0.85rem;
  color: var(--muted, #3d4450);
  text-align: center;
  max-width: 6rem;
}

.stage-frame--mood-meter .stage-question {
  margin-bottom: 0.5rem;
  /* Kompakter als die Standardfrage (bis 96 px) — der Platz gehört den Smileys. */
  font-size: clamp(30px, 3.6vw, 54px);
  line-height: 1.08;
  max-width: 100%;
}

.stage-frame--mood-meter .stage-subtitle {
  text-align: center;
  color: var(--muted, #3d4450);
  margin-bottom: 0.25rem;
  font-size: clamp(18px, 1.9vw, 28px);
}

.mood-meter-preview--stage {
  margin-top: 1rem;
}

@media (max-width: 24rem) {
  .mood-meter-join__grid {
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 0.35rem;
  }
  .mood-meter-join__label {
    font-size: 0.62rem;
  }
}