/* ==========================================================================
   AppInspect — documentation shell
   Three columns: page nav (left), article (centre), "On this page" (right).
   Loaded after styles.css, which owns the tokens.
   ========================================================================== */

.docs-shell {
    display: grid;
    grid-template-columns: var(--sidebar-w) minmax(0, 1fr) var(--toc-w);
    max-width: var(--page-max);
    margin: 0 auto;
    align-items: start;
}

/* --------------------------------------------------------------------------
   Left: page navigation
   -------------------------------------------------------------------------- */

.docs-sidebar {
    position: sticky;
    top: var(--topbar-h);
    height: calc(100vh - var(--topbar-h));
    height: calc(100dvh - var(--topbar-h));
    padding: 26px 16px 60px 24px;
    border-right: 1px solid var(--border);
    overflow-y: auto;
    overscroll-behavior: contain;
    scrollbar-width: thin;
}

.nav-group + .nav-group {
    margin-top: 26px;
}

.nav-group-title {
    padding: 0 10px 8px;
    color: var(--text-faint);
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
}

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

.nav-list a {
    display: block;
    padding: 6px 10px;
    border-radius: 7px;
    color: var(--text-muted);
    font-size: 0.925rem;
    font-weight: 500;
}

.nav-list a:hover {
    background: var(--bg-soft);
    color: var(--text);
    text-decoration: none;
}

.nav-list a[aria-current="page"] {
    background: var(--accent-soft);
    color: var(--accent-text);
    font-weight: 700;
}

/* Sub-sections of the page you are on, generated from its own h2s. */
.nav-sub {
    margin: 2px 0 8px;
    padding: 2px 0 2px 12px;
    border-left: 1px solid var(--border);
    list-style: none;
}

.nav-sub a {
    padding: 4px 10px;
    font-size: 0.865rem;
    color: var(--text-faint);
}

.nav-sub a.is-active {
    color: var(--accent-text);
    font-weight: 600;
}

.nav-aside {
    margin-top: 30px;
    padding-top: 18px;
    border-top: 1px solid var(--border);
}

.nav-aside a {
    display: flex;
    align-items: center;
    gap: 7px;
    padding: 5px 10px;
    color: var(--text-faint);
    font-size: 0.875rem;
}

.nav-aside a:hover {
    color: var(--text);
    text-decoration: none;
}

.nav-aside svg {
    width: 13px;
    height: 13px;
    flex: none;
}

/* --------------------------------------------------------------------------
   Right: on this page
   -------------------------------------------------------------------------- */

.docs-toc {
    position: sticky;
    top: var(--topbar-h);
    max-height: calc(100vh - var(--topbar-h));
    max-height: calc(100dvh - var(--topbar-h));
    padding: 30px 24px 60px 8px;
    overflow-y: auto;
    scrollbar-width: thin;
}

