/* ══════════════════════════════════════════════════════════════
   BLT docs — a layer over blt.css.
   Warm surface, light only. Everything here is built from system
   tokens; this file adds layout and a handful of prose objects the
   marketing site has no use for.
   ══════════════════════════════════════════════════════════════ */
:root{--doc-nav:280px; --doc-toc:236px; --doc-top:60px; --doc-sub:48px}

/* ── top bar ─────────────────────────────────────────────── */
.dtop{position:fixed;top:0;left:0;right:0;height:var(--doc-top);z-index:60;
  background:var(--bg-elev);border-bottom:1px solid var(--line);
  display:flex;align-items:center;gap:20px;padding:0 22px}
.dtop .brand{font-size:19px;font-weight:700;letter-spacing:-.045em;color:var(--fg);white-space:nowrap}
.dtop .brand i{color:var(--accent);font-style:normal}
.dtop .kicker{font-family:var(--font-mono);font-size:10.5px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--fg-muted);white-space:nowrap}
.dsearch{flex:1;max-width:460px;position:relative}
.dsearch input{width:100%;height:38px;border-radius:var(--radius-sm);
  border:1px solid var(--line-strong);background:var(--bg);color:var(--fg);
  padding:0 40px 0 36px;font-family:var(--font-sans);font-size:14.5px;outline:none;
  transition:border-color var(--dur-fast) var(--ease)}
.dsearch input:focus{border-color:var(--accent);box-shadow:inset 0 0 0 1px var(--accent)}
.dsearch input::placeholder{color:var(--fg-subtle)}
.dsearch .mg{position:absolute;left:12px;top:11px;width:15px;height:15px;color:var(--fg-muted)}
.dsearch kbd{position:absolute;right:10px;top:9px;font-family:var(--font-mono);font-size:11px;
  color:var(--fg-muted);border:1px solid var(--line);border-radius:var(--radius-xs);padding:2px 7px}
.dtop .dlinks{margin-left:auto;display:flex;gap:8px;align-items:center}
.dtop .dlinks a{font-size:14px;color:var(--fg-secondary);padding:7px 11px;border-radius:var(--radius-sm)}
.dtop .dlinks a:hover{background:var(--bg-inset);color:var(--fg)}
.dburger{display:none;background:none;border:1px solid var(--line-strong);
  border-radius:var(--radius-sm);color:var(--fg);width:38px;height:38px;
  align-items:center;justify-content:center;flex:none}

/* ── section tabs ────────────────────────────────────────── */
.dsub{position:fixed;top:var(--doc-top);left:0;right:0;height:var(--doc-sub);z-index:55;
  background:var(--bg);border-bottom:1px solid var(--line);
  display:flex;align-items:center;gap:26px;padding:0 22px;overflow-x:auto;scrollbar-width:none}
.dsub::-webkit-scrollbar{display:none}
.dsub a{font-size:14.5px;color:var(--fg-muted);padding:14px 0;white-space:nowrap;
  border-bottom:2px solid transparent;margin-bottom:-1px;
  transition:color var(--dur-fast) var(--ease)}
.dsub a:hover{color:var(--fg-secondary)}
.dsub a.on{color:var(--fg);border-bottom-color:var(--accent)}

/* ── shell ───────────────────────────────────────────────── */
.dshell{display:flex;padding-top:calc(var(--doc-top) + var(--doc-sub))}
.dside{width:var(--doc-nav);flex:0 0 var(--doc-nav);position:sticky;
  top:calc(var(--doc-top) + var(--doc-sub));height:calc(100vh - var(--doc-top) - var(--doc-sub));
  overflow-y:auto;border-right:1px solid var(--line);padding:26px 14px 80px 22px}
.dside::-webkit-scrollbar{width:8px}
.dside::-webkit-scrollbar-thumb{background:var(--line-strong);border-radius:8px}
.dgrp{font-family:var(--font-mono);font-size:10.5px;font-weight:500;letter-spacing:.14em;
  text-transform:uppercase;color:var(--fg-muted);margin:24px 0 8px;padding-left:10px}
.dgrp:first-child{margin-top:0}
.dside a.item{display:block;font-size:14.5px;color:var(--fg-secondary);padding:7px 10px;
  border-radius:var(--radius-sm);margin:1px 0;transition:all var(--dur-fast) var(--ease)}
.dside a.item:hover{background:var(--bg-inset);color:var(--fg)}
.dside a.item.on{background:var(--accent-soft);color:var(--accent);font-weight:500;
  box-shadow:inset 2px 0 0 var(--accent)}
.dside .empty{font-size:13.5px;color:var(--fg-muted);padding:10px;display:none}

/* ── main ────────────────────────────────────────────────── */
.dmain{flex:1;min-width:0;padding:48px 56px 140px;max-width:840px}
.dmain .eyebrow{display:block;margin-bottom:12px}
.dmain h1{font-size:clamp(32px,4vw,44px);font-weight:600;letter-spacing:-.032em;
  line-height:1.06;margin:0 0 18px}
