/* Fluid member access layout. Load after the shared and global responsive styles. */
.auth-screen {
  --auth-gap: clamp(1rem, 2.8vw, 4rem);
  --auth-pad: clamp(.75rem, 2.2vw, 3rem);
  --auth-orb: clamp(9rem, 42vw, 16rem);
}

.auth-screen #main {
  display: flex;
  flex: 1 0 auto;
  flex-direction: column;
  justify-content: center;
  min-width: 0;
}

.auth-screen .auth-view {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  align-items: center;
  align-content: center;
  gap: var(--auth-gap);
  width: 100%;
  min-width: 0;
  max-width: none;
  height: auto;
  min-height: 0;
  margin: 0;
  padding: clamp(1rem, 2vw, 3rem) var(--auth-pad);
}

.auth-screen .auth-view .login-art {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  grid-template-rows: auto auto auto auto;
  align-content: center;
  align-items: center;
  justify-items: center;
  row-gap: clamp(.5rem, 1.2vw, 1.25rem);
  position: relative;
  width: 100%;
  min-width: 0;
  height: auto;
  min-height: 0;
  overflow: visible;
}

.auth-screen .auth-view .login-art-top {
  position: relative;
  inset: auto;
  grid-area: 1 / 1;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  gap: .5rem 1rem;
  width: 100%;
  min-width: 0;
  padding-inline: clamp(0rem, 1.2vw, 1rem);
}

.auth-screen .auth-view .login-art-top .eyebrow {
  font-size: clamp(.375rem, .5vw, .625rem);
  letter-spacing: clamp(.05rem, .12vw, .13rem);
}

.auth-screen .auth-view .login-art-top .micro {
  display: none;
  font-size: clamp(.375rem, .5vw, .625rem);
}

.auth-screen .auth-view .login-sphere {
  position: relative;
  inset: auto;
  grid-area: 2 / 1;
  align-self: center;
  justify-self: center;
  display: block;
  width: min(100%, var(--auth-orb));
  max-width: 100%;
  height: auto;
  max-height: none;
  aspect-ratio: 1;
  margin: 0;
  transform-origin: center;
}

.auth-screen .auth-view .login-core-label {
  position: relative;
  inset: auto;
  grid-area: 2 / 1;
  align-self: center;
  justify-self: center;
  transform: none;
  font-size: clamp(1.1rem, 2.2vw, 2.5rem);
  line-height: 1;
  margin: 0;
}

.auth-screen .auth-view .login-core-label > span {
  font-size: .4em;
}

.auth-screen .auth-scan-ring {
  position: relative;
  inset: auto;
  grid-area: 2 / 1;
  align-self: center;
  justify-self: center;
  width: min(100%, var(--auth-orb));
  height: auto;
  aspect-ratio: 1;
  max-width: 100%;
  transform: none;
}

.auth-screen .ring-two {
  width: min(100%, calc(var(--auth-orb) * 1.1));
  height: auto;
  aspect-ratio: 2.25;
  transform: rotate(-18deg);
}

.auth-screen .auth-halo {
  position: relative;
  inset: auto;
  grid-area: 2 / 1;
  align-self: center;
  justify-self: center;
  width: min(100%, var(--auth-orb));
  height: auto;
  aspect-ratio: 1;
}

.auth-screen .auth-coordinate {
  display: none;
  position: relative;
  inset: auto;
  grid-area: 2 / 1;
  align-self: center;
  transform: none;
}

.auth-screen .auth-view .login-art-copy {
  position: relative;
  inset: auto;
  grid-area: 3 / 1;
  justify-self: center;
  width: 100%;
  min-width: 0;
  max-width: 40rem;
  padding: 0;
  margin: 0;
  text-align: center;
}

.auth-screen .auth-view .login-art-copy .eyebrow {
  justify-content: center;
  flex-wrap: wrap;
  font-size: clamp(.375rem, .5vw, .625rem);
  line-height: 1.6;
  letter-spacing: clamp(.05rem, .13vw, .15rem);
}

.auth-screen .auth-statement {
  font-size: clamp(1.4rem, 3vw, 3.8rem);
  font-weight: 300;
  line-height: 1.13;
  letter-spacing: -.035em;
  margin: clamp(.5rem, 1vw, 1rem) 0 .6rem;
  overflow-wrap: break-word;
}

.auth-screen .auth-view .login-art-copy p {
  display: block;
  font-size: clamp(.7rem, .75vw, 1rem);
  line-height: 1.6;
  margin: 0;
}

