/* Login-only layout. Appearance and control variants live in ui-system.css. */
@layer app-layout {
  .login-modern { display: flex; flex-direction: column; min-height: 100vh; min-height: 100dvh; margin: 0; }
  .login-layout { display: grid; grid-template-columns: 1fr 1fr; flex: 1; width: 100%; }
  .login-intro { display: flex; flex-direction: column; padding: 36px clamp(28px, 4vw, 72px) 48px; min-width: 0; }
  .login-modern .login-brand { display: flex; align-items: center; gap: 14px; margin: 0; }
  .login-modern .login-brand .brand-logo { width: 48px; height: 48px; object-fit: contain; }
  .login-modern .login-brand .customer-brand-logo { width: auto; max-width: 180px; }
  .login-intro-content { margin-block: auto; padding-top: 64px; }
  .login-intro h1 { margin: 0 0 24px; }
  .login-intro h1 span { display: block; }
  .login-intro p { max-width: 580px; margin: 0; }
  /* Diagram geometry uses a 600 x 350 design surface; cqw scales internal
     spacing and icons with the same container as the SVG connections. */
  .login-trace-illustration { container-type: inline-size; position: relative; width: 100%; max-width: 600px; aspect-ratio: 600 / 350; margin-top: 44px; }
  .login-trace-lines { pointer-events: none; position: absolute; inset: 0; width: 100%; height: 100%; }
  .login-trace-card { position: absolute; display: flex; align-items: center; gap: 3cqw; width: 43%; height: 31%; min-height: 0; padding: 3.333cqw; box-sizing: border-box; }
  .login-trace-card > div { flex: 1; min-width: 0; }
  .login-trace-requirement { left: 0; top: 3%; }
  .login-trace-verification { right: 0; top: 31%; }
  .login-trace-document { left: 16%; bottom: 0; }
  .login-trace-icon { width: 5.667cqw; height: 6.667cqw; flex-shrink: 0; }
  .login-trace-placeholder { display: block; height: 1.5cqw; margin-top: 2cqw; width: 100%; }
  .login-trace-placeholder.short { width: 65%; margin-top: 1.333cqw; }
  .login-access { display: flex; flex-direction: column; min-width: 0; padding: 28px clamp(28px, 5vw, 88px) 56px; }
  .login-language { display: flex; align-items: center; align-self: flex-end; gap: 4px; }
  .login-access-content { width: 100%; max-width: 480px; margin: auto; padding-top: 44px; }
  .login-heading { margin-bottom: 32px; }
  .login-heading h2 { margin: 0 0 12px; }
  .login-description { margin: 0; }
  .login-modern .login-form { gap: 24px; }
  .login-password-field { position: relative; }
  .login-password-field input { width: 100%; padding-right: 52px; box-sizing: border-box; }
  .login-password-toggle { position: absolute; right: 6px; top: 50%; transform: translateY(-50%); display: inline-flex; align-items: center; justify-content: center; }
  .login-options { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; }
  .login-modern .login-remember-row { gap: 10px; }
  .login-modern .login-submit { display: flex; justify-content: center; align-items: center; width: 100%; }
  .login-modern .login-reset-panel { margin-top: 24px; }
  .login-modern .login-legal-footer { display: flex; justify-content: space-between; align-items: center; width: 100%; padding: 20px clamp(28px, 4vw, 72px); box-sizing: border-box; gap: 16px; }
  .login-legal-links { display: flex; justify-content: flex-end; gap: 12px 24px; flex-wrap: wrap; }
  .login-modern .login-copyright { white-space: nowrap; }
  @media (min-width: 1600px) { .login-intro-content { max-width: 680px; align-self: center; width: 100%; } }
  @media (max-width: 800px) {
    .login-layout { grid-template-columns: 1fr; }
    .login-intro { padding: 24px; }
    .login-intro-content { display: none; }
    .login-intro h1 { margin-bottom: 12px; }
    .login-trace-illustration { display: none; }
    .login-access { padding: 12px 24px 36px; }
    .login-access-content { padding-top: 24px; }
    .login-modern .login-legal-footer { padding: 20px 24px; flex-direction: column; align-items: flex-start; }
    .login-legal-links { justify-content: flex-start; gap: 12px 20px; }
  }
}

/* Fit the complete active form to the viewport, including mobile keyboards. */
@layer app-layout {
  .login-modern { height: var(--login-viewport-height, 100dvh); min-height: 0; overflow: hidden; }
  .login-layout { min-height: 0; }
  .login-fit-stage { position: relative; flex: 1; min-height: 0; }
  .login-fit-stage > [data-login-fit] { position: absolute; left: 50%; top: 50%; width: 100%; margin: 0; padding-top: 0; transform: translate(-50%, -50%) scale(var(--login-content-scale, 1)); transform-origin: center; }
  .login-intro-stage { margin-top: 36px; }
  .login-access-stage { margin-top: 32px; }
  .login-modern .login-legal-footer { flex-shrink: 0; }
  @media (max-width: 800px) {
    .login-layout { display: flex; flex-direction: column; }
    .login-intro { flex-shrink: 0; padding-block: 16px; }
    .login-intro-stage { display: none; }
    .login-access { flex: 1; padding-top: 0; padding-bottom: 12px; }
    .login-access-stage { margin-top: 0; }
    .login-language { position: absolute; top: 18px; right: 20px; }
    .login-modern .login-brand .brand-logo { width: 36px; height: 36px; }
    .login-heading { margin-bottom: 20px; }
    .login-modern .login-form { gap: 16px; }
    .login-modern .login-legal-footer { padding-block: 12px; }
    .login-copyright { display: none; }
  }
  @media (max-height: 700px) {
    .login-intro, .login-access { padding-block: 16px; }
    .login-intro-stage, .login-access-stage { margin-top: 16px; }
    .login-heading { margin-bottom: 16px; }
    .login-modern .login-form { gap: 12px; }
    .login-modern .login-legal-footer { padding-block: 10px; }
    .login-trace-illustration { margin-top: 24px; }
  }
}
@layer app-layout {
  .login-credentials { display: grid; gap: inherit; }
}