/* Arne's showcase, tag ans-explorer-showcase-2026-09-28:
   onboarding.css, registration-background.css and public-brand.css.
   Shared by direct registration, password reset and access activation.
   Partner invitations and authenticated dialogs retain their own styling. */
#login-shell:has(.password-showcase) {
  --password-top-space: 100px;
  --password-bottom-space: 50px;
  position: relative; isolation: isolate; display: flex; flex-direction: column;
  width: 100%; max-width: none; height: var(--app-available-height, 100dvh);
  min-height: 0; margin: 0; padding: 0; border: 0; border-radius: 0;
  color: #102a44; background: #f4f8f8; font-family: Inter, "Segoe UI", sans-serif;
}
#login-shell:has(.password-showcase)::before {
  content: ""; position: fixed; left: -6px; top: -6px;
  width: calc(100vw + 12px); height: calc(100svh + 12px);
  z-index: -1; pointer-events: none;
  background: url("./assets/registration/registration-background-D.jpg") center top / cover no-repeat;
  filter: blur(3px);
}
#login-shell:has(.password-showcase) .login-visual-panel { display: none; }
#login-shell:has(.password-showcase) #password-showcase-topbar {
  display: flex; flex: 0 0 auto; justify-content: space-between; align-items: center;
  padding: 28px 6%; gap: 20px; min-height: var(--password-top-space);
}
#password-showcase-topbar button {
  border: 0; border-radius: 0; padding: 0; margin: 0; min-height: 0;
  background: transparent; box-shadow: none; color: #007c80; font: inherit; cursor: pointer;
}
#password-showcase-topbar .password-showcase-brand {
  font-size: clamp(30px, min(2.8vw, 5.2vh), 49px); line-height: 1.05;
  letter-spacing: -.055em; font-weight: 350; white-space: nowrap; color: #008b93;
}
#password-showcase-topbar .password-showcase-brand strong { font-weight: 720; color: #082a34; }
#password-showcase-topbar .password-showcase-brand > span {
  text-decoration-line: underline; text-decoration-color: #d6af56;
  text-decoration-thickness: 2px; text-underline-offset: .09em; text-decoration-skip-ink: auto;
}
#password-showcase-topbar .password-showcase-login { font-size: 14px; }
#login-shell:has(.password-showcase) .auth-panel {
  display: flex; flex: 1 1 auto; flex-direction: column; align-items: center;
  justify-content: flex-start; min-height: 0; height: auto; padding: 10px 24px 20px;
  gap: 0; background: transparent;
}
#login-shell #auth-card.password-showcase {
  --ui-color-text: #102a44;
  --ui-color-text-heading: #10253e;
  --ui-color-text-label: #102a44;
  --ui-color-text-muted: #597176;
  --ui-color-border: #b5cfce;
  --ui-color-gold-light: #007078;
  --ui-color-surface: #fff;
  --ui-color-surface-header: #edf6f4;
  --ui-color-accent: #009b99;
  --ui-color-accent-strong: #00646d;
  width: min(100%, 660px); min-width: 0; min-height: 0; height: auto;
  max-height: calc(var(--dialog-viewport-height, var(--app-available-height, 100dvh)) - var(--password-top-space) - var(--password-bottom-space));
  flex: 0 1 auto; margin: 0; padding: 35px 47px 30px;
  color: #102a44; background: linear-gradient(150deg, #fffffffa, #fffffff2);
  border: 1px solid #e4dfcf; border-radius: 22px; box-shadow: 0 18px 38px #28515c0d;
  font-family: Inter, "Segoe UI", sans-serif;
}
#login-shell #auth-card.password-showcase::before,
#login-shell #auth-card.password-showcase::after { display: none; }
#login-shell #auth-card.password-showcase.identity-invalid-link-mode { border-top: 4px solid #d5ad52; }
#auth-card.password-showcase.identity-invalid-link-mode #identity-action-view > .auth-flow-heading { margin-bottom: clamp(.6rem, 1.8dvh, 1rem); }
#auth-card.password-showcase.identity-invalid-link-mode .identity-confirmation-result { margin-top: 0; }
#auth-card.password-showcase.identity-invalid-link-mode #identity-confirmation-result-message {
  color: #45656b; text-align: left; font-size: 1rem; font-weight: 400; line-height: 1.5; overflow-wrap: anywhere;
}
#auth-card.password-showcase.identity-invalid-link-mode #identity-confirmation-show-login {
  width: 100%; min-height: 3rem; margin-top: clamp(.8rem, 2dvh, 1.25rem);
  border-color: #007078; color: #fff; background: #007078;
}
/* The link check shares the same light shell before the password form opens. */
#auth-card.password-showcase.password-showcase-checking #identity-action-form { display: none; }
#auth-card.password-showcase #identity-action-view > .auth-flow-heading { margin: 0; }
#auth-card.password-showcase .auth-flow-heading > .section-label,
#auth-card.password-showcase .auth-flow-heading > .auth-flow-brand { display: none; }
#auth-card.password-showcase #password-showcase-eyebrow {
  font-size: 12px; font-weight: 650; line-height: 1.65; letter-spacing: 2.4px;
  color: #a47d31; margin: 0 0 12px;
}
#auth-card.password-showcase #identity-action-title {
  font-size: 39px; font-weight: 570; line-height: 1.2; letter-spacing: -.8px;
  color: #10253e; margin: 0 0 12px; text-shadow: none;
}
#auth-card.password-showcase #identity-action-description {
  font-size: 17px; font-weight: 400; line-height: 1.5; color: #597176;
  margin: 0 0 15px;
}
#auth-card.password-showcase #password-showcase-edition {
  display: inline-block; font-size: 13px; font-weight: 400; line-height: 1.65;
  padding: 9px 13px; background: #edf6f4; border-radius: 8px;
  margin: 0 0 23px; color: #45656b; overflow-wrap: anywhere;
}
#auth-card.password-showcase #password-showcase-edition strong { color: inherit; }
#auth-card.password-showcase #identity-action-form,
#auth-card.password-showcase #identity-registration-password-fields {
  display: block; width: 100%; min-height: 0; margin: 0; padding: 0; gap: 0;
}
#auth-card.password-showcase #identity-registration-password-fields .field { margin: 0; }
#auth-card.password-showcase #identity-registration-password-fields label {
  display: block; font-size: 16px; font-weight: 600; line-height: normal;
  min-height: 0; color: #102a44; margin: 0 0 8px;
}
#auth-card.password-showcase .password-field {
  display: flex; border: 1px solid #b5cfce; border-radius: 10px;
  margin: 0 0 19px; padding: 0; min-height: 57px; background: #fff;
}
#auth-card.password-showcase .password-field:focus-within {
  border-color: #009e9c; box-shadow: 0 0 0 3px #00a4a41c;
}
#auth-card.password-showcase .password-field input {
  flex: 1 1 auto; min-width: 0; width: 100%; height: auto; min-height: 0;
  border: 0; outline: none; box-shadow: none; background: transparent;
  padding: 14px; font-size: 17px; line-height: normal; color: #102a44; border-radius: 10px;
}
#auth-card.password-showcase .password-field .reveal-button {
  position: static; inset: auto; transform: none; flex: 0 0 auto; align-self: stretch;
  min-width: 83px; width: auto; min-height: 0; height: auto; margin: 0; padding: 0 15px;
  border: 0; background: transparent; color: #007078; box-shadow: none;
  font: inherit; font-size: 12px; font-weight: 400; border-radius: 10px;
}
#auth-card.password-showcase #password-showcase-help {
  font-size: 12px; line-height: 1.6; font-weight: 400; color: #5c7378; margin: 0;
}
#auth-card.password-showcase #password-showcase-checklist {
  list-style: none; padding: 0; margin: 15px 0 0; display: grid; gap: 8px;
  color: #557078; font-size: 14px; font-weight: 400; line-height: 1.4;
}
#password-showcase-checklist li { display: flex; align-items: center; gap: 9px; }
#password-showcase-checklist .password-showcase-rule-symbol {
  width: 18px; height: 18px; display: grid; place-items: center; flex-shrink: 0;
  border: 1px solid #9ebec0; border-radius: 50%; font-size: 12px; color: #698f93;
}
#password-showcase-checklist [data-met="true"] .password-showcase-rule-symbol { background: #00a6a6; border-color: #00a6a6; color: #fff; }
#password-showcase-checklist .password-showcase-rule-status {
  position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap;
}
#auth-card.password-showcase #identity-action-message {
  font-size: 13px; line-height: 1.5; color: #9a452e; margin: 12px 0 0; overflow-wrap: anywhere;
}
#auth-card.password-showcase .identity-action-actions {
  display: grid; grid-template-columns: minmax(0, 1fr); gap: 18px; margin: 22px 0 0; padding: 0; border: 0;
}
#auth-card.password-showcase #identity-action-submit {
  position: relative; display: flex; justify-content: center; align-items: center;
  width: 100%; min-height: 59px; margin: 0; padding: 15px 40px;
  font-size: 17px; line-height: normal; letter-spacing: normal;
}
#auth-card.password-showcase #identity-action-submit::after { content: "→"; position: absolute; right: 20px; }
#auth-card.password-showcase #identity-action-submit:disabled { opacity: .6; cursor: default; }
#auth-card.password-showcase #identity-show-login,
#auth-card.password-showcase #identity-registration-previous {
  justify-self: center; width: auto; min-height: 0; margin: 0; padding: 0;
  background: transparent; border: 0; box-shadow: none; color: #007c80;
  text-align: center; font-size: 13px; font-weight: 400; line-height: 1.5;
}
#auth-card.password-showcase #identity-show-login { justify-self: start; text-align: left; }
#login-shell:has(.password-showcase) .legal-links { flex: 0 0 auto; width: auto; margin: 10px 0 0; }
#login-shell:has(.password-showcase) .legal-links button { color: #007c80; font-size: 12px; }
#password-showcase-topbar button:focus-visible,
#auth-card.password-showcase button:focus-visible { outline: 2px solid #008f94; outline-offset: 3px; }

