/* ============================================================
   GurukulSync Docs — theme styles
   Every value derives from DESIGN-LANGUAGE.md. Do not hand-tune
   colors/sizes here; change the tokens.
   ============================================================ */

/* ---------- Fonts (self-hosted, OFL) ---------- */
@font-face { font-family:"Bricolage Grotesque"; font-style:normal; font-weight:400; font-display:swap; src:url("../fonts/bricolage-400.woff2") format("woff2"); }
@font-face { font-family:"Bricolage Grotesque"; font-style:normal; font-weight:500; font-display:swap; src:url("../fonts/bricolage-500.woff2") format("woff2"); }
@font-face { font-family:"Bricolage Grotesque"; font-style:normal; font-weight:600; font-display:swap; src:url("../fonts/bricolage-600.woff2") format("woff2"); }
@font-face { font-family:"Bricolage Grotesque"; font-style:normal; font-weight:700; font-display:swap; src:url("../fonts/bricolage-700.woff2") format("woff2"); }
@font-face { font-family:"Bricolage Grotesque"; font-style:normal; font-weight:800; font-display:swap; src:url("../fonts/bricolage-800.woff2") format("woff2"); }
@font-face { font-family:"Figtree"; font-style:normal; font-weight:400; font-display:swap; src:url("../fonts/figtree-400.woff2") format("woff2"); }
@font-face { font-family:"Figtree"; font-style:normal; font-weight:500; font-display:swap; src:url("../fonts/figtree-500.woff2") format("woff2"); }
@font-face { font-family:"Figtree"; font-style:normal; font-weight:600; font-display:swap; src:url("../fonts/figtree-600.woff2") format("woff2"); }
@font-face { font-family:"Figtree"; font-style:normal; font-weight:700; font-display:swap; src:url("../fonts/figtree-700.woff2") format("woff2"); }
@font-face { font-family:"JetBrains Mono"; font-style:normal; font-weight:400; font-display:swap; src:url("../fonts/jetbrains-mono-400.woff2") format("woff2"); }
@font-face { font-family:"JetBrains Mono"; font-style:normal; font-weight:500; font-display:swap; src:url("../fonts/jetbrains-mono-500.woff2") format("woff2"); }

/* ---------- Tokens ---------- */
:root {
  --paper:#FCFBFA; --surface:#FFFFFF; --surface-subtle:#F4F1EE;
  --border:#E9E4DE; --border-strong:#D9D2CA;
  --ink:#1E1B18; --ink-muted:#6A625B; --ink-subtle:#968D84;
  --accent:#7C3AED; --accent-strong:#6D28D9; --accent-hover:#5B21B6;
  --accent-soft:#F1EBFE; --accent-highlight:rgba(124,58,237,.18); --on-accent:#FFFFFF;
  --note:#2563EB; --note-soft:#EAF1FF;
  --tip:#059669; --tip-soft:#E6F6F0;
  --warn:#B45309; --warn-soft:#FDF0E1;
  --danger:#E11D48; --danger-soft:#FDECEF;
  --shadow-sm:0 1px 2px rgba(30,27,24,.04),0 1px 3px rgba(30,27,24,.06);
  --shadow-md:0 4px 12px rgba(30,27,24,.06),0 2px 4px rgba(30,27,24,.05);
  --shadow-lg:0 12px 32px rgba(76,29,149,.10),0 4px 8px rgba(30,27,24,.05);
  --sp-1:4px; --sp-2:8px; --sp-3:12px; --sp-4:16px; --sp-5:24px; --sp-6:32px; --sp-7:48px; --sp-8:64px;
  --radius-sm:8px; --radius:12px; --radius-lg:16px; --radius-xl:20px; --radius-pill:999px;
  --ease:cubic-bezier(.22,1,.36,1);
  --sans:"Figtree",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  --display:"Bricolage Grotesque","Trebuchet MS","Segoe UI",system-ui,sans-serif;
  --mono:"JetBrains Mono",ui-monospace,"SFMono-Regular",Menlo,Consolas,monospace;
  --topbar-h:64px; --maxw:1440px;
}
@media (prefers-color-scheme:dark){ :root:not([data-theme="light"]){
  --paper:#17141A; --surface:#201C27; --surface-subtle:#272130;
  --border:#322B3B; --border-strong:#443B4F;
  --ink:#ECE7F1; --ink-muted:#A79EB0; --ink-subtle:#7C7385;
  --accent:#A78BFA; --accent-strong:#C4B0FB; --accent-hover:#C9B6FC;
  --accent-soft:#2A2137; --accent-highlight:rgba(167,139,250,.22); --on-accent:#17141A;
  --note:#7CA8FF; --note-soft:rgba(37,99,235,.16);
  --tip:#45C99B; --tip-soft:rgba(5,150,105,.16);
  --warn:#F0A64E; --warn-soft:rgba(217,119,6,.16);
  --danger:#FB7185; --danger-soft:rgba(225,29,72,.16);
  --shadow-sm:0 1px 2px rgba(0,0,0,.3); --shadow-md:0 4px 14px rgba(0,0,0,.4); --shadow-lg:0 16px 40px rgba(0,0,0,.5);
}}
:root[data-theme="dark"]{
  --paper:#17141A; --surface:#201C27; --surface-subtle:#272130;
  --border:#322B3B; --border-strong:#443B4F;
  --ink:#ECE7F1; --ink-muted:#A79EB0; --ink-subtle:#7C7385;
  --accent:#A78BFA; --accent-strong:#C4B0FB; --accent-hover:#C9B6FC;
  --accent-soft:#2A2137; --accent-highlight:rgba(167,139,250,.22); --on-accent:#17141A;
  --note:#7CA8FF; --note-soft:rgba(37,99,235,.16);
  --tip:#45C99B; --tip-soft:rgba(5,150,105,.16);
  --warn:#F0A64E; --warn-soft:rgba(217,119,6,.16);
  --danger:#FB7185; --danger-soft:rgba(225,29,72,.16);
  --shadow-sm:0 1px 2px rgba(0,0,0,.3); --shadow-md:0 4px 14px rgba(0,0,0,.4); --shadow-lg:0 16px 40px rgba(0,0,0,.5);
}