.auth-screen .auth-platform-line {
  display: flex;
  flex-wrap: wrap;
  position: relative;
  inset: auto;
  grid-area: 4 / 1;
  justify-content: center;
  align-items: center;
  gap: .5rem clamp(.5rem, 1.2vw, 1.5rem);
  width: 100%;
  min-width: 0;
  margin: 0;
  font-size: clamp(.375rem, .5vw, .625rem);
  line-height: 1.6;
}

.auth-screen .auth-view .login-panel {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: .75rem;
  width: 100%;
  min-width: 0;
  height: auto;
  padding: 0;
  margin: 0;
}

.auth-screen .auth-card {
  width: 100%;
  min-width: 0;
  max-width: 40rem;
  height: auto;
  min-height: 0;
  padding: clamp(1rem, 1.6vw, 2.5rem);
  border-radius: clamp(.65rem, 1vw, 1rem);
}

.auth-screen .auth-card-top {
  display: flex;
  align-items: center;
  gap: .65rem;
  min-width: 0;
  margin-bottom: clamp(.9rem, 1.3vw, 1.5rem);
}

.auth-screen .auth-lock {
  width: clamp(1.75rem, 2.4vw, 2.4rem);
  height: clamp(1.75rem, 2.4vw, 2.4rem);
  flex: 0 0 auto;
}

.auth-screen .auth-card-top .tiny-label {
  min-width: 0;
  font-size: clamp(.375rem, .5vw, .625rem);
  line-height: 1.5;
  letter-spacing: clamp(.045rem, .1vw, .13rem);
  overflow-wrap: anywhere;
}

.auth-screen .auth-card-index {
  flex: 0 0 auto;
  font-size: clamp(.375rem, .5vw, .625rem);
  margin-left: auto;
}

.auth-screen .auth-title-wrap > .section-marker {
  display: block;
  font-size: clamp(.4rem, .5vw, .625rem);
  line-height: 1.5;
  letter-spacing: .14em;
  margin: 0 0 .5rem;
}

.auth-screen #login-title {
  font-size: clamp(1.7rem, 2.5vw, 3.3rem);
  line-height: 1.15;
  letter-spacing: -.035em;
  margin: 0 0 .65rem;
  overflow-wrap: break-word;
}

.auth-screen .auth-view .login-intro {
  font-size: clamp(.8rem, .9vw, 1rem);
  line-height: 1.6;
  margin: 0 0 clamp(1rem, 1.2vw, 1.4rem);
  overflow-wrap: break-word;
}

.auth-screen .login-intro br { display: none; }
.auth-screen #login-form { min-width: 0; }

.auth-screen .auth-card form > label {
  display: block;
  font-size: clamp(.75rem, .85vw, 1rem);
  line-height: 1.5;
  margin: .75rem 0 .5rem;
}

.auth-screen .auth-card .input-wrap {
  min-width: 0;
  min-height: 3.25rem;
  gap: .65rem;
  padding-left: clamp(.75rem, 1vw, 1rem);
}

.auth-screen .auth-card .input-wrap > .icon {
  flex: 0 0 auto;
  width: 1rem;
  height: 1rem;
}

.auth-screen .auth-card .input-wrap input {
  flex: 1 1 0;
  width: 0;
  min-width: 0;
  max-width: 100%;
  font-size: clamp(1rem, 1vw, 1.25rem);
  line-height: 1.5;
  padding: .75rem 0;
}

.auth-screen .auth-card .password-toggle {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 2.75rem;
  min-width: 2.75rem;
  min-height: 2.75rem;
  padding: .75rem;
}

.auth-screen .auth-card .form-error {
  height: auto;
  min-height: 1.5rem;
  font-size: clamp(.7rem, .8vw, .9rem);
  line-height: 1.5;
  overflow-wrap: anywhere;
  margin: .5rem 0 .2rem;
}

.auth-screen .auth-card .login-submit {
  min-width: 0;
  width: 100%;
  height: auto;
  min-height: 3.125rem;
  padding: .8rem clamp(.8rem, 1vw, 1.2rem);
  font-size: clamp(.8rem, .9vw, 1.05rem);
  line-height: 1.5;
  white-space: normal;
  text-align: left;
}

.auth-screen .auth-card .login-submit > span:first-child {
  min-width: 0;
  overflow-wrap: anywhere;
}

