/*
Multi-page content: Section List page and its sections (the same page settings as Grav Helios Open Reader), in Quark 2's
style - hibbittsdesign.org
The guide templates are the same as in Quark Open Publishing, so the first part of this file gives the few Spectre classes
they use (grid columns, progress bar, side list, hidden text) a Quark 2 look. Buttons (btn btn-primary) are Quark 2's own,
filled with the accent colour. Colours, radii and shadows all come from
Quark 2's --q2-* tokens, so Light and Dark mode both work without extra rules.
*/

/* ---------- Classes from Quark Open Publishing's templates ---------- */

/* Text for screen readers only */
.text-assistive {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

.img-responsive {
    display: block;
    max-width: 100%;
    height: auto;
}

/* Section pages: the page and its side list, side by side on wider screens */
.columns:has(> #sections-nav) {
    gap: clamp(2rem, 4vw, 3rem);
}

/* the page takes its full reading width first (see below), and the side list the rest (at most 22rem, on the right),
   so the side list sits close beside the page rather than at the far edge */
@media (min-width: 960px) {
    .columns:has(> #sections-nav) {
        grid-template-columns: minmax(0, 42rem) minmax(15rem, 1fr);
    }

    #sections-nav {
        width: 100%;
        max-width: 22rem;
        justify-self: end;
    }

    /* 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: calc(var(--q2-header-height) + 1.5rem);
        align-self: start;
        display: flex;
        flex-direction: column;
        max-height: calc(100vh - var(--q2-header-height) - 3rem);
    }

    #sections-nav > ul.nav {
        min-height: 0;
        overflow-y: auto;
    }
}

/* Section cards: 1, 2 or 3 per row (the template gives each card col-12, col-6 or col-4), one per row on phones */
.section-cards {
    list-style: none;
    margin: 0 0 2rem;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(12, minmax(0, 1fr));
    gap: 1.25rem;
}

.section-cards > .column {
    margin: 0;
    padding: 0;
    list-style: none;
    display: flex;
}

.section-cards > .col-12 { grid-column: span 12; }
.section-cards > .col-6 { grid-column: span 6; }
.section-cards > .col-4 { grid-column: span 4; }

@media (max-width: 840px) {
    .section-cards > .col-md-6 { grid-column: span 6; }
}

@media (max-width: 600px) {
    .section-cards > .col-sm-12 { grid-column: span 12; }
}

/* ---------- Titles and labels ---------- */

/* The guide's title is an h1 (and section page titles too), shown at Quark 2's h3 size */
.sections-page-title-template {
    margin: 0 0 0.75rem;
    font-size: clamp(1.25rem, 1.5vw + 0.5rem, 1.5rem);
    font-weight: 600;
    line-height: 1.25;
    letter-spacing: -0.005em;
}

/* Small label above a section's title, for example "Unit 2", scaled up by the same amount as the links above it;
   smaller on the section cards */
.reader-section-label {
    color: var(--q2-text-muted);
    font-family: var(--pico-font-family-sans-serif);
    font-size: 0.857rem;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    margin: 0 0 0.25rem;
}

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

/* the page title sits just below its section label, as in Quark Open Publishing (without Quark 2's usual space above headings) */
.reader-section-label + .sections-page-title-template {
    margin-top: 0;
}

/* ---------- Section List page header: cover image and details ---------- */

.reader-header {
    display: flex;
    align-items: flex-start;
    gap: 1.5rem;
    padding-bottom: 1.5rem;
    margin-bottom: 1.5rem;
    border-bottom: 1px solid var(--q2-divider);
}

.reader-cover {
    flex: 0 0 auto;
    width: 10rem;
    border-radius: var(--q2-radius);
    box-shadow: var(--q2-shadow-card);
}

/* Section List page with a small cover: a 4:3 cover (about as tall as the title, details and Start button beside it),
   cropped to fill it */
.section-list-page .reader-cover {
    width: 18rem;
    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 18rem high, and narrows to keep its shape. */
.section-list-page .reader-cover.reader-cover-portrait {
    width: auto;
    max-width: 11rem;
    max-height: 18rem;
    aspect-ratio: auto;
}

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

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

/* the guide's title, as large as its section pages' titles */
.section-list-page .sections-page-title-template {
    font-size: clamp(1.5rem, 2vw + 0.75rem, 1.875rem);
    font-weight: 700;
    line-height: 1.15;
    letter-spacing: -0.015em;
}

/* the subtitle in Quark 2's "lead" style, as under a blog page's title */
.reader-subtitle {
    color: var(--q2-text-muted);
    font-size: 1.125rem;
    font-weight: 300;
    letter-spacing: -0.2px;
    line-height: 1.55;
}

.reader-edition {
    color: var(--q2-text-muted);
    font-size: 0.875rem;
}

.reader-license.label {
    margin-top: 0.25rem;
}

/* the Start button at the end of the details */
.reader-details .section-list-start {
    margin: 0.75rem 0 0;
}

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

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

/* Large cover: full width of the content area, at the top */
.reader-cover-large {
    display: block;
    width: 100%;
    max-height: 36rem;
    object-fit: cover;
    border-radius: var(--q2-radius-md);
    box-shadow: var(--q2-shadow-card);
    margin-bottom: 1.5rem;
}

/* 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;
}

@media (max-width: 600px) {
    .reader-header {
        flex-direction: column;
    }

    .section-list-page .reader-cover {
        width: 100%;
    }
}

/* ---------- Section List page: search box, parts and cards ---------- */

/* 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: 1rem;
    margin: 1.5rem 0 2rem;
}

/* 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 22rem;
    margin-left: auto;
}

/* 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 above the section cards, as in Helios Open Reader. It uses Quark 2's
   alert recipe (a light tint of the accent colour over the card surface), and its close button follows Quark 2's
   round icon button (the light/dark toggle) */
.reader-resume {
    display: flex;
    align-items: center;
    flex: 1;
    min-width: 0;
    gap: 0.625rem;
    padding: 0.625rem 0.75rem 0.625rem 1rem;
    background: color-mix(in oklab, var(--q2-accent) 6%, var(--q2-bg-elev));
    border-radius: var(--q2-radius);
    font-family: var(--pico-font-family-sans-serif);
    font-size: 0.9375rem;
    color: var(--q2-text);
}

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

.reader-resume > .fa {
    color: var(--q2-accent);
    flex: 0 0 auto;
}

.reader-resume-link {
    flex: 1;
    min-width: 0;
    color: var(--q2-text);
    text-decoration: none;
}

.reader-resume-title {
    color: var(--q2-link);
    font-weight: 600;
}

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

.reader-resume-dismiss {
    flex: 0 0 auto;
    width: 2rem;
    height: 2rem;
    margin: 0;
    padding: 0;
    border: 0;
    border-radius: var(--q2-radius-pill);
    background: transparent;
    box-shadow: none;
    color: var(--q2-text-muted);
    font-size: 1.25rem;
    line-height: 1;
    cursor: pointer;
    transition: background 0.15s ease;
}

.reader-resume-dismiss:hover {
    background: var(--q2-bg-muted);
    color: var(--q2-text-strong);
}

/* a solid ring in the link colour, as Quark 2's lighter focus ring is too faint on the tinted bar in Dark mode */
.reader-resume-dismiss:focus-visible {
    outline: 2px solid var(--q2-link);
    outline-offset: 2px;
}

/* in Dark mode, the title a little lighter than Quark 2's link colour, for enough contrast on the tinted bar */
:root[data-theme="dark"] .reader-resume-title {
    color: color-mix(in oklab, var(--q2-link) 90%, white);
}

/* Part headings, and headings in the text below the cards, with Quark 2's divider line */
.reader-part-heading,
.section-list-below h2,
.section-list-below h3,
.section-list-below h4 {
    font-weight: 600;
    letter-spacing: 0;
    color: var(--q2-text);
    font-size: 1.1rem;
    padding-bottom: 0.5rem;
    margin: 2rem 0 1.25rem;
    border-bottom: 1px solid var(--q2-divider);
}

/* 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.25rem;
}

/* Section cards use Quark 2's card; the title link covers the whole card */
.section-card {
    position: relative;
    width: 100%;
}

/* A card with just a label and title: the same space below the title as above it
   (Quark 2's card header leaves less space below, for a description that would follow) */
.section-card-title-only .card-header {
    padding-bottom: 1.25rem;
}

/* Card titles are h2 or h3, shown at Quark 2's h5 size */
.section-card .card-title {
    margin: 0;
    font-size: 1.0625rem;
    font-weight: 600;
    line-height: 1.3;
    letter-spacing: 0.2px;
}

/* No accent bar above these h2s (Quark 2 adds one to h2 headings) */
.reader-part-heading::before,
.section-list-below h2::before,
.section-card .card-title::before {
    display: none;
}

.section-card-link {
    color: var(--q2-text-strong);
    text-decoration: none;
}

.section-card-link::after {
    content: "";
    position: absolute;
    inset: 0;
}

/* Quark 2 positions card titles, which would keep the link's cover to the title alone; this lets it cover the whole
   card, image included, like the blog's cards */
.section-card .card-title {
    position: static;
}

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

.section-card:focus-within {
    outline: 2px solid var(--q2-focus-ring);
    outline-offset: 2px;
}

.section-card-description {
    color: var(--q2-text-muted);
    font-size: 0.9375rem;
    margin: 0;
}

/* the section's Author(s), below its description */
.section-card-author {
    color: var(--q2-text-muted);
    font-size: 0.8125rem;
    margin: 0;
}

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

/* 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: 12rem 1fr;
        grid-template-rows: auto 1fr;
    }

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

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

    /* 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.5rem 1.5rem 0;
    }

    .section-card-image-side .card-body {
        padding: 0.75rem 1.5rem 1.5rem;
    }
}

@media (max-width: 599px) {
    .section-card-image-side .card-image img {
        height: 10rem;
        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, in a light tint of its colour */
.section-card-label-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem;
    margin: 0 0 0.25rem;
}

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

.section-badge.label {
    --badge-color: var(--q2-accent);
    margin: 0;
    padding: 0.125rem 0.5rem;
    border: 0;
    font-size: 0.6875rem;
    font-weight: 600;
    line-height: 1.4;
    color: var(--badge-color);
    background: color-mix(in oklab, var(--badge-color) 14%, transparent);
}

.section-badge-blue.label { --badge-color: #1d4ed8; }
.section-badge-green.label { --badge-color: #166534; }
.section-badge-yellow.label { --badge-color: #854d0e; }
.section-badge-red.label { --badge-color: #b91c1c; }
.section-badge-purple.label { --badge-color: #7e22ce; }

.section-badge-plain.label {
    color: var(--q2-text-muted);
    background: transparent;
    box-shadow: inset 0 0 0 1px var(--q2-divider);
}

/* lighter colours in Dark mode, so the badges stay easy to read */
:root[data-theme="dark"] .section-badge.label { --badge-color: color-mix(in oklab, var(--q2-link) 75%, white); }
:root[data-theme="dark"] .section-badge-blue.label { --badge-color: #93c5fd; }
:root[data-theme="dark"] .section-badge-green.label { --badge-color: #86efac; }
:root[data-theme="dark"] .section-badge-yellow.label { --badge-color: #fde047; }
:root[data-theme="dark"] .section-badge-red.label { --badge-color: #fca5a5; }
:root[data-theme="dark"] .section-badge-purple.label { --badge-color: #d8b4fe; }

/* 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;
}

.section-list-below {
    margin-top: 1rem;
}

/* ---------- Section pages: back link, Previous/Next at the top, side list ---------- */

.reader-top-bar {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: baseline;
    gap: 0 1.25rem;
}

/* the back link and top Previous/Next links look like Quark 2's breadcrumbs (muted, no underline), at body text size */
.reader-back-link,
.reader-sections-link,
.reader-prev-next-top {
    font-family: var(--pico-font-family-sans-serif);
    font-size: 1rem;
    margin: 0 0 1rem;
    color: var(--q2-text-muted);
}

.reader-back-link a,
.reader-sections-link a,
.reader-prev-next-top a {
    padding: 0.25rem 0; /* a little taller, for easier tapping */
    color: var(--q2-text-muted);
    text-decoration: none;
}

.reader-back-link a:hover,
.reader-sections-link a:hover,
.reader-prev-next-top a:hover {
    color: var(--q2-text-strong);
}

.reader-prev-next-top {
    white-space: nowrap;
    align-items: center; /* keeps the dot between the links centred */
}

.reader-back-link .fa,
.reader-sections-link .fa,
.reader-prev-next-top .fa {
    font-size: 0.75em;
}

.reader-prev-next-top-divider {
    color: var(--q2-text-muted);
    margin: 0 0.5rem;
}

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

/* ---------- Section pages: comfortable reading, as in a book ---------- */

/* a comfortable line length: the page column is at most about 80 characters of text wide
   (centred when the page is embedded, without its side list) */
#sections-content {
    max-width: 42rem;
}

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

/* the page's text a little larger than elsewhere, without words broken across lines
   (Quark 2 hyphenates by default, which suits cards but interrupts longer reading) */
.reader-content p,
.reader-content li,
.reader-content dd,
.reader-content blockquote {
    font-size: 1.0625rem;
}

.reader-content,
.reader-content * {
    hyphens: manual;
}

/* the section's title is the largest heading on the page, as in a book's chapter title */
#sections-content .sections-page-title-template {
    font-size: clamp(1.5rem, 2vw + 0.75rem, 1.875rem);
    font-weight: 700;
    line-height: 1.15;
    letter-spacing: -0.015em;
}

/* headings in the page's text keep Quark 2's styles (and h2's accent dash), a step below the title */
.reader-content h2 {
    font-size: clamp(1.25rem, 1vw + 0.875rem, 1.5rem);
    margin-top: 2.5rem;
}

.reader-content h3 {
    font-size: clamp(1.125rem, 0.5vw + 1rem, 1.25rem);
    margin-top: 2rem;
}

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

/* 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: 1rem;
}

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

/* quotations in the reading font, keeping Quark 2's left border (its display font suits short pull quotes,
   but is heavy for the longer quoted passages common in textbooks) */
.reader-content blockquote {
    font-family: var(--pico-font-family-sans-serif);
    font-size: 1.0625rem;
    line-height: 1.7;
}

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

/* The search box and side list of sections sit in Quark 2's sidebar cards, as in the blog's sidebar
   ("ul.nav" so the card's padding wins over the plain list rule below) */
#sections-nav .reader-search,
#sections-nav > ul.nav {
    background: var(--q2-bg-elev);
    border-radius: var(--q2-radius-md);
    box-shadow:
        rgba(19, 19, 22, 0.04) 0 1px 2px,
        rgba(19, 19, 22, 0.06) 0 8px 24px -8px;
    padding: 1.25rem;
    margin-bottom: 1.5rem;
}

:root[data-theme="dark"] #sections-nav .reader-search,
:root[data-theme="dark"] #sections-nav > ul.nav {
    box-shadow:
        rgba(0, 0, 0, 0.4) 0 1px 2px,
        rgba(0, 0, 0, 0.55) 0 10px 28px -8px;
}

/* Side list of sections (and the current section's subsections): rounded rows, with the current page highlighted */
#sections-nav .nav {
    list-style: none;
    margin: 0;
    padding: 0;
    font-family: var(--pico-font-family-sans-serif);
    font-size: 0.9375rem;
}

#sections-nav .nav .nav {
    margin: 0.125rem 0 0.375rem 0.75rem;
    padding: 0 0 0 0.5rem;
    border-left: 1px solid var(--q2-divider);
    font-size: 0.875rem;
}

#sections-nav .nav-item {
    list-style: none;
    margin: 0;
    padding: 0;
}

#sections-nav .nav-item a {
    display: block;
    padding: 0.375rem 0.625rem;
    border-radius: var(--q2-radius-sm);
    color: var(--q2-text);
    text-decoration: none;
    line-height: 1.4;
}

#sections-nav .nav-item a:hover {
    background: var(--q2-bg-muted);
    color: var(--q2-text-strong);
}

#sections-nav .nav-item.active > a {
    background: var(--q2-bg-muted);
    color: var(--q2-text-strong);
    font-weight: 600;
}

/* Part labels in the side list, styled like the section labels */
/* Part labels in the side list, like the headings in Quark 2's sidebar cards */
#sections-nav .reader-part-label {
    list-style: none;
    color: var(--q2-text-muted);
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    margin: 1rem 0 0.375rem;
    padding: 0 0.625rem;
}

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


