/* FalconX API docs — shared theme.
 *
 * Single source of truth for the 360 design tokens and the docs chrome
 * (header + product nav). Loaded by every docs page: Spot, DMA, Credit, EMS.
 *
 * Renderer-specific overrides live alongside this file:
 *   fx-docs-slate.css  — remaps the pre-rendered Slate CSS (Spot only)
 * Scalar pages get their variables from fx-docs-scalar.js instead, because
 * Scalar renders into a shadow-ish scope and needs them passed via customCss.
 */

/* ── 360 design tokens (from tailwind.config.js) ── */
:root {
  --fx-page-bg:      #111827;
  --fx-dark-bg:      #040A17;
  --fx-surface:      #121826;
  --fx-active:       #178FE6;
  --fx-border:       #3C4257;
  --fx-muted:        #A5ACB8;
  --fx-text:         #FAFDFF;

  --fx-green:        #17A35D;
  --fx-red:          #F05C52;
  --fx-yellow:       #E2B938;
  --fx-blue:         #0F93FF;

  --fx-font:         "Roboto", -apple-system, Helvetica, sans-serif;
  --fx-font-code:    "Fira Mono", Consolas, monospace;

  --fx-header-h:     48px;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--fx-page-bg);
  font-family: var(--fx-font);
}

/* ── Docs header ──
 * Fixed so it survives the Slate page's own fixed sidebar. Pages that need
 * flow-layout content below it get padding-top from .fx-docs-body.
 */
.fx-docs-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 100;
  height: var(--fx-header-h);
  padding: 0 20px;
  background: var(--fx-dark-bg);
  border-bottom: 1px solid var(--fx-border);
}

.fx-docs-body { padding-top: var(--fx-header-h); }

.fx-docs-header__brand {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-shrink: 0;
  text-decoration: none;
}

.fx-docs-header__brand img {
  height: 14px;
  width: auto;
}

.fx-docs-header__brand span {
  font-family: var(--fx-font);
  font-size: 16px;
  font-weight: 400;
  letter-spacing: 0.3px;
  color: var(--fx-text);
  white-space: nowrap;
}

/* ── Nav groups ── */
.fx-docs-nav {
  display: flex;
  align-items: center;
  gap: 16px;
  flex: 1 1 auto;  /* fills the header so search isn't stranded in the corner */
  min-width: 0;
}

/* Overview + the product tabs, as one group. Stays in the header at every
 * viewport width — see the @media (max-width: 860px) rule below for how
 * narrow viewports are handled instead of relocating this into a sidebar. */
.fx-docs-tabgroup {
  display: flex;
  align-items: center;
  gap: 14px;
}

/* Overview is not a product, so it is a plain menu-line link rather than a
 * pill in the product row — keeps the row scoped to actual products
 * regardless of what else the nav grows to include. A left rule instead of
 * a pill border reads as "separate from the product switcher" at a glance. */
.fx-docs-overview-link {
  display: inline-block;
  font-family: var(--fx-font);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  white-space: nowrap;
  padding-right: 14px;
  border-right: 1px solid var(--fx-border);
  color: var(--fx-muted);
  text-decoration: none;
}

.fx-docs-overview-link:hover,
.fx-docs-overview-link:focus {
  color: var(--fx-text);
  outline: none;
}

.fx-docs-overview-link.active {
  color: var(--fx-active);
}

.fx-docs-tabs {
  display: flex;
  gap: 4px;
}

/* Both <a> (product switch) and <button> (in-page version switch) render
 * identically — the only difference is what handles the activation. */
.fx-docs-tab {
  display: inline-block;
  font-family: var(--fx-font);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  white-space: nowrap;
  padding: 3px 10px;
  border: 1px solid var(--fx-border);
  border-radius: 3px;
  background: transparent;
  color: var(--fx-muted);
  text-decoration: none;
  cursor: pointer;
}

.fx-docs-tab:hover,
.fx-docs-tab:focus {
  color: var(--fx-text);
  border-color: var(--fx-text);
  outline: none;
}

.fx-docs-tab.active {
  background: var(--fx-active);
  border-color: var(--fx-active);
  color: #fff;
}

/* Version sub-tabs sit visually subordinate to the product tabs. */
.fx-docs-tabs--sub {
  padding-left: 16px;
  border-left: 1px solid var(--fx-border);
}

