/* =========================================================================
   Cred design system
   Quiet by default, detail on demand. System type, system colors, hairline
   separators instead of boxes, glass only where things float (nav, sheet,
   palette, dock), one easing curve for every motion. Dark by default; light
   follows the OS or the toggle.
   ========================================================================= */
:root {
  --font: -apple-system, BlinkMacSystemFont, "SF Pro Text", "SF Pro Display", "Segoe UI Variable Text", "Segoe UI", Inter, system-ui, sans-serif;
  --font-display: -apple-system, BlinkMacSystemFont, "SF Pro Display", "Segoe UI Variable Display", "Segoe UI", Inter, system-ui, sans-serif;
  --ease: cubic-bezier(.22, 1, .36, 1);
  --spring: cubic-bezier(.34, 1.4, .64, 1);
  --fast: 160ms; --med: 320ms; --slow: 520ms;
  --r-lg: 20px; --r-md: 14px; --r-sm: 10px; --r-pill: 999px;

  /* Dark (default): iOS dark system colors */
  --bg: #000;
  --surface: #121214;
  --surface-2: #1c1c1e;
  --fill: rgba(120, 120, 128, .24);
  --fill-2: rgba(120, 120, 128, .16);
  --fill-3: rgba(118, 118, 128, .10);
  --sep: rgba(255, 255, 255, .09);
  --sep-strong: rgba(255, 255, 255, .16);
  --label: #f5f5f7;
  --label-2: rgba(235, 235, 245, .62);
  --label-3: rgba(235, 235, 245, .34);
  --accent: #0a84ff;
  --good: #30d158; --good-bg: rgba(48, 209, 88, .15);
  --bad: #ff453a;  --bad-bg: rgba(255, 69, 58, .15);
  --live: #4aa8ff; --live-bg: rgba(74, 168, 255, .15);
  --neutral: #8e8e93;
  --glass: rgba(0, 0, 0, .68);
  --glass-strong: rgba(28, 28, 30, .86);
  --shadow-float: 0 24px 60px -20px rgba(0, 0, 0, .8);

  /* Names the app's script reads for chart colors */
  --text: var(--label); --text-2: var(--label-2); --text-3: var(--label-3);
  --hair: var(--sep); --hair-strong: var(--sep-strong);
  --brand-solid: var(--accent); --well: var(--fill-3);
  color-scheme: dark;
}
@media (prefers-color-scheme: light) {
  :root:not([data-theme="dark"]) {
    --bg: #fff; --surface: #f2f2f7; --surface-2: #fff;
    --fill: rgba(120, 120, 128, .2); --fill-2: rgba(120, 120, 128, .12); --fill-3: rgba(118, 118, 128, .07);
    --sep: rgba(60, 60, 67, .12); --sep-strong: rgba(60, 60, 67, .22);
    --label: #000; --label-2: rgba(60, 60, 67, .62); --label-3: rgba(60, 60, 67, .34);
    --accent: #007aff;
    --good: #248a3d; --good-bg: rgba(52, 199, 89, .14);
    --bad: #d70015;  --bad-bg: rgba(255, 59, 48, .11);
    --live: #0066d6; --live-bg: rgba(0, 113, 227, .11);
    --glass: rgba(255, 255, 255, .74); --glass-strong: rgba(255, 255, 255, .9);
    --shadow-float: 0 24px 60px -24px rgba(0, 0, 0, .28);
    color-scheme: light;
  }
}
:root[data-theme="light"] {
  --bg: #fff; --surface: #f2f2f7; --surface-2: #fff;
  --fill: rgba(120, 120, 128, .2); --fill-2: rgba(120, 120, 128, .12); --fill-3: rgba(118, 118, 128, .07);
  --sep: rgba(60, 60, 67, .12); --sep-strong: rgba(60, 60, 67, .22);
  --label: #000; --label-2: rgba(60, 60, 67, .62); --label-3: rgba(60, 60, 67, .34);
  --accent: #007aff;
  --good: #248a3d; --good-bg: rgba(52, 199, 89, .14);
  --bad: #d70015;  --bad-bg: rgba(255, 59, 48, .11);
  --live: #0066d6; --live-bg: rgba(0, 113, 227, .11);
  --glass: rgba(255, 255, 255, .74); --glass-strong: rgba(255, 255, 255, .9);
  --shadow-float: 0 24px 60px -24px rgba(0, 0, 0, .28);
  color-scheme: light;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; min-height: 100vh; background: var(--bg); color: var(--label); font: 15px/1.45 var(--font); letter-spacing: -.01em; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; overflow-x: hidden; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; -webkit-tap-highlight-color: transparent; }
img { display: block; }
kbd { font: 600 11px/1 var(--font); padding: 3px 6px; border-radius: 6px; background: var(--fill-2); color: var(--label-3); }
::selection { background: color-mix(in srgb, var(--accent) 30%, transparent); }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 8px; }
.backdrop { display: none; }
.glass { background: var(--glass); backdrop-filter: saturate(1.8) blur(20px); -webkit-backdrop-filter: saturate(1.8) blur(20px); }

/* ---------- Navigation: one quiet bar ---------- */
.nav { position: sticky; top: 0; z-index: 40; }
.nav-inner { height: 56px; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; padding: 0 max(20px, calc((100vw - 1180px) / 2)); border-bottom: 1px solid var(--sep); }
.brand { display: flex; align-items: center; gap: 9px; justify-self: start; }
.logo { width: 26px; height: 26px; border-radius: 8px; background: var(--label); position: relative; flex: none; }
.logo::after { content: ""; position: absolute; inset: 7px 7px 7px 8px; border: 2.5px solid var(--bg); border-right-color: transparent; border-radius: 50%; }
.logo.sm { width: 16px; height: 16px; border-radius: 5px; }
.logo.sm::after { inset: 4px 4px 4px 5px; border-width: 2px; }
.word { font: 700 18px/1 var(--font-display); letter-spacing: -.03em; }
.seg { position: relative; display: flex; gap: 4px; }
.seg a { position: relative; z-index: 1; padding: 7px 14px; font-size: 14px; font-weight: 600; color: var(--label-3); border-radius: var(--r-pill); transition: color var(--fast) var(--ease); }
.seg a:hover, .seg a.on { color: var(--label); }
.seg-thumb { position: absolute; top: 0; bottom: 0; left: 0; width: 0; border-radius: var(--r-pill); background: var(--fill-2); transition: transform var(--med) var(--ease), width var(--med) var(--ease), opacity var(--fast); opacity: 0; }
.nav-right { justify-self: end; display: flex; align-items: center; gap: 4px; }
.search-btn { display: flex; align-items: center; gap: 8px; height: 34px; padding: 0 8px 0 12px; border-radius: var(--r-pill); color: var(--label-3); background: var(--fill-3); transition: background var(--fast), color var(--fast); }
.search-btn:hover { color: var(--label-2); background: var(--fill-2); }
.search-btn svg { width: 15px; height: 15px; fill: currentColor; }
.search-btn span { font-size: 14px; margin-right: 22px; }
.icon-btn { width: 34px; height: 34px; display: grid; place-items: center; border-radius: 50%; color: var(--label-3); transition: background var(--fast), color var(--fast); }
.icon-btn:hover { background: var(--fill-3); color: var(--label); }
.icon-btn svg { width: 17px; height: 17px; fill: currentColor; }
.icon-btn .moon { display: none; }
:root[data-theme="light"] .icon-btn .sun { display: none; }
:root[data-theme="light"] .icon-btn .moon { display: block; }
@media (prefers-color-scheme: light) { :root:not([data-theme]) .icon-btn .sun { display: none; } :root:not([data-theme]) .icon-btn .moon { display: block; } }
.dock { display: none; }

/* ---------- Page scaffolding ---------- */
main { outline: none; padding: 0 20px 96px; }
.page { max-width: 680px; margin: 0 auto; padding-top: 28px; }
.page.wide { max-width: 1000px; }
.page.xl { max-width: 1040px; }
.layout { display: grid; grid-template-columns: minmax(0, 620px) 300px; justify-content: space-between; gap: 56px; align-items: start; }
.main-col { min-width: 0; }
.hero { padding: 20px 0 22px; }
.hero h1 { margin: 0 0 6px; font: 700 34px/1.1 var(--font-display); letter-spacing: -.035em; }
.hero p { margin: 0; max-width: 560px; font-size: 16px; color: var(--label-2); }
.eyebrow { display: inline-flex; align-items: center; gap: 7px; font-size: 13px; font-weight: 600; color: var(--label-3); margin-bottom: 10px; }
.grad { color: inherit; }
.section-h { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin: 30px 0 10px; }
.section-h h2 { margin: 0; font: 700 20px/1.2 var(--font-display); letter-spacing: -.025em; }
.section-h .s { font-size: 14px; color: var(--label-3); }
.section-h a.s { color: var(--accent); }
.link { color: var(--accent); font-weight: 500; font-size: 14px; }
.check { width: 15px; height: 15px; flex: none; fill: var(--accent); }

/* Live indicator */
.live-dot { display: inline-block; width: 6px; height: 6px; border-radius: 50%; background: var(--good); vertical-align: middle; animation: breathe 2.4s ease-in-out infinite; }

/* ---------- Stories (most credible) ---------- */
.stories { display: flex; gap: 14px; overflow-x: auto; scrollbar-width: none; padding: 2px 2px 16px; margin: 0 -2px; scroll-snap-type: x proximity; }
.stories::-webkit-scrollbar { display: none; }
.story { flex: none; width: 64px; display: flex; flex-direction: column; align-items: center; gap: 6px; scroll-snap-align: start; transition: transform var(--fast) var(--ease); }
.story:active { transform: scale(.94); }
.story span:last-child { font-size: 11.5px; color: var(--label-2); max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ---------- Avatars ---------- */
.av { position: relative; display: inline-grid; place-items: center; flex: none; border-radius: 50%; }
.av img, .av .ini { width: 100%; height: 100%; border-radius: 50%; object-fit: cover; background: var(--fill-2); }
.av .ini { display: grid; place-items: center; font-weight: 600; color: var(--label-2); }
.av.ring { padding: 2.5px; background: conic-gradient(var(--rc, var(--accent)) calc(var(--p, 0) * 1turn), var(--fill-2) 0); }
.av.ring > * { border: 2.5px solid var(--bg); }
.score { display: inline-flex; align-items: center; justify-content: center; min-width: 32px; height: 22px; padding: 0 7px; border-radius: 7px; font-size: 13px; font-weight: 600; font-variant-numeric: tabular-nums; background: var(--fill-3); color: var(--label-2); }
.score.hi { color: var(--good); background: var(--good-bg); }
.score.lo { color: var(--bad); background: var(--bad-bg); }

/* ---------- Feed header: tabs, filters ---------- */
/* Sticky under the nav, exactly as wide as the feed, opaque so nothing shows through. */
.feed-head { position: sticky; top: 57px; z-index: 20; background: var(--bg); border-bottom: 1px solid var(--sep); }
.tabs-gap { flex: 1; }
.tabs .chip { height: 26px; }
.topic { position: relative; }
.topic-btn { display: inline-flex; align-items: center; gap: 4px; height: 30px; padding: 0 10px 0 12px; border-radius: var(--r-pill); font-size: 13px; font-weight: 500; color: var(--label-2); background: var(--fill-3); transition: background var(--fast), color var(--fast); white-space: nowrap; }
.topic-btn:hover, .topic-btn.on { color: var(--label); background: var(--fill-2); }
.topic-btn svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.menu { position: absolute; right: 0; top: calc(100% + 6px); z-index: 30; min-width: 200px; padding: 6px; border-radius: 14px; background: var(--glass-strong); backdrop-filter: saturate(1.8) blur(24px); -webkit-backdrop-filter: saturate(1.8) blur(24px); box-shadow: var(--shadow-float); border: 1px solid var(--sep); animation: menu-in var(--med) var(--ease); transform-origin: top right; }
.menu button { display: flex; align-items: center; justify-content: space-between; width: 100%; height: 34px; padding: 0 10px; border-radius: 9px; font-size: 14px; color: var(--label); text-align: left; }
.menu button:hover { background: var(--fill-2); }
.menu button.on::after { content: "✓"; color: var(--accent); font-weight: 600; }
.menu hr { border: 0; height: 1px; background: var(--sep); margin: 5px 4px; }
.tabs { display: flex; align-items: center; gap: 22px; height: 48px; }
.tabs > button[role="tab"] { position: relative; height: 100%; font-size: 15px; font-weight: 600; color: var(--label-3); transition: color var(--fast); }
.tabs > button[role="tab"]:hover { color: var(--label-2); }
.tabs > button[role="tab"].on { color: var(--label); }
.tabs > button[role="tab"].on::after { content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 2px; border-radius: 2px; background: var(--label); animation: grow var(--med) var(--ease); }
.tabs-live { margin-left: auto; display: inline-flex; align-items: center; gap: 7px; font-size: 12.5px; color: var(--label-3); font-variant-numeric: tabular-nums; }
.chips { display: flex; align-items: center; gap: 6px; overflow-x: auto; scrollbar-width: none; padding: 0 0 10px; }
.chips::-webkit-scrollbar { display: none; }
.chip { flex: none; height: 28px; padding: 0 12px; border-radius: var(--r-pill); font-size: 13px; font-weight: 500; color: var(--label-2); background: var(--fill-3); transition: background var(--fast), color var(--fast); white-space: nowrap; }
.chip:hover { background: var(--fill-2); color: var(--label); }
.chip.on { background: var(--label); color: var(--bg); }
.chip.quiet:not(.on) { background: none; color: var(--label-3); }
.chips-gap { flex: 1; min-width: 8px; }

/* ---------- Posts ---------- */
.feed { display: flex; flex-direction: column; }
.post { position: relative; display: grid; grid-template-columns: 42px minmax(0, 1fr); gap: 12px; padding: 16px 0 14px; border-bottom: 1px solid var(--sep); animation: rise var(--slow) var(--ease) both; animation-delay: calc(var(--i, 0) * 30ms); }
.post.solo { border: 0; padding: 4px 0; animation: none; }
.post-av { position: relative; align-self: start; width: 42px; height: 42px; }
.cred-badge { position: absolute; right: -5px; bottom: -4px; min-width: 22px; height: 17px; padding: 0 4px; border-radius: 9px; display: grid; place-items: center; font-size: 10.5px; font-weight: 700; font-variant-numeric: tabular-nums; color: var(--label-2); background: var(--surface-2); box-shadow: 0 0 0 2px var(--bg); }
.cred-badge.hi { color: #fff; background: var(--good); }
.cred-badge.lo { color: #fff; background: var(--bad); }
.post-main { min-width: 0; }
.post-head { display: flex; align-items: center; gap: 5px; min-width: 0; height: 22px; }
.post-name { display: flex; align-items: center; gap: 3px; font-weight: 600; font-size: 15px; min-width: 0; flex: 0 1 auto; max-width: 70%; }
.post-name span { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.post-name:hover span { text-decoration: underline; text-underline-offset: 2px; }
.post-meta { flex: 0 100 auto; color: var(--label-3); font-size: 14.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.x-link { margin-left: auto; flex: none; width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; color: var(--label-3); opacity: 0; transition: opacity var(--fast), background var(--fast), color var(--fast); }
.post:hover .x-link, .x-link:focus-visible { opacity: 1; }
.x-link:hover { background: var(--fill-3); color: var(--label); }
.x-link svg { width: 14px; height: 14px; fill: currentColor; }
.post-text { margin-top: 2px; font-size: 15.5px; line-height: 1.45; white-space: pre-wrap; overflow-wrap: anywhere; }
.tk { color: var(--accent); }
a.tk:hover { text-decoration: underline; }
.post-media { display: block; width: fit-content; max-width: 100%; margin-top: 10px; border-radius: 16px; overflow: hidden; border: 1px solid var(--sep); background: var(--fill-3); }
.post-media:not(.ready) { width: 100%; min-height: 200px; }
.post-media img { display: block; width: auto; height: auto; max-width: 100%; max-height: 520px; object-fit: contain; opacity: 0; transition: opacity var(--med) var(--ease); }
.post-media.ready img { opacity: 1; }
.post-when { margin-top: 10px; font-size: 13.5px; color: var(--label-3); }

/* Calls: an inset grouped list, one line per call, the chart unfolds on tap */
.calls { margin-top: 10px; border-radius: var(--r-md); background: var(--fill-3); overflow: hidden; }
.v + .v .v-row::before { content: ""; position: absolute; top: 0; left: 30px; right: 0; height: 1px; background: var(--sep); }
.v-row { position: relative; width: 100%; display: grid; grid-template-columns: 8px minmax(0, 1fr) auto; align-items: center; gap: 12px; padding: 11px 14px 11px 12px; text-align: left; transition: background var(--fast) var(--ease); }
.v-row:hover { background: var(--fill-3); }
.v-row:active { background: var(--fill-2); }
.dot { width: 8px; height: 8px; border-radius: 50%; background: var(--label-3); }
.dot.live { background: var(--live); box-shadow: 0 0 0 0 color-mix(in srgb, var(--live) 50%, transparent); animation: ping 2.4s var(--ease) infinite; }
.dot.right { background: var(--good); }
.dot.wrong { background: var(--bad); }
.v-st { font-size: 14.5px; font-weight: 500; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.v-end { display: inline-flex; align-items: baseline; gap: 8px; white-space: nowrap; }
.v-sub { font-size: 12.5px; color: var(--label-3); font-variant-numeric: tabular-nums; }
.v-num { min-width: 40px; text-align: right; font-size: 14px; font-weight: 600; font-variant-numeric: tabular-nums; color: var(--label-2); border-radius: 6px; }
.v-num.up, .v-num.right { color: var(--good); }
.v-num.down, .v-num.wrong { color: var(--bad); }
.v-num.odds { color: var(--label); }
.v-num.tick, .r-num.tick { animation: tick 1.2s var(--ease); }
.v-detail { display: grid; grid-template-rows: 0fr; transition: grid-template-rows var(--med) var(--ease); }
.v.open .v-detail { grid-template-rows: 1fr; }
.v-inner { overflow: hidden; min-height: 0; padding: 0 14px 0 32px; opacity: 0; transition: opacity var(--med) var(--ease); }
.v.open .v-inner { opacity: 1; }
.v.open .v-row { background: transparent; }
.v-inner .lw { height: 190px; margin-top: 2px; }
.v-facts { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 6px 12px; margin: 8px 0 12px; font-size: 12.5px; color: var(--label-3); }
.v-facts a { display: inline-flex; align-items: center; gap: 1px; color: var(--accent); font-weight: 600; font-size: 13px; }
.v-facts a svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; transition: transform var(--fast) var(--ease); }
.v-facts a:hover svg { transform: translateX(2px); }

/* Prediction-market panel (inside an unfolded call or the sheet) */
.mkt { padding: 4px 0 2px; }
.mkt-q { font-size: 13px; color: var(--label-2); line-height: 1.35; }
.mkt-num { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; margin-top: 4px; }
.mkt-num b { font: 700 28px/1 var(--font-display); letter-spacing: -.03em; font-variant-numeric: tabular-nums; }
.mkt.big .mkt-num b { font-size: 40px; }
.mkt.related .mkt-num b { color: var(--label-2); }
.mkt-num span { font-size: 12.5px; color: var(--label-3); }
.mkt-num .up { color: var(--good); font-weight: 600; } .mkt-num .down { color: var(--bad); font-weight: 600; }
.mkt .lw { margin-top: 8px; }
.mkt-foot { display: flex; justify-content: space-between; gap: 10px; flex-wrap: wrap; margin-top: 6px; font-size: 12px; color: var(--label-3); }
.mkt-foot .live-dot { margin-right: 5px; width: 5px; height: 5px; }
.mkt-foot a { color: var(--accent); font-weight: 600; }
.mkt.big { margin: 0 0 16px; padding: 16px; border-radius: var(--r-lg); background: var(--fill-3); }
.mkt-loading { height: 64px; border-radius: var(--r-sm); background: linear-gradient(90deg, var(--fill-3) 0%, var(--fill-2) 50%, var(--fill-3) 100%); background-size: 200% 100%; animation: shimmer 1.4s linear infinite; }
.lw { width: 100%; height: 150px; }
.lw-odds { height: 150px; }
.lw-big { height: 320px; }
.lw-cred { height: 180px; margin-top: 10px; }
.lw a#tv-attr-logo { opacity: .35; transform: scale(.75); transform-origin: left bottom; }

/* ---------- Side rail: plain lists ---------- */
.rail { position: sticky; top: 80px; max-height: calc(100vh - 96px); overflow-y: auto; scrollbar-width: none; display: flex; flex-direction: column; gap: 28px; padding: 4px 0 24px; }
.rail::-webkit-scrollbar { display: none; }
.rail h4 { display: flex; align-items: center; gap: 8px; margin: 0 0 6px; font-size: 13px; font-weight: 600; color: var(--label-3); letter-spacing: 0; }
.rail h4 a { margin-left: auto; color: var(--accent); font-weight: 500; }
.r-row { display: flex; align-items: center; gap: 10px; padding: 7px 8px; margin: 0 -8px; border-radius: var(--r-sm); transition: background var(--fast); min-width: 0; }
.r-row:hover { background: var(--fill-3); }
.r-row-link { display: flex; align-items: center; gap: 10px; min-width: 0; flex: 1; }
.r-txt { display: flex; flex-direction: column; min-width: 0; flex: 1; }
.r-st { display: flex; align-items: center; gap: 3px; font-size: 13.5px; font-weight: 500; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.r-st > span { overflow: hidden; text-overflow: ellipsis; }
.r-st.two { white-space: normal; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; line-height: 1.3; }
.r-st .check { width: 13px; height: 13px; }
.r-sub { font-size: 12px; color: var(--label-3); overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.r-num { flex: none; font-size: 14px; font-weight: 600; font-variant-numeric: tabular-nums; color: var(--label); border-radius: 6px; }
.r-num.hi { color: var(--good); } .r-num.lo { color: var(--bad); }
.tickers { display: flex; flex-wrap: wrap; gap: 6px; }
.ticker { height: 28px; padding: 0 10px; border-radius: var(--r-pill); background: var(--fill-3); font-size: 13px; font-weight: 600; transition: background var(--fast); }
.ticker:hover { background: var(--fill-2); }
.ticker span { margin-left: 5px; font-weight: 400; color: var(--label-3); }
.ticker.on { background: var(--label); color: var(--bg); }
.ticker.on span { color: inherit; opacity: .6; }
.r-foot { font-size: 12px; color: var(--label-3); line-height: 1.6; }
.r-foot a:hover { color: var(--label-2); }
.suggest { margin-top: 12px; }
.suggest .r-row { margin: 0; padding: 10px 0; border-bottom: 1px solid var(--sep); border-radius: 0; }

/* ---------- Buttons ---------- */
.follow { height: 32px; padding: 0 16px; border-radius: var(--r-pill); font-size: 14px; font-weight: 600; color: var(--bg); background: var(--label); transition: transform var(--fast) var(--spring), opacity var(--fast), background var(--fast); white-space: nowrap; flex: none; }
.follow:hover { opacity: .88; }
.follow:active { transform: scale(.95); }
.follow.on { background: var(--fill-2); color: var(--label); }
.follow.sm { height: 28px; padding: 0 13px; font-size: 13px; }
.mini-seg { display: inline-flex; padding: 2px; border-radius: 9px; background: var(--fill-2); }
.mini-seg button { height: 28px; padding: 0 12px; border-radius: 7px; font-size: 13px; font-weight: 500; color: var(--label-2); transition: background var(--fast), color var(--fast); }
.mini-seg button.on { background: #636366; color: var(--label); box-shadow: 0 1px 3px rgba(0, 0, 0, .18); font-weight: 600; }
:root[data-theme="light"] .mini-seg button.on { background: #fff; }
@media (prefers-color-scheme: light) { :root:not([data-theme="dark"]) .mini-seg button.on { background: #fff; } }
.controls { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 14px 0; }
.pills { display: flex; gap: 6px; overflow-x: auto; scrollbar-width: none; flex: 1 1 auto; min-width: 0; }
.pills::-webkit-scrollbar { display: none; }
.pill-btn { flex: none; height: 28px; padding: 0 12px; border-radius: var(--r-pill); font-size: 13px; font-weight: 500; color: var(--label-2); background: var(--fill-3); transition: background var(--fast), color var(--fast); white-space: nowrap; }
.pill-btn:hover { background: var(--fill-2); color: var(--label); }
.pill-btn.on { background: var(--label); color: var(--bg); }
.switch { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; color: var(--label-2); }
.switch i { width: 38px; height: 23px; border-radius: 999px; background: var(--fill); position: relative; transition: background var(--med) var(--ease); }
.switch i::after { content: ""; position: absolute; top: 2px; left: 2px; width: 19px; height: 19px; border-radius: 50%; background: #fff; box-shadow: 0 2px 4px rgba(0, 0, 0, .25); transition: transform var(--med) var(--spring); }
.switch.on i { background: var(--good); }
.switch.on i::after { transform: translateX(15px); }

/* Status capsules (sheet, profile highlights, palette) */
.status { display: inline-flex; align-items: center; gap: 5px; height: 22px; padding: 0 9px; border-radius: var(--r-pill); font-size: 12px; font-weight: 600; background: var(--fill-3); color: var(--label-2); }
.status.right { background: var(--good-bg); color: var(--good); }
.status.wrong { background: var(--bad-bg); color: var(--bad); }
.status.live { background: var(--live-bg); color: var(--live); }
.status svg { width: 11px; height: 11px; fill: currentColor; }

/* ---------- Sheet ---------- */
.sheet-layer, .palette-layer { position: fixed; inset: 0; z-index: 60; }
.scrim { position: absolute; inset: 0; background: rgba(0, 0, 0, .4); opacity: 0; transition: opacity var(--med) var(--ease); }
.sheet { position: absolute; left: 50%; bottom: 0; width: min(760px, 100%); max-height: min(92vh, 1100px); transform: translate(-50%, 104%); transition: transform var(--slow) var(--ease); border-radius: 22px 22px 0 0; background: #1c1c1e; box-shadow: var(--shadow-float); display: flex; flex-direction: column; }
:root[data-theme="light"] .sheet { background: #fff; }
@media (prefers-color-scheme: light) { :root:not([data-theme="dark"]) .sheet { background: #fff; } }
.sheet-layer.open .scrim, .palette-layer.open .scrim { opacity: 1; }
.sheet-layer.open .sheet { transform: translate(-50%, 0); }
.grabber { width: 36px; height: 5px; border-radius: 3px; background: var(--fill); margin: 8px auto 0; flex: none; }
.sheet-close { position: absolute; top: 12px; right: 14px; width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; background: var(--fill-2); color: var(--label-2); transition: background var(--fast); z-index: 2; }
.sheet-close:hover { background: var(--fill); }
.sheet-close svg { width: 13px; height: 13px; fill: currentColor; }
/* Scrolls by wheel, trackpad, touch and keyboard, without a visible scrollbar. */
.sheet-body { overflow-y: auto; padding: 14px 24px 40px; overscroll-behavior: contain; scrollbar-width: none; outline: none; }
.sheet-body::-webkit-scrollbar { display: none; }
.sheet .post { border: 0; }
.sheet .av.ring > *, .sheet .cred-badge { border-color: #1c1c1e; }
.verdict-hero { padding: 10px 40px 14px 0; margin: 0 0 6px; }
.verdict-hero .big { font-size: 13px; font-weight: 600; color: var(--label-3); }
.verdict-hero.right .big { color: var(--good); } .verdict-hero.wrong .big { color: var(--bad); } .verdict-hero.live .big { color: var(--live); }
.verdict-hero h2 { margin: 8px 0 0; font: 700 26px/1.2 var(--font-display); letter-spacing: -.03em; }
.tag { flex: none; font-size: 12px; font-weight: 500; color: var(--label-3); }
.tiles { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin: 0 0 18px; }
.tile { padding: 11px 14px; border-radius: var(--r-md); background: var(--fill-3); }
.tile .l { font-size: 12px; color: var(--label-3); }
.tile .n { font: 600 18px/1.3 var(--font-display); letter-spacing: -.02em; font-variant-numeric: tabular-nums; margin-top: 2px; }
.tile .n small { font: 500 12px var(--font); color: var(--label-3); }
.prose { font-size: 15.5px; line-height: 1.55; margin: 0 0 16px; color: var(--label); }
.figure { margin: 0 0 16px; }
.figure .cap { font-size: 12.5px; color: var(--label-3); margin-top: 6px; }
.fig-tabs { margin-bottom: 10px; }
.fig-pane.tv { height: 420px; border-radius: var(--r-md); overflow: hidden; }
.evidence { font-size: 13px; color: var(--label-3); margin: 0 0 14px; }
.chips-links { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 18px; }
.chips-links a { font-size: 13px; font-weight: 500; padding: 6px 12px; border-radius: var(--r-pill); color: var(--accent); background: var(--fill-3); transition: background var(--fast); }
.chips-links a:hover { background: var(--fill-2); }
.newslist { margin: 0 0 18px; border-radius: var(--r-md); background: var(--fill-3); overflow: hidden; }
.newslist .l { font-size: 13px; font-weight: 600; color: var(--label-3); padding: 11px 14px 4px; }
.newslist a { display: block; padding: 10px 14px; font-size: 14.5px; position: relative; transition: background var(--fast); }
.newslist a + a::before { content: ""; position: absolute; top: 0; left: 14px; right: 0; height: 1px; background: var(--sep); }
.newslist a:hover { background: var(--fill-3); }
.newslist a span { display: block; font-size: 12.5px; color: var(--label-3); margin-top: 2px; }

/* ---------- Profile ---------- */
.p-hero { position: relative; border-radius: 24px; overflow: hidden; margin-top: 4px; background: var(--surface); }
.p-cover { position: absolute; inset: 0; background-size: cover; background-position: center; filter: blur(40px) saturate(1.4); transform: scale(1.3); opacity: .45; }
.p-cover.none { display: none; }
.p-hero::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, transparent, color-mix(in srgb, var(--surface) 85%, transparent) 70%); }
.p-inner { position: relative; z-index: 1; display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 24px; align-items: center; padding: 30px 30px 28px; }
.p-id { display: flex; gap: 18px; align-items: center; min-width: 0; }
.p-id .av.ring > * { border-color: var(--surface); }
.p-id h1 { margin: 0; font: 700 28px/1.1 var(--font-display); letter-spacing: -.03em; display: flex; align-items: center; gap: 6px; }
.p-id h1 .check { width: 20px; height: 20px; }
.p-id .hd { color: var(--label-2); font-size: 15px; margin-top: 3px; }
.p-bio { margin: 12px 0 0; max-width: 520px; color: var(--label-2); font-size: 14.5px; overflow-wrap: anywhere; }
.p-actions { display: flex; align-items: center; gap: 12px; margin-top: 14px; flex-wrap: wrap; }
.p-facts { font-size: 13.5px; color: var(--label-2); }
.p-facts b { color: var(--label); font-weight: 600; }
.big-ring { position: relative; width: 150px; height: 150px; flex: none; }
.big-ring svg { width: 100%; height: 100%; transform: rotate(-90deg); }
.big-ring .arc { transition: stroke-dasharray 1.2s var(--ease); }
.big-ring .v { position: absolute; inset: 0; display: grid; place-content: center; text-align: center; }
.big-ring .v b { font: 700 44px/1 var(--font-display); letter-spacing: -.04em; font-variant-numeric: tabular-nums; }
.big-ring .v span { font-size: 12px; font-weight: 600; color: var(--label-3); margin-top: 4px; }
.big-ring .verdict { position: absolute; left: 50%; bottom: -10px; transform: translateX(-50%); white-space: nowrap; font-size: 12px; font-weight: 600; padding: 4px 10px; border-radius: var(--r-pill); background: var(--surface-2); color: var(--label-2); }
.big-ring .verdict.good { color: var(--good); } .big-ring .verdict.bad { color: var(--bad); }
.stat-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; margin-top: 16px; }
.stat-grid .tile { padding: 14px 16px; }
.stat-grid .tile .n { font-size: 22px; }
.panel { padding: 0; }
.panel h3 { margin: 0 0 2px; font-size: 13px; font-weight: 600; color: var(--label-3); }
.panel .s { font-size: 12.5px; color: var(--label-3); }
.layout.profile { margin-top: 10px; }
.strip { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 10px; }
.strip i { width: 11px; height: 11px; border-radius: 3px; background: var(--fill); animation: pop var(--med) var(--spring) both; animation-delay: calc(var(--i, 0) * 8ms); cursor: pointer; transition: transform var(--fast); }
.strip i.right { background: var(--good); }
.strip i.wrong { background: var(--bad); }
.strip i:hover { transform: scale(1.4); }
.legend-row { display: flex; gap: 14px; margin-top: 10px; font-size: 12px; color: var(--label-3); }
.legend-row span::before { content: ""; display: inline-block; width: 8px; height: 8px; border-radius: 2px; margin-right: 6px; background: var(--good); }
.legend-row span.w::before { background: var(--bad); }
.hl-row { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(230px, 1fr); gap: 10px; overflow-x: auto; scrollbar-width: none; padding-bottom: 4px; scroll-snap-type: x mandatory; }
.hl-row::-webkit-scrollbar { display: none; }
.hl { scroll-snap-align: start; border-radius: var(--r-md); padding: 14px; background: var(--fill-3); display: flex; flex-direction: column; gap: 8px; transition: background var(--fast); }
.hl:hover { background: var(--fill-2); }
.hl .st { font-weight: 600; font-size: 14.5px; line-height: 1.3; }
.hl .ft { display: flex; justify-content: space-between; font-size: 12px; color: var(--label-3); margin-top: auto; }

/* ---------- Leaders ---------- */
.podium { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; align-items: end; margin: 10px 0 24px; }
.pod { border-radius: var(--r-lg); padding: 20px 12px 18px; text-align: center; background: var(--fill-3); display: flex; flex-direction: column; align-items: center; gap: 4px; transition: background var(--fast); position: relative; animation: rise var(--slow) var(--ease) both; }
.pod:hover { background: var(--fill-2); }
.pod.first { padding-top: 30px; padding-bottom: 24px; }
.pod .place { position: absolute; top: 12px; left: 14px; font-size: 12px; font-weight: 700; color: var(--label-3); }
.pod .nm { font-weight: 600; font-size: 15px; display: flex; align-items: center; gap: 3px; max-width: 100%; margin-top: 6px; }
.pod .nm span { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.pod .hd { font-size: 12.5px; color: var(--label-3); }
.pod .big { font: 700 36px/1 var(--font-display); letter-spacing: -.04em; margin-top: 8px; font-variant-numeric: tabular-nums; }
.pod .rec { font-size: 12.5px; color: var(--label-2); }
.rows { border-top: 1px solid var(--sep); }
.row-item { display: grid; grid-template-columns: 26px 40px minmax(0, 1fr) auto auto; gap: 12px; align-items: center; padding: 10px 6px; border-bottom: 1px solid var(--sep); transition: background var(--fast); animation: rise var(--slow) var(--ease) both; animation-delay: calc(var(--i, 0) * 20ms); }
.row-item:hover { background: var(--fill-3); }
.row-item .rk { text-align: right; color: var(--label-3); font-weight: 600; font-size: 13px; font-variant-numeric: tabular-nums; }
.row-item .who { min-width: 0; }
.row-item .nm { font-weight: 600; display: flex; align-items: center; gap: 3px; min-width: 0; }
.row-item .nm span { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.row-item .rec { font-size: 12.5px; color: var(--label-3); overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.row-item .score { min-width: 40px; height: 28px; font-size: 15px; }

/* ---------- Palette ---------- */
.palette { position: absolute; top: 12vh; left: 50%; width: min(600px, calc(100% - 28px)); transform: translate(-50%, -6px) scale(.98); opacity: 0; transition: transform var(--med) var(--ease), opacity var(--med) var(--ease); border-radius: 18px; overflow: hidden; box-shadow: var(--shadow-float); background: var(--glass-strong); }
.palette-layer.open .palette { transform: translate(-50%, 0) scale(1); opacity: 1; }
.palette-input { display: flex; align-items: center; gap: 10px; padding: 14px 16px; border-bottom: 1px solid var(--sep); }
.palette-input svg { width: 18px; height: 18px; fill: var(--label-3); flex: none; }
.palette-input input { flex: 1; min-width: 0; border: 0; outline: none; background: transparent; color: var(--label); font: 400 17px var(--font); }
.palette-results { max-height: 56vh; overflow-y: auto; padding: 6px; }
.palette-results .grp { font-size: 12px; font-weight: 600; color: var(--label-3); padding: 10px 10px 4px; }
.res { display: flex; align-items: center; gap: 12px; padding: 8px 10px; border-radius: 10px; }
.res.on, .res:hover { background: var(--fill-2); }
.res .who { flex: 1; min-width: 0; }
.res .nm { font-weight: 500; display: flex; align-items: center; gap: 3px; }
.res .nm span { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.res .hd { font-size: 12.5px; color: var(--label-3); overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }

/* ---------- States ---------- */
.empty { text-align: center; padding: 48px 20px; color: var(--label-2); }
.empty b { display: block; color: var(--label); font-size: 17px; margin-bottom: 4px; }
.skeleton { height: 120px; border-radius: var(--r-md); background: linear-gradient(90deg, var(--fill-3) 0%, var(--fill-2) 50%, var(--fill-3) 100%); background-size: 200% 100%; animation: shimmer 1.4s linear infinite; }
.sentinel { height: 1px; }
.about-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28px 40px; margin-top: 10px; }
.about-grid .panel h3 { font-size: 16px; color: var(--label); margin-bottom: 6px; }
.about-grid .panel p { margin: 0; color: var(--label-2); line-height: 1.6; font-size: 14.5px; }
.foot { text-align: center; font-size: 12.5px; color: var(--label-3); margin-top: 36px; }

/* ---------- Unfolded call: numbers on top, a quiet chart, links ---------- */
.cx { padding: 2px 0 0; }
.cx-q { font-size: 13px; color: var(--label-2); line-height: 1.35; margin-bottom: 8px; }
.cx-tag { display: inline-block; font-size: 11px; font-weight: 600; color: var(--label-3); padding: 1px 6px; border-radius: 5px; background: var(--fill-2); margin-left: 4px; vertical-align: 1px; }
.cx-stats { display: flex; flex-wrap: wrap; gap: 6px 26px; }
.cx-stat { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.cx-stat span { font-size: 11.5px; color: var(--label-3); }
.cx-stat b { font: 600 16px/1.25 var(--font-display); letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.cx-stat b a { color: var(--accent); font-weight: 600; }
.cx-stat em { font-style: normal; font-size: 13px; font-weight: 600; margin-left: 2px; }
.cx-stat .up, .cx-stat b.right { color: var(--good); }
.cx-stat .down, .cx-stat b.wrong { color: var(--bad); }
.cx-chart { position: relative; height: 112px; margin: 12px 0 2px; }
.cx-chart svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.cx-target { position: absolute; left: 0; right: 0; height: 0; border-top: 1px dashed var(--label-3); }
.cx-call, .cx-now { position: absolute; width: 9px; height: 9px; margin: -4.5px 0 0 -4.5px; border-radius: 50%; }
.cx-call { background: var(--bg); box-shadow: 0 0 0 2px var(--label-2); }
.cx-now { background: var(--c); animation: now-pulse 2.4s var(--ease) infinite; }
.cx-foot { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 6px 12px; margin: 10px 0 12px; font-size: 12.5px; color: var(--label-3); }
.cx-links { display: inline-flex; gap: 16px; }
.cx-links a { display: inline-flex; align-items: center; gap: 1px; color: var(--accent); font-weight: 600; font-size: 13px; }
.cx-links svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; transition: transform var(--fast) var(--ease); }
.cx-links a:hover svg { transform: translateX(2px); }

/* ---------- Social: action row, reactions, top comment, discussion ---------- */
.acts { position: relative; display: flex; align-items: center; gap: 2px; margin: 8px 0 0 -8px; }
.act { display: inline-flex; align-items: center; gap: 5px; height: 32px; padding: 0 8px; border-radius: var(--r-pill); color: var(--label-3); font-size: 13px; font-variant-numeric: tabular-nums; transition: color var(--fast), background var(--fast); }
.act svg { width: 18px; height: 18px; fill: currentColor; }
.act:hover { color: var(--label); background: var(--fill-3); }
.act.like:hover, .act.like.on { color: #ff375f; }
.act[data-act="save"].on { color: var(--accent); }
.act.pop svg { animation: heart-pop 420ms var(--spring); }
.acts-gap { flex: 1; }
.reacts { display: inline-flex; gap: 4px; }
.rx { display: inline-flex; align-items: center; gap: 3px; height: 26px; padding: 0 8px 0 6px; border-radius: var(--r-pill); font-size: 13.5px; background: var(--fill-3); transition: background var(--fast), transform var(--fast) var(--spring); }
.rx span { font-size: 12px; font-weight: 600; color: var(--label-2); font-variant-numeric: tabular-nums; }
.rx:hover { background: var(--fill-2); }
.rx:active { transform: scale(.92); }
.rx.on { background: color-mix(in srgb, var(--accent) 18%, transparent); }
.rx.on span { color: var(--accent); }
.picker { position: absolute; left: 60px; bottom: calc(100% + 4px); z-index: 25; display: flex; gap: 2px; padding: 5px; border-radius: var(--r-pill); background: var(--glass-strong); backdrop-filter: saturate(1.8) blur(24px); -webkit-backdrop-filter: saturate(1.8) blur(24px); box-shadow: var(--shadow-float); border: 1px solid var(--sep); animation: menu-in var(--med) var(--spring); transform-origin: bottom left; }
.picker button { position: relative; width: 38px; height: 38px; border-radius: 50%; font-size: 22px; display: grid; place-items: center; transition: transform var(--fast) var(--spring), background var(--fast); }
.picker button:hover { transform: scale(1.22) translateY(-2px); background: var(--fill-2); }
.picker button.on { background: color-mix(in srgb, var(--accent) 20%, transparent); }
.picker button span { position: absolute; bottom: calc(100% + 6px); left: 50%; transform: translateX(-50%); font-size: 11px; font-weight: 600; white-space: nowrap; padding: 3px 7px; border-radius: 6px; background: var(--label); color: var(--bg); opacity: 0; pointer-events: none; transition: opacity var(--fast); }
.picker button:hover span { opacity: 1; }
.top-comment { display: block; margin-top: 4px; font-size: 13.5px; color: var(--label-2); overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.top-comment b { color: var(--label); font-weight: 600; }
.top-comment span { margin-left: 8px; color: var(--label-3); }
.top-comment:hover span { color: var(--accent); }
.discussion { margin-top: 26px; }
.discussion .section-h { margin-top: 0; }
.discussion .count { font-size: 15px; color: var(--label-3); font-weight: 500; margin-left: 4px; }
.discussion .acts { margin: 0 0 12px -8px; }
.composer { display: grid; grid-template-columns: 32px minmax(0, 1fr) auto; gap: 10px; align-items: start; padding: 12px 0; border-top: 1px solid var(--sep); border-bottom: 1px solid var(--sep); }
.cmp-fields { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.composer input, .composer textarea { width: 100%; border: 0; outline: none; resize: none; background: transparent; color: var(--label); font: 15px/1.45 var(--font); padding: 6px 0; }
.composer input { font-weight: 600; border-bottom: 1px solid var(--sep); }
.composer textarea::placeholder, .composer input::placeholder { color: var(--label-3); }
.send { height: 32px; padding: 0 16px; border-radius: var(--r-pill); font-size: 14px; font-weight: 600; color: #fff; background: var(--accent); transition: opacity var(--fast), transform var(--fast) var(--spring); }
.send:disabled { opacity: .35; cursor: default; }
.send:not(:disabled):active { transform: scale(.95); }
.me-av { width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center; font-size: 14px; font-weight: 600; color: #fff; background: hsl(var(--h) 55% 48%); flex: none; }
.comments { display: flex; flex-direction: column; }
.cmt { display: grid; grid-template-columns: 32px minmax(0, 1fr); gap: 10px; padding: 12px 0; border-bottom: 1px solid var(--sep); }
.cmt.fresh { animation: rise var(--slow) var(--ease); }
.cmt-head { display: flex; align-items: baseline; gap: 8px; font-size: 14px; }
.cmt-head b { font-weight: 600; }
.cmt-head time { font-size: 12.5px; color: var(--label-3); }
.cmt-text { font-size: 15px; line-height: 1.45; white-space: pre-wrap; overflow-wrap: anywhere; margin-top: 1px; }
.cmt-acts { display: flex; gap: 14px; margin-top: 4px; }
.cmt-acts button { display: inline-flex; align-items: center; gap: 4px; font-size: 12.5px; color: var(--label-3); transition: color var(--fast); }
.cmt-acts button:hover { color: var(--label); }
.cmt-acts button.on { color: #ff375f; }
.cmt-acts svg { width: 15px; height: 15px; fill: currentColor; }
.cmt-empty { padding: 20px 0; font-size: 14px; color: var(--label-3); text-align: center; }
.toast { position: fixed; left: 50%; bottom: 32px; z-index: 80; transform: translate(-50%, 20px); opacity: 0; padding: 10px 16px; border-radius: var(--r-pill); font-size: 14px; font-weight: 500; color: var(--bg); background: var(--label); box-shadow: var(--shadow-float); transition: opacity var(--med) var(--ease), transform var(--med) var(--spring); pointer-events: none; }
.toast.show { opacity: 1; transform: translate(-50%, 0); }

/* ---------- Calls on a post: written in like metadata, no box ---------- */
.post[data-claim] { cursor: pointer; transition: background var(--med) var(--ease); }
.calltags { display: flex; flex-wrap: wrap; gap: 4px 22px; margin-top: 10px; }
.calltags.stacked { flex-direction: column; gap: 2px; }
.calltag { display: inline-flex; align-items: center; gap: 7px; max-width: 100%; min-width: 0; padding: 3px 0; font-size: 14px; line-height: 1.3; color: var(--label); transition: opacity var(--fast); }
.calltag:hover .ct-st { text-decoration: underline; text-decoration-color: var(--label-3); text-underline-offset: 3px; }
.calltags.stacked .calltag { padding: 7px 0; }
.ct-ic { width: 15px; height: 15px; flex: none; }
.calltag.live .ct-ic { color: var(--live); }
.calltag.live .ct-ic .core { transform-origin: 8px 8px; animation: core 2.4s var(--ease) infinite; }
.calltag.right .ct-ic { color: var(--good); }
.calltag.wrong .ct-ic { color: var(--bad); }
.calltag.other .ct-ic { color: var(--label-3); }
.ct-st { font-weight: 600; letter-spacing: -.012em; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; min-width: 0; }
.ct-m { display: inline-flex; align-items: baseline; gap: 6px; flex: none; font-variant-numeric: tabular-nums; }
.ct-m .v-sub { font-size: 13px; color: var(--label-3); }
.ct-m .v-num { min-width: 0; text-align: left; font-size: 13px; font-weight: 600; }
.ct-m .v-num.odds { color: var(--label-2); }
@keyframes core { 0%, 100% { transform: scale(1); opacity: 1; } 50% { transform: scale(.55); opacity: .55; } }

/* ---------- Analysis page (the call's sheet) ---------- */
.an-head { display: flex; align-items: center; gap: 12px; padding: 6px 44px 0 0; }
.an-head .post-av { width: 44px; height: 44px; }
.an-head-txt { display: flex; flex-direction: column; min-width: 0; flex: 1; }
.an-head .post-name { max-width: 100%; }
.an-text { margin-top: 10px; font-size: 16px; }
.an-switch { margin-top: 18px; max-width: 100%; overflow-x: auto; scrollbar-width: none; }
.an-switch::-webkit-scrollbar { display: none; }
.an-switch button { white-space: nowrap; }
.an-verdict { margin: 18px 0 14px; padding: 18px; border-radius: var(--r-lg); background: var(--fill-3); }
.an-verdict.right { background: linear-gradient(135deg, var(--good-bg), transparent 75%), var(--fill-3); }
.an-verdict.wrong { background: linear-gradient(135deg, var(--bad-bg), transparent 75%), var(--fill-3); }
.an-verdict.live { background: linear-gradient(135deg, var(--live-bg), transparent 75%), var(--fill-3); }
.an-status { display: inline-flex; align-items: center; gap: 7px; font-size: 13px; font-weight: 600; color: var(--label-2); }
.an-verdict.right .an-status { color: var(--good); } .an-verdict.wrong .an-status { color: var(--bad); } .an-verdict.live .an-status { color: var(--live); }
.an-verdict h2 { margin: 8px 0 6px; font: 700 24px/1.2 var(--font-display); letter-spacing: -.03em; }
.an-kind { font-size: 13px; color: var(--label-3); }
.an-stats { display: flex; flex-wrap: wrap; gap: 8px 30px; margin: 0 0 14px; padding: 0 2px; }
.an-stats .cx-stat b { font-size: 19px; }
.an-sec { margin: 26px 0 0; }
.an-sec h3 { display: flex; align-items: baseline; gap: 8px; margin: 0 0 10px; font: 700 18px/1.25 var(--font-display); letter-spacing: -.02em; }
.an-sec h3 a { margin-left: auto; font: 500 14px var(--font); color: var(--accent); }
.an-who { display: flex; align-items: center; gap: 14px; padding: 12px 14px; border-radius: var(--r-md); background: var(--fill-3); transition: background var(--fast); }
.an-who:hover { background: var(--fill-2); }
.an-who .av.ring > * { border-color: #1c1c1e; }
:root[data-theme="light"] .an-who .av.ring > * { border-color: #fff; }
.an-who-txt { display: flex; align-items: baseline; gap: 10px; flex: 1; }
.an-who-txt b { font: 700 30px/1 var(--font-display); letter-spacing: -.04em; font-variant-numeric: tabular-nums; }
.an-who-txt span { font-size: 14px; font-weight: 600; color: var(--label-2); }
.an-who-txt .good { color: var(--good); } .an-who-txt .bad { color: var(--bad); }
.an-who-more { display: inline-flex; align-items: center; font-size: 13px; color: var(--accent); font-weight: 600; }
.an-who-more svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.an-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; margin: 14px 2px 0; }
.an-grid .cx-stat b em { font-style: normal; font-size: 13px; color: var(--label-3); font-weight: 500; margin-left: 4px; }
.an-last { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 2px 12px; align-items: center; margin-top: 14px; padding: 12px 14px; border-radius: var(--r-md); box-shadow: inset 0 0 0 1px var(--sep); transition: background var(--fast); }
.an-last:hover { background: var(--fill-3); }
.an-last-l { grid-column: 1 / -1; font-size: 12px; color: var(--label-3); }
.an-last-st { display: flex; align-items: center; gap: 8px; font-weight: 500; font-size: 14.5px; min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.an-last-st .dot { flex: none; }
.sheet .calltags { margin-top: 0; }

/* ---------- Profile: highlights panel in the rail ---------- */
.layout.profile .feed-head { margin-top: 6px; }
.hl-tabs { display: flex; width: 100%; margin-bottom: 10px; }
.hl-tabs button { flex: 1; padding: 0 6px; font-size: 12.5px; white-space: nowrap; }
.hl-list .s { margin-bottom: 4px; }
.hl-list .calltag { font-size: 13.5px; }
.hl-list .ct-st { font-weight: 500; }

/* ---------- Analysis page: an iOS detail screen ---------- */
.sheet .an-head { padding: 4px 44px 0 0; gap: 10px; }
.sheet .an-head .post-av { width: 36px; height: 36px; }
.sheet .an-head .post-name { font-size: 15px; }
.sheet .an-head .post-meta { font-size: 13px; }
.sheet .an-switch { margin-top: 16px; }
.an-title { margin: 20px 0 0; }
.an-title .an-status { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 600; color: var(--label-2); }
.an-title .an-status i { font-style: normal; color: var(--label-3); margin: 0 1px; }
.an-title .ct-ic { width: 14px; height: 14px; }
.an-title.live .an-status { color: var(--live); } .an-title.right .an-status { color: var(--good); } .an-title.wrong .an-status { color: var(--bad); }
.an-title.live .ct-ic .core { transform-origin: 8px 8px; animation: core 2.4s var(--ease) infinite; }
.an-title h2 { margin: 6px 0 4px; font: 700 30px/1.12 var(--font-display); letter-spacing: -.035em; }
.an-title .an-kind { font-size: 13.5px; color: var(--label-3); }
.an-summary { margin: 16px 0 0; padding: 0 14px; position: relative; }
.an-summary p { margin: 0; font-size: 15.5px; line-height: 1.55; color: var(--label-2); }
.an-summary.clamp p { display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden; }
.an-more { margin-top: 4px; font-size: 14px; font-weight: 600; color: var(--accent); }

.ios-sec { margin-top: 24px; }
.ios-h { margin: 0 0 7px 14px; font-size: 13px; font-weight: 600; color: var(--label-3); letter-spacing: 0; }
.ios-group { border-radius: 12px; background: var(--fill-3); overflow: hidden; }
.ios-foot { margin: 7px 14px 0; font-size: 12.5px; color: var(--label-3); line-height: 1.45; }
.ios-row { position: relative; display: flex; align-items: center; gap: 12px; width: 100%; min-height: 46px; padding: 10px 14px; text-align: left; font-size: 15px; transition: background var(--fast); }
.ios-row + .ios-row::before, .ios-fold-wrap + .ios-row::before, .ios-row + .ios-fold-wrap::before { content: ""; position: absolute; top: 0; left: 14px; right: 0; height: 1px; background: var(--sep); }
a.ios-row:hover, button.ios-row:hover { background: var(--fill-3); }
a.ios-row:active, button.ios-row:active { background: var(--fill-2); }
.ios-l { flex: none; max-width: 60%; color: var(--label); }
.ios-v { flex: 1; min-width: 0; text-align: right; color: var(--label-2); font-variant-numeric: tabular-nums; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ios-v b { font-weight: 600; color: var(--label); }
.ios-v em { font-style: normal; color: var(--label-3); margin-left: 4px; font-size: 14px; }
.ios-v .up, .ios-v em.up { color: var(--good); }
.ios-v .down, .ios-v em.down { color: var(--bad); }
.ios-q { color: var(--label-2); }
.ios-chev { width: 15px; height: 15px; flex: none; fill: none; stroke: var(--label-3); stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; transition: transform var(--med) var(--ease); }
.ios-ext { flex: none; color: var(--label-3); font-size: 13px; }
.ios-who { display: inline-flex; align-items: center; gap: 10px; }
.ios-who .av.ring > * { border-color: #1c1c1e; }
:root[data-theme="light"] .ios-who .av.ring > * { border-color: #f4f4f6; }
.ios-news { display: flex; flex-direction: column; white-space: normal; line-height: 1.35; }
.ios-news small { font-size: 12.5px; color: var(--label-3); margin-top: 2px; }
.ios-row:has(.ios-news) .ios-l { max-width: none; flex: 1; }
.ios-row:has(.ios-news) .ios-v { display: none; }
.ios-loading { display: inline-block; width: 60px; height: 12px; border-radius: 6px; background: linear-gradient(90deg, var(--fill-3) 0%, var(--fill-2) 50%, var(--fill-3) 100%); background-size: 200% 100%; animation: shimmer 1.4s linear infinite; vertical-align: middle; }
.ios-fold-wrap { position: relative; }
.ios-fold { display: grid; grid-template-rows: 0fr; transition: grid-template-rows var(--med) var(--ease); }
.ios-fold-wrap.open .ios-fold { grid-template-rows: 1fr; }
.ios-fold-inner { overflow: hidden; min-height: 0; padding: 0 12px; opacity: 0; transition: opacity var(--med) var(--ease); }
.ios-fold-wrap.open .ios-fold-inner { opacity: 1; padding-bottom: 12px; }
.ios-fold-wrap.open .ios-chev.down { transform: rotate(180deg); }
.ios-fold-inner .figure { margin: 0; }
.ios-fold-inner .fig-tabs { margin: 2px 0 10px; }
.ios-fold-inner .lw-big { height: 280px; }
.ios-post { padding: 12px 14px; }
.ios-post .post-text { font-size: 15px; }
.ios-post .post-media { margin-top: 10px; }
.ios-pad { padding: 4px 14px; }

/* ---------- Analysis sheet: near-black canvas, light tints, a living hero ---------- */
.sheet { background: #050506; box-shadow: 0 -1px 0 rgba(255, 255, 255, .09), 0 -40px 120px -30px rgba(0, 0, 0, .9); }
:root[data-theme="light"] .sheet { background: #fff; box-shadow: 0 -1px 0 rgba(0, 0, 0, .06), 0 -30px 80px -30px rgba(0, 0, 0, .25); }
@media (prefers-color-scheme: light) { :root:not([data-theme="dark"]) .sheet { background: #fff; box-shadow: 0 -1px 0 rgba(0, 0, 0, .06), 0 -30px 80px -30px rgba(0, 0, 0, .25); } }
.sheet-layer .scrim { background: rgba(0, 0, 0, .55); backdrop-filter: blur(14px) saturate(1.2); -webkit-backdrop-filter: blur(14px) saturate(1.2); }
.sheet .grabber { background: rgba(255, 255, 255, .18); }
.sheet .ios-group { background: rgba(255, 255, 255, .045); border-radius: 14px; }
.sheet .ios-row + .ios-row::before, .sheet .ios-fold-wrap + .ios-row::before, .sheet .ios-row + .ios-fold-wrap::before { background: rgba(255, 255, 255, .07); }
.sheet .sheet-close { background: rgba(255, 255, 255, .08); }
.sheet .av.ring > *, .sheet .cred-badge { border-color: #050506; }
.sheet .cred-badge { box-shadow: 0 0 0 2px #050506; }
.sheet .ios-who .av.ring > * { border-color: #0f0f10; }
.sheet .mini-seg { background: rgba(255, 255, 255, .07); }
.sheet .mini-seg button.on { background: rgba(255, 255, 255, .16); box-shadow: none; }
:root[data-theme="light"] .sheet .ios-group { background: #f4f4f6; }
:root[data-theme="light"] .sheet .ios-row + .ios-row::before, :root[data-theme="light"] .sheet .ios-fold-wrap + .ios-row::before, :root[data-theme="light"] .sheet .ios-row + .ios-fold-wrap::before { background: rgba(60, 60, 67, .1); }
:root[data-theme="light"] .sheet .grabber, :root[data-theme="light"] .sheet .sheet-close, :root[data-theme="light"] .sheet .mini-seg { background: rgba(120, 120, 128, .14); }
:root[data-theme="light"] .sheet .mini-seg button.on { background: #fff; box-shadow: 0 1px 3px rgba(0, 0, 0, .12); }
:root[data-theme="light"] .sheet .av.ring > *, :root[data-theme="light"] .sheet .cred-badge { border-color: #fff; }
:root[data-theme="light"] .sheet .cred-badge { box-shadow: 0 0 0 2px #fff; }
@media (prefers-color-scheme: light) {
  :root:not([data-theme="dark"]) .sheet .ios-group { background: #f4f4f6; }
  :root:not([data-theme="dark"]) .sheet .grabber, :root:not([data-theme="dark"]) .sheet .sheet-close, :root:not([data-theme="dark"]) .sheet .mini-seg { background: rgba(120, 120, 128, .14); }
  :root:not([data-theme="dark"]) .sheet .av.ring > *, :root:not([data-theme="dark"]) .sheet .cred-badge { border-color: #fff; }
  :root:not([data-theme="dark"]) .sheet .mini-seg button.on { background: #fff; box-shadow: 0 1px 3px rgba(0, 0, 0, .12); }
  :root:not([data-theme="dark"]) .an-track { background: rgba(0, 0, 0, .08); }
  :root:not([data-theme="dark"]) .sheet .ios-row + .ios-row::before, :root:not([data-theme="dark"]) .sheet .ios-fold-wrap + .ios-row::before, :root:not([data-theme="dark"]) .sheet .ios-row + .ios-fold-wrap::before { background: rgba(60, 60, 67, .1); }
}

/* The hero: status, title, headline figure and timeline over a faint, living price line */
.an-hero { position: relative; margin: 14px -24px 0; padding: 8px 24px 6px; overflow: hidden; isolation: isolate; }
.an-ambient { position: absolute; left: 0; right: 0; bottom: 34px; height: 150px; z-index: -1; opacity: .5; pointer-events: none; -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 28%, #000 100%), linear-gradient(180deg, #000 55%, transparent); mask-image: linear-gradient(90deg, transparent 0%, #000 28%, #000 100%); }
.an-ambient .cx-chart { height: 100%; margin: 0; }
.an-ambient .cx-call, .an-ambient .cx-target { display: none; }
.an-hero .an-title { margin: 10px 0 0; }
.an-hero .an-title h2 { font-size: 34px; letter-spacing: -.04em; max-width: 92%; }
.an-metric { display: flex; align-items: baseline; flex-wrap: wrap; gap: 4px 10px; margin-top: 18px; }
.an-metric b { font: 600 34px/1 var(--font-display); letter-spacing: -.035em; font-variant-numeric: tabular-nums; }
.an-metric em { font-style: normal; font-size: 17px; font-weight: 600; font-variant-numeric: tabular-nums; }
.an-metric em.up { color: var(--good); } .an-metric em.down { color: var(--bad); }
.an-metric span { font-size: 14px; color: var(--label-3); }
.an-time { margin: 18px 0 4px; }
.an-track { position: relative; height: 3px; border-radius: 2px; background: rgba(255, 255, 255, .1); }
:root[data-theme="light"] .an-track { background: rgba(0, 0, 0, .08); }
.an-track span { position: absolute; left: 0; top: 0; bottom: 0; width: calc(var(--f) * 100%); border-radius: 2px; background: var(--label-2); transform-origin: left; animation: grow 1s var(--ease) both .2s; }
.an-time.live .an-track span { background: linear-gradient(90deg, color-mix(in srgb, var(--live) 40%, transparent), var(--live)); }
.an-time.right .an-track span { background: var(--good); } .an-time.wrong .an-track span { background: var(--bad); }
.an-track i { position: absolute; top: 50%; width: 9px; height: 9px; margin: -4.5px 0 0 -4.5px; border-radius: 50%; background: var(--live); --c: var(--live); animation: now-pulse 2.4s var(--ease) infinite; }
.an-time-l { display: flex; justify-content: space-between; margin-top: 8px; font-size: 12px; color: var(--label-3); font-variant-numeric: tabular-nums; }
.an-time-l span:nth-child(2) { color: var(--label-2); font-weight: 600; }
.an-time.live .an-time-l span:nth-child(2) { color: var(--live); }

/* Sections arrive one after another when the sheet opens */
.sheet-layer.open .sheet-body > * { animation: rise var(--slow) var(--ease) both; }
.sheet-layer.open .sheet-body > :nth-child(2) { animation-delay: 40ms; }
.sheet-layer.open .sheet-body > :nth-child(3) { animation-delay: 80ms; }
.sheet-layer.open .sheet-body > :nth-child(4) { animation-delay: 120ms; }
.sheet-layer.open .sheet-body > :nth-child(5) { animation-delay: 160ms; }
.sheet-layer.open .sheet-body > :nth-child(6) { animation-delay: 200ms; }
.sheet-layer.open .sheet-body > :nth-child(7) { animation-delay: 240ms; }
.sheet-layer.open .sheet-body > :nth-child(n+8) { animation-delay: 280ms; }
.sheet .an-summary { margin-top: 18px; }
.sheet .an-summary p { font-size: 16px; color: var(--label-2); }
.sheet .ios-sec { margin-top: 28px; }

@media (max-width: 720px) {
  .an-hero { margin: 10px -18px 0; padding: 6px 18px 4px; }
  .an-hero .an-title h2 { font-size: 27px; max-width: 100%; }
  .an-metric b { font-size: 28px; }
}

/* ---------- Home: the pitch and the tools ---------- */
.home-top { margin-bottom: 30px; }
.pitch { padding: 18px 0 26px; }
.pitch h1 { margin: 0; font: 700 clamp(34px, 4.6vw, 54px)/1.04 var(--font-display); letter-spacing: -.045em; }
.pitch h1 span { color: var(--label-3); }
.pitch p { max-width: 620px; margin: 14px 0 0; font-size: 17px; line-height: 1.5; color: var(--label-2); }
.pitch-stats { display: flex; flex-wrap: wrap; gap: 10px 40px; margin-top: 24px; }
.pitch-stats div { display: flex; flex-direction: column; }
.pitch-stats b { font: 700 28px/1.1 var(--font-display); letter-spacing: -.03em; font-variant-numeric: tabular-nums; }
.pitch-stats div:nth-child(3) b::after { content: "%"; }
.pitch-stats span { font-size: 13px; color: var(--label-3); }
.mods { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.mod { padding: 16px 16px 10px; border-radius: 18px; background: var(--fill-3); box-shadow: inset 0 0 0 1px var(--sep); display: flex; flex-direction: column; min-width: 0; }
.mod-h { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; margin-bottom: 6px; }
.mod-h h3 { margin: 0; font: 700 17px var(--font-display); letter-spacing: -.02em; }
.mod-h span { font-size: 12px; color: var(--label-3); text-align: right; }
.m-row { display: flex; align-items: center; gap: 10px; padding: 8px 0; border-top: 1px solid var(--sep); min-width: 0; transition: opacity var(--fast); }
.mod-h + .m-row { border-top: 0; }
.m-row:hover { opacity: .78; }
.m-row .ct-ic { width: 16px; height: 16px; flex: none; }
.m-row svg.ct-ic { color: var(--good); }
.m-txt { display: flex; flex-direction: column; min-width: 0; flex: 1; }
.m-st { display: flex; align-items: center; gap: 3px; font-size: 14px; font-weight: 600; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.m-st > span { overflow: hidden; text-overflow: ellipsis; }
.m-sub { font-size: 12px; color: var(--label-3); overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.m-tag { flex: none; font-size: 12px; font-weight: 700; }
.m-tag.right { color: var(--good); } .m-tag.wrong { color: var(--bad); }
.m-score { flex: none; font: 700 18px var(--font-display); color: var(--bad); font-variant-numeric: tabular-nums; }
.mods .m-row:has(.m-tag.wrong) .ct-ic { color: var(--bad); }
.sm-row { display: grid; grid-template-columns: 48px minmax(0, 1fr); grid-template-rows: auto auto; gap: 3px 10px; align-items: center; padding: 8px 0; border-top: 1px solid var(--sep); }
.mod-h + .sm-row { border-top: 0; }
.sm-sym { grid-row: 1 / span 2; font: 700 15px var(--font-display); letter-spacing: -.01em; }
.sm-line { display: grid; grid-template-columns: 56px minmax(0, 1fr) 34px; align-items: center; gap: 8px; font-size: 12px; }
.sm-l { color: var(--label-3); }
.sm-bar { height: 5px; border-radius: 3px; background: var(--fill-2); overflow: hidden; }
.sm-bar i { display: block; height: 100%; border-radius: 3px; transform-origin: left; animation: grow 1s var(--ease) both; }
.sm-bar.smart i { background: var(--accent); }
.sm-bar.all i { background: var(--label-3); }
.sm-line b { font-size: 12px; text-align: right; font-variant-numeric: tabular-nums; }
.sm-row.locked { filter: blur(5px); opacity: .55; pointer-events: none; user-select: none; }
.mod-unlock { display: inline-flex; align-items: center; justify-content: center; gap: 6px; margin-top: 8px; height: 32px; border-radius: var(--r-pill); font-size: 13px; font-weight: 600; color: var(--accent); background: color-mix(in srgb, var(--accent) 12%, transparent); }
.lock-ic { width: 12px; height: 12px; fill: currentColor; flex: none; }

/* ---------- Feed: verdict first, the tweet as evidence ---------- */
.tab-hint { margin: 0; padding: 12px 0 14px; font-size: 13px; color: var(--label-3); }
.tabs > button[role="tab"] .lock-ic { margin-left: 5px; vertical-align: -1px; opacity: .7; }
.calltags.lead { margin-top: 6px; }
.calltags.lead .calltag { font-size: 16px; }
.calltags.lead .ct-st { font-weight: 650; letter-spacing: -.02em; }
.calltags.lead .ct-ic { width: 17px; height: 17px; }
.quote { display: flex; gap: 12px; align-items: flex-start; margin-top: 10px; padding-left: 12px; border-left: 2px solid var(--sep-strong); }
.quote .post-text { flex: 1; min-width: 0; margin: 0; font-size: 14.5px; line-height: 1.45; color: var(--label-2); display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.quote-img .post-media { margin: 0; width: 64px; height: 64px; min-height: 0; border-radius: 10px; }
.quote-img .post-media img { width: 64px !important; height: 64px; max-height: none; object-fit: cover; }
.quote-img .post-media:not(.ready) { width: 64px; min-height: 64px; }
.elite-tag { flex: none; font-size: 10.5px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; padding: 2px 6px; border-radius: 5px; color: var(--accent); background: color-mix(in srgb, var(--accent) 14%, transparent); }
.elite-tag.early { color: var(--label-2); background: var(--fill-3); }
.post.locked { cursor: default; }
.locked-call { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; width: 100%; margin-top: 8px; padding: 12px 14px; border-radius: 14px; background: var(--fill-3); box-shadow: inset 0 0 0 1px var(--sep); text-align: left; transition: background var(--fast); }
.locked-call:hover { background: var(--fill-2); }
.blurred { filter: blur(6px); user-select: none; letter-spacing: .1em; }
.locked-cta { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 600; color: var(--accent); }
.paywall { position: relative; }
.paywall-blur { filter: blur(7px); opacity: .45; pointer-events: none; user-select: none; max-height: 360px; overflow: hidden; -webkit-mask-image: linear-gradient(#000 40%, transparent); mask-image: linear-gradient(#000 40%, transparent); }
.paywall .lock-card { position: absolute; left: 50%; top: 40px; transform: translateX(-50%); width: min(440px, 92%); }
.lock-card { display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 22px 22px 20px; border-radius: 20px; text-align: center; background: var(--glass-strong); backdrop-filter: saturate(1.6) blur(20px); -webkit-backdrop-filter: saturate(1.6) blur(20px); box-shadow: var(--shadow-float), inset 0 0 0 1px var(--sep); }
.lock-card b { font: 700 19px/1.25 var(--font-display); letter-spacing: -.02em; }
.lock-card > span:not(.lock-badge):not(.lock-cta) { font-size: 14px; color: var(--label-2); line-height: 1.45; }
.lock-badge, .pro-mark { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 700; letter-spacing: .03em; color: var(--accent); }
.lock-cta { margin-top: 6px; height: 40px; padding: 0 20px; display: inline-flex; align-items: center; border-radius: var(--r-pill); font-size: 15px; font-weight: 600; color: #fff; background: var(--accent); }

/* ---------- Pro: nav button and pricing sheet ---------- */
.pro-btn { height: 32px; padding: 0 14px; border-radius: var(--r-pill); font-size: 13px; font-weight: 600; color: #fff; background: var(--accent); transition: opacity var(--fast), transform var(--fast) var(--spring); }
.pro-btn:hover { opacity: .9; }
.pro-btn:active { transform: scale(.95); }
.pro-btn.on { color: var(--accent); background: color-mix(in srgb, var(--accent) 14%, transparent); }
.pro-layer { position: fixed; inset: 0; z-index: 70; display: grid; place-items: center; padding: 16px; }
.pro-layer[hidden] { display: none; }
.pro-layer .scrim { background: rgba(0, 0, 0, .55); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); }
.pro-layer.open .scrim { opacity: 1; }
.pro-sheet { position: relative; width: min(460px, 100%); padding: 30px 28px 24px; border-radius: 26px; background: #050506; box-shadow: 0 0 0 1px rgba(255, 255, 255, .09), var(--shadow-float); transform: translateY(16px) scale(.97); opacity: 0; transition: transform var(--slow) var(--spring), opacity var(--med) var(--ease); }
:root[data-theme="light"] .pro-sheet { background: #fff; box-shadow: 0 0 0 1px rgba(0, 0, 0, .06), var(--shadow-float); }
@media (prefers-color-scheme: light) { :root:not([data-theme="dark"]) .pro-sheet { background: #fff; box-shadow: 0 0 0 1px rgba(0, 0, 0, .06), var(--shadow-float); } }
.pro-layer.open .pro-sheet { transform: none; opacity: 1; }
.pro-sheet h2 { margin: 10px 0 8px; font: 700 28px/1.12 var(--font-display); letter-spacing: -.035em; }
.pro-sub { margin: 0; font-size: 15px; color: var(--label-2); line-height: 1.5; }
.pro-list { list-style: none; margin: 20px 0 0; padding: 0; display: flex; flex-direction: column; gap: 12px; }
.pro-list li { display: grid; grid-template-columns: 20px minmax(0, 1fr); gap: 2px 10px; }
.pro-list li::before { content: "✓"; grid-row: 1 / span 2; color: var(--accent); font-weight: 700; }
.pro-list b { font-size: 15px; }
.pro-list span { font-size: 13.5px; color: var(--label-2); line-height: 1.4; }
.pro-list em { font-style: normal; color: var(--label-3); }
.pro-price { display: flex; align-items: baseline; gap: 6px; margin: 22px 0 12px; }
.pro-price b { font: 700 40px/1 var(--font-display); letter-spacing: -.04em; }
.pro-price span { font-size: 14px; color: var(--label-3); }
.pro-go { width: 100%; height: 48px; border-radius: 14px; font-size: 16px; font-weight: 600; color: #fff; background: var(--accent); transition: opacity var(--fast), transform var(--fast) var(--spring); }
.pro-go:active { transform: scale(.98); }
.pro-go.on { color: var(--label); background: var(--fill-2); }
.pro-note { margin: 10px 0 0; font-size: 12px; color: var(--label-3); text-align: center; }

/* ---------- Why Cred ---------- */
.page.why { max-width: 860px; }
.why-hero { padding: 24px 0 10px; }
.why-hero h1 { margin: 12px 0 18px; font: 700 clamp(36px, 5vw, 58px)/1.03 var(--font-display); letter-spacing: -.045em; }
.why-hero h1 span { color: var(--label-3); }
.why-hero p { max-width: 680px; margin: 0 0 14px; font-size: 18px; line-height: 1.55; color: var(--label-2); }
.why-hero p b { color: var(--label); }
.why-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 28px 32px; margin: 40px 0; }
.why-grid b { font: 700 17px var(--font-display); letter-spacing: -.02em; }
.why-grid p { margin: 6px 0 0; font-size: 14.5px; line-height: 1.55; color: var(--label-2); }
.why-stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1px; border-radius: 18px; overflow: hidden; background: var(--sep); }
.why-stats div { display: flex; flex-direction: column; padding: 18px; background: var(--bg); }
.why-stats b { font: 700 30px var(--font-display); letter-spacing: -.03em; font-variant-numeric: tabular-nums; }
.why-stats span { font-size: 13px; color: var(--label-3); }
.why-how { margin: 44px 0; }
.why-how h2, .why-pro h2 { margin: 0 0 14px; font: 700 24px/1.2 var(--font-display); letter-spacing: -.03em; }
.why-how ol { margin: 0; padding-left: 20px; display: flex; flex-direction: column; gap: 10px; }
.why-how li { font-size: 15.5px; line-height: 1.5; color: var(--label-2); padding-left: 4px; }
.why-how li b { color: var(--label); }
.why-pro { display: flex; align-items: center; gap: 24px; padding: 26px; border-radius: 22px; background: var(--fill-3); box-shadow: inset 0 0 0 1px var(--sep); margin-bottom: 40px; }
.why-pro h2 { margin: 8px 0 6px; }
.why-pro p { margin: 0; color: var(--label-2); }
.why-pro .pro-go { width: auto; flex: none; padding: 0 28px; }

@media (max-width: 1060px) {
  .mods { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 720px) {
  .pitch p { font-size: 15.5px; }
  .pitch-stats { gap: 10px 24px; }
  .pitch-stats b { font-size: 24px; }
  .pro-btn { height: 30px; padding: 0 12px; }
  .why-grid { grid-template-columns: minmax(0, 1fr); }
  .why-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .why-pro { flex-direction: column; align-items: stretch; }
  .why-pro .pro-go { width: 100%; }
  .calltags.lead .calltag { font-size: 15px; }
  .quote { margin-left: -48px; }
}

/* ---------- Accounts: nav button, menu, sign-in sheet, profile ---------- */
.nav-right { position: relative; }
.acct-btn { height: 32px; min-width: 32px; padding: 0 12px; border-radius: var(--r-pill); font-size: 13.5px; font-weight: 600; color: var(--label); background: var(--fill-3); transition: background var(--fast); }
.acct-btn:hover { background: var(--fill-2); }
.acct-btn.in { padding: 0; width: 32px; background: none; }
.acct-btn.in .me-av { width: 30px; height: 30px; font-size: 13px; box-shadow: 0 0 0 2px var(--bg), 0 0 0 3px var(--sep-strong); }
.acct-menu { right: 40px; top: calc(100% + 8px); min-width: 250px; }
.acct-id { display: flex; align-items: center; gap: 10px; padding: 8px 10px 6px; }
.acct-id span { display: flex; flex-direction: column; min-width: 0; }
.acct-id b { font-size: 15px; }
.acct-id small { font-size: 12.5px; color: var(--label-3); }
.acct-menu button.danger { color: var(--bad); }
.acct-preview { padding: 6px 10px 8px; }
.acct-preview > span { display: block; font-size: 12px; color: var(--label-3); margin-bottom: 6px; }
.acct-preview .mini-seg { display: flex; }
.acct-preview .mini-seg button { flex: 1; height: 28px; justify-content: center; }
.auth-sheet { text-align: left; }
.auth-logo { display: block; width: 40px; height: 40px; border-radius: 12px; margin-bottom: 14px; }
.auth-logo::after { inset: 11px 11px 11px 12px; border-width: 3px; }
.auth-seg { display: flex; margin: 18px 0 14px; }
.auth-seg button { flex: 1; }
.auth-form .ios-group { margin-bottom: 12px; }
.ios-row.field { cursor: text; }
.ios-row.field input { flex: 1; min-width: 0; border: 0; outline: none; background: transparent; color: var(--label); font: 15px var(--font); text-align: right; padding: 4px 0; }
.ios-row.field input::placeholder { color: var(--label-3); }
.ios-row.field .ios-l { min-width: 90px; }
.auth-err { margin: 0 0 12px; padding: 10px 12px; border-radius: 10px; font-size: 13.5px; color: var(--bad); background: var(--bad-bg); }
.down-text { color: var(--bad) !important; }
.accent-text { color: var(--accent) !important; font-weight: 600; }
.me-page { max-width: 640px; }
.me-hero { display: flex; align-items: center; gap: 18px; padding: 12px 0 6px; }
.me-hero h1 { display: flex; align-items: center; gap: 10px; margin: 0; font: 700 30px/1.1 var(--font-display); letter-spacing: -.035em; }
.me-hero .hd { color: var(--label-3); font-size: 14.5px; margin-top: 4px; }
.me-hero .p-bio { margin-top: 8px; }
.me-av.big { width: 72px; height: 72px; font-size: 30px; }
.me-tabs { display: flex; width: 100%; margin: 20px 0 0; }
.me-tabs button { flex: 1; }
.me-follow { gap: 10px; }
.me-follow .ios-who { flex: 1; max-width: none; min-width: 0; }
.me-follow .ios-who > span { display: flex; flex-direction: column; min-width: 0; }
.me-follow .ios-who b { display: flex; align-items: center; gap: 3px; font-weight: 600; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.me-follow .ios-who small { font-size: 12.5px; color: var(--label-3); }
.me-follow .ios-v { flex: none; }
.me-follow .ios-v .hi { color: var(--good); } .me-follow .ios-v .lo { color: var(--bad); }

/* ---------- Page headers, People, Markets ---------- */
.pg-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; padding: 14px 0 18px; }
.pg-head h1 { margin: 0; font: 700 clamp(30px, 4vw, 40px)/1.05 var(--font-display); letter-spacing: -.04em; }
.pg-head p { margin: 6px 0 0; font-size: 15.5px; color: var(--label-2); }
.back { display: inline-flex; align-items: center; gap: 2px; margin-top: 6px; font-size: 14px; font-weight: 500; color: var(--accent); }
.back svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.seg a[hidden] { display: none; }
.ppl-bar { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.ppl-bar.sub { margin-top: 12px; }
.ppl-bar.sub .chips { padding: 0; flex: 1; min-width: 0; }
.ppl-search { display: flex; align-items: center; gap: 8px; height: 34px; padding: 0 12px; min-width: 220px; border-radius: 10px; background: var(--fill-3); color: var(--label-3); }
.ppl-search svg { width: 15px; height: 15px; fill: currentColor; flex: none; }
.ppl-search input { flex: 1; min-width: 0; border: 0; outline: none; background: transparent; color: var(--label); font: 14px var(--font); }
.page.wide .tab-hint { margin: 12px 0 10px; }
.row-item .nm .elite-tag { margin-left: 6px; }
.topics-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 12px; }
.topic-card { display: flex; flex-direction: column; gap: 12px; padding: 16px; border-radius: 18px; background: var(--fill-3); box-shadow: inset 0 0 0 1px var(--sep); transition: background var(--fast), transform var(--fast) var(--spring); }
.topic-card:hover { background: var(--fill-2); }
.topic-card:active { transform: scale(.985); }
.tc-h { display: flex; justify-content: space-between; align-items: center; }
.tc-h b { font: 700 19px var(--font-display); letter-spacing: -.02em; }
.tc-stats { display: flex; gap: 16px; }
.tc-stats span { display: flex; flex-direction: column; font-size: 12px; color: var(--label-3); }
.tc-stats b { font: 600 17px var(--font-display); color: var(--label); font-variant-numeric: tabular-nums; }
.tc-top { display: flex; align-items: center; gap: 4px; font-size: 12.5px; color: var(--label-2); min-width: 0; }
.tc-top .av + .av { margin-left: -8px; box-shadow: 0 0 0 2px var(--bg); }
.tc-top span { margin-left: 6px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.tickers.big { gap: 8px; margin-bottom: 18px; }
.tickers.big .ticker { display: inline-flex; align-items: center; height: 32px; padding: 0 12px; font-size: 14px; }
.two-col { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; align-items: start; }
.list-card { padding-bottom: 8px; }
.ci { display: flex; align-items: center; gap: 10px; width: 100%; padding: 9px 0; border-top: 1px solid var(--sep); min-width: 0; text-align: left; transition: opacity var(--fast); }
.mod-h + .ci { border-top: 0; }
.ci:hover { opacity: .78; }
.ci .ct-ic { width: 16px; height: 16px; flex: none; }
.ci.live .ct-ic, .ci > svg.ct-ic:has(.core) { color: var(--live); }
.ci-txt { display: flex; flex-direction: column; min-width: 0; flex: 1; }
.ci-st { display: flex; align-items: center; gap: 3px; font-size: 14px; font-weight: 600; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.ci-st > span { overflow: hidden; text-overflow: ellipsis; }
.ci-sub { font-size: 12px; color: var(--label-3); overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.ci-m { flex: none; display: inline-flex; align-items: baseline; gap: 6px; font-size: 12.5px; }
.ci-m .v-num { min-width: 0; font-size: 13px; }
.ci.locked .ci-m { color: var(--accent); font-weight: 600; align-items: center; }
.ci-score { flex: none; font: 700 17px var(--font-display); font-variant-numeric: tabular-nums; color: var(--label-2); }
.ci-score.hi { color: var(--good); } .ci-score.lo { color: var(--bad); }
.ci.person .av.ring > * { border-color: #0d0d0e; }
.mod-empty { margin: 8px 0; font-size: 13.5px; color: var(--label-3); }
.mod-more { display: inline-flex; align-items: center; gap: 1px; margin-top: 6px; font-size: 13px; font-weight: 600; color: var(--accent); }
.mod-more svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.sm-big { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 6px; }
.sm-big div { display: flex; flex-direction: column; padding: 12px; border-radius: 12px; background: var(--fill-3); }
.sm-big span { font-size: 12px; color: var(--label-3); }
.sm-big b { font: 700 32px/1.1 var(--font-display); letter-spacing: -.03em; font-variant-numeric: tabular-nums; }
.sm-big div:first-child b { color: var(--accent); }
.sm-big small { font-size: 12px; color: var(--label-3); }
.list-card .lock-card, .mod .lock-card { position: static; transform: none; width: auto; margin-top: 6px; box-shadow: inset 0 0 0 1px var(--sep); }
@media (max-width: 860px) {
  .two-col { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 720px) {
  .ppl-search { min-width: 0; flex: 1; }
  .pg-head { flex-direction: column; align-items: flex-start; }
}

/* ---------- Live signal: a blue dot with a sonar ping ---------- */
.live-ic { position: relative; display: inline-block; width: 16px; height: 16px; flex: none; color: var(--live); }
.live-ic::before { content: ""; position: absolute; inset: 4px; border-radius: 50%; background: var(--live); box-shadow: 0 0 10px 1px color-mix(in srgb, var(--live) 65%, transparent); animation: live-core 2.2s ease-in-out infinite; }
.live-ic::after, .live-ic i { content: ""; position: absolute; inset: 4px; border-radius: 50%; border: 1.5px solid var(--live); opacity: 0; animation: sonar 2.2s cubic-bezier(.2, .6, .35, 1) infinite; }
.live-ic i { animation-delay: 1.1s; }
@keyframes sonar { 0% { transform: scale(1); opacity: .85; } 100% { transform: scale(2.5); opacity: 0; } }
@keyframes live-core { 0%, 100% { transform: scale(1); } 50% { transform: scale(.82); } }
.calltags.lead .live-ic { width: 18px; height: 18px; }
.calltags.lead .live-ic::before, .calltags.lead .live-ic::after, .calltags.lead .live-ic i { inset: 4.5px; }
.calltag.live .ct-st { color: var(--label); }

/* ---------- News: The Receipt ---------- */
/* News styles: see the News block at the end of the file. */

/* ---------- Motion ---------- */
@keyframes rise { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
@keyframes grow { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@keyframes pop { from { opacity: 0; transform: scale(.4); } to { opacity: 1; transform: none; } }
@keyframes ping { 0% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--live) 55%, transparent); } 70%, 100% { box-shadow: 0 0 0 6px transparent; } }
@keyframes breathe { 0%, 100% { opacity: 1; } 50% { opacity: .35; } }
@keyframes tick { 0% { background: color-mix(in srgb, var(--accent) 28%, transparent); } 100% { background: transparent; } }
@keyframes shimmer { to { background-position: -200% 0; } }
@keyframes menu-in { from { opacity: 0; transform: scale(.96) translateY(-4px); } to { opacity: 1; transform: none; } }
@keyframes heart-pop { 0% { transform: scale(1); } 40% { transform: scale(1.35); } 100% { transform: scale(1); } }
@keyframes now-pulse { 0%, 100% { box-shadow: 0 0 0 3px color-mix(in srgb, var(--c) 25%, transparent); } 50% { box-shadow: 0 0 0 6px color-mix(in srgb, var(--c) 8%, transparent); } }
::view-transition-old(root), ::view-transition-new(root) { animation-duration: 220ms; animation-timing-function: var(--ease); }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
}

/* ---------- Responsive ---------- */
@media (max-width: 1060px) {
  .layout { grid-template-columns: minmax(0, 1fr); }
  .layout:not(.profile) .rail { display: none; }
  .layout.profile .rail { position: static; max-height: none; order: -1; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; }
  .search-btn span, .search-btn kbd { display: none; }
  .search-btn { padding: 0 10px; }
  .page.xl { max-width: 680px; }
}
@media (max-width: 720px) {
  .nav-inner { grid-template-columns: 1fr auto; padding: env(safe-area-inset-top) 16px 0; height: calc(52px + env(safe-area-inset-top)); }
  .seg, .search-btn { display: none; }
  .dock { display: flex; position: fixed; left: 50%; transform: translateX(-50%); bottom: calc(10px + env(safe-area-inset-bottom)); z-index: 45; padding: 5px; gap: 2px; border-radius: 26px; box-shadow: var(--shadow-float); border: 1px solid var(--sep); }
  .dock a, .dock button { display: flex; flex-direction: column; align-items: center; gap: 1px; width: 70px; padding: 6px 0 5px; border-radius: 20px; font-size: 10px; font-weight: 600; color: var(--label-3); transition: background var(--fast), color var(--fast); }
  .dock svg { width: 21px; height: 21px; fill: currentColor; }
  .dock a.on { color: var(--label); background: var(--fill-3); }
  main { padding: 0 16px 104px; }
  .page { padding-top: 16px; }
  .feed-head { top: calc(53px + env(safe-area-inset-top)); margin: 0 -16px; padding: 0 16px; }
  .tabs button[role="tab"] { font-size: 14.5px; white-space: nowrap; }
  /* The dock already has Following. */
  .tabs button[data-go="#/following"] { display: none; }
  .topic-btn { padding: 0 8px 0 10px; }
  .acts { margin-left: -56px; }
  .top-comment { margin-left: -48px; }
  .cx-stats { gap: 6px 18px; }
  .toast { bottom: calc(88px + env(safe-area-inset-bottom)); }
  .tabs { gap: 18px; height: 44px; }
  .tabs-live { display: none; }
  .post { grid-template-columns: 38px minmax(0, 1fr); gap: 10px; }
  .post-av, .post-av .av { width: 38px !important; height: 38px !important; }
  .post-meta .h { display: none; }
  .x-link { opacity: 1; }
  .post-text { font-size: 15px; }
  .calls { margin-left: -48px; }
  .an-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  /* Profiles on phones: the feed comes first; the score is already in the header. */
  .layout.profile .rail-extra { display: none; }
  .an-stats { gap: 8px 22px; }
  .an-verdict h2 { font-size: 21px; }
  .v-st { white-space: normal; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; font-size: 14px; }
  .v-inner { padding: 0 12px 0 32px; }
  .post-media img { max-height: 440px; }
  .p-inner { grid-template-columns: minmax(0, 1fr); padding: 24px 18px 28px; justify-items: center; text-align: center; }
  .p-id { flex-direction: column; }
  .p-id h1 { justify-content: center; font-size: 24px; }
  .p-actions { justify-content: center; }
  .p-bio { margin-left: auto; margin-right: auto; }
  .stat-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .layout.profile .rail { grid-template-columns: minmax(0, 1fr); }
  .podium { gap: 8px; }
  .pod .big { font-size: 28px; }
  .row-item { grid-template-columns: 22px 40px minmax(0, 1fr) auto; gap: 10px; }
  .row-item .follow { display: none; }
  .sheet { width: 100%; max-height: 94vh; }
  .sheet-body { padding: 12px 18px calc(40px + env(safe-area-inset-bottom)); }
  .verdict-hero h2 { font-size: 22px; }
  .lw-big { height: 250px; }
  .fig-pane.tv { height: 340px; }
  .about-grid { grid-template-columns: minmax(0, 1fr); }
}
/* Up to five markets; settled ones drop out once their odds load, and the next one moves up. */
.rail .mkts .r-row:nth-of-type(n+6) { display: none; }
/* Nav buttons never wrap; tighten the nav on medium screens. */
.pro-btn, .acct-btn { white-space: nowrap; flex: none; }
@media (max-width: 900px) {
  .seg a { padding: 7px 10px; }
  .nav-right { gap: 2px; }
}

/* News: public figures' unsettled calls */
.on-record { margin-top: 28px; }

/* Opinion / disputed / unverified: a neutral rating, and each side's case */
.status.rated { background: var(--fill-3); color: var(--label); }
.side-row { display: block; padding: 13px 16px; }
.side-row p { margin: 0; font-size: 15px; line-height: 1.45; color: var(--label); }
.side-src { display: flex; flex-wrap: wrap; gap: 6px 12px; margin-top: 8px; }
.side-src a { font-size: 13px; color: var(--accent); text-decoration: none; }
.side-src a:hover { text-decoration: underline; }

/* ---------- News: "The Receipt" ---------- */
/* Apple-leaning: big clean type, soft rounded media, a sticky sidebar of live numbers that move. */
.news-page { max-width: 1240px; }
.n-head { display: flex; justify-content: space-between; align-items: flex-end; gap: 24px; flex-wrap: wrap; padding: 16px 0 22px; }
.n-date { font-size: 13px; font-weight: 600; color: var(--label-3); }
.n-head h1 { margin: 2px 0 0; font: 800 clamp(34px, 4vw, 44px)/1 var(--font-display); letter-spacing: -.04em; }
.n-head p { margin: 0; max-width: 520px; font-size: 16px; line-height: 1.45; color: var(--label-2); }
.n-seg { display: inline-flex; padding: 3px; border-radius: var(--r-pill); background: var(--fill-2); }
.n-seg button { height: 32px; padding: 0 16px; border: 0; border-radius: var(--r-pill); background: none; font: 600 13.5px var(--font); color: var(--label-2); cursor: pointer; transition: background .25s var(--ease), color .25s var(--ease); }
.n-seg button:hover { color: var(--label); }
.n-seg button.on { background: var(--label); color: var(--bg); }

.n-layout { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 36px; align-items: start; padding-bottom: 60px; }
.n-main { min-width: 0; }

.kicker { display: inline-block; font-size: 12px; font-weight: 700; letter-spacing: .02em; }
.kicker.hit { color: var(--good); } .kicker.miss, .kicker.false { color: var(--bad); } .kicker.upset { color: var(--live); }
.byline { display: inline-flex; align-items: center; gap: 7px; font-size: 13px; color: var(--label-3); }
.byline i { font-style: normal; opacity: .6; }

/* Pictures */
.sp { position: relative; overflow: hidden; aspect-ratio: 16 / 10; border-radius: 18px; background: #141416; isolation: isolate; transform: translateZ(0); }
.sp > * { position: absolute; inset: 0; }
.sp-img { width: 100%; height: 100%; object-fit: cover; z-index: 2; transition: transform .8s cubic-bezier(.2, .8, .2, 1); }
.sp-portrait { z-index: 1; display: grid; place-items: center; }
.sp-cover, .sp-blur { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform .8s cubic-bezier(.2, .8, .2, 1); }
.sp-cover { filter: saturate(.9) brightness(.62); }
.sp-blur { filter: blur(30px) saturate(1.3) brightness(.7); transform: scale(1.5); }
.sp-face { position: relative; z-index: 1; transition: transform .5s cubic-bezier(.2, .8, .2, 1); }
.sp-face .av { box-shadow: 0 0 0 2px rgba(255, 255, 255, .9), 0 12px 32px rgba(0, 0, 0, .45); }
.sp-sm { width: 112px; flex: none; aspect-ratio: 1; border-radius: 14px; }
a:hover .sp-img, a:hover .sp-cover { transform: scale(1.04); }
a:hover .sp-face { transform: scale(1.06); }

/* Lead */
.n-lead { display: block; }
.n-lead .sp { aspect-ratio: 16 / 8.5; border-radius: 24px; }
.n-lead-txt { padding: 20px 4px 0; }
.n-lead-txt h2 { margin: 8px 0 10px; font: 750 clamp(26px, 2.9vw, 38px)/1.1 var(--font-display); letter-spacing: -.03em; text-wrap: balance; }
.n-lead-txt p { margin: 0 0 14px; max-width: 680px; font-size: 17px; line-height: 1.5; color: var(--label-2); }

/* Grid of cards */
.n-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 30px 26px; margin-top: 40px; }
.n-card { display: flex; flex-direction: column; gap: 14px; min-width: 0; }
.n-card-txt { display: flex; flex-direction: column; align-items: flex-start; gap: 7px; padding: 0 2px; }
.n-card h3 { margin: 0; font: 700 19px/1.27 var(--font-display); letter-spacing: -.02em; text-wrap: pretty; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.n-lead:hover h2, .n-card:hover h3, .n-row:hover .n-row-h { color: var(--accent); }
.n-lead h2, .n-card h3, .n-row-h { transition: color .2s; }

/* Latest */
.n-latest { margin-top: 44px; }
.n-h { margin: 0 0 6px; font: 700 20px var(--font-display); letter-spacing: -.02em; }
.n-row { display: flex; align-items: center; gap: 16px; padding: 14px 0; border-bottom: 1px solid var(--sep); }
.n-row:last-child { border-bottom: 0; }
.n-row-txt { display: flex; flex-direction: column; align-items: flex-start; gap: 5px; flex: 1; min-width: 0; }
.n-row-h { font: 650 16px/1.32 var(--font-display); letter-spacing: -.015em; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }

/* Sidebar */
.n-side { position: sticky; top: 84px; display: flex; flex-direction: column; gap: 14px; }
.nl-card { padding: 16px 16px 10px; border-radius: 20px; background: var(--fill-3); box-shadow: inset 0 0 0 1px var(--sep); }
.nl-card-h { display: flex; justify-content: space-between; align-items: center; margin-bottom: 10px; font: 700 15px var(--font-display); letter-spacing: -.01em; }
.nl-sub { font-size: 12.5px; font-weight: 500; color: var(--label-3); }
a.nl-sub:hover { color: var(--accent); }
.nl-live { display: inline-flex; align-items: center; gap: 7px; color: var(--live); font-size: 13px; }
.nl-live i { width: 8px; height: 8px; border-radius: 50%; background: var(--live); animation: ping 1.8s infinite; }
.nl-stats { padding-bottom: 16px; }
.nl-stats .nl-card-h > span:last-child { font-size: 12.5px; font-weight: 500; color: var(--label-3); }
.nl-big b { display: block; font: 800 44px/1 var(--font-display); letter-spacing: -.04em; font-variant-numeric: tabular-nums; }
.nl-big span { font-size: 13px; color: var(--label-3); }
.nl-meter { margin-top: 16px; display: flex; flex-direction: column; gap: 6px; }
.nl-meter-row { display: flex; justify-content: space-between; font-size: 13px; color: var(--label-2); }
.nl-meter-row b { color: var(--label); font-variant-numeric: tabular-nums; }
.nl-bar { height: 6px; border-radius: 3px; background: var(--fill-2); overflow: hidden; margin-bottom: 6px; }
.nl-bar.thin { height: 4px; margin: 5px 0 0; }
.nl-bar i { display: block; height: 100%; width: 0; border-radius: inherit; transition: width 1.2s cubic-bezier(.2, .8, .2, 1) .15s; }
.news-page.in .nl-bar i { width: var(--w); }
.nl-bar i.good { background: var(--good); } .nl-bar i.accent { background: var(--accent); }
.nl-pair { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--sep); }
.nl-pair b { display: block; font: 750 24px/1.1 var(--font-display); letter-spacing: -.03em; font-variant-numeric: tabular-nums; }
.nl-pair b.bad { color: var(--bad); }
.nl-pair span { font-size: 12px; color: var(--label-3); }

.nl-ticker { display: flex; flex-direction: column; max-height: calc(4 * 58px); overflow: hidden; }
.nl-tick { display: flex; align-items: center; gap: 10px; height: 58px; padding: 8px 0; border-top: 1px solid var(--sep); transition: opacity .3s, margin-top .38s cubic-bezier(.2, .8, .2, 1); }
.nl-tick:first-child { border-top: 0; }
.nl-tick.out { opacity: 0; margin-top: -58px; }
.nl-dot { width: 8px; height: 8px; flex: none; border-radius: 50%; }
.nl-dot.hit { background: var(--good); } .nl-dot.miss, .nl-dot.false { background: var(--bad); } .nl-dot.upset { background: var(--live); }
.nl-tick-txt { display: flex; flex-direction: column; min-width: 0; flex: 1; }
.nl-tick-txt b { font-size: 12.5px; font-weight: 650; }
.nl-tick-txt span { font-size: 13px; color: var(--label-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.nl-verdict { flex: none; font-size: 11.5px; font-weight: 700; padding: 3px 8px; border-radius: var(--r-pill); }
.nl-verdict.hit { color: var(--good); background: var(--good-bg); }
.nl-verdict.miss, .nl-verdict.false { color: var(--bad); background: var(--bad-bg); }
.nl-verdict.upset { color: var(--live); background: var(--live-bg); }
.nl-tick:hover .nl-tick-txt span, .nl-up:hover .nl-up-txt span, .nl-lead:hover b { color: var(--accent); }

.nl-up { display: flex; align-items: center; gap: 10px; padding: 9px 0; border-top: 1px solid var(--sep); }
.nl-up:first-of-type { border-top: 0; }
.nl-up-txt { display: flex; flex-direction: column; min-width: 0; flex: 1; }
.nl-up-txt b { font-size: 12.5px; font-weight: 650; }
.nl-up-txt span { font-size: 13px; color: var(--label-2); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.nl-clock { flex: none; font: 600 12px var(--font); font-variant-numeric: tabular-nums; color: var(--live); background: var(--live-bg); padding: 4px 8px; border-radius: var(--r-pill); }

.nl-lead { display: flex; align-items: center; gap: 10px; padding: 8px 0; }
.nl-rank { width: 14px; font-size: 12px; font-weight: 700; color: var(--label-3); text-align: center; }
.nl-lead-txt { flex: 1; min-width: 0; }
.nl-lead-txt b { display: block; font-size: 13.5px; font-weight: 650; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; transition: color .2s; }
.nl-score { font: 750 17px var(--font-display); font-variant-numeric: tabular-nums; }
.nl-score.hi { color: var(--good); } .nl-score.lo { color: var(--bad); }

/* Entrance */
.news-page .n-lead, .news-page .n-card, .news-page .nl-card { opacity: 0; transform: translateY(10px); transition: opacity .6s cubic-bezier(.2, .8, .2, 1), transform .6s cubic-bezier(.2, .8, .2, 1); }
.news-page.in .n-lead, .news-page.in .n-card, .news-page.in .nl-card { opacity: 1; transform: none; }
.news-page.in .n-card:nth-child(2), .news-page.in .nl-card:nth-child(2) { transition-delay: .06s; }
.news-page.in .n-card:nth-child(3), .news-page.in .nl-card:nth-child(3) { transition-delay: .12s; }
.news-page.in .n-card:nth-child(4), .news-page.in .nl-card:nth-child(4) { transition-delay: .18s; }
@media (prefers-reduced-motion: reduce) {
  .news-page .n-lead, .news-page .n-card, .news-page .nl-card { opacity: 1; transform: none; transition: none; }
  .nl-bar i { transition: none; }
}

/* ---------- Article ---------- */
.page.article { max-width: 720px; }
.art-head { padding: 14px 0 0; }
.art-head h1 { margin: 10px 0 12px; font: 800 clamp(30px, 4.4vw, 46px)/1.07 var(--font-display); letter-spacing: -.04em; text-wrap: balance; }
.art-dek { margin: 0; font-size: 19px; line-height: 1.5; color: var(--label-2); }
.art-by { display: flex; align-items: center; gap: 8px; margin-top: 16px; padding-bottom: 18px; border-bottom: 1px solid var(--sep); font-size: 13px; color: var(--label-3); }
.art-by b { color: var(--label); font-weight: 650; }
.art-hero { margin: 22px 0 0; }
.art-hero .sp { aspect-ratio: 16 / 9; border-radius: 22px; }
.art-sec { margin-top: 34px; }
.art-sec h2 { margin: 0 0 12px; font: 750 21px/1.25 var(--font-display); letter-spacing: -.025em; }
.art-sec > p { margin: 0 0 14px; font-size: 17px; line-height: 1.65; color: var(--label); }
.art-sec > p.art-evidence { font-size: 14px; color: var(--label-3); }
.art-tweet { margin: 0; padding: 16px 18px; border-radius: 18px; background: var(--fill-3); box-shadow: inset 0 0 0 1px var(--sep); }
.art-tweet .post-text { font-size: 16px; }
.art-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); gap: 10px; }
.art-stats > div { display: flex; flex-direction: column; gap: 2px; padding: 14px 16px; border-radius: 16px; background: var(--fill-3); }
.art-stats b { font: 750 26px/1.1 var(--font-display); letter-spacing: -.03em; font-variant-numeric: tabular-nums; }
.art-stats b.hi { color: var(--good); } .art-stats b.lo { color: var(--bad); }
.art-stats span { font-size: 12.5px; color: var(--label-3); }
.art-sources { margin: 0; padding: 0; list-style: none; border-radius: 16px; background: var(--fill-3); overflow: hidden; }
.art-sources li { padding: 12px 16px; border-top: 1px solid var(--sep); }
.art-sources li:first-child { border-top: 0; }
.art-sources a { font-size: 15px; font-weight: 550; color: var(--label); }
.art-sources a:hover { color: var(--accent); }
.art-sources small { display: block; margin-top: 2px; font-size: 12.5px; color: var(--label-3); }

@media (max-width: 1000px) {
  .n-layout { grid-template-columns: minmax(0, 1fr); }
  .n-side { position: static; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 640px) {
  .n-head { align-items: flex-start; }
  .n-seg { width: 100%; overflow-x: auto; scrollbar-width: none; }
  .n-seg button { flex: none; }
  .n-lead .sp { aspect-ratio: 4 / 3; border-radius: 20px; }
  .n-grid { grid-template-columns: minmax(0, 1fr); gap: 26px; margin-top: 30px; }
  .n-side { grid-template-columns: minmax(0, 1fr); }
  .sp-sm { width: 84px; }
  .art-dek { font-size: 17px; }
}

/* Mobile dock: narrower buttons on small phones. */
@media (max-width: 560px) { .dock a, .dock button { width: 62px; } }

/* Article: the post's header and footer, the chart or odds figure, and reactions. */
.art-tweet header { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; }
.art-tweet header > span { display: flex; flex-direction: column; min-width: 0; }
.art-tweet .post-av, .art-tweet header > a { position: relative; width: 36px; height: 36px; flex: none; }
.art-tweet footer { margin-top: 10px; font: 500 12.5px var(--font); color: var(--label-3); }
.art-figure { margin: 24px 0 0; }
.art-figure figcaption { margin-top: 8px; font-size: 12.5px; color: var(--label-3); }
.art-figure .post-media { width: 100%; }
.art-social .discussion { margin-top: 10px; }
.art-social .acts { margin-left: -8px; }


/* News: when there's no photo, the post itself fills the picture frame. */
.sp-quote { z-index: 1; display: flex; flex-direction: column; justify-content: space-between; gap: 10px; padding: 22px 24px 20px; color: #f5f5f7; background: radial-gradient(120% 120% at 0% 0%, rgba(255, 255, 255, .07), transparent 55%), #161618; }
.sp-quote.false, .sp-quote.miss { background: radial-gradient(120% 120% at 0% 0%, rgba(255, 69, 58, .26), transparent 60%), #161618; }
.sp-quote.hit { background: radial-gradient(120% 120% at 0% 0%, rgba(48, 209, 88, .22), transparent 60%), #161618; }
.sp-quote.upset { background: radial-gradient(120% 120% at 0% 0%, rgba(74, 168, 255, .24), transparent 60%), #161618; }
.sp-q-mark { font: 800 64px/.6 var(--font-display); opacity: .35; height: 30px; }
.sp-q-text { margin: 0; font: 650 18px/1.35 var(--font-display); letter-spacing: -.015em; display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden; }
.sp-lg .sp-q-text { font-size: clamp(20px, 2.2vw, 28px); line-height: 1.3; -webkit-line-clamp: 5; }
.sp-lg .sp-quote { padding: 30px 34px 26px; }
.sp-q-by { display: flex; align-items: center; gap: 8px; font-size: 13px; color: rgba(245, 245, 247, .7); }
.sp-q-by b { color: #f5f5f7; font-weight: 650; }
.sp-sm .sp-quote { padding: 0; align-items: center; justify-content: center; }
.sp-sm .sp-q-mark { font-size: 54px; line-height: 1; height: auto; opacity: .55; transform: translateY(10px); }
a:hover .sp-quote .sp-q-text { color: #fff; }

/* Article: More news */
.art-more .n-row:last-child { border-bottom: 0; }

/* News: best and worst call sliders */
.n-slider { margin-top: 44px; }
.n-slider-h { display: flex; justify-content: space-between; align-items: flex-end; gap: 16px; margin-bottom: 14px; }
.n-slider-h span { display: block; margin-top: 4px; font-size: 13px; color: var(--label-3); }
.n-slider-ctl { display: flex; align-items: center; gap: 8px; flex: none; }
.n-all { margin-right: 6px; font-size: 14px; font-weight: 600; color: var(--accent); }
.n-arrow { display: grid; place-items: center; width: 34px; height: 34px; border: 0; border-radius: 50%; background: var(--fill-2); color: var(--label); cursor: pointer; transition: background .2s, opacity .2s, transform .2s; }
.n-arrow:hover:not(:disabled) { background: var(--fill-1, rgba(118, 118, 128, .32)); transform: scale(1.06); }
.n-arrow:disabled { opacity: .3; cursor: default; }
.n-arrow svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.n-track { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(270px, calc((100% - 28px) / 3)); gap: 14px; overflow-x: auto; scroll-snap-type: x mandatory; scroll-behavior: smooth; scrollbar-width: none; padding: 2px; margin: -2px; }
.n-track::-webkit-scrollbar { display: none; }
.n-track > * { scroll-snap-align: start; }

/* A call card (sliders and the ranked list) */
.cc { position: relative; display: flex; flex-direction: column; gap: 12px; padding: 16px; border-radius: 18px; background: var(--fill-3); box-shadow: inset 0 0 0 1px var(--sep); overflow: hidden; transition: transform .25s var(--ease), background .25s; }
.cc::before { content: ""; position: absolute; inset: 0; pointer-events: none; opacity: .9; }
.cc.best::before { background: radial-gradient(120% 80% at 0% 0%, rgba(48, 209, 88, .12), transparent 60%); }
.cc.worst::before { background: radial-gradient(120% 80% at 0% 0%, rgba(255, 69, 58, .12), transparent 60%); }
.cc:hover { transform: translateY(-3px); background: var(--fill-2); }
.cc > * { position: relative; }
.cc-top { display: flex; align-items: center; gap: 10px; }
.cc-rank { font: 800 15px var(--font-display); color: var(--label-3); min-width: 16px; font-variant-numeric: tabular-nums; }
.cc-who { display: flex; flex-direction: column; flex: 1; min-width: 0; }
.cc-who b { font-size: 14px; font-weight: 650; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cc-who span { font-size: 12px; color: var(--label-3); }
.cc-st { font: 700 17px/1.3 var(--font-display); letter-spacing: -.015em; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; min-height: 2.6em; }
.cc-foot { display: flex; align-items: center; gap: 10px; margin-top: auto; font-size: 12.5px; color: var(--label-3); }
.cc-odds { display: flex; flex-direction: column; gap: 2px; flex: 1; }
.cc-odds .nl-bar { margin: 0; }
.nl-bar i.bad { background: var(--bad); }
.n-track .nl-bar i, .calls-page .nl-bar i { width: var(--w); }

/* Calls of the week */
.calls-page { max-width: 980px; }
.calls-head { padding: 12px 0 26px; }
.calls-head h1 { margin: 12px 0 8px; font: 800 clamp(36px, 5vw, 52px)/1 var(--font-display); letter-spacing: -.045em; }
.calls-head p { margin: 0; max-width: 620px; font-size: 16px; line-height: 1.5; color: var(--label-2); }
.calls-ctl { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 18px; }
.podium { display: grid; grid-template-columns: 1fr 1.15fr 1fr; gap: 14px; align-items: end; }
.pod { position: relative; display: flex; flex-direction: column; align-items: center; gap: 10px; padding: 26px 18px 18px; border-radius: 24px; text-align: center; background: var(--fill-3); box-shadow: inset 0 0 0 1px var(--sep); overflow: hidden; transition: transform .3s var(--ease); }
.pod:hover { transform: translateY(-4px); }
.pod-1 { order: 2; padding-top: 34px; }
.pod-2 { order: 1; }
.pod-3 { order: 3; }
.best .pod::before, .worst .pod::before { content: ""; position: absolute; inset: 0; pointer-events: none; }
.best .pod-1::before { background: radial-gradient(90% 70% at 50% 0%, rgba(48, 209, 88, .24), transparent 70%); }
.best .pod-2::before, .best .pod-3::before { background: radial-gradient(90% 70% at 50% 0%, rgba(48, 209, 88, .12), transparent 70%); }
.worst .pod-1::before { background: radial-gradient(90% 70% at 50% 0%, rgba(255, 69, 58, .26), transparent 70%); }
.worst .pod-2::before, .worst .pod-3::before { background: radial-gradient(90% 70% at 50% 0%, rgba(255, 69, 58, .12), transparent 70%); }
.pod > * { position: relative; }
.pod-rank { position: absolute; top: 12px; left: 16px; font: 800 28px/1 var(--font-display); color: var(--label-3); opacity: .7; }
.pod-1 .pod-rank { font-size: 36px; color: var(--label); opacity: 1; }
.pod-name { font-size: 15px; font-weight: 700; }
.pod-st { font: 700 16px/1.3 var(--font-display); letter-spacing: -.015em; }
.pod-1 .pod-st { font-size: 19px; }
.pod .cc-foot { justify-content: center; margin-top: 4px; }
.calls-list { list-style: none; margin: 22px 0 60px; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.calls-page .pod, .calls-list li { opacity: 0; transform: translateY(10px); transition: opacity .5s cubic-bezier(.2, .8, .2, 1), transform .5s cubic-bezier(.2, .8, .2, 1); }
.calls-page.in .pod, .calls-page.in .calls-list li { opacity: 1; transform: none; }
.calls-page.in .pod-2 { transition-delay: .06s; } .calls-page.in .pod-3 { transition-delay: .12s; }
@media (prefers-reduced-motion: reduce) { .calls-page .pod, .calls-list li { opacity: 1; transform: none; transition: none; } }
@media (max-width: 760px) {
  .n-track { grid-auto-columns: minmax(250px, 82%); }
  .podium { grid-template-columns: minmax(0, 1fr); }
  .pod-1, .pod-2, .pod-3 { order: 0; }
  .calls-list { grid-template-columns: minmax(0, 1fr); }
  .n-slider-h span { display: none; }
}

/* ---------- Picks ---------- */
/* One page, not a pile of widgets: a feature panel, then a single ranked list on one surface, beside the
   same live sidebar as News. Color lives only in the small topic dots and the numbers. */
.pk-dot { display: inline-block; width: 7px; height: 7px; margin-right: 6px; border-radius: 50%; vertical-align: 1px; background: var(--accent); }
.pk-dot.politics { background: #bf5af2; } .pk-dot.stocks { background: #30d158; } .pk-dot.economic { background: #ffd60a; } .pk-dot.crypto { background: #ff9f0a; } .pk-dot.sports { background: #64d2ff; }
.nl-bar i.politics { background: #bf5af2; } .nl-bar i.stocks { background: #30d158; } .nl-bar i.economic { background: #ffd60a; } .nl-bar i.crypto { background: #ff9f0a; } .nl-bar i.sports { background: #64d2ff; }
.pk-av { position: relative; flex: none; display: inline-flex; }
.pk-person { display: flex; align-items: center; gap: 10px; min-width: 0; }
.pk-person > span:last-child { display: flex; flex-direction: column; min-width: 0; }
.pk-person b { font-size: 14px; font-weight: 650; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pk-person small { font-size: 12px; color: var(--label-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pk-person:hover b { color: var(--accent); }
.pk-val { display: flex; align-items: baseline; gap: 6px; }
.pk-val b { font: 700 16px/1.2 var(--font-display); letter-spacing: -.015em; font-variant-numeric: tabular-nums; }
.pk-val em { font-style: normal; font-size: 12.5px; font-weight: 700; }
.pk-val em.up { color: var(--good); } .pk-val em.down { color: var(--bad); }
.pk-val.muted { color: var(--label-3); }
.pk-sub { display: block; font-size: 11.5px; color: var(--label-3); }
.pk-clock { color: var(--live); font-variant-numeric: tabular-nums; }
.pk-spark { flex: none; }
.pk-spark.up polyline { stroke: var(--good); } .pk-spark.down polyline { stroke: var(--bad); }
.pk-act { display: inline-flex; align-items: center; justify-content: center; gap: 6px; height: 32px; min-width: 32px; padding: 0 12px; border-radius: var(--r-pill); font-size: 13px; font-weight: 650; color: #fff; background: var(--accent); white-space: nowrap; transition: transform .2s, background .2s; }
.pk-act:hover { transform: translateY(-1px); background: color-mix(in srgb, var(--accent) 85%, #fff); }
.pk-act svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.pk-act:not(:has(svg + *)):empty, .pk-go .pk-act { padding: 0; width: 32px; }
.pk-act.big { height: 40px; padding: 0 18px; font-size: 14.5px; }
.pk-more { font-size: 14px; font-weight: 600; color: var(--label-2); }
.pk-more:hover { color: var(--accent); }

/* The top pick */
.pk-hero { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); border-radius: 24px; background: var(--fill-3); box-shadow: inset 0 0 0 1px var(--sep); overflow: hidden; }
.pkh-main { display: flex; flex-direction: column; align-items: flex-start; gap: 16px; padding: 26px 28px; }
.pkh-top { font-size: 12.5px; font-weight: 650; color: var(--label-2); }
.pkh-top i { font-style: normal; margin: 0 6px; color: var(--label-3); }
.pkh-call { font: 800 clamp(26px, 3vw, 36px)/1.1 var(--font-display); letter-spacing: -.035em; color: var(--label); text-wrap: balance; }
.pkh-call:hover { color: var(--accent); }
.pkh-stats { display: flex; gap: 28px; flex-wrap: wrap; }
.pkh-stats .pk-val b { font-size: 26px; letter-spacing: -.03em; }
.pkh-stats .pk-val em { font-size: 14px; }
.pkh-actions { display: flex; align-items: center; gap: 18px; margin-top: 4px; }
.pkh-chart { position: relative; display: flex; align-items: center; padding: 22px 0; background: linear-gradient(180deg, transparent, rgba(255, 255, 255, .02)); border-left: 1px solid var(--sep); }
.pkh-chart .cx-chart { width: 100%; height: 100%; margin: 0; }

/* The ranked list */
.pk-list { container-type: inline-size; margin-top: 22px; border-radius: 22px; background: var(--fill-3); box-shadow: inset 0 0 0 1px var(--sep); overflow: hidden; }
.pk-list-h, .pk-row { display: grid; grid-template-columns: 22px minmax(180px, 1fr) minmax(0, 2.2fr) 200px 36px; align-items: center; gap: 14px; padding: 0 18px; }
.pk-list-h { height: 40px; font-size: 11.5px; font-weight: 600; color: var(--label-3); border-bottom: 1px solid var(--sep); }
.pk-row { min-height: 76px; padding-top: 12px; padding-bottom: 12px; border-bottom: 1px solid var(--sep); transition: background .2s; }
.pk-row:last-child { border-bottom: 0; }
.pk-row:hover { background: var(--fill-3); }
.pk-rank { font: 700 14px var(--font-display); color: var(--label-3); text-align: center; font-variant-numeric: tabular-nums; }
.pk-callcell { font: 650 15px/1.3 var(--font-display); letter-spacing: -.01em; color: var(--label); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; text-align: left; border: 0; background: none; padding: 0; }
a.pk-callcell:hover { color: var(--accent); }
.pk-stand { display: flex; align-items: center; gap: 10px; min-width: 0; }
.pk-left { display: flex; flex-direction: column; }
.pk-left b { font-size: 13.5px; font-weight: 650; }
.pk-go { display: flex; justify-content: flex-end; }
.pk-row.locked .pk-callcell { display: flex; flex-direction: column; gap: 4px; cursor: pointer; }
.blurred { filter: blur(5px); user-select: none; }
.pk-unlock { display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; font-weight: 650; color: var(--accent); }
.pk-unlock .lock-ic { width: 13px; height: 13px; fill: currentColor; }

/* Sidebar topic bars */
.pk-topicbars { display: flex; flex-direction: column; gap: 8px; margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--sep); }
.pk-tb { display: grid; grid-template-columns: 92px minmax(0, 1fr) 24px; align-items: center; gap: 10px; font-size: 13px; color: var(--label-2); }
.pk-tb .nl-bar { margin: 0; }
.pk-tb b { text-align: right; color: var(--label); font-variant-numeric: tabular-nums; }
.pk-tb:hover { color: var(--label); }
.picks-page .nl-bar i { width: var(--w); }

/* Feed strip: compact picks */
.pk-strip { margin: 4px 0 26px; }
.pk-strip .n-track { grid-auto-columns: minmax(280px, calc((100% - 14px) / 2)); }
.pk-mini { display: flex; flex-direction: column; gap: 12px; padding: 16px 18px; border-radius: 20px; background: var(--fill-3); box-shadow: inset 0 0 0 1px var(--sep); text-align: left; border: 0; font: inherit; color: inherit; transition: transform .25s var(--ease), background .25s; }
.pk-mini:hover { transform: translateY(-2px); background: var(--fill-2); }
.pk-mini-call { font: 700 17px/1.28 var(--font-display); letter-spacing: -.02em; color: var(--label); display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; min-height: 2.56em; }
a.pk-mini-call:hover { color: var(--accent); }
.pk-mini-foot { display: flex; align-items: flex-end; justify-content: space-between; gap: 10px; margin-top: auto; padding-top: 12px; border-top: 1px solid var(--sep); }
.pk-mini-stand { display: flex; align-items: center; gap: 10px; min-width: 0; }
.pk-mini-left { display: flex; flex-direction: column; align-items: flex-end; }
.pk-mini-left b { font-size: 14px; font-weight: 650; }
.pk-mini-act { display: flex; }
.pk-mini.locked { cursor: pointer; }
.pk-mini.locked .pk-mini-call { min-height: 0; }

/* When the list's column is narrow, each row stacks: who, then the call, then where it stands. */
@container (max-width: 720px) {
  .pk-list-h { display: none; }
  .pk-row { grid-template-columns: 22px minmax(0, 1fr) 36px; grid-template-areas: "rank who go" "rank call go" "rank stand stand"; row-gap: 8px; }
  .pk-row .pk-rank { grid-area: rank; align-self: start; padding-top: 8px; }
  .pk-row .pk-person { grid-area: who; }
  .pk-row .pk-callcell { grid-area: call; }
  .pk-row .pk-stand { grid-area: stand; }
  .pk-row .pk-go { grid-area: go; align-self: start; }
}
@media (max-width: 760px) {
  .pk-hero { grid-template-columns: minmax(0, 1fr); }
  .pkh-chart { border-left: 0; border-top: 1px solid var(--sep); height: 140px; }
  .pk-list-h { display: none; }
  .pk-row { grid-template-columns: 22px minmax(0, 1fr) 36px; grid-template-areas: "rank who go" "rank call go" "rank stand stand"; row-gap: 8px; }
  .pk-row .pk-rank { grid-area: rank; align-self: start; padding-top: 6px; }
  .pk-row .pk-person { grid-area: who; }
  .pk-row .pk-callcell { grid-area: call; }
  .pk-row .pk-stand { grid-area: stand; }
  .pk-row .pk-left { display: none; }
  .pk-row .pk-go { grid-area: go; align-self: start; }
  .pk-strip .n-track { grid-auto-columns: minmax(260px, 86%); }
}
.pk-clock, .pk-val, .pk-sub { white-space: nowrap; }
.pk-mini .pk-spark { width: 56px; }
.pk-mini-stand > div { min-width: 0; }

/* Where it stands: a slim sparkline, then the price and its move on one line, never spilling into the next column. */
.pk-stand { overflow: hidden; }
.pk-row .pk-spark, .pk-mini .pk-spark { width: 56px; height: 24px; }
.pk-stand > div, .pk-mini-stand > div { min-width: 0; }
.pk-val { flex-wrap: nowrap; }
.pk-left { min-width: 0; }
.pk-hero.solo { grid-template-columns: minmax(0, 1fr); }
.pk-hero.solo .pkh-call { max-width: 900px; }
.pkh-chart .ios-loading { margin: auto; }
.pkh-chart-cap { position: absolute; top: 14px; right: 18px; font-size: 11.5px; font-weight: 600; color: var(--label-3); }

/* ---------- Markets ---------- */
.mk-sec { margin-bottom: 34px; }
.mk-sec-h { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; flex-wrap: wrap; margin-bottom: 12px; }
.mk-sec-h > span { font-size: 13px; color: var(--label-3); }
.mk-table { border-radius: 22px; background: var(--fill-3); box-shadow: inset 0 0 0 1px var(--sep); overflow: hidden; container-type: inline-size; }

/* Topics: one row each */
.mk-topic { display: grid; grid-template-columns: minmax(110px, 1.1fr) 70px 80px minmax(110px, 1fr) minmax(170px, 1.6fr) 16px; align-items: center; gap: 16px; padding: 16px 20px; border-bottom: 1px solid var(--sep); transition: background .2s; }
.mk-topic:last-child { border-bottom: 0; }
.mk-topic:hover { background: var(--fill-3); }
.mk-tname { font: 700 17px var(--font-display); letter-spacing: -.02em; white-space: nowrap; }
.mk-num { display: flex; flex-direction: column; }
.mk-num b { font: 700 18px/1.15 var(--font-display); letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.mk-num small { font-size: 11.5px; color: var(--label-3); }
.mk-rate { display: flex; flex-direction: column; gap: 6px; }
.mk-rate .nl-bar { margin: 0; max-width: 120px; }
.mk-top { display: flex; align-items: center; gap: 10px; min-width: 0; }
.mk-faces { display: flex; flex: none; }
.mk-faces .av { box-shadow: 0 0 0 2px var(--bg); }
.mk-faces .av + .av { margin-left: -8px; }
.mk-topname { display: flex; flex-direction: column; min-width: 0; }
.mk-topname b { font-size: 13.5px; font-weight: 650; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mk-topname small { font-size: 11.5px; color: var(--label-3); }
.mk-topic .ios-chev { width: 16px; height: 16px; fill: none; stroke: var(--label-3); stroke-width: 2; }
.mk-topic:hover .mk-tname { color: var(--accent); }

/* Smart money: bullish vs bearish split bars */
.mk-legend { display: flex; gap: 18px; padding: 12px 20px; border-bottom: 1px solid var(--sep); font-size: 12px; color: var(--label-3); }
.mk-legend i { display: inline-block; width: 10px; height: 10px; margin-right: 6px; border-radius: 3px; vertical-align: -1px; }
.mk-legend i.bull, .mk-split i.bull { background: var(--good); }
.mk-legend i.bear, .mk-split i.bear { background: var(--bad); }
.mk-sent { display: grid; grid-template-columns: 150px minmax(0, 1fr); align-items: center; gap: 18px; padding: 14px 20px; border-bottom: 1px solid var(--sep); transition: background .2s; }
.mk-sent:last-child { border-bottom: 0; }
.mk-sent:hover { background: var(--fill-3); }
.mk-sym { display: flex; flex-direction: row; align-items: center; gap: 10px; min-width: 0; }
.mk-sym b { font: 800 19px var(--font-display); letter-spacing: -.02em; }
.mk-sym small { font-size: 11.5px; color: var(--label-3); }
.mk-sent:hover .mk-sym b { color: var(--accent); }
.mk-lines { display: flex; flex-direction: column; gap: 8px; }
.mk-line { display: grid; grid-template-columns: 96px minmax(0, 1fr) 92px; align-items: center; gap: 12px; }
.mk-who { font-size: 13px; color: var(--label-2); }
.mk-who small { margin-left: 4px; font-size: 11px; color: var(--label-3); }
.mk-split { display: flex; gap: 2px; height: 8px; border-radius: 4px; overflow: hidden; background: var(--fill-2); }
.mk-split i { display: block; height: 100%; width: 0; transition: width 1s cubic-bezier(.2, .8, .2, 1) .1s; }
.markets-page.in .mk-split i { width: var(--w); }
.mk-split i.bull { border-radius: 4px 0 0 4px; } .mk-split i.bear { border-radius: 0 4px 4px 0; }
.mk-split-n { display: flex; justify-content: space-between; gap: 8px; font-size: 13px; font-variant-numeric: tabular-nums; }
.mk-split-n b.up { color: var(--good); } .mk-split-n b.down { color: var(--bad); }
.mk-sent.locked .mk-lines { filter: blur(5px); }
.mk-sent.locked { cursor: pointer; }
.mk-unlock { margin-top: 10px; }

/* Most called this week */
.mk-tickers { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 10px; }
.mk-ticker { position: relative; display: flex; flex-direction: column; gap: 2px; padding: 14px 16px; border-radius: 18px; background: var(--fill-3); box-shadow: inset 0 0 0 1px var(--sep); transition: transform .2s, background .2s; }
.mk-ticker:hover { transform: translateY(-2px); background: var(--fill-2); }
.mk-ticker b { font: 800 19px var(--font-display); letter-spacing: -.02em; }
.mk-trank { position: absolute; bottom: 14px; right: 14px; font-size: 11.5px; font-weight: 700; color: var(--label-3); }
.mk-tcount { font-size: 15px; font-weight: 650; color: var(--label-2); font-variant-numeric: tabular-nums; }
.mk-tcount small { font-size: 11.5px; font-weight: 500; color: var(--label-3); }

/* Sidebar lists */
.mk-list { padding-bottom: 6px; }
.mk-list .ci { padding: 10px 0; border-top: 1px solid var(--sep); }
.mk-list .ci:first-of-type { border-top: 0; }
.markets-page .nl-bar i { width: var(--w); }

@container (max-width: 640px) {
  .mk-topic { grid-template-columns: auto auto minmax(0, 1fr) 16px; grid-template-areas: "name name rate chev" "live graded rate chev" "top top top chev"; column-gap: 20px; row-gap: 10px; }
  .mk-topic .mk-tname { grid-area: name; }
  .mk-topic .mk-rate { grid-area: rate; justify-self: end; align-items: flex-end; }
  .mk-topic .mk-num:nth-child(2) { grid-area: live; }
  .mk-topic .mk-num:nth-child(3) { grid-area: graded; }
  .mk-topic .mk-top { grid-area: top; }
  .mk-topic .ios-chev { grid-area: chev; }
  .mk-sent { grid-template-columns: minmax(0, 1fr); gap: 10px; }
  .mk-line { grid-template-columns: 80px minmax(0, 1fr) 84px; }
}
@media (max-width: 760px) {
  .mk-tickers { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* Time left sits under the standing number, in the same cell. */
.pk-due { display: block; margin-top: 2px; font-size: 11.5px; color: var(--label-3); white-space: nowrap; }
.pk-due b { font-weight: 650; }
.picks-page { max-width: 1320px; }

/* Logos: coin icons, company logos, team crests over a letter badge */
.lg { position: relative; display: inline-grid; place-items: center; flex: none; width: var(--s); height: var(--s); border-radius: 50%; overflow: hidden; background: var(--fill-2); vertical-align: middle; }
.lg b { font-size: calc(var(--s) * .34); font-weight: 750; letter-spacing: -.02em; color: var(--label-2); }
.lg img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; opacity: 0; transition: opacity .25s; }
.lg img.on { opacity: 1; }
.ci-st .lg, .pk-callcell .lg { margin: 0 7px 0 0; vertical-align: -3px; }

/* Topic and ticker pages */
.mk-head { align-items: flex-end; }
.mk-head .back { display: inline-flex; margin-bottom: 8px; }
.mk-head h1 { display: flex; align-items: center; gap: 12px; }
.mk-head h1 .pk-dot { width: 12px; height: 12px; margin: 0; }
.mk-head .pk-act { margin-top: 12px; }
.mk-asset .lg { box-shadow: 0 0 0 1px var(--sep); }
.mk-strip { display: flex; gap: 28px; }
.mk-strip > div { display: flex; flex-direction: column; min-width: 80px; }
.mk-strip b { font: 800 30px/1.05 var(--font-display); letter-spacing: -.035em; font-variant-numeric: tabular-nums; }
.mk-strip span { font-size: 12px; color: var(--label-3); }
.mk-strip .nl-bar { margin: 6px 0 0; width: 90px; }
.mk-calls { padding: 4px 18px; }
.mk-calls .ci { padding: 12px 0; border-top: 1px solid var(--sep); }
.mk-calls .ci:first-child { border-top: 0; }
.mk-empty { margin: 0; padding: 18px 0; font-size: 14px; color: var(--label-3); }
.mk-tk { display: flex; align-items: center; gap: 9px; }
.mk-sym > span:last-child { display: flex; flex-direction: column; }
.mk-sent.solo { grid-template-columns: minmax(0, 1fr); }
.markets-page .mk-split i { width: var(--w); }
@media (max-width: 760px) {
  .mk-strip { gap: 18px; }
  .mk-strip b { font-size: 24px; }
}

/* Coins: the round icon fills the circle. Brands (companies, teams): a white app-icon tile, logo centered with even padding. */
.lg.coin { border-radius: 50%; }
.lg.coin img { object-fit: cover; }
.lg.brand { border-radius: calc(var(--s) * .26); }
.lg.brand img { box-sizing: border-box; padding: calc(var(--s) * .14); background: #fff; }

/* Ticker page: compact header, tabbed calls, smart money in the sidebar */
.mk-asset-row { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
.mk-asset-row .pk-act { margin: 0; }
.mk-ctabs button small { margin-left: 3px; font-size: 11.5px; font-weight: 600; opacity: .6; }
.mk-smcard { padding-bottom: 16px; }
.mk-smcard .mk-legend { padding: 0 0 10px; border: 0; }
.mk-smrow { display: grid; grid-template-columns: 74px minmax(0, 1fr) 70px; align-items: center; gap: 10px; padding: 6px 0; }
.mk-smrow .mk-who { display: flex; flex-direction: column; font-size: 13px; }
.mk-smrow .mk-who small { margin: 0; }
.mk-smrow .mk-split-n { flex-direction: column; align-items: flex-end; gap: 0; font-size: 12px; }

/* People: sub-category chips (coins, stocks, leagues, sub-topics) */
.subchips { display: flex; gap: 8px; margin: 10px 0 2px; overflow-x: auto; flex-wrap: nowrap; scrollbar-width: none; padding-bottom: 2px; }
.subchips::-webkit-scrollbar { display: none; }
.subchips .chip { flex: none; display: inline-flex; align-items: center; gap: 6px; height: 32px; padding: 0 12px; font-size: 13px; }
.subchips .chip small { font-size: 11px; font-weight: 600; opacity: .55; }
.subchips .chip .lg { margin: 0; }

/* Ticker page: smart money strip, sorts, paging */
.mk-smstrip { display: grid; grid-template-columns: 150px minmax(0, 1fr) minmax(0, 1fr) auto; align-items: center; gap: 22px; width: 100%; padding: 16px 20px; border: 0; border-radius: 22px; background: var(--fill-3); box-shadow: inset 0 0 0 1px var(--sep); color: inherit; font: inherit; text-align: left; cursor: pointer; transition: background .2s, transform .2s; }
.mk-smstrip:hover { background: var(--fill-2); transform: translateY(-1px); }
.mk-smhead { display: flex; flex-direction: column; }
.mk-smhead b { font: 700 16px var(--font-display); letter-spacing: -.015em; }
.mk-smhead small { font-size: 12px; color: var(--label-3); }
.mk-smstrip .mk-smrow { padding: 0; }
.mk-smgo { display: inline-flex; align-items: center; gap: 2px; font-size: 13.5px; font-weight: 650; color: var(--accent); white-space: nowrap; }
.mk-smgo svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2.2; }
.mk-sorts { display: flex; gap: 4px; flex-wrap: wrap; }
.mk-sorts button { height: 30px; padding: 0 11px; border: 0; border-radius: var(--r-pill); background: none; font: 600 12.5px var(--font); color: var(--label-3); cursor: pointer; }
.mk-sorts button:hover { color: var(--label); }
.mk-sorts button.on { color: var(--label); background: var(--fill-2); }
.mk-more { display: block; width: 100%; margin: 4px 0 8px; padding: 12px; border: 0; border-top: 1px solid var(--sep); background: none; font: 650 14px var(--font); color: var(--accent); cursor: pointer; }
.mk-more small { margin-left: 6px; font-weight: 500; color: var(--label-3); }

/* Smart money breakdown popup */
.sm-sheet { max-width: 640px; text-align: left; }
.sm-title { display: flex; align-items: center; gap: 14px; margin-bottom: 18px; }
.sm-title h2 { margin: 0; font: 800 24px var(--font-display); letter-spacing: -.03em; }
.sm-title p { margin: 2px 0 0; font-size: 13.5px; color: var(--label-3); }
.sm-sheet .n-h { margin: 18px 0 8px; }
.sm-sheet .n-h.up { color: var(--good); } .sm-sheet .n-h.down { color: var(--bad); }
.sm-group { padding: 6px 14px; border-radius: 16px; background: var(--fill-3); }
.sm-group .mk-smrow { grid-template-columns: 110px minmax(0, 1fr) 70px; }
.sm-days { display: grid; grid-template-columns: repeat(14, minmax(0, 1fr)); gap: 6px; align-items: end; height: 110px; padding: 12px 14px 8px; border-radius: 16px; background: var(--fill-3); }
.sm-day { display: flex; flex-direction: column; align-items: center; gap: 4px; height: 100%; }
.sm-col { display: flex; flex-direction: column; justify-content: flex-end; width: 100%; max-width: 18px; flex: 1; border-radius: 4px; overflow: hidden; background: var(--fill-2); }
.sm-col i { display: block; width: 100%; }
.sm-col i.bull { background: var(--good); } .sm-col i.bear { background: var(--bad); }
.sm-day small { font-size: 10.5px; color: var(--label-3); }
.sm-sides { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 18px; }
.sm-sides > div { min-width: 0; }
.sm-sides .nl-lead-txt .nl-sub { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#smart.pro-layer .pro-sheet { overflow-y: auto; max-height: 86vh; }
@media (max-width: 760px) {
  .mk-smstrip { grid-template-columns: minmax(0, 1fr); gap: 10px; }
  .sm-sides { grid-template-columns: minmax(0, 1fr); }
}
#smart .mk-split i { width: var(--w); }
#smart.pro-layer .pro-sheet { overflow-x: hidden; }

/* People, inside a sub-category: two numbers per row, the record (tap for those calls) and the subject Cred */
.sub-row, .sub-head { grid-template-columns: 28px 44px minmax(0, 1fr) auto 128px 56px; gap: 14px; }
.sub-row { padding: 12px 6px; }
.sub-head { display: grid; padding: 0 6px 8px; border-bottom: 1px solid var(--sep); font-size: 11px; font-weight: 600; letter-spacing: .02em; text-transform: uppercase; color: var(--label-3); }
.sub-head span:first-child { grid-column: 5; text-align: center; }
.sub-head span:last-child { grid-column: 6; text-align: center; }
.sx-rec { display: inline-flex; align-items: center; justify-content: center; gap: 7px; height: 34px; padding: 0 8px 0 12px; border: 0; border-radius: 10px; background: var(--fill-3); color: var(--label); font: inherit; cursor: pointer; transition: background var(--fast); }
.sx-rec:hover { background: var(--fill-2); }
.sx-rec b { font: 700 15px/1 var(--font-display); font-variant-numeric: tabular-nums; letter-spacing: -.01em; }
.sx-rec em { font-style: normal; } .sx-rec em.up { color: var(--good); } .sx-rec em.down { color: var(--bad); }
.sx-rec small { font-size: 11.5px; color: var(--label-3); white-space: nowrap; }
.sx-rec svg { width: 14px; height: 14px; fill: none; stroke: var(--label-3); stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.sx-cred { text-align: center; font: 700 22px/1 var(--font-display); letter-spacing: -.03em; font-variant-numeric: tabular-nums; color: var(--label-2); }
.sx-cred.hi { color: var(--good); } .sx-cred.lo { color: var(--bad); }
.p-subs { margin-top: 12px; }
@media (max-width: 860px) {
  .sub-row, .sub-head { grid-template-columns: 22px 40px minmax(0, 1fr) auto 44px; gap: 10px; }
  .sub-head span:first-child { grid-column: 4; } .sub-head span:last-child { grid-column: 5; }
  .sub-row .follow { display: none; }
  .sx-rec small { display: none; }
}

/* Smart money popup: wider, two columns where there's room, scrolls without a visible scrollbar */
#smart .pro-sheet.sm-sheet { width: min(940px, 94vw); max-width: none; padding: 30px 32px 28px; scrollbar-width: none; }
#smart .pro-sheet.sm-sheet::-webkit-scrollbar { display: none; }
.sm-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(340px, 1fr)); gap: 0 22px; align-items: start; }
.stat-grid.fit { grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); }

/* People: the view switch as underline tabs sitting on a hairline, topics as chips below */
.ppl-bar:not(.sub) { align-items: flex-end; border-bottom: 1px solid var(--sep); padding-bottom: 0; }
.ppl-bar:not(.sub) .ppl-search { margin-bottom: 8px; }
.ppl-tabs { display: flex; gap: 26px; overflow-x: auto; scrollbar-width: none; }
.ppl-tabs::-webkit-scrollbar { display: none; }
.ppl-tabs button { position: relative; flex: none; padding: 10px 0 12px; border: 0; background: none; font: 600 15px/1 var(--font); letter-spacing: -.01em; color: var(--label-3); cursor: pointer; transition: color var(--fast); }
.ppl-tabs button:hover { color: var(--label-2); }
.ppl-tabs button.on { color: var(--label); }
.ppl-tabs button.on::after { content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 2px; border-radius: 2px; background: var(--label); }
.ppl-bar.sub { margin-top: 16px; }
@media (max-width: 700px) {
  .ppl-bar:not(.sub) { flex-direction: column-reverse; align-items: stretch; }
  .ppl-bar:not(.sub) .ppl-search { margin: 0 0 4px; }
  .ppl-tabs { gap: 20px; }
}

/* Feed: wider column, the sidebar pushed out; the full post under the call, its image to the side */
.page.xl { max-width: 1220px; }
.layout { grid-template-columns: minmax(0, 760px) 320px; gap: 72px; }
.quote { gap: 18px; margin-top: 8px; padding-left: 0; border-left: 0; }
.quote-body { flex: 1; min-width: 0; }
.quote .post-text { display: block; font-size: 15px; line-height: 1.5; color: var(--label); -webkit-line-clamp: unset; }
.quote.long .post-text { display: -webkit-box; -webkit-line-clamp: 7; -webkit-box-orient: vertical; overflow: hidden; }
.read-more { display: inline-block; margin-top: 4px; font-size: 14px; font-weight: 600; color: var(--accent); cursor: pointer; }
.read-more:hover { text-decoration: underline; text-underline-offset: 2px; }
.quote-img .post-media, .quote-img .post-media:not(.ready) { width: 148px; height: 148px; min-height: 0; border-radius: 14px; }
.quote-img .post-media img { width: 148px !important; height: 148px; max-height: none; object-fit: cover; }
@media (max-width: 1180px) { .layout { grid-template-columns: minmax(0, 1fr) 300px; gap: 44px; } }
@media (max-width: 1060px) { .layout { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 640px) {
  .quote-img .post-media, .quote-img .post-media:not(.ready) { width: 88px; height: 88px; }
  .quote-img .post-media img { width: 88px !important; height: 88px; }
}

/* Feed: a short post's image goes below it, kept compact; long posts keep a smaller side thumbnail */
.quote.below { display: block; }
.quote.below .post-media { margin-top: 10px; max-width: min(100%, 420px); }
.quote.below .post-media:not(.ready) { width: min(100%, 420px); min-height: 160px; }
.quote.below .post-media img { max-height: 300px; width: auto !important; }
.quote-img .post-media, .quote-img .post-media:not(.ready) { width: 112px; height: 112px; }
.quote-img .post-media img { width: 112px !important; height: 112px; }

/* Call sheet: the original post drawn as a post, so it reads as their words, not ours */
.tweet { padding: 14px 16px 12px; border: 1px solid var(--sep-strong); border-radius: 16px; background: var(--bg); }
.tweet-head { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; }
.tweet-who { display: flex; flex-direction: column; min-width: 0; line-height: 1.25; }
.tweet-who b { font-size: 14.5px; font-weight: 650; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.tweet-who span { font-size: 13px; color: var(--label-3); }
.tweet-x { margin-left: auto; display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; color: var(--label); }
.tweet-x:hover { background: var(--fill-3); }
.tweet-x svg { width: 16px; height: 16px; fill: currentColor; }
.tweet .post-text { font-size: 15.5px; line-height: 1.5; }
.tweet .post-media { margin-top: 12px; max-width: 100%; }
.tweet .post-media img { max-height: 420px; }
.tweet .post-when { margin-top: 12px; padding-top: 10px; border-top: 1px solid var(--sep); }

/* Picks: centered filters (topic, then its coins, stocks or leagues), whose picks and in what order above the
   list, and the top pick and rows drawn on the page itself, separated by hairlines rather than boxed */
.pk-filters { display: flex; flex-direction: column; align-items: center; gap: 12px; padding: 8px 0 22px; }
.pk-subs { justify-content: safe center; max-width: 100%; margin: 0; }
.pk-bar { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; flex-wrap: wrap; border-bottom: 1px solid var(--sep); margin-bottom: 4px; }
.pk-sort { display: inline-flex; gap: 2px; margin-bottom: 8px; padding: 2px; border-radius: var(--r-pill); background: var(--fill-3); }
.pk-sort button { height: 28px; padding: 0 12px; border: 0; border-radius: var(--r-pill); background: none; font: 600 12.5px var(--font); color: var(--label-3); cursor: pointer; }
.pk-sort button:hover { color: var(--label); }
.pk-sort button.on { background: var(--fill-1, var(--fill-2)); color: var(--label); }
.pk-hero { background: none; box-shadow: none; border-radius: 0; border-bottom: 1px solid var(--sep); }
.pkh-main { gap: 12px; padding: 22px 24px 22px 0; }
.pkh-call { display: flex; align-items: center; gap: 10px; font-size: clamp(22px, 2.3vw, 28px); }
.pkh-call .lg { flex: none; }
.pkh-stats { gap: 26px; }
.pkh-stats .pk-val b { font-size: 21px; }
.pkh-chart { background: none; padding: 18px 0; min-height: 220px; }
.pk-list { margin-top: 0; background: none; box-shadow: none; border-radius: 0; }
.pk-list-h, .pk-row { grid-template-columns: 22px minmax(170px, 1fr) minmax(0, 2fr) 170px 170px 36px; padding: 0 4px; }
.pk-row:hover { background: color-mix(in srgb, var(--fill-3) 60%, transparent); }
.pk-row:last-child { border-bottom: 1px solid var(--sep); }
.pk-public { min-width: 0; }
.pk-pub { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.pk-pub .pk-val b.up { color: var(--good); } .pk-pub .pk-val b.down { color: var(--bad); }
.pk-pub .pk-sub { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pk-agree { display: block; width: 100%; max-width: 140px; height: 4px; border-radius: 2px; background: var(--fill-2); overflow: hidden; }
.pk-agree i { display: block; height: 100%; width: var(--w, 0); border-radius: 2px; background: var(--accent); transition: width .6s var(--ease); }
.pkh-pub .pk-agree { max-width: 160px; }
.pk-more-btn { display: block; margin: 18px auto 0; height: 36px; padding: 0 18px; border: 0; border-radius: var(--r-pill); background: var(--fill-3); color: var(--label); font: 600 13.5px var(--font); cursor: pointer; }
.pk-more-btn:hover { background: var(--fill-2); }
@container (max-width: 720px) {
  .pk-list-h { display: none; }
  .pk-row { grid-template-columns: 22px minmax(0, 1fr) 36px; }
  .pk-row { grid-template-areas: "rank who go" "rank call go" "rank stand stand" "rank pub pub"; }
  .pk-row .pk-public { grid-area: pub; }
}
@media (max-width: 860px) {
  .pkh-main { padding-right: 0; }
  .pk-bar { flex-direction: column-reverse; align-items: stretch; }
  .pk-sort { align-self: flex-start; margin: 0; }
}

/* Call sheet, lower half: sections drawn on the sheet (heading, hairline, content), figures in a row,
   the credibility scorecard, and sources as chips with their site's icon */
.an-sec { margin-top: 28px; padding-top: 16px; border-top: 1px solid var(--sep); }
.an-sec-h { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 12px; }
.an-sec-h h4 { margin: 0; font-size: 13px; font-weight: 650; color: var(--label-3); letter-spacing: 0; }
.an-sec-h h4 em { font-style: normal; color: var(--label-2); margin-left: 4px; }
.an-sec-h .fig-tabs { margin: 0; }
.an-chart .cap { margin-top: 8px; }
.an-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); gap: 16px 22px; }
.an-stat { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.an-stat > span { font-size: 12px; font-weight: 600; color: var(--label-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.an-stat b { font: 700 20px/1.15 var(--font-display); letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.an-stat b .up, .an-stat small .up { color: var(--good); } .an-stat b .down, .an-stat small .down { color: var(--bad); }
.an-stat small { font-size: 12px; color: var(--label-3); }
.an-stat small em { font-style: normal; font-weight: 650; }
.an-mkt { display: flex; align-items: baseline; gap: 10px; margin-top: 14px; font-size: 14px; color: var(--label-2); }
.an-mkt span { flex: none; font-size: 12px; font-weight: 650; color: var(--label-3); }
.an-mkt b { flex: 1; min-width: 0; font-weight: 550; color: var(--label); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.an-mkt i { font-style: normal; color: var(--label-3); }
.an-mkt:hover b { color: var(--accent); }
.an-mkt-q { margin: 12px 0 0; font-size: 14px; color: var(--label-2); }

.trust { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 26px; align-items: center; }
.trust-score { display: flex; align-items: center; gap: 12px; padding-right: 26px; border-right: 1px solid var(--sep); }
.trust-score span { display: flex; flex-direction: column; }
.trust-score b { font: 800 34px/1 var(--font-display); letter-spacing: -.04em; font-variant-numeric: tabular-nums; }
.trust-score.good b { color: var(--good); } .trust-score.bad b { color: var(--bad); }
.trust-score small { margin-top: 4px; font-size: 12.5px; font-weight: 600; color: var(--label-3); white-space: nowrap; }
.trust-score:hover small { color: var(--accent); }
.trust-last { display: flex; align-items: center; gap: 10px; margin-top: 16px; padding-top: 12px; border-top: 1px solid var(--sep); font-size: 14px; }
.trust-last span { flex: none; font-size: 12px; font-weight: 600; color: var(--label-3); }
.trust-last b { flex: 1; min-width: 0; font-weight: 550; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.trust-last em { flex: none; font-style: normal; font-weight: 650; }
.trust-last em.up { color: var(--good); } .trust-last em.down { color: var(--bad); }
.trust-last .ios-chev { width: 14px; height: 14px; flex: none; }
.trust-last:hover b { color: var(--accent); }

.src-row { display: flex; flex-wrap: wrap; gap: 8px; }
.news-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 8px; }
.src-chip { display: inline-flex; align-items: center; gap: 10px; min-width: 0; padding: 8px 14px 8px 8px; border-radius: 14px; border: 1px solid var(--sep); transition: background .2s, border-color .2s; }
.src-chip:hover { background: var(--fill-3); border-color: var(--sep-strong); }
.src-ic { flex: none; display: grid; place-items: center; width: 28px; height: 28px; border-radius: 8px; background: #fff; overflow: hidden; }
.src-ic img { width: 18px; height: 18px; }
.src-txt { display: flex; flex-direction: column; min-width: 0; line-height: 1.25; }
.src-txt b { font-size: 13.5px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.src-txt small { font-size: 11.5px; color: var(--label-3); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.news-list .src-chip { align-items: flex-start; }
.news-list .src-txt b { white-space: normal; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.an-sources .ios-foot { margin: 10px 0 0; padding: 0; }
@media (max-width: 560px) {
  .trust { grid-template-columns: 1fr; gap: 16px; }
  .trust-score { padding: 0 0 14px; border-right: 0; border-bottom: 1px solid var(--sep); }
}

/* A call's own page: back to where you were, the hero across the top, then the story with the scorecard beside it */
.detail { outline: none; }
.dt-page { max-width: 1120px; margin: 0 auto; padding-top: 18px; }
.dt-back { display: inline-flex; align-items: center; gap: 4px; height: 34px; margin: 0 0 14px -8px; padding: 0 12px 0 6px; border: 0; border-radius: var(--r-pill); background: none; font: 600 14.5px var(--font); color: var(--accent); cursor: pointer; }
.dt-back:hover { background: var(--fill-3); }
.dt-back svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.detail .an-head { gap: 12px; }
.detail .an-head .post-av { width: 40px; height: 40px; }
.detail .an-head .post-name { font-size: 16px; }
.detail .post { border: 0; }
.detail .calltags { margin-top: 0; }
.detail .an-switch { margin-top: 16px; }
.detail .av.ring > *, .detail .cred-badge { border-color: var(--bg); }
.detail .an-hero { margin-top: 18px; }
.detail .an-title h2 { font-size: clamp(30px, 4vw, 46px); }
.dt-grid { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 56px; align-items: start; margin-top: 8px; }
.dt-main { min-width: 0; }
.dt-rail { position: sticky; top: 84px; min-width: 0; }
.dt-rail .an-sec:first-child { margin-top: 24px; }
.dt-rail .trust { grid-template-columns: 1fr; gap: 18px; }
.dt-rail .trust-score { padding: 0 0 16px; border-right: 0; border-bottom: 1px solid var(--sep); }
.dt-rail .trust-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.dt-rail .news-list { grid-template-columns: 1fr; }
.dt-main > .ios-sec:first-child, .dt-main > section:first-child { margin-top: 24px; }
@media (max-width: 980px) {
  .dt-grid { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .dt-rail { position: static; }
  .dt-rail .trust { grid-template-columns: auto minmax(0, 1fr); }
  .dt-rail .trust-score { padding: 0 26px 0 0; border-right: 1px solid var(--sep); border-bottom: 0; }
}
@media (max-width: 560px) {
  .dt-rail .trust { grid-template-columns: 1fr; }
  .dt-rail .trust-score { padding: 0 0 14px; border-right: 0; border-bottom: 1px solid var(--sep); }
}

/* Call page, integrated: the call and who made it, one panel (now, chart, progress, figures), then the post and
   what Cred found beside the caller's scorecard. Every section uses the same small heading and hairline. */
.dt-hero { padding: 4px 0 6px; }
.dt-hero .an-status { display: inline-flex; align-items: center; gap: 6px; font-size: 13.5px; font-weight: 650; }
.dt-hero .an-status i { font-style: normal; color: var(--label-3); }
.dt-hero h1 { display: flex; align-items: center; gap: 14px; margin: 10px 0 0; font: 800 clamp(30px, 4vw, 48px)/1.05 var(--font-display); letter-spacing: -.04em; text-wrap: pretty; }
.dt-hero h1 .lg { flex: none; }
.dt-by { display: flex; align-items: center; gap: 12px; margin-top: 28px; }
.dt-by .post-av { width: 36px; height: 36px; flex: none; }
.dt-by-txt { display: flex; flex-direction: column; min-width: 0; line-height: 1.3; }
.dt-by-txt .post-name { font-size: 15px; font-weight: 650; }
.dt-by-txt .post-meta { font-size: 13px; color: var(--label-3); }
.dt-by .follow { margin-left: 6px; }

.dt-panel { padding: 22px 24px 20px; border-radius: 22px; background: var(--fill-3); margin: 0 0 8px; }
.dt-panel-h { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; }
.dt-panel .an-metric { margin: 0; }
.dt-panel .fig-pane { margin-top: 14px; }
.dt-panel .lw-big { height: 300px; }
.dt-panel .cap { margin-top: 6px; }
.dt-panel .an-time { margin-top: 18px; }
.dt-panel-stats { margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--sep); }
.dt-panel-stats .an-mkt { margin-top: 14px; }

.dt-sec, .detail .an-sec { margin-top: 30px; padding-top: 0; border-top: 0; }
.dt-h, .detail .an-sec-h h4 { margin: 0 0 12px; font-size: 13px; font-weight: 650; color: var(--label-3); letter-spacing: 0; }
.detail .an-sec-h { margin-bottom: 0; }
.dt-grid { margin-top: 6px; gap: 48px; }
.dt-main > :first-child, .dt-rail > :first-child { margin-top: 24px; }
.dt-rail { padding-left: 32px; border-left: 1px solid var(--sep); }

.detail .tweet { padding: 16px 18px; border-radius: 18px; border: 1px solid var(--sep); background: none; }
.detail .tweet-head { margin-bottom: 10px; }
.detail .tweet-head .tweet-x { margin: 0; width: 28px; height: 28px; background: var(--fill-3); }
.detail .tweet-who b { font-size: 14px; }
.tweet-open { margin-left: auto; font-size: 13.5px; }
.detail .an-summary { margin: 0; padding: 0; }
.detail .an-summary p { color: var(--label); }
.dt-sources { margin-top: 40px; padding-top: 22px; border-top: 1px solid var(--sep); }
@media (max-width: 980px) {
  .dt-rail { padding-left: 0; border-left: 0; }
}
@media (max-width: 560px) {
  .dt-panel { padding: 16px; border-radius: 18px; }
  .dt-panel-h { flex-direction: column; }
  .dt-panel .lw-big { height: 220px; }
}
.dt-by-txt .post-name { max-width: none; overflow: visible; }
.dt-by-txt .post-name span { overflow: visible; text-overflow: clip; }

/* Call page: sources in the rail, under the scorecard */
.dt-rail .dt-sources { margin-top: 30px; padding-top: 0; border-top: 0; }
.src-list { display: flex; flex-direction: column; gap: 8px; }
.src-list .src-chip { align-items: flex-start; }
.src-list .src-txt b { white-space: normal; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.src-ic { position: relative; }
.src-ic b { font-size: 13px; font-weight: 750; color: #1c1c1e; }
.src-ic img { position: absolute; inset: 5px; width: 18px; height: 18px; background: #fff; }

/* Call page: Cred's analysis, set as a report */
.report { padding: 22px 24px; border-radius: 20px; background: var(--fill-3); }
.report-h { display: flex; align-items: center; gap: 12px; padding-bottom: 16px; border-bottom: 1px solid var(--sep); }
.report-mark { flex: none; display: grid; place-items: center; width: 34px; height: 34px; border-radius: 10px; background: var(--label); color: var(--bg); font: 800 18px/1 var(--font-display); letter-spacing: -.04em; }
.report-t { display: flex; flex-direction: column; line-height: 1.25; }
.report-t b { font-size: 15.5px; font-weight: 700; }
.report-t small { font-size: 12px; color: var(--label-3); }
.report-v { margin-left: auto; display: inline-flex; align-items: center; gap: 6px; height: 28px; padding: 0 12px; border-radius: var(--r-pill); font-size: 13px; font-weight: 700; background: var(--fill-2); }
.report-v svg, .report-v .ct-ic { width: 14px; height: 14px; }
.report-v.right { color: var(--good); background: var(--good-bg); }
.report-v.wrong { color: var(--bad); background: var(--bad-bg); }
.report-v.live { color: var(--live); }
.report-list { margin: 16px 0 0; padding: 0; list-style: none; counter-reset: f; display: flex; flex-direction: column; gap: 12px; }
.report-list li { counter-increment: f; display: grid; grid-template-columns: 22px minmax(0, 1fr); gap: 10px; font-size: 15px; line-height: 1.55; color: var(--label); }
.report-list li::before { content: counter(f); display: grid; place-items: center; width: 22px; height: 22px; margin-top: 1px; border-radius: 50%; background: var(--fill-2); font-size: 11.5px; font-weight: 700; color: var(--label-2); }
.report-list b { font-weight: 650; font-variant-numeric: tabular-nums; }
.report-how { margin: 18px 0 0; padding-top: 14px; border-top: 1px solid var(--sep); font-size: 13px; line-height: 1.5; color: var(--label-3); }
.report-how b { color: var(--label-2); font-weight: 650; margin-right: 4px; }
.report-src { margin-top: 16px; }
.report-src h5 { margin: 0 0 10px; font-size: 12px; font-weight: 650; color: var(--label-3); }
.src-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 8px; }
.src-grid .src-chip { background: var(--bg); }
.src-grid .src-txt b { white-space: normal; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.report-src .ios-foot { margin: 10px 0 0; padding: 0; }
@media (max-width: 560px) { .report { padding: 16px; } }

/* Side rail: biggest wins, caught out, long shots */
.rx-mod h4 { display: flex; align-items: center; gap: 8px; font-size: 14px; font-weight: 700; color: var(--label); }
.rx-sub { margin-left: auto; font-size: 11.5px; font-weight: 500; color: var(--label-3); }
.rx-ic { display: grid; place-items: center; width: 20px; height: 20px; border-radius: 6px; font-size: 10px; font-weight: 800; }
.rx-ic.up { color: var(--good); background: var(--good-bg); }
.rx-ic.down { color: var(--bad); background: var(--bad-bg); }
.rx-ic.shot { color: var(--live); background: color-mix(in srgb, var(--live) 16%, transparent); font-size: 12px; }
.rx-win { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 8px; margin: 0 -8px; border-radius: var(--r-sm); transition: background var(--fast); }
.rx-win:hover { background: var(--fill-3); }
.rx-win-l { display: flex; align-items: center; gap: 10px; min-width: 0; }
.rx-win-r { display: flex; align-items: center; gap: 8px; flex: none; }
.rx-win-r b { font: 800 17px/1 var(--font-display); letter-spacing: -.02em; color: var(--good); font-variant-numeric: tabular-nums; }
.rx-quote { display: block; padding: 10px 12px; margin: 0 -4px 8px; border-left: 2px solid var(--bad); border-radius: 0 10px 10px 0; background: color-mix(in srgb, var(--bad) 6%, transparent); transition: background var(--fast); }
.rx-quote:hover { background: color-mix(in srgb, var(--bad) 11%, transparent); }
.rx-quote q { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; font-size: 13.5px; font-weight: 600; line-height: 1.4; color: var(--label); quotes: "“" "”"; }
.rx-by { display: flex; align-items: center; gap: 7px; margin-top: 7px; font-size: 12px; color: var(--label-3); min-width: 0; }
.rx-by > span { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.rx-by em { margin-left: auto; flex: none; font-style: normal; font-weight: 700; font-size: 11px; color: var(--bad); text-transform: uppercase; letter-spacing: .04em; }
.rx-odds { display: flex; flex-direction: column; align-items: flex-end; flex: none; line-height: 1.1; }
.rx-odds b { font: 800 16px/1 var(--font-display); color: var(--live); font-variant-numeric: tabular-nums; }
.rx-odds small { font-size: 10.5px; color: var(--label-3); }

/* Rail headings open their boards */
.rx-h { display: flex; align-items: center; gap: 8px; width: 100%; color: inherit; }
.rx-h .ios-chev { width: 13px; height: 13px; margin-left: -4px; fill: none; stroke: var(--label-3); stroke-width: 2.4; }
.rx-h:hover .rx-sub { color: var(--accent); }

/* Boards: the full lists */
.board .ppl-bar { margin-top: 6px; }
.board .pk-sort { margin-bottom: 8px; }
.board-list { display: flex; flex-direction: column; border-top: 1px solid var(--sep); }
.board-list > a { margin: 0; padding: 14px 6px; border-radius: 0; border-bottom: 1px solid var(--sep); }
.rx-win.big .r-st { font-size: 15px; font-weight: 650; }
.rx-win.big .r-sub { font-size: 12.5px; }
.rx-win.big .rx-win-r b { font-size: 22px; min-width: 76px; text-align: right; }
.rx-shot-big .r-st { font-size: 15px; font-weight: 650; }
.rx-shot-big .rx-odds b { font-size: 20px; }
.board-quotes { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 12px; }
.board-quotes .rx-quote { margin: 0; padding: 14px 16px; }
.board-quotes .rx-quote q { font-size: 15px; -webkit-line-clamp: 5; }

/* Breathing room: paragraphs instead of empty lines, a quieter body under the bold call, and more air between posts */
.post-text p { margin: 0; }
.post-text p + p { margin-top: 8px; }
.feed .post { padding: 23px 0 21px; }
.feed .calltags.lead { margin-top: 8px; }
.feed .quote { margin-top: 10px; }
.feed .quote .post-text { font-size: 15px; line-height: 1.55; color: color-mix(in srgb, var(--label) 82%, transparent); }
.feed .quote-img .post-media, .feed .quote-img .post-media:not(.ready) { border-radius: 12px; }

/* Rail: plain headings, a touch more space, smaller sparklines so the calls have room */
.rail { gap: 34px; }
.rail h4 a.rx-h { margin-left: 0; color: var(--label); font-weight: 700; }
.rx-mod h4 { margin-bottom: 10px; }
.rx-win .r-st { white-space: normal; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; line-height: 1.3; }
.rx-win:not(.big) .pk-spark { width: 40px; }
.rx-win:not(.big) .rx-win-r { gap: 6px; }
.rx-quote { margin-bottom: 10px; background: color-mix(in srgb, var(--bad) 4.5%, transparent); }

/* Bad week */
.bw-card { padding: 10px 12px; margin: 0 -4px 10px; border-radius: 12px; background: var(--fill-3); }
.bw-who { display: flex; align-items: center; gap: 10px; min-width: 0; }
.bw-who:hover .r-st { color: var(--accent); }
.bw-score { display: flex; flex-direction: column; align-items: flex-end; flex: none; line-height: 1.1; }
.bw-score b { font: 800 17px/1 var(--font-display); letter-spacing: -.02em; color: var(--bad); white-space: nowrap; }
.bw-score small { margin-top: 2px; font-size: 10.5px; color: var(--label-3); }
.bw-miss { display: flex; align-items: baseline; gap: 8px; margin-top: 8px; padding-top: 8px; border-top: 1px solid var(--sep); font-size: 12.5px; color: var(--label-2); }
.bw-miss span { flex: 1; min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.bw-miss em { flex: none; font-style: normal; font-size: 10.5px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--bad); }
.bw-miss:hover span { color: var(--label); }
.board-bad { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 12px; }
.bw-card.big { margin: 0; padding: 16px; }
.bw-card.big .r-st { font-size: 15px; }
.bw-card.big .bw-score b { font-size: 22px; }
.bw-card.big .bw-miss { font-size: 13.5px; }

/* Aged like milk: the win row, in red */
.rx-win-r b.down { color: var(--bad); }
.rx-ic.milk { background: var(--fill-2); font-size: 11px; }

/* Predictions sidebar: scrolls on its own while the page stays put */
.pk-side { max-height: calc(100vh - 100px); overflow-y: auto; overscroll-behavior: contain; scrollbar-width: none; padding-bottom: 12px; }
.pk-side::-webkit-scrollbar { display: none; }

/* Track record: hit rate where you are, one level down */
.tr-crumbs { display: flex; align-items: center; gap: 6px; margin-top: 12px; font-size: 13px; color: var(--label-3); }
.tr-crumbs a { color: var(--accent); font-weight: 600; }
.tr-crumbs b { color: var(--label); font-weight: 650; }
.tr-crumbs i { font-style: normal; }
.tr-big { display: flex; align-items: center; gap: 14px; margin-top: 10px; }
.tr-big > b { font: 800 44px/1 var(--font-display); letter-spacing: -.04em; font-variant-numeric: tabular-nums; }
.tr-big span { font-size: 12.5px; line-height: 1.45; color: var(--label-3); }
.tr-big em { font-style: normal; font-weight: 700; }
.tr-big .up, .tr-row .up, .tr-big em.up { color: var(--good); }
.tr-big .down, .tr-row b.down, .tr-big em.down { color: var(--bad); }
.tr-rows { display: flex; flex-direction: column; gap: 2px; margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--sep); }
.tr-row { display: grid; grid-template-columns: minmax(0, 1fr) 70px 38px 34px; align-items: center; gap: 10px; padding: 6px 8px; margin: 0 -8px; border-radius: 8px; font-size: 13px; color: var(--label-2); }
a.tr-row:hover { background: var(--fill-3); color: var(--label); }
.tr-l { display: flex; align-items: center; gap: 6px; min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.tr-l .lg { margin: 0; }
.tr-bar { height: 4px; border-radius: 2px; background: var(--fill-2); overflow: hidden; }
.tr-bar i { display: block; height: 100%; width: var(--w); border-radius: 2px; background: var(--label-3); }
.tr-bar i.up { background: var(--good); } .tr-bar i.down { background: var(--bad); }
.tr-row b { text-align: right; font-variant-numeric: tabular-nums; color: var(--label); }
.tr-row small { text-align: right; font-size: 11px; color: var(--label-3); font-variant-numeric: tabular-nums; }

/* On a heater */
.heat-n { flex: none; font: 800 15px/1 var(--font-display); color: #ff9f0a; font-variant-numeric: tabular-nums; }

/* The Cred mark: the blackletter C on a white tile */
.logo { width: 30px; height: 30px; border-radius: 9px; background: #fff url(logo.png) center / 118% no-repeat; box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .06); }
.logo::after { content: none; }
.logo.sm { width: 18px; height: 18px; border-radius: 5px; }
.report-mark { background: #fff url(logo.png) center / 118% no-repeat; }

/* Header mark: the C on its own, no tile. White in dark mode; flipped to black on a light page. */
.logo-mark { display: block; height: 36px; width: auto; }
:root[data-theme="light"] .logo-mark { filter: invert(1); }
@media (prefers-color-scheme: light) { :root:not([data-theme="dark"]) .logo-mark { filter: invert(1); } }

/* The sticky tab bar tucks under the header (no sliver of feed between them), with a strip behind it in case the
   header renders a fraction taller */
.feed-head { top: 55px; }
.feed-head::before { content: ""; position: absolute; left: 0; right: 0; top: -6px; height: 6px; background: var(--bg); }
/* No outline left on the logo after a click (keyboard focus still shows one) */
.brand:focus:not(:focus-visible) { outline: none; }

/* The tab description scrolls away with the feed; only the tabs stay pinned */
.feed-hint { padding: 12px 0 4px; }

/* Sub-category list: one line under the column labels, not a second one above them */
.rows:has(.sub-head) { border-top: 0; }
.sub-head { padding: 8px 6px 10px; }

/* Sub-category list: the column labels follow the chips directly */
.subchips + .rows .sub-head { margin-top: 10px; }

/* Markets: the mood at the top, whale bets, insiders, says vs does */
.mk2 { max-width: 1120px; }
.mk2-head { display: flex; justify-content: space-between; align-items: flex-end; gap: 20px; flex-wrap: wrap; padding: 16px 0 22px; }
.mk2-head h1 { margin: 2px 0 0; font: 800 clamp(34px, 4vw, 44px)/1 var(--font-display); letter-spacing: -.04em; }
.mk2-sec { margin-top: 18px; }
.mk2-card { padding: 18px 20px; border-radius: 20px; background: var(--fill-3); }
.mk2-h { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 12px; }
.mk2-h h4 { margin: 0; font-size: 16px; font-weight: 700; }
.mk2-h > span { font-size: 12px; color: var(--label-3); }
.mk-sample { padding: 3px 9px; border-radius: var(--r-pill); font-size: 11px !important; font-weight: 650; color: #ff9f0a !important; background: color-mix(in srgb, #ff9f0a 14%, transparent); }
.mood-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 12px; }
.mood { display: flex; flex-direction: column; gap: 6px; padding: 16px 18px; border-radius: 18px; background: var(--fill-3); transition: background .2s; }
.mood:hover { background: var(--fill-2); }
.mood-t { font-size: 13px; font-weight: 650; color: var(--label-2); }
.mood b { font: 800 26px/1.1 var(--font-display); letter-spacing: -.03em; }
.mood b.up { color: var(--good); } .mood b.down { color: var(--bad); }
.mood small { font-size: 12px; line-height: 1.4; color: var(--label-3); }
.mk2-loud { margin-top: 18px; }
.mk2-loud h5 { margin: 0 0 6px; font-size: 13px; font-weight: 650; color: var(--label-3); }
.mk2-take { display: flex; align-items: center; gap: 12px; padding: 10px 8px; margin: 0 -8px; border-radius: 12px; border-bottom: 1px solid var(--sep); }
.mk2-take:hover { background: var(--fill-3); }
.mk2-take .r-st { font-size: 14.5px; font-weight: 600; }
.mk2-take em { flex: none; font-style: normal; font-size: 12px; font-weight: 700; color: var(--label-2); }
.mk2-take em.up { color: var(--good); } .mk2-take em.down { color: var(--bad); }
.mk2-pair { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 14px; margin-top: 18px; }
.mk2-pair .mk2-sec { margin-top: 0; }
.mk2-what { margin: 0 0 10px; font-size: 13.5px; line-height: 1.5; color: var(--label-2); }
.mk2-row { display: flex; justify-content: space-between; gap: 12px; padding: 10px 0; border-top: 1px solid var(--sep); font-size: 14px; opacity: .7; }
.mk2-row b { font-variant-numeric: tabular-nums; }
.mk2-row b.up { color: var(--good); } .mk2-row b.down { color: var(--bad); } .mk2-row b.warn { color: #ff9f0a; }
.mk2-note { margin: 10px 0 0; font-size: 12px; color: var(--label-3); }

/* Insiders */
.ins-tabs { margin-bottom: 6px; }
.ins-row { display: flex; align-items: center; gap: 12px; padding: 10px 0; border-top: 1px solid var(--sep); }
.ins-row:hover .r-st { color: var(--accent); }
.ins-row .r-st small { margin-left: 4px; font-size: 11.5px; font-weight: 600; color: var(--label-3); }
.ins-row > b { flex: none; font: 750 15px/1 var(--font-display); font-variant-numeric: tabular-nums; }
.ins-row > b.up { color: var(--good); } .ins-row > b.down { color: var(--bad); }
.ins-cred { color: var(--accent); font-weight: 650; }

/* Whale bets */
.wb-venue { flex: none; width: 74px; padding: 4px 0; border-radius: 7px; text-align: center; font-size: 10.5px; font-weight: 700; letter-spacing: .02em; }
.wb-venue.kalshi { color: #00d395; background: color-mix(in srgb, #00d395 14%, transparent); }
.wb-venue.polymarket { color: #4c8dff; background: color-mix(in srgb, #4c8dff 14%, transparent); }
.wb-side { color: var(--label); font-weight: 650; }
.wb-row .r-st { white-space: normal; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; line-height: 1.3; }
.wb-usd { flex: none; font: 750 15px/1 var(--font-display); font-variant-numeric: tabular-nums; color: var(--label); }

/* Markets, redesigned */
.mk2-head { align-items: flex-end; padding-bottom: 16px; }
.mk2-live { display: inline-flex; align-items: center; gap: 8px; font-size: 12.5px; font-weight: 600; color: var(--label-3); }
.mk2-live i { width: 7px; height: 7px; border-radius: 50%; background: var(--good); box-shadow: 0 0 0 0 color-mix(in srgb, var(--good) 60%, transparent); animation: mk-pulse 2s infinite; }
@keyframes mk-pulse { 70% { box-shadow: 0 0 0 7px transparent; } 100% { box-shadow: 0 0 0 0 transparent; } }
.mk2-head h1 { font-size: clamp(40px, 5vw, 56px); margin-top: 6px; }
.mk2-sub { margin: 6px 0 0; font-size: 16px; color: var(--label-2); }

/* The live wire: a slow, endless strip of the latest moves; pauses under the pointer */
.wire { position: relative; overflow: hidden; margin: 4px 0 8px; padding: 12px 0; border-top: 1px solid var(--sep); border-bottom: 1px solid var(--sep); -webkit-mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent); mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent); }
.wire-track { display: flex; gap: 34px; width: max-content; animation: wire-scroll 90s linear infinite; }
.wire:hover .wire-track { animation-play-state: paused; }
@keyframes wire-scroll { to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) { .wire-track { animation: none; } .wire { overflow-x: auto; } }
.wire-item { display: inline-flex; align-items: center; gap: 8px; white-space: nowrap; font-size: 13.5px; color: var(--label-2); }
.wire-item b { color: var(--label); font-weight: 650; }
.wire-item b.up { color: var(--good); } .wire-item b.down { color: var(--bad); }
.wire-item em { font-style: normal; font-size: 12px; color: var(--label-3); }
.wire-tag { font-style: normal; padding: 2px 7px; border-radius: 6px; font-size: 10.5px; font-weight: 750; letter-spacing: .03em; text-transform: uppercase; }
.wire-tag.whale { color: #4c8dff; background: color-mix(in srgb, #4c8dff 15%, transparent); }
.wire-tag.insider { color: #ff9f0a; background: color-mix(in srgb, #ff9f0a 15%, transparent); }
.wire-tag.take { color: #bf5af2; background: color-mix(in srgb, #bf5af2 15%, transparent); }

/* The big board */
.bb-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(330px, 1fr)); gap: 14px; }
.bb-card { display: flex; flex-direction: column; gap: 10px; padding: 18px 20px; border-radius: 20px; background: var(--fill-3); transition: transform .25s var(--ease), background .25s; }
a.bb-card:hover { transform: translateY(-2px); background: var(--fill-2); }
.bb-top { display: flex; align-items: center; gap: 10px; }
.bb-topic { font-size: 12px; font-weight: 600; color: var(--label-3); }
.bb-odds { margin-left: auto; font-size: 12.5px; font-weight: 700; color: var(--label-2); font-variant-numeric: tabular-nums; }
.bb-card h5 { margin: 0; font: 700 17px/1.3 var(--font-display); letter-spacing: -.015em; color: var(--label); }
.bb-line { display: flex; align-items: baseline; gap: 8px; font-size: 12.5px; color: var(--label-3); }
.bb-line b { font: 800 22px/1 var(--font-display); color: var(--label); letter-spacing: -.02em; }
.bb-bar { height: 6px; border-radius: 3px; background: var(--bad); overflow: hidden; }
.bb-bar i { display: block; height: 100%; width: var(--w); background: var(--good); border-radius: 3px 0 0 3px; }
.bb-legend { display: flex; justify-content: space-between; font-size: 12px; font-weight: 650; }
.bb-legend .up { color: var(--good); } .bb-legend .down { color: var(--bad); }
.bb-voices { display: flex; align-items: center; gap: 10px; padding-top: 10px; border-top: 1px solid var(--sep); font-size: 12.5px; color: var(--label-2); }
.bb-faces { display: flex; }
.bb-faces > * { margin-left: -6px; } .bb-faces > :first-child { margin-left: 0; }
.bb-agree, .bb-clash { align-self: flex-start; padding: 3px 9px; border-radius: var(--r-pill); font-size: 11.5px; font-weight: 700; }
.bb-agree { color: var(--good); background: var(--good-bg); }
.bb-clash { color: #ff9f0a; background: color-mix(in srgb, #ff9f0a 14%, transparent); }

/* Mood and Says vs does side by side */
.mk2-split { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: 18px; align-items: start; margin-top: 10px; }
.mk2-split .mood-grid { grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); }
.svd-row { display: grid; gap: 4px; padding: 12px 0; border-top: 1px solid var(--sep); }
.svd-row b { font-size: 14.5px; font-weight: 700; }
.svd-row:hover b { color: var(--accent); }
.svd-says, .svd-does { display: flex; gap: 8px; font-size: 13px; color: var(--label-2); }
.svd-row i { flex: none; width: 34px; font-style: normal; font-size: 11px; font-weight: 750; text-transform: uppercase; letter-spacing: .03em; }
.svd-says i { color: #bf5af2; } .svd-does i { color: #ff9f0a; }
@media (max-width: 900px) { .mk2-split { grid-template-columns: minmax(0, 1fr); } }

/* New data pill: a quiet nudge at the top when a fresher build is ready */

/* Sentiment: one card per market */
.st-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 14px; }
.st-card { display: flex; flex-direction: column; gap: 12px; padding: 18px 20px; border-radius: 22px; background: var(--fill-3); transition: transform .25s var(--ease), background .25s; }
.st-card:hover { transform: translateY(-2px); background: var(--fill-2); }
.st-head { display: flex; align-items: center; gap: 12px; }
.st-name { display: flex; flex-direction: column; line-height: 1.25; }
.st-name b { font-size: 16px; font-weight: 700; }
.st-name small { font-size: 12px; color: var(--label-3); }
.st-glyph { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 10px; background: var(--fill-2); font: 800 12px/1 var(--font-display); color: var(--label-2); }
.st-main { display: flex; align-items: baseline; gap: 10px; }
.st-main b { font: 800 30px/1 var(--font-display); letter-spacing: -.035em; }
.st-main em { font-style: normal; font-size: 12.5px; font-weight: 700; }
.st-card .up, .st-line b.up { color: var(--good); } .st-card .down, .st-line b.down { color: var(--bad); } .st-card .mid { color: #ffd60a; }
.st-bar { display: flex; height: 8px; border-radius: 4px; overflow: hidden; background: var(--fill-2); gap: 2px; }
.st-bar i { display: block; height: 100%; width: var(--w); }
.st-bar i.up { background: var(--good); } .st-bar i.down { background: var(--bad); } .st-bar i.mid { background: #ffd60a; }
.st-lines { display: flex; flex-direction: column; gap: 7px; padding-top: 10px; border-top: 1px solid var(--sep); }
.st-line { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--label-2); }
.st-line > span { display: flex; align-items: center; gap: 8px; flex: 1; min-width: 0; }
.st-line b { font-weight: 700; font-variant-numeric: tabular-nums; }
.st-line small { min-width: 26px; text-align: right; font-size: 11.5px; color: var(--label-3); }
.st-line.money > span { color: var(--label-3); }
.st-line .bb-faces > * { margin-left: -5px; }

/* Markets, bottom half: takes as a two-column strip, says-vs-does as cards, money moves as two level cards */
.mk2-loud { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 440px), 1fr)); column-gap: 28px; margin-top: 0; }
.mk2-loud .mk2-take { margin: 0; padding: 12px 6px; border-radius: 0; }
.svd-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 12px; }
.svd-card { display: flex; flex-direction: column; gap: 6px; padding: 16px 18px; border-radius: 18px; background: var(--fill-3); transition: background .2s, transform .25s var(--ease); }
.svd-card:hover { background: var(--fill-2); transform: translateY(-2px); }
.svd-card b { font: 800 18px/1.2 var(--font-display); letter-spacing: -.02em; margin-bottom: 2px; }
.svd-card i { flex: none; width: 38px; font-style: normal; font-size: 11px; font-weight: 750; text-transform: uppercase; letter-spacing: .03em; }
.svd-card .svd-says, .svd-card .svd-does { display: flex; gap: 8px; font-size: 13px; line-height: 1.4; color: var(--label-2); }
.svd-card .svd-says i { color: #bf5af2; } .svd-card .svd-does i { color: #ff9f0a; }
.mk2-sec .mk2-pair { margin-top: 0; align-items: stretch; }
.mk2-pair > .mk2-card { display: flex; flex-direction: column; }
.mk2-pair > .mk2-card > .mk2-note:last-child { margin-top: auto; padding-top: 10px; }
.wb-usd { display: flex; flex-direction: column; align-items: flex-end; gap: 3px; }
.wb-usd small { font: 600 11px var(--font); color: var(--label-3); }

/* Public money on games */
.pm-leagues { margin-bottom: 12px; }
.pm-leagues .chip { display: inline-flex; align-items: center; gap: 6px; }
.pm-leagues .chip small { font-size: 11px; opacity: .55; }
.pm-table { border-top: 1px solid var(--sep); }
.pm-head, .pm-game { display: grid; grid-template-columns: 110px minmax(0, 1fr) 110px; gap: 18px; align-items: center; }
.pm-head { padding: 10px 6px; font-size: 11px; font-weight: 650; letter-spacing: .03em; text-transform: uppercase; color: var(--label-3); border-bottom: 1px solid var(--sep); }
.pm-cols, .pm-team { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr) minmax(0, 1fr) 54px; gap: 16px; align-items: center; }
.pm-head > span:last-child, .pm-vol { text-align: right; }
.pm-game { padding: 14px 6px; border-bottom: 1px solid var(--sep); transition: background .2s; }
.pm-game:hover { background: var(--fill-3); }
.pm-when { display: flex; flex-direction: column; gap: 4px; }
.pm-league { align-self: flex-start; padding: 2px 8px; border-radius: 6px; font-size: 11px; font-weight: 750; color: var(--label-2); background: var(--fill-2); }
.pm-when small { font-size: 12px; color: var(--label-3); }
.pm-teams { display: flex; flex-direction: column; gap: 10px; }
.pm-name { display: flex; align-items: baseline; gap: 8px; min-width: 0; }
.pm-name b { font-size: 14.5px; font-weight: 650; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pm-name small { font-size: 12px; color: var(--label-3); font-variant-numeric: tabular-nums; }
.pm-pct { display: flex; align-items: center; gap: 8px; }
.pm-pct b { width: 38px; font-size: 13.5px; font-variant-numeric: tabular-nums; }
.pm-bar { flex: 1; height: 8px; border-radius: 4px; background: var(--fill-2); overflow: hidden; }
.pm-bar i { display: block; height: 100%; width: var(--w); border-radius: 4px; background: var(--label-3); }
.pm-pct.money .pm-bar i { background: var(--good); }
.pm-diff em { font-style: normal; font-size: 13px; font-weight: 750; color: var(--good); }
.pm-vol { display: flex; flex-direction: column; gap: 3px; }
.pm-vol b { font: 750 15px/1 var(--font-display); font-variant-numeric: tabular-nums; }
.pm-vol small { font-size: 11.5px; color: var(--label-3); }
@media (max-width: 760px) {
  .pm-head { display: none; }
  .pm-game { grid-template-columns: minmax(0, 1fr); gap: 10px; }
  .pm-vol { text-align: left; }
}

/* Markets, minimal: tables with hairlines, every number kept, no boxes */
.mk2 .mk2-sec { margin-top: 34px; }
.mk2-head h1 { font-size: clamp(36px, 4.4vw, 48px); }
.mk2-sub { font-size: 15px; }
.mk2-h { margin-bottom: 8px; }
.mk2-h h4 { font-size: 17px; }
.wire { margin: 6px 0 0; padding: 10px 0; }

.sx-table, .ww-table { border-top: 1px solid var(--sep); }
.sx-row { display: grid; grid-template-columns: minmax(150px, 1.1fr) minmax(170px, 1.4fr) 52px minmax(110px, .9fr) minmax(150px, 1.1fr) minmax(150px, 1.2fr); gap: 18px; align-items: center; padding: 11px 6px; border-bottom: 1px solid var(--sep); font-size: 13.5px; color: var(--label-2); transition: background .15s; }
a.sx-row:hover { background: var(--fill-3); }
.sx-head { padding: 8px 6px; font-size: 11px; font-weight: 650; letter-spacing: .03em; text-transform: uppercase; color: var(--label-3); }
.sx-m { display: flex; align-items: center; gap: 10px; min-width: 0; }
.sx-m > span:last-child { display: flex; flex-direction: column; line-height: 1.2; min-width: 0; }
.sx-m b { font-size: 14.5px; font-weight: 650; color: var(--label); }
.sx-m small { font-size: 11.5px; color: var(--label-3); }
.sx-m .st-glyph { width: 26px; height: 26px; border-radius: 8px; font-size: 9.5px; }
.sx-lean { display: grid; grid-template-columns: auto 1fr; align-items: center; column-gap: 6px; row-gap: 5px; }
.sx-lean .st-bar { grid-column: 1 / -1; height: 5px; }
.sx-row b { font-weight: 700; font-variant-numeric: tabular-nums; }
.sx-row b.up, .sx-row em.up, .sx-row .up { color: var(--good); }
.sx-row b.down, .sx-row em.down, .sx-row .down { color: var(--bad); }
.sx-row b.mid { color: #ffd60a; }
.sx-trend em { font-style: normal; font-size: 12.5px; font-weight: 700; }
.sx-big { display: flex; align-items: center; gap: 8px; }
.sx-big .bb-faces > * { margin-left: -5px; }
.sx-money { display: flex; flex-direction: column; gap: 2px; }
.sx-money small { color: var(--label-3); font-size: 11.5px; }
.sx-none { color: var(--label-3); }

.ww-row { display: grid; grid-template-columns: minmax(0, 2.2fr) minmax(140px, 1fr) 110px minmax(120px, .8fr) 64px; gap: 18px; align-items: center; padding: 11px 6px; border-bottom: 1px solid var(--sep); font-size: 13.5px; }
a.ww-row:hover { background: var(--fill-3); }
.ww-m { display: flex; align-items: center; gap: 10px; min-width: 0; }
.ww-m b { font-size: 14px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ww-split { display: flex; flex-direction: column; gap: 4px; }
.ww-split .bb-bar { height: 5px; }
.ww-split small { display: flex; justify-content: space-between; font-size: 11.5px; font-weight: 650; }
.ww-split .up { color: var(--good); } .ww-split .down { color: var(--bad); }
.ww-tot { display: flex; flex-direction: column; align-items: flex-end; gap: 2px; }
.ww-tot b { font: 750 15px/1 var(--font-display); font-variant-numeric: tabular-nums; }
.ww-tot small, .ww-voices small { font-size: 11.5px; color: var(--label-3); }
.ww-voices { display: flex; align-items: center; gap: 8px; }
.ww-voices .bb-faces > * { margin-left: -5px; }
.ww-v .bb-agree, .ww-v .bb-clash { padding: 2px 8px; font-size: 11px; }
.ww-row .wb-venue { width: 66px; font-size: 10px; }

/* Says vs does: smaller cards */
.svd-card { padding: 13px 15px; border-radius: 14px; }
.svd-card b { font-size: 16px; }
@media (max-width: 900px) {
  .sx-head { display: none; }
  .sx-row { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); row-gap: 8px; }
  .sx-trend, .sx-col:not(.sx-big) { display: none; }
  .ww-row { grid-template-columns: minmax(0, 1fr) 100px; row-gap: 8px; }
  .ww-voices, .ww-v { display: none; }
}

/* Public money: moneyline / spread switch beside the league chips */
.pm-bar-top { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; margin-bottom: 12px; }
.pm-bar-top .pm-leagues { margin: 0; padding: 0; }
.pm-kind { flex: none; }

/* Markets dashboard: sentiment beside whale watch and says-vs-does, the money in full below */
.mk2 { max-width: 1320px; }
.mk2-dash { display: grid; grid-template-columns: minmax(0, 1.7fr) minmax(320px, 1fr); gap: 40px; align-items: start; }
.mk2-dash .mk2-sec:first-child, .mk2-side .mk2-sec:first-child { margin-top: 26px; }
.mk2-side { display: flex; flex-direction: column; }
.mk2-side .mk2-sec { margin-top: 30px; }
.mk2-main .sx-row { grid-template-columns: minmax(120px, 1fr) minmax(130px, 1.15fr) 40px minmax(84px, .75fr) minmax(118px, 1fr) minmax(104px, .95fr); gap: 14px; padding: 10px 4px; font-size: 13px; }
.mk2-main .sx-big .bb-faces > :nth-child(n + 3) { display: none; }

.wwc-list { border-top: 1px solid var(--sep); }
.wwc { display: flex; flex-direction: column; gap: 6px; padding: 11px 4px; border-bottom: 1px solid var(--sep); transition: background .15s; }
a.wwc:hover { background: var(--fill-3); }
.wwc-top { display: flex; align-items: center; gap: 8px; min-width: 0; }
.wwc-top .wb-venue { width: auto; padding: 2px 6px; font-size: 9.5px; }
.wwc-top b { flex: 1; min-width: 0; font-size: 13.5px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.wwc-tot { flex: none; font: 750 14px/1 var(--font-display); font-variant-numeric: tabular-nums; }
.wwc .bb-bar { height: 4px; }
.wwc-foot { display: flex; align-items: center; justify-content: space-between; gap: 8px; font-size: 11.5px; font-weight: 650; }
.wwc-foot .up { color: var(--good); } .wwc-foot .down { color: var(--bad); }
.wwc-voices { display: inline-flex; align-items: center; gap: 6px; font-weight: 500; color: var(--label-3); }
.wwc-voices .bb-faces > * { margin-left: -5px; }
.wwc-voices .bb-agree, .wwc-voices .bb-clash { padding: 1px 7px; font-size: 10.5px; }

.mk2-side .svd-row { padding: 11px 4px; }
.mk2-side .svd-row:first-of-type { border-top: 1px solid var(--sep); }
.mk2-side .svd-row b { font-size: 14px; }
.mk2-side .svd-says, .mk2-side .svd-does { font-size: 12.5px; }

@media (max-width: 1100px) {
  .mk2-dash { grid-template-columns: minmax(0, 1fr); gap: 0; }
}

/* Markets, readable: takeaways in sentences, tiles that say what they mean, whale and insider lines in words */
.mk2 { max-width: 1240px; }
.keys { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 12px; margin: 6px 0 8px; }
.key { display: flex; flex-direction: column; gap: 6px; padding: 16px 18px; border-radius: 18px; background: var(--fill-3); border-left: 3px solid var(--label-3); }
.key.up { border-left-color: var(--good); } .key.down { border-left-color: var(--bad); } .key.warn { border-left-color: #ff9f0a; } .key.money { border-left-color: #4c8dff; }
.key b { font-size: 15px; font-weight: 650; line-height: 1.3; color: var(--label-2); }
.key b b { color: var(--label); font-weight: 750; }
.key span { font-size: 13px; line-height: 1.45; color: var(--label-3); }

.mk3-sec { margin-top: 40px; }
.mk3-h { margin-bottom: 14px; }
.mk3-h h4 { margin: 0; font-size: 20px; font-weight: 750; letter-spacing: -.02em; }
.mk3-h p { margin: 4px 0 0; font-size: 13.5px; color: var(--label-3); }

.tiles2 { display: grid; grid-template-columns: repeat(auto-fill, minmax(270px, 1fr)); gap: 12px; }
.tile2 { display: flex; flex-direction: column; gap: 10px; padding: 16px 18px; border-radius: 18px; background: var(--fill-3); transition: background .2s, transform .25s var(--ease); }
.tile2:hover { background: var(--fill-2); transform: translateY(-2px); }
.tile2-h { display: flex; align-items: center; gap: 10px; }
.tile2-h b { font-size: 15.5px; font-weight: 700; }
.tile2-h small { margin-left: auto; font-size: 12px; color: var(--label-3); }
.tile2-h .st-glyph { width: 30px; height: 30px; font-size: 10px; }
.tile2-lean { display: flex; align-items: baseline; gap: 6px; flex-wrap: wrap; }
.tile2-lean > b { font: 800 30px/1 var(--font-display); letter-spacing: -.035em; }
.tile2-lean > span { font-size: 15px; font-weight: 650; color: var(--label-2); }
.tile2-lean em { margin-left: auto; font-style: normal; font-size: 11.5px; font-weight: 650; }
.tile2 .up, .tile2-lean em.up { color: var(--good); } .tile2 .down, .tile2-lean em.down { color: var(--bad); } .tile2 .mid { color: #ffd60a; }
.tile2 .st-bar { height: 6px; }
.sigs { display: flex; flex-wrap: wrap; gap: 6px; }
.sig { display: inline-flex; align-items: center; gap: 6px; padding: 4px 9px; border-radius: var(--r-pill); background: var(--fill-2); font-size: 11.5px; color: var(--label-3); }
.sig i { width: 6px; height: 6px; border-radius: 50%; background: var(--label-3); }
.sig b { font-weight: 650; color: var(--label-2); }
.sig.up i { background: var(--good); } .sig.down i { background: var(--bad); } .sig.mid i { background: #ffd60a; }

.mk3-pair { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 480px), 1fr)); gap: 0 40px; }
.wl-list { border-top: 1px solid var(--sep); }
.wl { display: flex; align-items: center; gap: 14px; padding: 12px 4px; border-bottom: 1px solid var(--sep); transition: background .15s; }
a.wl:hover { background: var(--fill-3); }
.wl-amt { flex: none; width: 66px; font: 800 16px/1 var(--font-display); letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.wl-amt.sv { font-size: 14px; }
.wl-txt { display: flex; flex-direction: column; gap: 3px; flex: 1; min-width: 0; }
.wl-txt b { font-size: 14px; font-weight: 650; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.wl-txt small { font-size: 12.5px; color: var(--label-3); }
.wl-txt .up { color: var(--good); font-weight: 650; } .wl-txt .down { color: var(--bad); font-weight: 650; }
.wl .bb-agree, .wl .bb-clash { flex: none; }

/* Markets as an app: watchlist · story · money moving */
.mk4 { max-width: 1380px; }
.mk4-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 20px; flex-wrap: wrap; padding: 14px 0 18px; border-bottom: 1px solid var(--sep); }
.mk4-head h1 { margin: 0 0 6px; font: 800 clamp(32px, 3.6vw, 40px)/1 var(--font-display); letter-spacing: -.04em; }
.mk4-grid { display: grid; grid-template-columns: 280px minmax(0, 1fr) 340px; gap: 0; align-items: start; }
.mk4-watch, .mk4-feed { position: sticky; top: 72px; max-height: calc(100vh - 84px); overflow-y: auto; overscroll-behavior: contain; scrollbar-width: none; padding: 18px 0 24px; }
.mk4-watch::-webkit-scrollbar, .mk4-feed::-webkit-scrollbar { display: none; }
.mk4-watch { padding-right: 18px; border-right: 1px solid var(--sep); }
.mk4-feed { padding-left: 22px; border-left: 1px solid var(--sep); }
.mk4-main { padding: 18px 28px 40px; min-width: 0; }
.mk4 h5 { display: flex; align-items: baseline; gap: 8px; margin: 0 0 10px; font-size: 13px; font-weight: 700; color: var(--label); }
.mk4 h5 small { font-size: 12px; font-weight: 500; color: var(--label-3); }

/* Watchlist */
.wr-list { display: flex; flex-direction: column; }
.wr { display: flex; align-items: center; gap: 10px; width: 100%; padding: 9px 8px; border: 0; border-radius: 12px; background: none; color: inherit; font: inherit; text-align: left; cursor: pointer; transition: background .15s; }
.wr:hover { background: var(--fill-3); }
.wr.on { background: var(--fill-2); }
.wr .st-glyph { width: 28px; height: 28px; font-size: 9.5px; flex: none; }
.wr-n { display: flex; flex-direction: column; flex: 1; min-width: 0; line-height: 1.2; }
.wr-n b { font-size: 14px; font-weight: 650; }
.wr-n small { font-size: 11.5px; color: var(--label-3); }
.wr-pill { flex: none; display: inline-flex; align-items: baseline; gap: 4px; min-width: 76px; justify-content: center; padding: 5px 9px; border-radius: 8px; font: 750 13.5px/1 var(--font-display); font-variant-numeric: tabular-nums; }
.wr-pill small { font: 600 10.5px var(--font); opacity: .85; }
.wr-pill.up { color: #fff; background: color-mix(in srgb, var(--good) 80%, #000); }
.wr-pill.down { color: #fff; background: color-mix(in srgb, var(--bad) 85%, #000); }
.wr-pill.mid { color: #1c1c1e; background: #ffd60a; }

/* Overview */
.md-sec { margin-top: 30px; }
.md-sec.first { margin-top: 0; }
.ov-key { display: flex; gap: 12px; padding: 12px 0; border-bottom: 1px solid var(--sep); }
.ov-key:first-of-type { border-top: 1px solid var(--sep); }
.ov-key i { flex: none; width: 8px; height: 8px; margin-top: 6px; border-radius: 50%; background: var(--label-3); }
.ov-key.up i { background: var(--good); } .ov-key.down i { background: var(--bad); } .ov-key.warn i { background: #ff9f0a; } .ov-key.money i { background: #4c8dff; }
.ov-key > span { display: flex; flex-direction: column; gap: 3px; }
.ov-key b { font-size: 15px; font-weight: 600; color: var(--label-2); }
.ov-key b b { color: var(--label); font-weight: 750; }
.ov-key small { font-size: 13px; color: var(--label-3); }

/* A market up close */
.md-back { display: inline-flex; align-items: center; gap: 4px; margin: 0 0 12px -6px; padding: 4px 10px 4px 4px; border: 0; border-radius: var(--r-pill); background: none; color: var(--accent); font: 600 13.5px var(--font); cursor: pointer; }
.md-back:hover { background: var(--fill-3); }
.md-back svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.md-h { display: flex; align-items: center; gap: 14px; }
.md-h h2 { margin: 0; font: 800 28px/1.1 var(--font-display); letter-spacing: -.03em; }
.md-h small { font-size: 13px; color: var(--label-3); }
.md-h .st-glyph.big { width: 40px; height: 40px; font-size: 13px; }
.md-open { margin-left: auto; font-size: 13.5px; font-weight: 600; color: var(--accent); }
.md-lean { display: flex; align-items: baseline; gap: 12px; margin: 18px 0 10px; }
.md-lean b { font: 800 44px/1 var(--font-display); letter-spacing: -.04em; }
.md-lean em { font-style: normal; font-size: 13px; font-weight: 650; }
.md .up, .md-lean em.up { color: var(--good); } .md .down, .md-lean em.down { color: var(--bad); } .md .mid { color: #ffd60a; }
.md > .st-bar { height: 8px; }
.lb { display: grid; grid-template-columns: 150px minmax(0, 1fr) 130px; gap: 14px; align-items: center; padding: 9px 0; border-bottom: 1px solid var(--sep); font-size: 13.5px; }
.lb-l { display: flex; align-items: baseline; gap: 6px; color: var(--label-2); }
.lb-l small { font-size: 11.5px; color: var(--label-3); }
.lb-bar { height: 6px; border-radius: 3px; background: var(--fill-2); overflow: hidden; }
.lb-bar i { display: block; height: 100%; width: var(--w); border-radius: 3px; background: var(--label-3); }
.lb-bar i.up { background: var(--good); } .lb-bar i.down { background: var(--bad); } .lb-bar i.mid { background: #ffd60a; }
.lb > b { text-align: right; font-weight: 700; font-variant-numeric: tabular-nums; }
.lb-none { grid-column: 2 / -1; color: var(--label-3); }
.md-call, .md-money { display: flex; align-items: center; gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--sep); }
a.md-call:hover .r-st, a.md-money:hover .r-st { color: var(--accent); }
.md-call em { flex: none; font-style: normal; font-size: 12px; font-weight: 700; }
.md-money b { flex: none; font: 750 14.5px/1 var(--font-display); font-variant-numeric: tabular-nums; }
.wb-venue.ins { color: #ff9f0a; background: color-mix(in srgb, #ff9f0a 14%, transparent); }
.md-money .wb-venue { width: 70px; }

/* Money moving */
.mf-h { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 8px; }
.mf-h h5 { margin: 0; }
.mf-h .pk-sort button { height: 24px; padding: 0 9px; font-size: 11.5px; }
.mf-list { border-top: 1px solid var(--sep); }
.mf-item { display: flex; align-items: center; gap: 10px; padding: 10px 0; border-bottom: 1px solid var(--sep); }
a.mf-item:hover .r-st { color: var(--accent); }
.mf-item .r-st { font-size: 13px; font-weight: 600; white-space: normal; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; line-height: 1.3; }
.mf-item .r-sub { font-size: 11.5px; }
.mf-tag { flex: none; width: 54px; padding: 3px 0; border-radius: 6px; text-align: center; font-size: 9.5px; font-weight: 750; letter-spacing: .03em; text-transform: uppercase; }
.mf-tag.whale { color: #4c8dff; background: color-mix(in srgb, #4c8dff 15%, transparent); }
.mf-tag.insider { color: #ff9f0a; background: color-mix(in srgb, #ff9f0a 15%, transparent); }
.mf-item > b { flex: none; font: 750 14px/1 var(--font-display); font-variant-numeric: tabular-nums; }
.mf-item > b.up { color: var(--good); } .mf-item > b.down { color: var(--bad); }

@media (max-width: 1240px) {
  .mk4-grid { grid-template-columns: 260px minmax(0, 1fr); }
  .mk4-feed { grid-column: 1 / -1; position: static; max-height: none; padding-left: 0; border-left: 0; border-top: 1px solid var(--sep); }
}
@media (max-width: 800px) {
  .mk4-grid { grid-template-columns: minmax(0, 1fr); }
  .mk4-watch { position: static; max-height: none; padding-right: 0; border-right: 0; }
  .mk4-main { padding: 18px 0; }
}

/* The face-off: two sides of one market, in their own words */
.fo { padding: 22px 24px 18px; border-radius: 22px; background: linear-gradient(180deg, var(--fill-3), transparent 85%); border: 1px solid var(--sep); }
.fo-chips { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 14px; }
.fo-chips button { height: 28px; padding: 0 12px; border: 0; border-radius: var(--r-pill); background: var(--fill-3); color: var(--label-2); font: 600 12.5px var(--font); cursor: pointer; }
.fo-chips button:hover { color: var(--label); }
.fo-chips button.on { background: var(--label); color: var(--bg); }
.fo h3 { margin: 0 0 12px; font: 800 clamp(22px, 2.4vw, 30px)/1.15 var(--font-display); letter-spacing: -.03em; }
.fo-bar { display: flex; gap: 3px; height: 10px; border-radius: 5px; overflow: hidden; }
.fo-bar i { display: block; height: 100%; width: var(--w); }
.fo-bar i.up { background: var(--good); } .fo-bar i.down { background: var(--bad); } .fo-bar i.mid { background: #ffd60a; }
.fo-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; margin-top: 16px; }
.fo-side-h { display: flex; align-items: baseline; gap: 8px; padding-bottom: 8px; }
.fo-side-h b { font: 800 30px/1 var(--font-display); letter-spacing: -.03em; }
.fo-side-h span { font-size: 15px; font-weight: 700; }
.fo-side-h small { margin-left: auto; font-size: 12px; color: var(--label-3); }
.fo-side.up .fo-side-h b, .fo-side.up .fo-side-h span { color: var(--good); }
.fo-side.down .fo-side-h b, .fo-side.down .fo-side-h span { color: var(--bad); }
.fo-side.mid .fo-side-h b, .fo-side.mid .fo-side-h span { color: #ffd60a; }
.fo-rec { margin-bottom: 8px; padding: 7px 10px; border-radius: 10px; background: var(--fill-3); font-size: 12px; color: var(--label-3); }
.fo-rec b { color: var(--label); }
.fo-q { display: block; padding: 11px 0; border-top: 1px solid var(--sep); }
.fo-q-who { display: flex; align-items: center; gap: 7px; min-width: 0; }
.fo-q-who b { font-size: 13px; font-weight: 650; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fo-q-who small { font-size: 11.5px; color: var(--label-3); }
.fo-q-who em { margin-left: auto; flex: none; font-style: normal; font-size: 11.5px; color: var(--label-3); }
.fo-q q { display: block; margin-top: 6px; font-size: 14px; line-height: 1.45; color: var(--label); quotes: "“" "”"; }
.fo-q:hover q { color: var(--accent); }
.fo-side.up .fo-q { border-left: 0; }
.fo-empty { margin: 8px 0 0; font-size: 13px; color: var(--label-3); }
.fo-foot { display: flex; flex-wrap: wrap; gap: 8px 18px; margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--sep); font-size: 13px; color: var(--label-3); }
.fo-foot b { font-weight: 700; } .fo-foot b.up { color: var(--good); } .fo-foot b.down { color: var(--bad); } .fo-foot b.mid { color: #ffd60a; }
.md .fo { margin-top: 26px; }
@media (max-width: 700px) { .fo-cols { grid-template-columns: 1fr; } }

/* A market up close: tabs under the face-off */
.md .fo { margin-top: 18px; }
.md-tabs { display: flex; gap: 4px; margin: 22px 0 6px; border-bottom: 1px solid var(--sep); overflow-x: auto; scrollbar-width: none; }
.md-tabs button { position: relative; flex: none; display: inline-flex; align-items: center; gap: 6px; padding: 10px 12px 12px; border: 0; background: none; color: var(--label-3); font: 650 14px var(--font); cursor: pointer; }
.md-tabs button small { font-size: 11.5px; font-weight: 600; opacity: .7; }
.md-tabs button:hover { color: var(--label-2); }
.md-tabs button.on { color: var(--label); }
.md-tabs button.on::after { content: ""; position: absolute; left: 10px; right: 10px; bottom: -1px; height: 2px; border-radius: 2px; background: var(--label); }
.md-pane { min-height: 200px; }
.side-tag { flex: none; padding: 3px 9px; border-radius: var(--r-pill); font-style: normal; font-size: 11.5px; font-weight: 700; background: var(--fill-3); }
.side-tag.up { color: var(--good); background: var(--good-bg); } .side-tag.down { color: var(--bad); background: var(--bad-bg); } .side-tag.mid { color: #ffd60a; background: color-mix(in srgb, #ffd60a 14%, transparent); }
.mp { display: flex; align-items: center; gap: 12px; padding: 11px 2px; border-bottom: 1px solid var(--sep); }
.mp:hover .r-st { color: var(--accent); }
.mp .r-st { font-size: 14.5px; font-weight: 650; }
.mp-cred { flex: none; display: flex; flex-direction: column; align-items: center; min-width: 44px; font: 800 17px/1 var(--font-display); color: var(--label-2); }
.mp-cred small { font: 600 10px var(--font); color: var(--label-3); margin-top: 2px; }
.mp-cred.hi { color: var(--good); } .mp-cred.lo { color: var(--bad); }
.mfeed { display: flex; gap: 12px; padding: 13px 2px; border-bottom: 1px solid var(--sep); }
.mfeed-b { display: flex; flex-direction: column; gap: 5px; min-width: 0; flex: 1; }
.mfeed-who { display: flex; align-items: center; gap: 6px; min-width: 0; }
.mfeed-who b { font-size: 13.5px; font-weight: 650; }
.mfeed-who small { font-size: 12px; color: var(--label-3); }
.mfeed-who .side-tag { margin-left: auto; }
.mfeed q { font-size: 14.5px; line-height: 1.45; color: var(--label); quotes: "“" "”"; }
.mfeed:hover q { color: var(--accent); }
.md-sum { display: flex; flex-wrap: wrap; gap: 6px 18px; padding: 12px 2px; border-bottom: 1px solid var(--sep); font-size: 14px; color: var(--label-2); }
.md-sum b { font: 750 16px var(--font-display); }
.md-sum b.up { color: var(--good); } .md-sum b.down { color: var(--bad); } .md-sum b.mid { color: #ffd60a; }
.md-money .side-tag { margin-left: auto; }
.wr.ov-row { margin-bottom: 4px; }
.wr.ov-row .st-glyph { font-size: 13px; }

/* Markets: two columns now; the money lives in the feed */
.mk4 { max-width: 1240px; }
.mk4-grid { grid-template-columns: 290px minmax(0, 1fr); }
.mk4-main { padding-right: 0; }
.mk-search { display: flex; align-items: center; gap: 8px; height: 38px; margin-bottom: 12px; padding: 0 12px; border-radius: 11px; background: var(--fill-3); color: var(--label-3); }
.mk-search svg { width: 15px; height: 15px; fill: currentColor; flex: none; }
.mk-search input { flex: 1; min-width: 0; border: 0; outline: none; background: transparent; color: var(--label); font: 14px var(--font); }
.mk-search:focus-within { box-shadow: 0 0 0 2px color-mix(in srgb, var(--accent) 55%, transparent); }
.wr[hidden] { display: none; }
.wr-more h6 { margin: 14px 8px 6px; font-size: 11px; font-weight: 650; letter-spacing: .03em; text-transform: uppercase; color: var(--label-3); }
.mfeed.money { align-items: center; }
.mfeed.money .mf-tag { width: 58px; }
.mfeed-t { font-size: 13.5px; color: var(--label-2); }
.mfeed-who b.up { color: var(--good); } .mfeed-who b.down { color: var(--bad); }

/* The face-off, calmer: plain names, quieter quotes, the record as a line */
.fo { background: var(--fill-3); border: 0; padding: 22px 24px 16px; }
.fo h3 { font-size: clamp(22px, 2.2vw, 28px); }
.md .fo-side.up, .md .fo-side.down, .md .fo-side.mid, .fo-side { color: var(--label); }
.fo-side-h { border-bottom: 1px solid var(--sep); margin-bottom: 2px; }
.fo-side-h b { font-size: 26px; }
.fo-rec { margin: 8px 0 4px; padding: 0; background: none; font-size: 12px; }
.fo-q { padding: 10px 0; border-top: 0; border-bottom: 1px solid var(--sep); }
.fo-q:last-child { border-bottom: 0; }
.fo-q-who b { color: var(--label); font-size: 12.5px; }
.fo-q q { margin-top: 4px; font-size: 13.5px; line-height: 1.45; color: var(--label-2); display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.fo-q:hover q { color: var(--label); }

/* Face-off, quieter: share and side, one line of facts, the loudest voice, the faces behind it */
.fo-side-h { border-bottom: 0; padding-bottom: 2px; margin: 0; }
.fo-side-h b { font-size: 28px; }
.fo-meta { display: flex; flex-wrap: wrap; gap: 4px 12px; font-size: 12.5px; color: var(--label-3); }
.fo-meta b { color: var(--label-2); font-weight: 650; }
.fo-lead { display: block; margin-top: 14px; padding: 14px 16px; border-radius: 16px; background: var(--fill-3); transition: background .15s; }
.fo-lead:hover { background: var(--fill-2); }
.fo-lead q { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; font-size: 14.5px; line-height: 1.45; color: var(--label); quotes: "“" "”"; }
.fo-lead .fo-q-who { margin-top: 10px; }
.fo-lead .fo-q-who small { font-size: 12px; }
.fo-crowd { display: flex; align-items: center; gap: 8px; margin-top: 10px; font-size: 12px; color: var(--label-3); }
.fo-crowd .bb-faces { display: flex; }
.fo-crowd .bb-faces > * { margin-left: -6px; border-radius: 50%; box-shadow: 0 0 0 2px var(--bg); }
.fo-crowd .bb-faces > *:first-child { margin-left: 0; }

/* Mood against price */
.sc { margin-top: 18px; padding: 18px 20px 12px; border-radius: 22px; border: 1px solid var(--sep); }
.sc-h { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 22px; margin-bottom: 12px; }
.sc-h > span { display: inline-flex; align-items: baseline; gap: 7px; }
.sc-h b { font: 750 18px/1 var(--font-display); letter-spacing: -.02em; }
.sc-h b.up { color: var(--good); } .sc-h b.down { color: var(--bad); }
.sc-h em { font-style: normal; font-size: 13px; font-weight: 650; } .sc-h em.up { color: var(--good); } .sc-h em.down { color: var(--bad); }
.sc-h small { font-size: 12px; color: var(--label-3); }
.sc-key { margin-left: auto; gap: 6px !important; align-items: center !important; font-size: 12px; color: var(--label-3); }
.sc-key i { display: inline-block; width: 9px; height: 9px; border-radius: 3px; margin-left: 8px; }
.sc-key i:first-child { margin-left: 0; }
.sc-key .k-up { background: var(--good); } .sc-key .k-down { background: var(--bad); }
.sc-key .k-line { width: 14px; height: 2px; border-radius: 1px; background: var(--label); }
.sc-svg { display: block; width: 100%; height: 160px; overflow: visible; }
.sc-svg .mid { stroke: var(--sep); stroke-width: 1; vector-effect: non-scaling-stroke; }
.sc-svg .b-up { fill: var(--good); opacity: .55; } .sc-svg .b-down { fill: var(--bad); opacity: .55; }
.sc-svg rect:hover { opacity: 1; }
.sc-svg .p-line { fill: none; stroke: var(--label); stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; }
.sc-x { display: flex; justify-content: space-between; margin-top: 8px; font-size: 11.5px; color: var(--label-3); }

/* A market's feed: filters, day headings, one clean row per item */
.fd-filters { display: flex; gap: 6px; flex-wrap: wrap; padding: 14px 0 6px; }
.fd-filters button { display: inline-flex; align-items: center; gap: 6px; height: 30px; padding: 0 13px; border: 0; border-radius: var(--r-pill); background: var(--fill-3); color: var(--label-2); font: 600 13px var(--font); cursor: pointer; }
.fd-filters button small { font-size: 11.5px; opacity: .6; }
.fd-filters button:hover { color: var(--label); }
.fd-filters button.on { background: var(--label); color: var(--bg); }
.fd-day { margin: 18px 0 2px; font: 700 12px var(--font); letter-spacing: .02em; text-transform: uppercase; color: var(--label-3); }
.fd-row[hidden], .fd-day[hidden] { display: none; }
.fd { display: flex; gap: 12px; padding: 12px 10px; margin: 0 -10px; border-radius: 14px; transition: background .15s; }
.fd:hover { background: var(--fill-3); }
.fd-b { display: flex; flex-direction: column; gap: 4px; min-width: 0; flex: 1; }
.fd-who { display: flex; align-items: center; gap: 7px; min-width: 0; }
.fd-who b { font-size: 14px; font-weight: 650; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fd-who small { font-size: 12px; color: var(--label-3); }
.fd-who time { margin-left: auto; flex: none; font-size: 12px; color: var(--label-3); }
.fd-side { flex: none; font-size: 12px; font-weight: 700; }
.fd-side.up { color: var(--good); } .fd-side.down { color: var(--bad); } .fd-side.mid { color: #ffd60a; }
.fd-side::before { content: "·"; margin-right: 6px; color: var(--label-3); font-weight: 400; }
.fd-q { font-size: 14.5px; line-height: 1.45; color: var(--label-2); display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.fd-money .fd-q { font-size: 13px; color: var(--label-3); -webkit-line-clamp: 1; }
.fd-ic { flex: none; display: grid; place-items: center; width: 32px; height: 32px; border-radius: 50%; font: 800 11px var(--font); }
.fd-ic.whale { background: color-mix(in srgb, #64d2ff 18%, transparent); color: #64d2ff; font-size: 15px; }
.fd-ic.insider { background: color-mix(in srgb, #bf5af2 18%, transparent); color: #bf5af2; font-size: 9.5px; }

/* Mood against price, take two: price panel on top, a slim mood strip under it */
.sc { padding: 18px 20px 14px; }
.sc-h { gap: 6px 28px; margin-bottom: 10px; }
.sc-stat { display: flex !important; flex-direction: column; align-items: flex-start !important; gap: 4px !important; }
.sc-stat small { font-size: 11.5px; font-weight: 600; color: var(--label-3); }
.sc-stat b { font: 750 22px/1 var(--font-display); letter-spacing: -.02em; }
.sc-stat b.up { color: var(--good); } .sc-stat b.down { color: var(--bad); } .sc-stat b.mid { color: #ffd60a; }
.sc-stat em { font-size: 12.5px; }
.sc-price { display: block; width: 100%; height: 120px; overflow: visible; color: var(--good); }
.sc-price.down { color: var(--bad); }
.sc-price .p-line { stroke: currentColor; stroke-width: 2; }
.sc-mood { position: relative; margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--sep); }
.sc-lab { position: absolute; top: 10px; left: 0; font-size: 11px; font-weight: 600; color: var(--label-3); }
.sc-bars { display: block; width: 100%; overflow: visible; }
.sc-bars .mid { stroke: var(--sep); stroke-width: 1; vector-effect: non-scaling-stroke; }
.sc-bars .b-up { fill: var(--good); } .sc-bars .b-down { fill: var(--bad); }
.sc-bars rect:hover { opacity: 1 !important; }
.sc-x { align-items: center; }
.sc-x .sc-key { margin: 0; display: inline-flex; align-items: center; gap: 6px; }
.sc-mood { display: grid; grid-template-columns: 44px 1fr; align-items: center; }
.sc-lab { position: static; }
.sc-bars .b-mid, .sc-key .k-mid { fill: #ffd60a; background: #ffd60a; }

/* Biggest wins: topic filters and prediction rows */
.board-cats { padding: 4px 0 2px; }
.rx-pay { display: flex; flex-direction: column; align-items: flex-end; gap: 4px; min-width: 76px; }
.rx-pay small { font-size: 11px; color: var(--label-3); white-space: nowrap; }
.rx-win.big .rx-pay b { font-size: 22px; }

/* The chart, interactive: shared rows, a hover line and readout, the money lane */
.sc-plot { position: relative; cursor: crosshair; }
.sc-row { margin-top: 10px; padding-top: 8px; border-top: 1px solid var(--sep); }
.sc-row .sc-lab { display: block; position: static; margin-bottom: 6px; font-size: 11px; font-weight: 600; color: var(--label-3); }
.sc-lane { position: relative; height: 26px; }
.sc-lane::before { content: ""; position: absolute; left: 0; right: 0; top: 50%; border-top: 1px dashed var(--sep); }
.sc-dot { position: absolute; top: 50%; width: var(--d); height: var(--d); margin: calc(var(--d) / -2) 0 0 calc(var(--d) / -2); border-radius: 50%; transition: transform .12s; }
.sc-dot.whale { background: #64d2ff; }
.sc-dot.insider { background: #bf5af2; border-radius: 4px; }
.sc-dot.up { box-shadow: 0 0 0 2px var(--bg), 0 0 0 4px var(--good); }
.sc-dot.down { box-shadow: 0 0 0 2px var(--bg), 0 0 0 4px var(--bad); }
.sc-dot:hover { transform: scale(1.35); z-index: 2; }
.sc-key .k-whale { background: #64d2ff; border-radius: 50%; }
.sc-key .k-insider { background: #bf5af2; }
.sc-cross { position: absolute; top: 0; bottom: 0; width: 1px; background: var(--label-3); pointer-events: none; }
.sc-pt { position: absolute; width: 10px; height: 10px; margin: -5px 0 0 -5px; border-radius: 50%; background: var(--label); box-shadow: 0 0 0 3px var(--bg); pointer-events: none; }
.sc-tip { position: absolute; top: -8px; transform: translateY(-100%); display: flex; align-items: baseline; gap: 10px; padding: 7px 11px; border-radius: 10px; background: var(--surface-2); border: 1px solid var(--sep); box-shadow: 0 6px 20px rgba(0, 0, 0, .35); font-size: 12.5px; color: var(--label-2); white-space: nowrap; max-width: 100%; overflow: hidden; text-overflow: ellipsis; pointer-events: none; z-index: 3; }
.sc-tip b { color: var(--label); font-weight: 650; }
.sc-tip b small { margin-left: 5px; font-weight: 500; color: var(--label-3); font-size: 11.5px; }
.sc-tip span { color: var(--label); font-weight: 650; font-variant-numeric: tabular-nums; overflow: hidden; text-overflow: ellipsis; }
.sc-tip em { font-style: normal; color: var(--label-3); }
.sc-cross[hidden], .sc-pt[hidden], .sc-tip[hidden] { display: none; }

/* Face-off sides open a breakdown */
.fo-pick { display: block; width: 100%; padding: 8px 10px; margin: -8px -10px 0; width: calc(100% + 20px); border: 0; border-radius: 14px; background: none; color: inherit; font: inherit; text-align: left; cursor: pointer; transition: background .15s; }
.fo-pick:hover, .fo-side.open .fo-pick { background: var(--fill-3); }
.fo-pick .fo-side-h { display: flex; }
.fo-pick .fo-side-h em { margin-left: auto; align-self: center; font-style: normal; font-size: 12.5px; font-weight: 600; color: var(--label-3); }
.fo-pick:hover .fo-side-h em { color: var(--label); }
.fo-pick .fo-meta { display: flex; margin-top: 2px; }
.fo-break { margin-top: 20px; padding-top: 18px; border-top: 1px solid var(--sep); }
.fo-stats { display: flex; flex-wrap: wrap; gap: 10px; }
.fo-stats span { display: flex; flex-direction: column; gap: 4px; flex: 1 1 120px; padding: 12px 14px; border-radius: 14px; background: var(--fill-3); }
.fo-stats b { font: 750 20px/1 var(--font-display); letter-spacing: -.02em; }
.fo-break.up .fo-stats b { color: var(--good); } .fo-break.down .fo-stats b { color: var(--bad); } .fo-break.mid .fo-stats b { color: #ffd60a; }
.fo-stats small { font-size: 11.5px; color: var(--label-3); }
.fo-plist { margin-top: 10px; max-height: 520px; overflow-y: auto; scrollbar-width: thin; }
.fo-p { display: grid; grid-template-columns: 32px minmax(140px, 220px) 1fr 48px; align-items: center; gap: 12px; padding: 10px 8px; border-radius: 12px; }
.fo-p:hover { background: var(--fill-3); }
.fo-p-who { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.fo-p-who b { font-size: 14px; font-weight: 650; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fo-p-who small { font-size: 12px; color: var(--label-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fo-p-q { font-size: 13.5px; line-height: 1.4; color: var(--label-2); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
@media (max-width: 700px) { .fo-p { grid-template-columns: 32px 1fr 44px; } .fo-p-q { grid-column: 2 / 4; } }

/* Whale bets on the timeline: a whale, on the side's color, with a guide up through the chart */
.sc-lane { height: 44px; }
.sc-dot.whale { display: grid; place-items: center; background: var(--surface-2); font-size: calc(var(--d) * .58); line-height: 1; text-decoration: none; z-index: 1; }
.sc-dot.whale.up { box-shadow: 0 0 0 2px var(--good), 0 0 14px color-mix(in srgb, var(--good) 45%, transparent); }
.sc-dot.whale.down { box-shadow: 0 0 0 2px var(--bad), 0 0 14px color-mix(in srgb, var(--bad) 45%, transparent); }
.sc-dot.whale.mid { box-shadow: 0 0 0 2px #ffd60a, 0 0 14px color-mix(in srgb, #ffd60a 45%, transparent); }
.sc-guide { position: absolute; top: 0; bottom: 22px; width: 0; border-left: 1px dashed color-mix(in srgb, #64d2ff 55%, transparent); pointer-events: none; }
.sc-key .k-whale { width: auto; height: auto; background: none; font-style: normal; font-size: 13px; }
.fd-ic.whale { font-size: 17px; }

/* Markets overview, redone: full-contrast text, pulse tiles, headline cards, whale cards, a clean money feed */
.ov2 { display: flex; flex-direction: column; gap: 34px; }
.ov2-sec h3 { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; margin: 0 0 14px; font: 750 20px/1.2 var(--font-display); letter-spacing: -.02em; color: var(--label); }
.ov2-sec h3 small { font: 500 13px var(--font); letter-spacing: 0; color: var(--label-2); }

.pulse-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 10px; }
.pulse { display: flex; flex-direction: column; gap: 10px; padding: 14px 14px 12px; border: 1px solid var(--sep); border-radius: 18px; background: var(--surface); color: var(--label); font: inherit; text-align: left; cursor: pointer; transition: transform .15s, border-color .15s, background .15s; }
.pulse:hover { transform: translateY(-2px); background: var(--surface-2); }
.pulse.up { --c: var(--good); } .pulse.down { --c: var(--bad); } .pulse.mid { --c: #ffd60a; }
.pulse:hover { border-color: color-mix(in srgb, var(--c, var(--label)) 50%, transparent); }
.pulse-h { display: flex; align-items: center; gap: 8px; min-width: 0; }
.pulse-h b { font-size: 14px; font-weight: 650; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pulse-v { display: flex; align-items: baseline; gap: 6px; }
.pulse-v b { font: 800 28px/1 var(--font-display); letter-spacing: -.03em; color: var(--c, var(--label)); }
.pulse-v span { font-size: 13px; font-weight: 650; color: var(--c, var(--label)); }
.pulse-sp { display: block; width: 100%; height: 34px; overflow: visible; }
.pulse-sp path { fill: none; stroke: var(--c, var(--label)); stroke-width: 2; stroke-linejoin: round; }
.pulse-sp .mid { stroke: var(--sep); stroke-dasharray: 3 3; vector-effect: non-scaling-stroke; }
.pulse-f { display: flex; justify-content: space-between; gap: 6px; font-size: 12px; color: var(--label-2); }
.pulse-f em { font-style: normal; font-weight: 650; }
.pulse-f em.up { color: var(--good); } .pulse-f em.down { color: var(--bad); }

.hl2-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 10px; }
.hl2 { display: flex; gap: 14px; align-items: flex-start; padding: 16px; border-radius: 18px; background: var(--surface); border: 1px solid var(--sep); }
.hl2-ic { flex: none; display: grid; place-items: center; width: 42px; height: 42px; border-radius: 13px; font-size: 21px; background: var(--fill-3); }
.hl2.up .hl2-ic { background: var(--good-bg); } .hl2.down .hl2-ic { background: var(--bad-bg); }
.hl2.warn .hl2-ic { background: color-mix(in srgb, #ffd60a 16%, transparent); } .hl2.money .hl2-ic { background: color-mix(in srgb, #64d2ff 16%, transparent); }
.hl2-t { display: flex; flex-direction: column; gap: 5px; min-width: 0; }
.hl2-t > b { font-size: 15px; font-weight: 600; line-height: 1.3; color: var(--label); }
.hl2-t > b b { font-weight: 800; }
.hl2-t > span { font-size: 13.5px; line-height: 1.45; color: var(--label-2); }

.ww-list { display: flex; flex-direction: column; gap: 8px; }
.ww { display: flex; align-items: center; gap: 14px; padding: 14px 16px; border-radius: 18px; background: var(--surface); border: 1px solid var(--sep); transition: background .15s; }
.ww:hover { background: var(--surface-2); }
.ww-ic { flex: none; display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; font-size: 21px; background: color-mix(in srgb, #64d2ff 16%, transparent); }
.ww-b { display: flex; flex-direction: column; gap: 7px; flex: 1; min-width: 0; }
.ww-b > b { font-size: 15px; font-weight: 650; color: var(--label); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ww-bar { display: block; height: 6px; border-radius: 3px; background: var(--bad); overflow: hidden; }
.ww-bar i { display: block; height: 100%; width: var(--w); background: var(--good); border-right: 2px solid var(--surface); }
.ww-sub { display: flex; flex-wrap: wrap; gap: 4px 12px; font-size: 12.5px; color: var(--label-2); }
.ww-sub .up { color: var(--good); font-weight: 650; } .ww-sub .down { color: var(--bad); font-weight: 650; }
.ww-r { flex: none; display: flex; flex-direction: column; align-items: flex-end; gap: 6px; }
.ww-r > b { font: 800 22px/1 var(--font-display); letter-spacing: -.02em; color: var(--label); }
.ww-tag { padding: 3px 9px; border-radius: var(--r-pill); font-size: 11.5px; font-weight: 700; }
.ww-tag.ok { color: var(--good); background: var(--good-bg); } .ww-tag.no { color: var(--bad); background: var(--bad-bg); }

.svd-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 10px; }
.svd2 { display: flex; flex-direction: column; gap: 10px; padding: 14px 16px; border-radius: 18px; background: var(--surface); border: 1px solid var(--sep); transition: background .15s; }
.svd2:hover { background: var(--surface-2); }
.svd2-h { display: flex; align-items: center; gap: 9px; }
.svd2-h b { font-size: 15px; font-weight: 700; color: var(--label); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.svd2-row { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; padding-top: 9px; border-top: 1px solid var(--sep); }
.svd2-row small { font-size: 12.5px; color: var(--label-2); }
.svd2-row b { font-size: 14px; font-weight: 750; text-align: right; }
.svd2-row b.up { color: var(--good); } .svd2-row b.down { color: var(--bad); }

.mf2-h { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 16px; margin-bottom: 8px; }
.mf2-h h3 { margin: 0; }
.mf2-h .fd-filters { padding: 0; }
.mf2-list { display: flex; flex-direction: column; }
.mf2-item { display: flex; align-items: center; gap: 12px; padding: 12px 10px; margin: 0 -10px; border-radius: 14px; transition: background .15s; }
.mf2-item:hover { background: var(--fill-3); }
.mf2-item + .mf2-item { border-top: 1px solid var(--sep); }
.mf2-b { display: flex; flex-direction: column; gap: 3px; flex: 1; min-width: 0; }
.mf2-b > b { font-size: 14.5px; font-weight: 650; color: var(--label); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mf2-b > span { font-size: 12.5px; color: var(--label-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mf2-b em { font-style: normal; font-weight: 700; } .mf2-b em.up { color: var(--good); } .mf2-b em.down { color: var(--bad); }
.mf2-r { flex: none; display: flex; flex-direction: column; align-items: flex-end; gap: 3px; }
.mf2-r b { font: 750 17px/1 var(--font-display); color: var(--label); font-variant-numeric: tabular-nums; }
.mf2-r time { font-size: 12px; color: var(--label-2); }
.fd-ic.insider { font-size: 16px; }
.hl2-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } @media (max-width: 700px) { .hl2-grid { grid-template-columns: 1fr; } }
.svd-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } @media (max-width: 900px) { .svd-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* Insider trades on the timeline: a tie, like the whale, ringed by buy or sell */
.sc-dot.insider { display: grid; place-items: center; border-radius: 50%; background: var(--surface-2); font-size: calc(var(--d) * .58); line-height: 1; text-decoration: none; z-index: 1; }
.sc-dot.insider.up { box-shadow: 0 0 0 2px var(--good), 0 0 14px color-mix(in srgb, var(--good) 45%, transparent); }
.sc-dot.insider.down { box-shadow: 0 0 0 2px var(--bad), 0 0 14px color-mix(in srgb, var(--bad) 45%, transparent); }
.sc-key .k-insider { width: auto; height: auto; background: none; font-style: normal; font-size: 13px; }
.fd-ic.insider { font-size: 17px; }
.sc-guide.insider { border-left-color: color-mix(in srgb, #bf5af2 55%, transparent); }

/* Marks instead of emoji: faces round and full, party logos on white, seals round */
.lg.face { border-radius: 50%; }
.lg.face img { object-fit: cover; object-position: 50% 20%; }
.lg.seal { border-radius: 50%; background: #fff; }
.lg.seal img { box-sizing: border-box; padding: calc(var(--s) * .06); }
.hl2 > .lg, .hl2 > .st-glyph { flex: none; }
.hl2-t > b { font-weight: 650; }
.ww > .lg { flex: none; }
.mf2-item > .lg { flex: none; }
.ov2-sec.first h3 { margin-top: 0; }

/* Sports as markets: a game list and one game up close */
.gr-leagues { display: flex; flex-wrap: wrap; gap: 6px; margin: 2px 0 10px; }
.gr-leagues button { display: inline-flex; align-items: center; gap: 5px; height: 28px; padding: 0 10px; border: 0; border-radius: var(--r-pill); background: var(--fill-3); color: var(--label-2); font: 600 12.5px var(--font); cursor: pointer; }
.gr-leagues button:hover { color: var(--label); }
.gr-leagues button.on { background: var(--label); color: var(--bg); }
.gr-day { margin: 14px 4px 4px; font: 700 11.5px var(--font); letter-spacing: .03em; text-transform: uppercase; color: var(--label-2); }
.gr-day:first-child { margin-top: 4px; }
.gr-logos { flex: none; display: flex; }
.gr-logos > .lg + .lg { margin-left: -8px; box-shadow: 0 0 0 2px var(--bg); }
.wr.gr .wr-n b { font-size: 13.5px; }
.wr-pill.money { color: var(--label); background: var(--fill-2); }
.gd-fo { padding-bottom: 20px; }
.gd-top { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.gd-top h3 { margin: 0; }
.gd-teams { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 12px; margin: 22px 0 10px; }
.gd-team { display: flex; flex-direction: column; align-items: center; gap: 8px; text-align: center; }
.gd-team > b { font: 750 19px/1.2 var(--font-display); letter-spacing: -.02em; }
.gd-team small { font-size: 13px; color: var(--label-2); }
.gd-vs { font-size: 13px; font-weight: 700; color: var(--label-3); }
.gd-row { display: grid; grid-template-columns: 64px 1fr 64px; align-items: end; gap: 14px; margin-top: 14px; }
.gd-row > b { font: 800 22px/1 var(--font-display); letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.gd-row > b.gb { text-align: right; }
.gd-row .ga { color: #0a84ff; } .gd-row .gb { color: #ff9f0a; }
.gd-mid { display: flex; flex-direction: column; gap: 6px; }
.gd-mid small { text-align: center; font-size: 12px; font-weight: 600; color: var(--label-2); }
.gd-bar { display: flex; gap: 3px; height: 10px; border-radius: 5px; overflow: hidden; }
.gd-bar i { display: block; height: 100%; }
.gd-bar i.ga { width: var(--w); background: #0a84ff; } .gd-bar i.gb { flex: 1; background: #ff9f0a; }
.gd-foot { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px 18px; margin-top: 18px; padding-top: 14px; border-top: 1px solid var(--sep); font-size: 13px; color: var(--label-2); }
.gd-sharp b { color: var(--label); }
.gd-pick { flex: none; display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px 4px 4px; border-radius: var(--r-pill); background: var(--fill-3); font-size: 12.5px; font-weight: 700; }
.gr-day[hidden] { display: none; }

/* League filter: one even segmented control */
.gr-leagues { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 2px; margin: 0 0 12px; padding: 3px; border-radius: 12px; background: var(--fill-3); }
.gr-leagues button { justify-content: center; height: 30px; padding: 0; border-radius: 9px; background: none; font-size: 12.5px; }
.gr-leagues button.on { background: var(--surface-2); color: var(--label); box-shadow: 0 1px 3px rgba(0, 0, 0, .3); }
/* A game's odds chart */
.gc { margin-top: 22px; padding: 16px 18px 12px; border-radius: 18px; background: var(--bg); }
.gc .sc-stat b.ga, .gc .ga { color: #0a84ff; } .gc .sc-stat b.gb, .gc .gb { color: #ff9f0a; }
.gc-svg { height: 140px; }
.gc-svg path { fill: none; stroke-width: 2.2; stroke-linejoin: round; }
.gc-svg .gc-a { stroke: #0a84ff; } .gc-svg .gc-b { stroke: #ff9f0a; opacity: .75; }
.gc-svg .mid { stroke: var(--sep); stroke-dasharray: 4 4; vector-effect: non-scaling-stroke; }
.sc-key .k-ga { background: #0a84ff; } .sc-key .k-gb { background: #ff9f0a; }
.sc-dot.whale.ga { box-shadow: 0 0 0 2px #0a84ff, 0 0 12px rgba(10, 132, 255, .45); }
.sc-dot.whale.gb { box-shadow: 0 0 0 2px #ff9f0a, 0 0 12px rgba(255, 159, 10, .45); }
.sc-tip .ga { color: #0a84ff; } .sc-tip .gb { color: #ff9f0a; }
.mf2-r b.ga { color: #0a84ff; } .mf2-r b.gb { color: #ff9f0a; }
/* Emoji in full color: the whale and the tie, in the key and on the lane */
.sc-key .k-whale, .sc-key .k-insider, .sc-dot.whale, .sc-dot.insider { font-family: "Apple Color Emoji", "Segoe UI Emoji", "Noto Color Emoji", sans-serif; font-style: normal; color: initial; opacity: 1; filter: none; }
.sc-key .k-whale, .sc-key .k-insider { font-size: 14px; line-height: 1; }

/* The call page's side column, filled: Cred's lean, others on it, more from them */
.dt-rail { position: static; }
.rl-sec { margin-top: 28px; }
.rl-list { display: flex; flex-direction: column; }
.rl { display: flex; align-items: center; gap: 11px; padding: 10px 8px; margin: 0 -8px; border-radius: 12px; transition: background .15s; }
.rl:hover { background: var(--fill-3); }
.rl > .lg, .rl > .av, .rl > img { flex: none; }
.rl-b { display: flex; flex-direction: column; gap: 3px; flex: 1; min-width: 0; }
.rl-b b { font-size: 13.5px; font-weight: 600; line-height: 1.35; color: var(--label); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.rl-b small { font-size: 12px; color: var(--label-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rl-s { flex: none; padding: 3px 9px; border-radius: var(--r-pill); font-style: normal; font-size: 11.5px; font-weight: 700; background: var(--fill-3); color: var(--label-2); }
.rl-s.up { color: var(--good); background: var(--good-bg); } .rl-s.down { color: var(--bad); background: var(--bad-bg); }
.rl-s.live { color: #0a84ff; background: color-mix(in srgb, #0a84ff 15%, transparent); }
.rl-all { display: flex; align-items: center; justify-content: space-between; margin-top: 6px; padding: 10px 0 0; border-top: 1px solid var(--sep); font-size: 13px; font-weight: 600; color: var(--accent); }
.rl-all .ios-chev, .rl-lean-f .ios-chev { width: 14px; height: 14px; }
.rl-lean { display: flex; flex-direction: column; gap: 10px; padding: 14px 16px; border-radius: 16px; background: var(--fill-3); transition: background .15s; }
.rl-lean:hover { background: var(--fill-2); }
.rl-lean-h { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
.rl-lean-h b { font: 750 20px/1 var(--font-display); letter-spacing: -.02em; }
.rl-lean-h b.up { color: var(--good); } .rl-lean-h b.down { color: var(--bad); } .rl-lean-h b.mid { color: #ffd60a; }
.rl-lean-h small { font-size: 12px; color: var(--label-2); }
.rl-lean-f { display: flex; align-items: center; justify-content: space-between; font-size: 13px; font-weight: 600; color: var(--accent); }

/* The right column never scrolls sideways: its rows' hover backgrounds reach 8px past the edges, so give them room */
.rail { overflow-x: hidden; overscroll-behavior-x: none; margin-inline: -8px; padding-inline: 8px; }
.rail > * { min-width: 0; max-width: 100%; }


/* The feed filter, iOS-style: a quiet pill, and a frosted sheet with a sliding segmented control */
.fx { position: relative; }
.fx-pill { display: inline-flex; align-items: center; height: 34px; border-radius: 17px; background: var(--fill-3); transition: background .2s; }
.fx-pill:hover, .fx-pill.open { background: var(--fill-2); }
.fx-main { display: inline-flex; align-items: center; gap: 7px; height: 100%; padding: 0 12px; border: 0; background: none; color: var(--label); font: 590 13.5px var(--font); letter-spacing: -.01em; cursor: pointer; max-width: 280px; }
.fx-main span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fx-main svg { flex: none; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.fx-ic { width: 16px; height: 16px; color: var(--label-2); }
.fx-chev { width: 13px; height: 13px; color: var(--label-3); transition: transform .25s cubic-bezier(.16, 1, .3, 1); }
.fx-pill.open .fx-chev { transform: rotate(180deg); }
.fx-pill.on .fx-main, .fx-pill.on .fx-ic { color: var(--accent); }
.fx-pill.on .fx-main { padding-right: 6px; }
.fx-x { display: grid; place-items: center; width: 20px; height: 20px; margin: 0 7px 0 2px; padding: 0; border: 0; border-radius: 50%; background: var(--fill-2); color: var(--label-2); cursor: pointer; }
.fx-x:hover { color: var(--label); }
.fx-x svg { width: 10px; height: 10px; fill: none; stroke: currentColor; stroke-width: 2.6; stroke-linecap: round; }

.fx-sheet { position: absolute; top: calc(100% + 10px); right: 0; z-index: 40; width: 372px; max-width: calc(100vw - 32px); display: flex; flex-direction: column; gap: 12px; padding: 14px 12px 12px; border-radius: 22px;
  background: var(--glass-strong); -webkit-backdrop-filter: saturate(1.8) blur(30px); backdrop-filter: saturate(1.8) blur(30px);
  box-shadow: 0 30px 80px rgba(0, 0, 0, .45), 0 0 0 .5px var(--sep-strong); transform-origin: top right; }
.fx-sheet.enter { animation: fx-in .32s cubic-bezier(.16, 1, .3, 1); }
@keyframes fx-in { from { opacity: 0; transform: translateY(-6px) scale(.96); } }
.fx-head { display: flex; align-items: center; justify-content: space-between; min-height: 22px; padding: 0 4px; }
.fx-head b { font: 650 17px/1 var(--font-display); letter-spacing: -.02em; color: var(--label); }
.fx-reset { padding: 0; border: 0; background: none; color: var(--accent); font: 500 15px var(--font); cursor: pointer; }

.fx-seg { position: relative; display: grid; grid-template-columns: repeat(var(--n), minmax(0, 1fr)); padding: 2px; border-radius: 9px; background: var(--fill-3); }
.fx-thumb { position: absolute; top: 2px; bottom: 2px; left: 2px; width: calc((100% - 4px) / var(--n)); border-radius: 7px;
  background: color-mix(in srgb, var(--label) 15%, var(--surface-2)); box-shadow: 0 3px 8px rgba(0, 0, 0, .14), 0 3px 1px rgba(0, 0, 0, .04);
  transform: translateX(calc(var(--i) * 100%)); animation: fx-slide .36s cubic-bezier(.16, 1, .3, 1); }
@keyframes fx-slide { from { transform: translateX(calc(var(--from) * 100%)); } }
.fx-seg button { position: relative; z-index: 1; height: 28px; padding: 0; border: 0; background: none; color: var(--label); font: 500 12.5px var(--font); letter-spacing: -.01em; white-space: nowrap; cursor: pointer; }
.fx-seg button.on { font-weight: 650; }

.fx-tabs { display: flex; gap: 4px; overflow-x: auto; scrollbar-width: none; margin: -2px -2px 0; padding: 2px; }
.fx-tabs::-webkit-scrollbar { display: none; }
.fx-tabs button { flex: none; display: inline-flex; align-items: center; gap: 6px; height: 30px; padding: 0 12px; border: 0; border-radius: 15px; background: none; color: var(--label-2); font: 590 13px var(--font); cursor: pointer; transition: background .2s, color .2s; }
.fx-tabs button:hover { color: var(--label); }
.fx-tabs button.on { background: var(--fill-2); color: var(--label); }
.fx-tabs .lg { border-radius: 4px; }

.fx-search { display: flex; align-items: center; gap: 7px; height: 36px; padding: 0 10px; border-radius: 10px; background: var(--fill-3); color: var(--label-3); }
.fx-search svg { width: 15px; height: 15px; flex: none; }
.fx-search input { flex: 1; min-width: 0; border: 0; background: none; color: var(--label); font: 400 15px var(--font); letter-spacing: -.01em; outline: none; }
.fx-search input::placeholder { color: var(--label-3); }

.fx-list { display: flex; flex-direction: column; max-height: 296px; overflow-y: auto; overflow-x: hidden; border-radius: 12px; background: var(--fill-3); scrollbar-width: none; }
.fx-list::-webkit-scrollbar { display: none; }
.fx-row { position: relative; display: flex; align-items: center; gap: 12px; min-height: 52px; padding: 8px 14px; border: 0; background: none; color: var(--label); font: inherit; text-align: left; cursor: pointer; transition: background .15s; }
.fx-row + .fx-row::before { content: ""; position: absolute; top: 0; left: 14px; right: 0; height: .5px; background: var(--sep-strong); }
.fx-row:has(> .lg) + .fx-row::before, .fx-row:has(> .lg) + .fx-row:has(> .lg)::before { left: 52px; }
.fx-row:hover { background: var(--fill-3); }
.fx-row:active { background: var(--fill-2); }
.fx-row[hidden] { display: none; }
.fx-row > .lg { flex: none; border-radius: 7px; }
.fx-row > .lg.coin { border-radius: 50%; }
.fx-t { display: flex; flex-direction: column; gap: 2px; flex: 1; min-width: 0; }
.fx-t b { font-size: 15px; font-weight: 500; letter-spacing: -.01em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fx-t small { font-size: 12.5px; color: var(--label-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fx-check { flex: none; width: 18px; height: 18px; fill: none; stroke: var(--accent); stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; }
.fx-hint { margin: 2px 4px; font-size: 13px; color: var(--label-2); }

.fx-switch { display: flex; align-items: center; justify-content: space-between; min-height: 48px; padding: 0 14px; border-radius: 12px; background: var(--fill-3); color: var(--label); font: 400 15px var(--font); letter-spacing: -.01em; cursor: pointer; }
.fx-switch input { position: absolute; opacity: 0; pointer-events: none; }
.fx-switch i { position: relative; flex: none; width: 46px; height: 28px; border-radius: 14px; background: var(--fill-2); transition: background .25s; }
.fx-switch i::after { content: ""; position: absolute; top: 2px; left: 2px; width: 24px; height: 24px; border-radius: 50%; background: #fff; box-shadow: 0 3px 8px rgba(0, 0, 0, .15), 0 3px 1px rgba(0, 0, 0, .06); transition: transform .3s cubic-bezier(.16, 1, .3, 1); }
.fx-switch input:checked + i { background: #30d158; }
.fx-switch input:checked + i::after { transform: translateX(18px); }

/* Where the call was made: a faint stretch before it and a dot on the small charts, a labeled dot on the big one */
.pk-spark polyline.pre { stroke: var(--label-3) !important; }
.pk-spark .call { fill: var(--bg); stroke: var(--label); stroke-width: 1.5; }
.pkh-chart .cx-call { width: 11px; height: 11px; margin: -5.5px 0 0 -5.5px; background: var(--bg); box-shadow: 0 0 0 2.5px var(--label); z-index: 1; }
.pkh-chart .cx-call::after { content: "Called"; position: absolute; left: 50%; bottom: calc(100% + 7px); transform: translateX(-50%); padding: 3px 8px; border-radius: 7px; background: var(--label); color: var(--bg); font: 650 11px/1.2 var(--font); white-space: nowrap; }
.pkh-chart .cx-chart { overflow: visible; }

/* The featured prediction's chart, fitted: figures on top, the line with room around it, dates below */
.pkh-chart[data-pkprice] { flex-direction: column; align-items: stretch; justify-content: space-between; gap: 10px; padding: 22px 26px 16px 22px; min-height: 260px; }
.pkh-cap { display: flex; gap: 28px; }
.pkh-cap span { display: flex; flex-direction: column; gap: 4px; }
.pkh-cap small { font-size: 11.5px; font-weight: 600; color: var(--label-3); }
.pkh-cap b { font: 750 20px/1 var(--font-display); letter-spacing: -.02em; color: var(--label); font-variant-numeric: tabular-nums; }
.pkh-cap em { font-style: normal; font-size: 13px; font-weight: 650; margin-left: 4px; }
.pkh-cap em.up { color: var(--good); } .pkh-cap em.down { color: var(--bad); }
.pkh-chart[data-pkprice] .cx-chart { flex: 1; height: auto; min-height: 140px; margin: 26px 6px 0; }
.pkh-axis { display: flex; justify-content: space-between; font-size: 11.5px; color: var(--label-3); }
.pkh-chart .cx-call.end::after { left: auto; right: -6px; transform: none; }
.pkh-chart .cx-call.start::after { left: -6px; transform: none; }

/* Markets overview: the money as a feed, each move with what Cred thinks */
.sf { display: flex; flex-direction: column; gap: 22px; }
.sf-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 10px; }
.sf-stats > div { display: flex; flex-direction: column; gap: 6px; padding: 16px 18px; border-radius: 18px; background: var(--surface); border: 1px solid var(--sep); }
.sf-stats small { font-size: 12px; font-weight: 600; color: var(--label-2); }
.sf-stats b { font: 800 26px/1 var(--font-display); letter-spacing: -.03em; color: var(--label); }
.sf-stats b.up { color: var(--good); } .sf-stats b.down { color: var(--bad); } .sf-stats b.warn { color: #ff9f0a; }
.sf-stats span { font-size: 12.5px; color: var(--label-2); }
.sf-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 16px; }
.sf-head h3 { display: flex; align-items: center; gap: 8px; margin: 0; font: 750 20px/1.2 var(--font-display); letter-spacing: -.02em; }
.sf-head .fd-filters { padding: 0; }
.sf-list { display: flex; flex-direction: column; gap: 8px; }
.sf-item { display: flex; align-items: flex-start; gap: 14px; padding: 16px 18px; border-radius: 18px; background: var(--surface); border: 1px solid var(--sep); transition: background .15s; }
.sf-item:hover { background: var(--surface-2); }
.sf-item > .lg { flex: none; margin-top: 2px; }
.sf-b { display: flex; flex-direction: column; gap: 5px; flex: 1; min-width: 0; }
.sf-top { display: flex; align-items: center; gap: 8px; font-size: 12px; color: var(--label-2); }
.sf-top time { margin-left: auto; }
.sf-kind { padding: 2px 8px; border-radius: var(--r-pill); font-size: 11px; font-weight: 700; letter-spacing: .01em; }
.sf-kind.whale { color: #64d2ff; background: color-mix(in srgb, #64d2ff 15%, transparent); }
.sf-kind.insider { color: #bf5af2; background: color-mix(in srgb, #bf5af2 15%, transparent); }
.sf-title { font-size: 15.5px; font-weight: 650; line-height: 1.3; color: var(--label); }
.sf-what { font-size: 13.5px; color: var(--label-2); }
.sf-what b { font-weight: 700; } .sf-what b.up { color: var(--good); } .sf-what b.down { color: var(--bad); }
.sf-cred { display: flex; align-items: center; gap: 8px; margin-top: 4px; padding: 8px 10px; border-radius: 10px; background: var(--fill-3); font-size: 13px; color: var(--label); }
.sf-cred em { flex: none; font-style: normal; font-size: 11px; font-weight: 750; letter-spacing: .02em; text-transform: uppercase; color: var(--label-2); }
.sf-cred.agree em { color: var(--good); } .sf-cred.clash em { color: #ff9f0a; }
.sf-cred.clash { background: color-mix(in srgb, #ff9f0a 10%, transparent); }
.sf-cred.none { color: var(--label-2); }
.sf-amt { flex: none; font: 800 20px/1 var(--font-display); letter-spacing: -.02em; color: var(--label); font-variant-numeric: tabular-nums; margin-top: 2px; }
.sf-amt.up { color: var(--good); } .sf-amt.down { color: var(--bad); }

/* Every featured chart (price or odds) keeps room around the line, so the "Called" marker and its label never clip */
.pkh-chart:not([data-pkprice]) { padding: 0; align-items: stretch; }
.pkh-chart:not([data-pkprice]) .cx-chart { width: auto; height: auto; flex: 1; margin: 52px 30px 24px 18px; }
.pkh-chart .cx-call.end::after { right: -4px; }

/* Markets overview, one piece: a header line, then a timeline of moves, each set against Cred */
.tl { display: flex; flex-direction: column; }
.tl-head { padding-bottom: 18px; border-bottom: 1px solid var(--sep); }
.tl-h { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 16px; }
.tl-h h3 { display: flex; align-items: center; gap: 9px; margin: 0; font: 800 26px/1.1 var(--font-display); letter-spacing: -.03em; }
.tl-h .fd-filters { padding: 0; }
.tl-sum { display: flex; flex-wrap: wrap; gap: 6px 0; margin: 12px 0 0; font-size: 14px; color: var(--label-2); }
.tl-sum span + span::before { content: ""; display: inline-block; width: 1px; height: 12px; margin: 0 14px; background: var(--sep-strong); vertical-align: -1px; }
.tl-sum b { color: var(--label); font-weight: 750; }
.tl-sum b.up { color: var(--good); } .tl-sum b.down { color: var(--bad); } .tl-sum b.warn { color: #ff9f0a; }
.tl-day { margin: 22px 0 4px; font: 700 12px var(--font); letter-spacing: .04em; text-transform: uppercase; color: var(--label-2); }
.tl-row { display: grid; grid-template-columns: 40px minmax(0, 1fr) 236px; align-items: center; gap: 16px; padding: 16px 12px; margin: 0 -12px; border-radius: 16px; transition: background .15s; }
.tl-row + .tl-row { box-shadow: 0 -1px 0 var(--sep); }
.tl-row:hover { background: var(--fill-3); box-shadow: none; }
.tl-row:hover + .tl-row { box-shadow: none; }
.tl-row > .lg { align-self: start; margin-top: 2px; }
.tl-main { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.tl-meta { display: flex; align-items: center; gap: 8px; font-size: 12px; color: var(--label-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tl-kind { font-size: 11px; font-weight: 750; letter-spacing: .03em; text-transform: uppercase; }
.tl-kind.whale { color: #64d2ff; } .tl-kind.insider { color: #bf5af2; }
.tl-title { font-size: 15px; font-weight: 600; line-height: 1.3; color: var(--label); }
.tl-bet { display: flex; flex-wrap: wrap; align-items: baseline; gap: 8px; }
.tl-amt { font: 800 24px/1 var(--font-display); letter-spacing: -.03em; color: var(--label); font-variant-numeric: tabular-nums; }
.tl-verb { font-size: 14px; color: var(--label-2); }
.tl-side { align-self: center; padding: 3px 10px; border-radius: 8px; font-size: 13px; font-weight: 800; letter-spacing: .02em; text-transform: uppercase; }
.tl-side.up { color: var(--good); background: var(--good-bg); } .tl-side.down { color: var(--bad); background: var(--bad-bg); }
.tl-at { font-size: 13.5px; color: var(--label-2); }


/* The featured prediction's chart: figures, then the line drawn at real size with the call, dates and a hover readout */
.pkh-chart.hc { flex-direction: column; align-items: stretch; gap: 8px; padding: 20px 22px 14px; min-height: 280px; }
.hc-cap { display: flex; gap: 28px; }
.hc-cap span { display: flex; flex-direction: column; gap: 4px; }
.hc-cap small { font-size: 11.5px; font-weight: 600; color: var(--label-3); }
.hc-cap b { font: 750 20px/1 var(--font-display); letter-spacing: -.02em; color: var(--label); font-variant-numeric: tabular-nums; }
.hc-cap em { font-style: normal; font-size: 13px; font-weight: 650; margin-left: 4px; }
.hc-cap em.up { color: var(--good); } .hc-cap em.down { color: var(--bad); }
.hc-plot { position: relative; flex: 1; min-height: 190px; cursor: crosshair; }
.hc-plot svg { position: absolute; inset: 0; display: block; overflow: visible; }
.hc-line { fill: none; stroke: currentColor; stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; }
.hc-base { stroke: var(--sep); }
.hc-tick { font: 500 11px var(--font); fill: var(--label-3); }
.hc-target { stroke: var(--label-3); stroke-dasharray: 4 4; }
.hc-target-t { font: 600 10.5px var(--font); fill: var(--label-3); }
.hc-guide { stroke: var(--label-3); stroke-dasharray: 2 3; }
.hc-now { fill: currentColor; stroke: var(--bg); stroke-width: 2; }
.hc-call rect { fill: var(--label); }
.hc-call text { font: 700 11px var(--font); fill: var(--bg); }
.hc-call circle { fill: var(--bg); stroke: var(--label); stroke-width: 2.5; }
.hc-hover { stroke: var(--label-2); stroke-width: 1; }
.hc-dot { fill: currentColor; stroke: var(--bg); stroke-width: 2; }
.hc-tip { position: absolute; z-index: 2; display: flex; flex-direction: column; gap: 2px; padding: 8px 11px; border-radius: 10px; background: var(--surface-2); box-shadow: 0 8px 24px rgba(0, 0, 0, .4), 0 0 0 .5px var(--sep-strong); pointer-events: none; white-space: nowrap; }
.hc-tip b { font: 750 15px/1.1 var(--font-display); color: var(--label); }
.hc-tip span { font-size: 11.5px; color: var(--label-2); }
.hc-tip em { font-style: normal; font-size: 11.5px; font-weight: 650; color: var(--label-2); }
.hc-tip em.up { color: var(--good); } .hc-tip em.down { color: var(--bad); }

/* Each move: Cred's takes under the bet, and how much of Cred agrees */
.tl-row { grid-template-columns: 40px minmax(0, 1fr) 168px; align-items: start; }
a.tl-title:hover { color: var(--accent); }
.tl-takes { display: flex; flex-direction: column; gap: 2px; margin-top: 8px; padding-left: 12px; border-left: 2px solid var(--sep-strong); }
.tl-takes > small { font-size: 11px; font-weight: 700; letter-spacing: .03em; text-transform: uppercase; color: var(--label-3); margin-bottom: 2px; }
.tl-take { display: flex; align-items: center; gap: 8px; min-width: 0; padding: 4px 6px; margin-left: -6px; border-radius: 8px; font-size: 13.5px; }
.tl-take:hover { background: var(--fill-3); }
.tl-take > .av, .tl-take > img, .tl-take > span:first-child { flex: none; }
.tl-take b { flex: none; font-weight: 650; color: var(--label); }
.tl-take q { flex: 1; min-width: 0; color: var(--label-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; quotes: "“" "”"; }
.tl-take em { flex: none; min-width: 66px; text-align: center; font-style: normal; font-size: 11px; font-weight: 750; padding: 2px 7px; border-radius: 6px; }
.tl-take em.yes { color: var(--good); background: var(--good-bg); } .tl-take em.no { color: #ff9f0a; background: color-mix(in srgb, #ff9f0a 14%, transparent); }
.tl-stat { display: flex; flex-direction: column; align-items: flex-end; gap: 3px; padding-top: 20px; text-align: right; white-space: nowrap; }
.tl-stat small { font-size: 11px; font-weight: 650; letter-spacing: .04em; text-transform: uppercase; color: var(--label-3); }
.tl-stat b { font: 800 22px/1.1 var(--font-display); letter-spacing: -.02em; color: var(--label); }
.tl-stat b.up { color: var(--good); } .tl-stat b.down { color: var(--bad); } .tl-stat b.warn { color: #ff9f0a; }
.tl-stat span { font-size: 12px; color: var(--label-2); max-width: 100%; overflow: hidden; text-overflow: ellipsis; }
@media (max-width: 900px) { .tl-row { grid-template-columns: 40px minmax(0, 1fr); } .tl-stat { grid-column: 2; flex-direction: row; align-items: baseline; gap: 8px; padding-top: 0; } .tl-stat b { font-size: 17px; } }
/* The hover readout: gone when the pointer leaves, and small: the value (and its move since the call), then the time */
.hc-tip[hidden] { display: none; }
.hc-tip { gap: 1px; padding: 5px 8px; border-radius: 8px; }
.hc-tip b { font-size: 13px; }
.hc-tip b em { font: 650 11px var(--font); margin-left: 3px; }
.hc-tip span { font-size: 10.5px; }

/* Loading: the page dims and a spinner turns while a heavy view renders */
.busy { position: fixed; inset: 0; z-index: 200; display: grid; place-items: center; background: color-mix(in srgb, var(--bg) 55%, transparent); -webkit-backdrop-filter: blur(2px); backdrop-filter: blur(2px); animation: busy-in .15s ease; }
.busy[hidden] { display: none; }
@keyframes busy-in { from { opacity: 0; } }
.busy-spin { width: 34px; height: 34px; border-radius: 50%; border: 3px solid var(--fill-2); border-top-color: var(--label); animation: busy-spin .7s linear infinite; }
@keyframes busy-spin { to { transform: rotate(360deg); } }
.tl-more { display: grid; place-items: center; min-height: 60px; }

/* Sports whale watch: the game name opens the game */
.tl-game { padding: 0; border: 0; background: none; text-align: left; font-family: inherit; color: var(--label); cursor: pointer; }
.tl-game:hover { color: var(--accent); }

/* A market's Money tab: Cred vs the money, then its moves */
.mv { margin: 18px 0 8px; padding: 18px 20px; border-radius: 18px; background: var(--surface); border: 1px solid var(--sep); }
.mv.agree { box-shadow: inset 3px 0 0 var(--good); } .mv.clash { box-shadow: inset 3px 0 0 #ff9f0a; }
.mv-h { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 6px; }
.mv-h h4 { margin: 0; font: 750 17px/1.2 var(--font-display); letter-spacing: -.02em; }
.mv-verdict { padding: 4px 11px; border-radius: var(--r-pill); font-size: 12.5px; font-weight: 750; background: var(--fill-3); color: var(--label-2); }
.mv-verdict.agree { color: var(--good); background: var(--good-bg); } .mv-verdict.clash { color: #ff9f0a; background: color-mix(in srgb, #ff9f0a 14%, transparent); }
.mv-line { display: grid; grid-template-columns: minmax(150px, 220px) 1fr 120px; align-items: center; gap: 16px; padding: 11px 0; border-top: 1px solid var(--sep); }
.mv-line:first-of-type { border-top: 0; }
.mv-who { display: flex; flex-direction: column; gap: 2px; font-size: 14px; font-weight: 650; color: var(--label); }
.mv-who small { font-size: 12px; font-weight: 500; color: var(--label-2); }
.mv-bar { display: block; height: 8px; border-radius: 4px; background: var(--bad); overflow: hidden; }
.mv-bar i { display: block; height: 100%; width: var(--w); background: var(--good); border-right: 2px solid var(--surface); }
.mv-line > b { justify-self: end; font: 800 16px/1 var(--font-display); letter-spacing: -.01em; text-transform: capitalize; }
.mv-line > b.up { color: var(--good); } .mv-line > b.down { color: var(--bad); }
.mv-line > b:only-of-type { grid-column: 3; }
.md-tl { margin-top: 6px; }
@media (max-width: 700px) { .mv-line { grid-template-columns: 1fr 90px; } .mv-bar { grid-column: 1 / -1; grid-row: 2; } }

/* A market's Money tab as a news panel: headline and numbers on top, then two columns of panels */
.np { display: flex; flex-direction: column; gap: 14px; margin-top: 16px; }
.np-head { padding: 22px 24px 20px; border-radius: 20px; background: var(--surface); border: 1px solid var(--sep); }
.np-tag { display: inline-flex; padding: 4px 10px; border-radius: 6px; font-size: 11px; font-weight: 800; letter-spacing: .05em; text-transform: uppercase; background: var(--fill-2); color: var(--label-2); }
.np-tag.agree { color: var(--good); background: var(--good-bg); } .np-tag.clash { color: #ff9f0a; background: color-mix(in srgb, #ff9f0a 15%, transparent); }
.np-head h3 { margin: 12px 0 18px; font: 700 21px/1.35 var(--font-display); letter-spacing: -.02em; color: var(--label); max-width: 62ch; }
.np-kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); border-top: 1px solid var(--sep); }
.np-kpis > div { display: flex; flex-direction: column; gap: 4px; padding: 14px 16px 0 0; }
.np-kpis > div + div { padding-left: 16px; border-left: 1px solid var(--sep); }
.np-kpis small { font-size: 11px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--label-3); }
.np-kpis b { font: 800 20px/1.1 var(--font-display); letter-spacing: -.02em; text-transform: capitalize; }
.np-kpis b.up, .np-lean b.up { color: var(--good); } .np-kpis b.down, .np-lean b.down { color: var(--bad); }
.np-kpis span { font-size: 12px; color: var(--label-2); }
.np-grid { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: 14px; align-items: start; }
.np-col { display: flex; flex-direction: column; gap: 14px; min-width: 0; }
.np-panel { padding: 16px 18px; border-radius: 18px; background: var(--surface); border: 1px solid var(--sep); }
.np-panel h5 { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; margin: 0 0 8px; padding-bottom: 10px; border-bottom: 1px solid var(--sep); font: 800 12px var(--font); letter-spacing: .06em; text-transform: uppercase; color: var(--label); }
.np-panel h5 small { font-size: 11.5px; font-weight: 500; letter-spacing: 0; text-transform: none; color: var(--label-3); }
.np-list { display: flex; flex-direction: column; }
.np-move, .np-pos { display: grid; align-items: center; gap: 12px; padding: 9px 6px; margin: 0 -6px; border-radius: 8px; font-size: 13.5px; }
.np-move { grid-template-columns: 34px minmax(0, 1fr) auto 64px; }
.np-pos { grid-template-columns: minmax(0, 1fr) auto 64px 70px; }
.np-move:hover, .np-pos:hover, .np-take:hover { background: var(--fill-3); }
.np-move + .np-move, .np-pos + .np-pos { box-shadow: 0 -1px 0 var(--sep); }
.np-move time { font-size: 12px; color: var(--label-3); font-variant-numeric: tabular-nums; }
.np-who { display: flex; flex-direction: column; min-width: 0; font-weight: 650; color: var(--label); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.np-who small { font-size: 11.5px; font-weight: 500; color: var(--label-3); }
.np-act { padding: 3px 8px; border-radius: 6px; font-size: 11.5px; font-weight: 800; letter-spacing: .02em; text-transform: uppercase; white-space: nowrap; }
.np-act.up { color: var(--good); background: var(--good-bg); } .np-act.down { color: var(--bad); background: var(--bad-bg); }
.np-move b, .np-pos b { justify-self: end; font-weight: 800; font-variant-numeric: tabular-nums; color: var(--label); }
.np-pos em { justify-self: end; font-style: normal; font-size: 12.5px; font-weight: 700; font-variant-numeric: tabular-nums; }
.np-pos em.up { color: var(--good); } .np-pos em.down { color: var(--bad); }
.np-more { margin-top: 8px; padding: 0; border: 0; background: none; color: var(--accent); font: 600 13px var(--font); cursor: pointer; }
.np-take { display: flex; flex-direction: column; gap: 6px; padding: 11px 6px; margin: 0 -6px; border-radius: 8px; }
.np-take + .np-take { box-shadow: 0 -1px 0 var(--sep); }
.np-take-h { display: flex; align-items: center; gap: 8px; min-width: 0; }
.np-take-h b { font-size: 13.5px; font-weight: 700; color: var(--label); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.np-take-h small { font-size: 12px; color: var(--label-3); }
.np-take-h .side-tag { margin-left: auto; }
.np-take q { font-size: 14px; line-height: 1.4; color: var(--label); quotes: "“" "”"; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.np-take > small { font-size: 11.5px; color: var(--label-3); }
.np-lean { display: grid; grid-template-columns: minmax(0, 1fr) 90px 92px; align-items: center; gap: 10px; padding: 9px 0; }
.np-lean + .np-lean { border-top: 1px solid var(--sep); }
.np-lean > span:first-child { display: flex; flex-direction: column; font-size: 13px; font-weight: 650; color: var(--label); min-width: 0; }
.np-lean > span:first-child small { font-size: 11.5px; font-weight: 500; color: var(--label-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.np-bar { display: block; height: 6px; border-radius: 3px; background: var(--bad); overflow: hidden; }
.np-bar i { display: block; height: 100%; width: var(--w); background: var(--good); border-right: 2px solid var(--surface); }
.np-lean b { justify-self: end; font-size: 13px; font-weight: 800; text-transform: capitalize; white-space: nowrap; }
.np-empty { margin: 6px 0; font-size: 13px; color: var(--label-3); }
@media (max-width: 1000px) { .np-grid { grid-template-columns: minmax(0, 1fr); } }

/* Money tab, integrated: one surface, no boxes; type, spacing and hairlines do the work */
.np { gap: 0; margin-top: 8px; }
.np-head, .np-panel { padding: 0; border: 0; border-radius: 0; background: none; }
.np-head { padding: 22px 0 0; }
.np-tag { padding: 0; background: none !important; font-size: 11.5px; letter-spacing: .06em; }
.np-head h3 { margin: 8px 0 20px; font-size: 24px; line-height: 1.3; font-weight: 750; max-width: 58ch; }
.np-kpis { border-top: 1px solid var(--sep); border-bottom: 1px solid var(--sep); }
.np-kpis > div { padding: 14px 18px 14px 0; }
.np-kpis > div + div { padding-left: 18px; }
.np-kpis b { font-size: 22px; }
.np-grid { grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: 0; }
.np-col { gap: 0; }
.np-grid > .np-col:first-child { padding-right: 28px; border-right: 1px solid var(--sep); }
.np-grid > .np-col:last-child { padding-left: 28px; }
.np-panel { padding: 22px 0 6px; }
.np-panel + .np-panel { border-top: 1px solid var(--sep); }
.np-panel h5 { margin: 0 0 4px; padding: 0 0 6px; border: 0; font-size: 11.5px; letter-spacing: .07em; color: var(--label-2); }
.np-move, .np-pos { padding: 8px 6px; font-size: 13.5px; }
.np-move { grid-template-columns: 30px minmax(0, 1fr) auto 62px; }
.np-move + .np-move, .np-pos + .np-pos, .np-take + .np-take { box-shadow: none; }
.np-who { flex-direction: row; align-items: baseline; gap: 6px; }
.np-who small { flex: none; }
.np-pos .np-who { flex-direction: column; gap: 1px; }
.np-act { padding: 0; background: none !important; font-size: 11.5px; letter-spacing: .03em; }
.np-act.flat { color: var(--label-3); }
.np-take { padding: 12px 6px; }
.np-take q { font-size: 14.5px; }
.np-lean { padding: 10px 0; }
.np-lean + .np-lean { border-top: 0; }
@media (max-width: 1000px) { .np-grid > .np-col:first-child { padding-right: 0; border-right: 0; } .np-grid > .np-col:last-child { padding-left: 0; border-top: 1px solid var(--sep); } }

/* A market on one screen: the chart, then the whale feed, Cred's feed and where everyone stands */
.mx { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) 280px; margin-top: 20px; border-top: 1px solid var(--sep); }
.mx-col { min-width: 0; padding: 16px 22px 0 0; }
.mx-col + .mx-col { padding-left: 22px; border-left: 1px solid var(--sep); }
.mx h5 { display: flex; align-items: center; gap: 8px; margin: 0 0 6px; font: 800 11.5px var(--font); letter-spacing: .07em; text-transform: uppercase; color: var(--label-2); }
.mx h5 small { margin-left: auto; font-size: 11.5px; font-weight: 500; letter-spacing: 0; text-transform: none; color: var(--label-3); }
.mx-scroll { max-height: 640px; overflow-y: auto; overflow-x: hidden; margin-right: -8px; padding-right: 8px; scrollbar-width: thin; }
.mx-move { display: grid; grid-template-columns: 30px minmax(0, 1fr) auto 58px; align-items: center; gap: 10px; padding: 9px 6px; margin: 0 -6px; border-radius: 8px; font-size: 13.5px; }
.mx-move:hover, .mx-post:hover, .mx-voice:hover { background: var(--fill-3); }
.mx-move time, .mx-ph time { font-size: 12px; color: var(--label-3); font-variant-numeric: tabular-nums; }
.mx-mb { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.mx-what { font-size: 12px; color: var(--label-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mx-move b { justify-self: end; font-weight: 800; font-variant-numeric: tabular-nums; }
.mx-post { display: grid; grid-template-columns: 30px minmax(0, 1fr) auto; align-items: start; gap: 10px; padding: 10px 6px; margin: 0 -6px; border-radius: 8px; }
.mx-pb { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.mx-ph { display: flex; align-items: baseline; gap: 6px; min-width: 0; }
.mx-ph b { font-size: 13.5px; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mx-ph small { font-size: 12px; color: var(--label-3); }
.mx-ph time { margin-left: auto; flex: none; }
.mx-pt { font-size: 14px; line-height: 1.38; color: var(--label); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.mx-post .side-tag { margin-top: 2px; }
.mx-side { padding: 16px 0 0 22px; border-left: 1px solid var(--sep); display: flex; flex-direction: column; gap: 12px; }
.mx-side h5 { margin: 0; font: 750 16px/1.25 var(--font-display); letter-spacing: -.01em; text-transform: none; color: var(--label); }
.mx-split { display: flex; gap: 3px; height: 8px; border-radius: 4px; overflow: hidden; }
.mx-split i { display: block; height: 100%; width: var(--w); }
.mx-split i.up { background: var(--good); } .mx-split i.down { background: var(--bad); } .mx-split i.mid { background: #ffd60a; }
.mx-sides { display: flex; flex-direction: column; gap: 2px; }
.mx-sd { display: grid; grid-template-columns: auto 1fr; align-items: baseline; gap: 0 8px; padding: 6px 8px; margin: 0 -8px; border: 0; border-radius: 8px; background: none; color: var(--label); text-align: left; font: inherit; cursor: pointer; }
.mx-sd:hover { background: var(--fill-3); }
.mx-sd b { font: 800 20px/1 var(--font-display); }
.mx-sd span { font-size: 14px; font-weight: 700; }
.mx-sd.up b, .mx-sd.up span { color: var(--good); } .mx-sd.down b, .mx-sd.down span { color: var(--bad); } .mx-sd.mid b, .mx-sd.mid span { color: #ffd60a; }
.mx-sd small { grid-column: 1 / -1; font-size: 12px; color: var(--label-3); }
.mx-side .np-tag { align-self: flex-start; padding: 0; }
.mx-leans { display: flex; flex-direction: column; gap: 10px; }
.mx-lean { display: grid; grid-template-columns: 1fr auto; gap: 4px 8px; align-items: baseline; }
.mx-lean > span:first-child { display: flex; flex-direction: column; font-size: 13px; font-weight: 650; min-width: 0; }
.mx-lean > span:first-child small { font-size: 11.5px; font-weight: 500; color: var(--label-3); }
.mx-lean b { font-size: 12.5px; font-weight: 800; text-transform: capitalize; }
.mx-lean b.up { color: var(--good); } .mx-lean b.down { color: var(--bad); }
.mx-lean .np-bar { grid-column: 1 / -1; height: 4px; }
.mx-side h6 { margin: 6px 0 -4px; font: 800 11px var(--font); letter-spacing: .07em; text-transform: uppercase; color: var(--label-3); }
.mx-voice { display: grid; grid-template-columns: 26px minmax(0, 1fr) auto; align-items: center; gap: 8px; padding: 5px 6px; margin: 0 -6px; border-radius: 8px; }
.mx-voice span { display: flex; flex-direction: column; min-width: 0; }
.mx-voice b { font-size: 13px; font-weight: 650; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mx-voice small { font-size: 11.5px; color: var(--label-3); }
.mx-break { margin-top: 16px; }
@media (max-width: 1100px) { .mx { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } .mx-side { grid-column: 1 / -1; border-left: 0; border-top: 1px solid var(--sep); padding-left: 0; } }
@media (max-width: 700px) { .mx { grid-template-columns: minmax(0, 1fr); } .mx-col + .mx-col { padding-left: 0; border-left: 0; border-top: 1px solid var(--sep); } }

/* A market: one timeline beside one column */
.ux { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 36px; margin-top: 22px; align-items: start; }
.ux-list { display: flex; flex-direction: column; }
.ux-day { margin: 18px 0 2px; font: 700 11.5px var(--font); letter-spacing: .06em; text-transform: uppercase; color: var(--label-3); }
.ux-day:first-child { margin-top: 0; }
.ux-post { display: flex; gap: 12px; padding: 14px 10px; margin: 0 -10px; border-radius: 14px; transition: background .15s; }
.ux-post:hover, .ux-move:hover, .ux-mini:hover, .ux-pos:hover { background: var(--fill-3); }
.ux-post > .av, .ux-post > span:first-child { flex: none; }
.ux-b { display: flex; flex-direction: column; gap: 4px; min-width: 0; flex: 1; }
.ux-meta { display: flex; align-items: center; gap: 6px; min-width: 0; }
.ux-meta b { font-size: 14px; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ux-meta small { flex: none; font-size: 12.5px; color: var(--label-3); }
.ux-meta .side-tag { margin-left: auto; }
.ux-text { font-size: 15px; line-height: 1.45; color: var(--label); }
.ux-move { display: grid; grid-template-columns: 38px minmax(0, 1fr) auto; align-items: center; gap: 12px; padding: 9px 10px; margin: 0 -10px; border-radius: 12px; }
.ux-ic { display: grid; place-items: center; width: 30px; height: 30px; margin-left: 4px; border-radius: 50%; font: 800 13px var(--font); color: #64d2ff; background: color-mix(in srgb, #64d2ff 14%, transparent); }
.ux-ic.insider { font-size: 9px; color: #bf5af2; background: color-mix(in srgb, #bf5af2 14%, transparent); }
.ux-mt { min-width: 0; font-size: 14px; color: var(--label-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ux-mt > b:first-child { color: var(--label); font-weight: 650; }
.ux-mt b.up { color: var(--good); } .ux-mt b.down { color: var(--bad); } .ux-mt b.flat { color: var(--label); }
.ux-move > small { font-size: 12px; color: var(--label-3); white-space: nowrap; }
.ux-side { position: sticky; top: 84px; display: flex; flex-direction: column; gap: 22px; padding-left: 28px; border-left: 1px solid var(--sep); }
.ux-side section { display: flex; flex-direction: column; gap: 8px; }
.ux-side h5 { margin: 0; font: 750 16px/1.25 var(--font-display); letter-spacing: -.01em; }
.ux-side h6 { margin: 0; font: 800 11px var(--font); letter-spacing: .07em; text-transform: uppercase; color: var(--label-3); }
.ux-sides { display: flex; gap: 14px; }
.ux-sides button { padding: 0; border: 0; background: none; font: 600 13.5px var(--font); color: var(--label-2); cursor: pointer; text-align: left; }
.ux-sides button b { font: 800 18px var(--font-display); margin-right: 2px; }
.ux-sides button.up b { color: var(--good); } .ux-sides button.down b { color: var(--bad); } .ux-sides button.mid b { color: #ffd60a; }
.ux-sides button small { margin-left: 4px; color: var(--label-3); font-weight: 500; }
.ux-sides button:hover { color: var(--label); }
.ux-money { margin: 2px 0 0; font-size: 13px; line-height: 1.45; color: var(--label-2); }
.ux-money b { color: var(--label); } .ux-money.agree b { color: var(--good); } .ux-money.clash b { color: #ff9f0a; }
.ux-mini { display: grid; grid-template-columns: 24px minmax(0, 1fr); gap: 9px; padding: 6px 6px; margin: 0 -6px; border-radius: 9px; }
.ux-mini > span { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.ux-mini b { font-size: 12.5px; font-weight: 700; }
.ux-mini > span > span { font-size: 13px; line-height: 1.35; color: var(--label-2); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.ux-pos { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 6px; margin: 0 -6px; border-radius: 9px; }
.ux-pos span { display: flex; flex-direction: column; min-width: 0; font-size: 13px; font-weight: 650; }
.ux-pos small { font-size: 11.5px; font-weight: 500; color: var(--label-3); }
.ux-pos b { font-size: 13px; font-weight: 800; white-space: nowrap; } .ux-pos b.up { color: var(--good); } .ux-pos b.down { color: var(--bad); }
@media (max-width: 1100px) { .ux { grid-template-columns: minmax(0, 1fr); } .ux-side { position: static; padding-left: 0; border-left: 0; order: -1; } }

/* The mood strip: taller, clickable days, the picked day stands out; the insight line */
.sc-row .sc-lab small { font-weight: 500; color: var(--label-3); }
.sc-plot[data-mk-day] { cursor: pointer; }
.sc-bars rect.on { stroke: var(--label); stroke-width: 1.5; vector-effect: non-scaling-stroke; }
.sc-insight { flex-basis: 100%; margin: 6px 0 0; font-size: 13.5px; color: var(--label-2); }
.sc-insight b { font-weight: 800; } .sc-insight b.up { color: var(--good); } .sc-insight b.down { color: var(--bad); }
.sc-tip.rich { flex-direction: column; align-items: flex-start; gap: 2px; white-space: nowrap; }
.sc-tip i { font-style: normal; font-size: 11px; color: var(--accent); }
/* Cred vs the money, as the page's headline insight */
.mvb { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: 28px; align-items: center; margin-top: 18px; padding: 22px 26px; border-radius: 20px; background: var(--surface); border: 1px solid var(--sep); }
.mvb.clash { background: linear-gradient(120deg, color-mix(in srgb, #ff9f0a 14%, transparent), transparent 70%), var(--surface); border-color: color-mix(in srgb, #ff9f0a 35%, transparent); }
.mvb.agree { background: linear-gradient(120deg, color-mix(in srgb, var(--good) 12%, transparent), transparent 70%), var(--surface); border-color: color-mix(in srgb, var(--good) 30%, transparent); }
.mvb-l small { font-size: 11.5px; font-weight: 800; letter-spacing: .07em; text-transform: uppercase; color: var(--label-3); }
.mvb-l b { display: block; margin: 6px 0 8px; font: 800 26px/1.15 var(--font-display); letter-spacing: -.03em; }
.mvb.clash .mvb-l b { color: #ff9f0a; } .mvb.agree .mvb-l b { color: var(--good); }
.mvb-l p { margin: 0; font-size: 14.5px; line-height: 1.5; color: var(--label-2); }
.mvb-r { display: flex; flex-direction: column; gap: 12px; }
.mvb-r > div { display: grid; grid-template-columns: 1fr auto; gap: 5px 10px; align-items: baseline; }
.mvb-r small { font-size: 13px; font-weight: 600; color: var(--label-2); }
.mvb-r b { font-size: 15px; font-weight: 800; text-transform: capitalize; } .mvb-r b.up { color: var(--good); } .mvb-r b.down { color: var(--bad); }
.mvb-r .np-bar { grid-column: 1 / -1; height: 5px; }
/* Feed filters on a market page */
.ux-filters { padding: 0 0 10px; }
.ux-day-chip { display: inline-flex; align-items: center; height: 30px; padding: 0 12px; border: 0; border-radius: var(--r-pill); background: var(--accent); color: #fff; font: 650 13px var(--font); cursor: pointer; }
@media (max-width: 900px) { .mvb { grid-template-columns: minmax(0, 1fr); } }

/* Cred vs the money, as a figure in the chart's header; the analysis opens as a small card under it */
.sc-h { position: relative; }
.sc-money { position: relative; }
.sc-money summary { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; list-style: none; cursor: pointer; }
.sc-money summary::-webkit-details-marker { display: none; }
.sc-money summary small { font-size: 11.5px; font-weight: 600; color: var(--label-3); }
.sc-money summary b { font: 750 22px/1 var(--font-display); letter-spacing: -.02em; color: var(--label); }
.sc-money.clash summary b { color: #ff9f0a; } .sc-money.agree summary b { color: var(--good); }
.sc-money summary em { font-style: normal; font-size: 12.5px; font-weight: 600; color: var(--label-2); }
.sc-money summary em span { margin-left: 6px; color: var(--accent); }
.sc-money summary:hover em span { text-decoration: underline; }
.sc-money-card { position: absolute; top: calc(100% + 10px); left: 0; z-index: 20; width: 340px; padding: 14px 16px; border-radius: 14px; background: var(--surface-2); box-shadow: 0 16px 40px rgba(0, 0, 0, .45), 0 0 0 .5px var(--sep-strong); }
.sc-money-card p { margin: 0 0 10px; font-size: 13.5px; line-height: 1.5; color: var(--label); }
.sc-money-card div { display: flex; justify-content: space-between; gap: 10px; padding: 6px 0; border-top: 1px solid var(--sep); font-size: 13px; color: var(--label-2); }
.sc-money-card b { font-weight: 800; text-transform: capitalize; } .sc-money-card b.up { color: var(--good); } .sc-money-card b.down { color: var(--bad); }

/* Cred's analysis: one quiet line under a market's title; the breakdown in a popup */
.md-ht { display: flex; flex-direction: column; min-width: 0; }
.md-an { --dot: var(--label-3); display: block; max-width: 100%; line-height: 1.7; margin-top: 14px; padding: 0; border: 0; background: none; color: var(--label); font: 500 15px var(--font); text-align: left; cursor: pointer; }
.md-an.clash { --dot: #ff9f0a; } .md-an.agree { --dot: var(--good); }
/* The dot breathes: a soft ring that grows and fades, every couple of seconds */
.md-an > i { position: relative; display: inline-block; margin-right: 10px; vertical-align: 1px; width: 8px; height: 8px; border-radius: 50%; background: var(--dot); }
.md-an > i::after { content: ""; position: absolute; inset: 0; border-radius: 50%; background: var(--dot); animation: an-ping 2.4s cubic-bezier(0, 0, .2, 1) infinite; }
@keyframes an-ping { 0% { transform: scale(1); opacity: .6; } 70%, 100% { transform: scale(3); opacity: 0; } }
.md-an > span { min-width: 0; }
.md-an b { font-weight: 700; }
.md-an em { display: inline-flex; margin-left: 8px; vertical-align: middle; align-items: center; justify-content: center; width: 26px; height: 26px; border-radius: 50%; background: color-mix(in srgb, var(--dot) 18%, transparent); color: var(--dot); transition: background .2s, transform .2s; }
.md-an em svg { width: 13px; height: 13px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; transition: transform .2s; }
.md-an:hover em { background: color-mix(in srgb, var(--dot) 30%, transparent); }
.md-an:hover em svg { transform: translateX(1.5px); }
.md-an:active em { transform: scale(.97); }
/* First look at a market: the line rises in, a glint of light passes over it once, and the button nudges */
.md-an.fresh { animation: an-in .7s .2s cubic-bezier(.16, 1, .3, 1) both; }
.md-an.fresh > span { color: transparent; background: linear-gradient(100deg, var(--label) 40%, var(--dot) 50%, var(--label) 60%) 100% 0 / 300% 100% no-repeat; -webkit-background-clip: text; background-clip: text; animation: an-glint 1.4s .7s ease-in-out both; }
.md-an.fresh em { animation: an-nudge .5s 1.9s ease-out both; }
@keyframes an-in { from { opacity: 0; transform: translateY(6px); } }
@keyframes an-glint { from { background-position: 100% 0; } to { background-position: 0 0; } }
@keyframes an-nudge { 40% { transform: translateX(3px); } }
@media (prefers-reduced-motion: reduce) { .md-an > i::after, .md-an.fresh, .md-an.fresh > span, .md-an.fresh em { animation: none; } .md-an.fresh > span { color: var(--label); background: none; } }
.ma-layer { position: fixed; inset: 0; z-index: 120; display: grid; place-items: center; padding: 24px; }
.ma-layer[hidden] { display: none; }
.ma-scrim { position: absolute; inset: 0; background: rgba(0, 0, 0, .55); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); animation: busy-in .2s ease; }
.ma { position: relative; width: min(860px, 100%); max-height: calc(100vh - 48px); overflow: auto; padding: 28px 30px 26px; border-radius: 22px; background: var(--surface); box-shadow: 0 30px 80px rgba(0, 0, 0, .5), 0 0 0 .5px var(--sep-strong); animation: ma-in .28s cubic-bezier(.16, 1, .3, 1); }
@keyframes ma-in { from { opacity: 0; transform: translateY(10px) scale(.98); } }
.ma-x { position: absolute; top: 16px; right: 16px; width: 30px; height: 30px; border: 0; border-radius: 50%; background: var(--fill-3); color: var(--label-2); cursor: pointer; }
.ma-x:hover { color: var(--label); }
.ma header small { font-size: 11.5px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--label-3); }
.ma header h3 { display: flex; align-items: center; gap: 10px; margin: 8px 0 8px; font: 750 22px/1.2 var(--font-display); letter-spacing: -.02em; }
.ma header h3 i { width: 9px; height: 9px; border-radius: 50%; background: var(--label-3); }
.ma header h3 i.clash { background: #ff9f0a; } .ma header h3 i.agree { background: var(--good); }
.ma header p { margin: 0; max-width: 64ch; font-size: 14.5px; line-height: 1.5; color: var(--label-2); }
.ma-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 26px; margin-top: 22px; padding-top: 18px; border-top: 1px solid var(--sep); }
.ma h6 { margin: 0 0 8px; font: 700 11px var(--font); letter-spacing: .07em; text-transform: uppercase; color: var(--label-3); }
.ma-row { display: flex; flex-direction: column; gap: 2px; padding: 7px 0; }
.ma-row + .ma-row { border-top: 1px solid var(--sep); }
.ma-row span { font-size: 12.5px; color: var(--label-2); }
.ma-row b { font-size: 14.5px; font-weight: 700; color: var(--label); text-transform: none; }
.ma-row b.up { color: var(--good); } .ma-row b.down { color: var(--bad); }
.ma-row b small { margin-left: 4px; font-size: 12px; font-weight: 500; color: var(--label-3); }
.ma-list { margin: 8px 0 0; padding: 0; list-style: none; display: flex; flex-direction: column; }
.ma-list li { padding: 7px 0; font-size: 13px; line-height: 1.4; color: var(--label-2); border-top: 1px solid var(--sep); }
.ma-list li b { color: var(--label); font-weight: 650; }
.ma-list li time { display: block; font-size: 11.5px; color: var(--label-3); }
.ma-list a:hover b { color: var(--accent); }
.ma-none { margin: 4px 0; font-size: 13px; color: var(--label-3); }
body.ma-on { overflow: hidden; }
@media (max-width: 760px) { .ma-grid { grid-template-columns: minmax(0, 1fr); } }

/* The side column's two bars: Cred's split, then the money's */
.ux-who { font-size: 12.5px; font-weight: 650; color: var(--label); }
.ux-who small { margin-left: 4px; font-size: 12.5px; font-weight: 500; color: var(--label-2); }
.ux-who-money { margin-top: 10px; }
.ux-money span { font: 600 13.5px var(--font); color: var(--label-2); }
.ux-money span b { font: 800 18px var(--font-display); margin-right: 2px; }
.ux-money span.up b { color: var(--good); } .ux-money span.down b { color: var(--bad); } .ux-money span.mid b { color: #ffd60a; }
.ux-money span small { margin-left: 4px; color: var(--label-3); font-weight: 500; }

/* Big money: institutions' positioning in a market's side column */
.bm { display: flex; flex-direction: column; gap: 8px; }
.bm-legend { display: flex; flex-wrap: wrap; gap: 6px 16px; font-size: 13px; color: var(--label-2); }
.bm-legend span { display: inline-flex; align-items: baseline; gap: 5px; }
.bm-legend i { align-self: center; width: 12px; height: 2px; border-radius: 1px; background: var(--label); }
.bm-legend i.lev { background: none; border-top: 2px dotted var(--label-3); height: 0; }
.bm-legend b { color: var(--label); font-weight: 750; } .bm-legend b.up { color: var(--good); } .bm-legend b.down { color: var(--bad); }
.bm-legend small { font-size: 12px; color: var(--label-3); }
.bm-plot { position: relative; height: 92px; cursor: crosshair; }
.bm-plot svg { display: block; width: 100%; height: 100%; overflow: visible; }
.bm-plot path { fill: none; }
.bm-plot path.am { stroke: var(--label); stroke-width: 1.8; stroke-linejoin: round; }
.bm-plot path.lev { stroke: var(--label-3); stroke-width: 1.5; stroke-dasharray: 2 3; }
.bm-plot path.area { fill: color-mix(in srgb, var(--label) 8%, transparent); stroke: none; }
.bm-plot line.mid { stroke: var(--sep-strong); stroke-dasharray: 3 4; vector-effect: non-scaling-stroke; }
.bm-lab { position: absolute; right: 0; font-size: 10.5px; font-weight: 600; color: var(--label-3); pointer-events: none; }
.bm-lab.top { top: 0; } .bm-lab.bot { bottom: 0; }
.bm-cross { position: absolute; top: 0; bottom: 0; width: 1px; background: var(--sep-strong); pointer-events: none; }
.bm-cross[hidden], .bm-tip[hidden] { display: none; }
.bm-tip { position: absolute; top: -8px; transform: translateY(-100%); width: 150px; display: flex; flex-direction: column; gap: 2px; padding: 8px 10px; border-radius: 10px; background: var(--surface-2, var(--surface)); box-shadow: 0 8px 24px rgba(0, 0, 0, .35), 0 0 0 .5px var(--sep-strong); font-size: 12px; color: var(--label-2); pointer-events: none; z-index: 5; }
.bm-tip small { color: var(--label-3); font-size: 11px; }
.bm-tip b { color: var(--label); } .bm-tip b.up { color: var(--good); } .bm-tip b.down { color: var(--bad); }
.bm-x { display: flex; justify-content: space-between; font-size: 11px; color: var(--label-3); }
.bm-note { margin: 0; font-size: 12px; line-height: 1.45; color: var(--label-3); }

/* A call with nothing to bet on is a statement, and the list says so quietly */
.pk-callcell > span { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.pk-stmt { font-size: 12px; font-weight: 500; color: var(--label-3); letter-spacing: 0; }

/* The Predictions sidebar, as an open rail like the Feed's */
.pk-side.rail { gap: 30px; }
.pk-side .rx-win .r-st { white-space: normal; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; line-height: 1.3; }
.rx-ic.heat { background: color-mix(in srgb, #ff9f0a 16%, transparent); font-size: 11px; }
.rx-streak { display: flex; flex-direction: column; align-items: flex-end; flex: none; line-height: 1.1; }
.rx-streak b { font: 800 17px/1 var(--font-display); color: #ff9f0a; font-variant-numeric: tabular-nums; }
.rx-streak small, .rx-odds small { font-size: 10.5px; color: var(--label-3); }
.rx-result { flex: none; font-size: 12px; font-weight: 700; }
.rx-result.up { color: var(--good); } .rx-result.down { color: var(--bad); }

/* Bulls vs bears: the best proven caller on each side of a coin or stock */
.rx-ic.vs { width: auto; padding: 0 5px; font-size: 9px; letter-spacing: .04em; color: var(--label); background: var(--fill-3); }
.h2h { display: flex; flex-direction: column; gap: 2px; padding: 4px 0 10px; }
.h2h + .h2h { padding-top: 12px; border-top: 1px solid var(--sep); }
.h2h-top { display: flex; align-items: center; gap: 7px; margin-bottom: 2px; font-size: 13.5px; }
.h2h-top b { font-weight: 700; color: var(--label); }
.h2h-top small { margin-left: auto; font-size: 11.5px; color: var(--label-3); }
.h2h-side { display: flex; align-items: center; gap: 10px; padding: 6px 8px; margin: 0 -8px; border-radius: var(--r-sm); transition: background var(--fast); min-width: 0; }
.h2h-side:hover { background: var(--fill-3); }
.h2h-side .r-txt { flex: 1; min-width: 0; }
.h2h-side .r-st b { font-weight: 650; } .h2h-side .r-st small { font-size: 11.5px; color: var(--label-3); font-weight: 500; }
.h2h-side em { flex: none; font-style: normal; font-size: 12px; font-weight: 700; }
.h2h-side em.up { color: var(--good); } .h2h-side em.down { color: var(--bad); }

/* Promise trackers */
.pt { display: flex; flex-direction: column; gap: 14px; padding: 6px 0 20px; }
.pt-top { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; }
.pt-top h3 { margin: 0; font: 750 20px/1.2 var(--font-display); letter-spacing: -.02em; }
.pt-top p { margin: 4px 0 0; font-size: 13.5px; color: var(--label-2); }
.pt-kept-rate { display: flex; flex-direction: column; align-items: flex-end; flex: none; }
.pt-kept-rate b { font: 800 26px/1 var(--font-display); letter-spacing: -.02em; }
.pt-kept-rate small { font-size: 12px; color: var(--label-2); }
.pt-bar { display: flex; gap: 2px; height: 8px; border-radius: 4px; overflow: hidden; margin-top: 6px; }
.pt-bar i { display: block; width: var(--w); }
.pt-bar i.kept, .pt-legend .kept i, .pt-status.kept { --c: var(--good); }
.pt-bar i.compromise, .pt-legend .compromise i, .pt-status.compromise { --c: #ffd60a; }
.pt-bar i.in_progress, .pt-legend .in_progress i, .pt-status.in_progress { --c: var(--accent); }
.pt-bar i.stalled, .pt-legend .stalled i, .pt-status.stalled { --c: #ff9f0a; }
.pt-bar i.broken, .pt-legend .broken i, .pt-status.broken { --c: var(--bad); }
.pt-bar i.unclear, .pt-legend .unclear i, .pt-status.unclear { --c: var(--label-3); }
.pt-bar i { background: var(--c); }
.pt-legend { display: flex; flex-wrap: wrap; gap: 6px 16px; font-size: 13px; color: var(--label-2); }
.pt-legend span { display: inline-flex; align-items: center; gap: 6px; }
.pt-legend i { width: 8px; height: 8px; border-radius: 50%; background: var(--c); }
.pt-legend b { color: var(--label); font-weight: 700; }
.pt-topics { margin: 2px 0 0; }
.pt-list { display: flex; flex-direction: column; border-top: 1px solid var(--sep); }
.pt-item { border-bottom: 1px solid var(--sep); }
.pt-item summary { display: flex; align-items: center; gap: 14px; padding: 14px 4px; cursor: pointer; list-style: none; }
.pt-item summary::-webkit-details-marker { display: none; }
.pt-item summary .ios-chev { flex: none; width: 14px; height: 14px; fill: none; stroke: var(--label-3); stroke-width: 2.4; transition: transform .2s; }
.pt-item[open] summary .ios-chev { transform: rotate(90deg); }
.pt-status { flex: none; min-width: 92px; padding: 4px 9px; border-radius: var(--r-pill); background: color-mix(in srgb, var(--c) 16%, transparent); color: var(--c); font-size: 12px; font-weight: 700; text-align: center; }
.pt-status.unclear { color: var(--label-2); }
.pt-txt { display: flex; flex-direction: column; gap: 3px; min-width: 0; flex: 1; }
.pt-txt b { font-size: 15px; font-weight: 650; color: var(--label); line-height: 1.35; }
.pt-txt small { font-size: 12.5px; color: var(--label-2); }
.pt-body { display: flex; flex-direction: column; gap: 10px; padding: 0 4px 18px 110px; }
.pt-sum { margin: 0; font-size: 14.5px; line-height: 1.55; color: var(--label); }
.pt-sum.muted { color: var(--label-2); }
.pt-bar-def { margin: 0; font-size: 13px; line-height: 1.45; color: var(--label-2); }
.pt-bar-def span { margin-right: 8px; font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--label-3); }
.pt-tl { margin: 2px 0 0; padding: 0 0 0 14px; list-style: none; border-left: 2px solid var(--sep); display: flex; flex-direction: column; gap: 9px; }
.pt-tl li { position: relative; display: flex; flex-direction: column; gap: 2px; font-size: 13.5px; line-height: 1.45; color: var(--label); }
.pt-tl li::before { content: ""; position: absolute; left: -19px; top: 6px; width: 8px; height: 8px; border-radius: 50%; background: var(--label-3); }
.pt-tl time { font-size: 11.5px; font-weight: 600; color: var(--label-3); }
.pt-tl a { font-size: 12px; font-weight: 600; color: var(--accent); white-space: nowrap; }
.pt-rev { margin: 0; font-size: 13px; color: var(--label-2); }
.pt-meta { font-size: 12px; color: var(--label-3); }
.pt-foot { margin: 4px 0 0; font-size: 12.5px; line-height: 1.5; color: var(--label-3); }
.pt-row .pt-bar { max-width: 360px; height: 6px; }
.ppl-hint { margin: 4px 0 14px; font-size: 14px; color: var(--label-2); }
@media (max-width: 700px) { .pt-body { padding-left: 4px; } .pt-status { min-width: 0; } .pt-top { flex-direction: column; align-items: flex-start; } .pt-kept-rate { align-items: flex-start; } }

/* Admin: promises to review */
.pc-list { display: flex; flex-direction: column; gap: 22px; margin-top: 8px; }
.pc { display: flex; flex-direction: column; gap: 12px; padding-bottom: 22px; border-bottom: 1px solid var(--sep); }
.pc.done { opacity: .5; }
.pc-who { display: flex; align-items: center; gap: 10px; font-size: 14px; }
.pc-who small { color: var(--label-2); }
.pc-who a { margin-left: auto; font-size: 13px; font-weight: 600; color: var(--accent); }
.pc-post { margin: 0; padding: 10px 14px; border-left: 2px solid var(--sep-strong); font-size: 14px; line-height: 1.5; color: var(--label); white-space: pre-wrap; }
.pc-fields { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px 14px; }
.pc-f { display: flex; flex-direction: column; gap: 4px; }
.pc-f.wide { grid-column: 1 / -1; }
.pc-f span { font-size: 12px; font-weight: 600; color: var(--label-2); }
.pc-f input { height: 36px; padding: 0 11px; border: 1px solid var(--sep-strong); border-radius: 10px; background: var(--fill-3); color: var(--label); font: 500 14px var(--font); }
.pc-f input:focus { outline: none; border-color: var(--accent); }
.pc-acts { display: flex; align-items: center; gap: 10px; }
.pc-btn { height: 34px; padding: 0 16px; border: 0; border-radius: var(--r-pill); background: var(--fill-3); color: var(--label); font: 650 14px var(--font); cursor: pointer; }
.pc-btn.go { background: var(--accent); color: #fff; }
.pc-btn:disabled { opacity: .5; cursor: default; }
.pc-msg { font-size: 13px; color: var(--label-2); }
@media (max-width: 700px) { .pc-fields { grid-template-columns: minmax(0, 1fr); } }

/* Promise trackers for people followed only for their promises */
.pp-hero { display: flex; align-items: center; gap: 22px; padding: 18px 0 8px; }
.pp-photo { flex: none; width: 112px; height: 112px; border-radius: 50%; object-fit: cover; object-position: top; background: var(--fill-3); }
.pp-photo.none { display: grid; place-items: center; font: 800 40px var(--font-display); color: var(--label-2); }
.pp-id { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.pp-id small { font-size: 12px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--label-3); }
.pp-id h1 { margin: 0; font: 800 34px/1.1 var(--font-display); letter-spacing: -.03em; }
.pp-id p { margin: 0; font-size: 15px; color: var(--label-2); }
.pt-photo { flex: none; width: 40px; height: 40px; border-radius: 50%; object-fit: cover; object-position: top; background: var(--fill-3); }
.pt-photo.none { display: grid; place-items: center; font: 700 16px var(--font); color: var(--label-2); }
.pt-groups { margin: 0 0 12px; }
.pt-unrev { color: #ff9f0a; font-weight: 600; }
.pt-admin { display: flex; align-items: center; gap: 10px; }
.pt-item.gone { opacity: .4; }
@media (max-width: 700px) { .pp-photo { width: 76px; height: 76px; } .pp-id h1 { font-size: 26px; } }

/* The Promises section */
.pt-totals { display: flex; flex-wrap: wrap; gap: 6px 20px; margin: 2px 0 14px; font-size: 14px; color: var(--label-2); }
.pt-totals b { font: 800 18px var(--font-display); color: var(--label); margin-right: 3px; }
.row-item.pt-row { display: flex; align-items: center; gap: 14px; grid-template-columns: none; }
.row-item.pt-row .who { flex: 1; min-width: 0; }
.row-item.pt-row .score { flex: none; }

/* The call page ends where the post and its analysis end: the side column takes no height of its own and stretches to
   match them. Inside it, the column sits under the header like the Feed's sidebar: no scrollbars, and scrolling over
   it moves it. On narrow screens it stacks below as before. */
@media (min-width: 981px) {
  .dt-grid { align-items: stretch; }
  .dt-rail { contain: size; margin-bottom: -96px; }
  .dt-rail-in.more { -webkit-mask-image: linear-gradient(to bottom, #000 calc(100% - 90px), transparent); mask-image: linear-gradient(to bottom, #000 calc(100% - 90px), transparent); }
  .dt-rail > .dt-rail-in { margin-top: 0; }
  .dt-rail-in { position: sticky; top: 84px; max-height: min(calc(100vh - 100px), 100%); overflow-x: hidden; overflow-y: auto; scrollbar-width: none; }
  .dt-rail-in::-webkit-scrollbar { display: none; }
}

/* Who said it: the person card atop a call's side column */
.wc { display: flex; flex-direction: column; gap: 16px; margin-top: 24px; }
.wc-top { position: relative; display: block; color: inherit; }
.wc-cover { position: relative; display: block; height: 92px; border-radius: 18px; overflow: hidden; background: linear-gradient(135deg, color-mix(in srgb, var(--accent) 35%, transparent), transparent) center / cover no-repeat, var(--fill-3); }
.wc-cover::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to bottom, transparent 35%, var(--bg)); pointer-events: none; }
.wc-id { position: relative; z-index: 1; display: flex; align-items: flex-end; gap: 12px; margin-top: -34px; padding: 0 4px; }
.wc-id .av { flex: none; box-shadow: 0 0 0 3px var(--bg); }
.wc-name { display: flex; flex-direction: column; min-width: 0; flex: 1; padding-bottom: 2px; }
.wc-name b { font-size: 17px; font-weight: 750; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.wc-name small { font-size: 12.5px; color: var(--label-2); overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.wc-score { display: flex; flex-direction: column; align-items: flex-end; flex: none; padding-bottom: 2px; }
.wc-score b { font: 800 30px/1 var(--font-display); letter-spacing: -.03em; }
.wc-score small { font-size: 11.5px; font-weight: 650; color: var(--label-2); }
.wc-score.good b { color: var(--good); } .wc-score.bad b { color: var(--bad); }
.wc-top:hover .wc-name b { color: var(--accent); }
.wc-bio { margin: -4px 0 0; font-size: 13.5px; line-height: 1.45; color: var(--label-2); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.wc-nums { display: grid; grid-template-columns: repeat(var(--n, 3), minmax(0, 1fr)); gap: 10px; padding: 12px 0; border-top: 1px solid var(--sep); border-bottom: 1px solid var(--sep); }
.wc-num { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.wc-num small { font-size: 11.5px; font-weight: 650; color: var(--label-3); }
.wc-num b { font: 800 22px/1.1 var(--font-display); letter-spacing: -.02em; color: var(--label); }
.wc-num b.up { color: var(--good); } .wc-num b.down { color: var(--bad); }
.wc-num span { font-size: 11.5px; color: var(--label-2); }
.wc-strip-h { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; font-size: 12.5px; color: var(--label-2); }
.wc-strip-h > * { white-space: nowrap; }
.wc-strip-h small { font-size: 11.5px; font-weight: 650; color: var(--label-3); }
.wc-strip-h b.up, .wc-strip-h em.up { color: var(--good); } .wc-strip-h b.down, .wc-strip-h em.down { color: var(--bad); }
.wc-strip-h em { font-style: normal; font-weight: 650; }
.wc-strip { display: flex; gap: 3px; height: 26px; margin-top: -8px; }
.wc-strip a { flex: 1; border-radius: 3px; transition: transform .15s, opacity .15s; }
.wc-strip a.right { background: var(--good); } .wc-strip a.wrong { background: var(--bad); }
.wc-strip:hover a { opacity: .45; } .wc-strip a:hover { opacity: 1; transform: scaleY(1.25); }
.wc-hls { display: flex; flex-direction: column; gap: 10px; }
.wc-hl { display: flex; flex-direction: column; gap: 5px; padding: 11px 13px; border-left: 2px solid; border-radius: 0 12px 12px 0; color: inherit; transition: background .15s; }
.wc-hl.miss { border-color: var(--bad); background: color-mix(in srgb, var(--bad) 7%, transparent); }
.wc-hl.best { border-color: var(--good); background: color-mix(in srgb, var(--good) 7%, transparent); }
.wc-hl.miss:hover { background: color-mix(in srgb, var(--bad) 13%, transparent); } .wc-hl.best:hover { background: color-mix(in srgb, var(--good) 13%, transparent); }
.wc-hl small { font-size: 11px; font-weight: 750; letter-spacing: .05em; text-transform: uppercase; }
.wc-hl.miss small { color: var(--bad); } .wc-hl.best small { color: var(--good); }
.wc-hl q { quotes: "“" "”"; font-size: 14px; font-weight: 600; line-height: 1.4; color: var(--label); display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.wc-hl span { font-size: 11.5px; color: var(--label-3); }
.wc-pt { display: flex; flex-direction: column; gap: 8px; color: inherit; }
.wc-pt-h { display: flex; align-items: center; gap: 8px; }
.wc-pt-h b { font-size: 14px; font-weight: 700; }
.wc-pt-h small { font-size: 12.5px; color: var(--label-2); flex: 1; }
.wc-pt-h .ios-chev { width: 13px; height: 13px; fill: none; stroke: var(--label-3); stroke-width: 2.4; }
.wc-pt:hover b { color: var(--accent); }
.wc-pt .pt-bar { margin-top: 0; height: 6px; }
.wc-lives { display: flex; flex-direction: column; gap: 6px; }
.wc-lives > small { font-size: 11.5px; font-weight: 650; color: var(--label-3); }
.wc-live { display: flex; align-items: center; gap: 9px; padding: 8px 10px; border-radius: 10px; background: var(--fill-3); color: var(--label); font-size: 13.5px; font-weight: 550; transition: background .15s; }
.wc-live:hover { background: color-mix(in srgb, var(--accent) 14%, var(--fill-3)); }
.wc-live span { flex: 1; min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.wc-live small { flex: none; font-size: 11.5px; color: var(--accent); font-weight: 650; }
.wc-cta { display: flex; align-items: center; justify-content: center; gap: 6px; height: 40px; border-radius: var(--r-pill); background: var(--accent); color: #fff; font: 650 14px var(--font); transition: filter .15s, transform .15s; }
.wc-cta:hover { filter: brightness(1.1); } .wc-cta:active { transform: scale(.98); }
.wc-cta .ios-chev { width: 13px; height: 13px; fill: none; stroke: #fff; stroke-width: 2.4; }

/* Person card, refined: even stat tiles and receipts you flip between */
.wc-nums { display: grid; grid-template-columns: repeat(var(--n, 3), minmax(0, 1fr)); gap: 8px; padding: 0; border: 0; }
.wc-num { display: flex; flex-direction: column; align-items: flex-start; gap: 3px; min-width: 0; padding: 11px 12px 10px; border-radius: 14px; background: var(--fill-3); }
.wc-num small { font-size: 11px; font-weight: 650; letter-spacing: .02em; color: var(--label-3); }
.wc-num b { font: 800 24px/1 var(--font-display); letter-spacing: -.03em; color: var(--label); }
.wc-num span { max-width: 100%; font-size: 11.5px; color: var(--label-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.wc-rcs { display: flex; flex-direction: column; gap: 4px; }
.wc-rc-tabs { display: flex; align-items: center; gap: 4px; margin-bottom: 2px; }
.wc-rc-tabs small { margin-right: auto; font-size: 11.5px; font-weight: 650; color: var(--label-3); }
.wc-rc-tabs button { height: 26px; padding: 0 11px; border: 0; border-radius: var(--r-pill); background: none; color: var(--label-2); font: 650 12.5px var(--font); cursor: pointer; transition: background .15s, color .15s; }
.wc-rc-tabs button:hover { color: var(--label); }
.wc-rcs[data-rc="wrong"] [data-rc-tab="wrong"] { background: color-mix(in srgb, var(--bad) 16%, transparent); color: var(--bad); }
.wc-rcs[data-rc="right"] [data-rc-tab="right"] { background: color-mix(in srgb, var(--good) 16%, transparent); color: var(--good); }
.wc-rcs[data-rc="wrong"] .wc-rc.right, .wc-rcs[data-rc="right"] .wc-rc.wrong { display: none; }
.wc-rc-list { display: flex; flex-direction: column; }
.wc-rc { display: grid; grid-template-columns: 8px minmax(0, 1fr); column-gap: 10px; padding: 8px 8px; margin: 0 -8px; border-radius: 10px; color: inherit; transition: background .15s; animation: rc-in .25s ease both; }
.wc-rc:hover { background: var(--fill-3); }
.wc-rc i { grid-row: span 2; align-self: start; width: 8px; height: 8px; margin-top: 6px; border-radius: 50%; }
.wc-rc.wrong i { background: var(--bad); } .wc-rc.right i { background: var(--good); }
.wc-rc span { font-size: 13.5px; font-weight: 600; line-height: 1.35; color: var(--label); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.wc-rc small { font-size: 11.5px; color: var(--label-3); }
@keyframes rc-in { from { opacity: 0; transform: translateY(3px); } }

/* Cred analysis, refined: quieter numbering, a bottom line in the verdict's color */
.report-list { gap: 14px; }
.report-list li { grid-template-columns: 18px minmax(0, 1fr); gap: 12px; font-size: 15px; line-height: 1.6; }
.report-list li::before { width: auto; height: auto; margin-top: 1px; border-radius: 0; background: none; font-size: 13px; font-weight: 700; color: var(--label-3); font-variant-numeric: tabular-nums; justify-content: end; }
.report-bottom { margin: 18px 0 0; padding: 11px 14px; border-left: 2px solid var(--label-3); border-radius: 0 12px 12px 0; background: var(--fill-2); font-size: 14px; line-height: 1.55; color: var(--label); }
.report-bottom.wrong { border-color: var(--bad); } .report-bottom.right { border-color: var(--good); }
.report-bottom b:first-child { display: block; margin-bottom: 3px; font-size: 11px; font-weight: 750; letter-spacing: .06em; text-transform: uppercase; color: var(--label-2); }
.report-bottom b { font-weight: 650; }
/* The profile button closes the side column */
.dt-rail-in > .wc-cta { margin: 28px 0 8px; }
.wc-cta small { margin-left: 6px; font-size: 12.5px; font-weight: 500; opacity: .8; }
/* Bottom line under a thin light rule, no panel; finding numbers sit on their first line */
.report-bottom, .report-bottom.wrong, .report-bottom.right { margin: 20px 0 0; padding: 14px 0 0; border: 0; border-top: 1px solid rgba(255, 255, 255, .22); border-radius: 0; background: none; }
:root[data-theme="light"] .report-bottom { border-top-color: rgba(0, 0, 0, .18); }
.report-list li::before { display: block; align-self: start; margin-top: 0; line-height: 1.6; font-size: 13px; text-align: right; }

/* Profile: a real cover banner, the face over its edge, the Cred ring beside */
.pf-hero { position: relative; margin-top: 4px; }
.pf-cover { height: 230px; border-radius: 24px; background: linear-gradient(135deg, color-mix(in srgb, var(--accent) 40%, transparent), color-mix(in srgb, var(--bad) 20%, transparent)) center / cover no-repeat, var(--fill-3); position: relative; overflow: hidden; }
.pf-cover::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to bottom, transparent 45%, color-mix(in srgb, var(--bg) 70%, transparent) 85%, var(--bg)); }
.pf-cover.none { height: 120px; }
.pf-body { position: relative; display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 22px; align-items: end; margin-top: -72px; padding: 0 26px; }
.pf-av .av { box-shadow: 0 0 0 5px var(--bg); border-radius: 50%; }
.pf-main { min-width: 0; padding-bottom: 4px; }
.pf-main h1 { margin: 0; font: 800 34px/1.1 var(--font-display); letter-spacing: -.035em; display: flex; align-items: center; gap: 8px; }
.pf-main h1 .check { width: 22px; height: 22px; }
.pf-handle { margin-top: 4px; font-size: 14.5px; color: var(--label-2); }
.pf-handle b { color: var(--label); font-weight: 650; }
.pf-bio { margin: 10px 0 0; max-width: 640px; font-size: 14.5px; line-height: 1.5; color: var(--label-2); overflow-wrap: anywhere; }
.pf-actions { display: flex; align-items: center; gap: 16px; margin-top: 14px; }
.pf-ring { align-self: center; margin-top: 60px; }
.pf-ring .big-ring { width: 136px; height: 136px; }
/* Their numbers: even tiles, each with a meter */
.pf-tiles { display: grid; grid-template-columns: repeat(var(--n, 4), minmax(0, 1fr)); gap: 10px; margin-top: 26px; }
.pf-tile { display: flex; flex-direction: column; gap: 4px; padding: 15px 16px 14px; border-radius: 16px; background: var(--fill-3); min-width: 0; }
.pf-tile small { font-size: 12px; font-weight: 650; color: var(--label-3); }
.pf-tile b { font: 800 30px/1.05 var(--font-display); letter-spacing: -.03em; color: var(--label); }
.pf-tile b.up { color: var(--good); } .pf-tile b.down { color: var(--bad); }
.pf-tile span { font-size: 12.5px; color: var(--label-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pf-meter { display: block; height: 4px; margin-top: 6px; border-radius: 2px; background: var(--fill-2); overflow: hidden; }
.pf-meter i { display: block; height: 100%; width: var(--w); border-radius: 2px; background: var(--label-2); }
.pf-meter i.up { background: var(--good); } .pf-meter i.down { background: var(--bad); }
/* Their track record at a glance */
.pf-strip-wrap { margin-top: 18px; }
.pf-strip-h { display: flex; justify-content: space-between; align-items: baseline; font-size: 13px; color: var(--label-2); margin-bottom: 8px; }
.pf-strip-h small { font-size: 12px; font-weight: 650; color: var(--label-3); }
.pf-strip-h b.up { color: var(--good); } .pf-strip-h b.down { color: var(--bad); }
.pf-strip { display: flex; gap: 3px; height: 30px; }
.pf-strip a { flex: 1; max-width: 22px; border-radius: 3px; transition: transform .15s, opacity .15s; }
.pf-strip a.right { background: var(--good); } .pf-strip a.wrong { background: var(--bad); }
.pf-strip:hover a { opacity: .45; } .pf-strip a:hover { opacity: 1; transform: scaleY(1.2); }
.pf-rail .wc-live { margin-top: 6px; }
@media (max-width: 860px) {
  .pf-body { grid-template-columns: minmax(0, 1fr); gap: 10px; margin-top: -56px; padding: 0 14px; }
  .pf-ring { margin-top: 0; justify-self: start; }
  .pf-main h1 { font-size: 27px; }
  .pf-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
/* The photo overlaps the banner's edge; name and bio start just below it */
.pf-body { align-items: start; margin-top: -64px; }
.pf-main { padding: 74px 0 0; }
.pf-ring { margin-top: 70px; }
@media (max-width: 860px) { .pf-body { margin-top: -54px; } .pf-main { padding-top: 0; } .pf-ring { margin-top: 0; } }

/* Profile hero: photo over the banner's edge, name and bio stacked under it */
.pf-body { grid-template-columns: minmax(0, 1fr) auto; align-items: start; gap: 24px; margin-top: -60px; padding: 0 28px; }
.pf-left { min-width: 0; }
.pf-main { padding: 14px 0 0; }
.pf-ring { margin-top: 74px; }
/* Similar on Cred */
.pf-similar .rx-win { padding: 8px; }
.pf-sim-score { display: flex; flex-direction: column; align-items: flex-end; flex: none; line-height: 1.1; }
.pf-sim-score b { font: 800 19px/1 var(--font-display); letter-spacing: -.02em; color: var(--label); }
.pf-sim-score small { font-size: 10.5px; color: var(--label-3); white-space: nowrap; }
.pf-sim-score.hi b { color: var(--good); } .pf-sim-score.lo b { color: var(--bad); }
@media (max-width: 860px) { .pf-body { grid-template-columns: minmax(0, 1fr); margin-top: -50px; padding: 0 14px; } .pf-ring { margin-top: 0; justify-self: start; } }

/* Profile header, compact: a shorter banner, the photo over its edge with actions beside it, then one slim stat row */
.pf-cover { height: 168px; border-radius: 22px; }
.pf-cover.none { height: 84px; }
.pf-top { position: relative; display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; margin-top: -46px; padding: 0 20px; }
.pf-top .av { box-shadow: 0 0 0 4px var(--bg); border-radius: 50%; }
.pf-actions { display: flex; align-items: center; gap: 10px; margin: 0 0 4px; }
.pf-x { display: inline-flex; align-items: center; height: 34px; padding: 0 14px; border-radius: var(--r-pill); background: var(--fill-3); color: var(--label); font: 600 13.5px var(--font); transition: background .15s; }
.pf-x:hover { background: var(--fill-2); }
.pf-main { padding: 12px 20px 0; }
.pf-main h1 { margin: 0; font: 800 26px/1.15 var(--font-display); letter-spacing: -.03em; display: flex; align-items: center; gap: 7px; }
.pf-main h1 .check { width: 19px; height: 19px; }
.pf-handle { margin-top: 3px; font-size: 13.5px; color: var(--label-2); }
.pf-handle b { color: var(--label); font-weight: 650; }
.pf-bio { margin: 8px 0 0; max-width: 620px; font-size: 14px; line-height: 1.5; color: var(--label-2); }
.pf-stats { display: flex; margin: 18px 0 0; padding: 6px 0; border-top: 1px solid var(--sep); border-bottom: 1px solid var(--sep); }
.pf-stat { position: relative; flex: 1; min-width: 0; display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 10px 8px; border: 0; border-radius: 12px; background: none; color: inherit; font: inherit; text-align: center; cursor: pointer; transition: background .18s, transform .12s; }
.pf-stat + .pf-stat::before { content: ""; position: absolute; left: 0; top: 24%; bottom: 24%; width: 1px; background: var(--sep); }
.pf-stat:hover { background: var(--fill-3); }
.pf-stat:hover::before, .pf-stat:hover + .pf-stat::before { opacity: 0; }
.pf-stat:active { transform: scale(.97); }
.pf-stat small { font-size: 10.5px; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; color: var(--label-3); }
.pf-stat b { font: 800 22px/1.15 var(--font-display); letter-spacing: -.02em; color: var(--label); font-variant-numeric: tabular-nums; }
.pf-stat b.up { color: var(--good); } .pf-stat b.down { color: var(--bad); }
.pf-stat > span { max-width: 100%; font-size: 11.5px; color: var(--label-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pf-cred { flex-direction: row; justify-content: center; gap: 10px; }
.pf-cred svg { width: 40px; height: 40px; flex: none; transform: rotate(-90deg); }
.pf-cred .trk { fill: none; stroke: var(--fill-2); stroke-width: 4; }
.pf-cred .arc { fill: none; stroke: var(--label-2); stroke-width: 4; stroke-linecap: round; transition: stroke-dasharray 1.1s var(--ease); }
.pf-cred .arc.good { stroke: var(--good); } .pf-cred .arc.bad { stroke: var(--bad); }
.pf-cred-v { display: flex; flex-direction: column; align-items: flex-start; line-height: 1.1; }
.pf-cred-v span { font-size: 11.5px; color: var(--label-2); }
@media (max-width: 860px) {
  .pf-cover { height: 120px; }
  .pf-top { margin-top: -36px; padding: 0 12px; }
  .pf-main { padding: 10px 12px 0; }
  .pf-stats { overflow-x: auto; scrollbar-width: none; }
  .pf-stat { flex: 0 0 auto; padding: 10px 14px; }
}
/* Profile header: the banner faded back, the stats on it as frosted glass, a bigger photo and name tucked up into it */
.pf-cover-wrap { position: relative; }
.pf-cover { height: 210px; }
.pf-cover::after { background: linear-gradient(180deg, rgba(0, 0, 0, .35), rgba(0, 0, 0, .5) 55%, var(--bg)); }
.pf-stats { position: absolute; right: 18px; bottom: 22px; z-index: 2; margin: 0; padding: 4px; gap: 2px; border: 1px solid rgba(255, 255, 255, .12); border-radius: 18px; background: rgba(18, 18, 20, .55); -webkit-backdrop-filter: blur(16px) saturate(1.4); backdrop-filter: blur(16px) saturate(1.4); }
.pf-stat { flex: none; min-width: 92px; padding: 8px 12px; border-radius: 14px; }
.pf-stat + .pf-stat::before { background: rgba(255, 255, 255, .12); }
.pf-stat:hover { background: rgba(255, 255, 255, .08); }
.pf-stat small { font-size: 9.5px; color: rgba(255, 255, 255, .55); }
.pf-stat b { font-size: 19px; color: #fff; }
.pf-stat > span { font-size: 11px; color: rgba(255, 255, 255, .7); }
.pf-cred { min-width: 0; gap: 8px; }
.pf-cred svg { width: 34px; height: 34px; }
.pf-cred .trk { stroke: rgba(255, 255, 255, .15); }
.pf-cred-v span { color: rgba(255, 255, 255, .7); }
.pf-top { margin-top: -82px; padding: 0 22px; }
.pf-top .av { box-shadow: 0 0 0 5px var(--bg); }
.pf-main { padding: 12px 22px 0; }
.pf-main h1 { font-size: 32px; }
.pf-main h1 .check { width: 22px; height: 22px; }
.pf-handle { font-size: 14.5px; margin-top: 4px; }
.pf-bio { font-size: 14.5px; margin-top: 10px; }
@media (max-width: 860px) {
  .pf-cover { height: 140px; }
  .pf-stats { position: static; margin: 12px 0 0; overflow-x: auto; scrollbar-width: none; background: var(--fill-3); border-color: var(--sep); }
  .pf-stat small { color: var(--label-3); } .pf-stat b { color: var(--label); } .pf-stat > span { color: var(--label-2); }
  .pf-top { margin-top: -50px; }
  .pf-main h1 { font-size: 26px; }
}
.wc-num-link { color: inherit; transition: background .15s; }
.wc-num-link:hover { background: var(--fill-2); }

/* Profile header: photo and name on the left with the Cred badge on the photo's ring; buttons and stats on the right */
.pf-grid { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 28px; margin-top: -82px; padding: 0 22px; }
.pf-left { min-width: 0; }
.pf-av { position: relative; display: inline-block; }
.pf-av .av { box-shadow: 0 0 0 5px var(--bg); border-radius: 50%; }
.pf-badge { position: absolute; top: 6px; right: -34px; display: inline-flex; align-items: baseline; gap: 6px; height: 30px; padding: 0 12px; border: 1px solid var(--sep-strong); border-radius: var(--r-pill); background: color-mix(in srgb, var(--bg) 80%, transparent); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); color: var(--label); font: inherit; cursor: pointer; align-items: center; box-shadow: 0 6px 18px rgba(0, 0, 0, .35); transition: transform .15s; }
.pf-badge:hover { transform: translateY(-1px); }
.pf-badge b { font: 800 17px/1 var(--font-display); letter-spacing: -.02em; }
.pf-badge > span { font-size: 12.5px; font-weight: 650; color: var(--label-2); }
.pf-badge.good b, .pf-badge.good > span { color: var(--good); } .pf-badge.bad b, .pf-badge.bad > span { color: var(--bad); }
.pf-badge.bad { border-color: color-mix(in srgb, var(--bad) 45%, transparent); } .pf-badge.good { border-color: color-mix(in srgb, var(--good) 45%, transparent); }
.pf-right { display: flex; flex-direction: column; align-items: flex-end; gap: 16px; padding-top: 96px; }
.pf-right .pf-actions { margin: 0; }
.pf-right .pf-stats { position: static; display: flex; margin: 0; padding: 0; border: 0; background: none; -webkit-backdrop-filter: none; backdrop-filter: none; }
.pf-right .pf-stat { min-width: 96px; padding: 6px 14px; }
.pf-right .pf-stat + .pf-stat::before { background: var(--sep); }
.pf-right .pf-stat:hover { background: var(--fill-3); }
.pf-right .pf-stat small { font-size: 10px; color: var(--label-3); }
.pf-right .pf-stat b { font-size: 21px; color: var(--label); }
.pf-right .pf-stat b.up { color: var(--good); } .pf-right .pf-stat b.down { color: var(--bad); }
.pf-right .pf-stat > span { font-size: 11.5px; color: var(--label-2); }
.pf-grid .pf-main { padding: 12px 0 0; }
@media (max-width: 860px) {
  .pf-grid { grid-template-columns: minmax(0, 1fr); gap: 12px; margin-top: -50px; padding: 0 12px; }
  .pf-right { align-items: flex-start; padding-top: 0; }
  .pf-right .pf-stats { overflow-x: auto; max-width: 100%; scrollbar-width: none; }
  .pf-badge { right: -24px; }
}
/* Profile stats at the top of the side column: small even tiles */
.pf-rail-stats { display: grid; grid-template-columns: repeat(var(--n, 3), minmax(0, 1fr)); gap: 8px; }
.pf-rail-stats .pf-stat { align-items: flex-start; text-align: left; gap: 3px; padding: 11px 12px 10px; border-radius: 14px; background: var(--fill-3); min-width: 0; }
.pf-rail-stats .pf-stat + .pf-stat::before { display: none; }
.pf-rail-stats .pf-stat:hover { background: var(--fill-2); }
.pf-rail-stats .pf-stat small { font-size: 10px; color: var(--label-3); }
.pf-rail-stats .pf-stat b { font-size: 21px; color: var(--label); }
.pf-rail-stats .pf-stat b.up { color: var(--good); } .pf-rail-stats .pf-stat b.down { color: var(--bad); }
.pf-rail-stats .pf-stat > span { font-size: 11px; color: var(--label-2); }
/* The Cred badge: centered on the bottom of the photo's ring, like a name tag */
.pf-badge { top: auto; right: auto; bottom: -8px; left: 50%; transform: translateX(-50%); height: 28px; padding: 0 11px; white-space: nowrap; }
.pf-badge:hover { transform: translateX(-50%) translateY(-1px); }
.pf-badge:focus:not(:focus-visible) { outline: none; }
.pf-grid .pf-main { padding-top: 18px; }
/* One left edge for the banner, photo, name, bio, tabs and feed; one right edge for the buttons and side column.
   A touch more room between the bio and the tabs. */
.pf-grid { padding: 0; }
.layout.profile { margin-top: 26px; }
/* On wide screens the profile's posts run a little further right, closing some of the gap before the side column. */
@media (min-width: 1181px) { .layout.profile { grid-template-columns: minmax(0, 800px) 320px; } }
/* A profile's side column runs to the bottom of the window like the call page's, fading out while there's more of it to scroll to. */
@media (min-width: 1061px) {
  .layout.profile .pf-rail { max-height: calc(100vh - 80px); padding-bottom: 28px; margin-bottom: -96px; }
  .layout.profile .pf-rail.more { -webkit-mask-image: linear-gradient(to bottom, #000 calc(100% - 90px), transparent); mask-image: linear-gradient(to bottom, #000 calc(100% - 90px), transparent); }
}
/* The banner reads clearly at the top and only fades into the page toward the bottom, where the photo and name sit. */
.pf-cover::after { background: linear-gradient(180deg, transparent 0%, transparent 40%, color-mix(in srgb, var(--bg) 45%, transparent) 72%, var(--bg) 100%); }
/* Boards: a little more room under the section tabs; the market chips on the left, the sort on the right. */
.board-filters { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-top: 22px; }
.board-filters .board-cats { padding: 0; }
/* The bookmark beside a post's X link: shown on hover like the X, and always once saved. */
.save-link { margin-left: auto; flex: none; width: 28px; height: 28px; border: 0; border-radius: 50%; display: grid; place-items: center; background: none; color: var(--label-3); cursor: pointer; opacity: 0; transition: opacity var(--fast), background var(--fast), color var(--fast); }
.save-link + .x-link { margin-left: 2px; }
.post:hover .save-link, .save-link:focus-visible, .save-link.on { opacity: 1; }
.save-link:hover { background: var(--fill-3); color: var(--label); }
.save-link.on { color: var(--accent); }
.save-link svg { width: 15px; height: 15px; fill: currentColor; }
@media (hover: none) { .save-link { opacity: 1; } }
/* The banner shows from its top down (X banners are taller than this frame), fading out where it's cropped. */
.pf-cover { background-position: center top; }
/* Wide screens: the banner runs 31px further down and fades out completely level with the middle of Follow. The
   grid pulls up by the same amount, so the photo, name and buttons stay where they were. */
@media (min-width: 861px) {
  .pf-cover { height: 241px; }
  .pf-cover::after { background: linear-gradient(180deg, transparent 0%, transparent 35%, color-mix(in srgb, var(--bg) 55%, transparent) 70%, var(--bg) 100%); }
  .pf-grid { margin-top: -113px; }
}
/* Promises they can't act on yet (a candidate not in office): quiet grey, apart from not rated. */
.pt-bar i.not_started, .pt-legend .not_started i, .pt-status.not_started { --c: var(--label-2); }
.pt-bar i.moot, .pt-legend .moot i, .pt-status.moot { --c: var(--label-2); }
/* Cred Pro track record */
.pk-record { display: inline-block; margin: 10px 0 2px; font-size: 13px; font-weight: 600; color: var(--accent); }
.pk-record:hover { text-decoration: underline; }
.rec-page .rec-stats { margin: 22px 0 6px; max-width: 760px; }
.rec-h { margin: 30px 0 12px; font: 700 15px var(--font); color: var(--label); }
/* Cred Pro hub */
.pp-test { align-self: center; padding: 6px 12px; border-radius: var(--r-pill); background: var(--fill-3); color: var(--label-2); font-size: 12px; font-weight: 600; }
.pro-body { margin-top: 18px; }
.pro-body .board-cats { margin-bottom: 14px; }
.pro-body .board-cats small { margin-left: 6px; color: var(--label-3); font-weight: 600; }
.pp-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 12px; }
.pp-card { display: flex; flex-direction: column; gap: 12px; padding: 16px 18px; border-radius: 20px; background: var(--fill-3); box-shadow: inset 0 0 0 1px var(--sep); }
.pp-top { display: flex; align-items: center; gap: 8px; font-size: 12px; color: var(--label-3); }
.pp-when { margin-left: auto; }
.pp-tier { padding: 3px 8px; border-radius: var(--r-pill); font-size: 10.5px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; }
.pp-tier.proven { background: color-mix(in srgb, var(--good) 18%, transparent); color: var(--good); }
.pp-tier.trial { background: var(--fill-2); color: var(--label-2); }
.pp-call { display: flex; align-items: flex-start; gap: 10px; color: var(--label); font: 700 16px/1.35 var(--font); }
.pp-call:hover span { text-decoration: underline; }
.pp-who { display: flex; align-items: center; gap: 8px; color: var(--label); font-size: 13.5px; font-weight: 600; }
.pp-who small { margin-left: auto; color: var(--label-3); font-weight: 500; }
.pp-nums { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; padding-top: 10px; border-top: 1px solid var(--sep); font: 700 15px var(--font); color: var(--label); }
.pp-nums small { display: block; margin-bottom: 2px; font-size: 11px; font-weight: 600; color: var(--label-3); }
.pp-nums em { font-style: normal; font-size: 13px; }
.pp-nums em.up, .pp-row-v b.up { color: var(--good); } .pp-nums em.down, .pp-row-v b.down { color: var(--bad); }
.pp-acts { display: flex; align-items: center; justify-content: space-between; gap: 10px; font-size: 13px; }
.pp-trade { height: 34px; padding: 0 16px; border: 0; border-radius: var(--r-pill); background: var(--accent); color: #fff; font: 650 13.5px var(--font); cursor: pointer; }
.pp-trade:hover { filter: brightness(1.1); }
.pp-close { height: 32px; padding: 0 14px; border: 0; border-radius: var(--r-pill); background: var(--fill-2); color: var(--label); font: 600 13px var(--font); cursor: pointer; }
.pp-held { color: var(--label-3); font-size: 13px; }
.pp-book { padding: 4px 18px; margin-top: 16px; }
.pp-row { display: grid; grid-template-columns: minmax(0, 1fr) auto 72px; align-items: center; gap: 14px; padding: 12px 0; border-top: 1px solid var(--sep); }
.pp-row:first-child { border-top: 0; }
.pp-row-call { min-width: 0; color: var(--label); font-weight: 600; font-size: 14px; }
.pp-row-call small { display: block; margin-top: 2px; color: var(--label-3); font-weight: 500; font-size: 12px; }
.pp-row-v { text-align: right; }
.pp-row-v small { display: block; color: var(--label-3); font-size: 11.5px; }
.pp-alert-acts { display: flex; gap: 10px; align-items: center; margin: 4px 0 8px; }
.rec-topic + .rec-topic { margin-top: 26px; }
.rec-h .pp-tier { margin-left: 8px; vertical-align: middle; }
.nav-badge { display: inline-grid; place-items: center; min-width: 17px; height: 17px; margin-left: 5px; padding: 0 5px; border-radius: 9px; background: var(--bad); color: #fff; font: 700 10.5px var(--font); font-style: normal; vertical-align: 1px; }
/* Predictions: the strip on every view (title, then Picks · Smart money · Portfolio · Track record) */
.pd-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 20px; flex-wrap: wrap; margin: 8px 0 22px; }
.pd-title h1 { margin: 0; font: 800 34px/1.1 var(--font-display); letter-spacing: -.03em; color: var(--label); }
.pd-title span { display: block; margin-top: 6px; font-size: 14px; color: var(--label-2); }
.pd-seg { display: inline-flex; gap: 4px; padding: 4px; border-radius: var(--r-pill); background: var(--fill-3); box-shadow: inset 0 0 0 1px var(--sep); }
.pd-seg a { display: inline-flex; align-items: center; gap: 7px; height: 36px; padding: 0 14px; border-radius: var(--r-pill); color: var(--label-2); font: 600 14px var(--font); transition: background var(--fast), color var(--fast); }
.pd-seg a svg { width: 15px; height: 15px; fill: currentColor; opacity: .85; }
.pd-seg a:hover { color: var(--label); }
.pd-seg a.on { background: var(--label); color: var(--bg); }
.pd-seg a em { font-style: normal; font-size: 12px; font-weight: 700; padding: 1px 7px; border-radius: var(--r-pill); background: var(--fill-2); }
.pd-seg a em.up { color: var(--good); } .pd-seg a em.down { color: var(--bad); }
.pd-seg a.on em { background: color-mix(in srgb, var(--bg) 12%, transparent); }
@media (max-width: 860px) { .pd-seg { width: 100%; overflow-x: auto; scrollbar-width: none; } .pd-seg a span { white-space: nowrap; } .pd-title h1 { font-size: 28px; } }
.mk4 .pd-head + .mk4-head { margin-top: 0; }
/* Locked Pro picks: one teaser line above the list */
.pk-teaser { display: flex; align-items: center; gap: 10px; width: 100%; margin: 12px 0 4px; padding: 11px 16px; border: 0; border-radius: 14px; background: color-mix(in srgb, var(--accent) 12%, transparent); color: var(--label); font: 500 14px var(--font); text-align: left; cursor: pointer; }
.pk-teaser .lock-ic { width: 15px; height: 15px; fill: var(--accent); flex: none; }
.pk-teaser em { margin-left: auto; font-style: normal; font-weight: 700; color: var(--accent); white-space: nowrap; }
.pk-person b .pp-tier { margin-left: 6px; font-size: 9.5px; padding: 2px 6px; vertical-align: 2px; }
.pk-go { display: inline-flex; align-items: center; gap: 8px; }
.pk-paper { height: 30px; padding: 0 11px; border: 0; border-radius: var(--r-pill); background: var(--fill-2); color: var(--label); font: 650 12.5px var(--font); white-space: nowrap; cursor: pointer; transition: background var(--fast); }
.pk-paper:hover { background: var(--accent); color: #fff; }
.pk-paper.on { display: inline-grid; place-items: center; width: 30px; padding: 0; color: var(--good); }
/* The bell */
.bell-btn { position: relative; }
.bell-btn svg { width: 18px; height: 18px; fill: currentColor; }
.bell-btn .nav-badge { position: absolute; top: -2px; right: -4px; margin: 0; }
.bell-panel { position: fixed; top: 72px; right: max(16px, calc((100vw - 1440px) / 2 + 24px)); z-index: 70; width: min(380px, calc(100vw - 32px)); max-height: min(560px, calc(100vh - 100px)); overflow-y: auto; padding: 16px; border-radius: 22px; background: var(--bg-elev, var(--bg)); box-shadow: 0 18px 50px rgba(0, 0, 0, .45), inset 0 0 0 1px var(--sep); animation: rise .25s var(--ease) both; }
.bell-panel[hidden] { display: none; }
.bell-h { display: flex; align-items: center; justify-content: space-between; }
.bell-h b { font: 800 18px var(--font-display); color: var(--label); }
.bell-sub { margin: 6px 0 12px; font-size: 13px; color: var(--label-2); }
.bell-topics { display: flex; flex-wrap: wrap; gap: 6px; }
.bell-topics button { height: 30px; padding: 0 12px; border: 0; border-radius: var(--r-pill); background: var(--fill-3); color: var(--label-2); font: 600 12.5px var(--font); cursor: pointer; }
.bell-topics button.on { background: var(--label); color: var(--bg); }
.bell-acts { display: flex; align-items: center; gap: 8px; margin: 12px 0; }
.bell-list { display: flex; flex-direction: column; border-top: 1px solid var(--sep); }
.bell-item { display: flex; gap: 10px; padding: 11px 2px; border-bottom: 1px solid var(--sep); color: var(--label-2); font-size: 13.5px; line-height: 1.35; }
.bell-item b { color: var(--label); }
.bell-item small { display: flex; align-items: center; gap: 6px; margin-top: 4px; font-size: 11.5px; color: var(--label-3); }
.bell-item small .pp-tier { font-size: 9px; padding: 2px 6px; }
.bell-item:hover b { text-decoration: underline; }
.bell-empty { margin: 14px 0 4px; font-size: 13px; color: var(--label-3); }
.bell-foot { display: block; margin-top: 12px; font-size: 13px; font-weight: 600; color: var(--accent); }
/* Predictions · Picks: one clean column of cards */
.pc-page { max-width: 820px; }
.pc-page .pd-head { margin-bottom: 26px; }
.pc-bar { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.pc-bar .n-seg { margin: 0; }
.pc-menus { display: flex; gap: 6px; }
.pc-menu select { appearance: none; -webkit-appearance: none; height: 36px; padding: 0 30px 0 14px; border: 0; border-radius: var(--r-pill); background: var(--fill-3) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='m7 10 5 5 5-5' fill='none' stroke='%238e8e93' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E") no-repeat right 10px center / 14px; color: var(--label); font: 600 13.5px var(--font); cursor: pointer; }
.pc-menu select:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.pc-page .pk-subs { margin-top: 12px; }
.pc-page .pk-teaser { margin: 18px 0 0; }
.pc-list { display: flex; flex-direction: column; gap: 12px; margin-top: 18px; }
.pc { display: flex; flex-direction: column; gap: 14px; padding: 18px 20px; border-radius: 22px; background: var(--fill-3); box-shadow: inset 0 0 0 1px var(--sep); }
.pc-head { display: flex; align-items: center; gap: 10px; }
.pc-who { display: flex; align-items: center; gap: 10px; min-width: 0; color: var(--label); }
.pc-who b { display: block; font-size: 14.5px; font-weight: 650; }
.pc-who small { display: block; font-size: 12.5px; color: var(--label-3); }
.pc-who:hover b { text-decoration: underline; }
.pc-head .pp-tier { margin-left: 2px; }
.pc-topic { margin-left: auto; display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; color: var(--label-3); white-space: nowrap; }
.pc-call { display: flex; align-items: flex-start; gap: 12px; color: var(--label); font: 750 20px/1.3 var(--font-display); letter-spacing: -.01em; }
.pc-call:hover span { text-decoration: underline; text-decoration-thickness: 1.5px; text-underline-offset: 3px; }
.pc-stand { display: flex; gap: 28px; flex-wrap: wrap; }
.pc-stand span { display: flex; flex-direction: column; gap: 2px; }
.pc-stand small { font-size: 11.5px; font-weight: 600; color: var(--label-3); }
.pc-stand b { font: 700 16px var(--font); color: var(--label); font-variant-numeric: tabular-nums; }
.pc-stand em { font-style: normal; font-size: 12.5px; font-weight: 700; margin-top: 1px; }
.pc-stand em.up { color: var(--good); } .pc-stand em.down { color: var(--bad); }
.pc-due b { color: var(--accent); }
.pc-acts { display: flex; align-items: center; gap: 8px; padding-top: 14px; border-top: 1px solid var(--sep); }
.pc-acts:empty { display: none; }
.pc-paper, .pc-live { display: inline-flex; align-items: center; gap: 6px; height: 36px; padding: 0 16px; border: 0; border-radius: var(--r-pill); font: 650 13.5px var(--font); cursor: pointer; transition: filter var(--fast), background var(--fast); }
.pc-paper { background: var(--label); color: var(--bg); }
.pc-paper:hover { filter: brightness(.9); }
.pc-live { margin-left: auto; background: var(--fill-2); color: var(--label); }
.pc-live:hover { background: var(--accent); color: #fff; }
.pc-live svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.pc-held { font-size: 13px; font-weight: 600; color: var(--good); }
.pc.locked { gap: 12px; }
.pc-lock { display: flex; align-items: center; justify-content: space-between; gap: 14px; width: 100%; padding: 0; border: 0; background: none; color: var(--label); font: 750 20px/1.3 var(--font-display); text-align: left; cursor: pointer; }
.pc-unlock { display: inline-flex; align-items: center; gap: 6px; flex: none; height: 32px; padding: 0 14px; border-radius: var(--r-pill); background: var(--accent); color: #fff; font: 650 13px var(--font); }
.pc-unlock .lock-ic { width: 13px; height: 13px; fill: currentColor; }
@media (max-width: 640px) { .pc { padding: 16px; } .pc-call, .pc-lock { font-size: 17px; } .pc-stand { gap: 18px; } .pc-topic { display: none; } }
/* Predictions · Picks, middle ground: a featured top pick, compact rows, a slim side column */
.pc-page { max-width: none; }
.pl-layout { margin-top: 18px; }
.pl-lead { position: relative; margin-bottom: 14px; }
.pl-lead-tag { position: absolute; top: -9px; left: 18px; z-index: 1; padding: 2px 10px; border-radius: var(--r-pill); background: var(--accent); color: #fff; font: 700 11px var(--font); letter-spacing: .04em; text-transform: uppercase; }
.pl-lead .pc { padding-top: 22px; }
.pc-spark { align-self: center; }
.pc-spark .pk-spark { width: 120px; height: 40px; }
.pl-list { display: flex; flex-direction: column; border-radius: 20px; background: var(--fill-3); box-shadow: inset 0 0 0 1px var(--sep); overflow: hidden; }
.pl { display: grid; grid-template-columns: 34px minmax(0, 1fr) 170px auto; align-items: center; gap: 14px; padding: 14px 18px; border-top: 1px solid var(--sep); }
.pl:first-child { border-top: 0; }
.pl-main { min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.pl-meta { display: flex; align-items: center; gap: 8px; min-width: 0; font-size: 12.5px; color: var(--label-3); white-space: nowrap; overflow: hidden; }
.pl-meta b { color: var(--label); font-weight: 650; font-size: 13.5px; }
.pl-meta a:hover b { text-decoration: underline; }
.pl-meta .pp-tier { font-size: 9.5px; padding: 2px 6px; }
.pl-topic { display: inline-flex; align-items: center; gap: 5px; }
.pl-call { display: flex; align-items: center; gap: 8px; min-width: 0; color: var(--label); font: 650 15.5px/1.35 var(--font); }
.pl-call span { overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.pl-call:hover span { text-decoration: underline; }
.pl-lock { padding: 0; border: 0; background: none; cursor: pointer; text-align: left; }
.pl-stand { display: flex; align-items: center; gap: 10px; justify-content: flex-end; }
.pl-stand > span { display: flex; flex-direction: column; align-items: flex-end; gap: 1px; }
.pl-v { display: flex; align-items: baseline; gap: 6px; }
.pl-v b { font: 700 15px var(--font); color: var(--label); font-variant-numeric: tabular-nums; }
.pl-v em { font-style: normal; font-size: 12px; font-weight: 600; color: var(--label-3); }
.pl-v em.up { color: var(--good); } .pl-v em.down { color: var(--bad); }
.pl-stand small { font-size: 11.5px; color: var(--label-3); }
.pl-stand small b { color: var(--accent); font-weight: 650; }
.pl-acts { display: flex; align-items: center; gap: 6px; justify-content: flex-end; }
.pl-paper { height: 32px; padding: 0 13px; border: 0; border-radius: var(--r-pill); background: var(--label); color: var(--bg); font: 650 12.5px var(--font); cursor: pointer; }
.pl-paper:hover { filter: brightness(.9); }
.pl-held { display: inline-grid; place-items: center; width: 32px; height: 32px; border-radius: 50%; background: var(--fill-2); color: var(--good); font-weight: 700; }
.pl-acts .pc-live { margin: 0; height: 32px; padding: 0 12px; font-size: 12.5px; }
.pl.locked .pc-unlock { height: 30px; font-size: 12px; border: 0; cursor: pointer; }
.pl-side .rx-mod + .rx-mod { margin-top: 6px; }
@media (max-width: 1100px) { .pl { grid-template-columns: 34px minmax(0, 1fr) auto; } .pl-stand { display: none; } }
@media (max-width: 640px) { .pl { grid-template-columns: 30px minmax(0, 1fr); } .pl-acts { grid-column: 2; justify-content: flex-start; } }
/* Predictions sidebar: your people and your markets */
.fav-row { display: flex; justify-content: center; margin-top: 10px; }
.fav-star { height: 32px; padding: 0 14px; border: 0; border-radius: var(--r-pill); background: var(--fill-3); color: var(--label-2); font: 600 13px var(--font); cursor: pointer; transition: background var(--fast), color var(--fast); }
.fav-star:hover { color: var(--label); }
.fav-star.on { color: #ffd60a; background: color-mix(in srgb, #ffd60a 12%, transparent); }
.fav-side .rx-mod + .rx-mod { margin-top: 6px; }
.fav-empty { margin: 4px 0 8px; font-size: 13px; line-height: 1.45; color: var(--label-3); }
.fav-n { min-width: 26px; height: 22px; padding: 0 7px; border-radius: var(--r-pill); background: color-mix(in srgb, var(--accent) 16%, transparent); color: var(--accent); font: 700 12px/22px var(--font); text-align: center; }
.fav-n.zero { background: var(--fill-3); color: var(--label-3); }
.fav-ic { display: inline-grid; place-items: center; width: 30px; height: 30px; flex: none; }
.fav-ic .pk-dot { width: 10px; height: 10px; }
.fav-sug { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
/* Predictions · Picks as a terminal: feed left, watchlist right, paper account on top */
.tm-grid { display: grid; grid-template-columns: minmax(0, 1fr) 330px; gap: 28px; align-items: start; padding-bottom: 60px; }
.tm-main { min-width: 0; }
.tm-acct { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; padding: 14px 18px; border-radius: 18px; background: var(--fill-3); box-shadow: inset 0 0 0 1px var(--sep); }
.tm-acct-lab { font-size: 12px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--label-3); }
.tm-acct b { font: 800 22px var(--font-display); color: var(--label); font-variant-numeric: tabular-nums; }
.tm-acct em { font-style: normal; font-weight: 700; font-size: 14px; }
.tm-acct em.up { color: var(--good); } .tm-acct em.down { color: var(--bad); }
.tm-acct-sub { font-size: 13px; color: var(--label-3); }
.tm-acct-go { margin-left: auto; font-size: 13px; font-weight: 600; color: var(--accent); }
.tm-bar { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin: 18px 0 12px; flex-wrap: wrap; }
.tm-scope { display: inline-flex; gap: 4px; }
.tm-scope button { height: 34px; padding: 0 14px; border: 0; border-radius: var(--r-pill); background: none; color: var(--label-2); font: 650 14.5px var(--font); cursor: pointer; }
.tm-scope button.on { background: var(--label); color: var(--bg); }
.tm-topics { display: flex; width: max-content; max-width: 100%; overflow-x: auto; scrollbar-width: none; margin: 0 0 4px; }
.tm-sub { display: inline-flex; align-items: center; gap: 6px; }
.tm .pk-teaser { margin-top: 12px; }
.tm .pk-list { margin-top: 12px; }
/* The watchlist */
.wl { position: sticky; top: 84px; display: flex; flex-direction: column; max-height: calc(100vh - 100px); border-radius: 20px; background: var(--fill-3); box-shadow: inset 0 0 0 1px var(--sep); overflow: hidden; }
.wl-search { display: flex; align-items: center; gap: 8px; margin: 12px 12px 8px; padding: 0 12px; height: 38px; border-radius: 12px; background: var(--fill-2); }
.wl-search svg { width: 16px; height: 16px; fill: var(--label-3); flex: none; }
.wl-search input { flex: 1; min-width: 0; border: 0; outline: 0; background: none; color: var(--label); font: 500 14px var(--font); }
.wl-tabs { display: flex; gap: 2px; padding: 0 12px 8px; border-bottom: 1px solid var(--sep); }
.wl-tabs button { flex: 1; height: 32px; border: 0; border-radius: 10px; background: none; color: var(--label-2); font: 650 13px var(--font); cursor: pointer; }
.wl-tabs button.on { background: var(--fill-2); color: var(--label); }
.wl-body { overflow-y: auto; padding: 4px 8px 12px; scrollbar-width: thin; }
.wl-g { margin: 12px 8px 4px; font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--label-3); }
.wl-row { display: flex; align-items: center; gap: 6px; padding: 2px 4px; border-radius: 12px; }
.wl-row:hover { background: var(--fill-2); }
.wl-main { flex: 1; min-width: 0; display: flex; align-items: center; gap: 10px; padding: 6px 4px; color: var(--label); }
.wl-ic { display: inline-grid; place-items: center; width: 28px; height: 28px; flex: none; }
.wl-ic .pk-dot { width: 10px; height: 10px; }
.wl-n { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.wl-n b { font-size: 13.5px; font-weight: 650; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.wl-n small { font-size: 11.5px; color: var(--label-3); }
.wl-c { min-width: 24px; height: 20px; padding: 0 7px; border-radius: var(--r-pill); background: color-mix(in srgb, var(--accent) 16%, transparent); color: var(--accent); font: 700 11.5px/20px var(--font); text-align: center; }
.wl-c.zero { background: none; color: var(--label-3); }
.wl-star { width: 30px; height: 30px; flex: none; border: 0; border-radius: 50%; background: none; color: var(--label-3); font-size: 16px; cursor: pointer; }
.wl-star:hover { background: var(--fill-3); color: var(--label); }
.wl-star.on { color: #ffd60a; }
.wl-row .follow.sm { flex: none; }
.wl-empty { margin: 16px 10px; font-size: 13px; line-height: 1.5; color: var(--label-3); }
/* The order ticket, top left */
@media (max-width: 1100px) { .tm-grid { grid-template-columns: minmax(0, 1fr); } .wl { position: static; max-height: 480px; order: -1; } }
/* The order ticket and the bell sit on a solid card, so the page never shows through them. */
.bell-panel { background: color-mix(in srgb, var(--bg) 94%, var(--label) 6%); -webkit-backdrop-filter: none; backdrop-filter: none; }
/* Predictions · Picks, clean: one quiet toolbar, small icon actions, a TradingView-style watchlist */
.tm-tool { display: flex; align-items: center; gap: 4px; padding: 6px; border-radius: 14px; background: var(--fill-3); box-shadow: inset 0 0 0 1px var(--sep); overflow-x: auto; scrollbar-width: none; }
.tm-scope, .tm-topics { display: inline-flex; gap: 2px; flex: none; }
.tm-scope button, .tm-topics button { height: 32px; padding: 0 12px; border: 0; border-radius: 9px; background: none; color: var(--label-2); font: 600 13.5px var(--font); white-space: nowrap; cursor: pointer; transition: background var(--fast), color var(--fast); }
.tm-scope button:hover, .tm-topics button:hover { color: var(--label); }
.tm-scope button.on, .tm-topics button.on { background: var(--fill-2); color: var(--label); }
.tm-div { width: 1px; height: 20px; margin: 0 6px; background: var(--sep); flex: none; }
.tm-grow { flex: 1; }
.tm-tool .pc-menu select { height: 32px; border-radius: 9px; background-color: transparent; font-size: 13px; }
.tm-tool .pc-menu select:hover { background-color: var(--fill-2); }
.tm-tracked { display: flex; align-items: center; gap: 16px; margin-top: 10px; padding: 10px 14px; border-radius: 12px; color: var(--label-2); font-size: 13px; transition: background var(--fast); }
.tm-tracked:hover { background: var(--fill-3); }
.tm-tracked svg { width: 14px; height: 14px; fill: var(--accent); }
.tm-tracked b { color: var(--label); }
.tm-tracked b.up { color: var(--good); } .tm-tracked b.down { color: var(--bad); }
.tm-tracked em { margin-left: auto; font-style: normal; font-weight: 600; color: var(--accent); }
.tm .pk-teaser { margin-top: 10px; }
.tm .pk-list { margin-top: 6px; }
/* Row actions: two small grey icons instead of pills */
.tm .pk-go { gap: 4px; }
.tk-btn, .tm .pk-go .pk-act { display: inline-grid; place-items: center; width: 32px; height: 32px; padding: 0; border: 0; border-radius: 9px; background: none; color: var(--label-3); cursor: pointer; transition: background var(--fast), color var(--fast); }
.tk-btn svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linejoin: round; }
.tk-btn:hover, .tm .pk-go .pk-act:hover { background: var(--fill-2); color: var(--label); }
.tk-btn.on { color: var(--accent); }
.tk-btn.on svg { fill: currentColor; }
.tm .pk-go .pk-act svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2; }
/* The watchlist: a header with +, then a dense list */
.wl { padding: 0; }
.wl-h { display: flex; align-items: center; justify-content: space-between; padding: 14px 14px 10px; }
.wl-h b { font: 700 15px var(--font); color: var(--label); }
.wl-plus { min-width: 30px; height: 30px; padding: 0 10px; border: 0; border-radius: 9px; background: var(--fill-2); color: var(--label); font: 600 16px/1 var(--font); cursor: pointer; }
.wl-plus.on { font-size: 13px; background: var(--accent); color: #fff; }
.wl-search { margin: 0 12px 6px; }
.wl-body { padding: 0 6px 10px; }
.wl-g { margin: 10px 10px 2px; font-size: 10.5px; }
.wl-row { padding: 0 2px; border-radius: 9px; }
.wl-main { gap: 10px; padding: 7px 6px; }
.wl-ic { width: 24px; height: 24px; }
.wl-n b { font-size: 13px; font-weight: 600; }
.wl-n small { font-size: 11px; }
.wl-add, .wl-x { width: 26px; height: 26px; flex: none; border: 0; border-radius: 8px; background: none; color: var(--label-3); font: 600 15px/1 var(--font); cursor: pointer; }
.wl-add:hover { background: var(--accent); color: #fff; }
.wl-add.on { color: var(--good); }
.wl-x { opacity: 0; }
.wl-row:hover .wl-x { opacity: 1; }
.wl-x:hover { background: var(--fill-2); color: var(--label); }
/* The watchlist sidebar, final: a title, one search, a short list */
.wl-h { padding: 16px 16px 10px; }
.wl-h b { font-size: 16px; }
.wl-search { position: relative; margin: 0 12px 8px; }
.wl-clear { position: absolute; right: 8px; width: 22px; height: 22px; border: 0; border-radius: 50%; background: var(--fill-3); color: var(--label-2); font-size: 14px; line-height: 1; cursor: pointer; }
.wl-body { padding: 2px 6px 12px; }
.wl-g { margin: 14px 10px 4px; }
.wl-main { padding: 8px 6px; }
/* Watchlist, TradingView-style: flush to the side, a title and +, tight rows in sections */
.tm-grid { grid-template-columns: minmax(0, 1fr) 300px; gap: 0; }
.tm-main { padding-right: 28px; }
.w2 { position: sticky; top: 76px; align-self: start; display: flex; flex-direction: column; max-height: calc(100vh - 92px); border-left: 1px solid var(--sep); }
.w2-h { display: flex; align-items: center; justify-content: space-between; height: 44px; padding: 0 8px 0 16px; border-bottom: 1px solid var(--sep); }
.w2-h b { font: 600 14px var(--font); color: var(--label); }
.w2-plus { display: grid; place-items: center; width: 30px; height: 30px; border: 0; border-radius: 6px; background: none; color: var(--label-2); cursor: pointer; }
.w2-plus svg { width: 18px; height: 18px; fill: currentColor; }
.w2-plus:hover { background: var(--fill-3); color: var(--label); }
.w2-body { overflow-y: auto; scrollbar-width: thin; }
.w2-sec, .w2-row { display: grid; grid-template-columns: minmax(0, 1fr) 84px 64px 22px; align-items: center; gap: 6px; padding: 0 8px 0 16px; }
.w2-sec { height: 30px; border-bottom: 1px solid var(--sep); font-size: 11.5px; color: var(--label-3); }
.w2-sec span:not(:first-child) { text-align: right; }
.w2-row { height: 38px; border-bottom: 1px solid var(--sep); cursor: pointer; font-size: 13.5px; }
.w2-row:hover { background: var(--fill-3); }
.w2-row.on { box-shadow: inset 2px 0 0 var(--accent); background: var(--fill-3); }
.w2-name { display: flex; align-items: center; gap: 8px; min-width: 0; }
.w2-name b { font-weight: 600; color: var(--label); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.w2-ic { display: inline-grid; place-items: center; width: 20px; height: 20px; flex: none; overflow: hidden; border-radius: 50%; }
.w2-ic .pk-dot { width: 8px; height: 8px; }
.w2-num, .w2-chg { text-align: right; font-variant-numeric: tabular-nums; color: var(--label); white-space: nowrap; }
.w2-num.muted { color: var(--label-3); font-size: 12px; }
.w2-chg { color: var(--label-2); }
.w2-chg.up { color: var(--good); } .w2-chg.down { color: var(--bad); }
.w2-x { width: 20px; height: 20px; padding: 0; border: 0; border-radius: 4px; background: none; color: var(--label-3); font-size: 15px; line-height: 1; cursor: pointer; opacity: 0; }
.w2-row:hover .w2-x { opacity: 1; }
.w2-x:hover { background: var(--fill-2); color: var(--label); }
.w2-empty { padding: 28px 16px; text-align: center; color: var(--label-3); font-size: 13px; }
.w2-add-big { margin-top: 8px; height: 34px; padding: 0 16px; border: 0; border-radius: 8px; background: var(--fill-2); color: var(--label); font: 600 13px var(--font); cursor: pointer; }
@media (max-width: 1100px) { .tm-grid { grid-template-columns: minmax(0, 1fr); } .tm-main { padding-right: 0; } .w2 { position: static; border-left: 0; border-top: 1px solid var(--sep); margin-top: 24px; max-height: none; } }
/* Add symbol: a centered dialog, one input, tabs, clean rows */
.ws-layer { position: fixed; inset: 0; z-index: 90; display: grid; place-items: start center; padding-top: 12vh; }
.ws-layer[hidden] { display: none; }
.ws-layer .scrim { position: absolute; inset: 0; background: rgba(0, 0, 0, .55); }
.ws { position: relative; width: min(640px, calc(100vw - 32px)); max-height: 70vh; display: flex; flex-direction: column; border-radius: 14px; background: color-mix(in srgb, var(--bg) 92%, var(--label) 8%); box-shadow: 0 24px 60px rgba(0, 0, 0, .55), inset 0 0 0 1px var(--sep); overflow: hidden; animation: rise .18s var(--ease) both; }
.ws-h { display: flex; align-items: center; justify-content: space-between; padding: 16px 16px 8px 20px; }
.ws-h b { font: 600 17px var(--font); color: var(--label); }
.ws-close { width: 30px; height: 30px; border: 0; border-radius: 6px; background: none; color: var(--label-2); font-size: 20px; line-height: 1; cursor: pointer; }
.ws-close:hover { background: var(--fill-3); }
.ws-q { display: flex; align-items: center; gap: 10px; margin: 0 16px; padding: 0 12px; height: 42px; border-bottom: 1px solid var(--sep); }
.ws-q svg { width: 18px; height: 18px; fill: var(--label-3); flex: none; }
.ws-q input { flex: 1; min-width: 0; border: 0; outline: 0; background: none; color: var(--label); font: 500 16px var(--font); }
.ws-tabs { display: flex; gap: 4px; padding: 10px 16px; }
.ws-tabs button { height: 28px; padding: 0 12px; border: 0; border-radius: 14px; background: none; color: var(--label-2); font: 600 12.5px var(--font); cursor: pointer; }
.ws-tabs button.on { background: var(--label); color: var(--bg); }
.ws-list { overflow-y: auto; padding: 0 8px 8px; border-top: 1px solid var(--sep); }
.ws-row { display: grid; grid-template-columns: 24px minmax(0, 150px) minmax(0, 1fr) auto 30px; align-items: center; gap: 12px; height: 44px; padding: 0 8px; border-bottom: 1px solid var(--sep); }
.ws-row:hover { background: var(--fill-3); }
.ws-ic { display: grid; place-items: center; width: 24px; height: 24px; overflow: hidden; border-radius: 50%; }
.ws-ic .pk-dot { width: 9px; height: 9px; }
.ws-sym { font: 700 14px var(--font); color: var(--label); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ws-desc { font-size: 13px; color: var(--label-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ws-tag { font-size: 12px; color: var(--label-3); white-space: nowrap; }
.ws-add { width: 28px; height: 28px; border: 0; border-radius: 6px; background: none; color: var(--label-2); font: 600 18px/1 var(--font); cursor: pointer; }
.ws-add:hover { background: var(--accent); color: #fff; }
.ws-add.on { color: var(--good); font-size: 15px; }
.ws-none { padding: 24px; text-align: center; font-size: 13px; color: var(--label-3); }
/* Picks rows: a name and one short line under it, nothing squeezed */
.pk-person small { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pk-tierword { font-weight: 700; }
.pk-tierword.proven { color: var(--good); }
.pk-tierword.trial { color: var(--label-2); }
/* Add symbol: section labels, and no visible scrollbars */
.ws-g { margin: 14px 8px 4px; font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--label-3); }
.ws-list, .w2-body { scrollbar-width: none; }
.ws-list::-webkit-scrollbar, .w2-body::-webkit-scrollbar { display: none; }
/* Dragging watchlist rows: a grab cursor, the row fades while held, a line where it'll land */
.w2-row[draggable="true"] { cursor: pointer; }
.w2-row[draggable="true"]:active { cursor: grabbing; }
.w2-row.dragging { opacity: .35; }
.w2-row.drop-before { box-shadow: inset 0 2px 0 var(--accent); }
.w2-row.drop-after { box-shadow: inset 0 -2px 0 var(--accent); }

/* A topic picked: back, the topic, then its tickers or leagues on one scrolling strip */
.tm-drill { flex: none; }
.tm-topics .tm-back { width: 32px; padding: 0; font-size: 20px; line-height: 1; color: var(--label); }
.tm-subs { display: flex; gap: 2px; flex: 1 1 auto; min-width: 0; overflow-x: auto; scrollbar-width: none; scroll-behavior: smooth; padding-left: 6px; margin-left: 2px; border-left: 1px solid var(--sep); -webkit-mask-image: linear-gradient(90deg, transparent, #000 10px, #000 calc(100% - 28px), transparent); mask-image: linear-gradient(90deg, transparent, #000 10px, #000 calc(100% - 28px), transparent); }
.tm-subs::-webkit-scrollbar { display: none; }
.tm-subs button { display: inline-flex; align-items: center; gap: 6px; flex: none; height: 32px; padding: 0 11px; border: 0; border-radius: 9px; background: none; color: var(--label-2); font: 600 13.5px var(--font); white-space: nowrap; cursor: pointer; transition: background var(--fast), color var(--fast); }
.tm-subs button:hover { color: var(--label); }
.tm-subs button.on { background: var(--fill-2); color: var(--label); }
.tm-subs button img, .tm-subs button .av, .tm-subs button svg { width: 16px; height: 16px; border-radius: 50%; flex: none; }

/* Tracked strip on the picks: the total, then a chip per trade with its return */
.tt-bar { display: flex; align-items: center; gap: 10px; margin-top: 10px; padding: 6px 6px 6px 12px; border-radius: 14px; background: var(--fill-3); box-shadow: inset 0 0 0 1px var(--sep); }
.tt-sum { display: inline-flex; align-items: center; gap: 8px; flex: none; color: var(--label-2); font: 600 13px var(--font); }
.tt-sum svg { width: 13px; height: 13px; fill: var(--accent); }
.tt-sum b, .tt-chip b { font-variant-numeric: tabular-nums; font-weight: 700; }
.tt-sum b.up, .tt-chip b.up { color: var(--good); } .tt-sum b.down, .tt-chip b.down { color: var(--bad); }
.tt-chips { display: flex; gap: 4px; flex: 1 1 auto; min-width: 0; overflow-x: auto; scrollbar-width: none; padding-left: 10px; border-left: 1px solid var(--sep); }
.tt-chips::-webkit-scrollbar { display: none; }
.tt-chip { display: inline-flex; align-items: center; gap: 7px; flex: none; height: 30px; padding: 0 11px; border-radius: 9px; color: var(--label); font: 600 13px var(--font); transition: background var(--fast); }
.tt-chip:hover { background: var(--fill-2); }
.tt-chip img { width: 16px; height: 16px; border-radius: 50%; }
.tt-all { flex: none; padding: 0 10px; font: 600 13px var(--font); color: var(--accent); }

/* The Tracked page: your total and its line, then the trades beside the one you're looking at */
.tr-page { --target: #ffd60a; }
.tr-page .pro-body { margin-top: 8px; }
.tr-sum { display: grid; grid-template-columns: minmax(220px, auto) minmax(0, 1fr); align-items: end; gap: 40px; padding: 8px 0 26px; border-bottom: 1px solid var(--sep); }
.tr-total { display: flex; flex-direction: column; gap: 4px; }
.tr-total small, .trd-vs small, .trd-f small { font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--label-3); }
.tr-total b { font: 800 44px/1.05 var(--font-display); letter-spacing: -.035em; font-variant-numeric: tabular-nums; color: var(--label); }
.tr-total em { font-style: normal; font: 650 15px var(--font); font-variant-numeric: tabular-nums; }
.tr-total > span { font-size: 13px; color: var(--label-3); }
.tr-total em.up, .tr-v b.up, .trd-vs b.up, .tr-curve svg.up { color: var(--good); }
.tr-total em.down, .tr-v b.down, .trd-vs b.down, .tr-curve svg.down { color: var(--bad); }
.tr-curve { position: relative; height: 92px; min-width: 0; }
.tr-curve svg { display: block; }
.tr-zero { stroke: var(--sep-strong); stroke-dasharray: 3 4; }
.tr-curve-line { fill: none; stroke: currentColor; stroke-width: 2; stroke-linejoin: round; }
.tr-curve-now { fill: currentColor; }
.tr-curve-note { position: absolute; right: 0; bottom: 6px; font-size: 13px; color: var(--label-3); }
.tr-grid { display: grid; grid-template-columns: 340px minmax(0, 1fr); gap: 32px; padding-top: 22px; }
.tr-list { display: flex; flex-direction: column; gap: 2px; position: sticky; top: 88px; align-self: start; }
.tr-row { display: grid; grid-template-columns: 30px minmax(0, 1fr) 64px 76px; align-items: center; gap: 12px; padding: 11px 12px; border-radius: 14px; color: var(--label); transition: background var(--fast); }
.tr-row:hover { background: var(--fill-3); }
.tr-row.on { background: var(--fill-2); }
.tr-logo img { width: 30px; height: 30px; border-radius: 50%; display: block; }
.tr-glyph { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; background: var(--fill-2); font: 750 13px var(--font); color: var(--label-2); }
.trd-logo .tr-glyph { width: 40px; height: 40px; font-size: 16px; }
.tr-name { display: flex; flex-direction: column; min-width: 0; text-align: left; }
.tr-name b, .tr-name small { text-align: left; }
.tr-name b { font-size: 14.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tr-name small { font-size: 12px; color: var(--label-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tr-sparksvg polyline { fill: none; stroke-width: 1.7; stroke-linejoin: round; stroke-linecap: round; }
.tr-sparksvg.up polyline { stroke: var(--good); } .tr-sparksvg.down polyline { stroke: var(--bad); }
.tr-sparksvg line { stroke: var(--label-3); stroke-width: 1; stroke-dasharray: 2 3; }
.tr-v { display: flex; flex-direction: column; align-items: flex-end; font-variant-numeric: tabular-nums; }
.tr-v b { font-size: 14px; }
.tr-v small { font-size: 12px; color: var(--label-3); }

/* One trade: you against the caller, the chart, the facts, the post it came from */
.tr-detail { min-width: 0; }
.trd-h { display: flex; align-items: flex-start; gap: 14px; }
.trd-logo img { width: 40px; height: 40px; border-radius: 50%; display: block; }
.trd-t { min-width: 0; }
.trd-t h2 { margin: 0 0 6px; font: 750 22px/1.25 var(--font-display); letter-spacing: -.02em; }
.trd-by { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; color: var(--label-2); }
.trd-by b { color: var(--label); }
.trd-by:hover b { text-decoration: underline; }
.trd-vs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); margin: 22px 0 6px; }
.trd-vs > div { display: flex; flex-direction: column; gap: 3px; padding: 0 18px; border-left: 1px solid var(--sep); min-width: 0; }
.trd-vs > div:first-child { padding-left: 0; border-left: 0; }
.trd-vs b { font: 800 26px/1.15 var(--font-display); letter-spacing: -.02em; font-variant-numeric: tabular-nums; color: var(--label); }
.trd-vs > div:last-child b { font-size: 18px; line-height: 1.66; }
.trd-vs span { font-size: 12.5px; color: var(--label-3); font-variant-numeric: tabular-nums; }
.trd-chart { position: relative; height: 340px; margin: 14px 0 4px; }
.trd-chart svg { display: block; overflow: visible; }
.trd-wait { height: 100%; border-radius: 14px; background: linear-gradient(90deg, var(--fill-3), var(--fill-2), var(--fill-3)); background-size: 200% 100%; animation: shimmer 1.4s linear infinite; opacity: .5; }
.trd-nochart { display: grid; place-items: center; height: 100%; font-size: 13px; color: var(--label-3); }
.trc-grid { stroke: var(--sep); stroke-width: 1; }
.trc-pre { fill: none; stroke: var(--label-3); stroke-width: 1.6; stroke-linejoin: round; }
.trc-line { fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linejoin: round; }
.trc-entry { stroke: var(--accent); stroke-width: 1; stroke-dasharray: 4 4; }
.trc-target { stroke: var(--target); stroke-width: 1; stroke-dasharray: 6 4; opacity: .8; }
.trc-axis { font: 650 11px var(--font); font-variant-numeric: tabular-nums; fill: var(--label-3); }
.trc-axis.e { fill: var(--accent); } .trc-axis.t { fill: var(--target); } .trc-axis.n { fill: currentColor; }
.trc-pill rect { fill: var(--glass-strong); stroke: var(--sep-strong); }
.trc-pill text { font: 650 11px var(--font); fill: var(--label); }
.trc-pill line { stroke: var(--label-3); stroke-width: 1; stroke-dasharray: 2 3; }
.trc-pill circle { stroke: var(--bg); stroke-width: 2; }
.trc-pill.call circle { fill: var(--label); }
.trc-pill.you circle { fill: var(--accent); }
.trc-pill.you rect { fill: color-mix(in srgb, var(--accent) 24%, var(--bg)); stroke: color-mix(in srgb, var(--accent) 50%, transparent); }
.trc-now { fill: currentColor; }
.trc-now-ring { fill: currentColor; transform-box: fill-box; transform-origin: center; animation: trpulse 2s ease-out infinite; }
@keyframes trpulse { 0% { transform: scale(.5); opacity: .45; } 100% { transform: scale(1.7); opacity: 0; } }
.trd-chart .hc-hover { stroke: var(--label-3); stroke-dasharray: 3 3; }
.trd-chart .hc-dot { fill: currentColor; stroke: var(--bg); stroke-width: 2; }
.trd-prog { margin: 10px 0 0; }
.trd-bar { height: 6px; border-radius: 3px; background: var(--fill-2); overflow: hidden; }
.trd-bar i { display: block; width: var(--w); height: 100%; border-radius: 3px; background: linear-gradient(90deg, var(--accent), var(--target)); transition: width .6s var(--ease); }
.trd-prog-l { display: flex; justify-content: space-between; margin-top: 7px; font-size: 12px; color: var(--label-3); font-variant-numeric: tabular-nums; }
.trd-prog-l b { color: var(--label-2); font-weight: 650; }
.trd-facts { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); margin: 24px 0 0; padding: 16px 0; border-top: 1px solid var(--sep); border-bottom: 1px solid var(--sep); }
.trd-f { display: flex; flex-direction: column; gap: 3px; padding: 0 16px; border-left: 1px solid var(--sep); min-width: 0; }
.trd-f:first-child { padding-left: 0; border-left: 0; }
.trd-f b { font: 700 16px var(--font); font-variant-numeric: tabular-nums; color: var(--label); }
.trd-f span { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; color: var(--label-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.trd-live { width: 6px; height: 6px; border-radius: 50%; background: var(--good); box-shadow: 0 0 0 3px var(--good-bg); }
.trd-src { margin: 22px 0 0; padding: 2px 0 2px 16px; border-left: 2px solid var(--sep-strong); }
.trd-src p { margin: 0; font-size: 14.5px; line-height: 1.55; color: var(--label-2); white-space: pre-line; display: -webkit-box; -webkit-line-clamp: 5; -webkit-box-orient: vertical; overflow: hidden; }
.trd-src footer { display: flex; flex-wrap: wrap; gap: 6px 16px; margin-top: 10px; font-size: 13px; color: var(--label-3); }
.trd-src footer a { font-weight: 600; color: var(--accent); }
.trd-acts { display: flex; align-items: center; gap: 10px; margin-top: 22px; }
.trd-untrack { margin-left: auto; height: 34px; padding: 0 14px; border: 0; border-radius: var(--r-pill); background: none; color: var(--label-3); font: 600 13px var(--font); cursor: pointer; transition: color var(--fast), background var(--fast); }
.trd-untrack:hover { color: var(--bad); background: var(--fill-3); }
@media (max-width: 900px) {
  .tr-sum { grid-template-columns: 1fr; gap: 14px; }
  .tr-grid { grid-template-columns: 1fr; }
  .tr-list { position: static; }
  .trd-facts { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 14px; }
  .trd-f:nth-child(3) { padding-left: 0; border-left: 0; }
  .trd-chart { height: 260px; }
}

/* The drilled-in bar: back and the topic in a white pill, the tickers level with them */
.tm-tool .tm-topics { margin: 0; align-items: center; }
.tm-tool .tm-subs { align-items: center; align-self: stretch; }
.tm-topics .tm-cur, .tm-topics .tm-cur:hover { background: var(--label); color: var(--bg); }
.tm-topics .tm-back { display: grid; place-items: center; }
.tm-subs button { line-height: 1; }
.tm-subs button .lg { margin-right: 1px; }
/* Tickers without a logo: their letters on a color of their own */
.lg.tint { background: var(--tint); }
.lg.tint b { color: #fff; font-size: calc(var(--s) * var(--fit, .34)); letter-spacing: -.03em; }
.lg img.now { transition: none; }
/* The list carries on as you scroll */
.pk-chunk { display: contents; }
.pk-divider { display: flex; align-items: center; gap: 12px; padding: 22px 8px 10px; color: var(--label-3); font-size: 12px; font-weight: 650; letter-spacing: .04em; text-transform: uppercase; }
.pk-divider::before, .pk-divider::after { content: ""; flex: 1; height: 1px; background: var(--sep); }
.pk-sentinel { display: flex; justify-content: center; gap: 6px; padding: 28px 0 40px; }
.pk-sentinel i { width: 6px; height: 6px; border-radius: 50%; background: var(--label-3); animation: pkdots 1s ease-in-out infinite; }
.pk-sentinel i:nth-child(2) { animation-delay: .15s; } .pk-sentinel i:nth-child(3) { animation-delay: .3s; }
@keyframes pkdots { 0%, 100% { opacity: .25; transform: translateY(0); } 50% { opacity: 1; transform: translateY(-3px); } }

/* Track: a tinted + you can't miss; solid with a check once tracking */
.tk-btn { width: 30px; height: 30px; border-radius: 50%; background: color-mix(in srgb, var(--accent) 16%, transparent); color: var(--accent); }
.tk-btn svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.tk-btn:hover { background: color-mix(in srgb, var(--accent) 28%, transparent); color: var(--accent); }
.tk-btn.on, .tk-btn.on:hover { background: var(--accent); color: #fff; }
.tk-btn.on svg { fill: none; }
.tk-btn:active { transform: scale(.92); }
.tk-demo { display: inline-grid; place-items: center; flex: none; vertical-align: middle; cursor: default; }
.tk-demo.big { width: 52px; height: 52px; }
.tk-demo.big svg { width: 24px; height: 24px; }
p .tk-demo { width: 22px; height: 22px; margin: -3px 2px 0; }
p .tk-demo svg { width: 12px; height: 12px; }
.tt-sum svg { fill: none; stroke: var(--accent); stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.tt-hint { gap: 12px; padding: 8px 14px 8px 8px; color: var(--label-2); font-size: 13.5px; }
.tt-hint b { color: var(--accent); }
.tr-empty { display: flex; flex-direction: column; align-items: center; gap: 10px; max-width: 440px; margin: 70px auto; text-align: center; }
.tr-empty > b { margin-top: 6px; font: 750 22px var(--font-display); letter-spacing: -.02em; }
.tr-empty p { margin: 0; font-size: 14.5px; line-height: 1.6; color: var(--label-2); }
.tr-go { margin-top: 10px; height: 38px; padding: 0 18px; display: inline-flex; align-items: center; border-radius: var(--r-pill); background: var(--accent); color: #fff; font: 650 14px var(--font); }
/* The tracked row: return, then its Track toggle */
.tr-row { grid-template-columns: 30px minmax(0, 1fr) 64px 72px 30px; cursor: pointer; }
.tr-row:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
.trd-t h2 a { color: inherit; }
.trd-t h2 a:hover { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 4px; }
/* Around this call: the crowd and the money, in the same quiet grid as the facts */
.tr-ins { margin-top: 26px; }
.tr-ins h3 { margin: 0 0 12px; font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--label-3); }
.tri-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 18px 0; }
.tri { display: flex; flex-direction: column; gap: 3px; padding: 0 16px; border-left: 1px solid var(--sep); min-width: 0; }
.tri small { font-size: 12px; color: var(--label-3); }
.tri b { font: 700 17px var(--font); font-variant-numeric: tabular-nums; color: var(--label); }
.tri b.up { color: var(--good); } .tri b.down { color: var(--bad); }
.tri span { font-size: 12.5px; color: var(--label-3); line-height: 1.4; }

/* Round ticker logos; a quiet spinner where something is loading, never a dark sheet over the page */
.lg.round { border-radius: 50%; }
.lg.round img { padding: calc(var(--s) * .16); }
.busy { background: transparent; -webkit-backdrop-filter: none; backdrop-filter: none; place-items: start center; padding-top: 22vh; pointer-events: none; }
.tm-body { position: relative; transition: opacity .2s ease; }
.tm-body.loading { opacity: .45; pointer-events: none; }
.tm-body.loading::after { content: ""; position: absolute; left: 50%; top: 120px; width: 28px; height: 28px; margin-left: -14px; border-radius: 50%; border: 3px solid var(--fill-2); border-top-color: var(--label); animation: busy-spin .7s linear infinite; }
.ld { display: grid; place-items: center; min-height: 340px; }
.ld-spin { width: 30px; height: 30px; border-radius: 50%; border: 3px solid var(--fill-2); border-top-color: var(--label); animation: busy-spin .7s linear infinite; }

/* Track: a crisp ring with a +, never squeezed; solid blue with a check once tracking */
.tk-btn { flex: none; width: 28px; height: 28px; min-width: 28px; aspect-ratio: 1; padding: 0; border-radius: 50%; background: transparent; box-shadow: inset 0 0 0 1.5px color-mix(in srgb, var(--accent) 70%, transparent); color: var(--accent); transition: background var(--fast), box-shadow var(--fast), color var(--fast), transform .12s; }
.tk-btn svg { width: 14px; height: 14px; stroke-width: 2.2; }
.tk-btn:hover { background: color-mix(in srgb, var(--accent) 14%, transparent); box-shadow: inset 0 0 0 1.5px var(--accent); color: var(--accent); }
.tk-btn.on, .tk-btn.on:hover { background: var(--accent); box-shadow: none; color: #fff; }
.tm .pk-go { display: flex; align-items: center; justify-content: flex-end; gap: 4px; }
/* Who and Sort: our own dark menus */
.tm-menus { display: inline-flex; gap: 2px; flex: none; }
.dd { position: relative; flex: none; }
.dd-btn { display: inline-flex; align-items: center; gap: 6px; height: 32px; padding: 0 10px 0 12px; border: 0; border-radius: 9px; background: none; color: var(--label); font: 600 13px var(--font); white-space: nowrap; cursor: pointer; transition: background var(--fast); }
.dd-btn:hover, .dd.open .dd-btn { background: var(--fill-2); }
.dd-btn svg { width: 14px; height: 14px; fill: none; stroke: var(--label-3); stroke-width: 2; stroke-linecap: round; transition: transform .2s var(--ease); }
.dd.open .dd-btn svg { transform: rotate(180deg); }
.dd-menu { position: absolute; right: 0; top: calc(100% + 6px); z-index: 60; min-width: 190px; padding: 6px; border-radius: 14px; background: var(--glass-strong); -webkit-backdrop-filter: blur(20px) saturate(1.5); backdrop-filter: blur(20px) saturate(1.5); box-shadow: 0 0 0 1px var(--sep-strong), var(--shadow-float); animation: dd-in .16s var(--ease); }
.dd-menu[hidden] { display: none; }
@keyframes dd-in { from { opacity: 0; transform: translateY(-4px) scale(.98); } }
.dd-menu button { display: flex; align-items: center; justify-content: space-between; gap: 12px; width: 100%; height: 34px; padding: 0 10px; border: 0; border-radius: 9px; background: none; color: var(--label-2); font: 550 13.5px var(--font); text-align: left; cursor: pointer; }
.dd-menu button:hover { background: var(--fill-2); color: var(--label); }
.dd-menu button.on { color: var(--label); font-weight: 650; }
.dd-menu button svg { width: 14px; height: 14px; fill: none; stroke: var(--accent); stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.tm-tool { overflow: visible; }

/* The page scrollbar: black track and a dark thumb in dark mode (no grey bar, no arrows); light mode's own in light */
:root { --scroll-track: #000; --scroll-thumb: #2c2c2e; --scroll-thumb-hover: #48484a; }
@media (prefers-color-scheme: light) { :root:not([data-theme="dark"]) { --scroll-track: #f5f5f7; --scroll-thumb: #c7c7cc; --scroll-thumb-hover: #aeaeb2; } }
:root[data-theme="light"] { --scroll-track: #f5f5f7; --scroll-thumb: #c7c7cc; --scroll-thumb-hover: #aeaeb2; }
html::-webkit-scrollbar { width: 12px; background: var(--scroll-track); }
html::-webkit-scrollbar-track { background: var(--scroll-track); }
html::-webkit-scrollbar-thumb { background: var(--scroll-thumb); border-radius: 8px; border: 3px solid var(--scroll-track); }
html::-webkit-scrollbar-thumb:hover { background: var(--scroll-thumb-hover); }
html::-webkit-scrollbar-button { display: none; height: 0; }
html::-webkit-scrollbar-corner { background: var(--scroll-track); }

/* Track, a quarter smaller */
.tk-btn { width: 21px; height: 21px; min-width: 21px; box-shadow: inset 0 0 0 1.25px color-mix(in srgb, var(--accent) 70%, transparent); }
.tk-btn:hover { box-shadow: inset 0 0 0 1.25px var(--accent); }
.tk-btn svg { width: 11px; height: 11px; stroke-width: 2.4; }

/* Logos sit dead center in their circle: the image fills it (no fixed size from older bar rules), and once a
   real logo loads the badge color behind it is gone, so no colored rim peeks out */
.tm-subs button .lg img, .tt-chip .lg img, .tr-logo .lg img, .trd-logo .lg img { width: 100%; height: 100%; border-radius: inherit; }
.lg.tint:has(img.on) { background: #fff; }
.lg.coin.tint:has(img.on) { background: transparent; }
.lg.tint:has(img.on) b { visibility: hidden; }

/* Predictions: no page title, just the switch between views, and the page starts right under it */
.pd-head { justify-content: flex-start; margin: 4px 0 18px; }
.tr-page .pro-body { margin-top: 0; }
.tr-sum { gap: 32px; padding: 0 0 20px; align-items: center; }
.tr-total b { font-size: 38px; }
/* No line to draw yet: the total stands alone on one row instead of leaving an empty panel */
.tr-sum:has(.tr-curve-note) { grid-template-columns: 1fr; }
.tr-sum:has(.tr-curve-note) .tr-curve { display: none; }
.tr-grid { padding-top: 18px; }
.trd-chart { height: 300px; }

/* Record: one quiet row of numbers, who makes the cut and who's close, then every suggested pick as a ledger */
.rc { max-width: 1100px; }
.rc-sum { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); padding: 4px 0 22px; border-bottom: 1px solid var(--sep); }
.rc-stat { display: flex; flex-direction: column; gap: 4px; padding: 0 20px; border-left: 1px solid var(--sep); min-width: 0; }
.rc-stat:first-child { padding-left: 0; border-left: 0; }
.rc-stat small, .rc-h { font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--label-3); }
.rc-stat b { font: 800 30px/1.1 var(--font-display); letter-spacing: -.02em; font-variant-numeric: tabular-nums; color: var(--label); }
.rc-stat b.up, .rc-n b.up, .rc-res.up { color: var(--good); } .rc-stat b.down, .rc-n b.down, .rc-res.down { color: var(--bad); }
.rc-stat span { font-size: 13px; color: var(--label-3); }
.rc-h { display: flex; align-items: center; gap: 8px; margin: 34px 0 6px; }
.rc-h span { padding: 1px 7px; border-radius: var(--r-pill); background: var(--fill-2); color: var(--label-2); letter-spacing: 0; }
.rc-lead { margin: 0 0 12px; max-width: 760px; font-size: 14px; line-height: 1.55; color: var(--label-2); }
.rc-none { padding: 18px 0; font-size: 14px; color: var(--label-3); border-top: 1px solid var(--sep); }
.rc-list { display: flex; flex-direction: column; border-top: 1px solid var(--sep); }
.rc-row { display: grid; grid-template-columns: minmax(220px, 1.6fr) repeat(3, minmax(90px, .6fr)); grid-template-areas: "who a b c" "miss miss miss miss"; align-items: center; gap: 4px 18px; padding: 14px 10px; border-bottom: 1px solid var(--sep); border-radius: 12px; color: var(--label); transition: background var(--fast); }
.rc-row:hover { background: var(--fill-3); }
.rc-who { grid-area: who; display: flex; align-items: center; gap: 12px; min-width: 0; }
.rc-who > span { display: flex; flex-direction: column; min-width: 0; }
.rc-who b { font-size: 15px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rc-who small, .rc-n small { font-size: 12px; color: var(--label-3); white-space: nowrap; }
.rc-n { display: flex; flex-direction: column; align-items: flex-end; font-variant-numeric: tabular-nums; }
.rc-n b { font-size: 16px; }
.rc-miss { grid-area: miss; padding-left: 46px; font-size: 12.5px; color: var(--label-3); }
.rc-picks { display: flex; flex-direction: column; border-top: 1px solid var(--sep); }
.rc-pick { display: grid; grid-template-columns: 64px minmax(0, 1fr) 60px 110px; align-items: center; gap: 14px; padding: 12px 10px; border-bottom: 1px solid var(--sep); border-radius: 10px; color: var(--label); transition: background var(--fast); }
.rc-pick:hover { background: var(--fill-3); }
.rc-date { font-size: 12.5px; color: var(--label-3); font-variant-numeric: tabular-nums; }
.rc-call { display: flex; flex-direction: column; min-width: 0; }
.rc-call b { font-size: 14px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rc-call small { font-size: 12px; color: var(--label-3); }
.rc-odds { font-size: 13px; color: var(--label-2); text-align: right; font-variant-numeric: tabular-nums; }
.rc-res { justify-self: end; font: 650 13px var(--font); color: var(--label-2); }
.rc-res em { font-style: normal; font-weight: 500; opacity: .8; }
.rc-early { margin-top: 18px; }
.rc-early summary { cursor: pointer; padding: 10px 0; font-size: 13px; color: var(--label-3); list-style: none; }
.rc-early summary::before { content: "›"; display: inline-block; margin-right: 8px; transition: transform .2s var(--ease); }
.rc-early[open] summary::before { transform: rotate(90deg); }
.pk-tierword.rising { color: var(--accent); }
@media (max-width: 760px) {
  .rc-sum { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 18px; }
  .rc-stat:nth-child(3) { padding-left: 0; border-left: 0; }
  .rc-row { grid-template-columns: 1fr 1fr 1fr; grid-template-areas: "who who who" "a b c" "miss miss miss"; }
  .rc-row > .rc-n:nth-of-type(1) { grid-area: a; } .rc-row > .rc-n:nth-of-type(2) { grid-area: b; } .rc-row > .rc-n:nth-of-type(3) { grid-area: c; }
  .rc-pick { grid-template-columns: minmax(0, 1fr) auto; } .rc-date, .rc-odds { display: none; }
}

/* The Predictions sidebar: adapts to what the list shows (everything, a topic, a league, one coin or stock) */
.ir { position: sticky; top: 84px; align-self: start; display: flex; flex-direction: column; gap: 4px; min-width: 0; max-height: calc(100vh - 100px); overflow-y: auto; scrollbar-width: none; padding: 16px 18px 18px; border-radius: 18px; background: var(--fill-3); box-shadow: inset 0 0 0 1px var(--sep); }
.ir::-webkit-scrollbar { display: none; }
.ir-h { display: flex; align-items: center; gap: 12px; padding-bottom: 12px; border-bottom: 1px solid var(--sep); }
.ir-h > div { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.ir-h b { font: 750 19px var(--font-display); letter-spacing: -.02em; color: var(--label); }
.ir-h span { font-size: 13px; color: var(--label-2); font-variant-numeric: tabular-nums; }
.ir-h em { font-style: normal; font-weight: 650; }
.ir-h em.up, .ir-f b.up, .ir-t em.up, .ir-lean .up { color: var(--good); } .ir-h em.down, .ir-f b.down, .ir-t em.down, .ir-lean .down { color: var(--bad); }
.ir-sec { padding: 12px 0 6px; border-bottom: 1px solid var(--sep); }
.ir-sec:last-of-type { border-bottom: 0; }
.ir-sec h4 { margin: 0 0 8px; font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--label-3); }
.ir-stats { display: grid; grid-template-columns: repeat(3, 1fr); padding: 12px 0; border-bottom: 1px solid var(--sep); }
.ir-stats div { display: flex; flex-direction: column; gap: 2px; }
.ir-stats b { font: 750 20px var(--font-display); font-variant-numeric: tabular-nums; color: var(--label); }
.ir-stats small { font-size: 11.5px; color: var(--label-3); }
.ir-lean { padding: 2px 0 6px; }
.ir-bar { height: 6px; border-radius: 3px; background: color-mix(in srgb, var(--bad) 70%, transparent); overflow: hidden; }
.ir-bar i { display: block; width: var(--w); height: 100%; background: var(--good); border-right: 2px solid var(--bg); }
.ir-lean-l { display: flex; justify-content: space-between; align-items: baseline; gap: 6px; margin-top: 7px; font-size: 12px; }
.ir-lean-l b { font-size: 12.5px; color: var(--label); }
.ir-p { display: grid; grid-template-columns: 26px minmax(0, 1fr) auto; align-items: center; gap: 10px; padding: 6px; margin: 0 -6px; border-radius: 10px; color: var(--label); transition: background var(--fast); }
.ir-p:hover, .ir-t:hover, .ir-soon:hover { background: var(--fill-2); }
.ir-p > span { display: flex; flex-direction: column; min-width: 0; }
.ir-p b { font-size: 13.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ir-p small { font-size: 11.5px; color: var(--label-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ir-p em { font-style: normal; font: 650 13px var(--font); color: var(--good); font-variant-numeric: tabular-nums; }
.ir-f { display: flex; flex-direction: column; gap: 1px; padding: 6px 0; }
.ir-f small { font-size: 11.5px; color: var(--label-3); }
.ir-f b { font: 700 15px var(--font); font-variant-numeric: tabular-nums; color: var(--label); }
.ir-f span { font-size: 12px; color: var(--label-3); line-height: 1.35; }
.ir-t { display: grid; grid-template-columns: 22px 54px minmax(0, 1fr) auto; align-items: center; gap: 10px; width: calc(100% + 12px); padding: 6px; margin: 0 -6px; border: 0; border-radius: 10px; background: none; color: var(--label); font: 650 13px var(--font); text-align: left; cursor: pointer; transition: background var(--fast); }
.ir-mini { height: 4px; border-radius: 2px; background: color-mix(in srgb, var(--bad) 65%, transparent); overflow: hidden; }
.ir-mini i { display: block; width: var(--w); height: 100%; background: var(--good); }
.ir-t em { font-style: normal; font-size: 12px; font-variant-numeric: tabular-nums; }
.ir-soon { display: flex; justify-content: space-between; gap: 10px; padding: 6px; margin: 0 -6px; border-radius: 10px; font-size: 12.5px; color: var(--label-2); }
.ir-soon span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ir-soon em { flex: none; font-style: normal; font-weight: 650; color: var(--accent); font-variant-numeric: tabular-nums; }
.ir-link { display: inline-block; margin-top: 4px; font-size: 12.5px; color: var(--label-3); }
.ir-link:hover { color: var(--label); }
.ir-more { display: flex; justify-content: center; align-items: center; height: 38px; margin-top: 10px; border-radius: 12px; background: var(--fill-2); color: var(--label); font: 650 13.5px var(--font); transition: background var(--fast); }
.ir-more:hover { background: var(--fill); }
.tm-grid { grid-template-columns: minmax(0, 1fr) 320px; }
.tm-grid > .ir { margin-left: 24px; }
@media (max-width: 1100px) { .tm-grid > .ir { position: static; max-height: none; margin: 24px 0 0; } }
.ir-h { text-align: left; }

/* Smart money's list: rows read as buttons (a chevron on hover), and the one being shown is unmistakable */
.wr { position: relative; transition: background .15s, box-shadow .15s; }
.wr:hover { background: var(--fill-2); }
.wr::after { content: "›"; flex: none; width: 10px; margin-left: -2px; font-size: 18px; line-height: 1; color: var(--label-3); opacity: 0; transform: translateX(-4px); transition: opacity .15s, transform .15s; }
.wr:hover::after { opacity: 1; transform: none; }
.wr.on { background: color-mix(in srgb, var(--accent) 16%, var(--fill-3)); box-shadow: inset 0 0 0 1.5px color-mix(in srgb, var(--accent) 65%, transparent); }
.wr.on::before { content: ""; position: absolute; left: -10px; top: 22%; bottom: 22%; width: 3px; border-radius: 2px; background: var(--accent); }
.wr.on .wr-n b { color: var(--label); }
.wr.on::after { opacity: 1; transform: none; color: var(--accent); }
.wr:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
/* Selected, quietly: a soft fill and a thin accent mark at the edge; no outline, no glow */
.wr:hover { background: var(--fill-3); }
.wr.on { background: var(--fill-2); box-shadow: none; }
.wr.on::before { left: -6px; top: 30%; bottom: 30%; width: 2px; background: color-mix(in srgb, var(--accent) 80%, transparent); }
.wr.on::after { opacity: 0; color: var(--label-3); }
.wr.on:hover::after { opacity: 1; }
/* The selected market: a soft fill and a small blue dot at its left; the highlight glides between rows */
.mk4-watch { position: relative; }
.mk4-watch .wr { position: relative; z-index: 1; padding-left: 16px; }
.wr.on::before, .wr-glide::before { content: ""; position: absolute; left: 5px; top: 50%; width: 5px; height: 5px; margin-top: -2.5px; bottom: auto; border-radius: 50%; background: var(--accent); }
.wr.gliding { background: transparent; }
.wr.gliding::before { opacity: 0; }
.wr-glide { position: absolute; z-index: 0; border-radius: 12px; background: var(--fill-2); pointer-events: none; will-change: transform; }
/* The market panel waits under a spinner while the next market is worked out */
.mk4-main { position: relative; transition: opacity .18s ease; }
.mk4-main.mk-loading { opacity: .4; pointer-events: none; }
.mk4-main.mk-loading::after { content: ""; position: fixed; left: calc(50% + 140px); top: 46vh; width: 30px; height: 30px; margin: -15px 0 0 -15px; border-radius: 50%; border: 3px solid var(--fill-2); border-top-color: var(--label); animation: busy-spin .7s linear infinite; z-index: 5; }
/* Dim with a veil rather than the panel's own opacity, so the spinner on top stays crisp */
.mk4-main.mk-loading { opacity: 1; }
.mk4-main.mk-loading::before { content: ""; position: absolute; inset: 0; z-index: 4; background: color-mix(in srgb, var(--bg) 60%, transparent); animation: mk-veil .15s ease; }
@keyframes mk-veil { from { opacity: 0; } }

/* Smart money's list runs the full length of the page beside the feed (no inner scroll, no offset) */
.mk4-watch { position: relative; top: 0; max-height: none; overflow: visible; }
.mk-sort { display: flex; justify-content: flex-end; margin: -2px 0 8px; }
.mk-sort .dd-btn { height: 30px; font-size: 12.5px; color: var(--label-2); }
.mk-sort .dd-menu { right: 0; }
/* The feeds' sort menu: a quiet control beside the filters */
.tl-tools { display: inline-flex; flex: none; margin-left: auto; }
.tl-tools .dd-btn { height: 30px; font-size: 12.5px; color: var(--label-2); }
.tl-h, .ux-feed > .tl-tools { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.ux-feed > .tl-tools { float: right; margin: 0 0 8px 8px; }

/* Portfolios: a quiet chip bar over the Tracked page, the picked one's settings on the right */
.bk-bar { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin: 0 0 18px; }
.bk-chips { display: flex; align-items: center; gap: 4px; flex-wrap: wrap; padding: 4px; border-radius: 14px; background: var(--fill-3); box-shadow: inset 0 0 0 1px var(--sep); }
.bk { display: inline-flex; align-items: center; gap: 6px; height: 32px; padding: 0 12px; border: 0; border-radius: 10px; background: none; color: var(--label-2); font: 600 13.5px var(--font); white-space: nowrap; cursor: pointer; transition: background var(--fast), color var(--fast); }
.bk:hover { color: var(--label); }
.bk.on { background: var(--fill-2); color: var(--label); }
.bk em { font-style: normal; font-size: 12px; font-weight: 650; font-variant-numeric: tabular-nums; }
.bk em.up { color: var(--good); } .bk em.down { color: var(--bad); }
.bk small { font-size: 11.5px; color: var(--label-3); }
.bk-new { color: var(--accent); }
.bk-input { height: 32px; width: 200px; padding: 0 12px; border: 0; border-radius: 10px; background: var(--fill-2); color: var(--label); font: 600 13.5px var(--font); outline: 1.5px solid color-mix(in srgb, var(--accent) 60%, transparent); }
.bk-acts { display: flex; align-items: center; gap: 4px; font-size: 13px; color: var(--label-2); }
.bk-acts > button, .bk-confirm button { height: 30px; padding: 0 12px; border: 0; border-radius: 9px; background: none; color: var(--label-2); font: 600 13px var(--font); cursor: pointer; }
.bk-acts > button:hover, .bk-confirm button:hover { background: var(--fill-3); color: var(--label); }
.bk-acts .bk-del:hover, .bk-confirm .bk-del { color: var(--bad); }
.bk-confirm { display: inline-flex; align-items: center; gap: 4px; margin-left: 6px; color: var(--label-2); }
.bk-note { font-size: 12.5px; color: var(--label-3); }
.bk-switch { display: inline-flex; align-items: center; gap: 8px; margin-right: 8px; cursor: pointer; }
.bk-switch input { position: absolute; opacity: 0; pointer-events: none; }
.bk-switch span { position: relative; width: 32px; height: 19px; border-radius: 10px; background: var(--fill); transition: background .2s; }
.bk-switch span::after { content: ""; position: absolute; top: 2px; left: 2px; width: 15px; height: 15px; border-radius: 50%; background: #fff; transition: transform .2s var(--ease); }
.bk-switch input:checked + span { background: var(--good); }
.bk-switch input:checked + span::after { transform: translateX(13px); }
/* Which portfolio a trade goes in, asked by the + button when there's more than one */
.bk-pick { position: absolute; z-index: 80; min-width: 190px; }
.bk-pick small { display: block; padding: 6px 10px 4px; font-size: 11px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--label-3); }
.bk-pick em { font-style: normal; font-size: 11px; color: var(--label-3); }

/* ===== The Predictions workspace: its own header, a rail that stays put, the page beside it ===== */
.wk-nav { display: none; }
body.wk .nav .seg { display: none; }
body.wk .wk-nav { display: flex; align-items: center; gap: 6px; flex: 1 1 auto; min-width: 0; margin-left: 10px; }
.wk-exit { display: inline-flex; align-items: center; gap: 2px; height: 32px; padding: 0 10px 0 6px; border-radius: 9px; color: var(--label-2); font: 600 13.5px var(--font); transition: background var(--fast), color var(--fast); }
.wk-exit svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.wk-exit:hover { background: var(--fill-3); color: var(--label); }
.wk-title { padding: 0 14px 0 10px; margin-right: 6px; border-left: 1px solid var(--sep); font: 750 15px var(--font-display); letter-spacing: -.01em; color: var(--label); white-space: nowrap; }
.wk-tabs { display: flex; gap: 2px; min-width: 0; overflow-x: auto; scrollbar-width: none; }
.wk-tabs::-webkit-scrollbar { display: none; }
.wk-tabs a { height: 32px; display: inline-flex; align-items: center; padding: 0 12px; border-radius: 9px; color: var(--label-2); font: 600 13.5px var(--font); white-space: nowrap; transition: background var(--fast), color var(--fast); }
.wk-tabs a:hover { color: var(--label); }
.wk-tabs a.on { background: var(--fill-2); color: var(--label); }
.wk-pf { display: inline-flex; align-items: baseline; gap: 8px; margin-left: auto; margin-right: 8px; height: 32px; padding: 0 12px; border-radius: 9px; align-items: center; background: var(--fill-3); box-shadow: inset 0 0 0 1px var(--sep); color: var(--label); font-variant-numeric: tabular-nums; white-space: nowrap; transition: background var(--fast); }
.wk-pf:hover { background: var(--fill-2); }
.wk-pf small { font-size: 11px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--label-3); }
.wk-pf b { font: 700 14px var(--font); }
.wk-pf em { font-style: normal; font: 650 12.5px var(--font); }
.wk-pf em.up { color: var(--good); } .wk-pf em.down { color: var(--bad); }
/* The page sits beside the rail, using the width a terminal should */
#view.wk-has-rail { display: grid; grid-template-columns: 236px minmax(0, 1fr); gap: 28px; max-width: 1760px; margin: 0 auto; padding: 0 24px; align-items: start; }
#view.wk-has-rail > .page { max-width: none; margin: 0; min-width: 0; }
.wk-rail { position: sticky; top: 76px; display: flex; flex-direction: column; gap: 4px; max-height: calc(100vh - 92px); overflow-y: auto; scrollbar-width: none; padding: 22px 0 24px; }
.wk-rail::-webkit-scrollbar { display: none; }
.wkr-sec { padding: 4px 0 10px; border-bottom: 1px solid var(--sep); }
.wkr-sec h6 { display: flex; justify-content: space-between; align-items: baseline; margin: 10px 8px 6px; font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--label-3); }
.wkr-sec h6 a { font-size: 11.5px; letter-spacing: 0; text-transform: none; font-weight: 600; color: var(--label-3); }
.wkr-sec h6 a:hover { color: var(--label); }
.wkr-row { display: flex; align-items: center; gap: 10px; width: 100%; padding: 7px 8px; border: 0; border-radius: 10px; background: none; color: var(--label); font: inherit; text-align: left; cursor: pointer; transition: background var(--fast); }
.wkr-row:hover { background: var(--fill-3); }
.wkr-row.on { background: var(--fill-2); }
.wkr-n { display: flex; flex-direction: column; flex: 1; min-width: 0; line-height: 1.25; }
.wkr-n b { font-size: 13.5px; font-weight: 650; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.wkr-n small { font-size: 11.5px; color: var(--label-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.wkr-row em { flex: none; font-style: normal; font: 650 12px var(--font); font-variant-numeric: tabular-nums; color: var(--label-2); }
.wkr-row em.up { color: var(--good); } .wkr-row em.down { color: var(--bad); }
.wkr-note { margin: 2px 8px 6px; font-size: 12.5px; line-height: 1.45; color: var(--label-3); }
.wkr-rec { display: flex; flex-direction: column; gap: 2px; margin-top: 12px; padding: 12px; border-radius: 14px; background: var(--fill-3); box-shadow: inset 0 0 0 1px var(--sep); color: var(--label); transition: background var(--fast); }
.wkr-rec:hover, .wkr-rec.on { background: var(--fill-2); }
.wkr-rec small { font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--label-3); }
.wkr-rec b { font-size: 14px; }
.wkr-rec span { font-size: 12.5px; color: var(--label-2); }
.wkr-rec em { font-style: normal; font-weight: 650; }
.wkr-rec em.up { color: var(--good); } .wkr-rec em.down { color: var(--bad); }
/* Smart money keeps its own market list on the left, so no rail there; the page still uses the wider frame */
body.wk #view:not(.wk-has-rail) > .page.mk4 { max-width: 1760px; }
@media (max-width: 1240px) {
  #view.wk-has-rail { grid-template-columns: minmax(0, 1fr); padding: 0; }
  .wk-rail { display: none; }
}
@media (max-width: 860px) {
  body.wk .wk-title, body.wk .wk-pf small { display: none; }
}

/* Workspace header, uncrowded: the workspace on the left; only Admin/Pro, your account and the theme on the right */
body.wk .nav-inner { display: flex; align-items: center; gap: 18px; padding: 0 28px; }
body.wk .wk-nav { gap: 10px; margin-left: 4px; }
body.wk .wk-title { margin-right: 10px; }
body.wk .wk-tabs { gap: 4px; }
body.wk .wk-pf { margin-left: 18px; margin-right: 0; }
body.wk .nav-right { margin-left: auto; gap: 14px; }
body.wk .nav-right .search-btn, body.wk .nav-right .bell-btn { display: none; }
/* Workspace header: the logo left, the workspace centered, your portfolio and account on the right */
body.wk .nav-inner { display: grid; grid-template-columns: 1fr auto 1fr; gap: 24px; padding: 0 28px; }
body.wk .wk-nav { margin: 0; gap: 8px; flex: none; }
body.wk .wk-exit { margin-right: 4px; }
body.wk .wk-title { padding: 0 18px 0 16px; margin-right: 8px; }
body.wk .wk-tabs { gap: 6px; }
body.wk .nav-right { justify-self: end; margin: 0; gap: 14px; }
.wk-pfbox:empty { display: none; }
body.wk .wk-pf { margin: 0 10px 0 0; }
.wk-pfbox { display: none; }
body.wk .wk-pfbox { display: flex; }

/* Insights column: none on All; for a topic or market it sits beside the list, flat (no card), collapsible to a tab */
.tm-grid.ir-off { grid-template-columns: minmax(0, 1fr); }
.tm-grid.ir-on { grid-template-columns: minmax(0, 1fr) 300px; }
.tm-grid.ir-on.ir-collapsed { grid-template-columns: minmax(0, 1fr) 40px; }
.ir-slot:empty { display: none; }
.tm-grid > .ir-slot { margin-left: 28px; min-width: 0; align-self: start; position: sticky; top: 84px; }
.ir-slot .ir { position: relative; top: 0; margin: 0; max-height: calc(100vh - 100px); padding: 4px 0 18px 22px; border-radius: 0; background: none; box-shadow: none; border-left: 1px solid var(--sep); }
.ir-min { position: absolute; top: 2px; right: 0; width: 28px; height: 28px; display: grid; place-items: center; border: 0; border-radius: 8px; background: none; color: var(--label-3); cursor: pointer; transition: background var(--fast), color var(--fast); }
.ir-min:hover { background: var(--fill-3); color: var(--label); }
.ir-min svg, .ir-tab svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.ir-slot .ir-h { padding-right: 34px; }
.ir-tab { display: flex; flex-direction: column; align-items: center; gap: 10px; width: 40px; padding: 12px 0; border: 0; border-left: 1px solid var(--sep); background: none; color: var(--label-3); font: 650 12px var(--font); cursor: pointer; transition: color var(--fast); }
.ir-tab span { writing-mode: vertical-rl; letter-spacing: .04em; }
.ir-tab:hover { color: var(--label); }
@media (max-width: 1100px) { .tm-grid > .ir-slot { position: static; margin: 24px 0 0; } .ir-slot .ir { border-left: 0; padding-left: 0; } .ir-tab { display: none; } }
/* The column opens and closes smoothly: same two tracks in every state, so the grid can ease between widths, and the
   insights keep their width (clipped, never squeezed) while it moves */
.tm-grid { transition: grid-template-columns .38s cubic-bezier(.22, 1, .36, 1); }
.tm-grid.ir-off { grid-template-columns: minmax(0, 1fr) 0px; }
.tm-grid > .ir-slot { overflow: hidden; transition: margin-left .38s cubic-bezier(.22, 1, .36, 1); }
.tm-grid.ir-off > .ir-slot { margin-left: 0; }
.ir-slot:empty { display: block; }
.ir-slot .ir { width: 272px; box-sizing: border-box; }
/* Hiding and bringing back the insights: an obvious Hide pill, and a tab you can actually see and click */
.ir-min { width: auto; height: 28px; padding: 0 8px 0 10px; gap: 2px; display: inline-flex; align-items: center; border-radius: var(--r-pill); background: var(--fill-3); box-shadow: inset 0 0 0 1px var(--sep); color: var(--label-2); font: 600 12px var(--font); }
.ir-min:hover { background: var(--fill-2); color: var(--label); }
.ir-slot .ir-h { padding-right: 70px; }
.tm-grid.ir-on.ir-collapsed { grid-template-columns: minmax(0, 1fr) 44px; }
.tm-grid.ir-collapsed > .ir-slot { margin-left: 8px; overflow: visible; }
.ir-tab { width: 36px; padding: 14px 0; gap: 10px; border: 0; border-radius: 12px; background: var(--fill-3); box-shadow: inset 0 0 0 1px var(--sep); color: var(--label-2); }
.ir-tab:hover { background: var(--fill-2); color: var(--label); }
/* Who's calling it, on a market's page: two lean bars, the breakdown a tap away, and the best callers on it */
.cs { padding: 14px 0 6px; border-top: 1px solid var(--sep); }
.cs h6 { margin: 0 0 10px; font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--label-3); }
.cs-row { display: grid; grid-template-columns: minmax(0, 1fr) 90px auto; align-items: center; gap: 10px; padding: 5px 0; font-size: 13px; color: var(--label); }
.cs-row small { display: block; font-size: 11.5px; color: var(--label-3); }
.cs-bar { height: 5px; border-radius: 3px; background: color-mix(in srgb, var(--bad) 70%, transparent); overflow: hidden; }
.cs-bar i { display: block; width: var(--w); height: 100%; background: var(--good); border-right: 2px solid var(--bg); }
.cs-row b { font-size: 12.5px; font-variant-numeric: tabular-nums; }
.cs-row b.up { color: var(--good); } .cs-row b.down { color: var(--bad); }
.cs-more { display: inline-flex; align-items: center; gap: 2px; margin: 6px 0 4px; padding: 0; border: 0; background: none; color: var(--accent); font: 600 12.5px var(--font); cursor: pointer; }
.cs-more svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; }
.cs-p { display: grid; grid-template-columns: 24px minmax(0, 1fr) auto; align-items: center; gap: 10px; padding: 6px; margin: 0 -6px; border-radius: 10px; color: var(--label); }
.cs-p:hover { background: var(--fill-3); }
.cs-p span { display: flex; flex-direction: column; min-width: 0; }
.cs-p b { font-size: 13px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cs-p small { font-size: 11.5px; color: var(--label-3); }
.cs-p em { font-style: normal; font: 700 13px var(--font); color: var(--good); font-variant-numeric: tabular-nums; }

/* The collapsed insights: a slim blue edge tab, quietly breathing so it's clear there's more to open */
.ir-tab { position: relative; width: 30px; padding: 14px 0 12px; gap: 10px; border-radius: 15px; background: color-mix(in srgb, var(--accent) 14%, transparent); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--accent) 38%, transparent); color: var(--accent); font: 650 11.5px var(--font); animation: ir-breathe 2.8s ease-in-out infinite; }
.ir-tab:hover { background: color-mix(in srgb, var(--accent) 24%, transparent); color: var(--accent); animation-play-state: paused; }
.ir-tab span { letter-spacing: .06em; }
.ir-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--accent); animation: ir-blink 2.8s ease-in-out infinite; }
@keyframes ir-breathe { 0%, 100% { box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--accent) 38%, transparent), 0 0 0 0 transparent; } 50% { box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--accent) 62%, transparent), 0 0 14px 0 color-mix(in srgb, var(--accent) 28%, transparent); } }
@keyframes ir-blink { 0%, 100% { opacity: .35; transform: scale(.85); } 50% { opacity: 1; transform: scale(1.1); } }
@media (prefers-reduced-motion: reduce) { .ir-tab, .ir-dot { animation: none; } }
.tm-grid.ir-on.ir-collapsed { grid-template-columns: minmax(0, 1fr) 38px; }

/* A market's side column scrolls on its own when it's taller than the screen (it stays in view as the feed scrolls) */
.ux-side { max-height: calc(100vh - 100px); overflow-y: auto; overscroll-behavior: contain; scrollbar-width: none; padding-bottom: 24px; }
.ux-side::-webkit-scrollbar { display: none; }
/* Back to where they came from, when Smart money was opened from a link */
.mkf-back { display: inline-flex; align-items: center; gap: 4px; height: 34px; padding: 0 14px 0 8px; border-radius: var(--r-pill); background: var(--fill-3); box-shadow: inset 0 0 0 1px var(--sep); color: var(--label); font: 600 14px var(--font); transition: background var(--fast); }
.mkf-back:hover { background: var(--fill-2); }
.mkf-back svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }

/* Round company logos, fitted to their own shape (fitLogo): a mark on white padded so nothing is cut by the circle,
   badge artwork zoomed to fill it with no white ring */
.lg.round img { padding: calc(var(--lg-pad, .18) * var(--s)); }
.lg.round.fill { background: transparent; }
.lg.round.fill img { padding: 0; object-fit: cover; background: transparent; transform: scale(var(--lg-zoom, 1)); }
/* No clipped focus brackets on the ticker bar: the focus ring sits inside the chip, and only for keyboard focus */
.tm-subs button:focus, .tm-topics button:focus { outline: none; }
.tm-subs button:focus-visible, .tm-topics button:focus-visible { outline: 2px solid color-mix(in srgb, var(--accent) 70%, transparent); outline-offset: -2px; }
.lg.round.fill.tint:has(img.on), .lg.round.fill:has(img.on) { background: transparent; }
/* A badge logo on the dark page keeps a faint edge, so a black disc (SpaceX) doesn't disappear */
.lg.round.fill { box-shadow: inset 0 0 0 1px var(--sep-strong); }
.lg.round.fill img { z-index: 0; }
/* A light logo on a transparent background (Nike's white swoosh) sits on a dark circle instead of a white one */
.lg.round.dark, .lg.round.dark.tint:has(img.on), .lg.round.dark:has(img.on) { background: #1c1c1e; box-shadow: inset 0 0 0 1px var(--sep-strong); }
.lg.round.dark img { background: transparent; }
/* Badges sit on white too (what's outside the artwork is clipped by the circle anyway); light artwork on dark */
.lg.round.fill, .lg.round.fill.tint:has(img.on), .lg.round.fill:has(img.on) { background: #fff; }
.lg.round.dark, .lg.round.dark.tint:has(img.on), .lg.round.dark:has(img.on), .lg.round.fill.dark:has(img.on) { background: #1c1c1e; }

/* Showing hidden insights: a solid blue button at the end of the topic bar, white text and icon, no glow */
.ir-open { display: inline-flex; align-items: center; gap: 6px; flex: none; height: 32px; margin-left: 6px; padding: 0 14px 0 11px; border: 0; border-radius: 9px; background: var(--accent); color: #fff; font: 650 13px var(--font); cursor: pointer; transition: filter var(--fast), transform .12s; }
.ir-open:hover { filter: brightness(1.12); }
.ir-open:active { transform: scale(.97); }
.ir-open svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.tm-grid.ir-off.ir-collapsed > .ir-slot { margin-left: 0; }

/* Hidden insights: a slim handle on the far right edge of the screen, its arrow gently nudging left */
.ir-open { display: none; }
.ir-edge { position: fixed; right: 0; top: 50%; z-index: 30; width: 26px; height: 64px; margin-top: -32px; display: grid; place-items: center; padding: 0 0 0 2px; border: 0; border-radius: 14px 0 0 14px; background: var(--fill-2); box-shadow: inset 1px 0 0 var(--sep-strong), inset 0 1px 0 var(--sep-strong), inset 0 -1px 0 var(--sep-strong); color: var(--label); cursor: pointer; transition: width .2s var(--ease), background var(--fast); }
.ir-edge:hover { width: 32px; background: var(--fill); }
.ir-edge svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; animation: ir-nudge 2.4s ease-in-out infinite; }
.ir-edge:hover svg { animation-play-state: paused; }
@keyframes ir-nudge { 0%, 60%, 100% { transform: none; opacity: .75; } 30% { transform: translateX(-4px); opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .ir-edge svg { animation: none; } }
/* A logo badge always centers its letters, whatever list layout it sits in (a row's call cell made it a top-aligned column) */
span.lg.lg { display: inline-grid; place-items: center; flex-direction: initial; justify-content: initial; }
span.lg.lg > b { display: block; margin: 0; line-height: 1; font-size: calc(var(--s) * var(--fit, .34)); font-weight: 750; text-align: center; }

/* Hidden insights: a round blue button near the top right, a soft ring of blue pulsing off it and fading out */
.ir-edge { right: 18px; top: 150px; margin-top: 0; width: 36px; height: 36px; padding: 0; border-radius: 50%; background: var(--accent); box-shadow: 0 2px 10px rgba(0, 0, 0, .35); color: #fff; animation: ir-ring 2.6s ease-out infinite; }
.ir-edge:hover { width: 36px; background: color-mix(in srgb, var(--accent) 88%, #fff); animation-play-state: paused; }
.ir-edge svg { width: 16px; height: 16px; margin-left: -1px; animation: none; opacity: 1; }
@keyframes ir-ring {
  0% { box-shadow: 0 2px 10px rgba(0, 0, 0, .35), 0 0 0 0 color-mix(in srgb, var(--accent) 45%, transparent); }
  70%, 100% { box-shadow: 0 2px 10px rgba(0, 0, 0, .35), 0 0 0 9px color-mix(in srgb, var(--accent) 0%, transparent); }
}
@media (prefers-reduced-motion: reduce) { .ir-edge { animation: none; } }
/* The hidden-insights handle: attached flush to the screen's right edge (square there, round on the left), a little lower */
.ir-edge { right: 0; top: 232px; width: 42px; height: 40px; padding-left: 4px; border-radius: 20px 0 0 20px; }
.ir-edge:hover { width: 48px; }
/* The expand handle: vertically centered on the screen, taller and slimmer */
.ir-edge { top: 50%; margin-top: -32px; width: 30px; height: 64px; padding-left: 3px; border-radius: 16px 0 0 16px; }
.ir-edge:hover { width: 36px; }

/* The topic bar spans the whole width; the list and the insights start side by side under it, level with each other */
.tm-grid > .tm-main { display: contents; }
.tm-grid > .tm-main > .tm-tool { grid-column: 1 / -1; grid-row: 1; margin-bottom: 4px; }
.tm-grid > .tm-main > .tm-body { grid-column: 1; grid-row: 2; min-width: 0; }
.tm-grid > .ir-slot { grid-column: 2; grid-row: 2; top: 84px; margin-top: 10px; }

/* The insights handle: small, and the list keeps clear of it. */
.ir-edge { width: 16px; height: 44px; margin-top: -22px; padding-left: 1px; border-radius: 10px 0 0 10px; }
.ir-edge:hover { width: 20px; }
.ir-edge svg { width: 12px; height: 12px; margin-left: 0; }
.picks-page:has(> .ir-edge) .tm-grid { padding-right: 20px; }

/* Entering Predictions: the loading screen. */
.wk-veil { position: fixed; inset: 0; z-index: 200; display: grid; place-items: center; background: var(--bg); opacity: 0; }
.wk-veil-in { display: flex; flex-direction: column; align-items: center; gap: 18px; }
.wk-veil .logo-mark { height: 58px; animation: wk-breathe 1.6s ease-in-out infinite; }
.wk-veil-t { font-size: 13px; font-weight: 600; letter-spacing: .32em; text-transform: uppercase; color: var(--label-2, var(--label)); padding-left: .32em; animation: wk-text .5s .15s ease-out both; }
.wk-veil-bar { position: relative; width: 120px; height: 2px; border-radius: 2px; overflow: hidden; background: var(--sep, rgba(255,255,255,.08)); }
.wk-veil-bar i { position: absolute; inset: 0 auto 0 0; width: 40%; border-radius: 2px; background: var(--accent); animation: wk-sweep 1.1s cubic-bezier(.45,0,.55,1) infinite; }
@keyframes wk-breathe { 0%, 100% { opacity: .55; transform: scale(.96); } 50% { opacity: 1; transform: scale(1); } }
@keyframes wk-text { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }
@keyframes wk-sweep { from { transform: translateX(-100%); } to { transform: translateX(250%); } }

/* The loader: the screen dims, the Cred logo spins in the middle. */
.busy { inset: 0; place-items: center; padding: 0; background: color-mix(in srgb, var(--bg) 62%, transparent); -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px); pointer-events: none; animation: none; }
.busy-logo { height: 46px; width: auto; animation: busy-logo-spin 1.1s cubic-bezier(.55, .15, .45, .85) infinite; filter: drop-shadow(0 4px 18px rgba(0, 0, 0, .45)); }
:root[data-theme="light"] .busy-logo { filter: invert(1); }
@media (prefers-color-scheme: light) { :root:not([data-theme="dark"]) .busy-logo { filter: invert(1); } }
@keyframes busy-logo-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .busy-logo { animation-duration: 2.4s; } }

/* Smart money's market list as the workspace rail: the same sticky, scrolling column, the same rows. */
#view > .mk-rail { position: sticky; top: 76px; display: block; max-height: calc(100vh - 92px); overflow-y: auto; overscroll-behavior: contain; padding: 22px 0 24px; border-right: 0; }
.mk4-grid.solo { grid-template-columns: minmax(0, 1fr); }
.mk-rail .mk-search { height: 36px; margin-bottom: 6px; border-radius: 10px; }
.mk-rail .mk-search input { font-size: 13.5px; }
.mk-rail .mk-sort { margin: 0 0 4px; }
.mk-rail .wr { gap: 10px; padding: 7px 8px; border-radius: 10px; }
.mk-rail .wr > .lg { --s: 22px !important; }
.mk-rail .wr .st-glyph { width: 22px; height: 22px; font-size: 8.5px; }
.mk-rail .wr-n { line-height: 1.25; }
.mk-rail .wr-n b { font-size: 13.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mk-rail .wr-n small { font-size: 11.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mk-rail .wr-pill { min-width: 0; padding: 0; background: none !important; font: 650 12px var(--font); font-variant-numeric: tabular-nums; color: var(--label-2); }
.mk-rail .wr-pill small { font: inherit; opacity: 1; }
.mk-rail .wr-pill.up { color: var(--good); }
.mk-rail .wr-pill.down { color: var(--bad); }
.mk-rail .wr-pill.mid { color: #ffd60a; }
.mk-rail .wr:hover { background: var(--fill-3); }
.mk-rail .wr.on { background: var(--fill-2); }
@media (max-width: 1240px) {
  #view > .mk-rail { display: block; position: static; max-height: none; padding: 12px 16px 0; }
}

/* Smart money's rail: a little wider, no dot, a brighter selection, no sort menu (the search stays). */
#view.wk-has-rail:has(> .mk-rail) { grid-template-columns: 264px minmax(0, 1fr); }
.mk-rail .wr.on::before, .mk-rail .wr-glide::before { display: none; }
.mk-rail .wr.on, .mk-rail .wr-glide { background: var(--fill); }
.mk-rail .mk-sort { display: none; }
.mk-rail .mk-search { margin-bottom: 10px; }

/* Smart money's topics, under the search in the rail: a compact two-row switch. */
.mk-rail .mk-topics { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2px; margin: 0 0 6px; padding: 3px; border-radius: 11px; background: var(--fill-3); box-shadow: none; }
.mk-rail .mk-topics button { height: 28px; padding: 0 4px; border-radius: 8px; font: 600 12.5px var(--font); color: var(--label-3); }
.mk-rail .mk-topics button:hover { color: var(--label); }
.mk-rail .mk-topics button.on { color: var(--label); background: var(--fill); box-shadow: none; }
.mk-rail .mk2-live { display: flex; align-items: center; margin: 0 8px 8px; font-size: 11.5px; color: var(--label-3); }

/* Smart money's rail top: "Updated" small over the search, the topics on one row, the leagues matching them. */
#view.wk-has-rail:has(> .mk-rail) { grid-template-columns: 284px minmax(0, 1fr); }
.mk-rail .mk2-live { margin: 0 2px 8px; gap: 6px; font-size: 11px; font-weight: 600; letter-spacing: .01em; }
.mk-rail .mk2-live i { width: 6px; height: 6px; }
.mk-rail .mk-search { margin-bottom: 8px; }
.mk-rail .mk-topics, .mk-rail .gr-leagues { display: flex; gap: 0; margin: 0 0 8px; padding: 3px; border-radius: 10px; background: var(--fill-3); }
.mk-rail .mk-topics button, .mk-rail .gr-leagues button { flex: 1 1 auto; justify-content: center; height: 26px; padding: 0 4px; border-radius: 7px; background: none; box-shadow: none; font: 600 11.5px var(--font); color: var(--label-3); white-space: nowrap; }
.mk-rail .mk-topics button:hover, .mk-rail .gr-leagues button:hover { color: var(--label); }
.mk-rail .mk-topics button.on, .mk-rail .gr-leagues button.on { background: var(--fill); color: var(--label); box-shadow: none; }

/* Smart money's topics and leagues: roomier, on one row that scrolls sideways, fading out at the edge. */
.mk-rail .mk-topics, .mk-rail .gr-leagues { overflow-x: auto; scrollbar-width: none; overscroll-behavior-x: contain; scroll-behavior: smooth; -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 28px), transparent); mask-image: linear-gradient(90deg, #000 calc(100% - 28px), transparent); }
.mk-rail .mk-topics.at-end, .mk-rail .gr-leagues.at-end { -webkit-mask-image: none; mask-image: none; }
.mk-rail .mk-topics::-webkit-scrollbar, .mk-rail .gr-leagues::-webkit-scrollbar { display: none; }
.mk-rail .mk-topics button, .mk-rail .gr-leagues button { flex: none; height: 30px; padding: 0 13px; border-radius: 8px; font-size: 13px; }
.mk-rail .gr-leagues { flex-wrap: nowrap; }

/* Sports: Whale watch centred between the league filter and the first day heading. */
.mk-rail[data-games] .ov-row { margin: 5px 0 -1px; }
.mk-rail .gr-leagues button { gap: 6px; }
/* The filter rows fade at whichever edge has more to scroll to. */
.mk-rail .mk-topics, .mk-rail .gr-leagues { -webkit-mask-image: linear-gradient(90deg, transparent, #000 24px, #000 calc(100% - 28px), transparent); mask-image: linear-gradient(90deg, transparent, #000 24px, #000 calc(100% - 28px), transparent); }
.mk-rail .at-start:is(.mk-topics, .gr-leagues) { -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 28px), transparent); mask-image: linear-gradient(90deg, #000 calc(100% - 28px), transparent); }
.mk-rail .at-end:is(.mk-topics, .gr-leagues) { -webkit-mask-image: linear-gradient(90deg, transparent, #000 24px); mask-image: linear-gradient(90deg, transparent, #000 24px); }
.mk-rail .at-start.at-end:is(.mk-topics, .gr-leagues) { -webkit-mask-image: none; mask-image: none; }

/* The spinner over Smart money's feed while a view is worked out the first time: the logo, small and turning. */
.feed-spin { position: fixed; z-index: 50; width: 34px; height: 34px; margin: -17px 0 0 -17px; display: grid; place-items: center; pointer-events: none; }
.feed-spin .logo-mark { height: 30px; animation: busy-logo-spin 1.1s cubic-bezier(.55, .15, .45, .85) infinite; }
/* Loading logos: bigger. */
.feed-spin { width: 80px; height: 80px; margin: -40px 0 0 -40px; }
.feed-spin .logo-mark { height: 64px; }
.busy-logo { height: 64px; }

/* Dropdowns, refined: a quiet pill button (no focus ring from a click), a compact menu that grows from its corner,
   slim rows, the picked one marked by a small check. */
.dd-btn { height: 30px; gap: 5px; padding: 0 9px 0 12px; border-radius: 999px; background: var(--fill-3); color: var(--label-2); font: 600 12.5px var(--font); letter-spacing: .005em; }
.dd-btn:hover, .dd.open .dd-btn { background: var(--fill-2); color: var(--label); }
.dd-btn:focus { outline: none; }
.dd-btn:focus-visible { outline: none; box-shadow: 0 0 0 2px color-mix(in srgb, var(--accent) 60%, transparent); }
.dd-btn svg { width: 12px; height: 12px; stroke-width: 2.2; }
.dd-menu { top: calc(100% + 8px); min-width: 176px; padding: 4px; border-radius: 12px; box-shadow: 0 0 0 1px var(--sep), 0 12px 32px -8px rgba(0, 0, 0, .55), 0 2px 6px rgba(0, 0, 0, .25); transform-origin: top right; animation: dd-grow .18s cubic-bezier(.22, 1, .36, 1); }
@keyframes dd-grow { from { opacity: 0; transform: translateY(-4px) scale(.96); } }
.dd-menu button { height: 30px; padding: 0 10px 0 11px; border-radius: 8px; color: var(--label-2); font: 500 13px var(--font); transition: background .12s, color .12s; }
.dd-menu button:hover { background: var(--fill-3); color: var(--label); }
.dd-menu button.on { color: var(--label); font-weight: 600; background: none; }
.dd-menu button.on:hover { background: var(--fill-3); }
.dd-menu button svg { width: 13px; height: 13px; stroke-width: 2.6; }
.dd-menu button:focus { outline: none; }
.dd-menu button:focus-visible { background: var(--fill-3); color: var(--label); }
.mk-sort .dd-btn, .tl-tools .dd-btn { height: 30px; font-size: 12.5px; }

/* Tracked: the left rail is your tracked predictions, wider to fit each one's chart and return. */
#view.wk-has-rail:has(> .tr-rail) { grid-template-columns: 340px minmax(0, 1fr); }
.tr-rail .tr-list { position: static; gap: 4px; }
.tr-rail-h { display: flex; align-items: baseline; gap: 8px; margin: 10px 8px 10px; font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--label-3); }
.tr-rail-h span { font-weight: 600; letter-spacing: 0; color: var(--label-3); opacity: .8; }
.tr-grid:not(:has(> .tr-list)) { grid-template-columns: minmax(0, 1fr); }
/* Rows in the Tracked rail: room for the name and who called it, a slimmer chart. */
#view.wk-has-rail:has(> .tr-rail) { grid-template-columns: 372px minmax(0, 1fr); }
.tr-rail .tr-row { grid-template-columns: 30px minmax(0, 1fr) 52px 66px 26px; gap: 10px; padding: 11px 10px; border-radius: 12px; }
.tr-rail .tr-spark svg { width: 52px; }

/* Tracked rail top: portfolios, then the search. */
.tr-rail .bk-bar { flex-direction: column; align-items: stretch; gap: 8px; margin: 0 0 10px; }
.tr-rail .bk-chips { flex-wrap: wrap; }
.tr-rail .bk-acts { flex-wrap: wrap; padding: 0 2px; }
.tr-rail .bk-note { padding: 0 6px; }
.tr-rail .bk-input { width: 100%; }
.tr-rail .tr-search { height: 36px; margin: 0 0 4px; border-radius: 10px; }
.tr-rail .tr-search input { font-size: 13.5px; }
.tr-none { margin: 8px; font-size: 12.5px; color: var(--label-3); }

/* Portfolios in the Tracked rail: plain pills, no box; naming one is a clean field with Create and Cancel in it. */
.tr-rail .bk-chips { gap: 6px; padding: 0; background: none; box-shadow: none; }
.tr-rail .bk-chips .bk { height: 30px; padding: 0 12px; border-radius: 999px; background: var(--fill-3); box-shadow: none; font: 600 12.5px var(--font); color: var(--label-2); }
.tr-rail .bk-chips .bk:hover { background: var(--fill-2); color: var(--label); }
.tr-rail .bk-chips .bk.on { background: var(--fill); color: var(--label); }
.tr-rail .bk-chips .bk-new { background: none; color: var(--accent); padding: 0 8px; }
.tr-rail .bk-chips .bk-new:hover { background: color-mix(in srgb, var(--accent) 12%, transparent); color: var(--accent); }
.bk-field { display: flex; align-items: center; gap: 4px; width: 100%; height: 36px; padding: 0 4px 0 12px; border-radius: 10px; background: var(--fill-3); box-shadow: inset 0 0 0 1px var(--sep); transition: box-shadow .15s; }
.bk-field:focus-within { box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--accent) 55%, transparent); }
.bk-field .bk-input { flex: 1; min-width: 0; width: auto; height: 100%; padding: 0; border: 0; border-radius: 0; background: none; outline: none; box-shadow: none; color: var(--label); font: 500 13.5px var(--font); }
.bk-field .bk-input::placeholder { color: var(--label-3); }
.bk-field button { flex: none; height: 28px; padding: 0 11px; border: 0; border-radius: 7px; font: 600 12.5px var(--font); cursor: pointer; transition: background .12s, color .12s; }
.bk-field .bk-ok { background: var(--accent); color: #fff; }
.bk-field .bk-ok:hover { background: color-mix(in srgb, var(--accent) 85%, #fff); }
.bk-field .bk-x { background: none; color: var(--label-3); }
.bk-field .bk-x:hover { background: var(--fill-2); color: var(--label); }

/* Tracked rail as folders. */
.tr-rail .tr-head { gap: 2px; margin: 0 0 4px; }
.tr-folder, .tr-newf, .tr-back { display: flex; align-items: center; gap: 10px; width: 100%; padding: 8px 10px; border: 0; border-radius: 12px; background: none; color: var(--label); font: inherit; text-align: left; cursor: pointer; transition: background .12s, box-shadow .12s; }
.tr-folder:hover { background: var(--fill-3); }
.fold-ic { width: 22px; height: 22px; flex: none; fill: color-mix(in srgb, var(--accent) 22%, transparent); stroke: var(--accent); stroke-width: 1.6; stroke-linejoin: round; }
.tr-folder .wkr-n b { font-size: 14px; }
.tr-folder em { flex: none; font: 650 12.5px var(--font); font-style: normal; font-variant-numeric: tabular-nums; }
.tr-folder em.up { color: var(--good); } .tr-folder em.down { color: var(--bad); }
.tr-chev { flex: none; font-style: normal; font-size: 18px; color: var(--label-3); margin-left: 2px; }
.tr-newf { padding: 7px 10px; color: var(--accent); font: 600 13px var(--font); }
.tr-newf .fold-ic { width: 18px; height: 18px; }
.tr-newf:hover { background: color-mix(in srgb, var(--accent) 10%, transparent); }
.tr-back { width: auto; padding: 6px 10px 6px 6px; gap: 4px; color: var(--label-2); font: 600 13px var(--font); }
.tr-back svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.tr-back:hover { background: var(--fill-3); color: var(--label); }
.tr-fname { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: 12px; }
.tr-fname b { flex: 1; min-width: 0; font-size: 17px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tr-facts { display: flex; gap: 2px; }
.tr-facts button { display: grid; place-items: center; width: 30px; height: 30px; border: 0; border-radius: 8px; background: none; color: var(--label-3); cursor: pointer; }
.tr-facts button:hover { background: var(--fill-3); color: var(--label); }
.tr-facts button.bk-del:hover { color: var(--bad); }
.tr-facts svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.tr-in .bk-switch { padding: 2px 10px 6px; font-size: 12.5px; color: var(--label-2); }
.tr-in .bk-confirm { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; margin: 0 10px 8px; padding: 10px 12px; border-radius: 10px; background: color-mix(in srgb, var(--bad) 10%, transparent); font-size: 12.5px; color: var(--label-2); }
.tr-in .bk-confirm span { display: flex; gap: 6px; }
.tr-in .bk-confirm button { height: 28px; padding: 0 12px; border: 0; border-radius: 8px; background: var(--fill-2); color: var(--label); font: 600 12.5px var(--font); cursor: pointer; }
.tr-in .bk-confirm .bk-del { background: var(--bad); color: #fff; }
.tr-others-h { margin-top: 18px !important; }
.tr-others-h small { margin-left: auto; font-size: 10.5px; font-weight: 600; letter-spacing: .02em; text-transform: none; color: var(--label-3); }
/* A row you can drag: a click cursor, and the hand only once you press and hold to move it. */
.tr-row[draggable="true"] { cursor: pointer; }
.tr-row[draggable="true"]:active { cursor: grabbing; }
.tr-row.dragging { opacity: .45; }
.tr-dragging [data-drop-book] { transition: background .12s, box-shadow .12s; }
.tr-dragging .tr-folder, .tr-dragging .tr-back, .tr-dragging .tr-fname { box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--accent) 30%, transparent); }
[data-drop-book].drop-on { background: color-mix(in srgb, var(--accent) 16%, transparent) !important; box-shadow: inset 0 0 0 1.5px var(--accent) !important; }
/* An empty folder, in the middle of the page. */
.tr-fempty { display: flex; flex-direction: column; align-items: center; gap: 10px; max-width: 460px; margin: 90px auto 0; padding: 40px 32px; border: 1.5px dashed var(--sep-strong); border-radius: 20px; text-align: center; transition: background .15s, border-color .15s; }
.tr-fempty-ic .fold-ic { width: 44px; height: 44px; stroke-width: 1.3; }
.tr-fempty b { font-size: 19px; }
.tr-fempty p { margin: 0; font-size: 14px; line-height: 1.55; color: var(--label-2); }
.tr-fempty p em { font-style: normal; color: var(--label); font-weight: 600; }
.tr-fempty .tr-go { margin-top: 8px; }
.tr-fempty.drop-on { border-color: var(--accent); }
/* The name field's cancel: a red X. */
.bk-field .bk-x { display: grid; place-items: center; width: 28px; padding: 0; color: var(--bad); }
.bk-field .bk-x svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; }
.bk-field .bk-x:hover { background: color-mix(in srgb, var(--bad) 14%, transparent); color: var(--bad); }
/* Tracking from the feed: just track it, or into a folder. */
.bk-pick .bk-pick-plain { font-weight: 600; color: var(--label); }
.bk-pick button { gap: 8px; justify-content: flex-start; }
.bk-pick button svg { width: 16px; height: 16px; flex: none; }
.bk-pick .bk-pick-plain svg { fill: none; stroke: var(--accent); stroke-width: 2.2; stroke-linecap: round; }
.bk-pick small { margin-top: 4px; border-top: 1px solid var(--sep); padding-top: 8px; }

/* An open portfolio's row, plain like a trade row; edit and delete appear on hover. */
.tr-fname { gap: 10px; padding: 8px 10px; }
.tr-fname .wkr-n b { font-size: 14px; font-weight: 650; }
.tr-fname .tr-facts { opacity: 0; transition: opacity .15s; }
.tr-fname:hover .tr-facts, .tr-fname:focus-within .tr-facts { opacity: 1; }
.tr-in { gap: 2px; }
/* Naming a portfolio: a quiet row, folder icon, the name, Create, a red X. */
.tr-rail .bk-field { height: 44px; gap: 8px; padding: 0 6px 0 10px; border-radius: 12px; background: var(--fill-3); box-shadow: none; }
.tr-rail .bk-field:focus-within { background: var(--fill-2); box-shadow: none; }
.tr-rail .bk-field .fold-ic { width: 22px; height: 22px; }
.tr-rail .bk-field .bk-input { font: 600 14px var(--font); }
.tr-rail .bk-field .bk-ok { height: 28px; padding: 0 10px; border-radius: 8px; background: none; color: var(--accent); font: 650 13px var(--font); }
.tr-rail .bk-field .bk-ok:hover { background: color-mix(in srgb, var(--accent) 14%, transparent); }
.tr-rail .bk-field .bk-x { width: 28px; height: 28px; border-radius: 8px; }

/* The check's menu on a filed trade. */
.bk-pick .pm-stop { color: var(--bad); }
.bk-pick .pm-stop svg { fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; }
.bk-pick .pm-stop:hover { background: color-mix(in srgb, var(--bad) 12%, transparent); color: var(--bad); }
/* An open portfolio: its row, then its trades hanging under it on a guide line. */
.tr-fname { cursor: pointer; transition: background .12s; }
.tr-fname:hover { background: var(--fill-3); }
.tr-fname.on { background: var(--fill-2); }
.tr-open .tr-list { gap: 2px; }
.tr-open .tr-row:not(.other) { position: relative; margin-left: 22px; }
.tr-open .tr-row:not(.other)::before { content: ""; position: absolute; left: -11px; top: -2px; bottom: -2px; width: 1.5px; border-radius: 1px; background: var(--sep-strong); }
.tr-open .tr-head { margin-bottom: 2px; }
/* The portfolio overview. */
.pov { display: flex; flex-direction: column; gap: 22px; padding-top: 4px; }
.pov-facts { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0; border-top: 1px solid var(--sep); border-bottom: 1px solid var(--sep); }
.pov-f { display: flex; flex-direction: column; gap: 6px; padding: 16px 18px; border-left: 1px solid var(--sep); min-width: 0; }
.pov-f:first-child { border-left: 0; padding-left: 0; }
.pov-f small { font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--label-3); }
.pov-f b { font-size: 18px; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pov-f b.up { color: var(--good); } .pov-f b.down { color: var(--bad); }
.pov-list { display: flex; flex-direction: column; gap: 2px; }
.pov-row { display: grid; grid-template-columns: 30px minmax(0, 1fr) 90px; align-items: center; gap: 14px; padding: 12px 12px; border: 0; border-radius: 12px; background: none; color: var(--label); font: inherit; text-align: left; cursor: pointer; transition: background .12s; }
.pov-row:hover { background: var(--fill-3); }
.pov-n { display: flex; flex-direction: column; min-width: 0; }
.pov-n b { font-size: 15px; font-weight: 650; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pov-n small { font-size: 12.5px; color: var(--label-3); }
.pov-row .tr-v { text-align: right; }

/* Small menus by a button (the track check, the portfolio picker): sized to their content, never stretched across. */
.bk-pick.dd-menu { right: auto; bottom: auto; width: max-content; min-width: 190px; max-width: 280px; padding: 4px; }
.bk-pick button { height: 32px; padding: 0 12px 0 10px; font-size: 13px; }
.bk-pick button svg { width: 15px; height: 15px; }
.bk-pick button .fold-ic { width: 16px; height: 16px; }
.tk-btn:focus { outline: none; }
.tk-btn:focus-visible { outline: none; box-shadow: 0 0 0 2px color-mix(in srgb, var(--accent) 55%, transparent); }

/* New portfolio, once there is one: a blue + circle at the right of the Portfolios heading. */
.tr-rail-h:has(.tr-plus) { align-items: center; }
.tr-plus { display: grid; place-items: center; width: 22px; height: 22px; margin-left: auto; padding: 0; border: 0; border-radius: 50%; background: var(--accent); color: #fff; cursor: pointer; transition: transform .12s, background .12s; }
.tr-plus:hover { background: color-mix(in srgb, var(--accent) 85%, #fff); transform: scale(1.06); }
.tr-plus svg { width: 13px; height: 13px; fill: none; stroke: currentColor; stroke-width: 2.6; stroke-linecap: round; }

/* In a portfolio, an open trade stands alone: the portfolio's chart shows only on its overview. */
.tr.in-folder:has(> .tr-grid > .tr-detail:not(.tr-ov)) > .tr-sum { display: none; }
.tr.in-folder:has(> .tr-grid > .tr-detail:not(.tr-ov)) > .tr-grid { padding-top: 0; }
/* The portfolio's return on its row; edit and delete take its place on hover. */
.tr-froi { flex: none; margin-left: auto; font: 650 13px var(--font); font-style: normal; font-variant-numeric: tabular-nums; }
.tr-froi.up { color: var(--good); } .tr-froi.down { color: var(--bad); }
.tr-fname .tr-facts { display: none; opacity: 1; margin-left: auto; }
.tr-fname:hover .tr-facts, .tr-fname:focus-within .tr-facts { display: flex; }
.tr-fname:hover .tr-froi, .tr-fname:focus-within .tr-froi { display: none; }

/* The tracked trade, fuller: the call and the news on the left, the crowd and the money on the right. */
.trd-cols { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 36px; margin-top: 28px; align-items: start; }
.trd-main { display: flex; flex-direction: column; gap: 28px; min-width: 0; }
.trd-side { display: flex; flex-direction: column; gap: 22px; min-width: 0; }
.trd-side .tr-ins { margin: 0; }
.trd-side .tri-grid { grid-template-columns: 1fr; }
.trd-card { padding: 20px 22px; border-radius: 18px; background: var(--fill-3); box-shadow: inset 0 0 0 1px var(--sep); }
.trd-card header { display: flex; align-items: center; justify-content: space-between; gap: 14px; }
.trd-who { display: flex; align-items: center; gap: 12px; min-width: 0; color: var(--label); }
.trd-who > span { display: flex; flex-direction: column; min-width: 0; }
.trd-who b { display: flex; align-items: center; gap: 4px; font-size: 16px; }
.trd-who small { font-size: 13px; color: var(--label-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.trd-who:hover b { text-decoration: underline; }
.trd-post { margin: 16px 0 0; font-size: 17px; line-height: 1.55; color: var(--label); white-space: pre-line; }
.trd-img { margin-top: 14px; border-radius: 14px; overflow: hidden; }
.trd-card footer { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--sep); font-size: 13px; color: var(--label-3); }
.trd-card footer a { font-weight: 600; color: var(--accent); }
.trd-news h3, .trd-side h6 { margin: 0 0 10px; font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--label-3); }
.trd-news-list { display: flex; flex-direction: column; }
.trd-n { display: flex; flex-direction: column; gap: 3px; padding: 12px 0; border-bottom: 1px solid var(--sep); color: var(--label); }
.trd-n:last-child { border-bottom: 0; }
.trd-n b { font-size: 14.5px; font-weight: 600; line-height: 1.4; }
.trd-n:hover b { color: var(--accent); }
.trd-n small { font-size: 12px; color: var(--label-3); }
.trd-news-wait { display: block; height: 120px; border-radius: 12px; background: linear-gradient(90deg, var(--fill-3), var(--fill-2), var(--fill-3)) 0 0 / 200% 100%; animation: trd-shimmer 1.4s linear infinite; }
@keyframes trd-shimmer { to { background-position: -200% 0; } }
.trd-side .cs { margin: 0; }
.trd-oc { display: grid; grid-template-columns: 24px minmax(0, 1fr) auto; align-items: center; gap: 10px; padding: 8px 0; color: var(--label); }
.trd-oc span { display: flex; flex-direction: column; min-width: 0; }
.trd-oc b { font-size: 13px; }
.trd-oc small { font-size: 12px; color: var(--label-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.trd-oc em { font-style: normal; font: 650 11.5px var(--font); padding: 3px 8px; border-radius: 999px; }
.trd-oc em.up { color: var(--good); background: color-mix(in srgb, var(--good) 14%, transparent); }
.trd-oc em.down { color: var(--bad); background: color-mix(in srgb, var(--bad) 14%, transparent); }
.trd-oc:hover b { text-decoration: underline; }
.trd-mv { display: grid; grid-template-columns: 64px minmax(0, 1fr); gap: 10px; align-items: baseline; padding: 7px 0; }
.trd-mv > b { font: 700 14px var(--font); font-variant-numeric: tabular-nums; }
.trd-mv > b.up { color: var(--good); } .trd-mv > b.down { color: var(--bad); }
.trd-mv span { display: flex; flex-direction: column; font-size: 13px; color: var(--label); min-width: 0; }
.trd-mv small { font-size: 11.5px; color: var(--label-3); }
@media (max-width: 1100px) { .trd-cols { grid-template-columns: 1fr; } }

.trd-post.clamp { display: -webkit-box; -webkit-line-clamp: 6; -webkit-box-orient: vertical; overflow: hidden; }
.trd-more { margin-top: 8px; padding: 0; border: 0; background: none; color: var(--accent); font: 600 13.5px var(--font); cursor: pointer; }

/* The statements in one post, colored by verdict: green true, red false, grey can't tell, blue open or being checked. */
.an-switch button[class*="v-"] { --v: var(--label-3); color: color-mix(in srgb, var(--v) 75%, var(--label)); background: color-mix(in srgb, var(--v) 13%, transparent); margin: 0 1px; }
.an-switch button[class*="v-"]:hover { background: color-mix(in srgb, var(--v) 22%, transparent); color: var(--label); }
.an-switch button[class*="v-"].on { color: #fff; background: color-mix(in srgb, var(--v) 70%, #000); box-shadow: none; }
.an-switch button.v-good { --v: var(--good); }
.an-switch button.v-bad { --v: var(--bad); }
.an-switch button.v-grey { --v: #8e8e93; }
.an-switch button.v-open { --v: var(--accent); }

/* One chart: an open trade hides the portfolio graph above it (the portfolio's value is in the header). */
.tr:has(> .tr-grid > .tr-detail:not(.tr-ov)) > .tr-sum { display: none; }
/* News as cards. */
.trd-news-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.trd-n { display: flex; flex-direction: column; gap: 10px; padding: 16px 18px; border: 0; border-radius: 16px; background: var(--fill-3); box-shadow: inset 0 0 0 1px var(--sep); transition: background .15s, transform .15s; }
.trd-n:hover { background: var(--fill-2); transform: translateY(-1px); }
.trd-n.lead { grid-column: 1 / -1; padding: 20px 22px; background: linear-gradient(135deg, color-mix(in srgb, var(--accent) 14%, var(--fill-3)), var(--fill-3)); }
.trd-n.lead b { font-size: 19px; line-height: 1.35; }
.trd-n b { font-size: 14.5px; font-weight: 650; line-height: 1.4; }
.trd-n:hover b { color: var(--label); }
.trd-n-src { display: flex; align-items: center; gap: 8px; font-size: 12.5px; font-weight: 600; color: var(--label-2); }
.trd-n-src img { width: 18px; height: 18px; border-radius: 5px; background: #fff; }
.trd-n-src small { margin-left: auto; font-weight: 500; color: var(--label-3); }
.trd-news-wait { grid-column: 1 / -1; }
/* The caller's record. */
.trc { padding: 18px; border-radius: 16px; background: var(--fill-3); box-shadow: inset 0 0 0 1px var(--sep); }
.trc h6 { margin: 0 0 12px; }
.trc-top { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.trc-top div { display: flex; flex-direction: column; gap: 2px; }
.trc-top b { font: 750 22px var(--font-display, var(--font)); font-variant-numeric: tabular-nums; }
.trc-top b.up { color: var(--good); } .trc-top b.down { color: var(--bad); }
.trc-top small { font-size: 11.5px; color: var(--label-3); }
.trc-tags { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 12px; }
.trc-tag { padding: 4px 9px; border-radius: 999px; font: 650 11.5px var(--font); background: var(--fill-2); color: var(--label-2); }
.trc-tag.proven { background: color-mix(in srgb, var(--good) 16%, transparent); color: var(--good); }
.trc-tag.rising, .trc-tag.hot { background: color-mix(in srgb, var(--accent) 16%, transparent); color: var(--accent); }
.trc-tag.cold { background: color-mix(in srgb, var(--bad) 14%, transparent); color: var(--bad); }
.trc-form { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 14px; }
.trc-form small, .trc-sub > small { font-size: 11px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--label-3); }
.trc-form span { display: flex; gap: 4px; }
.trc-dot { flex: none; width: 10px; height: 10px; border-radius: 3px; }
.trc-dot.up { background: var(--good); } .trc-dot.down { background: var(--bad); }
.trc-topics { display: flex; flex-direction: column; gap: 8px; margin-top: 14px; }
.trc-t { display: grid; grid-template-columns: 74px minmax(0, 1fr) 44px; align-items: center; gap: 10px; font-size: 12.5px; color: var(--label-2); }
.trc-t b { text-align: right; font-variant-numeric: tabular-nums; color: var(--label); }
.trc-bar { height: 6px; border-radius: 3px; background: color-mix(in srgb, var(--bad) 55%, transparent); overflow: hidden; }
.trc-bar i { display: block; width: var(--w); height: 100%; background: var(--good); }
.trc-sub { display: flex; flex-direction: column; gap: 2px; margin-top: 16px; }
.trc-sub > small { margin-bottom: 4px; }
.trc-call { display: grid; grid-template-columns: 10px minmax(0, 1fr) auto; align-items: center; gap: 10px; padding: 6px 0; color: var(--label); font-size: 13px; }
.trc-call span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.trc-call small { font-size: 11.5px; color: var(--label-3); }
.trc-call:hover span { text-decoration: underline; }
.trc-all { display: inline-flex; align-items: center; gap: 4px; margin-top: 12px; font: 600 13px var(--font); color: var(--accent); }
.trc-all svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 2.2; }
/* Smart money. */
.trs-row { display: grid; grid-template-columns: minmax(0, 1fr) 90px auto; align-items: center; gap: 10px; font-size: 13px; }
.trs-row > span:first-child { display: flex; flex-direction: column; }
.trs-row small { font-size: 11.5px; color: var(--label-3); }
.trs-row b { font: 650 13px var(--font); white-space: nowrap; }
.trs-row b.up { color: var(--good); } .trs-row b.down { color: var(--bad); }
.trs-note { margin: 10px 0 0; font-size: 12.5px; color: var(--label-2); }

/* The tracked trade's story: one column of sections, each a kicker, a sentence, and what backs it. */
.ts { display: flex; flex-direction: column; margin-top: 8px; }
.ts-sec { padding: 34px 0; border-top: 1px solid var(--sep); }
.ts-sec:first-child { border-top: 0; padding-top: 24px; }
.ts-k { font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--accent); }
.ts-h { margin: 8px 0 20px; font: 800 clamp(20px, 1.9vw, 26px)/1.2 var(--font-display, var(--font)); letter-spacing: -.02em; color: var(--label); max-width: 900px; }
.ts-sec h6 { margin: 0 0 10px; font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--label-3); }
/* The call. */
.ts-who { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.ts-who > a { display: flex; align-items: center; gap: 14px; min-width: 0; color: var(--label); }
.ts-who > a > span { display: flex; flex-direction: column; min-width: 0; }
.ts-who b { display: flex; align-items: center; gap: 6px; font-size: 17px; }
.ts-who small { font-size: 13px; color: var(--label-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ts-who > a:hover b > span { text-decoration: underline; }
.ts-who .trc-tag { font-size: 11px; padding: 3px 8px; }
.ts-quote { margin: 20px 0 0; padding: 2px 0 2px 20px; border-left: 3px solid var(--accent); font-size: 20px; line-height: 1.55; font-weight: 500; color: var(--label); white-space: pre-line; max-width: 980px; }
.ts-quote.clamp { display: -webkit-box; -webkit-line-clamp: 5; -webkit-box-orient: vertical; overflow: hidden; }
.ts-call .trd-more { margin-left: 23px; }
.ts-img { margin: 16px 0 0 23px; max-width: 620px; border-radius: 14px; overflow: hidden; }
.ts-links { display: flex; flex-wrap: wrap; gap: 6px 18px; margin: 16px 0 0 23px; font-size: 13px; color: var(--label-3); }
.ts-links a { font-weight: 600; color: var(--accent); }
/* Where everyone stands. */
.ts-you { margin: -6px 0 18px; font-size: 15px; color: var(--label-2); }
.ts-you b { color: var(--label); }
.ts-stand { display: grid; grid-template-columns: 1fr 1fr; gap: 12px 48px; }
.ts-stand .np-lean { padding: 10px 0; }
/* The debate: the faceoff, without its card. */
.ts-debate .fo { padding: 0; border: 0; border-radius: 0; background: none; }
.ts-debate .fo h3 { margin-top: 8px; font: 800 clamp(20px, 1.9vw, 26px)/1.2 var(--font-display, var(--font)); letter-spacing: -.02em; }
/* The caller's record. */
.ts-rec-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.3fr); gap: 48px; }
.ts-rec .trc-top b { font-size: 30px; }
.ts-rec .trc-form { margin-top: 20px; }
.ts-rec .trc-sub:first-child { margin-top: 0; }
/* The money. */
.ts-money { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 12px 48px; }
.ts-facts .tr-ins { margin: 0; }
.ts-facts .tr-ins h3 { display: none; }
.ts-news .trd-news-list { margin-top: 12px; }
@media (max-width: 1100px) { .ts-stand, .ts-rec-grid { grid-template-columns: 1fr; gap: 24px; } }

/* Tracked trade: the story in the center, the poster on the right. */
.ts-wrap { display: grid; grid-template-columns: minmax(0, 1fr) 360px; gap: 40px; align-items: start; }
.ts-aside { position: sticky; top: 88px; display: flex; flex-direction: column; gap: 18px; padding-top: 24px; max-height: calc(100vh - 100px); overflow-y: auto; scrollbar-width: none; }
.ts-aside::-webkit-scrollbar { display: none; }
.ts-aside .wc { margin: 0; }
.tsa-follow .follow { width: 100%; height: 38px; }
.tsa-b h6 { margin: 0 0 8px; font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--label-3); }
.tsa-b .trc-t { margin-bottom: 8px; }
.ts-call .ts-who small { white-space: normal; }
@media (max-width: 1250px) { .ts-wrap { grid-template-columns: 1fr; } .ts-aside { position: static; max-height: none; } }

/* The post page's chart: black, taller, and the stretch a statement covers shaded behind the line. */
:root { --chart-bg: #000; }
:root[data-theme="light"] { --chart-bg: #fff; }
@media (prefers-color-scheme: light) { :root:not([data-theme="dark"]) { --chart-bg: #fff; } }
.lw-big { height: 380px; border-radius: 14px; overflow: hidden; background: var(--chart-bg); }
.lw-period { position: absolute; top: 0; bottom: 26px; z-index: 0; pointer-events: none; background: linear-gradient(180deg, color-mix(in srgb, var(--accent) 16%, transparent), color-mix(in srgb, var(--accent) 6%, transparent)); border-left: 1px dashed color-mix(in srgb, var(--accent) 60%, transparent); border-right: 1px dashed color-mix(in srgb, var(--accent) 60%, transparent); }
.lw-period span { position: absolute; top: 8px; left: 8px; padding: 3px 8px; border-radius: 999px; background: color-mix(in srgb, var(--accent) 85%, #000); color: #fff; font: 650 11px var(--font); white-space: nowrap; }
.lw-big canvas { position: relative; }
/* The band sits over the chart's canvas (which paints its own black), tinted so the line shows through. */
.lw-period { z-index: 2; }
/* The panel around the post page's chart matches it: black. */
.dt-panel.an-chart { background: var(--chart-bg); }

/* Where everyone stands spans the column: each lean row runs the full width. */
.ts-stand { grid-template-columns: repeat(auto-fit, minmax(380px, 1fr)); }
.ts-stand .np-lean { grid-template-columns: minmax(170px, 1fr) minmax(120px, 2fr) 120px; gap: 18px; }
.ts-stand .np-bar { height: 8px; border-radius: 4px; }
/* The tape. */
.ts-sub { margin: -10px 0 18px; font-size: 14px; color: var(--label-3); }
.tape { position: relative; display: flex; flex-direction: column; }
.tape::before { content: ""; position: absolute; left: 27px; top: 10px; bottom: 10px; width: 2px; border-radius: 1px; background: linear-gradient(180deg, var(--sep-strong), transparent); }
.tape-row { position: relative; display: grid; grid-template-columns: 56px minmax(0, 1fr); gap: 8px; padding: 12px 12px 12px 0; border-radius: 14px; color: var(--label); transition: background .15s; }
.tape-row:hover { background: var(--fill-3); }
.tape-ic { display: grid; justify-items: center; align-content: start; padding-top: 2px; }
.tape-ic .av { box-shadow: 0 0 0 4px var(--bg); }
.tape-dot { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; font: 800 13px var(--font); color: #64d2ff; background: color-mix(in srgb, #64d2ff 16%, var(--bg)); box-shadow: 0 0 0 4px var(--bg); }
.tape-dot.insider { font-size: 9.5px; color: #bf5af2; background: color-mix(in srgb, #bf5af2 16%, var(--bg)); }
.tape-src { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 10px; background: #fff; box-shadow: 0 0 0 4px var(--bg); overflow: hidden; }
.tape-src img { width: 22px; height: 22px; }
.tape-b { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.tape-meta { display: flex; align-items: center; gap: 8px; min-width: 0; }
.tape-meta b { font-size: 14px; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tape-meta small { flex: none; font-size: 12.5px; color: var(--label-3); }
.tape-tag { margin-left: auto; flex: none; padding: 3px 9px; border-radius: 999px; font: 700 11px var(--font); font-style: normal; background: var(--fill-2); color: var(--label-2); }
.tape-tag.up { color: var(--good); background: color-mix(in srgb, var(--good) 15%, transparent); }
.tape-tag.down { color: var(--bad); background: color-mix(in srgb, var(--bad) 15%, transparent); }
.tape-tag.money { color: #64d2ff; background: color-mix(in srgb, #64d2ff 14%, transparent); }
.tape-tag.news { color: #ffd60a; background: color-mix(in srgb, #ffd60a 14%, transparent); }
.tape-t { font-size: 15.5px; line-height: 1.45; color: var(--label); }
.tape-row.news .tape-t { font-size: 17px; font-weight: 650; letter-spacing: -.005em; }
.tape-row.money .tape-t { color: var(--label-2); }
.tape-row.money .tape-t b.up { color: var(--good); } .tape-row.money .tape-t b.down { color: var(--bad); } .tape-row.money .tape-t b.flat { color: var(--label); }
.tape-wait { height: 140px; border-radius: 14px; background: linear-gradient(90deg, var(--fill-3), var(--fill-2), var(--fill-3)) 0 0 / 200% 100%; animation: trd-shimmer 1.4s linear infinite; }
/* The poster column: prediction record and history. */
.tsa-topics { display: flex; flex-direction: column; gap: 10px; margin: 4px 0 12px; }
.tsa-topic { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 6px 10px; align-items: baseline; }
.tsa-topic > span:first-child { font-size: 13px; font-weight: 650; color: var(--label); }
.tsa-topic > b { font: 800 20px var(--font-display, var(--font)); font-variant-numeric: tabular-nums; }
.tsa-topic .trc-bar { grid-column: 1 / -1; height: 7px; }
.tsa-topic small { grid-column: 1 / -1; margin-top: -2px; font-size: 11.5px; color: var(--label-3); }
.tsa-p { display: grid; grid-template-columns: 52px minmax(0, 1fr) auto; align-items: center; gap: 10px; padding: 7px 0; color: var(--label); font-size: 13px; }
.tsa-p em { justify-self: start; padding: 2px 7px; border-radius: 6px; font: 700 10.5px var(--font); font-style: normal; text-transform: uppercase; letter-spacing: .03em; background: var(--fill-2); color: var(--label-2); }
.tsa-p em.up { color: var(--good); background: color-mix(in srgb, var(--good) 15%, transparent); }
.tsa-p em.down { color: var(--bad); background: color-mix(in srgb, var(--bad) 15%, transparent); }
.tsa-p em.live { color: var(--accent); background: color-mix(in srgb, var(--accent) 15%, transparent); }
.tsa-p span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tsa-p small { font-size: 11.5px; color: var(--label-3); }
.tsa-p:hover span { text-decoration: underline; }

/* The poster's prediction record by topic, as a timeline you can hover and open. */
.tsa-topic { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 6px 10px; align-items: baseline; width: 100%; padding: 10px 10px 8px; margin: 0 -10px; border: 0; border-radius: 12px; background: none; color: inherit; font: inherit; text-align: left; cursor: pointer; transition: background .15s; }
.tsa-topic:hover { background: var(--fill-3); }
.pt-line { grid-column: 1 / -1; display: flex; gap: 2px; height: 14px; }
.pt-line > i { position: relative; flex: 1; min-width: 3px; border-radius: 3px; transition: transform .12s, filter .12s; }
.pt-line > i.up { background: var(--good); } .pt-line > i.down { background: var(--bad); }
.pt-line > i:hover { transform: scaleY(1.45); filter: brightness(1.2); z-index: 2; }
.pt-tip { position: absolute; bottom: calc(100% + 12px); left: 50%; z-index: 20; display: none; flex-direction: column; gap: 4px; width: 230px; padding: 10px 12px; border-radius: 12px; background: var(--glass-strong, #1c1c1e); box-shadow: 0 0 0 1px var(--sep-strong), 0 12px 28px rgba(0, 0, 0, .5); transform: translateX(-50%) scaleY(.69); transform-origin: bottom; font: 600 12.5px/1.4 var(--font); color: var(--label); white-space: normal; pointer-events: none; }
.pt-tip.l { left: -4px; transform: scaleY(.69); transform-origin: bottom left; }
.pt-tip.r { left: auto; right: -4px; transform: scaleY(.69); transform-origin: bottom right; }
.pt-line > i:hover .pt-tip { display: flex; }
.pt-tip em { align-self: flex-start; padding: 2px 7px; border-radius: 6px; font: 700 10.5px var(--font); font-style: normal; text-transform: uppercase; letter-spacing: .03em; }
.pt-tip em.up { color: var(--good); background: color-mix(in srgb, var(--good) 16%, transparent); }
.pt-tip em.down { color: var(--bad); background: color-mix(in srgb, var(--bad) 16%, transparent); }
.pt-tip small { font-size: 11px; font-weight: 500; color: var(--label-3); }
.tsa-topic > small { grid-column: 1 / -1; display: flex; justify-content: space-between; gap: 8px; margin-top: 2px; font-size: 11px; color: var(--label-3); }
.tsa-topic:hover > small span:nth-child(2) { color: var(--accent); }

.pf-back { margin: 0 0 14px; }

/* The tape's way to the money: one row into Smart money. */
.ts-money-cta { display: grid; grid-template-columns: 34px minmax(0, 1fr) 18px; align-items: center; gap: 14px; width: 100%; margin-top: 14px; padding: 14px 16px; border: 0; border-radius: 14px; background: color-mix(in srgb, #64d2ff 8%, var(--fill-3)); box-shadow: inset 0 0 0 1px color-mix(in srgb, #64d2ff 22%, transparent); color: var(--label); font: inherit; text-align: left; cursor: pointer; transition: background .15s; }
.ts-money-cta:hover { background: color-mix(in srgb, #64d2ff 14%, var(--fill-3)); }
.ts-money-cta > span:nth-child(2) { display: flex; flex-direction: column; gap: 2px; }
.ts-money-cta b { font-size: 15px; }
.ts-money-cta small { font-size: 12.5px; color: var(--label-3); }
.ts-money-cta svg { width: 18px; height: 18px; fill: none; stroke: var(--label-3); stroke-width: 2.2; stroke-linecap: round; }

/* Called it: settled hits on the ticker. */
.tape-tag.hot { color: #ff9f0a; background: color-mix(in srgb, #ff9f0a 15%, transparent); margin-left: auto; }
.tape-tag.hot + .tape-tag { margin-left: 0; }
.tape-when { font-size: 12px; color: var(--label-3); }
/* Around this call: three stats, one row. */
.ts-facts .tri-grid { grid-template-columns: repeat(var(--n, 3), minmax(0, 1fr)); }
.ts-facts .tri:first-child { border-left: 0; padding-left: 0; }

/* The period band stops above the daily-moves strip so the bars read on their own. */
.lw-period { bottom: 30%; }

/* Where everyone stands: the versus board. */
.vs { display: flex; flex-direction: column; gap: 2px; }
.vs-head, .vs-row { display: grid; grid-template-columns: minmax(170px, 1.1fr) 64px minmax(160px, 3fr) 64px; align-items: center; gap: 14px; }
.vs-head { margin: 14px 0 4px; font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--label-3); }
.vs-head:first-child { margin-top: 0; }
.vs-head b { font-size: 11px; letter-spacing: .06em; }
.vs-head b.up { color: var(--good); text-align: right; } .vs-head b.down { color: var(--bad); }
.vs-head .vs-mid { justify-self: center; font-weight: 600; letter-spacing: 0; text-transform: none; opacity: .7; }
.vs-row { padding: 9px 0; }
.vs-row + .vs-row { border-top: 1px solid color-mix(in srgb, var(--sep) 60%, transparent); }
.vs-l { display: flex; flex-direction: column; min-width: 0; }
.vs-l b { font-size: 14px; font-weight: 650; color: var(--label); }
.vs-l small { font-size: 12px; color: var(--label-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.vs-n { font: 800 16px var(--font-display, var(--font)); font-variant-numeric: tabular-nums; }
.vs-n.up { text-align: right; color: var(--good); } .vs-n.down { color: var(--bad); }
.vs-n.dim { opacity: .4; }
.vs-bar { position: relative; height: 10px; border-radius: 5px; background: color-mix(in srgb, var(--bad) 75%, #000); overflow: hidden; }
.vs-bar i { position: absolute; inset: 0 auto 0 0; width: var(--w); background: var(--good); border-right: 2px solid var(--bg); }
.vs-bar::after { content: ""; position: absolute; left: 50%; top: -2px; bottom: -2px; width: 2px; margin-left: -1px; background: var(--label); opacity: .55; }
.ts-you { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; margin: -4px 0 20px; font-size: 15px; color: var(--label-2); }
.ts-you b { color: var(--label); }
.ts-you-tag { margin-right: 4px; padding: 4px 10px; border-radius: 999px; font: 750 12.5px var(--font); }
.ts-you-tag.up { color: var(--good); background: color-mix(in srgb, var(--good) 15%, transparent); }
.ts-you-tag.down { color: var(--bad); background: color-mix(in srgb, var(--bad) 15%, transparent); }
/* The voices under the board: the faceoff without its own title and bar (the board above says it). */
.ts-voices { margin-top: 26px; padding-top: 22px; border-top: 1px solid var(--sep); }
.ts-voices .fo { padding: 0; border: 0; border-radius: 0; background: none; }
.ts-voices .fo > h3, .ts-voices .fo > .fo-bar { display: none; }
.ts-voices .fo-cols { margin-top: 0; }
.ts-you { display: block; }
.ts-you-tag { display: inline-block; margin-right: 10px; }
/* A settled call's row says it opens the post. */
.tape-when { display: flex; align-items: center; gap: 10px; }
.tape-open { margin-left: auto; font-weight: 600; color: var(--accent); opacity: 0; transform: translateX(-4px); transition: opacity .15s, transform .15s; }
.tape-row:hover .tape-open { opacity: 1; transform: none; }
.ts-tape .tape-row { cursor: pointer; }

/* Daily-move pills on the bars, and the period's move on its band label. */
.lw-move { position: absolute; z-index: 3; transform: translateX(-50%); padding: 1px 6px; border-radius: 6px; font: 700 10.5px/1.5 var(--font); font-variant-numeric: tabular-nums; white-space: nowrap; pointer-events: none; }
.lw-move.up { color: var(--good); background: color-mix(in srgb, var(--good) 16%, var(--chart-bg)); }
.lw-move.down { color: var(--bad); background: color-mix(in srgb, var(--bad) 16%, var(--chart-bg)); }
.lw-period span { display: inline-flex; align-items: center; gap: 8px; }
.lw-period span b { padding: 1px 7px; border-radius: 999px; background: rgba(0, 0, 0, .35); font: 750 11px var(--font); }
.lw-period span b.up { color: #7dffa0; } .lw-period span b.down { color: #ff9b94; }
.lw-period.full { bottom: 26px; }

/* The tracked trade at a glance. */
.gl { display: flex; flex-direction: column; gap: 16px; margin-top: 26px; }
.gl-cards { display: grid; grid-template-columns: repeat(var(--n, 3), minmax(0, 1fr)); gap: 12px; }
.gl-card { display: flex; flex-direction: column; gap: 8px; padding: 16px 18px; border: 0; border-radius: 16px; background: var(--fill-3); box-shadow: inset 0 0 0 1px var(--sep); color: var(--label); font: inherit; text-align: left; min-width: 0; }
.gl-card > small { font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--label-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.gl-card > b { display: flex; align-items: baseline; gap: 8px; font: 800 24px var(--font-display, var(--font)); letter-spacing: -.01em; }
.gl-card > b.up { color: var(--good); } .gl-card > b.down { color: var(--bad); }
.gl-card > b span { font: 600 13px var(--font); color: var(--label-3); }
.gl-bar { height: 8px; border-radius: 4px; background: color-mix(in srgb, var(--bad) 75%, #000); overflow: hidden; }
.gl-bar i { display: block; width: var(--w); height: 100%; background: var(--good); border-right: 2px solid var(--fill-3); }
.gl-sub { font-size: 12.5px; color: var(--label-3); }
.gl-sub em { font-style: normal; font-weight: 700; }
.gl-with { color: var(--good); } .gl-against { color: var(--bad); }
.gl-caller { cursor: pointer; transition: background .15s; }
.gl-caller:hover { background: var(--fill-2); }
.gl-caller:hover .gl-sub { color: var(--accent); }
.gl-caller .pt-line { height: 12px; }
.gl-links { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 12px; }
.gl-link { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 16px 18px; border: 0; border-radius: 16px; background: color-mix(in srgb, var(--accent) 9%, var(--fill-3)); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--accent) 24%, transparent); color: var(--label); font: inherit; text-align: left; cursor: pointer; transition: background .15s; }
.gl-link:hover { background: color-mix(in srgb, var(--accent) 15%, var(--fill-3)); }
.gl-link span { display: flex; flex-direction: column; gap: 2px; }
.gl-link b { font-size: 15px; }
.gl-link small { font-size: 12.5px; color: var(--label-3); }
.gl-link svg { flex: none; width: 18px; height: 18px; fill: none; stroke: var(--accent); stroke-width: 2.2; stroke-linecap: round; }
@media (max-width: 1000px) { .gl-cards { grid-template-columns: 1fr; } }

/* A prediction's row opens its analysis. */
.pk-row[data-open-call] { cursor: pointer; }
/* Track it, on the analysis. */
.tk-pill { display: inline-flex; align-items: center; gap: 7px; height: 34px; margin-left: 4px; padding: 0 14px 0 10px; border: 0; border-radius: 999px; background: var(--accent); color: #fff; font: 650 13.5px var(--font); cursor: pointer; transition: background .15s, transform .12s; }
.tk-pill:hover { background: color-mix(in srgb, var(--accent) 85%, #fff); }
.tk-pill:active { transform: scale(.97); }
.tk-pill svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; }
.tk-pill.on { background: color-mix(in srgb, var(--good) 18%, transparent); color: var(--good); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--good) 45%, transparent); }
.an-first { display: inline-block; margin: 6px 0 0 2px; font: 600 13.5px var(--font); color: var(--accent); }

/* A hidden page stays hidden whatever layout it has (the Predictions grid kept its height and pushed an opened call off-screen). */
#view[hidden] { display: none !important; }

/* The glance as one strip, continuing the facts row: three columns, the same rules and dividers, no boxes. */
.gl { display: grid; grid-template-columns: repeat(var(--n, 3), minmax(0, 1fr)); gap: 0; margin: 0; padding: 18px 0 20px; border-bottom: 1px solid var(--sep); }
.gl .gl-card { padding: 0 20px; border-radius: 0; background: none; box-shadow: none; border-left: 1px solid var(--sep); gap: 8px; }
.gl .gl-card:first-child { border-left: 0; padding-left: 0; }
.gl .gl-card > small { font-size: 11px; }
.gl .gl-card > b { font-size: 22px; }
.gl .gl-bar { height: 6px; border-radius: 3px; }
.gl .gl-bar i { border-right-color: var(--bg); }
.gl .gl-caller { margin: -8px 0; padding-top: 8px; padding-bottom: 8px; border-radius: 0; transition: background .15s; }
.gl .gl-caller:hover { background: var(--fill-3); }
.gl .gl-caller .pt-line { height: 8px; }
.gl .gl-caller .pt-line > i { border-radius: 2px; }
/* The ways on, in the actions row. */
.trd-acts { flex-wrap: wrap; gap: 6px 22px; margin-top: 16px; }
.trd-link { display: inline-flex; align-items: center; gap: 4px; padding: 0; border: 0; background: none; color: var(--accent); font: 600 14px var(--font); cursor: pointer; }
.trd-link svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; transition: transform .15s; }
.trd-link:hover svg { transform: translateX(2px); }
@media (max-width: 1000px) { .gl { grid-template-columns: 1fr; gap: 16px; } .gl .gl-card { border-left: 0; padding: 0; } }

/* A prediction's page, wider. */
.dt-page { max-width: 1480px; padding-left: 24px; padding-right: 24px; }
.dt-grid { grid-template-columns: minmax(0, 1fr) 380px; gap: 48px; }
/* The live feed. */
.lf { margin-top: 28px; }
.lf-h h3 { margin: 6px 0 4px; font: 800 clamp(22px, 2vw, 28px)/1.2 var(--font-display, var(--font)); letter-spacing: -.02em; }
.lf-h p { margin: 0; font-size: 14px; color: var(--label-3); }
.lf-live { display: inline-flex; align-items: center; gap: 7px; font: 700 11px var(--font); letter-spacing: .08em; text-transform: uppercase; color: var(--accent); }
.lf-live i { width: 7px; height: 7px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 0 0 color-mix(in srgb, var(--accent) 60%, transparent); animation: lf-pulse 1.8s ease-out infinite; }
@keyframes lf-pulse { to { box-shadow: 0 0 0 8px transparent; } }
.lf-chips { display: flex; gap: 6px; flex-wrap: wrap; margin: 16px 0 6px; }
.lf-chips button { height: 30px; padding: 0 13px; border: 0; border-radius: 999px; background: var(--fill-3); color: var(--label-2); font: 600 12.5px var(--font); cursor: pointer; }
.lf-chips button:hover { color: var(--label); }
.lf-chips button.on { background: var(--label); color: var(--bg); }
.lf-empty { margin: 12px 0; font-size: 14px; color: var(--label-3); }

/* Back at the top of Smart money's column, when it was opened from a link. */
.mk-rail-back { display: inline-flex; align-items: center; gap: 4px; align-self: flex-start; height: 32px; margin: 0 0 10px; padding: 0 12px 0 8px; border-radius: 999px; background: var(--fill-3); box-shadow: inset 0 0 0 1px var(--sep); color: var(--label); font: 600 13px var(--font); }
.mk-rail-back:hover { background: var(--fill-2); }
.mk-rail-back svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }

/* Track it sits at the far right of the byline. */
.dt-by .tk-pill { margin-left: auto; }

/* A tracked trade: Smart money at the top right, level with the title. */
.trd-h .trd-t { flex: 1; }
.trd-sm { flex: none; align-self: center; display: inline-flex; align-items: center; gap: 8px; height: 38px; padding: 0 12px 0 6px; border: 0; border-radius: 999px; background: var(--fill-3); box-shadow: inset 0 0 0 1px var(--sep); color: var(--label); font: 600 13.5px var(--font); cursor: pointer; transition: background .15s; }
.trd-sm:hover { background: var(--fill-2); }
.trd-sm .tape-dot { width: 26px; height: 26px; font-size: 13px; }
.trd-sm svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; color: var(--label-3); transition: transform .15s; }
.trd-sm:hover svg { transform: translateX(2px); }
/* The post you're tracking, at the bottom: opens the prediction. */
.trd-post { margin-top: 26px; padding-top: 20px; border-top: 1px solid var(--sep); }
.trd-post h4 { margin: 0 0 6px; font: 700 11px var(--font); letter-spacing: .08em; text-transform: uppercase; color: var(--label-3); }
.trd-post .post { cursor: pointer; border-radius: 16px; padding-left: 12px; padding-right: 12px; margin: 0 -12px; transition: background .15s; }
.trd-post .post:hover { background: var(--fill-3); }

/* Smart money, top right of a prediction, level with its title. */
.dt-title { display: flex; align-items: center; justify-content: space-between; gap: 24px; }
.dt-title .trd-sm { margin-top: 10px; height: 42px; padding: 0 14px 0 7px; font-size: 14px; background: color-mix(in srgb, #64d2ff 9%, var(--fill-3)); box-shadow: inset 0 0 0 1px color-mix(in srgb, #64d2ff 26%, transparent); }
.dt-title .trd-sm:hover { background: color-mix(in srgb, #64d2ff 16%, var(--fill-3)); }
.dt-title .trd-sm .tape-dot { width: 28px; height: 28px; box-shadow: none; }
@media (max-width: 760px) { .dt-title { flex-direction: column; align-items: flex-start; gap: 4px; } }

/* The live feed: the pulse up top. */
.lf { margin-top: 30px; }
.lf-pulse { display: grid; grid-template-columns: repeat(var(--n, 4), minmax(0, 1fr)); gap: 10px; margin-top: 18px; }
.lf-tile { position: relative; display: flex; flex-direction: column; gap: 4px; min-width: 0; padding: 14px 16px; border-radius: 16px; background: var(--fill-3); box-shadow: inset 0 0 0 1px var(--sep); overflow: hidden; }
.lf-tile small { font: 700 10.5px var(--font); letter-spacing: .07em; text-transform: uppercase; color: var(--label-3); }
.lf-tile b { font: 800 24px/1.1 var(--font-display, var(--font)); letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.lf-tile b i { margin: 0 6px 0 4px; font: 600 13px var(--font); font-style: normal; color: var(--label-3); }
.lf-tile > span:last-child { font-size: 12.5px; color: var(--label-3); }
.lf-tile em { font-style: normal; } .lf-tile .up { color: var(--good); } .lf-tile .down { color: var(--bad); }
.lf-spark { position: absolute; right: 12px; top: 14px; opacity: .9; }
.lf-split { display: flex; height: 5px; margin: 4px 0 2px; border-radius: 3px; background: var(--bad); overflow: hidden; }
.lf-split i { width: var(--w); background: var(--good); border-right: 2px solid var(--bg); }
/* Filters, with what's in each. */
.lf-chips { margin: 18px 0 4px; }
.lf-chips button { display: inline-flex; align-items: center; gap: 7px; height: 32px; transition: background .15s, color .15s; }
.lf-chips small { font: 700 11px var(--font); opacity: .6; }
.lf-chips small:empty { display: none; }
.lf-k { width: 7px; height: 7px; border-radius: 50%; background: var(--label-3); }
.lf-k.call { background: var(--accent); } .lf-k.money { background: #64d2ff; } .lf-k.news { background: #ffd60a; }
.lf-chips button.on .lf-k.all { background: var(--bg); }
/* The items, by day, on a timeline. */
.lf-list { position: relative; display: flex; flex-direction: column; margin-top: 6px; }
.lf-list::before { content: ""; position: absolute; left: 31px; top: 40px; bottom: 20px; width: 2px; border-radius: 1px; background: linear-gradient(var(--sep), transparent); }
.lf-day { position: sticky; top: 64px; z-index: 1; align-self: flex-start; margin: 14px 0 4px; padding: 4px 11px; border-radius: 999px; background: var(--bg); box-shadow: inset 0 0 0 1px var(--sep); font: 700 11.5px var(--font); color: var(--label-2); }
.lf-i[hidden] { display: none; }
.lf-row { position: relative; display: grid; grid-template-columns: 64px minmax(0, 1fr) auto; align-items: center; gap: 4px 10px; padding: 11px 14px 11px 0; border-radius: 16px; color: var(--label); transition: background .18s, transform .18s; }
.lf-row:hover { background: var(--fill-3); transform: translateX(3px); }
.lf-ic { display: grid; justify-items: center; }
.lf-ic .av { box-shadow: 0 0 0 4px var(--bg); transition: box-shadow .18s; }
.lf-row:hover .lf-ic .av { box-shadow: 0 0 0 4px var(--fill-3); }
.lf-dot { display: grid; place-items: center; width: 38px; height: 38px; border-radius: 50%; font: 800 14px var(--font); color: #64d2ff; background: color-mix(in srgb, #64d2ff 16%, var(--bg)); box-shadow: 0 0 0 4px var(--bg); }
.lf-dot.insider { font-size: 10px; color: #bf5af2; background: color-mix(in srgb, #bf5af2 16%, var(--bg)); }
.lf-src { display: grid; place-items: center; width: 38px; height: 38px; border-radius: 11px; background: #fff; box-shadow: 0 0 0 4px var(--bg); overflow: hidden; }
.lf-src img { width: 24px; height: 24px; }
.lf-b { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.lf-meta { display: flex; align-items: center; gap: 8px; min-width: 0; font-size: 13px; }
.lf-meta b { font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lf-meta time { color: var(--label-3); white-space: nowrap; }
.lf-cred { padding: 1px 6px; border-radius: 6px; background: var(--fill-2); font: 700 11px var(--font); color: var(--label-2); }
.lf-t { font-size: 15.5px; line-height: 1.4; }
.lf-row.news .lf-t { font: 650 16.5px/1.35 var(--font); letter-spacing: -.005em; }
.lf-row.money .lf-t { color: var(--label-2); }
.lf-row.money .lf-t b { color: var(--label); }
.lf-side { display: inline-block; margin-right: 8px; padding: 1px 7px; border-radius: 6px; font: 750 11px/1.6 var(--font); font-style: normal; vertical-align: 2px; background: var(--fill-2); color: var(--label-2); }
.lf-side.up { color: var(--good); background: color-mix(in srgb, var(--good) 15%, transparent); }
.lf-side.down { color: var(--bad); background: color-mix(in srgb, var(--bad) 15%, transparent); }
.lf-res { display: flex; flex-direction: column; align-items: flex-end; gap: 1px; padding-left: 10px; }
.lf-res b { font: 800 16px var(--font); font-variant-numeric: tabular-nums; }
.lf-res small { font-size: 11px; color: var(--label-3); }
.lf-res.up b, .lf-amt.up { color: var(--good); } .lf-res.down b, .lf-amt.down { color: var(--bad); }
.lf-amt { padding-left: 10px; font: 800 19px var(--font-display, var(--font)); letter-spacing: -.01em; font-variant-numeric: tabular-nums; }
.lf-amt.flat { color: var(--label); }
.lf-go { width: 17px; height: 17px; fill: none; stroke: var(--label-3); stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; opacity: 0; transform: translateX(-4px); transition: opacity .18s, transform .18s; }
.lf-row:hover .lf-go { opacity: 1; transform: none; }
.lf-new { padding: 3px 9px; border-radius: 999px; font: 750 11px var(--font); font-style: normal; color: #ffd60a; background: color-mix(in srgb, #ffd60a 15%, transparent); animation: lf-glow 2.4s ease-in-out infinite; }
@keyframes lf-glow { 50% { box-shadow: 0 0 0 4px color-mix(in srgb, #ffd60a 10%, transparent); } }
.lf-wait { display: grid; gap: 10px; padding: 12px 0 0 64px; }
.lf-wait .skeleton { height: 46px; border-radius: 12px; }
.lf-more { display: block; width: 100%; margin-top: 10px; height: 42px; border: 0; border-radius: 14px; background: var(--fill-3); color: var(--label); font: 650 14px var(--font); cursor: pointer; transition: background .15s; }
.lf-more:hover { background: var(--fill-2); }
@media (max-width: 760px) { .lf-pulse { grid-template-columns: 1fr 1fr; } .lf-spark { display: none; } }

/* View <sym> in Smart money: quiet and outlined. */
.trd-sm, .dt-title .trd-sm { gap: 8px; height: 38px; padding: 0 12px 0 14px; border: 1px solid var(--sep); border-radius: 999px; background: transparent; box-shadow: none; color: var(--label); font: 600 13.5px var(--font); letter-spacing: -.005em; transition: border-color .15s, background .15s; }
.trd-sm:hover, .dt-title .trd-sm:hover { background: var(--fill-3); border-color: color-mix(in srgb, var(--label) 22%, transparent); }
.trd-sm .trd-sm-ic { width: 16px; height: 16px; fill: none; stroke: var(--accent); stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; transform: none; }
.trd-sm .trd-sm-go { width: 14px; height: 14px; margin-left: -2px; fill: none; stroke: var(--label-3); stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; transition: transform .15s; }
.trd-sm:hover .trd-sm-go { transform: translateX(2px); }
.trd-sm:hover .trd-sm-ic { transform: none; }

/* A tracked trade's entry row: one card, even columns. */
.trd-facts { margin: 22px 0 0; padding: 0; border: 0; border-radius: 16px; background: var(--fill-3); box-shadow: inset 0 0 0 1px var(--sep); overflow: hidden; }
.trd-f { gap: 5px; padding: 16px 20px; border-left: 1px solid var(--sep); }
.trd-f:first-child { padding-left: 20px; }
.trd-f small { font: 700 10.5px var(--font); letter-spacing: .08em; text-transform: uppercase; color: var(--label-3); }
.trd-f b { font: 750 19px/1.2 var(--font-display, var(--font)); letter-spacing: -.01em; }
.trd-f span { font-size: 12.5px; }
.trd-live { width: 7px; height: 7px; border-radius: 50%; background: var(--good); box-shadow: 0 0 0 3px color-mix(in srgb, var(--good) 20%, transparent); }
@media (max-width: 900px) { .trd-facts { grid-template-columns: 1fr 1fr; } .trd-f:nth-child(3) { border-left: 0; } .trd-f:nth-child(n+3) { border-top: 1px solid var(--sep); } }
.trd-post { margin-top: 28px; padding-top: 0; border-top: 0; }

/* A market chart waiting on its live price. */
.sc-price-wait { display: grid; place-items: center; }

/* Recently settled, in the live feed's filters. */
.lf-k.settled { background: #bf5af2; }

/* A tracked trade's Settles: the countdown alone, as bold and white as the numbers beside it. */
.trd-vs > div:last-child b:has(.trd-due) { font-size: 26px; line-height: 1.15; }
.trd-due { color: var(--label); }
/* A tracked trade's chart: blue up to the call. */
.trc-pre { stroke: var(--accent); stroke-width: 2; }
.trd-vs b .trd-due { font: inherit; color: var(--label); }

/* The live feed: empty tabs and a spent Show more stay hidden. */
.lf-chips button[hidden], .lf-more[hidden] { display: none; }

/* A tracked trade's entry row, as the chart's legend: no box, each value keyed to its mark on the chart. */
.trd-facts { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0 28px; margin: 6px 0 0; padding: 18px 0 20px; border: 0; border-top: 1px solid var(--sep); border-radius: 0; background: none; box-shadow: none; overflow: visible; }
.trd-f, .trd-f:first-child { gap: 4px; padding: 0; border: 0; }
.trd-f small { display: inline-flex; align-items: center; gap: 8px; font: 700 10.5px var(--font); letter-spacing: .08em; text-transform: uppercase; color: var(--label-3); }
.trd-f b { font: 750 22px/1.2 var(--font-display, var(--font)); letter-spacing: -.015em; }
.trd-f span { font-size: 12.5px; color: var(--label-3); }
.trd-f em { font-style: normal; font-weight: 650; }
.trd-f em.up { color: var(--good); } .trd-f em.down { color: var(--bad); } .trd-f em.flat { color: var(--label-2); }
.trd-k { flex: none; width: 9px; height: 9px; border-radius: 50%; }
.trd-k.call { background: var(--label); box-shadow: 0 0 0 2px var(--bg), 0 0 0 3px var(--label-3); }
.trd-k.you { background: var(--accent); box-shadow: 0 0 0 2px var(--bg), 0 0 0 3px color-mix(in srgb, var(--accent) 50%, transparent); }
.trd-k.now { animation: trd-k-pulse 2s ease-out infinite; }
.trd-k.now.up { background: var(--good); --c: var(--good); } .trd-k.now.down { background: var(--bad); --c: var(--bad); } .trd-k.now.flat { background: #aeaeb2; --c: #aeaeb2; }
@keyframes trd-k-pulse { 0% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--c) 55%, transparent); } 100% { box-shadow: 0 0 0 7px transparent; } }
.trd-k.target { width: 14px; height: 0; border-radius: 0; border-top: 2px dashed var(--target); }
.trd-way { display: block; width: min(160px, 100%); height: 4px; margin-top: 4px; border-radius: 2px; background: var(--fill-2); overflow: hidden; }
.trd-way i { display: block; width: var(--w); min-width: 4px; height: 100%; border-radius: 2px; background: var(--target); }
@media (max-width: 900px) { .trd-facts { grid-template-columns: 1fr 1fr; gap: 18px 24px; } .trd-f:nth-child(n+3) { border-top: 0; } }

/* A portfolio's icon: its first two trades' logos, top left and bottom right of a small square. */
.fold-logos { position: relative; flex: none; width: 30px; height: 30px; }
.fold-logos > i { position: absolute; display: grid; place-items: center; width: 20px; height: 20px; border-radius: 50%; overflow: hidden; }
.fold-logos > i:first-child { left: 0; top: 0; }
.fold-logos > i:last-child { right: 0; bottom: 0; box-shadow: 0 0 0 2px var(--bg); }
.tr-folder:hover .fold-logos > i:last-child { box-shadow: 0 0 0 2px var(--fill-3); }
.fold-logos > i > *, .fold-logos > i img, .fold-logos > i svg { width: 20px !important; height: 20px !important; font-size: 10px; }
.fold-logos.one { display: grid; place-items: center; }
.fold-logos.one > * { width: 30px !important; height: 30px !important; }
/* The trades not in a portfolio line up with the portfolios: the list fills the column, rows share their edges. */
.tr-rail > .tr-list { align-self: stretch; width: auto; }
.tr-rail .tr-row { margin-left: 0; margin-right: 0; }

/* Prediction rows: the asset leads, the call is the headline with the caller under it, then since the call, the
   crowd and the countdown in tidy columns. */
.pk-list-h.pk2, .pk-row.pk2 { grid-template-columns: 40px minmax(0, 1fr) 190px 170px 104px 36px; gap: 18px; padding: 0 16px; }
.pk-list-h.pk2 { height: 38px; font: 650 10.5px var(--font); letter-spacing: .07em; text-transform: uppercase; color: var(--label-3); }
.pk-row.pk2 { min-height: 0; padding-top: 14px; padding-bottom: 14px; }
.pk-logo { display: grid; place-items: center; width: 40px; height: 40px; }
.pk-topic { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; background: var(--fill-2); color: var(--label-2); font: 750 15px var(--font); }
.pk-topic svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }
.pk-topic.economic { color: #64d2ff; background: color-mix(in srgb, #64d2ff 14%, var(--bg)); }
.pk-topic.politics { color: #bf5af2; background: color-mix(in srgb, #bf5af2 14%, var(--bg)); }
.pk-topic.sports { color: #ff9f0a; background: color-mix(in srgb, #ff9f0a 14%, var(--bg)); }
.pk-topic.stocks, .pk-topic.crypto { color: var(--accent); background: color-mix(in srgb, var(--accent) 14%, var(--bg)); }
.pk-main { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.pk-title { font: 650 15.5px/1.3 var(--font-display, var(--font)); letter-spacing: -.01em; color: var(--label); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.pk-row.pk2:hover .pk-title { color: var(--accent); }
.pk-by { display: inline-flex; align-items: center; gap: 7px; align-self: flex-start; max-width: 100%; min-width: 0; font-size: 12.5px; color: var(--label-3); white-space: nowrap; }
.pk-by .av { flex: none; }
.pk-by b { font-weight: 600; color: var(--label-2); overflow: hidden; text-overflow: ellipsis; }
.pk-by:hover b { color: var(--label); text-decoration: underline; text-underline-offset: 3px; }
.pk-cred { padding: 0 6px; border-radius: 6px; background: var(--fill-2); font: 700 11px/18px var(--font); color: var(--label-2); font-variant-numeric: tabular-nums; }
.pk-by .pk-tierword { font-weight: 650; }
.pk-by time { color: var(--label-3); }
.pk-by time::before { content: "·"; margin-right: 7px; }
.pk-main .pk-stmt { align-self: flex-start; }
.pk-now, .pk-due2, .pk-crowd { display: flex; align-items: center; gap: 12px; min-width: 0; }
.pk-num { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.pk-num b { font: 750 16px/1.15 var(--font-display, var(--font)); letter-spacing: -.01em; font-variant-numeric: tabular-nums; color: var(--label); white-space: nowrap; }
.pk-num b.up { color: var(--good); } .pk-num b.down { color: var(--bad); } .pk-num b.live { color: var(--live); } .pk-num b.muted { color: var(--label-3); }
.pk-num small { font-size: 12px; color: var(--label-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-variant-numeric: tabular-nums; }
.pk-now .pk-spark { flex: none; width: 64px; height: 26px; }
.pk-due2 .pk-clock { color: var(--label); }
.pk-none { color: var(--label-3); font-size: 15px; }
/* The crowd, compact: the number, a thin bar, a short line. */
.pk-crowd .pk-pub { display: flex; flex-direction: column; gap: 4px; width: 100%; min-width: 0; }
.pk-crowd .pk-val b { font: 750 16px/1.15 var(--font-display, var(--font)); }
.pk-crowd .pk-agree { height: 4px; }
.pk-crowd .pk-sub { font-size: 12px; color: var(--label-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
@media (max-width: 1100px) {
  .pk-list-h.pk2 { display: none; }
  .pk-row.pk2 { grid-template-columns: 40px minmax(0, 1fr) 36px; grid-template-areas: "logo main go" "logo now now" "logo crowd crowd"; row-gap: 10px; }
  .pk-row.pk2 .pk-logo { grid-area: logo; align-self: start; }
  .pk-row.pk2 .pk-main { grid-area: main; }
  .pk-row.pk2 .pk-now { grid-area: now; }
  .pk-row.pk2 .pk-crowd { grid-area: crowd; }
  .pk-row.pk2 .pk-due2 { display: none; }
  .pk-row.pk2 .pk-go { grid-area: go; align-self: start; }
}

/* Tracked: a portfolio opens in place, its trades dropped down under its row. */
.tr-folder .tr-chev { transition: transform .2s; }
.tr-folder.open .tr-chev { transform: rotate(90deg); }
.tr-folder.on { background: var(--fill-3); }
.tr-folder .tr-facts { display: inline-flex; gap: 2px; margin-left: auto; }
.tr-folder .tr-facts + em { margin-left: 6px; }
.tr-folder .tr-facts button { display: grid; place-items: center; width: 28px; height: 28px; border: 0; border-radius: 8px; background: none; color: var(--label-3); cursor: pointer; }
.tr-folder .tr-facts button:hover { background: var(--fill-2); color: var(--label); }
.tr-folder .tr-facts svg { width: 15px; height: 15px; }
.tr-nest { position: relative; margin: 4px 0 8px 20px; padding-left: 12px; border-left: 2px solid var(--sep); animation: tr-drop .22s ease-out; }
@keyframes tr-drop { from { opacity: 0; transform: translateY(-6px); } }
.tr-nest .tr-row { margin-left: 0; margin-right: 0; }
.tr-nest-empty { margin: 6px 0; font-size: 12.5px; color: var(--label-3); }
.tr-row.drop-before { box-shadow: inset 0 2px 0 var(--accent); }
.tr-row.drop-after { box-shadow: inset 0 -2px 0 var(--accent); }

/* Predictions' header: "Prediction" over the logos and the call together, starting at the logos' edge. */
.pk-list-h.pk2 .pk-h-pred { grid-column: 1 / 3; }

/* Tracked: no scroll anchoring (redraws never move the page), and the open portfolio's trades slide rather than pop. */
html:has(.tr-rail) { overflow-anchor: none; }
.tr-nest { overflow: hidden; animation: none; }
.tr-rail .tr-row.on { transition: background .2s, box-shadow .2s; }
/* Tracked: a portfolio's view starts where a trade's does, and the scrollbar's room is always kept, so nothing on
   the page reflows when a view grows or shrinks. */
.tr.in-folder > .tr-sum { margin-top: 18px; }
html:has(.tr-rail) { scrollbar-gutter: stable; }
/* A call closed early because they changed their mind: the post where they did, and the dates. */
.an-flip-why { margin: 0 0 14px; font-size: 15px; line-height: 1.55; color: var(--label-2); }
.an-flip-why b.up { color: var(--good); } .an-flip-why b.down { color: var(--bad); }
.an-flip-post { display: block; color: inherit; transition: box-shadow .15s, background .15s; }
.an-flip-post:hover { box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--accent) 45%, transparent); }
.an-flip-tag { margin-left: auto; padding: 3px 10px; border-radius: 999px; font: 700 11.5px var(--font); }
.an-flip-tag.up { color: var(--good); background: color-mix(in srgb, var(--good) 15%, transparent); }
.an-flip-tag.down { color: var(--bad); background: color-mix(in srgb, var(--bad) 15%, transparent); }
.an-flip-call { display: block; margin-top: 10px; font: 600 13.5px var(--font); color: var(--accent); }
.an-flipped .an-time-l s { margin-left: 6px; color: var(--label-3); }
/* A post's call in the feed: up to two lines, cut only on the second, the verdict right after the last word; the
   icon sits level with the first line. */
.post .calltags.lead .calltag.inline { align-items: flex-start; }
.post .calltags.lead .calltag.inline .ct-ic, .post .calltags.lead .calltag.inline > svg { flex: none; margin-top: .2em; }
.post .calltags.lead .calltag.inline .ct-st { white-space: normal; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; overflow-wrap: anywhere; }
.post .calltags.lead .calltag.inline .ct-m { display: inline; margin-left: 8px; white-space: nowrap; font-size: 14px; }
.post .calltags.lead .calltag.inline .ct-m > * { display: inline; margin-left: 6px; }
.post .calltags.lead .calltag.inline .ct-m > :first-child { margin-left: 0; }
.post .calltag.inline:hover .ct-st { text-decoration: none; }
.post .calltag.inline:hover .ct-t { text-decoration: underline; text-decoration-color: var(--label-3); text-underline-offset: 3px; }
/* A post's body (its text, images and actions) lines up with the call's title, not its icon. */
.post .calltags.lead ~ * { margin-left: calc(17px + 7px); }

/* A portfolio's overview: three cards under its numbers, then fuller rows. */
.pov-cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.pov-card { display: flex; flex-direction: column; gap: 8px; min-width: 0; padding: 14px 16px 12px; border-radius: 16px; background: var(--fill-3); box-shadow: inset 0 0 0 1px var(--sep); }
.pov-card h6 { margin: 0 0 2px; font: 700 10.5px var(--font); letter-spacing: .08em; text-transform: uppercase; color: var(--label-3); }
.pov-split { display: flex; height: 8px; border-radius: 4px; overflow: hidden; background: var(--fill-2); }
.pov-split i { width: var(--w); } .pov-split i + i { border-left: 2px solid var(--bg); }
.pov-split .long { background: var(--good); } .pov-split .short { background: var(--bad); } .pov-split .bet { background: var(--accent); }
.pov-split-l { display: flex; gap: 14px; font-size: 12.5px; color: var(--label-3); }
.pov-split-l b { font-size: 15px; } .pov-split-l .long b { color: var(--good); } .pov-split-l .short b { color: var(--bad); } .pov-split-l .bet b { color: var(--accent); }
.pov-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 2px; }
.pov-chips span { padding: 3px 9px; border-radius: 999px; background: var(--fill-2); font-size: 12px; color: var(--label-2); }
.pov-chips b { margin-left: 3px; color: var(--label); }
.pov-mini { display: grid; grid-template-columns: 22px minmax(0, 1fr) auto; align-items: center; gap: 10px; padding: 5px 6px; margin: 0 -6px; border: 0; border-radius: 10px; background: none; color: var(--label); font: 600 13.5px var(--font); text-align: left; cursor: pointer; transition: background .12s; }
.pov-mini:hover { background: var(--fill-2); }
.pov-mini > span { min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pov-mini small { font-weight: 500; color: var(--label-3); }
.pov-mini > b { font: 700 13px var(--font); font-variant-numeric: tabular-nums; }
.pov-mini .pk-clock { color: var(--label); }
.pov-cred { min-width: 30px; padding: 1px 7px; border-radius: 7px; background: var(--fill-2); text-align: center; }
.pov-none { margin: 4px 0; font-size: 13px; color: var(--label-3); }
.pov-h, .pov-row { grid-template-columns: 32px minmax(0, 1fr) 90px 92px 84px 84px; gap: 14px; }
.pov-h { display: grid; padding: 0 12px 6px; border-bottom: 1px solid var(--sep); font: 700 10.5px var(--font); letter-spacing: .07em; text-transform: uppercase; color: var(--label-3); }
.pov-h span:last-child { text-align: right; }
.pov-list { gap: 0; }
.pov-row { padding: 12px; border-bottom: 1px solid var(--sep); border-radius: 0; }
.pov-row:hover { border-radius: 12px; }
.pov-spark svg { width: 84px; height: 28px; }
.pov-crowd, .pov-due { display: flex; flex-direction: column; gap: 1px; font-variant-numeric: tabular-nums; }
.pov-crowd b, .pov-due b { font: 700 14.5px var(--font); }
.pov-crowd.up b { color: var(--good); } .pov-crowd.down b { color: var(--bad); }
.pov-crowd small, .pov-due small { font-size: 11.5px; color: var(--label-3); }
.pov-due .pk-clock { color: var(--label); }
@media (max-width: 1100px) { .pov-cards { grid-template-columns: 1fr; } .pov-h { display: none; } .pov-row { grid-template-columns: 32px minmax(0, 1fr) 84px; } .pov-spark, .pov-crowd, .pov-due { display: none; } }
/* The overview's three sections as open columns continuing the numbers above: no boxes, thin dividers. */
.pov-cards { gap: 0; margin-top: -22px; padding: 16px 0 18px; border-bottom: 1px solid var(--sep); }
.pov-card { padding: 0 20px; border-radius: 0; background: none; box-shadow: none; border-left: 1px solid var(--sep); }
.pov-card:first-child { padding-left: 0; border-left: 0; }
@media (max-width: 1100px) { .pov-card { padding: 12px 0; border-left: 0; border-top: 1px solid var(--sep); } .pov-card:first-child { border-top: 0; } }

/* A portfolio's value line, full width between its numbers and its exposure row. */
.tr-sum:not(:has(.tr-curve)) { grid-template-columns: 1fr; }
.pov-curve { height: 120px; margin: -6px 0 0; padding: 4px 0 14px; border-bottom: 1px solid var(--sep); }
.pov-curve + .pov-cards { margin-top: -22px; }

/* A portfolio's value right on its line, under its numbers; the line taller, with a readout and the trades' logos. */
.tr-sum.pov-top { padding-bottom: 10px; border-bottom: 0; }
.pov-value { display: flex; align-items: baseline; flex-wrap: wrap; gap: 6px 14px; margin-top: -4px; }
.pov-value b { font: 800 34px/1.1 var(--font-display, var(--font)); letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.pov-value em { font: 700 15px var(--font); font-style: normal; font-variant-numeric: tabular-nums; }
.pov-value em.up { color: var(--good); } .pov-value em.down { color: var(--bad); }
.pov-value span { flex-basis: 100%; font-size: 13px; color: var(--label-3); }
.pov-curve { height: 220px; margin-top: -10px; cursor: crosshair; }
.tr-curve { position: relative; }
.tr-cross { stroke: var(--label-3); stroke-width: 1; stroke-dasharray: 3 4; }
.tr-cross-dot { fill: var(--label); stroke: var(--bg); stroke-width: 2; }
.tr-tip { position: absolute; top: 0; z-index: 2; display: flex; align-items: baseline; gap: 8px; padding: 6px 10px; border-radius: 10px; background: var(--glass-strong, var(--fill-2)); box-shadow: 0 6px 20px rgba(0,0,0,.35), inset 0 0 0 1px var(--sep); white-space: nowrap; pointer-events: none; }
.tr-tip small { font-size: 12px; color: var(--label-3); }
.tr-tip b { font: 700 14px var(--font); font-variant-numeric: tabular-nums; }
.tr-tip em { font: 700 13px var(--font); font-style: normal; } .tr-tip em.up { color: var(--good); } .tr-tip em.down { color: var(--bad); }
.tr-add { position: absolute; z-index: 1; transform: translate(-50%, -50%); display: grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; background: var(--bg); box-shadow: 0 0 0 2px var(--bg), 0 0 0 3px var(--sep); transition: transform .15s; }
.tr-add:hover { transform: translate(-50%, -50%) scale(1.25); z-index: 3; }
.tr-add .lg, .tr-add .tr-glyph { width: 20px; height: 20px; }

/* The second row of a portfolio's figures, built like the first so they line up. */
.pov-facts2 { margin-top: -22px; border-top: 0; }
.pov-f > span { font-size: 12.5px; color: var(--label-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pov-f b em { font-style: normal; } .pov-f b em.up { color: var(--good); } .pov-f b em.down { color: var(--bad); } .pov-f b em.acc { color: var(--accent); }
.pov-f b a { color: inherit; } .pov-f b a:hover { text-decoration: underline; text-underline-offset: 3px; }
.pov-f b .pk-clock { color: var(--label); }
.pov-f .pov-cred { margin-left: 4px; padding: 1px 7px; border-radius: 7px; background: var(--fill-2); font: 700 12.5px var(--font); color: var(--label-2); vertical-align: 2px; }
.pov-bar { display: flex; height: 5px; margin: 2px 0; border-radius: 3px; overflow: hidden; background: var(--fill-2); }
.pov-bar i { width: var(--w); } .pov-bar i + i { border-left: 2px solid var(--bg); }
.pov-bar .long { background: var(--good); } .pov-bar .short { background: var(--bad); } .pov-bar .bet { background: var(--accent); }
@media (max-width: 1100px) { .pov-facts2 { grid-template-columns: 1fr 1fr; } }
/* The graph's readout stays out of sight until the pointer is on the line. */
.tr-tip[hidden] { display: none; }
/* The second row's links: a logo or a face, the name, and a soft highlight on hover. */
.pov-f b:has(.pov-go) { overflow: visible; }
.pov-go { display: inline-flex; align-items: center; gap: 8px; max-width: 100%; margin: -4px -8px; padding: 4px 8px; border: 0; border-radius: 10px; background: none; color: var(--label); font: inherit; cursor: pointer; transition: background .15s; }
.pov-go:hover { background: var(--fill-3); }
.pov-go > span { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.pov-go .pk-clock { flex: none; padding-left: 8px; border-left: 1px solid var(--sep); color: var(--label); }
.pov-go .pov-cred { margin-left: 2px; }
.pov-f > span:has(.pov-sub) { display: flex; gap: 12px; }
.pov-sub { display: inline-flex; align-items: center; gap: 5px; padding: 0; border: 0; background: none; color: var(--label-3); font: inherit; font-size: 12.5px; cursor: pointer; }
.pov-sub:hover { color: var(--label); }
/* Fewer lines: the figures run straight into the trade list's header. */
.pov-facts2 { border-bottom: 0; }
.pov-facts2 .pov-f { gap: 8px; padding-bottom: 6px; }
.pov-h { margin-top: 4px; }
/* A portfolio's page, laid out like one trade's: its logos as the mark, the line at a trade chart's size. */
.pov2 { gap: 0; padding-top: 0; }
.pov2 .trd-logo .fold-logos.big { width: 40px; height: 40px; }
.pov2 .trd-logo .fold-logos.big > i { width: 27px; height: 27px; }
.pov2 .trd-logo .fold-logos.big > i > *, .pov2 .trd-logo .fold-logos.big > i img { width: 27px !important; height: 27px !important; }
.pov2 .trd-logo .fold-logos.big.one > * { width: 40px !important; height: 40px !important; }
.pov-by .av { margin-right: -6px; box-shadow: 0 0 0 2px var(--bg); }
.pov-by b { margin-left: 10px; }
.pov2 .pov-curve { height: 340px; margin: 14px 0 4px; padding: 0; border-bottom: 0; }
.pov2 .trd-f b em { font-style: normal; } .pov2 .trd-f b em.up { color: var(--good); } .pov2 .trd-f b em.down { color: var(--bad); }
.pov-trades .pov-list { margin-top: 4px; }
/* A portfolio's mark: its first two logos, overlapping. */
.pov-mark { display: inline-flex; align-items: center; }
.pov-mark > * { flex: none; box-shadow: 0 0 0 3px var(--bg); border-radius: 50%; }
.pov-mark.two > :last-child { margin-left: -12px; }
/* The trades in it: no column header, the list straight under its title. */
.pov-trades { margin-top: 18px; }
.pov-trades h4 { margin-bottom: 4px; }
.pov-trades .pov-list { margin-top: 0; }
.pov-trades .pov-row:first-child { border-top: 1px solid var(--sep); }
.pov2 .trd-f b.up { color: var(--good); } .pov2 .trd-f b.down { color: var(--bad); }

/* A portfolio's callers: the names are a button; tapped, a list of everyone behind its trades. */
.pov-by-wrap { position: relative; display: inline-flex; align-items: center; gap: 10px; }
.pov-by { padding: 3px 8px 3px 4px; margin-left: -4px; border: 0; border-radius: 999px; background: none; color: var(--label); font: inherit; cursor: pointer; transition: background .15s; }
.pov-by:hover, .pov-by[aria-expanded="true"] { background: var(--fill-3); }
.pov-by b { text-decoration: none; }
.pov-by-chev { width: 14px; height: 14px; margin-left: 2px; fill: none; stroke: var(--label-3); stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; transition: transform .2s; }
.pov-by[aria-expanded="true"] .pov-by-chev { transform: rotate(180deg); }
.pov-by-n { font-size: 14px; color: var(--label-3); }
.pov-pop { position: absolute; top: calc(100% + 8px); left: -4px; z-index: 20; width: 360px; max-height: 380px; overflow: auto; padding: 10px; border-radius: 16px; background: var(--glass-strong, #1c1c1e); box-shadow: 0 16px 40px rgba(0,0,0,.5), inset 0 0 0 1px var(--sep); animation: pov-pop .16s ease-out; }
@keyframes pov-pop { from { opacity: 0; transform: translateY(-4px); } }
.pov-pop h6 { margin: 2px 6px 8px; font: 700 10.5px var(--font); letter-spacing: .08em; text-transform: uppercase; color: var(--label-3); }
.pov-pop-row { display: grid; grid-template-columns: 34px minmax(0, 1fr) auto; align-items: center; gap: 10px; padding: 8px 6px; border-radius: 12px; color: var(--label); transition: background .12s; }
.pov-pop-row:hover { background: var(--fill-3); }
.pov-pop-n { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.pov-pop-n b { font-size: 14.5px; font-weight: 650; }
.pov-pop-n small { font-size: 12.5px; color: var(--label-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pov-pop { background: color-mix(in srgb, var(--bg) 88%, #fff 12%); backdrop-filter: blur(18px); }

/* The portfolio page's mark: the sidebar icon at twice the size (two logos, top left and bottom right). */
.pov-mark2 { display: grid; place-items: center; width: 56px; height: 56px; }
.fold-logos.big { width: 56px; height: 56px; }
.fold-logos.big > i { width: 38px; height: 38px; }
.fold-logos.big > i:last-child { box-shadow: 0 0 0 3px var(--bg); }
.fold-logos.big > i > *, .fold-logos.big > i img, .fold-logos.big > i svg { width: 38px !important; height: 38px !important; }
.fold-logos.big.one > * { width: 56px !important; height: 56px !important; }
.pov2 .trd-logo.pov-mark2 .fold-logos.big { width: 56px; height: 56px; }
.pov2 .trd-logo.pov-mark2 .fold-logos.big > i { width: 38px; height: 38px; }
.pov2 .trd-logo.pov-mark2 .fold-logos.big > i > *, .pov2 .trd-logo.pov-mark2 .fold-logos.big > i img { width: 38px !important; height: 38px !important; }
/* The trades in it: straight under its title. */
.pov-trades { margin-top: 10px; }
.pov-trades h4 { margin: 0 0 2px; }
.pov-trades .pov-row:first-child { border-top: 0; }
.pov-trades .pov-row { padding-top: 10px; padding-bottom: 10px; }
/* The call's move since it was made, and the crowd (or the week) under it. */
.pov-row { grid-template-columns: 32px minmax(0, 1fr) 90px 130px 84px 84px; }
.pov-crowd { gap: 0; }
.pov-crowd small { font-size: 11.5px; line-height: 1.35; color: var(--label-3); white-space: nowrap; }
.pov-crowd small em { font-style: normal; font-weight: 700; } .pov-crowd small em.up { color: var(--good); } .pov-crowd small em.down { color: var(--bad); }
.pov-trades h4 { margin-bottom: 0; }
.pov-trades .pov-list { margin-top: -6px; }

/* A tracked trade's chart: bigger, zoomable, with range buttons and a readout. */
.trd-chart:has(.tc-plot) { height: 440px; }
.tc-plot { position: absolute; inset: 34px 0 0 0; }
.tc-ranges { position: absolute; top: 0; right: 0; z-index: 2; display: flex; gap: 2px; padding: 3px; border-radius: 999px; background: var(--fill-3); }
.tc-ranges button { height: 26px; padding: 0 11px; border: 0; border-radius: 999px; background: none; color: var(--label-3); font: 650 12px var(--font); cursor: pointer; transition: background .15s, color .15s; }
.tc-ranges button:hover { color: var(--label); }
.tc-ranges button.on { background: var(--fill-1, var(--fill-2)); color: var(--label); }
.tc-tip { position: absolute; top: 0; z-index: 3; display: flex; align-items: baseline; gap: 8px; padding: 5px 10px; border-radius: 10px; background: color-mix(in srgb, var(--bg) 85%, #fff 15%); box-shadow: 0 6px 20px rgba(0,0,0,.4), inset 0 0 0 1px var(--sep); white-space: nowrap; pointer-events: none; }
.tc-tip[hidden] { display: none; }
.tc-tip small { font-size: 12px; color: var(--label-3); } .tc-tip b { font: 700 14px var(--font); }
.tc-tip em { font: 650 12.5px var(--font); font-style: normal; } .tc-tip em.up { color: var(--good); } .tc-tip em.down { color: var(--bad); }

/* Smart money's chart for a stock or coin: pan, zoom and ranges, the mood along the bottom. */
.mkc { position: relative; height: 430px; margin-top: 10px; }
.mkc-plot { position: absolute; inset: 36px 0 0 0; display: grid; place-items: center; }
.mkc .tc-ranges { right: 0; }
.sc-plot[hidden] { display: none; }
.sc:has(.mkc) .sc-x > span:first-child, .sc:has(.mkc) .sc-x > span:last-child { visibility: hidden; }
/* Range buttons over a market's odds chart (or a statement's), right-aligned above it. */
.tc-ranges.lw-ranges { position: static; width: fit-content; margin: 0 0 8px auto; }
/* A call's market, as a card that's plainly a link out: venue logo, the question, an arrow in a circle. */
.an-mkt.card { align-items: center; gap: 12px; margin-top: 16px; padding: 12px 14px; border-radius: 14px; background: var(--fill-3); border: 1px solid var(--sep, rgba(255,255,255,.08)); transition: background .15s, border-color .15s, transform .15s; }
.an-mkt.card:hover { background: var(--fill-2); border-color: var(--accent); transform: translateY(-1px); }
.an-mkt.card > img, .an-mkt.card > .logo, .an-mkt.card > :first-child { flex: none; border-radius: 9px; }
.an-mkt-b { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.an-mkt.card .an-mkt-b small { font-size: 12px; font-weight: 650; color: var(--accent); }
.an-mkt.card .an-mkt-b b { font-size: 14px; font-weight: 600; color: var(--label); white-space: normal; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.an-mkt.card:hover .an-mkt-b b { color: var(--label); }
.an-mkt.card > i { flex: none; display: grid; place-items: center; width: 32px; height: 32px; border-radius: 50%; background: var(--accent); }
.an-mkt.card > i svg { width: 16px; height: 16px; fill: none; stroke: #fff; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
/* A related call's side against this one: a tag at the far right of its row, centered. */
.lf-end { display: flex; align-items: center; gap: 12px; align-self: center; }
.lf-stance { flex: none; font: 700 12px var(--font); font-style: normal; padding: 4px 10px; border-radius: 999px; letter-spacing: .01em; }
.lf-stance.agree { color: var(--good); background: color-mix(in srgb, var(--good) 14%, transparent); }
.lf-stance.disagree { color: var(--bad); background: color-mix(in srgb, var(--bad) 14%, transparent); }
/* Tracking: the check turns into a red X on hover, the way to stop (it asks first). */
.tk-btn .tk-no, .tk-pill .tk-no { display: none; }
.tk-btn.on:hover .tk-yes, .tk-pill.on:hover .tk-yes { display: none; }
.tk-btn.on:hover .tk-no { display: block; }
.tk-pill.on:hover .tk-no { display: inline; }
.tk-pill.on:hover svg.tk-no { display: block; }
.tk-btn.on:hover { background: var(--bad); color: #fff; }
.tk-pill.on:hover { background: color-mix(in srgb, var(--bad) 18%, transparent); color: var(--bad); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--bad) 45%, transparent); }

/* Asking before something you can't undo. */
.cf-layer { position: fixed; inset: 0; z-index: 400; display: grid; place-items: center; padding: 16px; }
.cf-scrim { position: absolute; inset: 0; background: rgba(0, 0, 0, .55); opacity: 0; transition: opacity .18s; }
.cf-sheet { position: relative; width: min(420px, 100%); padding: 24px 22px 18px; border-radius: 20px; background: #111113; box-shadow: 0 0 0 1px rgba(255, 255, 255, .09), var(--shadow-float); opacity: 0; transform: translateY(8px) scale(.98); transition: opacity .18s, transform .18s; }
.cf-layer.in .cf-scrim { opacity: 1; }
.cf-layer.in .cf-sheet { opacity: 1; transform: none; }
.cf-ic { display: grid; place-items: center; width: 40px; height: 40px; margin-bottom: 14px; border-radius: 50%; background: color-mix(in srgb, var(--bad) 16%, transparent); color: var(--bad); }
.cf-ic svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; }
.cf-sheet h3 { margin: 0 0 8px; font: 750 19px var(--font); color: var(--label); }
.cf-sheet p { margin: 0 0 20px; font-size: 14.5px; line-height: 1.5; color: var(--label-2); }
.cf-sheet p b.up { color: var(--good); } .cf-sheet p b.down { color: var(--bad); }
.cf-acts { display: flex; gap: 10px; }
.cf-acts button { flex: 1; height: 42px; border: 0; border-radius: 12px; font: 700 14.5px var(--font); cursor: pointer; transition: background .15s; }
.cf-no { background: var(--fill-2); color: var(--label); }
.cf-no:hover { background: var(--fill-1, var(--fill-2)); }
.cf-yes { background: var(--bad); color: #fff; }
.cf-yes:hover { background: color-mix(in srgb, var(--bad) 85%, #000); }
:root[data-theme="light"] .cf-sheet { background: #fff; box-shadow: 0 0 0 1px rgba(0, 0, 0, .06), var(--shadow-float); }
/* Naming a portfolio in the rail: a plain line the height of a portfolio's row, the name and nothing else; Create
   fades in once there is one. */
.tr-rail .bk-field { height: 46px; gap: 2px; padding: 0 6px 0 14px; border-radius: 12px; background: var(--fill-3); box-shadow: none; }
.tr-rail .bk-field:focus-within { background: var(--fill-3); box-shadow: none; }
.tr-rail .bk-field .bk-input { height: 100%; font: 600 14.5px var(--font); caret-color: var(--accent); }
.tr-rail .bk-field .bk-input::placeholder { color: var(--label-3); font-weight: 500; }
.tr-rail .bk-field .bk-ok { height: 30px; padding: 0 10px; border-radius: 8px; background: none; color: var(--accent); font: 650 13.5px var(--font); transition: opacity .15s, background .15s; }
.tr-rail .bk-field .bk-ok:hover { background: color-mix(in srgb, var(--accent) 12%, transparent); }
.tr-rail .bk-field:has(.bk-input:placeholder-shown) .bk-ok { opacity: .4; pointer-events: none; }
.tr-rail .bk-field .bk-x { display: grid; place-items: center; width: 30px; height: 30px; padding: 0; border-radius: 8px; background: none; color: var(--label-3); }
.tr-rail .bk-field .bk-x svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; }
.tr-rail .bk-field .bk-x:hover { background: var(--fill-2); color: var(--label); }
/* A new portfolio's chart, before it has a line of its own: the callers' line, and a word saying so. */
.tr-curve.theirs { margin-top: 44px; overflow: visible; }
.tr-curve-key { position: absolute; left: 0; top: -42px; z-index: 1; display: inline-flex; align-items: center; gap: 7px; padding: 6px 12px 6px 10px; border-radius: 999px; background: var(--bg); box-shadow: inset 0 0 0 1px var(--sep); font-size: 12.5px; color: var(--label-3); pointer-events: none; white-space: nowrap; }
.tr-curve-key i { width: 8px; height: 8px; border-radius: 50%; background: currentColor; }
.tr-curve-key.up i, .tr-curve-key.up em { color: var(--good); }
.tr-curve-key.down i, .tr-curve-key.down em { color: var(--bad); }
.tr-curve-key b { font-weight: 650; color: var(--label); }
.tr-curve-key em { font-style: normal; font-weight: 700; font-variant-numeric: tabular-nums; }
.tr-curve-key small { margin-left: 4px; padding-left: 10px; border-left: 1px solid var(--sep); font-size: 12px; color: var(--label-3); }
/* A portfolio's logos sit on white discs, like a stock's: a coin whose mark is see-through (Solana, Ethereum) doesn't
   float on the dark. */
.fold-logos > i { background: #fff; }
.fold-logos.one { border-radius: 50%; background: #fff; overflow: hidden; }

/* Record: column labels over the callers, and the word under the summary. */
.rc-cols { display: grid; grid-template-columns: minmax(220px, 1.6fr) repeat(3, minmax(90px, .6fr)); gap: 18px; padding: 0 10px 8px; font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--label-3); border-bottom: 1px solid var(--sep); }
.rc-cols span:not(:first-child) { text-align: right; }
.rc-note { margin: 14px 0 0; font-size: 13px; color: var(--label-3); }
@media (max-width: 720px) { .rc-cols { display: none; } }

/* Whale profiles: a Hyperliquid or Polymarket wallet, read live. Wide: open positions in the middle, what they closed
   down the side, filters and their P/L in whatever is picked across the top. */
.tl-wallet { color: inherit; text-decoration: underline; text-decoration-color: var(--label-3); text-underline-offset: 3px; }
.tl-wallet:hover { color: var(--label); text-decoration-color: currentColor; }
.page.wh-page { max-width: 1760px; padding-left: 32px; padding-right: 32px; }
.wh-load { display: flex; align-items: center; gap: 10px; margin-top: 60px; justify-content: center; color: var(--label-2); font-size: 14px; }
.wh-head { display: flex; align-items: center; gap: 20px; margin: 18px 0 22px; }
.wh-id { flex: 1; min-width: 0; }
.wh-head h1 { font: 800 36px/1.1 var(--font-display); letter-spacing: -.02em; margin: 4px 0; overflow-wrap: anywhere; }
.wh-kind { display: flex; align-items: center; gap: 8px; font-size: 12.5px; color: var(--label-2); }
.wh-kind .live-dot { margin-left: 6px; }
.wh-addr { font-size: 13px; color: var(--label-2); }
.wh-addr a { color: var(--label-2); }
.wh-addr a:hover { color: var(--label); }
.wh-acts { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; justify-content: flex-end; }
.wh-acts .follow { padding: 10px 18px; font-size: 14px; }
.wh-bell { display: inline-flex; align-items: center; gap: 7px; font: 600 14px/1 var(--font); color: var(--label); background: var(--fill-2); border: 0; border-radius: 999px; padding: 10px 16px; cursor: pointer; }
.wh-bell svg { width: 16px; height: 16px; fill: currentColor; }
.wh-bell.on { background: color-mix(in srgb, var(--good) 18%, transparent); color: var(--good); }
.wh-page b.up, .wh-page em.up, .wh-page small.up, .wh-pos-n.up b, .wh-pos-n.up span, .wh-cred.up { color: var(--good); }
.wh-page b.down, .wh-page em.down, .wh-page small.down, .wh-pos-n.down b, .wh-pos-n.down span { color: var(--bad); }
.wh-cred.warn { color: #ff9f0a; }
.wh-chart { margin: 0; background: var(--fill-3); border-radius: 18px; padding: 16px 18px 14px; display: flex; flex-direction: column; gap: 10px; }
.wh-chart figcaption { display: flex; justify-content: space-between; font-size: 12px; color: var(--label-3); }
.wh-chart figcaption b { font-size: 11px; font-weight: 650; letter-spacing: .04em; text-transform: uppercase; color: var(--label-3); }
.wh-chart svg { display: block; width: 100%; flex: 1; min-height: 150px; }
.wh-chart line { stroke: var(--sep); stroke-dasharray: 3 4; }
.wh-chart .l { fill: none; stroke-width: 2; vector-effect: non-scaling-stroke; }
.wh-chart.up .l { stroke: var(--good); } .wh-chart.down .l { stroke: var(--bad); }
.wh-chart .a { opacity: .14; } .wh-chart.up .a { fill: var(--good); } .wh-chart.down .a { fill: var(--bad); }
.wh-chart.none { align-items: center; justify-content: center; color: var(--label-3); font-size: 13px; }
.wh-grid { display: grid; grid-template-columns: minmax(0, 1fr) 380px; gap: 40px; align-items: start; margin-top: 8px; }
.wh-sec { margin-top: 22px; }
.wh-sec h3 { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; font: 750 19px/1.2 var(--font-display); margin: 0 0 4px; padding-bottom: 10px; box-shadow: 0 1px 0 var(--sep); }
.wh-sec h3 small { font: 600 13px/1 var(--font); color: var(--label-2); }
.wh-pos { display: grid; grid-template-columns: 44px minmax(0, 2.1fr) minmax(0, .7fr) minmax(0, 1fr) minmax(0, 1.2fr) minmax(0, .8fr); gap: 16px; align-items: center; padding: 16px 0; }
.wh-pos + .wh-pos { box-shadow: 0 -1px 0 var(--sep); }
.wh-pos-m { display: flex; flex-direction: column; gap: 5px; min-width: 0; }
.wh-pos-m b { font-size: 16px; font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.wh-pos-m span { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; font-size: 12.5px; color: var(--label-2); }
.wh-pos-m .tl-side { font-size: 11px; padding: 2px 8px; }
.wh-cred { font-size: 12.5px; font-weight: 650; color: var(--label-2); }
.wh-pos-n { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.wh-pos-n b { font: 700 15.5px/1.2 var(--font-display); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.wh-pos-n.pnl { align-items: flex-end; text-align: right; }
.wh-pos-n.pnl b { font-size: 19px; font-weight: 800; }
.wh-pos-n.pnl span { font-size: 12.5px; }
.wh-side { position: sticky; top: 84px; }
.wh-closed { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 11px 0; }
.wh-closed + .wh-closed { box-shadow: 0 -1px 0 var(--sep); }
.wh-closed span { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.wh-closed b, .wh-trade b { font-size: 14px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.wh-closed small, .wh-trade small { font-size: 12px; color: var(--label-2); }
.wh-closed em, .wh-trade em { font-style: normal; font-weight: 750; font-size: 14.5px; white-space: nowrap; }
.wh-trade { display: grid; grid-template-columns: 48px minmax(0, 1fr) auto; gap: 12px; align-items: center; padding: 10px 0; }
.wh-trade + .wh-trade { box-shadow: 0 -1px 0 var(--sep); }
.wh-trade time { font-size: 12px; color: var(--label-3); }
.wh-trade span { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.wh-empty { color: var(--label-2); font-size: 13.5px; padding: 14px 0; }
.wh-foot { margin: 28px 0 40px; font-size: 12px; color: var(--label-3); }
.bell-h.wallets { margin-top: 16px; }
.bell-whale { flex: none; width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; font-weight: 800; color: #5ac8fa; background: color-mix(in srgb, #5ac8fa 16%, transparent); }
.bell-item.new > span:last-child { color: var(--label); }
@media (max-width: 1100px) {
  .wh-grid { grid-template-columns: minmax(0, 1fr); gap: 0; } .wh-side { position: static; }
}
@media (max-width: 720px) {
  .page.wh-page { padding-left: 16px; padding-right: 16px; }
  .wh-head { flex-wrap: wrap; } .wh-acts { width: 100%; justify-content: flex-start; } .wh-head h1 { font-size: 28px; }
  .wh-pos { grid-template-columns: 40px minmax(0, 1fr) auto; gap: 6px 12px; }
  .wh-pos-ic { grid-row: 1 / 5; align-self: start; }
  .wh-pos-m { grid-column: 2; grid-row: 1; } .wh-pos-n.pnl { grid-column: 3; grid-row: 1; }
  .wh-pos-n:not(.pnl) { grid-column: 2 / -1; flex-direction: row; align-items: baseline; gap: 8px; }
}
.wh-test { font: 600 13px/1 var(--font); color: var(--label-2); background: none; border: 0; padding: 10px 6px; cursor: pointer; text-decoration: underline; text-underline-offset: 3px; }
.wh-test:hover { color: var(--label); }

/* Money moving: the markets with the most significant money, a row of cards above the feed. */
.hot { margin: 4px 0 18px; }
.hot h4 { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; margin: 0 0 10px; font: 750 15px/1.2 var(--font-display); }
.hot h4 small { font: 500 12.5px/1.2 var(--font); color: var(--label-3); }
.hot-row { display: flex; gap: 10px; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; }
.hot-row::-webkit-scrollbar { display: none; }
.hot-row > .hot-card { flex: 0 0 calc((100% - 40px) / 5); scroll-snap-align: start; }
.hot-card { display: flex; flex-direction: column; gap: 8px; min-width: 0; padding: 14px; border-radius: 16px; background: var(--fill-3); border: 0; color: inherit; text-align: left; font: inherit; cursor: pointer; transition: background .15s; }
.hot-card:hover { background: var(--fill-2); }
div.hot-card { cursor: default; }
.hot-top { display: flex; align-items: center; gap: 8px; min-width: 0; }
.hot-top > b { font-size: 13.5px; font-weight: 650; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hot-top .lg { flex: none; }
.hot-big { display: flex; flex-direction: column; gap: 2px; }
.hot-big b { font: 800 26px/1 var(--font-display); letter-spacing: -.02em; }
.hot-big small { font-size: 11.5px; color: var(--label-3); }
.hot-big b.up, .hot-sub b.up { color: var(--good); } .hot-big b.down, .hot-sub b.down { color: var(--bad); }
.hot-bar { display: block; height: 4px; border-radius: 2px; background: var(--fill-2); overflow: hidden; }
.hot-bar i { display: block; height: 100%; width: var(--w); background: var(--good); } .hot-bar i.down { background: var(--bad); }
.hot-sub { font-size: 12px; color: var(--label-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
@media (max-width: 1200px) { .hot-row > .hot-card { flex-basis: calc((100% - 20px) / 3); } }
@media (max-width: 720px) { .hot-row { margin: 0 -16px; padding: 0 16px; scroll-padding: 0 16px; } .hot-row > .hot-card { flex-basis: 72%; } }

/* A market's page: what the money did, on the right of its price and mood. */
.sc-wgroup { display: flex; gap: 6px 28px; flex-wrap: wrap; margin-left: auto; }
.sc-wgroup + .sc-wgroup { margin-left: 0; padding-left: 24px; border-left: 1px solid var(--sep); }
.sc-ws em { color: var(--label-2); font-weight: 500 !important; max-width: 220px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sc-ws em .tl-wallet { color: var(--label-2); }
.sc-ws:first-child em { width: 100%; }
.sc-whale-bar { display: block; width: 150px; height: 4px; margin-top: 5px; border-radius: 2px; background: color-mix(in srgb, var(--bad) 70%, transparent); overflow: hidden; }
.sc-whale-bar i { display: block; height: 100%; width: var(--w); background: var(--good); }
@media (max-width: 720px) { .sc-wgroup, .sc-wgroup + .sc-wgroup { margin-left: 0; padding-left: 0; border-left: 0; } }
.mkc-lab { position: absolute; left: 10px; z-index: 3; pointer-events: none; font-size: 11px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--label-2); text-shadow: 0 1px 3px var(--bg, #000); }
.mkc-lab small { font-weight: 500; letter-spacing: 0; text-transform: none; color: var(--label-3); }

/* Whale profile: the headline numbers as a plain row, then one panel where the filter, its numbers and the chart work together. */
.wh-stats { display: flex; flex-wrap: wrap; gap: 14px 44px; padding: 6px 2px 4px; }
.wh-stat { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.wh-stat small, .wh-scope small { font-size: 11px; font-weight: 650; letter-spacing: .05em; text-transform: uppercase; color: var(--label-3); }
.wh-stat b { font: 800 30px/1.05 var(--font-display); letter-spacing: -.02em; white-space: nowrap; }
.wh-stat span { font-size: 12.5px; color: var(--label-2); }
.wh-stat b.up, .wh-scope b.up { color: var(--good); } .wh-stat b.down, .wh-scope b.down { color: var(--bad); }
.wh-lab { margin: 26px 0 8px; padding: 18px 20px 14px; border-radius: 22px; background: var(--fill-3); display: flex; flex-direction: column; gap: 16px; }
.wh-bar { display: flex; align-items: center; gap: 14px; min-width: 0; }
.wh-seg { flex: none; display: inline-flex; gap: 2px; padding: 3px; border-radius: 12px; background: var(--fill-2); }
.wh-seg button { font: 600 13px/1 var(--font); color: var(--label-2); background: transparent; border: 0; border-radius: 9px; padding: 8px 14px; cursor: pointer; white-space: nowrap; }
.wh-seg button small { margin-left: 6px; font-weight: 600; color: var(--label-3); }
.wh-seg button:hover { color: var(--label); }
.wh-seg button.on { background: var(--surface-2, #2c2c2e); color: var(--label); box-shadow: 0 1px 3px rgba(0, 0, 0, .35); }
.wh-things { display: flex; gap: 4px; min-width: 0; overflow-x: auto; scrollbar-width: none; padding-left: 14px; border-left: 1px solid var(--sep); }
.wh-things::-webkit-scrollbar { display: none; }
.wh-things button { flex: none; font: 600 13px/1 var(--font); color: var(--label-3); background: transparent; border: 0; border-radius: 9px; padding: 8px 11px; cursor: pointer; white-space: nowrap; }
.wh-things button:hover { color: var(--label); background: var(--fill-2); }
.wh-things button.on { color: var(--label); background: var(--fill-2); }
.wh-scope { display: flex; flex-wrap: wrap; gap: 10px 0; padding: 2px 0 14px; border-bottom: 1px solid var(--sep); }
.wh-scope > div { display: flex; flex-direction: column; gap: 3px; min-width: 0; padding: 0 28px; border-left: 1px solid var(--sep); }
.wh-scope > div:first-child { padding-left: 0; border-left: 0; }
.wh-scope b { font: 750 20px/1.15 var(--font-display); letter-spacing: -.01em; white-space: nowrap; }
.wh-scope span { font-size: 12px; color: var(--label-2); }
.wh-chartbox { position: relative; display: flex; flex-direction: column; gap: 8px; }
.wh-chart-h { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.wh-chart-h > b { font: 700 15px/1.2 var(--font-display); display: flex; align-items: baseline; gap: 8px; }
.wh-chart-h > b small { font: 500 12.5px/1.2 var(--font); color: var(--label-3); }
.wh-ranges { display: inline-flex; gap: 2px; padding: 3px; border-radius: 10px; background: var(--fill-2); }
.wh-ranges button { font: 650 12px/1 var(--font); color: var(--label-3); background: transparent; border: 0; border-radius: 7px; padding: 7px 10px; cursor: pointer; }
.wh-ranges button:hover { color: var(--label); }
.wh-ranges button.on { background: var(--surface-2, #2c2c2e); color: var(--label); }
.wh-plot { position: relative; height: 360px; display: grid; place-items: center; }
.wh-plot > div { width: 100%; height: 100%; }
.wh-chartbox.empty .wh-plot::after { content: attr(data-empty); position: absolute; inset: 0; display: grid; place-items: center; font-size: 13px; color: var(--label-3); }
.wh-tip { position: absolute; top: 40px; z-index: 5; pointer-events: none; display: flex; flex-direction: column; gap: 3px; padding: 9px 12px; border-radius: 12px; background: var(--surface-2, #1c1c1e); box-shadow: 0 10px 30px rgba(0, 0, 0, .45), 0 0 0 .5px var(--sep-strong); font-size: 12.5px; white-space: nowrap; }
.wh-tip small { color: var(--label-3); font-size: 11.5px; }
.wh-tip b { font: 750 15px/1.2 var(--font-display); } .wh-tip b.up { color: var(--good); } .wh-tip b.down { color: var(--bad); }
.wh-tip em { font-style: normal; color: var(--label-2); } .wh-tip em.up { color: var(--good); } .wh-tip em.down { color: var(--bad); }
.wh-legend { display: flex; justify-content: center; gap: 18px; font-size: 12px; color: var(--label-3); }
.wh-legend span { display: inline-flex; align-items: center; gap: 6px; }
.wh-legend .mk { font-style: normal; font-size: 10px; } .wh-legend .mk.up { color: var(--good); } .wh-legend .mk.down { color: var(--bad); } .wh-legend .mk.out { color: var(--label-2); }
@media (max-width: 720px) {
  .wh-stats { gap: 14px 28px; } .wh-stat b { font-size: 24px; }
  .wh-lab { padding: 14px; margin-left: -4px; margin-right: -4px; }
  .wh-bar { flex-direction: column; align-items: stretch; } .wh-things { padding-left: 0; border-left: 0; }
  .wh-scope > div { padding: 0 16px; } .wh-plot { height: 300px; }
}
.wh-tip[hidden] { display: none; }
/* Trades over a whale's chart: a logo with a small badge (profit chart), or a small signed dot (a market's chart). */
.wh-marks { position: absolute; inset: 0; pointer-events: none; overflow: hidden; z-index: 2; }
.wh-mk { position: absolute; display: grid; place-items: center; width: 16px; height: 16px; border-radius: 50%; font-style: normal; }
.wh-mk i { font-style: normal; font-size: 8px; line-height: 1; color: #fff; }
.wh-mk.up { background: var(--good); } .wh-mk.down { background: var(--bad); } .wh-mk.out { background: var(--fill-1, #3a3a3c); box-shadow: inset 0 0 0 1.5px var(--label-3); }
.wh-mk.out i { color: var(--label-2); font-size: 10px; }
.wh-mk.logo { width: 24px; height: 24px; background: var(--bg, #000); box-shadow: 0 0 0 2px var(--good), 0 2px 6px rgba(0, 0, 0, .5); }
.wh-mk.logo.down { box-shadow: 0 0 0 2px var(--bad), 0 2px 6px rgba(0, 0, 0, .5); } .wh-mk.logo.out { box-shadow: 0 0 0 2px var(--label-3), 0 2px 6px rgba(0, 0, 0, .5); }
.wh-mk.logo > :first-child { width: 24px !important; height: 24px !important; border-radius: 50%; overflow: hidden; }
.wh-mk.logo i { position: absolute; right: -5px; bottom: -4px; width: 13px; height: 13px; border-radius: 50%; display: grid; place-items: center; font-size: 6.5px; box-shadow: 0 0 0 1.5px var(--fill-3); }
.wh-mk.logo.up i { background: var(--good); } .wh-mk.logo.down i { background: var(--bad); } .wh-mk.logo.out i { background: #636366; font-size: 8px; color: #fff; }
.wh-things button { display: inline-flex; align-items: center; gap: 7px; }
.wh-things button > :first-child:not(small) { flex: none; }
.wh-things button .lg, .wh-things button img { opacity: .85; } .wh-things button.on .lg, .wh-things button.on img, .wh-things button:hover img { opacity: 1; }
.wh-legend .mk { display: inline-grid; place-items: center; width: 14px; height: 14px; border-radius: 50%; font-size: 6.5px; color: #fff !important; }
.wh-legend .mk.up { background: var(--good); } .wh-legend .mk.down { background: var(--bad); } .wh-legend .mk.out { background: #636366; font-size: 8px; }
/* Whale profile, roomier: the headline numbers and the picked market's numbers each span the width in even columns. */
.wh-stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0; margin-top: 8px; padding: 22px 0; border-top: 1px solid var(--sep); border-bottom: 1px solid var(--sep); }
.wh-stat { padding: 0 28px; border-left: 1px solid var(--sep); gap: 8px; }
.wh-stat:first-child { padding-left: 0; border-left: 0; }
.wh-stat b { font-size: 34px; }
.wh-stat span { font-size: 13px; }
.wh-lab { gap: 22px; padding: 22px 26px 18px; margin-top: 28px; }
.wh-bar { gap: 20px; flex-wrap: wrap; }
.wh-seg button { padding: 9px 16px; font-size: 13.5px; }
.wh-things { gap: 6px; padding-left: 20px; }
.wh-things button { padding: 9px 13px; font-size: 13.5px; }
.wh-scope { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0; padding: 20px 0; border-top: 1px solid var(--sep); border-bottom: 1px solid var(--sep); }
.wh-scope > div { padding: 0 28px; gap: 7px; }
.wh-scope b { font-size: 26px; }
.wh-scope span { font-size: 12.5px; }
@media (max-width: 900px) {
  .wh-stats, .wh-scope { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 18px; }
  .wh-stat:nth-child(3), .wh-scope > div:nth-child(3) { padding-left: 0; border-left: 0; }
  .wh-stat b { font-size: 26px; } .wh-scope b { font-size: 22px; }
}
.wh-acts .follow { display: inline-flex; align-items: center; justify-content: center; height: 38px; padding: 0 20px; line-height: 1; }
.wh-head { align-items: center; }
/* The filters, numbers and chart sit on the page itself, between rules, not in a card. */
.wh-lab { background: transparent; padding: 0; border-radius: 0; margin-top: 30px; }
/* The headline numbers in the header row, between the wallet's name and Follow. */
.wh-stats.in-head { flex: 1; min-width: 0; margin: 0 8px 0 40px; padding: 0; border: 0; }
.wh-stats.in-head .wh-stat { padding: 0 24px; }
.wh-stats.in-head .wh-stat:first-child { padding-left: 24px; border-left: 1px solid var(--sep); }
.wh-stats.in-head .wh-stat b { font-size: 28px; }
@media (max-width: 1200px) {
  .wh-head { flex-wrap: wrap; }
  .wh-stats.in-head { order: 3; flex-basis: 100%; margin: 18px 0 0; padding: 18px 0 0; border-top: 1px solid var(--sep); }
  .wh-stats.in-head .wh-stat:first-child { padding-left: 0; border-left: 0; }
}
.wh-stats.in-head { display: flex; justify-content: flex-end; margin-left: auto; }
.wh-stats.in-head .wh-stat { flex: none; padding: 0 28px; }
.wh-stats.in-head .wh-stat small, .wh-stats.in-head .wh-stat span { white-space: nowrap; }
.wh-stats.in-head + .wh-acts { padding-left: 28px; border-left: 1px solid var(--sep); align-self: stretch; display: flex; align-items: center; }
@media (max-width: 1200px) { .wh-stats.in-head { justify-content: flex-start; flex-wrap: wrap; row-gap: 16px; } .wh-stats.in-head + .wh-acts { border-left: 0; padding-left: 0; } }
@media (min-width: 1201px) { .wh-stats.in-head { flex-wrap: nowrap; } .wh-stats.in-head .wh-stat { padding: 0 22px; } }
/* Follow sits with the wallet's name; the numbers fill the rest of the row to the right. */
.wh-head .wh-acts { margin-left: 4px; justify-content: flex-start; }
.wh-acts + .wh-stats.in-head { margin-left: auto; margin-right: 0; }
.wh-acts + .wh-stats.in-head .wh-stat:last-child { padding-right: 0; }
@media (max-width: 1200px) { .wh-head .wh-acts { margin-left: 4px; width: auto; } }
.wh-head .wh-id { flex: 0 1 auto; min-width: 0; }
.wh-finding { color: var(--label-3) !important; font-weight: 600 !important; }
.wh-marks [data-stack] { pointer-events: auto; cursor: default; }
.wh-more { position: absolute; display: grid; place-items: center; min-width: 30px; height: 20px; padding: 0 7px; border-radius: 10px; font: 750 11px/1 var(--font); color: #fff; background: var(--fill-1, #3a3a3c); box-shadow: 0 0 0 1.5px var(--good), 0 2px 6px rgba(0, 0, 0, .5); }
.wh-more.down { box-shadow: 0 0 0 1.5px var(--bad), 0 2px 6px rgba(0, 0, 0, .5); }
.wh-tip-row { display: grid; grid-template-columns: 18px minmax(0, 1fr) auto auto; align-items: center; gap: 8px; min-width: 240px; }
.wh-tip-row > :first-child { width: 18px !important; height: 18px !important; border-radius: 50%; overflow: hidden; }
.wh-tip-row b { font: 600 12.5px/1.3 var(--font); overflow: hidden; text-overflow: ellipsis; }
.wh-tip-row em { font-size: 11.5px; font-weight: 650; } .wh-tip-row i { font-style: normal; font-weight: 700; color: var(--label); text-align: right; }
.wh-plot { height: 420px; }
/* The side column stays in view and scrolls on its own when it's longer than the window. */
.wh-side { max-height: calc(100vh - 100px); overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; scrollbar-color: var(--fill-1, #3a3a3c) transparent; padding-right: 6px; }
@media (max-width: 1100px) { .wh-side { max-height: none; overflow: visible; padding-right: 0; } }
.wh-tip[data-pin] { pointer-events: auto; max-height: 360px; overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; z-index: 6; }
/* Positions: open or closed, one switch. */
.wh-sec h3 .wh-postab { display: inline-flex; gap: 2px; padding: 3px; margin-left: 14px; border-radius: 10px; background: var(--fill-3); vertical-align: middle; }
.wh-postab button { font: 600 13px/1 var(--font); color: var(--label-2); background: transparent; border: 0; border-radius: 7px; padding: 7px 12px; cursor: pointer; }
.wh-postab button small { margin-left: 6px; font-size: 11.5px; color: var(--label-3); }
.wh-postab button.on { background: var(--surface-2, #2c2c2e); color: var(--label); }
.wh-sec h3 > small b { font-weight: 700; }
/* The side column: their book at a glance. No inner scrollbar. */
.wh-side { max-height: none; overflow: visible; padding-right: 0; display: flex; flex-direction: column; gap: 28px; }
.wa-sec h4 { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; margin: 0 0 12px; font: 700 16px/1.2 var(--font-display); }
.wa-sec h4 small { font: 600 12.5px/1.2 var(--font); color: var(--label-3); }
.wa-bar { display: flex; height: 8px; border-radius: 4px; overflow: hidden; gap: 2px; background: var(--fill-3); }
.wa-bar i { display: block; min-width: 2px; } .wa-bar i.up { background: var(--good); } .wa-bar i.down { background: var(--bad); }
.wa-bar i.acc { background: var(--accent, #0a84ff); } .wa-bar i.rest { background: transparent; }
.wa-split { display: flex; justify-content: space-between; margin-top: 9px; font-size: 13px; color: var(--label-2); }
.wa-split b { font-weight: 750; } .wa-split .up b { color: var(--good); } .wa-split .down b { color: var(--bad); }
.wa-note { margin: 8px 0 0; font-size: 12.5px; color: var(--label-3); }
.wa-line { display: grid; grid-template-columns: 120px minmax(0, 1fr) 44px; align-items: center; gap: 12px; padding: 5px 0; font-size: 13px; color: var(--label-2); }
.wa-line em { font-style: normal; font-weight: 700; color: var(--label); text-align: right; }
.wa-row { display: grid; grid-template-columns: 24px minmax(0, 1fr) auto; align-items: center; gap: 12px; padding: 9px 0; }
.wa-row + .wa-row { box-shadow: 0 -1px 0 var(--sep); }
.wa-row > :first-child { width: 24px !important; height: 24px !important; }
.wa-row span { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.wa-row b { font-size: 14px; font-weight: 650; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.wa-row small { font-size: 12px; color: var(--label-3); }
.wa-row em { font-style: normal; font-weight: 750; font-size: 14px; } .wa-row em.up { color: var(--good); } .wa-row em.down { color: var(--bad); }
.wa-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px 18px; }
.wa-grid div { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.wa-grid small { font-size: 11px; font-weight: 650; letter-spacing: .04em; text-transform: uppercase; color: var(--label-3); }
.wa-grid b { font: 750 18px/1.2 var(--font-display); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.wa-grid b.up { color: var(--good); } .wa-grid b.down { color: var(--bad); }
.wh-pos.wh-pos-closed { grid-template-columns: 44px minmax(0, 2.1fr) minmax(0, .7fr) minmax(0, 1fr) minmax(0, 1fr) minmax(0, .8fr); }
.wa-line { grid-template-columns: 160px minmax(0, 1fr) 44px; } .wa-line > span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* Loading a whale: the Cred mark breathing inside a slow ring, the wallet's name under it. */
.wh-load { display: flex !important; flex-direction: column; align-items: center; justify-content: center; gap: 10px; min-height: 52vh; padding: 0 !important; font-size: inherit !important; color: var(--label) !important; animation: rise .4s ease both; }
.wh-load-mark { position: relative; display: grid; place-items: center; width: 84px; height: 84px; margin-bottom: 8px; }
.wh-load-mark img { width: 46px; height: 46px; animation: wh-breathe 1.8s ease-in-out infinite; }
.wh-load-mark i { position: absolute; inset: 0; border-radius: 50%; border: 2px solid var(--fill-2); border-top-color: var(--label); animation: wh-spin 1.1s linear infinite; }
.wh-load b { font: 700 17px/1.2 var(--font-display); letter-spacing: -.01em; }
.wh-load small { font-size: 13px; color: var(--label-3); }
@keyframes wh-spin { to { transform: rotate(360deg); } }
@keyframes wh-breathe { 0%, 100% { transform: scale(1); opacity: 1; } 50% { transform: scale(.9); opacity: .7; } }
@media (prefers-reduced-motion: reduce) { .wh-load-mark img, .wh-load-mark i { animation: none; } }
/* The side column scrolls on its own under the pointer, with no scrollbar showing. */
.wh-side { max-height: calc(100vh - 100px); overflow-y: auto; overscroll-behavior: contain; scrollbar-width: none; padding-bottom: 24px; }
.wh-side::-webkit-scrollbar { display: none; }
@media (max-width: 1100px) { .wh-side { max-height: none; overflow: visible; } }
.page.wh-page:has(> .wh-load) { width: 100%; } .wh-load { width: 100%; text-align: center; }
#view > .page.wh-page:has(> .wh-load) { grid-column: 1 / -1; }
.wh-load .busy-logo { margin-bottom: 14px; }
/* A promise verdict in the feed: who, what they promised, whether they delivered, and the latest on it. */
.ps-card { display: flex; flex-direction: column; gap: 12px; padding: 20px 0; }
.ps-head { display: flex; align-items: center; gap: 12px; color: inherit; text-decoration: none; }
.ps-head span { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.ps-head b { font-size: 15.5px; font-weight: 700; }
.ps-head small { font-size: 12.5px; color: var(--label-3); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ps-body { display: flex; flex-direction: column; gap: 8px; padding-left: 56px; }
.ps-verdict { align-self: flex-start; font: 750 11.5px/1 var(--font); letter-spacing: .05em; text-transform: uppercase; padding: 5px 9px; border-radius: 6px; }
.ps-verdict.down { color: var(--bad); background: color-mix(in srgb, var(--bad) 15%, transparent); }
.ps-verdict.up { color: var(--good); background: color-mix(in srgb, var(--good) 15%, transparent); }
.ps-verdict.mid { color: #ffd60a; background: color-mix(in srgb, #ffd60a 14%, transparent); }
.ps-promise { font: 700 19px/1.3 var(--font-display); color: var(--label); text-decoration: none; }
.ps-promise:hover { text-decoration: underline; text-underline-offset: 3px; }
.ps-said { margin: 0; font-size: 12.5px; color: var(--label-3); }
.ps-why { margin: 2px 0 0; font-size: 14.5px; line-height: 1.5; color: var(--label-2); }
.ps-last { margin: 0; font-size: 13px; color: var(--label-3); } .ps-last b { color: var(--label-2); font-weight: 650; }
@media (max-width: 720px) { .ps-body { padding-left: 0; } }
.src-link { width: auto !important; padding: 0 8px; font-size: 12px; font-weight: 600; color: var(--label-3); white-space: nowrap; } .src-link:hover { color: var(--label); }
/* Most talked about: the figures saying the most this week, as faces. */
.rx-talk { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px 8px; }
.rx-talk a { display: flex; flex-direction: column; align-items: center; gap: 4px; color: inherit; text-decoration: none; min-width: 0; }
.rx-talk span { font-size: 12px; font-weight: 650; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rx-talk small { font-size: 11px; color: var(--label-3); }
.rx-mod .r-sub b.down { color: var(--bad); font-weight: 700; }
/* Disputed: its own amber glyph (a dash), set apart from the grey "couldn't verify" ring. */
.calltag.disputed .ct-ic, .dt-hero.disputed .an-status .ct-ic { color: #ff9f0a; }
.dt-hero.disputed .an-status { color: #ff9f0a; }
.report-v.disputed { color: #ff9f0a; background: color-mix(in srgb, #ff9f0a 15%, transparent); }
.calltag.disputed .ct-t, .calltag.disputed .ct-st { color: inherit; }
.status.rated.disputed { color: #ff9f0a; } .status.rated.disputed .ct-ic { width: 13px; height: 13px; margin-right: 4px; }
/* Every market a whale is in, in one row that scrolls (wheel or swipe), with a search beside it. */
.wh-bar { flex-wrap: nowrap; }
.wh-things { flex: 1; mask-image: linear-gradient(90deg, #000 calc(100% - 40px), transparent); -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 40px), transparent); padding-right: 30px; }
.wh-things button[hidden] { display: none; }
.wh-find { flex: none; display: flex; align-items: center; gap: 8px; width: 210px; height: 38px; padding: 0 12px; border-radius: 11px; background: var(--fill-3); color: var(--label-3); }
.wh-find svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; flex: none; }
.wh-find input { flex: 1; min-width: 0; border: 0; outline: 0; background: transparent; color: var(--label); font: 500 13.5px/1 var(--font); }
.wh-find:focus-within { box-shadow: 0 0 0 2px color-mix(in srgb, var(--accent) 55%, transparent); color: var(--label-2); }
@media (max-width: 900px) { .wh-bar { flex-wrap: wrap; } .wh-find { width: 100%; } }
/* The market picker: every market they're in, searchable, by type, under the search button. */
.wh-lab { position: relative; }
button.wh-find { border: 0; cursor: pointer; font: 500 13.5px/1 var(--font); color: var(--label-3); text-align: left; }
button.wh-find:hover { color: var(--label-2); background: var(--fill-2); }
.wp { position: absolute; top: 52px; right: 0; z-index: 30; width: min(460px, 100%); }
.wp[hidden] { display: none; }
.wp-box { display: flex; flex-direction: column; max-height: min(560px, 70vh); border-radius: 18px; background: var(--surface-2, #1c1c1e); box-shadow: 0 24px 60px rgba(0, 0, 0, .55), 0 0 0 .5px var(--sep-strong); overflow: hidden; animation: menu-in .16s ease-out; }
.wp-search { display: flex; align-items: center; gap: 10px; padding: 14px 16px; border-bottom: 1px solid var(--sep); color: var(--label-3); }
.wp-search svg { width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; flex: none; }
.wp-search input { flex: 1; min-width: 0; border: 0; outline: 0; background: transparent; color: var(--label); font: 500 15px/1.2 var(--font); }
.wp-tabs { display: flex; gap: 4px; padding: 10px 12px 4px; overflow-x: auto; scrollbar-width: none; }
.wp-tabs button { flex: none; font: 600 12.5px/1 var(--font); color: var(--label-3); background: transparent; border: 0; border-radius: 8px; padding: 7px 10px; cursor: pointer; }
.wp-tabs button small { margin-left: 5px; color: var(--label-3); font-weight: 600; }
.wp-tabs button.on, .wp-tabs button:hover { color: var(--label); background: var(--fill-2); }
.wp-list { overflow-y: auto; padding: 6px; scrollbar-width: thin; }
.wp-row { display: grid; grid-template-columns: 28px minmax(0, 1fr) auto; align-items: center; gap: 12px; width: 100%; padding: 9px 10px; border: 0; border-radius: 11px; background: transparent; color: inherit; text-align: left; font: inherit; cursor: pointer; }
.wp-row[hidden] { display: none; }
.wp-row:hover { background: var(--fill-2); }
.wp-row.on { background: color-mix(in srgb, var(--accent) 16%, transparent); }
.wp-row > :first-child { width: 28px !important; height: 28px !important; }
.wp-n { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.wp-n b { font-size: 14px; font-weight: 650; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.wp-n small { font-size: 12px; color: var(--label-3); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.wp-row em { font-style: normal; font-weight: 700; font-size: 13.5px; } .wp-row em.up { color: var(--good); } .wp-row em.down { color: var(--bad); }
.wp-all { display: block; font-weight: 650; color: var(--accent); }
.wp-none { margin: 18px; text-align: center; color: var(--label-3); font-size: 13px; }
/* Five numbers over a whale's chart: the record, then portfolio risk. */
.wh-scope { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.wh-scope b.mid { color: #ffd60a; }
@media (max-width: 900px) { .wh-scope { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
/* Whale rows that open the whale's wallet page: the name reads as a link, and "View wallet" shows on hover. */
.ux-move.has-wallet { cursor: pointer; }
.ux-who-link { text-decoration: underline; text-decoration-color: color-mix(in srgb, var(--label) 35%, transparent); text-underline-offset: 3px; text-decoration-thickness: 1.5px; }
.ux-move.has-wallet:hover .ux-who-link { color: var(--accent); text-decoration-color: currentColor; }
.ux-move .ux-go { display: none; color: var(--accent); font-weight: 650; }
.ux-move.has-wallet:hover .ux-go { display: inline; }
.ux-move.has-wallet:hover .ux-when { display: none; }
.ux-move.has-wallet:hover { background: var(--fill-3); }
.ux-pos.has-wallet span { text-decoration: underline; text-decoration-color: color-mix(in srgb, var(--label) 30%, transparent); text-underline-offset: 3px; }
.ux-pos.has-wallet:hover span { color: var(--accent); }
/* One row per call: the others who made it, under the caller shown. */
.pk-also { display: flex; align-items: center; gap: 8px; margin-top: 5px; font-size: 12.5px; font-weight: 650; color: var(--label-2); }
.pk-also small { font-weight: 500; color: var(--label-3); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.pk-also-faces { display: inline-flex; }
.pk-also-faces > * + * { margin-left: -6px; }
.pk-also-faces > * { box-shadow: 0 0 0 2px var(--bg); border-radius: 50%; }

/* Predictions, pared back: a call, one quiet byline (who, when, how many others), and one number per column. */
.pk-list-h.pk2, .pk-row.pk2 { grid-template-columns: 36px minmax(0, 1fr) 150px 150px 90px 32px; gap: 24px; padding: 0 12px; }
.pk-row.pk2 { padding-top: 18px; padding-bottom: 18px; border-bottom-color: color-mix(in srgb, var(--sep) 60%, transparent); }
.pk-list-h.pk2 { border-bottom-color: color-mix(in srgb, var(--sep) 60%, transparent); }
.pk-row.pk2 .pk-logo, .pk-row.pk2 .pk-topic { width: 36px; height: 36px; }
.pk-row.pk2 .pk-logo { align-self: center; overflow: visible; }
.pk-row.pk2 .pk-logo > * { flex: none; margin: 0; }
.pk-row.pk2 .pk-topic, .pk-row.pk2 .pk-topic[class] { background: #fff; color: #1c1c1e; }
.pk-row.pk2 .pk-topic svg { width: 17px; height: 17px; }
.pk-row.pk2 .pk-title { font-size: 15px; font-weight: 600; }
.pk-row.pk2 .pk-main { gap: 7px; }
.pk-byline { display: flex; align-items: center; gap: 10px; min-width: 0; }
.pk-row.pk2 .pk-by { gap: 6px; font-size: 12.5px; }
.pk-row.pk2 .pk-by b { font-weight: 500; color: var(--label-2); }
.pk-row.pk2 .pk-by .pk-tierword { font-weight: 500; }
.pk-row.pk2 .pk-by .pk-tierword::before { content: "·"; margin-right: 6px; color: var(--label-3); }
.pk-row.pk2 .pk-by .pk-tierword.trial { color: var(--label-3); }
.pk-row.pk2 .pk-also { margin: 0; gap: 5px; font-size: 12px; font-weight: 600; color: var(--label-3); white-space: nowrap; }
.pk-row.pk2 .pk-also::before { content: "·"; margin-right: 1px; font-weight: 400; }
.pk-row.pk2 .pk-also-faces > * + * { margin-left: -5px; }
.pk-row.pk2 .pk-num b, .pk-row.pk2 .pk-crowd .pk-val b { font-size: 15px; font-weight: 650; }
.pk-row.pk2 .pk-num small, .pk-row.pk2 .pk-crowd .pk-sub { font-size: 11.5px; }
.pk-row.pk2 .pk-crowd .pk-agree { display: none; }
.pk-row.pk2 .pk-crowd .pk-pub { gap: 2px; }
.pk-row.pk2 .pk-now .pk-spark { width: 52px; height: 22px; opacity: .85; }
.pk-row.pk2 .pk-now { gap: 10px; }
.pk-row.pk2 .pk-due2 .pk-clock { color: var(--label-2); font-weight: 550; }
/* Track: shown on hover (or once tracked), not a column of circles. */
.pk-row.pk2 .tk-btn:not(.on) { opacity: 0; transition: opacity var(--fast), background var(--fast), color var(--fast); }
.pk-row.pk2:hover .tk-btn, .pk-row.pk2 .tk-btn:focus-visible { opacity: 1; }
@media (hover: none) { .pk-row.pk2 .tk-btn:not(.on) { opacity: 1; } }
@media (max-width: 1100px) { .pk-row.pk2 { grid-template-columns: 36px minmax(0, 1fr) 32px; } }
/* The tracked line sits on the page, not in a box: just a faint rule under it. */
.tt-bar { margin-top: 6px; padding: 12px 4px 12px 12px; border-radius: 0; background: none; box-shadow: none; border-bottom: 1px solid color-mix(in srgb, var(--sep) 60%, transparent); }
.tt-bar.tt-hint { padding-left: 4px; }
.tt-bar .tt-chips { border-left-color: color-mix(in srgb, var(--sep) 60%, transparent); }

/* The Predictions rail: search on top, then the markets (roomier), then the proven callers. */
.wkr-search { display: flex; align-items: center; gap: 8px; height: 38px; margin: 0 0 8px; padding: 0 12px; border-radius: 11px; background: var(--fill-3); color: var(--label-3); box-shadow: inset 0 0 0 1px var(--sep); }
.wkr-search svg { width: 15px; height: 15px; fill: currentColor; flex: none; }
.wkr-search input { flex: 1; min-width: 0; border: 0; outline: none; background: transparent; color: var(--label); font: 13.5px var(--font); }
.wkr-search input::-webkit-search-cancel-button { filter: invert(.6); cursor: pointer; }
.wkr-search:focus-within { box-shadow: 0 0 0 2px color-mix(in srgb, var(--accent) 55%, transparent); }
.wkr-results .wkr-sec:last-child { border-bottom: 0; }
.wkr-row.wkr-mk { gap: 12px; padding: 9px 8px; }
.wkr-row.wkr-mk .wkr-n b { font-size: 14.5px; }
.wkr-row.wkr-mk .wkr-n small { font-size: 12px; }
.wkr-row.wkr-mk em { font-size: 13px; }

/* A caller beside their calls: cover, face, the numbers, how their right and wrong calls went, their form. */
.ir.cr { padding-top: 0; overflow-x: hidden; }
.cr-hero { height: 92px; margin: 0 -18px; background: linear-gradient(135deg, color-mix(in srgb, var(--accent) 30%, var(--bg)), var(--fill-2)) center / cover no-repeat; }
.cr-who { display: flex; align-items: flex-end; gap: 12px; margin-top: -30px; color: var(--label); }
.cr-who .av { flex: none; box-shadow: 0 0 0 3px var(--bg); border-radius: 50%; }
.cr-who > span { display: flex; flex-direction: column; min-width: 0; padding-bottom: 2px; }
.cr-who b { font: 750 18px/1.2 var(--font-display, var(--font)); letter-spacing: -.02em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cr-who small { font-size: 12px; color: var(--label-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cr-who:hover b { text-decoration: underline; text-underline-offset: 3px; }
.cr-tier { align-self: flex-start; margin-top: 10px; padding: 3px 9px; border-radius: var(--r-pill); font: 650 11.5px var(--font); background: var(--fill-2); color: var(--label-2); }
.cr-tier.proven { color: var(--good); background: color-mix(in srgb, var(--good) 14%, transparent); }
.cr-tier.rising { color: var(--accent); background: color-mix(in srgb, var(--accent) 14%, transparent); }
.cr-stats { grid-template-columns: repeat(3, 1fr); row-gap: 14px; margin-top: 8px; }
.cr-stats b { font-size: 18px; }
.cr-stats b.up { color: var(--good); } .cr-stats b.down { color: var(--bad); }
.cr-split-h, .cr-split { display: grid; grid-template-columns: minmax(0, 1fr) 64px 64px; align-items: baseline; gap: 6px; }
.cr-split-h span:not(:first-child) { text-align: right; }
.cr-split { padding: 5px 0; }
.cr-split small { font-size: 12.5px; color: var(--label-2); }
.cr-split b { text-align: right; font: 650 13.5px var(--font); font-variant-numeric: tabular-nums; color: var(--label); }
.cr-split b.up { color: var(--good); } .cr-split b.down { color: var(--bad); }
.cr-form { display: flex; gap: 5px; padding-bottom: 6px; }
.cr-form a { display: grid; place-items: center; width: 22px; height: 22px; border-radius: 6px; font: 700 11px var(--font); }
.cr-form a.right { color: var(--good); background: color-mix(in srgb, var(--good) 16%, transparent); }
.cr-form a.wrong { color: var(--bad); background: color-mix(in srgb, var(--bad) 16%, transparent); }
.cr-note { margin: 0 0 6px; font-size: 12.5px; line-height: 1.45; color: var(--label-2); }
.cr-note b { color: var(--label); }
.cr-topic { display: grid; grid-template-columns: minmax(0, 1fr) auto 44px; gap: 10px; align-items: baseline; padding: 4px 0; font-size: 13px; }
.cr-topic small { color: var(--label-3); font-variant-numeric: tabular-nums; }
.cr-topic em { font-style: normal; text-align: right; font-weight: 650; font-variant-numeric: tabular-nums; }
.cr-topic em.up { color: var(--good); } .cr-topic em.down { color: var(--bad); }
.cr-all { display: block; margin-top: 8px; text-align: center; font-size: 12.5px; color: var(--label-3); }
.cr-all:hover { color: var(--label); }
.wk-rail [hidden] { display: none !important; }
.cr-said { display: flex; flex-direction: column; gap: 3px; padding: 7px 0; color: var(--label); border-bottom: 1px solid color-mix(in srgb, var(--sep) 50%, transparent); }
.cr-said:last-child { border-bottom: 0; }
.cr-said span { font-size: 13px; line-height: 1.4; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.cr-said:hover span { color: var(--accent); }
.cr-said small { font-size: 11.5px; color: var(--label-3); }
.cr-said em { font-style: normal; font-weight: 650; }
.cr-said em.up { color: var(--good); } .cr-said em.down { color: var(--bad); }
/* The rail's search, full height: a proper field, not a pill. */
.wkr-search { flex: none; height: 46px; margin: 0 0 14px; padding: 0 14px; gap: 10px; border-radius: 14px; background: var(--fill-3); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--sep) 80%, transparent); transition: box-shadow var(--fast), background var(--fast); }
.wkr-search:hover { background: var(--fill-2); }
.wkr-search:focus-within { background: var(--fill-2); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--accent) 70%, transparent), 0 0 0 3px color-mix(in srgb, var(--accent) 18%, transparent); }
.wkr-search svg { width: 16px; height: 16px; color: var(--label-3); }
.wkr-search input { font: 500 14.5px var(--font); }
.wkr-search input::placeholder { color: var(--label-3); }
/* The caller snapshot's cover keeps its height in the column. */
.ir.cr > * { flex: none; }

/* Phones: the tab row and post headers fit the screen. The topic filter becomes an icon (tinted when a topic is on),
   a post's source link becomes an arrow beside Save, and the time never shrinks to "3..". Nothing on the page may
   push it wider than the screen, which would also pull the dock off-center. */
@media (max-width: 720px) {
  body { overflow-x: clip; }
  .tabs { gap: 16px; }
  .tabs .fx-main { padding: 0; width: 34px; justify-content: center; }
  .tabs .fx-main span, .tabs .fx-main .fx-chev { display: none; }
  .tabs .fx-pill.on .fx-main { padding: 0; }
  .tabs .fx-x { display: none; }
  .post-head .post-meta { flex: none; }
  .post-head .src-link { flex: none; width: 28px !important; padding: 0; font-size: 0; }
  .post-head .src-link::after { content: "↗"; font-size: 15px; line-height: 1; margin-top: -3px; color: var(--label-3); }
}
@media (max-width: 360px) {
  .tabs { gap: 12px; }
  .tabs button[role="tab"] { font-size: 13.5px; }
}

/* Phones: long text is cut sooner, since a line holds about half what it does on a desktop. A post shows 4 lines
   before "Read more"; a promise card shows 3 lines of its verdict and 2 of the latest update (the promise opens the rest). */
@media (max-width: 720px) {
  .quote.long .post-text { -webkit-line-clamp: 4; }
  .ps-why { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
  .ps-last { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
}

/* Phones, signed out: the intro and its three boxes fit the first screen, so the feed starts right below. A smaller
   headline, the four stats on one row, and Receipts / Smart money / Loud, not right as cards swiped sideways. */
@media (max-width: 720px) {
  .home-top { margin-bottom: 18px; }
  .pitch { padding: 4px 0 18px; }
  .pitch h1 { font-size: 30px; }
  .pitch p { margin-top: 10px; font-size: 15px; line-height: 1.45; }
  .pitch-stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; margin-top: 16px; }
  .pitch-stats b { font-size: 19px; }
  .pitch-stats span { font-size: 11.5px; line-height: 1.3; }
  .mods { display: flex; gap: 10px; margin: 0 -16px; padding: 0 16px; overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding: 0 16px; scrollbar-width: none; }
  .mods::-webkit-scrollbar { display: none; }
  .mods > .mod { flex: 0 0 86%; scroll-snap-align: start; }
}

/* Phones, Predictions: the page keeps its side margins and fits the screen. The topic pills scroll on their own row
   with Whose picks and Sort on the row below (they used to run 180px off the edge and shrink the whole page). A call is
   its title and byline with the two numbers side by side under it, about half the height of the stacked desktop
   columns. Signed out, three locked picks show as a taste; the card above already counts the rest. */
@media (max-width: 720px) {
  #view.wk-has-rail { padding: 0 16px 104px; }
  .tm-tool { flex-wrap: wrap; }
  .tm-tool .tm-topics, .tm-tool .tm-subs { flex: 1 1 100%; min-width: 0; max-width: 100%; overflow-x: auto; scrollbar-width: none; }
  .tm-tool .tm-grow { display: none; }
  .tm-tool .tm-menus { margin-left: auto; }
  .pk-row.pk2 { grid-template-columns: 36px minmax(0, 1fr) minmax(0, 1fr) 32px; grid-template-areas: "logo main main go" ". now crowd ."; gap: 10px 12px; padding: 14px 0; }
  .pk-row.pk2 .pk-logo { grid-area: logo; align-self: start; }
  .pk-row.pk2 .pk-main { grid-area: main; }
  .pk-row.pk2 .pk-now { grid-area: now; }
  .pk-row.pk2 .pk-crowd { grid-area: crowd; }
  .pk-row.pk2 .pk-due2 { display: none; }
  .pk-row.pk2 .pk-go { grid-area: go; align-self: start; }
  .pk-row.pk2 .tk-btn:not(.on) { opacity: 1; }
  .pk-list .pk-row.locked ~ .pk-row.locked ~ .pk-row.locked ~ .pk-row.locked { display: none; }
}

/* Phones, profiles: what they said is the first thing below who they are. A short cover, a smaller face, the name,
   one line of who, two of bio, Follow; then one slim stats row and their live calls as cards swiped sideways; then
   the posts, newest first. Similar people, receipts and the credibility chart move below the posts. The side column
   lets go of its box (display: contents) so each of its sections can take its own place in that order. */
@media (max-width: 720px) {
  .pf-cover, .pf-cover.none { height: 92px; border-radius: 18px; }
  .pf-grid { margin-top: -38px; padding: 0 4px; gap: 10px; }
  .pf-av .av { width: 72px !important; height: 72px !important; box-shadow: 0 0 0 4px var(--bg); }
  .pf-av .av img { width: 72px !important; height: 72px !important; }
  .pf-grid .pf-main { padding-top: 8px; }
  .pf-main h1 { font-size: 23px; }
  .pf-main h1 .check { width: 18px; height: 18px; }
  .pf-handle { font-size: 13px; margin-top: 2px; }
  .pf-bio { font-size: 13.5px; margin-top: 6px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
  .pf-actions { margin: 2px 0 0; }
  .layout.profile { display: flex; flex-direction: column; align-items: stretch; gap: 0; margin-top: 14px; }
  .layout.profile .pf-rail { display: contents; }
  .layout.profile .pf-rail > * { order: 3; min-width: 0; margin-top: 28px; }
  .layout.profile .pf-rail > .pf-rail-stats { order: 0; margin-top: 0; }
  .layout.profile .pf-rail > .pf-up { order: 1; margin-top: 14px; }
  .layout.profile .main-col { order: 2; margin-top: 10px; }
  .layout.profile .tabs { overflow-x: auto; scrollbar-width: none; }
  .layout.profile .tabs::-webkit-scrollbar { display: none; }
  .layout.profile .tabs > button[role="tab"] { flex: none; }
  .layout.profile .tabs > button[role="tab"].on::after { bottom: 0; }
  .pf-rail-stats .pf-stat { padding: 8px 12px; flex-direction: row; align-items: baseline; flex-wrap: wrap; gap: 0 8px; }
  .pf-rail-stats .pf-stat b { font-size: 17px; }
  .pf-badge { left: calc(100% + 10px); bottom: 4px; transform: none; }
  .pf-badge:hover { transform: none; }
  .pf-up { display: flex; gap: 8px; margin: 0 -16px; padding: 0 16px; width: calc(100% + 32px); max-width: none; overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding: 0 16px; scrollbar-width: none; }
  .pf-up::-webkit-scrollbar { display: none; }
  .pf-up h4 { display: none; }
  .pf-up .wc-live { flex: 0 0 78%; scroll-snap-align: start; align-items: flex-start; flex-wrap: wrap; padding: 10px 12px; }
  .pf-up .wc-live span { white-space: normal; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; flex-basis: calc(100% - 20px); }
  .pf-up .wc-live small { flex-basis: 100%; padding-left: 18px; }
}

/* Promises: a box to find a person, the totals doubling as the key to the bars' colors, and counts set apart in the
   group pills. On phones, the latest promises kept and broken lead the page as two cards swiped sideways (three
   each), above the list of everyone, instead of sitting under all of them. */
.pt-totals.pt-legend { gap: 6px 16px; }
.pt-find { height: 42px; margin: 0 0 12px; border-radius: 12px; }
.pt-find input { font-size: 14.5px; }
.pt-groups .chip small { margin-left: 6px; }
.pt-row[hidden], .pt-none[hidden] { display: none; }
@media (max-width: 720px) {
  .pt-page .n-layout { display: flex; flex-direction: column; align-items: stretch; gap: 18px; }
  .pt-page .n-main { min-width: 0; }
  .pt-page .n-side { order: -1; display: flex; flex-direction: row; gap: 10px; margin: 0 -16px; padding: 0 16px; width: calc(100% + 32px); max-width: none; overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding: 0 16px; scrollbar-width: none; }
  .pt-page .n-side::-webkit-scrollbar { display: none; }
  .pt-page .n-side > .rx-mod { flex: 0 0 86%; min-width: 0; scroll-snap-align: start; margin: 0; padding: 14px 14px 6px; border-radius: 18px; background: var(--fill-3); box-shadow: inset 0 0 0 1px var(--sep); }
  .pt-page .n-side .rx-win:nth-of-type(n + 4) { display: none; }
  .pt-totals.pt-legend { gap: 4px 12px; font-size: 13px; }
}

/* Phones, People: the search is a full-width, full-height box (it was squeezed to 21px), and a row's line leads with
   the record (calls 130–90 (59%) · beat market 59%), leaving the handle and followers to the profile; they took the
   only room there was. */
@media (max-width: 720px) {
  .ppl-bar:not(.sub) .ppl-search { flex: 1 1 100%; height: 44px; min-height: 44px; margin-bottom: 4px; border-radius: 12px; }
  .ppl-search input { font-size: 16px; }
  .row-item .rec-who { display: none; }
  .row-item .rec { white-space: normal; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; line-height: 1.35; }
}

/* The call page's two columns stack below 980px again. A later rule set the 380px side column for every width, so on
   a phone the call itself was squeezed to nothing beside it. */
@media (max-width: 980px) {
  .dt-grid { grid-template-columns: minmax(0, 1fr); gap: 0; }
}

/* Phones, the call page: the full width (the page's own 24px sides came on top of the screen's 16px), one back link
   (the header's "‹ Cred" goes; the dock and "‹ Predictions" cover it), a status line that wraps like a sentence, a
   Track button that stays one short line beside the caller, and a shorter chart. */
@media (max-width: 720px) {
  .dt-page { padding-left: 0; padding-right: 0; }
  .wk-exit, body.wk .wk-nav { display: none; }
  .dt-hero .an-status { display: block; font-size: 12.5px; line-height: 1.6; }
  .dt-hero .an-status .ct-ic { display: inline-flex; vertical-align: -2px; margin-right: 6px; }
  .dt-hero .an-status > i { margin: 0 5px; }
  .dt-by .tk-pill { flex: none; white-space: nowrap; }
  .dt-by .tk-pill:not(.on) > span { font-size: 0; }
  .dt-by .tk-pill:not(.on) > span::after { content: "Track"; font-size: 14px; }
  .trd-chart:has(.tc-plot) { height: 300px; }
}

/* Phones, Predictions: the bottom bar holds Back and the Predictions views (All, Tracked, Smart money, Record) in place
   of the sections, since the header that holds the views everywhere else has no room for them there. */
.dock.dock-pred { display: none; }
@media (max-width: 720px) {
  body.wk .dock:not(.dock-pred) { display: none; }
  body.wk .dock.dock-pred { display: flex; }
  .dock-pred .dock-back { width: 54px; }
  .dock-pred .dock-back svg { fill: currentColor; }
  #view.wk-has-rail, #view.wk-has-rail:has(> .mk-rail), #view.wk-has-rail:has(> .tr-rail) { grid-template-columns: minmax(0, 1fr); }
}

/* Phones, Smart money: the list of markets, then (once one is picked) that market alone, with All markets to go back. */
.mk-mback { display: none; }
@media (max-width: 720px) {
  #view.mk-picked > .mk-rail { display: none; }
  .mk-mback { display: inline-flex; align-items: center; gap: 4px; height: 34px; margin: 14px 0 4px; padding: 0 12px 0 6px; border: 0; border-radius: 17px; background: var(--fill-3); color: var(--label); font: 600 14px var(--font); cursor: pointer; }
  .mk-mback svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
  #view:not(.mk-picked) > .mk-rail ~ .page.mk4 { display: none; }
}

/* Phones, Tracked: your total and the list of trades first (they live in the side column that phones hide), then one
   trade alone with All tracked to go back. A trade's header wraps: its title gets the width, and the Smart money link
   drops below it. The header's portfolio value goes, since the page leads with it and the header has no room. */
.tr-mback { display: none; }
@media (max-width: 720px) {
  body.wk .wk-pfbox { display: none; }
  #view:not(.tr-picked) > .tr-rail.wk-rail { display: block; position: static; max-height: none; height: auto; margin: 12px 0 0; padding: 0; border: 0; overflow: visible; }
  #view:not(.tr-picked) .tr .tr-grid > .tr-detail { display: none; }
  #view:not(.tr-picked) .tr > .tr-sum { display: grid; }
  #view.tr-picked > .tr-rail { display: none; }
  #view.tr-picked .tr > .tr-sum { display: none; }
  #view.tr-picked .tr-mback { display: inline-flex; }
  #view > .tr-rail { order: 2; }
  .tr > .tr-sum { overflow: hidden; }
  .tr-curve-key { flex-wrap: wrap; white-space: normal; row-gap: 2px; }
  .tr-curve-key small { white-space: normal; }
  .trd-h .trd-t { flex: 1 1 0; min-width: 0; }
}
/* Phones, the numbers above a trade's chart: you and the caller side by side, each label on one line, then when it
   settles as one line under them, instead of three cramped columns. */
@media (max-width: 720px) {
  .trd-vs { grid-template-columns: repeat(2, minmax(0, 1fr)); margin: 20px 0 4px; row-gap: 14px; }
  .trd-vs > div { padding: 0 0 0 16px; }
  .trd-vs small { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .trd-vs b { font-size: 26px; }
  .trd-vs > div:nth-child(3) { grid-column: 1 / -1; flex-direction: row; align-items: baseline; flex-wrap: wrap; gap: 4px 10px; padding: 12px 0 0; border-left: 0; border-top: 1px solid var(--sep); }
  .trd-vs > div:nth-child(3) b, .trd-vs > div:nth-child(3) b:has(.trd-due) { font-size: 18px; line-height: 1.2; }
  .trd-vs > div:nth-child(3) span { margin-left: auto; }
}

/* Search on phones is a whole screen: the field at the top with Cancel beside it (no Esc key to press there), and the
   results scrolling under it, so the keyboard covers nothing that matters. A larger font keeps iOS from zooming in. */
.palette-cancel { display: none; }
@media (max-width: 720px) {
  .palette { top: 0; left: 0; width: 100%; height: 100dvh; border-radius: 0; transform: translateY(8px); display: flex; flex-direction: column; background: var(--bg); }
  .palette-layer.open .palette { transform: none; }
  .palette-input { padding: calc(10px + env(safe-area-inset-top)) 16px 10px; }
  .palette-input input { font-size: 17px; height: 40px; }
  .palette-input kbd { display: none; }
  .palette-cancel { display: block; flex: none; padding: 8px 0 8px 6px; border: 0; background: none; color: var(--accent); font: 500 16px var(--font); cursor: pointer; }
  .palette-results { flex: 1; max-height: none; padding: 4px 8px calc(24px + env(safe-area-inset-bottom)); }
  .palette-results .res .nm span { white-space: normal; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; line-height: 1.3; }
}

/* Phones, whale pages: the row of markets they trade scrolls inside the page's width (it ran out to 1,700px and the
   whole page shrank to fit it). */
@media (max-width: 720px) {
  .wh-bar > .wh-things { width: 100%; max-width: 100%; flex: none; }
}

/* Phones, whale pages: the full width for positions (not inset twice), each position in two lines (what it is and its
   P/L, then size, opened and entry to now side by side), and the summary (long vs short, biggest bets, best and worst,
   risk, against Cred's callers) above them as cards swiped sideways, instead of under every position. */
@media (max-width: 720px) {
  .page.wh-page { padding-left: 0; padding-right: 0; }
  .wh-main { padding-left: 0; padding-right: 0; }
  .wh-grid { display: flex; flex-direction: column; }
  .wh-grid > .wh-side { order: -1; flex-direction: row; align-items: flex-start; gap: 10px; margin: 18px -16px 6px; padding: 0 16px; width: calc(100% + 32px); max-width: none; overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding: 0 16px; scrollbar-width: none; border: 0; }
  .wh-grid > .wh-side::-webkit-scrollbar { display: none; }
  .wh-side > .wa-sec { flex: 0 0 82%; min-width: 0; margin: 0; padding: 14px; border: 0; border-radius: 18px; background: var(--fill-3); box-shadow: inset 0 0 0 1px var(--sep); scroll-snap-align: start; }
  .wh-pos { display: flex; flex-wrap: wrap; align-items: flex-start; column-gap: 12px; row-gap: 6px; padding-left: 52px; }
  .wh-pos::before { content: ""; order: 4; flex-basis: 100%; height: 0; }
  .wh-pos > .wh-pos-ic { order: 1; flex: none; margin-left: -52px; }
  .wh-pos > .wh-pos-m { order: 2; flex: 1 1 0; min-width: 0; }
  .wh-pos > .wh-pos-n.pnl { order: 3; flex: none; }
  .wh-pos > .wh-pos-n:not(.pnl) { order: 5; flex: none; gap: 5px; font-size: 12.5px; }
}

/* Phones, a Smart money market: no gap above All markets, the chart nearly full width and shorter, and the side
   summary (going up from here, big money, who's calling it, best callers, announcements, predictions, whales) as cards
   swiped sideways above the posts instead of seven boxes stacked 1,500px deep. */
@media (max-width: 720px) {
  #view.wk-has-rail { row-gap: 0; }
  .page.mk4 { padding-top: 6px; }
  .mk-mback { margin-top: 8px; }
  .md .sc { padding-left: 14px; padding-right: 14px; }
  .md .mkc { height: 320px; }
  .ux .ux-side { flex-direction: row; align-items: flex-start; gap: 10px; margin: 0 -16px; padding: 0 16px 4px; width: calc(100% + 32px); max-width: none; overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding: 0 16px; scrollbar-width: none; position: static; }
  .ux .ux-side::-webkit-scrollbar { display: none; }
  .ux .ux-side > * { flex: 0 0 86%; min-width: 0; margin: 0; padding: 14px; border-radius: 18px; background: var(--fill-3); box-shadow: inset 0 0 0 1px var(--sep); scroll-snap-align: start; }
}

/* A Smart money market's header: the ticker with its full name, then what it is (Stock · Healthcare · Diagnostics &
   Research), and one line on what the company or coin does, with a link to read more. */
.md-full { margin-left: 10px; font-size: .5em; font-weight: 600; letter-spacing: 0; color: var(--label-2); vertical-align: middle; }
.md-tags { display: flex; flex-wrap: wrap; gap: 6px; margin: 6px 0 4px; }
.md-tags span { padding: 3px 10px; border-radius: 12px; background: var(--fill-3); color: var(--label-2); font: 600 12px/1.4 var(--font); }
.md-tags span.on { background: color-mix(in srgb, var(--accent) 16%, transparent); color: var(--accent); }
.md-about { max-width: 760px; margin: 10px 0 2px; font-size: 14.5px; line-height: 1.5; color: var(--label-2); }
.md-about a { color: var(--accent); font-weight: 600; white-space: nowrap; }
@media (max-width: 720px) {
  .md-full { display: block; margin: 2px 0 0; font-size: 14px; }
  .md-about { font-size: 13.5px; }
}

/* A tracked trade's logo and title open its market in Smart money: a chevron after the title, a ring on the logo. */
.trd-go { padding: 0; border: 0; background: none; color: inherit; font: inherit; text-align: left; cursor: pointer; }
.trd-t h2 .trd-go { display: inline; letter-spacing: inherit; }
.trd-t h2 .trd-go:hover { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 4px; }
.trd-go-ic { display: inline-block; width: .8em; height: .8em; margin-left: 4px; vertical-align: -.05em; fill: none; stroke: var(--accent); stroke-width: 2.8; stroke-linecap: round; stroke-linejoin: round; transition: transform .15s; }
.trd-go:hover .trd-go-ic { transform: translateX(2px); }
button.trd-logo { flex: none; border-radius: 50%; transition: box-shadow .15s, transform .15s; }
button.trd-logo:hover { box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 35%, transparent); }
button.trd-logo:active { transform: scale(.96); }

/* Phones: Smart money's loading logo in the middle of the screen. It is placed over the market panel, which phones
   hide while the list of markets shows, so there it landed in the top left corner. */
@media (max-width: 720px) {
  .feed-spin { left: 50% !important; top: 50% !important; }
}

/* A whale's chart, while the server is still finding when some positions opened: a small turning ring and how many
   are left, beside the title (their marks join the chart as they're found). */
.wh-dates-wait { display: inline-flex; align-items: center; gap: 8px; margin-right: auto; height: 28px; padding: 0 12px 0 10px; border-radius: 999px; background: var(--fill-3); color: var(--label-2); font: 600 12.5px var(--font); white-space: nowrap; }
.wh-dates-wait small { font: 500 12px var(--font); color: var(--label-3); font-variant-numeric: tabular-nums; }
.wh-dates-spin { width: 12px; height: 12px; border-radius: 50%; border: 2px solid var(--fill-2); border-top-color: var(--accent); animation: busy-spin .8s linear infinite; }

/* ---------- Reversals: "Changed their tune" on a profile ---------- */
.rv-list { display: flex; flex-direction: column; }
.rv-intro { margin: 4px 0 14px; font-size: 13.5px; line-height: 1.5; color: var(--label-2); }
.rv-intro b { color: var(--bad); font-weight: 650; }
.rv { padding: 18px 0; border-top: 1px solid var(--sep); }
.rv h3 { margin: 0 0 12px; font: 720 17px/1.25 var(--font-display); letter-spacing: -.015em; }
.rv-sides { display: grid; grid-template-columns: 1fr auto 1fr; gap: 12px; align-items: stretch; }
.rv-side { display: flex; flex-direction: column; gap: 6px; padding: 14px 16px; border-radius: var(--r-md); background: var(--fill-3); min-width: 0; }
.rv-side.now { background: var(--bad-bg); }
.rv-side small { font-size: 11.5px; font-weight: 650; letter-spacing: .02em; text-transform: uppercase; color: var(--label-3); }
.rv-side.now small { color: var(--bad); }
.rv-side b { font: 650 15px/1.3 var(--font-display); }
.rv-side q { font-size: 13.5px; line-height: 1.45; color: var(--label-2); quotes: "“" "”"; }
.rv-side a { margin-top: auto; padding-top: 4px; font-size: 12.5px; font-weight: 600; color: var(--accent); text-decoration: none; }
.rv-side a:hover { text-decoration: underline; }
.rv-arrow { display: grid; place-items: center; color: var(--label-3); }
.rv-arrow svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.rv-owned { margin: 10px 0 0; font-size: 13px; line-height: 1.45; color: var(--label-2); }
.rv-owned b { color: var(--label); font-weight: 650; }
@media (max-width: 720px) {
  .rv-sides { grid-template-columns: 1fr; gap: 6px; }
  .rv-arrow { transform: rotate(90deg); height: 20px; }
}

/* ---------- The Record, cleaned up: text tabs, ticker row, a table of numbers, notes behind ⓘ ---------- */
/* Asset classes: plain text tabs with a line under the one picked; sports set off after a short rule. */
.rc-tabs { display: flex; align-items: center; gap: 22px; margin: 0 0 6px; padding-bottom: 0; border-bottom: 1px solid var(--sep); overflow-x: auto; scrollbar-width: none; }
.rc-tabs::-webkit-scrollbar { display: none; }
.rc-tabs button { position: relative; flex: none; padding: 10px 0 12px; font-size: 14px; font-weight: 550; color: var(--label-3); transition: color var(--fast); }
.rc-tabs button:hover { color: var(--label-2); }
.rc-tabs button.on { color: var(--label); }
.rc-tabs button.on::after { content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 2px; border-radius: 2px; background: var(--label); }
.rc-tabs-gap { flex: none; width: 1px; height: 14px; background: var(--sep-strong); }
/* Tickers: a quiet row of logos and symbols; the picked one gets a soft fill. */
.rc-syms { display: flex; gap: 4px; margin: 10px 0 0; overflow-x: auto; scrollbar-width: none; mask-image: linear-gradient(90deg, #000 92%, transparent); }
.rc-syms::-webkit-scrollbar { display: none; }
.rc-syms button { display: inline-flex; align-items: center; gap: 6px; flex: none; height: 30px; padding: 0 10px; border-radius: var(--r-pill); font-size: 13px; font-weight: 550; color: var(--label-2); transition: background var(--fast), color var(--fast); }
.rc-syms button:hover { background: var(--fill-3); }
.rc-syms button.on { background: var(--fill-2); color: var(--label); }
.rc-syms button img, .rc-syms button .lg { width: 16px; height: 16px; }
.rc .rc-sum { margin-top: 26px; padding-bottom: 26px; }
.rc .rc-stat small { display: flex; align-items: center; gap: 6px; }
.rc .rc-stat span { font-size: 12.5px; }
.rc .rc-h { margin: 38px 0 10px; }
/* The callers: one line each, only numbers. */
.rt { display: flex; flex-direction: column; }
.rt-head, .rt-row { display: grid; grid-template-columns: minmax(0, 1fr) 84px 104px 64px 64px 84px; align-items: center; column-gap: 12px; }
.rt-head { padding: 0 10px 8px; border-bottom: 1px solid var(--sep); font-size: 11px; font-weight: 650; letter-spacing: .05em; text-transform: uppercase; color: var(--label-3); }
.rt-head span:not(:first-child), .rt-row > :not(.rt-who) { text-align: right; }
.rt-row { padding: 12px 10px; border-bottom: 1px solid var(--sep); border-radius: var(--r-sm); color: var(--label); text-decoration: none; font-size: 14px; font-variant-numeric: tabular-nums; transition: background var(--fast); }
.rt-row:hover { background: var(--fill-3); }
.rt-who { display: flex; align-items: center; gap: 12px; min-width: 0; }
.rt-who > span { display: flex; flex-direction: column; min-width: 0; }
.rt-who b { font-size: 14.5px; font-weight: 650; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rt-who small { font-size: 12px; color: var(--label-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rt-roi { font: 750 16px/1 var(--font-display); }
.rt-row .up { color: var(--good); }
.rt-row .down { color: var(--bad); }
.rt-row > span:not(.rt-who) { color: var(--label-2); }
.rt-row > span.up, .rt-row > span.down { font-weight: 600; }
.rt-last { font-weight: 600; color: var(--label) !important; }
/* A caller opened up: where the profit came from, each ticker or odds band opening into its calls. */
button.rt-row { width: 100%; background: none; border: 0; border-bottom: 1px solid var(--sep); font: inherit; font-size: 14px; text-align: left; cursor: pointer; }
.rt-row[aria-expanded="true"] { background: var(--fill-3); border-bottom-color: transparent; border-radius: var(--r-sm) var(--r-sm) 0 0; }
.rd { display: flex; flex-direction: column; gap: 26px; padding: 18px 20px 20px; margin-bottom: 8px; background: var(--fill-3); border-radius: 0 0 var(--r-sm) var(--r-sm); border-bottom: 1px solid var(--sep); }
.rd-facts { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.rd-fact { display: flex; flex-direction: column; gap: 3px; padding: 12px 14px; border-radius: var(--r-sm); background: var(--fill-2, rgba(255,255,255,.04)); min-width: 0; }
.rd-fact small { display: flex; align-items: center; gap: 6px; font-size: 10.5px; font-weight: 650; letter-spacing: .05em; text-transform: uppercase; color: var(--label-3); }
.rd-fact b { font: 750 18px/1.15 var(--font-display); color: var(--label); font-variant-numeric: tabular-nums; }
.rd-fact span { font-size: 12px; color: var(--label-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rd-fact .rc-tip { padding: 0; background: none; }
.rd-block h4 { margin: 0 0 6px; font-size: 11px; font-weight: 650; letter-spacing: .05em; text-transform: uppercase; color: var(--label-3); }
.rd-row { display: grid; grid-template-columns: minmax(0, 1fr) 64px 84px 72px 88px 20px; column-gap: 12px; align-items: center; width: 100%; padding: 9px 6px; border: 0; border-bottom: 1px solid var(--sep); background: none; font: inherit; font-size: 13.5px; font-variant-numeric: tabular-nums; color: var(--label-2); text-align: left; }
button.rd-row { cursor: pointer; border-radius: 6px; transition: background var(--fast); }
button.rd-row:hover { background: var(--fill-3); }
.rd-row > :not(:first-child) { text-align: right; }
.rd-head { padding-top: 0; font-size: 10.5px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--label-3); }
.rd-sym { display: flex; align-items: center; gap: 8px; min-width: 0; color: var(--label); font-weight: 600; }
.rd-sym small { font-weight: 400; font-size: 12px; color: var(--label-3); }
.rd-roi { font-weight: 700 !important; }
.rd-chev { width: 14px; height: 14px; justify-self: end; fill: none; stroke: var(--label-3); stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; transition: transform var(--fast); }
[aria-expanded="true"] > .rd-chev { transform: rotate(90deg); }
.rd .up { color: var(--good); font-weight: 600; }
.rd .down { color: var(--bad); font-weight: 600; }
.rd-sub { margin: 4px 0 10px 18px; padding-left: 14px; border-left: 2px solid var(--sep); }
.rd-more { margin-top: 8px; padding: 6px 2px; border: 0; background: none; font: inherit; font-size: 13px; font-weight: 600; color: var(--label-2); cursor: pointer; }
.rd-more:hover { color: var(--label); }
.rd-pick { display: grid; grid-template-columns: 56px minmax(0, 1fr) 48px 52px 84px; column-gap: 12px; align-items: center; padding: 8px 6px; border-bottom: 1px solid var(--sep); color: var(--label-2); text-decoration: none; font-size: 13px; font-variant-numeric: tabular-nums; border-radius: 6px; }
a.rd-pick:hover { background: var(--fill-3); }
a.rd-pick:hover .rd-st { color: var(--label); }
.rd-pick > :nth-child(n+3) { text-align: right; }
.rd-pick-head { padding-top: 0; font-size: 10.5px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--label-3); }
.rd-date { color: var(--label-3); font-size: 12.5px; }
.rd-st { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--label-2); }
.rd-ret { display: flex; flex-direction: column; align-items: flex-end; line-height: 1.2; }
.rd-ret small { font-size: 11px; font-weight: 500; color: var(--label-3); }
.rd-odds { display: flex; flex-direction: column; align-items: flex-end; line-height: 1.2; }
.rd-odds small { font-size: 11px; color: var(--label-3); white-space: nowrap; }
.rd-all summary { cursor: pointer; font-size: 13px; font-weight: 600; color: var(--label-2); }
.rd-all[open] summary { margin-bottom: 8px; }
.rd-profile { align-self: flex-start; margin-top: -8px; font-size: 13px; font-weight: 600; color: var(--accent, var(--label)); text-decoration: none; }
/* ⓘ: a small round button that opens its note under it. */
.rc-tip { position: relative; display: inline-flex; text-transform: none; letter-spacing: 0; }
.rc-info { display: inline-grid; place-items: center; width: 16px; height: 16px; border-radius: 50%; border: 1px solid var(--sep-strong); font: italic 650 10px/1 Georgia, serif; color: var(--label-3); transition: color var(--fast), border-color var(--fast); }
.rc-info:hover, .rc-info[aria-expanded="true"] { color: var(--label); border-color: var(--label-3); }
.rc-pop { position: absolute; z-index: 30; top: calc(100% + 8px); left: -12px; width: min(380px, 80vw); padding: 12px 14px; border-radius: var(--r-md); background: linear-gradient(var(--surface-2), var(--surface-2)), var(--bg); border: 1px solid var(--sep); box-shadow: var(--shadow-float); font-size: 13px; font-weight: 400; line-height: 1.5; color: var(--label-2); text-align: left; }
.rc-pop b { color: var(--label); font-weight: 650; }
.rc-sum .rc-stat:last-child .rc-pop { left: auto; right: -12px; }
@media (max-width: 720px) {
  .rt-head, .rt-row { grid-template-columns: minmax(0, 1fr) 48px 70px 40px; column-gap: 8px; }
  .rt-row { padding: 11px 4px; font-size: 13px; }
  .rt-head { padding: 0 4px 8px; font-size: 10px; }
  .rt-roi { font-size: 14px; }
  .rt-who { gap: 10px; }
  .rt-head span:nth-child(4), .rt-head span:nth-child(5), .rt-row > :nth-child(4), .rt-row > :nth-child(5) { display: none; }
  .rd { padding: 14px 10px; gap: 22px; }
  .rd-facts { grid-template-columns: 1fr 1fr; gap: 8px; }
  .rd-row { grid-template-columns: minmax(0, 1fr) 30px 54px 54px 16px; column-gap: 8px; padding: 9px 2px; font-size: 13px; }
  .rd-row > :nth-child(5) { display: none; }
  .rd-sub { margin-left: 4px; padding-left: 8px; }
  .rd-pick { grid-template-columns: minmax(0, 1fr) 36px 58px; column-gap: 8px; padding: 8px 2px; }
  .rd-pick > :nth-child(1), .rd-pick > :nth-child(4) { display: none; }
  .rd-head, .rd-pick-head { white-space: nowrap; font-size: 9.5px; }
  .rd-st { white-space: normal; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
  .rc-tabs { gap: 18px; }
}
.rc-h .rc-tip { padding: 0; background: none; }
/* The Record laid flat: numbers on the page itself, set apart by hairlines and type, no boxes. */
.rc .rc-sum { margin-top: 28px; padding: 6px 0 28px; border-bottom: 1px solid var(--sep); }
.rc .rc-stat b { font-size: 34px; letter-spacing: -.03em; }
.rc-sort { display: flex; align-items: center; gap: 4px; margin: -4px 0 6px; overflow-x: auto; scrollbar-width: none; }
.rc-sort::-webkit-scrollbar { display: none; }
.rc-sort > small { margin-right: 10px; font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--label-3); }
.seg-ctl { display: contents; }
.seg-ctl button { flex: none; display: inline-flex; align-items: center; gap: 3px; padding: 6px 10px; border: 0; border-radius: var(--r-pill); background: none; font: inherit; font-size: 13.5px; font-weight: 550; color: var(--label-3); cursor: pointer; transition: color var(--fast), background var(--fast); }
.seg-ctl button:hover { color: var(--label-2); }
.seg-ctl button.on { color: var(--label); background: var(--fill-3); }
.seg-ctl button i, .rt-head button i { font-style: normal; font-size: 11px; opacity: .8; }
.rt-head, .rt-row { grid-template-columns: minmax(0, 1fr) 100px 84px 92px 60px 96px 100px; column-gap: 14px; }
.rt-head { padding: 12px 4px 10px; }
.rt-head button { padding: 0; border: 0; background: none; font: inherit; letter-spacing: inherit; text-transform: inherit; color: inherit; text-align: right; cursor: pointer; transition: color var(--fast); }
.rt-head button:hover, .rt-head button.on { color: var(--label); }
.rt-row, button.rt-row { padding: 16px 4px; border-radius: 0; }
.rt-row:hover { background: none; }
.rt-row:hover .rt-who b { color: var(--accent); }
.rt-who b { font-size: 15px; transition: color var(--fast); }
.rt-yr { font: 750 18px/1 var(--font-display); letter-spacing: -.01em; }
.rt-row .rt-yr.up { color: var(--good); }
.rt-row .rt-yr.down { color: var(--bad); }
.rt-risk { display: inline-flex !important; align-items: center; justify-content: flex-end; gap: 7px; }
.lvl { display: inline-block; flex: none; width: 7px; height: 7px; border-radius: 50%; background: var(--neutral); }
.lvl.low { background: var(--good); }
.lvl.mid { background: #ffb340; }
.lvl.high { background: var(--bad); }
.rt-last { display: inline-flex; align-items: center; justify-content: flex-end; gap: 10px; }
.rt-chev { width: 15px; height: 15px; flex: none; fill: none; stroke: var(--label-3); stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; transition: transform var(--med) var(--ease); }
.rt-row[aria-expanded="true"] { background: none; border-bottom-color: transparent; }
.rt-row[aria-expanded="true"] .rt-chev { transform: rotate(180deg); stroke: var(--label); }
.rt-item[hidden], .rd[hidden], .rd-sub[hidden], .rd-rest[hidden] { display: none; }
.rt-more { display: block; margin: 14px auto 0; }
/* A caller opened up: the same flat page, indented under their row and closed off by a hairline. */
.rd { gap: 30px; margin: 0; padding: 4px 4px 30px; border-radius: 0; background: none; border-bottom: 1px solid var(--sep); animation: rise var(--med) var(--ease); }
.rd-bar { display: flex; align-items: center; justify-content: space-between; }
.rd-bar .rd-profile { margin: 0; }
.rd-close { display: grid; place-items: center; width: 28px; height: 28px; border: 0; border-radius: 50%; background: var(--fill-3); cursor: pointer; transition: background var(--fast); }
.rd-close:hover { background: var(--fill-2); }
.rd-close svg { width: 13px; height: 13px; fill: none; stroke: var(--label-2); stroke-width: 2.4; stroke-linecap: round; }
.rd-curve-top { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: 12px; }
.rd-curve-top small, .rd-block h4 { font-size: 11px; font-weight: 650; letter-spacing: .05em; text-transform: uppercase; color: var(--label-3); }
.rd-curve-top b { font: 750 22px/1 var(--font-display); font-variant-numeric: tabular-nums; }
.rd-curve svg { display: block; width: 100%; height: 140px; overflow: visible; }
.rd-zero { stroke: var(--sep-strong); stroke-width: 1; stroke-dasharray: 3 4; vector-effect: non-scaling-stroke; }
.rd-curve-axis { display: flex; justify-content: space-between; align-items: center; margin-top: 8px; font-size: 11.5px; color: var(--label-3); font-variant-numeric: tabular-nums; }
.rd-key { display: inline-flex; align-items: center; gap: 6px; }
.rd-key i { width: 14px; height: 2.5px; border-radius: 2px; background: var(--bad); }
.rd-facts { grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 0; padding: 20px 0 0; border-top: 1px solid var(--sep); }
.rd-fact { padding: 0 16px; border-radius: 0; background: none; border-left: 1px solid var(--sep); }
.rd-fact:first-child { padding-left: 0; border-left: 0; }
.rd-fact b { display: flex; align-items: center; gap: 8px; font-size: 20px; }
.rd-fact span { white-space: normal; }
.rd-block { padding: 0; background: none; }
.rd-block h4 { margin-bottom: 8px; }
.rd-collapse { align-self: center; display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; border: 0; border-radius: var(--r-pill); background: none; font: inherit; font-size: 13px; font-weight: 600; color: var(--label-3); cursor: pointer; transition: color var(--fast); }
.rd-collapse:hover { color: var(--label); }
.rd-collapse svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
@media (max-width: 1000px) and (min-width: 721px) {
  .rd-facts { grid-template-columns: repeat(3, minmax(0, 1fr)); row-gap: 18px; }
  .rd-fact:nth-child(4) { padding-left: 0; border-left: 0; }
}
@media (max-width: 720px) {
  .rc .rc-sum { padding: 0 0 22px; }
  .rc .rc-stat b { font-size: 26px; }
  .rc-sort { margin: 0 -16px 4px; padding: 0 16px; }
  .rc-sort > small { display: none; }
  .rt-head, .rt-row { grid-template-columns: minmax(0, 1fr) 66px 58px 44px; column-gap: 6px; }
  .rt-head { padding: 10px 0 8px; white-space: nowrap; font-size: 9.5px; }
  .rt-row, button.rt-row { padding: 13px 0; }
  .rt-head > :nth-child(3), .rt-head > :nth-child(4), .rt-head > :nth-child(5), .rt-row > :nth-child(3), .rt-row > :nth-child(4), .rt-row > :nth-child(5) { display: none; }
  .rt-who { gap: 9px; }
  .rt-who .av { width: 30px !important; height: 30px !important; }
  .rt-yr { font-size: 15px; }
  .rt-risk { gap: 5px; font-size: 12.5px; }
  .rt-chev { display: none; }
  .rd { padding: 0 0 22px; gap: 22px; }
  .rd-facts { grid-template-columns: 1fr 1fr; row-gap: 16px; padding-top: 16px; }
  .rd-fact { padding: 0 0 0 14px; }
  .rd-fact:nth-child(odd) { padding-left: 0; border-left: 0; }
  .rd-fact b { font-size: 17px; }
  .rd-curve svg { height: 100px; }
}

/* A profile's Coming up: a flat list, each live call with its logo, when it was called, the time left, and a hairline
   of how much of its window has gone. */
.pf-up h4 { margin-bottom: 4px; }
.pu-n { padding: 1px 7px; border-radius: var(--r-pill); background: var(--fill-2); font-size: 11px; font-weight: 650; color: var(--label-2); }
.pu-row { position: relative; display: grid; grid-template-columns: 28px minmax(0, 1fr) auto; align-items: center; gap: 12px; }
.pu-ic { display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; background: var(--fill-3); overflow: hidden; }
.pu-ic img, .pu-ic .lg { width: 28px; height: 28px; }
.pu-row > span { flex: none; white-space: normal; overflow: visible; }
.pu-body { display: flex; flex-direction: column; gap: 3px; min-width: 0; overflow: hidden !important; }
.pu-body b { font-size: 13.5px; font-weight: 600; line-height: 1.3; color: var(--label); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; transition: color var(--fast); }
.pu-body small { font-size: 11.5px; color: var(--label-3); font-variant-numeric: tabular-nums; }
.pu-when { display: flex; flex-direction: column; align-items: flex-end; line-height: 1; }
.pu-when b { font: 700 17px/1 var(--font-display); color: var(--label); font-variant-numeric: tabular-nums; }
.pu-when small { margin-top: 3px; font-size: 10.5px; font-weight: 600; letter-spacing: .03em; text-transform: uppercase; color: var(--label-3); }
.pu-when.soon b { color: var(--live); }
.pu-bar { position: absolute; left: 40px; right: 0; bottom: 0; height: 2px; border-radius: 2px; background: var(--fill-3); overflow: hidden; }
.pu-bar::after { content: ""; position: absolute; inset: 0 auto 0 0; width: var(--p); border-radius: 2px; background: var(--live); opacity: .75; }
@media (min-width: 721px) {
  .pf-rail .pf-up .pu-row { margin: 0; padding: 13px 0 15px; border-radius: 0; background: none; border-bottom: 1px solid var(--sep); }
  .pf-rail .pf-up .pu-row:last-child { border-bottom: 0; }
  .pf-rail .pf-up .pu-row:hover { background: none; }
  .pf-rail .pf-up .pu-row:hover .pu-body b { color: var(--accent); }
  .pf-up .pu-row .pu-bar { bottom: -1px; }
}
@media (max-width: 720px) {
  .pf-up .pu-row { display: grid; align-items: start; padding: 12px 12px 14px; overflow: hidden; }
  .pf-up .pu-row > span { display: flex; flex-basis: auto; -webkit-line-clamp: unset; white-space: normal; }
  .pf-up .pu-row .pu-ic { display: grid; }
  .pf-up .pu-row small { flex-basis: auto; padding-left: 0; }
  .pu-bar { left: 12px; right: 12px; bottom: 6px; }
}
/* A profile's Returns tab: each topic's record, then its breakdown, laid flat like the Record page. */
.pr .pr-cat + .pr-cat { margin-top: 44px; }
.pr .rc-h { margin: 18px 0 6px; }
.pr .rc-h em { margin-left: 6px; font-style: normal; font-weight: 500; letter-spacing: 0; text-transform: none; color: var(--label-3); font-size: 12.5px; }
.pr .pr-sum { grid-template-columns: repeat(5, minmax(0, 1fr)); margin-top: 6px; }
.pr .pr-sum .rc-stat b { display: flex; align-items: center; gap: 8px; font-size: 26px; }
.pr .pr-rd { padding: 26px 0 0; border-bottom: 0; animation: none; }
.pr-note { margin: 36px 0 0; font-size: 12.5px; line-height: 1.55; color: var(--label-3); }
@media (min-width: 721px) { .pr .rd-facts { grid-template-columns: repeat(3, minmax(0, 1fr)); row-gap: 20px; } .pr .rd-fact:nth-child(4) { padding-left: 0; border-left: 0; } }
@media (max-width: 720px) {
  .pr .pr-sum { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 16px; }
  .pr .pr-sum .rc-stat { padding: 0 0 0 14px; }
  .pr .pr-sum .rc-stat:nth-child(odd) { padding-left: 0; border-left: 0; }
  .pr .pr-sum .rc-stat b { font-size: 21px; }
  .pr .rc-h { flex-wrap: wrap; }
}
/* Latest predictions: a settled call shows its verdict where the time left would be. */
.pu-when.right b { color: var(--good); font-size: 15px; }
.pu-when.wrong b { color: var(--bad); font-size: 15px; }
.pu-all { padding: 0; border: 0; background: none; font: inherit; font-size: 12px; font-weight: 600; color: var(--accent); cursor: pointer; }
.pu-all:hover { text-decoration: underline; }
/* Latest trades: the side a call takes, and how following it has done so far. */
.pu-side { margin-right: 6px; padding: 1px 6px; border-radius: 5px; font-style: normal; font-size: 10.5px; font-weight: 700; letter-spacing: .03em; text-transform: uppercase; color: var(--label-2); background: var(--fill-2); }
.pu-side.up { color: var(--good); background: var(--good-bg); }
.pu-side.down { color: var(--bad); background: var(--bad-bg); }
.pu-body small .up { color: var(--good); font-weight: 600; }
.pu-body small .down { color: var(--bad); font-weight: 600; }
/* Full width: a button at the end of a profile's tabs folds the side column away so the tab takes the page. */
.pf-wide { flex: none; display: grid; place-items: center; width: 30px; height: 30px; margin-left: 10px; border: 0; border-radius: 8px; background: none; color: var(--label-3); cursor: pointer; transition: background var(--fast), color var(--fast); }
.pf-wide:hover, .pf-wide[aria-pressed="true"] { background: var(--fill-3); color: var(--label); }
.pf-wide svg { width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.pf-wide .i, .pf-wide[aria-pressed="true"] .o { display: none; }
.pf-wide[aria-pressed="true"] .i { display: inline; }
.layout.profile.wide { grid-template-columns: minmax(0, 1fr) !important; }
.layout.profile.wide .pf-rail { display: none; }
@media (max-width: 720px) { .pf-wide { display: none; } }
.pr-title { display: flex; align-items: center; gap: 8px; }
.pr-title img, .pr-title .lg { width: 18px; height: 18px; border-radius: 50%; }
/* A profile's filter, on one line: asset class, then menus for a sector and a ticker. It offers only what the tab holds. */
.pf-filter { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; margin-top: 22px; }
.pf-menu { position: relative; display: inline-flex; align-items: center; height: 32px; border-radius: 9px; background: var(--fill-2); transition: background var(--fast); }
.pf-menu:hover { background: var(--fill); }
.pf-menu.on { background: color-mix(in srgb, var(--accent) 18%, var(--fill-2)); }
.pf-menu select { height: 100%; max-width: 220px; padding: 0 30px 0 12px; border: 0; background: none; font: inherit; font-size: 13px; font-weight: 550; color: var(--label-2); cursor: pointer; appearance: none; -webkit-appearance: none; text-overflow: ellipsis; }
.pf-menu.on select { color: var(--label); font-weight: 600; }
.pf-menu select:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; border-radius: 9px; }
.pf-menu select option { background: var(--surface-2); color: var(--label); }
.pf-menu svg { position: absolute; right: 10px; width: 13px; height: 13px; fill: none; stroke: var(--label-3); stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; pointer-events: none; }
@media (max-width: 720px) {
  .pf-filter { flex-wrap: nowrap; overflow-x: auto; margin: 16px -16px 0; padding: 0 16px; scrollbar-width: none; }
  .pf-filter::-webkit-scrollbar { display: none; }
  .pf-filter > * { flex: none; }
  .pf-menu select { max-width: 160px; }
}
/* The profile filter, quieter: asset classes as plain words, the menus as words with a chevron, no boxes. */
.pf-filter { gap: 0; margin-top: 24px; }
.pf-filter .mini-seg { gap: 20px; padding: 0; border-radius: 0; background: none; }
.pf-filter .mini-seg button { height: auto; padding: 4px 0; border-radius: 0; background: none; box-shadow: none; font-size: 14px; font-weight: 550; color: var(--label-3); }
.pf-filter .mini-seg button:hover { color: var(--label-2); }
.pf-filter .mini-seg button.on { background: none; box-shadow: none; color: var(--label); font-weight: 650; }
.pf-filter .mini-seg + .pf-menu, .pf-filter .pf-menu + .pf-menu { margin-left: 22px; padding-left: 22px; border-left: 1px solid var(--sep-strong); border-radius: 0; }
.pf-filter .pf-menu { height: auto; background: none; }
.pf-filter .pf-menu:hover, .pf-filter .pf-menu.on { background: none; }
.pf-filter .pf-menu select { height: auto; padding: 4px 20px 4px 0; font-size: 14px; color: var(--label-3); }
.pf-filter .pf-menu:hover select { color: var(--label-2); }
.pf-filter .pf-menu.on select { color: var(--label); }
.pf-filter .pf-menu svg { right: 0; }
@media (max-width: 720px) {
  .pf-filter .mini-seg { gap: 16px; }
  .pf-filter .mini-seg + .pf-menu, .pf-filter .pf-menu + .pf-menu { margin-left: 16px; padding-left: 16px; }
}
/* Overview: the verdict in a word and a sentence, the four numbers that prove it, then where the edge is and the calls. */
.ov-head { padding: 24px 0 26px; border-bottom: 1px solid var(--sep); }
.ov-verdict { display: inline-flex; align-items: center; gap: 12px; }
.ov-verdict i { width: 11px; height: 11px; border-radius: 50%; background: var(--neutral); }
.ov-verdict b { font: 800 32px/1.1 var(--font-display); letter-spacing: -.03em; color: var(--label); }
.ov-verdict.good i { background: var(--good); box-shadow: 0 0 0 5px var(--good-bg); }
.ov-verdict.bad i { background: var(--bad); box-shadow: 0 0 0 5px var(--bad-bg); }
.ov-verdict.live i { background: var(--live); box-shadow: 0 0 0 5px var(--live-bg); }
.ov-head p { max-width: 700px; margin: 12px 0 0; font-size: 16px; line-height: 1.55; color: var(--label-2); }
.ov-head p b.up { color: var(--good); } .ov-head p b.down { color: var(--bad); }
.ov-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); padding: 24px 0; border-bottom: 1px solid var(--sep); }
.ov-stat { display: flex; flex-direction: column; gap: 4px; min-width: 0; padding: 0 20px; border-left: 1px solid var(--sep); }
.ov-stat:first-child { padding-left: 0; border-left: 0; }
.ov-stat small, .ov h4 { font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--label-3); }
.ov-stat b { display: flex; align-items: center; gap: 8px; font: 800 28px/1.1 var(--font-display); letter-spacing: -.02em; font-variant-numeric: tabular-nums; color: var(--label); }
.ov-stat b.up { color: var(--good); } .ov-stat b.down { color: var(--bad); }
.ov-stat span { font-size: 12.5px; color: var(--label-3); }
.ov h4 { margin: 0 0 10px; }
.ov-two { display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); gap: 44px; padding: 26px 0; border-bottom: 1px solid var(--sep); }
.ov-proof { grid-template-columns: 1fr 1fr; }
.ov-curve .rd-curve svg { height: 150px; }
.ov-call { display: grid; grid-template-columns: 24px minmax(0, 1fr) auto; align-items: center; gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--sep); color: var(--label); text-decoration: none; }
.ov-call:last-child { border-bottom: 0; }
.ov-call .pu-ic { width: 24px; height: 24px; }
.ov-call .pu-ic img, .ov-call .pu-ic .lg { width: 24px; height: 24px; }
.ov-call-st { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.ov-call-st b { font-size: 13.5px; font-weight: 600; line-height: 1.3; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; transition: color var(--fast); }
.ov-call:hover .ov-call-st b { color: var(--accent); }
.ov-call-st small { font-size: 11.5px; color: var(--label-3); }
.ov-call > b { font: 700 15px/1 var(--font-display); font-variant-numeric: tabular-nums; }
.ov-call > b.up { color: var(--good); } .ov-call > b.down { color: var(--bad); }
.ov-more { margin-top: 20px; padding: 0; border: 0; background: none; font: inherit; font-size: 14px; font-weight: 600; color: var(--accent); cursor: pointer; }
.ov-more:hover { text-decoration: underline; }
.ov-cred { margin-top: 30px; }
.ov-cred .ov-stats { padding-top: 6px; border-bottom: 0; }
@media (max-width: 720px) {
  .ov-verdict b { font-size: 26px; }
  .ov-head p { font-size: 15px; }
  .ov-stats { grid-template-columns: 1fr 1fr; row-gap: 18px; }
  .ov-stat { padding: 0 0 0 14px; }
  .ov-stat:nth-child(odd) { padding-left: 0; border-left: 0; }
  .ov-stat b { font-size: 23px; }
  .ov-two, .ov-proof { grid-template-columns: 1fr; gap: 26px; }
}
/* Inside Posts: which posts, as a quiet row of words under the tabs, and how to sort live calls at its end. */
.pf-views { display: flex; align-items: center; gap: 16px; margin: 14px 0 4px; }
.pf-views-l { display: flex; gap: 4px; min-width: 0; overflow-x: auto; scrollbar-width: none; }
.pf-views-l::-webkit-scrollbar { display: none; }
.pf-views-l button { flex: none; padding: 5px 11px; border: 0; border-radius: var(--r-pill); background: none; font: inherit; font-size: 13.5px; font-weight: 550; color: var(--label-3); cursor: pointer; transition: color var(--fast), background var(--fast); }
.pf-views-l button:hover { color: var(--label-2); }
.pf-views-l button.on { background: var(--fill-3); color: var(--label); }
.pf-views .pf-menu { flex: none; margin-left: auto; height: auto; background: none; }
.pf-views .pf-menu select { height: auto; padding: 5px 20px 5px 0; font-size: 13.5px; color: var(--label-2); }
.pf-views .pf-menu svg { right: 0; }
@media (max-width: 720px) {
  .pf-views { margin: 10px -16px 2px; padding: 0 16px; gap: 10px; }
  .pf-views-l button:first-child { padding-left: 0; }
  .pf-views-l button.on:first-child { padding-left: 11px; }
}
/* The sector and ticker picker: two quiet buttons that show what's picked, opening one panel of sectors and tickers. */
.pf-pick { position: relative; display: flex; align-items: center; gap: 6px; }
.pf-filter .mini-seg + .pf-pick { margin-left: 22px; padding-left: 22px; border-left: 1px solid var(--sep-strong); }
.pf-trig { display: inline-flex; align-items: center; gap: 8px; height: 34px; padding: 0 10px 0 12px; border: 0; border-radius: 10px; background: none; font: inherit; font-size: 14px; font-weight: 550; color: var(--label-2); cursor: pointer; transition: background var(--fast), color var(--fast); }
.pf-trig:hover { background: var(--fill-3); color: var(--label); }
.pf-trig.on { background: var(--fill-3); color: var(--label); font-weight: 650; }
.pf-trig .sx-ic { width: 22px; height: 22px; }
.pf-trig .pf-logo, .pf-trig .pf-logo img, .pf-trig .pf-logo .lg { width: 18px; height: 18px; border-radius: 50%; }
.pf-chev { width: 13px; height: 13px; fill: none; stroke: var(--label-3); stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.pf-clr { display: grid; place-items: center; width: 26px; height: 26px; border: 0; border-radius: 50%; background: var(--fill-3); cursor: pointer; }
.pf-clr:hover { background: var(--fill-2); }
.pf-clr svg { width: 12px; height: 12px; fill: none; stroke: var(--label-2); stroke-width: 2.6; stroke-linecap: round; }
.sx-ic { display: inline-grid; place-items: center; flex: none; width: 26px; height: 26px; border-radius: 8px; background: color-mix(in srgb, var(--c) 18%, transparent); }
.sx-ic svg { width: 15px; height: 15px; fill: none; stroke: var(--c); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.pf-pop { position: absolute; z-index: 40; top: calc(100% + 8px); left: 0; width: min(620px, calc(100vw - 32px)); padding: 10px; border: 1px solid var(--sep); border-radius: 16px; background: var(--surface-2); box-shadow: var(--shadow-float), 0 0 0 1px rgba(0, 0, 0, .3); animation: pf-pop var(--fast) var(--ease); }
.pf-pop[hidden] { display: none; }
.pf-filter .mini-seg + .pf-pick .pf-pop { left: 10px; }
@keyframes pf-pop { from { opacity: 0; transform: translateY(-4px) scale(.98); } }
.pf-search { display: flex; align-items: center; gap: 8px; height: 38px; padding: 0 12px; border-radius: 10px; background: var(--fill-3); }
.pf-search svg { width: 16px; height: 16px; flex: none; fill: none; stroke: var(--label-3); stroke-width: 2.2; stroke-linecap: round; }
.pf-search input { flex: 1; min-width: 0; border: 0; outline: 0; background: none; font: inherit; font-size: 14px; color: var(--label); }
.pf-search input::placeholder { color: var(--label-3); }
.pf-cols { display: grid; grid-template-columns: 220px minmax(0, 1fr); gap: 8px; margin-top: 8px; }
.pf-cols.one { grid-template-columns: minmax(0, 1fr); }
.pf-col { display: flex; flex-direction: column; gap: 1px; max-height: 360px; overflow-y: auto; scrollbar-width: thin; }
.pf-secs { padding-right: 8px; border-right: 1px solid var(--sep); }
.pf-col > small { position: sticky; top: 0; z-index: 1; padding: 6px 8px 6px; font-size: 10.5px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--label-3); background: var(--surface-2); }
.pf-row { display: flex; align-items: center; gap: 10px; width: 100%; min-height: 40px; padding: 6px 8px; border: 0; border-radius: 9px; background: none; font: inherit; font-size: 13.5px; font-weight: 550; color: var(--label-2); text-align: left; cursor: pointer; transition: background var(--fast), color var(--fast); }
.pf-row[hidden] { display: none; }
.pf-row:hover { background: var(--fill-3); color: var(--label); }
.pf-row.on { background: color-mix(in srgb, var(--accent) 16%, transparent); color: var(--label); }
.pf-row > span:not(.sx-ic):not(.pf-logo) { display: flex; flex-direction: column; flex: 1; min-width: 0; }
.pf-row b { font-weight: 650; color: var(--label); }
.pf-row small { font-size: 11.5px; font-weight: 450; color: var(--label-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pf-row em { flex: none; margin-left: auto; font-style: normal; font-size: 12px; font-weight: 600; color: var(--label-3); font-variant-numeric: tabular-nums; }
.pf-logo { display: grid; place-items: center; flex: none; width: 26px; height: 26px; border-radius: 50%; overflow: hidden; }
.pf-logo img, .pf-logo .lg { width: 26px; height: 26px; border-radius: 50%; }
.pf-logo .sx-ic { width: 26px; height: 26px; }
.pf-none { padding: 18px 8px; font-size: 13px; color: var(--label-3); }
@media (max-width: 720px) {
  .pf-filter { overflow: visible; flex-wrap: wrap; row-gap: 8px; }
  .pf-filter .mini-seg + .pf-pick { margin-left: 0; padding-left: 0; border-left: 0; }
  .pf-pick { position: static; }
  .pf-pop { position: fixed; z-index: 200; left: 8px !important; right: 8px; top: auto; bottom: 8px; width: auto; max-height: 82vh; display: flex; flex-direction: column; border-radius: 20px; }
  .pf-pop[hidden] { display: none; }
  .pf-cols { grid-template-columns: 148px minmax(0, 1fr); flex: 1; min-height: 0; }
  .pf-secs .pf-row { gap: 8px; padding: 6px; }
  .pf-secs .pf-row em { display: none; }
  .pf-secs .sx-ic { width: 24px; height: 24px; }
  .pf-col { max-height: 60vh; }
  .pf-secs .pf-row span { font-size: 12.5px; line-height: 1.25; }
}
/* The filter row sits above what follows it, so its picker panel isn't painted over by the page below. */
.pf-filter { position: relative; z-index: 30; }
/* Multi-pick: a check on each row picked, a footer to clear or finish, and the button's stack of picked icons. */
.pf-check { display: grid; place-items: center; flex: none; width: 18px; height: 18px; margin-left: 6px; border-radius: 50%; box-shadow: inset 0 0 0 1.5px var(--sep-strong); transition: background var(--fast), box-shadow var(--fast); }
.pf-check svg { width: 12px; height: 12px; fill: none; stroke: #fff; stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; opacity: 0; }
.pf-row.on .pf-check { background: var(--accent); box-shadow: none; }
.pf-row.on .pf-check svg { opacity: 1; }
.pf-row em + .pf-check { margin-left: 10px; }
.pf-foot { display: flex; align-items: center; gap: 12px; margin-top: 8px; padding: 10px 4px 2px; border-top: 1px solid var(--sep); }
.pf-foot span { flex: 1; font-size: 12.5px; color: var(--label-3); text-align: right; }
.pf-reset { padding: 0; border: 0; background: none; font: inherit; font-size: 13px; font-weight: 600; color: var(--label-2); cursor: pointer; }
.pf-reset:hover { color: var(--label); }
.pf-done { padding: 7px 18px; border: 0; border-radius: var(--r-pill); background: var(--accent); font: inherit; font-size: 13.5px; font-weight: 650; color: #fff; cursor: pointer; }
.pf-done:hover { filter: brightness(1.1); }
.pf-trig { padding: 0 14px 0 10px; }
.pf-trig em { font-style: normal; font-weight: 600; color: var(--label-3); }
.pf-funnel { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linejoin: round; }
.pf-icons { display: inline-flex; }
.pf-icons > * + * { margin-left: -6px; }
.pf-icons .pf-logo, .pf-icons .sx-ic { width: 20px; height: 20px; border-radius: 50%; box-shadow: 0 0 0 2px var(--bg); }
.pf-icons .pf-logo img, .pf-icons .pf-logo .lg { width: 20px; height: 20px; }
.pf-icons .sx-ic svg { width: 12px; height: 12px; }
/* Overview, denser: the verdict beside its four numbers, the chart of every call, then three columns of where the edge is. */
.ov-head.with-side { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: 36px; align-items: center; }
.ov-say p { margin-top: 10px; font-size: 15px; }
.ov-quad { display: grid; grid-template-columns: 1fr 1fr; gap: 18px 0; }
.ov-quad .ov-stat:nth-child(odd) { padding-left: 0; border-left: 0; }
.ov-m b { font-size: 26px; }
.ov-bar { position: relative; display: block; height: 3px; margin: 4px 0 2px; border-radius: 3px; background: var(--fill-2); overflow: hidden; }
.ov-bar > i { position: absolute; inset: 0 auto 0 0; border-radius: 3px; background: var(--label-2); }
.ov-bar.up > i { background: var(--good); } .ov-bar.down > i { background: var(--bad); }
.ov-bar.risk-low > i { background: var(--good); } .ov-bar.risk-mid > i { background: #ffb340; } .ov-bar.risk-high > i { background: var(--bad); }
.ov-chart-wrap { padding: 22px 0 6px; border-bottom: 1px solid var(--sep); }
.ov-chart-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-bottom: 6px; }
.ov-chart-head h4 { margin: 0; }
.ov-legend { display: inline-flex; align-items: center; gap: 6px; font-size: 11.5px; color: var(--label-3); }
.ov-legend i { display: inline-block; width: 8px; height: 8px; margin-left: 6px; border-radius: 50%; }
.ov-legend i.up { background: var(--good); } .ov-legend i.down { background: var(--bad); }
.ov-legend i.dd { width: 12px; border-radius: 2px; background: color-mix(in srgb, var(--bad) 22%, transparent); }
.ov-legend em { font-style: normal; opacity: .8; }
.ov-chart { position: relative; width: 100%; }
.ov-chart svg { display: block; overflow: visible; cursor: crosshair; }
.ov-dd { fill: color-mix(in srgb, var(--bad) 9%, transparent); }
.ov-zero { stroke: var(--sep-strong); stroke-dasharray: 3 4; }
.ov-grid-l { stroke: var(--sep); }
.ov-ax { font-size: 11px; fill: var(--label-3); text-anchor: middle; font-variant-numeric: tabular-nums; }
.ov-ax-r { text-anchor: start; font-weight: 600; }
.ov-ax-r.up { fill: var(--good); } .ov-ax-r.down { fill: var(--bad); }
.ov-rug { stroke: var(--label-3); stroke-width: 1; opacity: .5; }
.ov-dot { stroke: var(--bg); stroke-width: 1.5; cursor: pointer; transition: r var(--fast), stroke-width var(--fast); }
.ov-dot.up { fill: var(--good); } .ov-dot.down { fill: var(--bad); }
.ov-dot.hot { stroke: var(--label); stroke-width: 2.5; }
.ov-cross { stroke: var(--label-3); stroke-dasharray: 2 3; pointer-events: none; }
.ov-tip { position: absolute; z-index: 5; width: 270px; padding: 10px 12px; border: 1px solid var(--sep); border-radius: 12px; background: var(--surface-2); box-shadow: var(--shadow-float); pointer-events: none; }
.ov-tip-h { display: flex; align-items: flex-start; gap: 8px; margin-bottom: 6px; }
.ov-tip-h .pf-logo, .ov-tip-h .pf-logo img, .ov-tip-h .pf-logo .lg { width: 20px; height: 20px; }
.ov-tip-h b { font-size: 13px; line-height: 1.3; color: var(--label); }
.ov-tip-r { display: flex; justify-content: space-between; gap: 10px; font-size: 12px; color: var(--label-3); }
.ov-tip-r b { font-variant-numeric: tabular-nums; }
.ov-tip-r b.up { color: var(--good); } .ov-tip-r b.down { color: var(--bad); }
.ov-grid { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr) minmax(0, 1fr); border-bottom: 1px solid var(--sep); }
.ov-card { min-width: 0; padding: 22px 22px 20px; border-left: 1px solid var(--sep); }
.ov-card:first-child { padding-left: 0; border-left: 0; }
.ov-card:last-child { padding-right: 0; }
.ov-card h4 { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; }
.ov-card h4 small { font-size: 10.5px; font-weight: 500; letter-spacing: 0; text-transform: none; color: var(--label-3); }
.ov-hb { display: grid; grid-template-columns: minmax(0, 1fr) 54px 46px 18px; align-items: center; gap: 8px; padding: 6px 0; font-size: 12.5px; }
.ov-hb-l { display: flex; align-items: center; gap: 8px; min-width: 0; color: var(--label-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ov-hb-l .sx-ic { width: 20px; height: 20px; border-radius: 6px; }
.ov-hb-l .sx-ic svg { width: 12px; height: 12px; }
.ov-hb-l .pf-logo, .ov-hb-l .pf-logo img, .ov-hb-l .pf-logo .lg { width: 18px; height: 18px; }
.ov-hb-t { position: relative; height: 6px; border-radius: 3px; background: var(--fill-3); }
.ov-hb-t::before { content: ""; position: absolute; left: 50%; top: -3px; bottom: -3px; width: 1px; background: var(--sep-strong); }
.ov-hb-t i { position: absolute; top: 0; bottom: 0; border-radius: 3px; }
.ov-hb-t i.up { left: 50%; background: var(--good); } .ov-hb-t i.down { right: 50%; background: var(--bad); }
.ov-hb > b { text-align: right; font-weight: 650; font-variant-numeric: tabular-nums; }
.ov-hb > b.up { color: var(--good); } .ov-hb > b.down { color: var(--bad); }
.ov-hb > small { text-align: right; color: var(--label-3); font-variant-numeric: tabular-nums; }
.ov-months { display: grid; grid-template-columns: repeat(auto-fill, minmax(58px, 1fr)); gap: 6px; }
.ov-mo { display: flex; flex-direction: column; gap: 2px; padding: 8px 8px 7px; border-radius: 8px; background: color-mix(in srgb, var(--good) calc(var(--a) * 100%), transparent); }
.ov-mo.down { background: color-mix(in srgb, var(--bad) calc(var(--a) * 100%), transparent); }
.ov-mo small { font-size: 10.5px; font-weight: 650; text-transform: uppercase; letter-spacing: .04em; color: color-mix(in srgb, var(--label) 70%, transparent); }
.ov-mo b { font-size: 13px; font-weight: 700; color: var(--label); font-variant-numeric: tabular-nums; }
.ov-mo-note { margin: 10px 0 0; font-size: 12px; color: var(--label-3); }
.ov-side { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: baseline; column-gap: 10px; padding: 8px 0; border-bottom: 1px solid var(--sep); }
.ov-side:last-child { border-bottom: 0; }
.ov-side > span { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--label-2); }
.ov-side > span .pu-side { margin: 0; font-style: normal; }
.ov-side > b { font-size: 15px; font-weight: 700; color: var(--label); text-align: right; font-variant-numeric: tabular-nums; }
.ov-side > b.up { color: var(--good); } .ov-side > b.down { color: var(--bad); }
.ov-side > small { grid-column: 1 / -1; font-size: 11.5px; color: var(--label-3); }
.ov .ov-proof { padding: 22px 0; }
.ov-cred .ov-m b { font-size: 24px; }
@media (max-width: 1000px) {
  .ov-grid { grid-template-columns: 1fr 1fr; }
  .ov-card:nth-child(3) { grid-column: 1 / -1; padding-left: 0; border-left: 0; border-top: 1px solid var(--sep); }
}
@media (max-width: 720px) {
  .ov-head.with-side { grid-template-columns: 1fr; gap: 20px; }
  .ov-quad { gap: 16px 0; }
  .ov-quad .ov-stat { padding: 0 0 0 14px; }
  .ov-quad .ov-stat:nth-child(odd) { padding-left: 0; }
  .ov-m b { font-size: 22px; }
  .ov-grid { grid-template-columns: 1fr; }
  .ov-card, .ov-card:nth-child(3) { grid-column: auto; padding: 20px 0; border-left: 0; border-top: 1px solid var(--sep); }
  .ov-card:first-child { border-top: 0; }
  .ov-tip { width: 230px; }
}

/* The chart's logos: the biggest calls' coin or stock, ringed in the color of how they went. */
.ov-logo { overflow: visible; pointer-events: none; }
.ov-logo > div { width: 24px; height: 24px; border-radius: 50%; overflow: hidden; display: grid; place-items: center; background: var(--surface-2); box-shadow: 0 0 0 2px var(--good), 0 2px 8px rgba(0, 0, 0, .5); }
.ov-logo.down > div { box-shadow: 0 0 0 2px var(--bad), 0 2px 8px rgba(0, 0, 0, .5); }
.ov-logo img, .ov-logo .lg { width: 22px; height: 22px; border-radius: 50%; }
/* A trader's Live tab: four numbers on the open book, then every open call as a bar either side of zero. */
.lv-head { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); padding: 22px 0 24px; border-bottom: 1px solid var(--sep); }
.lv-head .ov-stat:first-child { padding-left: 0; border-left: 0; }
.lv-list { padding: 22px 0 10px; border-bottom: 1px solid var(--sep); }
.lv-list-h { display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px; }
.lv-list-h h4 { margin: 0; display: flex; align-items: center; gap: 8px; }
.lv-list-h h4 small { padding: 1px 7px; border-radius: var(--r-pill); background: var(--fill-2); font-size: 11px; letter-spacing: 0; color: var(--label-2); }
.lv-list-h .pf-menu { height: auto; background: none; }
.lv-list-h .pf-menu select { height: auto; padding: 4px 20px 4px 0; font-size: 13.5px; color: var(--label-2); }
.lv-list-h .pf-menu svg { right: 0; }
.lv-cols-h, .lv-row { display: grid; grid-template-columns: 30px minmax(0, 1fr) 180px 64px 64px; align-items: center; column-gap: 14px; }
.lv-cols-h { padding: 4px 0 8px; border-bottom: 1px solid var(--sep); font-size: 10.5px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--label-3); }
.lv-cols-h > :nth-child(n+3) { text-align: right; }
.lv-cols-h .lv-bar-h { text-align: center; }
.lv-row { padding: 11px 0; border-bottom: 1px solid var(--sep); color: var(--label); text-decoration: none; }
.lv-row:last-child { border-bottom: 0; }
.lv-row:hover .lv-call b { color: var(--accent); }
.lv-row .pf-logo, .lv-row .pf-logo img, .lv-row .pf-logo .lg { width: 28px; height: 28px; }
.lv-call { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.lv-call b { font-size: 14px; font-weight: 600; line-height: 1.3; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; transition: color var(--fast); }
.lv-call small { display: flex; align-items: center; font-size: 11.5px; color: var(--label-3); }
.lv-call .pu-side { font-style: normal; }
.lv-bar { position: relative; height: 8px; border-radius: 4px; background: var(--fill-3); }
.lv-bar::before { content: ""; position: absolute; left: 50%; top: -4px; bottom: -4px; width: 1px; background: var(--sep-strong); }
.lv-bar i { position: absolute; top: 0; bottom: 0; border-radius: 4px; }
.lv-bar i.up { left: 50%; background: var(--good); } .lv-bar i.down { right: 50%; background: var(--bad); }
.lv-so { text-align: right; font: 700 15px/1 var(--font-display); font-variant-numeric: tabular-nums; color: var(--label-3); }
.lv-so.up { color: var(--good); } .lv-so.down { color: var(--bad); }
.lv-left { display: flex; flex-direction: column; align-items: flex-end; gap: 3px; line-height: 1; }
.lv-left b { font: 700 15px/1 var(--font-display); font-variant-numeric: tabular-nums; }
.lv-left small { font-size: 10px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--label-3); }
.lv-time { position: relative; display: block; width: 44px; height: 2px; margin-top: 3px; border-radius: 2px; background: var(--fill-2); overflow: hidden; }
.lv-time > i { position: absolute; inset: 0 auto 0 0; background: var(--live); }
.lv-grid { grid-template-columns: 1fr 1fr; }
.lv-grid .pu-row { margin: 0; padding: 10px 0 12px; border-radius: 0; background: none; border-bottom: 1px solid var(--sep); }
.lv-grid .pu-row:last-child { border-bottom: 0; }
@media (max-width: 720px) {
  .lv-head { grid-template-columns: 1fr 1fr; row-gap: 18px; }
  .lv-head .ov-stat { padding: 0 0 0 14px; }
  .lv-head .ov-stat:nth-child(odd) { padding-left: 0; border-left: 0; }
  .lv-cols-h, .lv-row { grid-template-columns: 26px minmax(0, 1fr) 54px 40px; column-gap: 10px; }
  .lv-cols-h > :nth-child(3), .lv-row > .lv-bar { display: none; }
  .lv-call b { white-space: normal; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
  .lv-grid { grid-template-columns: 1fr; }
}
/* The filter in the tab row: a quiet outlined pill at its end; its panel opens to the left from there. */
.tabs .pf-pick { margin-left: 12px; }
.tabs .pf-trig { height: 32px; padding: 0 14px 0 12px; border: 1px solid var(--sep-strong); border-radius: var(--r-pill); font-size: 13px; font-weight: 600; color: var(--label-2); }
.tabs .pf-trig:hover { border-color: var(--label-3); background: none; color: var(--label); }
.tabs .pf-trig.on { border-color: color-mix(in srgb, var(--accent) 55%, transparent); background: color-mix(in srgb, var(--accent) 12%, transparent); color: var(--label); }
.tabs .pf-pop { left: auto; right: 0; top: calc(100% + 10px); }
.tabs .pf-clr { width: 24px; height: 24px; }
/* Live: when the prices are from, a plain row of sorts, and each call's yearly pace. */
.lv-asof { display: flex; align-items: center; gap: 7px; margin: 16px 0 0; font-size: 12px; color: var(--label-3); }
.lv-sort { display: flex; gap: 2px; padding: 3px; border-radius: var(--r-pill); background: var(--fill-3); }
.lv-sort button { padding: 5px 12px; border: 0; border-radius: var(--r-pill); background: none; font: inherit; font-size: 12.5px; font-weight: 600; color: var(--label-3); cursor: pointer; transition: color var(--fast), background var(--fast); }
.lv-sort button:hover { color: var(--label-2); }
.lv-sort button.on { background: var(--surface-2); color: var(--label); box-shadow: 0 1px 3px rgba(0, 0, 0, .3); }
.lv-call small em { margin-left: 4px; font-style: normal; font-weight: 600; }
.lv-call small em.up { color: var(--good); } .lv-call small em.down { color: var(--bad); }
@media (max-width: 720px) {
  .lv-list-h { flex-direction: column; align-items: flex-start; gap: 10px; }
  .lv-sort { max-width: 100%; overflow-x: auto; scrollbar-width: none; }
  .lv-sort button { flex: none; }
  .tabs .pf-trig span:not(.pf-icons):not(.pf-logo) { max-width: 90px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
}
/* The Filter button reads as one: a funnel, "Filter", a dot, what it's set to, and a chevron for its panel. */
.tabs .pf-trig { gap: 7px; padding: 0 12px 0 12px; }
.pf-trig .pf-tl { color: var(--label); font-weight: 650; }
.pf-trig .pf-dot { width: 3px; height: 3px; border-radius: 50%; background: var(--label-3); }
.pf-trig .pf-tv { color: var(--label-2); font-weight: 550; max-width: 180px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pf-trig.on .pf-tv { color: var(--accent); font-weight: 650; }
.pf-trig .pf-chev { margin-left: 1px; }
.pf-trig[aria-expanded="true"] .pf-chev { transform: rotate(180deg); }
/* Asset classes at the top of the panel, one picked at a time. */
.pf-cats { display: flex; align-items: center; gap: 12px; margin-bottom: 8px; }
.pf-cats > small { flex: none; font-size: 10.5px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--label-3); }
.pf-cat-row { display: flex; gap: 2px; padding: 3px; border-radius: var(--r-pill); background: var(--fill-3); overflow-x: auto; scrollbar-width: none; }
.pf-cat-row button { flex: none; padding: 5px 12px; border: 0; border-radius: var(--r-pill); background: none; font: inherit; font-size: 12.5px; font-weight: 600; color: var(--label-3); cursor: pointer; transition: color var(--fast), background var(--fast); }
.pf-cat-row button:hover { color: var(--label-2); }
.pf-cat-row button.on { background: var(--surface); color: var(--label); box-shadow: 0 1px 3px rgba(0, 0, 0, .3); }
@media (max-width: 720px) {
  .tabs .pf-trig .pf-tl, .tabs .pf-trig .pf-dot { display: none; }
  .pf-cats { flex-direction: column; align-items: flex-start; gap: 6px; }
}
/* A short list is a small menu: one column, tighter rows, no search. */
.pf-search[hidden] { display: none; }
.pf-pop.narrow { width: 300px; padding: 6px; }
.pf-pop.narrow .pf-cols { margin-top: 0; }
.pf-pop.narrow .pf-col { max-height: 320px; }
.pf-pop.narrow .pf-col > small { padding: 6px 8px 4px; }
.pf-pop.narrow .pf-row { min-height: 36px; padding: 5px 8px; font-size: 13px; gap: 9px; }
.pf-pop.narrow .pf-logo, .pf-pop.narrow .pf-logo img, .pf-pop.narrow .pf-logo .lg { width: 22px; height: 22px; }
.pf-pop.narrow .pf-check { width: 16px; height: 16px; }
.pf-pop.narrow .pf-foot { margin-top: 4px; padding: 8px 6px 2px; }
.pf-pop.narrow .pf-done { padding: 6px 16px; font-size: 13px; }
.pf-pop.narrow .pf-cats { padding: 4px 4px 0; flex-direction: column; align-items: flex-start; gap: 6px; }
/* People: a bettor's or trader's return a year beside their Cred score (an empty slot keeps the column for everyone). */
.row-item:has(.ppl-roi) { grid-template-columns: 26px 40px minmax(0, 1fr) auto 84px auto; }
.ppl-roi { display: flex; flex-direction: column; align-items: flex-end; line-height: 1.05; font-variant-numeric: tabular-nums; }
.ppl-roi b { font: 750 16px/1.1 var(--font-display); letter-spacing: -.01em; }
.ppl-roi.up b { color: var(--good); } .ppl-roi.down b { color: var(--bad); }
.ppl-roi small { font-size: 10.5px; font-weight: 600; letter-spacing: .03em; text-transform: uppercase; color: var(--label-3); }
@media (max-width: 720px) {
  .row-item:has(.ppl-roi) { grid-template-columns: 20px 36px minmax(0, 1fr) auto 52px auto; gap: 8px; }
  .ppl-roi b { font-size: 14px; }
}
/* What someone is: small tinted badges under their name. */
.pf-badges { display: flex; flex-wrap: wrap; gap: 6px; margin: 8px 0 6px; }
.pf-badge-k { display: inline-flex; align-items: center; gap: 6px; height: 26px; padding: 0 10px 0 8px; border-radius: var(--r-pill); background: color-mix(in srgb, var(--c) 14%, transparent); color: color-mix(in srgb, var(--c) 80%, var(--label)); font-size: 12.5px; font-weight: 650; letter-spacing: .01em; }
.pf-badge-k svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
/* The read on a coin or stock: one line above its calls, which way the evidence leans and why. */
.mr-line { display: flex; align-items: baseline; gap: 10px; margin: 4px 0 6px; padding: 12px 2px 0; font-size: 14px; line-height: 1.45; }
.mr-line > i { flex: none; align-self: center; width: 8px; height: 8px; border-radius: 50%; background: var(--neutral); }
.mr-line.up > i { background: var(--good); box-shadow: 0 0 0 4px var(--good-bg); } .mr-line.down > i { background: var(--bad); box-shadow: 0 0 0 4px var(--bad-bg); }
.mr-line > b { flex: none; font-weight: 750; color: var(--label); }
.mr-line.up > b { color: var(--good); } .mr-line.down > b { color: var(--bad); }
.mr-line > span { min-width: 0; color: var(--label-2); }
.mr-pro { flex: none; display: inline-flex; align-items: center; gap: 5px; margin-left: auto; padding: 0; border: 0; background: none; font: inherit; font-size: 12.5px; font-weight: 600; color: var(--accent); cursor: pointer; }
.mr-pro svg { width: 12px; height: 12px; }
@media (max-width: 720px) { .mr-line { flex-wrap: wrap; row-gap: 2px; font-size: 13.5px; } .mr-line > span { flex-basis: calc(100% - 18px); margin-left: 18px; } }
.mr-ctx { margin: 0 0 12px; padding: 0 2px 14px 20px; border-bottom: 1px solid var(--sep); font-size: 13px; line-height: 1.55; color: var(--label-3); }
.mr-ctx:empty { display: none; }
@media (max-width: 720px) { .mr-ctx { margin-left: 18px; } }
/* From the best callers on a coin or stock: their record on it above each open call, and the quiet ones in a line each. */
.pk-best-h span { color: var(--label-2); }
.pk-best-rec { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 10px 16px 0; font-size: 11.5px; font-weight: 650; letter-spacing: .03em; text-transform: uppercase; color: var(--good); }
.pk-best-rec a { font-weight: 600; letter-spacing: 0; text-transform: none; color: var(--accent); text-decoration: none; }
.pk-best-rec a:hover { text-decoration: underline; }
.pk-quiets { display: flex; flex-direction: column; padding: 4px 0 8px; }
.pk-quiet { display: grid; grid-template-columns: 22px auto minmax(0, 1fr) auto; align-items: center; gap: 10px; padding: 9px 16px; border-bottom: 1px solid var(--sep); color: var(--label); text-decoration: none; font-size: 13px; }
.pk-quiet:last-child { border-bottom: 0; }
.pk-quiet b { font-weight: 650; white-space: nowrap; }
.pk-quiet span { min-width: 0; color: var(--label-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pk-quiet em { font-style: normal; font-size: 12.5px; font-weight: 600; color: var(--accent); white-space: nowrap; }
.pk-quiet:hover b { color: var(--accent); }
@media (max-width: 720px) {
  .pk-quiet { grid-template-columns: 22px minmax(0, 1fr); row-gap: 2px; padding: 9px 4px; }
  .pk-quiet span { grid-column: 2; white-space: normal; }
  .pk-quiet em { display: none; }
  .pk-best-rec { padding: 10px 4px 0; }
}
/* Ideas: the strongest open calls, one per market, each with its reasons above it. */
.ideas-page { max-width: 1100px; }
.id-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; flex-wrap: wrap; padding: 6px 0 16px; border-bottom: 1px solid var(--sep); }
.id-head h1 { margin: 0; font: 800 30px/1.1 var(--font-display); letter-spacing: -.03em; }
.id-head p { max-width: 620px; margin: 6px 0 0; font-size: 14px; line-height: 1.5; color: var(--label-2); }
.id-topics { display: flex; gap: 2px; padding: 3px; border-radius: var(--r-pill); background: var(--fill-3); }
.id-topics a { padding: 6px 14px; border-radius: var(--r-pill); font-size: 13px; font-weight: 600; color: var(--label-3); text-decoration: none; }
.id-topics a:hover { color: var(--label-2); }
.id-topics a.on { background: var(--surface-2); color: var(--label); box-shadow: 0 1px 3px rgba(0, 0, 0, .3); }
.id-list { margin-top: 8px; }
.id-item { border-bottom: 1px solid var(--sep); }
.id-item .pk-row, .id-item > a { border-bottom: 0; }
.id-top { display: flex; align-items: center; gap: 10px; padding: 14px 16px 0; }
.id-whys { display: flex; flex-wrap: wrap; gap: 6px; min-width: 0; flex: 1; }
.id-why { padding: 3px 9px; border-radius: var(--r-pill); background: var(--fill-3); font-size: 12px; font-weight: 550; color: var(--label-2); }
.id-why.rec { color: var(--good); background: var(--good-bg); font-weight: 650; }
.id-why.with { color: color-mix(in srgb, var(--good) 85%, var(--label)); }
.id-why.warn { color: var(--bad); background: var(--bad-bg); }
.id-dig { flex: none; font-size: 12.5px; font-weight: 600; color: var(--accent); text-decoration: none; white-space: nowrap; }
.id-dig:hover { text-decoration: underline; }
@media (max-width: 720px) {
  .id-head h1 { font-size: 26px; }
  .id-topics { max-width: 100%; overflow-x: auto; scrollbar-width: none; }
  .id-topics a { flex: none; }
  .id-top { flex-wrap: wrap; padding: 12px 4px 0; }
  .id-dig { order: 3; width: 100%; }
}
/* Predictions without the left column: the feed takes the page, and what the column held opens from the header. */
body.wk #view:not(.wk-has-rail) > .picks-page { max-width: 1560px; padding-left: 24px; padding-right: 24px; }
.wk-find-at { position: relative; display: inline-flex; margin-left: 10px; }
.wk-find-btn { display: inline-flex; align-items: center; gap: 7px; height: 32px; padding: 0 13px 0 11px; border: 1px solid var(--sep-strong); border-radius: var(--r-pill); background: none; font: inherit; font-size: 13px; font-weight: 600; color: var(--label-2); cursor: pointer; white-space: nowrap; transition: color var(--fast), border-color var(--fast), background var(--fast); }
.wk-find-btn:hover, .wk-find-btn[aria-expanded="true"] { color: var(--label); border-color: var(--label-3); background: var(--fill-3); }
.wk-find-btn svg { width: 15px; height: 15px; fill: currentColor; }
.wk-find { position: absolute; z-index: 60; top: calc(100% + 12px); left: 50%; transform: translateX(-50%); width: 360px; max-height: min(78vh, 720px); overflow-y: auto; padding: 6px 10px 10px; border: 1px solid var(--sep); border-radius: 16px; background: var(--surface-2); box-shadow: var(--shadow-float); scrollbar-width: thin; }
.wk-find[hidden] { display: none; }
.wk-find .wk-rail { display: flex !important; position: static; max-height: none; overflow: visible; padding: 8px 0 4px; }
@media (max-width: 1100px) { .wk-find-btn span { display: none; } .wk-find-btn { padding: 0 9px; } }
@media (max-width: 720px) { .wk-find-at { display: none; } }
/* Filtered to one caller: their chip in the bar, with a clear; and a close on their column. */
.tm-by { flex: none; display: inline-flex; align-items: center; gap: 7px; height: 32px; margin-left: 6px; padding: 0 10px 0 6px; border-radius: var(--r-pill); background: color-mix(in srgb, var(--accent) 16%, transparent); color: var(--label); font-size: 13px; font-weight: 650; text-decoration: none; transition: background var(--fast); }
.tm-by:hover { background: color-mix(in srgb, var(--accent) 26%, transparent); }
.tm-by span { max-width: 180px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tm-by svg { width: 13px; height: 13px; fill: none; stroke: var(--label-2); stroke-width: 2.6; stroke-linecap: round; }
.ir.cr { position: relative; }
.cr-close { position: absolute; z-index: 2; top: 10px; right: 10px; display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; background: rgba(0, 0, 0, .55); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); }
.cr-close:hover { background: rgba(0, 0, 0, .75); }
.cr-close svg { width: 13px; height: 13px; fill: none; stroke: #fff; stroke-width: 2.6; stroke-linecap: round; }
/* Predictions, cleaner. The search is an icon until opened; the column beside the feed is plain (no panel), with
   one quiet row of numbers and the callers to work through. */
.tm-search { flex: none; display: inline-flex; align-items: center; height: 34px; margin-left: 6px; border-radius: var(--r-pill); transition: background var(--fast); }
.tm-search-btn { display: grid; place-items: center; width: 34px; height: 34px; border: 0; border-radius: 50%; background: none; color: var(--label-2); cursor: pointer; transition: background var(--fast), color var(--fast); }
.tm-search-btn:hover { background: var(--fill-3); color: var(--label); }
.tm-search-btn svg { width: 16px; height: 16px; fill: currentColor; }
.tm-search input { width: 0; padding: 0; border: 0; outline: 0; background: none; font: inherit; font-size: 13px; color: var(--label); transition: width var(--med) var(--ease), padding var(--med) var(--ease); }
.tm-search input::placeholder { color: var(--label-3); }
.tm-search.open { background: var(--fill-3); }
.tm-search.open .tm-search-btn { pointer-events: none; }
.tm-search.open input { width: 220px; padding-right: 14px; }
@media (max-width: 720px) { .tm-search.open input { width: 160px; } }

.ir { gap: 0; padding: 4px 0 18px 24px; border-radius: 0; background: none; box-shadow: none; border-left: 1px solid var(--sep); }
.ir-h { padding-bottom: 10px; border-bottom: 0; }
.ir-h b { font-size: 17px; }
.ir-h span { font-size: 12.5px; color: var(--label-3); }
.ir-stats { display: flex; gap: 0; padding: 4px 0 16px; border-bottom: 1px solid var(--sep); }
.ir-stats div { flex: 1; gap: 1px; padding-left: 14px; border-left: 1px solid var(--sep); }
.ir-stats div:first-child { padding-left: 0; border-left: 0; }
.ir-stats b { font-size: 18px; }
.ir-stats small { font-size: 11px; line-height: 1.3; }
.ir-sec { padding: 16px 0 10px; }
.ir-sec h4 { margin: 0 0 6px; }
.ir-p { padding: 7px 0; margin: 0; border-radius: 0; }
.ir-p:hover, .ir-soon:hover { background: none; }
.ir-p:hover b { color: var(--accent); }
.ir-more { height: auto; margin-top: 14px; padding: 0; border-radius: 0; background: none; justify-content: flex-start; font-size: 13px; font-weight: 600; color: var(--accent); }
.ir-more:hover { background: none; text-decoration: underline; }

.irc-h { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 6px; }
.irc-h h4 { margin: 0; }
.irc-sort { display: flex; gap: 2px; }
.irc-sort button, .irc-chips button { flex: none; padding: 3px 8px; border: 0; border-radius: 6px; background: none; font: inherit; font-size: 12px; font-weight: 600; color: var(--label-3); cursor: pointer; transition: color var(--fast), background var(--fast); white-space: nowrap; }
.irc-sort button:hover, .irc-chips button:hover { color: var(--label-2); }
.irc-sort button.on, .irc-chips button.on { background: var(--fill-2); color: var(--label); }
.irc-chips { display: flex; gap: 2px; margin: 0 0 6px -8px; overflow-x: auto; scrollbar-width: none; }
.irc-chips::-webkit-scrollbar { display: none; }
.irc-row { display: grid; grid-template-columns: 28px minmax(0, 1fr) auto; align-items: center; gap: 10px; padding: 8px 0; color: var(--label); text-decoration: none; }
.irc-who { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.irc-who b { display: flex; align-items: center; gap: 6px; min-width: 0; font-size: 13.5px; font-weight: 650; transition: color var(--fast); }
.irc-row:hover .irc-who b { color: var(--accent); }
.irc-nm { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.irc-dot { flex: none; width: 6px; height: 6px; border-radius: 50%; background: var(--good); }
.irc-dot.rising { background: var(--live); }
.irc-who small { font-size: 11.5px; color: var(--label-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-variant-numeric: tabular-nums; }
.irc-roi { display: inline-flex; align-items: baseline; gap: 1px; font-variant-numeric: tabular-nums; }
.irc-roi b { font: 700 13.5px/1 var(--font-display); }
.irc-roi.up b { color: var(--good); } .irc-roi.down b { color: var(--bad); }
.irc-roi small { font-size: 10.5px; font-weight: 600; color: var(--label-3); }
.irc-more { margin-top: 4px; padding: 0; border: 0; background: none; font: inherit; font-size: 12.5px; font-weight: 600; color: var(--label-3); cursor: pointer; }
.irc-more:hover { color: var(--label); }
.irc-none { margin: 8px 0; font-size: 12.5px; color: var(--label-3); }
/* The tracked line above the feed, quieter. */
.tt-bar { font-size: 12.5px; padding-top: 8px; padding-bottom: 8px; }
/* The callers' menu: one small control beside the title for topic and sort; the column's hide is an icon. */
.irc-h { position: relative; padding-right: 30px; }
.irc-set-at { position: relative; }
.irc-set { display: inline-flex; align-items: center; gap: 4px; padding: 3px 4px 3px 8px; border: 0; border-radius: 6px; background: none; font: inherit; font-size: 12px; font-weight: 600; color: var(--label-2); cursor: pointer; transition: background var(--fast), color var(--fast); }
.irc-set:hover { background: var(--fill-3); color: var(--label); }
.irc-set svg { width: 12px; height: 12px; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.irc-menu { position: absolute; z-index: 20; top: calc(100% + 6px); right: 0; display: flex; flex-direction: column; min-width: 160px; padding: 6px; border: 1px solid var(--sep); border-radius: 12px; background: var(--surface-2); box-shadow: var(--shadow-float); }
.irc-menu[hidden] { display: none; }
.irc-menu small { padding: 6px 8px 3px; font-size: 10px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--label-3); }
.irc-menu small:not(:first-child) { margin-top: 4px; border-top: 1px solid var(--sep); padding-top: 8px; }
.irc-menu button { padding: 6px 8px; border: 0; border-radius: 7px; background: none; font: inherit; font-size: 13px; font-weight: 550; color: var(--label-2); text-align: left; cursor: pointer; }
.irc-menu button:hover { background: var(--fill-3); color: var(--label); }
.irc-menu button.on { color: var(--label); font-weight: 650; }
.irc-menu button.on::after { content: "✓"; float: right; color: var(--accent); }
.ir-min { top: 14px; width: 26px; height: 26px; padding: 0; border-radius: 50%; background: none; box-shadow: none; }
.ir-min:hover { background: var(--fill-3); }
.ir > [data-irc] .ir-sec { padding-top: 12px; }
/* A caller's column, fitted to it: their face, name and standing in one row with the close, then four numbers. */
.ir.cr { padding-top: 6px; }
.cr-top { display: flex; align-items: center; gap: 10px; padding-bottom: 14px; }
.cr-who { flex: 1; display: flex; align-items: center; gap: 12px; min-width: 0; margin: 0; color: var(--label); text-decoration: none; }
.cr-who .av { box-shadow: none; }
.cr-who > span { padding: 0; }
.cr-who b { font-size: 16px; }
.cr-who small em { font-style: normal; font-weight: 650; }
.cr-who small em.proven { color: var(--good); } .cr-who small em.rising { color: var(--live); }
.ir.cr .cr-close { position: static; flex: none; width: 28px; height: 28px; background: var(--fill-3); -webkit-backdrop-filter: none; backdrop-filter: none; }
.ir.cr .cr-close:hover { background: var(--fill-2); }
.ir.cr .cr-close svg { stroke: var(--label-2); }
.ir.cr .ir-min { display: none; }
.cr-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px 0; padding: 14px 0 16px; border-top: 1px solid var(--sep); border-bottom: 1px solid var(--sep); }
.cr-grid > div { display: flex; flex-direction: column; gap: 2px; min-width: 0; padding-left: 14px; border-left: 1px solid var(--sep); }
.cr-grid > div:nth-child(odd) { padding-left: 0; border-left: 0; }
.cr-grid b { font: 750 19px/1.1 var(--font-display); font-variant-numeric: tabular-nums; color: var(--label); }
.cr-grid b.up { color: var(--good); } .cr-grid b.down { color: var(--bad); }
.cr-grid small { font-size: 11.5px; color: var(--label-3); }
.cr-said { display: flex; flex-direction: column; gap: 2px; padding: 6px 0; color: var(--label); text-decoration: none; font-size: 13px; line-height: 1.35; }
.cr-said small { font-size: 11.5px; color: var(--label-3); }
.cr-all { display: block; margin-top: 8px; font-size: 12.5px; color: var(--label-3); }
/* With a caller picked, the strip is theirs: their face and name lead it so it's plain whose calls these are. */
.tt-caller .tt-sum { gap: 8px; }
.tt-caller .tt-sum .av { flex: none; }
.tt-who { font-weight: 650; color: var(--label); white-space: nowrap; }
.tt-none { font-size: 12.5px; color: var(--label-3); }
.tt-caller { box-shadow: inset 2px 0 0 var(--accent); padding-left: 12px; }
/* A public figure's Overview: what held up and what didn't, by topic, by month, flips and promises. */
.ov h4 a { margin-left: 8px; font-size: 11.5px; font-weight: 600; letter-spacing: 0; text-transform: none; color: var(--accent); cursor: pointer; text-decoration: none; }
.ov h4 a:hover { text-decoration: underline; }
.ov-head p b.up { color: var(--good); } .ov-head p b.down { color: var(--bad); }
.fg-proof { padding: 24px 0; }
.fg-said { display: grid; grid-template-columns: 8px minmax(0, 1fr); gap: 12px; align-items: start; padding: 10px 0; border-bottom: 1px solid var(--sep); color: var(--label); text-decoration: none; }
.fg-said:last-child { border-bottom: 0; }
.fg-said > i { width: 8px; height: 8px; margin-top: 6px; border-radius: 50%; }
.fg-said.right > i { background: var(--good); } .fg-said.wrong > i { background: var(--bad); }
.fg-said > span { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.fg-said b { font-size: 14px; font-weight: 600; line-height: 1.35; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; transition: color var(--fast); }
.fg-said:hover b { color: var(--accent); }
.fg-said small { font-size: 11.5px; color: var(--label-3); }
.fg-none { margin: 8px 0; font-size: 13px; color: var(--label-3); }
.fg-grid { grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }
.fg-grid .ov-card:nth-child(n) { padding: 22px 22px 20px; border-left: 1px solid var(--sep); }
.fg-grid .ov-card:first-child { padding-left: 0; border-left: 0; }
.fg-topic { display: grid; grid-template-columns: minmax(0, 1fr) 64px 40px 22px; align-items: center; gap: 8px; padding: 6px 0; font-size: 12.5px; }
.fg-topic > span { color: var(--label-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fg-tbar { position: relative; height: 6px; border-radius: 3px; background: var(--fill-3); overflow: hidden; }
.fg-tbar > i { position: absolute; inset: 0 auto 0 0; border-radius: 3px; background: var(--label-3); }
.fg-tbar > i.up { background: var(--good); } .fg-tbar > i.down { background: var(--bad); }
.fg-topic > b { text-align: right; font-weight: 650; font-variant-numeric: tabular-nums; }
.fg-topic > b.up { color: var(--good); } .fg-topic > b.down { color: var(--bad); }
.fg-topic > small { text-align: right; color: var(--label-3); font-variant-numeric: tabular-nums; }
.fg-flip { display: flex; flex-direction: column; gap: 3px; padding: 8px 0; border-bottom: 1px solid var(--sep); font-size: 12.5px; }
.fg-flip:last-child { border-bottom: 0; }
.fg-flip b { font-size: 13.5px; color: var(--label); }
.fg-flip span { color: var(--label-2); line-height: 1.35; }
.fg-flip em { margin-right: 4px; font-style: normal; font-size: 10.5px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--label-3); }
.fg-pbar { display: flex; gap: 2px; height: 8px; margin: 6px 0 10px; border-radius: 4px; overflow: hidden; }
.fg-pbar i { min-width: 4px; }
.fg-pbar .kept, .fg-pkey .kept::before { background: var(--good); }
.fg-pbar .compromise, .fg-pkey .compromise::before { background: #ffb340; }
.fg-pbar .in_progress, .fg-pkey .in_progress::before { background: var(--live); }
.fg-pbar .broken, .fg-pkey .broken::before { background: var(--bad); }
.fg-pkey { display: flex; flex-wrap: wrap; gap: 6px 14px; font-size: 12px; color: var(--label-2); }
.fg-pkey span { display: inline-flex; align-items: center; gap: 6px; }
.fg-pkey span::before { content: ""; width: 7px; height: 7px; border-radius: 50%; }
@media (max-width: 720px) {
  .fg-grid { grid-template-columns: 1fr; }
  .fg-grid .ov-card:nth-child(n) { padding: 20px 0; border-left: 0; border-top: 1px solid var(--sep); }
  .fg-grid .ov-card:first-child { border-top: 0; }
}
/* A public figure's latest statements in the side column: the newest as a quote, the ones before it on a timeline. */
.sl { display: flex; flex-direction: column; }
.sl-lead { display: block; padding: 12px 0 16px; color: var(--label); text-decoration: none; animation: sl-in .5s var(--ease, ease) both; }
.sl-who { display: flex; align-items: center; gap: 8px; font-size: 12.5px; }
.sl-who b { font-weight: 650; }
.sl-who time { display: inline-flex; align-items: center; gap: 6px; margin-left: auto; color: var(--label-3); font-variant-numeric: tabular-nums; }
.sl-pulse { position: relative; width: 6px; height: 6px; border-radius: 50%; background: var(--live); }
.sl-pulse::after { content: ""; position: absolute; inset: 0; border-radius: 50%; background: var(--live); animation: sl-ping 1.8s ease-out infinite; }
.sl-lead q { display: block; position: relative; margin: 12px 0 0; padding-left: 18px; font-size: 17px; font-weight: 600; line-height: 1.38; letter-spacing: -.01em; quotes: none; transition: color var(--fast); }
.sl-lead q::before { content: "\201C"; position: absolute; left: -2px; top: -8px; font: 700 34px/1 Georgia, serif; color: var(--label-3); }
.sl-lead:hover q { color: var(--accent); }
.sl-check { margin: 10px 0 0 18px; padding-left: 10px; border-left: 2px solid var(--sep); font-size: 12.5px; line-height: 1.5; color: var(--label-2); display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.sl-check em { margin-right: 6px; font-style: normal; font-size: 10.5px; font-weight: 750; letter-spacing: .06em; text-transform: uppercase; color: var(--label); }
.sl-line { position: relative; padding-top: 4px; border-top: 1px solid var(--sep); }
.sl-line::before { content: ""; position: absolute; left: 39px; top: 16px; bottom: 16px; width: 1px; background: var(--sep); }
.sl-row { position: relative; display: grid; grid-template-columns: 30px 18px minmax(0, 1fr); align-items: start; padding: 9px 0; color: var(--label); text-decoration: none; animation: sl-in .45s var(--ease, ease) both; animation-delay: calc(120ms + var(--i) * 70ms); }
.sl-row > time { padding-top: 1px; font-size: 11.5px; color: var(--label-3); font-variant-numeric: tabular-nums; }
.sl-row > i { justify-self: center; width: 9px; height: 9px; margin-top: 4px; border-radius: 50%; border: 2px solid var(--bg, var(--bg-1)); box-sizing: content-box; background: var(--label-3); transition: transform var(--fast); position: relative; z-index: 1; }
.sl-row.right > i { background: var(--good); } .sl-row.wrong > i { background: var(--bad); }
.sl-row > span { display: flex; flex-direction: column; gap: 2px; min-width: 0; padding-left: 4px; }
.sl-row b { font-size: 13px; font-weight: 600; line-height: 1.38; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; transition: color var(--fast); }
.sl-row small { font-size: 10.5px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--label-3); }
.sl-row p { margin: 0; max-height: 0; opacity: 0; overflow: hidden; font-size: 12px; line-height: 1.45; color: var(--label-2); transition: max-height .35s ease, opacity .25s ease, margin .35s ease; }
.sl-row:hover b { color: var(--accent); }
.sl-row:hover > i { transform: scale(1.35); }
.sl-row:hover p { max-height: 7.3em; opacity: 1; margin-top: 4px; }
@keyframes sl-in { from { opacity: 0; transform: translateY(6px); } }
@keyframes sl-ping { from { transform: scale(1); opacity: .7; } to { transform: scale(3.2); opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .sl-lead, .sl-row, .sl-pulse::after { animation: none; } }
/* Their one number up top, plain rather than a card. */
.pf-rail-stats[style*="--n:1"] .pf-stat { padding: 0 0 14px; border-radius: 0; background: none; border-bottom: 1px solid var(--sep); }
/* A public figure's Overview: what they got wrong next to what the record shows, what they're predicting now, their peers. */
.fg-sec { padding: 26px 0 6px; border-top: 1px solid var(--sep); }
.fg-sec > h4 { display: flex; align-items: baseline; gap: 8px; margin: 0 0 6px; font-size: 15px; font-weight: 650; color: var(--label); }
.fg-sec > h4 small { font-size: 12.5px; font-weight: 500; color: var(--label-3); }
.fg-sec > h4 a { margin-left: auto; font-size: 12.5px; font-weight: 600; color: var(--accent); cursor: pointer; text-decoration: none; }
.fg-fix { padding: 16px 0; border-bottom: 1px solid var(--sep); }
.fg-fix:last-child { border-bottom: 0; }
.fg-claim { display: grid; grid-template-columns: 18px minmax(0, 1fr); gap: 10px; color: var(--label); text-decoration: none; }
.fg-claim > i { width: 18px; height: 18px; margin-top: 1px; border-radius: 50%; background: color-mix(in srgb, var(--bad) 14%, transparent); color: var(--bad); font: 700 10px/18px system-ui; font-style: normal; text-align: center; }
.fg-claim > span { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.fg-claim b { font-size: 15px; font-weight: 600; line-height: 1.4; transition: color var(--fast); }
.fg-claim:hover b { color: var(--accent); }
.fg-claim small { font-size: 12px; color: var(--label-3); }
.fg-fact { margin: 10px 0 0 28px; font-size: 13.5px; line-height: 1.55; color: var(--label-2); display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden; }
.fg-fact em { display: block; margin-bottom: 2px; font-style: normal; font-size: 10.5px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--good); }
.fg-src { display: flex; flex-wrap: wrap; gap: 6px 16px; margin: 8px 0 0 28px; font-size: 12px; }
.fg-src a { color: var(--label-3); text-decoration: none; transition: color var(--fast); }
.fg-src a:hover, .fg-src a:last-child { color: var(--accent); }
.fg-pred { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 16px; align-items: center; padding: 12px 0; border-bottom: 1px solid var(--sep); color: var(--label); text-decoration: none; }
.fg-pred:last-child { border-bottom: 0; }
.fg-pred > span { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.fg-pred b { font-size: 14px; font-weight: 600; line-height: 1.35; transition: color var(--fast); }
.fg-pred:hover b { color: var(--accent); }
.fg-pred small { font-size: 12px; color: var(--label-3); }
.fg-pred > em { display: flex; flex-direction: column; align-items: flex-end; font-style: normal; font-size: 16px; font-weight: 650; font-variant-numeric: tabular-nums; }
.fg-pred > em small { font-size: 10.5px; font-weight: 500; }
.fg-sec + .fg-grid { margin-top: 18px; border-top: 1px solid var(--sep); }
.fg-peer { display: grid; grid-template-columns: 22px 20px minmax(0, 1fr) auto; gap: 8px; align-items: center; margin: 0 -8px; padding: 6px 8px; border-radius: 8px; color: var(--label-2); text-decoration: none; font-size: 13px; }
.fg-peer > span { font-size: 11.5px; color: var(--label-3); font-variant-numeric: tabular-nums; }
.fg-peer b { font-weight: 550; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fg-peer em { font-style: normal; font-weight: 650; font-variant-numeric: tabular-nums; }
.fg-peer em.up { color: var(--good); } .fg-peer em.down { color: var(--bad); }
.fg-peer:hover b { color: var(--accent); }
.fg-peer.me { background: var(--fill-3); color: var(--label); }
.fg-peer.me b { font-weight: 700; }
.fg-cap { margin: 8px 0 0; font-size: 11.5px; color: var(--label-3); }
@media (max-width: 720px) {
  .fg-fact, .fg-src { margin-left: 0; }
  .fg-claim b { font-size: 14.5px; }
}
.fg-prom .fg-claim { cursor: pointer; }
.fg-prom.kept .fg-claim > i { background: color-mix(in srgb, var(--good) 14%, transparent); color: var(--good); }
.fg-prom.broken .fg-fact em { color: var(--bad); }
.fg-src a[data-pfilter] { cursor: pointer; }
@media (max-width: 720px) {
  .pf-up:has(.sl) { display: block; margin: 0; padding: 0; width: auto; overflow: visible; }
  .pf-up:has(.sl) h4 { display: flex; }
}
/* A public figure's Overview cards in the side column: plain sections like the column's others. */
.fg-rail .ov-card { padding: 0; border: 0; }
.fg-rail .ov-card > h4 { margin-bottom: 8px; font-size: 14px; font-weight: 700; letter-spacing: 0; text-transform: none; color: var(--label); }
.fg-rail .ov-card > h4 small, .fg-rail .ov-card > h4 a { font-size: 11.5px; font-weight: 500; }
.fg-rail .ov-card > h4 a { color: var(--accent); cursor: pointer; text-decoration: none; }
.fg-rail .fg-topic { grid-template-columns: minmax(0, 1fr) 72px 40px 22px; }
.fg-rail .fg-said b { font-size: 13px; }
.fg-rail .fg-peer { font-size: 13px; }
/* A public figure's track record: a square per checked call, oldest to newest, the one pointed at told beneath. */
.rg-head { display: flex; align-items: baseline; gap: 8px; margin: 2px 0 12px; }
.rg-head b { font-size: 28px; font-weight: 750; letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.rg-head b small { font-size: 15px; font-weight: 600; color: var(--label-3); }
.rg-head > span { font-size: 13px; color: var(--label-2); }
.rg-head em { margin-left: auto; font-style: normal; font-size: 12px; font-weight: 650; color: var(--label-2); }
.rg-head em::before { content: ""; display: inline-block; width: 6px; height: 6px; margin-right: 6px; border-radius: 50%; vertical-align: 1px; background: currentColor; animation: sl-ping-dot 1.6s ease-in-out infinite; }
.rg-head em.right::before { background: var(--good); } .rg-head em.wrong::before { background: var(--bad); }
.rg-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(14px, 1fr)); gap: 4px; }
.rg-grid a { aspect-ratio: 1; border-radius: 3px; background: var(--label-3); opacity: .9; transition: transform .15s var(--ease), opacity .15s, box-shadow .15s; animation: rg-in .4s var(--ease) both; animation-delay: calc(var(--i) * 12ms); }
.rg-grid a.right { background: var(--good); } .rg-grid a.wrong { background: var(--bad); }
.rg-grid:hover a { opacity: .45; }
.rg-grid a.on, .rg-grid:hover a.on { opacity: 1; transform: scale(1.3); box-shadow: 0 0 0 2px var(--bg); position: relative; z-index: 1; }
.rg-cap { display: flex; flex-direction: column; gap: 4px; min-height: 64px; margin: 14px 0 0; padding-top: 12px; border-top: 1px solid var(--sep); animation: sl-in .25s var(--ease) both; }
.rg-cap small { font-size: 11.5px; color: var(--label-3); }
.rg-cap small em { font-style: normal; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--label-2); }
.rg-cap b { font-size: 13.5px; font-weight: 600; line-height: 1.4; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
@keyframes rg-in { from { opacity: 0; transform: scale(.4); } }
@keyframes sl-ping-dot { 50% { opacity: .35; } }
@media (prefers-reduced-motion: reduce) { .rg-grid a, .rg-cap, .rg-head em::before { animation: none; } }

/* Phones, All predictions: one flat row of filters and a quieter card. The topics scroll in what's left beside the
   search and two icon menus (whose picks, sort), which keep their full lists; opening search hands it the row. A call
   is its title, who made it and when, and one line under it: the move since the call, then the crowd or record in
   words ("91% of 11 others agree"). The caller's tier and the faces of others on the same call stay on desktop. */
@media (max-width: 720px) {
  body.wk #view:not(.wk-has-rail) > .picks-page { padding-left: 0; padding-right: 0; }
  .tm-tool { flex-wrap: nowrap; gap: 2px; padding: 0; border-radius: 0; background: none; box-shadow: none; }
  .tm-tool .tm-topics { flex: 1 1 0; width: auto; -webkit-mask-image: linear-gradient(90deg, #000 85%, transparent); mask-image: linear-gradient(90deg, #000 85%, transparent); }
  .tm-tool .tm-topics button { padding-left: 11px; padding-right: 11px; }
  .tm-tool .tm-search { margin-left: 0; }
  .tm-tool:has(.tm-search.open) .tm-topics { display: none; }
  .tm-tool .tm-search.open { flex: 1 1 0; }
  .tm-tool .tm-search.open input { flex: 1; width: auto; min-width: 0; }
  .tm-menus .dd-btn { width: 34px; height: 34px; padding: 0; gap: 0; justify-content: center; border-radius: 50%; background: none; font-size: 0; }
  .tm-menus .dd-btn > svg { display: none; }
  .tm-menus .dd-btn::before { content: ""; width: 17px; height: 17px; background: var(--label-2); -webkit-mask: var(--dd-ic) center / contain no-repeat; mask: var(--dd-ic) center / contain no-repeat; }
  .tm-menus .dd-btn:hover::before, .tm-menus .dd.open .dd-btn::before { background: var(--label); }
  .tm-menus [data-dd="from"] { --dd-ic: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='9' cy='8' r='3.5'/%3E%3Cpath d='M2.5 20c.6-3.6 3.2-5.5 6.5-5.5s5.9 1.9 6.5 5.5M16 4.8a3.5 3.5 0 0 1 0 6.4M18.5 14.9c1.7.8 2.8 2.5 3 5.1'/%3E%3C/svg%3E"); }
  .tm-menus [data-dd="sort"] { --dd-ic: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M4 7h16M7 12h10M10 17h4'/%3E%3C/svg%3E"); }

  .pk-row.pk2 { grid-template-columns: 36px auto minmax(0, 1fr) 32px; grid-template-areas: "logo main main go" ". now crowd crowd"; gap: 8px 12px; padding: 16px 0; }
  .pk-row.pk2 .pk-now { grid-area: now; }
  .pk-row.pk2 .pk-crowd { grid-area: crowd; overflow: hidden; }
  .pk-row.pk2 .pk-now:empty { display: none; }
  .pk-row.pk2 .pk-now:empty + .pk-crowd { grid-column: 2 / 4; }
  .pk-row.pk2 .pk-title { font-size: 15px; line-height: 1.3; }
  .pk-row.pk2 .pk-main { gap: 5px; }
  .pk-row.pk2 .pk-by .pk-tierword, .pk-row.pk2 .pk-also { display: none; }
  .pk-row.pk2 .pk-by b { font-weight: 500; }
  .pk-row.pk2 .pk-now { gap: 8px; }
  .pk-row.pk2 .pk-now .pk-spark { width: 44px; height: 18px; }
  .pk-row.pk2 .pk-num { flex-direction: row; align-items: baseline; gap: 5px; }
  .pk-row.pk2 .pk-num b, .pk-row.pk2 .pk-crowd .pk-val b { font-size: 14px; font-weight: 650; }
  .pk-row.pk2 .pk-num small, .pk-row.pk2 .pk-crowd .pk-sub { font-size: 13px; }
  .pk-row.pk2 .pk-crowd .pk-pub { flex-direction: row; align-items: baseline; gap: 5px; }
}

/* Top trades: a title, one flat filter bar (topics, search, Return / Risk / Settles / Sort), and a clean list where
   each trade is one row: the call and who made it, their return a call, the risk, the move since, when it settles.
   While it's working out the list, the Cred mark over a bar from 0 to 100%. */
.tp-page { max-width: 1120px; }
.tp-head { padding: 8px 0 18px; }
.tp-head h1 { margin: 0; font: 800 32px/1.1 var(--font-display); letter-spacing: -.03em; }
.tp-head p { max-width: 640px; margin: 8px 0 0; font-size: 14px; line-height: 1.5; color: var(--label-3); }
.tp-bar { display: flex; align-items: center; gap: 12px; padding: 0 0 14px; border-bottom: 1px solid color-mix(in srgb, var(--sep) 60%, transparent); }
.tp-topics { display: flex; gap: 2px; min-width: 0; overflow-x: auto; scrollbar-width: none; }
.tp-topics::-webkit-scrollbar { display: none; }
.tp-topics a { flex: none; padding: 7px 13px; border-radius: var(--r-pill); font-size: 13.5px; font-weight: 600; color: var(--label-3); text-decoration: none; transition: color var(--fast), background var(--fast); }
.tp-topics a:hover { color: var(--label); }
.tp-topics a.on { background: var(--fill-2); color: var(--label); }
.tp-tools { display: flex; align-items: center; gap: 6px; margin-left: auto; }
.tp-q { display: flex; align-items: center; gap: 7px; width: 220px; height: 32px; padding: 0 12px; border-radius: var(--r-pill); background: var(--fill-3); color: var(--label-3); cursor: text; }
.tp-q svg { flex: none; width: 15px; height: 15px; fill: currentColor; }
.tp-q input { flex: 1; min-width: 0; border: 0; outline: 0; background: none; font: 500 13px var(--font); color: var(--label); }
.tp-q input::placeholder { color: var(--label-3); }
.tp-q:focus-within { box-shadow: 0 0 0 1px color-mix(in srgb, var(--accent) 60%, transparent); }
.tp-tools .dd.set .dd-btn { background: color-mix(in srgb, var(--accent) 16%, transparent); color: var(--accent); }
.tp-tools .dd.set .dd-btn svg { stroke: var(--accent); }

.tp-head-row, .tp-row { display: grid; grid-template-columns: 36px minmax(0, 1fr) 110px 130px 150px 92px 32px; gap: 20px; align-items: center; padding: 0 8px; }
.tp-head-row { height: 40px; font: 650 10.5px var(--font); letter-spacing: .07em; text-transform: uppercase; color: var(--label-3); }
.tp-head-row > :first-child { grid-column: 1 / 3; }
.tp-head-row [title] { cursor: help; }
.tp-row { padding-top: 16px; padding-bottom: 16px; border-top: 1px solid color-mix(in srgb, var(--sep) 60%, transparent); cursor: pointer; transition: background var(--fast); }
.tp-row:hover { background: color-mix(in srgb, var(--fill-3) 60%, transparent); }
.tp-row:hover .tp-title { color: var(--accent); }
.tp-logo { display: grid; place-items: center; width: 36px; height: 36px; }
.tp-logo > * { flex: none; margin: 0; }
.tp-logo .pk-topic, .tp-logo .pk-topic[class] { width: 36px; height: 36px; background: #fff; color: #1c1c1e; }
.tp-main { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.tp-title { font: 600 15px/1.3 var(--font-display, var(--font)); letter-spacing: -.01em; color: var(--label); text-decoration: none; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.tp-by { display: flex; align-items: center; gap: 6px; min-width: 0; font-size: 12.5px; color: var(--label-3); white-space: nowrap; }
.tp-by a { display: inline-flex; align-items: center; gap: 6px; min-width: 0; color: inherit; text-decoration: none; }
.tp-by a .av { flex: none; }
.tp-by b { font-weight: 500; color: var(--label-2); overflow: hidden; text-overflow: ellipsis; }
.tp-by time::before, .tp-lean::before { content: "·"; margin-right: 6px; color: var(--label-3); }
.tp-lean { font-weight: 550; }
.tp-lean.with { color: var(--good); }
.tp-lean.against { color: var(--bad); }
.tp-col { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.tp-col b { font: 650 15px/1.15 var(--font-display, var(--font)); font-variant-numeric: tabular-nums; color: var(--label); white-space: nowrap; }
.tp-col b.up { color: var(--good); } .tp-col b.down { color: var(--bad); } .tp-col b.muted { color: var(--label-3); } .tp-col b.live { color: var(--live); }
.tp-col small { font-size: 11.5px; color: var(--label-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tp-risk b { display: inline-flex; align-items: center; gap: 7px; }
.tp-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--label-3); }
.tp-dot.low { background: var(--good); } .tp-dot.medium { background: #f5a524; } .tp-dot.high { background: var(--bad); }
.tp-now { flex-direction: row; align-items: center; gap: 10px; }
.tp-now .pk-spark { flex: none; width: 52px; height: 22px; opacity: .85; }
.tp-now .pk-num b { font-size: 15px; font-weight: 650; }
.tp-now .pk-num small { font-size: 11.5px; }
.tp-row .tk-btn:not(.on) { opacity: 0; transition: opacity var(--fast); }
.tp-row:hover .tk-btn, .tp-row .tk-btn:focus-visible { opacity: 1; }
@media (hover: none) { .tp-row .tk-btn:not(.on) { opacity: 1; } }
.tp-list .pk-row.locked { border-top: 1px solid color-mix(in srgb, var(--sep) 60%, transparent); }
.tp-clear { margin-top: 12px; padding: 8px 16px; border: 0; border-radius: var(--r-pill); background: var(--fill-2); color: var(--label); font: 600 13px var(--font); cursor: pointer; }

.tp-load { position: fixed; inset: 0; z-index: 5; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px; pointer-events: none; animation: tp-in .4s .25s both; }
.tp-load-bar { width: min(260px, 64vw); height: 3px; border-radius: 3px; background: var(--fill-2); overflow: hidden; }
.tp-load-bar i { display: block; height: 100%; border-radius: inherit; background: var(--label); transform: scaleX(0); transform-origin: left; will-change: transform; }
.tp-load small { display: flex; gap: 8px; font-size: 12.5px; letter-spacing: .01em; color: var(--label-3); }
.tp-load small b { min-width: 3ch; color: var(--label-2); font-weight: 600; font-variant-numeric: tabular-nums; text-align: right; }
@keyframes tp-in { from { opacity: 0; } }

@media (max-width: 1000px) {
  .tp-bar { flex-wrap: wrap; }
  .tp-tools { margin-left: 0; width: 100%; }
  .tp-q { flex: 1; width: auto; }
  .tp-head-row, .tp-row { grid-template-columns: 36px minmax(0, 1fr) 100px 120px 140px 32px; }
  .tp-head-row > :nth-child(5), .tp-due { display: none; }
}
/* Phones: the topics on their own row, then search and the four menus; a trade is its title and byline with its
   return, risk and move since side by side under it. */
@media (max-width: 720px) {
  .tp-head { padding-top: 4px; }
  .tp-head h1 { font-size: 26px; }
  .tp-head p { font-size: 13px; }
  .tp-bar { gap: 10px; }
  .tp-tools { gap: 4px; }
  .tp-head p { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
  .tp-tools { position: relative; }
  .tp-q { flex: none; width: 34px; height: 32px; padding: 0; justify-content: center; gap: 0; }
  .tp-q input { flex: 0; width: 0; }
  .tp-q:focus-within, .tp-q:has(input:not(:placeholder-shown)) { position: absolute; inset: 0 auto 0 0; z-index: 2; width: 100%; padding: 0 12px; justify-content: flex-start; gap: 7px; }
  .tp-q:focus-within input, .tp-q:has(input:not(:placeholder-shown)) input { flex: 1; }
  .tp-tools .dd { flex: 1 1 0; min-width: 0; }
  .tp-tools .dd-btn { width: 100%; justify-content: center; padding: 0 6px 0 9px; }
  .tp-tools .dd-menu { right: auto; left: 0; }
  .tp-tools .dd:last-child .dd-menu, .tp-tools .dd:nth-last-child(2) .dd-menu { left: auto; right: 0; }
  .tp-head-row { display: none; }
  .tp-row { grid-template-columns: 36px repeat(3, minmax(0, 1fr)) 32px; grid-template-areas: "logo main main main go" ". roi risk now ."; gap: 10px 12px; padding: 16px 0; }
  .tp-row:hover { background: none; }
  .tp-logo { grid-area: logo; align-self: start; }
  .tp-main { grid-area: main; }
  .tp-roi { grid-area: roi; } .tp-risk { grid-area: risk; } .tp-now { grid-area: now; }
  .tp-go { grid-area: go; align-self: start; }
  .tp-col b, .tp-now .pk-num b { font-size: 14px; }
  .tp-col small { font-size: 11px; }
  .tp-now .pk-spark { display: none; }
  .tp-now { align-self: start; align-items: flex-start; }
}

/* Top trades · Portfolio: Trades or Portfolio under the title; the choices (mix, risk, what to build for, how much)
   as flat segmented rows; a line of totals, a thin bar of how it's split, then each position with its weight and,
   under it, what the big funds did and this week's headlines. */
.tp-modes { display: flex; gap: 22px; margin: -4px 0 16px; border-bottom: 1px solid color-mix(in srgb, var(--sep) 60%, transparent); }
.tp-modes a { padding: 0 0 10px; margin-bottom: -1px; font-size: 14px; font-weight: 650; color: var(--label-3); text-decoration: none; border-bottom: 2px solid transparent; transition: color var(--fast), border-color var(--fast); }
.tp-modes a:hover { color: var(--label-2); }
.tp-modes a.on { color: var(--label); border-bottom-color: var(--label); }
.pf-tools { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 14px 22px; padding-bottom: 18px; border-bottom: 1px solid color-mix(in srgb, var(--sep) 60%, transparent); }
.pf-tools label { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.pf-tools label > span:first-child { font: 650 10.5px var(--font); letter-spacing: .07em; text-transform: uppercase; color: var(--label-3); }
.pf-seg { display: flex; gap: 2px; padding: 3px; border-radius: var(--r-pill); background: var(--fill-3); overflow-x: auto; scrollbar-width: none; }
.pf-seg::-webkit-scrollbar { display: none; }
.pf-seg button { flex: none; height: 28px; padding: 0 13px; border: 0; border-radius: var(--r-pill); background: none; color: var(--label-3); font: 600 13px var(--font); cursor: pointer; transition: color var(--fast), background var(--fast); }
.pf-seg button:hover { color: var(--label); }
.pf-seg button.on { background: var(--surface-2, var(--fill-1)); color: var(--label); box-shadow: 0 1px 3px rgba(0, 0, 0, .3); }
.pf-amt-in { display: flex; align-items: center; gap: 2px; height: 34px; padding: 0 12px; border-radius: var(--r-pill); background: var(--fill-3); color: var(--label-3); font: 600 13px var(--font); }
.pf-amt-in input { width: 90px; border: 0; outline: 0; background: none; color: var(--label); font: 600 13px var(--font); font-variant-numeric: tabular-nums; }
.pf-amt-in:focus-within { box-shadow: 0 0 0 1px color-mix(in srgb, var(--accent) 60%, transparent); }

.pf-sum { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px; padding: 22px 8px 16px; }
.pf-sum div { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.pf-sum b { font: 750 24px/1.1 var(--font-display, var(--font)); letter-spacing: -.02em; font-variant-numeric: tabular-nums; color: var(--label); }
.pf-sum b.up { color: var(--good); }
.pf-sum small { font-size: 12px; line-height: 1.35; color: var(--label-3); }
.pf-split { display: flex; gap: 3px; height: 6px; margin: 0 8px; border-radius: 6px; overflow: hidden; }
.pf-split i, .pf-legend i { background: var(--label-3); }
.pf-split .stocks, .pf-legend .stocks { background: var(--accent); }
.pf-split .crypto, .pf-legend .crypto { background: #f5a524; }
.pf-split .markets, .pf-legend .markets { background: #a77bf3; }
.pf-split .cash, .pf-legend .cash { background: var(--fill-1, var(--label-3)); }
.pf-legend { display: flex; flex-wrap: wrap; gap: 6px 18px; padding: 10px 8px 14px; font-size: 12px; color: var(--label-2); }
.pf-legend span { display: inline-flex; align-items: center; gap: 6px; }
.pf-legend i { width: 8px; height: 8px; border-radius: 2px; }

.pf-head-row, .pf-row { grid-template-columns: 36px minmax(0, 1fr) 90px 120px 130px 92px 32px; }
.pf-pos { border-top: 1px solid color-mix(in srgb, var(--sep) 60%, transparent); }
.pf-pos .pf-row { border-top: 0; padding-bottom: 8px; }
.pf-w b { font-size: 17px; }
.pf-ctx { display: flex; flex-direction: column; gap: 8px; padding: 0 8px 16px 64px; }
.pf-funds { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 14px; font-size: 12.5px; color: var(--label-3); }
.pf-funds i { font: 650 10.5px var(--font); font-style: normal; letter-spacing: .07em; text-transform: uppercase; }
.pf-funds b { font-weight: 600; color: var(--label-2); }
.pf-funds em { font-style: normal; font-weight: 600; }
.pf-funds em.up { color: var(--good); } .pf-funds em.down { color: var(--bad); }
.pf-funds small { font-size: 11.5px; }
.pf-news { display: flex; flex-direction: column; gap: 5px; margin: 0; padding: 0; list-style: none; }
.pf-news li { display: flex; align-items: baseline; gap: 10px; min-width: 0; font-size: 13px; }
.pf-news a { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--label-2); text-decoration: none; }
.pf-news a:hover { color: var(--accent); }
.pf-news span { flex: none; font-size: 11.5px; color: var(--label-3); }
.pf-news.none { font-size: 12.5px; color: var(--label-3); }
.pf-cash { display: flex; align-items: baseline; gap: 12px; padding: 16px 8px; border-top: 1px solid color-mix(in srgb, var(--sep) 60%, transparent); font-size: 13px; color: var(--label-3); }
.pf-cash b { color: var(--label-2); font-weight: 650; }
.pf-acts { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; padding: 22px 8px 40px; border-top: 1px solid color-mix(in srgb, var(--sep) 60%, transparent); }
.pf-track { height: 38px; padding: 0 20px; border: 0; border-radius: var(--r-pill); background: var(--label); color: var(--bg); font: 650 14px var(--font); cursor: pointer; }
.pf-track:disabled { opacity: .6; cursor: default; }
.pf-acts small { font-size: 12.5px; color: var(--label-3); }

@media (max-width: 1000px) {
  .pf-head-row, .pf-row { grid-template-columns: 36px minmax(0, 1fr) 80px 110px 120px 32px; }
}
/* Phones: the choices stack, each its own row; the totals two by two; a position is its title and byline with its
   weight, expected return and risk side by side, then the funds and headlines. */
@media (max-width: 720px) {
  .tp-modes { margin-top: 0; }
  .pf-tools { flex-direction: column; align-items: stretch; gap: 12px; }
  .pf-seg button { flex: 1 0 auto; }
  .pf-amt-in input { width: 100%; }
  .pf-sum { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; padding: 18px 0 14px; }
  .pf-sum b { font-size: 21px; }
  .pf-split { margin: 0; }
  .pf-legend { padding: 10px 0 12px; }
  .pf-row { grid-template-columns: 36px repeat(3, minmax(0, 1fr)) 32px; grid-template-areas: "logo main main main go" ". w roi risk ."; }
  .pf-row .pf-w { grid-area: w; }
  .pf-ctx { padding: 0 0 16px 48px; }
  .pf-news a { white-space: normal; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
  .pf-news li { flex-direction: column; gap: 2px; }
  .pf-acts { padding: 18px 0 32px; }
}

/* Portfolios dashboard: a heading with the way to all of them, then a card per portfolio (its return held to the end,
   how it splits, what's in it) and one to build your own; a portfolio's page opens with a way back. */
.pf-dash-h { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; padding: 22px 0 14px; }
.pf-dash-h h2 { margin: 0; font: 750 19px/1.2 var(--font-display, var(--font)); letter-spacing: -.02em; }
.pf-dash-h a, .pf-back { font-size: 13.5px; font-weight: 600; color: var(--accent); text-decoration: none; }
.pf-back { display: inline-block; margin: 4px 0 10px; }
.pf-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 14px; padding-bottom: 40px; }
.pf-card { display: flex; flex-direction: column; gap: 12px; min-width: 0; padding: 20px; border-radius: 18px; background: var(--fill-3); color: var(--label); text-decoration: none; transition: background var(--fast), transform var(--fast); }
.pf-card:hover { background: var(--fill-2); }
.pf-card:active { transform: scale(.99); }
.pf-card-top { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.pf-card h3 { margin: 0; font: 700 17px/1.2 var(--font-display, var(--font)); letter-spacing: -.01em; }
.pf-card p { margin: -4px 0 0; font-size: 13px; line-height: 1.45; color: var(--label-3); }
.pf-card-risk { flex: none; font-size: 11.5px; font-weight: 650; }
.pf-card-risk.low { color: var(--good); } .pf-card-risk.medium { color: #f5a524; } .pf-card-risk.high { color: var(--bad); }
.pf-card-ret { display: flex; flex-direction: column; gap: 2px; }
.pf-card-ret b { font: 800 34px/1 var(--font-display, var(--font)); letter-spacing: -.03em; font-variant-numeric: tabular-nums; }
.pf-card-ret b.up { color: var(--good); } .pf-card-ret b.down { color: var(--bad); }
.pf-card-ret small { font-size: 12px; color: var(--label-3); }
.pf-card-ret.muted { font-size: 13px; color: var(--label-3); }
.pf-card .pf-split { margin: 0; height: 5px; }
.pf-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.pf-chip { display: inline-flex; align-items: center; gap: 5px; height: 26px; padding: 0 10px; border-radius: var(--r-pill); background: var(--fill-2); font-size: 12px; font-weight: 600; color: var(--label-2); white-space: nowrap; }
.pf-chip > *:first-child:not(:only-child) { flex: none; }
.pf-chip.more { padding: 0 9px; color: var(--label-3); }
.pf-card-foot { display: flex; align-items: center; gap: 12px; margin-top: auto; font-size: 12px; color: var(--label-3); }
.pf-card-foot em, .pf-own em { margin-left: auto; font-style: normal; font-weight: 650; color: var(--accent); }
.pf-own { justify-content: center; background: none; box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--sep) 80%, transparent); }
.pf-own:hover { background: var(--fill-3); }
.pf-own em { margin-left: 0; }
.pf-how { font-size: 12.5px; color: var(--label-2); }
@media (max-width: 720px) {
  .pf-cards { grid-template-columns: 1fr; gap: 10px; }
  .pf-card { padding: 16px; }
  .pf-card-ret b { font-size: 30px; }
}

/* Portfolios: the return if the calls come true beside the likely one, weighing each by its chance. */
.pf-card-rets { display: flex; align-items: flex-end; gap: 22px; }
.pf-card-ret.likely b { font-size: 24px; color: var(--label); }
.pf-card-ret.likely b.up { color: var(--good); } .pf-card-ret.likely b.down { color: var(--bad); }
.pf-sum b:not(.up):not(.down) { color: var(--label); }
.pf-sum b.down { color: var(--bad); }
.pf-likely b.up { color: var(--good); } .pf-likely b.down { color: var(--bad); }
.pf-head-row, .pf-row { grid-template-columns: 36px minmax(0, 1fr) 80px 105px 100px 115px 88px 32px; gap: 18px; }
@media (max-width: 1000px) {
  .pf-head-row, .pf-row { grid-template-columns: 36px minmax(0, 1fr) 70px 95px 90px 105px 32px; }
}
@media (max-width: 720px) {
  .pf-row { grid-template-columns: 36px repeat(4, minmax(0, 1fr)) 32px; grid-template-areas: "logo main main main main go" ". w roi likely risk ."; gap: 10px 10px; }
  .pf-row .pf-likely { grid-area: likely; }
  .pf-card-ret.likely b { font-size: 22px; }
}

/* Portfolios, redesigned. A card: the portfolio's mark (an icon on its color), name, one line of what it is and a
   risk pill; both returns beside a ring of its split; its three biggest holdings with logo, weight bar and share;
   the split in words. A portfolio's page: the mark large, four stat tiles with icons, the split by kind (ring) and
   by risk (bar), then the positions. */
.pf-ic { display: inline-grid; place-items: center; flex: none; border-radius: 30%; background: color-mix(in srgb, var(--c) 16%, transparent); color: var(--c); }
.pf-ic svg { width: 52%; height: 52%; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }
.tp-pfs { margin: 4px 0 26px; }
.tp-pfs .pf-dash-h { padding: 6px 0 12px; }
.pf-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(310px, 1fr)); gap: 14px; padding-bottom: 8px; }
.pf-page .pf-cards { padding: 8px 0 48px; }
.pf-card { position: relative; display: flex; flex-direction: column; gap: 16px; padding: 18px; border-radius: 20px; background: var(--fill-3); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--sep) 55%, transparent); overflow: hidden; }
.pf-card::before { content: ""; position: absolute; inset: 0 0 auto; height: 90px; background: radial-gradient(120% 100% at 0 0, color-mix(in srgb, var(--c, transparent) 14%, transparent), transparent 70%); pointer-events: none; }
.pf-card:hover { background: color-mix(in srgb, var(--fill-2) 70%, var(--fill-3)); }
.pf-card > * { position: relative; }
.pf-card-top { display: flex; align-items: flex-start; gap: 12px; }
.pf-card-name { flex: 1; min-width: 0; }
.pf-card h3 { margin: 1px 0 3px; font: 700 16px/1.2 var(--font-display, var(--font)); letter-spacing: -.01em; color: var(--label); }
.pf-card p { margin: 0; font-size: 12.5px; line-height: 1.4; color: var(--label-3); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.pf-pill { flex: none; padding: 3px 9px; border-radius: var(--r-pill); font-size: 11px; font-weight: 700; letter-spacing: .02em; }
.pf-pill.low { color: var(--good); background: color-mix(in srgb, var(--good) 14%, transparent); }
.pf-pill.medium { color: #f5a524; background: color-mix(in srgb, #f5a524 14%, transparent); }
.pf-pill.high { color: var(--bad); background: color-mix(in srgb, var(--bad) 14%, transparent); }
.pf-card-mid { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.pf-card-nums { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.pf-card-nums b { font: 800 32px/1 var(--font-display, var(--font)); letter-spacing: -.035em; font-variant-numeric: tabular-nums; }
.pf-card-nums b.up { color: var(--good); } .pf-card-nums b.down { color: var(--bad); }
.pf-card-nums small { font-size: 11.5px; color: var(--label-3); }
.pf-card-likely { margin-top: 6px; font-size: 12.5px; color: var(--label-3); }
.pf-card-likely i { font-style: normal; font-weight: 700; color: var(--label-2); font-variant-numeric: tabular-nums; }
.pf-card-likely i.up { color: var(--good); } .pf-card-likely i.down { color: var(--bad); }
.pf-donut { flex: none; }
.pf-donut text { fill: var(--label); font: 750 15px var(--font-display, var(--font)); }
.pf-donut text.sub { fill: var(--label-3); font: 600 8px var(--font); letter-spacing: .06em; text-transform: uppercase; }
.pf-card-hold { display: flex; flex-direction: column; gap: 8px; margin: 0; padding: 12px 0 0; list-style: none; border-top: 1px solid color-mix(in srgb, var(--sep) 55%, transparent); }
.pf-card-hold li { display: grid; grid-template-columns: 22px minmax(0, 1fr) 72px 34px; align-items: center; gap: 9px; font-size: 13px; }
.pf-hold-logo { display: grid; place-items: center; width: 22px; height: 22px; overflow: hidden; border-radius: 50%; }
.pf-hold-logo > * { margin: 0; }
.pf-hold-logo .pk-topic { width: 22px; height: 22px; font-size: 10px; }
.pf-hold-logo .pk-topic svg { width: 12px; height: 12px; }
.pf-hold-name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 600; color: var(--label-2); }
.pf-hold-bar { height: 4px; border-radius: 4px; background: var(--fill-2); overflow: hidden; }
.pf-hold-bar i { display: block; height: 100%; border-radius: inherit; }
.pf-card-hold b { text-align: right; font-weight: 650; font-variant-numeric: tabular-nums; color: var(--label); }
.pf-card-foot { display: flex; align-items: center; flex-wrap: wrap; gap: 6px 14px; font-size: 11.5px; color: var(--label-3); }
.pf-card-foot span { display: inline-flex; align-items: center; gap: 6px; }
.pf-card-foot span i { width: 7px; height: 7px; border-radius: 50%; }
.pf-card-foot em { margin-left: auto; font-style: normal; font-size: 16px; color: var(--label-3); transition: transform var(--fast), color var(--fast); }
.pf-card:hover .pf-card-foot em { transform: translateX(3px); color: var(--label); }
.pf-card-empty { font-size: 13px; color: var(--label-3); }
.pf-own { align-items: flex-start; justify-content: center; gap: 10px; background: none; box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--sep) 80%, transparent); }
.pf-own h3 { margin-top: 6px; }
.pf-own em { margin: 4px 0 0; font-style: normal; font-weight: 650; color: var(--accent); }
.pf-skel { min-height: 300px; gap: 14px; }
.pf-skel span { display: block; height: 14px; border-radius: 8px; background: var(--fill-2); animation: pf-shimmer 1.4s ease-in-out infinite; }
.pf-skel span:nth-child(1) { width: 55%; height: 18px; } .pf-skel span:nth-child(2) { width: 35%; height: 34px; } .pf-skel span:nth-child(3) { width: 80%; }
@keyframes pf-shimmer { 50% { opacity: .45; } }
@media (prefers-reduced-motion: reduce) { .pf-skel span { animation: none; } }

.pfo-hero { display: flex; align-items: center; gap: 16px; padding: 4px 0 22px; }
.pfo-hero h1 { margin: 0; font: 800 30px/1.1 var(--font-display); letter-spacing: -.03em; }
.pfo-hero p { margin: 5px 0 0; font-size: 14px; color: var(--label-3); }
.pf-tiles { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; padding: 18px 0 14px; }
.pf-tile { display: flex; flex-direction: column; gap: 6px; min-width: 0; padding: 16px; border-radius: 18px; background: var(--fill-3); }
.pf-tile-h { display: inline-flex; align-items: center; gap: 7px; font: 650 11px var(--font); letter-spacing: .06em; text-transform: uppercase; color: var(--label-3); }
.pf-tile-h svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.pf-tile b { font: 800 26px/1.05 var(--font-display, var(--font)); letter-spacing: -.03em; font-variant-numeric: tabular-nums; color: var(--label); }
.pf-tile b.up { color: var(--good); } .pf-tile b.down { color: var(--bad); }
.pf-tile b.risk-low { color: var(--good); } .pf-tile b.risk-medium { color: #f5a524; } .pf-tile b.risk-high { color: var(--bad); }
.pf-tile small { font-size: 12px; line-height: 1.35; color: var(--label-3); }
.pf-break { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) auto; align-items: center; gap: 28px; padding: 18px; margin-bottom: 18px; border-radius: 18px; background: var(--fill-3); }
.pf-break ul { display: flex; flex-direction: column; gap: 7px; margin: 0; padding: 0; list-style: none; font-size: 13px; color: var(--label-2); }
.pf-break li { display: flex; align-items: center; gap: 8px; }
.pf-break li i { width: 8px; height: 8px; border-radius: 50%; flex: none; }
.pf-break li b { margin-left: auto; padding-left: 14px; font-weight: 650; font-variant-numeric: tabular-nums; color: var(--label); }
.pf-break-kind { display: flex; align-items: center; gap: 22px; }
.pf-break-kind ul { flex: 1; }
.pf-break-risk { display: flex; flex-direction: column; gap: 10px; }
.pf-break-h { font: 650 11px var(--font); letter-spacing: .06em; text-transform: uppercase; color: var(--label-3); }
.pf-riskbar { display: flex; gap: 3px; height: 8px; border-radius: 8px; overflow: hidden; }
.pf-riskbar i, .pf-break-risk li i { background: var(--label-3); }
.pf-riskbar .low, .pf-break-risk li i.low { background: var(--good); }
.pf-riskbar .medium, .pf-break-risk li i.medium { background: #f5a524; }
.pf-riskbar .high, .pf-break-risk li i.high { background: var(--bad); }
.pf-break-risk ul { flex-direction: row; gap: 16px; }
.pf-break-risk li b { margin-left: 4px; padding-left: 0; }
.pf-break-act { display: flex; flex-direction: column; align-items: stretch; gap: 10px; }
.pf-break-act .pf-amt { display: flex; flex-direction: column; gap: 6px; }
.pf-break-act .pf-amt > span:first-child { font: 650 11px var(--font); letter-spacing: .06em; text-transform: uppercase; color: var(--label-3); }
.pf-break-act .pf-amt-in { background: var(--fill-2); }
@media (max-width: 1000px) {
  .pf-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .pf-break { grid-template-columns: 1fr 1fr; }
  .pf-break-act { grid-column: 1 / -1; flex-direction: row; align-items: flex-end; }
}
/* Phones: the three portfolios on Top trades swipe sideways; everything else stacks. */
@media (max-width: 720px) {
  .pf-strip-cards { display: flex; gap: 10px; margin: 0 -16px; padding: 0 16px 6px; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; }
  .pf-strip-cards::-webkit-scrollbar { display: none; }
  .pf-strip-cards > .pf-card { flex: 0 0 84%; scroll-snap-align: start; }
  .pf-cards { grid-template-columns: 1fr; }
  .pfo-hero { gap: 12px; }
  .pfo-hero h1 { font-size: 25px; }
  .pfo-hero .pf-ic { width: 46px !important; height: 46px !important; }
  .pf-tiles { gap: 8px; }
  .pf-tile { padding: 13px; border-radius: 16px; }
  .pf-tile b { font-size: 21px; }
  .pf-break { grid-template-columns: 1fr; gap: 18px; padding: 16px; }
  .pf-break-act { flex-direction: column; align-items: stretch; }
}

/* Portfolios, third pass. Sections (General, Stocks, Crypto, Just for fun) of cards; a card leads with its likely
   return, the best case quietly beside it, a ring of what it's made of, its three biggest holdings, its risk and a
   Track button. A portfolio's page: its mark, the amount and Track; four plain numbers; two light charts (what's in
   it, likely against best case); then the positions, each opening to how it's priced, the funds and the news. */
.pf-sec { padding: 6px 0 22px; }
.pf-sec h2 { margin: 0 0 12px; font: 700 15px/1.2 var(--font-display, var(--font)); letter-spacing: -.01em; color: var(--label-2); }
.pf-card { cursor: pointer; gap: 14px; }
.pf-card:focus-visible { outline: 2px solid color-mix(in srgb, var(--accent) 60%, transparent); outline-offset: 2px; }
.pf-card-nums small { order: -1; font-size: 11px; font-weight: 650; letter-spacing: .06em; text-transform: uppercase; color: var(--label-3); }
.pf-card-nums b { font: 800 30px/1.05 var(--font-display, var(--font)); letter-spacing: -.035em; color: var(--label); }
.pf-card-best { margin-top: 4px; font-size: 12px; color: var(--label-3); }
.pf-card-best i { font-style: normal; font-weight: 650; color: var(--label-2); font-variant-numeric: tabular-nums; }
.pf-card .pf-hold-bar i { background: var(--c, var(--accent)); }
.pf-card-foot { justify-content: space-between; padding-top: 2px; }
.pf-risk { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 600; font-style: normal; color: var(--label-2); }
.pf-risk i { width: 7px; height: 7px; border-radius: 50%; background: var(--label-3); }
.pf-risk.low i { background: var(--good); } .pf-risk.medium i { background: #f5a524; } .pf-risk.high i { background: var(--bad); }
.pf-trk { height: 30px; padding: 0 14px; border: 0; border-radius: var(--r-pill); background: var(--label); color: var(--bg); font: 650 12.5px var(--font); cursor: pointer; transition: opacity var(--fast); }
.pf-trk:hover { opacity: .85; }
.pf-trk.on { background: color-mix(in srgb, var(--good) 16%, transparent); color: var(--good); }
.pf-trk:disabled { opacity: .6; cursor: default; }
.pf-trk.big { height: 38px; padding: 0 20px; font-size: 14px; }

.pfo-hero { align-items: center; gap: 16px; padding: 4px 0 26px; }
.pfo-hero-t { flex: 1; min-width: 0; }
.pfo-hero-act { display: flex; align-items: center; gap: 10px; flex: none; }
.pfo-hero-act .pf-amt-in { height: 38px; }
.pf-nums { display: grid; grid-template-columns: 1.3fr 1fr 1fr 1fr; padding: 4px 0 22px; border-bottom: 1px solid color-mix(in srgb, var(--sep) 60%, transparent); }
.pf-num { display: flex; flex-direction: column; gap: 5px; min-width: 0; padding: 0 22px; border-left: 1px solid color-mix(in srgb, var(--sep) 60%, transparent); }
.pf-num:first-child { padding-left: 0; border-left: 0; }
.pf-num small { font-size: 11px; font-weight: 650; letter-spacing: .06em; text-transform: uppercase; color: var(--label-3); }
.pf-num b { font: 800 26px/1.05 var(--font-display, var(--font)); letter-spacing: -.03em; font-variant-numeric: tabular-nums; color: var(--label); }
.pf-num.main b { font-size: 36px; }
.pf-num b.up { color: var(--good); } .pf-num b.down { color: var(--bad); }
.pf-num span { font-size: 12.5px; color: var(--label-3); }
.pf-num .pf-risk { font-size: 12.5px; }
.pf-charts { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr); gap: 36px; padding: 24px 0; border-bottom: 1px solid color-mix(in srgb, var(--sep) 60%, transparent); }
.pf-chart h3 { margin: 0 0 4px; font: 650 14px var(--font); color: var(--label); }
.pf-chart p { margin: 0 0 14px; font-size: 12px; color: var(--label-3); }
.pf-mix { display: flex; align-items: center; gap: 24px; margin-top: 14px; }
.pf-mix ul { flex: 1; display: flex; flex-direction: column; gap: 8px; margin: 0; padding: 0; list-style: none; font-size: 13px; color: var(--label-2); }
.pf-mix li { display: flex; align-items: center; gap: 9px; }
.pf-mix li i { flex: none; width: 8px; height: 8px; border-radius: 2px; }
.pf-mix li b { margin-left: auto; font-weight: 650; font-variant-numeric: tabular-nums; color: var(--label); }
.pf-bars { display: flex; flex-direction: column; gap: 9px; margin: 0; padding: 0; list-style: none; }
.pf-bars li { display: grid; grid-template-columns: 92px minmax(0, 1fr) 56px; align-items: center; gap: 12px; font-size: 12.5px; }
.pf-bars-n { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 600; color: var(--label-2); }
.pf-bars-t { position: relative; height: 10px; }
.pf-bars-t i { position: absolute; top: 0; height: 100%; border-radius: 3px; }
.pf-bars-t i.best { background: color-mix(in srgb, var(--c, var(--accent)) 22%, transparent); }
.pf-bars-t i.lik { top: 2px; height: 6px; background: var(--good); }
.pf-bars-t i.lik.down { background: var(--bad); }
.pf-bars-zero { position: absolute; top: -3px; bottom: -3px; width: 1px; background: var(--sep-strong, var(--label-3)); }
.pf-bars-more { position: absolute; right: -2px; top: -5px; font-style: normal; font-size: 13px; color: var(--label-3); }
.pf-bars li > b { text-align: right; font-weight: 650; font-variant-numeric: tabular-nums; color: var(--label); }

.pf-list-h, .pf-row { display: grid; grid-template-columns: 32px minmax(0, 1fr) 70px 76px 84px 68px 76px 20px; grid-template-areas: none; align-items: center; gap: 16px; padding: 0 6px; }
.pf-list-h { height: 42px; margin-top: 8px; font: 650 10.5px var(--font); letter-spacing: .07em; text-transform: uppercase; color: var(--label-3); }
.pf-list-h > :first-child { grid-column: 1 / 3; }
.pf-pos { border-top: 1px solid color-mix(in srgb, var(--sep) 60%, transparent); }
.pf-row { min-height: 64px; padding-top: 10px; padding-bottom: 10px; list-style: none; cursor: pointer; }
.pf-row::-webkit-details-marker { display: none; }
.pf-row:hover { background: color-mix(in srgb, var(--fill-3) 60%, transparent); }
.pf-row-logo { display: grid; place-items: center; width: 32px; height: 32px; overflow: hidden; border-radius: 50%; }
.pf-row-logo > * { margin: 0; }
.pf-row-logo .pk-topic { width: 32px; height: 32px; background: #fff; color: #1c1c1e; }
.pf-row-main { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.pf-row-title { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font: 600 14px var(--font); color: var(--label); text-decoration: none; }
.pf-row-title:hover { color: var(--accent); }
.pf-row-by { display: flex; align-items: center; gap: 6px; min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; font-size: 12px; color: var(--label-3); }
.pf-row-by .av { flex: none; }
.pf-row-w { display: flex; flex-direction: column; gap: 2px; }
.pf-row-w b, .pf-row-n b, .pf-row-n { font-size: 14px; font-weight: 650; font-variant-numeric: tabular-nums; color: var(--label); }
.pf-row-w small { font-size: 11.5px; color: var(--label-3); }
.pf-row-n b.up { color: var(--good); } .pf-row-n b.down { color: var(--bad); } .pf-row-n b.muted { color: var(--label-3); }
.pf-row-n.best, .pf-row-n.end { font-weight: 550; color: var(--label-2); }
.pf-row-chev svg { width: 16px; height: 16px; fill: none; stroke: var(--label-3); stroke-width: 2; stroke-linecap: round; transition: transform .2s var(--ease); }
.pf-pos[open] .pf-row-chev svg { transform: rotate(90deg); }
.pf-pos .pf-ctx { padding: 2px 6px 18px 54px; }

@media (max-width: 1000px) {
  .pf-nums { grid-template-columns: 1fr 1fr; gap: 18px 0; }
  .pf-num:nth-child(3) { padding-left: 0; border-left: 0; }
  .pf-charts { grid-template-columns: 1fr; gap: 26px; }
  .pf-list-h, .pf-row { grid-template-columns: 32px minmax(0, 1fr) 60px 70px 76px 60px 20px; }
  .pf-list-h > :nth-child(6), .pf-row-n.end { display: none; }
}
/* Phones: the hero's amount and Track drop under the name; numbers two by two; a position is its name over its
   weight, likely, best case and chance. */
@media (max-width: 720px) {
  .pf-sec h2 { margin-bottom: 10px; }
  .pfo-hero { flex-wrap: wrap; padding-bottom: 20px; }
  .pfo-hero-act { width: 100%; }
  .pfo-hero-act .pf-amt-in { flex: 1; }
  .pf-num { padding: 0 14px; }
  .pf-num:nth-child(odd) { padding-left: 0; border-left: 0; }
  .pf-num b { font-size: 22px; }
  .pf-num.main b { font-size: 28px; }
  .pf-mix { gap: 18px; }
  .pf-bars li { grid-template-columns: 70px minmax(0, 1fr) 50px; gap: 10px; }
  .pf-list-h { display: none; }
  .pf-row { grid-template-columns: 32px repeat(4, minmax(0, 1fr)) 16px; grid-template-areas: "logo main main main main chev" ". w lik best ch ."; gap: 8px 10px; padding: 12px 0; }
  .pf-row-logo { grid-area: logo; } .pf-row-main { grid-area: main; } .pf-row-w { grid-area: w; } .pf-row-chev { grid-area: chev; }
  .pf-row > .pf-row-n:nth-of-type(4) { grid-area: lik; } .pf-row > .pf-row-n.best { grid-area: best; } .pf-row > .pf-row-n:nth-of-type(6) { grid-area: ch; }
  .pf-row-n.end { display: none; }
  .pf-pos .pf-ctx { padding: 0 0 16px 42px; }
}

.pf-row-n .pk-clock { color: inherit; }
.pf-bars-t i.lik { top: 1px; height: 8px; }

/* Predictions: a search bar of its own above the filters, easy to see, instead of an icon among them. */
.tm-find { display: flex; align-items: center; gap: 10px; height: 44px; margin: 0 0 12px; padding: 0 16px; border-radius: 14px; background: var(--fill-3); box-shadow: inset 0 0 0 1px var(--sep); color: var(--label-3); cursor: text; transition: box-shadow var(--fast), background var(--fast); }
.tm-find:hover { background: color-mix(in srgb, var(--fill-2) 60%, var(--fill-3)); }
.tm-find:focus-within { box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--accent) 70%, transparent); background: var(--fill-3); }
.tm-find svg { flex: none; width: 17px; height: 17px; fill: currentColor; }
.tm-find input { flex: 1; min-width: 0; height: 100%; border: 0; outline: 0; background: none; color: var(--label); font: 500 14.5px var(--font); }
.tm-find input::placeholder { color: var(--label-3); }
@media (max-width: 720px) {
  .tm-find { height: 40px; margin-bottom: 10px; padding: 0 14px; border-radius: 12px; }
  .tm-find input { font-size: 16px; }
}
/* The search bar spans the top of the grid, the topic bar under it, then the list beside the insights. */
.tm-grid > .tm-main > .tm-find { grid-column: 1 / -1; grid-row: 1; }
.tm-grid > .tm-main > .tm-tool { grid-row: 2; }
.tm-grid > .tm-main > .tm-body { grid-row: 3; }
.tm-grid > .ir-slot { grid-row: 3; }
.tr-in .bk-confirm span { flex-wrap: wrap; }

/* Predictions, one page: each row's expected return a year beside the move since the call, and a slim row of
   portfolios above the feed. */
.pk-exp { display: flex; align-items: center; min-width: 0; }
.pk-exp b i { margin-left: 1px; font-style: normal; font-size: .72em; font-weight: 600; color: var(--label-3); }
.pk-exp b.muted { color: var(--label-3); }
.pk-row.pk2 .pk-exp .pk-num b { font-size: 15px; font-weight: 650; }
.pk-row.pk2 .pk-exp .pk-num small { font-size: 11.5px; max-width: 120px; }
.pk-list-h.pk2, .pk-row.pk2 { grid-template-columns: 36px minmax(0, 1fr) 140px 120px 140px 84px 32px; gap: 22px; }
@media (max-width: 1100px) {
  .pk-row.pk2 { grid-template-columns: 36px auto auto minmax(0, 1fr) 32px; grid-template-areas: "logo main main main go" ". now exp crowd ."; gap: 8px 14px; }
  .pk-row.pk2 .pk-logo { grid-area: logo; align-self: start; }
  .pk-row.pk2 .pk-main { grid-area: main; }
  .pk-row.pk2 .pk-now { grid-area: now; }
  .pk-row.pk2 .pk-exp { grid-area: exp; }
  .pk-row.pk2 .pk-crowd { grid-area: crowd; overflow: hidden; }
  .pk-row.pk2 .pk-go { grid-area: go; align-self: start; }
  .pk-row.pk2 .pk-due2 { display: none; }
  .pk-row.pk2 .pk-exp .pk-num small { display: none; }
  .pk-row.pk2 .pk-crowd .pk-pub { flex-direction: row; align-items: baseline; gap: 5px; }
  .pk-row.pk2 .pk-crowd .pk-val b { font-size: 14px; }
  .pk-row.pk2 .pk-crowd .pk-sub { font-size: 13px; }
}
@media (max-width: 720px) {
  .pk-row.pk2 { grid-template-columns: 36px auto auto minmax(0, 1fr) 32px; grid-template-areas: "logo main main main go" ". now exp crowd ."; gap: 8px 12px; }
  .pk-row.pk2 .pk-now:empty + .pk-exp { grid-column: 2; }
  .pk-row.pk2 .pk-exp .pk-num b { font-size: 14px; }
}

.tp-pfs { margin: 14px 0 6px; }
.tp-pfs .pf-dash-h { padding: 4px 0 10px; }
.tp-pfs .pf-dash-h h2 { font-size: 15px; color: var(--label-2); }
.pf-minis { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.pf-mini { position: relative; display: flex; flex-direction: column; gap: 12px; min-width: 0; padding: 14px 16px; border-radius: 16px; background: var(--fill-3); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--sep) 55%, transparent); cursor: pointer; overflow: hidden; transition: background var(--fast); }
.pf-mini::before { content: ""; position: absolute; inset: 0 0 auto; height: 70px; background: radial-gradient(120% 100% at 0 0, color-mix(in srgb, var(--c, transparent) 12%, transparent), transparent 70%); pointer-events: none; }
.pf-mini > * { position: relative; }
.pf-mini:hover { background: color-mix(in srgb, var(--fill-2) 70%, var(--fill-3)); }
.pf-mini-top { display: flex; align-items: center; gap: 10px; min-width: 0; }
.pf-mini-top b { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font: 650 14px var(--font); color: var(--label); }
.pf-mini-top .pf-risk i { width: 8px; height: 8px; }
.pf-mini-mid { display: flex; align-items: center; justify-content: space-between; }
.pf-mini-mid small { display: block; font-size: 10.5px; font-weight: 650; letter-spacing: .06em; text-transform: uppercase; color: var(--label-3); }
.pf-mini-mid b { font: 800 24px/1.1 var(--font-display, var(--font)); letter-spacing: -.03em; color: var(--label); }
.pf-mini-mid b.up { color: var(--good); } .pf-mini-mid b.down { color: var(--bad); }
.pf-mini .pf-donut text { font-size: 17px; }
.pf-mini .pf-donut text.sub { display: none; }
.pf-mini-foot { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.pf-mini-hold { display: flex; align-items: center; }
.pf-mini-hold > span { display: grid; place-items: center; width: 22px; height: 22px; overflow: hidden; border-radius: 50%; box-shadow: 0 0 0 2px var(--fill-3); }
.pf-mini-hold > span + span { margin-left: -5px; }
.pf-mini-hold > span > * { margin: 0; }
.pf-mini-hold .pk-topic { width: 22px; height: 22px; }
.pf-mini-hold .pk-topic svg { width: 12px; height: 12px; }
.pf-mini-hold em { margin-left: 6px; font-style: normal; font-size: 12px; font-weight: 600; color: var(--label-3); }
.pf-mini .pf-trk { height: 28px; padding: 0 12px; font-size: 12px; }
.pf-mini.pf-skel { min-height: 136px; gap: 14px; }
@media (max-width: 720px) {
  .pf-minis { display: flex; gap: 10px; margin: 0 -16px; padding: 0 16px 4px; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; }
  .pf-minis::-webkit-scrollbar { display: none; }
  .pf-minis > .pf-mini { flex: 0 0 72%; scroll-snap-align: start; }
}

/* A portfolio's page: one chart with tabs (the mix, then each holding with its caller's entry marked), then a grid of
   risk numbers, flat and quiet. */
.pf-graph-box { padding: 24px 0 8px; border-bottom: 1px solid color-mix(in srgb, var(--sep) 60%, transparent); }
.pf-tabs { display: flex; gap: 6px; overflow-x: auto; scrollbar-width: none; padding-bottom: 2px; }
.pf-tabs::-webkit-scrollbar { display: none; }
.pf-tabs button { flex: none; display: inline-flex; align-items: center; gap: 7px; height: 32px; padding: 0 12px 0 7px; border: 0; border-radius: var(--r-pill); background: var(--fill-3); color: var(--label-2); font: 600 12.5px var(--font); cursor: pointer; transition: background var(--fast), color var(--fast); }
.pf-tabs button:hover { color: var(--label); }
.pf-tabs button.on { background: var(--label); color: var(--bg); }
.pf-tabs .pf-ic { border-radius: 50%; }
.pf-tab-logo { display: grid; place-items: center; width: 20px; height: 20px; overflow: hidden; border-radius: 50%; }
.pf-tab-logo > * { margin: 0; }
.pf-tab-logo .pk-topic { width: 20px; height: 20px; }
.pf-tab-logo .pk-topic svg { width: 11px; height: 11px; }
.pf-graph-cap { margin: 16px 0 8px; font-size: 13px; color: var(--label-2); }
.pf-graph { position: relative; height: 300px; }
.pf-graph-wait { display: grid; place-items: center; height: 100%; font-size: 13px; color: var(--label-3); }
.pf-riskbox { padding: 24px 0; border-bottom: 1px solid color-mix(in srgb, var(--sep) 60%, transparent); }
.pf-riskbox h3 { margin: 0 0 14px; font: 650 14px var(--font); color: var(--label); }
.pf-stat-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1px; overflow: hidden; border-radius: 16px; background: color-mix(in srgb, var(--sep) 60%, transparent); }
.pf-stat-grid > div { display: flex; flex-direction: column; gap: 4px; padding: 14px 16px; background: var(--bg); }
.pf-stat-grid small { font-size: 11px; font-weight: 650; letter-spacing: .06em; text-transform: uppercase; color: var(--label-3); }
.pf-stat-grid b { font: 750 20px/1.15 var(--font-display, var(--font)); letter-spacing: -.02em; font-variant-numeric: tabular-nums; color: var(--label); }
.pf-stat-grid b.up, .pf-num b.up { color: var(--good); } .pf-stat-grid b.down { color: var(--bad); }
.pf-stat-grid b.risk-low { color: var(--good); } .pf-stat-grid b.risk-medium { color: #f5a524; } .pf-stat-grid b.risk-high { color: var(--bad); }
.pf-stat-grid span { font-size: 12px; color: var(--label-3); }
.pf-stats-note { margin: 12px 0 0; font-size: 12px; line-height: 1.5; color: var(--label-3); }
@media (max-width: 720px) {
  .pf-graph { height: 240px; }
  .pf-stat-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .pf-stat-grid > div { padding: 12px 13px; }
  .pf-stat-grid b { font-size: 18px; }
}

/* A portfolio's page in two columns: the chart, what's in it and the positions on the left; every number on a quiet
   sticky sidebar on the right (its likely return, the amount and Track, then short label-and-value lists). */
.pf-page { max-width: 1240px; }
.pfo-hero { padding-bottom: 18px; }
.pf-layout { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 44px; align-items: start; }
.pf-main { min-width: 0; }
.pf-main .pf-graph-box { padding-top: 6px; }
.pf-main .pf-charts { grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr); gap: 32px; }
.pf-main .pf-chart p { display: none; }
.pf-main .pf-chart h3 { margin-bottom: 14px; }
.pf-side { position: sticky; top: 84px; display: flex; flex-direction: column; gap: 18px; padding: 20px; border-radius: 20px; background: var(--fill-3); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--sep) 55%, transparent); }
.pf-side-head { display: flex; flex-direction: column; gap: 4px; }
.pf-side-head small, .pf-side h4 { font: 650 11px var(--font); letter-spacing: .06em; text-transform: uppercase; color: var(--label-3); }
.pf-side-head b { font: 800 40px/1.05 var(--font-display, var(--font)); letter-spacing: -.035em; font-variant-numeric: tabular-nums; color: var(--label); }
.pf-side-head b.up { color: var(--good); } .pf-side-head b.down { color: var(--bad); }
.pf-side-head span { font-size: 13px; color: var(--label-3); }
.pf-side-act { display: flex; gap: 8px; }
.pf-side-act .pf-amt-in { flex: 1; min-width: 0; height: 38px; background: var(--fill-2); }
.pf-side-act .pf-amt-in input { width: 100%; }
.pf-side h4 { margin: 4px 0 -8px; }
.pf-side-list { display: flex; flex-direction: column; margin: 0; }
.pf-side-list > div { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; padding: 9px 0; border-top: 1px solid color-mix(in srgb, var(--sep) 55%, transparent); }
.pf-side-list > div:first-child { border-top: 0; }
.pf-side-list dt { font-size: 13px; color: var(--label-2); cursor: help; }
.pf-side-list dd { margin: 0; }
.pf-side-list b { font: 650 14px var(--font); font-variant-numeric: tabular-nums; color: var(--label); }
.pf-side-list b.up { color: var(--good); } .pf-side-list b.down { color: var(--bad); }
.pf-side-list b.risk-low { color: var(--good); } .pf-side-list b.risk-medium { color: #f5a524; } .pf-side-list b.risk-high { color: var(--bad); }
@media (max-width: 1100px) {
  .pf-layout { grid-template-columns: minmax(0, 1fr); gap: 24px; }
  .pf-side { position: static; order: -1; display: grid; grid-template-columns: 1fr 1fr; gap: 14px 24px; }
  .pf-side-head, .pf-side-act { grid-column: 1 / -1; }
  .pf-side h4 { display: none; }
}
@media (max-width: 720px) {
  .pf-side { grid-template-columns: 1fr; padding: 16px; }
  .pf-side-head b { font-size: 34px; }
  .pf-main .pf-charts { grid-template-columns: 1fr; }
}
/* Narrower screens and phones: the sidebar's stats flow as one two-column grid under the likely return. */
@media (max-width: 1100px) {
  .pf-side-list { display: contents; }
  .pf-side-list > div, .pf-side-list > div:first-child { flex-direction: column; align-items: flex-start; gap: 2px; padding: 8px 0 0; border-top: 1px solid color-mix(in srgb, var(--sep) 55%, transparent); }
  .pf-side-list dt { font-size: 12px; color: var(--label-3); }
  .pf-side-list b { font-size: 15px; }
}
@media (max-width: 720px) {
  .pf-side { grid-template-columns: 1fr 1fr; gap: 12px 18px; }
}
/* The sidebar, flat: no box, just a hairline on its left; the likely return, the amount and Track, then quiet rows
   with no lines between them, each section opened by its small heading. */
@media (min-width: 1101px) {
  .pf-side { gap: 0; padding: 4px 0 0 28px; border-radius: 0; background: none; box-shadow: inset 1px 0 0 color-mix(in srgb, var(--sep) 55%, transparent); }
  .pf-side-head { padding-bottom: 16px; }
  .pf-side-head b { font-size: 44px; }
  .pf-side-act { padding-bottom: 22px; }
  .pf-side-act .pf-amt-in { height: 36px; background: var(--fill-3); }
  .pf-side-act .pf-trk.big { height: 36px; padding: 0 18px; font-size: 13.5px; }
  .pf-side h4 { margin: 0; padding: 18px 0 6px; border-top: 1px solid color-mix(in srgb, var(--sep) 55%, transparent); }
  .pf-side-list { padding-bottom: 4px; }
  .pf-side-list > div, .pf-side-list > div:first-child { padding: 6px 0; border-top: 0; }
  .pf-side-list dt { font-size: 13px; color: var(--label-3); }
  .pf-side-list b { font-size: 13.5px; font-weight: 600; }
}

/* Portfolios: one flat bar over the grid (types, then risk, sort and Build your own), and each card's past 3 months. */
.pf-bar { display: flex; align-items: center; gap: 12px; margin: 4px 0 18px; padding-bottom: 14px; border-bottom: 1px solid color-mix(in srgb, var(--sep) 60%, transparent); }
.pf-kinds { display: flex; gap: 2px; min-width: 0; overflow-x: auto; scrollbar-width: none; }
.pf-kinds::-webkit-scrollbar { display: none; }
.pf-kinds button { flex: none; height: 32px; padding: 0 13px; border: 0; border-radius: var(--r-pill); background: none; color: var(--label-3); font: 600 13.5px var(--font); cursor: pointer; transition: color var(--fast), background var(--fast); }
.pf-kinds button:hover { color: var(--label); }
.pf-kinds button.on { background: var(--fill-2); color: var(--label); }
.pf-bar-tools { display: flex; align-items: center; gap: 6px; margin-left: auto; flex: none; }
.pf-own-btn { display: inline-flex; align-items: center; gap: 6px; height: 30px; padding: 0 14px 0 11px; border-radius: var(--r-pill); background: var(--label); color: var(--bg); font: 650 12.5px var(--font); text-decoration: none; white-space: nowrap; }
.pf-own-btn svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; }
.pf-own-btn:hover { opacity: .88; }
.pf-page .pf-list > .pf-cards { padding: 0 0 48px; }
.pf-card-past { margin-top: 3px; font-size: 12px; color: var(--label-3); }
.pf-card-past b { font: 650 12px var(--font); font-variant-numeric: tabular-nums; color: var(--label-2); }
.pf-card-past b.up { color: var(--good); } .pf-card-past b.down { color: var(--bad); }
@media (max-width: 900px) {
  .pf-bar { flex-wrap: wrap; }
  .pf-kinds { flex: 1 1 100%; }
  .pf-bar-tools { margin-left: 0; width: 100%; }
  .pf-own-btn { margin-left: auto; }
}
@media (max-width: 900px) { .pf-bar-tools { flex-wrap: wrap; row-gap: 8px; } }
.pf-card-days { font-style: normal; color: var(--label-3); }

/* Portfolio cards, cleaner: flat, no glow, no ring or bars. A small mark and the name; one number with the other
   quietly beside it; the three biggest holdings as plain rows; risk and Track. */
.pf-card { gap: 18px; padding: 20px 20px 18px; border-radius: 18px; background: var(--fill-3); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--sep) 40%, transparent); }
.pf-card::before { display: none; }
.pf-card:hover { background: color-mix(in srgb, var(--fill-2) 55%, var(--fill-3)); }
.pf-card .pf-ic { border-radius: 9px; background: var(--fill-2); color: var(--c); }
.pf-card-top { align-items: center; gap: 12px; }
.pf-card h3 { margin: 0 0 2px; font: 650 15px/1.25 var(--font-display, var(--font)); letter-spacing: -.005em; }
.pf-card p { font-size: 12.5px; -webkit-line-clamp: 1; }
.pf-card-nums { display: flex; flex-direction: row; align-items: flex-end; justify-content: space-between; gap: 16px; }
.pf-card-main, .pf-card-side { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.pf-card-side { align-items: flex-end; text-align: right; }
.pf-card-nums small { order: 0; font: 500 12px var(--font); letter-spacing: 0; text-transform: none; color: var(--label-3); }
.pf-card-main b { font: 650 30px/1 var(--font-display, var(--font)); letter-spacing: -.03em; font-variant-numeric: tabular-nums; color: var(--label); }
.pf-card-side b { font: 600 15px/1.1 var(--font); letter-spacing: -.01em; font-variant-numeric: tabular-nums; color: var(--label-2); }
.pf-card-nums b.up { color: var(--good); } .pf-card-nums b.down { color: var(--bad); }
.pf-card-hold { gap: 9px; padding: 0; border: 0; }
.pf-card-hold li { grid-template-columns: 18px minmax(0, 1fr) auto; gap: 10px; font-size: 13px; }
.pf-card-hold li.more { display: block; padding-left: 28px; font-size: 12px; color: var(--label-3); }
.pf-card .pf-hold-logo, .pf-card .pf-hold-logo .pk-topic { width: 18px; height: 18px; }
.pf-card-hold .pf-hold-name { font-weight: 550; color: var(--label); }
.pf-card-hold b { font-weight: 550; color: var(--label-3); }
.pf-card-foot { padding-top: 14px; border-top: 1px solid color-mix(in srgb, var(--sep) 40%, transparent); }
.pf-card .pf-risk { font-weight: 500; color: var(--label-3); }
.pf-card .pf-risk i { width: 6px; height: 6px; }
.pf-card .pf-trk { height: 28px; padding: 0 13px; background: var(--fill-2); color: var(--label); font-weight: 600; }
.pf-card .pf-trk:hover { opacity: 1; background: var(--fill-1, var(--sep)); }
.pf-card .pf-trk.on { background: none; padding: 0 2px; color: var(--good); }

/* People, redone: the top three as podium cards (medal, big photo, Cred, their lead rate, their return), then a clean
   table: rank, the person, calls right and statements true as thin meters, return, live calls, Cred, Follow. */
.pp-page .tab-hint { padding: 14px 0 18px; font-size: 13px; }
.pp-top { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; margin-bottom: 30px; }
.pp-top-card { display: flex; flex-direction: column; align-items: center; min-width: 0; padding: 16px 18px 20px; border-radius: 20px; background: var(--fill-3); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--sep) 40%, transparent); color: var(--label); text-align: center; text-decoration: none; animation: rise var(--slow) var(--ease) both; animation-delay: calc(var(--i, 0) * 70ms); transition: background var(--fast), transform var(--med) var(--ease); }
.pp-top-card:hover { background: color-mix(in srgb, var(--fill-2) 55%, var(--fill-3)); transform: translateY(-2px); }
.pp-top-head { align-self: stretch; display: flex; align-items: center; justify-content: space-between; min-height: 28px; }
.pp-medal { display: grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; font: 700 13px var(--font); font-variant-numeric: tabular-nums; --m: #8e8e93; color: var(--m); background: color-mix(in srgb, var(--m) 16%, transparent); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--m) 35%, transparent); }
.pp-medal.m1 { --m: #e8b931; } .pp-medal.m2 { --m: #b8c0cc; } .pp-medal.m3 { --m: #d08a4f; }
.pp-top-card .av { margin: 4px 0 14px; }
.pp-top-name { display: flex; align-items: center; justify-content: center; gap: 4px; max-width: 100%; font: 650 18px/1.2 var(--font-display, var(--font)); letter-spacing: -.015em; }
.pp-top-name span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pp-top-handle { max-width: 100%; margin-top: 4px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 12.5px; color: var(--label-3); }
.pp-top-stats { align-self: stretch; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); margin-top: 18px; padding-top: 16px; border-top: 1px solid color-mix(in srgb, var(--sep) 40%, transparent); }
.pp-top-stats div { display: flex; flex-direction: column; gap: 5px; min-width: 0; }
.pp-top-stats div + div { border-left: 1px solid color-mix(in srgb, var(--sep) 40%, transparent); }
.pp-top-stats b { font: 650 22px/1 var(--font-display, var(--font)); letter-spacing: -.025em; font-variant-numeric: tabular-nums; color: var(--label); }
.pp-top-stats b.hi, .pp-top-stats b.up { color: var(--good); } .pp-top-stats b.lo, .pp-top-stats b.down { color: var(--bad); }
.pp-top-stats small { font-size: 11.5px; color: var(--label-3); }

.pp-list { display: flex; flex-direction: column; padding-bottom: 40px; }
.pp-head, .pp-row { display: grid; grid-template-columns: 26px minmax(0, 1fr) 130px 130px 80px 44px 64px 96px; align-items: center; gap: 18px; padding: 0 12px; }
.pp-head { height: 34px; margin-bottom: 4px; border-bottom: 1px solid color-mix(in srgb, var(--sep) 50%, transparent); font-size: 11.5px; font-weight: 600; color: var(--label-3); }
.pp-head span:first-child, .pp-head span:nth-child(5), .pp-head span:nth-child(6), .pp-head span:nth-child(7) { text-align: right; }
.pp-row { min-height: 66px; border-radius: 14px; color: var(--label); text-decoration: none; animation: rise var(--slow) var(--ease) both; animation-delay: calc(var(--i, 0) * 18ms); transition: background var(--fast); }
.pp-row:hover { background: var(--fill-3); }
.pp-rk { text-align: right; font: 600 13px var(--font); font-variant-numeric: tabular-nums; color: var(--label-3); }
.pp-who { display: flex; align-items: center; gap: 12px; min-width: 0; }
.pp-id { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.pp-nm { display: flex; align-items: center; gap: 4px; min-width: 0; font-size: 14.5px; font-weight: 600; letter-spacing: -.005em; }
.pp-nm span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pp-id small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 12px; color: var(--label-3); }
.pp-meter { display: flex; flex-direction: column; gap: 7px; min-width: 0; }
.pp-meter > span { display: flex; align-items: baseline; justify-content: space-between; gap: 6px; }
.pp-meter b { font: 600 14px var(--font); font-variant-numeric: tabular-nums; }
.pp-meter small { font-size: 11.5px; font-variant-numeric: tabular-nums; color: var(--label-3); }
.pp-meter i { display: block; height: 3px; border-radius: 3px; background: var(--fill-2); overflow: hidden; }
.pp-meter u { display: block; height: 100%; border-radius: inherit; background: var(--label-3); }
.pp-meter.good u { background: var(--good); } .pp-meter.bad u { background: var(--bad); }
.pp-meter.none, .pp-roi.none, .pp-live.none { color: var(--label-3); }
.pp-roi { display: flex; flex-direction: column; align-items: flex-end; gap: 3px; }
.pp-roi b { font: 600 15px var(--font); font-variant-numeric: tabular-nums; }
.pp-roi.up b { color: var(--good); } .pp-roi.down b { color: var(--bad); }
.pp-roi small { font-size: 11px; color: var(--label-3); }
.pp-live { text-align: right; font-size: 13.5px; font-variant-numeric: tabular-nums; color: var(--label-2); }
.pp-cred { display: flex; flex-direction: column; align-items: flex-end; gap: 6px; }
.pp-cred b { font: 700 20px/1 var(--font-display, var(--font)); letter-spacing: -.02em; font-variant-numeric: tabular-nums; color: var(--label); }
.pp-cred i { position: relative; width: 36px; height: 3px; border-radius: 3px; background: var(--fill-2); overflow: hidden; }
.pp-cred i::after { content: ""; position: absolute; inset: 0 auto 0 0; width: var(--w); border-radius: inherit; background: var(--label-3); }
.pp-cred.hi b { color: var(--good); } .pp-cred.hi i::after { background: var(--good); }
.pp-cred.lo b { color: var(--bad); } .pp-cred.lo i::after { background: var(--bad); }
.pp-row .follow, .pp-top-card .follow { justify-self: end; height: 28px; padding: 0 14px; font-size: 12.5px; background: var(--fill-2); color: var(--label); }
.pp-row .follow:hover, .pp-top-card .follow:hover { opacity: 1; background: color-mix(in srgb, var(--label) 18%, var(--fill-2)); }
.pp-row .follow.on, .pp-top-card .follow.on { background: none; color: var(--label-3); }
@media (max-width: 1100px) {
  .pp-head, .pp-row { grid-template-columns: 26px minmax(0, 1fr) 120px 80px 60px 90px; }
  .pp-head span:nth-child(4), .pp-head span:nth-child(6), .pp-row .pp-meter.truth, .pp-row .pp-live { display: none; }
}
@media (max-width: 720px) {
  .pp-top { display: flex; gap: 10px; margin: 0 -16px 22px; padding: 0 16px 4px; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; }
  .pp-top::-webkit-scrollbar { display: none; }
  .pp-top-card { flex: 0 0 78%; scroll-snap-align: start; }
  .pp-head, .pp-row { grid-template-columns: 20px minmax(0, 1fr) auto 44px; gap: 12px; padding: 0 6px; }
  .pp-head span:nth-child(3), .pp-head span:nth-child(8), .pp-row > .pp-meter, .pp-row .follow { display: none; }
  .pp-row { min-height: 60px; }
}
.pp-row, .pp-top-card { border: 0; }
.pp-id small, .pp-top-handle, .pp-top-stats small, .pp-roi small, .pp-meter small { text-transform: none; letter-spacing: 0; }
.pp-id { align-items: flex-start; } .pp-id small { margin: 0; max-width: 100%; }
@media (max-width: 720px) { .pp-top { scroll-padding: 0 16px; } }
/* A subject's people (one topic's sub-subject): the same podium and table, with its record, live calls and Cred. */
.pp-gap { height: 18px; }
.pp-head.sub, .pp-row.sub { grid-template-columns: 26px minmax(0, 1fr) 150px 50px 80px 96px; }
.pp-head.sub span:nth-child(4), .pp-head.sub span:nth-child(5) { text-align: right; }
button.pp-meter { padding: 6px 8px; margin: -6px -8px; border: 0; border-radius: 8px; background: none; color: inherit; font: inherit; text-align: left; cursor: pointer; transition: background var(--fast); }
button.pp-meter:hover { background: var(--fill-2); }
.pp-top-stats [data-go] { cursor: pointer; }
.pp-top-stats em { font-style: normal; }
.pp-top-stats em.up { color: var(--good); } .pp-top-stats em.down { color: var(--bad); }
@media (max-width: 720px) {
  .pp-head.sub, .pp-row.sub { grid-template-columns: 20px minmax(0, 1fr) 64px 44px; }
  .pp-row.sub .pp-meter { display: flex; }
  .pp-head.sub span:nth-child(3) { display: block; }
  .pp-head.sub span:nth-child(4), .pp-row.sub .pp-live, .pp-head.sub span:nth-child(6) { display: none; }
}
@media (min-width: 721px) and (max-width: 1100px) { .pp-head.sub, .pp-row.sub { grid-template-columns: 26px minmax(0, 1fr) 150px 70px 96px; } .pp-head.sub span:nth-child(5) { text-align: right; } }
/* People: early and sports-only Cred marked in words in place of the bar; empty cells read quietly. */
.pp-cred small { font-size: 10.5px; font-weight: 600; color: var(--label-3); }
.pp-cred.early b { opacity: .78; }
.pp-cred.none small { font-size: 12px; font-weight: 500; }
.pp-meter.none { font-size: 12px; color: var(--label-3); }
.pp-roi.none small { font-size: 12px; }
/* Where there's room for one record column, each person shows their own: statements for public figures and anyone
   without graded calls, calls for the rest. */
.pp-head b { font: inherit; }
.pp-head .h-narrow { display: none; }
@media (min-width: 721px) and (max-width: 1100px) {
  .pp-head .h-wide { display: none; } .pp-head .h-narrow { display: inline; }
  .pp-row.lead-truth .pp-meter.hit { display: none; }
  .pp-row.lead-truth .pp-meter.truth { display: flex; }
}

/* A figure's Overview: how the Cred score adds up, line by line, flat: what each part is, why, and its points. */
.ov-why { margin: 26px 0 8px; padding-top: 22px; border-top: 1px solid color-mix(in srgb, var(--sep) 50%, transparent); }
.ov-why h4 { margin: 0 0 10px; font: 650 15px/1.2 var(--font-display, var(--font)); letter-spacing: -.01em; color: var(--label); }
.ov-why ul { margin: 0; padding: 0; list-style: none; }
.ov-why li { display: grid; grid-template-columns: 170px minmax(0, 1fr) auto; align-items: baseline; gap: 16px; padding: 10px 0; }
.ov-why li + li { border-top: 1px solid color-mix(in srgb, var(--sep) 30%, transparent); }
.ov-why li > span { font-size: 14px; font-weight: 600; color: var(--label); }
.ov-why li small { font-size: 13px; line-height: 1.45; color: var(--label-3); }
.ov-why li b { min-width: 64px; text-align: right; font: 650 16px var(--font); font-variant-numeric: tabular-nums; color: var(--label-2); white-space: nowrap; }
.ov-why li b.up { color: var(--good); } .ov-why li b.down { color: var(--bad); }
.ov-why li.muted b { font-size: 12.5px; font-weight: 500; color: var(--label-3); }
.ov-why li.total { border-top: 1px solid color-mix(in srgb, var(--sep) 60%, transparent); }
.ov-why li.total > span { font-weight: 700; }
.ov-why li.total b em { font-style: normal; font-size: 20px; font-weight: 700; }
.ov-why li.total b em.good { color: var(--good); } .ov-why li.total b em.bad { color: var(--bad); }
.ov-why-cap { margin: 8px 0 0; font-size: 12px; color: var(--label-3); }
@media (max-width: 720px) {
  .ov-why li { grid-template-columns: minmax(0, 1fr) auto; gap: 2px 12px; }
  .ov-why li > span { grid-column: 1; }
  .ov-why li small { grid-column: 1 / -1; grid-row: 2; }
  .ov-why li b { grid-column: 2; grid-row: 1; }
}
.ov-why { border-top: 0; padding-top: 0; margin-top: 18px; }
/* How a Cred score adds up: a quiet link under the Overview's verdict, and the sheet it (or the photo's Cred badge) opens. */
.ov-why-btn { display: inline-flex; align-items: center; gap: 3px; margin-top: 12px; padding: 0; border: 0; background: none; font: 600 13.5px var(--font); color: var(--accent); cursor: pointer; }
.ov-why-btn svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; transition: transform var(--fast); }
.ov-why-btn:hover svg { transform: translateX(2px); }
.why-sheet { max-width: 620px; }
.why-sheet h2 { margin: 0 40px 6px 0; font: 700 22px/1.2 var(--font-display, var(--font)); letter-spacing: -.02em; }
.why-sheet .why-sub { margin: 0 0 10px; font-size: 14px; line-height: 1.5; color: var(--label-2); }
.why-sheet .why-sub b.up { color: var(--good); } .why-sheet .why-sub b.down { color: var(--bad); }
.why-sheet .ov-why { margin: 0; }
.pf-badge[data-cred-why] { cursor: pointer; }
.why-sheet { width: min(620px, 100%); max-height: calc(100vh - 32px); overflow-y: auto; }
/* A figure's Overview stats open what they count: a button that reads like the stat, lifting on hover. */
button.ov-stat.ov-go { display: flex; flex-direction: column; align-items: stretch; width: 100%; margin: 0; border-top: 0; border-right: 0; border-bottom: 0; background: none; color: inherit; font: inherit; text-align: left; cursor: pointer; border-radius: 10px; transition: background var(--fast); }
button.ov-stat.ov-go:hover { background: var(--fill-3); }
button.ov-stat.ov-go:hover small { color: var(--label-2); }
.main-col .feed-head { scroll-margin-top: 80px; }

/* A call's page, flatter: their words as a quote, and Cred's check as one section rather than a card. */
.qt { margin: 0; padding: 2px 0 2px 18px; border-left: 2px solid var(--sep-strong); }
.qt .post-text { font-size: 16.5px; line-height: 1.55; color: var(--label); }
.qt .post-text p { margin: 0 0 10px; }
.qt .post-text p:last-child { margin-bottom: 0; }
.qt .post-media { margin-top: 12px; max-width: 100%; }
.qt .post-media img { max-height: 420px; }
.qt-by { display: flex; align-items: center; flex-wrap: wrap; gap: 6px 10px; margin-top: 12px; font-size: 13px; color: var(--label-3); }
.qt-x { display: inline-grid; place-items: center; width: 14px; height: 14px; color: var(--label-2); }
.qt-x svg { width: 13px; height: 13px; fill: currentColor; }
.qt-by .link { margin-left: auto; }

.rp { margin-top: 38px; }
.rp-head { display: flex; align-items: center; gap: 12px; }
.rp-v { display: inline-flex; align-items: center; gap: 7px; font: 700 22px/1.1 var(--font-display, var(--font)); letter-spacing: -.02em; color: var(--label); }
.rp-v svg, .rp-v .ct-ic { width: 20px; height: 20px; }
.rp-v.right { color: var(--good); } .rp-v.wrong { color: var(--bad); } .rp-v.live { color: var(--live); }
.rp-when { margin-left: auto; font-size: 12.5px; color: var(--label-3); }
.rp-lead { margin: 12px 0 0; font-size: 18px; line-height: 1.55; letter-spacing: -.005em; color: var(--label); text-wrap: pretty; }
.rp-lead b, .rp-list b { font-weight: 650; font-variant-numeric: tabular-nums; }
.rp-h { display: flex; align-items: baseline; gap: 6px; margin: 28px 0 10px; font-size: 13px; font-weight: 650; color: var(--label-3); }
.rp-h small { font-size: 12px; font-weight: 500; }
.rp-list { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 10px; }
.rp-list li { position: relative; padding-left: 18px; font-size: 15px; line-height: 1.6; color: var(--label-2); }
.rp-list li::before { content: ""; position: absolute; left: 3px; top: .72em; width: 5px; height: 5px; border-radius: 50%; background: var(--label-3); }
.rp-src { display: flex; flex-direction: column; border-top: 1px solid color-mix(in srgb, var(--sep) 50%, transparent); }
.rp-src .src-chip { display: flex; align-items: center; gap: 12px; padding: 11px 4px; border: 0; border-bottom: 1px solid color-mix(in srgb, var(--sep) 50%, transparent); border-radius: 0; background: none; }
.rp-src .src-chip:hover { background: none; }
.rp-src .src-chip:hover .src-txt b { color: var(--accent); }
.rp-src .src-chip::after { content: "↗"; margin-left: auto; padding-left: 8px; font-size: 13px; color: var(--label-3); }
.rp-src .src-ic { flex: none; width: 20px; height: 20px; border-radius: 5px; }
.rp-src .src-txt { display: flex; align-items: baseline; gap: 10px; min-width: 0; flex-direction: row; }
.rp-src .src-txt b { flex: none; font-size: 14px; font-weight: 600; transition: color var(--fast); }
.rp-src .src-txt small { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 13.5px; color: var(--label-3); }
.rp-how { margin: 18px 0 0; font-size: 12.5px; line-height: 1.5; color: var(--label-3); }
.rp-how .link { white-space: nowrap; }
@media (max-width: 720px) {
  .rp-v { font-size: 20px; }
  .rp-lead { font-size: 16.5px; }
  .rp-src .src-txt { flex-direction: column; gap: 1px; }
  .rp-src .src-txt small { white-space: normal; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
}
/* A call page's side column, flat to match: the three numbers split by hairlines, live calls as plain rows. */
.dt-rail .wc-nums { gap: 0; padding: 14px 0; border-top: 1px solid color-mix(in srgb, var(--sep) 50%, transparent); border-bottom: 1px solid color-mix(in srgb, var(--sep) 50%, transparent); }
.dt-rail .wc-num { padding: 0 12px; border-radius: 0; background: none; }
.dt-rail .wc-num:first-child { padding-left: 0; }
.dt-rail .wc-num + .wc-num { border-left: 1px solid color-mix(in srgb, var(--sep) 50%, transparent); }
.dt-rail .wc-num-link:hover { background: none; }
.dt-rail .wc-num-link:hover small { color: var(--accent); }
.dt-rail .wc-live { padding: 9px 0; border-radius: 0; background: none; border-bottom: 1px solid color-mix(in srgb, var(--sep) 40%, transparent); }
.dt-rail .wc-live:hover { background: none; }
.dt-rail .wc-live:hover span { color: var(--accent); }

/* A call's page, one more pass. A statement without a chart reads as an article: a narrower page, a calmer title,
   the verdict tinted in the line above it. The side column drops its cover banner for a plain name row. */
.dt-page.read { max-width: 1180px; }
@media (min-width: 981px) { .dt-page.read .dt-grid { grid-template-columns: minmax(0, 1fr) 340px; gap: 56px; } }
.dt-page.read .dt-hero h1 { max-width: 860px; font-size: clamp(28px, 3.2vw, 40px); line-height: 1.12; letter-spacing: -.03em; }
.dt-page.read .dt-by { margin-top: 22px; }
.dt-hero .an-status { color: var(--label-3); font-weight: 600; }
.dt-hero .an-v { display: inline-flex; align-items: center; gap: 6px; font-weight: 700; color: var(--label-2); }
.dt-hero.right .an-v { color: var(--good); } .dt-hero.wrong .an-v { color: var(--bad); }
.dt-hero .an-v svg, .dt-hero .an-v .ct-ic { width: 15px; height: 15px; }
.dt-page.read .dt-main > section:first-child { margin-top: 30px; }
.dt-page.read .rp { margin-top: 44px; }
.rp-head { margin-top: 2px; }
.dt-rail .wc-cover { display: none; }
.dt-rail .wc-id { margin-top: 0; padding: 0; align-items: center; }
.dt-rail .wc-id .av { box-shadow: none; }
.dt-rail .wc-top { margin-bottom: 4px; }
/* The article page, wider, with the title in the text column so the side column runs the page's full height. */
.dt-page.read { max-width: 1320px; }
@media (min-width: 981px) { .dt-page.read .dt-grid { grid-template-columns: minmax(0, 1fr) 360px; gap: 64px; margin-top: 0; } }
.dt-page.read .dt-hero h1 { max-width: none; }
.dt-page.read .dt-main > .dt-back { margin-top: 6px; }
.dt-page.read .dt-main > .dt-hero + .dt-sec, .dt-page.read .dt-main > .dt-hero ~ .dt-sec:first-of-type { margin-top: 36px; }
.dt-page.read .dt-rail { margin-top: 0; }
.dt-page.read .dt-rail-in { padding-top: 6px; }

/* Kept portfolios: how they run (four plain lines over the grid), each card's commitment, and a position's entry on a portfolio's page. */
.pf-held { margin-bottom: 8px; font-size: 13px; line-height: 1.5; color: var(--label-2); }

/* Portfolios as one list, no cards: a row each (mark and name, likely a year, since started, top holdings, how long
   it's committed, risk, Track), and how they run as one quiet line under the intro that opens to the four rules. */
.pf-page .tp-head p { max-width: none; }
.pfl { display: flex; flex-direction: column; padding-bottom: 48px; }
.pfl-head, .pfl-row { display: grid; grid-template-columns: minmax(0, 1fr) 92px 120px 136px 92px 84px 96px; align-items: center; gap: 18px; padding: 0 12px; }
.pfl-head { height: 34px; margin-bottom: 4px; border-bottom: 1px solid color-mix(in srgb, var(--sep) 50%, transparent); font-size: 11.5px; font-weight: 600; color: var(--label-3); }
.pfl-head span:nth-child(2), .pfl-head span:nth-child(3) { text-align: right; }
.pfl-head [title] { cursor: help; }
.pfl-row { min-height: 70px; border-radius: 14px; cursor: pointer; animation: rise var(--slow) var(--ease) both; transition: background var(--fast); }
.pfl-row:hover { background: var(--fill-3); }
.pfl-row:focus-visible { outline: 2px solid color-mix(in srgb, var(--accent) 60%, transparent); outline-offset: -2px; }
.pfl-name { display: flex; align-items: center; gap: 14px; min-width: 0; }
.pfl-name .pf-ic { border-radius: 10px; background: var(--fill-2); color: var(--c); }
.pfl-name > span:last-child { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.pfl-name b { font-size: 15px; font-weight: 600; letter-spacing: -.005em; color: var(--label); }
.pfl-name small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 12.5px; color: var(--label-3); }
.pfl-n { display: flex; flex-direction: column; align-items: flex-end; gap: 3px; }
.pfl-n b { font: 650 17px/1 var(--font-display, var(--font)); letter-spacing: -.02em; font-variant-numeric: tabular-nums; color: var(--label); }
.pfl-n b.up { color: var(--good); } .pfl-n b.down { color: var(--bad); }
.pfl-likely b { font-size: 19px; }
.pfl-n small { font-size: 11.5px; color: var(--label-3); }
.pfl-hold { display: flex; align-items: center; }
.pfl-hold > span { display: grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; background: var(--bg); box-shadow: 0 0 0 2px var(--bg); }
.pfl-row:hover .pfl-hold > span { background: var(--fill-3); box-shadow: 0 0 0 2px color-mix(in srgb, var(--fill-3) 100%, var(--bg)); }
.pfl-hold > span + span { margin-left: -6px; }
.pfl-hold .lg, .pfl-hold .pk-topic { width: 22px !important; height: 22px !important; }
.pfl-hold em { margin-left: 8px; font-style: normal; font-size: 12px; color: var(--label-3); }
.pfl-left { font-size: 13px; color: var(--label-2); }
.pfl-row .pf-risk { font-size: 12.5px; font-weight: 500; color: var(--label-2); }
.pfl-row .pf-trk { justify-self: end; height: 28px; padding: 0 14px; background: var(--fill-2); color: var(--label); font-weight: 600; }
.pfl-row .pf-trk:hover { opacity: 1; background: color-mix(in srgb, var(--label) 18%, var(--fill-2)); }
.pfl-row .pf-trk.on { background: none; padding: 0 2px; color: var(--good); }
@media (max-width: 1100px) {
  .pfl-head, .pfl-row { grid-template-columns: minmax(0, 1fr) 84px 110px 120px 92px; }
  .pfl-head span:nth-child(5), .pfl-head span:nth-child(6), .pfl-row .pfl-left, .pfl-row .pf-risk { display: none; }
}
@media (max-width: 720px) {
  .pfl-head, .pfl-row { grid-template-columns: minmax(0, 1fr) 64px 72px; gap: 10px; padding: 0 6px; }
  .pfl-head span:nth-child(4), .pfl-head span:nth-child(7), .pfl-row .pfl-hold, .pfl-row .pf-trk { display: none; }
  .pfl-name { gap: 10px; }
  .pfl-name .pf-ic { width: 30px !important; height: 30px !important; }
  .pfl-name small { display: none; }
  .pfl-row { min-height: 60px; }
}

/* A holding's chart header: its side (Long green, Short red, a market's YES or NO), entry, now, return and target as
   plain figures, and the call itself in a quiet line under them. */
.pf-graph-cap:has(.pfp) { display: flex; flex-direction: column; gap: 8px; }
.pfp { display: flex; align-items: center; flex-wrap: wrap; gap: 6px 26px; }
.pfp-side { display: inline-flex; align-items: center; height: 26px; padding: 0 11px; border-radius: var(--r-pill); font: 700 12.5px var(--font); letter-spacing: .02em; color: var(--good); background: color-mix(in srgb, var(--good) 14%, transparent); cursor: help; }
.pfp-side.short { color: var(--bad); background: color-mix(in srgb, var(--bad) 14%, transparent); }
.pfp-cell { display: flex; align-items: baseline; gap: 7px; }
.pfp-cell small { font-size: 12px; color: var(--label-3); }
.pfp-cell b { font: 650 16px var(--font); font-variant-numeric: tabular-nums; color: var(--label); }
.pfp-cell b.up { color: var(--good); } .pfp-cell b.down { color: var(--bad); }
.pfp-cell em { font-style: normal; font-size: 12px; color: var(--label-3); }
.pfp-call { margin: 0; font-size: 12.5px; color: var(--label-3); }
.pf-graph.pf-plot-free { height: auto; min-height: 0; }
.pf-graph-box .pf-graph.pf-plot-free { height: auto; min-height: 0; max-height: none; }
/* A slip by how many of its bets win: a column each, the bar's height its chance (labeled on top), under it the
   count and what the stake returns then, with its range. */
.pf-wins { display: grid; grid-template-columns: 54px repeat(var(--n), minmax(0, 1fr)); gap: 0 10px; align-items: end; padding: 14px 0 6px; }
.pf-wins-axis { align-self: stretch; display: flex; align-items: flex-start; justify-content: flex-end; padding-top: 2px; }
.pf-wins-axis span { font-size: 11px; color: var(--label-3); writing-mode: vertical-rl; transform: rotate(180deg); }
.pf-wins-col { display: flex; flex-direction: column; align-items: center; gap: 4px; min-width: 0; text-align: center; }
.pf-wins-bar { display: flex; flex-direction: column; justify-content: flex-end; align-items: center; width: 100%; height: 170px; border-bottom: 1px solid color-mix(in srgb, var(--sep) 70%, transparent); }
.pf-wins-bar em { margin-bottom: 5px; font: 650 12.5px var(--font); font-style: normal; font-variant-numeric: tabular-nums; color: var(--label); }
.pf-wins-bar i { display: block; width: min(56px, 72%); border-radius: 6px 6px 0 0; background: var(--label-3); }
.pf-wins-bar i.up { background: color-mix(in srgb, var(--good) 80%, transparent); }
.pf-wins-bar i.down { background: color-mix(in srgb, var(--bad) 75%, transparent); }
.pf-wins-col b { margin-top: 6px; font-size: 13px; font-weight: 650; color: var(--label); }
.pf-wins-col > span { font: 650 13px var(--font); font-variant-numeric: tabular-nums; color: var(--label-2); }
.pf-wins-col > span.up { color: var(--good); } .pf-wins-col > span.down { color: var(--bad); }
.pf-wins-col small { font-size: 10.5px; color: var(--label-3); font-variant-numeric: tabular-nums; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
.pf-wins-legend { grid-column: 2 / -1; display: flex; justify-content: space-between; margin-top: 10px; font-size: 11.5px; color: var(--label-3); }
.pf-wins-legend span:first-child::before { content: "↑ "; }
.pf-wins-legend span:last-child::after { content: " ↓"; display: none; }
.pf-wins { grid-template-columns: 92px repeat(calc(var(--n)), minmax(0, 1fr)); }
.pf-wins-key { align-items: flex-start; text-align: left; }
.pf-wins-key .pf-wins-bar { align-items: flex-start; justify-content: flex-start; border-bottom-color: transparent; }
.pf-wins-key .pf-wins-bar em, .pf-wins-key b, .pf-wins-key > span, .pf-wins-key small { font: 500 11.5px var(--font); color: var(--label-3); }
.pf-wins-key small { font-size: 10.5px; }

/* Portfolios, cleaner: a calm head (title, one line on how they run, Build your own as a quiet link), the list in
   titled sections, each row ending on its likely return with a chevron; the rules in a panel. */
.pfh { display: flex; align-items: flex-end; justify-content: space-between; gap: 20px; padding: 6px 0 26px; }
.pfh h1 { margin: 0; font: 750 36px/1.05 var(--font-display, var(--font)); letter-spacing: -.035em; }
.pfh-sub { margin: 10px 0 0; font-size: 14px; color: var(--label-3); }
.pfh-how { margin-left: 4px; padding: 0; border: 0; background: none; font: inherit; font-weight: 600; color: var(--accent); cursor: pointer; }
.pfh-how:hover { text-decoration: underline; text-underline-offset: 3px; }
.pfh-own { display: inline-flex; align-items: center; gap: 6px; flex: none; height: 34px; padding: 0 15px 0 12px; border-radius: var(--r-pill); background: var(--fill-3); color: var(--label); font: 600 13px var(--font); text-decoration: none; transition: background var(--fast); }
.pfh-own:hover { background: var(--fill-2); }
.pfh-own svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; }
.pf-page .pf-bar { margin: 0 0 8px; padding-bottom: 12px; }
.pfh-rules { margin: 14px 0 0; padding: 0; list-style: none; counter-reset: r; display: flex; flex-direction: column; gap: 16px; }
.pfh-rules li { counter-increment: r; display: grid; grid-template-columns: 26px minmax(0, 1fr); gap: 2px 12px; }
.pfh-rules li::before { content: counter(r); grid-row: 1 / 3; display: grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; background: var(--fill-2); font: 650 12px var(--font); color: var(--label-2); }
.pfh-rules b { font-size: 14.5px; font-weight: 650; color: var(--label); }
.pfh-rules span { font-size: 13.5px; line-height: 1.5; color: var(--label-3); }

.pfl-sec { margin-top: 26px; }
.pfl-sec:first-child { margin-top: 14px; }
.pfl-sec h2 { display: flex; align-items: baseline; gap: 8px; margin: 0 0 2px; padding: 0 12px; font: 650 17px/1.2 var(--font-display, var(--font)); letter-spacing: -.015em; color: var(--label); }
.pfl-sec h2 small { font-size: 13px; font-weight: 500; color: var(--label-3); }
.pfl-head, .pfl-row { grid-template-columns: minmax(0, 1fr) 132px 80px 104px 112px 16px; gap: 20px; }
.pfl-head { height: 30px; margin-bottom: 2px; border-bottom: 1px solid color-mix(in srgb, var(--sep) 45%, transparent); font-size: 11.5px; }
.pfl-head span:nth-child(2), .pfl-head span:nth-child(3) { text-align: left; }
.pfl-head span:nth-child(4), .pfl-head span:nth-child(5) { text-align: right; }
.pfl-row { min-height: 74px; }
.pfl-name .pf-ic { border-radius: 11px; }
.pfl-name b { font-size: 15.5px; }
.pfl-risk { display: inline-flex; align-items: center; gap: 7px; font-size: 13px; color: var(--label-2); }
.pfl-risk::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--label-3); }
.pfl-risk.low::before { background: var(--good); } .pfl-risk.medium::before { background: #f5a524; } .pfl-risk.high::before { background: var(--bad); }
.pfl-since b { font-size: 15px; }
.pfl-likely b { font-size: 21px; }
.pfl-chev { width: 15px; height: 15px; fill: none; stroke: var(--label-3); stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; transition: transform var(--fast), stroke var(--fast); }
.pfl-row:hover .pfl-chev { transform: translateX(2px); stroke: var(--label); }
.pfl-foot { margin: 28px 12px 0; font-size: 12px; color: var(--label-3); }
@media (max-width: 1100px) {
  .pfl-head, .pfl-row { grid-template-columns: minmax(0, 1fr) 120px 96px 104px 16px; }
  .pfl-head span:nth-child(3), .pfl-row .pfl-risk { display: none; }
}
@media (max-width: 720px) {
  .pfh { align-items: flex-start; flex-direction: column; gap: 14px; padding-bottom: 18px; }
  .pfh h1 { font-size: 30px; }
  .pfl-head, .pfl-row { grid-template-columns: minmax(0, 1fr) 72px 84px; gap: 10px; }
  .pfl-head span:nth-child(2), .pfl-head span:nth-child(6), .pfl-row .pfl-hold, .pfl-row .pfl-chev { display: none; }
  .pfl-likely b { font-size: 17px; }
  .pfl-sec h2 { padding: 0 6px; }
}
.pfl > .pfl-head { margin-top: 6px; }
.pfl-sec h2 { padding-top: 6px; padding-bottom: 8px; border-bottom: 1px solid color-mix(in srgb, var(--sep) 45%, transparent); }
.pfl > .pfl-head + .pfl-sec { margin-top: 18px; }

/* The Predictions header, three calm zones: the logo with the workspace's name; its four views centered; search,
   your portfolio (plain figures, no box) and your account on the right. The Admin/Pro pill steps aside here (it's in
   the account menu); Get Pro stays. */
.wk-name { display: none; }
body.wk .nav-inner > .brand { grid-column: 1; grid-row: 1; justify-self: start; }
body.wk .wk-name { display: block; grid-column: 1; grid-row: 1; justify-self: start; margin-left: 42px; font: 700 16px/1 var(--font-display, var(--font)); letter-spacing: -.015em; color: var(--label); text-decoration: none; white-space: nowrap; }
body.wk .wk-nav { grid-column: 2; grid-row: 1; }
body.wk .nav-right { grid-column: 3; grid-row: 1; gap: 10px; }
body.wk .wk-tabs { gap: 2px; }
body.wk .wk-tabs a { height: 34px; padding: 0 14px; border-radius: var(--r-pill); font-size: 14px; font-weight: 600; color: var(--label-3); }
body.wk .wk-tabs a:hover { color: var(--label); }
body.wk .wk-tabs a.on { background: var(--fill-2); color: var(--label); }
body.wk .wk-pfbox { align-items: center; gap: 6px; }
body.wk .wk-find-btn { display: grid; place-items: center; width: 34px; height: 34px; padding: 0; border: 0; border-radius: 50%; background: none; color: var(--label-2); }
body.wk .wk-find-btn:hover, body.wk .wk-find-btn[aria-expanded="true"] { background: var(--fill-3); color: var(--label); }
body.wk .wk-find-btn svg { width: 17px; height: 17px; }
body.wk .wk-find-btn span { display: none; }
body.wk .wk-pf { height: 34px; margin: 0 4px 0 0; padding: 0 10px; gap: 7px; border-radius: var(--r-pill); background: none; box-shadow: none; }
body.wk .wk-pf:hover { background: var(--fill-3); }
body.wk .wk-pf small { display: none; }
body.wk .wk-pf b { font: 650 14px var(--font); }
body.wk .wk-pf em { font: 600 13px var(--font); }
body.wk .pro-btn[data-is-pro="1"] { display: none; }
body.wk .nav-right .icon-btn[data-theme-toggle] { opacity: .7; }
body.wk .nav-right .icon-btn[data-theme-toggle]:hover { opacity: 1; }
/* A call's actions, together on its byline's right: a round Smart money chart button, then Track. */
.dt-by .dt-acts { display: inline-flex; align-items: center; gap: 8px; margin-left: auto; }
.dt-by .dt-acts .tk-pill { margin-left: 0; }
.sm-ic { display: grid; place-items: center; flex: none; width: 34px; height: 34px; padding: 0; border: 0; border-radius: 50%; background: var(--fill-2); color: var(--label); cursor: pointer; transition: background var(--fast); }
.sm-ic:hover { background: color-mix(in srgb, var(--label) 16%, var(--fill-2)); }
.sm-ic svg { width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.rc-sum.five { grid-template-columns: repeat(5, minmax(0, 1fr)); }
@media (max-width: 900px) { .rc-sum.five { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* A call's head, tighter: the title with its actions on the same row (centered on it), the byline right under it,
   and the title sized by its length so a short call isn't marooned in space and a long one has room. */
.dt-hero .dt-title { display: flex; align-items: center; justify-content: space-between; gap: 24px; margin-top: 8px; }
.dt-hero .dt-title h1 { margin: 0; min-width: 0; }
.dt-hero .dt-title .dt-acts { display: inline-flex; align-items: center; gap: 8px; flex: none; margin: 0; }
.dt-hero .dt-title .dt-acts .tk-pill { margin-left: 0; }
.dt-title.t-short h1 { font-size: clamp(32px, 4vw, 46px); line-height: 1.05; }
.dt-title.t-mid h1 { font-size: clamp(28px, 3.2vw, 38px); line-height: 1.1; letter-spacing: -.03em; }
.dt-title.t-long h1 { font-size: clamp(24px, 2.6vw, 31px); line-height: 1.18; letter-spacing: -.025em; }
.dt-hero .dt-by { margin-top: 14px; }
.dt-hero { padding-bottom: 2px; }
.dt-page:not(.read) .an-switch { margin-top: 16px; }
@media (max-width: 720px) {
  .dt-hero .dt-title { flex-direction: column; align-items: flex-start; gap: 12px; }
  .dt-hero .dt-title .dt-acts .tk-pill { flex: none; white-space: nowrap; }
}

/* Record's highlights: the cut against the S&P 500 (a chart), next to the legends (bars), and eight standouts. Flat,
   split by hairlines, like the numbers above them. */
.rh { padding: 26px 0 8px; border-bottom: 1px solid var(--sep); }
.rh h3 { margin: 0 0 6px; font: 650 16px/1.2 var(--font-display, var(--font)); letter-spacing: -.01em; color: var(--label); }
.rh-top { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); gap: 44px; }
.rh-cap { margin: 0 0 14px; font-size: 13px; line-height: 1.5; color: var(--label-3); }
.rh-cap b { color: var(--label); font-weight: 650; }
.rh-chart { min-height: 200px; }
.rh-svg { display: block; width: 100%; height: auto; overflow: visible; }
.rh-svg path { fill: none; stroke-width: 2.2; stroke-linejoin: round; stroke-linecap: round; }
.rh-svg path.us { stroke: var(--good); }
.rh-svg path.mkt { stroke: var(--label-3); stroke-dasharray: 5 4; stroke-width: 1.8; }
.rh-svg line.zero { stroke: color-mix(in srgb, var(--sep) 80%, transparent); stroke-width: 1; }
.rh-keys { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 22px; margin-top: 12px; font-size: 13px; color: var(--label-2); }
.rh-keys i { display: inline-block; width: 14px; height: 2px; margin-right: 7px; vertical-align: middle; border-radius: 2px; background: var(--good); }
.rh-keys .mkt i { background: var(--label-3); }
.rh-keys b { margin-left: 6px; font-weight: 650; color: var(--label); font-variant-numeric: tabular-nums; }
.rh-keys .rh-dates { margin-left: auto; font-size: 12px; color: var(--label-3); }
.rh-wait { display: grid; place-items: center; min-height: 160px; font-size: 13px; color: var(--label-3); }
.rh-legends ul { margin: 10px 0 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 12px; }
.rh-legends li { display: grid; grid-template-columns: minmax(0, 1fr) 90px 62px; align-items: center; gap: 12px; }
.rh-l-name { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.rh-l-name b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 13.5px; font-weight: 600; color: var(--label); }
.rh-l-name small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 11.5px; color: var(--label-3); }
.rh-l-bar { height: 6px; border-radius: 6px; background: var(--fill-2); overflow: hidden; }
.rh-l-bar i { display: block; height: 100%; border-radius: inherit; background: var(--label-3); transition: width .6s var(--ease); }
.rh-legends li.us .rh-l-bar i { background: var(--good); }
.rh-legends li.legend .rh-l-bar i { background: #e8b931; }
.rh-legends li em { text-align: right; font: 650 14px var(--font); font-style: normal; font-variant-numeric: tabular-nums; color: var(--label); }
.rh-legends li.us em { color: var(--good); }
.rh-note { margin: 14px 0 0; font-size: 12px; line-height: 1.5; color: var(--label-3); }
.rh-tiles { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); margin-top: 28px; border-top: 1px solid color-mix(in srgb, var(--sep) 60%, transparent); }
.rh-tile { display: flex; flex-direction: column; gap: 6px; min-width: 0; padding: 16px 18px 18px; color: inherit; text-decoration: none; border-bottom: 1px solid color-mix(in srgb, var(--sep) 60%, transparent); transition: background var(--fast); }
.rh-tile:not(:nth-child(4n + 1)) { border-left: 1px solid color-mix(in srgb, var(--sep) 60%, transparent); }
.rh-tile:nth-child(4n + 1) { padding-left: 0; }
a.rh-tile:hover { background: var(--fill-3); }
.rh-tile small { font-size: 11px; font-weight: 650; letter-spacing: .05em; text-transform: uppercase; color: var(--label-3); }
.rh-who { display: flex; align-items: center; gap: 8px; min-width: 0; }
.rh-who b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 14px; font-weight: 600; color: var(--label); }
.rh-tile em { font: 700 22px/1.1 var(--font-display, var(--font)); font-style: normal; letter-spacing: -.02em; font-variant-numeric: tabular-nums; color: var(--label); }
.rh-tile em.up { color: var(--good); } .rh-tile em.down { color: var(--bad); }
.rh-sub { font-size: 12px; line-height: 1.4; color: var(--label-3); }
.rh-tile.rh-slot .rh-wait { min-height: 60px; place-items: start; }
@media (max-width: 1000px) {
  .rh-top { grid-template-columns: 1fr; gap: 30px; }
  .rh-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .rh-tile:not(:nth-child(4n + 1)) { border-left: 0; }
  .rh-tile:nth-child(even) { border-left: 1px solid color-mix(in srgb, var(--sep) 60%, transparent); }
  .rh-tile:nth-child(odd) { padding-left: 0; }
}

/* Predictions' All, quieter. The header gets a clear way back to Cred, left of the logo. The bar is flat: topics,
   then search and the menus on the right, under one hairline. Portfolios are one slim line. Rows: the call and its
   caller, since the call, expected, settles. */
.wk-back { display: none; }
body.wk .wk-back { display: inline-flex; align-items: center; gap: 2px; grid-column: 1; grid-row: 1; justify-self: start; height: 32px; padding: 0 10px 0 6px; border-radius: var(--r-pill); color: var(--label-2); font: 600 13.5px var(--font); text-decoration: none; transition: background var(--fast), color var(--fast); }
body.wk .wk-back:hover { background: var(--fill-3); color: var(--label); }
body.wk .wk-back svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
body.wk .nav-inner > .brand { margin-left: 82px; }
body.wk .wk-name { margin-left: 124px; }
body.wk .nav-inner > .wk-back::after { content: ""; width: 1px; height: 18px; margin-left: 12px; background: var(--sep); }

.tm-grid > .tm-main > .tm-tool { grid-row: 1; }
.tm-grid > .tm-main > .tm-body { grid-row: 2; }
.tm-grid > .ir-slot { grid-row: 2; }
.picks-page .tm-tool { gap: 10px; margin-bottom: 6px; padding: 4px 0 12px; border-radius: 0; background: none; box-shadow: none; border-bottom: 1px solid color-mix(in srgb, var(--sep) 55%, transparent); }
.picks-page .tm-tool .tm-find { flex: 0 1 260px; height: 34px; margin: 0 0 0 auto; padding: 0 12px; gap: 8px; border-radius: var(--r-pill); background: var(--fill-3); box-shadow: none; }
.picks-page .tm-tool .tm-find:focus-within { box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--accent) 60%, transparent); }
.picks-page .tm-tool .tm-find svg { width: 15px; height: 15px; color: var(--label-3); }
.picks-page .tm-tool .tm-find input { font-size: 13.5px; }
.picks-page .tm-tool .tm-menus { margin-left: 0; }

.pfx { display: flex; align-items: center; gap: 6px; margin: 12px 0 4px; padding: 0 2px 12px; overflow-x: auto; scrollbar-width: none; border-bottom: 1px solid color-mix(in srgb, var(--sep) 45%, transparent); }
.pfx::-webkit-scrollbar { display: none; }
.pfx-h { flex: none; margin-right: 8px; font-size: 13px; font-weight: 650; color: var(--label-3); }
.pfx-i { display: inline-flex; align-items: center; gap: 8px; flex: none; height: 36px; padding: 0 14px 0 7px; border-radius: var(--r-pill); color: var(--label); text-decoration: none; transition: background var(--fast); }
.pfx-i:hover { background: var(--fill-3); }
.pfx-i .pf-ic { border-radius: 7px; background: var(--fill-2); }
.pfx-i b { font-size: 13.5px; font-weight: 600; }
.pfx-i em { font: 650 13.5px var(--font); font-style: normal; font-variant-numeric: tabular-nums; }
.pfx-i em.up { color: var(--good); } .pfx-i em.down { color: var(--bad); }
.pfx-all { flex: none; margin-left: auto; padding-left: 12px; font-size: 13px; font-weight: 600; color: var(--accent); text-decoration: none; white-space: nowrap; }

/* Wide screens only (phones and tablets keep their own layouts): Since the call has room for its price then and now. */
@media (min-width: 1101px) { .pk-list-h.pk2, .pk-row.pk2 { grid-template-columns: 36px minmax(0, 1fr) 196px 140px 96px 32px; } }
@media (max-width: 720px) {
  .picks-page .tm-tool { flex-wrap: wrap; }
  .picks-page .tm-tool .tm-find { order: -1; flex: 1 1 100%; margin: 0; }
  body.wk .wk-back { display: none; }
  body.wk .nav-inner > .brand { margin-left: 0; }
  body.wk .wk-name { margin-left: 36px; }
  /* Fits the screen: the phone gutter and tighter gaps, so the theme button isn't pushed past the edge. */
  body.wk .nav-inner { column-gap: 8px; padding: 0 16px; }
  body.wk .nav-right { gap: 8px; }
}
@media (max-width: 1100px) { .tm-grid > .ir-slot { grid-column: 1; grid-row: 3; } }

/* Record in two columns: the numbers, the cut against the market and the callers on the left; on the right, a quiet
   column of who stands out (for steadier money first, then bigger swings, then who to watch out for) and the legends. */
.rec-2col.has-side { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 48px; align-items: start; }
.rc-main { min-width: 0; }
.rc-side { position: sticky; top: 84px; display: flex; flex-direction: column; gap: 26px; padding: 22px 0 40px 28px; border-left: 1px solid color-mix(in srgb, var(--sep) 55%, transparent); max-height: calc(100vh - 100px); overflow-y: auto; scrollbar-width: none; }
.rc-side::-webkit-scrollbar { display: none; }
.rs-sec h3 { margin: 0; font: 650 14px/1.2 var(--font-display, var(--font)); letter-spacing: -.005em; color: var(--label); }
.rs-note { margin: 4px 0 0; font-size: 12px; line-height: 1.45; color: var(--label-3); }
.rs-list { display: flex; flex-direction: column; margin-top: 8px; }
.rs-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 0; border-bottom: 1px solid color-mix(in srgb, var(--sep) 40%, transparent); color: inherit; text-decoration: none; }
.rs-row:last-child { border-bottom: 0; }
.rs-row:hover .rs-who b { color: var(--accent); }
.rs-l { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.rs-l small { font-size: 11.5px; color: var(--label-3); }
.rs-who { display: flex; align-items: center; gap: 7px; min-width: 0; }
.rs-who b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 13.5px; font-weight: 600; color: var(--label); transition: color var(--fast); }
.rs-v { display: flex; flex-direction: column; align-items: flex-end; gap: 3px; flex: none; text-align: right; }
.rs-v b { font: 650 16px/1 var(--font-display, var(--font)); font-variant-numeric: tabular-nums; color: var(--label); }
.rs-v b.up { color: var(--good); } .rs-v b.down { color: var(--bad); }
.rs-v small { max-width: 120px; font-size: 11px; color: var(--label-3); }
.rs-leg { margin: 10px 0 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 10px; }
.rs-leg li { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.rs-leg li span { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.rs-leg b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 13px; font-weight: 600; color: var(--label); }
.rs-leg small { font-size: 11px; color: var(--label-3); }
.rs-leg em { flex: none; font: 650 14px var(--font); font-style: normal; font-variant-numeric: tabular-nums; color: var(--label-2); }
.rs-leg li.us em { color: var(--good); }
.rs-leg li.legend em { color: #e8b931; }
.rc-side .rh-wait { min-height: 40px; place-items: start; padding-top: 10px; }
.rh-vs { padding: 24px 0 18px; border-bottom: 1px solid var(--sep); }
.rh-vs-h { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; margin-bottom: 12px; }
.rh-vs-h h3 { display: inline-flex; align-items: center; gap: 6px; margin: 0; font: 650 15px/1.2 var(--font-display, var(--font)); color: var(--label); }
.rh-vs-cap { font-size: 13px; color: var(--label-3); }
.rh-vs-cap b { color: var(--good); font-weight: 650; }
.rh-vs .rh-chart { min-height: 150px; }
@media (max-width: 1100px) {
  .rec-2col.has-side { grid-template-columns: 1fr; gap: 0; }
  .rc-side { position: static; max-height: none; padding: 24px 0 0; border-left: 0; border-top: 1px solid var(--sep); order: 2; }
}
.rc:has(> .rec-2col.has-side) { max-width: 1440px; }
.rc-side h3, .rc-side p, .rc-side small, .rc-side b, .rc-side em, .rh-vs-h h3, .rh-vs-cap { text-transform: none; letter-spacing: normal; }
.rc-side .rs-sec h3 { letter-spacing: -.005em; }
.ir-soon em.up { color: var(--good); } .ir-soon em.down { color: var(--bad); }

/* Record: the chart answers a hover (a guide, a dot on each line, the day and both totals); the side column is just
   label, person and number, one row each, what it means on hover. */
.rh-plot { position: relative; cursor: crosshair; }
.rh-hover line.rh-guide { stroke: var(--label-3); stroke-width: 1; stroke-dasharray: 3 3; }
.rh-hover circle.us { fill: var(--good); stroke: var(--bg); stroke-width: 2; }
.rh-hover circle.mkt { fill: var(--label-3); stroke: var(--bg); stroke-width: 2; }
.rh-tip { position: absolute; top: -6px; display: flex; flex-direction: column; gap: 3px; padding: 8px 11px; border-radius: 10px; background: var(--fill-1, #1c1c1e); box-shadow: 0 0 0 1px var(--sep), 0 8px 24px rgba(0, 0, 0, .35); font-size: 12px; color: var(--label-2); pointer-events: none; white-space: nowrap; }
.rh-tip small { font-size: 11px; color: var(--label-3); }
.rh-tip span { display: flex; align-items: center; gap: 6px; }
.rh-tip i { width: 8px; height: 2px; border-radius: 2px; background: var(--good); }
.rh-tip .mkt i { background: var(--label-3); }
.rh-tip b { margin-left: auto; padding-left: 10px; font-weight: 650; color: var(--label); font-variant-numeric: tabular-nums; }

.rc-side { gap: 30px; }
.rs-sec h3 { cursor: default; }
.rs-list { margin-top: 6px; }
.rs-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "label label" "who n"; gap: 3px 12px; align-items: center; padding: 9px 0; border-bottom: 0; }
.rs-row > small { grid-area: label; font-size: 11.5px; color: var(--label-3); }
.rs-row .rs-who { grid-area: who; }
.rs-row .rs-n { grid-area: n; font: 650 15px/1 var(--font-display, var(--font)); font-variant-numeric: tabular-nums; color: var(--label); }
.rs-row .rs-n.up { color: var(--good); } .rs-row .rs-n.down { color: var(--bad); }
.rs-leg li { gap: 12px; }
.rs-leg li b { font-size: 13px; font-weight: 500; color: var(--label-2); }
.rh-tip[hidden], .rh-hover[hidden] { display: none; }

/* Record's chart switch (Settled against the market, or Open now: each open call so far as a bar, best to worst). */
.rh-seg { display: inline-flex; gap: 2px; padding: 3px; border-radius: var(--r-pill); background: var(--fill-3); }
.rh-seg button { height: 28px; padding: 0 14px; border: 0; border-radius: var(--r-pill); background: none; color: var(--label-3); font: 600 13px var(--font); cursor: pointer; transition: background var(--fast), color var(--fast); }
.rh-seg button.on { background: var(--fill-1, var(--fill-2)); color: var(--label); }
.rh-seg button:not(.on):hover { color: var(--label); }
.rh-bars rect.up { fill: color-mix(in srgb, var(--good) 75%, transparent); }
.rh-bars rect.down { fill: color-mix(in srgb, var(--bad) 70%, transparent); }
.rh-bars rect.on { fill: var(--label); }
.rh-bars line.zero { stroke: color-mix(in srgb, var(--sep) 80%, transparent); stroke-width: 1; }
.rh-keys .down i { background: var(--bad); }
.rh-keys b.up { color: var(--good); } .rh-keys b.down { color: var(--bad); }
.rh-tip span:not(:has(b)) { max-width: 260px; white-space: normal; color: var(--label); }
.rh-pane[hidden], .rh-vs-cap[hidden] { display: none; }
/* The pulse over Predictions' feed: five plain figures split by hairlines. */
.pk-pulse { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); margin: 14px 0 4px; padding-bottom: 14px; border-bottom: 1px solid color-mix(in srgb, var(--sep) 45%, transparent); }
.pp-cell { display: flex; flex-direction: column; gap: 4px; min-width: 0; padding: 0 16px; }
.pp-cell:first-child { padding-left: 2px; }
.pp-cell + .pp-cell { border-left: 1px solid color-mix(in srgb, var(--sep) 45%, transparent); }
.pp-cell small { font-size: 11.5px; color: var(--label-3); }
.pp-cell b { font: 650 22px/1.05 var(--font-display, var(--font)); letter-spacing: -.02em; font-variant-numeric: tabular-nums; color: var(--label); }
.pp-cell b.up { color: var(--good); } .pp-cell b.down { color: var(--bad); }
.pp-cell span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 11.5px; color: var(--label-3); }
.pk-pulse + .pfx { margin-top: 10px; }
@media (max-width: 720px) {
  .pk-pulse { grid-template-columns: repeat(3, minmax(0, 1fr)); row-gap: 14px; }
  .pp-cell { padding: 0 10px; }
  .pp-cell:nth-child(3n + 1) { padding-left: 2px; border-left: 0; }
  .pp-cell b { font-size: 19px; }
}
.rh-seg button.on { background: color-mix(in srgb, var(--label) 16%, transparent); color: var(--label); }
@media (max-width: 1100px) { .tm-grid, .tm-grid.ir-on { grid-template-columns: minmax(0, 1fr); } }
/* Open now as a line: the open calls' running value, green above water and red below, a soft fill to zero. */
.rh-svg path.neg { stroke: var(--bad); }
.rh-svg path.area { stroke: none; }
.rh-svg path.area.us { fill: color-mix(in srgb, var(--good) 12%, transparent); }
.rh-svg path.area.neg { fill: color-mix(in srgb, var(--bad) 12%, transparent); }
.rh-hover circle.neg { fill: var(--bad); stroke: var(--bg); stroke-width: 2; }
.rh-svg path.split { fill: none; stroke-width: 2.2; }

/* Record charts: dollar gridlines labelled on the right, dates under, a dashed guide with a dot per line and a card beside it. */
.rh-plot { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-rows: auto auto; column-gap: 10px; cursor: default; }
.rh-area { position: relative; height: 190px; cursor: crosshair; }
.rh-area .rh-svg { width: 100%; height: 100%; overflow: visible; }
.rh-area .rh-svg path, .rh-area .rh-svg line { vector-effect: non-scaling-stroke; }
.rh-svg line.grid { stroke: color-mix(in srgb, var(--sep) 55%, transparent); stroke-width: 1; }
.rh-svg line.zero { stroke: var(--sep); }
.rh-svg line.rh-guide { stroke: var(--label-2); stroke-width: 1; stroke-dasharray: 4 4; }
.rh-svg line.rh-guide[hidden] { display: none; }
.rh-y { position: relative; width: 44px; font-size: 11px; color: var(--label-3); font-variant-numeric: tabular-nums; }
.rh-y span { position: absolute; left: 0; transform: translateY(-50%); white-space: nowrap; }
.rh-x { position: relative; height: 22px; margin-top: 6px; font-size: 11px; color: var(--label-3); }
.rh-x span { position: absolute; top: 0; transform: translateX(-50%); white-space: nowrap; }
.rh-x span:first-child { transform: none; }
.rh-x span:last-child { transform: translateX(-100%); }
.rh-dot { position: absolute; width: 9px; height: 9px; margin: -4.5px 0 0 -4.5px; border-radius: 50%; background: var(--good); box-shadow: 0 0 0 2px var(--bg); pointer-events: none; }
.rh-dot.mkt { background: var(--label-3); width: 8px; height: 8px; margin: -4px 0 0 -4px; }
.rh-dot.neg { background: var(--bad); }
.rh-dot[hidden] { display: none; }
.rh-area .rh-tip { top: 0; min-width: 150px; padding: 9px 12px; gap: 5px; border-radius: 12px; background: color-mix(in srgb, var(--bg) 88%, transparent); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); box-shadow: 0 0 0 1px var(--sep), 0 10px 28px rgba(0, 0, 0, .28); }
.rh-area .rh-tip small { padding-bottom: 5px; margin-bottom: 1px; border-bottom: 1px solid color-mix(in srgb, var(--sep) 70%, transparent); font-weight: 600; color: var(--label-2); }
.rh-area .rh-tip i { width: 8px; height: 8px; border-radius: 50%; }
.rh-area .rh-tip .neg i { background: var(--bad); }
.rh-area .rh-tip .gap { padding-top: 5px; border-top: 1px solid color-mix(in srgb, var(--sep) 70%, transparent); color: var(--label-3); }
.rh-area .rh-tip span:not(:has(b)) { color: var(--label-3); }
@media (max-width: 640px) { .rh-area { height: 160px; } .rh-y { width: 38px; } .rh-seg button { white-space: nowrap; } }
/* The return beside each dollar figure in the chart card. */
.rh-area .rh-tip em { min-width: 44px; padding-left: 10px; font-style: normal; font-size: 11.5px; font-weight: 600; text-align: right; color: var(--label-3); font-variant-numeric: tabular-nums; }
.rh-area .rh-tip em.up { color: var(--good); }
.rh-area .rh-tip em.down { color: var(--bad); }

/* Info popups: a solid card of their own, whatever heading or stat they sit in (a heading's own span styles, like the
   count pill, never reach in). */
.rc-tip > span.rc-pop { position: absolute; z-index: 40; top: calc(100% + 10px); left: -14px; display: block; width: min(340px, calc(100vw - 32px), calc(100dvw - 32px)); max-height: min(440px, 70vh); overflow-y: auto; padding: 14px 16px; border-radius: 14px; background: var(--surface-2); background-image: none; border: 1px solid var(--sep); box-shadow: 0 16px 40px rgba(0, 0, 0, .45); font: 400 13px/1.5 var(--font, inherit); letter-spacing: 0; text-transform: none; text-align: left; white-space: normal; color: var(--label-2); }
.rc-tip > span.rc-pop[hidden] { display: none; }
.rc-tip > span.rc-pop { scrollbar-width: thin; scrollbar-color: var(--sep-strong) transparent; overscroll-behavior: contain; }
.rc-tip > span.rc-pop span { padding: 0; border: 0; border-radius: 0; background: none; color: inherit; font: inherit; letter-spacing: 0; text-transform: none; }
.rc-tip > span.rc-pop b { font-weight: 600; color: var(--label); }
.rc-tip > span.rc-pop br + br { display: block; content: ""; margin-top: 6px; }
.rc-tip .rc-pop .rcp-lead { display: block; color: var(--label); font-weight: 500; }
.rc-tip .rc-pop .rcp-list { display: block; margin-top: 6px; }
.rc-tip .rc-pop .rcp-list > span { display: block; position: relative; padding: 2px 0 2px 14px; }
.rc-tip .rc-pop .rcp-list > span::before { content: ""; position: absolute; left: 2px; top: .75em; width: 4px; height: 4px; border-radius: 50%; background: var(--label-3); }
.rc-tip .rc-pop .rcp-foot { display: block; margin-top: 8px; font-size: 12px; color: var(--label-3); }
.rc-tip .rc-pop .rcp-warn { display: block; margin-top: 10px; padding-left: 10px; border-left: 2px solid var(--warn, #ff9f0a); color: var(--label-2); }
.rc-tip .rc-pop .rcp-sec { display: block; margin: 14px 0 4px; padding-top: 12px; border-top: 1px solid var(--sep); font-size: 11px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--label-3); }
.rc-tip .rc-pop .rcp-sec:first-child { margin-top: 0; padding-top: 0; border-top: 0; }
.rc-tip .rc-pop .rcp-row { display: grid; grid-template-columns: 72px minmax(0, 1fr); gap: 10px; padding: 5px 0; }
.rc-tip .rc-pop .rcp-row > b { font-size: 12.5px; }
.rc-sum .rc-stat:last-child .rc-tip > span.rc-pop { left: auto; right: -14px; }

/* Notifications: the bell's panel, the full list (its own page, where a phone's bell goes), settings, and the bell on a
   profile that sets how much to hear about someone. */
.bell-panel { padding: 6px 6px 8px; }
.ntf-head { display: flex; align-items: center; justify-content: space-between; padding: 10px 10px 6px 12px; }
.ntf-head b { font: 750 19px/1.1 var(--font-display, var(--font)); letter-spacing: -.01em; color: var(--label); }
.ntf-gear, .ntf-set, .ntf-back { display: inline-grid; place-items: center; width: 32px; height: 32px; border-radius: 50%; color: var(--label-2); transition: background var(--fast), color var(--fast); }
.ntf-gear:hover, .ntf-set:hover, .ntf-back:hover { background: var(--fill-3); color: var(--label); }
.ntf-gear svg, .ntf-set svg, .ntf-back svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.ntf-chips { display: flex; gap: 6px; padding: 4px 8px 6px; overflow-x: auto; scrollbar-width: none; }
.ntf-chips::-webkit-scrollbar { display: none; }
.ntf-chips button { flex: none; height: 30px; padding: 0 13px; border-radius: var(--r-pill); font-size: 13px; font-weight: 600; color: var(--label-2); background: var(--fill-3); transition: background var(--fast), color var(--fast); }
.ntf-chips button.on { background: var(--label); color: var(--bg); }
.ntf-group { margin: 12px 12px 4px; font-size: 13px; font-weight: 650; color: var(--label); }
.ntf-item { position: relative; display: flex; align-items: flex-start; gap: 12px; padding: 10px 30px 10px 10px; border-radius: 12px; color: var(--label); text-decoration: none; transition: background var(--fast); }
.ntf-item:hover { background: var(--fill-3); }
.ntf-item.new { background: color-mix(in srgb, var(--accent) 7%, transparent); }
.ntf-item.new:hover { background: color-mix(in srgb, var(--accent) 11%, transparent); }
.ntf-av { position: relative; flex: none; display: inline-grid; place-items: center; width: 40px; height: 40px; }
.ntf-wallet { border-radius: 50%; background: var(--fill-2); font: 700 17px var(--font); color: var(--good); }
.ntf-kind { position: absolute; right: -3px; bottom: -3px; display: grid; place-items: center; width: 19px; height: 19px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 0 2px var(--bg-elev, var(--bg)); }
.ntf-page .ntf-kind { box-shadow: 0 0 0 2px var(--bg); }
.ntf-kind svg { width: 11px; height: 11px; fill: none; stroke: #fff; stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; }
.ntf-kind.good { background: var(--good); }
.ntf-kind.bad { background: var(--bad); }
.ntf-kind.pro { background: #ff9f0a; }
.ntf-kind.pro svg { fill: #fff; stroke-width: 1; }
.ntf-txt { display: flex; flex-direction: column; gap: 3px; min-width: 0; padding-top: 1px; }
.ntf-line { font-size: 14px; line-height: 1.38; color: var(--label-2); display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; overflow-wrap: anywhere; }
.ntf-line b { font-weight: 650; color: var(--label); }
.ntf-txt small { font-size: 12px; color: var(--label-3); }
.ntf-dot { position: absolute; right: 12px; top: 50%; width: 8px; height: 8px; margin-top: -4px; border-radius: 50%; background: var(--accent); }
.ntf-empty { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 34px 20px 30px; text-align: center; }
.ntf-empty b { font-size: 15px; color: var(--label); }
.ntf-empty span { max-width: 280px; font-size: 13.5px; line-height: 1.45; color: var(--label-3); }
.ntf-empty .follow { display: inline-grid; place-items: center; margin-top: 10px; text-decoration: none; }
.ntf-foot { display: block; margin: 6px 6px 0; padding: 11px; border-radius: 10px; text-align: center; font-size: 13.5px; font-weight: 600; color: var(--accent); text-decoration: none; }
.ntf-foot:hover { background: var(--fill-3); }
.ntf-nudge { display: flex; align-items: center; gap: 10px; margin: 4px 8px 8px; padding: 10px 8px 10px 14px; border-radius: 14px; background: var(--fill-3); }
.ntf-nudge > span { display: flex; flex-direction: column; gap: 2px; flex: 1; min-width: 0; }
.ntf-nudge b { font-size: 14px; font-weight: 650; color: var(--label); }
.ntf-nudge small { font-size: 12.5px; color: var(--label-3); }
.ntf-on { flex: none; height: 30px; padding: 0 14px; border-radius: var(--r-pill); background: var(--accent); color: #fff; font-size: 13px; font-weight: 650; }
.ntf-x { flex: none; display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; color: var(--label-3); }
.ntf-x:hover { background: var(--fill-2); color: var(--label); }
.ntf-x svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; }

.ntf-page { max-width: 640px; }
.ntf-page-h { display: flex; align-items: center; gap: 8px; margin: 8px 0 14px; }
.ntf-page-h h1 { flex: 1; margin: 0; font: 750 28px/1.1 var(--font-display, var(--font)); letter-spacing: -.02em; color: var(--label); }
.ntf-set { display: inline-flex; align-items: center; white-space: nowrap; width: auto; gap: 6px; padding: 0 12px 0 10px; border-radius: var(--r-pill); font-size: 13.5px; font-weight: 600; text-decoration: none; }
.ntf-page .ntf-chips, .ntf-page .ntf-nudge { margin-left: 0; margin-right: 0; padding-left: 0; padding-right: 0; }
.ntf-page .ntf-nudge { padding: 12px 10px 12px 16px; }
.ntf-page .ntf-group { margin-left: 2px; }
.ntf-page .ntf-item { margin: 0 -10px; }

.ntf-settings .ntf-page-h { margin-bottom: 18px; }
.ntf-settings .ntf-page-h h1 { font-size: 24px; }
.ntf-back { margin-left: -8px; }
.ntf-settings .ios-sec { margin-bottom: 26px; }
.ntf-row .ios-l { display: flex; flex-direction: column; gap: 2px; flex: 1; min-width: 0; max-width: none; }
.ntf-row .ios-l small { font-size: 12.5px; line-height: 1.35; color: var(--label-3); white-space: normal; }
.ntf-row .ios-v { flex: none; overflow: visible; }
.ntf-row .ios-who { flex-direction: row; }
.ntf-row .ios-who > span { display: flex; flex-direction: column; min-width: 0; }
.ntf-row .ios-who b { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ntf-row .ios-who small { margin-top: 1px; }
.ntf-sel { position: relative; display: inline-flex; align-items: center; }
.ntf-sel select { appearance: none; -webkit-appearance: none; height: 32px; padding: 0 28px 0 12px; border: 0; border-radius: 9px; background: var(--fill-2); color: var(--label); font: 600 13.5px var(--font); cursor: pointer; }
.ntf-sel select:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
.ntf-sel svg { position: absolute; right: 8px; width: 14px; height: 14px; fill: none; stroke: var(--label-3); stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; pointer-events: none; }
.ntf-seg { flex-wrap: wrap; justify-content: flex-end; }
.ntf-topics { flex-wrap: wrap; gap: 8px; }
.ntf-topics button { height: 32px; padding: 0 14px; border-radius: var(--r-pill); background: var(--fill-2); font-size: 13.5px; font-weight: 600; color: var(--label-2); }
.ntf-topics button.on { background: var(--label); color: var(--bg); }
.ntf-settings .ios-foot b { color: var(--label-2); font-weight: 600; }

.ntf-nb { position: relative; display: inline-flex; }
.ntf-nb-btn { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; background: var(--fill-3); color: var(--label); transition: background var(--fast); }
.ntf-nb-btn[hidden] { display: none; }
.ntf-nb-btn:hover, .ntf-nb-btn[aria-expanded="true"] { background: var(--fill-2); }
.ntf-nb-btn svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.ntf-nb-btn.lv-all { color: var(--accent); }
.ntf-nb-btn.lv-all .fill { fill: currentColor; }
.ntf-nb-btn.lv-off, .ntf-nb-btn.lv-muted { color: var(--label-3); }
.menu.ntf-lv { left: auto; right: 0; width: 290px; padding: 6px; transform-origin: top right; }
.ntf-lv-h { padding: 8px 10px 6px; font-size: 12.5px; font-weight: 600; color: var(--label-3); }
.menu.ntf-lv button { height: auto; min-height: 50px; padding: 8px 10px; gap: 10px; }
.ntf-lv button > span { display: flex; flex-direction: column; gap: 2px; }
.ntf-lv button b { font-size: 14px; font-weight: 600; }
.ntf-lv button small { font-size: 12px; line-height: 1.3; color: var(--label-3); }
.ntf-lv button svg { flex: none; width: 17px; height: 17px; fill: none; stroke: var(--accent); stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.ntf-lv-more { display: block; margin-top: 4px; padding: 10px; border-top: 1px solid var(--sep); font-size: 13px; font-weight: 600; color: var(--accent); text-decoration: none; }

.ntf-sheet h2 { margin: 6px 0; }
.ntf-steps { display: flex; flex-direction: column; gap: 14px; margin: 18px 0 6px; padding: 0; list-style: none; }
.ntf-steps li { display: flex; align-items: center; gap: 12px; font-size: 15px; color: var(--label-2); }
.ntf-steps li span { flex: none; display: grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; background: var(--fill-2); font-size: 13px; font-weight: 700; color: var(--label); }
.ntf-steps b { color: var(--label); font-weight: 650; }
.ntf-steps svg { width: 17px; height: 17px; margin: 0 2px -3px; fill: none; stroke: var(--accent); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

@media (max-width: 720px) {
  .ntf-page-h h1 { font-size: 26px; }
  .ntf-page .ntf-item { margin: 0 -8px; padding-left: 8px; }
  .ntf-row .ios-who small { display: none; }
  .ntf-seg button { padding: 0 9px; }
  .menu.ntf-lv { width: min(290px, calc(100vw - 32px)); }
}

/* Loading the first page: the header is just the logo until that page's own links are known (index.html). */
html.booting .nav-inner > :not(.brand) { visibility: hidden; }

/* The notifications panel, part of the page: its background, a hairline edge, rows split by hairlines (no cards, no
   tint), text tabs like the feed's, a bigger list with no scrollbar; unread is the dot and brighter text. */
.bell-panel { top: 66px; width: min(440px, calc(100vw - 32px)); max-height: min(720px, calc(100vh - 86px)); padding: 4px 0 6px; border-radius: 18px; background: var(--bg); border: 1px solid var(--sep); box-shadow: 0 24px 60px rgba(0, 0, 0, .5); scrollbar-width: none; overscroll-behavior: contain; }
.bell-panel::-webkit-scrollbar { display: none; }
.bell-panel .ntf-head { padding: 14px 18px 4px 20px; }
.bell-panel .ntf-head b { font-size: 20px; }
.ntf-chips { gap: 20px; padding: 0 20px; border-bottom: 1px solid var(--sep); }
.ntf-chips button { position: relative; height: 40px; padding: 0; border-radius: 0; background: none; font-size: 14px; color: var(--label-3); }
.ntf-chips button:hover { color: var(--label-2); }
.ntf-chips button.on { background: none; color: var(--label); }
.ntf-chips button.on::after { content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 2px; border-radius: 2px; background: var(--label); }
.bell-panel .ntf-group { margin: 14px 20px 2px; font-size: 12px; font-weight: 600; letter-spacing: .02em; color: var(--label-3); }
.ntf-item, .ntf-item.new { margin: 0; padding: 13px 40px 13px 20px; border-radius: 0; background: none; }
.ntf-item:hover, .ntf-item.new:hover { background: color-mix(in srgb, var(--label) 4%, transparent); }
.ntf-item + .ntf-item::before { content: ""; position: absolute; top: 0; left: 72px; right: 0; height: 1px; background: var(--sep); }
.ntf-line { color: var(--label-3); }
.ntf-item.new .ntf-line { color: var(--label-2); }
.ntf-dot { right: 18px; }
.bell-panel .ntf-nudge { margin: 10px 16px 6px; }
.bell-panel .ntf-empty { padding: 44px 24px 40px; }
.ntf-foot { margin: 4px 0 0; padding: 14px; border-top: 1px solid var(--sep); border-radius: 0; }
.ntf-foot:hover { background: none; color: var(--label); }
/* The full page uses the same rows, edge to edge of its column. */
.ntf-page .ntf-chips { padding: 0; margin-bottom: 4px; }
.ntf-page .ntf-group { margin: 16px 0 2px; font-size: 12px; font-weight: 600; letter-spacing: .02em; color: var(--label-3); }
.ntf-page .ntf-item { margin: 0 -12px; padding: 13px 36px 13px 12px; border-radius: 12px; }
.ntf-page .ntf-item + .ntf-item::before { left: 64px; }
.ntf-page .ntf-dot { right: 12px; }
@media (max-width: 720px) {
  .ntf-page .ntf-item { margin: 0 -8px; padding: 13px 32px 13px 8px; }
  .ntf-page .ntf-item + .ntf-item::before { left: 60px; }
}

/* The account menu: solid, like the notifications panel. Who you are, then rows with icons, then (for admins) which
   view of the app, then sign out; groups split by hairlines. */
.menu.acct-menu { width: 280px; min-width: 0; padding: 6px; border-radius: 16px; background: var(--bg); border: 1px solid var(--sep); box-shadow: 0 24px 60px rgba(0, 0, 0, .5); -webkit-backdrop-filter: none; backdrop-filter: none; }
.acct-menu .acct-id { gap: 12px; padding: 10px 10px 12px; }
/* The same avatar as in the header (the row's column layout for its text never reaches it): letter centered, same ring. */
.acct-menu .acct-id .me-av { display: grid; place-items: center; flex: none; width: 40px; height: 40px; font-size: 17px; box-shadow: 0 0 0 2px var(--bg), 0 0 0 3px var(--sep-strong); }
.acct-menu .acct-id > span { flex: 1; gap: 1px; }
.acct-menu .acct-id b { font-size: 15px; font-weight: 650; color: var(--label); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.acct-menu .acct-id small { font-size: 13px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.acct-plan { flex: none; padding: 3px 9px; border-radius: var(--r-pill); background: var(--fill-3); font: 600 11.5px var(--font); font-style: normal; color: var(--label-2); }
.acct-plan.on { background: color-mix(in srgb, var(--accent) 16%, transparent); color: var(--accent); }
.acct-list { padding: 4px 0; border-top: 1px solid var(--sep); }
.menu.acct-menu .acct-list button { justify-content: flex-start; gap: 12px; height: 40px; padding: 0 10px; border-radius: 10px; font-size: 14.5px; font-weight: 500; }
.menu.acct-menu .acct-list button:hover { background: var(--fill-3); }
.acct-list button svg { flex: none; width: 18px; height: 18px; fill: none; stroke: var(--label-2); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.acct-list button.danger svg { stroke: var(--bad); }
.acct-on { margin-left: auto; font-style: normal; font-size: 12.5px; color: var(--good); }
.acct-menu .acct-preview { padding: 10px 10px 12px; border-top: 1px solid var(--sep); }
.acct-menu .acct-preview > span { margin-bottom: 8px; font-size: 12.5px; color: var(--label-3); }
.acct-seg { display: flex; padding: 2px; border-radius: 10px; background: var(--fill-3); }
.menu.acct-menu .acct-seg button { flex: 1; justify-content: center; height: 30px; padding: 0; border-radius: 8px; font-size: 13px; font-weight: 600; color: var(--label-2); }
.menu.acct-menu .acct-seg button:hover { background: none; color: var(--label); }
.menu.acct-menu .acct-seg button.sel { background: var(--fill); color: var(--label); box-shadow: 0 1px 3px rgba(0, 0, 0, .25); }

/* Predictions, polished: the pulse as one slim line of figures; under each call's move, its price then and now; the
   column's calls with their asset, one line each and who made it. */
.pk-pulse.pp-line { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 26px; margin: 16px 0 2px; padding: 0 2px 14px; }
.pp-i { display: inline-flex; align-items: baseline; gap: 7px; font-size: 13.5px; color: var(--label-3); white-space: nowrap; }
.pp-i b { font: 650 18px/1 var(--font-display, var(--font)); letter-spacing: -.01em; font-variant-numeric: tabular-nums; color: var(--label); }
.pp-i b.up { color: var(--good); } .pp-i b.down { color: var(--bad); }
.pk-row.pk2 .pk-now .pk-num small { font-variant-numeric: tabular-nums; white-space: nowrap; }
.ir-call { display: grid; grid-template-columns: 26px minmax(0, 1fr) auto; align-items: center; gap: 10px; padding: 7px 6px; margin: 0 -6px; border-radius: 10px; color: var(--label); text-decoration: none; transition: background var(--fast); }
.ir-call:hover { background: var(--fill-2); }
.ir-call-ic { display: grid; place-items: center; width: 26px; height: 26px; }
.ir-call-ic .pk-topic { width: 26px; height: 26px; }
.ir-call-t { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.ir-call-t b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 13px; font-weight: 600; }
.ir-call-t small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 11.5px; color: var(--label-3); }
.ir-call em { flex: none; font-style: normal; font-size: 13px; font-weight: 650; font-variant-numeric: tabular-nums; color: var(--label-2); }
.ir-call em.up { color: var(--good); } .ir-call em.down { color: var(--bad); } .ir-call em.soon { color: var(--accent); }
@media (max-width: 720px) { .pk-row.pk2 .pk-now .pk-num small { display: none; } }

/* Whales: People's podium and table, with a whale's columns (profit, return, traded, size). */
.pp-head.wb-head, .pp-row.wb-row { grid-template-columns: 30px minmax(0, 1fr) 130px 120px 96px 104px; }
.pp-head.wb-head span:nth-child(n + 3) { text-align: right; }
.pp-head.wb-head span:first-child { text-align: right; }
.wb-num { justify-self: end; font: 600 14.5px var(--font); font-variant-numeric: tabular-nums; color: var(--label-2); white-space: nowrap; }
.wb-num.muted { font-weight: 500; font-size: 13px; color: var(--label-3); }
.wb-venue { font-weight: 600; }
.wb-venue.polymarket { color: #4f8dff; }
.wb-venue.hyperliquid { color: #3ad6b4; }
.wb-fol { color: var(--label-2); font-weight: 600; }
.wb-face { display: grid; place-items: center; width: 68px; height: 68px; margin: 2px 0 10px; }
.wb-face img, .wb-face > * { border-radius: 50%; }
.wb-row .pp-who img, .wb-row .pp-who > :first-child { border-radius: 50%; flex: none; }
.wb-card .pp-top-stats b { white-space: nowrap; }
.wb-wait { display: grid; place-items: center; min-height: 320px; }
.wb-note { margin: 22px 12px 8px; font-size: 12.5px; line-height: 1.5; color: var(--label-3); }
@media (max-width: 1100px) {
  .pp-head.wb-head, .pp-row.wb-row { grid-template-columns: 30px minmax(0, 1fr) 120px 100px 96px; }
  .pp-head.wb-head span:nth-child(5), .pp-row.wb-row > :nth-child(5) { display: none; }
}
@media (max-width: 720px) {
  .pp-head.wb-head, .pp-row.wb-row { grid-template-columns: 22px minmax(0, 1fr) auto; gap: 12px; }
  .pp-head.wb-head span:nth-child(n + 4), .pp-row.wb-row > :nth-child(n + 4) { display: none; }
}
@media (max-width: 720px) {
  /* Phones: a whale card's figures are wider than a person's: they size to the card, with the room between them theirs. */
  .wb-card .pp-top-stats { gap: 2px; }
}
/* Whale cards: figures fit their third of the card (smaller, never spilling into the next). */
.wb-card .pp-top-stats > div { min-width: 0; padding: 0 4px; }
.wb-card { container-type: inline-size; }
.wb-card .pp-top-stats b { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: clamp(14px, 5.5cqi, 22px); }
/* A whale's chart on one market: their position, entry and now, what it's made, and the way back to all of them. */
.wh-pos[data-wh-thing] { cursor: pointer; transition: background var(--fast); }
.wh-pos[data-wh-thing]:hover { background: color-mix(in srgb, var(--label) 4%, transparent); }
.wh-allm { margin-left: auto; margin-right: 12px; height: 28px; padding: 0 12px; border-radius: var(--r-pill); background: var(--fill-3); font-size: 12.5px; font-weight: 600; color: var(--label-2); }
.wh-allm:hover { background: var(--fill-2); color: var(--label); }
.wh-chart-pl { display: flex; flex-wrap: wrap; gap: 8px 32px; margin: 4px 0 14px; }
.wh-chart-pl > span { display: flex; flex-direction: column; gap: 3px; }
.wh-chart-pl small { font-size: 11.5px; color: var(--label-3); }
.wh-chart-pl b { font: 650 16px var(--font); font-variant-numeric: tabular-nums; color: var(--label); }
.wh-chart-pl b.up { color: var(--good); } .wh-chart-pl b.down { color: var(--bad); }
.wh-chart-pl b i { font-style: normal; font-size: 13px; font-weight: 600; opacity: .85; }

/* A whale's Cred score: the same chip as a person's (green from 60, red under 45), bigger beside its name. */
.score.wg { vertical-align: middle; }
.score.wg.big { min-width: 44px; height: 32px; margin-left: 12px; padding: 0 9px; border-radius: 9px; font-size: 18px; font-weight: 700; transform: translateY(-3px); }
.wb-grade { justify-self: center; }
.wb-sep { width: 1px; height: 20px; margin: 0 4px; background: var(--sep); align-self: center; }
.wb-card .pp-top-head { justify-content: space-between; }
.wg-notes { margin: 2px 0 12px; padding: 0 0 0 16px; font-size: 13px; line-height: 1.5; color: var(--label-2); }
.wg-notes li + li { margin-top: 3px; }
.pp-head.wb-head, .pp-row.wb-row { grid-template-columns: 30px minmax(0, 1fr) 56px 130px 120px 96px 104px; }
.pp-head.wb-head span:nth-child(3) { text-align: center; }
@media (max-width: 1100px) {
  .pp-head.wb-head, .pp-row.wb-row { grid-template-columns: 30px minmax(0, 1fr) 50px 120px 100px 96px; }
  .pp-head.wb-head span:nth-child(5), .pp-row.wb-row > :nth-child(5) { display: revert; }
  .pp-head.wb-head span:nth-child(6), .pp-row.wb-row > :nth-child(6) { display: none; }
  /* (People's table hides its 4th heading here; the whales' 4th is Profit.) */
  .pp-head.wb-head span:nth-child(4) { display: revert; }
}
@media (max-width: 720px) {
  .pp-head.wb-head, .pp-row.wb-row { grid-template-columns: 22px minmax(0, 1fr) 34px auto; gap: 10px; }
  .pp-head.wb-head span:nth-child(n + 5), .pp-row.wb-row > :nth-child(n + 5) { display: none; }
  .pp-head.wb-head span:nth-child(4), .pp-row.wb-row > :nth-child(4) { display: revert; }
}

/* Whale and coin alerts, and copying a whale: the buttons on its page and a market's, and Tracked's Copying section. */
.wh-alerts, .wh-copy { display: inline-flex; align-items: center; gap: 7px; height: 36px; padding: 0 14px 0 12px; border-radius: var(--r-pill); background: var(--fill-3); color: var(--label); font: 600 13.5px var(--font); white-space: nowrap; transition: background var(--fast); }
.wh-alerts:hover, .wh-copy:hover { background: var(--fill-2); }
.wh-alerts svg, .wh-copy svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }
.wh-alerts.off { color: var(--label-3); }
.wh-alerts.on { color: var(--accent); }
.wh-copy.on { background: color-mix(in srgb, var(--good) 16%, transparent); color: var(--good); }
.wh-acts { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.md-h { position: relative; }
.md-bell { margin-left: auto; align-self: flex-start; }
.ntf-kind.whale { background: #30d158; }
.ntf-kind.insider { background: #bf5af2; }
.ntf-copy { margin-left: 6px; padding: 2px 7px; border-radius: var(--r-pill); background: color-mix(in srgb, var(--good) 16%, transparent); color: var(--good); font: 600 11px var(--font); font-style: normal; }
.ntf-drop { width: 28px; height: 28px; margin-left: 6px; border-radius: 50%; color: var(--label-3); font-size: 18px; line-height: 1; }
.ntf-drop:hover { background: var(--fill-2); color: var(--label); }
.cp { margin: 6px 0 22px; }
.cp-h { display: flex; flex-direction: column; gap: 3px; margin: 0 0 8px; font: 700 17px var(--font-display, var(--font)); color: var(--label); }
.cp-h small { font: 400 12.5px var(--font); color: var(--label-3); }
.cp-list { display: flex; flex-direction: column; }
.cp-row { display: grid; grid-template-columns: 40px minmax(0, 1fr) auto; align-items: center; gap: 12px; padding: 12px 10px; margin: 0 -10px; border-radius: 12px; color: var(--label); text-decoration: none; transition: background var(--fast); }
.cp-row:hover { background: var(--fill-3); }
.cp-row + .cp-row { border-top: 1px solid var(--sep); }
.cp-who { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.cp-who b { display: flex; align-items: center; gap: 8px; font-size: 15px; font-weight: 650; }
.cp-who b .wg { height: 20px; font-size: 12px; }
.cp-who small { font-size: 12.5px; color: var(--label-3); }
.cp-n { display: flex; flex-direction: column; align-items: flex-end; gap: 2px; font-variant-numeric: tabular-nums; }
.cp-n small { font-size: 11.5px; color: var(--label-3); }
.cp-n b { font: 650 17px var(--font); }
.cp-n em { font-style: normal; font-size: 12.5px; font-weight: 600; }
.cp-n em.up { color: var(--good); } .cp-n em.down { color: var(--bad); }

/* A whale's positions as a feed: when it opened on the left, then the market and its numbers; sorts and sides above. */
.whf-bar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 16px; margin: 2px 0 6px; padding-bottom: 10px; border-bottom: 1px solid var(--sep); }
.whf-sort, .whf-side { display: flex; flex-wrap: wrap; gap: 4px; }
.whf-sort button, .whf-side button { height: 28px; padding: 0 11px; border-radius: var(--r-pill); font-size: 12.5px; font-weight: 600; color: var(--label-3); transition: background var(--fast), color var(--fast); }
.whf-sort button:hover, .whf-side button:hover { color: var(--label); }
.whf-sort button.on { background: var(--label); color: var(--bg); }
.whf-side button.on { background: var(--fill-2); color: var(--label); }
.wh-pos.whf { display: grid; grid-template-columns: 92px 40px minmax(0, 1fr) auto; align-items: center; gap: 14px; padding: 14px 8px; }
.whf-list .wh-pos.whf + .wh-pos.whf { border-top: 1px solid var(--sep); }
.whf-when { display: flex; flex-direction: column; gap: 2px; padding-right: 12px; border-right: 2px solid color-mix(in srgb, var(--sep) 80%, transparent); align-self: stretch; justify-content: center; }
.whf-when b { font-size: 13.5px; font-weight: 650; color: var(--label); white-space: nowrap; }
.whf-when small { font-size: 11.5px; color: var(--label-3); white-space: nowrap; }
.whf-when.unknown b { color: var(--label-3); font-weight: 600; }
.whf-body { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.whf-top { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; min-width: 0; }
.whf-top > b { font-size: 15px; font-weight: 650; color: var(--label); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 100%; }
.whf-lev { font-size: 12.5px; color: var(--label-3); }
.whf-facts { display: flex; flex-wrap: wrap; gap: 4px 22px; }
.whf-facts span { display: inline-flex; align-items: baseline; gap: 6px; }
.whf-facts small { font-size: 12px; color: var(--label-3); }
.whf-facts b { font-size: 13.5px; font-weight: 600; color: var(--label); font-variant-numeric: tabular-nums; }
.wh-pos.whf .wh-pos-n.pnl { text-align: right; }
@media (max-width: 720px) {
  .wh-pos.whf { grid-template-columns: 40px minmax(0, 1fr) auto; gap: 10px; padding: 12px 2px; }
  .wh-pos.whf .whf-when { grid-column: 1 / -1; flex-direction: row; gap: 8px; align-items: baseline; padding: 0; border: 0; }
  .whf-bar { flex-direction: column; align-items: flex-start; }
}

/* Copying: each copied whale in Tracked's rail, its mirror on the right; on Whales, a column of your copies. */
.tr-cprow .face, .tr-cprow img { flex: none; }
.tr-cpd { display: flex; flex-direction: column; gap: 18px; }
.cpd-wait, .wb-side .wb-wait { display: grid; place-items: center; min-height: 160px; }
.cpd-head { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.cpd-who { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.cpd-who h3 { margin: 0; display: flex; align-items: center; gap: 10px; font-size: 20px; font-weight: 700; letter-spacing: -.01em; }
.cpd-who small { font-size: 13px; color: var(--label-3); }
.cpd-acts { display: flex; gap: 6px; }
.cpd-btn { height: 32px; padding: 0 14px; display: inline-flex; align-items: center; border-radius: var(--r-pill); background: var(--fill-2); color: var(--label); font: 600 13px var(--font); text-decoration: none; border: 0; cursor: pointer; transition: background var(--fast); }
.cpd-btn:hover { background: var(--fill-1, var(--fill-2)); }
.cpd-btn.quiet { background: none; color: var(--label-3); }
.cpd-btn.quiet:hover { color: var(--bad); background: none; }
.cpd-total, .wbs-total { display: flex; flex-direction: column; gap: 2px; }
.cpd-total small, .wbs-total small { font-size: 12.5px; color: var(--label-3); }
.cpd-total b { font-size: 34px; font-weight: 700; letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.cpd-total em, .wbs-total em { font-style: normal; font-weight: 650; font-size: 14px; font-variant-numeric: tabular-nums; }
.cpd-total em.up, .wbs-total em.up, .wbs-v em.up, .cpd-you.up b { color: var(--good); }
.cpd-total em.down, .wbs-total em.down, .wbs-v em.down, .cpd-you.down b { color: var(--bad); }
.cpd-h { margin: 6px 0 -8px; display: flex; align-items: baseline; gap: 8px; font-size: 15px; font-weight: 650; }
.cpd-h small, .wbs-sub small { font-size: 12.5px; font-weight: 600; color: var(--label-3); }
.cpd-list { display: flex; flex-direction: column; }
.cpd-row { display: grid; grid-template-columns: 84px 34px minmax(0, 1fr) auto; align-items: center; gap: 12px; padding: 12px 6px; color: inherit; text-decoration: none; border-radius: 10px; }
.cpd-row + .cpd-row { border-top: 1px solid var(--sep); }
.cpd-row:hover { background: var(--fill-3); }
.cpd-what { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.cpd-what b { font-size: 14.5px; font-weight: 650; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cpd-what small { font-size: 12.5px; color: var(--label-3); }
.cpd-what .tl-side { font-style: normal; font-weight: 650; }
.cpd-you { display: flex; flex-direction: column; align-items: flex-end; gap: 2px; }
.cpd-you small { font-size: 11.5px; color: var(--label-3); }
.cpd-you b { font-size: 14px; font-weight: 650; font-variant-numeric: tabular-nums; }
.cpd-none, .cpd-note { margin: 0; font-size: 13px; line-height: 1.5; color: var(--label-3); }
.cpd-note { font-size: 12px; }

.wb-page:has(.wb-side) { max-width: 1340px; }
.wb-cols { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 36px; align-items: start; }
.wb-side { position: sticky; top: 84px; display: flex; flex-direction: column; gap: 12px; padding-left: 28px; border-left: 1px solid var(--sep); }
.wbs-h { margin: 0; display: flex; align-items: baseline; justify-content: space-between; font-size: 17px; font-weight: 700; }
.wbs-h a { font-size: 13px; font-weight: 600; color: var(--accent); text-decoration: none; }
.wbs-total b { font-size: 26px; font-weight: 700; letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.wbs-sub { margin: 10px 0 0; font-size: 12px; font-weight: 650; letter-spacing: .04em; text-transform: uppercase; color: var(--label-3); }
.wbs-list { display: flex; flex-direction: column; }
.wbs-row, .wbs-tr { display: flex; align-items: center; gap: 10px; padding: 9px 6px; margin: 0 -6px; border-radius: 10px; color: inherit; text-decoration: none; }
.wbs-row:hover, .wbs-tr:hover { background: var(--fill-3); }
.wbs-n { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.wbs-n b { font-size: 13.5px; font-weight: 650; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.wbs-n small { font-size: 12px; color: var(--label-3); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.wbs-v { display: flex; flex-direction: column; align-items: flex-end; gap: 1px; font-variant-numeric: tabular-nums; }
.wbs-v b { font-size: 13.5px; font-weight: 650; }
.wbs-v em, .wbs-v small { font-style: normal; font-size: 12px; font-weight: 600; color: var(--label-3); }
.wbs-note { margin: 0; font-size: 13px; line-height: 1.5; color: var(--label-3); }
@media (max-width: 1400px) {
  .wb-page:has(.wb-side) { max-width: 1000px; }
  .wb-cols { grid-template-columns: minmax(0, 1fr); gap: 20px; }
  .wb-side { order: -1; position: static; padding: 0 0 18px; border-left: 0; border-bottom: 1px solid var(--sep); }
  .wb-side.none { display: none; }
  .wb-side { margin-top: 10px; }
  .wb-side > a.wbs-tr:nth-of-type(n+4) { display: none; }
}
@media (max-width: 720px) {
  .cpd-row { grid-template-columns: 34px minmax(0, 1fr) auto; gap: 10px; padding: 12px 2px; }
  .cpd-row .whf-when { grid-column: 1 / -1; flex-direction: row; gap: 8px; align-items: baseline; padding: 0; border: 0; }
  .cpd-total b { font-size: 30px; }
  .cpd-acts { flex-basis: 100%; }
  .cpd-row .whf-when { justify-content: flex-start; }
  .tr-cpd .wh-chart svg { height: 120px; min-height: 0; flex: none; }
}

/* Terms and Privacy: a plain, readable page. */
.page.legal { max-width: 720px; padding-bottom: 64px; }
.legal h1 { margin: 28px 0 10px; font: 700 clamp(30px, 4vw, 42px)/1.08 var(--font-display); letter-spacing: -.03em; }
.legal-lede { margin: 0 0 28px; font-size: 16px; color: var(--label-2); display: flex; flex-direction: column; gap: 6px; }
.legal-lede small { font-size: 13px; color: var(--label-3); }
.legal section { padding: 18px 0; border-top: 1px solid var(--sep); }
.legal h2 { margin: 0 0 8px; font-size: 17px; font-weight: 650; }
.legal p { margin: 0; font-size: 15px; line-height: 1.6; color: var(--label-2); }
.legal-other { margin-top: 24px !important; }
.auth-agree { display: flex; gap: 10px; align-items: flex-start; margin: 14px 4px 0; font-size: 13px; line-height: 1.45; color: var(--label-2); text-align: left; cursor: pointer; }
.auth-agree input { flex: none; width: 18px; height: 18px; margin: 1px 0 0; accent-color: var(--accent); }
.tr-foot { margin: 22px 0 0; font-size: 12px; line-height: 1.5; color: var(--label-3); }
.wb-note .link, .wh-foot .link { color: inherit; text-decoration: underline; text-underline-offset: 2px; }

/* ---------- Pricing: three tiers side by side, flat, divided by hairlines ---------- */
.page.pricing { max-width: 1040px; }
.pc-head { padding: 28px 0 8px; text-align: center; }
.pc-head h1 { margin: 0 0 12px; font: 700 clamp(30px, 4.4vw, 48px)/1.06 var(--font-display); letter-spacing: -.035em; }
.pc-head p { max-width: 620px; margin: 0 auto 22px; font-size: 17px; line-height: 1.5; color: var(--label-2); }
.pc-bill { display: inline-flex; }
.pc-bill em { margin-left: 6px; font-style: normal; font-size: 12px; font-weight: 600; color: var(--up, #30d158); }
.pc-cols { display: grid; grid-template-columns: repeat(3, 1fr); margin-top: 28px; border-top: 1px solid var(--sep); }
.pc-col { display: flex; flex-direction: column; padding: 26px 26px 30px; border-right: 1px solid var(--sep); position: relative; }
.pc-col:last-child { border-right: 0; }
.pc-col.best { box-shadow: inset 0 2px 0 var(--accent); }
.pc-top { min-height: 92px; }
.pc-flag { display: inline-block; margin-bottom: 8px; font-size: 12px; font-weight: 650; letter-spacing: .02em; text-transform: uppercase; color: var(--accent); }
.pc-col h2 { margin: 0 0 6px; font: 700 24px/1.1 var(--font-display); letter-spacing: -.02em; }
.pc-pitch { margin: 0; font-size: 15px; color: var(--label-2); }
.pc-price { display: flex; align-items: baseline; gap: 6px; margin-top: 18px; }
.pc-price b { font: 700 40px/1 var(--font-display); letter-spacing: -.03em; font-variant-numeric: tabular-nums; }
.pc-price span { font-size: 14px; color: var(--label-3); }
.pc-sub { display: block; min-height: 18px; margin: 6px 0 18px; font-size: 13px; color: var(--label-3); }
.pc-go { width: 100%; height: 44px; border-radius: 12px; font-size: 15px; font-weight: 600; color: #fff; background: var(--accent); transition: opacity var(--fast), transform var(--fast) var(--spring); }
.pc-go:active:not(:disabled) { transform: scale(.98); }
.pc-go.quiet, .pc-go:disabled { color: var(--label); background: var(--fill-2); }
.pc-go:disabled { cursor: default; opacity: .8; }
.pc-has { list-style: none; margin: 22px 0 0; padding: 0; display: grid; gap: 12px; }
.pc-has li { display: flex; gap: 10px; font-size: 14.5px; line-height: 1.45; color: var(--label-2); }
.pc-has li:first-child { color: var(--label); }
.pc-has svg { flex: none; width: 18px; height: 18px; margin-top: 1px; fill: none; stroke: var(--accent); stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.pc-note { margin: 8px 0 0; padding-top: 16px; border-top: 1px solid var(--sep); font-size: 12.5px; color: var(--label-3); text-align: center; }
.pc-faq { max-width: 720px; margin: 40px auto 20px; }
.pc-faq section { padding: 18px 0; border-top: 1px solid var(--sep); }
.pc-faq h2 { margin: 0 0 6px; font-size: 16px; font-weight: 650; }
.pc-faq p { margin: 0; font-size: 15px; line-height: 1.55; color: var(--label-2); }
@media (max-width: 720px) {
  .pc-head { padding-top: 16px; }
  .pc-cols { grid-template-columns: 1fr; }
  .pc-col { padding: 22px 2px 26px; border-right: 0; border-bottom: 1px solid var(--sep); }
  .pc-col.best { order: -1; }
  .pc-top { min-height: 0; }
}

/* ---------- Receipts: share a graded call as an image ---------- */
.tk-pill.rc-btn { background: var(--fill-2); color: var(--label); }
.tk-pill.rc-btn:hover { background: color-mix(in srgb, var(--fill-2) 70%, var(--label) 12%); }
.tk-pill.rc-btn svg { width: 16px; height: 16px; fill: currentColor; stroke: none; }
.pro-sheet.rc-sheet { width: min(760px, 100%); }
.rc-sheet h2 { margin: 0 0 16px; font-size: 22px; }
.rc-img { display: block; width: 100%; aspect-ratio: 16 / 9; border-radius: 14px; box-shadow: 0 0 0 1px rgba(255, 255, 255, .1); }
.rc-acts { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-top: 18px; }
.rc-acts .pro-go { display: flex; align-items: center; justify-content: center; text-decoration: none; font-size: 15px; }
@media (max-width: 560px) { .rc-acts { grid-template-columns: 1fr; } }

/* ---------- The Deleted ---------- */
.del-tag { margin-left: auto; flex: none; display: inline-flex; align-items: center; gap: 4px; height: 22px; padding: 0 8px; border-radius: 999px; font-size: 11.5px; font-weight: 650; color: var(--bad, #ff453a); background: color-mix(in srgb, var(--bad, #ff453a) 14%, transparent); white-space: nowrap; }
.del-tag svg { width: 12px; height: 12px; fill: currentColor; }
.del-note { display: flex; align-items: flex-start; gap: 10px; margin: 10px 0 0; font-size: 14px; line-height: 1.45; color: var(--label-2); }
.del-note .del-tag { margin-left: 0; }
.del-page { max-width: 680px; }
.del-head { padding: 8px 0 18px; border-bottom: 1px solid var(--sep); margin-bottom: 8px; }
.del-kicker { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 650; letter-spacing: .02em; text-transform: uppercase; color: var(--bad, #ff453a); }
.del-kicker svg { width: 15px; height: 15px; fill: currentColor; }
.del-head h1 { margin: 10px 0 10px; font: 700 clamp(28px, 4vw, 40px)/1.08 var(--font-display); letter-spacing: -.03em; }
.del-head p { margin: 0 0 10px; font-size: 15.5px; line-height: 1.55; color: var(--label-2); }
.n-seg .n-del { color: var(--bad, #ff453a); }

/* New predictions arrived while you were reading: a tap shows them. */
.new-calls { position: fixed; top: 76px; left: 50%; z-index: 60; transform: translateX(-50%); height: 36px; padding: 0 16px; border: 0; border-radius: 999px; background: var(--accent); color: #fff; font: 600 14px var(--font); box-shadow: 0 6px 24px rgba(0, 0, 0, .35); cursor: pointer; animation: new-calls-in .35s var(--ease) both; }
@keyframes new-calls-in { from { opacity: 0; transform: translate(-50%, -8px); } }
@media (max-width: 720px) { .new-calls { top: calc(env(safe-area-inset-top) + 64px); } }

/* A post's text on its way (it loads just after the first page): two quiet lines. */
.quote-wait { display: grid; gap: 7px; margin-top: 8px; }
.quote-wait .skeleton { height: 13px; border-radius: 6px; }
.quote-wait .skeleton + .skeleton { width: 62%; }

/* Posting a receipt to Cred's X account (admins). */
.rc-xpost { margin-top: 20px; padding-top: 18px; border-top: 1px solid var(--sep); display: grid; gap: 10px; }
.rc-xpost h3 { margin: 0; font-size: 15px; font-weight: 650; }
.rc-xpost textarea { width: 100%; box-sizing: border-box; padding: 10px 12px; border: 0; border-radius: 12px; background: var(--fill-2); color: var(--label); font: 15px/1.45 var(--font); resize: vertical; }
.rc-link { display: flex; align-items: center; gap: 8px; font-size: 14px; color: var(--label-2); }
.rc-link small { margin-left: auto; font-size: 12px; color: var(--label-3); }
.rc-xpost .pro-note { margin: 0; text-align: left; }

/* ---------- Admin: growth ---------- */
.page.admin-page.wide { max-width: 1040px; }
.gr-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 8px 0 18px; }
.gr-head h1 { margin: 0; font: 700 32px/1.1 var(--font-display); letter-spacing: -.02em; }
.gr-funnel { display: grid; grid-template-columns: repeat(5, 1fr); border-top: 1px solid var(--sep); border-bottom: 1px solid var(--sep); }
.gr-step { padding: 18px 16px; border-right: 1px solid var(--sep); display: grid; gap: 4px; }
.gr-step:last-child { border-right: 0; }
.gr-step small { font-size: 12.5px; color: var(--label-3); }
.gr-step b { font: 700 30px/1 var(--font-display); font-variant-numeric: tabular-nums; }
.gr-step span { font-size: 12.5px; color: var(--label-2); }
.gr-sec { padding: 22px 0 6px; }
.gr-sec h2 { margin: 0 0 10px; font-size: 17px; font-weight: 650; }
.gr-note { margin: 0 0 12px; font-size: 13.5px; line-height: 1.5; color: var(--label-3); }
.gr-days { display: flex; align-items: flex-end; gap: 3px; height: 120px; }
.gr-day { flex: 1; height: 100%; display: flex; flex-direction: column; justify-content: flex-end; align-items: center; position: relative; }
.gr-day i { display: block; width: 100%; min-height: 2px; border-radius: 3px 3px 0 0; background: var(--accent); opacity: .75; }
.gr-day em { position: absolute; top: -2px; font-style: normal; font-size: 10.5px; font-weight: 700; color: var(--good, #30d158); }
.gr-table { display: grid; font-size: 14px; }
.gr-row { display: grid; grid-template-columns: 2fr repeat(5, .8fr) 1fr 1fr; gap: 8px; padding: 10px 0; border-bottom: 1px solid var(--sep); font-variant-numeric: tabular-nums; }
.gr-th { font-size: 12px; color: var(--label-3); }
.gr-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 32px; }
.gr-line { display: flex; justify-content: space-between; gap: 12px; padding: 8px 0; border-bottom: 1px solid var(--sep); font-size: 14px; }
.gr-line span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--label-2); }
@media (max-width: 720px) {
  .gr-funnel { grid-template-columns: repeat(2, 1fr); }
  .gr-step { border-bottom: 1px solid var(--sep); }
  .gr-row { grid-template-columns: 1.6fr repeat(3, 1fr); }
  .gr-row > :nth-child(3), .gr-row > :nth-child(5), .gr-row > :nth-child(7), .gr-row > :nth-child(8) { display: none; }
  .gr-cols { grid-template-columns: 1fr; gap: 0; }
}

/* ---------- Admin: the reply queue ---------- */
.rq-page { max-width: 720px; }
.rq-card { padding: 18px 0; border-bottom: 1px solid var(--sep); display: grid; gap: 8px; }
.rq-card header { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; }
.rq-who { text-decoration: none; color: var(--label); }
.rq-who span { color: var(--label-3); font-size: 13.5px; }
.rq-stats { margin: 0; font-size: 13px; color: var(--label-2); }
.rq-stats b { color: var(--label); }
.rq-post { margin: 0; padding: 10px 14px; border-left: 3px solid var(--sep); font-size: 14.5px; line-height: 1.5; color: var(--label-2); white-space: pre-wrap; max-height: 9em; overflow: hidden; }
.rq-rec { margin: 0; font-size: 13px; color: var(--label-3); }
.rq-card textarea { width: 100%; box-sizing: border-box; padding: 10px 12px; border: 0; border-radius: 12px; background: var(--fill-2); color: var(--label); font: 15px/1.45 var(--font); resize: vertical; }
.rq-acts { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.rq-acts .rc-link { flex: 1; min-width: 200px; }
.rq-acts .pro-go { width: auto; height: 38px; padding: 0 16px; font-size: 14px; }
.rq-done { margin: 0; font-size: 14px; color: var(--label-2); }
.rq-err { color: var(--bad); text-align: left; }
.rq-h { margin: 28px 0 0; font-size: 17px; }
.rq-acts .pro-go:disabled, .rc-xpost .pro-go:disabled { opacity: .4; cursor: default; }

/* ---------- Partners ---------- */
.pt-row { grid-template-columns: 2.6fr .7fr .8fr .7fr .9fr .9fr .9fr 1.4fr; align-items: center; }
.pt-row > span:first-child { display: grid; gap: 2px; min-width: 0; }
.pt-row small { font-size: 12px; color: var(--label-3); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pt-acts { display: flex; gap: 12px; justify-content: flex-end; }
.pt-acts .link { background: none; border: 0; padding: 0; font: 600 13px var(--font); color: var(--accent); cursor: pointer; }
.pt-form { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px 16px; align-items: end; }
.pt-form label { display: grid; gap: 6px; position: relative; }
.pt-form label.wide { grid-column: span 2; }
.pt-form label span { font-size: 12.5px; color: var(--label-3); }
.pt-form input { height: 38px; padding: 0 12px; border: 0; border-radius: 10px; background: var(--fill-2); color: var(--label); font: 15px var(--font); }
.pt-form em { position: absolute; right: 12px; bottom: 10px; font-style: normal; font-size: 13px; color: var(--label-3); }
.pt-form .pro-go { height: 38px; }
.pt-link { display: flex; align-items: center; gap: 12px; margin: 4px 0 20px; }
.pt-link code { flex: 1; padding: 10px 14px; border-radius: 10px; background: var(--fill-2); font-size: 15px; overflow-x: auto; white-space: nowrap; }
.pt-link .pro-go { width: auto; padding: 0 18px; height: 40px; }
@media (max-width: 720px) {
  .pt-row { grid-template-columns: 1.6fr repeat(3, 1fr); }
  .pt-row > :nth-child(2), .pt-row > :nth-child(5), .pt-row > :nth-child(6), .pt-row > :nth-child(8) { display: none; }
  .pt-form { grid-template-columns: 1fr 1fr; }
}

/* ---------- Claiming a profile ---------- */
.pf-claim { display: inline-block; margin-top: 8px; font-size: 13px; color: var(--label-3); text-decoration: none; }
.pf-claim:hover { color: var(--accent); }
.pf-claimed { display: inline-block; margin-top: 8px; font-size: 13px; font-weight: 600; color: var(--good, #30d158); }
.cl-page { max-width: 640px; }
.cl-head { display: flex; align-items: center; gap: 16px; padding: 12px 0 18px; }
.cl-head h1 { margin: 0 0 4px; font: 700 28px/1.1 var(--font-display); letter-spacing: -.02em; }
.cl-head p { margin: 0; color: var(--label-3); }
.cl-lede { font-size: 16px; line-height: 1.55; color: var(--label-2); }
.cl-acts { display: flex; gap: 10px; margin-top: 18px; }
.cl-acts .pro-go { width: auto; padding: 0 22px; }
.cl-steps { margin: 6px 0 0; padding: 0 0 0 20px; display: grid; gap: 26px; }
.cl-steps li { display: grid; gap: 8px; }
.cl-steps li > span { font-size: 13.5px; color: var(--label-3); }
.cl-post { margin: 4px 0; padding: 12px 14px; border-radius: 12px; background: var(--fill-2); font-size: 15px; line-height: 1.5; }
.cl-steps .pro-go { width: auto; justify-self: start; padding: 0 22px; text-decoration: none; display: inline-flex; align-items: center; }
.cl-note { text-align: left; }
.cl-badge { padding: 18px 0; }
.cl-snip { display: grid; grid-template-columns: 1fr auto; gap: 6px 10px; align-items: center; padding: 12px 0; border-top: 1px solid var(--sep); }
.cl-snip span { grid-column: 1 / -1; font-size: 13px; color: var(--label-3); }
.cl-snip code { padding: 9px 12px; border-radius: 10px; background: var(--fill-2); font-size: 13px; overflow-x: auto; white-space: nowrap; }
.cl-snip .pro-go { width: auto; height: 36px; padding: 0 16px; font-size: 14px; }

/* ---------- Admin: outreach ---------- */
.ot-subject { width: 100%; box-sizing: border-box; height: 38px; padding: 0 12px; border: 0; border-radius: 10px; background: var(--fill-2); color: var(--label); font: 600 15px var(--font); }
.ot-flex { flex: 1; }
.ot-st { font-size: 12px; font-weight: 650; color: var(--label-3); }
.ot-st.ot-approved, .ot-st.ot-claimed { color: var(--good, #30d158); }
.ot-st.ot-exported { color: var(--accent); }
.ot-csv { width: auto; height: 36px; padding: 0 16px; font-size: 14px; display: inline-flex; align-items: center; text-decoration: none; }
.ot-card a.pro-go { display: inline-flex; align-items: center; text-decoration: none; width: auto; height: 38px; padding: 0 16px; font-size: 14px; }

/* Follow beside a market's alerts bell, and everything followed on your profile. */
.md-acts { margin-left: auto; align-self: flex-start; display: flex; align-items: center; gap: 8px; }
.md-acts .md-bell { margin-left: 0; }
.md-acts .follow { height: 36px; }
.me-count { margin: 22px 0 -8px; padding: 0 14px; font-size: 13px; color: var(--label-3); }
.me-ic { display: inline-flex; width: 32px; height: 32px; align-items: center; justify-content: center; flex: none; }
.me-ic img, .me-ic svg { max-width: 32px; max-height: 32px; }
.me-q { display: flex; flex-direction: column; align-items: flex-end; font-size: 13.5px; }
.me-q .w2-chg { font-size: 12px; }

/* A coin or stock's alerts: switches that stay open while you flip them. */
.menu.ntf-lv .as-row { display: flex; align-items: center; justify-content: space-between; width: 100%; min-height: 54px; text-align: left; border-radius: 10px; }
.menu.ntf-lv .as-row:hover { background: var(--fill-3); }
.as-row .switch { flex: none; pointer-events: none; }
.as-max { margin-left: 4px; padding: 1px 6px; border-radius: 6px; background: var(--fill-2); color: var(--label-2); font: 600 10.5px var(--font); font-style: normal; letter-spacing: .02em; vertical-align: 1px; }
.as-note { margin: 2px 10px 6px; font-size: 12px; line-height: 1.35; color: var(--label-3); }
.as-who { display: flex; flex-direction: column; min-width: 0; }
.as-who small { font-size: 12.5px; color: var(--label-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* Alert menus sit over charts: solid, so nothing shows through. */
.menu.ntf-lv { background: var(--surface-2); backdrop-filter: none; -webkit-backdrop-filter: none; }

/* An admin's Full / MVP switch in the header, and what the MVP leaves out of the nav. */
.view-sw { display: inline-flex; align-items: center; height: 30px; padding: 2px; border-radius: var(--r-pill); background: var(--fill-3); flex: none; }
.view-sw button { height: 26px; padding: 0 11px; border-radius: var(--r-pill); font: 600 12.5px var(--font); color: var(--label-3); transition: background var(--fast), color var(--fast); }
.view-sw button[aria-checked="true"] { background: var(--label); color: var(--bg); }
body.mvp [data-nav="promises"] { display: none !important; }
@media (max-width: 767px) { .view-sw { height: 28px; } .view-sw button { height: 24px; padding: 0 9px; font-size: 12px; } }

/* People: one flat ranked list. Rank, who, what they're best at, their record, what following them made, their Cred. */
.rk-list { display: flex; flex-direction: column; padding-bottom: 40px; }
.rk-head, .rk-row { display: grid; grid-template-columns: 28px minmax(0, 1fr) 150px 96px 96px 64px 92px; align-items: center; gap: 20px; padding: 0 14px; }
.rk-head { height: 36px; border-bottom: 1px solid var(--sep); font-size: 11.5px; font-weight: 600; letter-spacing: .02em; text-transform: uppercase; color: var(--label-3); }
.rk-head span:first-child { text-align: right; }
.rk-num { text-align: right; }
.rk-row { min-height: 72px; border-bottom: 1px solid color-mix(in srgb, var(--sep) 55%, transparent); color: var(--label); text-decoration: none; animation: rise var(--slow) var(--ease) both; animation-delay: calc(var(--i, 0) * 16ms); transition: background var(--fast); }
.rk-row:hover { background: var(--fill-3); }
.rk-rk { text-align: right; font: 600 14px var(--font); font-variant-numeric: tabular-nums; color: var(--label-3); }
.rk-row.top .rk-rk { color: var(--label); font-weight: 700; }
.rk-who { display: flex; align-items: center; gap: 14px; min-width: 0; }
.rk-id { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.rk-nm { display: flex; align-items: center; gap: 4px; min-width: 0; font-size: 15px; font-weight: 600; letter-spacing: -.01em; }
.rk-nm span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rk-id small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 12.5px; color: var(--label-3); }
.rk-best { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 8px; min-width: 0; font-size: 14px; }
.rk-best b { font-weight: 600; }
.rk-best small { font-size: 12px; color: var(--label-3); }
.rk-tier.proven { color: var(--good); font-weight: 600; } .rk-tier.rising { color: var(--accent); font-weight: 600; }
.rk-live { flex-basis: 100%; }
.rk-num { display: flex; flex-direction: column; align-items: flex-end; gap: 3px; }
.rk-num b { font: 600 15px var(--font); font-variant-numeric: tabular-nums; }
.rk-num b.up { color: var(--good); } .rk-num b.down { color: var(--bad); }
.rk-num small { font-size: 12px; font-variant-numeric: tabular-nums; color: var(--label-3); }
.rk-cred { display: flex; flex-direction: column; align-items: flex-end; gap: 2px; }
.rk-cred b { font: 700 24px/1 var(--font-display, var(--font)); letter-spacing: -.03em; font-variant-numeric: tabular-nums; }
.rk-cred.hi b { color: var(--good); } .rk-cred.lo b { color: var(--bad); }
.rk-cred.none b { font-size: 13px; font-weight: 600; color: var(--label-3); }
.rk-cred small { font-size: 11px; color: var(--label-3); }
.rk-row .follow { justify-self: end; height: 30px; padding: 0 15px; font-size: 13px; background: var(--fill-2); color: var(--label); }
.rk-row .follow:hover { opacity: 1; background: color-mix(in srgb, var(--label) 18%, var(--fill-2)); }
.rk-row .follow.on { background: none; color: var(--label-3); }
@media (max-width: 1100px) {
  .rk-head, .rk-row { grid-template-columns: 26px minmax(0, 1fr) 130px 84px 60px 86px; gap: 16px; }
  .rk-head span:nth-child(5), .rk-row .rk-res { display: none; }
}
@media (max-width: 720px) {
  .rk-head, .rk-row { grid-template-columns: 20px minmax(0, 1fr) auto 46px; gap: 12px; padding: 0 4px; }
  .rk-head span:nth-child(3), .rk-head span:nth-child(5), .rk-head span:nth-child(7), .rk-row .rk-best, .rk-row .rk-res, .rk-row .follow { display: none; }
  .rk-row { min-height: 64px; }
  .rk-cred b { font-size: 20px; }
}
/* A ticker's or sub-topic's People: the same list, with its record, live calls and Cred. */
.rk-head.sub, .rk-row.sub { grid-template-columns: 28px minmax(0, 1fr) 120px 70px 64px 92px; }
.rk-go { padding: 6px 8px; margin: -6px -8px; border-radius: 10px; font: inherit; color: inherit; background: none; cursor: pointer; }
.rk-go:hover { background: var(--fill-2); }
@media (max-width: 720px) {
  .rk-head.sub, .rk-row.sub { grid-template-columns: 20px minmax(0, 1fr) auto 46px; }
  .rk-head.sub span:nth-child(4), .rk-head.sub span:nth-child(6) { display: none; }
  .rk-head.sub span:nth-child(3), .rk-head.sub span:nth-child(5) { display: block; }
}

/* People: a heading with the numbers that matter, then the list with a side column beside it (as the feed has). */
.page.ppx-page { max-width: 1320px; }
.ppx-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; flex-wrap: wrap; padding: 6px 0 22px; }
.ppx-head h1 { margin: 0; font: 700 40px/1.05 var(--font-display, var(--font)); letter-spacing: -.035em; }
.ppx-head p { margin: 6px 0 0; font-size: 15.5px; color: var(--label-2); }
.ppx-layout { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 48px; align-items: start; margin-top: 18px; }
.ppx-main { min-width: 0; }
.ppx-rail { top: 84px; }
.ppx-rail .rx-win-r b { font-size: 14px; font-weight: 700; font-variant-numeric: tabular-nums; white-space: nowrap; }
.ppx-rail .rx-win-r b.up { color: var(--good); } .ppx-rail .rx-win-r b small { font-size: 11px; font-weight: 600; opacity: .75; } .ppx-rail .rx-win-r b.down { color: var(--bad); }
@media (max-width: 1180px) { .ppx-layout { grid-template-columns: minmax(0, 1fr); } .ppx-rail { display: none; } }
@media (max-width: 720px) {
  .ppx-head { align-items: flex-start; padding-bottom: 14px; }
  .ppx-head h1 { font-size: 32px; }
}

/* The MVP's live-call numbers atop Predictions: one quiet line, each number beside its label, dots between. */
.pks { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 0; margin: 14px 0 6px; padding: 0 12px 12px; border-bottom: 1px solid color-mix(in srgb, var(--sep) 45%, transparent); font-size: 13px; color: var(--label-3); }
.pks-i { display: inline-flex; align-items: baseline; gap: 5px; white-space: nowrap; }
.pks-i + .pks-i::before { content: "·"; margin: 0 12px; color: var(--label-3); opacity: .6; }
.pks-i b { font: 600 14px var(--font); font-variant-numeric: tabular-nums; color: var(--label); }
.pks-i b.up { color: var(--good); }
.pks-i span { text-transform: lowercase; }
@media (max-width: 720px) { .pks { padding-left: 0; padding-right: 0; } }

/* The header, less crowded: room between its parts, the search without its shortcut hint, quieter controls. */
.nav-right { gap: 10px; }
.search-btn kbd { display: none; }
.search-btn span { margin-right: 10px; }
.search-btn { padding: 0 12px; }
.seg { gap: 6px; }
.seg a { padding: 7px 16px; }
.pro-btn[hidden] { display: none; }
.view-sw { margin-right: 4px; }
/* Phones keep the header's own side padding, whatever lining up with a wider page set. */
@media (max-width: 720px) { .nav-inner { padding-left: 16px !important; padding-right: 16px !important; } }
/* A graded coin or stock call's return, after its verdict. */
.v-ret { margin-left: 8px; font-weight: 700; }

/* Pricing's heading: stacked and centered (a flex row from another component's .pc-head squeezed it into columns). */
.pricing .pc-head { display: block; max-width: 760px; margin: 0 auto; padding: 36px 0 34px; text-align: center; }
.pricing .pc-head h1 { margin: 0 0 16px; }
.pricing .pc-head p { margin: 0 auto 26px; max-width: 560px; }
.pricing .pc-bill button { white-space: nowrap; }
/* "Most popular" sits above Pro's name, out of the flow, so the three plans' names and prices line up. */
.pricing .pc-col { padding-top: 34px; }
.pricing .pc-flag { position: absolute; top: 12px; left: 26px; margin: 0; }
@media (max-width: 720px) { .pricing .pc-flag { left: 2px; } }

/* The sign-in and sign-up sheet, tidied: the plain logo, room around the agreement, the button set apart. */
.auth-mark { display: block; width: 22px; height: 32px; margin: 2px 0 18px; }
.auth-sheet h2 { margin-bottom: 6px; }
.auth-seg { margin: 22px 0 16px; }
.auth-form .ios-group { margin-bottom: 0; }
.auth-agree { gap: 12px; align-items: flex-start; margin: 16px 2px 22px; font-size: 12.5px; line-height: 1.5; color: var(--label-3); }
.auth-agree input { width: 17px; height: 17px; margin-top: 2px; }
.auth-agree .link { color: var(--label-2); text-decoration: underline; text-underline-offset: 2px; }
.auth-form .pro-go { width: 100%; margin-top: 0; }
.auth-form .ios-group + .auth-err, .auth-form .ios-group + .pro-go { margin-top: 18px; }

/* The MVP's Predictions views: a slim row of tabs over the page, lined up with the header. */
.mvp-sub { padding: 14px max(20px, calc((100vw - 1180px) / 2)) 0; }
.mvp-sub-in { display: flex; gap: 22px; border-bottom: 1px solid var(--sep); overflow-x: auto; scrollbar-width: none; }
.mvp-sub-in::-webkit-scrollbar { display: none; }
.mvp-sub a { padding: 10px 0 11px; color: var(--label-2); font: 600 14.5px var(--font); white-space: nowrap; border-bottom: 2px solid transparent; margin-bottom: -1px; transition: color var(--fast); }
.mvp-sub a:hover { color: var(--label); }
.mvp-sub a.on { color: var(--label); border-bottom-color: var(--label); }
@media (max-width: 720px) { .mvp-sub { padding: 8px 16px 0 !important; } .mvp-sub-in { gap: 18px; } }

/* Without Pro: the whale board past its first quarter, and the markets past theirs. */
.wb-wall { margin-top: 4px; }
.wr.locked { opacity: .5; }
.wr.locked .wr-n b::after { content: ""; display: inline-block; width: 10px; height: 10px; margin-left: 6px; background: currentColor; -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M7 10V7a5 5 0 0 1 10 0v3h1a1 1 0 0 1 1 1v9a1 1 0 0 1-1 1H6a1 1 0 0 1-1-1v-9a1 1 0 0 1 1-1Zm2 0h6V7a3 3 0 0 0-6 0Z'/%3E%3C/svg%3E") center / contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M7 10V7a5 5 0 0 1 10 0v3h1a1 1 0 0 1 1 1v9a1 1 0 0 1-1 1H6a1 1 0 0 1-1-1v-9a1 1 0 0 1 1-1Zm2 0h6V7a3 3 0 0 0-6 0Z'/%3E%3C/svg%3E") center / contain no-repeat; }
.mk-lock { display: grid; place-items: center; min-height: 420px; }

/* Receipts: the return beside Called it / Missed. */
.m-tag b { margin-left: 4px; font-variant-numeric: tabular-nums; }

/* Whale watch: who placed a Polymarket bet, linked to their wallet. */
.tl-who { display: inline-flex; align-items: center; gap: 4px; margin-top: 6px; color: var(--label-2); font: 500 13px var(--font); }
.tl-who b { color: var(--accent, #0a84ff); font-weight: 600; }
.tl-who svg { width: 12px; height: 12px; fill: none; stroke: currentColor; stroke-width: 2.2; }
.tl-who:hover b { text-decoration: underline; }

/* A whale chart's entry: a label over a short arrow, pointing at the moment and price they got in. */
.wh-entry { position: absolute; z-index: 2; transform: translate(-50%, -100%); display: flex; flex-direction: column; align-items: center; pointer-events: none; }
.wh-entry b { padding: 3px 8px; border-radius: 6px; background: var(--label, #fff); color: var(--bg, #000); font: 700 11.5px var(--font); white-space: nowrap; box-shadow: 0 2px 8px rgba(0, 0, 0, .35); }
.wh-entry i { width: 2px; height: 16px; margin-bottom: 6px; background: var(--label, #fff); position: relative; }
.wh-entry i::after { content: ""; position: absolute; left: 50%; bottom: -5px; transform: translateX(-50%); border: 5px solid transparent; border-top: 6px solid var(--label, #fff); border-bottom: 0; }
/* Entered before the chart starts: pinned to the left edge, label to the right of the arrow. */
.wh-entry.early { transform: translate(0, -100%); align-items: flex-start; }
.wh-entry.early i { margin-left: 2px; }

/* Whale positions with only open or only settled: the one there is, as a plain label, no switch. */
.wh-postab.one > span { display: inline-flex; align-items: center; font: 600 13px/1 var(--font); color: var(--label); background: var(--surface-2, #2c2c2e); border-radius: 7px; padding: 7px 12px; }
.wh-postab.one small { margin-left: 6px; font-size: 11.5px; color: var(--label-3); }

/* Whales: All predictions' filter bar, and the note while whales are still being read for a topic. */
.wb-tool { margin: 18px 0 16px; }
.wb-pend { display: flex; align-items: center; gap: 10px; margin: -4px 4px 14px; font-size: 13px; color: var(--label-3); }
.wb-pend .spinner, .wb-pend svg { width: 14px; height: 14px; }

/* A whale's Polymarket buy in notifications: what they paid, where it is now, and the bet on polymarket.us. */
.ntf-copy { display: flex; align-items: center; flex-wrap: wrap; gap: 6px 10px; margin-top: 6px; font-size: 12.5px; color: var(--label-2); }
.ntf-copy b { color: var(--label); font-variant-numeric: tabular-nums; }
.ntf-copy em { font-style: normal; font-weight: 700; } .ntf-copy em.warn { color: #ff9f0a; } .ntf-copy em.up { color: var(--good); }
.ntf-go { height: 26px; padding: 0 10px; border: 0; border-radius: 13px; background: var(--accent, #0a84ff); color: #fff; font: 650 12px var(--font); cursor: pointer; }
.ntf-go:hover { filter: brightness(1.1); }

/* Whales' filters, part of the page: topics as tabs with the menus beside them on one hairline, the topic's leagues or
   tickers under it. No box. */
.wb-bar { display: flex; align-items: flex-end; gap: 16px; margin: 22px 0 0; border-bottom: 1px solid var(--sep); }
.wb-topics { display: flex; gap: 26px; flex: 1 1 auto; min-width: 0; overflow-x: auto; scrollbar-width: none; }
.wb-topics::-webkit-scrollbar { display: none; }
.wb-topics button { position: relative; padding: 0 0 12px; border: 0; background: none; color: var(--label-2); font: 600 15.5px var(--font); white-space: nowrap; cursor: pointer; transition: color var(--fast); }
.wb-topics button:hover { color: var(--label); }
.wb-topics button.on { color: var(--label); }
.wb-topics button.on::after { content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 2px; border-radius: 2px; background: var(--label); }
.wb-menus { display: flex; gap: 2px; flex: none; padding-bottom: 6px; }
.wb-menus .dd-btn { background: none; box-shadow: none; color: var(--label-2); font-weight: 600; }
.wb-menus .dd-btn:hover, .wb-menus .dd.open .dd-btn { color: var(--label); background: var(--fill-3); }
.wb-subs { display: flex; gap: 6px; margin: 14px 0 0; overflow-x: auto; scrollbar-width: none; }
.wb-subs::-webkit-scrollbar { display: none; }
.wb-subs button { display: inline-flex; align-items: center; gap: 6px; flex: none; height: 30px; padding: 0 12px; border: 0; border-radius: 15px; background: none; color: var(--label-2); font: 600 13.5px var(--font); white-space: nowrap; cursor: pointer; }
.wb-subs button:hover { color: var(--label); }
.wb-subs button.on { background: var(--fill-2); color: var(--label); }
.wb-bar + .wb-cols, .wb-subs + .wb-cols, .wb-pend + .wb-cols { margin-top: 22px; }
.wb-pend { margin: 12px 2px 0; }
@media (max-width: 720px) {
  .wb-bar { flex-direction: column; align-items: stretch; gap: 8px; }
  .wb-menus { order: -1; padding-bottom: 0; }
}
/* The "still reading" note: one line, a small pulsing dot. */
.wb-pend-dot { flex: none; width: 7px; height: 7px; border-radius: 50%; background: var(--accent, #0a84ff); animation: wb-pulse 1.2s ease-in-out infinite; }
@keyframes wb-pulse { 0%, 100% { opacity: .35; } 50% { opacity: 1; } }

/* Whales: one thin bar under the topics, how far along the loading or reading is. */
.wb-prog { display: flex; flex-direction: column; gap: 7px; margin: 14px 0 0; max-width: 420px; }
.wb-prog-t { display: flex; justify-content: space-between; font-size: 12.5px; color: var(--label-3); }
.wb-prog-t b { color: var(--label-2); font-weight: 600; font-variant-numeric: tabular-nums; }
.wb-prog-bar { display: block; height: 3px; border-radius: 3px; background: var(--fill-2); overflow: hidden; }
.wb-prog-bar b { display: block; height: 100%; border-radius: 3px; background: var(--accent, #0a84ff); transition: width .6s ease; }
.wb-prog.loading .wb-prog-bar b { width: 85%; animation: wb-fill 2.4s cubic-bezier(.2, .7, .3, 1) both; }
@keyframes wb-fill { from { width: 4%; } to { width: 85%; } }

/* The loader: the Cred emblem, still, with a thin white bar under it filling to 100%. */
.busy-in { display: flex; flex-direction: column; align-items: center; gap: 18px; }
.busy .busy-logo { animation: none; }
.busy-bar { position: relative; display: block; width: 132px; height: 3px; border-radius: 3px; overflow: hidden; background: rgba(255, 255, 255, .16); }
.busy-bar i { position: absolute; inset: 0 auto 0 0; width: 0; border-radius: 3px; background: #fff; box-shadow: 0 0 10px rgba(255, 255, 255, .35); }
:root[data-theme="light"] .busy-bar { background: rgba(0, 0, 0, .12); } :root[data-theme="light"] .busy-bar i { background: #000; box-shadow: none; }
@media (prefers-color-scheme: light) { :root:not([data-theme="dark"]) .busy-bar { background: rgba(0, 0, 0, .12); } :root:not([data-theme="dark"]) .busy-bar i { background: #000; box-shadow: none; } }

/* The Record's summary: whose numbers these are, in one plain line above them. */
.rc-scope { margin: 0 0 14px; font-size: 13.5px; line-height: 1.5; color: var(--label-2); }
.rc-scope b { color: var(--label); font-weight: 650; }

/* A profit chart's marks: where a position was opened, and where one closed (won or lost); named on hover. */
.pc-plot { position: relative; flex: 1; display: flex; flex-direction: column; }
.pc-plot svg { flex: 1; }
.pc-marks { position: absolute; inset: 0; pointer-events: none; }
.pc-mk { position: absolute; width: 10px; height: 10px; margin: -5px 0 0 -5px; border-radius: 50%; border: 2px solid var(--bg, #000); pointer-events: auto; cursor: default; }
.pc-mk.in { background: var(--label, #fff); width: 8px; height: 8px; margin: -4px 0 0 -4px; }
.pc-mk.win { background: var(--good); } .pc-mk.loss { background: var(--bad); }
.cpd-state.up { color: var(--good); } .cpd-state.down { color: var(--bad); }

/* A copied whale, laid out like a portfolio: positions as rows (tap one for its market's chart). */
.cpd2 .pov-row.cpd-pos { grid-template-columns: 32px minmax(0, 1fr) 96px 92px 110px; }
.cpd2 .pov-row.cpd-pos.on { background: var(--fill-3); border-radius: 12px; }
.cpd2 .pov-due b.up { color: var(--good); } .cpd2 .pov-due b.down { color: var(--bad); }
.cpd2 .trd-post h4 small { margin-left: 8px; font-weight: 500; color: var(--label-3); text-transform: none; letter-spacing: 0; }
.cpd2 .cpd-chart { margin: 18px 0 6px; }
@media (max-width: 1100px) { .cpd2 .pov-row.cpd-pos { grid-template-columns: 32px minmax(0, 1fr) 96px; } .cpd2 .pov-row.cpd-pos .pov-crowd, .cpd2 .pov-row.cpd-pos .pov-due { display: none; } }
/* A whale's trade in a copy: what it did to yours (opened, added, took off, closed), or that it wasn't yours to touch. */
.cpd2 .cpd-row { grid-template-columns: 64px 30px minmax(0, 1fr) 150px; }
.cpd2 .cpd-you { display: flex; flex-direction: column; align-items: flex-end; text-align: right; gap: 1px; }
.cpd2 .cpd-you small { font-size: 11.5px; color: var(--label-3); }
.cpd2 .cpd-you b { font-weight: 650; font-variant-numeric: tabular-nums; }
.cpd2 .cpd-you em { font-style: normal; font-size: 12px; font-weight: 650; } .cpd2 .cpd-you em.up { color: var(--good); } .cpd2 .cpd-you em.down { color: var(--bad); }
.cpd2 .cpd-you.muted b { color: var(--label-3); font-weight: 500; }

/* A copy loading: a thin bar filling to 100% as their markets are read. */
.cp-load { display: flex; flex-direction: column; gap: 10px; max-width: 460px; margin: 40px auto; text-align: center; font-size: 13px; color: var(--label-3); }
.cp-load i { display: block; height: 3px; border-radius: 3px; background: var(--fill-2); overflow: hidden; }
.cp-load b { display: block; height: 100%; border-radius: 3px; background: var(--label, #fff); transition: width .4s ease; }
/* Stepping through a copy's positions on the chart. */
.cp-step { display: inline-flex; align-items: center; gap: 6px; margin-left: auto; margin-right: 8px; font-size: 12px; color: var(--label-3); }
.cp-step button { width: 28px; height: 28px; border: 0; border-radius: 14px; background: var(--fill-2); color: var(--label); font: 600 16px/1 var(--font); cursor: pointer; }
.cp-step button:disabled { opacity: .35; cursor: default; }
.cp-step small { min-width: 64px; text-align: center; font-variant-numeric: tabular-nums; }
.wh-chart-h small em { font-style: normal; font-weight: 650; } .wh-chart-h small em.up { color: var(--good); } .wh-chart-h small em.down { color: var(--bad); }