/* "Create your account" (accounts.views.SignUpView, the open sign-up form).
   1:1 to the owner's mockup 03-account-states/9.png (2026-10-01), measured
   at 1216px: one 426px column on the dotted paper, the account creation
   eyebrow in the student blue, the title and line, an outlined Continue with
   Google, "or continue with email" between two rules, four fields with their
   icons (the passwords with show-password eyes), three live checks under the
   password, the two required boxes for the Terms of Service and the Privacy
   Policy, one blue Create account, a hairline and the way to log in. The checks match "Set a password" (account-password-set.css):
   idle, met in the success green, unmet ringed in red. One ink: every word
   is --nb-ink or the student blue. One layout, two themes: only tokens
   change. Selectors start at .asu-page (0,2,0 and up) so the legacy light
   sheet's bare input rules never repaint the fields. */

.asu-page {
  display: flex;
  justify-content: center;
  padding: 64px 16px 48px;
  color: var(--nb-ink);
  font-family: var(--nb-sans);
}

.asu-col {
  width: min(100%, 426px);
}

/* The accept page stands on its own (owner, 2026-10-05: "the footer is too
   high ... move the footer more down and center the content"): it fills the
   screen under the navbar with its sheet in the middle, so the footer starts
   below the fold. */
.asu-page--gate {
  align-items: center;
  box-sizing: border-box;
  min-height: calc(100vh - var(--nb-chrome-h, 72px));
  min-height: calc(100svh - var(--nb-chrome-h, 72px));
}

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

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

.asu-lead {
  margin: 10px 0 0;
  font-size: var(--nb-text-lg);
  line-height: 1.5;
  color: var(--nb-ink);
}

/* Continue with Google: outlined, the full column. */
.asu-page .asu-google {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 18px;
  box-sizing: border-box;
  width: 100%;
  height: 53px;
  margin-top: 34px;
  border: 1px solid var(--nb-border-strong);
  border-radius: var(--nb-r-md);
  background: var(--nb-paper);
  color: var(--nb-ink);
  font-size: var(--nb-text-base);
  font-weight: 600;
  text-decoration: none;
  transition: border-color 0.15s ease, background-color 0.15s ease;
}
.asu-page .asu-google:hover {
  border-color: var(--nb-ink);
  background: var(--nb-paper-raised);
  color: var(--nb-ink);
}
.asu-page .asu-google:focus-visible {
  outline: 2px solid var(--nb-blue);
  outline-offset: 3px;
}

/* "or continue with email" between two rules. */
.asu-or {
  display: flex;
  align-items: center;
  gap: 24px;
  margin: 26px 0 0;
  font-size: var(--nb-text-base);
  color: var(--nb-ink);
}
.asu-or::before,
.asu-or::after {
  content: "";
  flex: 1;
  height: 1px;
  background: var(--nb-border-strong);
}

.asu-form {
  margin-top: 22px;
}

.asu-field + .asu-field {
  margin-top: 24px;
}
.asu-field label {
  display: block;
  margin: 0 0 10px;
  font-size: var(--nb-text-base);
  font-weight: 600;
  color: var(--nb-ink);
}

/* The field: icon left, words after it, the eye on the right. */
.asu-control {
  position: relative;
  display: block;
}
.asu-icon {
  position: absolute;
  top: 50%;
  left: 16px;
  transform: translateY(-50%);
  color: var(--nb-ink);
  pointer-events: none;
}
.asu-page .asu-control input {
  box-sizing: border-box;
  width: 100%;
  height: 50px;
  margin: 0;
  padding: 0 16px 0 56px;
  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-base);
  box-shadow: none;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.asu-page .asu-control input[type="password"],
.asu-page .asu-control input[data-ui-controls],
.asu-page .asu-control:has(.asu-eye) input {
  padding-right: 56px;
}
.asu-page .asu-control input::placeholder {
  color: var(--nb-ink);
  opacity: 0.75;
}
.asu-page .asu-control input:hover {
  border-color: var(--nb-ink);
}
.asu-page .asu-control input:focus {
  outline: none;
  border-color: var(--nb-blue);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--nb-blue) 28%, transparent);
}
.asu-page .asu-control.has-error input {
  border-color: var(--nb-error);
}

