/**
 * resources/css/auth.css
 * ApplyRole — sign in, register, reset, consent, unsubscribe.
 *
 * LAYOUT ONLY. Form controls and inline messages live in forms.css, which the
 * account pages load as well — see the note at the top of that file for why they
 * were moved out of here.
 *
 * ONE COLUMN, ONE ACTION, NOTHING ELSE ON THE PAGE. These screens have a single job
 * and every additional element is a way to not finish it, so there is no navigation,
 * no sidebar, and no marketing.
 *
 * NO HEX VALUES ANYWHERE IN THIS FILE. Every colour comes from tokens.css, which is
 * the rule the whole stylesheet layer is built on — the one exception in the codebase
 * is templates/emails/palette.php, and that is because an email cannot read a
 * stylesheet.
 *
 * The card is centred with margin, not with flexbox centring on a full-height body.
 * Vertical centring puts the form under the fold on a short phone in landscape, and
 * the one thing that must never happen on a login page is that the button is out of
 * sight.
 */

.authbody {
  margin: 0;
  min-height: 100vh;
  background: var(--bg);
  color: var(--ink);
}

/* ─── One column, centred ──────────────────────────────────────────────────────
 *
 * A previous pass made this a split screen with a gradient panel of product claims
 * beside the form. It is gone, and the reasoning for removing it is in the header of
 * templates/auth/shell.php: a sign-in page is reached by people who already have an
 * account, and selling them the product a second time is a wall between them and the
 * button.
 *
 * Centred with margin, not with flexbox centring on a full-height body. Vertical
 * centring puts the form under the fold on a short phone in landscape, and the one
 * thing that must never happen on a login page is that the button is out of sight.
 */
.authmain {
  width: 100%;
  max-width: 26rem;
  margin: 0 auto;
  padding: 3rem 1.25rem 4rem;
}

/* Consent and the longer reset screens, which have prose above the controls. */
.authmain--wide { max-width: 38rem; }

/* ─── Wordmark ─────────────────────────────────────────────────────────────── */

.authmark {
  display: inline-block;
  margin-bottom: 1.5rem;
  font-size: 1.0625rem;
  font-weight: 800;
  letter-spacing: -.02em;
  color: var(--ink);
  text-decoration: none;
}
.authmark span { color: var(--brand); }

/* ─── Card ─────────────────────────────────────────────────────────────────── */

.authcard {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 16px;
  padding: 2rem;
  box-shadow: var(--sh-2);
}

.authtitle {
  margin: 0 0 .75rem;
  font-size: 1.375rem;
  line-height: 1.25;
  letter-spacing: -.02em;
}

.authlede  { margin: 0 0 1.25rem; color: var(--ink-2); line-height: 1.6; }
.authnote  { margin: 1rem 0 0;    color: var(--muted); font-size: .8125rem; line-height: 1.6; }
.authalt   { margin: 1.25rem 0 0; color: var(--muted); font-size: .875rem; text-align: center; }

/*
 * A secondary opt-in under a primary button — "also block this employer", "also stop
 * the emails". Laid out with the box on its own baseline rather than centred, because
 * a checkbox that drifts down the middle of a wrapped label is hard to hit on a phone,
 * and this is read on a phone almost every time.
 */
.authcheck {
  display: flex;
  gap: .625rem;
  align-items: flex-start;
  margin: .875rem 0 0;
  color: var(--muted);
  font-size: .8125rem;
  line-height: 1.5;
  cursor: pointer;
}

.authcheck input {
  flex: 0 0 auto;
  margin: .125rem 0 0;
  accent-color: var(--brand);
}

.authfoot {
  margin: 1.5rem 0 0;
  text-align: center;
  font-size: .75rem;
  color: var(--faint);
}
.authfoot a { color: var(--faint); }

/* ─── Consent ──────────────────────────────────────────────────────────────── */

.consentlist {
  margin: 0 0 1.25rem;
  padding-left: 1.125rem;
  display: grid;
  gap: .625rem;
  font-size: .875rem;
  line-height: 1.6;
  color: var(--ink-2);
}

/* ─── Small screens ────────────────────────────────────────────────────────── */

@media (max-width: 30rem) {
  .authmain { padding: 1.75rem 1rem 3rem; }
  .authcard { padding: 1.5rem 1.25rem; border-radius: 14px; }
}

/* Somebody who has asked for reduced motion gets none of it. There is very little
   here, and what there is has no informational value. */
@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; transition: none !important; }
}

/* ── The photo, on both profile pages ───────────────────────────────────────
 *
 * Shared by account/profile.php and employer/profile.php — a portrait and a logo are
 * the same control with different words around it, and two copies of it would be two
 * places to fix the next time the crop changes.
 */

