/* Stripe-docs design system ported from the Astro version (src/styles/dokaa.css
   on the api-publique-v1 branch), remapped onto the Nextra 4 DOM. Dokaa orange
   substituted for Stripe blurple, Dokaa purple for their navy code panels.
   Light-only by design, like docs.stripe.com. The search bar and its dropdown
   are intentionally left untouched. */

/* Proxima Nova, the BO typeface, same webflow-hosted file as apps/app.
   Like the BO, a single face: Medium renders every weight, headings included,
   so the docs and the BO produce pixel-identical text. */
@font-face {
  font-family: 'Proxima nova';
  src: url('https://uploads-ssl.webflow.com/634d1ce4d14ffb6934414e3d/634d1ce4d14ffb4146414e49_Proxima%20Nova%20Medium.otf') format('opentype');
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

:root {
  --nextra-navbar-height: 48px;

  --dokaa-primary: #e84810;
  --dokaa-primary-hover: #ff5c24;
  --dokaa-purple: #211532;
  --purple-soft: #2d1f42;

  --ink: #1a1f36;
  --ink-nav: #1a2c44;
  --body: #3c4257;
  --muted: #4f566b;
  --faint: #697386;
  --hairline: #e3e8ee;
  --hairline-soft: #ecf1f6;
  --panel: #f9fafb;
  --chip: #f3f4f6;
}

/* ---------- Global type ---------- */

body {
  background: #ffffff;
  color: var(--body);
  font-family: 'Proxima nova', ui-sans-serif, system-ui, sans-serif;
}

/* The Nextra theme enables "ss01" (an Inter stylistic set). On Proxima Nova
   it swaps in alternate glyphs (hooked y, etc.), diverging from the BO. */
html,
body,
main * {
  font-feature-settings: normal;
}

main h1 {
  color: var(--ink);
  font-size: 32px;
  font-weight: 700;
  line-height: 40px;
}

main h2 {
  color: var(--ink);
  font-size: 24px;
  font-weight: 400;
  line-height: 32px;
  border-bottom: 0;
}

main h3 {
  color: var(--ink);
  font-size: 20px;
  font-weight: 500;
}

main h4 {
  color: var(--ink);
}

main p,
main li {
  font-size: 16px;
  line-height: 26px;
}

main p a,
main li a,
main td a,
main figcaption a {
  color: var(--dokaa-primary);
  font-weight: 500;
  text-decoration: none;
}
main p a:hover,
main li a:hover,
main td a:hover {
  color: var(--dokaa-primary-hover);
}

main .subheading-anchor + a,
main h2 a,
main h3 a {
  color: inherit;
  font-weight: inherit;
}

/* ---------- Search command palette ---------- */

/* Exact clone of the native Nextra search field, measured in devtools:
   256x33.5, padding 8/12, radius 8, 5% black bg, no border, kbd inset 6px. */
.palette-trigger {
  position: relative;
  display: inline-flex;
  align-items: center;
  width: 256px;
  border: 0;
  border-radius: 8px;
  background: rgba(0, 0, 0, 0.05);
  color: oklch(0.446 0.03 256.802);
  font-size: 14px;
  line-height: 1.25;
  padding: 8px 12px;
  cursor: pointer;
}

.palette-trigger-label {
  flex-grow: 1;
  text-align: left;
  white-space: nowrap;
  overflow: hidden;
}

.palette-trigger-kbd {
  position: absolute;
  right: 6px;
  top: 50%;
  transform: translateY(-50%);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 20px;
  width: 32px;
  border: 1px solid oklch(0.928 0.006 264.531);
  border-radius: 4px;
  background: rgb(250, 250, 250);
  color: oklch(0.446 0.03 256.802);
  font-size: 11px;
  padding: 0 6px;
}

.palette-overlay {
  position: fixed;
  inset: 0;
  z-index: 100;
}

.palette-backdrop {
  position: absolute;
  inset: 0;
  width: 100%;
  border: 0;
  padding: 0;
  background: rgba(26, 31, 54, 0.4);
  backdrop-filter: blur(2px);
  cursor: default;
}

.palette-panel {
  position: relative;
  margin: 64px auto 0;
  width: min(640px, calc(100vw - 32px));
  background: #ffffff;
  border: 1px solid var(--hairline);
  border-radius: 12px;
  box-shadow: 0 20px 60px rgba(26, 31, 54, 0.25);
  padding: 10px;
}

.palette-panel .nextra-search {
  width: 100%;
}

.palette-panel .nextra-search input {
  width: 100%;
  font-size: 15px;
  padding: 10px 12px;
  border: 0;
  outline: none;
  background: transparent;
  color: var(--ink);
}

/* While typing, the anchored Nextra results popover is realigned to the
   panel and visually merged with it (Panda-style single box). */
.palette-panel.has-query {
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 0;
}

.palette-overlay ~ * .nextra-search-results,
body:has(.palette-overlay) .nextra-search-results {
  left: 50% !important;
  transform: translateX(-50%) !important;
  width: min(640px, calc(100vw - 32px)) !important;
  max-height: min(60vh, 480px) !important;
  background: #ffffff !important;
  border: 1px solid var(--hairline) !important;
  border-top: 1px solid var(--hairline-soft) !important;
  border-radius: 0 0 12px 12px !important;
  box-shadow: 0 20px 60px rgba(26, 31, 54, 0.25) !important;
  color: var(--body) !important;
}

/* Panda-style: no term highlighting in the excerpts */
.nextra-search-results mark {
  background: transparent !important;
  color: inherit !important;
  font-weight: inherit !important;
}

[role='listbox'] {
  background: #ffffff !important;
  backdrop-filter: none !important;
}

div[class*='x:text-end']:has(time) {
  display: none;
}

.palette-suggestions {
  list-style: none;
  margin: 6px 0 0;
  padding: 6px 0 0;
  border-top: 1px solid var(--hairline-soft);
}

.palette-suggestions a {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 10px 12px;
  border-radius: 8px;
  text-decoration: none;
}

.palette-suggestions a:hover {
  background: var(--panel);
}

.palette-suggestions strong {
  font-size: 14px;
  font-weight: 600;
  color: var(--ink);
}

.palette-suggestions small {
  font-size: 12.5px;
  color: var(--faint);
}

/* ---------- Navbar ---------- */

.nextra-navbar-blur {
  background: #ffffff !important;
  backdrop-filter: none;
  box-shadow: none !important;
  border-bottom: 1px solid var(--hairline);
}

.nextra-navbar nav a {
  color: var(--ink-nav);
}

/* ---------- Sidebar ---------- */

.nextra-sidebar {
  background: #ffffff;
  border-right: 1px solid var(--hairline);
  width: 300px;
}

.nextra-sidebar a,
.nextra-sidebar button {
  color: var(--ink-nav);
  font-size: 14px;
  font-weight: 400;
  border-radius: 6px;
}

.nextra-sidebar a:hover,
.nextra-sidebar button:hover {
  color: var(--dokaa-primary) !important;
  background: transparent !important;
}

/* Active page: primary text, no pill background (Stripe) */
.nextra-sidebar a[class~='x:bg-primary-100'] {
  background: transparent !important;
  color: var(--dokaa-primary) !important;
  font-weight: 600;
}

/* No vertical indent guides */
.nextra-sidebar ul ul {
  border-inline-start: 0 !important;
}

/* Tighter vertical rhythm between rows; minmax(0) so nowrap endpoint
   titles ellipsize instead of widening the column */
.nextra-sidebar ul {
  row-gap: 1px;
  grid-template-columns: minmax(0, 1fr);
}

/* "ENDPOINTS" separator label above the endpoint groups */
.nextra-sidebar li[class~='x:not-first:mt-5'] {
  color: var(--faint);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

/* Endpoint rows: single-line title, HTTP method right-aligned */
.nextra-sidebar a:has(> .ep-row) {
  width: 100%;
}

.ep-row {
  display: flex;
  align-items: center;
  gap: 10px;
  flex: 1;
  min-width: 0;
}

.ep-name {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ep-method {
  flex: none;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.08em;
  line-height: 1;
}

.ep-get {
  color: #15803d;
}

.ep-post {
  color: #2563eb;
}

.ep-patch {
  color: #d97706;
}

.ep-put {
  color: #7c3aed;
}

.ep-delete {
  color: #dc2626;
}

/* Meta titles also feed the breadcrumb: keep it text-only there */
.nextra-breadcrumb .ep-method {
  display: none;
}

/* "Use with an AI assistant": orange sparkle + the callout wash, same accent
   as the rest of the docs so it stands out without leaving the system */
.nextra-sidebar a[href$='/ai/'] {
  background: #fff7f3 !important;
}

.nextra-sidebar a[href$='/ai/']::before {
  content: '✦';
  margin-right: 4px;
  font-size: 13px;
  line-height: 1;
  color: var(--dokaa-primary);
}

.nextra-sidebar a[href$='/ai/']:hover {
  background: #ffefe8 !important;
}

.nextra-sidebar-footer {
  display: none;
}

/* ---------- Right TOC ---------- */

.nextra-toc {
  border-left: 1px solid var(--hairline);
}

.nextra-toc a {
  color: var(--ink-nav);
  font-size: 14px;
}

.nextra-toc a[aria-current='true'],
.nextra-toc a[class~='x:text-primary-600'] {
  color: var(--dokaa-primary) !important;
  font-weight: 500;
}

/* ---------- Inline code ---------- */

main :not(pre) > code.nextra-code {
  background: #f4f7fa;
  border: 1px solid #d4dee9;
  border-radius: 6px;
  color: var(--body);
  font-size: 0.9em;
  padding: 2px 4px;
  box-shadow: none;
}

/* ---------- Code blocks: Dokaa purple panels, Stripe-style ---------- */

div.nextra-code pre {
  background: var(--dokaa-purple) !important;
  border: 0 !important;
  border-radius: 4px;
  font-size: 13px;
  box-shadow: none !important;
}

/* Forced-light pages would use the light syntax palette on the purple panel;
   force the dark token colors instead so the code stays readable. */
div.nextra-code pre code span[style] {
  color: var(--shiki-dark) !important;
}
div.nextra-code pre code {
  color: #f8f8f2;
}

div.nextra-code pre button,
div.nextra-code pre + div button,
div.nextra-code > div > button {
  background: var(--purple-soft) !important;
  color: #b9aed1 !important;
  border: 0 !important;
}

div.nextra-code pre button:hover {
  color: #ffffff !important;
}

/* ---------- Tables ---------- */

main table {
  font-size: 14px;
}
main th {
  color: var(--muted);
  font-size: 13px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  border: 0;
  background: transparent;
  padding-bottom: 8px;
}
main td {
  border: 0;
  border-bottom: 1px solid var(--hairline-soft);
  color: var(--body);
  padding-top: 16px;
  padding-bottom: 16px;
}
main tr {
  background: transparent !important;
  border: 0;
}

/* ---------- Callouts / blockquotes: flat cards, BO pattern ---------- */

main blockquote {
  border: 0;
  border-radius: 16px;
  background: #fff7f3;
  color: var(--body);
  padding: 16px 20px;
  font-style: normal;
}
main blockquote p {
  margin: 0;
}

/* ---------- Footer ---------- */

/* Kill the theme's gray band around the footer; one hairline, white ground */
div[class~='x:bg-gray-100']:has(footer) {
  background: #ffffff !important;
}

div[class~='x:bg-gray-100'] hr[class~='nextra-border'] {
  border-color: var(--hairline);
}

footer {
  background: #ffffff;
  border-top: 0;
  color: var(--faint);
  font-size: 14px;
  padding-top: 20px !important;
  padding-bottom: 20px !important;
}