/* AeroUI — shared render-kit styles for the AERO intelligence page.
 * Sits on top of shared/css/base.css (consumes its --color-* custom props).
 * Generic primitives only: stat-grid, data-table, tones, links, notes.
 * Section-specific layout lives in the page's own styles.css. */

/* ── Stat grid + cards (KPI / pulse / cliff) ─────────────────────────────── */
.aero-stat-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 0.75rem;
  margin-top: 1rem;
}

.aero-stat {
  position: relative;
  background: var(--color-surface, rgba(255, 255, 255, 0.03));
  border: 1px solid var(--color-border, rgba(255, 255, 255, 0.08));
  border-radius: 8px;
  padding: 0.85rem 1rem;
  overflow: hidden;
}

.aero-stat-label {
  font-size: 0.72rem;
  letter-spacing: 0.02em;
  color: var(--color-text-dim, #888);
  margin-bottom: 0.35rem;
}

.aero-stat-value {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 1.35rem;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  color: var(--color-text, #f5f5f5);
  line-height: 1.1;
}

.aero-stat-sub {
  font-size: 0.74rem;
  color: var(--color-text-dim, #777);
  margin-top: 0.3rem;
}

/* Tone accent stripe on the left edge of a stat card (positive/negative). */
.aero-stat.tone-pos::before,
.aero-stat.tone-neg::before {
  content: "";
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 3px;
}
.aero-stat.tone-pos::before { background: linear-gradient(180deg, #4ade80, #22c55e); }
.aero-stat.tone-neg::before { background: linear-gradient(180deg, #f87171, #ef4444); }
.aero-stat.tone-pos .aero-stat-value { color: #4ade80; }
.aero-stat.tone-neg .aero-stat-value { color: #ef4444; }

/* ── Data table (leaderboard / real-yield) ───────────────────────────────── */
.aero-table-scroll {
  width: 100%;
  overflow-x: auto;
  border: 1px solid var(--color-border, rgba(255, 255, 255, 0.08));
  border-radius: 8px;
  background: var(--color-surface, rgba(255, 255, 255, 0.02));
}

.aero-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.88rem;
}

.aero-table thead th {
  text-align: left;
  font-weight: 600;
  font-size: 0.72rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--color-text-dim, #888);
  padding: 0.65rem 0.85rem;
  border-bottom: 1px solid var(--color-border, rgba(255, 255, 255, 0.1));
  white-space: nowrap;
}

.aero-table td {
  padding: 0.6rem 0.85rem;
  border-bottom: 1px dashed var(--color-border, rgba(255, 255, 255, 0.06));
  white-space: nowrap;
  color: var(--color-text, #e6e6e6);
}

.aero-table tbody tr:last-child td { border-bottom: none; }
.aero-table tbody tr:hover { background: var(--color-surface-2, rgba(255, 255, 255, 0.04)); }

.aero-table th.num,
.aero-table td.num {
  text-align: right;
  font-family: 'IBM Plex Mono', monospace;
  font-variant-numeric: tabular-nums;
}

.aero-table td.rank {
  color: var(--color-text-dim, #777);
  font-family: 'IBM Plex Mono', monospace;
  width: 2.5rem;
}

.aero-table td.dim { color: var(--color-text-dim, #999); }

/* ── Wallet emotion badge + buys/sells split (PnL leaderboard) ───────────── */
.aero-wallet-cell {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
}
.aero-wallet-emotion {
  font-size: 0.95rem;
  line-height: 1;
  cursor: help;            /* surface the title="<label>" tooltip affordance */
  filter: saturate(1.1);
}
.aero-trades-split { font-size: 0.82em; margin-left: 0.25rem; }
.aero-trades-offdex { font-size: 0.78em; }

/* ── APG Tooltip pattern (WCAG 2.2 AA, touch-aware) ────────────────────── */
.aero-tt {
  position: relative;
  display: inline-flex;
  align-items: center;
}
.aero-tt-trigger {
  background: transparent;
  border: none;
  padding: 0;
  margin: 0;
  font: inherit;
  color: inherit;
  cursor: help;
  min-width: 24px;     /* WCAG 2.2 SC 2.5.8 — min tap target */
  min-height: 24px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
}
.aero-tt-trigger:focus-visible {
  outline: 2px solid #60a5fa;
  outline-offset: 2px;
  border-radius: 4px;
}
.aero-tt-content {
  /* position:fixed so the tooltip escapes the leaderboard's overflow:auto
   * scroll container (which would otherwise clip it). The CSP runtime applies
   * viewport-coordinate utility classes from the tooltip geometry. */
  position: fixed;
  left: 0;
  top: 0;
  z-index: 100;
  min-width: 11rem;
  max-width: min(20rem, calc(100vw - 16px));
  padding: 0.5rem 0.7rem;
  background: #0f1116;
  color: #e6e6e6;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 6px;
  font-size: 0.8rem;
  line-height: 1.35;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.5);
  white-space: normal;
  text-align: left;
  pointer-events: auto;   /* SC 1.4.13 hoverable — pointer can enter the tooltip */
}
.aero-tt-content[hidden] { display: none; }

/* ── Links ───────────────────────────────────────────────────────────────── */
.aero-link {
  color: var(--color-text, #cfd8e3);
  font-family: 'IBM Plex Mono', monospace;
  text-decoration: none;
  border-bottom: 1px dotted var(--color-border, rgba(255, 255, 255, 0.25));
}
.aero-link:hover { color: #60a5fa; border-bottom-color: #60a5fa; }

/* ── Sign tones (table cells) ────────────────────────────────────────────── */
.aero-table td.tone-pos { color: #4ade80; }
.aero-table td.tone-neg { color: #ef4444; }
.aero-table td.tone-zero { color: var(--color-text-dim, #888); }

/* ── Locked AERO column ───────────────────────────────────────────────────
 * Locked = vote-escrowed AERO (illiquid but still wallet-owned). Violet
 * (#8b5cf6) — matches the existing .badge-lp / .badge-limit hue for "bound
 * capital" semantics; deliberately not green so it never reads as P&L. CVD-
 * safe (deuteranopia/protanopia keep it distinct from green/red).
 * Empty cells render as `<span class="dim">—</span>` (handled in render fn).
 */
.aero-locked-value {
  color: #8b5cf6;
  font-weight: 600;
}

/* ── KPI sparklines ──────────────────────────────────────────────────────── */
.aero-kpi-spark {
  margin-top: 0.4rem;
  min-height: 20px;
  display: flex;
  align-items: center;
}
.aero-spark { display: block; }

/* ── veAERO flow feed (top-of-page live tail) ────────────────────────────── */
.aero-velock-feed-section {
  padding: 0.5rem 0;
}
.aero-section-h-tight { margin: 0 0 0.4rem 0; font-size: 1rem; }
.aero-section-lead-tight {
  margin: 0 0 0.8rem 0;
  color: var(--color-text-dim, #999);
  font-size: 0.85rem;
  line-height: 1.4;
}
.aero-velock-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  grid-template-columns: 1fr;
  gap: 0;
}
.aero-velock-item {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.45rem 0.5rem;
  border-bottom: 1px dashed var(--color-border, rgba(255, 255, 255, 0.06));
  font-size: 0.88rem;
  font-family: 'IBM Plex Mono', monospace;
}
.aero-velock-item:last-child { border-bottom: none; }
.aero-velock-arrow {
  font-size: 1rem;
  width: 1rem;
  text-align: center;
  font-family: system-ui, -apple-system, sans-serif;
}
.aero-velock-in  { color: #4ade80; }
.aero-velock-out { color: #f87171; }
.aero-velock-amt { font-weight: 600; min-width: 7rem; }
.aero-velock-ts { margin-left: auto; font-size: 0.78em; }

/* ── Realized PnL — 14-day "(updated)" chip during methodology rollout ────
 * Auto-sunsets via the data-updated-until attribute on the <th> at render
 * time. JS reads the attribute on mount; after the date, the chip class is
 * not applied. Tone: --warning amber (existing token), not red — this is
 * informational not destructive.
 */
.aero-table th.col-realized.is-updated::after {
  content: " updated";
  font-size: 0.62rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: #f59e0b;
  background: rgba(245, 158, 11, 0.12);
  border: 1px solid rgba(245, 158, 11, 0.35);
  padding: 1px 6px;
  margin-left: 6px;
  border-radius: 999px;
  vertical-align: middle;
  cursor: help;
}

/* ── Notes (loading / empty / error) ─────────────────────────────────────── */
.aero-note {
  color: var(--color-text-dim, #888);
  font-size: 0.9rem;
  padding: 1.25rem 0;
}
.aero-note-err { color: #f59e0b; }

/* ── Mobile: collapse opt-in columns under 640px ─────────────────────────── */
@media (max-width: 640px) {
  .aero-table .col-hide-sm { display: none; }
  .aero-table { font-size: 0.82rem; }
  .aero-table thead th,
  .aero-table td { padding: 0.55rem 0.6rem; }
  .aero-stat-value { font-size: 1.2rem; }
}