/* Designquelle: ans-analysis-engine/tools/ans-analysis-lab/wwwroot/showcase/
   home-login-hero.css. Die entry-card-Werte sind auf das echte Loginformular
   abgebildet; Passwortanzeige, Statusmeldung und Impressum sind produktive
   Ergänzungen. Alle Regeln gelten nur für den Loginzustand. */
#login-shell:has(#auth-view:not([hidden])) {
  position: relative;
  display: block;
  width: 100%;
  height: var(--app-available-height, 100dvh);
  min-height: 0;
  overflow: clip;
  isolation: isolate;
  background: #082b30;
}

#login-shell:has(#auth-view:not([hidden])) .login-visual-panel {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  min-height: 0;
  aspect-ratio: auto;
  padding: 0;
  background: #b7d8d8;
  pointer-events: none;
}

#login-shell:has(#auth-view:not([hidden])) .login-art {
  position: absolute;
  inset: 0;
}
#login-shell:has(#auth-view:not([hidden])) .login-brand-visual {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center bottom;
}
#login-shell:has(#auth-view:not([hidden])) .login-mobile-symbols { display: none; }
#login-shell:has(#auth-view:not([hidden])) .login-public-brand { display: none; }

#login-shell:has(#auth-view:not([hidden])) .login-marketing {
  position: absolute;
  top: clamp(1rem, 3vh, 2rem);
  left: clamp(1.6rem, 6.5vw, 7.5rem);
  width: min(38vw, 34rem);
  color: #092c33;
  text-shadow: 0 1px 12px #f1f7f383;
}

#login-shell:has(#auth-view:not([hidden])) .login-marketing-brand {
  width: fit-content;
  margin: 0;
  font-size: clamp(30px, min(2.8vw, 5.2vh), 49px);
  line-height: 1.05;
  letter-spacing: -.055em;
  white-space: nowrap;
}

#login-shell:has(#auth-view:not([hidden])) .login-marketing-ink {
  text-decoration-line: underline;
  text-decoration-color: #d6af56;
  text-decoration-thickness: 2px;
  text-underline-offset: .09em;
  text-decoration-skip-ink: auto;
}
#login-shell:has(#auth-view:not([hidden])) .login-marketing-brand strong { color: #082a34; font-weight: 720; }
#login-shell:has(#auth-view:not([hidden])) .login-marketing-ink > span { color: #008b93; font-weight: 350; }
#login-shell:has(#auth-view:not([hidden])) .login-marketing h1 {
  max-width: 9.5em;
  margin: clamp(1.6rem, 3.8vh, 2.5rem) 0 0;
  font-size: clamp(2rem, min(3.4vw, 5.8vh), 3.5rem);
  line-height: 1.12;
  letter-spacing: -.04em;
  overflow-wrap: anywhere;
}

#login-shell:has(#auth-view:not([hidden])) .login-marketing-motto {
  margin: clamp(1rem, 2.4vh, 2rem) 0 0;
  font-size: clamp(.84rem, 1.18vw, 1.4rem);
  letter-spacing: .08em;
}

#login-shell:has(#auth-view:not([hidden])) .login-marketing-subtitle {
  margin: clamp(.8rem, 2vh, 1.5rem) 0 0;
  color: #355762;
  font-size: clamp(.8rem, 1.05vw, 1.15rem);
  line-height: 1.4;
}

#login-shell:has(#auth-view:not([hidden])) .login-proof-points {
  /* The icons belong to the image. Match its 1672:941 cover crop at every viewport. */
  --login-cover-width: max(100vw, calc(var(--app-available-height, 100dvh) * 1.776833));
  position: absolute;
  inset: 0;
  width: 100%;
  color: white;
  text-align: center;
  font-size: clamp(.7rem, .9vw, 1rem);
  line-height: 1.4;
  text-shadow: 0 1px 4px #00191f;
}
#login-shell:has(#auth-view:not([hidden])) .login-proof-points span {
  position: absolute;
  top: calc(100% - .0505 * var(--login-cover-width));
  width: 10.5%;
  transform: translateX(-50%);
}
#login-shell:has(#auth-view:not([hidden])) .login-proof-points span:nth-child(1) { left: calc(50% - .4085 * var(--login-cover-width)); }
#login-shell:has(#auth-view:not([hidden])) .login-proof-points span:nth-child(2) { left: calc(50% - .301 * var(--login-cover-width)); }
#login-shell:has(#auth-view:not([hidden])) .login-proof-points span:nth-child(3) { left: calc(50% - .193 * var(--login-cover-width)); }
#login-shell:has(#auth-view:not([hidden])) .login-proof-points span:nth-child(4) { left: calc(50% - .0825 * var(--login-cover-width)); }

