.auth {
  position: relative;
  min-height: 100svh;
  display: flex;
  justify-content: flex-start;
  overflow: hidden;
  padding: 0;
}

.auth__bg {
  position: absolute;
  inset: 0;
  background: url("../images/login/bg_full.8ef2578af5f6.avif") no-repeat center center;
  background-size: cover;
  background-attachment: fixed;
  transform: scale(1.02);
  z-index: 0;
}

.auth__panel {
  position: relative;
  z-index: 2;
  align-self: center;
}

.auth-card {
  background-color: #fff;
  border-radius: 12px;
  box-shadow: 0 10px 34px rgba(0, 0, 0, 0.22);
  padding: 32px;
  width: 100%;
  max-width: 450px;
  backdrop-filter: blur(2px);
}

.auth-card__title {
  margin: 0;
  line-height: 28px;
  color: #4c4184;
  font-weight: 800;
  font-size: 18px;
}

.auth-card__subtitle {
  margin: 4px 0 0;
  line-height: 20px;
  font-weight: 400;
  font-size: 14px;
  color: var(--text-muted);
}

.auth-card__form {
  margin-top: 32px;
}

/* A form that is nothing but its submit button — confirm-email, and anything
   else where the card copy IS the form. The 32px the form and the button each
   claim are meant to clear a stack of fields; with no fields between them they
   compound into a 64px void under the subtitle. */
.auth-card__form--actions-only {
  margin-top: 24px;
}

.auth-card__form--actions-only .auth__submit {
  margin-top: 0;
}

.auth-field {
  position: relative;
  margin-bottom: 16px;
}

.auth-field__input {
  width: 100%;
  min-width: 180px;
  height: 40px;
  padding: 8px 16px;
  border: 1px solid #DDDEDF;
  border-radius: 4px;
  font-size: 16px;
  box-sizing: border-box;
  background: #fff;
  outline: none;
  color: #111;
}

.auth-field__label {
  position: absolute;
  left: 12px;
  top: 50%;
  transform: translateY(-50%);
  color: #6b7280;

  padding: 0 6px;
  background: #fff;
  pointer-events: none;
  transition: 140ms ease;
}

.auth-field__required {
  color: #8B3DFF;
  font-weight: 800;
}

.auth-field:focus-within .auth-field__input {
  border-color: #8B3DFF;
  box-shadow: 0 0 0 4px rgba(139, 61, 255, 0.14);
}

.auth-field:focus-within .auth-field__label,
.auth-field__input:not(:placeholder-shown)+.auth-field__label {
  top: 0;
  transform: translateY(-50%);
  font-size: 12px;
  color: #8B3DFF;
}

.auth-field__input:-webkit-autofill,
.auth-field__input:-webkit-autofill:hover,
.auth-field__input:-webkit-autofill:focus,
.auth-field__input:-webkit-autofill:active {
  -webkit-text-fill-color: #111;
  caret-color: #111;
  -webkit-box-shadow: 0 0 0 1000px #fff inset;
  box-shadow: 0 0 0 1000px #fff inset;
  transition: background-color 9999s ease-out 0s;
}

.auth-field__input:autofill {
  box-shadow: 0 0 0 1000px #fff inset;
  -webkit-text-fill-color: #111;
}

/* Error states */
.auth-field--error .auth-field__input {
  border-color: #dc2626;
}

.auth-field--error .auth-field__label {
  color: #dc2626;
}

.auth-field__error-text {
  display: block;
  margin-top: 4px;
  font-size: 12px;
  color: #dc2626;
  font-weight: 500;
}

.auth-hint {
  position: relative;
  margin: -4px 0 16px;
}

.auth-hint__trigger {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 0;
  border: none;
  background: none;
  font-size: 15px;
  font-weight: 600;
  color: var(--text-muted, #6b7280);
  cursor: pointer;
  text-align: left;
}

.auth-hint__trigger:hover,
.auth-hint__trigger:focus-visible {
  color: #8B3DFF;
}

.auth-hint__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background-color: #8B3DFF;
  color: #fff;
  font-size: 13px;
  font-weight: 700;
  font-style: italic;
  line-height: 1;
}

.auth-hint__tip {
  position: absolute;
  z-index: 20;
  top: calc(100% + 8px);
  left: 0;
  width: 320px;
  max-width: calc(100vw - 48px);
  padding: 14px 16px;
  border: 1px solid #e5e7eb;
  border-radius: 8px;
  background-color: #fff;
  box-shadow: 0 8px 24px rgba(17, 24, 39, 0.14);
  opacity: 0;
  visibility: hidden;
  transform: translateY(-4px);
  transition: opacity 0.15s ease, transform 0.15s ease, visibility 0.15s;
}

/* Hover is scoped to the trigger text and the tooltip itself — not the
   full-width wrapper, which would open it from anywhere on the row. */
