/* ========================================================================
   EWA Prism Next — Authentication visual overlay.
   Intentionally preserves the locked compact v12 layout and dimensions.
   ======================================================================== */

html[data-visual-theme="prism-next"][data-theme="dark"] {
  --prism-auth-surface: rgba(15,19,29,.92);
  --prism-auth-border: rgba(202,214,255,.13);
}

html[data-visual-theme="prism-next"][data-theme="light"] {
  --prism-auth-surface: rgba(255,255,255,.91);
  --prism-auth-border: rgba(55,65,88,.16);
}

html[data-visual-theme="prism-next"] .ios-auth-body {
  background:
    radial-gradient(34rem 24rem at 2% 0%, rgba(79,124,255,.14), transparent 68%),
    radial-gradient(30rem 22rem at 98% 4%, rgba(22,199,232,.10), transparent 68%),
    radial-gradient(26rem 20rem at 74% 100%, rgba(232,74,168,.08), transparent 72%),
    var(--auth-bg) !important;
}

html[data-visual-theme="prism-next"] .ios-auth-card,
html[data-visual-theme="prism-next"] .ios-auth-context {
  border-color: var(--prism-auth-border) !important;
  background: var(--prism-auth-surface) !important;
  box-shadow: inset 0 1px rgba(255,255,255,.06), var(--auth-shadow) !important;
}

