/* screener-fix.css — strict review Sep 27 (W9, W14, polish 14/15): the Screener and the fund page.
   Usability, contrast and consistency only. The Screener's rows are drawn exactly as before (the owner likes
   them); the fund page keeps its layout. Loaded after the other sheets and before theme-light.css. */

/* ═══ Screener ═══════════════════════════════════════════════════════════════════════════════════════════ */

/* Card title in the site's rank-2 voice (amber mono + short rule), like the Portfolio and Risk panes. */
#viewScreener .card__header h2,
#viewFund .card__header h2 {
  display: inline-flex; align-items: center; gap: 9px;
  font-family: var(--mono); font-size:13px; font-weight: 700; letter-spacing: .1em;
  text-transform: uppercase; color: var(--accent-soft, var(--accent));
}
#viewScreener .card__header h2::before,
#viewFund .card__header h2::before {
  content: ""; width: 13px; height: 2px; border-radius: 2px; flex-shrink: 0;
  background: var(--accent); opacity: .8;
}
body[data-text-size="large"] #viewFund .card__header h2 { font-size:13px; }
body[data-text-size="xlarge"] #viewFund .card__header h2 { font-size:14px; }

/* Filters: one flat bar under the card header, like the desk's filter bar — no filled box inside the card.
   Sep 28: each filter is one pill in the desk bar's size with its name inside it, in sentence case ("Type: All",
   "Yield: Any"), opening a small popover with its choices and the glossary's words (app.js SCR_PILLS). A pill
   with something chosen takes the amber outline. */
