/* Native WordPress authentication; one shared stage for its presentation.
 * The presentational wrappers use display: contents so the native form,
 * notices and footer links share the same columns without moving WP markup.
 */
body.login {
  --login-gutter: clamp(3rem, 8vw, 9rem);
  display: grid;
  grid-template-columns: minmax(0, 1fr) var(--login-gutter) repeat(2, minmax(0, 13.75rem));
  grid-template-rows:
    [brand] auto [top-rule] auto [headline] auto
    [status] auto [errors] auto [message] auto [form] auto
    [bottom-rule] auto [footer] auto [privacy] auto;
  align-content: center;
  width: min(calc(100% - clamp(2rem, 12vw, 12rem)), 70rem);
  min-height: 100vh;
  margin: 0 auto;
  padding-block: clamp(3rem, 9vh, 7rem);
  box-sizing: border-box;
  color-scheme: dark;
  color: var(--bp-text, #d3d3d3);
  background:
    radial-gradient(ellipse at 17% 78%, rgba(37, 92, 111, 0.36), transparent 43%),
    radial-gradient(ellipse at 52% 19%, rgba(255, 255, 255, 0.065), transparent 42%),
    var(--bp-app, #000);
  font-family: 'roboto-regular', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
}

/* Full-stage rules, including when WordPress omits the language selector. */
body.login::before,
body.login::after {
  content: '';
  grid-column: 1 / -1;
  height: 1px;
  background: var(--bp-border-strong, #505055);
}

body.login::before {
  grid-row: top-rule;
  margin-block: 1.25rem 3rem;
}

body.login::after {
  grid-row: bottom-rule;
  margin-block: 2.5rem 2rem;
}

body.login #login,
.bandpal-login-stage,
.bandpal-login-stage__intro {
  display: contents;
}

.bandpal-login-stage__logo {
  grid-column: 1 / -1;
  grid-row: brand;
  display: block;
  /* Compensate only the existing SVG's internal whitespace, not its ratio. */
  width: min(23rem, 100%);
  height: auto;
  margin-left: -1.5rem;
  margin-block: -1.5rem -1rem;
}

.bandpal-login-stage h2 {
  grid-column: 3 / -1;
  grid-row: headline;
  align-self: start;
  margin: 0 0 1.5rem;
  color: var(--bp-text-strong, #f0f0ed);
  font-size: 2.55rem;
  font-weight: 700;
  letter-spacing: -0.045em;
  line-height: 1.08;
}

.bandpal-login-stage__preview {
  grid-column: 1;
  grid-row: headline / bottom-rule;
  position: relative;
  align-self: start;
  min-width: 0;
  width: 100%;
  /* This is a locally bounded card composition, not the height of the grid row. */
  height: 29.5rem;
}

/* Native states retain separate flow slots above the form. */
body.login #login > * {
  grid-column: 3 / -1;
  min-width: 0;
}

body.login #login > .message,
body.login #login > .success {
  grid-row: status;
}

body.login #login > #login_error {
  grid-row: errors;
}

body.login #login > #login-message {
  grid-row: message;
}

body.login #login > form {
 
  align-self: start;
}

