/*
 * table-predictions.css — /premier-league-table-predictions
 *
 * Loaded on top of rules.css, like the predictor page's stylesheet next door: everything except
 * the chart is the site's documentation furniture, and it should read like the rest of the prose
 * pages. This file dresses the one thing that is not prose.
 *
 * ## The chart
 *
 * Twenty rows, each carrying a twenty-cell strip: how many people put that club in each position,
 * as ink. It is a heat map, and the two decisions that make it work are in the view rather than
 * here - every strip is shaded against the single busiest cell in the whole chart, and the shares
 * run through a gamma curve first. See the $peak and $ink comments there for why both are
 * necessary; without them the table is a pale smear with four dark squares in it.
 *
 * ## Why it is CSS grid and not a table
 *
 * It IS tabular, and it carries role="table"/"row"/"cell" so it is announced as one. But a real
 * <table> cannot reflow, and this content has to: five columns at desktop, and on a phone the
 * strip has to drop onto a line of its own underneath the club name or the twenty cells end up
 * four pixels wide each. Grid does that in three lines. The ARIA roles are what keeps the
 * semantics that the element choice gives up.
 *
 * ## Colour
 *
 * One hue for the ink - green600 #698825, the site's own - with the alpha carrying the number, so
 * the chart has one colour and twenty shades rather than a scale nobody can hold in their head.
 * The band tints behind 1st-4th and 18th-20th are the same green and red the predictor uses, at
 * the palest step, so a column reads as European or relegation without competing with the ink on
 * top of it. Colour is never the only channel: the average and the range are printed as numbers
 * on every row, and the position ruler is numbered.
 */

/* ------------------------------------------------------------- headlines */

/* Three findings above the chart, in the page's own words. First thing on the page after the
   header, because they are the part somebody repeats to a friend, and they are what a search
   snippet is likely to lift. */
.ctp_headlines {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 12px;
    margin-bottom: 20px;
}
.ctp_headline {
    background: #fff;
    border-radius: 10px;
    padding: 16px 18px;
    box-shadow: 0 1px 3px var(--shadow);
}
.ctp_headline h2 {
    margin: 0 0 6px;
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    /* grey700 rather than grey600: 3.5:1 is not enough at this size, the same call rules.css
       makes for its own table headers. */
    color: var(--grey700);
}
.ctp_headline_big {
    margin: 0;
    font-size: 21px;
    font-weight: 900;
    line-height: 1.15;
    color: var(--grey900);
}
.ctp_headline_sub {
    margin: 4px 0 0;
    font-size: 14px;
    line-height: 1.35;
    color: var(--grey800);
}

@media (max-width: 760px) {
    /* One column rather than three squeezed: at 760 the club names started wrapping mid-word,
       and three cards of one line each read worse than three lines of one card each. */
    .ctp_headlines { grid-template-columns: 1fr; gap: 8px; }
    .ctp_headline { padding: 12px 14px; display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
    .ctp_headline h2 { flex-basis: 100%; margin-bottom: 2px; }
    .ctp_headline_big { font-size: 18px; }
}

/* ----------------------------------------------------------------- chart */

.ctp_chart {
    margin: 6px 0 14px;
}

.ctp_ruler,
.ctp_row {
    display: grid;
    /* rank | kit | club | strip | average | range. The strip takes whatever is left, and never
       less than 200px - below that the twenty cells are under 10px each and the shape stops
       being readable, which is when the mobile rule further down takes over instead. */
    grid-template-columns: 26px 14px minmax(94px, 1.1fr) minmax(200px, 2.4fr) 56px 74px;
    align-items: center;
    gap: 8px;
}

.ctp_ruler {
    padding-bottom: 6px;
    border-bottom: 2px solid var(--grey200);
    margin-bottom: 4px;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--grey700);
}
/* The ruler's first cell spans the rank gutter, the kit chip and the club column: there is no
   heading worth printing over either of the first two, and "Club" over the names is. */