.dmain .lede{font-size:19px;line-height:1.58;color:var(--fg-secondary);margin:0 0 36px;max-width:62ch}
.dmain h2{font-size:29px;font-weight:600;letter-spacing:-.026em;line-height:1.2;
  margin:64px 0 16px;scroll-margin-top:132px}
.dmain h3{font-size:20px;font-weight:600;letter-spacing:-.015em;margin:36px 0 10px;scroll-margin-top:132px}
.dmain h4{font-size:16.5px;font-weight:600;margin:26px 0 8px}
.dmain p{margin:0 0 16px;font-size:16.5px;line-height:1.7;color:var(--fg-secondary);text-wrap:pretty}
.dmain p strong,.dmain li strong{color:var(--fg);font-weight:600}
.dmain ul,.dmain ol{margin:0 0 18px;padding-left:22px;display:flex;flex-direction:column;gap:8px}
.dmain li{font-size:16.5px;line-height:1.65;color:var(--fg-secondary)}
.dmain hr{border:0;border-top:1px solid var(--line);margin:60px 0}
.dmain a:not(.tile):not(.btn){color:var(--accent);border-bottom:1px solid var(--accent-line)}
.dmain a:not(.tile):not(.btn):hover{border-bottom-color:var(--accent)}

/* ── inline objects ──────────────────────────────────────── */
.ui{font-family:var(--font-mono);font-size:.85em;background:var(--bg-inset);
  border:1px solid var(--line);border-radius:var(--radius-xs);padding:2px 6px;
  color:var(--fg);white-space:nowrap}
.tap{font-family:var(--font-mono);font-size:.83em;background:var(--accent);color:var(--accent-fg);
  border-radius:var(--radius-xs);padding:3px 8px;font-weight:500;white-space:nowrap}
.blt{color:var(--ai);font-weight:600}
.dmain code{font-family:var(--font-mono);font-size:.86em;background:var(--bg-inset);
  border:1px solid var(--line);border-radius:var(--radius-xs);padding:2px 6px;color:var(--fg)}

/* ── callouts ────────────────────────────────────────────── */
.dcard{background:var(--bg-elev);border:1px solid var(--line);border-radius:var(--radius-lg);
  padding:20px 24px;margin:26px 0}
.dcard > :last-child{margin-bottom:0}
.dcard .h{font-family:var(--font-mono);font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--fg-muted);font-weight:500;margin:0 0 10px}
.dcard.ai{background:var(--ai-soft);border-color:var(--ai-line)}
.dcard.ai .h{color:var(--ai)}
.dcard.warn{background:var(--warn-soft);border-color:transparent}
.dcard.warn .h{color:var(--warn)}
.dcard.stop{background:var(--danger-soft);border-color:transparent}
.dcard.stop .h{color:var(--danger)}

/* ── tiles ───────────────────────────────────────────────── */
.dtiles{display:grid;grid-template-columns:repeat(auto-fit,minmax(216px,1fr));gap:16px;margin:30px 0}
.tile{background:var(--bg-elev);border:1px solid var(--line);border-radius:var(--radius-xl);
  padding:22px;display:block;transition:border-color var(--dur-fast) var(--ease),transform var(--dur-fast) var(--ease)}
.tile:hover{border-color:var(--line-strong);transform:translateY(-2px)}
.tile .t{font-size:17px;font-weight:600;letter-spacing:-.015em;color:var(--fg);margin:0 0 6px}
.tile p{font-size:14.5px;margin:0;color:var(--fg-muted);line-height:1.55}

/* ── numbered steps ──────────────────────────────────────── */
.steps{counter-reset:s;list-style:none;padding:0;margin:28px 0;display:flex;flex-direction:column;gap:24px}
.steps > li{counter-increment:s;position:relative;padding-left:46px;margin:0;
  font-size:16.5px;line-height:1.65;color:var(--fg-secondary)}
.steps > li::before{content:counter(s);position:absolute;left:0;top:0;width:29px;height:29px;
  border-radius:var(--radius-full);background:var(--bg-elev);border:1px solid var(--line-strong);
  color:var(--fg);font-family:var(--font-mono);font-size:12.5px;font-weight:500;
  display:flex;align-items:center;justify-content:center}
.steps > li > strong:first-child{display:block;color:var(--fg);margin-bottom:3px;font-size:17px}

/* ── tables ──────────────────────────────────────────────── */
.tw{overflow-x:auto;margin:26px 0;border:1px solid var(--line);border-radius:var(--radius-lg)}
.tw table{width:100%;border-collapse:collapse;font-size:15px;min-width:440px}
.tw th,.tw td{text-align:left;padding:13px 16px;border-bottom:1px solid var(--line);
  vertical-align:top;color:var(--fg-secondary);line-height:1.55}
.tw tr:last-child td{border-bottom:0}
.tw th{font-family:var(--font-mono);font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;
  color:var(--fg-muted);font-weight:500;background:var(--bg-sunken)}
