/* auth area styles. Owned by W2-AUTH; scope every rule under .ft-area-auth and use var(--ft-*) tokens only.
   AuthenticationLayout: brand + form column on the left, accent art panel on the right (hidden below 900px). */

.ft-area-auth .ft-auth {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: var(--ft-space-4);
  min-height: 100vh;
  padding: var(--ft-space-4);
}

/* ---------- Left column ---------- */
.ft-area-auth .ft-auth__main { display: flex; flex-direction: column; min-width: 0; padding: var(--ft-space-4) var(--ft-space-6); }

.ft-area-auth .ft-auth__brand {
  display: flex;
  align-items: center;
  gap: var(--ft-space-3);
  font-size: var(--ft-text-2xl);
  font-weight: var(--ft-weight-extrabold);
  letter-spacing: var(--ft-tracking-tight);
  line-height: var(--ft-leading-tight);
}

.ft-area-auth .ft-auth__logo {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 10px;
  background: transparent;
}

.ft-area-auth .ft-auth__logo img { width: 28px; height: 28px; display: block; }

.ft-area-auth .ft-auth__body {
  display: flex;
  flex-direction: column;
  gap: var(--ft-space-5);
  width: 100%;
  max-width: 360px;
  margin: auto;
  padding-block: var(--ft-space-10);
}

.ft-area-auth .ft-auth__head { display: flex; flex-direction: column; align-items: flex-start; gap: var(--ft-space-2); }
.ft-area-auth .ft-auth__head .ft-icon-tile { margin-bottom: var(--ft-space-2); }

.ft-area-auth .ft-auth__title {
  margin: 0;
  font-size: var(--ft-text-display);
  font-weight: var(--ft-weight-extrabold);
  letter-spacing: var(--ft-tracking-tighter);
  line-height: var(--ft-leading-tight);
}

/* Blazor's FocusOnNavigate moves focus to the h1 for screen readers; it is not a control, so no ring */
.ft-area-auth .ft-auth__title:focus { outline: none; }

.ft-area-auth .ft-auth__lead { margin: 0; color: var(--ft-text-muted); line-height: var(--ft-leading-normal); }
.ft-area-auth .ft-auth__subtitle { margin: var(--ft-space-2) 0 0; font-size: var(--ft-text-lg); font-weight: var(--ft-weight-bold); }
.ft-area-auth .ft-auth__form { display: flex; flex-direction: column; gap: var(--ft-space-4); margin: 0; }

/* Inputs get the same solid focus outline as every other control, not only the soft ring */
.ft-area-auth .ft-input:focus {
  outline: var(--ft-focus-width) solid var(--ft-focus);
  outline-offset: var(--ft-focus-offset);
  box-shadow: none;
}

/* "Forgot it?" comes after the password in tab order but sits on the label line, right-aligned.
   Same 44px hit area as .ft-field__label-action: the box is centred on the ~20px label line. */
.ft-area-auth .ft-auth__password { position: relative; }

.ft-area-auth .ft-auth__forgot {
  position: absolute;
  top: -12px;
  right: -10px;
  display: inline-flex;
  align-items: center;
  min-height: var(--ft-control-md);
  padding: 0 10px;
  border-radius: var(--ft-radius-sm);
  color: var(--ft-accent-text);
  font-size: var(--ft-text-sm);
  font-weight: var(--ft-weight-bold);
  text-decoration: none;
}

.ft-area-auth .ft-auth__forgot:hover { text-decoration: underline; }

/* Native checkbox; the whole label is the 44px hit row */
.ft-area-auth .ft-auth__check {
  display: inline-flex;
  align-items: center;
  gap: var(--ft-space-3);
  width: fit-content;
  min-height: var(--ft-control-md);
  padding-inline-end: var(--ft-space-2);
  font-size: var(--ft-text-sm);
  font-weight: var(--ft-weight-semibold);
  cursor: pointer;
}

.ft-area-auth .ft-auth__check input { width: 18px; height: 18px; margin: 0; accent-color: var(--ft-accent-strong); cursor: pointer; }
.ft-area-auth .ft-auth__check input:focus-visible { outline: var(--ft-focus-width) solid var(--ft-focus); outline-offset: var(--ft-focus-offset); }

