/* Map Statistics (under Preparation): Head 2 Head for one team. The tables, brawler chips, match rows and charts are Head 2 Head's
   (styles/headtohead.css, loaded first); this file is the page around them. */

.ms-page {
    max-width: none; /* the panels scale to the window (fitGrid), so no fixed page width */
    margin: 0 auto;
    padding: 56px var(--pad) 96px;
}

/* team + map pickers, with the logo / map picture, the set count and the filters button */
.ms-bar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 14px 18px;
    margin-bottom: 20px;
    padding: 16px 18px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
}

/* (the "Team" / "Map" labels are still there for screen readers; the lists say what they are: "Pick a team", "All maps") */
.ms-bar .fld { display: flex; min-width: 200px; }
.ms-bar .fld span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
/* one look for both lists: the same font, weight and size */
.ms-bar select {
    width: 100%;
    background: var(--surface-2);
    border: 1px solid var(--border-strong);
    border-radius: var(--radius-sm);
    color-scheme: dark;
    padding: 8px 10px;
    font: 700 14px var(--font-body);
}

/* every item of the bar is 40px tall and centred on the same line: the selects, the logo, the count and the two buttons
   (the export wrapper around the buttons has a bottom margin of its own, which lifted them above the rest) */
.ms-bar .export-actions { margin: 0; flex-wrap: nowrap; }
.ms-bar select, .ms-bar .btn { height: 40px; box-sizing: border-box; }
.ms-bar .btn { display: inline-flex; align-items: center; justify-content: center; padding-top: 0; padding-bottom: 0; margin: 0; }
.ms-ids { display: flex; align-items: center; gap: 10px; height: 40px; }
.ms-logo { width: 40px; height: 40px; object-fit: contain; }
.ms-count { display: flex; align-items: center; height: 40px; margin: 0; font-size: 13px; }

/* a tighter top of the page, so the three 20-row columns have room to be seen in one screen */
.ms-page { padding-top: 14px; }
.ms-page .page-head { margin-bottom: 8px; }
.ms-page .eyebrow { margin-bottom: 2px; font-size: 11px; }
.ms-page .page-title { font-size: clamp(26px, 3.2vw, 34px); }
.ms-page .page-lead { display: none; }
.ms-bar { margin-bottom: 10px; padding: 8px 14px; }

/* the six panels, in two rows of three: what the team picks, what is picked against it, its bans. The page scales the whole thing
   (zoom, set by fitGrid in mapstatistics.js) so the first row's 20 rows fit on one screen. */
/* All six panels in one row, each only as wide as its own content, centred - no empty space inside a panel. */
.ms-grid {
    display: grid;
    grid-auto-flow: column;       /* every panel (and every divider) is its own column, left to right, in one row */
    grid-auto-columns: max-content;
    justify-content: safe center; /* centred, but when it is wider than the window (zoomed in) it starts at the left edge, so all of it can be reached */
    gap: 16px;
    align-items: stretch;         /* every panel as tall as the row */
}
.ms-row { display: contents; }

/* A green line between the categories: the map | what the team picks (first three) | what is picked against it (next two) | its bans.
   A column of the grid of its own, stretched to the row: it can only be as tall as the panels beside it, and sits exactly between them. */
.ms-divider { align-self: stretch; width: 2px; border-radius: 2px; background: var(--primary); }
.ms-divider[hidden] { display: none; }

/* the map: a big picture, its name and its mode under it */
.ms-mapcard { display: flex; flex-direction: column; align-items: center; gap: 8px; text-align: center; }
.ms-mapcard[hidden] { display: none; }
.ms-mapimg { display: block; height: 520px; width: auto; max-width: 260px; object-fit: contain; border-radius: var(--radius-sm); }
.ms-mapname { margin: 0; font-family: var(--font-display); font-size: 20px; line-height: 1.1; }
.ms-mapsets { margin: 6px 0 0; padding-top: 8px; border-top: 1px solid var(--border); width: 100%; font-size: 12px; color: var(--text-dim); }
.ms-mapsets b { display: block; font-family: var(--font-display); font-weight: 400; font-size: 34px; line-height: 1; color: var(--primary); }
.ms-mapmode { margin: 0; font-size: 11px; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-dim); }

