/* ===========================================================================
   Help Center - /help, /help/<slug>, and Manage > Help Content.
   ---------------------------------------------------------------------------
   A global sheet rather than a scoped .razor.css on purpose: guide bodies are
   rendered from HTML held in dbo.HelpSection, and markup injected as a
   MarkupString never carries a component's scope attribute, so scoped rules
   would miss every callout, table and step inside a guide.

   Page chrome (card shadow rounded / card-body / RadzenIcon + h4 header /
   form-control / RadzenButton) is Bootstrap and Radzen, exactly as every other
   VIBE page builds it - nothing here restyles those. This file only covers the
   manual itself: the contents rail, callouts, steps, tables and definition
   rows, which have no equivalent anywhere else in the app.

   Colours come from site.css's VIBE palette (.bg-vibe-*), restated here as
   custom properties so the guide matches the rest of the product. The one
   exception is the alert legend, which uses the scrubber's own red / yellow /
   blue because the manual tells the reader to look for those exact colours.

   Mobile first. The contents rail beside the article turns on at 992px.
   =========================================================================== */

:root {
    /* VIBE brand, from site.css */
    --vibe-blue: #009ade;
    --vibe-blue-hover: #007fdd;
    --vibe-teal: #00d8d2;
    --vibe-green: #7cc40a;
    --vibe-orange: #ff5f00;
    --vibe-dark: #203b86;
    --vibe-gray: #a7a9b0;

    /* Blue darkened for body-size text on white; #009ade alone is too light to read. */
    --help-link: #0071a8;
    /* Green darkened for the same reason - #7cc40a on white fails contrast at 14px. */
    --help-green-ink: #5c9107;

    --help-ink: #212529;          /* Bootstrap's body colour, as the rest of VIBE uses */
    --help-body: #41505e;
    --help-muted: #6c757d;        /* Bootstrap .text-muted */

    --help-rule: #dee2e6;         /* Bootstrap border colour */
    --help-rule-soft: #eceff1;
    --help-panel: #f2f2f2;        /* the grey VIBE uses behind report filter bodies */

    /* Flat background tints, used behind icon tiles and callouts. Low alpha so coloured
       text keeps its contrast and the page still reads as white, not as a stack of boxes. */
    --help-tint-blue: rgba(0, 154, 222, .10);
    --help-tint-blue-soft: rgba(0, 154, 222, .055);
    --help-tint-orange: rgba(255, 95, 0, .06);
    --help-tint-green: rgba(124, 196, 10, .09);
    --help-tint-dark: rgba(32, 59, 134, .05);

    /* Scrubber alert colours, so "Fatal Errors (red)" shows the red in the tool. */
    --help-alert-red: #dc3545;
    --help-alert-yellow: #ffc107;
    --help-alert-blue: #009ade;
}

/* ---- Shell -------------------------------------------------------------- */

.help-page { color: var(--help-body); }

/* Bootstrap's card-body is 1rem all round, which reads as cramped on a page this wide.
   The page wrapper carries px-3/px-lg-4 for the gap to the viewport edge; this is the
   gap from the card edge to its contents. */
.help-page > .card > .card-body { padding: 1.25rem; }

@media (min-width: 768px) {
    .help-page > .card > .card-body { padding: 1.75rem 2rem; }
}

.help-loading { display: flex; justify-content: center; padding: 56px 0; }

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

/* Bootstrap input-group does the work; this only adds the "/" hint and keeps the
   field from stretching the full width of a wide card. */
.help-search { max-width: 520px; }

.help-search .form-control:focus {
    border-color: var(--vibe-blue);
    box-shadow: 0 0 0 .2rem rgba(0, 154, 222, .2);
}

/* The whole addon is hidden on touch, not just the key inside it - hiding only the <kbd>
   left an empty bordered box sitting on the end of the field. */
.help-search-keywrap { display: none; }

