/* ODF Guide. Loaded only by odf/guide/index.html. */

.vt-guide-toc-wrap,
.vt-guide-rail {
    position: sticky;
    top: 4.25rem;
    max-height: calc(100vh - 5.25rem);
    overflow: auto;
}

.vt-guide-toc-filter {
    margin-bottom: 0.75rem;
    background: var(--kb-bg-card);
    color: var(--kb-text-primary);
    border-color: var(--kb-border-subtle);
}

.vt-guide-group-label {
    margin: 0.85rem 0 0.25rem;
    font-size: 0.72rem;
    font-weight: 650;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--kb-text-muted);
}

.vt-guide-toc-link,
.vt-guide-rail-link {
    display: block;
    padding: 0.28rem 0.55rem;
    color: var(--kb-text-secondary);
    text-decoration: none;
    font-size: 0.9rem;
}

/* Long class titles ("GameObjectClass P2: General Settings 2") stay one
   line in the narrowed xl track. Below xl the column is a Bootstrap third
   and may wrap. */
@media (min-width: 1200px) {
    .vt-guide-toc-link {
        white-space: nowrap;
    }
}

.vt-guide-toc-link {
    border-radius: 0;
    border-left: 3px solid transparent;
}

.vt-guide-rail-link {
    border-radius: 0.35rem;
}

.vt-guide-toc-link:hover,
.vt-guide-rail-link:hover {
    background: var(--kb-bg-subtle);
    color: var(--kb-text-primary);
}

.vt-guide-toc-link:hover {
    border-left-color: color-mix(in oklab, var(--kb-primary) 55%, transparent);
}

.vt-guide-toc-link[aria-current="page"] {
    border-radius: 0;
    border-left-color: var(--kb-primary);
    background: color-mix(in oklab, var(--kb-primary) 16%, transparent);
    color: var(--kb-text-primary);
}

/* --- Navbar search trigger ------------------------------------------------
   The pill itself is .vt-docs-search-pill from css/vtstats-theme.css (shared
   with docs/index.html); this block only sizes its slot in the guide navbar. */

.vt-guide-nav-search {
    flex: 1 1 10rem;
    min-width: 0;
    max-width: 28rem;
}

.vt-guide-search-pill {
    display: flex;
    width: 100%;
    max-width: none;
    background: color-mix(in oklab, var(--kb-primary) 18%, var(--kb-bg-card));
    border-color: color-mix(in oklab, var(--kb-primary) 42%, var(--kb-border-subtle));
    color: var(--kb-text-secondary);
}

.vt-guide-search-pill .vt-docs-search-pill-icon {
    color: var(--kb-primary);
}

/* Quiet primary chip, a step stronger than the field so it still reads
   on the pill. Scoped here so the docs page kbd stays neutral. */
.vt-guide-search-pill .vt-docs-search-pill-kbd {
    background: color-mix(in oklab, var(--kb-primary) 28%, var(--kb-bg-card));
    border-color: color-mix(in oklab, var(--kb-primary) 45%, var(--kb-border-subtle));
    color: var(--kb-primary);
}

.vt-guide-search-pill:hover,
.vt-guide-search-pill:focus-visible {
    background: color-mix(in oklab, var(--kb-primary) 28%, var(--kb-bg-card));
    border-color: var(--kb-primary);
    color: var(--kb-text-primary);
}

/* Sits immediately left of the ODF dropdown. On a phone the collapsed menu
   stretches it to a full-width row; from md up it stays content-sized. */
.vt-guide-steam-btn {
    flex-shrink: 0;
    white-space: nowrap;
}

/* Pin the field to the navbar's own midpoint. Auto margins only centered
   it in the gap between the brand and the wider right cluster. The right
   cluster is ~28rem, so each side keeps that much and the field shrinks
   first. Below 1100px there isn't room to center without covering the
   links, so the search stays in the flex row. */