#viewScreener .screener-filters {
  display: flex; flex-wrap: wrap; align-items: center; gap: 6px;
  padding: 8px 16px; background: transparent; border-radius: 0;
  border-bottom: 1px solid var(--border); box-shadow: none;
}
#viewScreener .screener-filters .filter-field { flex-direction: row; align-items: center; gap: 7px; flex: 0 0 auto; min-width: 0; }
#viewScreener .screener-filters .filter-field > span:first-child {
  font-family: var(--sans); font-size:13px; font-weight: 600; letter-spacing: 0; text-transform: none;
  color: var(--text-2); white-space: nowrap;
}
#viewScreener .scr-pill { position: relative; display: inline-flex; flex: 0 0 auto; min-width: 0; }
#viewScreener .screener-filters .scr-pill[hidden] { display: none; }
#viewScreener .screener-filters .scr-pill__sel { display: none !important; }
#viewScreener .scr-pill__btn {
  display: inline-flex; align-items: center; gap: 5px; height: 29px; box-sizing: border-box; padding: 0 10px 0 11px;
  background: var(--surface-2); border: 1px solid var(--border); border-radius: 7px; box-shadow: none;
  font:inherit; font-size:13px; font-weight: 600; line-height: 1; letter-spacing: 0; text-transform: none;
  color: var(--text); white-space: nowrap; cursor: pointer; outline: none;
  transition: border-color .12s, color .12s, background-color .12s;
}
#viewScreener .scr-pill__k { font-weight: 500; color: var(--text-2); }
#viewScreener .scr-pill__v { font-variant-numeric: tabular-nums; }
#viewScreener .scr-pill__chev { flex-shrink: 0; margin-left: 3px; color: var(--text-3); transition: transform .15s ease; }
#viewScreener .scr-pill__btn:hover { border-color: var(--border-hover); }
#viewScreener .scr-pill.is-open .scr-pill__btn { border-color: var(--border-hover); background: var(--surface-3); }
#viewScreener .scr-pill.is-open .scr-pill__chev { transform: rotate(180deg); }
#viewScreener .scr-pill.is-set .scr-pill__btn { border-color: var(--accent); }
#viewScreener .scr-pill.is-set .scr-pill__chev { color: var(--accent-soft); }
#viewScreener .scr-pill__btn:focus-visible { border-color: var(--accent); box-shadow: 0 0 0 2px var(--accent-bg); }
/* the popover: the desk's Filters popover (.cpfpanel), a little wider, choices then the glossary's words */
#viewScreener .scr-pop { width: 300px; gap: 8px; padding: 10px; overflow-y: auto; overscroll-behavior: contain; cursor: default; }
#viewScreener .scr-pop__h { font-size:13px; font-weight: 700; color: var(--text); padding: 0 2px; }
#viewScreener .scr-pop__opts { display: flex; flex-direction: column; gap: 2px; }
#viewScreener .scr-pop__opts--grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 4px; }
#viewScreener .scr-pop__opt {
  display: block; width: 100%; text-align: left; background: none; border: 0; border-radius: 6px;
  font:inherit; font-size:13px; font-weight: 600; line-height: 1.3; color: var(--text-2);
  padding: 6px 8px; cursor: pointer; outline: none; white-space: nowrap;
}
#viewScreener .scr-pop__opts--grid .scr-pop__opt { text-align: center; padding: 6px 4px; box-shadow: inset 0 0 0 1px var(--border); }
#viewScreener .scr-pop__opt:hover { background: var(--surface-2); color: var(--text); }
#viewScreener .scr-pop__opt[aria-checked="true"] { background: var(--accent-bg); color: var(--text); box-shadow: inset 0 0 0 1px var(--border-accent); }
#viewScreener .scr-pop__opt:focus-visible { box-shadow: inset 0 0 0 2px var(--accent); }
#viewScreener .scr-pop__range { display: flex; align-items: center; gap: 8px; font-size:13px; font-weight: 600; color: var(--text-2); padding: 0 2px; }
#viewScreener .scr-pop__range input { width: 76px; }
#viewScreener .scr-pop__hint { font-size:13px; line-height: 1.4; color: var(--text-3); padding: 0 2px; }
#viewScreener .scr-pop__help {
  margin: 0; padding: 8px 2px 0; border-top: 1px solid var(--border);
  font-size:13px; font-weight: 400; line-height: 1.45; color: var(--text-2); white-space: normal;
}
#viewScreener .scr-pop__help[hidden] { display: none; }
#viewScreener .card.scr-popopen { overflow: visible; }   /* the open popover may run past a short card (one fund left) */
#viewScreener .screener-filters select,
#viewScreener .screener-filters input {
  height: 30px; box-sizing: border-box; font:inherit; font-size:13px; font-weight: 600;
  color: var(--text); background-color: var(--surface-2); border: 1px solid var(--border);
  border-radius: 7px; padding: 4px 10px; outline: none; box-shadow: none;
}
#viewScreener .screener-filters select {
  appearance: none; -webkit-appearance: none; padding-right: 26px; cursor: pointer;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6' fill='none'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%238b93a5' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 9px center;
}
#viewScreener .screener-filters input { width: 72px; }
#viewScreener .screener-filters .scr-ratef__pair input { width: 64px; }
#viewScreener .screener-filters select:hover,
#viewScreener .screener-filters input:hover { border-color: var(--border-hover); }
#viewScreener .screener-filters select:focus-visible,
#viewScreener .screener-filters input:focus-visible { border-color: var(--border-accent, var(--accent)); box-shadow: 0 0 0 2px var(--accent-bg); }
#viewScreener .screener-filters input::placeholder { color: var(--text-3); opacity: 1; }
/* Every filter already applies as it changes, so the Apply button only suggested otherwise. */
#viewScreener #applyFilters { display: none; }
#viewScreener .scr-clear {
  background: none; border: 0; color: var(--text-2); font:inherit; font-size:13px; font-weight: 600;
  cursor: pointer; padding: 5px 8px; border-radius: 6px; text-decoration: underline; text-underline-offset: 3px;
}
#viewScreener .scr-clear:hover { color: var(--text); background: var(--surface-2); }
#viewScreener .scr-clear[hidden] { display: none; }