#login-shell:has(#auth-view:not([hidden])) .auth-panel {
  position: absolute;
  inset: 7% clamp(1rem, 3.5vw, 5rem) 7% auto;
  display: flex;
  flex-direction: column;
  justify-content: center;
  width: min(28.1%, 34rem);
  min-width: 26rem;
  min-height: 0;
  padding: clamp(1.2rem, 3vh, 2.8rem) clamp(1.4rem, 3.25vw, 3.6rem);
  overflow: visible;
  border: 1px solid #7bafa88c;
  border-top-color: #b8b279;
  border-bottom-color: #b8b279;
  border-radius: 2vw;
  color: #eef7f4;
  background: linear-gradient(145deg, #092e33f5, #022328f2);
  box-shadow: 0 20px 55px #001c3040;
}

#login-shell:has(#auth-view:not([hidden])) .auth-card {
  display: flex;
  flex: 0 1 auto;
  flex-direction: column;
  justify-content: center;
  width: 100%;
  min-width: 0;
  margin-block: auto;
  padding: 0;
  border: 0;
  border-radius: 0;
  color: inherit;
  background: transparent;
  box-shadow: none;
}

#login-shell:has(#auth-view:not([hidden])) #auth-view { min-width: 0; }
#login-shell:has(#auth-view:not([hidden])) .card-header { margin: 0 0 2dvh; }
#login-shell:has(#auth-view:not([hidden])) .card-header .section-label {
  margin-bottom: 1.8dvh;
  color: #e0bc68;
  font-size: clamp(.625rem, 1.5dvh, .9375rem);
  font-weight: 650;
  line-height: 1.4;
  letter-spacing: .2em;
}
#login-shell:has(#auth-view:not([hidden])) .card-header h2 {
  margin: 0 0 2dvh;
  color: #f4f8f5;
  font-size: clamp(1.75rem, min(2.85vw, 5dvh), 3rem);
  line-height: 1.1;
  letter-spacing: -.055em;
  white-space: normal;
}
#login-shell:has(#auth-view:not([hidden])) .card-header h2 em { color: #12b8d4; }
#login-shell:has(#auth-view:not([hidden])) .card-header > p:last-child {
  color: #e2ebeb;
  font-size: clamp(.6875rem, 1.8dvh, 1.0625rem);
  font-weight: 400;
  line-height: 1.5;
}

