/*
Multi-page content: Section List page and its sections (the same page settings as Grav Helios Open Reader) - hibbittsdesign.org
Uses Quark's own visual language: blog-style cards (no border, soft shadow), Quark's greys for muted text and
dividers, Spectre components (card, label, bar, btn), and link-style hover feedback. Dark Mode colours are in theme-dark.css.
*/

/* Small label above a section's title, for example "Unit 2" (styled like Quark's other small uppercase labels);
   smaller on the section cards */
.reader-section-label {
    color: #667189;
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    margin: 0 0 0.2rem;
}

.section-card .reader-section-label {
    font-size: 0.7rem;
}

/* Cover image beside the subtitle, author(s), edition and license */
.reader-header {
    display: flex;
    align-items: flex-start;
    gap: 1.2rem;
    padding-bottom: 1.2rem;
    margin-bottom: 1.2rem;
    border-bottom: 0.05rem solid #e7e9ed;
}

.reader-cover {
    flex: 0 0 auto;
    width: 10rem;
    border-radius: 0.1rem;
    box-shadow: 0 10px 45px -9px rgba(0, 0, 0, 0.2);
}

.reader-details p {
    margin: 0 0 0.3rem;
}

/* the subtitle in a light weight, as under the heading of Quark's hero */
.reader-subtitle {
    color: #667189;
    font-size: 1.1rem;
    font-weight: 300;
}

.reader-edition {
    color: #667189;
    font-size: 0.8rem;
}

/* The license uses Spectre's standard rounded label */
.reader-license.label {
    font-size: 0.7rem;
}

/* the Start button at the end of the details (Section List pages) */
.reader-details .section-list-start {
    margin: 0.6rem 0 0;
}

/* the Start Reading link after the section cards */
.section-list-start-below {
    margin: 1.2rem 0 0;
    font-weight: 600;
}

.section-list-start-below .fa {
    margin-left: 0.2rem;
    font-size: 0.85em;
}

/* On phones, the cover image goes above the details */
@media (max-width: 600px) {
    .reader-header {
        flex-direction: column;
    }
}

/* Section List page with a small cover: the cover always has the same 4:3 shape (cropped from the centre to fill it),
   with the title at the top of the details beside it. On phones the cover is full width, above the details. */
.section-list-page .reader-cover {
    width: 14.5rem;
    aspect-ratio: 4 / 3;
    object-fit: cover;
}

/* A portrait cover (such as a book cover) is shown whole, at its own shape and a narrower width, also on phones
   (both class names are needed so this also replaces the full-width cover on phones). An unusually tall image
   is kept to 15rem high, and narrows to keep its shape. */
.section-list-page .reader-cover.reader-cover-portrait {
    width: auto;
    max-width: 9rem;
    max-height: 15rem;
    aspect-ratio: auto;
}

.reader-details .sections-page-title-template {
    margin-top: 0;
}

/* on section pages, more space below the title, as in Quark 2 Open Publishing */
.reader-top-bar ~ .sections-page-title-template {
    margin-bottom: 1.2rem;
}

@media (max-width: 600px) {
    .section-list-page .reader-cover {
        width: 100%;
    }
}

/* Reading progress (Spectre bar), above the Previous/Next navigation: compact and centred, as in Helios Open Reader */
.reader-progress {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin: 1.2rem 0 0.4rem;
}

.reader-progress .bar {
    width: 80%;
    max-width: 24rem;
    height: 0.15rem;
    background: #dadee4;
    border-radius: 5rem;
    overflow: hidden;
}

.reader-progress .bar .bar-item {
    border-radius: 5rem;
}

.reader-progress-text {
    color: #667189;
    font-size: 0.7rem;
    margin: 0.3rem 0 0;
    text-align: center;
}

/* OER attribution and license, below the Previous/Next navigation (no line above, so the tiles aren't boxed in) */
.reader-attribution {
    color: #667189;
    margin-top: 1.6rem;
    font-size: 0.75rem;
    text-align: center;
}