/* The table scrolls in its own window and the page does not scroll (strict review 2, item 6): the view fills
   the screen from under the market strip to the status bar (--desk-top / --desk-sb, measured by cockpit.js),
   the card takes what the heading leaves, and the table takes what the filters leave. The column heads stay
   put and the sideways scrollbar sits at the bottom of the screen. Before, the box was 882px tall inside a
   1,310px page: the page scrolled 328px before the table did. The view is zoomed at the larger text sizes
   (app.js applyTextSize), and the zoom scales its height too, so the height is divided by it. */
#viewScreener { --scr-z: 1; }
body[data-text-size="large"] #viewScreener { --scr-z: 1.12; }
body[data-text-size="xlarge"] #viewScreener { --scr-z: 1.25; }
@media (min-width: 721px) and (min-height: 560px) {
  #viewScreener.is-active {
    display: flex; flex-direction: column; box-sizing: border-box; overflow: hidden; padding-bottom: 12px;
    height: calc((100vh - var(--desk-top, 158px) - var(--desk-sb, 28px)) / var(--scr-z));
    height: calc((100dvh - var(--desk-top, 158px) - var(--desk-sb, 28px)) / var(--scr-z));
  }
  #viewScreener.is-active > * { flex: 0 0 auto; }
  #viewScreener.is-active > .card { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; margin-bottom: 0; }
  #viewScreener.is-active > .card > * { flex: 0 0 auto; }
  #viewScreener.is-active > .card > .table-wrap { flex: 1 1 auto; min-height: 120px; max-height: none; }
}
#viewScreener .table-wrap { overflow: auto; overscroll-behavior: contain; border-radius: 0 0 var(--radius) var(--radius); }
/* a scrollbar big enough to see and grab (the site-wide one is 6px in the panel's own grey) */
#viewScreener .table-wrap::-webkit-scrollbar { width: 10px; height: 12px; }
#viewScreener .table-wrap::-webkit-scrollbar-track { background: var(--surface-2); }
#viewScreener .table-wrap::-webkit-scrollbar-thumb { background: var(--surface-4, var(--surface-3)); border-radius: 999px; border: 2px solid var(--surface-2); }
#viewScreener .table-wrap::-webkit-scrollbar-thumb:hover { background: var(--text-3); }
#viewScreener .table-wrap::-webkit-scrollbar-corner { background: var(--surface-2); }
@media (max-width: 720px) {
  /* phone: the filters fill most of the screen, so the page scrolls to the table, and the table is one screen
     tall less the two-row top bar, the status bar and the page foot so its heads and its sideways scrollbar stay in view */
  #viewScreener .table-wrap { max-height: calc((100vh - 150px) / var(--scr-z)); max-height: calc((100dvh - 150px) / var(--scr-z)); }
  /* two filters a row, caption over the control */
  #viewScreener .screener-filters { gap: 10px 12px; padding: 10px 12px; }
  #viewScreener .screener-filters .filter-field { flex: 1 1 calc(50% - 12px); flex-direction: column; align-items: stretch; gap: 4px; }
  #viewScreener .screener-filters .filter-field select,
  #viewScreener .screener-filters .filter-field input { width: 100%; min-width: 0; }
  #viewScreener .screener-filters .scr-ratef { flex-basis: 100%; }
  #viewScreener .screener-filters .scr-ratef__pair input { width: 50%; }
}
#viewScreener .fund-table thead th,
#screenerTable.cptable thead th {
  position: sticky; top: 0; z-index: 2; background: var(--bg-raised);
  box-shadow: inset 0 -1px 0 var(--border);
}

