/* =============================================================================
   SpyGlass — public surface (stealth landing, login, request access, success)
   Recreated from design_handoff_spyglass_auth (README = source of truth).
   Apple "liquid glass" / glassmorphism, light base + dark variant, over an
   animated supply-chain network. Tokens-only; the public pages own this scope
   and never inherit the data-dense inventory app's tokens.css.
   ============================================================================= */

:root {
  /* accent + ink (README → Design Tokens) */
  --sg-accent:      #0818B2;
  --sg-accent-rgb:  8, 24, 178;
  --sg-ink:         #0F172A;   /* headings, logo            */
  --sg-ink2:        #334155;   /* "Glass" half of wordmark  */
  --sg-body:        #475569;   /* paragraphs, labels        */
  --sg-muted:       #64748B;   /* subheads                  */
  --sg-faint:       #94A3B8;   /* microcopy, legal          */
  --sg-hairline:    rgba(15, 23, 42, .08);

  /* page atmosphere */
  --sg-page: radial-gradient(130% 130% at 72% 2%, #F5F8FC 0%, #E9EFF6 60%, #DFE7F1 100%);
  --sg-bloom-teal: rgba(45, 212, 191, .30);
  --sg-bloom-sky:  rgba(56, 189, 248, .34);
  --sg-net-static: rgba(51, 99, 140, .18);

  /* glass — card */
  --sg-card-bg:     linear-gradient(155deg, rgba(255,255,255,.80), rgba(255,255,255,.50));
  --sg-card-border: rgba(255, 255, 255, .9);
  --sg-card-shadow: 0 40px 90px -30px rgba(30,58,90,.28), inset 0 1px 0 rgba(255,255,255,.95);

  /* glass — frosted white (secondary / google / pill / input) */
  --sg-frost-bg:    linear-gradient(160deg, rgba(255,255,255,.60), rgba(255,255,255,.32));
  --sg-frost-bg-hi: linear-gradient(160deg, rgba(255,255,255,.78), rgba(255,255,255,.46));
  --sg-frost-border:rgba(255, 255, 255, .7);

  /* glass — input */
  --sg-input-bg:    linear-gradient(160deg, rgba(255,255,255,.58), rgba(255,255,255,.32));

  /* on-glass text in light mode */
  --sg-on-frost:    #0F172A;
  --sg-on-google:   #1F2937;
}

/* ---- dark variant (prefers-color-scheme, or [data-theme="dark"]) -----------
   The handoff is a light design; this is a faithful dark translation that keeps
   the accent, glass language, and network — required by the brief (works in
   light AND dark). */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    /* lighter accent for text/links/graph contrast on dark; button FILLS keep the
       brand blue via --sg-accent-rgb (white text on them stays high-contrast) */
    --sg-accent: #8094FF;
    --sg-ink:    #F1F5FB;
    --sg-ink2:   #C3CDDC;
    --sg-body:   #AAB6C7;
    --sg-muted:  #8A97AA;
    --sg-faint:  #6A788C;
    --sg-hairline: rgba(255, 255, 255, .10);
    --sg-page: radial-gradient(130% 130% at 72% 2%, #131a26 0%, #0e1622 58%, #0a111b 100%);
    --sg-net-static: rgba(120, 160, 200, .16);
    --sg-card-bg:     linear-gradient(155deg, rgba(40,52,70,.72), rgba(28,38,54,.52));
    --sg-card-border: rgba(255, 255, 255, .12);
    --sg-card-shadow: 0 40px 90px -30px rgba(0,0,0,.55), inset 0 1px 0 rgba(255,255,255,.10);
    --sg-frost-bg:    linear-gradient(160deg, rgba(60,74,96,.46), rgba(40,52,70,.30));
    --sg-frost-bg-hi: linear-gradient(160deg, rgba(74,90,116,.58), rgba(52,66,90,.40));
    --sg-frost-border:rgba(255, 255, 255, .14);
    --sg-input-bg:    linear-gradient(160deg, rgba(50,62,84,.50), rgba(36,48,66,.32));
    --sg-on-frost:    #EAF0F8;
    --sg-on-google:   #EAF0F8;
  }
}
:root[data-theme="dark"] {
  --sg-accent: #8094FF;
  --sg-ink:    #F1F5FB;
  --sg-ink2:   #C3CDDC;
  --sg-body:   #AAB6C7;
  --sg-muted:  #8A97AA;
  --sg-faint:  #6A788C;
  --sg-hairline: rgba(255, 255, 255, .10);
  --sg-page: radial-gradient(130% 130% at 72% 2%, #131a26 0%, #0e1622 58%, #0a111b 100%);
  --sg-net-static: rgba(120, 160, 200, .16);
  --sg-card-bg:     linear-gradient(155deg, rgba(40,52,70,.72), rgba(28,38,54,.52));
  --sg-card-border: rgba(255, 255, 255, .12);
  --sg-card-shadow: 0 40px 90px -30px rgba(0,0,0,.55), inset 0 1px 0 rgba(255,255,255,.10);
  --sg-frost-bg:    linear-gradient(160deg, rgba(60,74,96,.46), rgba(40,52,70,.30));
  --sg-frost-bg-hi: linear-gradient(160deg, rgba(74,90,116,.58), rgba(52,66,90,.40));
  --sg-frost-border:rgba(255, 255, 255, .14);
  --sg-input-bg:    linear-gradient(160deg, rgba(50,62,84,.50), rgba(36,48,66,.32));
  --sg-on-frost:    #EAF0F8;
  --sg-on-google:   #EAF0F8;
}

* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; }
body {
  font-family: 'Hanken Grotesk', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  -webkit-font-smoothing: antialiased;
  color: var(--sg-ink);
  background: #DFE7F1;
}
:root[data-theme="dark"] body,
@media (prefers-color-scheme: dark) { }