/* after the page links, the attribution sits close below them, as one block (as in Grav Helios Open Reader) */
.page-extras + .reader-attribution {
    margin-top: 1rem;
}

.reader-attribution p {
    margin: 0 0 0.3rem;
}

/* its links stay muted, like the text, so the line reads as fine print (underlined, so they still look like links) */
.reader-attribution a {
    color: inherit;
    text-decoration: underline;
}

.reader-attribution a:hover,
.reader-attribution a:focus {
    color: #3b4351;
}

/* Section List page: a card for each section */
.section-cards {
    list-style: none;
    margin: 0 -0.4rem 1.2rem;
    padding: 0;
}

.section-cards > .column {
    margin: 0 0 1.2rem;
    padding: 0 0.4rem;
}

/* Section cards and Previous/Next tiles look like the blog's post cards: no border and a soft shadow.
   On hover the shadow deepens slightly and the title is underlined, like a link. */
.section-card,
.reader-nav-tile {
    border: 0;
    border-radius: 0.1rem;
    box-shadow: 0 10px 45px -9px rgba(0, 0, 0, 0.1);
    transition: box-shadow 0.2s;
}

.section-card:hover,
.reader-nav-tile:hover {
    box-shadow: 0 12px 45px -9px rgba(0, 0, 0, 0.2);
}

.section-card {
    position: relative;
    height: 100%;
}

.section-card .card-title {
    margin: 0;
}

/* The title link covers the whole card, so the card can be clicked anywhere */
.section-card-link::after {
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
}

.section-card:hover .section-card-link {
    text-decoration: underline;
}

/* A visible focus ring for keyboard users (Quark removes the focus outline from links) */
.section-card:focus-within {
    outline: 0.1rem solid #3085ee;
    outline-offset: 0.1rem;
}

.section-card .card-body {
    padding-top: 0;
}

/* A card with just a label and title: a little more space above and below the title, so it reads as a card
   rather than a thin row (both class names are needed to replace Spectre's spacing for a card's last part) */
.section-card.section-card-title-only .card-header {
    padding-top: 1rem;
    padding-bottom: 1rem;
}

/* Card Image Layout "side" (as in Grav Helios Open Reader): on wider screens the card becomes two columns, with its
   image in a fixed-width column on the left (narrower with 2 cards per row) and the label, title and description on
   the right, with an arrow after the title. On phones the image goes on top, at a fixed height. */
@media (min-width: 600px) {
    .section-card-image-side {
        display: grid;
        grid-template-columns: 10rem 1fr;
        grid-template-rows: auto 1fr;
    }

    .section-cards > .col-6 .section-card-image-side {
        grid-template-columns: 7.5rem 1fr;
    }

    .section-card-image-side .card-image {
        grid-row: 1 / 3;
        position: relative;
        min-height: 7.5rem;
    }

    /* the image is cropped to fill its column, however tall the text beside it is */
    .section-card-image-side .card-image img {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        aspect-ratio: auto;
        object-fit: cover;
    }

    .section-card-image-side .card-header {
        padding: 1.2rem 1.2rem 0;
    }

    .section-card-image-side .card-body {
        padding: 0.6rem 1.2rem 1.2rem;
    }
}

@media (max-width: 599px) {
    .section-card-image-side .card-image img {
        height: 8rem;
        aspect-ratio: auto;
        object-fit: cover;
    }
}

/* the title and its arrow on one line, the arrow at the far right (a long title wraps beside it) */
.section-card .card-title {
    display: flex;
    align-items: baseline;
    gap: 0.75rem;
}

.section-card-arrow {
    flex-shrink: 0; /* keeps its size beside a long title */
    margin-left: auto;
    font-size: 0.8em;
    opacity: 0.5;
    transition: opacity 0.15s;
    pointer-events: none; /* clicks pass through to the card's link, so the arrow opens the section too */
}

.section-card:hover .section-card-arrow {
    opacity: 1;
}

