/* ============================================================
   Broker Genius — developer.css
   Converted from Claude Design "Developer"
   ============================================================ */

/* ---------- Hero (dark) ---------- */
.dev-hero {
  border-bottom: 2px solid var(--ink);
  background: var(--ink);
  color: #fff;
  padding: 60px 28px 56px;
}
.dev-hero__grid {
  max-width: 1280px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
  gap: 56px;
  align-items: end;
}
.dev-hero__badge {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  font: 600 11.5px var(--font-mono);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--accent);
  border: 1.5px solid var(--accent);
  padding: 7px 12px;
}
.dev-hero__badge-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--accent);
  animation: bg-blink 1.8s ease-in-out infinite;
}
.dev-hero__title {
  font-size: 84px;
  line-height: 0.9;
  letter-spacing: -0.05em;
  font-weight: 700;
  font-stretch: 94%;
  margin-top: 24px;
}
.dev-hero__lede {
  font-size: 18px;
  line-height: 1.65;
  color: var(--sand-2);
  margin-top: 20px;
  max-width: 56ch;
  text-wrap: pretty;
}
.dev-hero__ctas { display: flex; gap: 14px; margin-top: 28px; }
.dev-hero__btn-key {
  font-size: 16px;
  font-weight: 700;
  color: var(--ink);
  background: var(--accent);
  padding: 15px 28px;
  border: 2px solid var(--accent);
  white-space: nowrap;
}
.dev-hero__btn-key:hover { background: transparent; color: var(--accent); }

