/* LastPing's slate and teal tokens for the API reference, light and dark.
 *
 * The reference follows the visitor's prefers-color-scheme until they use its
 * own light/dark switch, which puts .light-mode or .dark-mode on <body>; both
 * paths land on the same token set below. Every text colour here meets 4.5:1
 * against the surfaces it sits on, and every boundary 3:1.
 *
 * Selectors are written as ":root .light-mode" rather than ".light-mode" on
 * purpose. The vendored bundle injects its own stylesheet after this one, and
 * its theme rules are single-class selectors; the extra specificity is what
 * lets these win without !important.
 */

:root {
  --lp-bg: #ffffff;
  --lp-bg-panel: #f3f5f8;
  --lp-bg-raised: #e9edf2;
  --lp-border: #d7dde5;
  --lp-border-control: #77838f;
  --lp-fg: #0e1116;
  --lp-fg-2: #3f4957;
  --lp-fg-muted: #5b6675;
  --lp-accent: #0f766e;
  --lp-accent-fg: #ffffff;
  --lp-accent-tint: #e3f1ef;
  --lp-up: #157637;
  --lp-late: #a74d08;
  --lp-down: #cf2020;
  --lp-waiting: #1b5fa8;
  --lp-violet: #6a3fc0;
  --lp-orange: #9a4a0b;
  --lp-note-bg: #fdf6e8;
  --lp-note-border: #d9b36a;
  --lp-font: ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
  --lp-font-code: ui-monospace, SFMono-Regular, Menlo, Consolas, 'Liberation Mono', monospace;
  --lp-bar-height: 44px;
  color-scheme: light;
}

@media (prefers-color-scheme: dark) {
  :root {
    --lp-bg: #0e1116;
    --lp-bg-panel: #151a22;
    --lp-bg-raised: #1a2029;
    --lp-border: #232c38;
    --lp-border-control: #677384;
    --lp-fg: #e8eef5;
    --lp-fg-2: #b0bac6;
    --lp-fg-muted: #8a96a5;
    --lp-accent: #2dd4bf;
    --lp-accent-fg: #062b28;
    --lp-accent-tint: #0f2a29;
    --lp-up: #39d98a;
    --lp-late: #f2b544;
    --lp-down: #f0616d;
    --lp-waiting: #7fb2ff;
    --lp-violet: #c4b5fd;
    --lp-orange: #f5a15c;
    --lp-note-bg: #211c10;
    --lp-note-border: #6b5424;
    color-scheme: dark;
  }
}

/* The reference's own switch wins over the media query, in both directions. */
:root:has(body.light-mode) {
  --lp-bg: #ffffff;
  --lp-bg-panel: #f3f5f8;
  --lp-bg-raised: #e9edf2;
  --lp-border: #d7dde5;
  --lp-border-control: #77838f;
  --lp-fg: #0e1116;
  --lp-fg-2: #3f4957;
  --lp-fg-muted: #5b6675;
  --lp-accent: #0f766e;
  --lp-accent-fg: #ffffff;
  --lp-accent-tint: #e3f1ef;
  --lp-up: #157637;
  --lp-late: #a74d08;
  --lp-down: #cf2020;
  --lp-waiting: #1b5fa8;
  --lp-violet: #6a3fc0;
  --lp-orange: #9a4a0b;
  --lp-note-bg: #fdf6e8;
  --lp-note-border: #d9b36a;
  color-scheme: light;
}

:root:has(body.dark-mode) {
  --lp-bg: #0e1116;
  --lp-bg-panel: #151a22;
  --lp-bg-raised: #1a2029;
  --lp-border: #232c38;
  --lp-border-control: #677384;
  --lp-fg: #e8eef5;
  --lp-fg-2: #b0bac6;
  --lp-fg-muted: #8a96a5;
  --lp-accent: #2dd4bf;
  --lp-accent-fg: #062b28;
  --lp-accent-tint: #0f2a29;
  --lp-up: #39d98a;
  --lp-late: #f2b544;
  --lp-down: #f0616d;
  --lp-waiting: #7fb2ff;
  --lp-violet: #c4b5fd;
  --lp-orange: #f5a15c;
  --lp-note-bg: #211c10;
  --lp-note-border: #6b5424;
  color-scheme: dark;
}

/* ---- The tool's variables, mapped onto the tokens ---------------------- */

