/* ============================================================
   ll-public.css — v5 refresh layer for the PUBLIC marketing pages
   (about / pricing / showcase).

   These pages keep their existing content stylesheets (site-core.css,
   site-marketing.css, about/pricing/showcase.css) which are written against
   the legacy --ll-* token vocabulary. Rather than rewrite that content, this
   file:
     1) BRIDGES the --ll-* names onto the v5 token system (ll-v5.css), so the
        preserved content renders in the v5 palette and follows the v5
        [data-theme] light/dark switch — no more themes/dataviz.css +
        themes/app.css.
     2) Ships a self-contained v5-styled PUBLIC header + footer (paired with
        js/ll-public-nav.js). No operator/console/app chrome.
     3) Applies minimal chrome fixups (body background, .page top padding for
        the fixed header).

   Loaded AFTER ll-v5.css and AFTER the content stylesheets so the bridge +
   chrome win by source order.
   ============================================================ */

/* ---------- TOKEN BRIDGE: --ll-* → v5 (dark, default) ---------- */
:root {
  --ll-bg: var(--bg);
  --ll-bg-soft: var(--card);
  --ll-bg-panel: var(--card);
  --ll-text: var(--ink);
  --ll-text-muted: var(--muted);

  /* Accent = the v5 ledger blue; alt = the v5 gold (the CTA color). RGB
     triplets are needed because the content CSS composes rgba(var(--x-rgb),a). */
  --ll-accent: var(--blueHi);
  --ll-accent-rgb: 127, 178, 255;
  --ll-accent-alt: var(--goldHi);
  --ll-accent-alt-rgb: 245, 196, 81;
  --ll-btn-on-accent: #0d1117;

  --ll-border-subtle: var(--border-2);
  --ll-border: var(--border);
  --ll-border-accent: var(--border-strong);

  --ll-font-family: var(--font);
  --ll-ease-out: var(--ease);
  --ll-ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --ll-duration-fast: var(--t-fast);

  --ll-radius-sm: var(--r-sm);
  --ll-radius-md: var(--r-md);
  --ll-radius-pill: var(--r-pill);

  --ll-chart-line: var(--blueHi);
  --ll-chart-grid-rgba: rgba(127, 178, 255, 0.05);
  --ll-chart-baseline-rgba: rgba(127, 178, 255, 0.09);
  --ll-gradient-cta-primary: linear-gradient(160deg, #7fb2ff 0%, #3b82f6 55%, #1d4ed8 100%);
  --ll-gradient-cta-gold: var(--grad-gold);

  --ll-text-xs: 0.72rem;
  --ll-text-sm: 0.85rem;
  --ll-text-base: 1rem;
  --ll-text-lg: 1.125rem;
  --ll-text-xl: 1.25rem;
  --ll-text-2xl: 1.5rem;
  --ll-text-3xl: 2rem;
}

/* Light-theme accent triplets (blueHi/goldHi go darker on light — keep the
   rgba() compositions legible). The v5 [data-theme="light"] block already
   re-points --bg/--ink/etc, so the var()-chained bridge tokens follow along;
   only the RGB literals need a light override. */
[data-theme="light"] {
  --ll-accent-rgb: 59, 122, 224;   /* v5 light --blueHi #3b7ae0 */
  --ll-accent-alt-rgb: 168, 118, 16; /* v5 light --goldHi #a87610 */
  --ll-btn-on-accent: #ffffff;
  --ll-chart-grid-rgba: rgba(59, 122, 224, 0.06);
  --ll-chart-baseline-rgba: rgba(59, 122, 224, 0.1);
}

/* ---------- CHROME FIXUPS ---------- */
/* The v5 tokens theme the body; drop the legacy dataviz corner-bleed gradient
   and use the flat v5 canvas so light/dark both read cleanly. */
body {
  background: var(--bg) !important;
  color: var(--text);
  font-family: var(--font);
}

/* .page reserves 6rem top for the OLD fixed nav; the v5 public header is the
   same fixed style, so keep comfortable clearance. */
.page {
  padding-top: 5.25rem;
}

@media (max-width: 640px) {
  .page {
    padding-top: 4.75rem;
  }
}

/* ---------- PRIMARY CTA HARMONIZATION ----------
   The pages' create-account / upgrade CTA uses .btn--network-cyan. Re-skin it
   to the v5 gold plate (the canonical v5 CTA) so the page reads as v5. The
   href + behavior are untouched — this is color only. .btn--network-gold is
   already gold; nudge it onto the v5 gold token for consistency. */
.btn--network-cyan {
  background: var(--grad-gold);
  border-color: transparent;
  color: #2a1c02;
  box-shadow: var(--glow-gold);
}
.btn--network-cyan:hover {
  background: var(--grad-gold);
  border-color: transparent;
  color: #2a1c02;
  filter: brightness(1.05);
}
.btn--network-gold {
  background: var(--grad-gold);
  border-color: transparent;
  color: #2a1c02;
  box-shadow: var(--glow-gold);
}
.btn--network-gold:hover {
  background: var(--grad-gold);
  color: #2a1c02;
  filter: brightness(1.05);
}

/* ============================================================
   PUBLIC HEADER (.llpn) — v5 visual language, fixed top bar
   ============================================================ */
.llpn-skip {
  position: fixed;
  top: -60px;
  left: 12px;
  z-index: 1200;
  background: var(--card);
  color: var(--ink);
  border: 1px solid var(--border);
  border-radius: var(--r-sm);
  padding: 0.5rem 0.9rem;
  font-family: var(--font);
  font-size: 0.85rem;
  font-weight: 600;
  transition: top var(--t-fast) var(--ease);
}
.llpn-skip:focus {
  top: 12px;
}

.llpn {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 1000;
  background: color-mix(in srgb, var(--bg) 86%, transparent);
  backdrop-filter: saturate(140%) blur(12px);
  -webkit-backdrop-filter: saturate(140%) blur(12px);
  border-bottom: 1px solid var(--border-2);
}

.llpn-inner {
  max-width: 1220px;
  margin: 0 auto;
  height: 60px;
  padding: 0 1.5rem;
  display: flex;
  align-items: center;
  gap: 1.25rem;
}

.llpn-brand {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  flex: none;
}
.llpn-mark {
  display: inline-flex;
  width: 30px;
  height: 30px;
}
.llpn-mark svg {
  width: 30px;
  height: 30px;
  display: block;
}
[data-theme="dark"] .llpn-mark svg {
  filter: drop-shadow(0 1px 3px rgba(0, 0, 0, 0.35));
}
.llpn-wm {
  font-family: var(--font);
  font-weight: 800;
  font-size: 1.02rem;
  letter-spacing: 0.01em;
  color: var(--ink);
  line-height: 1;
}
.llpn-wm span {
  color: var(--blueHi);
}

.llpn-nav {
  display: flex;
  align-items: center;
  gap: 1.25rem;
  margin-left: auto;
}
.llpn-links {
  display: flex;
  align-items: center;
  gap: 0.35rem;
}
.llpn-link {
  font-family: var(--font);
  font-size: 0.86rem;
  font-weight: 600;
  color: var(--muted);
  padding: 0.5rem 0.7rem;
  border-radius: var(--r-sm);
  transition: color var(--t-fast) var(--ease), background var(--t-fast) var(--ease);
}
.llpn-link:hover {
  color: var(--ink);
  background: var(--row-hover);
}
.llpn-link--on {
  color: var(--ink);
  background: var(--row-hover);
}

.llpn-auth {
  display: flex;
  align-items: center;
  gap: 0.6rem;
}
.llpn-signin {
  font-family: var(--font);
  font-size: 0.86rem;
  font-weight: 600;
  color: var(--text);
  padding: 0.5rem 0.7rem;
  border-radius: var(--r-sm);
  transition: color var(--t-fast) var(--ease), background var(--t-fast) var(--ease);
}
.llpn-signin:hover {
  color: var(--ink);
  background: var(--row-hover);
}
.llpn-cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font);
  font-size: 0.85rem;
  font-weight: 700;
  color: #2a1c02;
  background: var(--grad-gold);
  border: 1px solid transparent;
  border-radius: var(--r-sm);
  padding: 0.5rem 1rem;
  box-shadow: var(--glow-gold);
  transition: filter var(--t-fast) var(--ease), transform var(--t-fast) var(--ease);
}
.llpn-cta:hover {
  filter: brightness(1.05);
  transform: translateY(-1px);
}

