/* Factor Watch shared styles — injected into every page by build_site.py.
   Single source of truth for themes, nav, and common components. */

:root {
  --bg: #06090f; --panel: #0c121c; --panel2: #121a27;
  --line: rgba(163,186,216,.10); --line2: rgba(163,186,216,.18);
  --text: #e7edf6; --dim: #93a3bc; --faint: #76879f;
  --up: #3ddba9; --down: #ff6e8b; --accent: #79a8ff; --warn: #ffc857;
  --sans: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --disp: 'Space Grotesk', 'Inter', sans-serif;
  --mono: 'IBM Plex Mono', ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  --shadow: 0 14px 40px rgba(2,6,12,.45);
  --strong: #f0f4fa; --accent-fg: #06090f;
  --navbg: rgba(6,9,15,.78); --dotgrid: rgba(163,186,216,.05);
  --chip-bg: rgba(255,255,255,.025); --input-bg: rgba(0,0,0,.3);
  --tip-bg: rgba(14,20,30,.96);
  --bench-bg: #232e40; --bench-line: #51637e;
  /* inverted block (the signup): opposite-polarity surface per theme.
     Every --inv pair is audited per theme — text 4.5:1 and controls 3:1
     against --inv-bg, not against the page background. */
  --inv-bg: #e9eef7; --inv-text: #0f1c33; --inv-dim: #44536e;
  --inv-line: rgba(12,26,48,.18); --inv-accent: #2450b8; --inv-accent-fg: #fff;
  --inv-input: #fff; --inv-ok: #0b6e4f; --inv-err: #c22a52;
}
html[data-theme="light"] {
  --bg: #f4f6fa; --panel: #ffffff; --panel2: #e9eef6;
  --line: rgba(16,38,72,.10); --line2: rgba(16,38,72,.18);
  --text: #243551; --dim: #54678a; --faint: #57688a;
  --strong: #0c1a30; --accent: #2e63d8; --accent-fg: #fff;
  --up: #0b7e58; --down: #d6365d; --warn: #8a5f00;
  --navbg: rgba(247,249,252,.82); --dotgrid: rgba(16,38,72,.06);
  --chip-bg: rgba(16,38,72,.04); --input-bg: rgba(16,38,72,.05);
  --tip-bg: rgba(255,255,255,.98);
  --bench-bg: #e6ecf5; --bench-line: #b6c4d8;
  --shadow: 0 14px 40px rgba(23,42,72,.14);
  --inv-bg: #0c1a30; --inv-text: #e7edf6; --inv-dim: #9fb0cc;
  --inv-line: rgba(163,186,216,.28); --inv-accent: #79a8ff; --inv-accent-fg: #0c1a30;
  --inv-input: rgba(255,255,255,.09); --inv-ok: #3ddba9; --inv-err: #ff8aa3;
}
html[data-theme="pro"] {
  --bg: #000; --panel: #0b0b07; --panel2: #16150c;
  --line: rgba(255,157,0,.16); --line2: rgba(255,157,0,.30);
  --text: #d8d2bd; --dim: #b3905a; --faint: #9c8050;
  --strong: #ffa028; --accent: #ff9d00; --accent-fg: #000;
  --up: #00d26a; --down: #ff4747; --warn: #ff9d00;
  --navbg: rgba(0,0,0,.88); --dotgrid: rgba(255,157,0,.05);
  --chip-bg: rgba(255,157,0,.07); --input-bg: rgba(255,157,0,.06);
  --tip-bg: rgba(12,11,4,.97);
  --bench-bg: #1c1a0e; --bench-line: #7d6840;
  --shadow: 0 14px 40px rgba(0,0,0,.65);
  --sans: 'IBM Plex Mono', ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  --disp: 'IBM Plex Mono', ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  /* pro inverts to a solid amber bar — the h2 treatment, scaled up */
  --inv-bg: #ffa028; --inv-text: #000; --inv-dim: rgba(0,0,0,.72);
  --inv-line: rgba(0,0,0,.4); --inv-accent: #000; --inv-accent-fg: #ffa028;
  --inv-input: rgba(0,0,0,.14); --inv-ok: #063f22; --inv-err: #7a0c14;
}
html[data-theme="pro"] *, html[data-theme="pro"] ::before, html[data-theme="pro"] ::after {
  border-radius: 0 !important; }
html[data-theme="pro"] body::before { background: none; }
/* pro chrome: red title bar, amber section bars, amber column heads,
   numbered menu items, denser rows — the terminal look, not just its colors */
html[data-theme="pro"] body { font-size: 12.5px; }
html[data-theme="pro"] h1 { display: inline-block; background: #a50d0d; color: #fff;
  padding: 3px 12px; font-size: 15px; line-height: 1.5; letter-spacing: 1.2px;
  text-transform: uppercase; }
html[data-theme="pro"] h1::after { display: none; }
html[data-theme="pro"] h2 { background: var(--accent); color: #000; padding: 3px 10px;
  font-size: 12px; letter-spacing: 1.2px; text-transform: uppercase; margin: 32px 0 8px; }
