/* WhoBought layout + components. tokens.css owns every raw visual constant. */
* { box-sizing: border-box; margin: 0; padding: 0; }
html { max-width: 100%; -webkit-text-size-adjust: 100%; }
body { max-width: 100%; font-family: var(--font); background: var(--bg); color: var(--body); font-size: var(--t-body-s); line-height: var(--t-body-l); }
a { color: var(--link); text-decoration: none; }
a:hover { color: var(--link); text-decoration: underline; text-underline-offset: var(--px-2); }
a:active { color: var(--link); }
button, input, select, summary { font: inherit; }
button, summary { color: inherit; }
input::placeholder { color: var(--muted); opacity: 1; }
:where(a[href], button, summary, input:not([type="hidden"]), select, [role="tab"], [role="option"]):focus-visible {
outline: var(--focus-ring-w) solid var(--link);
outline-offset: var(--px-2);
}
:where(p, .t-small, .srcnote, .breadcrumb) a { text-decoration: underline; text-underline-offset: var(--px-2); }
ul { list-style: none; }
.wrap { max-width: var(--maxw); margin: 0 auto; padding: 0 var(--side-pad); }
.sr-only { position: absolute; width: var(--px-1); height: var(--px-1); padding: 0; margin: calc(-1 * var(--px-1)); overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
.pos { color: var(--delta-up); font-weight: var(--weight-regular); }
.neg { color: var(--delta-down); font-weight: var(--weight-regular); }
.financial-delta, .financial-delta--up, .financial-delta--down, .delta-up, .delta-down {
font-weight: var(--weight-regular); font-variant-numeric: tabular-nums;
}
.financial-delta--up, .delta-up { color: var(--delta-up); }
.financial-delta--down, .delta-down { color: var(--delta-down); }
/* ---------- Header (sticky, 64px, hairline bottom) ---------- */
.hdr { position: sticky; top: 0; z-index: 100; background: var(--bg); border-bottom: var(--border-w) solid var(--line); height: var(--header-h); }
.hdr.is-stuck { box-shadow: var(--shadow-hover); }
.hdr .wrap { display: flex; align-items: center; gap: var(--s-16); height: var(--header-h); min-width: 0; }
.logo { display: flex; align-items: center; gap: var(--s-12); font-size: var(--t-h3-s); font-weight: var(--weight-heavy); color: var(--ink); flex: 0 0 auto; }
.logo:hover { text-decoration: none; }
.logomark { display: inline-flex; flex: 0 0 auto; }
.logomark svg, .logomark .wb-logomark { display: block; }
.hdr-search { flex: 1 1 auto; min-width: 0; max-width: var(--search-w); overflow: visible; }
.hdr-search .search-box { width: 100%; min-width: 0; }
.search-box input {
display: block; width: 100%; min-width: 0; max-width: 100%; height: calc(var(--header-h) - var(--s-24));
border: var(--border-w) solid var(--control-border); border-radius: var(--radius-sm);
background: var(--bg); padding: 0 var(--search-input-pad) 0 calc(var(--s-12) + var(--s-16) + var(--s-8)); font-size: var(--t-ui);
line-height: var(--t-body-l); color: var(--ink);
}
.search-box .search-icon { position: absolute; z-index: 1; left: var(--s-12); top: 50%;
width: var(--s-16); height: var(--s-16); transform: translateY(-50%); color: var(--muted);
pointer-events: none; }
/* ---------- SEO-P3 Form 13F guide: M24 filing cycle + M25 acceptance wave ---------- */
.guide13f-page { padding-top: var(--page-pad-top); padding-bottom: var(--page-pad-bottom); }
.guide13f-head { max-width: var(--s-840); margin-top: var(--s-24); }
.guide13f-head h1 { margin: var(--s-8) 0 var(--s-12); }
.guide13f-page > section { margin: var(--sect-gap) 0; }
.guide13f-prose-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
gap: var(--card-gap); }
.guide13f-prose-grid article { padding: var(--pad-card); border: var(--border-w) solid var(--line);
border-radius: var(--radius); background: var(--bg); }
.guide13f-prose-grid h3 { margin-bottom: var(--s-8); }
.filing-progress-card { display: grid; grid-template-columns: 1fr auto; align-items: end;
gap: var(--s-16); padding: var(--s-24); background: var(--surface);
border: var(--border-w) solid var(--line); border-radius: var(--radius); }
.filing-progress-card h2 { margin-top: var(--s-4); }
.filing-progress-metric { display: flex; flex-direction: column; text-align: right; }
.filing-progress-metric strong { font-size: var(--t-h2-s); color: var(--ink); }
.filing-progress-metric span { color: var(--muted); font-size: var(--t-small-s); }
.filing-progress-track { grid-column: 1 / -1; height: var(--s-8); overflow: hidden;
background: var(--chart-grid); border-radius: var(--radius-pill); }
.filing-progress-track i { display: block; width: var(--progress-width); height: 100%;
background: var(--heat-3); border-radius: inherit; }
.guide13f-controls { padding: var(--s-16); border: var(--border-w) solid var(--line);
border-radius: var(--radius); }
.guide13f-quarter-tabs { margin-bottom: var(--s-16); flex-wrap: nowrap; overflow-x: auto;
padding-bottom: var(--s-4); scrollbar-width: thin; }
.guide13f-filter-form { align-items: flex-end; }
.guide13f-filter-form .fld { flex: 1 1 var(--s-220); }
.guide13f-empty { margin-top: var(--s-32); }
.filing-cycle-card { padding: var(--s-24); border: var(--border-w) solid var(--line);
border-radius: var(--radius); background: var(--chart-bg); }
.filing-cycle-fallback { background: var(--surface); }
.filing-cycle-heading { display: flex; align-items: flex-start; justify-content: space-between;
gap: var(--s-16); }
.filing-cycle-heading strong { font-size: var(--t-h3-s); }
.filing-timeline-scroll { margin-top: var(--s-24); overflow-x: visible; }
.filing-timeline { position: relative; min-width: var(--s-760); height: var(--s-120);
margin: 0 var(--s-8); }
.filing-track { position: absolute; left: 0; right: var(--s-120); top: var(--s-48);
height: var(--s-8); background: var(--chart-grid); border-radius: var(--radius-pill); }
.filing-track i { display: block; width: var(--filing-progress); height: 100%;
background: var(--heat-3); border-radius: inherit; }
.timeline-marker { position: absolute; top: var(--s-32); display: flex; flex-direction: column;
align-items: center; width: var(--s-120); margin-left: calc(-1 * var(--s-56));
color: var(--chart-axis); text-align: center; font-size: var(--t-tick); }
.timeline-marker i { width: var(--s-16); height: var(--s-16); margin-bottom: var(--s-4);
border: var(--px-2) solid var(--bg); border-radius: 50%; background: var(--ink); }
.timeline-marker b { color: var(--ink); font-size: var(--t-small-s); }
.timeline-quarter { left: 0; margin-left: 0; align-items: flex-start; text-align: left; }
.timeline-open { left: var(--s-24); margin-left: 0; align-items: flex-start; text-align: left;
transform: translateY(var(--s-48)); }
.timeline-due { right: var(--s-64); }
.timeline-today { left: var(--today-position); }
.timeline-today i { background: var(--gold); }
.timeline-amendment { position: absolute; right: 0; top: var(--s-24); display: flex;
flex-direction: column; width: var(--s-120); color: var(--chart-axis);
font-size: var(--t-tick); }
.timeline-amendment i { width: var(--s-12); height: var(--s-12); margin-bottom: var(--s-4);
border: var(--border-w) dashed var(--heat-5); border-radius: 50%; }
.timeline-amendment b { color: var(--ink); }
.filing-date-order { display: flex; flex-wrap: wrap; gap: var(--s-8) var(--s-24);
margin-top: var(--s-16); padding-left: var(--s-24); color: var(--muted);
font-size: var(--t-small-s); }
.fallback-label { margin: var(--s-24) 0 var(--s-8); }
.guide13f-timeline-module .srcnote, .guide13f-wave-module .srcnote { margin-top: var(--s-12); }
.filing-wave-legend { display: flex; flex-wrap: wrap; gap: var(--s-16); margin: var(--s-12) 0; }
.filing-wave-legend span { display: inline-flex; align-items: center; gap: var(--s-4); }
.filing-wave-legend i { width: var(--s-16); height: var(--s-16); border-radius: var(--radius-sm); }
.filing-legend-original { background: var(--heat-3); }
.filing-legend-amendment { background: repeating-linear-gradient(45deg, var(--heat-5),
var(--heat-5) var(--px-2), var(--bg) var(--px-2), var(--bg) var(--s-4));
border: var(--border-w) solid var(--heat-5); }
.filing-wave { overflow: hidden; border: var(--border-w) solid var(--line);
border-radius: var(--radius); background: var(--chart-bg); }
.filing-wave svg { display: block; width: 100%; height: auto; min-height: var(--s-220); }
.filing-wave svg a:focus-visible { outline: var(--focus-ring-w) solid var(--link); outline-offset: var(--px-2); }
.filing-wave svg a:focus rect:last-child { stroke: var(--link); stroke-width: var(--px-2); }
.filing-wave-weekly, .filing-weekly-note { display: none; }
.filing-table-head { display: flex; align-items: flex-start; justify-content: space-between;
gap: var(--s-16); margin: var(--s-32) 0 var(--s-8); }
.guide13f-wave-module .table-component { overflow-x: auto; }
.guide13f-calendar dl { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--card-gap); }
.guide13f-calendar dl div { padding: var(--s-16); background: var(--surface);
border-radius: var(--radius); }
.guide13f-calendar dt { color: var(--muted); font-size: var(--t-label-s);
font-weight: var(--weight-semibold); text-transform: uppercase; }
.guide13f-calendar dd { margin-top: var(--s-8); font-variant-numeric: tabular-nums; }
.guide13f-example p, .guide13f-coverage p, .guide13f-methodology p { max-width: var(--s-760);
margin-top: var(--s-8); }
@media (max-width: 600px) {
.guide13f-page { padding-top: var(--page-pad-top); }
.guide13f-prose-grid, .guide13f-calendar dl { grid-template-columns: 1fr; }
.filing-progress-card { grid-template-columns: 1fr; align-items: start; }
.filing-progress-metric { text-align: left; }
.filing-progress-track { grid-column: 1; }
.guide13f-filter-form { align-items: stretch; }
.guide13f-filter-form .fld, .guide13f-filter-form select { width: 100%; }
.filing-cycle-card { padding: var(--s-16); }
.filing-timeline-scroll { overflow-x: auto; scrollbar-width: thin; }
.filing-timeline { min-width: var(--s-840); }
.filing-date-order { display: grid; }
.filing-wave { margin-inline: calc(-1 * var(--side-pad)); border-radius: 0; }
.filing-wave-daily { display: none; }
.filing-wave-weekly, .filing-weekly-note { display: block; }
.filing-table-head { flex-direction: column; }
table[data-family-table="filing_13f"] th:nth-child(2),
table[data-family-table="filing_13f"] td:nth-child(2),
table[data-family-table="filing_13f"] th:nth-child(5),
table[data-family-table="filing_13f"] td:nth-child(5) { display: none; }
}
.search-box input:hover { border-color: var(--muted); }
.search-box input:focus-visible { border-color: var(--muted); background: var(--bg); outline: var(--focus-ring-w) solid var(--line); outline-offset: var(--px-2); }
.hdr-nav { margin-left: auto; display: flex; align-items: center; gap: var(--s-16); flex: 0 0 auto; }
.hdr-nav > a:not(.btn-gold) { color: var(--body); font-size: var(--t-ui); font-weight: var(--weight-semibold); white-space: nowrap; }
.hdr-nav > a:not(.btn-gold):hover { color: var(--ink); text-decoration: none; }
.hdr-nav > a.active, .menu-card a.active { color: var(--ink); text-decoration: underline;
text-decoration-thickness: var(--focus-ring-w); text-underline-offset: var(--s-4); }
/* ---------- Session login ---------- */
.auth-logout { white-space: nowrap; }
.auth-account { position: relative; }
.auth-account > summary { display: inline-flex; align-items: center; justify-content: center;
width: var(--control-h); height: var(--control-h); list-style: none; cursor: pointer;
border-radius: var(--radius-pill); background: var(--navy); color: var(--bg);
font-size: var(--t-ui-sm); font-weight: var(--weight-bold); }
.auth-account > summary::-webkit-details-marker { display: none; }
.auth-account > summary:hover { filter: var(--button-hover-filter); }
.auth-account > summary:focus-visible { outline: var(--focus-ring-w) solid var(--link);
outline-offset: var(--px-2); }
.auth-account > summary:active { filter: var(--button-active-filter); }
.auth-account-menu { position: absolute; right: 0; top: calc(100% + var(--s-8)); z-index: 120;
min-width: var(--s-190); padding: var(--s-4); background: var(--bg);
border: var(--border-w) solid var(--line); border-radius: var(--radius);
box-shadow: var(--shadow-pop); }
.auth-account-head { padding: var(--s-8) var(--s-12) var(--s-4); }
.auth-account-head .auth-account-name { display: block; font-size: var(--t-ui-sm); font-weight: var(--weight-semibold); color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.auth-account-head .auth-account-sub { display: block; font-size: var(--t-label-s); color: var(--muted); }
.auth-account-menu hr { border: 0; border-top: var(--border-w) solid var(--line); margin: var(--s-4) 0; }
.auth-account-menu a { display: flex; align-items: center; min-height: var(--control-h);
padding: var(--s-8) var(--s-12); border-radius: var(--radius-sm); color: var(--body);
font-size: var(--t-ui); font-weight: var(--weight-semibold); }
.auth-account-menu a:hover { background: var(--surface-strong); color: var(--ink);
text-decoration: none; }
@media (max-width: 900px) { .auth-account { display: none; } }
.login-popup { width: min(var(--s-420), calc(100% - 2 * var(--side-pad))); margin: auto;
padding: 0; color: var(--body); background: var(--bg); border: var(--border-w) solid var(--line);
border-radius: var(--radius); box-shadow: var(--shadow-pop); }
.login-popup::backdrop { background: var(--navy); opacity: var(--blur-gate-opacity); }
.login-popup-card { display: grid; gap: var(--s-12); padding: var(--s-24); }
.login-popup-card h2 { margin-top: var(--s-4); }
.login-popup-actions { display: flex; align-items: center; gap: var(--s-8); margin-top: var(--s-8); }
/* Button system: every interactive variant is defined here and carries the same complete
state contract. Search is a navy high-emphasis action; conversion and gate variants use gold. */
.btn-gold, .btn-quiet, .chip-btn, .sortbtn, .chip-link, .search-cta, .gate-pill,
.chart-ranges button, .chart-ranges a, .chart-ranges summary {
font-family: var(--font);
cursor: pointer;
transition: filter var(--motion-fast) ease, border-color var(--motion-fast) ease,
background-color var(--motion-fast) ease, color var(--motion-fast) ease,
box-shadow var(--motion-fast) ease;
}
.btn-gold { display: inline-flex; align-items: center; justify-content: center; min-height: var(--control-h);
background: var(--gold); color: var(--gold-ink); font-weight: var(--weight-bold); font-size: var(--t-ui);
border: var(--border-w) solid transparent; border-radius: var(--radius-sm);
padding: 0 var(--s-16); white-space: nowrap; }
.btn-quiet { display: inline-flex; align-items: center; justify-content: center; min-height: var(--control-h);
background: var(--bg); color: var(--ink); font-weight: var(--weight-semibold); font-size: var(--t-ui);
border: var(--border-w) solid var(--control-border); border-radius: var(--radius-sm);
padding: 0 var(--s-16); }
.btn-gold:hover, .gate-pill:hover { background: var(--gold-hover); filter: none; text-decoration: none; color: var(--gold-ink); }
.btn-quiet:hover { background: var(--surface-strong); border-color: var(--ink); text-decoration: none; }
.btn-gold:focus-visible, .btn-quiet:focus-visible, .search-cta:focus-visible, .gate-pill:focus-visible,
.chip-btn:focus-visible, .sortbtn:focus-visible, .chip-link:focus-visible,
.chart-ranges button:focus-visible, .chart-ranges a:focus-visible, .chart-ranges summary:focus-visible {
outline: var(--focus-ring-w) solid var(--link);
outline-offset: var(--px-2);
}
.btn-gold:active, .gate-pill:active { background: var(--gold-active); filter: none; color: var(--gold-ink); }
.btn-quiet:active { background: var(--surface-strong); }
.btn-gold:disabled, .btn-quiet:disabled, .search-cta:disabled, .gate-pill:disabled,
.btn-gold[aria-disabled="true"], .btn-quiet[aria-disabled="true"],
.search-cta[aria-disabled="true"], .gate-pill[aria-disabled="true"] {
cursor: not-allowed; opacity: var(--disabled-opacity); pointer-events: none;
}
.demo-focus { outline: var(--focus-ring-w) solid var(--link); outline-offset: var(--px-2); }
.search-cta { display: inline-flex; align-items: center; justify-content: center;
min-height: var(--control-h); padding: var(--s-8) var(--s-16);
background: var(--navy); color: var(--on-dark-92); border: var(--border-w) solid var(--navy);
border-radius: var(--radius-sm); font-size: var(--t-ui); font-weight: var(--weight-bold); }
.search-cta:hover, .search-cta.demo-hover { background: var(--ink); border-color: var(--gold); box-shadow: var(--shadow-hover);
filter: none; text-decoration: none; color: var(--on-dark-92); }
.search-cta:active, .search-cta.demo-active { background: var(--navy); box-shadow: none; filter: none; }
/* Burger (visible under 900px: logo + search + burger, brand.md §4) */
.burger { position: relative; display: none; }
.burger summary { list-style: none; cursor: pointer; display: inline-flex; align-items: center; justify-content: center;
min-width: var(--control-h); min-height: var(--control-h); padding: var(--s-8); color: var(--muted); }
.burger summary:hover { color: var(--ink); background: var(--surface-strong); }
.burger summary:focus-visible { outline: var(--focus-ring-w) solid var(--link); outline-offset: var(--px-2); }
.burger summary:active { background: var(--surface-strong); }
.burger summary[aria-disabled="true"] { cursor: not-allowed; opacity: var(--disabled-opacity); pointer-events: none; }
.burger summary::-webkit-details-marker { display: none; }
.burger[open] .menu-card { display: block; }
.menu-card { display: none; position: absolute; right: 0; top: calc(100% + var(--s-8)); background: var(--bg);
border: var(--border-w) solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow-pop); padding: var(--s-8); min-width: var(--menu-min-w); z-index: 120; }
.menu-card a { display: flex; align-items: center; min-height: var(--control-h); padding: var(--s-8) var(--s-12); color: var(--body); font-size: var(--t-ui); font-weight: var(--weight-semibold); border-radius: var(--radius-sm); }
.menu-card a:hover { background: var(--surface-strong); color: var(--ink); text-decoration: none; }
/* ---------- Sections & cards ---------- */
section { margin: var(--sect-gap) 0; }
[data-ui-section] { position: relative; }
[data-ui-section][data-section-surface="open"] > [data-section-separator] {
position: absolute; top: calc(var(--sect-gap) / -2); right: 0; left: 0;
height: 0; margin: 0; color: var(--muted); border: 0;
border-top: var(--border-w) solid var(--line);
}
.sec-head { margin-bottom: var(--sect-title-gap); }
.sec-head .sub { margin-top: var(--s-4); }
.card { background: var(--bg); border: var(--border-w) solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); padding: var(--pad-card); }
a.card { display: block; color: inherit; text-decoration: none; transition: border-color var(--motion-fast) ease, background-color var(--motion-fast) ease, box-shadow var(--motion-fast) ease; }
a.card:hover { border-color: var(--muted); background: var(--surface-strong); box-shadow: var(--shadow-hover); text-decoration: none; }
a.card:focus-visible { outline: var(--focus-ring-w) solid var(--link); outline-offset: var(--px-2); }
a.card:active { background: var(--surface-strong); box-shadow: none; }
.grid { display: grid; gap: var(--card-gap); }
.grid-2 { grid-template-columns: repeat(2, 1fr); }
.grid-3 { grid-template-columns: repeat(3, 1fr); }
.grid-4 { grid-template-columns: repeat(4, 1fr); }
.grid-1 { grid-template-columns: 1fr; max-width: var(--s-760); }
/* ---------- Stat blocks (brand.md §5.1: rows of 4 desktop / 2 mobile) ---------- */
.stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--card-gap); }
.stat .t-label { margin-bottom: var(--s-4); }
.stat .t-stat.narrow { font-size: var(--t-h2-s); }
/* ---------- Answer box (brand.md §5.2) ---------- */
.answer { background: var(--surface); border-radius: var(--radius); padding: var(--pad-card); }
.answer b, .answer strong { color: var(--ink); }
.answer > b, .answer-line { display: block; }
.answer-line + .answer-line { margin-top: var(--s-4); }
/* ---------- Fixed decorative capsule (DATAVIZ_SPEC v2.1 C11/M11) ---------- */
.capsule { display: inline-flex; flex: 0 0 auto; width: var(--decor-capsule-width);
flex-direction: column; align-items: center; justify-content: center; }
.capsule .up { width: var(--mark-capsule-width); height: var(--decor-capsule-up-height);
background: var(--buy); border-radius: var(--radius-pill); }
.capsule .base { width: var(--decor-capsule-width); height: var(--decor-capsule-baseline-height);
background: var(--line); border-radius: var(--radius-pill); margin: var(--decor-capsule-gap) 0; }
.capsule .down { width: var(--mark-capsule-width); height: var(--decor-capsule-down-height);
background: var(--sell); border-radius: var(--radius-pill); }
/* ---------- Holder cards row (brand.md §5.4: horizontal scroll) ---------- */
.holders { display: flex; gap: var(--card-gap); max-width: 100%; overflow-x: auto; padding: var(--s-4) var(--s-4) var(--s-20); scrollbar-width: thin; }
.holder-card { min-width: var(--holder-card-min); flex: 0 0 auto; }
.holder-card .val { font-size: var(--t-h2-s); line-height: var(--t-h2-l); font-weight: var(--weight-bold); color: var(--ink); font-variant-numeric: tabular-nums; margin-top: var(--px-2); }
.holder-card-value { margin-top: var(--s-4); line-height: var(--t-body-l); }
.holder-card-value + .t-small { margin-top: var(--s-8); }
.holder-card .row { display: flex; align-items: center; justify-content: space-between; gap: var(--s-8); }
.holder-card-identity { display: inline-flex; align-items: center; gap: var(--s-8); min-width: 0; }
.holder-card-identity h3 { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* Issuer logos: markup owners use .issuer-logo with the size modifier that matches the
host. Legacy issuer containers share the same sizing, alignment, and fallback contract. */
.issuer-logo, .entity-mark, .holder-card-mark, .stock-hero-logo {
display: inline-grid; place-items: center; flex: 0 0 auto; overflow: hidden;
border: var(--border-w) solid var(--line); background: var(--bg); color: var(--ink);
font-size: var(--logo-fallback-font); font-weight: var(--weight-semibold); line-height: var(--line-solid);
}
.issuer-logo, .issuer-logo--table, .entity-mark {
width: var(--logo-row); height: var(--logo-row); border-radius: var(--logo-row-radius);
}
.issuer-logo--search, .holder-card-mark, .res-card .entity-mark {
width: var(--logo-card); height: var(--logo-card); border-radius: var(--logo-card-radius);
}
.issuer-logo--header, .stock-hero-logo {
width: var(--logo-hero); height: var(--logo-hero); border-radius: var(--logo-hero-radius);
}
:is(.issuer-logo, .entity-mark, .holder-card-mark, .stock-hero-logo) img {
display: block; width: 100%; height: 100%; object-fit: contain; object-position: center;
}
:is(.issuer-logo, .entity-mark, .holder-card-mark, .stock-hero-logo) img[src=""],
:is(.issuer-logo, .entity-mark, .holder-card-mark, .stock-hero-logo) img:not([src]),
:is(.issuer-logo, .entity-mark, .holder-card-mark, .stock-hero-logo)[data-logo-state="fallback"] img {
display: none;
}
:is(.issuer-logo, .entity-mark, .holder-card-mark, .stock-hero-logo)[data-logo-state="fallback"] {
background: var(--surface-strong); color: var(--body); text-transform: uppercase;
}
:is(.issuer-logo--search, .holder-card-mark, .res-card .entity-mark)[data-logo-state="fallback"] {
font-size: var(--logo-fallback-font-card);
}
:is(.issuer-logo--header, .stock-hero-logo)[data-logo-state="fallback"] {
font-size: var(--logo-fallback-font-hero);
}
.issuer-logo-fallback { display: inline; overflow: hidden; text-align: center; text-overflow: ellipsis; white-space: nowrap; }
/* The letter-badge is ALWAYS in the DOM behind a verified logo; it stays hidden until
the container flips to fallback (server-side, or an ![]()
on a broken file). */
:is(.issuer-logo, .entity-mark, .holder-card-mark, .stock-hero-logo)[data-logo-state="verified"] .issuer-logo-fallback { display: none; }
/* ---------- Data table (brand.md §5.5: 44px rows, no vertical lines) ---------- */
.table-component { min-width: 0; max-width: 100%; }
.tbl-wrap { width: 100%; max-width: 100%; overflow-x: auto; overscroll-behavior-inline: contain;
position: relative; scrollbar-width: thin; -webkit-overflow-scrolling: touch; }
.holders, .tbl-wrap {
background:
linear-gradient(to right, var(--bg) 30%, var(--scroll-cover)) left / var(--s-40) 100%,
linear-gradient(to left, var(--bg) 30%, var(--scroll-cover)) right / var(--s-40) 100%,
linear-gradient(to right, var(--scroll-shadow), var(--scroll-cover)) left / var(--s-12) 100%,
linear-gradient(to left, var(--scroll-shadow), var(--scroll-cover)) right / var(--s-12) 100%;
background-repeat: no-repeat;
background-attachment: local, local, scroll, scroll;
}
table.tbl { width: 100%; min-width: max-content; border-collapse: collapse;
font-size: var(--table-cell-s); line-height: var(--table-cell-l); font-weight: var(--weight-regular); }
table.tbl th { background: var(--bg); text-align: left; padding: var(--s-8) var(--s-12);
border: 0; border-bottom: var(--border-w) solid var(--table-divider);
font-size: var(--table-header-s); line-height: var(--table-header-l); letter-spacing: normal;
text-transform: none; font-weight: var(--weight-semibold); color: var(--ink); white-space: nowrap; }
table.tbl td { height: var(--row-h); padding: 0 var(--s-12); border: 0;
border-bottom: var(--border-w) solid var(--table-divider); color: var(--body); white-space: nowrap;
font-size: var(--table-cell-s); line-height: var(--table-cell-l); font-weight: var(--weight-regular); }
table.tbl > tbody > tr:not(.portfolio-holding-detail-row):not(.signin-row) { transition: background-color var(--motion-fast) ease; }
table.tbl > tbody > tr:not(.portfolio-holding-detail-row):not(.signin-row):hover { background: var(--surface-strong); }
table.tbl td.r, table.tbl th.r { text-align: right; font-variant-numeric: tabular-nums; }
table.tbl .num, [role="table"] .num { text-align: right; font-variant-numeric: tabular-nums; }
.chip { display: inline-block; border-radius: var(--radius-pill); padding: var(--px-2) var(--s-8); font-size: var(--table-subline-s); line-height: var(--table-subline-l); font-weight: var(--weight-semibold); }
.chip.neutral { background: var(--surface); color: var(--muted); }
.action-tag { display: inline-flex; align-items: center; gap: var(--s-4); border-radius: var(--radius-pill); padding: var(--px-2) var(--s-8); font-size: var(--table-subline-s); line-height: var(--table-subline-l); font-weight: var(--weight-semibold); background: var(--surface); white-space: nowrap; }
.action-tag .verb { color: var(--muted); }
.action-tag.buy { background: var(--buy-soft); }
.action-tag.buy .verb { color: var(--buy); }
.action-tag.sell { background: var(--sell-soft); }
.action-tag.sell .verb { color: var(--sell); }
.action-tag .qtr { color: var(--muted); font-weight: var(--weight-regular); }
table.tbl td.pos, table.tbl td .pos, table.tbl td.change-positive { color: var(--delta-up); font-weight: var(--weight-regular); }
table.tbl td.neg, table.tbl td .neg, table.tbl td.change-negative { color: var(--delta-down); font-weight: var(--weight-regular); }
.change-cell { font-weight: var(--weight-regular); font-variant-numeric: tabular-nums; background: transparent; }
.change-triangle { width: var(--t-mini); height: var(--s-8); margin-left: var(--s-4); vertical-align: baseline; fill: currentColor; }
table.tbl td:has(> .change-triangle) { font-size: var(--type-whitespace-zero); }
table.tbl td:has(> .change-triangle) > :not(.change-triangle) {
font-size: var(--table-cell-s); line-height: var(--table-cell-l);
}
table.tbl :is(th, td) a,
[role="table"] :is([role="columnheader"], [role="cell"], [role="gridcell"]) a {
color: var(--table-primary-link); font-size: var(--table-cell-s);
line-height: var(--table-cell-l); font-weight: var(--weight-regular);
}
table.tbl :is(.entity-cell, [data-cell-primary]) a,
[role="table"] :is(.entity-cell, [data-cell-primary]) a,
table.tbl a.portfolio-holding-name,
[role="table"] a.portfolio-holding-name { font-weight: var(--weight-semibold); }
table.tbl th a,
[role="table"] [role="columnheader"] a {
font-size: var(--table-header-s); line-height: var(--table-header-l);
font-weight: var(--weight-semibold);
}
table.tbl :is(th, td) :is(.t-small, .holding-transaction-magnitude, .mobile-record-secondary,
.mobile-record-fact-label, .action-tag, .chip, [data-cell-subline]) a {
font-size: var(--table-subline-s); line-height: var(--table-subline-l);
}
table.tbl :is(th, td) a:hover,
table.tbl :is(th, td) a:focus-visible,
[role="table"] :is([role="columnheader"], [role="cell"], [role="gridcell"]) a:hover,
[role="table"] :is([role="columnheader"], [role="cell"], [role="gridcell"]) a:focus-visible {
color: var(--table-primary-link); text-decoration: underline;
text-decoration-color: var(--table-primary-link);
}
table.tbl :is(th, td) :is(.t-small, .holding-transaction-magnitude, .mobile-record-secondary,
.mobile-record-fact-label, .action-tag, .chip, [data-cell-subline]),
[role="table"] :is([role="columnheader"], [role="cell"], [role="gridcell"])
:is(.t-small, .holding-transaction-magnitude, .mobile-record-secondary,
.mobile-record-fact-label, .action-tag, .chip, [data-cell-subline]) {
font-size: var(--table-subline-s); line-height: var(--table-subline-l);
}
[role="table"] [role="columnheader"] {
color: var(--ink); background: var(--bg); font-size: var(--table-header-s);
line-height: var(--table-header-l); font-weight: var(--weight-semibold);
letter-spacing: normal; text-transform: none;
}
[role="table"] :is([role="cell"], [role="gridcell"]) {
color: var(--body); font-size: var(--table-cell-s); line-height: var(--table-cell-l);
font-weight: var(--weight-regular);
}
[role="table"] [data-align="r"] { text-align: right; font-variant-numeric: tabular-nums; }
[role="table"] :is([role="cell"], [role="gridcell"]) strong:not([data-cell-primary]) {
font-weight: var(--weight-regular);
}
.entity-cell { display: inline-flex; align-items: center; gap: var(--s-8); }
.entity-cell .cell-text, table.tbl td[data-field="company"] > .cell-text {
color: var(--ink); font-weight: var(--weight-semibold);
}
.entity-cell a.cell-text, .entity-cell a .cell-text { color: var(--table-primary-link); }
table.insider-tbl { font-variant-numeric: tabular-nums; }
table.insider-tbl th { padding: var(--s-4) var(--s-8); }
table.insider-tbl td { height: var(--row-h-compact); padding: 0 var(--s-8); }
table.insider-tbl td.change-positive { color: var(--delta-up); font-weight: var(--weight-regular); }
table.insider-tbl td.change-negative { color: var(--delta-down); font-weight: var(--weight-regular); }
table.insider-tbl td[data-field="company"], table.insider-tbl td[data-field="entity"] { max-width: var(--s-190); overflow: hidden; text-overflow: ellipsis; }
.mobile-record-cell { display: none; }
.mobile-record-card { min-width: 0; color: var(--body); }
.mobile-record-primary { display: flex; align-items: baseline; flex-wrap: wrap; gap: var(--s-4) var(--s-8);
min-width: 0; color: var(--ink); font-weight: var(--weight-semibold); }
.mobile-record-company { display: flex; flex: 1 0 100%; align-items: center; gap: var(--s-8);
min-width: 0; overflow-wrap: normal; word-break: normal; hyphens: none; }
.mobile-record-company > span:last-child { min-width: 0; overflow-wrap: normal; word-break: normal; hyphens: none; }
.mobile-record-entity { display: inline-flex; align-items: center; gap: var(--s-8); min-width: 0; }
.mobile-record-entity a { color: var(--table-primary-link); }
.mobile-record-role { color: var(--muted); font-weight: var(--weight-regular); }
.mobile-record-event { display: inline-flex; align-items: center; flex-wrap: wrap; gap: var(--s-8); }
.mobile-record-amount, .mobile-record-weight { color: var(--ink); font-variant-numeric: tabular-nums; }
.mobile-record-secondary { display: flex; align-items: baseline; flex-wrap: wrap; gap: var(--s-4) var(--s-12);
margin-top: var(--s-4); color: var(--muted); font-size: var(--table-subline-s); line-height: var(--table-subline-l); }
.mobile-record-secondary:empty { display: none; }
.mobile-record-fact { display: inline-flex; align-items: baseline; gap: var(--s-4); min-width: 0; }
.mobile-record-delta { display: inline-flex; align-items: center; color: var(--body);
font-variant-numeric: tabular-nums; }
.mobile-record-delta.change-positive { color: var(--delta-up); }
.mobile-record-delta.change-negative { color: var(--delta-down); }
.mobile-record-fact + .mobile-record-fact::before { content: "\00b7"; margin-right: var(--s-8); color: var(--muted); }
.mobile-record-fact[data-mobile-record-fact$="_date"],
.mobile-record-fact[data-mobile-record-fact="report_period"] { white-space: nowrap; }
.mobile-record-fact-label { color: var(--muted); font-size: var(--table-subline-s);
line-height: var(--table-subline-l); text-transform: none; letter-spacing: normal; }
.mobile-record-card [data-missing-value] { display: none; }
.table-freshness { display: flex; align-items: baseline; justify-content: space-between;
flex-wrap: wrap; gap: var(--s-4) var(--s-16); margin-top: var(--s-8);
color: var(--muted); font-size: var(--table-subline-s); line-height: var(--table-subline-l);
font-weight: var(--weight-regular); }
.table-freshness > span { min-width: 0; }
.table-count { margin-top: var(--s-8); color: var(--muted); }
.table-pagination { display: grid; justify-items: center; width: 100%; }
.table-pagination .table-count, .table-component > .table-count {
width: 100%; text-align: center;
}
.sort-th { display: inline-flex; align-items: center; gap: var(--s-4); color: currentColor; }
.sort-th .caret { display: inline-flex; align-items: center; justify-content: center;
width: var(--t-mini); height: var(--t-mini); color: currentColor;
font-size: var(--t-mini); line-height: var(--t-mini); }
th[aria-sort="ascending"] .sort-th.active .caret::before { content: "▲"; }
th[aria-sort="descending"] .sort-th.active .caret::before,
th[aria-sort="other"] .sort-th.active .caret::before { content: "▼"; }
.cell-text { display: inline-block; max-width: var(--s-220); overflow: hidden; text-overflow: ellipsis; vertical-align: bottom; }
/* Multi-insider clusters table (2026-07-20): wide Stock column, keep the "(TICKER)" suffix visible. */
#multi-insider-clusters .entity-cell .cell-text { max-width: var(--s-360); }
.cell-text:focus-visible { outline: var(--focus-ring-w) solid var(--link); outline-offset: var(--px-2); }
.missing-value { color: var(--muted); }
/* ---------- FAQ (brand.md §5.6) ---------- */
.faq details { border-bottom: var(--border-w) solid var(--line); }
/* Row padding lives on the summary so :hover covers the FULL row (not just the text band)
and the chevron sits inside a padded, rounded hit-area — mirrors .portfolio-activity-details. */
.faq summary { cursor: pointer; min-height: var(--control-h); font-size: var(--t-h3-s); line-height: var(--t-h3-l); font-weight: var(--weight-semibold); color: var(--ink); list-style: none; display: flex; align-items: center; justify-content: space-between; gap: var(--s-16); padding: var(--s-12) var(--s-8); border-radius: var(--radius-sm); transition: background-color var(--motion-fast) ease, color var(--motion-fast) ease; }
.faq summary:hover { background: var(--surface-strong); color: var(--ink); }
.faq summary:focus-visible { outline: var(--focus-ring-w) solid var(--link); outline-offset: var(--px-2); }
.faq summary:active { color: var(--muted); }
.faq summary[aria-disabled="true"] { cursor: not-allowed; opacity: var(--disabled-opacity); pointer-events: none; }
.faq summary::-webkit-details-marker { display: none; }
.faq details[open] { padding-bottom: var(--s-12); }
.faq p { margin-top: var(--s-8); max-width: var(--s-720); padding: 0 var(--s-8); }
/* ---------- Source note (brand.md §5.7: under every data module) ---------- */
.srcnote { font-size: var(--t-small-s); line-height: var(--t-small-l); color: var(--muted); margin-top: var(--s-8); }
/* ---------- Phase-3 server-side blur gate ------------------------------------------- */
.locked { position: relative; }
.auth-affordance { display: inline-flex; flex-direction: column; align-items: center; gap: var(--s-4); }
.hero-public-rows { display: block; }
.blur-gate-rows { display: block; filter: blur(var(--blur-gate-radius)); opacity: var(--blur-gate-opacity); user-select: none; }
.blur-gate-rows .tline { min-height: var(--s-24); }
.blur-gate-cta { position: absolute; inset: 0; z-index: 6; display: flex; align-items: center; justify-content: center; pointer-events: none; }
.blur-gate-cta .auth-affordance { pointer-events: auto; }
.blur-gate-cta .gate-pill { position: static; }
.table-expansion-gate { position: relative; min-height: var(--s-72); padding-top: var(--s-8); }
.table-expansion-gate .blur-gate-rows { max-width: var(--s-420); }
.table-expansion-cta { border-top: var(--border-w) solid var(--line); }
.table-gate-count { position: relative; z-index: 7; color: var(--muted); }
@media (max-width: 600px) {
.table-expansion-gate { overflow-x: hidden; }
.table-expansion-gate .blur-gate-rows { max-width: 100%; }
.table-expansion-gate .blur-gate-rows .tline {
display: flex; width: 100%; min-width: 0; gap: var(--s-8); justify-content: space-between;
}
.table-expansion-gate .blur-gate-rows .tline > :first-child {
flex: 1 1 auto; min-width: 0; overflow: hidden;
}
.table-expansion-gate .blur-gate-rows .num {
flex: 0 1 auto; min-width: 0; overflow: hidden;
}
}
/* ---------- /sec-form-4 SEO-P3 guide, M26 and M27 ---------- */
.form4-guide-page { padding-top: var(--page-pad-top); padding-bottom: var(--page-pad-bottom); }
.form4-guide-head .sub { max-width: var(--s-760); margin-top: var(--s-12); }
.form4-citations { display: flex; flex-wrap: wrap; gap: var(--s-8); margin-top: var(--s-12); }
.form4-copy-grid .card p, .form4-methodology p { margin-top: var(--s-8); }
.form4-open-market { margin-top: var(--s-16); }
.form4-open-market p { margin-top: var(--s-8); }
.form4-tool-links { margin-top: var(--s-16); }
.form4-tool-links a { display: flex; flex-direction: column; gap: var(--s-4); color: var(--body); }
.form4-tool-links a strong { color: var(--link); }
.form4-tool-links a:hover { border-color: var(--muted); text-decoration: none; }
.form4-controls { padding: var(--s-16) 0; border-top: var(--border-w) solid var(--line);
border-bottom: var(--border-w) solid var(--line); }
.form4-controls .range-control { margin-bottom: var(--s-8); }
.form4-module .srcnote { margin-top: var(--s-16); }
.form4-lag-stats { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--card-gap);
margin-bottom: var(--s-16); }
.form4-lag-stats > div { display: flex; flex-direction: column; gap: var(--s-4);
padding: var(--pad-card); background: var(--surface); border-radius: var(--radius); }
.form4-lag-stats strong { color: var(--ink); font-size: var(--t-h3-s); }
.form4-lag-chart figcaption, .form4-class-chart figcaption { margin-bottom: var(--s-16); }
.lag-columns { height: var(--s-240); display: grid; grid-template-columns: repeat(8, 1fr);
gap: var(--s-8); align-items: stretch; border-bottom: var(--border-w) solid var(--chart-baseline);
background-color: var(--chart-bg);
background-image: linear-gradient(to bottom, var(--chart-grid) var(--border-w), transparent var(--border-w));
background-size: 100% 25%; }
.lag-column { min-width: 0; display: grid; grid-template-rows: auto 1fr auto; gap: var(--s-4);
align-items: end; text-align: center; color: var(--muted); }
.lag-column:focus-visible { outline: var(--focus-ring-w) solid var(--link); outline-offset: var(--px-2); }
.lag-count, .lag-label { font-size: var(--t-tick); }
.lag-fill { display: block; align-self: end; width: 100%; height: var(--bar-height);
min-height: var(--px-1); background: var(--heat-3); border-radius: var(--radius-mark) var(--radius-mark) 0 0; }
.lag-column.median-bin .lag-fill { outline: var(--border-w) solid var(--ink); outline-offset: calc(-1 * var(--border-w)); }
.lag-mobile-list { display: none; }
.form4-bin-table { max-width: var(--s-520); margin-top: var(--s-16); }
.form4-class-chart { max-width: var(--s-840); }
.class-bars { display: flex; flex-direction: column; gap: var(--s-8); margin-top: var(--s-16); }
.class-bar-row { display: grid; grid-template-columns: var(--s-190) minmax(var(--s-160), 1fr) var(--s-72);
gap: var(--s-12); align-items: center; padding: var(--s-8); border-radius: var(--radius-sm);
color: var(--body); }
.class-bar-row:hover { background: var(--surface-strong); text-decoration: none; }
.class-bar-row.selected { background: var(--surface); outline: var(--border-w) solid var(--ink); text-decoration: none; }
.class-label { color: var(--ink); }
.class-bar-row strong, .class-mobile-list strong { color: var(--ink); font-weight: var(--weight-regular); text-align: right; }
.class-track { display: block; height: var(--s-16); background: var(--surface); border-radius: var(--radius-sm); overflow: hidden; }
.class-bar-row:hover .class-track, .class-bar-row.selected .class-track { background: var(--bg); }
.class-fill { display: block; width: var(--bar-width); height: 100%; background: var(--series-other);
border-radius: 0 var(--radius-mark) var(--radius-mark) 0; }
.class-fill.class-buy { background: var(--buy); }
.class-fill.class-sell { background: var(--sell); }
.class-mobile-list { display: none; }
.form4-data-scroll { max-width: var(--s-840); overflow-x: auto; }
.form4-mapping { width: 100%; margin-top: var(--s-24); min-width: var(--s-620); }
.form4-data-row { display: grid; grid-template-columns: var(--s-88) minmax(var(--s-320), 1fr) var(--s-160);
align-items: stretch; border-bottom: var(--border-w) solid var(--line); }
.form4-data-row > span { padding: var(--s-8); }
.form4-data-row > span:nth-child(2) { min-width: 0; text-align: left; white-space: normal; }
.form4-data-row > span:last-child { display: grid; grid-template-columns: auto minmax(var(--s-64), 1fr);
align-items: center; gap: var(--s-8); min-width: 0; text-align: right; }
.form4-data-row > span:last-child strong { white-space: nowrap; }
.form4-data-row > span:last-child .class-track { width: 100%; min-width: 0; }
.form4-data-head { color: var(--muted); font-weight: var(--weight-semibold); }
.form4-data-head > span:last-child { display: block; }
.form4-separation { margin-top: var(--s-16); }
.form4-examples-head { display: flex; justify-content: space-between; align-items: flex-start;
gap: var(--s-16); margin: var(--s-32) 0 var(--s-8); }
.form4-methodology p { max-width: var(--s-840); }
@media (max-width: 600px) {
.form4-guide-page { padding-top: var(--page-pad-top); }
.form4-copy-grid, .form4-tool-links, .form4-lag-stats { grid-template-columns: 1fr; }
.form4-lag-chart, .form4-bin-table, .form4-class-chart { display: none; }
.lag-mobile-list, .class-mobile-list { display: block; }
.lag-mobile-list > div, .class-mobile-list a { display: flex; justify-content: space-between;
gap: var(--s-12); padding: var(--s-12) 0; border-bottom: var(--border-w) solid var(--line); }
.class-mobile-list a { color: var(--body); }
.class-mobile-list a:hover { color: var(--ink); text-decoration: none; }
.form4-mapping { min-width: var(--s-320); }
.form4-data-row { grid-template-columns: var(--s-96) minmax(var(--s-160), 1fr) var(--s-96); }
.form4-data-row > span:last-child { grid-template-columns: minmax(0, 1fr); gap: var(--s-4); }
.form4-data-row > span:last-child strong { justify-self: end; }
.form4-examples-head { flex-direction: column; }
}
.blur-gate-demo { min-height: var(--s-220); }
.blur-gate-demo .chart-panel { min-height: var(--s-220); }
.blur-gate-demo-rows { width: min(var(--s-420), 80%); padding: var(--s-24); }
.auth-status { padding-block: var(--s-48); }
.auth-status .card { max-width: var(--s-640); margin-inline: auto; }
.auth-status h1 { margin-bottom: var(--s-12); }
.auth-status p + p { margin-top: var(--s-16); }
/* ---------- "New since your last visit" strip (brand.md §5.10) ---------- */
.new-since { background: var(--surface); border-radius: var(--radius); padding: var(--s-12) var(--s-16);
display: flex; align-items: center; gap: var(--s-16); justify-content: space-between; flex-wrap: wrap; }
/* ---------- Chart (brand.md §6). The tooltip is a SIBLING of .chart-panel inside .chart-shell
and floats INSIDE the panel, in the lower flow-band region below the price lane and beside
the hovered column: it never occludes the price line and never flips the hover target
mid-hover (recon §b regression list; sc_chart_study placement). ---------- */
.chart-shell { position: relative; min-width: 0; max-width: 100%; }
.chart-panel { background: var(--chart-bg); border: var(--border-w) solid var(--line);
border-radius: var(--radius); box-shadow: var(--shadow); position: relative; overflow: hidden;
width: 100%; max-width: 100%; height: var(--chart-h); isolation: isolate; }
.chart-panel.position-variant { height: var(--chart-h-pos); }
.chart-panel svg { display: block; width: 100%; height: 100%; }
.chart-ranges { position: absolute; top: var(--s-12); right: var(--s-16); display: flex; gap: var(--s-12); z-index: 2; }
/* Reserve a clear band above the plot for the absolutely-positioned range tabs so they sit
HIGHER, off the graph — applied wherever the shared control appears, so every chart matches. */
.chart-shell:has(.chart-ranges) { padding-top: var(--s-56); }
.chart-ranges button:not(.btn-gold):not(.btn-quiet) { min-width: var(--control-h); min-height: var(--control-h); background: var(--surface);
border: var(--border-w) solid transparent; border-radius: var(--radius-sm);
color: var(--body); font-size: var(--t-ui-sm); font-weight: var(--weight-semibold); padding: var(--s-4) var(--s-8); }
.chart-ranges a, .chart-ranges summary { display: inline-flex; align-items: center; justify-content: center;
min-width: var(--control-h); min-height: var(--control-h); background: var(--surface);
border: var(--border-w) solid transparent; border-radius: var(--radius-sm);
color: var(--body); font-size: var(--t-ui-sm); font-weight: var(--weight-semibold);
padding: var(--s-4) var(--s-8); text-decoration: none; cursor: pointer; list-style: none; }
.chart-ranges summary::-webkit-details-marker { display: none; }
.chart-ranges button:not(.btn-gold):not(.btn-quiet):hover { background: var(--surface-strong); color: var(--ink); }
.chart-ranges a:hover, .chart-ranges summary:hover { background: var(--surface-strong); color: var(--ink); }
.chart-ranges button:not(.btn-gold):not(.btn-quiet):active { background: var(--surface-strong); }
.chart-ranges a:active, .chart-ranges summary:active { background: var(--surface-strong); }
.chart-ranges button:not(.btn-gold):not(.btn-quiet):disabled,
.chart-ranges button:not(.btn-gold):not(.btn-quiet)[aria-disabled="true"] { cursor: not-allowed; opacity: var(--disabled-opacity); }
.chart-ranges a[aria-disabled="true"], .chart-ranges summary[aria-disabled="true"] { cursor: not-allowed; opacity: var(--disabled-opacity); pointer-events: none; }
.chart-ranges button:not(.btn-gold):not(.btn-quiet).active,
.chart-ranges a.active, .chart-ranges summary.active {
color: var(--ink); background: var(--surface);
border-color: var(--line); font-weight: var(--weight-semibold);
}
.chart-ranges .date-control { position: relative; }
.chart-ranges .date-card { position: absolute; right: 0; top: calc(100% + var(--s-8)); z-index: 6; min-width: var(--s-320); background: var(--bg); border: var(--border-w) solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow-pop); padding: var(--s-12); display: grid; gap: var(--s-8); }
.chart-ranges details.date-control:not([open]) > .date-card { display: none; }
.chart-note { position: absolute; left: var(--s-16); bottom: var(--s-8); font-size: var(--t-label-s); color: var(--muted); z-index: 2; }
/* Bounded two-column quarter summary. Desktop positioning is clamped inside the plot in chart.js;
mobile keeps the selected-quarter card below the chart. */
.chart-tip { position: absolute; background: var(--bg); border: var(--border-w) solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow-pop);
width: var(--chart-tip-w); padding: var(--s-16); display: none; z-index: 5; pointer-events: auto;
overflow: visible; transition: left var(--motion-fast) ease-out, top var(--motion-fast) ease-out; }
.chart-tip.is-expanded { max-height: var(--s-360); overflow: hidden; }
/* CHARTS lane handoff (2026-07-20): stock price hover stays in the SVG; fund-flow detail is a panel below it, minimal color. */
.chart-shell > .chart-tip.stock-flow-tip {
position: static;
width: min(100%, var(--chart-tip-w));
margin: var(--s-8) auto 0;
color: var(--body);
transition: none;
}
.chart-tip.stock-flow-tip .flow-summary-head,
.chart-tip.stock-flow-tip .flow-summary-context,
.chart-tip.stock-flow-tip .flow-summary-detail,
.chart-tip.stock-flow-tip .flow-summary-detail a,
.chart-tip.stock-flow-tip .flow-summary-detail .num,
.chart-tip.stock-flow-tip .tip-remainder {
color: var(--body);
}
.chart-tip.stock-flow-tip .flow-summary-value.buy { color: var(--buy); }
.chart-tip.stock-flow-tip .flow-summary-value.sell { color: var(--sell); }
.chart-tip.is-expanded .tip-scroll { max-height: var(--s-240); overflow-y: auto; overscroll-behavior: contain; padding-right: var(--s-4); }
.chart-tip h3 { margin-bottom: var(--s-8); }
.chart-tip .tsides { display: flex; gap: var(--s-16); }
.chart-tip .tcol { flex: 1 1 0; min-width: 0; }
.chart-tip .tline { display: flex; justify-content: space-between; gap: var(--s-8); font-size: var(--t-small-s); padding: var(--px-3) 0; align-items: baseline; }
.chart-tip .tline > :first-child { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.chart-tip .tline .num { flex: none; }
.chart-tip .tip-remainder { color: var(--muted); padding-top: var(--px-3); }
.chart-tip .tip-actions { display: flex; align-items: center; justify-content: space-between; gap: var(--s-16); margin-top: var(--s-12); padding-top: var(--s-8); border-top: var(--border-w) solid var(--line); }
.chart-tip .chart-tip-more { padding: 0; border: 0; background: transparent; color: var(--link); font: inherit; font-weight: var(--weight-semibold); cursor: pointer; }
.chart-tip .chart-tip-all { margin-left: auto; font-weight: var(--weight-semibold); white-space: nowrap; }
.chart-tip .thead { font-size: var(--t-small-s); font-weight: var(--weight-bold); margin-top: var(--s-8); }
.chart-tip .thead.b { color: var(--buy); } .chart-tip .thead.s { color: var(--sell); }
@media (max-width: 600px) {
/* Tap = hover; the tooltip becomes a full-width sheet below the panel, columns stacked. */
.chart-tip { position: static; width: 100%; margin-top: var(--s-8); border: var(--border-w) solid var(--line); box-shadow: var(--shadow); overflow: visible; transition: none; }
.chart-tip .tsides { flex-direction: column; gap: 0; }
}
/* ---------- shared date controls and compact insider summaries ---------- */
.range-control { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-8); }
.range-control { position: relative; align-items: flex-end; margin-bottom: var(--s-16); }
.date-control { position: relative; }
.date-control > summary { list-style: none; cursor: pointer; }
.date-control > summary::-webkit-details-marker { display: none; }
.date-card { position: static; display: flex; align-items: flex-end; flex-wrap: wrap;
gap: var(--s-8); min-width: 0; padding: 0; background: transparent; border: 0;
border-radius: 0; box-shadow: none; }
.inline-range-form { flex: 1 1 var(--s-620); min-width: min(100%, var(--s-620)); flex-wrap: nowrap; }
.date-card .fld { flex: 0 1 var(--s-190); min-width: 0; }
.inline-range-form .fld { flex: 1 1 var(--s-190); }
.date-card input, .date-card select { height: var(--control-h); min-width: 0; padding: 0 var(--s-8); border: var(--border-w) solid var(--control-border);
border-radius: var(--radius-sm); color: var(--ink); background: var(--bg); font-family: var(--font); }
.date-card input:hover, .date-card select:hover { border-color: var(--muted); }
.date-card input:focus-visible, .date-card select:focus-visible { border-color: var(--muted); outline: var(--focus-ring-w) solid var(--line); outline-offset: var(--px-2); }
.temporal-arrow { align-self: center; color: var(--muted); margin-top: var(--s-16); }
.tracker-summary { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--card-gap);
margin-top: var(--s-16); }
.tracker-summary > div { display: flex; flex-direction: column; gap: var(--s-4);
padding: var(--pad-card); background: var(--surface); border-radius: var(--radius); }
.tracker-summary strong { color: var(--ink); font-size: var(--t-h3-s); font-variant-numeric: tabular-nums; }
.tracker-summary .t-small { color: var(--muted); }
@media (max-width: 600px) {
.range-control { flex-wrap: wrap; overflow-x: visible; }
.range-control .range-tabs { width: 100%; flex-wrap: nowrap; overflow-x: auto;
padding-bottom: var(--s-4); scrollbar-width: thin; }
.date-card { position: static; left: auto; right: auto; top: auto;
flex-direction: row; align-items: flex-end; width: 100%; }
.inline-range-form { flex-basis: 100%; min-width: 0; flex-wrap: wrap; }
.date-card .fld { flex: 1 1 var(--s-120); width: auto; }
.date-card input, .date-card select { width: 100%; }
.tracker-summary { grid-template-columns: 1fr; gap: var(--s-8); }
.tracker-summary > div { padding: var(--s-12); }
.chart-ranges.stock-range-control { left: var(--s-8); right: var(--s-8); max-width: calc(100% - 2 * var(--s-8)); gap: var(--s-4); }
.stock-range-tabs { gap: var(--s-4); }
.chart-ranges.stock-range-control :is(button, summary) { min-width: 0; padding: var(--s-4) var(--px-6); }
}
/* ---------- Stock page ---------- */
.stock-head h1 { margin-bottom: var(--s-12); }
.stock-title-lockup { display: flex; align-items: flex-start; gap: var(--s-16); }
.stock-title-lockup > div { min-width: 0; }
.stock-title-main { flex: 1 1 auto; }
.stock-title-main > .meta-row {
margin-top: var(--s-8);
align-items: flex-start;
column-gap: var(--s-20);
row-gap: var(--s-8);
}
.stock-title-main > .meta-row .meta-item {
line-height: var(--t-body-l);
}
.stock-hero-heading-row { display: grid; grid-template-columns: minmax(0, 1fr) auto;
align-items: start; gap: var(--s-16); min-width: 0; }
.stock-hero-heading-row h1 { min-width: 0; margin-bottom: 0; }
.stock-company-name, .stock-ownership-kicker { display: block; }
.stock-ownership-kicker { color: var(--body); font-size: var(--t-h3-s); line-height: var(--t-h3-l);
font-weight: var(--weight-semibold); letter-spacing: normal; }
.stock-price-row { display: grid; grid-template-columns: auto auto; align-items: baseline;
justify-items: end; gap: var(--s-4) var(--s-8); text-align: right; white-space: nowrap; }
.stock-price-row .t-stat { font-size: var(--t-h3-s); line-height: var(--t-h3-l); }
.stock-price-row .t-small { grid-column: 1 / -1; }
.stock-answer-owner-list { display: grid; gap: var(--s-8); }
[data-stock-answer-items] { align-items: start; }
.stock-answer-owner-row, .stock-answer-owner-row .entity-cell { min-width: 0; }
.stock-answer-owner-row .entity-cell { display: flex; width: 100%; }
.stock-answer-owner-row .entity-mark { flex: 0 0 auto; }
.stock-answer-owner-row .cell-text {
display: block; flex: 1 1 auto; min-width: 0; max-width: 100%; overflow: hidden;
text-overflow: ellipsis; white-space: nowrap;
}
.stock-answer-owner-actions { display: flex; align-items: center; justify-content: space-between;
gap: var(--s-12); margin-top: var(--s-8); }
.stock-answer-owner-toggle { appearance: none; border: 0; padding: 0; background: transparent;
color: var(--link); cursor: pointer; font-size: var(--t-small-s); line-height: var(--t-small-l);
font-weight: var(--weight-semibold); text-align: left; }
.stock-answer-owner-toggle:hover, .stock-answer-owner-see-all:hover { text-decoration: underline; }
.stock-answer-owner-see-all { color: var(--link); font-size: var(--t-small-s);
line-height: var(--t-small-l); font-weight: var(--weight-semibold); white-space: nowrap; }
.stock-answer-owner-actions + .t-small { margin-top: var(--s-4); }
.meta-row { display: flex; align-items: center; flex-wrap: wrap; gap: var(--s-16); }
.meta-item { display: inline-flex; align-items: baseline; gap: var(--s-8); }
.meta-item .mv { color: var(--ink); font-weight: var(--weight-semibold); }
.stock-range-item { align-items: flex-start; }
.stock-range-slider { display: grid; gap: var(--s-4); width: var(--stock-range-width);
min-width: var(--stock-range-width); }
.stock-range-labels { display: flex; align-items: center; justify-content: space-between;
color: var(--ink); font-size: var(--t-mini); line-height: var(--line-solid); }
/* 52-week range, CNN-style: neutral track with the low->current portion filled, and a
clear marker dot at the current price (fill % comes from --range-position on the track). */
.stock-range-track { position: relative; display: block; width: 100%;
height: var(--stock-range-track-height); margin-top: var(--s-4); border-radius: var(--radius-pill);
background: linear-gradient(to right,
var(--chart-price) 0, var(--chart-price) var(--range-position, 0%),
var(--surface-strong) var(--range-position, 0%), var(--surface-strong) 100%); }
.stock-range-dot { position: absolute; top: 50%;
left: clamp(calc(var(--stock-range-dot-size) / 2), var(--range-position), calc(100% - var(--stock-range-dot-size) / 2));
width: var(--stock-range-dot-size); height: var(--stock-range-dot-size);
border: var(--px-2) solid var(--bg); border-radius: var(--radius-pill); background: var(--chart-price);
box-shadow: var(--shadow-hover); transform: translate(-50%, -50%); }
.chart-static { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 1; }
.stock-page section { margin: var(--sect-gap) 0; }
.stock-page :is(#insider-trades, #large-shareholders) > .chart-ranges {
position: relative;
top: auto;
right: auto;
justify-content: flex-start;
margin-bottom: var(--s-16);
}
.stock-range-tabs { display: flex; gap: inherit; }
/* Ownership composition stacked bar (monochrome ramp: green/red are buy/sell only, gold is
the single accent, so holder-type shading uses the ink -> surface ramp, brand.md §2). */
.comp-bar { display: flex; height: var(--s-24); border-radius: var(--radius-mark); overflow: hidden; border: var(--border-w) solid var(--line); gap: var(--mark-surface-gap); background: var(--chart-bg); }
.comp-seg { display: flex; align-items: center; justify-content: center; height: 100%; width: var(--segment-width); color: var(--bg); font-size: var(--t-tick); font-weight: var(--weight-regular); overflow: hidden; }
.comp-seg.seg-b, .comp-seg.seg-d { color: var(--ink); }
.comp-seg.seg-a, .leg-sw.seg-a { background: var(--series-1); }
.comp-seg.seg-b, .leg-sw.seg-b { background: var(--series-7); }
.comp-seg.seg-c, .leg-sw.seg-c { background: var(--series-3); }
.comp-seg.seg-d, .leg-sw.seg-d { background: var(--series-other); }
.comp-legend { display: flex; flex-wrap: wrap; gap: var(--s-16); margin-top: var(--s-12); }
/* Breathing room between the composition legend and the holder-card grid below it. */
[data-holder-card-grid] { margin-top: var(--s-24); }
.leg-item { display: inline-flex; align-items: center; gap: var(--s-8); }
.leg-sw { width: var(--s-12); height: var(--s-12); border-radius: var(--radius-mark); border: var(--border-w) solid var(--line); }
.series-slot-1 { background: var(--series-1); }
.series-slot-2 { background: var(--series-2); }
.series-slot-3 { background: var(--series-3); }
.series-slot-4 { background: var(--series-4); }
.series-slot-5 { background: var(--series-5); }
.series-slot-6 { background: var(--series-6); }
.series-slot-7 { background: var(--series-7); }
.series-slot-8 { background: var(--series-8); }
.series-slot-9 { background: var(--series-other); }
.series-slot-other { background: var(--series-other); }
.leg-item b { color: var(--ink); }
/* Buy/sell flow-lane legend (audit2 F5). The paired colour swatches read against the copy so a
first-time visitor knows green = bought above the baseline, red = sold below it. */
.flow-legend { display: flex; align-items: center; flex-wrap: wrap; gap: var(--s-16); margin-top: var(--s-12); }
.flow-legend .leg-item { display: inline-flex; align-items: center; gap: var(--s-4); }
.leg-hint { color: var(--muted); }
.cap-sw { display: inline-block; width: var(--s-12); height: var(--s-8); border-radius: var(--radius-mark); }
.cap-sw.up { background: var(--chart-positive); }
.cap-sw.down { background: var(--chart-negative); }
/* Money-flow rows retained by active portfolio/stock surfaces. */
.flow-narr { max-width: var(--s-760); margin-bottom: var(--s-8); }
.flow-bars { margin-top: var(--s-16); display: flex; flex-direction: column; gap: var(--s-8); }
.flow-bar-row { display: grid; grid-template-columns: var(--s-160) 1fr var(--s-120); align-items: center; gap: var(--s-12); }
.fbtrack { position: relative; height: var(--s-12); background: var(--surface); border-radius: var(--radius-pill); overflow: hidden; }
.fbfill { position: absolute; top: 0; left: 50%; height: 100%; width: var(--bar-width); }
.fbfill.pos { background: var(--chart-positive); left: 50%; }
.fbfill.neg { background: var(--chart-negative); transform: translateX(-100%); }
.fbv { text-align: right; color: var(--body); }
/* Famous investors + related */
.fam-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); max-width: 100%; }
.fam-card, .rel-card { display: block; }
.fam-card { min-width: 0; }
.fam-card .holder-card-identity { display: flex; min-width: 0; max-width: 100%; }
.fam-card .holder-card-identity h3 { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fam-card .fam-card-title { display: flex; flex: 1 1 auto; align-items: baseline; }
/* Clear hierarchy: value is the primary metric (spaced off the ticker), weight a labelled
muted subline ("22.0% of portfolio") so it's obvious what each number means. */
.fam-card .val { margin-top: var(--s-8); font-size: var(--t-h3-s); line-height: var(--t-h3-l); font-weight: var(--weight-bold); color: var(--ink); }
.fam-card-weight { margin-top: var(--px-2); color: var(--muted); font-size: var(--t-small-s); font-weight: var(--weight-regular); }
.fam-status { margin-top: var(--s-4); font-weight: var(--weight-semibold); }
.fam-value { margin-top: var(--s-8); color: var(--muted); }
.fam-value .num { color: var(--ink); font-weight: var(--weight-semibold); }
.card-destination { margin-top: var(--s-8); color: var(--link); font-weight: var(--weight-semibold); }
.holder-card-cue { flex: none; color: var(--link); font-weight: var(--weight-semibold); }
.rel-card h3 { margin-bottom: var(--s-8); }
/* Missing-data substitutes */
.subs { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--card-gap); }
.sub-card h3 { margin-bottom: var(--s-8); }
.method-p { max-width: var(--s-760); margin-bottom: var(--s-12); }
@media (max-width: 900px) {
.subs { grid-template-columns: 1fr; }
.flow-bar-row { grid-template-columns: var(--s-120) 1fr var(--s-96); }
}
/* ---------- Hero (homepage) ---------- */
.hero { padding: var(--hero-pad-top) 0 var(--hero-pad-bottom); text-align: center; }
.hero-eyebrow { margin-bottom: var(--s-12); }
.hero .sub { max-width: var(--s-620); margin: var(--s-16) auto 0; }
/* ---------- Footer ---------- */
footer { background: var(--navy); color: var(--on-dark-60); margin-top: var(--footer-gap); padding: var(--s-40) 0; font-size: var(--t-small-s); line-height: var(--t-small-l); }
footer .cols { display: grid; grid-template-columns: 1fr 1fr 1.25fr 1.25fr 1.5fr; gap: var(--s-24); }
footer a { color: var(--on-dark-75); text-decoration: none; }
footer a:hover { color: var(--bg); text-decoration: underline; }
footer a:focus-visible { color: var(--bg); outline: var(--focus-ring-w) solid var(--gold);
outline-offset: var(--px-2); text-decoration: underline; }
footer .t-label { color: var(--on-dark-50); margin-bottom: var(--s-8); }
footer li { padding: var(--px-3) 0; }
footer .fbrand { color: var(--on-dark-92); font-weight: var(--weight-heavy); font-size: var(--t-h3-s); display: flex; gap: var(--s-12); align-items: center; margin-bottom: var(--s-12); }
.footer-freshness { margin-top: var(--s-12); }
.footer-legal { margin-top: var(--s-12); font-size: var(--t-small-s); }
/* Legal links match every other footer link (was --muted, low-contrast + inconsistent). */
.seo-placeholder { max-width: var(--s-760); }
.placeholder-links { display: flex; gap: var(--s-12); flex-wrap: wrap; }
/* ---------- 404 / empty states ---------- */
.err-page { padding: var(--s-48) 0; text-align: center; }
.nodata { background: var(--surface); border-radius: var(--radius); padding: var(--pad-card); }
/* ---------- /brand styleguide: demo-only selectors live in css/brand.css (dev-gated). .tab-strip/.tab stay: portfolio.html uses them. ---------- */
.tab-strip { background: var(--surface); border: var(--border-w) solid var(--line); border-radius: var(--radius); padding: var(--s-8); display: flex; gap: var(--s-8); overflow-x: auto; }
.tab { background: var(--bg); border: var(--border-w) solid var(--line); border-radius: var(--radius-sm) var(--radius-sm) 0 0; padding: var(--s-4) var(--s-12);
display: inline-flex; align-items: center; gap: var(--s-8); font-size: var(--t-tick); color: var(--body); white-space: nowrap; }
/* ===================== phase 3 portfolio + position pages ===================== */
.portfolio-page section, .position-page section { margin: var(--sect-gap) 0; }
.portfolio-hero-layout { display: flex; align-items: center; justify-content: space-between; gap: var(--s-32); }
.portfolio-hero-layout [data-portfolio-hero-identity] { flex: 1 1 auto; min-width: 0; gap: var(--s-24); }
.portfolio-hero-layout .stock-hero-logo { width: var(--s-120); height: var(--s-120); flex: 0 0 var(--s-120); }
.portfolio-hero-copy { min-width: 0; }
.portfolio-hero-copy h1 { margin: 0 0 var(--s-8); }
.portfolio-hero-copy p { margin: 0; }
.portfolio-hero-copy p + p { margin-top: var(--s-4); }
.portfolio-hero-total { display: flex; flex: 0 0 auto; flex-direction: column; align-items: flex-end; text-align: right; }
.portfolio-performance { margin-top: var(--s-20); padding-top: var(--s-16); border-top: var(--border-w) solid var(--line); }
.portfolio-performance-title { color: var(--ink); font-size: var(--t-ui-sm); font-weight: var(--weight-semibold); }
.portfolio-performance dl { display: grid; grid-template-columns: repeat(3, minmax(var(--s-120), 1fr)); gap: var(--s-16); margin-top: var(--s-8); }
.portfolio-performance dl > div { display: grid; gap: var(--s-4); }
/* Horizon label (YTD/1Y/3Y) more prominent: darker + semibold, not faint muted. */
.portfolio-performance dt { color: var(--body); font-size: var(--t-label-s); font-weight: var(--weight-semibold); }
.portfolio-performance dd { color: var(--ink); font-size: var(--t-h3-s); font-weight: var(--weight-semibold); }
.portfolio-performance-benchmark { color: var(--muted); font-size: var(--t-label-s); }
.portfolio-performance :is(dd, .portfolio-performance-benchmark).change-positive { color: var(--buy); }
.portfolio-performance :is(dd, .portfolio-performance-benchmark).change-negative { color: var(--sell); }
.perf-vs { color: var(--muted); font-weight: var(--weight-regular); }
.portfolio-performance > .t-small { margin-top: var(--s-8); color: var(--muted); }
.portfolio-hero-facts { display: flex; justify-content: flex-end; gap: var(--s-32); margin: var(--s-16) 0 0; }
.portfolio-hero-facts > div { text-align: right; }
.portfolio-hero-facts dd { margin-top: var(--s-4); color: var(--ink); font-weight: var(--weight-semibold); }
.pf-head h1, .pos-head h1 { margin-bottom: var(--s-16); }
.pf-stats, .pos-stats { margin-top: var(--s-8); }
.position-page > .breadcrumb { margin-top: var(--s-32); margin-bottom: var(--s-20); color: var(--muted); }
.breadcrumb a { color: var(--link); }
.position-portfolio-link { display: inline-block; margin-top: var(--s-12); font-size: var(--t-ui-sm); font-weight: var(--weight-semibold); }
.sortbtn { display: inline-flex; align-items: center; justify-content: center; min-height: var(--control-h);
background: var(--surface); border: var(--border-w) solid transparent; border-radius: var(--radius-sm);
padding: var(--s-4) var(--s-12); font-size: var(--t-ui-sm); font-weight: var(--weight-semibold); color: var(--body); }
.sortbtn:hover { background: var(--surface-strong); color: var(--ink); }
.sortbtn:active { background: var(--surface-strong); }
.sortbtn:disabled, .sortbtn[aria-disabled="true"] { cursor: not-allowed; opacity: var(--disabled-opacity); }
.tab.active, .sortbtn.active, .chip-btn.active, .insider-page-horizon.active,
[data-view-toggle].active, .view-toggle.active {
background: var(--active-chip-bg); color: var(--active-chip-ink);
border-color: var(--active-chip-border); font-weight: var(--weight-semibold);
}
section[data-module="portfolio-holdings"] .filter-form { margin-bottom: var(--s-16); }
section[data-module="portfolio-holdings"] .filter-form select {
height: calc(var(--control-h) - var(--px-2)); padding-block: 0;
}
.portfolio-holdings-component .tbl-wrap { overflow-x: visible; }
table.portfolio-holdings-table { width: 100%; min-width: 0; max-width: 100%; table-layout: fixed; }
.portfolio-holdings-table th:nth-child(1) { width: 26%; }
.portfolio-holdings-table th:nth-child(2) { width: 10%; }
.portfolio-holdings-table th:nth-child(3),
.portfolio-holdings-table th:nth-child(4),
.portfolio-holdings-table th:nth-child(5) { width: 14%; }
.portfolio-holdings-table th:nth-child(6) { width: 22%; }
.portfolio-holdings-table tr[data-holding-parent] { height: var(--s-56); }
.portfolio-holdings-table tr[data-holding-parent] > td { height: auto;
padding: var(--holding-row-pad-y) var(--s-12); white-space: normal; }
.portfolio-holding-parent { scroll-margin-top: calc(var(--header-h) + var(--s-12)); }
.portfolio-holding-parent[data-holding-row-control] { cursor: pointer; }
.portfolio-holding-parent[data-holding-row-control]:hover { background: var(--surface); }
.portfolio-holding-parent.is-selected { background: var(--surface-strong); box-shadow: inset var(--px-3) 0 var(--link); }
.portfolio-holdings-table td[data-field="entity"] > .entity-cell { width: 100%; min-width: 0; }
.portfolio-holding-identity { display: flex; flex: 1 1 auto; flex-direction: column;
min-width: 0; max-width: 100%; }
.portfolio-holding-disclosure { display: flex; align-items: center; gap: var(--s-8);
width: 100%; min-width: 0; min-height: var(--s-44); padding: 0; margin: 0;
border-radius: var(--radius-sm); font-weight: var(--weight-semibold); text-decoration: none; }
.portfolio-holding-disclosure:focus-visible { outline: var(--focus-ring-w) solid var(--link); outline-offset: var(--px-2); }
.portfolio-holding-disclosure[aria-expanded="true"] { color: var(--ink); }
.portfolio-holding-name { display: block; min-width: 0; overflow: hidden; text-overflow: ellipsis;
white-space: nowrap; color: var(--table-primary-link); font-weight: var(--weight-semibold); }
.portfolio-holding-disclosure .portfolio-holding-identity { flex: 1 1 auto; }
.portfolio-holding-industry { display: block; margin: 0; overflow: hidden;
color: var(--muted); font-size: var(--t-label-s); line-height: var(--t-label-l);
text-overflow: ellipsis; white-space: nowrap; }
.holding-pin-note { display: block; margin-top: var(--s-4); color: var(--muted); line-height: var(--line-compact); }
.holding-gain-bridge { display: inline-flex; align-items: center; justify-content: flex-end;
gap: var(--s-4); white-space: nowrap; font-weight: var(--weight-regular); }
.holding-transaction { display: inline-flex; align-items: flex-start; flex-direction: column;
gap: var(--px-2); min-width: 0; }
.holding-transaction-magnitude { color: var(--muted); font-size: var(--t-label-s);
line-height: var(--t-label-l); white-space: nowrap; }
.portfolio-holdings-table .change-positive { color: var(--buy); }
.portfolio-holdings-table .change-negative { color: var(--sell); }
table.portfolio-holdings-table .portfolio-holding-detail-row > td {
height: auto; padding: 0; border-bottom-color: var(--line);
}
.portfolio-holding-detail { padding: var(--s-24); background: var(--surface); }
.portfolio-holding-detail-head { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--s-16); }
.portfolio-holding-detail-head h3 { margin-bottom: var(--s-4); }
.portfolio-holding-stats-band { display: grid; grid-template-columns: minmax(0, 1fr); align-items: start;
gap: var(--s-20); margin: var(--s-16) 0; padding: var(--s-16); border: var(--border-w) solid var(--line);
border-radius: var(--radius); background: var(--bg); }
.portfolio-holding-stats-band > dl { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: var(--s-16); margin: 0; }
.portfolio-holding-stats-band dl > div { display: flex; min-width: 0; flex-direction: column; align-items: flex-start; text-align: left; }
.portfolio-holding-stats-band dt { color: var(--muted); font-size: var(--t-mini); }
.portfolio-holding-stats-band dd { margin-top: var(--s-4); color: var(--ink); font-weight: var(--weight-semibold); overflow-wrap: anywhere; }
.stat-subline, .basis-estimate-note { display: block; margin-top: var(--px-2); color: var(--muted); font-size: var(--t-label-s); line-height: var(--t-label-l); font-weight: var(--weight-regular); }
.portfolio-holdings-table .basis-estimate-note { text-align: right; }
.portfolio-holding-band-actions { display: flex; justify-content: flex-end; gap: var(--s-8); white-space: nowrap; }
/* Portfolio over time (stacked-area panel) */
.area-panel { height: var(--area-chart-h); }
.area-panel .chart-static { position: absolute; inset: 0; }
.area-legend { display: flex; flex-wrap: wrap; gap: var(--s-16); margin-top: var(--s-12); }
.area-legend .leg-item { display: inline-flex; align-items: center; gap: var(--s-4); border: 0; background: transparent; color: var(--ink); padding: 0; font: inherit; }
/* M28 manager latest-quarter diverging bars. */
.portfolio-quarter-control, .portfolio-range-control { display: flex; align-items: flex-end; flex-wrap: wrap; gap: var(--s-12); margin-bottom: var(--s-16); }
.manager-actions { margin: 0; }
.manager-actions figcaption { color: var(--muted); margin-bottom: var(--s-12); }
.manager-action-head, .manager-action-row { display: grid; grid-template-columns: minmax(var(--s-240), 30%) minmax(0, 1fr) minmax(0, 1fr) var(--s-120); align-items: center; }
.manager-action-head { color: var(--muted); font-size: var(--t-small-s); }
.manager-action-head span:first-child { grid-column: 2; text-align: right; padding-right: var(--s-8); }
.manager-action-head span:last-child { grid-column: 3; padding-left: var(--s-8); }
.manager-action-row { min-height: var(--row-h); color: var(--ink); border-bottom: var(--border-w) solid var(--line); }
a.manager-action-row:hover { background: var(--surface-strong); text-decoration: none; }
a.manager-action-row:focus-visible { outline: var(--focus-ring-w) solid var(--link); outline-offset: var(--px-2); }
a.manager-action-row:active { background: var(--surface-strong); }
.manager-action-row .action-label, .manager-action-row .portfolio-stock-name,
.manager-action-row .portfolio-stock-ticker { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; padding-right: var(--s-8); color: var(--ink); }
.manager-action-row em { font-style: normal; font-size: var(--t-mini); font-weight: var(--weight-regular); background: var(--buy-soft); border-radius: var(--radius-pill); padding: var(--px-2) var(--s-4); }
.manager-action-row.sell em { background: var(--sell-soft); }
.action-half { height: var(--s-16); position: relative; }
.action-half.left { border-right: var(--border-w) solid var(--chart-baseline); }
.action-half i { position: absolute; top: 0; height: 100%; width: var(--bar-width); }
.manager-action-row.buy .action-half.right i { left: 0; background: var(--buy); }
.manager-action-row.sell .action-half.left i { right: 0; background: var(--sell); }
.manager-action-row strong { text-align: right; font-weight: var(--weight-regular); }
.manager-action-row.buy strong { color: var(--buy); }
.manager-action-row.sell strong { color: var(--sell); }
/* Portfolio-only information hierarchy and optional composition view. */
.portfolio-unpriced-label { margin-top: var(--s-24); }
.portfolio-new-positions { margin-top: var(--s-24); }
.portfolio-new-list { display: flex; flex-wrap: wrap; gap: var(--s-8); }
.portfolio-new-chip { display: inline-flex; align-items: center; gap: var(--s-8); min-height: var(--control-h); padding: var(--s-4) var(--s-12); border-radius: var(--radius-sm); background: var(--buy-soft); color: var(--ink); font-weight: var(--weight-semibold); }
.portfolio-new-chip[href]:hover { text-decoration: none; filter: none; background: var(--buy-wash); }
.portfolio-new-chip[href]:focus-visible { outline: var(--focus-ring-w) solid var(--link); outline-offset: var(--px-2); }
.portfolio-new-chip[href]:active { filter: var(--button-active-filter); }
.disclosure-chevron { list-style: none; }
.disclosure-chevron::-webkit-details-marker { display: none; }
.disclosure-chevron::after, .portfolio-holding-chevron {
content: ""; display: block; width: var(--s-12); height: var(--s-12); flex: 0 0 var(--s-12);
border-right: var(--focus-ring-w) solid currentColor; border-bottom: var(--focus-ring-w) solid currentColor;
transform: rotate(45deg); transition: transform var(--motion-fast) ease;
}
details[open] > .disclosure-chevron::after,
.portfolio-holding-disclosure[aria-expanded="true"] .portfolio-holding-chevron { transform: rotate(225deg); }
.portfolio-activity-details { border-top: var(--border-w) solid var(--line); border-bottom: var(--border-w) solid var(--line); padding: var(--s-16) 0; }
.portfolio-activity-details > summary { display: flex; align-items: center; justify-content: space-between; gap: var(--s-16); min-height: var(--control-h); padding: var(--s-8); border-radius: var(--radius-sm); cursor: pointer; transition: color var(--motion-fast) ease, background-color var(--motion-fast) ease; }
.portfolio-activity-details > summary:hover { color: var(--ink); background: var(--surface-strong); }
.portfolio-activity-details > summary:focus-visible { outline: var(--focus-ring-w) solid var(--link); outline-offset: var(--px-2); }
.portfolio-activity-details > summary:active { background: var(--surface-strong); }
.portfolio-activity-details > summary h2 { margin: 0; }
.portfolio-activity-content { margin-top: var(--s-16); }
.portfolio-composition-note { margin: var(--s-16) 0; color: var(--muted); }
.portfolio-composition-grid { display: grid; grid-template-columns: minmax(var(--s-240), .8fr) minmax(0, 1.2fr); gap: var(--s-32); align-items: start; }
.portfolio-composition-pie-wrap { display: grid; position: relative; place-items: center; margin: 0; }
.portfolio-composition-pie { width: min(100%, var(--s-240)); height: auto; }
.portfolio-composition-pie [data-pie-slice] { cursor: help; pointer-events: stroke; }
.portfolio-composition-pie [data-pie-slice]:focus-visible { outline: none; stroke-width: var(--s-24); }
.portfolio-composition-tooltip { position: absolute; left: 50%; bottom: var(--s-4); z-index: 2; max-width: calc(100% - var(--s-16)); transform: translateX(-50%); padding: var(--s-4) var(--s-8); border: var(--border-w) solid var(--line); border-radius: var(--radius-sm); background: var(--bg); box-shadow: var(--shadow); color: var(--ink); font-size: var(--t-small-s); line-height: var(--t-small-l); white-space: nowrap; }
.portfolio-composition-table { display: grid; gap: var(--s-8); }
.portfolio-composition-row { display: grid; grid-template-columns: minmax(0, 1fr) var(--s-56); align-items: center; gap: var(--s-12); }
.portfolio-composition-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--ink); font-family: var(--font); font-weight: var(--weight-semibold); }
.portfolio-composition-name[href] { text-decoration: underline; text-underline-offset: var(--px-2); }
.portfolio-composition-weight { text-align: right; color: var(--ink); font-size: var(--t-ui-sm); font-weight: var(--weight-semibold); }
.portfolio-stock-identity { display: inline-flex; align-items: center; gap: var(--s-8); min-width: 0; max-width: 100%; }
.portfolio-stock-name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-family: var(--font); font-weight: var(--weight-semibold); }
.portfolio-stock-ticker { color: var(--muted); font-family: var(--font); font-weight: var(--weight-regular); }
.portfolio-area-tooltip-identity { display: inline-flex; align-items: center; gap: var(--s-8); min-width: 0; }
.portfolio-area-tooltip-identity > span:last-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* M29 limited-history adjacent-quarter weight comparison. */
.weight-comparison { margin: var(--s-16) 0 0; }
.weight-comparison figcaption { color: var(--muted); margin-bottom: var(--s-12); }
.weight-compare-row { display: grid; grid-template-columns: var(--s-160) minmax(var(--s-220), 1fr) var(--s-220); align-items: center; gap: var(--s-12); min-height: var(--row-h); border-bottom: var(--border-w) solid var(--line); color: var(--ink); }
a.weight-compare-row:hover { background: var(--surface-strong); text-decoration: none; }
a.weight-compare-row:focus-visible { outline: var(--focus-ring-w) solid var(--link); outline-offset: var(--px-2); }
a.weight-compare-row:active { background: var(--surface-strong); }
.dumbbell { position: relative; height: var(--s-24); }
.dumbbell i { position: absolute; top: 50%; transform: translate(-50%, -50%); }
.dumbbell .prior, .dumbbell .current { left: var(--dot-x); width: var(--s-12); height: var(--s-12); border-radius: 50%; z-index: 2; }
.dumbbell .prior { background: var(--bg); border: var(--mark-line-width) solid var(--ink); }
.dumbbell .current { background: var(--heat-3); }
.dumbbell .connector { left: var(--from-x); width: calc(var(--to-x) - var(--from-x)); height: var(--mark-line-width); background: var(--chart-grid); transform: translateY(-50%); }
.weight-compare-row .change-positive { color: var(--buy); font-weight: var(--weight-regular); }
.weight-compare-row .change-negative { color: var(--sell); font-weight: var(--weight-regular); }
/* More investors row */
.more-investors { display: flex; flex-wrap: wrap; gap: var(--s-8); }
.chip-link { display: inline-flex; align-items: center; min-height: var(--control-h); background: var(--surface); border: var(--border-w) solid transparent;
border-radius: var(--radius-sm); padding: var(--s-4) var(--s-12); font-size: var(--t-ui-sm);
font-weight: var(--weight-semibold); color: var(--body); }
.chip-link:hover { background: var(--surface-strong); color: var(--ink); text-decoration: none; }
.chip-link:active { background: var(--surface-strong); }
.chip-link[aria-disabled="true"], .chip-link.is-disabled { cursor: not-allowed; opacity: var(--disabled-opacity); pointer-events: none; }
.similar-investors { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s-12); }
.similar-investor-card { display: flex; min-width: 0; flex-direction: column; gap: var(--s-4); padding: var(--s-16); border: var(--border-w) solid var(--line); border-radius: var(--radius); color: var(--ink); background: var(--bg); }
.similar-investor-card:hover { background: var(--surface); text-decoration: none; }
.similar-investor-card strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.similar-investor-card span { color: var(--muted); font-size: var(--t-small-s); }
.portfolio-about-sources { margin-top: var(--s-12); }
/* ---------- Position chart: price-line transaction flags + selected detail strip. ---------- */
.pos-chart-shell .chart-panel.position-variant { height: var(--chart-h-pos); }
.pos-chart-shell > .chart-ranges { z-index: 4; }
.position-chart-scroll { overflow: visible; }
.pos-transaction-flag { cursor: pointer; outline: none; }
.position-flag-block { fill: var(--flag-chip-bg); stroke: var(--flag-chip-bg); stroke-width: var(--border-w); }
.position-flag-cap { fill: var(--muted); }
.pos-transaction-flag.buy .position-flag-cap { fill: var(--buy); }
.pos-transaction-flag.sell .position-flag-cap { fill: var(--sell); }
.position-flag-shares { fill: var(--bg); font-size: var(--t-tick); font-weight: var(--weight-bold); font-variant-numeric: tabular-nums; }
.position-flag-action, .position-earlier-counts { fill: var(--surface-strong); font-size: var(--t-mini); }
.position-earlier-label { fill: var(--bg); font-size: var(--t-tick); font-weight: var(--weight-semibold); }
.pos-transaction-flag:hover .position-flag-block,
.pos-transaction-flag:focus .position-flag-block,
.pos-transaction-flag.is-selected .position-flag-block { stroke: var(--chart-price); stroke-width: var(--focus-ring-w); }
.pos-summary { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: var(--s-24);
margin-top: 0; padding: var(--s-16) var(--s-20); background: var(--surface); border-radius: 0 0 var(--radius) var(--radius); }
.pos-summary .ps-left { display: grid; gap: var(--s-4); min-width: 0; color: var(--ink); }
.pos-summary .ps-left::before { content: none; }
.pos-summary .ps-event { font-weight: var(--weight-semibold); }
.pos-summary .ps-quarter { color: var(--muted); font-size: var(--t-small-s); }
.pos-summary .ps-right { display: grid; grid-template-columns: repeat(2, minmax(var(--s-120), auto)); gap: var(--s-24); margin: 0; }
.pos-summary .ps-right div { min-width: 0; }
.pos-summary .ps-right dt { color: var(--muted); font-size: var(--t-mini); }
.pos-summary .ps-right dd { margin-top: var(--s-4); color: var(--ink); font-weight: var(--weight-semibold); white-space: nowrap; }
.position-known-prices { margin-top: var(--s-16); padding: var(--s-16); border-radius: var(--radius);
background: var(--surface); }
.position-known-prices h3 { margin-bottom: var(--s-12); }
.position-known-prices dl { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-16); }
.position-known-prices dt { color: var(--muted); font-size: var(--t-small-s); line-height: var(--t-small-l); }
.position-known-prices dd { margin-top: var(--s-4); color: var(--body); }
.position-known-prices ul { display: grid; gap: var(--s-4); padding-left: var(--s-20); font-size: var(--t-ui-sm); line-height: var(--t-small-l); }
.position-known-prices [data-trade-price-caveat] { margin-top: var(--s-12); }
[data-unchanged-group] { background: var(--surface); color: var(--muted); }
[data-unchanged-expander] > summary { color: var(--body); font-weight: var(--weight-regular); cursor: pointer; }
[data-unchanged-expander] ul { display: grid; gap: var(--s-4); margin-top: var(--s-8);
padding-left: var(--s-20); color: var(--muted); font-size: var(--t-small-s); line-height: var(--t-small-l); }
.chart-detail-gate { display: flex; justify-content: center; margin-top: var(--s-12); }
.tip { font-size: var(--t-small-s); color: var(--muted); cursor: help; }
@media (min-width: 1280px) {
table.tbl[data-position-history-table] th, table.tbl[data-position-history-table] td {
padding-inline: var(--s-8);
}
}
@media (max-width: 900px) {
table.record-card-table, .record-card-table > tbody { display: block; width: 100%; min-width: 0;
max-width: 100%; table-layout: fixed; }
.record-card-table > thead { display: block; position: absolute; width: var(--px-1); height: var(--px-1);
padding: 0; margin: calc(-1 * var(--px-1)); overflow: hidden; clip: rect(0 0 0 0);
clip-path: inset(50%); white-space: nowrap; }
.record-card-table > tbody > tr:not(.portfolio-holding-detail-row):not(.signin-row) {
display: block; width: 100%; min-width: 0; height: auto; padding: var(--s-12) 0;
border-bottom: var(--border-w) solid var(--line); }
.record-card-table > tbody > tr:not(.portfolio-holding-detail-row):not(.signin-row) > td:not(.mobile-record-cell) { display: none; }
table.record-card-table > tbody > tr:not(.portfolio-holding-detail-row):not(.signin-row) > td.mobile-record-cell {
display: block; width: 100%; min-width: 0; height: auto; padding: 0; border: 0;
text-align: left; white-space: normal; }
.record-card-table .mobile-record-card .cell-text { max-width: 100%; white-space: normal;
overflow: visible; overflow-wrap: normal; word-break: normal; text-overflow: clip; }
.mobile-record-card--holding .mobile-record-entity { flex: 1 1 0; }
.mobile-record-card--holding .portfolio-holding-name { max-width: 100%; }
.record-card-table .signin-row { display: block; }
.record-card-table .signin-row td { display: block; text-align: center; }
.table-component:has(.record-card-table) .tbl-wrap { overflow-x: visible; }
/* The main portfolio template still has one semantic table body. Present those same cells
as the holding-card variant without reviving label/value pseudo-content. */
.portfolio-holdings-table:not(.record-card-table),
.portfolio-holdings-table:not(.record-card-table) > tbody { display: block; width: 100%; min-width: 0; }
.portfolio-holdings-table:not(.record-card-table) > thead { display: none; }
.portfolio-holdings-table:not(.record-card-table) > tbody > tr[data-holding-parent] {
display: flex; align-items: baseline; flex-wrap: wrap; gap: var(--s-4) var(--s-12);
width: 100%; padding: var(--s-12) 0; border-bottom: var(--border-w) solid var(--line); }
.portfolio-holdings-table:not(.record-card-table) > tbody > tr[data-holding-parent] > td {
display: inline-flex; align-items: center; width: auto; min-width: 0; height: auto; padding: 0;
border: 0; text-align: left; white-space: normal; color: var(--muted);
font-size: var(--table-cell-s); line-height: var(--table-cell-l); }
.portfolio-holdings-table:not(.record-card-table) > tbody > tr[data-holding-parent] > td[data-field="entity"] {
display: block; flex: 1 1 calc(100% - var(--s-64)); color: var(--ink); font-size: var(--t-ui-sm); }
.portfolio-holdings-table:not(.record-card-table) > tbody > tr[data-holding-parent] > td[data-field="weight_pct"] {
flex: 0 0 auto; color: var(--ink); font-size: var(--t-ui-sm); font-weight: var(--weight-semibold); }
.portfolio-holdings-table:not(.record-card-table) > tbody > tr[data-holding-parent] > td.r { text-align: right; }
.portfolio-holdings-table:not(.record-card-table) > tbody > tr[data-holding-parent] > td[data-field="avg_buy"] { margin-left: 0; }
.portfolio-holdings-table:not(.record-card-table) > tbody > tr[data-holding-parent] > td:has([data-missing-value]) { display: none; }
.portfolio-holdings-table:not(.record-card-table) .entity-cell { max-width: 100%; }
.portfolio-holdings-table:not(.record-card-table) .portfolio-holding-name,
.portfolio-holding-detail { min-width: 0; overflow-wrap: normal; word-break: normal; hyphens: none; }
.portfolio-holding-detail-row {
display: block; position: static; width: 100%; height: auto;
}
.portfolio-holding-detail-row > td {
display: block; position: static; width: 100%; height: auto;
}
.portfolio-holding-stats-band { grid-template-columns: minmax(0, 1fr); align-items: stretch; }
.portfolio-holding-stats-band > dl { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (min-width: 901px) {
.portfolio-holding-views .tab { flex: 1 1 0; min-width: 0; text-align: center; }
}
@media (max-width: 600px) {
/* On compact screens, keep chart evidence clear and stack summary facts beneath it. */
.chart-note { display: none; }
.position-chart-scroll { overflow-x: auto; overflow-y: hidden; scrollbar-width: thin; }
.pos-chart-shell .chart-panel.position-variant { width: var(--position-chart-mobile-width); min-width: var(--position-chart-mobile-width); max-width: none; }
.pos-chart-shell .chart-panel.position-variant > svg.chart-static {
right: auto; width: var(--position-chart-mobile-width); min-width: var(--position-chart-mobile-width); max-width: none;
}
.pos-summary { grid-template-columns: minmax(0, 1fr); gap: var(--s-12); padding: var(--s-12); }
.pos-summary .ps-right { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-12); }
.pos-summary .ps-right dd { white-space: normal; }
.manager-action-head { display: none; }
.manager-action-row { grid-template-columns: var(--s-96) minmax(0, 1fr) var(--s-88); }
.manager-action-row .action-half.left, .manager-action-row .action-half.right { grid-column: 2; grid-row: 1; border-right: 0; }
.manager-action-row.sell .action-half.left i { left: 0; right: auto; }
.weight-compare-row { grid-template-columns: minmax(0, 1fr) var(--s-190); }
.weight-compare-row .dumbbell { display: none; }
.portfolio-activity-details > .disclosure-chevron {
display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: start; gap: var(--s-4) var(--s-12);
}
.disclosure-chevron > .t-small { grid-column: 1; }
.disclosure-chevron::after { grid-column: 2; grid-row: 1 / span 2; align-self: center; }
.portfolio-hero-layout { align-items: flex-start; flex-direction: column; }
.portfolio-hero-layout .stock-hero-logo { width: var(--s-88); height: var(--s-88); flex-basis: var(--s-88); }
.portfolio-hero-total { align-items: flex-start; text-align: left; }
.portfolio-hero-facts { justify-content: flex-start; flex-wrap: wrap; }
.portfolio-hero-facts > div { text-align: left; }
.portfolio-performance dl { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s-8); }
.similar-investors { grid-template-columns: 1fr; }
.portfolio-composition-grid { grid-template-columns: 1fr; }
.portfolio-composition-row { grid-template-columns: minmax(0, 1fr) var(--s-56); gap: var(--s-8); }
.portfolio-holding-detail { padding: var(--s-16); }
.portfolio-holding-detail-head { align-items: stretch; flex-direction: column; }
.portfolio-holding-stats-band > dl { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.portfolio-holding-band-actions { justify-content: flex-start; flex-wrap: wrap; white-space: normal; }
.stock-title-lockup { gap: var(--s-8); }
.stock-hero-heading-row { gap: var(--s-8); }
.stock-hero-heading-row h1 { font-size: var(--t-stock-h1-s-m); line-height: var(--t-stock-h1-l-m); }
.stock-ownership-kicker { margin-top: var(--s-4); font-size: var(--t-ui-sm); line-height: var(--t-small-l); }
.stock-price-row { gap: 0 var(--s-4); }
.stock-price-row .t-label { font-size: var(--t-mini); }
.stock-price-row .t-stat { font-size: var(--t-ui); line-height: var(--t-body-l); }
.stock-chart-flow-lane { height: var(--stock-chart-h-mobile); min-height: var(--stock-chart-h-mobile); }
.position-known-prices dl { grid-template-columns: minmax(0, 1fr); }
.fam-card .holder-card-identity h3 { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
}
/* ===================== end phase 3 ===================== */
/* ---------- Responsive (brand.md §4 breakpoints: 1120 / 900 / 600) ---------- */
@media (max-width: 900px) {
.grid-3, .grid-4, .stats, footer .cols { grid-template-columns: 1fr 1fr; }
.fam-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.hdr-nav > a, .hdr-nav > .btn-gold { display: none; } /* collapse to logo + search + burger */
.burger { display: block; }
}
@media (max-width: 600px) {
.logo .wordmark { display: none; } /* mark-only logo frees the search field */
.hdr .wrap, .hdr-nav { gap: var(--s-8); }
.hdr-search { max-width: none; }
.hdr-search .search-box input { height: var(--s-44); padding-right: var(--search-input-pad); }
.grid-2, .grid-3, .grid-4, footer .cols { grid-template-columns: 1fr; }
.fam-grid { grid-template-columns: minmax(0, 1fr); }
.stats { grid-template-columns: 1fr 1fr; }
.hero { padding: var(--hero-pad-top) 0 var(--hero-pad-bottom); }
}
@media (max-width: 360px) {
.hdr { height: auto; min-height: var(--header-h); }
.hdr .wrap { display: grid; grid-template-columns: auto auto; height: auto; min-height: var(--header-h);
padding-block: var(--s-8); }
.logo { grid-column: 1; grid-row: 1; }
.hdr-nav { grid-column: 2; grid-row: 1; justify-self: end; }
.hdr-search { grid-column: 1 / -1; grid-row: 2; width: 100%; }
}
/* ---------- Investors hub: responsive discovery catalog ---------- */
.investors-controls { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center;
gap: var(--s-8); padding: var(--s-12); margin-top: var(--s-16);
background: var(--surface); border: var(--border-w) solid var(--line); border-radius: var(--radius); }
.investors-search { display: grid; grid-template-columns: minmax(0, 2fr) minmax(var(--s-190), 1fr) auto;
grid-column: 1 / -1; gap: var(--s-8); align-items: end; width: 100%; }
.investors-search .fld { flex: 1 1 auto; min-width: 0; }
.filter-form.investors-search input[type="search"] { width: 100%; }
.investors-search select { width: 100%; min-width: 0; }
.investors-sort { display: flex; align-items: center; flex-wrap: wrap; gap: var(--s-8); }
.investors-count { margin: 0; }
.investors-page { padding-top: var(--s-24); padding-bottom: var(--page-pad-bottom); }
.investors-head { max-width: var(--s-840); }
.investors-head h1 { margin-top: var(--s-8); }
.investors-sub { margin-top: var(--s-8); }
.investors-catalog { margin-top: var(--s-24); }
.investors-catalog-heading { align-items: flex-end; margin-bottom: var(--s-8); }
.investors-catalog-heading p { margin-top: var(--s-4); color: var(--muted); }
.investors-card-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
gap: var(--card-gap); align-items: stretch; }
.investor-card { min-width: 0; display: flex; flex-direction: column; padding: var(--pad-card);
border: var(--border-w) solid var(--line); border-radius: var(--radius); background: var(--bg);
box-shadow: var(--shadow); color: inherit; text-decoration: none;
transition: border-color var(--motion-fast) ease, background-color var(--motion-fast) ease, box-shadow var(--motion-fast) ease; }
.investor-card:hover { border-color: var(--muted); background: var(--surface-strong); box-shadow: var(--shadow-hover); text-decoration: none; }
.investor-card:focus-visible { outline: var(--focus-ring-w) solid var(--link); outline-offset: var(--px-2); }
.investor-card:active { background: var(--surface-strong); box-shadow: none; }
.investor-card-head { display: block; min-width: 0; }
.investor-card-head h3 { margin: 0; overflow: hidden; color: var(--ink); font-size: var(--t-investor-name);
line-height: var(--t-investor-name-l); text-overflow: ellipsis; white-space: nowrap; }
.investor-card-fund { overflow: hidden; color: var(--muted); font-size: var(--t-label-s);
line-height: var(--t-label-l); text-overflow: ellipsis; white-space: nowrap; }
.investor-card-performance { display: flex; align-items: baseline; flex-wrap: wrap; gap: var(--s-4);
margin-top: var(--s-16); padding: var(--s-12) 0; border-top: var(--border-w) solid var(--line);
border-bottom: var(--border-w) solid var(--line); color: var(--body); font-size: var(--t-ui-sm);
line-height: var(--t-body-l); }
.investor-card-performance strong { font-weight: var(--weight-semibold); }
.investor-card-performance strong.buy { color: var(--buy); }
.investor-card-performance strong.sell { color: var(--sell); }
.investor-card-summary { margin-top: var(--s-12); color: var(--muted); font-size: var(--t-ui-sm);
line-height: var(--t-body-l); }
.investor-card-summary .num { color: var(--ink); font-weight: var(--weight-semibold); }
.investor-card-summary--standalone { margin-top: var(--s-16); padding-top: var(--s-12);
border-top: var(--border-w) solid var(--line); }
.investor-card-holdings { min-width: 0; margin-top: var(--s-16); }
.investor-card-holdings-label { color: var(--ink); font-size: var(--t-label-s);
line-height: var(--t-label-l); font-weight: var(--weight-semibold); }
.investor-card-holdings ul { display: grid; gap: var(--s-4); margin-top: var(--s-12); }
.investor-card-holdings li { display: flex; align-items: center; justify-content: space-between;
gap: var(--s-12); min-width: 0; min-height: var(--s-32); }
.investor-card-holding-identity { display: flex; align-items: center; gap: var(--s-8); min-width: 0; }
.investor-card-holding-name { display: flex; align-items: baseline; min-width: 0; overflow: hidden; color: var(--body);
font-size: var(--t-ui-sm); line-height: var(--t-body-l); font-weight: var(--weight-regular);
white-space: nowrap; }
.investor-card-holding-company { min-width: 0; max-width: calc(100% - var(--s-24)); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.investor-card-holding-ticker { flex: 0 0 auto; margin-left: var(--s-12); white-space: nowrap; }
.investor-card-holding-weight { flex: 0 0 auto; color: var(--body); font-size: var(--t-ui-sm);
line-height: var(--t-body-l); }
.investor-card-holdings .investor-card-remainder { justify-content: flex-start; margin-top: var(--s-4);
padding-top: var(--s-8); border-top: var(--border-w) solid var(--line); color: var(--link);
font-size: var(--t-ui-sm); line-height: var(--t-body-l); font-weight: var(--weight-semibold); }
.quarter-control { display: flex; justify-content: space-between; align-items: flex-end; gap: var(--s-16);
flex-wrap: wrap; margin-bottom: var(--s-16); }
.quarter-presets { display: flex; flex-wrap: wrap; gap: var(--s-8); }
.quarter-exact { align-items: flex-end; }
.investors-empty { margin-top: var(--sect-gap); }
.investors-empty p { margin: var(--s-8) 0 var(--s-16); }
@media (max-width: 900px) {
.investors-card-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 700px) {
.investors-controls { grid-template-columns: minmax(0, 1fr); margin-inline: calc(-1 * var(--s-8));
padding: var(--s-8); }
.investors-search.filter-form { display: grid; grid-template-columns: minmax(0, 1fr) auto; }
.investors-search .fld:first-child { grid-column: 1 / -1; }
.investors-search .fld { width: 100%; }
.filter-form.investors-search input[type="search"] { padding-inline: var(--s-8); }
.investors-sort, .investors-count { grid-column: 1 / -1; }
.quarter-control { align-items: stretch; }
}
@media (max-width: 600px) {
.investors-card-grid { grid-template-columns: minmax(0, 1fr); gap: var(--card-gap); }
.investor-card { min-height: 0; }
}
/* =========================================================================
--- phase 4 moves + home + search --- (all colors via tokens; brand.md)
========================================================================= */
/* shared: semantic text colors (buy/sell meanings only) + form chip */
.buy { color: var(--buy); }
.sell { color: var(--sell); }
.form-chip { font-family: var(--mono); font-size: var(--t-tick); font-weight: var(--weight-semibold); color: var(--muted);
background: var(--surface); border: var(--border-w) solid var(--line); border-radius: var(--radius-sm);
padding: var(--px-1) var(--px-6); white-space: nowrap; }
.grid-5 { display: grid; gap: var(--card-gap); grid-template-columns: repeat(5, minmax(0, 1fr)); }
/* ---------- Homepage data modules ---------- */
.row1 { display: flex; align-items: center; gap: var(--s-8); justify-content: space-between; }
/* Lead variant (audit2 P1): group the ticker chip + company name at the left edge instead of
pushing the name to the far right with a dead gap between them. */
.row1.lead { justify-content: flex-start; }
.row1.lead .mbc-name { flex: 1 1 auto; min-width: 0; }
.mbc-name { color: var(--ink); font-weight: var(--weight-semibold); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.home-data-card { display: grid; gap: var(--s-16); color: var(--body); }
.home-card-identity { display: inline-flex; align-items: center; gap: var(--s-8); min-width: 0; }
.home-card-identity > span:last-child { min-width: 0; }
.home-card-data { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s-12); }
.home-card-data > div { min-width: 0; }
.home-card-data dt { color: var(--muted); font-size: var(--t-label-s); line-height: var(--line-compact);
letter-spacing: var(--tracking-label); text-transform: uppercase; font-weight: var(--weight-semibold); }
.home-card-data dd { margin-top: var(--s-4); color: var(--ink); font-variant-numeric: tabular-nums; }
.mbc-fig { font-size: var(--t-h2-s); line-height: var(--t-h2-l); font-weight: var(--weight-bold); }
.home-card-data .home-change { color: var(--body); font-weight: var(--weight-regular); }
.home-card-data .home-change.buy { color: var(--buy); }
.home-card-data .home-change.sell { color: var(--sell); }
.nb-inv { display: block; color: var(--ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.nb-stock { color: var(--body); }
.nb-stock:hover { text-decoration: none; color: var(--ink); }
.pf-val { font-size: var(--t-h2-s); font-weight: var(--weight-bold); color: var(--ink); }
.pf-tops { display: flex; gap: var(--s-8); flex-wrap: wrap; }
.home-top-holding { display: inline-flex; align-items: center; gap: var(--s-4); }
.home-top-holding:hover { text-decoration: none; }
.latest-moves { padding: 0; }
.latest-moves .table-component { padding: 0 var(--pad-card); }
.latest-moves .lm-foot { border-top: var(--border-w) solid var(--line); }
.lm-row { display: flex; justify-content: space-between; gap: var(--s-16); align-items: baseline;
padding: var(--s-8) var(--pad-card); border-bottom: var(--border-w) solid var(--line); }
.lm-actor { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--body); flex: 1 1 auto; min-width: 0; }
/* Home latest-moves right group: action verb + size + relative time (audit2 A12/C3), mirroring
the /moves ACTION + Size cells so the feed reads as scannable moves, not bare actor+time. */
.lm-move { display: flex; align-items: baseline; gap: var(--s-12); flex: 0 0 auto; }
.lm-action { font-weight: var(--weight-regular); white-space: nowrap; }
.lm-val { color: var(--body); white-space: nowrap; }
.lm-when { color: var(--muted); white-space: nowrap; flex: 0 0 auto; }
@media (max-width: 600px) {
.home-card-data { grid-template-columns: repeat(2, minmax(0, 1fr)); }
/* On mobile drop the relative time so the verb + size (the substance) never truncate. */
.lm-move .lm-when { display: none; }
}
.lm-foot { padding: var(--s-12) var(--pad-card); }
/* ---------- Search (dropdown + results page) ---------- */
.search-box { position: relative; width: 100%; min-width: 0; max-width: 100%; }
.search-box.with-cta { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--s-12); }
.search-cta { flex: 0 0 auto; }
.search-pop { position: absolute; top: calc(100% + var(--s-4)); left: 0; right: 0; width: 100%; min-width: 0; max-width: 100%; background: var(--bg);
border: var(--border-w) solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow-pop);
z-index: 200; max-height: var(--s-360); overflow-y: auto; padding: var(--s-4); text-align: left; }
.search-pop .grp { padding: var(--s-4) var(--s-8); }
.search-pop a { display: flex; gap: var(--s-8); align-items: baseline; padding: var(--s-8);
border-radius: var(--radius-sm); color: var(--body); font-size: var(--t-ui); }
.search-pop a:hover { background: var(--surface-strong); text-decoration: none; }
.search-pop a.active { background: var(--active-chip-bg); color: var(--active-chip-ink); text-decoration: none; }
.search-pop a.active .sp-name { color: var(--active-chip-ink); }
.search-pop .sp-name { color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.search-pop .sp-empty, .search-pop .sp-state { padding: var(--s-8); color: var(--muted); }
.search-pop .sp-error { color: var(--body); }
.search-again { max-width: var(--s-560); }
.res-card { display: flex; align-items: flex-start; gap: var(--s-12); }
.res-copy { display: flex; flex-direction: column; gap: var(--s-4); min-width: 0; }
.res-name { color: var(--ink); font-weight: var(--weight-semibold); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.res-meta { color: var(--muted); }
.res-cta { color: var(--link); }
.search-popular .chip-link { margin: 0 var(--s-4) var(--s-4) 0; }
.combo-card { display: inline-flex; align-items: center; gap: var(--s-12); }
.combo-name { color: var(--ink); font-weight: var(--weight-semibold); }
/* ---------- /moves screener ---------- */
.moves-head .sub { max-width: var(--s-760); }
.sc-identity { display: grid; grid-template-columns: var(--logo-card) minmax(0, 1fr); gap: var(--s-8); align-items: center; }
.sc-date { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sc-date { color: var(--muted); }
.chips { display: flex; flex-wrap: wrap; gap: var(--s-8); margin-bottom: var(--s-16); }
.instrk-page [data-filter-chips] { margin-top: var(--s-12); }
/* Active-filter chip remove "×": a clear red affordance so the chip reads as a
dismissable filter, not a static label (comment: make the × more visible). */
[data-filter-chip] > span[aria-hidden="true"] {
display: inline-flex; align-items: center; justify-content: center;
width: var(--s-16); height: var(--s-16); margin-left: var(--s-4);
border-radius: var(--radius-pill); color: var(--sell);
font-weight: var(--weight-bold); line-height: var(--line-solid);
}
[data-filter-chip]:hover > span[aria-hidden="true"],
[data-filter-chip]:focus-visible > span[aria-hidden="true"] { background: var(--sell-soft); }
.chip-btn { display: inline-flex; align-items: center; justify-content: center; min-height: var(--control-h);
padding: var(--s-4) var(--s-12); border-radius: var(--radius-sm);
border: var(--border-w) solid transparent; background: var(--surface); color: var(--body); font-size: var(--t-ui-sm); font-weight: var(--weight-semibold); white-space: nowrap; }
.chip-btn:hover { background: var(--surface-strong); color: var(--ink); text-decoration: none; }
.chip-btn:active { background: var(--surface-strong); }
.chip-btn[aria-disabled="true"], .chip-btn.is-disabled { cursor: not-allowed; opacity: var(--disabled-opacity); pointer-events: none; }
.filter-form { display: flex; flex-wrap: wrap; gap: var(--s-12); align-items: flex-end; }
.fld { display: flex; flex-direction: column; gap: var(--s-4); }
.filter-form input, .filter-form select { height: var(--control-h); padding: 0 var(--s-12); border: var(--border-w) solid var(--control-border);
border-radius: var(--radius-sm); background: var(--bg); color: var(--ink);
font-size: var(--t-ui); font-family: var(--font); }
.filter-form input:hover, .filter-form select:hover { border-color: var(--muted); }
.filter-form input:focus-visible, .filter-form select:focus-visible { border-color: var(--muted); outline: var(--focus-ring-w) solid var(--line); outline-offset: var(--px-2); }
.filter-form input[type="search"], .filter-form input[type="text"] { width: var(--filter-search-w); }
.filter-form select, .date-card select, .insider-page-field select { appearance: none; padding-right: var(--s-32);
background-image: var(--select-chevron); background-repeat: no-repeat;
background-position: right var(--s-12) center; }
.more-filters summary { list-style: none; cursor: pointer; }
.more-filters summary::-webkit-details-marker { display: none; }
.more-card { margin-top: var(--s-12); padding: var(--pad-card);
border-radius: var(--radius); background: var(--surface); display: flex; flex-direction: column; gap: var(--s-12); }
.insider-page-filterbar > .more-filters[open] { flex: 1 0 100%; }
.insider-page-filterbar > .more-filters[open] .more-card { flex-direction: row; flex-wrap: wrap; align-items: flex-end; }
.role-row { display: flex; flex-wrap: wrap; gap: var(--s-12); align-items: center; }
.rolechk, .derivchk { font-size: var(--t-ui); color: var(--body); display: inline-flex; align-items: center; gap: var(--s-4); }
.filter-actions { display: flex; gap: var(--s-8); align-items: center; }
.feed-meta { margin: var(--s-16) 0 var(--s-8); color: var(--muted); }
.moves-family-tables { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--s-24); min-width: 0; }
.moves-family-tables .moves-family-section,
.moves-family-tables .table-component,
.moves-family-tables .tbl-wrap { width: 100%; min-width: 0; max-width: 100%; }
.moves-family-tables .tbl-wrap { overflow-x: visible; }
.moves-family-tables table.moves-tbl { width: 100%; min-width: 0; max-width: 100%; table-layout: fixed; }
.moves-family-tables .moves-tbl :is(th, td) { min-width: 0; white-space: normal; overflow-wrap: anywhere; }
.moves-family-tables .moves-tbl .cell-text { max-width: 100%; white-space: normal; overflow-wrap: anywhere; }
.moves-family-tables .moves-tbl td.num :is(.v-main, .d-own),
.moves-family-tables .moves-tbl td[data-field$="_date"] .cell-text { white-space: nowrap; overflow-wrap: normal; }
.moves-family-tables .moves-tbl td.num .missing-value { white-space: normal; overflow-wrap: anywhere; }
.moves-tbl caption { text-align: left; color: var(--ink); font-weight: var(--weight-semibold); padding: var(--s-8) 0; }
table.moves-tbl td { height: var(--row-h-compact); }
.moves-tbl td:first-child { white-space: nowrap; }
.moves-tbl th { white-space: nowrap; }
/* Insider-row enrichments (openinsider parity): a muted Title under the insider name, and a
signed Value with a Δ Own sub-line under it. Both stack as blocks inside their cell. */
.actor-role { display: block; color: var(--muted); }
.moves-tbl td .v-main { display: block; }
.moves-tbl td .d-own { display: block; color: var(--muted); white-space: nowrap; }
[data-related-insider-tools] { display: flex; align-items: center; flex-wrap: wrap;
gap: var(--s-8); }
.cluster-fills { margin-top: var(--s-4); color: var(--muted); font-size: var(--t-label-s);
line-height: var(--t-label-l); white-space: normal; }
.cluster-fills summary { display: inline-flex; align-items: center; min-height: var(--s-24);
color: var(--link); cursor: pointer; }
.cluster-fills ol { display: grid; gap: var(--s-4); max-height: var(--cluster-fills-max-h);
margin-top: var(--s-4); padding-inline: var(--s-24) var(--s-8); overflow-y: auto; }
.pager { display: flex; align-items: center; justify-content: center; flex-wrap: wrap;
width: 100%; gap: var(--s-8); margin-top: var(--s-16); text-align: center; }
.pager-nav { display: inline-flex; align-items: center; justify-content: center; flex-wrap: wrap;
gap: var(--s-8); }
.pager-separator { color: var(--muted); }
.pager .btn-quiet[aria-disabled="true"] { opacity: var(--disabled-opacity); pointer-events: none; }
.pager-pages { display: inline-flex; align-items: center; justify-content: center; flex-wrap: wrap;
gap: var(--s-4); }
/* ---------- /insider-buying-stocks ranked discovery ---------- */
.insider-buying-page .ib-head .sub { max-width: var(--s-760); }
.insider-buying-page section { margin: var(--sect-gap) 0; }
.range-tabs { display: flex; align-items: center; gap: var(--s-8); flex-wrap: wrap; }
.date-range { position: relative; }
.date-range summary { list-style: none; cursor: pointer; }
.date-range summary::-webkit-details-marker { display: none; }
.date-error { color: var(--sell); margin-top: var(--s-8); }
.ib-filter-form { padding-top: var(--s-16); border-top: var(--border-w) solid var(--line); }
.ranked-bar { display: grid; grid-template-columns: var(--s-240) minmax(var(--s-160), 1fr) var(--s-96);
gap: var(--s-12); align-items: center; padding-bottom: var(--s-12); border-bottom: var(--border-w) solid var(--line); }
.rank-label { display: flex; align-items: center; gap: var(--s-8); min-width: 0; }
.rank-label a { color: var(--ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rank-no { color: var(--muted); min-width: var(--s-24); text-align: right; }
.rank-track { position: relative; height: var(--s-16); background: var(--surface); border-radius: var(--radius-sm); }
.rank-fill { display: block; width: var(--bar-width); height: 100%; background: var(--chart-positive);
border-radius: 0 var(--radius-mark) var(--radius-mark) 0; overflow: hidden; }
.rank-value { color: var(--ink); text-align: right; }
.rank-summary { grid-column: 2 / -1; display: flex; flex-wrap: wrap; gap: var(--s-8) var(--s-24); }
.rank-summary div { display: flex; gap: var(--s-4); }
.rank-summary dt { color: var(--muted); }
.rank-summary dd { color: var(--body); font-variant-numeric: tabular-nums; }
.ib-card-value { color: var(--ink); font-size: var(--t-h2-s); font-weight: var(--weight-bold); margin: var(--s-8) 0; }
.ib-card-bar { height: var(--s-8); background: var(--surface); border-radius: var(--radius-sm); overflow: hidden; margin-bottom: var(--s-8); }
.ib-card-bar span { display: block; height: 100%; width: var(--bar-width); background: var(--chart-positive); }
.series-weekly { display: none; }
.cap-hit { cursor: pointer; }
.cap-hit:hover { stroke: var(--link); stroke-width: var(--px-1); }
.cap-hit:focus-visible { outline: var(--focus-ring-w) solid var(--link); outline-offset: var(--px-2); }
.cap-hit:active { filter: var(--button-active-filter); }
.cap-hit[aria-disabled="true"] { cursor: not-allowed; opacity: var(--disabled-opacity); pointer-events: none; }
.series-axis { margin-top: var(--s-8); }
.ib-empty .nodata { padding: var(--s-24); background: var(--surface); border-radius: var(--radius); }
.ib-methodology p { max-width: var(--s-840); }
/* ---------- phase 4 responsive ---------- */
@media (max-width: 900px) {
.grid-5 { grid-template-columns: repeat(2, 1fr); }
.filter-form { gap: var(--s-8); }
.ranked-bar { grid-template-columns: var(--s-190) minmax(var(--s-120), 1fr) var(--s-72); }
}
@media (max-width: 600px) {
.grid-5 { grid-template-columns: 1fr; }
.search-box.with-cta { grid-template-columns: 1fr; }
.filter-form { flex-direction: column; align-items: stretch; }
.filter-form input[type="search"], .filter-form input[type="text"], .fld { width: 100%; }
.filter-form input, .filter-form select { width: 100%; }
.inline-range-form .fld { flex: 1 1 var(--s-120); width: auto; }
.inline-range-form input, .inline-range-form select { width: 100%; }
.temporal-arrow { display: none; }
.ib-ranking { display: none; }
.purchase-series.long-window .series-daily { display: none; }
.purchase-series.long-window .series-weekly { display: flex; }
.insider-buying-page .table-component .tbl-wrap { max-width: calc(100vw - 2 * var(--side-pad)); }
}
/* ---------- WS-HOME data-first page ---------- */
.home-page { max-width: 100%; }
.home-page .wrap { width: 100%; max-width: var(--maxw); }
.home-hero { padding: var(--hero-pad-top) 0 var(--hero-pad-bottom); text-align: center; }
.home-hero-search { max-width: var(--s-760); margin: var(--s-24) auto 0; }
.home-hero-search .search-box.with-cta { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--s-12); }
.home-hero-search input { width: 100%; min-width: 0; height: var(--s-48);
padding: 0 var(--search-input-pad) 0 calc(var(--s-12) + var(--s-16) + var(--s-8)); font-size: var(--t-ui); }
.home-hero-search .search-cta { height: var(--s-48); padding: 0 var(--s-24); }
.home-modules { display: grid; gap: var(--sect-gap); min-width: 0; padding-bottom: var(--page-pad-bottom); }
.home-modules > [data-ui-section] { margin-block: 0; }
.home-data-section, .home-flow-sections, .home-insider-table, .home-insider-table .table-component,
.home-insider-table .tbl-wrap { min-width: 0; max-width: 100%; }
.home-data-section .quarter-control, .home-data-section .quarter-exact { min-width: 0; max-width: 100%; }
.home-section-head { display: flex; align-items: end; justify-content: space-between; gap: var(--s-24); margin-bottom: var(--s-20); }
.home-section-head > div { min-width: 0; }
.home-section-head > a { flex: 0 0 auto; }
.home-section-sub { margin-top: var(--s-8); color: var(--muted); }
.home-insider-table { padding: 0; overflow: hidden; }
.home-insider-table .table-component { padding: 0; }
.home-insider-table .tbl :is(th, td):first-child { padding-left: var(--pad-card); }
.home-insider-table .tbl :is(th, td):last-child { padding-right: var(--pad-card); }
.home-insider-table .table-count { padding: var(--s-12) var(--pad-card); }
.home-new-bets-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); align-items: stretch; }
.home-new-bet-card { height: 100%; }
/* Stock is now the primary line; investor is the secondary, muted subline below it. */
.home-new-bet-investor { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--muted); font-size: var(--t-small-s); line-height: var(--t-small-l); margin-top: var(--s-4); }
.home-new-bet-stock { color: var(--ink); }
.home-new-bet-stock:hover { color: var(--ink); text-decoration: none; }
.home-new-bet-stock > span:last-child { display: block; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.home-new-bet-data { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.home-data-section[data-home-module="institutional-flows"] > .home-section-head { margin-bottom: var(--s-32); }
.home-flow-sections { display: grid; gap: var(--s-40); margin-top: 0; }
.home-flow-sections > section { margin: 0; }
.home-subsection-head { margin-bottom: var(--s-16); }
.home-flow-card { height: 100%; }
.home-browse-rail { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--card-gap); }
.home-browse-card { min-width: 0; color: var(--body); }
.home-browse-label { margin-top: var(--s-4); }
.home-filing-entity { display: block; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.home-browse-value { color: var(--ink); font-weight: var(--weight-semibold); }
/* ---------- Feedback-remediated Stocks hub ---------- */
.stocks-page { max-width: var(--maxw); padding-top: var(--page-pad-top); padding-bottom: var(--page-pad-bottom); }
.stocks-head { max-width: var(--s-760); }
.stocks-head p { margin-top: var(--s-8); color: var(--body); }
.stocks-filter-panel { margin-top: var(--s-24); padding: var(--pad-card); border-radius: var(--radius); background: var(--surface); }
.stocks-filter-presets { display: flex; flex-wrap: wrap; gap: var(--s-8); margin-bottom: var(--s-12); }
.stocks-filter-form { display: grid; grid-template-columns: minmax(var(--s-240), 1.6fr) minmax(var(--s-160), 1fr) minmax(var(--s-160), 1fr) minmax(var(--s-120), .8fr) auto; gap: var(--s-8); align-items: end; min-width: 0; }
.stocks-filter-form .fld { min-width: 0; }
.stocks-filter-form input[type="search"], .stocks-filter-form select { width: 100%; min-width: 0; }
.stocks-filter-actions { display: flex; align-items: center; gap: var(--s-8); }
.stocks-loading { color: var(--muted); }
/* Chart sits directly under the filter that controls it: no divider/large gap, so the
filter reads as attached to its chart (comment: "any filter should be just above its chart"). */
.stocks-flow-section { margin-top: var(--s-16); }
.stocks-section-head { display: flex; align-items: end; justify-content: space-between; gap: var(--s-16); margin-bottom: var(--s-16); }
.stocks-section-head p { margin-top: var(--s-4); color: var(--muted); }
.stocks-results-summary { flex: 0 0 auto; color: var(--body); font-weight: var(--weight-semibold); }
.stocks-view-note { margin-bottom: var(--s-12); padding: var(--s-8) var(--s-12); border-radius: var(--radius-sm); background: var(--surface); color: var(--body); }
.stocks-flow-table, .stocks-flow-table .table-component, .stocks-flow-table .tbl-wrap { min-width: 0; max-width: 100%; }
.stocks-flow-table .tbl-wrap { overflow-x: visible; }
.stocks-flow-table table { width: 100%; min-width: 0; table-layout: fixed; }
.stocks-flow-table :is(th, td)[data-field="rank"] {
width: var(--s-64); padding-left: var(--s-16); padding-right: var(--s-8);
}
.stocks-flow-table th[data-field="entity"] { width: var(--s-180); }
.stocks-flow-table th[data-field="latest_change"] { width: var(--s-160); }
.stocks-flow-table th[data-field="buyer_count"], .stocks-flow-table th[data-field="seller_count"] { width: var(--s-88); }
.stocks-flow-table th[data-field="data_quarter"] { width: var(--s-190); }
.stocks-flow-table td[data-field="company"] .cell-text { max-width: 100%; }
.stocks-flow-table .entity-cell a:focus-visible { outline: var(--focus-ring-w) solid var(--link); outline-offset: var(--px-2); }
.stocks-flow-table .entity-mark[data-logo-state="fallback"] img { display: block; opacity: var(--series-opacity); }
.stocks-share-classes { min-width: 0; color: var(--body); }
.stocks-share-classes > summary { color: var(--link); font-weight: var(--weight-semibold); cursor: pointer;
white-space: nowrap; }
.stocks-share-classes > span { display: inline-block; margin-top: var(--s-4); white-space: nowrap; }
.stocks-share-classes[open] { white-space: normal; }
.stocks-breadth { display: inline-grid; grid-template-columns: var(--s-96) auto; align-items: center;
gap: var(--s-8); min-width: 0; }
.stocks-breadth progress { width: var(--s-96); height: var(--s-8); appearance: none;
border: 0; border-radius: var(--radius-pill); overflow: hidden; background: var(--sell-soft); }
.stocks-breadth progress::-webkit-progress-bar { background: var(--sell-soft); }
.stocks-breadth progress::-webkit-progress-value { background: var(--buy); }
.stocks-breadth progress::-moz-progress-bar { background: var(--buy); }
.stocks-empty { padding: var(--s-24); border-radius: var(--radius); background: var(--surface); }
.stocks-empty p { margin-bottom: var(--s-12); }
.stocks-reach-note { margin-top: var(--s-12); color: var(--muted); }
.stocks-included-quarters { margin-top: var(--s-8); color: var(--muted); }
.stocks-help { margin-top: var(--s-40); }
.stocks-help h2 { margin-bottom: var(--s-8); }
@media (max-width: 900px) {
.moves-responsive-tables .moves-tbl > caption { display: block; width: 100%; max-width: 100%;
white-space: normal; overflow-wrap: normal; word-break: normal; text-wrap: balance; }
.home-browse-rail { grid-template-columns: 1fr 1fr; }
.stocks-filter-form { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.stocks-search-field, .stocks-filter-actions { grid-column: 1 / -1; }
}
@media (max-width: 767px) {
.stocks-page { padding-top: var(--page-pad-top); padding-bottom: var(--page-pad-bottom); }
.stocks-filter-panel { padding: var(--s-12); }
.stocks-filter-form { grid-template-columns: 1fr 1fr; }
.stocks-sort-field { grid-column: 1 / -1; }
.stocks-section-head { align-items: flex-start; flex-direction: column; gap: var(--s-4); }
.stocks-results-summary { white-space: normal; }
.stocks-flow-table .tbl-wrap { overflow-x: auto; }
.stocks-flow-table table { min-width: max-content; table-layout: auto; }
}
@media (max-width: 430px) {
.stocks-filter-form { grid-template-columns: 1fr; }
.stocks-search-field, .stocks-sort-field, .stocks-filter-actions { grid-column: 1; }
.stocks-filter-actions { align-items: stretch; flex-direction: column; }
.stocks-filter-actions .btn-quiet { width: 100%; }
}
@media (max-width: 600px) {
.home-hero { padding: var(--hero-pad-top) 0 var(--hero-pad-bottom); }
.home-hero-search { margin-top: var(--s-24); }
.home-hero-search .search-box.with-cta { grid-template-columns: 1fr; }
.home-hero-search .search-icon { top: var(--s-24); }
.home-hero-search .search-cta { width: 100%; }
.home-modules { gap: var(--sect-gap); padding-bottom: var(--page-pad-bottom); }
.home-section-head { align-items: flex-start; flex-direction: column; gap: var(--s-8); }
.home-flow-card .home-card-data, .home-new-bet-data { grid-template-columns: 1fr; }
.home-new-bets-grid { grid-template-columns: minmax(0, 1fr); }
.home-browse-rail { grid-template-columns: 1fr; }
}
/* ---------- WS-INSIDER-PAGES dense, data-first surfaces ---------- */
.insider-page-shell { max-width: 100%; padding-top: var(--page-pad-top); padding-bottom: var(--page-pad-bottom); }
.insider-page-head { margin-top: var(--s-12); }
.insider-page-intro { max-width: var(--s-760); margin-top: var(--s-8); color: var(--body); }
.insider-page-filterbar { display: flex; flex-wrap: wrap; align-items: flex-end; gap: var(--s-8);
min-width: 0; max-width: 100%; margin-top: var(--s-24); padding: var(--s-12);
border: var(--border-w) solid var(--line); border-radius: var(--radius-sm); background: var(--surface); }
.insider-page-filterbar fieldset { min-width: 0; margin: 0; padding: 0; border: 0; }
.insider-page-horizons { flex: 0 1 auto; }
.insider-page-horizon-links { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--s-4); }
.insider-page-horizon { display: flex; align-items: center; justify-content: center; min-width: var(--s-48); min-height: var(--control-h); padding: var(--s-8); text-align: center;
border: var(--border-w) solid transparent; border-radius: var(--radius-sm); background: var(--surface);
color: var(--body); font-size: var(--t-ui-sm); font-weight: var(--weight-semibold); line-height: var(--t-label-l); }
.insider-page-horizon:hover { background: var(--surface-strong); color: var(--ink); text-decoration: none; }
.insider-page-horizon:focus-visible { outline: var(--focus-ring-w) solid var(--link); outline-offset: var(--px-2); }
.insider-page-horizon:active { background: var(--surface-strong); }
.insider-page-horizon[aria-disabled="true"] { cursor: not-allowed; opacity: var(--disabled-opacity); pointer-events: none; }
.insider-page-field { display: flex; flex: 1 1 var(--s-120); flex-direction: column; gap: var(--s-4); min-width: var(--s-120); }
.insider-page-field input, .insider-page-field select { width: 100%; min-width: 0; height: var(--control-h);
padding: 0 var(--s-8); border: var(--border-w) solid var(--control-border); border-radius: var(--radius-sm);
background-color: var(--bg); color: var(--ink); font: inherit; }
.insider-page-field input:hover, .insider-page-field select:hover { border-color: var(--muted); }
.insider-page-field input:focus-visible, .insider-page-field select:focus-visible { border-color: var(--muted); outline: var(--focus-ring-w) solid var(--line); outline-offset: var(--px-2); }
.insider-page-filter-actions { display: flex; flex: 0 0 auto; align-items: center; gap: var(--s-4); }
.insider-page-filter-actions .btn-gold, .insider-page-filter-actions .btn-quiet,
.insider-page-table .btn-gold, .insider-page-table .btn-quiet,
.insider-page-empty .btn-gold { border-radius: var(--radius-sm); padding: 0 var(--s-12); }
.insider-page-filter-error { flex: 1 0 100%; color: var(--sell); }
.insider-page-summary-section, .insider-page-table, .insider-page-faq, .insider-page-empty { margin-top: var(--s-32); }
.insider-page-section-head { display: flex; align-items: flex-end; justify-content: space-between; gap: var(--s-16);
min-width: 0; margin-bottom: var(--s-12); }
.insider-page-section-head > div { min-width: 0; }
.insider-page-caption { margin-top: var(--s-4); color: var(--muted); }
.insider-page-summary { flex: 0 0 auto; color: var(--body); font-size: var(--t-small-s); font-weight: var(--weight-semibold); }
.insider-page-table, .insider-page-table .table-component, .insider-page-table .tbl-wrap {
min-width: 0; max-width: 100%; }
.insider-page-faq > h2 { margin-bottom: var(--s-4); }
.insbuy-date-field { flex-basis: var(--s-160); }
.insbuy-min-field { flex-basis: var(--s-190); }
.insbuy-unique-field { flex-basis: var(--s-190); }
[data-ranked-stocks] > :is(a, article) > .t-small { white-space: nowrap; }
.instrk-date-field { flex-basis: var(--s-160); }
.instrk-search-field { flex-basis: var(--s-160); }
.instrk-min-field { flex-basis: var(--s-120); }
.instrk-sort-field { flex-basis: var(--s-120); }
.instrk-types { flex: 1 1 var(--s-420); }
.instrk-type-options { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s-4); }
.instrk-type-option { position: relative; min-width: 0; cursor: pointer; }
.instrk-type-option input { position: absolute; opacity: 0; pointer-events: none; }
.instrk-type-option span { display: flex; align-items: center; justify-content: center; min-width: 0;
min-height: var(--control-h); padding: var(--s-4) var(--s-8); overflow: hidden;
border: var(--border-w) solid transparent; border-radius: var(--radius-sm); background: var(--surface);
color: var(--body); font-size: var(--t-ui-sm); font-weight: var(--weight-semibold);
line-height: var(--t-label-l); text-align: center; text-overflow: ellipsis; white-space: nowrap; }
.instrk-type-option:hover span { background: var(--surface-strong); color: var(--ink); }
.instrk-type-option input:focus-visible + span { outline: var(--focus-ring-w) solid var(--link); outline-offset: var(--px-2); }
.instrk-type-option:active span { background: var(--chart-hover); }
.instrk-type-option input:disabled + span { cursor: not-allowed; opacity: var(--disabled-opacity); }
.instrk-type-option input:checked + span { border-color: var(--active-chip-border); background: var(--active-chip-bg); color: var(--active-chip-ink); }
.instrk-empty { margin-top: var(--s-8); }
@media (max-width: 900px) {
.insider-page-filterbar { align-items: stretch; }
.insider-page-horizons { flex: 1 1 100%; }
.instrk-types { flex-basis: 100%; }
}
@media (max-width: 600px) {
.insider-page-shell { padding-top: var(--page-pad-top); padding-bottom: var(--page-pad-bottom); }
.insider-page-filterbar { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); padding: var(--s-8); }
.insider-page-filterbar > .more-filters { grid-column: 1 / -1; width: 100%; }
.insider-page-filterbar > .more-filters .more-card { flex-direction: column; align-items: stretch; }
.insider-page-horizons, .instrk-types, .insider-page-filter-actions,
.insider-page-filter-error, .instrk-search-field { grid-column: 1 / -1; width: 100%; }
.insider-page-field { width: 100%; min-width: 0; }
.insider-page-filter-actions { justify-content: stretch; }
.insider-page-filter-actions .btn-gold, .insider-page-filter-actions .btn-quiet { flex: 1 1 0; text-align: center; }
.insider-page-summary-section, .insider-page-table, .insider-page-faq, .insider-page-empty { margin-top: var(--s-24); }
.insider-page-section-head { align-items: flex-start; flex-direction: column; gap: var(--s-4); }
.insider-page-summary { white-space: normal; }
.insbuy-min-field, .insbuy-unique-field { grid-column: span 1; }
.insider-page-table .tbl-wrap { width: 100%; max-width: 100%; overflow-x: visible; }
}
/* Bespoke ledger templates use the same activity-card visual grammar as the shared macro.
Values stay in semantic DOM order; missing cells disappear instead of becoming dash facts. */
@media (max-width: 900px) {
:is(.moves-responsive-tables .tbl:not(.record-card-table), .instrk-table .insider-tbl),
:is(.moves-responsive-tables .tbl:not(.record-card-table), .instrk-table .insider-tbl) > tbody {
display: block; width: 100%; min-width: 0; max-width: 100%; }
:is(.moves-responsive-tables .tbl:not(.record-card-table), .instrk-table .insider-tbl) > thead {
display: block; position: absolute; width: var(--px-1); height: var(--px-1); padding: 0;
margin: calc(-1 * var(--px-1)); overflow: hidden; clip: rect(0 0 0 0);
clip-path: inset(50%); white-space: nowrap; }
:is(.moves-responsive-tables .tbl:not(.record-card-table), .instrk-table .insider-tbl) > tbody > tr {
display: flex; align-items: baseline; flex-wrap: wrap; gap: var(--s-4) var(--s-12);
width: 100%; min-width: 0; padding: var(--s-12) 0; border-bottom: var(--border-w) solid var(--line); }
:is(.moves-responsive-tables .tbl:not(.record-card-table), .instrk-table .insider-tbl) > tbody > tr > td {
display: inline-flex; align-items: baseline; width: auto; min-width: 0; max-width: 100%; height: auto;
padding: 0; border: 0; text-align: left; white-space: normal; color: var(--muted);
font-size: var(--table-cell-s); line-height: var(--table-cell-l); }
:is(.moves-responsive-tables .tbl:not(.record-card-table), .instrk-table .insider-tbl) > tbody > tr > td[data-field="stock_identity"] {
order: -4; color: var(--ink); font-size: var(--t-ui-sm); font-weight: var(--weight-semibold); }
:is(.moves-responsive-tables .tbl:not(.record-card-table), .instrk-table .insider-tbl) > tbody > tr > td[data-field="company"] {
order: -3; flex: 1 0 100%; color: var(--ink); font-size: var(--t-ui-sm); font-weight: var(--weight-semibold);
overflow-wrap: normal; word-break: normal; hyphens: none; }
:is(.moves-responsive-tables .tbl:not(.record-card-table), .instrk-table .insider-tbl) > tbody > tr > td[data-field="entity"] {
order: -2; flex-direction: column; align-items: flex-start; color: var(--ink); font-size: var(--t-ui-sm);
font-weight: var(--weight-semibold); }
:is(.moves-responsive-tables .tbl:not(.record-card-table), .instrk-table .insider-tbl) > tbody > tr > td[data-field="role_type"] { order: -2; }
:is(.moves-responsive-tables .tbl:not(.record-card-table), .instrk-table .insider-tbl) > tbody > tr > td[data-field="role_type"]::before { content: "\00b7"; margin-right: var(--s-8); }
:is(.moves-responsive-tables .tbl:not(.record-card-table), .instrk-table .insider-tbl) > tbody > tr > td[data-field="action"],
:is(.moves-responsive-tables .tbl:not(.record-card-table), .instrk-table .insider-tbl) > tbody > tr > td[data-field="value"],
:is(.moves-responsive-tables .tbl:not(.record-card-table), .instrk-table .insider-tbl) > tbody > tr > td[data-field="value_change"] { order: -1; }
:is(.moves-responsive-tables .tbl:not(.record-card-table), .instrk-table .insider-tbl) > tbody > tr > td[data-field$="_date"],
:is(.moves-responsive-tables .tbl:not(.record-card-table), .instrk-table .insider-tbl) > tbody > tr > td[data-field="report_period"] { white-space: nowrap; }
:is(.moves-responsive-tables .tbl:not(.record-card-table), .instrk-table .insider-tbl) > tbody > tr > td:has([data-missing-value]),
:is(.moves-responsive-tables .tbl:not(.record-card-table), .instrk-table .insider-tbl) > tbody > tr > td:has(.missing-value) { display: none; }
:is(.moves-responsive-tables .tbl:not(.record-card-table), .instrk-table .insider-tbl) .entity-cell,
:is(.moves-responsive-tables .tbl:not(.record-card-table), .instrk-table .insider-tbl) .cell-text {
max-width: 100%; min-width: 0; white-space: normal; overflow: visible; overflow-wrap: normal;
word-break: normal; hyphens: none; text-overflow: clip; }
:is(.moves-responsive-tables, .instrk-table) .table-component,
:is(.moves-responsive-tables, .instrk-table) .tbl-wrap { width: 100%; min-width: 0; max-width: 100%; overflow-x: visible; }
}
/* Table captions remain available to assistive technology without adding decorative chrome. */
table.tbl > caption {
position: absolute !important; display: block !important;
width: var(--px-1) !important; height: var(--px-1) !important;
padding: 0 !important; margin: calc(-1 * var(--px-1)) !important;
overflow: hidden !important; clip: rect(0 0 0 0) !important;
clip-path: inset(50%) !important; white-space: nowrap !important; border: 0 !important;
}
/* Batch 4 handoffs (2026-07-20): applied by coordinator from lane CSS handoff files. */
/* PF lane — portfolio hero four-fact grid + benchmark suffix + chart-band stat alignment. */
.portfolio-hero-facts.stats {
display: grid;
grid-template-columns: repeat(4, minmax(0, 1fr));
justify-content: normal;
gap: var(--card-gap);
}
.portfolio-hero-facts.stats > .stat { text-align: left; }
.portfolio-hero-facts .stat .t-stat {
font-size: var(--t-h3-s);
line-height: var(--t-h3-l);
font-weight: var(--weight-semibold);
}
.pos-summary { grid-template-columns: minmax(0, 1fr); }
.pos-summary .ps-right { justify-self: end; }
.pos-summary .ps-right > div { text-align: right; }
@media (max-width: 600px) {
.portfolio-hero-facts.stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.pos-summary .ps-right { width: 100%; }
}
/* INV lane — holdings list follows summary directly now the label is gone. */
.investor-card-holdings ul { margin-top: 0; }
/* ST-A lane — stock KPI tiles: equal-height three-zone grammar, contiguous owner rows. */
[data-stock-answer-items] > .grid { align-items: stretch; }
[data-stock-answer-items] > .grid > .answer {
display: grid;
grid-template-rows: auto 1fr auto;
gap: var(--s-8);
min-width: 0;
}
.stock-answer-owner-list { gap: 0; }
.stock-answer-owner-row { min-height: var(--s-32); }
/* WIDGET lane - quiet site-wide feedback control. */
.feedback-widget { position: fixed; right: var(--s-24); bottom: var(--s-24); z-index: 210; }
.feedback-widget--dev { bottom: var(--s-24); }
.feedback-launch, .feedback-close {
display: inline-flex; align-items: center; justify-content: center; cursor: pointer;
color: var(--ink); background: var(--bg); border: var(--border-w) solid var(--line);
transition: transform var(--motion-fast) ease, border-color var(--motion-fast) ease,
box-shadow var(--motion-fast) ease, background-color var(--motion-fast) ease;
}
.feedback-launch { width: var(--s-44); height: var(--s-44); padding: 0;
border-radius: var(--radius); box-shadow: var(--shadow); }
.feedback-launch:hover { transform: translateY(calc(-1 * var(--px-2)));
border-color: var(--muted); box-shadow: var(--shadow-hover); }
.feedback-launch:focus-visible, .feedback-close:focus-visible, .feedback-field :is(input, textarea):focus-visible {
outline: var(--focus-ring-w) solid var(--link); outline-offset: var(--px-2); }
.feedback-launch:active { transform: none; background: var(--surface); box-shadow: var(--shadow); }
.feedback-launch:disabled { cursor: not-allowed; opacity: var(--disabled-opacity); pointer-events: none; }
.feedback-popover { position: absolute; right: 0; bottom: calc(100% + var(--s-8));
display: grid; gap: var(--s-16); width: min(var(--s-360), calc(100vw - 2 * var(--s-16)));
padding: var(--s-16); border: var(--border-w) solid var(--line); border-radius: var(--radius);
background: var(--bg); box-shadow: var(--shadow-pop); }
.feedback-popover[hidden], .feedback-form[hidden], .feedback-success[hidden], .feedback-counter[hidden] { display: none; }
.feedback-popover-head { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--s-12); }
.feedback-popover-head p { color: var(--ink); font-size: var(--t-ui-sm); font-weight: var(--weight-semibold); }
.feedback-close { flex: 0 0 auto; width: var(--s-32); height: var(--s-32); padding: 0;
border-color: transparent; border-radius: var(--radius-sm); color: var(--muted); }
.feedback-close:hover { color: var(--ink); background: var(--surface); border-color: var(--line); }
.feedback-close:active { background: var(--surface-strong); }
.feedback-close:disabled { cursor: not-allowed; opacity: var(--disabled-opacity); pointer-events: none; }
.feedback-form { display: grid; gap: var(--s-4); }
.feedback-field { display: grid; gap: var(--s-4); color: var(--ink); font-size: var(--t-small-s);
font-weight: var(--weight-semibold); }
.feedback-field input, .feedback-field textarea { width: 100%; padding: var(--s-8) var(--s-12);
color: var(--ink); background: var(--bg); border: var(--border-w) solid var(--control-border);
border-radius: var(--radius-sm); font: inherit; font-weight: var(--weight-regular); }
.feedback-field input { height: var(--control-h); }
.feedback-field textarea { min-height: var(--s-120); resize: vertical; }
.feedback-field :is(input, textarea):hover { border-color: var(--muted); }
.feedback-field :is(input, textarea)[aria-invalid="true"] { border-color: var(--sell); }
.feedback-error, .feedback-submit-error { min-height: var(--s-16); color: var(--sell);
font-size: var(--t-small-s); line-height: var(--t-small-l); }
.feedback-field-meta { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--s-8); }
.feedback-counter { flex: 0 0 auto; color: var(--muted); font-size: var(--t-small-s);
font-variant-numeric: tabular-nums; }
.feedback-submit { width: 100%; margin-top: var(--s-4); }
.feedback-hp { position: absolute; width: var(--px-1); height: var(--px-1); padding: 0;
margin: calc(-1 * var(--px-1)); overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
.feedback-success { display: grid; gap: var(--s-4); padding: var(--s-8) 0 var(--s-12); }
.feedback-success strong { color: var(--ink); }
.feedback-success p { color: var(--muted); }
@media (max-width: 600px) {
.feedback-widget { right: var(--s-16); bottom: var(--s-16); }
.feedback-widget--dev { bottom: var(--s-16); }
}
/* ===== Batch 5 lane CSS handoffs (2026-07-20), applied by coordinator ===== */
/* PORT2 — answer-box prose entity links use --ink, underline on hover only (comment 5e631b05). */
.portfolio-answer .portfolio-answer-entity {
color: var(--ink);
text-decoration: none;
}
.portfolio-answer .portfolio-answer-entity:hover,
.portfolio-answer .portfolio-answer-entity:focus {
color: var(--ink);
text-decoration: underline;
}
/* STOCK2 — 52-week range alignment (comment 054ee3d2). */
.stock-range-item { align-items: baseline; }
.stock-range-slider { position: relative; gap: 0; padding-bottom: var(--s-8); }
.stock-range-labels { font-size: inherit; line-height: inherit; font-weight: var(--weight-semibold); }
.stock-range-track { position: absolute; inset-inline: 0; bottom: 0; margin-top: 0; }
/* STOCK2 — institutional-activity KPI one type step smaller (comment ef806267). */
[data-answer-kind="activity"] [data-answer-value] { font-size: var(--t-h2-s); line-height: var(--t-h2-l); }
/* STOCK2 — fam-card shared action pill + neutral magnitude line (comment 0f2e4c4e). */
.fam-card .fam-status { display: flex; align-items: center; }
.fam-flow-magnitude { margin-top: var(--s-8); color: var(--body); font-size: var(--t-small-s); line-height: var(--t-small-l); font-weight: var(--weight-regular); }
/* ---------- 320px stock-page fit (pre-launch audit item 6, 2026-07-20) ----------
The chart range row previously pushed the custom-dates past the right
edge (page scrollWidth 371 at a 320px viewport); the table-expansion gate pill
(nowrap) was 404px wide. Tables already scroll inside .tbl-wrap; the PAGE must
never scroll horizontally. */
@media (max-width: 360px) {
.chart-ranges { flex-wrap: wrap; justify-content: flex-end; left: var(--s-16); }
.chart-ranges .date-card { min-width: 0; width: min(var(--s-320), calc(100vw - var(--s-48))); }
.blur-gate-cta .gate-pill { white-space: normal; max-width: calc(100vw - var(--s-48)); }
}
/* ---------- 44px mobile touch targets (pre-launch audit item 7, 2026-07-20) ----------
Inline links (in-table ticker/date links, footer links) get vertical padding: on an
inline box, block-axis padding expands the hit area and the bounding rect WITHOUT
moving line layout, so the visual design does not change. The header logo mark keeps
its 28px visual via padding + equal negative margin. */
@media (max-width: 600px) {
/* Button-styled links (pager .btn-quiet, chips) already meet 44px via --control-h
and are flex boxes where padding WOULD move layout, so they are excluded. */
.table-component a:not(.btn-quiet):not(.btn-gold):not(.chip-btn):not(.chip-link):not(.sortbtn):not(.gate-pill),
footer li a, .footer-legal a, .breadcrumb a { padding-block: var(--s-16); }
.hdr .logo { padding: var(--s-8); margin: calc(-1 * var(--s-8)); }
}