/* ============================================================
   blog.css  —  Data articles (VeloNext Blog)
   Requires: base.css, content.css
   Adds only what content.css doesn't already cover: breadcrumb,
   article byline, the chart component, and the leaderboard table.
   Dark mode: no rules here — every color below is a var(--token)
   already redefined for [data-theme="dark"] in base.css.
   ============================================================ */

.blog-crumb {
  font-size: .78rem; color: var(--muted);
  display: flex; gap: .4rem; align-items: center; flex-wrap: wrap;
  margin: 0 0 .75rem;
}
.blog-crumb a { color: var(--textlink); }
.blog-crumb a:hover { text-decoration: underline; }
.blog-crumb span { color: var(--muted); }

.blog-meta {
  font-size: .78rem; color: var(--muted);
  text-transform: uppercase; letter-spacing: .04em;
  margin: .35rem 0 0;
}

/* ── Legend row above a chart ── */
.blog-legend {
  display: flex; flex-wrap: wrap; gap: 1.1rem;
  font-size: .78rem; color: var(--muted);
  margin: 0 0 .9rem;
}
.blog-legend-item { display: flex; align-items: center; gap: .4rem; }
.blog-swatch { width: .65rem; height: .65rem; border-radius: 2px; flex: none; }
.blog-swatch.void { background: var(--surface2); border: 1px dashed var(--border); }

/* ── Chart ── */
.blog-chart-scroll { overflow-x: auto; margin: 0 -.1rem; }
.blog-chart-svg { display: block; min-width: 620px; width: 100%; height: auto; }
.blog-bar { transition: opacity .15s ease; cursor: pointer; }
.blog-bar:hover { opacity: .78; }
.blog-bar-label {
  font-size: 11px; fill: var(--muted); text-anchor: middle;
  font-variant-numeric: tabular-nums;
}
.blog-axis-label {
  font-size: 10.5px; fill: var(--muted); opacity: .85;
  font-variant-numeric: tabular-nums;
}
.blog-grid-line { stroke: var(--border); stroke-width: 1; }
.blog-marker-line { stroke: var(--brand-koraal); stroke-width: 1.5; stroke-dasharray: 4 3; }
.blog-marker-label { font-size: 11px; font-weight: 700; fill: var(--brand-koraal); }
.blog-void { fill: var(--surface2); }

.blog-tooltip {
  position: fixed; pointer-events: none;
  background: var(--text); color: var(--bg);
  font-size: .74rem; padding: .45rem .6rem; border-radius: 6px;
  line-height: 1.5; opacity: 0; transform: translate(-50%, -100%);
  transition: opacity .1s ease; z-index: 10; white-space: nowrap;
  box-shadow: 0 4px 16px var(--shadow);
}
.blog-tooltip.visible { opacity: 1; }
.blog-tooltip b { font-weight: 700; }

/* ── Leaderboard table ── */
.blog-board { width: 100%; border-collapse: collapse; font-size: .88rem; }
.blog-board th {
  text-align: left; font-size: .7rem; letter-spacing: .05em; text-transform: uppercase;
  color: var(--muted); font-weight: 700;
  padding: 0 .5rem .55rem; border-bottom: 1px solid var(--border);
}
.blog-board th.num, .blog-board td.num { text-align: right; }
.blog-board td { padding: .5rem; border-bottom: 1px solid var(--border); vertical-align: middle; color: var(--text); }
.blog-board tr:last-child td { border-bottom: none; }
.blog-rank { color: var(--muted); font-variant-numeric: tabular-nums; }
.blog-rider-name { font-weight: 700; }
.blog-count-cell { font-variant-numeric: tabular-nums; }
.blog-mini-bar-cell { width: 110px; }
.blog-mini-bar-track { width: 100px; height: 6px; background: var(--surface2); border-radius: 3px; overflow: hidden; }
.blog-mini-bar-fill { height: 100%; background: var(--gold); border-radius: 3px; }
@media (max-width: 560px) { .blog-mini-bar-cell { display: none; } }

/* ── Article footnote ── */
.blog-footnote { font-size: .78rem; color: var(--muted); line-height: 1.6; }
.blog-footnote code {
  font-size: .82em; background: var(--surface2); border-radius: 4px; padding: .1rem .35rem;
}

/* ── Blog index cards (output/blog/index.html) ── */
.blog-index-grid { display: grid; grid-template-columns: 1fr; gap: .85rem; }
.blog-index-card {
  display: block; background: var(--surface2); border: 1px solid var(--border);
  border-radius: 8px; padding: 1rem 1.1rem; color: var(--text);
}
.blog-index-card:hover { border-color: var(--accent); }
.blog-index-card .blog-meta { margin: 0 0 .3rem; }
.blog-index-card h3 { font-size: 1.05rem; font-weight: 800; margin: 0 0 .3rem; color: var(--text); }
.blog-index-card p { font-size: .85rem; color: var(--muted); margin: 0; line-height: 1.5; }

@media (min-width: 600px) {
  .blog-index-grid { grid-template-columns: repeat(2, 1fr); }
}