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

#tokensTable td, #moversTable td { font-variant-numeric: tabular-nums; font-size: 12px; }
/* Token name + symbol match the compare table: name weight 600 (set inline),
   symbol 9px / weight 400 (compare's .sym), overriding the global .symbol 12px/500. */
#tokensTable .symbol { font-size: 9px; font-weight: 400; }
/* markets social icons: icon-only interaction — no background change on hover */
#tokensTable .social-icon:hover { background: transparent !important; }
/* narrative +N dropdown: let long narrative names wrap instead of being clipped
   (the panel's overflow-y:auto forces overflow-x to clip nowrap text). */
.narrative-dropdown .narrative-dropdown-item { white-space: normal; }
/* Glass card moves to the scroll container, NOT the table itself — a table with
   overflow:hidden/backdrop-filter becomes the sticky containing block and breaks
   position:sticky on its cells. So .table-scroll is the frosted card; the table
   inside is transparent + overflow:visible so the token column can pin. */
.container .table-scroll {
  background: var(--glass-bg);
  -webkit-backdrop-filter: blur(17px) saturate(160%);
  backdrop-filter: blur(17px) saturate(160%);
  border: 1px solid var(--border-card);
  border-radius: 14px;
  /* keep horizontal overscroll inside the table — scrolling left at the start
     must NOT trigger the browser's back-navigation gesture. */
  overscroll-behavior-x: contain;
}
#tokensTable {
  overflow: visible !important;
  background: transparent !important;
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
  border: none !important;
}
/* The frosted .table-scroll has backdrop-filter → it's a stacking context that
   would otherwise paint OVER the filter-bar's rf-dd panels (they'd look
   invisible). Lift the filter bar (and its absolute dropdown panels) above it. */
.container .filter-bar { position: relative; z-index: 20; }
/* Token identity — split into a narrow STICKY logo cell + a separate SCROLLING
   name cell. Space reclaim happens through PURE NATIVE horizontal scroll: as you
   scroll right, the star + name simply slide away behind the pinned logo, freeing
   their width for the data columns. There is NO width animation, NO --dock var,
   NO per-frame relayout — so it's buttery on every device. (The previous
   width-animating dock relaid-out the WHOLE table each frame — ~8ms for 25 rows,
   worse after "Load more" — which was the lag/roughness. Layout cost is gone now:
   native scroll only composites.) Only the logo cell is sticky; star + name are
   normal cells that scroll. */
#tokensTable th.tk-logo-h, #tokensTable td.tk-logo-cell {
  position: sticky; left: 0; z-index: 3;
  width: 48px; min-width: 48px; max-width: 48px;
  padding: 8px 6px; text-align: center;
}
#tokensTable td.tk-logo-cell a { display: inline-flex; }
/* header sticky cell must sit above the scrolling header cells (z-index:10) */
#tokensTable thead th.tk-logo-h { z-index: 12; }
/* The logo cell goes opaque + gains a hairline right divider ONLY once scrolled,
   so the star/name sliding behind it are hidden cleanly with a crisp pinned edge.
   bg + box-shadow are PAINT-only (no relayout), so toggling .scrolled on scroll
   is cheap. At rest the cell is transparent and blends into the row. The divider
   is an INSET shadow (painted with the cell's bg layer — doesn't flicker like an
   outset shadow on a sticky cell, isn't dropped by border-collapse). */
.container .table-scroll.scrolled #tokensTable td.tk-logo-cell {
  background: var(--surface);
  box-shadow: inset -1.5px 0 0 0 var(--dock-divider);
}
.container .table-scroll.scrolled #tokensTable thead th.tk-logo-h {
  /* !important: a global glass rule (`html body th { background: transparent
     !important }`) forces all th transparent — without !important the "TOKEN"
     label shows THROUGH this cell instead of being covered as it scrolls behind. */
  background: var(--dock-cell-bg) !important;
  box-shadow: inset -1.5px 0 0 0 var(--dock-divider);
}
/* hovered logo cell while scrolled: same --hover-bg tint as the rest of the row */
.container .table-scroll.scrolled #tokensTable tbody tr:hover td.tk-logo-cell {
  background: linear-gradient(var(--hover-bg), var(--hover-bg)), var(--surface);
}
/* name cell — name + symbol on one row; never wraps so it slides cleanly away.
   Its opacity is scroll-linked (set directly by JS as inline style) so the name
   DISSOLVES as it slides behind the pinned logo instead of hard-clipping into
   fragments. Opacity is composite-only (no relayout) → ~0.5ms/frame for 25 rows.
   (Do NOT drive this via a CSS var on the scroll container — that invalidates the
   whole table subtree's style, ~7ms/frame.) */
