/*
 * The one auth form, and the modal that can host it.
 *
 * Every value here is lifted from signup.html's card, which is the look the
 * signed-out pages already had. It lives in its own file for the same reason
 * the logic does: the form is now drawn in three places, and a second copy of
 * a 54px control height is a second thing to keep in step.
 *
 * SCOPED TO .uauth-*, DELIBERATELY. This stylesheet loads on job pages that
 * carry their own design tokens, and a bare `input { height: 54px }` from an
 * auth stylesheet would restyle a search box three sections away.
 */

/* SMALLER THROUGHOUT. The first pass used the signup PAGE's proportions -
   29px headings and 54px controls - which is right for a card that is the
   only thing on the screen and much too big for a dialog over a job listing,
   where it filled the viewport top to bottom. */
/* THE FRAME STAYS ROUND, THE CONTROLS DO NOT. The dialog keeps its 18px
   corner; everything inside drops to 8px. Matching them made the controls
   read as soft blobs stacked in a soft box - the contrast between a rounded
   container and squarer contents is what reads as precise.

   SPACING IS NOT SIZE. The scale-down pass shrank the gaps along with the
   controls, which is what made the form read as smushed: 40px inputs are
   correct, 7px between them is not. The controls stay where they are and the
   rhythm between them opens back up. */
