/* Shared styles for every page under /docs/. The header markup is the
   homepage's (scripts/docs-header-test.cjs holds them equal), so the header
   rules here mirror index.html's; everything else is the docs layout. */
:root{--cream:var(--bg);--terra:var(--cta);--terra-dark:var(--cta-hover);--border:var(--line);--chip:var(--panel)}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--cream);color:var(--ink);font:16px/1.65 system-ui,sans-serif}
a{text-decoration:none;color:inherit}
.wrap{max-width:1120px;margin:0 auto;padding:0 32px}
.navlink:hover{color:var(--ink)}
.navcta:hover{background:var(--terra-dark)}
.nav-inner{box-sizing:content-box;line-height:normal}

/* layout */
.docs{display:grid;grid-template-columns:232px minmax(0,1fr);gap:52px;padding:40px 0 96px}
.docs-side{position:sticky;top:24px;align-self:start;max-height:calc(100vh - 48px);overflow-y:auto}
.toc-menu > summary{display:none}
.kick{font:700 12px 'IBM Plex Mono',monospace;color:var(--terra-text);letter-spacing:.04em;margin:0 0 14px}
nav.toc .kick{margin:18px 0 6px 12px}
nav.toc .kick:first-child{margin-top:0}
nav.toc a{display:block;padding:6px 12px;border-radius:9px;color:var(--sec);font:500 14px system-ui;margin-bottom:2px}
nav.toc a:hover{background:var(--chip);color:var(--ink)}
nav.toc a[aria-current="page"]{background:var(--tint);color:var(--ink);font-weight:600}
nav.toc a:focus-visible,.pager a:focus-visible,.doc-card:focus-visible{outline:2px solid var(--ink);outline-offset:2px}

main{min-width:0;overflow-wrap:break-word}
section{scroll-margin-top:24px;padding-bottom:14px;margin-bottom:38px;border-bottom:1px solid var(--border)}
section:last-of-type{border-bottom:none}
h1{font:800 46px/1.05 'Bricolage Grotesque',sans-serif;letter-spacing:-.015em;margin:0 0 10px}
.lede{font:400 19px/1.6 system-ui;color:var(--sec);max-width:680px;margin:0 0 22px}
h2{font:700 27px 'Bricolage Grotesque',sans-serif;letter-spacing:-.01em;margin:0 0 14px;scroll-margin-top:24px}
h3{font:600 17px system-ui;margin:26px 0 8px;scroll-margin-top:24px}
p{color:var(--sec);margin:0 0 14px;max-width:680px}
ul,ol{color:var(--sec);margin:0 0 14px;padding-left:20px;max-width:680px}
li{margin:6px 0}
[id]{scroll-margin-top:24px}
strong{color:var(--ink)}
main a:not(.btn):not(.doc-card):not(.pager-link){color:var(--link);text-decoration:underline;text-underline-offset:2px}
code{font:500 13.5px 'IBM Plex Mono',monospace;background:var(--chip);color:var(--ink);padding:2px 6px;border-radius:6px;overflow-wrap:anywhere}
pre{background:var(--ink);color:var(--code-text);border-radius:14px;padding:18px 20px;overflow:auto;margin:0 0 16px;
    font:500 13px/1.7 'IBM Plex Mono',monospace;max-width:680px}
pre code{background:none;color:inherit;padding:0;font:inherit;overflow-wrap:normal}
pre .c{color:var(--code-comment)}
pre .k{color:var(--code-key)}
pre .s{color:var(--code-str)}
pre.mermaid{background:var(--surface);border:1px solid var(--border);color:var(--ink)}
.badge{display:inline-block;font:500 11.5px 'IBM Plex Mono',monospace;color:var(--terra-text);
       background:var(--tint);padding:3px 10px;border-radius:999px;margin-bottom:16px}
.btn{display:inline-block;background:var(--terra);color:var(--on-cta);font:600 15px system-ui;
     padding:12px 24px;border-radius:999px;cursor:pointer;margin:4px 8px 4px 0}
.btn:hover{background:var(--terra-dark)}
.btn.ghost{background:var(--surface);color:var(--ink);border:1px solid var(--border)}
.btn.ghost:hover{border-color:var(--hover-line)}
.note{background:var(--surface);border:1px solid var(--border);border-left:3px solid var(--terra);
      border-radius:12px;padding:14px 18px;margin:0 0 16px;max-width:680px}
