/* Claude Portfolio — dashboard styles. Tokens first; every colour comes from them. */
:root {
  /* Trading-desk palette: near-black, trading green/red, Bloomberg amber. */
  --bg: #06080b;
  --panel: #0c1016;
  --panel-2: #121821;
  --panel-3: #19212c;
  --line: #1a222d;
  --line-2: #273241;
  --text: #edf1f6;
  --text-2: #bcc6d2;
  --muted: #8793a3;
  --dim: #5a6576;
  --accent: #b57bff;   /* the logo's violet (v3.231); was Bloomberg amber #ffb020 */
  --accent-2: #7c3aed;
  --blue: #4da3ff;
  --up: #1fdd8a;
  --down: #ff4d61;
  --warn: #ffb020;
  --info: #4da3ff;
  --up-bg: rgba(31, 221, 138, .12);
  --down-bg: rgba(255, 77, 97, .12);
  --warn-bg: rgba(255, 176, 32, .11);
  --accent-bg: rgba(181, 123, 255, .10);
  /* Scores (v3.283): a softer sage green, so a strong score never reads as a price gain (--up). */
  --score-5: #9fe0b4;
  --score-4: #74c392;
  --score-3: #549b72;
  --radius: 12px;
  --radius-sm: 7px;
  --sidebar: 224px;
  --font: "Inter", ui-sans-serif, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  --mono: "JetBrains Mono", ui-monospace, "SF Mono", "Cascadia Mono", Menlo, Consolas, monospace;
  color-scheme: dark;
}

* { box-sizing: border-box; }
html, body { margin: 0; background: var(--bg); color: var(--text); font: 14.5px/1.5 var(--font); -webkit-font-smoothing: antialiased; font-feature-settings: "cv11", "ss01"; }
body { background: radial-gradient(1200px 600px at 70% -200px, rgba(181, 123, 255, .05), transparent 60%), radial-gradient(900px 500px at -10% 110%, rgba(31, 221, 138, .04), transparent 60%), var(--bg); background-attachment: fixed; }
button, input, select { font: inherit; color: inherit; }
a { color: var(--accent); text-decoration: none; }
a:hover { text-decoration: underline; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 4px; }
.num, td.n, th.n { font-family: var(--mono); font-variant-numeric: tabular-nums; }

/* ── Shell ──────────────────────────────────────────────────────────────── */
.shell { display: grid; grid-template-columns: var(--sidebar) 1fr; min-height: 100vh; }
.side { position: sticky; top: 0; height: 100vh; border-right: 1px solid var(--line); background: #0c0f13; display: flex; flex-direction: column; padding: 18px 12px; gap: 18px; }
.brand { padding: 0 8px; }
.brand b { display: block; font-size: 15px; letter-spacing: .02em; }
.brand span { color: var(--dim); font-size: 12px; }
.nav { display: flex; flex-direction: column; gap: 2px; }
.nav button { display: flex; align-items: center; gap: 10px; width: 100%; padding: 9px 10px; border: 0; border-radius: var(--radius-sm); background: none; color: var(--text-2); cursor: pointer; text-align: left; font-size: 14px; }
.nav button svg { width: 17px; height: 17px; flex: none; opacity: .8; }
.nav button:hover { background: var(--panel-2); color: var(--text); }
.nav button[aria-current="page"] { background: var(--accent-bg); color: var(--text); box-shadow: inset 2px 0 0 var(--accent); }
.nav .badge { margin-left: auto; }
.side-foot { margin-top: auto; padding: 0 8px; color: var(--dim); font-size: 12px; display: grid; gap: 4px; }

.main { min-width: 0; display: flex; flex-direction: column; }
.top { position: sticky; top: 0; z-index: 20; display: flex; align-items: center; gap: 12px; padding: 10px 24px; border-bottom: 1px solid var(--line); background: rgba(10, 12, 15, .92); backdrop-filter: blur(8px); }
.top h1 { font-size: 16px; margin: 0; font-weight: 600; white-space: nowrap; }
.top .spacer { flex: 1; }
.status { display: inline-flex; align-items: center; gap: 7px; padding: 5px 10px; border-radius: 999px; border: 1px solid var(--line-2); font-size: 12px; color: var(--text-2); white-space: nowrap; background: none; cursor: pointer; }
.status i { width: 8px; height: 8px; border-radius: 50%; background: var(--up); box-shadow: 0 0 0 3px var(--up-bg); }
.status.warn i { background: var(--warn); box-shadow: 0 0 0 3px var(--warn-bg); }
.status.bad i { background: var(--down); box-shadow: 0 0 0 3px var(--down-bg); }
.updated { color: var(--dim); font-size: 12px; white-space: nowrap; }
.content { padding: 20px 24px 60px; display: grid; gap: 16px; max-width: 1560px; width: 100%; grid-auto-rows: max-content; }

/* ── Search ─────────────────────────────────────────────────────────────── */
.search { position: relative; width: min(380px, 40vw); }
.search input { width: 100%; padding: 8px 12px 8px 34px; border-radius: 8px; border: 1px solid var(--line-2); background: var(--panel); outline: none; }
.search input:focus { border-color: var(--accent); }
.search svg { position: absolute; left: 11px; top: 50%; width: 15px; height: 15px; transform: translateY(-50%); color: var(--dim); }
.search kbd { position: absolute; right: 9px; top: 50%; transform: translateY(-50%); }
kbd { font: 11px var(--mono); color: var(--dim); border: 1px solid var(--line-2); border-radius: 4px; padding: 1px 5px; }
.results { position: absolute; top: calc(100% + 6px); left: 0; right: 0; background: var(--panel-2); border: 1px solid var(--line-2); border-radius: 10px; box-shadow: 0 16px 40px rgba(0,0,0,.5); padding: 6px; max-height: 60vh; overflow: auto; z-index: 40; }
.results .grp { padding: 8px 8px 4px; color: var(--dim); font-size: 11px; text-transform: uppercase; letter-spacing: .08em; }
.results button { display: flex; align-items: center; gap: 10px; width: 100%; padding: 8px; border: 0; background: none; border-radius: 6px; cursor: pointer; text-align: left; }
.results button[aria-selected="true"], .results button:hover { background: var(--panel-3); }
.results .t { font-weight: 600; min-width: 64px; font-family: var(--mono); }
.results .nm { color: var(--text-2); flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.results .empty { padding: 12px 8px; color: var(--muted); }

/* ── Building blocks ────────────────────────────────────────────────────── */
.grid { display: grid; gap: 16px; }
.g2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.g3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.g-main { grid-template-columns: minmax(0, 2fr) minmax(300px, 1fr); }
.kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 12px; }
.kpi { background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); padding: 14px 16px; min-width: 0; }
.kpi .l { color: var(--muted); font-size: 12px; }
.kpi .v { font: 600 22px/1.2 var(--mono); margin-top: 6px; font-variant-numeric: tabular-nums; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.kpi .s { color: var(--dim); font-size: 12px; margin-top: 4px; }
.card { background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); min-width: 0; }
.card > header { display: flex; align-items: baseline; gap: 10px; padding: 14px 16px 10px; }
.card > header h2 { font-size: 14px; margin: 0; font-weight: 600; }
.card > header .sub { color: var(--dim); font-size: 12px; }
.card > header .right { margin-left: auto; display: flex; gap: 6px; align-items: center; }
.card .body { padding: 0 16px 16px; }
.card .body.flush { padding: 0 0 6px; }
.up { color: var(--up); } .down { color: var(--down); } .flat { color: var(--text-2); } .muted { color: var(--muted); } .dim { color: var(--dim); }
.warn-t { color: var(--warn); }
.badge { display: inline-flex; align-items: center; gap: 5px; padding: 2px 8px; border-radius: 999px; font-size: 11.5px; font-weight: 500; border: 1px solid var(--line-2); color: var(--text-2); white-space: nowrap; }
.badge.up { background: var(--up-bg); border-color: transparent; color: var(--up); }
.badge.down { background: var(--down-bg); border-color: transparent; color: var(--down); }
.badge.warn { background: var(--warn-bg); border-color: transparent; color: var(--warn); }
.badge.acc { background: var(--accent-bg); border-color: transparent; color: var(--accent); }
.dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: var(--dim); }
.dot.up { background: var(--up); } .dot.down { background: var(--down); } .dot.warn { background: var(--warn); } .dot.acc { background: var(--accent); } .dot.muted { background: var(--line-2); }
.seg { display: inline-flex; border: 1px solid var(--line-2); border-radius: 7px; overflow: hidden; }
.seg button { border: 0; background: none; padding: 4px 10px; font-size: 12px; color: var(--muted); cursor: pointer; }
.seg button[aria-pressed="true"] { background: var(--panel-3); color: var(--text); }
.btn { border: 1px solid var(--line-2); background: var(--panel-2); border-radius: 7px; padding: 6px 12px; cursor: pointer; font-size: 13px; }
.btn:hover { border-color: var(--accent); }
.field { background: var(--panel); border: 1px solid var(--line-2); border-radius: 7px; padding: 6px 10px; font-size: 13px; }

/* Alerts strip — the first thing on Today */
.alerts { display: grid; gap: 8px; }
.alert { display: flex; gap: 10px; align-items: flex-start; padding: 10px 14px; border-radius: var(--radius); border: 1px solid; font-size: 13.5px; }
.alert.warn { border-color: rgba(242,184,75,.35); background: var(--warn-bg); }
.alert.bad { border-color: rgba(255,107,107,.35); background: var(--down-bg); }
.alert.ok { border-color: rgba(54,201,138,.25); background: var(--up-bg); }
.alert b { font-weight: 600; }
.alert .dot { margin-top: 6px; flex: none; }

