:root {
  --bg: #0e1116;
  --panel: #161b22;
  --panel-2: #1c2128;
  --border: #30363d;
  --text: #e6edf3;
  --muted: #8b949e;
  --accent: #58a6ff;
  --green: #3fb950;
  --orange: #db8b1f;
  --red: #f85149;
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; background: var(--bg); color: var(--text);
  font: 15px/1.5 -apple-system, BlinkMacSystemFont, "SF Pro Text", Helvetica, Arial, sans-serif; }
a { color: var(--accent); text-decoration: none; }
a:hover { text-decoration: underline; }

/* Finviz-style compact one-row header: logo on the left, primary nav inline,
   search anchored right. Tight vertical padding so the content area starts
   high on the page. */
header { padding: 6px 20px; border-bottom: 1px solid var(--border); }
header h1 { margin: 0; font-size: 22px; font-weight: 700; letter-spacing: -0.01em; }
.header-row { display: flex; align-items: center; gap: 24px; }
.site-brand { line-height: 0; flex-shrink: 0; }
.site-brand a { display: inline-block; }
.site-logo {
  display: block;
  height: 32px;
  width: auto;
  max-width: min(300px, 36vw);
  object-fit: contain;
}
.meta-strip { color: var(--muted); font-size: 12px; padding: 2px 20px 6px; }
#search {
  flex: 1; max-width: 520px; margin-left: auto;
  padding: 6px 12px; background: var(--panel);
  color: var(--text); border: 1px solid var(--border); border-radius: 7px;
  font: inherit; font-size: 13px;
}

/* Global breadcrumb bar: "← back · Themes / Theme / Sub-industry / Ticker".
   Visible on every view so the user always has a back-out path AND a
   site-map readout of where they are. */
.breadcrumb-bar {
  display: flex;
  align-items: baseline;
  gap: 8px;
  padding: 4px 20px 2px;
  font-size: 12px;
  color: var(--muted);
}
.breadcrumb-bar .back {
  color: var(--accent);
  text-decoration: none;
  font-weight: 600;
  font-size: 12px;
}
.breadcrumb-bar .back:hover { text-decoration: underline; }
.breadcrumb-bar .bc-sep-back { color: var(--border); }
.breadcrumb { color: var(--muted); font-size: 12px; padding: 0; }
.breadcrumb .current { color: var(--text); }
.breadcrumb .sep { margin: 0 4px; }
.breadcrumb a { color: var(--accent); text-decoration: none; }
.breadcrumb a:hover { text-decoration: underline; }

/* Profile view used to hide the breadcrumb; now keeps it visible so the
   sector-chain navigation back to Theme / Sub-industry stays available
   from inside a ticker page. */
body.view-ticker-detail .meta-strip { display: none; }
body.view-ticker-detail main { padding-top: 4px; max-width: none; }

main { padding: 4px 20px 40px; max-width: none; }

h2 { font-size: 18px; font-weight: 700; letter-spacing: -0.01em; margin: 8px 0 4px; }
h3 { font-size: 13px; font-weight: 600; margin: 12px 0 6px; color: var(--text); }
.muted { color: var(--muted); }

/* Compact one-row-per-subtheme listing. Was an oversize grid of cards
   with descriptions and ticker pills; now each entry is a slim row with
   subtheme name (link), avg 6M return, ticker count, and inline ticker
   chips. Reads like a table, not a brochure. */
