/* Developer docs (developers.html). Builds on styles.css: same tokens, header, footer and the .ticks, .note and .steps patterns. */
/* No inline styles anywhere: the CSP allows styles from 'self' only. */

[hidden]{display:none!important}

/* ---------- hero ---------- */
.dev-hero{padding:64px 0 22px;position:relative;overflow:hidden}
.dev-hero::before{content:"";position:absolute;inset:-280px -20% auto;height:620px;background:radial-gradient(55% 55% at 50% 45%,rgba(124,108,255,.2),transparent 72%),radial-gradient(26% 30% at 84% 24%,rgba(95,208,168,.07),transparent 70%);pointer-events:none}
.dev-hero .wrap{position:relative}
.dev-hero h1{font-size:clamp(40px,5.4vw,64px);font-weight:800;letter-spacing:-.04em;line-height:1;margin-top:14px}
.dev-hero .lede{max-width:700px}
.dev-tabs{display:inline-flex;flex-wrap:wrap;gap:4px;padding:4px;border-radius:12px;background:rgba(20,19,30,.85);box-shadow:inset 0 0 0 1px var(--line2);max-width:100%}
.dev-tabs a{padding:7px 14px;border-radius:9px;font-size:14px;font-weight:600;color:var(--t3);transition:color .2s,background .2s}
.dev-tabs a:hover{color:var(--t1)}
.dev-tabs a[aria-current="page"]{background:var(--v);color:#fff}
.dev-actions{display:flex;flex-wrap:wrap;align-items:center;gap:10px;margin-top:28px}
.dev-base{display:inline-flex;align-items:center;gap:10px;margin-left:6px;padding:6px 6px 6px 14px;border-radius:12px;background:rgba(20,19,30,.85);box-shadow:inset 0 0 0 1px var(--line2);max-width:100%}
.dev-base>span{font:600 11px var(--mono);letter-spacing:.07em;text-transform:uppercase;color:var(--t3)}
.dev-base code{font:500 14px var(--mono);color:var(--mint);overflow-wrap:anywhere;font-variant-ligatures:none}

/* ---------- layout: sticky section list + article ---------- */
.docs{display:grid;grid-template-columns:236px minmax(0,1fr);gap:64px;align-items:start;padding-top:20px;padding-bottom:30px}
.docs-side{position:sticky;top:92px;max-height:calc(100vh - 112px);overflow-y:auto;padding:4px 0 24px;scrollbar-width:thin}
.side-title{font:600 11.5px var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--t3);margin:0 0 10px 14px}
.docs-side ul,.docs-jump ul{list-style:none;margin:0;padding:0}
.docs-side a{display:block;padding:6px 12px;border-left:2px solid var(--line);font-size:14px;line-height:1.35;color:var(--t3);transition:color .2s,border-color .2s}
.docs-side a:hover{color:var(--t1)}
.docs-side a[aria-current]{color:var(--t1);border-left-color:var(--v2);font-weight:600}
.docs-side a.is-parent{color:var(--t2);border-left-color:var(--vline)}
.docs-side ul ul a{padding-left:26px;font-size:13px}
.docs-jump{display:none}
.docs-body{max-width:824px;min-width:0}