.auth-hint__trigger:hover + .auth-hint__tip,
.auth-hint__tip:hover,
.auth-hint:focus-within .auth-hint__tip {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

/* Invisible bridge across the gap so moving the pointer from the trigger to
   the tooltip doesn't dismiss it. */
.auth-hint__tip::after {
  content: "";
  position: absolute;
  top: -10px;
  left: 0;
  right: 0;
  height: 10px;
}

.auth-hint__tip::before {
  content: "";
  position: absolute;
  top: -6px;
  left: 18px;
  width: 10px;
  height: 10px;
  background-color: #fff;
  border-left: 1px solid #e5e7eb;
  border-top: 1px solid #e5e7eb;
  transform: rotate(45deg);
}

.auth-hint__text {
  margin: 0;
  font-size: 15px;
  line-height: 22px;
  color: #374151;
}

.auth-hint__mail {
  color: #8B3DFF;
  font-weight: 600;
  text-decoration: underline;
  word-break: break-word;
}

.auth-hint__action {
  display: inline-block;
  margin-top: 12px;
  padding: 7px 16px;
  border-radius: 999px;
  background-color: #8B3DFF;
  color: #fff;
  font-size: 15px;
  font-weight: 700;
  text-decoration: none;
}

.auth-hint__action:hover {
  background-color: #732ed6;
  color: #fff;
}

.auth__messages {
  margin-bottom: 16px;
}

.auth__message {
  margin: 0 0 8px;
  padding: 12px 16px;
  border-radius: 6px;
  font-size: 14px;
  border: 1px solid transparent;
}

.auth__message:last-child {
  margin-bottom: 0;
}

.auth__message--error {
  background-color: #fee2e2;
  border-color: #fecaca;
  color: #dc2626;
}

.auth__message--warning {
  background-color: #fff7ed;
  border-color: #fed7aa;
  color: #c2410c;
}

.auth__message--success {
  background-color: #f0fdf4;
  border-color: #bbf7d0;
  color: #15803d;
}

.auth__message--info {
  background-color: #eff6ff;
  border-color: #bfdbfe;
  color: #1d4ed8;
}

.auth__error {
  background-color: #fee2e2;
  border: 1px solid #fecaca;
  border-radius: 6px;
  padding: 12px 16px;
  margin-bottom: 16px;
  color: #dc2626;
  font-size: 14px;
}

.auth__error p {
  margin: 0;
}

.auth__row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
}

.auth__checkbox {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  position: relative;
  user-select: none;
}

.auth__checkbox-input {
  position: absolute;
  opacity: 0;
  width: 1px;
  height: 1px;
  margin: 0;
}

.auth__checkbox-box {
  width: 18px;
  height: 18px;
  border-radius: 5px;
  border: 1px solid rgba(0, 0, 0, 0.25);
  background: #fff;
  display: inline-block;
  position: relative;
  flex: 0 0 auto;
}

.auth__checkbox-text {
  font-size: 14px;
  color: var(--text-muted);
}

.auth__checkbox-input:checked+.auth__checkbox-box {
  border-color: rgba(139, 61, 255, 0.85);
  background: rgba(139, 61, 255, 0.15);
}

.auth__checkbox-input:checked+.auth__checkbox-box::after {
  content: "";
  position: absolute;
  left: 5px;
  top: 2px;
  width: 5px;
  height: 9px;
  border: solid rgba(139, 61, 255, 0.95);
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}

.auth__checkbox-input:focus-visible+.auth__checkbox-box {
  outline: 3px solid rgba(139, 61, 255, 0.25);
  outline-offset: 2px;
}

.auth__link {
  color: #8B3DFF;
  font-weight: 800;
  text-decoration: none;
  font-size: 14px;
  white-space: nowrap;
}

.auth__link:hover {
  text-decoration: underline;
  color: #732ed6;
}

.auth__submit {
  width: 100%;
  background-color: #8B3DFF;
  color: #fff;
  border: none;
  border-radius: 999px;
  padding: 14px 24px;
  font-size: 16px;
  font-weight: 800;
  cursor: pointer;
  margin-top: 32px;
}

.auth__submit:hover {
  background-color: #732ed6;
  filter: brightness(0.98);
}

.auth__footer {
  margin: 8px 0 0;
  text-align: center;
  font-size: 14px;
  color: var(--text-muted);
}

/* Large tablets / small laptops */
@media (max-width: 1024px) {
  .auth__panel {
    margin-left: 0;
    padding: 32px 24px;
  }
}

