/* Match Pages — pair page (2026-09-15). WCAG AAA (≥7:1), light theme */
.mp-breadcrumb { font-size: 0.85rem; margin: 0 0 0.4rem; }
/* Links on the hero gradient (#134dce→#6e4698): white only — 7.05:1 (AAA); blue was invisible */
.mp-breadcrumb a { color: #ffffff; text-decoration: underline; }
.mp-breadcrumb a:hover { color: #eef2ff; }
.mp-block { background: #ffffff; border-radius: 12px; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1); padding: 1.25rem; margin-bottom: 1.5rem; }
.mp-title { font-size: 1.15rem; margin: 0 0 0.85rem; color: #1f2937; }
.mp-subtitle { font-size: 0.95rem; margin: 0 0 0.6rem; color: #1f2937; }
.mp-note { color: #505359; font-size: 0.85rem; margin: 0.6rem 0 0; }
.mp-note a { color: #134dce; }
.mp-table thead th { background: #1f2937; color: #ffffff; }
.mp-compare { display: grid; grid-template-columns: 1fr 1fr; gap: 1.25rem; }
@media (max-width: 768px) { .mp-compare { grid-template-columns: 1fr; } }
.mp-res { display: inline-block; width: 22px; height: 22px; line-height: 22px; text-align: center; border-radius: 4px; font-weight: 700; font-size: 0.78rem; color: #ffffff; }
.mp-res-w { background: #096546; }
.mp-res-d { background: #6b7280; }
.mp-res-l { background: #b30f0f; }
.mp-inj-list { margin: 0; padding-left: 1.1rem; font-size: 0.88rem; line-height: 1.55; color: #1f2937; }
/* Match preview block (2026-09-16) */
.mp-preview-text { font-size: 0.92rem; line-height: 1.65; color: #1f2937; }
.mp-preview-text p { margin: 0 0 0.6rem; }
/* Model vs Market edges (2026-09-16) */
.mp-edge { font-weight: 700; }
.mp-edge-pos { color: #096546; }
.mp-edge-neg { color: #b30f0f; }
/* Expected goals strip (2026-09-16) */
.mp-xg-strip { background: #eef2f7; border-radius: 8px; padding: 0.6rem 0.85rem; font-size: 0.9rem; color: #1f2937; margin: 0.75rem 0 0; }
/* Team Trends chips (2026-09-16). Text colors ≥7:1 on their backgrounds (AAA) */
.mp-chips { display: flex; flex-wrap: wrap; gap: 0.4rem; }
.mp-chip { display: inline-block; padding: 0.28rem 0.6rem; border-radius: 999px; font-size: 0.8rem; font-weight: 600; }
.mp-chip-good { background: #e8f5ee; color: #096546; }
.mp-chip-bad { background: #fdecea; color: #b30f0f; }
.mp-chip-neutral { background: #eef2f7; color: #374151; }
/* H2H summary line (2026-09-16) */
.mp-h2h-summary { font-size: 0.92rem; color: #1f2937; margin: 0 0 0.7rem; }
/* Goal Timing bars (2026-09-16). White text on #2144e1 ≈8.5:1, on #b30f0f ≈9:1 (AAA) */
.mp-timing { display: flex; flex-direction: column; gap: 0.3rem; }
/* Diverging bars: conceded grows left from the center axis, scored grows right (2026-09-16) */
.mp-tm-row { display: grid; grid-template-columns: 1fr 3.2rem 1fr; align-items: center; gap: 0.35rem; }
.mp-tm-iv { font-size: 0.75rem; color: #505359; text-align: center; }
.mp-tm-half { display: flex; min-height: 16px; }
.mp-tm-left { justify-content: flex-end; }
.mp-tm-right { justify-content: flex-start; }
.mp-tm-bar { min-height: 16px; border-radius: 3px; font-size: 0.68rem; font-weight: 700; color: #ffffff; line-height: 16px; padding: 0 4px; box-sizing: border-box; min-width: 16px; text-align: center; }
.mp-tm-for { background: #2144e1; }
.mp-tm-against { background: #b30f0f; }
.mp-tm-legend { font-size: 0.75rem; color: #505359; margin-top: 0.45rem; display: flex; align-items: center; gap: 0.35rem; }
.mp-tm-key { display: inline-block; width: 12px; height: 12px; border-radius: 3px; margin-left: 0.35rem; }
/* Injury reason (2026-09-16) */
.mp-inj-reason { color: #505359; font-size: 0.85em; }
/* Interactive form letters with tooltips (2026-09-17). White on #1f2937 ≈14:1 (AAA) */
.mp-form { display: inline-flex; gap: 3px; }
.mp-form-l { position: relative; display: inline-block; width: 22px; height: 22px; line-height: 22px; text-align: center; border-radius: 4px; font-weight: 700; font-size: 0.78rem; color: #ffffff; text-decoration: none; }
a.mp-form-l:hover { outline: 2px solid #1f2937; }
/* Tooltip opens BELOW the letter (competitor-style); wrapper needs overflow:visible */
.mp-form-tip { display: none; position: absolute; top: 135%; left: 50%; transform: translateX(-50%); background: #1f2937; color: #ffffff; font-weight: 400; font-size: 0.75rem; line-height: 1.3; padding: 0.3rem 0.55rem; border-radius: 6px; white-space: nowrap; z-index: 30; pointer-events: none; }
/* Key Factors table: 3 columns always fit — disable x-scroll clipping so tips are visible */
.mp-noclip { overflow: visible; }
.mp-form-l:hover .mp-form-tip, .mp-form-l:focus-visible .mp-form-tip { display: block; }
/* Final score scoreboard, result mode (2026-09-17). White on hero gradient — AAA as all hero text */
.mp-final { display: flex; align-items: center; justify-content: center; gap: 1.6rem; margin: 0.9rem 0 0.35rem; }
.mp-final-team { display: flex; align-items: center; gap: 0.6rem; color: #ffffff; font-weight: 600; font-size: 1.08rem; }
.mp-final-team img { width: 44px; height: 44px; }
.mp-final-mid { display: flex; flex-direction: column; align-items: center; }
.mp-final-score { display: flex; align-items: baseline; gap: 0.45rem; color: #ffffff; }
.mp-final-score span { font-size: 2.4rem; font-weight: 800; line-height: 1; }
.mp-final-score i { font-style: normal; font-size: 1.6rem; opacity: 0.75; }
.mp-final-badge { margin-top: 0.3rem; font-size: 0.78rem; color: #eef2ff; background: rgba(0, 0, 0, 0.28); padding: 0.16rem 0.6rem; border-radius: 999px; }
.mp-final-note { text-align: center; font-size: 0.82rem; color: #eef2ff; margin: 0.25rem 0 0; }
/* Narrow screens: use the full width — slimmer block padding (2026-09-17) */
@media (max-width: 480px) {
.mp-block { padding: 0.7rem; }
}
@media (max-width: 640px) {
/* Mobile scoreboard: logo above name, compact columns — long names wrap under logo */
.mp-final { gap: 0.7rem; }
.mp-final-team { flex-direction: column; gap: 0.3rem; font-size: 0.78rem; max-width: 96px; text-align: center; line-height: 1.2; }
.mp-final-team img { width: 34px; height: 34px; }
.mp-final-score span { font-size: 1.7rem; }
.mp-final-score i { font-size: 1.2rem; }
.mp-final-badge { font-size: 0.68rem; }
/* Mobile tables: compact + horizontal scroll fallback (site-wide .table-responsive is
   overflow:visible at <=1024px for the league card transform — match pages re-enable scroll) */
.mp-block .table-responsive { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.mp-table { font-size: 0.78rem; }
.mp-table thead th { padding: 0.4rem 0.25rem; font-size: 0.68rem; white-space: normal; }
.mp-table tbody td { padding: 0.45rem 0.25rem; }
.mp-table .confidence-badge { padding: 0.1rem 0.3rem; font-size: 0.72rem; }
}