/* =============================================================================
   zegit-zoo — Documentation kit
   -----------------------------------------------------------------------------
   The documentation surface for zegit.dev/documentation. Built ONLY on the
   tokens in colors_and_type.css + the component layer in components.css — it
   never redefines a token value. Derived from the marketing / control-plane /
   terminal kits so it reads as the same product:
     - dark "terminal" canvas by default (body.term), light supported
     - the verified-green brand accent for wayfinding and active state
     - IBM Plex superfamily; mono for code/CLI, serif for the occasional aside
     - the zoo accents (meerkat sand · mongoose indigo · zegit green) used as
       per-component wayfinding, exactly as the landing page uses them

   Layout is the classic three-column docs frame:
     [ sidebar nav ] [ article + prose ] [ on-page table of contents ]
   collapsing to a single column with a slide-in sidebar on small screens.
   Prefix for everything here is `dk-` (documentation kit).
   ============================================================================= */

/* ---- Reset / base --------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--n-950);
  color: var(--fg);
  font: var(--text-body);
  font-family: var(--font-sans);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
a { color: inherit; text-decoration: none; }
img, svg { display: block; }
:focus-visible { outline: 3px solid var(--focus-ring); outline-offset: 2px; border-radius: var(--r-xs); }

/* Scroll padding so in-page anchors clear the sticky top bar */
html { scroll-padding-top: 88px; }

/* =============================================================================
   TOP BAR — full-width sticky header above the three columns
   ============================================================================= */
.dk-topbar {
  position: sticky;
  top: 0;
  z-index: 60;
  height: 60px;
  display: flex;
  align-items: center;
  gap: var(--sp-5);
  padding: 0 var(--sp-6);
  background: color-mix(in oklch, var(--n-950) 86%, transparent);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--hairline);
}

.dk-topbar-brand {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  flex-shrink: 0;
}
/* "docs" pill next to the wordmark — signals this is the docs surface */
.dk-docs-tag {
  font: var(--text-eyebrow);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--brand-400);
  border: 1px solid color-mix(in oklch, var(--brand-500) 38%, transparent);
  background: color-mix(in oklch, var(--brand-500) 12%, transparent);
  padding: 3px 8px;
  border-radius: var(--r-sm);
  line-height: 1;
}

.dk-topbar-spacer { flex: 1 1 auto; }

.dk-topbar-links {
  display: flex;
  align-items: center;
  gap: var(--sp-6);
  list-style: none;
  margin: 0;
  padding: 0;
}
.dk-topbar-links a {
  font-size: 0.875rem;
  color: var(--fg-secondary);
  transition: color 0.14s ease;
  white-space: nowrap;
}
.dk-topbar-links a:hover,
.dk-topbar-links a.is-active { color: var(--fg); }

/* Hamburger — only on small screens */
.dk-nav-toggle {
  display: none;
  align-items: center;
  justify-content: center;
  width: 38px; height: 38px;
  border-radius: var(--r-md);
  border: 1px solid var(--border);
  background: var(--bg-raised);
  color: var(--fg);
  cursor: pointer;
}
.dk-nav-toggle i { width: 18px; height: 18px; }

/* =============================================================================
   SEARCH — a real client-side box; styled to look at home on the dark canvas
   ============================================================================= */