.card-grid {
  display: flex; flex-direction: column; gap: 0;
  border: 1px solid var(--border); border-radius: 6px; overflow: hidden;
  background: var(--panel);
}
.card {
  display: flex; flex-direction: column; padding: 6px 12px;
  color: var(--text); text-decoration: none;
  border-bottom: 1px solid var(--border);
  min-height: 0;
}
.card:last-child { border-bottom: 0; }
.card:hover { background: var(--panel-2); text-decoration: none; }
.card:active { background: var(--panel-2); }
.card-subtheme-tag {
  display: inline-block; align-self: center;
  font-size: 10px; font-weight: 600; color: var(--muted);
  text-transform: uppercase; letter-spacing: 0.05em;
  margin: 0 6px 0 0; flex-shrink: 0;
}
.card-head { display: flex; align-items: center; justify-content: flex-start; gap: 10px; margin-bottom: 0; }
.card-pills { display: inline-flex; gap: 6px; flex-shrink: 0; align-items: center; margin-left: auto; }
.card-title { font-size: 13px; font-weight: 500; line-height: 1.3; flex: 0 0 auto; }
.card-stats { color: var(--muted); font-size: 12px; margin-bottom: 0; display: inline-flex; gap: 6px; align-items: center; }
.card-desc {
  color: var(--muted); font-size: 12px; line-height: 1.3;
  margin: 0; opacity: 0.8;
  flex: 1; min-width: 0;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.clamp-3 {
  display: -webkit-box;
  -webkit-line-clamp: 3;
  line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
}
.card-examples { color: var(--muted); font-size: 12px; margin-top: auto; padding-top: 6px; font-family: ui-monospace, "SF Mono", Menlo, monospace; }

/* Theme-page subtheme rows are compact — title is a link, description
   clamped to one line, and ticker chips sit inline on the right. */
.card-expanded .card-title a { color: var(--accent); }
.card-expanded .card-title a:hover { color: var(--accent); text-decoration: underline; }
.card-stocks {
  display: inline-flex; flex-wrap: wrap; gap: 2px 4px;
  margin: 0; padding: 0; border: 0;
}
.card-stock-link {
  font-family: ui-monospace, "SF Mono", Menlo, monospace;
  font-size: 11px; font-weight: 500;
  padding: 0 4px; border-radius: 0;
  background: transparent; color: var(--muted);
  border: 0;
  transition: color 0.1s;
}
.card-stock-link:hover { color: var(--accent); text-decoration: underline; }

.return-pill, .ticker-pill, .k-pill {
  flex-shrink: 0; padding: 1px 7px; border-radius: 8px; font-size: 11px; font-weight: 600;
  font-variant-numeric: tabular-nums; background: var(--panel-2); color: var(--muted);
  border: 1px solid var(--border); line-height: 1.2;
}
.return-pill.ret-pos { background: rgba(63, 185, 80, 0.12);  border-color: rgba(63, 185, 80, 0.32);  color: var(--green); }
.return-pill.ret-neg { background: rgba(248, 81, 73, 0.12);  border-color: rgba(248, 81, 73, 0.32);  color: var(--red); }

.toolbar { margin: 4px 0 8px; align-items: flex-end; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.toolbar > div:first-child { flex: 1; min-width: 240px; }
.toolbar h2 { margin: 0; }
.sort-controls { display: flex; align-items: center; gap: 4px; flex-wrap: wrap; }
.sort-controls .muted { font-size: 10px; text-transform: uppercase; letter-spacing: 0.05em; margin-right: 4px; font-weight: 600; }
/* One compact line: ticker/subtheme count on the left, Group picker on the right. */
.theme-meta {
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px; flex-wrap: wrap; margin: 0 0 4px;
}
.chip {
  background: transparent; color: var(--muted); border: 0;
  padding: 0; font: inherit; font-size: 12px; cursor: pointer;
  transition: color 0.1s;
}
.chip:hover { color: var(--text); }
.chip.active { color: var(--accent); font-weight: 600; }
/* Dot separators between consecutive chips inside a chip container.
   Pure CSS — no markup change needed. */
#subtheme-filter-chips,
.screener-row > div.screener-months,
[data-returns-level],
.chart-toolbar {}
#subtheme-filter-chips { display: flex; flex-wrap: wrap; align-items: center; gap: 0 8px; row-gap: 4px; }
#subtheme-filter-chips .chip + .chip::before { content: "·"; color: var(--border); margin-right: 8px; }
/* Meta chips ("Select all" / "Clear") sit at the head of the chip row with
   a subtle outline so they don't read as another subtheme. Suppress the
   dot separator on either side of them. */
#subtheme-filter-chips .chip-meta {
  border: 1px solid var(--border); border-radius: 3px;
  padding: 0 6px; font-size: 11px;
  text-transform: uppercase; letter-spacing: 0.04em;
}
#subtheme-filter-chips .chip-meta:hover { border-color: var(--accent); }
#subtheme-filter-chips .chip-meta + .chip::before,
#subtheme-filter-chips .chip + .chip-meta::before { content: ""; margin-right: 0; }
#subtheme-filter-chips .chip-meta + .chip-meta { margin-left: 4px; }

.subtheme-group { margin-bottom: 32px; }
.subtheme-header {
  display: flex; align-items: baseline; justify-content: space-between; gap: 12px;
  margin: 0 0 14px; padding-bottom: 8px; border-bottom: 1px solid var(--border);
}
.subtheme-header h3 {
  margin: 0; font-size: 16px; font-weight: 600; color: var(--text);
}
.subtheme-header .muted { font-size: 12px; }

.row { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 8px; }
.btn {
  background: var(--panel); color: var(--text); border: 1px solid var(--border);
  border-radius: 6px; padding: 6px 12px; font: inherit; cursor: pointer;
}
.btn:hover { border-color: var(--accent); text-decoration: none; }

table {
  width: 100%; border-collapse: collapse; font-size: 11px;
  background: var(--panel); border: 1px solid var(--border); border-radius: 4px; overflow: hidden;
}
th, td { padding: 1px 6px; text-align: left; border-bottom: 1px solid var(--border); line-height: 1.2; vertical-align: middle; }
/* Long subtheme names blow up row height when allowed to wrap. Cap the
   column width and ellipsize; the full name still shows on hover (title)
   and clicks still navigate. */
#theme-stocks-table td:nth-child(3),
#theme-stocks-table th:nth-child(3),
#tickers-table .subtheme-col,
.subtheme-cell {
  max-width: 160px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
th { background: var(--panel-2); color: var(--muted); font-weight: 600; font-size: 10px;
     text-transform: uppercase; letter-spacing: 0.03em; padding: 3px 6px; }
td.num, th.num { text-align: right; font-variant-numeric: tabular-nums; }
tr:last-child td { border-bottom: none; }
tr:hover td { background: var(--panel-2); }
tr.empty-row:hover td { background: transparent; }
tr.empty-row td {
  text-align: center; color: var(--muted); font-style: italic;
  padding: 14px 8px;
}

/* Column-set toggle. `.mode-trailing` shows trailing-return columns and
   hides the 12 monthly columns; `.mode-monthly` does the inverse. Apply
   the class to the <table> and the right cells disappear via CSS without
   re-rendering. */
table.mode-trailing .col-monthly,
table.mode-trailing .month-col,
table.mode-trailing .month-cell { display: none; }
table.mode-monthly .col-trailing { display: none; }

/* The toggle pills above each table. Plain text-button look, accent for
   the active mode. */
.table-mode-toggle {
  display: inline-flex; gap: 4px; align-items: center;
  font-size: 11px; margin-left: 12px;
}
.table-mode-toggle .muted {
  font-size: 10px; text-transform: uppercase; letter-spacing: 0.05em;
  font-weight: 600; margin-right: 2px;
}
.table-mode-toggle button {
  background: transparent; color: var(--muted); border: 1px solid var(--border);
  border-radius: 3px; padding: 1px 8px; font: inherit; font-size: 11px;
  cursor: pointer; text-transform: uppercase; letter-spacing: 0.04em;
}
.table-mode-toggle button:hover { color: var(--text); border-color: var(--accent); }
.table-mode-toggle button.active { color: var(--accent); border-color: var(--accent); font-weight: 600; }

.badge { font-size: 11px; padding: 2px 6px; border-radius: 3px; background: var(--panel-2); }
.badge-approved { background: rgba(63, 185, 80, 0.15); color: var(--green); }
.badge-pending  { background: rgba(219, 139, 31, 0.15); color: var(--orange); }
.badge-flagged  { background: rgba(248, 81, 73, 0.15);  color: var(--red); }
.badge-rejected { background: rgba(139, 148, 158, 0.15); color: var(--muted); }

dl { display: grid; grid-template-columns: 200px 1fr; gap: 8px 18px; max-width: 900px; }
dt { color: var(--muted); font-size: 12px; }
dd { margin: 0; font-size: 13px; }

.search-row { display: block; padding: 8px 0; border-bottom: 1px solid var(--border); }
.search-row:last-child { border-bottom: none; }


.logo {
  display: inline-block; vertical-align: middle;
  border-radius: 4px; object-fit: contain; flex-shrink: 0;
}
/* Tickers without logo coverage collapse out of layout entirely
   so they don't leave a 22/40/56 px gap next to the symbol text. */
.logo.logo-missing { display: none; }
.ticker-cell { display: inline-flex; align-items: center; gap: 8px; }
#ticker-detail-view #td-ticker { display: flex; align-items: center; gap: 14px; }

/* Semi relationship graph — D3 force-directed spider web. */
.graph-toolbar { display: flex; flex-direction: column; gap: 8px;
  margin: 8px 0 12px; }
.graph-toolbar-row { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.graph-edge-chip { padding: 4px 10px; border-radius: 14px; cursor: pointer;
  background: transparent; color: var(--text); font-size: 12px;
  border: 1px solid var(--border); display: inline-flex; align-items: center; gap: 6px; }
.graph-edge-chip:not(.active) { opacity: 0.5; }
.graph-swatch { display: inline-block; width: 10px; height: 10px; border-radius: 50%; }
.graph-layer-row { font-size: 11px; }
.graph-layer-swatch { display: inline-flex; align-items: center; gap: 4px;
  margin-right: 8px; text-transform: capitalize; }
.graph-wrap { width: 100%; overflow: hidden; border: 1px solid var(--border);
  border-radius: 8px; background: var(--bg); }
#semi-graph-svg { width: 100%; height: 720px; display: block; }
.graph-links line { transition: stroke-opacity 0.2s; }
.graph-links line.dim { stroke-opacity: 0.08 !important; }
.graph-node text { paint-order: stroke; stroke: rgba(13, 17, 23, 0.85);
  stroke-width: 3px; pointer-events: none; }
.graph-node.dim { opacity: 0.18; }
.graph-node circle { transition: r 0.15s; }
.graph-node:hover circle { stroke: #58a6ff; stroke-width: 2.5px; }
.graph-tooltip { position: fixed; z-index: 60; background: var(--panel);
  border: 1px solid var(--border); border-radius: 6px; padding: 8px 10px;
  font-size: 12px; pointer-events: none; box-shadow: 0 4px 12px rgba(0,0,0,0.4); }
/* Side panel that opens when a node is clicked. Fixed to the right edge
   of the viewport so it overlays the graph without reflowing it. */
.graph-panel { position: fixed; top: 80px; right: 16px; width: 380px;
  max-height: calc(100vh - 100px); overflow-y: auto; z-index: 70;
  background: var(--panel); border: 1px solid var(--border);
  border-radius: 8px; padding: 14px 16px; box-shadow: 0 8px 24px rgba(0,0,0,0.5);
  font-size: 12px; }
.graph-panel-head { display: flex; align-items: flex-start; justify-content: space-between;
  gap: 8px; margin-bottom: 6px; }
.graph-panel-name { font-size: 16px; font-weight: 700; color: #e6edf3; }
.graph-panel-layer { font-size: 11px; text-transform: capitalize; }
.graph-panel-close { background: none; border: 0; color: var(--muted);
  font-size: 22px; cursor: pointer; padding: 0 4px; line-height: 1; }
.graph-panel-close:hover { color: var(--text); }
.graph-panel-desc { margin: 4px 0 10px; color: var(--text); font-size: 12px;
  line-height: 1.5; }
.graph-panel-open { display: inline-block; margin: 4px 0 12px;
  color: var(--accent); text-decoration: none; font-weight: 600; }
.graph-panel-open:hover { text-decoration: underline; }
.graph-panel-isolate { display: inline-block; margin: 0 0 12px;
  background: rgba(88, 166, 255, 0.10); color: var(--accent);
  border: 1px solid var(--accent); border-radius: 4px;
  padding: 5px 12px; font: inherit; font-size: 12px; font-weight: 600;
  cursor: pointer; }
.graph-panel-isolate:hover { background: rgba(88, 166, 255, 0.20); }
.graph-focus-pill { background: rgba(88, 166, 255, 0.10);
  border: 1px solid var(--accent); border-radius: 6px;
  padding: 6px 12px; font-size: 12px; color: var(--text);
  display: flex; align-items: center; gap: 10px; }
.graph-focus-pill button { background: none; border: 0; color: var(--accent);
  cursor: pointer; font: inherit; font-size: 12px; text-decoration: underline;
  margin-left: auto; padding: 0; }
.graph-focus-pill button:hover { color: #79c0ff; }
.graph-panel-group { margin: 10px 0; padding-top: 8px;
  border-top: 1px dashed rgba(140,149,159,0.18); }
.graph-panel-group:first-of-type { border-top: 0; padding-top: 0; }
.graph-panel-group-title { font-size: 11px; text-transform: uppercase;
  letter-spacing: 0.06em; color: var(--accent); margin-bottom: 4px; }
/* Bottlenecks bucket — orange-tinted so the critical-path dependencies
   stand out from the regular supplier/customer lists. */
.graph-panel-bottleneck { background: rgba(251, 140, 0, 0.06);
  border: 1px solid rgba(251, 140, 0, 0.30); border-radius: 6px;
  padding: 8px 10px; margin-top: 0; padding-top: 6px; }
.graph-panel-bottleneck + .graph-panel-group { border-top: 1px dashed rgba(140,149,159,0.18); padding-top: 8px; }
.graph-panel-bottleneck .graph-panel-group-title { color: #fb8c00; }
.graph-panel-list { margin: 0; padding-left: 16px; list-style: disc;
  color: var(--text); }
.graph-panel-list li { line-height: 1.5; margin-bottom: 4px; }
.graph-panel-jump { color: #e6edf3; font-weight: 600; text-decoration: none; }
.graph-panel-jump:hover { color: var(--accent); text-decoration: underline; }

/* Semi Subsectors — drill-down page from /#semi-ecosystem. Each layer
   is a section; each subsector is a block with a name + a vertical
   list of "Company Name (TICKER)" rows. Empty subsectors render a
   muted "no tickers yet" placeholder. */
.semi-sub-page { display: flex; flex-direction: column; gap: 22px; margin-top: 14px; }
.semi-sub-layer { background: var(--panel); border: 1px solid var(--border);
  border-radius: 8px; padding: 14px 18px; }
.semi-sub-layer-title { margin: 0 0 12px; font-size: 16px; font-weight: 700;
  color: var(--accent); letter-spacing: -0.01em; }
.semi-sub-block { margin: 0 0 14px; padding: 8px 12px; background: var(--bg);
  border: 1px solid var(--border); border-radius: 6px; }
.semi-sub-block:last-child { margin-bottom: 0; }
.semi-sub-head { display: flex; align-items: baseline; gap: 10px; margin-bottom: 4px; }
.semi-sub-name { font-size: 13px; font-weight: 600; color: #e6edf3; }
.semi-sub-count { font-size: 11px; font-family: ui-monospace, "SF Mono", Menlo, monospace; }
.semi-sub-list { margin: 4px 0 2px; padding-left: 16px; list-style: disc; color: var(--text); }
.semi-sub-list li { font-size: 12px; line-height: 1.7; }
.semi-sub-name-link { color: #e6edf3; font-weight: 600; text-decoration: none; }
.semi-sub-name-link:hover { color: #ffffff; text-decoration: underline; }
.semi-sub-ticker { color: var(--accent); text-decoration: none;
  font-family: ui-monospace, "SF Mono", Menlo, monospace; font-size: 11px; }
.semi-sub-ticker:hover { text-decoration: underline; }
.semi-sub-priv { color: var(--muted);
  font-family: ui-monospace, "SF Mono", Menlo, monospace; font-size: 11px; }
/* Research-lab subsection within a subsector — sits below the companies
   list, lightly indented and visually subordinate. */
.semi-sub-labs { margin-top: 6px; padding-top: 6px;
  border-top: 1px dashed rgba(140, 149, 159, 0.18); }
.semi-sub-labs-title { font-size: 10px; text-transform: uppercase;
  letter-spacing: 0.08em; margin-bottom: 3px; }
.semi-sub-labs-list li { font-size: 12px; line-height: 1.7; }
.semi-sub-lab-link { color: #d2a8ff; font-weight: 600; text-decoration: none; }
.semi-sub-lab-link:hover { color: #e7c8ff; text-decoration: underline; }
.semi-sub-empty { font-size: 11px; padding: 2px 0 2px 4px; font-style: italic; }
.semi-sub-link { color: var(--accent); font-size: 13px; text-decoration: none;
  font-weight: 600; }
.semi-sub-link:hover { text-decoration: underline; }

/* Semiconductor Ecosystem — curated grouped list of public + private
   names across the semi value chain. Each card: logo, company name,
   ticker (or 'Private'). Grid wraps responsively. */
.semi-page { display: flex; flex-direction: column; gap: 22px; margin-top: 14px; }
.semi-group { background: var(--panel); border: 1px solid var(--border);
  border-radius: 8px; padding: 14px 16px; }
.semi-group-title { margin: 0 0 10px; font-size: 14px; font-weight: 600;
  text-transform: uppercase; letter-spacing: 0.04em; color: var(--accent); }
.semi-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 8px 14px;
}
.semi-card {
  display: flex; align-items: center; gap: 10px;
  padding: 6px 10px; border-radius: 6px; background: var(--bg);
  border: 1px solid var(--border);
}
.semi-card .logo { flex: 0 0 auto; border-radius: 4px; }
.semi-logo-placeholder { display: inline-block; width: 22px; height: 22px; flex: 0 0 auto;
  background: rgba(140, 149, 159, 0.08); border-radius: 4px; }
.semi-card-text { display: flex; flex-direction: column; min-width: 0; flex: 1; }
.semi-name { font-size: 13px; color: var(--text); overflow: hidden; text-overflow: ellipsis;
  white-space: nowrap; display: block; }
/* Company-name link: bold off-white, distinct from the blue ticker link.
   Underlines only on hover so the row stays calm at rest. */
.semi-name-link { color: #e6edf3; font-weight: 700; text-decoration: none; }
.semi-name-link:hover { color: #ffffff; text-decoration: underline; }
.semi-meta { font-size: 11px; line-height: 1.2; margin-top: 2px; }
.semi-ticker { font-family: ui-monospace, "SF Mono", Menlo, monospace; color: var(--accent);
  text-decoration: none; }
.semi-ticker:hover { text-decoration: underline; }
.semi-priv { font-family: ui-monospace, "SF Mono", Menlo, monospace; color: var(--muted);
  font-size: 11px; }

/* Taxonomy page — nested tree of Sector → Industry → Theme → Subtheme
   → Subsector → Tickers. Indented via nested padding, no horizontal
   scrolling. Each row has a chevron toggle, name, and child/ticker count. */
.taxonomy-tree { margin-top: 12px; }
.tax-node { padding: 1px 0; }
.tax-row { display: flex; align-items: baseline; gap: 8px; padding: 3px 0; }
.tax-row:hover { background: rgba(88, 166, 255, 0.04); }
.tax-toggle {
  background: none; border: none; color: var(--muted); cursor: pointer;
  font-size: 11px; padding: 0 4px; width: 22px; text-align: left;
}
.tax-toggle:hover { color: var(--text); }
.tax-name { font-weight: 500; color: var(--text); }
.tax-meta { font-size: 11px; margin-left: 8px; }
.tax-children { padding-left: 22px; border-left: 1px dotted rgba(140, 149, 159, 0.18); margin-left: 6px; }
.tax-kind-sector   > .tax-row .tax-name { font-size: 18px; font-weight: 700; letter-spacing: -0.01em; }
.tax-kind-industry > .tax-row .tax-name { font-size: 15px; font-weight: 600; color: var(--accent); }
.tax-kind-theme    > .tax-row .tax-name { font-size: 14px; font-weight: 600; }
.tax-kind-subtheme > .tax-row .tax-name { font-size: 13px; font-weight: 500; }
.tax-kind-subsector > .tax-row .tax-name { font-size: 13px; font-weight: 400; color: var(--text); }
.tax-tickers {
  display: flex; flex-wrap: wrap; gap: 4px 14px; padding-top: 6px; padding-bottom: 6px;
}
.tax-ticker {
  display: inline-flex; flex-direction: column; gap: 2px;
  font-size: 12px; color: var(--text); text-decoration: none;
  padding: 4px 10px; border-radius: 4px; background: rgba(88, 166, 255, 0.06);
  min-width: 140px;
}
.tax-ticker:hover { background: rgba(88, 166, 255, 0.14); color: var(--accent); }
.tax-ticker .muted { font-size: 10px; }

/* Quant page — factor toggle + weight blocks sit side by side above the
   composite-score table. Each factor is a self-contained card so the read
   "this factor is on, this is the weight" is obvious at a glance. */
.quant-controls { display: flex; gap: 12px; flex-wrap: wrap; align-items: stretch;
  margin: 14px 0 22px; }
.quant-factor { display: flex; flex-direction: column; gap: 8px;
  background: var(--panel); border: 1px solid var(--border); border-radius: 8px;
  padding: 10px 14px; min-width: 240px; }
.quant-factor-head { display: inline-flex; align-items: center; gap: 8px;
  font-size: 13px; color: var(--text); cursor: pointer; }
.quant-factor-head .muted { font-size: 11px; }
.quant-weight { display: inline-flex; align-items: center; gap: 8px;
  font-size: 12px; color: var(--muted); }
.quant-w-input { width: 70px; background: var(--bg); color: var(--text);
  border: 1px solid var(--border); border-radius: 6px; padding: 4px 8px;
  font: inherit; font-size: 13px; }
.quant-actions { display: flex; align-items: flex-end; }

.screener-filters { display: flex; flex-direction: column; gap: 10px; margin: 14px 0 22px; }
.screener-row { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.screener-row .screener-label { color: var(--muted); font-size: 11px; font-weight: 600;
  text-transform: uppercase; letter-spacing: 0.06em; min-width: 96px; }
.screener-months { display: inline-flex; gap: 6px; flex-wrap: wrap; }
.chip-clear { background: none; border: none; color: var(--muted); font-size: 12px;
  cursor: pointer; text-decoration: underline; padding: 4px 6px; margin-left: 6px; }
.chip-clear:hover { color: var(--text); }

.k-input { background: var(--panel); color: var(--text); border: 1px solid var(--border);
  border-radius: 6px; padding: 6px 10px; font: inherit; font-size: 13px; width: 90px;
  font-variant-numeric: tabular-nums; }
.k-input:focus { outline: none; border-color: var(--accent); }

.min-pct-grid { display: inline-flex; gap: 6px; flex-wrap: wrap; }
.min-pct { display: inline-flex; align-items: center; gap: 4px;
  background: var(--panel); border: 1px solid var(--border); border-radius: 6px;
  padding: 2px 6px 2px 8px; font-size: 12px; }
.min-pct span { color: var(--muted); font-weight: 600; min-width: 22px; }
.min-pct input { background: transparent; color: var(--text); border: none;
  font: inherit; font-size: 12px; width: 50px; padding: 4px 2px;
  font-variant-numeric: tabular-nums; }
.min-pct input:focus { outline: none; }
.min-pct:focus-within { border-color: var(--accent); }

#screener-table .screener-sub-row td { background: var(--panel-2); font-weight: 700;
  border-top: 1px solid var(--border); }
#screener-table .screener-sub-row a { color: var(--text); }
#screener-table .screener-sub-header td { opacity: 0.7; font-weight: 600; }
#screener-table .screener-tick-row td:first-child { padding-left: 24px; }

.chart-toolbar { display: flex; align-items: center; gap: 8px; margin: 4px 0 6px;
  font-size: 13px; flex-wrap: wrap; }
.chart-toolbar .muted { font-size: 11px; font-weight: 600;
  text-transform: uppercase; letter-spacing: 0.06em; margin-right: 4px; }

/* Overlay toggles — checkbox-backed pills sitting next to Range/Style chips.
   The color swatch on the left of each pill mirrors the line color in the
   chart so the legend is implicit. */
.chart-toggle {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 6px 13px; border-radius: 16px;
  background: var(--panel); color: var(--muted); border: 1px solid var(--border);
  font-size: 13px; cursor: pointer; user-select: none;
  transition: color 0.15s, border-color 0.15s, background 0.15s;
}
.chart-toggle:hover { color: var(--text); border-color: var(--accent); }
.chart-toggle input { margin: 0; cursor: pointer; }
.chart-toggle.active { color: var(--text); }
.chart-toggle[data-overlay-color="sub"].active   { border-color: #f0883e; background: rgba(240,136,62,0.10); }
.chart-toggle[data-overlay-color="sp500"].active { border-color: #6e7681; background: rgba(110,118,129,0.14); }
.chart-toggle[data-overlay-color="xlk"].active   { border-color: #a371f7; background: rgba(163,113,247,0.12); }
/* Indicator pill borders mirror the line colors in the chart so the legend
   is implicit. Keep in sync with the COLORS map in app.js. */
.chart-toggle[data-overlay-color="sma20"].active  { border-color: #ffd33d; background: rgba(255,211,61,0.10); }
.chart-toggle[data-overlay-color="sma50"].active  { border-color: #ff7b72; background: rgba(255,123,114,0.10); }
.chart-toggle[data-overlay-color="sma200"].active { border-color: #d2a8ff; background: rgba(210,168,255,0.10); }
.chart-toggle[data-overlay-color="ema9"].active   { border-color: #56d4dd; background: rgba(86,212,221,0.10); }
.chart-toggle[data-overlay-color="ema21"].active  { border-color: #7ee787; background: rgba(126,231,135,0.10); }
.chart-toggle[data-overlay-color="bb"].active     { border-color: #adbac7; background: rgba(173,186,199,0.10); }
.chart-toggle[data-overlay-color="rsi"].active    { border-color: #ffd33d; background: rgba(255,211,61,0.10); }
.chart-toggle[data-overlay-color="macd"].active   { border-color: #58a6ff; background: rgba(88,166,255,0.10); }

#tv-chart-wrap {
  position: relative;
  margin-bottom: 22px;
  border: 1px solid var(--border); border-radius: 8px; overflow: hidden;
  background: var(--bg);
  /* 75% width, centered — chart sits in a tighter frame so the page reads
     less chart-dominant and the surrounding context (returns, breadcrumb,
     compare strip) stays visible alongside it. */
  max-width: 75%;
  margin-left: auto;
  margin-right: auto;
}
/* Viewport-relative height (75% of the previous fit-above-the-fold target)
   so the chart shrinks proportionally with the width reduction. */
#tv-chart { height: max(285px, calc((100vh - 230px) * 0.75)); }
#tv-chart > div { height: 100%; }
#tv-chart-legend {
  position: absolute; top: 8px; left: 12px; z-index: 3;
  font-family: ui-monospace, "SF Mono", Menlo, monospace;
  font-size: 12px; line-height: 1.55;
  color: var(--text);
  pointer-events: none;
  background: rgba(14,17,22,0.78);
  padding: 6px 10px; border-radius: 6px; border: 1px solid var(--border);
  max-width: calc(100% - 24px);
  white-space: nowrap;
}
#tv-chart-legend .lg-title { font-weight: 600; color: var(--text); margin-right: 6px; }
#tv-chart-legend .lg-up    { color: var(--green); }
#tv-chart-legend .lg-down  { color: var(--red); }
#tv-chart-legend .lg-key   { color: var(--muted); margin-right: 3px; }
#tv-chart-legend .lg-sep   { color: var(--muted); margin: 0 6px; }
#tv-chart-legend .lg-row   { display: block; }

/* Profile page: tightened so the chart fits above the fold on a typical
   laptop (~768–900px). Ticker + company sit on one line, "← back" inline. */
#ticker-detail-view .back { margin: 0 12px 0 0; vertical-align: middle; }
#ticker-detail-view #td-ticker  { display: inline-flex; align-items: center; gap: 10px; font-size: 22px; font-weight: 700; letter-spacing: -0.02em; margin: 0 12px 0 0; vertical-align: middle; }
#ticker-detail-view #td-ticker .logo { padding: 0; border-radius: 6px; height: 32px; width: 32px; }
#ticker-detail-view #td-company { display: inline; font-size: 14px; font-weight: 500; color: var(--muted); margin: 0; }
#ticker-detail-view .chart-toolbar { margin: 2px 0; padding: 0; gap: 0; font-size: 12px; }
/* Strip all chrome from chips on the profile page — render as plain text
   links so all three toolbars fit on one or two short rows. Active state
   is just colored text (matches the overlay/indicator color for the
   per-line toggles). */
#ticker-detail-view .chart-toolbar .chip,
#ticker-detail-view .chart-toolbar .chart-toggle {
  background: transparent; border: 0; padding: 2px 7px;
  border-radius: 0; color: var(--muted); font-size: 12px;
  cursor: pointer;
}
#ticker-detail-view .chart-toolbar .chart-toggle { gap: 0; }
#ticker-detail-view .chart-toolbar .chart-toggle input { display: none; }
#ticker-detail-view .chart-toolbar .chip:hover,
#ticker-detail-view .chart-toolbar .chart-toggle:hover { color: var(--text); }
#ticker-detail-view .chart-toolbar .chip.active { color: var(--accent); font-weight: 600; }
#ticker-detail-view .chart-toolbar .chart-toggle.active { font-weight: 600; background: transparent; }
#ticker-detail-view .chart-toolbar .chart-toggle[data-overlay-color="sub"].active   { color: #f0883e; border: 0; }
#ticker-detail-view .chart-toolbar .chart-toggle[data-overlay-color="sp500"].active { color: #adbac7; border: 0; }
#ticker-detail-view .chart-toolbar .chart-toggle[data-overlay-color="xlk"].active   { color: #a371f7; border: 0; }
#ticker-detail-view .chart-toolbar .chart-toggle[data-overlay-color="sma20"].active  { color: #ffd33d; border: 0; }
#ticker-detail-view .chart-toolbar .chart-toggle[data-overlay-color="sma50"].active  { color: #ff7b72; border: 0; }
#ticker-detail-view .chart-toolbar .chart-toggle[data-overlay-color="sma200"].active { color: #d2a8ff; border: 0; }
#ticker-detail-view .chart-toolbar .chart-toggle[data-overlay-color="ema9"].active   { color: #56d4dd; border: 0; }
#ticker-detail-view .chart-toolbar .chart-toggle[data-overlay-color="ema21"].active  { color: #7ee787; border: 0; }
#ticker-detail-view .chart-toolbar .chart-toggle[data-overlay-color="rsi"].active    { color: #ffd33d; border: 0; }

/* Compare-ticker input + per-peer chips. The input is inline, narrow, and
   reuses the toolbar font size; peer chips show in their plotted color
   with an × to remove. */
#compare-input {
  margin-left: 10px;
  padding: 2px 8px; width: 90px;
  background: var(--panel); color: var(--text);
  border: 1px solid var(--border); border-radius: 4px;
  font: inherit; font-size: 12px; text-transform: uppercase;
}
#compare-input:focus { outline: none; border-color: var(--accent); }
#compare-peers { display: inline-flex; gap: 6px; align-items: center; margin-left: 6px; }
.compare-chip {
  display: inline-flex; align-items: center; gap: 4px;
  font-size: 12px; font-weight: 600;
  padding: 1px 4px 1px 6px;
}
.compare-chip .compare-rm {
  background: transparent; border: 0; color: inherit;
  font-size: 14px; line-height: 1; cursor: pointer; padding: 0 2px;
  opacity: 0.55;
}
.compare-chip .compare-rm:hover { opacity: 1; }
#ticker-detail-view dl { grid-template-columns: 220px 1fr; gap: 12px 24px; max-width: 980px; }
#ticker-detail-view dt { font-size: 14px; }
#ticker-detail-view dd { font-size: 16px; line-height: 1.55; }
#ticker-detail-view dd a { color: var(--accent); }

.returns-strip {
  display: flex; align-items: center; gap: 6px; flex-wrap: wrap;
  background: var(--panel); border: 1px solid var(--border); border-radius: 8px;
  padding: 10px 14px; margin-bottom: 16px; font-size: 13px;
}
.returns-strip .rs-label { color: var(--muted); font-size: 11px; font-weight: 600;
  text-transform: uppercase; letter-spacing: 0.06em; margin-right: 4px; }
.rs-cell { display: flex; flex-direction: column; align-items: center;
  padding: 4px 10px; border-radius: 6px; border: 1px solid var(--border);
  background: var(--panel-2); min-width: 52px; }
.rs-cell .rs-h { font-size: 10px; color: var(--muted); font-weight: 600;
  text-transform: uppercase; letter-spacing: 0.04em; }
.rs-cell .rs-v { font-size: 13px; font-weight: 600; font-variant-numeric: tabular-nums; }

.back { display: inline-block; margin-bottom: 4px; font-size: 13px; }

.primary-nav { margin: 0; display: flex; gap: 18px; }
.primary-nav a {
  color: var(--muted); padding: 6px 0; border-bottom: 2px solid transparent;
  font-size: 15px; font-weight: 600; text-decoration: none;
}
.primary-nav a:hover { color: var(--text); }
.primary-nav a.active { color: var(--text); border-bottom-color: var(--accent); }

.select-sm {
  background: var(--panel); color: var(--text); border: 1px solid var(--border);
  border-radius: 4px; padding: 3px 6px; font: inherit; font-size: 12px;
}

.expand-btn {
  background: none; border: 1px solid var(--border); border-radius: 3px;
  color: var(--muted); cursor: pointer; font-size: 9px; padding: 1px 5px;
  margin-right: 7px; line-height: 1.4; vertical-align: middle; transition: all 0.12s;
}
.expand-btn:hover { border-color: var(--accent); color: var(--text); }
.expand-btn.open  { border-color: var(--accent); color: var(--accent); }

.expanded-ticker-row td { background: var(--bg); font-size: 12px; border-bottom-color: rgba(48,54,61,0.5); }
.expanded-ticker-row:hover td { background: rgba(14,17,22,0.85); }
.expanded-ticker-row td:first-child { padding-left: 30px; }
.expanded-ticker-row .ticker-sym { font-weight: 600; margin-right: 6px; }
.expanded-ticker-row .co-name    { color: var(--muted); }

tfoot .avg-row td { background: var(--panel-2); border-top: 1px solid var(--border); border-bottom: none; }
tfoot .avg-row .avg-label { color: var(--muted); font-size: 11px; font-weight: 600;
  text-transform: uppercase; letter-spacing: 0.05em; }

table.sortable th { cursor: pointer; user-select: none; }
table.sortable th:hover { color: var(--text); }
table.sortable th.sort-asc::after  { content: " \25B2"; color: var(--accent); }
table.sortable th.sort-desc::after { content: " \25BC"; color: var(--accent); }

/* Excel-style filter button in column headers. Sits to the right of the
   header text; click opens a fixed-position popover anchored to the column. */
.th-filter-btn {
  background: transparent; border: none; color: var(--muted);
  font: inherit; font-size: 11px; line-height: 1;
  padding: 2px 4px; margin-left: 4px;
  cursor: pointer; vertical-align: middle;
  border-radius: 3px;
}
.th-filter-btn:hover { color: var(--text); background: rgba(255,255,255,0.06); }
.th-filter-btn.active { color: var(--accent); background: rgba(88,166,255,0.12); }

.col-filter-pop {
  position: fixed; z-index: 1000;
  background: var(--panel); color: var(--text);
  border: 1px solid var(--border); border-radius: 8px;
  padding: 12px 14px; min-width: 240px;
  box-shadow: 0 6px 24px rgba(0,0,0,0.5);
  font-size: 13px;
}
.col-filter-pop .cf-title {
  font-size: 11px; font-weight: 600; color: var(--muted);
  text-transform: uppercase; letter-spacing: 0.06em;
  margin-bottom: 10px;
}
.col-filter-pop label {
  display: flex; align-items: center; gap: 6px;
  margin: 6px 0; cursor: pointer;
  font-variant-numeric: tabular-nums;
}
.col-filter-pop label input[type="radio"] { margin: 0; }
.col-filter-pop .cf-num {
  width: 64px; padding: 3px 6px;
  background: var(--bg); color: var(--text);
  border: 1px solid var(--border); border-radius: 4px;
  font: inherit; font-size: 13px;
  font-variant-numeric: tabular-nums;
}
.col-filter-pop .cf-num:focus { outline: none; border-color: var(--accent); }
.col-filter-pop .cf-actions {
  display: flex; gap: 8px; margin-top: 12px;
  padding-top: 10px; border-top: 1px solid var(--border);
}
.col-filter-pop .cf-actions .btn { font-size: 12px; padding: 4px 10px; }

.monthly-filter-btn { font-size: 12px; padding: 2px 10px; }
.clear-filters-link {
  background: transparent; color: var(--muted); border: 0; padding: 2px 4px;
  font: inherit; cursor: pointer; vertical-align: middle;
  border-radius: 3px;
}
.clear-filters-link:hover { background: rgba(248, 81, 73, 0.12); color: var(--text); }
.clear-filters-link svg { display: block; }

/* All-stocks pagination footer. */
.pager {
  display: flex; gap: 4px; align-items: center; justify-content: center;
  margin: 10px 0 6px; flex-wrap: wrap;
}
.pager .pg-btn {
  background: var(--panel); color: var(--text);
  border: 1px solid var(--border); border-radius: 3px;
  padding: 2px 8px; font: inherit; font-size: 11px; cursor: pointer;
}
.pager .pg-btn:hover:not(:disabled) { border-color: var(--accent); }
.pager .pg-btn:disabled { opacity: 0.4; cursor: not-allowed; }
.pager .pg-btn.active { background: var(--accent); color: var(--bg); border-color: var(--accent); font-weight: 600; }
.pager .pg-gap { color: var(--muted); padding: 0 4px; font-size: 11px; }

/* Selection column on the Stocks table — narrow, centered checkbox. */
th.sel-col, td.sel-col {
  width: 26px; text-align: center; padding-left: 6px; padding-right: 6px;
}
.sel-col input[type="checkbox"] { margin: 0; cursor: pointer; }

/* Selection bar sits above the Stocks table when any row is selected. */
.selection-bar {
  display: flex; align-items: center; gap: 10px;
  margin: 0 0 6px; padding: 6px 10px;
  background: var(--panel-2); border: 1px solid var(--border); border-radius: 4px;
  font-size: 12px;
}
.selection-bar .btn { font-size: 12px; padding: 3px 12px; }
.link-btn {
  background: transparent; color: var(--muted); border: 0; padding: 0;
  font: inherit; font-size: 11px; cursor: pointer; text-decoration: underline;
  text-underline-offset: 2px;
}
.link-btn:hover { color: var(--text); }

/* Charts page — Finviz-style responsive grid of mini line charts. */
.charts-toolbar {
  display: flex; align-items: center; gap: 6px; flex-wrap: wrap;
  margin: 0 0 10px;
}
.charts-toolbar .muted {
  font-size: 10px; text-transform: uppercase; letter-spacing: 0.05em;
  font-weight: 600; margin-right: 4px;
}
.charts-toolbar .chip {
  font-size: 11px; padding: 2px 8px;
}
/* Flex + centered so partial rows stay middle-aligned. Fixed card width
   (~25% bigger than the original 280×140) so they all share the same size
   regardless of how many fit. */
.charts-grid {
  display: flex; flex-wrap: wrap; gap: 10px;
  justify-content: center;
}
.chart-card {
  flex: 0 0 525px;
  background: var(--panel); border: 1px solid var(--border);
  border-radius: 4px; padding: 6px 8px 2px;
  overflow: hidden;
}
.chart-card-head {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 8px; font-size: 12px; padding: 0 2px;
}
.chart-card-sym { font-weight: 600; color: var(--text); font-size: 13px; }
.chart-card-sym:hover { color: var(--accent); text-decoration: none; }
.chart-card-kratio { font-weight: 400; font-size: 11px; margin-left: 4px; }
.chart-card-change { font-variant-numeric: tabular-nums; font-size: 11px; }
.chart-card-canvas { width: 100%; height: 263px; }

.card-sel-label { display: inline-flex; align-items: center; cursor: pointer; margin-right: 6px; }
.card-sel { margin: 0; cursor: pointer; }

/* Big overlay-comparison chart that appears above the mini grid when one
   or more cards are checkbox-selected. Spans the full content width. */
.charts-overlay-wrap {
  background: var(--panel); border: 1px solid var(--border); border-radius: 6px;
  padding: 10px 12px; margin: 0 0 14px;
  /* Without overflow: hidden the inner lightweight-charts canvas was free
     to push the wrap wider than the viewport, which made the parent
     section grow horizontally and left the chart truncated at smaller
     browser widths. Clipping the wrap forces the canvas to obey the
     ResizeObserver's measured parent width. */
  overflow: hidden;
}
.charts-overlay-legend {
  display: flex; flex-wrap: wrap; gap: 12px; margin-bottom: 6px;
  font-size: 12px; font-variant-numeric: tabular-nums;
}
.ov-swatch { display: inline-flex; align-items: center; gap: 6px; color: var(--text); }
.ov-dot { display: inline-block; width: 10px; height: 10px; border-radius: 2px; }
.charts-overlay-chart { width: 100%; height: 480px; }
.monthly-filter-btn.active { color: var(--accent); border-color: var(--accent); }
.monthly-filter-pop {
  min-width: 460px;
  max-height: calc(100vh - 80px);
  overflow: auto;
}
.monthly-filter-pop .mf-help { font-size: 11px; margin-bottom: 8px; }
.monthly-filter-pop .mf-grid {
  width: 100%; border-collapse: collapse;
  font-variant-numeric: tabular-nums;
}
.monthly-filter-pop .mf-grid th {
  font-size: 11px; font-weight: 600; color: var(--muted);
  text-align: center; padding: 6px 4px;
  border-bottom: 1px solid var(--border);
}
.monthly-filter-pop .mf-grid th:first-child { text-align: left; }
.monthly-filter-pop .mf-grid td { padding: 4px 4px; vertical-align: middle; text-align: center; }
.monthly-filter-pop .mf-grid .mf-month {
  font-size: 12px; color: var(--text); white-space: nowrap;
  padding-right: 10px; text-align: left;
}
.monthly-filter-pop .mf-pick {
  display: inline-flex; border: 1px solid var(--border); border-radius: 4px; overflow: hidden;
}
.monthly-filter-pop .mf-pick button {
  background: transparent; color: var(--muted);
  border: 0; padding: 2px 8px; font-size: 11px; cursor: pointer;
  border-right: 1px solid var(--border);
}
.monthly-filter-pop .mf-pick button:last-child { border-right: 0; }
.monthly-filter-pop .mf-pick button:hover { background: rgba(255,255,255,0.04); color: var(--text); }
.monthly-filter-pop .mf-pick button.on {
  background: var(--accent); color: var(--bg); font-weight: 600;
}

/* Month return columns — tighter than the 1D/1W/.../5Y columns since there
   are 12 of them. Tables that grow past viewport width scroll horizontally
   inside their parent section. */
.month-col, .month-cell {
  font-size: 11px; padding-left: 4px; padding-right: 4px;
  white-space: nowrap;
}
.month-col { color: var(--muted); }
main section { overflow-x: auto; }

/* Charts view opts out — the wide tables don't appear here, and the
   default overflow-x:auto would let the lightweight-charts canvas push
   #charts-view wider than the viewport, defeating the ResizeObserver
   on the overlay chart and leaving it truncated at smaller window
   widths. Clip and force children to fit. */
#charts-view { overflow-x: hidden; min-width: 0; }
#charts-view > *, #charts-view .charts-overlay-wrap,
#charts-view .charts-overlay-chart, #charts-view #charts-grid { min-width: 0; max-width: 100%; }

.ret-pos { color: var(--green); }
.ret-neg { color: var(--red); }

/* ── Finviz-style ticker page grid ───────────────────────────────────────
   Sector chain row + dense 8-column stat grid above the chart. Mirrors
   the visual density of elite.finviz.com/quote: very small font, narrow
   row height, hairline borders, green/red color on positive/negative
   numbers. Each cell is {key, value} laid out horizontally. */

#ticker-detail-view #td-identity {
  font-style: italic;
  font-size: 12px;
  margin: 6px 0 8px;
  color: var(--muted);
}
#ticker-detail-view #td-identity a {
  color: var(--accent);
  text-decoration: none;
}
#ticker-detail-view #td-identity a:hover { text-decoration: underline; }
#ticker-detail-view #td-identity .td-identity-tail {
  display: block;
  margin-top: 2px;
  font-style: normal;
  font-size: 11px;
  color: var(--muted);
}

#ticker-detail-view .td-finviz-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0;
  margin: 8px 0 12px;
  border: 1px solid var(--border);
  border-radius: 4px;
  overflow: hidden;
  background: var(--panel);
}
#ticker-detail-view .td-fv-row {
  display: grid;
  grid-template-columns: repeat(8, minmax(0, 1fr));
  gap: 0;
  border-bottom: 1px solid var(--border);
}
#ticker-detail-view .td-fv-row:last-child { border-bottom: 0; }
#ticker-detail-view .td-fv-cell {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 6px;
  padding: 4px 8px;
  font-size: 11px;
  line-height: 1.4;
  border-right: 1px solid var(--border);
  min-width: 0;
  overflow: hidden;
}
#ticker-detail-view .td-fv-cell:last-child { border-right: 0; }
#ticker-detail-view .td-fv-cell:hover { background: rgba(255,255,255,0.03); }
#ticker-detail-view .td-fv-k {
  color: var(--muted);
  text-transform: none;
  letter-spacing: 0;
  font-weight: 400;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
#ticker-detail-view .td-fv-v {
  color: var(--text);
  font-weight: 600;
  text-align: right;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  font-variant-numeric: tabular-nums;
}
#ticker-detail-view .td-fv-v.ret-pos { color: var(--green); }
#ticker-detail-view .td-fv-v.ret-neg { color: var(--red); }

/* Narrow screens: fall back from 8 to 4 columns so cells stay legible. */
@media (max-width: 900px) {
  #ticker-detail-view .td-fv-row { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
@media (max-width: 540px) {
  #ticker-detail-view .td-fv-row { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* ── Peers strip (below the chart) ────────────────────────────────────────
   Horizontal-scrolling row of compact peer cards. Each card links to that
   ticker's profile. Designed to be skimmable: ticker, market cap, K-ratio,
   1Y return — same fields the rest of the site uses to compare tickers. */
#ticker-detail-view #td-peers { margin: 14px 0 16px; }
#ticker-detail-view #td-peers:empty { display: none; }
#ticker-detail-view .td-peers-head {
  display: flex;
  align-items: baseline;
  gap: 8px;
  font-size: 12px;
  margin: 0 0 6px;
}
#ticker-detail-view .td-peers-title {
  font-weight: 700;
  font-size: 13px;
  color: var(--text);
  letter-spacing: 0.01em;
}
#ticker-detail-view .td-peers-head a { color: var(--accent); text-decoration: none; }
#ticker-detail-view .td-peers-head a:hover { text-decoration: underline; }
#ticker-detail-view .td-peers-strip {
  display: flex;
  flex-wrap: nowrap;
  gap: 6px;
  overflow-x: auto;
  padding: 2px 0 6px;
  scrollbar-width: thin;
}
#ticker-detail-view .td-peer-card {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 10px;
  border: 1px solid var(--border);
  border-radius: 4px;
  background: var(--panel);
  font-size: 11px;
  color: var(--text);
  text-decoration: none;
  white-space: nowrap;
  flex: 0 0 auto;
  transition: border-color 90ms ease, background 90ms ease;
}
#ticker-detail-view .td-peer-card:hover {
  border-color: var(--accent);
  background: rgba(255,255,255,0.04);
}
#ticker-detail-view .td-peer-card .logo {
  height: 18px; width: 18px; border-radius: 4px;
}
#ticker-detail-view .td-peer-sym { font-weight: 700; }
#ticker-detail-view .td-peer-mcap,
#ticker-detail-view .td-peer-k { font-variant-numeric: tabular-nums; }
#ticker-detail-view .td-peer-r1y {
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  min-width: 50px;
  text-align: right;
}

/* ── Annual revenue chart ─────────────────────────────────────────────── */
#ticker-detail-view #td-revenue-chart { margin: 16px 0 18px; }
#ticker-detail-view #td-revenue-chart:empty { display: none; }
#ticker-detail-view .td-rev-head {
  display: flex;
  align-items: baseline;
  gap: 8px;
  font-size: 12px;
  margin: 0 0 4px;
}
#ticker-detail-view .td-rev-title {
  font-weight: 700;
  font-size: 13px;
  color: var(--text);
  letter-spacing: 0.01em;
}
#ticker-detail-view .td-rev-svg {
  display: block;
  width: 100%;
  height: auto;
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 4px;
}
#ticker-detail-view .td-rev-bar       { fill: #4DD0E1; opacity: 0.75; }
#ticker-detail-view .td-rev-bar.td-rev-up   { fill: var(--green); opacity: 0.80; }
#ticker-detail-view .td-rev-bar.td-rev-down { fill: var(--red);   opacity: 0.80; }
#ticker-detail-view .td-rev-bar-label {
  fill: var(--text);
  font-size: 10px;
  font-variant-numeric: tabular-nums;
  font-weight: 600;
}
#ticker-detail-view .td-rev-bar-year {
  fill: var(--muted);
  font-size: 10px;
  font-variant-numeric: tabular-nums;
}
#ticker-detail-view .td-rev-yoy {
  font-size: 10px;
  font-variant-numeric: tabular-nums;
  font-weight: 600;
}
#ticker-detail-view .td-rev-yoy-up   { fill: var(--green); }
#ticker-detail-view .td-rev-yoy-down { fill: var(--red); }

/* ──────────────────────────────────────────────────────────────────────
   MOBILE OVERLAY (mob.770-617-6983.com)
   ──────────────────────────────────────────────────────────────────────
   The .mobile-site class is set on <html> by an inline script in
   index.html when the page is served on mob.* (or with ?mobile=1).
   Same worker, same D1, same JS — these rules just retarget the layout
   for a phone-sized viewport. Desktop visitors at 770-617-6983.com see
   no change.

   Strategy: avoid restructuring components, just collapse the controls,
   bump touch-target sizes, allow tables to scroll horizontally with a
   sticky left column so the ticker/name stays visible while a finger
   pans through monthly returns. */

html.mobile-site { font-size: 14px; }

/* iOS notch / dynamic-island handling. viewport-fit=cover in the meta
   lets content flow under the safe area; env(safe-area-inset-*) pushes
   our chrome back inside it. Only matters for installed PWAs and
   landscape mobile browsers, but no harm on others. */
html.mobile-site body { padding-bottom: max(70px, env(safe-area-inset-bottom)); }
html.mobile-site header {
  padding-top: max(6px, env(safe-area-inset-top));
  padding-left: max(10px, env(safe-area-inset-left));
  padding-right: max(10px, env(safe-area-inset-right));
}
html.mobile-site .mob-nav-toggle {
  top: max(10px, env(safe-area-inset-top));
  right: max(10px, env(safe-area-inset-right));
}
html.mobile-site .mob-top-btn {
  right: max(14px, calc(env(safe-area-inset-right) + 4px));
  bottom: max(80px, calc(env(safe-area-inset-bottom) + 70px));
}
html.mobile-site .site-footer {
  bottom: max(8px, env(safe-area-inset-bottom));
}
html.mobile-site .selection-bar:not([hidden]) {
  padding-bottom: max(10px, env(safe-area-inset-bottom));
  padding-left: max(12px, env(safe-area-inset-left));
  padding-right: max(12px, env(safe-area-inset-right));
}

/* Smoother horizontal panning on tables, peers strip, and charts grid.
   touch-action: pan-x tells the browser "this gesture is horizontal" so
   the vertical scroll on the parent stays responsive — no laggy
   diagonal-pan handoff. overscroll-behavior contains the bounce so a
   sideways pan doesn't trigger pull-to-refresh. */
html.mobile-site main section,
html.mobile-site .td-peers-strip,
html.mobile-site .top-nav {
  overscroll-behavior-x: contain;
  -webkit-overflow-scrolling: touch;
}
html.mobile-site main section { touch-action: pan-x pan-y; }
html.mobile-site .td-peers-strip,
html.mobile-site .top-nav { touch-action: pan-x; }

/* Header: keep the logo + brand, stack the nav below as a horizontally-
   scrollable strip. Search drops to its own line so the touch target is
   the full width. */
html.mobile-site header { padding: 6px 10px 4px; }
html.mobile-site .header-row {
  flex-direction: column;
  align-items: stretch;
  gap: 6px;
}
html.mobile-site .site-brand { font-size: 18px; gap: 6px; }
html.mobile-site .site-logo  { height: 26px; }

/* Hamburger button: three stacked bars that morph to an X when open.
   Desktop hides it via display:none — only .mobile-site shows it.
   Fixed-position so it stays accessible while the user scrolls
   through a long page (and after the header scrolls off-screen). */
.mob-nav-toggle { display: none; }
html.mobile-site .mob-nav-toggle {
  display: inline-flex;
  flex-direction: column;
  justify-content: space-between;
  width: 36px;
  height: 28px;
  padding: 4px 0;
  border: 0;
  background: rgba(13, 17, 22, 0.86);
  border-radius: 6px;
  cursor: pointer;
  position: fixed;
  right: 10px;
  top: 10px;
  z-index: 100;
  backdrop-filter: blur(4px);
}
html.mobile-site .mob-nav-toggle span:nth-child(1),
html.mobile-site .mob-nav-toggle span:nth-child(2),
html.mobile-site .mob-nav-toggle span:nth-child(3) {
  margin: 0 auto;
  width: 22px;
}
html.mobile-site .mob-nav-toggle span {
  display: block;
  height: 2px;
  background: var(--text);
  border-radius: 2px;
  transition: transform 160ms ease, opacity 120ms ease;
}
html.mobile-site .mob-nav-toggle[aria-expanded="true"] span:nth-child(1) {
  transform: translateY(8px) rotate(45deg);
}
html.mobile-site .mob-nav-toggle[aria-expanded="true"] span:nth-child(2) {
  opacity: 0;
}
html.mobile-site .mob-nav-toggle[aria-expanded="true"] span:nth-child(3) {
  transform: translateY(-8px) rotate(-45deg);
}

/* primary-nav becomes a slide-in drawer on mobile. It's pre-rendered
   off-canvas (right: -100%) and animated in via right: 0 when the
   hamburger gets aria-expanded="true". Background dim handled by a
   ::before pseudo-element on <body> when the drawer is open. */
html.mobile-site .primary-nav {
  position: fixed;
  top: 0;
  right: -80%;
  width: 78%;
  max-width: 320px;
  height: 100vh;
  background: var(--panel);
  border-left: 1px solid var(--border);
  flex-direction: column;
  align-items: stretch;
  gap: 0;
  padding: 60px 0 20px;
  overflow-y: auto;
  transition: right 220ms ease;
  z-index: 90;
  box-shadow: -8px 0 24px rgba(0, 0, 0, 0.4);
}
html.mobile-site.nav-open .primary-nav { right: 0; }
html.mobile-site .primary-nav a {
  display: block;
  padding: 12px 18px;
  font-size: 15px;
  border-bottom: 1px solid var(--border);
  text-decoration: none;
  color: var(--text);
}
html.mobile-site .primary-nav a.active {
  background: rgba(88, 166, 255, 0.08);
  color: var(--accent);
  border-left: 3px solid var(--accent);
  padding-left: 15px;
}

/* Scrim behind the open drawer. */
html.mobile-site.nav-open::after {
  content: "";
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.45);
  z-index: 80;
  animation: mob-scrim-in 180ms ease;
}
@keyframes mob-scrim-in { from { opacity: 0; } to { opacity: 1; } }
html.mobile-site #search {
  width: 100%;
  font-size: 16px;          /* iOS won't zoom on focus when ≥16px */
  padding: 8px 10px;
  border-radius: 6px;
}
html.mobile-site .meta-strip {
  font-size: 11px;
  padding: 2px 10px;
  color: var(--muted);
  display: flex;
  flex-wrap: wrap;
  gap: 4px 12px;
}

/* Breadcrumb row stays at the top of the viewport while you scroll — it
   doubles as the always-visible site-map indicator now that the page
   h2s aren't reliably present everywhere. */
html.mobile-site .breadcrumb-bar {
  position: sticky;
  top: 0;
  z-index: 6;
  background: var(--bg);
  border-bottom: 1px solid var(--border);
  padding: 6px 10px 4px;
  font-size: 13px;
  flex-wrap: wrap;
}
html.mobile-site .breadcrumb-bar .back { font-size: 14px; padding: 4px 0; }
html.mobile-site .breadcrumb {
  font-size: 12px;
  flex: 1 1 auto;
  min-width: 0;
  /* Cap to 2 lines so a really long subsector name doesn't push the
     content way down. -webkit-line-clamp degrades gracefully in
     browsers that don't support it (just shows full text). */
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
  line-height: 1.35;
}

/* Magnifying glass button on the mobile breadcrumb. Desktop hides it. */
.mob-search-btn { display: none; }
html.mobile-site .mob-search-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--border);
  background: var(--panel);
  border-radius: 6px;
  width: 32px;
  height: 32px;
  font-size: 14px;
  cursor: pointer;
  margin-left: auto;
}
html.mobile-site .mob-search-btn:hover { border-color: var(--accent); }