.uauth-head { margin-bottom: 22px; text-align: center; }
.uauth-title { font-size: 20px; font-weight: 700; letter-spacing: -.035em; line-height: 1.25; color: #101322; margin: 0; }

.uauth-google {
  position: relative; width: 100%; height: 42px; display: flex; align-items: center;
  justify-content: center; gap: 10px; border: 1px solid #d9dfe9; border-radius: 8px;
  background: #fff; font-size: 14.5px; font-weight: 500; color: #101322; cursor: pointer;
  font-family: inherit; transition: border-color .12s, background .12s;
}
.uauth-google:hover { border-color: #b9c3d3; background: #fafbfd; }
.uauth-google:disabled { cursor: default; opacity: .7; }
.uauth-g { flex: 0 0 auto; }

/* "Last used" is shown only when this browser really did sign in with Google
   before. It reflects a prior sign-in, never a default. */
.uauth-lastused {
  position: absolute; top: -9px; right: 12px; font-size: 11px; font-weight: 600;
  letter-spacing: .02em; color: #5a6d82; background: #fff; border: 1px solid #e7ebf2;
  border-radius: 999px; padding: 2px 8px;
}

.uauth-or { display: flex; align-items: center; gap: 14px; color: #9aa3b5; font-size: 12px; margin: 17px 0; }
.uauth-or::before, .uauth-or::after { content: ''; flex: 1; height: 1px; background: #e7ebf2; }

.uauth-input {
  /* WHITE, WITH A BORDER YOU CAN SEE. The fields were a flat grey fill
     inside an almost-invisible #e7ebf2 border, which is the cheapest-looking
     input there is: no edge, no depth, just a lighter rectangle. A white
     field with a defined edge and one hairline of shadow reads as a control
     rather than a gap. */
  width: 100%; height: 42px; padding: 0 13px; margin-bottom: 9px; font-size: 14.5px;
  color: #101322; background: #fff; border: 1px solid #dbe2ec; border-radius: 8px;
  box-shadow: 0 1px 1.5px rgba(16, 24, 40, .04);
  outline: none; font-family: inherit; transition: border-color .12s, box-shadow .12s;
}
.uauth-input::placeholder { color: #9aa3b5; }
.uauth-input:focus { border-color: #16263C; box-shadow: 0 0 0 3px rgba(22, 38, 60, .09); }

/* A real label wrapping a real checkbox rather than a styled div: the whole
   line becomes a click target, the control is reachable and toggleable from
   the keyboard, and a screen reader announces the state with no aria plumbing. */
.uauth-consent {
  /* QUIETER. This is a default someone may leave alone, not a decision the
     form is asking them to stop and make, so it should not carry the weight
     of one. Smaller, lighter, and short enough to sit on one line. */
  display: flex; align-items: center; gap: 8px; margin: 14px 0 2px;
  font-size: 11.5px; line-height: 1.5; color: #98a1b3; cursor: pointer;
}
.uauth-consent input[type="checkbox"] {
  flex-shrink: 0; width: 13px; height: 13px; margin: 0; accent-color: #16263C; cursor: pointer;
}

.uauth-submit {
  width: 100%; height: 42px; margin-top: 15px; background: #16263C; color: #fff; border: 0;
  border-radius: 8px; font-size: 14.5px; font-weight: 600; cursor: pointer; font-family: inherit;
  letter-spacing: -.01em; transition: background .12s;
}
.uauth-submit:hover { background: #243b5c; }
.uauth-submit:disabled { cursor: default; opacity: .75; }

/* Centred under the button, not pushed to the right margin. It is the second
   thing someone reaches for when the first did not work, so it sits on the
   same axis as the thing that did not work. */
.uauth-forgot {
  display: block; margin: 16px auto 0; border: 0; background: none; padding: 0;
  font-family: inherit; font-size: 13px; font-weight: 500; color: #5a6d82; cursor: pointer;
}
.uauth-forgot:hover { color: #16263C; text-decoration: underline; }

.uauth-msg { font-size: 12.5px; border-radius: 8px; padding: 9px 12px; margin-top: 14px; }
.uauth-msg[hidden] { display: none; }
.uauth-err { color: #b91c1c; background: #fef2f2; border: 1px solid #fecaca; }
.uauth-ok { color: #0f5132; background: #e7f6ee; border: 1px solid #b9e2cc; }

/* THE WORDS ARE UNCHANGED - this sentence is what carries the agreement, and
   trimming it to look tidier would trim the thing it exists to say. Only its
   VOLUME comes down: smaller, lighter, and links that read as links without
   competing with the button above them. */
.uauth-legal { margin-top: 15px; font-size: 11px; line-height: 1.5; color: #a4acbb; text-align: center; }
.uauth-legal a { color: #8a93a5; text-decoration: underline; text-underline-offset: 2px; }
.uauth-legal a:hover { color: #16263C; }

.uauth-swap { margin-top: 18px; padding: 12px; border: 1px solid #e7ebf2; border-radius: 8px;
  font-size: 13px; color: #6b7688; text-align: center; }
.uauth-swap button {
  border: 0; background: none; padding: 0; font-family: inherit; font-size: 13px;
  font-weight: 700; color: #16263C; cursor: pointer;
}
.uauth-swap button:hover { text-decoration: underline; text-underline-offset: 2px; }

/* ── The modal ──────────────────────────────────────────────────────────────
   The blur is applied by a class on <html> to everything that is NOT the
   dialog. Pages disagree about what their top-level wrapper is, so a filter
   on "the page's own container" either blurs nothing or blurs the dialog with
   it. Selecting body's children and excepting the dialog works on any page. */
.uauth-scrim {
  position: fixed; inset: 0; background: rgba(11, 22, 44, .38);
  opacity: 0; transition: opacity .16s ease; z-index: 2147483000;
}
.uauth-scrim.is-open { opacity: 1; }

html.uauth-open body > *:not(.uauth-dialog):not(.uauth-scrim) {
  filter: blur(6px);
  transition: filter .16s ease;
}
/* The page behind must not scroll under the dialog, and must not jump when
   the scrollbar goes: overflow alone reflows the page sideways. */
html.uauth-open, html.uauth-open body { overflow: hidden; }

.uauth-dialog {
  position: fixed; top: 50%; left: 50%; z-index: 2147483001;
  /* 420, after 360 and 500. 360 read as a narrow strip - but the cause was
     the GAPS, which had been shrunk along with the controls, and 500 fixed
     the symptom by making the dialog wide and heavy. With the spacing right,
     the frame could come in: 500 -> 420 -> 394, with the horizontal padding
     trimmed alongside it so the interior lost less than the frame did. */
  width: min(394px, calc(100vw - 32px)); max-height: calc(100vh - 32px); overflow-y: auto;
  background: #fff; border: 1px solid #e7ebf2; border-radius: 18px; padding: 30px 28px 26px;
  box-shadow: 0 1px 2px rgba(16, 24, 40, .05), 0 28px 64px rgba(16, 24, 40, .18);
  transform: translate(-50%, -48%); opacity: 0;
  transition: transform .18s ease, opacity .18s ease;
  font-family: 'Inter', system-ui, -apple-system, sans-serif;
  color: #101322; line-height: 1.5;
}
.uauth-dialog.is-open { transform: translate(-50%, -50%); opacity: 1; }

.uauth-close {
  position: absolute; top: 16px; right: 16px; width: 30px; height: 30px;
  display: flex; align-items: center; justify-content: center; border: 0;
  background: #eef1f6; border-radius: 50%; color: #5a6d82; cursor: pointer; line-height: 0;
  transition: background .12s, color .12s;
}
.uauth-close:hover { background: #16263C; color: #fff; }

@media (max-width: 520px) {
  .uauth-dialog { padding: 26px 20px 20px; border-radius: 16px; }
  /* Smaller than the desktop sizes, not larger. This said 23px, which was a
     leftover from when the title was 29px and made the heading GROW on a
     phone. */
  .uauth-kicker { font-size: 14px; }
  .uauth-title { font-size: 19px; }
}

@media (prefers-reduced-motion: reduce) {
  .uauth-scrim, .uauth-dialog, html.uauth-open body > * { transition: none; }
}

/* ── The password field and its eye ─────────────────────────────────────────
   The input is type="password" and therefore masked as it is typed; the eye
   is how someone checks what they typed rather than guessing. A masked field
   with no reveal is where mistyped passwords come from. */
.uauth-pw { position: relative; }
.uauth-pw .uauth-input { padding-right: 40px; }
.uauth-eye {
  position: absolute; top: 0; right: 0; width: 40px; height: 42px; display: flex;
  align-items: center; justify-content: center; border: 0; background: none;
  color: #9aa3b5; cursor: pointer; border-radius: 0 8px 8px 0;
}
.uauth-eye { color: #aab3c2; }
.uauth-eye:hover { color: #16263C; }
.uauth-eye:focus-visible { outline: 2px solid #5b7fe0; outline-offset: -2px; }