#login-shell:has(#auth-view:not([hidden])) .field { margin-bottom: 2dvh; }
#login-shell:has(#auth-view:not([hidden])) #login-form > .field:first-child { margin-top: 2dvh; }
#login-shell:has(#auth-view:not([hidden])) #login-form > .field:nth-child(2) { margin-bottom: 0; }
#login-shell:has(#auth-view:not([hidden])) .field > label {
  min-height: 0;
  margin-bottom: .8dvh;
  color: #e6eeee;
  font-size: clamp(.6875rem, 1.65dvh, .9375rem);
  font-weight: 400;
}
#login-shell:has(#auth-view:not([hidden])) .field input {
  height: max(2.125rem, 5.3dvh);
  color: #f3fbfa;
  border-color: #416367;
  border-radius: .65vw;
  background: #12353b8f;
  font-size: clamp(.75rem, 1.5dvh, .875rem);
}
#login-shell:has(#auth-view:not([hidden])) .field input:focus {
  border-width: 1px;
  border-color: #e7c772;
  background: #173f45;
  box-shadow: none;
}
#login-shell:has(#auth-view:not([hidden])) .reveal-button { color: #8fe0de; }
#login-shell:has(#auth-view:not([hidden])) .login-save-credentials {
  margin: 2dvh 0 2.5dvh;
  color: #edf6f4;
  font-size: clamp(.7rem, 1.6dvh, .9375rem);
  font-weight: 500;
}
#login-shell:has(#auth-view:not([hidden])) .primary-button {
  min-height: 2.4rem;
  font-size: clamp(.75rem, 1.7dvh, 1rem);
}
#login-shell:has(#auth-view:not([hidden])) .auth-secondary-actions {
  display: flex;
  flex-direction: column;
  gap: 0;
  margin-top: 1.5dvh;
}
#login-shell:has(#auth-view:not([hidden])) .secondary-button {
  min-height: 2.4rem;
  color: #eef8f6;
  border-color: #507f80;
  background: #123b40;
  box-shadow: none;
  font-size: clamp(.75rem, 1.7dvh, 1rem);
}
#login-shell:has(#auth-view:not([hidden])) .secondary-button:hover:not(:disabled) { background: #245459; }
#login-shell:has(#auth-view:not([hidden])) .auth-link-button {
  align-self: center;
  margin-top: 2dvh;
  color: #65d5d2;
  font-size: clamp(.6875rem, 1.5dvh, .875rem);
}
#login-shell:has(#auth-view:not([hidden])) .login-illustration-note {
  margin: clamp(.6rem, 1.5vh, .9rem) 0 0;
  padding-top: clamp(.5rem, 1.2vh, .8rem);
  border-top: 1px solid #8b99634d;
  color: #bdd0d0;
  text-align: center;
  font-size: .69rem;
  line-height: 1.3;
}
#login-shell:has(#auth-view:not([hidden])) .legal-links {
  width: 100%;
  margin: 1lh 0 0;
  flex: 0 0 auto;
}
#login-shell:has(#auth-view:not([hidden])) .legal-links button { color: #cee0de; }
#login-shell:has(#auth-view:not([hidden])) :is(button, input):focus-visible {
  outline: 2px solid #e7c772;
  outline-offset: 3px;
}
#login-shell:has(#auth-view:not([hidden])) .field input:focus-visible {
  outline: none;
}

/* Keep the form within the viewport at ordinary desktop and tablet sizes.
   If enlarged text or an unusually short window needs more room, preserve
   access to the controls instead of clipping them. */
body:has(#login-shell:not([hidden]):has(#auth-view:not([hidden]))) {
  height: var(--app-available-height, 100dvh);
  min-height: 0;
  overflow-x: hidden;
  overflow-y: auto;
}
#login-shell:has(#auth-view:not([hidden])) {
  container: login / size;
  height: var(--app-available-height, 100dvh);
  min-height: 0;
  overflow: visible;
}
#login-shell:has(#auth-view:not([hidden])) .auth-panel {
  top: clamp(.5rem, 3dvh, 2rem);
  bottom: clamp(.5rem, 6dvh, 3.5rem);
  padding-top: clamp(.5rem, 1.5dvh, 1.25rem);
  padding-bottom: max(1lh, clamp(.5rem, 1.5dvh, 1.25rem));
}

/* Match the source showcase's desktop card position and form rhythm. The
   functional inputs, password control and legal link remain in the card. */
@media (min-width: 1001px) {
  #login-shell:has(#auth-view:not([hidden])) .auth-panel {
    left: 68.2%;
    right: auto;
    width: 28.1%;
    min-width: 0;
    max-width: none;
    padding-inline: 3.55vw;
  }
  #login-shell:has(#auth-view:not([hidden])) .auth-card {
    margin-top: clamp(3.5rem, 8dvh, 5rem);
  }
}

/* At tablet widths the picture becomes a backdrop, so its full aspect ratio
   cannot push the form below the viewport. */