/* ---------- Reading progress and Previous/Next tiles ---------- */

.reader-nav-block {
    margin-top: 2.5rem;
}

.reader-progress {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.4rem;
    margin-bottom: 1.25rem;
}

.reader-progress .bar {
    width: min(100%, 22rem);
    height: 6px;
    border-radius: var(--q2-radius-pill);
    background: var(--q2-bg-muted);
    overflow: hidden;
}

.reader-progress .bar-item {
    height: 100%;
    background: var(--q2-accent);
    border-radius: var(--q2-radius-pill);
}

.reader-progress-text {
    color: var(--q2-text-muted);
    font-family: var(--pico-font-family-sans-serif);
    font-size: 0.8125rem;
    margin: 0;
}

.reader-prev-next {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
    border-top: 1px solid var(--q2-divider);
    padding-top: 1.75rem;
}

.reader-nav-tile {
    display: flex;
    align-items: center;
    gap: 0.875rem;
    padding: 1rem 1.25rem;
    background: var(--q2-bg-elev);
    border-radius: var(--q2-radius-md);
    box-shadow: var(--q2-shadow-card);
    color: var(--q2-text);
    text-decoration: none;
    transition: box-shadow 0.2s ease, transform 0.2s ease;
}

.reader-nav-tile:hover {
    box-shadow: var(--q2-shadow-raised);
    transform: translateY(-2px);
    text-decoration: none;
}

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

