/* Patch 17 - Guide view refinement after v16. Does not change global header
   or the content rendering, votes, navigation, or search behaviour. */
#guidePage.guide-show-grid {
    grid-template-columns: 256px minmax(0, 1fr) 190px;
}

#guidePage .guide-header__title-row {
    justify-content: flex-start;
}

#guidePage .guide-show-feedback .guide-bottom-edit {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    color: var(--guide-blue);
    font-size: 13px;
    font-weight: 650;
    text-decoration: none;
    border-bottom: 1px solid transparent;
}

#guidePage .guide-show-feedback .guide-bottom-edit:hover {
    border-bottom-color: currentColor;
}

#guidePage .guide-show-feedback .guide-bottom-edit svg {
    flex: 0 0 17px;
    display: block;
}

/* Better focus feedback on links without adding shadows. */
#guidePage .guide-show-feedback .guide-bottom-edit:focus-visible,
#guidePage .guide-mobile-toc summary:focus-visible {
    outline: 2px solid var(--guide-blue);
    outline-offset: 2px;
}

@media (max-width: 1199.98px) and (min-width: 992px) {
    #guidePage.guide-show-grid {
        grid-template-columns: 230px minmax(0, 1fr) 165px;
    }
}

@media (max-width: 991.98px) {
    #guidePage.guide-show-grid {
        grid-template-columns: minmax(0, 1fr);
    }

    /* Icon-only TOC sits directly below the guide title in the header.
       It expands in normal document flow so touch users see the links. */
    #guidePage .guide-header .guide-mobile-toc:not([hidden]) {
        display: block;
        width: 100%;
        max-width: 100%;
        margin: 9px 0 9px;
        padding: 0;
        border: 0;
        border-radius: 0;
        background: transparent;
    }

    #guidePage .guide-header .guide-mobile-toc summary {
        display: inline-flex;
        width: 39px;
        height: 37px;
        min-height: 37px;
        padding: 0;
        justify-content: center;
        gap: 1px;
        background: white;
        border: 1px solid var(--guide-line);
        border-radius: 5px;
        color: var(--guide-blue);
        cursor: pointer;
        list-style: none;
    }

    #guidePage .guide-header .guide-mobile-toc summary .guide-toc-trigger__icon {
        flex: 0 0 20px;
        display: block;
    }

    #guidePage .guide-header .guide-mobile-toc summary .guide-toc-trigger__chevron {
        flex: 0 0 11px;
        display: block;
        transition: transform .2s ease;
    }

    #guidePage .guide-header .guide-mobile-toc[open] summary .guide-toc-trigger__chevron {
        transform: rotate(180deg);
    }

    #guidePage .guide-header .guide-mobile-toc[open] summary {
        border-color: var(--guide-blue);
        background: #eef5fc;
    }

    #guidePage .guide-header .guide-mobile-toc .guide-toc-links {
        margin-top: 7px;
        padding: 7px 10px;
        max-height: min(300px, 55vh);
        overflow-y: auto;
        border: 1px solid var(--guide-line);
        border-radius: 6px;
        background: #fff;
        overscroll-behavior: contain;
        scrollbar-width: thin;
    }
}

@media (prefers-reduced-motion: reduce) {
    #guidePage .guide-header .guide-mobile-toc summary .guide-toc-trigger__chevron {
        transition: none;
    }
}