/* Bootstrap styles <kbd> as white-on-dark; this is a hint, not a keystroke to shout about. */
.help-search-key {
    min-width: 22px;
    padding: 1px 6px;
    border: 1px solid var(--help-rule);
    border-radius: 3px;
    background: #fff;
    color: var(--help-muted);
    font-size: .75rem;
    font-weight: 600;
    text-align: center;
}

/* No keyboard to press it on, so no point advertising it. */
@media (hover: hover) and (pointer: fine) {
    .help-search-keywrap { display: flex; }
}

/* ---- Index: guide summary ---------------------------------------------- */

.help-feature {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 14px 16px;
    border: 1px solid var(--help-rule);
    border-left: 4px solid var(--vibe-blue);
    background: #fff;
    color: inherit;
    text-decoration: none;
}

.help-feature { background: var(--help-tint-blue-soft); }
.help-feature:hover { background: var(--help-tint-blue); color: inherit; }

.help-feature-icon {
    flex: 0 0 auto;
    display: none;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    border-radius: 10px;
    background: var(--help-tint-blue);
    color: var(--help-link);
    font-size: 1.4rem;
}

.help-feature-body { flex: 1 1 auto; min-width: 0; }

/* Spans, not blocks: the whole card is one <a>, so these need display set explicitly. */
.help-feature-title {
    display: block;
    font-size: 1.0625rem;
    font-weight: 700;
    color: var(--help-ink);
    margin-bottom: 2px;
}

.help-feature-sub { display: block; font-size: .9375rem; line-height: 1.5; max-width: 70ch; }

.help-feature-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 4px 16px;
    margin-top: 7px;
    color: var(--help-muted);
    font-size: .8125rem;
}

.help-feature-go {
    flex: 0 0 auto;
    display: none;
    align-items: center;
    gap: 6px;
    color: var(--help-link);
    font-weight: 600;
    font-size: .9375rem;
    white-space: nowrap;
}

.help-feature:hover .help-feature-go { text-decoration: underline; }

/* ---- Index: topic list -------------------------------------------------- */

.help-group-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
    padding-bottom: 7px;
    border-bottom: 2px solid var(--vibe-blue);
}

.help-group-title {
    font-size: .8125rem;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--help-ink);
    margin: 0;
}

.help-group-open {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: .875rem;
    font-weight: 600;
    color: var(--help-link);
    text-decoration: none;
    white-space: nowrap;
}

.help-group-open:hover { text-decoration: underline; color: var(--help-link); }

.help-row {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 12px 10px;
    border-bottom: 1px solid var(--help-rule-soft);
    color: inherit;
    text-decoration: none;
}

.help-row:last-child { border-bottom: 0; }
.help-row:hover, .help-row:focus-visible { background: var(--help-tint-blue-soft); color: inherit; }

/* A tinted tile rather than a bare glyph: ten rows of the same shape are hard to scan,
   and the tile gives the eye something to land on. Fills in on hover. */
.help-row-icon {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: 8px;
    background: var(--help-tint-blue);
    color: var(--help-link);
    font-size: 1.0625rem;
}

