/* =====================================================
   auth.css
   PURPOSE: Styles for the signup/login screens
   (js/screens/signup.js, js/screens/login.js). Both
   screens share the exact same layout, so one stylesheet
   covers them together (same convention as deck.css
   covering deck-view + its card thumbnails together).

   Form fields themselves reuse .modal__input /
   .modal__input--error / .modal__label from modal.css —
   those aren't actually modal-scoped, so there's no need
   to redefine input styling here, only layout around it.
   ===================================================== */

/* Same "this screen has its own header, hide the app-wide
   one" pattern card-editor.css/study.css already use. */
#app-header:has(~ #screen-container #signup-screen),
#app-header:has(~ #screen-container #login-screen) {
  display: none;
}

#screen-container:has(#signup-screen),
#screen-container:has(#login-screen) {
  padding-top: calc(16px + var(--safe-area-top));
}

.auth-header {
  display:         flex;
  align-items:     center;
  justify-content: space-between;
  padding-bottom:  10px;
  margin-bottom:   20px;
  border-bottom:   var(--border-width) solid var(--color-border);
}

.auth-header__title {
  font-size:   var(--font-size-headline);
  font-weight: 600;
}

/* Balances the Back button's width so the title stays
   visually centered — same trick deck-view/editor headers
   use when there's a control on only one side. */
.auth-header__spacer {
  width: 60px;
}

.auth-form {
  display:        flex;
  flex-direction: column;
  gap:            6px;
  padding:        0 4px;
}

.auth-form .modal__label {
  margin-top: 10px;
}

.auth-intro {
  font-size:     var(--font-size-footnote);
  color:         var(--color-text-secondary);
  margin-bottom: 12px;
  line-height:   1.4;
}

.auth-checkbox-row {
  display:     flex;
  align-items: center;
  gap:         8px;
  margin:      14px 0 4px;
  font-size:   var(--font-size-footnote);
  color:       var(--color-text-primary);
  cursor:      pointer;
}

.auth-checkbox-row input[type="checkbox"] {
  width:        18px;
  height:       18px;
  accent-color: var(--color-accent-amber);
  flex-shrink:  0;
}

.auth-error {
  color:      var(--ios-systemRed);
  font-size:  var(--font-size-footnote);
  margin:     4px 0 0;
}

.auth-submit {
  margin-top: 16px;
  width:      100%;
}

.auth-switch {
  text-align: center;
  margin-top: 18px;
  font-size:  var(--font-size-footnote);
  color:      var(--color-text-secondary);
}

.auth-switch a {
  color:           var(--color-accent-amber);
  text-decoration: none;
  font-weight:     600;
}

.auth-confirm-message {
  display:        flex;
  flex-direction: column;
  align-items:    center;
  text-align:     center;
  gap:            10px;
  padding:        40px 12px;
  color:          var(--color-text-secondary);
}

.auth-confirm-message h3 {
  color:     var(--color-text-primary);
  font-size: var(--font-size-headline);
  margin:    0;
}

.auth-confirm-message strong {
  color: var(--color-text-primary);
}