/* Tables */
.tbl-wrap { overflow-x: auto; }
table { width: 100%; border-collapse: collapse; font-size: 13.5px; }
th { text-align: left; font-weight: 500; color: var(--muted); font-size: 12px; padding: 8px 12px; border-bottom: 1px solid var(--line); white-space: nowrap; user-select: none; }
th.sortable { cursor: pointer; }
th.sortable:hover { color: var(--text); }
th .arr { color: var(--accent); }
td { padding: 9px 12px; border-bottom: 1px solid var(--line); vertical-align: middle; }
td.n, th.n { text-align: right; white-space: nowrap; }
tr:last-child td { border-bottom: 0; }
tbody tr.click { cursor: pointer; }
tbody tr.click:hover td { background: var(--panel-2); }
.tk { font-weight: 600; font-family: var(--mono); }
.tk-sub { display: block; color: var(--dim); font-size: 12px; font-family: var(--font); font-weight: 400; max-width: 240px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.stale-v { color: var(--dim); text-decoration: underline dotted var(--warn); text-underline-offset: 3px; }
.bar { height: 6px; background: var(--panel-3); border-radius: 3px; overflow: hidden; min-width: 60px; }
.bar > i { display: block; height: 100%; background: var(--accent); border-radius: 3px; }
.wbar { display: flex; align-items: center; gap: 8px; justify-content: flex-end; }
.wbar .bar { width: 64px; }

/* Lists */
.list { display: grid; }
.row { display: flex; gap: 12px; padding: 10px 16px; border-top: 1px solid var(--line); align-items: flex-start; }
.row:first-child { border-top: 0; }
.row .grow { flex: 1; min-width: 0; }
.row .t1 { font-weight: 500; }
.row .t2 { color: var(--muted); font-size: 13px; margin-top: 2px; overflow-wrap: anywhere; }
.row .meta { color: var(--dim); font-size: 12px; white-space: nowrap; }
.empty-state { color: var(--muted); padding: 18px 16px; font-size: 13.5px; }
.empty-state b { color: var(--text-2); font-weight: 500; }

/* Prose from the model — readable, never cramped */
.prose { color: var(--text-2); font-size: 13.5px; line-height: 1.6; white-space: pre-wrap; overflow-wrap: anywhere; }
.kv { display: grid; grid-template-columns: max-content 1fr; gap: 6px 14px; font-size: 13.5px; }
.kv dt { color: var(--muted); }
.kv dd { margin: 0; overflow-wrap: anywhere; }
.section-t { font-size: 12px; color: var(--muted); text-transform: uppercase; letter-spacing: .08em; margin: 18px 0 8px; }
.section-t:first-child { margin-top: 0; }
.chips { display: flex; flex-wrap: wrap; gap: 6px; }
.falsify { border-left: 3px solid var(--warn); padding: 8px 12px; background: var(--warn-bg); border-radius: 0 6px 6px 0; font-size: 13.5px; }
.falsify b { color: var(--warn); font-weight: 600; font-size: 12px; text-transform: uppercase; letter-spacing: .06em; display: block; margin-bottom: 2px; }

/* Charts */
.chart { position: relative; width: 100%; }
.chart svg { display: block; width: 100%; height: auto; overflow: visible; }
.chart .axis text { fill: var(--dim); font: 11px var(--mono); }
.chart .grid-l { stroke: var(--line); stroke-width: 1; }
.chart .nav-l { fill: none; stroke: var(--accent); stroke-width: 2; }
.chart .spy-l { fill: none; stroke: #c9a86a; stroke-width: 1.6; stroke-dasharray: 5 4; }
.chart .dd-a { fill: rgba(255,107,107,.18); stroke: var(--down); stroke-width: 1.2; }
.chart .area { fill: url(#navfill); }
.chart .cross { stroke: var(--line-2); stroke-width: 1; }
.chart .pt { stroke: var(--bg); stroke-width: 2; }
.tip { position: absolute; pointer-events: none; background: var(--panel-3); border: 1px solid var(--line-2); border-radius: 8px; padding: 8px 10px; font-size: 12.5px; box-shadow: 0 8px 24px rgba(0,0,0,.45); white-space: nowrap; z-index: 5; }
.tip .d { color: var(--muted); margin-bottom: 4px; }
.legend { display: flex; gap: 14px; font-size: 12px; color: var(--muted); padding: 0 16px 12px; flex-wrap: wrap; }
.legend i { display: inline-block; width: 14px; height: 2px; vertical-align: middle; margin-right: 6px; background: var(--accent); }
.legend i.spy { background: repeating-linear-gradient(90deg, #c9a86a 0 5px, transparent 5px 9px); }
.scatter circle { cursor: pointer; }
.scatter circle:hover { stroke: var(--text); stroke-width: 2; }

/* Tabs inside a view */
.tabs { display: flex; gap: 4px; border-bottom: 1px solid var(--line); margin-bottom: 4px; overflow-x: auto; }
.tabs button { border: 0; background: none; padding: 10px 14px; color: var(--muted); cursor: pointer; border-bottom: 2px solid transparent; white-space: nowrap; }
.tabs button[aria-selected="true"] { color: var(--text); border-bottom-color: var(--accent); }
.toolbar { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }

/* Company drawer */
.drawer-bg { position: fixed; inset: 0; background: rgba(0,0,0,.55); z-index: 50; }
.drawer { position: fixed; top: 0; right: 0; bottom: 0; width: min(920px, 100vw); background: var(--bg); border-left: 1px solid var(--line-2); z-index: 51; display: flex; flex-direction: column; box-shadow: -20px 0 60px rgba(0,0,0,.5); }
.drawer > header { display: flex; align-items: flex-start; gap: 12px; padding: 16px 20px; border-bottom: 1px solid var(--line); }
.drawer > header .tt { font: 700 22px/1.1 var(--mono); }
.drawer > header .nm { color: var(--muted); margin-top: 3px; }
.drawer > header .px { margin-left: auto; text-align: right; }
.drawer > header .px .v { font: 600 20px var(--mono); }
.drawer .scroll { overflow: auto; padding: 16px 20px 40px; display: grid; gap: 16px; }
.close { border: 1px solid var(--line-2); background: var(--panel-2); border-radius: 8px; width: 34px; height: 34px; cursor: pointer; flex: none; }

.skeleton { background: linear-gradient(90deg, var(--panel-2), var(--panel-3), var(--panel-2)); background-size: 200% 100%; animation: sk 1.2s infinite; border-radius: 6px; height: 14px; }
@keyframes sk { to { background-position: -200% 0; } }
.hide { display: none !important; }

/* Offline banner */
.offline { background: var(--down-bg); color: var(--down); padding: 8px 24px; font-size: 13px; border-bottom: 1px solid rgba(255,107,107,.3); }

/* ── Phones and small tablets ───────────────────────────────────────────── */
@media (max-width: 900px) {
  .shell { grid-template-columns: 1fr; }
  .side { position: fixed; top: auto; bottom: 0; left: 0; right: 0; height: auto; flex-direction: row; padding: 0; border-right: 0; border-top: 1px solid var(--line); z-index: 30; gap: 0; }
  .side .brand, .side-foot { display: none; }
  .nav { flex-direction: row; width: 100%; }
  .nav button { flex: 1; flex-direction: column; gap: 3px; font-size: 10.5px; padding: 8px 2px calc(8px + env(safe-area-inset-bottom)); border-radius: 0; justify-content: center; align-items: center; min-width: 0; }
  .nav button span.lbl { overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
  .top .spacer { display: none; }
  .nav button[aria-current="page"] { box-shadow: inset 0 2px 0 var(--accent); }
  .nav .badge { display: none; }
  .top { padding: 10px 16px; gap: 8px; }
  .top h1 { display: none; }
  .search { width: auto; flex: 1; }
  .search kbd, .updated { display: none; }
  .content { padding: 16px 16px 96px; }
  .g2, .g3, .g-main { grid-template-columns: 1fr; }
  .kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .card > header { flex-wrap: wrap; row-gap: 8px; }
  .card > header .right { margin-left: 0; flex-basis: 100%; }
  .kpi .v { font-size: 19px; }
  .drawer > header { padding: 14px 16px; }
  .drawer .scroll { padding: 14px 16px 40px; }
  .hide-sm { display: none; }
}

/* ── v3.213 additions ───────────────────────────────────────────────────── */
/* Today headline */
.hero { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 2fr); gap: 16px; background: linear-gradient(135deg, #111722, #0f1319 60%); border: 1px solid var(--line); border-radius: 14px; padding: 20px 22px; }
.hero .l { color: var(--muted); font-size: 12.5px; }
.hero .big { font: 700 40px/1.1 var(--mono); letter-spacing: -.02em; margin-top: 6px; }
.hero-sub { margin-top: 8px; color: var(--text-2); font-size: 13.5px; display: flex; flex-wrap: wrap; gap: 6px; align-items: baseline; }
.hero-sub .sep { color: var(--dim); }
.hero-stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; align-content: center; }
.hstat { border-left: 1px solid var(--line-2); padding-left: 14px; min-width: 0; }
.hstat .v { font-size: 20px; font-weight: 600; margin-top: 4px; white-space: nowrap; }
.hstat .s { color: var(--dim); font-size: 12px; margin-top: 3px; }

/* Cards that fill their row, with a chart that fills the card */
.card.stretch { display: flex; flex-direction: column; }
.chart.grow { flex: 1; min-height: 280px; position: relative; }
.chart.grow > svg { position: absolute; inset: 0 8px; width: calc(100% - 16px); height: 100%; }

.clamp { display: -webkit-box; -webkit-line-clamp: 9; -webkit-box-orient: vertical; overflow: hidden; }
.linkbtn { border: 0; background: none; color: var(--accent); padding: 8px 0 0; cursor: pointer; font-size: 13px; }

/* Trend lines */
.spark { display: inline-block; vertical-align: middle; }
.spark polyline { fill: none; stroke-width: 1.6; stroke-linejoin: round; stroke-linecap: round; }
.spark .sp-up { stroke: var(--up); }
.spark .sp-down { stroke: var(--down); }

/* Heat tiers */
.badge.hot { background: rgba(245, 140, 60, .16); border-color: transparent; color: #ff9f5a; }

/* Act now shortlist */
.act-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 12px; padding: 0 16px 16px; }
.act { text-align: left; background: var(--panel-2); border: 1px solid var(--line-2); border-radius: 10px; padding: 14px; cursor: pointer; display: grid; gap: 8px; align-content: start; }
.act:hover { border-color: #ff9f5a; }
.act-top { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; }
.act-top .tk { font-size: 16px; }
.act-px { font-size: 13px; }
.act-nm { color: var(--muted); font-size: 12.5px; margin-top: -6px; }
.act-stats { display: flex; gap: 14px; font-size: 12.5px; color: var(--muted); flex-wrap: wrap; }
.act-stats b { color: var(--text); font-weight: 600; }
.act-th { color: var(--text-2); font-size: 13px; line-height: 1.5; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.act-foot { display: flex; justify-content: space-between; gap: 8px; align-items: center; font-size: 12px; color: var(--muted); }

/* Price chart marks */
.chart .avg-l { stroke: var(--accent); stroke-width: 1.2; stroke-dasharray: 4 4; }
.chart .tgt-l { stroke: var(--up); stroke-width: 1; stroke-dasharray: 2 4; }
.chart .stp-l { stroke: var(--warn); stroke-width: 1; stroke-dasharray: 2 4; }
.chart .lvl-t { fill: var(--muted); font: 11px var(--mono); }
.chart .mk-buy { fill: var(--up); stroke: var(--bg); stroke-width: 1; }
.chart .mk-sell { fill: var(--down); stroke: var(--bg); stroke-width: 1; }
.legend i.avg { background: repeating-linear-gradient(90deg, var(--accent) 0 4px, transparent 4px 8px); }
.legend i.tgt { background: repeating-linear-gradient(90deg, var(--up) 0 2px, transparent 2px 6px); }
.legend i.stp { background: repeating-linear-gradient(90deg, var(--warn) 0 2px, transparent 2px 6px); }
/* Rows never shrink below their content — the tab bar (a sideways scroller) was being squashed to 4px. */
.drawer .scroll { grid-auto-rows: max-content; align-content: start; }
.drawer .tabs { margin: -4px 0 0; }

@media (max-width: 900px) {
  .hero { grid-template-columns: 1fr; padding: 16px; }
  .hero .big { font-size: 32px; }
  .hero-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 14px; }
  .hstat .v { font-size: 17px; }
  .chart.grow { min-height: 240px; }
  .act-grid { grid-template-columns: 1fr; }
  /* Text-heavy tables become one card per row on a phone. */
  table.stack thead { display: none; }
  table.stack, table.stack tbody { display: block; }
  table.stack tr { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px 12px; padding: 12px 16px; border-bottom: 1px solid var(--line); }
  table.stack td { display: block; padding: 0; border: 0; text-align: left !important; min-width: 0 !important; }
  table.stack td::before { content: attr(data-l); display: block; color: var(--dim); font-size: 11px; font-family: var(--font); }
  table.stack td.wide { grid-column: 1 / -1; }
}


/* ════════════════════════════════════════════════════════════════════════
   v3.214 — trading-desk theme
   ════════════════════════════════════════════════════════════════════════ */
.num, td.n, th.n, .kpi .v, .hero .big, .hstat .v { font-feature-settings: "zero", "tnum"; }

/* Brand + nav */
.brand { display: flex; align-items: center; gap: 10px; }
.brand .mark { width: 30px; height: 30px; border-radius: 8px; background: linear-gradient(135deg, #b57bff, #6d28d9); display: grid; place-items: center; box-shadow: 0 0 20px rgba(255, 150, 0, .35); flex: none; }
.brand .mark svg { width: 18px; height: 18px; }
.brand b { font-size: 15px; letter-spacing: .01em; }
.brand span { display: block; font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: var(--dim); }
.nav button { font-weight: 500; }
.nav button[aria-current="page"] { background: linear-gradient(90deg, rgba(181, 123, 255, .14), rgba(181, 123, 255, .02)); box-shadow: inset 3px 0 0 var(--accent); color: #fff; }
.nav button[aria-current="page"] svg { color: var(--accent); opacity: 1; }

/* Ticker tape */
.tape { height: 34px; border-bottom: 1px solid var(--line); background: #080b0f; overflow: hidden; position: relative; white-space: nowrap; mask-image: linear-gradient(90deg, transparent, #000 4%, #000 96%, transparent); }
.tape-track { display: inline-flex; height: 100%; align-items: center; font: 600 12.5px var(--mono); animation: tape 60s linear infinite; will-change: transform; }
.tape-run { display: inline-flex; gap: 22px; padding-right: 22px; align-items: center; }
.tape-item.held .t { color: var(--accent); }
.tape-item.tick { animation: tick 1.2s ease-out; }
@keyframes tick { from { background: rgba(181, 123, 255, .22); } to { background: transparent; } }
.tape:hover .tape-track { animation-play-state: paused; }
.tape-item { display: inline-flex; gap: 8px; align-items: baseline; cursor: pointer; }
.tape-item .t { color: #fff; letter-spacing: .04em; }
.tape-item .p { color: var(--text-2); font-weight: 500; }
.tape-sep { color: var(--line-2); }
/* The track holds the list twice; moving by half loops seamlessly with no empty gap. */
@keyframes tape { to { transform: translateX(-50%); } }
/* Reduce motion: no animation, but the strip can be swiped / scrolled by hand. */
@media (prefers-reduced-motion: reduce) { .tape { overflow-x: auto; mask-image: none; } .tape-track { animation: none; padding-left: 16px; } .tape-run[aria-hidden] { display: none; } }

/* Market status */
.mkt { display: inline-flex; align-items: center; gap: 7px; font: 600 11px var(--mono); letter-spacing: .1em; padding: 5px 10px; border-radius: 999px; border: 1px solid var(--line-2); color: var(--muted); white-space: nowrap; }
.mkt i { width: 7px; height: 7px; border-radius: 50%; background: var(--dim); }
.mkt.open { color: var(--up); border-color: rgba(31, 221, 138, .35); }
.mkt.open i { background: var(--up); box-shadow: 0 0 0 0 rgba(31, 221, 138, .6); animation: pulse 2s infinite; }
@keyframes pulse { 70% { box-shadow: 0 0 0 8px rgba(31, 221, 138, 0); } 100% { box-shadow: 0 0 0 0 rgba(31, 221, 138, 0); } }

/* Top bar */
.top { background: rgba(6, 8, 11, .88); }
.top h1 { font-size: 13px; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); font-weight: 600; }
.search input { background: #0a0e13; border-color: var(--line-2); height: 36px; }
.search input:focus { border-color: var(--accent); box-shadow: 0 0 0 3px rgba(181, 123, 255, .12); }

/* Cards — sharper, with a hairline highlight on top */
.card, .kpi { background: linear-gradient(180deg, rgba(255, 255, 255, .018), transparent 40%), var(--panel); border-color: var(--line); box-shadow: 0 1px 0 rgba(255, 255, 255, .03) inset, 0 8px 24px rgba(0, 0, 0, .25); }
.card > header h2 { font-size: 11.5px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--accent); }
.card > header .sub { font-size: 12px; }
.kpi .l, .hstat .l, .hero .l { font-size: 11px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }
.kpi .v { font-size: 24px; font-weight: 700; letter-spacing: -.01em; }
.kpi .v.up, .hstat .v.up { text-shadow: 0 0 18px rgba(31, 221, 138, .25); }
.kpi .v.down, .hstat .v.down { text-shadow: 0 0 18px rgba(255, 77, 97, .25); }

/* Headline */
.hero { background: radial-gradient(600px 220px at 0% 0%, rgba(181, 123, 255, .10), transparent 70%), linear-gradient(135deg, #0f141c, #0a0d12 70%); border: 1px solid var(--line-2); border-radius: 16px; padding: 24px 26px; box-shadow: 0 20px 50px rgba(0, 0, 0, .35); }
.hero .big { font: 800 52px/1 var(--mono); letter-spacing: -.035em; margin-top: 10px; color: #fff; text-shadow: 0 0 40px rgba(255, 255, 255, .08); }
.hero-sub { margin-top: 12px; font-size: 14px; }
.pill { display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; border-radius: 999px; font: 700 13px var(--mono); }
.pill.up { background: var(--up-bg); color: var(--up); }
.pill.down { background: var(--down-bg); color: var(--down); }
.pill.flat { background: var(--panel-3); color: var(--text-2); }
.hstat { border-left-color: var(--line-2); }
.hstat .v { font-size: 22px; font-weight: 700; }

/* Tables */
th { font-size: 10.5px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--dim); background: rgba(255, 255, 255, .012); }
td { border-bottom-color: rgba(255, 255, 255, .045); }
tbody tr.click:hover td { background: rgba(181, 123, 255, .045); }
.tk { font-size: 14px; letter-spacing: .02em; color: #fff; }
td .cell-pill { display: inline-block; min-width: 64px; text-align: right; padding: 3px 8px; border-radius: 6px; font-weight: 600; }
td .cell-pill.up { background: var(--up-bg); color: var(--up); }
td .cell-pill.down { background: var(--down-bg); color: var(--down); }
td .cell-pill.flat { color: var(--text-2); }
.bar { background: #1a2230; }
.bar > i { background: linear-gradient(90deg, var(--accent-2), var(--accent)); }

/* Badges */
.badge { font-weight: 600; letter-spacing: .02em; }
.badge.acc { background: rgba(77, 163, 255, .12); color: var(--blue); }

/* Charts */
.chart .nav-l { stroke: var(--accent); stroke-width: 2.2; filter: drop-shadow(0 0 6px rgba(181, 123, 255, .35)); }
.chart .spy-l { stroke: #7f8da1; }
.legend i { background: var(--accent); height: 3px; }
.legend i.spy { background: repeating-linear-gradient(90deg, #7f8da1 0 5px, transparent 5px 9px); }

/* Tabs and segmented controls */
.tabs button { font-weight: 600; font-size: 13px; letter-spacing: .02em; }
.tabs button[aria-selected="true"] { border-bottom-color: var(--accent); color: #fff; }
.seg button { font: 600 11.5px var(--mono); }
.seg button[aria-pressed="true"] { background: var(--accent); color: #111; }

/* Act now */
.act { background: linear-gradient(180deg, rgba(181, 123, 255, .06), transparent 50%), var(--panel-2); }
.act-top .tk { font-size: 18px; }

@media (max-width: 900px) {
  .hero .big { font-size: 40px; }
  .tape { height: 30px; }
  .mkt { display: none; }
}

/* ════════════════════════════════════════════════════════════════════════
   v3.216 — research workstation + logos
   ════════════════════════════════════════════════════════════════════════ */
.logo { position: relative; flex: none; display: inline-grid; place-items: center; border-radius: 8px; overflow: hidden; background: hsl(var(--h) 40% 22%); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .06); vertical-align: middle; }
.logo b { font: 700 10.5px var(--mono); color: hsl(var(--h) 80% 82%); letter-spacing: .02em; }
.logo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; background: #fff; padding: 3px; }
.tlc { display: inline-flex; gap: 10px; align-items: center; }
.act-id { display: inline-flex; gap: 10px; align-items: center; }
.drawer > header .logo { margin-right: 4px; }
.cnt { display: inline-block; min-width: 18px; padding: 0 5px; margin-left: 4px; border-radius: 999px; background: rgba(255, 255, 255, .07); color: var(--muted); font: 600 10.5px var(--mono); text-align: center; }

/* Split workstation */
.ws { display: grid; grid-template-columns: minmax(420px, 44%) minmax(0, 1fr); gap: 16px; align-items: start; }
.ws-list { display: flex; flex-direction: column; max-height: calc(100vh - 150px); position: sticky; top: 76px; overflow: hidden; }
.ws-detail { max-height: calc(100vh - 150px); position: sticky; top: 76px; overflow: auto; display: grid; gap: 14px; grid-auto-rows: max-content; padding-right: 2px; }
.rtools { padding: 12px 12px 0; border-bottom: 1px solid var(--line); display: grid; gap: 8px; background: var(--panel); }
.rtools-row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.rtools-row .field:first-child { flex: 1; min-width: 180px; }
.rtools-row.small { font-size: 12px; gap: 6px; }
.rtools-row .spacer { flex: 1; }
.rtools-row label { display: inline-flex; gap: 6px; align-items: center; }
.field.sm { padding: 3px 6px; font-size: 12px; }
.chips { display: flex; gap: 6px; flex-wrap: wrap; }
.chip { border: 1px solid var(--line-2); background: var(--panel-2); color: var(--text-2); border-radius: 999px; padding: 4px 10px; font-size: 12px; font-weight: 600; cursor: pointer; }
.chip:hover { border-color: var(--accent); }
.chip.on { background: var(--accent); border-color: var(--accent); color: #111; }
.chip.on .cnt { background: rgba(0, 0, 0, .18); color: #111; }
.chip.t-hot.on { background: #ff8a3d; border-color: #ff8a3d; }
.chip.t-warm.on { background: var(--up); border-color: var(--up); }
.chip.t-watch.on { background: var(--blue); border-color: var(--blue); }
.chip.t-review.on { background: var(--down); border-color: var(--down); color: #fff; }
.pill-x { border: 0; background: rgba(181, 123, 255, .12); color: var(--accent); border-radius: 6px; padding: 2px 8px; font-size: 11.5px; font-weight: 600; cursor: pointer; }
.rmore { border: 1px dashed var(--line-2); border-radius: 10px; padding: 10px; display: grid; gap: 10px; }
.rmore-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 10px; }
.rmore-grid label { display: grid; gap: 4px; font-size: 11.5px; color: var(--muted); }
.rmore-grid label.check { display: flex; align-items: center; gap: 6px; }
.rhead, .rrow { display: grid; grid-template-columns: 4px 26px minmax(0, 1fr) auto 44px 58px 54px; gap: 10px; align-items: center; }
.rhead { padding: 6px 12px 8px; font: 700 10px var(--font); letter-spacing: .12em; text-transform: uppercase; color: var(--dim); }
.rscroll { overflow: auto; flex: 1; }
.rgroup + .rgroup { border-top: 1px solid var(--line); }
.rghead { display: flex; align-items: baseline; gap: 8px; width: 100%; padding: 10px 12px 6px; background: rgba(255, 255, 255, .015); border: 0; cursor: pointer; text-align: left; position: sticky; top: 0; z-index: 1; backdrop-filter: blur(6px); }
.rghead b { font-size: 12px; letter-spacing: .08em; text-transform: uppercase; }
.rghead .caret { color: var(--dim); width: 10px; }
.rgstat { margin-left: auto; color: var(--dim); font: 11px var(--mono); }
.rrow { width: 100%; padding: 8px 12px; border: 0; border-top: 1px solid rgba(255, 255, 255, .035); background: none; cursor: pointer; text-align: left; min-height: 46px; }
.rrow:hover { background: rgba(181, 123, 255, .05); }
.rrow.sel { background: linear-gradient(90deg, rgba(181, 123, 255, .16), rgba(181, 123, 255, .03)); box-shadow: inset 2px 0 0 var(--accent); }
.rtier { width: 4px; height: 26px; border-radius: 2px; background: var(--line-2); }
.rtier.hot { background: #ff8a3d; box-shadow: 0 0 10px rgba(255, 138, 61, .6); }
.rtier.warm { background: var(--up); }
.rtier.watch { background: var(--blue); }
.rtier.cooling { background: var(--warn); }
.rtier.review { background: var(--down); }
.rid { display: flex; flex-direction: column; min-width: 0; }
.rid .tk { font-size: 13.5px; }
.rnm { color: var(--dim); font-size: 11.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rflags { display: flex; gap: 4px; }
.rf { font: 700 9.5px var(--mono); letter-spacing: .04em; padding: 2px 5px; border-radius: 4px; background: var(--panel-3); color: var(--muted); }
.rf.held { background: rgba(77, 163, 255, .15); color: var(--blue); }
.rf.red { background: var(--down-bg); color: var(--down); }
.rf.ok { background: var(--up-bg); color: var(--up); }
.rf.new { background: var(--accent); color: #111; }
.rnum { font: 600 12.5px var(--mono); text-align: right; font-variant-numeric: tabular-nums; }
.rlist { display: grid; }
.rlist .rrow { grid-template-columns: 4px 26px minmax(0, 1fr) auto 44px 58px 54px; }
.rchg { display: flex; gap: 10px; align-items: center; width: 100%; padding: 9px 16px; border: 0; border-top: 1px solid var(--line); background: none; cursor: pointer; text-align: left; }
.rchg:hover { background: rgba(181, 123, 255, .05); }
.rchg .grow { flex: 1; display: flex; gap: 6px; flex-wrap: wrap; font-size: 13px; }
.pane-head { display: flex; gap: 12px; align-items: center; padding: 4px 2px; }
.pane-head .tt { font: 800 22px/1 var(--mono); }
.pane-head .nm { color: var(--muted); font-size: 13px; margin-top: 3px; }
.pane-head .px { text-align: right; }
.pane-head .px .v { font: 700 18px var(--mono); }
.pane-head .grow { flex: 1; min-width: 0; }
.kbd-hint { font-size: 11.5px; text-align: right; }

@media (max-width: 1100px) {
  .ws { grid-template-columns: 1fr; }
  .ws-list { position: static; max-height: none; }
  .ws-detail { display: none; }
  .rscroll { overflow: visible; }
  .kbd-hint { display: none; }
}
@media (max-width: 600px) {
  .rhead, .rrow, .rlist .rrow { grid-template-columns: 4px 26px minmax(0, 1fr) 40px 52px; }
  .rrow .rflags, .rhead span:nth-child(4), .rrow .rnum:last-child, .rhead span:last-child { display: none; }
}

/* tighter research toolbar */
.rtools .chip { padding: 3px 9px; font-size: 11.5px; }
.rtools .chips { gap: 5px; }
.rtools-row.nowrap { flex-wrap: nowrap; }
.rtools-row.nowrap select { max-width: 150px; }
.rtools-row .muted { white-space: nowrap; }

/* ── v3.218 live stream ─────────────────────────────────────────────────── */
.live { display: inline-flex; align-items: center; gap: 6px; font: 700 10.5px var(--mono); letter-spacing: .12em; color: var(--dim); }
.live i { width: 7px; height: 7px; border-radius: 50%; background: var(--dim); }
.live.on { color: var(--up); }
.live.on i { background: var(--up); animation: pulse 2s infinite; }
.flash-up { animation: flashUp 1.4s ease-out; border-radius: 4px; }
.flash-down { animation: flashDown 1.4s ease-out; border-radius: 4px; }
@keyframes flashUp { from { background: rgba(31, 221, 138, .35); color: #fff; } to { background: transparent; } }
@keyframes flashDown { from { background: rgba(255, 77, 97, .35); color: #fff; } to { background: transparent; } }
@media (max-width: 900px) { .live { display: none; } }

/* ════════════════════════════════════════════════════════════════════════
   v3.219 — design pass: depth, motion, data density
   ════════════════════════════════════════════════════════════════════════ */
/* A faint engineering grid under everything, fading towards the edges. */
body::before { content: ""; position: fixed; inset: 0; pointer-events: none; z-index: 0;
  background-image: linear-gradient(rgba(255, 255, 255, .025) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 255, 255, .025) 1px, transparent 1px);
  background-size: 44px 44px; mask-image: radial-gradient(ellipse at 50% 20%, #000 30%, transparent 80%); }
.shell { position: relative; z-index: 1; }

/* Glass cards with a glowing hairline on top and a gentle lift on hover. */
.card, .kpi, .hero { position: relative; backdrop-filter: blur(6px); }
.card::before, .kpi::before { content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
  background: linear-gradient(180deg, rgba(255, 255, 255, .07), rgba(255, 255, 255, 0) 30%) top / 100% 1px no-repeat; }
.kpi { transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease; }
.kpi:hover { transform: translateY(-2px); border-color: var(--line-2); box-shadow: 0 12px 30px rgba(0, 0, 0, .35); }
.act { transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease; }
.act:hover { transform: translateY(-3px); box-shadow: 0 16px 40px rgba(0, 0, 0, .45), 0 0 0 1px rgba(181, 123, 255, .25); }
.hero::after { content: ""; position: absolute; inset: -1px; border-radius: 17px; pointer-events: none; padding: 1px;
  background: linear-gradient(120deg, rgba(181, 123, 255, .55), rgba(181, 123, 255, 0) 35%, rgba(31, 221, 138, 0) 65%, rgba(31, 221, 138, .35));
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude; }

/* Numbers that glow as they move. */
.glow-up { color: var(--up) !important; text-shadow: 0 0 28px rgba(31, 221, 138, .55); transition: color .6s, text-shadow .6s; }
.glow-down { color: var(--down) !important; text-shadow: 0 0 28px rgba(255, 77, 97, .55); transition: color .6s, text-shadow .6s; }

/* Heat-shaded day moves. */
.heat { display: inline-block; min-width: 62px; text-align: right; padding: 3px 8px; border-radius: 6px; font-weight: 700; }
.heat.flat { color: var(--text-2); }

/* 52-week range bar. */
.rbar { position: relative; display: inline-block; width: 84px; height: 6px; border-radius: 3px; vertical-align: middle;
  background: linear-gradient(90deg, rgba(255, 77, 97, .45), rgba(255, 176, 32, .35) 50%, rgba(31, 221, 138, .45)); }
.rbar i { position: absolute; top: 50%; width: 10px; height: 10px; margin: -5px 0 0 -5px; border-radius: 50%; background: #fff; box-shadow: 0 0 0 2px var(--bg), 0 0 10px rgba(255, 255, 255, .6); }

/* Allocation ring. */
.ring { display: flex; gap: 22px; align-items: center; flex-wrap: wrap; }
.ring circle { transition: stroke-dasharray .6s ease; }
.ring-l { fill: var(--muted); font: 600 9px var(--font); letter-spacing: .12em; text-transform: uppercase; }
.ring-v { fill: #fff; font: 800 15px var(--mono); }
.ring-legend { display: grid; gap: 8px; flex: 1; min-width: 180px; }
.ring-legend div { display: grid; grid-template-columns: 10px 1fr auto; gap: 10px; align-items: center; font-size: 13px; }
.ring-legend i { width: 10px; height: 10px; border-radius: 3px; }

/* Command palette. */
.results { background: rgba(14, 19, 27, .96); backdrop-filter: blur(14px); border-color: var(--line-2); box-shadow: 0 30px 80px rgba(0, 0, 0, .6), 0 0 0 1px rgba(181, 123, 255, .08); }
.results .t.cmd { color: var(--accent); min-width: 22px; }
.results button[aria-selected="true"] { background: rgba(181, 123, 255, .10); box-shadow: inset 2px 0 0 var(--accent); }
.palette-hint { padding: 10px 10px 6px; color: var(--dim); font-size: 11.5px; border-top: 1px solid var(--line); margin-top: 6px; }
.search kbd { font-size: 10.5px; }

/* View transition. */
#view.enter > * { animation: rise .28s cubic-bezier(.2, .7, .2, 1) both; }
#view.enter > *:nth-child(2) { animation-delay: .03s; }
#view.enter > *:nth-child(3) { animation-delay: .06s; }
#view.enter > *:nth-child(4) { animation-delay: .09s; }
@keyframes rise { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
.drawer { animation: slidein .26s cubic-bezier(.2, .7, .2, 1); }
@keyframes slidein { from { transform: translateX(40px); opacity: .4; } to { transform: none; opacity: 1; } }

/* Scrollbars that belong to the theme. */
* { scrollbar-width: thin; scrollbar-color: #26303d transparent; }
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-thumb { background: #1e2733; border-radius: 10px; border: 3px solid transparent; background-clip: content-box; }
::-webkit-scrollbar-thumb:hover { background: #2c3848; background-clip: content-box; border: 3px solid transparent; }

@media (prefers-reduced-motion: reduce) {
  #view.enter > *, .drawer { animation: none; }
  .kpi:hover, .act:hover { transform: none; }
}

/* Mid-width screens: the holdings table drops shares and average cost (both on the company page). */
@media (max-width: 1550px) { .hide-md { display: none; } }

/* ── v3.220 edge layer ──────────────────────────────────────────────────── */
.feed-row { display: flex; gap: 12px; align-items: flex-start; width: 100%; padding: 10px 16px; border: 0; border-top: 1px solid var(--line); background: none; cursor: pointer; text-align: left; }
.feed-row:hover { background: rgba(181, 123, 255, .05); }
.feed-row .grow { flex: 1; min-width: 0; display: grid; gap: 2px; }
.feed-row .t1 { font-size: 13.5px; }
.feed-row .t2 { color: var(--muted); font-size: 12.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.feed-row .meta { color: var(--dim); font-size: 12px; white-space: nowrap; }
.fdot { width: 8px; height: 8px; border-radius: 50%; margin-top: 9px; flex: none; background: var(--dim); }
.fdot.up { background: var(--up); box-shadow: 0 0 8px rgba(31, 221, 138, .6); }
.fdot.down { background: var(--down); box-shadow: 0 0 8px rgba(255, 77, 97, .6); }
.fdot.warn { background: var(--warn); }
.fdot.info { background: var(--blue); }
.fk { font: 700 9.5px var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--dim); border: 1px solid var(--line-2); border-radius: 4px; padding: 1px 5px; margin: 0 4px; }
.div-h { padding: 10px 16px 6px; font-size: 11.5px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
.div-h.up { color: var(--up); }
.div-h.down { color: var(--down); }
.rf.smart { background: rgba(181, 123, 255, .14); color: var(--accent); }

/* ── v3.221 opportunity map ─────────────────────────────────────────────── */
.map-pt { cursor: pointer; }
.map-pt:hover circle, .map-pt:hover path { stroke: #fff; stroke-width: 2; }
.map-lbl { fill: #e8edf4; font: 700 10.5px var(--mono); paint-order: stroke; stroke: var(--bg); stroke-width: 3px; }
.chart .ax-t { fill: var(--muted); font: 600 10.5px var(--font); letter-spacing: .08em; text-transform: uppercase; }
.chart .quad { stroke: rgba(181, 123, 255, .25); stroke-dasharray: 4 5; }
.chart .quad-t { fill: rgba(181, 123, 255, .55); font: 700 10px var(--font); letter-spacing: .1em; text-transform: uppercase; }

/* ── v3.225 evidence ────────────────────────────────────────────────────── */
.rnum.ev { font-weight: 700; }
.rnum.ev0, .rnum.evx { color: var(--dim); }
.rnum.ev1, .rnum.ev2 { color: var(--text-2); }
.rnum.ev3 { color: #9ee6c2; }
.rnum.ev4, .rnum.ev5 { color: var(--up); }
.act-ev { display: flex; flex-wrap: wrap; gap: 4px; }

/* ── v3.225 stress test ─────────────────────────────────────────────────── */
.kpis.tight { grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); }
.replay { margin-top: 12px; padding: 10px 12px; border-radius: 8px; background: var(--panel-2); font-size: 13px; line-height: 1.7; }

/* ── v3.225 Today brief ─────────────────────────────────────────────────── */
.brief { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr) minmax(0, .9fr); gap: 16px; align-items: start; }
.brow { display: flex; gap: 10px; align-items: flex-start; width: 100%; padding: 9px 16px; border: 0; border-top: 1px solid var(--line); background: none; cursor: pointer; text-align: left; font-size: 13.5px; line-height: 1.45; }
.brow:first-child { border-top: 0; }
.brow:hover { background: rgba(181, 123, 255, .05); }
.brow .fdot { margin-top: 6px; }
.brow .tk { flex: none; min-width: 48px; }
.btxt { flex: 1; min-width: 0; color: var(--text-2); overflow-wrap: anywhere; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
@media (max-width: 1200px) { .brief { grid-template-columns: 1fr 1fr; } .brief > :last-child { grid-column: 1 / -1; } }
@media (max-width: 900px) { .brief { grid-template-columns: 1fr; } }

/* ════════════════════════════════════════════════════════════════════════
   v3.225 — readability pass
   One typeface (Inter) for words AND numbers, with tabular figures so columns
   still line up. JetBrains Mono is wide: in tight columns it forced numbers to
   crowd and cut off. Mono stays only where a terminal feel costs nothing — the
   ticker tape and keyboard hints. Labels get bigger and calmer (less
   letter-spacing), and the two greys get enough contrast to read at 12px.
   ════════════════════════════════════════════════════════════════════════ */
:root {
  --muted: #9aa6b5;
  --dim: #7a8698;
  --num: "Inter", ui-sans-serif, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
}
html, body { font-optical-sizing: auto; font-feature-settings: "cv11", "ss01", "ss03"; }
.num, td.n, th.n, .rnum, .kpi .v, .hero .big, .hstat .v, .pill, .act-px, .heat, td .cell-pill,
.drawer > header .px .v, .pane-head .px .v, .ring-v, .rgstat, .cnt, .chart .axis text, .chart .lvl-t, .replay .num {
  font-family: var(--num); font-variant-numeric: tabular-nums lining-nums; font-feature-settings: "tnum", "lnum", "cv11";
}
/* Tickers: bold sans with a hair of tracking — clearly a symbol, not a wide mono block. */
.tk, .results .t, .act-top .tk, .rid .tk, .drawer > header .tt, .pane-head .tt { font-family: var(--font); font-weight: 700; letter-spacing: .015em; }
.drawer > header .tt, .pane-head .tt { font-size: 24px; letter-spacing: 0; }

/* Labels: readable size, gentle tracking. */
.kpi .l, .hstat .l, .hero .l { font-size: 12px; letter-spacing: .05em; font-weight: 600; }
.card > header h2 { font-size: 12.5px; letter-spacing: .07em; }
.card > header .sub { font-size: 12.5px; color: var(--dim); }
th { font-size: 11.5px; letter-spacing: .04em; color: var(--muted); font-weight: 600; }
.rhead { font-size: 11px; letter-spacing: .05em; }
.top h1 { letter-spacing: .08em; }
.brand span { letter-spacing: .08em; }
.rnm { font-size: 12px; }
.rf, .fk { font-family: var(--font); font-size: 10.5px; letter-spacing: .03em; }
.seg button { font-family: var(--font); font-size: 12px; }
.mkt, .live { font-family: var(--font); font-size: 11.5px; letter-spacing: .06em; }
.chart .axis text, .chart .lvl-t { font-size: 11.5px; }
.map-lbl { font-family: var(--font); font-size: 11px; }
.section-t { font-size: 12px; letter-spacing: .06em; }
.legend, .kpi .s, .hstat .s { font-size: 12.5px; }

/* Headline numbers shrink with the space instead of being cut off. */
.hero .big { font-size: clamp(34px, 2.6vw + 14px, 52px); font-weight: 800; letter-spacing: -.025em; }
.hero-stats { grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); }
.hstat .v { font-size: clamp(17px, .9vw + 9px, 22px); }
.kpi .v { font-size: clamp(18px, 1vw + 9px, 24px); }
.kpi .s { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }

/* Tight tables: a little less padding, and long text cells truncate cleanly. */
td { padding: 8px 11px; }
th { padding: 8px 11px; }
td .tk-sub { max-width: 220px; }
.act-nm, .rnm, .feed-row .t2 { text-overflow: ellipsis; }

@media (max-width: 1400px) {
  .content { padding: 18px 18px 60px; gap: 14px; }
  .card > header { padding: 12px 14px 8px; }
  .card .body { padding: 0 14px 14px; }
  td, th { padding: 7px 9px; }
}

/* ── v3.225 news ────────────────────────────────────────────────────────── */
.nrow { display: flex; gap: 12px; align-items: flex-start; padding: 10px 16px; border-top: 1px solid var(--line); }
.nrow:first-child { border-top: 0; }
.nrow .grow { flex: 1; min-width: 0; display: grid; gap: 3px; }
.nrow .t1 { font-size: 14px; line-height: 1.45; }
.nrow .t1 a { color: var(--text); }
.nrow .t1 a:hover { color: var(--accent); text-decoration: none; }
.nrow .t2 { color: var(--muted); font-size: 12.5px; }
.nrow .meta { color: var(--dim); font-size: 12.5px; white-space: nowrap; }
.nt { display: inline-flex; gap: 8px; align-items: center; min-width: 92px; border: 0; background: none; cursor: pointer; padding: 0; text-align: left; }
.nt:hover .tk { color: var(--accent); }
.nt-w { font-size: 18px; justify-content: center; }
@media (max-width: 600px) { .nt { min-width: 0; } .nt .tk { display: none; } }

/* v3.226: .card's position:relative (v3.219) overrode the list's sticky, so its top:76px
   became a plain 76px shift down and the list stopped sticking while scrolling. */
.ws-list.card { position: sticky; }
@media (max-width: 1100px) { .ws-list.card { position: static; } }

/* ── v3.227 earnings calendar ───────────────────────────────────────────── */
.erow { display: grid; grid-template-columns: 200px minmax(0, 1fr) 130px 100px 90px; gap: 12px; align-items: center; width: 100%; padding: 9px 16px; border: 0; border-top: 1px solid var(--line); background: none; cursor: pointer; text-align: left; }
.erow:hover { background: rgba(181, 123, 255, .05); }
.edate { display: grid; gap: 1px; font-size: 13.5px; }
.edate .dim { font-size: 12px; }
.etime, .estat { white-space: nowrap; }
.nextrep { display: flex; gap: 8px; align-items: center; padding: 10px 14px; border: 1px solid var(--line-2); border-radius: 10px; background: var(--panel-2); font-size: 13.5px; }
.nextrep .fdot { margin-top: 0; }
@media (max-width: 900px) {
  .erow { grid-template-columns: minmax(0, 1fr) auto auto; row-gap: 6px; column-gap: 8px; }
  .erow .edate { grid-column: 1 / -1; display: flex; gap: 8px; align-items: baseline; }
  .erow .rnum { display: none; }
}

/* ── v3.228 extended hours ──────────────────────────────────────────────── */
.ext { display: block; margin-top: 3px; font-size: 11.5px; font-weight: 700; font-family: var(--num); font-variant-numeric: tabular-nums; }
.hero-ext { margin-top: 8px; display: flex; flex-wrap: wrap; gap: 8px; align-items: baseline; font-size: 13px; }

/* ── v3.230 fit: use wide screens, and tiles in a row share one height ───── */
/* The content stopped at 1560px, leaving a blank band on wide monitors. */
.content { max-width: 2400px; }
/* Brief tiles: one height per row; a long list scrolls inside its tile instead of stretching it. */
.brief { align-items: stretch; }
.brief > .card { display: flex; flex-direction: column; min-height: 0; }
.brief > .card > .list, .brief > .card > .body { flex: 1; }
.brief > .card > .list { max-height: 340px; overflow: auto; }
/* Chart row: the right-hand column's cards fill the chart's height together. */
.g-main > .grid { align-content: stretch !important; grid-auto-rows: auto; }
.g-main > .grid > .card:last-child { display: flex; flex-direction: column; }
.g-main > .grid > .card:last-child > .list, .g-main > .grid > .card:last-child > .body { flex: 1; }
@media (min-width: 1900px) {
  .g-main { grid-template-columns: minmax(0, 2.2fr) minmax(340px, 1fr); }
  .kpis { grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); }
}

/* ── v3.231 brand: the owner's logo, violet accent ─────────────────────── */
.brand .logo-mark { width: 40px; height: 40px; border-radius: 50%; flex: none; display: block; filter: drop-shadow(0 0 10px rgba(168, 85, 247, .55)); }
.brand b { font-size: 15px; }
.nav button[aria-current="page"] { color: #fff; }
.chip.on, .seg button[aria-pressed="true"] { color: #140a24; }
.hero::after { background: linear-gradient(120deg, rgba(181, 123, 255, .6), rgba(181, 123, 255, 0) 35%, rgba(31, 221, 138, 0) 65%, rgba(31, 221, 138, .35)); }
body { background: radial-gradient(1200px 600px at 70% -200px, rgba(124, 58, 237, .10), transparent 60%), radial-gradient(900px 500px at -10% 110%, rgba(31, 221, 138, .04), transparent 60%), var(--bg); background-attachment: fixed; }
@media (max-width: 900px) { .brand .logo-mark { width: 32px; height: 32px; } }
/* Exact report dates ("29 Sept ☀") need a little more room than a month label. */
.rhead, .rrow, .rlist .rrow { grid-template-columns: 4px 26px minmax(0, 1fr) auto 44px 50px 72px; }
.rrow .rnum:last-child { white-space: nowrap; }
@media (max-width: 600px) { .rhead, .rrow, .rlist .rrow { grid-template-columns: 4px 26px minmax(0, 1fr) 40px 52px; } }

/* ── v3.232 one accent: "Act now" is the accent, not a separate orange ───── */
.badge.hot { background: rgba(181, 123, 255, .16); color: var(--accent); }
.act:hover { border-color: var(--accent); }
.chip.t-hot.on { background: var(--accent); border-color: var(--accent); }
.rtier.hot { background: var(--accent); box-shadow: 0 0 10px rgba(181, 123, 255, .6); }
.acc-t { color: var(--accent); }
/* "NEW since your last visit" is a hint, not an alarm: outlined, not a solid block. */
.rf.new { background: transparent; color: var(--accent); box-shadow: inset 0 0 0 1px rgba(181, 123, 255, .55); }
/* v3.233: every ticker on the tape is white (held names had taken the accent colour). */
.tape-item .t, .tape-item.held .t { color: #fff; }

/* ── v3.234 what's new ──────────────────────────────────────────────────── */
.wn { border: 1px solid rgba(181, 123, 255, .6); background: rgba(181, 123, 255, .14); color: #e9dcff; border-radius: 999px; padding: 5px 12px; font: 700 12px var(--font); letter-spacing: .03em; cursor: pointer; white-space: nowrap; animation: wnPulse 2.4s ease-in-out infinite; }
.wn:hover { background: rgba(181, 123, 255, .24); }
@keyframes wnPulse { 50% { box-shadow: 0 0 0 5px rgba(181, 123, 255, 0), 0 0 18px rgba(181, 123, 255, .45); } }
.wn-foot { padding: 0; text-align: left; font-size: 12px; color: var(--muted); }
.wn-foot:hover { color: var(--accent); }
.wn-panel { position: fixed; z-index: 60; top: 8vh; left: 50%; transform: translateX(-50%); width: min(640px, calc(100vw - 32px)); max-height: 84vh; display: flex; flex-direction: column; background: var(--panel); border: 1px solid var(--line-2); border-radius: 14px; box-shadow: 0 30px 80px rgba(0, 0, 0, .6); }
.wn-panel > header { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; padding: 18px 20px 10px; }
.wn-panel h2 { margin: 2px 0 0; font-size: 20px; }
.wn-kicker { font-size: 12px; color: var(--accent); font-weight: 600; letter-spacing: .04em; }
.wn-body { overflow: auto; padding: 4px 20px 8px; display: grid; gap: 14px; }
.wn-entry { border-top: 1px solid var(--line); padding-top: 12px; }
.wn-entry:first-child { border-top: 0; padding-top: 0; }
.wn-entry h3 { margin: 6px 0 6px; font-size: 15px; }
.wn-entry ul { margin: 0; padding-left: 18px; display: grid; gap: 5px; color: var(--text-2); font-size: 13.5px; line-height: 1.5; }
.wn-panel > footer { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 12px 20px 16px; border-top: 1px solid var(--line); font-size: 12px; }
.wn-ok { border-color: var(--accent); }
@media (max-width: 900px) { .wn { padding: 4px 9px; font-size: 11px; } }
@media (prefers-reduced-motion: reduce) { .wn { animation: none; } }

/* ── v3.236 company price + chart labels ────────────────────────────────── */
.pxext { font-size: 13px; font-weight: 600; margin-top: 3px; }
.chart .lvl-t { paint-order: stroke; stroke: var(--panel); stroke-width: 4px; stroke-linejoin: round; }

/* ════════════════════════════════════════════════════════════════════════
   v3.237 — neutral UI, logo violet as a small accent only
   Colour is kept for meaning: green/red = money up/down, amber = warning.
   Violet marks only "where you are / what's selected": the logo, the active
   page and tab, the selected row's edge, focus rings, the NEW pill, Act now.
   Everything else that was violet (titles, links, buttons, chart line,
   glows) is neutral ink.
   ════════════════════════════════════════════════════════════════════════ */
:root { --ink: #e9edf3; --ink-bg: rgba(255, 255, 255, .06); --hover: rgba(255, 255, 255, .035); }
body { background: radial-gradient(1200px 600px at 70% -200px, rgba(255, 255, 255, .025), transparent 60%), var(--bg); background-attachment: fixed; }

/* Text: titles, links, sort arrows */
a, .linkbtn { color: var(--text-2); }
a:hover, .linkbtn:hover { color: var(--ink); text-decoration: underline; text-underline-offset: 3px; }
.card > header h2 { color: var(--text-2); }
th .arr { color: var(--ink); }
.acc-t { color: var(--ink); font-weight: 700; }

/* Controls: selected chips and segments are ink, not violet */
.chip.on, .seg button[aria-pressed="true"] { background: var(--ink); border-color: var(--ink); color: #0b0e13; }
.chip.on .cnt { background: rgba(0, 0, 0, .12); color: #0b0e13; }
.chip:hover, .btn:hover { border-color: #5b6677; }
.pill-x { background: var(--ink-bg); color: var(--text-2); }
.search input:focus { border-color: #5b6677; box-shadow: 0 0 0 3px rgba(255, 255, 255, .06); }

/* Navigation: neutral fill, violet marker */
.nav button[aria-current="page"] { background: var(--ink-bg); box-shadow: inset 3px 0 0 var(--accent); color: #fff; }
@media (max-width: 900px) { .nav button[aria-current="page"] { box-shadow: inset 0 2px 0 var(--accent); } }

/* Hover and selection */
tbody tr.click:hover td, .rrow:hover, .rchg:hover, .feed-row:hover, .brow:hover, .erow:hover { background: var(--hover); }
.rrow.sel { background: var(--ink-bg); box-shadow: inset 2px 0 0 var(--accent); }
.results button[aria-selected="true"] { background: var(--ink-bg); box-shadow: inset 2px 0 0 var(--accent); }
.results .t.cmd { color: var(--text-2); }

/* Cards: no violet glow */
.hero { background: radial-gradient(600px 220px at 0% 0%, rgba(255, 255, 255, .04), transparent 70%), linear-gradient(135deg, #0f141c, #0a0d12 70%); }
.hero::after { background: linear-gradient(120deg, rgba(255, 255, 255, .22), rgba(255, 255, 255, 0) 35%, rgba(31, 221, 138, 0) 65%, rgba(31, 221, 138, .22)); }
.act { background: var(--panel-2); }
.act:hover { border-color: #5b6677; box-shadow: 0 16px 40px rgba(0, 0, 0, .45); }
.rf.smart { background: var(--ink-bg); color: var(--text-2); }
@keyframes tick { from { background: rgba(255, 255, 255, .12); } to { background: transparent; } }

/* Charts: the portfolio line is ink; averages and quadrant guides are quiet */
.chart .nav-l { stroke: var(--ink); filter: none; }
.legend i { background: var(--ink); }
.bar > i { background: linear-gradient(90deg, #6b7686, var(--ink)); }
.chart .avg-l { stroke: #8a95a6; }
.legend i.avg { background: repeating-linear-gradient(90deg, #8a95a6 0 4px, transparent 4px 8px); }
.chart .quad { stroke: rgba(255, 255, 255, .14); }
.chart .quad-t { fill: rgba(255, 255, 255, .38); }

/* ── v3.238 1D intraday chart ───────────────────────────────────────────── */
.chart .ext-sh { fill: rgba(255, 255, 255, .035); }
.chart .prev-l { stroke: #8a95a6; stroke-width: 1; stroke-dasharray: 3 4; }
.card > header .sub .live { display: inline-flex; vertical-align: middle; margin-left: 4px; }
.legend i.prev { background: repeating-linear-gradient(90deg, #8a95a6 0 3px, transparent 3px 7px); }
.legend i.shade { background: rgba(255, 255, 255, .12); height: 9px; }

/* ── v3.240 Today order + Claude's letter band ──────────────────────────── */
.letter { position: relative; padding: 22px 26px 20px; border: 1px solid var(--line-2); border-radius: 14px;
  background: linear-gradient(135deg, rgba(181, 123, 255, .08), rgba(255, 255, 255, .015) 45%), var(--panel);
  box-shadow: inset 3px 0 0 var(--accent); }
.letter-from { display: flex; gap: 12px; align-items: center; margin-bottom: 12px; }
.letter-from img { width: 40px; height: 40px; border-radius: 50%; }
.letter-from b { display: block; font-size: 15px; }
.letter-from span { display: block; color: var(--muted); font-size: 12.5px; }
.letter-body p { margin: 0 0 10px; font-size: 16.5px; line-height: 1.65; color: var(--text); max-width: 110ch; }
.letter-body p:last-child { margin-bottom: 0; }
.letter-more { margin-top: 8px; font-weight: 600; }
.card.fill { display: flex; flex-direction: column; min-height: 0; }
.card.fill > .scroll-y { flex: 1; max-height: 420px; overflow: auto; }
@media (max-width: 900px) { .letter { padding: 16px; } .letter-body p { font-size: 15px; } }
/* A list that fills a tall card keeps its rows at their natural height, stacked from the top. */
.list { align-content: start; }

.rhead, .rrow, .rlist .rrow { grid-template-columns: 4px 26px minmax(0, 1fr) auto 44px 66px 72px; }
@media (max-width: 600px) { .rhead, .rrow, .rlist .rrow { grid-template-columns: 4px 26px minmax(0, 1fr) 40px 60px; } }

/* ── v3.243 price plan: to-scale bar, compact list, swing setup apart ───── */
.pp-bar { position: relative; height: 46px; margin: 6px 22px 4px; }
.pp-track { position: absolute; left: 0; right: 0; top: 30px; height: 4px; border-radius: 4px; background: var(--line-2); }
.pp-zone { position: absolute; top: 30px; height: 4px; opacity: .45; }
.pp-zone.up { background: var(--up); border-radius: 0 4px 4px 0; } .pp-zone.down { background: var(--down); border-radius: 4px 0 0 4px; }
.pp-mk { position: absolute; top: 27px; width: 10px; height: 10px; margin-left: -5px; border-radius: 50%; background: var(--line-2); box-shadow: 0 0 0 2px var(--panel); }
.pp-now { position: absolute; top: 24px; width: 3px; height: 16px; margin-left: -1.5px; background: #fff; border-radius: 2px; }
.pp-now span { position: absolute; bottom: 20px; left: 50%; transform: translateX(-50%); white-space: nowrap; font-size: 12px; font-weight: 700; color: #fff; }
.pp-now.end span { left: auto; right: -2px; transform: none; } .pp-now.start span { left: -2px; transform: none; }
.pp-list { padding: 2px 12px 10px; }
.pp-row { position: relative; display: grid; grid-template-columns: 14px minmax(0, 1fr) auto 84px; gap: 10px; align-items: baseline; padding: 6px 8px; border-radius: 8px; font-size: 13.5px; }
.pp-row .lad-dot { position: static; align-self: center; width: 9px; height: 9px; border-radius: 50%; background: var(--line-2); }
.pp-l { color: var(--text-2); min-width: 0; }
.pp-l .lad-src { display: inline; margin-left: 8px; }
.pp-v { font-weight: 600; text-align: right; }
.pp-a { text-align: right; font-size: 12.5px; }
.lad-now { background: var(--ink-bg); }
.lad-now .pp-l, .lad-now .pp-v { color: #fff; font-weight: 700; }
.lad-now .lad-dot, .pp-row.lad-now .lad-dot { background: #fff; }
.lad-target .lad-dot, .pp-mk.lad-target { background: var(--up); }
.lad-stop .lad-dot, .pp-mk.lad-stop { background: var(--down); } .lad-stop .pp-v { color: var(--down); }
.lad-entry .lad-dot, .pp-mk.lad-entry { background: #8fb8ff; }
.lad-avg .lad-dot, .pp-mk.lad-avg { background: #8a95a6; }
.lad-add .lad-dot, .pp-mk.lad-add { background: #8fb8ff; } .lad-add .pp-v { color: #b8d2ff; }
.lad-rr { margin: 0 16px 14px; padding: 10px 12px; border-radius: 8px; background: var(--panel-2); font-size: 13.5px; }
.lad-src { display: block; font-size: 11.5px; color: var(--dim); margin-top: 1px; }
.pp-swing { margin: 0 16px 14px; padding: 10px 12px; border: 1px dashed var(--line-2); border-radius: 8px; font-size: 13.5px; }
.pp-swing-h { font-weight: 600; color: var(--text-2); }
.pp-swing-v { display: flex; flex-wrap: wrap; gap: 6px 18px; margin-top: 6px; color: var(--text-2); }
@media (max-width: 600px) {
  .pp-row { grid-template-columns: 12px minmax(0, 1fr) auto; }
  .pp-a { grid-column: 3; }
  .pp-l .lad-src { display: block; margin-left: 0; }
  .pp-bar { margin: 6px 40px 4px; }
}

/* ── v3.244 research list: score · growth · now · target (×) · catalyst (what) ──
   Columns follow the LIST's width (container queries), not the screen's: the
   list is narrow beside the detail pane even on a wide monitor. */
.ws-list, .rlist { container-type: inline-size; }
.rhead, .rrow, .rlist .rrow { grid-template-columns: 4px 26px minmax(0, 1fr) auto 52px 74px 90px 96px 116px; column-gap: 16px; }
.rrow .rnum:last-child { display: flex; } .rhead span:last-child { display: block; }
.rrow .rflags, .rhead .rflags, .rc-g, .rc-n { display: initial; }
.rrow .rflags { display: flex; }
.rc2 { display: flex; flex-direction: column; align-items: flex-end; line-height: 1.25; min-width: 0; }
.rc2 small { font: 500 11px var(--font); color: var(--dim); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
.rc2 small.up { color: var(--up); } .rc2 small.down { color: var(--down); }
.rc2 b.up { font-weight: 600; }
@container (max-width: 760px) {
  .rhead, .rrow, .rlist .rrow { grid-template-columns: 4px 26px minmax(0, 1fr) 50px 70px 86px 90px 104px; column-gap: 12px; }
  .rrow .rflags, .rhead .rflags { display: none; }
}
@container (max-width: 640px) {
  .rhead, .rrow, .rlist .rrow { grid-template-columns: 4px 26px minmax(0, 1fr) 48px 84px 88px 96px; column-gap: 12px; }
  .rc-g { display: none; }
}
@container (max-width: 520px) {
  .rhead, .rrow, .rlist .rrow { grid-template-columns: 4px 26px minmax(0, 1fr) 50px 84px 80px; gap: 8px; }
  .rc-n { display: none; }
}
/* The tools block is a one-column grid; without this its column sizes to the widest chip row and stretches the header past the rows. */
.rtools { grid-template-columns: minmax(0, 1fr); }
.rtools .rhead { margin: 0 -12px; }   /* line up with the rows: .rtools has 12px side padding */

/* ── v3.245 research-this-company card ─────────────────────────────────── */
.rq .rq-row { display: flex; gap: 14px; align-items: center; justify-content: space-between; flex-wrap: wrap; }
.rq .rq-row > div { flex: 1 1 260px; }
.rq .muted { margin-top: 4px; font-size: 13px; }
.rq .rq-h { display: flex; gap: 8px; align-items: center; margin-bottom: 4px; }

/* ── v3.246 swing read card ────────────────────────────────────────────── */
.sw .sw-top { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; margin-bottom: 8px; }
.sw .pp-swing-v { margin: 4px 0 8px; }
.sw .sw-l { font-size: 13px; margin-top: 6px; line-height: 1.45; }
.badge.up { color: var(--up); border-color: color-mix(in srgb, var(--up) 45%, transparent); }

/* ── v3.248 holdings: cards on phones, compact tiles ───────────────────── */
.hcards { display: none; }
@media (max-width: 600px) {
  .hold-t { display: none; }
  .hcards { display: grid; gap: 1px; background: var(--line); }
  .hcard { display: grid; gap: 8px; width: 100%; padding: 12px 14px; border: 0; background: var(--panel); text-align: left; cursor: pointer; color: inherit; font: inherit; }
  .hcard:active { background: var(--hover); }
  .hc-top { display: flex; align-items: center; justify-content: space-between; gap: 10px; min-width: 0; }
  .hc-px { display: flex; align-items: center; gap: 8px; flex-shrink: 0; }
  .hc-row { display: grid; grid-template-columns: 1.4fr 0.8fr 0.9fr; gap: 8px; font-size: 13px; }
  .hc-row i { display: block; font-style: normal; font-size: 10.5px; letter-spacing: .06em; text-transform: uppercase; color: var(--dim); }
  .hc-row small { font-size: 11.5px; }
  .kpis { gap: 8px; }
  .kpis .kpi { padding: 10px 12px; }
  .kpis .kpi .v { font-size: 18px; }
  .kpis .kpi .l { font-size: 10px; letter-spacing: .08em; }
  .kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .kpis .kpi .s { font-size: 11.5px; }
}

/* ── v3.248 early-days states ──────────────────────────────────────────── */
.early-note { padding: 12px 14px; border-radius: 8px; background: var(--panel-2); color: var(--text-2); font-size: 13.5px; line-height: 1.5; }
.kpi .v.early { color: var(--muted); }

/* ── v3.248 who made the money · month by month ────────────────────────── */
.cb-list { padding: 4px 8px 6px; }
.cb-row { display: grid; grid-template-columns: 92px minmax(0, 1fr) 92px; gap: 10px; align-items: center; width: 100%; padding: 6px 8px; border: 0; border-radius: 6px; background: none; color: inherit; font: inherit; font-size: 13px; text-align: left; cursor: pointer; }
.cb-row:hover { background: var(--hover); }
.cb-row .num { text-align: right; font-weight: 600; }
.cb-sold { font-size: 11px; font-weight: 500; }
.cb-bar { position: relative; height: 10px; }
.cb-bar::before { content: ""; position: absolute; left: 50%; top: -3px; bottom: -3px; width: 1px; background: var(--line-2); }
.cb-bar i { position: absolute; top: 0; bottom: 0; border-radius: 3px; }
.cb-bar i.up { background: var(--up); } .cb-bar i.down { background: var(--down); }
.cb-foot { display: flex; flex-direction: column; gap: 4px; padding: 10px 16px 14px; font-size: 12.5px; border-top: 1px solid var(--line); }
table.months { width: 100%; border-collapse: separate; border-spacing: 3px; }
table.months th { font: 600 10.5px var(--font); color: var(--dim); text-align: center; padding: 6px 0 2px; letter-spacing: .04em; }
table.months th.my { text-align: left; padding-left: 10px; color: var(--muted); font-size: 12px; }
.mc { text-align: center; padding: 6px 2px; border-radius: 6px; min-width: 44px; }
.mc b { display: block; font: 600 12px var(--mono); }
.mc small { display: block; font: 500 10.5px var(--mono); color: var(--dim); margin-top: 2px; }
.mc.up { background: color-mix(in srgb, var(--up) calc(var(--h) * 100%), transparent); }
.mc.down { background: color-mix(in srgb, var(--down) calc(var(--h) * 100%), transparent); }
.mc.up b, .mc.down b { color: #fff; }
.mc.partial { opacity: .6; }
.mc.empty { background: var(--panel-2); opacity: .35; }
.mc.tot { background: var(--panel-2); }

/* ── v3.248 morning letter in sections ─────────────────────────────────── */
.letter .ls-sum { font-size: 17px; font-weight: 600; line-height: 1.45; }
.ls-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 12px 22px; margin-top: 14px; }
.ls h4 { margin: 0 0 6px; font: 700 11px var(--font); letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }
.ls ul { margin: 0; padding-left: 18px; display: grid; gap: 6px; }
.ls li, .ls p { font-size: 14px; line-height: 1.5; color: var(--text-2); margin: 0; }
.ls-h { display: grid; gap: 4px; }
.ls-row { display: grid; grid-template-columns: 58px 1fr; gap: 8px; align-items: baseline; padding: 5px 6px; margin: 0 -6px; border: 0; border-radius: 6px; background: none; color: var(--text-2); font: inherit; font-size: 14px; line-height: 1.45; text-align: left; cursor: pointer; }
.ls-row:hover { background: var(--hover); }
.ls-full { margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--line); }

.ls-wide { grid-column: 1 / -1; }
.ls-lv { display: flex; flex-wrap: wrap; gap: 4px 14px; margin-top: 2px; font-size: 12.5px; color: var(--muted); }
.ls-note { display: block; color: var(--muted); font-size: 13px; }

/* ── v3.248 phone menu: four tabs + More, same names as desktop ────────── */
.nav-more, .more-sheet { display: none; }
@media (max-width: 900px) {
  .nav .nav-x { display: none; }
  .nav .nav-more { display: flex; }
  .more-sheet:not(.hide) { display: grid; position: fixed; right: 10px; bottom: calc(64px + env(safe-area-inset-bottom)); min-width: 200px; padding: 6px; background: var(--panel); border: 1px solid var(--line-2); border-radius: 12px; box-shadow: 0 12px 32px rgba(0, 0, 0, .5); z-index: 40; }
  .more-sheet button { flex-direction: row !important; justify-content: flex-start !important; gap: 12px !important; padding: 12px 14px !important; font-size: 14px !important; border-radius: 8px !important; box-shadow: none !important; }
  .more-sheet button[aria-current="page"] { background: var(--ink-bg); }
  .more-sheet .badge { display: inline-flex !important; margin-left: auto; }
}

/* Captions explain things in plain words now (v3.248) — let them wrap rather than cut off. */
.kpi .s { display: block; -webkit-line-clamp: unset; overflow: visible; }
.nav .nav-more { display: none; }
@media (max-width: 900px) { .nav .nav-more { display: flex; } }
@media (max-width: 600px) { .kpis .kpi:last-child:nth-child(odd) { grid-column: 1 / -1; } }

/* ── v3.249 the letter, live ───────────────────────────────────────────── */
.ls-live { margin-left: 6px; padding: 1px 6px; border-radius: 99px; font-size: 9.5px; letter-spacing: .08em; color: var(--up); border: 1px solid color-mix(in srgb, var(--up) 40%, transparent); }
.ls-now { display: inline-block; margin-right: 10px; font-weight: 600; color: var(--text); }
.ls-st { display: inline-block; font-size: 12.5px; font-weight: 600; }
.ls-st.ok { color: var(--up); } .ls-st.down { color: var(--down); } .ls-st.acc { color: #b8d2ff; }
.ls-note2 { display: block; margin-top: 2px; color: var(--text-2); }
.ls-today { display: flex; flex-wrap: wrap; gap: 6px 18px; align-items: center; margin-top: 8px; font-size: 13.5px; color: var(--muted); }
.ls-since { margin-top: 14px; padding: 12px 14px; border-radius: 10px; background: var(--panel-2); }
.ls-since h4 { margin: 0 0 8px; font: 700 11px var(--font); letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }
.ls-since h4 .dim { letter-spacing: 0; text-transform: none; font-weight: 500; }
.ls-up { display: grid; grid-template-columns: 48px 1fr; gap: 10px; padding: 6px 0; border-top: 1px solid var(--line); font-size: 13.5px; line-height: 1.5; }
.ls-up:first-of-type { border-top: 0; }
.ls-up ul { margin: 0; padding-left: 16px; display: grid; gap: 4px; }
.ls-t { color: var(--muted); font-size: 12.5px; padding-top: 1px; }
.ls-q { font-size: 13px; }

.ls-livetag { display: inline-flex; align-items: center; gap: 6px; font: 700 11px var(--font); letter-spacing: .08em; color: var(--up); }
.ls-livetag i { width: 7px; height: 7px; border-radius: 50%; background: var(--up); box-shadow: 0 0 8px var(--up); }
.ls-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (max-width: 700px) { .ls-grid { grid-template-columns: 1fr; } }

/* ── v3.250 folded routine reviews · grouped decisions ─────────────────── */
.feed-row.fold { background: var(--panel-2); cursor: default; }
.fold-n { min-width: 26px; text-align: center; font-weight: 700; color: var(--muted); }
.brs { margin: 0; padding-left: 16px; display: grid; gap: 3px; }

/* ── v3.250 ⓘ explainers ───────────────────────────────────────────────── */
.gl { position: relative; display: inline-block; margin-left: 5px; font-size: 11px; font-weight: 500; letter-spacing: 0; text-transform: none; color: var(--dim); cursor: help; outline: none; }
.gl:hover, .gl:focus { color: var(--text); }
.gl::after { content: attr(data-tip); position: absolute; left: 50%; top: calc(100% + 6px); transform: translateX(-50%); width: max-content; max-width: min(280px, 80vw); padding: 9px 11px; border-radius: 8px; background: #1b2130; border: 1px solid var(--line-2); box-shadow: 0 10px 28px rgba(0,0,0,.5); color: var(--text); font: 400 12.5px/1.45 var(--font); white-space: normal; text-align: left; opacity: 0; pointer-events: none; transition: opacity .12s; z-index: 50; }
.gl:hover::after, .gl:focus::after { opacity: 1; }
.kpi, .hstat { overflow: visible; }

/* ── v3.250 trades on the portfolio chart ──────────────────────────────── */
.tm.buy { fill: var(--up); } .tm.sell { fill: var(--down); }
.tm { stroke: var(--panel); stroke-width: 1.2; }
.tip-tx { margin-top: 4px; max-width: 280px; white-space: normal; font-size: 12px; line-height: 1.4; }

/* ── v3.250 why it matters ─────────────────────────────────────────────── */
.why { margin-top: 5px; padding: 6px 10px; border-radius: 6px; font-size: 13px; line-height: 1.45; background: var(--panel-2); border-left: 3px solid var(--line-2); color: var(--text-2); }
.why.helps { border-left-color: var(--up); } .why.helps b { color: var(--up); }
.why.hurts { border-left-color: var(--down); } .why.hurts b { color: var(--down); }
.why.neutral b { color: var(--muted); }

/* ── v3.250 earnings: what we're watching for ─────────────────────────── */
.ewatch { grid-column: 1 / -1; display: grid; gap: 3px; margin: 2px 0 2px 0; padding: 8px 10px; border-radius: 8px; background: var(--panel-2); font-size: 13px; line-height: 1.45; color: var(--text-2); text-align: left; }
.ewatch b { color: var(--muted); font-weight: 600; }

/* ── v3.250 Nasdaq-100 line ───────────────────────────────────────────── */
.qqq-l { fill: none; stroke: #8fb8ff; stroke-width: 1.4; stroke-dasharray: 2 3; opacity: .85; }
.legend i.qqq { background: none; border-top: 2px dotted #8fb8ff; height: 0; }

/* ── v3.250 £1,000 calculator ─────────────────────────────────────────── */
.calc { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.calc-t { padding: 12px 14px; border-radius: 10px; background: var(--panel-2); border: 1px solid var(--line); }
.calc-t.main { border-color: color-mix(in srgb, var(--accent) 45%, var(--line)); }
.calc-t .l { font: 700 11px var(--font); letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.calc-t .v { font-size: 24px; font-weight: 700; margin-top: 4px; }
.calc-t .s { font-size: 12.5px; color: var(--dim); margin-top: 2px; }
.calc-say { margin-top: 12px; font-size: 14.5px; line-height: 1.5; }
@media (max-width: 600px) { .calc { grid-template-columns: 1fr; } }

/* ── v3.250 alerts toggle ─────────────────────────────────────────────── */
.alerts-btn { border: 1px solid var(--line-2); background: var(--panel-2); border-radius: 99px; padding: 4px 9px; font-size: 13px; cursor: pointer; opacity: .55; filter: grayscale(1); }
.alerts-btn.on { opacity: 1; filter: none; border-color: color-mix(in srgb, var(--accent) 50%, var(--line-2)); }

/* ── v3.250 how it works · track record · paper note ──────────────────── */
.paper-note { padding: 8px 24px; font-size: 13px; color: var(--text-2); background: color-mix(in srgb, var(--accent) 12%, var(--panel)); border-bottom: 1px solid var(--line); }
.paper-note a { color: var(--text); font-weight: 600; margin-left: 6px; }
.about h3 { margin: 18px 0 8px; font-size: 15px; } .about h3:first-child { margin-top: 0; }
.about p, .about li { font-size: 14.5px; line-height: 1.6; color: var(--text-2); }
.about ul { padding-left: 18px; display: grid; gap: 6px; margin: 0; }
.about .note { padding: 10px 12px; border-radius: 8px; background: var(--panel-2); border-left: 3px solid var(--accent); }
.about-kv dt { font-weight: 600; } .about-kv dd { color: var(--text-2); }
.track .tr-main { display: flex; flex-wrap: wrap; gap: 14px 28px; align-items: center; }
.track .tr-big { font: 700 36px/1 var(--mono); }
.track .tr-vs { display: grid; gap: 4px; font-size: 14px; }
.track .tr-row { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin-top: 14px; }
.track .tr-row > div { display: grid; gap: 3px; padding: 10px 12px; border-radius: 8px; background: var(--panel-2); font-size: 13px; }
@media (max-width: 600px) { .track .tr-row { grid-template-columns: 1fr; } }

/* ── v3.250 Claude's picks · scorecard ────────────────────────────────── */
.picks { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 10px; padding: 4px 16px 12px; }
.pick { display: grid; gap: 8px; padding: 12px 14px; border-radius: 10px; border: 1px solid var(--line); background: var(--panel-2); text-align: left; color: inherit; font: inherit; cursor: pointer; }
.pick:hover { border-color: var(--line-2); }
.pk-top { display: flex; align-items: center; gap: 10px; }
.pk-top > span:nth-child(2) { display: grid; min-width: 0; }
.pk-score { margin-left: auto; font-weight: 700; font-size: 18px; } .pk-score small { font-size: 11px; color: var(--dim); }
.pk-lv { display: flex; flex-wrap: wrap; gap: 6px 16px; font-size: 13.5px; }
.pk-lv span { display: grid; } .pk-lv i { font-style: normal; font-size: 10.5px; letter-spacing: .06em; text-transform: uppercase; color: var(--dim); } .pk-lv small { font-size: 11px; color: var(--dim); }
.pk-odds { font-size: 12.5px; color: var(--muted); }
.pk-wrong { font-size: 12.5px; line-height: 1.45; color: var(--text-2); } .pk-wrong b { color: var(--muted); }
.sb-block + .sb-block { margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--line); }
.sb-block h4 { margin: 0 0 8px; font: 700 11px var(--font); letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }
.sb-line { font-size: 14px; margin-bottom: 6px; }
.sb-chips { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin-top: 6px; font-size: 12.5px; }
/* Hidden tooltips must not widen the page (they did at the right edge). */
.gl::after { display: none; }
.gl:hover::after, .gl:focus::after { display: block; }

/* v3.251 */
.hc-flags { display: flex; gap: 4px; flex-wrap: wrap; margin-left: auto; margin-right: 8px; }

/* v3.252 junk news note */
.junk-note { padding: 6px 16px 8px; font-size: 12.5px; }

/* ── v3.252 slim Today · picks strip · Start here ─────────────────────── */
.picks-strip { display: flex; flex-wrap: wrap; gap: 6px 14px; align-items: center; width: 100%; padding: 12px 16px; border-radius: var(--radius); border: 1px solid color-mix(in srgb, var(--accent) 35%, var(--line)); background: var(--panel); color: inherit; font: inherit; font-size: 14px; text-align: left; cursor: pointer; }
.picks-strip:hover { border-color: var(--accent); }
.picks-strip > span:last-child { margin-left: auto; font-size: 12.5px; }
.more-today { display: grid; }
.more-btn { display: flex; flex-wrap: wrap; gap: 4px 10px; align-items: center; width: 100%; padding: 12px 16px; border-radius: var(--radius); border: 1px dashed var(--line-2); background: none; color: var(--text); font: inherit; font-size: 14px; font-weight: 600; cursor: pointer; text-align: left; }
.more-btn .dim { font-weight: 400; font-size: 12.5px; } .more-btn .caret { margin-left: auto; }
.more-body { display: grid; gap: 16px; }
.pk-wrong { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }

/* ── v3.254 Today tiling: a reading column and an action column, each flowing on its own ── */
.today-grid { display: grid; grid-template-columns: minmax(0, 1.75fr) minmax(320px, 1fr); gap: 16px; align-items: start; }
.t-main, .t-side { display: grid; gap: 16px; align-content: start; min-width: 0; }
.t-main { container-type: inline-size; }
.t-side .card.fill { height: auto; }
.t-side .list.scroll-y { max-height: none; overflow: visible; }
.pk-mini { align-items: center; }
.pk-mini .grow { display: grid; min-width: 0; flex: 1; }
.pk-mini .grow .dim { font-size: 12px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pk-mini-l { font-size: 12.5px; color: var(--text-2); }
.pk-mini .pk-score { font-size: 15px; margin-left: auto; padding-left: 8px; }
/* The holdings table gives up its 30-day sparkline before it would scroll sideways. */
@container (max-width: 820px) { .t-hold .hide-sm { display: none; } }
/* One column: priority order, not source order. */
@media (max-width: 1100px) {
  .today-grid { grid-template-columns: 1fr; }
  .t-main, .t-side { display: contents; }
  .t-main > .letter { order: 1; } .t-side > .card:nth-child(1) { order: 2; } .t-main > .t-hold { order: 3; }
  .t-main > .card:last-child { order: 4; } .t-side > .t-picks { order: 5; } .t-side > .card:last-child { order: 6; }
}

/* ════════════════════════════════════════════════════════════════════════
   v3.255 — the desk. Palette, type and the Today command centre.
   ════════════════════════════════════════════════════════════════════════ */
:root, :root[data-theme] {
  --bg: #090A0F; --panel: #12151E; --panel-2: #171B26; --line: #1E2230; --line-2: #2A3042;
  --up: #10B981; --down: #EF4444; --hover: rgba(255, 255, 255, .03);
}
body { background: var(--bg); }
.card { background: var(--panel); border-color: var(--line); border-radius: 12px; box-shadow: none; }
.top { background: rgba(9, 10, 15, .9); }

/* Headings read like a product, not a report: sentence case, one weight step. */
.card > header h2 { text-transform: none; letter-spacing: 0; font-size: 14px; font-weight: 650; color: var(--text); }
.card > header .sub { font-size: 12.5px; }
.card > header { padding: 12px 16px 10px; min-height: 0; }
.kpi .l, .hstat .l { text-transform: none; letter-spacing: 0; font-size: 12.5px; font-weight: 500; }

/* Every figure in monospace, tabular. */
.num, .desk-t td.n, .xmeta b, .dstat b { font-family: var(--mono); font-variant-numeric: tabular-nums; }

/* Thin custom scrollbars inside capped panels. */
.pscroll { overflow: auto; overscroll-behavior: contain; scrollbar-width: thin; scrollbar-color: #2A3042 transparent; }
.pscroll::-webkit-scrollbar { width: 8px; height: 8px; }
.pscroll::-webkit-scrollbar-thumb { background: #2A3042; border-radius: 8px; border: 2px solid var(--panel); }
.pscroll::-webkit-scrollbar-track { background: transparent; }

/* Sticky header numbers. */
.top-kpis { display: flex; align-items: center; gap: 18px; min-width: 0; margin-left: 8px; }
.top-kpis .tk-k { display: grid; gap: 1px; line-height: 1.15; white-space: nowrap; }
.top-kpis .tk-k i { font-style: normal; font-size: 10.5px; color: var(--dim); }
.top-kpis .tk-val { font-size: 17px; font-weight: 700; }
.top-kpis .pill { padding: 1px 7px; font-size: 12px; }
@media (max-width: 1280px) { .top-kpis .hide-md { display: none; } }
@media (max-width: 900px) { .top-kpis { gap: 10px; margin-left: 0; } .top-kpis .tk-k i { display: none; } .top-kpis .tk-val { font-size: 15px; } }

/* Live pulse. */
@keyframes pulse { 0% { box-shadow: 0 0 0 0 rgba(16, 185, 129, .55); } 70% { box-shadow: 0 0 0 7px rgba(16, 185, 129, 0); } 100% { box-shadow: 0 0 0 0 rgba(16, 185, 129, 0); } }
.live-dot { display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: var(--up); margin-left: 8px; animation: pulse 2s infinite; }
.ls-livetag i, #live.on i { animation: pulse 2s infinite; }
@media (prefers-reduced-motion: reduce) { .live-dot, .ls-livetag i, #live.on i { animation: none; } }

/* ── The desk: 65 / 35, each column flowing on its own ── */
.desk { display: grid; grid-template-columns: minmax(0, 65fr) minmax(320px, 35fr); gap: 14px; align-items: start; }
.desk-main, .desk-side { display: grid; gap: 14px; align-content: start; min-width: 0; }
.desk-pair { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; align-items: start; }
.desk .card { overflow: hidden; }

/* Chart tile. */
.dstats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.dstat { display: grid; gap: 2px; padding: 9px 16px; border-right: 1px solid var(--line); }
.dstat:last-child { border-right: 0; }
.dstat > span { font-size: 12px; color: var(--muted); }
.dstat b { font-size: 16px; font-weight: 650; }

/* Holdings tile. */
.desk-t { width: 100%; border-collapse: collapse; font-size: 13px; }
.desk-t thead th { position: sticky; top: 0; z-index: 1; background: var(--panel); font: 500 11.5px var(--font); color: var(--dim); text-align: left; padding: 8px 12px; border-bottom: 1px solid var(--line); white-space: nowrap; }
.desk-t th.n, .desk-t td.n { text-align: right; }
.desk-t td { padding: 8px 12px; border-bottom: 1px solid var(--line); vertical-align: middle; }
.desk-t tbody tr:last-child td { border-bottom: 0; }
.desk-t tbody tr:hover td { background: var(--hover); }
.desk-t td .badge { margin-left: 6px; }
.desk-t .small { font-size: 11.5px; margin-top: 1px; }
.alloc { display: grid; justify-items: end; gap: 4px; }
.alloc { position: relative; } .alloc i { display: block; height: 3px; border-radius: 3px; background: #8a95a6; max-width: 64px; }
.desk-hold-c { display: none; }

/* Executions tile. */
.xrow { display: grid; grid-template-columns: 44px minmax(0, 1fr) auto; gap: 10px; align-items: center; width: 100%; padding: 8px 14px; border: 0; border-top: 1px solid var(--line); background: none; color: inherit; font: inherit; text-align: left; cursor: pointer; }
.xrow:first-child { border-top: 0; }
.xrow:hover { background: var(--hover); }
.xside { font: 700 10.5px var(--mono); letter-spacing: .04em; text-align: center; padding: 3px 0; border-radius: 5px; }
.xside.up { color: var(--up); background: rgba(16, 185, 129, .12); } .xside.down { color: var(--down); background: rgba(239, 68, 68, .12); }
.xrow .t1 { display: block; font-size: 13px; } .xrow .t2 { display: block; font-size: 12px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.xmeta { display: grid; justify-items: end; gap: 1px; font-size: 12.5px; } .xmeta .dim { font-size: 11px; }

/* Intelligence tile. */
.intel { display: grid; gap: 6px; padding-bottom: 12px; }
.bias { display: inline-flex; align-items: center; gap: 9px; font: 700 15px var(--mono); letter-spacing: .04em; }
.bias-dot { width: 9px; height: 9px; border-radius: 50%; background: var(--muted); }
.bias.up .bias-dot { background: var(--up); animation: pulse 2s infinite; } .bias.up b { color: var(--up); }
.bias.down .bias-dot { background: var(--down); } .bias.down b { color: var(--down); }
.bias.warn .bias-dot { background: #F59E0B; } .bias.warn b { color: #F59E0B; }
.bias.info .bias-dot { background: #8fb8ff; } .bias.info b { color: #cfdcff; }
.intel-d { font-size: 13.5px; color: var(--text-2); line-height: 1.45; }
.intel-next { font-size: 12.5px; }
.sect-h { display: flex; align-items: center; gap: 8px; padding: 9px 16px; border-top: 1px solid var(--line); font-size: 12.5px; font-weight: 600; color: var(--muted); }

/* Rationale tile (v3.259): the morning letter as a short read, nothing folded. */
.pills { display: flex; flex-wrap: wrap; gap: 6px; }
.pillx { padding: 3px 9px; border-radius: 99px; border: 1px solid var(--line-2); font-size: 12px; color: var(--text-2); }
.pillx b { font-weight: 600; color: var(--text); margin-left: 4px; }
.ml { display: grid; gap: 16px; }
.ml-head { margin: 0; font-size: 16px; font-weight: 600; line-height: 1.45; color: var(--text); }
.ml-plan { padding: 10px 12px; border-left: 3px solid var(--accent); background: var(--panel-2); border-radius: 0 8px 8px 0; font-size: 13.5px; line-height: 1.5; color: var(--text-2); }
.ml-k { display: block; font-size: 11.5px; font-weight: 600; color: var(--accent); margin-bottom: 2px; }
.ml-s h4 { margin: 0 0 6px; font-size: 12.5px; font-weight: 600; color: var(--muted); display: flex; align-items: center; gap: 8px; }
.ml-s ul { margin: 0; padding-left: 18px; display: grid; gap: 5px; font-size: 13.5px; line-height: 1.5; color: var(--text-2); }
.ml-co { display: grid; grid-template-columns: 54px minmax(0, 1fr); gap: 10px; width: 100%; padding: 8px 0; border: 0; border-top: 1px solid var(--line); background: none; color: inherit; font: inherit; text-align: left; cursor: pointer; }
.ml-co:first-of-type { border-top: 0; padding-top: 2px; }
.ml-co:hover .tk { color: var(--accent); }
.ml-co .tk { padding-top: 1px; }
.ml-co-b { display: grid; gap: 4px; font-size: 13.5px; line-height: 1.5; color: var(--text-2); }
.ml-lv { font-size: 12.5px; }
.ml-lv b { font-weight: 600; }
.ml-lv.exit b { color: #fca5a5; } .ml-lv.add b, .ml-lv.buy b { color: #b8d2ff; }
.ml-full summary { cursor: pointer; font-size: 12.5px; color: var(--muted); }
.ml-full p { margin: 8px 0 0; font-size: 13.5px; line-height: 1.55; color: var(--text-2); }
.ml-band .ls-since { margin-top: 0; }

/* Columns end level (v3.259): the letter takes whatever height the portfolio column leaves and scrolls inside; paired tiles match heights. */
@media (min-width: 1025px) {
  .desk { align-items: stretch; }
  .desk-main, .desk-side { display: flex; flex-direction: column; }
  .desk-pair { align-items: stretch; }
  .desk-pair.solo { grid-template-columns: 1fr; }
  .desk-side .o-news { flex: 1 1 0; min-height: 420px; display: flex; flex-direction: column; }
  .o-news .news-scroll { flex: 1 1 0; min-height: 0; }
}
@media (max-width: 1024px) { .news-scroll { max-height: 420px; } }

/* ── ≤1180: the pairs stack; ≤1024: one column in priority order ── */
@media (max-width: 1180px) { .desk-pair { grid-template-columns: 1fr; } }
@media (max-width: 1024px) {
  .desk { grid-template-columns: 1fr; }
  .desk-main, .desk-side, .desk-pair { display: contents; }
  .o-intel { order: 1; } .o-news { order: 2; } .o-hold { order: 4; } .o-chart { order: 5; }
  .o-watch { order: 6; } .o-exec { order: 7; } .o-ops { order: 10; }
  .dstats { grid-template-columns: repeat(2, minmax(0, 1fr)); } .dstat:nth-child(2) { border-right: 0; } .dstat:nth-child(-n+2) { border-bottom: 1px solid var(--line); }
}
@media (max-width: 600px) { .desk-hold-t { display: none; } .desk-hold-c { display: block; } }

/* v3.255 header fit + calmer labels */
#updated { display: none !important; }
.top .search { width: clamp(180px, 22vw, 300px); flex: 0 1 auto; }
@media (max-width: 1600px) { .top-kpis .tk-ext { display: none; } }
@media (max-width: 1440px) { .top-kpis .tk-start { display: none; } }
.div-h { text-transform: none; letter-spacing: 0; font-size: 12.5px; }
/* Phone header (v3.255): search + status on one row, the numbers on their own full-width row. */
@media (max-width: 900px) {
  .top { flex-wrap: wrap; row-gap: 8px; }
  .top .search { flex: 1 1 auto; width: auto; min-width: 0; }
  .top-kpis { order: 10; width: 100%; margin: 0; justify-content: space-between; gap: 8px; padding-top: 2px; }
  .top-kpis .tk-k i { display: block; font-size: 10px; }
  .top-kpis .hide-md.tk-start { display: grid; }
  .top-kpis .hide-md:not(.tk-ext):not(.tk-start) { display: grid; }
  .top .alerts-btn { display: none; }
}
@media (max-width: 600px) { .top .status { padding: 8px 10px; } .top .status span { display: none; } }
@media (min-width: 901px) and (max-width: 1200px) {
  .top h1 { display: none; }
  .top #live span, .top .status span { display: none; }
  .top .status { padding: 8px 10px; }
  .top .search { width: clamp(150px, 18vw, 220px); }
}

/* ── v3.256 Claude's read today ──────────────────────────────────────── */
.stance { display: grid; gap: 6px; padding: 12px 14px; border-radius: 10px; background: var(--panel-2); border: 1px solid var(--line); }
.stance-top { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.stance-v { font: 700 17px var(--font); letter-spacing: -.01em; }
.stance.up .bias-dot, .stance.lean-up .bias-dot { background: var(--up); animation: pulse 2s infinite; }
.stance.up .stance-v { color: var(--up); } .stance.lean-up .stance-v { color: #6ee7b7; }
.stance.down .bias-dot, .stance.lean-down .bias-dot { background: var(--down); }
.stance.down .stance-v { color: var(--down); } .stance.lean-down .stance-v { color: #fca5a5; }
.stance.neutral .bias-dot { background: #8fb8ff; } .stance.neutral .stance-v { color: #cfdcff; }
.stance.up { border-color: rgba(16, 185, 129, .35); } .stance.down { border-color: rgba(239, 68, 68, .35); }
.conf { display: inline-flex; align-items: center; gap: 3px; margin-left: auto; font-size: 11.5px; color: var(--muted); }
.conf i { width: 6px; height: 12px; border-radius: 2px; background: var(--line-2); }
.conf i.on { background: var(--text-2); } .conf span { margin-left: 6px; }
.stance-why { font-size: 13.5px; line-height: 1.5; color: var(--text); }
.stance-watch { font-size: 12.5px; color: var(--text-2); }
.intel-meta { display: grid; gap: 3px; font-size: 12.5px; margin-top: 4px; }
@media (prefers-reduced-motion: reduce) { .stance .bias-dot { animation: none; } }

/* ── v3.257 the portfolio tile ────────────────────────────────────────── */
.ptile { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 2fr); align-items: center; gap: 18px; padding: 18px 22px; background: linear-gradient(180deg, #151925, var(--panel)); }
.pt-l { font-size: 12.5px; color: var(--muted); }
.pt-big { font-size: 44px; font-weight: 700; letter-spacing: -.02em; line-height: 1.1; margin: 4px 0 8px; }
.pt-sub { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; font-size: 13px; }
.pt-stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); }
.pt-s { display: grid; gap: 3px; padding: 4px 16px; border-left: 1px solid var(--line); }
.pt-s > span { font-size: 12px; color: var(--muted); }
.pt-s b { font-size: 20px; font-weight: 650; }
.pt-s em { font-style: normal; font-size: 12px; color: var(--dim); }
@media (max-width: 1180px) { .ptile { grid-template-columns: 1fr; } .pt-s:first-child { border-left: 0; padding-left: 0; } }
@media (max-width: 600px) { .pt-big { font-size: 36px; } .pt-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 12px; } .pt-s { border-left: 0; padding: 0; } .ptile { padding: 16px; } }
.sect-note { margin-left: auto; font-weight: 400; font-size: 11.5px; color: var(--dim); }
@media (max-width: 420px) { .sect-note { display: none; } }

/* v3.260 — the Journal's parts in their new homes. */
.part-h { margin: 10px 2px 0; font-size: 17px; font-weight: 600; display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; }
.part-h .sub { font-size: 12.5px; font-weight: 400; color: var(--muted); }
#all-trades, #decisions, #sys-events { scroll-margin-top: 110px; }

/* v3.262 — Highs & lows: a tall, narrow two-column ticker, lows left, highs right. */
.hl { max-width: 760px; margin: 0 auto; }
.hl-legend { display: grid; grid-template-columns: 1fr 1fr; padding: 4px 16px 6px; font-size: 13px; font-weight: 600; }
.hl-legend span { display: flex; align-items: center; gap: 8px; }
.hl-legend span::before { content: ''; width: 3px; height: 14px; border-radius: 2px; }
.hl-legend .lo::before { background: var(--down); } .hl-legend .hi { justify-content: flex-end; } .hl-legend .hi::before { background: var(--up); order: -1; }
.hl-meter { display: grid; gap: 4px; padding: 4px 16px 12px; }
.hl-m { display: grid; grid-template-columns: 22px 1fr 58px 1fr 22px; align-items: center; gap: 8px; }
.hl-m > b { font-size: 11.5px; font-weight: 600; } .hl-m > b.lo { color: var(--down); } .hl-m > b.hi { color: var(--up); text-align: right; }
.hl-ml { text-align: center; font-size: 12px; font-weight: 600; color: var(--muted); }
.hl-mb { position: relative; height: 6px; display: flex; align-items: center; }
.hl-mb i { display: block; height: 4px; border-radius: 3px; transition: width .4s; }
.hl-mb.lo { justify-content: flex-end; } .hl-mb.lo i { background: var(--down); }
.hl-mb.hi i { background: var(--up); }
.hl-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; padding: 0 8px 8px; }
.hl-col { border-radius: 8px; overflow: hidden; }
.hl-col.low { background: rgba(239, 68, 68, .07); border-left: 3px solid var(--down); }
.hl-col.high { background: rgba(16, 185, 129, .07); border-left: 3px solid var(--up); }
.hl-th, .hl-r { display: grid; grid-template-columns: minmax(0, 1fr) auto 44px; gap: 8px; align-items: center; padding: 6px 10px; }
.hl-th { font-size: 11.5px; font-weight: 600; color: var(--muted); border-bottom: 1px solid var(--line); position: sticky; top: 0; }
.hl-th span:not(:first-child), .hl-r .num { text-align: right; }
.hl-r { width: 100%; border: 0; border-bottom: 1px solid rgba(255, 255, 255, .04); background: none; color: inherit; font: inherit; font-size: 13px; cursor: pointer; text-align: left; }
.hl-r:hover { background: var(--hover); }
.hl-r .tk { font-weight: 700; }
.hl-c { color: var(--muted); }
.hl-col.low .hl-r.held { background: rgba(239, 68, 68, .28); }
.hl-col.high .hl-r.held { background: rgba(16, 185, 129, .24); }
.hl-r.fresh { animation: hlIn 1.2s ease-out; }
@keyframes hlIn { from { background: rgba(255, 255, 255, .18); } }
@media (prefers-reduced-motion: reduce) { .hl-r.fresh { animation: none; } }
.hl-none { padding: 14px 10px; font-size: 12.5px; color: var(--dim); }
.hl-foot { border-top: 1px solid var(--line); font-size: 12.5px; line-height: 1.5; }
@media (max-width: 480px) { .hl-cols { padding: 0 4px 6px; gap: 4px; } .hl-th, .hl-r { padding: 6px 6px; gap: 4px; grid-template-columns: minmax(0, 1fr) auto 30px; font-size: 12.5px; } }

/* v3.263 — Trade diary: one card per buy. */
.dy { display: grid; gap: 10px; align-content: start; padding: 14px; border: 1px solid var(--line); border-radius: 10px; background: var(--panel-2); }
.dy-s h4 { margin: 0 0 3px; font-size: 11.5px; font-weight: 600; color: var(--muted); }
.dy-s p { margin: 0; font-size: 13.5px; line-height: 1.5; color: var(--text-2); }
.dy-w { padding: 8px 10px; border-left: 3px solid var(--line-2); background: var(--panel-3); border-radius: 0 6px 6px 0; }
.dy-now { font-size: 13px; line-height: 1.5; padding-top: 8px; border-top: 1px solid var(--line); }
.dy-q { margin-top: 4px; color: var(--text-2); font-style: italic; }

/* v3.264 — the morning letter is the page's voice again: full width under the portfolio tile. */
.ml-band { padding: 18px 22px 20px; border-left: 3px solid var(--accent); background: linear-gradient(180deg, #141826, var(--panel)); display: grid; gap: 12px; }
.ml-from { display: flex; gap: 12px; align-items: center; }
.ml-from img { width: 40px; height: 40px; border-radius: 50%; }
.ml-from b { display: block; font-size: 15px; }
.ml-from span { display: block; color: var(--muted); font-size: 12.5px; }
.ml-band .ml-head { font-size: 19px; line-height: 1.4; }
.ml-cols { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px 28px; align-items: start; }
@media (max-width: 900px) { .ml-cols { grid-template-columns: 1fr; } .ml-band { padding: 16px; } .ml-band .ml-head { font-size: 17px; } }
.news-scroll { max-height: 340px; }
/* Friendlier figures on the portfolio tile: the UI font with even-width digits, not the terminal font. */
.ptile .num { font-family: var(--font); font-variant-numeric: tabular-nums; }
.pt-note { font-size: 12.5px; line-height: 1.5; margin-top: 8px; max-width: 460px; }

/* v3.269: every research-list heading sits over its own column. Headings bottom-align, wrap only between words, and the wider gap keeps neighbours from reading as one word ("SCORE GROWTH"). */
.rhead { align-items: end; }
.rhead .rnum { white-space: normal; line-height: 1.3; overflow-wrap: normal; word-break: keep-all; }

/* v3.271: plain explanation of the chips that are switched on (tooltips don't work on phones). */
.chip-help { display: grid; gap: 3px; font-size: 12.5px; line-height: 1.45; color: var(--muted); padding: 2px 2px 0; }
.chip-help b { color: var(--text-2); font-weight: 600; }

/* v3.273 — the morning briefing: tone, market backdrop, our companies on one scale. */
.ls-up { grid-template-columns: minmax(48px, auto) 1fr; }
.br-top { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 16px; }
.br-tone { display: inline-flex; align-items: center; gap: 10px; padding: 7px 12px; border-radius: 999px; border: 1px solid var(--line-2); background: var(--panel-2); font-size: 14px; }
.br-tone b { font-size: 15px; }
.br-tone.up b { color: var(--up); } .br-tone.down b { color: var(--down); } .br-tone.flat b, .br-tone.neutral b { color: var(--text); }
.br-tone .bias-dot { width: 9px; height: 9px; border-radius: 50%; background: var(--muted); }
.br-tone.up .bias-dot { background: var(--up); } .br-tone.down .bias-dot { background: var(--down); }
.br-tone .conf { display: inline-flex; align-items: center; gap: 3px; color: var(--muted); font-size: 12px; }
.br-tone .conf i { width: 6px; height: 12px; border-radius: 2px; background: var(--line-2); } .br-tone .conf i.on { background: var(--text-2); }
.br-tone .conf span { margin-left: 5px; }
.br-why { font-size: 13.5px; line-height: 1.5; color: var(--text-2); display: grid; gap: 4px; }
.br-macro { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.br-m { display: grid; gap: 3px; padding: 10px 12px; border-radius: 10px; background: var(--panel-2); border: 1px solid var(--line); border-left: 3px solid var(--line-2); }
.br-m.up { border-left-color: var(--up); } .br-m.down { border-left-color: var(--down); }
.br-ml { font-size: 12px; color: var(--muted); font-weight: 600; }
.br-mv { font-size: 17px; font-weight: 700; }
.br-mv em { font-style: normal; font-size: 12.5px; font-weight: 600; margin-left: 4px; color: var(--muted); } .br-mv em.up { color: var(--up); } .br-mv em.down { color: var(--down); }
.br-ms { font-size: 12.5px; line-height: 1.4; color: var(--text-2); }
.br-note { font-size: 12px; line-height: 1.45; margin-top: 8px; }
.br-sub { font-size: 12px; font-weight: 600; color: var(--muted); margin: 10px 0 6px; }
.br-reps { display: flex; flex-wrap: wrap; gap: 6px; }
.br-rep { padding: 5px 10px; border-radius: 999px; border: 1px solid var(--line-2); background: none; color: var(--text-2); font: inherit; font-size: 12.5px; cursor: pointer; }
.br-rep:hover { border-color: var(--accent); } .br-rep b { color: var(--text); } .br-rep .rf { margin-left: 4px; }
.br-cos { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 340px), 1fr)); gap: 10px; }
.br-co { display: grid; gap: 8px; align-content: start; padding: 12px; border-radius: 10px; border: 1px solid var(--line); background: var(--panel-2); color: inherit; font: inherit; text-align: left; cursor: pointer; }
.br-co:hover { border-color: var(--line-2); }
.br-co-h { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; }
.br-co-h .num { font-weight: 600; }
.br-co-n { font-size: 13.5px; line-height: 1.5; color: var(--text-2); }
.br-scale { position: relative; height: 16px; margin: 2px 6px 0; }
.br-track { position: absolute; left: 0; right: 0; top: 7px; height: 2px; border-radius: 2px; background: var(--line-2); }
.br-tick { position: absolute; top: 2px; width: 2px; height: 12px; margin-left: -1px; border-radius: 1px; }
.br-tick.exit { background: #fca5a5; } .br-tick.add { background: #b8d2ff; }
.br-dot { position: absolute; top: 3px; width: 10px; height: 10px; margin-left: -5px; border-radius: 50%; background: var(--text); box-shadow: 0 0 0 3px var(--panel-2); }
.br-lv { display: flex; flex-wrap: wrap; gap: 4px 14px; font-size: 12.5px; color: var(--muted); }
.br-lv .exit { color: #fca5a5; } .br-lv .add { color: #b8d2ff; } .br-lv b { font-weight: 700; }
.br-foot { display: grid; gap: 10px; }
@media (max-width: 480px) { .br-m { padding: 8px 9px; } .br-mv { font-size: 15px; } .br-ms { font-size: 11.5px; } .br-macro { gap: 6px; } }
.br-adv { font-size: 12px; } .br-wait { font-size: 13.5px; line-height: 1.5; }
.br-m .br-mv { color: var(--text); }
.br-cos { align-items: start; }

/* v3.274 tidy: an even 2×3 backdrop grid with equal-height tiles; the change figure is neutral so the tile edge alone says tailwind or headwind. */
.br-macro { grid-auto-rows: 1fr; }
@media (min-width: 1600px) { .br-macro { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.br-mv em { color: var(--muted) !important; }
.br-scale { height: 30px; margin-bottom: 0; }
.br-tick em, .br-dot em { position: absolute; top: 14px; left: 50%; transform: translateX(-50%); font: 600 10px var(--font); font-style: normal; letter-spacing: .02em; white-space: nowrap; }
.br-tick.exit em { color: #fca5a5; } .br-tick.add em { color: #b8d2ff; } .br-dot em { color: var(--text-2); top: 13px; }
.br-plain { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 10px; }
.br-plain-l { font-size: 12px; font-weight: 600; color: var(--muted); margin-right: 2px; }
.br-pc { display: inline-flex; align-items: center; gap: 8px; padding: 6px 10px; border-radius: 999px; border: 1px solid var(--line); background: var(--panel-2); color: inherit; font: inherit; font-size: 13px; cursor: pointer; }
.br-pc:hover { border-color: var(--line-2); } .br-pc .num { font-weight: 600; }

/* v3.274 one-week lines on the backdrop tiles: quiet, no axis or fill. */
.br-wk { width: 100%; height: 26px; display: block; margin: 2px 0 1px; }
.br-wk polyline { fill: none; stroke: var(--text-2); stroke-width: 1.4; stroke-linejoin: round; stroke-linecap: round; vector-effect: non-scaling-stroke; opacity: .75; }
.br-wk circle { fill: var(--text); }
.br-m.up .br-wk polyline { stroke: var(--up); } .br-m.down .br-wk polyline { stroke: var(--down); }
/* Claude's read carries more weight: it sets the tone for the day. */
.br-tone { font-size: 15px; padding: 9px 16px; } .br-tone b { font-size: 17px; }
.ml .br-cos { grid-template-columns: repeat(auto-fill, minmax(min(100%, 280px), 1fr)); }

/* v3.275 spacing and rhythm: clean but readable. */
.ml-band { gap: 18px; padding: 22px 26px 22px; }
.ml-band .ml-head { font-size: 21px; line-height: 1.35; max-width: 60ch; letter-spacing: -.01em; }
.ml-cols { gap: 20px 36px; }
.ml { gap: 20px; }
.ml-s h4 { font-size: 13px; color: var(--text-2); margin-bottom: 8px; letter-spacing: .01em; }
.ml-s ul { gap: 7px; font-size: 14px; line-height: 1.55; }
.br-why { font-size: 14px; line-height: 1.55; }
.br-m { align-content: start; gap: 4px; padding: 12px 14px; }
.br-macro { gap: 10px; }
.br-strip { display: grid; gap: 10px; }
.br-plain { margin-top: 0; }
.br-cos { gap: 12px; }
.br-co { padding: 14px; gap: 10px; }
@media (max-width: 900px) {
  /* Phones: the tone-setters first. Headline, plan, the market backdrop, then the reasoning, the calendar and our companies. */
  .ml-cols { display: flex; flex-direction: column; gap: 18px; }
  .ml-cols > .ml { display: contents; }
  .o-plan { order: 1; } .o-back { order: 2; } .o-why { order: 3; } .o-mkt { order: 4; } .o-cal { order: 5; } .o-cos { order: 6; }
  .br-top { flex-direction: column; align-items: stretch; gap: 12px; }
  .br-tone { border-radius: 12px; flex-wrap: wrap; row-gap: 4px; justify-content: flex-start; }
  .br-tone .br-adv { flex-basis: 100%; }
  .ml-band { padding: 18px 16px; gap: 16px; }
  .ml-band .ml-head { font-size: 19px; }
}
/* v3.275: tiles match height within a row only; the tone pill wraps cleanly on phones. */
.br-macro { grid-auto-rows: auto; }
.br-tone .conf { margin-left: 0; }
@media (max-width: 900px) {
  .br-tone { display: grid; grid-template-columns: auto auto 1fr; align-items: center; column-gap: 10px; }
  .br-tone .br-adv { grid-column: 1 / -1; }
  .br-plain { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .br-plain-l { grid-column: 1 / -1; }
  .br-pc { justify-content: flex-start; min-width: 0; overflow: hidden; }
}
/* v3.275: a lone card fills its row; on phones each compact holding is one clean full-width line. */
.br-cos, .ml .br-cos { grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)); }
@media (max-width: 900px) {
  .br-plain { grid-template-columns: 1fr; gap: 6px; }
  .br-pc { width: 100%; border-radius: 10px; padding: 8px 12px; }
  .br-pc > .dim:last-child { margin-left: auto; }
}

/* v3.277 big moves on holdings, top of Today: the move, the £ effect and the likely why. */
.mv-band { padding: 14px 18px; display: grid; gap: 12px; }
.mv { display: grid; gap: 6px; padding: 12px 14px; border-radius: 10px; background: var(--panel-2); border-left: 3px solid var(--line-2); }
.mv.up { border-left-color: var(--up); background: linear-gradient(90deg, rgba(16, 185, 129, .10), var(--panel-2) 60%); }
.mv.down { border-left-color: var(--down); background: linear-gradient(90deg, rgba(239, 68, 68, .10), var(--panel-2) 60%); }
.mv-h { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 12px; font-size: 15px; }
.mv-h .tk { font-size: 17px; font-weight: 700; padding: 0; }
.mv-h b.num { font-size: 20px; font-weight: 700; }
.mv.up .mv-h b.num { color: var(--up); } .mv.down .mv-h b.num { color: var(--down); }
.mv-ic { font-size: 18px; }
.mv-gbp { margin-left: auto; font-weight: 600; font-size: 13.5px; }
.mv-why { font-size: 14px; line-height: 1.5; color: var(--text-2); }
.mv-why a { color: var(--text); text-decoration: none; border-bottom: 1px solid var(--line-2); }
.mv-k { display: inline-block; font-size: 11.5px; font-weight: 700; color: var(--muted); margin-right: 8px; text-transform: uppercase; letter-spacing: .06em; }
.mv-note { font-size: 12px; }
@media (max-width: 600px) { .mv-gbp { margin-left: 0; flex-basis: 100%; } }

/* v3.280 demand signals on company pages: what each figure measures, and where it came from. */
.li-list { display: grid; }
.li-row { display: flex; align-items: flex-start; gap: 12px; padding: 9px 0; border-top: 1px solid var(--line); font-size: 14px; line-height: 1.45; }
.li-row:first-child { border-top: 0; }
.li-row b { font-weight: 600; } .li-row .num { font-weight: 600; }
.li-src { font-size: 12.5px; margin-top: 2px; }
.li-badge { flex: none; font-size: 11.5px; font-weight: 600; padding: 3px 8px; border-radius: 999px; border: 1px solid var(--line-2); color: var(--muted); white-space: nowrap; }
.li-badge.ok { color: var(--up); border-color: rgba(16, 185, 129, .4); } .li-badge.co { color: #b8d2ff; border-color: rgba(120, 160, 255, .4); }
.li-note { font-size: 12px; margin-top: 6px; }

/* v3.280 "Right now" and "Ask Claude": one card, the live update first, the shared Q&A under it. */
.rn { display: grid; }
.rn > header { flex-wrap: wrap; row-gap: 8px; }
.rn-btn { white-space: nowrap; }
.rn-btn.on { border-color: var(--accent); color: var(--text); }
.rn-body { padding: 4px 18px 14px; }
.rn-head { margin: 0 0 8px; font-size: 17px; font-weight: 600; line-height: 1.4; }
.rn-pts { margin: 0; padding-left: 18px; display: grid; gap: 6px; font-size: 14px; line-height: 1.55; color: var(--text-2); }
.rn-empty { margin: 0; font-size: 14px; line-height: 1.5; }
.ask { border-top: 1px solid var(--line); padding: 14px 18px 16px; display: grid; gap: 10px; }
.ask h4 { margin: 0; font-size: 13px; color: var(--text-2); }
.ask-sugg { display: flex; flex-wrap: wrap; gap: 6px; }
.ask-sugg .chip { font-size: 12.5px; }
.ask-form { display: flex; gap: 8px; }
.ask-form .field { flex: 1; min-width: 0; font-size: 14px; }
.ask-msg { font-size: 13px; color: var(--text-2); }
.ask-note { font-size: 12px; line-height: 1.45; }
.qa-feed { display: grid; gap: 8px; }
.qa { padding: 10px 12px; border-radius: 10px; background: var(--panel-2); border: 1px solid var(--line); display: grid; gap: 4px; }
.qa.mine { border-color: rgba(181, 123, 255, .45); }
.qa-q { font-size: 13.5px; } .qa-q b { font-weight: 600; }
.qa-a { font-size: 14px; line-height: 1.55; color: var(--text-2); white-space: pre-line; }
.qa.wait .live-dot { display: inline-block; vertical-align: middle; margin-right: 4px; }
.qa-more { justify-self: start; font-size: 12.5px; }
@media (max-width: 600px) { .rn-body, .ask { padding-left: 14px; padding-right: 14px; } .ask-form { flex-direction: column; } }

/* Scores coloured by band (v3.282, own tokens v3.283): text colour only, lighter sage the higher; below 6.5 fades. */
.sc-5 { color: var(--score-5) !important; }
.sc-4 { color: var(--score-4) !important; }
.sc-3 { color: var(--score-3) !important; }
.sc-2 { color: var(--text-2) !important; }
.sc-1 { color: var(--muted) !important; }

/* v3.283 trade diary folded into All trades: a buy row opens in place. */
.tx-car { display: inline-block; width: 12px; margin-right: 6px; color: var(--muted); transition: transform .15s; }
.tx-row.open .tx-car { transform: rotate(90deg); color: var(--text); }
.tx-row.open td { border-bottom-color: transparent; }
.tx-x > td { padding: 0 14px 14px !important; background: var(--panel-2); }
.tx-x .dy { max-width: 860px; background: var(--panel); }
.dy-none { font-size: 12.5px; color: var(--dim); }
.pk-foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 6px 10px; font-size: 12px; color: var(--muted); padding-top: 8px; border-top: 1px solid var(--line); }

/* v3.283 Today: trades, watchlist and operations in one row under the letter; Ask Claude folds to a bar. */
.desk-row { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; align-items: stretch; }
.desk-row.two { grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (max-width: 1180px) { .desk-row, .desk-row.two { grid-template-columns: 1fr; } }
.ask-bar { display: flex; align-items: center; gap: 12px; width: 100%; border: 0; border-top: 1px solid var(--line); background: none; padding: 12px 18px; cursor: pointer; text-align: left; color: var(--text-2); }
.ask-bar:hover { background: var(--hover); }
.ask-bar-l { font-weight: 650; color: var(--text); white-space: nowrap; }
.ask-bar-p { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--muted); font-size: 13px; }
.ask-bar-n { white-space: nowrap; font-size: 12.5px; }
.ask h4 { display: flex; justify-content: space-between; align-items: center; }
.ask-close { font-size: 12px; font-weight: 500; }
@media (max-width: 600px) { .ask-bar { padding: 12px 14px; } .ask-bar-p { display: none; } .ask-bar-n { margin-left: auto; } }
/* v3.283 the decision record in one card: three sections, one border. */
.tr-secs { display: grid; grid-template-columns: minmax(0, 1fr); gap: 0; padding-top: 4px; }
.tr-secs > section { min-width: 0; }
.tr-secs .tbl-wrap { overflow-x: auto; }
.tr-secs > section { padding: 14px 0; border-top: 1px solid var(--line); }
.tr-secs > section:first-child { border-top: 0; padding-top: 4px; }
.tr-h { margin: 0 0 10px; font-size: 13.5px; font-weight: 650; color: var(--text); }
.tr-h .sub { font-weight: 400; font-size: 12.5px; color: var(--muted); margin-left: 6px; }
/* Live news: three views, so the switcher gets its own row under the title (v3.283). */
.o-news > header { flex-wrap: wrap; row-gap: 8px; }
.o-news > header .right { flex-basis: 100%; margin-left: 0; }
.o-news > header .seg { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); width: 100%; }
.o-news > header .seg button { white-space: nowrap; }
@media (min-width: 1025px) { .desk-main > .o-hold { flex: 1 1 auto; } }
/* Multi-part catalysts (v3.286): one line per part, green when it happened, grey while pending; the row's own dot is half-filled. */
.cat-parts { list-style: none; margin: 6px 0 2px; padding: 0; display: grid; gap: 4px; font-size: 13px; color: var(--text-2); }
.cat-parts li { display: flex; align-items: baseline; gap: 8px; }
.cat-parts li .dot { flex: none; transform: translateY(-1px); }
.dot.part { background: linear-gradient(90deg, var(--up) 50%, var(--dim) 50%); }