/* Nofron colours and fonts for the Scalar API reference. Colour values come from the
   app's theme (DESIGN.md §2). Scalar puts its own theme in `@layer scalar-theme`, and
   unlayered rules like these always win over layered ones, whatever the order. Scalar
   switches between `.light-mode` and `.dark-mode` on <body>. */

:root {
  --scalar-custom-header-height: 52px;
  --scalar-font: 'Inter Variable', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto,
    'Helvetica Neue', Arial, sans-serif;
  --scalar-font-code: 'JetBrains Mono Variable', ui-monospace, SFMono-Regular, Menlo, Monaco,
    Consolas, monospace;
  --scalar-radius: 6px;
  --scalar-radius-lg: 8px;
  --scalar-radius-xl: 12px;
}

.light-mode {
  --nf-primary: oklch(0.488 0.243 264.376);
  --nf-canvas: oklch(0.9842 0.0034 247.8575);
  --nf-muted: oklch(0.967 0.0029 264.5419);
  --nf-border: oklch(0.9 0.008 258);

  --scalar-background-1: oklch(1 0 0);
  --scalar-background-2: var(--nf-canvas);
  --scalar-background-3: var(--nf-muted);
  --scalar-background-accent: color-mix(in oklab, var(--nf-primary) 8%, transparent);
  --scalar-color-1: oklch(0.2795 0.0368 260.031);
  --scalar-color-2: oklch(0.551 0.0234 264.3637);
  --scalar-color-3: oklch(0.64 0.02 264);
  --scalar-color-accent: var(--nf-primary);
  --scalar-border-color: var(--nf-border);
  --scalar-link-color: var(--nf-primary);
  --scalar-link-color-hover: color-mix(in oklab, var(--nf-primary) 80%, black);
  --scalar-button-1: var(--nf-primary);
  --scalar-button-1-color: oklch(1 0 0);
  --scalar-button-1-hover: color-mix(in oklab, var(--nf-primary) 90%, black);

  --scalar-sidebar-background-1: var(--nf-canvas);
  --scalar-sidebar-color-1: oklch(0.2795 0.0368 260.031);
  --scalar-sidebar-color-2: oklch(0.551 0.0234 264.3637);
  --scalar-sidebar-color-active: var(--nf-primary);
  --scalar-sidebar-item-hover-color: oklch(0.2795 0.0368 260.031);
  --scalar-sidebar-item-hover-background: var(--nf-muted);
  --scalar-sidebar-item-active-background: color-mix(in oklab, var(--nf-primary) 10%, transparent);
  --scalar-sidebar-border-color: var(--nf-border);
  --scalar-sidebar-search-background: oklch(1 0 0);
  --scalar-sidebar-search-border-color: var(--nf-border);
  --scalar-sidebar-search-color: oklch(0.551 0.0234 264.3637);
}

.dark-mode {
  /* The app's dark primary is too deep to read as link text on this background; this is
     its lighter chart blue. */
  --nf-primary: oklch(0.68 0.18 263.02);
  --nf-canvas: oklch(0.2077 0.0398 265.7549);
  --nf-muted: oklch(0.2427 0.0381 259.9437);
  --nf-card: oklch(0.2795 0.0368 260.031);
  --nf-border: oklch(0.34 0.03 259);

  --scalar-background-1: var(--nf-canvas);
  --scalar-background-2: var(--nf-muted);
  --scalar-background-3: var(--nf-card);
  --scalar-background-accent: color-mix(in oklab, var(--nf-primary) 14%, transparent);
  --scalar-color-1: oklch(0.9288 0.0126 255.5078);
  --scalar-color-2: oklch(0.76 0.0192 261.3246);
  --scalar-color-3: oklch(0.66 0.02 261);
  --scalar-color-accent: var(--nf-primary);
  --scalar-border-color: var(--nf-border);
  --scalar-link-color: var(--nf-primary);
  --scalar-link-color-hover: color-mix(in oklab, var(--nf-primary) 80%, white);
  --scalar-button-1: oklch(0.546 0.245 262.881);
  --scalar-button-1-color: oklch(1 0 0);
  --scalar-button-1-hover: color-mix(in oklab, oklch(0.546 0.245 262.881) 90%, white);

  --scalar-sidebar-background-1: var(--nf-canvas);
  --scalar-sidebar-color-1: oklch(0.9288 0.0126 255.5078);
  --scalar-sidebar-color-2: oklch(0.76 0.0192 261.3246);
  --scalar-sidebar-color-active: var(--nf-primary);
  --scalar-sidebar-item-hover-color: oklch(0.9288 0.0126 255.5078);
  --scalar-sidebar-item-hover-background: var(--nf-muted);
  --scalar-sidebar-item-active-background: color-mix(in oklab, var(--nf-primary) 16%, transparent);
  --scalar-sidebar-border-color: var(--nf-border);
  --scalar-sidebar-search-background: var(--nf-muted);
  --scalar-sidebar-search-border-color: var(--nf-border);
  --scalar-sidebar-search-color: oklch(0.76 0.0192 261.3246);
}

