/* DealArena — /docs/api (public API + MCP reference).
   Ported from designs/API Docs.dc.html (2026-08-20 handoff). That artboard is
   the 390px phone screen; the values below ARE the design's values, with a
   desktop scale-up layered on top (this page is served to desktop too — the
   marketing shell only swaps to the mobile chrome below 560px).

   Rides on marketing-shell.css tokens. Note that marketing's --green token IS
   the brand orange, so the handoff's --brand / --brand-2 / --brand-soft /
   --on-brand and its status hues are declared locally below, the same way
   security.css does it.

   Everything is scoped under .p-apidocs. Nothing on this page is mounted on
   document.body (no popovers, no toasts), so there is no global escape hatch
   to leave unscoped. */

.p-apidocs {
  --brand: #ef5920;
  --brand-2: #c4471a;
  --brand-soft: rgba(239, 89, 32, .10);
  --on-brand: #201009;          /* never white on orange */
  --brand-edge: #a83a12;

  /* Method hues, from the 2026-08-20 token block. The handoff colours GET /
     POST / PATCH only; this API also serves PUT and DELETE, so --api-purple
     (a handoff token) and --api-red (not in the handoff — nearest marketing
     token is --warn) carry those two. */
  --api-blue: #2f6fd0;
  --api-green: #0a8754;
  --api-amber: #c79100;
  --api-purple: #8b5cf6;
  --api-red: #c2352c;

  /* The always-dark console plate — same in both themes. */
  --plate-bg: #0d0b09;
  --plate-line: #2e2a25;
  --plate-ink: #c6bfb2;
  --plate-ink-2: #8e8779;
  --plate-btn: #171412;
  --plate-led: #27d97c;
}

body[data-theme="dark"] .p-apidocs {
  --brand-soft: rgba(239, 89, 32, .16);
  --api-blue: #6ba4f8;
  --api-green: #27d97c;
  --api-amber: #ffd23f;
  --api-purple: #a78bfa;
  --api-red: #ff6b5e;
}

/* The LED in the authenticate plate. Marketing pages do not load
   arena/chrome.css, which is where this keyframe lives for the app. */
@keyframes da-ledblink { 0%, 72%, 100% { opacity: 1; } 82% { opacity: .25; } }

.p-apidocs {
  max-width: 1000px;
  margin: 0 auto;
  padding: 0 0 34px;
}
.p-apidocs a { color: var(--green); }
.p-apidocs section { padding-left: 18px; padding-right: 18px; }

/* ---------- hero ---------- */
.p-apidocs .api-hero { padding-top: 24px; }
.p-apidocs .api-eyebrow {
  font-family: var(--mono); font-size: 10px; letter-spacing: .18em;
  text-transform: uppercase; color: var(--brand);
}
.p-apidocs .api-hero h1 {
  font-family: var(--display); font-weight: 700;
  font-size: clamp(34px, 5.4vw, 58px); line-height: 1.06; letter-spacing: -.035em;
  margin: 14px 0 0; color: var(--ink); text-wrap: balance;
}
.p-apidocs .api-lead {
  font-size: 15.5px; line-height: 1.6; color: var(--ink-2);
  margin: 13px 0 0; max-width: 640px;
}
.p-apidocs .api-chips { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 14px; }
.p-apidocs .api-chip {
  font-family: var(--mono); font-size: 11px; padding: 6px 10px; border-radius: 6px;
  background: var(--bg-2); border: 1px solid var(--line); color: var(--ink-3);
}
.p-apidocs .api-chip.is-brand {
  background: var(--brand-soft); border-color: transparent; color: var(--brand-2);
}
body[data-theme="dark"] .p-apidocs .api-chip.is-brand { color: var(--brand); }
/* Spec download + counts. Not in the artboard: it is the machine-readable
   source this whole page is generated from, and the pre-redesign page linked
   it. Kept in the hero's caption voice rather than given a section. */
.p-apidocs .api-meta {
  font-family: var(--mono); font-size: 11px; line-height: 1.6;
  color: var(--ink-4); margin-top: 12px;
}
.p-apidocs .api-meta a { color: var(--ink-3); text-decoration: underline; text-underline-offset: 3px; }
.p-apidocs .api-meta a:hover { color: var(--green); }

