/* DYNR Login look for the GitLab sign-in page.
   Injected by nginx (sub_filter). Scoped to the sign-in page only: body.login-page[data-page="sessions:new"].
   CSS only, no JavaScript. Original DYNR work; font Sora (OFL). */
@import url("https://fonts.googleapis.com/css2?family=Sora:wght@400;600;700&display=swap");

@property --dl-angle { syntax: "<angle>"; inherits: false; initial-value: 0deg; }

body.login-page[data-page="sessions:new"] {
  --dl-base: #08090c;
  --dl-shadow-dark: #000;
  --dl-shadow-light: #14161f;
  --dl-ink: #e6e9f2;
  --dl-muted: #737b8f;
  --dl-label: #c9cede;
  --dl-violet: #a78bfa;
  --dl-cyan: #21d9f0;
  --dl-pink: #f472b6;
  --dl-idle: #262b3b;
  --dl-font: "Sora", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;

  font-family: var(--dl-font) !important;
  color: var(--dl-ink) !important;
  background:
    radial-gradient(800px 380px at 50% -60px, rgba(167, 139, 250, .13), transparent 70%),
    linear-gradient(rgba(255,255,255,.018) 1px, transparent 1px) 0 0 / 40px 40px,
    linear-gradient(90deg, rgba(255,255,255,.018) 1px, transparent 1px) 0 0 / 40px 40px,
    var(--dl-base) !important;
}
html:has(body.login-page[data-page="sessions:new"]) { background: #08090c !important; }
body.login-page[data-page="sessions:new"] * { font-family: inherit; }

/* brand */
body.login-page[data-page="sessions:new"] main h1 {
  font-size: 18px !important; font-weight: 600 !important; color: var(--dl-ink) !important; margin-top: 12px;
}
body.login-page[data-page="sessions:new"] main .js-portrait-logo-detection {
  height: 64px !important; filter: drop-shadow(0 0 14px rgba(33, 217, 240, .3));
}

/* the card, inside the spinning violet/cyan/pink ring */
body.login-page[data-page="sessions:new"] main .bar {
  display: flex; flex-direction: column;
  width: 100% !important; max-width: 430px;
  padding: 34px 30px 26px;
  border: 2px solid transparent; border-radius: 22px;
  background:
    linear-gradient(var(--dl-base), var(--dl-base)) padding-box,
    conic-gradient(from var(--dl-angle),
      var(--dl-idle) 0turn .06turn, var(--dl-cyan) .16turn, var(--dl-violet) .27turn,
      var(--dl-idle) .38turn .56turn, var(--dl-pink) .68turn, var(--dl-violet) .8turn,
      var(--dl-idle) .92turn 1turn) border-box;
  box-shadow: 16px 16px 44px var(--dl-shadow-dark), -12px -12px 36px var(--dl-shadow-light);
  animation: dl-spin 7s linear infinite;
}
@keyframes dl-spin { to { --dl-angle: 360deg; } }

/* order: DYNR SSO first (the hero), then the divider, then username/password + passkey */
body.login-page[data-page="sessions:new"] main .bar > .js-oauth-login { order: 1; margin-top: 0 !important; }
body.login-page[data-page="sessions:new"] main .bar > [data-testid="divider"] { order: 2; }
body.login-page[data-page="sessions:new"] main .bar > .js-non-oauth-login { order: 3; }

/* divider: reword to fit the new order */
body.login-page[data-page="sessions:new"] main .bar > [data-testid="divider"] {
  margin: 22px 0 14px; font-size: 0; color: var(--dl-muted);
}
body.login-page[data-page="sessions:new"] main .bar > [data-testid="divider"] hr { order: 1; border-color: var(--dl-idle) !important; }
body.login-page[data-page="sessions:new"] main .bar > [data-testid="divider"] hr:last-child { order: 3; }
body.login-page[data-page="sessions:new"] main .bar > [data-testid="divider"]::before {
  content: "or use another login method"; order: 2; font-size: 12px; letter-spacing: .04em; white-space: nowrap;
}

/* labels + inputs: inset */
body.login-page[data-page="sessions:new"] main .col-form-label {
  color: var(--dl-label) !important; font-size: 13px !important; font-weight: 600 !important;
}
body.login-page[data-page="sessions:new"] main .gl-form-input {
  min-height: 46px; border: 0 !important; border-radius: 12px !important;
  background: var(--dl-base) !important; color: var(--dl-ink) !important;
  box-shadow: inset 5px 5px 12px var(--dl-shadow-dark), inset -4px -4px 11px var(--dl-shadow-light) !important;
}
body.login-page[data-page="sessions:new"] main .gl-form-input:focus {
  box-shadow: inset 3px 3px 8px var(--dl-shadow-dark), inset -3px -3px 8px var(--dl-shadow-light),
              0 0 0 2px rgba(167, 139, 250, .4) !important;
}
body.login-page[data-page="sessions:new"] main .gl-field-error-anchor .btn-icon { top: 5px !important; right: 4px !important; }
body.login-page[data-page="sessions:new"] main a.gl-link,
body.login-page[data-page="sessions:new"] main .form-text a { color: var(--dl-muted) !important; font-size: 12px; }
body.login-page[data-page="sessions:new"] main a.gl-link:hover { color: var(--dl-cyan) !important; }
body.login-page[data-page="sessions:new"] main .custom-control-label { color: var(--dl-muted) !important; font-size: 13px; }

/* buttons: raised */
body.login-page[data-page="sessions:new"] main .bar .btn-block {
  min-height: 46px; border: 0 !important; border-radius: 14px !important;
  background: var(--dl-base) !important; color: var(--dl-ink) !important; font-weight: 600 !important;
  box-shadow: 7px 7px 16px var(--dl-shadow-dark), -5px -5px 14px var(--dl-shadow-light) !important;
  transition: transform .15s, box-shadow .15s, filter .15s;
}
body.login-page[data-page="sessions:new"] main .bar .btn-block:hover {
  transform: translateY(-2px); filter: brightness(1.08);
  box-shadow: 10px 10px 22px var(--dl-shadow-dark), -7px -7px 18px var(--dl-shadow-light),
              0 0 20px -6px rgba(33, 217, 240, .45) !important;
}
body.login-page[data-page="sessions:new"] main .bar .btn-block:active {
  transform: none; filter: none;
  box-shadow: inset 5px 5px 11px var(--dl-shadow-dark), inset -4px -4px 9px var(--dl-shadow-light) !important;
}
body.login-page[data-page="sessions:new"] main .bar .btn-block:focus-visible { outline: 2px solid var(--dl-cyan) !important; outline-offset: 3px; }
body.login-page[data-page="sessions:new"] main .bar .btn-block svg { color: var(--dl-violet) !important; fill: currentColor; }

/* the hero: DYNR SSO */
body.login-page[data-page="sessions:new"] main [data-testid="oidc-login-button"] {
  min-height: 64px !important; font-size: 16px !important;
}
body.login-page[data-page="sessions:new"] main [data-testid="oidc-login-button"] .gl-button-icon { width: 24px; height: 24px; margin-right: 10px; }
body.login-page[data-page="sessions:new"] main [data-testid="oidc-login-button"] .gl-button-text .gl-button-text {
  font-size: 0;
}
body.login-page[data-page="sessions:new"] main [data-testid="oidc-login-button"] .gl-button-text .gl-button-text::after {
  content: "Log in with DYNR SSO"; font-size: 16px; font-weight: 700;
  background: linear-gradient(90deg, #c4b5fd, var(--dl-cyan));
  -webkit-background-clip: text; background-clip: text; color: transparent;
}

/* footer: quiet */
body.login-page[data-page="sessions:new"] .footer-container hr { border-color: #161923 !important; }
body.login-page[data-page="sessions:new"] .footer-container a { color: var(--dl-muted) !important; }
body.login-page[data-page="sessions:new"] .footer-container a:hover { color: var(--dl-cyan) !important; }

@media (prefers-reduced-motion: reduce) {
  body.login-page[data-page="sessions:new"] main .bar { animation: none; }
}