/* ============================================================
   The Bible API - Playground
   Scoped styles for /playground.html only
   ============================================================ */

.playground-main {
  padding-top: var(--page-top-offset);
  padding-bottom: 4rem;
}

.playground-header {
  margin-bottom: 1.75rem;
}

.playground-header .eyebrow {
  display: inline-block;
  font-size: 0.78rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--color-primary);
  font-weight: 600;
  margin-bottom: 0.4rem;
}

.playground-header h1 {
  font-family: var(--font-serif);
  font-size: clamp(2rem, 4vw, 2.8rem);
  line-height: 1.1;
  margin: 0 0 0.4rem;
  color: var(--color-text);
}

.playground-header .lead {
  color: var(--color-text-muted);
  font-size: 1.05rem;
  max-width: 62ch;
  margin: 0;
}

/* ------------------- Top Utility Bar ------------------- */
.pg-utility-bar {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.6rem 0.75rem;
  background: var(--color-bg-elevated);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
  margin-bottom: 1.25rem;
  flex-wrap: wrap;
}

.pg-utility-bar .pg-utility-label {
  font-size: 0.75rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-text-muted);
  font-weight: 600;
  padding: 0 0.25rem;
  flex-shrink: 0;
}

.pg-endpoint-preview {
  flex: 1;
  min-width: 220px;
  font-family: var(--font-mono);
  font-size: 0.88rem;
  color: var(--color-code-text);
  background: var(--color-code-bg);
  border: 1px solid var(--color-border);
  border-radius: calc(var(--radius) - 4px);
  padding: 0.5rem 0.75rem;
  overflow-x: auto;
  white-space: nowrap;
  -ms-overflow-style: none;
  scrollbar-width: thin;
}

.pg-copy-endpoint {
  flex-shrink: 0;
}

/* ------------------- Quick Presets ------------------- */
.pg-presets {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  align-items: center;
  margin-bottom: 1.25rem;
}

.pg-presets-label {
  font-size: 0.78rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--color-text-muted);
  font-weight: 600;
  margin-right: 0.25rem;
}

.pg-preset-btn {
  font-family: var(--font-sans);
  font-size: 0.88rem;
  font-weight: 500;
  padding: 0.4rem 0.85rem;
  color: var(--color-text);
  background: var(--color-bg-elevated);
  border: 1px solid var(--color-border);
  border-radius: 999px;
  cursor: pointer;
  transition:
    border-color 0.2s ease,
    background-color 0.2s ease,
    color 0.2s ease,
    transform 0.15s ease;
}

.pg-preset-btn:hover,
.pg-preset-btn:focus-visible {
  border-color: var(--color-primary);
  color: var(--color-primary);
  outline: none;
}

.pg-preset-btn:active {
  transform: translateY(1px);
}

/* ------------------- Two-Panel Layout ------------------- */
.pg-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr);
  gap: 1.25rem;
  align-items: start;
}

.pg-panel {
  background: var(--color-bg-elevated);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  padding: 1.25rem 1.25rem 1.4rem;
  min-width: 0;
}

.pg-panel-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  margin-bottom: 1rem;
  padding-bottom: 0.75rem;
  border-bottom: 1px solid var(--color-border);
}

.pg-panel-title {
  font-family: var(--font-sans);
  font-size: 0.95rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: var(--color-text);
  margin: 0;
  text-transform: uppercase;
}

.pg-panel-actions {
  display: flex;
  gap: 0.4rem;
  flex-wrap: wrap;
}

/* ------------------- Request Builder (Left) ------------------- */
.pg-field {
  display: flex;
  flex-direction: column;
  margin-bottom: 1rem;
}

.pg-field label {
  font-size: 0.82rem;
  font-weight: 600;
  letter-spacing: 0.03em;
  color: var(--color-text);
  margin-bottom: 0.4rem;
}

.pg-field .pg-hint {
  font-size: 0.76rem;
  color: var(--color-text-muted);
  margin-top: 0.3rem;
  font-weight: 400;
}

.pg-input,
.pg-select {
  /* Shared layout rules - Translation <select> and Book <input> must
     render with identical width, height, padding, font, border radius,
     and vertical alignment so the Playground form fields line up
     perfectly across all rows/grid cells. */
  display: block;
  box-sizing: border-box;
  width: 100%;
  height: 2.75rem;
  margin: 0;
  padding: 0.65rem 0.9rem;
  font-family: var(--font-sans);
  font-size: 0.95rem;
  font-weight: 400;
  line-height: 1.3;
  color: var(--color-text);
  background-color: var(--color-bg);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  vertical-align: middle;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  transition:
    border-color 0.2s ease,
    box-shadow 0.2s ease,
    background-color 0.2s ease;
}