/* ---------- article ---------- */
.dsec{scroll-margin-top:92px;padding-top:10px}
.dsec+.dsec{margin-top:56px;padding-top:56px;border-top:1px solid var(--line);scroll-margin-top:44px}
.docs-body h2{font-size:clamp(27px,2.8vw,34px);font-weight:750;letter-spacing:-.028em;line-height:1.12;margin:0}
.docs-body h3{font-size:19px;font-weight:650;letter-spacing:-.01em;margin:40px 0 0;scroll-margin-top:92px}
.docs-body h2+p,.docs-body h2+.endpoint{margin-top:16px}
.docs-body p{color:var(--t2);font-size:16px;line-height:1.7;margin:14px 0 0}
.docs-body a:not(.btn):not(.anchor){color:var(--v3);border-bottom:1px solid var(--vline)}
.docs-body a:not(.btn):not(.anchor):hover{color:var(--t1)}
.docs-body b,.docs-body strong{color:var(--t1);font-weight:600}
.docs-body code{font:500 .86em var(--mono);font-variant-ligatures:none;background:var(--s3);color:var(--v3);border-radius:6px;padding:1px 6px;overflow-wrap:anywhere}
.docs-body pre code{font:inherit;background:none;color:inherit;padding:0;border-radius:0;overflow-wrap:normal}
.docs-body .list{margin:14px 0 0;padding-left:22px;color:var(--t2);line-height:1.7}
.docs-body .list li{margin:7px 0;padding-left:2px}
.docs-body .ticks{margin-top:18px}
.docs-body .ticks li{font-size:15.5px;line-height:1.6}
.docs-body .note p{margin:0;font-size:14.5px;line-height:1.6}
.docs-body .note{margin-top:20px}
.note.warn{background:var(--ambersoft);box-shadow:inset 0 0 0 1px rgba(242,181,82,.34)}
.anchor{margin-left:.45em;color:var(--t3);font-weight:500;opacity:0;border:0;transition:opacity .2s}
.docs-body h2:hover .anchor,.docs-body h3:hover .anchor,.anchor:focus-visible{opacity:1}
.docs-body .steps{margin:22px 0 0;padding:0;list-style:none}
.docs-body .st{padding:20px}
.docs-body .st::before{margin-bottom:12px}
.docs-body .st h3{margin:0;font-size:17px}
.docs-body .qs{margin:18px 0 0;padding:0;list-style:none;counter-reset:qs;display:grid;gap:10px}
.docs-body .qs li{counter-increment:qs;position:relative;padding:14px 16px 14px 56px;border-radius:12px;background:rgba(255,255,255,.025);box-shadow:inset 0 0 0 1px var(--line);color:var(--t2);font-size:15.5px;line-height:1.6}
.docs-body .qs li::before{content:counter(qs);position:absolute;left:14px;top:13px;width:28px;height:28px;border-radius:9px;display:grid;place-items:center;background:var(--v);color:#fff;font-weight:700;font-size:14px}

/* ---------- facts, endpoints ---------- */
.facts{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;margin-top:22px}
.fact{padding:16px 18px;border-radius:var(--r);background:rgba(255,255,255,.025);box-shadow:inset 0 0 0 1px var(--line);min-width:0}
.fact>span{display:block;font:600 11px var(--mono);letter-spacing:.07em;text-transform:uppercase;color:var(--t3)}
.docs-body .fact code{display:block;margin-top:8px;background:none;padding:0;font-size:13.5px;color:var(--mint)}
.docs-body .fact p{margin:8px 0 0;font-size:14px;line-height:1.55}
.endpoint{display:flex;align-items:center;gap:12px;margin-top:16px;padding:10px 14px;border-radius:12px;background:var(--bg2);box-shadow:inset 0 0 0 1px var(--line2);overflow-x:auto}
.docs-body .endpoint code{background:none;padding:0;font:500 14.5px var(--mono);color:var(--t1);white-space:nowrap;overflow-wrap:normal}
.verb{flex:none;font:700 11.5px var(--mono);letter-spacing:.05em;border-radius:6px;padding:3px 8px}
.verb.get{color:var(--mint);background:var(--mintsoft)}
.verb.post{color:var(--v3);background:var(--vsoft)}

/* ---------- tables ---------- */
.tablewrap{margin:18px 0 0;overflow-x:auto;border-radius:var(--r);box-shadow:inset 0 0 0 1px var(--line);background:rgba(255,255,255,.02)}
.dtable{width:100%;border-collapse:collapse;font-size:14px;min-width:620px}
.dtable th{font:600 11px var(--mono);letter-spacing:.06em;text-transform:uppercase;color:var(--t3);text-align:left;padding:11px 14px;border-bottom:1px solid var(--line2);white-space:nowrap}
.dtable td{padding:11px 14px;border-bottom:1px solid var(--line);vertical-align:top;color:var(--t2);line-height:1.55}
.dtable tr:last-child td{border-bottom:0}
.dtable td:first-child{white-space:nowrap}
.dtable.wrapfirst td:first-child{white-space:normal}
.docs-body .dtable code{font-size:.9em}
.dtable .yes{color:var(--mint);font-weight:600}
.dtable .no{color:var(--t3)}
.st-ok,.st-warn,.st-bad{display:inline-block;font:700 12.5px var(--mono);border-radius:6px;padding:2px 8px}
.st-ok{color:var(--mint);background:var(--mintsoft)}.st-warn{color:var(--amber);background:var(--ambersoft)}.st-bad{color:var(--red);background:var(--redsoft)}

/* ---------- code blocks and language tabs ---------- */
.codeblock,.codetabs{margin:18px 0 0;border-radius:var(--r);background:var(--bg2);box-shadow:inset 0 0 0 1px var(--line2);overflow:hidden;min-width:0}
.cb-head,.ct-bar{display:flex;align-items:center;gap:10px;min-height:44px;padding:0 8px 0 16px;border-bottom:1px solid var(--line);background:rgba(255,255,255,.02)}
.cb-label{font:600 11.5px var(--mono);letter-spacing:.07em;text-transform:uppercase;color:var(--t3)}
.ct-bar{padding-left:6px}
.ct-tabs{display:flex;gap:2px;overflow-x:auto;scrollbar-width:none;min-width:0}
.ct-tabs::-webkit-scrollbar{display:none}
.ct-tab{flex:none;border:0;background:none;color:var(--t3);font:600 13px var(--sans);padding:0 12px;height:44px;border-bottom:2px solid transparent;margin-bottom:-1px;cursor:pointer;white-space:nowrap;transition:color .2s}
.ct-tab:hover{color:var(--t1)}
.ct-tab[aria-selected=true]{color:var(--t1);border-bottom-color:var(--v)}
.ct-tab:focus-visible{outline-offset:-4px}
.ct-fallback{margin:0;padding:10px 16px 0;font:600 11.5px var(--mono);letter-spacing:.07em;text-transform:uppercase;color:var(--t3)}
.codetabs.is-ready .ct-fallback{display:none}
.codetabs:not(.is-ready) .ct-panel+.ct-panel{border-top:1px solid var(--line)}
.copy-btn{margin-left:auto;flex:none;display:inline-flex;align-items:center;gap:7px;height:32px;padding:0 11px;border:0;border-radius:8px;background:rgba(255,255,255,.06);color:var(--t2);font:600 12.5px var(--sans);cursor:pointer;transition:background .2s,color .2s}
.copy-btn:hover{background:rgba(255,255,255,.11);color:var(--t1)}
.copy-btn.is-done{color:var(--mint);background:var(--mintsoft)}
.copy-btn.is-failed{color:var(--red);background:var(--redsoft)}
.copy-btn svg{flex:none}
.docs-body pre{margin:0;padding:16px 18px;overflow:auto;font:500 13px/1.7 var(--mono);font-variant-ligatures:none;color:#dcd8ee;tab-size:2;-moz-tab-size:2}
.docs-body pre:focus-visible{outline-offset:-3px;border-radius:0}
.codetabs.long pre{max-height:min(640px,80vh)}
.tok-c{color:var(--t3)}
.tok-s{color:var(--mint)}
.tok-n{color:var(--amber)}
.tok-k{color:var(--v3)}
.tok-p{color:#8fb8ff}
.tok-v{color:var(--pink)}
.tok-f{color:#8fb8ff}
.tok-add{color:var(--mint)}
.tok-del{color:var(--red)}

/* ---------- use with AI ---------- */
.sdk-panel{padding:0 16px 16px}
.sdk-panel .sdk-links{font-size:14px;overflow-wrap:anywhere}
.ai-box{margin-top:22px;padding:20px 22px 22px;border-radius:var(--r);background:linear-gradient(180deg,rgba(124,108,255,.11),rgba(124,108,255,.04));box-shadow:inset 0 0 0 1px var(--vline)}
.docs-body .ai-box h3{margin:0}
.docs-body .ai-box p{margin-top:10px}
.prompt{margin-top:16px;padding:14px 16px;border-radius:12px;background:var(--bg2);box-shadow:inset 0 0 0 1px var(--line2);font:500 13px/1.7 var(--mono);color:#dcd8ee;white-space:pre-wrap;overflow-wrap:anywhere}
.ai-actions{display:flex;flex-wrap:wrap;gap:10px;margin-top:16px;align-items:center}
.ai-status{font-size:13.5px;color:var(--t2);min-height:22px;margin-top:10px}
.ai-status.is-error{color:var(--red)}.ai-status.is-done{color:var(--mint)}

/* ---------- closing call to action ---------- */
.developer-license-card{margin-top:22px;padding:22px;border-radius:var(--r);background:var(--bg2);box-shadow:inset 0 0 0 1px var(--vline)}
.developer-license-card .waitlist{max-width:none;margin:20px 0 0}
.license-label{display:block;margin-bottom:8px;font-size:14px;font-weight:600;color:var(--t1)}
.developer-license-card .form-status{margin-top:12px}
.developer-license-card .hp input{width:1px}
.developer-license-card .is-done .license-label{display:none}
.dev-cta .lede{max-width:560px}

/* ---------- phones and narrow windows ---------- */
@media (max-width:1100px){
  .docs{gap:44px}
}
@media (max-width:900px){
  .docs{grid-template-columns:minmax(0,1fr);gap:0;padding-top:0}
  .docs-side{display:none}
  .docs-jump{display:block;position:sticky;top:68px;z-index:40;margin:0 -24px 6px;padding:0 24px;background:rgba(11,10,18,.94);backdrop-filter:saturate(140%) blur(14px);border-bottom:1px solid var(--line)}
  .docs-jump summary{list-style:none;display:flex;align-items:center;gap:10px;min-height:48px;cursor:pointer;font-size:14.5px;font-weight:600;color:var(--t1)}
  .docs-jump summary::-webkit-details-marker{display:none}
  .docs-jump summary svg{color:var(--v3);flex:none}
  .docs-jump .cur{margin-left:auto;color:var(--v3);font-weight:500;text-align:right;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .docs-jump nav{padding:2px 0 14px;max-height:calc(100vh - 150px);overflow-y:auto}
  .docs-jump[open]{box-shadow:0 24px 40px -12px rgba(0,0,0,.75)}
  .docs-jump a{display:block;padding:9px 4px;border-top:1px solid var(--line);font-size:15px;color:var(--t2)}
  .docs-jump a[aria-current]{color:var(--t1);font-weight:600}
  .docs-jump ul ul a{padding-left:20px;font-size:14px;color:var(--t3)}
  .dsec{scroll-margin-top:122px}
  .dsec+.dsec{scroll-margin-top:88px}
  .docs-body h3{scroll-margin-top:132px}
  .facts{grid-template-columns:minmax(0,1fr)}
  .dsec+.dsec{margin-top:44px;padding-top:44px}
}
@media (max-width:640px){
  /* tables: rows become small cards once developers.js has labelled the cells (without it the table scrolls sideways) */
  .dtable{min-width:0}
  .dtable.wrapfirst td:first-child,.dtable.narrow td:first-child{overflow-wrap:anywhere}
  .dtable.is-stacked:not(.narrow) thead{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap}
  .dtable.is-stacked:not(.narrow),.dtable.is-stacked:not(.narrow) tbody,.dtable.is-stacked:not(.narrow) tr,.dtable.is-stacked:not(.narrow) td{display:block}
  .dtable.is-stacked:not(.narrow) tr{padding:12px 14px;border-bottom:1px solid var(--line)}
  .dtable.is-stacked:not(.narrow) tr:last-child{border-bottom:0}
  .dtable.is-stacked:not(.narrow) td{padding:2px 0;border:0;white-space:normal}
  .dtable.is-stacked:not(.narrow) td::before{content:attr(data-label);display:block;margin-top:8px;font:600 10.5px var(--mono);letter-spacing:.07em;text-transform:uppercase;color:var(--t3)}
  .dtable.is-stacked:not(.narrow) td:first-child::before{display:none}
  .dtable.fields.is-stacked tr{display:grid;grid-template-columns:minmax(0,1fr) auto auto;column-gap:12px;align-items:baseline}
  .dtable.fields.is-stacked td::before{display:none}
  .dtable.fields.is-stacked td:nth-child(4){grid-column:1/-1;margin-top:6px}
  .docs-body .endpoint code{white-space:normal;overflow-wrap:anywhere}
  .dev-hero{padding:44px 0 20px}
  .docs-jump{margin:0 -18px 6px;padding:0 18px}
  .docs-body p{font-size:15.5px}
  .docs-body pre{font-size:12.5px;padding:14px}
  .dtable{font-size:13.5px}
  .docs-body .qs li{padding-left:52px}
  .dev-actions .btn{flex:1 1 150px}
  .dev-base{flex:1 1 100%;margin-left:0;display:grid;grid-template-columns:minmax(0,1fr) auto;row-gap:2px;padding:10px 8px 10px 14px}
  .dev-base>span{grid-column:1/-1}
  .ai-actions .btn{flex:1 1 100%}
}