/* The soccer archive: its tables, the ranked charts and the market bar. */
/* The archive tables: concluded matches and our record in each market.

   Numbers are right aligned in a real table and left aligned once the table
   has stacked into labelled blocks, where a value floating away from its own
   label just reads as a mistake. Bootstrap's text-end carries !important and
   cannot be undone at a breakpoint, so alignment lives here instead. */
@media (min-width: 768px) {
    .archive-table .archive-num {
        text-align: right;
    }
}
.archive-table th,
.archive-table td {
    border-color: var(--hairline);
}

/* **Every cell starts at the top, a row header exactly like an ordinary cell.**
   A row is as tall as its tallest cell and these cells are not the same
   height: "Our call" is three lines, a date is one. Centring the short ones
   floated them into the middle of the tall ones, so a row read as a staircase
   rather than a line, and the eye lost which value belonged to which column.
   This has to name `th` as well as `td`: the match name is a row header, and a
   rule written for `td` alone left that one column sitting 20px lower than the
   six beside it.

   `baseline`, not `top`. A row mixes sizes on purpose, a figure at 1.05rem
   over its sample size at .68rem, and `top` lines up the boxes rather than the
   writing, so a larger figure still sat two or three pixels high. `baseline`
   puts the first line of every cell on one line however big it is set, which
   is what a reader actually sees. */
.archive-table > thead > tr > th,
.archive-table > tbody > tr > th,
.archive-table > tbody > tr > td {
    vertical-align: baseline;
}

.archive-table thead th {
    font-size: .8rem;
    color: var(--muted);
}

/* The verdict is the last line of a call, under its price, and starts where
   the pick and the price start. It used to trail the pick with a left margin;
   once the price moved under the pick the verdict wrapped under it too, and
   the margin only pushed it out of line with the two lines above. */
.archive-hit,
.archive-miss {
    display: block;
    width: max-content;
    font-size: .72rem;
    font-weight: 600;
    padding: .1rem .4rem;
    border-radius: .25rem;
    margin-top: .3rem;
}

.archive-hit {
    background: var(--up-tint);
    color: var(--up);
}

.archive-miss {
    background: var(--down-tint);
    color: var(--down);
}

/* The match archive as a table, from 1200px.

   The site-wide table rules near the top of this file are written for the
   dashboard's prediction tables: no gutter between cells and every heading
   centred. This table needs a gutter so two columns never touch, and each
   heading over the column it names. A row header is a cell too, so the match
   name gets the same gutter as the date beside it.

   A call, its price and its verdict belong on one line. Letting them wrap
   makes one row twice the height of its neighbours and the column reads as
   ragged rather than dense. The column widens instead. */
@media (min-width: 1200px) {
    .archive-match-table > thead > tr > th,
    .archive-match-table > tbody > tr > th,
    .archive-match-table > tbody > tr > td {
        padding: .6rem .75rem;
    }

    .archive-match-table > thead > tr > th {
        text-align: left;
        white-space: nowrap;
    }

    .archive-match-table .archive-call {
        white-space: nowrap;
    }
}

/* The price that stood beside a call when we published it. */
/* The price we recorded beside a pick is support for the pick, not a second
   headline, so it sits under it rather than trailing along the same line. */
.archive-odds {
    display: block;
    font-variant-numeric: tabular-nums;
    font-size: .68rem;
    line-height: 1.25;
    color: var(--muted);
    margin-top: .1rem;
}

/* A row that is the same call read at a safer line, not a pick of its own. */
.archive-derived th[scope="row"] {
    font-weight: 400;
}

.archive-note {
    display: block;
    font-size: .75rem;
    color: var(--muted);
}
/* The record table on a phone. Four labelled lines per market is eight lines
   for one row and forty for the table; a market reads perfectly well as its
   name over three figures. */
