/* Knowledge base.

   A documentation layout, not a marketing one: a fixed sidebar of contents, the article, and a rail
   of the current page's sections. It deliberately does not use the site's .section rhythm - a manual
   is read by scanning and jumping, so the navigation has to stay on screen.

   Everything is on the theme tokens in site.css, so the manual follows the light/dark switch like the
   rest of the site. The old project's knowledgeBase.css could not: it hard-coded 54 colours around a
   white page. */

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

.manual-shell {
    max-width: 1600px;
    margin-inline: auto;
    padding: 0 1rem 4rem;
}

/* sidebar | content | rail. The rail column collapses when the page has no sections of its own. */
.manual-layout {
    display: grid;
    grid-template-columns: 280px minmax(0, 1fr);
    gap: 2.5rem;
    align-items: start;
}

    .manual-layout.has-rail {
        grid-template-columns: 280px minmax(0, 1fr) 220px;
    }

/* ---------- left sidebar ---------- */

.manual-sidebar {
    position: sticky;
    top: calc(var(--nav-height, 64px) + 1rem);
    max-height: calc(100vh - var(--nav-height, 64px) - 2rem);
    overflow-y: auto;
    padding-right: 0.5rem;
}

.manual-search-link {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 0.6rem 0.9rem;
    margin-bottom: 1.25rem;
    border: 1px solid var(--hairline);
    border-radius: 10px;
    background: var(--surface);
    color: var(--fg-dim);
    text-decoration: none;
    font-size: 0.9rem;
}

    .manual-search-link:hover {
        background: var(--surface-hi);
        border-color: rgba(var(--tint-rgb), 0.45);
        color: var(--accent);
    }

.manual-toc,
.toc-child-list {
    list-style: none;
    margin: 0;
    padding: 0;
}

.toc-child-list {
    /* the rule is the thread back to the parent, which is what makes depth readable at a glance */
    margin-left: 0.55rem;
    padding-left: 0.7rem;
    border-left: 1px solid var(--hairline-soft);
}

.manual-toc-link {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.4rem;
    padding: 0.35rem 0.5rem;
    border-radius: 7px;
    color: var(--fg-dim);
    text-decoration: none;
    font-size: 0.9rem;
    line-height: 1.35;
}

    .manual-toc-link:hover {
        background: var(--surface);
        color: var(--accent);
    }

.manual-toc-root {
    font-weight: 600;
}

.manual-toc-active {
    background: rgba(var(--tint-rgb), 0.12);
    color: var(--accent);
    font-weight: 600;
}

.toc-chevron {
    flex: 0 0 auto;
    opacity: 0.5;
    transition: transform 0.2s ease;
}

.toc-expanded > .manual-toc-link .toc-chevron {
    transform: rotate(90deg);
}

/* ---------- main content ---------- */

.manual-main {
    min-width: 0;
    /* Topic html is authored in an editor and may embed Bootstrap components - cards, alerts,
       list groups. Bootstrap's own theme variables are light-mode constants (--bs-body-bg is
       #fff, --bs-body-color #212529), and nothing maps them onto the site theme, so a card
       renders as a white panel on the dark page while its heading keeps the manual's heading
       colour and disappears into it. Pointing Bootstrap's variables at the theme tokens makes
       every such component follow the light/dark switch. Scoped to the article so the rest of
       the site keeps the values it has today. */
    --bs-body-bg: var(--bg);
    --bs-body-color: var(--fg);
    --bs-emphasis-color: var(--fg-strong);
    --bs-secondary-color: var(--fg-faint);
    --bs-border-color: var(--hairline-soft);
    --bs-tertiary-bg: var(--surface);
}

.manual-header {
    padding-bottom: 1rem;
    margin-bottom: 1.5rem;
    border-bottom: 1px solid var(--hairline-soft);
}

.manual-title {
    display: block;
    font-weight: 700;
}

.manual-meta {
    color: var(--fg-faint);
    font-size: 0.85rem;
    margin: 0.25rem 0 0;
}

.manual-main > h1 {
    font-weight: 800;
    letter-spacing: -0.02em;
    margin-bottom: 1.25rem;
}

/* ---------- authored topic content ----------
   Written in the Documenter editor, so the full range of tags has to be covered here rather than
   only what today's topics happen to use. */

