/* The split login (public/account/index.html): the steps on the left, without a card, and
   on the right a big animated illustration of the step (public/js/login-art.js builds it, the `.la-*` classes below
   move it). The blue panel is the screen's one loud field. Narrow windows show the left half only.
   Pages with a plain `.login` (consent, legal) keep their card: everything here hangs off `.login--split`. */

.login--split {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); place-items: stretch;
  min-height: 100vh; min-height: 100dvh; padding: 0; background: var(--ds-ground);
}
.dash:has(> .login--split) { padding-left: 0; } /* no sidebar here (dashboard.css .dash) */
.login__pane { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 96px 24px 48px; }
.login__brand { position: absolute; top: 32px; left: 40px; display: block; }
.login__brand img { display: block; height: 30px; width: auto; }
[data-theme="dark"] .dash .login__brand img { filter: invert(1); }
.login--split .login__card { width: min(380px, 100%); padding: 0; gap: var(--ds-space-5); background: none; box-shadow: none; border-radius: 0; }
.login--split .login__title { font-family: var(--ds-font-display); font-size: var(--ds-title); line-height: var(--ds-leading-tight); letter-spacing: var(--ds-tracking-display); font-weight: 600; }
.login--split .login__step { gap: var(--ds-space-4); }
.login--split .ds-field[hidden] { display: none; } /* the hidden attribute over display: grid (the password field) */
.login--split .ds-input[aria-invalid="true"] { border-color: var(--ds-danger); } /* signin.js errorLine marks the field */
.login--split .account__stack { width: min(380px, 100%); align-items: stretch; }
.login--split .account__admin { align-self: flex-start; }

/* --- The right half: flat blue like the marketing site's blue sections (no gradients), the same in both themes.
   Inside: white product fragments and the ramps' shades; the marker in sun yellow, as there. --- */
