/* The /data pages (generated by scripts/build-insights.mjs), on the site's tokens. */

.data-head { padding-bottom: 8px; }
.data-head .h2 { max-width: 860px; text-wrap: balance; }
.data-lead { max-width: 760px; font-size: 18px; line-height: 1.8; }
.data-asof { margin-top: 14px; font-size: 13.5px; font-weight: 600; color: var(--faint); }
.data-back { display: inline-block; margin-bottom: 18px; font-size: 14px; font-weight: 700; }

.data-body { padding-bottom: 72px; }

.data-tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 12px; margin: 28px 0 36px; }
.data-tile {
  display: flex; flex-direction: column; gap: 6px;
  padding: 18px 18px 16px;
  border: 1px solid var(--border); border-radius: 16px; background: var(--card);
}
.data-tile b { font-size: clamp(24px, 6vw, 32px); font-weight: 900; color: var(--accent); direction: ltr; text-align: right; }
.data-tile span { font-size: 13.5px; font-weight: 500; color: var(--muted); line-height: 1.45; }

.data-table-wrap { overflow-x: auto; border: 1px solid var(--border); border-radius: 16px; background: var(--card); }
.data-table { width: 100%; border-collapse: collapse; font-size: 15px; }
.data-table caption { caption-side: bottom; padding: 12px 16px; font-size: 13px; color: var(--faint); text-align: right; }
.data-table th, .data-table td { padding: 12px 16px; border-bottom: 1px solid var(--border); text-align: right; white-space: nowrap; }
.data-table thead th { font-size: 12.5px; font-weight: 700; color: var(--muted); }
.data-table tbody tr:last-child th, .data-table tbody tr:last-child td { border-bottom: 0; }
.data-table tbody th a { color: var(--text); font-weight: 700; }
.data-table tbody th a:hover { color: var(--accent); }
.data-table .num { direction: ltr; font-variant-numeric: tabular-nums; color: #cbd3df; }

.data-section { padding: 0; margin-top: 44px; font-size: 17px; line-height: 1.85; color: #cbd3df; }
.data-section h2 { margin: 0 0 12px; font-size: clamp(21px, 5.2vw, 26px); font-weight: 800; line-height: 1.3; color: var(--text); }
.data-section p { margin: 0 0 16px; }
.data-section ul:not(.data-bars) { margin: 0; padding: 0; list-style: none; }
.data-section ul:not(.data-bars) li { position: relative; margin-bottom: 10px; padding-inline-start: 22px; }
.data-section ul:not(.data-bars) li::before {
  content: ''; position: absolute; inset-inline-start: 4px; top: 0.78em;
  width: 6px; height: 6px; border-radius: 50%; background: var(--accent);
}
.data-note { font-size: 13.5px; color: var(--faint); }

.data-bars { display: flex; flex-direction: column; gap: 10px; margin: 0 0 12px; padding: 0; list-style: none; }
.data-bars li { display: grid; grid-template-columns: 88px 1fr 48px; align-items: center; gap: 12px; }
.data-bar-label { font-size: 14.5px; font-weight: 600; color: var(--text); }
.data-bar { position: relative; height: 10px; border-radius: 99px; background: rgba(255, 255, 255, 0.06); overflow: hidden; }
.data-bar::after { content: ''; position: absolute; inset-block: 0; inset-inline-start: 0; width: var(--w); border-radius: 99px; background: var(--accent); }
.data-bar-val { font-size: 13.5px; font-weight: 700; color: var(--muted); direction: ltr; text-align: left; font-variant-numeric: tabular-nums; }

.data-cta {
  margin-top: 48px; padding: 24px;
  border: 1px solid var(--border); border-radius: 20px; background: var(--card);
}
.data-cta p { margin: 0 0 16px; font-size: 17px; line-height: 1.7; color: var(--text); font-weight: 600; }
.data-cta-links { display: flex; flex-wrap: wrap; gap: 10px; }