.tw td.k{color:var(--fg);font-weight:500}
.tw td.n{font-family:var(--font-mono);font-variant-numeric:tabular-nums;white-space:nowrap}
.wpill{font-family:var(--font-mono);font-size:10px;letter-spacing:.1em;text-transform:uppercase;
  border-radius:var(--radius-full);padding:3px 9px;font-weight:500;white-space:nowrap;display:inline-block}
.wpill.desk{background:var(--ai-soft);color:var(--ai);border:1px solid var(--ai-line)}
.wpill.app{background:var(--ok-soft);color:var(--ok)}
.wpill.both{background:var(--bg-inset);color:var(--fg-secondary);border:1px solid var(--line-strong)}

.pull{font-size:20px;line-height:1.5;border-left:3px solid var(--accent);
  padding:4px 0 4px 22px;margin:30px 0;color:var(--fg);letter-spacing:-.012em;font-weight:500}

/* ── on this page ────────────────────────────────────────── */
.dtoc{width:var(--doc-toc);flex:0 0 var(--doc-toc);position:sticky;
  top:calc(var(--doc-top) + var(--doc-sub));height:calc(100vh - var(--doc-top) - var(--doc-sub));
  overflow-y:auto;padding:48px 22px 80px 8px}
.dtoc h6{font-family:var(--font-mono);font-size:10.5px;font-weight:500;letter-spacing:.14em;
  text-transform:uppercase;color:var(--fg-muted);margin:0 0 12px}
.dtoc a{display:block;font-size:13.5px;color:var(--fg-muted);padding:5px 0 5px 13px;
  border-left:1px solid var(--line);line-height:1.45}
.dtoc a:hover{color:var(--fg-secondary)}
.dtoc a.on{color:var(--fg);border-left-color:var(--accent)}
.dtoc a.sub{padding-left:26px;font-size:13px}

/* ── page footer + prev/next ─────────────────────────────── */
.dfoot{border-top:1px solid var(--line);margin-top:72px;padding-top:28px;
  font-size:14.5px;color:var(--fg-muted)}
.dnext{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin:44px 0 0}
.dnext a{border:1px solid var(--line);border-radius:var(--radius-lg);padding:16px 18px;
  display:flex;flex-direction:column;gap:4px;background:var(--bg-elev);
  transition:border-color var(--dur-fast) var(--ease)}
.dnext a:hover{border-color:var(--line-strong)}
.dnext .l{font-family:var(--font-mono);font-size:10px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--fg-muted)}
.dnext .t{font-size:16px;font-weight:500;color:var(--fg);letter-spacing:-.012em}
.dnext a.nx{text-align:right;align-items:flex-end}

.dscrim{display:none;position:fixed;inset:0;background:rgba(23,21,15,.45);z-index:58}
.dscrim.on{display:block}

@media (max-width:1180px){
  .dtoc{display:none}
  .dmain{padding:44px 40px 120px;max-width:none}
}
@media (max-width:900px){
  .dburger{display:flex}
  .dtop .dlinks a:not(.btn){display:none}
  .dside{position:fixed;left:0;top:calc(var(--doc-top) + var(--doc-sub));z-index:59;
    background:var(--bg-elev);transform:translateX(-102%);
    transition:transform var(--dur-med) var(--ease);width:300px}
  .dside.open{transform:none;box-shadow:var(--shadow-pop)}
  .dmain{padding:32px 24px 110px}
  .dsearch{max-width:none}
}
/* On a phone the bar can't hold burger + brand + search + CTA on one line.
   Wrap the search onto its own row and grow the fixed offset to match, so the
   sticky sidebar and TOC still start below the chrome. */
@media (max-width:700px){
  :root{--doc-top:106px}
  .dtop{height:var(--doc-top);flex-wrap:wrap;align-content:center;padding:10px 16px;gap:10px 14px}
  .dsearch{order:3;flex:1 0 100%;max-width:none}
  .dtop .dlinks{margin-left:auto}
}
@media (max-width:560px){
  .dmain{padding:26px 18px 90px}
  .dmain p,.dmain li,.steps > li{font-size:16px}
  .dmain h1{font-size:29px}
  .dmain .lede{font-size:17px}
  .dmain h2{font-size:23px;margin-top:48px}
  .dmain h3{font-size:18px}
  .dtop{padding:10px 14px}
  .dsearch kbd{display:none}
  .dtop .kicker{display:none}
  .dcard{padding:16px 18px}
  .dnext{grid-template-columns:1fr}
  .dnext a.nx{text-align:left;align-items:flex-start}
  .dtiles{grid-template-columns:1fr}
  .steps > li{padding-left:40px}
  .steps > li::before{width:26px;height:26px;font-size:12px}
  .pull{font-size:18px;padding-left:18px}
  .dside{width:min(300px,86vw)}
}
@media print{
  .dtop,.dsub,.dside,.dtoc,.dscrim{display:none!important}
  .dshell{padding-top:0}
  .dmain{max-width:none;padding:0}
  .dcard,.tw,.steps > li,table{break-inside:avoid}
}