/* Column filter dropdowns (sortable-table header arrows): bump the
   target size and widen the pop to be tappable on phone. */
html.mobile-site .th-filter-btn { font-size: 14px; padding: 4px 6px; }
html.mobile-site .col-filter-pop {
  min-width: 200px;
  max-width: calc(100vw - 24px);
  font-size: 13px;
  padding: 12px;
}
html.mobile-site .col-filter-pop label {
  padding: 8px 0;
  font-size: 13px;
}
html.mobile-site .col-filter-pop .cf-num {
  font-size: 14px;
  padding: 8px 10px;
}
html.mobile-site .col-filter-pop .cf-actions button {
  min-height: 36px;
  padding: 8px 14px;
}

/* Header isn't sticky on mobile — once you scroll past it, the
   sticky breadcrumb takes over as the persistent navigation cue.
   The hamburger lives in the header so it'll be off-screen when
   the user is deep in a long table — they can swipe up or scroll
   to top to reach it. */

/* Main content: tighter side padding so tables and charts use the
   maximum available width. */
html.mobile-site main { padding: 4px 10px 60px; }

/* Page-heading h2 styling on mobile — non-sticky. The sticky
   breadcrumb-bar above main already handles "where am I" persistence
   on scroll; making the h2 ALSO sticky at top:0 caused it to fight the
   breadcrumb for the same viewport pixels. Keep the size + dividing
   border but let it scroll with the content. */
