/* Docs layout + prose. Tokens, nav and footer come from /assets/blog.css (incl. dark mode).
   Generated pages: see internal_docs/build-docs.mjs. */
.docs{padding:28px 0 84px}
.docs-shell{max-width:1240px;margin:0 auto;padding:0 28px;display:grid;grid-template-columns:232px minmax(0,1fr) 188px;gap:0 48px;align-items:start}
.docs-main{min-width:0}
.docs-side,.docs-toc{position:sticky;top:84px;max-height:calc(100vh - 104px);overflow:auto;font-size:.88rem}
.docs-side{padding-bottom:24px}
.docs-side h4,.docs-toc h4{font-size:.72rem;font-weight:600;color:var(--faint);text-transform:uppercase;letter-spacing:.06em;margin:0 0 .5rem}
.docs-side section{margin-bottom:1.4rem}
.docs-side ul,.docs-toc ul,.docs-mnav ul{list-style:none;margin:0;padding:0}
.docs-side a,.docs-mnav a{display:block;padding:.34rem .7rem;margin-left:-.7rem;border-radius:8px;color:var(--muted-foreground);line-height:1.35;transition:color .15s,background .15s}
.docs-side a:hover,.docs-mnav a:hover{color:var(--foreground);background:var(--secondary)}
.docs-side a[aria-current="page"],.docs-mnav a[aria-current="page"]{color:var(--accent-foreground);background:var(--accent);font-weight:600}
.docs-toc{padding-left:16px;border-left:1px solid var(--border)}
.docs-toc a{display:block;padding:.28rem 0;color:var(--muted-foreground);line-height:1.35;overflow-wrap:anywhere}
.docs-toc a:hover,.docs-toc a.active{color:var(--link)}
.docs-toc a.active{font-weight:600}

/* mobile section menu (desktop uses .docs-side) */
.docs-mnav{display:none;border:1px solid var(--border);border-radius:12px;background:var(--card);margin-bottom:24px}
.docs-mnav summary{cursor:pointer;padding:12px 16px;font-weight:600;font-size:.92rem;list-style:none;display:flex;justify-content:space-between;align-items:center;gap:12px}
.docs-mnav summary::-webkit-details-marker{display:none}
.docs-mnav summary::after{content:"\25BE";color:var(--faint);transition:transform .2s}
.docs-mnav[open] summary::after{transform:rotate(180deg)}
.docs-mnav .mnav-body{padding:2px 16px 14px;border-top:1px solid var(--border)}
.docs-mnav h4{font-size:.72rem;font-weight:600;color:var(--faint);text-transform:uppercase;letter-spacing:.06em;margin:14px 0 4px}
.docs-mnav a{font-size:.92rem}

@media(max-width:1180px){.docs-shell{grid-template-columns:232px minmax(0,1fr)}.docs-toc{display:none}}
@media(max-width:900px){
  .docs{padding-top:16px}
  .docs-shell{display:block;padding:0 16px}
  .docs-side{display:none}
  .docs-mnav{display:block}
}

/* page header + actions */
.docs-crumb{font-size:.82rem;color:var(--faint);margin-bottom:.7rem}
.docs-prose{max-width:760px;overflow-wrap:break-word}
.docs-prose h1{font-size:clamp(1.95rem,5vw,2.6rem);letter-spacing:-0.035em;line-height:1.12;margin:0 0 .6rem}
.docs-lede{color:var(--muted-foreground);font-size:1.08rem;line-height:1.6;margin:0 0 1.1rem}
.docs-actions{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 2rem;padding-bottom:1.4rem;border-bottom:1px solid var(--border)}
.docs-actions .btn{text-decoration:none;color:var(--foreground)}
.docs-actions .btn[data-done]{border-color:var(--st-closed);color:var(--st-closed)}

.docs-prose h2{font-size:1.5rem;font-weight:800;letter-spacing:-0.025em;line-height:1.22;margin:2.6rem 0 .8rem}
.docs-prose h3{font-size:1.1rem;font-weight:700;margin:1.8rem 0 .5rem}
.docs-prose h4{font-size:.98rem;font-weight:700;margin:1.4rem 0 .4rem}
.docs-prose h2,.docs-prose h3,.docs-prose h4{scroll-margin-top:92px}
.docs-prose p{margin:0 0 1rem;line-height:1.65}
.docs-prose ul,.docs-prose ol{margin:0 0 1.1rem 1.35rem}
.docs-prose li{margin:.35rem 0;line-height:1.6}
.docs-prose li>ul,.docs-prose li>ol{margin:.3rem 0 .3rem 1.2rem}
.docs-prose li::marker{color:var(--primary)}
.docs-prose a{color:var(--link);text-decoration:underline;text-underline-offset:2px;text-decoration-thickness:1px}
.docs-prose a:hover{color:var(--link-hover)}
.docs-prose strong{font-weight:700}
.docs-prose img{max-width:100%;height:auto;border:1px solid var(--border);border-radius:10px;margin:.4rem 0 1rem}
/* dialog screenshots are captured at 2x of a ~512px dialog: keep them at natural size, not column width */
.docs-prose img[src*="-dialog."]{max-width:min(100%,520px)}
.docs-prose blockquote{border-left:3px solid var(--primary);background:var(--card-2);padding:1rem 1.25rem;border-radius:.6rem;margin:0 0 1.3rem}
.docs-prose blockquote p{margin:0 0 .5rem}
.docs-prose blockquote p:last-child{margin:0}
.docs-prose hr{border:none;border-top:1px solid var(--border);margin:2.2rem 0}
.docs-prose code{font-family:var(--font-mono);font-size:.85em;background:var(--secondary);border:1px solid var(--border);border-radius:6px;padding:.1em .38em;overflow-wrap:anywhere}
.docs-prose .table-wrap{overflow-x:auto;margin:0 0 1.4rem;-webkit-overflow-scrolling:touch}
.docs-prose table{width:100%;border-collapse:collapse;font-size:.9rem}
.docs-prose th,.docs-prose td{border:1px solid var(--border);padding:.55rem .75rem;text-align:left;vertical-align:top}
.docs-prose th{background:var(--secondary);font-weight:700;white-space:nowrap}
.docs-prose td:first-child code{white-space:nowrap}