/* Section badges (Badge Label and Badge Color settings, as in Grav Helios Open Reader): a small status tag such as
   "New" or "Draft" beside the section label on a card, using Spectre's rounded label in a light tint of its colour */
.section-card-label-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.4rem;
    margin: 0 0 0.2rem;
}

.section-card-label-row .reader-section-label {
    margin: 0;
}

.section-badge.label {
    padding: 0.05rem 0.4rem;
    font-size: 0.6rem;
    font-weight: 600;
    color: #1565c0;
    background: #e1edfd;
}

.section-badge-blue.label { color: #1565c0; background: #e1edfd; }
.section-badge-green.label { color: #1b6e2f; background: #e3f4e6; }
.section-badge-yellow.label { color: #7a5a00; background: #fbf1cc; }
.section-badge-red.label { color: #b3261e; background: #fbe4e2; }
.section-badge-purple.label { color: #6a2ea0; background: #efe4f8; }

.section-badge-plain.label {
    color: #667189;
    background: transparent;
    box-shadow: inset 0 0 0 0.05rem #dadee4;
}

/* Description Line Limit (as in Open Reader): card descriptions cut to 2 or 3 lines, ending in "..." */
.section-cards-lines-2 .section-card-description,
.section-cards-lines-3 .section-card-description {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.section-cards-lines-2 .section-card-description {
    -webkit-line-clamp: 2;
    line-clamp: 2;
}

.section-cards-lines-3 .section-card-description {
    -webkit-line-clamp: 3;
    line-clamp: 3;
}

/* Up to three lines of description */
.section-card-description {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
    overflow: hidden;
    margin: 0;
}

/* the section's Author(s), below its description */
.section-card-author {
    color: #667189;
    font-size: 0.7rem;
    margin: 0;
}

.section-card-description + .section-card-author {
    margin-top: 0.4rem;
}

/* Previous/Next tiles (theme option), grouped with the reading progress below the page text */
.reader-nav-block {
    margin-top: 1.6rem;
}

.reader-nav-block .reader-progress {
    margin: 0.8rem 0 0;
}

/* A line between the reading progress (when shown) and the tiles */
.reader-prev-next {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.8rem;
    border-top: 0.05rem solid #e7e9ed;
    margin: 1.4rem 0 0;
    padding-top: 1.6rem;
}

/* Without the reading progress, the tiles come first, so they need no extra space above the line */
.reader-nav-block > .reader-prev-next:first-child {
    margin-top: 0;
}

.reader-nav-tile {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    padding: 0.6rem 0.8rem;
    background: #fff;
    text-decoration: none;
}

.reader-nav-tile:hover,
.reader-nav-tile:focus {
    text-decoration: none;
}

.reader-nav-tile:hover .reader-nav-title {
    text-decoration: underline;
}

/* A visible focus ring for keyboard users (Quark removes the focus outline from links, so this needs !important) */
.reader-prev-next .reader-nav-tile:focus-visible {
    outline: 0.1rem solid #3085ee !important;
    outline-offset: 0.1rem;
}

.reader-nav-next {
    justify-content: flex-end;
    text-align: right;
}

/* The chevron is grey, and turns link blue on hover */
.reader-nav-tile .fa {
    flex: 0 0 auto;
    color: #acb3c2;
    transition: color 0.2s;
}

.reader-nav-tile:hover .fa,
.reader-nav-tile:focus .fa {
    color: #3085ee;
}

.reader-nav-text {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

/* Small "Previous" or "Next" above the page title */
.reader-nav-label {
    color: #667189;
    font-size: 0.65rem;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

/* Long titles wrap rather than running off the tile */
.reader-nav-title {
    font-weight: 600;
    overflow-wrap: anywhere;
}

/* On phones, the tiles stack, with Next first */
@media (max-width: 600px) {
    .reader-prev-next {
        grid-template-columns: 1fr;
    }

    .reader-nav-next {
        order: -1;
    }

    .reader-nav-empty {
        display: none;
    }
}

/* Link back to the Section List page, above a section's title (a plain link, like the rest of the theme), at the size of
   the page's text, so these links at the top of the page are easy to read and tap */
.reader-back-link,
.reader-sections-link {
    font-size: 0.85rem;
    margin: 0 0 0.8rem;
}

/* The back link, with the compact Previous/Next links on the right (Prev/Next Page Controls Position: Top and bottom) */
.reader-top-bar {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: baseline;
    gap: 0 1.2rem;
}

.reader-prev-next-top {
    font-size: 0.85rem;
    margin: 0 0 0.8rem;
    white-space: nowrap;
}

/* the icons smaller than the text, raised slightly so they're centred on it (at their smaller size they would
   otherwise sit low, on the text's baseline) */
.reader-prev-next-top .fa,
.reader-sections-link .fa {
    font-size: 0.65rem;
    vertical-align: 0.25em;
}

.reader-back-link a,
.reader-sections-link a,
.reader-prev-next-top a {
    display: inline-block;
    padding: 0.2rem 0; /* a little taller, for easier tapping */
}

.reader-prev-next-top-divider {
    color: #acb3c2;
    margin: 0 0.4rem;
}

/* the Sections link is only needed when the side list sits below the page (phones and narrow windows) */
@media (min-width: 841px) {
    .reader-sections-link {
        display: none;
    }

    /* the side list takes the room left beside the page (rather than a fixed quarter of the width, which left empty
       space on its right), up to 18rem wide, so longer page titles wrap less */
    #sections-nav {
        flex: 1 1 0;
        width: auto;
        min-width: 0;
        max-width: 18rem;
        margin-left: auto;
    }

    /* the side list stays in view below the header while reading a long page; when the list of sections is taller
       than the window, it scrolls on its own */
    #sections-nav {
        position: sticky;
        top: 5rem;
        align-self: flex-start;
        display: flex;
        flex-direction: column;
        max-height: calc(100vh - 6rem);
    }

    #sections-nav > ul.nav {
        min-height: 0;
        overflow-y: auto;
        padding-bottom: 0.1rem; /* room for rounding, so a list that fits doesn't show a scroll bar */
    }
}

/* Section pages: comfortable reading, as in a book - a line length of at most about 80 characters of text
   (centred when the page is embedded, without its side list), and the page's text a little larger */
#sections-content {
    max-width: 34rem;
}

#sections-content.col-12 {
    margin-left: auto;
    margin-right: auto;
}

.reader-content p,
.reader-content li,
.reader-content dd,
.reader-content blockquote {
    font-size: 0.85rem;
    line-height: 1.6;
}

/* the section's title is the largest heading on the page, as in a book's chapter title,
   and the headings in the page's text a step below it */
#sections-content .sections-page-title-template {
    font-size: 1.6rem;
}

.reader-content h2 {
    font-size: 1.3rem;
}

.reader-content h3 {
    font-size: 1.1rem;
}

.reader-content h4 {
    font-size: 0.95rem;
}

/* wide tables scroll sideways inside the text column (js/reader.js puts each table in this box) */
.reader-table-scroll {
    overflow-x: auto;
    margin-bottom: 1.2rem;
}

.reader-table-scroll table {
    margin-bottom: 0;
}

/* footnotes (with Markdown Extra) as smaller, muted notes below the text */
.reader-content .footnotes p,
.reader-content .footnotes li {
    font-size: 0.7rem;
    color: #667189;
}

/* Parts: a heading above each group of section cards, in the theme's heading style with its thin divider line.
   Headings in the text below the cards (after === in the Section List page's text) look the same. */
.reader-part-heading,
.section-list-below h2,
.section-list-below h3,
.section-list-below h4 {
    font-size: 1rem;
    padding-bottom: 0.4rem;
    margin: 1.6rem 0 1.2rem;
    border-bottom: 0.05rem solid #e7e9ed;
}

/* part headings (and h2 below the cards) a step larger than the card titles, so the groups stand out */
.reader-part-heading,
.section-list-below h2 {
    font-size: 1.2rem;
}

/* Parts: a small label above each group of sections in the side list, styled like the section labels ("Unit 2") */
#sections-nav .reader-part-label {
    color: #667189;
    font-size: 0.7rem;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    list-style: none;
    margin: 0.8rem 0 0.2rem;
    padding-left: 0.4rem; /* lined up with the side list's items */
}

#sections-nav .reader-part-label:first-child {
    margin-top: 0;
}

