/*
 * Brellium docs theme, loaded through siteConfig.head.styles.
 *
 * Colors come from the Brellium brand: ink #2A2722 and cream #FFFBED from the
 * logo, the orange from brellium.com darkened until it passes 4.5:1 on paper.
 * Everything is set through Scalar's CSS variables where one exists; the few
 * class selectors below (.t-editor__*) fix spacing and code sizing, and the
 * site falls back to Scalar's defaults if those class names ever change.
 */

/* Layout: a wider column so an 84-character code line fits without scrolling. */
:root {
  --scalar-container-width: 744px;
  --scalar-sidebar-width: 264px;
  --scalar-toc-width: 240px;
  --scalar-heading-spacing: 48px;
  --scalar-block-spacing: 14px;
}

.light-mode {
  --scalar-background-1: #fffdf8;
  --scalar-background-2: #f7f2e6;
  --scalar-background-3: #eee7d7;
  --scalar-background-accent: #b4501a14;
  --scalar-color-1: #2a2722;
  --scalar-color-2: #655f55;
  --scalar-color-3: #8c8579;
  --scalar-color-accent: #b4501a;
  --scalar-border-color: #e4dccb;
  --scalar-button-1: #2a2722;
  --scalar-button-1-hover: #4c463e;
  --scalar-button-1-color: #fffbed;
  /* Syntax and status colors, each at 4.5:1 or better on the code background. */
  --scalar-color-green: #047857;
  --scalar-color-red: #c81e1e;
  --scalar-color-orange: #c2410c;
  --scalar-color-blue: #0067ab;
}

.dark-mode {
  --scalar-background-1: #1b1917;
  --scalar-background-2: #24211e;
  --scalar-background-3: #302c27;
  --scalar-background-accent: #f0a56a1f;
  --scalar-color-1: #f3eee2;
  --scalar-color-2: #b3ac9f;
  --scalar-color-3: #8c8579;
  --scalar-color-accent: #f0a56a;
  --scalar-border-color: #37322c;
  --scalar-button-1: #fffbed;
  --scalar-button-1-hover: #f3eee2;
  --scalar-button-1-color: #2a2722;
}

/* Type scale: the page title and section headings need more separation. */
.scalar-app h1.t-editor__heading {
  font-size: 30px;
  line-height: 1.2;
  letter-spacing: -0.02em;
}

.scalar-app h2.t-editor__heading {
  font-size: 22px;
  line-height: 1.3;
  letter-spacing: -0.012em;
}

.scalar-app h3.t-editor__heading {
  font-size: 17px;
  line-height: 1.4;
}

/* Links: ink text, accent underline, accent on hover. */
.scalar-app .t-editor__anchor {
  text-decoration-color: color-mix(
    in srgb,
    var(--scalar-color-accent) 60%,
    transparent
  );
  text-decoration-thickness: 1.5px;
  text-underline-offset: 3px;
}

.scalar-app .t-editor__anchor:hover {
  color: var(--scalar-color-accent);
  text-decoration-color: currentColor;
}

/* Code blocks: 13px so 84 characters fit, and tall enough to read a response. */
.scalar-app .t-editor__code,
.scalar-app .t-code {
  font-size: 13px;
  line-height: 1.6;
  max-height: min(70vh, 640px);
}

.scalar-app pre.t-editor__code {
  padding: 14px 16px;
}

/* Comments carry instructions in these samples, so they get body-text contrast. */
.scalar-app .hljs-comment,
.scalar-app .hljs-quote {
  color: var(--scalar-color-2);
}

/*
 * The copy button sits over the end of the first line, so it appears only
 * while the pointer or focus is on the block. Touch screens have no hover, so
 * there it stays visible.
 */
.scalar-app .t-editor__code-container .t-editor__language-picker {
  background: var(--scalar-background-2);
  border-radius: 6px;
  box-shadow: -10px 0 8px 2px var(--scalar-background-2);
  opacity: 0;
  transition: opacity 120ms ease-out;
}

