/* Frosted glass card on --grad-0deg. The SVG pattern is an <img> in
   `.auth-bg` so it can cover the viewport instead of a CSS background. */
.auth {
  position: relative;
  min-height: 100vh;
  min-height: 100dvh;
  padding: 40px 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  background: var(--grad-0deg);
}
body:has(.site-header) .auth { padding-top: 104px; }
.auth-bg {
  position: absolute;
  inset: 0;
  pointer-events: none;
  overflow: hidden;
  z-index: 0;
}
.auth-bg img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
	opacity: .4;
}
.auth > :not(.auth-bg) { position: relative; z-index: 1; }


.auth-card {
	width: 100%;
	max-width: 500px;
	padding: clamp(26px, 3.4vw, 40px) clamp(24px, 3.4vw, 40px);
	border-radius: var(--radius-2xl);
	background: var(--grad-glass);
	border: 2px solid var(--white);
	-webkit-backdrop-filter: blur(6px);
	backdrop-filter: blur(6px);
}

/* Sign-up carries more fields than login, so it gets a wider card and the
   name pair sits side by side comfortably. */
.page-register .auth-card { max-width: 620px; }

/* The logotype is navy artwork, so it needs a light plate to sit on rather
   than the gradient itself. */
.auth-brand {
  text-align: center;
  margin-bottom: clamp(16px, 2.6vh, 24px);
}
.auth-brand img { width: 324px; max-width: 82%; height: auto; object-fit: contain; margin: 0 auto; }

.auth-title {
  text-align: center;
  font-size: var(--text-lg);
  font-weight: var(--weight-semibold);
  color: var(--navy);
  margin: 0 0 clamp(14px, 2.2vh, 22px);
}

.auth-divider {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: clamp(14px, 2.2vh, 22px);
}
.auth-divider::before,
.auth-divider::after {
  content: "";
  flex: 1;
  height: 1px;
  background: rgba(var(--navy-rgb), .16);
}
.auth-divider span { font-size: 13px; color: var(--muted); text-transform: uppercase; letter-spacing: .06em; }


.auth-social {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  margin-bottom: clamp(14px, 2.4vh, 24px);
}
.auth-social a {
  width: 50px;
  height: 50px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: rgba(var(--white-rgb), .9);
  box-shadow: var(--shadow-sm);
  transition: transform var(--duration-base) ease, box-shadow var(--duration-base) ease;
}
.auth-social a:hover { transform: translateY(-2px); box-shadow: var(--shadow-md); }
.auth-social img { width: 26px; height: 26px; object-fit: contain; }

.auth-providers {
  display: flex;
  align-items: flex-start;
  justify-content: center;
  gap: 28px;
  margin-bottom: clamp(14px, 2.4vh, 24px);
}
.auth-providers a {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  min-width: 56px;
  color: var(--muted);
  text-decoration: none;
}
.auth-provider-icon {
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-pill);
  background: var(--white);
  box-shadow: var(--shadow-sm);
  transition: transform var(--duration-base) ease, box-shadow var(--duration-base) ease;
}
.auth-providers a:hover .auth-provider-icon { transform: translateY(-2px); box-shadow: var(--shadow-md); }
.auth-provider-icon img { width: 18px; height: 18px; object-fit: contain; }

.auth-card .form-floating > .form-control {
  height: 56px;
  padding: 20px 20px 6px;
  font-size: var(--text-base);
  color: var(--navy);
  border: 0;
  border-radius: var(--radius-md);
  background: rgba(var(--white-rgb), .6);
  box-shadow: none;
}
.auth-card .form-floating > .form-control:focus {
  box-shadow: 0 0 0 3px rgba(var(--navy-rgb), .16);
}

/* The label floats on `transform` alone — the one property Bootstrap
   transitions (with opacity). Animating font-size or align-items instead
   cannot tween, so the label jumps between states; that was the flicker.
   Height is 100% of the field, so `display: flex` centres the resting
   label without needing padding maths. */
.auth-card .form-floating > label:not(.error) {
  display: flex;
  align-items: center;
  padding: 0 24px;
  font-size: var(--text-base);
  color: var(--muted);
  border: 0;
  transform-origin: 0 50%;
}

.auth-card .form-floating > .form-control:focus ~ label:not(.error),
.auth-card .form-floating > .form-control:not(:placeholder-shown) ~ label:not(.error) {
  color: var(--navy);
  opacity: 1;
  /* scale replaces a font-size change; translateY lifts it clear of the
     text. Both are transform components, so the move is one smooth tween. */
  transform: scale(.72) translateY(-15px);
}
.auth-card .form-floating > .form-control:focus ~ label:not(.error)::after,
.auth-card .form-floating > .form-control:not(:placeholder-shown) ~ label:not(.error)::after {
  background: transparent;
}

