/* ======================================================================
   VisionForgeX — the developer guide (/developers/)
   ----------------------------------------------------------------------
   Loaded on that page only, after site.css, and built from its tokens.

   THE IDEA. The rest of the site shows the forge from the outside. This
   page is the wire going into it, so the one dark material on the whole
   site appears here: code panels in the site's own ink (#17121F, the text
   colour of every other page turned into a surface). Prose stays on
   white. The eye learns in one screen that dark means "this is exactly
   what is sent".

   The single moving thing is the exchange at the top (.dv-wire): a bid
   request goes out, the clock runs to 212 of 800 ms, the bid comes back,
   the notice is called. It plays once and is complete without motion.

   TYPE. Archivo for reading, as everywhere. Code is Martian Mono, chosen
   because, like Archivo, it has a width axis: it is set a step narrower
   than normal (87.5%) so a line of JSON fits a phone. Served from
   /assets/fonts (SIL Open Font License, see OFL-martian-mono.txt there).

   COLOUR. Chapter dots take the heat colour of the step they belong to
   (bidding is 4, compete; reporting is 5, prove). Inside code, the five
   token colours are the site's cold-to-hot colours lightened for a dark
   ground. Nothing else on the page is coloured.

   NAMING. As in site.css: no class contains "ad", "ads" or "banner" as a
   word.
   ====================================================================== */

@font-face{
  font-family:"Martian Mono";
  src:url("fonts/martian-mono.woff2") format("woff2");
  font-weight:100 800;font-stretch:75% 112.5%;font-style:normal;font-display:swap;
}

