/* LunaFlow nav-only stylesheet: the palette (lf-design.css section 1) + the top bar (section 4). For pages with their own look (SOLARIS, POLARIS, LODESTAR, handbook, checkers rules): the bar without restyling the page. Regenerate from lf-design.css when section 1 or 4 changes. */
/* ── 1. THE PALETTE (edit here) ─────────────────────────────────────────── */
:root {
  --lf-bg:          #050b1f;   /* page background */
  --lf-bg-2:        #0a1430;   /* bars, slightly lighter than the page */
  --lf-panel:       #0e1c40;   /* cards */
  --lf-panel-2:     #132654;   /* raised cards, hover */
  --lf-border:      #2a3a66;   /* card borders */
  --lf-border-2:    #3b4d80;   /* stronger borders, hover */
  --lf-line:        #16264d;   /* chart grid, separators */
  --lf-text:        #e6ebf5;   /* main text */
  --lf-text-2:      #c9d1e3;   /* secondary text */
  --lf-muted:       #9aa9c8;   /* labels */
  --lf-dim:         #67728f;   /* faint labels */
  --lf-white:       #f6f8fc;

  --lf-accent:      #d4a84b;   /* LunaFlow gold: active items, primary buttons, highlights */
  --lf-accent-2:    #f4dc9a;   /* lighter gold (hover, gradients) */
  --lf-accent-dim:  #9b7a36;   /* gold borders */
  --lf-accent-ink:  #1a1405;   /* text ON a gold button */
  --lf-accent-bg:   rgba(212, 168, 75, .12);

  --lf-up:          #2fd18b;   /* long / profit / live */
  --lf-dn:          #ff4d6d;   /* short / loss / offline */
  --lf-up-bg:       rgba(47, 209, 139, .12);
  --lf-dn-bg:       rgba(255, 77, 109, .12);
  --lf-warn:        #f5a524;   /* warnings, TEST labels */
  --lf-blue:        #7aa2ff;
  --lf-violet:      #a78bfa;
  --lf-cyan:        #67d4f0;

  --lf-btn:         linear-gradient(180deg, #f1d896, #d4a84b);   /* primary button */
  --lf-btn-hover:   linear-gradient(135deg, #efd796, #d4b35f);
  --lf-shadow:      0 10px 30px rgba(0, 0, 0, .35);

  --lf-sans: Manrope, Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --lf-mono: "JetBrains Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  --lf-r-sm: 10px;  --lf-r: 16px;  --lf-r-lg: 20px;
  --lf-s1: 4px; --lf-s2: 8px; --lf-s3: 12px; --lf-s4: 16px; --lf-s5: 24px;
  --lf-h-touch: 44px;        /* minimum tap target */
  --lf-fs-sm: 12px; --lf-fs-md: 13px; --lf-fs-lg: 15px;
  --lf-nav-h: 56px;
}

@media screen {
  /* ── 4. THE TOP NAVIGATION BAR (nav-tree.js) ───────────────────────────── */
  .lf-global-nav {
    position: sticky; top: 0; z-index: 9999;
    background: rgba(10, 15, 28, .88); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
    border-bottom: 1px solid var(--lf-border);
    box-shadow: 0 1px 0 rgba(216, 184, 102, .10), 0 8px 24px rgba(0, 0, 0, .25);
    font-family: var(--lf-sans);
  }
  .lf-global-nav::after {                      /* thin gold line under the bar */
    content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 1px;
    background: linear-gradient(90deg, transparent, rgba(216, 184, 102, .55), transparent);
  }
  .lf-nav-container {
    max-width: 1180px; margin: 0 auto; min-height: var(--lf-nav-h);
    display: flex; align-items: center; gap: 14px; padding: 0 12px;
  }
  .lf-nav-brand {
    display: inline-flex; align-items: center; gap: 9px; flex: none; text-decoration: none;
    color: var(--lf-white); font: 800 15px/1 var(--lf-sans); letter-spacing: .12em; text-transform: uppercase;
    min-height: var(--lf-h-touch); padding-right: 4px;
  }
  .lf-nav-brand b { color: var(--lf-accent); font-weight: 800; }
  .lf-nav-brand svg { flex: none; filter: drop-shadow(0 0 8px rgba(216, 184, 102, .35)); }
  .lf-nav-links {
    display: flex; align-items: center; gap: 4px; overflow-x: auto; scrollbar-width: none;
    -webkit-overflow-scrolling: touch; scroll-snap-type: x proximity; flex: 1; min-width: 0;
    mask-image: linear-gradient(90deg, #000 92%, transparent); -webkit-mask-image: linear-gradient(90deg, #000 92%, transparent);
  }
  .lf-nav-links::-webkit-scrollbar { display: none; }
  .lf-nav-item {
    display: inline-flex; align-items: center; gap: 7px; flex: none; scroll-snap-align: start;
    min-height: 40px; padding: 0 10px; border-radius: 999px; border: 1px solid transparent;
    color: var(--lf-muted); text-decoration: none; white-space: nowrap;
    font: 600 12.5px/1 var(--lf-sans); letter-spacing: .02em;
    transition: color .15s ease, background .15s ease, border-color .15s ease;
  }
  .lf-nav-item:hover { color: var(--lf-text); background: var(--lf-panel-2); }
  .lf-nav-item.active {
    color: var(--lf-accent); background: var(--lf-accent-bg); border-color: rgba(216, 184, 102, .45);
    box-shadow: inset 0 0 0 1px rgba(216, 184, 102, .15);
  }
  .lf-nav-icon { font-size: 15px; line-height: 1; }
  .lf-nav-label-long { display: none; }                /* short names by default ("Luna", "Scanner") … */
  @media (min-width: 1440px) { .lf-nav-label-long { display: inline; } .lf-nav-label-short { display: none; } }   /* … full names on wide screens */
  .lf-nav-px {
    flex: none; display: inline-flex; align-items: baseline; gap: 6px; padding: 0 4px 0 8px;
    font: 700 13px/1 var(--lf-mono); color: var(--lf-text); text-decoration: none;
  }
  .lf-nav-px small { font: 600 11px/1 var(--lf-mono); }
  .lf-nav-px .up { color: var(--lf-up); } .lf-nav-px .dn { color: var(--lf-dn); }
  .lf-nav-burger {
    display: none; appearance: none; border: 0; background: transparent; cursor: pointer;
    min-width: 40px; min-height: 40px; padding: 0; color: var(--lf-text); line-height: 1;
    border-radius: 8px; align-items: center; justify-content: center;
    -webkit-tap-highlight-color: transparent;
  }
  .lf-nav-burger:hover { background: var(--lf-panel-2); }
  .lf-nav-burger:focus-visible { outline: 2px solid var(--lf-accent); outline-offset: 2px; }

  @media (max-width: 720px) {
    .lf-nav-container { gap: 8px; padding: 0 8px; min-width: 0; }
    .lf-nav-brand span { display: none; }
    .lf-nav-links { display: none; }
    .lf-nav-item { padding: 0 11px; font-size: 12px; flex-shrink: 0; }
    .lf-nav-px { display: none; }
    .lf-nav-burger { display: inline-flex; margin-left: auto; }

    html.lf-nav-open .lf-nav-links {
      display: flex; flex-direction: column; gap: 4px;
      position: fixed; top: var(--lf-nav-h, 56px); left: 0; right: 0;
      padding: 8px;
      background: var(--lf-panel, #0f1c33);
      border-bottom: 1px solid var(--lf-line, rgba(216,184,102,.28));
      box-shadow: 0 16px 40px rgba(0,0,0,.55);
      max-height: calc(100vh - var(--lf-nav-h, 56px) - 20px);
      overflow-y: auto;
      z-index: 999;
      mask-image: none; -webkit-mask-image: none;
      scroll-snap-type: none;
    }
    html.lf-nav-open .lf-nav-item {
      width: 100%; min-height: 44px; justify-content: flex-start;
      padding: 0 14px; font-size: 14px; border-radius: 10px;
    }
    html.lf-nav-open .lf-nav-item.active {
      background: var(--lf-accent-bg, rgba(216,184,102,.12));
      border-color: rgba(216,184,102,.55);
    }
  }

  /* pages had their own copy of the site menu: the top bar replaces it */
  .lf-nav-on body > div.nav:has(> a#nav-dashboard),
  .lf-nav-on nav.lfnav[aria-label="LunaFlow"],
  .lf-nav-on nav.nav[aria-label="LunaFlow tools"],
  .lf-nav-on .wrap > header nav.nav:has(a[href="/luna/devices"]) { display: none; }

}