/* ============ TOKENS (PXL-VIS-001) ============ */
:root{
  --bg:#FAFAFB; --surface:#FFFFFF; --surface2:#F1F3F7;
  --ink:#0A0A14; --body:#414A5C; --mute:#6B7490; --line:#E5E8EF; --hair:#ECEEF4;
  --blue:#0400F5; --blue-deep:#0300C4; --blue-soft:#ECEBFF; --blue-glow:rgba(4,0,245,.18);
  --lime:#DFFB0B;
  --code-bg:#F1F3F7; --code-ink:#2A2F3D;
  --sh:0 1px 2px rgba(10,10,20,.04),0 10px 28px rgba(10,10,20,.06);
  --sh-lg:0 4px 16px rgba(10,10,20,.08),0 24px 56px rgba(10,10,20,.12);
  --r:12px; --r-lg:16px;
  --fd:'Instrument Sans',system-ui,sans-serif;
  --ft:'Instrument Sans',system-ui,sans-serif;
  --fa:'Instrument Serif',Georgia,serif;
  --fm:'JetBrains Mono',ui-monospace,monospace;
  --wd:640; --wd-body:600;
  --sidebar-w:272px; --hdr-h:60px;
}
[data-theme=dark]{
  --bg:#08080F; --surface:#10101B; --surface2:#161624;
  --ink:#F3F5FB; --body:#B7BFD3; --mute:#7C86A3; --line:#20202F; --hair:#1A1A28;
  --blue:#7A78FF; --blue-deep:#9694FF; --blue-soft:#171540; --blue-glow:rgba(122,120,255,.25);
  --code-bg:#161624; --code-ink:#D7DCEB;
  --sh:0 1px 2px rgba(0,0,0,.3),0 10px 28px rgba(0,0,0,.35);
  --sh-lg:0 4px 16px rgba(0,0,0,.35),0 24px 56px rgba(0,0,0,.5);
  --wd:600; --wd-body:570;
}

