/*
 * Shared theme + components for the public web surface (marketing site +
 * downloads page). Served at /assets/site.css via the site mount; linked
 * (absolutely) by index.html, privacy.html, sms-terms.html, and
 * downloads/index.html so the cyberpunk theme lives in ONE place.
 *
 * SCOPE — only rules that are byte-identical across all four pages (or a
 * provably-harmless superset) live here. Genuinely page-specific rules stay in
 * each page's inline <style> (and, being loaded AFTER this file, win on ties):
 *   - a / a:hover         (doc pages underline body links; marketing/downloads don't)
 *   - body                (line-height 1.6 vs 1.65)
 *   - html                (scroll-padding-top on the marketing pages only)
 *   - .btn-outlined / .btn-ghost / .btn[disabled]  (per-page variants / opacity)
 *   - .footer / .footer-col h4   (footer margin-top + h4 margins differ)
 *   - every layout/component unique to a page (hero, doc-layout, platform-card, …)
 *
 * The :root token block below is the SUPERSET of all four pages' tokens; the
 * downloads page used a strict subset, so it inherits the full set harmlessly.
 */

:root {
  --cp-bg:        #0b0f1a;
  --cp-card:      #121826;
  --cp-border:    #243047;
  --cp-text:      #e6f0ff;
  --cp-muted:     #9aa7c2;
  --cp-neon:      #19e3ff;
  --cp-neon-bright: #7df1ff;   /* link / filled-button hover (was hardcoded 6×) */
  --cp-placeholder: #8391ab;   /* AA-compliant (~6:1) input placeholder on dark bg */

  /* Shared section-heading size so the doc pages can't drift (sms-terms was
     26px, opt-in 24px for the same role). */
  --fs-subsection: 26px;

  --accent:       #7c8abf;   --accent-hover: #8d9bcc;
  --accent-subtle: rgba(124, 138, 191, 0.12);
  --neon-subtle:  rgba(25, 227, 255, 0.10);
  --success:      #3fb950;   --success-subtle: rgba(45,164,78,0.12);
  --warning:      #d29922;   --warning-subtle: rgba(212,145,10,0.12);
  --danger:       #f85149;   --danger-subtle:  rgba(207,34,46,0.12);
  --info:         #58a6ff;   --info-subtle:    rgba(9,105,218,0.12);

  --font-sans: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Noto Sans', Helvetica, Arial, sans-serif;
  --font-mono: 'SF Mono', 'Cascadia Code', 'Consolas', 'DejaVu Sans Mono', monospace;

  --radius-sm: 4px; --radius-md: 8px; --radius-lg: 12px; --radius-xl: 16px; --radius-full: 999px;
  --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-5: 24px; --space-6: 32px; --space-8: 48px;

  --shadow-md: 0 2px 8px rgba(0,0,0,0.3);
  --shadow-lg: 0 4px 16px rgba(0,0,0,0.4);
  --shadow-xl: 0 8px 32px rgba(0,0,0,0.5);
  --glow-neon: 0 0 24px rgba(25,227,255,0.35);
  --glow-neon-soft: 0 0 12px rgba(25,227,255,0.20);
  --transition-base: 0.15s ease;
  --transition-slow: 0.25s ease;
}

/* ---------- base reset ---------- */
*, *::before, *::after { box-sizing: border-box; }
/* Keyboard focus ring: a real outline (not only a box-shadow) so it stays
   visible even inside overflow:hidden ancestors like the FAQ <details>. */
:focus-visible { outline: 2px solid var(--cp-neon); outline-offset: 2px; box-shadow: 0 0 0 4px rgba(25,227,255,0.25); border-radius: var(--radius-sm); }

/* ---------- buttons (shared core) ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2);
  font-family: var(--font-sans); font-weight: 600; font-size: 15px;
  padding: 11px 20px; border-radius: var(--radius-md); border: 1px solid transparent;
  cursor: pointer; transition: transform var(--transition-base), box-shadow var(--transition-base), background var(--transition-base), border-color var(--transition-base);
  white-space: nowrap; text-decoration: none;
}
.btn:hover { transform: translateY(-1px); text-decoration: none; }
.btn:active { transform: translateY(0); }
.btn-filled { background: var(--cp-neon); color: #04141a; box-shadow: var(--glow-neon-soft); }
.btn-filled:hover { background: #5eecff; color: #04141a; box-shadow: var(--glow-neon); }
.btn-sm { padding: 7px 14px; font-size: 13px; }
/* Outlined Sign Out button (rendered by site-auth-nav.js when signed in). Real
   hover/focus feedback using tokens, matching the rest of the buttons. */
.btn-signout { background: transparent; color: var(--cp-text); border: 1px solid var(--cp-border); }
.btn-signout:hover { border-color: var(--cp-neon); box-shadow: var(--glow-neon-soft); }