/* ---- keyframes (decorative) ------------------------------------------------ */
@keyframes sg-drift1 { 0%,100%{transform:translate(0,0) scale(1)} 50%{transform:translate(46px,-34px) scale(1.16)} }
@keyframes sg-drift2 { 0%,100%{transform:translate(0,0) scale(1)} 50%{transform:translate(-54px,42px) scale(1.1)} }
@keyframes sg-pulse  { 0%,100%{opacity:.2;transform:scale(.85)} 50%{opacity:.85;transform:scale(1.25)} }
@keyframes sg-dash   { to { stroke-dashoffset:-160; } }
@keyframes sg-fade   { from{opacity:0;transform:translateY(10px)} to{opacity:1;transform:none} }
@keyframes sg-spin   { to { transform: rotate(360deg); } }

/* =============================================================================
   Stage + animated background
   ============================================================================= */
.sg-stage { position: relative; width: 100%; min-height: 100vh; min-height: 100dvh; overflow: hidden; }
.sg-bg { position: absolute; inset: 0; background: var(--sg-page); }
.sg-bloom { position: absolute; border-radius: 50%; pointer-events: none; }
.sg-bloom--teal { width: 600px; height: 600px; left: -150px; bottom: -220px;
  background: radial-gradient(circle, var(--sg-bloom-teal), transparent 64%); filter: blur(115px);
  animation: sg-drift2 23s ease-in-out infinite; }
.sg-bloom--sky { width: 540px; height: 540px; right: -130px; top: -130px;
  background: radial-gradient(circle, var(--sg-bloom-sky), transparent 64%); filter: blur(105px);
  animation: sg-drift1 19s ease-in-out infinite; }
