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

.compare-table-wrap {
      overflow-x: auto; border-radius: var(--radius);
      -webkit-overflow-scrolling: touch;
    }
    .compare-table th {
      font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.06em;
      text-transform: uppercase; padding: 10px 12px;
      cursor: pointer; user-select: none; position: relative; padding-right: 20px;
    }
    .compare-table th:hover { color: var(--text); }
    .compare-table th .sort-arrow {
      position: absolute; right: 4px; top: 50%; transform: translateY(-50%);
      font-size: 8px; opacity: 0.2;
    }
    .compare-table th.sorted-asc .sort-arrow,
    .compare-table th.sorted-desc .sort-arrow { opacity: 0.6; color: #FFB400; }
    .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; padding: 8px 12px;
    }
    .compare-table td[style*="text-align:right"] {
      font-family: var(--font-mono); font-size: 11px;
    }
    .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-family: var(--font-mono); font-size: 9px;
      color: var(--text-muted); text-transform: uppercase;
    }

    /* ── Sticky logo dock — mirrors the /markets token column ──
       The token cell is split into a narrow sticky LOGO cell + a scrolling NAME
       cell; on horizontal scroll the name slides behind the pinned logo (JS in
       compare.html toggles .scrolled + fades the name). Pure native scroll, no
       width animation, 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 instead), and the frosted glass moves to .compare-table-wrap — exactly
       what /markets does (#tokensTable transparent, glass on .table-scroll). */
    .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: 44px; min-width: 44px; max-width: 44px;
      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; }
    /* opaque bg + hairline right divider only once scrolled (paint-only) so the
       name sliding behind the logo is hidden with a crisp pinned edge. */
    .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 — design system gold */
    .val-pill {
      display: inline-flex; align-items: center; justify-content: center;
      width: 28px; height: 28px; border-radius: 50%;
      font-family: var(--font-mono); font-size: 10px; font-weight: 700;
    }

    /* Stats row */
    .cmp-stats {
      display: flex; gap: 12px; margin-bottom: 12px;
    }
    .cmp-stat {
      padding: 12px 16px; background: var(--surface);
      border: 1px solid var(--border-card); border-radius: var(--radius);
      flex: 1;
    }
    .cmp-stat-label {
      font-family: var(--font-mono); font-size: 9px; letter-spacing: 0.1em;
      text-transform: uppercase; color: var(--text-muted); font-weight: 600;
      margin-bottom: 4px;
    }
    .cmp-stat-value {
      font-family: var(--font-mono); font-size: 20px; font-weight: 700;
      color: var(--text); letter-spacing: -0.02em;
    }

    /* Dropdown search in filter */
    .cmp-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;
    }
    .cmp-dd-search:focus { border-color: #FFB400;  }

    /* Section header */
    .cmp-sec {
      display: flex; align-items: center; gap: 10px;
      font-family: var(--font-mono); font-size: 12px; font-weight: 600;
      letter-spacing: 0.08em; text-transform: uppercase;
      color: var(--text-muted); margin: 0 0 14px; padding-left: 12px;
    }
    .cmp-sec::before {
      content: ""; width: 6px; height: 6px; border-radius: 50%;
      background: #FFB400; flex-shrink: 0;
    }
    .cmp-sec .cmp-sec-line { flex: 1; height: 1px; background: var(--border-card); }

    /* Narrative +N tooltip */
    .narr-tip {
      display:none;position:absolute;left:50%;top:100%;transform:translateX(-50%);
      margin-top:4px;padding:6px 8px;background:var(--surface);
      border:1px solid var(--border-card);border-radius:var(--radius-sm);
      box-shadow:var(--shadow-md);z-index:20;white-space:nowrap;
      min-width:120px;
    }
    .narr-tip.show { display:flex;flex-direction:column;gap:3px; }

    /* ── Responsive ── */
    @media (max-width: 768px) {
      .cmp-stats { flex-direction: column; gap: 8px; }
      .cmp-stat { padding: 10px 14px; }
      .cmp-stat-value { font-size: 16px; }
    }
    @media (max-width: 640px) {
      .compare-table th { font-size: 9px; padding: 8px 8px; padding-right: 16px; }
      .compare-table td { font-size: 11px; padding: 6px 8px; }
      .cmp-sec { font-size: 10px; padding-left: 8px; }
      .cmp-dd-search { font-size: 16px; }
      .token-cell .name { font-size: 12px; }
      .token-cell .sym { font-size: 8px; }
      .val-pill { width: 24px; height: 24px; font-size: 9px; }
      .rf-dd-trigger { min-height: 44px; }
    }

/* extracted free inline styles (css-verify) */
.cmpf-1 { position:relative;z-index:1; }
.cmpf-2 { font-weight:400;font-size:10px;text-transform:none;letter-spacing:0; }

.cmpc-1 { margin-bottom:16px; }
.cmpc-2 { display:flex;align-items:center;gap:8px; }
.cmpc-3 { font-family:var(--font-mono);font-size:9px;letter-spacing:0.12em;text-transform:uppercase;color:var(--text-muted);font-weight:600; }
.cmpc-4 { margin-bottom:12px; }
.cmpc-5 { font-family:var(--font-mono);font-size:9px;font-weight:700;padding:1px 6px;border-radius:999px;background:rgba(255,180,0,0.15);color:var(--brand-amber-strong);margin-left:4px; }
.rf-dd-panel.cmpc-6 { left:0;right:auto;transform-origin:top left;min-width:320px;overflow:hidden;display:flex;flex-direction:column; }
.cmpc-7 { padding:6px 6px 4px;flex-shrink:0; }
.rf-dd-items.cmpc-8 { overflow-y:auto;max-height:300px;padding:0 6px 6px;scrollbar-width:thin; }
.cmpc-9 { font-family:var(--font-mono); }
.cmpc-10 { background:none;border:none;color:var(--red);cursor:pointer;font-family:var(--font-mono);font-size:9px;font-weight:600; }
.cmpc-11 { padding-left:12px; }
.cmpc-12 { text-align:right; }
.cmpc-13 { font-size:9px;padding:1px 7px;margin:1px 2px; }
.cmpc-14 { font-size:9px;padding:1px 7px;margin:1px 2px;cursor:pointer;position:relative; }
.cmpc-15 { font-size:9px;padding:1px 7px;margin:1px 2px;display:block; }