/* Chromeless auth screens (login / register / restore / activation / 403).
   Builds on tokens.css + components.css. No inline styles. */

.auth-wrap {
  min-height: 100vh;
  display: grid; place-items: safe center;
  padding: var(--space-8);
  position: relative;
}
.auth-note { background: var(--info-bg); border-radius: var(--radius-md); padding: 12px 14px;
  font-size: var(--text-sm); color: var(--info-text); margin: var(--space-2) 0 var(--space-4); }
.auth-note ul { margin: 6px 0 0; padding-left: 18px; line-height: 1.6; }
.auth-note--root { background: var(--danger-bg); color: var(--danger); font-weight: var(--weight-bold); }
.lang-row { display: flex; gap: var(--space-4); }
.lang-row label { display: inline-flex; align-items: center; gap: 6px; font-size: var(--text-md); color: var(--ink); }
.flash-stack--floating { position: absolute; top: 0; left: 0; right: 0; }

/* split card: teal brand panel + form */
.auth-card {
  width: 100%; max-width: 880px;
  display: flex; background: var(--surface);
  border-radius: var(--radius-3xl); overflow: hidden;
  box-shadow: var(--shadow-modal);
}
.auth-brand {
  flex: 0 0 42%;
  background: linear-gradient(150deg, var(--teal-600), var(--teal-500));
  color: #fff; padding: var(--space-9);
  display: flex; flex-direction: column; justify-content: space-between; gap: var(--space-8);
}
.auth-brand__mark {
  width: 46px; height: 46px; border-radius: var(--radius-md);
  background: rgba(255,255,255,.18); display: grid; place-items: center;
}
.auth-brand__mark svg { width: 26px; height: 26px; color: #fff; }
.auth-brand__title { font-size: var(--text-4xl); font-weight: var(--weight-extrabold);
  letter-spacing: var(--tracking-tight); line-height: 1.15; }
.auth-brand__tag { font-size: var(--text-md); opacity: .9; margin-top: var(--space-3); line-height: 1.5; }

.auth-form {
  flex: 1; padding: var(--space-9);
  display: flex; flex-direction: column; gap: var(--space-4);
}
.auth-form__title { font-size: var(--text-3xl); font-weight: var(--weight-extrabold);
  color: var(--ink); margin-bottom: var(--space-2); }
.auth-field { display: flex; flex-direction: column; gap: 7px; }
.auth-row { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); }
.auth-link { color: var(--teal-600); font-weight: var(--weight-semibold); text-decoration: none; font-size: var(--text-md); }
.auth-link:hover { color: var(--teal-700); text-decoration: underline; }
.auth-foot { font-size: var(--text-md); color: var(--grey-600); margin-top: var(--space-2); }

/* a plain centered card for the taller forms (register / restore / activation) */
.auth-narrow { width: 100%; max-width: 560px; }
.auth-narrow .auth-card { display: block; }
.auth-narrow .auth-form { padding: var(--space-9); }

/* friendly empty/denied state (403) */
.state-center { text-align: center; max-width: 460px; }
.state-center__icon { width: 64px; height: 64px; border-radius: 20px; margin: 0 auto var(--space-5);
  background: var(--danger-bg); color: var(--danger); display: grid; place-items: center; }
.state-center__icon svg { width: 30px; height: 30px; }
.state-center__title { font-size: var(--text-3xl); font-weight: var(--weight-extrabold); color: var(--ink); }
.state-center__body { font-size: var(--text-md); color: var(--grey-600); margin: var(--space-3) 0 var(--space-6); }

@media (max-width: 680px) {
  .auth-card { flex-direction: column; }
  .auth-brand { flex-basis: auto; }
}