@media (max-width: 767.98px) {
    .archive-record-table thead {
        position: absolute;
        width: 1px;
        height: 1px;
        overflow: hidden;
        clip: rect(0 0 0 0);
    }

    .archive-record-table,
    .archive-record-table tbody {
        display: block;
    }

    .archive-record-table tbody tr {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        /* A grid item is not a table cell, so `vertical-align` does nothing
           here and the alignment has to be asked for again. Without it the
           hit rate, set larger than the two counts beside it, sat five pixels
           above them. */
        align-items: baseline;
        gap: .4rem .5rem;
        border: 1px solid var(--hairline);
        border-radius: .5rem;
        padding: .7rem .85rem;
        margin-bottom: .75rem;
    }

    .archive-record-table tbody tr > th,
    .archive-record-table tbody tr > td {
        border: 0;
        padding: 0;
        text-align: left;
        /* One line box for all three, so the values under the labels share a
           baseline. `align-items: baseline` lines up the first line, which is
           the label; the second line only follows it when the text on it is
           set the same. */
        line-height: 1.35;
    }

    .archive-record-table .archive-stat-rate {
        font-size: 1rem;
        line-height: 1.35;
    }

    .archive-record-table tbody th[scope="row"] {
        grid-column: 1 / -1;
        font-size: .95rem;
    }

    .archive-record-table tbody td::before {
        content: attr(data-label);
        display: block;
        font-size: .65rem;
        color: var(--accent);
        margin-bottom: .1rem;
    }
}

/* The "how the record changes" table: one row per venue or per competition,
   one cell per market, each carrying its own sample size. */
/* **The figure first, on its own line; what it rests on underneath, smaller.**
   These cells used to read "64% from 221" as one run of text at one size, and
   with six of them across a row the eye could not tell where one column's
   value ended and the next began. The number is what the reader came for, so
   it gets the line and the weight; the sample size is support, so it goes
   under it, smaller and grey, where it can wrap without pushing anything
   sideways. The same shape is used in every table on these pages. */
.archive-stat {
    line-height: 1.2;
    padding-top: .55rem;
    padding-bottom: .55rem;
    /* A gutter, so two columns of numbers can never touch even when both are
       at their widest. */
    padding-left: .85rem;
    padding-right: .85rem;
}

