/*
 * Help documentation section.
 *
 * Its own stylesheet rather than additions to the theme, following the same
 * pattern as /forms/forms.css. main.purge.css is a generated, purged file --
 * the column classes this layout needs (col-lg-8 / col-lg-4) were purged out
 * of it, so the two-column split is done here instead.
 */

/*
 * One resting shadow for every card-like surface in the section, and one
 * larger one for the lift. Kept as custom properties so the two never drift
 * apart -- "grows on hover" only reads as growth if both come from the same
 * place.
 */
:root {
    --help-card-shadow: 0 1px 2px rgba(16, 24, 40, 0.04), 0 2px 6px rgba(16, 24, 40, 0.06);
    --help-card-shadow-hover: 0 8px 18px rgba(16, 24, 40, 0.10), 0 18px 40px rgba(16, 24, 40, 0.10);
}

.help-layout {
    display: grid;
    grid-template-columns: 1fr;
    gap: 2rem;
    align-items: start;
}

@media (min-width: 992px) {
    .help-layout {
        grid-template-columns: minmax(0, 1fr) 320px;
        gap: 3rem;
    }

    /* the nav stays in view while a long article scrolls past it */
    .help-sidebar {
        position: sticky;
        top: 2rem;
    }
}

.help-main {
    min-width: 0;
}

/* The page header, and the search results card, in the main column: the same
   resting shadow as the topic cards, so every surface in the column is lit
   the same way. No border -- in this column a border would single them out,
   since it belongs to the sidebar blocks. No hover on either: one is a
   heading, the other a container of links. */
.help-hero,
.help-results-panel,
.help-content-card {
    box-shadow: var(--help-card-shadow);
}

/* --- Topic cards ----------------------------------------------------------
   Carried over from the original hardcoded help-docs page, which kept these
   in an inline <style> block. The icon box now renders the Bootstrap icon
   tag stored on each topic rather than a fixed SVG file.
   ------------------------------------------------------------------------ */

/*
 * Bootstrap's .stretched-link technique, under our own name: the anchor's
 * ::after is absolutely positioned over the nearest positioned ancestor, so
 * the whole card is clickable from one real link.
 *
 * .stretched-link itself does NOT exist here -- it was purged out of
 * main.purge.css, like .input-group and the col-lg-* classes -- and defining
 * a global .stretched-link from a help stylesheet would leak, so it is
 * namespaced instead.
 *
 * Known trade-off of the technique: the overlay sits above the card's text,
 * so a visitor cannot select the description with the mouse.
 */
.help-stretched-link::after {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 1;
    content: "";
}

/*
 * THE TRAP: the theme's .panel is `position: relative`, and a stretched
 * ::after is bounded by its nearest POSITIONED ancestor -- not by the element
 * you had in mind. With the link inside <div class="panel">, the overlay
 * covered only the heading and description, so the icon above them and the
 * View Articles button below them were not clickable while the middle of the
 * card was.
 *
 * Making that inner panel static hands the job back to .help-category-card.
 * Scoped to this card, so the theme's .panel is untouched everywhere else.
 */
.help-category-card .panel {
    position: static;
}

.help-category-title-link {
    color: inherit;
    text-decoration: none;
}

.help-category-title-link:hover,
.help-category-title-link:focus {
    color: inherit;
    text-decoration: none;
}

/* the positioned ancestor the stretched ::after resolves against */
.help-category-card {
    transition: transform 0.25s ease, box-shadow 0.25s ease;
    height: 100%;
    position: relative;
    box-shadow: var(--help-card-shadow);
    /* cursor inherits, so the icon, the heading, the description and the
       button all show the hand -- the whole card is one click target and
       should not read as text anywhere */
    cursor: pointer;
}

/* Keyed on the CARD now, not on a wrapping link, since the link lives inside
   it. :focus-within so tabbing to the title lifts the card too -- a keyboard
   user gets the same feedback as a mouse. */
.help-category-card:hover,
.help-category-card:focus-within {
    transform: translateY(-3px);
    box-shadow: var(--help-card-shadow-hover);
}

.help-category-icon {
    font-size: 2.25rem;
    line-height: 1;
}

