/* PRISM design tokens. Plotly colours live in dashboard/theme.py — keep both in sync. */
/* The web fonts are linked from each page's HTML (config.FONTS_CSS), so they download alongside this file. */

:root {
  --bg: #0c0e13;
  --surface: #12151c;
  --surface-2: #171b24;
  --border: #1f2633;
  --text: #cad0d8;
  --text-strong: #e6e9ee;
  --muted: #6b7686;
  --primary: #3a8ee6;
  --pos: #22a35a;
  --neg: #e5484d;
  --warn: #e0a339;
  --violet: #9b7ae6;
  --bench: #8a94a6;
  --muted-2: #8f99aa;  /* secondary text on the home page and menus */
  --line: #2a3342;     /* a border that shows on surface (menus, pickers) */
  /* Each section's colour (dashboard/theme.py SECTION): Workspace, Research, Learning Lab, Club, Admin. */
  --sec-workspace: var(--pos); --sec-research: var(--primary); --sec-learn: var(--violet); --sec-club: var(--warn);
  --sec-admin: var(--bench);
  /* PRISM's spectrum as one fine line under every top bar: the five colours blended, fading out at both ends */
  --spectrum: linear-gradient(90deg, rgba(229,72,77,0) 0%, var(--neg) 16%, var(--warn) 33%, var(--pos) 50%,
    var(--primary) 67%, var(--violet) 84%, rgba(155,122,230,0) 100%);
  --spectrum-glow: linear-gradient(90deg, var(--neg), var(--warn) 25%, var(--pos) 50%, var(--primary) 75%, var(--violet));
  --radius: 2px;
  --bar-h: 60px;
  --sidebar-w: 248px;
  --font: Inter, ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --mono: "JetBrains Mono", "SF Mono", ui-monospace, Menlo, Consolas, monospace;
  /* Dash 4's own components (inputs, dropdowns and their pop-up lists) read these: keep them on the dark theme. */
  --Dash-Fill-Inverse-Strong: var(--bg); --Dash-Fill-Interactive-Strong: var(--primary);
  --Dash-Fill-Interactive-Weak: rgba(58,142,230,.14); --Dash-Fill-Primary-Hover: var(--surface-2);
  --Dash-Fill-Primary-Active: var(--surface-2); --Dash-Fill-Weak: var(--surface-2); --Dash-Fill-Disabled: var(--surface-2);
  --Dash-Stroke-Strong: var(--border); --Dash-Stroke-Weak: var(--border);
  --Dash-Text-Strong: var(--text-strong); --Dash-Text-Primary: var(--text-strong); --Dash-Text-Weak: var(--muted);
  --Dash-Text-Disabled: var(--muted); --Dash-Shading-Strong: rgba(0,0,0,.55); --Dash-Shading-Weak: rgba(0,0,0,.35);
}

/* The new look, "Dusk" (docs/redesign.md; Elijah, Nov 10 2026), one section at a time. A page in a section listed in
   theme.DUSK_SECTIONS has the class "dusk" on #shell, and every token above is swapped here for the whole page, top
   bar and pop-ups included. Pages in other sections are untouched. These are the palette he chose, under the old
   names so existing rules pick them up; the rules themselves are restyled in assets/dusk-*.css, one file per area.
   Select with ".dusk …" inside the page and ":root:has(#shell.dusk) …" for the top bar and anything outside #shell. */
