/* Playground "Code" tab: Live view | Code tabs on the right panel, and a
   code panel that turns the current form into Python / TypeScript / cURL
   (setupPgCode in app.js). Scoped to #sec-playground; tokens only. Dark
   syntax colors come from the shared .tk-* classes in app.css; light
   remaps them to the light tokens below. */

/* ── Tabs ─────────────────────────────────────────────────────────────── */
#sec-playground .pgc-tabs {
  display: flex;
  align-items: stretch;
  gap: 2px;
  flex-shrink: 0;
  height: 40px;
  padding: 0 8px;
  border-bottom: 1px solid var(--border);
  min-width: 0;
}
#sec-playground .pgc-tab {
  appearance: none;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 0 10px;
  margin-bottom: -1px;
  background: transparent;
  border: 0;
  border-bottom: 2px solid transparent;
  font: 500 12.5px/1 var(--font-sans);
  color: var(--text-muted);
  cursor: pointer;
  white-space: nowrap;
  transition: color 120ms ease, border-color 120ms ease;
}
#sec-playground .pgc-tab:hover { color: var(--text); }
#sec-playground .pgc-tab:focus-visible { outline: none; box-shadow: var(--vercel-focus); border-radius: 6px 6px 0 0; }
#sec-playground .pgc-tab.active { color: var(--text); border-bottom-color: var(--emerald); }
#sec-playground .pgc-tab-dot {
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--text-muted);
  opacity: .5;
}
#sec-playground .pgc-tab.active .pgc-tab-dot { background: var(--emerald); opacity: 1; }
#sec-playground .pgc-tab-ico {
  font: 600 11px/1 var(--font-mono);
  letter-spacing: -0.02em;
  color: var(--text-muted);
}
#sec-playground .pgc-tab.active .pgc-tab-ico { color: var(--emerald); }
#sec-playground .pgc-tabs-hint {
  margin-left: auto;
  align-self: center;
  padding: 0 6px;
  min-width: 0;
  font-size: 11.5px;
  color: var(--text-muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Code tab active: the panel replaces the live view in place. */
#sec-playground .pg-preview.pgc-on > .pg-preview-chrome,
#sec-playground .pg-preview.pgc-on > .pg-preview-body,
#sec-playground .pg-preview.pgc-on > .pg-result { display: none !important; }

/* ── Code panel ───────────────────────────────────────────────────────── */
#sec-playground .pgc-panel {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
}
#sec-playground .pgc-panel[hidden] { display: none; }
#sec-playground .pgc-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 8px 12px;
  padding: 10px 12px;
  border-bottom: 1px solid var(--border);
  flex-shrink: 0;
}
#sec-playground .pgc-langs .pg-seg-opt { padding: 5px 12px; }
#sec-playground .pgc-actions { display: flex; align-items: center; gap: 12px; margin-left: auto; }
#sec-playground .pgc-docs {
  font-size: 12.5px;
  font-weight: 500;
  color: var(--text-muted);
  text-decoration: none;
  white-space: nowrap;
}
#sec-playground .pgc-docs:hover { color: var(--text); }
#sec-playground .pgc-copy {
  appearance: none;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 30px;
  padding: 0 11px;
  background: var(--vercel-surface);
  border: 1px solid var(--border-light);
  border-radius: 7px;
  font: 500 12.5px/1 var(--font-sans);
  color: var(--text);
  cursor: pointer;
  transition: background 120ms ease, color 120ms ease, border-color 120ms ease;
}
#sec-playground .pgc-copy svg { width: 14px; height: 14px; }
#sec-playground .pgc-copy:hover { background: var(--vercel-hover); }
#sec-playground .pgc-copy:focus-visible { outline: none; box-shadow: var(--vercel-focus); }
#sec-playground .pgc-copy.copied { color: var(--emerald); border-color: var(--border-accent, var(--emerald)); }