.note p{margin:0}
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:16px;max-width:680px;margin-bottom:16px}
.card{background:var(--surface);border:1px solid var(--border);border-radius:14px;padding:18px}
.card h3{margin:0 0 6px}
.card p{margin:0;font-size:14.5px}
.doc-cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:14px;margin:0 0 30px}
.doc-card{display:block;background:var(--surface);border:1px solid var(--border);border-radius:14px;padding:18px;transition:border-color .15s}
.doc-card:hover{border-color:var(--hover-line)}
.doc-card h3{margin:0 0 6px;color:var(--ink)}
.doc-card p{margin:0;font-size:14.5px}
.table-wrap{max-width:100%;overflow-x:auto;margin:0 0 18px;border:1px solid var(--border);border-radius:12px;background:var(--surface)}
table{border-collapse:collapse;width:100%;font-size:14.5px}
th,td{text-align:left;vertical-align:top;padding:10px 12px;border-bottom:1px solid var(--border);color:var(--sec)}
th{color:var(--ink);font-weight:600;background:var(--panel-a)}
tr:last-child td{border-bottom:none}
.wide-table table{min-width:640px}
.on-page{background:var(--surface);border:1px solid var(--border);border-radius:14px;padding:16px 20px 6px;margin:0 0 34px;max-width:680px}
.on-page .kick{margin-bottom:8px}
.on-page li{margin:3px 0}
.pager{display:flex;justify-content:space-between;gap:14px;margin-top:8px;padding-top:24px;border-top:1px solid var(--border)}
.pager-link{display:block;flex:1 1 0;min-width:0;background:var(--surface);border:1px solid var(--border);border-radius:14px;padding:14px 18px}
.pager-link:hover{border-color:var(--hover-line)}
.pager-link span{display:block;font:500 12px 'IBM Plex Mono',monospace;color:var(--muted)}
.pager-link strong{font:600 15px system-ui}
.pager-link.next{text-align:right}

/* footer: the homepage's, with room to wrap on a phone */
.site-foot{border-top:1px solid var(--line-3);background:var(--bg)}
.footer-inner{max-width:1120px;margin:0 auto;display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:10px 24px;padding:26px 32px;font:400 13px system-ui,sans-serif;color:var(--faint)}
.footer-links{display:flex;flex-wrap:wrap;gap:8px 24px}

/* Same as index.html: the desktop nav is 754px wide at full spacing. */
@media(min-width:701px) and (max-width:860px){
  .nav-links{gap:16px !important}
}
@media(max-width:820px){
  .docs{grid-template-columns:minmax(0,1fr);gap:8px;padding-top:16px}
  .docs-side{position:static;max-height:none;overflow:visible;margin-bottom:12px}
  .toc-menu{background:var(--surface);border:1px solid var(--border);border-radius:14px}
  .toc-menu > summary{display:flex;align-items:center;justify-content:space-between;cursor:pointer;list-style:none;
    padding:12px 16px;font:600 14px system-ui;color:var(--ink)}
  .toc-menu > summary::-webkit-details-marker{display:none}
  .toc-menu > summary::after{content:"+";font:600 18px/1 system-ui;color:var(--muted)}
  .toc-menu[open] > summary::after{content:"\2212"}
  .toc-menu > summary:focus-visible{outline:2px solid var(--ink);outline-offset:2px;border-radius:14px}
  nav.toc{padding:0 8px 10px}
  nav.toc .kick:first-child{margin-top:6px}
  h1{font-size:38px}
  .grid2{grid-template-columns:1fr}
}
@media(max-width:700px){
  .nav-inner{padding:18px 20px !important;gap:0;flex-wrap:nowrap}
  .nav-links{gap:16px !important;flex-wrap:nowrap}
  .nav-links .navlink{display:none}
  .nav-links .navlogin{display:inline}
  .wrap{padding-left:20px !important;padding-right:20px !important}
  .footer-inner{padding:22px 20px}
  h1{font-size:34px}
  h2{font-size:24px}
  .lede{font-size:17px}
  pre{padding:14px 16px;font-size:12.5px}
  .pager{flex-direction:column}
  .pager-link.next{text-align:left}
}