/* "Reset Password" (/accounts/password_reset/), the forgot-password form.
   1:1 to the owner's mockup 02-password-reset/1.png (2026-10-01), measured
   at 1483px: a blue lock, the account recovery eyebrow in the student blue,
   the title, one line, the email field with its envelope, one blue Send Reset
   Link button and the way back to log in. No card: the page is the dotted
   paper. One ink: every word is --nb-ink or the student blue. One layout,
   two themes: only tokens change. */

.prf-page {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 118px 16px 116px;
  color: var(--nb-ink);
  font-family: var(--nb-sans);
  text-align: center;
}

.prf-lock {
  color: var(--nb-blue);
}

.prf-eyebrow {
  margin: 22px 0 0;
  font-size: var(--nb-text-sm);
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--nb-blue);
}

.prf-title {
  margin: 14px 0 0;
  font-family: var(--nb-sans);
  font-size: 2.375rem;
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: -0.01em;
  color: var(--nb-ink);
  text-wrap: balance;
}

.prf-lead {
  margin: 14px 0 0;
  text-wrap: balance;
  font-size: var(--nb-text-md);
  line-height: 1.6;
  color: var(--nb-ink);
}

.prf-form {
  display: flex;
  flex-direction: column;
  gap: 24px;
  width: min(100%, 489px);
  margin: 40px 0 0;
}

/* The field: the envelope inside it on the left, the words after it.
   (0,2,1) and up: the legacy light sheet paints every input outside an
   .auth-field white at (0,1,2), which beat a bare .prf-field input. */
.prf-field {
  position: relative;
}
.prf-field-icon {
  position: absolute;
  top: 50%;
  left: 18px;
  transform: translateY(-50%);
  color: var(--nb-blue);
  pointer-events: none;
}
.prf-page .prf-field input {
  box-sizing: border-box;
  width: 100%;
  height: 57px;
  margin: 0;
  padding: 0 18px 0 64px;
  border: 1px solid var(--nb-border-strong);
  border-radius: var(--nb-r-md);
  background: var(--nb-paper-sunken);
  color: var(--nb-ink);
  font-family: var(--nb-sans);
  font-size: var(--nb-text-md);
  text-align: left;
  box-shadow: none;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.prf-page .prf-field input::placeholder {
  color: var(--nb-ink);
  opacity: 0.8;
}
.prf-page .prf-field input:hover {
  border-color: var(--nb-ink);
}
.prf-page .prf-field input:focus {
  outline: none;
  border-color: var(--nb-blue);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--nb-blue) 28%, transparent);
}
.prf-page .prf-field.has-error input {
  border-color: var(--nb-error);
}
.prf-error {
  margin: -12px 0 0;
  font-size: var(--nb-text-sm);
  line-height: 1.45;
  color: var(--nb-error);
  text-align: left;
}

/* One blue action, the width of the field. */
.prf-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  width: 100%;
  height: 53px;
  padding: 0 20px;
  border: 0;
  border-radius: var(--nb-r-md);
  background: var(--nb-blue);
  color: var(--nb-on-blue);
  font-family: var(--nb-sans);
  font-size: var(--nb-text-base);
  font-weight: 600;
  cursor: pointer;
  transition: background-color 0.15s ease, transform 0.15s ease;
}
.prf-btn svg {
  transition: transform 0.15s ease;
}
.prf-btn:hover {
  background: var(--nb-blue-strong);
}
.prf-btn:hover svg {
  transform: translateX(2px);
}
.prf-btn:active {
  transform: translateY(1px);
}
.prf-btn:focus-visible {
  outline: 2px solid var(--nb-blue);
  outline-offset: 3px;
}

/* The way back, a 44px tap target. */
.prf-back {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-height: 44px;
  margin-top: 22px;
  padding: 0 8px;
  color: var(--nb-blue);
  font-size: var(--nb-text-base);
  font-weight: 600;
  text-decoration: none;
}
.prf-back svg {
  transition: transform 0.15s ease;
}
.prf-back:hover {
  color: var(--nb-blue-strong);
  text-decoration: underline;
  text-underline-offset: 3px;
}
.prf-back:hover svg {
  transform: translateX(-2px);
}
.prf-back:focus-visible {
  outline: 2px solid var(--nb-blue);
  outline-offset: 2px;
  border-radius: var(--nb-r-sm);
}

/* The label is for screen readers; the field shows its own words. */
.prf-sr {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* allauth's twin (mockup 6.png): the lock sits on a round raised tile, the
   field and the button are fully rounded, and the field's example address
   is in italic. Everything else is the Django form's. */
.prf-lock-tile {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 82px;
  height: 82px;
  border: 1px solid var(--nb-border);
  border-radius: 50%;
  background: var(--nb-paper-raised);
  box-shadow: var(--nb-shadow-1);
}
.prf-page--allauth {
  padding-top: 116px;
}
.prf-page--allauth .prf-eyebrow {
  margin-top: 26px;
}
.prf-page--allauth .prf-form {
  width: min(100%, 500px);
  gap: 22px;
  margin-top: 28px;
}
.prf-page--allauth .prf-field input {
  height: 63px;
  border-radius: var(--nb-r-pill);
  font-size: var(--nb-text-md);
}
.prf-page--allauth .prf-field input::placeholder {
  font-style: italic;
}
.prf-page--allauth .prf-btn {
  height: 54px;
  border-radius: var(--nb-r-pill);
}

@media (max-width: 480px) {
  .prf-page {
    padding: 64px 16px 72px;
  }
  .prf-title {
    font-size: var(--nb-text-2xl);
  }
  .prf-form {
    margin-top: 32px;
  }
  .prf-page--allauth {
    padding-top: 56px;
  }
  .prf-lock-tile {
    width: 72px;
    height: 72px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .prf-btn,
  .prf-btn svg,
  .prf-back svg,
  .prf-field input {
    transition: none;
  }
}