/* stig-toc.css — positions the per-page TOC sidebar emitted by stig-toc.js.
 *
 * Sits on the right edge of the viewport, sticky to the top while
 * scrolling. Hidden below 1200 px viewport width; stig-toc.js also
 * bails on that threshold so the container is never inserted on
 * narrow viewports.
 *
 * When stig-toc.js inserts the container, it adds `stig-toc-active` to
 * the <html> element so the main content area can reserve room and not
 * be overlapped by the fixed-position TOC. */

html {
    --stig-toc-width: 360px;
    --stig-toc-right: 16px;
    --stig-toc-gap: 52px;
}

/* Reserve room only on the actual Dokka content node. `#main` wraps
 * `#content.main-content`; padding both creates a large false gap between the
 * article and the fixed TOC. */
.stig-toc-active #main {
    padding-right: 0;
}

.stig-toc-active #content,
.stig-toc-active .main-content {
    padding-right: calc(var(--stig-toc-width) + var(--stig-toc-right) + var(--stig-toc-gap));
}

.stig-toc-active.stig-right-toc-collapsed #content,
.stig-toc-active.stig-right-toc-collapsed .main-content {
    padding-right: var(--size-m3, 48px);
}

@media (max-width: 1199px) {
    .stig-toc-active #main,
    .stig-toc-active #content,
    .stig-toc-active .main-content {
        padding-right: 0;
    }
}

.stig-toc {
    position: fixed;
    /* Full vertical extent of the viewport. `top: 64px` clears Dokka's
     * fixed header; `bottom: 8px` keeps a small margin against the
     * bottom edge so the scrollbar (when present) is comfortable.
     * Using both `top` and `bottom` (instead of `max-height`) lets the
     * sidebar grow with the viewport regardless of how few headings
     * the page has. */
    top: 64px;
    bottom: 8px;
    right: var(--stig-toc-right);
    width: var(--stig-toc-width);
    overflow-y: auto;
    padding: 12px 16px;
    border-left: 2px solid rgba(0, 0, 0, 0.08);
    background: transparent;
    font-size: 13px;
    line-height: 1.4;
    z-index: 50;
}

.theme-dark .stig-toc {
    border-left-color: rgba(255, 255, 255, 0.12);
}

.stig-right-toc-collapsed .stig-toc {
    display: none;
}

.stig-toc-icon {
    display: inline-block;
    width: 1em;
    height: 1em;
    margin-right: 0.35em;
    vertical-align: -0.15em;
    fill: currentColor;
}