.ctp_ruler_lead { grid-column: 1 / 4; }
.ctp_ruler_num  { text-align: right; }

/* The position numbers, on the same twenty-column grid as the cells below, so 1..20 line up with
   the strip they label. */
.ctp_ruler_cells {
    display: grid;
    grid-template-columns: repeat(20, 1fr);
}
.ctp_tick {
    text-align: center;
    font-size: 9px;
    letter-spacing: 0;
    color: var(--grey600);
    /* Every other number, from 360px down, would be the alternative. Instead the numbers stay and
       shrink: twenty ticks is a ruler, ten is a puzzle. */
    overflow: hidden;
}
.ctp_tick_ucl { color: var(--green700); font-weight: 700; }
.ctp_tick_rel { color: var(--red700);   font-weight: 700; }

.ctp_row {
    padding: 3px 0;
    border-bottom: 1px solid var(--grey100);
}
.ctp_row:last-child { border-bottom: none; }

.ctp_rank {
    font-size: 12px;
    color: var(--grey600);
    text-align: right;
    font-variant-numeric: tabular-nums;
}
/* The kit chip, same shape and same source as the predictor page's .tp_kit so a club reads as
   the same club on both. Smaller here: those rows are a 44px drag target and these are 26px of
   chart, and a chip that matched them would be the tallest thing in the row. */
.ctp_kit {
    height: 17px;
    border-radius: 2px;
    /* The inset hairline is what stops a white or pale-yellow kit disappearing into the row. */
    box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.18);
}

.ctp_club {
    font-size: 15px;
    font-weight: 700;
    color: var(--grey900);
    line-height: 1.2;
}

/* --------------------------------------------------------------- the strip */

.ctp_strip {
    position: relative;
    display: grid;
    grid-template-columns: repeat(20, 1fr);
    height: 26px;
    border-radius: 4px;
    overflow: hidden;
    /* The empty cells have to read as empty rather than as white space between rows, or a club
       nobody put in the bottom half looks like a broken strip. */
    background: var(--grey100);
}

.ctp_cell {
    /* --ink is set per cell in the view, 0..1. One custom property is the whole mechanism: the
       colour lives here and only the number travels in the HTML, so re-theming the chart is one
       line rather than four hundred inline colours. */
    background: rgba(105, 136, 37, var(--ink, 0));
}
/* The bands are marked with two lines, not by tinting the cells inside them.
 *
 * Tinting was the first version and it was wrong in a way that only showed up in a render: an
 * EMPTY cell in the relegation band is a pale red square, and a pale square in a chart whose
 * whole language is "pale square means a few people" says that a few people relegated Arsenal.
 * Nobody did. One channel for data, one for structure - the ink is people, the lines are the
 * table's own furniture, and the ruler's numbers carry the colour instead. */
.ctp_band_line {
    position: absolute;
    top: 0;
    bottom: 0;
    width: 0;
    border-left: 1px dashed var(--grey400);
    pointer-events: none;
}

/* Where the average falls, as a hairline. Deliberately thin and dark rather than a marker with a
   shape: it has to be readable on top of the darkest cell in the chart and invisible enough not
   to be mistaken for a twenty-first column. */
.ctp_mean_mark {
    position: absolute;
    top: 2px;
    bottom: 2px;
    width: 2px;
    margin-left: -1px;
    background: var(--grey900);
    opacity: 0.65;
    border-radius: 1px;
}

.ctp_num {
    text-align: right;
    font-size: 14px;
    font-variant-numeric: tabular-nums;
    color: var(--grey800);
    white-space: nowrap;
}
.ctp_range { color: var(--grey700); }

/* ---------------------------------------------------------------- legend */