.dk-search {
  position: relative;
  flex: 0 1 300px;
  max-width: 300px;
}
.dk-search-input {
  width: 100%;
  height: 38px;
  padding: 0 36px 0 34px;
  font: 0.875rem/1 var(--font-sans);
  color: var(--fg);
  background: var(--bg-sunken);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  transition: border-color 0.14s ease, box-shadow 0.14s ease;
}
.dk-search-input::placeholder { color: var(--fg-faint); }
.dk-search-input:focus {
  outline: none;
  border-color: var(--primary);
  box-shadow: 0 0 0 3px var(--focus-ring);
}
.dk-search-ic {
  position: absolute;
  left: 11px; top: 50%; transform: translateY(-50%);
  width: 15px; height: 15px;
  color: var(--fg-faint);
  pointer-events: none;
}
.dk-search-kbd {
  position: absolute;
  right: 9px; top: 50%; transform: translateY(-50%);
  font: 600 0.6875rem/1 var(--font-mono);
  color: var(--fg-faint);
  border: 1px solid var(--border);
  border-radius: var(--r-xs);
  padding: 3px 5px;
  pointer-events: none;
}
/* Results dropdown */
.dk-search-results {
  position: absolute;
  top: calc(100% + 6px);
  left: 0; right: 0;
  max-height: min(60vh, 460px);
  overflow-y: auto;
  background: var(--bg-raised);
  border: 1px solid var(--border-strong);
  border-radius: var(--r-md);
  box-shadow: var(--shadow-lg);
  padding: var(--sp-1);
  display: none;
  z-index: 70;
}
.dk-search-results.is-open { display: block; }
.dk-search-hit {
  display: block;
  padding: 9px 11px;
  border-radius: var(--r-sm);
  cursor: pointer;
}
.dk-search-hit:hover,
.dk-search-hit.is-active { background: var(--bg-hover); }
.dk-search-hit .h {
  font: 500 0.875rem/1.3 var(--font-sans);
  color: var(--fg);
}
.dk-search-hit .c {
  font: 400 0.75rem/1.4 var(--font-mono);
  color: var(--fg-muted);
  margin-top: 2px;
}
.dk-search-hit mark { background: var(--primary-tint); color: var(--primary); border-radius: 2px; padding: 0 1px; }
.dk-search-empty {
  padding: 14px 11px;
  font-size: 0.8125rem;
  color: var(--fg-muted);
}

/* =============================================================================
   SHELL GRID — sidebar | article | toc
   ============================================================================= */
.dk-shell {
  display: grid;
  grid-template-columns: 264px minmax(0, 1fr) 220px;
  gap: 0;
  max-width: 1480px;
  margin: 0 auto;
  align-items: start;
}

/* =============================================================================
   SIDEBAR — grouped navigation
   ============================================================================= */
.dk-sidebar {
  position: sticky;
  top: 60px;
  align-self: start;
  height: calc(100vh - 60px);
  overflow-y: auto;
  padding: var(--sp-6) var(--sp-4) var(--sp-10) var(--sp-6);
  border-right: 1px solid var(--hairline);
  scrollbar-width: thin;
}
.dk-sidebar::-webkit-scrollbar { width: 8px; }
.dk-sidebar::-webkit-scrollbar-thumb { background: var(--n-800); border-radius: 999px; }

.dk-nav-group { margin-bottom: var(--sp-6); }
.dk-nav-group h6 {
  font: var(--text-eyebrow);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--fg-muted);
  margin: 0 0 var(--sp-3);
  padding: 0 var(--sp-3);
  display: flex;
  align-items: center;
  gap: var(--sp-2);
}
/* tiny zoo accent dot next to a component group header */
.dk-nav-group h6 .dot { width: 7px; height: 7px; border-radius: 50%; flex: none; }
.dk-nav-group h6 .dot--meerkat  { background: var(--meerkat); }
.dk-nav-group h6 .dot--mongoose { background: var(--mongoose); }
.dk-nav-group h6 .dot--zegit    { background: var(--zegit); }

.dk-nav-group ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 1px; }
.dk-nav-group a {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  padding: 6px var(--sp-3);
  border-radius: var(--r-sm);
  font: 0.875rem/1.4 var(--font-sans);
  color: var(--fg-secondary);
  border-left: 2px solid transparent;
  transition: color 0.12s ease, background 0.12s ease, border-color 0.12s ease;
}
.dk-nav-group a:hover { color: var(--fg); background: var(--bg-hover); }
.dk-nav-group a.is-active {
  color: var(--brand-400);
  background: color-mix(in oklch, var(--brand-500) 10%, transparent);
  border-left-color: var(--brand-400);
  font-weight: 500;
}
.dk-nav-group a .lc { width: 15px; height: 15px; color: var(--fg-faint); flex: none; }
.dk-nav-group a:hover .lc,
.dk-nav-group a.is-active .lc { color: currentColor; }

