/* shared/portal-auth.css
 *
 * THE WAY IN. Login, forgot password, set a new password. Step 5 of the MVP
 * build plan, 31 Aug 2026, and the last piece of it.
 *
 * IT IS THE FIRST SCREEN ANYONE SEES after the public site hands them over, and
 * it sat exactly on the seam between the rebuilt half and the old half. Measured
 * on the rendered page before this file existed: SEVEN tokens from the old
 * palette and NONE from the locked one, forty inline style attributes, and six
 * controls under the locked 48px floor, the worst of them a NINETEEN PIXEL link.
 *
 * There is no drawing of it. It takes the frame the rest of step 5 established,
 * which is why almost everything here is layout: the type, the colour, the
 * fields and the buttons all come from hibant-ds.css and none of it is restated.
 *
 * ── WHY THIS ONE HAS ITS OWN WIDTH ──────────────────────────────────────────
 *
 * The portal's screens read --portal-measure, one number for all ten, because
 * nine of them had drifted into nine identical copies of it. This is not a
 * tenth. A login form is a single column of two fields, and 1216px of it would
 * be absurd. The number lives here because it belongs to this surface and
 * nowhere else, which is the opposite case from the one that produced the token.
 */

.auth {
  max-width: 27rem;
  margin: 0 auto;
  padding: var(--sp-7) var(--sp-4) var(--sp-7);
}

/* THE MARK AND THE WORD, the same pair the portal sidebar opens on, rather than
   a 60px raster logo. It is the first thing a person sees on the way in and the
   first thing they see once they are through, so it should be the same thing. */
.auth__brand {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  margin-bottom: var(--sp-5);
}
.auth__brand svg { width: 30px; height: 30px; flex: none; }
.auth__brand b {
  font-family: var(--font-display);
  font-size: var(--fs-h3);
  font-weight: 600;
  letter-spacing: -.015em;
  color: var(--t1);
}

.auth__h { font-size: var(--fs-h2); text-align: center; margin-bottom: var(--sp-2); }
.auth__lede { color: var(--t2); text-align: center; margin: 0 auto var(--sp-5); }

.auth .ds-card + .ds-card { margin-top: var(--sp-5); }
.auth__go { margin-top: var(--sp-5); }

/* OR, as a rule with a word in it. The old one was two flex divs and a span,
   all three carrying inline styles. */
.auth__or {
  display: flex;
  align-items: center;
  gap: var(--sp-4);
  margin: var(--sp-5) 0;
  color: var(--t2);
  font-size: var(--fs-min);
  font-weight: 700;
}
.auth__or::before, .auth__or::after {
  content: "";
  flex: 1;
  height: 1px;
  background: var(--bd);
}

.auth__google svg { width: 20px; height: 20px; flex: none; }

/* A CONTROL, NOT A COLOURED WORD. "Reset it here" was a <span> with a cursor
   and no keyboard reachability at all: no tab stop, no Enter, nothing for a
   screen reader to announce. Same for "Back to login" on the next screen. */
.auth__quiet { text-align: center; margin-top: var(--sp-4); }

.auth__foot .ds-btn { margin-top: var(--sp-4); }

/* The line that used to be three tabs. See portal.html for why they went. */
.auth__note {
  margin-top: var(--sp-5);
  text-align: center;
  color: var(--t2);
  font-size: var(--fs-min);
}
/* "Get help" WAS A 19px INLINE LINK inside this sentence, which is the only
   control on the rebuilt screen that still missed the floor. The locked spec
   says 48px for a standard control and carries no exception for a link in
   running text, and the site's own precedent is the footer, where every link was
   given a flush 48px on 30 Aug. So it left the sentence and became a control of
   its own, the same shape as "Forgot your password?" above it. */

/* The message the reset screen writes into. It reserves its own line so the
   button below does not jump when a message appears under the field. */
.auth__msg { min-height: 1.5rem; margin: var(--sp-2) 0 0; color: var(--t2); }
.auth__msg:empty { min-height: 1.5rem; }

@media (max-width: 480px) {
  .auth { padding: var(--sp-5) var(--sp-4) var(--sp-6); }
}