/* Match charts: compact, data-first graphics that inherit the dashboard's
   day/night surfaces and readable text tokens. */
.fp-match-graphs {
  --fp-graph-home-color: var(--fp-status-good, #14764e);
  --fp-graph-away-color: var(--fp-status-score, #a85d16);
  --fp-graph-ink: var(--fp-ink, #122c32);
  --fp-graph-muted: var(--fp-readable-muted, var(--fp-muted, #5c7075));
  --fp-graph-border: var(--fp-dashboard-border, var(--fp-line, #dce6e4));
  --fp-graph-wash: var(--fp-dashboard-wash, var(--fp-surface-soft, #edf5ef));
  --fp-graph-surface: var(--fp-surface, transparent);
  min-width: 0;
  margin-top: 14px;
  color: var(--fp-graph-ink);
  font-size: 13px;
}

.fp-match-graphs *,
.fp-match-graphs *::before,
.fp-match-graphs *::after { box-sizing: border-box; }

.fp-match-graphs h2 {
  margin: 0 0 9px;
  color: var(--fp-graph-ink);
  font-size: clamp(18px, 2.4vw, 22px);
  line-height: 1.3;
  letter-spacing: -.025em;
}

.fp-graph-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 248px), 1fr));
  align-items: stretch;
  gap: 9px;
  min-width: 0;
}

.fp-graph-card {
  min-width: 0;
  margin: 0;
  padding: 12px;
  border: 1px solid var(--fp-graph-border);
  border-radius: 9px;
  background: var(--fp-graph-surface);
}

.fp-graph-card h3 {
  margin: 0 0 10px;
  color: var(--fp-graph-ink);
  font-size: 14px;
  font-weight: 750;
  line-height: 1.35;
  overflow-wrap: anywhere;
}

.fp-graph-card figcaption {
  margin-top: 7px;
  color: var(--fp-graph-muted);
  font-size: 11px;
  line-height: 1.5;
  overflow-wrap: anywhere;
}

.fp-graph-legend {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 14px;
  min-width: 0;
  margin: 0 0 8px;
  color: var(--fp-graph-muted);
  font-size: 11px;
  line-height: 1.4;
}

.fp-graph-legend > span {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
  overflow-wrap: anywhere;
}

.fp-graph-legend > span::before {
  content: "";
  flex: 0 0 9px;
  width: 9px;
  height: 9px;
  border-radius: 2px;
  background: currentColor;
}

.fp-graph-legend .fp-graph-home { color: var(--fp-graph-home-color); }
.fp-graph-legend .fp-graph-away { color: var(--fp-graph-away-color); }

.fp-graph-svg {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 600 / 220;
  min-width: 0;
  overflow: visible;
  color: var(--fp-graph-muted);
}

.fp-graph-svg .fp-graph-axis {
  fill: none;
  stroke: var(--fp-graph-border);
  stroke-width: 1.25;
  vector-effect: non-scaling-stroke;
}

.fp-graph-svg .fp-graph-label {
  fill: currentColor;
  font-family: inherit;
  font-size: 16px;
}

.fp-graph-svg .fp-graph-home { fill: var(--fp-graph-home-color); }
.fp-graph-svg .fp-graph-away { fill: var(--fp-graph-away-color); }

.fp-graph-rows {
  display: grid;
  gap: 10px;
  min-width: 0;
  margin-top: 12px;
}

.fp-graph-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 5px;
  min-width: 0;
}

.fp-graph-row > strong {
  min-width: 0;
  color: var(--fp-graph-ink);
  font-size: 11px;
  font-weight: 700;
  line-height: 1.35;
  overflow-wrap: anywhere;
}

.fp-graph-series {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(2ch, auto);
  align-items: center;
  gap: 7px;
  min-width: 0;
  color: var(--fp-graph-muted);
  font-size: 10px;
  font-variant-numeric: tabular-nums;
}

.fp-graph-track {
  display: block;
  position: relative;
  min-width: 0;
  height: 7px;
  overflow: hidden;
  border-radius: 99px;
  background: var(--fp-graph-wash);
}

.fp-graph-track > i {
  display: block;
  width: 0;
  height: 100%;
  min-width: 0;
  border-radius: inherit;
  font-style: normal;
}

.fp-graph-track > i.fp-graph-home { background: var(--fp-graph-home-color); }
.fp-graph-track > i.fp-graph-away { background: var(--fp-graph-away-color); }

.fp-graph-series > b {
  min-width: 2ch;
  color: var(--fp-graph-ink);
  font-size: 10px;
  font-weight: 750;
  text-align: right;
}

.fp-momentum {
  width: 100%;
  margin: 0 0 12px;
  padding: 13px;
  border: 1px solid var(--fp-graph-border);
  border-radius: 9px;
  background: var(--fp-graph-wash);
}

.fp-momentum h3 {
  margin: 0 0 10px;
  color: var(--fp-graph-ink);
  font-size: 14px;
  font-weight: 750;
  line-height: 1.35;
}

.fp-momentum .fp-graph-svg {
  min-height: 100px;
  max-height: 220px;
}

.fp-momentum figcaption {
  margin-top: 8px;
  color: var(--fp-graph-muted);
  font-size: 11px;
  line-height: 1.5;
}

.fp-graph-possession {
  display: flex;
  width: 100%;
  height: 14px;
  margin: 14px 0 10px;
  overflow: hidden;
  border-radius: 99px;
  background: var(--fp-graph-wash);
}

.fp-graph-possession > .fp-graph-home {
  display: block;
  min-width: 0;
  background: var(--fp-graph-home-color);
}

.fp-graph-possession > .fp-graph-away {
  display: block;
  min-width: 0;
  background: var(--fp-graph-away-color);
}

.fp-graph-empty {
  margin: 0;
  padding: 15px;
  border: 1px dashed var(--fp-graph-border);
  border-radius: 8px;
  background: var(--fp-graph-wash);
  color: var(--fp-graph-muted);
  font-size: 12px;
  line-height: 1.55;
  text-align: center;
  overflow-wrap: anywhere;
}

.fp-graph-data {
  min-width: 0;
  margin-top: 10px;
  border-top: 1px solid var(--fp-graph-border);
}

.fp-graph-data > summary {
  padding: 9px 2px 2px;
  color: var(--fp-graph-muted);
  font-size: 11px;
  font-weight: 700;
  cursor: pointer;
}

.fp-graph-data > summary:hover { color: var(--fp-graph-ink); }
.fp-graph-data[open] > summary { margin-bottom: 8px; }

/* Optional explanatory copy stays available to readers without competing
   with the chart itself for the first scan. */
.fp-match-graphs .fp-graph-notes {
  min-width: 0;
  margin: 7px 0 0;
  border-top: 1px solid var(--fp-graph-border);
}
.fp-match-graphs .fp-graph-notes > summary {
  padding: 7px 2px 1px;
  color: var(--fp-graph-muted);
  font-size: 11px;
  font-weight: 700;
  line-height: 1.4;
  cursor: pointer;
}
.fp-match-graphs .fp-graph-notes > summary:hover { color: var(--fp-graph-ink); }
.fp-match-graphs .fp-graph-notes[open] > summary { margin-bottom: 5px; }
.fp-match-graphs .fp-graph-notes > :not(summary) {
  max-width: 78ch;
  margin-top: 0;
  margin-bottom: 7px;
  color: var(--fp-graph-muted);
  font-size: 11px;
  line-height: 1.5;
  overflow-wrap: anywhere;
}

.fp-graph-data table {
  width: 100%;
  border-collapse: collapse;
  color: var(--fp-graph-ink);
  font-size: 11px;
  line-height: 1.45;
  font-variant-numeric: tabular-nums;
  text-align: left;
}

.fp-graph-data caption {
  padding: 8px;
  background: var(--fp-graph-wash);
  color: var(--fp-graph-ink);
  font-weight: 700;
  text-align: left;
}

.fp-graph-data th,
.fp-graph-data td {
  padding: 7px 8px;
  border-bottom: 1px solid var(--fp-graph-border);
  vertical-align: top;
  overflow-wrap: anywhere;
}

.fp-graph-data thead th {
  color: var(--fp-graph-muted);
  font-size: 10px;
  font-weight: 750;
}

.fp-match-graphs :focus-visible {
  outline: 3px solid var(--fp-dashboard-green, #17683c);
  outline-offset: 3px;
  border-radius: 3px;
}

@media (max-width: 520px) {
  .fp-match-graphs { margin-top: 12px; }
  .fp-graph-grid { grid-template-columns: minmax(0, 1fr); gap: 8px; }
  .fp-graph-card, .fp-momentum { padding: 11px; }
  .fp-graph-legend { gap: 5px 10px; }
  .fp-graph-svg { min-height: 90px; }
  .fp-graph-svg .fp-graph-label { font-size: 19px; }
  .fp-momentum .fp-graph-svg { min-height: 105px; }
}

@media (max-width: 350px) {
  .fp-graph-card, .fp-momentum { padding: 9px; }
  .fp-graph-legend { font-size: 10px; }
  .fp-graph-data th, .fp-graph-data td { padding: 6px 5px; }
}

@media (prefers-reduced-motion: reduce) {
  .fp-match-graphs *,
  .fp-match-graphs *::before,
  .fp-match-graphs *::after { scroll-behavior: auto !important; transition: none !important; }
}