/* Auth welcome and login/register layout. Extracted from styles.fixed.css without behavior changes. */

/* ===== Start actions ===== */
.start-actions {
  max-width: 920px;
  margin: 0 auto 18px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(300px, 380px);
  gap: 12px 18px;
  align-items: end;
}

body.trainer-active .start-actions {
  display: none !important;
}

.guest-intro {
  margin: 2px 0 0;
  color: var(--muted);
  font-size: 0.95rem;
  line-height: 1.45;
}

.guest-start-controls {
  display: grid;
  gap: 6px;
  min-width: 0;
}

.guest-start-row {
  display: grid;
  grid-template-columns: 1fr;
  gap: 10px;
  align-items: stretch;
}

.guest-native-level-select {
  min-width: 0;
}

.guest-level-preview {
  width: 100%;
  min-height: 50px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 8px 14px;
  border: 1px solid rgba(116, 132, 178, 0.22);
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.96);
  color: #18233f;
  text-align: left;
  box-shadow: 0 10px 28px rgba(56, 70, 120, 0.08);
}

.guest-level-preview span,
.guest-level-preview strong,
.guest-level-preview small {
  display: block;
  min-width: 0;
}

.guest-level-preview strong {
  overflow: hidden;
  color: #18233f;
  font-size: 0.98rem;
  font-weight: 800;
  line-height: 1.15;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.guest-level-preview small {
  margin-top: 2px;
  color: #74809b;
  font-size: 0.74rem;
  font-weight: 700;
  line-height: 1.2;
}

.guest-level-preview b {
  color: #6675a3;
  font-size: 1rem;
  line-height: 1;
}

#startGuestBtn,
#startJourneyMapV2Btn {
  width: 100%;
  min-height: 46px;
  padding: 0 22px;
  white-space: nowrap;
}

#startGuestBtn span,
#startJourneyMapV2Btn span {
  opacity: 0.76;
  font-size: 0.86em;
  font-weight: 600;
}

#startJourneyMapV2Btn {
  border: 1px solid rgba(49, 80, 245, 0.24);
  background: linear-gradient(135deg, rgba(239, 246, 255, 0.96), rgba(238, 242, 255, 0.98));
  color: #1e3c72;
  box-shadow: 0 8px 16px rgba(49, 80, 245, 0.08);
}

#startJourneyMapV2Btn:hover {
  color: #1f36d5;
  transform: translateY(-1px);
}

/* ===== Login panel refinement ===== */

#loginPanel.auth-panel {
  max-width: 920px;
  margin: 0 auto 22px;
  padding: 18px 20px !important;
  gap: 14px;
}

.auth-tabs {
  width: 100%;
  justify-content: flex-start !important;
}

.auth-tab {
  min-width: 138px;
}

.auth-slide-form {
    max-height: 0;
    opacity: 0;
    overflow: hidden;
    transition: max-height 0.35s ease, opacity 0.25s ease;
}
.auth-slide-form.open {
    max-height: 260px;
    opacity: 1;
}

.auth-slide-form .auth-row {
  display: flex;
  gap: 10px;
  align-items: center;
  flex-wrap: nowrap;
}

.auth-slide-form input {
  flex: 1 1 220px;
  min-width: 0;
  height: 40px;
  border-radius: 18px !important;
  font-size: 1rem;
}

#loginBtn,
#registerBtn {
  height: 46px;
  padding: 0 20px !important;
  border-radius: 18px !important;
  white-space: nowrap;
}

#registerFormWrap:not(.open),
#loginFormWrap:not(.open) {
  display: none;
}

@media (max-width: 800px) {
  #loginPanel.auth-panel {
    max-width: 100%;
    padding: 14px 14px !important;
  }

  .auth-slide-form .auth-row {
    flex-direction: column;
    align-items: stretch;
  }

  #loginBtn,
  #registerBtn {
    width: 100%;
  }
}