.help-row:hover .help-row-icon { background: var(--vibe-blue); color: #fff; }

/* How long this topic takes to read, so someone deciding mid-shift knows what they're in for. */
.help-row-time {
    flex: 0 0 auto;
    display: none;
    padding: 2px 8px;
    border-radius: 999px;
    background: var(--help-panel);
    color: var(--help-muted);
    font-size: .75rem;
    font-weight: 600;
    white-space: nowrap;
}

@media (min-width: 576px) {
    .help-row-time { display: inline-block; }
}

.help-row-body { flex: 1 1 auto; min-width: 0; }

.help-row-title {
    display: block;
    font-weight: 700;
    color: var(--help-ink);
    line-height: 1.4;
}

.help-row:hover .help-row-title { color: var(--help-link); }

.help-row-sub {
    display: block;
    color: var(--help-muted);
    font-size: .875rem;
    line-height: 1.45;
    max-width: 76ch;
}

.help-row-chevron { flex: 0 0 auto; align-self: center; color: var(--help-rule); font-size: .75rem; }
.help-row:hover .help-row-chevron { color: var(--vibe-blue); }

/* ---- Empty state -------------------------------------------------------- */

.help-empty { padding: 40px 4px; color: var(--help-muted); }
.help-empty > i { font-size: 1.25rem; opacity: .5; }
.help-empty > p { margin: 10px 0 0; max-width: 56ch; }
.help-empty-hint { font-size: .875rem; }

/* ---- Guide: reading progress ------------------------------------------- */

/* Sits under the blue app header, not at the top of the window. */
.help-progress {
    position: sticky;
    top: 0;
    z-index: 20;
    height: 3px;
    margin: -1px 0 0;
    background: var(--help-rule-soft);
}

.help-progress-bar {
    height: 100%;
    width: 0;
    background: var(--vibe-blue);
    transition: width .1s linear;
}

/* ---- Guide: header ------------------------------------------------------ */

.help-crumbs {
    display: flex;
    align-items: center;
    gap: 7px;
    font-size: .8125rem;
    color: var(--help-muted);
}

.help-crumbs a { color: var(--help-muted); text-decoration: none; }
.help-crumbs a:hover { color: var(--help-link); text-decoration: underline; }
.help-crumbs .bi { font-size: .625rem; }

.help-head-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 4px 16px;
    color: var(--help-muted);
    font-size: .8125rem;
}

/* ---- Guide: contents ---------------------------------------------------- */

.help-article-layout { display: block; }

/* On a phone the contents is a row of chips pinned under the header, which stays
   usable without a collapse control that CSS alone can't drive. */
.help-toc {
    position: sticky;
    top: 3px;
    z-index: 15;
    margin: 0 0 20px;
    padding: 9px 0;
    background: #fff;
    border-bottom: 1px solid var(--help-rule);
}

.help-toc-label { display: none; }

.help-toc ol {
    display: flex;
    gap: 6px;
    overflow-x: auto;
    margin: 0;
    padding: 0 0 2px;
    list-style: none;
    scrollbar-width: thin;
}

.help-toc li { flex: 0 0 auto; }

.help-toc a {
    display: inline-block;
    padding: 6px 11px;
    border: 1px solid var(--help-rule);
    border-radius: .25rem;
    background: #fff;
    color: var(--help-body);
    font-size: .8125rem;
    white-space: nowrap;
    text-decoration: none;
}

.help-toc a:hover { border-color: var(--vibe-blue); color: var(--help-link); }

/* Scroll-spy: helpInitArticle keeps this in step with what is on screen. */
.help-toc a.is-active {
    border-color: var(--vibe-blue);
    background: var(--vibe-blue);
    color: #fff;
    font-weight: 600;
}

/* ---- Guide body --------------------------------------------------------- */

.help-article { min-width: 0; font-size: 1rem; line-height: 1.7; }

.help-section {
    /* Keeps a heading clear of the sticky contents when a link jumps to it. */
    scroll-margin-top: 76px;
    padding: 0 0 32px;
}

.help-section-title {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 6px 10px;
    font-size: 1.3125rem;
    font-weight: 700;
    color: var(--help-ink);
    /* The rule above each heading is what separates sections - no nested boxes. */
    border-top: 1px solid var(--help-rule);
    padding-top: 26px;
    margin: 10px 0 14px;
}

.help-section:first-child .help-section-title { border-top: 0; padding-top: 4px; }

.help-section-title .bi {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    border-radius: 8px;
    background: var(--help-tint-blue);
    color: var(--help-link);
    font-size: .9375rem;
}

/* Copy-a-link button: support can send a client straight to one step. Appears on
   hover, and on focus so it is reachable from the keyboard. */
.help-anchor-link {
    flex: 0 0 auto;
    width: 26px;
    height: 26px;
    border: 0;
    border-radius: .25rem;
    background: transparent;
    color: var(--help-muted);
    font-size: .8125rem;
    opacity: 0;
}

