/*
  The two login pages (2026-09-25; moved out of fastmath.css). One card: a
  chalkboard panel with the brand's voice on the left, the form on the right.
  Student and Teacher are tabs across the top of the form, but each tab is its
  own page, so each keeps its own role check.
*/

.auth-shell {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: calc(100vh - 150px);
}

.auth-card {
  display: grid;
  grid-template-columns: 420px minmax(0, 1fr);
  width: min(1000px, 100%);
  overflow: hidden;
  border: 3px solid var(--ink);
  border-radius: 26px;
  background: var(--paper);
  box-shadow: 0 10px 0 var(--ink);
}

/* The chalkboard, as on the landing page. Decoration only. */
.auth-board {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 32px;
  padding: 40px;
  border-right: 3px solid var(--ink);
  background: #1f1d18;
  color: var(--cream);
}

.auth-board-tag {
  font-family: "Bungee", var(--font-label);
  font-size: 0.75rem;
  color: var(--yellow);
}

.auth-board-sums {
  display: flex;
  flex-direction: column;
  gap: 16px;
  font-family: var(--font-hand);
  font-size: 1.8rem;
  line-height: 1.2;
  color: rgba(255, 246, 218, 0.55);
}

.auth-board-big {
  font-size: 3.2rem;
  line-height: 1;
  color: var(--yellow);
}

.auth-board-gap {
  padding: 0 6px;
  border: 2px dashed var(--yellow);
  border-radius: 8px;
}

.auth-board p {
  margin: 0;
  font-family: var(--font-heading);
  font-size: 1.2rem;
  line-height: 1.35;
}

.auth-form {
  display: flex;
  flex-direction: column;
  gap: 18px;
  padding: 40px 48px;
}

.auth-tabs {
  display: flex;
  align-self: flex-start;
  gap: 4px;
  padding: 4px;
  border: 2px solid var(--ink);
  border-radius: 999px;
  background: var(--cream);
  font-family: var(--font-heading);
  font-size: 0.95rem;
}

.auth-tabs a {
  display: inline-flex;
  align-items: center;
  min-height: 40px;
  padding: 0 18px;
  border-radius: 999px;
}

.auth-tabs a:hover {
  background: var(--yellow-soft);
}

.auth-tabs a[aria-current="page"] {
  background: var(--ink);
  color: var(--yellow);
}

.auth-form h1 {
  margin: 4px 0 0;
  font-size: 3rem;
  line-height: 1;
}

.auth-lede {
  margin: -6px 0 0;
  color: var(--ink-soft);
  font-size: 1.06rem;
  line-height: 1.5;
}

.field {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.field label {
  font-weight: 600;
  font-size: 0.95rem;
}

.field input {
  width: 100%;
  height: 52px;
  padding: 0 16px;
  border: 2px solid var(--ink);
  border-radius: 12px;
  background: var(--paper);
  font-family: inherit;
  font-size: 1.06rem;
  font-weight: 500;
  color: var(--ink);
}

.field input:focus {
  outline: none;
  border-width: 3px;
  box-shadow: 0 0 0 4px var(--yellow-soft);
}

/* Password visibility toggle (2026-08-21) — the button sits inside the field,
   right-aligned, over the input's own padding. */
.password-field {
  position: relative;
}

.password-field input {
  padding-right: 84px;
}

.password-toggle {
  position: absolute;
  top: 50%;
  right: 6px;
  transform: translateY(-50%);
  min-height: 40px;
  padding: 0 14px;
  border: 2px solid var(--ink);
  border-radius: 9px;
  background: var(--yellow-soft);
  color: var(--ink);
  font-family: var(--font-heading);
  font-size: 0.85rem;
  cursor: pointer;
}

.password-toggle:hover {
  background: var(--yellow);
}

/* Full width, but otherwise the same tile as every other button. */
.auth-submit {
  width: 100%;
  min-height: 56px;
  margin-top: 4px;
  font-size: 0.95rem;
  cursor: pointer;
}

/* An ink-bordered box that says what to do next, not a pale pink band. */
.auth-error {
  display: none;
  margin: 0;
  padding: 14px 16px;
  border: 2px solid var(--ink);
  border-radius: 14px;
  background: var(--danger);
  font-weight: 600;
  line-height: 1.4;
}

.auth-error.visible {
  display: block;
}

.auth-help {
  margin: 4px 0 0;
  color: var(--ink-soft);
  font-size: 0.92rem;
  line-height: 1.5;
}

.auth-help a {
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 3px;
}

@media (max-width: 860px) {
  .auth-shell {
    min-height: 0;
  }

  .auth-card {
    grid-template-columns: 1fr;
  }

  /* On a narrow screen the board would push the form below the fold; the form
     is the job, so the board goes. */
  .auth-board {
    display: none;
  }
}

@media (max-width: 560px) {
  .auth-card {
    border-radius: 22px;
  }

  .auth-form {
    padding: 24px 20px;
  }

  .auth-tabs {
    align-self: stretch;
  }

  .auth-tabs a {
    flex: 1;
    justify-content: center;
  }

  .auth-form h1 {
    font-size: 2.6rem;
  }
}

/* style.css stacks .site-header on narrow screens for the landing page's
   longer nav; here there is one link, so it stays on the brand's row. */
@media (max-width: 860px) {
  .site-header {
    flex-direction: row;
    align-items: center;
    margin-bottom: 24px;
  }
}