.dv{
  --mono:"Martian Mono",ui-monospace,SFMono-Regular,Menlo,Consolas,"Liberation Mono",monospace;
  --code-bg:#17121F;
  --code-bar:#211A2E;
  --code-line:#342A49;
  --code-text:#E9E4F3;
  --code-dim:#A9A1BC;
  padding:calc(var(--hdr) + clamp(36px,8vh,92px)) 0 clamp(64px,12vh,140px);
}
.dv .t-k{color:#C9B6FA}   /* a key, a variable */
.dv .t-s{color:#F4CE8E}   /* a string */
.dv .t-n{color:#8FCBFF}   /* a number, a flag */
.dv .t-l{color:#FF9F90}   /* a keyword, a method */
.dv .t-c{color:#9A91AE}   /* a comment */

/* ---------- the top: title, three ways in, and one auction on the wire ---------- */
.dv-hero{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,35rem);gap:clamp(32px,5vw,84px);align-items:center;margin-bottom:clamp(44px,9vh,96px)}
.dv-hero .lede{margin-top:20px;max-width:44ch}
.dv-paths{margin-top:clamp(24px,4vh,36px);border-top:1px solid var(--rule)}
.dv-paths li{border-bottom:1px solid var(--rule)}
.dv-paths a{position:relative;display:grid;grid-template-columns:10.5rem minmax(0,1fr);gap:4px 20px;align-items:baseline;padding:15px 12px 15px 18px;color:inherit;text-decoration:none;transition:background-color .2s}
.dv-paths a::before{content:"";position:absolute;left:0;top:14px;bottom:14px;width:3px;border-radius:2px;background:var(--c)}
.dv-paths a:hover{background:var(--ink-2)}
.dv-paths b{font-weight:800;font-stretch:112%;color:var(--bone)}
.dv-paths span{color:var(--mist);font-size:.9688rem;line-height:1.4}

.dv-wire{margin:0;padding:clamp(18px,2.4vw,26px);border-radius:22px;background:var(--code-bg);color:var(--code-text);box-shadow:0 34px 70px -34px rgba(var(--shadow),.55),0 2px 0 rgba(255,255,255,.04) inset;min-width:0}
.dv-wire pre{margin:0;overflow-x:auto;font:400 .7813rem/1.75 var(--mono);font-stretch:87.5%;white-space:pre}
.dv-wire-line{margin:0 0 8px;font:500 .7813rem/1.5 var(--mono);font-stretch:87.5%;color:var(--code-dim);overflow-wrap:anywhere}
.dv-clock{display:flex;align-items:center;gap:14px;margin:18px 0}
.dv-clock-track{flex:1 1 auto;height:4px;border-radius:2px;background:var(--code-line);overflow:hidden}
.dv-clock-fill{display:block;width:26.5%;height:100%;border-radius:2px;background:linear-gradient(90deg,var(--h2),var(--h4));transform-origin:0 50%;animation:dv-run .95s cubic-bezier(.3,.7,.3,1) .35s both}
.dv-clock-text{font:400 .75rem/1 var(--mono);font-stretch:87.5%;color:var(--code-dim);white-space:nowrap}
.dv-clock-text b{color:var(--code-text);font-weight:600}
.dv-wire-back{animation:dv-in .45s ease-out 1.25s both}
.dv-wire-end{display:flex;align-items:center;gap:10px;margin-top:18px;padding-top:15px;border-top:1px solid var(--code-line);font-size:.9063rem;line-height:1.4;color:#DDD6EA;animation:dv-in .45s ease-out 1.8s both}
.dv-wire-end .dv-dot{background:var(--h6);width:8px;height:8px;transform:none}
@keyframes dv-run{from{transform:scaleX(0)}to{transform:scaleX(1)}}
@keyframes dv-in{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}

/* ---------- finding your way: the list beside the text, and the strip on a phone ---------- */
.dv-jump{display:none}
.dv-grid{display:grid;grid-template-columns:minmax(0,14.5rem) minmax(0,1fr);gap:clamp(32px,5.5vw,96px);align-items:start}
.dv-toc{position:sticky;top:calc(var(--hdr) + 28px);max-height:calc(100vh - var(--hdr) - 56px);overflow-y:auto;padding:2px 8px 2px 0;font-size:.9063rem}
.dv-toc p{margin:20px 0 7px;font-weight:800;font-stretch:112%;color:var(--bone)}
.dv-toc p:first-child{margin-top:0}
.dv-toc a{display:block;padding:4px 0 4px 14px;border-left:2px solid var(--rule);color:var(--mist);text-decoration:none;line-height:1.35;transition:color .2s,border-color .2s}
.dv-toc a:hover{color:var(--brand-ink)}
.dv-toc a[aria-current="true"]{color:var(--brand-ink);border-left-color:var(--brand);font-weight:700}

/* ---------- the text ---------- */
.dv-body{max-width:52rem;min-width:0;color:#3B3549}
.dv-sec{padding-top:clamp(30px,5vh,46px);scroll-margin-top:calc(var(--hdr) + 4px)}
.dv-body > .dv-sec:first-child{padding-top:0}
.dv-chapter{margin-top:clamp(38px,7vh,76px);padding-top:clamp(30px,5vh,46px);border-top:1px solid var(--rule)}
.dv-sec > p,.dv-sec > ul,.dv-sec > ol{max-width:43rem}
.dv-sec h2{display:flex;align-items:baseline;gap:.5em;margin-bottom:16px;font-size:clamp(1.7rem,3vw,2.5rem);line-height:1.05;font-weight:800;font-stretch:120%;letter-spacing:-.016em;color:var(--bone);text-wrap:balance}
.dv-sec h3{margin-bottom:12px;font-size:clamp(1.25rem,1.9vw,1.55rem);line-height:1.15;font-weight:800;font-stretch:114%;letter-spacing:-.01em;color:var(--bone)}
.dv-sec p + h3,.dv-sec ul + h3{margin-top:30px}
.dv-sec p{margin-bottom:14px}
.dv-sec strong{color:var(--bone);font-weight:700}
.dv-dot{flex:0 0 auto;width:.46em;height:.46em;border-radius:50%;background:var(--c,var(--brand));transform:translateY(-.1em)}
.dv-body code{font-family:var(--mono);font-stretch:87.5%;font-size:.8em;padding:.1em .38em;border-radius:6px;background:var(--ink-2);border:1px solid var(--rule);color:#2A2140;overflow-wrap:anywhere}
.dv-list{display:grid;gap:9px;margin:4px 0 18px}
.dv-list li{position:relative;padding-left:20px;line-height:1.55}
.dv-list li::before{content:"";position:absolute;left:2px;top:.66em;width:6px;height:6px;border-radius:50%;background:var(--brand)}

.dv-note{margin:18px 0 22px;padding:16px 18px;border:1px solid var(--rule);border-left:3px solid var(--brand);border-radius:4px 14px 14px 4px;background:var(--ink-2);color:#2F2940}
.dv-note p{margin:0;max-width:none}

/* ---------- code ---------- */
.dv-code{margin:18px 0 22px;border-radius:16px;background:var(--code-bg);border:1px solid #2A2238;overflow:hidden}
.dv-code figcaption{display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:48px;padding:8px 8px 8px 18px;background:var(--code-bar);border-bottom:1px solid var(--code-line)}
.dv-code-name{color:var(--code-dim);font-size:.8438rem;font-weight:600}
.dv-code pre{margin:0;padding:18px;overflow-x:auto;font:400 .7813rem/1.75 var(--mono);font-stretch:87.5%;color:var(--code-text);tab-size:2;white-space:pre}
.dv-code pre code{font:inherit;padding:0;border:0;border-radius:0;background:none;color:inherit;overflow-wrap:normal}
.dv-code pre:focus-visible{outline:2px solid #C9B6FA;outline-offset:-2px;border-radius:0 0 15px 15px}
.dv-copy{appearance:none;flex:0 0 auto;min-width:4.9rem;min-height:32px;padding:0 12px;border:1px solid #473B61;border-radius:8px;background:transparent;color:var(--code-text);font:inherit;font-size:.8125rem;font-weight:700;line-height:1;cursor:pointer;transition:background-color .2s,border-color .2s,color .2s}
.dv-copy:hover{background:#2E2542}
.dv-copy:focus-visible,.dv-tablist button:focus-visible{outline:2px solid #C9B6FA;outline-offset:2px}
.dv-copy[data-done]{border-color:#F4CE8E;color:#F4CE8E}
.dv-tablist{display:flex;gap:2px;margin-left:-10px;overflow-x:auto}
.dv-tablist button{appearance:none;border:0;border-radius:8px;background:transparent;color:var(--code-dim);font:inherit;font-size:.8438rem;font-weight:700;padding:8px 12px;cursor:pointer;white-space:nowrap;transition:background-color .2s,color .2s}
.dv-tablist button:hover{color:#fff}
.dv-tablist button[aria-selected="true"]{background:#2E2542;color:#fff}
/* scripts off: no tabs to press, so every language is shown, each under its name */
.dv-code[data-tabs]:not(.is-on) .dv-tablist{visibility:hidden}
.dv-code[data-tabs]:not(.is-on) pre + pre{border-top:1px solid var(--code-line)}
.dv-code[data-tabs]:not(.is-on) pre::before{content:attr(data-label);display:block;margin-bottom:10px;font:700 .8438rem/1 "Archivo",system-ui,sans-serif;color:var(--code-dim)}

.dv-endpoint{display:flex;align-items:center;flex-wrap:wrap;gap:10px;max-width:none !important;margin:4px 0 16px;padding:11px 14px;border:1px solid var(--rule-2);border-radius:12px;background:var(--ink-1)}
.dv-method{font:700 .7188rem/1 var(--mono);font-stretch:87.5%;padding:5px 8px;border-radius:6px;background:var(--bone);color:#fff}
.dv-endpoint code{padding:0;border:0;background:none;font-size:.8438rem;color:var(--bone)}

/* ---------- tables ---------- */
.dv-table-wrap{overflow-x:auto;margin:14px 0 22px;border:1px solid var(--rule);border-radius:16px}
.dv-table{width:100%;border-collapse:collapse;font-size:.9375rem;line-height:1.5}
.dv-table th,.dv-table td{padding:12px 16px;text-align:left;vertical-align:top;border-bottom:1px solid var(--rule)}
.dv-table thead th{background:var(--ink-2);color:var(--mist);font-size:.8438rem;font-weight:700}
.dv-table tbody tr:last-child th,.dv-table tbody tr:last-child td{border-bottom:0}
.dv-table tbody th{width:31%;min-width:10.5rem;font-weight:600;color:var(--bone)}
.dv-table tbody th code{padding:0;border:0;background:none;font-size:.7813rem;color:var(--brand-deep)}
.dv-table .dv-type{width:22%;color:var(--mist);font-size:.875rem}
.dv-table--plain tbody th{width:24%;font-weight:700}
.dv-table--plain tbody th code{font-size:.8em;color:#2A2140;padding:.1em .38em;border:1px solid var(--rule);background:var(--ink-2)}
.dv-formats td:nth-child(2),.dv-formats td:nth-child(3){white-space:nowrap}
.dv-yes,.dv-no,.dv-ask{display:inline-flex;align-items:center;gap:8px;font-weight:700;color:var(--bone)}
.dv-yes::before,.dv-no::before,.dv-ask::before{content:"";width:9px;height:9px;border-radius:50%;border:2px solid var(--brand);background:var(--brand)}
.dv-no{color:var(--dim);font-weight:600}
.dv-no::before{background:transparent;border-color:var(--rule-2)}
.dv-ask::before{background:transparent;border-style:dashed}

/* ---------- sequences: the auction in five moves, and the go-live lists ---------- */
.dv-flow{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));counter-reset:flow;margin:10px 0 24px;max-width:none !important}
.dv-flow li{position:relative;counter-increment:flow;padding:36px 16px 0 0}
.dv-flow li::before{content:counter(flow);position:absolute;left:0;top:0;z-index:1;display:grid;place-items:center;width:24px;height:24px;border-radius:50%;background:var(--bone);color:#fff;font-size:.75rem;font-weight:800;font-variant-numeric:tabular-nums}
.dv-flow li::after{content:"";position:absolute;left:24px;right:0;top:11.5px;height:1px;background:var(--rule-2)}
.dv-flow li:last-child::after{display:none}
.dv-flow li:last-child::before{background:var(--brand-btn)}
.dv-flow b{display:block;margin-bottom:5px;font-size:.9375rem;line-height:1.25;font-weight:700;color:var(--bone)}
.dv-flow span{display:block;font-size:.875rem;line-height:1.45;color:var(--mist)}
.dv-flow code{font-size:.78em}
.dv-steps{counter-reset:step;display:grid;gap:12px;margin:6px 0 18px}
.dv-steps li{position:relative;counter-increment:step;padding-left:40px;line-height:1.55}
.dv-steps li::before{content:counter(step);position:absolute;left:0;top:.1em;display:grid;place-items:center;width:26px;height:26px;border-radius:50%;border:1.5px solid var(--rule-2);color:var(--brand-ink);font-size:.8125rem;font-weight:800;font-variant-numeric:tabular-nums}
.dv-steps b{color:var(--bone);font-weight:700}
.dv-end{display:flex;flex-wrap:wrap;gap:12px;margin-top:22px;max-width:none !important}

/* ---------- narrower screens ---------- */
@media (max-width:1040px){
  .dv-hero{grid-template-columns:1fr}
  .dv-wire{max-width:38rem}
}
@media (max-width:960px){
  .dv-grid{grid-template-columns:1fr}
  .dv-toc{display:none}
  .dv-jump{position:sticky;top:var(--hdr);z-index:5;display:flex;gap:8px;overflow-x:auto;margin:0 calc(var(--gut) * -1) clamp(28px,5vh,40px);padding:10px var(--gut);background:rgba(255,255,255,.94);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);border-bottom:1px solid var(--rule);scrollbar-width:none}
  .dv-jump::-webkit-scrollbar{display:none}
  .dv-jump a{flex:0 0 auto;padding:8px 13px;border:1px solid var(--rule-2);border-radius:999px;color:var(--bone);font-size:.875rem;font-weight:600;line-height:1;text-decoration:none;white-space:nowrap}
  .dv-jump a[aria-current="true"]{background:var(--bone);border-color:var(--bone);color:#fff}
  .dv-sec{scroll-margin-top:calc(var(--hdr) + 58px)}
  .dv-flow{grid-template-columns:1fr}
  .dv-flow li{padding:0 0 20px 40px}
  .dv-flow li:last-child{padding-bottom:0}
  .dv-flow li::after{left:11.5px;right:auto;top:24px;bottom:0;width:1px;height:auto}
}
@media (max-width:720px){
  .dv-paths a{grid-template-columns:1fr}
  /* a table becomes one card per row: three columns do not fit a phone */
  .dv-table,.dv-table tbody,.dv-table tr,.dv-table th,.dv-table td{display:block;width:auto}
  .dv-table thead{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}
  .dv-table tbody tr{padding:14px 16px;border-bottom:1px solid var(--rule)}
  .dv-table tbody tr:last-child{border-bottom:0}
  .dv-table tbody th,.dv-table td,.dv-table .dv-type,.dv-table--plain tbody th{padding:0 0 6px;border:0;width:auto;min-width:0}
  .dv-table td:last-child{padding-bottom:0}
  .dv-code{border-radius:14px;margin-inline:calc(var(--gut) * -.5)}
  .dv-code pre{padding:16px}
}
@media (prefers-reduced-motion:reduce){
  .dv-clock-fill,.dv-wire-back,.dv-wire-end{animation:none}
}
@media print{
  .hdr,.ftr,.wash,.skip,.dv-toc,.dv-jump,.dv-copy,.dv-end{display:none !important}
  body::before{display:none}
  .dv{padding:0}
  .dv-grid{display:block}
  .dv-body{max-width:none}
  .dv-code,.dv-wire{break-inside:avoid}
  .dv-code pre{white-space:pre-wrap}
}