.scalar-app .t-editor__code-container:hover .t-editor__language-picker,
.scalar-app .t-editor__code-container:focus-within .t-editor__language-picker {
  opacity: 1;
}

@media (hover: none) {
  .scalar-app .t-editor__code-container .t-editor__language-picker {
    opacity: 1;
  }
}

@media (prefers-reduced-motion: reduce) {
  .scalar-app .t-editor__code-container .t-editor__language-picker {
    transition: none;
  }
}

/*
 * JSON responses and command output carry long strings (error messages,
 * upload URLs) that no formatter can break. Wrapping them keeps every
 * character on screen; the copy button still copies the original text.
 */
.scalar-app .t-editor__code-container:is([data-lang="json"], [data-lang="text"])
  pre.t-editor__code,
.scalar-app
  .t-editor__code-container:is([data-lang="json"], [data-lang="text"])
  pre.t-editor__code
  * {
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

/*
 * A block's title (Response, Output, a file name) is kept as data-title but
 * not drawn, so draw it as a caption in the block's top left corner.
 */
.scalar-app .t-editor__code-container[data-title]:not([data-title=""]) {
  position: relative;
}

.scalar-app
  .t-editor__code-container[data-title]:not([data-title=""])
  pre.t-editor__code {
  padding-top: 36px;
}

.scalar-app .t-editor__code-container[data-title]:not([data-title=""])::before {
  content: attr(data-title);
  position: absolute;
  top: 11px;
  left: 16px;
  z-index: 1;
  font-family: var(--scalar-font, inherit);
  font-size: 12px;
  font-weight: 500;
  line-height: 1;
  color: var(--scalar-color-3);
  pointer-events: none;
}

/* Diagrams: the same paper, ink and accent as the page, in both modes. */
.scalar-app pre.mermaid svg {
  font-family: inherit;
}

.scalar-app pre.mermaid svg text,
.scalar-app pre.mermaid svg tspan {
  font-family: inherit !important;
  fill: var(--scalar-color-1) !important;
}

.scalar-app pre.mermaid svg rect.actor {
  fill: var(--scalar-background-2) !important;
  stroke: var(--scalar-border-color) !important;
  rx: 6px;
}

.scalar-app pre.mermaid svg .actor-line {
  stroke: var(--scalar-border-color) !important;
}

.scalar-app pre.mermaid svg .messageLine0,
.scalar-app pre.mermaid svg .messageLine1 {
  stroke: var(--scalar-color-2) !important;
}

.scalar-app pre.mermaid svg marker path,
.scalar-app pre.mermaid svg marker circle {
  fill: var(--scalar-color-2) !important;
  stroke: var(--scalar-color-2) !important;
}

.scalar-app pre.mermaid svg .note {
  fill: color-mix(
    in srgb,
    var(--scalar-color-accent) 14%,
    var(--scalar-background-1)
  ) !important;
  stroke: color-mix(
    in srgb,
    var(--scalar-color-accent) 40%,
    var(--scalar-background-1)
  ) !important;
}

/* Steps: paragraphs, lists and tables inside a step keep their spacing. */
.scalar-app .t-editor__step-content
  > :is(p, ul, ol, table, blockquote, .t-editor__table-wrapper):not(
    :first-child
  ) {
  margin-top: var(--scalar-block-spacing);
}

/* Tables: tighter cells and smaller code so wide tables fit the column. */
.scalar-app .t-editor__table :is(th, td) {
  padding: 9px 12px;
}

.scalar-app .t-editor__table th {
  white-space: nowrap;
}

.scalar-app .t-editor__table .t-editor__inline-code {
  font-size: 12px;
}

@media (max-width: 720px) {
  .scalar-app h1.t-editor__heading {
    font-size: 26px;
  }

  /* Four tab titles fit a phone screen once their icons go. */
  .scalar-app .t-header__tabs .t-header__item-icon {
    display: none;
  }
}