/* Looks like a button, is a span -- the card's stretched link does the work.
   align-self keeps it hugging its text instead of filling the column width. */
.help-category-btn {
    display: inline-flex;
    align-items: center;
    align-self: flex-start;
    gap: 0.4rem;
    padding: 0.4rem 0.85rem;
    border: 1px solid #37a901;
    border-radius: 0.375rem;
    font-size: 0.8rem;
    font-weight: 600;
    line-height: 1.2;
    color: #37a901;
    transition: background-color 0.2s ease, color 0.2s ease;
}

.help-category-card:hover .help-category-btn,
.help-category-card:focus-within .help-category-btn {
    background: #37a901;
    color: #ffffff;
}

.help-category-btn i {
    font-size: 0.85rem;
}

/* only the trailing arrow nudges -- moving the leading icon too would just
   look like the whole label was sliding */
.help-category-btn-arrow {
    transition: transform 0.2s ease;
}

.help-category-card:hover .help-category-btn-arrow,
.help-category-card:focus-within .help-category-btn-arrow {
    transform: translateX(2px);
}

/* --- Breadcrumb -----------------------------------------------------------
   Styled as a code-snippet style path: monospace, tinted, boxed. Sits on the
   hero band, so it needs its own background rather than inheriting the tint.
   ------------------------------------------------------------------------ */

.help-breadcrumb {
    display: inline-block;
    padding: 0.4rem 0.85rem;
    border: 1px solid #dfe3e8;
    border-radius: 0.375rem;
    background: #f6f8fa;
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;
    font-size: 0.85rem;
    line-height: 1.4;
    color: #24292f;
}

.help-breadcrumb a {
    color: inherit;
    text-decoration: none;
}

.help-breadcrumb a:hover,
.help-breadcrumb a:focus {
    text-decoration: underline;
}

.help-breadcrumb .help-breadcrumb-sep {
    margin: 0 0.35rem;
    color: #8c959f;
}

/* Spacing only. The COLOUR comes from the theme's accent convention --
   `h1 span, h2 span { color: var(--bto-green) !important }` -- so setting a
   colour here would be dead code. That rule is also why a span in any heading
   on this site turns brand green. */
.help-hero-label-sep {
    margin: 0 0.15rem;
}

/*
 * Article titles run long, and the size is right -- it is the wrapping that
 * reads badly. balance splits a two-line title evenly instead of stranding a
 * word on its own, and caps the measure so a very long title does not run the
 * full width of the card. Unsupported browsers simply wrap as before.
 */
.help-article-title {
    max-width: 30ch;
    text-wrap: balance;
}

@media (min-width: 992px) {
    .help-article-title {
        max-width: 40ch;
    }
}

/* At the foot of the hero rather than above the title, and centred with it:
   the hero is a centred banner, so a left-aligned breadcrumb was the only
   thing breaking its symmetry. It inherits text-center from the hero, so no
   alignment is set here.

   The negative bottom margin pulls it down into the hero's own padding
   (2.5rem from py-5, 3rem from xl:p-6), so it sits near the bottom edge
   rather than a full pad above it.

   It MUST be scoped under .help-hero: the theme has
   `.panel > :last-child { margin-bottom: 0 }` at specificity 0,2,0, and the
   breadcrumb is the hero's last child, so a bare .help-hero-breadcrumb
   (0,1,0) would lose and the negative margin would silently do nothing. */
.help-hero .help-hero-breadcrumb {
    margin: 1.25rem 0 -1.25rem 0;
}

/* --- Sidebar blocks -------------------------------------------------------
   Each block is a titled section of the nav. Structure only for now; the
   content of each is a separate pass.
   ------------------------------------------------------------------------ */

/* The resting shadow, but deliberately NO hover growth: a nav block is not
   itself a link, and lifting it under the cursor would promise a click that
   does nothing. Only the links inside it respond. */
.help-sidebar-block {
    padding: 1.25rem;
    margin-bottom: 1.5rem;
    border: 1px solid #e6e6e6;
    border-radius: 0.5rem;
    background: #ffffff;
    box-shadow: var(--help-card-shadow);
}

