/* Warp docs — layout + prose, in the site design system (light theme). */

.docs-shell{max-width:1320px;margin:0 auto;padding:96px 24px 0;display:grid;
  grid-template-columns:248px minmax(0,1fr) 200px;gap:40px;align-items:start}
@media(max-width:1080px){.docs-shell{grid-template-columns:240px minmax(0,1fr);}.toc{display:none}}
@media(max-width:760px){.docs-shell{grid-template-columns:1fr;padding-top:80px}}

/* sidebar */
.sidebar{position:sticky;top:84px;max-height:calc(100vh - 104px);overflow-y:auto;padding-bottom:40px}
@media(max-width:760px){.sidebar{position:static;max-height:none;border:1px solid var(--line);border-radius:12px;padding:8px 14px;margin-bottom:24px}
  .sidebar .sb-group-list{display:none}.sidebar.open .sb-group-list{display:block}}
.sb-toggle{display:none}
@media(max-width:760px){.sb-toggle{display:flex;align-items:center;justify-content:space-between;width:100%;background:none;border:none;
  font:inherit;font-weight:600;color:var(--ink);padding:8px 0;cursor:pointer}}
.sb-group{margin-bottom:22px}
.sb-group h5{font-family:"Geist Mono",monospace;font-size:.72rem;text-transform:uppercase;letter-spacing:.07em;
  color:var(--ink-3);margin-bottom:8px;font-weight:500}
.sb-group a{display:block;color:var(--ink-2);text-decoration:none;font-size:.9rem;padding:5px 10px;border-radius:7px;
  border-left:2px solid transparent;transition:.13s;line-height:1.35}
.sb-group a:hover{color:var(--ink);background:var(--bg-2)}
.sb-group a.active{color:var(--accent);border-left-color:var(--accent);background:var(--accent-soft);font-weight:500}

/* table of contents (right) */
.toc{position:sticky;top:84px;max-height:calc(100vh - 104px);overflow-y:auto;font-size:.84rem}
.toc h6{font-family:"Geist Mono",monospace;font-size:.7rem;text-transform:uppercase;letter-spacing:.07em;color:var(--ink-3);margin-bottom:10px}
.toc a{display:block;color:var(--ink-3);text-decoration:none;padding:4px 0 4px 12px;border-left:2px solid var(--line);transition:.13s}
.toc a:hover{color:var(--ink)}
.toc a.h3{padding-left:24px;font-size:.8rem}
.toc a.active{color:var(--accent);border-left-color:var(--accent)}

/* content / prose */
.doc-main{min-width:0}
.breadcrumb{font-size:.82rem;color:var(--ink-3);margin-bottom:18px}
.breadcrumb a{color:var(--ink-3);text-decoration:none}.breadcrumb a:hover{color:var(--accent)}
.prose{color:var(--ink-2);font-size:1.02rem;line-height:1.72;max-width:780px}
.prose h1{font-family:Geist;font-weight:600;font-size:clamp(2rem,3.4vw,2.6rem);letter-spacing:-.03em;color:var(--ink);line-height:1.1;margin:0 0 8px}
.prose h2{font-weight:600;font-size:1.6rem;letter-spacing:-.02em;color:var(--ink);margin:48px 0 16px;padding-top:14px;border-top:1px solid var(--line)}
.prose h3{font-weight:600;font-size:1.22rem;color:var(--ink);margin:34px 0 12px}
.prose h4{font-weight:600;font-size:1.03rem;color:var(--ink);margin:26px 0 8px}
.prose p{margin:0 0 16px}
.prose a{color:var(--accent);text-decoration:none;border-bottom:1px solid color-mix(in srgb,var(--accent) 30%,transparent)}
.prose a:hover{border-bottom-color:var(--accent)}
.prose ul,.prose ol{margin:0 0 18px 0;padding-left:24px}
.prose li{margin:6px 0}
.prose li::marker{color:var(--ink-3)}
.prose blockquote{margin:18px 0;padding:12px 20px;border-left:3px solid var(--accent);background:var(--accent-soft);
  border-radius:0 10px 10px 0;color:var(--ink-2)}