.help-section-title:hover .help-anchor-link,
.help-anchor-link:focus-visible { opacity: 1; }

.help-anchor-link:hover { background: var(--help-panel); color: var(--help-link); }
.help-anchor-link.is-copied { opacity: 1; color: var(--help-green-ink); }

@media (hover: none) {
    /* No hover on touch, so never hide it there. */
    .help-anchor-link { opacity: 1; }
}

.help-section-lead { font-size: 1.0625rem; line-height: 1.6; margin: 0 0 18px; max-width: 68ch; }

.help-article h3 {
    font-size: .875rem;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--help-ink);
    padding-bottom: 7px;
    border-bottom: 1px solid var(--help-rule);
    margin: 30px 0 14px;
}

.help-article h4 { font-size: .9375rem; font-weight: 700; color: var(--help-ink); margin: 20px 0 6px; }
.help-article p { max-width: 72ch; }
.help-article strong { color: var(--help-ink); }

/* ---- "Open in VIBE" ----------------------------------------------------- */

/* Sits on the section heading row, pushed right. Eight tool sections means eight of
   these down the page, so it is a quiet utility rather than a filled call to action,
   and it lands in the same place every time. It wraps under the heading on a phone. */
.help-tool-cta {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    margin-left: auto;
    padding: 5px 12px;
    border: 1px solid var(--help-rule);
    border-radius: .25rem;
    background: #fff;
    color: var(--help-link);
    font-size: .8125rem;
    font-weight: 600;
    white-space: nowrap;
    text-decoration: none;
}

.help-tool-cta:hover {
    border-color: var(--vibe-blue);
    background: var(--vibe-blue);
    color: #fff;
}

.help-tool-cta .bi { font-size: .6875rem; }

/* ---- Lists -------------------------------------------------------------- */

.help-list { margin: 0 0 16px; padding-left: 20px; }
.help-list li { margin-bottom: 7px; max-width: 72ch; }
.help-list li::marker { color: var(--vibe-blue); }

.help-list-2col {
    list-style: none;
    padding-left: 0;
    display: grid;
    grid-template-columns: 1fr;
    gap: 0;
    border-top: 1px solid var(--help-rule);
}

.help-list-2col li { margin: 0; padding: 7px 2px; border-bottom: 1px solid var(--help-rule-soft); }

/* ---- Tool index (guide overview) --------------------------------------- */

.help-tool-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 0;
    margin: 16px 0 8px;
    border-top: 1px solid var(--help-rule);
}

.help-tool {
    display: flex;
    align-items: baseline;
    gap: 12px;
    padding: 12px 8px 12px 2px;
    border-bottom: 1px solid var(--help-rule-soft);
    color: inherit;
    text-decoration: none;
}

.help-tool:hover { background: var(--help-panel); color: inherit; }

.help-tool-num {
    flex: 0 0 auto;
    min-width: 1.25em;
    color: var(--help-muted);
    /* Tabular figures keep the 1-8 column straight. */
    font-variant-numeric: tabular-nums;
    font-weight: 700;
    font-size: .875rem;
}

.help-tool:hover .help-tool-num { color: var(--vibe-blue); }

.help-tool-body { min-width: 0; }
.help-tool-name { display: block; font-weight: 700; color: var(--help-ink); line-height: 1.4; }
.help-tool:hover .help-tool-name { color: var(--help-link); }

.help-tool-desc {
    display: block;
    color: var(--help-muted);
    font-size: .875rem;
    line-height: 1.5;
    max-width: 68ch;
}

/* ---- Callouts ----------------------------------------------------------- */

/* Colour on the left edge and in the title, nothing else: you can tell a warning
   from an aside at a glance, and the body stays on the same white as the prose. */
.help-callout {
    margin: 20px 0;
    padding: 13px 16px;
    border-left: 3px solid var(--help-rule);
    border-radius: 0 6px 6px 0;
    background: var(--help-panel);
}

