/* ==========================================================================
   Group comparison section (/Compare/Multi/ and /Compare/Multi/A-VS-B-VS-C.htm)

   Scoped under the .mc root on the tf- shell. Loaded with tyres-for.css,
   tyre-page-v2.css, tyre-score.css, results-grid.css (the .rg-weights panel)
   and compare-hub.css (the shared builder and its cards). The rules the kept
   widgets used to take from multi-compare.css live here now: the weighted
   leaderboard that multi-compare-weights.js re-ranks, the data table, the
   Chart.js radar and bar cards.
   ========================================================================== */

/* ---- Shared bits ------------------------------------------------------- */

.mc .mc-swatch {
    display: inline-block;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    margin-right: 8px;
    vertical-align: middle;
    flex: none;
}

.mc .mc-lb__dot {
    display: inline-block;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    margin-right: 6px;
    vertical-align: middle;
}

.mc .mc-foot {
    margin: 12px 0 0;
    font-size: 0.8rem;
    line-height: 1.5;
    color: var(--tf-muted);
    max-width: var(--tr-measure, 760px);
}

.mc .mc-sub {
    margin: 28px 0 12px;
    font-size: 1.1rem;
    font-weight: 800;
    letter-spacing: -0.01em;
}

.mc .mc-more__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin: 18px 0 0;
}

/* ---- Hero -------------------------------------------------------------- */

.mc-head__title {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 0.15em 0.4em;
}