.reader-back-link .fa {
    font-size: 0.65rem;
    margin-right: 0.15rem;
    vertical-align: 0.25em; /* centred on the text, as above */
}

/* The row above the section cards: the "Continue reading" bar on the left and the guide's search box on the right
   (stacked and full width on phones). The row is hidden when it has nothing to show. */
.section-list-actions {
    display: flex;
    align-items: center;
    gap: 0.8rem;
    margin: 1.2rem 0;
}

/* hide the row when everything in it is hidden (:has() checks the row's contents) */
.section-list-actions:not(:has(> :not([hidden]))) {
    display: none;
}

.section-list-actions .reader-search {
    flex: 0 1 16rem;
    margin-left: auto; /* on the right, the same side as the search box on section pages */
}

/* With no "Continue reading" bar, the search box moves to the left
   ([hidden] matches the hidden bar; + means the element right after it) */
.section-list-actions .reader-resume[hidden] + .reader-search,
.section-list-actions > .reader-search:first-child {
    margin-left: 0;
}

@media (max-width: 600px) {
    .section-list-actions {
        flex-direction: column;
        align-items: stretch;
    }

    .section-list-actions .reader-search {
        flex-basis: auto;
        margin-left: 0;
    }
}

/* Keep My Place: the "Continue reading" bar, as in Helios Open Reader. It uses Spectre's light tint of Quark's
   blue (as on secondary labels), the height of the search box beside it, and a round close button like
   Spectre's clear button. The icon, title and focus ring use a darker blue than Quark's, and the close button a
   darker grey, for enough contrast on the tint. */
