/* ---------------------------------------------------------------------------
   Documentation pages (/docs/{lang}/{slug}).

   This file only PLACES things. Everything typographic on a docs page, from
   headings and paragraphs to lists, code, tables and callouts, comes from the
   site's own .prose rules in site.css and page.css, so a docs page cannot
   drift from the rest of agentidoo.com. If a docs page looks wrong in its
   text, fix .prose, not this file.

   The layout sits in the same column as every inner page (--pg-col, 292
   design units in from the 1728 frame), so the title, the rail and the text
   start where they start on /terms or /about.
   --------------------------------------------------------------------------- */

/* The same box as .section on every other inner page, so the gap down to
   the footer and the phone gutter below match /terms and /about exactly. */
.docs {
    display: grid;
    grid-template-columns: minmax(180px, 232px) minmax(0, 1fr);
    column-gap: clamp(40px, 5vw, 96px);
    align-items: start;
    padding: 0 var(--pg-col) 88px;
    background: var(--paper);
}

/* ---- the rail: every page, and the sections of the one you are on ------- */

.docs-side {
    position: sticky;
    /* the same clearance the site gives anchor targets under the floating bar */
    top: calc(104 * var(--pg-u) + 24px);
    max-height: calc(100svh - 104 * var(--pg-u) - 48px);
    overflow-y: auto;
    font-size: 15px;
    line-height: 1.45;
}

.docs-side ul { list-style: none; margin: 0; padding: 0; }

/* Phones only: the way to every page when the list itself is folded away. */
.docs-side__all { display: none; }

.docs-side__nav a {
    display: block;
    padding: 7px 0 7px 16px;
    border-left: 1px solid var(--line-soft);
    color: var(--ink-3);
}
.docs-side__nav a:hover { color: var(--ink); }
/* the API reference is not a guide page: it sits apart, under the list */
.docs-side__nav .docs-side__api { margin-top: 16px; }

.docs-side__nav a[aria-current="page"] {
    color: var(--ink);
    font-weight: 500;
    border-left-color: var(--accent);
}

/* The accent line follows the section being read (docs.js). It lies exactly
   on the rail's own 1px line, so moving it changes only which stretch of the
   line is violet. Without the script the page link keeps the accent itself. */
.docs-side__nav { position: relative; }
.docs-side__marker {
    position: absolute;
    top: 0;
    left: 0;
    width: 1px;
    height: 0;
    background: var(--accent);
    pointer-events: none;
    transition: transform .3s cubic-bezier(.32,.72,0,1), height .3s cubic-bezier(.32,.72,0,1);
}
.docs-side__marker.is-still { transition: none; }
.docs-side__nav.has-marker a[aria-current="page"] { border-left-color: var(--line-soft); }
.docs-toc a[aria-current="location"] { color: var(--ink); }
@media (prefers-reduced-motion: reduce) {
    .docs-side__marker { transition: none; }
}

/* The current page's sections hang under it on the same line, one step in,
   so "where am I" and "what is on this page" are one list, not two. */
.docs-toc { margin: 0 0 6px; }
.docs-toc a {
    padding: 5px 0 5px 30px;
    font-size: 14px;
    color: var(--ink-3);
}

.docs-lang {
    display: flex;
    gap: 16px;
    margin: 32px 0 0;
    padding-left: 16px;
    font-size: 13px;
    letter-spacing: 0.02em;
}
.docs-lang a { color: var(--ink-3); }
.docs-lang a[aria-current="true"] { color: var(--ink); font-weight: 500; }
/* On wide screens the site header carries the language switch, so the rail
   does not repeat it; the phone row keeps it, where the header's switch sits
   inside the menu. */
@media (min-width: 901px) {
    .docs-lang { display: none; }
}

/* ---- the text ------------------------------------------------------------ */

.docs-body { min-width: 0; }

/* A reading measure, not the 780 the legal pages use: docs are scanned
   and come back to, and a table must still fit beside the rail. */
.docs-prose { max-width: 720px; }

/* ---- previous and next -------------------------------------------------- */

.docs-pager {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
    max-width: 720px;
    margin-top: 80px;
}
.docs-pager a {
    display: grid;
    gap: 6px;
    padding: 20px 22px;
    border: 1px solid var(--line-soft);
    border-radius: var(--r-frame);
    color: var(--ink);
    font-size: 17px;
    transition: border-color .18s ease, color .18s ease;
}
.docs-pager a:hover { border-color: var(--line); color: var(--ink); }
.docs-pager span {
    font-size: 12px;
    line-height: 1.55;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--ink-3);
}
.docs-pager__next { grid-column: 2; text-align: right; }

/* ---- the index and the not-found page: every page with its summary ------ */

.docs-index {
    list-style: none;
    margin: 0;
    padding: 0;
    max-width: 720px;
    border-top: 1px solid var(--line-soft);
}
.docs-index a {
    display: grid;
    gap: 6px;
    padding: 24px 0;
    border-bottom: 1px solid var(--line-soft);
    color: var(--ink);
}
.docs-index__title {
    font-size: 20px;
    line-height: 1.25;
    letter-spacing: -0.01em;
    transition: color .18s ease;
}
.docs-index__summary { font-size: 15px; line-height: 1.55; color: #656565; }
.docs-index a:hover .docs-index__title { color: var(--ink); }

/* ---- narrow screens: the rail becomes the top of the page --------------- */

@media (max-width: 900px) {
    .docs {
        grid-template-columns: minmax(0, 1fr);
        row-gap: 48px;
        padding: 0 24px 64px;
    }
    /* Above the text, a full list of pages would push the text itself off
       the first screen. On a phone the rail folds into one row: a link to
       the index, which lists every page with its summary, and the language
       switch. Previous and next stay at the end of the page. */
    .docs-side {
        position: static;
        max-height: none;
        overflow: visible;
        display: flex;
        flex-wrap: wrap;
        align-items: baseline;
        justify-content: space-between;
        gap: 12px 24px;
        padding-bottom: 16px;
        border-bottom: 1px solid var(--line-soft);
    }
    .docs-side__nav { display: none; }
    .docs-side__all { display: inline; color: var(--ink); font-weight: 500; }
    .docs-side__all::after { content: " →"; content: " →" / ""; }
    .docs-lang { margin: 0; padding: 0; }
    .docs-pager { grid-template-columns: minmax(0, 1fr); }
    .docs-pager__next { grid-column: 1; text-align: left; }
}