/* ============================================
   CUBIE FX — theme
   Loaded last on every page. One place that decides colour, type,
   spacing and layering, so no page can drift on its own.
   ============================================ */

/* ---------- 1. one palette ----------
   Page stylesheets each declared their own tokens and drifted apart.
   These win because this file loads after them. */
:root{
  /* surfaces */
  --bg:#05070E;
  --bg2:#080B14;
  --side:#080B14;
  --card:#0C1020;
  --card2:#10152A;
  --field:rgba(255,255,255,.04);

  /* the dashboard used its own d-prefixed names */
  --dbg:#05070E;
  --dside:#080B14;
  --dcard:#0C1020;
  --dcard2:#10152A;
  --dline:rgba(255,255,255,.07);
  --dline2:rgba(255,255,255,.13);

  /* lines */
  --line:rgba(255,255,255,.07);
  --line2:rgba(255,255,255,.13);

  /* text */
  --ink:#EDF0F8;
  --muted:#98A0B6;
  --muted2:#666E85;

  /* brand */
  --pu:#7C5CFF;
  --pu2:#A855F7;
  --bl:#4A8CFF;
  --grad:linear-gradient(100deg,#5B5BF5,#7C5CFF);

  /* meaning */
  --green:#22C55E;
  --red:#EF4444;
  --orange:#F59E0B;
  --blue:#3B82F6;
  --cyan:#22D3EE;

  /* measurements */
  --wrap:1920px;
  --cfx-wrap:1920px;
  --nav-h:66px;
  --radius:14px;
  --radius-lg:16px;
}

/* ---------- 2. one page background ---------- */
html{background:var(--bg)}
body{
  background:var(--bg);
  color:var(--ink);
  font-family:"Inter",system-ui,-apple-system,sans-serif;
  font-size:14px;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
}
h1,h2,h3,h4,h5,b,strong{font-family:"Manrope",system-ui,sans-serif;letter-spacing:-.02em}

/* ---------- 3. one type scale ----------
   Page titles, card titles and labels were all slightly different sizes.
   Moving between pages should not feel like the text resized. */
.main > .head h1,
.main > .topbar h1,
.phead h1,
.page-head h1{font-size:22px;font-weight:800;letter-spacing:-.02em}

.card h3,
.card-head h3,
.hd h3,
.block-head h2{font-size:14px;font-weight:800;letter-spacing:-.01em}

.sub,.card-head .sub,.phead .sub{font-size:12.5px;color:var(--muted2)}

/* ---------- 4. one card ---------- */
.card,.kpi,.sc,.pop,.feat,.tc,.val,.wy,.st{
  background:var(--card);
  border:1px solid var(--line);
  border-radius:var(--radius);
}
.card{border-radius:var(--radius-lg)}

/* ---------- 5. one page width ----------
   Content sits in the same column on every page, so nothing shifts
   sideways as you move around. */
.cfx-nav-in,.cfx-foot-in{max-width:var(--cfx-wrap)}
.wrap,.container,.shell{max-width:var(--wrap)!important;margin-left:auto;margin-right:auto;width:100%}
.app > .main > .wrap{max-width:none!important;padding-left:0;padding-right:0}
body > .app{max-width:var(--wrap);margin:0 auto;width:100%;flex:1;min-height:0}
body > .app > .main,
body > .app > main{flex:1;min-width:0}

/* ---------- 6. the sidebar never scrolls away ----------
   Written against every sidebar class the pages use, at any nesting,
   so one rule covers all of them. */
.app > .side,
.app > aside.side,
.app > .rail,
.app > aside,
.wrap > .side,
aside.side,
aside.rail{
  position:sticky!important;
  top:var(--nav-h)!important;
  height:calc(100vh - var(--nav-h))!important;
  max-height:calc(100vh - var(--nav-h))!important;
  overflow-y:auto;
  overscroll-behavior:contain;
  align-self:start!important;
  flex:none;
}
/* thin scrollbar inside the sidebar so it does not shout */
aside.side::-webkit-scrollbar,
.app > .side::-webkit-scrollbar,
.app > .rail::-webkit-scrollbar{width:6px}
aside.side::-webkit-scrollbar-thumb,
.app > .side::-webkit-scrollbar-thumb,
.app > .rail::-webkit-scrollbar-thumb{background:rgba(255,255,255,.08);border-radius:6px}

/* panels that stick inside a page clear the navbar */
.toc,.side-sticky,.sticky-card{top:calc(var(--nav-h) + 16px)!important}

/* ---------- 7. dialogs sit above the navbar ----------
   The navbar is z-index 200, so anything modal has to be higher or it
   slides underneath. */
.scrim,.modal-scrim,.overlay,.sheet-scrim{z-index:400!important}
.modal,.dialog,.sheet{z-index:401!important}
.toast{z-index:500!important}
.cfx-menu{z-index:210}

/* a modal never grows past the screen */
.modal{max-height:calc(100vh - 48px);overflow-y:auto}

/* ---------- 8. one sidebar look ----------
   Journal, Tools and Analytics each styled their own nav items. */
.side-nav .snav,.side .snav,.rail .snav,.faqcat,.ncat{
  display:flex;align-items:center;gap:11px;
  padding:10px 12px;border-radius:10px;
  font-size:12.5px;font-weight:500;color:var(--muted);
  transition:background .16s,color .16s;
}
.side-nav .snav:hover,.side .snav:hover,.rail .snav:hover{
  background:rgba(255,255,255,.045);color:var(--ink);
}
.side-nav .snav.on,.side .snav.on,.rail .snav.on{
  background:var(--grad);color:#fff;font-weight:600;
}
.side-nav .snav svg,.side .snav svg,.rail .snav svg{width:16px;height:16px;flex:none}

.sgroup,.side-group{
  font-size:9.5px;letter-spacing:.16em;text-transform:uppercase;
  color:var(--muted2);font-weight:800;padding:14px 12px 7px;
}

/* ---------- 9. one form control ---------- */
input:not([type=checkbox]):not([type=radio]),select,textarea{
  font-family:"Inter",sans-serif;
  font-size:13px;
  color:var(--ink);
  background:var(--field);
  border:1px solid var(--line);
  border-radius:10px;
}
input:focus,select:focus,textarea:focus{
  border-color:var(--pu);
  background:rgba(124,92,255,.06);
  outline:none;
}
select option{background:#10152A;color:var(--ink)}

/* ---------- 10. one button ---------- */
.btn,.cfx-btn{
  font-family:"Manrope",sans-serif;font-weight:700;font-size:13px;
  border-radius:10px;transition:transform .16s,background .18s,border-color .18s;
}
.btn.grad,.cfx-btn.grad,.btn.primary{background:var(--grad);color:#fff}
.btn.grad:hover,.cfx-btn.grad:hover,.btn.primary:hover{transform:translateY(-2px)}

/* ---------- 11. one meaning for colour ---------- */
.up,.win,.positive,.dir-buy{color:var(--green)}
.down,.loss,.negative,.dir-sell{color:var(--red)}

/* ---------- 12. mobile ---------- */
@media (max-width:980px){
  .app > .side,
  .app > aside.side,
  .app > .rail,
  aside.side,
  aside.rail{
    position:fixed!important;
    left:0;top:var(--nav-h)!important;
    z-index:180;
    transform:translateX(-100%);
    transition:transform .22s;
  }
  .app > .side.open,
  .app > aside.side.open,
  aside.side.open{transform:none!important}
}
@media (prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}

/* ---------- 13. the shell for pages that get an injected sidebar ---------- */
.app{display:flex;align-items:flex-start;gap:18px;width:100%}
.app > .side,.app > aside.side{width:248px;padding:16px 12px;
  background:var(--side);border-right:1px solid var(--line)}
.app > .main{padding:18px 20px 40px}

.upsell{background:linear-gradient(170deg,rgba(124,92,255,.16),rgba(12,16,32,.6));
  border:1px solid rgba(124,92,255,.3);border-radius:var(--radius);padding:15px}
.upsell .ut{display:flex;align-items:center;gap:8px;font-family:"Manrope",sans-serif;
  font-weight:800;font-size:12.5px;margin-bottom:7px}
.upsell .ut svg{width:15px;height:15px;color:#A78BFA}
.upsell p{font-size:10.5px;color:var(--muted2);line-height:1.6;margin:0 0 12px}
.upsell a{display:block;text-align:center;background:var(--grad);color:#fff;
  border-radius:9px;padding:9px;font-family:"Manrope",sans-serif;font-weight:700;font-size:12px}

@media (max-width:980px){
  .app{display:block}
  .app > .main{padding:14px}
}

/* ---------- 14. the app sidebar ----------
   Built by layout.js and identical on every member page. */
.app > aside.side,.app > .side{
  width:248px;flex:none;
  background:var(--side);
  border-right:1px solid var(--line);
  padding:16px 12px;
}
.side .side-nav{display:flex;flex-direction:column;gap:2px}
.side .snav{
  display:flex;align-items:center;gap:12px;
  padding:11px 13px;border-radius:11px;
  font-size:13px;font-weight:500;color:var(--muted);
  text-decoration:none;white-space:nowrap;
}
.side .snav svg{width:17px;height:17px;flex:none}
.side .snav:hover{background:rgba(255,255,255,.05);color:var(--ink)}
.side .snav.on{background:var(--grad);color:#fff;font-weight:600;
  box-shadow:0 8px 20px rgba(91,91,245,.25)}
.side .snav .pill{
  margin-left:auto;background:var(--pu);color:#fff;
  font-size:10px;font-weight:800;font-family:"Manrope",sans-serif;
  min-width:19px;height:19px;border-radius:10px;
  display:grid;place-items:center;padding:0 5px;
}
.side .snav.on .pill{background:rgba(255,255,255,.28)}
.side .upsell{margin-top:18px}

/* the page beside it */
.app > .main{padding:20px 24px 48px;min-width:0}

@media (max-width:1100px){
  .app > aside.side,.app > .side{width:216px}
  .app > .main{padding:16px 18px 40px}
}

/* ---------- 15. the tools page ----------
   It was laid out for a narrower screen: seven fixed columns and smaller
   type than the rest of the site, which made it look cramped at 1920. */
.feat-grid{grid-template-columns:repeat(auto-fill,minmax(280px,1fr))!important;gap:16px!important}
.feat{padding:26px 22px!important;border-radius:var(--radius-lg)!important}
.feat .fi{width:52px!important;height:52px!important;border-radius:15px!important;margin-bottom:16px!important}
.feat .fi svg{width:24px!important;height:24px!important}
.feat b{font-size:16.5px!important;margin-bottom:9px!important}
.feat p{font-size:13px!important;line-height:1.65!important;min-height:42px!important;margin-bottom:18px!important}
.feat .open{font-size:13px!important;padding:11px!important}

.pop-grid{grid-template-columns:repeat(auto-fill,minmax(200px,1fr))!important;gap:14px!important}
.pop{padding:22px 18px!important;border-radius:var(--radius)!important}
.pop .pi{width:46px!important;height:46px!important;border-radius:14px!important}
.pop .pi svg{width:21px!important;height:21px!important}
.pop b{font-size:13.5px!important;min-height:38px!important;margin-bottom:14px!important}
.pop .open{font-size:12.5px!important;padding:10px!important}

.head h1{font-size:26px!important}
.head .sub{font-size:13.5px!important}
.block-head h2{font-size:17px!important}
.block{margin-bottom:20px!important}

.row3{grid-template-columns:repeat(auto-fit,minmax(340px,1fr))!important;gap:16px!important}
.lrow{padding:12px 4px!important}
.lrow b{font-size:13.5px!important}
.lrow .tools,.lrow .cnt{font-size:12.5px!important}
.lrow .li{width:34px!important;height:34px!important}
.lrow .li svg{width:17px!important;height:17px!important}

.cta{padding:22px 24px!important}
.cta b{font-size:17px!important}
.cta p{font-size:13px!important}

@media (max-width:1400px){
  .feat-grid{grid-template-columns:repeat(auto-fill,minmax(250px,1fr))!important}
  .pop-grid{grid-template-columns:repeat(auto-fill,minmax(180px,1fr))!important}
}

/* ---------- 16. no jump while the header is drawn ----------
   The navbar and sidebar are built by script, so their space is reserved in
   advance. Without this the page renders once without them and again with
   them, which reads as a flicker on every navigation. */
#cfxNav{min-height:var(--nav-h);display:block}
#cfxNav:empty{
  border-bottom:1px solid var(--line);
  background:rgba(5,7,14,.92);
}
#cfxFooter{min-height:220px}

/* the sidebar column is held open before the script fills it */
body > .app{position:relative}
html:not(.cfx-ready) body > .app::before{
  content:"";
  width:248px;flex:none;
  background:var(--side);
  border-right:1px solid var(--line);
  min-height:calc(100vh - var(--nav-h));
}
html:not(.cfx-ready) body > .app > .side,
html:not(.cfx-ready) body > .app > aside.side{visibility:hidden}
html.cfx-ready body > .app::before{display:none}

/* pages without a sidebar keep their own width */
html:not(.cfx-ready) body > .app.no-side::before{display:none}

@media (max-width:980px){
  html:not(.cfx-ready) body > .app::before{display:none}
}

/* fade the chrome in rather than snapping it */
#cfxNav,#cfxFooter,.app > aside.side{animation:cfx-in .18s ease-out}
@keyframes cfx-in{from{opacity:.4}to{opacity:1}}
@media (prefers-reduced-motion:reduce){
  #cfxNav,#cfxFooter,.app > aside.side{animation:none}
}