/* ============================================================
   THE IN-APP HELP - the manuals drawn in the Riproka look.

   GLOBAL, NOT SCOPED, ON PURPOSE: the help's words arrive as HTML
   rendered by Riproka.Shared.Help.HelpMarkdown and are written into
   the page as markup, which component-scoped CSS cannot reach. Every
   help surface - the panel beside a page and the /help library -
   wears .help-prose, so a chapter looks the same in both.

   Tokens only, like every stylesheet here: no raw colour or size.
   ============================================================ */

.help-prose {
    font-family: var(--rk-font-body);
    font-size: var(--rk-fs-base);
    line-height: var(--rk-lh-prose);
    color: var(--rk-ink);
    overflow-wrap: break-word;
}

.help-prose h1,
.help-prose h2,
.help-prose h3,
.help-prose h4,
.help-prose h5 {
    font-family: var(--rk-font-display);
    font-weight: var(--rk-fw-bold);
    line-height: var(--rk-lh-tight);
    letter-spacing: var(--rk-track-2xs);
    color: var(--rk-ink);
    margin: var(--rk-sp-24) 0 var(--rk-sp-10);
    scroll-margin-top: calc(var(--rk-control-h) * 2);
}

.help-prose h1 {
    font-size: var(--rk-fs-7xl);
}

.help-prose h2 {
    font-size: var(--rk-fs-6xl);
    padding-bottom: var(--rk-sp-6);
    border-bottom: var(--rk-border) solid var(--rk-line-hard);
}

.help-prose h3 {
    font-size: var(--rk-fs-4xl);
}

.help-prose h4,
.help-prose h5 {
    font-size: var(--rk-fs-2xl);
}

.help-prose > :first-child {
    margin-top: 0;
}

.help-prose p,
.help-prose ul,
.help-prose ol {
    margin: 0 0 var(--rk-sp-12);
}

.help-prose ul,
.help-prose ol {
    padding-left: var(--rk-sp-24);
}

.help-prose li + li {
    margin-top: var(--rk-sp-4);
}

.help-prose a {
    color: var(--rk-accent-ink);
    text-decoration: underline;
    text-underline-offset: var(--rk-sp-3);
}

.help-prose a:hover {
    color: var(--rk-ink);
}

.help-prose strong {
    font-weight: var(--rk-fw-bold);
}

.help-prose code {
    font-family: var(--rk-font-mono);
    font-size: var(--rk-fs-lg);
    background: var(--rk-paper);
    border: var(--rk-border-hair) solid var(--rk-line);
    border-radius: var(--rk-radius-xs);
    padding: 0 var(--rk-sp-4);
}

.help-prose hr {
    border: 0;
    border-top: var(--rk-border-hair) dashed var(--rk-line-hard);
    margin: var(--rk-sp-20) 0;
}

/* ---------------------------------------------------------- code */

.help-prose .help-code {
    margin: 0 0 var(--rk-sp-12);
    padding: var(--rk-sp-12);
    background: var(--rk-paper);
    border: var(--rk-border-hair) solid var(--rk-line-hard);
    overflow-x: auto;
    font-size: var(--rk-fs-md);
    line-height: var(--rk-lh-snug);
}

.help-prose .help-code code {
    background: transparent;
    border: 0;
    padding: 0;
    font-size: inherit;
}

/* ---------------------------------------------------------- tables */

.help-prose .help-table {
    margin: 0 0 var(--rk-sp-16);
    overflow-x: auto;
}

.help-prose table {
    border-collapse: collapse;
    width: 100%;
    font-size: var(--rk-fs-lg);
    line-height: var(--rk-lh-snug);
}

.help-prose th {
    font-family: var(--rk-font-display);
    font-size: var(--rk-fs-md);
    font-weight: var(--rk-fw-bold);
    letter-spacing: var(--rk-track-xl);
    text-transform: uppercase;
    text-align: left;
    color: var(--rk-steel);
    background: var(--rk-paper);
    border-bottom: var(--rk-border) solid var(--rk-line-hard);
    padding: var(--rk-sp-6) var(--rk-sp-8);
}

.help-prose td {
    border-bottom: var(--rk-border-hair) solid var(--rk-line);
    padding: var(--rk-sp-6) var(--rk-sp-8);
    vertical-align: top;
}

/* ---------------------------------------------------------- pictures */

.help-prose .help-figure {
    margin: var(--rk-sp-12) 0 var(--rk-sp-20);
}

.help-prose .help-figure img,
.help-prose .help-inline-img {
    display: block;
    max-width: 100%;
    height: auto;
    border: var(--rk-border-card) solid var(--rk-line-hard);
    box-shadow: var(--rk-shadow-card);
    background: var(--rk-card);
}

.help-prose figcaption {
    margin-top: var(--rk-sp-8);
    font-size: var(--rk-fs-lg);
    line-height: var(--rk-lh-snug);
    color: var(--rk-steel);
}

/* ---------------------------------------------------------- callouts

   The manual's three boxes - ✅ worth knowing, ⚠️ careful, 🛑 stop -
   each mark something that has caught somebody out, so they carry a
   rail and a tint rather than reading as one more paragraph. */

.help-prose blockquote {
    margin: 0 0 var(--rk-sp-16);
    padding: var(--rk-sp-10) var(--rk-sp-14);
    border-left: var(--rk-rail) solid var(--rk-steel);
    background: var(--rk-card);
}

.help-prose blockquote > :last-child {
    margin-bottom: 0;
}

.help-prose .help-callout--ok {
    border-left-color: var(--rk-ok);
    background: var(--rk-ok-soft);
}

.help-prose .help-callout--warn {
    border-left-color: var(--rk-warn);
    background: var(--rk-warn-soft);
}

.help-prose .help-callout--stop {
    border-left-color: var(--rk-danger);
    background: var(--rk-danger-soft);
}

/* ---------------------------------------------------------- search highlight */

.help-mark {
    background: var(--rk-accent-soft);
    color: var(--rk-ink);
    font-weight: var(--rk-fw-semibold);
    border-bottom: var(--rk-border) solid var(--rk-accent);
    padding: 0;
}

/* ---------------------------------------------------------- print

   PRINT IS THE CHAPTER AND NOTHING ELSE. The library's Print button
   calls the browser's own print; these rules take the app bar, the
   chapter list, the reader's buttons, the help panel and the run
   drawer off the page, so the paper carries the manual - pictures,
   tables and boxes kept whole across a page break where they fit. */

@media print {
    body:has(.helpreader) .appbar,
    body:has(.helpreader) .helplib__side,
    body:has(.helpreader) .helpreader__tools,
    body:has(.helpreader) .helpreader__toc,
    body:has(.helpreader) .helpreader__nav,
    body:has(.helpreader) .helppanel,
    body:has(.helpreader) .rundrawer,
    body:has(.helpreader) .runtab {
        display: none !important;
    }

    body:has(.helpreader) .helplib {
        display: block;
    }

    .help-prose .help-figure,
    .help-prose blockquote,
    .help-prose tr {
        break-inside: avoid;
    }

    .help-prose h2,
    .help-prose h3 {
        break-after: avoid;
    }

    .help-prose .help-figure img {
        box-shadow: none;
    }
}