*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } /* P5 (2026-09-25): the design tokens (both themes) live in /assets/sp-ui.css, linked above — one copy for the SPA and the server-rendered pages. */ html, body { min-height: 100vh; background: var(--bg); color: var(--text); transition: background .3s, color .3s; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } /* P5: the clean-fintech base — the tokens' font. 2026-09-30 (SPA visual pass): the body reads 15px like the server-rendered pages (sp-pages.css), every link takes the accent there too (no browser blue / purple, and one underline offset), and one focus ring serves every focusable element. */ body { font-family: var(--font); font-size: var(--fs-base); line-height: 1.55; font-feature-settings: "cv11", "ss01", "tnum"; } a { color: var(--accent); text-underline-offset: 3px; } :focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; } a:focus-visible { border-radius: 4px; } /* 2026-09-30: one disabled state for every control (it was .4 / .45 / .5 / .6 with wait / not-allowed / default cursors, and none on the chips or the Data buttons), and a disabled control answers no hover. */ button:disabled, input:disabled, select:disabled, textarea:disabled, [aria-disabled="true"] { opacity: .5; cursor: default; } button:disabled:hover, [aria-disabled="true"]:hover { transform: none; box-shadow: none; } .sd-chart-card, .setup-card, .td-card, .pd-card { transition: background-color .3s, border-color .3s, color .3s; } #boot { display: flex; align-items: center; justify-content: center; min-height: 100vh; font-size: 12px; letter-spacing: .06em; text-transform: uppercase; color: var(--mute); } #setup { display: none; min-height: 100vh; align-items: center; justify-content: center; padding: 32px; } #app { display: none; } @keyframes fadeUp { from { opacity:0; transform:translateY(10px); } to { opacity:1; transform:translateY(0); } } @keyframes fadeIn { from { opacity:0; } to { opacity:1; } } @keyframes pulse { 0%,100%{opacity:1} 50%{opacity:.3} } @keyframes spin { to { transform: rotate(360deg); } } .fade-in { animation: fadeUp .35s ease both; } ::-webkit-scrollbar { width: 5px; height: 5px; } ::-webkit-scrollbar-track { background: var(--surf2); } ::-webkit-scrollbar-thumb { background: var(--border2); border-radius: 3px; } .spinner { display: inline-block; width: 12px; height: 12px; border: 2px solid var(--border); border-top-color: var(--accent); border-radius: 50%; animation: spin .8s linear infinite; vertical-align: middle; } /* ══════════════════ SETUP ══════════════════ */ /* 2026-09-30: /admin/setup is an SSR card — --r-lg, 40px in (24px 20px on a phone) — with a 40px h1 in one colour, a 15px lede and its shell commands in --r-md blocks. */ .setup-card { background: var(--surf); border: 1px solid var(--border); border-radius: var(--r-lg); padding: 40px; max-width: 500px; width: 100%; box-shadow: var(--shadow); } .setup-card pre { border-radius: var(--r-md); } .setup-ey { font-size: 13px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--accent); margin-bottom: 12px; } .setup-title { font-size: 40px; font-weight: 700; letter-spacing: -.028em; line-height: 1.12; margin-bottom: 12px; } .setup-title em { color: inherit; font-style: normal; font-weight: inherit; } .setup-body { color: var(--dim); font-size: var(--fs-base); line-height: 1.6; margin-bottom: 28px; } .setup-note { margin-top: 14px; font-size: 13px; color: var(--mute); text-align: center; line-height: 1.6; } @media (max-width: 640px) { #setup { padding: 16px; } .setup-card { padding: 24px 20px; } .setup-title { font-size: 30px; } } /* ══════════════════ TOP NAV — MOVED 2026-09-24 ══════════════════ P3-C2 (contract C-SHELL2): the chrome's rules — the top nav, the brand, the You ▾ menu and its lock / Pricing / watchlist-dot rules, the bell badge, the icon buttons, the account chip, the search box, the phone tab bar, the footer and the cookie bar — live in web/src/ui/sp-shell.css, built into /assets/sp-ui.css, which this page links above. One stylesheet for both shells; this page keeps no selector for those ids and classes. */ /* First-run strip on Today (D10 2026-08-16) — anon/free only: display is double-gated on body.sp-locked (paid never sees it; the class is seeded pre-paint) and .tfr-on (added at boot unless dismissed). */ #today-firstrun { display: none; } body.sp-locked #today-firstrun.tfr-on { display: flex; align-items: center; gap: 12px; margin: 8px 0 16px; padding: 14px 12px 14px 20px; border: 0; border-radius: var(--r-lg); background: var(--accentbg); font-size: var(--fs-sm); color: var(--dim); line-height: 1.55; } #today-firstrun > span { flex: 1; min-width: 0; } #today-firstrun button { display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto; width: 36px; height: 36px; background: transparent; border: none; border-radius: 50%; color: var(--mute); cursor: pointer; font-size: 14px; transition: background-color .15s, color .15s; } /* A11Y-14: was 15×17 */ #today-firstrun button:hover { color: var(--text); background: var(--surf); } /* ─── Legal pages (Terms / Privacy / Cookies) ─── */ /* 2026-09-30: the SSR scale — body 15, h1 40 (.sp-h1), h2 22 (.sp-h2), h3 16 sentence case (.sp-h3); How we grade's heading is an h2 under Proof's h1. */ .lgl-wrap { max-width: 760px; line-height: 1.65; color: var(--text); } .lgl-wrap h1 { font-size: 40px; margin: 0 0 10px; font-weight: 700; letter-spacing: -.028em; line-height: 1.12; } .lgl-wrap h2.mth-title { font-size: 22px; margin: 0 0 6px; font-weight: 700; letter-spacing: -.018em; } /* P3-C3: How we grade's heading is an h2 (Proof owns the h1) */ .lgl-wrap .lgl-eff { color: var(--mute); font-size: 13px; margin-bottom: 32px; } /* scroll-margin: #/methodology/ deep-links land below the sticky 64px top-nav instead of under it (2026-08-16, B5). */ .lgl-wrap h2 { font-size: 22px; margin: 40px 0 12px; font-weight: 700; letter-spacing: -.018em; line-height: 1.25; scroll-margin-top: 84px; } /* Same for the #/alerts bell-landing scroll target (D7b 2026-08-16). */ #alerts-content { scroll-margin-top: 84px; } .lgl-wrap h3 { font-size: 16px; margin: 24px 0 8px; font-weight: 600; color: var(--text); line-height: 1.35; } .lgl-wrap p { margin: 0 0 14px; color: var(--dim); } /* P1-B5: the methodology page's per-feed freshness list (#data-freshness). */ .lgl-wrap .mth-fresh-list { columns: 2 22em; column-gap: 28px; padding-left: 18px; font-size: 13px; color: var(--dim); } .lgl-wrap .mth-fresh-list li { break-inside: avoid; margin: 0 0 4px; } .lgl-wrap ul { padding-left: 22px; margin: 0 0 14px; color: var(--dim); } .lgl-wrap li { margin-bottom: 6px; } .lgl-wrap table { width: 100%; border-collapse: collapse; font-size: 14px; line-height: 1.5; margin: 12px 0 24px; } .lgl-wrap th, .lgl-wrap td { padding: 12px; text-align: left; vertical-align: top; border-bottom: 1px solid var(--border); } .lgl-wrap th { color: var(--mute); font-weight: 600; font-size: 12px; text-transform: uppercase; letter-spacing: .04em; } .lgl-wrap td:first-child { color: var(--text); font-weight: 600; white-space: nowrap; } /* Phones (2026-10-07): a Cookie Policy row is a block — the name, its purpose, then expiry and type side by side, each under its header word (the cell's data-label), as the pricing table does; four columns in 358px left Purpose one word a line and clipped Type (ml_32_s1–s4). Long keys wrap. */ @media (max-width: 600px) { .lgl-wrap .lgl-scroll table, .lgl-wrap .lgl-scroll tbody { display: block; } .lgl-wrap .lgl-scroll thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; } .lgl-wrap .lgl-scroll tr { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px 16px; padding: 14px 0; border-bottom: 1px solid var(--border); } .lgl-wrap .lgl-scroll td { min-width: 0; padding: 0; border: 0; overflow-wrap: anywhere; } .lgl-wrap .lgl-scroll td:first-child, .lgl-wrap .lgl-scroll td:nth-child(2) { grid-column: 1 / -1; white-space: normal; } .lgl-wrap .lgl-scroll td[data-label]::before { content: attr(data-label); display: block; margin-bottom: 2px; color: var(--mute); font-size: var(--fs-xs); font-weight: 600; letter-spacing: .04em; text-transform: uppercase; } } .mth-quick { margin: 16px 0 22px; padding: 18px; background: var(--accentbg); border-radius: var(--r-lg); } .lgl-wrap .mth-quick p:last-child { margin-bottom: 0; } .mth-grades { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin: 16px 0 24px; } .mth-grade { padding: 16px; border: 1px solid var(--border); border-radius: var(--r-md); background: var(--surf); } .lgl-wrap .mth-grade h3 { margin: 0 0 8px; font-size: 1rem; } .lgl-wrap .mth-grade p { margin-bottom: 8px; } .mth-grade summary { padding: 10px 0; min-height: 44px; cursor: pointer; color: var(--accent); } .mth-grade details p { font-size: .875rem; } .mth-example { padding: 16px; border-left: 3px solid var(--accent); background: var(--surf2); border-radius: var(--r-md); } .mth-example strong { color: var(--text); } @media (max-width: 600px) { .mth-grades { grid-template-columns: minmax(0, 1fr); } } /* Cookie bar (2026-09-17 R1-05; slim bar 2026-09-23 P0-F36): its rules moved to the one shell's stylesheet with its markup (P3-C2, C-SHELL2). initCookieBanner() still measures it into --cb-clear while it is up; the page padding, the scroll-top button and the unlock bar add that to their bottom clearance (the --unlock-clear pattern below). */ /* P3-C1 (2026-09-24): the in-app welcome / About page's rules (.lp-*) are gone with the page — it had redirected to / since round 4 (U4-07); the server-rendered home is the one landing page. */ /* Alerts page */ .wal-section-head { font-size: 22px; font-weight: 700; letter-spacing: -.018em; line-height: 1.25; color: var(--text); margin: 56px 0 8px; } .wal-section-head + .page-sub { font-size: var(--fs-base); } .al-tabs { display: flex; gap: 4px; margin-bottom: 14px; overflow-x: auto; scrollbar-width: none; border-bottom: 1px solid var(--border); } .al-tab { flex: none; min-height: 44px; margin-bottom: -1px; background: transparent; border: none; color: var(--mute); padding: 11px 16px; cursor: pointer; font-family: inherit; font-size: var(--fs-base); font-weight: 500; white-space: nowrap; border-bottom: 2px solid transparent; transition: color .12s, border-color .12s; } .al-tab:hover { color: var(--text); } .al-tab.on { color: var(--text); border-bottom-color: var(--accent); font-weight: 600; } .al-tab .al-tab-count { display: inline-block; min-width: 20px; padding: 1px 8px; margin-left: 6px; background: var(--accentbg); color: var(--accent); font-size: 12px; font-weight: 600; text-align: center; border-radius: var(--r-pill); } .al-tab.on .al-tab-count { background: var(--sell); color: var(--bg); } /* (.wal-tabs / .wal-tab — the Watchlist & Alerts page's top-level tabs — removed 2026-09-30: no markup draws them.) */ /* The SPA News feed's rows (.an-*) and the News page's phone layout — REMOVED 2026-09-24 with the SPA News view (P3-C5). */ @media (max-width: 640px) { #news-overlay { padding: 10px !important; } #news-overlay .gloss-modal { max-height: 94vh; } #nw-ticker, #nw-link { flex: 1 1 45%; text-align: center; } /* (.news-filter-row's phone rule moved below its base rule, 2026-10-07.) */ } /* News sentiment — per-item badge (-3..+3) shown next to each headline. 2026-05-28: replaced color-only hardcoded hexes (failed WCAG color- contrast on light mode: 1.6:1) with --buy/--sell tokens that adapt to theme, and prepended a +/− glyph via ::before so the sign is conveyed without relying on color alone. */ .news-score { display: inline-block; min-width: 28px; padding: 2px 8px; border-radius: var(--r-pill); font-size: 12px; font-weight: 700; text-align: center; letter-spacing: .02em; vertical-align: middle; } .news-score[data-s="3"]::before, .news-score[data-s="2"]::before, .news-score[data-s="1"]::before { content: "+"; } .news-score[data-s="-1"]::before, .news-score[data-s="-2"]::before, .news-score[data-s="-3"]::before { content: "−"; } .news-score[data-s="3"], .news-score[data-s="2"], .news-score[data-s="1"] { background: var(--buybg); color: var(--buy); } .news-score[data-s="0"] { background: var(--surf2); color: var(--mute); } .news-score[data-s="-1"], .news-score[data-s="-2"], .news-score[data-s="-3"] { background: var(--sellbg); color: var(--sell); } /* (.news-gauge*, the stock page's news-sentiment gauge — REMOVED 2026-09-24 with the SPA stock page, P4c.) */ /* Filter-chip row (New today's filters) */ .news-filter-row { display: flex; gap: 8px; margin: 0 0 14px; flex-wrap: wrap; } /* Phones: the chips stay reachable deep in a long list — one line that scrolls sideways, stuck under the shell's live header height. 2026-10-07: it stuck at the retired --nav-h's 52px fallback, under the 107px phone header, and wrapped, so one chip floated over every card (ml_12_s2–s5). */ @media (max-width: 640px) { .news-filter-row { position: sticky; top: var(--sp-header-h, 64px); z-index: 30; flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; margin: 0 -16px 14px; padding: 8px 16px; background: var(--bg); border-bottom: 1px solid var(--border); } .news-filter-row::-webkit-scrollbar { display: none; } .news-filter-row > * { flex: none; } } /* ── Visual primitives (2026-06-12 readability pass) ────────────────── One vocabulary for "numbers instead of sentences": stat chips, fill meters, skeletons, pulse dots. Confident-financial: color is surgical (direction / grade / magnitude), motion is purposeful. */ .stat-chip { display: inline-flex; align-items: center; gap: 5px; min-height: 24px; padding: 0 10px; border-radius: var(--r-pill); font-size: 12px; font-weight: 600; background: var(--surf2); border: 1px solid transparent; color: var(--dim); font-variant-numeric: tabular-nums; white-space: nowrap; } .stat-chip .scl { font-weight: 500; color: var(--mute); } /* C17 (2026-08-16): since-visit chips carry the firing strategy's short name in-text ("NVDA · Pelosi Tracker") — was title=-only. Ellipsis caps long nicknames so the chip row stays one line. */ .stat-chip[role="button"], .tb-stack[role="button"] { cursor: pointer; transition: box-shadow .12s; } .stat-chip[role="button"]:hover, .tb-stack[role="button"]:hover { box-shadow: inset 0 0 0 1px currentColor; } .stat-chip .svr-strat { font-weight: 400; color: var(--mute); max-width: 150px; overflow: hidden; text-overflow: ellipsis; } .stat-chip.pos { background: var(--buybg); border-color: transparent; color: var(--buy); } .stat-chip.neg { background: var(--sellbg); border-color: transparent; color: var(--sell); } .stat-chip.gold { background: var(--accentbg); border-color: transparent; color: var(--accent); } .meter { position: relative; height: 6px; border-radius: var(--r-pill); background: var(--surf2); overflow: hidden; min-width: 54px; } .meter > i { position: absolute; inset: 0 auto 0 0; width: 0; border-radius: var(--r-pill); background: var(--accent); transition: width .7s cubic-bezier(.22,.8,.36,1); } .meter.pos > i { background: var(--buy); } .meter.neg > i { background: var(--sell); } .pulse-dot { display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: var(--buy); animation: pulse 2s ease-in-out infinite; vertical-align: middle; } .sk { background: linear-gradient(100deg, var(--surf2) 35%, var(--border) 50%, var(--surf2) 65%); background-size: 220% 100%; animation: skShimmer 1.3s linear infinite; border-radius: var(--r-sm); } @keyframes skShimmer { from { background-position: 130% 0; } to { background-position: -90% 0; } } .stagger-in { animation: fadeUp .4s ease both; } /* (.ci-band — the strategy page's range band — went with the SPA strategy page, P4d.) */ /* Motion kill-switch — every animation/transition collapses for users who ask. */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; } } /* ── Today board (the answer surface) — td-card base + lb-pill chips ── */ .tb-card { position: relative; background: var(--surf); border: 1px solid var(--border); box-shadow: var(--shadow); border-radius: var(--r-lg); padding: 24px; margin-bottom: 16px; } /* 2026-09-30 (heat): the warm / frosted card's top rule — sp-ui.css paints it, this gives it its place. */ .tb-card.sp-heat--hot::after, .tb-card.sp-heat--cold::after { content: ""; position: absolute; inset: 0 0 auto 0; height: 3px; border-radius: var(--r-lg) var(--r-lg) 0 0; pointer-events: none; } .tb-stack .sp-fx--bolt { margin-right: 4px; } .tb-head .sp-fx--sparks { margin-left: -6px; } .tb-head { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; } .tb-rank { font-size: 13px; font-weight: 700; color: var(--mute); min-width: 26px; font-variant-numeric: tabular-nums; } .tb-ticker { font-size: 20px; font-weight: 700; letter-spacing: .01em; color: var(--text); text-decoration: none; } .tb-ticker:hover { color: var(--accent); } .tb-dir { display: inline-flex; align-items: center; min-height: 24px; font-size: 12px; font-weight: 700; padding: 0 10px; border-radius: var(--r-pill); letter-spacing: .04em; text-transform: uppercase; } .tb-dir-BUY { background: var(--buybg); color: var(--buy); } .tb-dir-SHORT { background: var(--sellbg); color: var(--sell); } .tb-dir-MIXED { background: var(--surf2); color: var(--mute); } .tb-score { margin-left: auto; font-size: 13px; font-weight: 700; color: var(--accent); white-space: nowrap; display: inline-flex; align-items: center; gap: 7px; } .tb-score .meter { width: 64px; } .tb-stack, .tb-free { display: inline-flex; align-items: center; min-height: 24px; font-size: 12px; font-weight: 700; padding: 0 10px; border-radius: var(--r-pill); letter-spacing: .04em; text-transform: uppercase; } .tb-stack { background: var(--accentbg); color: var(--accent); } .tb-free { background: var(--buybg); color: var(--buy); } .tb-agree { font-size: 12px; color: var(--dim); margin: 7px 0 9px; } .tb-layers { display: flex; flex-direction: column; gap: 5px; } .tb-layer { display: flex; align-items: baseline; gap: 8px; font-size: 13px; flex-wrap: wrap; padding: 8px 0; border-top: 1px solid var(--border); } .tb-layer-src { color: var(--mute); font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: .06em; min-width: 110px; } .tb-layer-strat { color: var(--text); text-decoration: none; font-weight: 600; } .tb-layer-strat:hover { color: var(--accent); } .tb-layer-stats { color: var(--mute); font-size: 12px; margin-left: auto; white-space: nowrap; } /* P2-C4 (2026-09-24): the member behind a free Congress / OGE layer, at the row's own size; it wraps inside the row like the other parts. */ .tb-layer-actor { color: var(--dim); } .tb-layer-actor .tb-layer-actor-name { color: var(--text); } .tb-layer-actor-more { color: var(--accent); text-decoration: none; } .tb-layer-actor-more:hover { text-decoration: underline; } .tb-grade { font-size: 12px; } .tb-actions { display: flex; gap: 8px; margin-top: 12px; flex-wrap: wrap; } /* P1-B4 (2026-09-24): a masked idea is one inline lock card (SP.ui.lockCard) filling the card — the blurred placeholder row and its overlay CTA are retired with their rules. */ .tb-card.tb-masked { padding: 0; } .tb-masked .sp-lock-card { margin: 0; max-width: none; } @media (max-width: 640px) { .tb-card { padding: 20px 16px; } .tb-ticker { font-size: var(--fs-md); } .tb-layer-src { min-width: 0; width: 100%; } .tb-layer-stats { margin-left: 0; width: 100%; } } /* ── Top 10 portfolio page (.t10-*) — RETIRED 2026-09-25 (P5 Lane T) with the SPA's top10 view: /ideas is the server-rendered Top 10 (web/src/pages/ Top10Page.tsx, styled by web/src/ui/pages/top10.css). ── */ /* The News feed's filter chips, pulse bar, mood bar, trending strip and new-stories badge — REMOVED 2026-09-24 with the SPA News view (P3-C5). */ .al-row { display: grid; grid-template-columns: 60px 80px 1fr auto auto; gap: 12px; align-items: center; padding: 12px 14px; border-bottom: 1px solid var(--border); font-size: 14px; transition: background .12s; } .al-row.unread { background: var(--bg-soft); box-shadow: inset 3px 0 0 var(--accent); } .al-row.unread .al-strat { font-weight: 600; } .al-row .al-ticker { font-weight: 600; color: var(--accent); cursor: pointer; } .al-row .al-strat { color: var(--text); cursor: pointer; } .al-row .al-strat:hover { text-decoration: underline; } .al-row .al-date { color: var(--mute); font-size: 13px; font-variant-numeric: tabular-nums; } .al-row .al-dismiss { display: inline-flex; align-items: center; min-height: 32px; background: transparent; border: 1px solid var(--border2); color: var(--dim); padding: 0 12px; cursor: pointer; font-family: inherit; font-size: 13px; font-weight: 600; border-radius: var(--r-pill); transition: color .15s, border-color .15s, background-color .15s; } .al-row .al-dismiss:hover { color: var(--sell); border-color: var(--sell); background: var(--sellbg); } /* (The nav's account chip and its avatar are styled by the shell's stylesheet since P3-C2 — #top-nav #btn-account .acc-avatar.) */ /* Account page */ .ap-heading { margin-bottom: 24px; } .ap-heading h1 { font-size: 40px; font-weight: 700; letter-spacing: -.028em; line-height: 1.12; margin: 6px 0 10px; } .ap-heading p { max-width: 62ch; margin: 0; color: var(--dim); font-size: var(--fs-md); line-height: 1.55; } .ap-eyebrow { color: var(--accent); font-size: var(--fs-sm); font-weight: 700; letter-spacing: .06em; text-transform: uppercase; } .ap-hero { display: flex; align-items: center; gap: 18px; padding: 22px; background: linear-gradient(115deg,var(--accentbg),var(--surf) 65%); border: 1px solid var(--border); border-radius: var(--r-lg); margin-bottom: 24px; } .ap-hero-avatar { width: 64px; height: 64px; border-radius: 50%; background: var(--accent-fill); color: #fff; font-size: var(--fs-xl); font-weight: 700; display: flex; align-items: center; justify-content: center; overflow: hidden; flex-shrink: 0; } .ap-hero-avatar img { width: 100%; height: 100%; object-fit: cover; } .ap-identity { flex: 1; min-width: 0; } .ap-name { font-size: var(--fs-lg); font-weight: 700; overflow-wrap: anywhere; } .ap-email { font-size: var(--fs-sm); color: var(--mute); overflow-wrap: anywhere; } .ap-dev { color: var(--accent); margin-left: 8px; } .ap-grid { display: grid; grid-template-columns: minmax(0,1.15fr) minmax(0,1fr); gap: 20px; align-items: start; } .ap-grid > .ap-card { min-width: 0; margin: 0; height: 100%; } .ap-wide { grid-column: 1 / -1; } .ap-copy { color: var(--dim); line-height: 1.6; font-size: var(--fs-sm); margin: 8px 0 16px; } .ap-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 16px; } .ap-actions .ap-btn { margin: 0 !important; } .ap-profile { display: grid; grid-template-columns: auto minmax(0,1fr); gap: 14px 18px; font-size: var(--fs-sm); margin: 16px 0 0; } .ap-profile dt { color: var(--mute); } .ap-profile dd { margin: 0; overflow-wrap: anywhere; } .ap-settings { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1fr); gap: 16px; } .ap-settings label { display: grid; gap: 6px; font-size: var(--fs-sm); color: var(--dim); } .ap-status { min-height: 22px; margin: 8px 0 0; color: var(--dim); font-size: var(--fs-sm); line-height: 1.55; } .ap-status[data-tone="success"] { color: var(--buy); } .ap-status[data-tone="error"] { color: var(--sell); } .ap-referral { position: relative; padding: 32px; margin-bottom: 24px; border: 1px solid var(--accent-soft); border-radius: var(--r-xl); background: radial-gradient(ellipse at 100% 0,var(--accentbg),transparent 60%),var(--surf); box-shadow: var(--shadow); } .ap-ref-intro { display: flex; justify-content: space-between; align-items: center; gap: 24px; } .ap-ref-intro > div { max-width: 600px; } .ap-referral h2 { font-size: var(--fs-xl); line-height: 1.2; letter-spacing: -.018em; margin: 10px 0 14px; } .ap-ref-lede { color: var(--dim); line-height: 1.65; margin: 0; } .ap-ref-lede strong { color: var(--text); } .ap-ref-art { width: 164px; height: 132px; flex: none; overflow: visible; } .ap-ref-orbit { fill: none; stroke: var(--accent-soft); stroke-width: 1.5; stroke-dasharray: 4 8; animation: ap-orbit 24s linear infinite; } .ap-ref-line { fill: none; stroke: var(--border2); stroke-width: 2; } .ap-ref-node { fill: var(--surf); stroke: var(--accent-soft); stroke-width: 2; } .ap-ref-center { fill: var(--accent-fill); } .ap-ref-person { fill: none; stroke: var(--accent); stroke-width: 2; stroke-linecap: round; } .ap-ref-check { fill: none; stroke: var(--surf); stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; } [data-theme="dark"] .ap-ref-check { stroke: var(--text); } .ap-ref-stats { display: grid; grid-template-columns: 1fr 1fr 1.3fr; gap: 1px; background: var(--border); border: 1px solid var(--border); border-radius: var(--r-md); overflow: hidden; margin: 24px 0; } .ap-ref-stats > div { padding: 18px 20px; background: var(--surf); min-width: 0; } .ap-ref-stats dt { color: var(--mute); font-size: var(--fs-xs); } .ap-ref-stats dd { font-size: var(--fs-xl); font-weight: 700; margin: 6px 0 0; } .ap-ref-stats dd small { color: var(--mute); font-size: var(--fs-xs); font-weight: 400; } .ap-ref-link-label { display: block; font-size: var(--fs-sm); font-weight: 600; margin: 20px 0 8px; } .ap-ref-link-row { display: flex; gap: 10px; } .ap-ref-link-row .ap-input { flex: 1; min-width: 0; } .ap-ref-link-row .ap-btn { flex: none; } .ap-ref-share { display: flex; align-items: center; flex-wrap: wrap; gap: 12px; margin-top: 12px; } .ap-ref-share > a { font-size: var(--fs-sm); color: var(--accent); } .ap-plans-link { color: var(--accent); } /* R13: the account card's link to the longer plans */ .ap-ref-steps { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 20px; list-style: none; padding: 0; margin: 24px 0 18px; counter-reset: ref-step; } .ap-ref-steps li { counter-increment: ref-step; font-size: var(--fs-sm); color: var(--dim); line-height: 1.55; } .ap-ref-steps li::before { content: counter(ref-step); display: inline-grid; place-items: center; width: 26px; height: 26px; margin-bottom: 8px; background: var(--accentbg); color: var(--accent); border-radius: 50%; font-weight: 700; } .ap-ref-steps strong { display: block; color: var(--text); margin-bottom: 4px; } .ap-ref-note { color: var(--mute); font-size: var(--fs-xs); line-height: 1.65; margin: 12px 0 0; } .ap-ref-details { margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--border); } .ap-ref-details summary { cursor: pointer; font-size: var(--fs-sm); font-weight: 600; color: var(--dim); } .ap-ref-details form { margin-top: 14px; } .ap-ref-people { list-style: none; padding: 0; margin: 14px 0 0; } .ap-ref-people li { display: flex; align-items: start; justify-content: space-between; gap: 16px; padding: 10px 0; font-size: var(--fs-sm); border-bottom: 1px solid var(--border); } .ap-ref-people li > span:first-child { min-width: 0; overflow-wrap: anywhere; } .ap-ref-people .ap-pill { white-space: nowrap; } .ap-ref-empty { margin-top: 18px; padding: 16px; border-radius: var(--r-md); color: var(--dim); background: var(--accentbg); font-size: var(--fs-sm); line-height: 1.6; } .ap-danger { border-color: var(--sell); } .ap-danger summary { cursor: pointer; color: var(--sell); font-size: var(--fs-sm); font-weight: 600; } @keyframes ap-orbit { to { stroke-dashoffset: -240; } } @media (prefers-reduced-motion: reduce) { .ap-ref-orbit { animation: none; } } @media (max-width: 700px) { .ap-grid { grid-template-columns: minmax(0,1fr); gap: 16px; } .ap-hero { gap: 12px; padding: 16px; flex-wrap: wrap; } .ap-hero-avatar { width: 48px; height: 48px; } .ap-name { font-size: var(--fs-md); } .ap-referral { padding: 22px 18px; } .ap-referral h2 { font-size: var(--fs-lg); } .ap-ref-art { position: absolute; right: 18px; top: 24px; width: 64px; height: 76px; } .ap-ref-intro { display: block; } .ap-ref-intro h2, .ap-ref-intro .ap-eyebrow { padding-right: 64px; } .ap-ref-stats { grid-template-columns: 1fr 1fr; } .ap-ref-stats > div { padding: 14px; } .ap-ref-stats > div:last-child { grid-column: 1 / -1; } .ap-ref-stats > div:last-child dd { margin-top: 4px; } .ap-ref-link-row { flex-wrap: wrap; } .ap-ref-link-row .ap-input { flex-basis: 100%; } .ap-ref-steps { grid-template-columns: minmax(0,1fr); gap: 14px; } .ap-ref-steps li { position: relative; padding-left: 38px; } .ap-ref-steps li::before { position: absolute; left: 0; top: 0; } .ap-settings { grid-template-columns: minmax(0,1fr); } .ap-wrap .ap-input { font-size: 16px; } } .ap-card { background: var(--surf); border: 1px solid var(--border); border-radius: var(--r-lg); box-shadow: var(--shadow); padding: 24px; margin-bottom: 16px; } /* 2026-09-30: the signed-out sign-in card is a focused 480px dialog-width card under the brand mark (the nav's .brand-mark, larger), not a 990px band for one button. */ .ap-signin { max-width: 480px; margin: 8px auto 16px; padding: 32px; } .ap-signin-mark { display: flex; align-items: center; justify-content: center; width: 48px; height: 48px; margin: 0 auto 16px; color: #fff; font-size: 18px; font-weight: 800; background: var(--accent-fill); border-radius: 14px; box-shadow: var(--shadow); } .ap-signin-mark svg { display: block; width: 100%; height: 100%; } /* 2026-09-30: the drawn monogram (public/icon.svg), not typeset letters */ @media (max-width: 640px) { .ap-signin { padding: 24px 20px; } } .ap-card-title { font-size: var(--fs-xs); font-weight: 600; color: var(--mute); text-transform: uppercase; letter-spacing: .06em; margin: 0 0 6px; } .ap-card-head { font-size: var(--fs-md); font-weight: 600; color: var(--text); margin-bottom: 12px; } /* 2026-09-30 (SPA visual pass): the SPA's buttons are the SSR pills — .ap-btn is .sp-btn--primary (44px, 15px / 600, 0 22px, --accent-fill, the 1px lift on hover), .ap-btn.ghost is .sp-btn (--surf2), .wl-clear-btn is .sp-btn--ghost (accent text on a hairline). */ .ap-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 44px; padding: 0 22px; background: var(--accent-fill); color: #fff; border: 1px solid transparent; cursor: pointer; font-weight: 600; font-size: var(--fs-base); line-height: 1.2; border-radius: var(--r-pill); font-family: inherit; text-decoration: none; transition: box-shadow .15s, transform .15s, background-color .15s, border-color .15s; } .ap-btn:hover { color: #fff; text-decoration: none; box-shadow: var(--shadow-lg); transform: translateY(-1px); } .ap-btn.ghost { background: var(--surf2); color: var(--text); } .ap-btn.ghost:hover { color: var(--text); background: var(--surf3); box-shadow: none; transform: none; } .ap-btn.danger { background: var(--sellbg); color: var(--sell); } .ap-btn.danger:hover { color: var(--sell); border-color: var(--sell); box-shadow: none; transform: none; } /* Sign in with Apple is black on the light theme and white on the dark (Apple's button rule — the one place a literal black is right). */ .ap-btn.ap-btn-apple, .ap-btn.ap-btn-apple:hover { background: #000; color: #fff; border-color: #000; } [data-theme="dark"] .ap-btn.ap-btn-apple, [data-theme="dark"] .ap-btn.ap-btn-apple:hover { background: #fff; color: #000; border-color: #fff; } /* 2026-09-30: every SPA text field is the SSR .sp-field input — 44px (40px in a toolbar), --r-md, 1px --field-border, --surf, 15px (14px in a toolbar); focus is the accent edge and a 3px --accentbg halo. A select drawn with .ap-input loses the platform arrow for a chevron in --mute (two gradients, so it takes the theme). */ .ap-input { min-height: 44px; min-width: 0; max-width: 100%; padding: 10px 12px; background: var(--surf); border: 1px solid var(--field-border); color: var(--text); font-family: inherit; font-size: var(--fs-base); border-radius: var(--r-md); } .ap-input::placeholder { color: var(--mute); text-transform: none; } select.ap-input { appearance: none; -webkit-appearance: none; padding-right: 36px; cursor: pointer; background-image: linear-gradient(45deg, transparent 50%, var(--mute) 50%), linear-gradient(135deg, var(--mute) 50%, transparent 50%); background-position: calc(100% - 19px) 50%, calc(100% - 14px) 50%; background-size: 5px 5px; background-repeat: no-repeat; } .ap-input:focus, .ap-tester-form input:focus, .bld-search:focus, .cmp-pick-input:focus, .data-sidebar-search:focus, .data-controls input:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accentbg); } /* A11Y-08 (2026-09-29): every SPA field's edge reaches 3:1 in both themes (--field-border, WCAG 1.4.11) — classes and inline styles drew it in --border / --border2 at 1.2–1.7:1; !important outranks the inline ones, and a focused field keeps its accent edge. */ #main :is(input:not([type=checkbox], [type=radio], [type=range], [type=hidden], [type=submit], [type=button]), select, textarea):not(:focus), #main .data-global-search:not(:focus-within) { border-color: var(--field-border) !important; } .ap-pill { display: inline-block; padding: 3px 10px; font-size: var(--fs-xs); font-weight: 700; letter-spacing: .04em; text-transform: uppercase; border-radius: var(--r-pill); } .ap-pill.active { background: var(--buybg); color: var(--buy); } .ap-pill.free { background: var(--surf2); color: var(--mute); } .ap-pill.canceled { background: var(--sellbg); color: var(--sell); } .ap-pill.pastdue { background: var(--warnbg); color: var(--warn); } /* Tester access (2026-09-24): the sign-in card's tester form and the account card's tester note. */ .ap-tester { margin-top: 16px; padding-top: 12px; border-top: 1px solid var(--border); text-align: left; } .ap-tester > summary { cursor: pointer; color: var(--mute); font-size: .75rem; letter-spacing: .04em; text-transform: uppercase; } .ap-tester-form { display: flex; flex-direction: column; gap: 8px; margin-top: 10px; } .ap-tester-form label { color: var(--mute); font-size: .75rem; } .ap-tester-form input { min-height: 44px; padding: 0 12px; border: 1px solid var(--field-border); border-radius: var(--r-md); background: var(--surf); color: var(--text); font: inherit; font-size: var(--fs-base); } .ap-tester-status { min-height: 1.2em; color: var(--mute); font-size: .75rem; } .ap-tester-status.err { color: var(--sell); } .ap-tester-note { margin: 6px 0; color: var(--mute); line-height: 1.5; } /* (The per-control focus rings — buttons, [role=button], .lb-pill, .lb-tab and links, in the old gold — are the one :focus-visible rule at the top, 2026-09-30.) */ /* ─── Inline jargon tooltip (underlined term, hover for plain definition) ─── */ .term { border-bottom: 1px dotted var(--mute); cursor: help; text-decoration: none; color: inherit; } .term:hover { color: var(--text); border-bottom-color: var(--accent); } /* ─── Glossary modal (foundation of plain-language layer) ─── */ .gloss-overlay { position: fixed; inset: 0; background: var(--overlay); display: none; align-items: center; justify-content: center; z-index: 1000; padding: 20px; } .gloss-overlay.on { display: flex; } .gloss-modal { background: var(--surf); border: 1px solid var(--border); box-shadow: var(--shadow-lg); max-width: 880px; width: 100%; max-height: 88vh; display: flex; flex-direction: column; border-radius: var(--r-xl); overflow: hidden; } .gloss-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 24px; padding: 28px 20px 22px 32px; border-bottom: 1px solid var(--border); } .gloss-ey { font-size: 13px; letter-spacing: .06em; text-transform: uppercase; color: var(--accent); margin-bottom: 10px; font-weight: 700; } .gloss-title { font-size: 24px; font-weight: 700; letter-spacing: -.02em; line-height: 1.2; color: var(--text); margin-bottom: 10px; } .gloss-sub { font-size: 13px; color: var(--dim); line-height: 1.55; max-width: 640px; } /* 2026-09-30: every dialog's close is the nav's icon button (#top-nav .btn-icon) — 40px round, --dim, a --surf2 disc on hover. The palette's and the help's say "Esc" in it; the glossary's and the news card's draw ✕. */ .gloss-close, #cmd-close, #help-close { display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; width: 40px; height: 40px; padding: 0; background: none; border: 0; border-radius: 50%; color: var(--dim); font-family: inherit; font-size: 16px; cursor: pointer; transition: background-color .15s, color .15s; } .gloss-close:hover, #cmd-close:hover, #help-close:hover { background: var(--surf2); color: var(--text); } #cmd-close, #help-close { font-size: 12px; font-weight: 600; letter-spacing: .04em; } .gloss-body { padding: 24px 32px 32px; overflow-y: auto; } .gloss-section { margin-bottom: 28px; } .gloss-section:last-child { margin-bottom: 0; } .gloss-section-title { font-size: 12px; letter-spacing: .06em; text-transform: uppercase; color: var(--mute); margin-bottom: 16px; padding-bottom: 8px; border-bottom: 1px solid var(--border); font-weight: 600; } .gloss-row { display: grid; grid-template-columns: 220px 1fr; gap: 24px; padding: 14px 0; border-bottom: 1px solid var(--border); align-items: baseline; } .gloss-row:last-child { border-bottom: none; } .gloss-row-hl { background: var(--accentbg); border-radius: var(--r-sm); transition: background .3s; } @media (max-width: 640px) { .gloss-row { grid-template-columns: 1fr; gap: 6px; } .gloss-head { gap: 12px; padding: 20px 12px 16px 20px; } .gloss-body { padding: 16px 20px 24px; } .gloss-title { font-size: var(--fs-lg); } } .gloss-term { font-weight: 700; color: var(--accent); font-size: 14px; } .gloss-tech { display: block; font-size: 12px; color: var(--mute); letter-spacing: 0; text-transform: none; font-weight: 400; margin-top: 4px; } .gloss-def { font-size: 13px; color: var(--text); line-height: 1.6; } /* P3-C2 (C-SHELL2 / C-SEARCH1): the nav's search trigger, New today's inline search button and the rail's icon buttons are the shell's now — the one search box and #btn-bell / #btn-theme / #btn-admin-gear, styled by the shell's stylesheet. */ /* [hidden] must always hide (round 4, U4-03). The UA sheet's `[hidden] { display: none }` loses to ANY author `display` rule, so an icon button's display:flex painted the admin gear (markup `hidden`, shown only by updateAdminGearVisibility) for every visitor, signed in or not. One global !important reset instead of a per-element override each time an author display rule meets the attribute. */ [hidden] { display: none !important; } /* ══════════════════ COMMAND PALETTE ══════════════════ */ #cmd-overlay { display: none; position: fixed; inset: 0; z-index: 200; background: var(--overlay); /* no backdrop blur — the site's rule: nothing is ever blurred (sp-ui.css) */ align-items: flex-start; justify-content: center; padding-top: 12vh; animation: fadeIn .15s ease; } #cmd-overlay.on { display: flex; } #cmd-modal { width: 100%; max-width: 580px; background: var(--surf); border: 1px solid var(--border); border-radius: var(--r-xl); overflow: hidden; box-shadow: var(--shadow-lg); animation: fadeUp .2s ease both; } #cmd-search-wrap { display: flex; align-items: center; gap: 12px; padding: 12px 12px 12px 24px; border-bottom: 1px solid var(--border); } #cmd-search-wrap .sicon { font-size: 16px; color: var(--mute); } #cmd-input { flex: 1; border: none; outline: none; background: transparent; color: var(--text); font-family: inherit; font-size: 14px; } #cmd-input::placeholder { color: var(--mute); } #cmd-search-wrap:focus-within { box-shadow: inset 0 -2px 0 var(--accent); } /* A11Y-02: the field's focus mark (it has no outline) */ #cmd-results { max-height: 60vh; overflow-y: auto; } .cmd-section { padding: 12px 20px 8px; } .cmd-section-lbl { font-size: 12px; letter-spacing: .06em; text-transform: uppercase; color: var(--mute); margin-bottom: 4px; } .cmd-item { display: flex; align-items: center; gap: 12px; padding: 10px 20px; cursor: pointer; border-left: 2px solid transparent; transition: background .1s, border-color .1s; } .cmd-item:hover, .cmd-item.active { background: var(--surf2); border-left-color: var(--accent); } .cmd-icon { font-size: 13px; color: var(--accent); width: 18px; text-align: center; } .cmd-main { flex: 1; } .cmd-name { font-size: 14px; color: var(--text); } .cmd-meta { font-size: 12px; color: var(--mute); margin-top: 2px; } .cmd-trail { font-size: 12px; color: var(--mute); } .cmd-empty { padding: 32px 24px; text-align: center; color: var(--mute); font-size: 14px; } .cmd-hint { padding: 10px 20px; border-top: 1px solid var(--border); background: var(--surf2); font-size: 12px; color: var(--mute); display: flex; gap: 14px; } .cmd-hint kbd { background: var(--surf); border: 1px solid var(--border2); border-radius: var(--r-sm); padding: 1px 6px; font-family: inherit; font-size: 12px; } /* ══════════════════ SHORTCUT HELP MODAL ══════════════════ */ #help-overlay { display: none; position: fixed; inset: 0; z-index: 200; background: var(--overlay); align-items: flex-start; justify-content: center; padding-top: 12vh; animation: fadeIn .15s ease; } #help-overlay.on { display: flex; } #help-modal { width: 100%; max-width: 520px; background: var(--surf); border: 1px solid var(--border); border-radius: var(--r-xl); overflow: hidden; box-shadow: var(--shadow-lg); animation: fadeUp .2s ease both; } .help-head { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 20px 16px 16px 24px; border-bottom: 1px solid var(--border); } .help-ey { font-size: 12px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--accent); margin-bottom: 4px; } .help-title { font-size: var(--fs-lg); font-weight: 700; letter-spacing: -.015em; color: var(--text); } .help-title:focus, #main h1[tabindex="-1"]:focus { outline: none; } /* A11Y-02 / A11Y-09: focus lands on these titles (a dialog opening, a view change) */ .help-body { padding: 8px 0; } .help-section { padding: 16px 24px; border-bottom: 1px solid var(--border); } .help-section:last-child { border-bottom: none; } .help-section-lbl { font-size: 12px; letter-spacing: .06em; text-transform: uppercase; color: var(--mute); margin-bottom: 10px; } .help-row { display: flex; justify-content: space-between; align-items: center; padding: 5px 0; } .help-label { font-size: 14px; color: var(--text); } .help-row kbd { display: inline-block; min-width: 22px; padding: 2px 7px; background: var(--surf2); border: 1px solid var(--border2); border-radius: var(--r-sm); font-family: inherit; font-size: 12px; color: var(--dim); text-align: center; font-weight: 600; } /* ══════════════════ MAIN ══════════════════ */ /* 2026-09-30 (SPA visual pass): one frame for every view, the server-rendered pages' .sp-page — var(--maxw) wide, 40px 32px 80px (24px 16px 48px on a phone) — so a view's h1 starts where an SSR page's does; the views keep no width or gutter of their own. */ #main { max-width: var(--maxw); margin: 0 auto; padding: 40px 32px 80px; } /* The admin panel, its record browser and the miner log are dense ops tables (8–10 columns): the same frame, 1280px wide instead of --maxw. */ body:has(#view-admin.on) #main, body:has(#view-admin-records.on) #main, body:has(#view-miner-log.on) #main { max-width: 1280px; } /* Phones: the server-rendered pages' type scale (sp-pages.css — h1 32, lede 15, h2 20). 2026-10-07: .page-title, .page-sub, .rc-sub and the Data explorer's head take it below their own base rules — listed here, above them, they never applied ("People" stayed 40px on a 390px phone). */ @media (max-width: 640px) { #main { padding: 24px 16px 48px; } .lgl-wrap h1, .ap-heading h1 { font-size: var(--fs-2xl); } .lgl-wrap h2, .wal-section-head { font-size: var(--fs-lg); } .ap-heading p { font-size: var(--fs-base); } } /* P5: the SPA's footer sits inside
, so its soft band is a rounded panel, not a clipped strip. */ #main > .sp-foot { border: 0; border-radius: var(--r-xl); } /* 2026-09-30 (SPA visual pass): a view's head is the SSR page head — the h1 is .sp-h1 (40px / 700, 32px on a phone), its sentence .sp-lede (17px --dim, 62ch), the block .sp-head (32px below). The accent word the SPA titles carried ("Strategy Lab", "New today") is plain now: no server-rendered heading colours a word. A sub-view's own title inside a merged page (New today under Ideas) is an h2.page-title, and reads as a section h2 (.sp-h2, 22px), not a second h1; the sentences under it read at the body size. */ .page-head { margin-bottom: 32px; display: flex; justify-content: space-between; align-items: flex-end; gap: 24px; } .page-title { font-family: var(--font); font-size: 40px; font-weight: 700; letter-spacing: -.028em; line-height: 1.12; } .page-title em { color: inherit; font-style: normal; font-weight: inherit; } h2.page-title { font-size: 22px; letter-spacing: -.018em; line-height: 1.25; } .page-sub { margin-top: 10px; font-size: var(--fs-md); color: var(--dim); max-width: 62ch; line-height: 1.55; } h2.page-title ~ .page-sub { font-size: var(--fs-base); } @media (max-width: 640px) { .page-title { font-size: var(--fs-2xl); } h2.page-title { font-size: var(--fs-lg); } .page-sub { font-size: var(--fs-base); } } /* P3-C3 (C-IDEAS / C-PROOF): the merged pages' head — the page's one h1, its sentence and the sub-tab strip (Ideas: This week's Top 10 · New today; Proof: Record · Still open · How we grade). The strip scrolls sideways on a narrow phone instead of widening the page. Sizes inherit (the font-size ratchet: no new px literals). */ .sp-merged-head { margin-bottom: 32px; } /* the panel under the tab strip starts where an SSR page's first section would */ .sp-merged-head .page-head { margin-bottom: 24px; } .sp-subtabs { display: flex; gap: 4px; overflow-x: auto; scrollbar-width: none; border-bottom: 1px solid var(--border); } .sp-subtabs::-webkit-scrollbar { display: none; } .sp-subtab { display: inline-flex; flex: none; align-items: center; margin-bottom: -1px; padding: 11px 16px; color: var(--mute); font-size: inherit; font-weight: 500; white-space: nowrap; text-decoration: none; border-bottom: 2px solid transparent; } .sp-subtab:hover { color: var(--text); text-decoration: none; } .sp-subtab.on { color: var(--text); font-weight: 600; border-bottom-color: var(--accent); } /* 2026-10-07: on a phone too the strip stays one line (it wrapped "How we grade" onto a row of its own, ml_13_s1); the three Track record tabs fit at 390px. */ @media (max-width: 640px) { .sp-subtab { padding: 10px 9px; min-height: 44px; } } /* Proof › Record's own pieces (P3-C3): the ledger's line, the tables' captions (their headers read at the table's size, not 9px), the seed-cohort and how-it-works blocks. */ .rc-fresh { margin: 8px 0 12px; } .rc-table { min-width: 560px; } .rc-table th { font-size: inherit; } .rc-table .rc-num { text-align: right; } .rc-table .rc-date { white-space: nowrap; } .rc-table .rc-tk { font-weight: 700; } .rc-caption { caption-side: top; padding: 0 0 6px; color: var(--mute); text-align: left; } .rc-note { margin: 10px 0 0; color: var(--mute); line-height: 1.6; } .rc-empty { color: var(--mute); line-height: 1.6; } .rc-empty strong { color: var(--text); } .rc-sub { margin: 40px 0 12px; color: var(--text); font-size: 22px; font-weight: 700; letter-spacing: -.018em; line-height: 1.25; } @media (max-width: 640px) { .rc-sub { font-size: var(--fs-lg); } } .rc-how { margin: 0; padding-left: 18px; color: var(--mute); line-height: 1.7; } /* R11 (FUN-02): the Top 10's record first, the tiles' gap, the folded closes. */ .rc-sub--first { margin-top: 4px; } .strats-mini-dash.rc-tiles, .rc-card { margin-bottom: 14px; } .strats-mini-dash.rc-tiles { grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 12px; } /* "See the basket's record →" under the tiles is the SSR .sp-more link */ .rc-tiles + .rc-note > a { font-weight: 600; text-decoration: none; } .rc-tiles + .rc-note > a:hover { text-decoration: underline; } .rc-more > summary { margin-top: 10px; padding: 6px 0; color: var(--accent); font-weight: 600; cursor: pointer; } .rc-more > summary:hover { text-decoration: underline; text-underline-offset: 3px; } .view { display: none; } .view.on { display: block; animation: fadeUp .3s ease both; } /* PERF-05 (r11): a view holds a screen's height before its data lands, so the footer after it starts below the fold instead of being pushed down when the content renders (CLS 0.30 on /proof, 0.33 on /people). */ #main > .view.on { min-height: calc(100vh - 80px); } /* 2026-09-30 (SPA visual pass, dead-rule sweep): rules no markup, script, app.js or web/src draws any more were removed — the retired Trades view's stat row, net-flow bar, date / filter pills (.pill, .date-pill, .fdiv, .flbl), volume chart and table (#tbl-wrap, .tbl-head, .th, .trow, .td, .tname …), the hot-stocks hero (.hs-*), the home hero heads (.hh-*, .home-page-head, .home-hero-head), the Master Portfolio strip (.mp-*), the weekly-picks cards (.wp-*), the trades sidebar (.sb-*, .tk*, .prow), the net-flow card (.nf-*), the activity heatmap (.hm-*), the top-picks grids (.htp-*, .tp-*) and the overlap modal (.overlap-*); the retired Strategies grid's cards and command bar (.strat-card, .sc-* but .sc-grade, .sig-preview, .stt-*, .scb-*, .stp-*, .strats-source-*, .strats-flat-*, .bld-entry*); and the one-off leftovers (.filter-chip-wrap, .wal-tab, .key-box / #btn-connect, .view-loading, .no-prices-warning, .tb-note, .lgl-todo, .live-dot, .adm-summary, .wl-pick-*, .tname-row, .smd-card-icon / -lbl). */ .sicon { color: var(--mute); font-size: 13px; } /* the command palette's search glyph */ /* ── Pulse strip (F&G / Biotech / Options / Open signals) — always visible ── 4 mini cards at the top of the strategies page. Each card doubles as a filter shortcut: clicking toggles the matching theme chip in the command bar below and scopes the strategy grid + reveals the contextual panel. */ .strats-mini-dash { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; margin-top: 18px; } @media (max-width: 1100px) { .strats-mini-dash { grid-template-columns: repeat(2, 1fr); } } /* ≤600px (2026-07-14): one horizontal-scroll row instead of 4 stacked cards — the stack pushed the strategy grid another ~280px down the page. Snap + edge gradient mirror the .mobile-hscroll idiom. */ @media (max-width: 600px) { .strats-mini-dash { grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: minmax(220px, 78%); overflow-x: auto; -webkit-overflow-scrolling: touch; scroll-snap-type: x proximity; background-image: linear-gradient(to right, transparent calc(100% - 14px), var(--bg) 100%); background-attachment: local; } .strats-mini-dash > * { scroll-snap-align: start; } } /* The News page's top-ticker sentiment cards (.tts-*) — REMOVED 2026-09-24 (P3-C5). */ .smd-card { display: flex; align-items: flex-start; gap: 12px; padding: 16px 18px; background: var(--surf); border: 1px solid var(--border); border-radius: var(--r-lg); cursor: pointer; transition: border-color .12s, background .12s; text-align: left; font-family: inherit; color: var(--text); } .smd-card:hover { border-color: var(--accent-soft); } .smd-card.loading { color: var(--mute); cursor: progress; } .smd-card.active { border-color: var(--accent); background: var(--accentbg); } .smd-card-body { flex: 1; min-width: 0; } /* 2026-09-30: a Record tile is the SSR .sp-tile — label 13px / 500 --mute, the figure 24px / 700 in the site font, the line under it 13px --mute. */ .smd-card-eyebrow { display: block; font-size: 13px; font-weight: 500; line-height: 1.4; color: var(--mute); } .smd-card-head { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; margin-top: 6px; } .smd-card-num { font-variant-numeric: tabular-nums; font-size: 24px; font-weight: 700; line-height: 1.1; letter-spacing: -.02em; } .smd-card-sub { display: block; font-size: 13px; line-height: 1.4; color: var(--mute); margin-top: 6px; } /* The compare view's eyebrow. (section-head, section-title and section-sub went 2026-10-10: no SPA template emits them — the live heads are wal-section-head and gloss-section-title; git log -S section-title.) */ .section-ey { font-size: 13px; letter-spacing: .06em; text-transform: uppercase; color: var(--accent); font-weight: 700; } /* ══════════════════ STRATEGIES ══════════════════ */ /* (.disclaimer — the retired Strategies page's banner — went 2026-09-30: no SPA markup draws it; the one disclaimer text is the shell footer's.) */ .loading-sub { font-size: 12px; margin-top: 12px; max-width: 380px; margin-left: auto; margin-right: auto; line-height: 1.7; } /* (The retired Strategies grid's cards, compact mode, picks chips, signals strip, command bar, theme panels and flat-list head went with their markup — P3-C3 / Lane S; their last rules were swept 2026-09-30. The Record tab still lays its tiles out as .strats-mini-dash / .smd-card.) */ /* (.ra-* — the strategy page's platform-wide recent-activity feed — went with the SPA strategy page, P4d.) */ /* Confidence Grade pill (2026-05-29) — the watchlist's strategy cards. */ .sc-grade { display: inline-flex; align-items: center; gap: 4px; min-height: 24px; padding: 0 10px; font-size: 12px; font-weight: 700; letter-spacing: .02em; border-radius: var(--r-pill); border: 0; } .sc-grade-strong { background: var(--buybg); color: var(--buy); } .sc-grade-promising { background: var(--warnbg); color: var(--warn); } .sc-grade-unproven, .sc-grade-unrated { background: var(--surf2); color: var(--mute); } .sc-grade-negative { background: var(--sellbg); color: var(--sell); } /* P1-B4 (2026-09-24): two dead blur rules removed — the strategy page's "trade rows 7+" soft paywall (it matched .sd-trade-row / tr.tradeRow, classes no renderer emits; the gated payload ships five trades anyway) and the generic paywall-overlay class with its corner chip (no call site ever used it). The inline lock card is the only lock UI. */ /* P1-B4 (2026-09-24, F30): the freemium CSS blur is retired — the rule that blurred the Strategies mini-dash, gated grid-card bodies, a gated strategy page and the Results "Still open" table for body.sp-locked visitors, and its .sc-cta exemption. A blur over data the visitor had already downloaded was not a paywall: the server gates the data, and every lock is one inline SP.ui.lockCard. (History of the retired rule: 2026-05-30 "headlines only"; 2026-07-14 scoped to gated payloads; 2026-07-31 verdict/short-banner exemptions; 2026-08-16 lock-card exemption; P0-F29 removed the News grid from it.) */ /* Nav lock glyph — marks paid destinations for non-subscribers; hidden for paid users (body loses .sp-locked). P3-C2: the nav's rules (and one .ic.nav-lock rule for every glyph) are the shell's stylesheet's now. */ /* Same convention for paid-destination CTAs outside the nav (2026-08-16: the account page's "Open the builder" button looked unlocked to free users but hits the paywall). Hidden for paid users, gold for locked. */ .ap-btn .nav-lock { display: none; width: 11px; height: 11px; margin-left: 5px; color: inherit; vertical-align: -1px; } body.sp-locked .ap-btn .nav-lock { display: inline-block; } /* In-flow upgrade prompt — only while a locked user is ON a gated view. */ #sp-unlock-bar { display: none; } body.sp-locked:has(#view-strategies.on) #sp-unlock-bar, body.sp-locked:has(#view-activity.on) #sp-unlock-bar { display: flex; } /* (#view-top10 left this list with the SPA's top10 view — P5.) */ #sp-unlock-bar { position: relative; margin: 0 auto 24px; width: fit-content; align-items: center; gap: 14px; max-width: calc(100vw - 28px); background: var(--surf); border: 1px solid var(--accent-soft); box-shadow: var(--shadow-lg); border-radius: var(--r-md); padding: 12px 18px; } #sp-unlock-bar .spu-txt { font-size: 13px; color: var(--text); line-height: 1.4; } #sp-unlock-bar .spu-txt strong { color: var(--accent); } #sp-unlock-bar .spu-txt s { color: var(--mute); opacity: .6; font-weight: 500; } #sp-unlock-bar .spu-cta { display: inline-flex; align-items: center; min-height: 44px; background: var(--accent-fill); color: #fff; text-decoration: none; font-weight: 600; font-size: var(--fs-base); padding: 0 22px; border-radius: var(--r-pill); white-space: nowrap; transition: box-shadow .15s, transform .15s; } #sp-unlock-bar .spu-cta:hover { color: #fff; box-shadow: var(--shadow-lg); transform: translateY(-1px); } /* W5 (2026-07-30 walkthrough): the bar had no dismiss control. The × hides it for 7 days (localStorage, wired in boot JS). The pricing page is unaffected either way — #view-pricing was never in the :has() show-list above. !important for the same specificity reason as body.cb-open below. */ #sp-unlock-bar .spu-x { display: inline-flex; align-items: center; justify-content: center; background: none; border: none; border-radius: 50%; color: var(--mute); cursor: pointer; font-size: 18px; line-height: 1; min-width: 44px; min-height: 44px; padding: 0; align-self: center; transition: background-color .15s, color .15s; } #sp-unlock-bar .spu-x:hover { color: var(--text); background: var(--surf2); } body.spu-dismissed #sp-unlock-bar { display: none !important; } @media (max-width: 560px) { #sp-unlock-bar { flex-direction: column; gap: 8px; text-align: center; padding-right: 44px; } #sp-unlock-bar .spu-x { position: absolute; top: 4px; right: 4px; } } /* Bottom-slot manager (2026-07-14): only one fixed bottom surface at a time — while the cookie banner (z9999) is up, the unlock bar (z600) yields. !important because the show rules above ride :has(#view-…) selectors whose ID argument out-specifies any plain class chain. */ body.cb-open #sp-unlock-bar { display: none !important; } /* Bottom-slot manager, part 2 (go-live audit 2026-07-31): the fixed unlock bar buried three other bottom-anchored surfaces — the scroll-to-top button (z100), the News "N new stories" pill (z150), and the page tail with the footer's Terms/Privacy links. The bar shows/hides via pure-CSS :has() rules, so a ResizeObserver in JS measures it into --unlock-clear (distance from viewport bottom to the bar's top edge; 0px while hidden). Body padding lets the footer scroll clear of the bar; scroll-top and the news pill add the same clearance to their bottom offsets at their own rules. */ /* P0-F36: + --cb-clear, the cookie bar's measured height while it is up (0px otherwise; the unlock bar is hidden while it is up, so the two never add together). */ body { padding-bottom: calc(var(--unlock-clear, 0px) + var(--cb-clear, 0px)); } /* (.sd-perf-block and its head, title and sub-line — the strategy page's holding-period cards — went with the SPA strategy page, P4d; the table rules below stay: the Record's closed table is .sd-perf-table.) */ .sd-perf-table { width: 100%; border-collapse: collapse; font-size: 14px; } .sd-perf-table th { text-align: left; padding: 12px 16px; font-size: 12px; letter-spacing: .04em; text-transform: uppercase; white-space: nowrap; color: var(--mute); font-weight: 600; background: var(--bg-soft); border-bottom: 1px solid var(--border); } .sd-perf-table td { padding: 14px 16px; font-variant-numeric: tabular-nums; border-bottom: 1px solid var(--border); color: var(--text); } .sd-perf-table tbody tr:hover { background: var(--bg-soft); } @media (min-width: 641px) { .rc-scroll { background: var(--surf); border: 1px solid var(--border); border-radius: var(--r-lg); box-shadow: var(--shadow); overflow: hidden; } .rc-scroll .rc-caption { padding: 14px 16px 10px; } } .sd-perf-table tr:last-child td { border-bottom: none; } .sd-perf-table td.up { color: var(--buy); } .sd-perf-table td.down { color: var(--sell); } .sd-perf-table td.muted { color: var(--mute); } .sd-perf-table th.num, .sd-perf-table td.num { text-align: right; } /* (The holding-period table's row highlight, .sd-dual, .sd-leak, .sd-current-signals and the model portfolio's .model-portfolio / .mp-* rules — the strategy page's — went with the SPA strategy page, P4d. The Master Portfolio strip's .mp-* rules above are an older back-compat leftover.) */ /* (.sd-cs-* — the strategy page's ideas table — and .sd-tg-* — its winners / losers cards — went with the SPA strategy page, P4d.) */ /* P4b: Still open's summary tiles — labels and sub-lines at 11px (they were inline 9px / 9.5px, under the snap floor). */ .os-stat { flex: 1; min-width: 104px; padding: 9px 12px; } .os-stat-lbl { color: var(--mute); font-size: var(--fs-xs); letter-spacing: .06em; text-transform: uppercase; } .os-stat-val { margin-top: 2px; font-size: 1.25rem; font-weight: 700; font-variant-numeric: tabular-nums; } .os-stat-sub { margin-top: 1px; color: var(--mute); font-size: var(--fs-xs); } /* ══════════════════ STRATEGY DETAIL — REMOVED 2026-09-24 (P4d) ══════════════════ /strategy/ is server-rendered; the SPA strategy page's rules went with it (the header, the short banner, the fired-on list, the verdict strip and its range band, the model portfolio, the ideas table and its filters, the winners / losers cards, the backtest section, the by-sell-rule bars, the all-trades modal, the grade hook, the star, the range pills, the recent-activity feed). Kept, used elsewhere: the back button (the two compare pages), .sd-chart-* (the Top 10, New today, Proof), .sd-grade* / .sd-disclosure* / .sd-receipts / .rcpt-* (the Strategy Lab's verdict) and .sd-perf-table (the Record's closed table). */ .sd-back, .td-back { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; font-size: var(--fs-base); font-weight: 600; color: var(--accent); background: none; border: none; cursor: pointer; font-family: inherit; padding: 0; margin-bottom: 8px; } .sd-back:hover, .td-back:hover { text-decoration: underline; text-underline-offset: 3px; } /* Confidence Grade banner (2026-05-29) — the one-glance "does this work?" verdict, above the verdict strip. Color keyed by grade. */ .sd-grade { display: flex; gap: 16px; align-items: center; padding: 20px 24px; margin-bottom: 16px; border-radius: var(--r-lg); border: 1px solid var(--border); background: var(--surf); } .sd-grade-badge { flex-shrink: 0; font-size: 15px; font-weight: 700; padding: 8px 16px; border-radius: var(--r-pill); letter-spacing: .01em; white-space: nowrap; } .sd-grade-body { flex: 1; min-width: 0; } .sd-grade-sentence { font-size: 14px; line-height: 1.5; color: var(--text); } .sd-grade-sentence strong { font-weight: 700; } .sd-grade-ci { font-size: 12px; color: var(--mute); margin-top: 6px; } .sd-grade-flag { display: inline-block; margin-left: 8px; padding: 2px 10px; border-radius: var(--r-pill); background: var(--surf2); font-size: 12px; font-weight: 600; } /* 2026-09-30: the verdict is a tinted box — the grade's tint, no coloured edge — and its badge a --surf pill in the grade's colour (both themes). */ .sd-grade-strong { border-color: transparent; background: var(--buybg); } .sd-grade-strong .sd-grade-badge { background: var(--surf); color: var(--buy); } .sd-grade-promising { border-color: transparent; background: var(--warnbg); } .sd-grade-promising .sd-grade-badge { background: var(--surf); color: var(--warn); } .sd-grade-unproven, .sd-grade-unrated { border-color: transparent; background: var(--bg-soft); } .sd-grade-unproven .sd-grade-badge, .sd-grade-unrated .sd-grade-badge { background: var(--surf); color: var(--mute); } .sd-grade-negative { border-color: transparent; background: var(--sellbg); } .sd-grade-negative .sd-grade-badge { background: var(--surf); color: var(--sell); } @media (max-width: 600px) { .sd-grade { flex-direction: column; align-items: flex-start; gap: 10px; } } /* AI Signal Explainer styles removed 2026-06-06 — feature superseded by the plain-English strategy descriptions (_PLAIN_DEFS.json). */ /* Disclosure styling for collapsed-by-default sections (the Strategy Lab's receipts and trades; the strategy page's drawers used it too, until P4d). Uses native
so it works without JS; the summary chevron rotates when open via the [open] selector. */ .sd-disclosure { background: var(--surf); border: 1px solid var(--border); border-radius: var(--r-lg); box-shadow: var(--shadow); margin-bottom: 24px; overflow: hidden; } .sd-disclosure > summary { padding: 16px 24px; cursor: pointer; list-style: none; display: flex; justify-content: space-between; align-items: center; gap: 12px; font-size: 13px; color: var(--text); font-weight: 600; } .sd-disclosure > summary::-webkit-details-marker { display: none; } .sd-disclosure > summary::after { content: "▾"; color: var(--mute); font-size: 12px; transition: transform .15s ease; } .sd-disclosure[open] > summary::after { transform: rotate(180deg); } .sd-disclosure > summary:hover { background: var(--bg-soft); } .sd-disclosure-sub { font-size: 12px; color: var(--mute); font-weight: 400; margin-left: auto; padding-right: 12px; } .sd-disclosure-body { padding: 0 24px 22px; border-top: 1px solid var(--border); } .sd-disclosure-body > * + * { margin-top: 14px; } /* When the disclosure body wraps existing card-style children (drift + activity), give them transparent backgrounds + remove their own borders so the disclosure container provides the chrome. */ .sd-disclosure-body .sd-chart-card { background: transparent; box-shadow: none; border: none; padding: 18px 0; } .sd-disclosure-body .sd-chart-card + .sd-chart-card { border-top: 1px solid var(--border); } /* Receipts Mode (2026-06-04) — honest, de-biased grade shown with its work, inside a collapsed
under the grade banner. The trust artifact. */ .sd-receipts { margin-bottom: 14px; } .sd-receipts > summary { color: var(--accent); } .rcpt-table { width: 100%; border-collapse: collapse; font-size: 13px; } .rcpt-table td { padding: 7px 0; border-bottom: 1px solid var(--border); vertical-align: top; line-height: 1.45; } .rcpt-table tr:last-child td { border-bottom: none; } .rcpt-table td:first-child { color: var(--mute); width: 46%; padding-right: 14px; } .rcpt-table td:last-child { color: var(--text); font-variant-numeric: tabular-nums; } .rcpt-sub { color: var(--mute); font-size: 12px; font-weight: 400; } .rcpt-strike { text-decoration: line-through; color: var(--mute); opacity: .75; } .rcpt-vs { color: var(--mute); font-size: 12px; margin-left: 6px; } .rcpt-warn { color: var(--warn); font-size: 12px; margin-left: 4px; white-space: nowrap; } .rcpt-ok { color: var(--buy); font-size: 12px; margin-left: 4px; white-space: nowrap; } .rcpt-pending { color: var(--mute); font-style: italic; } .rcpt-catch { font-size: 13px; line-height: 1.55; color: var(--mute); margin: 12px 0 0; font-style: italic; } .rcpt-catch strong { color: var(--text); font-style: normal; } a.rcpt-method { display: inline-block; margin-top: 12px; font-size: 12px; color: var(--accent); text-decoration: none; } a.rcpt-method:hover { text-decoration: underline; } /* Strategy Lab (/#/builder) — Honest Strategy Builder. Reuses .sd-grade / .sd-receipts / .rcpt-* for the verdict (same receipts presentation as strategy detail — the barbell rule); these are just the picker chrome. */ .bld-layout { display: grid; grid-template-columns: minmax(0, 340px) minmax(0, 1fr); gap: 18px; margin-top: 16px; align-items: start; } /* C1 (2026-08-16): one-column ≤900px used to render the ~700px picker FIRST, so a run's verdict/insufficient-banner/error all painted below the fold — "Run produces nothing". Once any result state exists the result column takes over the top slot, so re-runs keep it on screen; _bldScrollToResult() handles the first run's scroll. */ @media (max-width: 900px) { .bld-layout { grid-template-columns: 1fr; } .bld-layout.bld-has-result .bld-picker-col { order: 2; } } .bld-result-col { scroll-margin-top: 84px; } /* sticky 64px nav clearance for scrollIntoView */ .bld-panel { background: var(--surf); border: 1px solid var(--border); border-radius: var(--r-lg); box-shadow: var(--shadow); padding: 24px; } .bld-slots { display: flex; flex-wrap: wrap; gap: 6px; margin: 8px 0 10px; min-height: 30px; } .bld-slot { display: inline-flex; align-items: center; gap: 6px; min-height: 32px; padding: 0 8px 0 12px; border: 0; border-radius: var(--r-pill); font-size: 13px; font-weight: 600; color: var(--accent); background: var(--accentbg); } .bld-slot button { background: none; border: none; color: var(--mute); cursor: pointer; font-size: 13px; line-height: 1; padding: 1px 2px; } .bld-slot button:hover { color: var(--sell); } .bld-search { width: 100%; box-sizing: border-box; min-height: 40px; padding: 0 12px; border: 1px solid var(--field-border); border-radius: var(--r-md); background: var(--surf); color: var(--text); font-family: inherit; font-size: 14px; } .bld-mode-cap { font-size: 12px; color: var(--mute); line-height: 1.55; margin: -2px 0 10px; } .bld-mode-cap b { color: var(--dim); } .bld-palette-foot { font-size: 12px; color: var(--mute); line-height: 1.5; margin: 6px 0 0; } .bld-list-legend { font-size: 12px; color: var(--mute); text-transform: uppercase; letter-spacing: .05em; margin: 8px 0 0; } .bld-dir { font-size: 12px; flex: 0 0 auto; } .bld-clear { min-height: 32px; background: none; border: 1px solid var(--border2); border-radius: var(--r-pill); color: var(--dim); cursor: pointer; font-family: inherit; font-size: 13px; font-weight: 600; padding: 0 12px; } .bld-clear:hover { color: var(--sell); border-color: var(--sell); } .bld-list { max-height: 380px; overflow-y: auto; margin-top: 8px; border-top: 1px solid var(--border); } .bld-row { display: flex; align-items: center; gap: 8px; width: 100%; text-align: left; padding: 8px 6px; border: none; border-bottom: 1px solid var(--border); background: transparent; color: var(--text); cursor: pointer; font-family: inherit; font-size: 14px; } .bld-row:hover { background: var(--surf2); } .bld-row .bld-row-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .bld-row .bld-row-alpha { font-variant-numeric: tabular-nums; font-size: 12px; color: var(--mute); white-space: nowrap; } .bld-mode { display: flex; gap: 4px; margin: 10px 0; padding: 4px; background: var(--surf2); border-radius: var(--r-pill); } .bld-mode button { flex: 1; min-height: 40px; padding: 0 12px; border: 0; background: transparent; color: var(--dim); border-radius: var(--r-pill); cursor: pointer; font-family: inherit; font-size: 14px; font-weight: 500; transition: background-color .15s, color .15s; } .bld-mode button:hover { color: var(--text); } .bld-mode button.on { color: var(--text); font-weight: 600; background: var(--surf); box-shadow: var(--shadow); } .bld-run { width: 100%; min-height: 44px; padding: 0 22px; border: none; border-radius: var(--r-pill); background: var(--accent-fill); color: #fff; font-weight: 600; font-size: var(--fs-base); cursor: pointer; font-family: inherit; margin-top: 4px; transition: box-shadow .15s, transform .15s; } .bld-run:hover:not(:disabled) { box-shadow: var(--shadow-lg); transform: translateY(-1px); } .bld-caveat { font-size: 13px; line-height: 1.55; color: var(--mute); border-left: 3px solid var(--border2); padding: 4px 0 4px 12px; margin: 14px 0 0; } /* A run too thin to grade is a verdict box in the "some evidence" tone: the tint, no coloured edge. */ .bld-insufficient { margin: 0 0 12px; padding: 16px 20px; font-size: 14px; line-height: 1.55; color: var(--text); background: var(--warnbg); border-radius: var(--r-lg); } .bld-insufficient strong { color: var(--warn); } .bld-ing-table { width: 100%; border-collapse: collapse; font-size: 14px; } .bld-ing-table th { text-align: left; font-size: 12px; text-transform: uppercase; letter-spacing: .06em; color: var(--mute); padding: 6px 8px; border-bottom: 1px solid var(--border); } .bld-ing-table td { padding: 7px 8px; border-bottom: 1px solid var(--border); font-variant-numeric: tabular-nums; } .bld-empty { padding: 26px 18px; text-align: center; color: var(--mute); font-size: 13px; line-height: 1.6; } .bld-saved-row { display: flex; align-items: center; gap: 8px; padding: 8px 6px; border-bottom: 1px solid var(--border); font-size: 14px; } .bld-saved-row .bld-saved-load { flex: 1; text-align: left; background: none; border: none; color: var(--text); cursor: pointer; font-family: inherit; font-size: 14px; padding: 0; } .bld-saved-row .bld-saved-load:hover { color: var(--accent); } .bld-saved-row .bld-saved-del { background: none; border: none; color: var(--mute); cursor: pointer; padding: 2px 4px; } .bld-saved-row .bld-saved-del:hover { color: var(--sell); } /* Locked teaser cards */ .bld-teaser-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 14px; margin-top: 16px; } .bld-teaser-card { background: var(--surf); border: 1px solid var(--border); border-radius: var(--r-lg); padding: 20px; } .bld-teaser-recipe { font-size: 13px; color: var(--mute); margin: 0 0 10px; line-height: 1.5; } .bld-teaser-recipe strong { color: var(--text); } /* Strategy-compare picker (C8, 2026-08-16) — reuses the Lab's .bld-* row idiom; the search+list fold behind a
once 2 are picked so the side-by-side receipts own the fold. */ .cmps-pickbox { border: 1px solid var(--border); border-radius: var(--r-lg); background: var(--surf); box-shadow: var(--shadow); padding: 12px 20px; } .cmps-pickbox > summary { cursor: pointer; font-size: var(--fs-base); font-weight: 600; color: var(--text); list-style: none; min-height: 44px; display: flex; align-items: center; gap: 8px; } .cmps-pickbox > summary::-webkit-details-marker { display: none; } .cmps-pickbox > summary::after { content: "▾"; color: var(--mute); font-size: 12px; margin-left: auto; } .cmps-pickbox[open] > summary::after { content: "▴"; } .cmps-pickbox .bld-list { max-height: none; overflow: visible; } .cmps-hold { padding: 14px 6px 6px; border-bottom: 1px solid var(--border); color: var(--dim); font-size: var(--fs-xs); font-weight: 600; } .cmps-empty { padding: 28px 20px; text-align: center; border: 1px dashed var(--border2); border-radius: var(--r-lg); color: var(--dim); font-size: var(--fs-base); line-height: 1.6; } .cmps-empty h2 { margin: 0 0 6px; color: var(--text); font-size: var(--fs-md); } .cmps-pairs { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin-top: 14px; } .cmps-pairs .lb-pill { white-space: normal; text-align: left; } /* C10 (2026-08-16): side-by-side is the entire point — ≤560px the auto-fit grid stacked the receipt columns vertically. Swipeable snap-scroll columns instead (the .strats-mini-dash idiom). */ .cmps-cols { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 14px; } .cmps-portrait { display:block; width:100%; height:auto; border-radius:6px; margin:0 0 18px; background:var(--surf2); } .cmps-timeline { list-style:none; padding:0; margin:14px 0 20px; display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:8px; } .cmps-timeline li { position:relative; padding-top:17px; font-size:var(--fs-xs); line-height:1.45; border-top:1px solid var(--border); overflow-wrap:anywhere; } .cmps-timeline li::before { content:''; position:absolute; top:-4px; left:0; width:7px; height:7px; border-radius:50%; background:var(--mute); } .cmps-timeline strong { display:block; margin-bottom:4px; color:var(--text); } @media (max-width: 560px) { .cmps-cols { grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: 80%; overflow-x: auto; -webkit-overflow-scrolling: touch; scroll-snap-type: x proximity; background-image: linear-gradient(to right, transparent calc(100% - 14px), var(--bg) 100%); background-attachment: local; } .cmps-cols > * { scroll-snap-align: start; } } /* P4c (2026-09-24): the two-person compare picker — #/compare// names the first person and asks for the second (the server-rendered politician page's "Compare →"); sizes in rem, no inline styles. */ .cmp-pick { max-width: 34rem; margin: 0 auto; padding: 24px; display: flex; flex-direction: column; gap: .6rem; background: var(--surf); border: 1px solid var(--border); border-radius: var(--r-lg); box-shadow: var(--shadow); } .cmp-pick-ey { margin: 0; color: var(--accent); font-size: var(--fs-sm); font-weight: 700; letter-spacing: .06em; text-transform: uppercase; } .cmp-pick-title { margin: 0 0 .4rem; font-size: 1.5rem; line-height: 1.25; } .cmp-pick-vs { color: var(--mute); font-weight: 400; } .cmp-pick-lbl { color: var(--dim); font-size: var(--fs-sm); font-weight: 600; } .cmp-pick-input { min-height: 44px; padding: 0 12px; border: 1px solid var(--field-border); border-radius: var(--r-md); background: var(--surf); color: var(--text); font: inherit; } .cmp-pick-go { align-self: flex-start; } .cmp-pick-note { margin: .4rem 0 0; color: var(--mute); font-size: .8125rem; line-height: 1.5; } /* Conviction layer chips + receipt sheet — kept with their helpers (the P4c keep list); the stock page's conviction card that drew them, and its .conv-layers row and .conv-label pill, went with the SPA stock page (P4c). The board-only CSS went with the page fold into Today's "Stacked ideas (2+ agree)" filter (2026-08-19 dead-code sweep). */ /* C12 (2026-08-16): chips are now