/* docs.lvcs.sh (decision 324): the docs layout over public.css's theme.
   A sidebar of sections, the page, and its table of contents side by side;
   at phone width one column, the sidebar behind a Menu toggle. */

.docs-top { max-inline-size: 96rem; justify-content: flex-start; flex-wrap: wrap; }
.docs-top .mark svg { block-size: 1.7rem; }
.docs-home { font-weight: 900; font-stretch: 100%; text-transform: uppercase; text-decoration: none; letter-spacing: .03em; border-inline-start: 2px solid var(--line); padding-inline-start: 1rem; }
.docs-top nav { margin-inline-start: auto; }

.docs-search { position: relative; flex: 1 1 14rem; max-inline-size: 28rem; }
.docs-search input { inline-size: 100%; font: 15px var(--sans); color: var(--fg); background: var(--panel); border: 2px solid var(--line); padding: .5rem .75rem; border-radius: 0; }
.docs-search input:focus { border-color: var(--y); outline: none; }
.docs-search ul { position: absolute; inset-inline: 0; inset-block-start: calc(100% + 4px); z-index: 20; list-style: none; margin: 0; padding: 0; background: var(--panel); border: 2px solid var(--line); max-block-size: 70vh; overflow-y: auto; }
.docs-search li a { display: block; padding: .6rem .8rem; text-decoration: none; border-block-end: 1px solid var(--line); }
.docs-search li a b { display: block; font-weight: 800; }
.docs-search li a small { display: block; color: var(--mute); font: 11px var(--mono); text-transform: uppercase; letter-spacing: .06em; }
.docs-search li a span { display: block; color: var(--ink-2); font-size: .85rem; overflow-wrap: anywhere; }
.docs-search li a:hover, .docs-search li a[aria-selected="true"] { background: var(--tile); color: inherit; }
.docs-search li a[aria-selected="true"] b { color: var(--y); }
.docs-search .empty { padding: .6rem .8rem; color: var(--mute); }

.docs { display: grid; grid-template-columns: 15rem minmax(0, 1fr) 14rem; gap: 2.5rem; max-inline-size: 96rem; margin-inline: auto; padding-inline: var(--gutter); align-items: start; }
.docs-menu-toggle, .docs-menu-label { display: none; }

.docs-side, .docs-toc { position: sticky; inset-block-start: 1rem; max-block-size: calc(100vh - 2rem); overflow-y: auto; scrollbar-width: thin; font-size: .92rem; }
.docs-side ul, .docs-toc ul { list-style: none; margin: 0 0 1.2rem; padding: 0; }
.docs-side ul ul { margin: .2rem 0 .4rem; padding-inline-start: .8rem; border-inline-start: 2px solid var(--line); font-size: .85rem; }
.docs-side a, .docs-toc a { display: block; padding: .22rem .5rem; text-decoration: none; color: var(--ink-2); overflow-wrap: anywhere; }
.docs-side a:hover, .docs-toc a:hover { color: var(--y); }
.docs-side a[aria-current="page"] { color: var(--fg); font-weight: 800; box-shadow: inset 3px 0 0 var(--y); }
.docs-group, .docs-toc p { font: 600 11px var(--mono); text-transform: uppercase; letter-spacing: .12em; color: var(--y); margin: 0 0 .4rem; padding-inline: .5rem; }
.docs-toc .toc-3 a { padding-inline-start: 1.3rem; font-size: .85rem; }

.docs-main { min-inline-size: 0; padding-block: 1rem 2rem; }
.docs-main .generated { max-inline-size: 52rem; }
.docs-main .generated h2 { font-size: clamp(1.3rem, 2.4vw, 1.7rem); scroll-margin-block-start: 1rem; }
.docs-main .generated h3 { text-transform: none; font-size: 1.1rem; margin-block-start: 1.8rem; scroll-margin-block-start: 1rem; }
.docs-main .generated h3 code, .docs-main .generated h2 code { font-size: .9em; }
.docs-main .generated pre { max-inline-size: 100%; }

.docs-pager { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; max-inline-size: 52rem; margin-block-start: 3rem; }
.docs-pager a { display: block; padding: .9rem 1rem; border: 2px solid var(--line); text-decoration: none; font-weight: 800; overflow-wrap: anywhere; }
.docs-pager a:hover { border-color: var(--y); color: inherit; }
.docs-pager span { display: block; font: 600 11px var(--mono); text-transform: uppercase; letter-spacing: .12em; color: var(--mute); }
.docs-next { grid-column: 2; text-align: end; }

.docs + .foot { max-inline-size: 96rem; }

@media (max-width: 1100px) {
  .docs { grid-template-columns: 14rem minmax(0, 1fr); }
  .docs-toc { display: none; }
}

@media (max-width: 760px) {
  .docs { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .docs-top nav { display: none; }
  .docs-search { order: 3; flex-basis: 100%; max-inline-size: none; }
  .docs-menu-label { display: block; font: 600 12px var(--mono); text-transform: uppercase; letter-spacing: .12em; border: 2px solid var(--line); padding: .6rem .8rem; cursor: pointer; }
  .docs-menu-label::before { content: "☰ "; color: var(--y); }
  .docs-menu-toggle:focus-visible + .docs-menu-label { outline: 2px solid var(--y); outline-offset: 3px; }
  .docs-menu-toggle:checked + .docs-menu-label { border-color: var(--y); }
  .docs-side { display: none; position: static; max-block-size: none; border: 2px solid var(--line); border-block-start: 0; padding-block: .8rem; }
  .docs-menu-toggle:checked ~ .docs-side { display: block; }
  .docs-pager { grid-template-columns: minmax(0, 1fr); }
  .docs-next { grid-column: 1; }
}