@media (min-width: 1100px) {
    .navbar > .container-fluid {
        position: relative;
    }

    .vt-guide-nav-search {
        position: absolute;
        left: 50%;
        top: 50%;
        transform: translate(-50%, -50%);
        width: min(26rem, calc(100% - 56rem));
        max-width: none;
        margin: 0;
        flex: none;
        z-index: 2;
    }
}

/* Phones: collapse to the icon so the brand and burger keep their row. */
@media (max-width: 575.98px) {
    .vt-guide-nav-search {
        flex: 0 0 auto;
    }

    .vt-guide-search-pill {
        width: auto;
        padding: 0.4rem 0.6rem;
        gap: 0;
    }

    .vt-guide-search-pill .vt-docs-search-pill-label,
    .vt-guide-search-pill .vt-docs-search-pill-kbd {
        display: none;
    }
}

/* --- Search modal results -------------------------------------------------
   Chrome (header / body / footer / empty state) comes from the shared
   .vt-docs-search-* block; rows below are guide-specific because hits are
   grouped by section and can carry an ODF default value. */

.vt-guide-hit-group + .vt-guide-hit-group {
    border-top: 1px solid var(--kb-border-subtle);
}

.vt-guide-hit-group-label {
    padding: 0.5rem 1rem 0.25rem;
    font-size: 0.7rem;
    font-weight: 650;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--kb-text-muted);
}

.vt-guide-hit {
    display: flex;
    align-items: center;
    gap: 0.65rem;
    width: 100%;
    padding: 0.5rem 1rem;
    border: 0;
    border-left: 2px solid transparent;
    background: transparent;
    color: var(--kb-text-primary);
    text-align: left;
}

.vt-guide-hit.is-active,
.vt-guide-hit:hover {
    background: var(--kb-bg-subtle);
    border-left-color: var(--kb-primary);
}

.vt-guide-hit-icon {
    flex-shrink: 0;
    font-size: 0.85rem;
    color: var(--kb-text-muted);
}

.vt-guide-hit.is-active .vt-guide-hit-icon {
    color: var(--kb-primary);
}

.vt-guide-hit-body {
    display: flex;
    flex-direction: column;
    gap: 0.1rem;
    flex: 1 1 auto;
    min-width: 0;
}

