/* FINORA sign-in: grouped identity, readable controls, a compact brand panel. */
@layer components {
  .login-page:has(> .login-brand) {
    --font-family-sans: "IBM Plex Sans", "Segoe UI", sans-serif;
    --login-wordmark-size: 3.5rem;
    --login-purpose-size: 2.5rem;
    --login-panel-max: 30rem;
    --login-card-max: 30rem;
    font-family: var(--font-family-sans);
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: auto minmax(0, 1fr);
    align-content: stretch;
    justify-items: stretch;
    gap: 0;
    padding: 0;
    min-block-size: 100svh;
  }

  .login-brand {
    display: grid;
    gap: var(--space-6);
    align-content: start;
    margin-inline: 0;
    padding: var(--space-6) var(--layout-gutter);
    background-color: var(--color-brand);
    color: var(--color-brand-fg);
  }
  .login-brand-content {
    display: grid;
    gap: var(--space-8);
    min-inline-size: 0;
  }
  .login-brand-identity, .login-product, .login-brand-copy {
    display: grid;
    gap: var(--space-2);
    min-inline-size: 0;
  }
  .login-brand p { margin: 0; }
  .login-brand .login-wordmark {
    font-size: var(--text-3xl);
    line-height: 1;
    letter-spacing: var(--tracking-tight);
  }
  .login-product-full {
    max-inline-size: 26ch;
    color: color-mix(in srgb, var(--color-brand-fg) 88%, var(--color-brand));
    font-size: var(--text-sm);
    line-height: var(--leading-normal);
  }
  .login-brand-line {
    max-inline-size: 32ch;
    color: color-mix(in srgb, var(--color-brand-fg) 90%, var(--color-brand));
    font-size: var(--text-md);
    line-height: var(--leading-normal);
    text-wrap: pretty;
  }
  .login-brand-line.login-brand-lead {
    max-inline-size: 15ch;
    color: var(--color-brand-fg);
    font-family: var(--font-family-display);
    font-size: var(--text-2xl);
    font-weight: var(--font-weight-semibold);
    line-height: var(--leading-tight);
    letter-spacing: var(--tracking-tight);
    text-wrap: balance;
  }
  .login-brand-footer {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-4);
  }
  .login-mark {
    display: inline-flex;
    align-items: center;
    gap: var(--space-3);
    color: var(--color-brand-fg);
    font-family: var(--font-family-display);
    font-size: var(--text-lg);
    font-weight: var(--font-weight-semibold);
    line-height: var(--leading-tight);
  }
  .login-mark b {
    padding: var(--space-1) var(--space-2);
    border: var(--border-width-hairline) solid currentColor;
    font-size: var(--text-sm);
    font-weight: var(--font-weight-semibold);
    letter-spacing: var(--tracking-wide);
    line-height: 1;
  }
  .login-brand-legal {
    color: color-mix(in srgb, var(--color-brand-fg) 82%, var(--color-brand));
    font-size: var(--text-xs);
    line-height: var(--leading-normal);
  }
  .login-brand-legal small { font-size: inherit; }

  .login-page:has(> .login-brand) > .login-main {
    align-content: center;
    padding: var(--space-8) var(--layout-gutter) var(--space-10);
    background:
      linear-gradient(90deg,
        color-mix(in srgb, var(--color-surface-1) 38%, transparent),
        color-mix(in srgb, var(--color-surface-1) 58%, transparent)),
      url("../../images/login-impact-hub-background.webp") center / cover no-repeat var(--color-bg-canvas);
  }
  .login-card {
    position: relative;
    inline-size: min(100%, var(--login-card-max));
    gap: var(--space-5);
    padding: var(--space-8);
    background-color: var(--color-surface-1);
    border: 0;
    border-radius: var(--radius-lg);
    box-shadow: 0 18px 40px -8px color-mix(in srgb, var(--color-brand) 16%, transparent);
    animation: login-card-enter var(--motion-duration-slow) var(--motion-ease-enter) backwards;
  }
  .login-card > p { margin: 0; }
  .login-card-header {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    justify-content: stretch;
    align-items: start;
    gap: var(--space-5);
    min-inline-size: 0;
  }
  .login-card .language-switch { justify-self: end; }
  .login-card .language-switch a {
    min-block-size: var(--size-control-lg);
    padding-inline: var(--space-3);
    gap: var(--space-2);
    font-size: var(--text-sm);
    border-radius: var(--radius-md);
  }
  .login-card .language-switch .icon {
    inline-size: var(--text-lg);
    block-size: var(--text-lg);
  }
  .login-headline {
    font-size: var(--text-3xl);
    line-height: var(--leading-tight);
  }
  .login-intro {
    font-size: var(--text-md);
    line-height: var(--leading-normal);
  }
  .login-form { gap: var(--space-5); }
  .login-form label { font-size: var(--text-base); }
  .login-form input {
    min-block-size: var(--size-control-lg);
    padding: var(--space-3);
    font-family: var(--font-family-sans);
    font-size: var(--text-md);
    caret-color: var(--color-brand);
  }
  .login-form .button {
    min-block-size: var(--size-control-lg);
    margin-block-start: var(--space-1);
    font-size: var(--text-md);
  }
  .login-channel-note {
    padding-block-start: var(--space-5);
    border-block-start: var(--border-width-hairline) solid var(--color-border-subtle);
    color: var(--color-text-secondary);
    font-size: var(--text-sm);
    line-height: var(--leading-normal);
  }
  .login-footer {
    color: var(--color-text-muted);
    font-size: var(--text-sm);
    line-height: var(--leading-normal);
    text-align: start;
  }
  .login-page ::selection { background: var(--color-brand); color: var(--color-brand-fg); }
  .login-brand ::selection { background: var(--color-brand-fg); color: var(--color-brand); }

  @keyframes login-card-enter {
    from { transform: translateY(var(--space-3)); }
    to { transform: none; }
  }

  @media (max-width: 39.9375rem) {
    .login-brand { grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: var(--space-4); }
    .login-brand-content { gap: var(--space-4); }
    .login-brand-copy { display: none; }
    .login-brand-legal { display: none; }
    .login-product-full { display: none; }
    .login-brand-footer { justify-content: start; }
    .login-page:has(> .login-brand) > .login-main { padding: var(--space-6) var(--space-4); }
    .login-card { padding: var(--space-6); }
    .login-headline { font-size: var(--text-2xl); }
  }

  @media (min-width: 40rem) {
    .login-brand { padding: var(--space-8) var(--space-10); }
    .login-brand-content { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--space-8); }
    .login-brand .login-wordmark { font-size: var(--login-wordmark-size); }
    .login-product-full { font-size: var(--text-base); }
    .login-page:has(> .login-brand) > .login-main { padding: var(--space-10); }
    .login-card { padding: var(--space-10); }
  }

  @media (min-width: 64rem) {
    .login-page:has(> .login-brand) {
      grid-template-columns: minmax(20rem, min(32vw, var(--login-panel-max))) minmax(0, 1fr);
      grid-template-rows: minmax(100svh, auto);
    }
    .login-brand {
      grid-template-rows: minmax(0, 1fr) auto;
      gap: var(--space-10);
      padding: var(--space-12) var(--space-10);
    }
    .login-brand-content {
      grid-template-columns: minmax(0, 1fr);
      align-self: center;
      gap: var(--space-10);
      padding-block: var(--space-6);
    }
    .login-brand-copy { gap: var(--space-4); }
    .login-brand-line { font-size: var(--text-lg); }
    .login-brand-line.login-brand-lead { font-size: var(--login-purpose-size); }
    .login-product-full { max-inline-size: none; font-size: var(--text-md); }
    .login-brand-footer { display: grid; gap: var(--space-5); justify-content: start; }
    .login-mark { font-size: var(--text-xl); }
    .login-mark b { padding: var(--space-2); font-size: var(--text-md); }
    .login-page:has(> .login-brand) > .login-main { padding: var(--space-12) var(--space-10); }
  }

  @media (prefers-reduced-motion: reduce) {
    .login-card { animation: none; }
  }
  @media (forced-colors: active) {
    .login-page:has(> .login-brand) > .login-main { background: Canvas; }
    .login-card { border: var(--border-width-hairline) solid CanvasText; }
  }
}