@import url("https://fonts.googleapis.com/css2?family=Instrument+Serif:ital@0;1&family=Manrope:wght@400;500;600;700;800&family=JetBrains+Mono:wght@400;500;700&display=swap");
/* ==========================================================================
   LUNAFLOW · SOL GROUP · ONE THEME FOR EVERY PAGE (v7, Orbit navy + gold)
   --------------------------------------------------------------------------
   This file is loaded by every page on solgroup.uk and playbook.solgroup.uk
   (nginx adds it, together with nav-tree.js = the top navigation bar).

   TO CHANGE THE LOOK EVERYWHERE: edit the colours in section 1 below, save.
   Pages pick it up on the next reload (the file is served with no-cache).
     sudo nano /var/www/html/lf-design.css

   How it works: every page keeps its own CSS, and its own colour names
   (--gold, --panel, --glow ...). Section 2 points those names at the palette
   in section 1, so all pages share one set of colours. Nothing is forced with
   !important, so buttons, charts and controls keep their own shapes.
   Alternate looks keep working: the dashboard's RETRO switch and the Levels
   page's LIGHT switch are left untouched. Printing (PDF reports) is untouched.
   ========================================================================== */

/* ── 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 {
  /* ── 2. EVERY PAGE'S OWN COLOUR NAMES → THE PALETTE ──────────────────────
     Skipped when a page is in its alternate look (dashboard RETRO, Levels LIGHT). */
  html:root:not([data-theme="retro"]):not([data-theme="light"]):not([data-theme="custom"]) {
    color-scheme: dark;
    /* surfaces */
    --bg: var(--lf-bg); --bg2: var(--lf-bg-2); --bg3: var(--lf-panel);
    --panel: var(--lf-panel); --panel2: var(--lf-panel-2); --panel-2: var(--lf-panel-2);
    --card: var(--lf-panel); --card-hover: var(--lf-panel-2);
    --border: var(--lf-border); --border-hover: var(--lf-border-2); --border-glow: var(--lf-border-2);
    --line: var(--lf-border); --line2: var(--lf-border-2); --grid: var(--lf-line);
    --sk: #16213b; --sk2: #1f2d4f; --dot-off: #1d2a47;
    /* text */
    --text: var(--lf-text); --fg: var(--lf-text); --white: var(--lf-white); --text-dim: var(--lf-text-2);
    --mut: var(--lf-muted); --muted: var(--lf-muted); --muted-dim: var(--lf-dim); --muted-faint: var(--lf-dim);
    --dim: var(--lf-muted); --neutral: var(--lf-dim);
    /* accent: every page's accent becomes LunaFlow gold */
    --gold: var(--lf-accent); --gold-dim: var(--lf-accent-dim);
    --glow: var(--lf-accent); --glow2: var(--lf-accent-2);
    --hi: var(--lf-panel-2);
    /* market colours */
    --up: var(--lf-up); --dn: var(--lf-dn); --green: var(--lf-up); --red: var(--lf-dn);
    --green-strong: var(--lf-up); --red-strong: var(--lf-dn);
    --green-bg: var(--lf-up-bg); --red-bg: var(--lf-dn-bg); --amber-bg: rgba(245, 165, 36, .12); --blue-bg: rgba(122, 162, 255, .12);
    --amber: var(--lf-warn); --warn: var(--lf-warn); --blue: var(--lf-blue); --violet: var(--lf-violet); --cyan: var(--lf-cyan);
    --shadow: 0 0 0 1px var(--lf-border), 0 0 24px rgba(216, 184, 102, .06);
    /* the previous design system's names (kept so nothing breaks) */
    --bg-page: var(--lf-bg); --bg-panel: var(--lf-panel); --bg-surface: var(--lf-panel-2); --bg-surface-hover: var(--lf-border);
    --accent-purple: var(--lf-accent); --accent-glow: var(--lf-accent-bg);
    --btn-purple-bg: var(--lf-accent); --btn-purple-hover: var(--lf-accent-2);
    --pnl-positive: var(--lf-up); --pnl-negative: var(--lf-dn); --pnl-neutral: var(--lf-dim);
    --text-primary: var(--lf-text); --text-secondary: var(--lf-muted); --text-muted: var(--lf-dim);
    --lf-accent-glow: var(--lf-accent-bg);
  }
  html:root:not([data-theme="retro"]):not([data-theme="light"]):not([data-theme="custom"]) body { background-color: var(--lf-bg); }

  /* ── 3. SMALL THINGS EVERY PAGE SHARES ─────────────────────────────────── */
  ::selection { background: rgba(216, 184, 102, .35); color: var(--lf-white); }
  html:not([data-theme="retro"]):not([data-theme="light"]):not([data-theme="custom"]) { scrollbar-color: var(--lf-border-2) var(--lf-bg); }
  html:not([data-theme="retro"]):not([data-theme="light"]):not([data-theme="custom"]) ::-webkit-scrollbar { width: 10px; height: 10px; }
  html:not([data-theme="retro"]):not([data-theme="light"]):not([data-theme="custom"]) ::-webkit-scrollbar-track { background: var(--lf-bg); }
  html:not([data-theme="retro"]):not([data-theme="light"]):not([data-theme="custom"]) ::-webkit-scrollbar-thumb { background: var(--lf-border-2); border-radius: 10px; border: 2px solid var(--lf-bg); }
  a:focus-visible, button:focus-visible, [role="button"]:focus-visible, [tabindex]:focus-visible,
  input:focus-visible, select:focus-visible, textarea:focus-visible, summary:focus-visible {
    outline: 2px solid var(--lf-accent); outline-offset: 2px;
  }
  body { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }

  /* ── 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; }

  /* ── 5. LEVELS PAGE TOUCH-UPS (body[data-mode] = the Levels page): white text sat on its old blue accent ── */
  html:not([data-theme="light"]):not([data-theme="retro"]):not([data-theme="custom"]) body[data-mode] .brand .logo {        /* Levels logo */
    color: var(--lf-accent-ink); background: linear-gradient(135deg, var(--lf-accent-2), #b8933f);
    box-shadow: 0 0 18px rgba(216, 184, 102, .35);
  }
  html:not([data-theme="light"]):not([data-theme="retro"]):not([data-theme="custom"]) body[data-mode] .nav a.on { color: var(--lf-accent-ink); background: var(--lf-accent); border-color: var(--lf-accent); }
  html:not([data-theme="light"]):not([data-theme="retro"]):not([data-theme="custom"]) body[data-mode] .pill { background: var(--lf-accent-bg); color: var(--lf-accent-2); border-color: rgba(216, 184, 102, .35); }
  html:not([data-theme="light"]):not([data-theme="retro"]):not([data-theme="custom"]) body[data-mode] .trow .barw i { background: linear-gradient(90deg, var(--lf-accent-dim), var(--lf-accent)); }
  html:not([data-theme="light"]):not([data-theme="retro"]):not([data-theme="custom"]) body[data-mode] button.theme { background: var(--lf-panel-2); color: var(--lf-accent); border: 1px solid var(--lf-accent-dim); border-radius: var(--lf-r-sm); min-width: var(--lf-h-touch); min-height: var(--lf-h-touch); }
}