html.mobile-site main section h2 {
  margin: 0 -10px 8px;
  padding: 8px 10px;
  border-bottom: 1px solid var(--border);
  font-size: 16px;
}
html.mobile-site #ticker-detail-view h2#td-ticker {
  margin: 0 -10px;
  padding: 6px 10px;
  border-bottom: 1px solid var(--border);
}

/* Tables: allow horizontal scroll inside each section (already the
   default), make the header row sticky, bump padding so taps land on
   the right row, and pin the ticker/name column to the left so the
   row label stays visible while scrolling sideways through monthly
   columns. Top-left corner cell (sticky in both axes) gets a higher
   z-index so it sits above the rest. */
html.mobile-site table {
  font-size: 12px;
  border-collapse: separate;
  border-spacing: 0;
}
html.mobile-site thead th {
  position: sticky;
  top: 0;
  background: var(--panel);
  z-index: 2;
}
html.mobile-site tbody td,
html.mobile-site thead th {
  padding: 6px 8px;
  white-space: nowrap;
}
html.mobile-site tbody tr { min-height: 38px; }

/* Sticky-left first content column on the main data tables. The
   leftmost columns are usually a select checkbox (.sel-col) and a
   ticker / name cell. We pin both so they form a fixed left "rail"
   while the user pans horizontally. */
