/* ============================================================
   StudySnap — Auth (v2 luxury theme)
   ============================================================ */

.auth { min-height: 100vh; display: grid; grid-template-columns: 1fr 1fr; }

/* ---- Brand panel ---- */
.auth__aside {
  background: var(--forest);
  color: var(--on-forest);
  padding: clamp(2.5rem, 5vw, 4.5rem);
  display: flex; flex-direction: column; justify-content: space-between;
  position: relative; overflow: hidden;
}
.auth__aside::after {
  content: ""; position: absolute; right: -160px; bottom: -160px;
  width: 420px; height: 420px; border-radius: 50%;
  background: radial-gradient(circle, rgba(199,168,119,0.20), transparent 65%);
  pointer-events: none;
}
.auth__brand { display: inline-flex; align-items: center; gap: var(--s-3); font-family: var(--font-display); font-size: 1.35rem; font-weight: 600; }
.auth__brand .brand__mark { background: rgba(244,241,232,0.14); color: var(--on-forest); }
.auth__pitch { position: relative; z-index: 1; max-width: 30ch; }
.auth__pitch h2 { color: var(--on-forest); font-size: clamp(1.8rem, 3vw, 2.6rem); line-height: 1.12; }
.auth__pitch p { color: rgba(244,241,232,0.78); margin-top: var(--s-4); font-size: var(--fs-lead); }
.auth__quote { position: relative; z-index: 1; border-top: 1px solid rgba(244,241,232,0.18); padding-top: var(--s-5); }
.auth__quote p { font-family: var(--font-display); font-style: italic; font-size: 1.15rem; color: var(--on-forest); }
.auth__quote span { display: block; margin-top: var(--s-3); font-size: var(--fs-sm); color: rgba(244,241,232,0.7); }

/* ---- Form panel ---- */
.auth__main { display: flex; align-items: center; justify-content: center; padding: clamp(1.5rem, 5vw, 4rem); }
.auth__card { width: 100%; max-width: 420px; }
.auth__back { display: inline-flex; align-items: center; gap: var(--s-2); font-size: var(--fs-sm); color: var(--muted); margin-bottom: var(--s-6); transition: color var(--t) var(--ease); }
.auth__back:hover { color: var(--forest); }
.auth__back svg { width: 16px; height: 16px; }

.auth__title { font-size: var(--fs-h2); }
.auth__sub { color: var(--muted); margin-top: var(--s-2); margin-bottom: var(--s-6); font-size: var(--fs-sm); }

/* Tabs */
.auth__tabs { display: grid; grid-template-columns: 1fr 1fr; gap: 4px; padding: 4px; background: var(--cream-2); border-radius: var(--r-pill); margin-bottom: var(--s-6); }
.auth__tab { padding: 0.6rem; border-radius: var(--r-pill); font-size: var(--fs-sm); font-weight: 600; color: var(--muted); transition: color var(--t) var(--ease); }
.auth__tab.is-active { background: var(--surface); color: var(--forest); box-shadow: var(--shadow-sm); }

.auth__form { display: none; }
.auth__form.is-active { display: block; }
.auth__form .field + .field { margin-top: var(--s-4); }

.input-wrap { position: relative; display: flex; align-items: center; }
.input-wrap .input { padding-right: 2.75rem; }
.input-toggle { position: absolute; right: 0.5rem; padding: var(--s-2); color: var(--muted); border-radius: 8px; }
.input-toggle:hover { color: var(--forest); }
.input-toggle svg { width: 18px; height: 18px; }

.auth__row { display: flex; align-items: center; justify-content: space-between; margin: var(--s-4) 0 var(--s-5); }
.auth__check { display: flex; align-items: center; gap: var(--s-2); font-size: var(--fs-xs); color: var(--muted); cursor: pointer; }
.auth__check input { width: 16px; height: 16px; accent-color: var(--forest); }
.auth__link { font-size: var(--fs-xs); font-weight: 600; color: var(--forest); }
.auth__link:hover { color: var(--forest-700); }

.field-msg { font-size: var(--fs-xs); min-height: 1em; margin-top: var(--s-2); }
.field-msg.error { color: #a23b3b; }
.field-msg.ok { color: var(--forest); }

.auth__divider { display: flex; align-items: center; gap: var(--s-4); margin: var(--s-6) 0; color: var(--muted); font-size: var(--fs-xs); }
.auth__divider::before, .auth__divider::after { content: ""; flex: 1; height: 1px; background: var(--line-soft); }

.btn-google { display: flex; align-items: center; justify-content: center; gap: var(--s-3); width: 100%; padding: 0.85rem; border-radius: var(--r-pill); background: var(--surface); border: 1.5px solid var(--line); font-weight: 600; font-size: var(--fs-sm); transition: border-color var(--t) var(--ease), transform var(--t-fast) var(--ease); }
.btn-google:hover { border-color: var(--forest); transform: translateY(-1px); }
.btn-google svg { width: 18px; height: 18px; }

.auth__foot { margin-top: var(--s-6); font-size: var(--fs-xs); color: var(--muted); text-align: center; }

/* Password strength meter */
.strength { display: grid; grid-template-columns: repeat(4, 1fr); gap: 5px; margin-top: var(--s-2); }
.strength span { height: 4px; border-radius: var(--r-pill); background: var(--line); transition: background var(--t) var(--ease); }
.strength[data-level="1"] span:nth-child(-n+1) { background: #a23b3b; }
.strength[data-level="2"] span:nth-child(-n+2) { background: var(--gold); }
.strength[data-level="3"] span:nth-child(-n+3) { background: var(--sage); }
.strength[data-level="4"] span:nth-child(-n+4) { background: var(--forest); }
.strength-label { font-size: var(--fs-xs); color: var(--muted); margin-top: var(--s-2); min-height: 1em; }

/* Guest button */
.btn-guest { display: flex; align-items: center; justify-content: center; gap: var(--s-2); width: 100%; padding: 0.8rem; margin-top: var(--s-3); border-radius: var(--r-pill); background: transparent; border: 1.5px dashed var(--line); color: var(--muted); font-weight: 600; font-size: var(--fs-sm); transition: border-color var(--t) var(--ease), color var(--t) var(--ease); }
.btn-guest:hover { border-color: var(--forest); color: var(--forest); }
.btn-guest svg { width: 18px; height: 18px; }

/* loading state on buttons */
.btn.is-loading { color: transparent !important; position: relative; pointer-events: none; }
.btn.is-loading::after { content: ""; position: absolute; width: 18px; height: 18px; border-radius: 50%; border: 2px solid rgba(244,241,232,0.4); border-top-color: var(--on-forest); animation: spin .7s linear infinite; }
.btn-google.is-loading::after { border-color: rgba(35,79,53,0.25); border-top-color: var(--forest); }
@keyframes spin { to { transform: rotate(360deg); } }

@media (max-width: 880px) {
  .auth { grid-template-columns: 1fr; }
  .auth__aside { display: none; }
}