/* Host-only seams. Canonical component styling remains in upstream/components.css. */
html,
body {
  min-block-size: 100%;
  margin: 0;
}

.nxt-login-host,
.nxt-login-host *,
.nxt-auth-wall-host,
.nxt-auth-wall-host * {
  box-sizing: border-box;
}

.nxt-login-host,
.nxt-auth-wall-host {
  min-block-size: var(--viewport-block-full);
}

.nxt-login-host .nxt-login-panel-only {
  display: contents;
}

.nxt-login-host .nxt-login-panel-only > .nxt-login-wall {
  display: none;
}

.nxt-login-host[data-optional-actions="false"] .nxt-login-forgot-link,
.nxt-login-host[data-optional-actions="false"] .nxt-login-separator,
.nxt-login-host[data-optional-actions="false"] .nxt-login-foot,
.nxt-login-host[data-optional-actions="false"] .nxt-login-action[data-emphasis="outline"] {
  display: none;
}

@media (min-width: 768px) {
  .nxt-login-host[data-optional-actions="false"] .nxt-login-password-row .nxt-field-header {
    padding-inline-end: 0;
  }
}

@media (min-width: 960px) {
  :is(.nxt-login-host, .nxt-auth-wall-host) {
    --nxt-login-content-inset: clamp(
      var(--space-9),
      26vh,
      calc(var(--space-10) + var(--space-10) + var(--space-8))
    );
  }

  :is(.nxt-login-host, .nxt-auth-wall-host) .nxt-login-wall {
    padding: var(--space-6);
  }

  :is(.nxt-login-host, .nxt-auth-wall-host) .nxt-login-wall,
  .nxt-login-host .nxt-login-panel {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: var(--nxt-login-content-inset) auto minmax(var(--space-6), 1fr);
    align-items: start;
    row-gap: 0;
    padding-block: var(--space-6);
  }

  :is(.nxt-login-host, .nxt-auth-wall-host) .nxt-login-wall-headline {
    grid-row: 2;
    align-self: start;
    justify-self: start;
    inline-size: min(100%, calc(var(--field-w-long) - var(--space-6)));
    margin: 0;
    padding: var(--space-2);
    background: var(--bg-inverse);
  }

  .nxt-login-host .nxt-login-form {
    grid-row: 2;
    align-self: start;
    justify-self: center;
    inline-size: 100%;
  }

  .nxt-login-host .nxt-login-form-brand {
    margin-block-end: var(--space-6);
  }

  .nxt-login-host .nxt-login-meta {
    margin-block: var(--space-5);
  }

  /* The split column is narrower than the viewport; keep Login's intended
     desktop wall at its canonical 4-column / 8-slot geometry. */
  :is(.nxt-login-host, .nxt-auth-wall-host) .nxt-login-logo-wall .nxt-logo-wall__list {
    --lw-columns: 4;
    --lw-visible: 8;
  }
}

/* --bp-xl del DS. En escritorio amplio el hero gana jerarquía sin llevar el
   panel de autenticación por debajo de la medida larga de formulario. */
@media (min-width: 1200px) {
  .nxt-login-host .nxt-login {
    grid-template-columns: minmax(0, 1.4fr) minmax(var(--field-w-long), 1fr);
  }
}

:is(.nxt-login-host, .nxt-auth-wall-host) .nxt-login-screen-wall .nxt-screen-wall__runtime--static::before {
  -webkit-mask-image: url("../assets/brand/nextcaddy-wordmark.svg");
  mask-image: url("../assets/brand/nextcaddy-wordmark.svg");
}

/* ScreenWall carries sufficient tonal contrast in this host configuration. */
:is(.nxt-login-host, .nxt-auth-wall-host) .nxt-login-wall-scrim {
  display: none;
}

/* The headline is visual context over ScreenWall. Let pointer input reach the
   custom element below so its hover, reveal and proximity modes stay usable. */
:is(.nxt-login-host, .nxt-auth-wall-host) :is(.nxt-login, .nxt-auth-wall)[data-wall-visual="screen-wall"] .nxt-login-wall-headline {
  pointer-events: none;
}

.nxt-login-native-submit {
  display: none;
}

.nxt-login-noscript {
  max-inline-size: var(--field-w-long);
  margin: var(--space-8) auto;
  padding: var(--space-5);
  color: var(--fg-primary);
  background: var(--bg-surface);
  border: var(--hairline-size) solid var(--border-subtle);
  font-family: var(--font-sans);
}