/* ---------- Base ---------- */
*,*::before,*::after{ box-sizing:border-box; }
html{ scroll-behavior:smooth; scroll-padding-top:calc(var(--topbar-h) + 16px); }
body{ margin:0; background:var(--paper); color:var(--ink); font-family:var(--sans);
  font-size:17px; line-height:1.7; -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility; }
h1,h2,h3,h4,h5,h6{ font-family:var(--display); line-height:1.2; letter-spacing:-.01em; margin:0; text-wrap:balance; }
p{ margin:0 0 1.1em; }
a{ color:var(--accent-strong); text-decoration:underline; text-underline-offset:2px; text-decoration-thickness:1px; text-decoration-color:color-mix(in srgb,var(--accent-strong) 45%,transparent); transition:color .15s var(--ease), text-decoration-color .15s var(--ease); }
a:hover{ text-decoration-thickness:2px; text-decoration-color:currentColor; }
img{ max-width:100%; height:auto; }
code,kbd,pre,samp{ font-family:var(--mono); }
:focus-visible{ outline:2px solid var(--accent); outline-offset:2px; border-radius:4px; }
.screen-reader-text{ position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; padding:0; margin:-1px; }
.skip-link{ position:fixed; top:8px; left:8px; z-index:200; background:var(--accent); color:var(--on-accent);
  padding:10px 16px; border-radius:var(--radius); transform:translateY(-150%); transition:transform .2s var(--ease); text-decoration:none; font-weight:600; }
.skip-link:focus{ transform:translateY(0); }
.ico{ flex:none; vertical-align:middle; }

/* ---------- Signature: highlighter marker ---------- */
.mark{ background:linear-gradient(105deg, transparent 1.5%, var(--accent-highlight) 1.5%, var(--accent-highlight) 97%, transparent 97%);
  padding:.06em .18em; border-radius:6px 9px 7px 10px; -webkit-box-decoration-break:clone; box-decoration-break:clone; color:inherit; }
.eyebrow{ font-size:13px; font-weight:600; letter-spacing:.08em; text-transform:uppercase; color:var(--accent-strong); font-family:var(--sans); margin:0 0 10px; }

/* ---------- Buttons ---------- */
.btn{ display:inline-flex; align-items:center; gap:8px; font-family:var(--sans); font-weight:600; font-size:15px;
  border-radius:var(--radius); padding:11px 20px; cursor:pointer; border:1px solid transparent; text-decoration:none;
  transition:all .15s var(--ease); line-height:1; }
