/* Docs layer on the balladeer.ai design system. Tokens come from /styles.css; this file only adds reading-page structure (prose measure, glossary, question router, source footers). No new colors, no new fonts. */ /* width:100% is load-bearing: body is a column flex container (the footer-at-the-bottom rule in styles.css), and a flex item whose cross-axis margins are both auto is NOT stretched to fill. Without it this box shrinks to fit-content (1180px -> 1046px) and the whole docs column narrows and reflows. */ .docshell{display:grid;grid-template-columns:230px minmax(0,1fr);gap:48px;width:100%;max-width:var(--maxw);margin:0 auto;padding:0 24px} /* Sticky offset MUST equal the aside's natural resting top (the 65px nav bar), or sticky pushes it down toward the offset by however much slack the page's height allows, and the sidebar rests at a different Y on short vs long pages (the 7px jump of 14 jul 2026). */ .docsnav{position:sticky;top:65px;align-self:start;padding:40px 0 64px;font-size:.92rem;max-height:calc(100vh - 65px);overflow-y:auto} .docsnav .dn-home{display:block;font-family:var(--display);font-weight:600;font-size:1.02rem;margin-bottom:.9rem} .docsnav .dn-group{font-family:var(--mono);font-size:.66rem;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-3);margin:1.4rem 0 .4rem} .docsnav a{display:block;padding:.28rem 0;color:var(--ink-2)} .docsnav a:hover{color:var(--ink)} .docsnav a[aria-current="page"]{color:var(--accent-ink);font-weight:600} .dn-toggle{display:none} /* Reserve the search box's mounted height (measured 51px): Pagefind injects its input AFTER the nav links render, and without the reservation every page load visibly shifts the links down when it mounts. */ #docsearch{margin:.4rem 0 .4rem;min-height:51px} /* Short pages (the index) have no window scrollbar, long pages do; without a stable gutter the layout re-centers between them, which reads as the nav jumping. */ html{scrollbar-gutter:stable} #docsearch .pagefind-ui__search-input{font-family:var(--sans);font-size:.9rem;border:1px solid var(--line);border-radius:8px;background:var(--card)} @media (max-width:860px){ .docshell{grid-template-columns:1fr;gap:0} .docsnav{display:none;position:static;max-height:none;padding:8px 0 16px;border-bottom:1px solid var(--line-2)} .docsnav.open{display:block} .dn-toggle{display:inline-flex;margin:20px 0 0;font-family:var(--mono);font-size:.78rem;padding:.45rem .8rem;border:1px solid var(--line);border-radius:7px;background:var(--card);cursor:pointer} } /* width:100% for the same reason as .docshell above: this standalone variant styles a sidebar-less docs page, where .docmain sits straight in and its auto margins would otherwise collapse it to fit-content. The .docshell variant below sets margin:0, so it is unaffected either way. */ .docmain{width:100%;max-width:860px;margin:0 auto;padding:72px 24px 96px} .docshell .docmain{max-width:720px;margin:0;padding:40px 0 96px} .crumbs{font-family:var(--mono);font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-3);margin:0 0 1.4rem} .crumbs a{color:var(--accent-ink)} .crumbs a:hover{text-decoration:underline} .docmain h1{font-size:clamp(2rem,4.5vw,2.8rem);margin:0 0 1rem} .doclede{font-size:1.14rem;line-height:1.6;color:var(--ink-2);max-width:44rem;margin:0 0 2.4rem} .docmain h2{font-size:1.35rem;margin:3.2rem 0 .8rem} .docmain p{color:var(--ink-2);margin:.8rem 0;max-width:46rem} .docmain p b,.docmain li b{color:var(--ink);font-weight:600} .docmain ul{color:var(--ink-2);padding-left:1.2rem;max-width:46rem} .docmain li{margin:.5rem 0} .docmain p code,.docmain li code,.docmain dd code{font-family:var(--mono);font-size:.85em;background:var(--accent-soft);color:var(--accent-ink);padding:.08rem .35rem;border-radius:5px;white-space:nowrap} .capnote{font-family:var(--mono);font-size:.72rem;color:var(--ink-3);margin:.7rem 0 0} .docmain .term{margin:1.2rem 0;max-width:46rem} .docmain .dcard{max-width:640px;margin:1.4rem 0} .docmain .dcard .claim{font-size:1.2rem} .gloss{border:1px solid var(--line);border-radius:12px;background:var(--card);padding:.4rem 1.5rem 1.3rem;max-width:46rem;margin:1.2rem 0} .gloss dt{font-family:var(--mono);font-size:.8rem;color:var(--accent-ink);margin-top:1.1rem} .gloss dd{margin:.3rem 0 0;color:var(--ink-2);font-size:.95rem;line-height:1.55} .qgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:16px;margin:2rem 0 1rem} .qcard{display:block;background:var(--card);border:1px solid var(--line);border-radius:12px;padding:20px 20px 18px;transition:transform .15s ease,border-color .15s ease} .qcard:hover{border-color:var(--accent);transform:translateY(-2px)} .qcard .ql{font-family:var(--mono);font-size:.68rem;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-3);margin:0 0 .55rem} .qcard h3{font-family:var(--display);font-size:1.05rem;margin:0 0 .4rem;letter-spacing:-.01em} .qcard p{font-size:.9rem;margin:0;color:var(--ink-2)} .pagelist{list-style:none;padding:0;max-width:46rem} .pagelist li{display:flex;align-items:baseline;gap:.6rem;padding:.7rem 0;border-bottom:1px solid var(--line-2);margin:0} .pagelist .pl-name{font-weight:600;color:var(--ink)} .pagelist .pl-what{color:var(--ink-2);font-size:.92rem} .soon{font-family:var(--mono);font-size:.64rem;letter-spacing:.06em;padding:.18rem .5rem;border-radius:14px;background:var(--line-2);color:var(--ink-3);white-space:nowrap} .pagenav{display:flex;justify-content:space-between;gap:1rem;margin-top:3.4rem} .srcfoot{margin-top:4rem;padding-top:1.3rem;border-top:1px solid var(--line-2);font-family:var(--mono);font-size:.74rem;color:var(--ink-3);line-height:1.8;max-width:46rem} .srcfoot b{color:var(--ink-2);font-weight:500}