.help-callout p:last-child, .help-callout ul:last-child { margin-bottom: 0; }
.help-callout p { max-width: 68ch; }

.help-callout-title { font-weight: 700; color: var(--help-ink); margin-bottom: 3px; }

.help-callout-does { border-left-color: var(--vibe-blue); background: var(--help-tint-blue-soft); }
.help-callout-does .help-callout-title { color: var(--help-link); }

.help-callout-warning { border-left-color: var(--vibe-orange); background: var(--help-tint-orange); }
.help-callout-warning .help-callout-title { color: var(--vibe-orange); }

.help-callout-tip { border-left-color: var(--vibe-green); background: var(--help-tint-green); }
.help-callout-tip .help-callout-title { color: var(--help-green-ink); }

.help-callout-example { border-left-color: var(--vibe-dark); background: var(--help-tint-dark); }
.help-callout-example .help-callout-title { color: var(--vibe-dark); }

.help-callout-note { border-left-color: var(--vibe-gray); }

/* ---- Tables ------------------------------------------------------------- */

.help-table-wrap {
    /* A narrow screen scrolls the table sideways instead of squeezing the columns. */
    overflow-x: auto;
    margin: 16px 0 20px;
}

.help-table { width: 100%; min-width: 440px; border-collapse: collapse; font-size: .9375rem; }

.help-table th, .help-table td {
    padding: 10px 14px;
    text-align: left;
    vertical-align: top;
    border-bottom: 1px solid var(--help-rule-soft);
}

.help-table thead th {
    background: var(--help-panel);
    border-bottom: 2px solid var(--vibe-blue);
    color: var(--help-ink);
    font-weight: 700;
    font-size: .75rem;
    letter-spacing: .07em;
    text-transform: uppercase;
    white-space: nowrap;
    padding-bottom: 7px;
}

.help-table td:first-child { font-weight: 700; color: var(--help-ink); width: 34%; }

/* ---- Definition rows ---------------------------------------------------- */

.help-cards {
    display: grid;
    grid-template-columns: 1fr;
    gap: 0;
    margin: 16px 0 20px;
    border-top: 1px solid var(--help-rule);
}

.help-card { padding: 12px 0; border-bottom: 1px solid var(--help-rule-soft); }
.help-card p { margin-bottom: 0; max-width: 60ch; }

.help-card-title {
    display: flex;
    align-items: baseline;
    gap: 8px;
    font-weight: 700;
    color: var(--help-ink);
    margin-bottom: 3px;
}

/* A swatch before the colour-coded titles, so "Fatal Errors (red)" shows the red
   the reader is looking for in the scrubber itself. */
.help-card-danger .help-card-title::before,
.help-card-warning .help-card-title::before,
.help-card-info .help-card-title::before,
.help-card-success .help-card-title::before {
    content: "";
    flex: 0 0 auto;
    width: 10px;
    height: 10px;
    border-radius: 2px;
}

.help-card-danger .help-card-title::before { background: var(--help-alert-red); }
.help-card-warning .help-card-title::before { background: var(--help-alert-yellow); }
.help-card-info .help-card-title::before { background: var(--help-alert-blue); }
.help-card-success .help-card-title::before { background: var(--vibe-green); }

/* ---- Numbered steps ----------------------------------------------------- */

.help-steps { counter-reset: help-step; list-style: none; margin: 18px 0 20px; padding: 0; }

.help-steps > li {
    counter-increment: help-step;
    position: relative;
    padding: 0 0 20px 38px;
    margin: 0;
}

/* A hairline down the numbers, so a walkthrough reads as one sequence. */
.help-steps > li::after {
    content: "";
    position: absolute;
    left: 12px;
    top: 27px;
    bottom: 2px;
    width: 1px;
    background: var(--help-rule);
}

.help-steps > li:last-child { padding-bottom: 0; }
.help-steps > li:last-child::after { display: none; }

