/* PALBON Docs: the user manual's reader (templates/palbonsphere_docs.html + public/js/docs/*.vue).
   Full width, in the public site's layout; every colour is a site or palette variable (palbon_site.css,
   palbon_palette.css), so light, dark and the PALBON themes all apply. No literal colour here. */

.pd{position:relative;isolation:isolate;padding-top:var(--header-h);min-height:100vh;background:var(--bg)}
.pd-visually-hidden{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* ---------- the light background: slow colour drift and a fading grid ---------- */
.pd-sky{position:absolute;inset:0;z-index:-1;overflow:hidden;pointer-events:none}
.pd-sky i{position:absolute;width:46vw;height:46vw;max-width:680px;max-height:680px;border-radius:50%;filter:blur(90px);opacity:.16;animation:pd-drift 26s ease-in-out infinite alternate}
.pd-sky__a{top:-12%;left:-8%;background:radial-gradient(circle,var(--pb-glow-1),transparent 66%)}
.pd-sky__b{top:4%;right:-10%;background:radial-gradient(circle,var(--pb-glow-2),transparent 66%);animation-duration:32s;animation-delay:-8s}
.pd-sky__c{top:46%;left:34%;background:radial-gradient(circle,var(--pb-glow-3),transparent 66%);opacity:.1;animation-duration:38s;animation-delay:-14s}
.pd-sky__grid{position:absolute;inset:0;height:560px;background-image:linear-gradient(var(--line) 1px,transparent 1px),linear-gradient(90deg,var(--line) 1px,transparent 1px);
	background-size:44px 44px;opacity:.45;-webkit-mask-image:radial-gradient(ellipse 70% 100% at 50% 0,var(--ink) 0%,transparent 75%);mask-image:radial-gradient(ellipse 70% 100% at 50% 0,var(--ink) 0%,transparent 75%);animation:pd-grid 40s linear infinite}
@keyframes pd-drift{0%{transform:translate3d(0,0,0) scale(1)}50%{transform:translate3d(5vw,6vh,0) scale(1.1)}100%{transform:translate3d(-3vw,10vh,0) scale(.95)}}
@keyframes pd-grid{to{background-position:44px 44px,44px 44px}}

/* ---------- without JavaScript: the article and a list of sections ---------- */
.pd-static{max-width:880px;margin:0 auto;padding:32px 20px 64px}
.pd-static__nav{margin-top:40px;padding-top:20px;border-top:1px solid var(--line)}
.pd-static__nav ul{columns:2;margin-top:10px}
.pd-ready .pd-static{display:none}

/* ---------- the reader: navigation | article | contents, full width ---------- */
.pd-layout{display:grid;grid-template-columns:300px minmax(0,1fr) 260px;min-height:calc(100vh - var(--header-h))}
.pd-progress{position:fixed;top:var(--header-h);left:0;right:0;z-index:30;height:3px;pointer-events:none}
.pd-progress i{display:block;height:100%;background:var(--pb-grad-line);transform-origin:left;transform:scaleX(0);transition:transform .12s linear}

.pd-side{position:sticky;top:var(--header-h);height:calc(100vh - var(--header-h));overflow:auto;border-right:1px solid var(--line);
	background:color-mix(in srgb,var(--surface) 72%,transparent);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px)}
.pd-nav{padding:22px 16px 48px}
.pd-nav__brand{display:flex;align-items:center;gap:10px;padding:0 8px 16px;font-weight:700;color:var(--ink);text-decoration:none}
.pd-nav__brand b{color:var(--primary)}
.pd-filter input{width:100%;height:38px;padding:0 12px;border-radius:10px;border:1px solid var(--line);background:var(--surface);color:var(--ink);font:inherit;font-size:14px}
.pd-filter input:focus{outline:2px solid var(--focus);outline-offset:1px}
.pd-nav__list{margin-top:14px}
.pd-nav__toggle{display:flex;width:100%;align-items:center;justify-content:space-between;gap:8px;padding:8px 10px;border:0;border-radius:9px;background:none;
	color:var(--ink);font:600 14px/1.3 var(--font);text-align:left;cursor:pointer}
