/* Docs layout. Every colour is a token from site.css, so dark mode follows the homepage. Spacing is on a 4px scale. */
html{scroll-padding-top:96px}
body.docs{margin:0;padding:0}

/* header */
.docs-header{position:sticky;top:0;z-index:20;height:64px;background:color-mix(in srgb,var(--ground) 88%,transparent);backdrop-filter:blur(10px);border-bottom:1px solid var(--border-subtle)}
.docs-header-inner{max-width:1360px;height:100%;margin-inline:auto;padding-inline:40px;display:flex;align-items:center;gap:20px}
.docs-label{padding-left:20px;border-left:1px solid var(--border);font-size:14px;line-height:20px;color:var(--muted);text-decoration:none}
.docs-label:hover,.website-link:hover{color:var(--text)}
.docs-actions{margin-left:auto;display:flex;align-items:center;gap:24px}
.website-link{font-size:14px;color:var(--text-2);text-decoration:none}
.docs-actions .btn{height:36px;padding-inline:14px}

/* three columns: sidebar, page, contents */
.docs-layout{max-width:1360px;margin-inline:auto;padding-inline:40px;display:grid;grid-template-columns:240px minmax(0,680px) 200px;justify-content:space-between;column-gap:64px}
.docs-sidebar{grid-column:1;grid-row:1 / span 2;position:sticky;top:64px;align-self:start;max-height:calc(100dvh - 64px);overflow-y:auto;padding:40px 4px 40px 0;scrollbar-width:thin}
.nav-group + .nav-group{margin-top:28px}
.nav-group > p{margin:0 0 8px;padding-inline:12px;font:500 11px/16px var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
.nav-group ul,.docs-toc ul,.docs-title ol,.guide-card ul{list-style:none;margin:0;padding:0}
.nav-group li + li{margin-top:2px}
.nav-group a{display:block;padding:6px 12px;border-radius:6px;font-size:14px;line-height:20px;color:var(--text-2);text-decoration:none}
.nav-group a:hover{background:var(--sunken);color:var(--text)}
.nav-group a[aria-current="page"]{background:var(--accent-tint);color:var(--accent-text);font-weight:550}
.docs-main{grid-column:2;grid-row:1;min-width:0;max-width:760px;padding-top:40px}
.docs-main:focus{outline:none}
.docs-toc{grid-column:3;grid-row:1;position:sticky;top:64px;align-self:start;max-height:calc(100dvh - 64px);overflow-y:auto;padding-block:40px;font-size:13px;line-height:20px}
.docs-toc p{margin-bottom:12px;font:500 11px/20px var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
.docs-toc ul{border-left:1px solid var(--border)}
.docs-toc a{display:block;margin-left:-1px;padding:4px 0 4px 12px;border-left:1px solid transparent;color:var(--muted);text-decoration:none}
.docs-toc a:hover{color:var(--text);border-left-color:var(--text-2)}

/* page heading */
.docs-title{margin-bottom:32px;padding-bottom:24px;border-bottom:1px solid var(--border-subtle)}
.docs-title ol{display:flex;flex-wrap:wrap;gap:4px 8px;font-size:13px;line-height:20px;color:var(--muted)}
.docs-title li + li::before{content:"›";margin-right:8px;color:var(--border-strong)}
.docs-title ol a{color:inherit;text-decoration:none}
.docs-title ol a:hover{color:var(--text)}
.docs-title [aria-current]{color:var(--text-2)}
.docs-title h1{margin-top:16px;font-size:clamp(30px,3.2vw,38px);line-height:1.15;font-weight:650;letter-spacing:-.03em}
.docs-meta{margin-top:16px;display:flex;flex-wrap:wrap;align-items:center;gap:8px 12px;font-size:13px;line-height:20px;color:var(--muted)}
.docs-meta > span:not(.doc-badge) + span::before{content:"";display:inline-block;width:3px;height:3px;margin:0 12px 0 0;border-radius:50%;background:var(--border-strong);vertical-align:middle}
.doc-badge{padding:2px 8px;border:1px solid var(--border);border-radius:4px;background:var(--sunken);font:500 11px/16px var(--mono);letter-spacing:.06em;text-transform:uppercase;color:var(--text-2)}

/* prose */
.prose{font-size:15.5px;line-height:1.75;color:var(--text-2);overflow-wrap:break-word}
.prose > * + *{margin-top:16px}
.prose > :first-child{margin-top:0}
.prose h2{margin-top:48px;font-size:22px;line-height:1.3;font-weight:600;letter-spacing:-.02em;color:var(--text)}
.prose h3{margin-top:32px;font-size:17px;line-height:1.4;font-weight:600;letter-spacing:-.01em;color:var(--text)}
.prose h2 + *,.prose h3 + *{margin-top:12px}
.prose strong{font-weight:600;color:var(--text)}
.prose a{color:var(--accent-text);text-decoration-color:var(--accent-border);text-underline-offset:3px}
.prose a:hover{text-decoration-color:currentColor}
.prose ul,.prose ol{padding-left:24px}
.prose li + li{margin-top:8px}
.prose li::marker{color:var(--muted)}
.prose code{padding:2px 6px;border:1px solid var(--border-subtle);border-radius:4px;background:var(--sunken);font:500 .86em var(--mono);color:var(--text)}
.prose pre{margin-top:24px;border:1px solid var(--border);border-radius:8px;background:var(--surface);overflow-x:auto}
.prose pre[data-lang]::before{content:attr(data-lang);position:sticky;left:0;display:block;padding:8px 16px;border-bottom:1px solid var(--border-subtle);font:500 11px/16px var(--mono);letter-spacing:.06em;text-transform:uppercase;color:var(--muted)}
.prose pre code{display:block;width:max-content;min-width:100%;padding:16px;border:0;background:none;font:400 13px/1.7 var(--mono)}
.prose img{max-width:100%;height:auto;border:1px solid var(--border);border-radius:12px}
.prose > :is(.shot,.illus){margin-block:32px}
.prose blockquote{margin-inline:0;padding-left:16px;border-left:2px solid var(--border-strong);color:var(--muted)}

/* tables and callouts */
.table-wrap{margin-top:24px;overflow-x:auto;border:1px solid var(--border);border-radius:8px;background:var(--surface)}
.prose table{width:100%;border-collapse:collapse;font-size:14px;line-height:1.6}
.prose th,.prose td{padding:12px 16px;text-align:left;vertical-align:top;border-bottom:1px solid var(--border-subtle)}
.prose th{background:var(--sunken);border-bottom-color:var(--border);font-weight:600;color:var(--text);white-space:nowrap}
.prose tr:last-child td{border-bottom:0}
.prose td code{font-size:.82em;white-space:nowrap}
.callout{margin-block:24px;padding:12px 16px;border:1px solid var(--accent-border);border-left:3px solid var(--accent);border-radius:8px;background:var(--accent-tint);font-size:14.5px;line-height:1.65;color:var(--text)}
.callout strong{color:var(--accent-text)}
.callout-tip{border-color:var(--met-border);border-left-color:var(--met-fill);background:var(--met-bg)}
.callout-tip strong{color:var(--met-text)}
.callout-important{border-color:var(--risk-border);border-left-color:var(--risk-fill);background:var(--risk-bg)}
.callout-important strong{color:var(--risk-text)}

/* docs home guide cards */
.prose .guide-cards{margin-block:32px 8px;display:grid;grid-template-columns:1fr 1fr;gap:16px}
.guide-card{padding:20px 24px;border:1px solid var(--border);border-radius:12px;background:var(--surface);scroll-margin-top:96px}
.prose .guide-card h2{margin:0 0 12px;font:500 11px/16px var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--accent-text)}
.prose .guide-card ul{padding:0}
.prose .guide-card li + li{margin-top:12px;padding-top:12px;border-top:1px solid var(--border-subtle)}
.prose .guide-card a{font-size:15px;font-weight:600;color:var(--text);text-decoration:none}
.prose .guide-card a:hover{color:var(--accent-text)}
.guide-card p{margin-top:2px;font-size:13.5px;line-height:1.55;color:var(--muted)}

/* previous and next, footer */
.pager{margin-top:56px;display:grid;grid-template-columns:1fr 1fr;gap:16px}
.pager a{display:grid;gap:4px;padding:16px 20px;border:1px solid var(--border);border-radius:8px;background:var(--surface);text-decoration:none;transition:border-color .15s}
.pager a:hover{border-color:var(--accent-border)}
.pager a span{font-size:12px;line-height:16px;color:var(--muted)}
.pager strong{font-size:15px;font-weight:600;color:var(--text)}
.pager .next{grid-column:2;text-align:right}
.docs .site-footer{width:calc(100% - 80px);max-width:1280px;margin-top:64px}

/* the mobile disclosure replaces the sidebar under 900px */
.docs-browse{display:none}
@media (max-width:1199px){.docs-layout{grid-template-columns:232px minmax(0,1fr);justify-content:normal;column-gap:56px}.docs-toc{display:none}}
@media (max-width:899px){
  html{scroll-padding-top:120px}
  .docs-header{height:56px}
  .docs-header-inner,.docs-layout{padding-inline:20px}
  .docs-layout{display:block}
  .docs-sidebar,.website-link{display:none}
  .docs-browse{display:block;position:sticky;top:56px;z-index:15;background:var(--ground);border-bottom:1px solid var(--border-subtle)}
  .docs-browse summary{display:flex;align-items:center;justify-content:space-between;height:44px;padding-inline:20px;font-size:14px;color:var(--text-2);cursor:pointer;list-style:none}
  .docs-browse summary::-webkit-details-marker{display:none}
  .docs-browse summary::after{content:"";width:7px;height:7px;border-right:1.5px solid currentColor;border-bottom:1.5px solid currentColor;transform:translateY(-2px) rotate(45deg)}
  .docs-browse[open] summary::after{transform:translateY(2px) rotate(-135deg)}
  .docs-browse nav{max-height:calc(100dvh - 100px);overflow-y:auto;padding:16px 8px 24px;border-top:1px solid var(--border-subtle)}
  .docs-main{max-width:none;padding-top:28px}
  .docs .site-footer{width:calc(100% - 40px);margin-top:48px}
}
@media (max-width:599px){
  .docs-header-inner{gap:12px;padding-inline:16px}
  .docs-layout{padding-inline:16px}
  .docs-browse summary{padding-inline:16px}
  .docs-label{padding-left:12px;font-size:13px}
  .docs-actions .btn{height:32px;padding-inline:12px;font-size:13px}
  .docs-title h1{font-size:28px}
  .prose{font-size:15px}
  .prose h2{margin-top:40px}
  .prose .guide-cards{grid-template-columns:1fr}
  .pager{gap:8px}
  .pager a{padding:12px 16px}
  .docs .site-footer{width:calc(100% - 32px)}
}