/* ---------------------------------------------------------------------------
 * try-it.css — styling for the live "run a real request" widget.
 *
 * Why this exists: the homepage used to show a HARDCODED fake JSON response for
 * /v1/confirm, complete with invented scores. Measured 2026-08-12, four of the
 * five people who signed up 8-10 Aug never made a single API call — so the
 * funnel's job is to prove the data is real BEFORE anyone signs up, not to show
 * a mock of it afterwards.
 *
 * Self-contained on purpose: tailwind.css here is PRECOMPILED, so a utility
 * class that isn't already in it silently does nothing. Everything below is
 * namespaced .ti-* and depends on no framework.
 * ------------------------------------------------------------------------- */

.ti-wrap {
  --ti-gold: var(--sma-gold, #c9a96a);
  --ti-bg: rgba(8, 10, 16, 0.78);
  --ti-line: rgba(255, 255, 255, 0.09);
  border: 1px solid var(--ti-line);
  border-radius: 14px;
  background: var(--ti-bg);
  backdrop-filter: blur(8px);
  overflow: hidden;
  font-family: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
  max-width: 100%;
}

/* Header: traffic lights + the live method/path */
.ti-head {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 14px;
  border-bottom: 1px solid var(--ti-line);
  background: rgba(255, 255, 255, 0.02);
  flex-wrap: wrap;
}
.ti-dot { width: 10px; height: 10px; border-radius: 50%; flex: 0 0 auto; }
.ti-dot-r { background: #ff5f57; }
.ti-dot-y { background: #febc2e; }
.ti-dot-g { background: #28c840; }
.ti-path {
  font-size: 11.5px;
  color: #94a3b8;
  margin-left: 4px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  min-width: 0;
  flex: 1 1 auto;
}
.ti-method { color: var(--ti-gold); font-weight: 600; }

/* Endpoint picker */
.ti-tabs {
  display: flex;
  gap: 6px;
  padding: 10px 14px 0;
  flex-wrap: wrap;
}
.ti-tab {
  font-family: 'Inter', system-ui, sans-serif;
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: #94a3b8;
  background: transparent;
  border: 1px solid var(--ti-line);
  border-radius: 999px;
  padding: 5px 11px;
  cursor: pointer;
  transition: color .15s, border-color .15s, background .15s;
}
.ti-tab:hover { color: #e2e8f0; border-color: rgba(201, 169, 106, 0.4); }
.ti-tab[aria-selected="true"] {
  color: #0b0d12;
  background: var(--ti-gold);
  border-color: var(--ti-gold);
}
.ti-tab:focus-visible { outline: 2px solid var(--ti-gold); outline-offset: 2px; }

/* Action bar */
.ti-bar {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 14px;
  flex-wrap: wrap;
}
.ti-run {
  font-family: 'Inter', system-ui, sans-serif;
  font-size: 13px;
  font-weight: 700;
  color: #0b0d12;
  background: var(--ti-gold);
  border: none;
  border-radius: 9px;
  padding: 8px 18px;
  cursor: pointer;
  transition: filter .15s, opacity .15s;
}
.ti-run:hover { filter: brightness(1.08); }
.ti-run:disabled { opacity: .55; cursor: progress; }
.ti-run:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }

.ti-copy {
  font-family: 'Inter', system-ui, sans-serif;
  font-size: 12px;
  font-weight: 600;
  color: #94a3b8;
  background: transparent;
  border: 1px solid var(--ti-line);
  border-radius: 9px;
  padding: 8px 13px;
  cursor: pointer;
  transition: color .15s, border-color .15s;
}
.ti-copy:hover { color: #e2e8f0; border-color: rgba(201, 169, 106, 0.4); }
.ti-copy:focus-visible { outline: 2px solid var(--ti-gold); outline-offset: 2px; }

/* Status readout — real numbers from the real response */
.ti-meta {
  font-size: 11px;
  color: #64748b;
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 10px;
  white-space: nowrap;
}
.ti-ok { color: #4ade80; font-weight: 600; }
.ti-err { color: #f87171; font-weight: 600; }

/* The curl line — what you'd paste into a terminal */
.ti-curl {
  padding: 0 14px 12px;
  font-size: 11px;
  line-height: 1.6;
  color: #7dd3fc;
  word-break: break-all;
  user-select: all;
}
.ti-curl .ti-cmd { color: #c9a96a; }

/* Response body */
.ti-out {
  margin: 0;
  padding: 12px 14px 16px;
  font-size: 11.5px;
  line-height: 1.65;
  color: #cbd5e1;
  background: rgba(0, 0, 0, 0.25);
  border-top: 1px solid var(--ti-line);
  max-height: 340px;
  overflow: auto;
  white-space: pre;
  tab-size: 2;
}
.ti-out::-webkit-scrollbar { width: 8px; height: 8px; }
.ti-out::-webkit-scrollbar-thumb { background: rgba(255, 255, 255, 0.12); border-radius: 4px; }

/* JSON syntax colours — match the site's existing token palette */
.ti-k { color: #93c5fd; }
.ti-s { color: #86efac; }
.ti-n { color: #fbbf24; }
.ti-b { color: #c4b5fd; }

.ti-hint {
  font-family: 'Inter', system-ui, sans-serif;
  font-size: 11.5px;
  color: #64748b;
  padding: 0 14px 13px;
  line-height: 1.55;
}
.ti-hint a { color: #94a3b8; text-decoration: underline; text-underline-offset: 2px; }
.ti-hint a:hover { color: #e2e8f0; }

@media (max-width: 640px) {
  .ti-out { max-height: 260px; font-size: 11px; }
  .ti-meta { margin-left: 0; width: 100%; }
}