/* ===== Legacy auth field sizing ===== */
/* Для десктопа и мобильных – единая высота 44px */
.auth-slide-form input,
#regLevel,
#loginBtn,
#registerBtn {
    height: 44px;
    box-sizing: border-box;
}

/* На мобильных – поля в столбец, отступы */
@media (max-width: 800px) {
    .auth-slide-form .auth-row {
        gap: 8px;
    }
    .auth-slide-form input,
    #regLevel,
    #loginBtn,
    #registerBtn {
        width: 100%;
    }
}
.auth-slide-form input,
#regLevel {
    padding: 12px 16px;
    height: auto;
    font-size: 1rem;
}
#regLevel {
    height: 44px;           /* или padding: 12px 16px */
    border-radius: 18px;
    background-color: var(--surface-3);
}
/* Мобильная форма регистрации — комфортная высота и вертикальное расположение */
@media (max-width: 800px) {
  .auth-row {
    flex-direction: column;
    gap: 12px;
  }

  .auth-slide-form input,
  #regLevel {
    width: 100%;
    box-sizing: border-box;
    height: 48px;            /* комфортно для нажатия пальцем */
    padding: 0 16px;
    font-size: 16px;         /*防止 масштабирования на iOS */
    border-radius: 24px !important;
  }

  #loginBtn,
  #registerBtn {
    width: 100%;
    height: 48px;
    font-size: 16px;
    margin-top: 4px;
  }

  /* Дополнительно — отступы и внешний вид */
  .auth-slide-form {
    margin-top: 8px;
  }
}
/* Вертикальная ориентация телефона (узкие экраны) – уменьшаем высоту полей */
@media (max-width: 600px) {
  .auth-slide-form input,
  #regLevel,
  #loginBtn,
  #registerBtn {
    height: 34px;           /* было 40px – станет аккуратнее */
    padding: 0 12px;
    font-size: 14px;
  }
  /* Если используете height: auto – просто уменьшите отступы */
  .auth-slide-form input {
    padding: 6px 12px;
    height: auto;
  }
  #loginBtn, #registerBtn {
    line-height: 1.2;
  }
}
/* Мобильные устройства – плоские поля без скруглений, компактная высота */
@media (max-width: 600px) {
  .auth-slide-form input,
  #regLevel,
  #loginBtn,
  #registerBtn {
    height: 32px;
    padding: 0 10px;
    font-size: 13px;
    border-radius: 6px !important;
  }
}

/* ===== Auth inactive mobile layout ===== */
body:not(.trainer-active) .mobile-split-handle {
  display: none !important;
}

body:not(.trainer-active) .leaderboard h4::after {
  content: "";
}

@media (max-width: 800px) {
  body:not(.trainer-active) .app-container {
    height: auto !important;
    min-height: 100svh !important;
    min-height: 100dvh !important;
    overflow-y: auto !important;
  }

  body:not(.trainer-active) .trainer-panel {
    flex: 1 0 auto !important;
    min-height: 100svh !important;
    min-height: 100dvh !important;
    height: auto !important;
    max-height: none !important;
  }

  body:not(.trainer-active) .text-panel {
    display: none !important;
  }

  .start-actions {
    align-items: stretch;
    grid-template-columns: 1fr;
    min-width: 0;
  }

  .guest-intro {
    font-size: 0.9rem;
  }

  #startGuestBtn,
  #startJourneyMapV2Btn {
    width: 100%;
    box-sizing: border-box;
    white-space: normal;
  }

}

/* ===== Auth form hard reset ===== */

.auth-welcome-hero {
  position: relative;
  width: min(920px, 100%);
  margin: 0 auto 16px !important;
  aspect-ratio: 16 / 7;
  max-height: 270px;
  overflow: hidden;
  border-radius: 30px;
  border: 1px solid rgba(155, 169, 210, 0.22);
  background: linear-gradient(135deg, rgba(255,255,255,0.92), rgba(238,242,255,0.86));
  box-shadow: 0 18px 44px rgba(35, 48, 96, 0.12);
}