/* ---------- authenticate plate ---------- */
.p-apidocs .api-auth { padding-top: 20px; }
.p-apidocs .term {
  border-radius: 14px; overflow: hidden;
  border: 1px solid var(--plate-line); background: var(--plate-bg);
}
.p-apidocs .term-head {
  display: flex; align-items: center; gap: 9px; padding: 11px 13px;
  border-bottom: 1px solid var(--plate-line);
  font-family: var(--mono); font-size: 10px; letter-spacing: .14em;
  text-transform: uppercase; color: var(--plate-ink-2);
}
.p-apidocs .term-led {
  width: 6px; height: 6px; flex: none; border-radius: 50%;
  background: var(--plate-led); animation: da-ledblink 2.2s infinite;
}
.p-apidocs .term-body {
  margin: 0; padding: 13px;
  font-family: var(--mono); font-size: 11.5px; line-height: 1.85;
  color: var(--plate-ink); overflow-x: auto; white-space: pre; scrollbar-width: none;
}
.p-apidocs .term-body::-webkit-scrollbar { height: 0; }
.p-apidocs .term-copy {
  width: 100%; min-height: 46px; border: none; border-top: 1px solid var(--plate-line);
  background: var(--plate-btn); color: var(--plate-ink-2);
  font-family: var(--mono); font-size: 11.5px; cursor: pointer;
}
.p-apidocs .term-copy:hover { color: var(--plate-ink); }
.p-apidocs .api-note {
  font-family: var(--mono); font-size: 11px; line-height: 1.6;
  color: var(--ink-4); margin-top: 10px;
}

/* ---------- endpoint explorer ---------- */
.p-apidocs .api-explorer { padding-top: 22px; }
.p-apidocs .api-tabs {
  display: flex; gap: 6px; padding: 5px; border-radius: 12px;
  background: var(--bg-2); border: 1px solid var(--line);
  overflow-x: auto; scrollbar-width: none;
}
.p-apidocs .api-tabs::-webkit-scrollbar { height: 0; }
.p-apidocs .api-tab {
  flex: 0 0 auto; min-height: 44px; padding: 0 14px;
  border: none; border-radius: 9px; cursor: pointer;
  font-family: var(--mono); font-size: 11.5px; letter-spacing: .04em;
  text-transform: uppercase; background: transparent; color: var(--ink-3);
  display: inline-flex; align-items: center; gap: 6px; white-space: nowrap;
}
.p-apidocs .api-tab .n { font-size: 10px; opacity: .7; }
.p-apidocs .api-tab:hover { color: var(--ink); }
.p-apidocs .api-tab.is-on { background: var(--brand); color: var(--on-brand); }
.p-apidocs .api-tab.is-on:hover { color: var(--on-brand); }

/* Group heading. The artboard has three tabs and no heading; with thirteen
   real tags the heading is what tells you where a deep link landed. */
.p-apidocs .api-group { margin-top: 18px; }
.p-apidocs .grp-title {
  display: flex; align-items: baseline; gap: 9px; margin: 0 0 10px;
  font-family: var(--mono); font-weight: 500; font-size: 11px;
  letter-spacing: .16em; text-transform: uppercase; color: var(--ink-3);
}
.p-apidocs .grp-title .grp-n { letter-spacing: .1em; color: var(--ink-4); }

.p-apidocs .api-rows { display: flex; flex-direction: column; gap: 8px; }
.p-apidocs .api-op {
  border: 1px solid var(--line); border-radius: 12px;
  background: var(--bg-1); overflow: hidden;
  scroll-margin-top: 90px;
}
.p-apidocs .api-op.is-open { border-color: var(--brand); }

.p-apidocs .op-head {
  display: flex; align-items: center; gap: 10px; width: 100%;
  min-height: 56px; padding: 10px 13px; text-align: left;
  background: none; border: 0; cursor: pointer; color: inherit;
}
.p-apidocs .op-method {
  flex: none; font-family: var(--mono); font-size: 10px; letter-spacing: .06em;
  padding: 5px 8px; border-radius: 5px;
  background: var(--bg-2); color: var(--ink-3);
}
.p-apidocs .op-method.m-get { background: rgba(47, 111, 208, .14); color: var(--api-blue); }
.p-apidocs .op-method.m-post { background: rgba(10, 135, 84, .14); color: var(--api-green); }
.p-apidocs .op-method.m-patch { background: rgba(199, 145, 0, .16); color: var(--api-amber); }
.p-apidocs .op-method.m-put { background: rgba(139, 92, 246, .14); color: var(--api-purple); }
.p-apidocs .op-method.m-delete { background: rgba(194, 53, 44, .12); color: var(--api-red); }