html[data-theme="pro"] h2::after { display: none; }
html[data-theme="pro"] h2 .idx { color: #000; border-color: rgba(0,0,0,.45); }
html[data-theme="pro"] h2 a, html[data-theme="pro"] h2 b { color: #000; }
html[data-theme="pro"] th { color: var(--accent); }
html[data-theme="pro"] td { padding: 4px 9px; }
html[data-theme="pro"] .panel, html[data-theme="pro"] .stat,
html[data-theme="pro"] .card { box-shadow: none; }
html[data-theme="pro"] .stat { padding: 10px 12px 9px; }
html[data-theme="pro"] .stat .v { font-size: 16px; }
html[data-theme="pro"] .stat .k, html[data-theme="pro"] .kpi .l,
html[data-theme="pro"] .cat { color: var(--dim); }
html[data-theme="pro"] .subnav .in { counter-reset: bbg; }
html[data-theme="pro"] .subnav a::before { counter-increment: bbg;
  content: counter(bbg) ") "; color: var(--accent); }
html[data-theme="pro"] .pages { counter-reset: bbgp; }
html[data-theme="pro"] .pages a::before { counter-increment: bbgp;
  content: counter(bbgp) ") "; }

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { background: var(--bg); color: var(--text); margin: 0;
       font: 14px/1.55 var(--sans); -webkit-font-smoothing: antialiased;
       font-variant-numeric: tabular-nums; animation: pageIn .5s ease both; }
@keyframes pageIn { from { opacity: 0 } to { opacity: 1 } }
/* aurora + dot-grid backdrop */
body::before { content: ""; position: fixed; inset: 0; pointer-events: none; z-index: 0;
  background: radial-gradient(70% 42% at 50% -10%, rgba(121,168,255,.055), transparent 70%); }
body::after { content: ""; position: fixed; inset: 0; pointer-events: none; z-index: 0;
  background-image: radial-gradient(var(--dotgrid) 1px, transparent 1px);
  background-size: 26px 26px;
  -webkit-mask-image: linear-gradient(180deg, #000 0%, transparent 480px);
  mask-image: linear-gradient(180deg, #000 0%, transparent 480px); }
.wrap { max-width: 1240px; margin: 0 auto; padding: 28px 26px 80px; position: relative; z-index: 1; }
::selection { background: rgba(121,168,255,.35); }

/* skip link for keyboard users */
.skip { position: absolute; left: -9999px; top: 0; z-index: 200; background: var(--accent);
        color: var(--accent-fg); font-weight: 700; padding: 10px 18px; border-radius: 0 0 10px 0;
        text-decoration: none; }
.skip:focus { left: 0; }

/* ── nav ── */
.topnav { position: sticky; top: 0; z-index: 50; background: var(--navbg);
          backdrop-filter: blur(14px) saturate(1.3); -webkit-backdrop-filter: blur(14px) saturate(1.3);
          border-bottom: 1px solid var(--line); transition: transform .28s ease; }
/* Keep primary links in the same row; popovers escape its scroll container. */
.topnav .in { max-width: 1240px; margin: 0 auto; padding: 8px 26px; display: flex;
              align-items: center; gap: 8px; white-space: nowrap;
              overflow-x: auto; scrollbar-width: none; }
.topnav .in::-webkit-scrollbar { display: none; }
.brandlink { display: inline-flex; align-items: center; gap: 9px; text-decoration: none;
             margin-right: 14px; flex: none; }
.mark { width: 23px; height: 23px; border-radius: 7px; background: var(--accent);
        color: var(--accent-fg); font: 800 14px/23px var(--disp); text-align: center; flex: none; }
.brand { font: 700 13.5px var(--disp); letter-spacing: 2.5px; color: var(--strong); }
.brand b { color: var(--accent); font-weight: 700; }
.topnav a { color: var(--dim); text-decoration: none; font-size: 12.5px;
            transition: color .15s, background .15s; }
.topnav a:hover { color: var(--strong); }
.pages { display: flex; gap: 2px; }
.topnav a.page, .topnav button.page { padding: 6px 13px; border-radius: 8px; font-weight: 600; }
.topnav button.page { color:var(--dim); background:transparent; border:0; font-family:var(--sans); font-size:12.5px; cursor:pointer; white-space:nowrap; }
.topnav button.page:hover { color:var(--strong); background:var(--chip-bg); }
.topnav button.page.active { color:var(--accent-fg); background:var(--accent); }
.topnav button.page:focus-visible { outline:2px solid var(--accent); outline-offset:2px; }
/* Use normal flow and auto height so native popover sizing cannot stretch grid rows. */
.about-menu { position:fixed; inset:58px 18px auto auto; margin:0; min-width:210px; height:auto; padding:6px; border:1px solid var(--line2); border-radius:10px; background:var(--panel); color:var(--text); box-shadow:0 16px 40px rgba(0,0,0,.25); }
.about-menu:popover-open { display:block; }
.about-menu { box-sizing:border-box; min-width:0; max-width:calc(100vw - 24px); overflow-y:auto; overscroll-behavior:contain; white-space:normal; }
.topnav .about-menu a { display:block; padding:11px 13px; border-radius:6px; color:var(--text); font-size:14px; }
.topnav .about-menu a + a { margin-top:2px; }
.topnav .about-menu a:hover, .topnav .about-menu a[aria-current=page] { color:var(--accent); background:var(--chip-bg); }
.sr-only { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }
.topnav a.page:hover { background: var(--chip-bg); }
.topnav a.page.active { color: var(--accent-fg); background: var(--accent); }
.topnav .page.mobile-page { display:none; }
.topnav a:focus-visible, .thbtn:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.navright { margin-left: auto; display: flex; align-items: center; gap: 8px; flex: none; }
/* tier-2: section tabs with scroll-spy underline */
.subnav { border-top: 1px solid var(--line); position: relative; }
.subnav .in { padding: 0 26px; gap: 2px; }
.subnav a { color: var(--faint); font-size: 11px; font-weight: 600; text-transform: uppercase;
            letter-spacing: .8px; padding: 8px 10px 7px; border-bottom: 2px solid transparent; }
.subnav a:hover { color: var(--text); }
.subnav a.on { color: var(--accent); border-bottom-color: var(--accent); }
/* edge hint when the subnav scrolls horizontally */
.subnav.fade-r::after { content: ""; position: absolute; top: 0; right: 0; bottom: 0; width: 44px;
  pointer-events: none; background: linear-gradient(270deg, var(--bg), transparent); }
.subnav.fade-l::before { content: ""; position: absolute; top: 0; left: 0; bottom: 0; width: 28px;
  pointer-events: none; z-index: 1; background: linear-gradient(90deg, var(--bg), transparent); }
.mobile-sections { display: none; }
.thbtn { border: 1px solid var(--line2); background: transparent; color: var(--dim);
         border-radius: 8px; padding: 2px 9px 3px; cursor: pointer; font-size: 13px; flex: none; }
.thbtn:hover { color: var(--strong); border-color: var(--faint); }
section, h2[id], .signup[id] { scroll-margin-top: 96px; }

/* ── page header ── */
.pagehead { margin-top: 30px; }
.wrap h1 { font: 700 30px/1.15 var(--disp); letter-spacing: .4px; margin: 0; color: var(--strong); }
.asof { color: var(--dim); font-size: 12px; border: 1px solid var(--line2); border-radius: 999px;
        padding: 4px 12px; background: var(--chip-bg); display: inline-flex;
        align-items: center; gap: 7px; white-space: nowrap; }
.pagehead .asof { display: none; margin-top: 10px; }
.asof .live { color: var(--up); font-weight: 700; }
.pulse { width: 7px; height: 7px; border-radius: 50%; background: var(--up); flex: none;
         animation: pulse 2s ease-out infinite; }
@keyframes pulse { 0% { box-shadow: 0 0 0 0 rgba(61,219,169,.5) } 70% { box-shadow: 0 0 0 7px rgba(61,219,169,0) } 100% { box-shadow: 0 0 0 0 rgba(61,219,169,0) } }
.story { margin: 12px 0 0; font: 500 16.5px/1.65 var(--sans); color: var(--dim); max-width: 86ch; }
.story b { color: var(--strong); font-weight: 650; }
.tagline { color: var(--faint); margin: 12px 0 0; font-size: 13px; max-width: 86ch; }
.tagline a { color: var(--dim); }

/* ── sections (dashboard pages) ── */
.wrap h2 { font: 600 17px var(--disp); letter-spacing: .8px; color: var(--strong);
     margin: 58px 0 6px; display: flex; align-items: center; gap: 12px; }
.wrap h2 .idx { font: 500 11px var(--mono); letter-spacing: 1px; color: var(--accent); flex: none;
          border: 1px solid var(--line2); border-radius: 7px; padding: 3px 7px; }
.wrap h2::after { content: ""; flex: 1; height: 1px;
            background: linear-gradient(90deg, var(--line2), transparent); }
.sub { color: var(--dim); font-size: 12.5px; margin: 0 0 15px; max-width: 92ch; }
.sub a { color: var(--accent); text-decoration: none; }
.panel { background: var(--panel); position: relative;
         border: 1px solid var(--line); border-radius: 16px; padding: 8px 14px;
         box-shadow: inset 0 1px 0 rgba(255,255,255,.04); }
.panel.pad { padding: 18px; }
/* .ts: horizontal scroller inside a panel, with edge-fade affordances */
.ts { overflow-x: auto; }
.panel.fade-r::after { content: ""; position: absolute; top: 1px; right: 1px; bottom: 1px; width: 48px;
  pointer-events: none; border-radius: 0 16px 16px 0;
  background: linear-gradient(270deg, var(--panel), transparent); }
.panel.fade-l::before { content: ""; position: absolute; top: 1px; left: 1px; bottom: 1px; width: 32px;
  pointer-events: none; z-index: 2; border-radius: 16px 0 0 16px;
  background: linear-gradient(90deg, var(--panel), transparent); }
/* .tsw: bare table wrapper (markdown docs) with the same affordance */
.tsw { position: relative; }
.tsw.fade-r::after { content: ""; position: absolute; top: 0; right: 0; bottom: 0; width: 48px;
  pointer-events: none; border-radius: 0 12px 12px 0;
  background: linear-gradient(270deg, var(--panel), transparent); }
.tsw.fade-l::before { content: ""; position: absolute; top: 0; left: 0; bottom: 0; width: 32px;
  pointer-events: none; z-index: 2; border-radius: 12px 0 0 12px;
  background: linear-gradient(90deg, var(--panel), transparent); }
.reveal { opacity: 1; }
html.js .reveal { opacity: 0; transform: translateY(16px); transition: opacity .55s ease, transform .55s ease; }
html.js .reveal.in { opacity: 1; transform: none; }
.pos { color: var(--up); } .neg { color: var(--down); }
.dot { display: inline-block; width: 9px; height: 9px; border-radius: 3px; margin-right: 7px;
       vertical-align: baseline; }

/* ── tables (dashboard pages) ── */
.wrap table { border-collapse: collapse; width: 100%; min-width: 640px; }
.wrap th { text-align: left; color: var(--faint); font-size: 10.5px; text-transform: uppercase;
     letter-spacing: 1.4px; padding: 11px 10px 9px; border-bottom: 1px solid var(--line2); }
.wrap th.num { text-align: center; }
th.sel { color: var(--accent); }
th.sortable { cursor: pointer; user-select: none; white-space: nowrap; transition: color .12s; }
th.sortable:hover { color: var(--text); }
th.sortable:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
th.sorted { color: var(--accent); }
.wrap tbody th.name { color: var(--strong); font-weight: 600; font-size: 13.5px; text-transform: none;
  letter-spacing: normal; padding: 8.5px 10px; border-bottom: 1px solid var(--line); white-space: nowrap; }
td.pv { text-align: right; font-family: var(--mono); font-size: 12.5px; min-width: 76px; }
td.kind { color: var(--faint); font-size: 10.5px; text-transform: uppercase; letter-spacing: 1px; }
.wrap td { padding: 8.5px 10px; border-bottom: 1px solid var(--line); white-space: nowrap; }
td.sel { background: rgba(121,168,255,.05); }
.wrap tr:last-child td, .wrap tr:last-child th.name { border-bottom: none; }
.wrap tr { transition: background .12s; }
.wrap tbody tr:hover td, .wrap tbody tr:hover th.name { background: rgba(121,168,255,.04); }
td.sparkcell { padding: 4px 6px 2px; }

/* ── tabs ── */
.tabs { display: inline-flex; gap: 2px; padding: 3px; margin-bottom: 12px; flex-wrap: wrap;
        border: 1px solid var(--line); border-radius: 11px;
        background: var(--chip-bg); vertical-align: middle; }
.tab { background: transparent; border: 0; color: var(--dim); padding: 6px 14px; cursor: pointer;
       font: 600 12.5px var(--sans); border-radius: 8px; transition: color .15s, background .15s; }
.tab:hover { color: var(--strong); }
.tab:focus-visible { outline: 2px solid var(--accent); outline-offset: -1px; }
.tab.active { color: var(--accent-fg); background: var(--accent); font-weight: 700; }
.tabs.sm .tab { padding: 5px 11px; font-size: 12px; }
input.rangeN { width: 74px; font-family: var(--mono); color: var(--text); background: transparent;
               border: 0; -moz-appearance: textfield; }
input.rangeN.active { background: var(--accent); color: var(--accent-fg); font-weight: 700; }
input.rangeN::-webkit-inner-spin-button { -webkit-appearance: none; }
input.rangeN::placeholder { color: var(--faint); }
input.rangeN:focus-visible { outline: 2px solid var(--accent); outline-offset: -1px; }
/* custom-N input inside a sortable table header: compact, bordered so it
   reads as an input against the header row, never full tab padding */
input.rangeN.thn { width: 52px; font-size: 11.5px; padding: 2px 4px; text-align: right;
                   border: 1px solid var(--line2); border-radius: 6px; background: var(--input-bg); }

/* ── chart legend ── */
.chartbar { display: flex; justify-content: space-between; align-items: center; gap: 10px; flex-wrap: wrap; }
#chart { height: 400px; }
.legend { display: flex; gap: 8px 14px; flex-wrap: wrap; margin-top: 13px; color: var(--dim); font-size: 12px; }
.legend span, .legend button { display: inline-flex; align-items: center; }
.legend .tog { cursor: pointer; user-select: none; border: 1px solid transparent; border-radius: 999px;
               padding: 3px 10px; background: none; color: inherit; font: inherit;
               transition: border-color .12s, color .12s; }
.legend .tog:hover { border-color: var(--line2); color: var(--text); }
.legend .tog:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
.legend .tog.off { opacity: .32; }
.legend .lv { font-family: var(--mono); font-size: 11px; margin-left: 6px; color: var(--faint); }
.chart-note { color: var(--faint); font-size: 12px; padding: 24px 0; text-align: center; }

/* ── tooltip ── */
#tip { position: fixed; z-index: 100; max-width: 290px; pointer-events: none;
       background: var(--tip-bg); border: 1px solid var(--line2); border-radius: 10px;
       padding: 8px 12px; font-size: 12px; line-height: 1.55; color: var(--text);
       box-shadow: var(--shadow); opacity: 0; transform: translateY(5px);
       transition: opacity .14s ease, transform .14s ease; white-space: normal; }
#tip.on { opacity: 1; transform: none; }
[data-tip]:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }

/* ── signup + footer ── */
.signup { margin: 20px 0 0; }
.signup form { display: flex; gap: 8px; align-items: center; flex-wrap: wrap;
               background: var(--panel);
               border: 1px solid var(--line); border-radius: 14px; padding: 13px 17px; }
.signup .st { color: var(--text); font-size: 13px; margin-right: auto; }
.signup input { background: var(--input-bg); border: 1px solid var(--line2); border-radius: 9px;
                color: var(--text); padding: 8px 12px; font: inherit; font-size: 13px; min-width: 220px; }
.signup input:focus { outline: none; border-color: var(--accent); }
.signup input:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
.signup button { background: var(--accent); border: 0; border-radius: 9px; color: var(--accent-fg);
                 font-weight: 700; font-size: 13px; padding: 9px 17px; cursor: pointer; }
.signup button:hover { filter: brightness(1.08); }
.signup button:disabled { opacity: .6; cursor: default; }
/* honeypot: visually gone but still a real input for naive bots */
.signup .hp { position: absolute; left: -9999px; width: 1px; height: 1px;
              opacity: 0; pointer-events: none; }
.signup .sgmsg { font-size: 12.5px; color: var(--dim); }
.signup .sgmsg:empty { display: none; }
.signup .sgmsg.ok { color: var(--up); }
.signup .sgmsg.err { color: var(--down); }

/* feature variant: the ONE inverted block on the page — it pops because
   every other panel matches (isolation effect), so never invert a second
   element. Deliberately not ad-like: site fonts, full column width, no
   animation; prominence comes from polarity, scale, and whitespace. */
.signup.feature form { background: var(--inv-bg); border-color: var(--inv-line);
  border-radius: 16px; padding: 22px 26px 16px; gap: 6px 26px; box-shadow: var(--shadow); }
.signup.feature .sp { flex: 1 1 330px; }
.signup.feature .sh { display: block; font: 700 17px/1.3 var(--disp);
  color: var(--inv-text); letter-spacing: .2px; }
.signup.feature .sd { display: block; color: var(--inv-dim); font-size: 13px;
  line-height: 1.55; margin-top: 5px; max-width: 66ch; }
.signup.feature .sd a { color: var(--inv-text); font-weight: 600; white-space: nowrap;
  text-decoration: underline; text-underline-offset: 2px; }
.signup.feature .sd a:focus-visible { outline: 2px solid var(--inv-accent); outline-offset: 2px; }
.signup.feature .sr { display: flex; gap: 9px; align-items: center; flex-wrap: wrap; }
.signup.feature input { background: var(--inv-input); border-color: var(--inv-line);
  color: var(--inv-text); padding: 10px 13px; min-width: 240px; }
.signup.feature input::placeholder { color: var(--inv-dim); opacity: 1; }
.signup.feature input:focus { border-color: var(--inv-accent); }
.signup.feature input:focus-visible { outline: 2px solid var(--inv-accent); outline-offset: 1px; }
.signup.feature button { background: var(--inv-accent); color: var(--inv-accent-fg);
  font-size: 13.5px; padding: 11px 20px; }
.signup.feature button:focus-visible { outline: 2px solid var(--inv-accent); outline-offset: 2px; }
.signup.feature .sf { width: 100%; color: var(--inv-dim); font-size: 11.5px; margin-top: 2px; }
.signup.feature .sgmsg { color: var(--inv-dim); }
.signup.feature .sgmsg.ok { color: var(--inv-ok); }
.signup.feature .sgmsg.err { color: var(--inv-err); }

/* nav CTA — jumps to the page's feature block; the two-step "click to
   reveal" pattern converts without costing any screen real estate */
.topnav a.navcta { background: var(--accent); color: var(--accent-fg); font-weight: 700;
  font-size: 12px; padding: 5px 12px; border-radius: 8px; flex: none; }
.topnav a.navcta:hover { color: var(--accent-fg); filter: brightness(1.08); }

/* engagement-triggered slide-in card (built by initSlidein; desktop only).
   Non-modal on purpose: no backdrop, no focus steal, ESC or ✕ dismisses. */
.signup.slidein { position: fixed; right: 18px; bottom: 18px; z-index: 60; margin: 0;
  width: min(380px, calc(100vw - 36px)); animation: slidein-up .4s ease both; }
@keyframes slidein-up { from { opacity: 0; transform: translateY(16px) } to { opacity: 1; transform: none } }
.signup.slidein form { display: block; position: relative; border-color: var(--line2);
  border-top: 3px solid var(--accent); padding: 15px 17px 13px; box-shadow: var(--shadow); }
.signup.slidein .sh { display: block; font: 700 14px/1.35 var(--disp); color: var(--strong);
  padding-right: 24px; }
.signup.slidein .sd { display: block; color: var(--dim); font-size: 12.5px; line-height: 1.5;
  margin: 4px 0 10px; }
.signup.slidein .sr { display: flex; gap: 8px; flex-wrap: wrap; }
.signup.slidein input { flex: 1 1 150px; min-width: 0; }
.signup.slidein .sf { display: block; color: var(--faint); font-size: 11px; margin-top: 8px; }
.signup.slidein .sgmsg { margin-top: 6px; }
.signup.slidein .sx { position: absolute; top: 7px; right: 7px; border: 0; background: transparent;
  color: var(--faint); font-size: 15px; line-height: 1; padding: 6px 9px; cursor: pointer;
  border-radius: 7px; }
.signup.slidein .sx:hover { color: var(--strong); background: var(--chip-bg); }
.signup.slidein .sx:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
@media (max-width: 760px) { .signup.slidein { display: none; } }
footer { color: var(--faint); font-size: 11.5px; margin-top: 64px; border-top: 1px solid var(--line);
         padding-top: 18px; line-height: 1.8; }
footer a { color: var(--dim); text-decoration: none; border-bottom: 1px solid var(--line2); }
footer a:hover { color: var(--text); }

/* ── motion preferences ── */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, ::before, ::after { animation: none !important; transition: none !important; }
  html.js .reveal, html.js .reveal.in { opacity: 1; transform: none; }
  .stat:hover, .card:hover, .hc:hover, .cc:hover, .mc:hover { transform: none !important; }
}

/* ── print: force a light palette, reveal everything, drop chrome ── */
@media print {
  html, html[data-theme="dark"], html[data-theme="light"], html[data-theme="pro"] {
    --bg: #fff; --panel: #fff; --panel2: #f0f2f6; --text: #24304a; --dim: #4a5a78;
    --faint: #5f6e8c; --strong: #101a2e; --accent: #2e63d8; --accent-fg: #fff;
    --up: #0b6e4f; --down: #b8294e; --warn: #8a5f00;
    --line: #d8dee8; --line2: #c2ccdb; --chip-bg: #f3f5f9; --navbg: #fff;
    --bench-bg: #e6ecf5; --bench-line: #b6c4d8; --tip-bg: #fff; --input-bg: #f3f5f9;
    --dotgrid: transparent; --shadow: none;
    scroll-behavior: auto;
  }
  body { animation: none; }
  body::before, body::after { display: none; }
  .topnav, #tip, .signup, .skip { display: none !important; }
  html.js .reveal { opacity: 1 !important; transform: none !important; transition: none; }
  .panel, .stat, .card { box-shadow: none; break-inside: avoid; }
  .ts { overflow-x: visible; }
  /* tinted cells carry their own inline colors — print their backgrounds */
  .z, .hc, .cc, .mc, .qcell, .tab.active, .mark, .pill.alert, .scard,
  .uswitch .useg.active, input.rangeN.active {
    -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  /* pro chrome bars don't print backgrounds; recolor the text instead */
  html[data-theme="pro"] h1, html[data-theme="pro"] h2,
  html[data-theme="pro"] .doc h2, html[data-theme="pro"] .doc h3 {
    background: none !important; color: var(--strong) !important; }
}

/* ── small screens ── */
@media (max-width: 760px) {
  .subnav { display: none; }
  section, h2[id], .signup[id] { scroll-margin-top:calc(var(--fw-nav-height,68px) + 12px); }
  .mobile-sections { display: block; margin: 14px 0 0; border: 1px solid var(--line2);
    border-radius: 9px; background: var(--panel); font-size: 14px; }
  .mobile-sections summary { padding: 11px 14px; color: var(--dim); cursor: pointer; }
  .mobile-sections[open] summary { color: var(--strong); border-bottom: 1px solid var(--line); }
  .mobile-sections nav { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); padding: 5px; }
  .mobile-sections a { display: block; padding: 12px 10px; color: var(--text); text-decoration: none;
    border-radius: 5px; }
  .mobile-sections a:hover { background: var(--chip-bg); color: var(--accent); }
  .mobile-sections summary:focus-visible, .mobile-sections a:focus-visible {
    outline: 2px solid var(--accent); outline-offset: -2px; }
  .wrap h1 { font-size: 23px; }
  .story { font-size: 14.5px; }
  .wrap { padding: 22px 16px 64px; }
  .brand { display: none; }
  .brandlink { margin-right: 4px; padding: 6px 4px 6px 0; }
  .topnav .asof { display: none; }
  .pagehead .asof { display: inline-flex; }
  /* comfortable tap targets */
  .topnav a.page, .topnav button.page { padding: 10px 9px; font-size: 12px; }
  .topnav .in { padding: 6px 14px; }
  .thbtn { padding: 8px 10px; min-height: 36px; }
  .probtn { padding: 9px 10px; min-height: 36px; }
  .topnav a.navcta { padding: 9px 11px; font-size: 11.5px; }
  /* the feature form's desktop metrics (26px padding, 240px input floor)
     overflow a 320px viewport — let the controls fill the row instead */
  .signup.feature form { padding: 18px 16px 14px; }
  .signup.feature .sr { width: 100%; }
  .signup.feature input { min-width: 0; flex: 1 1 160px; }
  /* keep the first column readable while tables scroll */
  .ts .sparkcell { display: none; }
  .ts table th:first-child, .ts table td:first-child {
    position: sticky; left: 0; z-index: 2; background: var(--panel); }
  .ts .heat .ml, .ts .corr .ml, .ts .mosaic .ml {
    position: sticky; left: 0; z-index: 2; background: var(--panel); padding-right: 8px; }
  /* a hovered/tapped row must keep its pinned first cell opaque: the row
     tint would otherwise REPLACE the sticky background and let the scrolled
     columns bleed through the pinned name (touch keeps :hover stuck after a
     tap). Layer the same tint over the panel color instead. */
  .ts table tbody tr:hover td:first-child, .ts table tbody tr:hover th:first-child {
    background: linear-gradient(rgba(121,168,255,.04), rgba(121,168,255,.04)) var(--panel); }
}

/* ── universe switch (S&P 500 / FW 3000) ── */
.uswitch { display: inline-flex; margin: 16px 0 2px; border: 1px solid var(--line2);
           border-radius: 13px; overflow: hidden; background: var(--panel);
           box-shadow: inset 0 1px 0 rgba(255,255,255,.04); }
.uswitch .useg { display: flex; flex-direction: column; align-items: center; justify-content: center;
                 min-width: 150px; padding: 9px 20px 8px; text-decoration: none; color: var(--dim);
                 font: 700 15px/1.15 var(--disp); letter-spacing: .4px;
                 transition: color .12s, background .12s; }
.uswitch .useg + .useg { border-left: 1px solid var(--line2); }
.uswitch .useg span { display: block; font: 600 9px var(--sans); letter-spacing: 1.4px;
                      text-transform: uppercase; color: var(--faint); margin-top: 3px; }
.uswitch .useg:hover { color: var(--strong); }
.uswitch .useg.active { background: var(--accent); color: var(--bg); cursor: default; }
.uswitch .useg.active span { color: var(--bg); opacity: 1; }
.uswitch .useg:focus-visible { outline: 2px solid var(--accent); outline-offset: -3px; }
@media (max-width: 600px) { .uswitch { display: flex; width: 100%; }
  .uswitch .useg { flex: 1; min-width: 0; padding: 8px 10px; } }

/* ─── per-section copy-image buttons + watermarked share card ─────────── */
.shot-heading { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 8px 12px; }
.shot-heading[hidden] { display: none; }
.shotbtn { order: 1; flex: none; font: 500 10.5px var(--mono); letter-spacing: .5px;
  color: var(--dim); background: transparent; border: 1px solid var(--line2); border-radius: 7px;
  padding: 3px 9px; cursor: pointer; transition: color .15s, border-color .15s; }
/* in the hero toolbar the button sits inline beside the horizon pills */
.wrap .toolbar .shotbtn { vertical-align: middle; }
.shotbtn:hover { color: var(--accent); border-color: var(--accent); }
.shotbtn:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
.shotbtn.busy { color: var(--warn); border-color: var(--warn); cursor: progress; }
.shotbtn.ok { color: var(--up); border-color: var(--up); }
.shotbtn.err { color: var(--down); border-color: var(--down); }
html[data-theme="pro"] .wrap :is(h2, .toolbar) .shotbtn { color: #000; border-color: rgba(0,0,0,.45); }
.shotcard { background: var(--bg); color: var(--text); padding: 24px 28px 0; font-family: var(--sans); }
.shotcard h2::after { display: none; }   /* no flex divider inside the card */
.shothead { display: flex; justify-content: space-between; align-items: baseline;
  gap: 14px; margin-bottom: 6px; }
.shotbrand { font: 700 15px var(--disp); letter-spacing: 2.5px; color: var(--strong); }
.shotmeta { font: 500 11px var(--mono); color: var(--dim); text-align: right; }
.shotfoot { display: flex; justify-content: space-between; align-items: baseline; gap: 14px;
  border-top: 1px solid var(--line2); margin-top: 20px; padding: 13px 0 15px; }
.shotfoot b { font: 700 18px var(--disp); letter-spacing: 1.4px; color: var(--accent); }
.shotfoot span { font: 500 11.5px var(--mono); color: var(--faint); }
/* state colors need to outrank the pro-theme base rule above (specificity),
   and must read against the amber pro h2 bar */
html[data-theme="pro"] .wrap :is(h2, .toolbar) .shotbtn.busy { color: #443000; border-color: #443000; }
html[data-theme="pro"] .wrap :is(h2, .toolbar) .shotbtn.ok { color: #0a5c38; border-color: #0a5c38; }
html[data-theme="pro"] .wrap :is(h2, .toolbar) .shotbtn.err { color: #8c1024; border-color: #8c1024; }
html[data-theme="pro"] .wrap :is(h2, .toolbar) .shotbtn:hover { color: #1a1300; border-color: #1a1300; }
@media print { .shotbtn { display: none; } }
/* no scrollbar chrome inside captures, whatever the scroller */
.shotcard * { scrollbar-width: none; }
.shotcard *::-webkit-scrollbar { display: none; width: 0; height: 0; }
/* pill-group wrap control inside cards is set per-group inline by
   shotCard() - nowrap for groups that nearly fit (sub-pixel safety),
   natural wrapping for genuinely multi-row groups on narrow screens */
/* diagonal crop-proof watermark overlay inside capture cards; dark and pro
   need a brighter tone and more opacity — a --dim tint at 9% reads as
   unwatermarked over near-black chart panels */
.shotcard { position: relative; }
.shotwm { position: absolute; inset: 0; z-index: 5; pointer-events: none;
  overflow: hidden; opacity: .09; }
.shotwm span { color: var(--dim); }
html[data-theme="dark"] .shotwm, html[data-theme="pro"] .shotwm { opacity: .17; }
html[data-theme="dark"] .shotwm span { color: #d5e2f5; }
html[data-theme="pro"] .shotwm span { color: #ffd27a; }

/* on-demand refresh button (next to the as-of stamp) */
.refbtn { font-size: 15px; line-height: 1; }
.refbtn:disabled { opacity: .55; cursor: default; }

/* end-of-page compact signup variant — quiet accent cue only; the top
   feature block owns the page's one inversion */
.signup.compact { margin-top: 48px; }
.signup.compact form { padding: 10px 14px; border-left: 3px solid var(--accent); }
.signup.compact .st { font-size: 12.5px; }
.signup.compact input { min-width: 180px; padding: 7px 10px; }
.signup.compact button { padding: 8px 14px; }

/* Shared research controls and independent information blocks. */
.period-control { display:flex; flex-wrap:wrap; align-items:center; gap:8px; }
.holdings-search { display:flex; flex-wrap:wrap; align-items:center; gap:12px; margin:16px 0; }
.holdings-search label { font-size:13px; font-weight:600; }
.holdings-search input { min-width:220px; max-width:100%; padding:10px 12px; border:1px solid var(--line2); border-radius:8px; background:var(--bg); color:var(--text); font:inherit; }
.holdings-search [role=status] { color:var(--dim); font-size:12px; }
[hidden] { display:none!important; }
.metric-action { display:flex; margin-top:10px; }
.brief-correction { padding:14px 16px; border:1px solid var(--line2); border-left:3px solid var(--accent); border-radius:8px; }
.brief section { margin:0; }
.doc section { scroll-margin-top:100px; }
.stat-link { color:inherit; text-decoration:none; }
/* Compact long exports without omitting any row, column, or company name. */
.shotcard .holdings-scroll th, .shotcard .holdings-scroll td { padding:4px 8px!important; }
.shotcard .holdings-scroll .stock strong { font-size:12px; line-height:1.3; }
.shotcard .holdings-scroll .stock span { margin-top:1px; font-size:11px; line-height:1.2; }
.shotcard .holdings-scroll thead { position:static; }
.topnav .about-menu .mobile-only { display:none; }
@media (min-width:761px) and (max-width:1100px) {
  .topnav > .in { padding-left:12px; padding-right:12px; gap:6px; }
  .topnav .brand { display:none; }
  .topnav .brandlink { gap:0; margin-right:4px; }
  .topnav .asof .pfx { display:none; }
  .topnav .page, .topnav .thbtn { min-height:44px; }
  .topnav .thbtn { min-width:44px; }
  .topnav .page { display:inline-flex; align-items:center; }
  .topnav .page.mobile-page { display:none; }
}
@media (max-width:760px) {
  .topnav .in { overflow:visible; gap:4px; padding:6px 8px; }
  .topnav .pages { flex:1; min-width:0; overflow-x:auto; scrollbar-width:none; }
  .topnav .pages::-webkit-scrollbar { display:none; }
  .topnav .desktop-page, .topnav .navright .navcta { display:none; }
  .topnav .about-menu .mobile-only { display:block; }
  .topnav .navright { margin-left:0; }
  .topnav .brandlink, .topnav .page, .topnav .thbtn, .about-menu a { min-height:44px; }
  .topnav .brandlink { display:none; }
  .topnav .page, .topnav .page.mobile-page { display:inline-flex; align-items:center; flex:none; }
  .topnav a.page, .topnav button.page { padding:10px 5px; }
  .topnav .page.desktop-page { display:none; }
  .topnav .about-menu .desktop-only { display:none; }
  .topnav .nav-about.active:not([data-mobile-active]) { color:var(--dim); background:transparent; }
  .topnav .nav-about[data-mobile-active] { color:var(--accent-fg); background:var(--accent); }
  .topnav .thbtn { min-width:44px; }
  .wrap .tab, .shotbtn, .wrap .useg, .wrap .factor-universe a, .wrap .basket-universe a { min-height:44px!important; }
  .wrap .tab, .shotbtn { min-width:44px; }
  .wrap input, .wrap select { font-size:16px; }
  .holdings-search input { width:100%; min-width:0; }
  .wrap .tabs { flex-wrap:wrap; max-width:100%; }
  .wrap h2 { flex-wrap:wrap; }
  .stat .spark { max-width:100%; }
  .period-control { width:100%; }
}
/* Native dialogs make the background inert, but do not lock its scrolling. */
html:has(dialog[open]),html.fw-drawer-open { overflow:hidden; }

/* Consistent compact controls on small research surfaces. */
.refresh-stamp { display:inline-flex; align-items:center; gap:8px; vertical-align:middle; }
.refresh-stamp .asof { margin-top:0; }
.pagehead .refresh-stamp { display:none; }
.stat, .factor-stat, .basket-stat { position:relative; }
.metric-action { position:absolute; top:6px; right:6px; margin:0; }
.metric-action .shotbtn, .stat .shotbtn { font-size:0; width:32px; height:32px; padding:0; }
.metric-action .shotbtn::before, .stat .shotbtn::before { content:attr(data-shot-icon); font:17px var(--sans); }
.stat .k { position:relative; padding-right:28px; min-height:26px; }
.stat .k > .shotbtn { position:absolute; right:-6px; top:-6px; }
.factor-stat > span:first-child, .basket-stat > span:first-child { padding-right:26px; }
.doc :is(h2,h3)[data-shot-host] { position:relative; padding-right:48px; }
.doc :is(h2,h3)[data-shot-host] > .shotbtn { position:absolute; right:0; top:0; }
.doc > section:first-child > h2:first-child { margin-top:0; }
@media (max-width:760px) {
  .wrap .pagehead { margin-top:10px; }
  .wrap h2 { margin-top:36px; }
  .topnav .refresh-stamp { display:none; }
  .pagehead .refresh-stamp { display:inline-flex; margin-top:10px; }
  .refresh-stamp .refbtn { min-width:44px; min-height:44px; }
  .shotbtn { font-size:0; width:44px; height:44px; padding:0; }
  .shotbtn::before { content:attr(data-shot-icon); font:18px var(--sans); }
  .factor-stat > span:first-child, .basket-stat > span:first-child { padding-right:30px; min-height:38px; }
  .stat .k { position:relative; padding-right:38px; min-height:34px; }
  .stat .k > .shotbtn { position:absolute; right:-6px; top:-6px; }
  .wrap .tabs:has(> [data-period-count]):not(#cb-period):not(#cb-econ-period) {
    display:grid; width:100%; grid-template-columns:repeat(4,minmax(0,1fr));
  }
  .wrap .tabs:has(> :is([data-period-count="3"],[data-period-count="5"],[data-period-count="6"],[data-period-count="9"])):not(#cb-period):not(#cb-econ-period) {
    grid-template-columns:repeat(3,minmax(0,1fr));
  }
  .wrap .tabs:has(> [data-period-count="5"]) > :last-child { grid-column:span 2; }
  .wrap .tabs > [data-period-count] { width:auto; min-width:0; padding-left:3px; padding-right:3px; margin:0; }
  .wrap .tabs > input[data-period-count] { width:100%; }
}

@media (max-width:760px) {
  .wrap .tabs > input[data-period-count] { font-size:16px; }
  #overview > .toolbar { display:grid; grid-template-columns:1fr auto; gap:8px; }
  #overview > .toolbar > .lbl { grid-area:1 / 1; }
  #overview > .toolbar > .shotbtn { grid-area:1 / 2; margin-left:0!important; }
  #overview > .toolbar > .tabs { grid-area:2 / 1 / 3 / -1; }
  #factor-modes, #basket-modes { display:grid; width:100%; grid-template-columns:repeat(3,minmax(0,1fr)); }
  #basket-modes { grid-template-columns:repeat(2,minmax(0,1fr)); }
  #factor-modes .tab, #basket-modes .tab { white-space:normal; padding:7px 5px; }
}