/* 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: 15px/1.55 var(--sans); -webkit-font-smoothing: antialiased;
       font-variant-numeric: tabular-nums; }
/* 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; }
/* Long documents keep a mobile section menu; working pages have no section row. */
.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: 26px; }
.wrap h1 { font: 700 28px/1.15 var(--disp); letter-spacing: .3px; margin: 0; color: var(--strong); }
/* Universe, timestamp and the how-to disclosure share one quiet row under the story. */
.pagehead .meta { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; margin-top: 14px; }
.pagehead .meta .uswitch { margin: 0; }
.pagehead .meta .asof { display: inline-flex; margin: 0; }
.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; }
.pagehead .meta .asof { display: inline-flex; }
.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: 10px 0 0; font: 500 17px/1.6 var(--sans); color: var(--dim); max-width: 78ch; }
.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); }
/* "How to read this page": one quiet disclosure in the header meta row */
.howto { margin: 0; font-size: 13.5px; color: var(--dim); max-width: 86ch; flex-basis: 100%; }
.howto summary { cursor: pointer; color: var(--faint); font-weight: 600; user-select: none; width: max-content;
                 font-size: 12.5px; }
.howto summary:hover { color: var(--text); }
.howto p { margin: 8px 0 0; line-height: 1.65; }
.howto a { color: var(--dim); }

/* ── sections (dashboard pages) ── */
.wrap h2 { font: 600 20px/1.25 var(--disp); letter-spacing: .2px; color: var(--strong);
     margin: 44px 0 6px; display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.wrap h2 > .shotbtn { margin-left: auto; }
.sub { color: var(--dim); font-size: 13.5px; margin: 0 0 14px; 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; }
.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: 11px; text-transform: uppercase;
     letter-spacing: 1.2px; 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: 13px; 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; }
/* Linked names in monitor tables read as names, not as browser links: no
   underline, no visited color, the accent on hover like every other name cell. */
.wrap :is(td, th):is(.vname, .rname, .name, .bname, .fname) a { color: inherit; text-decoration: none; }
.wrap :is(td, th):is(.vname, .rname, .name, .bname, .fname) a:hover { color: var(--accent); }
.wrap :is(td, th):is(.vname, .rname, .name, .bname, .fname) a:focus-visible { outline: 2px solid var(--accent); outline-offset: 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; }
/* custom-N tab: an input that must read as one more cell of the row —
   centered like the buttons, without native input chrome, its "custom"
   placeholder in the tab label face (a typed count stays mono) */
input.rangeN { width: 74px; margin: 0; font-family: var(--mono); color: var(--text); background: transparent;
               border: 0; text-align: center; -webkit-appearance: none; -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); opacity: 1; font-family: var(--sans); font-weight: 600; }
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; }
  .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; }
  details.ref { border: 0; }
  details.ref:not([open]) > :not(summary) { display: block; }
  .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) {
  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: 15px; }
  .wrap h2 { font-size: 18px; }
  .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): one compact segmented control ── */
.uswitch { display: inline-flex; margin: 14px 0 2px; padding: 3px; gap: 2px; border: 1px solid var(--line);
           border-radius: 11px; background: var(--chip-bg); vertical-align: middle; }
.uswitch .useg { display: inline-flex; align-items: center; justify-content: center; gap: 6px;
                 min-width: 0; padding: 6px 14px; text-decoration: none; color: var(--dim);
                 font: 600 13px/1.2 var(--sans); border-radius: 8px;
                 transition: color .12s, background .12s; }
.uswitch .useg span { font: 500 11px var(--sans); color: var(--faint); }
.uswitch .useg:hover { color: var(--strong); background: var(--chip-bg); }
.uswitch .useg.active { background: var(--accent); color: var(--accent-fg); cursor: default; }
.uswitch .useg.active span { color: var(--accent-fg); opacity: .85; }
.uswitch .useg:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
@media (max-width: 600px) { .uswitch .useg span { display: none; } .uswitch .useg { padding: 8px 14px; } }

/* ── reference tier: a collapsed block whose closed state still says something ── */
details.ref { border-top: 1px solid var(--line); }
details.ref:last-of-type { border-bottom: 1px solid var(--line); }
details.ref > summary { list-style: none; display: flex; align-items: baseline; flex-wrap: wrap; gap: 4px 14px;
  padding: 16px 0; cursor: pointer; color: var(--strong); }
details.ref > summary::-webkit-details-marker { display: none; }
details.ref > summary::before { content: "▸"; color: var(--accent); font-size: 13px; width: 14px; flex: none;
  align-self: center; transition: transform .15s; }
