/* =========================================================
   MAIN.CSS
   Design tokens, reset, typography, base layout, header, nav.
   ========================================================= */

/* -------------------- 1. Design tokens -------------------- */
:root{
  --bg:#08090a;
  --bg-glow-1:#101a15;
  --bg-glow-2:#0f1713;
  --panel:#111411;
  --panel2:#161a17;
  --panel-hi:#1a1f1b;
  --line:#212a23;
  --line-soft:#181f1a;
  --ink:#eef1ee;
  --ink-dim:#aebcb2;
  --dim:#7f9385;
  --dim2:#546156;
  --amber:#f0b429;
  --amber-ink:#1a1305;
  --amber-dim:#8a6c22;
  --green:#3ddc97;
  --green-soft:rgba(61,220,151,.10);
  --green-line:#22503b;
  --red:#f2637a;
  --red-soft:rgba(242,99,122,.10);
  --red-line:#5a2530;
  --mono:'IBM Plex Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
  --disp:'Space Grotesk', 'IBM Plex Mono', sans-serif;
  --r-sm:6px;
  --r-md:8px;
  --r-lg:12px;
  --r-xl:16px;
  --r-pill:20px;
  --r-btn:9px;

  /* elevation / depth system (new — used by the global control redesign).
     Two shadow stops per level: a tight near-shadow for definition and a
     soft far-shadow for lift. Kept subtle on purpose — a trading terminal,
     not a marketing site. */
  --sh-1:0 1px 2px rgba(0,0,0,.35), 0 1px 0 rgba(255,255,255,.02) inset;
  --sh-2:0 2px 6px rgba(0,0,0,.4), 0 4px 14px rgba(0,0,0,.22);
  --sh-3:0 6px 20px rgba(0,0,0,.38);
  --inset-hi:inset 0 1px 0 rgba(255,255,255,.05);
  --inset-hi-strong:inset 0 1px 0 rgba(255,255,255,.09);
  --inset-press:inset 0 1px 3px rgba(0,0,0,.4);
  --focus-ring:0 0 0 3px rgba(240,180,41,.18);
  --focus-ring-green:0 0 0 3px rgba(61,220,151,.16);
  --focus-ring-red:0 0 0 3px rgba(242,99,122,.16);

  /* gold surface — the primary accent gradient, darker edge, subtle sheen */
  --amber-grad:linear-gradient(180deg, #f6c650 0%, #f0b429 46%, #dc9f1f 100%);
  --amber-grad-hover:linear-gradient(180deg, #f9d066 0%, #f3bd3a 46%, #e2a72a 100%);
  --amber-grad-active:linear-gradient(180deg, #e0a924 0%, #d59c1c 100%);
  --amber-edge:#b8811a;

  --ease:cubic-bezier(.2,.7,.3,1);
  --dur:180ms;

  /* layout tokens (new — used by header/nav/controls redesign) */
  /* Fluid dashboard width: intentionally generous so real desktop monitors
     (1280–2560px) get a full-bleed trading terminal instead of a narrow
     centered column. Only kicks in as an actual cap on genuinely ultra-wide
     displays (>2500px) so the layout never stretches without bound. */
  --content-max:2400px;
  --edge-pad:clamp(16px, 4vw, 32px);
  --header-h-desktop:auto;
  --touch-target:44px;
}

@import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:wght@400;500;600;700&family=Space+Grotesk:wght@500;600;700&display=swap');

/* -------------------- 2. Reset -------------------- */
*{ box-sizing:border-box; }
html{
  -webkit-text-size-adjust:100%;
  /* Belt-and-braces alongside body's overflow-x:hidden below — some mobile
     browsers (older iOS Safari in particular) only fully respect this rule
     when it's set on both html AND body, so it's duplicated deliberately. */
  max-width:100%;
  overflow-x:hidden;
}
body{
  margin:0;
  max-width:100%;
  background:
    radial-gradient(1200px 520px at 12% -12%, var(--bg-glow-1) 0%, transparent 58%),
    radial-gradient(1000px 520px at 102% -6%, var(--bg-glow-2) 0%, transparent 55%),
    var(--bg);
  color:var(--ink);
  font-family:var(--mono);
  min-height:100vh;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden; /* belt-and-braces: nothing should ever force page-level horizontal scroll */
}
button, input, select{ font-family:inherit; }
button{ font:inherit; }
a{ color:inherit; }
::selection{ background:rgba(61,220,151,.25); }

:focus-visible{ outline:2px solid var(--amber); outline-offset:2px; border-radius:var(--r-sm); }

@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{ animation-duration:.001ms !important; animation-iteration-count:1 !important; transition-duration:.001ms !important; scroll-behavior:auto !important; }
}

/* -------------------- 3. Typography -------------------- */
h1,h2,h3{ font-family:var(--disp); margin:0; letter-spacing:.005em; }
.mono-num{ font-family:var(--disp); font-variant-numeric:tabular-nums; }
.caption{ font-size:10px; text-transform:uppercase; letter-spacing:.09em; color:var(--dim); }

/* -------------------- 4. Base layout -------------------- */
.wrap{
  width:100%;
  max-width:var(--content-max);
  margin:0 auto;
  padding:clamp(16px, 3vw, 26px) var(--edge-pad) 60px;
}
.panel{ display:none; }
.panel.active{ display:block; animation:panelIn .22s ease; }
@keyframes panelIn{ from{ opacity:0; transform:translateY(4px);} to{ opacity:1; transform:none; } }

/* -------------------- 5. Header -------------------- */
.term-header{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:24px;
  border-bottom:1px solid var(--line);
  padding-bottom:20px;
  margin-bottom:20px;
}
.brand-block{ display:flex; align-items:center; gap:14px; min-width:0; }
.logo-img{ height:44px; width:auto; display:block; border-radius:var(--r-sm); flex-shrink:0; }
.brand-copy{ display:flex; flex-direction:column; gap:4px; min-width:0; }
.brand-row{ display:flex; align-items:baseline; gap:9px; flex-wrap:wrap; }
.product-name{ font-family:var(--disp); font-weight:700; font-size:clamp(14px, 4vw, 16px); letter-spacing:.01em; color:var(--ink); }
.sub{ color:var(--dim); font-size:11.5px; }

.status-cluster{ display:flex; flex-direction:column; align-items:flex-end; gap:9px; flex-shrink:0; }
.live-pill{
  display:flex; align-items:center; gap:8px; font-size:11.5px; color:var(--ink-dim);
  background:var(--panel); border:1px solid var(--line); border-radius:var(--r-pill); padding:6px 12px 6px 10px;
}
.dot{ width:7px;height:7px;border-radius:50%; background:var(--dim); display:inline-block; flex-shrink:0; }
.dot.live{ background:var(--green); box-shadow:0 0 0 3px var(--green-soft); animation:pulseDot 2.2s infinite; }
.dot.err{ background:var(--red); box-shadow:0 0 0 3px var(--red-soft); }
@keyframes pulseDot{ 0%,100%{ box-shadow:0 0 0 0 rgba(61,220,151,.35);} 50%{ box-shadow:0 0 0 5px rgba(61,220,151,0);} }

.exchange-badges{ display:flex; gap:6px; flex-wrap:wrap; justify-content:flex-end; }
.xbadge{
  display:flex; align-items:center; gap:6px; font-size:9.5px; font-weight:600; letter-spacing:.07em;
  color:var(--dim2); border:1px solid var(--line-soft); border-radius:var(--r-sm); padding:4px 8px;
  background:var(--panel); white-space:nowrap;
}
.xbadge-dot{ width:6px;height:6px;border-radius:50%; background:var(--dim2); flex-shrink:0; }
.xbadge[data-state="up"]{ color:var(--green); border-color:var(--green-line); background:var(--green-soft); }
.xbadge[data-state="up"] .xbadge-dot{ background:var(--green); }
.xbadge[data-state="down"]{ color:var(--red); border-color:var(--red-line); background:var(--red-soft); }
.xbadge[data-state="down"] .xbadge-dot{ background:var(--red); }
.last-update{ display:none; font-size:10.5px; color:var(--dim2); white-space:nowrap; }   /* hidden: it stays in the DOM because the scan code and the mobile status sheet read it */
.server-clock{ font-size:10.5px; color:var(--dim2); white-space:nowrap; font-variant-numeric:tabular-nums; cursor:default; }
.server-clock .sc-time{ color:var(--ink-dim); font-weight:600; letter-spacing:.02em; }
.server-clock[data-state="local"] .sc-time{ color:var(--dim2); }

/* -------------------- 6. Navigation -------------------- */
.term-nav{
  display:flex; gap:26px; border-bottom:1px solid var(--line); margin-bottom:22px;
  overflow-x:auto; scrollbar-width:none; -ms-overflow-style:none;
}
.term-nav::-webkit-scrollbar{ display:none; }
.navtab{
  appearance:none; background:none; border:none; border-radius:var(--r-sm) var(--r-sm) 0 0; cursor:pointer;
  display:flex; align-items:center; gap:8px;
  font-family:var(--disp); font-weight:600; font-size:13px; color:var(--dim);
  padding:11px 10px 12px; border-bottom:2px solid transparent; letter-spacing:.01em;
  transition:color var(--dur) var(--ease), border-color var(--dur) var(--ease), background var(--dur) var(--ease);
  white-space:nowrap; flex-shrink:0;
  min-height:var(--touch-target);
  text-decoration:none; /* nav items are real <a> links between pages now */
}
.navtab .ic{ display:inline-flex; align-items:center; font-size:15px; opacity:.85; }

/* -------------------- Icons --------------------
   All icons come from assets/icons.svg (see js/icons.js for the JS helper).
   They are 1em square and draw in currentColor, so an icon picks up the size
   and colour of the text it sits next to. */
.icon{
  width:1em; height:1em; flex:none; display:inline-block; vertical-align:-.14em;
  fill:none; stroke:currentColor; stroke-width:2; stroke-linecap:round; stroke-linejoin:round;
}
/* Same glyphs as CSS masks, for icons drawn by ::before pseudo-elements
   (banner icons, the collapsible-section arrow) where markup can't go. */
:root{
  --mask-info:url("data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 viewBox=%270 0 24 24%27 fill=%27none%27 stroke=%27black%27 stroke-width=%272.2%27 stroke-linecap=%27round%27 stroke-linejoin=%27round%27%3E%3Ccircle cx=%2712%27 cy=%2712%27 r=%2710%27/%3E%3Cpath d=%27M12 16v-4%27/%3E%3Cpath d=%27M12 8h.01%27/%3E%3C/svg%3E");
  --mask-alert:url("data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 viewBox=%270 0 24 24%27 fill=%27none%27 stroke=%27black%27 stroke-width=%272.2%27 stroke-linecap=%27round%27 stroke-linejoin=%27round%27%3E%3Cpath d=%27m21.73 18-8-14a2 2 0 0 0-3.48 0l-8 14A2 2 0 0 0 4 21h16a2 2 0 0 0 1.73-3%27/%3E%3Cpath d=%27M12 9v4%27/%3E%3Cpath d=%27M12 17h.01%27/%3E%3C/svg%3E");
  --mask-chevron-right:url("data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 viewBox=%270 0 24 24%27 fill=%27none%27 stroke=%27black%27 stroke-width=%272.2%27 stroke-linecap=%27round%27 stroke-linejoin=%27round%27%3E%3Cpath d=%27m9 18 6-6-6-6%27/%3E%3C/svg%3E");
}
.navtab:hover{ color:var(--ink-dim); background:rgba(255,255,255,.03); }
.navtab:focus-visible{ outline:none; box-shadow:var(--focus-ring); }
.navtab.active{
  color:var(--ink); border-bottom-color:var(--amber);
  background:linear-gradient(180deg, rgba(240,180,41,.08), transparent 85%);
  text-shadow:0 0 18px rgba(240,180,41,.18);
}

/* Sub-nav inside the combined Autotrade & Futures panel — same visual
   language as .term-nav/.navtab (so it's obviously "a set of tabs" and
   not a new pattern to learn) but visually smaller/secondary, so it
   doesn't get mistaken for a second row of top-level tabs. */
.term-subnav{
  display:flex; gap:20px; border-bottom:1px solid var(--line-soft); margin-bottom:18px;
  overflow-x:auto; scrollbar-width:none; -ms-overflow-style:none;
}
.term-subnav::-webkit-scrollbar{ display:none; }
.navtab.subnavtab{ font-size:12px; padding:8px 2px 10px; }