@media (min-width: 1001px) and (max-height: 950px) {
  #login-shell:has(.password-showcase) { --password-top-space: 82px; }
  #login-shell:has(.password-showcase) #password-showcase-topbar { padding-top: 20px; padding-bottom: 20px; }
  #login-shell:has(.password-showcase) .auth-panel { padding-top: 6px; }
}
@media (max-width: 1000px) {
  #login-shell:has(.password-showcase) { --password-top-space: 91px; }
  #login-shell:has(.password-showcase) #password-showcase-topbar { padding-left: 5%; padding-right: 5%; }
  #password-showcase-topbar .password-showcase-brand { font-size: 33px; }
  #login-shell #auth-card.password-showcase { width: min(100%, 620px); padding: 32px 44px 27px; }
  #auth-card.password-showcase #identity-action-title { font-size: 36px; }
  #auth-card.password-showcase #identity-action-description { font-size: 16px; }
  #auth-card.password-showcase .password-field { min-height: 52px; margin-bottom: 17px; }
  #auth-card.password-showcase #password-showcase-checklist { font-size: 13px; gap: 7px; }
  #auth-card.password-showcase #identity-action-submit { min-height: 54px; font-size: 16px; }
}
@media (max-width: 600px) {
  #login-shell:has(.password-showcase) { --password-top-space: 78px; }
  #login-shell:has(.password-showcase) #password-showcase-topbar { padding: 22px 20px; }
  #password-showcase-topbar .password-showcase-brand { font-size: 32px; }
  #password-showcase-topbar .password-showcase-login { font-size: 11px; }
  #login-shell:has(.password-showcase) .auth-panel { padding: 14px 16px 20px; }
  #login-shell #auth-card.password-showcase { padding: 28px 23px 25px; }
  #auth-card.password-showcase #identity-action-title { font-size: 29px; }
  #auth-card.password-showcase #identity-action-description { font-size: 14px; }
  #auth-card.password-showcase #identity-registration-password-fields label { font-size: 14px; }
  #auth-card.password-showcase #password-showcase-edition { font-size: 12px; }
  #auth-card.password-showcase #password-showcase-checklist { font-size: 12px; gap: 8px; }
  #auth-card.password-showcase .password-field .reveal-button { padding: 0 10px; min-width: 75px; }
  #auth-card.password-showcase #identity-action-submit { font-size: 14px; }
}
/* Keep the reference proportions when space permits. Compact gaps first;
   dialog-layout.js measures any remaining overflow and supplies real pages. */