:root:has(#shell.dusk) {
  --bg: #F5F4F0;            /* paper */
  --surface: #FCFBF9;
  --surface-2: #EDEBE4;     /* a pressed or hovered surface */
  --border: #DCDAD2;        /* hairlines */
  --line: #C9C6BC;          /* a border that must show on a surface */
  --text: #44454E;
  --text-strong: #1B1C22;   /* ink */
  --muted: #696B74;
  --muted-2: #696B74;
  --primary: #3B4A8C;       /* indigo, the brand colour */
  --primary-soft: #E4E6F1;
  --pos: #2E7D55;           /* gains */
  --neg: #B4472F;           /* losses */
  --warn: #C7853A;          /* dawn amber */
  --violet: #7A5C93;        /* heather */
  --rose: #A46A86;
  --sage: #6E8F86;
  --bench: #84868E;
  --night: #10132A;
  --xp: linear-gradient(90deg, #4F61B0, #9470B4);   /* "Twilight": XP only */
  --xp-soft: #E9E7F4;
  --sec-workspace: var(--primary); --sec-research: var(--sage); --sec-learn: var(--warn); --sec-club: var(--violet);
  --sec-admin: var(--bench);
  --radius: 3px;
  --serif: "Newsreader", Georgia, "Times New Roman", serif;   /* headlines */
  --Dash-Fill-Interactive-Weak: rgba(59,74,140,.10);
  --Dash-Shading-Strong: rgba(27,28,34,.30); --Dash-Shading-Weak: rgba(27,28,34,.16);
}

* { box-sizing: border-box; }
html, body { margin: 0; background: var(--bg); color: var(--text); font-family: var(--font); font-size: 14px; }
a { color: inherit; text-decoration: none; }

/* ---------- shell: the top bar on every page, then a section's sidebar and the page (views/shell.py) ---------- */
.topbar {
  position: sticky; top: 0; z-index: 30; height: var(--bar-h); display: flex; align-items: center; gap: 16px;
  padding: 0 24px; background: rgba(12,14,19,.95); border-bottom: 1px solid var(--border);
}
.topbar::after {  /* PRISM's spectrum: a hairline on the bar's bottom edge, as in the Learning Lab and Settings */
  content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 1px; opacity: .6; background: var(--spectrum);
}
.topbar::before {  /* and a faint glow under it */
  content: ""; position: absolute; left: 12%; right: 12%; bottom: -5px; height: 8px; pointer-events: none;
  filter: blur(6px); opacity: .12; background: var(--spectrum-glow);
}
/* On the home page the bar lets the sky show through until the page is scrolled (assets/home-sky.js sets .over-sky). */
.topbar.over-sky { background: linear-gradient(180deg, rgba(2,3,6,.85), rgba(2,3,6,.3)); border-bottom-color: transparent; }
.topbar.over-sky::after { opacity: .85; }
.topbar.over-sky::before { opacity: .3; }
.topbar.over-sky .tb-search { background: rgba(2,3,6,.75); }
.tb-brand { position: relative; z-index: 1; display: inline-flex; align-items: center; gap: 10px; flex-shrink: 0; }
.tb-mark { display: block; width: 44px; height: 26px; image-rendering: pixelated; }
.tb-word { font: 700 16px/1 "Silkscreen", var(--mono); letter-spacing: .08em; color: var(--text-strong);
  text-shadow: 0 0 12px rgba(58,142,230,.35); }
.tb-section { position: relative; z-index: 2; min-width: 0; }
.tb-section:empty { display: none; }
.px-icon { display: block; flex-shrink: 0; image-rendering: pixelated; }
.caret { flex-shrink: 0; width: 0; height: 0; border-left: 4px solid transparent; border-right: 4px solid transparent;
  border-top: 5px solid var(--muted-2); transition: transform .15s; }
details[open] > summary .caret { transform: rotate(180deg); }
.sec-details { position: relative; }
.sec-btn { list-style: none; display: inline-flex; align-items: center; gap: 9px; max-width: 100%; padding: 7px 12px 7px 16px;
  border-left: 1px solid var(--line); font-size: 15px; font-weight: 600; color: var(--text-strong); cursor: pointer;
  white-space: nowrap; user-select: none; }
.sec-btn::-webkit-details-marker { display: none; }
.sec-btn:hover, .sec-details[open] > .sec-btn { background: var(--surface-2); }
.sec-name { overflow: hidden; text-overflow: ellipsis; }
.sec-menu { position: absolute; top: calc(100% + 11px); left: 0; z-index: 40; min-width: 290px; padding: 6px 0;
  background: var(--surface); border: 1px solid var(--line); box-shadow: 0 14px 40px rgba(0,0,0,.5); }
.sm-item { display: flex; align-items: center; gap: 12px; padding: 10px 16px; color: var(--text); }
.sm-item:hover { background: var(--surface-2); color: var(--text-strong); }
.sm-item.on { color: var(--text-strong); background: var(--surface-2); box-shadow: inset 2px 0 0 var(--c); }
.sm-label { display: flex; align-items: center; gap: 8px; }
.sm-desc { font-size: 11px; color: var(--muted-2); margin-top: 1px; }
.sm-sep { height: 1px; background: var(--border); margin: 6px 0; }
.tb-right { margin-left: auto; position: relative; z-index: 2; display: flex; align-items: center; gap: 12px; }
.tb-search-wrap { display: flex; align-items: center; }
.tb-search { display: flex; align-items: center; gap: 8px; width: 300px; height: 34px; padding: 0 10px; cursor: text;
  border: 1px solid var(--line); border-radius: var(--radius); background: var(--bg); color: var(--muted-2); }
.tb-search:focus-within { border-color: var(--primary); }
/* dcc.Input (Dash 4) puts className on a wrapper; the <input> inside is .dash-input-element */
.tb-search-input, .rh-search-input { flex: 1; min-width: 0; height: 100%; background: none; border: 0; }
.tb-search .dash-input-element, .rh-search .dash-input-element { width: 100%; height: 100%; padding: 0; border: 0;
  outline: none; background: none; color: var(--text-strong); font: 13px var(--font); }
.tb-search .dash-input-element::placeholder, .rh-search .dash-input-element::placeholder { color: var(--muted-2); }
.tb-kbd { font: 11px var(--mono); color: var(--muted); border: 1px solid var(--line); padding: 1px 5px; border-radius: 2px; }
.tb-search-toggle { display: none; }

/* ---------- stock search suggestions, the same in every box (assets/stock-search.js, shell.stock_search): under
   the box (.ss-pop, on <body>, fixed) or inside the Trade picker (.ss-inline) ---------- */
.ss-pop { position: fixed; z-index: 1200; display: none; overflow-y: auto; background: var(--surface);
  border: 1px solid var(--line); border-radius: var(--radius); box-shadow: 0 10px 28px rgba(0,0,0,.45); }
.ss-pop.open { display: block; }
.ss-inline:not(:empty) { margin: 0 0 8px; border: 1px solid var(--line); border-radius: var(--radius); }
.ss-row { display: grid; grid-template-columns: 64px minmax(0, 1fr) auto 10px; align-items: center; gap: 10px;
  padding: 8px 12px; font-size: 13px; color: var(--text); text-decoration: none; cursor: pointer; }
.ss-row.on { background: var(--surface-2); box-shadow: inset 2px 0 0 var(--primary); }
.ss-t { font: 600 12.5px var(--mono); color: var(--text-strong); white-space: nowrap; overflow: hidden;
  text-overflow: ellipsis; }
.ss-n { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ss-row mark { background: none; color: var(--primary); font-weight: 600; }
.ss-tags { display: flex; gap: 4px; }
.ss-tag { font: 10.5px var(--mono); color: var(--bench); border: 1px solid var(--border); padding: 0 5px;
  border-radius: 2px; line-height: 16px; }
.ss-tag.ss-held { color: var(--pos); border-color: rgba(34,163,90,.4); }
.ss-go { color: var(--primary); visibility: hidden; }
.ss-row.on .ss-go { visibility: visible; }
.ss-empty { padding: 12px; font-size: 13px; color: var(--muted-2); }
.ss-foot { display: flex; justify-content: space-between; gap: 12px; padding: 7px 12px; font-size: 11.5px;
  color: var(--muted); border-top: 1px solid var(--border); }
.ss-dest { margin-left: auto; }
.ss-keys kbd { font: 10.5px var(--mono); color: var(--bench); border: 1px solid var(--border); padding: 0 4px;
  border-radius: 2px; }
@media (hover: none), (max-width: 760px) {
  .ss-row { min-height: 44px; padding: 6px 12px; font-size: 14px; }  /* easy to tap */
  .ss-go { visibility: visible; }
}

.shell { display: grid; grid-template-columns: var(--sidebar-w) minmax(0, 1fr); min-height: calc(100vh - var(--bar-h) - 3px); }
.shell.no-side { grid-template-columns: minmax(0, 1fr); }
.shell.no-side > .sidebar { display: none; }
/* The sidebar is a night sky: surface colour at the top, deepening to indigo with a faint glow at the horizon. */
.sidebar {
  position: sticky; top: calc(var(--bar-h) + 3px); z-index: 5; align-self: start; height: calc(100vh - var(--bar-h) - 3px);
  display: flex; flex-direction: column; overflow-x: hidden; overflow-y: auto; border-right: 1px solid var(--border);
  background:
    radial-gradient(130% 40% at 50% 108%, rgba(155,122,230,.11), transparent 70%),
    linear-gradient(180deg, var(--surface) 0%, #121625 58%, #141a2d 100%);
}
.side-body { position: relative; z-index: 1; flex: 1; display: flex; flex-direction: column; }
.side-nav { flex: 1; padding: 6px 0 16px; }
.nav-group { padding: 18px 20px 8px; font-size: 10px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); }
.nav-gap { height: 10px; }
.nav-link { display: flex; align-items: center; gap: 8px; padding: 9px 20px; color: var(--text); border-left: 2px solid transparent; }
.nav-link:hover { background: var(--surface-2); }
.nav-link.active { color: var(--primary); background: var(--surface-2); border-left-color: var(--primary); }
.side-foot { padding: 14px 20px; border-top: 1px solid var(--border); color: var(--muted); font-size: 12px; line-height: 1.5; }
.dot { width: 7px; height: 7px; border-radius: 50%; background: var(--pos); box-shadow: 0 0 6px var(--pos); }
/* The Workspace's portfolio menu, at the top of its sidebar */
.pf-picker { position: relative; margin: 16px 16px 4px; }
.pf-label { margin-bottom: 6px; font-size: 10px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); }
.pf-details { position: relative; }
.pf-btn { list-style: none; display: flex; align-items: center; gap: 10px; padding: 9px 11px; cursor: pointer;
  background: var(--bg); border: 1px solid var(--line); border-radius: var(--radius); }
.pf-btn::-webkit-details-marker { display: none; }
.pf-btn:hover, .pf-details[open] > .pf-btn { border-color: #3a4558; }
.pf-text { flex: 1; min-width: 0; }
.pf-name { font-weight: 600; color: var(--text-strong); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pf-sub { margin-top: 2px; font: 11px var(--mono); color: var(--muted-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pf-menu { position: absolute; left: 0; right: 0; top: calc(100% + 4px); z-index: 25; max-height: 70vh; overflow-y: auto;
  background: var(--surface); border: 1px solid var(--line); box-shadow: 0 14px 40px rgba(0,0,0,.6); }
.pm-group { padding: 10px 12px 4px; font-size: 10px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }
.pm-item { display: flex; justify-content: space-between; gap: 10px; padding: 8px 12px; font-size: 13px; color: var(--text); }
.pm-item:hover { background: var(--surface-2); }
.pm-item.on { color: var(--text-strong); background: var(--surface-2); box-shadow: inset 2px 0 0 var(--primary); }
.pm-name { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.pm-v { font-family: var(--mono); font-size: 12px; color: var(--muted-2); white-space: nowrap; }
.pm-tail { display: block; padding: 9px 12px; border-top: 1px solid var(--border); font-size: 13px; color: var(--primary); }
.pm-tail:hover { background: var(--surface-2); }
.pm-note { padding: 10px 12px; font-size: 13px; color: var(--muted-2); }

.main { position: relative; min-width: 0; }
.page { position: relative; z-index: 1; padding: 24px 32px 96px; max-width: 1480px; }

.page-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; margin-bottom: 16px; }
/* "Back to …" above a page's title (shell.back_link; assets/nav.js names the page before): a pixel arrow in the
   colour of the section it goes back to (--c), then where. */
.back-row { margin: -6px 0 14px; }
.back-link { --c: var(--text); display: inline-flex; align-items: center; gap: 8px; max-width: 100%; height: 28px;
  padding: 0 11px 0 9px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface);
  font-size: 13px; line-height: 1; color: var(--muted-2); white-space: nowrap; }
.back-link:hover { border-color: var(--c); background: var(--surface-2); }
.back-link:focus-visible { outline: 1px solid var(--c); outline-offset: 2px; }
.back-arrow { flex: none; width: 14px; height: 10px; background: var(--c); transition: transform .12s ease;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 7 5' shape-rendering='crispEdges'%3E%3Cpath d='M2 0h1v1H2zM1 1h2v1H1zM0 2h7v1H0zM1 3h2v1H1zM2 4h1v1H2z'/%3E%3C/svg%3E") center / 14px 10px no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 7 5' shape-rendering='crispEdges'%3E%3Cpath d='M2 0h1v1H2zM1 1h2v1H1zM0 2h7v1H0zM1 3h2v1H1zM2 4h1v1H2z'/%3E%3C/svg%3E") center / 14px 10px no-repeat; }
.back-link:hover .back-arrow { transform: translateX(-2px); }
.back-text { display: inline-flex; align-items: baseline; gap: 6px; min-width: 0; }
.back-name { overflow: hidden; text-overflow: ellipsis; font-weight: 500; color: var(--text-strong); }
.back-sub { flex: none; }
.back-sep { margin-right: 6px; color: var(--muted); }
@media (prefers-reduced-motion: reduce) { .back-arrow { transition: none; } }
.page-title { margin: 0 0 4px; font-size: 18px; font-weight: 600; color: var(--text-strong); }
.muted { color: var(--muted); }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.small { font-size: 12px; }
.mono { font-family: var(--mono); }
.strong { font-weight: 600; color: var(--text-strong); }
.pos { color: var(--pos); }
.neg { color: var(--neg); }

.btn {
  background: var(--surface); color: var(--text); border: 1px solid var(--border); border-radius: var(--radius);
  padding: 8px 14px; font: 500 13px var(--font); cursor: pointer;
}
.btn:hover { border-color: var(--primary); color: var(--text-strong); }
.btn:disabled, .btn:disabled:hover { opacity: .45; cursor: not-allowed; filter: none; border-color: var(--border); }
.btn.btn-primary:disabled:hover { border-color: var(--primary); color: #fff; }

/* ---------- tabs ---------- */
.tabs-parent { margin-bottom: 20px; }
.tabs { background: var(--surface) !important; border: 1px solid var(--border) !important; padding: 4px; display: flex; flex-wrap: wrap; height: auto !important; }
.tab {
  background: transparent !important; color: var(--muted) !important; border: none !important;
  padding: 7px 14px !important; font-size: 13px; font-weight: 500; width: auto !important; flex: 0 0 auto !important;
}
.tab:hover { color: var(--text) !important; }
.tab--active { background: var(--bg) !important; color: var(--text-strong) !important; border: none !important; }

/* ---------- KPI tiles ---------- */
.kpi-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 12px; margin-bottom: 16px; }
.kpi { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 14px 16px; }
.kpi-label { font-size: 12px; color: var(--muted); margin-bottom: 6px; }
.kpi-value { font-family: var(--mono); font-size: 22px; font-weight: 500; color: var(--text-strong); }
.kpi-value.pos { color: var(--pos); }
.kpi-value.neg { color: var(--neg); }
.kpi-sub { font-family: var(--mono); font-size: 11px; color: var(--muted); margin-top: 4px; }

/* ---------- cards ---------- */
.card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); margin-bottom: 16px; min-width: 0; }
.card-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; padding: 16px 20px 0; }
.card-title { margin: 0; font-size: 14px; font-weight: 600; color: var(--text-strong); }
.card-desc { margin: 4px 0 0; font-size: 12px; color: var(--muted); max-width: 72ch; }
.card-body { padding: 12px 20px 16px; }
.grid-2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.grid-2 > .card { margin-bottom: 16px; }

/* ---------- alerts ---------- */
.alert { border: 1px solid; border-radius: var(--radius); padding: 10px 14px; margin-bottom: 10px; }
.alert-title { font-weight: 500; font-size: 13px; }
.alert-detail { font-size: 12px; color: var(--muted); margin-top: 2px; }
.alert-warn { border-color: rgba(224,163,57,.45); background: rgba(224,163,57,.06); }
.alert-warn .alert-title { color: var(--warn); }
.alert-info { border-color: rgba(58,142,230,.45); background: rgba(58,142,230,.06); }
.alert-info .alert-title { color: var(--primary); }
.alert-error { border-color: rgba(229,72,77,.5); background: rgba(229,72,77,.07); }
.alert-error .alert-title { color: var(--neg); }
.alert-ok { border-color: rgba(34,163,90,.5); background: rgba(34,163,90,.07); }
.alert-ok .alert-title { color: var(--pos); }

/* ---------- tables ---------- */
.table-wrap { overflow-x: auto; }
.data-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.data-table th { text-align: left; font-weight: 500; font-size: 12px; color: var(--muted); padding: 8px 12px; border-bottom: 1px solid var(--border); white-space: nowrap; }
.data-table td { padding: 10px 12px; border-bottom: 1px solid var(--border); white-space: nowrap; }
.data-table tbody tr:hover { background: var(--surface-2); }
.data-table .num { text-align: right; font-family: var(--mono); }
.ticker { font-family: var(--mono); font-weight: 500; color: var(--text-strong); }
a.ticker-link:hover { color: var(--primary); text-decoration: underline; text-underline-offset: 3px; }
/* Rows of holdings open the stock page (assets/stock-links.js marks them): the ticker turns blue and a › shows at the
   row's end (next to the ticker on phones, where the end is scrolled out of sight), faint until the row is pointed at
   or its link has the keyboard focus. The › is decoration: screen readers skip it ("/ ''"). */
.data-table tbody tr.stock-row { cursor: pointer; }
.data-table tbody tr.stock-row:focus-within { background: var(--surface-2); }
.data-table tr.stock-row:hover a.ticker-link,
.data-table tr.stock-row:focus-within a.ticker-link { color: var(--primary); }
.data-table.has-stock-rows > thead > tr > th:last-child,
.data-table.has-stock-rows > tbody > tr > td:last-child { padding-right: 30px; }
.data-table tr.stock-row > td:last-child { position: relative; }
.data-table tr.stock-row > td:last-child::after { content: "›"; content: "›" / ""; position: absolute; right: 12px;
  top: 50%; transform: translateY(-55%); font: 18px/1 var(--font); color: var(--muted); opacity: .5;
  pointer-events: none; }
.data-table tr.stock-row:hover > td:last-child::after,
.data-table tr.stock-row:focus-within > td:last-child::after { color: var(--primary); opacity: 1; }
@media (max-width: 760px) {
  .data-table.has-stock-rows > thead > tr > th:last-child,
  .data-table.has-stock-rows > tbody > tr > td:last-child { padding-right: 12px; }
  .data-table tr.stock-row > td:last-child::after { content: none; }
  .data-table tr.stock-row a.ticker-link::after { content: "›"; content: "›" / ""; margin-left: 6px;
    font: 16px/1 var(--font); color: var(--muted); }
}
a.ticker-link:focus-visible { outline: 1px solid var(--primary); outline-offset: 2px; }
/* Charts by holding (components.stock_links): the names on the axis are links too */
.js-plotly-plot text.stock-tick { cursor: pointer; pointer-events: all; }
.js-plotly-plot text.stock-tick:hover { fill: var(--primary) !important; text-decoration: underline; }
.js-plotly-plot.stock-hover .nsewdrag { cursor: pointer !important; }
.pill { font-size: 11px; padding: 2px 8px; border-radius: 10px; border: 1px solid currentColor; }
.minibar { position: relative; width: 84px; height: 8px; background: var(--surface-2); }
.minibar-fill { position: absolute; top: 0; height: 100%; }
.minibar-fill.pos { background: var(--pos); }
.minibar-fill.neg { background: var(--neg); }

/* segmented Long/Short toggle */
.segmented { display: flex; background: var(--bg); border: 1px solid var(--border); padding: 2px; }
.segmented label { padding: 4px 12px; font-size: 12px; color: var(--muted); cursor: pointer; }
.segmented input { display: none; }
.segmented label:has(input:checked) { background: var(--surface-2); color: var(--text-strong); }

/* ---------- section heading + master/detail (Idiosyncratic Risk tab) ---------- */
.section-head { margin: 4px 0 14px; }
.section-title { margin: 0; font-size: 16px; font-weight: 600; color: var(--text-strong); }
.split { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: 16px; align-items: start; }
.split-right { background: var(--bg); border: 1px solid var(--border); border-radius: var(--radius); padding: 14px 16px; }
.split .data-table th, .split .data-table td { padding: 8px 8px; }
.split .minibar { width: 56px; }
.row-click { cursor: pointer; }
.data-table tbody tr.selected { background: var(--surface-2); box-shadow: inset 2px 0 0 var(--primary); }
.detail-head { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; }
.detail-ticker { font-size: 15px; }
.detail-link { margin-left: auto; font-size: 12px; color: var(--primary); white-space: nowrap; }
.detail-link:hover { text-decoration: underline; text-underline-offset: 3px; }
.detail-sub { font-size: 12px; font-weight: 600; color: var(--muted); text-transform: uppercase; letter-spacing: .1em; margin: 14px 0 4px; }
.tile-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 8px; }
.tile { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 10px 12px; }
.tile-label { font-size: 10px; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); margin-bottom: 4px; }
.tile-value { font-family: var(--mono); font-size: 17px; font-weight: 500; color: var(--text-strong); }
.tile-value.pos { color: var(--pos); }
.tile-value.neg { color: var(--neg); }
.tile-sub { font-family: var(--mono); font-size: 10px; color: var(--muted); margin-top: 3px; }

