/*
 * Sign-in and password screens.
 *
 * Split layout from the design reference: brand panel on the deep teal ground,
 * form on paper. Below 860px the brand panel becomes a short header strip so
 * the form stays above the fold on a phone — a student signing in before an
 * exam should not have to scroll past marketing copy.
 */

.auth {
  display: grid;
  grid-template-columns: 1.05fr 1fr;
  min-height: 100vh;
  min-height: 100dvh;
}

/* --- Brand panel --------------------------------------------------------- */

.auth__brand {
  background: var(--ground);
  color: var(--text-inverse);
  display: flex;
  align-items: center;
  padding: var(--s-12) var(--s-10);
  position: relative;
  overflow: hidden;
}

/* A single soft ochre bloom, off-centre. The one decorative element on the
   page — enough to stop the panel reading as a flat block, quiet enough not
   to compete with the wordmark. */
.auth__brand::after {
  content: "";
  position: absolute;
  width: 460px;
  height: 460px;
  inset-inline-end: -140px;
  bottom: -180px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(207, 125, 42, 0.22), transparent 68%);
  pointer-events: none;
}

.auth__brand-inner {
  position: relative;
  max-width: 460px;
  margin-inline-start: auto;
  width: 100%;
}

.auth__headline {
  margin-top: var(--s-12);
  font-family: var(--font-display);
  font-size: clamp(30px, 3.4vw, 44px);
  line-height: 1.12;
  letter-spacing: var(--track-tight);
  font-weight: var(--w-semibold);
}

.auth__sub {
  margin-top: var(--s-4);
  max-width: 44ch;
  color: var(--text-inverse-dim);
  font-size: var(--t-md);
}

.auth__stats {
  display: flex;
  gap: var(--s-10);
  margin-top: var(--s-12);
  padding-top: var(--s-6);
  border-top: 1px solid var(--line-inverse);
}

.auth__stats dt { color: rgba(238, 242, 238, 0.5); }

.auth__stats dd {
  margin-top: 4px;
  font-size: var(--t-2xl);
  color: var(--text-inverse);
}

.auth__session {
  margin-top: var(--s-10);
  color: rgba(238, 242, 238, 0.38);
}

/* --- Form panel ---------------------------------------------------------- */

.auth__panel {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--s-10) var(--s-6);
  background: var(--paper);
}

.auth__form-wrap { width: 100%; max-width: 380px; }

.auth__title {
  margin: var(--s-2) 0 var(--s-8);
  font-family: var(--font-display);
  font-size: var(--t-3xl);
  font-weight: var(--w-semibold);
  line-height: var(--lh-tight);
}

.auth__notice {
  margin-bottom: var(--s-5);
  padding: var(--s-3) var(--s-4);
  background: var(--success-tint);
  border-inline-start: 3px solid var(--success);
  border-radius: var(--r-sm);
  font-size: var(--t-sm);
  color: var(--teal);
}

.auth__form .field { margin-bottom: var(--s-5); }

/* Password field with an inline reveal control. */
.input-group { position: relative; display: flex; }
.input-group .input { padding-inline-end: 68px; }

.input-group__action {
  position: absolute;
  inset-inline-end: 4px;
  top: 4px;
  bottom: 4px;
  padding: 0 var(--s-3);
  background: none;
  border: none;
  border-radius: var(--r-sm);
  color: var(--teal);
  font-size: var(--t-sm);
  font-weight: var(--w-medium);
  cursor: pointer;
}
.input-group__action:hover { background: var(--sage); }

.auth__row {
  display: flex;
  justify-content: flex-end;
  margin: calc(var(--s-5) * -1 + var(--s-2)) 0 var(--s-6);
}

.auth__link { font-size: var(--t-sm); font-weight: var(--w-medium); }

/* Sign-in is the one screen every user meets, often one-handed on a phone.
   The reveal control measured 55x34 and the "forgot password" link 98x15 —
   both under the target guidance, and the link badly so, because an inline
   anchor is only as tall as its text. Both are given room on touch pointers
   only, so the desktop form keeps its density. See the shell rules in
   portal.css for why this keys off the pointer rather than the width. */
@media (pointer: coarse) {
  /* The reveal control is sized by the field it sits in, so the field is what
     has to grow — at 42px the button could never reach the 44px floor however
     it was padded. */
  .auth__form .input { min-height: 44px; }

  /* Filling the field vertically is both a bigger target and a tidier one —
     the 4px inset exists to look inset, which a thumb does not care about. */
  .input-group__action { top: 0; bottom: 0; padding: 0 var(--s-4); }
  .input-group .input { padding-inline-end: 76px; }

  .auth__link {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    padding-inline: var(--s-1);
  }

  /* The row was spaced for a 15px link; the link now brings its own height. */
  .auth__row { margin-block: calc(var(--s-5) * -1) var(--s-4); }
}

/* The apply button under the sign-in form. Only the gap is set here: the
   button carries its own size and colour from .btn, so this cannot drift away
   from every other button on the site. */
.auth__alt { margin-top: var(--s-3); }

.auth__foot {
  margin-top: var(--s-8);
  padding-top: var(--s-5);
  border-top: 1px solid var(--line);
  font-size: var(--t-sm);
  color: var(--text-muted);
  line-height: var(--lh-snug);
}

/* --- Responsive ---------------------------------------------------------- */

@media (max-width: 860px) {
  .auth { grid-template-columns: 1fr; min-height: 0; }

  .auth__brand {
    padding: var(--s-6) var(--s-5);
    align-items: flex-start;
  }
  .auth__brand::after { display: none; }
  .auth__brand-inner { margin: 0; max-width: none; }

  /* Everything below the wordmark is hidden rather than restyled: on a phone
     the form is the entire purpose of the screen. */
  .auth__headline,
  .auth__sub,
  .auth__stats,
  .auth__session { display: none; }

  .auth__panel {
    min-height: calc(100dvh - 84px);
    align-items: flex-start;
    padding-top: var(--s-10);
  }
}