@layer pages {
  /* Reset Pico's article > header sectioning pattern: we don't want the
     negative-margin "header band" with its own bg + bottom border on the
     auth card — Stripe-style auth cards have a plain h1 sitting in the
     normal content flow above the form, separated by whitespace only. */
  .login-card > header {
    margin: 0 0 calc(var(--app-spacing) * 2) 0;
    padding: 0;
    background: transparent;
    border: 0;
    border-radius: 0;
  }

  .login-card > header h1 {
    margin: 0;
    font-size: var(--text-xl);
    font-weight: var(--font-semibold);
    letter-spacing: var(--tracking-tight);
  }

  /* Login forms rely on a full-width primary submit button as the main CTA.
     Global button[type="submit"] no longer defaults to width:100%, so we
     restore that specifically for the auth flow — including the Pico-style
     <p> button wrappers used across all stages. */
  .login-main form > button[type="submit"],
  .login-main form > .grid > button[type="submit"],
  .login-main form > p > button[type="submit"] {
    width: 100%;
  }

  /* ── Logo (brand pane) — sits directly on the patterned brand-pane bg
     without card chrome. Halo + tinted background give visual anchor. ── */

  .login-logo {
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .login-logo-link:focus-visible {
    outline: 2px solid var(--app-primary-focus);
    outline-offset: 2px;
  }

  .login-logo-img {
    max-height: 6rem;
    max-width: 16rem;
    object-fit: contain;
    display: block;
  }

  /* ── Password toggle ── */

  .login-password-wrapper {
    position: relative;
    display: block;
  }

  .login-password-wrapper > input {
    padding-right: 2.75rem;
  }

  .login-password-toggle {
    position: absolute;
    right: 0.5rem;
    top: calc(50% - 8px);
    transform: translateY(-50%);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2rem;
    height: 2rem;
    padding: 0;
    margin: 0;
    background: transparent;
    border: 0;
    color: var(--app-muted-color);
    cursor: pointer;
    font-size: var(--text-base);
    border-radius: var(--app-border-radius);
    transition: color 0.15s ease;
  }

  .login-password-toggle:hover {
    color: var(--app-contrast);
  }

  .login-password-toggle:focus-visible {
    outline: 2px solid var(--app-primary-focus);
    outline-offset: 1px;
  }

  /* ── Split layout: form pane (left) + brand pane (right) ──
     The body is a flex-column so the footer sits full-width at the bottom
     across both panes; main grows to fill the remaining viewport height. */

  body:has(main.login-main) {
    display: flex;
    flex-direction: column;
    min-height: 100dvh;
  }

  body:has(main.login-main) > .site-footer {
    flex: 0 0 auto;
  }

  main.login-main {
    flex: 1 1 auto;
    display: grid;
    grid-template-columns: 1fr;
    margin: 0;
    min-height: 0;
    /* Override global "body > main" padding-block so the split panes
       reach the very top + bottom edges of their column. */
    padding-block: 0;
  }

  .login-form-pane {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: calc(var(--app-spacing) * 2) var(--app-spacing);
  }

  .login-brand-pane {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: calc(var(--app-spacing) * 2) var(--app-spacing);
    min-height: 6rem;
    position: relative;
    isolation: isolate;
    /* Three layers, top → bottom:
       1. Soft radial halo behind the logo (Tenant-Accent glow).
       2. Dot grid (subtle, 24px spacing).
       3. Tinted base bg. */
    background:
      radial-gradient(
        circle at 50% 50%,
        color-mix(in srgb, var(--app-primary) 18%, transparent),
        transparent 55%
      ),
      radial-gradient(
          circle,
          color-mix(in srgb, var(--app-primary) 22%, transparent) 1px,
          transparent 1.5px
        )
        0 0 / 24px 24px,
      color-mix(in srgb, var(--app-primary) 6%, var(--app-background-color));
  }

  .login-brand-pane > * {
    position: relative;
    z-index: 1;
  }

  .login-content-container {
    position: relative;
    z-index: 1;
    width: min(330px, calc(100vw - 2rem));
  }

  .login-card {
    border: 1px solid color-mix(in srgb, var(--app-border) 40%, transparent);
    border-radius: calc(var(--app-border-radius) * 1.5);
    box-shadow:
      0 8px 24px rgba(0, 0, 0, 0.06),
      0 1px 3px rgba(0, 0, 0, 0.04);
    margin-bottom: 0;
  }

  [data-theme="dark"] .login-card {
    box-shadow:
      0 8px 24px rgba(0, 0, 0, 0.35),
      0 1px 3px rgba(0, 0, 0, 0.2);
  }

  .login-tenant-select-form {
    margin-bottom: 1rem;
  }

  .login-tenant-fieldset {
    border: 0;
    margin: 0 0 1rem;
    padding: 0;
  }

  .login-tenant-select-label {
    display: block;
    margin-bottom: 0.5rem;
    font-weight: var(--font-semibold);
  }

  .login-tenant-choice-grid {
    display: grid;
    gap: 0.625rem;
    margin-bottom: 2rem;
  }
  .login-tenant-choice {
    align-items: stretch;
    margin: 0;
    width: 100%;
    padding: 0.625rem 0.75rem;
    border: 1px solid var(--app-border);
    border-radius: var(--app-border-radius);
    background: var(--app-card-background-color);
    justify-content: space-between;
    transition:
      border-color 0.15s ease,
      box-shadow 0.15s ease,
      background-color 0.15s ease;
    flex-direction: row-reverse;
  }

  .login-tenant-choice:hover {
    border-color: var(--app-primary);
  }

  .login-tenant-choice:has(input[type="radio"]:checked) {
    border-color: var(--app-primary);
    box-shadow: 0 0 0 1px var(--app-primary);
    background: color-mix(
      in srgb,
      var(--app-primary) 8%,
      var(--app-card-background-color)
    );
  }

  .login-tenant-choice:has(input[type="radio"]:focus-visible) {
    outline: 2px solid var(--app-primary-focus);
    outline-offset: 2px;
  }

  .login-tenant-choice input[type="radio"] {
    align-self: center;
  }

  .login-tenant-choice-text {
    flex: 1 1 auto;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .login-alt-separator {
    position: relative;
    margin: 1rem 0;
    text-align: center;
  }

  .login-alt-separator::before {
    content: "";
    position: absolute;
    top: 50%;
    left: 0;
    right: 0;
    border-top: 1px solid var(--app-border);
    transform: translateY(-50%);
  }

  .login-alt-separator span {
    position: relative;
    z-index: 1;
    display: inline-block;
    padding: 0 0.75rem;
    font-size: var(--text-sm);
    color: var(--app-muted-color);
    background: var(--app-card-background-color);
  }

  .login-microsoft-link {
    display: block;
    width: 100%;
    text-align: center;
  }

  .login-methods-stack {
    display: grid;
    gap: 0.7rem;
    margin-block: 0.2rem 0.45rem;
  }

  .login-password-form {
    margin-top: 0.25rem;
  }

  .login-password-form > p:last-of-type {
    margin-bottom: 0;
  }

  .login-identity-pill {
    display: flex;
    align-items: center;
    gap: calc(var(--app-spacing) * 0.625);
    padding: calc(var(--app-spacing) * 0.5) calc(var(--app-spacing) * 0.625);
    margin-bottom: var(--app-spacing);
    background: color-mix(in srgb, var(--app-color) 4%, transparent);
    border: 1px solid color-mix(in srgb, var(--app-border) 40%, transparent);
    border-radius: calc(var(--app-border-radius) * 1.1);
    font-size: var(--text-sm);
  }

  .login-identity-pill-icon {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    color: var(--app-muted-color);
    font-size: var(--text-xl);
  }

  .login-identity-pill-email {
    flex: 1 1 auto;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: var(--app-color);
  }

  .login-identity-pill-reset-form {
    margin: 0;
    flex-shrink: 0;
  }

  .login-identity-pill-reset-form button {
    width: auto;
    padding: 4px 10px;
    line-height: var(--leading-none);
  }

  .login-help-links {
    margin: calc(var(--app-spacing) * 1.25) 0 0;
    padding-top: var(--app-spacing);
    border-top: 1px solid color-mix(in srgb, var(--app-border) 40%, transparent);
  }

  .login-help-links-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: calc(var(--app-spacing) * 0.5);
    font-size: var(--text-xs);
  }

  .login-help-links-item {
    display: inline-flex;
    align-items: center;
    margin: 0;
    padding: 0;
    color: var(--app-muted-color);
  }

  .login-help-links-item a {
    color: var(--app-muted-color);
    text-decoration: none;
    transition: color 120ms ease;
  }

  .login-help-links-item a:hover,
  .login-help-links-item a:focus-visible {
    color: var(--app-color);
    text-decoration: underline;
  }

  .login-help-links-item + .login-help-links-item::before {
    content: "·";
    margin-right: calc(var(--app-spacing) * 0.5);
    color: var(--app-muted-color);
    opacity: 0.6;
  }

  form[aria-busy="true"] button[type="submit"],
  button[data-submit-state="loading"] {
    opacity: 0.75;
    cursor: wait;
  }

  /* Mobile: brand pane stacks on top as a slim band, then form pane below. */
  @media (max-width: 767px) {
    .login-brand-pane {
      min-height: 7rem;
      padding: calc(var(--app-spacing) * 1.25) var(--app-spacing);
      order: -1;
    }

    .login-logo-img {
      max-height: 3rem;
      max-width: 12rem;
    }
  }

  /* Desktop: side-by-side, form on left, brand on right, both full-height. */
  @media (min-width: 768px) {
    main.login-main {
      grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    }
  }
}