/* MSV Participation Explorer (no-build dashboard) */

#msv-participation-root { font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif; }

.msv-shell { max-width: 1200px; margin: 0 auto; padding: 8px 0; }
.msv-header { display:flex; justify-content:space-between; align-items:flex-end; gap:16px; margin: 6px 0 14px; }
.msv-kicker { font-size:12px; letter-spacing:.08em; text-transform:uppercase; opacity:.7; }
.msv-title { margin:4px 0 0; font-size:28px; }
.msv-btn { border:1px solid rgba(0,0,0,.12); background:white; padding:10px 12px; border-radius:12px; cursor:pointer; }
.msv-btn:hover { background:rgba(0,0,0,.03); }

.msv-filters { display:grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap:12px; margin-bottom:16px; }
.msv-field label { display:block; font-size:12px; opacity:.7; margin-bottom:6px; }
.msv-field select { width:100%; padding:10px 12px; border-radius:12px; border:1px solid rgba(0,0,0,.12); background:white; }

.msv-grid { display:grid; grid-template-columns: repeat(12, minmax(0,1fr)); gap:12px; }
.msv-card { border:1px solid rgba(0,0,0,.10); border-radius:18px; padding:14px; background:white; box-shadow: 0 8px 20px rgba(0,0,0,.04); }
.msv-card-title { font-size:13px; opacity:.75; margin-bottom:8px; }
.msv-big { font-size:34px; font-weight:700; }
.msv-sub { font-size:12px; opacity:.7; margin-top:6px; }

.msv-span-2 { grid-column: span 2; }
.msv-span-8 { grid-column: span 8; }
.msv-span-7 { grid-column: span 7; }
.msv-span-5 { grid-column: span 5; }

.msv-loading { padding:12px 0; opacity:.7; }
.msv-error { padding:10px 12px; border-radius:12px; background: rgba(200,0,0,.06); border:1px solid rgba(200,0,0,.20); }

.msv-bars { display:flex; flex-direction:column; gap:10px; margin-top:8px; }
.msv-bar { display:grid; grid-template-columns: 90px 1fr 70px; gap:10px; align-items:center; border:1px solid rgba(0,0,0,.08); background:white; padding:10px 12px; border-radius:14px; cursor:pointer; text-align:left; }
.msv-bar.active { outline: 2px solid rgba(0,0,0,.18); }
.msv-bar-track { height:10px; border-radius:999px; background: rgba(0,0,0,.08); overflow:hidden; }
.msv-bar-fill { height:100%; display:block; background: rgba(0,0,0,.65); border-radius:999px; }
.msv-bar-label { font-size:12px; opacity:.8; }
.msv-bar-value { font-variant-numeric: tabular-nums; text-align:right; }
.msv-hint { margin-top:10px; font-size:12px; opacity:.75; }

.msv-heatmap { display:flex; flex-direction:column; gap:8px; margin-top:6px; }
.msv-heatmap-head,
.msv-heatmap-row { display:grid; grid-template-columns: 54px repeat(var(--msv-grade-cols), 1fr); gap:6px; align-items:stretch; }
.msv-heatmap-h { font-size:12px; opacity:.7; text-align:center; padding-bottom:2px; }
.msv-heatmap-s { border:1px solid rgba(0,0,0,.12); background:white; border-radius:12px; font-size:12px; cursor:pointer; padding:8px 6px; }
.msv-heatmap-s.active { outline:2px solid rgba(0,0,0,.18); }
.msv-cell { border:1px solid rgba(0,0,0,.08); border-radius:12px; display:flex; align-items:center; justify-content:center; font-size:12px; cursor:pointer; background: rgba(0,0,0,.75); color:white; min-height:34px; user-select:none; }
.msv-cell.zero { background: rgba(0,0,0,.10); color: rgba(0,0,0,.45); cursor: default; }

.msv-table { margin-top:8px; border-top:1px solid rgba(0,0,0,.08); }
.msv-thead, .msv-row { display:grid; grid-template-columns: 1fr 70px 60px 90px; gap:8px; padding:10px 0; align-items:center; }
.msv-thead { font-size:12px; opacity:.7; }
.msv-row { border-top:1px solid rgba(0,0,0,.06); font-size:13px; }
.msv-team { display:flex; align-items:center; gap:8px; min-width: 0; }
.msv-dot { width:10px; height:10px; border-radius:999px; background: rgba(0,0,0,.55); display:inline-block; flex: 0 0 auto; }
.msv-muted { opacity:.6; font-size:12px; margin-left:6px; }
.msv-team-name { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.msv-empty { padding:12px 0; opacity:.7; font-size:13px; }

@media (max-width: 980px) {
  .msv-filters { grid-template-columns: 1fr 1fr; }
  .msv-grid { grid-template-columns: 1fr; }
  .msv-span-2, .msv-span-5, .msv-span-7, .msv-span-8 { grid-column: auto; }
}