:root,
:root .light-mode,
:root .dark-mode {
  --scalar-background-1: var(--lp-bg);
  --scalar-background-2: var(--lp-bg-panel);
  --scalar-background-3: var(--lp-bg-raised);
  --scalar-background-4: var(--lp-bg-raised);
  --scalar-background-card: var(--lp-bg-panel);
  --scalar-background-accent: var(--lp-accent-tint);
  --scalar-border-color: var(--lp-border);
  --scalar-color-1: var(--lp-fg);
  --scalar-color-2: var(--lp-fg-2);
  --scalar-color-3: var(--lp-fg-muted);
  --scalar-color-accent: var(--lp-accent);
  --scalar-color-green: var(--lp-up);
  --scalar-color-red: var(--lp-down);
  --scalar-color-yellow: var(--lp-late);
  --scalar-color-orange: var(--lp-orange);
  --scalar-color-blue: var(--lp-waiting);
  --scalar-color-purple: var(--lp-violet);
  --scalar-color-query: var(--lp-accent);
  --scalar-color-alert: var(--lp-late);
  --scalar-color-danger: var(--lp-down);
  --scalar-background-alert: var(--lp-note-bg);
  --scalar-background-danger: var(--lp-bg-panel);
  --scalar-color-disabled: var(--lp-fg-muted);
  --scalar-color-ghost: var(--lp-fg-muted);
  --scalar-link-color: var(--lp-accent);
  --scalar-link-color-hover: var(--lp-accent);
  --scalar-link-color-visited: var(--lp-accent);
  --scalar-button-1: var(--lp-accent);
  --scalar-button-1-hover: var(--lp-accent);
  --scalar-button-1-color: var(--lp-accent-fg);
  --scalar-tooltip-background: var(--lp-fg);
  --scalar-tooltip-color: var(--lp-bg);
  --scalar-scrollbar-color: var(--lp-border);
  --scalar-scrollbar-color-active: var(--lp-border-control);

  --scalar-sidebar-background-1: var(--lp-bg-panel);
  --scalar-sidebar-color-1: var(--lp-fg);
  --scalar-sidebar-color-2: var(--lp-fg-2);
  --scalar-sidebar-color-active: var(--lp-accent);
  --scalar-sidebar-border-color: var(--lp-border);
  --scalar-sidebar-item-hover-background: var(--lp-bg-raised);
  --scalar-sidebar-item-hover-color: var(--lp-fg);
  --scalar-sidebar-item-active-background: var(--lp-bg-raised);
  --scalar-sidebar-search-background: var(--lp-bg);
  --scalar-sidebar-search-border-color: var(--lp-border-control);
  --scalar-sidebar-search-color: var(--lp-fg-muted);
  --scalar-sidebar-indent-border: var(--lp-border);
  --scalar-sidebar-indent-border-hover: var(--lp-border-control);
  --scalar-sidebar-indent-border-active: var(--lp-accent);

  --scalar-header-background-1: var(--lp-bg-panel);
  --scalar-header-border-color: var(--lp-border);
  --scalar-header-color-1: var(--lp-fg);
  --scalar-header-color-2: var(--lp-fg-2);

  --scalar-font: var(--lp-font);
  --scalar-font-code: var(--lp-font-code);
  --scalar-radius: 4px;
  --scalar-radius-lg: 6px;
  --scalar-radius-xl: 8px;
}

/* ---- The page chrome around the reference ------------------------------ */

html,
body {
  margin: 0;
  background: var(--lp-bg);
  color: var(--lp-fg);
  font-family: var(--lp-font);
}

.lp-skip {
  position: absolute;
  left: 8px;
  top: -48px;
  z-index: 100;
  padding: 8px 12px;
  border-radius: 4px;
  background: var(--lp-accent);
  color: var(--lp-accent-fg);
  font-weight: 600;
  text-decoration: none;
}
.lp-skip:focus {
  top: 8px;
}

/* The bar scrolls away with the page rather than sticking: the reference's
   sidebar and its request window both pin themselves to the top of the
   viewport, and a sticky bar above them would sit on top of the request
   window's close button. */
.lp-docsbar {
  box-sizing: border-box;
  display: flex;
  align-items: center;
  gap: 12px;
  height: var(--lp-bar-height);
  padding: 0 16px;
  border-bottom: 1px solid var(--lp-border);
  background: var(--lp-bg-panel);
  color: var(--lp-fg-muted);
  font-family: var(--lp-font-code);
  font-size: 13px;
}
.lp-docsbar__nav {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
  white-space: nowrap;
}
.lp-docsbar__nav [aria-current] {
  color: var(--lp-fg);
}
.lp-docsbar__sep {
  color: var(--lp-fg-muted);
}
.lp-docsbar a {
  color: var(--lp-accent);
  text-decoration: none;
}
.lp-docsbar a:hover {
  text-decoration: underline;
}
.lp-docsbar__spec {
  margin-left: auto;
}

.lp-keynote {
  box-sizing: border-box;
  border-bottom: 1px solid var(--lp-note-border);
  background: var(--lp-note-bg);
  color: var(--lp-fg);
  font-size: 14px;
  line-height: 1.5;
}
.lp-keynote p {
  max-width: 980px;
  margin: 0;
  padding: 10px 16px;
}

/* Focus rings for the chrome this page adds. The reference draws its own on
   its own controls; a page-wide [tabindex] rule would also ring the section
   the reference focuses when it scrolls to an operation. */
.lp-docsbar a:focus-visible,
.lp-skip:focus-visible {
  outline: 2px solid var(--lp-accent);
  outline-offset: 2px;
  border-radius: 2px;
}
#lp-reference:focus {
  outline: none;
}

/* The server-rendered summary: the whole page for anything that does not run
   JavaScript, and what a person sees for the moment before the reference
   mounts over it. */