.sg-net { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.sg-net .net-static { stroke: var(--sg-net-static); stroke-width: 1; }
.sg-net .net-flow { stroke: var(--sg-accent); stroke-opacity: .65; stroke-width: 1.4; }
.sg-net .net-flow.is-animated { animation: sg-dash 2.8s linear infinite; }
.sg-net .net-hub-glow { fill: var(--sg-accent); fill-opacity: .13; }
.sg-net .net-hub-glow circle { animation: sg-pulse 4s ease-in-out infinite; }
.sg-net .net-hub { fill: var(--sg-accent); fill-opacity: .85; }

/* =============================================================================
   Nav
   ============================================================================= */
.sg-nav { position: absolute; top: 0; left: 0; right: 0; z-index: 2;
  display: flex; align-items: center; justify-content: space-between; padding: 32px 48px; }
.sg-nav--center { justify-content: flex-start; }

.sg-brand { display: inline-flex; align-items: center; gap: 11px; color: var(--sg-ink);
  text-decoration: none; cursor: pointer; background: none; border: 0; padding: 0; font: inherit; }
.sg-brand .sg-lens { display: block; }
/* SpyGlass Network Orb — theme-aware brand mark (matches the app header lockup) */
.sg-orb { display: inline-block; flex-shrink: 0; border-radius: 50%; background: center/cover no-repeat;
  background-image: url("/static/orb-light.png"); }
:root[data-theme="dark"] .sg-orb { background-image: url("/static/orb-dark.png"); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .sg-orb { background-image: url("/static/orb-dark.png"); } }
/* Poppins wordmark, cobalt "Glass" — identical to the in-app logo */
.sg-wordmark { font-family: 'Poppins', 'Hanken Grotesk', -apple-system, sans-serif; font-size: 20px; letter-spacing: -.03em; font-weight: 800; color: var(--sg-ink); }
.sg-wordmark b { font-weight: 800; }
.sg-wordmark i { font-weight: 800; color: #2A3FD6; font-style: normal; }

/* =============================================================================
   Buttons (glass)
   ============================================================================= */
.sg-btn { display: inline-flex; align-items: center; justify-content: center; gap: 7px;
  border-radius: 16px; font-family: inherit; font-weight: 600; text-decoration: none; cursor: pointer;
  border: 1px solid transparent; transition: transform .18s ease, box-shadow .18s ease, background .18s ease;
  -webkit-backdrop-filter: blur(18px) saturate(1.4); backdrop-filter: blur(18px) saturate(1.4); }
.sg-btn:disabled { opacity: .5; cursor: not-allowed; }

.sg-btn--primary { background: linear-gradient(160deg, rgba(var(--sg-accent-rgb),.92), rgba(var(--sg-accent-rgb),.66));
  border-color: rgba(255,255,255,.4); color: #fff;
  box-shadow: 0 18px 44px -14px rgba(var(--sg-accent-rgb),.6), inset 0 1px 0 rgba(255,255,255,.5), inset 0 -12px 22px -14px rgba(var(--sg-accent-rgb),.55); }
.sg-btn--primary:hover:not(:disabled) { transform: translateY(-2px);
  box-shadow: 0 24px 56px -14px rgba(var(--sg-accent-rgb),.72), inset 0 1px 0 rgba(255,255,255,.6); }

.sg-btn--secondary { background: var(--sg-frost-bg); border-color: var(--sg-frost-border); color: var(--sg-on-frost);
  -webkit-backdrop-filter: blur(20px) saturate(1.7); backdrop-filter: blur(20px) saturate(1.7);
  box-shadow: 0 12px 32px -12px rgba(30,58,90,.35), inset 0 1px 0 rgba(255,255,255,.9); }
.sg-btn--secondary:hover:not(:disabled) { transform: translateY(-2px); background: var(--sg-frost-bg-hi);
  box-shadow: 0 16px 40px -12px rgba(30,58,90,.42), inset 0 1px 0 rgba(255,255,255,.95); }

.sg-btn--google { width: 100%; height: 52px; border-radius: 16px; font-size: 15.5px;
  background: linear-gradient(160deg, rgba(255,255,255,.82), rgba(255,255,255,.52)); border-color: rgba(255,255,255,.78);
  color: var(--sg-on-google); -webkit-backdrop-filter: blur(20px) saturate(1.6); backdrop-filter: blur(20px) saturate(1.6);
  box-shadow: 0 14px 34px -14px rgba(30,58,90,.42), inset 0 1px 0 rgba(255,255,255,.95); }
:root[data-theme="dark"] .sg-btn--google { background: var(--sg-frost-bg-hi); }
.sg-btn--google:hover:not(:disabled) { transform: translateY(-2px);
  box-shadow: 0 20px 46px -14px rgba(30,58,90,.5), inset 0 1px 0 rgba(255,255,255,1); }

/* nav-sized secondary pill */
.sg-btn--nav { height: 42px; padding: 0 22px; border-radius: 14px; font-size: 14.5px; }
.sg-btn--hero { height: 54px; padding: 0 32px; font-size: 16px; }
.sg-btn--hero.sg-btn--secondary { padding: 0 26px; }
.sg-btn--block { width: 100%; height: 52px; font-size: 15.5px; }

/* plain text "← Back" link */
.sg-backlink { display: inline-flex; align-items: center; gap: 7px; height: 42px; padding: 0 18px;
  border-radius: 12px; color: var(--sg-body); font-size: 14px; font-weight: 600; text-decoration: none;
  cursor: pointer; background: none; border: 0; font-family: inherit; transition: color .18s ease; }
.sg-backlink:hover { color: var(--sg-ink); }

/* =============================================================================
   Hero (landing)
   ============================================================================= */
.sg-hero-wrap { position: absolute; inset: 0; display: flex; align-items: center; padding: 0 88px; }
.sg-hero { max-width: 720px; }
.sg-pill { display: inline-flex; align-items: center; gap: 9px; height: 34px; padding: 0 16px;
  border-radius: 99px; background: var(--sg-frost-bg); border: 1px solid rgba(255,255,255,.8);
  color: var(--sg-body); font-size: 13px; font-weight: 600;
  -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); box-shadow: inset 0 1px 0 rgba(255,255,255,.85); }
:root[data-theme="dark"] .sg-pill { border-color: var(--sg-frost-border); }
.sg-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--sg-accent); box-shadow: 0 0 9px rgba(var(--sg-accent-rgb),.7); }
.sg-h1-hero { margin: 26px 0 0; font-size: 66px; line-height: 1.04; letter-spacing: -.03em; font-weight: 700; color: var(--sg-ink); }
.sg-accentword { font-family: 'Instrument Serif', Georgia, serif; font-weight: 400; font-style: italic; letter-spacing: 0; color: var(--sg-accent); }
.sg-subhead { margin: 24px 0 0; font-size: 18px; line-height: 1.6; color: var(--sg-body); max-width: 540px; }
.sg-cta-row { display: flex; align-items: center; gap: 14px; margin-top: 38px; flex-wrap: wrap; }

