/* The log in page, 1:1 to the owner's mockup (2026-10-01).

   No card: the form is printed on the page's own paper, one 468px column,
   centred. Above it, once, the Email verified note a reader meets straight
   after confirming their address while signed out. Boxed fields with an
   icon at the start, a show-password eye at the end of the password field,
   and a full-width blue Log In with its arrow.

   One ink: every word is --nb-ink or the student blue, never a grey. One
   layout, two themes: only tokens change between light and dark.

   Loads in the template's head block, BEFORE notebook-typography.css and
   notebook-account-typography.css, and over notebook-auth.css and
   notebook-account-skin.css, whose selectors reach (0,5,2). Every rule here
   is scoped under html body .auth-page.auth-page--login, which outranks the
   type layers' (0,2,2) and the auth layer's card and button rules, and the
   two fields are reached by their ids so the (0,5,2) field rules lose
   outright rather than on load order. */

html body .auth-page.auth-page--login {
  padding: 96px 16px 80px;
}

html body .auth-page.auth-page--login .auth-shell {
  max-width: 468px;
}

html body .auth-page.auth-page--login .auth-card {
  width: 100%;
  max-width: 468px;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  color: var(--nb-ink);
}

/* ── Email verified ─────────────────────────────────────────── */
html body .auth-page.auth-page--login .lg-verified {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin: 0 0 59px;
  text-align: center;
}

html body .auth-page.auth-page--login .lg-verified-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  width: 42px;
  height: 42px;
  border: 2px solid var(--nb-success);
  border-radius: 50%;
  background: color-mix(in srgb, var(--nb-success) 10%, transparent);
  box-shadow: 0 0 14px color-mix(in srgb, var(--nb-success) 22%, transparent);
  color: var(--nb-success);
}

html body .auth-page.auth-page--login .lg-verified-icon svg {
  width: 22px;
  height: 22px;
}

html body .auth-page.auth-page--login .lg-verified-title {
  margin: 18px 0 0;
  font: 700 1rem/1.3 var(--nb-sans);
  color: var(--nb-ink);
}

html body .auth-page.auth-page--login .lg-verified-text {
  margin: 4px 0 0;
  font: 400 1rem/1.5 var(--nb-sans);
  color: var(--nb-ink);
  text-wrap: balance;
}

/* ── Title ──────────────────────────────────────────────────── */
html body .auth-page.auth-page--login .auth-title {
  margin: 0;
  font: 700 2.625rem/1.2 var(--nb-sans);
  letter-spacing: -0.01em;
  text-align: center;
  color: var(--nb-ink);
}

html body .auth-page.auth-page--login .auth-subtitle {
  margin: 8px 0 32px;
  font: 400 1.1875rem/1.5 var(--nb-sans);
  text-align: center;
  color: var(--nb-ink);
}

/* ── Google ─────────────────────────────────────────────────── */
html body .auth-page.auth-page--login .google-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  box-sizing: border-box;
  width: 100%;
  min-height: 54px;
  padding: 12px 20px;
  border: 1px solid var(--nb-border-strong);
  border-radius: var(--nb-r-md);
  background: var(--nb-paper-raised);
  font: 600 var(--nb-text-md)/1.2 var(--nb-sans);
  letter-spacing: 0;
  color: var(--nb-ink);
}

html body .auth-page.auth-page--login .google-btn:hover,
html body .auth-page.auth-page--login .google-btn:focus-visible {
  border-color: var(--nb-blue);
  background: var(--nb-blue-wash);
  color: var(--nb-ink);
}

/* ── OR ─────────────────────────────────────────────────────── */
html body .auth-page.auth-page--login .auth-divider {
  display: flex;
  align-items: center;
  gap: 28px;
  margin: 30px 0 30px;
}

html body .auth-page.auth-page--login .auth-divider::before,
html body .auth-page.auth-page--login .auth-divider::after {
  content: "";
  flex: 1;
  height: 1px;
  background: var(--nb-border-strong);
}

html body .auth-page.auth-page--login .auth-divider span {
  font: 600 var(--nb-text-base)/1.2 var(--nb-sans);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--nb-ink);
}

/* ── Fields ─────────────────────────────────────────────────── */
html body .auth-page.auth-page--login .auth-field {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin: 0 0 30px;
}

html body .auth-page.auth-page--login .auth-field:last-of-type {
  margin-bottom: 40px;
}

html body .auth-page.auth-page--login .auth-field label {
  font: 600 var(--nb-text-base)/1.3 var(--nb-sans);
  letter-spacing: 0;
  color: var(--nb-ink);
}

/* The password row keeps the auth layer's grid (label left, Forgot
   password? right, field beneath); the field is now the control box. */
html body .auth-page.auth-page--login .auth-field--action {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: baseline;
  column-gap: 16px;
  row-gap: 10px;
}

html body .auth-page.auth-page--login .auth-field--action > .lg-control {
  grid-column: 1 / -1;
  grid-row: 2;
}

html body .auth-page.auth-page--login .auth-field-action {
  font: 600 var(--nb-text-base)/1.3 var(--nb-sans);
  letter-spacing: 0;
  color: var(--nb-blue);
}

/* The box: raised paper, a strong hairline, an 8px corner. Focus turns the
   edge blue and doubles it inward, so nothing moves. */