.auth-screen .auth-button-end { flex: 0 0 1.125rem; }

.auth-screen .auth-card .demo-card {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  column-gap: .6rem;
  row-gap: .35rem;
  min-width: 0;
  padding: .75rem;
  margin-top: 1rem;
}

.auth-screen .auth-card .demo-card > div { display: contents; }
.auth-screen .auth-card .demo-card .tiny-label {
  grid-area: 1 / 1;
  align-self: end;
  min-width: 0;
  font-size: clamp(.4rem, .5vw, .625rem);
  line-height: 1.5;
  letter-spacing: .12em;
}

.auth-screen .auth-card .demo-card .text-button {
  grid-area: 1 / 2 / 3 / 3;
  align-self: center;
  justify-content: center;
  min-width: 2.75rem;
  min-height: 2.75rem;
  padding: .35rem;
  margin: 0;
  font-size: clamp(.65rem, .75vw, .85rem);
  line-height: 1.5;
}

.auth-screen .auth-card .demo-card p {
  display: flex;
  flex-wrap: wrap;
  grid-area: 2 / 1;
  gap: .25rem .75rem;
  min-width: 0;
  font-size: clamp(.65rem, .75vw, .85rem);
  line-height: 1.5;
  margin: 0;
}

.auth-screen .auth-card .demo-card p > span {
  flex-wrap: wrap;
  min-width: 0;
  gap: .25rem;
}

.auth-screen .auth-card .demo-card p > i { display: none; }
.auth-screen .auth-card .demo-card code {
  font-size: clamp(.7rem, .8vw, .95rem);
  line-height: 1.5;
  overflow-wrap: anywhere;
}

.auth-screen .auth-demo-note {
  display: block;
  grid-area: 3 / 1 / 4 / -1;
  min-width: 0;
  font-size: clamp(.65rem, .75vw, .85rem);
  line-height: 1.5;
  overflow-wrap: break-word;
}

.auth-screen .auth-card .invitation-note {
  display: flex;
  justify-content: center;
  align-items: flex-start;
  gap: .4rem;
  min-width: 0;
  font-size: clamp(.65rem, .75vw, .85rem);
  line-height: 1.5;
  margin: .75rem 0 0;
  overflow-wrap: break-word;
}

.auth-screen .auth-card .invitation-note .icon { margin-top: .2em; }
.auth-screen .auth-panel-foot {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: .5rem;
  min-width: 0;
  font-size: clamp(.375rem, .5vw, .625rem);
  line-height: 1.6;
  letter-spacing: .14em;
  text-align: center;
}

@media (min-width: 56rem) {
  .auth-screen {
    --auth-orb: clamp(16rem, 34vw, 56rem);
  }
  .auth-screen .auth-view {
    grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
  }
  .auth-screen .auth-view .login-art-copy { text-align: left; }
  .auth-screen .auth-view .login-art-copy .eyebrow { justify-content: flex-start; }
  .auth-screen .auth-platform-line { justify-content: flex-start; }
  .auth-screen .auth-view .login-art-top .micro { display: block; }
}

@supports (height: 1svh) {
  @media (min-width: 56rem) {
    .auth-screen { --auth-orb: clamp(16rem, min(34vw, 48svh), 56rem); }
  }
}

@media (min-width: 62rem) {
  .auth-screen .auth-coordinate { display: block; }
  .auth-screen .coordinate-left { justify-self: start; }
  .auth-screen .coordinate-right {
    display: flex;
    justify-self: end;
    align-items: center;
    gap: .4rem;
    font-size: clamp(.375rem, .45vw, .625rem);
  }
}

@media (min-width: 44rem) and (max-height: 32rem) {
  .auth-screen { --auth-orb: clamp(10rem, 26vw, 18rem); }
  .auth-screen .auth-view { grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); }
  .auth-screen .auth-view .login-art-copy { text-align: left; }
  .auth-screen .auth-view .login-art-copy .eyebrow { justify-content: flex-start; }
  .auth-screen .auth-statement { font-size: clamp(1.4rem, 2.6vw, 2.2rem); }
}

@media (max-width: 40rem) {
  .auth-screen .auth-view { row-gap: 1rem; }
  .auth-screen .auth-view .login-art-copy p,
  .auth-screen .auth-platform-line { display: none; }
  .auth-screen .auth-card { max-width: 34rem; }
}

@media (prefers-reduced-motion: reduce) {
  .auth-screen .auth-view .login-sphere { transition: none; }
}