/* ── Strict review 2, item 6: the Screener's rows are the desk Universe's rows ─────────────────────────────
   The table is a .cptable and its fund cells come from window.CPRow (app.js renderScreenerTable): bold amber
   ticker with its Income/Equity badge (the blue "CEF" type badge and its column are gone), the outlined L pill,
   the same figures, colors, 12px mono and 29px rows. What is left here is the Screener's own: the compare
   box, the sort mark, the RMS tags kept on the ticker's line, and the name taking the room that is left. */
#screenerTable.cptable { font-size:13px; }
/* (at the larger sizes the .cptable size steps in cockpit.css apply under the view's zoom, as on the desk) */
#screenerTable.cptable thead th.sorted-asc, #screenerTable.cptable thead th.sorted-desc { color: var(--accent-soft); }
#screenerTable.cptable thead th.sorted-asc::after { content: " ▲"; font-size:13px; }
#screenerTable.cptable thead th.sorted-desc::after { content: " ▼"; font-size:13px; }
#screenerTable.cptable .compare-col { width: 1%; padding-left: 14px; padding-right: 2px; text-align: left; cursor: default; }
#screenerTable.cptable .compare-col input { width: 14px; height: 14px; margin: 0; vertical-align: middle; accent-color: var(--accent); }
/* the name column takes the width the others leave, one line, the full name on hover */
#viewScreener #screenerTable.cptable td.cp-nm { width: 100%; max-width: 0; min-width: 160px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* .td-ticker stays only as universe.js's hook for the RMS tags: the older Screener ticker type (13–20px) is undone */
#viewScreener #screenerTable.cptable td.td-ticker { font-family: var(--sans); font-size: inherit; font-weight: inherit; color: inherit; }
/* RMS universe tags (universe.js) on the ticker's line, in the Income badge's size and outline: no second line */
#viewScreener #screenerTable .td-ticker .rmsu-tags { display: inline-flex; flex-wrap: nowrap; gap: 4px; margin: 0 0 0 6px; vertical-align: middle; }
#viewScreener #screenerTable .td-ticker .rmsu-tag {
  font:600 13px/1.35 var(--sans); letter-spacing: .04em; padding: 0 5px; border-radius: 3px;
  background: transparent; color: var(--text-2); box-shadow: inset 0 0 0 1px var(--border-hover);
}
#viewScreener #screenerTable .td-ticker .rmsu-tag--kit { color: #9cc4f5; box-shadow: inset 0 0 0 1px rgba(141, 185, 242, .42); }
body[data-theme="light"] #viewScreener #screenerTable .td-ticker .rmsu-tag--kit { color: #174a8a; box-shadow: inset 0 0 0 1px rgba(23, 74, 138, .35); }
#screenerTable.cptable td.td-record { white-space: nowrap; }
/* the last head's "?" sits in its right padding: keep it inside the table (it made the box scroll 3px sideways) */
#screenerTable.cptable thead th:last-child, #screenerTable.cptable tbody td:last-child { padding-right: 16px; }
#screenerTable.cptable thead th:last-child > .gq { right: 1px; }
/* Columns and Export: the filter selects' shape (the desk filter bar's 7px), not a round pill beside square boxes */
#viewScreener .card__header #scrColsBtn { height: 30px; box-sizing: border-box; border-radius: 7px; font-size:13px; }
#viewScreener .card__header #exportScreener { width: 30px; height: 30px; padding: 0; box-sizing: border-box; border-radius: 7px; display: inline-flex; align-items: center; justify-content: center; }
/* the count beside the title is the pane's quiet meta, as the Universe's "316 funds" */
#viewScreener .card__header .screener-count {
  background: none; border: 0; box-shadow: none; padding: 0; border-radius: 0;
  font:500 13px var(--mono); font-variant-numeric: tabular-nums; color: var(--text-2);
}

/* Type badges: the dark theme's blue and purple stay; in light they take the desk's badge tones
   (the blue was #60a5fa on paper, 1.68:1 — now 7.5:1; the ETF purple 3.6:1 — now 6.4:1). */