@media (max-width: 1000px) {
  #login-shell:has(#auth-view:not([hidden])) {
    display: block;
    padding: 0;
    background: #082b30;
  }
  #login-shell:has(#auth-view:not([hidden])) .login-visual-panel {
    position: absolute;
    inset: 0;
    display: block;
    width: 100%;
    height: 100%;
  }
  #login-shell:has(#auth-view:not([hidden])) .login-public-brand,
  #login-shell:has(#auth-view:not([hidden])) .login-mobile-symbols,
  #login-shell:has(#auth-view:not([hidden])) .login-proof-points,
  #login-shell:has(#auth-view:not([hidden])) .login-marketing { display: none; }
  #login-shell:has(#auth-view:not([hidden])) .login-art {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    aspect-ratio: auto;
    margin: 0;
    padding: 0;
    background: transparent;
  }
  #login-shell:has(#auth-view:not([hidden])) .login-brand-visual {
    display: block;
    width: 100%;
    height: 100%;
    aspect-ratio: auto;
    margin: 0;
    clip-path: none;
    object-fit: cover;
    object-position: center bottom;
  }
  #login-shell:has(#auth-view:not([hidden])) .auth-panel {
    position: absolute;
    inset: clamp(.5rem, 2dvh, 1rem) clamp(.5rem, 3vw, 1.5rem) clamp(.5rem, 2dvh, 1rem) auto;
    width: min(54%, 32rem);
    min-width: min(100%, 25rem);
    max-height: none;
    padding: clamp(.5rem, 1.5dvh, 1.25rem) clamp(1rem, 3vw, 1.75rem);
    padding-bottom: max(1lh, clamp(.5rem, 1.5dvh, 1.25rem));
    border-radius: clamp(1rem, 2vw, 1.5rem);
  }
  #login-shell:has(#auth-view:not([hidden])) .card-header { margin-bottom: clamp(.55rem, 1.6dvh, 1rem); }
  #login-shell:has(#auth-view:not([hidden])) .card-header .section-label { margin-bottom: clamp(.3rem, 1dvh, .65rem); }
  #login-shell:has(#auth-view:not([hidden])) .card-header h2 { margin-bottom: clamp(.3rem, 1dvh, .65rem); }
  #login-shell:has(#auth-view:not([hidden])) .field { margin-bottom: clamp(.45rem, 1.2dvh, .75rem); }
  #login-shell:has(#auth-view:not([hidden])) .field > label { margin-bottom: .25rem; }
  #login-shell:has(#auth-view:not([hidden])) .field input { border-radius: 8px; }
  #login-shell:has(#auth-view:not([hidden])) .login-save-credentials { margin-bottom: clamp(.25rem, .8dvh, .5rem); }
  #login-shell:has(#auth-view:not([hidden])) .auth-secondary-actions {
    gap: clamp(.3rem, .8dvh, .6rem);
    margin-top: clamp(.3rem, .8dvh, .6rem);
  }
  #login-shell:has(#auth-view:not([hidden])) .auth-card { width: 100%; padding: 0; }
  #login-shell:has(#auth-view:not([hidden])) .legal-links { margin-top: .5rem; }
}

@media (max-width: 600px) {
  #login-shell:has(#auth-view:not([hidden])) .auth-panel {
    inset-inline: .5rem;
    width: auto;
    min-width: 0;
    max-width: 28rem;
    margin-inline: auto;
  }
  #login-shell:has(#auth-view:not([hidden])) .login-brand-visual { object-position: 44% bottom; }
}

/* Reduce spacing continuously with the available height. Keep the inputs and
   buttons large enough to operate, including when a status message appears. */
@container login (max-height: 560px) {
  #login-shell:has(#auth-view:not([hidden])) .auth-card {
    margin-top: clamp(2.5rem, 8dvh, 3.5rem);
  }
  #login-shell:has(#auth-view:not([hidden])) .auth-panel {
    padding-top: .4rem;
    padding-bottom: max(1lh, .4rem);
  }
  #login-shell:has(#auth-view:not([hidden])) .card-header { margin-bottom: 1.2rem; }
  #login-shell:has(#auth-view:not([hidden])) .card-header .section-label { margin-bottom: .7rem; }
  #login-shell:has(#auth-view:not([hidden])) .card-header h2 {
    margin-bottom: .8rem;
    font-size: clamp(1.5rem, 4dvh, 2.25rem);
  }
  #login-shell:has(#auth-view:not([hidden])) .card-header > p:last-child {
    font-size: .8rem;
    line-height: 1.3;
  }
  #login-shell:has(#auth-view:not([hidden])) .field { margin-bottom: .4rem; }
  #login-shell:has(#auth-view:not([hidden])) #login-form > .field:first-child { margin-bottom: .75rem; }
  #login-shell:has(#auth-view:not([hidden])) .field > label { margin-bottom: .2rem; }
  #login-shell:has(#auth-view:not([hidden])) .field input { height: clamp(2.35rem, 6dvh, 2.75rem); }
  #login-shell:has(#auth-view:not([hidden])) .login-save-credentials { margin-bottom: .8rem; }
  #login-shell:has(#auth-view:not([hidden])) .primary-button,
  #login-shell:has(#auth-view:not([hidden])) .secondary-button { min-height: 2.5rem; }
  #login-shell:has(#auth-view:not([hidden])) .auth-secondary-actions { gap: .6rem; margin-top: .6rem; }
  #login-shell:has(#auth-view:not([hidden])) .legal-links { margin-top: .3rem; }
}