.ft-area-auth .ft-auth__divider { display: flex; align-items: center; gap: var(--ft-space-3); color: var(--ft-text-muted); font-size: var(--ft-text-xs); }
.ft-area-auth .ft-auth__divider::before,
.ft-area-auth .ft-auth__divider::after { content: ""; flex: 1; height: 1px; background: var(--ft-border); }

.ft-area-auth .ft-auth__footer { margin: 0; color: var(--ft-text-muted); font-size: var(--ft-text-sm); text-align: center; }

.ft-area-auth .ft-auth__footer .ft-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: var(--ft-control-md);
  padding-inline: var(--ft-space-1);
}

/* "Back to sign in" lines up with the left-aligned heading and form; the icon sits on the text edge */
.ft-area-auth .ft-auth__footer--start { text-align: start; }
.ft-area-auth .ft-auth__footer--start .ft-auth__back { margin-inline-start: calc(-1 * var(--ft-space-1)); }
.ft-area-auth .ft-auth__back .mud-icon-root { font-size: 18px; }

/* Links inside alert text keep the alert colour, underlined so they read as links without relying on colour */
.ft-area-auth .ft-auth__inline-link { color: inherit; font-weight: var(--ft-weight-bold); text-decoration: underline; }

/* Filled buttons: a ring in the page's ink colour (dark in light mode, white in dark mode), not the blue of the fill.
   Specificity has to beat the global ring rule, whose :is(..., [tabindex]:not(...)) list counts as 0,4,0. */
.ft-root.ft-area-auth .ft-btn:is(.ft-btn--primary, .ft-btn--danger):focus-visible { outline-color: var(--ft-text); }

/* StatusMessage: colours from .ft-tone--danger / --success; always icon + text, never colour alone */
.ft-area-auth .ft-auth__alert {
  display: flex;
  align-items: flex-start;
  gap: var(--ft-space-3);
  padding: var(--ft-space-3) 14px;
  border-radius: var(--ft-radius-md);
  background: var(--_tbg);
  color: var(--_tfg);
  font-size: var(--ft-text-sm);
  font-weight: var(--ft-weight-semibold);
  line-height: var(--ft-leading-snug);
}

.ft-area-auth .ft-auth__alert .mud-icon-root { flex: none; font-size: 20px; }

.ft-area-auth .ft-list-row__trailing form { margin: 0; }

.ft-area-auth .ft-auth__redirect { margin: 0; padding: var(--ft-space-6); color: var(--ft-text-muted); }

/* ---------- Right accent panel ---------- */
.ft-area-auth .ft-auth__aside {
  display: flex;
  flex-direction: column;
  gap: var(--ft-space-8);
  min-height: calc(100vh - 2 * var(--ft-space-4));
  padding: var(--ft-space-12);
  overflow: hidden;
  border-radius: var(--ft-radius-xl);
  background: var(--ft-accent);
  color: var(--ft-accent-ink);
}

/* The headline sits at the top on every panel; the art below takes the remaining space */
.ft-area-auth .ft-auth__aside--enroll .ft-auth__steps { margin-block: auto; }

.ft-area-auth .ft-auth__headline {
  max-width: 11em;
  margin: 0;
  font-size: 40px;
  font-weight: var(--ft-weight-extrabold);
  line-height: 1.08;
  letter-spacing: var(--ft-tracking-tighter);
}

/* Sign in: an overlapping cluster of shelf tags in a fixed box anchored to the bottom of the panel, so the
   composition is identical at every width (it is scaled, never re-laid out, on narrower panels) */
.ft-area-auth .ft-auth__tags {
  position: relative;
  flex: none;
  align-self: center;
  width: 460px;
  height: 360px;
  margin-top: auto;
  transform-origin: bottom center;
}

.ft-area-auth .ft-auth__tags .ft-shelf-tag { position: absolute; min-width: 210px; }
/* Staggered, not stacked: each tag keeps clear of the others (tags are ~210x110, banner one ~125 tall) */
.ft-area-auth .ft-auth__tags .ft-shelf-tag:nth-child(1) { top: 0; left: 0; }
.ft-area-auth .ft-auth__tags .ft-shelf-tag:nth-child(2) { top: 64px; right: 0; }
.ft-area-auth .ft-auth__tags .ft-shelf-tag:nth-child(3) { top: 232px; left: 96px; }

