/* ============================================================
   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; }

/* ---------- "can we text you?" (consent.js) ---------- */

/* The number, big enough to check at arm's length in daylight. This is the one
   thing on the screen they have to verify is theirs before answering, so it
   reads as the subject of the question rather than a detail under it. */
.sc-num {
  font-size: 24px;
  font-weight: 800;
  text-align: center;
  margin: 0;
}
.sc-num-sub { text-align: center; margin-top: var(--s1); }

/* The consent sentence itself. Boxed and tinted so it is visibly the thing
   being agreed to and not screen furniture — the same reason the admin
   console's consent box has a border. Where bi() emits two lines, styles.css
   already handles .bi-en / .bi-tr. */
.sc-wording {
  margin: var(--s5) 0;
  padding: var(--s4);
  border: 1px solid var(--gray-3);
  border-radius: var(--radius);
  background: var(--gray-1);
  font-size: 16px;
  line-height: 1.55;
}

/* Both answers are real answers, so they get the same weight and the same tap
   target — a "no" hidden as a link next to a full-width "yes" is a leading
   question. Only the colour differs. */
.sc-terms + .btn { margin-bottom: var(--s3); }

/* Carrier-required disclosures (A2P 10DLC) — see docs/A2P-CAMPAIGN.md. Sits
   between the wording box and the buttons, so it reads as part of what is
   being agreed to rather than a footer. */
.sc-terms { text-align: center; margin-top: var(--s1); margin-bottom: var(--s3); }

.sc-why { margin-top: var(--s4); }

/* ---------- 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;
}

/* ---------- two-factor challenge (auth-screens.js, mfa_admin_gate.sql) ---------- */

/* One big legible field for the six digits — typed off a second phone held
   in the other hand, so it gets the same "read at arm's length" treatment
   as .sc-num rather than the normal field size. */
.mfa-code-input {
  font-size: 52px;
  font-weight: 800;
  text-align: center;
  letter-spacing: .15em;
}

/* ---------- two-factor enrollment (profile.js) ---------- */

/* White padding around the QR even in dark mode, or a phone camera reading
   it against a tinted card background loses contrast at the edges. */
.mfa-qr-wrap {
  display: flex; justify-content: center;
  background: var(--white);
  padding: var(--s4);
  border: 1px solid var(--gray-3);
  border-radius: var(--radius);
  margin: var(--s3) 0;
}
.mfa-qr-wrap img { width: 200px; height: 200px; display: block; }

/* The typed-key fallback for anyone whose camera can't reach the screen.
   Monospaced and selectable — this is meant to be copied, not read aloud. */
.mfa-secret {
  font-family: ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;
  font-size: 15px;
  letter-spacing: .04em;
  text-align: center;
  word-break: break-all;
  padding: var(--s3);
  background: var(--gray-1);
  border-radius: var(--radius-sm);
  -webkit-user-select: all; user-select: all;
  margin: var(--s2) 0 var(--s4);
}