/* Soqucoin Playground v1 — in-browser IDE.
   Full-height 3-pane app on the site's austere system.css tokens.
   Layout/chrome only; the marketing pages keep their own flow. */

:root{ --pg-nav-h:64px; --pg-banner-h:38px; --pg-line:var(--rule); }

.pg-body{overflow:hidden}                 /* the app owns the viewport; no page scroll */
.pg-app{
  height:calc(100vh - var(--pg-nav-h) - var(--pg-banner-h));
  display:grid;
  grid-template-columns:230px minmax(0,1fr) 320px;
  min-height:0;
}

/* --- stagenet banner --- */
.pg-banner{
  height:var(--pg-banner-h);display:flex;align-items:center;gap:.55rem;
  padding:0 var(--pad);font-size:.78rem;color:var(--muted);
  background:var(--paper-2);border-bottom:1px solid var(--pg-line);overflow:hidden;white-space:nowrap}
.pg-banner b{color:var(--ink);font-weight:500}
.pg-banner-dot{width:7px;height:7px;border-radius:50%;background:var(--accent);flex:none;
  box-shadow:0 0 0 3px color-mix(in srgb,var(--accent) 22%,transparent)}

/* --- shared column chrome --- */
.pg-sidebar,.pg-right{background:var(--paper-2);min-height:0;display:flex;flex-direction:column}
.pg-sidebar{border-right:1px solid var(--pg-line)}
.pg-right{border-left:1px solid var(--pg-line);overflow-y:auto;padding:1rem;gap:1rem;display:flex}
.pg-side-head{padding:1rem 1rem .5rem}

/* --- LEFT: examples --- */
.pg-examples{flex:1;min-height:0;overflow-y:auto;padding:.25rem .5rem 1rem}
.pg-ex{display:block;width:100%;text-align:left;background:none;border:0;cursor:pointer;
  font-family:var(--sans);color:var(--muted);padding:.6rem .6rem;border-radius:3px;
  border-left:2px solid transparent;transition:color .15s,background .15s,border-color .15s}
.pg-ex:hover{color:var(--ink);background:color-mix(in srgb,var(--ink) 4%,transparent)}
.pg-ex.active{color:var(--ink);border-left-color:var(--accent);
  background:color-mix(in srgb,var(--ink) 5%,transparent)}
.pg-ex .pg-ex-title{display:block;font-size:.9rem;font-weight:500}
.pg-ex .pg-ex-sub{display:block;font-size:.72rem;color:var(--muted);margin-top:.15rem;line-height:1.35}
.pg-ex.active .pg-ex-sub{color:var(--muted)}

.pg-side-foot{border-top:1px solid var(--pg-line);padding:1rem}
.pg-tut-steps{list-style:none;counter-reset:s;margin:.75rem 0 0;padding:0;
  font-size:.8rem;color:var(--muted);line-height:1.5}
.pg-tut-steps li{counter-increment:s;position:relative;padding:.28rem 0 .28rem 1.7rem}
.pg-tut-steps li::before{content:counter(s);position:absolute;left:0;top:.28rem;
  width:1.15rem;height:1.15rem;border:1px solid var(--rule);
  font-family:var(--mono);font-size:.62rem;display:grid;place-items:center;color:var(--muted)}

/* --- CENTER: editor + console --- */
/* padding:0 beats system.css's editorial section rhythm (section{padding:clamp(...)})
   — it inset the app column 96px top+bottom and shrank the grid tracks */
.pg-center{display:grid;grid-template-rows:auto 1fr minmax(120px,var(--pg-console-h,34%));min-height:0;min-width:0;padding:0}
.pg-toolbar{display:flex;align-items:center;justify-content:space-between;gap:1rem;
  padding:.4rem .9rem;border-bottom:1px solid var(--pg-line);background:var(--paper)}