.auth-welcome-hero::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    linear-gradient(90deg, rgba(255,255,255,0.02) 0%, rgba(255,255,255,0.0) 48%, rgba(255,255,255,0.28) 100%),
    linear-gradient(180deg, rgba(255,255,255,0.0) 68%, rgba(255,255,255,0.20) 100%);
}

.auth-welcome-hero img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  object-position: center;
}

body.trainer-active .auth-welcome-hero {
  display: none !important;
}

#loginPanel.auth-panel {
  max-width: 920px !important;
  margin: 0 auto 22px !important;
  padding: 18px 20px !important;
  flex: 0 0 auto !important;
  max-height: min(760px, calc(100vh - 28px)) !important;
  overflow-y: auto !important;
  overscroll-behavior: contain !important;
}

#loginPanel .auth-tabs {
  display: flex !important;
  gap: 10px !important;
  width: 100% !important;
  justify-content: flex-start !important;
  margin-bottom: 10px !important;
}

#loginPanel .auth-tab {
  min-width: 138px !important;
}

#loginPanel .auth-slide-form {
  display: none !important;
  opacity: 1 !important;
  max-height: none !important;
  overflow: visible !important;
  margin-top: 8px !important;
}

#loginPanel .auth-slide-form.open {
  display: block !important;
}

#loginPanel .auth-row {
  display: flex !important;
  gap: 10px !important;
  align-items: center !important;
  flex-wrap: nowrap !important;
}

#loginPanel input[type="text"],
#loginPanel input[type="password"],
#loginPanel select {
  flex: 1 1 220px !important;
  width: auto !important;
  min-width: 0 !important;
  height: 40px !important;
  max-height: 40px !important;
  padding: 0 14px !important;
  margin: 0 !important;
  display: block !important;
  border-radius: 18px !important;
  font-size: 1rem !important;
  line-height: 40px !important;
  background: rgba(255,255,255,0.96) !important;
  color: #18233f !important;
  border: 1px solid rgba(130,148,190,0.18) !important;
  box-shadow: none !important;
  appearance: none !important;
  -webkit-appearance: none !important;
}

#loginPanel select {
  line-height: normal !important;
}

#registerFormWrap .auth-row {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) !important;
  align-items: stretch !important;
}

#registerFormWrap input,
#registerFormWrap select,
#registerFormWrap .auth-level-preview,
#registerFormWrap #registerBtn {
  width: 100% !important;
  min-width: 0 !important;
}



#registerFormWrap #registerBtn {
  grid-column: 1 / -1 !important;
}

#loginPanel #loginBtn,
#loginPanel #registerBtn {
  width: auto !important;
  min-width: 180px !important;
  height: 46px !important;
  max-height: 46px !important;
  padding: 0 20px !important;
  margin: 0 !important;
  white-space: nowrap !important;
  align-self: center !important;
}

@media (max-width: 800px) {
  .auth-welcome-hero {
    margin-bottom: 12px !important;
    aspect-ratio: 16 / 9;
    max-height: 220px;
    border-radius: 24px;
  }

  .auth-welcome-hero img {
    object-position: 38% center;
  }

  #loginPanel.auth-panel {
    max-width: 100% !important;
    padding: 14px !important;
  }

  #loginPanel .auth-row {
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 10px !important;
  }

  #loginPanel input[type="text"],
  #loginPanel input[type="password"],
  #loginPanel select {
    width: 100% !important;
    height: 44px !important;
    max-height: 44px !important;
    line-height: 44px !important;
    padding: 0 14px !important;
    border-radius: 18px !important;
  }

  #registerFormWrap .auth-row {
    grid-template-columns: 1fr !important;
  }

  #loginPanel #loginBtn,
  #loginPanel #registerBtn {
    width: 100% !important;
    min-width: 0 !important;
    height: 44px !important;
    max-height: 44px !important;
  }
}

