/* Shell layouts on top of the Enter components. Login follows Enter's app: a form beside a dark panel. */
.shell { display: flex; flex-direction: column; min-height: 100vh; }
.shell main { flex: 1; width: 100%; }
.stack { display: grid; gap: var(--space-4); max-width: 40rem; }
.auth { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); min-height: 100vh; }
.auth-form { display: grid; align-content: center; justify-items: center; padding: var(--space-8) var(--space-4); }
.auth-form > .stack { width: min(24rem, 100%); }
.auth-panel { display: grid; align-content: center; justify-items: center; gap: var(--space-3); background: var(--black); }
.xp-logo { display: block; height: 2.75rem; background: var(--black); border-radius: var(--radius-8); }
.auth-panel .xp-logo { height: 6rem; }
.nav-logo { gap: var(--space-3); text-decoration: none; }
.powered { font-size: var(--size-12); color: var(--text-secondary); white-space: nowrap; }
.auth-panel .powered { color: var(--white-64); }
.nav-end form { display: flex; align-items: center; padding: 0 var(--space-3); }
.footer { display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-6); padding: var(--space-4) var(--space-8); font-size: var(--size-12); color: var(--text-secondary); border-top: 1px solid var(--stroke); }
@media (max-width: 720px) {
  .auth { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto 1fr; }
  .auth-panel { order: -1; padding: var(--space-4); }
}