/* burger — hidden on desktop */
.llpn-burger {
  display: none;
  flex: none;
  width: 40px;
  height: 40px;
  margin-left: auto;
  border: 1px solid var(--border);
  border-radius: var(--r-sm);
  background: var(--card);
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
}
.llpn-burger span {
  display: block;
  width: 18px;
  height: 2px;
  border-radius: 2px;
  background: var(--ink);
  transition: transform var(--t-fast) var(--ease), opacity var(--t-fast) var(--ease);
}

/* ---------- MOBILE ---------- */
@media (max-width: 860px) {
  .llpn-burger {
    display: flex;
  }
  .llpn-nav {
    position: absolute;
    top: 60px;
    left: 0;
    right: 0;
    flex-direction: column;
    align-items: stretch;
    gap: 0.5rem;
    margin-left: 0;
    padding: 1rem 1.25rem 1.25rem;
    background: var(--bg-2);
    border-bottom: 1px solid var(--border-2);
    box-shadow: var(--sh-md);
    display: none;
  }
  .llpn--open .llpn-nav {
    display: flex;
  }
  .llpn-links {
    flex-direction: column;
    align-items: stretch;
    gap: 0.15rem;
  }
  .llpn-link {
    padding: 0.7rem 0.8rem;
    font-size: 0.95rem;
  }
  .llpn-auth {
    flex-direction: column;
    align-items: stretch;
    gap: 0.5rem;
    margin-top: 0.4rem;
    padding-top: 0.7rem;
    border-top: 1px solid var(--border-2);
  }
  .llpn-signin,
  .llpn-cta {
    justify-content: center;
    padding: 0.7rem 1rem;
    font-size: 0.95rem;
  }
  .llpn--open .llpn-burger span:nth-child(1) {
    transform: translateY(6px) rotate(45deg);
  }
  .llpn--open .llpn-burger span:nth-child(2) {
    opacity: 0;
  }
  .llpn--open .llpn-burger span:nth-child(3) {
    transform: translateY(-6px) rotate(-45deg);
  }
}

/* ============================================================
   PUBLIC FOOTER (.llpn-foot)
   ============================================================ */
.llpn-foot {
  border-top: 1px solid var(--border-2);
  background: var(--bg);
  margin-top: 3rem;
}
.llpn-foot-inner {
  max-width: 1220px;
  margin: 0 auto;
  padding: 1.4rem 1.5rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 0.8rem 1.5rem;
}
.llpn-foot-copy {
  font-family: var(--font);
  font-size: 0.85rem;
  color: var(--muted);
}
.llpn-foot-links {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.35rem 1.1rem;
}
.llpn-foot-links a {
  font-family: var(--font);
  font-size: 0.85rem;
  font-weight: 500;
  color: var(--muted);
  transition: color var(--t-fast) var(--ease);
}
.llpn-foot-links a:hover {
  color: var(--ink);
}
.llpn-foot-discord {
  color: var(--blueHi) !important;
}