#sec-playground .pgc-code {
  flex: 1;
  min-height: 0;
  margin: 0;
  padding: 16px 18px;
  overflow: auto;
  background: var(--vercel-bg);
  color: var(--text);
  font: 400 12.5px/1.7 var(--font-mono);
  letter-spacing: 0;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  tab-size: 4;
}
#sec-playground .pgc-code:focus-visible { outline: none; box-shadow: inset var(--vercel-focus); }
#sec-playground .pgc-code code {
  font: inherit;
  color: inherit;
  background: none;
  padding: 0;
  border-radius: 0;
}
#sec-playground .pgc-foot {
  margin: 0;
  padding: 10px 14px;
  border-top: 1px solid var(--border);
  flex-shrink: 0;
  font-size: 12px;
  line-height: 1.55;
  color: var(--text-muted);
}
#sec-playground .pgc-foot code {
  font: 500 11.5px/1 var(--font-mono);
  padding: 2px 5px;
  border-radius: 4px;
  background: var(--vercel-elevated);
  color: var(--text);
}

/* Stacked layout (below 1200px the preview flows under the form). */
@media (max-width: 1200px) {
  #sec-playground .pg-preview.pgc-on .pgc-code { max-height: 70vh; }
}
@media (max-width: 520px) {
  #sec-playground .pgc-tabs-hint { display: none; }
  /* Phones: keep code lines intact and scroll the block sideways, which
     reads better than soft-wrapping every statement. */
  #sec-playground .pgc-code { padding: 14px; font-size: 12px; white-space: pre; overflow-wrap: normal; }
  #sec-playground .pgc-langs .pg-seg-opt { padding: 5px 10px; }
}

/* ── Light theme ──────────────────────────────────────────────────────── */
:root[data-theme="light"] #sec-playground .pgc-tabs { border-bottom-color: var(--vercel-border); }
:root[data-theme="light"] #sec-playground .pgc-tab { color: var(--vercel-muted); }
:root[data-theme="light"] #sec-playground .pgc-tab:hover,
:root[data-theme="light"] #sec-playground .pgc-tab.active { color: var(--ink); }
:root[data-theme="light"] #sec-playground .pgc-tab.active { border-bottom-color: var(--ink); }
:root[data-theme="light"] #sec-playground .pgc-tab-ico,
:root[data-theme="light"] #sec-playground .pgc-tabs-hint,
:root[data-theme="light"] #sec-playground .pgc-docs,
:root[data-theme="light"] #sec-playground .pgc-foot { color: var(--vercel-muted); }
:root[data-theme="light"] #sec-playground .pgc-docs:hover { color: var(--ink); }
:root[data-theme="light"] #sec-playground .pgc-bar,
:root[data-theme="light"] #sec-playground .pgc-foot { border-color: var(--vercel-border); }
:root[data-theme="light"] #sec-playground .pgc-copy {
  background: var(--vercel-surface);
  border-color: var(--vercel-border-strong);
  color: var(--ink);
}
:root[data-theme="light"] #sec-playground .pgc-copy:hover { background: var(--vercel-hover); }
:root[data-theme="light"] #sec-playground .pgc-copy.copied { color: var(--emerald-hover); }
:root[data-theme="light"] #sec-playground .pgc-code { background: var(--vercel-bg); color: var(--ink); }
:root[data-theme="light"] #sec-playground .pgc-foot code { background: var(--vercel-elevated); color: var(--ink); }
:root[data-theme="light"] #sec-playground .pgc-code .tk-k { color: var(--iris); }
:root[data-theme="light"] #sec-playground .pgc-code .tk-s { color: var(--emerald-hover); }
:root[data-theme="light"] #sec-playground .pgc-code .tk-f { color: var(--ink); font-weight: 500; }
:root[data-theme="light"] #sec-playground .pgc-code .tk-n { color: var(--amber); }
:root[data-theme="light"] #sec-playground .pgc-code .tk-c { color: var(--vercel-disabled); }