html.mobile-site #stocks-table tbody td:nth-child(1),
html.mobile-site #stocks-table thead th:nth-child(1),
html.mobile-site #quant-table tbody td:nth-child(1),
html.mobile-site #quant-table thead th:nth-child(1),
html.mobile-site #screener-table tbody td:nth-child(1),
html.mobile-site #screener-table thead th:nth-child(1),
html.mobile-site #themes-table tbody td:nth-child(1),
html.mobile-site #themes-table thead th:nth-child(1) {
  position: sticky;
  left: 0;
  background: var(--bg);
  z-index: 1;
}
html.mobile-site #stocks-table tbody td:nth-child(2),
html.mobile-site #stocks-table thead th:nth-child(2),
html.mobile-site #quant-table tbody td:nth-child(2),
html.mobile-site #quant-table thead th:nth-child(2) {
  position: sticky;
  left: 32px;          /* width of the select-checkbox column */
  background: var(--bg);
  z-index: 1;
  box-shadow: 4px 0 6px -4px rgba(0, 0, 0, 0.6);
}
html.mobile-site thead th:nth-child(1),
html.mobile-site thead th:nth-child(2) {
  background: var(--panel);
  z-index: 3;          /* above both column-sticky and row-sticky bodies */
}

/* Buttons / chips: enforce a 36px+ touch target. */
html.mobile-site .chip,
html.mobile-site .btn,
html.mobile-site button {
  min-height: 36px;
  padding: 6px 10px;
  font-size: 13px;
}