body[data-theme="light"] #viewScreener .fund-type-badge--cef { color: #1e4f8f; background: rgba(30, 79, 143, .08); box-shadow: inset 0 0 0 1px rgba(30, 79, 143, .22); }
body[data-theme="light"] #viewScreener .fund-type-badge--etf,
body[data-theme="light"] #viewScreener .td-level--etf { color: #7e22ce; }
#viewScreener .fund-type-badge--etf { color: #c084fc; }   /* dark: 7.2:1 on the table (was 4.8) */
/* light: the amber marks (quarterly "Q", ex-date soon, the L pill) were the light accent #9a6b00 at 3.1–4.4:1
   on the row tints; one step deeper, same hue, 5.2:1 or better */
body[data-theme="light"] #viewScreener .freq-mark,
body[data-theme="light"] #viewScreener .exdate-soon,
body[data-theme="light"] #viewScreener .td-level:not(.td-level--etf) { color: #6f4900; }

/* ═══ Fund page ══════════════════════════════════════════════════════════════════════════════════════════ */

/* The heading strip every view has: FUND │ GOF · Guggenheim Strategic Opp Fund, Back on the left. */
#viewFund .fund-viewbar { margin-bottom: 0; }
#viewFund .fund-viewbar .fund-detail__back { padding: 5px 12px; font-size:13px; margin-right: 4px; }
#viewFund .fund-viewbar .viewbar__tag { overflow: hidden; text-overflow: ellipsis; min-width: 0; }
#viewFund .fund-detail { gap: 14px; }
@media (max-width: 720px) {
  /* the site hides viewbar descriptors on a phone; here the descriptor is the fund, so it stays */
  #viewFund .fund-viewbar { flex-wrap: wrap; row-gap: 4px; padding-bottom: 4px; }
  #viewFund .fund-viewbar .viewbar__tag { display: block; flex-basis: 100%; border-left: 0; padding-left: 0; white-space: normal; }
}

/* Hero: the dashboard detail pane's scale (ticker 22px, price 24px, figures 15px), tighter padding. */
#viewFund .fund-hero { padding: 14px 16px; gap: 14px; align-items: center; }
#viewFund .fund-hero__main { padding: 0; border-bottom: 0; gap: 20px; align-items: center; }
#viewFund .fund-hero__ticker { font-size:22px; letter-spacing: 0; }
#viewFund .fund-hero__fullname { font-size:13px; margin-top: 5px; }
#viewFund .fund-hero__big { font-size:24px; letter-spacing: -0.01em; }
#viewFund .fund-hero__change { font-size:13px; margin-top: 5px; }
#viewFund .fund-hero__stats { border-radius: var(--radius-sm, 6px); flex: 1 1 560px; min-width: 0; }   /* fills the row, beside the name or under it */
@media (max-width: 640px) { #viewFund .fund-hero__stats { grid-template-columns: repeat(2, minmax(0, 1fr)); flex-basis: 100%; } #viewFund .hero-stat__value { white-space: normal; } }
#viewFund .hero-stat { padding: 9px 12px; gap: 3px; }
#viewFund .hero-stat__value { font-size:15px; margin-top: 2px; }
#viewFund .hero-stat__value.stat-yield-high, #viewFund .hero-stat__value.stat-risk { font-size:15px; text-shadow: none; }
body[data-text-size="large"] #viewFund .fund-hero__ticker { font-size:25px; }
body[data-text-size="large"] #viewFund .fund-hero__fullname { font-size:14.5px; }
body[data-text-size="large"] #viewFund .fund-hero__big { font-size:27px; }
body[data-text-size="large"] #viewFund .fund-hero__change { font-size:14.5px; }
body[data-text-size="large"] #viewFund .hero-stat { padding: 10px 13px; }
body[data-text-size="large"] #viewFund .hero-stat__value,
body[data-text-size="large"] #viewFund .hero-stat__value.stat-yield-high,
body[data-text-size="large"] #viewFund .hero-stat__value.stat-risk { font-size:16.5px; }
body[data-text-size="xlarge"] #viewFund .fund-hero__ticker { font-size:28px; }
body[data-text-size="xlarge"] #viewFund .fund-hero__fullname { font-size:16px; }
body[data-text-size="xlarge"] #viewFund .fund-hero__big { font-size:30px; }
body[data-text-size="xlarge"] #viewFund .fund-hero__change { font-size:16px; }
body[data-text-size="xlarge"] #viewFund .hero-stat__value,
body[data-text-size="xlarge"] #viewFund .hero-stat__value.stat-yield-high,
body[data-text-size="xlarge"] #viewFund .hero-stat__value.stat-risk { font-size:18px; }

/* Chart source switch: the active pill is the Analyze amber with dark text (was white on amber, 2.14:1). */
#viewFund .chart-source-btn.is-active,
#viewFund .chart-btn.is-active {
  background: #e0a82e !important; border-color: #e0a82e !important; color: #1a1304 !important;
  box-shadow: 0 1px 2px rgba(0,0,0,.25), inset 0 1px 0 rgba(255,255,255,.16);
}

