/* Champions League season board (/champions_league_title_simulations)
   Builds on the shared simulations.css (.sim-page/.sim-hero/.sim-card system),
   same relationship football_simulations.css has to it. Accent = football green
   (the page lives under the Football group), with the provisional banner in
   amber so a not-final field can never read as a settled one.

   FLAGSHIP TREATMENT, NOT A SIXTH COLOUR (Jul 2026). The competition is the
   headline football surface on the site, so this page carries a floodlit hero
   and a podium above the board. It does that with light and weight, not with a
   new sport hue: the five sport tokens are all taken and the two plausible
   Champions League colours are the two worst choices available. Blue is NBA and
   gold is one step from both the brand accent and the amber that means
   "provisional" three inches further down. Platinum is the trophy's own colour,
   collides with nothing, and stays legible on the dark surface. */

.csim-page .sim-eyebrow { color: var(--sport-football, #43C18A); }

/* The shared .sim-page reserves calc(72px + 32px) above the fold for a hero
   that starts as bare text. This one starts as a bounded panel, and the panel's
   own padding was reading as a second gap: on a phone the h1 was pushed a third
   of the way down the first screen. Scoped here, nothing else moves. */
.csim-page { padding-top: calc(72px + var(--s-3, 12px)); }

/* ---------------------------------------------------------------- hero */
/* Floodlight wash behind the hero, mirroring the Champions League band on
   the landing page so the campaign reads as one surface. */
.csim-hero {
    position: relative;
    padding: 1.75rem 1.5rem 1.6rem;
    border-radius: var(--radius-xl, 20px);
    border: 1px solid var(--border-subtle, rgba(255, 255, 255, 0.06));
    background:
        radial-gradient(110% 130% at 12% -30%, rgba(255, 255, 255, 0.07) 0%, transparent 58%),
        linear-gradient(180deg, var(--surface-1, #11141B) 0%, transparent 100%);
    overflow: hidden;
}
.csim-hero::before {
    content: "";
    position: absolute;
    inset: 0 0 auto 0;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.4), transparent);
}
.csim-hero h1 {
    background: linear-gradient(180deg, #FFFFFF 0%, #C7D0E0 100%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

/* -------------------------------------------------------------- podium */
.csim-podium {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0.75rem;
    margin-bottom: 1.25rem;
}
.csim-podium__card {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.85rem 1rem;
    border-radius: 12px;
    background: var(--surface-1, #11141B);
    border: 1px solid var(--border-subtle, rgba(255, 255, 255, 0.06));
    border-left: 3px solid rgba(255, 255, 255, 0.2);
    min-width: 0;
}
/* Only the leader gets the platinum edge. Ranks two and three step down in
   brightness instead of picking up colours of their own. */
.csim-podium__card--1 { border-left-color: #E8EEF9; background: rgba(255, 255, 255, 0.045); }
.csim-podium__card--2 { border-left-color: rgba(255, 255, 255, 0.55); }
.csim-podium__card--3 { border-left-color: rgba(255, 255, 255, 0.32); }

.csim-podium__rank {
    font-family: var(--font-mono, monospace);
    font-size: 1.35rem;
    font-weight: 700;
    line-height: 1;
    color: rgba(255, 255, 255, 0.3);
    font-variant-numeric: tabular-nums;
}
.csim-podium__card--1 .csim-podium__rank { color: rgba(255, 255, 255, 0.6); }

.csim-podium__body { display: flex; flex-direction: column; min-width: 0; flex: 1 1 auto; }
.csim-podium__club {
    font-size: 1rem;
    font-weight: 700;
    letter-spacing: -0.01em;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.csim-podium__meta {
    font-size: 0.7rem;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.42);
}
.csim-podium__odds { display: flex; flex-direction: column; align-items: flex-end; }
.csim-podium__pct {
    font-size: 1.45rem;
    font-weight: 800;
    line-height: 1;
    letter-spacing: -0.02em;
    font-variant-numeric: tabular-nums;
    color: var(--text-primary, #F2F4F8);
}
.csim-podium__label {
    font-size: 0.68rem;
    color: rgba(255, 255, 255, 0.42);
    letter-spacing: 0.04em;
}

/* --------------------------------------------------------- provisional banner */
.csim-banner {
    display: flex;
    gap: 0.9rem;
    align-items: flex-start;
    padding: 0.9rem 1.1rem;
    margin-bottom: 1.1rem;
    border-radius: 12px;
    background: rgba(250, 204, 21, 0.09);
    border: 1px solid rgba(250, 204, 21, 0.35);
    border-left: 4px solid #FACC15;
}
.csim-banner > i { font-size: 1.45rem; color: #FACC15; line-height: 1.2; }
.csim-banner-title {
    display: block;
    font-weight: 700;
    letter-spacing: 0.01em;
    margin-bottom: 0.2rem;
}
.csim-banner p { margin: 0; font-size: 0.9rem; color: rgba(255, 255, 255, 0.78); }
.csim-banner p + p { margin-top: 0.35rem; }

.csim-banner.csim-banner--live {
    background: rgba(67, 193, 138, 0.08);
    border-color: rgba(67, 193, 138, 0.32);
    border-left-color: #43C18A;
}
.csim-banner.csim-banner--live > i { color: #43C18A; }

/* ------------------------------------------------------------------- table */
.csim-table { display: flex; flex-direction: column; gap: 2px; margin-top: 0.75rem; }

.csim-thead,
.csim-row {
    display: grid;
    grid-template-columns:
        2rem minmax(10.5rem, 1.6fr)
        repeat(var(--csim-meta, 2), 3.6rem)
        repeat(var(--csim-cells, 3), minmax(5rem, 1fr))
        minmax(8.5rem, 1.2fr);
    align-items: center;
    gap: 0.4rem;
    padding: 0.45rem 0.6rem;
    border-radius: 8px;
}

.csim-thead {
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: rgba(255, 255, 255, 0.55);
    position: sticky;
    top: 0;
    background: rgba(13, 17, 23, 0.92);
    backdrop-filter: blur(4px);
    z-index: 2;
}

.csim-row {
    background: rgba(255, 255, 255, 0.025);
    border-left: 3px solid #43C18A;
    transition: background 0.15s ease;
}
.csim-row:hover { background: rgba(255, 255, 255, 0.06); }

/* The three clubs already shown on the podium: brighter fill and a platinum
   edge so the eye can find them again after scrolling the board. */
.csim-row--lead {
    background: rgba(255, 255, 255, 0.05);
    border-left-color: #E8EEF9;
}
.csim-row--lead .csim-col-club strong { font-weight: 700; }

/* qualifying pool: dimmer, dashed left edge, so a club that is not in yet can
   never be mistaken for a confirmed entrant */
.csim-row--pool {
    border-left-style: dashed;
    border-left-color: rgba(255, 255, 255, 0.28);
    background: rgba(255, 255, 255, 0.012);
}
.csim-row--pool .csim-col-club strong { color: rgba(255, 255, 255, 0.82); }

.csim-col-rank { font-weight: 700; font-variant-numeric: tabular-nums; }
.csim-row--pool .csim-col-rank { color: rgba(255, 255, 255, 0.45); }

.csim-col-club { display: flex; flex-direction: column; min-width: 0; }
.csim-col-club strong {
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
    font-size: 0.92rem;
}
.csim-sub {
    color: rgba(255, 255, 255, 0.45);
    font-size: 0.72rem;
    display: flex; align-items: center; gap: 0.35rem;
}
.csim-flag { letter-spacing: 0.06em; }

.csim-tag {
    font-size: 0.6rem;
    text-transform: uppercase;
    letter-spacing: 0.07em;
    padding: 0.05rem 0.3rem;
    border-radius: 4px;
    border: 1px solid rgba(250, 204, 21, 0.45);
    color: #FACC15;
    white-space: nowrap;
}

.csim-col-num { text-align: center; font-variant-numeric: tabular-nums; font-size: 0.88rem; }
.csim-thead .csim-col-num { font-size: 0.72rem; }
.csim-muted { color: rgba(255, 255, 255, 0.5); }

.csim-cell {
    text-align: center;
    font-variant-numeric: tabular-nums;
    font-size: 0.85rem;
    padding: 0.3rem 0.15rem;
    border-radius: 6px;
}
.csim-cell--playoff { background: rgba(79, 141, 255, var(--cell-a, 0)); }
.csim-cell--top8    { background: rgba(67, 193, 138, var(--cell-a, 0)); }
.csim-cell--final   { background: rgba(167, 139, 250, var(--cell-a, 0)); }
.csim-thead .csim-cell { background: none; }

.csim-col-title { display: flex; align-items: center; gap: 0.5rem; }
/* .sim-bar-fill is a <span> and the shared simulations.css never gives it a
   display, so width/height are ignored on an inline box and the champion bar
   renders EMPTY (verified Jul 2026 on the football / EuroLeague / NBA sim pages
   too, where the JS sets the width to no visible effect). Fixed here scoped to
   this page: setting display:block in the shared sheet would light the bars up
   on five other pages at once, which is not this page's call. */
.csim-page .sim-bar-fill { display: block; }
.csim-col-title .pct {
    font-weight: 700; font-variant-numeric: tabular-nums;
    min-width: 2.9rem; text-align: right;
}
.csim-thead .csim-col-title { display: block; text-align: right; }

/* The .sim-legend* BASE rules (flex row, dot size, muted note) are not in the
   shared simulations.css — they only ever existed inside
   euroleague_simulations.css, so any page that does not load that file renders
   an unstyled legend with invisible dots. Redefined here, scoped to .csim-page
   so nothing else on the site changes. */
.csim-page .sim-legend {
    display: flex; flex-wrap: wrap; align-items: center;
    gap: 0.45rem 1.1rem;
    margin-top: 0.7rem;
    font-size: 0.78rem;
    color: rgba(255, 255, 255, 0.62);
}
.csim-page .sim-legend-item { display: inline-flex; align-items: center; gap: 6px; }
.csim-page .sim-legend-dot { width: 11px; height: 11px; border-radius: 3px; display: inline-block; }
.csim-page .sim-legend-note { color: rgba(255, 255, 255, 0.45); flex: 1 1 100%; }

.sim-legend-dot.csim-dot-playoff { background: #4F8DFF; }
.sim-legend-dot.csim-dot-top8    { background: #43C18A; }
.sim-legend-dot.csim-dot-final   { background: #A78BFA; }
.sim-legend-dot.csim-dot-pool    { background: rgba(255, 255, 255, 0.3); }

.csim-foot {
    color: rgba(255, 255, 255, 0.45);
    font-size: 0.75rem;
    margin: 0.8rem 0 0;
}

/* ------------------------------------------------------------------ mobile */
@media (max-width: 900px) {
    /* narrower than the grid: swipe horizontally, header stays sticky */
    .csim-table { overflow-x: auto; -webkit-overflow-scrolling: touch; }
    .csim-thead, .csim-row {
        min-width: 505px;
        grid-template-columns:
            1.6rem minmax(8rem, 1.5fr)
            repeat(var(--csim-meta-sm, 1), 3.2rem)
            repeat(var(--csim-cells-sm, 2), minmax(3.9rem, 1fr))
            minmax(6.4rem, 1.2fr);
    }
    .csim-hide-sm { display: none; }
    .csim-col-club strong { font-size: 0.84rem; }
    .csim-cell { font-size: 0.76rem; padding: 0.25rem 0.1rem; }
    .csim-thead { font-size: 0.62rem; }
    .csim-col-title .pct { min-width: 2.4rem; font-size: 0.82rem; }
    .csim-banner { flex-direction: column; gap: 0.5rem; }
    .csim-page { padding-top: calc(64px + var(--s-2, 8px)); }
    .csim-hero { padding: 1.35rem 1.1rem 1.25rem; }
    /* the lede is eleven lines at body size on a 390px screen: tighten it
       rather than cut it, the copy is the page's SEO substance */
    .csim-hero .lede { font-size: 0.94rem; line-height: 1.5; }
    .csim-hero h1 { letter-spacing: -0.025em; }
    /* three podium cards side by side stop being readable well before the
       table does: one column, full width, ordered as ranked */
    .csim-podium { grid-template-columns: 1fr; gap: 0.5rem; }
    .csim-podium__card { padding: 0.7rem 0.85rem; }
    .csim-podium__pct { font-size: 1.25rem; }
}

@media (max-width: 400px) {
    .csim-sub { font-size: 0.66rem; }
}

/* ═══════════════════════════════════════════════════════════════════════
   CREDIBILITY SURFACES (Jul 2026)
   /champions-league-model-accuracy and
   /champions-league-title-retrospective/<season>.

   Both pages publish BACKTEST numbers, and the styling has one job beyond
   looking like the rest of the site: make the label impossible to miss. The
   backtest chip is the only chip on either page that carries its own colour,
   and it is amber — the same hue the provisional-board banner uses above, for
   the same reason. Amber here means "read the qualifier before you quote the
   number". Never restyle .csim-chip-backtest to blend in.
   ══════════════════════════════════════════════════════════════════════ */

/* Card subtitle. NOT .csim-sub, which is the 0.72rem flex label the odds
   table's column headers use — reusing it would shrink these paragraphs to
   caption size. */
.csim-card-sub {
    margin: 0.35rem 0 0;
    font-size: 0.88rem;
    line-height: 1.55;
    color: rgba(255, 255, 255, 0.66);
    max-width: 68ch;
}

.csim-chip-backtest {
    background: rgba(250, 204, 21, 0.10);
    border-color: rgba(250, 204, 21, 0.38);
    color: #FACC15;
}
.csim-chip-backtest i { color: #FACC15; }

/* ── verdict panel (retrospective) ──────────────────────────────────────
   The season's story in one sentence, colour-coded by whether the model was
   right. The MISS variant is styled as prominently as the hit: a page that
   dresses its successes and buries its failures is the thing this whole
   surface exists to not be. */
.csim-verdict {
    padding: 1.25rem 1.4rem 1.1rem;
    border-left: 4px solid var(--csim-verdict-accent, #43C18A);
}
.csim-verdict--hit { --csim-verdict-accent: #43C18A; }
.csim-verdict--near { --csim-verdict-accent: #FACC15; }
.csim-verdict--miss { --csim-verdict-accent: #E66767; }
.csim-verdict__head {
    font-size: 0.72rem;
    font-weight: 800;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--csim-verdict-accent, #43C18A);
    margin: 0 0 0.4rem;
}
.csim-verdict__line {
    font-size: 1.08rem;
    line-height: 1.5;
    color: rgba(255, 255, 255, 0.9);
    margin: 0 0 1.1rem;
    max-width: 70ch;
}

/* ── cut / season tables ─────────────────────────────────────────────── */
.csim-cuts-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.88rem;
}
.csim-cuts-table th,
.csim-cuts-table td {
    padding: 0.55rem 0.7rem;
    border-bottom: 1px solid var(--border-subtle, rgba(255, 255, 255, 0.06));
    text-align: left;
    white-space: nowrap;
}
.csim-cuts-table thead th {
    font-size: 0.66rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.45);
    white-space: normal;
}
.csim-cuts-table tbody th {
    font-weight: 600;
    color: rgba(255, 255, 255, 0.88);
}
.csim-cuts-table .num {
    text-align: right;
    font-family: var(--font-mono);
    font-variant-numeric: tabular-nums;
}
.csim-cuts-table tr.is-top1 { background: rgba(250, 204, 21, 0.06); }
.csim-cuts-table tr.is-total {
    background: rgba(255, 255, 255, 0.035);
    border-top: 2px solid var(--border-subtle, rgba(255, 255, 255, 0.1));
}
.csim-cuts-table tr.is-total th,
.csim-cuts-table tr.is-total td { border-bottom: none; }

/* Inline "favourite" / "winner" tag inside a table cell. .csim-flag already
   exists as a letter-spacing rule; this adds the pill it needs here. */
.csim-cuts-table .csim-flag,
.trc-table .csim-flag {
    display: inline-block;
    font-size: 0.6rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    padding: 1px 6px;
    border-radius: 999px;
    background: rgba(250, 204, 21, 0.14);
    border: 1px solid rgba(250, 204, 21, 0.34);
    color: #FACC15;
    vertical-align: middle;
}

/* ── cross-links + provenance ───────────────────────────────────────── */
.csim-more { padding: 1.2rem 1.4rem; }
.csim-more h2 { font-size: 1.02rem; margin: 0 0 0.6rem; }
.csim-more__links { list-style: none; margin: 0; padding: 0; }
.csim-more__links li { padding: 0.25rem 0; }
.csim-more__links a { font-size: 0.92rem; }

/* One-line closer under the scoreboard: where the OTHER record lives. The
   accuracy page is a scoreboard, so cross-links are a sentence, not a card. */
.csim-footline {
    margin: 0.25rem 0 0.6rem;
    font-size: 0.9rem;
    line-height: 1.6;
    color: rgba(255, 255, 255, 0.7);
}

/* The model vintage string, which is a machine-written identifier and must be
   allowed to wrap rather than blow out the layout on a phone. */
.csim-provenance {
    font-family: var(--font-mono);
    font-size: 0.78rem;
    line-height: 1.6;
    color: rgba(255, 255, 255, 0.62);
    overflow-wrap: anywhere;
}

@media (max-width: 768px) {
    /* Four KPI tiles in one row is unreadable well before the tables are;
       two-up keeps the numbers at full size. Scoped to these pages so the
       tennis track-record grid is untouched. */
    .csim-page .sim-track-stats { grid-template-columns: repeat(2, 1fr); }
    .csim-verdict__line { font-size: 0.98rem; }
    .csim-cuts-table { font-size: 0.8rem; }
    .csim-cuts-table th,
    .csim-cuts-table td { padding: 0.45rem 0.5rem; }
}