.fx-docs-tabs--sub .fx-docs-tab {
  font-size: 10px;
  padding: 2px 8px;
}

/* ── Scalar panes (DMA / Credit version switching) ── */
.fx-scalar-pane { display: none; }
.fx-scalar-pane.active { display: block; }

/* ── /docs landing page ──────────────────────────────────────────────────
 * One card per product (docs_index.html). No Scalar on this page, so these
 * are plain rules against the tokens rather than overrides.
 */
.fx-docs-landing {
  max-width: 1060px;
  margin: 0 auto;
  padding: 56px 24px 80px;
  color: var(--fx-text);
}

.fx-docs-landing__title {
  margin: 0 0 12px;
  font-size: 32px;
  font-weight: 600;
  letter-spacing: -0.2px;
}

.fx-docs-landing__lead {
  max-width: 40rem;
  margin: 0 0 40px;
  font-size: 15px;
  line-height: 1.7;
  color: var(--fx-muted);
}

.fx-docs-landing__lead code {
  padding: 1px 5px;
  border: 1px solid var(--fx-border);
  border-radius: 4px;
  background: rgba(255, 255, 255, 0.06);
  font-family: var(--fx-font-code);
  font-size: 0.86em;
  color: var(--fx-text);
}

/* auto-fit rather than a fixed three: the cards stay readable at any width,
 * and a fourth product later needs no breakpoint work. */
.fx-docs-cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 20px;
}

.fx-docs-card {
  display: flex;
  flex-direction: column;
  padding: 24px;
  background: var(--fx-surface);
  border: 1px solid var(--fx-border);
  border-radius: 10px;
  color: inherit;
  text-decoration: none;
  transition: border-color 0.15s, transform 0.15s;
}

.fx-docs-card:hover,
.fx-docs-card:focus-visible {
  border-color: var(--fx-active);
  transform: translateY(-2px);
  outline: none;
}

.fx-docs-card__title {
  margin: 0 0 10px;
  font-size: 19px;
  font-weight: 600;
}

.fx-docs-card__body {
  margin: 0 0 18px;
  font-size: 14px;
  line-height: 1.65;
  color: var(--fx-muted);
}

/* Section names, as chips. margin-top:auto pins the chips and the footer to
 * the bottom so cards with shorter copy still line up. */
.fx-docs-card__meta {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: auto 0 16px;
  padding: 0;
  list-style: none;
}

.fx-docs-card__meta li {
  padding: 2px 8px;
  border: 1px solid var(--fx-border);
  border-radius: 3px;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  color: var(--fx-muted);
}

.fx-docs-card__cta {
  padding-top: 14px;
  border-top: 1px solid var(--fx-border);
  font-size: 12px;
  color: var(--fx-active);
}

.fx-docs-card__cta::after {
  content: " →";
}

.fx-docs-landing__foot {
  max-width: 40rem;
  margin: 40px 0 0;
  font-size: 13px;
  line-height: 1.7;
  color: var(--fx-muted);
}

.fx-docs-landing__foot a { color: var(--fx-active); }

/* ── Scalar chrome we don't want ─────────────────────────────────────────
 * Config flags in fx-docs-scalar.js remove most of it (client button, test
 * request, download, dev tools, Ask AI). These have no flag:
 *
 *   .scalar-reference-intro-clients  the "Client Libraries" panel — a code
 *     generator for a request runner these read-only pages don't have. Its
 *     card is the only occupant of the introduction's right-hand column, so
 *     hiding it is what frees that space up (see the measure rules below).
 *   .scalar-mcp-layer  "Generate MCP", which links out to scalar.com.
 *   the sidebar footer's "Powered by Scalar" link — targeted by its href
 *     rather than a generated Tailwind class, since those are unstable
 *     across bundle versions. The href itself changes too (1.72 dropped
 *     `www.` and added utm params), so match on the host, not the full URL.
 */
.scalar-app .scalar-reference-intro-clients,
.scalar-app .introduction-section .sticky-cards,
.scalar-app .scalar-mcp-layer,
.scalar-app a[href^="https://www.scalar.com"],
.scalar-app a[href^="https://scalar.com"] {
  display: none !important;
}

/* ── Introduction measure ──
 * Scalar splits every section into two columns: prose on the left, cards on
 * the right. With the intro's only card hidden the split just strands the
 * prose at ~48% of the container, so collapse it here (operation sections
 * keep theirs — that's where request/response examples live) and cap the
 * line length at a readable measure instead of the full 1032px.
 */
