/* Cosa Cena v2 — sign-in UI styles
 * Covers: bottom sheet (Screen 1), full screen (Screen 2),
 *         account created (Screen 3), header sign-in link,
 *         shared sign-in buttons, legal footer.
 * Design tokens match the handoff README exactly.
 */

/* ── Keyframes ─────────────────────────────────────────────────────────────── */

@keyframes fadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}

@keyframes spin {
  to { transform: rotate(360deg); }
}

/* ── Scrim ─────────────────────────────────────────────────────────────────── */

.signin-scrim {
  position: fixed;
  top: 0;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 100%;
  max-width: 430px;
  background: rgba(46, 31, 18, 0.45);
  z-index: 400;
  animation: fadeIn 0.2s ease;
}

.signin-scrim.is-hiding {
  animation: fadeOut 0.32s ease forwards;
}

@keyframes fadeOut {
  to { opacity: 0; }
}

/* ── Bottom sheet (Screen 1) ───────────────────────────────────────────────── */

.signin-sheet {
  position: fixed;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%) translateY(105%);
  width: 100%;
  max-width: 430px;
  background: #FFFDF8;
  border-radius: 20px 20px 0 0;
  padding: 12px 20px 40px;
  z-index: 401;
  transition: transform 0.32s cubic-bezier(0.32, 0.72, 0, 1);
}

.signin-sheet.is-open {
  transform: translateX(-50%) translateY(0);
}

.signin-handle {
  width: 36px;
  height: 4px;
  background: #D9CEC0;
  border-radius: 100px;
  margin: 0 auto 20px;
}

.signin-close {
  position: absolute;
  top: 14px;
  right: 18px;
  width: 32px;
  height: 32px;
  background: transparent;
  border: none;
  cursor: pointer;
  color: #9A8575;
  display: flex;
  align-items: center;
  justify-content: center;
  -webkit-tap-highlight-color: transparent;
}

.signin-sheet-heading {
  font-family: 'Lora', serif;
  font-size: 20px;
  font-weight: 600;
  color: #2E1F12;
  margin: 0 0 10px;
  line-height: 1.25;
}

.signin-sheet-body {
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: 13px;
  color: #9A8575;
  line-height: 1.55;
  margin: 0 0 20px;
}

/* ── Google button ─────────────────────────────────────────────────────────── */

.signin-btn-google {
  width: 100%;
  min-height: 52px;
  background: #FFFDF8;
  border: 1.5px solid #D9CEC0;
  border-radius: 12px;
  cursor: pointer;
  margin-bottom: 16px;
  -webkit-tap-highlight-color: transparent;
  transition: background 0.12s ease;
}

.signin-btn-google:active {
  background: #F6F1E8;
}

.signin-btn-google:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

.signin-btn-inner {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
}

.signin-btn-label {
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: 15px;
  font-weight: 600;
  color: #2E1F12;
}

/* Loading spinner inside Google button */
.signin-spinner {
  display: inline-block;
  width: 18px;
  height: 18px;
  border: 2px solid #D9CEC0;
  border-top-color: #9A8575;
  border-radius: 50%;
  animation: spin 0.7s linear infinite;
  flex-shrink: 0;
}

/* ── Legal footer ──────────────────────────────────────────────────────────── */

.signin-legal {
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: 11px;
  color: #9A8575;
  text-align: center;
  line-height: 1.6;
  margin: 0 0 12px;
}

.signin-legal-link {
  color: #B64D32;
  text-decoration: none;
}

.signin-legal-link:hover {
  text-decoration: underline;
}

/* ── Not now link ──────────────────────────────────────────────────────────── */

.signin-notnow {
  display: block;
  width: 100%;
  min-height: 44px;
  background: transparent;
  border: none;
  cursor: pointer;
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: 14px;
  font-weight: 500;
  color: #9A8575;
  text-decoration: underline;
  text-align: center;
  -webkit-tap-highlight-color: transparent;
}

/* ── Auth error message ────────────────────────────────────────────────────── */

.signin-auth-error {
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: 13px;
  color: #8A2020;
  text-align: center;
  margin: -8px 0 12px;
  line-height: 1.5;
}