.toc-title {
    margin-bottom: 10px;
    color: var(--text);
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

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

.toc-list a {
    display: block;
    padding: 5px 12px;
    margin-left: -1px;
    border-left: 2px solid transparent;
    color: var(--text-faint);
    font-size: 0.865rem;
    line-height: 1.45;
}

.toc-list a:hover {
    color: var(--text);
    text-decoration: none;
}

.toc-list .toc-h3 a {
    padding-left: 24px;
    font-size: 0.83rem;
}

.toc-list a.is-active {
    border-left-color: var(--accent);
    color: var(--accent-text);
    font-weight: 600;
}

/* Collapsed variant shown above the article on narrow screens. */
.toc-inline {
    display: none;
    margin: 0 0 28px;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: var(--bg-soft);
}

.toc-inline summary {
    padding: 11px 16px;
    font-size: 0.88rem;
    font-weight: 700;
    cursor: pointer;
}

.toc-inline .toc-list {
    padding: 0 14px 12px;
    border-left: 0;
}

/* --------------------------------------------------------------------------
   Centre: the article
   -------------------------------------------------------------------------- */

.docs-main {
    min-width: 0;
    padding: 44px 56px 96px;
}

.prose {
    max-width: var(--content-max);
}

.prose > .eyebrow {
    margin-bottom: 12px;
}

.prose h1 {
    font-size: clamp(2rem, 3.6vw, 2.6rem);
    letter-spacing: -0.032em;
}

.prose .lede {
    margin-top: 18px;
    color: var(--text-muted);
    font-size: 1.13rem;
    line-height: 1.6;
}

.prose h2 {
    margin-top: 56px;
    padding-top: 26px;
    border-top: 1px solid var(--border);
    font-size: 1.42rem;
}

.prose h3 {
    margin-top: 34px;
    font-size: 1.1rem;
}

.prose h4 {
    margin-top: 26px;
    font-size: 0.98rem;
    color: var(--text);
}

.prose p {
    margin-top: 16px;
    color: var(--text-muted);
}

.prose h1 + p,
.prose h2 + p,
.prose h3 + p,
.prose h4 + p {
    margin-top: 12px;
}

.prose strong {
    color: var(--text);
    font-weight: 700;
}

.prose ul,
.prose ol {
    margin: 16px 0;
    padding-left: 22px;
    color: var(--text-muted);
}

.prose li {
    margin-top: 8px;
}

.prose li::marker {
    color: var(--text-faint);
}

.prose a {
    text-decoration: underline;
    text-decoration-color: color-mix(in srgb, var(--accent-text) 40%, transparent);
    text-underline-offset: 2px;
}

.prose a:hover {
    text-decoration-color: var(--accent-text);
}

.prose hr {
    margin: 40px 0;
    border: 0;
    border-top: 1px solid var(--border);
}

/* Anchor links on headings */

.heading-anchor {
    margin-left: 8px;
    color: var(--text-faint);
    font-weight: 400;
    opacity: 0;
    text-decoration: none;
    transition: opacity 0.12s ease;
}

.prose h2:hover .heading-anchor,
.prose h3:hover .heading-anchor,
.heading-anchor:focus {
    opacity: 1;
}

/* Definition lists — used for option/field references */

.prose dl {
    margin: 20px 0 0;
    border-top: 1px solid var(--border);
}

.prose dl > div {
    padding: 16px 0;
    border-bottom: 1px solid var(--border);
}

.prose dt {
    font-family: var(--font-mono);
    font-size: 0.875rem;
    font-weight: 700;
    color: var(--text);
}

.prose dt code {
    padding: 0;
    border: 0;
    background: none;
    font-size: 1em;
}

.prose dd {
    margin: 6px 0 0;
    color: var(--text-muted);
    font-size: 0.95rem;
}

.dt-default {
    margin-left: 8px;
    color: var(--text-faint);
    font-family: var(--font-ui);
    font-size: 0.78rem;
    font-weight: 500;
}

/* Tables */

.table-scroll {
    margin: 22px 0;
    overflow-x: auto;
    border: 1px solid var(--border);
    border-radius: var(--radius);
}

.table-scroll table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.9rem;
}

.table-scroll th,
.table-scroll td {
    padding: 11px 14px;
    border-bottom: 1px solid var(--border);
    text-align: left;
    vertical-align: top;
    color: var(--text-muted);
}

.table-scroll th {
    background: var(--bg-soft);
    color: var(--text);
    font-size: 0.8rem;
    font-weight: 700;
    letter-spacing: 0.02em;
    white-space: nowrap;
}

.table-scroll tr:last-child td {
    border-bottom: 0;
}

.table-scroll td strong {
    color: var(--text);
}

/* Callouts */

.note,
.warn,
.tip {
    margin: 24px 0;
    padding: 16px 18px;
    border: 1px solid var(--border);
    border-left: 3px solid var(--border-strong);
    border-radius: var(--radius);
    background: var(--bg-soft);
}

.note-title {
    display: block;
    margin-bottom: 4px;
    color: var(--text);
    font-size: 0.8rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.note p,
.warn p,
.tip p {
    margin-top: 0;
    font-size: 0.95rem;
}

.note p + p,
.warn p + p,
.tip p + p {
    margin-top: 12px;
}

.warn {
    border-left-color: var(--warn);
    border-color: var(--warn-border);
    background: var(--warn-soft);
}

.warn .note-title {
    color: var(--warn);
}

.tip {
    border-left-color: var(--accent);
    border-color: color-mix(in srgb, var(--accent) 30%, var(--border));
    background: var(--accent-soft);
}

.tip .note-title {
    color: var(--accent-text);
}

/* Card grid — used on the docs home */

.card-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(228px, 100%), 1fr));
    gap: 14px;
    margin: 26px 0;
}