.btn-primary{ background:var(--accent); color:var(--on-accent); box-shadow:var(--shadow-sm); }
.btn-primary:hover{ background:var(--accent-hover); transform:translateY(-1px); box-shadow:var(--shadow-md); color:var(--on-accent); text-decoration:none; }
.btn-secondary{ background:var(--surface); color:var(--ink); border-color:var(--border-strong); }
.btn-secondary:hover{ background:var(--surface-subtle); text-decoration:none; color:var(--ink); }

/* ---------- Topbar ---------- */
.topbar{ position:sticky; top:0; z-index:60; background:color-mix(in srgb,var(--paper) 85%, transparent);
  backdrop-filter:blur(12px); -webkit-backdrop-filter:blur(12px); border-bottom:1px solid var(--border); }
.topbar__inner{ display:flex; align-items:center; gap:var(--sp-4); height:var(--topbar-h); max-width:var(--maxw); margin:0 auto; padding:0 var(--sp-5); }
.topbar__burger,.topbar__search-btn{ display:none; align-items:center; justify-content:center; width:40px; height:40px; border:1px solid var(--border); background:var(--surface); border-radius:var(--radius-sm); color:var(--ink); cursor:pointer; }
.brand__link,.brand{ display:flex; align-items:center; gap:10px; text-decoration:none; color:var(--ink); font-family:var(--display); font-weight:700; font-size:19px; }
.brand__mark{ width:30px; height:30px; border-radius:9px; background:linear-gradient(135deg,var(--accent),var(--accent-hover)); color:#fff;
  display:grid; place-items:center; font-family:var(--display); font-weight:800; box-shadow:var(--shadow-sm); flex:none; }
.brand__name{ white-space:nowrap; }
.custom-logo{ max-height:40px; width:auto; }
.topnav__list{ display:flex; gap:2px; list-style:none; margin:0 0 0 var(--sp-3); padding:0; }
.topnav__list a{ display:block; font-size:15px; color:var(--ink-muted); text-decoration:none; padding:7px 12px; border-radius:var(--radius-sm); font-weight:500; }
.topnav__list a:hover{ background:var(--surface-subtle); color:var(--ink); }
.topnav .current-menu-item a,.topnav .current_page_item a{ color:var(--ink); }
.topbar__spacer{ flex:1; }
.topbar__search{ width:clamp(180px,26vw,300px); }

/* ---------- Search form (pill) ---------- */
.searchform{ display:flex; align-items:center; gap:8px; background:var(--surface); border:1px solid var(--border);
  border-radius:var(--radius-pill); padding:8px 14px; transition:border-color .15s var(--ease), box-shadow .15s var(--ease); }
.searchform:focus-within{ border-color:var(--accent); box-shadow:0 0 0 3px var(--accent-soft); }
.searchform__icon{ color:var(--ink-subtle); display:flex; }
.searchform__input{ flex:1; border:0; background:transparent; color:var(--ink); font:inherit; font-size:15px; outline:none; min-width:0; }
.searchform__input::placeholder{ color:var(--ink-subtle); }
.searchform__kbd{ font-family:var(--mono); font-size:12px; background:var(--surface-subtle); border:1px solid var(--border); border-radius:6px; padding:1px 7px; color:var(--ink-muted); }
.theme-toggle{ display:inline-flex; align-items:center; justify-content:center; width:40px; height:40px; border:1px solid var(--border);
  background:var(--surface); border-radius:var(--radius-sm); cursor:pointer; color:var(--ink); flex:none; }
.theme-toggle:hover{ border-color:var(--border-strong); }
.theme-toggle__moon{ display:none; }
:root[data-theme="dark"] .theme-toggle__sun{ display:none; }
:root[data-theme="dark"] .theme-toggle__moon{ display:inline-flex; }
@media (prefers-color-scheme:dark){ :root:not([data-theme="light"]) .theme-toggle__sun{ display:none; } :root:not([data-theme="light"]) .theme-toggle__moon{ display:inline-flex; } }

/* ---------- Drawer (mobile) ---------- */
.drawer{ position:fixed; inset:0; z-index:100; }
.drawer[hidden]{ display:none; }
.drawer__backdrop{ position:absolute; inset:0; background:rgba(20,16,24,.5); backdrop-filter:blur(2px); }
.drawer__panel{ position:absolute; inset:0 auto 0 0; width:min(320px,86vw); background:var(--paper); border-right:1px solid var(--border);
  padding:var(--sp-5); overflow-y:auto; box-shadow:var(--shadow-lg); animation:drawerIn .25s var(--ease); }
