/* Parallax Research — brand colorway (the para//ax wordmark).
Day: white/near-white surfaces, charcoal-navy ink, burnt-orange accent.
Night: charcoal-black surfaces, warm white ink, the same orange lifted.
Status colors validated (dataviz six-checks) for both modes:
day #15803d / #a16207 / #b91c1c on #ffffff
night #37a970 / #b3831f / #e0654f on #16171c */
:root {
--bg: #f6f4f0; --bg-2: #edeae4; --panel: #ffffff; --panel-2: #f9f7f4;
--ink: #1c1f28; --ink-2: #464b58; --muted: #6e7280; --faint: #9da0a9;
--line: #e7e5df; --line-2: #f0eee9;
--accent: #c05a28; --accent-ink: #ffffff; --accent-soft: #faeee5;
--brand-orange: #d97d4a;
--green: #15803d; --green-soft: #e6f4eb; --green-ink: #136b34;
--red: #b91c1c; --red-soft: #fbeaea; --red-ink: #a51a1a;
--amber: #a16207; --amber-soft: #f8f0dd; --amber-ink: #8a5406;
/* Near-square. Soft 12px corners are consumer-app language; research
terminals and the printed notes they descend from are ruled, not
rounded. This one token moves the register more than any other. */
--radius: 3px; --radius-sm: 2px;
--shadow: 0 1px 2px rgba(28,31,40,.06), 0 6px 22px rgba(28,31,40,.06);
--shadow-sm: 0 1px 2px rgba(28,31,40,.07);
--sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Inter, Roboto, sans-serif;
--mono: ui-monospace, "SF Mono", Menlo, monospace;
--wrap: 1460px;
--wrap-read: 1000px;
color-scheme: light;
/* The active scheme, readable from JS. Third-party embeds (the
TradingView iframe) need to be told light/dark explicitly, and
the stylesheet is the only thing that actually knows — it wins
whether the scheme came from the OS query or a data-theme pin. */
--ui-scheme: "light";
}
@media (prefers-color-scheme: dark) {
:root {
color-scheme: dark;
--ui-scheme: "dark";
--bg: #0e0f12; --bg-2: #14151a; --panel: #16171c; --panel-2: #1e2026;
--ink: #f2f0ec; --ink-2: #c7c5c0; --muted: #8f8e8a; --faint: #605f5c;
--line: #272931; --line-2: #202229;
--accent: #c05a28; --accent-ink: #ffffff; --accent-soft: rgba(192,90,40,.16);
--brand-orange: #d97d4a;
--green: #37a970; --green-soft: rgba(55,169,112,.13); --green-ink: #6cc898;
--red: #e0654f; --red-soft: rgba(224,101,79,.13); --red-ink: #ec8a78;
--amber: #b3831f; --amber-soft: rgba(179,131,31,.15); --amber-ink: #d3a94e;
--shadow: 0 1px 2px rgba(0,0,0,.5), 0 10px 32px rgba(0,0,0,.4);
--shadow-sm: 0 1px 2px rgba(0,0,0,.45);
}
}
:root[data-theme="dark"] {
color-scheme: dark;
--ui-scheme: "dark";
--bg: #0e0f12; --bg-2: #14151a; --panel: #16171c; --panel-2: #1e2026;
--ink: #f2f0ec; --ink-2: #c7c5c0; --muted: #8f8e8a; --faint: #605f5c;
--line: #272931; --line-2: #202229;
--accent: #c05a28; --accent-ink: #ffffff; --accent-soft: rgba(192,90,40,.16);
--brand-orange: #d97d4a;
--green: #37a970; --green-soft: rgba(55,169,112,.13); --green-ink: #6cc898;
--red: #e0654f; --red-soft: rgba(224,101,79,.13); --red-ink: #ec8a78;
--amber: #b3831f; --amber-soft: rgba(179,131,31,.15); --amber-ink: #d3a94e;
--shadow: 0 1px 2px rgba(0,0,0,.5), 0 10px 32px rgba(0,0,0,.4);
--shadow-sm: 0 1px 2px rgba(0,0,0,.45);
}
:root[data-theme="light"] {
color-scheme: light;
--ui-scheme: "light";
--bg: #f6f4f0; --bg-2: #edeae4; --panel: #ffffff; --panel-2: #f9f7f4;
--ink: #1c1f28; --ink-2: #464b58; --muted: #6e7280; --faint: #9da0a9;
--line: #e7e5df; --line-2: #f0eee9;
--accent: #c05a28; --accent-ink: #ffffff; --accent-soft: #faeee5;
--brand-orange: #d97d4a;
--green: #15803d; --green-soft: #e6f4eb; --green-ink: #136b34;
--red: #b91c1c; --red-soft: #fbeaea; --red-ink: #a51a1a;
--amber: #a16207; --amber-soft: #f8f0dd; --amber-ink: #8a5406;
--shadow: 0 1px 2px rgba(28,31,40,.06), 0 6px 22px rgba(28,31,40,.06);
--shadow-sm: 0 1px 2px rgba(28,31,40,.07);
}
* { box-sizing: border-box; }
/* The `hidden` attribute lives in the UA stylesheet, and ANY author rule that
sets display beats it on cascade origin — so `.push-nudge { display:flex }`
silently made el.hidden = true a no-op, leaving the push prompt permanently
on the dashboard with a dismiss button that appeared dead. Anything the
markup or a script marks hidden is hidden, full stop. */
[hidden] { display: none !important; }
/* NOTHING ON THIS SITE SCROLLS SIDEWAYS. There was a guard for it, but only
inside the phone media query, so any desktop page with one over-wide child
dragged the whole layout - nav and all - off to the left.
`clip`, not `hidden`. `overflow: hidden` on html/body makes the element a
scroll container, which silently kills `position: sticky` - and the nav,
the desk sub-nav, the gate bar, the report TOC chips and the whitepaper
contents are all sticky. `clip` cuts the overflow without creating that
container, so they keep working.
This is a backstop, not a licence: anything genuinely wide (tables, code,
charts) still needs its own `overflow-x: auto` wrapper so it can be
scrolled on its own rather than silently truncated. */
html { -webkit-text-size-adjust: 100%; overflow-x: clip; max-width: 100%; }
body { overflow-x: clip; max-width: 100%; }
body { margin: 0; background: var(--bg); color: var(--ink); font-family: var(--sans);
font-size: 15px; line-height: 1.62; -webkit-font-smoothing: antialiased; }
a { color: var(--accent); text-decoration: none; }
a:hover { text-decoration: underline; text-underline-offset: 2px; }
h1, h2 { font-family: var(--sans); font-weight: 700; letter-spacing: -.022em; text-wrap: balance; }
h3, h4 { letter-spacing: -.01em; }
/* ── nav ─────────────────────────────────────────────────────── */
.nav { position: sticky; top: 0; z-index: 50; display: flex; align-items: center; gap: 8px;
padding: 0 24px; height: 60px; border-bottom: 1px solid var(--line);
background: color-mix(in srgb, var(--bg) 86%, transparent);
backdrop-filter: saturate(1.3) blur(12px); }
/* The para//ax lockup (real logo assets in /static/brand/). The light/dark
image swap follows the same three-block precedence as the theme tokens:
OS preference is the default, an explicit data-theme wins either way. */
.nav-brand { display: flex; align-items: center; flex-shrink: 0; }
.nav-brand img { height: 21px; width: auto; display: block; }
.nav-brand .logo-dark { display: none; }
@media (prefers-color-scheme: dark) {
:root:not([data-theme="light"]) .nav-brand .logo-light { display: none; }
:root:not([data-theme="light"]) .nav-brand .logo-dark { display: block; }
}
:root[data-theme="dark"] .nav-brand .logo-light { display: none; }
:root[data-theme="dark"] .nav-brand .logo-dark { display: block; }
.nav-tabs { display: flex; gap: 2px; margin-left: 22px; min-width: 0; overflow-x: auto;
scrollbar-width: none; }
.nav-tabs::-webkit-scrollbar { display: none; }
.nav-tabs a { white-space: nowrap; }
.nav-right { flex-shrink: 0; }
.nav-tabs a { color: var(--ink-2); font-size: 14px; font-weight: 550; padding: 7px 13px; border-radius: var(--radius); }
.nav-tabs a:hover { background: var(--bg-2); text-decoration: none; color: var(--ink); }
.nav-tabs a.active { color: var(--accent); background: var(--accent-soft); }
.nav-right { margin-left: auto; display: flex; align-items: center; gap: 14px; }
.nav-right a:not(.btn), .nav-right .linklike { color: var(--muted); font-size: 13.5px; }
.icon-btn { background: none; border: 1px solid var(--line); border-radius: var(--radius); width: 34px; height: 34px;
cursor: pointer; color: var(--ink-2); font-size: 15px; display: grid; place-items: center; }
.icon-btn:hover { border-color: var(--accent); color: var(--accent); }
.inline-form { display: inline; }
/* floating back-to-top (injected by ui.js on long pages) */
.to-top { position: fixed; right: 18px; bottom: 18px; z-index: 45; width: 40px; height: 40px;
border-radius: 50%; border: 1px solid var(--line); background: var(--panel); color: var(--ink-2);
box-shadow: var(--shadow); cursor: pointer; font-size: 17px; display: grid; place-items: center;
opacity: 0; transform: translateY(8px); pointer-events: none; transition: opacity .2s, transform .2s; }
.to-top.show { opacity: 1; transform: none; pointer-events: auto; }
.to-top:hover { color: var(--accent); border-color: var(--accent); }
.linklike { background: none; border: none; font: inherit; cursor: pointer; padding: 0; }
.linklike:hover { color: var(--ink); }
/* ── layout ──────────────────────────────────────────────────── */
.wrap { max-width: var(--wrap); margin: 0 auto; padding: 30px 32px 64px; }
.wrap.wrap-read { max-width: var(--wrap-read); }
.wrap.narrow { max-width: 470px; }
/* landing hero fills the viewport below the nav and self-centers; the wrap's
top padding would push it down and make the top gap exceed the bottom. */
.wrap.wrap-flush { padding-top: 0; }
.foot { max-width: var(--wrap); margin: 26px auto; padding: 20px 24px 0; color: var(--faint);
font-size: 11.5px; border-top: 1px solid var(--line); line-height: 1.55; }
.page-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px;
flex-wrap: wrap; margin: 4px 0 22px; }
.page-head h1 { font-size: 30px; margin: 0; }
.page-head p { margin: 5px 0 0; color: var(--muted); font-size: 14px; }
.eyebrow { color: var(--accent); font-weight: 700; font-size: 11.5px; text-transform: uppercase;
letter-spacing: .13em; font-family: var(--sans); }
.card { background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius);
box-shadow: var(--shadow-sm); padding: 24px 28px; margin-bottom: 18px; }
.card > h2 { margin: 0 0 4px; font-size: 19px; }
.sub { color: var(--muted); font-size: 13.5px; }
/* wide frame, readable measure: descriptive prose never stretches past ~72ch */
.page-head p, .card > p.sub, .card > .sub { max-width: 72ch; }
.grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
/* let the columns shrink: grid items default to min-width:auto, which lets a
nowrap table (e.g. dark-pool blocks) blow its track past 1fr and overflow the
card instead of scrolling inside its own .tbl-wrap. */
.grid-2 > * { min-width: 0; }
.muted { color: var(--muted); } .small { font-size: 12.5px; } .center { text-align: center; }
.mono { font-family: var(--mono); font-size: 12.5px; }
.tick { font-family: var(--mono); font-weight: 700; letter-spacing: .01em; }
/* ── buttons + forms ─────────────────────────────────────────── */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 7px;
border: 1px solid var(--line); border-radius: var(--radius); background: var(--panel);
color: var(--ink); padding: 9px 16px; font-size: 14px; font-weight: 600;
cursor: pointer; font-family: var(--sans); transition: border-color .12s, background .12s; }
.btn:hover { text-decoration: none; border-color: var(--accent); }
.btn-primary { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); }
.btn-primary:hover { filter: brightness(1.07); }
.btn-lg { padding: 12px 26px; font-size: 15.5px; border-radius: var(--radius); }
.btn-sm { padding: 5px 12px; font-size: 13px; }
.btn-danger { color: var(--red); border-color: color-mix(in srgb, var(--red) 40%, var(--line)); }
.btn-danger:hover { background: var(--red-soft); border-color: var(--red); }
.btn:disabled { opacity: .5; cursor: not-allowed; }
label.field { display: flex; flex-direction: column; gap: 6px; font-size: 13px; font-weight: 600; }
input, select { border: 1px solid var(--line); border-radius: var(--radius); background: var(--panel);
color: var(--ink); padding: 10px 13px; font-size: 15px; font-family: var(--sans); width: 100%; }
input:focus, select:focus { outline: 2px solid var(--accent); outline-offset: 1px; border-color: transparent; }
.stack { display: flex; flex-direction: column; gap: 14px; margin-top: 14px; }
.divider { display: flex; align-items: center; gap: 12px; color: var(--faint); font-size: 12px; margin: 16px 0; }
.divider::before, .divider::after { content: ""; flex: 1; height: 1px; background: var(--line); }
.analyze-bar { display: flex; gap: 10px; }
.analyze-bar .ticker-input { flex: 1; max-width: 230px; text-transform: uppercase;
font-family: var(--mono); font-weight: 700; font-size: 17px; letter-spacing: .06em; }
/* terminal lookup accepts a name too — natural text, fills the row */
.analyze-bar .term-q { flex: 1; min-width: 0; font-size: 15px; }
/* Both dashboard inputs share ONE placeholder look — plain sans, 15px, same grey —
even though the ticker input still renders TYPED text as bold uppercase mono. */
.analyze-bar .ticker-input::placeholder,
.analyze-bar .term-q::placeholder {
font-family: var(--sans); font-weight: 400; text-transform: none;
letter-spacing: normal; font-size: 15px; }
/* ── notes ───────────────────────────────────────────────────── */
.note { border-radius: var(--radius); padding: 11px 15px; font-size: 13.5px; margin: 0 0 14px;
border: 1px solid transparent; }
.note.ok { background: var(--green-soft); color: var(--green-ink); border-color: color-mix(in srgb, var(--green) 25%, transparent); }
.note.err { background: var(--red-soft); color: var(--red-ink); border-color: color-mix(in srgb, var(--red) 25%, transparent); word-break: break-word; }
.note.info{ background: var(--accent-soft); color: var(--accent); border-color: color-mix(in srgb, var(--accent) 24%, transparent); }
/* ── stat tiles ──────────────────────────────────────────────── */
.stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(118px, 1fr)); gap: 10px; }
.stat { background: var(--panel-2); border: 1px solid var(--line-2); border-radius: var(--radius-sm);
padding: 13px 16px 11px; }
.stat .n { font-family: var(--sans); font-size: 26px; font-weight: 650; line-height: 1.05; }
.stat .l { color: var(--muted); font-size: 11.5px; margin-top: 4px; letter-spacing: .02em; }
.stat .n.buy { color: var(--green-ink); } .stat .n.sell { color: var(--red-ink); } .stat .n.hold { color: var(--amber-ink); }
/* ── tables ──────────────────────────────────────────────────── */
.tbl-wrap { overflow-x: auto; }
table.tbl { width: 100%; border-collapse: collapse; font-size: 13.5px; }
table.tbl th { text-align: left; color: var(--muted); font-size: 10.5px; text-transform: uppercase;
letter-spacing: .08em; font-weight: 700; padding: 9px 12px; border-bottom: 1px solid var(--line); white-space: nowrap; }
table.tbl td { padding: 10px 12px; border-bottom: 1px solid var(--line-2); white-space: nowrap; }
table.tbl tr:last-child td { border-bottom: none; }
table.tbl tbody tr:hover { background: var(--panel-2); }
.num { text-align: right; font-family: var(--mono); font-size: 12.5px; font-variant-numeric: tabular-nums; }
/* header cells need the .num alignment too — `table.tbl th` (specificity 0,1,2)
outranks bare `.num` (0,1,0), so without this the headers stay left while the
numeric data goes right and the columns visibly drift apart. */
table.tbl th.num { text-align: right; }
/* flow/dark-pool tables live two-up inside a grid-2, so each gets ~half the
card — tighten the cell padding + size so all four columns fit that narrow
column instead of forcing a horizontal scrollbar. */
#options table.tbl td, #options table.tbl th { padding: 7px 8px; font-size: 12.5px; }
#options table.tbl td.small, #options table.tbl td .small { font-size: 11.5px; }
/* the flow + dark-pool tables carry wide content (contract strings, timestamps)
and the company card is a narrow reading column — side-by-side left each at
~half and clipped/scrolling. Stack them so each spans the full card width. */
#options .grid-2 { grid-template-columns: 1fr; gap: 20px; }
.pos { color: var(--green-ink); } .neg { color: var(--red-ink); }
.row-link { cursor: pointer; }
/* ── pills / badges / chips ──────────────────────────────────── */
.pill { display: inline-block; border-radius: var(--radius-sm); padding: 2px 11px; font-size: 11.5px;
font-weight: 750; letter-spacing: .03em; }
.pill-buy { background: var(--green-soft); color: var(--green-ink); }
.pill-sell { background: var(--red-soft); color: var(--red-ink); }
.pill-hold { background: var(--amber-soft); color: var(--amber-ink); }
.pill-na { background: var(--bg-2); color: var(--muted); }
.badge { display: inline-block; background: var(--bg-2); color: var(--ink-2); border-radius: var(--radius);
padding: 2px 8px; font-size: 11.5px; font-weight: 600; }
.badge.mom { background: var(--accent-soft); color: var(--accent); }
.badge.can { background: var(--amber-soft); color: var(--amber-ink); }
.badge.pass { background: var(--green-soft); color: var(--green-ink); }
.chips { display: flex; flex-wrap: wrap; gap: 7px; }
.chip { font-family: var(--mono); font-weight: 700; font-size: 12.5px; background: var(--panel-2);
border: 1px solid var(--line); border-radius: var(--radius); padding: 5px 10px; color: var(--ink); cursor: pointer; }
.chip:hover { border-color: var(--accent); color: var(--accent); text-decoration: none; }
.chip.on { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); }
/* ── landing ─────────────────────────────────────────────────── */
.hero { text-align: center; padding: 64px 0 36px; }
.hero h1 { font-size: 52px; line-height: 1.06; margin: 14px 0 20px; font-weight: 600; }
.hero .lede { max-width: 640px; margin: 0 auto 12px; color: var(--ink-2); font-size: 17px; }
.hero .cta { margin-top: 26px; }
.cta { display: flex; gap: 12px; justify-content: center; align-items: center; flex-wrap: wrap; }
.feature-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 14px; margin-top: 36px; }
.feature { background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); padding: 22px 24px; }
.feature .ic { font-size: 20px; }
.feature h3 { margin: 10px 0 5px; font-size: 15.5px; font-family: var(--sans); font-size: 17px; }
.feature p { margin: 0; color: var(--muted); font-size: 13.5px; }
/* ── live job page ───────────────────────────────────────────── */
.progress-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.progress-head h1 { font-size: 26px; margin: 0; }
.progress-track { height: 7px; background: var(--bg-2); border-radius: var(--radius); overflow: hidden; margin: 16px 0 7px; }
.progress-fill { height: 100%; background: var(--accent); border-radius: var(--radius); width: 0; transition: width .6s ease; }
.progress-meta { display: flex; justify-content: space-between; color: var(--muted); font-size: 12.5px; }
.agent-steps { display: flex; flex-wrap: wrap; gap: 8px; margin: 16px 0 2px; }
.step-chip { display: flex; align-items: center; gap: 6px; font-size: 12.5px; padding: 5px 11px;
border-radius: var(--radius-sm); border: 1px solid var(--line); color: var(--muted); background: var(--panel); }
.step-chip .dot { width: 7px; height: 7px; border-radius: 50%; background: var(--faint); }
.step-chip.done { color: var(--green-ink); border-color: color-mix(in srgb, var(--green) 32%, transparent); background: var(--green-soft); }
.step-chip.done .dot { background: var(--green); }
.step-chip.active { color: var(--accent); border-color: var(--accent); background: var(--accent-soft); }
.step-chip.active .dot { background: var(--accent); animation: pulse 1.1s infinite; }
@keyframes pulse { 0%,100% { opacity: 1; } 50% { opacity: .3; } }
.spin { width: 14px; height: 14px; border: 2px solid var(--line); border-top-color: var(--accent);
border-radius: 50%; animation: spin 1s linear infinite; display: inline-block; vertical-align: -2px; }
@keyframes spin { to { transform: rotate(360deg); } }
.live-sections { margin-top: 6px; }
.sec { border: 1px solid var(--line); border-radius: var(--radius-sm); margin-bottom: 12px;
overflow: hidden; background: var(--panel); animation: slidein .4s ease; }
@keyframes slidein { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
.sec > summary { cursor: pointer; list-style: none; padding: 13px 18px; font-weight: 650; font-size: 14.5px;
display: flex; align-items: center; gap: 8px; background: var(--panel-2); }
.sec > summary::-webkit-details-marker { display: none; }
.sec > summary::after { content: "▸"; margin-left: auto; color: var(--muted); transition: transform .15s; }
.sec[open] > summary::after { transform: rotate(90deg); }
.sec .body { padding: 6px 20px 16px; }
/* ── price chart ─────────────────────────────────────────────── */
.chart-card { position: relative; }
.chart-wrap { position: relative; margin-top: 10px; }
.chart-wrap svg { display: block; width: 100%; height: auto; }
.chart-tip { position: absolute; pointer-events: none; background: var(--panel); border: 1px solid var(--line);
border-radius: var(--radius); box-shadow: var(--shadow); padding: 6px 10px; font-size: 12px;
font-family: var(--mono); display: none; white-space: nowrap; z-index: 5; }
.chart-head { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; }
.chart-head .px { font-family: var(--sans); font-size: 24px; font-weight: 650; }
.chart-head .chg { font-family: var(--mono); font-size: 13px; font-weight: 700; }
/* ── report ──────────────────────────────────────────────────── */
.report-hero { display: flex; align-items: flex-start; justify-content: space-between; gap: 20px;
flex-wrap: wrap; background: var(--panel); border: 1px solid var(--line);
border-left: 5px solid var(--muted); border-radius: var(--radius); padding: 26px 30px;
margin-bottom: 18px; box-shadow: var(--shadow-sm); }
.report-hero h1 { margin: 0 0 4px; font-size: 34px; }
.report-hero .arrow { color: var(--faint); font-weight: 400; }
.decision-buy { border-left-color: var(--green); } .decision-buy h1 .d { color: var(--green-ink); }
.decision-sell { border-left-color: var(--red); } .decision-sell h1 .d { color: var(--red-ink); }
.decision-hold { border-left-color: var(--amber); } .decision-hold h1 .d { color: var(--amber-ink); }
/* price + key levels, inline in the hero (the chart card is gone) */
.hero-levels { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 14px; }
.hlv { display: inline-flex; align-items: baseline; gap: 7px; padding: 6px 11px;
background: var(--panel-2); border: 1px solid var(--line); border-radius: var(--radius); }
.hlv span { font-size: 10.5px; text-transform: uppercase; letter-spacing: .06em;
color: var(--muted); font-weight: 700; }
.hlv b { font-family: var(--mono); font-size: 13.5px; font-variant-numeric: tabular-nums; }
.hlv b.pos { color: var(--green-ink); } .hlv b.neg { color: var(--red-ink); }
/* ── report: retail verdict card (why it works / what could go wrong + levels) ── */
.vcard { border-left: 5px solid var(--muted); }
.vcard-grid { display: grid; grid-template-columns: 1fr 250px; gap: 22px; align-items: start; }
@media (max-width: 720px) { .vcard-grid { grid-template-columns: 1fr; } }
.vcard-cases { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
@media (max-width: 520px) { .vcard-cases { grid-template-columns: 1fr; } }
.vc-case b { display: block; font-size: 13px; margin-bottom: 6px; }
.vc-case.vc-bull b { color: var(--green-ink); }
.vc-case.vc-bear b { color: var(--red-ink); }
.vc-case ul { margin: 0; padding-left: 17px; }
.vc-case li { font-size: 13.5px; line-height: 1.5; margin-bottom: 5px; }
.vcard-levels { background: var(--panel-2); border: 1px solid var(--line); border-radius: var(--radius); padding: 12px 14px; }
.vc-lv-head { font-size: 11px; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); font-weight: 700; margin-bottom: 8px; }
.vc-lv { display: flex; justify-content: space-between; align-items: baseline; padding: 5px 0; border-top: 1px solid var(--line-2); font-size: 13.5px; }
.vc-lv:first-of-type { border-top: none; }
.vc-lv span { color: var(--muted); }
.vc-lv b { font-variant-numeric: tabular-nums; }
.vc-lv b.pos { color: var(--green-ink); } .vc-lv b.neg { color: var(--red-ink); }
/* report: shareable "win" banner when a tracked call has paid off */
.win-banner { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap;
border-left: 5px solid var(--green); background: color-mix(in srgb, var(--green) 9%, var(--panel)); }
.win-msg { display: flex; align-items: center; gap: 12px; }
.win-emoji { font-size: 26px; flex: none; }
.win-act { flex: none; }
.win-act .share-url { width: 260px; max-width: 60vw; }
/* report: Simple ⇄ Detailed rationale toggle (CSS radios, CSP-safe) */
.rc-card .rc-radio { position: absolute; opacity: 0; width: 1px; height: 1px; }
.rc-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-bottom: 12px; }
.rc-tabs { display: inline-flex; gap: 3px; background: var(--panel-2); border: 1px solid var(--line); border-radius: var(--radius); padding: 3px; }
.rc-tab { padding: 5px 14px; border-radius: var(--radius); cursor: pointer; font-size: 13px; font-weight: 650; color: var(--muted); user-select: none; }
.rc-tab:hover { color: var(--ink); }
.rc-pane { display: none; }
#rc-simple:checked ~ .rc-simple,
#rc-full:checked ~ .rc-full { display: block; }
#rc-simple:checked ~ .rc-head .rc-tab[for="rc-simple"],
#rc-full:checked ~ .rc-head .rc-tab[for="rc-full"] { background: var(--panel); color: var(--ink); box-shadow: 0 1px 2px rgba(0,0,0,.12); }
.rc-eli5 { font-size: 15px; line-height: 1.62; color: var(--ink); margin: 0; }
.md { font-size: 14.5px; line-height: 1.72; overflow-wrap: break-word; }
.md h3 { margin: 22px 0 8px; font-size: 16.5px; font-weight: 700; letter-spacing: -.01em; }
.md h4 { margin: 20px 0 6px; font-size: 14.5px; font-weight: 700; color: var(--ink);
padding-bottom: 5px; border-bottom: 1px solid var(--line-2); }
.md h5, .md h6 { margin: 16px 0 4px; font-size: 12px; font-weight: 700; text-transform: uppercase;
letter-spacing: .07em; color: var(--muted); }
.md h3:first-child, .md h4:first-child { margin-top: 2px; }
.md p { margin: 9px 0; color: var(--ink-2); }
.md ul, .md ol { margin: 8px 0 12px; padding-left: 22px; color: var(--ink-2); }
.md li { margin: 4px 0; padding-left: 2px; }
.md li::marker { color: var(--accent); font-weight: 600; }
.md strong { color: var(--ink); font-weight: 650; }
.md em { color: var(--muted); }
.md .md-hr { border: 0; border-top: 1px solid var(--line-2); margin: 18px 0; }
.md code { background: var(--bg-2); padding: 1px 6px; border-radius: var(--radius); font-size: 12.5px; font-family: var(--mono); }
.md table.md-tbl { width: 100%; border-collapse: collapse; margin: 12px 0; font-size: 13px; }
.md .md-tbl th, .md .md-tbl td { border: 1px solid var(--line); padding: 7px 10px; text-align: left; }
.md .md-tbl th { background: var(--panel-2); font-weight: 650; }
.share-box { min-width: 200px; text-align: right; }
.share-url { font-family: var(--mono); font-size: 11.5px; margin-bottom: 8px; }
details.section { border: 1px solid var(--line); border-radius: var(--radius-sm); margin-bottom: 12px;
background: var(--panel); overflow: hidden; box-shadow: var(--shadow-sm); }
details.section > summary { cursor: pointer; list-style: none; padding: 15px 22px; font-weight: 650;
display: flex; align-items: center; background: var(--panel-2); font-size: 14.5px; }
details.section > summary::-webkit-details-marker { display: none; }
details.section > summary::after { content: "▸"; margin-left: auto; color: var(--muted); transition: transform .15s; }
details.section[open] > summary::after { transform: rotate(90deg); }
details.section .body { padding: 4px 24px 18px; }
.headlines li { margin: 7px 0; font-size: 13.5px; }
.headlines .src { color: var(--faint); font-size: 12px; }
/* ── macro briefing ──────────────────────────────────────────── */
.regime-card { border-left: 5px solid var(--amber); }
.regime-text { font-family: var(--sans); font-size: 17px; margin: 6px 0 0; line-height: 1.55; }
.risk-list { margin: 10px 0 0; padding-left: 22px; }
.risk-list li { margin: 7px 0; font-size: 14px; }
.sig-card { border-left: 4px solid var(--line); }
.sig-sub { font-size: 12px; text-transform: uppercase; letter-spacing: .07em; color: var(--muted);
margin: 18px 0 6px; font-weight: 700; }
.meter-row { display: flex; align-items: center; gap: 10px; }
.meter-lbl { min-width: 110px; font-size: 13px; color: var(--ink-2); }
.meter { flex: 1; height: 7px; background: var(--bg-2); border-radius: var(--radius); overflow: hidden; }
.meter-fill { height: 100%; background: var(--accent); border-radius: var(--radius); }
.meter-fill.fill-neg { background: var(--red); }
.meter-fill.fill-amber { background: var(--amber); }
.meter-val { width: 44px; text-align: right; font-family: var(--mono); font-size: 12px;
font-variant-numeric: tabular-nums; }
.scenario-row { margin-top: 8px; }
.scenario-row .meter-lbl { min-width: 160px; }
.scenario-detail { margin: 2px 0 0 170px; }
.evidence { margin-top: 14px; }
.evidence summary { cursor: pointer; }
@media (max-width: 720px) { .scenario-detail { margin-left: 0; } }
/* ── misc ────────────────────────────────────────────────────── */
.kv { display: grid; grid-template-columns: 140px 1fr; gap: 9px 14px; margin: 14px 0; }
.kv dt { color: var(--muted); font-size: 13.5px; } .kv dd { margin: 0; }
.empty { color: var(--muted); text-align: center; padding: 28px; font-size: 14px; }
.tr-row { display: flex; gap: 22px; flex-wrap: wrap; align-items: baseline; }
.tr-item .v { font-family: var(--sans); font-size: 22px; font-weight: 650; }
.tr-item .k { color: var(--muted); font-size: 11.5px; }
@media (max-width: 720px) {
.grid-2 { grid-template-columns: 1fr; }
.hero h1 { font-size: 34px; }
/* Phones: hamburger panel replaces the old scroll-strip nav. */
.nav { flex-wrap: nowrap; padding: 0 14px; position: relative; }
/* .nav prefix: the base display:none was appended LATER in this file and
ties on specificity — without the prefix the cascade re-hides the burger */
.nav .nav-burger { display: inline-flex; }
.nav-tabs { display: none; position: absolute; top: 100%; left: 0; right: 0; z-index: 60;
flex-direction: column; align-items: stretch; gap: 2px; margin: 0; padding: 10px 12px 14px;
background: var(--panel); border-bottom: 1px solid var(--line);
box-shadow: 0 12px 24px rgba(0,0,0,.12); overflow: visible; }
.nav.open .nav-tabs { display: flex; }
.nav-tabs a { padding: 11px 12px; font-size: 15px; }
/* Desks flatten into the panel: no dropdown to fight with on touch. */
.nav-dd { display: block; }
.nav-dd-toggle { display: none; }
.nav-dd-menu { position: static !important; display: block; min-width: 0; box-shadow: none;
border: 0; border-left: 2px solid var(--line); border-radius: 0; margin: 2px 0 2px 12px; padding: 0 0 0 4px; }
.nav-dd-menu a { font-size: 14.5px; padding: 10px 12px; }
.nav-search-wrap { display: none; }
/* Trim nav-right so it never forces a page-wide horizontal scroll on a phone.
The ⌘K chip is desktop-only (no keyboard shortcut on touch anyway); the
account link collapses to just its icon; sign-out lives on the Account
page. What remains: burger · brand · bell · account icon — always fits. */
.nav-right .inline-form { display: none; }
.nav-user-name { display: none; }
.nav-right { gap: 12px; }
/* Now handled globally at the top with `clip`. `hidden` here made html a
scroll container on phones, which quietly disabled every sticky element -
the nav included - on exactly the screens that need it most. */
.report-hero { flex-direction: column; } .share-box { text-align: left; }
.analyze-bar { flex-wrap: wrap; } .analyze-bar .ticker-input { max-width: none; }
.page-head h1 { font-size: 24px; }
}
/* ── pricing ──────────────────────────────────────────────────── */
.plans-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
gap: 14px; margin-top: 18px; }
.plan { background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius);
padding: 22px 20px 18px; display: flex; flex-direction: column; gap: 7px;
position: relative; box-shadow: var(--shadow-sm); }
.plan.featured { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent), var(--shadow); }
.plan .flag { position: absolute; top: -10px; left: 16px; background: var(--accent);
color: var(--accent-ink); font-size: 10.5px; font-weight: 700; padding: 2px 9px;
border-radius: var(--radius-sm); letter-spacing: .07em; text-transform: uppercase; }
.plan h3 { margin: 0; font-size: 16px; }
.plan .price { font-size: 32px; font-weight: 750; letter-spacing: -.025em; line-height: 1.1; }
.plan .price .per { font-size: 13px; color: var(--muted); font-weight: 500; letter-spacing: 0; }
.plan ul { margin: 8px 0 14px; padding-left: 18px; font-size: 13.5px; color: var(--ink-2); }
.plan ul li { margin: 4px 0; }
.plan .cta-row { margin-top: auto; }
.plan .cta-row .btn { width: 100%; }
/* ── usage meter ──────────────────────────────────────────────── */
.usage { margin: 12px 0 4px; }
.usage .bar { height: 8px; border-radius: var(--radius-sm); background: var(--panel-2);
border: 1px solid var(--line); overflow: hidden; }
.usage .fill { height: 100%; background: var(--accent); border-radius: var(--radius-sm); }
.usage.maxed .fill { background: var(--red); }
.usage .cap { display: flex; justify-content: space-between; font-size: 12.5px;
color: var(--muted); margin-top: 5px; }
/* ── depth selector ───────────────────────────────────────────── */
.depth-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 10px; }
@media (max-width: 560px) { .depth-grid { grid-template-columns: 1fr; } }
.depth-opt { border: 1px solid var(--line); border-radius: var(--radius); padding: 12px 14px;
cursor: pointer; display: block; background: var(--panel); font-size: 13.5px;
transition: border-color .12s; }
.depth-opt b { display: block; font-size: 14px; margin-bottom: 2px; }
.depth-opt .sub { margin: 0; }
.depth-opt:has(input:checked) { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent); }
.depth-opt.disabled { opacity: .55; cursor: not-allowed; }
.depth-opt input { position: absolute; opacity: 0; pointer-events: none; width: 1px; height: 1px; margin: 0; }
.depth-opt { position: relative; }
.depth-opt:has(input:focus-visible) { outline: 2px solid var(--accent); outline-offset: 2px; }
/* ── conversion banner on shared reports ─────────────────────── */
.cta-banner { background: var(--accent-soft); border: 1px solid
color-mix(in srgb, var(--accent) 25%, transparent); border-radius: var(--radius);
padding: 18px 20px; margin-top: 20px; display: flex; align-items: center;
justify-content: space-between; gap: 14px; flex-wrap: wrap; }
.cta-banner p { margin: 0; }
.foot-links { margin: 0 0 8px; }
.foot-links a { color: var(--muted); }
select { background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius-sm);
color: var(--ink); padding: 6px 8px; font-size: 13px; font-family: var(--sans); }
@media (max-width: 700px) {
.nav-brand img { height: 16px; }
.nav-tabs { margin-left: 10px; }
}
/* ── signals: expandable decision rows ───────────────────────── */
tr.sig-row { cursor: pointer; }
tr.sig-row:hover td { background: var(--panel-2); }
tr.sig-row .caret { color: var(--faint); font-size: 11px; display: inline-block;
transition: transform .15s; margin-left: 2px; }
tr.sig-row.open .caret { transform: rotate(90deg); color: var(--accent); }
tr.sig-detail td { background: var(--panel-2); padding: 4px 14px 14px;
border-bottom: 1px solid var(--line); }
.sig-body { max-height: 620px; overflow-y: auto; padding-right: 4px; }
.sig-body details.section { margin-top: 8px; }
/* ── scanners page ───────────────────────────────────────────── */
.scan-search { background: var(--panel-2); border: 1px solid var(--line); border-radius: var(--radius-sm);
color: var(--ink); padding: 9px 13px; font-size: 14px; font-family: var(--sans);
min-width: 190px; }
.scan-search:focus { outline: none; border-color: var(--accent); }
.dh-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(185px, 1fr));
gap: 12px; margin-top: 14px; }
.dh-card { background: var(--panel-2); border: 1px solid var(--line); border-radius: var(--radius);
padding: 14px 16px; }
.scan-double .dh-card { background: var(--accent-soft);
border-color: color-mix(in srgb, var(--accent) 30%, transparent); }
.dh-top { display: flex; align-items: center; gap: 7px; flex-wrap: wrap; }
.dh-top .tick { font-size: 16px; }
.dh-meta { margin-top: 7px; font-size: 12.5px; color: var(--muted); }
.dh-meta b.pos { color: var(--green-ink); } .dh-meta b.neg { color: var(--red-ink); }
.scan-tbl th.sortable { cursor: pointer; user-select: none; white-space: nowrap; }
.scan-tbl th.sortable:hover { color: var(--ink); }
.scan-tbl th.sortable::after { content: "↕"; margin-left: 5px; color: var(--faint); font-size: 10px; }
.scan-tbl th[data-dir="asc"]::after { content: "↑"; color: var(--accent); }
.scan-tbl th[data-dir="desc"]::after { content: "↓"; color: var(--accent); }
/* ── hover explainers (criteria popovers) ────────────────────── */
.has-tip { position: relative; cursor: help; }
.has-tip .l { text-decoration: underline dotted var(--faint); text-underline-offset: 3px; }
.tip-pop { position: absolute; top: calc(100% + 10px); left: 0; z-index: 40; display: none;
width: 300px; max-width: 86vw; background: var(--panel); border: 1px solid var(--line);
border-radius: var(--radius); box-shadow: var(--shadow); padding: 14px 16px; text-align: left;
font-size: 12.5px; line-height: 1.55; color: var(--ink-2); }
.tip-pop b { color: var(--ink); }
.tip-pop .tp-title { font-weight: 700; color: var(--ink); font-size: 13px; margin: 0 0 6px; }
.tip-pop ul { margin: 0; padding-left: 16px; }
.tip-pop li { margin: 3px 0; }
.tip-pop li b.lt { color: var(--accent); font-family: var(--mono); margin-right: 2px; }
.has-tip:hover .tip-pop, .has-tip:focus .tip-pop, .has-tip:focus-within .tip-pop { display: block; }
/* ── consumer spend page ─────────────────────────────────────── */
.brief-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(330px, 1fr));
gap: 16px; }
.brief-card { display: flex; flex-direction: column; margin: 0; }
.brief-head { display: flex; align-items: center; justify-content: space-between; gap: 8px;
margin-bottom: 10px; }
.brief-card h3 { margin: 0 0 6px; font-size: 15px; line-height: 1.4; letter-spacing: -.01em; }
.brief-summary { margin: 0 0 12px; font-size: 13.5px; line-height: 1.6; color: var(--ink-2); }
.metric-chips { display: flex; flex-wrap: wrap; gap: 7px; margin: 0 0 12px; }
.mchip { display: inline-flex; align-items: center; gap: 5px; font-size: 12px;
padding: 4px 10px; border-radius: var(--radius-sm); border: 1px solid var(--line);
background: var(--panel-2); color: var(--ink-2); }
.mchip b { font-weight: 700; }
.mchip.up { background: var(--green-soft); color: var(--green-ink);
border-color: color-mix(in srgb, var(--green) 25%, transparent); }
.mchip.down { background: var(--red-soft); color: var(--red-ink);
border-color: color-mix(in srgb, var(--red) 25%, transparent); }
.brief-takeaways { margin: 0 0 12px; padding-left: 18px; font-size: 12.5px;
line-height: 1.55; color: var(--muted); }
.brief-takeaways li { margin: 3px 0; }
.brief-takeaways li::marker { color: var(--accent); }
.brief-foot { margin-top: auto; display: flex; align-items: center;
justify-content: space-between; gap: 10px; padding-top: 6px; }
/* ── search-interest (trends) section ─────────────────────────── */
tr.trend-row { cursor: pointer; }
tr.trend-row:hover td { background: var(--panel-2); }
tr.trend-row .caret { color: var(--faint); font-size: 11px; display: inline-block;
transition: transform .15s; margin-left: 2px; }
tr.trend-row.open .caret { transform: rotate(90deg); color: var(--accent); }
svg.spark { display: block; }
svg.spark polyline { fill: none; stroke: var(--accent); stroke-width: 1.6;
stroke-linejoin: round; stroke-linecap: round; }
tr.trend-detail td { background: var(--panel-2); padding: 12px 16px 16px;
border-bottom: 1px solid var(--line); }
.trend-detail-body { max-width: 620px; }
svg.trend-chart { display: block; width: 100%; height: 110px; }
svg.trend-chart polyline { fill: none; stroke: var(--accent); stroke-width: 2;
stroke-linejoin: round; }
svg.trend-chart .area { fill: var(--accent); opacity: .12; stroke: none; }
/* ── maritime desk ───────────────────────────────────────────── */
#marimap { height: 460px; border-radius: var(--radius); border: 1px solid var(--line);
margin-top: 12px; z-index: 1; }
@media (max-width: 700px) { #marimap { height: 340px; } }
.mm-pop { font-family: var(--sans); font-size: 12.5px; line-height: 1.5; }
.mm-kind { color: #6e7280; font-size: 11px; text-transform: uppercase; letter-spacing: .05em; }
.sigbar { position: relative; height: 10px; background: var(--panel-2);
border: 1px solid var(--line); border-radius: var(--radius-sm); overflow: hidden; min-width: 140px; }
.sigbar-zero { position: absolute; left: 50%; top: 0; bottom: 0; width: 1px; background: var(--faint); }
.sigbar-fill { position: absolute; top: 0; bottom: 0; background: var(--green); border-radius: var(--radius-sm); }
.sigbar-fill.neg { background: var(--red); }
/* leaflet chrome in theme colors (light map tiles in both modes — readable) */
.leaflet-container { font-family: var(--sans); background: var(--panel-2); }
.leaflet-popup-content-wrapper { border-radius: var(--radius); }
tr.row-cut { display: none; }
.trend-expand { width: 100%; margin-top: 10px; justify-content: center; display: flex;
color: var(--muted); font-size: 13px; }
.trend-expand:hover { color: var(--accent); }
/* landing pricing: force one row on desktop, compact cards */
.plans-row { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 10px; }
.plans-row .plan { padding: 16px 14px 14px; }
.plans-row .plan .price { font-size: 24px; }
.plans-row .plan ul { font-size: 12px; padding-left: 15px; }
.plans-row .plan h3 { font-size: 14px; }
.plans-row .plan .flag { font-size: 9.5px; padding: 2px 7px; }
.plans-row .plan .cta-row .btn { font-size: 12.5px; padding: 8px 8px; }
@media (max-width: 900px) { .plans-row { grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); } }
/* ── report data furniture (statlines + definition rows) ─────── */
.md .statline { display: flex; flex-wrap: wrap; gap: 8px; margin: 12px 0; }
.md .stat-chip { background: var(--panel-2); border: 1px solid var(--line);
border-radius: var(--radius); padding: 7px 13px; min-width: 78px; }
.md .stat-chip .k { display: block; color: var(--muted); font-size: 10.5px;
text-transform: uppercase; letter-spacing: .06em; margin-bottom: 1px; }
.md .stat-chip b { font-size: 13.5px; color: var(--ink); font-weight: 650; }
.md ul.kvs { list-style: none; padding-left: 0; margin: 10px 0 14px;
border: 1px solid var(--line-2); border-radius: var(--radius); overflow: hidden; }
.md li.kv { display: grid; grid-template-columns: minmax(150px, 32%) 1fr; gap: 12px;
padding: 8px 14px; margin: 0; border-bottom: 1px solid var(--line-2);
background: var(--panel); }
.md li.kv:nth-child(even) { background: var(--panel-2); }
.md li.kv:last-child { border-bottom: 0; }
.md li.kv .k { color: var(--muted); font-size: 13px; font-weight: 600; }
.md li.kv .v { color: var(--ink-2); }
.md li.kv .v strong { color: var(--ink); }
@media (max-width: 560px) { .md li.kv { grid-template-columns: 1fr; gap: 2px; } }
/* ── leaflet popup + map chrome themed to the site ───────────── */
.leaflet-popup-content-wrapper, .leaflet-popup-tip {
background: var(--panel); color: var(--ink); box-shadow: var(--shadow); }
.leaflet-popup-content { margin: 12px 14px; font-family: var(--sans); font-size: 13px; }
.leaflet-container { font-family: var(--sans); background: var(--bg-2); }
.leaflet-control-attribution { background: color-mix(in srgb, var(--panel) 80%, transparent) !important;
color: var(--muted) !important; }
.leaflet-control-attribution a { color: var(--muted) !important; }
.leaflet-bar a { background: var(--panel); color: var(--ink); border-color: var(--line); }
.mm-pop .mm-title { font-weight: 700; font-size: 14px; margin-bottom: 1px; }
.mm-pop .mm-kind { font-size: 10px; text-transform: uppercase; letter-spacing: .05em;
padding: 1px 7px; border-radius: var(--radius-sm); margin-left: 4px; vertical-align: 1px;
background: var(--accent-soft); color: var(--accent); }
.mm-pop .mm-kind.tanker { background: var(--amber-soft); color: var(--amber-ink); }
.mm-pop .mm-sub { color: var(--muted); font-size: 11.5px; margin-bottom: 8px; }
.mm-pop .mm-row { display: grid; grid-template-columns: 108px 1fr; gap: 8px;
padding: 4px 0; border-top: 1px solid var(--line-2); }
.mm-pop .mm-k { color: var(--muted); font-size: 11.5px; }
.mm-pop .mm-v { font-size: 12.5px; }
.mm-pop .mm-dim { color: var(--muted); }
.mm-pop .mm-foot { margin-top: 8px; color: var(--faint); font-size: 10.5px; line-height: 1.4; }
/* ── catalyst calendar ───────────────────────────────────────── */
.cat-month { padding-top: 14px; }
.cat-month-title { font-size: 14px; color: var(--muted); text-transform: uppercase;
letter-spacing: .07em; margin: 0 0 8px; }
.cat-list { display: flex; flex-direction: column; }
.cat-row { display: grid; grid-template-columns: 68px 1fr auto; gap: 14px; align-items: center;
padding: 11px 0; border-top: 1px solid var(--line-2); }
.cat-row:first-child { border-top: 0; }
.cat-date { font-weight: 700; font-size: 13px; color: var(--accent); }
.cat-line { display: flex; align-items: center; gap: 7px; flex-wrap: wrap; margin-bottom: 3px; }
.cat-title { font-size: 13.5px; line-height: 1.45; color: var(--ink-2); }
.cat-title a { color: var(--ink-2); }
@media (max-width: 560px) { .cat-row { grid-template-columns: 54px 1fr; }
.cat-row form { grid-column: 2; justify-self: start; } }
/* ── nav "Desks" dropdown (hover desktop, tap mobile; JS-positioned fixed) ── */
.nav-dd { position: relative; display: inline-flex; }
.nav-dd-toggle { background: none; border: 0; cursor: pointer; font-family: var(--sans);
font-size: 14px; font-weight: 550; color: var(--ink-2); padding: 7px 13px; border-radius: var(--radius);
display: inline-flex; align-items: center; gap: 4px; white-space: nowrap; }
.nav-dd-toggle:hover { color: var(--ink); background: var(--panel-2); }
.nav-dd-toggle.active { color: var(--accent); }
.nav-dd-toggle .caret { font-size: 9px; opacity: .7; transition: transform .15s; }
.nav-dd-toggle[aria-expanded="true"] .caret { transform: rotate(180deg); }
.nav-dd-menu { position: fixed; display: none; z-index: 200; min-width: 190px;
background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius);
box-shadow: var(--shadow); padding: 5px;
/* never taller than the viewport (minus the nav) — scroll instead of clipping */
max-height: calc(100vh - 64px); overflow-y: auto; overscroll-behavior: contain; }
.nav-dd-menu.show { display: block; }
.nav-dd-menu a { display: block; padding: 5px 12px; border-radius: var(--radius); font-size: 13px;
line-height: 1.3; color: var(--ink-2); white-space: nowrap; }
.nav-dd-menu a:hover { background: var(--panel-2); color: var(--ink); text-decoration: none; }
.nav-dd-menu a.active { color: var(--accent); background: var(--accent-soft); }
/* ── dashboard watchlist ─────────────────────────────────────── */
.wl-list { display: flex; flex-direction: column; margin-top: 14px; }
.wl-row { display: grid; grid-template-columns: 1fr auto; gap: 8px 14px; align-items: center;
padding: 12px 0; border-top: 1px solid var(--line-2); }
.wl-row:first-child { border-top: 0; }
.wl-head { display: flex; align-items: center; gap: 8px; grid-row: 1; }
.wl-head .tick { font-size: 15px; }
.wl-signals { grid-column: 1; grid-row: 2; display: flex; flex-wrap: wrap; gap: 6px; }
.wl-act { grid-column: 2; grid-row: 1 / span 2; display: flex; align-items: center; gap: 8px; }
.wl-chip { display: inline-flex; align-items: center; gap: 3px; font-size: 11.5px;
padding: 3px 9px; border-radius: var(--radius-sm); background: var(--panel-2);
border: 1px solid var(--line); color: var(--ink-2); white-space: nowrap; }
.wl-chip.mom { background: var(--accent-soft); color: var(--accent); border-color: transparent; }
.wl-chip.pass { background: var(--green-soft); color: var(--green-ink); border-color: transparent; }
.wl-chip.buy { background: var(--green-soft); color: var(--green-ink); border-color: transparent; }
.wl-chip.sell { background: var(--red-soft); color: var(--red-ink); border-color: transparent; }
.wl-chip.cat { background: var(--amber-soft); color: var(--amber-ink); border-color: transparent; }
.wl-chip.gov { background: var(--accent-soft); color: var(--accent); border-color: transparent; }
/* Confluence: hover any desk chip/pill to see which desk lit it, and why.
Tooltip drops BELOW the chip so a top row is never clipped. */
.wl-row [data-tip] { position: relative; cursor: help; }
.wl-row [data-tip]:hover::after { content: attr(data-tip); position: absolute;
top: calc(100% + 7px); left: 0; z-index: 70; width: max-content; max-width: 300px;
white-space: normal; text-align: left; padding: 8px 11px; font-size: 11.5px;
font-weight: 400; line-height: 1.45; letter-spacing: 0; text-transform: none;
color: var(--ink); background: var(--panel); border: 1px solid var(--line);
border-radius: var(--radius); box-shadow: 0 8px 24px rgba(0,0,0,.22); pointer-events: none; }
.wl-row [data-tip]:hover::before { content: ""; position: absolute; top: calc(100% + 1px);
left: 16px; z-index: 71; border: 6px solid transparent; border-bottom-color: var(--line);
pointer-events: none; }
.wl-act .linklike { color: var(--faint); padding: 6px 8px; }
.wl-act .linklike:hover { color: var(--red); }
@media (max-width: 560px) { .wl-row { grid-template-columns: 1fr; }
.wl-act { grid-column: 1; grid-row: 3; justify-content: flex-start; } }
/* ── volatility squeeze (TTM) ─────────────────────────────────── */
/* coiled = amber (tension building); fired = accent (the release event) */
.wl-chip.sqz { background: var(--amber-soft); color: var(--amber-ink); border-color: transparent; }
.wl-chip.sqz.fired { background: var(--accent-soft); color: var(--accent); }
.wl-chip.vol { background: var(--accent-soft); color: var(--accent); border-color: transparent; }
.wl-chip.cmdty { background: var(--amber-soft); color: var(--amber-ink); border-color: transparent; }
.wl-chip.buzz { background: var(--amber-soft); color: var(--amber-ink); border-color: transparent; }
.chip-wrap { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 10px; }
.sqz-card .sqz-row { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 10px; }
.sqz-tf { display: inline-flex; align-items: center; gap: 9px; background: var(--panel-2);
border: 1px solid var(--line); border-radius: var(--radius); padding: 7px 12px; }
.sqz-tf-l { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em;
color: var(--muted); }
.sqz-b { display: inline-flex; align-items: center; gap: 5px; font-size: 12.5px; font-weight: 600;
padding: 3px 10px; border-radius: var(--radius-sm); white-space: nowrap; }
.sqz-b b { font-weight: 800; }
.sqz-b.on { background: var(--amber-soft); color: var(--amber-ink); }
.sqz-b.up { background: var(--green-soft); color: var(--green-ink); }
.sqz-b.down { background: var(--red-soft); color: var(--red-ink); }
.sqz-b.off { background: transparent; color: var(--faint); }
.sqz-inline { display: inline-flex; align-items: center; gap: 4px; font-size: 12.5px; font-weight: 600;
padding: 2px 10px; border-radius: var(--radius-sm); }
.sqz-inline.on { background: var(--amber-soft); color: var(--amber-ink); }
.sqz-inline.fired { background: var(--accent-soft); color: var(--accent); }
.sqz-inline.wk { background: var(--panel-2); color: var(--ink-2); border: 1px solid var(--line); }
.scan-sqz { display: inline-flex; align-items: center; gap: 4px; font-size: 11px; font-weight: 600;
padding: 2px 8px; border-radius: var(--radius-sm); white-space: nowrap; }
.scan-sqz.on { background: var(--amber-soft); color: var(--amber-ink); }
.scan-sqz.fired { background: var(--accent-soft); color: var(--accent); }
.scan-sqz.wk { background: var(--panel-2); color: var(--ink-2); border: 1px solid var(--line); }
.scan-sqz-cell { white-space: nowrap; }
.dh-sqz { margin-top: 7px; }
/* ── institutional holders / fund holdings ───────────────────── */
.hld-ava { display: inline-flex; align-items: center; justify-content: center;
width: 20px; height: 20px; border-radius: var(--radius); background: var(--panel-2);
border: 1px solid var(--line); font-size: 11px; font-weight: 700;
color: var(--ink-2); margin-right: 9px; vertical-align: middle; }
.hld-tbl td:first-child { white-space: nowrap; }
.hld-mix { display: flex; height: 14px; border-radius: var(--radius); overflow: hidden;
background: var(--panel-2); margin: 6px 0 10px; }
.hld-mix-seg { height: 100%; }
.hld-mix-legend { display: flex; flex-wrap: wrap; gap: 6px 16px; font-size: 12.5px; color: var(--ink-2); }
.hld-mix-legend span { display: inline-flex; align-items: center; gap: 6px; }
.hld-dot { width: 9px; height: 9px; border-radius: 2px; display: inline-block; }
.hld-mix-seg.s1, .hld-dot.s1 { background: var(--accent); }
.hld-mix-seg.s2, .hld-dot.s2 { background: var(--amber); }
.hld-mix-seg.s3, .hld-dot.s3 { background: var(--green); }
.hld-mix-seg.s4, .hld-dot.s4 { background: var(--muted); }
.hld-mix-seg.s5, .hld-dot.s5 { background: var(--red); }
.hld-mix-seg.s6, .hld-dot.s6 { background: var(--faint); }
/* ── commodities radar: supply-shock watch items ──────────────── */
.cmdty-watch-list { display: flex; flex-direction: column; gap: 12px; margin-top: 12px; }
.cmdty-watch { border: 1px solid var(--line); border-radius: var(--radius); padding: 14px 16px; background: var(--panel-2); }
.cw-head { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.cw-name { font-size: 15px; }
.cw-conf { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .03em;
padding: 2px 8px; border-radius: var(--radius-sm); }
.cw-high { background: var(--green-soft); color: var(--green-ink); }
.cw-medium { background: var(--amber-soft); color: var(--amber-ink); }
.cw-low { background: var(--bg-2); color: var(--muted); }
.cw-sum { margin: 8px 0 0; font-size: 14px; line-height: 1.5; color: var(--ink); }
.cw-tickers { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; margin-top: 9px; }
.cw-counter { margin: 8px 0 0; }
.cw-src { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 9px; padding-top: 9px; border-top: 1px solid var(--line-2); }
.cw-srclink { font-size: 11.5px; color: var(--muted); font-family: var(--mono); }
.cw-srclink:hover { color: var(--accent); }
/* ── macro: cross-asset dashboard tiles ───────────────────────── */
.mkt-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
gap: 10px; margin-top: 12px; }
.mkt-tile { border: 1px solid var(--line); border-radius: var(--radius); padding: 11px 13px; background: var(--panel-2); }
.mkt-l { font-size: 11.5px; color: var(--muted); text-transform: uppercase; letter-spacing: .04em; }
.mkt-v { font-size: 20px; font-weight: 650; font-variant-numeric: tabular-nums; margin: 3px 0 1px; }
.mkt-c { font-size: 12.5px; font-weight: 700; font-family: var(--mono); }
.mkt-c.pos { color: var(--green-ink); } .mkt-c.neg { color: var(--red-ink); } .mkt-c.flat { color: var(--muted); }
/* ── maritime: shipping complex ───────────────────────────────── */
.ship-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
gap: 12px; margin-top: 14px; }
.ship-seg { border: 1px solid var(--line); border-radius: var(--radius); padding: 12px 14px; background: var(--panel-2); }
.ship-seg-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 8px; }
.ship-seg-head b { font-size: 13.5px; }
.ship-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.ship-chip { display: inline-flex; align-items: center; gap: 5px; font-family: var(--mono);
font-size: 12px; font-weight: 700; padding: 4px 8px; border-radius: var(--radius);
border: 1px solid var(--line); background: var(--panel); color: var(--ink-2); }
.ship-chip:hover { border-color: var(--accent); text-decoration: none; }
/* ── filings desk: AI headline per 8-K ────────────────────────── */
.fil-headline { font-size: 12.5px; color: var(--ink-2); margin-top: 4px; max-width: 460px; }
/* ── politician pages ─────────────────────────────────────────── */
.pol-ava { display: inline-flex; align-items: center; justify-content: center;
width: 24px; height: 24px; border-radius: 50%; background: var(--accent-soft);
color: var(--accent); font-size: 10.5px; font-weight: 800;
margin-right: 8px; vertical-align: middle; letter-spacing: .02em; }
.pol-ava-lg { width: 46px; height: 46px; font-size: 17px; margin-right: 0; }
.pol-link { white-space: nowrap; }
/* ── market calendar ──────────────────────────────────────────── */
.cal-toolbar { display: flex; align-items: center; justify-content: space-between;
gap: 12px; flex-wrap: wrap; margin-bottom: 14px; }
.cal-nav { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.cal-title { font-weight: 800; font-size: 17px; min-width: 130px; text-align: center; }
.cal-filters { display: flex; gap: 6px; flex-wrap: wrap; }
.fchip { display: inline-flex; align-items: center; gap: 6px; font-size: 12px;
padding: 4px 10px; border-radius: var(--radius-sm); background: var(--panel-2);
border: 1px solid var(--line); color: var(--ink-2); cursor: pointer; }
.fchip b { font-weight: 700; }
.fchip.off { opacity: .42; text-decoration: line-through; }
.fchip:hover { border-color: var(--accent); }
.cal-layout { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 18px; }
.cal-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px; margin-top: 4px; }
.cal-dow { text-align: center; font-size: 10.5px; font-weight: 700; letter-spacing: .06em;
text-transform: uppercase; color: var(--muted); padding: 2px 0; }
.cal-cell { position: relative; min-height: 72px; text-align: left; padding: 6px 7px;
background: var(--panel-2); border: 1px solid var(--line); border-radius: var(--radius);
cursor: pointer; font: inherit; color: inherit; display: flex;
flex-direction: column; justify-content: space-between; }
.cal-cell:hover { border-color: var(--accent); }
.cal-cell.out { opacity: .38; }
.cal-cell.today { border-color: var(--accent); box-shadow: inset 0 0 0 1px var(--accent); }
.cal-cell.sel { background: var(--accent-soft); border-color: var(--accent); }
.cal-num { font-size: 12.5px; font-weight: 700; }
.cal-count { position: absolute; top: 5px; right: 7px; font-size: 10.5px; color: var(--muted); }
.cal-dots { display: flex; gap: 3px; flex-wrap: wrap; }
.cal-dot { width: 7px; height: 7px; border-radius: 50%; display: inline-block; flex: none; }
.cal-dot.earn { background: var(--green); }
.cal-dot.macro { background: var(--amber); }
.cal-dot.bio { background: var(--accent); }
.cal-dot.fil { background: var(--muted); }
.cal-dot.pol { background: var(--red); }
.cal-dot.cat-off { opacity: .15; }
.cal-side { min-width: 0; }
.cal-day-panel h3 { font-size: 15.5px; }
.cal-ev { display: flex; align-items: baseline; gap: 7px; padding: 5px 0;
border-bottom: 1px solid var(--line-2); font-size: 12.5px; flex-wrap: wrap; }
.cal-ev.cat-off { display: none; }
.cal-ev-label { color: var(--ink-2); min-width: 0; flex: 1; }
.cal-ev-date { color: var(--muted); font-size: 11.5px; white-space: nowrap; }
.cal-badge { flex: none; font-size: 9.5px; font-weight: 800; letter-spacing: .04em;
padding: 2px 6px; border-radius: var(--radius); }
.cal-badge.earn { background: var(--green-soft); color: var(--green-ink); }
.cal-badge.macro { background: var(--amber-soft); color: var(--amber-ink); }
.cal-badge.bio { background: var(--accent-soft); color: var(--accent); }
.cal-badge.fil { background: var(--bg-2); color: var(--ink-2); border: 1px solid var(--line); }
.cal-badge.pol { background: var(--red-soft); color: var(--red-ink); }
.imp-dot { width: 8px; height: 8px; border-radius: 50%; display: inline-block; flex: none; }
.imp-dot.h { background: var(--red); }
.imp-dot.m { background: var(--amber); }
.imp-dot.l { background: var(--muted); }
.cal-ext { font-size: 11px; white-space: nowrap; }
.cal-upcoming { max-height: 560px; overflow-y: auto; }
@media (max-width: 860px) {
.cal-layout { grid-template-columns: 1fr; }
.cal-cell { min-height: 52px; padding: 4px 5px; }
.cal-upcoming { max-height: none; }
}
/* ── flow board ──────────────────────────────────────────────── */
.flow-dates { display: flex; gap: 6px; margin: 14px 0 4px; }
.flow-date { padding: 6px 14px; border-radius: var(--radius-sm); font-size: 13px; font-weight: 600;
border: 1px solid var(--line); color: var(--muted); background: var(--panel); }
.flow-date.active { background: var(--accent); color: var(--accent-ink); border-color: var(--accent); }
.flow-date:hover { text-decoration: none; color: var(--ink); }
.flow-date.active:hover { color: var(--accent-ink); }
.flow-filters { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin: 12px 0; }
.flow-chip { border: 1px solid var(--line); background: var(--panel); color: var(--ink-2);
border-radius: var(--radius-sm); padding: 6px 13px; font-size: 13px; font-family: var(--sans);
cursor: pointer; display: inline-flex; gap: 6px; align-items: center; }
.flow-chip b { color: var(--muted); font-weight: 700; }
.flow-chip.active { background: var(--accent-soft); border-color: var(--accent); color: var(--accent); }
.flow-chip.active b { color: var(--accent); }
.flow-chip:hover { border-color: var(--accent); }
.flow-board { padding-top: 6px; }
.flow-group { margin-top: 10px; }
.flow-grouphead { display: flex; align-items: baseline; gap: 12px; padding: 12px 0 6px;
border-bottom: 1px solid var(--line); }
.flow-glabel { font-weight: 700; font-size: 13px; }
.flow-semat { margin-left: auto; font-size: 11px; letter-spacing: .55em; color: var(--faint); padding-right: 2px; }
.flow-order { display: grid; align-items: center; gap: 10px;
grid-template-columns: 86px 66px 90px 1fr auto auto 74px 34px;
padding: 9px 0; border-bottom: 1px solid var(--line-2); font-size: 13.5px; }
.fo-time { color: var(--muted); font-size: 12.5px; white-space: nowrap; }
.fo-ico { color: var(--amber); }
.fo-ticker.bull { color: var(--green-ink); } .fo-ticker.bear { color: var(--red-ink); }
.fo-prem { font-weight: 700; white-space: nowrap; }
.fo-star { color: var(--amber); font-weight: 700; }
.fo-contract { color: var(--ink-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fo-dte { font-size: 12.5px; white-space: nowrap; }
.fo-tape { display: flex; gap: 5px; justify-self: end; }
span.tape { font-size: 11px; padding: 2px 7px; border-radius: var(--radius); background: var(--panel-2);
border: 1px solid var(--line); color: var(--muted); white-space: nowrap; }
span.tape.ok { color: var(--green-ink); border-color: color-mix(in srgb, var(--green) 30%, transparent); }
span.tape.bad { color: var(--red-ink); border-color: color-mix(in srgb, var(--red) 30%, transparent); }
span.tape.mid { color: var(--amber-ink); }
span.tape.sweep { color: var(--accent); border-color: color-mix(in srgb, var(--accent) 30%, transparent); }
.fo-dots { display: inline-flex; gap: 5px; }
.fdot { width: 9px; height: 9px; border-radius: 50%; display: inline-block; flex-shrink: 0; }
.fdot.pass { background: var(--green); } .fdot.fail { background: var(--red); }
.fdot.mixed { background: var(--amber); }
.fdot.missing { background: transparent; border: 1.5px solid var(--faint); }
.legend-list { list-style: none; padding: 0; margin: 0; font-size: 13px; line-height: 1.5; }
.legend-list li { display: flex; align-items: center; gap: 9px; margin: 6px 0; color: var(--ink-2); }
.legend-list li .fdot { margin-top: 0; }
@media (max-width: 720px) {
/* Phones: two-row order card. Row 1: time | ticker | premium (right).
Row 2: full contract | conviction dots (right). DTE lives in the
bucket header; tape/go are desktop-only. */
.flow-order { grid-template-columns: 78px 56px minmax(0, 1fr); row-gap: 4px; }
.fo-prem { justify-self: end; }
.fo-contract { grid-column: 1 / 3; grid-row: 2; min-width: 0; }
.fo-dots { grid-column: 3; grid-row: 2; justify-self: end; align-self: center; }
.fo-dte, .fo-tape, .fo-go { display: none; }
.flow-semat { display: none; }
}
/* ── company terminal: trader-intel grid (async-loaded cards) ─── */
.intel-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
gap: 14px; align-items: start; }
.intel-card { margin: 0; }
.intel-card h2 { margin: 0 0 2px; }
.intel-load { color: var(--muted); font-size: 13px; padding: 8px 2px; }
.intel-load::before { content: ""; display: inline-block; width: 12px; height: 12px;
margin-right: 8px; border: 2px solid var(--line); border-top-color: var(--accent);
border-radius: 50%; vertical-align: -2px; animation: spin .8s linear infinite; }
/* valuation: reverse-DCF hero + peer table highlighting */
.val-hero { display: flex; gap: 16px; align-items: center; margin-top: 10px;
padding: 14px 16px; background: var(--accent-soft); border-radius: var(--radius); }
.val-big { font-size: 40px; font-weight: 800; color: var(--accent); line-height: 1; white-space: nowrap; }
.val-big span { font-size: 15px; font-weight: 600; margin-left: 2px; }
.val-hero-txt { font-size: 13px; color: var(--ink-2); line-height: 1.5; }
tr.val-subj td { background: var(--accent-soft); font-weight: 650; }
tr.val-med td { color: var(--muted); border-top: 1px solid var(--line); font-style: italic; }
@media (max-width: 560px) { .val-hero { flex-direction: column; align-items: flex-start; gap: 8px; } }
/* ── company terminal ────────────────────────────────────────── */
/* The most data-dense view: a wider canvas + a masonry of cards so the
whole terminal is a scan, not a long scroll. */
.wrap.wrap-wide { max-width: var(--wrap); } /* legacy alias — the frame is wide now */
.co-strips { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
gap: 18px; align-items: stretch; }
.co-strips > section.card { margin-bottom: 0; }
.co-cols { columns: 2; column-gap: 18px; }
.co-cols > section.card { break-inside: avoid; margin: 0 0 18px; display: inline-block;
width: 100%; box-sizing: border-box; }
@media (max-width: 1000px) { .co-cols { columns: 1; } }
.co-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 14px;
flex-wrap: wrap; margin: 4px 0 18px; }
.co-name { font-size: 17px; color: var(--ink-2); font-weight: 500; margin-left: 8px; letter-spacing: -.01em; }
.co-actions { display: flex; gap: 8px; }
.co-jump { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 14px; padding: 8px 0;
position: sticky; top: 60px; z-index: 20;
background: color-mix(in srgb, var(--bg) 90%, transparent); backdrop-filter: saturate(1.2) blur(10px); }
@media (max-width: 720px) { .co-jump { overflow-x: auto; flex-wrap: nowrap; -webkit-overflow-scrolling: touch; } }
.co-jump a { font-size: 12.5px; color: var(--muted); padding: 5px 11px; border-radius: var(--radius-sm);
border: 1px solid var(--line); background: var(--panel); }
.co-jump a:hover { color: var(--accent); border-color: var(--accent); text-decoration: none; }
.rating-bars { margin-top: 8px; }
.rating-row { display: grid; grid-template-columns: 82px 1fr 28px; gap: 10px; align-items: center; margin: 5px 0; }
.rating-label { font-size: 12.5px; color: var(--ink-2); }
.rating-track { height: 8px; background: var(--panel-2); border: 1px solid var(--line); border-radius: var(--radius-sm); overflow: hidden; }
.rating-fill { height: 100%; border-radius: var(--radius-sm); }
.rating-fill.pos { background: var(--green); } .rating-fill.hold { background: var(--amber); } .rating-fill.neg { background: var(--red); }
.rating-n { font-size: 12.5px; color: var(--muted); text-align: right; }
.pt-mean { font-size: 30px; font-weight: 750; letter-spacing: -.02em; line-height: 1.1; margin: 4px 0; }
.pt-upside { font-size: 15px; font-weight: 650; margin-left: 8px; }
.fin-tbl td:first-child, .fin-tbl th:first-child { text-align: left; }
.co-news { list-style: none; padding: 0; margin: 6px 0 0; }
.co-news li { padding: 8px 0; border-top: 1px solid var(--line-2); font-size: 13.5px; line-height: 1.5; }
.co-news li:first-child { border-top: 0; }
/* compact flow legend (moved to top) */
.flow-legend-compact { padding: 12px 16px; }
.flow-legend-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px 24px; }
.fl-title { font-size: 10.5px; text-transform: uppercase; letter-spacing: .07em; color: var(--muted);
margin: 0 0 6px; }
.fl-item { display: inline-flex; align-items: center; gap: 5px; font-size: 12px; color: var(--ink-2);
margin: 0 12px 4px 0; white-space: nowrap; }
.fl-item .fdot { width: 8px; height: 8px; }
.fl-item b { color: var(--ink); }
@media (max-width: 560px) { .flow-legend-grid { grid-template-columns: 1fr; } }
/* landing "desks" showcase grid */
.desk-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
gap: 14px; margin-top: 20px; }
.desk { background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius);
padding: 18px 18px 16px; box-shadow: var(--shadow-sm); }
.desk .ic { font-size: 22px; }
.desk h3 { margin: 8px 0 5px; font-size: 15px; }
.desk p { margin: 0; font-size: 13px; color: var(--muted); line-height: 1.5; }
/* Ticker links → company terminal: stay ink-colored, accent on hover */
a.tick { color: inherit; }
a.tick:hover { color: var(--accent); text-decoration: underline; }
/* Dashboard cross-desk digest */
.dg-list { display: flex; flex-direction: column; margin-top: 12px; }
.dg-row { display: flex; align-items: baseline; gap: 10px; padding: 9px 10px;
border-radius: var(--radius); color: inherit; border-bottom: 1px solid var(--line); }
.dg-row:last-child { border-bottom: none; }
.dg-row:hover { background: var(--bg-2); }
.dg-ic { flex: none; width: 22px; display: flex; justify-content: center; }
.dg-desk { flex: none; width: 128px; font-weight: 650; font-size: 13.5px; color: var(--ink-2); }
.dg-text { flex: 1; min-width: 0; font-size: 13.5px; color: var(--muted);
overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dg-text .tick { color: var(--ink); font-size: 13px; }
.dg-go { flex: none; color: var(--accent); opacity: 0; transition: opacity .12s; }
.dg-row:hover .dg-go { opacity: 1; }
@media (max-width: 640px) {
.dg-row { flex-wrap: wrap; }
.dg-desk { width: auto; }
.dg-text { flex-basis: 100%; white-space: normal; }
.dg-go { display: none; }
}
/* ── hamburger + nav search (desktop defaults) ─────────────────── */
.nav-burger { display: none; flex-direction: column; justify-content: center; gap: 4px;
width: 38px; height: 38px; padding: 8px; background: none; border: 0; cursor: pointer; border-radius: var(--radius); }
.nav-burger span { display: block; height: 2px; width: 100%; background: var(--ink-2); border-radius: 2px; transition: transform .18s, opacity .18s; }
.nav-burger[aria-expanded="true"] span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
.nav-burger[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.nav-burger[aria-expanded="true"] span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }
.nav-burger:hover { background: var(--bg-2); }
.nav-search-wrap { position: relative; display: inline-flex; align-items: center; margin-left: 6px; }
.nav-search { display: inline-flex; align-items: center; }
.nav-search input { width: 168px; padding: 6px 10px; font-size: 13px; font-family: var(--mono);
text-transform: uppercase; background: var(--panel-2); border: 1px solid var(--line);
border-radius: var(--radius); color: var(--ink); transition: width .15s; }
.nav-search input:focus { width: 210px; outline: none; border-color: var(--accent); }
.nav-search input::placeholder { text-transform: none; font-family: var(--sans); }
/* Explainer that drops BELOW the search bar (never clipped at the top edge),
right-aligned so it can't overflow the viewport's right edge. Pure CSS:
revealed on hover of the wrap or focus of the input. */
.nav-search-tip { position: absolute; top: calc(100% + 8px); right: 0; z-index: 60;
width: 320px; max-width: 80vw; padding: 12px 14px; background: var(--panel);
border: 1px solid var(--line); border-radius: var(--radius); box-shadow: 0 10px 30px rgba(0,0,0,.22);
opacity: 0; visibility: hidden; transform: translateY(-4px); transition: opacity .15s, transform .15s;
pointer-events: none; }
.nav-search-tip .tip-h { display: block; font-size: 12.5px; margin-bottom: 5px; color: var(--ink); }
.nav-search-tip span { display: block; font-size: 12px; line-height: 1.45; color: var(--muted); }
.nav-search-tip span b { font-weight: 700; color: var(--ink); } /* inline emphasis, flows with the text */
.nav-search-tip i { font-style: normal; font-family: var(--mono); color: var(--accent); }
.nav-search-tip::before { content: ""; position: absolute; bottom: 100%; right: 60px;
border: 6px solid transparent; border-bottom-color: var(--line); }
.nav-search-wrap:hover .nav-search-tip,
.nav-search-wrap:focus-within .nav-search-tip { opacity: 1; visibility: visible; transform: translateY(0); }
/* Must trail ALL base .nav-dd-* rules (CSS order): in the phone panel the
desk links flatten into a static, always-visible group and the toggle hides. */
@media (max-width: 720px) {
.nav-dd { display: block; }
.nav-dd-toggle { display: none; }
.nav-dd-menu { position: static; display: block; min-width: 0; box-shadow: none;
background: transparent; border: 0; border-left: 2px solid var(--line);
border-radius: 0; margin: 2px 0 2px 12px; padding: 0 0 0 4px; }
.nav-dd-menu a { font-size: 14.5px; padding: 10px 12px; }
}
/* TradingView chart on the company terminal */
.tv-chart { width: 100%; height: 430px; border: 0; border-radius: var(--radius); display: block; background: var(--panel-2); }
@media (max-width: 720px) { .tv-chart { height: 320px; } }
/* earnings chip */
.wl-chip.earn { border-color: var(--accent); color: var(--accent); }
/* Ask-the-desk chat */
.ask-thread { display: flex; flex-direction: column; gap: 8px; margin-top: 12px; }
.ask-thread:empty { display: none; }
.ask-bubble { max-width: 85%; padding: 10px 14px; border-radius: var(--radius); font-size: 14px; line-height: 1.55; white-space: pre-wrap; }
.ask-bubble.me { align-self: flex-end; background: var(--accent-soft); color: var(--ink); border-bottom-right-radius: 4px; }
.ask-bubble.desk { align-self: flex-start; background: var(--panel-2); border: 1px solid var(--line); border-bottom-left-radius: 4px; }
.ask-bubble.err { color: var(--red-ink); }
/* Must trail the base .nav-burger{display:none} above (CSS order bug fix):
on phones the burger is the nav. */
@media (max-width: 720px) {
/* .nav prefix: the base display:none was appended LATER in this file and
ties on specificity — without the prefix the cascade re-hides the burger */
.nav .nav-burger { display: inline-flex; }
}
/* ── landing: orbit hero ─────────────────────────────────────────
Default (no JS / mobile / reduced-motion): cards are a static grid.
/* live data peek + blurred tease on each desk card */
/* scanner strip under the orbit */
.scan-strip { display: flex; gap: 14px; align-items: center; max-width: 700px; margin: 26px auto 0; }
/* ── landing: track-record "receipts" strip ────────────────────── */
.track-strip { display: flex; gap: 22px; align-items: center; flex-wrap: wrap;
max-width: 860px; margin: 22px auto 0; padding: 18px 22px;
border-color: color-mix(in srgb, var(--accent) 32%, var(--line)); }
.track-strip .ts-lead { flex: 1 1 300px; min-width: 260px; }
.track-strip .ts-lead h3 { margin: 2px 0 4px; }
.track-strip .ts-stats { display: flex; gap: 26px; align-items: baseline; }
.track-strip .ts-stat { text-align: center; }
.track-strip .ts-stat .n { font-size: 26px; font-weight: 700; line-height: 1;
font-variant-numeric: tabular-nums; color: var(--ink); }
.track-strip .ts-stat .n.pos { color: var(--green); }
.track-strip .ts-stat .n.neg { color: var(--red); }
.track-strip .ts-stat .l { font-size: 11px; color: var(--muted); margin-top: 5px;
text-transform: uppercase; letter-spacing: .04em; }
.track-strip .ts-cta { flex: none; }
@media (max-width: 640px) {
.track-strip { gap: 14px; }
.track-strip .ts-stats { gap: 20px; width: 100%; justify-content: space-between; }
}
/* dashboard: compact clickable scoreboard bar */
.track-mini { display: flex; align-items: center; gap: 12px; padding: 12px 16px;
margin: 14px 0 4px; text-decoration: none; color: inherit; transition: border-color .15s;
border-color: color-mix(in srgb, var(--accent) 26%, var(--line)); }
.track-mini:hover { border-color: var(--accent); }
.track-mini .tm-ic { font-size: 20px; flex: none; }
.track-mini .tm-txt { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.track-mini .tm-cta { margin-left: auto; flex: none; color: var(--accent);
font-weight: 600; font-size: 13px; white-space: nowrap; }
@media (max-width: 560px) { .track-mini .tm-cta { display: none; } }
/* ── dashboard: Watchlist / Portfolio toggle (one card, two panels) ── */
.hv-card { position: relative; }
.hv-radio { position: absolute; width: 1px; height: 1px; opacity: 0; } /* focusable, invisible */
.hv-head { margin-bottom: 14px; }
.hv-tabs { display: inline-flex; gap: 3px; background: var(--panel-2);
border: 1px solid var(--line); border-radius: var(--radius); padding: 3px; }
.hv-tab { padding: 7px 16px; border-radius: var(--radius); cursor: pointer; font-weight: 700;
font-size: 14.5px; color: var(--muted); user-select: none; transition: background .12s, color .12s; }
.hv-tab:hover { color: var(--ink); }
.hv-tab .hv-n { font-weight: 600; font-size: 12px; opacity: .7; }
.hv-tab:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.hv-panel { display: none; }
#hv-watch:checked ~ .hv-watch,
#hv-port:checked ~ .hv-port { display: block; }
#hv-watch:checked ~ .hv-head .hv-tab[for="hv-watch"],
#hv-port:checked ~ .hv-head .hv-tab[for="hv-port"] {
background: var(--panel); color: var(--ink); box-shadow: 0 1px 2px rgba(0,0,0,.12); }
.hv-bar { display: flex; align-items: baseline; justify-content: space-between;
gap: 10px; flex-wrap: wrap; margin-bottom: 8px; }
.hv-bar .sub { margin: 0; }
/* Keep the watchlist add input + "+ Watch" on ONE line (button to the right of a
narrower input) so the list itself sits higher instead of the button wrapping. */
.hv-bar .wl-ctl { flex-wrap: nowrap; flex: 0 1 auto; }
.hv-bar .wl-ctl .wl-add { flex: 1 1 240px; max-width: 300px; min-width: 150px; }
.hv-bar .wl-ctl .btn { flex: none; white-space: nowrap; }
.hv-more { display: block; text-align: center; margin-top: 12px; padding-top: 12px;
border-top: 1px solid var(--line-2); color: var(--accent); font-weight: 600; font-size: 13.5px; }
.hv-more:hover { text-decoration: underline; }
/* dashboard: Deep-mode switch on the analyze box */
.deep-toggle { display: inline-flex; align-items: center; gap: 9px; margin-top: 12px;
cursor: pointer; user-select: none; }
.deep-toggle input { position: absolute; opacity: 0; width: 0; height: 0; }
.deep-track { width: 38px; height: 22px; border-radius: var(--radius-sm); background: var(--panel-2);
border: 1px solid var(--line); position: relative; flex: none; transition: background .15s, border-color .15s; }
.deep-thumb { position: absolute; top: 2px; left: 2px; width: 16px; height: 16px; border-radius: 50%;
background: var(--muted); transition: transform .15s, background .15s; }
.deep-toggle input:checked + .deep-track { background: var(--accent); border-color: var(--accent); }
.deep-toggle input:checked + .deep-track .deep-thumb { transform: translateX(16px); background: #fff; }
.deep-toggle input:focus-visible + .deep-track { outline: 2px solid var(--accent); outline-offset: 2px; }
.deep-label { font-size: 13.5px; font-weight: 600; }
.deep-toggle.is-off { cursor: default; }
.deep-toggle.is-off .deep-track { opacity: .5; }
/* ── reusable explainer: ⓘ ──
A small info dot that reveals a plain-language explanation on hover; drops
BELOW the dot so it's never clipped at the top edge. CSP-safe (pure CSS). */
.info-tip { display: inline-flex; align-items: center; justify-content: center;
width: 15px; height: 15px; border-radius: 50%; font-size: 10px; font-style: normal;
font-weight: 700; line-height: 1; color: var(--muted); background: var(--panel-2);
border: 1px solid var(--line); cursor: help; position: relative; vertical-align: middle; }
.info-tip:hover { color: var(--accent); border-color: var(--accent); }
/* open rightward from the dot (not centered) — these dots live in left-hand
label cells, so centering pushed the left half off the card and clipped it. */
.info-tip:hover::after { content: attr(data-tip); position: absolute; top: calc(100% + 8px);
left: -6px; transform: none; z-index: 80; width: max-content; max-width: min(280px, 78vw);
white-space: normal; text-align: left; padding: 9px 11px; font-size: 11.5px; font-weight: 400;
line-height: 1.5; letter-spacing: 0; text-transform: none; color: var(--ink);
background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius);
box-shadow: 0 8px 24px rgba(0,0,0,.22); pointer-events: none; }
.info-tip:hover::before { content: ""; position: absolute; top: calc(100% + 2px); left: 50%;
transform: translateX(-50%); z-index: 81; border: 6px solid transparent;
border-bottom-color: var(--line); pointer-events: none; }
/* dashboard: opportunistic push-enable nudge */
.push-nudge { display: flex; align-items: center; gap: 12px; padding: 12px 16px; margin-bottom: 14px;
border-left: 4px solid var(--accent); }
.push-nudge .pn-ic { font-size: 20px; flex: none; }
.push-nudge .pn-txt { display: flex; flex-direction: column; gap: 1px; flex: 1; min-width: 0; }
.push-nudge .pn-x { background: none; border: 0; cursor: pointer; color: var(--faint); font-size: 14px; padding: 4px 6px; flex: none; }
.push-nudge .pn-x:hover { color: var(--ink); }
@media (max-width: 600px) {
.push-nudge { flex-wrap: wrap; }
.push-nudge .pn-txt { flex: 1 1 calc(100% - 70px); }
.push-nudge .btn { margin-left: 32px; }
}
/* ── Today: hot-right-now discovery feed ───────────────────────── */
.today-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.today-grid > .today-sec:last-child:nth-child(odd) { grid-column: 1 / -1; }
@media (max-width: 760px) { .today-grid { grid-template-columns: 1fr; } }
.today-sec { padding: 16px 18px; }
.today-sec h2 { margin: 0 0 8px; font-size: 16px; }
.today-list { display: flex; flex-direction: column; }
.today-row { display: grid; grid-template-columns: auto auto 1fr auto; align-items: center; gap: 10px;
padding: 9px 4px; border-top: 1px solid var(--line-2); }
.today-row:first-child { border-top: none; }
.today-row .td-ic { flex: none; width: 18px; display: flex; justify-content: center; }
.today-row .td-tick { font-family: var(--mono); font-weight: 700; font-size: 14px; color: var(--ink);
min-width: 44px; }
.today-row .td-text { font-size: 13px; color: var(--ink-2); text-decoration: none; line-height: 1.35; }
.today-row .td-text:hover { color: var(--accent); }
.today-row .td-act { flex: none; }
.today-row .td-act .btn { opacity: 0; transition: opacity .12s; white-space: nowrap; }
.today-row:hover .td-act .btn { opacity: 1; }
@media (hover: none) { .today-row .td-act .btn { opacity: 1; } } /* touch: always show */
@media (max-width: 520px) { .today-row { grid-template-columns: auto auto 1fr; }
.today-row .td-act { grid-column: 2 / -1; justify-self: start; } }
/* quick-take card on the analysis-in-progress page */
.qt-card { border-left: 4px solid var(--accent); }
.qt-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.qt-head h2 { font-size: 16.5px; }
.qt-px { font-family: var(--mono); font-weight: 700; font-size: 16px; }
/* ── world ship map: full-bleed canvas view ────────────────────── */
.wm-shell { display: flex; flex-direction: column; height: calc(100vh - 58px); }
.wm-bar { display: flex; align-items: center; justify-content: space-between; gap: 14px;
flex-wrap: wrap; padding: 12px 18px 10px; }
.wm-title { display: flex; align-items: baseline; gap: 12px; }
.wm-title h1 { margin: 0; font-size: 20px; }
.wm-controls { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.wm-chip { display: inline-flex; align-items: center; gap: 6px; padding: 5px 11px;
border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--panel-2);
font-size: 12.5px; font-weight: 600; cursor: pointer; user-select: none; }
.wm-chip input { position: absolute; opacity: 0; width: 0; height: 0; }
.wm-chip.off { opacity: .38; }
.wm-dot { width: 9px; height: 9px; border-radius: 50%; flex: none; }
.wm-dot.b1 { background: #4fbf8b; } .wm-dot.b2 { background: #e0743a; }
.wm-dot.b0 { background: #8a93a6; }
.wm-jump { padding: 5px 10px; border-radius: var(--radius); border: 1px solid var(--line);
background: var(--panel-2); color: var(--ink); font-size: 12.5px; }
.wm-map-wrap { position: relative; flex: 1; display: flex; min-height: 380px; }
/* isolation: Leaflet's internal panes/controls run z-index 400–1000, which
would otherwise leak into the page and stack OVER the nav dropdown, ⌘K and
tooltips. A contained stacking context keeps the whole map at z-auto. */
#worldmap { flex: 1; background: #0b0d12; isolation: isolate; }
.wm-canvas { pointer-events: none; }
/* vessel dossier panel — floats over the map's right edge */
.wm-panel { position: absolute; top: 14px; right: 14px; z-index: 600; width: 300px;
max-width: calc(100% - 28px); max-height: calc(100% - 28px); overflow-y: auto;
background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius);
box-shadow: 0 12px 36px rgba(0,0,0,.4); padding: 14px 16px; }
.wm-panel-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 8px; }
.wm-panel-head b { font-size: 15.5px; line-height: 1.3; }
.wm-panel-x { background: none; border: 0; cursor: pointer; color: var(--faint);
font-size: 13px; padding: 2px 4px; flex: none; }
.wm-panel-x:hover { color: var(--ink); }
.wm-panel-sub { color: var(--muted); font-size: 12px; margin: 2px 0 10px; }
.wm-panel-body { font-size: 13px; }
.wm-row { display: flex; justify-content: space-between; gap: 12px; padding: 6px 0;
border-top: 1px solid var(--line-2); }
.wm-row:first-child { border-top: 0; }
.wm-row-l { color: var(--muted); flex: none; font-size: 12px; }
.wm-row-v { text-align: right; overflow-wrap: anywhere; }
.wm-panel-note { margin: 10px 0 0; color: var(--faint); font-size: 11.5px; line-height: 1.5; }
.wm-foot { padding: 8px 18px 12px; }
@media (max-width: 720px) { .wm-shell { height: calc(100vh - 52px); } }
/* maritime page: doorway card into the world map */
.wm-cta { display: flex; align-items: center; gap: 14px; text-decoration: none; color: inherit;
border-left: 4px solid var(--accent); transition: border-color .15s; }
.wm-cta:hover { border-color: var(--accent); }
.wm-cta-ic { font-size: 26px; flex: none; }
.wm-cta-txt { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.wm-cta-go { margin-left: auto; flex: none; color: var(--accent); font-weight: 700; }
/* ── compare: A vs B ──────────────────────────────────────────── */
.cmp-form { align-items: center; flex-wrap: wrap; }
.cmp-form .ticker-input { max-width: 190px; }
.cmp-vs { font-weight: 800; color: var(--faint); font-size: 13px; text-transform: uppercase; }
.cmp-tbl th { font-size: 16px; }
.cmp-tbl th:first-child, .cmp-tbl td:first-child { width: 22%; }
.cmp-tbl th, .cmp-tbl td { width: 39%; }
.cmp-tbl td:first-child { color: var(--muted); font-size: 13px; white-space: nowrap; }
/* the compare table is only 3 fixed-width columns, so it never needs the
horizontal scroll box — and that box (overflow-x:auto also forces overflow-y
to auto) was clipping the info-tip tooltips. Let its wrap show overflow so
the tooltips can escape; the table still fits the card. */
.tbl-wrap:has(.cmp-tbl) { overflow: visible; }
.cmp-tbl td { vertical-align: top; }
/* values read down a column — left-align, don't hug the far edge */
.cmp-tbl td.num, .cmp-tbl th.num { text-align: left; }
/* ── themes: retail baskets ───────────────────────────────────── */
.theme-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 16px; }
.theme-card { padding: 16px 18px; }
.th-head { display: flex; gap: 12px; align-items: flex-start; margin-bottom: 12px; }
.th-emoji { font-size: 26px; flex: none; line-height: 1; }
.th-head h2 { margin: 0 0 2px; font-size: 16.5px; }
.th-names { display: flex; flex-wrap: wrap; gap: 7px; }
.th-name { display: inline-flex; align-items: center; gap: 6px; padding: 5px 10px; border-radius: var(--radius);
background: var(--panel-2); border: 1px solid var(--line); text-decoration: none; }
.th-name:hover { border-color: var(--accent); }
.th-name.hot { border-color: color-mix(in srgb, var(--accent) 55%, var(--line)); }
.th-name.hot .th-tick::after { content: "•"; color: var(--accent); margin-left: 3px; }
.th-tick { font-family: var(--mono); font-weight: 700; font-size: 13px; color: var(--ink); }
.th-chg { font-size: 11.5px; font-variant-numeric: tabular-nums; }
.th-chg.pos { color: var(--green-ink); } .th-chg.neg { color: var(--red-ink); }
/* ── valuation: most-mispriced screen ──────────────────────────── */
.val-screen { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
@media (max-width: 720px) { .val-screen { grid-template-columns: 1fr; } }
.val-col { padding: 16px 18px; }
.vc-head { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; }
.vc-head h2 { margin: 0; font-size: 17px; }
.vc-dot { width: 10px; height: 10px; border-radius: 50%; flex: none; }
.vc-dot.pos { background: var(--green); }
.vc-dot.neg { background: var(--red); }
.val-rows { display: flex; flex-direction: column; }
.val-row { display: grid; grid-template-columns: auto 62px 1fr; align-items: center; gap: 12px;
padding: 10px 6px; border-top: 1px solid var(--line-2, var(--line)); text-decoration: none; color: inherit; }
.val-row:first-child { border-top: none; }
.val-row:hover { background: color-mix(in srgb, var(--accent) 7%, transparent); border-radius: var(--radius); }
.vr-tick { display: flex; flex-direction: column; gap: 1px; min-width: 52px; }
.vr-tick b { font-size: 15px; }
.vr-gap { font-size: 17px; font-weight: 700; text-align: right; font-variant-numeric: tabular-nums; }
.vr-gap.pos { color: var(--green); }
.vr-gap.neg { color: var(--red); }
.vr-detail { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.vr-tags { display: flex; flex-wrap: wrap; gap: 5px; }
.vr-tag { font-size: 10.5px; color: var(--muted); background: color-mix(in srgb, var(--ink) 6%, transparent);
border: 1px solid var(--line); border-radius: var(--radius); padding: 1px 6px; white-space: nowrap; }
/* ── landing: engine scroll section ────────────────────────────── */
.engine-scroll { margin-top: 44px; }
/* was 260vh — less scroll to the next view */
.engine-sticky { padding: 40px 0; }
.engine-steps { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
gap: 14px; max-width: 1020px; margin: 30px auto 0; }
.estep { background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius);
padding: 18px 18px 16px; position: relative; }
.estep .n { display: inline-flex; width: 24px; height: 24px; align-items: center; justify-content: center;
background: var(--accent-soft); color: var(--accent); border-radius: 50%;
font-size: 12.5px; font-weight: 700; margin-bottom: 8px; }
.estep b { display: block; font-size: 14.5px; margin-bottom: 5px; }
.estep p { font-size: 12.5px; line-height: 1.55; color: var(--muted); margin: 0; }
/* ── landing: desk deep-dives ──────────────────────────────────── */
.desk-deep { margin-top: 26px; }
.dd-item { background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius);
padding: 20px 22px; max-width: 860px; margin: 16px 0 0; }
body.m-anim .dd-item { opacity: 0; transform: translateY(34px);
transition: opacity .6s, transform .6s; }
body.m-anim .dd-item.in { opacity: 1; transform: none; }
.dd-head { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; }
.dd-head .ic { width: 18px; height: 18px; opacity: .62; }
.dd-lines { margin-top: 12px; border-top: 1px solid var(--line-2); }
.dd-line { display: flex; gap: 12px; align-items: baseline; padding: 8px 2px;
border-bottom: 1px solid var(--line-2); font-size: 13px; color: var(--ink-2); }
.dd-line .tick { flex: none; min-width: 52px; }
@media (max-width: 720px) { .dd-head a.btn { margin-left: 0 !important; } }
/* orbit cards are links — no underline soup on hover */
/* ── mobile / tablet landing motion ───────────────────────────────
body.m-anim is set by landing.js when the desktop orbit is NOT running
and the user hasn't asked for reduced motion. Hero rises on load; the
desk cards + sections reveal on scroll; the cards drift gently to echo
the specimen hero. All transform/opacity — cheap on phones. */
@keyframes m-rise { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } }
body.m-anim .spec-note, body.m-anim .scan-strip, body.m-anim .estep,
body.m-anim .dd-item, body.m-anim .plan, body.m-anim .demo-term {
opacity: 0; transform: translateY(22px);
transition: opacity .55s ease, transform .6s cubic-bezier(.2,.7,.3,1);
}
body.m-anim .spec-note.in, body.m-anim .scan-strip.in, body.m-anim .estep.in,
body.m-anim .dd-item.in, body.m-anim .plan.in, body.m-anim .demo-term.in {
opacity: 1; transform: none;
}
/* stagger each grid so the cards cascade in rather than snap together */
body.m-anim .estep:nth-child(2) { transition-delay: .07s; }
body.m-anim .estep:nth-child(3) { transition-delay: .14s; }
body.m-anim .estep:nth-child(4) { transition-delay: .21s; }
body.m-anim .plan:nth-child(2) { transition-delay: .06s; }
body.m-anim .plan:nth-child(3) { transition-delay: .12s; }
body.m-anim .plan:nth-child(4) { transition-delay: .18s; }
body.m-anim .plan:nth-child(5) { transition-delay: .24s; }
/* gentle continuous drift — varied timing so cards never move in lockstep */
@keyframes m-drift { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-4px); } }
/* "Watch an analysis" demo terminal */
.watch-demo { margin: 40px auto 8px; }
.demo-term { max-width: 560px; margin: 26px auto 0; background: var(--panel);
border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden;
font-family: var(--mono); font-size: 13.5px; }
.demo-bar { display: flex; align-items: center; gap: 6px; padding: 10px 14px;
border-bottom: 1px solid var(--line); background: var(--panel-2); }
.demo-bar .dot { width: 10px; height: 10px; border-radius: 50%; background: var(--line); }
.demo-title { margin-left: 8px; font-family: var(--sans); font-size: 12px; color: var(--muted); }
.demo-input { padding: 14px 16px 6px; color: var(--ink); }
.demo-prompt { color: var(--muted); }
.demo-caret { display: inline-block; width: 8px; height: 15px; background: var(--accent);
vertical-align: -2px; animation: blink 1s steps(1) infinite; }
@keyframes blink { 50% { opacity: 0; } }
.demo-rows { padding: 8px 16px 4px; }
.demo-row { padding: 6px 0; color: var(--faint); transition: color .3s; }
.demo-row .st { display: inline-block; width: 18px; color: var(--muted); }
.demo-row.run { color: var(--ink-2); }
.demo-row.run .st::before { content: "◌"; color: var(--accent); animation: blink 1s steps(1) infinite; }
.demo-row.done { color: var(--ink-2); }
.demo-row.done .st::before { content: "✓"; color: var(--green-ink); }
.demo-verdict { display: flex; gap: 10px; align-items: center; padding: 12px 16px 16px;
opacity: 0; transition: opacity .5s; font-family: var(--sans); }
.demo-verdict.show { opacity: 1; }
/* preview teaser blur */
.blur-wrap { position: relative; margin-top: 4px; }
.blurred { filter: blur(6px); user-select: none; pointer-events: none; opacity: .75; }
.blur-cta { position: absolute; inset: 0; display: flex; flex-direction: column;
align-items: center; justify-content: center; gap: 4px; text-align: center; }
.blur-cta p { margin: 0 0 6px; }
/* watchlist live price */
.wl-px { font-family: var(--mono); font-size: 13px; color: var(--ink-2); }
.wl-chg { font-family: var(--mono); font-size: 12.5px; font-weight: 600; }
.wl-chg.pos { color: var(--green-ink); } .wl-chg.neg { color: var(--red-ink); }
/* onboarding checklist */
.onboard { border: 1px solid var(--accent); }
.onboard-steps { display: flex; flex-direction: column; gap: 4px; margin-top: 12px; }
/* each step is a real link to where it points — clickable, with a hover state */
.ob-step { display: flex; gap: 12px; align-items: flex-start; text-decoration: none; color: inherit;
padding: 9px 11px; border-radius: var(--radius); transition: background .12s; }
.ob-step:hover { background: color-mix(in srgb, var(--accent) 8%, transparent); }
.ob-step .ob-n { flex: none; width: 26px; height: 26px; border-radius: 50%; display: flex;
align-items: center; justify-content: center; font-size: 13px; font-weight: 700;
background: var(--panel-2); color: var(--ink-2); transition: background .12s, color .12s; }
.ob-step:hover .ob-n { background: var(--accent); color: var(--accent-ink); }
.ob-step.done .ob-n,
.ob-step.done:hover .ob-n { background: var(--green-soft); color: var(--green-ink); }
.ob-step:hover b { color: var(--accent); }
.ob-step b { font-size: 14.5px; } .ob-step p { margin: 2px 0 0; }
/* desks dropdown group labels */
.nav-dd-label { display: block; padding: 6px 12px 2px; font-size: 10px; font-weight: 800;
letter-spacing: .07em; text-transform: uppercase; color: var(--accent); }
.nav-dd-label:first-child { padding-top: 3px; }
/* top loading bar: shows while the next page loads */
#loadbar { position: fixed; top: 0; left: 0; height: 2px; width: 0; z-index: 400;
background: var(--accent); opacity: 0; transition: width .3s ease, opacity .3s; }
#loadbar.on { opacity: 1; animation: loadgrow 2.5s ease-out forwards; }
@keyframes loadgrow { 0% { width: 0; } 60% { width: 70%; } 100% { width: 92%; } }
/* ── sample-analysis replay (landing → /sample) ───────────────── */
.sample-log { margin-top: 14px; min-height: 84px; }
.sample-log p { margin: 3px 0; font-size: 12.5px; color: var(--muted);
animation: samplein .35s ease; }
.sample-log p:last-child { color: var(--ink-2); }
@keyframes samplein { from { opacity: 0; transform: translateY(3px); } to { opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .sample-log p { animation: none; } }
/* ── dashboard watchlist control (one box: name OR ticker) ────── */
.wl-ctl { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.wl-ctl .wl-add { flex: 1 1 260px; max-width: 460px; text-transform: none;
font-family: inherit; font-weight: 500; font-size: 15px; letter-spacing: normal; }
/* ── mobile header layout (must trail all base nav rules — CSS order) ──
Phones: burger sits FAR LEFT, wordmark right of it; the account link
collapses from username text to a head-and-shoulders icon. */
.nav-user { display: inline-flex; align-items: center; }
.nav-user-icon { display: none; }
@media (max-width: 720px) {
.nav-burger { order: -1; } /* flex order: burger first, brand second */
.nav-user-name { display: none; }
.nav-user-icon { display: inline-block; }
.nav-user { padding: 4px; }
/* the base .nav-search-wrap{display:inline-flex} (line ~1063) trails the
earlier mobile hide and re-showed the wide search box, pushing the account
link off-screen — hide it HERE, after that base rule wins by order */
.nav-search-wrap { display: none !important; }
}
/* Phones: the watchlist add box goes full-width so the placeholder isn't
clipped mid-word. (Trails the base .wl-ctl rules.) */
@media (max-width: 560px) {
.wl-ctl { width: 100%; }
.wl-ctl .wl-add { max-width: none; }
}
/* ── Parallax Score board ─────────────────────────────────────── */
.sc-honesty { border-left: 4px solid var(--accent); }
.sc-val-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
gap: 10px 18px; margin-top: 10px; }
.sc-val-grid > div { display: flex; flex-direction: column; gap: 2px; }
.sc-val-l { font-size: 10.5px; text-transform: uppercase; letter-spacing: .07em;
color: var(--muted); font-weight: 700; }
.sc-badge { display: inline-flex; align-items: center; justify-content: center;
min-width: 30px; height: 24px; padding: 0 7px; border-radius: var(--radius);
font-family: var(--mono); font-weight: 700; font-size: 13px; }
.sc-badge.s1, .sc-badge.s2, .sc-badge.s3 { background: var(--red-soft, rgba(220,80,80,.16)); color: var(--red-ink); }
.sc-badge.s4, .sc-badge.s5, .sc-badge.s6, .sc-badge.s7 { background: var(--panel-2); color: var(--muted); border: 1px solid var(--line); }
.sc-badge.s8, .sc-badge.s9, .sc-badge.s10 { background: var(--green-soft, rgba(80,190,130,.16)); color: var(--green-ink); }
/* must out-rank table.tbl td's white-space:nowrap (0,1,2) */
table.tbl td.sc-drivers { max-width: 420px; min-width: 220px; white-space: normal; }
/* ── usability pass: signal strip, funnel, nav diet, desk index, proof ── */
.mt-strip { padding: 12px 16px 6px; }
.mt-head { display: flex; align-items: baseline; justify-content: space-between; }
.mt-head h2 { margin: 0; font-size: 14.5px; }
.mt-row { display: flex; align-items: center; gap: 12px; padding: 9px 2px;
border-top: 1px solid var(--line-2); text-decoration: none; color: inherit; }
.mt-row:first-of-type { border-top: none; }
.mt-row:hover { background: var(--panel-2); }
.mt-row .tick { font-weight: 700; min-width: 52px; }
.mt-why { flex: 1; color: var(--muted); font-size: 13px; min-width: 0;
overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mt-px { display: flex; gap: 8px; align-items: baseline; }
.mt-px b { font-size: 12.5px; }
.mt-go { color: var(--faint); }
.ob-go { border-color: var(--accent); }
.dd-sub { display: block; font-size: 11px; color: var(--muted); font-weight: 400; margin-top: 1px; }
.dd-all { border-top: 1px solid var(--line-2); margin-top: 4px; padding-top: 8px; }
.dk-group { margin: 22px 0 10px; font-size: 15px; }
.dk-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 12px; }
.dk-card { display: flex; flex-direction: column; gap: 3px; padding: 13px 15px;
background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius);
text-decoration: none; color: inherit; }
.dk-card:hover { border-color: var(--accent); }
.dk-card b { font-size: 14px; }
.dk-jargon { font-size: 11px; color: var(--faint); font-family: var(--mono); }
.dk-card p { margin: 3px 0 0; font-size: 12.5px; color: var(--muted); line-height: 1.45; }
/* block, not flex — flex on a turns its raw text nodes into anonymous
side-by-side items and the sentence renders as two columns */
.land-proof { display: block; max-width: 560px; margin: 14px auto 0;
font-size: 13px; line-height: 1.55; color: var(--muted); }
.land-proof b { color: var(--ink); }
.lp-dot { display: inline-block; width: 7px; height: 7px; border-radius: 50%;
background: var(--green, #4fbf8b); margin-right: 7px; vertical-align: 1px; }
/* ── login: sign-in / create-account tabs + magic-link reveal (pure CSS) ── */
.lm-radio { position: absolute; opacity: 0; pointer-events: none; }
.lm-tabs { display: flex; gap: 6px; margin: 14px 0 12px; border-bottom: 1px solid var(--line); }
.lm-tab { padding: 7px 12px; font-size: 13.5px; font-weight: 600; color: var(--muted);
cursor: pointer; border-bottom: 2px solid transparent; margin-bottom: -1px; }
.lm-tab:hover { color: var(--ink); }
#lm-in:checked ~ .lm-tabs label[for="lm-in"],
#lm-up:checked ~ .lm-tabs label[for="lm-up"] { color: var(--ink); border-bottom-color: var(--accent); }
.lm-pane { display: none; }
#lm-in:checked ~ .lm-pane.lm-in { display: flex; }
#lm-up:checked ~ .lm-pane.lm-up { display: flex; }
.lm-link { color: var(--accent); cursor: pointer; text-decoration: underline; }
.lm-magicbox { display: none; }
#lm-magic:checked ~ .lm-magicbox { display: block; }
/* ── free-tier gate: titles & explainers stay crisp, card content blurs ── */
.gate-bar { position: sticky; top: 0; z-index: 55; display: flex; align-items: center;
justify-content: center; gap: 16px; flex-wrap: wrap; padding: 10px 18px;
background: var(--accent-soft, rgba(224,116,58,.12)); border-bottom: 1px solid var(--accent);
font-size: 13.5px; }
.gated main section.card > *:not(h2):not(.sub):not(.page-head):not(.note),
.gated main .wm-shell .wm-map-wrap,
.gated main details.section > .body {
filter: blur(9px); pointer-events: none; user-select: none; }
.gated main section.card h2 .muted { filter: none; }
/* the page header (title + explainer) stays readable by exclusion above */
/* referral pipeline strip on the account page */
.ref-pipeline { display: flex; flex-wrap: wrap; gap: 10px; align-items: baseline;
margin: 10px 0 2px; padding: 9px 13px; background: var(--panel-2);
border: 1px solid var(--line); border-radius: var(--radius); font-size: 13px; }
/* ── pricing: monthly/annual toggle (annual default — 2 months free) ── */
.bill-radio { position: absolute; width: 1px; height: 1px; opacity: 0;
overflow: hidden; clip: rect(0 0 0 0); pointer-events: none; }
.bill-toggle { display: inline-flex; gap: 4px; margin: 2px 0 18px; padding: 4px;
background: var(--panel-2); border: 1px solid var(--line); border-radius: var(--radius); }
.bt-opt { display: inline-flex; align-items: center; gap: 7px; padding: 7px 14px;
border-radius: var(--radius); font-size: 13.5px; font-weight: 600; color: var(--muted); cursor: pointer; }
.bt-badge { font-size: 10.5px; font-weight: 700; padding: 2px 7px; border-radius: var(--radius);
background: var(--green-soft, rgba(80,190,130,.16)); color: var(--green-ink); }
#bill-yr:checked ~ .bill-toggle .bt-yr,
#bill-mo:checked ~ .bill-toggle .bt-mo { background: var(--panel); color: var(--ink);
box-shadow: 0 1px 4px rgba(0,0,0,.15); }
#bill-yr:checked ~ .plans-grid .bill-mo-only { display: none; }
#bill-mo:checked ~ .plans-grid .bill-yr-only { display: none; }
.bill-note { font-size: 12px; font-weight: 400; color: var(--muted); margin-top: 3px; }
.bill-note b { color: var(--green-ink); }
/* ── pricing: let Desk breathe — the flagship card wears the app's dark UI ── */
.plan.premium { background: #12151c; border: 1.5px solid #39404e;
color: #dfe3ea; box-shadow: 0 10px 28px rgba(8,10,14,.28); }
.plan.premium h3, .plan.premium .price { color: #f4f6f9; }
.plan.premium .price .per, .plan.premium .muted, .plan.premium .bill-note { color: #8b93a3; }
.plan.premium ul { color: #c3c9d4; }
.plan.premium .bill-note b { color: #62c893; }
.plan.premium .flag-ink { background: #f4f6f9; color: #12151c; }
.plan.premium .btn { border-color: #4a5262; color: #e8ecf2; background: transparent; }
.plan.premium .btn:hover { border-color: #f4f6f9; }
/* direct traffic: every non-featured plan button goes quiet so the orange
Founding CTA is the only thing that pops */
.plan .btn:not(.btn-primary) { background: transparent; border-color: var(--line);
color: var(--muted); }
.plan .btn:not(.btn-primary):hover { border-color: var(--ink); color: var(--ink); }
/* ── alert bell + inbox ── */
.bell { position: relative; text-decoration: none; }
.bell-n { position: absolute; top: -4px; right: -6px; min-width: 16px; height: 16px;
border-radius: var(--radius); background: var(--accent); color: #fff; font-size: 10px;
font-weight: 700; display: flex; align-items: center; justify-content: center;
padding: 0 4px; }
.al-row { display: flex; gap: 12px; align-items: baseline; padding: 10px 4px;
border-top: 1px solid var(--line-2); text-decoration: none; color: inherit; }
.al-row:first-child { border-top: none; }
.al-row:hover { background: var(--panel-2); }
.al-lead { flex: none; min-width: 92px; display: flex; flex-direction: column; gap: 1px; }
.al-lead .tick { font-size: 14px; font-weight: 700; }
.al-kind { font-family: var(--mono); font-size: 10px; text-transform: uppercase;
letter-spacing: .04em; color: var(--accent); }
.al-text { flex: 1; font-size: 13.5px; }
.al-ts { flex: none; }
@media (max-width: 640px) { .al-lead { min-width: 66px; } }
/* ── the debate room: threaded bull/bear exchange ── */
/* Transcript, not chat. The turns were bubbles capped at 78% (and 64% on wide
screens — narrower the more room there was), alternating left and right, so
the longest prose on the site got the least width. Every turn now runs the
full measure and is identified by its label and a coloured left rule, the
way a hearing transcript identifies a speaker. */
.db-thread { display: flex; flex-direction: column; gap: 10px; margin-top: 12px; }
.db-turn { max-width: none; align-self: stretch; position: relative;
padding: 11px 15px 11px 16px; border-radius: var(--radius);
border: 1px solid var(--line); border-left-width: 3px; background: var(--panel-2); }
.db-turn.db-bull { border-left-color: var(--green-ink); }
.db-turn.db-bear { border-left-color: var(--red-ink); }
.db-turn.db-aggr { border-left-color: var(--accent); }
.db-turn.db-cons { border-left-color: var(--muted); }
.db-turn.db-neut { border-left-color: var(--line); }
.db-turn.db-judge { border-color: var(--ink); border-left-color: var(--ink);
background: var(--panel); }
.db-who { font-size: 11px; font-weight: 700; text-transform: uppercase;
letter-spacing: .06em; color: var(--muted); margin-bottom: 6px; }
.db-bull .db-who { color: var(--green-ink); }
.db-bear .db-who { color: var(--red-ink); }
.db-judge .db-who { color: var(--ink); }
.db-text { font-size: 13px; line-height: 1.62; white-space: pre-line; }
/* Clipped-by-default turns. The checkbox is the state, the label is the
caret; both are inert for anyone who never touches them. */
.db-cb { position: absolute; opacity: 0; width: 1px; height: 1px; } /* focusable */
.db-clip .db-text { display: -webkit-box; -webkit-box-orient: vertical;
-webkit-line-clamp: 7; line-clamp: 7; overflow: hidden; }
.db-cb:checked ~ .db-text { display: block; -webkit-line-clamp: none; line-clamp: none;
overflow: visible; }
/* The fade tells you there is more before you read the control. */
.db-clip:not(:has(.db-cb:checked))::after {
content: ""; position: absolute; left: 3px; right: 1px; bottom: 30px; height: 42px;
background: linear-gradient(to bottom, transparent, var(--panel-2)); pointer-events: none; }
.db-judge.db-clip:not(:has(.db-cb:checked))::after {
background: linear-gradient(to bottom, transparent, var(--panel)); }
.db-more { display: inline-flex; align-items: center; gap: 6px; margin-top: 9px;
font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .08em;
color: var(--muted); cursor: pointer; user-select: none; }
.db-more:hover { color: var(--accent); }
.db-more::after { content: "Read the full argument"; }
.db-cb:checked ~ .db-more::after { content: "Collapse"; }
.db-caret { display: inline-block; font-size: 10px; line-height: 1;
transition: transform .15s ease; }
.db-cb:checked ~ .db-more .db-caret { transform: rotate(180deg); }
.db-cb:focus-visible ~ .db-more { outline: 1px solid var(--accent); outline-offset: 3px; }
@media (prefers-reduced-motion: reduce) { .db-caret { transition: none; } }
.db-committee { text-align: center; font-size: 11px; font-weight: 700;
text-transform: uppercase; letter-spacing: .1em; color: var(--faint);
margin: 6px 0 2px; display: flex; align-items: center; gap: 12px; }
.db-committee::before, .db-committee::after { content: ""; flex: 1;
border-top: 1px solid var(--line-2); }
/* the 94% phone cap and the 64% wide-frame cap below both predate the
transcript layout — turns now run the full measure at every width */
/* reading-room CTA (friends + admin) */
.rr-cta { padding: 12px 16px; border-color: var(--accent); }
.rr-row { display: flex; align-items: center; gap: 12px; }
.rr-ic { font-size: 20px; }
.rr-txt { flex: 1; display: flex; flex-direction: column; gap: 2px; }
/* score page: subscore legend */
.sub-legend { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
gap: 14px; margin-top: 10px; }
.sl-item b { font-size: 13.5px; }
.sl-item p { margin: 5px 0 0; font-size: 12.5px; line-height: 1.55; color: var(--muted); }
.sl-item p b { color: var(--ink); font-size: 12.5px; }
/* watchlist sort control */
.wl-sort { margin-left: 10px; font-size: 12px; padding: 3px 6px; border-radius: var(--radius);
border: 1px solid var(--line); background: var(--panel); color: var(--ink); }
/* ═══ Mobile QoL sweep (trails all base rules — order wins on ties) ═══ */
@media (max-width: 640px) {
/* Cards ate 28px of side padding — ~15% of a 375px screen. Reclaim it
everywhere so every page's content breathes. */
.card { padding: 16px 15px; margin-bottom: 14px; }
.page-head h1 { font-size: 23px; }
/* Macro cross-asset tiles: the tight card left only room for 1 column;
force a clean 2-up so 20 tiles aren't 20 full-width rows. */
.mkt-grid { grid-template-columns: 1fr 1fr; gap: 8px; }
.mkt-tile { padding: 10px 11px; }
.mkt-v { font-size: 22px; }
/* Calendar: the per-day event COUNT (top-right) crowded the day number,
reading as one figure ("14"+"6" = "146"). The colored dots already show
an event is there — drop the count on phones. */
.cal-count { display: none; }
/* Compare: make the whole thing actually fit. The table was 1133px wide
(long labels + values forced it) so stock B sat off-screen. Fixed layout
enforces the %% columns and lets content wrap — both stocks visible. */
.cmp-tbl { table-layout: fixed; width: 100%; font-size: 12.5px; }
.cmp-tbl th { font-size: 14px; }
.cmp-tbl td, .cmp-tbl th, .cmp-tbl td:first-child {
white-space: normal !important; overflow-wrap: anywhere; word-break: break-word; }
.cmp-tbl th:first-child, .cmp-tbl td:first-child { width: 30%; }
.cmp-tbl th, .cmp-tbl td { width: 35%; }
/* the compare form: inputs were squeezed to ~3 chars ("NVI"). Give them
room; the button drops to its own full-width row. */
.cmp-form { flex-wrap: wrap; }
.cmp-form .ticker-input { flex: 1 1 38%; max-width: none; min-width: 0; }
.cmp-form .cmp-vs { flex: 0 0 auto; }
.cmp-form .btn { flex: 1 1 100%; margin-top: 4px; }
/* Touch targets: form fields and stacked form buttons were 27-31px tall
(comfortable minimum is ~44). Give them room without disturbing dense
table action buttons. */
.field input, .field select, .field textarea,
input[type="text"], input[type="email"], input[type="password"],
input[type="number"], input[type="date"], input[type="search"], select, textarea {
min-height: 42px; }
.stack .btn, form.stack button.btn, .cta-row .btn { min-height: 42px; }
}
/* ═══ Desktop readability: cap prose measure ═══
Content caps at 1060px, but at that width a paragraph is ~150 characters
per line — far past the ~75ch comfortable-reading ceiling. Cap the reading
measure of page intros everywhere, and body prose on the text-heavy pages.
Data/tables/grids are never
/
prose, so they're untouched. */
.page-head p { max-width: 66ch; }
.page-methodology .card > p, .page-methodology .card ul,
.page-terms .card p, .page-terms .card ul, .page-terms .wrap > p,
.page-privacy .card p, .page-privacy .card ul,
.page-methodology .wrap > p { max-width: 68ch; }
/* the Score "honest box" verdict paragraph runs the full card width */
.page-score .card > p.muted { max-width: 72ch; }
/* descriptive card subtitles are prose, not table headers — keep them readable */
.card > .sub, .card > p.muted.small { max-width: 74ch; }
/* macro regime narrative is a full paragraph — cap its measure */
.regime-text { max-width: 74ch; }
/* ═══ Report readability: mini-TOC, conviction, delta, sources, sections ═══ */
.toc-chips { position: sticky; top: 0; z-index: 30; display: flex; gap: 6px;
flex-wrap: wrap; padding: 8px 0; margin: 4px 0 10px;
background: var(--bg); border-bottom: 1px solid var(--line-2); }
.toc-chips a { font-size: 12.5px; padding: 4px 11px; border: 1px solid var(--line);
border-radius: var(--radius-sm); color: var(--muted); text-decoration: none; }
.toc-chips a:hover { color: var(--ink); border-color: var(--ink); }
.vc-conv { font-size: 13.5px; padding: 8px 12px; margin: 0 0 12px;
border-left: 3px solid var(--line); background: var(--panel-2); border-radius: var(--radius); }
.vc-conv-high { border-left-color: var(--green-ink, #639922); }
.vc-conv-medium { border-left-color: var(--amber-ink, #ba7517); }
.vc-conv-low { border-left-color: var(--red-ink, #e24b4a); }
.delta-card { padding: 12px 16px; font-size: 14px; }
.sec-head { display: flex; align-items: center; justify-content: space-between;
gap: 10px; margin: 22px 0 10px; }
.section summary .sec-teaser { display: block; font-weight: 400; font-size: 12.5px;
color: var(--muted); margin-top: 3px; }
@media (max-width: 640px) {
.toc-chips { overflow-x: auto; flex-wrap: nowrap; -webkit-overflow-scrolling: touch; }
}
/* ── fair-value band (company valuation) ── */
.val-band-wrap { margin: 14px 0 6px; }
.val-band { position: relative; height: 14px; background: var(--panel-2);
border: 1px solid var(--line); border-radius: var(--radius); }
.vb-range { position: absolute; top: 0; bottom: 0; background: var(--accent-soft);
border-radius: var(--radius); }
.vb-tick { position: absolute; top: -4px; bottom: -4px; width: 3px;
border-radius: 2px; transform: translateX(-50%); }
.vb-base { background: var(--accent); }
.vb-price { background: var(--ink); }
.vb-price.vb-out { background: var(--red-ink); }
.val-band-labels { position: relative; height: 30px; font-size: 11px;
color: var(--muted); margin-top: 4px; }
.val-band-labels span { position: absolute; transform: translateX(-50%);
white-space: nowrap; }
.val-band-labels .vb-price-label { top: 14px; font-weight: 700; color: var(--ink); }
.val-band-labels .vb-price-label.vb-out { color: var(--red-ink); }
/* ── macro desk: FRED dashboard tiles + sparklines ── */
.fred-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
gap: 10px; margin-top: 8px; }
.fred-tile { border: 1px solid var(--line); border-radius: var(--radius); padding: 10px 12px;
background: var(--bg); }
.fred-row { display: flex; align-items: center; justify-content: space-between;
gap: 10px; margin-top: 2px; }
.spk-wrap { margin: 6px 0 4px; }
.spk-wrap .fred-spark { width: 100%; }
.fred-spark { width: 110px; height: 32px; flex: 0 0 auto; color: var(--accent);
opacity: .75; }
@media (max-width: 700px) { .fred-grid { grid-template-columns: 1fr 1fr; gap: 8px; }
.fred-spark { width: 80px; } }
/* ── agent library (/agents) ── */
.ag-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 10px; }
.ag-stat { text-align: center; padding: 10px 6px; }
.ag-stat b { display: block; font-size: 30px; letter-spacing: -0.5px; }
.ag-stat span { color: var(--muted); font-size: 13px; }
.ag-flow { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
gap: 12px; margin-top: 12px; }
.ag-flow-step { border: 1px solid var(--line); border-radius: var(--radius); padding: 14px;
background: var(--bg); position: relative; }
.ag-flow-step b { display: block; margin: 4px 0 4px; }
.ag-flow-n { font-size: 12px; font-weight: 700; color: var(--accent); letter-spacing: 1px; }
.ag-flow-step.ag-here { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent); }
.ag-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
gap: 12px; margin-top: 14px; }
.ag-card { display: flex; flex-direction: column; gap: 6px; align-items: flex-start;
border: 1px solid var(--line); border-radius: var(--radius); padding: 16px;
background: var(--bg); color: inherit; text-decoration: none;
transition: border-color .15s, transform .15s; }
.ag-card:hover { border-color: var(--accent); transform: translateY(-2px); text-decoration: none; }
.ag-card b { font-size: 16px; }
.ag-card p { margin: 0; }
.ag-open { color: var(--accent); font-weight: 600; font-size: 13px; margin-top: auto; }
.ag-three { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 14px; }
.ag-three .card { margin-top: 14px; }
.ag-node { margin-top: 12px; }
.ag-node p { margin: 2px 0 0; }
.ag-links { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
gap: 14px; margin-top: 16px; }
.ag-links a.badge:hover { border-color: var(--accent); text-decoration: none; }
@media (max-width: 700px) { .ag-stat b { font-size: 24px; } }
/* ── landing: deliver checklist + agent band + use cases ── */
.deliver-sec, .uses-sec { margin-top: 54px; }
.deliver-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
gap: 14px; max-width: 980px; margin: 22px auto 0; }
.dlv { border: 1px solid var(--line); border-radius: var(--radius); padding: 16px 18px; background: var(--bg); }
.dlv b { display: block; margin-bottom: 4px; }
.dlv b::before { content: "✓ "; color: var(--accent); font-weight: 800; }
.dlv p { margin: 0; color: var(--muted); font-size: 14px; }
.ag-band { max-width: 980px; margin: 30px auto 0; border: 1px solid var(--line);
border-radius: var(--radius); padding: 22px; background: var(--bg); }
.ag-band-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
gap: 12px; text-align: center; }
.ag-band-stats b { display: block; font-size: 32px; letter-spacing: -0.5px; }
.ag-band-stats span { color: var(--muted); font-size: 13px; }
.uses-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
gap: 14px; max-width: 980px; margin: 22px auto 0; }
.use { border: 1px solid var(--line); border-radius: var(--radius); padding: 16px 18px; background: var(--bg); }
.use-k { display: block; font-weight: 700; margin-bottom: 6px; color: var(--accent); }
.use p { margin: 0; color: var(--muted); font-size: 14px; }
/* ── /agents system map: the whole desk on one board ── */
.pipe { display: grid; grid-template-columns: 1fr auto 1fr auto 1fr auto 1fr;
gap: 10px; align-items: stretch; margin-top: 16px; }
.pipe-col { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.pipe-col-h { font-size: 12px; font-weight: 700; letter-spacing: 1px;
text-transform: uppercase; color: var(--accent); margin-bottom: 2px; }
.pipe-node { display: block; border: 1px solid var(--line); border-radius: var(--radius);
padding: 10px 12px; background: var(--bg); color: inherit; text-decoration: none;
transition: border-color .15s; }
.pipe-node:hover { border-color: var(--accent); text-decoration: none; }
.pipe-node b { display: block; font-size: 14px; }
.pipe-tags { display: flex; flex-wrap: wrap; gap: 4px 8px; margin-top: 4px;
justify-content: center; }
.pipe-tags i { font-style: normal; font-size: 12px; color: var(--muted); }
.pipe-tags i + i::before { content: "· "; color: var(--line); }
.pipe-bull { border-left: 3px solid var(--green); }
.pipe-bear { border-left: 3px solid var(--red); }
.pipe-judge, .pipe-call { border-color: var(--accent); }
.pipe-vs { text-align: center; font-size: 12px; color: var(--muted); }
.pipe-arrow { align-self: center; color: var(--accent); font-size: 22px;
font-weight: 700; padding: 0 2px; }
/* Centred to match the nodes beside it - the seat badges were the last
ragged-left run in a board whose every title is centred. */
.pipe-seats { border: 1px dashed var(--line); border-radius: var(--radius); padding: 10px 12px;
display: flex; flex-wrap: wrap; gap: 6px; align-items: center; justify-content: center; }
.pipe-seats-h { width: 100%; font-size: 12px; font-weight: 700; color: var(--muted);
text-align: center; }
.pipe-seats .badge:hover { border-color: var(--accent); text-decoration: none; }
.pipe-pills { display: flex; gap: 6px; margin-top: 6px; justify-content: center; }
@media (max-width: 900px) {
.pipe { grid-template-columns: 1fr; }
.pipe-arrow { transform: rotate(90deg); text-align: center; padding: 0; line-height: 1; }
}
/* predictions desk: keep question + odds on-screen at phone widths */
.pred-tbl td:first-child { max-width: 420px; }
@media (max-width: 640px) {
.pred-tbl th:nth-child(4), .pred-tbl td:nth-child(4),
.pred-tbl th:nth-child(5), .pred-tbl td:nth-child(5) { display: none; }
.pred-tbl td:first-child { max-width: 56vw; min-width: 56vw; white-space: normal; }
.pred-tbl .meter { display: none; }
.pred-tbl .meter-row { justify-content: flex-start; }
}
/* portfolio brief: needs-attention strip on the portfolio pane */
.pfb-needs { border: 1px solid var(--line); border-radius: var(--radius); padding: 12px 14px; margin: 10px 0; }
.pfb-row { display: flex; align-items: center; gap: 10px; padding: 7px 0; flex-wrap: wrap;
border-top: 1px solid var(--line); }
.pfb-row:first-of-type { border-top: 0; }
/* lens-aware compare: winner cell per discipline row */
.lens-win { font-weight: 700; color: var(--green-ink); }
.cmp-tbl td { white-space: normal; }
.cmp-tbl td .small, .cmp-tbl td.num { max-width: 420px; overflow-wrap: break-word; }
/* custom screener filter bar */
.scr-form { display: flex; flex-wrap: wrap; gap: 10px 14px; align-items: flex-end; }
.scr-f { display: flex; flex-direction: column; gap: 3px; }
.scr-f input[type=number] { width: 96px; }
.scr-check { flex-direction: row; align-items: center; gap: 6px; padding-bottom: 8px; }
/* macro sparkline context strip: date range + observed hi-lo */
.spk-meta { display: flex; justify-content: space-between; gap: 6px;
font-size: 10px; color: var(--faint); margin-top: 3px; white-space: nowrap;
font-variant-numeric: tabular-nums; }
.spk-meta .spk-hl { color: var(--muted); }
/* ── distilled desk views: conviction rows + the collapsed tape ── */
.conv-list { display: flex; flex-direction: column; margin-top: 10px; }
.conv-row { display: flex; align-items: center; gap: 10px; padding: 9px 2px;
border-bottom: 1px solid var(--line); flex-wrap: wrap; }
.conv-row:last-child { border-bottom: 0; }
.conv-row .tick { font-family: var(--mono); font-weight: 700; min-width: 52px; }
.conv-line { color: var(--ink-2); font-size: 14px; flex: 1; min-width: 240px; }
details.tape { margin-top: 18px; }
details.tape > summary { cursor: pointer; list-style: none; color: var(--muted);
font-size: 13.5px; font-weight: 600; padding: 12px 16px; border: 1px dashed var(--line);
border-radius: var(--radius); transition: color .15s, border-color .15s; }
details.tape > summary:hover { color: var(--ink); border-color: var(--accent); }
details.tape > summary::before { content: "▸ "; color: var(--accent); }
details.tape[open] > summary::before { content: "▾ "; }
details.tape[open] > summary { margin-bottom: 4px; }
/* company: what-matters-now strip */
.matters-list { display: flex; flex-direction: column; gap: 6px; margin-top: 8px; }
.matters-row { display: flex; gap: 12px; align-items: baseline; }
.matters-row b { flex: 0 0 92px; font-size: 12px; text-transform: uppercase;
letter-spacing: .04em; color: var(--accent); }
.matters-row span { color: var(--ink-2); font-size: 14.5px; }
/* report: inline more-levels + collapsed coverage/sources */
.lv-more { display: inline-block; }
.lv-more > summary { cursor: pointer; list-style: none; color: var(--muted);
font-size: 12.5px; text-decoration: underline dotted; }
.lv-more[open] > summary { color: var(--ink); }
.cov-details > summary, .src-details > summary { cursor: pointer; list-style: none;
font-size: 14px; }
.cov-details > summary::before, .src-details > summary::before {
content: "▸ "; color: var(--accent); }
.cov-details[open] > summary::before, .src-details[open] > summary::before { content: "▾ "; }
/* The sources panel: four analyst desks and what each reads, then the alt-data
overlay. Two halves on purpose - the fixed input has to be visible next to
the variable one, or a quiet desk day reads as a thin analysis. */
.src-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 18px;
margin-top: 16px; }
.src-desk { min-width: 0; border-left: 2px solid var(--line); padding-left: 12px; }
.src-desk-h { display: block; font-size: 12.5px; font-weight: 700; letter-spacing: -.01em;
margin-bottom: 6px; }
.src-list { list-style: none; margin: 0; padding: 0; }
.src-list li { font-size: 12.5px; color: var(--ink-2); line-height: 1.5; margin-bottom: 3px; }
/* A TEXT label that explains itself on hover. .info-tip is a 15px circle built
to hold the ⓘ glyph - wrapping a whole phrase in it squeezes the phrase into
a badge. This is the same popover on a normal inline run of text. */
.tip-t { position: relative; cursor: help; border-bottom: 1px dotted var(--muted); }
.tip-t:hover { color: var(--ink); border-bottom-color: var(--accent); }
.tip-t:hover::after { content: attr(data-tip); position: absolute; top: calc(100% + 8px);
left: -6px; z-index: 80; width: max-content; max-width: min(280px, 78vw);
white-space: normal; text-align: left; padding: 9px 11px; font-size: 11.5px; font-weight: 400;
line-height: 1.5; letter-spacing: 0; color: var(--ink);
background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius);
box-shadow: 0 8px 24px rgba(0,0,0,.22); pointer-events: none; }
.src-desks-line { margin-top: 18px; padding-top: 14px; border-top: 1px solid var(--line); }
.src-lab { display: block; font-size: 9.5px; letter-spacing: .11em; text-transform: uppercase;
color: var(--muted); font-weight: 700; margin-bottom: 6px; }
.src-names { font-size: 12.5px; color: var(--ink-2); line-height: 1.7; }
.src-names a { color: var(--ink-2); }
.src-names a:hover { color: var(--accent); }
.src-hits { margin-top: 16px; }
.src-none { font-size: 13px; color: var(--muted); margin: 0; }
@media (max-width: 900px) { .src-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .src-grid { grid-template-columns: 1fr; gap: 14px; } }
/* API docs code blocks */
.api-code { background: var(--bg); border: 1px solid var(--line); border-radius: var(--radius);
padding: 12px 14px; font-family: var(--mono); font-size: 12.5px; line-height: 1.6;
overflow-x: auto; margin: 10px 0 6px; }
/* ── toast (Astryx Toast spec, native): bottom stack, auto-hide, error persists ── */
.toast-viewport { position: fixed; bottom: 18px; left: 50%; transform: translateX(-50%);
z-index: 200; display: flex; flex-direction: column; gap: 8px; align-items: center;
pointer-events: none; }
.toast { display: flex; align-items: center; gap: 10px; background: var(--ink);
color: var(--bg); padding: 10px 12px 10px 16px; border-radius: var(--radius); font-size: 14px;
box-shadow: 0 8px 28px rgba(0,0,0,.30); pointer-events: auto; max-width: 90vw;
animation: toast-in .22s cubic-bezier(.2,.7,.3,1); }
.toast-err { background: var(--red); color: #fff; }
.toast-x { background: none; border: 0; color: inherit; opacity: .7; cursor: pointer;
font-size: 12px; padding: 2px 4px; }
.toast-x:hover { opacity: 1; }
.toast-out { opacity: 0; transform: translateY(6px); transition: all .28s; }
@keyframes toast-in { from { opacity: 0; transform: translateY(8px); } }
@media (prefers-reduced-motion: reduce) { .toast { animation: none; } }
/* ── confirm dialog (Astryx AlertDialog spec, native