/* The approved login composition, with real account controls over the original art. */
body:has(#auth-gate:not(.hidden)) { background: var(--ds-bg-canvas); }
body:has(#auth-gate:not(.hidden))::before,
body:has(#auth-gate:not(.hidden))::after,
body:has(#auth-gate:not(.hidden)) .release-world-art { display: none; }
body:has(#auth-gate:not(.hidden)) .app-header { position: absolute; inset: 0 0 auto; background: transparent; border: 0; backdrop-filter: none; }
body:has(#auth-gate:not(.hidden)) .app-shell { width: 100%; max-width: none; margin: 0; padding: 0; }
#auth-gate.memory-entry {
  --entry-height: max(680px, 100svh);
  display: flex; flex-direction: column; align-items: center; justify-content: flex-start;
  position: relative; isolation: isolate; overflow: hidden; min-height: var(--entry-height); width: 100%; max-width: none;
  margin: 0; padding: calc(var(--entry-height) * .15) 24px 24px; gap: 0;
}
#auth-gate::before { display: none; }
#auth-gate .entry-space { position: absolute; inset: 0; width: 100%; height: var(--entry-height); margin: 0; opacity: 1; background: none; z-index: -1; overflow: hidden; }
#auth-gate .entry-thread { display: block; width: 100%; height: 100%; }
#auth-gate .entry-thread .entry-route { stroke: none; filter: none; }
#auth-gate .entry-thread .memory-flow { stroke-width: 1.7; stroke-dasharray: 1 99; animation-duration: 18s; }
#auth-gate .entry-copy { margin: 0; text-align: center; }
#auth-gate .entry-copy h1 { margin: 0 0 14px; font: 400 clamp(36px, 4vw, 54px)/1.2 var(--ds-font-display); letter-spacing: .13em; color: var(--ds-accent-memory-soft); }
#auth-gate .entry-copy p { margin: 0; font: clamp(15px, 1.6vw, 21px)/1.6 var(--ds-font-display); letter-spacing: .13em; color: var(--ds-accent-memory-soft); }
#auth-gate .auth-panel { display: flex; flex-direction: column; width: min(408px, 100%); margin-top: auto; padding: 0; border: 0; background: none; box-shadow: none; backdrop-filter: none; }
#auth-gate .entry-copy + .auth-panel { margin-top: max(140px, calc(var(--entry-height) * .56 - var(--entry-height) * .15 - 110px)); }
#auth-gate .auth-form { order: 0; display: grid; gap: 14px; margin: 0; }
#auth-gate .auth-form input { height: 58px; padding: 16px 22px; border: 1px solid var(--ds-border-strong); border-radius: var(--ds-radius-md); background: var(--ds-surface); color: var(--ds-text-primary); font-size: 16px; }
#auth-gate .auth-form input::placeholder { color: var(--ds-text-secondary); }
#auth-gate .auth-form input:autofill { box-shadow: inset 0 0 0 100px var(--ds-bg-depth); -webkit-text-fill-color: var(--ds-text-primary); }
#auth-gate .auth-form > button { height: 60px; margin-top: 14px; border: 1px solid var(--ds-accent-memory-soft); border-radius: var(--ds-radius-round); background: var(--ds-surface); box-shadow: var(--ds-glow-important), inset 0 0 14px color-mix(in srgb, var(--ds-accent-memory) 24%, transparent); color: var(--ds-accent-memory-soft); font: 20px var(--ds-font-display); letter-spacing: .08em; }
#auth-gate .auth-tabs { order: 2; display: flex; justify-content: center; margin: 0; padding: 0; border: 0; background: none; }
#auth-gate .auth-tabs button { padding: 10px; color: var(--ds-text-secondary); font: 14px var(--ds-font-display); letter-spacing: .08em; background: none; }
#auth-gate .auth-tabs button.active { display: none; }
#auth-gate #auth-status { order: 1; margin: 10px 0; min-height: 20px; text-align: center; color: var(--ds-accent-danger); }
#auth-gate .auth-form input:focus-visible { outline: 1px solid var(--ds-accent-memory); outline-offset: 3px; }
#auth-gate:has(#register-form:not(.hidden)) { padding-bottom: 48px; }
#auth-gate:has(#register-form:not(.hidden)) .auth-panel { margin-top: 190px; }
@media (max-height: 760px) {
  #auth-gate .auth-form { gap: 12px; }
  #auth-gate .auth-form input { height: 52px; }
  #auth-gate .auth-form > button { height: 56px; margin-top: 10px; }
}
@media (max-width: 600px) {
  #auth-gate.memory-entry { --entry-height: max(740px, 100svh); padding-inline: 28px; }
  #auth-gate .entry-space { width: 180%; left: -40%; }
  #auth-gate .auth-form input { height: 54px; }
  #auth-gate .auth-form > button { font-size: 18px; }
}