/* Token icon — round avatar with deterministic monogram fallback.
 * Used by every ecosystem table that renders token rows (live-coins,
 * treasury holdings, future widgets). Same dimensions for both the
 * <img> happy path and the <span> monogram fallback so a 404 swap
 * doesn't shift the layout (zero CLS by construction).
 *
 * Sizing: the avatar declares fixed width/height so the row never
 * jitters between icon-loaded and icon-failed states. Widget-level
 * CSS may bump the size via the .token-icon--lg modifier (32px on
 * live-coins desktop) — same constraint applies, mono fallback uses
 * the same dimensions as the <img>.
 *
 * Gold-tint scale (from docs/design-tokens.md §1):
 *   0.04 / 0.06 / 0.08 / 0.22 / 0.45 — DO NOT introduce new accent colors. */

.token-icon {
  flex: none;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  object-fit: cover;
  background: var(--color-bg-card, #ffffff14);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  /* Subtle inner ring + outer halo. Inner = 1px gold-tint stroke (using
     the 0.08 step) so the icon visually separates from the row even
     when the icon is dark; outer = soft glow that intensifies on row
     hover via the .token-cell rule below. Pure box-shadow, no transform —
     zero CLS. */
  box-shadow:
    inset 0 0 0 1px rgba(212, 175, 55, 0.08),
    0 0 0 0 rgba(212, 175, 55, 0);
  transition: box-shadow 0.2s ease;
}

/* Larger avatar variant for the live-coins desktop row — 32px reads
   stronger when the icon column is the primary identity column.
   Mobile keeps 28-32px range via the responsive overrides below. */
.token-icon--lg {
  width: 32px;
  height: 32px;
}

/* Monogram fallback. The hue var is set inline (deterministic from
 * ticker) — gives every project a stable color even when icon URL is
 * missing or 404s. Refined recipe vs. the legacy flat 135deg gradient:
 *   - radial gradient with a soft highlight in the upper-left corner
 *   - chroma + luma split so the surface reads more "premium" / less
 *     "default user-avatar"
 *   - SemiBold weight, 0.7rem (was 0.62rem) for better legibility
 *   - inner ring uses the gold 0.22 step for a subtle premium accent */
.token-icon-mono {
  --token-icon-hue: 0;
  background:
    radial-gradient(circle at 30% 28%,
      hsl(var(--token-icon-hue) 70% 52%) 0%,
      hsl(var(--token-icon-hue) 60% 38%) 55%,
      hsl(calc(var(--token-icon-hue) + 24) 55% 24%) 100%);
  color: #fff;
  font-family: var(--font-sans, system-ui, sans-serif);
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.01em;
  text-transform: uppercase;
  /* Inset highlight (top edge) + 1px gold ring — same shadow recipe
     for both <img> and mono so the visual slot is identical. */
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.18),
    inset 0 0 0 1px rgba(212, 175, 55, 0.22);
  text-shadow: 0 1px 1px rgba(0, 0, 0, 0.25);
}

.token-icon--lg.token-icon-mono {
  font-size: 0.78rem;
}

/* Generic flex wrapper for "icon + text" cells. Widget-level CSS adds
 * any sizing constraints; this just ensures the icon column doesn't
 * shrink and the text column gets to truncate via min-width: 0. */
.token-cell {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
}

.token-cell-text {
  min-width: 0;  /* allow long names to truncate inside the flex column */
  display: flex;
  flex-direction: column;
  gap: 1px;
}

/* On row hover, lift the avatar's ring + halo. The selectors stay
   widget-agnostic via :hover anywhere up the parent tree (tr in
   tables, .card-stack tr in mobile). */
.lc-table tbody tr:hover .token-icon,
.lt-table tbody tr:hover .token-icon {
  box-shadow:
    inset 0 0 0 1px rgba(212, 175, 55, 0.22),
    0 0 0 3px rgba(212, 175, 55, 0.08);
}
.lc-table tbody tr:hover .token-icon-mono,
.lt-table tbody tr:hover .token-icon-mono {
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.22),
    inset 0 0 0 1px rgba(212, 175, 55, 0.45),
    0 0 0 3px rgba(212, 175, 55, 0.08);
}