.help-steps > li::before {
    content: counter(help-step);
    position: absolute;
    left: 0;
    top: 1px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 25px;
    height: 25px;
    border-radius: 50%;
    background: var(--vibe-blue);
    color: #fff;
    font-weight: 700;
    font-size: .8125rem;
    font-variant-numeric: tabular-nums;
}

.help-steps > li > p:last-child { margin-bottom: 0; }
.help-steps p { max-width: 68ch; }

.help-step-title { font-weight: 700; color: var(--help-ink); margin-bottom: 2px; }

/* ---- Worked example ----------------------------------------------------- */

.help-scenario {
    margin: 24px 0;
    padding: 16px 18px;
    border: 1px solid var(--help-rule);
    background: var(--help-panel);
}

.help-scenario-title {
    font-size: .75rem;
    font-weight: 700;
    letter-spacing: .09em;
    text-transform: uppercase;
    color: var(--help-muted);
    margin-bottom: 14px;
}

.help-scenario .help-cards { border-top-color: var(--help-rule); }
.help-scenario .help-card { border-bottom-color: var(--help-rule); }

/* ---- Guide footer ------------------------------------------------------- */

.help-pager {
    display: grid;
    grid-template-columns: 1fr;
    gap: 0;
    border-top: 1px solid var(--help-rule);
}

.help-pager-link {
    display: flex;
    align-items: center;
    gap: 11px;
    padding: 16px 4px;
    border-bottom: 1px solid var(--help-rule-soft);
    color: inherit;
    text-decoration: none;
}

.help-pager-link:hover { color: inherit; }
.help-pager-link:hover .help-pager-title { color: var(--help-link); }

.help-pager-body { flex: 1 1 auto; min-width: 0; }
.help-pager-label { display: block; font-size: .75rem; color: var(--help-muted); }
.help-pager-title { display: block; font-weight: 700; color: var(--help-ink); line-height: 1.4; }
.help-pager-link .bi { flex: 0 0 auto; color: var(--help-muted); font-size: 1rem; }
.help-pager-link:hover .bi { color: var(--vibe-blue); }

/* ---- Back to top -------------------------------------------------------- */

.help-top {
    position: fixed;
    right: 18px;
    /* Clear of the VIBE IQ coach bubble and the toast stack in the same corner. */
    bottom: 160px;
    z-index: 900;
    display: none;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    border: 1px solid var(--help-rule);
    border-radius: .25rem;
    background: #fff;
    color: var(--help-body);
    box-shadow: 0 .125rem .25rem rgba(0, 0, 0, .075);
}

.help-top.is-visible { display: inline-flex; }
.help-top:hover { border-color: var(--vibe-blue); color: var(--help-link); }

/* ---- Help content editor (Manage > Help Content) ------------------------ */

