/* CaRob Computing — the SportsTrak 3000 user guide at /help.
   Only loaded on those pages (see the Head section in _Layout).

   The topic bodies come out of UserGuide.chm unchanged apart from link and image
   rewriting, so they still carry Help & Manual's own class names — p_BodyText,
   f_Button, p_Heading3 and the rest. Those classes are styled here rather than
   rewritten in the converter, because the class IS the author's meaning: f_Button
   marks a button caption, f_Warning marks a warning. Flattening them into plain
   markup would throw away information the guide's author put there on purpose.

   The colours below are the guide's own, not the site's, for the same reason:
   green button captions and red warnings are what the printed manual and the
   in-program help both show, so a reader comparing the two sees one document. */

/* ---------- Section shell ---------- */

.help-hero {
    background: linear-gradient(160deg, #14243a 0%, #1d3c60 100%);
    color: #fff;
    padding-block: 2.75rem 2.25rem;
}

.help-crumbs { font-size: .85rem; color: rgba(255, 255, 255, .75); margin-bottom: .5rem; }
.help-crumbs a { color: rgba(255, 255, 255, .85); text-decoration: none; }
.help-crumbs a:hover { color: #fff; text-decoration: underline; }
.help-crumbs span { margin: 0 .4rem; }

.help-hero h1 { font-weight: 700; margin-bottom: .5rem; }
.help-hero-intro { color: rgba(255, 255, 255, .92); max-width: 44rem; font-size: 1.08rem; }
.help-hero-note { color: rgba(255, 255, 255, .7); max-width: 44rem; font-size: .9rem; margin-bottom: 0; }
.help-hero-note a { color: #fff; }
.help-hero-note .f_Button { color: #9fe6c0; }

/* ---------- Search ---------- */

.help-search { display: flex; gap: .5rem; max-width: 32rem; margin: 1.25rem 0 1rem; }
.help-search .form-control { flex: 1 1 auto; }
.help-search .btn { flex: 0 0 auto; }
.help-nav .help-search { margin: 0 0 1.25rem; max-width: none; }

.help-contents-title { font-size: 1.3rem; margin-bottom: 1rem; }

.help-results { list-style: none; padding: 0; margin: 0 0 1rem; }
.help-results li { padding: 1rem 0; border-bottom: 1px solid var(--carob-line); }
.help-results li:first-child { padding-top: 0; }
.help-result-title { font-weight: 650; font-size: 1.05rem; text-decoration: none; }
.help-result-title:hover { text-decoration: underline; }
.help-result-trail { font-size: .8rem; color: var(--carob-ink-soft); margin-top: .15rem; }
.help-result-snippet { margin: .4rem 0 0; color: var(--carob-ink-soft); line-height: 1.55; }
.help-result-snippet mark {
    background: #fff2b8;
    color: inherit;
    padding: 0 .1em;
    border-radius: .15rem;
}

.help-contents { list-style: none; padding: 0; margin: 0; counter-reset: none; }
.help-contents li { padding: .3rem 0; border-bottom: 1px solid var(--carob-line); }
.help-contents a { text-decoration: none; }
.help-contents a:hover { text-decoration: underline; }
.help-depth-1 { font-weight: 600; }
.help-depth-2 { padding-left: 1.25rem !important; font-size: .95rem; }
.help-depth-3 { padding-left: 2.5rem !important; font-size: .92rem; }
.help-depth-4 { padding-left: 3.75rem !important; font-size: .9rem; }
.help-depth-2 a, .help-depth-3 a, .help-depth-4 a { color: var(--carob-ink-soft); }

.help-aside { position: sticky; top: 1.5rem; }

/* ---------- Topic page furniture ---------- */

.help-trail { font-size: .85rem; color: var(--carob-ink-soft); margin-bottom: 1.25rem; }
.help-trail a { text-decoration: none; }
.help-trail a:hover { text-decoration: underline; }
.help-trail span { margin: 0 .35rem; }
.help-trail-here { color: var(--carob-ink); font-weight: 600; margin: 0 !important; }

.help-nav { position: sticky; top: 1.5rem; font-size: .9rem; }
.help-nav-title { font-size: .8rem; text-transform: uppercase; letter-spacing: .06em; color: var(--carob-ink-soft); margin-bottom: .6rem; }
.help-nav-title a { color: inherit; text-decoration: none; }
.help-nav-title a:hover { color: var(--carob-accent); }
.help-nav ul { list-style: none; padding: 0; margin: 0; border-left: 2px solid var(--carob-line); }
.help-nav li { padding: .22rem 0 .22rem .75rem; margin-left: -2px; border-left: 2px solid transparent; }
.help-nav li a { text-decoration: none; color: var(--carob-ink-soft); }
.help-nav li a:hover { color: var(--carob-accent); }
.help-nav .help-nav-d1 > a { color: var(--carob-ink); font-weight: 600; }
.help-nav .help-nav-d2 { padding-left: 1.5rem; }
.help-nav .help-nav-d3 { padding-left: 2.25rem; font-size: .86rem; }
.help-nav .help-nav-d4 { padding-left: 3rem; font-size: .86rem; }
.help-nav li.here { border-left-color: var(--carob-accent); background: var(--carob-sand); }
.help-nav li.here > a { color: var(--carob-accent); font-weight: 600; }

.help-title { font-size: clamp(1.6rem, 3.2vw, 2.1rem); margin-bottom: 1.5rem; }

.help-pager {
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    margin-top: 3rem;
    padding-top: 1.25rem;
    border-top: 1px solid var(--carob-line);
}
.help-pager > div { flex: 1 1 0; min-width: 0; }
.help-pager-next { text-align: right; }
.help-pager a { text-decoration: none; display: block; }
.help-pager a:hover .help-pager-title { text-decoration: underline; }
.help-pager-dir { display: block; font-size: .75rem; text-transform: uppercase; letter-spacing: .06em; color: var(--carob-ink-soft); }
.help-pager-title { font-weight: 600; }

/* ---------- The guide's own markup ---------- */

/* Help & Manual gives paragraphs a 2px bottom margin and does its real spacing
   with empty paragraphs. Left as-is that reads as a run-on block, so the
   converter tags the empty ones as .help-spacer: real paragraphs get a readable
   gap here, and the spacers shrink to suit. The author's rhythm — where a break
   is and is not — survives; their exact millimetres do not. */
.help-body { color: #2e2e2e; line-height: 1.5; }
.help-body p { margin: 0 0 .55rem; text-indent: 0; }
.help-body p.help-spacer { margin: 0; height: .5rem; }
.help-body > p { max-width: 46rem; }
.help-body td > p:last-child, .help-body div > p:last-child { margin-bottom: 0; }

.help-body :is(h1, h2, h3, h4) { margin: 1.6rem 0 .6rem; letter-spacing: 0; }
.help-body :is(h1, h2, h3, h4):first-child { margin-top: 0; }
.help-body .f_Heading1 { font-size: 1.5rem; font-weight: 700; color: #0362bb; }
.help-body .f_Heading2 { font-size: 1.3rem; font-weight: 700; color: #003366; }
.help-body .f_Heading3 { font-size: 1.1rem; font-weight: 700; color: #003366; }

.help-body .f_BodyEmphasised { font-weight: 700; color: #2a60a2; }
.help-body .f_BodyItalicEmphasised { font-style: italic; font-weight: 700; }
.help-body .f_NormalBoldRed { font-weight: 700; color: #800000; }
.help-body .f_Listheaderbold { font-weight: 700; color: #000080; }
.help-body .f_TableTextemphasised { font-weight: 700; color: #003366; }

/* A button caption in the program. Kept green and italic because that is how the
   guide has always marked them, and readers match them against the screen. */
.help-body .f_Button { font-style: italic; font-weight: 700; color: #008000; }
.help-body .f_Instruction { font-weight: 700; color: #db0b0b; }
.help-body .f_Warning { font-style: italic; color: #d00; }
.help-body .f_Tip { background: #fff8dc; }
.help-body .f_ImageCaption { font-size: .85rem; font-style: italic; color: #993300; }

/* The guide indents body text half an inch from a left gutter the CHM viewer had
   and this page does not, so the absolute indents are dropped and only the
   RELATIVE ones kept — the classes that mean "further in than body text". */
.help-body .p_Normal05indent { margin-left: 1.5rem; }
.help-body .p_BodyIndented { margin-left: 2rem; }
.help-body .p_List { margin-left: 2.5rem; line-height: 1.5; }
.help-body .p_ImageCaption { text-indent: 0; }
.help-body .p_TableText { line-height: 1.45; }

.help-body a { color: var(--carob-accent); }
.help-body a.topiclink { text-decoration: none; border-bottom: 1px solid rgba(22, 104, 184, .35); }
.help-body a.topiclink:hover { border-bottom-color: currentColor; }

/* Screenshots keep their authored size as width/height attributes so the browser
   can reserve the space, and shrink from there. The converter moved those out of
   the inline style precisely so this rule can win. */
.help-body img {
    max-width: 100%;
    height: auto;
    border-radius: .2rem;
}

/* Tables are laid out in inches converted to pixels — up to about 1000px wide —
   so each one scrolls inside itself rather than pushing the page sideways. */
.help-table-scroll { overflow-x: auto; margin: .5rem 0; max-width: 100%; }
.help-body table { border-collapse: collapse; }
.help-body table.Bordered { background: #f2fbfb; border: 1px solid #808080; }
.help-body table.Bordered :is(th, td) { border: 1px solid #808080; padding: .35rem .5rem; vertical-align: top; }

.help-body hr { border: 0; border-top: 1px solid var(--carob-line); margin: 1.5rem 0; }

/* Anchors are the targets of in-page links from other topics; the sticky header
   would otherwise sit on top of whatever was jumped to. */
.help-body [id] { scroll-margin-top: 1.5rem; }

@media (max-width: 991.98px) {
    .help-nav {
        position: static;
        margin-top: 2.5rem;
        padding-top: 1.5rem;
        border-top: 1px solid var(--carob-line);
    }
}