.reader-resume {
    display: flex;
    align-items: center;
    flex: 1;
    min-width: 0;
    gap: 0.4rem;
    min-height: 1.8rem;
    padding: 0.2rem 0.3rem 0.2rem 0.6rem;
    background: #e1edfd;
    border-radius: 0.1rem;
}

.reader-resume[hidden] {
    display: none;
}

.reader-resume > .fa {
    color: #1565c0;
    flex: 0 0 auto;
}

.reader-resume-link {
    flex: 1;
    min-width: 0;
    color: inherit;
}

.reader-resume-title {
    color: #1565c0;
    font-weight: 600;
}

.reader-resume-link:hover,
.reader-resume-link:focus {
    color: inherit;
    text-decoration: none;
}

.reader-resume-link:hover .reader-resume-title {
    text-decoration: underline;
}

.reader-resume-dismiss {
    flex: 0 0 auto;
    width: 1.4rem;
    height: 1.4rem;
    margin: 0;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: transparent;
    color: inherit;
    font-size: 1rem;
    line-height: 1;
    opacity: 0.8;
    cursor: pointer;
    transition: background 0.2s, opacity 0.2s;
}

.reader-resume-dismiss:hover,
.reader-resume-dismiss:focus {
    background: rgba(255, 255, 255, 0.6);
    opacity: 1;
}

.reader-resume-dismiss:focus-visible {
    outline: 2px solid #1565c0;
    outline-offset: 1px;
}

#sections-nav .reader-search {
    margin-bottom: 0.8rem;
}

.reader-search form {
    margin: 0;
}

/* Large cover (Cover Image Layout = Large): the full width of the content area, at the top,
   as in Helios Open Reader. Only very tall images are trimmed (to 36rem high, centred), so the page text stays in view. */
.reader-cover-large {
    display: block;
    width: 100%;
    max-height: 36rem;
    object-fit: cover;
    border-radius: 0.1rem;
    box-shadow: 0 10px 45px -9px rgba(0, 0, 0, 0.2);
    margin-bottom: 1.2rem;
}