/* =============================================================================
   Centered card layouts
   ============================================================================= */
.sg-center { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; padding: 24px; }
.sg-scroll { min-height: 100vh; min-height: 100dvh; display: flex; align-items: center; justify-content: center; padding: 104px 24px 56px; }
.sg-view--scroll { position: absolute; inset: 0; overflow: auto; }

.sg-card { position: relative; border-radius: 30px; background: var(--sg-card-bg);
  border: 1px solid var(--sg-card-border); box-shadow: var(--sg-card-shadow);
  -webkit-backdrop-filter: blur(26px) saturate(1.4); backdrop-filter: blur(26px) saturate(1.4); }
.sg-card--login   { width: 432px; padding: 48px 44px 36px; display: flex; flex-direction: column; align-items: center; text-align: center; }
.sg-card--request { width: 484px; padding: 42px 42px 34px; display: flex; flex-direction: column; }
.sg-card--success { width: 432px; padding: 48px 44px 40px; display: flex; flex-direction: column; align-items: center; text-align: center; }

.sg-card-brand { display: flex; align-items: center; gap: 11px; color: var(--sg-ink); }
.sg-card-brand .sg-wordmark { font-size: 22px; }

.sg-h1-card { margin: 24px 0 0; font-weight: 600; letter-spacing: -.02em; color: var(--sg-ink); }
.sg-card--login   .sg-h1-card { font-size: 27px; }
.sg-card--request .sg-h1-card { font-size: 25px; margin: 0; }
.sg-card--success .sg-h1-card { font-size: 26px; margin-top: 22px; }
.sg-card-sub { font-size: 15px; line-height: 1.5; color: var(--sg-muted); }
.sg-card--login   .sg-card-sub { margin: 8px 0 0; }
.sg-card--request .sg-card-sub { margin: 8px 0 24px; font-size: 14.5px; }
.sg-card--success .sg-card-sub { margin: 10px 0 0; line-height: 1.55; }

.sg-microcopy { font-size: 12.5px; color: var(--sg-faint); }
.sg-hairline  { width: 100%; height: 1px; background: var(--sg-hairline); margin: 24px 0 20px; }
.sg-legal { margin: 18px 0 0; font-size: 11.5px; line-height: 1.6; color: var(--sg-faint); }
.sg-legal a, .sg-inline-link { color: var(--sg-accent); font-weight: 600; text-decoration: none; cursor: pointer; }
.sg-legal a:hover, .sg-inline-link:hover { text-decoration: underline; }
.sg-have-access { margin: 0; font-size: 14px; color: var(--sg-body); }

/* Google "G" mark sizing */
.sg-gmark { flex: none; }

/* brand-context line on tenant login ("Sign in to Maev") */
.sg-brand-context { margin: 14px 0 0; font-size: 13px; font-weight: 600; color: var(--sg-accent); letter-spacing: .01em; }

/* =============================================================================
   Form
   ============================================================================= */
.sg-field { display: flex; flex-direction: column; gap: 7px; margin-bottom: 14px; }
.sg-field-label { font-size: 12.5px; font-weight: 600; color: var(--sg-body); }
.sg-row { display: flex; gap: 14px; margin-bottom: 14px; }
.sg-row .sg-field { flex: 1; margin-bottom: 0; }

.sg-input, .sg-select { width: 100%; height: 46px; padding: 0 14px; border-radius: 12px;
  border: 1px solid var(--sg-frost-border); background: var(--sg-input-bg);
  -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
  font-family: inherit; font-size: 14.5px; color: var(--sg-ink); outline: none;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.75); transition: border-color .15s ease, box-shadow .15s ease; }