@media (max-height: 780px) {
  #login-shell:has(.password-showcase) { --password-top-space: 58px; --password-bottom-space: 38px; }
  #login-shell:has(.password-showcase) #password-showcase-topbar { padding-block: 10px; }
  #login-shell:has(.password-showcase) .auth-panel { padding-block: 4px 8px; }
  #login-shell #auth-card.password-showcase { padding-block: 20px; }
  #auth-card.password-showcase #password-showcase-eyebrow { margin-bottom: 7px; }
  #auth-card.password-showcase #identity-action-title { font-size: clamp(26px, 4vw, 34px); margin-bottom: 8px; }
  #auth-card.password-showcase #identity-action-description { margin-bottom: 10px; }
  #auth-card.password-showcase #password-showcase-edition { margin-bottom: 14px; padding-block: 6px; }
  #auth-card.password-showcase .password-field { min-height: 46px; margin-bottom: 12px; }
  #auth-card.password-showcase .password-field input { padding-block: 11px; }
  #auth-card.password-showcase #password-showcase-checklist { margin-top: 10px; gap: 5px; }
  #auth-card.password-showcase .identity-action-actions { margin-top: 15px; gap: 12px; }
  #auth-card.password-showcase #identity-action-submit { min-height: 48px; padding-block: 12px; }
}
#login-shell #auth-card.password-showcase.dialog-compact { padding: 12px 20px; }
#auth-card.password-showcase.dialog-compact #password-showcase-eyebrow { margin-bottom: 4px; }
#auth-card.password-showcase.dialog-compact #identity-action-title { font-size: 26px; margin-bottom: 6px; }
#auth-card.password-showcase.dialog-compact #identity-action-description { font-size: 14px; margin-bottom: 8px; }
#auth-card.password-showcase.dialog-compact #password-showcase-edition { margin-bottom: 10px; padding-block: 5px; }
#auth-card.password-showcase.dialog-compact .password-field { min-height: 42px; margin-bottom: 10px; }
#auth-card.password-showcase.dialog-compact .password-field input { padding-block: 9px; }
#auth-card.password-showcase.dialog-compact #password-showcase-checklist { gap: 4px; }
#auth-card.password-showcase.dialog-compact .identity-action-actions { margin-top: 12px; gap: 8px; }
#auth-card.password-showcase.dialog-compact #identity-action-submit { min-height: 44px; padding-block: 10px; }
#auth-card.password-showcase .dialog-page-navigation { color: #45656b; border-color: #d6e4e4; }
#auth-card.password-showcase .dialog-page-navigation button { background: #edf6f4; color: #007078; border: 1px solid #b5cfce; box-shadow: none; }
#auth-card.password-showcase .dialog-page-navigation button:disabled { color: #7e9092; background: #edf0f0; }
#auth-card.password-showcase.dialog-paged:not(.dialog-last-page) #identity-action-submit { display: none; }

