/* ============================================================
   Northgate — auth screens only.

   Lives with the auth module rather than in styles.css: nothing
   else in the app uses these, and deleting the folder should take
   its styling with it.

   The one genuinely global fix — input[type="email"] missing from
   the shared input rule — went into styles.css instead, because
   that gap would have bitten any future email field too.
   ============================================================ */

/* Narrower than a normal screen. A sign-in form that spans a desktop
   monitor reads as a page; at this width it reads as a door. */
.auth-screen {
  max-width: 400px;
  margin: 0 auto;
  padding: var(--s10) var(--s4) 120px;
}

.auth-screen h1 {
  text-align: center;
  margin-bottom: var(--s2);
}

.auth-screen .sub {
  text-align: center;
  margin-bottom: var(--s5);
}

.auth-card .card-body {
  padding: var(--s5);
}

/* The gap between the last field and the button. Without it the button
   crowds the password box and the eye reads them as one control. */
.auth-card .field:last-of-type {
  margin-bottom: var(--s5);
}

/* Hint under a field — password rules, mostly. Smaller and quieter than
   .sub, which is a screen-level thing. */
.auth-hint {
  color: var(--gray-5);
  font-size: 14px;
  margin: var(--s2) 0 0;
}

/* Secondary actions ("Forgot your password?", "Back to sign in"). A full
   bordered button here competes with the real one; this is deliberately
   quiet, but still a 52px tap target for gloved hands. */
.auth-alt {
  display: block;
  width: 100%;
  min-height: var(--tap);
  margin-top: var(--s2);
  background: none;
  border: none;
  color: var(--blue);
  font-family: var(--font);
  font-size: 16px;
  font-weight: 700;
  cursor: pointer;
}
.auth-alt:active { color: var(--blue-dark); }

/* Errors sit above the fields, inside the card, where the eye lands next
   after a failed press — not as a toast that has gone by the time they
   look up from the keyboard. */
.auth-msg { margin-bottom: var(--s4); }
.auth-msg:empty { display: none; }

/* ---------- the menu ---------- */

/* Who is signed in. A label, not a button — it sits in a list of buttons, so
   it has to be visibly not-pressable or people will tap it. */
.menu-who {
  padding: var(--s3) var(--s4);
  border-top: 1px solid var(--gray-2);
  background: var(--gray-1);
  color: var(--gray-5);
  font-size: 14px;
  font-weight: 700;
}

/* Sign out is the one destructive-ish action in the menu. Red text, but not
   a red button — it should be findable, not inviting. */
#menuSignOut { color: var(--red); font-weight: 700; }

/* ---------- my profile ---------- */

.pf-screen { max-width: 560px; }
.pf-h2 { font-size: 16px; font-weight: 800; margin-bottom: var(--s3); }

.pf-head { display: flex; align-items: center; gap: var(--s3); }
.pf-avatar {
  flex: none;
  width: 52px; height: 52px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: var(--blue-tint); color: var(--blue);
  font-size: 17px; font-weight: 800;
}
.pf-name { font-size: 19px; font-weight: 800; margin: 0; }
.pf-email { font-size: 14px; color: var(--gray-5); margin: 2px 0 0; word-break: break-all; }

/* Two columns on a desktop, one on a phone — a title and a division sitting
   side by side read as a pair, which they are. */
.pf-facts {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: var(--s4);
  margin-top: var(--s4); padding-top: var(--s4);
  border-top: 1px solid var(--gray-2);
}
.pf-facts:empty { display: none; border: none; margin: 0; padding: 0; }
.pf-facts span {
  display: block; font-size: 12px; font-weight: 700;
  text-transform: uppercase; letter-spacing: .04em; color: var(--gray-5);
}
.pf-facts b { display: block; font-size: 16px; margin-top: 2px; }

.pf-cat {
  font-size: 11px; font-weight: 700; letter-spacing: .04em;
  text-transform: uppercase; color: var(--gray-5);
  margin: var(--s3) 0 var(--s1);
}
.pf-cat:first-of-type { margin-top: 0; }
.pf-list { margin: 0 0 var(--s2); padding-left: 20px; }
.pf-list li { font-size: 15px; line-height: 1.6; }

/* Environment + build, at the very bottom of My profile. Deliberately quiet —
   it is there to be found when someone asks "is this the real one?", not to be
   read every day. See the note in profile.js. */
.pf-foot {
  margin: var(--s4, 20px) 2px 0;
  font-size: 11px; letter-spacing: .04em;
  color: var(--faint); text-align: center;
}

/* Autofill in Chrome paints its own background over the input and undoes
   the border radius agreement with everything around it. */
.auth-card input:-webkit-autofill {
  -webkit-text-fill-color: var(--ink);
  -webkit-box-shadow: 0 0 0 1000px var(--white) inset;
}