/* Top nav with pane-style dropdowns and CDE-indent hover */

.lp-nav {
  position: sticky; top: 12px; z-index: 50;
  margin: 12px auto 0;
  max-width: 1240px;
  padding: 0 20px;
}

.lp-nav-inner {
  display: flex; align-items: center; gap: 12px;
  height: 60px;
  background: color-mix(in oklab, var(--lp-paper) 86%, transparent);
  backdrop-filter: saturate(1.2) blur(14px);
  -webkit-backdrop-filter: saturate(1.2) blur(14px);
  border: 1px solid var(--lp-line);
  border-radius: var(--lp-r-pill);
  padding: 8px 10px 8px 18px;
  box-shadow: var(--lp-shadow-2);
}

/* Alt nav treatment — square pane */
/* Alt nav — floating rail */
.lp-logo {
  display: inline-flex; align-items: center; gap: 10px;
  font-weight: 700; font-size: 17px; letter-spacing: -0.01em;
  color: var(--lp-ink);
}
.lp-logo-mark {
  width: 26px; height: 26px; display: grid; place-items: center;
  position: relative;
}
.lp-logo-mark svg { display: block; width: 22px; height: 22px; }

.lp-nav-links {
  display: flex; align-items: center; gap: 2px;
  margin-left: 8px;
  padding: 4px;
}

.lp-nav-item {
  position: relative;
}