html[data-visual-theme="prism-next"] .ios-auth-card::before {
  content: "";
  position: absolute;
  top: -1px;
  left: 18px;
  right: 18px;
  height: 1px;
  border-radius: 999px;
  background: var(--prism-spectrum, linear-gradient(90deg,#4f7cff,#8b5cf6,#e84aa8,#16c7e8));
  opacity: .78;
  pointer-events: none;
}

html[data-visual-theme="prism-next"] .ios-auth-capability > i {
  color: #fff !important;
  border-color: rgba(255,255,255,.18) !important;
  background: linear-gradient(145deg, var(--prism-tone-a, #4f7cff), var(--prism-tone-b, #16c7e8)) !important;
  box-shadow: inset 0 1px rgba(255,255,255,.28), 0 7px 16px rgba(79,124,255,.18) !important;
}

/* Theme toggle must stay neutral and theme-aware, not the fixed bright
   capability-icon gradient above — that gradient never changed with
   light/dark and made the button look mismatched (esp. in light mode). */
html[data-visual-theme="prism-next"] .ios-auth-theme-toggle {
  color: var(--auth-label-2) !important;
  border-color: var(--auth-border) !important;
  background: color-mix(in srgb, var(--auth-surface-solid) 84%, transparent) !important;
  box-shadow: 0 10px 30px rgba(0,0,0,.12), inset 0 1px rgba(255,255,255,.04) !important;
}
html[data-visual-theme="prism-next"] .ios-auth-theme-toggle:hover {
  color: var(--auth-label) !important;
  background: var(--auth-fill-strong) !important;
}

html[data-visual-theme="prism-next"] .ios-auth-capability:nth-child(2) > i { --prism-tone-a:#7c5cff; --prism-tone-b:#e84aa8; }
html[data-visual-theme="prism-next"] .ios-auth-capability:nth-child(3) > i { --prism-tone-a:#10b981; --prism-tone-b:#16c7e8; }

html[data-visual-theme="prism-next"] .ios-auth-input:focus {
  border-color: color-mix(in srgb, var(--auth-blue) 65%, var(--auth-border)) !important;
  box-shadow: 0 0 0 3px color-mix(in srgb, #4f7cff 13%, transparent), 0 0 18px rgba(139,92,246,.07) !important;
}

html[data-visual-theme="prism-next"] .ios-auth-submit,
html[data-visual-theme="prism-next"] .ios-auth-primary-btn {
  color: #fff !important;
  border-color: transparent !important;
  background: linear-gradient(135deg, #4776f4, #755cf4) !important;
  box-shadow: inset 0 1px rgba(255,255,255,.24), 0 8px 20px rgba(79,92,244,.22) !important;
}

html[data-visual-theme="prism-next"] .ios-auth-badge-dot {
  background: linear-gradient(135deg, #10b981, #16c7e8) !important;
  box-shadow: 0 0 10px rgba(16,185,129,.38) !important;
}


/* ========================================================================
   Prism Next v14 — compact authentication composition
   ======================================================================== */
@media (min-width: 901px) {
  html[data-visual-theme="prism-next"] body.ios-auth-body .ios-auth-shell {
    width: min(1040px, calc(100% - 16px));
    grid-template-columns: minmax(0, 1.15fr) minmax(350px, 410px);
    gap: 8px;
  }
  html[data-visual-theme="prism-next"] body.ios-auth-body .ios-auth-context {
    min-height: 0;
    padding: 28px 32px;
  }
  html[data-visual-theme="prism-next"] body.ios-auth-body .ios-auth-context-inner {
    justify-content: center;
    width: min(100%, 560px);
  }
  html[data-visual-theme="prism-next"] body.ios-auth-body .ios-auth-badge {
    margin-top: 0;
  }
  html[data-visual-theme="prism-next"] body.ios-auth-body .ios-auth-context h1 {
    margin: 14px 0 9px;
    font-size: clamp(34px, 4vw, 50px);
    font-weight: 600;
    line-height: 1.02;
  }
  html[data-visual-theme="prism-next"] body.ios-auth-body .ios-auth-context-copy {
    max-width: 530px;
    font-size: 12.5px;
    line-height: 1.5;
  }
  html[data-visual-theme="prism-next"] body.ios-auth-body .ios-auth-capabilities {
    gap: 6px;
    margin-top: 16px;
  }
  html[data-visual-theme="prism-next"] body.ios-auth-body .ios-auth-capability {
    padding: 8px;
  }
  html[data-visual-theme="prism-next"] body.ios-auth-body .ios-auth-quote {
    margin-top: 15px;
    padding-top: 10px;
  }
  html[data-visual-theme="prism-next"] body.ios-auth-body .ios-auth-card {
    padding: 20px;
  }
  html[data-visual-theme="prism-next"] body.ios-auth-body .ios-auth-card-inner {
    max-width: 338px;
  }
  html[data-visual-theme="prism-next"] body.ios-auth-body .ios-auth-card-brand {
    display: block;
    margin: 0 0 13px;
  }
  html[data-visual-theme="prism-next"] body.ios-auth-body .ios-auth-card-brand img {
    max-width: 128px;
    max-height: 36px;
  }
  html[data-visual-theme="prism-next"] body.ios-auth-body .ios-auth-card h2 {
    font-size: 23px;
    font-weight: 600;
  }
  html[data-visual-theme="prism-next"] body.ios-auth-body .ios-auth-form {
    margin-top: 15px;
  }
}


/* ========================================================================
   Prism Next v15 — restore the compact landmark login composition.
   The layout is centered and capped; only the card scrolls on short displays.
   ======================================================================== */
@media (min-width: 901px) {
  body.ios-auth-body.prism-auth-compact {
    box-sizing: border-box !important;
    display: grid !important;
    place-items: center !important;
    width: 100% !important;
    height: 100vh !important;
    height: 100dvh !important;
    min-height: 0 !important;
    margin: 0 !important;
    padding: 12px !important;
    overflow: hidden !important;
  }

  body.ios-auth-body.prism-auth-compact .ios-auth-shell {
    width: min(940px, 100%) !important;
    height: min(620px, calc(100vh - 24px)) !important;
    height: min(620px, calc(100dvh - 24px)) !important;
    min-height: 0 !important;
    max-height: calc(100vh - 24px) !important;
    max-height: calc(100dvh - 24px) !important;
    margin: 0 auto !important;
    grid-template-columns: minmax(0, 1fr) minmax(330px, 380px) !important;
    gap: 8px !important;
    align-self: center !important;
  }

  body.ios-auth-body.prism-auth-compact .ios-auth-context,
  body.ios-auth-body.prism-auth-compact .ios-auth-card {
    width: 100% !important;
    height: 100% !important;
    min-height: 0 !important;
    margin: 0 !important;
  }

  body.ios-auth-body.prism-auth-compact .ios-auth-context {
    padding: 24px 28px !important;
    overflow: hidden !important;
  }

  body.ios-auth-body.prism-auth-compact .ios-auth-context-inner {
    justify-content: center !important;
    padding-bottom: 96px !important;
  }

  body.ios-auth-body.prism-auth-compact .ios-auth-card {
    padding: 18px 20px !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
    overscroll-behavior: contain;
    scrollbar-width: thin;
  }

  body.ios-auth-body.prism-auth-compact .ios-auth-card-inner {
    max-width: 332px !important;
  }

  body.ios-auth-body.prism-auth-compact .ios-auth-context h1 {
    font-size: clamp(32px, 3.4vw, 44px) !important;
    font-weight: 600 !important;
  }

  body.ios-auth-body.prism-auth-compact .ios-auth-capabilities {
    margin-top: 14px !important;
  }

  body.ios-auth-body.prism-auth-compact .ios-auth-quote {
    right: 28px !important;
    bottom: 24px !important;
    max-width: calc(100% - 56px) !important;
    margin: 0 !important;
  }
}

@media (min-width: 901px) and (max-height: 650px) {
  body.ios-auth-body.prism-auth-compact .ios-auth-shell {
    height: calc(100dvh - 16px) !important;
  }
  body.ios-auth-body.prism-auth-compact {
    padding: 8px !important;
  }
  body.ios-auth-body.prism-auth-compact .ios-auth-context {
    padding: 18px 22px !important;
  }
  body.ios-auth-body.prism-auth-compact .ios-auth-capability {
    padding: 6px !important;
  }
  body.ios-auth-body.prism-auth-compact .ios-auth-quote {
    display: none !important;
  }
}