.help-sidebar-block:last-child {
    margin-bottom: 0;
}

.help-sidebar-title {
    margin: 0 0 0.75rem 0;
    font-size: 1rem;
    font-weight: 600;
}

/* --- Collapsible nav blocks -----------------------------------------------
   Every block but Search is a disclosure the visitor can fold. Which ones
   start open is declared in the markup with the `open` attribute -- Most
   Popular and More Help open, Browse by Tag and Ask a Question closed -- so
   the state is the same at every viewport, survives having no JavaScript,
   and cannot flash on load.
   ------------------------------------------------------------------------ */

.help-sidebar-block > summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    cursor: pointer;
    /* both halves of suppressing the default triangle */
    list-style: none;
}

.help-sidebar-block > summary::-webkit-details-marker {
    display: none;
}

.help-sidebar-block > summary .help-sidebar-title {
    margin: 0;
}

.help-sidebar-block[open] > summary {
    margin-bottom: 0.75rem;
}

.help-sidebar-chevron {
    flex: 0 0 auto;
    font-size: 0.8rem;
    line-height: 1;
    color: #8c959f;
    transition: transform 0.2s ease;
}

.help-sidebar-block[open] > summary .help-sidebar-chevron {
    transform: rotate(180deg);
}

/* --- Search ---------------------------------------------------------------
   The field itself is Bootstrap's .form-control, which main.purge.css keeps
   (the contact form uses it). .input-group does NOT survive the purge, so the
   button-attached-to-the-field behaviour is rebuilt here: a flex row, the
   field's right corners squared off, the button's left corners squared off,
   and the button pulled back a pixel so the two borders overlap into one.

   These rules are scoped to .help-input-group rather than defining a global
   .input-group, so nothing leaks onto other pages from this stylesheet.

   Results are hidden until a lookup fills the panel -- .is-open reveals it.
   ------------------------------------------------------------------------ */

.help-input-group {
    display: flex;
    flex-wrap: nowrap;
    align-items: stretch;
    width: 100%;
}

.help-input-group .form-control {
    flex: 1 1 auto;
    width: 1%;
    min-width: 0;
    height: 42px;
    padding: 0 0.75rem;
    font-size: 0.9rem;
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
}

/* so the focus ring is not clipped by the button sitting on top of it */
.help-input-group .form-control:focus {
    z-index: 3;
}

.help-input-group-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    width: 44px;
    margin-left: -1px;
    padding: 0;
    border: 1px solid #dfe3e8;
    border-radius: 0 0.375rem 0.375rem 0;
    background: #f6f8fa;
    font-size: 0.95rem;
    line-height: 1;
    color: #57606a;
    cursor: pointer;
}

.help-input-group-btn:hover,
.help-input-group-btn:focus {
    background: #eef1f4;
    color: #24292f;
}

.help-search-results {
    display: none;
    margin-top: 0.75rem;
    border-top: 1px solid #e6e6e6;
}

.help-search-results.is-open {
    display: block;
}

/* An unordered list. The rows are ranked -- title matches first, then by
   popularity -- but nothing in the rendering shows a position, so an ol would
   announce an order the reader has no way to see. Most Popular is the other
   way round: it shows its numbers, so it is a real ol. */

.help-search-list {
    list-style: none;
    margin: 0;
    padding: 0;
}

.help-search-list li {
    border-bottom: 1px solid #f0f0f0;
}

.help-search-list li:last-child {
    border-bottom: 0;
}

.help-search-result {
    display: block;
    padding: 0.6rem 0;
    text-decoration: none;
    color: inherit;
}

.help-search-result:hover,
.help-search-result:focus {
    text-decoration: none;
}

.help-search-result:hover .help-search-result-title,
.help-search-result:focus .help-search-result-title {
    color: #37a901;
}

.help-search-result-title {
    display: block;
    font-size: 0.875rem;
    font-weight: 500;
    line-height: 1.35;
    color: #24292f;
}

/* the same icon the topic cards' View Articles button uses, so an article
   reads as an article wherever it is listed. Muted at rest and greening with
   the title on hover, like the nav chevrons. */
