/* =========================================================
   RELAY STRATA — LOGIN HERO SPACING POLISH
   Keep the approved centre layout intact.
   Increase breathing room evenly by moving the left bracket
   38px left and the network 19px left. The right bracket is
   deliberately untouched.
   ========================================================= */

/* Give the centre network slightly more visual weight without
   changing its size or composition. */
body:has(.relay-login-2026) .relay-login-network {
  opacity: 0.90 !important;
}

/* Simplified primary login CTA — aligned with the newer Relay
   mint button system. */
body:has(.relay-login-2026) .relay-login-submit {
  background: #A7DCC1 !important;
  color: #111111 !important;
  border: 1px solid #A7DCC1 !important;
  border-radius: 8px !important;
  box-shadow: none !important;
  transform: none !important;
}

body:has(.relay-login-2026) .relay-login-submit:hover,
body:has(.relay-login-2026) .relay-login-submit:focus-visible {
  background: #98D3B6 !important;
  border-color: #98D3B6 !important;
  box-shadow: none !important;
  transform: none !important;
}

@media (min-width: 981px) {

  /* Preserve the network's existing absolute centring and
     size. Only offset the rendered graphic 19px left. */
  body:has(.relay-login-2026) .relay-login-network {
    transform: translateX(-50%) translateX(-19px) !important;
  }

  /* Move only the LEFT grey bracket 38px farther left. */
  body:has(.relay-login-2026) .relay-login-watermark span:first-child {
    position: relative !important;
    left: -38px !important;
  }

}

/* =========================================================
   OPERATIONAL APP — EXACT VIEWPORT CENTRING
   app.relaystrata.com.au adds .relay-operational-login while
   signed out. Remove any containing-block effects from legacy
   layout wrappers and pin the card directly to 50vw / 50vh.
   ========================================================= */
html:has(body.relay-operational-login),
html body.relay-operational-login,
html body.relay-operational-login #app,
html body.relay-operational-login #mainContent,
html body.relay-operational-login .relay-main,
html body.relay-operational-login .relay-auth-page.relay-login-2026,
html body.relay-operational-login .relay-login-stage {
  transform: none !important;
  translate: none !important;
  filter: none !important;
  perspective: none !important;
}

html body.relay-operational-login #app .relay-auth-page.relay-login-2026 {
  position: fixed !important;
  inset: 0 !important;
  width: 100vw !important;
  max-width: none !important;
  height: 100vh !important;
  min-height: 100vh !important;
  margin: 0 !important;
  padding: 0 !important;
  background: #FFFFFF !important;
}

html body.relay-operational-login #app .relay-auth-page.relay-login-2026 .relay-login-stage {
  position: static !important;
  display: block !important;
  width: auto !important;
  max-width: none !important;
  margin: 0 !important;
  padding: 0 !important;
}

html body.relay-operational-login #app .relay-auth-page.relay-login-2026 .relay-login-card {
  position: fixed !important;
  left: 50vw !important;
  top: 50vh !important;
  right: auto !important;
  bottom: auto !important;
  width: 440px !important;
  max-width: calc(100vw - 40px) !important;
  margin: 0 !important;
  transform: translate(-50%, -50%) !important;
  box-sizing: border-box !important;
}

@media (max-width: 620px) {
  html body.relay-operational-login #app .relay-auth-page.relay-login-2026 .relay-login-card {
    width: calc(100vw - 32px) !important;
    max-width: 440px !important;
  }
}