.help-editor-section { border: 1px solid var(--help-rule); margin-bottom: 10px; background: #fff; }

.help-editor-head {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    padding: 12px 14px;
}

.help-editor-head .help-editor-name {
    flex: 1 1 200px;
    min-width: 0;
    font-weight: 700;
    color: var(--help-ink);
}

.help-editor-body { padding: 0 14px 14px; border-top: 1px solid var(--help-rule-soft); }

.help-editor-body label {
    display: block;
    font-size: .75rem;
    font-weight: 700;
    letter-spacing: .03em;
    text-transform: uppercase;
    color: var(--help-muted);
    margin: 16px 0 5px;
}

.help-editor-html {
    width: 100%;
    min-height: 340px;
    font-family: Consolas, "Courier New", monospace;
    font-size: .8125rem;
    line-height: 1.55;
}

.help-editor-actions { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 16px; }

.help-badge {
    display: inline-block;
    padding: 1px 8px;
    border: 1px solid var(--help-rule);
    border-radius: 3px;
    font-size: .6875rem;
    font-weight: 700;
    letter-spacing: .05em;
    text-transform: uppercase;
}

.help-badge-db { border-color: var(--vibe-blue); color: var(--help-link); }
.help-badge-builtin { color: var(--help-muted); }

.help-editor-preview { border: 1px solid var(--help-rule); padding: 16px 18px; margin-top: 10px; }

/* ---- Wider screens ------------------------------------------------------ */

@media (max-width: 575.98px) {
    /* Once it wraps under the heading, margin-left:auto would strand it against
       the right edge - align it with the text instead. */
    .help-tool-cta { margin-left: 0; }
}

@media (min-width: 576px) {
    .help-cards-2, .help-cards-3, .help-cards-4 { border-top: 0; }

    .help-cards-2 { grid-template-columns: repeat(2, 1fr); column-gap: 32px; }
    .help-tool-grid { grid-template-columns: repeat(2, 1fr); column-gap: 32px; }
    .help-list-2col { grid-template-columns: repeat(2, 1fr); column-gap: 32px; }
    .help-pager { grid-template-columns: 1fr 1fr; column-gap: 32px; }

    /* Mirror the second card so the pair reads outwards from the middle of the page. */
    .help-pager-next { flex-direction: row-reverse; text-align: right; }

    .help-cards-2 .help-card,
    .help-cards-3 .help-card,
    .help-cards-4 .help-card { border-top: 1px solid var(--help-rule); border-bottom: 0; }

    .help-feature-icon { display: inline-flex; }
}

@media (min-width: 768px) {
    .help-cards-3 { grid-template-columns: repeat(3, 1fr); }
    .help-cards-4 { grid-template-columns: repeat(2, 1fr); }
    .help-feature-go { display: inline-flex; }
}

@media (min-width: 992px) {
    .help-cards-4 { grid-template-columns: repeat(4, 1fr); }

    /* Contents moves out of the flow and becomes a rail down the left. */
    .help-article-layout {
        display: grid;
        grid-template-columns: 236px minmax(0, 1fr);
        gap: 40px;
        align-items: start;
    }

    .help-toc {
        position: sticky;
        top: 12px;
        margin: 8px 0 0;
        padding: 0;
        background: transparent;
        border-bottom: 0;
        /* Its own scrollbar so a long contents never pushes the article down. */
        max-height: calc(100vh - 160px);
        overflow-y: auto;
    }

    .help-toc-label {
        display: block;
        font-size: .6875rem;
        font-weight: 700;
        letter-spacing: .11em;
        text-transform: uppercase;
        color: var(--help-muted);
        padding-bottom: 8px;
        margin-bottom: 6px;
        border-bottom: 1px solid var(--help-rule);
    }

    .help-toc ol { display: block; overflow: visible; }
    .help-toc li { margin: 0; }

    .help-toc a {
        display: block;
        padding: 6px 0 6px 12px;
        border: 0;
        border-left: 3px solid var(--help-rule);
        border-radius: 0;
        background: transparent;
        color: var(--help-muted);
        font-size: .875rem;
        line-height: 1.4;
        white-space: normal;
    }

    .help-toc a:hover { border-left-color: var(--vibe-gray); color: var(--help-ink); }

    .help-toc a.is-active {
        border-left-color: var(--vibe-blue);
        background: transparent;
        color: var(--help-link);
        font-weight: 700;
    }

    .help-section { scroll-margin-top: 16px; }
}

/* ---- Motion ------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
    .help-progress-bar { transition: none; }
}

/* ---- Print -------------------------------------------------------------- */

@media print {
    .help-toc,
    .help-crumbs,
    .help-progress,
    .help-top,
    .help-pager,
    .help-anchor-link,
    .help-tool-cta,
    .help-search { display: none !important; }

    .help-article-layout { display: block; }
    .help-article { color: #000; }

    .help-section {
        /* Keep a tool's walkthrough on one page where it fits. */
        break-inside: avoid;
        page-break-inside: avoid;
    }

    .help-callout,
    .help-card,
    .help-scenario,
    .help-table-wrap { break-inside: avoid; page-break-inside: avoid; }

    .help-table-wrap { overflow: visible; }
    a[href]::after { content: ""; }
}