.scalar-app .introduction-section .section-columns {
  display: block;
}

.scalar-app .introduction-section .section-column {
  max-width: 52rem;
}

/* ── Rendered markdown ───────────────────────────────────────────────────
 * .markdown wraps every description Scalar renders from the spec: the
 * introduction (info.description), each sidebar section (tag description),
 * and individual operations. Scalar ships almost no typography for it, which
 * is why the content reads as bare — headings, code and tables all arrive at
 * roughly the same weight. Establish a scale and vertical rhythm.
 *
 * Selectors carry a redundant `body` prefix on purpose. Scalar's bundle
 * styles this content with the *identical* `.scalar-app .markdown h2` shape
 * and injects it as a runtime <style>, so matching its specificity loses on
 * order every time — the extra element bumps us one level above it without
 * resorting to !important on two dozen declarations.
 */
/* Scalar drives its own markdown rules from these, so setting them is
 * preferable to overriding the rules that read them. Defaults are
 * line-height 1.625, heading 1.15, md 16px, sm 12px. */
body .scalar-app .markdown {
  --markdown-line-height: 1.7;
  --markdown-heading-line-height: 1.3;
  --markdown-spacing-md: 16px;
  --markdown-spacing-sm: 12px;
  font-family: var(--fx-font);
  font-size: 14px;
}

/* Scalar does not render a description as one block: it splits the markdown
 * at every heading, so a four-heading introduction arrives as seven sibling
 * .introduction-description-heading wrappers, each holding its own .markdown
 * — and each heading is the *only* child of its block. Two consequences:
 *
 *   - `.markdown > :first-child { margin-top: 0 }` and `h2:first-child`
 *     resets are traps here. Every heading matches both, so the obvious way
 *     to suppress a leading gap silently flattens the whole document.
 *   - spacing between sections belongs on the wrappers, not on the headings,
 *     because margins on the block's only child have nothing to collapse
 *     against.
 */
body .scalar-app .introduction-description-heading + .introduction-description-heading {
  margin-top: 4px;
}

body .scalar-app .markdown p,
body .scalar-app .markdown ul,
body .scalar-app .markdown ol {
  margin: 0 0 14px;
}

body .scalar-app .markdown h1,
body .scalar-app .markdown h2,
body .scalar-app .markdown h3,
body .scalar-app .markdown h4 {
  font-family: var(--fx-font);
  color: var(--fx-text);
  font-weight: 600;
  line-height: 1.3;
}

body .scalar-app .markdown h1 { font-size: 28px; margin: 0 0 16px; }

/* A rule above each h2 separates the intro's sections ("How this
 * documentation is organised", "Conventions") without needing an <hr>. */
body .scalar-app .markdown h2 {
  font-size: 19px;
  margin: 32px 0 12px;
  padding-top: 24px;
  border-top: 1px solid var(--fx-border);
}

/* The first block of a description carries no divider — there is nothing
 * above it to divide from. Scoped to the block wrapper rather than to
 * `h2:first-child`, which every heading matches (see above). */
body .scalar-app .introduction-description-heading:first-child .markdown h2 {
  margin-top: 0;
  padding-top: 0;
  border-top: 0;
}

body .scalar-app .markdown h3 { font-size: 15px; margin: 24px 0 8px; }
body .scalar-app .markdown h4 { font-size: 14px; margin: 20px 0 6px; }

body .scalar-app .markdown strong {
  font-weight: 600;
  color: var(--fx-text);
}

body .scalar-app .markdown a {
  color: var(--fx-active);
  text-decoration: underline;
  text-underline-offset: 2px;
}

body .scalar-app .markdown a:hover { text-decoration-thickness: 2px; }

body .scalar-app .markdown ul,
body .scalar-app .markdown ol { padding-left: 20px; }
body .scalar-app .markdown li { margin: 4px 0; }

/* Inline code — distinguishable from prose without shouting. The pre rules
 * below undo this for code inside a block.
 *
 * Scalar outlines code with `box-shadow: 0 0 0 1px` rather than a border, so
 * that has to be cleared explicitly in both places: left alone it doubles up
 * with the border here, and survives `border: 0` on block code below. */