/* The show-password eye (auth-login-eye.js shows it and swaps the icons by
   data-ui-pressed): a 44px target inside the field's right end. */
.asu-page .asu-eye {
  position: absolute;
  top: 50%;
  right: 3px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: var(--nb-r-sm);
  background: transparent;
  color: var(--nb-ink);
  cursor: pointer;
  transform: translateY(-50%);
  box-shadow: none;
}
.asu-page .asu-eye[hidden] {
  display: none;
}
.asu-page .asu-eye:hover {
  background: transparent;
  color: var(--nb-blue);
}
.asu-page .asu-eye:focus-visible {
  outline: 2px solid var(--nb-blue);
  outline-offset: -2px;
}
.asu-page .asu-eye .lg-eye-on,
.asu-page .asu-eye[data-ui-pressed="true"] .lg-eye-off {
  display: none;
}
.asu-page .asu-eye[data-ui-pressed="true"] .lg-eye-on {
  display: block;
}

/* The three live checks (password-checks.js): idle, met, unmet. */
.asu-checks {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 14px;
  margin: 12px 0 0;
  padding: 0;
  list-style: none;
}
.asu-check {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 3px 10px 3px 2px;
  border: 1px solid transparent;
  border-radius: var(--nb-r-pill);
  font-size: var(--nb-text-sm);
  line-height: 1.3;
  color: var(--nb-ink);
  transition: background-color 0.2s ease, border-color 0.2s ease;
}
.asu-tick {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  width: 19px;
  height: 19px;
  border: 1.5px solid var(--nb-blue);
  border-radius: 50%;
  color: var(--nb-blue);
  transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}
.asu-check[data-state="met"] {
  border-color: color-mix(in srgb, var(--nb-success) 35%, transparent);
  background: color-mix(in srgb, var(--nb-success) 12%, transparent);
}
.asu-check[data-state="met"] .asu-tick {
  border-color: var(--nb-success);
  background: var(--nb-success);
  color: var(--nb-paper);
}
.asu-check[data-state="unmet"] .asu-tick {
  border-color: var(--nb-red);
  color: transparent;
}

/* The confirm field's verdict, on a reserved line so the button never
   jumps when it appears. */
.asu-match {
  min-height: 20px;
  margin: 8px 0 0;
  font-size: var(--nb-text-sm);
  font-weight: 600;
  line-height: 20px;
}
.asu-match[data-state="matched"] {
  color: var(--nb-success);
}
.asu-match[data-state="mismatched"] {
  color: var(--nb-error);
}

.asu-error {
  margin: 8px 0 0;
  font-size: var(--nb-text-sm);
  line-height: 1.4;
  color: var(--nb-error);
}
.asu-error--block {
  margin: 0 0 18px;
}

/* The two required boxes (Terms of Service, Privacy Policy), unticked
   (Website list v1.0, item 1). A fieldset with its own space above, after
   the password fields: two plain rows, the native box in the student blue,
   the whole row a target. */
.asu-page .asu-boxes {
  display: grid;
  gap: 2px;
  min-width: 0;
  margin: 14px 0 6px;
  padding: 0;
  border: 0;
}
.asu-box {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 6px 0;
}
.asu-page .asu-box input[type="checkbox"] {
  flex: none;
  width: 20px;
  height: 20px;
  margin: 2px 0 0;
  accent-color: var(--nb-blue);
  cursor: pointer;
}
.asu-page .asu-box input[type="checkbox"]:focus-visible {
  outline: 2px solid var(--nb-blue);
  outline-offset: 2px;
}
.asu-page .asu-box label {
  font-family: var(--nb-sans);
  font-weight: 500;
  font-size: var(--nb-text-base);
  line-height: 1.45;
  color: var(--nb-ink);
  cursor: pointer;
}
.asu-box a {
  color: var(--nb-blue);
  font-weight: 600;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}