/* ===== Mobile auth width guard ===== */
@media (max-width: 800px) {
  body:not(.trainer-active),
  body:not(.trainer-active) .app-container,
  body:not(.trainer-active) .trainer-panel,
  body:not(.trainer-active) .start-actions,
  body:not(.trainer-active) #loginPanel.auth-panel {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
  }

  body:not(.trainer-active) .trainer-panel {
    padding-left: 18px !important;
    padding-right: 18px !important;
    overflow-x: hidden !important;
  }

  body:not(.trainer-active) .app-heading-row {
    display: flex !important;
    align-items: center !important;
    justify-content: flex-start !important;
    flex-wrap: wrap !important;
    gap: 8px !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
  }

  body:not(.trainer-active) .app-heading-row h1 {
    flex: 1 1 220px !important;
    min-width: 0 !important;
    max-width: 100% !important;
    overflow-wrap: anywhere !important;
  }

  body:not(.trainer-active) .app-help-link {
    flex: 0 0 auto !important;
    max-width: 100% !important;
  }

  body:not(.trainer-active) .auth-welcome-hero {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
  }

  body:not(.trainer-active) .start-actions select,
  body:not(.trainer-active) .start-actions button,
  body:not(.trainer-active) #loginPanel input,
  body:not(.trainer-active) #loginPanel select,
  body:not(.trainer-active) #loginPanel button {
    max-width: 100% !important;
    min-width: 0 !important;
  }
}

@media (max-width: 420px) {
  body:not(.trainer-active) .trainer-panel {
    padding-left: 16px !important;
    padding-right: 16px !important;
  }
}

/* ===== One-screen onboarding ===== */
body:not(.trainer-active) .app-heading-row .native-language-control {
  display: none !important;
}

body:not(.trainer-active) .text-panel {
  display: none !important;
}

.onboarding-setup.start-actions {
  width: min(920px, 100%);
  max-width: 920px;
  margin: 0 auto 10px;
  padding: 16px;
  display: block;
  border: 1px solid rgba(116, 132, 178, 0.18);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.72);
  box-shadow: 0 12px 32px rgba(35, 48, 96, 0.08);
}

.onboarding-setup.start-actions[hidden],
.auth-welcome-hero[hidden] {
  display: none !important;
}

.onboarding-heading {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 12px;
}

.onboarding-heading h2 {
  margin: 0;
  color: #18233f;
  font-size: 1.05rem;
  line-height: 1.2;
  letter-spacing: 0;
}

.onboarding-step-mark {
  flex: 0 0 auto;
  color: #3150f5;
  font-size: 0.78rem;
  font-weight: 900;
}

.onboarding-options {
  display: grid;
  grid-template-columns: minmax(220px, 0.95fr) minmax(300px, 1.2fr) minmax(160px, 0.75fr);
  gap: 12px;
  align-items: end;
}

.onboarding-field {
  min-width: 0;
  margin: 0;
  padding: 0;
  border: 0;
}

.onboarding-field[hidden] {
  display: none !important;
}

.onboarding-field-label {
  display: block;
  margin: 0 0 6px;
  color: #687590;
  font-size: 0.76rem;
  font-weight: 800;
  line-height: 1.2;
  letter-spacing: 0;
}

.onboarding-select-wrap,
.onboarding-segments,
.onboarding-level-field .guest-level-preview {
  min-height: 48px;
}

.onboarding-select-wrap {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 0 12px;
  border: 1px solid rgba(116, 132, 178, 0.22);
  border-radius: 8px;
  background: #fff;
}

.onboarding-select-wrap select {
  width: 100%;
  min-width: 0;
  height: 46px;
  padding: 0 30px 0 0;
  border: 0;
  outline: 0;
  background: transparent;
  color: #18233f;
  font: inherit;
  font-weight: 800;
}