@keyframes drawerIn{ from{ transform:translateX(-100%); } to{ transform:translateX(0); } }
.drawer__head{ display:flex; align-items:center; justify-content:space-between; margin-bottom:var(--sp-4); }
.drawer__close{ width:40px; height:40px; border:1px solid var(--border); background:var(--surface); border-radius:var(--radius-sm); color:var(--ink); cursor:pointer; display:grid; place-items:center; }
.drawer__search{ margin-bottom:var(--sp-4); }
.drawer__nav-list{ list-style:none; margin:0 0 var(--sp-4); padding:0; display:flex; flex-direction:column; gap:2px; }
.drawer__nav-list a{ display:block; padding:9px 12px; border-radius:var(--radius-sm); color:var(--ink); text-decoration:none; font-weight:500; }
.drawer__nav-list a:hover{ background:var(--surface-subtle); }
.drawer__docs{ border-top:1px solid var(--border); padding-top:var(--sp-4); }

/* ---------- Home ---------- */
.home-hero{ text-align:center; padding:var(--sp-8) var(--sp-5); background:
  radial-gradient(60% 80% at 50% -10%, var(--accent-soft), transparent 70%); border-bottom:1px solid var(--border); }
.home-hero__inner{ max-width:720px; margin:0 auto; }
.home-hero__title{ font-size:clamp(2.2rem,1.7rem+2.4vw,3.4rem); line-height:1.05; letter-spacing:-.02em; margin:8px 0 0; }
.home-hero__lead{ font-size:19px; color:var(--ink-muted); margin:16px auto 0; max-width:54ch; }
.home-hero__search{ max-width:560px; margin:var(--sp-6) auto 0; }
.home-hero__search .searchform{ padding:14px 20px; box-shadow:var(--shadow-md); }
.home-hero__search .searchform__input{ font-size:17px; }
.home-hero__hint{ margin-top:var(--sp-4); font-size:14px; color:var(--ink-muted); display:flex; gap:12px; justify-content:center; flex-wrap:wrap; }
.home-body{ max-width:1080px; margin:0 auto; padding:var(--sp-8) var(--sp-5); display:flex; flex-direction:column; gap:var(--sp-8); }
.home-section__head{ display:flex; align-items:baseline; justify-content:space-between; gap:var(--sp-4); margin-bottom:var(--sp-5); }
.home-section__title{ font-size:1.6rem; margin-bottom:var(--sp-5); }
.home-section__head .home-section__title{ margin-bottom:0; }
.home-section__more{ font-weight:600; font-size:15px; text-decoration:none; display:inline-flex; align-items:center; gap:6px; white-space:nowrap; }

.card-grid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(240px,1fr)); gap:var(--sp-4); }
.topic-card{ display:flex; flex-direction:column; gap:6px; background:var(--surface); border:1px solid var(--border);
  border-radius:var(--radius-lg); padding:var(--sp-5); text-decoration:none; color:var(--ink); box-shadow:var(--shadow-sm);
  transition:transform .15s var(--ease), border-color .15s var(--ease), box-shadow .15s var(--ease); }
.topic-card:hover{ transform:translateY(-2px); border-color:var(--accent); box-shadow:var(--shadow-md); }
.topic-card__ico{ width:44px; height:44px; border-radius:12px; background:var(--accent-soft); color:var(--accent-strong); display:grid; place-items:center; margin-bottom:10px; }
.topic-card__title{ font-family:var(--display); font-weight:650; font-size:1.15rem; }
.topic-card__desc{ color:var(--ink-muted); font-size:15px; }
.topic-card__meta{ margin-top:auto; padding-top:8px; font-size:13px; color:var(--ink-subtle); font-weight:500; }

/* ---------- Docs shell (3-column) ---------- */
.docs-shell{ display:grid; grid-template-columns:264px minmax(0,1fr) 240px; max-width:var(--maxw); margin:0 auto; padding:0 var(--sp-5); gap:var(--sp-7); align-items:start; }
.docs-sidebar__sticky,.doc-toc-col__sticky{ position:sticky; top:var(--topbar-h); max-height:calc(100vh - var(--topbar-h)); overflow-y:auto; padding:var(--sp-6) 0; }
.doc{ min-width:0; max-width:760px; width:100%; margin:0 auto; padding:var(--sp-7) 0 var(--sp-8); }