.stig-sidebar-toggle {
    align-items: center;
    background: var(--wa-color-surface-raised, #fff);
    border: 1px solid var(--wa-color-neutral-border-normal, #cbd5e1);
    border-radius: 0.4rem;
    color: var(--text-color, #263238);
    cursor: pointer;
    display: inline-flex;
    height: 2rem;
    justify-content: center;
    padding: 0;
    width: 2rem;
}

.theme-dark .stig-sidebar-toggle {
    background: var(--color-background-page-dt, #262628);
    border-color: rgb(255 255 255 / 20%);
    color: var(--color-text-dt, #fff);
}

.stig-sidebar-toggle:hover,
.stig-sidebar-toggle:focus-visible {
    border-color: var(--wa-color-brand-border-normal, #2563eb);
    color: var(--wa-color-brand-on-quiet, #1d4ed8);
    outline: none;
}

.stig-sidebar-toggle .stig-icon {
    height: 1.15rem;
    transform: rotate(0deg);
    transition: transform 0.15s ease;
    width: 1.15rem;
}

.stig-sidebar-toggle[data-direction="left"] .stig-icon {
    transform: rotate(180deg);
}

.stig-sidebar-toggle[data-direction="down"] .stig-icon {
    transform: rotate(90deg);
}

.stig-left-sidebar-toggle,
.stig-right-toc-toggle {
    position: fixed;
    top: 72px;
    z-index: 60;
}

.stig-left-sidebar-toggle {
    transform: translateX(-50%);
}

.stig-left-sidebar-collapsed .stig-left-sidebar-toggle {
    transform: none;
}

.stig-right-toc-toggle {
    right: calc(var(--stig-toc-width) + var(--stig-toc-right) + 2rem);
}

.stig-right-toc-collapsed .stig-right-toc-toggle {
    right: 0;
}

@media (min-width: 900px) {
    .stig-left-sidebar-collapsed #leftColumn,
    .stig-left-sidebar-collapsed #resizer {
        display: none !important;
    }

    .stig-left-sidebar-collapsed #main {
        margin-left: 0;
    }
}

.stig-toc-heading {
    font-weight: 600;
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: #888;
    margin-bottom: 8px;
}

.theme-dark .stig-toc-heading {
    color: #aaa;
}

/* tocbot's own list classes. The base CSS we vendor (tocbot.css) does
 * the core nesting / indent work; we tune typography + active state to
 * match Dokka's look. */

.stig-toc .toc-list {
    list-style: none;
    margin: 0;
    padding: 0;
}

.stig-toc .js-toc > .toc-list {
    padding-left: 1.25rem;
}

.stig-toc .toc-list .toc-list {
    padding-left: 12px;
}

/* Keep disclosure controls out of label flow. The root-list padding reserves
 * their gutter, while nested-list padding alone determines tree depth, so
 * branch and leaf labels at the same depth always share one alignment. */
.stig-toc .toc-list-item {
    position: relative;
}

.stig-toc .stig-toc-branch-toggle {
    border: 0;
    height: 1.5rem;
    left: -1.25rem;
    position: absolute;
    top: 0;
    width: 1.25rem;
}

.stig-toc .stig-toc-branch-toggle .stig-icon {
    height: 0.9rem;
    width: 0.9rem;
}

.stig-toc .toc-link {
    display: block;
    padding: 2px 0 2px 0.5rem;
    position: relative;
    text-decoration: none;
    color: inherit;
    opacity: 0.75;
    /* Long generated identifiers (e.g. "pecuswSpiPyrofuseConfigurationRequestAnalysis")
     * must not wrap: wrapping breaks the icon/indent alignment of the tree.
     * Truncate instead; stig-toc.js sets a `title` attribute with the full
     * label so the name is always one hover away. Users who want to see more
     * names in full can also drag the panel wider (.stig-toc-resize-handle). */
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Tocbot sizes this marker from its nearest positioned ancestor. List items
 * also contain their descendant lists, so anchor the marker to the link and
 * explicitly keep it within that row instead of spanning the whole subtree. */
.stig-toc .toc-link::before {
    bottom: 3px;
    height: auto;
    margin-top: 0;
    top: 3px;
}

.stig-toc .toc-link:hover {
    opacity: 1.0;
    text-decoration: underline;
}

.stig-toc .is-active-link {
    opacity: 1.0;
    font-weight: 600;
    color: #2962ff;
}

.theme-dark .stig-toc .is-active-link {
    color: #82b1ff;
}

h2 .stig-heading-copy,
h3 .stig-heading-copy,
h4 .stig-heading-copy,
h5 .stig-heading-copy,
h6 .stig-heading-copy {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    margin-left: 8px;
    padding: 0;
    border: 1px solid transparent;
    border-radius: 6px;
    background: transparent;
    color: currentColor;
    cursor: pointer;
    opacity: 0;
    vertical-align: middle;
    transition: opacity 0.12s ease, background 0.12s ease, border-color 0.12s ease;
}

h2:hover .stig-heading-copy,
h3:hover .stig-heading-copy,
h4:hover .stig-heading-copy,
h5:hover .stig-heading-copy,
h6:hover .stig-heading-copy,
.stig-heading-copy:focus-visible,
.stig-heading-copy.is-copied {
    opacity: 0.72;
}

.stig-heading-copy:hover,
.stig-heading-copy:focus-visible {
    background: rgba(127, 127, 127, 0.12);
    border-color: rgba(127, 127, 127, 0.28);
    opacity: 1;
    outline: none;
}

.stig-heading-copy.is-copied {
    background: rgba(29, 158, 117, 0.14);
    border-color: rgba(29, 158, 117, 0.45);
    color: #1d9e75;
}

.stig-heading-copy svg {
    width: 15px;
    height: 15px;
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

@media (max-width: 1199px) {
    .stig-toc,
    .stig-right-toc-toggle {
        display: none;
    }
}

@media (max-width: 899px) {
    .stig-left-sidebar-toggle {
        display: none;
    }
}

/* Resize handle — lets users widen the panel for pages with long
 * generated identifiers instead of relying solely on truncation +
 * tooltip. Positioned over the panel's left border so it reads as a
 * drag affordance rather than a second visual divider. */
.stig-toc-resize-handle {
    /* Kept inside the box (not a negative offset) because .stig-toc's
     * overflow-y: auto implicitly computes overflow-x to auto too, which
     * would clip anything positioned outside the border. Sitting just
     * inside the left padding still reads as a handle on the border. */
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    width: 8px;
    cursor: col-resize;
    touch-action: none;
    background: transparent;
    border: 0;
    padding: 0;
}

.stig-toc-resize-handle:hover,
.stig-toc-resize-handle:focus-visible {
    background: rgba(41, 98, 255, 0.25);
    outline: none;
}

html.stig-toc-resizing {
    cursor: col-resize !important;
    user-select: none;
}

html.stig-toc-resizing .stig-toc-resize-handle {
    background: rgba(41, 98, 255, 0.35);
}

@media (max-width: 1199px) {
    .stig-toc-resize-handle {
        display: none;
    }
}