/* =====================================================================
   MATCHDAY — components.css
   Reusable element styles (buttons, pills, tags, cards, match rows).
   Depends on colors_and_type.css. Class prefix: .md-
   ===================================================================== */

/* ---- Buttons -------------------------------------------------------- */
.md-btn {
  font: 600 14px/1 var(--font-ui);
  display: inline-flex; align-items: center; gap: 8px;
  padding: 12px 18px; border-radius: var(--r-md);
  border: 1px solid transparent; cursor: pointer;
  transition: transform var(--dur-fast) var(--ease-out),
              background var(--dur) var(--ease-out),
              border-color var(--dur) var(--ease-out);
  user-select: none; white-space: nowrap;
}
.md-btn:active { transform: scale(0.97); }
.md-btn svg, .md-btn i { width: 18px; height: 18px; }

.md-btn--primary { background: var(--pitch); color: #062a18; font-weight: 700; }
.md-btn--primary:hover { background: var(--pitch-bright); box-shadow: var(--glow-pitch); }
.md-btn--primary:active { background: var(--pitch-deep); }

.md-btn--secondary { background: var(--bg-3); color: var(--fg-0); border-color: var(--line-strong); }
.md-btn--secondary:hover { background: var(--bg-4); }

.md-btn--ghost { background: transparent; color: var(--fg-1); }
.md-btn--ghost:hover { background: var(--bg-2); color: var(--fg-0); }

.md-btn--team { background: var(--team-primary); color: var(--team-ink); font-weight: 700; }

.md-btn--pill { border-radius: var(--r-pill); }
.md-btn--sm { padding: 8px 13px; font-size: 13px; }
.md-btn[disabled] { opacity: .4; pointer-events: none; }

/* ---- Tags / status -------------------------------------------------- */
.md-tag {
  font: var(--overline); letter-spacing: var(--overline-track);
  text-transform: uppercase; color: var(--fg-2);
  display: inline-flex; align-items: center; gap: 6px;
  white-space: nowrap;
}
.md-chip {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 6px 11px; border-radius: var(--r-pill);
  background: var(--bg-3); border: 1px solid var(--line);
  font: 600 12.5px/1 var(--font-ui); color: var(--fg-1);
  white-space: nowrap; flex-shrink: 0;
}
.md-chip--active { background: var(--pitch-wash); border-color: rgba(0,196,106,.4); color: var(--pitch); }

.md-status {
  font: var(--overline); letter-spacing: .12em; text-transform: uppercase;
  padding: 5px 10px; border-radius: var(--r-pill);
  display: inline-flex; align-items: center; gap: 6px;
}
.md-status--live { background: var(--live-wash); color: var(--live); }
.md-status--ft   { background: rgba(255,255,255,.06); color: var(--fg-1); }
.md-status--up   { background: var(--pitch-wash); color: var(--pitch); }
.md-dot { width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
.md-dot--pulse { animation: md-pulse 1.4s var(--ease-in-out) infinite; }
@keyframes md-pulse { 0%,100% { opacity: 1; transform: scale(1); } 50% { opacity: .35; transform: scale(.7); } }

/* ---- Result pills W/D/L -------------------------------------------- */
.md-form { display: inline-flex; gap: 4px; }
.md-res {
  width: 30px; height: 22px; border-radius: var(--r-xs);
  font: 800 11px/1 var(--font-display); color: #08110d;
  display: inline-flex; align-items: center; justify-content: center;
  box-sizing: border-box;
}
.md-res--w { background: var(--win); }
.md-res--d { background: var(--draw); }
.md-res--l { background: var(--loss); color: #fff; }
/* Overtime outcomes: tie at regulation, then win/loss in OT/pens.
   Split capsule — left half = draw (the tie), right half = OT result.
   Same footprint as W/D/L; smaller label to fit "T-W". */
.md-res--ot { font-size: 9.5px; letter-spacing: 0; color: #08110d; }
.md-res--tw { background: linear-gradient(90deg, var(--draw) 0 48%, var(--win) 48% 100%); }
.md-res--tl { background: linear-gradient(90deg, var(--draw) 0 48%, var(--loss) 48% 100%); }

/* ---- Cards ---------------------------------------------------------- */
.md-card {
  background: var(--bg-2); border: 1px solid var(--line);
  border-radius: var(--r-lg); box-shadow: var(--shadow-2);
}
.md-card--pad { padding: var(--sp-4); }

/* ---- Match row ------------------------------------------------------ */
.md-match {
  display: grid; grid-template-columns: 1fr auto 1fr; align-items: center;
  gap: 12px; padding: 14px 16px;
}
.md-match__side { display: flex; align-items: center; gap: 10px; min-width: 0; }
.md-match__side--home { justify-content: flex-end; text-align: right; }
.md-match__name { font: 700 15px/1.1 var(--font-ui); white-space: nowrap; }
.md-match__code { font: var(--overline); letter-spacing: .1em; color: var(--fg-2); }
.md-match__score {
  font-family: var(--font-num); font-variant-numeric: tabular-nums;
  font-weight: 800; font-size: 26px; min-width: 64px; text-align: center;
  letter-spacing: -.01em;
}
.md-match__time { font: 600 13px/1 var(--font-ui); color: var(--fg-1); min-width: 64px; text-align: center; }

/* ---- Inputs --------------------------------------------------------- */
.md-input {
  background: var(--bg-3); border: 1px solid var(--line-strong);
  border-radius: var(--r-md); color: var(--fg-0);
  font: 400 15px/1.2 var(--font-ui); padding: 12px 14px; width: 100%;
  box-sizing: border-box; outline: none;
  transition: border-color var(--dur) var(--ease-out);
}
.md-input::placeholder { color: var(--fg-2); }
.md-input:focus { border-color: var(--pitch); }

/* ---- Section header ------------------------------------------------- */
.md-section-head {
  display: flex; align-items: baseline; justify-content: space-between;
  padding: 0 2px 10px;
}
.md-section-head h3 { font: var(--h3); }