/* VerbaPulse Developer surface (/api, /developers).
   A third visual world: the main site is light and editorial, Enterprise is paper and
   serif, this one is a console. Nothing is shared except the logo mark.
   Tokens are prefixed --d- so they cannot collide with the other two sheets. */

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

:root {
  --d-mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  --d-text: 'Inter', system-ui, -apple-system, sans-serif;

  --d-bg:        #0b0d10;
  --d-panel:     #12151a;
  --d-panel-2:   #171b22;
  --d-line:      #232833;
  --d-line-soft: #1b2027;

  --d-ink:       #e8ecf2;
  --d-ink-body:  #a9b2c0;
  --d-ink-dim:   #6c7787;

  --d-accent:    #4d7cff;
  --d-accent-dim:#2b3f7a;
  --d-green:     #3ddc97;
  --d-amber:     #f0b429;
  --d-flag:      #f2705f;

  --d-radius: 10px;
  --d-max: 1080px;
}

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

body {
  background: var(--d-bg);
  color: var(--d-ink-body);
  font-family: var(--d-text);
  font-size: 16px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}

/* a faint grid, so the page reads as a console rather than a document */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  background-image:
    linear-gradient(var(--d-line-soft) 1px, transparent 1px),
    linear-gradient(90deg, var(--d-line-soft) 1px, transparent 1px);
  background-size: 48px 48px;
  opacity: .35;
  pointer-events: none;
  z-index: 0;
}

.wrap { position: relative; z-index: 1; max-width: var(--d-max); margin: 0 auto; padding: 0 24px; }

/* ── header ─────────────────────────────────────────────── */
.top {
  position: sticky; top: 0; z-index: 10;
  background: rgba(11,13,16,.82);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--d-line);
}
.top .bar { display: flex; align-items: center; justify-content: space-between; gap: 24px; height: 60px; }
/* The site menu travels with the visitor into this world, in this world's type.
   Row two is where they are inside it. */
.top .subbar {
  display: flex; align-items: center; gap: 20px; height: 38px;
  border-top: 1px solid var(--d-line-soft);
}
.top .subbar a { font-family: var(--d-mono); font-size: 12px; color: var(--d-ink-dim); text-decoration: none; }
.top .subbar a:hover { color: var(--d-ink); }
.top .subbar a[aria-current] { color: var(--d-accent); }
.mainnav { display: flex; align-items: center; gap: 20px; margin-left: auto; }
.mainnav > a, .dd > button, .dd > a.dd-top {
  color: var(--d-ink-dim); text-decoration: none; font-size: 14px;
  background: none; border: 0; padding: 0; cursor: pointer; font-family: inherit;
  display: inline-flex; align-items: center; gap: 5px; white-space: nowrap;
}
.mainnav > a:hover, .dd:hover > button, .dd:hover > a.dd-top,
.mainnav > a[aria-current], .dd > a.dd-top[aria-current] { color: var(--d-ink); }
.dd { position: relative; }
.dd-caret { font-size: 9px; opacity: .7; }
.dd-panel {
  position: absolute; top: 100%; left: -14px; min-width: 210px; padding: 8px 0;
  background: var(--d-panel); border: 1px solid var(--d-line); border-radius: var(--d-radius);
  box-shadow: 0 16px 40px rgba(0,0,0,.45);
  display: none; flex-direction: column;
}
.dd:hover .dd-panel, .dd:focus-within .dd-panel { display: flex; }
.dd-panel a { padding: 7px 16px; font-size: 13.5px; color: var(--d-ink-body); text-decoration: none; }
.dd-panel a:hover { color: var(--d-ink); background: var(--d-panel-2); }
.brand { display: flex; align-items: center; gap: 10px; text-decoration: none; }
/* the wordmark carries the name; no repeated text next to it */
.brand-logo { height: 19px; width: auto; display: block; }
.brand span.tag {
  font-family: var(--d-mono); font-size: 11px; color: var(--d-accent);
  border: 1px solid var(--d-accent-dim); border-radius: 4px; padding: 2px 6px;
}
/* No `.top nav` rules: the header's nav is .mainnav, and a descendant selector here
   outranks .mainnav's own rules, including the one that hides the menu on narrow screens. */

/* ── type ───────────────────────────────────────────────── */
h1, h2, h3 { color: var(--d-ink); font-weight: 600; letter-spacing: -.02em; line-height: 1.2; }
h1 { font-size: clamp(30px, 5vw, 46px); }
h2 { font-size: clamp(21px, 3vw, 27px); margin-bottom: 14px; }
h3 { font-size: 17px; margin-bottom: 8px; }
p { margin-bottom: 16px; max-width: 74ch; }
a { color: var(--d-accent); }
strong { color: var(--d-ink); font-weight: 600; }
small { color: var(--d-ink-dim); font-size: 13px; }

section { padding: 56px 0; border-bottom: 1px solid var(--d-line-soft); }
section:last-of-type { border-bottom: 0; }
.lede { font-size: 19px; color: var(--d-ink-body); max-width: 68ch; }

.eyebrow {
  font-family: var(--d-mono); font-size: 12px; letter-spacing: .12em; text-transform: uppercase;
  color: var(--d-accent); margin-bottom: 14px;
}

/* ── hero ───────────────────────────────────────────────── */
.hero { padding: 76px 0 60px; border-bottom: 1px solid var(--d-line); }
.hero h1 { margin-bottom: 18px; }
.hero .lede { font-size: 20px; }
.cta-row { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 28px; }