.auth-card .row.g-2 > [class*="col-"] {
  margin-bottom: 2px;
}
.auth-card .form-select + label.error,
.auth-card [class*="col-"] > label.error {
  margin: 2px 0 10px;
}
.auth-card .form-select {
  width: 100%;
  height: 56px;
  margin-bottom: clamp(8px, 1.2vh, 12px);
  padding: 0 40px 0 24px;
  font-size: var(--text-base);
  color: var(--navy);
  border: 0;
  border-radius: var(--radius-md);
  background-color: rgba(var(--white-rgb), .72);
  box-shadow: none;
}
.auth-card .form-select:focus {
  box-shadow: 0 0 0 3px rgba(var(--navy-rgb), .16);
}


.auth-terms {
  font-size: 13px;
  line-height: 1.5;
  color: var(--body);
  text-align: left;
  margin: 4px 0 clamp(12px, 2vh, 18px);
}
.auth-terms a { color: var(--navy); font-weight: var(--weight-semibold); text-decoration: underline; }
.auth-terms-foot { margin-top: clamp(14px, 2.2vh, 22px); margin-bottom: 0; font-weight: var(--weight-medium); text-align: center; }


.auth-captcha {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  margin-bottom: clamp(12px, 2vh, 18px);
}
.auth-captcha .alert { font-size: 13px; }


.auth-remember {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: clamp(12px, 2vh, 20px);
	padding: 0;
  font-size: var(--text-base);
  color: var(--navy);
  cursor: pointer;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
}
.auth-remember .form-check-input {
  width: 24px;
  height: 24px;
  margin: 0;
  border-radius: 7px;
  background-color: rgba(var(--white-rgb), .85);
  border: 1px solid rgba(var(--navy-rgb), .2);
  box-shadow: var(--shadow-sm);
  flex: 0 0 auto;
}
.auth-remember .form-check-input:checked {
  background-color: var(--teal);
  border-color: var(--teal);
}
.auth-remember .form-check-label { cursor: pointer; }


.auth-actions { display: flex; flex-direction: column; gap: 8px; }
.auth-actions .btn {
  width: 100%;
  letter-spacing: .12em;
  text-transform: uppercase;
  font-size: 14px;
  padding: 16px;
  border-radius: 40px;
}

.auth-forgot {
  display: block;
  text-align: center;
  margin-top: clamp(12px, 2vh, 20px);
  font-size: 14px;
  color: var(--navy);
}
.auth-forgot:hover { color: var(--navy-dark); }

/* On the gradient the plain red disappears, so errors get their own chip. */
.auth-error {
  display: block;
  margin-bottom: 10px;
  padding: 8px 14px;
  border-radius: var(--radius-md);
  background: rgba(var(--white-rgb), .94);
  color: var(--danger);
  font-size: 14px;
  font-weight: var(--weight-medium);
  text-align: center;
}
.auth-error:empty { margin: 0; padding: 0; background: none; }
.signup > .auth-error { margin-bottom: 24px; }


/* SIGN UP — account-type chooser. Scoped to .auth: <section class="signup">
   on live-lessons is a different block and must not inherit this width cap. */
.auth .signup { width: 100%; max-width: 900px; }

.signup-card {
  position: relative;
  height: 100%;
	width: 100%;
	padding: clamp(26px, 3.4vw, 40px) clamp(24px, 3.4vw, 40px);
	border-radius: var(--radius-2xl);
	background: var(--grad-glass);
	border: 2px solid var(--white);
	box-shadow: var(--shadow-lg);
	-webkit-backdrop-filter: blur(6px);
	backdrop-filter: blur(6px);
  text-align: center;
  transition: transform var(--duration-base) ease, box-shadow var(--duration-base) ease;
}
.signup-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-lg), 0 30px 60px rgba(var(--navy-rgb), .14);
}

.signup-badge {
  width: 142px;
  height: 142px;
  margin: 0 auto 16px;
	padding: 20px;
  border-radius: 50%;
  background: linear-gradient(180deg, rgba(var(--white-rgb), .9), rgba(var(--white-rgb), .55));
  border: 1px solid rgba(var(--white-rgb), .7);
  box-shadow: var(--shadow-sm);
  display: flex;
  align-items: center;
  justify-content: center;
}
.signup-badge img {
	width: 100%;
	height: 100%;
	object-fit: contain;
}

.signup-card h2 {
	font-size: 24px;
	margin: 0 0 10px;
}
.signup-card h3 {
	font-weight: var(--weight-regular);
	font-size: 16px;
	color: var(--body);
	margin: 0 0 24px;
}