/* Quant filter cards stack to a single column and expand. */
html.mobile-site .quant-controls {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
html.mobile-site .quant-factor {
  width: 100%;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6px 10px;
  padding: 8px 10px;
}
html.mobile-site .quant-factor-head { grid-column: 1 / -1; }
html.mobile-site .quant-w-input { font-size: 16px; padding: 6px 8px; }

/* Recent-tickers strip on the home (themes) view. Compact pill-row
   linking to the user's last 8 ticker pages. Same look as the peers
   strip on the ticker page. Hidden when empty. */
.recent-tickers { margin: 6px 0 14px; }
.recent-tickers:empty { display: none; }
.recent-tickers-head {
  display: flex;
  align-items: baseline;
  gap: 8px;
  margin: 0 0 4px;
  font-size: 12px;
}
.recent-tickers-title {
  font-weight: 700;
  font-size: 13px;
  color: var(--text);
}
.recent-tickers-strip {
  display: flex;
  flex-wrap: nowrap;
  gap: 6px;
  overflow-x: auto;
  padding: 2px 0 4px;
}
.recent-ticker-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 10px;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--panel);
  color: var(--text);
  text-decoration: none;
  font-size: 12px;
  white-space: nowrap;
  flex: 0 0 auto;
}
.recent-ticker-chip:hover { border-color: var(--accent); }
.recent-ticker-chip .logo { height: 16px; width: 16px; border-radius: 3px; }
.recent-ticker-sym { font-weight: 700; }