/* sidebar nav */
.docs-nav{ display:flex; flex-direction:column; gap:var(--sp-5); font-size:15px; }
.docs-nav__section{ display:block; font-family:var(--display); font-weight:700; font-size:12.5px; letter-spacing:.06em; text-transform:uppercase; color:var(--ink-subtle); margin-bottom:8px; padding:0 12px; }
.docs-nav__list{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:1px; }
.docs-nav__link{ display:block; padding:7px 12px; border-radius:var(--radius-sm); color:var(--ink-muted); text-decoration:none; line-height:1.4; }
.docs-nav__link:hover{ background:var(--surface-subtle); color:var(--ink); }
.docs-nav__link.is-current{ color:var(--accent-strong); font-weight:600; background:linear-gradient(105deg, transparent 1.5%, var(--accent-highlight) 1.5%, var(--accent-highlight) 97%, transparent 97%); border-radius:7px 10px 8px 11px; }

/* table of contents */
.toc__title{ font-family:var(--display); font-weight:700; font-size:12.5px; letter-spacing:.06em; text-transform:uppercase; color:var(--ink-subtle); display:block; margin-bottom:12px; }
.toc__list{ list-style:none; margin:0; padding:0; border-left:2px solid var(--border); display:flex; flex-direction:column; }
.toc__item a{ display:block; padding:5px 0 5px 14px; margin-left:-2px; border-left:2px solid transparent; color:var(--ink-muted); text-decoration:none; font-size:14px; line-height:1.45; }
.toc__item--h3 a{ padding-left:26px; font-size:13.5px; }
.toc__item a:hover{ color:var(--ink); }
.toc__item a.is-active{ color:var(--accent-strong); font-weight:600; border-left-color:var(--accent); }

/* ---------- Breadcrumbs ---------- */
.crumbs ol{ list-style:none; margin:0 0 var(--sp-5); padding:0; display:flex; flex-wrap:wrap; align-items:center; gap:4px; font-size:13.5px; }
.crumbs__item{ display:inline-flex; align-items:center; gap:4px; color:var(--ink-muted); }
.crumbs__item a{ color:var(--ink-muted); text-decoration:none; }
.crumbs__item a:hover{ color:var(--accent-strong); }
.crumbs__item [aria-current]{ color:var(--ink); font-weight:500; }
.crumbs__sep{ color:var(--ink-subtle); display:inline-flex; }

/* ---------- Doc header + prose ---------- */
.doc__title,.prose__title{ font-size:clamp(2rem,1.6rem+1.6vw,2.5rem); line-height:1.15; letter-spacing:-.02em; }
.doc__meta,.prose__meta{ display:flex; flex-wrap:wrap; gap:16px; margin-top:14px; color:var(--ink-muted); font-size:14px; }
.doc__meta-item{ display:inline-flex; align-items:center; gap:6px; }
.doc__lead,.prose__lead{ font-size:19px; line-height:1.6; color:var(--ink-muted); margin-top:18px; }
.doc__header,.prose__header{ margin-bottom:var(--sp-6); }
.doc__feature,.prose__feature{ margin:0 0 var(--sp-6); }
.doc__feature img,.prose__feature img{ width:100%; border-radius:var(--radius); border:1px solid var(--border); box-shadow:var(--shadow-md); }

/* shared long-form content styling */
.doc__content,.prose__content,.qa__body{ font-size:17px; line-height:1.7; }
.doc__content > h2,.prose__content > h2{ font-size:1.75rem; margin:2em 0 .6em; padding-top:.2em; }
.doc__content > h3,.prose__content > h3{ font-size:1.375rem; font-weight:650; margin:1.8em 0 .5em; }
.doc__content > h4,.prose__content > h4{ font-size:1.125rem; font-weight:650; margin:1.6em 0 .4em; }
.doc__content :where(ul,ol),.prose__content :where(ul,ol){ margin:0 0 1.1em; padding-left:1.4em; }
.doc__content li,.prose__content li{ margin:.35em 0; }
.doc__content img,.prose__content img{ border-radius:var(--radius); }
.doc__content a,.prose__content a{ font-weight:500; }

/* headings get a hover anchor affordance */
.doc__content > :where(h2,h3,h4){ scroll-margin-top:calc(var(--topbar-h) + 16px); position:relative; }

/* blockquote */
.doc__content blockquote,.prose__content blockquote{ margin:1.4em 0; padding:2px 0 2px 20px; border-left:3px solid var(--accent-soft); color:var(--ink-muted); font-size:1.05em; }
.is-style-highlight{ border-left-color:var(--accent) !important; background:var(--accent-soft); border-radius:var(--radius); padding:16px 20px; }

