/* Public docs at /docs: hub, guides, plugin references, command pages.
   Loads after tokens.css + home.css (nav and footer come from there). Every
   rule is scoped under .dw so nothing here leaks into the marketing pages. */

.dw {
  --dw-bg: var(--abyss, #0c0e1a);
  --dw-panel: var(--depth, #111525);
  --dw-line: var(--border, rgba(96, 128, 210, 0.16));
  --dw-line2: var(--border2, rgba(96, 128, 210, 0.30));
  --dw-text: var(--text, #dde1f2);
  --dw-muted: #9aa3c4;
  --dw-dim: #7e86a8;
  --dw-accent: var(--gold, #3b82f6);
  --dw-accent-light: var(--gold-light, #74b3ff);
  --dw-accent-bg: var(--gold-bg, rgba(59, 130, 246, 0.09));
  --dw-cyan: var(--cyan, #34c4f4);
  --dw-warn: #f6b24b;
  --dw-ok: #5fd39a;
  --dw-mono: var(--font-mono, "JetBrains Mono", ui-monospace, Menlo, monospace);
  --dw-display: var(--font-display, "Fredoka", "Inter", sans-serif);
  color: var(--dw-text);
  /* Transparent so the site-wide starfield (base_public's sky layer, z-index -1)
     shows through, as on every other public page. Panels and the sidebar carry
     a translucent tint instead of a solid fill. */
  background: transparent;
  min-height: 60vh;
  position: relative;
}
.dw-nebula { position: absolute; inset: 0; overflow: hidden; pointer-events: none; z-index: -1; }
.dw-nebula span { position: absolute; border-radius: 50%; filter: blur(60px); opacity: 0.55; animation: dw-drift 26s ease-in-out infinite alternate; }
.dw-nebula span:nth-child(1) { width: 640px; height: 640px; left: -220px; top: -160px; background: rgba(59, 130, 246, 0.22); }
.dw-nebula span:nth-child(2) { width: 520px; height: 520px; right: -180px; top: 320px; background: rgba(52, 196, 244, 0.14); animation-delay: -9s; }
.dw-nebula span:nth-child(3) { width: 700px; height: 700px; left: 30%; bottom: -320px; background: rgba(96, 128, 210, 0.12); animation-delay: -17s; }
@keyframes dw-drift { from { transform: translate3d(0, 0, 0) scale(1); } to { transform: translate3d(40px, 30px, 0) scale(1.08); } }
@media (prefers-reduced-motion: reduce) { .dw-nebula span { animation: none; } }
[data-theme="light"] .dw-nebula span { opacity: 0.35; }
[data-theme="light"] .dw {
  --dw-bg: #f4f6fb;
  --dw-panel: #ffffff;
  --dw-line: rgba(37, 99, 235, 0.14);
  --dw-line2: rgba(37, 99, 235, 0.28);
  --dw-text: #16192b;
  --dw-muted: #4c5470;
  --dw-dim: #6b7390;
  --dw-accent: #2563eb;
  --dw-accent-light: #1d4ed8;
  --dw-accent-bg: rgba(37, 99, 235, 0.08);
}

.dw a { color: var(--dw-accent-light); text-decoration: none; }
.dw a:hover { text-decoration: underline; }
.dw h1, .dw h2, .dw h3 { font-family: var(--dw-display); font-weight: 600; letter-spacing: -0.01em; margin: 0; line-height: 1.15; }
.dw h1 { font-size: clamp(1.9rem, 3.2vw, 2.6rem); }
.dw h2 { font-size: 1.45rem; }
.dw h3 { font-size: 1.05rem; }
.dw p { margin: 0; line-height: 1.6; }
.dw code, .dw pre, .dw .dw-pill, .dw .dw-grp, .dw table.dw-ref th, .dw .dw-mono { font-family: var(--dw-mono); }
.dw code {
  font-size: 0.82em; background: var(--dw-accent-bg); border: 1px solid var(--dw-line2);
  border-radius: 4px; padding: 1px 6px; color: var(--dw-text); white-space: nowrap;
}
.dw pre {
  margin: 0; background: var(--void, #07080d); border: 1px solid var(--dw-line2); border-radius: 10px;
  padding: 14px 18px; font-size: 0.95rem; line-height: 1.6; color: #e6ecff; overflow-x: auto;
}
[data-theme="light"] .dw pre { background: #16192b; }
.dw pre code { white-space: pre; background: transparent; border: 0; padding: 0; font-size: inherit; color: inherit; }
.dw pre .k { color: #74b3ff; }
.dw pre .o { color: #f6b24b; }
.dw pre .r { color: #5fd39a; }

/* ── Layout ─────────────────────────────────────────────────────────────── */
.dw-shell { display: flex; max-width: 1440px; margin: 0 auto; min-height: 60vh; }
.dw-side {
  width: 264px; flex: none; border-right: 1px solid var(--dw-line); padding: 22px 14px 48px;
  box-sizing: border-box; position: sticky; top: 64px; align-self: flex-start; max-height: calc(100vh - 64px); overflow-y: auto;
  background: transparent;
}
.dw-main { flex: 1; min-width: 0; padding: 28px 44px 64px; box-sizing: border-box; display: flex; flex-direction: column; gap: 34px; }
.dw-rail { width: 232px; flex: none; padding: 36px 20px 0 0; box-sizing: border-box; position: sticky; top: 64px; align-self: flex-start; }
@media (max-width: 1180px) { .dw-rail { display: none; } }
@media (max-width: 900px) {
  .dw-shell { flex-direction: column; }
  .dw-side { width: auto; position: static; max-height: none; border-right: 0; border-bottom: 1px solid var(--dw-line); padding: 12px 16px; }
  .dw-side .dw-nav { display: none; }
  .dw-side.open .dw-nav { display: block; }
  .dw-main { padding: 22px 16px 48px; gap: 26px; }
}

/* ── Sidebar ────────────────────────────────────────────────────────────── */
.dw-side-toggle {
  display: none; width: 100%; padding: 10px 12px; border: 1px solid var(--dw-line2); border-radius: 9px;
  background: var(--dw-panel); color: var(--dw-text); font: inherit; text-align: left; cursor: pointer;
}
@media (max-width: 900px) { .dw-side-toggle { display: flex; align-items: center; justify-content: space-between; } }
.dw-nav a { display: flex; align-items: center; gap: 8px; padding: 7px 10px; border-radius: 7px; color: var(--dw-muted); font-size: 0.86rem; line-height: 1.25; }
.dw-nav a:hover { color: var(--dw-text); background: var(--dw-accent-bg); text-decoration: none; }
.dw-nav a.on { background: var(--dw-accent-bg); color: var(--dw-text); font-weight: 500; }
.dw-nav a.sub { padding-left: 28px; font-size: 0.83rem; }
.dw-nav a.sub2 { padding-left: 44px; font-size: 0.78rem; font-family: var(--dw-mono); }
.dw-nav a.sub2.prose { font-family: inherit; font-size: 0.8rem; }
.dw-nav .dw-cnt { margin-left: auto; font-family: var(--dw-mono); font-size: 0.68rem; color: var(--dw-dim); }
.dw-nav .dw-grp { font-size: 0.64rem; font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase; color: var(--dw-dim); margin: 18px 10px 6px; }
.dw-nav .dw-grp:first-child { margin-top: 4px; }

/* ── Rail ───────────────────────────────────────────────────────────────── */
.dw-rail .dw-grp { font-family: var(--dw-mono); font-size: 0.64rem; font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase; color: var(--dw-dim); margin-bottom: 10px; }
.dw-rail a { display: block; font-size: 0.8rem; color: var(--dw-muted); padding: 5px 0 5px 12px; border-left: 1px solid var(--dw-line2); }
.dw-rail a.h3 { padding-left: 24px; font-size: 0.76rem; }
.dw-rail a.on { color: var(--dw-text); border-left-color: var(--dw-accent); }
.dw-rail .dw-meta { margin-top: 22px; padding-top: 14px; border-top: 1px solid var(--dw-line); font-size: 0.76rem; color: var(--dw-dim); line-height: 1.7; }

/* ── Bits ───────────────────────────────────────────────────────────────── */
.dw-crumb { display: flex; flex-wrap: wrap; gap: 8px; font-size: 0.8rem; color: var(--dw-dim); align-items: center; }
.dw-crumb a { color: var(--dw-muted); }
.dw-pill {
  display: inline-flex; align-items: center; gap: 6px; font-size: 0.64rem; font-weight: 600; letter-spacing: 0.14em;
  text-transform: uppercase; padding: 4px 8px; border: 1px solid var(--dw-line2); border-radius: 4px;
  color: var(--dw-accent-light); background: var(--dw-accent-bg); white-space: nowrap; line-height: 1;
}
.dw-pill.mod { color: var(--dw-warn); border-color: rgba(246, 178, 75, 0.4); background: rgba(246, 178, 75, 0.08); }
.dw-pill.prem { color: #e0b64a; border-color: rgba(255, 209, 102, 0.4); background: rgba(255, 209, 102, 0.08); }
.dw-pill.free { color: var(--dw-ok); border-color: rgba(95, 211, 154, 0.4); background: rgba(95, 211, 154, 0.08); }
.dw-pill.gen { color: var(--dw-cyan); border-color: rgba(52, 196, 244, 0.4); background: rgba(52, 196, 244, 0.07); }
.dw-pill.dim { color: var(--dw-muted); background: transparent; }
[data-theme="light"] .dw-pill.gen { color: #0e7490; }
[data-theme="light"] .dw-pill.prem { color: #92600a; }
[data-theme="light"] .dw-pill.free { color: #15803d; }
[data-theme="light"] .dw-pill.mod { color: #b45309; }
.dw-pills { display: flex; flex-wrap: wrap; gap: 8px; }
.dw-head { display: flex; flex-direction: column; gap: 14px; }
.dw-lede { font-size: 1.05rem; color: var(--dw-muted); max-width: 720px; }
.dw-sec { display: flex; flex-direction: column; gap: 14px; scroll-margin-top: 84px; }
.dw-sec-h { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.dw-sec-h .dw-right { margin-left: auto; font-size: 0.82rem; }
.dw-card { background: color-mix(in srgb, var(--dw-panel) 82%, transparent); backdrop-filter: blur(6px); border: 1px solid var(--dw-line); border-radius: 12px; }
a.dw-card:hover { border-color: var(--dw-line2); text-decoration: none; }
.dw-kv { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
@media (max-width: 640px) { .dw-kv { grid-template-columns: minmax(0, 1fr); } }
.dw-kv > div { padding: 12px 14px; display: flex; flex-direction: column; gap: 4px; }
.dw-perm span, .dw-items > div, .dw-search { background: color-mix(in srgb, var(--dw-panel) 82%, transparent); }
.dw-kv small { font-family: var(--dw-mono); font-size: 0.64rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--dw-dim); }
.dw-kv span { font-size: 0.92rem; color: var(--dw-text); line-height: 1.4; }
.dw-perm { display: flex; flex-wrap: wrap; gap: 8px; }
.dw-perm span { display: inline-flex; align-items: center; gap: 7px; padding: 7px 11px; border: 1px solid var(--dw-line2); border-radius: 8px; background: var(--dw-panel); font-size: 0.84rem; }
.dw-perm i { width: 8px; height: 8px; border-radius: 50%; background: var(--dw-ok); display: inline-block; }
.dw-callout { display: flex; gap: 12px; padding: 13px 16px; border: 1px solid rgba(246, 178, 75, 0.35); border-radius: 10px; background: rgba(246, 178, 75, 0.06); font-size: 0.88rem; line-height: 1.55; }
.dw-callout.info { border-color: rgba(52, 196, 244, 0.35); background: rgba(52, 196, 244, 0.06); }
.dw-callout svg { flex: none; margin-top: 2px; }
.dw-steps { display: flex; flex-direction: column; gap: 10px; counter-reset: dw; padding: 0; margin: 0; list-style: none; }
.dw-steps li { display: flex; gap: 14px; font-size: 0.92rem; line-height: 1.55; counter-increment: dw; }
.dw-steps li::before { content: counter(dw); flex: none; width: 26px; height: 26px; border-radius: 7px; background: var(--dw-accent-bg); color: var(--dw-accent-light); display: flex; align-items: center; justify-content: center; font-family: var(--dw-mono); font-size: 0.78rem; }
.dw-items { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
@media (max-width: 760px) { .dw-items { grid-template-columns: minmax(0, 1fr); } }
.dw-items > div { padding: 12px 14px; font-size: 0.88rem; line-height: 1.5; color: var(--dw-muted); }
.dw-items b { color: var(--dw-text); }
.dw-pn { display: flex; justify-content: space-between; gap: 16px; margin-top: 8px; }
.dw-pn a { flex: 1; padding: 14px 16px; display: flex; flex-direction: column; gap: 4px; }
.dw-pn a.next { align-items: flex-end; text-align: right; }
.dw-pn small { font-family: var(--dw-mono); font-size: 0.64rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--dw-dim); }
@media (max-width: 640px) { .dw-pn { flex-direction: column; } .dw-pn a.next { align-items: flex-start; text-align: left; } }
.dw details { border: 1px solid var(--dw-line); border-radius: 10px; background: color-mix(in srgb, var(--dw-panel) 82%, transparent); padding: 0 14px; }
.dw details summary { cursor: pointer; padding: 12px 0; font-weight: 500; list-style: none; }
.dw details summary::-webkit-details-marker { display: none; }
.dw details p { padding: 0 0 14px; color: var(--dw-muted); font-size: 0.9rem; }
.dw ul.dw-plain { margin: 0; padding-left: 20px; display: flex; flex-direction: column; gap: 6px; color: var(--dw-muted); font-size: 0.9rem; line-height: 1.5; }

/* ── Tables ─────────────────────────────────────────────────────────────── */
.dw-tablewrap { overflow-x: auto; }
table.dw-ref { width: 100%; border-collapse: collapse; font-size: 0.86rem; }
table.dw-ref th { text-align: left; font-size: 0.66rem; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: var(--dw-dim); padding: 8px 12px; border-bottom: 1px solid var(--dw-line2); white-space: nowrap; }
table.dw-ref td { padding: 10px 12px; border-bottom: 1px solid var(--dw-line); vertical-align: top; line-height: 1.5; color: var(--dw-muted); }
table.dw-ref td:first-child { color: var(--dw-text); }
table.dw-ref tr.sec td { padding-top: 18px; border-bottom: 0; color: var(--dw-dim); font-family: var(--dw-mono); font-size: 0.66rem; letter-spacing: 0.12em; text-transform: uppercase; }
table.dw-ref .dw-key { display: flex; flex-direction: column; gap: 4px; }
table.dw-ref .dw-key code { align-self: flex-start; font-size: 0.72rem; }
table.dw-ref .dw-choices { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 6px; }
table.dw-ref .dw-choices code { font-size: 0.72rem; }

/* ── Hub ────────────────────────────────────────────────────────────────── */
.dw-hub-hero { display: flex; flex-direction: column; gap: 18px; padding-top: 10px; }
.dw-hub-hero h1 { font-size: clamp(2rem, 3.6vw, 2.9rem); }
.dw-hub-hero h1 em { font-style: normal; color: var(--dw-accent-light); white-space: nowrap; }
/* The reading-robot mascot on the hub: head level with the title, feet reaching
   past the search box into the gap above the first section. It is absolutely
   positioned so the overflow costs the page no height, and the hero reserves the
   width it covers with padding so the title and lede wrap short of it instead of
   running underneath. Under 900px it drops beneath the search box, centered. */
.dw-hub-hero--art {
  --dw-hero-art-h: clamp(200px, 19.5vw, 280px);
  --dw-hero-art-w: calc(var(--dw-hero-art-h) * 0.8606);
  position: relative;
  padding-right: calc(var(--dw-hero-art-w) + 44px);
}
.dw-hub-hero__art {
  position: absolute; top: 52px; right: 16px;
  display: block; height: var(--dw-hero-art-h); width: auto;
  filter: drop-shadow(0 16px 26px rgba(0, 0, 0, 0.45));
  user-select: none; -webkit-user-drag: none; pointer-events: none;
}
[data-theme="light"] .dw-hub-hero__art { filter: drop-shadow(0 12px 20px rgba(15, 23, 42, 0.22)); }
@media (max-width: 900px) {
  .dw-hub-hero--art { padding-right: 0; }
  .dw-hub-hero__art { position: static; align-self: center; height: 160px; margin: 4px 0 -4px; }
}
.dw-search {
  display: flex; align-items: center; gap: 10px; height: 50px; padding: 0 14px; border: 1px solid var(--dw-line2);
  border-radius: 12px; background: var(--dw-panel); color: var(--dw-dim); font-size: 0.95rem; max-width: 640px; cursor: text; width: 100%; box-sizing: border-box; font: inherit; text-align: left;
}
.dw-search .dw-kbd { margin-left: auto; font-family: var(--dw-mono); font-size: 0.64rem; border: 1px solid var(--dw-line2); border-radius: 4px; padding: 2px 5px; color: var(--dw-muted); }
.dw-grid-4 { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.dw-grid-3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.dw-grid-2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
@media (max-width: 1100px) { .dw-grid-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } .dw-grid-3 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 640px) { .dw-grid-4, .dw-grid-3, .dw-grid-2 { grid-template-columns: minmax(0, 1fr); } }
.dw-tile { padding: 16px 18px; display: flex; flex-direction: column; gap: 6px; }
.dw-tile h3 { color: var(--dw-text); }
.dw-tile p { font-size: 0.84rem; color: var(--dw-muted); }
.dw-svc { display: flex; gap: 14px; padding: 16px; align-items: flex-start; }
.dw-svc .dw-ic { width: 40px; height: 40px; border-radius: 10px; background: var(--dw-accent-bg); border: 1px solid var(--dw-line2); display: flex; align-items: center; justify-content: center; color: var(--dw-accent-light); flex: none; }
.dw-svc .dw-ic svg { width: 20px; height: 20px; }
.dw-svc h3 { color: var(--dw-text); }
.dw-svc p { font-size: 0.84rem; color: var(--dw-muted); margin-top: 3px; }
.dw-svc .dw-pills { margin-top: 10px; }

/* ── Prose from markdown ────────────────────────────────────────────────── */
.dw-prose { display: flex; flex-direction: column; gap: 14px; font-size: 0.95rem; line-height: 1.65; color: var(--dw-muted); max-width: 780px; }
.dw-prose h2 { color: var(--dw-text); margin-top: 22px; scroll-margin-top: 84px; }
.dw-prose h3 { color: var(--dw-text); margin-top: 10px; scroll-margin-top: 84px; }
.dw-prose p, .dw-prose li { color: var(--dw-muted); }
.dw-prose strong { color: var(--dw-text); }
.dw-prose ul, .dw-prose ol { margin: 0; padding-left: 22px; display: flex; flex-direction: column; gap: 6px; }
.dw-prose table { border-collapse: collapse; width: 100%; font-size: 0.88rem; }
.dw-prose th { text-align: left; font-family: var(--dw-mono); font-size: 0.66rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--dw-dim); padding: 8px 12px; border-bottom: 1px solid var(--dw-line2); }
.dw-prose td { padding: 9px 12px; border-bottom: 1px solid var(--dw-line); vertical-align: top; }
.dw-prose blockquote { margin: 0; padding: 12px 16px; border: 1px solid rgba(52, 196, 244, 0.35); border-radius: 10px; background: rgba(52, 196, 244, 0.06); }
.dw-prose blockquote p { color: var(--dw-text); }
.dw-prose pre { white-space: pre-wrap; }
.dw-prose img { max-width: 100%; border-radius: 10px; border: 1px solid var(--dw-line); }

/* ── Search overlay ─────────────────────────────────────────────────────── */
.dw-search-overlay { position: fixed; inset: 0; background: rgba(7, 8, 13, 0.72); display: none; align-items: flex-start; justify-content: center; padding: 8vh 16px 0; z-index: 200; }
.dw-search-overlay.open { display: flex; }
.dw-search-box { width: 100%; max-width: 640px; background: var(--dw-panel); border: 1px solid var(--dw-line2); border-radius: 14px; box-shadow: 0 30px 80px rgba(0, 0, 0, 0.55); overflow: hidden; color: var(--dw-text); }
.dw-search-box .dw-in { display: flex; align-items: center; gap: 12px; padding: 12px 16px; border-bottom: 1px solid var(--dw-line); }
.dw-search-box input { flex: 1; background: transparent; border: 0; outline: 0; color: var(--dw-text); font: inherit; font-size: 1rem; }
.dw-search-box .dw-res { max-height: 60vh; overflow-y: auto; padding: 8px; display: flex; flex-direction: column; gap: 2px; }
.dw-search-box .dw-res a { display: flex; gap: 12px; align-items: center; padding: 10px 12px; border-radius: 9px; color: var(--dw-text); }
.dw-search-box .dw-res a:hover, .dw-search-box .dw-res a.on { background: var(--dw-accent-bg); text-decoration: none; }
.dw-search-box .dw-res .dw-pill { width: 66px; justify-content: center; }
.dw-search-box .dw-res .dw-t { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.dw-search-box .dw-res .dw-t span:first-child { font-size: 0.92rem; }
.dw-search-box .dw-res .dw-t span:last-child { font-size: 0.76rem; color: var(--dw-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dw-search-box .dw-empty { padding: 20px 16px; color: var(--dw-dim); font-size: 0.9rem; }
.dw-search-box .dw-foot { display: flex; gap: 16px; padding: 9px 16px; border-top: 1px solid var(--dw-line); font-size: 0.72rem; color: var(--dw-dim); }
.dw-search-box .dw-foot .dw-kbd { font-family: var(--dw-mono); font-size: 0.62rem; border: 1px solid var(--dw-line2); border-radius: 4px; padding: 1px 5px; }

/* ── Discord-style example reply ────────────────────────────────────────── */
.dw-disc { background: #313338; border-radius: 10px; padding: 14px 16px; display: flex; gap: 12px; color: #dbdee1; font-size: 0.9rem; line-height: 1.45; }
.dw-disc .dw-av { width: 40px; height: 40px; border-radius: 50%; background: linear-gradient(135deg, #3b82f6, #34c4f4); flex: none; }
.dw-disc .dw-name { font-weight: 600; color: #fff; display: flex; align-items: center; gap: 8px; }
.dw-disc .dw-tag { font-size: 0.62rem; background: #5865f2; color: #fff; border-radius: 3px; padding: 1px 5px; font-weight: 600; }
.dw-disc .dw-emb { margin-top: 8px; border-left: 4px solid #3b82f6; background: #2b2d31; border-radius: 4px; padding: 10px 12px; }

.dw-foot { border-top: 1px solid var(--dw-line); padding: 18px 44px; display: flex; flex-wrap: wrap; gap: 18px; font-size: 0.78rem; color: var(--dw-dim); align-items: center; max-width: 1440px; margin: 0 auto; box-sizing: border-box; }
.dw-foot .dw-right { margin-left: auto; display: flex; gap: 18px; }
@media (max-width: 900px) { .dw-foot { padding: 16px; } }

/* ── In-place navigation progress bar ─────────────────────────────────── */
.dw-progress { position: fixed; top: 0; left: 0; height: 2px; width: 0; background: var(--gold, #3b82f6); z-index: 300; opacity: 0; transition: width 0.3s ease, opacity 0.2s; pointer-events: none; }
.dw-progress.on { opacity: 1; width: 70%; transition: width 4s cubic-bezier(0.1, 0.7, 0.2, 1), opacity 0.1s; }