/* ---------- Portfolio Builder (views/builder.py) ---------- */
.control-row { display: flex; flex-wrap: wrap; gap: 16px 24px; margin-top: 14px; align-items: flex-start; }
.control-label { font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); margin-bottom: 6px; }
.segmented.wrap { flex-wrap: wrap; display: inline-flex; }
.segmented { display: inline-flex; }
.num-input {
  width: 92px; background: var(--bg); color: var(--text-strong); border: 1px solid var(--border);
  border-radius: var(--radius); padding: 6px 8px; font: 500 13px var(--mono);
}
.num-input:focus { outline: none; border-color: var(--primary); }
.check label { font-size: 13px; color: var(--text); display: flex; align-items: center; gap: 6px; cursor: pointer; }
.check input { accent-color: var(--primary); }
.grid-2.wide-left { grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); }
.pb-at-start .pb-section, .pb-in-goal .pb-start-screen { display: none; }
.pb-start-screen { margin-top: 10px; }
.pb-start-line { margin: 0 0 16px; font-size: 13.5px; max-width: 80ch; line-height: 1.5; }
/* The first screen: one row per goal, with where the portfolio stands on it today (views/builder.py › readout). */
.pb-goal-list { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); }
.pb-goal-row {
  display: grid; grid-template-columns: minmax(200px, 1fr) minmax(0, 1.35fr) 16px; gap: 28px; align-items: center;
  width: 100%; text-align: left; cursor: pointer; padding: 18px 20px; background: none; border: 0;
  border-radius: 0; font: inherit; color: inherit;
}
.pb-goal-row + .pb-goal-row { border-top: 1px solid var(--border); }
.pb-goal-row:hover { background: var(--surface-2); }
.pb-goal-row:focus-visible { outline: none; background: var(--surface-2); box-shadow: inset 0 0 0 1px var(--primary); }
.pb-goal-title { font-size: 15px; font-weight: 600; color: var(--text-strong); margin-bottom: 4px; }
.pb-goal-row:hover .pb-goal-title, .pb-goal-row:focus-visible .pb-goal-title { color: var(--primary); }
.pb-goal-line { font-size: 13px; line-height: 1.5; color: var(--muted); max-width: 46ch; }
.pb-goal-stats { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); gap: 24px; align-items: start; }
.pb-goal-go { color: var(--muted); font-size: 20px; line-height: 1; }
.pb-goal-row:hover .pb-goal-go, .pb-goal-row:focus-visible .pb-goal-go { color: var(--primary); }
.pb-r-label { font-size: 12px; color: var(--muted); margin-bottom: 4px; white-space: nowrap; overflow: hidden;
  text-overflow: ellipsis; }
.pb-r-line { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.pb-r-value { font: 500 20px var(--mono); color: var(--text-strong); }
.pb-r-value2 { font: 500 15px var(--mono); color: var(--text-strong); }
.pb-r-value2.pos { color: var(--pos); }
.pb-r-value2.neg { color: var(--neg); }
.pb-r-cap { font: 11px var(--mono); color: var(--muted); margin-top: 2px; }
.pb-bar { position: relative; height: 4px; margin-top: 9px; background: var(--border); }
.pb-bar-fill { position: absolute; left: 0; top: 0; bottom: 0; background: var(--primary); }
.pb-bar-sp { position: absolute; top: -4px; width: 2px; height: 12px; margin-left: -1px; background: var(--bench); }
/* Inside a goal */
.pb-section-head { margin-bottom: 14px; }
.pb-back { margin-bottom: 6px; }
.pb-section-head .section-title { margin: 0 0 4px; }
.pb-goal-desc { margin: 0; font-size: 13.5px; }
.pb-body { display: grid; grid-template-columns: minmax(0, 1fr) 290px; gap: 16px; align-items: start; }
.pb-side { position: sticky; top: 76px; background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius); }
.pb-board-head { padding: 12px 14px 10px; border-bottom: 1px solid var(--border); }
.pb-side-title { font-size: 14px; font-weight: 600; color: var(--text-strong); margin-bottom: 2px; }
.pb-tile {
  position: relative; display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: 12px;
  grid-template-areas: "label info" "value sub" "delta sub"; padding: 11px 14px;
}
.pb-tile + .pb-tile { border-top: 1px solid var(--border); }
.pb-tile .kpi-label { grid-area: label; margin: 0 0 3px; }
.pb-tile .kpi-value { grid-area: value; font-size: 20px; line-height: 1.25; }
.pb-tile .pb-delta { grid-area: delta; margin-top: 1px; }
.pb-tile .kpi-sub:not(.pb-delta) { grid-area: sub; align-self: end; text-align: right; margin: 0; line-height: 1.55; }
.pb-next { margin: 0; padding: 11px 14px 12px; border-top: 1px solid var(--border); line-height: 1.5; }
.pb-table td { vertical-align: middle; }
.pb-table .pb-prop { width: 150px; }
.pb-box { display: inline-flex; align-items: center; gap: 4px; }
.pb-box > .pb-input { flex: none; width: 92px; }
.pb-box > .pb-input .dash-input-element { width: 100%; }
.pb-box > .pb-unit { flex: none; }
.pb-unit {
  width: 30px; height: 28px; padding: 0; background: none; color: var(--muted); border: 1px solid var(--line);
  border-radius: var(--radius); font: 500 12px var(--mono); cursor: pointer;
}
.pb-unit:hover, .pb-unit:focus-visible { color: var(--primary); border-color: var(--primary); outline: none; }
.pb-testing { margin-left: 6px; padding: 0 6px; border: 1px solid rgba(155,122,230,.5); border-radius: 9px;
  color: var(--violet); font: 11px var(--font); vertical-align: 1px; }
.pb-act-cell { width: 1%; white-space: nowrap; text-align: right; }
.pb-table .pb-act { margin: 0; font-size: 12px; }
.pb-act:hover { color: var(--neg); }
.pb-test { margin-bottom: 12px; }
.pb-test > summary { list-style: none; display: inline-block; cursor: pointer; }
.pb-test > summary::-webkit-details-marker { display: none; }
.pb-test[open] > summary { border-color: var(--primary); color: var(--primary); }
.pb-test-body { margin-top: 10px; padding: 12px 14px; background: var(--surface-2); border: 1px solid var(--border);
  border-radius: var(--radius); max-width: 460px; }
.pb-test-row { display: flex; gap: 8px; }
.pb-q { flex: 1; min-width: 0; }
.pb-q input, .pb-q .dash-input-element, input.pb-q {
  width: 100%; background: var(--bg); color: var(--text-strong); border: 1px solid var(--line);
  border-radius: var(--radius); padding: 5px 8px; font: 13px var(--font);
}
.pb-q input:focus, input.pb-q:focus, .pb-q .dash-input-element:focus { outline: none; border-color: var(--primary); }
.pb-test-msg:empty { display: none; }
.pb-test-msg { margin-top: 8px; font-size: 13px; color: var(--text); }
.pb-test-msg .alert { margin: 0; }
.pb-ask { display: none; margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--border); }
.pb-ask.open { display: block; }
.pb-ask-text { margin: 0 0 10px; font-size: 13px; line-height: 1.5; color: var(--text-strong); }
.pb-ask-btns { display: flex; gap: 8px; flex-wrap: wrap; }
.pb-test-note { margin: 10px 0 0; }
.pb-input .dash-input-element, .pb-input input {
  width: 84px; background: var(--surface-2); color: var(--text-strong); border: 1px solid var(--line);
  border-radius: var(--radius); padding: 5px 8px; font: 500 13px var(--mono); text-align: right;
}
.pb-input input:focus, .pb-input .dash-input-element:focus { outline: none; border-color: var(--primary); }
/* A row the member changed: a blue edge, and its box outlined (the Change $ cell holds a number only then; the %
   Change of a stock left alone moves when new money comes in). */
.pb-table tr:has(> td.pb-usd-cell > span) > td:first-child { box-shadow: inset 2px 0 0 var(--primary); }
.pb-table tr:has(> td.pb-usd-cell > span) .pb-input input,
.pb-table tr:has(> td.pb-usd-cell > span) .pb-input .dash-input-element { border-color: rgba(58,142,230,.7); }
.pb-cash-row td { border-top: 1px solid var(--border); }
.pb-cash-row #pb-cash { padding-right: 22px; }
.pb-summary { margin: 14px 0 0; font-size: 13px; color: var(--text); line-height: 1.55; }
.pb-settings { margin-top: 12px; }
.pb-settings > summary { cursor: pointer; color: var(--primary); font-size: 13px; }
.pb-delta .pos { color: var(--pos); }
.pb-delta .neg { color: var(--neg); }
.pb-info { grid-area: info; justify-self: end; margin: 0; }
.pb-info > summary { list-style: none; cursor: pointer; color: var(--muted); font-size: 12px; width: fit-content; }
.pb-info > summary::-webkit-details-marker { display: none; }
.pb-info > summary:hover, .pb-info[open] > summary { color: var(--primary); }
.pb-info > div {
  position: absolute; z-index: 20; top: calc(100% - 4px); right: 8px; width: 290px; max-width: 86vw; padding: 12px 14px;
  background: var(--surface-2); border: 1px solid var(--line); border-radius: var(--radius);
  box-shadow: 0 8px 24px rgba(0,0,0,.45); font-size: 12px; line-height: 1.5; color: var(--text);
}
.pb-info p { margin: 6px 0; }
.pb-info .mono { font-family: var(--mono); color: var(--muted); }
@media (max-width: 1100px) {
  .pb-goal-row { grid-template-columns: minmax(0, 1fr) 16px; gap: 14px 20px; }
  .pb-goal-stats { grid-row: 2; grid-column: 1; }
  .pb-goal-go { grid-row: 1 / 3; grid-column: 2; }
}
/* Narrower than about 1200 px the table (with its unit and Sell columns) needs the whole width: Now → Proposed goes
   above it, its tiles side by side. */
@media (max-width: 1200px) {
  .pb-body { grid-template-columns: minmax(0, 1fr); }
  .pb-side { position: static; order: -1; }
  .pb-tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); }
  .pb-tile + .pb-tile { border-top: 0; }
  .pb-tile { border-bottom: 1px solid var(--border); border-right: 1px solid var(--border); margin: 0 -1px -1px 0; }
}
@media (max-width: 640px) {
  .pb-goal-row { padding: 16px 14px; }
  .pb-goal-stats { gap: 16px; }
  .pb-r-value { font-size: 18px; }
  .pb-r-label { white-space: normal; }
  .pb-table thead { display: none; }
  .pb-table, .pb-table tbody { display: block; }
  .pb-table tr { display: grid; grid-template-columns: 1fr 1fr; gap: 4px 12px; padding: 10px 0 10px 10px;
    border-bottom: 1px solid var(--border); }
  .pb-table tr:has(> td.pb-usd-cell > span) { box-shadow: inset 2px 0 0 var(--primary); }
  .pb-table tr:has(> td.pb-usd-cell > span) > td:first-child { box-shadow: none; }
  .pb-table td { display: flex; justify-content: space-between; align-items: center; border: 0; padding: 0; }
  .pb-table td:first-child { grid-column: 1; grid-row: 1; }
  .pb-table .pb-act-cell { grid-column: 2; grid-row: 1; justify-content: flex-end; width: auto; }
  .pb-cash-row td:first-child { grid-column: 1 / -1; }
  .pb-cash-row .pb-act-cell { display: none; }
  .pb-table td[data-label]::before { content: attr(data-label); color: var(--muted); font: 12px var(--font); }
  .pb-table .pb-prop { grid-column: 1 / -1; width: auto; }
  .pb-box { flex: 0 1 200px; }
  .pb-box > .pb-input { flex: 1 1 auto; width: auto; min-width: 0; }
  .pb-input .dash-input-element, .pb-input input { width: 100%; }
  .pb-unit { width: 36px; height: 32px; }
  .pb-test-body { max-width: none; }
  .pb-cash-row td { border-top: 0; }
}