/* inline code + code blocks */
:where(.doc__content,.prose__content,.qa__body) code{ background:var(--surface-subtle); border:1px solid var(--border); border-radius:6px; padding:.12em .4em; font-size:.88em; }
:where(.doc__content,.prose__content) pre{ background:var(--surface-subtle); border:1px solid var(--border); border-radius:var(--radius);
  padding:16px 18px; overflow-x:auto; font-size:14px; line-height:1.7; margin:0 0 1.2em; }
:where(.doc__content,.prose__content) pre code{ background:none; border:0; padding:0; font-size:inherit; }
.wp-block-code{ background:var(--surface-subtle); border:1px solid var(--border); border-radius:var(--radius); }

/* tables */
:where(.doc__content,.prose__content) table{ width:100%; border-collapse:collapse; font-size:15px; margin:0 0 1.2em; }
:where(.doc__content,.prose__content) :where(th,td){ text-align:left; padding:11px 16px; border-bottom:1px solid var(--border); }
:where(.doc__content,.prose__content) thead th{ background:var(--surface-subtle); font-family:var(--display); font-weight:650; font-size:14px; }
.wp-block-table{ overflow-x:auto; }

/* figures / captions / screenshots */
:where(.doc__content,.prose__content) figure{ margin:1.6em 0; }
:where(.doc__content,.prose__content) figcaption{ text-align:center; font-size:13.5px; color:var(--ink-muted); margin-top:10px; }
.wp-block-image.is-style-screenshot img{ border-radius:var(--radius); border:1px solid var(--border); box-shadow:var(--shadow-md); }
.wp-block-image img{ border-radius:var(--radius); }

/* ---------- Callouts (block styles on core/group) ---------- */
.is-style-callout-note,.is-style-callout-tip,.is-style-callout-warning,.is-style-callout-danger{
  border-radius:var(--radius); padding:16px 20px; margin:1.4em 0; border:1px solid var(--border); border-left-width:4px; }
.is-style-callout-note :last-child,.is-style-callout-tip :last-child,.is-style-callout-warning :last-child,.is-style-callout-danger :last-child{ margin-bottom:0; }
.is-style-callout-note{ background:var(--note-soft); border-left-color:var(--note); }
.is-style-callout-tip{ background:var(--tip-soft); border-left-color:var(--tip); }
.is-style-callout-warning{ background:var(--warn-soft); border-left-color:var(--warn); }
.is-style-callout-danger{ background:var(--danger-soft); border-left-color:var(--danger); }
.is-style-callout-note strong:first-child{ color:var(--note); }
.is-style-callout-tip strong:first-child{ color:var(--tip); }
.is-style-callout-warning strong:first-child{ color:var(--warn); }
.is-style-callout-danger strong:first-child{ color:var(--danger); }

/* ---------- Numbered steps (list block style) ---------- */
.is-style-steps{ list-style:none; counter-reset:step; padding-left:0; margin:1.4em 0; display:flex; flex-direction:column; gap:16px; }
.is-style-steps > li{ position:relative; padding-left:52px; min-height:36px; }
.is-style-steps > li::before{ counter-increment:step; content:counter(step); position:absolute; left:0; top:-2px;
  width:34px; height:34px; border-radius:50%; background:var(--accent); color:var(--on-accent);
  font-family:var(--display); font-weight:700; display:grid; place-items:center; }
.is-style-steps > li:not(:last-child)::after{ content:""; position:absolute; left:17px; top:38px; bottom:-18px; width:2px; background:var(--border); }

/* ---------- Doc footer: helpful + prev/next ---------- */
.doc__footer{ margin-top:var(--sp-8); display:flex; flex-direction:column; gap:var(--sp-5); }
.helpful{ display:flex; align-items:center; gap:16px; flex-wrap:wrap; padding:16px 20px; background:var(--surface); border:1px solid var(--border); border-radius:var(--radius); }
.helpful__q{ font-family:var(--display); font-weight:650; }
.helpful__actions{ display:flex; gap:10px; }
.helpful.is-done .helpful__q,.helpful.is-done .helpful__actions{ display:none; }
.helpful__thanks{ margin:0; color:var(--tip); font-weight:600; }

.pagenav{ display:grid; grid-template-columns:1fr 1fr; gap:var(--sp-4); }
.pagenav__link{ display:flex; flex-direction:column; gap:4px; padding:16px 18px; border:1px solid var(--border); border-radius:var(--radius);
  background:var(--surface); text-decoration:none; color:var(--ink); transition:border-color .15s var(--ease), box-shadow .15s var(--ease); }