body .scalar-app .markdown code {
  font-family: var(--fx-font-code);
  font-size: 0.88em;
  padding: 1px 5px;
  border: 1px solid var(--fx-border);
  border-radius: 4px;
  box-shadow: none;
  background: rgba(255, 255, 255, 0.06);
  color: var(--fx-text);
  white-space: nowrap;
}

body .scalar-app .markdown pre {
  margin: 0 0 16px;
  padding: 14px 16px;
  background: var(--fx-dark-bg);
  border: 1px solid var(--fx-border);
  border-radius: 8px;
  overflow-x: auto;
}

body .scalar-app .markdown pre code {
  padding: 0;
  border: 0;
  box-shadow: none;
  background: none;
  border-radius: 0;
  font-size: 13px;
  line-height: 1.6;
  white-space: pre;
  color: var(--fx-text);
}

body .scalar-app .markdown table {
  width: 100%;
  max-width: 100%;
  margin: 0 0 18px;
  border: 1px solid var(--fx-border);
  border-collapse: collapse;
  font-size: 13.5px;
}

body .scalar-app .markdown th {
  padding: 8px 12px;
  background: var(--fx-surface);
  border-bottom: 1px solid var(--fx-border);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  text-align: left;
  color: var(--fx-muted);
  overflow-wrap: anywhere;
}

body .scalar-app .markdown td {
  padding: 9px 12px;
  border-top: 1px solid var(--fx-border);
  vertical-align: top;
  overflow-wrap: anywhere;
}

/* Inline code is nowrap by design (for prose), but that's exactly what let
 * a long code span — `GET /v1/get_30_day_trailing_volume`,
 * `IDEMPOTENCY_REQUEST_IN_PROGRESS` — push its whole column, and the table
 * with it, wider than the page: a table has no scroll wrapper of its own
 * the way `pre` blocks do. Letting code wrap inside a cell (same as
 * ordinary text, via overflow-wrap above) fixes the overflow while leaving
 * column widths content-driven, so a short column like "HTTP status"
 * still only takes the room its own content needs. */
body .scalar-app .markdown table code {
  white-space: normal;
  word-break: break-word;
}

body .scalar-app .markdown blockquote {
  margin: 0 0 16px;
  padding: 2px 0 2px 14px;
  border-left: 2px solid var(--fx-active);
  color: var(--fx-muted);
}

body .scalar-app .markdown hr {
  margin: 32px 0;
  border: 0;
  border-top: 1px solid var(--fx-border);
}

/* ── Code samples beside the prose ───────────────────────────────────────
 * Description-only tags with code (WebSocket Prices, WebSocket Orders, FIX
 * API) get the operation layout: prose left, code right. codeColumns() in
 * fx-docs-scalar.js tags the section .fx-md-cols and splits its markdown
 * into .fx-md-row > .fx-md-prose + .fx-md-code; the columns are set here.
 *
 * Scalar's left column is only half the section, with an empty right column
 * beside it, so the markdown takes the whole width and each row splits it
 * again. Same 48px gutter as Scalar's own .section-columns.
 */
body .scalar-app .fx-md-cols .section-columns:has(> .section-column > .markdown:not([class*="line-clamp"])) > .section-column:first-child {
  flex: 1 1 100%;
}

body .scalar-app .fx-md-cols .section-columns:has(> .section-column > .markdown:not([class*="line-clamp"])) > .section-column:empty {
  display: none;
}

body .scalar-app .fx-md-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  column-gap: 48px;
  align-items: start;
}

/* The h2 divider (see the markdown rules above) belongs to the row, so it
 * runs under the code column too instead of stopping at the prose. */
body .scalar-app .fx-md-row--h2 {
  margin-top: 32px;
  padding-top: 24px;
  border-top: 1px solid var(--fx-border);
}

body .scalar-app .fx-md-row--h2:first-child {
  margin-top: 0;
  padding-top: 0;
  border-top: 0;
}

body .scalar-app .fx-md-row--h2 .fx-md-prose > h2:first-child {
  margin-top: 0;
  padding-top: 0;
  border-top: 0;
}

/* Rows have no prose column of their own when code opens the description,
 * or two code blocks follow each other across a heading — keep the code on
 * the right regardless. */
body .scalar-app .fx-md-code {
  grid-column: 2;
  min-width: 0;
  position: sticky;
  top: 24px;
}

/* Both columns start flush so a code block lines up with its heading. */
body .scalar-app .fx-md-prose > :first-child,
body .scalar-app .fx-md-code > :first-child { margin-top: 0; }