.pg-file{display:flex;align-items:baseline;gap:.6rem;min-width:0}
.pg-file-name{font-family:var(--mono);font-size:.85rem;color:var(--ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pg-file-meta{font-family:var(--mono);font-size:.7rem;color:var(--muted)}
/* multi-file tab strip (pg-file-name becomes the tab host when >1 file) */
.pg-file-name.pg-tabs{display:flex;gap:.15rem;overflow-x:auto}
.pg-tab{font-family:var(--mono);font-size:.78rem;color:var(--muted);background:none;border:none;
  padding:.15rem .5rem;border-radius:5px;cursor:pointer;white-space:nowrap;line-height:1.4}
.pg-tab:hover{color:var(--ink);background:var(--pg-line)}
.pg-tab.active{color:var(--ink);background:var(--pg-line);font-weight:500}
.pg-tool-actions{display:flex;align-items:center;gap:.6rem;flex:none}
.pg-run-icon{font-size:.7rem;position:relative;top:-1px}
.btn.pg-running{opacity:.7;cursor:progress}

.pg-editor-wrap{position:relative;min-height:0;min-width:0;background:var(--paper)}
.pg-editor{position:absolute;inset:0}
.pg-editor-loading{position:absolute;inset:0;display:grid;place-items:center;
  font-family:var(--mono);font-size:.8rem;color:var(--muted);background:var(--paper);z-index:2}

.pg-console-wrap{display:flex;flex-direction:column;min-height:0;
  border-top:1px solid var(--pg-line);background:var(--paper-2)}
.pg-console-head{display:flex;align-items:center;gap:.75rem;padding:.45rem .9rem;
  border-bottom:1px solid var(--pg-line)}
.pg-console-status{font-family:var(--mono);font-size:.7rem;color:var(--muted)}
.pg-console{flex:1;min-height:0;overflow-y:auto;padding:.6rem .9rem 1rem;
  font-family:var(--mono);font-size:.78rem;line-height:1.65}
.pg-console:empty::before{content:"— run your code and output lands here —";color:var(--muted)}
.pg-line{padding:.09rem 0;white-space:pre-wrap;word-break:break-word;color:var(--ink)}
.pg-line.pg-muted-line{color:var(--muted)}
.pg-line.pg-ok{color:var(--ok)}    /* status ramp tokens — see the foundry-cues block */
.pg-line.pg-err{color:var(--down)} /* errors are status, not accent (accent = action) */
.pg-line.pg-cmd{color:var(--muted)}
.pg-line a{color:inherit;border-bottom:1px solid var(--rule)}
.pg-line a:hover{border-color:var(--accent)}

/* --- RIGHT: wallet + activity cards --- */
.pg-card{border:1px solid var(--pg-line);border-radius:4px;padding:.9rem;background:var(--paper)}
.pg-card-quiet{background:none}
.pg-card-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:.7rem}
.pg-net{font-family:var(--mono);font-size:.66rem;letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}
.pg-full{width:100%}
.pg-wallet-empty p{margin-bottom:.9rem}

.pg-bal{display:flex;align-items:baseline;gap:.4rem}
.pg-bal-num{font-family:var(--serif);font-size:2.1rem;line-height:1;color:var(--ink)}
.pg-bal-unit{font-family:var(--mono);font-size:.78rem;color:var(--muted)}
.pg-bal-sub{font-family:var(--mono);font-size:.72rem;color:var(--muted);margin:.4rem 0 .8rem}
.pg-addr-row{display:flex;align-items:center;gap:.5rem;padding:.5rem 0;
  border-top:1px solid var(--pg-line);border-bottom:1px solid var(--pg-line);margin-bottom:.8rem}
.pg-addr{font-family:var(--mono);font-size:.72rem;color:var(--ink);word-break:break-all;flex:1}
.pg-wallet-actions{display:flex;flex-direction:column;gap:.6rem;align-items:center}

/* quiet inline links: muted at rest, accent on intent (dev-tool convention —
   a rail full of accent-colored links dilutes the accent) */
.pg-linkbtn{font-family:var(--mono);font-size:.7rem;background:none;border:0;color:var(--muted);
  cursor:pointer;padding:0;text-decoration:none}
.pg-linkbtn:hover{color:var(--accent);text-decoration:underline}
.pg-danger{color:var(--muted)}
.pg-danger:hover{color:var(--down)}

.pg-activity{display:flex;flex-direction:column;gap:.55rem;max-height:230px;overflow-y:auto}
.pg-activity-empty{font-size:.8rem;line-height:1.45}
.pg-tx{display:flex;flex-direction:column;gap:.15rem;padding:.5rem 0;border-bottom:1px solid var(--pg-line)}
.pg-tx:last-child{border-bottom:0}
.pg-tx-top{display:flex;align-items:baseline;justify-content:space-between;gap:.5rem}
.pg-tx-kind{font-family:var(--mono);font-size:.68rem;letter-spacing:.08em;text-transform:uppercase;color:var(--accent)}
.pg-tx-amt{font-family:var(--mono);font-size:.76rem;color:var(--ink)}
.pg-tx-id{font-family:var(--mono);font-size:.7rem;color:var(--muted)}
.pg-tx-id a{color:var(--muted);border-bottom:1px solid var(--rule)}
.pg-tx-id a:hover{color:var(--accent);border-color:var(--accent)}
.pg-api-note{font-size:.8rem;line-height:1.5;margin-bottom:.7rem}

/* --- foundry cues (bead itn) — instrument type + welded panels ---
   Scope: the playground app + banner ONLY. The site accent is kept (copper
   stays pool-only per the ecosystem-cohesion decision); what transfers is
   the discipline: machine numbers in Martian Mono with tabular figures,
   engraved low-contrast micro-labels, zero-radius panel chrome, stamped
   Archivo controls, and a live proof pulse in the banner. */
.pg-app,.pg-banner{--mono:'Martian Mono','IBM Plex Mono',ui-monospace,monospace}
.pg-app{font-variant-numeric:tabular-nums}

/* engraved labels: etched captions, not accent-colored (accent = action/live) */
.pg-app .label{color:var(--muted);font-size:.64rem;letter-spacing:.2em}

/* welded panels: the app chrome is ruled apart by seams, not rounded cards */
.pg-app .pg-card,.pg-app .pg-tab,.pg-app .pg-ex,
.pg-app .btn,.pg-app .btn-ghost{border-radius:0}

/* the balance is a number the machine reports — mono readout, not serif */
.pg-bal-num{font-family:var(--mono);font-size:1.7rem;font-weight:600;letter-spacing:-.01em}

/* status + metal tokens (encoding only, desaturated — foundry ramp) */
.pg-app,.pg-banner{--ok:#2e7d57;--down:#b04a3d;--soq:#6c58d9}
[data-theme="dark"] .pg-app,[data-theme="dark"] .pg-banner{--ok:#57b98a;--down:#d96a5b;--soq:#8e7cf0}

/* ── control system: ONE language for every clickable ──────────────────
   Dev-tool convention: a single filled primary per surface (Run /
   Generate), borderless quiet controls in the toolbar, seam-bordered
   field controls inside panels. One height, one face, one case. */
.pg-app .btn,.pg-app .btn-ghost{
  min-height:0;height:30px;padding:0 14px;
  display:inline-flex;align-items:center;justify-content:center;gap:.45rem;
  font-family:var(--mono);font-size:.66rem;font-weight:600;letter-spacing:.1em;
  text-transform:uppercase;text-decoration:none;cursor:pointer;
  transition:background .15s,color .15s,border-color .15s}
.pg-app .btn{background:var(--accent);color:var(--paper);border:1px solid transparent}
.pg-app .btn:hover{background:var(--accent-ink)}
.pg-app .btn-ghost{background:none;border:1px solid transparent;color:var(--muted)}
.pg-app .btn-ghost:hover{color:var(--ink);background:color-mix(in srgb,var(--ink) 7%,transparent)}
.pg-app .btn[disabled],.pg-app .btn-ghost[disabled]{opacity:.45;cursor:default}
.pg-app .pg-full{width:100%;height:32px}
.pg-app .btn-ghost.pg-full{border:1px solid var(--rule);color:var(--ink)}
.pg-app .btn-ghost.pg-full:hover{border-color:var(--accent);color:var(--accent);background:none}

/* ── panel primitive: right-rail cards become seamed panels with an
   engraved title band (the foundry console panel-head) ── */
.pg-app .pg-card-head{margin:-.9rem -.9rem .9rem;padding:.5rem .9rem;
  border-bottom:1px solid var(--rule);background:var(--paper-2)}
/* the wallet is the SOQ gauge — metal-encoded like the pool's balance cells */
.pg-right .pg-card:first-child{border-top:2px solid var(--soq)}
.pg-app .pg-bal-unit{color:var(--soq);font-weight:600;letter-spacing:.08em}

/* console-grade iron (dark mode): the app adopts the foundry neutral ramp —
   iron grounds, SOLID seams (not alpha hairlines), the hi/mid/lo text ramp.
   The accent stays the site's own; copper remains pool-only. */
[data-theme="dark"] .pg-app,[data-theme="dark"] .pg-banner{
  --paper:#0b0d10; --paper-2:#10141a; --ink:#e9edf2; --muted:#aab4c0;
  --rule:#232c38;
}
[data-theme="dark"] .pg-app .label,[data-theme="dark"] .pg-banner .label{color:#717d8b}
[data-theme="dark"] .pg-app .pg-ex-sub,
[data-theme="dark"] .pg-app .pg-tut-steps,
[data-theme="dark"] .pg-app .pg-file-meta,
[data-theme="dark"] .pg-app .pg-console-status{color:#8b96a3}

/* live pulse in the stagenet banner: height + gateway lamp */
.pg-pulse{margin-left:auto;display:flex;align-items:center;gap:1.1rem;flex:none;
  font-family:var(--mono);font-size:.64rem}
.pg-pulse-item{display:flex;align-items:center;gap:.45rem}
.pg-pulse .k{color:var(--muted);letter-spacing:.14em;text-transform:uppercase}
.pg-pulse .v{color:var(--ink)}
.pg-lamp{width:7px;height:7px;border-radius:50%;background:var(--muted);flex:none}
.pg-lamp.ok{background:var(--ok);box-shadow:0 0 5px color-mix(in srgb,var(--ok) 55%,transparent)}
.pg-lamp.down{background:var(--down)}

/* --- responsive: collapse the side rails under the editor --- */
@media(max-width:960px){
  .pg-body{overflow:auto}
  .pg-app{height:auto;grid-template-columns:1fr;grid-template-rows:none}
  .pg-sidebar{border-right:0;border-bottom:1px solid var(--pg-line)}
  .pg-right{border-left:0;border-top:1px solid var(--pg-line);flex-direction:column}
  .pg-center{height:70vh}
  .pg-examples{max-height:180px}
  .pg-pulse{display:none}
}