.vt-guide-hit-label {
    font-weight: 600;
    font-size: 0.92rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.vt-guide-hit-snippet {
    color: var(--kb-text-muted);
    font-size: 0.8rem;
    line-height: 1.4;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
}

.vt-guide-hit-enter {
    flex-shrink: 0;
    font-size: 0.8rem;
    color: var(--kb-primary);
    opacity: 0;
}

.vt-guide-hit.is-active .vt-guide-hit-enter {
    opacity: 1;
}

.vt-guide-search-modal .vt-docs-search-body {
    padding: 0.25rem 0;
}

/* This dialog is modal-fullscreen-md-down, one breakpoint wider than the
   docs one the shared styles were written for, so the results list has to
   keep growing to md — otherwise the footer floats mid-screen on a large
   phone with empty space beneath it. */
@media (max-width: 767.98px) {
    .vt-guide-search-modal .vt-docs-search-body {
        max-height: none;
        flex: 1 1 auto;
    }
}

.vt-guide-credit {
    margin-bottom: 1.25rem;
    padding: 0.7rem 0.9rem;
    border: 1px solid var(--kb-border-subtle);
    border-radius: 0.5rem;
    background: var(--kb-bg-subtle);
    color: var(--kb-text-secondary);
    font-size: 0.92rem;
}

.vt-guide-credit p {
    margin: 0;
}

.vt-guide-credit a {
    color: var(--kb-info);
}

/* Anchor targets sit below the sticky navbar when jumped to. docs-prose
   already sets 70px on its own headings; this covers code blocks and the
   property sections, which are guide-only markup. */
.vt-guide-anchor {
    scroll-margin-top: 4.75rem;
}

.vt-guide-prop {
    padding: 0.85rem 0 0.35rem;
    border-top: 1px solid var(--kb-border-subtle);
}

.vt-guide-prop-head {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 0.4rem 0.65rem;
    margin-bottom: 0.35rem;
}

/* Scoped to .docs-prose so it beats that layer's generic inline-`code` rule
   (equal specificity otherwise, and docs-prose would win on source order).
   The chip look is deliberate — it is the same treatment docs-prose gives
   inline code, just sized up to carry a heading's weight. */
.docs-prose .vt-guide-prop-name {
    padding: 0.1rem 0.45rem;
    color: var(--kb-primary);
    font-size: 1rem;
    font-weight: 650;
}

.vt-guide-default {
    color: var(--kb-text-secondary);
    background: var(--kb-bg-subtle);
    border: 1px solid var(--kb-border-subtle);
    border-radius: 999px;
    padding: 0.02rem 0.45rem;
    font-size: 0.82rem;
}

/* Evidence tier of a Console commands entry (data/console-reference.json
   `tier`). One quiet pill per entry; the colour says how far to trust the
   explanation, so a name-only guess never reads like a verified fact. */
.vt-guide-tier {
    display: inline-block;
    border-radius: 999px;
    padding: 0.02rem 0.5rem;
    font-size: 0.74rem;
    font-weight: 600;
    letter-spacing: 0.01em;
    border: 1px solid var(--kb-border-subtle);
    color: var(--kb-text-secondary);
    background: var(--kb-bg-subtle);
}

.vt-guide-tier-verified {
    color: var(--kb-success);
    border-color: var(--kb-success);
}

.vt-guide-tier-engine {
    color: var(--kb-info);
    border-color: var(--kb-info);
}

.vt-guide-tier-inferred,
.vt-guide-tier-unverified {
    color: var(--kb-warning);
    border-color: var(--kb-warning);
}

/* Property bodies read as a dense reference list, so they run tighter than
   docs-prose's article rhythm. Everything else inherits it untouched. */
.vt-guide-prop-body > p,
.vt-guide-prop-body > ul {
    margin-bottom: 0.5rem;
}

.vt-guide-prop-body > :last-child {
    margin-bottom: 0;
}

/* A long class section can carry 20+ of these caveats, so the alert is
   toned down to let the warning border and icon do the signalling instead
   of a full-strength fill repeated down the page. */
.vt-guide-note {
    margin-bottom: 0.75rem;
    padding: 0.5rem 0.85rem;
    /* .alert-warning colours all four sides; keep the accent on the left
       edge only so the callout reads as a margin note, not a page-level
       warning banner. */
    border-color: transparent;
    border-left-width: 4px;
    border-left-color: var(--kb-warning);
    background: color-mix(in oklab, var(--kb-warning) 9%, transparent);
    color: var(--kb-text-secondary);
    font-size: 0.9rem;
}

.vt-guide-note .bi {
    color: var(--kb-warning);
}

.vt-guide-code {
    overflow-x: auto;
}

.vt-guide-code-section {
    color: var(--kb-warning);
}

.vt-guide-code-key {
    color: var(--kb-info);
}

.vt-guide-code-comment {
    color: var(--kb-text-muted);
}

.vt-guide-code .vt-guide-odf-link {
    font-family: inherit;
}

.vt-guide-odf-dialog {
    width: calc(100vw - 2rem);
    max-width: none;
    height: calc(100vh - 2rem);
    margin: 1rem auto;
}

.vt-guide-odf-dialog .modal-content {
    height: 100%;
    background: var(--kb-bg-card);
    color: var(--kb-text-primary);
    border-color: var(--kb-border-subtle);
}

.vt-guide-odf-dialog .modal-header,
.vt-guide-odf-dialog .modal-footer {
    border-color: var(--kb-border-subtle);
}

.vt-guide-odf-dialog .modal-title {
    margin-right: auto;
}

.vt-guide-odf-dialog .modal-body {
    flex: 1 1 auto;
    min-height: 0;
    overflow: hidden;
}

.vt-guide-odf-dialog .modal-body > .row {
    height: 100%;
}

#vt-guide-detail {
    height: 100%;
    overflow: auto;
}

