@import url("/brand/tradesmq-theme.css");
/* Shared website palette. Keep the canvas dark before fonts or JavaScript load. */
:root {
  color-scheme: dark;
  background: var(--tq-bg);
  --bg: var(--tq-bg);
  --surface: var(--tq-surface);
  --surface2: var(--tq-surface-2);
  --surface3: var(--tq-raised);
  --border: var(--tq-border);
  --border2: var(--tq-border-2);
  --text: var(--tq-text);
  --muted: var(--tq-muted);
  --green: var(--tq-green);
  --buy-soft: var(--tq-green-soft);
  --sell-soft: var(--tq-loss-soft);
  --trim: #D99A2B;
  --amber: var(--trim);
  --ease-out: cubic-bezier(.16,1,.3,1);
  --ease-in-out: cubic-bezier(.45,0,.55,1);
  --red: var(--tq-loss);
  --link: var(--tq-accent);
  --accent: var(--link);
  --accent2: var(--link);
  --accent-soft: #182344;
  --brand-green: var(--tq-green);
  --brand-blue: var(--link);
  --cta: var(--green);
  --cta-hover: var(--tq-gain);
  --cta-text: var(--tq-green-ink);
  --paper: var(--bg);
  --ink: var(--text);
  --secondary: var(--tq-secondary);
  --rule: var(--border);
  --action: var(--cta);
  --record: var(--surface);
  --record-text: var(--text);
  --record-muted: var(--muted);
  --record-rule: var(--border);
  --buy: var(--green);
  --sell: var(--red);
  --text-muted: var(--muted);
  --faint: var(--muted);
  --unknown: var(--muted);
  --hold: var(--link);
  --blue: var(--link);
  --blue-soft: var(--accent-soft);
  --surface-raised: var(--surface2);
  --surface-quiet: var(--surface);
  --border-strong: var(--border2);
  --panel: var(--surface);
  --font: "Hanken Grotesk", sans-serif;
  --display: var(--font);
  --mono: var(--font);
  --font-body: var(--font);
  --font-display: var(--font);
  --font-heading: var(--font);
  --font-mono: var(--font);
  font-synthesis: none;
  scrollbar-color: var(--border2) var(--bg);
}
@font-face { font-family: "Hanken Grotesk"; src: url('/fonts/static/hanken-grotesk-400.woff2') format('woff2'); font-weight: 400; font-display: swap; }
@font-face { font-family: "Hanken Grotesk"; src: url('/fonts/static/hanken-grotesk-600.woff2') format('woff2'); font-weight: 600; font-display: swap; }
@font-face { font-family: "Hanken Grotesk"; src: url('/fonts/static/hanken-grotesk-700.woff2') format('woff2'); font-weight: 700; font-display: swap; }
html { background: var(--bg); -webkit-text-size-adjust: 100%; }
body { background: var(--bg); color: var(--text); font-family: var(--font); font-size: 17px; line-height: 28px; }
button, input, select, textarea { font-family: var(--font); color-scheme: dark; }
input, select, textarea { accent-color: var(--green); }
input::placeholder, textarea::placeholder { color: var(--muted); opacity: 1; }
input:-webkit-autofill { -webkit-text-fill-color: var(--text); box-shadow: 0 0 0 1000px var(--surface2) inset; caret-color: var(--text); }
::selection { color: var(--text); background: var(--accent-soft); }
:focus-visible { outline: 3px solid var(--link); outline-offset: 4px; }
button:disabled, input:disabled { opacity: 1; color: var(--muted); background: var(--surface2); border-color: var(--border2); cursor: default; }
h1, h2, h3, h4 { font-family:var(--font); }
h1, h2, h3 { text-wrap: balance; }
a, button, summary { transition: color 150ms ease, background-color 150ms ease, border-color 150ms ease, transform 150ms ease; }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
}
@media (forced-colors: active) { :focus-visible { outline-color: Highlight; } }

/* Shared registry-driven header on account pages and the public website. */
.site-header { box-sizing:border-box; width:100%; border-bottom:1px solid var(--border); background:#000000e8; backdrop-filter:blur(12px); position:sticky; top:0; z-index:5; }
.site-header .header-inner { box-sizing:border-box; max-width:1184px; padding:0 40px; margin:auto; min-height:96px; display:flex; justify-content:space-between; align-items:center; gap:28px; }
.site-header .brand { display:flex; align-items:center; gap:10px; color:var(--text); text-decoration:none; font-size:22px; line-height:28px; font-weight:700; }
.site-header .brand img { width:32px; height:32px; }
.site-header .site-nav { display:flex; align-items:center; flex-wrap:wrap; gap:28px; font-size:17px; line-height:28px; }
.site-header .site-nav a { color:var(--text); text-decoration:none; }
.site-header .site-nav a:hover { text-decoration:underline; }
.site-header .site-nav .button { display:inline-block; border:1px solid var(--cta); border-radius:6px; padding:10px 20px; background:var(--cta); color:var(--cta-text); font-weight:600; }
.skip-link { position:absolute; left:24px; top:-100px; z-index:10; background:var(--bg); color:var(--link); padding:10px; }
.skip-link:focus { top:10px; }
code, pre { font-family:var(--font); }
.logo-wordmark, .logo-wordmark span, .logo-t, .logo-q { color:var(--text); }
@media(prefers-reduced-motion:no-preference){
  .site-header .button:hover, .login-btn:hover:not(:disabled), .btn.primary:hover:not(:disabled), .download:hover { background:var(--cta-hover); transform:translateY(-1px); }
}
@media(max-width:640px){
  .site-header { position:relative; }
  .site-header .header-inner { padding:20px; align-items:flex-start; flex-direction:column; gap:16px; }
  .site-header .site-nav { width:100%; font-size:14px; line-height:20px; gap:12px 20px; }
  .site-header .site-nav .button { padding:8px 12px; }
}

.logo .logo-wordmark, .logo .logo-wordmark span { color:var(--text); }

body .cc-banner, body .cc-banner .cc-btn { font-size:14px; line-height:20px; font-family:"Hanken Grotesk",sans-serif; letter-spacing:normal; }

/* Legal source pages also render under the public site CSP. */
.legal-table-scroll { overflow-x:auto; -webkit-overflow-scrolling:touch; }
.legal-list-spaced { margin-top:8px; }
.legal-emphasis { color:var(--text); }
.legal-code-accent { color:var(--accent); }