/* ── Full screen sign-in (Screen 2) ───────────────────────────────────────── */

.signin-fullscreen {
  position: fixed;
  top: 0;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%) translateY(100%);
  width: 100%;
  max-width: 430px;
  background: #F6F1E8;
  z-index: 500;
  padding: 24px 28px 40px;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  transition: transform 0.3s cubic-bezier(0.32, 0.72, 0, 1);
}

.signin-fullscreen.is-open {
  transform: translateX(-50%) translateY(0);
}

.signin-back {
  display: flex;
  align-items: center;
  gap: 6px;
  background: transparent;
  border: none;
  cursor: pointer;
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: 15px;
  font-weight: 600;
  color: #B64D32;
  min-height: 44px;
  margin-bottom: 28px;
  padding: 0;
  -webkit-tap-highlight-color: transparent;
}

.signin-full-logo-block {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 4px;
  margin-bottom: 16px;
}

.signin-full-logo {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  object-fit: cover;
  margin-bottom: 8px;
}

.signin-full-wordmark {
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: 11px;
  color: #9A8575;
}

.signin-full-heading {
  font-family: 'Lora', serif;
  font-size: 26px;
  font-weight: 600;
  color: #2E1F12;
  line-height: 1.15;
  margin: 0;
}

.signin-full-body {
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: 14px;
  color: #9A8575;
  line-height: 1.55;
  margin: 0 0 32px;
}

.signin-legal-full-wrap .signin-legal {
  font-size: 12px;
}

.signin-legal-full-wrap .signin-legal-link {
  text-decoration: underline;
}

/* ── Account created screen (Screen 3) ────────────────────────────────────── */

.signin-created {
  position: fixed;
  top: 0;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 100%;
  max-width: 430px;
  background: #F6F1E8;
  z-index: 500;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 48px 36px;
  text-align: center;
  opacity: 0;
  transition: opacity 0.3s ease;
}

.signin-created.is-open {
  opacity: 1;
}

.signin-created-icon {
  width: 72px;
  height: 72px;
  background: var(--teal-pale);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 28px;
}

.signin-created-heading {
  font-family: 'Lora', serif;
  font-size: 28px;
  font-weight: 600;
  color: #2E1F12;
  margin: 0 0 14px;
  line-height: 1.2;
}

.signin-created-body {
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: 15px;
  color: #9A8575;
  line-height: 1.65;
  margin: 0 0 48px;
}

.signin-created-cta {
  width: 100%;
  min-height: 52px;
  background: #B64D32;
  color: #FFFDF8;
  border: none;
  border-radius: 12px;
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: 16px;
  font-weight: 600;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

/* ── Shared CTA button (sign-in from settings, deleted screen) ─────────────── */

.signin-cta-btn {
  width: 100%;
  min-height: 52px;
  background: #B64D32;
  color: #FFFDF8;
  border: none;
  border-radius: 12px;
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: 16px;
  font-weight: 600;
  cursor: pointer;
  margin-top: 4px;
  -webkit-tap-highlight-color: transparent;
  transition: opacity 0.12s ease;
}

.signin-cta-btn:active {
  opacity: 0.85;
}

/* ── Header auth slot (avatar or sign-in link) — all screens ──────────────── */

.header-auth-slot {
  margin-left: auto;
  flex-shrink: 0;
  display: flex;
  align-items: center;
}

/* Avatar: 32px filled terracotta circle — shown when signed in */
.header-avatar {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: #B64D32;
  color: #FFFDF8;
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: 14px;
  font-weight: 600;
  border: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  -webkit-tap-highlight-color: transparent;
  transition: opacity 0.12s ease;
  flex-shrink: 0;
}

.header-avatar:active {
  opacity: 0.8;
}

/* Sign in link: shown when signed out */
.header-signin-link {
  background: transparent;
  border: none;
  cursor: pointer;
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: 13px;
  font-weight: 600;
  color: #B64D32;
  padding: 0;
  line-height: 1;
  -webkit-tap-highlight-color: transparent;
  white-space: nowrap;
}