/* Help pages (Súgó and its tutorials) */

.fm-help-section {
    /* the sticky table-of-contents bar must not cover the heading after a jump */
    scroll-margin-top: 4.5rem;
}

@media (min-width: 992px) {
    .fm-help-section { scroll-margin-top: 1rem; }

    .fm-help-toc {
        position: sticky;
        top: 1rem;
    }
}

.fm-help-toc .nav-link {
    color: var(--bs-body-color);
    border-left: 3px solid transparent;
    border-radius: 0;
    padding: .4rem .75rem;
}

.fm-help-toc .nav-link:hover { color: var(--bs-primary); }

.fm-help-toc .nav-link.active {
    color: var(--bs-primary);
    background: rgba(var(--bs-primary-rgb), .08);
    border-left-color: var(--bs-primary);
    font-weight: 600;
}

/* Phones: the TOC is a bottom sheet, opened from this bar that stays at the top while scrolling */
.fm-help-tocbar {
    position: sticky;
    top: 0;
    z-index: 1020;
    margin-bottom: 1rem;
    padding: .5rem .75rem;
    background: var(--bs-light);
}

.fm-help-tocbar .btn { min-width: 0; }

@media (max-width: 991.98px) {
    .fm-help-toc .offcanvas-bottom { height: auto; max-height: 75vh; }
}

.fm-help-shot { margin: .75rem 0 1.25rem; }

.fm-help-shot img {
    border: 1px solid var(--bs-border-color);
    border-radius: .5rem;
}

.fm-help-shot-narrow img { max-width: min(100%, 360px); }

.fm-help-steps {
    counter-reset: step;
    list-style: none;
    padding-left: 0;
}

.fm-help-steps > li {
    counter-increment: step;
    position: relative;
    padding-left: 2.75rem;
    margin-bottom: 1.25rem;
}

.fm-help-steps > li::before {
    content: counter(step);
    position: absolute;
    left: 0;
    top: -.1rem;
    width: 2rem;
    height: 2rem;
    border-radius: 50%;
    background: linear-gradient(135deg, #2563EB, #10B981);
    color: #fff;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
}

.fm-copy {
    display: inline-flex;
    align-items: center;
    gap: .25rem;
    max-width: 100%;
    padding: .1rem .2rem .1rem .5rem;
    border: 1px solid var(--bs-border-color);
    border-radius: .375rem;
    background: var(--bs-tertiary-bg);
    word-break: break-all;
}

.fm-copy code { color: var(--bs-body-color); }

.fm-copy .btn { padding: 0 .35rem; line-height: 1.4; }

/* Tutorial chooser: the cards act as tabs */
.fm-choice {
    width: 100%;
    height: 100%;
    text-align: left;
    border: 2px solid var(--bs-border-color);
    transition: border-color .15s, box-shadow .15s;
}

.fm-choice:hover { border-color: rgba(var(--bs-primary-rgb), .5); }

.fm-choice.active {
    border-color: var(--bs-primary);
    box-shadow: 0 0 0 .2rem rgba(var(--bs-primary-rgb), .15);
}

.fm-choice .fm-choice-icon {
    font-size: 1.75rem;
    background: linear-gradient(135deg, #2563EB, #10B981);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}