/* sidebar footer chips (version / repo) */
.dk-sidebar-meta {
  margin-top: var(--sp-8);
  padding-top: var(--sp-5);
  border-top: 1px solid var(--hairline);
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
  padding-left: var(--sp-3);
}
.dk-sidebar-meta .row { display: flex; align-items: center; gap: var(--sp-2); font: 0.75rem/1.3 var(--font-mono); color: var(--fg-muted); }
.dk-sidebar-meta .row i { width: 14px; height: 14px; color: var(--fg-faint); }

/* =============================================================================
   ARTICLE — the prose column
   ============================================================================= */
.dk-article {
  min-width: 0;
  padding: var(--sp-8) var(--sp-12) var(--sp-20);
  max-width: 860px;
}

/* breadcrumb */
.dk-breadcrumb {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--sp-2);
  font: var(--text-caption);
  color: var(--fg-muted);
  margin-bottom: var(--sp-5);
}
.dk-breadcrumb a { color: var(--fg-muted); transition: color 0.12s ease; }
.dk-breadcrumb a:hover { color: var(--fg-secondary); }
.dk-breadcrumb .sep { color: var(--fg-faint); }
.dk-breadcrumb .cur { color: var(--fg-secondary); }

/* page eyebrow + title block */
.dk-page-eyebrow {
  font: var(--text-eyebrow);
  letter-spacing: var(--eyebrow-tracking);
  text-transform: uppercase;
  color: var(--brand-400);
  margin: 0 0 var(--sp-2);
}
.dk-article h1 {
  font: var(--text-h1);
  letter-spacing: -0.025em;
  color: var(--fg);
  margin: 0;
}
.dk-lead {
  font: var(--text-body-lg);
  color: var(--fg-secondary);
  margin: var(--sp-4) 0 0;
  max-width: 64ch;
  text-wrap: pretty;
}

/* =============================================================================
   PROSE — long-form documentation body
   Scope everything under .dk-prose so it never leaks into chrome.
   ============================================================================= */
.dk-prose { margin-top: var(--sp-8); }
.dk-prose > * + * { margin-top: var(--sp-4); }

.dk-prose h2 {
  font: var(--text-h2);
  letter-spacing: -0.015em;
  color: var(--fg);
  margin: var(--sp-12) 0 0;
  padding-top: var(--sp-2);
  scroll-margin-top: 84px;
}
.dk-prose h3 {
  font: var(--text-h3);
  letter-spacing: -0.01em;
  color: var(--fg);
  margin: var(--sp-8) 0 0;
  scroll-margin-top: 84px;
}
.dk-prose h4 {
  font: var(--text-h4);
  color: var(--fg);
  margin: var(--sp-6) 0 0;
  scroll-margin-top: 84px;
}
/* anchor link that appears on heading hover */
.dk-prose h2, .dk-prose h3 { position: relative; }
.dk-prose .dk-anchor {
  position: absolute;
  left: -1.1em;
  top: 0;
  opacity: 0;
  color: var(--fg-faint);
  font-weight: 400;
  transition: opacity 0.12s ease, color 0.12s ease;
  padding-right: 0.3em;
}
.dk-prose h2:hover .dk-anchor,
.dk-prose h3:hover .dk-anchor { opacity: 1; }
.dk-prose .dk-anchor:hover { color: var(--brand-400); }

.dk-prose p {
  font: var(--text-body);
  color: var(--fg-secondary);
  line-height: 1.7;
  text-wrap: pretty;
}
.dk-prose a:not(.dk-card):not(.dk-btn) {
  color: var(--link);
  text-decoration: underline;
  text-decoration-color: color-mix(in oklch, var(--link) 40%, transparent);
  text-underline-offset: 2px;
  transition: text-decoration-color 0.12s ease;
}
.dk-prose a:not(.dk-card):not(.dk-btn):hover { text-decoration-color: var(--link); }

