/* watchlist.css — Research → Watchlist (Oct 1 2026). Loaded last.
   The owner: "isn't up to standard". The saved funds are now the Screener's rows (app.js renderWatchlistPanel
   draws them with cockpit.js window.CPRow): bold amber ticker + Income/Equity badge, the name once, the outlined
   L pill, green/red figures, the yield tint, sticky small-caps mono heads, 29px rows. The frame is a desk pane
   (hairline, slim bar with the amber mono title, the Screener's Columns button); the heart sits in the last
   column beside the figures, and the whole row opens the fund. The Research tabs become underlined text tabs,
   as the Tracker's (no box on hover or press). Values are the site's own tokens. */

/* ── The Research tabs: text, underline for the one open ─────────────────────────────────────────────── */
#viewResearch .research-subtabs {
  gap: 0; margin: 0; padding: 0; border-bottom: 1px solid var(--soft-line, var(--border));
  flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none;
}
#viewResearch .research-subtabs::-webkit-scrollbar { display: none; }
#viewResearch .research-subtab,
#viewResearch .research-subtab:hover,
#viewResearch .research-subtab:active {
  background: none; border: 0; border-radius: 0; box-shadow: none; transform: none;
  min-height: 0; margin: 0 28px 0 0; padding: 10px 1px 11px;
  font:600 14px/1 var(--sans); letter-spacing: 0; text-transform: none; color: var(--text-3); white-space: nowrap;
}
#viewResearch .research-subtab:hover { color: var(--text); }
/* the underline is drawn inside the tab, so the tab row's own scrolling never clips it (it did under the Large zoom) */
#viewResearch .research-subtab.is-active { color: var(--accent-soft, var(--accent)); box-shadow: inset 0 -2px 0 var(--accent); }
#viewResearch .research-subtab:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
body[data-theme="light"] #viewResearch .research-subtab.is-active { color: var(--accent-soft, var(--accent)); }
@media (max-width: 560px) {
  #viewResearch .research-subtab, #viewResearch .research-subtab:hover, #viewResearch .research-subtab:active { margin-right: 22px; }
}

/* ── The pane ────────────────────────────────────────────────────────────────────────────────────────── */
#viewResearch .wl-pane {
  display: flex; flex-direction: column; min-height: 0;
  border: 1px solid var(--border); border-radius: var(--radius); background: var(--bg-raised, var(--bg));
  overflow: clip;
}
#viewResearch .wl-bar {
  display: flex; align-items: center; gap: 12px; min-height: 0; height: auto;
  padding: 10px 12px 10px 16px; border-bottom: 1px solid var(--border); background: transparent;
}
/* the site's rank-2 voice: amber mono, a short rule before it (the Screener's "— RESULTS") */
#viewResearch .wl-title {
  display: inline-flex; align-items: center; gap: 9px; margin: 0;
  font-family: var(--mono); font-size:13px; font-weight: 700; letter-spacing: .1em; line-height: 1.2;
  text-transform: uppercase; color: var(--accent-soft, var(--accent));
}
#viewResearch .wl-title::before { content: ""; width: 13px; height: 2px; border-radius: 2px; flex-shrink: 0; background: var(--accent); opacity: .8; }
#viewResearch .wl-count { font-family: var(--mono); font-size:13px; font-weight: 500; color: var(--text-2); font-variant-numeric: tabular-nums; white-space: nowrap; }
/* Columns: the Screener's button (the filter selects' 30px, 7px corners) */
#viewResearch .wl-cols { margin-right: 0; }
#viewResearch #watchColsBtn { height: 30px; box-sizing: border-box; border-radius: 7px; font-size:13px; }
#viewResearch .wl-cols__pop { max-height: min(460px, 70vh); overflow-y: auto; overscroll-behavior: contain; }
#viewResearch .wl-cols__h { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
#viewResearch .wl-cols__reset {
  background: none; border: 0; padding: 2px 4px; cursor: pointer;
  font:600 13px var(--sans); letter-spacing: 0; text-transform: none; color: var(--text-2);
  text-decoration: underline; text-decoration-color: transparent; text-underline-offset: 3px;
}
#viewResearch .wl-cols__reset:hover { color: var(--accent-soft, var(--accent)); text-decoration-color: currentColor; }
#viewResearch .wl-cols__list { display: flex; flex-direction: column; gap: 2px; }
/* one short line under the bar */
#viewResearch .wl-hint { margin: 0; padding: 8px 16px; font-size:13px; line-height: 1.4; color: var(--text-3); border-bottom: 1px solid var(--border); }

