/* #1313: the Matches pages' look (matches_looks.py: .mk-list / -match / -player the page) - Daniel's pick of the two directions:
   the header a band edge to edge in the front page's look ("Scoreline"), under it a working page - the page's width, cards, a
   rail beside the main column ("Dossier"). The band, the type, the columns and the rail: looks.css (#1355, linked before this);
   here the Matches pages' own parts. Plain CSS, nothing loaded from elsewhere. */

/* ==== the score, the rounds */
.mk .eye .won { color: var(--success); } .mk .eye .lost { color: var(--danger); }
.mk .res { display: inline-flex; align-items: baseline; gap: 10px; white-space: nowrap; }
.mk .res .verdict { color: var(--tone); font: 700 11px/16px var(--mono); letter-spacing: .12em; text-transform: uppercase; }
.mk .res .sc { color: var(--text-3); font-weight: 600; font-variant-numeric: tabular-nums; letter-spacing: -.02em; }
.mk .res .sc b { color: var(--text); font-weight: 700; }
.mk .res .sc i { margin: 0 .14em; font-style: normal; font-weight: 300; opacity: .55; }
/* the rounds: yours won filled, lost an outline (read without the colours too) - a match you weren't in: T and CT as the game's */
.mk .rounds { gap: 4px; margin: 0; }
.mk .rounds span { box-shadow: none; }
.mk .rounds .l { background: none; color: var(--danger); box-shadow: inset 0 0 0 1.5px var(--danger);   /* (a browser without color-mix: the plain one) */
  box-shadow: inset 0 0 0 1.5px color-mix(in srgb, var(--danger) 70%, transparent); }
@media (prefers-reduced-motion: reduce) { .mk .feat:hover { transform: none; } }

/* ==== the header (looks.css's band) - the result's colour its glow */
/* the list's: the page's name, your newest match beside it - a card, the way into it */
.mk-list .top { padding: clamp(24px, 3vw, 36px) 0 clamp(22px, 2.8vw, 32px); }
.mk-list .top .wrap { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 440px); gap: clamp(24px, 5vw, 72px); align-items: center; }
.mk-list .top.bare .wrap { grid-template-columns: minmax(0, 1fr); }
.mk .feat { display: block; padding: var(--s5) var(--s6); border: 1px solid rgba(255, 255, 255, .09); border-radius: 18px; color: inherit; text-decoration: none;
  background: var(--card); background: linear-gradient(160deg, color-mix(in srgb, var(--tone) 10%, var(--card)), var(--card) 60%); box-shadow: var(--shadow-400);
  transition: border-color var(--normal) var(--ease), transform var(--normal) var(--ease); }