/* Quant action buttons row: the Reset / Share pair gets consistent
   spacing without inline styles. */
#quant-reset + .btn,
#quant-reset ~ #quant-share { margin-left: 8px; }

/* Top-of-viewport progress bar. Hidden by default. .loading on body
   makes the bar visible and animates a sweeping indeterminate
   gradient — set whenever any /api/* fetch is in flight. */
.global-progress {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: 2px;
  background: transparent;
  pointer-events: none;
  z-index: 200;
  overflow: hidden;
  visibility: hidden;
}
body.loading .global-progress {
  visibility: visible;
}
body.loading .global-progress::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to right, transparent 0%, var(--accent) 50%, transparent 100%);
  animation: gp-sweep 1.1s ease-in-out infinite;
}
@keyframes gp-sweep {
  from { transform: translateX(-100%); }
  to   { transform: translateX(100%); }
}

/* iOS-safe: any number/text input gets ≥16px on mobile so focus
   doesn't trigger the auto-zoom-in browser hack. */
html.mobile-site input[type="number"],
html.mobile-site input[type="text"],
html.mobile-site input[type="search"],
html.mobile-site input[type="email"],
html.mobile-site input[type="url"] {
  font-size: 16px;
}

/* Sub-industry / ticker page rows that pair a title with an action
   button (e.g. CSV export) need to wrap on phone instead of squishing. */
html.mobile-site .row {
  flex-wrap: wrap;
  gap: 8px;
}
html.mobile-site #csv-export {
  font-size: 12px;
  padding: 8px 12px;
  min-height: 36px;
}

/* Stocks / screener / quant tables: cap their visible height so the
   filter UI doesn't push the data off-screen. */
html.mobile-site #stocks-table,
html.mobile-site #screener-table,
html.mobile-site #quant-table { font-size: 11.5px; }

/* Ticker page Finviz grid: drop straight to 2 columns and collapse all
   but the first row by default. A "Show all stats" toggle (rendered by
   renderFinvizGrid) expands the rest. */
html.mobile-site #ticker-detail-view .td-fv-row {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
html.mobile-site #ticker-detail-view .td-fv-cell {
  padding: 5px 8px;
  font-size: 12px;
}
html.mobile-site #ticker-detail-view .td-finviz-grid:not(.td-finviz-expanded) .td-fv-row:nth-child(n+2) {
  display: none;
}
html.mobile-site #ticker-detail-view .td-fv-expand {
  display: block;
  width: 100%;
  margin: 8px 0;
  padding: 8px 12px;
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 4px;
  color: var(--accent);
  font-size: 13px;
  font-weight: 600;
  text-align: center;
  cursor: pointer;
}
/* Desktop: hide the expand button entirely. */
.td-fv-expand { display: none; }

/* TradingView lightweight-charts container: keep full width but
   shorter height so the toolbar + chart fit on a phone screen. */
html.mobile-site #tv-chart-wrap { margin-top: 6px; }
html.mobile-site #tv-chart { height: 260px !important; }
html.mobile-site .chart-card-canvas { height: 180px !important; }

/* Ticker page: the price-chart toolbars use very tight padding on
   desktop. On mobile, wrap them generously and give each chip a real
   touch target. Compare overlays (Subtheme / S&P / XLK / peer input)
   also wrap onto multiple lines so they don't truncate. */
html.mobile-site #ticker-detail-view .chart-toolbar {
  flex-wrap: wrap;
  gap: 4px 6px;
  margin: 4px 0;
  padding: 4px 0;
  font-size: 13px;
}
html.mobile-site #ticker-detail-view .chart-toolbar .chip,
html.mobile-site #ticker-detail-view .chart-toolbar .chart-toggle {
  min-height: 32px;
  padding: 6px 9px;
  font-size: 12px;
}
html.mobile-site #compare-input {
  width: 110px;
  min-height: 32px;
  font-size: 13px;
}
html.mobile-site #compare-peers .compare-peer {
  font-size: 12px;
  padding: 4px 8px;
}

/* Charts grid mini-card toolbars (the Range / SMA / Sort row above
   the small charts). Same wrap + chip bump as the ticker page. */
html.mobile-site .charts-toolbar {
  flex-wrap: wrap;
  gap: 4px 6px;
  padding: 6px 0;
}
html.mobile-site .charts-toolbar .chip {
  min-height: 32px;
  padding: 6px 9px;
  font-size: 12px;
}

/* Charts grid: single column on phone. */
html.mobile-site #charts-grid { grid-template-columns: 1fr; }

/* Multi-stock overlay chart: cap height so it doesn't dominate the
   viewport, and shrink the legend swatches. */
html.mobile-site .charts-overlay-chart { height: 280px !important; }
html.mobile-site .charts-overlay-legend {
  font-size: 11px;
  gap: 4px 10px;
  flex-wrap: wrap;
}
html.mobile-site .charts-overlay-wrap { margin: 8px 0 14px; }

/* Peers strip stays horizontal-scroll, but cards are restructured so
   the most-informative pieces (ticker + 1Y return) stack vertically and
   the strip pans faster. Logo + mcap + K are hidden to keep the strip
   thumb-skimmable; the user can tap into the profile for the rest. */