.dk-prose strong { color: var(--fg); font-weight: 600; }
.dk-prose em { font-style: italic; }

/* lists */
.dk-prose ul, .dk-prose ol { padding-left: var(--sp-6); color: var(--fg-secondary); }
.dk-prose li { line-height: 1.7; margin-top: var(--sp-2); }
.dk-prose li::marker { color: var(--fg-faint); }
.dk-prose ul li::marker { color: var(--brand-400); }

/* inline code */
.dk-prose :not(pre) > code,
code.dk-inline {
  font: var(--text-code-sm);
  background: var(--bg-sunken);
  border: 1px solid var(--hairline);
  border-radius: var(--r-xs);
  padding: 1px 5px;
  color: var(--brand-300);
  word-break: break-word;
}
.dk-prose blockquote {
  margin: var(--sp-5) 0;
  padding: var(--sp-2) var(--sp-5);
  border-left: 3px solid var(--border-strong);
  color: var(--fg-muted);
  font-style: italic;
}

/* horizontal rule */
.dk-prose hr { border: none; border-top: 1px solid var(--hairline); margin: var(--sp-10) 0; }

/* =============================================================================
   CODE BLOCKS — terminal-grounded, with a copy button
   ============================================================================= */
.dk-code {
  position: relative;
  margin: var(--sp-5) 0;
  border-radius: var(--r-lg);
  overflow: hidden;
  border: 1px solid var(--n-700);
  box-shadow: var(--shadow-term);
}
.dk-code-bar {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  background: var(--n-850);
  border-bottom: 1px solid var(--n-700);
  padding: 8px var(--sp-4);
}
.dk-code-bar .dots { display: flex; gap: 6px; }
.dk-code-bar .dots i { width: 10px; height: 10px; border-radius: 50%; display: block; }
.dk-code-bar .dots .x { background: #e06c5e; } .dk-code-bar .dots .y { background: #e0b35e; } .dk-code-bar .dots .z { background: #62c073; }
.dk-code-bar .label {
  font: 400 0.75rem/1 var(--font-mono);
  color: var(--n-400);
  margin-left: var(--sp-2);
}
.dk-code-bar .lang {
  margin-left: auto;
  font: var(--text-eyebrow);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--fg-faint);
}
.dk-code pre {
  margin: 0;
  padding: var(--sp-5) var(--sp-5);
  background: #0c0e13;
  overflow-x: auto;
  font: var(--text-code);
  color: var(--n-300);
  tab-size: 2;
}
.dk-code pre code { font: inherit; background: none; border: none; padding: 0; color: inherit; }

/* copy button */
.dk-copy {
  position: absolute;
  top: 7px; right: 9px;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  height: 28px;
  padding: 0 9px;
  font: 500 0.75rem/1 var(--font-sans);
  color: var(--n-400);
  background: color-mix(in oklch, var(--n-800) 70%, transparent);
  border: 1px solid var(--n-700);
  border-radius: var(--r-sm);
  cursor: pointer;
  opacity: 0;
  transition: opacity 0.14s ease, color 0.14s ease, border-color 0.14s ease;
}
.dk-code:hover .dk-copy, .dk-copy:focus-visible { opacity: 1; }
.dk-copy:hover { color: var(--brand-300); border-color: var(--brand-400); }
.dk-copy i { width: 13px; height: 13px; }
.dk-copy.is-copied { color: var(--green-400); border-color: var(--green-400); }

/* syntax-ish token colours (applied via spans; mirror the landing page set) */
.dk-code .c-cmd  { color: var(--brand-300); }   /* prompt / command name      */
.dk-code .c-flag { color: var(--amber-400); }   /* flags / options            */
.dk-code .c-str  { color: var(--green-400); }   /* strings                    */
.dk-code .c-key  { color: var(--blue-400); }    /* keys / properties          */
.dk-code .c-num  { color: var(--mongoose-dim); }/* numbers                    */
.dk-code .c-cmt  { color: var(--n-500); font-style: italic; }
.dk-code .c-ok   { color: var(--green-400); }
.dk-code .c-warn { color: var(--amber-400); }
.dk-code .c-err  { color: var(--red-400); }
.dk-code .c-dim  { color: var(--n-500); }