/* Password entry and its checklist are one task. Use the card width before
   the shared dialog fitter has to divide them into separate pages. */
@media (min-width: 480px) {
  #auth-card.password-showcase #identity-action-form {
    display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    align-items: center; column-gap: clamp(14px, 3vw, 28px);
  }
  #auth-card.password-showcase #identity-registration-password-fields { grid-column: 1; grid-row: 1; }
  #auth-card.password-showcase #password-showcase-requirements { grid-column: 2; grid-row: 1; min-width: 0; }
  #auth-card.password-showcase #identity-action-message,
  #auth-card.password-showcase .identity-action-actions { grid-column: 1 / -1; }
  #auth-card.password-showcase #password-showcase-checklist { margin-top: 8px; }
}
@media (max-height: 650px) {
  #auth-card.password-showcase:not(.password-showcase-checking) #identity-action-description,
  #auth-card.password-showcase #password-showcase-help { display: none; }
  #auth-card.password-showcase #password-showcase-eyebrow { margin-bottom: 4px; }
  #auth-card.password-showcase #identity-action-title { font-size: clamp(25px, 3vw, 30px); margin-bottom: 5px; }
  #auth-card.password-showcase #password-showcase-edition { margin-bottom: 8px; padding-block: 4px; }
  #auth-card.password-showcase #identity-registration-password-fields label { margin-bottom: 4px; }
  #auth-card.password-showcase .password-field { min-height: 42px; margin-bottom: 8px; }
  #auth-card.password-showcase #password-showcase-checklist { margin-top: 0; gap: 3px; }
  #auth-card.password-showcase .identity-action-actions {
    display: grid; grid-template-columns: minmax(0, 1fr); gap: 8px; margin-top: 10px;
  }
  #auth-card.password-showcase #identity-action-submit { width: 100%; }
}