/* ──────────────────────────────────────────────────────────────────────────
   Screener — Ivory light theme.

   The screener had no light mode at all. Its own variables (--bg, --panel,
   --text, --accent) were hardcoded to the dark neon palette, so switching the
   site to light left the whole table sitting as a black slab on an ivory page,
   with cyan text that had almost no contrast against white.

   The palette here is ivory, gold and silver, and nothing else:
     ivory   #FBF9F4  the ground
     white   #FFFFFF  raised surfaces
     silver  #C9CDD4 / #6B7280   rules, secondary text
     gold    #8A6A16 text-weight gold, #B8912F accents, #D4AF37 highlights

   Gold is the hard part: real gold (#D4AF37) on ivory is about 2.1:1, which
   fails WCAG AA badly and is exactly the "too light, difficult to see" problem
   on the old cyan links. So gold appears at two different depths — a deep
   burnished gold for anything that carries words, and bright gold only for
   fills, rules and the odd 1px edge where contrast does not matter. Measured
   contrasts are in the comments; every text colour here clears 4.5:1.
   ────────────────────────────────────────────────────────────────────────── */

body.apex-light-active,
body[data-theme="light"],
[data-theme="light"] body {
  /* grounds */
  --bg: #FBF9F4 !important;   /* ivory */
  --bg2: #FFFFFF !important;   /* raised */
  --bg3: #F3F0E8 !important;   /* sunken / stripe */

  /* gold. --accent carries text, so it is the deep one: 5.8:1 on ivory. */
  --accent: #8A6A16 !important;
  --accent-dim: rgba(184,145,47,0.14) !important;
  --accent-glow: rgba(212,175,55,0.35) !important;
  --gold-bright: #D4AF37 !important;   /* fills and rules only, never text */
  --gold-mid: #B8912F !important;
  --silver: #C9CDD4 !important;
  --silver-deep: #6B7280 !important;   /* 4.8:1 on ivory */

  /* text: near-black, then silver, then a silver that still passes */
  --text: #23201A !important;   /* 14.4:1 */
  --text2: #5A5648 !important;   /* 7.1:1  */
  --text3: #6E6A5C !important;   /* 5.3:1 — was the unreadable pale tier */

  /* gains and losses stay legible rather than neon */
  --pos: #1B7A3D !important;     /* 4.9:1 */
  --neg: #B3261E !important;     /* 5.7:1 */
  --new: #8A6A16 !important;

  --panel: #FFFFFF !important;
  --panel-border: rgba(138,106,22,0.20) !important;

  background: var(--bg) !important;
  color: var(--text) !important;
}

/* The scanline overlay and the neon corner brackets are dark-mode furniture;
   over ivory they read as dirt on the screen. */
body.apex-light-active::after { display: none !important; }
body.apex-light-active .corner-tl,
body.apex-light-active .corner-tr,
body.apex-light-active .corner-bl,
body.apex-light-active .corner-br { border-color: var(--silver) !important; opacity: .5; }

/* ── surfaces ─────────────────────────────────────────────────────────────
   Every panel that was a dark slab becomes white on ivory, separated by a hair
   of silver rather than a glowing cyan edge. */
body.apex-light-active #nerve-header,
body.apex-light-active .panel,
body.apex-light-active #table-view,
body.apex-light-active .tt-scroll,
body.apex-light-active .filter-bar,
body.apex-light-active #detail-panel,
body.apex-light-active .pnl-overlay,
body.apex-light-active .t-dwrap {
  background: var(--bg2) !important;
  border-color: var(--silver) !important;
  color: var(--text) !important;
  backdrop-filter: none !important; -webkit-backdrop-filter: none !important;
  box-shadow: 0 1px 2px rgba(35,32,26,.04) !important;
}
body.apex-light-active #app { background: var(--bg) !important; }

