/* ═══════════════════════════════════════════════════════════
   ScoreMatrix — Premium Polish Pack
   Additive only: no existing selectors are overridden in a
   breaking way, this file only adds new visual behavior.
═══════════════════════════════════════════════════════════ */

/* ── 1. Smooth theme-switch transitions ──
   Because --bg/--surface/etc are CSS custom properties, adding
   transitions on the properties that consume them makes the
   light/dark toggle animate instead of snapping instantly. */
body,
header,
.tabs,
.card,
.most-likely-hero,
.team-card,
.outcome-tile,
.xg-pill,
input,
select,
.fm-input,
.fm-name-input,
.header-stats-strip,
.header-stats-strip-mobile,
.header-mode-badge {
  transition: background-color 0.35s ease, border-color 0.35s ease, color 0.35s ease, box-shadow 0.35s ease;
}

/* ── 2. Tabular numerals everywhere numbers show up ──
   Keeps digits fixed-width so scores/odds/percentages don't
   jiggle side to side as they animate or update. */
.mlh-score, .otile-pct, .otile-odds, .xg-pill-val, .hss-value, .hssm-value,
.ev-value, .ev-model-prob, .conf-meter-badge, .confidence-bar-label,
.ps-scoreline, .bar-pct, .pill-score, .pill-pct, .badge-mode,
#badge-rho, #badge-tau {
  font-variant-numeric: tabular-nums;
}

/* ── 3. Hero score: entrance pop + probability ring ── */
.mlh-score-row {
  position: relative;
}
.mlh-score.sm-score-animating {
  animation: sm-score-pop 0.5s cubic-bezier(0.2, 0.9, 0.3, 1.3);
}
@keyframes sm-score-pop {
  0%   { transform: scale(0.85); opacity: 0.3; filter: blur(2px); }
  60%  { transform: scale(1.05); opacity: 1; filter: blur(0); }
  100% { transform: scale(1); }
}
/* The ring is positioned via JS (left/top set inline) relative to
   .mlh-score-row, glued to the right edge of the score's own
   rendered width. This keeps the score text itself perfectly
   centered in the card no matter how wide the ring is or isn't. */
.sm-prob-ring-wrap {
  position: absolute;
  width: 54px;
  height: 54px;
  display: none;
}
.sm-prob-ring-wrap.sm-visible { display: inline-flex; }
@media (max-width: 480px) {
  /* Not enough horizontal room next to the score on small phones —
     drop the ring below the score instead of crowding/clipping it. */
  .sm-prob-ring-wrap {
    width: 40px;
    height: 40px;
  }
}
.sm-prob-ring-wrap svg { transform: rotate(-90deg); }
.sm-prob-ring-track { fill: none; stroke: var(--border); stroke-width: 4; }
.sm-prob-ring-fill {
  fill: none;
  stroke: var(--accent);
  stroke-width: 4;
  stroke-linecap: round;
  transition: stroke-dashoffset 0.9s cubic-bezier(0.4,0,0.2,1), stroke 0.4s ease;
}
.sm-prob-ring-label {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.62rem;
  font-weight: 800;
  color: var(--text);
}

/* ── 4. xG pills: progressive disclosure ──
   Slightly recessive until the hero card is hovered/tapped, so
   the score stays the visual anchor and the pills read as
   secondary detail rather than equal-weight noise. */
.xg-pill {
  opacity: 0.72;
  filter: saturate(0.85);
  transition: opacity 0.2s ease, filter 0.2s ease, background 0.15s, border-color 0.15s;
}
.most-likely-hero:hover .xg-pill,
.most-likely-hero:focus-within .xg-pill,
.xg-pill:hover {
  opacity: 1;
  filter: saturate(1);
}

/* ── 5. Staggered results reveal ──
   Applied via JS by toggling .sm-stagger-in on tiles/pills the
   moment the Results tab actually renders data. */
.sm-stagger-item {
  opacity: 0;
  transform: translateY(8px);
}
.sm-stagger-item.sm-stagger-in {
  animation: sm-stagger-fade 0.45s cubic-bezier(0.2,0.8,0.3,1) forwards;
  animation-delay: var(--sm-delay, 0ms);
}
@keyframes sm-stagger-fade {
  to { opacity: 1; transform: translateY(0); }
}