.help-result-icon {
    margin-right: 0.45rem;
    color: #8c959f;
    transition: color 0.15s ease;
}

.help-search-result:hover .help-result-icon,
.help-search-result:focus .help-result-icon {
    color: #37a901;
}

.help-search-result-topic {
    display: block;
    margin-top: 0.15rem;
    font-size: 0.75rem;
    color: #8c959f;
}

/* --- the lead: type glyph + a video's duration ----------------------------
   Plain inline flow, NOT a reserved column: a title starts immediately after
   its icon, and a second line wraps back under the icon. Ragged title starts
   down a mixed list are accepted rather than padded away.

   One span only, so a line can never break between the glyph and the time.
   The duration sits beside the <i> rather than inside it, because that
   element is aria-hidden -- the glyph is decoration, the running time is not.
   -------------------------------------------------------------------------- */

.help-entry-lead {
    white-space: nowrap;
}

/* tighter than the bare .help-result-icon gap above: the duration follows the
   glyph inside the lead, so the pair reads as one unit */
.help-entry-lead .help-result-icon {
    margin-right: 0.35rem;
}

.help-entry-duration {
    margin-right: 0.35rem;
    font-size: 0.72rem;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    color: #8c959f;
}

/* --- type colours ---------------------------------------------------------
   Both types carry a hue rather than marking only the exception. Teal, not
   the #2a78d6 of the note callout -- no colour in this file does two jobs.

   The hover rule above already greens .help-result-icon and outranks these on
   specificity, so the type colour is the REST state and brand green stays the
   interaction state. Nothing more is needed to keep that true.
   -------------------------------------------------------------------------- */

.help-result-icon-article {
    color: #0e7490;
}

.help-result-icon-video {
    color: #6d4bd8;
}

/* --- video rows -----------------------------------------------------------
   A thumbnail beside the text, so a video is recognisable before the glyph is
   read. The title and description move into their own body column.
   -------------------------------------------------------------------------- */

.help-search-result-video {
    display: flex;
    gap: 0.7rem;
    align-items: flex-start;
}

.help-search-result-video .help-search-result-body {
    flex: 1 1 auto;
}

.help-result-thumb {
    position: relative;
    flex: 0 0 104px;
    aspect-ratio: 16 / 9;
    border-radius: 5px;
    overflow: hidden;
    background: #eef1f4 center/cover no-repeat;
}

/* no thumbnail stored: a play glyph on the same footprint, so rows with and
   without an image keep one rhythm */
.help-result-thumb-empty {
    display: flex;
    align-items: center;
    justify-content: center;
    color: #b0b8c1;
    font-size: 1.5rem;
}

/* --- divider rows ---------------------------------------------------------
   A divider is admin-authored HTML printed raw between article rows -- a
   group heading, a rule, a note. These rules only give it room and take the
   row border off; what it looks like is whatever was written into it.
   -------------------------------------------------------------------------- */

.help-entry-divider {
    padding: 0.9rem 0 0.35rem;
    border-bottom: 0 !important;
    /* breathing room above a section heading reached by its anchor (/help/account#businesses) */
    scroll-margin-top: 2rem;
}

.help-entry-divider h4 {
    margin: 0;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: #8c959f;
}

.help-entry-divider hr {
    margin: 0;
    border: 0;
    border-top: 1px solid #e6e6e6;
}

/* --- Most Popular ---------------------------------------------------------
   Numbered, unlike the search results: here the rank IS the content. A CSS
   counter rather than the list's own marker, so the number can be styled and
   a title wrapping to two lines stays aligned against it.
   ------------------------------------------------------------------------ */

.help-popular-list {
    list-style: none;
    margin: 0;
    padding: 0;
    counter-reset: help-popular;
}

.help-popular-list li {
    position: relative;
    padding: 0.5rem 0 0.5rem 1.6rem;
    border-bottom: 1px solid #f0f0f0;
    counter-increment: help-popular;
}

.help-popular-list li:first-child {
    padding-top: 0;
}

.help-popular-list li:last-child {
    padding-bottom: 0;
    border-bottom: 0;
}

