/*
 * bias.css — the prediction-bias study.
 *
 * Its own stylesheet rather than rules.css, which dresses /rules/ and the two comparison pages
 * as documentation: a grey page, white InfoSheet cards, a sidebar table of contents. That is
 * right for a page somebody consults and wrong for one meant to be read start to finish and
 * quoted, which is what this page is for (docs/seo.md §8).
 *
 * The charts are HTML and CSS, not SVG and not a charting library. Three reasons: the site
 * loads no JS on this page and should not start; real text reflows and stays real text at real
 * size on a 360px screen, where an SVG viewBox would scale 13px type down to 6px; and every
 * value is in the DOM for a screen reader without a parallel description. The one exception is
 * the seven-season line chart, which genuinely needs paths — it gets a scroll wrapper instead.
 *
 * Two series everywhere — "the crowd" and "reality" — so the whole page reads as one system.
 * The pair is green600 #698825 and red700 #943838, from main.css, and it was run through the
 * palette validator rather than eyeballed: CVD ΔE 11.6 (deutan), normal-vision ΔE 22.8, both
 * above the chroma floor, both over 3:1 on white. Do not substitute a colour here without
 * re-running that check — the site's teal fails it against green (ΔE 11.7, below the 15 floor)
 * and the obvious green/red pair at green700 fails deutan outright at ΔE 1.3.
 *
 * Colour is never the only channel: every chart carries a legend, both ends of every dumbbell
 * are labelled, and each figure has a <details> table under it.
 */

.bias_page {
    background: #fff;
    color: var(--grey900);
}

/* ---------------------------------------------------------------- hero */

/* All three overrides are load-bearing: main.css:110 styles the bare <header> element for the
   app's 96px-tall top bar - `height: 96px; margin-top: 32px; display: flex`. A hero taller than
   96px then overflows a fixed-height box and the first section of the page draws straight over
   it. Keeping <header> (it is the right element for a page header) means undoing all three. */
header.bias_hero {
    height: auto;
    margin-top: 0;
    display: block;
    background: var(--green100);
    border-bottom: 1px solid var(--green200);
    padding: 56px 20px 44px;
}

.bias_hero_inner { max-width: 760px; margin: 0 auto; }

.bias_kicker {
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 0.09em;
    text-transform: uppercase;
    color: var(--green700);
    margin-bottom: 14px;
}

.bias_hero h1 {
    font-size: 44px;
    line-height: 1.12;
    margin: 0 0 18px;
    color: var(--green900);
    letter-spacing: -0.02em;
}

.bias_standfirst {
    font-size: 19px;
    line-height: 1.55;
    color: var(--grey800);
    margin: 0 0 24px;
    max-width: 62ch;
}

/* The provenance strip. Deliberately near the headline: the entire value of this page to
   somebody deciding whether to cite it is that the sample is real and stated up front. */
.bias_meta {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 28px;
    padding-top: 20px;
    border-top: 1px solid var(--green200);
    font-size: 14px;
    color: var(--grey700);
}
.bias_meta b { color: var(--grey900); font-weight: 700; }

/* ---------------------------------------------------------------- layout */

.bias_wrap { max-width: 760px; margin: 0 auto; padding: 0 20px 72px; }

.bias_section { padding-top: 52px; }

/* The first section now follows the hero directly, with no KPI row between them. 52px of
   section padding on top of the hero's 44px reads as a gap rather than a join, and every pixel
   here is one the chart is pushed down by. */
.bias_section_first { padding-top: 32px; }

.bias_section > h2 {
    font-size: 28px;
    line-height: 1.2;
    color: var(--green900);
    margin: 0 0 6px;
    letter-spacing: -0.01em;
}

.bias_section_sub {
    font-size: 15px;
    color: var(--grey700);
    margin: 0 0 24px;
}

.bias_page p { font-size: 17px; line-height: 1.65; margin: 0 0 16px; max-width: 66ch; }
.bias_page li { font-size: 17px; line-height: 1.6; margin-bottom: 8px; max-width: 66ch; }

/* ---------------------------------------------------------------- pull quote */

.bias_pull {
    border-left: 4px solid var(--green600);
    padding: 4px 0 4px 20px;
    margin: 30px 0;
    font-size: 21px;
    line-height: 1.5;
    color: var(--green900);
    max-width: 62ch;
}
.bias_pull b { font-weight: 700; }

/* ---------------------------------------------------------------- figures */

.bias_fig { margin: 24px 0 8px; }

.bias_fig_title { font-size: 17px; font-weight: 700; margin-bottom: 2px; }
.bias_fig_sub   { font-size: 14px; color: var(--grey700); margin-bottom: 10px; }

