are
unreliable across engines).
.nd-table--cards opts into the <640px card fallback:
every carries data-th="Column label".
============================================================ */
.nd-tablewrap{
overflow: auto; background: var(--nd-panel);
border: 1px solid var(--nd-border); border-radius: var(--nd-r-card);
box-shadow: var(--nd-rim), var(--nd-e1);
}
.nd-table{
width: 100%; border-collapse: separate; border-spacing: 0;
font: 400 var(--nd-text-body) var(--nd-font-sans); color: var(--nd-text);
}
.nd-table caption{
text-align: left; padding: var(--nd-s4) var(--nd-s5);
font: 600 var(--step-2) var(--nd-font-display); color: var(--nd-text);
}
.nd-table th{
position: sticky; top: 0; z-index: 2;
font: 600 0.6875rem var(--nd-font-mono); letter-spacing: 0.09em; text-transform: uppercase;
color: var(--nd-dim); text-align: left; white-space: nowrap;
padding: 10px 14px; background: var(--nd-panel);
border-bottom: 1px solid var(--nd-border-strong);
}
.nd-table td{
padding: 9px 14px; background: var(--nd-panel);
border-bottom: 1px solid var(--nd-border);
font-variant-numeric: tabular-nums;
}
.nd-table tbody tr:nth-child(even) td{
background: color-mix(in srgb, var(--nd-panel-2) 55%, var(--nd-panel));
}
.nd-table tbody tr{ transition: background var(--nd-t-fast) var(--nd-ease); }
.nd-table tbody tr:hover td{ background: var(--nd-lime-faint); }
.nd-table tbody tr:last-child td{ border-bottom: 0; }
.nd-table .num, .nd-table th.num{ text-align: right; }
.nd-table .sym{ font-weight: 600; white-space: nowrap; }
.nd-table .sym a{ color: var(--nd-text); text-decoration: none; }
.nd-table .sym a:hover{ color: var(--nd-lime); text-decoration: underline; }
.nd-table .up{ color: var(--nd-up); }
.nd-table .dn{ color: var(--nd-down); }
/* Sticky first column (symbol) */
.nd-table th:first-child, .nd-table td:first-child{
position: sticky; left: 0; z-index: 1;
}
.nd-table th:first-child{ z-index: 3; }
/* Sort indicators — visible, state-driven (aria-sort) */
.nd-table th.nd-sortable{ cursor: pointer; }
.nd-table th.nd-sortable::after,
.nd-table th[aria-sort="ascending"]::after,
.nd-table th[aria-sort="descending"]::after{
content: ""; display: inline-block; margin-left: 7px; vertical-align: middle;
border-inline: 4px solid transparent; opacity: .35;
}
.nd-table th.nd-sortable::after{ border-bottom: 5px solid currentColor; }
.nd-table th[aria-sort="ascending"]::after{
border-bottom: 5px solid var(--nd-lime); opacity: 1;
}
.nd-table th[aria-sort="descending"]::after{
border-top: 5px solid var(--nd-lime); border-bottom: 0; opacity: 1;
}
.nd-table--dense th{ padding: 8px 12px; }
.nd-table--dense td{ padding: 6px 12px; }
/* <640px card fallback (opt-in via .nd-table--cards) */
@media (max-width: 640px){
.nd-table--cards thead{
position: absolute; width: 1px; height: 1px; margin: -1px;
overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.nd-table--cards, .nd-table--cards tbody,
.nd-table--cards tr, .nd-table--cards td{ display: block; width: 100%; }
.nd-table--cards tr{
padding: var(--nd-s3) var(--nd-s4);
border-bottom: 1px solid var(--nd-border-strong);
}
.nd-table--cards tbody tr:last-child{ border-bottom: 0; }
.nd-table--cards td{
display: flex; justify-content: space-between; align-items: baseline;
gap: var(--nd-s4); padding: 5px 0; border-bottom: 0; background: transparent;
}
.nd-table--cards tbody tr:nth-child(even) td,
.nd-table--cards tbody tr:hover td{ background: transparent; }
.nd-table--cards td::before{
content: attr(data-th);
font: 600 0.6875rem var(--nd-font-mono); letter-spacing: 0.09em;
text-transform: uppercase; color: var(--nd-dim);
}
.nd-table--cards th:first-child, .nd-table--cards td:first-child{ position: static; }
}
/* ============================================================
TAB SYSTEM (Wave A) — one tabs component, ARIA tabs
pattern (Vercel web-design-guidelines / APG):
…
…
Behaviour contract for page JS: roving tabindex (selected
tab tabindex="0", others "-1"), ArrowLeft/ArrowRight move,
Home/End jump, activation on focus (automatic) or Enter/
Space (manual). The selected state is [aria-selected] —
unmistakable, never hover-only; `.on` is honoured as a
legacy alias so existing toggles keep painting. Where a
page already carries state in the URL, page JS syncs the
selected tab from/to the query param (e.g. ?metric=).
============================================================ */
.nd-tabs{ display: flex; gap: var(--nd-s2); flex-wrap: wrap; }
.nd-tabs [role="tab"]{
display: inline-flex; align-items: center; gap: 8px;
min-height: 40px; padding: 0 16px;
font: 600 0.8125rem var(--nd-font-sans); color: var(--nd-muted);
background: transparent; border: 1px solid transparent; border-radius: var(--nd-r-md);
cursor: pointer;
transition: color var(--nd-t-fast) var(--nd-ease), background var(--nd-t-fast) var(--nd-ease),
border-color var(--nd-t-fast) var(--nd-ease), box-shadow var(--nd-t-fast) var(--nd-ease);
}
.nd-tabs [role="tab"]:hover{ color: var(--nd-text); }
.nd-tabs [role="tab"]:focus-visible{ outline: none; box-shadow: var(--nd-focus-ring); }
.nd-tabs [role="tab"]:disabled{ opacity: .45; cursor: not-allowed; }
/* Pill variant — segmented control (flagship metric tabs) */
.nd-tabs--pill [role="tab"]{
border-color: var(--nd-border-strong); background: var(--nd-panel);
border-radius: var(--nd-r-pill); box-shadow: var(--nd-rim), var(--nd-e1);
}
.nd-tabs--pill [role="tab"][aria-selected="true"],
.nd-tabs--pill [role="tab"].on{
background: linear-gradient(180deg, color-mix(in srgb, var(--nd-lime) 88%, white), var(--nd-lime));
color: var(--nd-on-lime); border-color: transparent;
}
/* Underline variant — editorial section tabs */
.nd-tabs--underline{ gap: var(--nd-s5); border-bottom: 1px solid var(--nd-border); }
.nd-tabs--underline [role="tab"]{
min-height: 44px; padding: 0 2px; border-radius: 0;
box-shadow: inset 0 -2px 0 transparent;
}
.nd-tabs--underline [role="tab"][aria-selected="true"],
.nd-tabs--underline [role="tab"].on{
color: var(--nd-text); box-shadow: inset 0 -2px 0 var(--nd-lime);
}
.nd-tabpanel:focus-visible{ outline: none; box-shadow: var(--nd-focus-ring); }
@media (prefers-reduced-motion: reduce){
.nd-btn, .nd-card--lift, .nd-tabs [role="tab"]{ transition-duration: 150ms; }
.nd-btn--primary:hover, .nd-card--lift:hover{ transform: none; }
.nd-ticker-track{ animation: none; }
}
/* ============================================================
WAVE G1 ROLLOUT (2026-10-23) — site-wide premium layer.
Page rhythm, scroll affordances, tab-state bridges and the
nav-pill link group. Everything consumes nd-tokens; page
CSS with class specificity still wins where it defines
its own treatment.
============================================================ */
/* ---- Page rhythm: one container + title band + section beat.
.nd-wrap centres content on the token grid; .nd-pageband is
the standard title block that sits directly under the shared
nav (title first — no breadcrumbs, owner law); .nd-section
is the vertical beat between major page sections. ---- */
.nd-wrap{
max-width: var(--nd-page-max); margin-inline: auto;
padding-inline: var(--nd-gutter);
}
.nd-pageband{ padding: var(--nd-s8) 0 var(--nd-s6); }
.nd-pageband .nd-eyebrow{ margin-bottom: var(--nd-s3); }
.nd-pageband h1{
font-family: var(--nd-font-display); font-weight: 600;
font-size: var(--step-4); line-height: 1.1; letter-spacing: -0.01em;
color: var(--nd-text); margin: 0 0 var(--nd-s3);
}
.nd-pageband .nd-lede{
font: 400 var(--step-2)/1.6 var(--nd-font-sans);
color: var(--nd-muted); max-width: 68ch; margin: 0;
}
.nd-section{ padding-block: var(--nd-s8); }
.nd-section + .nd-section{ padding-top: 0; }
/* ---- Scroll affordance for table scroll regions: styled thin
scrollbar + fixed inset edge shadow so a wide table always
reads as scrollable (never page-level horizontal overflow). ---- */
.nd-tablewrap{
scrollbar-width: thin;
scrollbar-color: var(--nd-border-strong) transparent;
overscroll-behavior-x: contain;
box-shadow: var(--nd-rim), var(--nd-e1),
inset -18px 0 18px -18px rgba(0, 0, 0, 0.55);
}
.nd-tablewrap::-webkit-scrollbar{ height: 8px; width: 8px; }
.nd-tablewrap::-webkit-scrollbar-thumb{
background: var(--nd-border-strong); border-radius: 999px;
}
.nd-tablewrap::-webkit-scrollbar-track{ background: transparent; }
/* Family scroll wrappers that adopt .nd-tablewrap in markup get
the same scrollbar treatment even when their own class sets
the panel treatment. */
.ds-table-scroll, .sx-table-wrap, .table-scroll, .table-wrap,
.dc-tablewrap, .ev-tablewrap, .v2-tablewrap, .mf-tablewrap,
.sn-tablewrap, .ipo-tablewrap, .scrollx, .bk-scroll, .trades-wrap,
.rp-table-wrap, .nl-sh-wrap{
scrollbar-width: thin;
scrollbar-color: var(--nd-border-strong) transparent;
overscroll-behavior-x: contain;
}
.ds-table-scroll::-webkit-scrollbar, .sx-table-wrap::-webkit-scrollbar,
.table-scroll::-webkit-scrollbar, .table-wrap::-webkit-scrollbar,
.dc-tablewrap::-webkit-scrollbar, .ev-tablewrap::-webkit-scrollbar,
.v2-tablewrap::-webkit-scrollbar, .mf-tablewrap::-webkit-scrollbar,
.sn-tablewrap::-webkit-scrollbar, .ipo-tablewrap::-webkit-scrollbar,
.scrollx::-webkit-scrollbar, .bk-scroll::-webkit-scrollbar,
.trades-wrap::-webkit-scrollbar, .rp-table-wrap::-webkit-scrollbar,
.nl-sh-wrap::-webkit-scrollbar{
height: 8px; width: 8px;
}
.ds-table-scroll::-webkit-scrollbar-thumb, .sx-table-wrap::-webkit-scrollbar-thumb,
.table-scroll::-webkit-scrollbar-thumb, .table-wrap::-webkit-scrollbar-thumb,
.dc-tablewrap::-webkit-scrollbar-thumb, .ev-tablewrap::-webkit-scrollbar-thumb,
.v2-tablewrap::-webkit-scrollbar-thumb, .mf-tablewrap::-webkit-scrollbar-thumb,
.sn-tablewrap::-webkit-scrollbar-thumb, .ipo-tablewrap::-webkit-scrollbar-thumb,
.scrollx::-webkit-scrollbar-thumb, .bk-scroll::-webkit-scrollbar-thumb,
.trades-wrap::-webkit-scrollbar-thumb, .rp-table-wrap::-webkit-scrollbar-thumb,
.nl-sh-wrap::-webkit-scrollbar-thumb{
background: var(--nd-border-strong); border-radius: 999px;
}
/* ---- Tab-state bridges: legacy painters mark the selected
tab with .active / .is-active instead of (or alongside)
aria-selected. Inside an adopted .nd-tabs list those classes
paint the same selected state, so old wiring looks native. ---- */
.nd-tabs--pill [role="tab"].active,
.nd-tabs--pill [role="tab"].is-active{
background: linear-gradient(180deg, color-mix(in srgb, var(--nd-lime) 88%, white), var(--nd-lime));
color: var(--nd-on-lime); border-color: transparent;
}
.nd-tabs--underline [role="tab"].active,
.nd-tabs--underline [role="tab"].is-active{
color: var(--nd-text); box-shadow: inset 0 -2px 0 var(--nd-lime);
}
/* Non-button tabs (links/spans a painter emits) still get the
base tab geometry when a family class carries the role. */
.nd-tabs [role="tab"]{ user-select: none; }
/* ---- Nav pills: the link-group sibling of .nd-tabs for tab-
LOOKING navigation whose items are separate pages (signals
strategy switcher etc.). Links, not tabs: no role=tab, the
current page is aria-current="page". Same pill paint as
.nd-tabs--pill so the suite reads as one language. ---- */
.nd-navpills{ display: flex; gap: var(--nd-s2); flex-wrap: wrap; }
.nd-navpills a{
display: inline-flex; align-items: center; gap: 8px;
min-height: 40px; padding: 0 16px;
font: 600 0.8125rem var(--nd-font-sans); color: var(--nd-muted);
background: var(--nd-panel); border: 1px solid var(--nd-border-strong);
border-radius: var(--nd-r-pill); box-shadow: var(--nd-rim), var(--nd-e1);
text-decoration: none;
transition: color var(--nd-t-fast) var(--nd-ease), border-color var(--nd-t-fast) var(--nd-ease),
background var(--nd-t-fast) var(--nd-ease);
}
.nd-navpills a:hover{ color: var(--nd-text); border-color: var(--nd-lime); }
.nd-navpills a:focus-visible{ outline: none; box-shadow: var(--nd-focus-ring); }
.nd-navpills a[aria-current="page"]{
background: linear-gradient(180deg, color-mix(in srgb, var(--nd-lime) 88%, white), var(--nd-lime));
color: var(--nd-on-lime); border-color: transparent;
}
@media (prefers-reduced-motion: reduce){
.nd-navpills a{ transition-duration: 150ms; }
}
/* ---- Filter pills: single-select toggle chips (aria-pressed
groups: verdict filters, view toggles). Token-driven in both
themes; selected = lime fill, never a hard-coded ink block. ---- */
.nd-filterpill{
display: inline-flex; align-items: center; gap: 8px;
min-height: 40px; padding: 0 18px;
font: 600 0.8125rem var(--nd-font-sans); color: var(--nd-muted);
background: var(--nd-panel); border: 1px solid var(--nd-border-strong);
border-radius: var(--nd-r-pill); box-shadow: var(--nd-rim), var(--nd-e1);
cursor: pointer;
transition: color var(--nd-t-fast) var(--nd-ease), border-color var(--nd-t-fast) var(--nd-ease),
background var(--nd-t-fast) var(--nd-ease);
}
.nd-filterpill:hover{ color: var(--nd-text); border-color: var(--nd-lime); }
.nd-filterpill:focus-visible{ outline: none; box-shadow: var(--nd-focus-ring); }
.nd-filterpill[aria-pressed="true"], .nd-filterpill.active{
background: linear-gradient(180deg, color-mix(in srgb, var(--nd-lime) 88%, white), var(--nd-lime));
color: var(--nd-on-lime); border-color: transparent;
}
/* ---- Page title for pages whose H1 stands without a masthead
wrapper: same display type + rhythm as .nd-pageband h1. ---- */
.nd-pagetitle{
font-family: var(--nd-font-display); font-weight: 600;
font-size: var(--step-4); line-height: 1.1; letter-spacing: -0.01em;
color: var(--nd-text); margin: var(--nd-s8) 0 var(--nd-s3);
}
/* SKIP LINK (Phase 5): visually-hidden-until-focus fallback for chrome pages
whose family CSS carries no .skip-link rule. Family rules loaded after
this file win on equal specificity. */
.skip-link{position:absolute;top:-48px;left:12px;z-index:200;padding:8px 14px;
border-radius:8px;background:var(--nd-lime,#B8E62E);color:var(--nd-on-lime);
font-weight:700;text-decoration:none;transition:top .15s ease}
.skip-link:focus{top:12px}
/* BASE FONT (Phase 5, master trap 2.6.2): the shared stack never set
body{font-family}, so every chrome page without a per-page body rule
rendered body copy in Times. One shared rule fixes all of them;
per-page body[data-page] rules loaded later still win. */
body{font-family:var(--nd-font-sans)}
/* ---- R6 (2026-10-29): light-theme contrast to AA ---- */
/* Footer headings were lime at opacity .8 -> blended olive #6f953e
(3.24:1) on light. Full opacity restores #4D7C0F = 4.66:1. */
[data-theme="light"] #nd-footer .nd-footcol h3 { opacity: 1; }