.manual-main section {
    color: var(--fg-dim);
    line-height: 1.7;
}

    .manual-main section h2,
    .manual-main section h3,
    .manual-main section h4,
    .manual-main section h5,
    .manual-main section h6 {
        color: var(--fg-strong);
        font-weight: 700;
        line-height: 1.3;
        margin: 2rem 0 0.75rem;
    }

    .manual-main section h2 { font-size: 1.5rem; }
    .manual-main section h3 { font-size: 1.25rem; }
    .manual-main section h4 { font-size: 1.08rem; }

    .manual-main section p {
        margin: 0 0 1rem;
    }

    .manual-main section a {
        color: var(--accent);
        text-decoration: underline;
        text-underline-offset: 0.15em;
    }

        .manual-main section a:hover {
            color: var(--accent-bright);
        }

    .manual-main section strong,
    .manual-main section b {
        color: var(--fg-strong);
    }

    .manual-main section ul,
    .manual-main section ol {
        margin: 0 0 1rem;
        padding-left: 1.4rem;
    }

    .manual-main section li {
        margin-bottom: 0.4rem;
    }

    /* screenshots carry the manual, so they get a frame rather than floating on the page */
    .manual-main section img {
        max-width: 100%;
        height: auto;
        border-radius: 10px;
        border: 1px solid var(--hairline-soft);
        margin: 1rem 0;
    }

    .manual-main section blockquote {
        margin: 1.5rem 0;
        padding: 1rem 1.25rem;
        background: var(--surface);
        border-left: 4px solid var(--accent);
        border-radius: 0 10px 10px 0;
    }

    /* a wide table scrolls inside the article; it must never widen the page */
    .manual-main section table {
        width: 100%;
        margin: 1.5rem 0;
        border-collapse: collapse;
        display: block;
        overflow-x: auto;
    }

    .manual-main section th,
    .manual-main section td {
        border: 1px solid var(--hairline-soft);
        padding: 0.6rem 0.8rem;
        text-align: left;
        vertical-align: top;
    }

    .manual-main section th {
        background: var(--surface);
        color: var(--fg-strong);
        font-weight: 600;
    }

    /* topics pasted from an editor carry inline row colours (e.g. <tr style="background:#f5f5f5">),
       which on the dark theme puts white header text on a light row. The theme owns table colour,
       so any inline row background is dropped and th/td fall back to the rules above. */
    .manual-main section tr[style] {
        background: transparent !important;
    }

    .manual-main section code {
        background: var(--surface-hi);
        border-radius: 5px;
        padding: 0.12em 0.38em;
        font-size: 0.9em;
        color: var(--accent);
    }

    .manual-main section pre {
        background: var(--surface);
        border: 1px solid var(--hairline-soft);
        border-radius: 10px;
        padding: 0.9rem 1.1rem;
        overflow-x: auto;
    }

        .manual-main section pre code {
            background: none;
            padding: 0;
            color: var(--fg-dim);
        }

    /* a card is a raised panel, so it takes the surface token rather than the page background
       it would otherwise inherit through --bs-body-bg */
    .manual-main section .card {
        --bs-card-bg: var(--surface);
        --bs-card-border-color: var(--hairline-soft);
        --bs-card-cap-bg: var(--surface-hi);
    }

/* ---------- folded child sections ---------- */

.kb-child-section {
    padding-top: 1.5rem;
    margin-top: 1.5rem;
    border-top: 1px solid var(--hairline-soft);
    scroll-margin-top: calc(var(--nav-height, 64px) + 1.5rem);
}

.kb-section-heading {
    color: var(--fg-strong);
    font-weight: 700;
}

/* a child with its own page: keeps its slot in the reading order, points on to the real thing */
.kb-child-stub {
    background: var(--surface);
    border: 1px solid var(--hairline-soft);
    border-radius: 12px;
    padding: 1.25rem;
}

    .kb-child-stub .kb-section-heading {
        margin-top: 0;
    }

    .kb-child-stub .kb-section-heading a {
        color: var(--fg-strong);
        text-decoration: none;
    }

        .kb-child-stub .kb-section-heading a:hover {
            color: var(--accent);
        }

.kb-stub-summary {
    color: var(--fg-dim);
    margin: 0.4rem 0 0.75rem;
}