html.mobile-site .td-peer-card {
  font-size: 12px;
  padding: 7px 10px;
  flex-direction: column;
  align-items: flex-start;
  gap: 2px;
  min-width: 80px;
}
html.mobile-site .td-peer-card .logo { display: none; }
html.mobile-site .td-peer-card .td-peer-mcap,
html.mobile-site .td-peer-card .td-peer-k { display: none; }
html.mobile-site .td-peer-card .td-peer-sym { font-size: 13px; }
html.mobile-site .td-peer-card .td-peer-r1y { min-width: 0; text-align: left; }

/* Annual revenue chart on mobile: text labels grow so they're
   readable at thumb distance. The chart aspect ratio shifts a bit
   taller so individual bars are easier to tap. */
html.mobile-site #ticker-detail-view .td-rev-svg { background: var(--panel); aspect-ratio: 16 / 9; }
html.mobile-site #ticker-detail-view .td-rev-bar-label { font-size: 11px; font-weight: 700; }
html.mobile-site #ticker-detail-view .td-rev-bar-year  { font-size: 10px; }
html.mobile-site #ticker-detail-view .td-rev-yoy        { font-size: 9px; }

/* Semi pages on mobile: convert the grid to a single column list. */
html.mobile-site .semi-grid { grid-template-columns: 1fr 1fr; gap: 6px; }
html.mobile-site .semi-card { padding: 8px; }

/* Semi Relationship Graph on mobile: smaller default node + edge sizes
   so the ~540-node graph reads as a structured cloud, not a hairball.
   The graph still pan/zooms (D3 zoom is enabled), so the user can dig
   in. Edge labels (the chip swatches) wrap as needed. */
html.mobile-site .graph-wrap {
  height: calc(100vh - 220px);
  min-height: 360px;
  max-height: 600px;
}
html.mobile-site #semi-graph-svg { height: 100% !important; }
html.mobile-site .graph-toolbar { flex-wrap: wrap; gap: 4px; }
html.mobile-site .graph-toolbar .chip { min-height: 30px; font-size: 11px; padding: 5px 8px; }
html.mobile-site .graph-layer-row { font-size: 10px; }
html.mobile-site .graph-tooltip { font-size: 12px; max-width: 260px; }
html.mobile-site .graph-panel  { width: 95vw; padding: 12px; font-size: 13px; }

/* Selection bar (sel-charts-btn, etc.) becomes a fixed-bottom toolbar
   on phone so it's always reachable. Hidden when no rows are
   selected (the [hidden] attribute already does that). The body gets
   extra bottom padding so the table's last row doesn't slide under. */
html.mobile-site .selection-bar:not([hidden]) {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 50;
  background: var(--panel);
  border-top: 1px solid var(--border);
  padding: 10px 12px;
  margin: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  box-shadow: 0 -4px 12px rgba(0, 0, 0, 0.4);
}
html.mobile-site .selection-bar:not([hidden]) .btn,
html.mobile-site .selection-bar:not([hidden]) button,
html.mobile-site .selection-bar:not([hidden]) .sel-charts-btn,
html.mobile-site .selection-bar:not([hidden]) .sel-clear-btn {
  min-height: 38px;
  padding: 8px 14px;
  font-size: 13px;
}
/* Pad the page bottom so the selection bar doesn't hide the last row. */
html.mobile-site body { padding-bottom: 70px; }

/* Hide the "monthly columns" cluster by default on mobile — re-shown
   when the user toggles to monthly mode. The trailing columns alone
   fit comfortably. */
html.mobile-site .month-col,
html.mobile-site .month-cell { font-size: 11px; padding: 6px 6px; }

/* Pager controls (Prev / 1 2 … N / Next) get bigger touch targets on
   mobile, with the numbered buttons compacting so only Prev/Next +
   the current page indicator stay. */
html.mobile-site #stocks-pager .pg-btn,
html.mobile-site .pg-btn {
  min-height: 38px;
  padding: 8px 12px;
  font-size: 13px;
}
html.mobile-site #stocks-pager .pg-btn:not(.active):not([data-pg="prev"]):not([data-pg="next"]),
html.mobile-site #stocks-pager .pg-gap {
  display: none;
}
html.mobile-site #stocks-pager .pg-btn.active {
  background: var(--accent);
  color: var(--bg);
  font-weight: 700;
  cursor: default;
}
html.mobile-site #stocks-pager {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 6px;
  padding: 8px 0 14px;
}

/* Monthly-vs-benchmark filter pop is desktop-sized by default
   (min-width 460px overflows a phone). Drop the min-width and let it
   fill the viewport with a small inset on mobile. */
html.mobile-site .monthly-filter-pop {
  min-width: 0;
  width: calc(100vw - 24px);
  max-width: 100%;
  left: 12px !important;
  right: 12px !important;
  max-height: calc(100vh - 120px);
}
html.mobile-site .monthly-filter-pop .mf-grid th,
html.mobile-site .monthly-filter-pop .mf-grid td { font-size: 11px; padding: 5px 3px; }
html.mobile-site .monthly-filter-pop .mf-pick button { min-height: 30px; }

/* Site-mode toggle in the footer — links desktop / mobile variants.
   Desktop: a subtle inline link at the bottom of the page. Mobile:
   a sticky pill in the lower-right corner. */
.site-footer {
  padding: 24px 20px 40px;
  text-align: center;
  border-top: 1px solid var(--border);
  margin-top: 32px;
  font-size: 11px;
}
.site-footer a {
  color: var(--muted);
  text-decoration: none;
  border: 1px solid var(--border);
  padding: 4px 10px;
  border-radius: 4px;
}
.site-footer a:hover { color: var(--accent); border-color: var(--accent); }
html.mobile-site .site-footer {
  position: sticky;
  bottom: 8px;
  margin: 28px 12px 12px;
  padding: 0;
  border: 0;
  text-align: right;
  background: transparent;
}
html.mobile-site .site-footer a {
  background: var(--panel);
  font-size: 12px;
  padding: 6px 12px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.4);
}

/* Floating "back to top" button on mobile. Hidden until JS scrolls
   past 600px. Sits above the sticky selection bar (which is z:50). */
.mob-top-btn { display: none; }
html.mobile-site .mob-top-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  position: fixed;
  right: 14px;
  bottom: 80px;
  width: 42px;
  height: 42px;
  border-radius: 50%;
  border: 1px solid var(--border);
  background: var(--panel);
  color: var(--text);
  font-size: 16px;
  font-weight: 700;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.5);
  z-index: 51;
  cursor: pointer;
}
html.mobile-site .mob-top-btn[hidden] { display: none; }
html.mobile-site .mob-top-btn:hover { color: var(--accent); border-color: var(--accent); }

/* Ticker-page #td-fields description-list: desktop is two columns
   (label / value); on mobile, stack so long descriptions ("Why it
   fits", "Primary business") use the full width. */
html.mobile-site #ticker-detail-view dl,
html.mobile-site dl {
  grid-template-columns: 1fr;
  gap: 4px 0;
}
html.mobile-site #ticker-detail-view dl dt,
html.mobile-site dl dt {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--muted);
  margin-top: 8px;
}
html.mobile-site #ticker-detail-view dl dd,
html.mobile-site dl dd {
  margin: 0 0 4px;
  font-size: 13px;
  line-height: 1.45;
}

/* Outdoor / sunlight contrast: bump the muted-grey tone a hair on
   mobile so secondary text stays legible in bright light. */
html.mobile-site {
  --muted: #aab1bb;
}

/* Taxonomy tree on mobile: full-width rows with a fat-finger toggle
   target, name wraps instead of truncating. Tap a row (even outside
   the ▶/▼ glyph) to toggle. */
html.mobile-site .tax-row {
  padding: 8px 0;
  gap: 10px;
  flex-wrap: wrap;
}
html.mobile-site .tax-toggle {
  font-size: 16px;
  width: 28px;
  height: 28px;
  min-width: 28px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
html.mobile-site .tax-kind-sector   > .tax-row .tax-name { font-size: 16px; }
html.mobile-site .tax-kind-industry > .tax-row .tax-name { font-size: 14px; }
html.mobile-site .tax-kind-theme    > .tax-row .tax-name { font-size: 13px; }
html.mobile-site .tax-name { white-space: normal; word-break: break-word; }
html.mobile-site .tax-meta { font-size: 10px; margin-left: 0; }

/* Ticker page: hide the Indicators + Compare toolbars on mobile by
   default behind a "Indicators & Compare ▾" toggle so the chart
   itself can sit higher on the screen. Desktop hides the toggle and
   shows both toolbars inline as before. */
.td-toolbar-more { display: none; }
html.mobile-site .td-toolbar-more {
  display: block;
  width: 100%;
  margin: 6px 0;
  padding: 8px 12px;
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 4px;
  color: var(--accent);
  font-size: 13px;
  font-weight: 600;
  text-align: center;
  cursor: pointer;
}
html.mobile-site .td-toolbar-extra { display: none; }
html.mobile-site .td-toolbar-more[aria-expanded="true"] + .td-toolbar-extra {
  display: block;
}

/* Empty-state polish: when a table has zero rows after filters, give
   the user a friendly hint above the empty body. */
html.mobile-site #stocks-table tbody:empty::after,
html.mobile-site #quant-table tbody:empty::after,
html.mobile-site #screener-table tbody:empty::after {
  content: "No tickers match the current filters. Loosen a Top % or clear a filter to see more.";
  display: block;
  color: var(--muted);
  font-size: 12px;
  padding: 24px 12px;
  text-align: center;
}

/* Horizontal-scroll hint dropped — gradient-over-scrolling-container is
   visually noisy and the sticky-left ticker column already implies
   "swipe right for more". Users figure it out fast. */

/* Screener filter rows on mobile: stack the label above the chips so
   the chips themselves get full width. Smaller gap so more fit per
   row. */
html.mobile-site .screener-row {
  flex-direction: column;
  align-items: stretch;
  gap: 6px;
  padding: 6px 0;
  border-bottom: 1px solid var(--border);
}
html.mobile-site .screener-row:last-child { border-bottom: 0; }
html.mobile-site .screener-row .screener-label {
  font-size: 11px;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  margin-bottom: 2px;
}
html.mobile-site .screener-row > .chip,
html.mobile-site .screener-row > button {
  flex: 1 1 auto;
}
html.mobile-site .screener-filters { margin: 8px 0 16px; }
html.mobile-site .screener-months {
  flex-wrap: wrap;
  gap: 4px;
}