details.ref[open] > summary::before { transform: rotate(90deg); }
details.ref > summary .t { font: 600 16px/1.3 var(--disp); }
details.ref > summary .read { color: var(--dim); font-size: 13.5px; flex: 1 1 24ch; min-width: 0; }
details.ref > summary .read b { color: var(--text); font-weight: 600; }
details.ref > summary:hover .t { color: var(--accent); }
details.ref > summary:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; border-radius: 6px; }
details.ref > :not(summary) { margin-bottom: 22px; }
details.ref section { scroll-margin-top: 96px; }
details.ref .wrap-h2, details.ref h2 { margin-top: 4px; }
.reftier { margin-top: 36px; }
.reftier > .tierlabel { color: var(--faint); font-size: 11px; font-weight: 600; letter-spacing: 1.4px;
  text-transform: uppercase; margin: 0 0 4px; }

/* Keep live chart attribution separate from the exported canvas bitmap. */
.tv-lightweight-charts { position: relative; container-type: inline-size; }
.tv-lightweight-charts::after { content: 'www.factorwatch.ai'; position: absolute;
  inset: 0 60px 26px 0; display: flex; align-items: center; justify-content: center;
  pointer-events: none; z-index: 1; white-space: nowrap; letter-spacing: normal;
  font: 400 clamp(12px, 8cqw, 40px)/1 var(--disp); color: rgba(163,186,216,.11); }
html[data-theme="light"] .tv-lightweight-charts::after { color: rgba(16,38,72,.10); }
html[data-theme="pro"] .tv-lightweight-charts::after { color: rgba(255,157,0,.12); }
.shotcard .tv-lightweight-charts::after { content: none; display: none; }

/* ─── 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; } }
/* Pointer users see the action when they reach for a block; touch keeps it visible. */
@media (hover: hover) and (pointer: fine) {
  main .shotbtn { opacity: 0; transition: opacity .15s, color .15s, border-color .15s; }
  main :is(section, [data-copy-image], .toolbar, .stat, h2, h3):is(:hover, :focus-within) .shotbtn,
  main .shotbtn:focus-visible, main .shotbtn.busy, main .shotbtn.ok, main .shotbtn.err { opacity: 1; }
}
/* 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 */
/* Faint diagonal attribution in copied cards; keep chart data dominant. */
.shotcard { position: relative; }
.shotwm { position: absolute; inset: 0; z-index: 5; pointer-events: none;
  overflow: hidden; opacity: .05; }
.shotwm span { color: var(--dim); }
html[data-theme="dark"] .shotwm, html[data-theme="pro"] .shotwm { opacity: .09; }
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; }
/* Control labels read as sentence-case words beside their control, on every page. */
.toolbar .lbl, .chartbar .lbl, .controls .lbl, .period-control .lbl, .factor-control .lbl {
  color: var(--dim); font-size: 12.5px; font-weight: 500; text-transform: none; letter-spacing: 0; }
/* Named-list select: reads as one more control beside the tab rows (same
   chip surface, border, radius and type), with a theme-colored chevron. */
.fw-select { appearance:none; -webkit-appearance:none; min-height:33px; max-width:min(340px,100%);
  padding:6px 34px 6px 14px; border:1px solid var(--line); border-radius:11px; cursor:pointer;
  color:var(--strong); font:600 12.5px var(--sans); background-color:var(--chip-bg);
  background-image:linear-gradient(45deg,transparent 50%,var(--dim) 50%),linear-gradient(135deg,var(--dim) 50%,transparent 50%);
  background-position:calc(100% - 18px) 52%,calc(100% - 13px) 52%; background-size:5px 5px; background-repeat:no-repeat;
  transition:border-color .15s; }
.fw-select:hover { border-color:var(--line2); }
.fw-select:focus-visible { outline:2px solid var(--accent); outline-offset:1px; }
.fw-select:disabled { cursor:default; opacity:.7; }
.fw-select option, .fw-select optgroup { background:var(--panel); color:var(--text); }
.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; }
  .wrap .fw-select { min-height:44px; }
  .holdings-search input { width:100%; min-width:0; }
  .wrap .tabs { flex-wrap:wrap; max-width:100%; }
  /* a long section title wraps beside its pinned Copy image button rather
     than pushing the button onto a row of its own */
  .wrap h2 > .shotbtn { flex:none; }
  /* a desktop spacer that right-aligns a lone control has no job on one column */
  .chartbar > span:empty { display:none; }
  .signup.compact .st { flex:1 1 100%; margin-right:0; }
  .signup.compact input { flex:1 1 150px; min-width:0; }
  .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(> :is([data-period-count="5"],[data-period-count="7"])) > :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; line-height:19px; }
  .wrap .tabs > input[data-period-count]::placeholder { font-size:12.5px; line-height:19px; }
  .wrap .tabs.sm > input[data-period-count]::placeholder { font-size:12px; }
  #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; }
}

