/* ============================================================
   graphi — tutorial / docs page. Reuses base.css + style.css
   tokens; adds a sticky-TOC reading layout and code blocks.
   ============================================================ */

/* -------- DOC HERO -------- */
.doc-hero{position:relative;padding-block:clamp(2.6rem,6vw,4.6rem) clamp(1.6rem,3vw,2.4rem);overflow:hidden;border-bottom:1px solid var(--color-border)}
.doc-hero::before{content:"";position:absolute;inset:0;background-image:linear-gradient(var(--grid-line) 1px,transparent 1px),linear-gradient(90deg,var(--grid-line) 1px,transparent 1px);background-size:44px 44px;mask-image:radial-gradient(ellipse 70% 70% at 30% 20%,#000 20%,transparent 72%);-webkit-mask-image:radial-gradient(ellipse 70% 70% at 30% 20%,#000 20%,transparent 72%);pointer-events:none;z-index:0}
.doc-hero::after{content:"";position:absolute;width:44vw;height:44vw;max-width:620px;max-height:620px;top:-30%;right:-12%;border-radius:50%;background:radial-gradient(circle,var(--color-primary-glow),transparent 62%);filter:blur(60px);pointer-events:none;z-index:0}
.doc-hero .container{position:relative;z-index:2}
.doc-hero__title{font-family:var(--font-body);font-weight:600;font-size:var(--text-2xl);letter-spacing:-.03em;line-height:1.08;margin:.5rem 0 .9rem;max-width:20ch}
.doc-hero__title .accent{background:linear-gradient(100deg,var(--color-primary),var(--color-accent-2),var(--color-primary));background-size:200% 100%;-webkit-background-clip:text;background-clip:text;color:transparent;animation:sheen 6s linear infinite}
[data-theme="dark"] .doc-hero__title .accent{filter:drop-shadow(0 0 24px var(--color-primary-glow))}
.doc-hero__lede{color:var(--color-text-muted);font-size:var(--text-lg);max-width:60ch;line-height:1.55}
.doc-hero__lede strong{color:var(--color-text);font-weight:600}
.doc-hero__meta{display:flex;flex-wrap:wrap;gap:.5rem;margin-top:1.4rem}

/* -------- DOC LAYOUT (sticky TOC + article) -------- */
.doc-layout{display:grid;grid-template-columns:246px minmax(0,1fr);gap:clamp(1.6rem,4vw,3.6rem);align-items:start;width:100%;max-width:var(--content);margin-inline:auto;padding-inline:clamp(1.1rem,4vw,2.5rem);padding-block:clamp(2rem,5vw,3.4rem)}

.toc{position:sticky;top:5rem;font-family:var(--font-mono)}
.toc__title{font-size:var(--text-xs);letter-spacing:.14em;text-transform:uppercase;color:var(--color-text-faint);margin-bottom:.9rem}
.toc__list{list-style:none;display:flex;flex-direction:column;gap:.12rem;counter-reset:toc;max-height:calc(100vh - 8rem);overflow-y:auto}
.toc__list li{counter-increment:toc}
.toc__list a{display:flex;gap:.55rem;align-items:baseline;padding:.4rem .6rem;border-radius:7px;font-size:var(--text-sm);line-height:1.35;color:var(--color-text-muted);text-decoration:none;border-left:2px solid transparent}
.toc__list a::before{content:counter(toc,decimal-leading-zero);color:var(--color-text-faint);font-size:.85em;flex:none}
.toc__list a:hover{color:var(--color-primary);background:var(--color-primary-glow)}
.toc__list a.is-active{color:var(--color-primary);border-left-color:var(--color-primary);background:var(--color-primary-glow)}
.toc__list a.is-active::before{color:var(--color-primary)}

/* -------- ARTICLE -------- */
.doc-article{min-width:0;max-width:820px}
.doc-section{scroll-margin-top:5.6rem;padding-top:.4rem;margin-bottom:clamp(2.4rem,5vw,3.4rem)}
.doc-section + .doc-section{border-top:1px solid var(--color-border);padding-top:clamp(1.8rem,4vw,2.6rem)}
.doc-section__h{font-family:var(--font-body);font-weight:600;font-size:var(--text-xl);letter-spacing:-.02em;line-height:1.15;margin-bottom:1.1rem;display:flex;align-items:baseline;gap:.7rem}
.doc-section__num{font-family:var(--font-mono);font-size:.58em;font-weight:500;color:var(--color-primary);letter-spacing:.02em}

.doc-prose{color:var(--color-text-muted);font-size:var(--text-base);line-height:1.72}
.doc-prose > p{margin-bottom:1.05rem}
.doc-prose h3{font-family:var(--font-body);color:var(--color-text);font-weight:600;font-size:var(--text-lg);letter-spacing:-.01em;margin:1.9rem 0 .8rem}
.doc-prose strong{color:var(--color-text);font-weight:600}
.doc-prose em{color:var(--color-primary);font-style:normal}
.doc-prose a{color:var(--color-primary);text-decoration:none;border-bottom:1px solid transparent;transition:border-color .2s}
.doc-prose a:hover{border-bottom-color:currentColor}
.doc-prose code{font-family:var(--font-mono);font-size:.85em;color:var(--color-primary);background:var(--color-primary-glow);padding:.08em .34em;border-radius:5px;overflow-wrap:break-word}
.doc-prose ul{list-style:none;display:flex;flex-direction:column;gap:.6rem;margin:0 0 1.25rem}
.doc-prose ul li{padding-left:1.15rem;position:relative}
.doc-prose ul li::before{content:"";position:absolute;left:0;top:.62em;width:5px;height:5px;border-radius:50%;background:var(--color-primary);opacity:.8}
.doc-prose ol{padding-left:1.35rem;display:flex;flex-direction:column;gap:.6rem;margin:0 0 1.25rem}
.doc-prose ol li{padding-left:.25rem}
.doc-prose ol li::marker{color:var(--color-primary);font-family:var(--font-mono);font-size:.9em}
.doc-prose blockquote{border-left:2px solid var(--color-primary-dim);padding:.4rem 0 .4rem 1.1rem;margin:0 0 1.25rem;color:var(--color-text-faint);font-size:var(--text-sm)}
.doc-prose blockquote strong{color:var(--color-text-muted)}

/* callout for tip/warning */
.doc-note{display:flex;gap:.8rem;border:1px solid var(--color-border);border-left:2px solid var(--color-primary);border-radius:var(--radius);background:var(--color-surface-2);padding:1rem 1.1rem;margin:0 0 1.25rem;font-size:var(--text-sm);line-height:1.6}
.doc-note__k{font-family:var(--font-mono);font-size:var(--text-xs);letter-spacing:.06em;text-transform:uppercase;color:var(--color-primary);flex:none;padding-top:.1rem}
.doc-note p{color:var(--color-text-muted)}
.doc-note strong{color:var(--color-text)}

/* -------- CODE BLOCKS -------- */
.codeblock{position:relative;margin:0 0 1.35rem;border:1px solid var(--color-border-strong);border-radius:var(--radius);background:linear-gradient(180deg,var(--color-surface-2),var(--color-surface));overflow:hidden;transition:border-color .25s}
.codeblock:hover{border-color:color-mix(in oklab,var(--color-primary-dim) 40%,var(--color-border-strong))}
.codeblock.is-flashing{animation:copy-flash .6s ease-out}
[data-theme="dark"] .codeblock::after{content:"";position:absolute;inset:0;pointer-events:none;background:repeating-linear-gradient(0deg,rgba(255,255,255,.012) 0 1px,transparent 1px 3px)}
.codeblock__lang{position:absolute;top:.55rem;left:.9rem;z-index:2;font-family:var(--font-mono);font-size:9px;letter-spacing:.12em;text-transform:uppercase;color:var(--color-text-faint);pointer-events:none}
.codeblock pre{position:relative;z-index:1;overflow-x:auto;padding:1.7rem 1.1rem .95rem;margin:0}
.codeblock code{font-family:var(--font-mono);font-size:.82rem;line-height:1.75;color:var(--color-text);white-space:pre}
.codeblock .cmt{color:var(--color-text-faint)}
.codeblock .out{color:var(--color-primary-dim)}
.codeblock .copy-btn{position:absolute;top:.5rem;right:.5rem;z-index:3;font-family:var(--font-mono);font-size:var(--text-xs);color:var(--color-primary);border:1px solid var(--color-primary-dim);border-radius:6px;padding:.24rem .6rem;background:color-mix(in oklab,var(--color-surface) 85%,transparent);opacity:0;transition:opacity .2s,background .15s,color .15s}
.codeblock:hover .copy-btn,.codeblock .copy-btn:focus-visible{opacity:1}
.codeblock .copy-btn:hover{background:var(--color-primary);color:#04120d}
[data-theme="light"] .codeblock .copy-btn:hover{color:#f4fffb}
.codeblock .copy-btn:active{scale:.95}
@media (pointer:coarse){.codeblock .copy-btn{opacity:1}}

/* -------- DOC TABLE -------- */
.doc-table-wrap{overflow-x:auto;margin:0 0 1.4rem;border:1px solid var(--color-border);border-radius:var(--radius)}
.doc-table{width:100%;border-collapse:collapse;font-size:var(--text-sm);min-width:440px}
.doc-table th{text-align:left;font-family:var(--font-mono);font-size:var(--text-xs);letter-spacing:.05em;text-transform:uppercase;color:var(--color-text-faint);font-weight:500;padding:.7rem .9rem;border-bottom:1px solid var(--color-border-strong);background:var(--color-surface-2)}
.doc-table td{padding:.66rem .9rem;border-bottom:1px solid var(--color-border);color:var(--color-text-muted);vertical-align:top;line-height:1.5}
.doc-table tr:last-child td{border-bottom:0}
.doc-table td strong{color:var(--color-text)}
.doc-table td code,.doc-table th code{font-family:var(--font-mono);font-size:.82em;color:var(--color-primary);background:var(--color-primary-glow);padding:.06em .3em;border-radius:5px}
.doc-table tr:hover td{background:color-mix(in oklab,var(--color-primary) 5%,transparent)}
.doc-table td.num{font-family:var(--font-mono);text-align:right;color:var(--color-text);white-space:nowrap}

/* -------- BACK-TO-TOP + NEXT -------- */
.doc-foot-cta{margin-top:2rem;padding-top:1.6rem;border-top:1px solid var(--color-border);display:flex;flex-wrap:wrap;gap:.8rem;align-items:center;justify-content:space-between}
.doc-foot-cta p{color:var(--color-text-muted);font-size:var(--text-sm)}

/* -------- RESPONSIVE -------- */
@media (max-width:900px){
  .doc-layout{grid-template-columns:1fr;gap:1.4rem}
  .toc{position:static;top:auto;border:1px solid var(--color-border);border-radius:var(--radius);background:var(--color-surface-2);padding:1.1rem 1.2rem}
  .toc__list{max-height:none}
}