/* Matchup grades v2 (flags.matchup_v2, matchup-v2 branch): Grade · Player · L10 · Adj · Rank.
   One grid per column so the name column is sized to its longest name or sub-line (fit-content), the number columns follow at equal
   32px gaps and the spare width sits at the right end. A row is display:contents so every cell shares the column template; tapping a
   row opens one muted reason line under it (one open at a time). Phone: 28px / flexible / 44px / 48px with 8px gaps, L10 and the
   opponent move into the open line. Tokens are the site's (shared.css). */
.mgv2 .card-head{align-items:center}
.mg-q{display:inline-flex;align-items:center;gap:8px;height:28px;padding:0 12px 0 0;border:0;border-radius:999px;background:rgba(255,255,255,.04);box-shadow:inset 0 0 0 1px var(--hair);color:var(--ink-3);font:500 11.5px Geist,system-ui,sans-serif;letter-spacing:.02em;cursor:pointer;transition:background .5s var(--ease),color .5s var(--ease),transform .5s var(--ease)}
.mg-q i{display:inline-grid;place-items:center;width:28px;height:28px;border-radius:999px;background:rgba(255,255,255,.06);font-style:normal;font-weight:600;color:var(--ink-2)}
.mg-q:hover{background:rgba(255,255,255,.08);color:var(--ink-2)}.mg-q:active{transform:scale(.98)}
.mg-q[aria-expanded="true"]{color:var(--ink);background:rgba(255,255,255,.08)}
.mg-legend{margin:-8px 0 14px;font-size:12px;color:var(--ink-3);line-height:1.45}
.mg-legend[hidden]{display:none}
#mg.mg2{display:grid;grid-template-columns:minmax(0,1fr);column-gap:40px;row-gap:0;align-items:start}
.mg2-col{display:grid;grid-template-columns:28px fit-content(260px) 44px 44px 56px minmax(0,1fr);column-gap:32px;align-content:start;align-items:center;min-width:0}
.mg2-col[hidden]{display:none}
.mg2-hd{display:contents}
.mg2-hd>span{display:block;font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-3);text-align:center;padding:0 0 8px;border-bottom:1px solid var(--hair);white-space:nowrap}
.mg2-hd>span.l{text-align:left}
.mg2 .mg{display:contents}
.mg2 .mg[hidden],.mg2 .mg.cap-cut{display:none!important}
.mg2 .mg>*{display:flex;align-items:center;justify-content:center;min-height:44px;padding:8px 0;border-bottom:1px solid var(--hair);min-width:0;transition:background .5s var(--ease)}
.mg2 .mg>.t{display:flex;flex-direction:column;align-items:flex-start;justify-content:center;gap:2px}
.mg2 .mg .t b.who{display:flex;align-items:center;gap:8px;font-weight:600;font-size:14px;line-height:1.25;color:var(--ink);white-space:normal;overflow:visible;cursor:pointer}
.mg2 .mg .t b.who:hover{color:var(--green)}
.mg2 .mg .t span{display:block;font-size:12px;line-height:1.3;color:var(--ink-2);white-space:normal;overflow:visible}
.mg2 .mg .t span em{font-style:normal;color:var(--ink-3)}
.mg2 .mg .raw{color:var(--ink-3);font-size:13px}
.mg2 .mg .adj{font-weight:700;font-size:14px;color:var(--ink)}
.mg2 .mg .pill{min-width:0;padding:4px 10px;font-size:11px;letter-spacing:.04em;font-family:"Geist Mono",ui-monospace,monospace;font-variant-numeric:tabular-nums}
.pill.rk-soft{background:#173327;color:#3DDC97;box-shadow:inset 0 0 0 1px rgba(61,220,151,.28)}
.pill.rk-even{background:#1d2228;color:#a3aca6;box-shadow:inset 0 0 0 1px var(--hair)}
.pill.rk-tough{background:#3a1d1c;color:#e8776f;box-shadow:inset 0 0 0 1px rgba(232,119,111,.28)}
.mg2 .mg .sp,.mg2-hd>.sp{padding:0;border-bottom:0}
.mg2 .mg>.rs{display:none;grid-column:2/-1;justify-content:flex-start;min-height:0;padding:0 0 12px;font-size:12.5px;line-height:1.45;color:var(--ink-2);opacity:0;transform:translateY(-4px)}
.mg2 .mg>.rs .opp-in{display:none}
.mg2 .mg.open>*{border-bottom:0}
.mg2 .mg.open>.rs{display:block;border-bottom:1px solid var(--hair);opacity:1;transform:none;animation:mg2in .7s var(--ease)}
@keyframes mg2in{from{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:none}}
.mg2 .mg{cursor:pointer}
.mg2 .mg:focus-visible>*{background:rgba(255,255,255,.03)}
@media (hover:hover){.mg2 .mg:hover>*{background:linear-gradient(90deg,transparent,rgba(255,255,255,.025),transparent)}}
@media (min-width:1180px){#mg.mg2{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}}
@media (max-width:767px){
  .mg2-col{grid-template-columns:28px minmax(0,1fr) 44px 48px;column-gap:8px}
  .mg2 .mg .raw,.mg2-hd>.raw,.mg2 .mg .sp,.mg2-hd>.sp,.mg2 .mg .t span .opp{display:none}
  .mg2 .mg>.rs .opp-in{display:inline}
  .mg2 .mg .t b.who{font-size:13.5px}
  .mg2 .mg .t span{font-size:12px}
  .mg2 .mg .pill{padding:4px 6px;font-size:11px}
  .mg-legend{margin-top:-4px}
}