/* ── live updates (wired by initLive in _shared.js) ──
   A refresh is a quiet moment. The values that changed, and only those, glow
   as tiles in a mosaic: each on its own beat (--tick-d), in scattered order
   rather than a wipe, spread over about two seconds. A tile is a soft wash in
   the sign of the change (amber when there is none to read): it eases in,
   rests, and drains away over about four seconds (FW_LIVE_TILE_MS in
   _shared.js is the same length), while the number takes the tick colour and
   gives it back. Nothing snaps, blinks or inverts. The wash is an inset
   shadow so a cell's own heat tint shows through and returns. Nothing else
   on the page moves. The rail under the navigation fills toward the next
   expected refresh and sweeps when one lands. The reduced-motion rule above
   disables every animation and transition: the values, the stamp's time and
   the rail's position still update, without the motion. */
:root { --tick-up-rgb: 61,219,169; --tick-down-rgb: 255,110,139; --tick-rgb: 255,200,87; --tick-fill: .24; --tick-glow: .4; }
html[data-theme="light"] { --tick-up-rgb: 11,126,88; --tick-down-rgb: 214,54,93; --tick-rgb: 138,95,0; --tick-fill: .16; --tick-glow: 0; }
html[data-theme="pro"] { --tick-up-rgb: 0,210,106; --tick-down-rgb: 255,71,71; --tick-rgb: 255,157,0; --tick-fill: .28; --tick-glow: .45; }
/* the wash: eases in, rests, drains */
@keyframes fw-tick {
  0%   { box-shadow: inset 0 0 0 100vmax rgba(var(--tick-c), 0), 0 0 0 var(--tick-pad, 0px) rgba(var(--tick-c), 0);
         animation-timing-function: cubic-bezier(.3,0,.3,1); }
  24%  { box-shadow: inset 0 0 0 100vmax rgba(var(--tick-c), var(--tick-fill)), 0 0 0 var(--tick-pad, 0px) rgba(var(--tick-c), var(--tick-fill));
         animation-timing-function: linear; }
  40%  { box-shadow: inset 0 0 0 100vmax rgba(var(--tick-c), var(--tick-fill)), 0 0 0 var(--tick-pad, 0px) rgba(var(--tick-c), var(--tick-fill));
         animation-timing-function: cubic-bezier(.4,0,.5,1); }
  100% { box-shadow: inset 0 0 0 100vmax rgba(var(--tick-c), 0), 0 0 0 var(--tick-pad, 0px) rgba(var(--tick-c), 0); }
}
/* the ink, in step with the wash: from its own colour to the tick colour and
   back (the first and last keyframes are implicit: the element's own) */
@keyframes fw-tick-ink {
  24%, 48% { color: rgb(var(--tick-c)); text-shadow: 0 0 12px rgba(var(--tick-c), var(--tick-glow)); }
}
.tick { --tick-c: var(--tick-rgb);
        animation: fw-tick 4.2s linear var(--tick-d, 0ms), fw-tick-ink 4.2s ease-in-out var(--tick-d, 0ms); }
.tick-up { --tick-c: var(--tick-up-rgb); }
.tick-down { --tick-c: var(--tick-down-rgb); }
.tick:not(td) { --tick-pad: 4px; border-radius: 2px; }
.asof.tick, #gen.tick, .fresh.tick { border-radius: 999px; --tick-pad: 0px; }

/* the data time inside the as-of stamp */
.at { margin-left: .5em; font-variant-numeric: tabular-nums; cursor: help; }
.at::before { content: '·'; margin-right: .5em; opacity: .7; }
.asof .at { margin-left: 0; }
/* tablet navigation has no room for it: destinations, signup and theme stay in view */
@media (min-width: 761px) and (max-width: 960px) { .topnav .asof .at { display: none; } }

/* the refresh rail, on the navigation's bottom edge */
.liverail { position: absolute; left: 0; right: 0; bottom: -1px; height: 2px; overflow: hidden;
            pointer-events: none; opacity: 0; transition: opacity .5s ease; }
.liverail.on, .liverail.flash { opacity: 1; }
.liverail i { display: block; height: 100%; background: var(--accent); opacity: .6;
              transform-origin: 0 50%; transform: scaleX(var(--p, 0)); transition: transform 5s linear; }
.liverail.due i { animation: fw-rail-due 1.8s ease-in-out infinite; }
.liverail.flash i { transition: none; }
.liverail.flash::after { content: ''; position: absolute; top: 0; bottom: 0; left: 0; width: 38%;
  background: linear-gradient(90deg, transparent, var(--accent) 55%, var(--strong) 100%);
  animation: fw-rail-sweep 2.4s cubic-bezier(.4,0,.2,1) both; }
@keyframes fw-rail-due { 50% { opacity: .22; } }
@keyframes fw-rail-sweep { from { transform: translateX(-100%); } to { transform: translateX(264%); opacity: .2; } }

/* a reload is waiting for the reader to pause: the chip reloads now */
.livechip { color: var(--warn); border-color: var(--warn); font-size: 12px; white-space: nowrap;
            animation: fw-chip 1.4s ease-in-out 3; }
@keyframes fw-chip { 50% { box-shadow: 0 0 0 4px color-mix(in srgb, var(--warn) 28%, transparent); } }
@media print { .liverail, .livechip { display: none !important; } }