/* ── 6. Team input rows: ambient home/away tinting ──
   Very low-opacity wash behind each row so the form reads as
   structured even before anything is typed. */
.fm-row-home {
  position: relative;
  background: linear-gradient(90deg, rgba(29,177,255,0.055), transparent 55%);
}
.fm-row-away {
  position: relative;
  background: linear-gradient(90deg, rgba(255,107,53,0.055), transparent 55%);
}
body.light .fm-row-home { background: linear-gradient(90deg, rgba(0,116,232,0.045), transparent 55%); }
body.light .fm-row-away { background: linear-gradient(90deg, rgba(224,85,0,0.045), transparent 55%); }

/* ── 7. Micro-validation checkmarks on team inputs ──
   A small fade-in check to the right of a field once it looks
   plausibly filled in — cheap, but reads as "considered". */
.fm-team-cell, .fm-input-cell { position: relative; }
.sm-field-check {
  position: absolute;
  right: 6px;
  top: 50%;
  transform: translateY(-50%) scale(0.6);
  width: 15px;
  height: 15px;
  border-radius: 50%;
  background: rgba(0,212,139,0.15);
  color: var(--green, #00d48b);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 10px;
  font-weight: 800;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s ease, transform 0.2s ease;
}
.sm-field-check.sm-visible { opacity: 1; transform: translateY(-50%) scale(1); }
.fm-team-cell .sm-field-check { right: 10px; }

/* ── 8. Empty state: quiet "waiting for data" pulse ── */
.sm-empty-pulse {
  display: flex;
  justify-content: center;
  gap: 5px;
  margin-top: 10px;
}
.sm-empty-pulse span {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--accent);
  opacity: 0.35;
  animation: sm-empty-dot 1.4s ease-in-out infinite;
}
.sm-empty-pulse span:nth-child(2) { animation-delay: 0.18s; }
.sm-empty-pulse span:nth-child(3) { animation-delay: 0.36s; }
@keyframes sm-empty-dot {
  0%, 100% { opacity: 0.25; transform: scale(0.85); }
  50% { opacity: 0.9; transform: scale(1.15); }
}

/* ── 9. Theme toggle: rotate + cross-fade instead of an instant swap ── */
#theme-icon {
  display: inline-block;
  transition: transform 0.35s cubic-bezier(0.4,0,0.2,1), opacity 0.2s ease;
}
#theme-icon.sm-spin {
  animation: sm-theme-spin 0.4s ease;
}
@keyframes sm-theme-spin {
  0%   { transform: rotate(0deg) scale(1); opacity: 1; }
  45%  { transform: rotate(150deg) scale(0.7); opacity: 0.25; }
  55%  { transform: rotate(190deg) scale(0.7); opacity: 0.25; }
  100% { transform: rotate(360deg) scale(1); opacity: 1; }
}

/* ── 10. Confidence dots — shared visual language for signal
   strength, reused across outcome tiles (and reusable anywhere
   else .sm-conf-dots is dropped in). ── */
.sm-conf-dots {
  display: inline-flex;
  gap: 3px;
  margin-top: 5px;
  justify-content: center;
}
.sm-conf-dots span {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--border);
  transition: background 0.3s ease, transform 0.3s ease;
}
.sm-conf-dots.sm-dots-1 span:nth-child(1),
.sm-conf-dots.sm-dots-2 span:nth-child(1),
.sm-conf-dots.sm-dots-2 span:nth-child(2),
.sm-conf-dots.sm-dots-3 span:nth-child(1),
.sm-conf-dots.sm-dots-3 span:nth-child(2),
.sm-conf-dots.sm-dots-3 span:nth-child(3) {
  background: var(--sm-dot-color, var(--accent));
  transform: scale(1.15);
}

@media (prefers-reduced-motion: reduce) {
  .mlh-score.sm-score-animating,
  .sm-stagger-item.sm-stagger-in,
  #theme-icon.sm-spin,
  .sm-empty-pulse span {
    animation: none !important;
  }
  .sm-stagger-item { opacity: 1; transform: none; }
}