/* ==========================================================================
   Reviorum — pages/login.css  (page-templates/login.php)
   Auth card inside the regular site layout: brand panel + forms.
   ========================================================================== */

.rv-auth-page { padding-block: var(--rv-s-6) var(--rv-s-section); }

.rv-auth {
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(0, 1fr);
  max-width: 1080px;
  margin: var(--rv-s-5) auto 0;
  overflow: hidden;
  border: 1px solid var(--rv-line);
  border-radius: var(--rv-r-xl);
  background: var(--rv-surface);
  box-shadow: var(--rv-shadow-card);
}

/* ---------- Brand panel ---------- */
.rv-auth__brand {
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  padding: var(--rv-s-10) var(--rv-s-10) var(--rv-s-8);
  background: var(--rv-night);
  color: #fff;
}
.rv-auth__art { position: absolute; right: -60px; bottom: -40px; width: 420px; height: 420px; pointer-events: none; }
.rv-auth__intro {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 22px;
  max-width: 420px;
  margin-block: auto;
  padding-bottom: var(--rv-s-8);
}
.rv-auth__title-main { font-size: clamp(1.75rem, 1.2rem + 1.4vw, 2.25rem); line-height: 1.08; font-weight: 800; letter-spacing: -0.03em; }
.rv-auth__lead { color: var(--rv-night-text); font-size: 1.0625rem; line-height: 1.55; }
.rv-auth__quote {
  display: flex;
  flex-direction: column;
  gap: 10px;
  max-width: 380px;
  margin: 0;
  padding: 18px;
  border-radius: 16px;
  background: var(--rv-surface);
  color: var(--rv-ink);
  box-shadow: 0 30px 60px -30px rgba(0, 0, 0, 0.6);
}
.rv-auth__quote-head { display: flex; align-items: center; gap: 10px; font-size: var(--rv-fs-md); font-weight: 600; }
.rv-auth__quote-head span:last-child { font-weight: 400; color: var(--rv-muted); }
.rv-auth__quote blockquote { margin: 0; color: var(--rv-ink-2); font-size: var(--rv-fs-md); line-height: 1.5; }
.rv-auth__foot { position: relative; color: #9ea2c9; font-size: var(--rv-fs-sm); }

/* ---------- Form side ---------- */
.rv-auth__main {
  display: flex;
  flex-direction: column;
  padding: var(--rv-s-8) var(--rv-s-10);
  background: var(--rv-surface);
}
.rv-auth__main:focus { outline: none; }
.rv-auth__switch { display: flex; justify-content: flex-end; gap: 6px; color: var(--rv-muted); font-size: var(--rv-fs-md); }
.rv-auth__switch a { font-weight: 600; }
.rv-auth__box {
  display: flex;
  flex-direction: column;
  gap: 22px;
  width: 100%;
  max-width: 420px;
  margin: auto;
  padding-block: var(--rv-s-6) 0;
}

/* Tabs: full-width segmented control (light variant of the design) */
.rv-auth__tabs { display: flex; flex-direction: column; gap: 22px; }
.rv-auth__tabs .rv-tabs__list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0;
  padding: 4px;
  border-radius: 12px;
  background: #f1f3f7;
}
.rv-auth__tabs .rv-tabs__tab {
  min-height: 40px;
  border: 0;
  border-radius: 9px;
  background: transparent;
  color: var(--rv-muted);
  font-weight: 600;
}
.rv-auth__tabs .rv-tabs__tab[aria-selected="true"] {
  background: var(--rv-surface);
  color: var(--rv-ink);
  box-shadow: 0 1px 3px rgba(14, 19, 32, 0.12);
}

.rv-auth__panel,
.rv-auth__reset { display: flex; flex-direction: column; gap: 22px; }
.rv-auth__panel:focus { outline: none; }
.rv-auth__panel[hidden] { display: none; }
.rv-no-js .rv-auth__panel[hidden] { display: flex; }
.rv-no-js .rv-auth__panel + .rv-auth__panel { padding-top: var(--rv-s-6); border-top: 1px solid var(--rv-line); }
.rv-auth__heading { font-size: clamp(1.5rem, 1.2rem + 1vw, 1.875rem); font-weight: 800; letter-spacing: -0.02em; }
.rv-auth__sub { margin-top: 6px; color: var(--rv-muted); font-size: 0.9375rem; }

