/* watchlist.html — page-specific styles */

.compare-table-wrap {
      overflow-x: auto; border-radius: var(--radius);
      -webkit-overflow-scrolling: touch;
    }
    .compare-table th {
      cursor: pointer; user-select: none; position: relative;
      padding-right: 18px;
    }
    .compare-table th:hover { color: var(--text); background: var(--gray-100); }
    .compare-table th .sort-arrow {
      position: absolute; right: 6px; top: 50%; transform: translateY(-50%);
      font-size: 9px; opacity: 0.3;
    }
    .compare-table th.sorted-asc .sort-arrow,
    .compare-table th.sorted-desc .sort-arrow {
      opacity: 1; color: var(--text);
    }
    .compare-table th.sorted-asc .sort-arrow::after { content: "\25B2"; }
    .compare-table th.sorted-desc .sort-arrow::after { content: "\25BC"; }
    .compare-table th:not(.sorted-asc):not(.sorted-desc) .sort-arrow::after { content: "\25B4\25BE"; letter-spacing: -2px; }

    .compare-table td { font-size: 12px; }
    .compare-table tr { cursor: pointer; }
    .compare-table tr:hover td { background: var(--gray-50); }

    .token-cell {
      display: flex; align-items: center; gap: 8px;
      white-space: nowrap;
    }
    .token-cell img { border-radius: 50%; flex-shrink: 0; }
    .token-cell .name { font-weight: 600; color: var(--text); }
    .token-cell .sym { font-size: 11px; color: var(--text-muted); text-transform: uppercase; }

    /* ── Sticky logo dock — mirrors the /markets token column ──
       Token cell split into a narrow sticky LOGO cell + a scrolling NAME cell; on
       horizontal scroll the name slides behind the pinned logo (JS in watchlist.html
       toggles .scrolled + fades the name). Pure native scroll, no relayout.
       CRITICAL: the global glass rule puts `backdrop-filter` on every <table>, which
       creates a containing block that BREAKS position:sticky on the cells. So the
       table must be transparent + backdrop-filter:none (sticky pins to the wrapper),
       and the frosted glass moves to .compare-table-wrap — same as /markets. */
    .compare-table {
      background: transparent !important;
      -webkit-backdrop-filter: none !important; backdrop-filter: none !important;
      overflow: visible !important;
    }
    .compare-table-wrap {
      background: var(--glass-bg);
      -webkit-backdrop-filter: blur(17px) saturate(160%);
      backdrop-filter: blur(17px) saturate(160%);
      border: 1px solid var(--border-card);
    }
    .compare-table th.tk-logo-h, .compare-table td.tk-logo-cell {
      position: sticky; left: 0; z-index: 3;
      width: 46px; min-width: 46px; max-width: 46px;
      padding: 8px 6px; text-align: center;
    }
    .compare-table td.tk-logo-cell img { border-radius: 50%; vertical-align: middle; }
    .compare-table thead th.tk-logo-h { z-index: 12; }
    .compare-table-wrap.scrolled td.tk-logo-cell {
      background: var(--surface); box-shadow: inset -1.5px 0 0 0 var(--dock-divider);
    }
    /* !important: a global glass rule forces all th transparent, so the header label
       would show through the pinned cell without it. */
    .compare-table-wrap.scrolled thead th.tk-logo-h {
      background: var(--dock-cell-bg) !important; box-shadow: inset -1.5px 0 0 0 var(--dock-divider);
    }
    .compare-table-wrap.scrolled tbody tr:hover td.tk-logo-cell {
      background: linear-gradient(var(--gray-50), var(--gray-50)), var(--surface);
    }
    .compare-table td.tk-name-cell { white-space: nowrap; }
    /* truncate long names so the name column stays narrow */
    .compare-table td.tk-name-cell .name {
      display: block; max-width: 84px;
      overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
    }

    .score-pill {
      display: inline-block; padding: 2px 8px; border-radius: var(--radius-full);
      font-size: 11px; font-weight: 600;
    }
    .score-pill.high { background: var(--green-bg); color: var(--green); }
    .score-pill.mid { background: var(--amber-bg); color: var(--amber); }
    .score-pill.low { background: var(--red-bg); color: var(--red); }

    .remove-btn {
      background: none; border: none; cursor: pointer; color: var(--text-muted);
      font-size: 14px; padding: 2px 6px; border-radius: var(--radius-xs);
      opacity: 0; transition: opacity 0.15s, color 0.15s;
    }
    tr:hover .remove-btn { opacity: 1; }
    .remove-btn:hover { color: var(--red); background: var(--red-subtle); }

    /* ── Responsive ── */
    @media (max-width: 640px) {
      .compare-table th { font-size: 9px; padding: 6px 6px; padding-right: 14px; }
      .compare-table td { font-size: 11px; padding: 5px 6px; }
      .token-cell .name { font-size: 12px; }
      .token-cell .sym { font-size: 9px; }
      .score-pill { font-size: 10px; padding: 2px 6px; }
      .remove-btn { opacity: 1; min-height: 44px; min-width: 44px; font-size: 16px; }
    }

/* extracted free inline styles (css-verify) */
.wlf-1 { position:relative;z-index:1; }
.wlf-2 { width:30px; }

/* ── Empty states + page buttons (theme-aware; gold = #FFB400) ─────────── */
.wl-empty {
  display:flex; flex-direction:column; align-items:center; gap:var(--sp-2);
  background:var(--surface); border:1px solid var(--border-card); border-radius:var(--radius);
  padding:var(--sp-8) var(--sp-4); text-align:center;
}
.wl-empty-ico { font-size:30px; color:#FFB400; opacity:0.4; margin-bottom:2px; }
.wl-empty-title { font-size:16px; font-weight:700; color:var(--text); }
.wl-empty-sub { font-size:13px; color:var(--text-muted); max-width:340px; }
.wl-btn {
  display:inline-flex; align-items:center; justify-content:center; padding:9px 18px; margin-top:var(--sp-2);
  border-radius:var(--radius-full); font-size:13px; font-weight:600; text-decoration:none;
  cursor:pointer; border:1px solid transparent; transition:background 0.15s;
}
.wl-btn-solid { background:#FFB400; color:#1a1304; }
.wl-btn-solid:hover { background:#FFB400; }

/* MCap/FDV ratio emphasis (replaces inline color styles) */
.wl-mcf-good { color:var(--green); font-weight:600; }
.wl-mcf-bad { color:var(--red); font-weight:600; }