.doc-card {
    display: block;
    padding: 18px;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: var(--surface);
    text-decoration: none;
    transition: border-color 0.15s ease, transform 0.15s ease;
}

.doc-card:hover {
    border-color: var(--accent);
    transform: translateY(-2px);
    text-decoration: none;
}

.doc-card strong {
    display: block;
    color: var(--text);
    font-size: 0.98rem;
}

.doc-card span {
    display: block;
    margin-top: 5px;
    color: var(--text-muted);
    font-size: 0.88rem;
    line-height: 1.5;
}

/* Small labelled chips, e.g. panel availability */

.chip-row {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 22px;
}

.chip {
    padding: 4px 10px;
    border: 1px solid var(--border);
    border-radius: 999px;
    background: var(--bg-soft);
    color: var(--text-muted);
    font-size: 0.79rem;
    font-weight: 600;
}

.chip strong {
    color: var(--text);
    font-weight: 700;
}

/* Prev / next footer */

.page-nav {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
    margin-top: 64px;
    padding-top: 28px;
    border-top: 1px solid var(--border);
}

.page-nav a {
    padding: 14px 16px;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    text-decoration: none;
}

.page-nav a:hover {
    border-color: var(--accent);
    text-decoration: none;
}

.page-nav .page-nav-next {
    grid-column: 2;
    text-align: right;
}

.page-nav span {
    display: block;
    color: var(--text-faint);
    font-size: 0.76rem;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.page-nav strong {
    display: block;
    margin-top: 3px;
    color: var(--text);
    font-size: 0.97rem;
}

/* Feedback line */

.doc-feedback {
    margin-top: 40px;
    color: var(--text-faint);
    font-size: 0.88rem;
}

/* --------------------------------------------------------------------------
   Mobile sidebar drawer
   -------------------------------------------------------------------------- */

.sidebar-scrim {
    position: fixed;
    inset: var(--topbar-h) 0 0;
    z-index: 45;
    background: rgba(6, 14, 13, 0.5);
}

.sidebar-scrim[hidden] {
    display: none;
}

@media (max-width: 1180px) {
    .docs-shell {
        grid-template-columns: var(--sidebar-w) minmax(0, 1fr);
    }

    .docs-toc {
        display: none;
    }

    .toc-inline {
        display: block;
    }

    .docs-main {
        padding: 36px 40px 88px;
    }
}

@media (max-width: 940px) {
    .docs-shell {
        grid-template-columns: minmax(0, 1fr);
    }

    .topbar-menu {
        display: inline-flex;
    }

    .docs-sidebar {
        position: fixed;
        top: var(--topbar-h);
        left: 0;
        z-index: 50;
        width: min(310px, 82vw);
        height: calc(100vh - var(--topbar-h));
        height: calc(100dvh - var(--topbar-h));
        background: var(--bg);
        transform: translateX(-102%);
        transition: transform 0.2s ease;
        box-shadow: var(--shadow-lg);
    }

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

    .docs-main {
        padding: 30px 22px 72px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .docs-sidebar {
        transition: none;
    }
}

@media (max-width: 640px) {
    .docs-main {
        padding: 26px 18px 64px;
    }

    .prose h2 {
        margin-top: 44px;
    }

    .page-nav {
        grid-template-columns: minmax(0, 1fr);
    }

    .page-nav .page-nav-next {
        grid-column: 1;
        text-align: left;
    }
}

/* --------------------------------------------------------------------------
   Motion — transitions only. Documentation pages get no entrance animation:
   you navigate between them constantly, and a fade on every click wears out
   fast. The global reduced-motion switch lives in styles.css.
   -------------------------------------------------------------------------- */

.nav-list a,
.nav-sub a,
.nav-aside a {
    transition: background-color 0.15s ease, color 0.15s ease;
}

.toc-list a {
    transition: color 0.15s ease, border-left-color 0.15s ease;
}

.doc-card,
.page-nav a {
    transition: border-color 0.15s ease, transform 0.15s ease;
}

/* Hover lift needs a real pointer — see the note in styles.css. Kept here
   because docs.css loads later and would otherwise win the cascade. */
@media (hover: none) {
    .doc-card:hover,
    .page-nav a:hover {
        transform: none;
    }

    .doc-card:active {
        transform: scale(0.985);
    }
}