/* ============================================================
   Match Summary — Summary / Scorecard / Commentary tab widget
   Used on match_summary.php. Prefixed .ms- to stay isolated
   from the rest of the design system in style.css.
   ============================================================ */

.ms-wrap { max-width: 820px; }

.ms-scorehead { background: var(--pavilion); color: var(--parchment); border-radius: 10px; padding: 22px 20px 18px; text-align: center; margin-bottom: 18px; }
.ms-tour { font-family: var(--font-mono); font-size: .68rem; letter-spacing: .22em; text-transform: uppercase; color: #fff; margin-bottom: 14px; }
.ms-teams { display: flex; justify-content: center; align-items: flex-start; gap: 28px; flex-wrap: wrap; margin-bottom: 16px; }
.ms-team { display: flex; flex-direction: column; align-items: center; gap: 8px; min-width: 110px; }
.ms-team img { width: 44px; height: 44px; border-radius: 50%; object-fit: cover; border: 2px solid var(--brass); }
.ms-team-score { font-family: var(--font-mono); font-size: 1.35rem; font-weight: 700; color: var(--brass-bright); }
.ms-team-score .ms-overs { font-size: .72rem; font-weight: 400; color: #fff; }
.ms-team-name { font-family: var(--font-display); font-weight: 600; font-size: .92rem; color: #fff; }
.ms-result { font-family: var(--font-display); font-size: 1.1rem; font-weight: 600; color: #fff; }
.ms-subline { font-family: var(--font-mono); font-size: .72rem; color: #fff; margin-top: 4px; }

.ms-tabs { display: flex; border-bottom: 1px solid var(--line); margin-bottom: 20px; gap: 4px; }
.ms-tab { flex: 1; background: none; border: none; cursor: pointer; padding: 12px 6px; font-family: var(--font-mono); font-size: .72rem; letter-spacing: .1em; text-transform: uppercase; color: #fff; opacity: .65; border-bottom: 2px solid transparent; transition: color .15s, border-color .15s, opacity .15s; }
.ms-tab:hover { opacity: 1; }
.ms-tab.active { color: #fff; opacity: 1; font-weight: 700; border-bottom-color: var(--brass); }
.ms-panel[hidden] { display: none; }

.ms-potm { display: flex; align-items: center; justify-content: space-between; gap: 12px; background: var(--pavilion); color: var(--parchment); border-radius: 8px; padding: 14px 18px; margin-bottom: 22px; }
.ms-potm-label { font-family: var(--font-mono); font-size: .62rem; letter-spacing: .14em; text-transform: uppercase; color: #fff; }
.ms-potm-name { font-family: var(--font-display); font-weight: 600; font-size: 1rem; margin-top: 2px; color: #fff; }
.ms-potm-fig { font-family: var(--font-mono); font-size: .82rem; color: var(--brass-bright); margin-top: 2px; }
.ms-potm-avatar { width: 46px; height: 46px; border-radius: 50%; object-fit: cover; border: 2px solid var(--brass); flex: none; }
.ms-potm-avatar-fallback { width: 46px; height: 46px; border-radius: 50%; background: var(--ink); flex: none; display: flex; align-items: center; justify-content: center; font-size: 1.3rem; }

.ms-inn-summary { margin-bottom: 22px; }
.ms-inn-summary-head { font-family: var(--font-display); font-weight: 600; font-size: .95rem; color: #fff; border-bottom: 1px solid var(--line); padding-bottom: 8px; margin-bottom: 10px; }
.ms-inn-summary-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0 18px; }
.ms-perf-col { display: flex; flex-direction: column; gap: 8px; }
.ms-perf-row { display: flex; justify-content: space-between; gap: 10px; font-size: .85rem; }
.ms-perf-fig { font-family: var(--font-mono); color: var(--mist-bright); white-space: nowrap; }

.ms-row-player { display: inline-flex; align-items: center; gap: 8px; }
.ms-avatar-sm { width: 26px; height: 26px; border-radius: 50%; object-fit: cover; flex: none; border: 1px solid var(--line); }
.ms-avatar-fallback { display: inline-flex; align-items: center; justify-content: center; background: var(--pavilion); color: var(--brass-bright); font-family: var(--font-display); font-weight: 600; font-size: .72rem; text-transform: uppercase; }

.ms-meta-row { font-size: .8rem; color: var(--mist-bright); padding: 6px 0; border-top: 1px solid var(--line); }
.ms-meta-row:first-of-type { border-top: 1px solid var(--line); margin-top: 6px; }

.ms-team-toggle { display: flex; gap: 8px; margin-bottom: 18px; }
.ms-toggle-btn { flex: 1; padding: 9px 10px; border-radius: 6px; border: 1px solid var(--line); background: transparent; color: #fff; font-family: var(--font-body); font-weight: 600; font-size: .85rem; cursor: pointer; }
.ms-toggle-btn.active { background: var(--pavilion); border-color: var(--pavilion); color: #fff; }

/* Inside .card (dark olive background), so player names stay ivory for contrast. */
.card .ms-row-player { color: var(--parchment); }

.ms-comm-innings + .ms-comm-innings { margin-top: 20px; }
.ms-comm-head { font-family: var(--font-mono); font-size: .65rem; letter-spacing: .12em; text-transform: uppercase; color: #fff; margin-bottom: 10px; }
.ms-comm-line { font-size: .85rem; padding: 8px 10px; border-radius: 3px; color: var(--parchment); border-bottom: 1px solid var(--line); }
.ms-comm-line:last-child { border-bottom: none; }