.onboarding-segments {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 4px;
  padding: 4px;
  border: 1px solid rgba(116, 132, 178, 0.22);
  border-radius: 8px;
  background: #f4f6fb;
}

.onboarding-learning-field .onboarding-segments {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.onboarding-spanish-level-field .onboarding-segments {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.onboarding-spanish-level-field.single-option .onboarding-segments {
  grid-template-columns: 1fr;
}

.onboarding-learning-field.single-option .onboarding-segments {
  grid-template-columns: 1fr;
}

.onboarding-segments button[hidden] {
  display: none !important;
}

.onboarding-segments button {
  min-width: 0;
  min-height: 40px;
  padding: 0 10px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  border: 0;
  border-radius: 6px;
  background: transparent;
  color: #4f5b75;
  box-shadow: none;
  font-size: 0.9rem;
  font-weight: 800;
}

.onboarding-learning-field .onboarding-segments button {
  padding-inline: 6px;
  gap: 4px;
  font-size: 0.82rem;
  white-space: nowrap;
}

@media (max-width: 760px) {
  .onboarding-learning-field .onboarding-segments {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

.onboarding-segments button[aria-pressed="true"] {
  background: #fff;
  color: #1f36d5;
  box-shadow: 0 4px 12px rgba(49, 80, 245, 0.14);
}

.onboarding-level-field .guest-level-preview {
  border-radius: 8px;
  box-shadow: none;
}

.onboarding-summary {
  margin: 12px 0 8px;
  color: #66738d;
  font-size: 0.82rem;
  font-weight: 750;
  text-align: center;
}

.onboarding-setup #startGuestBtn {
  min-height: 52px;
  border-radius: 8px;
  font-size: 1rem;
}

#loginPanel.auth-panel.auth-panel-compact {
  width: min(920px, 100%) !important;
  margin: 0 auto 18px !important;
  padding: 4px 0 0 !important;
  display: block;
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  overflow: visible !important;
}

#loginPanel.auth-panel.auth-panel-compact .auth-tabs {
  justify-content: center !important;
  margin: 0 !important;
}

#loginPanel.auth-panel.auth-panel-compact .auth-tab {
  min-width: 0 !important;
  padding: 8px 12px !important;
  border-radius: 6px !important;
  background: transparent !important;
  color: #53617d !important;
  box-shadow: none !important;
}

#loginPanel.auth-panel.auth-panel-compact .auth-tab.active {
  background: rgba(255, 255, 255, 0.9) !important;
  color: #1f36d5 !important;
}

#loginPanel.auth-panel.auth-panel-compact .auth-slide-form.open {
  margin-top: 10px !important;
  padding: 12px;
  border: 1px solid rgba(116, 132, 178, 0.18);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.9);
  box-shadow: 0 10px 28px rgba(35, 48, 96, 0.07);
}

@media (max-width: 800px) {
  body:not(.trainer-active) .app-heading-row h1 {
    font-size: 1.05rem !important;
  }

  body:not(.trainer-active) .auth-welcome-hero {
    height: 164px;
    max-height: 164px;
    aspect-ratio: auto;
    margin-bottom: 10px !important;
    border-radius: 8px;
  }

  body:not(.trainer-active) .auth-welcome-hero img {
    object-position: 38% center;
  }

  body:not(.trainer-active) .auth-welcome-hero img[data-course="es"] {
    object-position: center;
  }

  .onboarding-setup.start-actions {
    padding: 14px;
    margin-bottom: 6px;
  }

  .onboarding-heading {
    margin-bottom: 10px;
  }

  .onboarding-options {
    grid-template-columns: 1fr;
    gap: 10px;
  }

  .onboarding-summary {
    margin-top: 10px;
  }

  #loginPanel.auth-panel.auth-panel-compact {
    padding: 2px 0 12px !important;
    margin-bottom: 4px !important;
  }

  #loginPanel.auth-panel.auth-panel-compact .auth-tabs {
    flex-direction: row !important;
    align-items: center !important;
  }
}