.vt-guide-odf-frame-col {
    height: 100%;
    min-height: 0;
}

.vt-guide-odf-frame {
    display: block;
    width: 100%;
    height: 100%;
    border: 0;
    background: var(--kb-bg-body);
}

@media (min-width: 992px) {
    #vt-guide-detail {
        border-right: 1px solid var(--kb-border-subtle);
    }
}

@media (max-width: 991.98px) {
    #vt-guide-detail {
        height: auto;
        max-height: 38vh;
        border-bottom: 1px solid var(--kb-border-subtle);
    }

    .vt-guide-odf-frame-col {
        height: 52vh;
    }
}

.vt-guide-anchor.is-flash {
    background: color-mix(in oklab, var(--kb-primary) 16%, transparent);
    border-radius: 0.35rem;
}

.vt-guide-rail-label {
    margin: 0 0 0.4rem;
    font-size: 0.72rem;
    font-weight: 650;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--kb-text-muted);
}

.vt-guide-rail-link {
    font-size: 0.82rem;
    padding-left: 0.2rem;
}

/* From the sidebar breakpoint up, the page itself does not scroll.
   Each column is its own pane, so wheeling the article never moves
   the section list or the on-this-page rail. */
@media (min-width: 992px) {
    /* body.h-100 in the theme is height:auto so sticky navbars can
       track a long page. Here the columns scroll instead, so the
       shell stays exactly one viewport tall. */
    html,
    body.h-100 {
        height: 100% !important;
        max-height: 100%;
        overflow: hidden;
    }

    body.h-100 {
        min-height: 0;
    }

    main {
        display: flex;
        flex-direction: column;
        min-height: 0;
    }

    .vt-guide-layout {
        flex: 1 1 auto;
        min-height: 0;
        overflow: hidden;
    }

    .vt-guide-layout > aside {
        display: flex;
        flex-direction: column;
        min-height: 0;
        overflow: hidden;
    }

    .vt-guide-toc-wrap,
    .vt-guide-rail {
        position: static;
        top: auto;
        flex: 1 1 auto;
        height: 100%;
        max-height: none;
        min-height: 0;
        overflow: auto;
        overscroll-behavior: contain;
    }

    /* Slightly inside the column gutters so the credit and article aren't
       flush with the sidebar or the on-this-page rail. */
    .vt-guide-layout > .vt-guide-main {
        min-height: 0;
        overflow: auto;
        overscroll-behavior: contain;
        padding-left: calc(var(--bs-gutter-x) * 0.5 + 1.25rem);
        padding-right: calc(var(--bs-gutter-x) * 0.5 + 1.25rem);
    }

    /* The 70px docs offset clears a sticky navbar. This pane sits
       below the bar, so a rail jump only needs a small gap. */
    .vt-guide-main .docs-prose :is(h1, h2, h3, h4),
    .vt-guide-anchor {
        scroll-margin-top: 0.75rem;
    }
}

/* Fixed sidebar, narrower than col-lg-3, once the right rail is visible.
   20rem fits the longest section title on one line (nowrap above). */
@media (min-width: 1200px) {
    .vt-guide-layout {
        display: grid;
        grid-template-columns: 20rem minmax(0, 1fr) minmax(12rem, 16rem);
    }

    .vt-guide-layout > [class*="col-"] {
        width: auto;
        max-width: none;
    }
}

@media (max-width: 991.98px) {
    .vt-guide-toc-wrap {
        position: static;
        max-height: none;
        margin-top: 0.5rem;
    }
}

@media (prefers-reduced-motion: reduce) {
    .vt-guide-anchor.is-flash {
        outline: 2px solid var(--kb-primary);
        background: transparent;
    }
}