/* ==========================================================================
   Rhyme Report
   Built from the existing chart pieces: .chart-page intro (charts/chart.css),
   .era-tabs and .card (main.css). This file adds the year plot and the song
   table. One measure at a time on one axis, one hue: each point is a song,
   the line joins the per-year means.
   ========================================================================== */

.rh-page { --rh-hue: var(--rc-accent); }

.rh-board .era-tabs { margin: 0 0 var(--rc-gap-panel, 1.25rem); flex-wrap: wrap; }
.rh-board .era-tab { flex: 1 1 9rem; }
.rh-board .era-tab-tagline { font-family: var(--rc-font-mono); }
.rh-card { position: relative; margin-bottom: var(--rc-gap-panel, 1.25rem); }

.rh-plot { position: relative; width: 100%; min-height: 320px; }
.rh-plot svg { display: block; width: 100%; height: 320px; overflow: visible; }
.rh-grid line { stroke: var(--rc-divider); stroke-width: 1; }
.rh-grid line.rh-base { stroke: var(--rc-border); }
.rh-axis text {
  fill: var(--rc-text-dim);
  font-family: var(--rc-font-mono);
  font-size: 11px;
}
.rh-mean { fill: none; stroke: var(--rh-hue); stroke-width: 2; opacity: 0.55; stroke-linejoin: round; }
.rh-dot { fill: var(--rh-hue); stroke: var(--rc-bg-panel); stroke-width: 2; }
.rh-hit { fill: transparent; cursor: pointer; }
.rh-hit:focus-visible { outline: none; stroke: var(--rc-accent-bright); stroke-width: 2; }
.rh-label { fill: var(--rc-text); font-size: 11px; }

.rh-tip {
  position: absolute;
  z-index: 5;
  pointer-events: none;
  background: var(--rc-bg-card);
  border: 1px solid var(--rc-border-ui);
  border-radius: var(--rc-radius-sm);
  padding: 0.45rem 0.6rem;
  font-size: 0.78rem;
  line-height: 1.45;
  color: var(--rc-text-bright);
  white-space: nowrap;
  transform: translate(-50%, calc(-100% - 12px));
}
.rh-tip .v { font-family: var(--rc-font-mono); color: var(--rc-accent-bright); }

.rh-table-wrap { overflow-x: auto; }
.rh-table { width: 100%; border-collapse: collapse; font-size: 0.86rem; }
.rh-table th {
  text-align: left;
  padding: 0.45rem 0.6rem;
  border-bottom: 1px solid var(--rc-border);
  color: var(--rc-text-dim);
  font-size: 0.72rem;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  font-weight: 600;
  white-space: nowrap;
}
.rh-table td { padding: 0.5rem 0.6rem; border-bottom: 1px solid var(--rc-divider); color: var(--rc-text); }
.rh-table .num { text-align: right; font-variant-numeric: tabular-nums; font-family: var(--rc-font-mono); }
.rh-table .artist { color: var(--rc-text-dim); font-size: 0.8rem; }
.rh-table a { color: var(--rc-text-bright); text-decoration: none; }
.rh-table a:hover { color: var(--rc-accent); }

.rh-status, .rh-empty { color: var(--rc-text-dim); font-size: 0.88rem; line-height: 1.5; }

.rh-note {
  max-width: 52rem;
  margin: 0;
  font-size: 0.82rem;
  line-height: 1.6;
  color: var(--rc-text-dim);
}

@media (max-width: 768px) {
  .rh-plot, .rh-plot svg { height: 260px; min-height: 260px; }
}