/* Ensure number inputs match text inputs exactly (Chrome/Safari trim
   the native number spinner but keep width parity with other fields). */
.pg-input[type="number"]::-webkit-outer-spin-button,
.pg-input[type="number"]::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}
.pg-input[type="number"] {
  -moz-appearance: textfield;
}

/* Native <select> needs extra right padding to make room for the
   custom caret icon, otherwise the selected text overlaps it.
   The same caret SVG and background sizing is used consistently
   across every dropdown to keep visual parity.
   The Book field is an <input list="..."> (datalist) that also
   behaves like a dropdown, so we apply the identical caret + padding
   to any .pg-input with a `list` attribute. This guarantees the
   Book and Translation controls look pixel-identical while keeping
   native <select>/<datalist> behavior. */
.pg-select,
.pg-input[list] {
  padding-right: 2.5rem;
  background-image: url("data:image/svg+xml;charset=UTF-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='%238a7a60'%3E%3Cpath d='M5.516 7.548a.625.625 0 0 1 .884 0L10 11.148l3.6-3.6a.625.625 0 1 1 .884.884l-4.042 4.042a.625.625 0 0 1-.884 0L5.516 8.432a.625.625 0 0 1 0-.884z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 0.85rem center;
  background-size: 1rem 1rem;
  cursor: pointer;
}

.pg-input[list] {
  /* Re-enable a text caret when the user actually types into the field
     (overrides the pointer above for the typing surface). */
  cursor: text;
}

[data-theme="dark"] .pg-select,
[data-theme="dark"] .pg-input[list] {
  background-image: url("data:image/svg+xml;charset=UTF-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='%23a89c83'%3E%3Cpath d='M5.516 7.548a.625.625 0 0 1 .884 0L10 11.148l3.6-3.6a.625.625 0 1 1 .884.884l-4.042 4.042a.625.625 0 0 1-.884 0L5.516 8.432a.625.625 0 0 1 0-.884z'/%3E%3C/svg%3E");
}

/* Remove the browser-default clear ("x") button that appears on
   datalist-backed inputs in some browsers (WebKit/Edge), so the
   right edge matches the plain caret of the Translation select. */
.pg-input[list]::-webkit-calendar-picker-indicator {
  display: none !important;
  opacity: 0;
}
.pg-input[list]::-webkit-search-cancel-button,
.pg-input[list]::-webkit-clear-button {
  -webkit-appearance: none;
  display: none;
}

/* Ensure the Book/Translation fields share identical box metrics
   inside any .pg-field-row grid cell (defensive normalization in
   case a wrapper adds conflicting width/margin rules). */
.pg-field-row > .pg-field {
  min-width: 0;
}
.pg-field-row .pg-input,
.pg-field-row .pg-select {
  width: 100%;
  margin: 0;
}

/* Identical focus state for Book <input> and Translation <select>. */
.pg-input:focus,
.pg-select:focus,
.pg-input:focus-visible,
.pg-select:focus-visible {
  outline: none;
  border-color: var(--color-primary);
  box-shadow: 0 0 0 3px
    color-mix(in srgb, var(--color-primary) 22%, transparent);
}

.pg-input::placeholder {
  color: var(--color-text-muted);
  opacity: 0.75;
}

.pg-field-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.85rem;
}

.pg-run-row {
  display: flex;
  gap: 0.5rem;
  margin-top: 0.5rem;
}

.pg-run-btn {
  flex: 1;
  font-size: 1rem;
}

/* ------------------- Response Viewer (Right) ------------------- */
.pg-response-wrap {
  position: relative;
  background: var(--color-code-bg);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  min-height: 320px;
  max-height: 560px;
  overflow: auto;
}

.pg-response-pre {
  margin: 0;
  padding: 1rem 1.1rem;
  font-family: var(--font-mono);
  font-size: 0.86rem;
  line-height: 1.55;
  color: var(--color-code-text);
  white-space: pre-wrap;
  word-break: break-word;
}

.pg-response-status {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-family: var(--font-mono);
  font-size: 0.8rem;
  color: var(--color-text-muted);
  margin-bottom: 0.65rem;
}

.pg-status-badge {
  display: inline-block;
  padding: 0.15rem 0.55rem;
  border-radius: 999px;
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  background: var(--color-bg-alt);
  color: var(--color-text-muted);
  border: 1px solid var(--color-border);
}

