/* Playground-specific layout */

.pg {
  display: grid;
  grid-template-columns: 1fr 1.05fr;
  gap: 22px;
  align-items: start;
}
/* Allow grid children to shrink below their content width so the
   playground never forces horizontal scroll on narrow viewports. */
.pg > * { min-width: 0; }

/* Endpoint picker tabs */
.ep-tabs { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; margin-bottom: 20px; }
.ep-tab {
  text-align: left;
  background: var(--bg-1);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  padding: 14px 15px;
  transition: border-color .15s, background .15s, transform .08s;
  position: relative;
  overflow: hidden;
}
.ep-tab:hover { border-color: var(--bg-4); transform: translateY(-2px); }
.ep-tab.on { border-color: var(--acc); background: var(--bg-2); }
.ep-tab.on::after { content: ""; position: absolute; inset: 0; border-radius: var(--r-md); box-shadow: 0 0 0 1px var(--acc) inset, 0 0 30px -6px var(--acc-glow); pointer-events: none; }
.ep-tab .ic { width: 34px; height: 34px; border-radius: 9px; display: grid; place-items: center; margin-bottom: 11px; }
.ep-tab .ic svg { width: 18px; height: 18px; }
.ep-tab .t { font-family: var(--font-display); font-weight: 600; font-size: 14px; color: var(--tx-0); }
.ep-tab .m { font-family: var(--font-mono); font-size: 11px; color: var(--tx-3); margin-top: 3px; }
.ep-tab.disabled { opacity: .45; cursor: not-allowed; }
.ep-tab.disabled:hover { transform: none; border-color: var(--line); }
.ep-off { font-family: var(--font-mono); font-size: 9px; font-weight: 700; letter-spacing: .05em; color: var(--err); background: var(--err-soft); padding: 1px 5px; border-radius: 4px; vertical-align: 1px; }

.req-panel .card-pad { padding: 20px; }
.endpoint-line {
  display: flex; align-items: center; gap: 10px;
  background: #060810; border: 1px solid var(--line);
  border-radius: var(--r-sm); padding: 9px 12px;
  font-family: var(--font-mono); font-size: 12.5px; color: var(--tx-1);
  overflow-x: auto;
}
.endpoint-line .host { color: var(--tx-3); }
.endpoint-line .path { color: var(--acc-bright); }

.try-row { display: flex; gap: 10px; align-items: stretch; }
.try-row .input { flex: 1; }

.samples { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 12px; }
.samples .chip {
  font-family: var(--font-mono); font-size: 11.5px;
  background: var(--bg-2); border: 1px solid var(--line); color: var(--tx-2);
  padding: 5px 10px; border-radius: 20px; transition: all .13s; cursor: pointer;
}
.samples .chip:hover { border-color: var(--acc); color: var(--acc-bright); background: var(--acc-soft); }

/* Response panel */
.resp-panel { min-height: 420px; }
.resp-meta { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; padding: 14px 20px; border-bottom: 1px solid var(--line); }
.resp-meta .stat-mini { font-family: var(--font-mono); font-size: 12px; color: var(--tx-2); display: flex; align-items: center; gap: 6px; }
.resp-meta .stat-mini b { color: var(--tx-0); }

.verdict {
  display: flex; align-items: center; gap: 14px;
  padding: 16px 20px; border-bottom: 1px solid var(--line);
}
.verdict .ring {
  width: 46px; height: 46px; border-radius: 12px; flex-shrink: 0;
  display: grid; place-items: center;
}
.verdict .ring svg { width: 24px; height: 24px; }
.verdict.valid .ring { background: var(--ok-soft); color: var(--ok); }
.verdict.invalid .ring { background: var(--err-soft); color: var(--err); }
.verdict .txt b { font-family: var(--font-display); font-size: 16px; color: var(--tx-0); display: block; }
.verdict .txt span { font-size: 12.5px; color: var(--tx-2); }
.verdict .risk { margin-left: auto; text-align: right; }
.verdict .risk .lbl { font-size: 10.5px; color: var(--tx-3); text-transform: uppercase; letter-spacing: .08em; }
.verdict .risk .v { font-family: var(--font-mono); font-size: 18px; font-weight: 600; }

.kv-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1px; background: var(--line); border-bottom: 1px solid var(--line); }
.kv {
  background: var(--bg-1); padding: 11px 20px;
  display: flex; flex-direction: column; gap: 2px;
}
.kv .k { font-size: 11px; color: var(--tx-3); text-transform: uppercase; letter-spacing: .05em; }
.kv .v { font-family: var(--font-mono); font-size: 13px; color: var(--tx-0); }
.kv .v.flag-v { display: flex; align-items: center; gap: 7px; }

.resp-empty {
  display: grid; place-items: center; text-align: center;
  padding: 60px 30px; color: var(--tx-3);
}
.resp-empty .big { font-size: 40px; margin-bottom: 14px; opacity: .5; }
.resp-empty .big svg { width: 44px; height: 44px; }
.resp-empty p { max-width: 30ch; font-size: 13px; }

.loading-bar { height: 2px; background: var(--bg-3); overflow: hidden; }
.loading-bar > i { display: block; height: 100%; width: 40%; background: linear-gradient(90deg, transparent, var(--acc), transparent); animation: slide 0.9s infinite; }
@keyframes slide { from { transform: translateX(-100%); } to { transform: translateX(350%); } }

.json-section { padding: 18px 20px; }
.json-section .lbl { font-size: 11px; color: var(--tx-3); text-transform: uppercase; letter-spacing: .08em; margin-bottom: 9px; display: flex; align-items: center; }

@media (max-width: 1080px) {
  .pg { grid-template-columns: 1fr; }
  .ep-tabs { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 560px) {
  .ep-tabs { grid-template-columns: 1fr 1fr; }
  .kv-grid { grid-template-columns: 1fr; }
}