/* Disclaimer gate overlay (web/static/js/disclaimer.js).
   CSP style-src hardening: this used to be injected at runtime via
   document.createElement("style") + textContent — a dynamically created
   <style> element is governed by style-src exactly like a static one, so it
   needed 'unsafe-inline' the same as any other inline style. Externalized
   here so the gate script only ever adds/removes the overlay markup. */
/* The gate is injected into every page, and not every page stylesheet ships
   a border-box reset. Without one, the card's width:100% + side padding
   exceeds the viewport on a phone and the text clips off the right edge, so
   the component sets its own rather than depending on its host. */
#luminos-gate,
#luminos-gate *,
#luminos-gate *::before,
#luminos-gate *::after {
  box-sizing: border-box;
}
#luminos-gate {
  position: fixed;
  inset: 0;
  z-index: 99999;
  background: rgba(5, 8, 16, .92);
  display: flex;
  /* NOT align-items:center. The gate script locks the page behind it
     (documentElement.overflow = hidden), so when the card is taller than the
     viewport — every phone in portrait — centering pushes the checkbox and
     the Agree button past the bottom edge with no way to reach them: the
     page can't scroll and the overlay had no scrolling of its own. Centred
     flex overflows in BOTH directions, so even adding scroll alone would
     still clip the top. flex-start + margin:auto keeps it centred when it
     fits and scrolls from the top when it doesn't. */
  align-items: flex-start;
  justify-content: center;
  padding: 20px;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}
/* Cloudflare Turnstile must sit ABOVE this overlay, or a challenged visitor
   cannot scan at all.
   Why they collide: /analysis/<address> starts its scan from a mount effect
   (web/static/js/design/app.jsx, App's useEffect -> loadScan), with no user
   interaction — so on a first visit the scan fires while this gate is still
   up. If the server answers 403 + `x-turnstile: required` AND Cloudflare
   decides the visitor must tick a checkbox (interaction-only mode, so mostly
   VPN and mobile traffic — exactly what a social link brings), app.jsx builds
   #turnstile-holder at z-index 9999 and appends it to <body>. Under this
   overlay's 99999 and its 92%-opaque backdrop the widget is rendered but
   invisible and unclickable, the 30s timer in getTurnstileToken() expires,
   and the visitor gets "verification timed out — reload and try again".
   Reloading reproduces it exactly.
   Why !important: app.jsx sets that 9999 through element.style, and an
   important declaration in an author stylesheet outranks a normal inline one.
   Nothing else here creates a stacking context — both elements are
   position:fixed direct children of <body>, and html/body carry no
   transform/filter/perspective/will-change/contain/backdrop-filter (see
   analysis.css "html, body") — so the two z-indexes are compared directly in
   the root stacking context and this rule actually lands.
   Not a terms bypass: the widget is a small fixed box at bottom-right with no
   route into the app. The gate still covers everything else, the page stays
   locked (documentElement.overflow = hidden), and reading the result still
   requires accepting. The scan already started before acceptance today; this
   changes only whether the human check can be completed. */
#turnstile-holder {
  z-index: 100001 !important;
}
#luminos-gate .gate-card {
  margin: auto;
  max-width: 560px;
  width: 100%;
  background: #0d1220;
  border: 1px solid #232b3f;
  border-radius: 12px;
  padding: 28px 30px;
  color: #dbe2f1;
  font: 15px/1.55 'Inter', system-ui, sans-serif;
  box-shadow: 0 24px 64px rgba(0, 0, 0, .55);
}
#luminos-gate h2 {
  margin: 0 0 14px;
  font-size: 19px;
  color: #fff;
}
#luminos-gate p {
  margin: 0 0 12px;
  color: #aab4cc;
}
#luminos-gate .gate-links a {
  color: #8fb4ff;
  text-decoration: underline;
  text-underline-offset: 2px;
}
#luminos-gate .gate-links a:hover {
  color: #b7cdff;
}
#luminos-gate .gate-agree {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  margin: 18px 0 16px;
  padding: 12px;
  border: 1px solid #2a3450;
  border-radius: 8px;
  background: #111827;
  color: #dbe2f1;
  cursor: pointer;
}
#luminos-gate .gate-agree input {
  margin-top: 3px;
  flex: none;
}
#luminos-gate button {
  width: 100%;
  padding: 12px;
  border: 0;
  border-radius: 8px;
  background: #4066e0;
  color: #fff;
  font-size: 15px;
  font-weight: 600;
  cursor: pointer;
}
#luminos-gate button:disabled {
  background: #232b3f;
  color: #5b6478;
  cursor: not-allowed;
}
#luminos-gate .gate-fine {
  margin-top: 14px;
  font-size: 12px;
  color: #5b6478;
}

/* Phones: reclaim the vertical space the desktop padding costs, so the
   whole card usually fits without scrolling at all. */
@media (max-width: 480px) {
  #luminos-gate {
    padding: 12px;
  }
  #luminos-gate .gate-card {
    padding: 20px 18px;
    border-radius: 10px;
    font-size: 14px;
  }
  #luminos-gate h2 {
    font-size: 17px;
  }
  #luminos-gate .gate-agree {
    margin: 14px 0 12px;
  }
  /* Comfortable tap target for the checkbox row and the button. */
  #luminos-gate .gate-agree input {
    width: 18px;
    height: 18px;
  }
  #luminos-gate button {
    padding: 14px;
  }
}