.ctp_legend {
    font-size: 13px;
    color: var(--grey700);
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 6px 4px;
}
.ctp_swatch {
    display: inline-block;
    width: 14px;
    height: 14px;
    border-radius: 3px;
    margin-left: 10px;
    vertical-align: -2px;
}
.ctp_legend .ctp_swatch:first-child { margin-left: 0; }
.ctp_swatch_ink  { background: rgba(105, 136, 37, 0.85); }
.ctp_swatch_line { width: 0; height: 16px; border-radius: 0; border-left: 1px dashed var(--grey400); }
.ctp_swatch_mean { width: 3px; height: 16px; border-radius: 1px; background: var(--grey900); opacity: 0.65; }

/* ---------------------------------------------------------------- mobile */

/* The sidebar contents list goes rather than becoming a block of pills, the same call
   table-predictor.css makes and for the same reason: rules.css's pills are right for a page of
   documentation, and this is a chart with notes under it. 900px is rules.css's own breakpoint,
   matched rather than picked. Scoped on body.ctp_page so the documentation pages keep theirs. */
@media (max-width: 900px) {
    .ctp_page .rules_toc { display: none; }
}

/* Below 640 the strip goes onto a line of its own, full width, under the club name. Five columns
   on a phone gives the strip about 120px - six pixels a cell - and the shape, which is the entire
   reason the chart exists, disappears. Two lines per club is the honest trade. */
@media (max-width: 640px) {
    .ctp_ruler {
        grid-template-columns: 1fr auto auto;
        gap: 10px;
    }
    .ctp_ruler_lead  { grid-column: 1; }
    .ctp_ruler_cells { display: none; }

    .ctp_row {
        grid-template-columns: 22px 12px 1fr 44px 62px;
        padding: 7px 0 9px;
        border-bottom: 1px solid var(--grey200);
    }
    .ctp_kit { height: 15px; }
    /* order, so the strip drops BELOW the numbers rather than between the club and them. Without
       it the two figures land on a third line, left-aligned under the strip and no longer under
       the headings that name them - which is the one thing the ruler is for. */
    .ctp_strip {
        order: 9;
        grid-column: 1 / -1;
        height: 20px;
        margin-top: 6px;
    }
    .ctp_club { font-size: 14px; }
    .ctp_num  { font-size: 13px; }
}

@media (max-width: 380px) {
    /* Same reasoning as the predictor page's 360px block: this sheet's content is a chart rather
       than prose, so the reading margin it would otherwise keep is not doing anything. */
    .InfoSheet.ctp_sheet { padding-left: 8px; padding-right: 8px; }
    .ctp_row { grid-template-columns: 20px 11px 1fr 40px 56px; gap: 5px; }
}

/* ---------------------------------------------------------------- preview */

/* Only ever drawn for an admin let in before MIN_TABLES. Yellow and unmissable on purpose: the
   thing it prevents is a screenshot of a fourteen-table chart being taken for the published one.
   @see the route in public/index.php */
.ctp_preview_banner {
    margin: 0 0 10px;
    padding: 10px 14px;
    border-radius: 8px;
    background: var(--yellow200);
    border: 1px solid var(--yellow500);
    color: var(--yellow900);
    font-size: 14px;
    line-height: 1.45;
}

/* ------------------------------------------------------------------- CTAs */

/* The two buttons in "Add your own" each follow a <p>, and rules.css stacks that paragraph's
   16px bottom margin on top of the button's own 20px: 36px of white above each button and
   nothing at all below, so a button reads as belonging to the paragraph beneath it rather than
   the one it answers. Take the space off the top and put it underneath instead. The last CTA in
   a sheet keeps a tight bottom edge, since .InfoBody's own 16px padding is already there. */
.ctp_page .InfoBody a.rules_cta {
    margin-top: 4px;
}
.ctp_page .InfoBody a.rules_cta:not(:last-child) {
    margin-bottom: 24px;
}
/* The proof line is a child after the last CTA, so the rule above starts applying to a button
   that is still the last thing in the sheet. It carries its own 12px, and 24 + 12 reads as a gap
   somebody forgot to close. Falls back to that harmless 36px anywhere :has() is not understood. */
.ctp_page .InfoBody a.rules_cta:has(+ .rules_cta_proof) {
    margin-bottom: 0;
}