/* A portrait cover (such as a book cover): shown whole, at its own width up to the full width and at most
   36rem high, instead of trimmed to fill the width */
.reader-cover-large-portrait {
    width: auto;
    max-width: 100%;
    height: auto;
}

/* The optional TNTSearch plugin's search box, sized like the theme's own search box (TNTSearch makes its field taller) */
.reader-search .tntsearch-form .form-input {
    height: 1.8rem;
    padding-left: 0.4rem;
}

.reader-search #tntsearch-wrapper {
    margin-bottom: 0;
}

.reader-search .tntsearch-clear {
    font-size: 1.4rem;
    line-height: 1.8rem;
    padding: 0 0.6rem;
}

/* Images in a guide page's text are no taller than a little over half the screen, so an image and the text around
   it fit on screen together - for reading, and when presenting by screen sharing. A shortened image keeps its shape,
   and an image on its own line (".reader-content p > img:only-child") is centred */
.reader-content img {
    max-height: 55vh;
    width: auto;
    max-width: 100%;
}

.reader-content p > img:only-child {
    display: block;
    margin-left: auto;
    margin-right: auto;
}

/* An image with a caption (HTML <figure> and <figcaption>, as content from the Pressbooks Converter uses), the same as in
   Grav Helios Open Reader: the figure is centred, and its caption sits just below the image in small italic text, centred.
   (In raw HTML, Grav doesn't adjust image addresses, so the <img> needs one that starts with the page's name in its address (its folder name without the number),
   such as page-name/photo.jpg - for authors, the plain Markdown caption below is simpler) */
.reader-content figure {
    max-width: 100%;
    margin: 1.5rem auto;
    text-align: center;
}

.reader-content figure img {
    display: block;
    margin: 0 auto;
}

.reader-content figcaption {
    margin-top: 0.375rem;
    /* 14px, the same as in Quark 2 Open Publishing - Quark's base size is large (18.72px), and its page text is 0.85rem */
    font-size: 0.75rem;
    font-style: italic;
    text-align: center;
}

/* A caption in plain Markdown: an italic line right after an image on its own, such as
   ![A photo](photo.jpg) followed by *Photo by …* - shown like a figure caption (small, centred, just below the image),
   so authors need no HTML. It works with the italic line in its own paragraph (after a blank line) or on the line just
   below the image (the same paragraph). (":only-child" here looks at elements only, so text beside them still counts) */
.reader-content p:has(> img:only-child):has(+ p > em:only-child) {
    margin-bottom: 0.375rem;
}

.reader-content p:has(> img:only-child) + p:has(> em:only-child),
.reader-content p > img:first-child + em:last-child {
    display: block;
    margin-top: 0;
    font-size: 0.75rem;
    text-align: center;
}

/* the image in the same paragraph as its caption sits on its own line, centred */
.reader-content p > img:first-child:has(+ em:last-child) {
    display: block;
    margin: 0 auto 0.375rem;
}

/* The current page's own sections (its h2 headings), as in Grav Open Course Hub's module pages (needs the Page TOC
   plugin): on wider screens, a smaller indented list under the current page in the side list; on phones and narrow
   windows, where the side list comes after the page, an "On this page" box above the text that opens when tapped */
.reader-page-sections-item {
    list-style: none;
}

/* indented and a little smaller than the page names, as in Grav Open Course Hub's module list */
.reader-page-sections {
    margin: 0.2rem 0 0.5rem 1rem;
    padding-left: 0;
}

.reader-page-sections .nav-item {
    margin: 0;
}

/* the same colour as the page names (no lighter shade, which fell below 4.5:1 contrast), a little smaller, and at least
   24px tall each, so they're easy to read, tap and click (WCAG 2.2 target size) */
.reader-page-sections a {
    display: inline-block;
    padding: 0.2rem 0;
    font-size: 0.9375em;
    line-height: 1.35;
}

/* the section being read (marked by js/reader.js as you scroll): darker and bold, so it stands out without relying on
   colour alone (Dark Mode has its own colour in css/theme-dark.css) */