body {
  margin: 0;
  background: var(--scalar-background-1);
}

/* The introduction and the top of the Webhooks, Events and Credits groups hold guide
   text with tables and code. Scalar splits those sections 50/50 with a small box on the
   right (the server, or the group's list of endpoints), which squeezes the tables and
   code; give the text two thirds instead. Scalar class names, so check this after a
   Scalar upgrade. */
@media (min-width: 1000px) {
  .introduction-section .section-columns > .section-column:first-child,
  .tag-section-container .section-columns > .section-column:first-child {
    flex: 2 1 0%;
  }
}

/* The space above the page title. On wide screens Scalar pads every section 90px top and
   bottom, which left a gap under our header twice as tall as any other on the page. Use
   48px, Scalar's own value on narrow screens and the gap it keeps inside a section. Only
   the top of the introduction: the sections below keep their spacing. */
.scalar-app .section.introduction-section {
  padding-top: 48px;
}

/* Every code box (the generated requests, the response examples, the guide's samples):
   wrap a long line, even inside a URL or a secret, instead of scrolling it sideways. The
   scrollbar only shows on hover, so on a laptop the end of a line such as
   `--header 'Authorization: Bearer …'` simply looked cut off. Scalar's utility classes
   are written `.scalar-app .whitespace-pre`, so these start the same way. */
.scalar-app pre,
.scalar-app pre * {
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

.scalar-app pre {
  width: auto;
}

/* The group's list of endpoints, now in the narrower right column: wrap a long path
   (`/webhooks/{id}/rotate-secret`) instead of cutting it off. Scalar's own rules here are
   unlayered component styles (`.endpoint[data-v-…]`), so these need to be more specific. */
.endpoints-card .endpoint.endpoint {
  white-space: normal;
}

.endpoints-card .endpoint .endpoint-path {
  min-width: 0;
  overflow-wrap: anywhere;
}

/* These are generated HTTP snippets, not Nofron SDKs. Keep the language selectors
   beside each request and hide the misleading introductory "Client Libraries" card. */
.scalar-app .introduction-section .scalar-reference-intro-clients {
  display: none;
}

/* The foot of the sidebar: Scalar's row ("Powered by Scalar" and its light/dark switch) is
   hidden, and init.js puts our two links there (.nf-sidebar-links) instead. The switch
   stays in the page, hidden: the header's button presses it. The MIT licence does not
   ask for the "Powered by" link, and Scalar has no setting for it. */
.scalar-app .darklight-reference > :not(.nf-sidebar-links) {
  display: none;
}

.nf-sidebar-links {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding-top: 12px;
  border-top: 1px solid var(--scalar-sidebar-border-color);
  font-size: 13px;
}

.nf-sidebar-links a {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--scalar-sidebar-color-2);
  text-decoration: none;
  white-space: nowrap;
}

.nf-sidebar-links a:hover,
.nf-sidebar-links a:focus-visible {
  color: var(--scalar-sidebar-color-1);
}

.nf-sidebar-links svg {
  width: 14px;
  height: 14px;
  flex-shrink: 0;
}

.nf-visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

/* In a table, a field name or error code is read whole: wrap at spaces only, never
   inside `description` or `REGISTRATION_IN_PROGRESS`. */
.markdown table code {
  word-break: normal;
  overflow-wrap: normal;
}

/* Column headings stay on one line ("HTTP", "Meaning and next step"). Scalar lays these
   tables out with fixed column widths and lets words break anywhere, which cut "HTTP"
   into "HTT" / "P" in a narrow first column; size the columns by their content instead.
   Scalar's own rules are `.scalar-app …`, so these are too. */