.bias_legend {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 20px;
    margin-bottom: 12px;
    font-size: 14px;
    color: var(--grey800);
}
.bias_legend span { display: inline-flex; align-items: center; gap: 8px; }
.bias_swatch {
    width: 12px; height: 12px; border-radius: 50%;
    box-shadow: 0 0 0 2px #fff;
    flex: none;
}
.bias_swatch.crowd { background: var(--c-crowd); }
.bias_swatch.real  { background: var(--c-real); }

.bias_caption { font-size: 13px; color: var(--grey700); margin-top: 12px; line-height: 1.5; }

/* ---------------------------------------------------------------- dumbbell */

/* One row per club. The connector is the story — its length IS the gap — so it is the only
   thing on the row drawn in ink rather than grey, and the two ends are just its terminals. */
.bias_dumb { margin-top: 4px; }

/* Row pitch is 18px: a 16px track plus 1px of padding either side.
   It is deliberately tight. The club chart is 22 rows, and the thing this page is for is being
   screenshotted and quoted - at the old 28px pitch the figure ran past the fold on a laptop, so
   a sharer got half a chart or a chart with no axis. 22 rows now come to ~400px, and title,
   legend, plot, axis and caption together clear a 700px viewport.
   The floor on this is the mark spec, not taste: a 10px dot plus its 2px surface ring is 14px,
   which leaves exactly the 2px surface gap between vertically adjacent marks. Do not tighten
   further without shrinking the dot, and the dot cannot go below 8px. */
.bias_row {
    display: grid;
    grid-template-columns: 104px 1fr;
    align-items: center;
    gap: 12px;
    padding: 1px 0;
}

.bias_row_name {
    font-size: 13px;
    /* Unitless 1.15 rather than the inherited body value: the name's line box, not the track,
       is what sets the row's height once the track is only 16px tall. */
    line-height: 1.15;
    color: var(--grey800);
    /* Name then chip, both pushed against the track. Chip last is what puts the chips in one
       column: leading them would inherit the ragged left edge of right-aligned names. */
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 6px;
    min-width: 0;
}
/* Ellipsis lives on the text, not the flex row, or it would clip the chip instead. */
.bias_row_name span {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Club colour. A bar, where every data mark on this page is a circle - that shape difference is
   what stops it being read as part of the encoding. The inset ring is not decoration either:
   Spurs and Fulham are half white and Leeds is entirely white, so without it those chips lose
   a half, or all, of themselves into the page. */
.bias_chip {
    flex: none;
    width: 8px;
    height: 12px;
    border-radius: 2px;
    box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.18);
}
.bias_row.is_hl .bias_row_name { font-weight: 700; color: var(--grey900); }

.bias_track {
    position: relative;
    height: 16px;
}

/* Hairline, solid, one step off surface — the recessive grid. */
.bias_track::before {
    content: '';
    position: absolute;
    left: 0; right: 0; top: 50%;
    height: 1px;
    background: var(--grey200);
}

.bias_conn {
    position: absolute;
    top: 50%;
    height: 2px;
    margin-top: -1px;
    background: var(--grey400);
    border-radius: 1px;
}
.bias_row.is_hl .bias_conn { background: var(--grey600); }

.bias_dot {
    position: absolute;
    top: 50%;
    width: 10px; height: 10px;
    margin: -5px 0 0 -5px;
    border-radius: 50%;
    /* Surface ring, not a border: keeps the two ends legible where they nearly touch. */
    box-shadow: 0 0 0 2px #fff;
}
.bias_dot.crowd { background: var(--c-crowd); }
.bias_dot.real  { background: var(--c-real); }

/* Selective direct labels: only the two rows the section argues about carry numbers. */
.bias_val {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    font-size: 12px;
    font-weight: 700;
    color: var(--grey900);
    white-space: nowrap;
}

.bias_axis {
    display: grid;
    grid-template-columns: 104px 1fr;
    gap: 12px;
    margin-top: 4px;
}
.bias_axis_ticks { position: relative; height: 16px; }

/* Attribution, in the axis row's label cell. Right-aligned like the club names above it, so it
   reads as part of the chart's furniture rather than as a caption that wandered up. It has to
   stay inside the figure's own box: this chart's job is to be screenshotted, and a credit that
   only exists in the surrounding page is a credit that never travels with it. */
.bias_watermark {
    font-size: 11px;
    color: var(--grey600);
    text-align: right;
    white-space: nowrap;
    line-height: 16px;
}

/* ---------------------------------------------------------------- share */

/* Plain anchors to intent URLs. No JavaScript on this page, and no third party contacted until
   somebody actually clicks one. */
.bias_share {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px 10px;
    margin-top: 18px;
}

.bias_share_label {
    font-size: 13px;
    font-weight: 700;
    color: var(--grey800);
    margin-right: 2px;
}

.bias_share a {
    color: var(--green800);
    text-decoration: none;
    border: 1px solid var(--grey300);
    border-radius: 999px;
    /* Sized for the touch target, not for the icon. The icon is 18px; the button is 44px because
       these are the only tap targets in the middle of the page and the whole point of them is
       being pressed on a phone. Fixed width and height rather than padding, now that there is no
       text inside to give the box a size. */
    width: 44px;
    height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: none;
}