.archive-stat-rate {
    display: block;
    font-size: 1.05rem;
    font-weight: 700;
    line-height: 1.2;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.archive-stat-n {
    display: block;
    font-size: .68rem;
    line-height: 1.25;
    color: var(--muted);
    font-weight: 400;
    font-variant-numeric: tabular-nums;
    margin-top: .12rem;
    /* Support text may wrap. It is the headline that must never move. */
    white-space: normal;
    text-transform: none;
    letter-spacing: 0;
}

.archive-split-table thead th {
    font-size: .7rem;
    line-height: 1.2;
}

/* On a phone the row becomes a card: the slice it describes on one line, then
   its five markets flowing three across. Five labelled blocks stacked would be
   twenty five lines per team and unreadable. */
@media (max-width: 767.98px) {
    .archive-split-table thead {
        position: absolute;
        width: 1px;
        height: 1px;
        overflow: hidden;
        clip: rect(0 0 0 0);
    }

    .archive-split-table,
    .archive-split-table tbody {
        display: block;
    }

    .archive-split-table tbody tr {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: .5rem .5rem;
        border: 1px solid var(--hairline);
        border-radius: .5rem;
        padding: .7rem .85rem;
        margin-bottom: .75rem;
    }

    .archive-split-table tbody tr > th,
    .archive-split-table tbody tr > td {
        border: 0;
        padding: 0;
        text-align: left;
    }

    .archive-split-table tbody th[scope="row"] {
        grid-column: 1 / -1;
        font-size: .95rem;
    }

    .archive-split-table .archive-stat::before {
        content: attr(data-label);
        display: block;
        font-size: .65rem;
        line-height: 1.15;
        color: var(--accent);
        margin-bottom: .15rem;
        /* "Over or under 2.5 goals" wraps to two lines and its neighbours do
           not, which left the figures in a row sitting at three different
           heights. Reserving the taller of the two lands them all on one. */
        min-height: 2.3em;
    }
}

/* The A to Z on the team index, and the country groups on the competition
   index: dense lists of links that should still breathe on a phone. */
.archive-link-list {
    columns: 3 14rem;
    column-gap: 2rem;
    list-style: none;
    padding-left: 0;
    margin-bottom: 0;
}

.archive-link-list li {
    break-inside: avoid;
    padding: .18rem 0;
}

@media (max-width: 575.98px) {
    .archive-link-list {
        columns: 1;
    }
}


/* The match archive below 1200px.

   Four calls beside a date, a match, a competition and a score need more room
   than a tablet or a small laptop has. With three calls the table already ran
   48px wider than its card at 768px and pushed the whole page sideways; with
   four, the team page folded match names onto three lines at 1100px and still
   poked out of its card. Measured on the full width card, every row fits on
   one line from 1400px, and only the longest names fold to two from 1200px.
   So below 1200px each row becomes a small card: when and where on one line,
   the match and its score on the next, then the four calls, each under its
   own label.

   Not the generic `stacking-table`. That pattern gives every cell a labelled
   line of its own, which made fifty matches three hundred labelled blocks and
   a page twenty thousand pixels tall, and it switches at 768px, which is far
   too late for this table. So the card is written out whole here.

   One twelve column grid carries every width. Twelve splits into thirds for
   the date and the competition, and into quarters or halves for the calls:
   four across on a tablet, two by two on a phone. */
@media (max-width: 1199.98px) {
    .archive-match-table thead {
        position: absolute;
        width: 1px;
        height: 1px;
        overflow: hidden;
        clip: rect(0 0 0 0);
        white-space: nowrap;
    }

    .archive-match-table,
    .archive-match-table tbody {
        display: block;
        width: 100%;
    }

    .archive-match-table tbody tr {
        display: grid;
        grid-template-columns: repeat(12, 1fr);
        align-items: baseline;
        gap: .15rem .6rem;
        padding: .7rem .85rem;
        border: 1px solid var(--hairline);
        border-radius: .5rem;
        margin-bottom: 1rem;
    }

    .archive-match-table tbody tr > th,
    .archive-match-table tbody tr > td {
        display: block;
        border: 0;
        padding: 0;
        text-align: left;
    }

    /* The date is a fixed ten characters, so it takes a third; the
       competition takes the other two, because "UEFA Europa Conference
       League" in a third of 390px wraps to three lines and pushes the whole
       card down. */
    .archive-match-table td[data-label="Date"] {
        order: 1;
        grid-column: 1 / 5;
        font-size: .78rem;
        color: var(--muted);
    }

    .archive-match-table td[data-label="Competition"] {
        order: 2;
        grid-column: 5 / 13;
        text-align: right;
        font-size: .72rem;
        color: var(--muted);
    }

    /* The score is four characters at most, so the match name takes all but a
       sixth. At two thirds, a long pairing ran to three lines on a phone. */
    .archive-match-table th[data-label="Match"] {
        order: 3;
        grid-column: 1 / 11;
        font-weight: 600;
    }

    .archive-match-table td[data-label="Score"] {
        order: 4;
        grid-column: 11 / 13;
        text-align: right;
        font-weight: 600;
    }

    /* The calls sit on one baseline, so a verdict is always under the market
       it belongs to. Every call is placed by name: a layout that named only
       some of them once left the safer line adrift in a cell of its own. */
    .archive-match-table td[data-label="Result call"] {
        order: 5;
        grid-column: 1 / 4;
    }

    .archive-match-table td[data-label="Double chance"] {
        order: 6;
        grid-column: 4 / 7;
    }

    .archive-match-table td[data-label="Goals call"] {
        order: 7;
        grid-column: 7 / 10;
    }

    .archive-match-table td[data-label="Safer line"] {
        order: 8;
        grid-column: 10 / 13;
    }

    .archive-match-table .archive-call {
        font-size: .82rem;
        margin-top: .4rem;
    }

    /* Only the calls carry a label. The date, the score and the match name
       say what they are. */
    .archive-match-table .archive-call::before {
        content: attr(data-label);
        display: block;
        font-size: .62rem;
        font-weight: 600;
        line-height: 1.15;
        color: var(--accent);
        margin-bottom: .15rem;
    }
}

/* A quarter of a phone is about 65px, and "Home or draw" and its label need
   more than that, so on a phone the calls go two by two: the two result
   markets on one line, the two goals markets under them. */
@media (max-width: 575.98px) {
    .archive-match-table td[data-label="Result call"],
    .archive-match-table td[data-label="Goals call"] {
        grid-column: 1 / 7;
    }

    .archive-match-table td[data-label="Double chance"],
    .archive-match-table td[data-label="Safer line"] {
        grid-column: 7 / 13;
    }
}


/* ---------------------------------------------------------------------------
   The ranked charts on the most predictable page.

   One series, so one colour: var(--accent-fill), the brand green, which clears the
   lightness band, the chroma floor and 3:1 against a white surface. Colouring
   the bars by their own value would spend the identity channel re-encoding
   what the bar length already says.

   Bars are thin, run from a zero baseline across the full 0 to 100 range, and
   round only at the data end. The hairline rule inside each track is our rate
   across the whole archive in that market.
   --------------------------------------------------------------------------- */
:root {
    --chart-mark: var(--accent-fill);
    --chart-track: var(--hairline);
    --chart-rule: var(--muted);
}

.rank-chart th,
.rank-chart td {
    border-color: var(--hairline);
    padding-top: .5rem;
    padding-bottom: .5rem;
}

.rank-chart thead th {
    font-size: .7rem;
    color: var(--muted);
    font-weight: 600;
}

.rank-head-position { width: 2.5rem; }
.rank-head-bar { width: 34%; }

.rank-position {
    font-variant-numeric: tabular-nums;
    color: var(--muted);
    font-size: .85rem;
}

.rank-name {
    font-weight: 500;
    line-height: 1.25;
}

.rank-context {
    display: block;
    font-size: .72rem;
    color: var(--muted);
    font-weight: 400;
    /* One line, always. Letting it wrap made every third row a different
       height and the column read as ragged; the full text is on the row's
       title either way. */
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.rank-bar-cell { vertical-align: middle; }

.rank-track {
    position: relative;
    display: block;
    height: 14px;
    background: var(--chart-track);
    border-radius: 2px;
}

.rank-bar {
    display: block;
    height: 100%;
    background: var(--chart-mark);
    /* Square where it leaves the baseline, rounded at the data end. */
    border-radius: 0 4px 4px 0;
}

.rank-average {
    position: absolute;
    top: -4px;
    bottom: -4px;
    width: 1px;
    background: var(--chart-rule);
    z-index: 1;
}

.rank-rate {
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

/* On a phone the row becomes three lines: who, the bar, and the rate. */
@media (max-width: 767.98px) {
    .rank-chart thead {
        position: absolute;
        width: 1px;
        height: 1px;
        overflow: hidden;
        clip: rect(0 0 0 0);
    }

    .rank-chart,
    .rank-chart tbody {
        display: block;
    }

    .rank-chart tbody tr {
        display: grid;
        grid-template-columns: 1.6rem 1fr auto;
        align-items: baseline;
        gap: .1rem .6rem;
        border: 0;
        border-bottom: 1px solid var(--hairline);
        padding: .6rem 0;
    }

    .rank-chart tbody tr > th,
    .rank-chart tbody tr > td {
        border: 0;
        padding: 0;
        text-align: left;
    }

    .rank-chart .rank-position { grid-column: 1; grid-row: 1; }
    .rank-chart .rank-name { grid-column: 2; grid-row: 1; }
    .rank-chart .rank-rate { grid-column: 3; grid-row: 1; text-align: right; }

    .rank-chart .rank-bar-cell {
        grid-column: 1 / -1;
        grid-row: 2;
        margin-top: .35rem;
    }
}


/* ---------------------------------------------------------------------------
   The most predictable page: twenty rankings, five markets, one screen.

   The market bar sticks under the navbar so no ranking is ever more than one
   click from any other, and each section clears both bars when jumped to.
   --------------------------------------------------------------------------- */
:root {
    /* The market bar's own height, measured: .6rem of padding top and bottom,
       a 33px pill and two hairline borders. The section header stacks directly
       under it, so the two numbers have to agree or the header tucks a few
       pixels behind the bar. */
    --market-bar-height: 55px;
}

.market-nav {
    position: sticky;
    top: var(--bar-height);
    z-index: 1019;
    background: var(--bar);
    -webkit-backdrop-filter: saturate(180%) blur(18px);
    backdrop-filter: saturate(180%) blur(18px);
    border-top: 1px solid var(--hairline);
    border-bottom: 1px solid var(--hairline);
}

.market-nav-scroll {
    display: flex;
    align-items: center;
    gap: .4rem;
    padding: .6rem 0;
    overflow-x: auto;
    /* Five pills do not fit 390px, so the row scrolls rather than wrapping
       into a block that pushes the page down on every phone. */
    scrollbar-width: none;
}

.market-nav-scroll::-webkit-scrollbar { display: none; }

.market-nav-label {
    flex: none;
    font-size: .7rem;
    color: var(--muted);
    padding-right: .35rem;
}

.market-pill {
    flex: none;
    display: inline-block;
    padding: .35rem .85rem;
    border-radius: 999px;
    border: 1px solid var(--hairline);
    font-size: .85rem;
    font-weight: 500;
    color: var(--muted);
    text-decoration: none;
    white-space: nowrap;
    transition: background-color .15s ease, border-color .15s ease, color .15s ease;
}

.market-pill:hover,
.market-pill:focus {
    background: var(--accent-tint);
    border-color: var(--accent);
    color: var(--heading);
}

.market-section {
    /* Clears the navbar, the market bar and the sticky section header. */
    scroll-margin-top: calc(var(--bar-height) + var(--market-bar-height));
    padding-top: 1.5rem;
}

/* The section header sticks for as long as its own section is on screen, so
   the market name and the active ranking stay with the table they describe.
   Four tables under one heading meant that by the third you could no longer
   tell what you were reading. */
.market-header {
    position: sticky;
    top: calc(var(--bar-height) + var(--market-bar-height));
    z-index: 1018;
    background: var(--page);
    padding: 1rem 0 .65rem;
    margin-bottom: 1.25rem;
    border-bottom: 1px solid var(--hairline);
}

.market-header-top {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    justify-content: space-between;
    gap: .35rem 1.5rem;
}

.market-header-main { min-width: 0; }

/* The chart key. It sits as a chip rather than inline in a sentence: an
   inline-flex box takes its baseline from its first child, and with a bare
   rule as that child every browser hung it a few pixels above the text beside
   it. */
.market-average {
    display: flex;
    align-items: center;
    gap: .45rem;
    flex: none;
    font-size: .8rem;
    color: var(--text);
    padding: .3rem .7rem;
    border-radius: 999px;
    background: var(--wash);
}

.market-average-rule {
    display: block;
    width: 1px;
    height: .9rem;
    background: var(--chart-rule);
}

/* One ranking at a time. The tab that is open is the page's answer to "what
   am I looking at", so it has to read as selected at a glance. */
.rank-tabs {
    display: flex;
    flex-wrap: nowrap;
    gap: .35rem;
    margin: .85rem 0 0;
    padding: 0 0 .1rem;
    overflow-x: auto;
    scrollbar-width: none;
}

.rank-tabs::-webkit-scrollbar { display: none; }

.rank-tab {
    flex: none;
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    padding: .4rem .85rem;
    border: 1px solid var(--hairline);
    border-radius: 999px;
    background: transparent;
    font-size: .85rem;
    font-weight: 500;
    color: var(--muted);
    white-space: nowrap;
    transition: background-color .15s ease, border-color .15s ease, color .15s ease;
}

.rank-tab i { font-size: .8rem; }

.rank-tab:hover { border-color: var(--accent); color: var(--heading); }
.rank-tab.active:hover { color: var(--accent-ink); }

.rank-tab.active {
    background: var(--accent-fill);
    border-color: var(--accent-fill);
    color: var(--accent-ink);
}

.rank-tab.active i { color: var(--accent-ink); }

/* Repeated inside the panel as well as on the tab. The tab is the control and
   the caption is the label, and a reader deep in a table of twenty rows should
   not have to look up to either. */
.rank-pane-caption {
    display: flex;
    align-items: center;
    gap: .5rem;
    margin: 0 0 1rem;
    font-size: .8rem;
    color: var(--muted);
}

.rank-pane-caption i { color: var(--accent); }


/* A group of links under a heading, on the index pages. */
.archive-group { scroll-margin-top: calc(var(--bar-height) + 16px); }
.archive-group + .archive-group { margin-top: 40px; }
.archive-group h2 { scroll-margin-top: calc(var(--bar-height) + 16px); }
.archive-cta-text { max-width: 44rem; }
.archive-link-list a { text-decoration: underline; text-decoration-color: color-mix(in srgb, var(--accent) 35%, transparent); }
.archive-link-list a:hover { text-decoration-color: var(--accent); }
.table-wrap-note { max-width: 62rem; }
.rank-name a { color: var(--heading); text-decoration: underline; text-decoration-color: var(--hairline); text-underline-offset: 3px; }
.rank-name a:hover { text-decoration-color: var(--accent); }
/* The match table takes the window's width where it stays a table, up to the width it reads best at. */
@media (min-width: 1200px) {
  .archive-wide { --table-width: min(100vw - 64px, 92rem); width: var(--table-width); margin-left: calc((100% - var(--table-width)) / 2); }
}