/* Tablets */
@media (max-width: 768px) {
  .auth__bg {
    background-attachment: scroll;
    background: url("../images/login/bg_mobile.5f8c30b37859.png") no-repeat center top;
    background-position: fixed;
    background-size: cover;
  }

  .auth {
    justify-content: center;
    align-items: center;
  }

  .auth__panel {
    width: min(520px, 100%);
    margin-left: 0;
    margin-top: 0px;
    padding: calc(20px + env(safe-area-inset-top)) 16px 24px;
    gap: 16px;
  }

  .auth__logo {
    width: 170px;
    height: auto;
  }

  .auth-card {
    max-width: none;
    padding: 24px;
    border-radius: 14px;
  }
}

/* Phones */
@media (max-width: 480px) {
  .auth {
    align-items: flex-start;
  }

  .auth__logo {
    display: none;
  }

  .auth__bg {
    background: url("../images/login/bg_mobile.5f8c30b37859.png") no-repeat center top;
    background-size: cover;
    background-attachment: scroll;
  }

  .auth__panel {
    margin-top: 80px;
    padding: calc(16px + env(safe-area-inset-top)) 14px 20px;
    gap: 12px;
  }

  .auth__logo {
    width: 150px;
  }

  .auth-card {
    padding: 20px;
    border-radius: 14px;
  }

  .auth-card__title {
    font-size: 16px;
    line-height: 22px;
  }

  .auth-card__subtitle {
    font-size: 13px;
    line-height: 18px;
  }

  .auth-field__input {
    height: 42px;
    padding: 11px 12px;
  }

  .auth-field__label {
    left: 10px;
  }

  .auth__row {
    gap: 10px;
    margin: 6px 0 14px;
  }

  .auth__submit {
    padding: 12px 18px;
    font-size: 15px;
  }

  .auth__footer {
    font-size: 13px;
  }
}

/* ── Account-deactivated takeover (former director after a handover) ── */
/* One column, one gap. Every block on these takeovers is optional — the org
   name, the reactivate action, the other-organisations list, the contact
   details — so spacing that lives on the children leaves a different rhythm
   depending on which of them rendered. The gap owns it instead, and the
   children carry no bottom margins. */
.pa-deactivated {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20px;
  text-align: center;
  /* One column width for the whole takeover. Without it the prose and help
     blocks cap at 380px while the buttons stretch to the full card, so the
     primary action and the sign-out below it come out different widths. */
  max-width: 380px;
  margin-inline: auto;
}
.pa-deactivated__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: none;
  width: 60px;
  height: 60px;
  border-radius: 16px;
  background: #efe9fe;
  color: #6c5ce7;
}
.pa-deactivated__title {
  font-size: 22px;
  line-height: 1.3;
  font-weight: 800;
  color: #1a1040;
  margin: 0;
  /* A suspended service reads its own name here; the longer ones must wrap
     rather than push the card wide. */
  overflow-wrap: anywhere;
}
.pa-deactivated__text {
  font-size: 14.5px;
  line-height: 1.55;
  color: #5b5570;
  width: 100%;
  max-width: 380px;
  margin: 0 auto;
  overflow-wrap: anywhere;
}
.pa-deactivated__text p { margin: 0 0 10px; }
.pa-deactivated__text p:last-child { margin-bottom: 0; }
/* Bullets read as a list, so they keep their markers and left alignment while
   the block itself stays centred under the prose above it. */