.scalar-app .markdown table {
  table-layout: auto;
}

.scalar-app .markdown table th {
  white-space: nowrap;
  word-break: normal;
  overflow-wrap: normal;
}

/* Our header above Scalar. Scalar leaves room for it through
   --scalar-custom-header-height. */
.nf-header {
  position: sticky;
  top: 0;
  z-index: 100;
  box-sizing: border-box;
  height: var(--scalar-custom-header-height);
  padding: 0 20px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  background: var(--scalar-background-1);
  border-bottom: 1px solid var(--scalar-border-color);
  font-family: var(--scalar-font);
}

.nf-brand {
  display: flex;
  align-items: center;
  gap: 10px;
  color: var(--scalar-color-1);
  text-decoration: none;
  min-width: 0;
}

/* The app's sidebar wordmark, the dark copy in dark mode (Scalar marks <body>). */
.nf-wordmark {
  display: block;
  height: 30px;
  width: auto;
}

.nf-wordmark-dark,
.dark-mode .nf-wordmark-light {
  display: none;
}

.dark-mode .nf-wordmark-dark {
  display: block;
}

.nf-product {
  padding-left: 10px;
  border-left: 1px solid var(--scalar-border-color);
  font-size: 14px;
  color: var(--scalar-color-2);
  white-space: nowrap;
}

/* The right end of the header: the language switch, then the light/dark button. */
.nf-header-actions {
  display: flex;
  align-items: center;
  gap: 8px;
}

/* EN / ES: two small segments; the current language is filled. */
.nf-language {
  display: flex;
  height: 32px;
  box-sizing: border-box;
  padding: 2px;
  border: 1px solid var(--scalar-border-color);
  border-radius: var(--scalar-radius-lg);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.04em;
}

.nf-language a {
  display: flex;
  align-items: center;
  padding: 0 8px;
  border-radius: var(--scalar-radius);
  color: var(--scalar-color-2);
  text-decoration: none;
}

.nf-language a:hover,
.nf-language a:focus-visible {
  color: var(--scalar-color-1);
}

.nf-language a[aria-current="page"] {
  background: var(--scalar-background-3);
  color: var(--scalar-color-1);
}

/* The light/dark switch, top right (init.js). */
.nf-theme-toggle {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  padding: 8px;
  border: 1px solid var(--scalar-border-color);
  border-radius: var(--scalar-radius-lg);
  background: var(--scalar-background-1);
  color: var(--scalar-color-2);
  cursor: pointer;
}

.nf-theme-toggle[hidden] {
  display: none;
}

.nf-theme-toggle:hover,
.nf-theme-toggle:focus-visible {
  color: var(--scalar-color-1);
  background: var(--scalar-background-2);
}

.nf-theme-toggle svg {
  width: 100%;
  height: 100%;
}

@media (max-width: 480px) {
  .nf-header {
    padding: 0 16px;
  }
}

/* Copy buttons. Scalar's own, on the request and response samples, show only while the
   pointer is over the box; show them all the time so a reader sees they can copy.
   init.js adds the same button (.nf-copy) to the guide's code boxes, which have none.
   Scalar's `.scalar-app .opacity-0` is as specific as a plain rule and loads later, so
   this one names the class twice. */
.scalar-app .scalar-code-copy.scalar-code-copy {
  opacity: 1;
}

/* The grey box is the <code> inside the <pre>, so the button sits over the box's corner
   and the room kept free for it is inside the box. */
.scalar-app .markdown pre.nf-copyable {
  position: relative;
}

.scalar-app .markdown pre.nf-copyable > code {
  padding-right: 44px;
}

.nf-copy {
  position: absolute;
  top: 8px;
  right: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  padding: 5px;
  border: 1px solid var(--scalar-border-color);
  border-radius: var(--scalar-radius);
  background: var(--scalar-background-1);
  color: var(--scalar-color-2);
  cursor: pointer;
}

.nf-copy:hover,
.nf-copy:focus-visible {
  color: var(--scalar-color-1);
}

.nf-copy svg {
  width: 100%;
  height: 100%;
}

/* Language tabs over the guide's samples (init.js groups a row of code blocks, one per
   language, into one .nf-code-tabs box). */
.nf-code-tabs {
  margin: 12px 0;
}

