/* Guide (docs) pages. Mobile first; sidebar and desktop header from 800 px, "On this page" from 1100 px. */

/* ---- Header ---- */
.nav .nl,.nav .links>.btn{display:none}
.menubtn{display:inline-flex;align-items:center;gap:8px;height:40px;padding:0 16px;border-radius:20px;background:var(--sunk);font-size:14px;font-weight:500;cursor:pointer;list-style:none;position:relative}
.menubtn::-webkit-details-marker{display:none}
.menubtn::after{content:"";position:absolute;inset:-2px 0}
.gmenu .when-open,.gmenu[open] .when-closed{display:none}
.gmenu[open] .when-open{display:inline}
.gmenu[open] .menubtn svg.when-open{display:block}
.gmenu-panel{position:absolute;left:0;right:0;top:68px;padding:8px 12px}
/* open mobile menu replaces the page, as in the design */
body:has(.gmenu[open]) main,body:has(.gmenu[open]) .foot{display:none}
.nav{position:relative}

/* ---- Layout ---- */
.foot{margin-top:0}
.gd{display:flex;gap:48px;align-items:flex-start;padding:12px 20px 56px}
.gd.home{padding:16px 20px 48px}
.side-col{display:none}
.gd .toc{display:none}

/* ---- Sidebar ---- */
.side .grp{font-size:12px;font-weight:500;letter-spacing:.06em;text-transform:uppercase;color:var(--ink2);margin:26px 0 6px;padding:0 12px}
.side .grp:first-child{margin-top:0}
.side a{display:flex;align-items:center;height:36px;padding:0 12px;border-radius:10px;font-size:15px;color:var(--ink2);transition:background .15s,color .15s}
.side a:hover{background:var(--sunk);color:var(--ink)}
.side a[aria-current]{background:var(--sunk);color:var(--ink);font-weight:500}
.side.in-menu{padding:8px 8px 40px}