#sections-nav .reader-page-sections a.is-current {
    color: #303742;
    font-weight: 600;
}

.reader-page-sections-above {
    margin: 0 0 1.25rem;
    padding: 0.5rem 0.875rem;
    border: 1px solid color-mix(in srgb, currentColor 18%, transparent);
    border-radius: 0.375rem;
}

.reader-page-sections-above summary {
    cursor: pointer;
    font-weight: 600;
}

.reader-page-sections-above ul {
    margin: 0.5rem 0 0.25rem;
    padding-left: 1.25rem;
}

/* a heading reached from one of these links (or any link to a heading) stops below the fixed header, not under it */
.reader-content :is(h2, h3, h4)[id] {
    scroll-margin-top: 5rem;
}

/* only one of the two at a time: the side list version beside the page, the box when the side list is below it */
@media (max-width: 959px) {
    .reader-page-sections-item {
        display: none;
    }
}

@media (min-width: 960px) {
    .reader-page-sections-above {
        display: none;
    }
}

/* On phones, when the page's text starts with a heading right after the "On this page" box, the heading doesn't add its
   own larger space above (the box's margin is enough), so the gap below the box matches the gap above it */
@media (max-width: 959px) {
    .reader-page-sections-above + .reader-content > :is(h2, h3, h4):first-child {
        margin-top: 0;
    }
}

/* ---------- Phones ---------- */

/* Search boxes on phones and narrow windows: text at least 16px, as iPhones zoom the whole page in when a box with
   smaller text is tapped (and leave it zoomed). On phones, the box is also taller, so it's easier to tap (wider screens
   keep its height, so it lines up with the "Continue reading" bar beside it on a guide's home page) */
@media (max-width: 840px) {
    .search-box .form-input,
    .reader-search .tntsearch-form .form-input {
        font-size: 16px;
    }
}

@media (max-width: 600px) {
    .search-box .form-input,
    .reader-search .tntsearch-form .form-input {
        height: 2.5rem;
    }
}

/* The side list of sections, below the page on phones: taller rows, easier to tap with a thumb */
@media (max-width: 840px) {
    #sections-nav .nav .nav-item {
        margin-top: 0;
    }

    #sections-nav .nav .nav-item a {
        display: block;
        padding-top: 0.6rem;
        padding-bottom: 0.6rem;
    }
}

/* The Previous/Next bar fixed to the bottom of the screen, on phones and narrow windows (where the side list moves below
   the page), as in Grav Helios Open Reader and Quark 2 Open Publishing: Previous on the left and Next on the right, each
   with its page title on one line. There it takes the place of the Previous/Next links at the top of the page and the
   tiles at its end, which are hidden; wider screens hide the bar. Very short screens (phones turned sideways, under 500px
   tall) keep the links and tiles instead, as the bar would take too much of the screen there. (Dark Mode has its own
   colours in css/theme-dark.css.) */
.reader-prev-next-bar {
    display: none;
}

@media (max-width: 840px) and (min-height: 500px) {
    .reader-prev-next-bar {
        display: grid;
        grid-template-columns: 1fr 1fr;
        position: fixed;
        left: 0;
        right: 0;
        bottom: 0;
        /* above the page, below the site header */
        z-index: 1;
        background: #fff;
        border-top: 1px solid #dadee4;
        /* room for the iPhone's home bar, when the browser leaves it to the page */
        padding-bottom: env(safe-area-inset-bottom);
    }

    /* the other Previous/Next navigation, while the bar is there (:has matches a page that has the bar) */
    body:has(.reader-prev-next-bar) .reader-prev-next-top,
    body:has(.reader-prev-next-bar) .reader-prev-next {
        display: none;
    }

    /* room below the page for the bar, so it never covers the end of the page. Quark's page is a column of the page and
       its footer (for its sticky footer), so the room is an empty space added after them (::after) */
    body:has(.reader-prev-next-bar)::after {
        content: "";
        flex: 0 0 auto;
        height: calc(3.75rem + env(safe-area-inset-bottom));
    }

    /* links and buttons reached with the Tab key, and places jumped to, are kept above the bar rather than behind it
       (the browser leaves this much room at the bottom of the screen when it scrolls to them) */
    html:has(.reader-prev-next-bar) {
        scroll-padding-bottom: calc(3.75rem + env(safe-area-inset-bottom));
    }

    /* while typing in a box, such as the search box (whose on-screen keyboard some phones place the bar above), and while
       the phone menu is open (Quark adds mobile-nav-open to the page then), the bar steps aside.
       (input:not(...) matches text boxes, leaving out checkboxes and buttons) */
    body:has(input:not([type="checkbox"], [type="radio"], [type="button"], [type="submit"], [type="reset"]):focus, textarea:focus) .reader-prev-next-bar,
    body.mobile-nav-open .reader-prev-next-bar {
        display: none;
    }
}