.kb-stub-link {
    color: var(--accent);
    font-weight: 600;
    text-decoration: none;
}

    .kb-stub-link:hover {
        text-decoration: underline;
    }

/* ---------- right rail ---------- */

.manual-onthispage {
    position: sticky;
    top: calc(var(--nav-height, 64px) + 1rem);
    max-height: calc(100vh - var(--nav-height, 64px) - 2rem);
    overflow-y: auto;
    font-size: 0.85rem;
}

.otp-title {
    display: block;
    color: var(--fg-faint);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    font-size: 0.72rem;
    margin-bottom: 0.6rem;
}

.otp-list {
    list-style: none;
    margin: 0;
    padding: 0;
    border-left: 1px solid var(--hairline-soft);
}

.otp-item a {
    display: block;
    padding: 0.3rem 0.6rem;
    margin-left: -1px;
    border-left: 2px solid transparent;
    color: var(--fg-faint);
    text-decoration: none;
    line-height: 1.35;
}

    .otp-item a:hover {
        color: var(--accent);
    }

/* the marker follows the section being read, so position in a long page is always visible */
.toc-hash-active {
    border-left-color: var(--accent) !important;
    color: var(--accent) !important;
    font-weight: 600;
}

.otp-level-2 a { padding-left: 1.2rem; }
.otp-level-3 a { padding-left: 1.8rem; }

.otp-own-page::after {
    content: " ↗";
    opacity: 0.6;
}

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

.kb-hero {
    text-align: center;
    padding: 2.5rem 0 2rem;
}

.kb-search-form .form-control {
    background: var(--surface);
    border: 1px solid var(--hairline);
    color: var(--fg);
}

    .kb-search-form .form-control:focus {
        background: var(--surface);
        color: var(--fg);
        border-color: rgba(var(--tint-rgb), 0.6);
        box-shadow: 0 0 0 0.2rem rgba(var(--tint-rgb), 0.15);
    }

    .kb-search-form .form-control::placeholder {
        color: var(--fg-faint);
    }

.kb-result {
    padding: 1.25rem 0;
    border-bottom: 1px solid var(--hairline-soft);
}

    .kb-result h2 {
        font-size: 1.15rem;
        margin-bottom: 0.25rem;
    }

        .kb-result h2 a {
            color: var(--fg-strong);
            text-decoration: none;
        }

            .kb-result h2 a:hover {
                color: var(--accent);
            }

.kb-result-path {
    color: var(--accent);
    font-size: 0.8rem;
    margin-bottom: 0.5rem;
}

.kb-result p {
    color: var(--fg-dim);
    margin: 0;
}

/* the matched words inside a result snippet */
.kb-result mark {
    background: rgba(var(--tint-rgb), 0.25);
    color: var(--fg-strong);
    padding: 0 0.15em;
    border-radius: 3px;
}

/* ---------- admin ---------- */

.kb-seo-submit {
    margin-bottom: 1rem;
}

/* ---------- mobile ----------
   The sidebar becomes a drawer: a manual is unusable on a phone if the contents eat the first screen. */

.manual-nav-toggle {
    display: none;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 1rem;
    padding: 0.5rem 0.9rem;
    border: 1px solid var(--hairline);
    border-radius: 8px;
    background: var(--surface);
    color: var(--fg);
    font-weight: 600;
}

.manual-sidebar-backdrop {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 1035;
    background: var(--overlay-strong);
}

    .manual-sidebar-backdrop.is-visible {
        display: block;
    }

@media (max-width: 991.98px) {
    .manual-layout,
    .manual-layout.has-rail {
        grid-template-columns: minmax(0, 1fr);
        gap: 1.5rem;
    }

    .manual-nav-toggle {
        display: inline-flex;
    }

    .manual-sidebar {
        position: fixed;
        top: 0;
        left: 0;
        bottom: 0;
        z-index: 1040;
        width: min(320px, 86vw);
        max-height: none;
        padding: 1rem;
        background: var(--drawer-bg);
        border-right: 1px solid var(--hairline-soft);
        transform: translateX(-100%);
        transition: transform 0.25s ease;
    }

        .manual-sidebar.is-open {
            transform: translateX(0);
        }

    /* the rail duplicates the headings already on screen once the layout is one column */
    .manual-onthispage {
        display: none;
    }
}