@blaaiz/docs-core 0.1.0

package/styles/api-reference.css

@@ -0,0 +1,1417 @@
+/*
+ * @blaaiz/docs-core — the API-reference view (Mintlify-style).
+ *
+ * Import after docs.css:
+ *   @import '@blaaiz/docs-core/styles/api-reference.css';
+ *
+ * Pairs with `apiOperationLayout` from @blaaiz/docs-core/ui and the
+ * fumadocs-openapi patch shipped in this package (patches/).
+ *
+ * ---------------------------------------------------------------------------
+ * UPGRADE CHECKLIST — the fumadocs class signatures this file selects on
+ * ---------------------------------------------------------------------------
+ *
+ * fumadocs and fumadocs-openapi render most of the reference page themselves,
+ * with Tailwind utility classes and no stable hooks. Where a rule must reach one
+ * of their elements, it matches a *signature*: the utility classes that element
+ * is the only one to carry. That works, and it is only as stable as their markup.
+ *
+ * Re-check every key below after a `fumadocs-ui` or `fumadocs-openapi` upgrade.
+ * A key that no longer matches loses its styling silently — nothing errors.
+ *
+ * | Key (`[class*='…']`)                | Matches                                        |
+ * | ----------------------------------- | ---------------------------------------------- |
+ * | `w-[400px`                          | The right-hand code/response rail column        |
+ * | `1285`                              | A `full: true` page's width cap (also docs.css) |
+ * | `min-w-0` + `flex-1`                | The operation's left (prose) column             |
+ * | `prose-no-margin`                   | A prose block whose margins fumadocs zeroes     |
+ * | `overflow-x-auto`                   | A code block's scroll container                 |
+ * | `rounded-xl` + `overflow-hidden`    | The code panel shell in the rail                |
+ * | `bg-fd-background`                  | The code panel's body inside that shell         |
+ * | `rounded-lg`                        | The prev/next footer cards                      |
+ * | `border-y` + `bg-fd-secondary`      | The playground's header/footer bars             |
+ * | `group` + `w-fit`                   | The playground's auth ("Authorization") button  |
+ * | `rounded-xl` (on `form`)            | The playground form shell                       |
+ * | `rounded-xl` + `shadow-md` (form)   | The playground dialog                           |
+ * | `font-mono` (on `textarea`)         | The JSON body editor                            |
+ * | `rounded-md` (on `input`)           | A parameter input                               |
+ * | `grid` + `gap-4`                    | The parameter grid                              |
+ * | `font-medium` (on `span`)           | A field name row; with `text-red` its required  |
+ * |                                     | marker                                          |
+ * | `bg-fd-secondary` + `text-xs`       | A schema chip; with `border`, a schema toggle   |
+ * |                                     | button; with `shadow-md`, a constraint chip     |
+ * | `mt-2` + `flex-row`                 | The "Value in" enum row; with `flex-wrap`, its  |
+ * |                                     | wrapping variant                                |
+ * | `flex-col` + `bg-fd-secondary`      | One enum card (the `data-open` menu target)     |
+ * | `bg-fd-popover` + `backdrop-blur`   | The schema popover                              |
+ * | `py-4` + `border-t`                 | One field row inside a schema block;            |
+ * |                                     | `first:border-t-0` marks the first              |
+ * | `border-b` + `last:border-b-0`      | A response/schema section divider               |
+ *
+ * The playground's own DOM hooks (`.api-tryit-*`, `.api-*`) are ours — they come
+ * from `@blaaiz/docs-core/ui`, so they change only when this package changes.
+ */
+
+/* --- The code/response rail ------------------------------------------- */
+
+/* API rail panels: no window dots; the code body sits on the page background
+   (white in light, near-black in dark) so request and response match. */
+:is(#nd-page div[class*='w-[400px'], .api-tryit-example) figure.shiki {
+  padding-top: 0;
+  border-radius: 0;
+  box-shadow: none;
+  background: var(--color-fd-background);
+}
+
+:is(#nd-page div[class*='w-[400px'], .api-tryit-example) figure.shiki::before,
+:is(#nd-page div[class*='w-[400px'], .api-tryit-example) figure.shiki::after {
+  content: none;
+}
+
+:is(#nd-page div[class*='w-[400px'], .api-tryit-example) figure.shiki > button {
+  top: 0.6rem;
+  right: 0.6rem;
+  transform: none;
+}
+
+/* Denser code in the rail: smaller type, tighter lines than the guide blocks. */
+:is(#nd-page div[class*='w-[400px'], .api-tryit-example) figure.shiki pre {
+  font-size: 12.5px;
+  line-height: 1.7;
+}
+
+/* Request code: the same inset, rounded inner shape as the response's panel
+   (white, radius 12, 1px of the grey card framing it). */
+:is(#nd-page div[class*='w-[400px'], .api-tryit-example) .openapi-usage figure.shiki {
+  margin: 0 1px 1px;
+  border-radius: 12px;
+}
+
+/* Response body panel: inset it the same 1px so its 12px corners read as a
+   rounded card framed by the box, matching the request code. It was flush to
+   the box edge, so the rounding had no frame to show against. */
+:is(#nd-page div[class*='w-[400px'], .api-tryit-example)
+  div[class*='rounded-xl'][class*='overflow-hidden']
+  > div[class*='bg-fd-background'] {
+  margin: 0 1px 1px;
+}
+
+/* The request panel gets the same card as the response: rounded, grey, clipped. */
+:is(#nd-page div[class*='w-[400px'], .api-tryit-example) .openapi-usage {
+  display: flex;
+  flex-direction: column;
+  margin: 1rem 0;
+  border: 1px solid var(--color-fd-border);
+  border-radius: 12px;
+  overflow: hidden;
+  background: var(--color-fd-secondary);
+}
+
+/* Panel headers (the response status bar): breathable, not bulky. The status
+   buttons carry their own py-2, so the bar itself gets only a sliver — this
+   lands both headers at the same 43px height. */
+:is(#nd-page div[class*='w-[400px'], .api-tryit-example) div[class*='overflow-x-auto'] {
+  padding: 0.1875rem 0.8rem;
+}
+
+/* The active tab's underline hugs the text instead of floating at the button's
+   far edge — trade padding for margin so height and centering are unchanged. */
+:is(#nd-page div[class*='w-[400px'], .api-tryit-example) div[class*='overflow-x-auto'] > button {
+  padding-bottom: 0.25rem;
+  margin-bottom: 0.25rem;
+}
+
+/* Patched usage panel header: endpoint name left, language dropdown right. */
+.openapi-usage-header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 0.75rem;
+  padding: 0.45rem 0.8rem;
+  border-bottom: 1px solid var(--color-fd-border);
+}
+
+.openapi-usage-title {
+  min-width: 0;
+  overflow: hidden;
+  font-size: 13px;
+  font-weight: 600;
+  color: var(--color-fd-foreground);
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.openapi-usage-lang {
+  flex-shrink: 0;
+  /* The fumadocs Select trigger defaults to full width; keep it compact. */
+  width: auto !important;
+  min-width: 0;
+  gap: 6px;
+  height: auto;
+  padding: 4px 9px;
+  font-size: 12px;
+  border-radius: 7px;
+  background: var(--color-fd-card);
+}
+
+/* Multi-example request selector (endpoints with several request bodies, e.g.
+   NGN/GBP/USD payout examples): a clean compact dropdown above the request box,
+   not a bare full-width button. Its hidden Select input is removed. */
+:is(#nd-page div[class*='w-[400px'], .api-tryit-example)
+  > div[class*='prose-no-margin']
+  > button:first-child {
+  flex-shrink: 0;
+  width: auto;
+  align-self: flex-start;
+  gap: 8px;
+  margin-bottom: 0.75rem;
+  padding: 5px 11px;
+  border-radius: 9px;
+  border-color: var(--color-fd-border);
+  background: var(--color-fd-card);
+  font-size: 12.5px;
+  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
+}
+
+:is(#nd-page div[class*='w-[400px'], .api-tryit-example) > div[class*='prose-no-margin'] > input {
+  display: none;
+}
+
+/* The endpoint title renders inside the left column; style it as a page title. */
+#nd-page div[class*='min-w-0'][class*='flex-1'] > div:first-child :is(h1, h2) {
+  font-size: 1.875rem;
+  font-weight: 700;
+  line-height: 1.15;
+  letter-spacing: -0.01em;
+}
+
+/* Copy-page action on the title row, held to the left column's right edge. The
+   row overlaps other content (negative margin + z-index), so it must not
+   swallow their clicks: the row is click-through, only its button is live. */
+#nd-page .api-page-actions {
+  display: flex;
+  justify-content: flex-end;
+  position: relative;
+  z-index: 2;
+  margin-bottom: -2.75rem;
+  pointer-events: none;
+}
+
+#nd-page .api-page-actions > * {
+  pointer-events: auto;
+}
+
+@media (min-width: 1280px) {
+  #nd-page .api-page-actions {
+    padding-right: calc(460px + 1.5rem);
+  }
+}
+
+/* Roomier endpoint description. */
+#nd-page div[class*='min-w-0'][class*='flex-1'] > div:first-child + * :is(p, span),
+#nd-page div[class*='min-w-0'][class*='flex-1'] > p:first-of-type {
+  line-height: 1.95;
+}
+
+/* Prev/next footer belongs to the left column — margin (not padding) so the
+   divider line also ends where the rail's column begins. Scoped to the API
+   reference view (its page marker is the 1285px cap); guide pages have no rail,
+   so their footer must span the full content width. */
+@media (min-width: 1280px) {
+  #nd-page[class*='1285'] .grid:has(> a[class*='rounded-lg']) {
+    margin-right: calc(460px + 1.5rem);
+  }
+}
+
+/* The rail never moves. The outer div stays in the flow as a 460px spacer; the
+   inner wrapper is position:fixed (auto left = the spacer's x), viewport height.
+   Both boxes stay visible; only their content scrolls. */
+@media (min-width: 1280px) {
+  #nd-page div[class*='w-[400px'] {
+    position: static;
+    width: 460px;
+  }
+
+  #nd-page div[class*='w-[400px'] > div[class*='prose-no-margin'] {
+    position: fixed;
+    top: 6.5rem;
+    width: 460px;
+    /* Max height, not fixed: the boxes are content-sized and only shrink and
+       scroll when the viewport runs out — no grey filler on tall screens. */
+    max-height: calc(100dvh - 8rem);
+    display: flex;
+    flex-direction: column;
+    gap: 1rem;
+    min-height: 0;
+  }
+
+  /* Request box: what it needs, up to half the rail; its code scrolls. */
+  #nd-page div[class*='w-[400px'] .openapi-usage {
+    flex: 0 1 auto;
+    max-height: 50%;
+    min-height: 0;
+    margin: 0;
+  }
+
+  /* Response box: content-sized; shrinks and scrolls when space runs out. */
+  #nd-page div[class*='w-[400px'] > div[class*='prose-no-margin'] > div:last-child {
+    display: flex;
+    flex-direction: column;
+    flex: 0 1 auto;
+    min-height: 0;
+    margin: 0;
+  }
+
+  /* Panel headers never shrink — a squeezed box clips its code, not its header. */
+  #nd-page div[class*='w-[400px'] .openapi-usage-header,
+  #nd-page div[class*='w-[400px'] div[class*='overflow-x-auto'] {
+    flex-shrink: 0;
+  }
+
+  /* The response card's tab panel is the element that shrinks when the rail is
+     squeezed — let it shrink (flex defaults to min-height:auto) and make it the
+     scroll container, otherwise its content paints past it and the card's
+     overflow:hidden swallows it. */
+  #nd-page div[class*='w-[400px'] > div[class*='prose-no-margin'] > div:last-child > * {
+    min-height: 0;
+    overflow-y: auto;
+    scrollbar-width: thin;
+  }
+
+  /* Request figure only: a flex column so its code region gets a real (shrunk)
+     height to scroll in when the box is squeezed, and its content height when
+     not. The response figure sits inside fumadocs' own scroll wrapper and must
+     stay untouched — clipping it there hides content instead of scrolling. */
+  #nd-page div[class*='w-[400px'] .openapi-usage figure.shiki {
+    display: flex;
+    flex-direction: column;
+    flex: 0 1 auto;
+    min-height: 0;
+    overflow: hidden;
+  }
+}
+
+#nd-page div[class*='w-[400px'] .openapi-usage figure.shiki [role='region'] {
+  flex: 0 1 auto;
+  min-height: 0;
+  overflow: auto;
+  scrollbar-width: thin;
+}
+
+/* --- Try-it bar + modal ------------------------------------------------- */
+
+/* Compact endpoint bar (Mintlify-style): method chip, url, "Try it" button. */
+#nd-page .api-tryit-bar {
+  display: flex;
+  align-items: center;
+  gap: 0.65rem;
+  margin: 1.25rem 0 0.5rem;
+  padding: 0.4rem 0.4rem 0.4rem 0.65rem;
+  border: 1px solid var(--color-fd-border);
+  border-radius: 12px;
+  background: var(--color-fd-card);
+  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
+}
+
+#nd-page .api-tryit-method {
+  flex-shrink: 0;
+  padding: 3px 9px;
+  border-radius: 7px;
+  font-size: 11.5px;
+  font-weight: 700;
+  letter-spacing: 0.02em;
+  font-family: var(--font-mono, ui-monospace, monospace);
+  color: #fff;
+  background: var(--color-fd-primary);
+}
+
+#nd-page .api-tryit-method[data-method='get'] {
+  background: #16a34a;
+}
+
+#nd-page .api-tryit-method[data-method='delete'] {
+  background: #dc2626;
+}
+
+#nd-page .api-tryit-method[data-method='patch'],
+#nd-page .api-tryit-method[data-method='put'] {
+  background: #d97706;
+}
+
+#nd-page .api-tryit-url {
+  flex: 1;
+  min-width: 0;
+  overflow: hidden;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+  font-family: var(--font-mono, ui-monospace, monospace);
+  font-size: 13px;
+}
+
+#nd-page .api-tryit-host {
+  color: var(--color-fd-muted-foreground);
+}
+
+#nd-page .api-tryit-path {
+  color: var(--color-fd-foreground);
+  font-weight: 500;
+}
+
+#nd-page .api-tryit-btn {
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
+  flex-shrink: 0;
+  padding: 7px 14px;
+  border: none;
+  border-radius: 9px;
+  font-size: 13px;
+  font-weight: 600;
+  color: var(--color-fd-primary-foreground, #fff);
+  background: var(--color-fd-primary);
+  cursor: pointer;
+  transition: filter 0.15s ease;
+}
+
+#nd-page .api-tryit-btn:hover {
+  filter: brightness(1.08);
+}
+
+/* Modal: dimmed backdrop, centered panel; the playground form lives inside. */
+.api-tryit-overlay {
+  position: fixed;
+  inset: 0;
+  z-index: 9999;
+  display: grid;
+  place-items: center;
+  padding: clamp(16px, 4vw, 56px);
+  background: color-mix(in oklab, black 52%, transparent);
+  backdrop-filter: blur(2px);
+}
+
+.api-tryit-modal {
+  position: relative;
+  width: min(720px, 100%);
+  height: min(85vh, 64rem);
+  display: grid;
+  grid-template-columns: minmax(0, 1fr);
+  overflow: hidden;
+  border: 1px solid var(--color-fd-border);
+  border-radius: 16px;
+  background: var(--color-fd-background);
+  box-shadow: 0 24px 70px -12px rgba(0, 0, 0, 0.45);
+}
+
+/* Two columns (Mintlify): the form left, the code sample + response right. */
+.api-tryit-modal[data-columns='2'] {
+  width: min(1240px, 100%);
+  grid-template-columns: minmax(0, 1fr) minmax(0, 440px);
+}
+
+@media (max-width: 1100px) {
+  .api-tryit-modal[data-columns='2'] {
+    width: min(720px, 100%);
+    grid-template-columns: minmax(0, 1fr);
+  }
+
+  .api-tryit-modal[data-columns='2'] .api-tryit-example {
+    display: none;
+  }
+}
+
+.api-tryit-form {
+  min-height: 0;
+  display: flex;
+  flex-direction: column;
+  overflow: hidden;
+}
+
+/* Only the fields scroll; the request bar above stays pinned. */
+.api-tryit-scroll {
+  flex: 1;
+  min-height: 0;
+  overflow-y: auto;
+  scrollbar-width: thin;
+  padding: 1.25rem 1.5rem 1.5rem;
+}
+
+/* The playground form inside the modal: drop its card chrome — the modal is
+   the card. */
+.api-tryit-form form[class*='rounded-xl'] {
+  border: none;
+  box-shadow: none;
+}
+
+/* The request bar. Fumadocs renders a server-URL row and a method/Send row; the
+   framework hides both and renders its own single-line bar (RequestBar), which
+   mirrors the live URL and forwards clicks to those hidden controls — the URL
+   stays live and Send still runs the real request. */
+.api-tryit-form form > button:first-of-type,
+.api-tryit-form form > div:first-of-type {
+  display: none;
+}
+
+/* The bar: [method badge] base-url [env chevron] /path — with Send outside. A
+   pinned header (it does not scroll with the fields), set a little down from the
+   modal's top edge and divided from the scrolling content below. */
+.api-tryit-reqline {
+  flex: none;
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  padding: 1.7rem 1.5rem 1.1rem;
+  border-bottom: 1px solid var(--color-fd-border);
+}
+
+.api-tryit-reqbar {
+  flex: 1;
+  min-width: 0;
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  padding: 6px 8px 6px 7px;
+  border: 1px solid var(--color-fd-border);
+  border-radius: 12px;
+  background: color-mix(in oklab, var(--color-fd-muted) 45%, var(--color-fd-secondary));
+  font-family: var(--font-mono, ui-monospace, 'SF Mono', Menlo, monospace);
+  font-size: 13.5px;
+  overflow: hidden;
+}
+
+/* The URL + path scroll here when long; the method (left) and copy (right) stay
+   pinned, so a long endpoint never breaks the bar or pushes Send off. */
+.api-tryit-reqscroll {
+  flex: 1;
+  min-width: 0;
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  overflow-x: auto;
+  scrollbar-width: none;
+}
+
+.api-tryit-reqscroll::-webkit-scrollbar {
+  display: none;
+}
+
+.api-tryit-reqmethod {
+  flex: none;
+  padding: 3px 9px;
+  border-radius: 7px;
+  font-size: 12px;
+  font-weight: 700;
+  letter-spacing: 0.02em;
+  color: var(--color-fd-primary);
+  background: color-mix(in oklab, var(--color-fd-primary) 15%, transparent);
+}
+
+.api-tryit-reqmethod[data-method='get'] {
+  color: #16a34a;
+  background: color-mix(in oklab, #16a34a 15%, transparent);
+}
+
+.api-tryit-reqmethod[data-method='delete'] {
+  color: #dc2626;
+  background: color-mix(in oklab, #dc2626 15%, transparent);
+}
+
+.api-tryit-reqmethod[data-method='put'],
+.api-tryit-reqmethod[data-method='patch'] {
+  color: #d97706;
+  background: color-mix(in oklab, #d97706 15%, transparent);
+}
+
+.api-tryit-envwrap {
+  position: relative;
+  flex: none;
+  display: inline-flex;
+}
+
+.api-tryit-env {
+  flex: none;
+  display: inline-flex;
+  align-items: center;
+  gap: 5px;
+  padding: 0;
+  border: none;
+  background: none;
+  font: inherit;
+  color: var(--color-fd-muted-foreground);
+  cursor: pointer;
+}
+
+/* Server menu: a small list under the URL, rather than the playground's
+   full-screen server dialog. Portaled and fixed-positioned from the trigger's
+   rect, because the request bar clips its overflow for long URLs. */
+.api-tryit-envmenu {
+  position: fixed;
+  z-index: 10001;
+  margin: 0;
+  padding: 4px;
+  list-style: none;
+  min-width: max-content;
+  border: 1px solid var(--color-fd-border);
+  border-radius: 10px;
+  background: var(--color-fd-popover, var(--color-fd-card));
+  box-shadow:
+    0 1px 2px rgba(0, 0, 0, 0.06),
+    0 10px 26px -8px rgba(0, 0, 0, 0.35);
+}
+
+.api-tryit-envitem {
+  display: flex;
+  align-items: center;
+  gap: 7px;
+  width: 100%;
+  padding: 6px 10px 6px 6px;
+  border: none;
+  border-radius: 7px;
+  background: none;
+  color: var(--color-fd-foreground);
+  font: inherit;
+  text-align: left;
+  white-space: nowrap;
+  cursor: pointer;
+}
+
+.api-tryit-envitem:hover {
+  background: color-mix(in oklab, var(--color-fd-foreground) 8%, transparent);
+}
+
+.api-tryit-envitem[data-active] {
+  color: var(--color-fd-primary);
+}
+
+/* A fixed slot for the tick, so the URLs line up whether or not one is set. */
+.api-tryit-envcheck {
+  flex: none;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 13px;
+  height: 13px;
+}
+
+.api-tryit-envcheck svg {
+  width: 12px;
+  height: 12px;
+}
+
+.api-tryit-env svg {
+  width: 13px;
+  height: 13px;
+  opacity: 0.85;
+}
+
+.api-tryit-env:hover {
+  color: var(--color-fd-foreground);
+}
+
+.api-tryit-reqpath {
+  display: inline-flex;
+  align-items: center;
+  white-space: nowrap;
+  color: var(--color-fd-foreground);
+  font-weight: 600;
+}
+
+.api-tryit-slash {
+  margin: 0 3px;
+  font-weight: 400;
+  color: var(--color-fd-muted-foreground);
+}
+
+/* Copy the full URL — pinned to the right of the bar, past the scrolling URL. */
+.api-tryit-copy {
+  flex: none;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 28px;
+  height: 28px;
+  padding: 0;
+  border: none;
+  border-radius: 7px;
+  background: none;
+  color: var(--color-fd-muted-foreground);
+  cursor: pointer;
+  transition:
+    color 0.12s ease,
+    background 0.12s ease;
+}
+
+.api-tryit-copy svg {
+  width: 15px;
+  height: 15px;
+}
+
+.api-tryit-copy:hover {
+  color: var(--color-fd-foreground);
+  background: color-mix(in oklab, var(--color-fd-foreground) 8%, transparent);
+}
+
+.api-tryit-copy[data-copied] {
+  color: #16a34a;
+}
+
+.api-tryit-send {
+  flex: none;
+  display: inline-flex;
+  align-items: center;
+  gap: 7px;
+  padding: 9px 18px;
+  border: none;
+  border-radius: 10px;
+  background: var(--color-fd-primary);
+  color: var(--color-fd-primary-foreground, #fff);
+  font-size: 14px;
+  font-weight: 600;
+  cursor: pointer;
+  transition: filter 0.15s ease;
+}
+
+.api-tryit-send svg {
+  width: 10px;
+  height: 10px;
+}
+
+.api-tryit-send:hover {
+  filter: brightness(1.07);
+}
+
+.api-tryit-send[data-loading] {
+  cursor: progress;
+  opacity: 0.85;
+}
+
+.api-tryit-send .api-tryit-spin {
+  width: 13px;
+  height: 13px;
+  animation: api-tryit-spin 0.7s linear infinite;
+}
+
+@keyframes api-tryit-spin {
+  to {
+    transform: rotate(360deg);
+  }
+}
+
+/* The response panel (fumadocs' result display). Round it off instead of the
+   default full-bleed top/bottom borders, and give the JSON body room to breathe.
+   The response headers are hidden — the status, URL, and body are what a reader
+   needs from a try-it call. */
+.api-tryit-form div[class*='border-y'][class*='bg-fd-secondary'] {
+  margin-top: 1.1rem;
+  padding: 14px;
+  border: 1px solid var(--color-fd-border);
+  border-radius: 14px;
+}
+
+/* Hide the "Headers (N)" disclosure (its button carries the `group`/`w-fit`
+   utilities the status-row Close button does not). */
+.api-tryit-form
+  div[class*='border-y'][class*='bg-fd-secondary']
+  > div:has(> button[class*='group'][class*='w-fit']) {
+  display: none;
+}
+
+/* Roomier line height for the JSON body. The result code block is portaled with
+   the modal, outside #nd-page, so the base code styles don't reach it. */
+.api-tryit-form figure.shiki code {
+  line-height: 1.75;
+}
+
+/* Right column: the code sample + response, on the secondary surface. */
+.api-tryit-example {
+  min-height: 0;
+  overflow-y: auto;
+  scrollbar-width: thin;
+  padding: 1.25rem;
+  border-left: 1px solid var(--color-fd-border);
+  background: color-mix(in oklab, var(--color-fd-secondary) 45%, var(--color-fd-background));
+}
+
+/* Playground sections (Authorization, Body) as always-open cards. */
+.api-tryit-section {
+  margin: 1rem 0;
+  padding: 1rem 1.1rem;
+  border: 1px solid var(--color-fd-border);
+  border-radius: 12px;
+  background: var(--color-fd-card);
+}
+
+.api-tryit-section-title {
+  margin: 0 0 0.75rem;
+  font-size: 14px;
+  font-weight: 600;
+  color: var(--color-fd-foreground);
+}
+
+/* Fumadocs' playground uses Base UI popups (the language select, the server-URL
+   dialog, schema popovers) that portal to <body> at z-50. The modal overlay is
+   at 9999, so while it is open those popups would open *behind* it. Lifting the
+   portal container above the overlay puts them back on top. Scoped to when the
+   modal is open so page-level popups are untouched. */
+body.api-tryit-open [data-base-ui-portal] {
+  position: relative;
+  z-index: 10000;
+}
+
+/* The server-URL editor is a plain Base UI dialog. Give it a premium,
+   intentional feel: narrower, roomier, on the card surface, with a refined
+   shadow — and style the URL select and the (otherwise unstyled) custom-URL
+   input so nothing looks like a raw browser control. */
+body.api-tryit-open [data-base-ui-portal] [role='dialog'] {
+  width: min(440px, calc(100vw - 32px));
+  max-width: min(440px, calc(100vw - 32px));
+  gap: 14px;
+  padding: 22px;
+  border-radius: 16px;
+  background: var(--color-fd-card);
+  box-shadow:
+    0 1px 2px rgba(0, 0, 0, 0.06),
+    0 20px 50px -16px rgba(0, 0, 0, 0.4);
+}
+
+body.api-tryit-open [data-base-ui-portal] [role='dialog'] h2 {
+  font-size: 16px;
+  letter-spacing: -0.01em;
+}
+
+body.api-tryit-open [data-base-ui-portal] [role='dialog'] button[role='combobox'] {
+  padding: 10px 12px;
+  border-radius: 10px;
+  background: var(--color-fd-background);
+  font-size: 13px;
+}
+
+body.api-tryit-open [data-base-ui-portal] [role='dialog'] > button:last-of-type {
+  position: absolute;
+  top: 14px;
+  right: 14px;
+  color: var(--color-fd-muted-foreground);
+}
+
+/* Body-mode switch. Fumadocs renders one button that toggles between the field
+   inputs and a raw-JSON textarea ("Open/Close JSON Editor"). Restyle it into a
+   Mintlify-style segmented control — Fields | JSON — drawn as the button's two
+   pseudo-elements. The button is made inert and pointer-events are re-enabled
+   only on the *inactive* segment, so clicking a segment selects it and clicking
+   the active one is a no-op. Current mode is read from whether the JSON textarea
+   is present. The toggle is the only form button that is secondary + text-xs +
+   bordered (Send is primary; the auth combobox is text-sm). */
+.api-tryit-section[data-type='body']
+  button[class*='bg-fd-secondary'][class*='text-xs'][class*='border'] {
+  position: relative;
+  display: inline-flex;
+  align-items: stretch;
+  gap: 0;
+  height: auto;
+  padding: 3px;
+  font-size: 0;
+  line-height: 1;
+  border: 1px solid var(--color-fd-border);
+  border-radius: 11px;
+  background: color-mix(in oklab, var(--color-fd-muted) 55%, var(--color-fd-secondary));
+  box-shadow: none;
+  pointer-events: none;
+}
+
+/* Any native icon/label children are hidden; the segments are the pseudos. */
+.api-tryit-section[data-type='body']
+  button[class*='bg-fd-secondary'][class*='text-xs'][class*='border']
+  > * {
+  display: none;
+}
+
+.api-tryit-section[data-type='body']
+  button[class*='bg-fd-secondary'][class*='text-xs'][class*='border']::before,
+.api-tryit-section[data-type='body']
+  button[class*='bg-fd-secondary'][class*='text-xs'][class*='border']::after {
+  display: inline-flex;
+  align-items: center;
+  padding: 6px 14px 6px 32px;
+  font-size: 13px;
+  font-weight: 500;
+  line-height: 1;
+  border-radius: 8px;
+  color: var(--color-fd-muted-foreground);
+  background-repeat: no-repeat;
+  background-position: 12px center;
+  background-size: 14px;
+  pointer-events: none;
+  transition:
+    color 0.12s ease,
+    background-color 0.12s ease,
+    box-shadow 0.12s ease;
+}
+
+.api-tryit-section[data-type='body']
+  button[class*='bg-fd-secondary'][class*='text-xs'][class*='border']::before {
+  content: 'Fields';
+  margin-right: 2px;
+  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%238a8a94' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M8 3H7a2 2 0 0 0-2 2v5a2 2 0 0 1-2 2 2 2 0 0 1 2 2v5c0 1.1.9 2 2 2h1'/%3E%3Cpath d='M16 21h1a2 2 0 0 0 2-2v-5a2 2 0 0 1 2-2 2 2 0 0 1-2-2V5a2 2 0 0 0-2-2h-1'/%3E%3C/svg%3E");
+}
+
+.api-tryit-section[data-type='body']
+  button[class*='bg-fd-secondary'][class*='text-xs'][class*='border']::after {
+  content: 'JSON';
+  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%238a8a94' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z'/%3E%3Cpath d='M14 2v6h6'/%3E%3C/svg%3E");
+}
+
+/* The active segment is raised. Fields mode = no JSON textarea present. */
+.api-tryit-section[data-type='body']:not(:has(textarea[class*='font-mono']))
+  button[class*='bg-fd-secondary'][class*='text-xs'][class*='border']::before,
+.api-tryit-section[data-type='body']:has(textarea[class*='font-mono'])
+  button[class*='bg-fd-secondary'][class*='text-xs'][class*='border']::after {
+  color: var(--color-fd-foreground);
+  background-color: var(--color-fd-card);
+  box-shadow:
+    0 1px 2px rgba(0, 0, 0, 0.08),
+    0 0 0 1px rgba(0, 0, 0, 0.03);
+}
+
+/* Only the inactive segment accepts clicks (re-enabled on the inert button),
+   so selecting the current mode is a no-op instead of an accidental toggle. */
+.api-tryit-section[data-type='body']:not(:has(textarea[class*='font-mono']))
+  button[class*='bg-fd-secondary'][class*='text-xs'][class*='border']::after,
+.api-tryit-section[data-type='body']:has(textarea[class*='font-mono'])
+  button[class*='bg-fd-secondary'][class*='text-xs'][class*='border']::before {
+  pointer-events: auto;
+  cursor: pointer;
+}
+
+/* --- The JSON body editor ------------------------------------------------ */
+
+/* Fumadocs' own JSON textarea stays mounted and authoritative (it owns parsing
+   and the form engine) but is not shown — JsonBodyEditor renders the editor the
+   reader actually sees and writes every edit back to it. */
+.api-tryit-section[data-type='body'] div:has(> textarea:not(.api-json-input)) {
+  display: none;
+}
+
+.api-json {
+  margin-top: 0.75rem;
+  border: 1px solid var(--color-fd-border);
+  border-radius: 12px;
+  overflow: hidden;
+  background: var(--color-fd-background);
+}
+
+.api-json[data-invalid] {
+  border-color: color-mix(in oklab, #ef4444 55%, var(--color-fd-border));
+}
+
+.api-json-toolbar {
+  display: flex;
+  justify-content: flex-end;
+  gap: 6px;
+  padding: 6px 8px;
+  border-bottom: 1px solid var(--color-fd-border);
+  background: color-mix(in oklab, var(--color-fd-muted) 45%, var(--color-fd-secondary));
+}
+
+.api-json-action {
+  padding: 4px 10px;
+  border: none;
+  border-radius: 7px;
+  background: none;
+  color: var(--color-fd-muted-foreground);
+  font-size: 12px;
+  font-weight: 500;
+  cursor: pointer;
+  transition:
+    color 0.12s ease,
+    background 0.12s ease;
+}
+
+.api-json-action:hover:not(:disabled) {
+  color: var(--color-fd-foreground);
+  background: color-mix(in oklab, var(--color-fd-foreground) 8%, transparent);
+}
+
+.api-json-action:disabled {
+  opacity: 0.4;
+  cursor: default;
+}
+
+/* The mirror and the textarea must share every text metric, or the caret drifts
+   from the painted glyphs. Both inherit the editor's font, padding, and
+   wrapping; the mirror sits in flow and sets the height, and the textarea lies
+   exactly over it with transparent text and a visible caret. */
+.api-json-editor {
+  position: relative;
+  font-family: var(--font-mono, ui-monospace, 'SF Mono', Menlo, monospace);
+  font-size: 12.5px;
+  line-height: 1.7;
+  tab-size: 2;
+}
+
+.api-json-mirror,
+.api-json-editor .api-json-input {
+  margin: 0;
+  padding: 0.85rem 1rem;
+  border: 0;
+  font: inherit;
+  line-height: inherit;
+  tab-size: inherit;
+  white-space: pre-wrap;
+  overflow-wrap: break-word;
+  word-break: break-word;
+}
+
+.api-json-mirror {
+  min-height: 8.5rem;
+  pointer-events: none;
+  color: var(--color-fd-foreground);
+}
+
+.api-json-editor .api-json-input {
+  position: absolute;
+  inset: 0;
+  width: 100%;
+  height: 100%;
+  resize: none;
+  outline: none;
+  overflow: hidden;
+  background: transparent;
+  color: transparent;
+  caret-color: var(--color-fd-primary);
+}
+
+.api-json-editor .api-json-input::selection {
+  background: color-mix(in oklab, var(--color-fd-primary) 30%, transparent);
+}
+
+/* Highlight palette, keyed to the token kinds the tokenizer emits. */
+.api-json-mirror [data-token='key'] {
+  color: #2563eb;
+}
+
+.api-json-mirror [data-token='string'] {
+  color: #b91c1c;
+}
+
+.api-json-mirror [data-token='number'] {
+  color: #047857;
+}
+
+.api-json-mirror [data-token='literal'] {
+  color: #7c3aed;
+}
+
+.api-json-mirror [data-token='punctuation'] {
+  color: var(--color-fd-muted-foreground);
+}
+
+.dark .api-json-mirror [data-token='key'] {
+  color: #7aa2f7;
+}
+
+.dark .api-json-mirror [data-token='string'] {
+  color: #ff9e9e;
+}
+
+.dark .api-json-mirror [data-token='number'] {
+  color: #6ee7b7;
+}
+
+.dark .api-json-mirror [data-token='literal'] {
+  color: #c4b5fd;
+}
+
+.api-json-error {
+  margin: 0;
+  padding: 8px 12px;
+  border-top: 1px solid color-mix(in oklab, #ef4444 40%, var(--color-fd-border));
+  background: color-mix(in oklab, #ef4444 10%, transparent);
+  color: #b42318;
+  font-size: 12px;
+  font-family: var(--font-mono, ui-monospace, 'SF Mono', Menlo, monospace);
+}
+
+.dark .api-json-error {
+  color: #ff9a94;
+}
+
+/* --- Try-it parameter fields -------------------------------------------- */
+
+/* The section header row carries the mode toggle, a required asterisk, and the
+   body type. The asterisk floats between them as a stray glyph — the body being
+   required is already implied — so hide just that one (field asterisks stay).
+   The row is keyed by the name slot holding the toggle button. */
+.api-tryit-section[data-type='body']
+  span[class*='font-medium']:has(> button)
+  > span[class*='text-red'] {
+  display: none;
+}
+
+/* Body type ("object") — a quiet chip, not loose muted text. */
+.api-tryit-section[data-type='body'] span[class*='font-medium']:has(> button) + code {
+  padding: 2px 8px;
+  border-radius: 6px;
+  background: color-mix(in oklab, var(--color-fd-foreground) 6%, transparent);
+  color: var(--color-fd-muted-foreground);
+}
+
+/* Field label row: the name reads first, its type trails quietly behind. */
+.api-tryit-scroll fieldset > label {
+  margin-bottom: 1px;
+  gap: 0.5rem;
+}
+
+.api-tryit-scroll fieldset > label > span {
+  font-size: 12.5px;
+  letter-spacing: -0.01em;
+  color: var(--color-fd-foreground);
+}
+
+.api-tryit-scroll fieldset > label > span > span[class*='text-red'] {
+  margin: 0 0 0 2px;
+  color: #ef4444;
+}
+
+.api-tryit-scroll fieldset > label > code {
+  flex-shrink: 0;
+  font-size: 11.5px;
+  opacity: 0.75;
+}
+
+/* Inputs and selects: a real, editable surface. Fumadocs' default is a flat
+   secondary block whose border barely reads against it, so a reader cannot tell
+   what is editable — give it contrast and a hover. */
+.api-tryit-scroll input[class*='rounded-md'],
+.api-tryit-scroll button[role='combobox'] {
+  border-radius: 9px;
+  border-color: var(--color-fd-border);
+  background: var(--color-fd-background);
+  font-family: var(--font-mono, ui-monospace, 'SF Mono', Menlo, monospace);
+  font-size: 12.5px;
+  transition:
+    border-color 0.12s ease,
+    background 0.12s ease;
+}
+
+/* A single-line value: a fixed control height reads evenly down the form. */
+.api-tryit-scroll input[class*='rounded-md'] {
+  height: 38px;
+  padding: 0 11px;
+}
+
+/* Selects must grow instead: the authorization-scheme picker carries its scheme
+   name and a description, so a fixed height clipped the description over the
+   label beneath it. */
+.api-tryit-scroll button[role='combobox'] {
+  min-height: 38px;
+  padding: 8px 11px;
+}
+
+/* That picker is a direct child of the panel and carries no spacing of its own,
+   so it sat flush against the field below it. */
+.api-tryit-section[data-type='authorization'] > button[role='combobox'] {
+  margin-bottom: 0.9rem;
+}
+
+/* Fumadocs' clear-value action sits bare beside the type label, reading as a
+   stray glyph; give it a hit area and a hover so it reads as a control. */
+.api-tryit-scroll fieldset > label > button:last-child {
+  flex: none;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 20px;
+  height: 20px;
+  margin-left: 2px;
+  border-radius: 5px;
+  transition: background 0.12s ease;
+}
+
+.api-tryit-scroll fieldset > label > button:last-child:hover {
+  background: color-mix(in oklab, var(--color-fd-foreground) 9%, transparent);
+}
+
+.api-tryit-scroll fieldset > label > button:last-child svg {
+  width: 13px;
+  height: 13px;
+}
+
+.api-tryit-scroll input[class*='rounded-md']:hover,
+.api-tryit-scroll button[role='combobox']:hover {
+  border-color: color-mix(in oklab, var(--color-fd-foreground) 22%, var(--color-fd-border));
+}
+
+/* Placeholders stay clearly lighter than real values, so a pre-filled example
+   never reads as an empty field. */
+.api-tryit-scroll input[class*='rounded-md']::placeholder {
+  color: var(--color-fd-muted-foreground);
+  opacity: 0.6;
+}
+
+/* The fields box: even rhythm between fields, a little air under the mode
+   toggle, and a lighter shadow than the default `shadow-sm`. */
+.api-tryit-scroll div[class*='grid'][class*='gap-4'] {
+  margin-top: 0.55rem;
+  gap: 0.9rem;
+  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
+}
+
+/* --- Sidebar method badges ---------------------------------------------- */
+
+/* Each API sidebar item: a fixed-width method badge, then the endpoint name —
+   badges align in a column, as Mintlify does. */
+.api-nav-item {
+  display: inline-flex;
+  align-items: center;
+  gap: 0.6rem;
+  min-width: 0;
+}
+
+.api-nav-text {
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.api-method-badge {
+  flex-shrink: 0;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  min-width: 42px;
+  padding: 2px 6px;
+  border-radius: 5px;
+  font-size: 9.5px;
+  font-weight: 700;
+  letter-spacing: 0.03em;
+  font-family: var(--font-mono, ui-monospace, monospace);
+  line-height: 1.4;
+  color: var(--color-fd-primary);
+  background: color-mix(in oklab, var(--color-fd-primary) 12%, transparent);
+}
+
+.api-method-badge[data-method='get'] {
+  color: #16a34a;
+  background: color-mix(in oklab, #16a34a 13%, transparent);
+}
+
+.api-method-badge[data-method='delete'] {
+  color: #dc2626;
+  background: color-mix(in oklab, #dc2626 13%, transparent);
+}
+
+.api-method-badge[data-method='put'],
+.api-method-badge[data-method='patch'] {
+  color: #d97706;
+  background: color-mix(in oklab, #d97706 14%, transparent);
+}
+
+/* --- Schema fields ------------------------------------------------------ */
+
+/* Constraint chips (Length, Format…): quiet, flat tags. Not scoped to #nd-page
+   so the portaled schema popover gets the same treatment. */
+.not-prose[class*='bg-fd-secondary'][class*='shadow-md'][class*='text-xs'] {
+  box-shadow: none;
+  border: none;
+  border-radius: 6px;
+  padding: 2px 8px;
+  background: color-mix(in oklab, var(--color-fd-muted-foreground) 9%, transparent);
+}
+
+/* Nested-object popover: opaque, roomy, scrolls within a sane height. */
+div[class*='bg-fd-popover'][class*='backdrop-blur'] {
+  background: var(--color-fd-popover, var(--color-fd-card));
+  backdrop-filter: none;
+  min-width: 340px;
+  padding: 10px;
+  max-height: min(72vh, 34rem);
+  box-shadow:
+    0 4px 6px -2px rgba(0, 0, 0, 0.08),
+    0 16px 40px -8px rgba(0, 0, 0, 0.35);
+}
+
+/* Field spacing comes from the wrapper, not the name row — a taller name row
+   would throw off the inline tag's centering. */
+div[class*='bg-fd-popover'] div[class*='py-4'] {
+  padding-block: 1.15rem;
+}
+
+div[class*='bg-fd-popover'] [class*='prose-no-margin'] {
+  padding-block: 0.15rem 0.35rem;
+}
+
+/* Clear separation between properties. */
+#nd-page div[class*='border-t'][class*='py-4'][class*='first:border-t-0'] {
+  border-top-color: var(--color-fd-border);
+  padding-block: 1.15rem;
+}
+
+/* Show the Format/constraint tag inline on the field row (top-right), centered
+   on the row's midline — Mintlify's name · type · badge layout. */
+:is(#nd-page, div[class*='bg-fd-popover']) div[class*='py-4'][class*='border-t'] {
+  position: relative;
+}
+
+/* A property row lifts while hovered, so an open enum menu paints above the
+   rows beneath it — their top borders would otherwise show through it. */
+:is(#nd-page, div[class*='bg-fd-popover']) div[class*='py-4'][class*='border-t']:hover {
+  z-index: 5;
+}
+
+:is(#nd-page, div[class*='bg-fd-popover'])
+  div[class*='prose-no-margin']
+  > div[class*='mt-2'][class*='flex-row'][class*='flex-wrap'] {
+  position: absolute;
+  top: calc(1.15rem + 11px);
+  transform: translateY(-50%);
+  right: 2.2rem;
+  margin: 0;
+  align-items: center;
+}
+
+/* Enum values ("Value in") share that pinned row with the small constraint
+   chips, but they are a whole card with a bulleted list — pinned, it floated
+   over the neighbouring property's text. Collapse it to a chip the same size as
+   its neighbours that reveals its values on hover. */
+:is(#nd-page, div[class*='bg-fd-popover'])
+  div[class*='prose-no-margin']
+  > div[class*='mt-2'][class*='flex-row']
+  > div[class*='flex-col'][class*='bg-fd-secondary'] {
+  position: relative;
+  width: auto;
+  gap: 0;
+  padding: 2px 8px;
+  border: none;
+  border-radius: 6px;
+  background: color-mix(in oklab, var(--color-fd-muted-foreground) 9%, transparent);
+  box-shadow: none;
+}
+
+/* The card's heading is the chip label; mark it as openable. */
+:is(#nd-page, div[class*='bg-fd-popover'])
+  div[class*='prose-no-margin']
+  > div[class*='mt-2'][class*='flex-row']
+  > div[class*='flex-col'][class*='bg-fd-secondary']
+  > p {
+  display: flex;
+  align-items: center;
+  gap: 4px;
+  white-space: nowrap;
+  cursor: pointer;
+  user-select: none;
+}
+
+:is(#nd-page, div[class*='bg-fd-popover'])
+  div[class*='prose-no-margin']
+  > div[class*='mt-2'][class*='flex-row']
+  > div[class*='flex-col'][class*='bg-fd-secondary']
+  > p::after {
+  content: '';
+  width: 11px;
+  height: 11px;
+  background: currentColor;
+  opacity: 0.65;
+  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E")
+    no-repeat center / contain;
+  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E")
+    no-repeat center / contain;
+}
+
+/* The values become the menu: hidden until the chip is hovered. */
+:is(#nd-page, div[class*='bg-fd-popover'])
+  div[class*='prose-no-margin']
+  > div[class*='mt-2'][class*='flex-row']
+  > div[class*='flex-col'][class*='bg-fd-secondary']
+  > ul {
+  display: none;
+  position: absolute;
+  top: calc(100% + 6px);
+  right: 0;
+  z-index: 20;
+  margin: 0;
+  padding: 5px;
+  min-width: max-content;
+  border: 1px solid var(--color-fd-border);
+  border-radius: 10px;
+  background: var(--color-fd-popover, var(--color-fd-card));
+  box-shadow:
+    0 1px 2px rgba(0, 0, 0, 0.06),
+    0 10px 26px -8px rgba(0, 0, 0, 0.35);
+}
+
+:is(#nd-page, div[class*='bg-fd-popover'])
+  div[class*='prose-no-margin']
+  > div[class*='mt-2'][class*='flex-row']
+  > div[class*='flex-col'][class*='bg-fd-secondary'][data-open]
+  > ul {
+  display: block;
+}
+
+:is(#nd-page, div[class*='bg-fd-popover'])
+  div[class*='prose-no-margin']
+  > div[class*='mt-2'][class*='flex-row']
+  > div[class*='flex-col'][class*='bg-fd-secondary']
+  > ul
+  > li {
+  padding: 4px 9px;
+  border-radius: 6px;
+  list-style: none;
+  white-space: nowrap;
+}
+
+/* The request-example selector above the property list ("NGN — Bank Transfer"):
+   a compact pill rather than a full-width field. */
+#nd-page button[role='combobox'] {
+  gap: 8px;
+  padding: 6px 11px;
+  border-radius: 9px;
+  border-color: var(--color-fd-border);
+  background: var(--color-fd-card);
+  font-size: 13px;
+}
+
+#nd-page button[role='combobox']:hover {
+  border-color: color-mix(in oklab, var(--color-fd-foreground) 22%, var(--color-fd-border));
+}
+
+/* Every select popup on the page — the example picker, the code-sample
+   languages — gets the same menu as the request bar's server switcher. */
+[data-base-ui-portal] [role='listbox'] {
+  padding: 4px;
+}
+
+[data-base-ui-portal] [role='listbox'] [role='option'] {
+  padding: 6px 10px;
+  border-radius: 7px;
+  font-size: 13px;
+}
+
+/* Roomier response/status accordion rows. */
+#nd-page div[class*='border-b'][class*='last:border-b-0'] > h3[class*='font-medium'] {
+  padding-block: 0.7rem;
+}
+
+/* Replace the bare "*" required marker with a Mintlify-style pill. */
+#nd-page span[class*='font-medium'][class*='font-mono'] > span[class*='text-red-400'] {
+  font-size: 0;
+  margin-left: 6px;
+}
+
+#nd-page span[class*='font-medium'][class*='font-mono'] > span[class*='text-red-400']::after {
+  content: 'required';
+  font-size: 11px;
+  font-weight: 500;
+  letter-spacing: 0.01em;
+  color: #e5484d;
+  background: color-mix(in oklab, #e5484d 13%, transparent);
+  padding: 2px 7px;
+  border-radius: 6px;
+}
+
+/* Softer playground card. */
+#nd-page form[class*='rounded-xl'][class*='shadow-md'] {
+  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
+}
+
+.dark #nd-page form[class*='rounded-xl'][class*='shadow-md'] {
+  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
+}