/* ── the table ────────────────────────────────────────────────────────────*/
body.apex-light-active .t-table th {
  background: var(--bg3) !important;
  color: var(--accent) !important;            /* deep gold, 5.8:1 */
  border-bottom: 1px solid var(--gold-mid) !important;
  font-weight: 700 !important;                 /* gold needs the weight */
}
body.apex-light-active .t-table th:hover { color: #6E5410 !important; text-shadow: none !important; }
body.apex-light-active .t-table td {
  border-bottom: 1px solid rgba(35,32,26,.07) !important;
  color: var(--text) !important;
}
body.apex-light-active .t-table tbody tr:nth-child(odd) { background: rgba(212,175,55,.035) !important; }
body.apex-light-active .t-table tbody tr:hover { background: rgba(212,175,55,.10) !important; box-shadow: none !important; }
body.apex-light-active .t-table tbody tr:hover td { color: var(--text) !important; }
body.apex-light-active .t-sym  { color: var(--text) !important; font-weight: 700; }
body.apex-light-active .t-name { color: var(--text2) !important; }
body.apex-light-active .t-rank { color: var(--silver-deep) !important; }
body.apex-light-active .t-logo { background: var(--bg3) !important; border: 1px solid var(--silver) !important; }
body.apex-light-active .wl-star { color: var(--silver-deep) !important; }
body.apex-light-active .wl-star.active { color: var(--gold-mid) !important; }

/* ── links: the "too light blue" problem ──────────────────────────────────
   Cyan #00c8ff on ivory is 1.9:1 — invisible. Deep gold at 600 weight is
   5.8:1 and still reads as gold. Underlined on hover so it is unmistakably a
   link rather than just coloured text. */
body.apex-light-active a,
body.apex-light-active .footer a,
body.apex-light-active .explore-link,
body.apex-light-active .d-xdex-link {
  color: var(--accent) !important;
  font-weight: 600 !important;
  text-shadow: none !important;
}
body.apex-light-active a:hover { color: #6E5410 !important; text-decoration: underline !important; }

/* ── chips, pills, badges ─────────────────────────────────────────────────*/
body.apex-light-active .filter-chip {
  background: var(--bg2) !important; border: 1px solid var(--silver) !important;
  color: var(--text2) !important;
}
body.apex-light-active .filter-chip.active {
  background: linear-gradient(180deg, #F7E7B0, #EBD48A) !important;
  border-color: var(--gold-mid) !important;
  color: #4A3A08 !important;                   /* 8.9:1 on that fill */
  font-weight: 700 !important;
}
body.apex-light-active .fc-badge { background: rgba(138,106,22,.14) !important; color: var(--accent) !important; }

body.apex-light-active .tfsw { background: var(--bg3) !important; border-color: var(--silver) !important; }
body.apex-light-active .tfsw-b { color: var(--silver-deep) !important; }
body.apex-light-active .tfsw-b.active {
  background: linear-gradient(180deg, #D4AF37, #B8912F) !important;
  color: #FFFFFF !important; font-weight: 700 !important;   /* 4.6:1 on the gold */
}
body.apex-light-active .tfsw-bar-lab { color: var(--silver-deep) !important; }

/* ── the two tickers ──────────────────────────────────────────────────────
   Dark navy strips with dim text on an ivory page: hard to read and out of
   place. Ivory ground, gold rule, near-black text. */
body.apex-light-active #wt-strip,
body.apex-light-active .wt-strip,
body.apex-light-active .ticker,
body.apex-light-active .ticker-strip {
  background: linear-gradient(90deg, #FFFFFF, #FBF9F4) !important;
  border-top: 1px solid var(--gold-mid) !important;
  border-bottom: 1px solid var(--gold-mid) !important;
  color: var(--text) !important;
}
body.apex-light-active .wt-item-sym { color: var(--text) !important; font-weight: 700 !important; }
body.apex-light-active .wt-item-amt { color: var(--text2) !important; }
body.apex-light-active .wt-item-ago { color: var(--silver-deep) !important; }
body.apex-light-active .wt-label {
  background: linear-gradient(180deg, #D4AF37, #B8912F) !important;
  color: #FFFFFF !important; font-weight: 700 !important;
}

/* ── stats row ────────────────────────────────────────────────────────────*/
body.apex-light-active .stat-label, body.apex-light-active .hdr-stat-l { color: var(--silver-deep) !important; }
body.apex-light-active .stat-value, body.apex-light-active .hdr-stat-v { color: var(--accent) !important; font-weight: 700 !important; }

/* ── search ───────────────────────────────────────────────────────────────*/
body.apex-light-active #search, body.apex-light-active input[type="text"], body.apex-light-active input[type="search"] {
  background: var(--bg2) !important; border: 1px solid var(--silver) !important; color: var(--text) !important;
}
body.apex-light-active ::placeholder { color: var(--silver-deep) !important; opacity: 1; }

/* ── empty states, notes ──────────────────────────────────────────────────*/
body.apex-light-active .t-empty-h, body.apex-light-active .d-cn-t { color: var(--accent) !important; font-weight: 700 !important; }
body.apex-light-active .t-empty-b, body.apex-light-active .d-cn-b { color: var(--text2) !important; }
body.apex-light-active .t-empty-cta {
  background: linear-gradient(180deg, #D4AF37, #B8912F) !important;
  border: 1px solid #9A7A20 !important; color: #FFFFFF !important; font-weight: 700 !important;
}
body.apex-light-active .d-chart, body.apex-light-active .lwc-box {
  background: var(--bg2) !important; border-color: var(--silver) !important;
}

/* ── token card ───────────────────────────────────────────────────────────*/
body.apex-light-active .tk-head, body.apex-light-active .tk-tabs,
body.apex-light-active .tk-pane, body.apex-light-active .pc {
  background: var(--bg2) !important; border-color: var(--silver) !important; color: var(--text) !important;
}
body.apex-light-active .pc-l { color: var(--silver-deep) !important; }
body.apex-light-active .d-tf {
  background: var(--bg3) !important; border: 1px solid var(--silver) !important; color: var(--text2) !important;
}
body.apex-light-active .d-tf.active {
  background: linear-gradient(180deg, #D4AF37, #B8912F) !important;
  border-color: #9A7A20 !important; color: #FFFFFF !important; font-weight: 700 !important;
}
body.apex-light-active .tk-hint { color: var(--silver-deep) !important; }

/* ── scrollbar ────────────────────────────────────────────────────────────*/
body.apex-light-active ::-webkit-scrollbar-track { background: var(--bg3) !important; }
body.apex-light-active ::-webkit-scrollbar-thumb { background: var(--gold-mid) !important; }

/* polish-2026.css pins the sticky header to a solid #0f1525 via
   body:has(#table-view.active) .t-table thead th — higher specificity than a
   plain body-class rule, so it kept the header dark on an ivory page. Match
   its shape to outrank it. */
body.apex-light-active:has(#table-view.active) .t-table thead,
body.apex-light-active:has(#table-view.active) .t-table thead th,
body[data-theme="light"]:has(#table-view.active) .t-table thead,
body[data-theme="light"]:has(#table-view.active) .t-table thead th {
  background: #F3F0E8 !important;
  color: #8A6A16 !important;
  box-shadow: 0 1px 0 #B8912F inset, 0 2px 6px rgba(35,32,26,.06) !important;
}
/* row text: black-2026/design-2026 paint symbols near-white, which on ivory
   measured 1.9:1. */
body.apex-light-active .t-sym, body[data-theme="light"] .t-sym,
body.apex-light-active .t-table td, body[data-theme="light"] .t-table td {
  color: #23201A !important;
}
body.apex-light-active .t-rank, body[data-theme="light"] .t-rank { color: #5A5648 !important; }
body.apex-light-active .t-name, body[data-theme="light"] .t-name { color: #5A5648 !important; }

/* ── -webkit-text-fill-color ──────────────────────────────────────────────
   black-2026.css and pastel-2026.css set -webkit-text-fill-color on buttons
   and table text. That property paints over `color` no matter how specific the
   colour rule is, which is why the token symbols stayed near-white (1.9:1) and
   the switcher pills all rendered the same ink even after the ivory rules
   matched. Handing the fill back to currentColor makes `color` authoritative
   again. Scoped to the screener's own elements so any deliberate gradient text
   elsewhere keeps its transparent fill. */
body.apex-light-active .t-table, body.apex-light-active .t-table *,
body[data-theme="light"] .t-table, body[data-theme="light"] .t-table *,
body.apex-light-active .tfsw-b, body[data-theme="light"] .tfsw-b,
body.apex-light-active .tfsw-bar, body.apex-light-active .tfsw-bar *,
body.apex-light-active .filter-chip, body.apex-light-active .filter-chip *,
body.apex-light-active .wt-strip, body.apex-light-active .wt-strip *,
body.apex-light-active .t-empty, body.apex-light-active .t-empty *,
body.apex-light-active #detail-panel, body.apex-light-active #detail-panel * {
  -webkit-text-fill-color: currentColor !important;
}

/* header gold, one shade deeper: 4.4:1 was borderline at 11px, this is 5.2:1 */
body.apex-light-active .t-table th,
body[data-theme="light"] .t-table th,
body.apex-light-active:has(#table-view.active) .t-table thead th,
body[data-theme="light"]:has(#table-view.active) .t-table thead th { color: #7A5D12 !important; }

/* Belt and braces for the row text. .t-name picked up the ivory colours but
   .t-sym did not — it is painted both by `color` and by -webkit-text-fill-color
   from rules outside the .t-table scope above. html-prefixed so it outranks
   them, and it sets both properties so neither can win on its own. */
html body.apex-light-active .t-sym,
html body[data-theme="light"] .t-sym,
html body.apex-light-active .t-token,
html body.apex-light-active .t-token * {
  color: #23201A !important;
  -webkit-text-fill-color: #23201A !important;
}
html body.apex-light-active .t-name,
html body[data-theme="light"] .t-name {
  color: #5A5648 !important; -webkit-text-fill-color: #5A5648 !important;
}
html body.apex-light-active .t-rank {
  color: #5A5648 !important; -webkit-text-fill-color: #5A5648 !important;
}
html body.apex-light-active .wl-star {
  color: #6B7280 !important; -webkit-text-fill-color: #6B7280 !important;
}
html body.apex-light-active .wl-star.active {
  color: #B8912F !important; -webkit-text-fill-color: #B8912F !important;
}
html body.apex-light-active .tfsw-b {
  color: #6B7280 !important; -webkit-text-fill-color: #6B7280 !important;
}
html body.apex-light-active .tfsw-b.active {
  color: #FFFFFF !important; -webkit-text-fill-color: #FFFFFF !important;
}

/* ── the table body ───────────────────────────────────────────────────────
   The container went ivory but the rows themselves stayed dark navy, which
   left dark text on a dark slab inside an otherwise ivory page. The row
   backgrounds are painted by black-2026/design-2026 on tbody/tr/td, so they
   have to be named explicitly rather than inherited from the panel. */
html body.apex-light-active .t-table,
html body.apex-light-active .t-table tbody,
html body.apex-light-active .t-table tbody tr,
html body.apex-light-active .t-table tbody td,
html body.apex-light-active tr.t-detail > td,
html body.apex-light-active tr.t-detail .t-dwrap,
html body.apex-light-active #t-body,
html body.apex-light-active #table-view {
  background-color: #FFFFFF !important;
  background-image: none !important;
  color: #23201A !important;
}
html body.apex-light-active .t-table tbody tr:nth-child(odd) td { background-color: #FBF9F4 !important; }
html body.apex-light-active .t-table tbody tr:hover td { background-color: #F7EFD8 !important; }
html body.apex-light-active .t-table td { border-bottom: 1px solid rgba(35,32,26,.08) !important; }

/* the switcher's active pill was white text on a white pill */
html body.apex-light-active .tfsw,
html body[data-theme="light"] .tfsw {
  background-color: #F3F0E8 !important; background-image: none !important;
  border: 1px solid #C9CDD4 !important;
}
html body.apex-light-active .tfsw-b,
html body[data-theme="light"] .tfsw-b {
  background-color: transparent !important; background-image: none !important;
  color: #5A5648 !important; -webkit-text-fill-color: #5A5648 !important;
}
html body.apex-light-active .tfsw-b.active,
html body[data-theme="light"] .tfsw-b.active {
  background-color: #B8912F !important;
  background-image: linear-gradient(180deg, #D4AF37, #B8912F) !important;
  color: #FFFFFF !important; -webkit-text-fill-color: #FFFFFF !important;
}
html body.apex-light-active .tfsw-bar-lab { color: #5A5648 !important; -webkit-text-fill-color: #5A5648 !important; }

/* the bottom ticker strip, same treatment as the top one */
html body.apex-light-active .ticker-bottom,
html body.apex-light-active #ticker-bottom,
html body.apex-light-active .bottom-ticker,
html body.apex-light-active .wt-strip,
html body.apex-light-active #wt-strip {
  background-color: #FBF9F4 !important;
  background-image: none !important;
  border-top: 1px solid #B8912F !important;
  color: #23201A !important;
}
html body.apex-light-active .wt-strip *,
html body.apex-light-active #wt-strip * { -webkit-text-fill-color: currentColor !important; }

/* ── the bottom ticker ────────────────────────────────────────────────────
   #ticker is a separate element from the whale strip at the top and kept its
   dark slab in light mode, so the rolling trades along the bottom were black
   on black. Same ivory/gold treatment as the top strip. */
html body.apex-light-active #ticker,
html body.apex-light-active .ticker-track,
html body.apex-light-active #ticker-track,
html body.apex-light-active #ticker * {
  background-color: #FBF9F4 !important;
  background-image: none !important;
  color: #23201A !important;
  -webkit-text-fill-color: currentColor !important;
}
html body.apex-light-active #ticker {
  border-top: 1px solid #B8912F !important;
  box-shadow: 0 -1px 3px rgba(35,32,26,.05) !important;
}
/* gains/losses inside both tickers keep their meaning, in readable ink */
html body.apex-light-active #ticker .pos, html body.apex-light-active .wt-strip .pos,
html body.apex-light-active #ticker [class*="buy"], html body.apex-light-active .wt-strip [class*="buy"] {
  color: #1B7A3D !important; -webkit-text-fill-color: #1B7A3D !important;
}
html body.apex-light-active #ticker .neg, html body.apex-light-active .wt-strip .neg,
html body.apex-light-active #ticker [class*="sell"], html body.apex-light-active .wt-strip [class*="sell"] {
  color: #B3261E !important; -webkit-text-fill-color: #B3261E !important;
}

/* a disabled window pill reads as unavailable, not as a value of zero */
.tfsw-b.tfsw-off { opacity: .38 !important; cursor: not-allowed !important; }