/* User Manual page. Colors come from theme.css tokens only, so the page
   follows dark mode on screen and the print block in theme.css flips the
   palette to black-on-white for "Save as PDF". */

.manual-wrap {
    max-width: 820px;
}

.manual-title {
    font-size: 26px;
    font-weight: 700;
    margin: 0 0 8px;
}

.manual-intro {
    font-size: 15px;
    line-height: 1.6;
    color: var(--text-muted);
    margin: 0 0 20px;
    max-width: 70ch;
}

/* ── Print / Save-as-PDF button ─────────────────────────────── */
.manual-toolbar {
    margin: 0 0 28px;
}
.manual-print-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: var(--accent);
    color: var(--on-accent);
    border: none;
    border-radius: 6px;
    padding: 10px 18px;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
}
.manual-print-btn:hover { background: var(--accent-hover); }
.manual-print-btn svg { width: 16px; height: 16px; }

/* ── Table of contents ──────────────────────────────────────── */
.manual-toc {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: 8px;
    padding: 18px 22px;
    margin: 0 0 36px;
}
.manual-toc-title {
    font-size: 13px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--text-subtle);
    margin: 0 0 12px;
}
.manual-toc ol {
    margin: 0;
    padding-left: 22px;
    display: flex;
    flex-direction: column;
    gap: 7px;
}
.manual-toc a {
    color: var(--link);
    text-decoration: none;
    font-size: 15px;
}
.manual-toc a:hover { text-decoration: underline; }

/* ── Sections ───────────────────────────────────────────────── */
.manual-section {
    margin: 0 0 44px;
    scroll-margin-top: 72px; /* clear the sticky nav when jumped to via anchor */
}
.manual-section h2 {
    font-size: 21px;
    font-weight: 700;
    margin: 0 0 6px;
    padding-bottom: 8px;
    border-bottom: 2px solid var(--border);
}
.manual-lead {
    font-size: 15px;
    font-style: italic;
    color: var(--text-muted);
    margin: 0 0 16px;
}

.manual-section h3 {
    font-size: 16px;
    font-weight: 700;
    margin: 24px 0 8px;
}

.manual-section p { line-height: 1.6; margin: 0 0 12px; }

/* Numbered how-to steps */
ol.manual-steps {
    margin: 0 0 16px;
    padding-left: 24px;
    display: flex;
    flex-direction: column;
    gap: 9px;
}
ol.manual-steps li { line-height: 1.55; }

ul.manual-list {
    margin: 0 0 16px;
    padding-left: 22px;
    display: flex;
    flex-direction: column;
    gap: 7px;
}
ul.manual-list li { line-height: 1.55; }

/* ── Callout notes ──────────────────────────────────────────── */
.manual-note {
    border-left: 3px solid var(--info);
    background: color-mix(in srgb, var(--info) 10%, transparent);
    border-radius: 4px;
    padding: 11px 15px;
    margin: 0 0 16px;
    font-size: 14px;
    line-height: 1.55;
}
.manual-note--important {
    border-left-color: var(--warning);
    background: color-mix(in srgb, var(--warning) 12%, transparent);
}
.manual-note strong { color: var(--text); }

/* ── Figures / screenshots ──────────────────────────────────── */
.manual-fig {
    margin: 16px 0 20px;
}
.manual-fig img {
    display: block;
    max-width: 100%;
    height: auto;
    border: 1px solid var(--border);
    border-radius: 6px;
    box-shadow: 0 1px 4px var(--shadow);
}
.manual-fig figcaption {
    font-size: 13px;
    color: var(--text-subtle);
    margin-top: 7px;
    font-style: italic;
}

/* ── Back-to-top ────────────────────────────────────────────── */
.manual-backtop {
    display: inline-block;
    font-size: 13px;
    color: var(--link);
    text-decoration: none;
    margin-top: 4px;
}
.manual-backtop:hover { text-decoration: underline; }

/* ─────────────────────────────────────────────────────────────
   PRINT — the token palette is reset to black-on-white in
   theme.css's @media print block. Fixed page geometry (rather than
   trusting browser/OS print defaults) so screenshot sizing below is
   predictable across machines.
   ───────────────────────────────────────────────────────────── */
@page {
    size: letter;
    margin: 0.5in;
}

@media print {
    .site-nav,
    .manual-toolbar,
    .manual-toc,
    .manual-backtop { display: none !important; }

    .page-body { padding: 0; }
    .manual-wrap { max-width: none; }

    body { font-size: 10.5pt; }

    .manual-title { font-size: 19pt; margin-bottom: 6pt; }
    .manual-intro { font-size: 10.5pt; line-height: 1.35; margin-bottom: 10pt; }

    /* NOT page-break-inside: avoid — a section (Reports, Sign-Up Sheets, etc.)
       routinely spans several pages, and asking the browser to keep an
       unbreakable block that's taller than a page together just forces it
       onto a fresh page, stranding blank space on the one before it. Only
       the heading is kept with what follows; small units (a single figure,
       note, or step) below still avoid splitting since those are now short
       enough that "avoid" is actually honorable. */
    .manual-section {
        margin-bottom: 18pt;
    }
    .manual-section h2 {
        font-size: 14pt;
        margin-bottom: 4pt;
        padding-bottom: 4pt;
        page-break-after: avoid;
        break-after: avoid;
    }
    .manual-lead { font-size: 10pt; margin-bottom: 8pt; }
    .manual-section h3 {
        font-size: 11.5pt;
        margin: 10pt 0 4pt;
        page-break-after: avoid;
        break-after: avoid;
    }
    .manual-section p { line-height: 1.35; margin-bottom: 6pt; }

    ol.manual-steps,
    ul.manual-list {
        margin-bottom: 8pt;
        gap: 4pt;
    }
    ol.manual-steps li,
    ul.manual-list li { line-height: 1.3; }

    .manual-note {
        font-size: 9.5pt;
        line-height: 1.3;
        padding: 6pt 9pt;
        margin-bottom: 8pt;
    }

    /* Screenshots: capped to a fixed box (not full page width) so no single
       image can dominate or exceed a page. width/height:auto + both
       max-width and max-height lets the browser scale each image down to
       fit within the box while preserving its aspect ratio. */
    .manual-fig {
        margin: 6pt 0 8pt;
        page-break-inside: avoid;
        break-inside: avoid;
    }
    .manual-fig img {
        max-width: 4.6in;
        max-height: 3.1in;
        width: auto;
        height: auto;
        box-shadow: none;
        border: 1px solid #999999;
    }
    .manual-fig figcaption {
        font-size: 8.5pt;
        margin-top: 4pt;
    }

    ol.manual-steps li,
    .manual-note {
        page-break-inside: avoid;
        break-inside: avoid;
    }
    a { color: inherit; text-decoration: none; }
}