.reader-nav-tile:focus-visible {
    outline: 2px solid var(--q2-focus-ring);
    outline-offset: 2px;
}

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

.reader-nav-text {
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
}

.reader-nav-label {
    color: var(--q2-text-muted);
    font-family: var(--pico-font-family-sans-serif);
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.reader-nav-title {
    color: var(--q2-link);
    font-weight: 600;
}

.reader-nav-tile .fa {
    color: var(--q2-text-muted);
}

@media (max-width: 600px) {
    .reader-prev-next {
        grid-template-columns: 1fr;
    }

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

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

/* Classic Next/Prev buttons on Multi-Section pages */
.prev-next {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 0.75rem;
    margin-top: 2.5rem;
}

.prev-next .btn {
    width: auto;
}

/* ---------- OER attribution ---------- */

.reader-attribution {
    color: var(--q2-text-muted);
    font-size: 0.875rem;
    text-align: center;
    margin-top: 2.5rem;
}

/* 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;
}

/* (Quark 2 gives paragraphs their own colour and size, so these take the attribution's instead) */
.reader-attribution p {
    margin: 0 0 0.3rem;
    color: inherit;
    font-size: inherit;
}

/* 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 {
    color: var(--q2-text-strong);
}

/* ---------- Reduced motion ---------- */
/* Cards and Previous/Next tiles don't lift on hover for visitors who ask for less motion */
@media (prefers-reduced-motion: reduce) {
    .section-card:hover,
    .reader-nav-tile:hover {
        transform: none;
    }
}


/* 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;
    font-size: 0.875rem;
    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.875rem;
    text-align: center;
    /* the same muted grey as Quark 2's own figure captions, in light and dark modes */
    color: var(--pico-muted-color);
}

/* 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;
}