.prose blockquote p:last-child{margin:0}
.prose hr{border:none;border-top:1px solid var(--line);margin:36px 0}
.prose img{border:1px solid var(--line);border-radius:10px;margin:18px 0}
.prose code{font-family:"Geist Mono",monospace;font-size:.86em;background:var(--bg-2);border:1px solid var(--line);
  border-radius:5px;padding:.12em .4em;color:var(--accent-deep,#0f6e5b)}
.prose pre{position:relative;background:#10130f;border:1px solid #23271f;border-radius:12px;padding:18px 18px;overflow-x:auto;margin:0 0 20px}
.prose pre code{font-family:"Geist Mono",monospace;font-size:.84rem;line-height:1.65;background:none;border:none;padding:0;color:#cdd6c8}
.prose pre .copy{position:absolute;top:10px;right:10px;font-family:"Geist Mono",monospace;font-size:.72rem;color:#8a8479;
  background:#1b1f18;border:1px solid #2c3026;border-radius:6px;padding:4px 9px;cursor:pointer;opacity:0;transition:.15s}
.prose pre:hover .copy{opacity:1}
.prose pre .copy:hover{color:#5fd6b6;border-color:#15937a}

/* tables */
.prose table{width:100%;border-collapse:collapse;margin:0 0 22px;font-size:.92rem;display:block;overflow-x:auto}
.prose thead{background:var(--bg-2)}
.prose th,.prose td{text-align:left;padding:10px 14px;border:1px solid var(--line);vertical-align:top}
.prose th{font-weight:600;color:var(--ink);font-size:.84rem}
.prose tbody tr:nth-child(even){background:var(--bg)}

/* heading anchor links */
.prose h2,.prose h3,.prose h4{scroll-margin-top:88px}
.prose .anchor{opacity:0;margin-left:8px;color:var(--ink-3);text-decoration:none;font-weight:400;border:none}
.prose h2:hover .anchor,.prose h3:hover .anchor{opacity:1}

/* doc footer nav */
.doc-nav{display:flex;justify-content:space-between;gap:16px;margin:48px 0 0;padding-top:24px;border-top:1px solid var(--line);flex-wrap:wrap}
.doc-nav a{flex:1 1 240px;border:1px solid var(--line);border-radius:12px;padding:16px 18px;text-decoration:none;transition:.15s}
.doc-nav a:hover{border-color:var(--accent);background:var(--accent-soft)}
.doc-nav .dir{font-family:"Geist Mono",monospace;font-size:.72rem;color:var(--ink-3);text-transform:uppercase;letter-spacing:.05em}
.doc-nav .ttl{color:var(--ink);font-weight:500;margin-top:4px}
.doc-nav a.next{text-align:right}
.doc-foot{margin:40px 0 60px;font-size:.82rem;color:var(--ink-3)}
.doc-foot a{color:var(--accent);text-decoration:none}

/* docs index landing */
.docs-hero{max-width:1320px;margin:0 auto;padding:120px 24px 20px}
.docs-hero h1{font-family:Geist;font-weight:600;font-size:clamp(2.2rem,4vw,3rem);letter-spacing:-.03em;color:var(--ink)}
.docs-hero p{font-size:1.15rem;color:var(--ink-2);max-width:620px;margin-top:14px}
.docs-grid{max-width:1320px;margin:0 auto;padding:24px 24px 80px;display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
@media(max-width:900px){.docs-grid{grid-template-columns:1fr 1fr}}
@media(max-width:620px){.docs-grid{grid-template-columns:1fr}}
.dcard{background:var(--card);border:1px solid var(--line);border-radius:14px;padding:22px;text-decoration:none;transition:.16s var(--ease);display:block}
.dcard:hover{border-color:var(--accent);transform:translateY(-2px);box-shadow:var(--shadow)}
.dcard .ic{font-family:"Geist Mono",monospace;color:var(--accent);font-size:.74rem;text-transform:uppercase;letter-spacing:.06em}
.dcard h3{color:var(--ink);margin:10px 0 6px;font-size:1.1rem}
.dcard p{color:var(--ink-2);font-size:.92rem;margin:0}
.dcard .count{margin-top:12px;font-family:"Geist Mono",monospace;font-size:.78rem;color:var(--ink-3)}

/* embedded interactive diagram */
.embed-machine{background:var(--card);border:1px solid var(--line);border-radius:14px;overflow:hidden;margin:24px 0;box-shadow:var(--shadow)}
.embed-machine .em-top{display:flex;align-items:center;gap:7px;padding:11px 15px;border-bottom:1px solid var(--line)}
.embed-machine .em-top i{width:9px;height:9px;border-radius:50%;background:var(--line-2)}
.embed-machine .em-top .t{margin-left:6px;font-family:"Geist Mono",monospace;font-size:.74rem;color:var(--ink-3)}
.embed-machine canvas{display:block;width:100%;height:360px}
.embed-machine .em-cap{padding:11px 16px;border-top:1px solid var(--line);font-family:"Geist Mono",monospace;font-size:.78rem;color:var(--ink-3);min-height:1.2em}
@media(prefers-reduced-motion:reduce){.embed-machine canvas{display:none}}