/* dp-signin.css: /login, /signup, /referral/:code (views/auth.ejs).
 * HQ's sign-in design (public/hq-assets/style.css .hq-signin), a white card on the violet page, skinning the shared sign-in
 * panel (views/partials/mydreampark-auth-panel.ejs). The panel is also a modal on other pages, so everything is scoped under .dps. */
.dps {
  --dps-violet: #6a40f0; --dps-violet-deep: #4f27d4; --dps-ink: #1b0b4a;
  --dps-display: 'Zalando Sans Expanded', 'DM Sans', system-ui, sans-serif;
  --dps-body: 'DM Sans', 'Inter', system-ui, -apple-system, sans-serif;
  margin: 0; min-height: 100vh; color: var(--dps-ink); font-family: var(--dps-body);
  background: radial-gradient(1200px 600px at 85% -10%, rgba(255, 255, 255, 0.12), rgba(255, 255, 255, 0) 70%), var(--dps-violet);
  background-attachment: fixed;
}
html.dps-root { background: #6a40f0; }
.dps-main { min-height: 100vh; min-height: 100svh; box-sizing: border-box; display: grid; place-items: center; padding: 32px 16px; }
.dps-card {
  box-sizing: border-box; width: min(440px, 100%); padding: 34px 30px 30px; border-radius: 30px; text-align: center;
  background: #fff; color: var(--dps-ink); box-shadow: 0 30px 70px rgba(22, 6, 72, 0.45);
}
.dps-icon { display: inline-grid; place-items: center; width: 44px; height: 44px; margin-bottom: 22px; border-radius: 14px; background: var(--dps-violet); }
.dps-icon img { display: block; width: 26px; height: 26px; }

/* The panel's own chrome goes: the card is the panel. */
.dps .mdp-auth-shell.mdp-ui-panel, .dps .mdp-ui-panel {
  width: 100%; max-width: none; margin: 0; padding: 0; background: none; border: 0; border-radius: 0; box-shadow: none;
  color: var(--dps-ink); backdrop-filter: none; -webkit-backdrop-filter: none; overflow: visible;
}
.dps .mdp-ui-panel::before, .dps .mdp-ui-panel::after { display: none; }
.dps .mdp-auth-brand-lockup { display: none; }
/* ONE HEIGHT, every step (Aidan). The card is three fixed slots: title + description, the message line, and
   field + button + small print, so the card, the field and the button never move. Same order as HQ's card. */
.dps .mdp-auth-header { display: flex; flex-direction: column; justify-content: center; min-height: 152px; padding: 0; border: 0; background: none; text-align: center; }
.dps .mdp-auth-panels { height: auto !important; min-height: 196px; overflow: visible; transition: none; }
.dps .mdp-auth-panel { transition: none; }
.dps .mdp-auth-body { padding: 0; }
.dps .mdp-auth-title { width: 100%; margin: 0 0 6px; text-align: center; font: 800 30px/1.05 var(--dps-display); letter-spacing: 0; color: var(--dps-violet-deep); text-shadow: none; }
@media (max-width: 420px) { .dps .mdp-auth-title { font-size: 26px; } }
.dps .mdp-auth-description, .dps .mdp-auth-description * { margin: 0; font: 400 16px/1.45 var(--dps-body); color: rgba(27, 11, 74, 0.66); text-shadow: none; }
.dps .mdp-auth-form { display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px; }
.dps .mdp-auth-field { display: contents; }
.dps .mdp-auth-input { order: 1; }
.dps .mdp-ui-action { order: 2; }
.dps .mdp-auth-help, .dps .mdp-auth-code-meta { order: 3; }
/* The title and the placeholder say it; every step reads as one field and one button, like HQ's card. */
.dps .mdp-auth-label { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.dps .mdp-auth-input {
  box-sizing: border-box; width: 100%; height: 52px; padding: 0 16px; border-radius: 16px; border: 1px solid #e2d9ff; background: #f3efff;
  color: var(--dps-ink); font: 400 16px/1.2 var(--dps-body); text-align: center; box-shadow: none; backdrop-filter: none; -webkit-backdrop-filter: none;
}
.dps .mdp-auth-input::placeholder { color: rgba(27, 11, 74, 0.4); }
.dps .mdp-auth-input:hover { background: #f3efff; border-color: #e2d9ff; }
.dps .mdp-auth-input:focus { outline: 0; background: #fff; border-color: var(--dps-violet); box-shadow: none; }
.dps .mdp-auth-input[type="date"] { line-height: 52px; color-scheme: light; }
.dps .mdp-auth-code-input { font: 800 26px/1 var(--dps-display); letter-spacing: 0.32em; text-indent: 0.32em; }
.dps .mdp-auth-help { margin: 0; font: 400 13px/1.45 var(--dps-body); color: rgba(27, 11, 74, 0.55); text-align: center; }
.dps .mdp-ui-action {
  height: 52px; min-height: 52px; border: 0; border-radius: 16px; background: var(--dps-violet); color: #fff;
  font: 700 16px/1 var(--dps-body); letter-spacing: 0; text-transform: none; box-shadow: none; backdrop-filter: none; -webkit-backdrop-filter: none; filter: none;
}
.dps .mdp-ui-action:hover { background: var(--dps-violet-deep); color: #fff; transform: none; box-shadow: none; filter: none; }
.dps .mdp-ui-action:disabled { opacity: 0.6; }
.dps .mdp-auth-body .mdp-ui-status { display: flex !important; align-items: center; justify-content: center; min-height: 48px; margin: 0; padding: 0; border: 0; background: none; font: 600 14px/1.35 var(--dps-body); color: rgba(27, 11, 74, 0.7); text-align: center; box-shadow: none; }
.dps .mdp-auth-body .mdp-ui-status.error { color: #c4264a; }
.dps .mdp-auth-body .mdp-ui-status.success { color: #0d8a5b; }
.dps .mdp-auth-root a, .dps .mdp-auth-code-meta, .dps .mdp-auth-code-meta button, .dps .mdp-auth-footer, .dps .mdp-auth-switch, .dps .mdp-auth-switch button { color: var(--dps-violet-deep); font-family: var(--dps-body); }
.dps .mdp-auth-code-meta, .dps .mdp-auth-footer, .dps .mdp-auth-switch { justify-content: center; text-align: center; }
.dps .mdp-auth-code-meta button { font-weight: 700; font-size: 14px; text-underline-offset: 3px; }
.dps .mdp-auth-success { min-height: 196px; }
.dps .mdp-auth-success-headline { font-family: var(--dps-display); color: var(--dps-violet-deep); }
.dps .mdp-auth-success-sub, .dps .mdp-auth-success-sub * { font-family: var(--dps-body); color: rgba(27, 11, 74, 0.66); }
.dps .mdp-auth-success-spinner { color: var(--dps-violet); }
/* The description above already says where the code went. */
.dps [data-auth-code-hint] { display: none; }
@media (max-width: 380px) {
  .dps-card { padding: 28px 20px 24px; }
  .dps .mdp-auth-header { min-height: 172px; }
  .dps .mdp-auth-panels, .dps .mdp-auth-success { min-height: 214px; }
}