/* ---- Reading column ---- */
.doc{flex:1;min-width:0;max-width:620px}
.doc.wide{max-width:none}
.kicker{font-size:13px;color:var(--blueText);font-weight:500;margin-bottom:12px}
.doc h1{font-size:38px;line-height:1.05;font-weight:500;letter-spacing:-.04em}
.doc.wide h1{font-size:40px}
.doc .lead{font-size:17px;line-height:1.5;color:var(--ink2);margin-top:14px}
.doc h2{font-size:26px;line-height:1.2;font-weight:500;letter-spacing:-.025em;margin:48px 0 14px}
.doc p.b{font-size:16.5px;line-height:1.65;color:var(--ink2);margin:0 0 14px}
.doc code{font-family:"IBM Plex Mono",ui-monospace,monospace;font-size:.88em;background:var(--sunk);border-radius:6px;padding:2px 6px;color:var(--ink)}
.mobile-only{display:block}
.desktop-only{display:none}
.steps{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:22px}
.steps>li{display:grid;grid-template-columns:34px 1fr;font-size:16.5px;line-height:1.6;color:var(--ink)}
.steps>li>i{font-style:normal;font-family:"IBM Plex Mono",ui-monospace,monospace;font-size:14px;color:var(--ink3);padding-top:3px}
.steps .sub{color:var(--ink2);margin-top:6px}
.steps .sub b{color:var(--ink);font-weight:500}
.letters{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:8px;font-size:16.5px}
.letters li{display:grid;grid-template-columns:28px 1fr}
.letters i{font-style:normal;color:var(--ink3);font-family:"IBM Plex Mono",ui-monospace,monospace;font-size:14px;padding-top:2px}
.doc table.tb td,.slist li,.call{overflow-wrap:anywhere}
.code{background:var(--sunk);border:1px solid var(--line);border-radius:14px;padding:16px 76px 16px 18px;margin:12px 0 0;font-family:"IBM Plex Mono",ui-monospace,monospace;font-size:14px;line-height:1.7;color:var(--ink);overflow:hidden;white-space:pre-wrap}
.code code{font:inherit;background:none;padding:0;border-radius:0;color:inherit}
.call{border-radius:16px;padding:16px 18px;margin:18px 0;font-size:15.5px;line-height:1.6;color:var(--ink)}
.call b.t{display:block;font-size:12px;letter-spacing:.06em;text-transform:uppercase;font-weight:500;margin-bottom:4px}
.call.note{background:var(--blueTint)}.call.note b.t{color:var(--blueText)}
.call.warn{background:var(--amberTint)}.call.warn b.t{color:var(--amberText)}
.call.tip{background:var(--greenTint)}.call.tip b.t{color:var(--greenText)}
.term{background:#141413;color:#E9E9E4;border-radius:20px;padding:18px 20px 22px;font-family:"IBM Plex Mono",ui-monospace,monospace;font-size:13.5px;line-height:1.75;margin-top:16px;box-shadow:0 0 0 1px color-mix(in srgb,var(--ink) 10%,transparent)}
.term pre{margin:0;font:inherit;white-space:pre-wrap}
.term .dots{display:flex;gap:7px;margin-bottom:12px}
.term .dots i{width:11px;height:11px;border-radius:50%;background:#3a3a37;display:block}
.term .g{color:#6FE0A0}.term .m{color:#8C8C86}
table.tb{width:100%;border-collapse:collapse;font-size:15px;margin-top:6px}
table.tb th{text-align:left;font-weight:500;color:var(--ink2);font-size:13px;padding:10px 12px 10px 0;border-bottom:1px solid var(--line)}
table.tb td{padding:12px 12px 12px 0;border-bottom:1px solid var(--line);color:var(--ink2);vertical-align:top}
table.tb td:first-child{color:var(--ink)}
.slist{list-style:none;margin:0;padding:0;font-size:15px}
.slist li{padding:14px 0;border-bottom:1px solid var(--line)}
.slist .d{color:var(--ink3)}
.slist .m{color:var(--ink2);margin-top:4px}
.pn{display:grid;grid-template-columns:1fr;gap:12px;margin-top:56px}
.pn a{display:flex;flex-direction:column;gap:4px;padding:18px 20px;border-radius:18px;border:1px solid var(--line);transition:background .15s}
.pn a:hover{background:var(--sunk)}
.doc b{font-weight:500;color:var(--ink)}
.steps+p.b{margin-top:16px}
.bl{margin:0 0 14px;padding-left:20px;font-size:16.5px;line-height:1.6;color:var(--ink2)}
.bl li{margin:6px 0}
.bl .sub{margin-top:6px}
.call .sub{margin-top:8px}
.call .code{margin-top:12px}
.shot{display:flex;justify-content:center;align-items:flex-start;height:340px;padding-top:28px;overflow:hidden;background:var(--panel);border-radius:28px;margin-top:24px}
.shot .dev{width:250px}
.pn small{font-size:13px;color:var(--ink2)}
.pn span{font-size:17px;font-weight:500}

/* ---- "On this page" ---- */
.toc{width:180px;flex:none;position:sticky;top:24px;font-size:14px}
.toc .h{font-size:12px;font-weight:500;letter-spacing:.06em;text-transform:uppercase;color:var(--ink2);margin-bottom:10px}
.toc a{display:block;padding:6px 0 6px 14px;border-left:1px solid var(--line);color:var(--ink2)}
.toc a[aria-current]{border-left:2px solid var(--blue);padding-left:13px;color:var(--ink);font-weight:500}

/* ---- Guide home cards ---- */
.gcards{display:grid;grid-template-columns:minmax(0,1fr);gap:12px;margin-top:32px}
.gc{border-radius:28px;padding:28px 28px 24px;display:flex;flex-direction:column;gap:14px}
.gc h3{font-size:26px;font-weight:500;letter-spacing:-.02em}
.gc p{font-size:15.5px;line-height:1.5;color:var(--ink2)}
.gc ul{list-style:none;margin:6px 0 0;padding:0;display:flex;flex-direction:column;gap:2px}
.gc li a{display:flex;align-items:center;justify-content:space-between;height:38px;border-top:1px solid color-mix(in srgb,var(--ink) 9%,transparent);font-size:15.5px}
.gc li a span{color:var(--ink2)}
.doc.wide .lead{max-width:600px}

@media (min-width:800px){
  .nav{padding:0 max(80px,calc(50% - 560px))}
  .nav .nl{display:inline-flex}
  .nav .links>.btn{display:inline-flex}
  .gmenu{display:none}
  .gd{padding:24px max(80px,calc(50% - 560px)) 96px}
  .gd.home{padding:24px max(80px,calc(50% - 560px)) 80px}
  .side-col{display:block;width:256px;flex:none;align-self:stretch}
  .side-col .side{position:sticky;top:24px}
  .doc h1{font-size:52px}
  .doc .lead{font-size:19px}
  .doc.wide h1{font-size:64px}
  .mobile-only{display:none}
  .desktop-only{display:block}
  table.desktop-only{display:table}
  .pn{grid-template-columns:1fr 1fr}
  .pn a+a,.pn .only-next{text-align:right}
  .pn .only-next{grid-column:2}
  .gcards{grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:14px}
}
@media (min-width:1100px){
  .gd .toc{display:block}
}