.signup-includes { margin-top: 22px; text-align: left; }
.signup-includes h4 { font-weight: var(--weight-semibold); font-size: var(--text-md); margin: 0 0 16px; }
.signup-includes ul { list-style: none; margin: 0; padding: 0; }
.signup-includes li {
  display: flex;
  align-items: center;
  gap: 16px;
  font-size: var(--text-base);
  color: var(--body);
  margin-bottom: 8px;
}
.signup-includes li img.tick { flex: 0 0 auto; width: 16px; height: 16px; }


#forgotModal .modal-content {
  padding: 40px 40px 32px;
  border-radius: var(--radius-xl);
  background: linear-gradient(160deg, rgba(var(--white-rgb), .96) 0%, rgba(var(--white-rgb), .9) 100%);
  border: 1px solid rgba(var(--white-rgb), .7);
  box-shadow: var(--shadow-lg);
}
#forgotModal .btn-close { position: absolute; top: 16px; right: 20px; }
#forgotModal .modal-brand { text-align: center; margin-bottom: 18px; }
#forgotModal .modal-brand img { width: 54px; height: 54px; margin: 0 auto; }
#forgotModal h4 { text-align: center; font-weight: var(--weight-semibold); font-size: var(--text-xl); margin: 8px 0 4px; }
#forgotModal p { text-align: center; font-size: 14px; color: var(--body); margin: 0 0 22px; }
#forgotModal .modal-backdrop { -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); }


@media (max-width: 991.98px) {
  .auth .signup { max-width: 460px; }
  .auth { min-height: 100vh; padding: 40px 20px; }
  body:has(.site-header) .auth { padding-top: 104px; }
}
@media (max-width: 575.98px) {
  .auth { padding: 32px 16px; }
  body:has(.site-header) .auth { padding-top: 92px; }
  .signup-card { padding: 36px 26px 38px; }
  /* narrow cards: let the strapline wrap rather than overflow */
  .signup-card h3 { white-space: normal; font-size: 14px; }
}

/* Touch targets. The checkbox stays 24px so it still looks like a checkbox;
   the label is what grows, and clicking it toggles the box either way, so the
   pair reaches 44px without the control itself looking oversized. The forgot
   link gets padding rather than height so the text does not move. */
@media (max-width: 767.98px) {
  .auth-remember { min-height: 44px; }
  .auth-remember .form-check-label { display: flex; align-items: center; min-height: 44px; }
  .auth-forgot { padding: 11px 0; }
}


@media (min-width: 992px) and (max-height: 700px) {
  .auth { min-height: 100vh; min-height: 100dvh; padding: 24px 24px 20px; }
  body:has(.site-header) .auth { padding-top: 104px; }
  .auth-social { margin-bottom: 24px; }
  .auth-social a { width: 44px; height: 44px; }
  .auth-brand { margin-bottom: 12px; }
  .auth-brand img { width: 324px; }
}


/* ==========================================================================
   Error pages (404 / 410 / 503 / 301)

   They reuse the auth frame — .auth, .auth-card and the .auth-bg artwork — so
   an error looks like the rest of the site. Only the pieces the sign-up card
   has no equivalent for live here.
   ========================================================================== */
.err-card { max-width: 620px; text-align: center; }

.err-code {
  margin: 0;
  font-family: var(--font-display, inherit);
  font-size: clamp(64px, 11vw, 104px);
  font-weight: var(--weight-bold);
  line-height: 1;
  letter-spacing: -.02em;
  /* Not --grad-brand: it runs light-purple -> pale mint, which on the pale
     glass card reads as washed out. These are the same brand hues at the
     saturation the headings use. */
  background: linear-gradient(90deg, #6f5bd0 0%, #4aa9be 55%, #52c39b 100%);
  -webkit-background-clip: text;
          background-clip: text;
  color: transparent;
}

.err-title {
  margin: 8px 0 16px;
  font-size: var(--text-2xl);
  font-weight: var(--weight-semibold);
  color: var(--navy);
}

.err-line {
  margin: 0 0 10px;
  font-size: var(--text-base);
  line-height: 1.7;
  color: var(--body);
}

.err-btn { margin-top: 20px; }

.err-follow {
  margin: 32px 0 12px;
  font-size: var(--text-sm);
  font-weight: var(--weight-semibold);
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--muted);
}

.err-social { display: flex; justify-content: center; gap: 12px; }
.err-social a {
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: rgba(var(--white-rgb), .7);
  color: var(--navy);
  transition: transform var(--duration-slow) ease, background var(--duration-slow) ease;
}
.err-social a:hover { transform: translateY(-2px); background: var(--white); }
.err-social i { font-size: 18px; line-height: 1; }

@media (max-width: 575.98px) {
  .err-title { font-size: var(--text-xl); }
  .err-social a { width: 36px; height: 36px; }
}