.ranking-overview {
  --chart-surface: #f1f5f0;
  --heat-0: #185441;
  --heat-1: #31785e;
  --heat-2: #b0d1ba;
  --heat-3: #d3e4d5;
  --heat-4: #edf2e8;
  border-radius: 14px;
}
.ranking-overview [hidden] { display: none !important; }
.ranking-overview .section-heading { align-items: flex-start; margin-bottom: 22px; }
.ranking-overview .section-heading h2 { font-size: 19px; }
.overview-toolbar { display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.overview-switch { display: inline-flex; flex-wrap: wrap; gap: 3px; padding: 4px; background: var(--chart-surface); border-radius: 9px; }
.overview-switch button { display: inline-flex; align-items: center; gap: 7px; padding: 8px 12px; min-height: 40px; border: 1px solid transparent; border-radius: 6px; background: transparent; color: var(--muted); font-size: 12px; font-weight: 600; }
.overview-switch button[aria-pressed=true] { background: var(--paper); border-color: var(--line); color: var(--accent); }
.overview-switch button svg { width: 17px; height: 17px; stroke: currentColor; stroke-width: 1.8; fill: none; }
.ranking-overview .overview-instruction { margin: 14px 0 0; color: var(--muted); }
.ranking-overview .chart-legend { display: grid; grid-template-columns: repeat(5,minmax(0,1fr)); gap: 8px; margin: 18px 0 0; }
.ranking-overview .chart-toggle { position: relative; display: grid; grid-template-columns: minmax(0,1fr) auto; gap: 4px 8px; padding: 10px 13px 10px 17px; min-height: 72px; background: var(--paper); border-radius: 8px; align-items: center; }
.ranking-overview .series-swatch { position: absolute; left: 0; top: 12px; bottom: 12px; width: 3px; height: auto; border-radius: 0 2px 2px 0; }
.overview-tag-name { grid-column: 1 / -1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 12px; font-weight: 600; }
.overview-current-rank { color: var(--series-color); font-size: 22px; font-weight: 650; line-height: 1.2; font-variant-numeric: tabular-nums; }
.overview-rank-change { font-size: 10px; color: var(--muted); font-variant-numeric: tabular-nums; }
.overview-rank-change.up { color: var(--accent); }
.overview-rank-change.down { color: var(--warm); }
.ranking-overview .chart-toggle.series-emphasized { border-color: var(--series-color); background: var(--chart-surface); }
.ranking-overview .chart-toggle[aria-pressed=false] { opacity: .55; border-style: dashed; }
.ranking-overview .overview-card-caption { margin: 8px 0 12px; font-size: 11px; }
.ranking-overview .chart-scroll { border: 1px solid var(--line); border-radius: 10px; background: var(--paper); }
.ranking-overview .rank-overview { min-width: 300px; }
.overview-top-band { fill: var(--chart-surface); }
.overview-date-guide { stroke: var(--line); stroke-width: 1; stroke-dasharray: 2 6; }
.ranking-overview .overview-line { stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round; }
.ranking-overview .overview-dot { stroke-width: 2; }
.overview-end-label { visibility: hidden; fill: var(--series-color); font-size: 12px; font-weight: 700; }
.has-chart-emphasis .overview-series:not(.series-emphasized) { opacity: .14; }
.ranking-overview .series-emphasized .overview-line { stroke-width: 4; }
.series-emphasized .overview-end-label { visibility: visible; }
.ranking-overview .overview-dot:focus-visible { stroke: var(--ink); stroke-width: 4; }
.overview-readout { display: flex; align-items: center; gap: 10px; padding: 12px 15px; margin-top: 18px; border-radius: 8px; background: var(--chart-surface); }
.overview-readout-mark { width: 7px; height: 7px; border-radius: 50%; background: var(--accent); flex-shrink: 0; }
.ranking-overview .overview-readout p { margin: 0; min-height: 1.7em; overflow-wrap: anywhere; }
.overview-empty { padding: 12px; border: 1px dashed var(--line); border-radius: 8px; }
.heatmap-key { display: flex; align-items: center; flex-wrap: wrap; gap: 5px; margin: 20px 0 10px; font-size: 11px; color: var(--muted); }
.heatmap-key i { width: 20px; height: 12px; border: 1px solid var(--line); border-radius: 3px; }
.heatmap-key span:last-child { margin-left: 10px; }
.heatmap-scroll { overflow: auto; max-width: 100%; border: 1px solid var(--line); border-radius: 10px; }
.rank-heatmap { border-collapse: separate; border-spacing: 4px; table-layout: fixed; min-width: 480px; }
.rank-heatmap caption { caption-side: bottom; text-align: left; padding: 10px 12px; min-width: 480px; font-size: 11px; }
.rank-heatmap th { text-align: center; padding: 8px 5px; background: var(--paper); font-size: 11px; min-width: 108px; }
.rank-heatmap th:first-child { position: sticky; left: 0; z-index: 1; width: 146px; text-align: left; overflow-wrap: anywhere; white-space: normal; color: var(--ink); }
.rank-heatmap td { padding: 0; border: 0; min-width: 108px; }
.rank-heatmap tr:hover { background: transparent; }
.heatmap-cell { display: block; width: 100%; min-width: 108px; min-height: 45px; padding: 10px 8px; border: 1px solid transparent; border-radius: 5px; font-size: 14px; font-weight: 650; font-variant-numeric: tabular-nums; }
.heat-level-0 { background: var(--heat-0); color: var(--paper); }
.heat-level-1 { background: var(--heat-1); color: var(--paper); }
.heat-level-2 { background: var(--heat-2); color: var(--ink); }
.heat-level-3 { background: var(--heat-3); color: var(--ink); }
.heat-level-4 { background: var(--heat-4); color: var(--ink); }
.heatmap-missing { background: transparent; border: 1px dashed var(--line); color: var(--muted); font-size: 11px; font-weight: 400; }
.heatmap-series.series-emphasized th { color: var(--accent); text-decoration: underline; text-underline-offset: 4px; }
@media(max-width:1100px) {
  .ranking-overview .chart-legend { grid-template-columns: repeat(3,minmax(0,1fr)); }
}
@media(max-width:760px) {
  .ranking-overview.chart-card { padding: 18px 14px; }
  .ranking-overview .chart-legend { grid-template-columns: none; grid-template-rows: auto; grid-auto-flow: column; grid-auto-columns: 144px; gap: 6px; overflow-x: auto; padding: 4px; }
  .ranking-overview .section-heading { align-items: flex-start; }
  .overview-toolbar { gap: 8px; }
  .overview-switch button { padding: 7px 9px; }
  .overview-current-rank { font-size: 20px; }
}