/*
 * The Facts tab's momentum chart (MatchMomentum.js) — a signed area about a
 * centre line, with the goals marked over it and a ninety-minute axis under it.
 *
 * The card material is the one every card on that tab wears; only what is
 * inside it is described here.
 *
 * --- Colour ---------------------------------------------------------------
 *
 * `--stat-home` / `--stat-away` reach this sheet the way they reach the
 * Statistics tab's rows: declared in tokens.css on `[data-team-colours]`,
 * which the Facts panel root carries, and overridden per fixture by
 * core/team-colours.js once the crests have been sampled. Nothing here waits
 * for that — the fallback pair paints from the first frame.
 *
 * --- Geometry -------------------------------------------------------------
 *
 * Everything laid over the plot is positioned in percent of the plot's own
 * width, off a `--at` set in the markup. That is the contract between this
 * sheet and MatchMomentum.js: the component decides which minute a thing sits
 * on and expresses it as a percentage; this sheet only knows how to put
 * something at a percentage.
 */

.momentum {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  padding: var(--space-4);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-card);
}

.momentum__title {
  margin: 0;
  font-size: var(--text-sm);
  font-weight: var(--weight-bold);
  color: var(--text);
  text-align: center;
}

/*
 * The plot's height is fixed rather than an aspect ratio. The chart is a
 * ninety-minute strip whatever phone it is on: letting it grow taller on a
 * wide screen would exaggerate every peak in it, and the peaks are the reading.
 */
.momentum__plot {
  position: relative;
  height: 104px;
  /* Room for the goal marks, which sit above and below the area itself. */
  margin-block: var(--space-4);
}

.momentum__chart {
  display: block;
  width: 100%;
  height: 100%;
}

.momentum__area[data-side="home"] {
  fill: var(--stat-home);
}

.momentum__area[data-side="away"] {
  fill: var(--stat-away);
}

/*
 * The line the area is signed about. Under the fills in the stacking order —
 * it is a baseline, not a rule drawn on top of the data — which is why it is
 * the first of the overlays and carries no z-index of its own.
 */
.momentum__midline {
  position: absolute;
  inset: 50% 0 auto 0;
  height: 1px;
  background: var(--border);
}

/* Half time. Dotted rather than solid: it divides the match, it does not
   measure anything, and a solid rule through the middle of a chart reads as a
   threshold the data crossed. */
.momentum__half {
  position: absolute;
  inset: -8px auto -8px var(--at);
  width: 0;
  border-left: 2px dotted var(--border-strong);
  opacity: 0.5;
}

.momentum__goals {
  position: absolute;
  inset: 0;
}

/*
 * A goal. Home above the plot, away below it, on the minute it was scored.
 *
 * Outside the area rather than on it, because a ball drawn on the fill would
 * be a mark the reader has to separate from the shape it is sitting in — and
 * at the moment a side scores, that shape is usually at its tallest right
 * there.
 */
.momentum__goal {
  position: absolute;
  left: var(--at);
  display: grid;
  place-items: center;
  width: 20px;
  height: 20px;
  color: var(--text);
  transform: translateX(-50%);
}

.momentum__goal[data-side="home"] {
  top: -14px;
}

.momentum__goal[data-side="away"] {
  bottom: -14px;
}

/*
 * The axis: 0' — HT — FT, with a dotted run between the labels. The runs take
 * the room and the labels take what they need, so the three sit at the start,
 * the middle and the end without any of them being positioned.
 */
.momentum__axis {
  display: flex;
  align-items: center;
  gap: var(--space-2);
}

.momentum__tick {
  font-size: var(--text-2xs);
  font-weight: var(--weight-bold);
  color: var(--text-secondary);
}

.momentum__rule {
  flex: 1;
  height: 0;
  border-top: 2px dotted var(--border-strong);
  opacity: 0.45;
}