.mc-head__vs {
    font-size: 0.5em;
    font-weight: 500;
    color: var(--tf-mist-ink, #a9b8c4);
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.mc-head__lede { max-width: var(--tr-measure, 760px); }

/* ---- The quick answer: the leaderboard in miniature -------------------- */

.mc-verdict { max-width: none; }

.mc-verdict__lead {
    margin: 0 0 12px;
    font-size: 1.02rem;
    line-height: 1.45;
    color: #fff;
}

.mc-podium {
    list-style: none;
    margin: 0;
    padding: 0;
}

.mc-podium__row {
    display: grid;
    grid-template-columns: 34px minmax(0, 1fr) auto;
    grid-template-areas: "rank tyre score" "rank meta meta";
    gap: 4px 12px;
    align-items: center;
    padding: 10px 0;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
}

.mc-podium__row:first-child { border-top: 0; }

.mc-podium__rank {
    grid-area: rank;
    width: 34px;
    height: 34px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-family: var(--tf-mono);
    font-weight: 700;
    font-size: 0.95rem;
    color: #fff;
    background: var(--mc-c, #0db1e7);
    box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.12);
}

.mc-podium__row--lead .mc-podium__rank { box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.35); }

a.mc-podium__tyre,
a.mc-podium__tyre:link,
a.mc-podium__tyre:visited {
    grid-area: tyre;
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
    color: #fff;
    text-decoration: none;
}

a.mc-podium__tyre:hover .mc-podium__name { text-decoration: underline; }

.mc-podium__img {
    width: 44px;
    height: 44px;
    object-fit: contain;
    border-radius: 6px;
    background: rgba(255, 255, 255, 0.06);
    flex: none;
}

.mc-podium__name {
    font-size: 1rem;
    line-height: 1.25;
}

.mc-podium__row--lead .mc-podium__name { font-size: 1.1rem; }

.mc-podium__score {
    grid-area: score;
    font-family: var(--tf-mono);
    font-size: 1.15rem;
    font-weight: 700;
    color: #fff;
    text-align: right;
    white-space: nowrap;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    line-height: 1.15;
}

.mc-podium__row--lead .mc-podium__score { color: var(--tf-cyan); }

.mc-podium__score small {
    font-family: inherit;
    font-size: 0.68rem;
    font-weight: 400;
    color: var(--tf-muted-on-ink);
}

.mc-podium__meta {
    grid-area: meta;
    display: flex;
    flex-wrap: wrap;
    gap: 4px 14px;
    font-size: 0.76rem;
    color: var(--tf-muted-on-ink);
}

.mc-podium__meta .fa { margin-right: 3px; font-size: 0.7rem; }

@media (min-width: 768px) {
    .mc-podium__row {
        grid-template-columns: 34px minmax(0, 1.4fr) minmax(0, 1fr) auto;
        grid-template-areas: "rank tyre meta score";
        gap: 14px;
    }
    .mc-podium__meta { justify-content: flex-end; }
}

/* ---- Leaderboard band: the weighting panel, then the table --------------- */

/* The panel keeps its results-grid.css card look; only its place in the band
   changes. Its own h2 becomes a sub-heading of the section title above it. */
.mc .mc-weights { margin: 18px 0 20px; }
.mc .rg-weights { margin: 0; }
.mc .rg-weights__title { font-size: 1.05rem; margin: 0 0 6px; }
.mc .rg-weights__intro { font-size: 0.86rem; }

.mc .mc-lb .tf-table__rank { width: 56px; }
.mc .mc-lb .mc-rank strong { font-weight: 700; }
.mc .mc-lb .mc-lb__total { font-family: var(--tf-mono); font-weight: 700; white-space: nowrap; }
.mc .mc-lb th.mc-lb__total { font-family: inherit; }
.mc .mc-lb .mc-group { font-family: var(--tf-mono); font-size: 0.86rem; white-space: nowrap; }
.mc .mc-lb .mc-group-hdr { white-space: nowrap; }
.mc .mc-lb .mc-tyre a { display: inline; color: var(--tf-text); text-decoration: none; }
.mc .mc-lb .mc-tyre a:hover { text-decoration: underline; }
.mc .mc-lb tbody tr { transition: background-color 0.2s; }

/* multi-compare-weights.js marks the leader with Bootstrap's old class name;
   the contract stays, the look is ours. */
.mc .mc-lb tbody tr.table-success td { background: rgba(31, 168, 106, 0.09); }
.mc .mc-lb tbody tr.table-success .mc-lb__total { color: var(--tf-good); }
.mc .mc-lb tbody tr.table-success .mc-tyre a { font-weight: 700; }

/* ---- Radar --------------------------------------------------------------- */

.mc .mc-radar {
    position: relative;
    height: 470px;
    margin-top: 18px;
    background: var(--tf-paper);
    border: 1px solid var(--tf-line);
    border-radius: 6px;
    padding: 12px;
}

@media (min-width: 768px) { .mc .mc-radar { height: 560px; padding: 18px; } }
@media (min-width: 1100px) { .mc .mc-radar { height: 640px; } }

/* ---- Per-measurement bars ------------------------------------------------- */

.mc .mc-bars {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 14px;
    margin-top: 18px;
}

@media (min-width: 760px) { .mc .mc-bars { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

.mc .mc-bar {
    background: var(--tf-paper);
    border: 1px solid var(--tf-line);
    border-radius: 6px;
    padding: 12px 14px 10px;
    min-width: 0;
}

.mc .mc-bar__title {
    margin: 0 0 6px;
    font-size: 0.92rem;
    font-weight: 700;
    line-height: 1.3;
}

.mc .mc-bar__dir {
    font-size: 0.72rem;
    font-weight: 400;
    color: var(--tf-muted);
    white-space: nowrap;
}

.mc .mc-bar__canvas { position: relative; width: 100%; }

/* ---- Data table ------------------------------------------------------------ */

.mc .mc-data { margin-top: 18px; }
.mc .mc-data__table { min-width: 560px; }
.mc .mc-data__table th.mc-data__tyre { text-transform: none; letter-spacing: 0; font-size: 0.8rem; text-align: right; }
.mc .mc-data__table th.mc-data__tyre a { color: var(--tf-text); text-decoration: none; }
.mc .mc-data__table th.mc-data__tyre a:hover { text-decoration: underline; }
.mc .mc-data__table th.mc-data__tyre .mc-swatch { margin-right: 6px; }

.mc .mc-data__group th {
    background: var(--tf-mist);
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--tf-text);
    padding-top: 12px;
}

.mc .mc-data__metric {
    background: transparent;
    text-transform: none;
    letter-spacing: 0;
    font-size: 0.88rem;
    font-weight: 500;
    color: var(--tf-text);
    white-space: normal;
    min-width: 180px;
}

.mc .mc-data__unit {
    font-family: var(--tf-mono);
    font-size: 0.74rem;
    color: var(--tf-muted);
    margin-left: 4px;
}

.mc .mc-data__dir {
    display: block;
    font-size: 0.7rem;
    font-weight: 400;
    color: var(--tf-muted);
}

.mc .mc-data__table td.tf-table__n { font-family: var(--tf-mono); white-space: nowrap; }
.mc .mc-data__best { font-weight: 700; color: var(--tf-good); }
.mc .mc-data__na { color: var(--tf-muted); }

/* ---- Records: W/D/L and the shared tests ------------------------------------ */

.mc .mc-wdl { margin-top: 18px; }
.mc .mc-wdl tbody tr.mc-wdl__lead td { background: rgba(31, 168, 106, 0.09); }
.mc .mc-wdl .tf-table__n { font-family: var(--tf-mono); }
.mc .mc-wdl .tf-table__tyre a { color: var(--tf-text); text-decoration: none; }
.mc .mc-wdl .tf-table__tyre a:hover { text-decoration: underline; }

.mc .mc-tests th.mc-tests__tyre { text-transform: none; letter-spacing: 0; font-size: 0.78rem; white-space: normal; min-width: 96px; }
.mc .mc-tests .mc-tests__test { min-width: 240px; }
.mc .mc-tests .mc-tests__test a { color: var(--tf-text); font-weight: 600; text-decoration: none; }
.mc .mc-tests .mc-tests__test a:hover { text-decoration: underline; }
.mc .mc-tests__meta { display: block; margin-top: 2px; font-size: 0.74rem; color: var(--tf-muted); }
.mc .mc-tests td.tf-table__n { font-family: var(--tf-mono); }
.mc .mc-tests td.mc-tests__win { font-weight: 700; color: var(--tf-good); }
/* The class a grouped test placed the tyre in, under its position. */
.mc .mc-tests .ttr-class { display: table; margin: 4px 0 0; font-family: inherit; font-weight: 400; white-space: normal; }

/* The tests table folds past ten rows; tyre-size.js toggles is-open. */
.mc .tsz-collapse tr.tsz-more { display: none; }
.mc .tsz-collapse.is-open tr.tsz-more { display: table-row; }

/* ---- Head-to-heads ------------------------------------------------------------ */

.mc .mc-h2h {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 10px;
    margin-top: 18px;
}

@media (min-width: 620px) { .mc .mc-h2h { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 980px) { .mc .mc-h2h { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

.mc a.mc-h2h__card,
.mc a.mc-h2h__card:link,
.mc a.mc-h2h__card:visited {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 12px;
    background: var(--tf-paper);
    border: 1px solid var(--tf-line);
    border-radius: 6px;
    color: var(--tf-text);
    text-decoration: none;
    transition: border-color 0.15s;
}

.mc a.mc-h2h__card:hover { border-color: var(--tf-cyan); }

.mc .mc-h2h__pics { display: flex; flex: none; }
.mc .mc-h2h__pics img {
    width: 40px;
    height: 40px;
    object-fit: contain;
    border-radius: 6px;
    background: var(--tf-mist);
    border: 2px solid var(--tf-paper);
}
.mc .mc-h2h__pics img + img { margin-left: -10px; }

.mc .mc-h2h__names { flex: 1 1 auto; min-width: 0; font-size: 0.92rem; font-weight: 600; line-height: 1.3; }
.mc .mc-h2h__names i { font-style: normal; font-weight: 400; color: var(--tf-muted); font-size: 0.8em; padding: 0 2px; }
.mc .mc-h2h__arrow { color: var(--tf-muted); font-size: 0.75rem; flex: none; }

/* ---- FAQ ------------------------------------------------------------------------- */

.mc .mc-faq { max-width: var(--tr-measure, 760px); margin-top: 6px; }
.mc .mc-faq__item { padding: 14px 0; border-bottom: 1px solid var(--tf-line); }
.mc .mc-faq__item:last-child { border-bottom: 0; }
.mc .mc-faq__q { margin: 0 0 6px; font-size: 1.05rem; }
.mc .mc-faq__a { margin: 0; line-height: 1.55; }

/* ---- CTA buttons wrap on the result page ------------------------------------------ */

.mc .mc-cta__actions { display: flex; flex-wrap: wrap; gap: 10px; }

/* ==========================================================================
   The landing
   ========================================================================== */

.mc .mc-cards {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 14px;
    margin-top: 18px;
}

@media (min-width: 620px) { .mc .mc-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 980px) { .mc .mc-cards { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

.mc a.mc-card,
.mc a.mc-card:link,
.mc a.mc-card:visited {
    display: flex;
    flex-direction: column;
    background: var(--tf-paper);
    border: 1px solid var(--tf-line);
    border-radius: 6px;
    color: var(--tf-text);
    text-decoration: none;
    transition: border-color 0.15s, transform 0.15s;
    min-width: 0;
}

.mc a.mc-card:hover { border-color: var(--tf-cyan); transform: translateY(-2px); }

.mc .mc-card__pics {
    display: flex;
    align-items: center;
    padding: 12px 14px 0;
}

.mc .mc-card__pics img {
    width: 48px;
    height: 48px;
    object-fit: contain;
    border-radius: 8px;
    background: var(--tf-mist);
    border: 2px solid var(--tf-paper);
}

.mc .mc-card__pics img + img,
.mc .mc-card__pics img + .mc-card__more { margin-left: -12px; }

.mc .mc-card__more {
    width: 48px;
    height: 48px;
    border-radius: 8px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-family: var(--tf-mono);
    font-size: 0.8rem;
    font-weight: 700;
    color: var(--tf-muted);
    background: var(--tf-mist);
    border: 2px solid var(--tf-paper);
}

.mc .mc-card__body { display: block; padding: 10px 14px 13px; }

.mc .mc-card__title {
    display: block;
    font-size: 0.95rem;
    font-weight: 700;
    line-height: 1.35;
    letter-spacing: -0.01em;
}

.mc .mc-card__title i,
.mc .mc-recent__pair i {
    font-style: normal;
    font-weight: 400;
    color: var(--tf-muted);
    font-size: 0.78em;
    padding: 0 2px;
}

.mc .mc-card__meta {
    display: flex;
    flex-wrap: wrap;
    gap: 4px 12px;
    margin-top: 8px;
    font-family: var(--tf-mono);
    font-size: 0.74rem;
    color: var(--tf-muted);
}

.mc .mc-card__meta .fa { margin-right: 2px; font-size: 0.7rem; }

.mc .mc-recent { margin-top: 18px; }
.mc .mc-recent__pair a { color: var(--tf-text); font-weight: 600; text-decoration: none; }
.mc .mc-recent__pair a:hover { text-decoration: underline; }
.mc .mc-recent__pair .tf-chip { margin-left: 8px; }
.mc .mc-recent .tf-table__n { font-family: var(--tf-mono); }
.mc .mc-recent__when { white-space: nowrap; color: var(--tf-muted); font-size: 0.86rem; }

/* How a group is ranked: three numbered steps */
.mc .mc-how {
    list-style: none;
    margin: 18px 0 0;
    padding: 0;
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 14px;
    counter-reset: none;
}

@media (min-width: 760px) { .mc .mc-how { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

.mc .mc-how__step {
    background: var(--tf-paper);
    border: 1px solid var(--tf-line);
    border-radius: 6px;
    padding: 16px 18px 14px;
}

.mc .mc-how__n {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background: var(--tf-cyan);
    color: #fff;
    font-family: var(--tf-mono);
    font-weight: 700;
    margin-bottom: 10px;
}

.mc .mc-how__title { margin: 0 0 6px; font-size: 1.02rem; font-weight: 800; }
.mc .mc-how__text { margin: 0; font-size: 0.9rem; line-height: 1.55; color: var(--tf-text); }

/* ==========================================================================
   A group of two (/Compare/Multi/A-VS-B.htm, templates/pages/compare/pair.php)
   On the head-to-head page's cvs- rules (compare-page.css, which index.php
   loads for two-tyre Multi URLs); only the hero's answer card and the
   measurement table's discipline rows are drawn here.
   ========================================================================== */

.mcp-duel {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px;
    margin-top: 22px;
    padding: 18px;
    border: 1px solid rgba(255, 255, 255, .1);
    border-radius: 14px;
    background: rgba(255, 255, 255, .035);
}
.mcp-duel__side { display: flex; flex-direction: column; align-items: center; gap: 10px; min-width: 0; text-align: center; }
.mcp-duel__photo { display: block; width: 96px; flex: none; }
.mcp-duel__photo img { display: block; width: 100%; height: auto; aspect-ratio: 1; object-fit: contain; border-radius: 12px; background: #fff; border: 1px solid rgba(255, 255, 255, .16); }
.mcp-duel__noimg { display: flex; align-items: center; justify-content: center; width: 100%; aspect-ratio: 1; font-size: 44px; color: rgba(255, 255, 255, .25); }
.mcp-duel__who { display: flex; flex-direction: column; align-items: center; gap: 8px; min-width: 0; width: 100%; }
a.mcp-duel__name, a.mcp-duel__name:link, a.mcp-duel__name:visited { color: #fff; font-size: 1.05rem; font-weight: 600; line-height: 1.25; text-decoration: none; }
a.mcp-duel__name:hover { text-decoration: underline; }
.mcp-duel__brand { display: block; margin-bottom: 2px; font-family: var(--tf-mono, monospace); font-size: .68rem; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--cvs-a-hi); }
.mcp-duel__side--b .mcp-duel__brand { color: var(--cvs-b-hi); }
.mcp-duel__place { font-size: 1.5rem; font-weight: 800; line-height: 1; letter-spacing: -.01em; color: rgba(255, 255, 255, .55); }
.mcp-duel__side.is-ahead .mcp-duel__place { color: #fff; }
.mcp-duel__place .ttr-class { display: table; margin: 6px auto 0; font-size: .7rem; letter-spacing: 0; }
.mcp-duel__ahead {
    display: inline-flex; align-items: center; gap: 5px;
    padding: 3px 9px; border-radius: 999px;
    font-family: var(--tf-mono, monospace); font-size: .66rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
    color: var(--cvs-a-hi); background: rgba(var(--cvs-a-rgb), .2); border: 1px solid rgba(var(--cvs-a-rgb), .55);
}
.mcp-duel__side--b .mcp-duel__ahead { color: var(--cvs-b-hi); background: rgba(var(--cvs-b-rgb), .2); border-color: rgba(var(--cvs-b-rgb), .55); }
.mcp-duel__who .tr-research-save { margin: 0; }

.mcp-duel__mid { grid-column: 1 / -1; grid-row: 2; display: flex; flex-direction: column; align-items: center; gap: 5px; padding-top: 14px; border-top: 1px solid rgba(255, 255, 255, .1); text-align: center; }
.mcp-duel__eyebrow { font-family: var(--tf-mono, monospace); font-size: .66rem; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--tf-cyan, #0db1e7); }
a.mcp-duel__test, a.mcp-duel__test:link, a.mcp-duel__test:visited { color: #fff; font-size: 1rem; font-weight: 600; line-height: 1.3; text-decoration: underline; text-decoration-color: rgba(255, 255, 255, .35); text-underline-offset: 3px; }
a.mcp-duel__test:hover { text-decoration-color: #fff; }
.mcp-duel__meta { font-family: var(--tf-mono, monospace); font-size: .72rem; color: var(--tf-muted-on-ink, #9fadb9); }
.mcp-duel__record { display: flex; align-items: baseline; gap: .15em; font-size: 2.6rem; font-weight: 800; line-height: 1; letter-spacing: -.03em; }
.mcp-duel__rec--a { color: var(--cvs-a-hi); }
.mcp-duel__rec--b { color: var(--cvs-b-hi); }
.mcp-duel__dash { color: rgba(255, 255, 255, .3); font-weight: 400; }
.mcp-duel__mid .cvs-split { max-width: 200px; height: 6px; background: rgba(255, 255, 255, .12); }
.mcp-duel__mid .cvs-split__a { background: var(--cvs-a-hi); }
.mcp-duel__mid .cvs-split__b { background: var(--cvs-b-hi); }
.mcp-duel__vs { font-size: 2rem; font-weight: 800; font-style: italic; color: var(--tf-cyan, #0db1e7); }

/* Who was ahead in each discipline: one strip, a segment per discipline, like
   the sectors on a timing screen. A segment is filled with the colour of the
   tyre that led it and names it underneath; a level one stays plain. Every
   segment is laid out alike, so the colours carry the pattern. Brand colours
   are chosen to read on white, so white type holds on every fill. */
.mcp-discs { grid-column: 1 / -1; padding-top: 14px; border-top: 1px solid rgba(255, 255, 255, .1); }
.mcp-discs__title { margin: 0 0 10px; text-align: center; font-family: var(--tf-mono, monospace); font-size: .66rem; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--tf-muted-on-ink, #9fadb9); }
.mcp-discs__list { display: flex; flex-wrap: wrap; gap: 2px; margin: 0; padding: 0; list-style: none; border-radius: 10px; overflow: hidden; }
/* Two a row on a phone, an odd last one across the strip; three a row on a
   tablet (four as two by two); one row from 820px (below). */
.mcp-discs__list li { display: flex; flex: 1 1 40%; min-width: 0; margin: 0; padding: 0; }
@media (min-width: 560px) and (max-width: 819px) {
    .mcp-discs__list li { flex-basis: 30%; }
    .mcp-discs__list li:first-child:nth-last-child(4),
    .mcp-discs__list li:first-child:nth-last-child(4) ~ li { flex-basis: 40%; }
}
.mcp-disc { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; flex: 1 1 auto; box-sizing: border-box; min-width: 0; padding: 10px 10px 11px; text-align: center; background: rgba(255, 255, 255, .07); }
a.mcp-disc:link, a.mcp-disc:visited, a.mcp-disc:hover { text-decoration: none; }
a.mcp-disc:hover { filter: brightness(1.12); }
a.mcp-disc:focus-visible { outline: 2px solid #fff; outline-offset: -4px; }
.mcp-disc--a { background: var(--cvs-a); }
.mcp-disc--b { background: var(--cvs-b); }
.mcp-disc__name { font-size: .95rem; font-weight: 700; line-height: 1.2; color: #fff; }
.mcp-disc__who { font-size: .78rem; font-weight: 500; line-height: 1.25; color: rgba(255, 255, 255, .88); overflow-wrap: anywhere; }
.mcp-disc--level .mcp-disc__name { color: rgba(255, 255, 255, .78); }
.mcp-disc--level .mcp-disc__who { color: rgba(255, 255, 255, .5); }
.mcp-head__lede { margin-top: 20px; }

@media (min-width: 820px) {
    .mcp-duel { grid-template-columns: 1fr minmax(200px, 280px) 1fr; align-items: center; gap: 18px 24px; padding: 24px 28px; }
    .mcp-duel__mid { grid-column: 2; grid-row: 1; padding-top: 0; border-top: 0; }
    .mcp-duel__side { flex-direction: row; gap: 18px; text-align: left; }
    .mcp-duel__side--b { flex-direction: row-reverse; text-align: right; }
    .mcp-duel__photo { width: 124px; }
    .mcp-duel__who { align-items: flex-start; }
    .mcp-duel__side--b .mcp-duel__who { align-items: flex-end; }
    .mcp-duel__place .ttr-class { margin-left: 0; }
    .mcp-duel__side--b .mcp-duel__place .ttr-class { margin: 6px 0 0 auto; }
    a.mcp-duel__name { font-size: 1.25rem; }
    .mcp-duel__place { font-size: 1.9rem; }
    .mcp-duel__record { font-size: 3.2rem; }
    .mcp-discs__list { flex-wrap: nowrap; }
    .mcp-discs__list li { flex: 1 1 0; }
}
@media (max-width: 480px) {
    .mcp-duel { padding: 14px 12px; gap: 10px; }
    .mcp-duel__photo { width: 76px; }
    a.mcp-duel__name { font-size: .96rem; }
    .mcp-duel__place { font-size: 1.25rem; }
}

/* The measurement table: every discipline open, its leader named */
.mcp-data .cvs-data__name { font-weight: 600; }
.mcp .cvs-data .cvs-data__grphead th { padding: 0; }
.mcp-data__grp { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 12px; padding: 12px 14px; }
@media (max-width: 720px) { .mcp-data__grp { padding: 12px; } }
.mcp-data__lead { font-family: var(--tr-mono, monospace); font-size: .76rem; font-weight: 600; color: var(--tr-muted, #5d6a75); }
.mcp-data__lead--a { color: var(--cvs-a); }
.mcp-data__lead--b { color: var(--cvs-b); }