@media (max-width: 420px) {
  body:not(.trainer-active) .auth-welcome-hero {
    height: 148px;
    max-height: 148px;
  }

  .onboarding-heading h2 {
    font-size: 1rem;
  }
}

/* ===== Clear onboarding and separate auth step ===== */
.onboarding-setup #startGuestBtn {
  display: grid;
  place-items: center;
  gap: 1px;
  padding: 7px 22px;
  line-height: 1.15;
  white-space: normal;
}

.onboarding-setup #startGuestBtn .guest-start-main {
  opacity: 1;
  font-size: 1rem;
  font-weight: 850;
}

.onboarding-setup #startGuestBtn small {
  display: block;
  opacity: 0.78;
  color: inherit;
  font-size: 0.72rem;
  font-weight: 750;
}

#loginPanel .auth-form-close {
  width: 38px;
  height: 38px;
  flex: 0 0 38px;
  display: grid;
  place-items: center;
  margin-left: auto;
  padding: 0;
  border: 1px solid rgba(116, 132, 178, 0.22);
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.92);
  color: #64748b;
  box-shadow: 0 6px 18px rgba(35, 48, 96, 0.08);
  font-size: 1.35rem;
  line-height: 1;
}

#loginPanel .auth-form-close[hidden] {
  display: none !important;
}

#loginPanel .auth-course-summary {
  width: 100%;
  min-width: 0;
  min-height: 56px;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  padding: 8px 12px;
  border: 1px solid rgba(99, 91, 255, 0.22);
  border-radius: 8px;
  background: rgba(247, 249, 255, 0.96);
  color: #18233f;
  box-shadow: none;
  text-align: left;
}

.auth-course-summary-icon {
  font-size: 1.1rem;
}

.auth-course-summary-copy {
  min-width: 0;
  display: grid;
  gap: 2px;
}

.auth-course-summary-copy small,
.auth-course-summary-copy strong {
  display: block;
  min-width: 0;
}

.auth-course-summary-copy small {
  color: #69758e;
  font-size: 0.7rem;
  font-weight: 800;
}

.auth-course-summary-copy strong {
  overflow: hidden;
  color: #18233f;
  font-size: 0.9rem;
  font-weight: 850;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.auth-course-summary b {
  color: #4f46e5;
  font-size: 1rem;
}

#registerFormWrap .auth-register-fields {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px !important;
}

#registerFormWrap .auth-course-summary,
#registerFormWrap #registerBtn {
  grid-column: 1 / -1;
}

body.auth-form-active #loginPanel.auth-panel.auth-panel-compact {
  margin-top: 12px !important;
  padding: 16px !important;
  border: 1px solid rgba(116, 132, 178, 0.18) !important;
  border-radius: 8px !important;
  background: rgba(255, 255, 255, 0.92) !important;
  box-shadow: 0 14px 34px rgba(35, 48, 96, 0.09) !important;
}

body.auth-form-active #loginPanel.auth-panel.auth-panel-compact .auth-tabs {
  justify-content: flex-start !important;
}

body.auth-form-active #loginPanel.auth-panel.auth-panel-compact .auth-slide-form.open {
  margin-top: 12px !important;
  padding: 0;
  border: 0;
  background: transparent;
  box-shadow: none;
}

@media (max-width: 800px) {
  body.auth-form-active .trainer-panel {
    min-height: 100dvh !important;
  }

  body.auth-form-active #loginPanel.auth-panel.auth-panel-compact {
    margin-top: 6px !important;
    padding: 14px !important;
  }

  #registerFormWrap .auth-register-fields {
    grid-template-columns: minmax(0, 1fr);
  }

  #registerFormWrap .auth-course-summary,
  #registerFormWrap #registerBtn {
    grid-column: 1;
  }

  #loginPanel .auth-course-summary {
    min-height: 54px;
  }
}