/* ==========================================================================
   Brand comparisons (/Compare/Brands/ and /Compare/Brands/A-VS-B.htm)
   bc2- rules on the tf-/tyd- shell. The two brand colours arrive as
   --bc2-a / --bc2-b (+ -rgb) on .bc2 for the pair page and on each card
   for the index; everything two-sided reads them.
   ========================================================================== */

.bc2 { --bc2-a: var(--tr-cyan, #0db1e7); --bc2-b: #5d6a75; }
.bc2 [hidden] { display: none !important; }

/* Two-sided colouring, reused by tables, cards and tiles */
.bc2 .bc2-hi-a { color: var(--bc2-a); }
.bc2 .bc2-hi-b { color: var(--bc2-b); }
.bc2 td.bc2-hi-a, .bc2 td.bc2-hi-b { font-weight: 700; }
.bc2-pill { display: inline-block; padding: 2px 9px; border-radius: 999px; font-size: .78rem; font-weight: 700; color: #fff; background: var(--bc2-a); white-space: nowrap; }
.bc2-pill--b { background: var(--bc2-b); }
.bc2-pill--draw { background: var(--tr-mist, #eef1f4); color: var(--tr-muted, #5d6a75); }

/* --------------------------------------------------------------------------
   Hero: A's colour washes in from the left, B's from the right
   -------------------------------------------------------------------------- */
.bc2-head::before {
    background:
        radial-gradient(60% 90% at 88% -10%, rgba(var(--bc2-b-rgb, 93, 106, 117), .22), transparent 70%),
        radial-gradient(60% 90% at 6% 110%, rgba(var(--bc2-a-rgb, 13, 177, 231), .22), transparent 70%);
}
.bc2-head__title { display: flex; flex-wrap: wrap; align-items: baseline; gap: .15em .4em; }
.bc2-head__vs { font-size: .5em; font-weight: 500; color: var(--tf-mist-ink, #a9b8c4); letter-spacing: .08em; text-transform: uppercase; }
.bc2-head__lede { max-width: var(--tr-measure, 760px); }

/* Face-off panel */
.bc2-faceoff { max-width: none; }
.bc2-faceoff__grid { display: grid; grid-template-columns: 1fr; gap: 18px; }
@media (min-width: 900px) { .bc2-faceoff__grid { grid-template-columns: 1fr 160px 1fr; align-items: start; } }
.bc2-faceoff__side { border-top: 3px solid var(--bc2-a); padding-top: 12px; min-width: 0; }
.bc2-faceoff__side--b { border-top-color: var(--bc2-b); }
.bc2-head .bc2-faceoff__brand, .bc2-head .bc2-faceoff__name { color: #fff; }
.bc2-faceoff__brand { display: flex; align-items: center; gap: 12px; text-decoration: none; }
.bc2-faceoff__brand:hover .bc2-faceoff__name { text-decoration: underline; }
.bc2-faceoff__logo { display: inline-flex; align-items: center; justify-content: center; height: 44px; padding: 6px 10px; border-radius: 8px; background: #fff; flex: none; }
.bc2-faceoff__logo img { display: block; width: auto; height: 100%; max-width: 130px; object-fit: contain; }
.bc2-faceoff__name { font-size: 1.25rem; font-weight: 700; line-height: 1.2; }
.bc2-faceoff__facts { margin: 6px 0 12px; font-size: .82rem; color: var(--tr-muted-on-ink, #9fadb9); }
.bc2-faceoff__cells { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.bc2-faceoff__cell { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.bc2-faceoff__cell .tyd-verdict__num { font-size: 1.6rem; font-weight: 700; line-height: 1; }
.bc2-faceoff__mid { display: flex; flex-direction: column; align-items: center; text-align: center; justify-content: center; gap: 4px; padding: 8px 0; }
@media (min-width: 900px) { .bc2-faceoff__mid { padding-top: 40px; } }
.bc2-faceoff__record { font-size: 2.6rem; font-weight: 800; line-height: 1; display: flex; gap: .12em; align-items: baseline; }
.bc2-faceoff__rec--a { color: var(--bc2-a); }
.bc2-faceoff__rec--b { color: var(--bc2-b); }
.bc2-faceoff__dash { opacity: .4; font-weight: 400; }
.bc2-faceoff__record--none { opacity: .4; }
.bc2-head .bc2-faceoff__rec--a, .bc2-head .bc2-faceoff__rec--b,
.bc2-head .bc2-head__side--a, .bc2-head .bc2-head__side--b { filter: brightness(1.35) saturate(.9); }
.bc2-head__side--a { color: var(--bc2-a); }
.bc2-head__side--b { color: var(--bc2-b); }

/* Jump nav on this shell */
.bc2 .tyre-jump-nav { margin-bottom: 0; }
.bc2 .tyre-jump-nav__scroller { max-width: var(--tf-wrap, 1180px); margin: 0 auto; padding: 0 20px; }

/* --------------------------------------------------------------------------
   Shared widgets
   -------------------------------------------------------------------------- */
.bc2-sub { margin: 26px 0 10px; font-size: 1.1rem; font-weight: 700; }
.bc2-line { margin: 6px 0; max-width: var(--tr-measure, 760px); line-height: 1.55; }
.bc2-prose { max-width: var(--tr-measure, 760px); margin-top: 16px; }
.bc2-prose p { margin: 0 0 12px; line-height: 1.65; }
.bc2-prose p:last-child { margin-bottom: 0; }
.bc2 .tf-table tbody th { background: transparent; text-transform: none; letter-spacing: 0; font-size: .92rem; font-weight: 600; color: var(--tr-text, #17202a); white-space: normal; }
.bc2 .tf-table th.bc2-glance__a { color: var(--bc2-a); }
.bc2 .tf-table th.bc2-glance__b { color: var(--bc2-b); }
.bc2-glance__draw { font-size: .85rem; color: var(--tr-muted, #5d6a75); }
.bc2 .bc2-glance, .bc2 .bc2-seasons { min-width: 0; }
@media (max-width: 640px) {
    /* The coloured cell already names the winner; the pill column is the one that would force a scroll. */
    .bc2 .bc2-glance th:last-child, .bc2 .bc2-glance td:last-child { display: none; }
    .bc2 .tf-table th, .bc2 .tf-table td { padding: 9px 8px; }
    .bc2 .bc2-seasons th { white-space: normal; font-size: .6rem; letter-spacing: .04em; }
    .bc2 .bc2-seasons th, .bc2 .bc2-seasons td { padding: 8px 5px; }
}

/* Win bar: A from the left, draws in the middle, B from the right */
.bc2-winbar { display: flex; width: 100%; height: 10px; border-radius: 5px; overflow: hidden; background: var(--tr-mist, #eef1f4); }
.bc2-winbar__seg { display: block; height: 100%; }
.bc2-winbar__seg--a { background: var(--bc2-a); }
.bc2-winbar__seg--b { background: var(--bc2-b); }
.bc2-winbar__seg--draw { background: var(--tr-line, #dde3e9); }
.bc2-record { max-width: 760px; margin: 18px 0 6px; }
.bc2-record__ends { display: flex; justify-content: space-between; gap: 10px; margin-bottom: 8px; font-size: .9rem; }
.bc2-record__end b { font-size: 1.35rem; font-weight: 800; }
.bc2-record__end--a b { color: var(--bc2-a); }
.bc2-record__end--b b { color: var(--bc2-b); }
.bc2-record__end--b { text-align: right; }
.bc2-record__end--draw { color: var(--tr-muted, #5d6a75); text-align: center; }

/* Two-sided stat tiles */
.bc2-tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 12px; margin: 16px 0 0; }
.bc2-tile { display: flex; flex-direction: column; gap: 6px; background: var(--tr-paper, #fff); border: 1px solid var(--tr-line, #dde3e9); border-radius: 12px; padding: 12px 14px; border-top-width: 4px; }
.bc2-tile--a { border-top-color: var(--bc2-a); }
.bc2-tile--b { border-top-color: var(--bc2-b); }
.bc2-tile__label { font-size: .72rem; font-weight: 600; text-transform: uppercase; letter-spacing: .08em; color: var(--tr-muted, #5d6a75); }
.bc2-tile__row { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; }
.bc2-tile__name { font-size: .9rem; color: var(--tr-muted, #5d6a75); min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bc2-tile__val { font-family: var(--tr-mono, monospace); font-size: 1.25rem; font-weight: 700; white-space: nowrap; }
.bc2-tile__val small { font-size: .7em; font-weight: 500; color: var(--tr-muted, #5d6a75); }
.bc2-tile__row.is-lead .bc2-tile__name { color: var(--tr-text, #17202a); font-weight: 600; }
.bc2-tile__row--a.is-lead .bc2-tile__val { color: var(--bc2-a); }
.bc2-tile__row--b.is-lead .bc2-tile__val { color: var(--bc2-b); }
.bc2-tile__note { font-size: .78rem; line-height: 1.45; color: var(--tr-muted, #5d6a75); }
@media (max-width: 640px) {
    .bc2-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
    .bc2-tile { padding: 10px 12px; gap: 4px; }
    .bc2-tile__name { font-size: .82rem; }
    .bc2-tile__val { font-size: 1rem; }
}

/* Metric cards with paired bars (also the owner sub-scores) */
.bc2-tabs { display: flex; flex-wrap: wrap; gap: 8px; margin: 16px 0 4px; }
.bc2-tabs__btn, .bc2-filter__btn {
    font: inherit; font-size: .85rem; font-weight: 600; line-height: 1;
    padding: 8px 14px; border-radius: 999px; cursor: pointer;
    background: var(--tr-paper, #fff); color: var(--tr-text, #17202a); border: 1px solid var(--tr-line, #dde3e9);
}
.bc2-tabs__btn:hover, .bc2-filter__btn:hover { border-color: var(--tr-cyan, #0db1e7); }
.bc2-tabs__btn.is-active, .bc2-filter__btn.is-active { background: var(--tr-cyan, #0db1e7); border-color: var(--tr-cyan, #0db1e7); color: #fff; }
.bc2-metrics { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 12px; margin: 14px 0 0; }
.bc2-metric { background: var(--tr-paper, #fff); border: 1px solid var(--tr-line, #dde3e9); border-radius: 12px; padding: 12px 14px; border-top-width: 4px; min-width: 0; }
.bc2-metric--a { border-top-color: var(--bc2-a); }
.bc2-metric--b { border-top-color: var(--bc2-b); }
.bc2-metric__head { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; margin-bottom: 10px; }
.bc2-metric__name { font-weight: 700; }
.bc2-metric__name small { font-weight: 500; color: var(--tr-muted, #5d6a75); }
.bc2-bar { display: grid; grid-template-columns: minmax(64px, 100px) 1fr auto; align-items: center; gap: 8px; margin: 6px 0; font-size: .85rem; }
.bc2-bar__name { color: var(--tr-muted, #5d6a75); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bc2-bar.is-lead .bc2-bar__name { color: var(--tr-text, #17202a); font-weight: 600; }
.bc2-bar__track { display: block; height: 8px; border-radius: 4px; background: var(--tr-mist, #eef1f4); overflow: hidden; }
.bc2-bar__fill { display: block; height: 100%; border-radius: 4px; opacity: .55; }
.bc2-bar.is-lead .bc2-bar__fill { opacity: 1; }
.bc2-bar__fill--a { background: var(--bc2-a); }
.bc2-bar__fill--b { background: var(--bc2-b); }
.bc2-bar__val { font-family: var(--tr-mono, monospace); font-weight: 700; white-space: nowrap; }
.bc2-bar__val small { font-weight: 500; color: var(--tr-muted, #5d6a75); }
.bc2-metric__foot { margin: 8px 0 0; font-size: .78rem; color: var(--tr-muted, #5d6a75); }
.bc2-metrics--owners { margin-top: 16px; }
@media (max-width: 640px) {
    /* Nine short owner scores: two to a row, the name above its bar. */
    .bc2-metrics--owners { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
    .bc2-metrics--owners .bc2-metric { padding: 10px 12px; }
    .bc2-metrics--owners .bc2-metric__head { margin-bottom: 4px; }
    .bc2-metrics--owners .bc2-bar { grid-template-columns: 1fr auto; gap: 2px 8px; margin: 4px 0; font-size: .8rem; }
    .bc2-metrics--owners .bc2-bar__name { grid-column: 1 / -1; }
}

/* Season cards */
.bc2-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 12px; margin: 16px 0 0; }
.bc2-season { background: var(--tr-paper, #fff); border: 1px solid var(--tr-line, #dde3e9); border-radius: 12px; padding: 14px 16px; border-top-width: 4px; }
.bc2-season--a { border-top-color: var(--bc2-a); }
.bc2-season--b { border-top-color: var(--bc2-b); }
.bc2-season__head { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; }
.bc2-season__label { font-weight: 700; font-size: 1.05rem; }
.bc2-season__n { font-size: .8rem; color: var(--tr-muted, #5d6a75); white-space: nowrap; }
.bc2-season__line { margin: 6px 0 10px; font-size: .92rem; }
.bc2-season__best { margin: 12px 0 0; display: grid; gap: 6px; font-size: .82rem; }
.bc2-season__best dt { display: inline; font-weight: 600; }
.bc2-season__best dd { display: inline; margin: 0; }
.bc2-season__best dd::before { content: " "; }

/* Range: one column per brand */
.bc2-ranges { display: grid; grid-template-columns: 1fr; gap: 20px; margin-top: 8px; }
@media (min-width: 768px) { .bc2-ranges { grid-template-columns: 1fr 1fr; } }
.bc2-range .bc2-sub { padding-left: 10px; border-left: 4px solid var(--bc2-a); }
.bc2-range--b .bc2-sub { border-left-color: var(--bc2-b); }
.bc2 .bc2-matrix { min-width: 0; }
.bc2 .bc2-matrix td { text-align: center; font-family: var(--tr-mono, monospace); }
.bc2 .bc2-matrix th { text-align: center; }
.bc2 .bc2-matrix tbody th { text-align: left; }
.bc2-matrix__none { color: var(--tr-line, #dde3e9); }
.bc2 a.bc2-range__link { margin-top: 12px; }
@media (max-width: 640px) {
    .bc2 .bc2-matrix { table-layout: fixed; }
    .bc2 .bc2-matrix th { white-space: normal; font-size: .62rem; letter-spacing: .04em; padding: 8px 4px; }
    .bc2 .bc2-matrix td { padding: 8px 4px; }
}

/* Top picks: a row per season, both brands side by side */
.bc2-picks { display: grid; gap: 14px; margin-top: 16px; }
.bc2-picks__row { background: var(--tr-paper, #fff); border: 1px solid var(--tr-line, #dde3e9); border-radius: 12px; padding: 12px 14px; }
.bc2-picks__season { margin: 0 0 10px; font-size: 1rem; font-weight: 700; }
.bc2-picks__pair { display: grid; grid-template-columns: 1fr; gap: 10px; }
@media (min-width: 640px) { .bc2-picks__pair { grid-template-columns: 1fr 1fr; } }
.bc2-picks__col { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.bc2-picks__brand { font-size: .72rem; font-weight: 700; text-transform: uppercase; letter-spacing: .08em; }
.bc2-pick { display: flex; align-items: center; gap: 10px; text-decoration: none; color: inherit; padding: 6px 8px; border-radius: 8px; border: 1px solid var(--tr-line, #dde3e9); min-width: 0; }
.bc2-pick:hover { border-color: var(--tr-cyan, #0db1e7); text-decoration: none; }
.bc2-pick__img { width: 48px; height: 48px; object-fit: contain; flex: none; }
.bc2-pick__title { flex: 1; min-width: 0; font-weight: 600; line-height: 1.3; }
.bc2-pick__score { font-family: var(--tr-mono, monospace); font-weight: 700; white-space: nowrap; }
.bc2-pick__score small { font-weight: 500; color: var(--tr-muted, #5d6a75); }
.bc2-pick--none { color: var(--tr-muted, #5d6a75); border-style: dashed; }

/* Per-tyre matchups */
.bc2-matchups { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 12px; margin-top: 16px; }
.bc2-matchup { display: flex; flex-direction: column; gap: 8px; background: var(--tr-paper, #fff); border: 1px solid var(--tr-line, #dde3e9); border-radius: 12px; padding: 12px 14px; color: inherit; text-decoration: none; }
.bc2-matchup:hover { border-color: var(--tr-cyan, #0db1e7); text-decoration: none; }
.bc2-matchup__img { width: 100%; height: auto; border-radius: 8px; }
.bc2-matchup__text { font-weight: 600; line-height: 1.35; }
.bc2-matchup__text em { font-style: normal; font-size: .8em; color: var(--tr-muted, #5d6a75); }
@media (max-width: 640px) {
    .bc2-matchups { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
    .bc2-matchup { padding: 8px 10px; }
    .bc2-matchup__text { font-size: .82rem; }
}

/* FAQ */
.bc2-faq { max-width: var(--tr-measure, 760px); margin-top: 8px; }
.bc2-faq__item { padding: 14px 0; border-bottom: 1px solid var(--tr-line, #dde3e9); }
.bc2-faq__item:last-child { border-bottom: 0; }
.bc2-faq__q { margin: 0 0 6px; font-size: 1.05rem; }
.bc2-faq__a { margin: 0; }

/* --------------------------------------------------------------------------
   Index: filter row and pairing cards
   -------------------------------------------------------------------------- */
.bc2-filter { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 18px; }
.bc2-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 14px; }
.bc2-card { display: flex; flex-direction: column; gap: 8px; background: var(--tr-paper, #fff); border: 1px solid var(--tr-line, #dde3e9); border-radius: 12px; padding: 16px; color: inherit; text-decoration: none; min-width: 0; }
.bc2-card:hover { border-color: var(--tr-cyan, #0db1e7); text-decoration: none; }
.bc2-card__names { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 8px; }
.bc2-card__name { font-size: 1.2rem; font-weight: 800; line-height: 1.2; }
.bc2-card__vs { font-size: .72rem; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--tr-muted, #5d6a75); }
.bc2-card__record { display: flex; align-items: baseline; gap: .15em; font-family: var(--tr-mono, monospace); font-size: 1.6rem; font-weight: 800; line-height: 1; }
.bc2-card__dash { opacity: .4; font-weight: 400; }
.bc2-card__meta { font-size: .82rem; color: var(--tr-muted, #5d6a75); }
.bc2-empty { margin: 8px 0 0; color: var(--tr-muted, #5d6a75); }

@media (max-width: 720px) {
    .bc2-faceoff__cells { gap: 6px; }
    .bc2-faceoff__cell .tyd-verdict__big { font-size: 1.6rem; }
    .bc2-faceoff__record { font-size: 2.1rem; }
    .bc2-faceoff__name { font-size: 1.1rem; }
    .bc2-tile__val { font-size: 1.1rem; }
}
@media (max-width: 480px) {
    .bc2-faceoff__cell .tyd-verdict__num { font-size: 1.3rem; }
    .bc2-faceoff__cell .tyd-verdict__big { font-size: 1.4rem; }
    .bc2-bar { grid-template-columns: minmax(56px, 84px) 1fr auto; }
}