/* A short landscape viewport has room beside the form, not above it. */
@container login (max-height: 520px) {
  #login-shell:has(#auth-view:not([hidden])) .auth-panel {
    inset: .25rem;
    width: min(calc(100% - .5rem), 52rem);
    min-width: 0;
    margin-inline: auto;
    padding: .3rem clamp(.5rem, 2vw, 1rem);
  }
  #login-shell:has(#auth-view:not([hidden])) .login-marketing,
  #login-shell:has(#auth-view:not([hidden])) .login-proof-points { display: none; }
  #login-shell:has(#auth-view:not([hidden])) #auth-view {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 2fr);
    gap: .2rem .75rem;
    align-items: center;
  }
  #login-shell:has(#auth-view:not([hidden])) .card-header {
    grid-column: 1;
    grid-row: 1 / 3;
    margin: 0;
  }
  #login-shell:has(#auth-view:not([hidden])) .card-header .section-label,
  #login-shell:has(#auth-view:not([hidden])) .card-header > p:last-child { display: none; }
  #login-shell:has(#auth-view:not([hidden])) .card-header h2 {
    margin: 0;
    font-size: clamp(1rem, 3vw, 1.7rem);
  }
  #login-shell:has(#auth-view:not([hidden])) #login-form {
    display: grid;
    grid-column: 2;
    grid-row: 1;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: .15rem .5rem;
    align-items: end;
  }
  #login-shell:has(#auth-view:not([hidden])) #login-form .field { min-width: 0; margin: 0; }
  #login-shell:has(#auth-view:not([hidden])) #login-form > .field:first-child { margin: 0; }
  #login-shell:has(#auth-view:not([hidden])) #login-form .field input { min-width: 0; height: 2.35rem; }
  #login-shell:has(#auth-view:not([hidden])) #login-form .login-save-credentials,
  #login-shell:has(#auth-view:not([hidden])) #login-form .form-message,
  #login-shell:has(#auth-view:not([hidden])) #login-form .primary-button { grid-column: 1 / -1; }
  #login-shell:has(#auth-view:not([hidden])) #login-form .login-save-credentials,
  #login-shell:has(#auth-view:not([hidden])) #login-form .form-message { margin: 0; }
  #login-shell:has(#auth-view:not([hidden])) #login-form .primary-button { min-height: 2.3rem; }
  #login-shell:has(#auth-view:not([hidden])) .auth-secondary-actions {
    display: grid;
    grid-column: 2;
    grid-row: 2;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: .5rem;
    align-items: center;
    margin: 0;
  }
  #login-shell:has(#auth-view:not([hidden])) .auth-secondary-actions .secondary-button { min-height: 2.3rem; }
  #login-shell:has(#auth-view:not([hidden])) .auth-link-button { justify-self: center; padding: 0; }
  #login-shell:has(#auth-view:not([hidden])) .legal-links { margin-top: .1rem; }
}

@media (max-width: 600px) {
  @container login (max-height: 520px) {
    #login-shell:has(#auth-view:not([hidden])) #auth-view { display: block; }
    #login-shell:has(#auth-view:not([hidden])) .card-header { margin-bottom: .2rem; }
    #login-shell:has(#auth-view:not([hidden])) #login-form { display: grid; }
  }
}

/* A portrait phone has too little height for a full-screen composition. Let
   the original illustration and the complete form flow naturally instead. */