.pd-nav__toggle:hover{background:var(--surface-2)}
.pd-nav__toggle svg{flex:none;color:var(--muted);transition:transform .25s var(--ease)}
.pd-nav__section.is-open>.pd-nav__toggle svg{transform:rotate(90deg)}
.pd-nav__section.is-current>.pd-nav__toggle{color:var(--primary)}
.pd-nav__groups{margin:2px 0 8px 12px;padding-left:10px;border-left:1px solid var(--line);animation:pd-open .3s var(--ease)}
@keyframes pd-open{from{opacity:0;transform:translateY(-4px)}}
.pd-nav__group{margin:12px 0 4px 8px;font-size:11px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
.pd-nav__groups a{display:block;padding:6px 10px;border-radius:8px;color:var(--muted);font-size:13.5px;line-height:1.35;text-decoration:none}
.pd-nav__groups a:hover{background:var(--surface-2);color:var(--ink)}
.pd-nav__groups a.is-active{background:var(--tint);color:var(--primary);font-weight:600;box-shadow:inset 2px 0 0 var(--primary)}
.pd-nav__overview{font-weight:600}

.pd-main{min-width:0;padding:34px clamp(20px,4vw,64px) 96px}
.pd-hero{max-width:900px;animation:pd-rise .7s var(--ease) both}
@keyframes pd-rise{from{opacity:0;transform:translateY(14px)}}
.pd-crumbs{display:flex;flex-wrap:wrap;gap:8px;font-size:13px;color:var(--muted)}
.pd-crumbs a{color:var(--primary);text-decoration:none}
.pd-crumbs a:hover{text-decoration:underline}
.pd-title{margin-top:12px!important;font-size:clamp(2rem,3.4vw,2.9rem);font-weight:800;line-height:1.08;letter-spacing:-.03em;color:var(--ink)}
.pd-lede{margin-top:12px!important;max-width:44em;font-size:1.15rem;line-height:1.6;color:var(--muted)}
.pd-meta{display:flex;flex-wrap:wrap;gap:8px;margin-top:18px}
.pd-chip{display:inline-flex;align-items:center;height:28px;padding:0 12px;border-radius:999px;border:1px solid var(--line);background:var(--surface);color:var(--muted);font-size:12.5px;font-weight:600}
.pd-chip--accent{border-color:transparent;background:var(--tint);color:var(--primary)}
.pd-chip--button{cursor:pointer;font-family:inherit}
.pd-chip--button:hover{color:var(--ink);border-color:var(--line-2)}
.pd-tools{display:flex;flex-wrap:wrap;gap:10px;margin-top:22px}
.pd-search-trigger{display:flex;flex:1;min-width:240px;max-width:560px;align-items:center;gap:10px;height:44px;padding:0 14px;border-radius:12px;border:1px solid var(--line);
	background:var(--surface);color:var(--muted);font:inherit;font-size:14.5px;cursor:pointer;box-shadow:var(--shadow-sm);transition:border-color .2s,box-shadow .2s}
.pd-search-trigger:hover{border-color:var(--primary);box-shadow:var(--shadow-md)}
.pd-search-trigger kbd,.pd-search__field kbd{margin-left:auto;padding:2px 7px;border-radius:6px;border:1px solid var(--line);background:var(--surface-2);font:600 11.5px var(--font);color:var(--muted)}
.pd-lang select{height:44px;padding:0 12px;border-radius:12px;border:1px solid var(--line);background:var(--surface);color:var(--ink);font:inherit;font-size:14px}
.pd-menu{display:none;height:44px;padding:0 14px;border-radius:12px;border:1px solid var(--line);background:var(--surface);color:var(--ink);font:600 14px var(--font);cursor:pointer}

.pd-content{max-width:900px;margin-top:30px;animation:pd-rise .8s var(--ease) .08s both}
.pd-content .pd-article{max-width:none;margin:0}
.pd-content .ps-prose h2{position:relative;scroll-margin-top:calc(var(--header-h) + 20px);padding-top:6px}
.pd-content .ps-prose h3{scroll-margin-top:calc(var(--header-h) + 20px)}
.pd-anchor{margin-left:8px;color:var(--primary);text-decoration:none!important;opacity:0;transition:opacity .2s}
.pd-content h2:hover .pd-anchor,.pd-content h3:hover .pd-anchor,.pd-anchor:focus{opacity:.8}
.pd-content ol{margin-top:14px;padding-left:22px;list-style:decimal}
.pd-content ol>li::marker{color:var(--primary);font-weight:700}
.pd-content blockquote{margin:18px 0;padding:14px 18px;border-radius:14px;border:1px solid var(--line);border-left:3px solid var(--primary);background:var(--tint);color:var(--ink)}
.pd-content img{display:block;max-width:100%;height:auto;margin:22px auto;border-radius:14px;border:1px solid var(--line);box-shadow:var(--shadow-md)}
.pd-content iframe{display:block;width:100%;max-width:100%;height:auto;aspect-ratio:16/9;margin:22px 0;border:1px solid var(--line);border-radius:14px;box-shadow:var(--shadow-md);background:var(--ink)}
.pd-content pre{position:relative;margin:18px 0;padding:16px 18px;border-radius:14px;border:1px solid var(--line);background:var(--surface-2);overflow:auto;font-size:13px}
.pd-copy{position:absolute;top:8px;right:8px;height:26px;padding:0 10px;border-radius:7px;border:1px solid var(--line);background:var(--surface);color:var(--muted);font:600 11.5px var(--font);cursor:pointer}
.pd-copy:hover{color:var(--ink)}
.pd-content code{font-size:.92em}
.pd-content table{border-radius:12px}
.pd-content .from-markdown>*:first-child{margin-top:0!important}

.pd-pager{display:grid;grid-template-columns:1fr 1fr;gap:14px;max-width:900px;margin-top:64px}
.pd-card{display:grid;gap:4px;padding:16px 18px;border-radius:14px;border:1px solid var(--line);background:var(--surface);box-shadow:var(--shadow-sm);text-decoration:none;
	transition:transform .25s var(--ease),border-color .25s,box-shadow .25s}
.pd-card:hover{transform:translateY(-2px);border-color:var(--primary);box-shadow:var(--shadow-md)}
.pd-card small{font-size:12px;color:var(--muted)}
.pd-card strong{color:var(--ink);font-size:15.5px}
.pd-card--next{text-align:right}

.pd-aside{position:sticky;top:var(--header-h);height:calc(100vh - var(--header-h));overflow:auto;padding:34px 22px}
.pd-toc__head{display:flex;align-items:center;gap:10px;margin-bottom:12px}
.pd-toc__head p{font-size:11.5px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
.pd-toc__ring{transform:rotate(-90deg)}
.pd-toc__ring circle{fill:none;stroke:var(--line);stroke-width:4}
.pd-toc__ring .pd-toc__ring-value{stroke:var(--primary);stroke-linecap:round;transition:stroke-dasharray .15s linear}
.pd-toc__item{display:block;padding:6px 0 6px 14px;border-left:2px solid var(--line);color:var(--muted);font-size:13px;line-height:1.35;text-decoration:none;transition:color .2s,border-color .2s}
.pd-toc__item.is-level-3{padding-left:26px;font-size:12.5px}
.pd-toc__item:hover{color:var(--ink)}
.pd-toc__item.is-active{border-color:var(--primary);color:var(--primary);font-weight:600}
.pd-toc__top{display:inline-block;margin-top:18px;font-size:12.5px;color:var(--muted);text-decoration:none}
.pd-toc__top:hover{color:var(--primary)}

/* ---------- search palette ---------- */
.pd-search{position:fixed;inset:0;z-index:200;display:grid;place-items:start center;padding:12vh 16px 16px;background:color-mix(in srgb,var(--ink) 40%,transparent);
	-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);animation:pd-fade .2s ease}
@keyframes pd-fade{from{opacity:0}}
.pd-search__panel{width:min(640px,100%);overflow:hidden;border-radius:16px;border:1px solid var(--line);background:var(--surface);box-shadow:var(--shadow-lg);animation:pd-pop .25s var(--ease)}
@keyframes pd-pop{from{opacity:0;transform:translateY(-10px) scale(.98)}}
.pd-search__field{display:flex;align-items:center;gap:10px;padding:0 16px;border-bottom:1px solid var(--line);color:var(--muted)}
.pd-search__field input{flex:1;height:56px;border:0;background:none;color:var(--ink);font:inherit;font-size:16px;outline:none}
.pd-search__results{max-height:min(420px,60vh);overflow:auto;padding:8px}
.pd-search__results a{display:grid;gap:2px;padding:10px 12px;border-radius:10px;text-decoration:none}
.pd-search__results a.is-active{background:var(--tint)}
.pd-search__results strong{color:var(--ink);font-size:14.5px}
.pd-search__results small{color:var(--muted);font-size:12px}
.pd-search__empty{padding:28px;text-align:center;color:var(--muted)}

.pd-scrim{display:none}

@media (max-width:1240px){.pd-layout{grid-template-columns:280px minmax(0,1fr)}.pd-aside{display:none}}
@media (max-width:900px){
	.pd-layout{grid-template-columns:minmax(0,1fr)}
	.pd-side{position:fixed;top:var(--header-h);left:0;bottom:0;z-index:60;width:min(320px,86vw);height:auto;transform:translateX(-105%);transition:transform .3s var(--ease);background:var(--surface)}
	.pd-layout.is-nav-open .pd-side{transform:none;box-shadow:var(--shadow-lg)}
	.pd-layout.is-nav-open .pd-scrim{display:block;position:fixed;inset:var(--header-h) 0 0 0;z-index:55;border:0;background:color-mix(in srgb,var(--ink) 35%,transparent)}
	.pd-menu{display:inline-flex;align-items:center}
	.pd-main{padding:24px 16px 72px}
	.pd-pager{grid-template-columns:1fr}
}
@media (prefers-reduced-motion:reduce){
	.pd-sky i,.pd-sky__grid,.pd-hero,.pd-content,.pd-nav__groups,.pd-search,.pd-search__panel{animation:none}
	.pd-card,.pd-side,.pd-progress i{transition:none}
}

/* the site header sits on the light page from the start (other public pages begin with a dark band) */
body[data-page="docs"] .ps-header{background:var(--header-bg);color:var(--ink);border-bottom-color:var(--line);-webkit-backdrop-filter:saturate(1.6) blur(16px);backdrop-filter:saturate(1.6) blur(16px)}
body[data-page="docs"] .ps-header .ps-brand__name b{color:var(--primary)}