/* Scoped visuals: no chart implies a forecast, no colour replaces a value. */
.fixture-comparison {
  --comparison-home: #39d8b2; --comparison-away: #91b9ff;
  font-size: 13px; line-height: 1.45; overflow-wrap: anywhere;
  color: var(--text); padding-bottom: 12px;
}
.fixture-comparison .comparison-icon { width: 21px; height: 21px; flex: 0 0 21px; }
.fixture-comparison .comparison-toolbar { display:flex; justify-content:space-between; align-items:center; gap:10px; }
.fixture-comparison .comparison-back { display:flex; align-items:center; gap:4px; min-height:40px; }
.fixture-comparison .comparison-season { font-size:12px; color:var(--hint); text-align:right; }
.fixture-comparison .comparison-heading { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip-path:inset(50%); white-space:nowrap; }
.fixture-comparison .comparison-kickoff { font-size:12px; color:var(--hint); margin:10px 0 14px; }
.fixture-comparison .comparison-teams { position:relative; display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:24px; background:var(--panel); border:1px solid var(--border); border-radius:18px; padding:14px 12px; }
.fixture-comparison .comparison-teams > div { display:flex; flex-direction:column; align-items:center; text-align:center; gap:5px; min-width:0; }
.fixture-comparison .comparison-team-home { color:var(--comparison-home); }
.fixture-comparison .comparison-team-away { color:var(--comparison-away); }
.fixture-comparison .comparison-team-name { font-size:14px; line-height:1.25; min-height:35px; color:var(--text); }
.fixture-comparison .comparison-team-points { font-size:11px; }
.fixture-comparison .comparison-team-points b { font-size:27px; font-variant-numeric:tabular-nums; margin-right:3px; }
.fixture-comparison .comparison-teams small { color:var(--hint); font-size:11px; }
.fixture-comparison .comparison-venue { text-transform:uppercase; letter-spacing:.05em; }
.fixture-comparison .comparison-versus { position:absolute; left:50%; top:63px; transform:translateX(-50%); font-size:10px; color:var(--hint); }
.fixture-comparison .comparison-teams .team-badge { width:42px; height:42px; flex:0 0 42px; }
.fixture-comparison .form-row { display:inline-flex; flex-wrap:nowrap; gap:3px; }
.fixture-comparison .form-dot { width:18px; height:18px; flex:0 0 18px; font-size:10px; }
.fixture-comparison .comparison-team-form { min-height:20px; margin-top:4px; }
.fixture-comparison .comparison-context { display:flex; flex-wrap:wrap; align-items:center; gap:5px; color:var(--hint); font-size:11px; margin-top:4px; }
.fixture-comparison .comparison-warning { display:flex; flex-wrap:wrap; align-items:center; gap:5px; color:var(--warning); font-size:11px; min-height:32px; }
.fixture-comparison h3 { display:flex; gap:6px; align-items:center; font-size:13px; margin:18px 0 8px; }
.fixture-comparison .comparison-averages { display:grid; gap:7px; }
.fixture-comparison .comparison-average { padding:9px 12px; background:var(--panel); border:1px solid var(--border); border-radius:12px; }
.fixture-comparison .comparison-row { padding:10px 0; border-bottom:1px solid var(--border); }
.fixture-comparison .comparison-row-title { display:flex; flex-wrap:wrap; align-items:center; gap:5px; min-height:32px; font-size:12px; }
.fixture-comparison .comparison-row-title > span { flex:1; min-width:0; }
.fixture-comparison .comparison-row-title > .comparison-icon { color:var(--hint); width:17px; height:17px; flex-basis:17px; }
.fixture-comparison .comparison-pair-values { display:flex; align-items:center; justify-content:space-between; gap:12px; font-variant-numeric:tabular-nums; }
.fixture-comparison .comparison-pair-values strong { min-width:0; font-size:18px; font-weight:700; }
.fixture-comparison .comparison-home-value { color:var(--comparison-home); }
.fixture-comparison .comparison-away-value { color:var(--comparison-away); text-align:right; }
.fixture-comparison .comparison-bars { display:block; width:100%; height:10px; margin-top:6px; }
.fixture-comparison .comparison-bars.signed { height:20px; }
.fixture-comparison .bar-track { fill:var(--border); }
.fixture-comparison .bar-home { fill:var(--comparison-home); }
.fixture-comparison .bar-away { fill:var(--comparison-away); }
.fixture-comparison .bar-zero { stroke:var(--panel-strong); stroke-width:1; }
.fixture-comparison .comparison-metric-cards { display:grid; gap:8px; }
.fixture-comparison .metric-card { border:1px solid var(--border); border-radius:12px; background:var(--panel); padding:8px 12px 10px; }
.fixture-comparison .comparison-chart { display:flex; flex-direction:column; }
.fixture-comparison .comparison-chart > .comparison-bars { order:2; }
.fixture-comparison .comparison-rings { display:block; width:100%; height:auto; aspect-ratio:240 / 64; overflow:visible; }
.fixture-comparison .ring-track { stroke:var(--border); fill:none; stroke-width:5; }
.fixture-comparison .ring-home, .fixture-comparison .ring-away { fill:none; stroke-width:5; stroke-linecap:butt; }
.fixture-comparison .ring-home { stroke:var(--comparison-home); }
.fixture-comparison .ring-away { stroke:var(--comparison-away); }
.fixture-comparison .rate-card .comparison-chart { position:relative; }
.fixture-comparison .rate-card .comparison-pair-values { position:absolute; inset:0; display:grid; grid-template-columns:35% 30% 35%; gap:0; align-items:center; pointer-events:none; }
.fixture-comparison .rate-card .comparison-pair-values strong { font-size:14px; text-align:center; }
.fixture-comparison .rate-card .comparison-pair-values strong:last-child { grid-column:3; }
.fixture-comparison .comparison-samples { display:flex; justify-content:space-between; gap:12px; color:var(--hint); font-size:10px; margin-top:5px; }
.fixture-comparison .rate-card .comparison-samples { padding-inline:8%; }
.fixture-comparison .comparison-info { flex-shrink:0; font-size:12px; color:var(--hint); }
.fixture-comparison .comparison-info > summary { display:flex; align-items:center; justify-content:center; cursor:pointer; width:32px; height:32px; list-style:none; border:1px solid transparent; border-radius:50%; }
.fixture-comparison .comparison-info > summary::-webkit-details-marker { display:none; }
.fixture-comparison .comparison-info > summary .comparison-icon { width:16px; height:16px; flex-basis:16px; border:1px solid var(--hint); border-radius:50%; }
.fixture-comparison .comparison-info[open] { flex:1 0 100%; }
.fixture-comparison .comparison-info[open] > summary { margin-left:auto; background:var(--panel-strong); }
.fixture-comparison .comparison-explanation { padding:8px 10px; border-radius:8px; background:var(--panel-strong); color:var(--text); }
.fixture-comparison .comparison-explanation p { margin:4px 0; font-size:12px; }
.fixture-comparison .comparison-group { border-bottom:1px solid var(--border); }
.fixture-comparison .comparison-group > summary { display:flex; align-items:center; gap:8px; cursor:pointer; font-weight:600; min-height:44px; padding:8px 2px; list-style:none; }
.fixture-comparison .comparison-group > summary::-webkit-details-marker { display:none; }
.fixture-comparison .comparison-chevron { margin-left:auto; color:var(--hint); font-size:18px; }
.fixture-comparison .comparison-group[open] > summary .comparison-chevron { transform:rotate(180deg); }
.fixture-comparison .comparison-count { display:inline-block; border:1px solid var(--border); border-radius:10px; padding:1px 7px; color:var(--hint); font-size:11px; }
.fixture-comparison .comparison-all, .fixture-comparison .comparison-missing { margin-top:12px; border:1px solid var(--border); border-radius:12px; padding:2px 12px; }
.fixture-comparison .comparison-all-groups { padding:0 4px 6px; }
.fixture-comparison .comparison-missing .metric-card { background:none; border:0; border-top:1px solid var(--border); border-radius:0; }
.fixture-comparison summary:focus-visible, .fixture-comparison button:focus-visible { outline:2px solid var(--accent); outline-offset:2px; }
#fixtures-view [data-comparison-id] { cursor:pointer; }
#fixtures-view [data-comparison-id]:focus-visible { outline:2px solid var(--accent); }
@media (min-width:600px) {
  .fixture-comparison .comparison-averages { grid-template-columns:repeat(3,minmax(0,1fr)); }
  .fixture-comparison .comparison-metric-cards { grid-template-columns:repeat(2,minmax(0,1fr)); }
}
@media (prefers-reduced-motion:reduce) {
  .fixture-comparison *, .fixture-comparison *::before, .fixture-comparison *::after { animation:none !important; transition:none !important; }
}