.p-apidocs .op-path {
  flex: 1; min-width: 0; font-family: var(--mono); font-size: 12.5px;
  color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.p-apidocs .op-scope {
  flex: none; display: none; font-family: var(--mono); font-size: 10.5px;
  color: var(--ink-4); white-space: nowrap;
}
.p-apidocs .op-chev {
  flex: none; transition: transform 180ms;
  transform: rotate(0deg); color: var(--ink-4);
}
.p-apidocs .api-op.is-open .op-chev { transform: rotate(180deg); }

.p-apidocs .op-body { display: flex; flex-direction: column; padding: 0 13px 13px; }
.p-apidocs .op-body[hidden] { display: none; }
.p-apidocs .op-sum { font-size: 14px; line-height: 1.55; color: var(--ink); font-weight: 600; margin: 0 0 6px; }
.p-apidocs .op-desc { font-size: 14px; line-height: 1.6; color: var(--ink-2); margin: 0 0 10px; }
.p-apidocs .op-sample {
  border-radius: 10px; background: var(--plate-bg); color: var(--plate-ink);
  margin: 0; padding: 11px 12px;
  font-family: var(--mono); font-size: 11px; line-height: 1.8;
  overflow-x: auto; white-space: pre; scrollbar-width: none;
}
.p-apidocs .op-sample::-webkit-scrollbar { height: 0; }

.p-apidocs .op-tablewrap { overflow-x: auto; margin-top: 12px; }
.p-apidocs .op-tablewrap table { border-collapse: collapse; width: 100%; min-width: 420px; font-size: 13px; }
.p-apidocs .op-tablewrap th, .p-apidocs .op-tablewrap td {
  text-align: left; padding: 7px 14px 7px 0; vertical-align: top;
  border-bottom: 1px solid var(--line);
}
.p-apidocs .op-tablewrap th {
  font-family: var(--mono); font-weight: 500; font-size: 10px; letter-spacing: .12em;
  text-transform: uppercase; color: var(--ink-4);
}
.p-apidocs .op-tablewrap td { color: var(--ink-2); line-height: 1.55; }
.p-apidocs .op-tablewrap td.mono { font-family: var(--mono); font-size: 12px; color: var(--ink); }
.p-apidocs .op-req { color: var(--api-red); }

/* ---------- MCP card ---------- */
.p-apidocs .api-mcp { padding-top: 24px; }
.p-apidocs .mcp-card {
  border: 1px solid var(--line); border-radius: 14px;
  background: var(--bg-2); padding: 16px 15px;
}
.p-apidocs .mcp-eyebrow {
  font-family: var(--mono); font-size: 9.5px; letter-spacing: .16em;
  text-transform: uppercase; color: var(--ink-4);
}
.p-apidocs .mcp-card p {
  font-size: 14.5px; line-height: 1.65; color: var(--ink-2); margin: 9px 0 12px;
}
.p-apidocs .mcp-cta {
  display: flex; align-items: center; justify-content: center;
  min-height: 50px; border-radius: 11px;
  background: var(--brand); color: var(--on-brand) !important;
  font-family: var(--mono); font-size: 13.5px;
  box-shadow: 0 3px 0 var(--brand-edge);
  transition: transform .12s, box-shadow .12s;
}
.p-apidocs .mcp-cta:active { transform: translateY(3px); box-shadow: 0 0 0 var(--brand-edge); }

/* ---------- generated reference ----------
   info.description out of static/openapi.yaml: authentication, the envelope,
   the real rate limits, the tier gate and the whole MCP setup doc the card
   above links to. The artboard has no section for it because the artboard did
   not know it existed — dropping it would delete the page's normative content. */
.p-apidocs .api-reference { padding-top: 30px; }
.p-apidocs .ref-eyebrow {
  font-family: var(--mono); font-size: 9.5px; letter-spacing: .16em;
  text-transform: uppercase; color: var(--ink-4); margin-bottom: 4px;
}
.p-apidocs .ref-body { max-width: 760px; }
.p-apidocs .ref-body h2 {
  font-family: var(--display); font-weight: 700; font-size: 22px; letter-spacing: -.02em;
  color: var(--ink); margin: 30px 0 10px; padding-top: 22px; border-top: 1px solid var(--line);
  scroll-margin-top: 90px;
}
.p-apidocs .ref-body h3 {
  font-family: var(--display); font-weight: 600; font-size: 16px;
  color: var(--ink); margin: 22px 0 8px; scroll-margin-top: 90px;
}
.p-apidocs .ref-body p, .p-apidocs .ref-body li {
  font-size: 15px; line-height: 1.7; color: var(--ink-2);
}
.p-apidocs .ref-body p { margin: 0 0 12px; }
.p-apidocs .ref-body ul { margin: 0 0 12px; padding-left: 20px; }
.p-apidocs .ref-body li { margin-bottom: 6px; }
.p-apidocs .ref-body strong { color: var(--ink); font-weight: 600; }
.p-apidocs .ref-body code {
  font-family: var(--mono); font-size: 12.5px; color: var(--brand-2);
  background: var(--brand-soft); border: 1px solid rgba(239, 89, 32, .18);
  padding: 1px 5px; border-radius: 4px; overflow-wrap: anywhere;
}
body[data-theme="dark"] .p-apidocs .ref-body code { color: var(--brand); }
.p-apidocs .ref-body pre {
  background: var(--plate-bg); border-radius: 10px; padding: 12px 13px;
  overflow-x: auto; margin: 0 0 14px;
}
.p-apidocs .ref-body pre code {
  font-size: 11.5px; line-height: 1.8; color: var(--plate-ink);
  background: none; border: 0; padding: 0; white-space: pre;
}
/* Four-column tables (env vars, the 19 MCP tools) scroll inside their own box
   rather than pushing the page sideways at 375px. display:block is what gives
   a <table> a scroll container without a wrapper the markdown cannot emit. */
.p-apidocs .ref-body table {
  display: block; max-width: 100%; overflow-x: auto;
  border-collapse: collapse; font-size: 13px; margin: 0 0 16px;
}
.p-apidocs .ref-body th, .p-apidocs .ref-body td {
  text-align: left; padding: 8px 14px 8px 0; vertical-align: top;
  border-bottom: 1px solid var(--line); color: var(--ink-2); line-height: 1.5;
}
.p-apidocs .ref-body th {
  font-family: var(--mono); font-weight: 500; font-size: 10px; letter-spacing: .12em;
  text-transform: uppercase; color: var(--ink-4); white-space: nowrap;
}

/* ---------- degraded state ---------- */
.p-apidocs .api-fallback {
  border: 1px solid var(--line); border-radius: 14px; background: var(--bg-2);
  padding: 18px 16px; margin-top: 20px;
}
.p-apidocs .api-fallback p { font-size: 15px; line-height: 1.65; color: var(--ink-2); margin: 0 0 10px; }
.p-apidocs .api-fallback p:last-child { margin-bottom: 0; }

/* ---------- desktop scale-up ----------
   The artboard is 390px wide. Above the phone breakpoint the page keeps the
   same anatomy and simply gets more air: the tab strip wraps instead of
   scrolling, and each row can afford to show its scope. */
@media (min-width: 620px) {
  .p-apidocs { padding-bottom: 70px; }
  .p-apidocs section { padding-left: 36px; padding-right: 36px; }
  .p-apidocs .api-hero { padding-top: 54px; }
  .p-apidocs .api-lead { font-size: 17px; margin-top: 18px; }
  .p-apidocs .api-chips { gap: 8px; margin-top: 20px; }
  .p-apidocs .api-auth { padding-top: 28px; }
  .p-apidocs .term-body { padding: 16px 18px; font-size: 12.5px; }
  .p-apidocs .api-explorer { padding-top: 34px; }
  .p-apidocs .api-tabs { flex-wrap: wrap; overflow-x: visible; }
  .p-apidocs .op-head { padding: 12px 16px; gap: 12px; }
  .p-apidocs .op-scope { display: block; }
  .p-apidocs .op-path { font-size: 14px; }
  .p-apidocs .op-body { padding: 0 16px 16px; }
  .p-apidocs .api-mcp { padding-top: 34px; }
  .p-apidocs .mcp-card { padding: 22px 24px; display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 4px 28px; align-items: center; }
  .p-apidocs .mcp-eyebrow { grid-column: 1; }
  .p-apidocs .mcp-card p { grid-column: 1; margin: 6px 0 0; font-size: 15.5px; }
  .p-apidocs .mcp-cta { grid-column: 2; grid-row: 1 / span 2; padding: 0 22px; }
  .p-apidocs .api-reference { padding-top: 46px; }
}