/* ============================================================
   muveup Facelift: Auth und Registrierung
   login, forgot-password, reset-password, choose-role, verify,
   create-profile-artists / -organizers / -community-member, complete-profile-artists.
   Figma: orange Fläche, weiße Karte r 25, Stepper unter der Topbar, runder Weiter-Pfeil.
   Nur Tokens aus css/tokens.css.
   ============================================================ */

/* ================= Seite ================= */
body.mu-auth {
  background: var(--color-accent);
}

body.mu-auth .mu-page {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: var(--sp-4);
  padding-top: var(--sp-8);
  padding-bottom: var(--sp-8);
}

/* Niedrige Fenster (F24t Punkt 111): weniger Rand um die Karte, damit die Schritte der Registrierung ganz hineinpassen */
@media (min-width: 901px) and (max-height: 860px) {
  body.mu-auth .mu-page { padding-top: var(--sp-5); padding-bottom: var(--sp-5); }
}

.mu-auth-page--card { max-width: calc(440px + 2 * var(--page-gutter)); }
.mu-auth-page--wizard { max-width: calc(640px + 2 * var(--page-gutter)); }

/* Schritte ohne Fortschritt (Intro, Abschluss) und vor dem ersten Schritt: der Platz des Steppers bleibt, die Karte springt nicht */
body.mu-auth:has(> .mu-stepper[hidden]) > .mu-auth-page--wizard { margin-top: var(--stepper-h); }
.mu-auth-page--roles { max-width: calc(700px + 2 * var(--page-gutter)); }

/* ================= Karte ================= */
.mu-auth-card {
  display: flex;
  flex-direction: column;
  gap: var(--sp-5);
  min-height: var(--auth-card-h);
  padding: var(--sp-8) var(--sp-8) var(--sp-6);
  box-shadow: var(--sh-1);
}

/* Formular mit Meldung: die Karte hält den Platz der Meldung von Anfang an */
.mu-auth-card--hold {
  min-height: calc(var(--auth-card-h) + var(--wizard-error-h));
}

.mu-auth-card--center {
  align-items: center;
  text-align: center;
}

.mu-auth-title {
  font-size: var(--fs-h1);
  font-weight: var(--fw-medium);
  line-height: 1.3;
  color: var(--color-text);
}

.mu-auth-title em {
  color: var(--color-title-accent);
}

.mu-auth-card--center .mu-auth-title {
  text-align: center;
}

.mu-auth-lead {
  font-size: var(--fs-body-lg);
  color: var(--color-text-muted);
  line-height: var(--lh-base);
}

.mu-auth-form {
  display: flex;
  flex-direction: column;
  gap: var(--sp-4);
}

.mu-auth-form .mu-label {
  font-size: var(--fs-body-lg);
}

.mu-auth-actions {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--sp-3);
  margin-top: var(--sp-3);
}

.mu-auth-actions .mu-btn--lg {
  min-width: 180px;
}

.mu-auth-meta {
  font-size: var(--fs-small);
  color: var(--color-text-muted);
  text-align: center;
}

.mu-auth-meta a {
  color: var(--color-primary);
  text-decoration: none;
}

.mu-auth-meta a:hover {
  text-decoration: underline;
}

.mu-auth-meta--faint a {
  color: var(--color-text-subtle);
}

/* Zeile unter der Karte, auf Orange */
.mu-auth-help {
  font-size: var(--fs-small);
  color: var(--color-text-strong);
  text-align: center;
}

.mu-auth-help a,
.mu-auth-help button {
  color: var(--color-text-strong);
  font-weight: var(--fw-medium);
  text-decoration: underline;
  text-underline-offset: 2px;
}

.mu-auth-help a:hover,
.mu-auth-help button:hover {
  color: var(--color-text-on-brand);
}

/* Passwort mit Augen-Knopf */
.mu-password {
  position: relative;
}

.mu-password .mu-input {
  padding-right: calc(var(--sp-3) + 28px);
}

.mu-password__toggle {
  position: absolute;
  top: 50%;
  right: var(--sp-2);
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  border-radius: var(--r-round);
  color: var(--color-text-subtle);
  transform: translateY(-50%);
  transition: color var(--dur-fast) var(--ease-out), background-color var(--dur-fast) var(--ease-out);
}

.mu-password__toggle:hover {
  color: var(--color-primary);
  background: var(--color-surface-muted);
}

.mu-password__toggle svg {
  width: 18px;
  height: 18px;
}

.mu-password__toggle .is-off {
  display: none;
}

.mu-password__toggle[aria-pressed="true"] .is-on {
  display: none;
}

.mu-password__toggle[aria-pressed="true"] .is-off {
  display: block;
}

/* Login: Formular gedimmt, während die Sitzung geprüft wird */
.mu-auth-form.is-checking {
  opacity: 0.55;
  pointer-events: none;
}

