/* Match Card — colored block showing match score with optional
 * "PLAY EARLY: NN.NN" strip on the bottom. Mirrors the Figma
 * "Match with PE BLock" group inside the School Result component.
 *
 * Semantic structure: <dl> / <dt> (label) / <dd> (value). The label
 * appears below the value visually but comes first in the DOM so the
 * <dl> reads as "MATCH = 86%" to a screen reader.
 *
 * See MatchCardComponent.
 */

.match-card {
  display: inline-flex;
  flex-direction: column;
  width: 115px;
  border-radius: 8px;
  overflow: hidden;
  font-family: var(--font-family-display);
  color: white;
  user-select: none;
}

/* Reset browser dl/dt/dd defaults inside the card. */
.match-card dl,
.match-card dt,
.match-card dd { margin: 0; padding: 0; }

.match-card__match {
  flex: 1;
  display: grid;
  grid-template-columns: auto auto;
  /* Row 1 = label (semantic order), but visually placed below the value
   * via grid-row assignments on the children. */
  grid-template-rows: auto auto;
  align-content: center;
  justify-content: center;
  column-gap: 0.125rem;
  padding: 0.5rem;
}

.match-card__value {
  grid-row: 1;
  grid-column: 1 / -1;
  display: contents; /* let primary + modifier participate in the parent grid */
}

.match-card__primary {
  grid-row: 1;
  font-size: 48px;
  font-weight: 900;
  font-style: italic;
  line-height: 1;
  align-self: start;
}

.match-card__modifier {
  grid-row: 1;
  font-weight: 300;
  line-height: 1;
}

/* Numeric mode (default): % sits at the top of the number's cap height,
 * top-aligned like a superscript. */
.match-card--kind-numeric .match-card__modifier {
  align-self: start;
  font-size: 20px;
}

/* Letter-grade mode: matches PlayEarlyCardComponent's canonical letter
 * style — letter at 36px, ± at 22px, vertically centered as a balanced
 * grade unit (not a letter with a footnote modifier). The 0.61 modifier-
 * to-primary ratio reads as one composite glyph. */
.match-card--kind-letter .match-card__primary {
  font-size: 36px;
}
.match-card--kind-letter .match-card__modifier {
  align-self: center;
  font-size: 22px;
  font-style: italic;
  font-weight: 500;
}

.match-card__label {
  grid-column: 1 / -1;
  grid-row: 2;
  text-align: center;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.05em;
}

/* Play-early strip — its own <dl> with label + value rendered inline.
 * Visually a single line: "PLAY EARLY: 50.25". The <dl> reads as a
 * label/value pair to a screen reader. */
.match-card__play-early {
  background: var(--gray-800);
  color: white;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.02em;
  text-align: center;
  padding: 0.5rem 0.5rem;
  display: flex;
  justify-content: center;
  gap: 0.25rem;
}

/* Insert the visible ":" between label and value without putting it in
 * the DOM (keeps the <dt> text purely the label). */
.match-card__play-early-label::after {
  content: ":";
}

/* Tier tints — match the existing 70/40 score thresholds */
.match-card--high        .match-card__match { background: var(--stoplight-green);  }
.match-card--medium      .match-card__match { background: var(--stoplight-yellow); color: var(--gray-900); }
.match-card--low         .match-card__match { background: var(--stoplight-red);    }
.match-card--placeholder .match-card__match { background: var(--gray-500); }

/* Yellow medium tier needs dark text for contrast */
.match-card--medium .match-card__label { color: var(--gray-900); }

/* Standalone (no play-early strip) — fixed height per Figma */
.match-card:not(.match-card--with-play-early) {
  min-height: 96px;
}

/* With play-early — total height matches the Figma spec (104px) */
.match-card--with-play-early {
  min-height: 104px;
}

/* Touch-to-merge — any direct horizontal siblings carrying the
 * .score-card class butt up against each other and only the
 * leftmost/rightmost corners stay rounded. */
.score-card:has(+ .score-card) {
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
}

.score-card + .score-card {
  border-top-left-radius: 0;
  border-bottom-left-radius: 0;
}