/* ── Reset & Base ─────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; }
html { scroll-behavior: smooth; }
body {
    font-family: 'Inter', system-ui, sans-serif;
    background: var(--bg); color: var(--tx);
    font-size: 14px; line-height: 1.6;
    transition: background .2s, color .2s;
}
a { text-decoration: none; color: inherit; }
.up { color: var(--green-ink); }
.dn { color: var(--red-ink);   }
.sec-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--blue); flex-shrink: 0; display: inline-block; }

/* ── Skip link ────────────────────────────────────────────
   Off-screen until focused rather than display:none, which would take it
   out of the tab order and leave keyboard readers walking the whole nav
   on every page. */
.skip-link {
    position: absolute; left: 8px; top: -60px; z-index: 3000;
    padding: 10px 16px; border-radius: 6px;
    background: var(--blue); color: #fff;
    font-size: 13px; font-weight: 700;
    transition: top .15s;
}
.skip-link:focus { top: 8px; }

/* ── Header ──────────────────────────────────────────── */
.ta-header {
    background: var(--bg); border-bottom: 1px solid var(--bd);
    position: sticky; top: 0; z-index: 1000;
}
.hdr-inner {
    padding-top: 10px; padding-bottom: 10px;
    display: flex; align-items: center; gap: 24px;
}
.ta-brand {
    font-size: 20px; font-weight: 900; letter-spacing: -.5px;
    color: var(--blue); white-space: nowrap;
}
.ta-brand em { color: var(--tx); font-style: normal; }

.ta-nav { display: flex; gap: 2px; flex: 1; }
.ta-nav a {
    font-size: 13.5px; font-weight: 500; color: var(--tx2);
    padding: 5px 13px; border-radius: 6px;
    transition: color .15s, background .15s;
}
/* --blue-ink, not --blue: on the tinted --blue-lt pill the plain accent
   measures 3.13:1 in dark mode. */
.ta-nav a:hover, .ta-nav a.active { color: var(--blue-ink); background: var(--blue-lt); }

/* ── Header on the register (/broker, /broker/*) ──────────
   The register is the one section that paints its own surface and carries its
   own accent, so the shared header has to join it or read as a strip borrowed
   from another site. Three overrides, and deliberately only three — each was
   measured, and the header properties NOT listed here are load-bearing for
   contrast elsewhere in the bar. Everything else about the header is unchanged,
   including the wordmark's shape: an identity that reshapes itself when you
   change section is worse than the mismatch it would fix.

   1. Surface and hairline. --bg is #FFFFFF and the register's paper is #FDFCF9
      — two points apart, which is the worst possible distance: not different
      enough to be a decision, close enough to look like an oversight. In the
      dark theme these two already agree exactly (#0F172A, and #334155 for the
      rule), so this changes nothing there and is written to stay true if the
      dark ramp ever moves. */
body.on-register .ta-header {
    background: var(--ta-surface);
    border-bottom-color: var(--ta-rule-2);
}
/* 2. One blue, not two. The site accent is #1D4ED8 and the register's is
      #1E40AF; stacked a pixel apart in the same viewport that reads as a
      colour that failed to load. The wordmark takes the register's accent —
      8.50:1 light, and in dark it goes from #3B82F6 at 4.85:1 to #93C5FD at
      9.90:1, so this is also a legibility gain. */
body.on-register .ta-brand { color: var(--ta-brand); }
/* 3. The active pill under "Brokers" sat on --blue-lt #DBEAFE one pixel above a
      masthead tinted #EAEFF9 — again a near-miss. Given the register's own tint
      the pill stops competing and starts agreeing with the band below it.
      Measured on that tint: 7.56:1 light, 8.48:1 dark. */
body.on-register .ta-nav a:hover,
body.on-register .ta-nav a.active {
    background: var(--ta-brand-soft);
    color: var(--ta-brand);
}
/* 4. Sign Up is the most saturated thing in the bar, so leaving it on #1D4ED8
      beside a #1E40AF wordmark would have kept the exact near-miss this block
      exists to remove. It cannot simply take --ta-brand: that token is a PALE
      tint in the dark theme and .btn-pro's label is a hard-coded #fff, which
      would be about 1.5:1 on it. The register already solved this for its own
      CTA — flip the label, not the fill — so this borrows that pattern.
      --ta-brand-on is #FFFFFF light / #0B1220 dark: 8.72:1 and 10.38:1. */