/* ================= Status-Karte (verify, Profil erstellt) ================= */
.mu-auth-check {
  display: grid;
  place-items: center;
  width: 56px;
  height: 56px;
  border-radius: var(--r-round);
  background: var(--color-success-text);
  color: var(--color-text-on-brand);
}

.mu-auth-check svg {
  width: 30px;
  height: 30px;
}

.mu-auth-success {
  font-size: var(--fs-small);
  font-weight: var(--fw-medium);
  color: var(--color-success-text);
}

.mu-auth-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--sp-4);
  text-align: center;
}

.mu-auth-state p {
  max-width: 36ch;
  font-size: var(--fs-body);
  line-height: var(--lh-message);
  color: var(--color-text);
}

/* ================= Rollenwahl (Figma Registrierung Veranstaltende / Musikschaffende, REVIEW A3, A4) ================= */
.mu-roles__title,
.mu-roles__grid {
  width: 100%;
  max-width: 680px;
  margin-inline: auto;
}

.mu-roles__title {
  font-size: clamp(30px, 3.2vw, 44px);
  font-weight: var(--fw-medium);
  line-height: 1.15;
  color: var(--color-text-strong);
  text-align: left;
  min-height: 2.3em;
  display: flex;
  align-items: flex-end;
}

/* Veranstaltende: zweite Zeile kursiv wie im Figma */
.mu-roles__title [data-role-title="organizer"] em { display: block; }

.mu-roles__grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--sp-10);
}

.mu-roles__meta {
  font-size: var(--fs-small);
  color: var(--color-text-strong);
  text-align: center;
}

.mu-roles__meta a {
  color: var(--color-text-strong);
  font-weight: var(--fw-medium);
}

.mu-roles__meta a:hover {
  color: var(--color-text-on-brand);
}

/* Profilbild der Community-Registrierung */
.mu-photo {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--sp-3);
}

.mu-photo__preview {
  position: relative;
}

.mu-photo__preview .mu-avatar {
  --avatar-size: 112px;
  background: var(--color-surface-muted);
  color: var(--color-text-subtle);
}

.mu-photo__preview .mu-avatar svg {
  width: 44px;
  height: 44px;
}

.mu-photo__preview .mu-avatar:has(img:not([hidden])) svg {
  display: none;
}

.mu-photo__preview .mu-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.mu-photo__remove {
  position: absolute;
  top: 0;
  right: 0;
}

.mu-photo__input {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
}

/* Schalter-Zeilen (E-Mail-Benachrichtigungen) */
.mu-toggle-row {
  display: flex;
  align-items: flex-start;
  gap: var(--sp-3);
  padding: var(--sp-3) var(--sp-4);
  border-radius: var(--r-md);
  background: var(--color-surface-soft);
  cursor: pointer;
}

.mu-toggle-row .mu-switch {
  margin-top: 2px;
}

.mu-toggle-row__title {
  display: block;
  font-size: var(--fs-body-lg);
  color: var(--color-text);
}

.mu-toggle-row__text {
  display: block;
  font-size: var(--fs-small);
  color: var(--color-text-muted);
}

.mu-wizard .mu-check {
  line-height: var(--lh-base);
}

.mu-wizard .mu-check small {
  display: block;
  color: var(--color-text-subtle);
}

/* Hinweis-Symbol an Labels */
.mu-info {
  position: relative;
  display: inline-grid;
  place-items: center;
  width: 14px;
  height: 14px;
  color: var(--color-text-subtle);
  cursor: help;
}

.mu-info svg {
  width: 13px;
  height: 13px;
}

.mu-info__tip {
  position: absolute;
  left: 50%;
  bottom: calc(100% + 6px);
  z-index: var(--z-popover);
  width: max-content;
  max-width: 240px;
  padding: var(--sp-2) var(--sp-3);
  border-radius: var(--r-sm);
  background: var(--color-text);
  color: var(--color-text-on-brand);
  font-size: var(--fs-small);
  font-style: normal;
  line-height: var(--lh-base);
  white-space: normal;
  opacity: 0;
  pointer-events: none;
  transform: translate(-50%, 4px);
  transition: opacity var(--dur-fast) var(--ease-out), transform var(--dur-fast) var(--ease-out);
}

.mu-info:hover .mu-info__tip,
.mu-info:focus-visible .mu-info__tip,
.mu-info.is-open .mu-info__tip {
  opacity: 1;
  transform: translate(-50%, 0);
}