#tokensTable td.tk-name-cell { white-space: nowrap; }
.tk-id { display: flex; align-items: center; gap: 6px; min-width: 0; }
/* Truncate long token names with an ellipsis so the name column stays narrow
   (e.g. "Tether USDt" → "Tether U…"). The symbol still shows after it. */
#tokensTable td.tk-name-cell .mkc-18 {
  display: block; max-width: 64px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
/* Hovering a coin row highlights its name + symbol in brand amber (overrides the inline color:var(--text) on the name link) */
#tokensTable tbody tr:hover td a[href^="/token/"],
#tokensTable tbody tr:hover .symbol { color: var(--brand-amber) !important; }
    #tokensTable th { font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.06em; text-transform: uppercase; padding: 10px 12px; }
    #tokensTable td { padding: 8px 12px; }
    #tokensTable td[style*="text-align:right"] { font-family: var(--font-mono); font-size: 11px; }

    /* ── Markets filter controls ── */
    .mkt-search {
      width: 180px; font-size: 12px; padding: 6px 10px;
      border-radius: var(--radius-full); border: 1px solid var(--border-card);
      transition: border-color 0.15s, box-shadow 0.15s;
    }
    .mkt-search:focus { border-color: #FFB400;  }
    .mkt-search:hover { border-color: var(--gray-300); }

    /* rf-dd and rf-btn-tiny are in style.css */
    .rf-dd-search {
      width: 100%; padding: 6px 10px; font-size: 11px;
      border: 1px solid var(--border-card); border-radius: var(--radius-full);
      background: var(--surface); color: var(--text); outline: none;
      transition: border-color 0.15s, box-shadow 0.15s;
    }
    .rf-dd-search:focus { border-color: #FFB400;  }
    .rf-dd-check:checked + .rf-dd-item-text .rf-dd-name { color: var(--brand-amber-strong); }
    .g-card.clickable { cursor:pointer; }
    .overview-chart {
      margin-bottom:var(--sp-5); background:var(--surface);
      border:1px solid var(--border-card); border-radius:var(--radius);
      padding:var(--sp-5); display:none;
    }
    .overview-chart.open { display:block; }
    .overview-chart-title {
      font-size:15px; font-weight:600; margin-bottom:var(--sp-3);
      display:flex; justify-content:space-between; align-items:center;
    }
    .overview-chart-container { width:100%; height:280px; border-radius:var(--radius-sm); }
    .overview-close {
      border:none; background:none; cursor:pointer; font-size:18px;
      color:var(--text-muted); padding:4px 8px; border-radius:var(--radius-xs);
    }
    .overview-close:hover { background:var(--gray-100); color:var(--text); }
    th.sortable { cursor:pointer; user-select:none; position:relative; padding-right:20px; }
    th.sortable:hover { color:var(--text); }
    th.sortable::after { content:'\2195'; position:absolute; right:4px; opacity:0.2; font-size:8px; top:50%; transform:translateY(-50%); }
    th.sortable.asc::after { content:'\2191'; opacity:0.6; color:#FFB400; }
    th.sortable.desc::after { content:'\2193'; opacity:0.6; color:#FFB400; }
    .live-dot {
      width:7px; height:7px; border-radius:50%; background:var(--green);
      display:inline-block; vertical-align:middle; margin-right:5px; flex-shrink:0;
      animation:livePulse 2s ease-in-out infinite;
    }
    @keyframes livePulse { 0%,100%{opacity:1} 50%{opacity:0.35} }
    .live-banner {
      display:flex; align-items:center; gap:8px; padding:6px 12px;
      background:rgba(16,185,129,0.06); border:1px solid rgba(16,185,129,0.15);
      border-radius:var(--radius-sm); font-size:12px; color:var(--text-muted);
      margin-bottom:var(--sp-3);
    }
    .dex-badge {
      font-size:9px; font-weight:700; padding:1px 5px;
      border-radius:var(--radius-full); vertical-align:middle; margin-left:4px;
      background:var(--accent-subtle); color:var(--accent);
    }
    .addr-short { font-family:monospace; font-size:10px; color:var(--text-muted); }
    @keyframes tickUp {
      0%   { color:var(--green); }
      70%  { color:var(--green); }
      100% { color:var(--text); }
    }
    @keyframes tickDown {
      0%   { color:var(--red); }
      70%  { color:var(--red); }
      100% { color:var(--text); }
    }
    .tick-up { animation: tickUp 2s ease-out; }
    .tick-down { animation: tickDown 2s ease-out; }

    .global-grid {
      display:grid; grid-template-columns:repeat(auto-fill, minmax(170px, 1fr));
      gap:var(--sp-3); margin-bottom:var(--sp-5);
    }
    .g-card { padding:var(--sp-4); display:flex; flex-direction:column; gap:6px; }
    .g-card-label { font-family:var(--font-mono); font-size:10px; letter-spacing:0.06em; text-transform:uppercase; color:var(--text-muted); font-weight:600; }
    .g-card-value {
      font-family:var(--font-mono); font-size:22px; font-weight:700; color:var(--text);
      display:flex; align-items:baseline; gap:8px; letter-spacing:-0.02em;
    }
    .g-card-sub { font-family:var(--font-mono); font-size:12px; font-weight:600; }
    .g-card-meta { font-family:var(--font-mono); font-size:10px; color:var(--text-muted); }

    .fg-card { display:flex; align-items:center; gap:var(--sp-3); }
    .fg-gauge svg { width:56px; height:34px; overflow:visible; }
    .fg-needle { transform-origin:60px 55px; transition:transform 0.6s cubic-bezier(0.34, 1.56, 0.64, 1); }
    .fg-sparkline { display:flex; gap:1px; height:16px; align-items:flex-end; }
    .fg-sparkline-bar { width:3px; border-radius:2px; opacity:0.6; }

    .g-sparkline { margin-top:auto; }
    .g-sparkline svg { width:100%; height:24px; display:block; }
    .g-sparkline polyline { fill:none; stroke:var(--gray-400); stroke-width:1.5; stroke-linejoin:round; stroke-linecap:round; }
    .g-sparkline .g-spark-fill { fill:rgba(0,0,0,0.03); stroke:none; }

    .load-more-btn {
      padding:8px 24px; font-size:11px; font-weight:600;
      font-family:var(--font-mono); letter-spacing:0.04em; text-transform:uppercase;
      border:1px solid var(--border-card); border-radius:var(--radius-full);
      background:var(--surface); color:var(--text-muted); cursor:pointer;
      transition:background 0.15s, border-color 0.15s, color 0.15s;
    }
    .load-more-btn:hover { background:var(--gray-50); border-color:rgba(255,180,0,0.28); color:var(--text); }

    @media (max-width: 768px) {
      .global-grid { grid-template-columns:repeat(2, 1fr); gap:var(--sp-2); }
      .g-card-value { font-size:18px; }
    }
    @media (max-width: 480px) { .global-grid { grid-template-columns:1fr; } }
    @media (max-width: 640px) {
      .table-scroll { overflow-x:auto;-webkit-overflow-scrolling:touch; }
      .table-scroll table { min-width:700px; }
      .load-more-btn { min-height:44px;font-size:12px; }
      /* filter bar stacks cleanly: dropdown group + search/count group each take
         a full row; dropdowns size to their content (so labels aren't squeezed),
         the search fills the rest of its row instead of a fixed 180px. */
      .container .filter-bar { flex-direction: column; align-items: stretch; gap: 10px; }
      .container .filter-bar > div { flex: none; width: 100%; }
      .container .filter-bar .mkt-search { flex: 1; width: auto; min-width: 0; }
    }

/* ═══ Markets score cell — progress ring ═══════════════════════════════════════
   A conic arc (length ∝ the 0..100 score, set via the --v custom property)
   hollowed into a ring by a radial mask, with the number centred. Theme-aware:
   neutral grey track (--ms-track) + a refined-grey baseline arc (--ms-base, NOT
   black); custom (.is-custom) arc = brand gold (#FFB400), which pops against the
   grey track on both themes. Band thickness = the mask hole. */
.ms { display: inline-flex; align-items: center; justify-content: center; line-height: 1; }
.ms-ring { position: relative; width: 32px; height: 32px; --ms-arc: var(--ms-base); }
.ms-ring.is-custom { --ms-arc: #FFB400; }
.ms-ring .ms-arc { position: absolute; inset: 0; border-radius: 50%;
  background: conic-gradient(var(--ms-arc) calc(var(--v) * 1%), var(--ms-track) 0);
  -webkit-mask: radial-gradient(closest-side, transparent 72%, #000 73%);
  mask: radial-gradient(closest-side, transparent 72%, #000 73%); }
/* number dead-centre (geometric centring, independent of line-box metrics) */
.ms-ring .ms-n { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
  line-height: 1; font-family: var(--font-mono); font-weight: 700; font-size: 11px; color: var(--text); }

/* extracted free inline styles (css-verify) */
.mkf-1 { position:relative;z-index:1; }
.mkf-2 { margin-left:4px; }
/* qualified to beat input[type=checkbox]{width:16px} (components.css, 0,0,1,1)
   which the inline width:14px was masking */
.rf-dd-check.mkf-3 { width:14px;height:14px;accent-color:#FFB400;cursor:pointer;flex-shrink:0;pointer-events:none; }
#chainExclusive.mkf-4 { width:14px;height:14px;accent-color:#FFB400;cursor:pointer; }
.mkf-5 { text-align:center;min-width:44px; }
.mkf-6 { flex-shrink:0;text-decoration:none; }