html body .auth-page.auth-page--login .lg-control {
  position: relative;
  display: flex;
  align-items: center;
  box-sizing: border-box;
  min-height: 54px;
  border: 1px solid var(--nb-border-strong);
  border-radius: var(--nb-r-md);
  background: var(--nb-paper-raised);
  transition: border-color var(--nb-dur-1) var(--nb-ease), box-shadow var(--nb-dur-1) var(--nb-ease);
}

html body .auth-page.auth-page--login .lg-control:hover {
  border-color: color-mix(in srgb, var(--nb-blue) 55%, var(--nb-border-strong));
}

html body .auth-page.auth-page--login .lg-control:focus-within {
  border-color: var(--nb-blue);
  box-shadow: inset 0 0 0 1px var(--nb-blue);
}

html body .auth-page.auth-page--login .auth-field:has(.auth-error) .lg-control,
html body .auth-page.auth-page--login .auth-card:has(.auth-error--block) .lg-control:not(:focus-within) {
  border-color: var(--nb-error);
}

html body .auth-page.auth-page--login .lg-icon {
  position: absolute;
  left: 18px;
  flex: none;
  color: var(--nb-ink);
  pointer-events: none;
}

html body .auth-page.auth-page--login #id_login,
html body .auth-page.auth-page--login #id_password {
  box-sizing: border-box;
  flex: 1;
  width: 100%;
  min-width: 0;
  min-height: 52px;
  margin: 0;
  padding: 0 18px 0 54px;
  border: 0;
  border-radius: var(--nb-r-md);
  background: transparent;
  box-shadow: none;
  outline: none;
  font: 400 1rem/1.4 var(--nb-sans);
  color: var(--nb-ink);
}

html body .auth-page.auth-page--login #id_password {
  padding-right: 4px;
}

/* ONE INK: the placeholder is the full ink in italic, as on every field. */
html body .auth-page.auth-page--login #id_login::placeholder,
html body .auth-page.auth-page--login #id_password::placeholder {
  color: var(--nb-ink);
  font-style: italic;
  opacity: 1;
}

html body .auth-page.auth-page--login .lg-eye {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: none;
  width: 44px;
  height: 44px;
  margin: 0 6px 0 0;
  padding: 0;
  border: 0;
  border-radius: var(--nb-r-sm);
  background: transparent;
  color: var(--nb-ink);
  cursor: pointer;
}

html body .auth-page.auth-page--login .lg-eye[hidden] {
  display: none;
}

html body .auth-page.auth-page--login .lg-eye:hover {
  color: var(--nb-blue);
}

html body .auth-page.auth-page--login .lg-eye:focus-visible {
  outline: 2px solid var(--nb-blue);
  outline-offset: -2px;
}

/* The slashed eye while the password is dots, as the mockup draws it; the
   open eye once it is shown as text. */
html body .auth-page.auth-page--login .lg-eye .lg-eye-on,
html body .auth-page.auth-page--login .lg-eye[data-ui-pressed="true"] .lg-eye-off {
  display: none;
}

html body .auth-page.auth-page--login .lg-eye[data-ui-pressed="true"] .lg-eye-on {
  display: block;
}

/* ── Log In ─────────────────────────────────────────────────── */
html body .auth-page.auth-page--login .auth-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: 100%;
  min-height: 54px;
  border: 1px solid var(--nb-blue);
  border-radius: var(--nb-r-md);
  background: var(--nb-blue);
  box-shadow: none;
  font: 700 var(--nb-text-md)/1.2 var(--nb-sans);
  letter-spacing: 0;
  color: var(--nb-on-blue);
}

html body .auth-page.auth-page--login .auth-btn:hover,
html body .auth-page.auth-page--login .auth-btn:focus-visible {
  border-color: var(--nb-blue-strong);
  background: var(--nb-blue-strong);
  color: var(--nb-on-blue);
}

html body .auth-page.auth-page--login .lg-arrow {
  flex: none;
}

/* ── New to ExamStudyAid? ───────────────────────────────────── */
html body .auth-page.auth-page--login .auth-links {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 6px;
  margin: 38px 0 0;
  padding: 0;
  border: 0;
  font: 400 1rem/1.5 var(--nb-sans);
  text-align: center;
  color: var(--nb-ink);
}

html body .auth-page.auth-page--login .auth-links a {
  font: 500 1rem/1.5 var(--nb-sans);
  letter-spacing: 0;
  color: var(--nb-blue);
  text-decoration: underline;
  text-underline-offset: 3px;
}

html body .auth-page.auth-page--login .auth-links a:hover {
  color: var(--nb-blue-strong);
}

/* On a touch screen the sign-up link is a 44px target; the line around it
   grows to hold it. Forgot password? already gets its 44px box from the auth
   layer's own coarse-pointer rule. */
@media (pointer: coarse) {
  html body .auth-page.auth-page--login .auth-links {
    align-items: center;
    row-gap: 0;
  }

  html body .auth-page.auth-page--login .auth-links a {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
  }
}

@media (max-width: 560px) {
  html body .auth-page.auth-page--login {
    padding: 48px 16px 56px;
  }

  html body .auth-page.auth-page--login .lg-verified {
    margin-bottom: 40px;
  }

  html body .auth-page.auth-page--login .auth-title {
    font-size: var(--nb-text-2xl);
  }
}