/* API playground: the homepage example's Run control and the /playground page. Uses the site's tokens from landing.css. */
.pg-sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
[data-pg] [hidden],[data-pg][hidden],.pg-codebox [hidden]{display:none!important}
[data-pg] :focus-visible,.pg-codebox :focus-visible{outline:2px solid var(--gold);outline-offset:2px}

/* Instrument choice */
.pg-instruments{display:flex;flex-wrap:wrap;gap:6px;border:0;margin:0;padding:0;min-width:0}
.pg-chip{position:relative;cursor:pointer}
.pg-chip input{position:absolute;opacity:0;width:100%;height:100%;margin:0;cursor:pointer}
.pg-chip span{display:flex;flex-direction:column;justify-content:center;min-height:36px;padding:0 11px;border:1px solid var(--line2);border-radius:7px;font:400 12.5px var(--mono);color:var(--text);background:transparent}
.pg-chip small{font:400 12px/1.3 var(--sans);color:var(--muted);margin-top:2px}
.pg-chip input:hover+span{border-color:#4f4f4f}
.pg-chip input:checked+span{border-color:var(--gold);color:var(--strong)}
.pg-chip input:focus-visible+span{outline:2px solid var(--gold);outline-offset:2px}

/* Homepage row */
.pg-run{display:flex;flex-wrap:wrap;align-items:center;gap:8px 10px;padding:12px 16px;border-top:1px solid var(--line)}
.pg-run-btn{min-height:36px;padding:0 14px;border:1px solid var(--line2);border-radius:7px;background:var(--card2);color:var(--strong);font:600 13.5px var(--sans);cursor:pointer}
.pg-run-btn:hover:not(:disabled){border-color:var(--gold);color:var(--gold2)}
.pg-run-btn:disabled,.pg-go:disabled{opacity:.6;cursor:default}
.pg-more{margin-left:auto;font-size:13px;color:var(--muted);text-decoration:underline;text-underline-offset:3px}.pg-more:hover{color:var(--gold2)}
/* The live status is for screen readers; the visible note under the JSON already says the same thing. */
.pg-status{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
[data-pg] .hm-json,.pg-code{scrollbar-width:thin;scrollbar-color:var(--line2) transparent}
[data-pg] .hm-json::-webkit-scrollbar,.pg-code::-webkit-scrollbar{height:6px;width:6px}
[data-pg] .hm-json::-webkit-scrollbar-thumb,.pg-code::-webkit-scrollbar-thumb{background:var(--line2);border-radius:3px}
[data-pg] .hm-json::-webkit-scrollbar-track,.pg-code::-webkit-scrollbar-track{background:transparent}

/* State labels */
.pg-state.pg-fresh{color:var(--ok);border-color:var(--ok)}
.pg-state.pg-market_closed,.pg-state.pg-limited{color:var(--gold);border-color:var(--gold)}
.pg-state.pg-delayed,.pg-state.pg-unavailable{color:var(--warn);border-color:var(--warn)}

/* After a successful run */
.pg-cta{border:1px solid var(--line2);border-radius:var(--r);background:var(--bg2);padding:18px 20px}
.pg-cta-copy{margin:0;color:var(--text);font-size:15px;line-height:1.55}
.pg-cta .hm-offer{margin:8px 0 0;max-width:none}
.pg-cta-row{margin-top:14px}
.pg-cta-home{border:0;border-top:1px solid var(--line);border-radius:0;background:transparent;padding:14px 16px}
.pg-cta-home .pg-cta-copy{font-size:13.5px}.pg-cta-home .hm-offer{font-size:12.5px}

/* /playground */
.pg h1{margin-bottom:12px}
.pg-bench{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:16px;align-items:start}
.pg-pane{background:var(--bg2);border:1px solid var(--line2);border-radius:var(--r);padding:20px;min-width:0}
.pg-pane h2{font-size:16px;margin:0 0 14px}
.pg-bench>.pg-cta{grid-column:1/-1}
.pg .pg-instruments{flex-direction:column}
.pg .pg-chip span{min-height:56px;padding:0 14px;font-size:14px}
.pg-endpoint{margin:14px 0;font:400 13px var(--mono);color:var(--text);overflow-wrap:anywhere}.pg-endpoint b{color:var(--gold);font-weight:400}
.pg-go{width:100%;min-height:46px}

.pg-fine{margin:12px 0 0;font-size:13px;line-height:1.5;color:var(--muted)}
.pg-fine code{font:400 12px var(--mono);color:var(--text)}
.pg-resp-head{display:flex;justify-content:space-between;align-items:center;gap:12px;margin-bottom:12px}.pg-resp-head h2{margin:0}
.pg-req-line{margin:0 0 12px;font:400 12.5px var(--mono);color:var(--text)}.pg-req-line b{color:var(--gold);font-weight:400}
.pg-facts{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;margin:0 0 14px;padding-bottom:14px;border-bottom:1px solid var(--line)}
.pg-facts dt{font-size:12px;color:var(--muted)}.pg-facts dd{margin:3px 0 0;font:400 13.5px/1.35 var(--mono);color:var(--strong);overflow-wrap:anywhere}
.pg-json,.pg-code{padding:0;background:transparent;font-size:13px;min-height:1.65em}
.pg-json{max-height:340px;overflow:auto}
.pg-note{margin:12px 0 0;font-size:13.5px;line-height:1.5;color:var(--muted)}.pg-note:empty{display:none}
.pg-codebox{margin-top:16px}
.pg-code-head{display:flex;justify-content:space-between;align-items:center;gap:10px;margin-bottom:14px;border-bottom:1px solid var(--line)}
.pg-tabs{display:flex;overflow:auto hidden;scrollbar-width:none}
.pg-tab{min-height:42px;padding:0 13px;background:none;border:0;border-bottom:2px solid transparent;margin-bottom:-1px;color:var(--muted);font:500 14px var(--sans);cursor:pointer;white-space:nowrap}
.pg-tab:hover{color:var(--strong)}.pg-tab[aria-selected=true]{color:var(--strong);border-bottom-color:var(--gold)}
.pg-copy{flex:none;min-height:34px;padding:0 12px;border:1px solid var(--line2);border-radius:7px;background:transparent;color:var(--strong);font:500 13px var(--sans);cursor:pointer}
.pg-copy:hover{border-color:var(--gold);color:var(--gold2)}
.pg-code{overflow-x:auto;line-height:1.65;color:#cfcfcf}

@media (max-width:900px){.pg-bench{grid-template-columns:minmax(0,1fr)}.pg .pg-instruments{flex-direction:row}.pg .pg-chip{flex:1 1 0;min-width:0}}
@media (max-width:520px){
  .pg-run{padding:12px}.pg-chip{flex:1 1 0}.pg-chip span{min-height:44px;align-items:center;padding:0 4px;font-size:12px}
  .pg-run-btn{flex:1 1 100%;min-height:44px}.pg-more{margin:2px auto 0}
.pg-cta-home{padding:12px}.pg-cta-home .btn{width:100%}
  .pg-pane{padding:16px}.pg .pg-instruments{flex-direction:column}.pg .pg-chip span{min-height:50px;align-items:flex-start;padding:0 14px}
  .pg-facts{grid-template-columns:repeat(2,minmax(0,1fr))}.pg-json,.pg-code{font-size:12px}.pg-cta .btn{width:100%}
}