/* Docs pages: sidebar, content, outline. Builds on site.css. */
.docs .nav nav a[aria-current="true"] { color: var(--ink); }
.docs .menu { display: none; font: 600 .9rem var(--sans); color: var(--ink); background: var(--panel); border: 1px solid var(--line); border-radius: 8px; padding: .4rem .8rem; cursor: pointer; }

.docs-layout { display: grid; grid-template-columns: 15.5rem minmax(0, 1fr) 12.5rem; gap: 2.5rem; width: min(84rem, 100% - 2rem); margin-inline: auto; padding: 1.5rem 0 4rem; }
.sidebar { position: sticky; top: 4.6rem; align-self: start; max-height: calc(100vh - 5.5rem); overflow-y: auto; padding-right: .3rem; }
.sidebar .pages { display: grid; gap: .1rem; margin-top: .8rem; }
.sidebar .pages a { color: var(--ink-2); text-decoration: none; padding: .38rem .6rem; border-radius: 8px; font-size: .93rem; }
.sidebar .pages a:hover { color: var(--ink); background: var(--band); }
.sidebar .pages a[aria-current="page"] { color: var(--ink); background: color-mix(in srgb, var(--accent) 16%, transparent); font-weight: 600; }
.search input { width: 100%; font: 500 .92rem var(--sans); color: var(--ink); background: var(--panel); border: 1px solid var(--line); border-radius: 9px; padding: .55rem .75rem; }
.search input:focus { outline: 2px solid var(--accent); outline-offset: 1px; }
.results { margin-top: .5rem; display: grid; gap: .25rem; }
.results a { display: block; text-decoration: none; padding: .45rem .6rem; border-radius: 8px; border: 1px solid var(--line); background: var(--panel); }
.results a:hover, .results a:focus { border-color: var(--accent); }
.results strong { display: block; color: var(--ink); font-size: .88rem; }
.results span { display: block; color: var(--ink-2); font-size: .78rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.results .none { color: var(--ink-2); font-size: .88rem; padding: .3rem .2rem; }

.doc { min-width: 0; line-height: 1.7; }
.doc h1 { font-size: clamp(1.9rem, 4vw, 2.6rem); margin-bottom: 1rem; max-width: none; }
.doc h2 { font-size: 1.5rem; margin: 2.6rem 0 .8rem; padding-top: .6rem; border-top: 1px solid var(--line); }
.doc h3 { font-size: 1.12rem; margin: 1.8rem 0 .5rem; }
.doc h4 { margin: 1.4rem 0 .4rem; }
.doc h1, .doc h2, .doc h3, .doc h4 { position: relative; scroll-margin-top: 5rem; }
.doc .anchor { position: absolute; left: -1.1rem; color: var(--ink-2); opacity: 0; text-decoration: none; font-weight: 400; }
.doc h2:hover .anchor, .doc h3:hover .anchor, .doc .anchor:focus { opacity: .7; }
.doc p, .doc ul, .doc ol, .doc .table-wrap, .doc pre { margin: 0 0 1rem; }
.doc ul, .doc ol { padding-left: 1.4rem; }
.doc li + li { margin-top: .25rem; }
.doc a { color: var(--accent-ink); }
.doc blockquote { margin: 0 0 1rem; padding: .6rem 1rem; border-left: 3px solid var(--accent); background: var(--band); border-radius: 0 8px 8px 0; }
.doc .table-wrap { overflow-x: auto; border: 1px solid var(--line); border-radius: 10px; }
.doc table { font-size: .9rem; }
.doc th { text-align: left; font-weight: 600; padding: .5rem .7rem; background: var(--band); border-bottom: 1px solid var(--line); }
.doc td { padding: .45rem .7rem; border-top: 1px solid var(--line); }
.doc tr:first-child td { border-top: 0; }
.doc td:first-child { white-space: normal; }
.doc pre.code { position: relative; }
.doc .copy-code { position: absolute; top: .45rem; right: .45rem; font: 600 .75rem var(--sans); color: #c9d1e3; background: #1a2133; border: 1px solid #2a3450; border-radius: 6px; padding: .2rem .55rem; cursor: pointer; opacity: 0; transition: opacity .15s; }
.doc pre.code:hover .copy-code, .doc .copy-code:focus { opacity: 1; }
@media (hover: none) { .doc .copy-code { opacity: 1; } }
.doc .edit { margin-top: 3rem; font-size: .9rem; }

.outline { position: sticky; top: 4.6rem; align-self: start; display: grid; gap: .2rem; font-size: .85rem; max-height: calc(100vh - 6rem); overflow-y: auto; }
.outline p { font: 600 .72rem var(--mono); letter-spacing: .06em; text-transform: uppercase; color: var(--ink-2); margin-bottom: .4rem; }
.outline a { color: var(--ink-2); text-decoration: none; padding: .15rem 0; }
.outline a:hover { color: var(--ink); }

@media (max-width: 1180px) { .docs-layout { grid-template-columns: 15rem minmax(0, 1fr); } .outline { display: none; } }
@media (max-width: 820px) {
  .docs .menu { display: inline-block; }
  .docs .nav nav a:not(.gh) { display: none; }
  .docs-layout { grid-template-columns: minmax(0, 1fr); gap: 0; padding-top: .8rem; }
  .sidebar { position: fixed; z-index: 30; inset: 3.6rem 0 0 0; max-height: none; padding: 1rem; background: var(--bg); display: none; }
  .sidebar.open { display: block; }
  .doc .anchor { display: none; }
}
/* the home page stacks table cells on phones; docs tables stay tables and scroll sideways instead */
@media (max-width: 560px) {
  .doc tr { display: table-row; padding: 0; border: 0; }
  .doc td { display: table-cell; padding: .45rem .7rem; border-top: 1px solid var(--line); }
  .doc tr:first-child td { border-top: 0; }
  .doc td:first-child { white-space: nowrap; }
  .doc table { min-width: 34rem; }
}