/* Create account: the real enrolment path as three numbered cards */
.ft-area-auth .ft-auth__steps {
  display: flex;
  flex-direction: column;
  gap: var(--ft-space-3);
  max-width: 460px;
  margin: 0;
  padding: 0;
  list-style: none;
  counter-reset: ft-auth-step;
}

.ft-area-auth .ft-auth__steps li {
  display: grid;
  grid-template-columns: 36px minmax(0, 1fr);
  align-items: center;
  column-gap: var(--ft-space-3);
  padding: 14px var(--ft-space-4);
  border-radius: var(--ft-radius-lg);
  background: var(--ft-surface);
  color: var(--ft-text);
  box-shadow: var(--ft-elevation-1);
  counter-increment: ft-auth-step;
}

.ft-area-auth .ft-auth__steps li::before {
  content: counter(ft-auth-step);
  display: grid;
  grid-row: span 2;
  place-items: center;
  width: 36px;
  height: 36px;
  border-radius: var(--ft-radius-pill);
  background: var(--ft-accent-strong);
  color: var(--ft-accent-strong-fg);
  font-weight: var(--ft-weight-extrabold);
}

.ft-area-auth .ft-auth__steps strong { font-weight: var(--ft-weight-bold); }
.ft-area-auth .ft-auth__steps span { color: var(--ft-text-muted); font-size: var(--ft-text-sm); }

/* The same steps inline on the enrol page, only once the art panel is hidden (see the 900px query) */
.ft-area-auth .ft-auth__steps--inline { display: none; max-width: none; }
.ft-area-auth .ft-auth__steps--inline li { border: 1px solid var(--ft-border); box-shadow: none; }

/* Password recovery: key in a ringed disc with a success tick */
.ft-area-auth .ft-auth__key {
  position: relative;
  display: grid;
  place-items: center;
  width: 240px;
  height: 240px;
  margin: auto auto var(--ft-space-8);
  border-radius: var(--ft-radius-pill);
  background: var(--ft-surface);
  color: var(--ft-accent-text);
  box-shadow: 0 0 0 32px color-mix(in srgb, var(--ft-accent-ink) 12%, transparent);
}

.ft-area-auth .ft-auth__key > .mud-icon-root { font-size: 104px; }

.ft-area-auth .ft-auth__key-check {
  position: absolute;
  top: 6px;
  right: 6px;
  display: grid;
  place-items: center;
  width: 60px;
  height: 60px;
  border-radius: var(--ft-radius-pill);
  background: var(--ft-success-solid);
  color: var(--ft-surface);
  box-shadow: 0 0 0 6px var(--ft-accent);
}

.ft-area-auth .ft-auth__key-check .mud-icon-root { font-size: 34px; }

/* ---------- Narrower screens ---------- */
@media (max-width: 1200px) {
  .ft-area-auth .ft-auth__aside { padding: var(--ft-space-10); }
  .ft-area-auth .ft-auth__headline { font-size: 34px; }
  .ft-area-auth .ft-auth__tags { scale: 0.76; }
  .ft-area-auth .ft-auth__key { width: 200px; height: 200px; }
}

/* One column, no art */
@media (max-width: 899.98px) {
  .ft-area-auth .ft-auth { grid-template-columns: minmax(0, 1fr); padding: 0; }
  .ft-area-auth .ft-auth__aside { display: none; }
  .ft-area-auth .ft-auth__steps--inline { display: flex; }
  .ft-area-auth .ft-auth__main { padding: var(--ft-space-5) var(--ft-space-4); }
  .ft-area-auth .ft-auth__body { margin: 0 auto; padding-block: var(--ft-space-10) var(--ft-space-6); }
}

@media (max-width: 600px) {
  .ft-area-auth .ft-auth__title { font-size: var(--ft-text-3xl); }
  /* Phones: the whole remember-me row is the tap target, full width and at least 44px tall */
  .ft-area-auth .ft-auth__check { width: 100%; min-height: max(44px, var(--ft-control-md)); }
}

/* Legal footer under the form column */
.ft-area-auth .ft-legal-footer { margin-top: auto; padding-block: var(--ft-space-4) 0; }