/* RESET */
body {
    padding: 0;
    margin: 0;
    overflow-x: hidden;
    /* min-width: 20em; */
    min-width: 320px;
    max-width: none;
}

h1,h2,h3,h4,h5,h6,p {
    margin-top: 0;
    margin-bottom: 0;
}
* {
    box-sizing: border-box;
}
/* END RESET */

.info_wrapper {
    /* max-width: 1220px; */
    margin: 0px auto;
    padding-right: 1rem;
    padding-left: 1rem;
    font-family: "Montserrat", sans-serif;
    max-width: 1100px;

    /* Was a hardcoded 92px, which did not match the bar it was clearing (48px + the notch
       inset) and left a strip of page background showing under it. Derived from the same
       variable the bar sizes itself with, so it also tracks the safe-area inset on a notched
       phone rather than guessing at it. */
    margin-top: calc(var(--title-bar-h) + 12px);

    /* Clears the fixed mobile tab bar. Used to be a <br style='margin-bottom:200px'> in the
       markup, which pushed a 200px gap onto desktop too, where there is no tab bar. */
    padding-bottom: 120px;
}

.InfoHeader {
    color: white;
    background-color: #5F5D53;
    overflow: hidden;
    padding: 24px 32px;
}
.InfoHeader h1 {
    font-size: 32px;
    line-height: 1.2;
}
.InfoHeaderSub {
    margin-top: 12px;
    max-width: 46em;
    font-size: 16px;
    line-height: 1.6;
    color: var(--grey200);
}

.InfoSheetContainer {
    background-color: var(--grey900);
    width: 100%;
    padding: 20px;
}

/*————————————————————————————*/
/* Layout: TOC beside the content on desktop, above it on mobile */
/*————————————————————————————*/
.rules_layout {
    display: grid;
    grid-template-columns: 220px minmax(0, 1fr);
    gap: 24px;
    align-items: start;
}

.rules_toc {
    background-color: white;
    padding: 20px;

    /* Sticks below the fixed title bar as the page scrolls. */
    position: sticky;
    top: calc(var(--title-bar-h) + 20px);
}
.rules_toc_title {
    font-size: 13px;
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    /* grey700: grey600 is 3.5:1 at this size. Same change as .rules_eg and .rules_updated. */
    color: var(--grey700);
    margin-bottom: 12px;
}
.rules_toc ul {
    list-style: none;
    margin: 0;
    padding: 0;
}
.rules_toc li + li {
    margin-top: 2px;
}
.rules_toc a {
    display: block;
    padding: 7px 10px;
    color: var(--grey800);
    text-decoration: none;
    font-size: 15px;
    font-weight: 600;
    border-left: 3px solid transparent;
}
.rules_toc a:hover {
    background-color: var(--grey100);
    border-left-color: var(--teal500);
    color: var(--grey900);
}

.rules_main {
    min-width: 0;
}

/* Anchored sections must not land under the fixed title bar when jumped to. */
.rules_main section[id] {
    scroll-margin-top: calc(var(--title-bar-h) + 16px);
}

/*————————————————————————————*/
/* Sheets */
/*————————————————————————————*/
.InfoSheet {
    background-color: white;
    color: var(--grey900);
    padding: 12px 24px;
    font-weight: 500;
    margin: 24px 0px;
}
.InfoSheet:first-child {
    margin-top: 0px;
}

.InfoSheetHeader {
    padding-top: 16px;
    padding-left: 12px;
    font-size: 26px;
    font-weight: 900;
}
.InfoBody {
    padding: 16px;
    padding-left: 32px;
    background-color: white;
}

.InfoBody h3 {
    font-size: 20px;
    margin-bottom: 12px;
    padding-top: 20px;
    line-height: 1.35;
}
.InfoBody>h3>i,
.InfoBody h3>i {
    margin-right: 12px;
}

.InfoBody p {
    margin-bottom: 16px;
    color: var(--grey800);
    font-size: 16px;
    line-height: 1.65;
}

.InfoBody ul,
.InfoBody ol {
    margin: 0 0 16px 0;
    padding-left: 20px;
    color: var(--grey800);
    font-size: 16px;
    line-height: 1.65;
}
.InfoBody li + li {
    margin-top: 8px;
}

.InfoBody a {
    color: var(--teal700);
    font-weight: 600;
}

/*————————————————————————————*/
/* Scoring table */
/*————————————————————————————*/
/* Wrapper scrolls rather than the page, so a narrow screen never scrolls the whole body. */
.rules_table_wrap {
    overflow-x: auto;
    margin-bottom: 20px;
}
.rules_table {
    width: 100%;
    border-collapse: collapse;
    font-size: 16px;
    color: var(--grey800);
}
.rules_table th {
    text-align: left;
    font-size: 13px;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    /* grey700, as everywhere else on this page: grey600 is 3.5:1 at 13px. */
    color: var(--grey700);
    padding: 0 12px 8px 12px;
    border-bottom: 2px solid var(--grey200);
}
.rules_table th:last-child,
.rules_table .rules_pts {
    text-align: right;
    white-space: nowrap;
}
/* The scoring tables above are label-then-number, so the right-aligned last column is what
   they want. The comparison table on /bbc-predictor-alternative is three columns of prose,
   where a right-aligned last column reads as a mistake. */