@media screen {
  /* ── 6. PLAYBOOK TOUCH-UPS: the market switch keeps its full width and one line per button ── */
  .pb-assets { width: 100%; align-self: stretch; }
  .pb-assets a { white-space: nowrap; gap: 6px; }
}


@media screen {
  /* ── 7. ORBIT LAYER (2026-10-23) — html.lf-orbit is set by nav-tree.js on every page that isn't Orbit already ──
     Moon dust behind the page, glass cards with a gold edge, Manrope text, serif headlines, pill buttons.
     Not used in the Retro / Light looks, in embeds, or in print. Remove this section to go back. */
  html.lf-orbit:not([data-theme="retro"]):not([data-theme="light"]):not([data-theme="custom"]) { background: #050b1f; }
  html.lf-orbit:not([data-theme="retro"]):not([data-theme="light"]):not([data-theme="custom"]) body {
    background: transparent !important; font-family: var(--lf-sans);
  }
  #lf-orbit-dust { position: fixed; inset: 0; width: 100%; height: 100%; z-index: -1; pointer-events: none; }
  html[data-theme="retro"] #lf-orbit-dust, html[data-theme="light"] #lf-orbit-dust, html[data-theme="custom"] #lf-orbit-dust { display: none; }

  /* cards and panels become Orbit glass */
  html.lf-orbit:not([data-theme="retro"]):not([data-theme="light"]):not([data-theme="custom"]) :is(.panel, .card, .box, .tile, .kpi, .stat, section.block) {
    background: linear-gradient(165deg, rgba(21, 41, 90, .86) 0%, rgba(14, 28, 64, .84) 45%, rgba(9, 21, 51, .9) 100%);
    border-color: rgba(212, 168, 75, .28);
    border-radius: 18px;
    box-shadow: 0 18px 46px rgba(0, 0, 0, .38), inset 0 1px 0 rgba(255, 255, 255, .06);
  }
  html.lf-orbit:not([data-theme="retro"]):not([data-theme="light"]):not([data-theme="custom"]) :is(.panel, .card, .box, .tile) :is(.panel, .card, .box, .tile, .kpi, .stat) {
    background: rgba(5, 11, 31, .35); box-shadow: none;      /* cards inside cards stay flat */
  }

  /* headlines in the Orbit serif, labels in gold mono */
  html.lf-orbit:not([data-theme="retro"]):not([data-theme="light"]):not([data-theme="custom"]) h1 {
    font-family: "Instrument Serif", Georgia, serif; font-weight: 400; letter-spacing: .005em;
  }

  /* buttons: pills, gold primary with a glow */
  html.lf-orbit:not([data-theme="retro"]):not([data-theme="light"]):not([data-theme="custom"]) :is(.btn, .button, button.primary, .b-pri, .btn-primary, button[type="submit"]) {
    border-radius: 999px;
  }
  html.lf-orbit:not([data-theme="retro"]):not([data-theme="light"]):not([data-theme="custom"]) :is(.b-pri, .btn-primary, button.primary) {
    background: linear-gradient(180deg, #f1d896, #d4a84b); color: #120d03; box-shadow: 0 6px 22px rgba(212, 168, 75, .28);
  }
  html.lf-orbit:not([data-theme="retro"]):not([data-theme="light"]):not([data-theme="custom"]) :is(input, select, textarea) { border-radius: 12px; }
  html.lf-orbit:not([data-theme="retro"]):not([data-theme="light"]):not([data-theme="custom"]) table { border-color: rgba(212, 168, 75, .18); }

  /* the top bar sits on the dust */
  html.lf-orbit .lf-global-nav { background: rgba(5, 11, 31, .78); }

  /* black & white */
  html.lf-orbit[data-tone="bw"] { filter: grayscale(1) contrast(1.06); }

  /* the gear (same as the Cards, start and Luna pages) */
  #lf-orbit-gear { position: fixed; right: calc(16px + env(safe-area-inset-right, 0px)); bottom: calc(16px + env(safe-area-inset-bottom, 0px)); z-index: 9990;
    width: 50px; height: 50px; border-radius: 50%; border: 1.5px solid rgba(212, 168, 75, .7); background: rgba(9, 18, 45, .92); color: #d4a84b;
    display: grid; place-items: center; cursor: pointer; box-shadow: 0 10px 30px rgba(0, 0, 0, .5); padding: 0; margin: 0; }
  #lf-orbit-gear svg { width: 22px; height: 22px; transition: transform .5s; }
  #lf-orbit-gear[aria-expanded="true"] svg { transform: rotate(120deg); }
  #lf-orbit-panel { position: fixed; right: calc(12px + env(safe-area-inset-right, 0px)); bottom: calc(76px + env(safe-area-inset-bottom, 0px)); z-index: 9991;
    width: min(300px, calc(100vw - 24px)); background: #0a1230; border: 1.5px solid rgba(212, 168, 75, .55); border-radius: 18px; padding: 14px;
    box-shadow: 0 20px 60px rgba(0, 0, 0, .6); display: grid; gap: 12px; color: #eef3fc; font-family: var(--lf-sans); text-align: left; }
  #lf-orbit-panel[hidden] { display: none; }
  #lf-orbit-panel h2 { margin: 0; font: 800 12px var(--lf-mono); letter-spacing: .2em; color: #d4a84b; }
  #lf-orbit-panel p { margin: 0 0 6px; font-size: 11px; color: #9aa9c8; }
  #lf-orbit-panel .o-seg { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
  #lf-orbit-panel .o-seg button { min-height: 44px; border-radius: 10px; border: 1.5px solid rgba(147, 162, 194, .25); background: transparent; cursor: pointer;
    font: 700 13px var(--lf-sans); color: #eef3fc; padding: 0; letter-spacing: 0; box-shadow: none; transform: none; }
  #lf-orbit-panel .o-seg button[aria-pressed="true"] { border-color: #d4a84b; color: #f4dc9a; background: rgba(212, 168, 75, .1); }
  @media (prefers-reduced-motion: reduce) { #lf-orbit-gear svg { transition: none; } }
}
@media print { #lf-orbit-dust, #lf-orbit-gear, #lf-orbit-panel { display: none !important; } }

@media screen {
  /* the top bar never pushes a page wider than the screen (playbook start page centres its body with flex) */
  .lf-global-nav { width: 100%; max-width: 100vw; min-width: 0; align-self: stretch; box-sizing: border-box; }
  .lf-nav-container { min-width: 0; }
}