.lp-nav-link {
  display: inline-flex; align-items: center; gap: 6px;
  height: 36px; padding: 0 14px;
  border-radius: 10px;
  font-size: 14px; font-weight: 500;
  color: var(--lp-ink-2);
  background: transparent;
  border: 1px solid transparent;
  transition: background .18s var(--lp-ease), color .18s var(--lp-ease), box-shadow .18s var(--lp-ease), transform .18s var(--lp-ease);
}
.lp-nav-link:hover {
  color: var(--lp-ink);
  /* CDE-inset hover */
  background: linear-gradient(180deg, #efe9dd, #f4efe4);
  box-shadow: var(--lp-shadow-inset-cde);
  border-color: var(--lp-line);
}
.lp-nav-link[aria-expanded="true"] {
  color: var(--lp-ink);
  background: linear-gradient(180deg, #efe9dd, #f4efe4);
  box-shadow: var(--lp-shadow-inset-cde);
  border-color: var(--lp-line);
}
.lp-nav-link.is-active {
  color: var(--lp-ink);
  background: var(--lp-amber-wash);
  border-color: var(--lp-amber-soft);
}
.lp-nav-link .chev {
  width: 10px; height: 10px; opacity: .7;
  transition: transform .18s var(--lp-ease);
}
.lp-nav-link[aria-expanded="true"] .chev { transform: rotate(180deg); }

.lp-nav-actions {
  margin-left: auto;
  display: flex; align-items: center; gap: 8px;
}
.lp-nav-actions .btn { height: 36px; font-size: 13px; }

/* Mobile menu toggle — hidden on desktop, revealed by page CSS at narrow widths */
.lp-nav-menu-btn {
  display: none;
  width: 36px; height: 36px;
  border-radius: 10px;
  border: 1px solid var(--lp-line);
  background: var(--lp-paper);
  align-items: center; justify-content: center;
  color: var(--lp-ink); cursor: pointer;
  margin-left: 4px;
}
.lp-nav-menu-btn:hover { box-shadow: var(--lp-shadow-2); }

/* Mobile drawer — a pane that floats close-but-not-touching below the nav */
.lp-mobile-drawer {
  position: fixed; left: 20px; right: 20px; top: 82px;
  background: var(--lp-paper);
  border: 1px solid var(--lp-line);
  border-radius: var(--lp-r-lg);
  box-shadow: var(--lp-shadow-3);
  padding: 10px;
  display: none;
  z-index: 55;
}
.lp-mobile-drawer.is-open { display: block; }
.lp-mobile-drawer a {
  display: block; padding: 12px 14px; font-size: 15px; font-weight: 500;
  color: var(--lp-ink); border-radius: 10px;
  border: 1px solid transparent;
}
.lp-mobile-drawer a:hover {
  background: linear-gradient(180deg, #efe9dd, #f4efe4);
  box-shadow: var(--lp-shadow-inset-cde);
  border-color: var(--lp-line);
}

/* Mobile nav breakpoint — lives here so every page gets it, not just the homepage */
@media (max-width: 1020px) {
  .lp-nav-links { display: none !important; }
  .lp-nav-menu-btn { display: inline-flex !important; }
}

/* The floating pane dropdown — close to but not touching the trigger */
/* Footer */
.lp-footer {
  margin-top: 120px;
  padding: 60px 0 40px;
  border-top: 1px solid var(--lp-line);
  background: linear-gradient(180deg, transparent, rgba(255, 200, 90, 0.05));
}
/* On auth/workflow pages (login, register, password-reset, verify-
   email, confirm-password) the .auth-wrap card already supplies an
   80px bottom margin to space itself from the footer; the global
   120px footer margin stacks on top of that and the resulting gap
   ends up asymmetric. Body class `lp-auth-page` (set on each access
   page) zeros the footer's top margin so the auth-card's own margin
   is the only gap. Other pages (landing, demos, docs) keep the
   120px because their bottom-most sections don't carry equivalent
   bottom margins. */
body.lp-auth-page .lp-footer { margin-top: 0; }

/* Authenticated app-mode pill nav — visually distinct from the
   marketing nav so it's instantly obvious the user is inside a
   logged-in area. Same .lp-nav structure (sticky pill, identical
   spacing + layout), just a tinted background and stronger nav-link
   contrast. Triggered by the .lp-nav-app class which chrome-builder.js
   renders when LPChrome.mount('app:*') is called. */
.lp-nav.lp-nav-app .lp-nav-inner {
  /* Amber at ~66% mixed with paper, not raw rgba — keeps the result
     opaque so the blur backdrop and other nav-inner styling don't
     get washed out by whatever shows through. */
  background: color-mix(in oklab, var(--lp-amber) 66%, var(--lp-paper));
}
.lp-nav.lp-nav-app .lp-nav-link {
  /* Default nav links are var(--lp-ink-2) (mid grey). Black on the
     amber-tinted background reads stronger and reinforces the "you
     are in the console" signal. */
  color: var(--lp-ink);
}
.lp-nav.lp-nav-app .lp-nav-link:hover {
  /* The marketing-nav hover paints a cream linear-gradient that was
     designed for the white pill background — on the 66%-amber app
     pill it reads as a washed-out grey artefact. Amber-soft sits
     between the pill background (66% amber mix) and amber-wash
     (active-state), so hover/active form a clear lighter -> darker
     stack as the cursor moves into and lands on a link. */
  background: var(--lp-amber-soft);
}

/* Marketing pages get a soft radial warm glow behind .lp-page-head
   (via --lp-glow-warm). On the authenticated app surface we want
   the opposite vibe — flat, console-like. Setting the variable to
   none on the body resolves the existing
   `background: var(--lp-glow-warm)` inside .lp-page-head::before
   to no value, so the gradient simply doesn't paint. Marketing,
   docs, and access pages keep the glow. */
body.lp-app-page { --lp-glow-warm: none; }
.lp-footer-grid {
  display: grid; grid-template-columns: 1.5fr repeat(3, 1fr); gap: 40px;
}
.lp-footer h5 {
  font-size: 12px; text-transform: uppercase; letter-spacing: .14em;
  color: var(--lp-ink-3); font-family: var(--lp-font-mono); font-weight: 500;
  margin-bottom: 14px;
}
.lp-footer ul { list-style: none; padding: 0; margin: 0; display: grid; gap: 8px; font-size: 14px; color: var(--lp-ink-2); }
.lp-footer a:hover { color: var(--lp-ember); }
.lp-footer-bottom {
  margin-top: 40px; padding-top: 24px;
  border-top: 1px solid var(--lp-line);
  display: flex; justify-content: space-between; align-items: center;
  font-size: 13px; color: var(--lp-ink-3);
}

/* Tweaks panel */