.pagenav__link:hover{ border-color:var(--accent); box-shadow:var(--shadow-sm); text-decoration:none; }
.pagenav__label{ display:inline-flex; align-items:center; gap:6px; font-size:13px; color:var(--ink-subtle); font-weight:600; }
.pagenav__title{ font-family:var(--display); font-weight:650; color:var(--accent-strong); }
.pagenav__next{ text-align:right; }
.pagenav__next .pagenav__label{ justify-content:flex-end; }

/* ---------- Index / groups ---------- */
.index-groups{ display:flex; flex-direction:column; gap:var(--sp-7); }
.index-group__title{ font-size:1.3rem; margin-bottom:var(--sp-3); padding-bottom:10px; border-bottom:1px solid var(--border); }
.index-group__title a{ text-decoration:none; color:var(--ink); }
.index-group__title a:hover{ color:var(--accent-strong); }
.index-group__list{ list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(auto-fill,minmax(240px,1fr)); gap:4px; }
.index-group__list a{ display:flex; align-items:center; gap:8px; padding:8px 12px; border-radius:var(--radius-sm); color:var(--ink-muted); text-decoration:none; }
.index-group__list a:hover{ background:var(--surface-subtle); color:var(--accent-strong); }
.index-group__list .ico{ color:var(--ink-subtle); }

/* ---------- FAQ ---------- */
.faq-page__inner{ max-width:760px; margin:0 auto; padding:var(--sp-7) var(--sp-5) var(--sp-8); }
.faq-page__title{ font-size:clamp(2rem,1.6rem+1.6vw,2.6rem); letter-spacing:-.02em; }
.faq-page__lead{ font-size:19px; color:var(--ink-muted); margin-top:14px; }
.faq-page__search{ margin-top:var(--sp-5); max-width:480px; }
.faq-page__header{ margin-bottom:var(--sp-7); }
.faq-group{ margin-bottom:var(--sp-7); }
.faq-group__title{ font-size:1.3rem; margin-bottom:var(--sp-4); }
.faq-list{ display:flex; flex-direction:column; gap:10px; }
.qa{ background:var(--surface); border:1px solid var(--border); border-radius:var(--radius); overflow:hidden; transition:border-color .2s var(--ease), box-shadow .2s var(--ease); }
.qa[open]{ border-color:var(--border-strong); box-shadow:var(--shadow-sm); }
.qa summary{ list-style:none; cursor:pointer; padding:16px 18px; display:flex; align-items:center; gap:12px; font-family:var(--display); font-weight:600; font-size:1.02rem; }
.qa summary::-webkit-details-marker{ display:none; }
.qa summary span:first-child{ flex:1; }
.qa__chev{ color:var(--ink-subtle); display:inline-flex; transition:transform .22s var(--ease); flex:none; }
.qa[open] .qa__chev{ transform:rotate(180deg); color:var(--accent-strong); }
.qa__body{ padding:0 18px 18px; color:var(--ink-muted); }
.qa__body > :last-child{ margin-bottom:0; }
.faq-page__cta{ text-align:center; padding-top:var(--sp-5); border-top:1px solid var(--border); margin-top:var(--sp-6); }
.faq-page__cta p{ color:var(--ink-muted); margin-bottom:12px; }

/* ---------- Prose pages / search / results ---------- */
.prose-page__inner{ max-width:760px; margin:0 auto; padding:var(--sp-7) var(--sp-5) var(--sp-8); }
.search-head__form{ margin-top:var(--sp-4); max-width:480px; }
.search-count{ color:var(--ink-muted); font-size:14px; margin-bottom:var(--sp-4); }
.result-list{ display:flex; flex-direction:column; gap:10px; }
.result{ display:flex; flex-direction:column; gap:4px; padding:16px 18px; border:1px solid var(--border); border-radius:var(--radius);
  background:var(--surface); text-decoration:none; color:var(--ink); transition:border-color .15s var(--ease), box-shadow .15s var(--ease); }
.result:hover{ border-color:var(--accent); box-shadow:var(--shadow-sm); text-decoration:none; }
.result__type{ font-size:11.5px; font-weight:600; letter-spacing:.05em; text-transform:uppercase; color:var(--accent-strong); }
.result__title{ font-family:var(--display); font-weight:650; font-size:1.1rem; }
.result__excerpt{ color:var(--ink-muted); font-size:15px; }
.pagination{ margin-top:var(--sp-6); }
.pagination .page-numbers{ display:inline-flex; min-width:38px; height:38px; align-items:center; justify-content:center; padding:0 10px; border:1px solid var(--border); border-radius:var(--radius-sm); text-decoration:none; color:var(--ink); margin:0 2px; }
.pagination .page-numbers.current{ background:var(--accent); color:var(--on-accent); border-color:var(--accent); }