/* no `top`, so it sits at its static position -- level with the first line
   of the title whether or not that row carries padding */
.help-popular-list li::before {
    content: counter(help-popular) ".";
    position: absolute;
    left: 0;
    font-size: 0.8rem;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    color: #8c959f;
}

.help-popular-link {
    font-size: 0.875rem;
    font-weight: 500;
    line-height: 1.35;
    color: #24292f;
    text-decoration: none;
}

.help-popular-link:hover,
.help-popular-link:focus {
    color: #37a901;
    text-decoration: none;
}

/* the type glyph inside a popular card. Same two hues the listings use, and
   green on hover like every other link here, so a row in the card behaves
   exactly like the same entry does in a topic listing. */
.help-popular-link:hover .help-result-icon,
.help-popular-link:focus .help-result-icon {
    color: #37a901;
}

/* --- "View more" ----------------------------------------------------------
   The foot of each Most Popular card, leading to the full page. Small and
   muted until hovered: it is an escape hatch from a five-item list, not a
   call to action competing with the entries above it.
   -------------------------------------------------------------------------- */

.help-popular-more {
    display: inline-block;
    margin-top: 0.6rem;
    font-size: 0.75rem;
    font-weight: 600;
    color: #57606a;
    text-decoration: none;
}

.help-popular-more:hover,
.help-popular-more:focus {
    color: #37a901;
    text-decoration: none;
}

.help-popular-more i {
    font-size: 0.7rem;
}

/* --- view counts ----------------------------------------------------------
   ONLY on the most-popular pages. Elsewhere a raw count advertises how quiet
   a new help centre is; here the page's whole subject is popularity, so the
   number is the content rather than a decoration.

   It sits after the topic name on the same muted line, separated by a real
   character rather than spacing alone, so the two values do not read as one
   phrase when they wrap.
   -------------------------------------------------------------------------- */

.help-popular-count {
    font-variant-numeric: tabular-nums;
}

.help-popular-count::before {
    content: "·";
    margin: 0 0.35rem;
}

/* --- Browse by Tag --------------------------------------------------------
   A heat cloud over click_count. ONE HUE, light to dark, which is the house
   sequential rule and also the only version that survives a contrast check:
   a blue-to-red rainbow cannot carry readable text through its yellow-green
   band (white measures 2.4-3.0:1 there against a 4.5:1 floor).

   Six steps from the blue ramp. Steps 400/450 are deliberately absent -- at
   those two, NEITHER white nor dark ink reaches 4.5:1, so the scale jumps
   from the pale half to the dark half and the ink flips with it.

   A single hue is also colourblind-safe by construction: lightness carries
   the meaning, so no hue confusion is possible. Every pill shows its count
   regardless, so colour is never the only encoding.
   ------------------------------------------------------------------------ */

/* the legend for the shading, since the counts themselves are not shown */
.help-tag-hint {
    margin: -0.25rem 0 0.6rem 0;
    font-size: 0.75rem;
    color: #8c959f;
}

.help-tag-cloud {
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem;
    list-style: none;
    margin: 0;
    padding: 0;
}

.help-tag,
a.help-tag {
    display: inline-flex;
    text-decoration: none;
    align-items: center;
    gap: 0.35rem;
    padding: 0.25rem 0.5rem;
    border-radius: 0.25rem;
    font-size: 0.8rem;
    font-weight: 500;
    line-height: 1.2;
    white-space: nowrap;
    /* cursor inherits, so the name and the count badge get the hand too --
       without this the text inside the pill shows an I-beam and the pill
       reads as prose rather than as something to click */
    cursor: pointer;
    user-select: none;
}

/* the colour is already the affordance, so hover lifts rather than recolours
   -- recolouring would read as a different heat step */
a.help-tag:hover,
a.help-tag:focus {
    text-decoration: none;
    filter: brightness(1.08);
}

/* --- More Help ------------------------------------------------------------
   A short list of destinations. Chevrons rather than bullets, so it reads as
   navigation rather than as prose.
   ------------------------------------------------------------------------ */

.help-nav-list {
    list-style: none;
    margin: 0;
    padding: 0;
}

.help-nav-list li + li {
    margin-top: 0.15rem;
}

