/* Public docs (/docs/), loaded only by their layout on top of app.css. The pages are rendered from
   Markdown, so their elements come bare, without Bootstrap classes. */
.docs h1 {
    font-size: 1.75rem;
    font-weight: 600;
    margin-bottom: 1.5rem;
}

.docs h2 {
    font-size: 1.35rem;
    font-weight: 600;
    margin-top: 2.25rem;
}

.docs h3 {
    font-size: 1.1rem;
    font-weight: 600;
    margin-top: 1.5rem;
}

.docs table {
    width: 100%;
    margin-bottom: 1rem;
}

.docs th,
.docs td {
    padding: .5rem;
    border-bottom: var(--bs-border-width) solid var(--bs-border-color);
    vertical-align: top;
}

/* The page's one-line summary (llms.txt puts it in a blockquote). */
.docs blockquote {
    font-size: 1.15rem;
    color: var(--bs-secondary-color);
}

/* A list of links to other docs pages (see LinkListsToCards): the link is the card's title and,
   stretched over it, makes the whole card clickable. */
.docs .docs-cards {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(max(16rem, 40%), 1fr));
    gap: 1rem;
    padding-left: 0;
    list-style: none;
}

.docs .docs-cards > li {
    position: relative;
    padding: 1rem 1.125rem 1.5rem;
    border: var(--bs-border-width) solid var(--bs-border-color);
    border-radius: var(--bs-border-radius-lg);
    color: var(--bs-secondary-color);
    transition: border-color .15s;
}

.docs .docs-cards > li:hover {
    border-color: var(--bs-primary);
}

.docs .docs-cards p {
    margin-bottom: 0;
}

.docs .docs-cards a {
    display: block;
    margin-bottom: .25rem;
    font-size: 1.1rem;
    font-weight: 600;
    color: var(--bs-emphasis-color);
    text-decoration: none;
}

.docs .docs-cards a::after {
    content: "";
    position: absolute;
    inset: 0;
}

.docs .docs-cards .bi {
    margin-right: .5rem;
    color: var(--bs-secondary-color);
}

.docs > :last-child {
    margin-bottom: 0;
}

/* Permalink anchor on each heading: only shown while pointing at the heading. */
.docs .heading-permalink {
    margin-left: .4rem;
    text-decoration: none;
    opacity: 0;
}

.docs :hover > .heading-permalink {
    opacity: .5;
}

/* The heading's id lives on its permalink: keeps a jumped-to heading off the very top. */
.docs [id] {
    scroll-margin-top: 2rem;
}

.docs-layout {
    max-width: 48rem;
}

.docs-aside {
    margin-bottom: 1.5rem;
}

.docs-toc {
    padding-left: 1.1rem;
    margin-bottom: 0;
    font-size: .925rem;
}

.docs-toc ul {
    padding-left: 1.1rem;
}

.docs-toc a {
    text-decoration: none;
}

/* Side by side only where both fit; on narrower screens the TOC sits above the page. */
@media (min-width: 992px) {
    .docs-layout:has(> .docs-aside) {
        max-width: 160rch;
        display: grid;
        grid-template-columns: minmax(0, 1fr) 38rch;
        gap: 1.5rem;
        align-items: start;
    }

    .docs-aside {
        grid-column: 2;
        grid-row: 1;
        position: sticky;
        top: 3rem;
        max-height: calc(100vh - 6rem);
        overflow-y: auto;
        margin-bottom: 0;
    }
}