.pg-status-badge.is-success {
  background: rgba(76, 139, 76, 0.12);
  color: #4c8b4c;
  border-color: rgba(76, 139, 76, 0.3);
}

.pg-status-badge.is-error {
  background: rgba(180, 73, 73, 0.12);
  color: #b44949;
  border-color: rgba(180, 73, 73, 0.3);
}

.pg-status-badge.is-loading {
  background: rgba(139, 111, 71, 0.15);
  color: var(--color-primary);
  border-color: rgba(139, 111, 71, 0.3);
}

[data-theme="dark"] .pg-status-badge.is-success {
  color: #8bd08b;
}

[data-theme="dark"] .pg-status-badge.is-error {
  color: #e68b8b;
}

/* Toggle group (Formatted/Raw) */
.pg-toggle-group {
  display: inline-flex;
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  overflow: hidden;
  background: var(--color-bg);
}

.pg-toggle-btn {
  font-family: var(--font-sans);
  font-size: 0.78rem;
  font-weight: 500;
  padding: 0.35rem 0.7rem;
  color: var(--color-text-muted);
  background: transparent;
  border: none;
  cursor: pointer;
  transition:
    background-color 0.2s ease,
    color 0.2s ease;
}

.pg-toggle-btn.is-active {
  background: var(--color-primary);
  color: #faf8f3;
}

[data-theme="dark"] .pg-toggle-btn.is-active {
  color: #1a1612;
}

.pg-toggle-btn:not(.is-active):hover {
  color: var(--color-text);
  background: var(--color-bg-alt);
}

/* Small copy button in panel header (matches .copy-btn feel) */
.pg-mini-btn {
  font-family: var(--font-sans);
  font-size: 0.78rem;
  font-weight: 500;
  padding: 0.35rem 0.75rem;
  color: var(--color-text);
  background: var(--color-bg);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  cursor: pointer;
  transition:
    border-color 0.2s ease,
    color 0.2s ease,
    background-color 0.2s ease;
}

.pg-mini-btn:hover,
.pg-mini-btn:focus-visible {
  border-color: var(--color-primary);
  color: var(--color-primary);
  outline: none;
}

.pg-mini-btn.copied {
  border-color: var(--color-primary);
  color: var(--color-primary);
}

/* JSON syntax highlighting (lightweight) */
.pg-json-key {
  color: #8b6f47;
}
.pg-json-string {
  color: #4c8b4c;
}
.pg-json-number {
  color: #b07a2b;
}
.pg-json-boolean {
  color: #b44949;
}
.pg-json-null {
  color: #8a7a60;
  font-style: italic;
}

[data-theme="dark"] .pg-json-key {
  color: #d9bb87;
}
[data-theme="dark"] .pg-json-string {
  color: #8bd08b;
}
[data-theme="dark"] .pg-json-number {
  color: #e0b878;
}
[data-theme="dark"] .pg-json-boolean {
  color: #e68b8b;
}
[data-theme="dark"] .pg-json-null {
  color: #a89c83;
}

/* Spinner (simple) */
.pg-spinner {
  display: inline-block;
  width: 12px;
  height: 12px;
  border: 2px solid var(--color-border);
  border-top-color: var(--color-primary);
  border-radius: 50%;
  animation: pg-spin 0.7s linear infinite;
  vertical-align: -2px;
}

@keyframes pg-spin {
  to {
    transform: rotate(360deg);
  }
}

/* ------------------- Docs CTA Section (shared) ------------------- */
.pg-docs-cta {
  padding: 2rem 1.75rem;
  background: var(--color-bg-elevated);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  text-align: center;
}

.pg-docs-cta h2 {
  margin: 0 0 0.5rem;
  font-family: var(--font-serif);
  font-size: 1.75rem;
  color: var(--color-text);
}

.pg-docs-cta p {
  color: var(--color-text-muted);
  max-width: 58ch;
  margin: 0 auto 1.1rem;
}

/* ------------------- Responsive ------------------- */
@media (max-width: 860px) {
  .pg-layout {
    grid-template-columns: 1fr;
  }

  .pg-field-row {
    grid-template-columns: 1fr;
  }

  .pg-utility-bar {
    padding: 0.5rem 0.6rem;
  }

  .pg-endpoint-preview {
    font-size: 0.8rem;
  }
}

@media (max-width: 520px) {
  .playground-main {
    padding-bottom: 2.75rem;
  }

  .pg-panel {
    padding: 1rem 1rem 1.25rem;
  }

  .pg-presets {
    gap: 0.4rem;
  }

  .pg-preset-btn {
    font-size: 0.82rem;
    padding: 0.35rem 0.7rem;
  }
}