.help-nav-link {
    display: block;
    padding: 0.3rem 0;
    font-size: 0.875rem;
    font-weight: 500;
    color: #24292f;
    text-decoration: none;
}

.help-nav-link::before {
    content: "\203A";
    margin-right: 0.45rem;
    font-weight: 600;
    color: #8c959f;
}

.help-nav-link:hover,
.help-nav-link:focus {
    color: #37a901;
    text-decoration: none;
}

.help-nav-link:hover::before,
.help-nav-link:focus::before {
    color: #37a901;
}

/* --- Contact details, and the ask form ------------------------------------
   The contact rows sit under the nav links in the same block, but read as
   details rather than destinations, so they carry an icon instead of the
   nav list's chevron.
   ------------------------------------------------------------------------ */

.help-contact-list {
    list-style: none;
    margin: 0.75rem 0 0 0;
    padding: 0.75rem 0 0 0;
    border-top: 1px solid #f0f0f0;
}

.help-contact-link {
    display: flex;
    align-items: center;
    gap: 0.45rem;
    padding: 0.2rem 0;
    /* an address is long and the column is 320px, so it wraps rather than
       stretching the block */
    word-break: break-word;
    font-size: 0.8rem;
    color: #24292f;
    text-decoration: none;
}

.help-contact-link i {
    flex: 0 0 auto;
    color: #8c959f;
}

.help-contact-link:hover,
.help-contact-link:focus {
    color: #37a901;
    text-decoration: none;
}

.help-contact-link:hover i,
.help-contact-link:focus i {
    color: #37a901;
}