/* =============================================================================
   CALLOUTS / ADMONITIONS
   ============================================================================= */
.dk-callout {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: var(--sp-3);
  margin: var(--sp-5) 0;
  padding: var(--sp-4) var(--sp-5);
  border: 1px solid var(--border);
  border-left-width: 3px;
  border-radius: var(--r-md);
  background: var(--bg-raised);
}
.dk-callout .ic { width: 20px; height: 20px; margin-top: 2px; }
.dk-callout .ic svg { width: 100%; height: 100%; }
.dk-callout .body { min-width: 0; }
.dk-callout .body > *:first-child { margin-top: 0; }
.dk-callout .title {
  font: 600 0.875rem/1.4 var(--font-sans);
  color: var(--fg);
  margin: 0 0 2px;
  display: flex; align-items: center; gap: 6px;
}
.dk-callout p { font-size: 0.875rem; line-height: 1.6; color: var(--fg-secondary); margin: 2px 0 0; }
.dk-callout code { font-size: 0.8125rem; }

.dk-callout--note   { border-left-color: var(--blue-400);  }
.dk-callout--note   .ic { color: var(--blue-400); }
.dk-callout--tip    { border-left-color: var(--brand-400); }
.dk-callout--tip    .ic { color: var(--brand-400); }
.dk-callout--warn   { border-left-color: var(--amber-400); }
.dk-callout--warn   .ic { color: var(--amber-400); }
.dk-callout--danger { border-left-color: var(--red-400);   }
.dk-callout--danger .ic { color: var(--red-400); }
.dk-callout--gotcha { border-left-color: var(--meerkat);   }
.dk-callout--gotcha .ic { color: var(--meerkat); }

/* =============================================================================
   TABLES — command references, error codes, schema keys
   ============================================================================= */
.dk-table-wrap {
  margin: var(--sp-5) 0;
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  overflow: hidden;
  overflow-x: auto;
}
.dk-table {
  width: 100%;
  border-collapse: collapse;
  font: 0.875rem/1.5 var(--font-sans);
  min-width: 520px;
}
.dk-table thead th {
  font: var(--text-eyebrow);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--fg-muted);
  text-align: left;
  padding: 11px var(--sp-4);
  background: var(--bg-sunken);
  border-bottom: 1px solid var(--border);
  white-space: nowrap;
}
.dk-table td {
  padding: 11px var(--sp-4);
  border-bottom: 1px solid var(--hairline);
  color: var(--fg-secondary);
  vertical-align: top;
}
.dk-table tr:last-child td { border-bottom: none; }
.dk-table tbody tr:hover td { background: var(--bg-hover); }
.dk-table code {
  font: var(--text-code-sm);
  color: var(--brand-300);
  background: var(--bg-sunken);
  border: 1px solid var(--hairline);
  border-radius: var(--r-xs);
  padding: 1px 5px;
  white-space: nowrap;
}
.dk-table td.mono { font-family: var(--font-mono); color: var(--fg); white-space: nowrap; }

/* =============================================================================
   CARDS — "start here" / cross-link grids
   ============================================================================= */
.dk-card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: var(--sp-4);
  margin: var(--sp-6) 0;
}
.dk-card {
  display: block;
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  padding: var(--sp-5);
  background: var(--bg-raised);
  transition: border-color 0.16s ease, transform 0.16s ease, background 0.16s ease;
}
.dk-card:hover { border-color: var(--border-strong); transform: translateY(-2px); }
.dk-card .ic {
  width: 38px; height: 38px;
  border-radius: var(--r-md);
  display: grid; place-items: center;
  margin-bottom: var(--sp-3);
  background: var(--primary-tint);
  color: var(--brand-400);
}
.dk-card .ic i { width: 19px; height: 19px; }
.dk-card h3 { font: 600 1rem/1.3 var(--font-sans); color: var(--fg); margin: 0; letter-spacing: -0.01em; }
.dk-card p { font-size: 0.8125rem; line-height: 1.55; color: var(--fg-secondary); margin: var(--sp-2) 0 0; }
.dk-card .arrow { margin-top: var(--sp-3); display: inline-flex; align-items: center; gap: 5px; font: 500 0.8125rem/1 var(--font-sans); color: var(--brand-400); }
.dk-card .arrow i { width: 13px; height: 13px; }