/* ============ BASE ============ */
*,*::before,*::after{box-sizing:border-box;margin:0}
html{scroll-behavior:smooth}
body{background:var(--bg);color:var(--body);font:400 15.5px/1.65 var(--ft);-webkit-font-smoothing:antialiased;transition:background .25s,color .25s}
a{color:inherit;text-decoration:none}
svg{display:block;flex:none}
.skip{position:absolute;left:-9999px;top:0;background:var(--blue);color:#fff;padding:10px 18px;border-radius:0 0 10px 0;z-index:300;font-weight:600}
.skip:focus{left:0}
:focus-visible{outline:2px solid var(--blue);outline-offset:2px;border-radius:4px}
button{font-family:var(--ft);cursor:pointer}

.btn{display:inline-flex;align-items:center;gap:8px;font:600 .88rem/1 var(--ft);padding:11px 20px;border-radius:99px;border:1.5px solid transparent;transition:all .15s}
.btn-p{background:var(--blue);color:#fff}
.btn-p:hover{background:var(--blue-deep)}
.btn-g{border-color:var(--line);color:var(--ink);background:none}
.btn-g:hover{border-color:var(--ink)}

/* ============ HEADER ============ */
header{position:sticky;top:0;z-index:100;height:var(--hdr-h);display:flex;align-items:center;gap:16px;padding:0 20px;background:color-mix(in srgb,var(--bg) 85%,transparent);backdrop-filter:blur(12px);border-bottom:1px solid var(--line)}
.logo{font:650 1.05rem var(--ft);color:var(--ink);letter-spacing:-.015em;white-space:nowrap;display:inline-flex;align-items:baseline;gap:9px}
.logo-tag{font:600 .68rem var(--ft);letter-spacing:.09em;text-transform:uppercase;color:var(--mute);border-left:1px solid var(--line);padding-left:9px}
.logo b{color:var(--blue)}
.rel{font:600 .72rem var(--ft);color:var(--mute);background:var(--surface2);border:1px solid var(--line);border-radius:99px;padding:5px 11px;white-space:nowrap}
.hdr-actions{margin-left:auto;display:flex;align-items:center;gap:10px}
.cmdk-trigger{display:flex;align-items:center;gap:9px;background:var(--surface2);border:1px solid var(--line);border-radius:10px;padding:8px 10px 8px 13px;color:var(--mute);transition:border-color .15s,color .15s}
.cmdk-trigger:hover{border-color:var(--body);color:var(--body)}
.cmdk-trigger span:first-of-type{font:500 .87rem var(--ft)}
.kbd{font:600 .68rem var(--fm);color:var(--mute);background:var(--surface);border:1px solid var(--line);border-radius:5px;padding:2px 6px;line-height:1.3}
.theme,
.theme:hover,
.theme .sun{display:none}
[data-theme=dark] .theme .sun{display:block}
[data-theme=dark] .theme .moon{display:none}
.burger{display:none;width:36px;height:36px;border:0;background:none;flex-direction:column;justify-content:center;gap:4px;padding:0;flex:none}
.burger span{height:2px;background:var(--ink);border-radius:2px;transition:transform .22s,opacity .2s}
body.snav .burger span:nth-child(1){transform:translateY(6px) rotate(45deg)}
body.snav .burger span:nth-child(2){opacity:0}
body.snav .burger span:nth-child(3){transform:translateY(-6px) rotate(-45deg)}

/* ============ SHELL LAYOUT ============ */
.shell{display:grid;grid-template-columns:var(--sidebar-w) 1fr;min-height:calc(100vh - var(--hdr-h))}
.sidebar{border-right:1px solid var(--line);padding:22px 14px 60px;overflow-y:auto;height:calc(100vh - var(--hdr-h));position:sticky;top:var(--hdr-h)}
.scrim{display:none}

.grp{margin-bottom:14px}
.grp-h{display:flex;align-items:center;gap:8px;width:100%;text-align:left;background:none;border:0;cursor:pointer;font:700 .68rem/1 var(--ft);letter-spacing:.12em;text-transform:uppercase;color:var(--mute);padding:8px 10px;margin-bottom:2px;border-radius:8px;transition:background .13s}
.grp-h:hover{background:var(--surface2)}
.grp-h{display:flex;align-items:center;gap:8px;font:700 .68rem/1 var(--ft);letter-spacing:.12em;text-transform:uppercase;color:var(--mute);padding:0 10px;margin-bottom:8px}
.grp-h svg{flex:none;opacity:.75}
.grp-h .chev{transition:transform .15s;flex:none;opacity:1}
.grp:not(.is-collapsed) .chev{transform:rotate(90deg)}
.grp-cnt{margin-left:auto;font:600 .68rem var(--ft);color:var(--mute);background:var(--surface2);border-radius:99px;padding:1px 7px}
.grp-body{overflow:hidden;max-height:1400px;transition:max-height .2s ease}
.grp.is-collapsed .grp-body{max-height:0}
.doc-link{display:block;padding:9px 10px;border-radius:9px;font:500 .87rem var(--ft);color:var(--body);transition:background .13s,color .13s;margin-bottom:1px}
.doc-link:hover{background:var(--surface2);color:var(--ink)}
.doc-link.active{background:var(--blue-soft);color:var(--blue);font-weight:600}
.doc-link small{display:block;font-size:.74rem;color:var(--mute);font-weight:400;margin-top:1px}
.doc-link.active small{color:var(--blue);opacity:.75}
.tier-tag{display:inline-block;font:600 .62rem/1 var(--ft);letter-spacing:.04em;text-transform:uppercase;padding:2px 6px;border-radius:5px;margin-left:6px;vertical-align:1px;background:var(--surface2);color:var(--mute)}

/* ============ CONTENT ============ */
main{overflow-x:hidden;min-width:0}
.content{max-width:820px;margin:0 auto;padding:48px 44px 120px}
.loading{color:var(--mute);padding:60px 0;text-align:center;font-size:.9rem}

.content h1{font:var(--wd) clamp(1.8rem,3.5vw,2.4rem)/1.14 var(--fd);color:var(--ink);letter-spacing:-.02em;margin-bottom:20px}
.content h1 .ac{font:italic 600 1em var(--fa);color:var(--blue)}
.content h2{font:var(--wd) 1.38rem/1.28 var(--fd);color:var(--ink);letter-spacing:-.015em;margin:38px 0 14px;padding-top:6px}
.content h3{font:640 1.06rem/1.35 var(--ft);color:var(--ink);margin:26px 0 10px}
.content h4{font:600 .96rem var(--ft);color:var(--ink);margin:20px 0 8px}
.content p{margin:0 0 14px;color:var(--body)}
.content ul,.content ol{margin:0 0 14px;padding-left:22px;color:var(--body)}
.content li{margin-bottom:5px}
.content li>ul,.content li>ol{margin-top:5px}
.content strong{color:var(--ink);font-weight:650}
.content em{color:var(--ink)}
.content hr{border:0;border-top:1px solid var(--line);margin:32px 0}
.content a{color:var(--blue);border-bottom:1px solid color-mix(in srgb,var(--blue) 35%,transparent);transition:border-color .13s}
.content a:hover{border-color:var(--blue)}
.content code{font:500 .85em var(--fm);background:var(--code-bg);color:var(--code-ink);padding:2px 6px;border-radius:5px}
.content pre{background:var(--code-bg);border:1px solid var(--line);border-radius:var(--r);padding:16px 18px;overflow-x:auto;margin:0 0 16px}
.content pre code{background:none;padding:0;font-size:.83rem;line-height:1.55}
.content blockquote{border-left:3px solid var(--blue);padding:2px 0 2px 16px;margin:0 0 16px;color:var(--ink);font-weight:500}
.content blockquote p{margin:0;color:inherit}
.content blockquote p:not(:first-child){margin-top:8px;font-weight:400;color:var(--body)}

.content table{width:100%;border-collapse:collapse;margin:0 0 22px;font-size:.87rem;display:block;overflow-x:auto;white-space:nowrap}
.content table thead{display:table-header-group}
.content table tbody{display:table-row-group}
.content table tr{display:table-row}
.content table th,.content table td{display:table-cell;white-space:normal}
.content th{text-align:left;font:700 .74rem var(--ft);letter-spacing:.03em;text-transform:uppercase;color:var(--mute);background:var(--surface2);padding:10px 14px;border-bottom:1px solid var(--line)}
.content td{padding:11px 14px;border-bottom:1px solid var(--hair);color:var(--body);vertical-align:top}
.content tr:last-child td{border-bottom:1px solid var(--line)}
.content tbody tr:hover td{background:color-mix(in srgb, var(--surface2) 55%, transparent)}

/* control-block table gets special treatment: first table in doc */
.content .ctrl-table{border:1px solid var(--line);border-radius:var(--r);overflow:hidden;box-shadow:var(--sh)}
.content .ctrl-table th{display:none}
.content .ctrl-table td:first-child{font:700 .78rem var(--ft);color:var(--mute);width:140px;background:var(--surface2)}

/* ============ TOC ============ */
.back-link{display:flex;align-items:center;gap:7px;font:600 .84rem var(--ft);color:var(--body);text-decoration:none;padding:9px 10px;margin-bottom:14px;border-radius:9px;transition:background .13s,color .13s}
.back-link:hover{background:var(--surface2);color:var(--blue)}
.toc-h{font:700 .68rem var(--ft);letter-spacing:.1em;text-transform:uppercase;color:var(--mute);margin-bottom:12px;padding:0 10px}
.toc-link{display:block;font:500 .82rem var(--ft);color:var(--mute);padding:6px 10px 6px 20px;border-left:2px solid var(--hair);margin-left:10px;transition:color .13s,border-color .13s}
.toc-link:hover{color:var(--ink)}
.toc-link.active{color:var(--blue);border-color:var(--blue);font-weight:600}
.toc-link.lvl3{padding-left:30px;font-size:.78rem}

/* ============ MOBILE ============ */
@media(max-width:880px){
  .cmdk-trigger span:first-of-type,.cmdk-trigger .kbd{display:none}
  .burger{display:flex}
  .shell{grid-template-columns:1fr}
  .sidebar{position:fixed;top:var(--hdr-h);left:0;bottom:0;width:82vw;max-width:320px;background:var(--bg);z-index:90;transform:translateX(-100%);transition:transform .28s cubic-bezier(.32,.72,0,1);box-shadow:var(--sh-lg)}
  body.snav .sidebar{transform:none}
  .scrim{display:none;position:fixed;inset:var(--hdr-h) 0 0 0;background:rgba(0,0,0,.35);z-index:80}
  body.snav .scrim{display:block}
  .content{padding:32px 20px 100px}
  .rel{display:none}
}

/* ============ COMMAND PALETTE ============ */
.cmdk-backdrop{display:none;position:fixed;inset:0;background:rgba(6,6,14,.5);backdrop-filter:blur(2px);z-index:200;align-items:flex-start;justify-content:center;padding:14vh 20px 20px}
.cmdk-backdrop.show{display:flex}
.cmdk{width:100%;max-width:560px;background:var(--surface);border:1px solid var(--line);border-radius:14px;box-shadow:var(--sh-lg);overflow:hidden;animation:cmdkIn .16s cubic-bezier(.16,1,.3,1)}
@keyframes cmdkIn{from{opacity:0;transform:translateY(-6px) scale(.98)}to{opacity:1;transform:translateY(0) scale(1)}}
@media(prefers-reduced-motion: reduce){.cmdk{animation:none}}
.cmdk-input-row{display:flex;align-items:center;gap:10px;padding:14px 16px;border-bottom:1px solid var(--line);color:var(--mute)}
.cmdk-input-row input{flex:1;background:none;border:0;outline:0;color:var(--ink);font:500 .96rem var(--ft)}
.cmdk-input-row input::placeholder{color:var(--mute)}
.cmdk-results{max-height:52vh;overflow-y:auto;padding:8px}
.cmdk-glabel{font:700 .66rem var(--ft);letter-spacing:.1em;text-transform:uppercase;color:var(--mute);padding:10px 10px 6px}
.cmdk-item{display:flex;align-items:center;gap:11px;padding:10px 12px;border-radius:9px;cursor:pointer;color:var(--body)}
.cmdk-item svg{flex:none;color:var(--mute)}
.cmdk-item .t{font:500 .89rem var(--ft);color:var(--ink)}
.cmdk-item .s{margin-left:auto;font:500 .68rem var(--fm);color:var(--mute)}
.cmdk-item .tag{margin-left:auto;font:500 .66rem var(--ft);color:var(--mute);background:var(--surface2);border:1px solid var(--hair);border-radius:99px;padding:2px 8px}
.cmdk-item .tag+.s{margin-left:8px}
.cmdk-item.sel{background:var(--blue-soft)}
.cmdk-item.sel svg,.cmdk-item.sel .t{color:var(--blue)}
.cmdk-item.action .t{color:var(--blue);font-weight:600}
.cmdk-empty{padding:24px 12px;text-align:center;color:var(--mute);font-size:.85rem}

/* ============ PRINT ============ */
@media print{
  header,.sidebar,.toc,.scrim{display:none!important}
  .shell{display:block}
  .content{max-width:100%;padding:0}
}

/* ============ HOME / TOC ============ */
.home-hero{margin-bottom:8px}
.home-eyebrow{display:inline-flex;align-items:center;gap:8px;font:600 .7rem var(--ft);letter-spacing:.14em;text-transform:uppercase;color:var(--blue);margin-bottom:12px}
.home-eyebrow::before{content:'';width:8px;height:8px;border-radius:99px;background:var(--lime);box-shadow:0 0 0 1.5px var(--ink)}
.home-hero h1{font:var(--wd) clamp(2rem,4.4vw,2.8rem)/1.12 var(--fd);color:var(--ink);letter-spacing:-.022em;margin-bottom:14px}
.home-hero h1 em{font:italic 400 1em var(--fa);color:var(--blue)}
.home-hero p{font-size:1.02rem;max-width:56ch;color:var(--body)}
.toc-group{margin-bottom:34px}
.toc-group>h2{display:flex;align-items:center;gap:11px;font:620 1.2rem var(--fd);color:var(--ink);border-bottom:1px solid var(--line);padding-bottom:10px;margin-bottom:14px}
.toc-group>h2 svg{flex:none;color:var(--blue)}
.toc-group>h2 .cnt{margin-left:auto;font:500 .74rem var(--ft);color:var(--mute);text-transform:none;letter-spacing:0}
.doc-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:10px}
.doc-card{display:block;padding:14px 16px;border:1px solid var(--line);border-radius:var(--r);transition:border-color .15s,transform .15s;background:var(--surface)}
.doc-card:hover{border-color:var(--blue);transform:translateY(-1px)}
.doc-card .t{display:block;font:600 .93rem var(--ft);color:var(--ink);margin-bottom:4px}
.doc-card:hover .t{color:var(--blue)}
.doc-card .b{display:block;font-size:.8rem;color:var(--mute);line-height:1.45;margin-bottom:9px}
.doc-card .idtag{display:inline-block;font:500 .66rem var(--fm);color:var(--mute);background:var(--surface2);border:1px solid var(--hair);border-radius:6px;padding:2px 7px}
@media(prefers-reduced-motion: reduce){.doc-card:hover{transform:none}}

/* ============ SEGMENTED TOGGLE (Group by / View) ============ */
.seg-row{display:flex;align-items:center;gap:32px;margin:22px 0 34px;flex-wrap:wrap}
.seg-cluster{display:flex;align-items:center;gap:11px}
.seg-label{font:600 .68rem var(--ft);letter-spacing:.08em;text-transform:uppercase;color:var(--mute)}
.seg{display:inline-flex;background:var(--surface2);border:1px solid var(--line);border-radius:9px;padding:3px;gap:2px}
.seg button{font:600 .78rem var(--ft);color:var(--mute);background:none;border:0;border-radius:7px;padding:6px 13px;cursor:pointer;transition:background .13s,color .13s}
.seg button.active{background:var(--surface);color:var(--ink);box-shadow:0 1px 2px rgba(10,10,20,.07)}
[data-theme=dark] .seg button.active{box-shadow:0 1px 2px rgba(0,0,0,.3)}

/* ============ LIST VIEW (home) ============ */
.doc-list{display:flex;flex-direction:column}
.doc-row{display:flex;align-items:center;gap:16px;padding:12px 6px;border-bottom:1px solid var(--hair);text-decoration:none;transition:background .12s}
.doc-row:hover{background:var(--surface2)}
.doc-row:last-child{border-bottom:0}
.doc-row .t{font:600 .89rem var(--ft);color:var(--ink);min-width:230px;flex:none}
.doc-row:hover .t{color:var(--blue)}
.doc-row .b{font-size:.82rem;color:var(--mute);flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.doc-row .idtag{flex:none;font:500 .66rem var(--fm);color:var(--mute);background:var(--surface2);border:1px solid var(--hair);border-radius:6px;padding:2px 7px}
@media(max-width:700px){.doc-row{flex-wrap:wrap}.doc-row .b{white-space:normal}.doc-row .t{min-width:0;width:100%}}

/* ============ READER: BREADCRUMB + PAGER ============ */
.doc-breadcrumb{display:flex;align-items:center;gap:8px;font:500 .78rem var(--ft);color:var(--mute);margin-bottom:20px;flex-wrap:wrap}
.doc-breadcrumb a{color:var(--mute);text-decoration:none;transition:color .13s}
.doc-breadcrumb a:hover{color:var(--blue)}
.doc-breadcrumb span{opacity:.55}
.doc-breadcrumb span:last-child{opacity:1;color:var(--ink);font-weight:600}
.doc-pager{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:56px;padding-top:24px;border-top:1px solid var(--line)}
.doc-pager a{display:block;padding:14px 16px;border:1px solid var(--line);border-radius:var(--r);text-decoration:none;transition:border-color .15s}
.doc-pager a:hover{border-color:var(--blue)}
.doc-pager .dir{display:block;font:600 .66rem var(--ft);letter-spacing:.08em;text-transform:uppercase;color:var(--mute);margin-bottom:4px}
.doc-pager .nm{display:block;font:600 .88rem var(--ft);color:var(--ink)}
.doc-pager a:hover .nm{color:var(--blue)}
.doc-pager .next{text-align:right}
@media(max-width:600px){.doc-pager{grid-template-columns:1fr}}

[data-theme=dark] .content blockquote{border-left-color:var(--lime)}


/* ============ READ PROGRESS ============ */
.progress-track{position:fixed;top:var(--hdr-h);left:0;right:0;height:2.5px;background:transparent;z-index:95;pointer-events:none}
.progress-fill{height:100%;width:0%;background:var(--blue);transform-origin:left;transition:width .08s linear}

/* ============ SCROLLSPY REFINEMENT ============ */
.toc-link{position:relative}
.toc-link.active{font-weight:650}

/* ============ CONTENT TRANSITION ============ */
.content{animation:fadeUp .28s cubic-bezier(.16,1,.3,1)}
@keyframes fadeUp{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:translateY(0)}}
@media (prefers-reduced-motion: reduce){.content{animation:none}}

/* ============ MICRO-POLISH ============ */
.doc-link{position:relative}
.doc-link::before{content:'';position:absolute;left:0;top:2px;bottom:2px;width:2px;background:var(--blue);border-radius:2px;opacity:0;transform:scaleY(.4);transition:opacity .15s,transform .15s}
.doc-link.active::before{opacity:1;transform:scaleY(1)}
.doc-link{padding-left:14px}

.home-hero{animation:fadeUp .32s cubic-bezier(.16,1,.3,1)}
@media (prefers-reduced-motion: reduce){.home-hero{animation:none}}

.content h2{scroll-margin-top:calc(var(--hdr-h) + 20px)}
.content h3{scroll-margin-top:calc(var(--hdr-h) + 20px)}