/* Docs skin. Deliberately the SITE's own tokens rather than a separate docs theme: the whole
   point of not reaching for a docs framework was that the branding stays identical, and a
   second theme is how that promise gets broken three commits later. Type scale matches the
   landing page: body 18 / sub 26 / section 44. */
:root{--dnav-h:60px}
body{background:radial-gradient(rgba(22,22,15,.09) 1px, transparent 1.4px) 0 0/26px 26px,
  var(--paper-2,#FAFAF6)}
.dwrap{max-width:var(--maxw,1180px);margin:0 auto;padding:0 var(--gutter,24px)}

.dnav{position:sticky;top:0;z-index:10;background:rgba(250,250,246,.92);
  backdrop-filter:saturate(140%) blur(8px);border-bottom:1px solid var(--hairline)}
.dnav .dwrap{display:flex;align-items:center;gap:28px;height:var(--dnav-h)}
.dnav__brand{font-family:var(--font-display,inherit);font-weight:600;font-size:19px;
  letter-spacing:-.01em;color:var(--ink);text-decoration:none}
.dnav__links{display:flex;gap:22px;margin-left:auto;flex-wrap:wrap}
.dnav__links a{font-size:15px;color:var(--ink-muted);text-decoration:none}
.dnav__links a:hover{color:var(--ink)}

.dmain{padding:var(--g-xl,52px) var(--gutter,24px) var(--g-2xl,84px);max-width:860px}
.dmain h1{font:600 clamp(30px,3.4vw,44px)/1.12 var(--font-display,inherit);
  letter-spacing:-.02em;margin:0 0 18px;color:var(--ink)}
.dmain h2{font:600 clamp(20px,2.2vw,26px)/1.25 var(--font-display,inherit);
  letter-spacing:-.01em;margin:44px 0 12px;color:var(--ink)}
.dmain p{font-size:17px;line-height:1.65;color:var(--ink);margin:0 0 14px;max-width:70ch}
.dlede{font-size:19px;line-height:1.6;color:var(--ink-muted);max-width:64ch}
.dmain a{color:var(--accent,#E8502B)}
.dmain code{font-family:var(--font-mono,ui-monospace,monospace);font-size:.88em;
  background:rgba(35,32,25,.055);border-radius:5px;padding:1px 5px}

.dcode{font-family:var(--font-mono,ui-monospace,monospace);font-size:13px;
  background:#FFF;border:1px solid var(--hairline-2,#D8D7CC);border-radius:10px;
  padding:14px 16px;overflow-x:auto;margin:0 0 16px}

.dcards{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:14px;
  margin:24px 0 8px}
.dcard{display:block;padding:18px;border:1px solid var(--hairline-2,#D8D7CC);border-radius:14px;
  background:#FFF;text-decoration:none;transition:border-color .2s ease,transform .12s ease}
.dcard:hover{border-color:var(--accent,#E8502B)}
.dcard:active{transform:translateY(1px)}
.dcard h2{margin:0 0 6px;font-size:19px}
.dcard p{margin:0;font-size:15px;color:var(--ink-muted)}

.dtable{width:100%;border-collapse:collapse;margin:8px 0 18px;font-size:15px}
.dtable th{text-align:left;font:500 10.5px/1 var(--font-mono,ui-monospace,monospace);
  letter-spacing:.14em;text-transform:uppercase;color:var(--ink-muted);
  padding:0 12px 10px;border-bottom:1px solid var(--hairline)}
.dtable td{padding:9px 12px;border-bottom:1px solid var(--hairline);vertical-align:top}
.dtable tr:last-child td{border-bottom:0}
.dyes{color:var(--ok,#2E7D53);font-size:11px;letter-spacing:.1em;text-transform:uppercase}
.dno{color:var(--ink-muted);font-size:11px;letter-spacing:.1em;text-transform:uppercase}

.dlist{margin:0 0 14px;padding-left:18px;max-width:70ch}
.dlist li{font-size:17px;line-height:1.65;margin-bottom:8px}
.dnote{padding:12px 14px;border-radius:10px;background:rgba(232,80,43,.07);
  box-shadow:inset 0 0 0 1px rgba(232,80,43,.2);font-size:15px!important;max-width:none!important}

.dfoot{border-top:1px solid var(--hairline);padding:26px 0 44px;margin-top:40px}
.dfoot p{font-size:13px;line-height:1.6;color:var(--ink-muted);margin:0 0 8px;max-width:72ch}
.dfoot a{color:var(--ink-muted)}
@media(max-width:640px){.dnav .dwrap{gap:14px}.dnav__links{gap:14px}}

/* ── Sidebar shell, search, and the blocks the rebuilt pages use ─────────────
   Same tokens as the landing page. A docs site that looks like a different
   product is the thing not reaching for a framework was meant to avoid. */
.dtop{position:sticky;top:0;z-index:20;background:rgba(250,250,246,.94);
  backdrop-filter:saturate(140%) blur(8px);border-bottom:1px solid var(--hairline)}
.dtop__in{max-width:1240px;margin:0 auto;padding:0 24px;height:58px;
  display:flex;align-items:center;gap:20px}
.dtop__brand{font-family:var(--font-display,inherit);font-weight:600;font-size:19px;
  letter-spacing:-.01em;color:var(--ink);text-decoration:none;white-space:nowrap}
.dtop__brand span{margin-left:8px;font-family:var(--font-mono,ui-monospace,monospace);
  font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--ink-muted)}
.dtop__site{margin-left:auto;font-size:15px;color:var(--ink-muted);text-decoration:none;
  white-space:nowrap}
.dsearch{flex:1;max-width:420px;height:34px;padding:0 12px;font-size:15px;
  border:1px solid var(--hairline-2,#D8D7CC);border-radius:9px;background:#FFF;color:var(--ink)}
.dsearch:focus{outline:2px solid var(--accent,#E8502B);outline-offset:1px;border-color:transparent}
.dtop__in{position:relative}
.dres{position:absolute;top:48px;left:0;right:0;max-width:420px;margin-left:150px;
  background:#FFF;border:1px solid var(--hairline-2,#D8D7CC);border-radius:10px;
  box-shadow:0 18px 44px rgba(35,32,25,.14);overflow:hidden;display:none}
.dres.is-open{display:block}
.dres a{display:block;padding:9px 13px;font-size:15px;color:var(--ink);text-decoration:none;
  border-bottom:1px solid var(--hairline)}
.dres a:last-child{border-bottom:0}
.dres a:hover{background:var(--paper-2,#FAFAF6);color:var(--accent,#E8502B)}
.dres__none{margin:0;padding:11px 13px;font-size:13px;color:var(--ink-muted)}

.dlayout{max-width:1240px;margin:0 auto;padding:0 24px;display:grid;
  grid-template-columns:212px minmax(0,1fr);gap:44px;align-items:start}
.dside{position:sticky;top:82px;padding:30px 0 40px}
.dside__h{margin:22px 0 8px;font-family:var(--font-mono,ui-monospace,monospace);font-size:11px;
  letter-spacing:.16em;text-transform:uppercase;color:var(--ink-muted)}
.dside__h:first-child{margin-top:0}
.dside__l{display:block;padding:6px 10px;margin-left:-10px;border-radius:7px;font-size:15px;
  color:var(--ink-muted);text-decoration:none;line-height:1.35}
.dside__l:hover{color:var(--ink);background:rgba(35,32,25,.045)}
.dside__l.is-here{color:var(--accent,#E8502B);background:rgba(232,80,43,.08);font-weight:500}
.dmain{padding:30px 0 60px;max-width:none}

.dchips{display:flex;flex-wrap:wrap;gap:6px;margin:0 0 26px}
.dchip{font-family:var(--font-mono,ui-monospace,monospace);font-size:11px;padding:4px 9px;
  border-radius:7px;background:rgba(35,32,25,.05);color:var(--ink);text-decoration:none}
.dchip:hover{background:var(--accent,#E8502B);color:#FFF}
.dcmd{padding:20px 0;border-top:1px solid var(--hairline)}
.dcmd h3{margin:0 0 8px;font-size:17px}
.dcmd h3 code{background:none;padding:0;color:var(--accent,#E8502B);font-size:1em}
.dcmd p{margin:0 0 12px;color:var(--ink-muted);font-size:15px;max-width:70ch}
.dcode--help{font-size:12px;line-height:1.55;white-space:pre;max-height:none;
  background:var(--paper-2,#FAFAF6)}
.dmut{color:var(--ink-muted);font-size:12px}
.dtable td:first-child{white-space:nowrap}
.dtable td b{font-weight:600}

@media(max-width:900px){
  .dlayout{grid-template-columns:1fr;gap:0}
  .dside{position:static;padding:18px 0 0;display:flex;flex-wrap:wrap;gap:4px}
  .dside__h{display:none}
  .dside__l{margin-left:0;background:rgba(35,32,25,.045)}
  .dres{margin-left:0}
  .dtop__in{flex-wrap:wrap;height:auto;padding-top:10px;padding-bottom:10px}
}

/* The mark, same as the site header and footer carry. */
.dtop__mark{width:22px;height:22px;margin-right:9px;vertical-align:-5px;display:inline-block}

/* Group label inside the command index. The chips used to be one undifferentiated
   row of 16; grouping them only helps if the labels read as labels. */
.dchips__g{margin:14px 0 6px;font-family:var(--font-mono,ui-monospace,monospace);
  font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-faint)}
.dchips__g:first-child{margin-top:0}