/* Docs layout: contents list beside a keylined page, previous/next below. */
.docs{display:grid;grid-template-columns:minmax(0,250px) minmax(0,1fr);gap:40px;align-items:start;padding-block:16px 24px}
main{min-width:0}
main:focus{outline:none}

.toc{position:sticky;top:16px;max-height:calc(100vh - 32px);overflow-y:auto}
.toc summary{cursor:pointer;font-weight:700;font-size:17px;list-style-position:inside;min-height:44px;display:flex;align-items:center;gap:8px}
.toc ul{list-style:none;margin:0;padding:0;display:grid;gap:2px}
.toc a{display:block;padding:7px 12px;border-radius:10px;text-decoration:none;font-weight:500;font-size:15.5px;line-height:1.35}
.toc a:hover{background:var(--page)}
.toc a[aria-current="page"]{background:var(--yellow);color:var(--onyellow);font-weight:700}
.toc .sections{margin:4px 0 8px 12px;padding-left:10px;border-left:2px solid var(--key)}
.toc .sections a{font-size:14.5px;padding:5px 10px;color:var(--soft)}
.toc .sections a:hover{color:var(--ink)}

.doc{background:var(--page);border:3px solid var(--key);border-radius:18px;padding:40px 48px 48px}
.doc h1{font-size:44px;line-height:1.08;letter-spacing:-.01em}
.doc h2{font-size:30px;line-height:1.15;margin-top:52px;scroll-margin-top:16px}
.doc h3{font-size:21px;line-height:1.25;margin-top:34px;scroll-margin-top:16px}
.doc p,.doc ul,.doc ol{margin-top:16px;max-width:68ch}
.doc h1+p{font-size:19px;color:var(--soft);margin-top:20px}
.doc ul,.doc ol{padding-left:1.4em}
.doc li+li{margin-top:8px}
.doc a{font-weight:500;text-decoration-thickness:1px}
.doc a:hover{text-decoration-thickness:2px}
.doc em{color:var(--soft)}
.doc hr{border:0;border-top:2px solid var(--ghost);margin:32px 0}

.doc code{font:500 .86em/1.5 ui-monospace,Consolas,monospace;background:var(--ghost);border-radius:6px;padding:.1em .35em;overflow-wrap:anywhere}
.doc pre{margin:20px 0 0;background:var(--ghost);border-radius:12px;padding:16px 20px;overflow-x:auto;font:500 14px/1.6 ui-monospace,Consolas,monospace}
.doc pre code{background:none;padding:0;font:inherit;overflow-wrap:normal}

.table-wrap{margin-top:20px;overflow-x:auto}
.doc table{border-collapse:collapse;width:100%;font-size:16px;line-height:1.5}
.doc th,.doc td{text-align:left;vertical-align:top;padding:10px 14px 10px 0;border-bottom:2px solid var(--ghost)}
.doc th{font-weight:700;border-bottom-color:var(--key)}
.doc td:first-child{white-space:nowrap}

.shot{margin-top:24px}
.shot img,.shot-grid img{border-radius:10px}
.shot-grid{margin-top:24px;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px;align-items:start}

.careful{margin-top:24px;background:var(--ghost);border-radius:14px;padding:16px 20px}
.careful p{margin:0}
.careful code{background:var(--page)}
.soon-ref{color:var(--soft);font-size:15px;white-space:nowrap}

.pager{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px;margin-top:24px}
.pager a{display:grid;gap:2px;background:var(--page);border-radius:14px;padding:14px 20px;text-decoration:none;font-weight:700}
.pager a span{font-weight:500;font-size:14.5px;color:var(--soft)}
.pager a:hover{text-decoration:underline}
.pager .next{grid-column:2;text-align:right}

@media (min-width:921px){
  .toc[open] summary{display:none}
}
@media (max-width:920px){
  .docs{display:block}
  .toc{position:static;max-height:none;background:var(--page);border-radius:14px;padding:4px 16px;margin-bottom:16px}
  .toc[open]{padding-bottom:14px}
  .toc:not([open]) nav{display:none}
  .doc{padding:26px 20px 32px;border-radius:16px}
  .doc h1{font-size:34px}
  .doc h2{font-size:26px;margin-top:40px}
  .shot-grid{grid-template-columns:minmax(0,1fr)}
  .doc td:first-child{white-space:normal}
}
@media (max-width:560px){
  .pager{grid-template-columns:minmax(0,1fr)}
  .pager .next{grid-column:1}
}