.asu-box a:hover {
  color: var(--nb-blue-strong);
  text-decoration-thickness: 2px;
}
.asu-page .asu-box.has-error input[type="checkbox"] {
  outline: 2px solid var(--nb-error);
  outline-offset: 2px;
}
.asu-boxes .asu-error {
  margin: 0 0 6px 32px;
}

/* The accept page's way out: a quiet text button in the log in line's place. */
.asu-logout {
  min-height: 44px;
  padding: 0 4px;
  border: 0;
  background: none;
  color: var(--nb-blue);
  font: inherit;
  font-weight: 600;
  cursor: pointer;
}
.asu-logout:hover {
  text-decoration: underline;
  text-underline-offset: 3px;
}
.asu-logout:focus-visible {
  outline: 2px solid var(--nb-blue);
  outline-offset: 2px;
  border-radius: var(--nb-r-sm);
}

/* The under-13 notice (accounts.onboarding, Terms clause 2): one calm
   column, a quiet mark, the sentence as the title, what happened, and the
   way home. Centred, like the other one-message account states. */
.asu-col--notice {
  text-align: center;
}
.asu-notice-mark {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 56px;
  margin: 0 0 22px;
  border: 1px solid var(--nb-border);
  border-radius: 50%;
  background: var(--nb-paper-raised);
  color: var(--nb-ink);
}
.asu-col--notice .asu-title {
  margin-top: 0;
  font-size: var(--nb-text-2xl);
  line-height: 1.25;
}
.asu-col--notice .asu-lead {
  margin-top: 12px;
}
.asu-page a.asu-btn {
  margin-top: 28px;
  text-decoration: none;
}

/* Create account: the one blue action. */
.asu-page .asu-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  width: 100%;
  height: 52px;
  margin-top: 12px;
  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-md);
  font-weight: 600;
  cursor: pointer;
  transition: background-color 0.15s ease, transform 0.15s ease;
}
.asu-page .asu-btn svg {
  transition: transform 0.15s ease;
}
.asu-page .asu-btn:hover {
  background: var(--nb-blue-strong);
}
.asu-page .asu-btn:hover svg {
  transform: translateX(2px);
}
.asu-page .asu-btn:active {
  transform: translateY(1px);
}
.asu-page .asu-btn:focus-visible {
  outline: 2px solid var(--nb-blue);
  outline-offset: 3px;
}

.asu-rule {
  height: 0;
  margin: 28px 0 0;
  border: 0;
  border-top: 1px solid var(--nb-border-strong);
}

.asu-login {
  margin: 18px 0 0;
  font-size: var(--nb-text-base);
  line-height: 1.5;
  text-align: center;
  color: var(--nb-ink);
}
.asu-legal {
  margin: 20px -24px 0;
  font-size: var(--nb-text-sm);
  line-height: 1.55;
  text-align: center;
  color: var(--nb-ink);
  text-wrap: balance;
}
.asu-login a,
.asu-legal a {
  /* A 44px tap target without moving the line. */
  display: inline-block;
  margin: -12px 0;
  padding: 12px 0;
  color: var(--nb-blue);
  font-weight: 600;
  text-decoration: none;
}
/* "Log in" is short: a little side room makes its target 44px wide too.
   The legal links keep none, so the full stop sits right after them. */
.asu-login a {
  padding: 12px 4px;
}
.asu-login a:hover,
.asu-legal a:hover {
  text-decoration: underline;
  text-underline-offset: 3px;
}

.asu-sr {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

@media (max-width: 480px) {
  .asu-page {
    padding: 40px 16px 40px;
  }
  .asu-title {
    font-size: var(--nb-text-2xl);
  }
  .asu-legal {
    margin: 20px 0 0;
  }
  .asu-or {
    gap: 14px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .asu-page .asu-google,
  .asu-page .asu-control input,
  .asu-check,
  .asu-tick,
  .asu-page .asu-btn,
  .asu-page .asu-btn svg {
    transition: none;
  }
}