/* ── The table: the Screener's (screener-fix.css #screenerTable rules, for this table) ───────────────── */
/* one screen tall less the chrome above, so the heads and the sideways bar stay in view; the view is zoomed at
   the larger text sizes (app.js applyTextSize) and the zoom scales the height too, so it is divided back */
#viewResearch { --wl-z: 1; }
body[data-text-size="large"] #viewResearch { --wl-z: 1.12; }
body[data-text-size="xlarge"] #viewResearch { --wl-z: 1.25; }
#viewResearch .wl-wrap { overflow: auto; max-height: max(320px, calc((100vh - 330px) / var(--wl-z))); max-height: max(320px, calc((100dvh - 330px) / var(--wl-z))); }
#watchTable.cptable { font-size:13px; }
#watchTable.cptable thead th {
  position: sticky; top: 0; z-index: 2; background: var(--bg-raised, var(--bg));
  box-shadow: inset 0 -1px 0 var(--border); cursor: pointer; user-select: none;
}
#watchTable.cptable thead th.wl-act { cursor: default; }
/* the name takes the room the figures leave, one line, the full name on hover; so nothing floats off at the edge */
#watchTable.cptable td.cp-nm { width: 100%; max-width: 0; min-width: 160px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#watchTable.cptable td.wl-strat { max-width: 260px; overflow: hidden; text-overflow: ellipsis; }
#watchTable.cptable tbody tr:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
#watchTable .wl-when { margin-left: 5px; font-family: var(--sans); color: var(--text-3); }
#watchTable td.wl-score { font-weight: 600; }
/* the heart: last column, right beside the figures */
#watchTable.cptable th.wl-act, #watchTable.cptable td.wl-act { width: 1%; padding: 0 12px 0 4px; text-align: center; }
#watchTable .wl-heart {
  display: inline-flex; align-items: center; justify-content: center; width: 26px; height: 24px; margin: 0; padding: 0;
  background: none; border: 1px solid transparent; border-radius: 6px; cursor: pointer; color: var(--text-3);
  transition: color .12s ease, border-color .12s ease;
}
#watchTable .wl-heart.is-on { color: var(--accent); }
#watchTable .wl-heart:hover { color: var(--red); border-color: var(--border-hover); }
#watchTable .wl-heart:not(.is-on):hover { color: var(--accent); }
#watchTable .wl-heart:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
body[data-theme="light"] #watchTable .wl-heart.is-on { color: var(--accent-soft, var(--accent)); }
/* the last head's "?" stays inside the table */
#watchTable.cptable thead th > .gq { right: 1px; }

/* empty: a quiet line inside the pane, not a dashed box */
#viewResearch .wl-empty { padding: 28px 16px; border: 0; border-radius: 0; background: transparent; text-align: left; }
#viewResearch .wl-empty .watch-empty__title { font-size:14px; color: var(--text); }
#viewResearch .wl-empty .watch-empty__hint { font-size:13px; color: var(--text-2); }

@media (max-width: 560px) {
  #viewResearch .wl-bar { padding: 8px 10px 8px 12px; gap: 10px; }
  #viewResearch .wl-hint { padding: 8px 12px; }
  #watchTable.cptable td.cp-nm { min-width: 140px; }
}

/* ── The one level pill that had no style: the old watchlist risk pill stopped at L6 (styles.css), so an L7
   fund showed a bare "L7". L7 gets its tone like the others (the light theme already had one). ─────────── */
.watch-pill--risk.r7 { background: rgba(185, 28, 28, 0.16); color: #f87171; border-color: rgba(185, 28, 28, 0.36); }