/* Login layout only: retain the existing colours, type and controls. */
body.jn-public-auth,
body.jn-internal-auth {
  height: auto;
  min-height: 100vh;
  min-height: 100svh;
}

body.jn-public-auth > div,
.jn-public-auth .view > div,
.jn-public-auth .view > div > div {
  min-width: 0;
}

/* Let the active form determine the card height, including agency fields and
   validation messages. The inactive view retains its existing transition. */
.jn-public-auth .jn-shell {
  display: flex;
  flex-direction: column;
  height: auto !important;
}

.jn-public-auth .view {
  position: relative;
  inset: auto;
  flex: 1 0 auto;
  height: auto;
}

.jn-public-auth .view.hiddenish {
  position: absolute;
  inset: 0;
  height: 100%;
  visibility: hidden;
}

.jn-public-auth .jn-auth-brand-header {
  flex-wrap: wrap;
  gap: 12px;
}

.jn-public-auth .jn-auth-brand-header > * {
  max-width: 100%;
}

.jn-public-auth .jn-toggle {
  overflow: hidden;
}

.jn-public-auth .jn-auth-switch {
  min-width: 0;
  max-width: 100%;
}

.jn-public-auth .jn-input {
  min-width: 0;
  max-width: 100%;
}

.jn-public-auth form .flex.items-center.justify-between {
  flex-wrap: wrap;
  gap: 12px;
}

.jn-public-auth input[type="checkbox"] {
  flex-shrink: 0;
}

.jn-public-auth form p,
.jn-public-auth form label > span {
  min-width: 0;
  overflow-wrap: anywhere;
}

.jn-internal-auth .wrap {
  width: 100%;
  min-width: 0;
}

.jn-internal-auth .head {
  flex-wrap: wrap;
}

.jn-internal-auth .grid {
  grid-template-columns: minmax(0, 1fr);
}

.jn-internal-auth .grid > *,
.jn-internal-auth input {
  min-width: 0;
  max-width: 100%;
}

.jn-internal-auth p,
.jn-internal-auth .msg,
.jn-internal-auth .hint {
  overflow-wrap: anywhere;
}

@media (max-width: 767.98px) {
  .jn-public-auth .view {
    flex-grow: 0;
  }

  .jn-public-auth .view.hiddenish {
    display: none;
  }

  .jn-public-auth .view > div:not(.hidden) {
    padding-left: clamp(16px, 4vw, 32px);
    padding-right: clamp(16px, 4vw, 32px);
  }

  .jn-public-auth .jn-toggle {
    min-width: 0;
    padding-left: clamp(12px, 4vw, 24px);
    padding-right: clamp(12px, 4vw, 24px);
  }
}