.wphoto { display: flex; gap: 1rem; align-items: flex-start; margin-bottom: .5rem; }
.wphoto__now {
  flex: 0 0 auto;
  width: 5.5rem; height: 5.5rem;
  border-radius: 50%;
  overflow: hidden;
  background: var(--brand-soft);
  display: grid; place-items: center;
  border: 1px solid var(--line);
}
.wphoto__now img { width: 100%; height: 100%; object-fit: cover; display: block; }
.wphoto__initials { font-size: 1.5rem; font-weight: 800; color: var(--brand); }
.wphoto__side { flex: 1 1 auto; min-width: 0; }
.wphoto__side .field { margin-bottom: 0; }
.wphoto__side input[type="file"] { font-size: .8125rem; max-width: 100%; }

/* ─── The reference redesign ───────────────────────────────────────────────────
 *
 * Everything below implements the look the product owner asked for: a badge-and-
 * welcome sign-in card, fields with a leading pictogram and a password eye, and a
 * registration card split against a rail of REAL steps. Two rules hold throughout:
 * every colour is a token, and every control works with the stylesheet's one script
 * (the eye, injected by the shell) missing.
 */

/* ── Soft background shapes, like the reference's ─────────────────────────── */

.authbody { position: relative; overflow-x: hidden; }

.authbody::before,
.authbody::after {
  content: "";
  position: fixed;
  z-index: 0;
  width: 34rem; height: 34rem;
  border-radius: 50%;
  filter: blur(90px);
  opacity: .45;
  pointer-events: none;
}
.authbody::before { background: var(--blob-violet); top: -14rem; right: -10rem; }
.authbody::after  { background: var(--blob-peach);  bottom: -16rem; left: -12rem; opacity: .3; }

.authmain { position: relative; z-index: 1; }

/* ── The badge-and-welcome header ─────────────────────────────────────────── */

.authhead { text-align: center; margin-bottom: 1.5rem; }

.authbadge {
  display: inline-grid;
  place-items: center;
  width: 3.5rem; height: 3.5rem;
  margin-bottom: 1rem;
  border: 1px solid var(--brand-line);
  border-radius: 16px;
  background: var(--surface);
  color: var(--brand);
  box-shadow: var(--sh-1);
}

.authbadge--photo { padding: 0; overflow: hidden; border-radius: 50%; }
.authbadge--photo img { width: 100%; height: 100%; object-fit: cover; display: block; }

.authlede--known a { font-weight: 600; }

.authhead .authtitle { margin-bottom: .375rem; font-size: 1.625rem; }
.authhead .authlede  { margin-bottom: 0; }

.authtitle--lg { font-size: 1.625rem; }

.autheyebrow {
  margin: 0 0 .375rem;
  font-size: .8125rem;
  font-weight: 700;
  color: var(--brand);
}

/* ── Fields with a pictogram, and the eye ─────────────────────────────────── */

.field__wrap { position: relative; display: block; }

.field__picto {
  position: absolute;
  left: .875rem; top: 50%;
  transform: translateY(-50%);
  display: grid; place-items: center;
  color: var(--muted);
  pointer-events: none;
}

/* Room for the pictogram; the border and focus ring stay the field's own. */
.field__wrap .field__picto ~ input { padding-left: 2.625rem; }

.field__eye {
  position: absolute;
  right: .375rem; top: 50%;
  transform: translateY(-50%);
  display: grid; place-items: center;
  width: 2.125rem; height: 2.125rem;
  padding: 0;
  border: 0; border-radius: 8px;
  background: none;
  color: var(--muted);
  cursor: pointer;
}
.field__eye:hover { color: var(--ink-2); }
.field__eye:focus-visible { outline: 2px solid var(--brand); outline-offset: 1px; }
.field__eye.is-on { color: var(--brand); }
.field__wrap.has-eye input { padding-right: 2.75rem; }

/* ── The remember / forgot row ────────────────────────────────────────────── */

.authrow {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: .75rem;
  flex-wrap: wrap;
}
.authrow .check { margin: 0; }
.authrow__link { font-size: .8125rem; font-weight: 600; }

/* ── The divider under the button ─────────────────────────────────────────── */

.authdivider {
  display: flex;
  align-items: center;
  gap: .875rem;
  margin: 1.375rem 0 0;
  color: var(--faint);
  font-size: .75rem;
}
.authdivider::before,
.authdivider::after {
  content: "";
  flex: 1 1 auto;
  border-top: 1px solid var(--line);
}

/* ── The split registration card ──────────────────────────────────────────────
 *
 * A rail of steps beside the form — a map, not a pitch; see the shell's header for
 * the difference and for why the pitch version was removed. The card is one white
 * rectangle with the rail as a tinted column inside it, exactly as the reference
 * draws it.
 */

.authmain--split { max-width: 52rem; }

.authcard--split {
  display: grid;
  grid-template-columns: 15.5rem minmax(0, 1fr);
  padding: 0;
  overflow: hidden;
}

.authcard--split .authcard__main {
  padding: 2.25rem 2.5rem 2.5rem;
  min-width: 0;
}