.rv-auth__social { display: flex; flex-direction: column; gap: 10px; }
.rv-auth__social .rv-btn { min-height: 48px; gap: 10px; border-color: #d5d9e3; }

.rv-auth__or {
  display: flex;
  align-items: center;
  gap: var(--rv-s-3);
  color: var(--rv-muted);
  font-size: var(--rv-fs-xs);
  font-weight: 600;
  letter-spacing: 0.06em;
}
.rv-auth__or::before,
.rv-auth__or::after { content: ""; flex: 1; height: 1px; background: var(--rv-line); }

.rv-auth__form { display: flex; flex-direction: column; gap: 18px; }
.rv-auth__form .rv-input { min-height: 48px; }
.rv-auth__form .rv-btn--primary { min-height: 48px; }
.rv-auth__label-row { display: flex; justify-content: space-between; align-items: baseline; gap: var(--rv-s-3); }
.rv-auth__label-row a { font-size: var(--rv-fs-sm); font-weight: 600; }
.rv-auth__check { font-size: var(--rv-fs-sm); line-height: 1.5; }
.rv-auth__note { color: var(--rv-muted); font-size: var(--rv-fs-sm); text-align: center; }
.rv-auth__note a { font-weight: 600; }
.rv-auth__back { align-self: center; font-size: var(--rv-fs-md); font-weight: 600; }

.rv-auth__reset-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 52px;
  height: 52px;
  border-radius: 14px;
  background: var(--rv-accent-soft);
  color: var(--rv-accent);
}

/* Password field with show/hide */
.rv-auth-pw { position: relative; }
.rv-auth-pw .rv-input { padding-right: 52px; }
.rv-auth-pw__toggle {
  position: absolute;
  top: 2px;
  right: 2px;
  width: 44px;
  height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 0;
  border-radius: 10px;
  background: transparent;
  color: var(--rv-muted);
  cursor: pointer;
}
.rv-auth-pw__toggle:hover,
.rv-auth-pw__toggle[aria-pressed="true"] { color: var(--rv-accent); }
.rv-no-js .rv-auth-pw__toggle { display: none; }
.rv-no-js .rv-auth-pw .rv-input { padding-right: 14px; }

/* Password strength (filled by login.js; accent colour — green/orange/red are reserved for ratings) */
.rv-auth-strength { display: flex; gap: 4px; }
.rv-auth-strength span { flex: 1; height: 4px; border-radius: 9px; background: var(--rv-line); }
.rv-auth-strength[data-level="1"] span:nth-child(-n + 1),
.rv-auth-strength[data-level="2"] span:nth-child(-n + 2),
.rv-auth-strength[data-level="3"] span:nth-child(-n + 3),
.rv-auth-strength[data-level="4"] span:nth-child(-n + 4) { background: var(--rv-accent); }
.rv-no-js .rv-auth-strength { display: none; }

/* Reset view switching (login.js toggles .is-reset on the box) */
.rv-js .rv-auth__reset { display: none; }
.rv-js .rv-auth__box.is-reset .rv-auth__reset { display: flex; }
.rv-js .rv-auth__box.is-reset .rv-auth__tabs { display: none; }
.rv-no-js .rv-auth__reset { padding-top: var(--rv-s-6); border-top: 1px solid var(--rv-line); }
.rv-no-js .rv-auth__back { display: none; }

/* ---------- Responsive ---------- */
@media (max-width: 1100px) {
  .rv-auth__brand { padding: var(--rv-s-8); }
  .rv-auth__main { padding: var(--rv-s-8); }
}

@media (max-width: 900px) {
  .rv-auth { grid-template-columns: minmax(0, 1fr); max-width: 560px; }

  /* Brand panel becomes a short night band above the forms */
  .rv-auth__brand { padding: var(--rv-s-6) var(--rv-s-6) var(--rv-s-5); }
  .rv-auth__art { width: 220px; height: 220px; right: -70px; bottom: -90px; }
  .rv-auth__intro { margin: 0; padding: 0; gap: 6px; max-width: 340px; }
  .rv-auth__title-main { font-size: 1.5rem; }
  .rv-auth__lead { font-size: var(--rv-fs-md); }
  .rv-auth__quote,
  .rv-auth__foot { display: none; }

  .rv-auth__main { padding: var(--rv-s-6) var(--rv-s-6) var(--rv-s-8); }
  .rv-auth__switch { justify-content: center; order: 2; padding-top: var(--rv-s-6); }
  .rv-auth__box { margin: 0 auto; padding-block: 0; gap: var(--rv-s-4); }
  .rv-auth__tabs,
  .rv-auth__panel,
  .rv-auth__reset { gap: var(--rv-s-4); }
}

@media (max-width: 480px) {
  .rv-auth-page { padding-top: var(--rv-s-4); }
  .rv-auth { margin-inline: calc(var(--rv-gutter) * -1); border-inline: 0; border-radius: 0; box-shadow: none; }
  .rv-auth__brand,
  .rv-auth__main { padding-inline: var(--rv-gutter); }
}