.help-ask-form {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.help-ask-input {
    width: 100%;
    font-size: 0.85rem;
}

.help-ask-form .help-ask-input:not(textarea) {
    height: 38px;
}

.help-ask-submit {
    align-self: flex-start;
}

/* --- FAQ and glossary pages -----------------------------------------------
   Both live in the main column of their own hand-built page.
   ------------------------------------------------------------------------ */

.help-glossary dt {
    font-weight: 600;
}

.help-glossary dd {
    margin: 0.15rem 0 1rem 0;
}

.help-glossary dd:last-child {
    margin-bottom: 0;
}

/* the pale half: dark ink, 5.8:1 at the darkest of the three */
.help-tag-heat-0 { background: #cde2fb; color: #24292f; }
.help-tag-heat-1 { background: #9ec5f4; color: #24292f; }
.help-tag-heat-2 { background: #6da7ec; color: #24292f; }

/* the dark half: white ink, 5.4:1 at the lightest of the three */
.help-tag-heat-3 { background: #256abf; color: #ffffff; }
.help-tag-heat-4 { background: #184f95; color: #ffffff; }
.help-tag-heat-5 { background: #0d366b; color: #ffffff; }

/* Opens the same query on the full results page. Sits below the rows, with a
   rule above it so it reads as a footer to the list rather than another
   result. Brand green, because unlike the rows it is an action. */
.help-search-more {
    display: flex;
    align-items: center;
    gap: 0.35rem;
    padding-top: 0.6rem;
    border-top: 1px solid #f0f0f0;
    font-size: 0.8rem;
    font-weight: 600;
    color: #37a901;
    text-decoration: none;
}

.help-search-more:hover,
.help-search-more:focus {
    color: #37a901;
    text-decoration: underline;
}

/* shown in place of the rows when a lookup returns nothing */
.help-search-empty {
    padding: 0.6rem 0;
    font-size: 0.85rem;
    color: #8c959f;
}

/* ==========================================================================
   ARTICLE BODY
   ==========================================================================
   The TYPOGRAPHY of the HTML stored in help_articles.content -- headings,
   paragraphs, links, inline code -- scoped to .help, the article wrapper.

   The components inside a body (sections, steps, callouts, figures, tables,
   questions...) are NOT here. They are the shared ct- classes in
   /assets/css/custom.css, used by blog posts as well, and inserted from the
   shared snippets table. The reference article at
   /help/getting-started/article-elements-reference is still the place to
   check a change to either.
   ========================================================================== */

.help {
    color: #24292f;
    font-size: 1rem;
    line-height: 1.7;
}

/* --- Rhythm and typography ----------------------------------------------- */

.help h3 {
    margin: 0 0 0.6rem 0;
    font-size: 1.35rem;
    font-weight: 700;
    line-height: 1.3;
}

.help h4 {
    margin: 0 0 0.5rem 0;
    font-size: 1.1rem;
    font-weight: 700;
    line-height: 1.35;
}

.help p {
    margin: 0 0 0.85rem 0;
}

.help p:last-child {
    margin-bottom: 0;
}

.help a {
    color: #2b8a00;
    text-decoration: underline;
    text-underline-offset: 2px;
}

.help a:hover,
.help a:focus {
    color: #37a901;
}

.help code {
    padding: 0.1rem 0.35rem;
    border-radius: 0.25rem;
    background: #f0f3f6;
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;
    font-size: 0.9em;
    color: #24292f;
}

/* --- FAQ toggles inside an article --------------------------------------
   .ct-faq itself is styled in custom.css, shared with the FAQ page, so only
   the spacing inside an article is set here.
   ------------------------------------------------------------------------ */

.help .ct-faq:first-of-type {
    border-top: 1px solid #e6e6e6;
}

/* ==========================================================================
   VIDEO PLAYER
   ==========================================================================
   Scoped to .help-article-content, NOT to .help like the rest of the article
   body above.

   .help is AUTHOR-supplied -- the <div class="help"> a writer types at the
   top of a body. A video whose body is nothing but the [VIDEO] macro has no
   such wrapper, and then .help-video-frame would never apply. Since the frame
   is what supplies the positioning context for the absolutely-placed iframe
   inside it, the player would collapse rather than merely lose its styling.
   .help-article-content is emitted by article.inc and is always there.
   ========================================================================== */

.help-article-content .help-video {
    margin: 1.5rem 0;
}

/* The ratio comes from the row as a custom property so the markup carries a
   value rather than a class per shape -- a phone-shot clip is 9:16 and a
   screen recording is sometimes 4:3. 16/9 covers every row that says nothing.

   Preview and player share the same dark frame, so the swap on play doesn't
   jump, and a light thumbnail can't blend into the white page. */
.help-article-content .help-video-frame,
.help-article-content .help-video-facade {
    position: relative;
    display: block;
    width: 100%;
    aspect-ratio: var(--help-video-ratio, 16 / 9);
    padding: 0;
    border: 4px solid #1f2328;
    border-radius: 10px;
    background: #000;
    overflow: hidden;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.25);
}

.help-article-content .help-video-frame iframe,
.help-article-content .help-video-frame video {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    border: 0;
}

/* --- Click to load --------------------------------------------------------
   The thumbnail IS the button. Nothing of YouTube's exists on the page until
   this is pressed -- no iframe, no script, no cookie -- which matters on a
   page that is mostly read rather than watched.

   A real <button>, so it is focusable and operable from the keyboard with
   nothing added for it. Dressed as a player (title along the top, a red play
   button, a control bar along the bottom) so it reads as a video at a glance;
   all of it is drawn here, none of it is YouTube's.
   ------------------------------------------------------------------------ */

.help-article-content .help-video-facade {
    cursor: pointer;
}

.help-article-content .help-video-thumb {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* title along the top, over a fade so it reads on any frame */
.help-article-content .help-video-title {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    padding: 0.7rem 1rem 1.8rem;
    background: linear-gradient(rgba(0, 0, 0, 0.75), rgba(0, 0, 0, 0));
    color: #fff;
    font-size: 1rem;
    font-weight: 600;
    text-align: left;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* red rounded play button, its icon centred with flexbox rather than line-height */
.help-article-content .help-video-play {
    position: absolute;
    top: 50%;
    left: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 76px;
    height: 52px;
    transform: translate(-50%, -50%);
    border-radius: 14px;
    background: #e62117;
    color: #fff;
    font-size: 2.2rem;
    line-height: 1;
    transition: background 0.15s ease, transform 0.15s ease;
}

.help-article-content .help-video-play i::before {
    vertical-align: 0;
}

.help-article-content .help-video-facade:hover .help-video-play,
.help-article-content .help-video-facade:focus-visible .help-video-play {
    background: #ff0000;
    transform: translate(-50%, -50%) scale(1.08);
}

/* a player's control bar along the bottom: play, a progress track, the running time, full screen */
.help-article-content .help-video-bar {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    display: flex;
    align-items: center;
    gap: 0.6rem;
    padding: 1.6rem 0.9rem 0.6rem;
    background: linear-gradient(rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.75));
    color: #fff;
    font-size: 0.85rem;
    line-height: 1;
}

.help-article-content .help-video-progress {
    flex-grow: 1;
    height: 4px;
    border-radius: 2px;
    background: rgba(255, 255, 255, 0.4);
}

/* --- anchor targets --------------------------------------------------------
   A search result links at one question or one term, as a fragment on the
   shared page. Without a scroll margin the browser puts the target flush
   against the top of the viewport, which on the FAQ page means the QUESTION
   scrolls out of sight and the reader lands on an answer to a question they
   cannot see.
   -------------------------------------------------------------------------- */

.ct-faq-answer[id],
.help-glossary dt[id] {
    scroll-margin-top: 5rem;
}

/* the fragment targets the answer, so it is the <details> above it that has to
   be visible -- pull the margin up past the summary as well */
.ct-faq-answer[id] {
    scroll-margin-top: 7rem;
}

/* FAQs and glossary terms share one hue: both are quick lookups, and the
   distinction worth carrying in colour is video versus everything else.
   The glyph is what separates them from each other. */
.help-result-icon-faq,
.help-result-icon-glossary {
    color: #475569;
}

/* --- arriving from a search ------------------------------------------------
   A fragment link drops the reader into the middle of a long page. Scrolling
   there is not enough on its own: with an FAQ the <details> also springs open
   at the same moment, so several things move at once and it is not obvious
   which entry was the answer.

   The tint STAYS, rather than fading out. It marks the entry the reader was
   sent to and there is no cost to it persisting until they navigate away --
   whereas a fade takes the cue away at exactly the moment someone glancing
   back up would want it.

   Being static also means there is no motion to suppress: no keyframes, and
   nothing that a reduced-motion preference needs an opinion about.

   The colour is the theme primary #0373af at roughly a tenth strength.

   ⚠️ Note that primary is NOT what the utility classes suggest: :root
   overrides --bs-primary to the brand green #37a901, so .text-primary renders
   green, and the --bs-primary-25/-50/-100 scale is a leftover TEAL matching
   neither. The theme file's own --color-primary is this blue, so that is what
   the tint is built from rather than bg-primary-25.

   It sits close to the note-callout blue #f1f6fd, which would normally be a
   collision worth avoiding -- but callouts only ever appear inside an ARTICLE
   body, and this highlight only ever appears on the FAQ and glossary pages.
   The two can never meet on one page.

   :target rather than a class, so no JavaScript is involved and the highlight
   moves correctly if the reader clicks a second anchor on the same page.
   -------------------------------------------------------------------------- */

.ct-faq-answer[id]:target,
.help-glossary dt[id]:target,
.help-glossary dt[id]:target + dd {
    background-color: #e7f2f9;
}

/* the tint needs room to read as a highlight rather than a stripe behind text */
.ct-faq-answer[id]:target {
    margin: 0 -0.5rem;
    padding: 0.4rem 0.5rem;
    border-radius: 4px;
}

/* a term and its definition are one entry, so they are tinted as one block --
   square between them, rounded top and bottom */
.help-glossary dt[id]:target {
    margin: 0 -0.5rem;
    padding: 0.3rem 0.5rem 0;
    border-radius: 4px 4px 0 0;
}

.help-glossary dt[id]:target + dd {
    margin: 0 -0.5rem;
    padding: 0 0.5rem 0.3rem;
    border-radius: 0 0 4px 4px;
}

/* links inside a callout: the theme's green link colour clashes on the tinted alert backgrounds
   (worst on Danger red), so they take Bootstrap's dark blue instead */
.help-article-content .alert a {
    color: var(--bs-primary-text-emphasis);
}