/* each half of the bar: an arrow and a small label above the page title */
.reader-bar-link {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    min-width: 0;
    min-height: 3.5rem;
    padding: 0.4rem 0.8rem;
    text-decoration: none;
}

.reader-bar-link:hover,
.reader-bar-link:focus {
    text-decoration: none;
}

.reader-bar-link:hover .reader-bar-title {
    text-decoration: underline;
}

/* a visible focus ring for keyboard users (Quark removes the focus outline from links, so this needs !important) */
.reader-bar-link:focus-visible {
    outline: 0.1rem solid #3085ee !important;
    outline-offset: -0.1rem;
}

/* a thin line between Previous and Next */
.reader-bar-prev {
    border-right: 1px solid #dadee4;
}

.reader-bar-next {
    grid-column: 2;
    justify-content: flex-end;
    text-align: right;
}

.reader-bar-text {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

/* Small "Previous" or "Next" above the page title, a little larger than on the tiles so it's easy to read at a glance */
.reader-bar-label {
    color: #667189;
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

/* the page title on one line, cut with "…" when it's too long (as in Grav Helios Open Reader; "Previous" and "Next"
   say where each goes, and the full title is on the page itself) */
.reader-bar-title {
    overflow: hidden;
    font-weight: 600;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* The chevron is grey, and turns link blue on hover, as on the tiles */
.reader-bar-link .fa {
    flex: 0 0 auto;
    color: #acb3c2;
}

.reader-bar-link:hover .fa,
.reader-bar-link:focus .fa {
    color: #3085ee;
}

/* ---------- Seeing an image larger ---------- */

/* An image in the page's text that's shown smaller than its full size can be tapped or clicked to see it larger
   (js/reader.js adds reader-image-zoom to it): a zoom-in pointer, and a visible focus ring for keyboard users */
.reader-content img.reader-image-zoom {
    cursor: zoom-in;
}

.reader-content img.reader-image-zoom:focus-visible {
    outline: 0.1rem solid #3085ee !important;
    outline-offset: 0.2rem;
}

/* the larger view: the image as large as fits the screen, on a dark background, with a Close button at the top right */
.reader-image-dialog {
    width: 100vw;
    height: 100vh;
    max-width: none;
    max-height: none;
    margin: 0;
    padding: 3.5rem 1rem 1rem;
    border: 0;
    background: rgba(0, 0, 0, 0.92);
    cursor: zoom-out;
}

.reader-image-dialog[open] {
    display: flex;
    align-items: center;
    justify-content: center;
}

.reader-image-dialog::backdrop {
    background: rgba(0, 0, 0, 0.92);
}

.reader-image-dialog img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
}

/* the Close button: white on the dark background, 44px so it's easy to tap */
.reader-image-close {
    position: absolute;
    top: 0.5rem;
    right: 0.5rem;
    width: 44px;
    height: 44px;
    margin: 0;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.15);
    color: #fff;
    font-size: 1.75rem;
    line-height: 1;
    cursor: pointer;
}

.reader-image-close:focus-visible {
    outline: 2px solid #fff;
    outline-offset: 2px;
}