@layer organisms {
  .login-page {
    --login-panel-width: min(100%, 28rem);
    --login-hero-width: min(100%, 34rem);
    min-height: 100dvh;
    display: grid;
    align-items: center;
    padding: clamp(var(--space-4), 3vw, var(--space-8));
    background:
      radial-gradient(circle at top left, rgb(255 255 255 / 0.3), transparent 24rem),
      radial-gradient(circle at bottom right, rgb(255 255 255 / 0.18), transparent 22rem),
      var(--color-brand-gradient-soft),
      linear-gradient(180deg, rgb(255 255 255 / 0.72), rgb(255 255 255 / 0.72)),
      var(--color-surface-muted);

    .login-page__layout {
      display: grid;
      width: min(100%, 72rem);
      margin-inline: auto;
      align-items: center;
      gap: clamp(var(--space-8), 6vw, var(--space-16));
      grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .login-page__hero {
      display: grid;
      max-width: var(--login-hero-width);
      gap: var(--space-5);
    }

    .login-page__eyebrow {
      width: fit-content;
      padding: 0.45rem 0.85rem;
      border: var(--border-width) solid color-mix(in srgb, var(--color-brand-primary) 22%, white);
      border-radius: var(--radius-pill);
      background: color-mix(in srgb, var(--color-brand-primary-soft) 76%, white);
      color: var(--color-brand-primary-dark);
      font-size: var(--font-size-xs);
      font-weight: 700;
      letter-spacing: 0.08em;
      text-transform: uppercase;
    }

    .login-page__title {
      margin: 0;
      color: var(--color-text);
      font-size: clamp(2.2rem, 4vw, 4.2rem);
      line-height: 0.96;
      letter-spacing: -0.04em;
      text-wrap: balance;
    }

    .login-page__lead {
      max-width: 34ch;
      margin: 0;
      color: var(--color-text-muted);
      font-size: clamp(var(--font-size-md), 1rem + 0.35vw, var(--font-size-lg));
    }

    .login-page__meta {
      display: flex;
      flex-wrap: wrap;
      gap: var(--space-3);
      margin: 0;
      padding: 0;
      list-style: none;
    }

    .login-page__meta-item {
      display: inline-flex;
      align-items: center;
      gap: var(--space-2);
      padding: 0.75rem 0.95rem;
      border: var(--border-width) solid color-mix(in srgb, var(--color-border) 88%, white);
      border-radius: var(--radius-pill);
      background: rgb(255 255 255 / 0.68);
      box-shadow: var(--shadow-sm);
      color: var(--color-text-muted);
      font-size: var(--font-size-sm);
      font-weight: 500;
      backdrop-filter: blur(10px);
    }

    .login-page__panel {
      display: grid;
      width: var(--login-panel-width);
      justify-self: end;
      gap: var(--space-6);
      padding: clamp(var(--space-6), 3vw, var(--space-8));
      border-color: color-mix(in srgb, var(--color-brand-primary) 20%, var(--color-border));
      box-shadow: var(--shadow-lg);
    }

    .login-page__brand {
      display: grid;
      justify-items: start;
      gap: var(--space-2);
    }

    .login-page__logo {
      width: clamp(10rem, 25vw, 14rem);
      height: auto;
      margin-inline: auto;
      object-fit: contain;
    }

    .login-page__brand-copy {
      display: grid;
      gap: var(--space-2);
    }

    .login-page__brand-title {
      margin: 0;
      color: var(--color-text);
      font-size: clamp(1.55rem, 1.25rem + 1vw, 2rem);
      line-height: 1.05;
    }

    .login-page__brand-subtitle {
      margin: 0;
      color: var(--color-text-muted);
      font-size: var(--font-size-sm);
    }
  }

  .login-form {
    display: grid;
    gap: var(--space-5);

    .login-form__fields {
      display: grid;
      gap: var(--space-4);
    }

    .login-form__password-wrap {
      position: relative;
      display: grid;
      align-items: center;

      input {
        padding-inline-end: 6.5rem;
      }
    }

    .login-form__toggle {
      position: absolute;
      top: 50%;
      right: var(--space-2);
      min-height: 2rem;
      padding-inline: 0.75rem;
      border: 0;
      border-radius: var(--radius-pill);
      background: transparent;
      color: var(--color-brand-primary);
      font-size: var(--font-size-xs);
      font-weight: 700;
      letter-spacing: 0.02em;
      transform: translateY(-50%);

      &:hover {
        background: color-mix(in srgb, var(--color-brand-primary) 14%, white);
        color: var(--color-brand-primary-dark);
      }

      &:focus-visible {
        box-shadow: var(--focus-ring);
      }
    }

    .login-form__actions {
      display: grid;
      gap: var(--space-3);
    }

    .login-form__submit {
      width: 100%;
      min-height: 3rem;
      font-size: var(--font-size-md);
    }

    .login-form__hint {
      margin: 0;
      color: var(--color-text-subtle);
      font-size: var(--font-size-xs);
    }

    .login-form__submit-status {
      display: none;
    }

    &.is-submitting {
      .login-form__submit {
        pointer-events: none;
      }

      .login-form__submit-label {
        opacity: 0;
      }

      .login-form__submit-status {
        display: inline;
      }
    }
  }

  @media (max-width: 56rem) {
    .login-page {
      .login-page__layout {
        grid-template-columns: 1fr;
      }

      :is(.login-page__hero, .login-page__panel) {
        width: 100%;
        max-width: none;
      }

      .login-page__panel {
        justify-self: stretch;
      }
    }
  }

  @media (max-width: 36rem) {
    .login-page {
      .login-page__meta {
        display: grid;
      }

      .login-page__meta-item {
        width: 100%;
        justify-content: center;
      }
    }
  }
}