body.on-register .btn-pro {
    background: var(--ta-brand);
    color: var(--ta-brand-on);
}
/* The site's hover is a hard-coded #1E40AF, which on the register IS --ta-brand
   in light — i.e. no hover at all. */
body.on-register .btn-pro:hover {
    background: var(--ta-brand-strong);
    color: var(--ta-brand-on);
}
/* NOT overridden, on purpose: the dark-mode switch. Its white thumb needs a
   saturated track to sit on, and --ta-brand is a pale tint in dark, so the
   thumb would disappear into it. It keeps the site's blue. */

.hdr-actions { display: flex; align-items: center; gap: 8px; }
/* nowrap: at 375px "Sign Up" was breaking onto two lines and taking the
   whole sticky header from 54px to 73px. */
.btn-login, .btn-pro { white-space: nowrap; }
.btn-login {
    font-size: 13px; font-weight: 500; font-family: inherit;
    padding: 5px 15px; border-radius: 6px;
    border: 1.5px solid var(--bd); background: transparent; color: var(--tx);
    cursor: pointer; transition: border-color .15s, color .15s;
}
.btn-login:hover { border-color: var(--blue); color: var(--blue); }
.btn-pro {
    font-size: 13px; font-weight: 700; font-family: inherit;
    padding: 5px 15px; border-radius: 6px;
    /* --blue-fill carries white text; --blue does not in dark mode. */
    border: none; background: var(--blue-fill); color: #fff;
    cursor: pointer; transition: background .15s;
}
.btn-pro:hover { background: #1E40AF; }

/* Dark mode toggle */
.dm-wrap { display: flex; align-items: center; gap: 7px; margin-left: 6px; }
.dm-lbl  { font-size: 11px; font-weight: 700; color: var(--tx3); width: 30px; text-align: right; }
.sw { position: relative; width: 44px; height: 24px; cursor: pointer; flex-shrink: 0; }
.sw input { opacity: 0; width: 0; height: 0; }
.sw-track { position: absolute; inset: 0; background: #CBD5E1; border-radius: 12px; transition: background .2s; }
.sw-thumb { position: absolute; top: 3px; left: 3px; width: 18px; height: 18px; background: #fff; border-radius: 50%; transition: transform .2s; box-shadow: 0 1px 3px rgba(0,0,0,.2); }
.sw input:checked + .sw-track { background: var(--blue); }
/* The checkbox is 0×0, so the ring has to be drawn on the track. */
.sw input:focus-visible + .sw-track { outline: 2px solid var(--blue); outline-offset: 2px; }
.sw input:checked ~ .sw-thumb { transform: translateX(20px); }

/* ── Inline expanding search ─────────────────────────── */
.nav-search { position: relative; flex-shrink: 0; display: flex; }
.nav-search-box {
    display: flex; align-items: center;
    border: 1.5px solid var(--bd); border-radius: 20px;
    background: transparent;
    height: 32px; width: 32px;
    overflow: hidden; cursor: pointer; flex-shrink: 0;
    transition: width .32s cubic-bezier(.4,0,.2,1), border-color .2s, background .15s;
}
.nav-search-box.open { width: 220px; border-color: var(--blue); cursor: default; }
.nav-search-box:not(.open):hover { border-color: var(--blue); background: var(--blue-lt); }
.nav-search-icon {
    font-size: 13px; color: var(--tx2); padding: 0 9px;
    flex-shrink: 0; pointer-events: none; transition: color .2s;
}
.nav-search-box.open .nav-search-icon { color: var(--blue); }
.nav-search-input {
    flex: 1; min-width: 0; border: none; background: transparent;
    font-family: inherit; font-size: 12.5px; color: var(--tx); outline: none;
    opacity: 0; padding: 0; transition: opacity .18s .08s;
}
.nav-search-box.open .nav-search-input { opacity: 1; }
.nav-search-input::placeholder { color: var(--tx3); font-size: 12px; }
.nav-search-clear {
    background: none; border: none; color: var(--tx3);
    font-size: 13px; cursor: pointer; padding: 0 8px 0 2px;
    flex-shrink: 0; opacity: 0; line-height: 1; transition: opacity .15s, color .15s;
}
.nav-search-box.open .nav-search-clear { opacity: 1; }
.nav-search-clear:hover { color: var(--tx); }
.nav-search-input::-webkit-search-cancel-button { display: none; }

/* Typeahead dropdown */
.nav-search-drop {
    display: none; position: absolute; top: calc(100% + 6px); right: 0;
    width: 340px; max-height: 60vh; overflow-y: auto; z-index: 1500;
    background: var(--bg); border: 1px solid var(--bd); border-radius: 10px;
    box-shadow: 0 12px 32px rgba(0,0,0,.14); padding: 6px; text-align: left;
}
.nav-search-drop.open { display: block; }
.nsd-group {
    font-size: 9.5px; font-weight: 800; text-transform: uppercase;
    letter-spacing: .6px; color: var(--tx3); padding: 8px 10px 4px;
}
.nsd-item { display: block; padding: 7px 10px; border-radius: 6px; text-decoration: none; }
.nsd-item:hover, .nsd-item.active { background: var(--blue-lt); }
.nsd-label { font-size: 12.5px; font-weight: 700; color: var(--tx); line-height: 1.35; }
.nsd-sub { font-size: 11px; color: var(--tx3); margin-top: 1px; }
.nsd-all {
    display: block; padding: 9px 10px; margin-top: 4px;
    border-top: 1px solid var(--bd); font-size: 11.5px; font-weight: 700;
    color: var(--blue); text-decoration: none;
}
.nsd-all:hover, .nsd-all.active { background: var(--bg2); }
.nsd-msg { padding: 12px 10px; font-size: 12px; color: var(--tx3); }

/* ── Ticker ──────────────────────────────────────────────
   The tape is a TradingView iframe that arrives long after first paint.
   Reserving its measured 46px stops the sticky header growing under the
   reader's cursor and taking the whole page down with it. */
#tv-ticker-bar { min-height: 46px; }

/* ── Page Wrapper ────────────────────────────────────── */
/* Width and side padding come from .container-xxl */
.ta-page { padding-bottom: 56px; }

/* ── Footer ──────────────────────────────────────────── */
.ta-footer { background: var(--bg2); border-top: 1px solid var(--bd); margin-top: 52px; }
.footer-main { padding-top: 44px; padding-bottom: 36px; }
.footer-brand { display: flex; flex-direction: column; gap: 12px; }
/* The footer sits on --bg2, where --blue is 3.98:1 at this size. */
.footer-logo { font-size: 18px; font-weight: 900; letter-spacing: -.4px; color: var(--blue-ink); }
.footer-logo em { color: var(--tx); font-style: normal; }
.footer-tagline { font-size: 12.5px; color: var(--tx2); line-height: 1.6; max-width: 240px; }
.footer-badges { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 4px; }
.footer-badge { font-size: 10px; font-weight: 700; padding: 3px 10px; border-radius: 20px; border: 1px solid var(--bd); color: var(--tx2); }
/* h2, not h4: the footer sits after page content that stops at h2 or h3,
   so h4 was a skipped level on every page. The size comes from the class. */
.footer-col h2 { font-size: 11px; font-weight: 800; text-transform: uppercase; letter-spacing: .7px; color: var(--tx); margin-bottom: 14px; }
.footer-col ul { list-style: none; padding: 0; display: flex; flex-direction: column; gap: 9px; }
.footer-col ul li a { font-size: 13px; color: var(--tx2); transition: color .15s; }
.footer-col ul li a:hover { color: var(--blue); }
.footer-divider { border-top: 1px solid var(--bd); }
.footer-legal {
    padding-top: 18px; padding-bottom: 18px;
    display: flex; align-items: center; justify-content: space-between;
    flex-wrap: wrap; gap: 12px;
}
.legal-links { display: flex; flex-wrap: wrap; gap: 4px; }
.legal-links a { font-size: 11px; color: var(--tx3); padding: 0 8px; border-right: 1px solid var(--bd); transition: color .15s; }
.legal-links a:last-child { border-right: none; }
.legal-links a:hover { color: var(--blue); }
.footer-copy { font-size: 11px; color: var(--tx3); }

/* ── Mobile Nav ──────────────────────────────────────── */
.nav-toggle { display: none; background: none; border: none; color: var(--tx); font-size: 22px; cursor: pointer; padding: 4px 6px; line-height: 1; }
.mobile-nav {
    display: none; position: fixed; inset: 0; z-index: 2000;
    background: var(--bg); flex-direction: column; padding: 0; overflow-y: auto;
}
.mobile-nav.open { display: flex; }
.mob-nav-hdr {
    display: flex; align-items: center; justify-content: space-between;
    padding: 14px 20px; border-bottom: 1px solid var(--bd);
    position: sticky; top: 0; background: var(--bg); z-index: 1;
}
.mob-nav-brand { font-size: 18px; font-weight: 900; color: var(--blue); }
.mob-nav-brand em { color: var(--tx); font-style: normal; }
.mob-nav-close { background: none; border: none; color: var(--tx); font-size: 22px; cursor: pointer; padding: 4px; line-height: 1; }
.mob-nav-links { display: flex; flex-direction: column; padding: 8px 0; }
.mob-nav-links a {
    font-size: 15px; font-weight: 600; color: var(--tx2);
    padding: 14px 20px; border-bottom: 1px solid var(--bd);
    display: flex; align-items: center; gap: 10px;
    transition: color .15s, background .15s;
}
.mob-nav-links a:hover, .mob-nav-links a.active { color: var(--blue); background: var(--blue-lt); }
/* Set like a nav row rather than a settings panel, because that is what it is
   standing in for — the header switch, which is hidden below 768px. */
/* No border of its own: .mob-nav-links already ends on one, and a second rule
   8px below it read as a mis-drawn divider. */
.mob-nav-theme {
    display: flex; align-items: center; justify-content: space-between;
    padding: 14px 20px;
}
.mob-nav-theme-lbl {
    font-size: 15px; font-weight: 600; color: var(--tx2);
    display: flex; align-items: center; gap: 10px;
}
.mob-nav-footer { padding: 20px; display: flex; gap: 10px; border-top: 1px solid var(--bd); margin-top: auto; }
.mob-nav-footer .btn-login, .mob-nav-footer .btn-pro { flex: 1; padding: 10px; font-size: 14px; display: block; }

/* ── Shared Responsive ───────────────────────────────── */
@keyframes blink { 0%,100%{opacity:1} 50%{opacity:.2} }

/* The horizontal nav needs 712px for its links, and with the brand and the
   header actions either side the row measures 1159px — it does not fit
   until the viewport passes 1215px. Below that it was simply laying out
   past the right edge, so every page scrolled sideways at 768–1215px.
   The hamburger already holds the same links (plus Watchlist), so it
   takes over until there is genuinely room. */
@media (max-width: 1215px) {
    .ta-nav     { display: none; }
    .nav-toggle { display: flex !important; }
    /* .ta-nav was carrying flex:1, so the actions need their own push. */
    .hdr-actions { margin-left: auto; }
}

@media (max-width: 767px) {
    .btn-login  { display: none; }
    /* The header's four actions are all fixed-width — hamburger 34, search pill
       32, Sign Up 82, switch 44 — so beside a 129px wordmark the row measured
       387px and every page scrolled sideways on a 320px phone. The switch is
       the one action with somewhere else to live: it moves to .mob-nav-theme
       inside the hamburger panel, which is already the only way to reach the
       nav at this width. Search and Sign Up stay: both are one tap. */
    .dm-wrap    { display: none; }
    .hdr-inner  { gap: 10px; }
    .ta-page    { padding-bottom: 40px; }
    .footer-legal { flex-direction: column; align-items: flex-start; gap: 8px; }
    /* The footer's 40px gutter used to need clamping to 32px here: a row's
       negative margin is half its x-gutter and the container only pays it
       back as padding, so 40px against the phone gutter's 16px pushed the
       footer 4px past the viewport. The shared 24px gutter is inside that
       budget, so the override is gone rather than restated. */
    .nav-search-box.open { width: 180px; }
    .nav-search-drop { width: calc(100vw - 32px); right: -6px; }
}

/* Losing the switch above gets the header inside a 390px viewport but not a
   320px one, and the three actions that remain are all one-tap essentials.
   The last ~33px therefore come off the wordmark and the gaps. 389px is the
   edge on purpose: every current iPhone is 390 or wider and needs none of it. */
@media (max-width: 389px) {
    .ta-brand    { font-size: 17px; }
    .hdr-inner   { gap: 8px; }
    .hdr-actions { gap: 6px; }
    .btn-pro     { padding: 5px 11px; }
}