/* ============================================================
   Chart chrome — title, subtitle, legend

   The canvas draws data and nothing else. Titles and legends are real
   DOM so the text stays crisp, the legend keys are proper hit targets,
   and each key can carry its series' current value. Built by
   chart-theme.js (mountFrame / renderLegend).
   ============================================================ */

.awesome-graph-container.chart-frame {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.chart-head {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 8px 16px;
  flex: 0 0 auto;
}

.chart-titles {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.chart-title {
  font-family: var(--font-sans);
  font-size: 15px;
  font-weight: 600;
  line-height: 1.2;
  color: var(--chart-ink);
  letter-spacing: -0.01em;
}

.chart-sub {
  font-family: var(--font-mono);
  font-size: 10.5px;
  line-height: 1.3;
  color: var(--chart-muted);
  text-transform: lowercase;
}

/* ---- Legend ----
   Always present for two or more series: identity never rests on colour
   alone. Each key toggles its series. */

.chart-legend {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 2px;
}

.chart-key {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  min-height: 24px;
  padding: 4px 8px;
  border: none;
  border-radius: var(--radius-sm);
  background: transparent;
  cursor: pointer;
  transition: background-color 0.15s ease, opacity 0.15s ease;
}

.chart-key:hover {
  background: var(--surface-2);
}

/* A hidden series stays readable — dimmed, not removed. */
.chart-key[aria-pressed="false"] {
  opacity: 0.4;
}

.chart-key__dash {
  width: 14px;
  height: 2px;
  border-radius: 1px;
  flex: 0 0 auto;
}

.chart-key__label {
  font-family: var(--font-sans);
  font-size: 11.5px;
  font-weight: 500;
  color: var(--chart-ink-2);
  white-space: nowrap;
}

/* Current value beside the key: doubles as the visible-label relief that
   the lighter series steps require for contrast. */
.chart-key__value {
  font-family: var(--font-mono);
  font-size: 11.5px;
  font-weight: 600;
  color: var(--chart-ink);
  font-variant-numeric: tabular-nums;
}

/* ---- Plot area ---- */

.chart-canvas {
  position: relative;
  flex: 1 1 auto;
  min-height: 0;
}

.chart-canvas--empty::after {
  content: "No data for this player";
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--chart-muted);
}

@media (max-width: 768px) {
  .chart-head {
    align-items: flex-start;
    flex-direction: column;
  }

  .chart-legend {
    margin-left: -8px; /* pull keys back to the title's optical edge */
  }
}