.lp-apisummary {
  max-width: 860px;
  margin: 0 auto;
  padding: 28px 16px 60px;
  line-height: 1.6;
  overflow-wrap: anywhere;
}
.lp-apisummary h1 {
  font-size: 26px;
  margin: 0 0 14px;
}
.lp-apisummary h2 {
  font-size: 15px;
  margin: 26px 0 8px;
  color: var(--lp-accent);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.lp-apisummary p,
.lp-apisummary li {
  color: var(--lp-fg-2);
}
.lp-apisummary p {
  margin: 0 0 12px;
}
.lp-apisummary ul {
  margin: 0;
  padding-left: 20px;
}
.lp-apisummary code {
  font-family: var(--lp-font-code);
  font-size: 13px;
  color: var(--lp-fg);
}
.lp-apisummary a {
  color: var(--lp-accent);
}

/* Below the sidebar breakpoint the reference shows the section in view in a
   one-line header. Its title does not truncate on its own, so a long
   operation summary pushed the whole page sideways at 390 px. */
.t-doc__header header > span {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* The request window's rows size themselves to their content (the full URL
   in the address bar, a scheme description on one line), and flex items do
   not shrink below their content by default, so on a phone the whole window
   was laid out ~1100 px wide inside a 390 px frame and Send sat off screen.
   Below the width where the window stacks its panels, every part of it may
   shrink; long values scroll or truncate inside their own fields. */
@media (max-width: 1023px) {
  .scalar-client.scalar-app-layout * {
    min-width: 0;
  }
}

/* A heading's "Copy link" button sits just after its last word, so a title
   whose last line ends at the right edge hung it a few pixels past a 390 px
   screen. Clipping (not scrolling) the reference sideways keeps the page
   inside the viewport; clip creates no scroll container, so the sticky
   sidebar and header are unaffected. */
#lp-reference {
  overflow-x: clip;
}

/* ---- Controls: a boundary of 3:1 against every surface ------------------
   The reference draws every hairline with --scalar-border-color, which is
   --lp-border (1.37:1 on white): right for dividers and cards, too faint for
   something a person types into or ticks. The containers below hold only
   controls (the Authentication tables on the page and in the request window,
   the request window's key and value rows and address bar, the Show Schema
   checkbox, the theme switch), so the variable is redefined on them and every
   rule inside that reads it gets --lp-border-control: 3.87:1 on --lp-bg,
   3.54 on --lp-bg-panel and 3.29 on --lp-bg-raised in light; 3.93, 3.63 and
   3.40 in dark. Everything else keeps the lighter token. */
:root .scalar-data-table,
:root .scalar-reference-intro-auth,
:root .address-bar-bg-states,
:root .scalar-card-checkbox,
:root button.group\/toggle {
  --scalar-border-color: var(--lp-border-control);
}
/* A request row's include checkbox drew its square only on hover, so an
   unticked row had no visible control at all. */
:root .scalar-data-table input[type='checkbox'] ~ .rounded,
:root .scalar-data-table input[type='checkbox'] ~ * .rounded {
  opacity: 1;
}
/* Show Schema's box was a fill 1.07:1 against its card, with no border. */
:root .scalar-card-checkbox-checkmark {
  box-sizing: border-box;
  border: 1px solid var(--lp-border-control);
}
/* The theme switch's track is a fill in the border colour. */
:root button.group\/toggle > .bg-border {
  background-color: var(--lp-border-control);
}

/* The six ingest operations are served by the ping host; this page can only
   call its own origin, so their "try it" is replaced by one sentence
   (reference.js, explainIngestOperations). */
:root [id$='/POST/v1/traces'] button.show-api-client-button,
:root [id$='/POST/{monitor_id}/v1/traces'] button.show-api-client-button,
:root [id$='/POST/v1/metrics'] button.show-api-client-button,
:root [id$='/POST/{monitor_id}/v1/metrics'] button.show-api-client-button,
:root [id$='/POST/v1/logs'] button.show-api-client-button,
:root [id$='/POST/{monitor_id}/v1/logs'] button.show-api-client-button {
  display: none;
}
.lp-notry {
  margin: 0;
  max-width: 44ch;
  color: var(--lp-fg-2);
  font-size: 13px;
  line-height: 1.45;
  text-align: right;
}

/* The request window on a phone. Its sidebar button sits at the window's top
   left, over the first characters of the address bar, and the address bar
   starts there too: the bar moves right of it. The method badge is centred in
   the row under the bar by an auto margin, which read as a stray label; it
   now starts the row, before Copy URL and Send. */
@media (max-width: 767px) {
  .scalar-client.scalar-app-layout .t-app__top-container {
    padding-left: 48px;
  }
  .scalar-client.scalar-app-layout .t-app__top-container .mt-2 > [teleport] {
    margin-left: 0;
  }
}
/* A scheme description's More button shrank to nothing beside the
   truncated description at 390 px, so it was cut off at the edge. */
.scalar-client.scalar-app-layout .auth-description > button {
  flex-shrink: 0;
  min-width: auto;
}