.pa-deactivated__list {
  display: inline-block;
  margin: 10px 0 0;
  padding-left: 20px;
  text-align: left;
}
.pa-deactivated__list li { margin-bottom: 4px; }
.pa-deactivated__list li:last-child { margin-bottom: 0; }
.pa-deactivated__contact {
  display: flex;
  align-items: center;
  gap: 12px;
  text-align: left;
  background: #f7f5ff;
  border: 1px solid #e7e1fb;
  border-radius: 14px;
  padding: 12px 14px;
  width: 100%;
}
.pa-deactivated__avatar {
  flex: none;
  width: 40px;
  height: 40px;
  border-radius: 11px;
  background: #6c5ce7;
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 800;
  font-size: 15px;
}
.pa-deactivated__contact-text { display: flex; flex-direction: column; min-width: 0; }
.pa-deactivated__contact-label { font-size: 12px; color: #8a85a0; }
.pa-deactivated__contact-who { font-size: 14px; color: #1a1040; }
.pa-deactivated__contact-who a { color: #6c5ce7; text-decoration: none; }
.pa-deactivated__contact-who a:hover { text-decoration: underline; }
.pa-deactivated__help {
  text-align: center;
  font-size: 13.5px;
  line-height: 1.55;
  color: #5b5570;
  margin: 0 auto;
  width: 100%;
  max-width: 380px;
}
.pa-deactivated__help-text { margin: 0 0 8px; overflow-wrap: anywhere; }
.pa-deactivated__help-text:last-child { margin-bottom: 0; }
.pa-deactivated__help-text p { margin: 0; }
.pa-deactivated__help-text a { color: #6c5ce7; text-decoration: none; }
.pa-deactivated__help-text a:hover { text-decoration: underline; }
.pa-deactivated__support-link {
  display: inline-block;
  color: #6c5ce7;
  font-weight: 700;
  text-decoration: none;
}
.pa-deactivated__support-link:hover { text-decoration: underline; }
.pa-deactivated__form { margin: 0; width: 100%; }
/* The sign-out is the way *out*, not a step in fixing this, so it sits below a
   hairline rather than in the run of recovery actions. */
.pa-deactivated__form--exit {
  padding-top: 20px;
  border-top: 1px solid #efecfb;
}
/* These are a mix of <button> and <a> — the reactivate control on the suspended
   takeover is a link to another page. An inline <a> ignores `width`, and its
   vertical padding overlaps the lines around it instead of pushing them apart,
   which is why this sets its own display and resets the underline rather than
   assuming the <button> box. */
.pa-deactivated__btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  box-sizing: border-box;
  width: 100%;
  /* Comfortable thumb target once the card is phone-width. */
  min-height: 48px;
  border: none;
  cursor: pointer;
  background: #6c5ce7;
  color: #fff;
  font-weight: 700;
  font-size: 15px;
  line-height: 1.3;
  padding: 13px 18px;
  border-radius: 999px;
  text-align: center;
  text-decoration: none;
  transition: background-color 0.15s ease, box-shadow 0.15s ease;
}
.pa-deactivated__btn:hover { background: #5b4bd0; color: #fff; text-decoration: none; }
.pa-deactivated__btn:focus-visible { outline: 3px solid #b9aef7; outline-offset: 2px; }
/* Getting back in is what this page is for, so it carries the weight — and
   "Sign out" drops to --quiet wherever the two appear together, otherwise the
   loudest control on a page about recovering access is the one that leaves. */
.pa-deactivated__btn--primary { box-shadow: 0 6px 16px rgba(108, 92, 231, 0.32); }
.pa-deactivated__btn--primary:hover { box-shadow: 0 8px 20px rgba(108, 92, 231, 0.38); }
.pa-deactivated__btn--quiet {
  background: #fff;
  color: #4b3bcb;
  border: 1.5px solid #d9d4f7;
  box-shadow: none;
}
.pa-deactivated__btn--quiet:hover { background: #f6f4ff; color: #4b3bcb; }

/* Still-usable organizations offered on the org-unavailable takeover.
   Capped server-side (OrganizationBlockedView.MAX_OTHER_ORGS) and scrollable
   here, so a user in many organizations gets a bounded list rather than a page
   that grows without limit. */
.pa-org-blocked__orgs {
  /* Stack with real gaps — these are sibling <form>s, and pa-deactivated__form
     zeroes their margins, so without an explicit gap the pills butt together. */
  display: flex;
  flex-direction: column;
  gap: 10px;
  width: 100%;
  max-height: 240px;
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  /* Room for the focus ring and so the last pill isn't clipped mid-scroll. */
  padding: 2px;
}

/* These are secondary escapes, not the page's primary action — "Sign out"
   keeps the solid fill. Rendering them identically made three competing
   full-width purple pills with no hierarchy. */
.pa-org-blocked__btn {
  background: #fff;
  color: #4b3bcb;
  border: 1.5px solid #d9d4f7;
  font-size: 14px;
  padding: 11px 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}

.pa-org-blocked__btn:hover {
  background: #f6f4ff;
  border-color: #6c5ce7;
  color: #4b3bcb;
}

.pa-org-blocked__btn-name {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* The takeovers on a phone. The card's own padding tightens at these widths
   (.auth-card above), so the component tightens with it rather than keeping
   desktop spacing inside a smaller box. Nothing here shrinks a tap target
   below 48px. */
@media (max-width: 768px) {
  .pa-deactivated { gap: 18px; }
  .pa-deactivated__title { font-size: 20px; }
}

@media (max-width: 480px) {
  .pa-deactivated { gap: 16px; }
  .pa-deactivated__icon {
    width: 52px;
    height: 52px;
    border-radius: 14px;
  }
  .pa-deactivated__title { font-size: 18.5px; }
  .pa-deactivated__text { font-size: 14px; }
  .pa-deactivated__help { font-size: 13px; }
  .pa-deactivated__btn {
    font-size: 14.5px;
    padding: 12px 16px;
  }
  .pa-deactivated__form--exit { padding-top: 16px; }
  /* The contact strip is a 40px avatar beside two lines of text; below this
     width the text has nowhere to go, so it stacks instead of squeezing. */
  .pa-deactivated__contact {
    flex-direction: column;
    align-items: flex-start;
    text-align: left;
  }
  .pa-org-blocked__orgs { max-height: 200px; }
}