/* component accent variants for cards (zoo wayfinding) */
.dk-card--meerkat  .ic { background: oklch(0.74 0.125 66 / 0.16);  color: var(--meerkat); }
.dk-card--mongoose .ic { background: oklch(0.62 0.155 282 / 0.16); color: var(--mongoose-dim); }
.dk-card--zegit    .ic { background: oklch(0.60 0.130 158 / 0.16); color: var(--zegit-dim); }
.dk-card--meerkat:hover  { border-color: color-mix(in oklch, var(--meerkat) 50%, var(--border)); }
.dk-card--mongoose:hover { border-color: color-mix(in oklch, var(--mongoose) 50%, var(--border)); }
.dk-card--zegit:hover    { border-color: color-mix(in oklch, var(--zegit) 50%, var(--border)); }

/* =============================================================================
   BADGES / CHIPS reused for status, decisions, envelopes
   (extends the shared .zz-chip from components.css with a few doc-only ones)
   ============================================================================= */
.dk-badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font: 600 0.6875rem/1 var(--font-mono);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  padding: 4px 8px;
  border-radius: var(--r-sm);
  border: 1px solid var(--border);
  color: var(--fg-muted);
  white-space: nowrap;
  vertical-align: middle;
}
.dk-badge--brand   { color: var(--brand-400);  border-color: color-mix(in oklch, var(--brand-500) 45%, var(--border)); }
.dk-badge--ok      { color: var(--ok-fg);       background: var(--ok-bg);     border-color: transparent; }
.dk-badge--warn    { color: var(--warn-fg);     background: var(--warn-bg);   border-color: transparent; }
.dk-badge--danger  { color: var(--danger-fg);   background: var(--danger-bg); border-color: transparent; }
.dk-badge--info    { color: var(--info-fg);     background: var(--info-bg);   border-color: transparent; }
.dk-badge--planned { color: var(--fg-muted); }

/* envelope ladder, reused from the landing page idiom */
.dk-envelope {
  display: flex; align-items: center; flex-wrap: wrap;
  gap: var(--sp-2);
  margin: var(--sp-5) 0;
}
.dk-envelope .step {
  font: 600 0.6875rem/1 var(--font-mono);
  letter-spacing: 0.04em; text-transform: uppercase;
  padding: 5px 10px; border-radius: var(--r-sm);
  display: inline-flex; align-items: center; gap: 6px;
}
.dk-envelope .step i { width: 13px; height: 13px; }
.dk-envelope .step--unsigned  { color: var(--info-fg);  background: var(--info-bg); }
.dk-envelope .step--validated { color: var(--warn-fg);  background: var(--warn-bg); }
.dk-envelope .step--signed    { color: var(--ok-fg);    background: var(--ok-bg); }
.dk-envelope .arrow { color: var(--fg-faint); display: inline-flex; }
.dk-envelope .arrow i { width: 16px; height: 16px; }

/* =============================================================================
   STEPPER — numbered sequences (quickstarts)
   ============================================================================= */