/* rows and icons a little smaller than Head 2 Head's (48px), so 20 of them take less of the screen */
.ms-grid .h2h-table td, .ms-grid .h2h-matchrow { height: 38px; }
.ms-grid .h2h-brawler, .ms-grid .h2h-brawler--empty { width: 42px; height: 30px; }
.ms-grid .h2h-match-playerlabel { width: 42px; }
.ms-grid .h2h-col { padding: 12px 14px; }
.ms-grid .h2h-col h3 { margin-bottom: 6px; }

/* a note under a panel wraps inside the panel's width - it never makes the column wider */
.ms-note { width: 0; min-width: 100%; margin: 6px 0 0; font-size: 11.5px; text-align: center; }
/* the same for a "nothing yet" message; the Bans panel keeps its usual width (the two lists side by side) and only as tall as its content */
.ms-empty { width: 0; min-width: 100%; margin: 6px 0 0; font-size: 12.5px; line-height: 1.5; text-align: center; }
.ms-grid #bans { min-width: 300px; align-self: start; }

.ms-seg { display: flex; justify-content: center; width: fit-content; max-width: 100%; margin: 0 auto 10px; padding: 3px; border: 1px solid var(--border); border-radius: 99px; background: var(--surface-2); }
.ms-seg-btn { padding: 5px 12px; border: 0; border-radius: 99px; background: none; color: var(--text-dim); font: 700 12px var(--font-body); cursor: pointer; white-space: nowrap; }
.ms-seg-btn:hover { color: var(--text); }
.ms-seg-btn[aria-selected="true"] { background: var(--primary-soft); color: var(--primary); }

.ms-bans { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 12px; }
.ms-banbox h4 { margin: 0 0 6px; font-size: 11px; font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase; text-align: center; color: var(--text-dim); }

/* the pie and the trend line side by side, the same height */
.ms-charts { grid-template-columns: 420px minmax(0, 1fr); justify-content: stretch; align-items: stretch; margin-top: 16px; }
.ms-charts .h2h-chart-card--wide { grid-column: auto; }
.ms-charts .h2h-chart { height: 100%; box-sizing: border-box; padding: 14px 20px; }
.ms-charts .h2h-chart h3 { margin-bottom: 8px; }
.ms-charts .h2h-chart--wide svg { width: 100%; height: 190px; }

/* a narrower window: the panels wrap into rows of two (no dividers), and nothing is scaled. (Two, not three: at 761-1100px three columns left each panel
   ~215-330px, and the Most Picked table (311-355px with its player columns) and the recent matches (~384px) were cut off by their panel's edge.) */
@media (max-width: 1100px) {
    .ms-grid { grid-auto-flow: row; grid-auto-columns: auto; grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .ms-divider { display: none; }
    .ms-mapcard { grid-column: 1 / -1; }
    .ms-mapimg { height: 220px; }
    .ms-grid .h2h-col { overflow-x: auto; } /* a table wider than its column scrolls inside it instead of sticking out */
    .ms-grid #bans { min-width: 0; }
}

/* the panels' tables and match rows fit each panel's own width (the rules are in headtohead.css, @container) */
@supports (width: 1cqw) {
    @media (max-width: 1100px) {
        .ms-grid .h2h-col { container-type: inline-size; }
    }
}

@media (max-width: 760px) {
    .ms-grid { grid-template-columns: minmax(0, 1fr); }
    .ms-bans { grid-template-columns: minmax(0, 1fr); }
    .ms-charts { grid-template-columns: minmax(0, 1fr); }
    .ms-bar .fld { min-width: 0; flex: 1 1 100%; }
}