.btn {
  display: inline-block; font-family: var(--d-mono); font-size: 14px; text-decoration: none;
  padding: 11px 18px; border-radius: 8px; border: 1px solid transparent; transition: .15s;
}
.btn-primary { background: var(--d-accent); color: #fff; }
.btn-primary:hover { background: #3f6ae6; }
.btn-ghost { border-color: var(--d-line); color: var(--d-ink); }
.btn-ghost:hover { border-color: var(--d-accent-dim); color: var(--d-accent); }

/* ── code ───────────────────────────────────────────────── */
pre {
  background: var(--d-panel); border: 1px solid var(--d-line); border-radius: var(--d-radius);
  padding: 18px 20px; overflow-x: auto; margin: 0 0 18px;
  font-family: var(--d-mono); font-size: 13.5px; line-height: 1.7; color: #cdd6e4;
}
pre .c { color: var(--d-ink-dim); }         /* comment */
pre .k { color: #7aa2ff; }                   /* keyword, method */
pre .s { color: var(--d-green); }            /* string */
pre .n { color: var(--d-amber); }            /* number */
code { font-family: var(--d-mono); font-size: .92em; color: var(--d-ink); background: var(--d-panel-2); border: 1px solid var(--d-line-soft); border-radius: 4px; padding: 1px 5px; }
pre code { background: none; border: 0; padding: 0; color: inherit; }

.codehead {
  display: flex; align-items: center; justify-content: space-between;
  background: var(--d-panel-2); border: 1px solid var(--d-line); border-bottom: 0;
  border-radius: var(--d-radius) var(--d-radius) 0 0; padding: 9px 16px;
  font-family: var(--d-mono); font-size: 12px; color: var(--d-ink-dim);
}
.codehead + pre { border-radius: 0 0 var(--d-radius) var(--d-radius); }

/* ── diagram ────────────────────────────────────────────── */
/* The drawing needs its width to stay legible, so on a narrow screen it scrolls
   sideways rather than shrinking the type past reading size. */
.figure { margin: 6px 0 8px; }
.figure .scroll { overflow-x: auto; padding-bottom: 6px; }
.flow { display: block; min-width: 860px; width: 100%; height: auto; }
.flow text { font-family: var(--d-text); }
.flow .mono { font-family: var(--d-mono); }
.flow .tag { fill: var(--d-ink-dim); font-size: 11px; letter-spacing: .14em; }
.flow .lbl { fill: var(--d-ink); font-size: 14px; font-weight: 600; }
.flow .sub { fill: var(--d-ink-body); font-size: 13.5px; }
.flow .st  { fill: var(--d-ink); font-size: 12.5px; }
.flow .note-m { fill: var(--d-flag); font-size: 12.5px; }
.flow .onblue-t { fill: #fff; font-size: 17px; font-weight: 600; }
.flow .onblue-s { fill: rgba(255,255,255,.82); font-size: 11.5px; letter-spacing: .01em; }
.figure figcaption { color: var(--d-ink-dim); font-size: 13px; margin-top: 10px; max-width: 74ch; }

/* ── panels, tables, lists ──────────────────────────────── */
.grid { display: grid; gap: 16px; }
.grid.two { grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); }
.grid.three { grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); }

.card {
  background: var(--d-panel); border: 1px solid var(--d-line); border-radius: var(--d-radius);
  padding: 20px 22px;
}
.card h3 { margin-bottom: 6px; }
.card p:last-child { margin-bottom: 0; }

table { width: 100%; border-collapse: collapse; margin-bottom: 18px; font-size: 15px; }
th, td { text-align: left; padding: 11px 14px; border-bottom: 1px solid var(--d-line-soft); vertical-align: top; }
th { color: var(--d-ink); font-weight: 600; font-size: 13px; letter-spacing: .02em; border-bottom-color: var(--d-line); }
td code { white-space: nowrap; }

ul.clean { list-style: none; }
ul.clean li { position: relative; padding-left: 20px; margin-bottom: 9px; }
ul.clean li::before { content: "▸"; position: absolute; left: 0; color: var(--d-accent); font-size: 12px; top: 3px; }

.note {
  border-left: 2px solid var(--d-accent); background: var(--d-panel);
  padding: 14px 18px; border-radius: 0 var(--d-radius) var(--d-radius) 0; margin-bottom: 18px;
}
.note.warn { border-left-color: var(--d-amber); }
.note p:last-child { margin-bottom: 0; }

.pill { font-family: var(--d-mono); font-size: 11px; padding: 3px 8px; border-radius: 999px; border: 1px solid var(--d-line); color: var(--d-ink-dim); }
.pill.ok { color: var(--d-green); border-color: rgba(61,220,151,.3); }
.pill.warn { color: var(--d-amber); border-color: rgba(240,180,41,.3); }

/* ── footer ─────────────────────────────────────────────── */
footer { padding: 40px 0 60px; color: var(--d-ink-dim); font-size: 14px; }
footer a { color: var(--d-ink-dim); text-decoration: none; margin-right: 18px; }
footer a:hover { color: var(--d-ink); }
.foot-row { display: flex; justify-content: space-between; gap: 20px; flex-wrap: wrap; padding-top: 24px; border-top: 1px solid var(--d-line); }

@media (max-width: 1000px) {
  /* the site menu needs room; below this the section row and the CTA carry the page */
  .mainnav { display: none; }
}

@media (max-width: 720px) {
  .top .btn { padding: 8px 12px; font-size: 13px; }
  .top .subbar { gap: 14px; }
  section { padding: 40px 0; }
  .hero { padding: 52px 0 40px; }
  body::before { background-size: 32px 32px; }
  /* the field tables carry identifiers; let them wrap rather than push the page wide */
  table { font-size: 14px; }
  th, td { padding: 9px 8px; }
  td code { white-space: normal; word-break: break-word; }
  pre { font-size: 12.5px; padding: 14px 14px; }
}