.sg-select { padding: 0 12px; cursor: pointer; }
.sg-input::placeholder { color: var(--sg-faint); }
.sg-input:focus, .sg-select:focus { border-color: var(--sg-accent); box-shadow: inset 0 1px 0 rgba(255,255,255,.75), 0 0 0 3px rgba(var(--sg-accent-rgb),.18); }
.sg-input[aria-invalid="true"] { border-color: #DC2626; }

/* honeypot — visually hidden, off-screen, not announced */
.sg-hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; opacity: 0; }

.sg-form-microcopy { margin: 16px 0 0; font-size: 11.5px; line-height: 1.6; color: var(--sg-faint); text-align: center; }

/* =============================================================================
   Status messages (errors / loading)
   ============================================================================= */
.sg-error { display: flex; gap: 10px; align-items: flex-start; width: 100%; text-align: left;
  margin: 20px 0 0; padding: 12px 14px; border-radius: 14px;
  background: linear-gradient(160deg, rgba(220,38,38,.12), rgba(220,38,38,.06));
  border: 1px solid rgba(220,38,38,.30); box-shadow: inset 0 1px 0 rgba(255,255,255,.5); }
.sg-error svg { flex: none; margin-top: 1px; }
.sg-error-body { font-size: 13px; line-height: 1.5; color: #991B1B; }
:root[data-theme="dark"] .sg-error-body { color: #FCA5A5; }
.sg-error-body b { display: block; font-weight: 700; margin-bottom: 2px; }
.sg-error-body a { color: var(--sg-accent); font-weight: 600; text-decoration: none; cursor: pointer; }
:root[data-theme="dark"] .sg-error-body a { color: #93C5FD; }
.sg-error-body a:hover { text-decoration: underline; }

.sg-spinner { width: 18px; height: 18px; border-radius: 50%;
  border: 2px solid rgba(var(--sg-accent-rgb),.25); border-top-color: var(--sg-accent);
  animation: sg-spin .7s linear infinite; }
.sg-redirect { display: flex; flex-direction: column; align-items: center; gap: 16px; }
.sg-redirect p { margin: 0; font-size: 15px; color: var(--sg-muted); }

/* success check badge */
.sg-badge { width: 66px; height: 66px; border-radius: 50%; display: flex; align-items: center; justify-content: center;
  background: linear-gradient(160deg, rgba(var(--sg-accent-rgb),.18), rgba(var(--sg-accent-rgb),.06));
  border: 1px solid rgba(var(--sg-accent-rgb),.28); box-shadow: inset 0 1px 0 rgba(255,255,255,.8); }

/* view fade-in */
.sg-view { position: absolute; inset: 0; animation: sg-fade .5s ease both; }

/* =============================================================================
   Focus visibility (keyboard) — accent ring on every interactive element
   ============================================================================= */
.sg-btn:focus-visible, .sg-backlink:focus-visible, .sg-brand:focus-visible,
.sg-inline-link:focus-visible, .sg-legal a:focus-visible, .sg-error-body a:focus-visible {
  outline: 2px solid var(--sg-accent); outline-offset: 3px; border-radius: 8px;
}

/* =============================================================================
   Responsive
   ============================================================================= */
@media (max-width: 720px) {
  .sg-nav { padding: 20px 22px; }
  .sg-hero-wrap { padding: 0 24px; align-items: flex-start; padding-top: 110px; }
  .sg-h1-hero { font-size: clamp(40px, 12vw, 56px); }
  .sg-subhead { font-size: 16px; }
  .sg-cta-row .sg-btn { flex: 1 1 100%; }
  .sg-card--login, .sg-card--request, .sg-card--success { width: 100%; max-width: 432px; padding: 36px 24px 28px; }
  .sg-card--request { max-width: 484px; }
  .sg-row { flex-direction: column; gap: 0; }
  .sg-row .sg-field { margin-bottom: 14px; }
}
@media (max-width: 380px) {
  .sg-h1-hero { font-size: 36px; }
}

/* =============================================================================
   Reduced motion — disable all decorative loops + view transform (brief req.)
   ============================================================================= */
@media (prefers-reduced-motion: reduce) {
  .sg-bloom--teal, .sg-bloom--sky,
  .sg-net .net-flow.is-animated,
  .sg-net .net-hub-glow circle,
  .sg-spinner { animation: none !important; }
  .sg-view { animation: none !important; }
  .sg-btn { transition: none !important; }
}