.login__art { position: sticky; top: 0; height: 100vh; height: 100dvh; padding: 12px 12px 12px 0; }
.login__art-panel {
  --la-bg: var(--ds-blue-600);
  --la-card: #fff;                 /* product fragments stay white, as on the marketing site */
  --la-ink: var(--ds-blue-950);
  --la-soft: var(--ds-blue-100);
  --la-line: var(--ds-blue-300);
  --la-dot: var(--ds-blue-800);    /* scattered dots: a deeper shade of the ground */
  --la-action: var(--ds-blue-600);
  --la-sun: var(--ds-sun-600);
  --la-people: var(--ds-orange-600);
  --la-ok: #1f7a45;                /* --ds-ok's light value: the panel doesn't change with the theme */
  position: relative; height: 100%; overflow: hidden; border-radius: var(--ds-r-sheet);
  display: grid; grid-template-rows: minmax(0, 1fr) auto; background: var(--la-bg); color: #fff;
}
.login__art-stage { position: relative; display: grid; place-items: center; min-height: 0; padding: 40px 40px 0; }
.login__art-stage svg { width: min(100%, 600px); max-height: 100%; height: auto; overflow: visible; animation: la-stage-in 600ms var(--ds-ease) both; }
.login__art-caption { position: relative; padding: 0 48px 48px; max-width: 520px; }
.login__art-title { margin: 0; font: 600 var(--ds-number) / var(--ds-leading-tight) var(--ds-font-display); letter-spacing: var(--ds-tracking-display); color: #fff; text-wrap: balance; }
.login__art-title .ds-hand { color: var(--ds-sun-600); font-size: 0.92em; } /* the marker word: the marketing site's --mark on blue */
.login__art-line { margin: 10px 0 0; font-size: var(--ds-text-md); color: rgb(255 255 255 / 0.82); }
.login__art-caption > * { animation: la-rise-in 600ms var(--ds-ease) both; }
.login__art-line { animation-delay: 80ms; }

@media (max-width: 900px) {
  .login--split { grid-template-columns: minmax(0, 1fr); }
  .login__art { display: none; }
  .login__brand { left: 24px; top: 24px; }
}

/* --- Scene pieces (viewBox 0 0 400 400; CSS px are user units there) --- */
.la * { transform-box: fill-box; transform-origin: center; }
.la-card { fill: var(--la-card); }
.la-ink { fill: var(--la-ink); }
.la-ink-soft { fill: var(--la-ink); opacity: 0.5; }
.la-soft { fill: var(--la-soft); }
.la-action { fill: var(--la-action); }
.la-sun { fill: var(--la-sun); }
.la-people { fill: var(--la-people); }
.la-field { fill: none; stroke: var(--la-soft); stroke-width: 2.5; }
.la-at { fill: var(--la-ink); font: 700 20px var(--ds-font-ui); }
.la-trail { fill: none; stroke: var(--la-line); stroke-width: 2.5; stroke-linecap: round; stroke-dasharray: 2 10; animation: la-march 1.2s linear infinite; }
.la-paper { fill: var(--la-card); }
.la-paper-fold { fill: none; stroke: var(--la-soft); stroke-width: 2; stroke-linejoin: round; }
.la-flap, .la-chevron { fill: none; stroke: var(--la-line); stroke-width: 4; stroke-linecap: round; stroke-linejoin: round; }
.la-chevron { stroke: var(--la-soft); stroke-width: 3; }
.la-shackle { fill: none; stroke: var(--la-card); stroke-width: 20; stroke-linecap: round; }
.la-dots circle { fill: var(--la-card); }
.la-env-back { fill: var(--la-soft); }
.la-env-front { fill: var(--la-card); stroke: var(--la-soft); stroke-width: 2; stroke-linejoin: round; }
.la-digits rect { fill: var(--la-sun); }
.la-check { fill: none; stroke: var(--la-sun); stroke-width: 4; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 160; }
.la-check--big { stroke: var(--la-action); stroke-width: 14; }
.la-check--ink { stroke: var(--la-action); stroke-width: 3.5; }
.la-ring-track { fill: none; stroke: var(--la-soft); stroke-width: 6; }
.la-ring { fill: none; stroke: var(--la-sun); stroke-width: 6; stroke-linecap: round; stroke-dasharray: 100; transform: rotate(-90deg); }
.la-shield { fill: var(--la-action); }
.la-bar-track { fill: var(--la-dot); }
.la-bar { fill: var(--la-ok); transform-origin: left center; }
.la-cal-top { fill: var(--la-people); }
.la-ring-pin { fill: var(--la-ink); }
.la-grid circle { fill: var(--la-soft); }
.la-mark { fill: none; stroke: var(--la-sun); stroke-width: 5; }
.la-confetti rect:nth-child(odd) { fill: var(--la-card); }
.la-confetti rect:nth-child(even) { fill: var(--la-people); }
.la-lines rect { fill: var(--la-soft); transform-origin: left center; }
.la-lines rect.la-ink { fill: var(--la-ink); }
.la-perf { stroke: var(--la-ink); stroke-width: 2.5; stroke-dasharray: 4 6; opacity: 0.4; }
.la-star { fill: var(--la-people); }
.la-action--ring { stroke: var(--la-card); stroke-width: 5; }
.la-plus { stroke: var(--la-card); stroke-width: 5; stroke-linecap: round; }
.la-cursor { fill: var(--la-ink); stroke: var(--la-card); stroke-width: 2.5; stroke-linejoin: round; transform-origin: 0 0; transform: translate(130px, 290px); }
.la-spark { fill: var(--la-dot); }
.la-spark--light { fill: var(--la-card); }
.la-card--back { opacity: 0.55; }
.la-card--mid { opacity: 0.8; }

/* --- Motion: every animation ends (or rests) where the static drawing is, so reduced motion shows the finished scene --- */
.la-float { animation: la-float 6s ease-in-out infinite; }
.la-tilt { animation: la-tilt 7s ease-in-out infinite; }
.la-pop { animation: la-pop 700ms var(--ds-ease) var(--d, 0s) both; }
.la-spark { animation: la-twinkle 2.8s ease-in-out var(--d, 0s) infinite; }
.la-type { transform-origin: left center; animation: la-type 4s var(--ds-ease) infinite; }
.la-plane { offset-path: path('M262 250 C 330 262, 300 190, 300 176'); offset-rotate: auto; offset-distance: 82%; animation: la-fly 3.2s cubic-bezier(0.45, 0, 0.2, 1) infinite; }
.la-shackle { animation: la-unlock 3.2s var(--ds-ease) infinite; }
.la-dots circle { animation: la-dot 3.2s ease-out infinite; animation-delay: calc(var(--i) * 140ms); }
.la-rise { animation: la-rise 900ms var(--ds-ease) 200ms both; }
.la-digits rect { animation: la-pop 500ms var(--ds-ease) both; animation-delay: calc(900ms + var(--i) * 110ms); }
.la-digits--loop rect { animation: la-blink 30s steps(1) infinite; }
.la-ring { animation: la-countdown 30s linear infinite; }
.la-check { animation: la-draw 700ms var(--ds-ease) 300ms both; }
.la-check--big { animation-delay: 500ms; animation-duration: 900ms; }
.la-check--ink { animation: la-check-loop 4s var(--ds-ease) 1.2s infinite both; }
.la-bar { animation: la-strength 4.5s var(--ds-ease) infinite; }
.la-build > * { animation: la-rise-in 650ms var(--ds-ease) both; animation-delay: calc(250ms + var(--i) * 120ms); }
.la-stack > * { animation: la-rise-in 700ms var(--ds-ease) both; animation-delay: calc(500ms - var(--i) * 180ms); }
.la-lines rect { animation: la-grow 600ms var(--ds-ease) both; animation-delay: calc(200ms + var(--i) * 90ms); }
.la-mark { animation: la-pulse 2.4s ease-in-out infinite; }
.la-pulse { animation: la-pulse 2s ease-in-out infinite; }
.la-confetti rect { animation: la-confetti 3.6s ease-in-out infinite; animation-delay: calc(var(--i) * 400ms); }
.la--workspace .la-cursor { animation: la-cursor-ws 5s var(--ds-ease) infinite; }
.la-cursor--home { transform: translate(250px, 150px); animation: la-cursor-home 4.5s var(--ds-ease) infinite; }

@keyframes la-stage-in { from { opacity: 0; transform: translateY(16px) scale(0.97); } }
@keyframes la-rise-in { from { opacity: 0; transform: translateY(14px); } }
@keyframes la-float { 50% { transform: translateY(-10px); } }
@keyframes la-tilt { 0%, 100% { transform: rotate(-4deg); } 50% { transform: rotate(3deg) translateY(-8px); } }
@keyframes la-pop { 0% { opacity: 0; transform: scale(0.4); } 70% { opacity: 1; transform: scale(1.08); } }
@keyframes la-twinkle { 0%, 100% { opacity: 1; transform: scale(1); } 50% { opacity: 0.25; transform: scale(0.5); } }
@keyframes la-type { 0% { transform: scaleX(0); } 45%, 100% { transform: scaleX(1); } }
@keyframes la-march { to { stroke-dashoffset: -24; } }
@keyframes la-fly { 0% { offset-distance: 0%; opacity: 0; } 10% { opacity: 1; } 85% { opacity: 1; } 100% { offset-distance: 100%; opacity: 0; } }
@keyframes la-unlock { 0%, 30% { transform: translateY(0); } 45%, 75% { transform: translateY(-18px); } 90%, 100% { transform: translateY(0); } }
@keyframes la-dot { 0% { opacity: 0.25; transform: scale(0.6); } 12%, 70% { opacity: 1; transform: scale(1); } 100% { opacity: 0.25; transform: scale(0.6); } }
@keyframes la-rise { from { transform: translateY(80px); } }
@keyframes la-blink { 0% { opacity: 1; } 98% { opacity: 0.2; } }
@keyframes la-countdown { from { stroke-dashoffset: 0; } to { stroke-dashoffset: -100; } }
@keyframes la-draw { from { stroke-dashoffset: 160; } to { stroke-dashoffset: 0; } }
@keyframes la-check-loop { 0% { stroke-dashoffset: 160; } 30%, 100% { stroke-dashoffset: 0; } }
@keyframes la-strength {
  0% { transform: scaleX(0.08); fill: var(--la-people); }
  25% { transform: scaleX(0.4); fill: var(--la-people); }
  50% { transform: scaleX(0.7); fill: var(--la-sun); }
  75%, 100% { transform: scaleX(1); fill: var(--la-ok); }
}
@keyframes la-grow { from { transform: scaleX(0); } }
@keyframes la-pulse { 50% { transform: scale(1.18); opacity: 0.7; } }
@keyframes la-confetti { 0%, 100% { transform: translateY(0) rotate(0); } 50% { transform: translateY(-16px) rotate(90deg); } }
@keyframes la-cursor-ws { 0% { transform: translate(300px, 340px); opacity: 0; } 20% { opacity: 1; } 55%, 80% { transform: translate(130px, 290px); } 62% { transform: translate(130px, 290px) scale(0.85); } 100% { transform: translate(130px, 290px); opacity: 0; } }
@keyframes la-cursor-home { 0% { transform: translate(330px, 340px); opacity: 0; } 20% { opacity: 1; } 55%, 80% { transform: translate(250px, 150px); } 62% { transform: translate(250px, 150px) scale(0.85); } 100% { transform: translate(250px, 150px); opacity: 0; } }

@media (prefers-reduced-motion: reduce) {
  .login__art *, .login__art *::before { animation: none !important; }
}