/* ---------- Empty states ---------- */
.empty-state{ text-align:center; padding:var(--sp-8) var(--sp-5); background:var(--surface); border:1px solid var(--border); border-radius:var(--radius-lg); }
.empty-state h1,.empty-state h2{ margin-bottom:10px; }
.empty-state p{ color:var(--ink-muted); max-width:44ch; margin:0 auto 20px; }
.empty-state__search{ max-width:420px; margin:0 auto 20px; }
.empty-state--404 .eyebrow{ font-size:15px; }

/* ---------- Footer ---------- */
.site-footer{ margin-top:var(--sp-8); border-top:1px solid var(--border); background:var(--surface-subtle); }
.site-footer__inner{ max-width:var(--maxw); margin:0 auto; padding:var(--sp-7) var(--sp-5); display:flex; flex-wrap:wrap; gap:var(--sp-6); justify-content:space-between; }
.site-footer__brand{ display:flex; gap:12px; align-items:flex-start; }
.site-footer__tag{ color:var(--ink-muted); font-size:14px; margin:4px 0 0; max-width:40ch; }
.site-footer__nav-list{ list-style:none; margin:0; padding:0; display:flex; flex-wrap:wrap; gap:8px 20px; }
.site-footer__nav-list a{ color:var(--ink-muted); text-decoration:none; font-size:15px; }
.site-footer__nav-list a:hover{ color:var(--accent-strong); }
.site-footer__bar{ max-width:var(--maxw); margin:0 auto; padding:16px var(--sp-5); border-top:1px solid var(--border); display:flex; justify-content:space-between; align-items:center; gap:12px; font-size:14px; color:var(--ink-subtle); }
.site-footer__bar p{ margin:0; }
.to-top{ display:inline-flex; align-items:center; gap:6px; background:none; border:0; color:var(--ink-muted); cursor:pointer; font:inherit; font-size:14px; }
.to-top .ico{ transform:rotate(-90deg); }
.to-top:hover{ color:var(--accent-strong); }

/* ---------- Code copy button (JS-injected) ---------- */
.gk-code{ position:relative; }
.gk-copy{ position:absolute; top:10px; right:10px; font-family:var(--mono); font-size:12px; background:var(--surface);
  border:1px solid var(--border); border-radius:7px; padding:4px 10px; color:var(--ink-muted); cursor:pointer; opacity:0; transition:opacity .15s var(--ease); }
.gk-code:hover .gk-copy,.gk-copy:focus-visible{ opacity:1; }
.gk-copy:hover{ color:var(--ink); border-color:var(--border-strong); }

/* ---------- Lightbox (JS-injected) ---------- */
.gk-lightbox{ position:fixed; inset:0; z-index:150; display:grid; place-items:center; padding:5vmin;
  background:rgba(20,16,24,.8); backdrop-filter:blur(4px); opacity:0; cursor:zoom-out; transition:opacity .2s var(--ease); }
.gk-lightbox.is-open{ opacity:1; }
.gk-lightbox img{ max-width:100%; max-height:90vh; border-radius:var(--radius); box-shadow:var(--shadow-lg); border:1px solid var(--border-strong); }

/* ---------- Responsive ---------- */
@media (max-width:1280px){
  .docs-shell{ grid-template-columns:264px minmax(0,1fr); }
  .doc-toc-col{ display:none; }
}
@media (max-width:1024px){
  .topbar__burger{ display:inline-flex; }
  .topnav{ display:none; }
  .docs-shell{ grid-template-columns:minmax(0,1fr); }
  .docs-sidebar{ display:none; }
  .doc{ padding-top:var(--sp-6); }
}
@media (max-width:680px){
  .topbar__search{ display:none; }
  .topbar__search-btn{ display:inline-flex; }
  .home-section__head{ flex-direction:column; align-items:flex-start; gap:8px; }
  .pagenav{ grid-template-columns:1fr; }
  .site-footer__inner{ flex-direction:column; gap:var(--sp-5); }
}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{ animation-duration:.001ms !important; transition-duration:.001ms !important; scroll-behavior:auto !important; }
}