/* ---------- navbar (shared component) ---------- */
.navbar {
  position: sticky; top: 0; z-index: 100;
  background: rgba(18,24,38,0.8); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--cp-border);
}
.navbar::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 1px;
  background: linear-gradient(90deg, transparent, rgba(25,227,255,0.5), transparent);
}
/* The navbar gets a slightly wider container than the 1200px page .wrap so the
   10-item nav PLUS the signed-in two-button CTA (Dashboard + Sign Out) fit on one
   row without cramming or wrapping. Page content stays at 1200. */
.navbar .wrap { max-width: 1280px; }
.nav-inner { display: flex; align-items: center; gap: var(--space-4); height: 64px; }
.brand { display: flex; align-items: center; gap: 10px; font-weight: 700; font-size: 19px; color: var(--cp-text); letter-spacing: -0.02em; flex: none; }
.brand:hover { text-decoration: none; }
.brand-logo { width: 30px; height: 30px; border-radius: 7px; flex: none; filter: drop-shadow(0 0 7px rgba(25,227,255,0.4)); }
/* nav-links fills the row after the brand: items sit on the LEFT, the CTA is
   pinned to the far RIGHT via .nav-cta margin-left:auto. */
.nav-links { display: flex; align-items: center; gap: 2px; flex: 1; min-width: 0; }
.nav-item { font-size: 14px; line-height: 1.2; color: var(--cp-muted); padding: 8px 10px; border-radius: var(--radius-md); white-space: nowrap; transition: color var(--transition-base), background var(--transition-base); }
.nav-item:hover { color: var(--cp-text); background: var(--accent-subtle); text-decoration: none; }
.nav-item.active { color: var(--cp-neon); }
.nav-divider { width: 1px; height: 22px; background: var(--cp-border); margin: 0 4px; flex: none; }
.nav-cta { margin-left: auto; flex: none; }
/* Signed-in CTA holds two buttons (Dashboard + Sign Out) side by side. Class is
   added by site-auth-nav.js so the collapse media query below can flip it to a
   stacked column inside the hamburger. */
.nav-cta--auth { display: inline-flex; align-items: center; gap: 8px; }
.nav-toggle { display: none; background: transparent; border: 1px solid var(--cp-border); border-radius: var(--radius-md); color: var(--cp-text); padding: 8px 10px; cursor: pointer; margin-left: auto; flex: none; }

/* Nav collapse → hamburger. Centralized here (shared by every public page) and
   raised to 1200px: the navbar now carries an 11th item ("SMS Sign-Up"), and a
   full horizontal nav of that many items overflows below ~1200px. Above 1200px
   the full nav fits; at/below it the hamburger dropdown takes over. Pages keep
   their own narrower @media blocks for page-specific layout (grids, forms); this
   block owns ONLY the nav so all four pages collapse identically. */
@media (max-width: 1200px) {
  .nav-links {
    display: none; position: absolute; top: 64px; left: 0; right: 0;
    flex-direction: column; align-items: stretch; gap: 0;
    background: var(--cp-card); border-bottom: 1px solid var(--cp-border);
    padding: var(--space-3);
  }
  .nav-links.open { display: flex; }
  .nav-links .nav-divider { display: none; }
  .nav-item, .nav-cta { width: 100%; }
  /* Roomier tap targets in the dropdown (≥44px) + better legibility. */
  .nav-links .nav-item { padding: 12px; font-size: 15px; }
  .nav-cta { margin-left: 0; margin-top: var(--space-2); }
  /* The signed-in CTA stacks its two buttons full-width in the dropdown. */
  .nav-cta--auth { display: flex; flex-direction: column; align-items: stretch; gap: var(--space-2); }
  .nav-cta .btn { width: 100%; }
  .nav-toggle { display: inline-flex; }
}

/* ---------- footer (shared parts) ---------- */
.footer-top { display: grid; grid-template-columns: 1.4fr 1fr 1fr; gap: var(--space-6); }
.footer-brand p { color: var(--cp-muted); font-size: 14px; margin-top: var(--space-3); max-width: 320px; }
.footer-col a { display: block; color: var(--cp-text); font-size: 14px; margin-bottom: 10px; }
.footer-col a:hover { color: var(--cp-neon); text-decoration: none; }
.footer-bottom { border-top: 1px solid var(--cp-border); margin-top: var(--space-6); padding-top: var(--space-5); display: flex; flex-wrap: wrap; gap: var(--space-3) var(--space-5); justify-content: space-between; color: var(--cp-muted); font-size: 13px; }
.footer-bottom a { color: var(--cp-muted); }
.footer-bottom a:hover { color: var(--cp-neon); }

/* On phones the space-between copyright/links row goes lopsided — left-align,
   then stack on the narrowest screens. */
@media (max-width: 600px) {
  .footer-bottom { justify-content: flex-start; gap: var(--space-2) var(--space-4); }
}
@media (max-width: 480px) {
  .footer-bottom { flex-direction: column; }
}