/* ─────────────────────────────────────────────────────────────────────────────
   auth.css — split-screen login / register / password reset.

   Added to $extraCss by views/auth/_split.php, so it is only downloaded on
   those four pages. Uses the tokens in style.css: the panel is the existing
   light-blue --color-accent-wash, the form side is --color-surface white.

   ≤ 900px the brand panel is dropped entirely and the form column shows its
   own small logo. On a phone the panel would push the form below the fold
   for someone who came here to type two fields.
   ──────────────────────────────────────────────────────────────────────── */

.auth-split {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  min-height: 100vh;
  min-height: 100dvh;
}

/* ─── Brand panel (left) ─────────────────────────────────────────────────── */

.auth-panel {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 2rem;
  padding: 2.5rem clamp(6rem, 8vw, 8.5rem);
  background-color: var(--color-accent-wash);
  /* Dot grid drawn in CSS: no image request, and img-src stays untouched. */
  background-image: radial-gradient(rgb(36 70 102 / .10) 1px, transparent 1px);
  background-size: 22px 22px;
  border-right: 1px solid var(--color-border);
  overflow: hidden;
}

.auth-panel__brand { display: inline-block; align-self: flex-start; }
.auth-panel__brand img { display: block; height: 38px; width: auto; }

.auth-panel__body {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  max-width: 30rem;
}

.auth-panel__title {
  font-size: clamp(1.75rem, 2.6vw, 2.25rem);
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: -.03em;
  color: var(--color-accent);
  margin-bottom: .875rem;
}

.auth-panel__sub {
  font-size: 1rem;
  color: var(--color-text-muted);
  margin-bottom: 1.75rem;
}

.auth-panel__points { list-style: none; margin: 0 0 2.25rem; padding: 0; }
.auth-panel__points li {
  display: flex;
  align-items: flex-start;
  gap: .625rem;
  font-size: .9375rem;
  color: var(--color-text);
  margin-bottom: .625rem;
}
.auth-panel__tick {
  flex-shrink: 0;
  width: 20px;
  height: 20px;
  padding: 3px;
  margin-top: .1rem;
  border-radius: 999px;
  background: var(--color-accent);
  color: #fff;
  stroke-width: 3;
}

.auth-panel__foot {
  font-size: .8125rem;
  color: var(--color-text-muted);
}

/* ─── Illustration: three mini result rows ───────────────────────────────── */

.auth-preview {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  box-shadow: 0 12px 32px -12px rgb(36 70 102 / .25), var(--shadow-card);
  padding: .375rem;
  max-width: 26rem;
}

.auth-preview__row {
  display: grid;
  grid-template-columns: 1fr auto auto;
  align-items: center;
  gap: 1rem;
  padding: .7rem .875rem;
  font-size: .8125rem;
  border-radius: var(--radius-md);
}
.auth-preview__row + .auth-preview__row { border-top: 1px solid var(--color-border); }
.auth-preview__row:first-child { background: var(--color-primary-light); }

.auth-preview__name { font-weight: 600; color: var(--color-text); }

.auth-preview__meta,
.auth-preview__rate {
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  color: var(--color-text-muted);
  white-space: nowrap;
}
.auth-preview__meta .ui-icon,
.auth-preview__rate .ui-icon { width: 14px; height: 14px; }
.auth-preview__rate .ui-icon { color: #d97706; fill: currentColor; }

/* ─── Form column (right) ────────────────────────────────────────────────── */

.auth-main {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2rem;
  padding: 3rem 1.5rem 2rem;
  background: var(--color-surface);
}

.auth-form { width: 100%; max-width: 400px; }

.auth-form__brand { display: none; }
.auth-form__brand img { display: block; height: 34px; width: auto; }

.auth-form__title {
  font-size: 1.625rem;
  font-weight: 700;
  letter-spacing: -.02em;
  color: var(--color-text);
  margin-bottom: .375rem;
}

.auth-form__lead {
  font-size: .9375rem;
  color: var(--color-text-muted);
  margin-bottom: 1.75rem;
}
.auth-form__title + .alert,
.auth-form__title + form { margin-top: 1.5rem; }

/* Taller inputs than the in-app forms: these are the only fields on the page
   and they are what a first-time visitor judges the product by. */
.auth-form .form-input { padding: .6875rem .875rem; font-size: .9375rem; }
.auth-form .form-input--with-icon { padding-right: 2.5rem; }

.auth-submit { margin-top: 1.5rem; }
.auth-submit .btn--primary { padding: .8125rem 1.25rem; border-radius: var(--radius-md); }

/* Replaces style="margin-bottom:0" on the login password label. */
.form-label--flush { margin-bottom: 0; }

.auth-form .auth-card__footer {
  margin-top: 1.5rem;
  padding-top: 1.25rem;
  border-top: 1px solid var(--color-border);
}

.auth-form .auth-card__footer a{
  font-weight: 700;
}

.auth-legal {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: .25rem 1.25rem;
  font-size: .8125rem;
}
.auth-legal a { color: var(--color-text-muted); }
.auth-legal a:hover { color: var(--color-text); }

/* ─── Small screens ──────────────────────────────────────────────────────── */

@media (max-width: 1100px) {
  .auth-preview { display: none; }
}

@media (max-width: 900px) {
  .auth-split { grid-template-columns: 1fr; }
  .auth-panel { display: none; }
  .auth-main { justify-content: flex-start; padding-top: 2rem; }
  .auth-form__brand { display: inline-block; margin-bottom: 2rem; }
}