/* Accounts / auth screens. Split-screen: form left, a calm monochrome panel
   right. Inherits the appwiz tokens (the body carries class="appwiz"); everything
   here is greyscale, matching the rest of AUTOPLAN. */

.auth {
  min-height: 100vh;
  display: grid;
  grid-template-columns: 1fr 1fr;
}
@media (max-width: 860px) {
  .auth { grid-template-columns: 1fr; }
  .auth-aside { display: none; }
}

.auth-main {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  padding: 2.5rem 2rem 4rem;
  background: var(--card);
}
.auth-card { width: 100%; max-width: 25rem; }

.auth-logo { display: inline-block; text-decoration: none; color: var(--ink);
  font-size: 1.05rem; letter-spacing: -.01em; margin-bottom: 1.6rem; }

/* Segmented progress fill for the signup steps. */
.auth-progress { height: 4px; border-radius: 999px; background: var(--line);
  overflow: hidden; margin-bottom: 1.8rem; }
.auth-progress span { display: block; height: 100%; background: var(--ink);
  border-radius: 999px; transition: width .2s ease; }

.auth-card h1 { font-size: 1.85rem; line-height: 1.15; letter-spacing: -.02em;
  margin: 0 0 .4rem; font-weight: 600; }
.auth-lead { margin: 0 0 1.5rem; color: var(--ink-3); font-size: .95rem; line-height: 1.5; }

/* Form controls (self-contained: covers password, which applications.css omits). */
.auth input[type=text], .auth input[type=email], .auth input[type=password],
.auth input[type=tel], .auth input[type=number], .auth select {
  width: 100%; box-sizing: border-box; padding: .6rem .7rem; font: inherit;
  color: var(--ink); background: var(--card); border: 1px solid var(--line-2);
  border-radius: var(--r-sm); }
.auth input::placeholder { color: var(--ink-4); }
.auth input:focus, .auth select:focus { outline: none; border-color: var(--focus);
  box-shadow: 0 0 0 3px rgba(23,24,26,.10); }
.auth .field { margin-bottom: 1rem; max-width: none; }

.auth-check { display: flex; align-items: flex-start; gap: .6rem; cursor: pointer;
  color: var(--ink-2); font-size: .9rem; line-height: 1.45; margin: .2rem 0 1rem; }
.auth-check input { margin-top: .15rem; flex: none; }

.auth-submit { width: 100%; justify-content: center; margin-top: .4rem; }
.auth-actions { display: flex; gap: .7rem; margin-top: .4rem; }
.auth-actions .btn { flex: 1; justify-content: center; }

.auth-alt { margin: 1.3rem 0 0; font-size: .9rem; color: var(--ink-3); text-align: center; }
.auth-alt a { color: var(--ink); font-weight: 550; }
.auth-resend { margin: 0; }

.auth-row-end { display: flex; justify-content: flex-end; margin: -.4rem 0 .8rem; }
.auth-mini { font-size: .84rem; color: var(--ink-2); }

.linkbtn { all: unset; cursor: pointer; color: var(--ink); font-weight: 550;
  text-decoration: underline; text-underline-offset: 2px; }

/* Messages are the one place these screens use hue: whether something failed or
   succeeded has to read at a glance, which a monochrome stripe cannot carry. A
   restrained pair, reusing the danger red the app already spends on destructive
   actions (.btn-danger) and the green the outcome map uses for an approval. */
.auth { --err: #c0392b; --err-fill: #fcecea; --ok: #2e7d32; --ok-fill: #edf4ed; }

/* Errors: weight, a marker, and a red left accent. Field errors carry the bar
   too - no signup form raises a non-field error (they all attach to a field, see
   accounts/forms.py), so this is the only error surface the signup flow shows. */
.field-err { display: block; margin-top: .3rem; padding: .05rem 0 .05rem .5rem;
  border-left: 3px solid var(--err); font-size: .82rem; color: var(--err);
  font-weight: 550; }
.field-err::before { content: "! "; }
.auth-alert { padding: .7rem .8rem; margin-bottom: 1.1rem; border-radius: var(--r-sm);
  background: var(--err-fill); border: 1px solid var(--line-2); border-left: 3px solid var(--err);
  color: var(--ink); font-size: .88rem; font-weight: 500; }
/* Confirmations (e.g. "your password has been reset") - the same shape, resolved. */
.auth-note { padding: .7rem .8rem; margin-bottom: 1.1rem; border-radius: var(--r-sm);
  background: var(--ok-fill); border: 1px solid var(--line); border-left: 3px solid var(--ok);
  color: var(--ink-2); font-size: .88rem; }

.auth-foot { position: absolute; bottom: 1.3rem; left: 0; right: 0;
  display: flex; justify-content: center; gap: 1.5rem; color: var(--ink-4); font-size: .78rem; }
.auth-foot a { color: var(--ink-3); text-decoration: none; }

.auth-aside { background: var(--fill-2); display: flex; align-items: center;
  padding: 3rem 3.5rem; }
.auth-aside-copy { margin: 0; max-width: 24rem; color: var(--ink); font-weight: 500;
  font-size: 1.7rem; line-height: 1.3; letter-spacing: -.015em; }