.bandpal-login-card {
  box-sizing: border-box;
  min-width: 0;
  padding: 1.25rem;
  border: 1px solid var(--bp-border-subtle, #2c2c2c);
  border-radius: 0.7rem;
  color: var(--bp-text-secondary, #b5b5b2);
  background: linear-gradient(145deg, color-mix(in srgb, var(--bp-surface-raised, #24242a) 95%, transparent), var(--bp-surface-card, #181818));
  box-shadow: -0.35rem 0.65rem 1rem rgba(0, 0, 0, 0.7);
}

/* Offsets belong only to this bounded preview canvas. */
.bandpal-login-stage__preview .bandpal-login-card {
  position: absolute;
}

.bandpal-login-card--setlist {
  inset: 0 auto auto 0;
  z-index: 1;
  width: 55%;
  min-height: 15.5rem;
}

.bandpal-login-card--calendar {
  top: 22%;
  left: 8%;
  z-index: 2;
  width: 55%;
  min-height: 10.5rem;
}

.bandpal-login-card--tasks {
  top: 39%;
  left: 21%;
  z-index: 3;
  width: 67%;
  min-height: 11.5rem;
}

.bandpal-login-card--player {
  right: 0;
  top: 56%;
  z-index: 4;
  width: 67%;
  min-height: 10.5rem;
}

.bandpal-login-card__eyebrow {
  margin: 0 0 1.15rem;
  color: var(--bp-text-muted, #9a9a9a);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.09em;
  text-transform: uppercase;
}

.bandpal-login-card strong,
.bandpal-login-card span {
  display: block;
}

.bandpal-login-card__meta {
  color: color-mix(in srgb, var(--bp-text-muted, #9a9a9a) 78%, transparent) !important;
  font-size: 0.74rem !important;
}

.bandpal-login-card__items {
  display: grid;
  gap: 0.6rem;
  margin: 0.7rem 0 0;
  padding: 0;
  list-style: none;
  color: var(--bp-text-secondary, #b5b5b2);
  font-size: 0.82rem;
}

.bandpal-login-card strong {
  overflow: hidden;
  color: var(--bp-text-strong, #f0f0ed);
  font-size: 1rem;
  line-height: 1.3;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.bandpal-login-card span {
  margin-top: 0.4rem;
  color: var(--bp-text-muted, #9a9a9a);
  font-size: 0.82rem;
}

.bandpal-login-card__check::before {
  content: '✓';
  display: inline-grid;
  width: 1rem;
  height: 1rem;
  margin-right: 0.35rem;
  border-radius: 50%;
  place-items: center;
  color: var(--bp-green, #97e000);
  background: var(--bp-green-dark, #344808);
  font-size: 0.68rem;
  font-weight: 700;
}

.bandpal-login-card ol {
  display: grid;
  gap: 0.55rem;
  margin: 0;
  padding: 0;
  list-style: none;
  color: var(--bp-text-secondary, #b5b5b2);
  font-size: 0.82rem;
}

.bandpal-login-card li {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.bandpal-login-card ol li::before {
  content: counter(list-item, decimal-leading-zero);
  margin-right: 0.55rem;
  color: var(--bp-system, #4fa3d1);
  font-size: 0.7rem;
  font-variant-numeric: tabular-nums;
}

.bandpal-login-card__items li:not(.bandpal-login-card__check)::before {
  content: '–';
  margin-right: 0.35rem;
  color: var(--bp-text-muted, #9a9a9a);
}

/* Hide only the redundant WP logo, preserving its accessible page heading. */
.login #login > .wp-login-logo {
  display: none;
}

.bandpal-login-card__transport {
  display: flex;
  justify-content: flex-end;
  gap: 0.4rem;
  margin-top: -0.85rem;
  color: var(--bp-text-strong, #f0f0ed);
}

.bandpal-login-card__transport i {
  display: block;
  width: 0.7rem;
  height: 0.85rem;
  background: currentColor;
}

.bandpal-login-card__transport i:first-child {
  clip-path: polygon(0 0, 100% 50%, 0 100%);
}

.bandpal-login-card__transport i:last-child {
  background: linear-gradient(to right, currentColor 35%, transparent 35% 65%, currentColor 65%);
}

.bandpal-login-card__progress {
  position: relative;
  height: 0.5rem;
  margin-top: 0.75rem;
  background: color-mix(in srgb, var(--bp-system, #4fa3d1) 45%, #181818);
}

.bandpal-login-card__progress::after {
  content: '';
  position: absolute;
  left: 72%;
  top: 50%;
  width: 1.5rem;
  height: 1.5rem;
  border-radius: 50%;
  background: var(--bp-system, #4fa3d1);
  transform: translate(-50%, -50%);
}

.login #login > form {
  margin-top: 0;
  padding: clamp(1.75rem, 3vw, 2.25rem);
  border: 1px solid var(--bp-border-subtle, #2c2c2c);
  border-radius: 0.5rem;
  box-shadow: 0 1.25rem 3rem rgba(0, 0, 0, 0.28);
  background: var(--bp-surface-card, #181818);
}

.login label {
  color: var(--bp-text-secondary, #b5b5b2);
  font-size: 0.875rem;
  font-weight: 700;
}

.login input[type='text'],
.login input[type='password'],
.login input[type='email'] {
  min-height: 2.875rem;
  margin-top: 0.4rem;
  padding: 0 0.8rem;
  border: 1px solid var(--bp-border-subtle, #2c2c2c);
  border-radius: 0.35rem;
  color: var(--bp-text-strong, #f0f0ed);
  background: var(--bp-surface-input, #141414);
  box-shadow: none;
}

.login input[type='text']:focus,
.login input[type='password']:focus,
.login input[type='email']:focus {
  border-color: var(--bp-system, #4fa3d1);
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--bp-system, #4fa3d1) 35%, transparent);
}

.login .forgetmenot {
  margin-top: 0.75rem;
}

.login .forgetmenot label {
  color: var(--bp-text-muted, #9a9a9a);
  font-weight: 400;
}

.login input[type='checkbox'] {
  accent-color: var(--bp-system, #4fa3d1);
}

.login.wp-core-ui .button-primary {
  float: none;
  width: 100%;
  min-height: 2.875rem;
  margin-top: 1.25rem;
  border: 1px solid var(--bp-system, #4fa3d1);
  border-radius: 0.35rem;
  color: #fff;
  background: var(--bp-system, #4fa3d1);
  box-shadow: none;
  font-weight: 700;
  text-shadow: none;
}

.login.wp-core-ui .button-primary:hover,
.login.wp-core-ui .button-primary:focus {
  border-color: var(--bp-system, #4fa3d1);
  color: #fff;
  background: var(--bp-system, #4fa3d1);
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--bp-system, #4fa3d1) 35%, transparent);
}

body.login #login > #nav,
body.login #login > #backtoblog {
  grid-row: footer;
  align-self: center;
  margin: 0;
  padding: 0;
  text-align: left;
}

body.login #login > #nav {
  grid-column: 3;
  padding-right: 1rem;
}

body.login #login > #backtoblog {
  grid-column: 4;
}

body.login #login > .privacy-policy-page-link {
  grid-row: privacy;
  margin: 1.5rem 0 0;
  text-align: left;
}

.login #nav a,
.login #backtoblog a,
.login .privacy-policy-page-link a {
  color: var(--bp-text-muted, #9a9a9a);
  font-size: 0.8rem;
}

.login #nav a {
  color: var(--bp-text-link, #4fa3d1);
}

.login .message,
.login .success,
.login #login_error {
  margin: 0 0 1rem;
  border: 1px solid var(--bp-border-subtle, #2c2c2c);
  border-left: 4px solid var(--bp-yellow, #ffb800);
  border-radius: 0.35rem;
  color: var(--bp-text, #d3d3d3);
  background: var(--bp-surface-card, #181818);
  box-shadow: none;
}

.login #login_error {
  border-left-color: var(--bp-red, #fe2102);
}

.login .success {
  border-left-color: var(--bp-green, #97e000);
}

.login .language-switcher {
  grid-column: 1;
  grid-row: footer;
  align-self: center;
  min-width: 0;
  margin: 0;
  padding: 0;
  text-align: left;
}

.login #language-switcher {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: none;
  box-shadow: none;
}

.login #language-switcher label {
  flex: 0 0 auto;
  margin: 0;
}

.login .language-switcher select,
.login .language-switcher .button {
  width: auto;
  min-width: 0;
  max-width: 100%;
  min-height: 2.5rem;
  margin: 0;
  color: var(--bp-text, #d3d3d3);
  border-color: var(--bp-border-subtle, #2c2c2c);
  background: var(--bp-surface-card, #181818);
}

.login .language-switcher select {
  flex: 1 1 7rem;
}

/* Below this width the preview, gutter and unchanged login card no longer fit. */
@media (max-width: 1100px) {
  body.login {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-template-rows:
      [brand] auto [top-rule] auto [headline] auto
      [status] auto [errors] auto [message] auto [form] auto
      [bottom-rule] auto [language] auto [footer] auto [privacy] auto;
    width: min(calc(100% - 2rem), 27.5rem);
    padding-block: clamp(3rem, 10vh, 6rem);
    background:
      radial-gradient(ellipse at 0 20%, rgba(255, 255, 255, 0.045), transparent 60%),
      var(--bp-app, #000);
  }

  .bandpal-login-stage__preview {
    display: none;
  }

  .bandpal-login-stage h2,
  body.login #login > * {
    grid-column: 1 / -1;
  }

  .bandpal-login-stage h2 {
    font-size: clamp(1.7rem, 8.5vw, 2.55rem);
  }

  .bandpal-login-stage__logo {
    width: min(23rem, 100%);
    margin-left: max(-1.5rem, -6.5%);
  }

  body.login::before {
    margin-block: 1.25rem 2.25rem;
  }

  .login #login > form {
    padding: clamp(1.25rem, 5.5vw, 2.25rem);
  }

  .login .language-switcher {
    grid-column: 1 / -1;
    grid-row: language;
    margin-bottom: 2rem;
  }

  body.login #login > #nav {
    grid-column: 1;
  }

  body.login #login > #backtoblog {
    grid-column: 2;
  }
}