/* Fund basics: a two-column key/value list — plain label on the left, figure on the right, 1px rules. */
#viewFund .fund-kv__row { flex-direction: row; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 2px 12px; padding: 8px 16px; }
#viewFund .fund-kv__label {
  font-family: var(--sans); font-size:13px; font-weight: 500; letter-spacing: 0; text-transform: none;
  color: var(--text-2); min-width: 0; flex: 0 1 auto;
}
#viewFund .fund-kv__value {
  font-size:13px; font-weight: 600; text-align: right; white-space: normal; overflow: visible;
  font-variant-numeric: tabular-nums; flex: 0 1 auto; margin-left: auto;   /* beside its label, or on the line under it */
}
/* the two cards in a row keep their own height: no tall empty card beside a long list */
#viewFund .fund-secondary-grid:has(#fundBasics) { align-items: start; }
#viewFund .fund-kv__asof { margin-left: auto; font-size:13px; color: var(--text-2); }
body[data-text-size="large"] #viewFund .fund-kv__label { font-size:14.5px; }
body[data-text-size="large"] #viewFund .fund-kv__value { font-size:14.5px; }
body[data-text-size="large"] #viewFund .fund-kv__row { padding: 9px 16px; }
body[data-text-size="xlarge"] #viewFund .fund-kv__label { font-size:16px; }
body[data-text-size="xlarge"] #viewFund .fund-kv__value { font-size:16px; }
@media (max-width: 560px) { #viewFund .fund-kv { grid-template-columns: 1fr; } #viewFund .fund-kv__row:nth-child(odd) { border-right: 0; } }

/* Top holdings footnote sat flush against the pane edge. */
#viewFund .fund-holding-foot { padding: 0 16px 12px; }

/* Screener: the row that says no fund matches the filters (app.js renderScreenerTable), under the column heads. */
#viewScreener .scr-table tr.scr-none td { padding: 18px 14px; color: var(--text-2); font-size:13px; white-space: normal; cursor: default; }
#viewScreener .scr-table tr.scr-none:hover td { background: transparent; }
#viewScreener .scr-table tr.scr-none .scr-none__t { color: var(--text); font-weight: 600; margin-right: 6px; }

/* Oct 8: the results sit on the page, not in a box (Matt: "I hate that this is in a container") — no card border,
   background, radius or shadow; the header and filters keep their spacing and line up with the page title */
body:not(#_) #viewScreener > .card.card--full { background: transparent !important; border: 0 !important; border-radius: 0 !important; box-shadow: none !important; padding-left: 0; padding-right: 0; }
body:not(#_) #viewScreener > .card.card--full > .card__header { background: transparent !important; border: 0 !important; padding-left: 0; padding-right: 0; }