/* ---------- Base-URL card ---------- */
.dev-base { border: 2px solid var(--accent); background: #141414; min-width: 0; }
.dev-base__bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 16px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.25);
  font: 600 10.5px var(--font-mono);
  letter-spacing: 0.12em;
  color: var(--accent);
}
.dev-base__bar-note { color: var(--sand-2); }
.dev-base__pre {
  margin: 0;
  padding: 16px;
  font: 500 13.5px var(--font-mono);
  color: var(--line-soft);
  overflow: auto;
}
.dev-base__facts {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  border-top: 1px solid rgba(255, 255, 255, 0.25);
}
.dev-base__fact { padding: 16px; border-right: 1px solid rgba(255, 255, 255, 0.25); }
.dev-base__fact--last { border-right: none; }
.dev-base__fact-v { font-size: 22px; font-weight: 700; letter-spacing: -0.03em; color: var(--accent); }
.dev-base__fact-k { font: 500 10.5px var(--font-mono); letter-spacing: 0.1em; color: #9A958A; margin-top: 5px; }

/* ---------- Docs layout ---------- */
.dev-docs { border-bottom: 2px solid var(--ink); background: var(--card); padding: 56px 28px 72px; }
/* Both children must be allowed to shrink, or a wide code block sets the
   floor for the whole column. */
.dev-docs__inner > * { min-width: 0; }
.dev-docs__inner {
  max-width: 1280px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 250px minmax(0, 1fr);
  gap: 48px;
  align-items: start;
}

.dev-toc { position: sticky; top: 94px; border: 2px solid var(--ink); background: var(--paper); }
.dev-toc__head {
  padding: 12px 16px;
  background: var(--ink);
  color: #fff;
  font: 600 10.5px var(--font-mono);
  letter-spacing: 0.12em;
}
.dev-toc__link {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 12px 16px;
  border-bottom: 1px solid #E4DDCD;
  font: 600 12.5px var(--font-mono);
  letter-spacing: 0.04em;
  color: var(--ink);
}
.dev-toc__link:hover { background: var(--accent); color: var(--ink); }
.dev-toc__num { color: #8A8F9E; }
.dev-toc__cta {
  display: block;
  padding: 13px 16px;
  font: 700 13px var(--font-sans);
  background: var(--accent);
  color: var(--ink);
  text-align: center;
}
.dev-toc__cta:hover { background: var(--ink); color: var(--accent); }

/* ---------- Article ---------- */
.dev-sec { border-bottom: 1px solid #E4DDCD; padding: 36px 0; }
.dev-sec--first { padding-top: 0; padding-bottom: 36px; }
.dev-sec--last { border-bottom: none; padding-bottom: 0; }

.dev-eyebrow { font: 600 10.5px var(--font-mono); letter-spacing: 0.12em; color: var(--brown); }
.dev-h2 {
  font-size: 38px;
  line-height: 1.03;
  letter-spacing: -0.04em;
  font-weight: 700;
  font-stretch: 94%;
  margin-top: 12px;
}
.dev-h3 { font-size: 22px; font-weight: 700; letter-spacing: -0.025em; margin-top: 28px; }
.dev-h3--flush { margin-top: 0; }
.dev-p { font-size: 17px; line-height: 1.75; color: #33383F; margin-top: 16px; max-width: 74ch; }
.dev-note { font-size: 15px; line-height: 1.7; color: var(--muted); margin-top: 16px; max-width: 74ch; }

/* ---------- Overview flow ---------- */
.dev-flow {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  border: 2px solid var(--ink);
  margin-top: 26px;
}
.dev-flow__cell { padding: 18px; border-right: 2px solid var(--ink); background: var(--card); }
.dev-flow__cell--paper { background: var(--paper); }
.dev-flow__cell--accent { background: var(--accent); }
.dev-flow__cell--last { border-right: none; }
.dev-flow__num { font: 600 10.5px var(--font-mono); letter-spacing: 0.12em; color: var(--brown); }
.dev-flow__t { font-size: 15.5px; font-weight: 700; letter-spacing: -0.02em; margin-top: 8px; }
.dev-flow__b { font-size: 13.5px; line-height: 1.55; color: var(--muted); margin-top: 6px; }

/* ---------- Code blocks ---------- */
.dev-code { margin-top: 8px; border: 2px solid var(--ink); background: var(--ink); }
.dev-code--auth { margin-top: 16px; box-shadow: 6px 6px 0 var(--accent); }
.dev-code__pre {
  margin: 0;
  padding: 16px 18px;
  font: 500 13px var(--font-mono);
  color: var(--line-soft);
  overflow: auto;
}
.dev-code__pre--accent { font-size: 13.5px; color: var(--accent); }

/* ---------- Key steps ---------- */
.dev-keysteps { display: grid; margin-top: 12px; border-top: 2px solid var(--ink); }
.dev-keystep {
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr);
  gap: 14px;
  padding: 12px 0;
  border-bottom: 1px solid #E4DDCD;
}
.dev-keystep__n { font: 600 12px var(--font-mono); color: #8A8F9E; }
.dev-keystep__v { font-size: 16px; line-height: 1.55; }

/* ---------- Endpoint cards ---------- */
.dev-endpoint { margin-top: 28px; border: 2px solid var(--ink); background: var(--paper); }
.dev-endpoint__head {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 18px;
  border-bottom: 2px solid var(--ink);
  background: var(--accent);
}
.dev-chip {
  flex: 0 0 auto;
  font: 600 10.5px var(--font-mono);
  letter-spacing: 0.12em;
  background: var(--ink);
  color: var(--accent);
  padding: 5px 9px;
}
.dev-endpoint__path { font: 600 14px var(--font-mono); }
.dev-endpoint__name { margin-left: auto; font: 700 14px var(--font-sans); }
.dev-endpoint__body { padding: 20px; }
.dev-endpoint__desc { font-size: 16px; line-height: 1.7; color: #33383F; max-width: 74ch; }
.dev-endpoint__label { font: 600 10.5px var(--font-mono); letter-spacing: 0.12em; color: #6A6F7E; margin-top: 18px; }
.dev-endpoint__result { margin-top: 12px; display: flex; align-items: center; gap: 10px; font-size: 14.5px; }
.dev-endpoint__result--top { align-items: flex-start; line-height: 1.6; }

/* ---------- Batch statuses ---------- */
.dev-statuses-wrap { margin-top: 36px; }
.dev-statuses { display: grid; margin-top: 12px; border: 2px solid var(--ink); background: var(--card); }
.dev-status {
  display: grid;
  grid-template-columns: 160px minmax(0, 1fr);
  gap: 16px;
  padding: 13px 18px;
  border-bottom: 1px solid var(--line-soft);
  align-items: center;
}
.dev-status:last-child { border-bottom: none; }
.dev-status__k { font: 600 12.5px var(--font-mono); }
.dev-status__k--brown { color: var(--brown); }
.dev-status__k--green { color: var(--green); }
.dev-status__k--red { color: #B3261E; }
.dev-status__v { font-size: 14.5px; color: var(--muted); }

/* ---------- Trial band ---------- */
.trial-band { border-bottom: 2px solid var(--ink); padding: 88px 28px; background: var(--accent); }
.trial-band__inner { max-width: 820px; margin: 0 auto; text-align: center; }
.trial-band__title {
  font-size: 58px;
  line-height: 0.98;
  letter-spacing: -0.045em;
  font-weight: 700;
  font-stretch: 92%;
  text-wrap: balance;
}
.trial-band__sub { font-size: 26px; font-weight: 700; letter-spacing: -0.02em; margin-top: 12px; }
.trial-band__blurb { font-size: 16px; line-height: 1.6; color: #4A3A10; margin: 18px auto 0; max-width: 54ch; }
.trial-band__cta {
  display: inline-block;
  margin-top: 28px;
  font-size: 16px;
  font-weight: 700;
  color: #fff;
  background: var(--ink);
  padding: 16px 30px;
  border: 2px solid var(--ink);
  box-shadow: 4px 4px 0 var(--card);
}
.trial-band__cta:hover { color: var(--accent); box-shadow: 1px 1px 0 var(--card); }

/* ---------- Responsive ---------- */
@media (max-width: 1080px) {
  .dev-hero__grid { grid-template-columns: minmax(0, 1fr); gap: 40px; }
  .dev-hero__title { font-size: 60px; }
  .dev-docs__inner { grid-template-columns: minmax(0, 1fr); }
  .dev-toc { position: static; }
  .dev-flow { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .dev-flow__cell:nth-child(2n) { border-right: none; }
  .dev-flow__cell:nth-child(-n+2) { border-bottom: 2px solid var(--ink); }
}

@media (max-width: 720px) {
  .dev-hero__title { font-size: 44px; }
  .dev-h2 { font-size: 30px; }
  .dev-flow { grid-template-columns: minmax(0, 1fr); }
  .dev-flow__cell { border-right: none; border-bottom: 2px solid var(--ink); }
  .dev-flow__cell--last { border-bottom: none; }
  .dev-status { grid-template-columns: minmax(0, 1fr); gap: 4px; }
  .dev-endpoint__head { flex-wrap: wrap; }
  .dev-endpoint__name { margin-left: 0; }
  .trial-band__title { font-size: 40px; }
  .dev-hero__ctas { flex-wrap: wrap; }
}

/* ============================================================
   Reference-page prose
   ============================================================
   The developer_text / _images / _invoices pages keep their
   documentation markup as plain semantic HTML, so it is styled
   by element here rather than by class. That way the docs can
   be edited without re-tagging every heading and code block.
   ============================================================ */
.dev-prose { min-width: 0; }
.dev-prose .api-section { border-bottom: 1px solid #E4DDCD; padding: 36px 0; }
.dev-prose .api-section:first-child { padding-top: 0; }
.dev-prose .api-section:last-child { border-bottom: 0; }

.dev-prose h2 {
  font-size: 38px;
  line-height: 1.03;
  letter-spacing: -0.04em;
  font-weight: 700;
  font-stretch: 94%;
  margin: 0 0 4px;
}
.dev-prose h3 {
  font-size: 22px;
  font-weight: 700;
  letter-spacing: -0.025em;
  margin: 28px 0 0;
}
.dev-prose h4 {
  font: 600 11px var(--font-mono);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--brown);
  margin: 22px 0 0;
}
.dev-prose p {
  font-size: 17px;
  line-height: 1.75;
  color: #33383F;
  margin: 14px 0 0;
  max-width: 74ch;
}
.dev-prose b, .dev-prose strong { font-weight: 700; color: var(--ink); }

.dev-prose ul, .dev-prose ol { margin: 14px 0 0; padding-left: 22px; max-width: 74ch; }
.dev-prose li { font-size: 16px; line-height: 1.7; color: #33383F; margin-top: 7px; }
.dev-prose li::marker { color: var(--sand); }

/* Code blocks reuse the dark treatment from .dev-code. */
.dev-prose pre {
  margin: 12px 0 0;
  padding: 16px 18px;
  border: 2px solid var(--ink);
  background: var(--ink);
  color: var(--line-soft);
  font: 500 13px/1.6 var(--font-mono);
  overflow-x: auto;
}
.dev-prose pre code { font: inherit; color: inherit; background: none; padding: 0; }
/* Inline code sits on paper, not on ink. */
.dev-prose :not(pre) > code {
  font: 500 13.5px var(--font-mono);
  background: var(--tint);
  border: 1px solid var(--line);
  padding: 1px 5px;
}

/* An endpoint block groups a verb, its request and its response. */
.dev-prose .api-endpoint {
  border: 2px solid var(--ink);
  background: var(--card);
  box-shadow: 6px 6px 0 var(--ink);
  padding: 24px;
  margin-top: 22px;
}
.dev-prose .api-endpoint > h3:first-child {
  margin-top: 0;
  font: 600 14px var(--font-mono);
  letter-spacing: 0.02em;
  color: var(--brown);
}
.dev-prose .example-box {
  border-left: 3px solid var(--accent);
  background: var(--tint);
  padding: 14px 18px;
  margin-top: 18px;
}
.dev-prose .example-box h4 { margin-top: 0; }

/* Tables: ink header, hairline rows, horizontally scrollable. */
.dev-prose table {
  width: 100%;
  margin-top: 18px;
  border: 2px solid var(--ink);
  border-collapse: collapse;
  background: var(--card);
  font-size: 14.5px;
  display: block;
  overflow-x: auto;
  white-space: nowrap;
}
.dev-prose thead { background: var(--ink); }
.dev-prose th {
  font: 600 10.5px var(--font-mono);
  letter-spacing: 0.11em;
  text-transform: uppercase;
  color: #fff;
  text-align: left;
  padding: 12px 14px;
}
.dev-prose td { padding: 11px 14px; border-top: 1px solid var(--line); vertical-align: top; }
.dev-prose tbody tr:hover { background: #FFF8E4; }

@media (max-width: 1080px) {
  .dev-prose h2 { font-size: 30px; }
  .dev-prose .api-endpoint { padding: 18px; box-shadow: 4px 4px 0 var(--ink); }
}

/* Sibling reference links in the endpoints panel sit on the dark ground,
   so they take white rather than the theme's default link colour. The
   current page stays accent and is not a link. */
.dev-base__fact-v a {
  color: #fff;
  text-decoration: none;
  border-bottom: 1px solid rgba(255, 255, 255, 0.35);
}
.dev-base__fact-v a:hover { color: var(--accent); border-bottom-color: var(--accent); }

/* Very small phones: the three-column fact strip needs 331px and this sheet
   loads after main.css, so the override belongs here. */
@media (max-width: 380px) {
  .dev-base__facts { grid-template-columns: minmax(0, 1fr); }
  .dev-base__fact { border-right: 0; border-bottom: 1px solid rgba(255, 255, 255, 0.25); }
}