.dk-steps { list-style: none; counter-reset: dkstep; margin: var(--sp-6) 0; padding: 0; }
.dk-steps > li {
  position: relative;
  counter-increment: dkstep;
  padding: 0 0 var(--sp-6) var(--sp-10);
  border-left: 1px solid var(--hairline);
  margin-left: 13px;
}
.dk-steps > li:last-child { border-left-color: transparent; padding-bottom: 0; }
.dk-steps > li::before {
  content: counter(dkstep);
  position: absolute;
  left: -13px; top: -2px;
  width: 26px; height: 26px;
  border-radius: 50%;
  display: grid; place-items: center;
  font: 600 0.8125rem/1 var(--font-mono);
  color: var(--primary-fg);
  background: var(--brand-400);
}
.dk-steps > li h4 { margin: 0 0 var(--sp-2); font: var(--text-h4); color: var(--fg); }
.dk-steps > li > *:last-child { margin-bottom: 0; }

/* =============================================================================
   PAGER — prev / next at the foot of an article
   ============================================================================= */
.dk-pager {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--sp-4);
  margin-top: var(--sp-12);
  padding-top: var(--sp-6);
  border-top: 1px solid var(--hairline);
}
.dk-pager a {
  display: flex;
  flex-direction: column;
  gap: 3px;
  padding: var(--sp-4) var(--sp-5);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  transition: border-color 0.14s ease, background 0.14s ease;
}
.dk-pager a:hover { border-color: var(--border-strong); background: var(--bg-hover); }
.dk-pager .dir { font: var(--text-caption); color: var(--fg-muted); display: inline-flex; align-items: center; gap: 5px; }
.dk-pager .dir i { width: 13px; height: 13px; }
.dk-pager .ttl { font: 500 0.9375rem/1.3 var(--font-sans); color: var(--fg); }
.dk-pager .next { text-align: right; }
.dk-pager .next .dir { justify-content: flex-end; }

/* =============================================================================
   ON-PAGE TOC — the right rail
   ============================================================================= */
.dk-toc {
  position: sticky;
  top: 60px;
  align-self: start;
  height: calc(100vh - 60px);
  overflow-y: auto;
  padding: var(--sp-8) var(--sp-5) var(--sp-10) var(--sp-3);
}
.dk-toc h6 {
  font: var(--text-eyebrow);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--fg-muted);
  margin: 0 0 var(--sp-3);
}
.dk-toc ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 1px; }
.dk-toc a {
  display: block;
  padding: 4px var(--sp-3);
  border-left: 2px solid var(--hairline);
  font: 0.8125rem/1.45 var(--font-sans);
  color: var(--fg-muted);
  transition: color 0.12s ease, border-color 0.12s ease;
}
.dk-toc a:hover { color: var(--fg-secondary); }
.dk-toc a.lvl-3 { padding-left: var(--sp-5); }
.dk-toc a.is-active { color: var(--brand-400); border-left-color: var(--brand-400); }

/* =============================================================================
   DOCS HOME — hero + ecosystem overview (the documentation/index.html surface)
   ============================================================================= */
.dk-hero {
  padding: var(--sp-12) 0 var(--sp-8);
  border-bottom: 1px solid var(--hairline);
  margin-bottom: var(--sp-8);
}
.dk-hero h1 {
  font: 600 clamp(2.2rem, 4vw, 3rem)/1.06 var(--font-sans);
  letter-spacing: -0.03em;
  color: var(--fg);
  margin: var(--sp-3) 0 0;
  max-width: 20ch;
}
.dk-hero h1 .grn { color: var(--brand-400); }
.dk-hero .sub {
  font: var(--text-body-lg);
  color: var(--fg-secondary);
  max-width: 60ch;
  margin: var(--sp-5) 0 0;
  text-wrap: pretty;
}
.dk-hero-cta { display: flex; gap: var(--sp-3); margin-top: var(--sp-6); flex-wrap: wrap; }

