/* Pages built on match-list.js. They take its surfaces from the page around them, and their win and loss colors are their own. */
.ml { --ml-win: #2a78d6; --ml-loss: #e34948; display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--gap, 8px); padding: var(--gap, 8px); font-variant-numeric: tabular-nums; }
@media (prefers-color-scheme: dark) { .ml { --ml-win: #3987e5; --ml-loss: #e66767; } }
.ml button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
.ml-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 14px; }
.ml-picks { display: flex; align-items: center; gap: 2px; min-width: 0; max-width: 100%; overflow-x: auto; scrollbar-width: none; }
.ml-as { margin-right: 6px; font-size: 15px; color: var(--text-2); white-space: nowrap; }
.ml button.ml-pick { display: inline-flex; flex: none; align-items: center; gap: 4px; min-height: 44px; padding: 2px 8px; border-radius: 6px; font-size: 15px; white-space: nowrap; }
.ml-pick small { font-size: 14px; color: var(--text-3); }
.ml button.ml-pick[aria-pressed="true"] { background: var(--text); color: var(--tile); }
.ml-pick[aria-pressed="true"] small { color: inherit; opacity: .8; }
.ml-seg { display: flex; flex: none; gap: 2px; padding: 2px; border-radius: 7px; background: var(--well); }
.ml .ml-seg button { flex: none; min-height: 40px; min-width: 44px; padding: 0 12px; border-radius: 5px; font-size: 15px; white-space: nowrap; }
.ml .ml-seg button[aria-pressed="true"] { background: var(--text); color: var(--tile); font-weight: 600; }
.ml-tabs { justify-self: start; max-width: 100%; overflow-x: auto; scrollbar-width: none; }
.ml-tot { margin-left: auto; font-size: 15px; color: var(--text-2); white-space: nowrap; }
.ml-tot b { font-size: 18px; font-weight: 700; color: var(--text); }
.ml-tot span { margin-left: 12px; }
.ml-ic { display: block; flex: none; width: 26px; height: 26px; object-fit: contain; }
.ml-ic.ml-s { width: 22px; height: 22px; }
.ml-st { display: block; flex: none; width: 26px; height: 26px; object-fit: cover; border-radius: 4px; }
.ml-calls { display: flex; flex-wrap: wrap; gap: 0 26px; padding: 0 4px; font-size: 16px; }
.ml button.ml-call { display: inline-flex; align-items: center; gap: 6px; min-height: 40px; text-align: left; white-space: nowrap; }
.ml-call em { margin-right: 2px; font-size: 14px; font-style: normal; color: var(--text-3); text-transform: uppercase; letter-spacing: .03em; }
.ml-call b { font-weight: 600; }
.ml-duo { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); gap: var(--gap, 8px); align-items: start; }
.ml-card { min-width: 0; padding: 4px 12px 8px; border-radius: var(--r, 6px); background: var(--tile); }
.ml .ml-r { display: grid; grid-template-columns: minmax(96px, 1.3fr) 52px 66px minmax(50px, 1.5fr) 46px; align-items: center; gap: 10px; width: 100%; min-height: 42px; padding-right: 6px; font-size: 16px; text-align: left; border-top: 1px solid var(--line); }
.ml-duo > :last-child .ml-r { grid-template-columns: minmax(196px, 1.6fr) 52px 66px minmax(50px, 1fr) 46px; }
.ml-duo > :last-child .ml-kid { grid-template-columns: minmax(150px, 1.6fr) 52px 66px minmax(50px, 1fr) 46px; }
.ml .ml-head { min-height: 34px; font-size: 14px; color: var(--text-3); border-top: 0; }
.ml-nm { display: flex; align-items: center; gap: 8px; min-width: 0; font-weight: 600; }
.ml-nm span { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.ml-short { display: none; }
.ml-num { text-align: right; white-space: nowrap; }
.ml-n { color: var(--text-3); }
.ml-p { font-weight: 700; }
.ml-soft .ml-p { font-weight: 500; color: var(--text-2); }
.ml-thin .ml-nm, .ml-thin .ml-p, .ml-thin .ml-wl { font-weight: 400; color: var(--text-3); }
.ml .ml-r:not(.ml-head):hover, .ml .ml-r[aria-expanded="true"] { background: var(--tile-2); }
.ml .ml-kid { padding-left: 22px; background: var(--tile-2); }
.ml-kid .ml-nm { font-weight: 500; }
.ml .ml-on { outline: 2px solid var(--text); outline-offset: -2px; border-radius: 3px; }
.ml .ml-sort { min-height: 28px; font-size: 14px; color: inherit; text-align: right; white-space: nowrap; }
.ml .ml-sort[aria-pressed="true"] { font-weight: 600; color: var(--text); }
.ml-mid { text-align: center; }
.ml-track { position: relative; display: block; height: 8px; border-radius: 4px; background: var(--well); }
.ml-track i { position: absolute; top: 0; bottom: 0; border-radius: 4px; }
.ml-track u { position: absolute; top: -3px; bottom: -3px; left: 50%; width: 1px; background: var(--text-3); }
.ml .ml-more { display: block; width: 100%; min-height: 44px; font-size: 15px; color: var(--text-2); text-align: center; border-top: 1px solid var(--line); }
.ml-d { padding: 8px 12px 14px 22px; background: var(--tile-2); border-top: 1px solid var(--line); }
.ml-d h4 { margin: 0 0 8px; font-size: 15px; font-weight: 600; color: var(--text-2); }
.ml-vals { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; }
.ml-vals b { display: block; font-size: 20px; font-weight: 700; }
.ml-vals span { display: block; font-size: 14px; line-height: 1.3; color: var(--text-3); }
.ml-dot { display: inline-block; width: 8px; height: 8px; margin-right: 5px; border-radius: 50%; }
.ml-dot.ml-up { background: var(--ml-win); }
.ml-dot.ml-dn { background: var(--ml-loss); }
.ml-note { margin: 8px 0 0; font-size: 14px; color: var(--text-3); }
.ml-d h4 + .ml-note { margin-top: 0; }
.ml-foot { margin: 0; padding: 0 4px; }
.ml .ml-go { font-weight: 600; color: var(--text); background: var(--tile-2); }
.ml-hero { padding: 1px; border-radius: 50%; background: var(--line-strong); }
.ml-lanes { display: flex; gap: 3px; min-width: 0; }
.dl-games .ml-g { grid-template-columns: 12px 22px minmax(0, 1.4fr) 52px repeat(4, minmax(56px, .6fr)); }
.ml-empty { padding: 28px 0; color: var(--text-3); text-align: center; }
.ml-g { display: grid; grid-template-columns: 12px 22px 22px minmax(0, 2fr) repeat(5, minmax(56px, .5fr)); align-items: center; gap: 8px; min-height: 42px; font-size: 16px; border-top: 1px solid var(--line); }
.ml-g.ml-ghead { min-height: 34px; font-size: 14px; color: var(--text-3); border-top: 0; }
.ml-who { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.ml-gs { color: var(--text-2); }
.ml-pip { display: block; width: 10px; height: 10px; border-radius: 2px; background: var(--ml-win); }
.ml-pip.ml-lost { background: none; border: 2px solid var(--ml-loss); }
@media (max-width: 1180px) { .ml-duo { display: grid; grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 760px) {
  .ml-card { padding: 2px 8px 6px; }
  .ml-tot { margin-left: 0; }
  .ml-rating { display: none; }
  .ml-calls { gap: 0 12px; }
  .ml .ml-seg button { padding: 0 8px; }
  .ml .ml-r, .ml-duo > :last-child .ml-r, .ml-duo > :last-child .ml-kid { grid-template-columns: minmax(92px, 1.25fr) 50px 58px minmax(36px, 1fr) 42px; gap: 6px; min-height: 46px; }
  .ml .ml-head { min-height: 34px; }
  .ml .ml-kid { padding-left: 8px; }
  .ml-d { padding-left: 8px; padding-right: 8px; }
  .ml-full { display: none; }
  .ml-short { display: inline; }
  .ml-vals { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ml-g { grid-template-columns: 12px 22px 22px minmax(0, 1fr) 36px 44px 52px; gap: 6px; min-height: 46px; font-size: 15px; }
  .dl-games .ml-g { grid-template-columns: 12px 22px minmax(0, 1fr) 52px 74px 54px; }
  .ml-gx { display: none; }
}
/* Deadlock's records run to three digits a side and its names run longer. On a narrow phone the
   record goes, since games and win rate say the same thing. */
@media (max-width: 760px) {
  .ml-dl .ml-r, .ml-dl .ml-duo > :last-child .ml-r, .ml-dl .ml-duo > :last-child .ml-kid { grid-template-columns: minmax(130px, 1.25fr) 50px 72px minmax(36px, 1fr) 42px; }
}
@media (max-width: 480px) {
  .ml-dl .ml-wl { display: none; }
  .ml-dl .ml-r, .ml-dl .ml-duo > :last-child .ml-r, .ml-dl .ml-duo > :last-child .ml-kid { grid-template-columns: minmax(168px, 1.6fr) 50px minmax(30px, 1fr) 42px; }
  .ml-dl .ml-wide .ml-r { grid-template-columns: minmax(150px, 2fr) 50px minmax(30px, 1fr) 42px; }
}
/* The games bar's labels are longer than homelab's, so it gives a small phone's room to them. */
@media (max-width: 400px) { .games-nav .tab { padding-left: 8px; padding-right: 8px; } }