/* ================= Mobile ================= */
@media (max-width: 900px) {
  /* Mobil weiß wie die App-Seiten, die Karte ist die Seite (FLOWS Entscheidung 25) */
  body.mu-auth {
    background: var(--color-surface);
  }

  /* Karte und Assistent nutzen den ganzen Bildschirm, Footer und Support liegen darunter */
  body.mu-auth:has(> .mu-stepper[hidden]) > .mu-auth-page--wizard { margin-top: var(--stepper-h-mobile); }

  body.mu-auth .mu-page {
    justify-content: flex-start;
    min-height: calc(100dvh - var(--topbar-h-mobile) - var(--safe-top));
    padding-top: var(--sp-5);
    padding-bottom: var(--sp-4);
  }

  body.mu-auth:has(> .mu-stepper) .mu-page {
    min-height: calc(100dvh - var(--topbar-h-mobile) - var(--safe-top) - var(--stepper-h-mobile));
  }

  body.mu-auth .mu-page > .mu-card {
    flex: 1 0 auto;
    max-width: none;
    min-height: 0;
  }

  /* Assistent: die Karte ist in jedem Schritt mindestens so hoch wie der Bildschirm (F24i). Längere Schritte machen sie höher,
     die Seite scrollt. Eine Scrollfläche im Schritt wirkte auf dem iPhone wie abgeschnitten (F24t Punkt 183) */
  body.mu-auth .mu-page.mu-auth-page--wizard {
    height: auto;
    min-height: calc(100dvh - var(--topbar-h-mobile) - var(--safe-top) - var(--stepper-h-mobile));
  }

  body.mu-auth.has-mu-bottom-nav .mu-page.mu-auth-page--wizard {
    min-height: calc(100dvh - var(--topbar-h-mobile) - var(--safe-top) - var(--stepper-h-mobile) - var(--bottom-nav-h) - var(--safe-bottom));
  }

  body.mu-auth .mu-page > .mu-card.mu-wizard {
    flex: 1 0 auto;
    min-height: 0;
  }

  .mu-auth-help {
    color: var(--color-text-muted);
  }

  .mu-auth-help a,
  .mu-auth-help button,
  .mu-auth-help a:hover,
  .mu-auth-help button:hover {
    color: var(--color-primary);
  }

  .mu-auth-title {
    font-size: var(--fs-h2);
  }

  .mu-roles__grid {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--sp-4);
  }

  .mu-roles__title {
    min-height: 0;
  }

  /* Tippflächen mobil, Links und Augen-Knopf */
  .mu-password .mu-input {
    padding-right: calc(var(--sp-2) + var(--tap-min));
  }

  .mu-password__toggle {
    right: 0;
    width: var(--tap-min);
    height: var(--tap-min);
  }

  .mu-auth-meta a,
  .mu-roles__meta a,
  .mu-auth-help a,
  .mu-auth-help button {
    display: inline-flex;
    align-items: center;
    min-height: var(--tap-min);
  }
}

@media (prefers-reduced-motion: reduce) {
  .mu-wizard__done .mu-auth-check {
    animation: mu-fade-in var(--dur-base) linear both;
  }
}

/* Kontakt-Schritt: graue Kästchen, Links orange ohne Unterstrich (REVIEW A8) */
.mu-wizard .mu-check { align-items: flex-start; }
.mu-wizard .mu-check input {
  margin-top: 2px;
  border-color: var(--color-surface-muted);
  background: var(--color-surface-muted);
}
.mu-wizard .mu-check input:checked { border-color: var(--color-primary); background: var(--color-primary); }
.mu-wizard .mu-check a { color: var(--color-accent-text); text-decoration: none; }
.mu-wizard .mu-check a:hover { text-decoration: underline; }

/* Login-Karte wie Figma: etwas schmaler und höher, Titel größer (REVIEW A2) */
.mu-auth-page--card .mu-card { width: 100%; max-width: 422px; margin-inline: auto; padding-block: var(--sp-8); }
.mu-auth-page--card .mu-auth-title,
.mu-auth-page--card h1 { font-size: clamp(25px, 2.2vw, 30px); }


/* Eingebettet über dem Dashboard (F24t Punkt 200, js/onboard-embed.js): ohne eigene Kopfzeile, Navigation, Fuß und Hilfe,
   durchsichtig auf die verschwommene Seite dahinter. Der Fortschritt klebt ganz oben */
html.mu-embed,
html.mu-embed body,
html.mu-embed body.mu-auth,
html.mu-embed body.mu-auth .mu-page { background: transparent; }

html.mu-embed .mu-topbar,
html.mu-embed .mu-bottom-nav,
html.mu-embed .mu-footer,
html.mu-embed .mu-auth-help,
html.mu-embed .mu-skip,
html.mu-embed .mu-maint-bar,
html.mu-embed .mu-support-dock,
html.mu-embed .mu-support-fab { display: none !important; }

html.mu-embed .mu-stepper { top: 0; }
html.mu-embed body.has-mu-bottom-nav { --stage-nav: 0px; padding-bottom: 0; }
html.mu-embed body.has-mu-bottom-nav .mu-wizard__foot { bottom: 0; padding-bottom: calc(var(--sp-3) + var(--safe-bottom)); }