.mk .feat:hover { border-color: color-mix(in srgb, var(--tone) 55%, transparent); transform: translateY(-2px); }
.mk .feat .eye { margin-bottom: var(--s2); }
.mk .feat .fmap { display: block; color: #fff; font-size: 28px; line-height: 1.1; font-weight: 700; letter-spacing: -.025em; }
.mk .feat .res { margin: 4px 0 var(--s3); }
.mk .feat .res .sc { font-size: 60px; line-height: 1; letter-spacing: -.05em; }
.mk .feat .rounds { flex-wrap: nowrap; gap: 3px; }
.mk .feat .rounds span { flex: 1 1 0; max-width: 15px; height: 15px; border-radius: 4px; font-size: 0; }
.mk .feat .rounds i { flex: 0 0 6px; }
.mk .feat .nums { display: flex; justify-content: space-between; gap: var(--s3); margin: var(--s4) 0; padding-top: var(--s4); border-top: 1px solid var(--border); }
.mk .feat .num b { font-size: 20px; }
.mk .feat .more { display: inline-flex; align-items: center; gap: 8px; color: var(--accent); font-weight: 600; }
.mk .feat .more::after { content: "\2192"; transition: transform var(--normal) var(--ease); }
.mk .feat:hover .more::after { transform: translateX(4px); }
/* a match's: its map, its score the largest thing on the page, its rounds - the map's floor plan behind them where there is one */
.mk-match h1 { font-size: clamp(30px, 4vw, 52px); }
.mk .top .plan { position: absolute; z-index: -1; top: -6%; right: max(0px, calc(50vw - 640px)); width: auto; height: 112%; opacity: .5;
  -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 55%); mask-image: linear-gradient(90deg, transparent 0%, #000 55%); }
.mk .score { margin: clamp(8px, 1.2vw, 16px) 0 clamp(18px, 2.4vw, 28px); }
.mk .score .res { gap: clamp(12px, 2vw, 24px); }
.mk .score .res .verdict { padding: 5px 12px; border-radius: var(--r-full); background: color-mix(in srgb, var(--tone) 16%, transparent); font-size: 13px;
  line-height: 18px; align-self: center; }
.mk .score .res .sc { font-size: clamp(72px, 12vw, 160px); line-height: .86; font-weight: 700; letter-spacing: -.055em; }
.mk .score .res .sc b { color: #fff; }
.mk .top .wrap > .rounds span { width: 28px; height: 28px; border-radius: 7px; font-size: 12px; line-height: 28px; }
.mk .top .wrap > .rounds i { width: 14px; }
/* a player's: their picture, name and rank, their kills, deaths and assists large */
.mk-player h1 { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s2) var(--s5); font-size: clamp(32px, 4.6vw, 60px); }
.mk-player h1 a { display: inline-flex; align-items: center; color: inherit; text-decoration: none; }
.mk-player h1 .prem.big { margin-left: 0; }
.mk-player h1 .av.big { width: clamp(44px, 4.6vw, 60px); height: clamp(44px, 4.6vw, 60px); margin-right: var(--s4); border-radius: 12px; flex: none; }
.mk-player .top .nums { margin-top: var(--s5); gap: var(--s4) var(--s10); }
.mk-player .top .num b { color: #fff; font-size: clamp(32px, 4.4vw, 52px); line-height: 1; }

/* ==== under it (looks.css's columns): a match's rail first in the page */
.mk-match .cols { grid-template-columns: minmax(0, 1fr) 360px; }
.mk-match .cols > .rail { grid-column: 2; grid-row: 1; }         /* (a match's rail: first in the page - what to work on read first, and first on a phone -, beside the scoreboard here) */
.mk-match .cols > .main { grid-column: 1; grid-row: 1; }
.mk-match .rail .box.plan { box-shadow: var(--shadow-200), inset 0 0 0 1px var(--accent-line); }
/* your positioning and your shots in a match, in words */
.mk .hab { margin-bottom: var(--s4); padding: var(--s4) var(--s5); border-radius: var(--r-xl); background: var(--card); box-shadow: var(--shadow-200); }
.mk .hab h3 { margin: 0 0 var(--s2); color: var(--text-2); font: 600 12px/16px var(--mono); letter-spacing: .14em; text-transform: uppercase; }
.mk .hab p { margin: 0 0 var(--s3); color: var(--text-body); font-size: 14px; line-height: 21px; }
.mk .hab p.over { color: var(--text-2); font-size: 13px; }
.mk .hab .go { font-weight: 600; }
/* the page's parts: a block each - a table wider than its place scrolls inside it, never the page */
.mk .mview, .mk .blk { max-width: 100%; overflow-x: auto; }
.mk .mview { margin-top: 0; }
.mk .mview .mt th, .mk .mview .mt td { padding-left: 7px; padding-right: 7px; }
.mk .mview .mt td:first-child, .mk .mview .mt td:first-child a { white-space: nowrap; }
.mk .blk { margin-top: var(--s8); }
.mk table.guns { max-width: 480px; }
/* (a part with nothing in this match - analysed before it was measured: its name and its line, small, after the rest) */
.mk .thins { margin-top: var(--s8); padding-top: var(--s4); border-top: 1px solid var(--border); }
.mk .thin { display: grid; grid-template-columns: 200px minmax(0, 1fr); gap: 2px var(--s5); padding: 6px 0; }
.mk .body .thin > h2 { margin: 0; color: var(--text-2); font-size: 14px; line-height: 22px; font-weight: 600; letter-spacing: 0; }
.mk .thin > :not(h2) { grid-column: 2; margin: 0; font-size: 14px; }

/* ==== the list: your matches a dense row each, in a card - a heading a month, the result a pill, the row whole its link */
.mk .lhead { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--s2) var(--s4); margin-bottom: var(--s3); }
.mk .lhead h2, .mk .lhead .mtabs { margin: 0; }
.mk .mlistbox { margin: var(--s3) 0; border-radius: var(--r-xl); background: var(--card); box-shadow: var(--shadow-200); overflow: hidden; }
.mk .mlist { margin: 0; background: none; box-shadow: none; border-radius: 0; }
.mk .mlist th { padding: 10px var(--s3); font: 600 11px/16px var(--mono); letter-spacing: .1em; text-transform: uppercase; text-align: left; }
.mk .mlist th.n, .mk .mlist td.n { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.mk .mlist th a.gl { text-decoration: none; }
.mk .mlist td { padding: 8px var(--s3); transition: background-color var(--normal) var(--ease); }
.mk .mlist tr.mon th { padding: 7px var(--s3); border-bottom: 1px solid var(--border); background: var(--bg-deep); color: var(--text-2); letter-spacing: .12em; }
.mk .mlist tbody tr:not(.mon):not(.wait):hover td { background: var(--overlay); }
.mk .mlist tbody tr:focus-within td { background: var(--overlay-2); }
.mk .mlist td.m { position: relative; width: 44%; box-shadow: inset 3px 0 0 var(--tone); overflow-wrap: anywhere; }   /* (it wraps: the table never wider than its card) */
.mk .mlist tr.wait td.m { box-shadow: inset 3px 0 0 var(--border-strong); }
.mk .mlist .map { display: inline-block; min-width: 88px; margin-right: var(--s3); color: var(--text); font-weight: 650; text-decoration: none; }
/* (the row whole the way into its match: the link's own box drawn across it from its first cell, cut at the card's edge) */
.mk .mlist a.map::after { content: ""; position: absolute; top: 0; bottom: 0; left: 0; width: 200vw; }
.mk .mlist .when { display: inline-block; color: var(--text-2); font-size: 13px; line-height: 18px; }   /* (no room beside the map: under it, whole) */
.mk .mlist .when .sub { margin: 0; font-size: 12px; }
.mk .mlist .when [title] { position: relative; z-index: 1; }     /* (what it says on hover - FACEIT, uploaded, where its date's from: over the row's link) */
.mk .mlist td.st { color: var(--text-2); font-size: 14px; }
.mk .mlist td.st.sub { margin: 0; }
.mk .mlist .res { gap: 8px; padding: 1px 10px 1px 8px; border-radius: var(--r-full); background: color-mix(in srgb, var(--tone) 13%, transparent); font-size: 13px; }
.mk .mlist .res .verdict { font-size: 10px; }
.mk .mlist td.n { color: var(--text-body); }
/* connecting and uploads: under the list once you have matches - over it till then */
.mk .add { margin-top: var(--s10); border-top: 1px solid var(--border); }
.mk .add:first-child { margin: 0 0 var(--s8); border-top: 0; }
.mk .add:first-child > h2 { margin-top: 0; }
.mk .addgrid { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: var(--s5); align-items: start; }
.mk .addgrid .box { margin: 0 0 var(--s4); }
.mk .addgrid .codes img { max-width: 100%; }

/* ==== a player's numbers: a sheet - a group a card, a number a row; the parts' names down the side, kept in sight */
.mk .sheet { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: var(--s4); align-items: start; }
.mk .sheet .grp { padding: var(--s4); border-radius: var(--r-xl); background: var(--card); box-shadow: var(--shadow-200); }
.mk .body .sheet h2 { margin: 0 0 var(--s3); padding-bottom: var(--s2); border-bottom: 1px solid var(--border); color: var(--text-2);
  font: 600 12px/16px var(--mono); letter-spacing: .14em; text-transform: uppercase; }
.mk .tiles .num { display: flex; flex-direction: row-reverse; justify-content: space-between; align-items: baseline; gap: var(--s3); padding: 5px 0; }
.mk .tiles .num b { font-size: 16px; line-height: 22px; }
.mk .tiles .num span { font: 400 14px/22px var(--font); letter-spacing: 0; text-transform: none; color: var(--text-2); }
.mk .cols.left .rail { position: sticky; top: 104px; }
.mk .jump { display: flex; flex-direction: column; gap: 2px; margin: 0; padding: var(--s2); border-radius: var(--r-xl); background: var(--card); box-shadow: var(--shadow-200); }
.mk .jump a { padding: 6px 10px; border-radius: var(--r-md); color: var(--text-2); font-size: 13px; line-height: 18px; font-weight: 600; text-decoration: none; }
.mk .jump a:hover { color: var(--text); background: var(--overlay); }

/* ==== narrower: a tablet, then a phone */
@media (max-width: 1000px) {
  .mk-list .top .wrap, .mk-match .cols, .mk .addgrid { grid-template-columns: minmax(0, 1fr); }
  .mk-match .cols > .rail, .mk-match .cols > .main { grid-column: 1; grid-row: auto; }   /* (what to work on: before the scoreboard) */
  .mk .cols.left .rail { position: static; }
  .mk .jump { flex-direction: row; flex-wrap: wrap; gap: 6px; background: none; box-shadow: none; padding: 0; }
  .mk .jump a { border: 1px solid var(--border-strong); border-radius: var(--r-full); padding: 5px 12px; }
  .mk .top .plan { opacity: .28; }
}
@media (max-width: 700px) {
  .mk .thin { grid-template-columns: minmax(0, 1fr); }
  .mk .thin > :not(h2) { grid-column: 1; }
  .mk .top .plan { top: auto; bottom: -8%; right: -18%; height: 74%; opacity: .2; }   /* (#1355: a phone's - smaller, fainter, behind
     the score, the words clear of it) */
  /* (the rounds: a half a row, as wide as the screen takes) */
  .mk .top .wrap > .rounds { gap: 3px; }
  .mk .top .wrap > .rounds span { flex: 1 1 0; width: auto; max-width: 30px; height: 26px; line-height: 26px; border-radius: 5px; }
  .mk .top .wrap > .rounds i { flex: 0 0 100%; width: auto; height: 1px; }
  .mk .feat { padding: var(--s4); }
  .mk .feat .res .sc { font-size: 52px; }
  .mk .feat .nums { gap: var(--s2); }
  .mk-player .top .nums { gap: var(--s4) var(--s8); }
  /* the list: a match a card of two lines - its map, when and result; then your line, each number under its name */
  .mk .mlist, .mk .mlist tbody { display: block; }
  .mk .mlist thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
  .mk .mlist tbody tr { position: relative; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 0; padding: var(--s3) 0 var(--s3) var(--s3);
    border-top: 1px solid var(--border); box-shadow: inset 3px 0 0 var(--tone); }
  .mk .mlist tbody tr.wait { box-shadow: inset 3px 0 0 var(--border-strong); }
  .mk .mlist tbody tr.mon { display: block; padding: 0; box-shadow: none; }
  .mk .mlist tbody tr.mon th { display: block; }
  .mk .mlist td { padding: 0; border: 0; }
  .mk .mlist td.m, .mk .mlist tr.wait td.m { position: static; width: auto; grid-column: 1 / 4; box-shadow: none; }
  .mk .mlist a.map::after { width: auto; right: 0; }             /* (the row's own box here: the card whole) */
  .mk .mlist .map { display: block; margin: 0; }
  .mk .mlist .when { display: block; }
  .mk .mlist td.r { grid-column: 4 / 6; text-align: right; padding-right: var(--s3); }
  .mk .mlist td.st { grid-column: 1 / -1; padding-top: 6px; }
  .mk .mlist tbody tr.wait td.m { grid-column: 1 / -1; }
  .mk .mlist td.n { padding-top: var(--s2); text-align: left; font-size: 15px; }
  .mk .mlist td.n::before { content: attr(data-l); display: block; color: var(--text-3); font: 500 10px/14px var(--mono); letter-spacing: .1em; }
}