/* ============================================================
   Balance Farm — auth modal (login / sign up)
   Same shell as booking + enquiry (.bkflow), so it grows out of
   the nav and shares the header, backdrop and surface.

   Panel geometry comes from .bkflow--sheet in modal-shell.css;
   this file is only the pane content. Title 84px / 80%, and every
   block owns 20px of padding.
   ============================================================ */


.auth__pane { display: none; }
.auth__pane.is-active {
  display: block;
  animation: bk-pane 340ms var(--e-move) both;
}

/* ---- title ---- */
.auth__title {
  padding: var(--s-5);
  font-size: clamp(var(--t-2xl), 8vw, var(--t-6xl));
  font-weight: var(--w-medium);
  line-height: 80%;
  letter-spacing: var(--t-6xl-track);
}

/* the title carries the pane's own padding, so the subtitle sits beneath it
   in its own 20px block rather than being pulled up against it */
.auth__sub {
  padding: var(--s-2) var(--s-5) var(--s-3);
  font-size: var(--t-xs);
  font-weight: var(--w-medium);
  letter-spacing: var(--t-xs-track);
  line-height: 1.45;
  color: var(--color-ink);
  max-width: 42ch;
}

/* ---- fields + forgot password share one container ---- */
.auth__fields {
  display: flex;
  flex-direction: column;
  gap: var(--s-4);
  padding: var(--s-5);
}
.auth__row { display: flex; gap: var(--s-4); }
.auth__row > .c-field { flex: 1 1 0; min-width: 0; }
.auth__forgot {
  align-self: flex-start;
  /* flush with the field's underline above it, and close beneath it */
  padding: var(--s-2) 0 0;
  margin-top: calc(var(--s-4) * -1 + var(--s-2));
  background: none;
  border: none;
  font-family: inherit;
  font-size: var(--t-xs);
  font-weight: var(--w-medium);
  letter-spacing: var(--t-xs-track);
  color: var(--color-ink);
  cursor: pointer;
  transition: opacity var(--d-fast) ease;
}
@media (hover: hover) {
  .auth__forgot:hover { opacity: 0.55; }
}

/* ---- actions ---- */
.auth__actions {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--s-3);
  padding: var(--s-5);
}
/* composes .c-pill, taking the accent fill for the primary action */
.auth__submit {
  padding: 16px 32px;
  height: auto;
  background: var(--brand);
  color: var(--paper);
}
@media (hover: hover) {
  .auth__submit:hover { background: var(--accent-hover); }
}
.auth__switch {
  padding: 16px 32px;                /* same box as the primary */
  background: none;
  border: none;
  font-family: inherit;
  font-size: var(--t-sm);
  font-weight: var(--w-medium);
  letter-spacing: var(--t-sm-track);
  color: var(--color-ink);
  cursor: pointer;
  transition: opacity var(--d-fast) ease;
}
@media (hover: hover) {
  .auth__switch:hover { opacity: 0.55; }
}

/* ---- sent / status ---- */
.auth__status {
  padding: 0 20px 20px;
  font-size: var(--t-xs);
  font-weight: var(--w-medium);
  letter-spacing: var(--t-xs-track);
  line-height: 1.4;
  text-align: center;
  color: var(--color-ink);
}
.auth__status[hidden] { display: none; }