/* Captions moved across with their code read as its title. */
body .scalar-app .fx-md-code > p,
body .scalar-app .fx-md-code > blockquote {
  margin: 0 0 8px;
  font-size: 12px;
  color: var(--fx-muted);
}

body .scalar-app .fx-md-code > blockquote {
  padding: 0;
  border-left: 0;
}

body .scalar-app .fx-md-code > blockquote p { margin: 0; }

/* Until a tag is opened Scalar shows its description as a few clamped lines
 * (-webkit-line-clamp on the .markdown). The clamp only counts lines of the
 * box's own children, so grid rows would defeat it and render the collapsed
 * preview at full length — which also made the paging pre-warm walk a
 * document three times taller. Flatten the rows, and leave Scalar's
 * half-width column alone, while clamped; the flat rows keep the original
 * element order, so the preview reads as before. Keyed on Scalar's own
 * clamp class rather than a marker of ours: Vue rewrites `class` whenever it
 * toggles the clamp, which would drop anything we added. */
body .scalar-app .markdown[class*="line-clamp"] .fx-md-row,
body .scalar-app .markdown[class*="line-clamp"] .fx-md-prose,
body .scalar-app .markdown[class*="line-clamp"] .fx-md-code {
  display: contents;
}

/* Below Scalar's own breakpoint operations stack to one column; so do these,
 * back to the order they were written in. */
@container narrow-references-container (width <= 900px) {
  body .scalar-app .fx-md-row { display: block; }
  body .scalar-app .fx-md-code { position: static; }
}

/* ── Narrow screens: drop the wordmark, let tabs wrap into a scroller ── */
@media (max-width: 860px) {
  .fx-docs-header__brand span { display: none; }
  .fx-docs-nav {
    overflow-x: auto;
    scrollbar-width: none;
  }
  .fx-docs-nav::-webkit-scrollbar { display: none; }
}

/* ── Description headings in the sidebar ─────────────────────────────────
 * Sub-items fx-docs-scalar.js (headingNav) adds under a description-only
 * tag, so WebSocket Prices lists "Creating a connection", "Send
 * Authentication message", … the way an endpoint tag lists its operations.
 * Sized and indented to sit one level below Scalar's own items.
 */
/* Their targets: keep a heading clear of the fixed header when a sub-item
 * scrolls it into view. */
body .scalar-app .markdown h2,
body .scalar-app .markdown h3,
body .scalar-app .markdown h4 {
  scroll-margin-top: calc(var(--fx-header-h) + 16px);
}

.scalar-app .fx-heading-nav {
  list-style: none;
  margin: 2px 0 4px;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 1px;
}

/* display:flex above would otherwise beat the [hidden] attribute the
 * expand/collapse toggle sets. */
.scalar-app .fx-heading-nav[hidden] {
  display: none;
}

/* Keep the tag's label clear of the chevron, as Scalar's spacer does on
 * operation groups. */
.scalar-app li:has(> .fx-heading-toggle) > a {
  padding-right: 28px;
}

.scalar-app .fx-heading-nav button {
  display: block;
  width: 100%;
  padding: 6px 8px 6px 24px;
  border: 0;
  border-radius: 4px;
  background: none;
  color: var(--fx-muted);
  font: 400 14px/1.3 var(--fx-font);
  text-align: left;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  cursor: pointer;
}

.scalar-app .fx-heading-nav button:hover {
  background: rgba(23, 143, 230, .1);
  color: var(--fx-text);
}

.scalar-app .fx-heading-nav button.active {
  color: var(--fx-text);
}

/* ── Sidebar group labels ────────────────────────────────────────────────
 * The x-tagGroups headings (Overview, REST API, WebSocket & FIX,
 * Reference). Scalar renders them in the same muted grey as the
 * items beneath them; style them like the 360 app's nav section labels
 * instead — uppercase, brand blue — with a rule above each group after
 * the first so the groups read as separate blocks.
 */
.scalar-app .group\/sidebar-section > .group\/button {
  color: var(--fx-active);
  font-size: 12px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: .08em;
}

.scalar-app .group\/sidebar-section ~ .group\/sidebar-section > .group\/button {
  margin-top: 8px;
  padding-top: 16px;
  border-top: 1px solid var(--fx-border);
  border-radius: 0;
}