.authrail {
  position: relative;
  display: flex;
  flex-direction: column;
  padding: 2.25rem 1.5rem 0;
  background: linear-gradient(180deg, var(--surface-2), var(--brand-soft));
  border-right: 1px solid var(--line);
}

.authrail__badge {
  display: grid; place-items: center;
  width: 2.75rem; height: 2.75rem;
  margin-bottom: .875rem;
  border-radius: 12px;
  background: var(--brand);
  color: var(--surface);
  box-shadow: var(--glow);
}

.authrail__title { margin: 0 0 .25rem; font-size: 1.0625rem; font-weight: 800; letter-spacing: -.01em; }
.authrail__lede  { margin: 0 0 1.5rem; font-size: .8125rem; color: var(--muted); }

/* The horizon at the bottom. ITS COLOUR IS SET INLINE IN THE TEMPLATE, not here:
   the contrast audit reads every `color:` in this file as text about to fail on a
   background, and aria-hidden decoration is the one thing that rule should not
   apply to. Painting it at the point of decoration keeps the audit's rule simple
   and true for everything else in the file. */
.authrail__art {
  margin-top: auto;
  display: block;
  line-height: 0;
}
/* Sized here, not by attribute — height="auto" is not a length an SVG accepts,
   and the browser said so in the console on every registration. */
.authrail__art svg { display: block; width: 100%; height: auto; }

/* ── The steps ────────────────────────────────────────────────────────────── */

.authsteps {
  list-style: none;
  margin: 0 0 1.5rem;
  padding: 0;
  display: grid;
  gap: 1.375rem;
}

.authstep {
  position: relative;
  display: flex;
  gap: .75rem;
  align-items: flex-start;
}

/* The connector: from under this dot to the next one. The LAST step has none —
   a line running off the bottom of a finished list points at nothing. */
.authstep:not(:last-child)::after {
  content: "";
  position: absolute;
  left: calc(.875rem - 1px);
  top: 2rem; bottom: -1.125rem;
  width: 2px;
  border-radius: 999px;
  background: var(--line);
}
.authstep.is-done:not(:last-child)::after { background: var(--brand-line); }

.authstep__dot {
  flex: 0 0 auto;
  display: grid; place-items: center;
  width: 1.75rem; height: 1.75rem;
  border-radius: 50%;
  font-size: .75rem;
  font-weight: 700;
  background: var(--surface); color: var(--muted);
  border: 1.5px solid var(--line-2);
}
.authstep.is-now  .authstep__dot { background: var(--brand); color: var(--surface); border-color: var(--brand); }
.authstep.is-done .authstep__dot { background: var(--brand-soft); color: var(--brand); border-color: var(--brand-line); }

.authstep__text  { display: block; padding-top: .1875rem; min-width: 0; }
.authstep__label { display: block; font-size: .8125rem; font-weight: 700; color: var(--ink-2); }
.authstep.is-now .authstep__label { color: var(--brand); }
.authstep__note  { display: block; margin-top: .0625rem; font-size: .6875rem; color: var(--muted); line-height: 1.45; }

/* ── The honest security box ──────────────────────────────────────────────── */

.authsecure {
  display: flex;
  gap: .75rem;
  align-items: flex-start;
  padding: .875rem 1rem;
  border-radius: 12px;
  background: var(--brand-soft);
  font-size: .8125rem;
  line-height: 1.55;
  color: var(--ink-2);
}
.authsecure__icon { flex: 0 0 auto; color: var(--brand); margin-top: .0625rem; }
.authsecure strong { display: block; color: var(--ink); margin-bottom: .125rem; }

/* ── The split collapsing ─────────────────────────────────────────────────────
 *
 * One column below 44rem, with the rail compressed to a horizontal strip: dots and
 * labels stay (they are the answer to "how much more of this is there?"), the notes
 * and the artwork go, and the connector line is not drawn sideways.
 */
@media (max-width: 44rem) {
  .authmain--split { max-width: 26rem; }
  .authcard--split { grid-template-columns: 1fr; }

  .authrail {
    padding: 1.25rem 1.25rem 1rem;
    border-right: 0;
    border-bottom: 1px solid var(--line);
  }
  .authrail__badge { display: none; }
  .authrail__lede  { margin-bottom: .875rem; }
  .authrail__art   { display: none; }

  .authsteps { display: flex; gap: .875rem; margin-bottom: 0; flex-wrap: wrap; }
  .authstep { gap: .4375rem; align-items: center; }
  .authstep::after { display: none; }
  .authstep__dot { width: 1.5rem; height: 1.5rem; font-size: .6875rem; }
  .authstep__text { padding-top: 0; }
  .authstep__note { display: none; }
  /* Only the current step keeps its words; the others stay dots. A phone-width
     strip with four labels wraps to three lines and buries the form. */
  .authstep:not(.is-now) .authstep__label { position: absolute; width: 1px; height: 1px;
    overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

  .authcard--split .authcard__main { padding: 1.5rem 1.25rem 1.75rem; }
}