/* /rules: the modal's rules body (game-shell.css) laid out as a page, with a
   contents list -- a jump menu in the sticky header on the phone, as in the
   modal, and a sticky column on desktop. */

.rules {
    /* The sticky site header's height, so the page header sticks under it. */
    --rules-header-h: 3.25rem;
    /* Clears the header, so a jumped-to heading lands in view. */
    --rules-header-clear: 4.5rem;
}

.rules-jump {
    position: relative;
}

.rules-jump-head {
    margin: 0;
    padding: 0;
    background: none;
    cursor: pointer;
    font-family: var(--font-display);
    font-size: var(--fs-1);
    color: var(--text-1);
}

/* Open, the list drops over the text rather than pushing it down: a stuck bar
   that grew would hide the page. */
.rules-jump .rules-contents {
    position: absolute;
    top: calc(100% + var(--size-2));
    right: 0;
    z-index: 1;
    width: max-content;
    max-width: min(20rem, 70vw);
    max-height: 60vh;
    overflow-y: auto;
    overscroll-behavior: contain;
    padding: var(--size-3) var(--size-4);
    background: var(--surface-2);
    border: var(--rule-1);
    box-shadow: var(--bevel);
}

.rules-jump--modal {
    margin-left: auto;
}

/* On the phone the page header is the modal's header: a bar that sticks under
   the site header, bled to the screen's edges. */
.rules > .page-header {
    position: sticky;
    top: var(--rules-header-h);
    z-index: 5;
    margin: calc(-1 * var(--size-5)) calc(-1 * var(--size-4)) 0;
    padding: var(--size-3) var(--size-4);
    background: var(--surface-2);
    border-bottom: var(--rule-1);
}

.rules-toc {
    display: none;
}

.rules-contents {
    margin: 0;
    padding: 0;
    list-style: none;
    display: grid;
    gap: var(--size-2);
}

.rules-contents a {
    color: var(--text-2);
    text-decoration: none;
}

@media (hover: hover) {
    .rules-contents a:hover {
        color: var(--link);
    }
}

.rules-body .game-info-overview {
    margin: 0;
}

.rules-body .game-info-section {
    margin-top: var(--size-6);
    /* The phone's page header sticks under the site header too. */
    scroll-margin-top: calc(var(--rules-header-clear) + 4.5rem);
}

.rules-body > .game-info-section:first-child {
    margin-top: 0;
}

.rules-body .rules-changes {
    margin-bottom: var(--size-6);
    padding-bottom: var(--size-5);
    border-bottom: var(--rule-1);
}

.rules-changes-date {
    margin-left: var(--size-2);
    font-family: var(--font-body);
    font-style: italic;
    font-size: var(--fs-0);
    color: var(--text-3);
}

/* On a page a section is a chapter, so it takes the display face the modal's
   compact heading does without. */
.rules-body .game-info-section-head {
    font-family: var(--font-display);
    font-size: var(--fs-2);
}

@media (min-width: 900px) {
    .rules > .page-header {
        position: static;
        margin: 0;
        padding: 0;
        background: none;
        border-bottom: none;
    }

    .rules-jump--page {
        display: none;
    }

    .rules-body .game-info-section {
        scroll-margin-top: var(--rules-header-clear);
    }

    .rules-layout {
        display: grid;
        grid-template-columns: 13rem minmax(0, 46rem);
        gap: var(--size-6);
        align-items: start;
    }

    .rules-toc {
        display: block;
        position: sticky;
        top: var(--rules-header-clear);
    }
}

/* The new-rules banner on home and in the lobby. */
.rules-news {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: var(--size-1) var(--size-2);
    padding: var(--size-3) var(--size-4);
    border-left: 3px solid var(--color-accent);
    color: var(--text-1);
    text-decoration: none;
}

.rules-news-link {
    color: var(--color-accent-text);
    font-style: italic;
}

@media (hover: hover) {
    .rules-news:hover .rules-news-link {
        text-decoration: underline;
    }
}