/* static/css/auth-forms.css */

/* =========================
   Auth Forms (stacked layout)
   Apply to forms you control: label on its own line, tight spacing.
   ========================= */

/*.auth-form {*/
/*  !* nothing global yet; this class scopes rules safely *!*/
/*}*/

/* Make text/email/password inputs a comfortable, consistent size */
.auth-form input[type="text"],
.auth-form input[type="email"],
.auth-form input[type="password"],
.auth-form input[type="search"] {
  height: 2.5rem;            /* consistent control height */
  line-height: 1.2;
  padding: 0.5rem 0.75rem;   /* readable padding */
  box-sizing: border-box;
  width: 100%;
  max-width: 400px;          /* tweak to taste */
}

/* Stacked field block:
   <div class="field"><label>…</label><input …><ul class="helptext">…</ul><ul class="errorlist">…</ul></div>
*/
.auth-form .field {
  display: flex;
  flex-direction: column;   /* label → input → help/errors */
  align-items: flex-start;
  gap: 6px;                 /* space between items inside the field */
  margin: 0 0 10px;         /* space between fields */
}

.auth-form .field > label {
  display: block;           /* force onto its own line */
  margin: 0;
  font-weight: 600;
}

/* Inputs sometimes inherit margins from resets */
.auth-form input,
.auth-form select,
.auth-form textarea {
  margin: 0;
}

/* Django help/errors are ULs — tame margins so they don't create big gaps */
.auth-form .helptext,
.auth-form ul.errorlist {
  margin: 0;                /* remove big default gaps */
  padding-left: 1.1rem;     /* keep bullets neatly indented */
}

.auth-form .helptext li,
.auth-form ul.errorlist li {
  margin: 0;
}

/* Optional: make password inputs a consistent height (plays nicely with your eye button include) */
.auth-form input[type="password"],
.auth-form input[type="text"].pw-plain {
  height: 2.5rem;
  line-height: 1.2;
  box-sizing: border-box;
}

/* =========================
   Table-based forms (e.g., existing login.html)
   Make labels sit above controls and tighten spacing
   ========================= */
.auth-form.auth-form--table table {
  border-collapse: collapse;
  width: auto; /* or 100% if you prefer */
}

/* Put the label on its own line inside the table cell */
.auth-form.auth-form--table td label {
  display: block;
  margin: 0 0 4px;
  font-weight: 600;
}

/* Tighten cell spacing (most gaps are from default td padding/margins + ULs) */
.auth-form.auth-form--table td {
  padding: 6px 0; /* vertical rhythm */
  vertical-align: top;
}

/* Tame ULs inside table cells too */
.auth-form.auth-form--table .helptext,
.auth-form.auth-form--table ul.errorlist {
  margin: 4px 0 0;
  padding-left: 1.1rem;
}

/* Keep your password UI add-on snug next to the input */
.auth-form .pw-field-wrap {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
}

/* If you use data-pw-eye="below" */
.auth-form .pw-field-wrap.pw-eye-below {
  flex-direction: column;
  align-items: flex-start;
}