/* the three-tool overview strip on the home page */
.dk-zoo {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--sp-4);
  margin: var(--sp-6) 0;
}
.dk-zoo-card {
  border: 1px solid var(--hairline);
  border-radius: var(--r-lg);
  padding: var(--sp-5);
  background: var(--n-900);
  transition: border-color 0.16s ease, transform 0.16s ease;
}
.dk-zoo-card:hover { transform: translateY(-2px); }
.dk-zoo-card .nm {
  font: 600 1.0625rem/1 var(--font-mono);
  display: flex; align-items: baseline; gap: var(--sp-2);
  margin-bottom: var(--sp-3);
}
.dk-zoo-card .nm em { font-family: var(--font-serif); font-style: italic; font-weight: 400; font-size: 0.9375rem; color: var(--fg-secondary); }
.dk-zoo-card .nm .dot { width: 8px; height: 8px; border-radius: 50%; }
.dk-zoo-card p { font-size: 0.875rem; line-height: 1.6; color: var(--fg-secondary); margin: 0; }
.dk-zoo-card--meerkat:hover  { border-color: color-mix(in oklch, var(--meerkat) 55%, var(--border)); }
.dk-zoo-card--mongoose:hover { border-color: color-mix(in oklch, var(--mongoose) 55%, var(--border)); }
.dk-zoo-card--zegit:hover    { border-color: color-mix(in oklch, var(--zegit) 55%, var(--border)); }

/* =============================================================================
   BUTTONS — thin wrappers so docs pages don't depend on the JSX kit.
   Mirror .zz-btn but available as .dk-btn for the static site.
   ============================================================================= */
.dk-btn {
  display: inline-flex; align-items: center; gap: 8px;
  font: 500 0.9375rem/1 var(--font-sans);
  height: 42px; padding: 0 18px;
  border-radius: var(--r-md);
  border: 1px solid transparent;
  cursor: pointer; white-space: nowrap;
  transition: background 0.14s ease, border-color 0.14s ease, color 0.14s ease, transform 0.06s ease;
}
.dk-btn:active { transform: translateY(1px); }
.dk-btn i { width: 16px; height: 16px; }
.dk-btn--primary { background: var(--primary); color: var(--primary-fg); }
.dk-btn--primary:hover { background: var(--primary-hover); }
.dk-btn--secondary { background: var(--bg-raised); color: var(--fg); border-color: var(--border-strong); }
.dk-btn--secondary:hover { background: var(--bg-hover); }
.dk-btn--sm { height: 34px; padding: 0 13px; font-size: 0.875rem; }

/* =============================================================================
   FOOTNOTE / META at the article foot
   ============================================================================= */
.dk-edit-note {
  margin-top: var(--sp-8);
  font: var(--text-small);
  color: var(--fg-muted);
  display: flex; align-items: center; gap: var(--sp-2);
}
.dk-edit-note i { width: 14px; height: 14px; }
.dk-edit-note a { color: var(--link); }

/* =============================================================================
   MOBILE / RESPONSIVE
   ============================================================================= */
.dk-scrim {
  display: none;
  position: fixed; inset: 0;
  background: oklch(0.1 0.02 262 / 0.55);
  z-index: 55;
}
.dk-scrim.is-open { display: block; }

@media (max-width: 1180px) {
  .dk-shell { grid-template-columns: 248px minmax(0, 1fr); }
  .dk-toc { display: none; }
  .dk-article { padding: var(--sp-8) var(--sp-8) var(--sp-20); }
}

@media (max-width: 860px) {
  .dk-shell { grid-template-columns: minmax(0, 1fr); }
  .dk-nav-toggle { display: inline-flex; }
  .dk-topbar-links { display: none; }
  .dk-search { flex-basis: auto; max-width: none; flex: 1 1 auto; }
  .dk-search-kbd { display: none; }

  .dk-sidebar {
    position: fixed;
    top: 0; left: 0; bottom: 0;
    width: 280px;
    height: 100vh;
    z-index: 60;
    background: var(--n-900);
    border-right: 1px solid var(--border);
    transform: translateX(-100%);
    transition: transform 0.2s ease;
    padding-top: var(--sp-6);
  }
  .dk-sidebar.is-open { transform: translateX(0); box-shadow: var(--shadow-lg); }

  .dk-article { padding: var(--sp-6) var(--sp-5) var(--sp-16); }
  .dk-zoo { grid-template-columns: 1fr; }
  .dk-pager { grid-template-columns: 1fr; }
}

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