@media (max-width: 600px) and (orientation: portrait) {
  body:has(#login-shell:not([hidden]):has(#auth-view:not([hidden]))) {
    height: auto;
    min-height: 100dvh;
    overflow-x: hidden;
    overflow-y: auto;
  }
  #login-shell:has(#auth-view:not([hidden])) {
    container: none;
    display: flex;
    flex-direction: column;
    gap: 1rem;
    height: auto;
    min-height: 100dvh;
    overflow: visible;
    background: #edf5f4;
  }
  #login-shell:has(#auth-view:not([hidden])) .login-visual-panel {
    position: relative;
    inset: auto;
    height: auto;
  }
  #login-shell:has(#auth-view:not([hidden])) .login-art {
    position: relative;
    inset: auto;
    height: auto;
    aspect-ratio: 1672 / 941;
    background: #edf5f4;
  }
  #login-shell:has(#auth-view:not([hidden])) .login-brand-visual {
    height: auto;
    aspect-ratio: 1672 / 941;
    object-fit: contain;
  }
  #login-shell:has(#auth-view:not([hidden])) .login-public-brand {
    position: absolute;
    z-index: 1;
    top: .75rem;
    left: 1rem;
    display: block;
    margin: 0;
    color: #082a34;
    font-size: clamp(1.5rem, 6vw, 2rem);
    letter-spacing: -.055em;
    text-shadow: 0 1px 12px #f1f7f3;
  }
  #login-shell:has(#auth-view:not([hidden])) .login-public-brand .login-marketing-ink > span { color: #008b93; }
  #login-shell:has(#auth-view:not([hidden])) .login-marketing {
    position: relative;
    inset: auto;
    display: block;
    width: auto;
    padding-inline: 1rem;
    color: #082a34;
    text-shadow: none;
  }
  #login-shell:has(#auth-view:not([hidden])) .login-marketing-brand,
  #login-shell:has(#auth-view:not([hidden])) .login-marketing-subtitle { display: none; }
  #login-shell:has(#auth-view:not([hidden])) .login-marketing h1 {
    max-width: none;
    margin: 0;
    font-size: clamp(1.5rem, 6vw, 2rem);
  }
  #login-shell:has(#auth-view:not([hidden])) .login-marketing-motto {
    margin-top: .5rem;
    font-size: clamp(.8rem, 3vw, 1rem);
  }
  #login-shell:has(#auth-view:not([hidden])) .auth-panel {
    position: relative;
    inset: auto;
    flex: 0 0 auto;
    width: min(calc(100% - 1rem), 28rem);
    max-width: none;
    margin: 0 auto 1rem;
    padding: 1rem;
  }
  #login-shell:has(#auth-view:not([hidden])) .auth-card { margin-block: 0; }
}

/* The primary action stays with the credential fields. Put the recovery link
   directly below it and reserve the lower edge of the dark panel for starting
   registration. The legal link belongs to the image area below the panel. */
@container login (min-height: 521px) {
  #login-shell:has(#auth-view:not([hidden])) .auth-card {
    flex: 1 1 auto;
    min-height: 0;
    margin: 0;
  }
  #login-shell:has(#auth-view:not([hidden])) #auth-view {
    display: flex;
    flex-direction: column;
    height: 100%;
    min-height: 0;
    padding-top: clamp(3.5rem, 8dvh, 5rem);
  }
  #login-shell:has(#auth-view:not([hidden])) .auth-secondary-actions {
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    min-height: 0;
    margin-top: 1.5dvh;
  }
  #login-shell:has(#auth-view:not([hidden])) #show-password-reset {
    order: 1;
    margin-top: 0;
  }
  #login-shell:has(#auth-view:not([hidden])) #show-register {
    order: 2;
    margin-top: auto;
  }
}

@media (min-width: 601px) {
  #login-shell:has(#auth-view:not([hidden])) .legal-links {
    position: absolute;
    z-index: 2;
    right: clamp(1rem, 3.5vw, 5rem);
    bottom: clamp(.5rem, 1.5dvh, 1.25rem);
    width: auto;
    margin: 0;
  }
  #login-shell:has(#auth-view:not([hidden])) .legal-links button {
    color: #eef7f4;
    text-shadow: 0 1px 5px #00191f;
  }
}

@media (max-width: 600px) and (orientation: portrait) {
  #login-shell:has(#auth-view:not([hidden])) .legal-links {
    position: relative;
    align-self: flex-end;
    width: auto;
    margin: 0 1rem 1rem;
  }
}