/* code blocks */
.code-block{position:relative;margin:0 0 1.2rem}
.code-block pre{font-family:var(--font-mono);font-size:.84rem;line-height:1.6;background:var(--code-bg);color:var(--code-fg);border:1px solid var(--code-line);border-radius:10px;padding:14px 16px;overflow-x:auto;margin:0}
.code-block pre code{background:none;border:0;padding:0;font-size:inherit;color:inherit;overflow-wrap:normal}
.code-block .copy-btn{position:absolute;top:8px;right:8px;font:600 .72rem var(--font-sans);letter-spacing:normal;color:var(--code-fg);background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.16);border-radius:6px;padding:4px 9px;cursor:pointer;opacity:0;transition:opacity .15s,background .15s}
.code-block:hover .copy-btn,.code-block .copy-btn:focus-visible,.code-block .copy-btn[data-done]{opacity:1}
.code-block .copy-btn:hover{background:rgba(255,255,255,.2)}
@media(hover:none){.code-block .copy-btn{opacity:1}}

/* prompt cards: what the reader says to their agent. Conversation = purple (commands stay in dark
   .code-block). Shaped like a sent chat message; consecutive cards sit in .prompt-grid. */
.prompt-card{position:relative;margin:0 0 1.2rem;padding:10px 14px 13px 16px;background:var(--accent);border:1px solid color-mix(in srgb,var(--primary) 24%,transparent);border-radius:14px 14px 4px 14px;min-width:0}
.prompt-card figcaption{display:flex;align-items:center;gap:6px;min-height:24px;padding-right:64px;margin:0 0 4px;font-size:.76rem;font-weight:600;line-height:1.3;color:var(--muted-foreground)}
.prompt-card .prompt-ico{flex:none;color:var(--primary)}
.docs-prose .prompt-card .prompt-text{margin:0;font-size:1rem;line-height:1.55;font-weight:500;color:var(--foreground);overflow-wrap:anywhere}
.prompt-card .copy-btn{position:absolute;top:9px;right:10px;font:600 .72rem/1.2 var(--font-sans);color:var(--accent-foreground);background:var(--card);border:1px solid color-mix(in srgb,var(--primary) 28%,transparent);border-radius:6px;padding:4px 9px;cursor:pointer;transition:border-color .15s,background .15s}
.prompt-card .copy-btn:hover{border-color:var(--primary)}
.prompt-card .copy-btn:focus-visible{outline:2px solid var(--ring);outline-offset:2px}
.prompt-card .copy-btn[data-done]{color:var(--st-closed);border-color:var(--st-closed)}
.prompt-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,300px),1fr));gap:12px;margin:0 0 1.4rem}
.prompt-grid .prompt-card{margin:0}

/* tool reference (docs/mcp-tools) */
.tool-meta{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin:0 0 .7rem !important}
.tool-badge{font-family:var(--font-mono);font-size:.68rem;font-weight:600;letter-spacing:.04em;padding:.2em .6em;border-radius:7px;line-height:1.5}
.tool-badge.ro{background:var(--st-closed-bg);color:var(--st-closed)}
.tool-badge.rw{background:var(--st-progress-bg);color:var(--st-progress)}
.tool-badge.ow{background:var(--st-open-bg);color:var(--st-open)}

/* prev / next */
.docs-pager{display:flex;flex-wrap:wrap;gap:12px;margin-top:3rem;padding-top:1.4rem;border-top:1px solid var(--border)}
.docs-pager a{flex:1 1 220px;display:flex;flex-direction:column;gap:2px;padding:12px 16px;border:1px solid var(--border);border-radius:12px;background:var(--card);text-decoration:none !important;color:var(--foreground) !important;transition:border-color .15s}
.docs-pager a:hover{border-color:var(--border-strong)}
.docs-pager small{font-size:.74rem;color:var(--faint)}
.docs-pager span{font-weight:600}
.docs-pager .next{text-align:right}

/* ============================================================ PAGE-TO-PAGE TRANSITIONS
   Cross-document view transitions (Chrome 126+, Safari 18.2+): the old page stays on screen until
   the new one is ready, then crossfades, with no white flash. The sidebar keeps its own name so it
   stays still while the content changes. Browsers without support just navigate normally. */
@media (prefers-reduced-motion: no-preference){
  @view-transition{navigation:auto}
  .docs-side{view-transition-name:docs-side}
  ::view-transition-old(root),::view-transition-new(root){animation-duration:120ms}
}