.nf-code-tabs-bar {
  display: flex;
  flex-wrap: wrap;
  gap: 2px;
  border-bottom: 1px solid var(--scalar-border-color);
  margin-bottom: 8px;
}

.nf-code-tabs-bar [role="tab"] {
  padding: 6px 10px;
  margin-bottom: -1px;
  border: 0;
  border-bottom: 2px solid transparent;
  background: none;
  font: inherit;
  font-size: 13px;
  color: var(--scalar-color-2);
  cursor: pointer;
}

.nf-code-tabs-bar [role="tab"]:hover {
  color: var(--scalar-color-1);
}

.nf-code-tabs-bar [role="tab"][aria-selected="true"] {
  color: var(--scalar-color-1);
  font-weight: 600;
  border-bottom-color: var(--scalar-color-accent);
}

.scalar-app .markdown .nf-code-tabs > pre {
  margin: 0;
}

.scalar-app .markdown .nf-code-tabs > pre.nf-tab-hidden {
  display: none;
}

/* Generated by build.mjs from CODE_LANGUAGES */
.scalar-app [role="listbox"]:has([role="option"][id$="-shell/curl"]) { display: flex; flex-direction: column; }
.scalar-app [role="option"][id$="-shell/curl"] { order: 0; }
.scalar-app [role="group"]:has(> [role="option"][id$="-shell/curl"]) > [id$="-label"] { display: none; }
.scalar-app [role="option"][id$="-shell/curl"] > * { display: none; }
.scalar-app [role="option"][id$="-shell/curl"]::before { content: "cURL"; }
.scalar-app [role="option"][id$="-shell/curl"][aria-selected="true"]::before { font-weight: 600; color: var(--scalar-color-accent); }
.scalar-app [role="listbox"]:has([role="option"][id$="-python/requests"]) { display: flex; flex-direction: column; }
.scalar-app [role="option"][id$="-python/requests"] { order: 1; }
.scalar-app [role="group"]:has(> [role="option"][id$="-python/requests"]) > [id$="-label"] { display: none; }
.scalar-app [role="option"][id$="-python/requests"] > * { display: none; }
.scalar-app [role="option"][id$="-python/requests"]::before { content: "Python"; }
.scalar-app [role="option"][id$="-python/requests"][aria-selected="true"]::before { font-weight: 600; color: var(--scalar-color-accent); }
.scalar-app [role="listbox"]:has([role="option"][id$="-node/fetch"]) { display: flex; flex-direction: column; }
.scalar-app [role="option"][id$="-node/fetch"] { order: 2; }
.scalar-app [role="group"]:has(> [role="option"][id$="-node/fetch"]) > [id$="-label"] { display: none; }
.scalar-app [role="option"][id$="-node/fetch"] > * { display: none; }
.scalar-app [role="option"][id$="-node/fetch"]::before { content: "Node.js"; }
.scalar-app [role="option"][id$="-node/fetch"][aria-selected="true"]::before { font-weight: 600; color: var(--scalar-color-accent); }
.scalar-app [role="listbox"]:has([role="option"][id$="-java/nethttp"]) { display: flex; flex-direction: column; }
.scalar-app [role="option"][id$="-java/nethttp"] { order: 3; }
.scalar-app [role="group"]:has(> [role="option"][id$="-java/nethttp"]) > [id$="-label"] { display: none; }
.scalar-app [role="option"][id$="-java/nethttp"] > * { display: none; }
.scalar-app [role="option"][id$="-java/nethttp"]::before { content: "Java"; }
.scalar-app [role="option"][id$="-java/nethttp"][aria-selected="true"]::before { font-weight: 600; color: var(--scalar-color-accent); }
.scalar-app [role="listbox"]:has([role="option"][id$="-csharp/httpclient"]) { display: flex; flex-direction: column; }
.scalar-app [role="option"][id$="-csharp/httpclient"] { order: 4; }
.scalar-app [role="group"]:has(> [role="option"][id$="-csharp/httpclient"]) > [id$="-label"] { display: none; }
.scalar-app [role="option"][id$="-csharp/httpclient"] > * { display: none; }
.scalar-app [role="option"][id$="-csharp/httpclient"]::before { content: "C#"; }
.scalar-app [role="option"][id$="-csharp/httpclient"][aria-selected="true"]::before { font-weight: 600; color: var(--scalar-color-accent); }