.cmp_table th:last-child {
    text-align: left;
}
.cmp_table td {
    width: 33%;
}
.rules_table td {
    padding: 14px 12px;
    border-bottom: 1px solid var(--grey200);
    vertical-align: middle;
    line-height: 1.5;
}
.rules_table tr:last-child td {
    border-bottom: none;
}
.rules_table td > i {
    margin-right: 10px;
}
.rules_table .rules_pts {
    font-size: 26px;
    font-weight: 900;
    color: var(--grey900);
}
.rules_eg {
    display: inline-block;
    margin-top: 2px;
    font-size: 14px;
    font-weight: 500;
    /* grey700: these worked examples sit beside the points and are 3.5:1 at grey600. */
    color: var(--grey700);
}

/* The ribbon ladder's right-hand column. Not .rules_pts: that is sized for a two-digit
   number, and "Elite Expert" at 26px/900 wraps in the same box. */
.rules_ribbon {
    text-align: right;
    white-space: nowrap;
    font-size: 17px;
    font-weight: 700;
    color: var(--grey900);
}

/*————————————————————————————*/
/* Screenshots */
/*————————————————————————————*/
.rules_figure {
    margin: 0 0 20px 0;
}
/* The source is a 2x shot of a 390px-wide phone. 440 rather than 390 is a deliberate 12%
   over its CSS size: it is still being drawn from 1.77x the pixels, so nothing softens, and
   the rows read a size up on a desktop column. Narrower screens scale it down, which costs
   nothing. */
/* The <picture> around the shot is a format switch, not a layout box - display:contents drops
   it out of the box tree so the img is still laid out as a direct child of the figure. */
.rules_figure picture {
    display: contents;
}
.rules_figure img {
    display: block;
    width: 100%;
    max-width: 440px;
    height: auto;
    border-radius: 8px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.18);
}
.rules_figure figcaption {
    max-width: 440px;
    margin-top: 10px;
    font-size: 14px;
    font-weight: 500;
    line-height: 1.5;
    /* grey700: 3.5:1 at 14px otherwise. */
    color: var(--grey700);
}

/*————————————————————————————*/
/* Callout */
/*————————————————————————————*/
.rules_note {
    display: flex;
    gap: 12px;
    background-color: var(--grey100);
    border-left: 4px solid var(--teal500);
    padding: 14px 16px;
    font-size: 15px !important;
    line-height: 1.6;
}
.rules_note > i {
    color: var(--teal600);
    margin-top: 3px;
    flex-shrink: 0;
}

.rules_code {
    font-family: "Roboto Mono", "Courier New", monospace;
    background-color: var(--grey100);
    border: 1px solid var(--grey300);
    border-radius: 3px;
    padding: 2px 6px;
    font-size: 15px;
    white-space: nowrap;
}

/*————————————————————————————*/
/* Calls to action */
/*————————————————————————————*/
.rules_cta {
    display: inline-block;
    margin-top: 20px;
    padding: 14px 28px;
    /* green700, not green600: white on green600 is 4.08:1, and this is the button both
       public pages are built around. green700 takes it to 5.4:1. */
    background-color: var(--green700);
    color: white;
    font-family: "Montserrat", sans-serif;
    font-size: 16px;
    font-weight: 700;
    text-decoration: none;
    border-radius: 4px;
}
.rules_cta:hover {
    background-color: var(--green800);
}
.rules_cta_inline {
    margin-top: 8px;
}

.rules_closing {
    text-align: center;
}
.rules_closing h2 {
    font-size: 26px;
    font-weight: 900;
    margin-bottom: 12px;
}
.rules_closing .InfoBody {
    padding: 24px 16px 32px 16px;
}
.rules_closing p {
    margin-left: auto;
    margin-right: auto;
    max-width: 34em;
}

.rules_updated {
    margin: 0;
    padding: 4px;
    /* Lighter, not darker: unlike everything else on this page this sits outside .InfoSheet,
       directly on .InfoSheetContainer's grey900. grey500 was 2.9:1 against it, and the grey700
       the rest of the page moved to would be 1.8:1. grey300 is 5.2:1. It carries a paragraph
       of trademark small print on /bbc-predictor-alternative, not just a date, so it has to be
       readable rather than merely present. */
    color: var(--grey300);
    font-size: 13px;
    text-align: right;
}

/*————————————————————————————*/
/* Mobile */
/*————————————————————————————*/
@media screen and (max-width: 900px) {
    .rules_layout {
        grid-template-columns: minmax(0, 1fr);
    }
    /* Not sticky once it is a block at the top of the page - it would cover the content. */
    .rules_toc {
        position: static;
    }
    .rules_toc ul {
        display: flex;
        flex-wrap: wrap;
        gap: 6px;
    }
    .rules_toc a {
        border-left: none;
        border: 1px solid var(--grey300);
        border-radius: 999px;
        padding: 6px 14px;
        font-size: 14px;
    }
    .rules_toc a:hover {
        border-color: var(--teal500);
    }
}

@media screen and (max-width: 600px) {
    .info_wrapper {
        padding-left: 0;
        padding-right: 0;
    }
    .InfoHeader {
        padding: 20px;
    }
    .InfoHeader h1 {
        font-size: 26px;
    }
    .InfoSheetContainer {
        padding: 12px;
    }
    .InfoSheet {
        padding: 8px 12px;
        margin: 12px 0;
    }
    .InfoSheetHeader {
        font-size: 22px;
        padding-left: 4px;
    }
    .InfoBody {
        padding: 12px 4px;
    }
    .rules_table .rules_pts {
        font-size: 22px;
    }
    .rules_cta {
        display: block;
        text-align: center;
    }
}