/* Spytay design code, session 19: the document pages and the error page. Loads after ds.css; every selector starts with .doc. */
.doc-root .doc-skip{position:absolute;left:12px;top:-100px;z-index:60;padding:12px 16px;border-radius:10px;background:var(--surface);color:var(--text);font-weight:600}
.doc-root .doc-skip:focus{top:8px}
.doc{padding:24px 0 64px;color:var(--text)}
.doc:focus-visible{outline:0}
.doc .flash{max-width:var(--max);width:calc(100% - 2*var(--pad));margin:0 auto 16px;padding:12px 16px;border-radius:12px;font-weight:600;background:var(--surface-2);color:var(--text)}
.doc .flash-success{box-shadow:inset 0 0 0 1.5px var(--ok)}
.doc .flash-danger{box-shadow:inset 0 0 0 1.5px var(--accent-text)}
.doc .eyebrow{margin:0;font-size:.8125rem;font-weight:650;letter-spacing:.02em;color:var(--text-2)}
.doc .muted{color:var(--text-2)}
.doc code,.doc pre{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace}

/* article: one measure, h1 → h2 rhythm, anchors clear of the sticky header */
.doc .legal-layout{display:grid;gap:24px;grid-template-columns:minmax(0,1fr)}
.doc .legal,.doc .toc{min-width:0}
.doc .legal{max-width:70ch;overflow-wrap:break-word}
.doc .legal h1{margin:6px 0 20px;max-width:none;font-size:clamp(2rem,1.55rem + 1.9vw,2.875rem);line-height:1.08;letter-spacing:-.03em;scroll-margin-top:88px;overflow-wrap:anywhere}
.doc .legal h2{max-width:none;margin:44px 0 12px;font-size:clamp(1.375rem,1.2rem + .75vw,1.75rem);line-height:1.2;letter-spacing:-.02em;scroll-margin-top:88px;overflow-wrap:anywhere}
.doc .legal p,.doc .legal li{line-height:1.65;color:var(--text)}
.doc .legal p{margin:0 0 14px}
.doc .legal ol,.doc .legal ul{margin:0 0 16px;padding-left:1.4em}
.doc .legal ol{list-style:decimal}
.doc .legal ul{list-style:disc}
.doc .legal li{margin:6px 0}
.doc .legal li::marker{color:var(--text-3)}
.doc .legal strong{color:var(--text);font-weight:650}
.doc .legal a{color:var(--accent-text);text-decoration:underline;text-decoration-thickness:1.5px;text-underline-offset:3px}

/* API docs: code, tables (both scroll inside themselves, never the page) */
.doc .legal code{padding:.1em .35em;border-radius:6px;background:var(--surface-2);font-size:.9em;overflow-wrap:anywhere}
.doc .legal h2 code{padding:0;background:none;font-size:.85em}
.doc .legal pre{max-width:100%;margin:0 0 18px;padding:16px 18px;overflow-x:auto;border:1px solid var(--line);border-radius:14px;background:var(--surface);font-size:.875rem;line-height:1.55}
.doc .legal pre code{padding:0;background:none;font-size:inherit;overflow-wrap:normal}
.doc .table-wrap{margin:0 0 18px;overflow-x:auto;border:1px solid var(--line);border-radius:14px;background:var(--surface)}
.doc .legal .table-hint{margin:0;padding:8px 14px 0;font-size:.8125rem;color:var(--text-2)}
.doc .legal table{width:100%;min-width:560px;border-collapse:collapse;font-size:.9375rem}
.doc .legal th,.doc .legal td{padding:10px 14px;border-top:1px solid var(--line);text-align:left;vertical-align:top;line-height:1.5}
.doc .legal thead th{border-top:0;font-size:.8125rem;font-weight:650;color:var(--text-2)}

/* error card */
.doc .center-card{max-width:440px;margin:32px auto 48px;padding:28px 24px}
.doc .center-card h1{max-width:none;margin:8px 0 12px;font-size:clamp(1.75rem,1.4rem + 1.5vw,2.25rem);line-height:1.1;letter-spacing:-.03em}
.doc .center-card p{margin:10px 0 0;color:var(--text)}
.doc .center-card .muted{color:var(--text-2)}
.doc .center-card p:last-child{margin-top:24px}
.doc .btn-secondary{background:transparent;color:var(--text);box-shadow:inset 0 0 0 1.5px var(--line-ctl)}
.doc .btn-secondary:hover{box-shadow:inset 0 0 0 1.5px var(--text)}
@media (max-width:599px){.doc .center-card .btn{width:100%}}
@media (min-width:600px){.doc .center-card{padding:40px 36px}}

/* TOC: below 1024 px one scrolling row of chips, first in the markup; from 1024 px a sticky list beside the article */
@media (max-width:1023px){
 .doc .toc ol{display:flex;gap:8px;overflow-x:auto;scroll-snap-type:x proximity;scroll-padding:0 var(--pad);scrollbar-width:thin;overscroll-behavior-x:contain;margin:2px calc(-1*var(--pad)) 0;padding:6px var(--pad)}
 .doc .toc li{flex:none;scroll-snap-align:start}
 .doc .toc a{display:flex;align-items:center;min-height:44px;padding:0 16px;border-radius:999px;background:var(--surface-2);color:var(--text);font-size:.9375rem;font-weight:550;text-decoration:none;white-space:nowrap}
}
@media (min-width:1024px){
 .doc{padding:48px 0 96px}
 .doc .legal-layout{grid-template-columns:minmax(0,70ch) 248px;justify-content:space-between;gap:64px;align-items:start}
 .doc .legal-layout .legal{grid-column:1;grid-row:1}
 .doc .legal-layout .toc{grid-column:2;grid-row:1;position:sticky;top:88px;max-height:calc(100vh - 112px);overflow-y:auto}
 .doc .toc ol{margin-top:10px}
 .doc .toc a{display:block;padding:7px 0;color:var(--text-2);font-size:.9375rem;line-height:1.35;text-decoration:none;overflow-wrap:anywhere}
 .doc .toc a:hover{color:var(--text);text-decoration:underline}
 .doc .center-card{margin:64px auto 96px}
}
.doc .toc code{font-size:.8125rem;overflow-wrap:anywhere}

/* print: the page is the document */
@media print{
 body{background:#fff}
 .doc-root{background:#fff}
 .doc-root .doc-skip,.doc-root .hdr,.doc-root .foot,.doc .toc,.doc .flash{display:none!important}
 .doc,.doc *{color:#000!important;background:transparent!important;box-shadow:none!important}
 .doc{padding:0}
 .doc .legal-layout{display:block}
 .doc .legal{max-width:none}
}