/* Miso brand overrides for Scalar Docs — indigo #3148be → violet #7957d5.
   Scalar defines its accent on .light-mode/.dark-mode (loaded after this file),
   so we override the same custom properties with high specificity + !important. */

:root,
.light-mode,
.dark-mode,
.scalar-app,
.scalar-api-reference {
  --scalar-color-accent: #3148be !important;
  --default-theme-color-accent: #3148be !important;
  --scalar-background-accent: #eef0fb !important;
  --default-theme-background-accent: #eef0fb !important;
  --scalar-sidebar-color-active: #3148be !important;
  --scalar-link-color: #3148be !important;
}

.dark-mode,
.dark-mode .scalar-app,
.dark-mode.scalar-api-reference {
  --scalar-color-accent: #8b96f5 !important;
  --default-theme-color-accent: #8b96f5 !important;
  --scalar-background-accent: #1a1d2e !important;
  --default-theme-background-accent: #1a1d2e !important;
  --scalar-sidebar-color-active: #8b96f5 !important;
  --scalar-link-color: #8b96f5 !important;
}

/* fonts */
:root {
  --scalar-font: "IBM Plex Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif !important;
  --scalar-font-code: "JetBrains Mono", ui-monospace, monospace !important;
}

/* ---------------------------------------------------------------------------
   Code blocks.
   Scalar pins the language/copy control at `position:absolute; top:6px;
   right:6px` with the SAME background as the code itself. A long line (a curl
   command, a signed URL) scrolls straight underneath it and reads as mangled
   text. We reserve a header band at the top of every block so the control has
   its own space and code can never collide with it.
   --------------------------------------------------------------------------- */
.t-editor__code-container {
  border: var(--scalar-border, 1px solid var(--scalar-border-color));
  border-radius: var(--scalar-radius);
  overflow: hidden;
}

/* The header band: code starts below the control, never under it. */
.t-editor__code-container > pre.t-editor__code {
  padding-top: 2.6rem;
}

/* Inside a code group the control already lives in the tab bar above the code,
   so the band would only add dead space. */
.t-editor__code-group .t-editor__code-container > pre.t-editor__code {
  padding-top: 0.9rem;
}
.t-editor__code-group .t-editor__code-container {
  border: 0;
}

/* Give the control a solid surface + a soft edge, so any text scrolling
   beneath it fades out instead of colliding. */
.t-editor__code-container .language-button {
  background-color: var(--scalar-background-2);
  box-shadow: -10px 0 10px -6px var(--scalar-background-2);
  z-index: 2;
}

/* Show the fence title in that band. Scalar parses ```lang My title into
   data-title but ships no rule to display it outside a code group, so the
   label would otherwise be invisible. Groups render their titles as tab
   labels already — exclude them. */
.t-editor__code-container[data-title]:not([data-title=""])::before {
  content: attr(data-title);
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  z-index: 1;
  padding: 0.55rem 0.85rem;
  font-family: var(--scalar-font);
  font-size: var(--scalar-small);
  font-weight: 500;
  color: var(--scalar-color-2);
  background-color: var(--scalar-background-2);
  border-bottom: var(--scalar-border, 1px solid var(--scalar-border-color));
  pointer-events: none;
}

.t-editor__code-group .t-editor__code-container[data-title]::before {
  content: none;
}

/* Line numbers: mute them so they never compete with the code. */
.t-editor__code-container .t-code__line[data-line-number]::before {
  color: var(--scalar-color-3);
  opacity: 0.55;
}

/* Mermaid: equal-width cards.
   SVG geometry properties (width/x) are settable from CSS, so a node that
   carries the `outbox` classDef gets a fixed width instead of one sized to
   its label. x is re-centred by hand, because mermaid writes it inline. */
svg[id^="mermaid"] g.node.outbox rect {
  width: 170px;
  x: -85px;
}

/* Mermaid: the insight cards share the product-card width. */
svg[id^="mermaid"] g.node.insight rect {
  width: 170px;
  x: -85px;
}

/* Mermaid: the source cards match the product-card width. */
svg[id^="mermaid"] g.node.src rect {
  width: 170px;
  x: -85px;
}

/* Mermaid: history diagram cards share the standard width. */
svg[id^="mermaid"] g.node.endpoint rect,
svg[id^="mermaid"] g.node.question rect {
  width: 200px;
  x: -100px;
}