/* ---------- Company Research page ---------- */
.research-bar { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 16px; }
.search-row { display: flex; gap: 8px; align-items: center; }
.search-input {
  width: 380px; max-width: 70vw; background: var(--surface); color: var(--text-strong); border: 1px solid var(--border);
  border-radius: var(--radius); padding: 8px 12px; font: 13px var(--font);
}
.search-input:focus { outline: none; border-color: var(--primary); }
.btn-primary { background: var(--primary); border-color: var(--primary); color: #fff; }
.btn-primary:hover { color: #fff; filter: brightness(1.1); }
.link-btn { background: none; border: none; color: var(--muted); padding: 0; margin-bottom: 10px; font: 13px var(--font); cursor: pointer; }
.link-btn:hover { color: var(--primary); }
.ext-link { color: var(--primary); display: inline-block; margin-top: 6px; }
.ext-link:hover { text-decoration: underline; }

.lib-list { display: flex; flex-direction: column; }
.lib-row { display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: 12px 8px;
  border-bottom: 1px solid var(--border); cursor: pointer; flex-wrap: wrap; }
.lib-row:hover { background: var(--surface-2); }
.lib-name { font-weight: 600; color: var(--text-strong); margin-bottom: 2px; }
.score-row { display: flex; gap: 8px; flex-wrap: wrap; justify-content: flex-end; }
.score-row.left { justify-content: flex-start; }
.score { display: flex; flex-direction: column; align-items: center; gap: 3px; }
.score-label { font-size: 9px; letter-spacing: .12em; color: var(--muted); }
.score-box { min-width: 64px; text-align: center; padding: 6px 8px; font: 500 13px var(--mono); color: var(--text-strong);
  border: 1px solid var(--border); background: var(--surface-2); border-radius: var(--radius); }
.score-box.good { background: rgba(34,163,90,.16); border-color: rgba(34,163,90,.5); color: #5fd08f; }
.score-box.bad { background: rgba(229,72,77,.14); border-color: rgba(229,72,77,.5); color: #f0797d; }

.company-card { padding: 16px 20px; }
.company-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; flex-wrap: wrap; }
.company-name { margin: 0 0 4px; font-size: 22px; font-weight: 600; color: var(--text-strong); }
.about { margin-top: 12px; color: var(--text); }
.about summary, .card details summary { cursor: pointer; color: var(--primary); font-size: 13px; }
.about p { max-width: 110ch; line-height: 1.6; }

.grid-3 { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(0, 0.9fr) minmax(0, 1fr); gap: 16px; }
.col-card .card-body { max-height: 640px; overflow-y: auto; }
.kp { border-left: 3px solid var(--muted); padding: 2px 0 2px 12px; margin-bottom: 14px; }
.kp.good { border-left-color: var(--pos); }
.kp.bad { border-left-color: var(--neg); }
.kp-meta { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 4px; }
.kp-text { font-size: 13px; line-height: 1.55; color: var(--text-strong); }
.chip { display: inline-block; font-size: 11px; padding: 1px 8px; border-radius: 10px; background: var(--surface-2);
  border: 1px solid var(--border); color: var(--text); white-space: nowrap; }
.chip.good { color: #5fd08f; border-color: rgba(34,163,90,.5); background: rgba(34,163,90,.1); }
.chip.bad { color: #f0797d; border-color: rgba(229,72,77,.5); background: rgba(229,72,77,.1); }
.chip.neutral { color: var(--text); }
.chip.muted-chip { color: var(--muted); }
.chips { display: flex; flex-wrap: wrap; gap: 6px; }
.legend { display: flex; gap: 10px; }
.legend-item { display: flex; align-items: center; gap: 5px; font-size: 11px; color: var(--muted); }
.dot-s { width: 7px; height: 7px; border-radius: 50%; background: var(--muted); display: inline-block; }
.dot-s.good { background: var(--pos); }
.dot-s.bad { background: var(--neg); }

.call-list { display: flex; flex-direction: column; gap: 6px; }
.call-row { padding: 10px 12px; border: 1px solid var(--border); border-radius: var(--radius); cursor: pointer; background: var(--bg); }
.call-row:hover { border-color: var(--primary); }
.call-row.selected { border-color: var(--primary); box-shadow: inset 3px 0 0 var(--primary); background: var(--surface-2); }
.call-row.unavailable { opacity: .55; cursor: default; }
.call-title { font-weight: 600; color: var(--text-strong); font-size: 13px; margin-bottom: 4px; }
.call-sub { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; }

.flag { display: grid; grid-template-columns: 10px minmax(0, 1fr); gap: 10px; margin-bottom: 14px; }
.flag-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--warn); margin-top: 5px; }
.flag-dot.good { background: var(--pos); }
.flag-dot.bad { background: var(--neg); }
.data-table td .wrap, .data-table td.wrap { white-space: normal; min-width: 280px; max-width: 520px; line-height: 1.5; }

.script { margin-top: 12px; }

.notes { margin: 0; padding-left: 18px; line-height: 1.8; }

/* ---------- small screens ---------- */
@media (max-width: 1000px) {
  .grid-2, .grid-2.wide-left, .grid-3, .split { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 760px) {
  /* Top bar: the mark, the section's name (its menu), a search button and the account. */
  .topbar { padding: 0 12px; gap: 8px; }
  .tb-word, .tb-search-wrap .tb-search, .tb-kbd { display: none; }
  .tb-search-toggle { display: grid; place-items: center; width: 34px; height: 34px; padding: 0; cursor: pointer;
    background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); }
  .topbar.searching .tb-search-wrap .tb-search { display: flex; position: absolute; z-index: 6; left: 12px; right: 12px;
    top: calc((var(--bar-h) - 40px) / 2); width: auto; height: 40px; }
  .topbar.searching .tb-search .dash-input-element { font-size: 16px; }  /* 16px stops phones zooming into it */
  .tb-right { position: static; gap: 8px; }  /* the open search field spans the whole bar */
  .tb-search-toggle, .user-menu { position: relative; z-index: 2; }
  .sec-btn { padding: 6px 8px 6px 12px; font-size: 14px; }
  .sec-menu { position: fixed; top: calc(var(--bar-h) + 2px); left: 8px; right: 8px; min-width: 0; }
  /* A section's sidebar becomes a sticky strip: the portfolio menu, then the tools as a sideways row. */
  .shell { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto 1fr; }  /* the strip, then the page below it */
  .shell.no-side { grid-template-rows: 1fr; }  /* no strip (home, not found): the page is the only row and fills it */
  .sidebar { top: calc(var(--bar-h) + 3px); z-index: 20; height: auto; overflow: visible; border-right: 0;
    border-bottom: 1px solid var(--border); background: var(--bg); }
  .pf-label, .nav-group, .nav-gap, .side-foot { display: none; }
  .pf-picker { margin: 12px 16px 10px; }
  .side-nav { display: flex; gap: 2px; padding: 0 8px; overflow-x: auto; scrollbar-width: none; }
  .side-nav::-webkit-scrollbar { display: none; }
  .nav-link { padding: 10px 10px 11px; font-size: 13px; color: var(--muted-2); white-space: nowrap;
    border-left: 0; border-bottom: 2px solid transparent; }
  .nav-link:hover { background: none; color: var(--text-strong); }
  .nav-link.active { color: var(--text-strong); background: none; border-bottom-color: var(--primary); }
  .page { padding: 16px 16px 96px; }
  .page-head { flex-wrap: wrap; gap: 12px; }  /* the actions (Trade, Refresh prices…) go under the title */
  .page-head > .page-actions { justify-content: flex-start; }
}

/* risk geometry */
.geo-controls { display: flex; flex-wrap: wrap; gap: 8px; justify-content: flex-end; align-items: center; }
.geo-touch-only { display: none; }
.btn.on { border-color: var(--primary); color: var(--primary); }
@media (pointer: coarse) { .geo-touch-only { display: inline-block; } }
@media (max-width: 760px) {
  #geo-graph { height: 460px !important; }
  .geo-card .card-head { flex-wrap: wrap; }  /* the colour / layer switches go under the title */
  .geo-controls { justify-content: flex-start; }
}
.stat-strip { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 12px 24px;
  padding: 4px 0 12px; border-bottom: 1px solid var(--border); margin-bottom: 4px; }
.stat-label { font-size: 11px; text-transform: uppercase; letter-spacing: .04em; color: var(--muted); }
.stat-value { font-family: var(--mono); font-size: 16px; color: var(--text-strong); margin-top: 2px; }
.stat-sub { font-size: 11px; color: var(--muted); }
.swatch { display: inline-block; width: 9px; height: 9px; border-radius: 50%; margin-right: 7px; vertical-align: 0; }
.grid-3.geo-panels { grid-template-columns: minmax(0, 1fr) minmax(0, 0.85fr) minmax(0, 1.2fr); }
@media (max-width: 1100px) { .grid-3.geo-panels { grid-template-columns: minmax(0, 1fr); } }
.var-chips { margin: 12px 0 8px; }
.stat-strip.regimes { grid-template-columns: repeat(3, minmax(0, 1fr)); }

/* ---------- PRISM night sky (views/sky.py, assets/sky.js): opt-in per page, stars only in empty space ---------- */
.sky { position: absolute; left: 0; top: 0; width: 100%; height: 100%; pointer-events: none; z-index: 0; }
/* behind a page's own content (.page is the stacking context), below the top bar; sky.js draws only in its host */
.sky-backdrop { position: fixed; top: calc(var(--bar-h) + 3px); height: calc(100% - var(--bar-h) - 3px); z-index: -1; }

/* ---------- Edit portfolio dialog (views/portfolio_editor.py) ---------- */
.page-actions { display: flex; gap: 8px; flex-wrap: wrap; justify-content: flex-end; }
[data-same-as-back][hidden] { display: none; }  /* nav.js: a link to the page the back link already goes to */
.pe-overlay {
  position: fixed; inset: 0; z-index: 1100; display: none; align-items: flex-start; justify-content: center;
  padding: 48px 16px; overflow-y: auto; background: rgba(5,7,10,.72);
}
.pe-overlay.open { display: flex; }
.pe-dialog {
  position: relative; width: min(920px, 100%); background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius);
  box-shadow: 0 24px 64px rgba(0,0,0,.6); padding: 18px 20px 20px;
}
.pe-stage.hidden { display: none; }
.pe-close { position: absolute; top: 12px; right: 12px; }
.pe-head { margin-bottom: 14px; padding-right: 36px; }
.pe-toolbar { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 14px; }
.pe-toolbar .muted { flex: 1; min-width: 220px; }
.pe-row { display: grid; grid-template-columns: 130px 150px minmax(170px, 1fr) minmax(170px, 1.2fr) 32px; gap: 8px; align-items: center; }
.pe-row + .pe-row { margin-top: 6px; }
.pe-row-head { font-size: 12px; color: var(--muted); padding-bottom: 6px; border-bottom: 1px solid var(--border); margin-bottom: 8px; }
.pe-rows { min-height: 40px; }
.pe-field { width: 100%; height: 36px; background: var(--bg); color: var(--text-strong); border: 1px solid var(--border); border-radius: var(--radius); }
.pe-field .dash-input-element { padding: 0 10px; font: 13px var(--font); }
.pe-ticker .dash-input-element { font-family: var(--mono); text-transform: uppercase; }
.pe-amount .dash-input-element { font-family: var(--mono); text-align: right; }
.pe-field:has(:focus-visible) { outline: none; }
.pe-sector, .pe-history { font-size: 13px; }
.pe-info { display: flex; justify-content: space-between; gap: 8px; min-width: 0; font-size: 12px; }
.pe-name { color: var(--text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pe-price { font-family: var(--mono); color: var(--muted); white-space: nowrap; }
.pe-bad { color: var(--warn); }
.pe-remove { width: 32px; height: 32px; background: none; border: 1px solid transparent; border-radius: var(--radius);
  color: var(--muted); font-size: 18px; cursor: pointer; }
.pe-remove:hover { color: var(--neg); border-color: var(--border); }
.pe-add-row { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin: 12px 0 14px; flex-wrap: wrap; }
.pe-total { color: var(--text); font-size: 13px; }
.pe-restore-group { display: flex; gap: 8px; align-items: center; margin-bottom: 14px; }
.pe-history { width: 260px; }
#pe-status .alert { margin: 0 0 12px; }
.pe-foot { display: flex; justify-content: flex-end; gap: 8px; padding-top: 14px; border-top: 1px solid var(--border); }
#pe-flash .alert { margin-bottom: 12px; }
@media (max-width: 760px) {
  .pe-overlay { padding: 0; }
  .pe-dialog { min-height: 100%; border: none; border-radius: 0; }
  .pe-row { grid-template-columns: 1fr 1fr 32px; }
  .pe-row > :nth-child(1) { grid-column: 1; grid-row: 1; }  /* ticker | dollars | remove, then sector, then company */
  .pe-row > :nth-child(2) { grid-column: 2; grid-row: 1; }
  .pe-row > :nth-child(5) { grid-column: 3; grid-row: 1; }
  .pe-row > :nth-child(3) { grid-column: 1 / 4; grid-row: 2; }
  .pe-row > :nth-child(4) { grid-column: 1 / 4; grid-row: 3; }
  .pe-row-head { display: none; }
  .pe-row + .pe-row { margin-top: 0; padding-top: 10px; border-top: 1px solid var(--border); }
  .pe-history { width: 100%; }
}
.pe-amount .dash-input-stepper { display: none; }  /* +/- 1 steps are no use for dollar amounts */
/* The club's editor: a snapshot of the broker account (overlay class pe-club; views/portfolio_editor.py) */
.pe-overlay:not(.pe-club) .pe-only-club, .pe-overlay.pe-club .pe-only-member { display: none; }
.pe-field.hidden { display: none; }
.pe-row-club { grid-template-columns: 96px 100px 112px 112px minmax(140px, 1fr) minmax(140px, 1fr) 32px; }
.pe-date .dash-input-element { font-family: var(--mono); }
.pe-form { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 16px; margin-bottom: 14px; }
.pe-form .mp-label { margin-top: 0; }
.pe-form-cash { margin: 4px 0 14px; padding-top: 12px; border-top: 1px solid var(--border); }
.pe-form-cash .pe-field { max-width: 240px; }
.pe-form-field { margin-bottom: 10px; }
.pe-hint { margin-top: 4px; }
.pe-start { grid-column: 1 / -1; font-size: 13px; color: var(--text); }
.pe-start label { display: flex; gap: 6px; align-items: flex-start; cursor: pointer; }
.pe-preview:empty { display: none; }
.pe-preview { margin: 0 0 14px; padding: 12px 14px; background: var(--bg); border: 1px solid var(--border);
  border-radius: var(--radius); }
.pe-preview-title { margin: 0 0 10px; font-size: 14px; font-weight: 600; color: var(--text-strong); }
.pe-preview .alert { margin: 0 0 10px; }
.pe-changes { margin: 0 0 12px; padding-left: 18px; line-height: 1.7; font-size: 13px; color: var(--text); }
.pe-totals { display: grid; gap: 4px; margin-bottom: 8px; font-size: 13px; }
.pe-totals > div { display: flex; justify-content: space-between; gap: 12px; padding: 3px 0;
  border-bottom: 1px solid var(--border); }
.pe-totals .mono { color: var(--text-strong); white-space: nowrap; }
@media (max-width: 760px) {
  .pe-row-club { grid-template-columns: 1fr 1fr 32px; }  /* ticker | shares | remove, cost | bought, sector, company */
  .pe-row-club > :nth-child(1) { grid-column: 1; grid-row: 1; }
  .pe-row-club > :nth-child(2) { grid-column: 2; grid-row: 1; }
  .pe-row-club > :nth-child(7) { grid-column: 3; grid-row: 1; }
  .pe-row-club > :nth-child(3) { grid-column: 1; grid-row: 2; }
  .pe-row-club > :nth-child(4) { grid-column: 2 / 4; grid-row: 2; }
  .pe-row-club > :nth-child(5) { grid-column: 1 / 4; grid-row: 3; }
  .pe-row-club > :nth-child(6) { grid-column: 1 / 4; grid-row: 4; }
  .pe-form { grid-template-columns: minmax(0, 1fr); }
  .pe-form-cash .pe-field { max-width: none; }
  .pe-foot { flex-wrap: wrap; }
}

/* ---------- Home (views/home.py): three doors, then the Club (Admin, Beta Testing) strips ---------- */
/* The home page's sky (.home-sky, assets/home-sky.js): pixel art behind the whole page, under the see-through top bar. */
.page:has(> .home) { max-width: none; }
.home { position: relative; max-width: 1080px; margin: 0 auto; padding: 64px 0 48px; }
.home > :not(.home-sky) { position: relative; z-index: 1; }
.home-sky { position: fixed; left: 0; top: 0; z-index: 0; width: 100vw; height: 100vh; overflow: hidden; pointer-events: none;
  background: #020306; }   /* far out space: near black, before and behind the drawn layers */
.home-sky-deep { opacity: 0; transition: opacity 1.2s steps(6); }   /* the far and middle layers, shown once drawn */
.home-sky-deep.on { opacity: 1; }
@keyframes home-sky-glow { from { opacity: .5; } to { opacity: 1; } }
.home-head { text-align: center; }
.home-title { margin: 0; font-size: 32px; line-height: 1.15; font-weight: 600; letter-spacing: -.015em; color: var(--text-strong); }
.home-lede { margin: 12px auto 0; max-width: 34em; color: var(--muted-2); font-size: 15px; line-height: 1.55; }
.home-doors { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; margin-top: 36px; }
.door { position: relative; display: flex; flex-direction: column; gap: 12px; min-height: 252px; padding: 24px 24px 18px;
  color: inherit; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius);
  transition: background-color .2s, border-color .2s; }
.door::before {  /* the top edge, in the section's colour */
  content: ""; position: absolute; left: -1px; right: -1px; top: -1px; height: 2px; background: var(--c); }
.door:hover { background: #151922; border-color: var(--line); }
.door:focus-visible { outline: 2px solid var(--c); outline-offset: 3px; }
.door-name { margin: 4px 0 0; font-size: 20px; line-height: 1.2; font-weight: 600; letter-spacing: -.01em; color: var(--text-strong); }
.door-note { margin-left: 2px; font-size: 12px; font-weight: 400; letter-spacing: 0; color: var(--muted-2); white-space: nowrap; }
.door-text { margin: 0; max-width: 32em; color: var(--muted-2); font-size: 13px; line-height: 1.55; }
.door-list { margin: 2px 0 0; padding: 0; list-style: none; display: grid; gap: 6px; font-size: 13px; color: var(--text); }
.door-list li::before { content: ""; display: inline-block; width: 4px; height: 4px; margin: 0 10px 2px 0; background: var(--c); }
.door-foot { margin-top: auto; padding-top: 14px; display: flex; justify-content: space-between; align-items: center; gap: 12px;
  border-top: 1px solid var(--border); font-size: 12px; color: var(--muted-2); }
.door-status { display: flex; align-items: center; gap: 10px; min-width: 0; }
.door-ticks + span { white-space: nowrap; }
.door-ticks { display: inline-flex; gap: 3px; flex-shrink: 0; }
.door-ticks i { width: 6px; height: 6px; background: var(--line); }
.door-ticks i.on { background: var(--c); }
.door-go { flex-shrink: 0; color: var(--text-strong); font-weight: 500; white-space: nowrap; }
.door:hover .door-go, .door:focus-visible .door-go { color: var(--c); }
@media (min-width: 761px) and (max-width: 900px) {  /* too narrow beside the name: on the icon's line, so the doors stay level */
  .door-note { position: absolute; top: 28px; right: 24px; margin: 0; }
}
.home-strip { margin-top: 18px; display: flex; align-items: center; flex-wrap: wrap; gap: 14px 22px; padding: 14px 20px;
  background: rgba(18,21,28,.72); border: 1px solid var(--border); border-radius: var(--radius); }
.home-strip + .home-strip { margin-top: 10px; }
.strip-name { display: inline-flex; align-items: center; gap: 10px; font-weight: 600; color: var(--text-strong); }
.strip-text { color: var(--muted-2); font-size: 13px; }
.strip-links { margin-left: auto; display: flex; flex-wrap: wrap; gap: 8px 18px; font-size: 13px; }
.strip-links a { color: var(--text); }
.strip-links a:hover { color: var(--text-strong); text-decoration: underline; }
.home-strip.beta { border-color: rgba(224,163,57,.6); }  /* testers only, like the Lab preview's banner */
@media (prefers-reduced-motion: reduce) { .door, .home-sky-deep { transition: none; } }

/* ---------- Research home (views/research_home.py), like the Learning Lab's home ---------- */
.rh-hero { position: relative; overflow: hidden; margin-bottom: 22px; padding: 34px 36px; border: 1px solid var(--border);
  border-radius: var(--radius);
  background: radial-gradient(120% 80% at 85% 120%, rgba(58,142,230,.16), transparent 60%),
    linear-gradient(180deg, var(--surface) 0%, #131729 100%); }
.rh-title { margin: 0; font-size: 28px; font-weight: 600; color: var(--text-strong); }
.rh-lede { margin: 8px 0 18px; max-width: 620px; color: var(--muted-2); font-size: 14px; line-height: 1.55; }
.rh-search { display: flex; align-items: center; gap: 10px; max-width: 520px; height: 42px; padding: 0 12px; cursor: text;
  background: var(--bg); border: 1px solid var(--line); border-radius: var(--radius); }
.rh-search:focus-within { border-color: var(--primary); }
.rh-search .dash-input-element { font-size: 14px; }
.rh-label { margin: 26px 0 10px; font-size: 10px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase;
  color: var(--muted); }
.rh-hero + .rh-label { margin-top: 0; }
.rh-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.rh-tool { display: flex; flex-direction: column; gap: 10px; min-height: 150px; margin: 0; padding: 18px 20px;
  border-left: 2px solid var(--primary); color: inherit; }
a.rh-tool:hover { background: #151922; }
.rt-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.rt-name { font-size: 15px; font-weight: 600; color: var(--text-strong); }
.rt-arrow { color: var(--muted-2); }
a.rh-tool:hover .rt-arrow { color: var(--primary); }
.rt-text { margin: 0; color: var(--muted-2); font-size: 13px; line-height: 1.5; }
.rt-foot { margin-top: auto; font-size: 12px; color: var(--muted-2); }
.rh-tool.soon { background: transparent; border-style: dashed; border-left-color: var(--line); }
.rh-tool.soon .rt-name { color: var(--muted-2); }
@media (max-width: 1000px) { .rh-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* The sample-portfolio banner and the page head's portfolio line (Workspace, Club) */
.ws-banner { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 12px 14px;
  margin-bottom: 16px; padding: 12px 16px; font-size: 13px; border: 1px solid rgba(58,142,230,.45);
  background: rgba(58,142,230,.07); border-radius: var(--radius); }
.ws-banner strong { color: var(--text-strong); }
.pf-ctx { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; margin-top: 6px; font-size: 13px; color: var(--muted-2); }
.pf-ctx-name { font-weight: 600; color: var(--text-strong); }
.pf-ctx .badge { margin: 0; }

/* ---------- Trades tab (views/trade.py); the trade page and its picker: assets/trade.css ---------- */
.tr-order { display: flex; align-items: center; gap: 10px; white-space: nowrap; }
.mp-rename.hidden, #mp-cash-row.hidden { display: none; }
.tr-note { max-width: 320px; white-space: normal; }
.btn-sm { padding: 3px 10px; font-size: 12px; }
.warn-text { color: var(--warn); }
.acct-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 12px 18px; }
.acct-item .mono { font-size: 15px; color: var(--text-strong); margin-top: 2px; }
.acct-item .mono.neg { color: var(--neg); }
@media (max-width: 760px) {
  .tr-history th:nth-child(5), .tr-history td:nth-child(5),
  .tr-history th:nth-child(7), .tr-history td:nth-child(7) { display: none; }  /* price, cash after */
  .tr-note { max-width: 180px; }
}
/* the club's History tab (views/club_history.py) */
.ch-table td { vertical-align: top; }
.ch-changes { display: flex; flex-direction: column; gap: 4px; }
.ch-restored { color: var(--primary); }
.ch-when { display: flex; align-items: flex-start; gap: 10px; }
.ch-current { color: var(--primary); }
@media (max-width: 760px) {
  .ch-table td:first-child { white-space: normal; min-width: 110px; }
  .ch-when { flex-direction: column; gap: 4px; }
}

/* ---------- My portfolios (views/members.py) ---------- */
.mp-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 16px; align-items: start; }
.mp-grid > .card { margin-bottom: 0; }
.mp-new { max-width: 640px; }
.mp-card { padding: 16px 18px; display: flex; flex-direction: column; gap: 12px; }
.mp-card-head { display: flex; flex-direction: column; gap: 4px; }
.mp-title { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.mp-name { font-size: 15px; font-weight: 600; color: var(--text-strong); }
.mp-name:hover { color: var(--primary); }
.mp-stats { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.mp-stats .kpi-value { font-size: 18px; }
.mp-actions { display: flex; gap: 8px; flex-wrap: wrap; }
.mp-delete:hover { border-color: var(--neg); color: var(--neg); }
.mp-arch { margin-top: 20px; }
.mp-arch-head { display: inline-flex; align-items: center; gap: 8px; padding: 6px 0; cursor: pointer; list-style: none;
  font-size: 13px; font-weight: 500; color: var(--muted-2); }
.mp-arch-head::-webkit-details-marker { display: none; }
.mp-arch-head:hover, .mp-arch[open] > .mp-arch-head { color: var(--text-strong); }
.mp-arch-head .caret { transform: rotate(-90deg); }
.mp-arch[open] > .mp-arch-head .caret { transform: none; }
.mp-arch-list { margin-top: 8px; border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface); }
.mp-arch-row { display: flex; align-items: center; gap: 16px; padding: 12px 18px; }
.mp-arch-row + .mp-arch-row { border-top: 1px solid var(--border); }
.mp-arch-who { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.mp-arch-value { font-family: var(--mono); font-size: 14px; color: var(--text-strong); }
.mp-arch-row .mp-actions { flex-wrap: nowrap; }
@media (max-width: 760px) {
  .mp-arch-row { flex-wrap: wrap; gap: 10px; padding: 12px 14px; }
  .mp-arch-who { flex-basis: 100%; }
  .mp-arch-row .mp-actions { margin-left: auto; }
}
.mp-rename { display: flex; gap: 8px; }
.mp-rename-input { flex: 1; }
.mp-form { display: flex; flex-direction: column; }
.mp-form > .btn { align-self: flex-start; margin-top: 14px; }
.mp-label { display: block; margin: 12px 0 6px; font-size: 12px; font-weight: 500; color: var(--text); }
.mp-kinds { display: flex; flex-direction: column; gap: 8px; }
.mp-kinds .dash-options-list-option { display: flex; gap: 10px; align-items: flex-start; padding: 10px 12px; margin: 0;
  border: 1px solid var(--border); border-radius: var(--radius); cursor: pointer; background: var(--bg); }
.mp-kinds .dash-options-list-option.selected { border-color: var(--primary); background: rgba(58,142,230,.06); }
.mp-kind > span { display: flex; flex-direction: column; gap: 2px; }
.mp-kind-input { margin-top: 3px; accent-color: var(--primary); }
#mp-status .alert { margin: 12px 0 0; }
.mp-invite { max-width: 720px; }
.mp-lead { margin: 0 0 10px; line-height: 1.55; }
.mp-list { margin: 0 0 16px; padding-left: 18px; line-height: 1.7; color: var(--text); }
.pf-owner { display: flex; align-items: center; gap: 8px; margin-top: 4px; flex-wrap: wrap; }
.empty-state { max-width: 640px; }
.empty-state p { margin: 0 0 12px; line-height: 1.55; }

/* ---------- Top bar account menu ---------- */
.user-menu { position: relative; z-index: 2; display: flex; align-items: center; gap: 8px; }
.um-details { position: relative; }
.um-details > summary { list-style: none; display: flex; align-items: center; gap: 8px; cursor: pointer;
  padding: 4px 8px 4px 4px; border: 1px solid transparent; border-radius: 18px; }
.um-details > summary::-webkit-details-marker { display: none; }
.um-details > summary:hover, .um-details[open] > summary { border-color: var(--border); background: var(--surface); }
/* A member's photo, or their username's letters (components.avatar, web.avatar_html): also on the sign-in pages. */
.avatar { display: inline-grid; place-items: center; flex: none; border-radius: 50%; object-fit: cover;
  vertical-align: middle; background: var(--surface-2); }
.avatar-letters { border: 1px solid; font-weight: 600; line-height: 1; letter-spacing: .02em; user-select: none; }
.um-details > summary .avatar { width: 28px; height: 28px; }
.um-menu { position: absolute; right: 0; top: calc(100% + 6px); min-width: 210px; background: var(--surface);
  border: 1px solid var(--border); border-radius: var(--radius); box-shadow: 0 16px 40px rgba(0,0,0,.5); padding: 6px 0; }
.um-menu a { display: block; padding: 8px 14px; color: var(--text); }
.um-menu a:hover { background: var(--surface-2); color: var(--text-strong); }
.um-head { padding: 8px 14px 10px; border-bottom: 1px solid var(--border); margin-bottom: 4px; }
.um-sep { height: 1px; background: var(--border); margin: 4px 0; }

/* ---------- Admin (views/admin.py) ---------- */
.adm-search { max-width: 520px; margin: 0 0 16px; }
.adm-actions { display: flex; gap: 6px; flex-wrap: wrap; max-width: 280px; }
.adm-member { display: flex; align-items: center; gap: 10px; min-width: 160px; }
.adm-bio { max-width: 220px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.adm-badges { display: flex; gap: 4px; flex-wrap: wrap; }
.btn-xs { padding: 4px 8px; font-size: 12px; }
.adm-link { color: var(--primary); font-weight: 500; }
.adm-link-row { display: flex; align-items: center; gap: 8px; margin: 6px 0; }
.adm-code { font-family: var(--mono); font-size: 12px; padding: 6px 8px; background: var(--bg); border: 1px solid var(--border);
  border-radius: var(--radius); overflow-x: auto; white-space: nowrap; max-width: 100%; color: var(--text-strong); }
.adm-copy { cursor: pointer; color: var(--primary); font-size: 16px; }
.adm-setup { margin: 0; padding: 0; list-style: none; line-height: 2; }
.adm-comp { display: flex; flex-direction: column; gap: 12px; }
.adm-comp .acct-grid { margin: 0; }
.adm-comp-form { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); gap: 0 16px; max-width: 640px; }
.adm-comp-form .mp-label { margin-top: 0; }
@media (max-width: 760px) { .adm-comp-form { grid-template-columns: minmax(0, 1fr); } .adm-comp-form .mp-label { margin-top: 12px; } }
/* Weekly email card on /admin: the preview is the real email HTML in a sandboxed frame, desktop or phone width */
.adm-we-form { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 10px 16px; align-items: end; max-width: 760px; }
.adm-we-form .mp-label { margin-top: 0; }
.adm-we-bar { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.adm-we-bar.hidden, .adm-we-frame-wrap.hidden { display: none; }
.adm-we-subject { overflow-wrap: anywhere; }
.adm-we-frame-wrap { background: #0c0e13; border: 1px solid var(--border); overflow: hidden; }
.adm-we-frame { display: block; width: 100%; height: 1150px; border: 0; margin: 0 auto; background: #0c0e13; }
.adm-we-frame.phone { width: 375px; max-width: 100%; height: 1500px; border-left: 1px solid var(--border);
  border-right: 1px solid var(--border); }
@media (max-width: 760px) { .adm-we-form { grid-template-columns: minmax(0, 1fr); } }

/* ---------- Club competition (views/competition.py) ---------- */
.comp-strip { display: flex; align-items: center; gap: 12px 28px; flex-wrap: wrap; margin: -4px 0 16px; padding: 10px 16px;
  background: var(--surface); border: 1px solid var(--border); border-left: 2px solid var(--violet); border-radius: var(--radius); }
.comp-strip-value { font-family: var(--mono); font-size: 14px; color: var(--text-strong); margin-top: 2px; }
.comp-strip-item:nth-child(3) .comp-strip-value { font-family: inherit; font-size: 13px; color: var(--text); }
.comp-strip-link { margin-left: auto; }
.lb-table td.lb-rank { color: var(--text-strong); width: 56px; }
.lb-who { display: flex; align-items: center; gap: 8px; }
.lb-name { font-family: var(--mono); font-weight: 600; color: var(--text-strong); }
a.lb-name:hover { color: var(--primary); }
.data-table.lb-table tbody tr.lb-me { background: rgba(58,142,230,.08); box-shadow: inset 2px 0 0 var(--primary); }
#cp-status .alert { margin: 0 0 12px; }
@media (max-width: 760px) {
  .comp-kpis .kpi-row { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
  .comp-kpis .kpi { padding: 10px 12px; min-width: 0; }
  .comp-kpis .kpi-value { font-size: 18px; }
  .lb-table .lb-extra { display: none; }
  .data-table.lb-table th, .data-table.lb-table td { padding: 8px 6px; }
  .lb-table td.lb-rank { width: auto; }
  .lb-who .badge { display: none; }  /* the row's highlight marks it */
  .lb-who { gap: 6px; }
  .lb-who .lb-name { display: inline-block; max-width: 120px; overflow: hidden; text-overflow: ellipsis;
    white-space: nowrap; vertical-align: middle; }
  .lb-who .avatar { width: 22px !important; height: 22px !important; font-size: 9px !important; }  /* (sized inline) */
  .data-table.lb-table th { white-space: normal; }  /* "Total return" on two lines */
  .comp-strip { gap: 10px 20px; padding: 10px 12px; }
  .comp-strip-link { margin-left: 0; }
}

/* ---------- A member's profile page (/u/<username>, views/profile.py) ---------- */
.prof-head { display: flex; align-items: center; gap: 20px; min-width: 0; }
.prof-text { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.prof-text .page-title { font-family: var(--mono); }
.prof-bio { color: var(--text); line-height: 1.5; max-width: 560px; overflow-wrap: anywhere; }
.prof-grid > .prof-card { margin-bottom: 0; }
.prof-grid { margin-bottom: 14px; }
.prof-nums { display: flex; gap: 28px; flex-wrap: wrap; margin-top: 10px; }
.prof-num { font-family: var(--mono); font-size: 16px; color: var(--text-strong); margin-top: 2px; }
.prof-num.pos { color: var(--pos); } .prof-num.neg { color: var(--neg); }
@media (max-width: 760px) {
  .prof-head { gap: 14px; }
}

/* ---------- Your portfolio: a member portfolio's actual value (views/overview.py, performance.py) ---------- */
.perf-card .card-head { flex-wrap: wrap; }
.perf-ranges label { padding: 4px 12px; margin: 0; font-family: var(--mono); }
.perf-value { font-family: var(--mono); font-size: 32px; font-weight: 500; color: var(--text-strong); line-height: 1.15; }
.perf-change { font-family: var(--mono); font-size: 14px; margin: 6px 0 8px; min-height: 20px; white-space: nowrap;
  overflow: hidden; text-overflow: ellipsis; }  /* one line: the chart mustn't jump while the label changes */
.perf-range-label { font-family: var(--font); color: var(--text); }
.perf-flows { font-size: 12px; margin: -4px 0 6px; }
.perf-chart-skeleton, .perf-empty { height: 300px; }
.perf-body[data-dash-is-loading="true"] { opacity: .55; transition: opacity .15s; }
/* the chart itself (assets/perf-chart.js): SVG, coloured by the range's change */
.perf-chart { position: relative; height: 300px; margin: 4px 0 2px; touch-action: pan-y; user-select: none;
  -webkit-user-select: none; -webkit-tap-highlight-color: transparent; }
.pc-svg { display: block; overflow: visible; }
.pc-grid { stroke: #1a202b; stroke-width: 1; }
.pc-sep { stroke: var(--border); stroke-dasharray: 2 4; }
.pc-base { stroke: var(--muted); stroke-width: 1; stroke-dasharray: 1.5 3.5; }
.pc-ylab, .pc-xlab { fill: var(--muted); font: 11px var(--mono); }
.pc-line { fill: none; stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; }
.up .pc-line { stroke: var(--pos); }
.down .pc-line { stroke: var(--neg); }
.pc-stop-top { stop-opacity: .26; }
.pc-stop-bottom { stop-opacity: 0; }
.up .pc-stop-top, .up .pc-stop-bottom { stop-color: var(--pos); }
.down .pc-stop-top, .down .pc-stop-bottom { stop-color: var(--neg); }
.pc-end { stroke: var(--surface); stroke-width: 2; }
.up .pc-end, .up .pc-dot { fill: var(--pos); }
.down .pc-end, .down .pc-dot { fill: var(--neg); }
.pc-edit { fill: var(--warn); stroke: var(--surface); stroke-width: 1.5; }
.pc-cross { stroke: var(--text); stroke-width: 1; stroke-dasharray: 3 3; opacity: .65; }
.pc-dot { stroke: var(--surface); stroke-width: 2; }
.pc-band { opacity: .13; }
.pc-band.pos { fill: var(--pos); }
.pc-band.neg { fill: var(--neg); }
.pc-pill rect { fill: var(--surface-2); stroke: var(--border); }
.pc-pill text { fill: var(--text-strong); font: 11px var(--mono); }
.pc-hit { fill: transparent; cursor: crosshair; }
.perf-empty { display: flex; align-items: center; justify-content: center; }
.perf-foot { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; margin-top: 6px;
  padding: 12px 0 8px; border-top: 1px solid var(--border); }
.perf-foot-label { color: var(--text-strong); font-weight: 500; }
.perf-foot .mono { font-size: 15px; color: var(--text-strong); }
.risk-head { margin-top: 28px; }
/* ---------- time-series charts (assets/line-chart.js, components.line_chart): the same look as the chart above */
.lc { position: relative; touch-action: pan-y; user-select: none; -webkit-user-select: none;
  -webkit-tap-highlight-color: transparent; }
.lc-key { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 16px; min-height: 26px; padding-bottom: 8px;
  font: 12px var(--mono); }
.lc-when { color: var(--muted); }
.lc-item { display: inline-flex; align-items: baseline; gap: 6px; white-space: nowrap; }
.lc-name { font-family: var(--font); color: var(--text); }
.lc-val { color: var(--text-strong); }
.lc-val.pos { color: var(--pos); }
.lc-val.neg { color: var(--neg); }
.lc-sw { display: inline-block; width: 14px; height: 0; border-top: 2px solid currentColor; transform: translateY(-3px); }
.lc-sw.dashed { border-top-style: dashed; }
.lc-sw-bar { width: 8px; height: 10px; border: 0; background: currentColor; transform: none; }
.lc-sw-dots { width: 6px; height: 6px; border: 0; border-radius: 50%; background: currentColor; transform: translateY(-1px); }
.lc-line { fill: none; stroke-linejoin: round; stroke-linecap: round; }
.lc-zero { stroke: #2a3342; stroke-width: 1; }
.lc-window { fill: var(--primary); opacity: .06; }
.lc-note { fill: var(--muted); font: 10px var(--font); }
.lc-bar { fill: none; }
.lc-mark { stroke: var(--surface); stroke-width: 1; }
@media (max-width: 760px) { .lc-key { gap: 2px 12px; font-size: 11px; } }
/* positions with cost basis: a sparkline per row, the ticker column stays put when the table scrolls sideways */
.spark { display: block; width: 96px; height: 28px; }
.cell-sub { font-size: 11px; margin-top: 2px; }
.positions-cost .data-table td:first-child, .positions-cost .data-table th:first-child {
  position: sticky; left: 0; z-index: 1; background: var(--surface); }
.positions-cost .data-table tbody tr:hover td:first-child,
.positions-cost .data-table tbody tr:focus-within td:first-child { background: var(--surface-2); }
@media (max-width: 760px) {
  .perf-value { font-size: 26px; }
  .perf-change { min-height: 40px; white-space: normal; }  /* phones: two lines kept free for a long label */
  .perf-card .card-actions { width: 100%; }
  .positions-card .card-head { flex-wrap: wrap; }
  .positions-cost td:first-child .cell-sub { display: none; }  /* keeps the sticky ticker column narrow */
  .perf-ranges { display: flex; width: 100%; }
  .perf-ranges label { flex: 1; padding: 6px 0; text-align: center; }
}

/* ---------- Markets and Signals page (views/markets.py) ---------- */
.kpi-value.warn { color: var(--warn); }
.pm-controls { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 10px 16px;
  margin-bottom: 16px; }
.pm-cats { margin-bottom: 10px; }
.pm-search { --Dash-Fill-Interactive-Strong: var(--primary); flex: 1 1 320px; max-width: 460px; height: 34px;
  background: var(--surface); color: var(--text-strong); border: 1px solid var(--border); border-radius: var(--radius); }
.pm-search:has(:focus-visible) { outline: none; border-color: var(--primary); }
.pm-search .dash-input-element { padding: 0 10px; font: 13px var(--font); }
.pm-note { margin: -4px 0 10px; }
.pm-sort { display: flex; align-items: center; gap: 8px; }
.pm-sort-label { margin: 0; }
.pm-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(290px, 1fr)); gap: 12px; }
.pm-card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius);
  padding: 14px 16px 12px; display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.pm-card:hover { border-color: #2c3647; }
.pm-top { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.chip.pm-source { color: var(--primary); border-color: rgba(58,142,230,.45); background: rgba(58,142,230,.08); }
.pm-q { font-size: 14px; font-weight: 600; line-height: 1.35; color: var(--text-strong); overflow-wrap: anywhere; }
.pm-q:hover { color: var(--primary); }
.pm-lead { display: flex; align-items: center; gap: 12px; }
.pm-prob { font: 500 30px/1 var(--mono); color: var(--text-strong); min-width: 72px; }
.pm-lead-text { min-width: 0; }
.pm-lead-name { font-size: 13px; color: var(--text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pm-change { font: 12px var(--mono); color: var(--muted); margin-top: 3px; }
.pm-change:empty { display: none; }
.pm-bar { height: 4px; background: var(--surface-2); }
.pm-bar-fill { height: 100%; background: var(--primary); }
.pm-others { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 5px; }
.pm-others li { display: grid; grid-template-columns: minmax(0, 1fr) 44px 48px; gap: 8px; align-items: baseline;
  font-size: 12px; }
.pm-o-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--text); }
.pm-o-prob, .pm-o-chg { font-family: var(--mono); text-align: right; color: var(--text-strong); }
.pm-o-chg { color: var(--muted); }
.pm-o-chg.pos, .pm-change.pos { color: var(--pos); }
.pm-o-chg.neg, .pm-change.neg { color: var(--neg); }
.pm-foot { margin-top: auto; padding-top: 8px; border-top: 1px solid var(--border); display: flex;
  justify-content: space-between; align-items: baseline; gap: 8px; font-size: 12px; color: var(--muted); }
.pm-foot .mono { color: var(--text); }
.pm-link, .pm-credit a { color: var(--primary); white-space: nowrap; }
.pm-link:hover, .pm-credit a:hover { text-decoration: underline; }
.pm-credit { margin: 16px 0 0; max-width: 110ch; line-height: 1.6; }
.mk-soon { display: flex; flex-direction: column; align-items: flex-start; }
.mk-soon-text { max-width: 72ch; line-height: 1.6; margin: 10px 0 4px; }
@media (max-width: 760px) {
  .pm-grid { grid-template-columns: minmax(0, 1fr); }
  .pm-controls { flex-direction: column; align-items: stretch; }
  .pm-search { flex: none; max-width: none; height: 38px; }
  .pm-search .dash-input-element { font-size: 16px; }  /* 16px stops phones zooming into the field */
  .pm-kpis .kpi-row { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
  .pm-kpis .kpi { padding: 10px 12px; min-width: 0; }
  .pm-kpis .kpi-value { font-size: 18px; }
}

/* ---------- Markets and Signals > Global macro (views/macro.py) ---------- */
.gm-status { margin: -4px 0 12px; }
.gm-kpis .kpi-row { grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); }
.gm-kpis .kpi-sub .pos { color: var(--pos); }
.gm-kpis .kpi-sub .neg { color: var(--neg); }
.gm-map-card .card-head, .gm-countries-card .card-head { flex-wrap: wrap; }
.gm-metric { width: 270px; font-size: 13px; }
.gm-map-note { margin: 4px 0 0; }
.gm-boards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.gm-boards > .card { margin-bottom: 16px; }
.data-table.gm-board { font-size: 12px; }
.data-table.gm-board th, .data-table.gm-board td { padding: 6px 6px; }
.data-table.gm-board th:first-child, .data-table.gm-board td:first-child { padding-left: 0; }
.data-table.gm-board td.num, .data-table.gm-countries td.num { color: var(--text); }
.data-table td.num.pos, .data-table .num .pos { color: var(--pos); }
.data-table td.num.neg { color: var(--neg); }
.data-table td.num.strong { color: var(--text-strong); }
.data-table td.num.muted { color: var(--muted); }
.gm-name { color: var(--text-strong); white-space: normal !important; min-width: 96px; }
.gm-kpi-sub { white-space: pre; }
.gm-date { font-size: 11px; }
.gm-spark-cell { width: 76px; padding-right: 0 !important; text-align: right; }
.gm-board-card .gm-spark-cell { display: none; }  /* market boards: room for a sparkline only on wide screens */
@media (min-width: 1600px) { .gm-board-card .gm-spark-cell { display: table-cell; } }
.gm-spark { display: block; width: 72px; height: 22px; margin-left: auto; }
.gm-econ td:first-child { white-space: normal; min-width: 150px; }
.gm-bank { color: var(--text-strong); white-space: normal; }
.gm-scroll { max-height: 520px; overflow-y: auto; }
.gm-cal { list-style: none; margin: 0; padding: 0; }
.gm-cal-row { display: grid; grid-template-columns: 92px minmax(0, 1fr) auto; gap: 12px; align-items: center;
  padding: 9px 0; border-bottom: 1px solid var(--border); }
.gm-cal-row:last-child { border-bottom: none; }
.gm-cal-day { font: 500 12px var(--mono); color: var(--text-strong); }
.gm-cal-time { font: 11px var(--mono); color: var(--muted); margin-top: 2px; }
.gm-cal-name { color: var(--text-strong); font-size: 13px; }
.gm-cal-what .cell-sub { color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.gm-countries th { padding: 0; }
.gm-sort { background: none; border: none; color: var(--muted); font: 500 12px var(--font); padding: 8px 12px;
  cursor: pointer; white-space: nowrap; width: 100%; text-align: left; }
.gm-sort.num { text-align: right; }
.gm-sort:hover { color: var(--text-strong); }
.gm-sort.active { color: var(--text-strong); }
.gm-sort.active.desc::after { content: " ↓"; color: var(--primary); }
.gm-sort.active.asc::after { content: " ↑"; color: var(--primary); }
.gm-country { color: var(--text-strong); }
.gm-countries td:first-child, .gm-countries th:first-child { position: sticky; left: 0; background: var(--surface);
  z-index: 1; }
.gm-countries tbody tr:hover td:first-child { background: var(--surface-2); }
@media (max-width: 1100px) {
  .gm-boards { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
}
@media (max-width: 760px) {
  .gm-boards { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .gm-kpis .kpi-row { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
  .gm-kpis .kpi { padding: 10px 12px; min-width: 0; }
  .gm-kpis .kpi-value { font-size: 18px; }
  .gm-metric { width: 100%; }
  .gm-map-card .card-actions, .gm-countries-card .card-actions { width: 100%; }
  .gm-map { height: 200px !important; }
  .gm-econ .gm-spark-cell, .gm-econ th:nth-child(3), .gm-econ td:nth-child(3) { display: none; }
  .gm-econ td:first-child { min-width: 0; }
  .gm-name { min-width: 0; }
  .gm-cal-row { grid-template-columns: 78px minmax(0, 1fr); }
  .gm-cal-row .chip { display: none; }
}

/* ---------- stock page (views/stock.py) ---------- */
.stk-badge { vertical-align: 3px; color: var(--text); }
.stk-quote { margin-top: 6px; font-size: 14px; }
.stk-price { font-size: 16px; color: var(--text-strong); }
.stk-context { margin: -6px 0 14px; }
.stk-context a { color: var(--primary); }
.stk-context a:hover { text-decoration: underline; }
.stk-skel { height: 240px; opacity: .5; }
.stk-sub { margin: 18px 0 10px; font-size: 12px; font-weight: 500; color: var(--muted); letter-spacing: .02em; }
.stk-pos-note { margin: 12px 0 0; }
.stk-position .acct-item .cell-sub { margin-top: 1px; }
.stk-chart-foot { display: flex; justify-content: space-between; gap: 6px 16px; flex-wrap: wrap; }
.stk-marks-key .pos, .stk-marks-key .neg { font-size: 10px; }
.stk-next { margin-bottom: 12px; font-size: 13px; }
.stk-scores { margin-bottom: 12px; }
.perf-note { min-height: 18px; margin: -4px 0 2px; color: var(--text-strong); }
.pc-trade { stroke: var(--text-strong); stroke-width: 1.2; stroke-linejoin: round; }
.pc-trade.buy { fill: var(--pos); }
.pc-trade.sell { fill: var(--neg); }
@media (max-width: 760px) {
  .stk-page .page-head { flex-direction: column; gap: 10px; }
  .stk-page .page-actions { justify-content: flex-start; }
  .stk-position .acct-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* ---------- Plotly charts (components.graph): nothing to drag, so no hand cursor ---------- */
.chart .nsewdrag { cursor: default !important; }

/* ---------- Markets and Signals > Insider trades (views/insiders.py) ---------- */
.ins-kpis .kpi-sub { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ins-status { margin: -6px 0 14px; }
.ins-warn { color: var(--warn); }
.ins-table td { vertical-align: top; }
.ins-sub { font-size: 11px; color: var(--muted); margin-top: 2px; font-family: var(--font); font-weight: 400; }
.ins-who { color: var(--text-strong); }
.ins-table .ticker:hover, .ins-cl:hover .ticker { color: var(--primary); }
.ins-links { display: inline-flex; gap: 8px; align-items: center; }
.ins-link { color: var(--primary); white-space: nowrap; font-size: 12px; }
.ins-link:hover { text-decoration: underline; }
.chip.ins-cluster-chip { margin-left: 6px; color: var(--warn); border-color: rgba(224,163,57,.5);
  background: rgba(224,163,57,.08); }
.ins-cl-wrap { margin-bottom: 14px; }
.ins-cls { display: flex; flex-wrap: wrap; gap: 8px; }
.ins-cl { display: flex; flex-direction: column; gap: 2px; padding: 8px 12px; min-width: 150px;
  background: var(--bg); border: 1px solid rgba(224,163,57,.45); border-radius: var(--radius); }
.ins-cl:hover { border-color: var(--warn); }
.ins-cl-what { font: 12px var(--mono); color: var(--text-strong); }
.ins-cl-when { font-size: 11px; color: var(--muted); }
.ins-search-row { display: flex; gap: 8px; margin-bottom: 14px; }
.ins-search { --Dash-Fill-Interactive-Strong: var(--primary); flex: 1 1 260px; max-width: 360px; height: 34px;
  background: var(--bg); color: var(--text-strong); border: 1px solid var(--border); border-radius: var(--radius); }
.ins-search:has(:focus-visible) { outline: none; border-color: var(--primary); }
.ins-search .dash-input-element { padding: 0 10px; font: 13px var(--font); }
.ins-hint { margin: 0; }
.ins-filters { display: flex; flex-wrap: wrap; gap: 8px 10px; align-items: center; margin-bottom: 12px; }
.ins-filters .ins-q { flex: 1 1 200px; max-width: 280px; }
.ins-count { margin: 0 0 6px; }
.ins-h-section + .ins-h-section { margin-top: 18px; }
.ins-h-label { margin-bottom: 4px; }
.ins-quiet { margin: 8px 0 0; line-height: 1.6; }
.ins-co-head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: 6px 16px;
  margin-bottom: 12px; }
.ins-co-ticker { font-size: 18px; margin-right: 10px; }
.ins-co-name { color: var(--text-strong); font-size: 14px; }
.ins-co-links { display: flex; gap: 16px; }
.ins-co-links .ext-link { margin-top: 0; }
.ins-co-kpis .kpi-row { grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); }
.ins-chart { margin-bottom: 12px; }
.ins-legend { margin: 4px 0 0; }
.ins-months { margin-bottom: 12px; }
.ins-m-label { margin-bottom: 0; }
.rs-insiders-link { margin-left: 16px; }
@media (max-width: 760px) {
  .ins-hide-sm { display: none; }
  .ins-kpis .kpi-row, .ins-co-kpis .kpi-row { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
  .ins-kpis .kpi, .ins-co-kpis .kpi { padding: 10px 12px; min-width: 0; }
  .ins-kpis .kpi-value, .ins-co-kpis .kpi-value { font-size: 18px; }
  .ins-table th, .ins-table td { padding: 8px 6px; }
  .ins-search { flex: 1 1 auto; max-width: none; height: 38px; }
  .ins-search .dash-input-element { font-size: 16px; }  /* 16px stops phones zooming into the field */
  .ins-filters .ins-q { flex: 1 1 100%; max-width: none; }
  .ins-cl { min-width: 0; flex: 1 1 140px; }
  /* tables become one small card per row: stock and value, insider and holdings change, then date, type, links */
  .ins-table thead { display: none; }
  .ins-table, .ins-table tbody { display: block; }
  .ins-table tbody tr:hover { background: none; }
  .ins-table tr { display: grid; gap: 3px 10px; padding: 10px 0; border-bottom: 1px solid var(--border); }
  .ins-table td, .ins-table th { display: block; padding: 0; border: 0; white-space: normal; min-width: 0; }
  .ins-table td.ins-hide-sm { display: none; }
  .ins-trades tr { grid-template-columns: auto auto minmax(0, 1fr) auto;
    grid-template-areas: "stock stock stock value" "who who who change" "date kind . links"; align-items: center; }
  .ins-trades td:nth-child(1) { grid-area: date; font-size: 12px; color: var(--muted); }
  .ins-trades td:nth-child(2) { grid-area: stock; }
  .ins-trades td:nth-child(3) { grid-area: who; }
  .ins-trades td:nth-child(4) { grid-area: kind; }
  .ins-trades td:nth-child(7) { grid-area: value; color: var(--text-strong); }
  .ins-trades td:nth-child(8) { grid-area: change; font-size: 12px; }
  .ins-trades td:nth-child(9) { grid-area: links; }
  .ins-trades td:nth-child(2) > div { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0 8px; }
  .ins-trades td:nth-child(2) .chip { margin-left: 0; }
  .ins-hold tr { grid-template-columns: minmax(0, 1fr) auto auto; grid-template-areas: "stock bought sold" "latest latest latest"; }
  .ins-hold td:nth-child(1) { grid-area: stock; }
  .ins-hold td:nth-child(3) { grid-area: bought; }
  .ins-hold td:nth-child(5) { grid-area: sold; }
  .ins-hold td:nth-child(6) { grid-area: latest; }
  .ins-hold td:nth-child(3)::before { content: "Bought "; }
  .ins-hold td:nth-child(5)::before { content: "Sold "; }
  .ins-hold td:nth-child(3)::before, .ins-hold td:nth-child(5)::before { font: 11px var(--font); color: var(--muted); }
}

/* ---------- Markets and Signals > Sentiment (views/sentiment.py) ---------- */
.st-b0 { color: var(--neg); } .st-b1 { color: var(--warn); } .st-b2 { color: #8a94a6; }
.st-b3 { color: #5fd08f; } .st-b4 { color: var(--pos); }
.st-bg0 { background: var(--neg); } .st-bg1 { background: var(--warn); } .st-bg2 { background: #8a94a6; }
.st-bg3 { background: #5fd08f; } .st-bg4 { background: var(--pos); }
.st-kpi-mood { display: flex; align-items: baseline; gap: 8px; }
.st-kpi-band { font-size: 12px; font-weight: 600; }
.st-mood { display: grid; grid-template-columns: 260px minmax(0, 1fr); gap: 28px; align-items: start; }
.st-dial-col { display: flex; flex-direction: column; align-items: center; padding-top: 12px; }
.st-dial-img { display: block; max-width: 100%; height: auto; }
.st-dial-foot { width: 240px; display: grid; grid-template-columns: 1fr auto 1fr; align-items: start; margin-top: 2px; }
.st-end { font-size: 11px; color: var(--muted); padding: 0 6px; }
.st-end:last-child { text-align: right; }
.st-dial-center { text-align: center; }
.st-dial-num { font: 500 40px/1 var(--mono); color: var(--text-strong); }
.st-dial-band { display: block; font-size: 13px; font-weight: 600; margin-top: 4px; }
.st-dial-date { margin-top: 8px; }
.st-inputs { display: flex; flex-direction: column; gap: 10px; }
.st-input { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr) 104px;
  grid-template-areas: "head bar right" "what what what"; column-gap: 16px; row-gap: 3px; align-items: center;
  padding-bottom: 10px; border-bottom: 1px solid var(--border); }
.st-input:last-child { border-bottom: none; padding-bottom: 0; }
.st-in-head { grid-area: head; min-width: 0; }
.st-in-name { color: var(--text-strong); font-size: 13px; font-weight: 500; }
.st-in-read { font: 11px var(--mono); color: var(--muted); margin-top: 2px; }
.st-track { grid-area: bar; position: relative; height: 8px; background: var(--surface-2); }
.st-fill { position: absolute; left: 0; top: 0; height: 100%; }
.st-tick { position: absolute; top: -3px; width: 2px; height: 14px; margin-left: -1px; background: var(--text); }
.st-in-right { grid-area: right; display: flex; align-items: baseline; justify-content: flex-end; gap: 8px; }
.st-in-score { font: 500 15px var(--mono); color: var(--text-strong); }
.st-in-band { font-size: 11px; font-weight: 600; white-space: nowrap; min-width: 64px; }
.st-in-what { grid-area: what; font-size: 12px; color: var(--muted); line-height: 1.45; }
.st-how { margin: 16px 0 0; line-height: 1.6; max-width: 120ch; }
.st-how strong { color: var(--text); font-weight: 500; }
.st-vol .st-vname { white-space: normal; min-width: 130px; }
.st-vol .cell-sub { color: var(--muted); font-size: 11px; }
.st-range-cell { width: 110px; }
.st-range { position: relative; height: 4px; min-width: 70px; margin: 0 6px; background: var(--surface-2); }
.st-range-dot { position: absolute; top: -3px; width: 10px; height: 10px; margin-left: -5px; border-radius: 50%;
  background: var(--primary); }
.st-trend-note { margin: 6px 0 0; }
.st-hl-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28px; margin-top: 16px; }
.st-hl-head { margin: 0 0 4px; font-size: 13px; font-weight: 600; color: var(--text-strong); }
.st-hl-list { list-style: none; margin: 0; padding: 0; }
.st-hl { padding: 9px 0; border-bottom: 1px solid var(--border); }
.st-hl:last-child { border-bottom: none; }
.st-hl-title { color: var(--text-strong); font-size: 13px; line-height: 1.4; overflow-wrap: anywhere; }
.st-hl-title:hover { color: var(--primary); }
.st-hl-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; margin-top: 4px; font-size: 11px;
  color: var(--muted); }
.st-hl-tone { margin-left: auto; font-family: var(--mono); }
@media (max-width: 760px) {
  .st-mood { grid-template-columns: minmax(0, 1fr); gap: 16px; }
  .st-input { grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "head right" "bar bar" "what what";
    row-gap: 6px; }
  .st-in-band { min-width: 0; }
  .st-hl-grid { grid-template-columns: minmax(0, 1fr); gap: 12px; }
  .st-vol .gm-spark-cell { display: none; }
  .st-vol .st-vname { min-width: 0; }
  .st-range-cell { width: 64px; }
  .st-range { min-width: 48px; margin: 0 4px; }
}

/* ---------- Factor Model tab ---------- */
.fm-head { display: flex; justify-content: space-between; align-items: flex-end; gap: 12px; flex-wrap: wrap; }
.fm-source { margin: -6px 0 12px; }
.fm-summary { margin: 0; padding-left: 18px; line-height: 1.6; font-size: 13.5px; color: var(--text); }
.fm-summary li + li { margin-top: 4px; }
.fm-actions { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; justify-content: flex-end; }
.fm-actions .hidden, .fm-controls .check.hidden { display: none; }
.fm-sort { width: 180px; font-size: 12px; }
.fm-select { width: 190px; font-size: 13px; }
.fm-controls { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; margin-bottom: 12px; }
.fm-shock { --Dash-Fill-Interactive-Strong: var(--primary); width: 72px; height: 34px; background: var(--bg);
  border: 1px solid var(--border); border-radius: var(--radius); }
.fm-shock .dash-input-element { padding: 0 8px; font: 500 13px var(--mono); text-align: right; color: var(--text-strong); }
.fm-big { font-family: var(--mono); font-size: 26px; font-weight: 500; color: var(--text-strong); line-height: 1.2; }
.fm-big.pos { color: var(--pos); }
.fm-big.neg { color: var(--neg); }
.fm-scn-head { margin-bottom: 4px; }
.fm-legs { margin: 0 0 8px; padding-left: 18px; line-height: 1.7; }
.fm-note { margin: 0 0 8px; }
.fm-attr-grid { margin-bottom: 0; }
.fm-attr-grid > div { min-width: 0; }
.fm-perf .table-wrap { margin-bottom: 12px; }
.fm-foot { margin: 4px 0 24px; line-height: 1.6; }
.fm-foot a { color: var(--primary); }
#fm-body[data-dash-is-loading="true"], #fm-attr[data-dash-is-loading="true"], #fm-roll[data-dash-is-loading="true"],
#fm-holding[data-dash-is-loading="true"], #fm-sc-out[data-dash-is-loading="true"],
#fm-hg-out[data-dash-is-loading="true"] { opacity: .55; transition: opacity .15s; }
.fm-code { margin-left: 8px; font: 11px var(--mono); color: var(--muted); }
.fm-compact .data-table th, .fm-compact .data-table td { padding: 8px 8px; }
.fm-compact .tile-grid { grid-template-columns: repeat(auto-fit, minmax(110px, 1fr)); margin-bottom: 8px; }
@media (max-width: 1000px) {
  .fm-card .card-head { flex-direction: column; align-items: stretch; }  /* the switches go under the title */
  .fm-actions { justify-content: flex-start; }
}
@media (max-width: 760px) {
  .fm-shock .dash-input-element { font-size: 16px; }  /* 16px stops phones zooming into the field */
  .fm-select { width: 100%; }
  .fm-kpis .kpi-row { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
  .fm-kpis .kpi { padding: 10px 12px; min-width: 0; }
  .fm-kpis .kpi-value { font-size: 20px; }
}

@media (max-width: 760px) {
  .home { padding: 44px 0 96px; }  /* some sky above the title, and room under the last strip */
  .home-title { font-size: 24px; }
  .home-lede { font-size: 14px; }
  .home-doors { grid-template-columns: minmax(0, 1fr); gap: 12px; margin-top: 24px; }
  .door { min-height: 0; padding: 18px; }
  .door-list { display: none; }
  .home-strip { padding: 14px 16px; }
  .strip-links { margin-left: 0; }
  .rh-hero { margin: -16px -16px 16px; padding: 22px 18px; border-left: 0; border-right: 0; border-top: 0; }
  .rh-title { font-size: 22px; }
  .rh-grid { grid-template-columns: minmax(0, 1fr); gap: 12px; }
  .rh-tool { min-height: 0; }
  .rh-search .dash-input-element { font-size: 16px; }
}