/* currentColor on the path, so the icon follows the link colour through hover and focus without
   a second rule. Height only - the widths differ (WhatsApp is 448 units wide against X's 512)
   and forcing them equal would squash one of the two. */
.bias_share a svg { height: 18px; }

.bias_share a:hover,
.bias_share a:focus {
    background: var(--green100);
    border-color: var(--green400);
}
.bias_axis_ticks span {
    position: absolute;
    top: 0;
    font-size: 12px;
    color: var(--grey600);
    transform: translateX(-50%);
}
/* The end ticks are anchored to the track's edges, so centring them hangs half the label off
   the chart - the right-hand one was rendering as "10" with the "0%" clipped away. Align them
   inwards instead; the middle ticks stay centred on their gridline. */
.bias_axis_ticks span:first-child { transform: translateX(0); }
.bias_axis_ticks span:last-child  { transform: translateX(-100%); }

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

.bias_scroll { overflow-x: auto; }
.bias_scroll svg { min-width: 520px; display: block; }

/* ---------------------------------------------------------------- table view */

.bias_details {
    margin-top: 18px;
    border-top: 1px solid var(--grey200);
    padding-top: 12px;
}
.bias_details summary {
    font-size: 14px;
    color: var(--green700);
    cursor: pointer;
    font-weight: 600;
}
.bias_data {
    width: 100%;
    border-collapse: collapse;
    margin-top: 14px;
    font-size: 14px;
}
.bias_data th, .bias_data td {
    padding: 6px 10px;
    text-align: right;
    border-bottom: 1px solid var(--grey200);
}
.bias_data th:first-child, .bias_data td:first-child { text-align: left; }
.bias_data thead th { border-bottom: 2px solid var(--grey300); white-space: nowrap; }

/* ---------------------------------------------------------------- closing */

.bias_cta_band {
    background: var(--green100);
    border-top: 1px solid var(--green200);
    padding: 48px 20px 56px;
    text-align: center;
}
.bias_cta_band h2 { font-size: 26px; color: var(--green900); margin: 0 0 12px; }
.bias_cta_band p { margin: 0 auto 22px; max-width: 52ch; }

/* Two columns only when the reactions shot is actually rendered. With the flag off the band has
   a single child and has to look exactly as it did before, so the flex lives on the modifier
   rather than on .bias_cta_inner itself. */
.bias_cta_inner.has_shot {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 44px;
    max-width: 860px;
    margin: 0 auto;
    text-align: left;
}
.has_shot .bias_cta_copy p { margin: 0 0 22px; }
.bias_cta_shot { margin: 0; flex: 0 0 232px; }
.bias_cta_shot img {
    display: block;
    width: 100%;
    height: auto;
    border-radius: 14px;
    box-shadow: 0 6px 22px rgba(0, 0, 0, .18);
}
.bias_cta {
    display: inline-block;
    padding: 14px 28px;
    background: var(--green700);
    color: #fff;
    font-weight: 700;
    font-size: 16px;
    text-decoration: none;
    border-radius: 4px;
}
.bias_cta:hover { background: var(--green800); }

/* Stacks at 760px, not the 600px the rest of the page uses: the copy column wants ~52ch and the
   shot is a fixed 232px, and the pair gets cramped well before a phone width. Stacked, the band
   goes back to the centred layout it has when the flag is off. */
@media screen and (max-width: 760px) {
    .bias_cta_inner.has_shot { display: block; text-align: center; }
    .has_shot .bias_cta_copy p { margin: 0 auto 22px; }
    .bias_cta_shot { margin: 32px auto 0; max-width: 208px; }
}

.bias_faq_q { font-weight: 700; margin-bottom: 4px; }
.bias_faq_a { color: var(--grey800); margin-bottom: 22px; }

@media screen and (max-width: 600px) {
    .bias_hero { padding: 36px 16px 32px; }
    .bias_hero h1 { font-size: 32px; }
    .bias_standfirst { font-size: 17px; }
    .bias_wrap { padding: 0 16px 56px; }
    .bias_section > h2 { font-size: 23px; }
    .bias_pull { font-size: 18px; }
    /* 78px with 13px type truncated "Crystal Pala…" and "Southampt…", and a chart whose row
       labels are guesses is worse than one with a narrower track. 96px at 12px fits every name
       in the set, and still leaves ~250px of track on a 390px screen. */
    /* 104px, not 96px: the chip and its gap take 14px out of the label, and at 96px that put
       "Crystal Palace" back into the ellipsis it was widened to escape. */
    .bias_row, .bias_axis { grid-template-columns: 104px 1fr; gap: 8px; }
    .bias_row_name { font-size: 12px; }
}