/* ==========================================================================
   NLO developer-docs theme, applied to the Scalar API reference.
   Tokens and treatments follow NLODOCSTHEMESPEC.md:
   Sora / Inter / JetBrains Mono, brand orange #ff6723, liquid-glass surfaces,
   fixed page glow, and code blocks that stay dark in both themes.
   ========================================================================== */

/* --------------------------------------------------------------- 1. Tokens */

:root {
  color-scheme: dark;

  --doc-bg: #08090e;
  --doc-bg-soft: #0b0d13;
  --doc-fg: #f0f2f8;
  --doc-fg-muted: #9aa0ac;
  --doc-fg-faint: #6b7280;

  --doc-accent: #ff6723;
  --doc-accent-2: #ff8a4d;
  --doc-link: #ff8a4d;
  --doc-accent-soft: rgba(255, 103, 35, 0.12);
  --doc-accent-line: rgba(255, 103, 35, 0.3);

  --doc-surface: #101218;
  --doc-surface-2: #15171f;
  --doc-surface-hover: #181b24;

  --doc-border: rgba(255, 255, 255, 0.09);
  --doc-border-soft: rgba(255, 255, 255, 0.055);
  --doc-border-strong: rgba(255, 255, 255, 0.16);

  --doc-topbar-bg: rgba(8, 9, 14, 0.72);

  --doc-code-bg: #0a0c12;
  --doc-code-head: #0e1118;
  --doc-code-fg: #e7ecf3;
  --doc-code-border: rgba(255, 255, 255, 0.08);

  --doc-inline-bg: rgba(255, 103, 35, 0.12);
  --doc-inline-fg: #ffb488;
  --doc-inline-border: rgba(255, 103, 35, 0.22);

  --doc-green: #2dd47b;
  --doc-amber: #f5b042;
  --doc-red: #ff3b5c;

  --doc-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.4);
  --doc-shadow: 0 2px 8px rgba(0, 0, 0, 0.3), 0 12px 32px rgba(0, 0, 0, 0.32);

  --glass-bg: rgba(255, 255, 255, 0.05);
  --glass-bg-2: rgba(255, 255, 255, 0.07);
  --glass-bg-hover: rgba(255, 255, 255, 0.085);
  --glass-border: rgba(255, 255, 255, 0.12);
  --glass-blur: blur(22px) saturate(150%);
  --glass-hl: inset 0 1px 0 rgba(255, 255, 255, 0.1);
  --glass-shadow: 0 10px 34px rgba(0, 0, 0, 0.34);
  --glass-topbar: rgba(12, 13, 19, 0.55);

  --doc-page-glow:
    radial-gradient(680px 520px at 92% -10%, rgba(255, 103, 35, 0.13), transparent 60%),
    radial-gradient(560px 480px at -8% 106%, rgba(73, 121, 255, 0.09), transparent 60%),
    radial-gradient(900px 700px at 50% 120%, rgba(255, 103, 35, 0.05), transparent 70%);

  --topbar-h: 68px;
}

:root[data-theme='light'] {
  color-scheme: light;

  --doc-bg: #f7f7f5;
  --doc-bg-soft: #ffffff;
  --doc-fg: #16181d;
  --doc-fg-muted: #595e68;
  --doc-fg-faint: #8b9099;

  --doc-accent: #ff6723;
  --doc-accent-2: #ff7c3f;
  --doc-link: #d4530c;
  --doc-accent-soft: rgba(255, 103, 35, 0.1);
  --doc-accent-line: rgba(255, 103, 35, 0.32);

  --doc-surface: #ffffff;
  --doc-surface-2: #f4f4f2;
  --doc-surface-hover: #fbfbf9;

  --doc-border: rgba(20, 22, 28, 0.1);
  --doc-border-soft: rgba(20, 22, 28, 0.06);
  --doc-border-strong: rgba(20, 22, 28, 0.16);

  --doc-topbar-bg: rgba(247, 247, 245, 0.78);

  --doc-code-bg: #0e1014;
  --doc-code-head: #15181e;
  --doc-code-fg: #e7ecf3;
  --doc-code-border: rgba(255, 255, 255, 0.07);

  --doc-inline-bg: #f1ece6;
  --doc-inline-fg: #a8460a;
  --doc-inline-border: rgba(20, 22, 28, 0.1);

  --doc-green: #18a957;
  --doc-amber: #c77a09;
  --doc-red: #d23a52;

  --doc-shadow-sm: 0 1px 2px rgba(20, 22, 28, 0.05);
  --doc-shadow: 0 1px 2px rgba(20, 22, 28, 0.05), 0 12px 30px rgba(20, 22, 28, 0.07);

  --glass-bg: rgba(255, 255, 255, 0.55);
  --glass-bg-2: rgba(255, 255, 255, 0.72);
  --glass-bg-hover: rgba(255, 255, 255, 0.82);
  --glass-border: rgba(255, 255, 255, 0.85);
  --glass-blur: blur(20px) saturate(160%);
  --glass-hl: inset 0 1px 0 rgba(255, 255, 255, 0.9);
  --glass-shadow: 0 1px 0 rgba(20, 22, 28, 0.04), 0 12px 30px rgba(20, 22, 28, 0.09);
  --glass-topbar: rgba(247, 247, 245, 0.6);

  --doc-page-glow:
    radial-gradient(720px 540px at 94% -12%, rgba(255, 103, 35, 0.1), transparent 62%),
    radial-gradient(560px 460px at -6% 104%, rgba(73, 121, 255, 0.07), transparent 64%),
    radial-gradient(900px 680px at 50% 118%, rgba(255, 103, 35, 0.04), transparent 70%);
}

/* ------------------------------------------------- 2. Page shell and glow */

html {
  font-size: 16px; /* the A- / A+ scaler moves this */
}

body {
  margin: 0;
  background: var(--doc-bg);
  color: var(--doc-fg);
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  -webkit-font-smoothing: antialiased;
  transition: background-color 0.3s ease, color 0.3s ease;
}

body::before {
  content: '';
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background: var(--doc-page-glow);
}

/* Let the glow read through Scalar's own opaque page background. */
.scalar-app,
.scalar-app .references-rendered,
.scalar-app main {
  background: transparent !important;
  position: relative;
  z-index: 1;
}

/* ------------------------------------------------------------- 3. Topbar */

.nlo-topbar {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 100;
  min-height: var(--topbar-h);
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 12px 24px;
  background: var(--glass-topbar);
  backdrop-filter: saturate(160%) blur(22px);
  -webkit-backdrop-filter: saturate(160%) blur(22px);
  border-bottom: 1px solid var(--doc-border);
  box-shadow: var(--glass-hl);
  transition: background-color 0.3s ease, border-color 0.3s ease;
}

.nlo-brand {
  display: flex;
  align-items: center;
  gap: 12px;
  text-decoration: none;
  color: var(--doc-fg);
}

.nlo-mark {
  width: 36px;
  height: 36px;
  display: grid;
  place-items: center;
  border-radius: 10px;
  background: var(--glass-bg);
  border: 1px solid var(--glass-border);
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
  box-shadow: var(--glass-hl), var(--glass-shadow);
  color: var(--doc-accent);
}

.nlo-mark svg,
.nlo-mark img {
  width: 22px;
  height: 22px;
  display: block;
}

.nlo-wordmark {
  font-family: 'Sora', 'Inter', sans-serif;
  font-weight: 700;
  font-size: 18px;
  letter-spacing: 0.14em;
}

.nlo-topbar-label {
  font-size: 13px;
  color: var(--doc-fg-faint);
  padding-left: 16px;
  margin-left: 4px;
  border-left: 1px solid var(--doc-border);
  letter-spacing: 0.01em;
}

.nlo-topbar-right {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 10px;
}

.nlo-ghost {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 40px;
  padding: 0 14px;
  border-radius: 10px;
  font: 600 14px 'Inter', sans-serif;
  color: var(--doc-fg-muted);
  text-decoration: none;
  border: 1px solid transparent;
  transition: color 0.15s ease, background-color 0.15s ease, border-color 0.15s ease;
}

.nlo-ghost:hover {
  color: var(--doc-fg);
  background: var(--glass-bg-hover);
  border-color: var(--glass-border);
}

.nlo-cta {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 40px;
  padding: 0 18px;
  border: 0;
  border-radius: 10px;
  background: linear-gradient(135deg, #ff7c3f 0%, var(--doc-accent) 100%);
  color: #fff;
  font: 600 14px 'Inter', sans-serif;
  text-decoration: none;
  box-shadow: 0 6px 18px -8px rgba(255, 103, 35, 0.7);
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.nlo-cta:hover {
  transform: translateY(-1px);
  box-shadow: 0 10px 24px -8px rgba(255, 103, 35, 0.8);
}

/* Text-size scaler pill */
.nlo-scale {
  display: flex;
  align-items: stretch;
  height: 40px;
  border-radius: 10px;
  overflow: hidden;
  background: var(--glass-bg);
  border: 1px solid var(--glass-border);
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
  box-shadow: var(--glass-hl), var(--glass-shadow);
}

.nlo-scale button {
  min-width: 44px;
  padding: 0 10px;
  border: 0;
  background: transparent;
  color: var(--doc-fg-muted);
  font-family: 'Sora', 'Inter', sans-serif;
  font-weight: 600;
  font-size: 13px;
  cursor: pointer;
  transition: color 0.15s ease, background-color 0.15s ease, opacity 0.15s ease;
}

.nlo-scale button + button {
  border-left: 1px solid var(--glass-border);
}

.nlo-scale button:hover:not(:disabled) {
  color: var(--doc-fg);
  background: var(--glass-bg-hover);
}

.nlo-scale button:disabled {
  opacity: 0.4;
  cursor: default;
}

.nlo-scale .nlo-scale-value {
  color: var(--doc-fg);
  cursor: default;
  min-width: 56px;
}

/* Theme toggle */
.nlo-toggle {
  width: 40px;
  height: 40px;
  display: grid;
  place-items: center;
  border-radius: 10px;
  cursor: pointer;
  color: var(--doc-fg-muted);
  background: var(--glass-bg);
  border: 1px solid var(--glass-border);
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
  box-shadow: var(--glass-hl), var(--glass-shadow);
  transition: color 0.15s ease, background-color 0.15s ease;
}

.nlo-toggle:hover {
  color: var(--doc-fg);
  background: var(--glass-bg-hover);
}

.nlo-toggle svg {
  width: 18px;
  height: 18px;
}

.nlo-toggle .icon-sun {
  display: none;
}

:root[data-theme='light'] .nlo-toggle .icon-sun {
  display: block;
}

:root[data-theme='light'] .nlo-toggle .icon-moon {
  display: none;
}

@media (max-width: 900px) {
  .nlo-topbar-label,
  .nlo-scale,
  .nlo-ghost {
    display: none;
  }
  .nlo-topbar {
    padding: 12px 16px;
  }
}

/* --------------------------------------- 4. Scalar token mapping (dark) */

.scalar-app {
  --scalar-font: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --scalar-font-code: 'JetBrains Mono', 'SF Mono', ui-monospace, Consolas, monospace;
  --scalar-radius: 8px;
  --scalar-radius-lg: 10px;
  --scalar-radius-xl: 12px;

  --refs-header-height: var(--topbar-h);

  --scalar-background-1: var(--doc-bg) !important;
  --scalar-background-2: #0d0f15 !important;
  --scalar-background-3: #14171f !important;
  --scalar-background-accent: rgba(255, 103, 35, 0.12) !important;

  --scalar-color-1: var(--doc-fg) !important;
  --scalar-color-2: var(--doc-fg-muted) !important;
  --scalar-color-3: var(--doc-fg-faint) !important;
  --scalar-color-accent: var(--doc-accent) !important;

  --scalar-color-green: var(--doc-green) !important;
  --scalar-color-red: var(--doc-red) !important;
  --scalar-color-yellow: var(--doc-amber) !important;
  --scalar-color-orange: var(--doc-accent) !important;
  --scalar-color-blue: #5b9bff !important;
  --scalar-color-purple: #b888ff !important;

  --scalar-border-color: var(--doc-border) !important;

  --scalar-sidebar-background-1: transparent !important;
  --scalar-sidebar-color-1: var(--doc-fg) !important;
  --scalar-sidebar-color-2: var(--doc-fg-muted) !important;
  --scalar-sidebar-border-color: var(--doc-border) !important;
  --scalar-sidebar-item-hover-background: var(--glass-bg) !important;
  --scalar-sidebar-item-hover-color: var(--doc-fg) !important;
  --scalar-sidebar-item-active-background: var(--doc-accent-soft) !important;
  --scalar-sidebar-color-active: var(--doc-accent-2) !important;
  --scalar-sidebar-search-background: var(--glass-bg) !important;
  --scalar-sidebar-search-border-color: var(--glass-border) !important;
  --scalar-sidebar-search-color: var(--doc-fg-muted) !important;
}

:root[data-theme='light'] .scalar-app {
  --scalar-background-1: var(--doc-bg) !important;
  --scalar-background-2: #ffffff !important;
  --scalar-background-3: #fbfbf9 !important;
  --scalar-background-accent: rgba(255, 103, 35, 0.1) !important;
  --scalar-sidebar-color-active: var(--doc-link) !important;
}

/* -------------------------------------------------------- 5. Typography */

.scalar-app {
  font-family: var(--scalar-font) !important;
}

.scalar-app h1,
.scalar-app h2,
.scalar-app h3,
.scalar-app .section-header-label,
.scalar-app .markdown h1,
.scalar-app .markdown h2,
.scalar-app .markdown h3 {
  font-family: 'Sora', 'Inter', sans-serif !important;
  color: var(--doc-fg) !important;
}

.scalar-app h1.section-header-label {
  font-size: clamp(38px, 4.4vw, 52px) !important;
  line-height: 1.04 !important;
  letter-spacing: -0.035em !important;
  font-weight: 700 !important;
}

/* Prose sizing is scoped: Scalar reuses .markdown for dense schema tables. */
.introduction-description .markdown,
.tag-section-container .markdown,
.operation-description .markdown {
  font-size: 16px;
  line-height: 1.65;
  color: var(--doc-fg-muted);
}

.introduction-description .markdown > p:first-child {
  font-size: 19px;
  line-height: 1.6;
  max-width: 64ch;
}

.tag-section-container .markdown h2,
.introduction-description .markdown h2 {
  font-size: clamp(26px, 3.2vw, 32px) !important;
  line-height: 1.18 !important;
  letter-spacing: -0.025em !important;
  font-weight: 700 !important;
  margin: 56px 0 18px !important;
}

.tag-section-container .markdown h3,
.introduction-description .markdown h3 {
  font-size: 19px !important;
  line-height: 1.35 !important;
  letter-spacing: -0.01em !important;
  font-weight: 650 !important;
  margin: 36px 0 12px !important;
}

.tag-section-container .markdown h4 {
  font-size: 14px !important;
  font-weight: 700 !important;
  letter-spacing: 0.01em !important;
  margin: 24px 0 10px !important;
  color: var(--doc-fg) !important;
}

.tag-section-container .markdown strong,
.introduction-description .markdown strong {
  color: var(--doc-fg);
  font-weight: 600;
}

.tag-section-container .markdown a,
.introduction-description .markdown a,
.operation-description .markdown a {
  color: var(--doc-link) !important;
  text-decoration: none !important;
  border-bottom: 1px solid transparent;
  transition: border-color 0.15s ease, color 0.15s ease;
}

.tag-section-container .markdown a:hover,
.introduction-description .markdown a:hover,
.operation-description .markdown a:hover {
  border-bottom-color: currentColor;
}

/* The per-page "View on GitBook" line */
.tag-section-container .markdown sup {
  display: inline-block;
  margin: -4px 0 14px;
  font-size: 11px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.tag-section-container .markdown sup a {
  color: var(--doc-fg-faint) !important;
  font-weight: 600;
}

.tag-section-container .markdown sup a:hover {
  color: var(--doc-link) !important;
}

/* Page separators between mirrored GitBook pages */
.tag-section-container .markdown hr {
  margin: 44px 0;
  border: 0;
  border-top: 1px solid var(--doc-border);
}

/* Inline code */
.scalar-app .markdown code:not(pre code) {
  font-family: var(--scalar-font-code) !important;
  font-size: 0.86em !important;
  padding: 2px 7px !important;
  border-radius: 5px !important;
  background: var(--doc-inline-bg) !important;
  color: var(--doc-inline-fg) !important;
  border: 1px solid var(--doc-inline-border) !important;
  white-space: nowrap;
}

/* ------------------------------------------- 6. Code blocks (dark always) */

.scalar-app .markdown pre {
  background: var(--doc-code-bg) !important;
  color: var(--doc-code-fg) !important;
  border: 1px solid var(--doc-code-border) !important;
  border-radius: 12px !important;
  box-shadow: var(--doc-shadow);
  padding: 16px 18px !important;
  margin: 16px 0 24px !important;
  overflow-x: auto;
}

.scalar-app .markdown pre code {
  font-family: var(--scalar-font-code) !important;
  font-size: 13px !important;
  line-height: 1.6 !important;
  background: transparent !important;
  color: var(--doc-code-fg) !important;
  border: 0 !important;
  padding: 0 !important;
  font-feature-settings: 'ss01', 'ss02';
}

/* ---------------------------------------------------- 7. Glass surfaces */

.scalar-app .markdown table {
  width: 100%;
  border-collapse: collapse;
  font-size: 14px;
}

.scalar-app .tag-section-container .markdown table,
.scalar-app .introduction-description .markdown table {
  background: var(--glass-bg);
  border: 1px solid var(--glass-border);
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
  box-shadow: var(--glass-hl), var(--glass-shadow);
  border-radius: 12px;
  overflow: hidden;
  margin: 16px 0 24px;
}

.scalar-app .tag-section-container .markdown th,
.scalar-app .introduction-description .markdown th {
  background: var(--doc-surface-2);
  color: var(--doc-fg);
  font-weight: 600;
  text-align: left;
  padding: 10px 14px;
  border-bottom: 1px solid var(--doc-border);
}

.scalar-app .tag-section-container .markdown td,
.scalar-app .introduction-description .markdown td {
  padding: 10px 14px;
  border-bottom: 1px solid var(--doc-border-soft);
}

/* Blockquotes become NLO info callouts */
.scalar-app .markdown blockquote {
  position: relative;
  margin: 22px 0;
  /* !important for the same reason as the border below: Scalar injects its own
     `.markdown blockquote` rule after this stylesheet and resets the left
     padding to 12px, which slid the text under the badge. */
  padding: 16px 18px 16px 50px !important;
  border: 1px solid var(--glass-border);
  /* !important: Scalar injects its own `blockquote { border-left: 2px }` after
     this stylesheet, at equal specificity. */
  border-left: 3px solid var(--doc-accent) !important;
  border-radius: 12px;
  background:
    linear-gradient(0deg, color-mix(in srgb, var(--doc-accent) 12%, transparent), color-mix(in srgb, var(--doc-accent) 12%, transparent)),
    var(--glass-bg);
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
  box-shadow: var(--glass-hl), var(--glass-shadow);
  font-size: 14.5px;
  line-height: 1.6;
  color: var(--doc-fg-muted);
}

.scalar-app .markdown blockquote::before {
  content: 'i';
  position: absolute;
  left: 16px;
  top: 16px;
  width: 22px;
  height: 22px;
  display: grid;
  place-items: center;
  border-radius: 999px;
  background: var(--doc-accent);
  color: #fff;
  font-family: Georgia, serif;
  font-style: italic;
  font-weight: 700;
  font-size: 13px;
  line-height: 1;
}

.scalar-app .markdown blockquote p {
  margin: 0;
}

.scalar-app .markdown blockquote p + p {
  margin-top: 10px;
}

/* Cards Scalar draws for servers, auth, operations */
.scalar-app .introduction-card-item,
.scalar-app .contents .card,
.scalar-app .scalar-card {
  background: var(--glass-bg) !important;
  border-color: var(--glass-border) !important;
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
  box-shadow: var(--glass-hl), var(--glass-shadow);
  border-radius: 12px !important;
}

/* Sidebar */
.scalar-app aside {
  background: transparent !important;
  border-right: 1px solid var(--doc-border) !important;
}

.scalar-app aside li a,
.scalar-app aside li button {
  border-radius: 8px;
  transition: background-color 0.15s ease, color 0.15s ease;
}

/* --------------------------------------------- 8. Hide vendor chrome */

/* Toolbar row: Developer Tools / Configure / Share / Deploy */
.scalar-app header.api-reference-toolbar {
  display: none !important;
}

/* Sidebar footer: MCP launcher + "Powered by Scalar" (theme lives in our topbar) */
.scalar-app .darklight-reference {
  display: none !important;
}

/* "Ask AI" pill next to the sidebar search */
.scalar-app aside .px-3.pt-3 > button:last-child {
  display: none !important;
}

.scalar-app aside .px-3.pt-3 > button:first-child {
  flex: 1;
}

/* -------------------------------------------------- 9. Layout offsets */

body {
  padding-top: var(--topbar-h);
}

@media (prefers-reduced-motion: reduce) {
  * {
    scroll-behavior: auto !important;
    transition: none !important;
  }
  .nlo-cta:hover {
    transform: none;
  }
}

/* ------------------------------------- 10. Prose sections run full width */

/* Tag sections are mirrored documentation, not request/response pairs —
   drop Scalar's two-column split so the prose gets the whole measure. */
.scalar-app .tag-section-container .section-columns {
  display: block;
}

.scalar-app .tag-section-container .section-column {
  width: 100%;
}

.scalar-app .tag-section-container .markdown {
  max-width: 78ch;
}

.scalar-app .tag-section-container .markdown pre,
.scalar-app .tag-section-container .markdown table {
  max-width: 100%;
}

/* ------------------------------------------------------ 11. Sidebar chrome */

.scalar-app aside li[class*='sidebar-section'] > [class*='group/button']:not([class*='button-label']) {
  margin: 26px 0 8px;
  /* 16px, not 14: items carry a 2px left rail, so this lines the label text up
     with the item text exactly. */
  padding: 0 14px 0 16px;
  font-family: 'Sora', 'Inter', sans-serif;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  /* The group header is the hierarchy anchor: it must read STRONGER than the child
     page links beneath it (which use --doc-fg-muted). Faint made headers dimmer than
     their own children — the inversion. --doc-fg is the strongest tone. */
  color: var(--doc-fg) !important;
}

/* A blanket rule pins every sidebar label to weight 500; group headers must out-rank
   it so the 700 above actually renders on the label span, not just the button. */
.scalar-app aside li[class*='sidebar-section'] > [class*='group/button'] [class*='button-label'] {
  font-weight: 700;
  color: inherit;
}

.scalar-app aside li[class*='sidebar-section'] > [class*='group/button']:hover {
  background: transparent !important;
}

/* First group sits right under the search field */
.scalar-app aside ul > li[class*='sidebar-section']:first-child > [class*='group/button'] {
  margin-top: 0;
}

/* -------------------------------------------------------- 12. Fine detail */

::selection {
  background: var(--doc-accent-soft);
  color: var(--doc-fg);
}

.scalar-app ::-webkit-scrollbar {
  width: 10px;
  height: 10px;
}

.scalar-app ::-webkit-scrollbar-thumb {
  background: var(--doc-border-strong);
  border-radius: 999px;
  border: 3px solid transparent;
  background-clip: content-box;
}

.scalar-app ::-webkit-scrollbar-track {
  background: transparent;
}

/* Method badges pick up the brand palette through Scalar's own tokens,
   but the POST/GET pills read better with a touch more weight. */
.scalar-app .request-method,
.scalar-app [class*='http-method'] {
  font-family: var(--scalar-font-code) !important;
  font-weight: 600 !important;
  letter-spacing: 0.02em;
}

/* Scalar clamps tag descriptions to 7 lines behind a "Show More" button.
   These sections ARE the documentation here, so always show them in full. */
.scalar-app .tag-section-container {
  --markdown-clamp: 99999;
}

.scalar-app .tag-section-container .markdown[class*='line-clamp'] {
  -webkit-line-clamp: unset !important;
  overflow: visible !important;
}

.scalar-app .tag-section-container .show-more {
  display: none !important;
}

/* The landing section carries tables too — give it the full measure and let
   Scalar's server / auth / client cards stack underneath. */
.scalar-app .section-columns:has(.introduction-description) {
  display: block;
}

.scalar-app .section-columns:has(.introduction-description) .section-column {
  width: 100%;
}

.scalar-app .introduction-description .markdown {
  max-width: 78ch;
}

/* Scalar's server / auth / client-library cards describe the Direct Swap API,
   not the reference as a whole. They belong with that section, not on the
   landing page — where, since the intro went full width, they reflowed
   underneath the prose and read as part of it. */
.scalar-app .introduction-section .introduction-card {
  display: none !important;
}

/* border-collapse: collapse ignores the wrapper radius, so separate the
   borders and let the rounded corners actually clip. */
.scalar-app .tag-section-container .markdown table,
.scalar-app .introduction-description .markdown table {
  border-collapse: separate;
  border-spacing: 0;
}

.scalar-app .tag-section-container .markdown tr:last-child td,
.scalar-app .introduction-description .markdown tr:last-child td {
  border-bottom: 0;
}

/* Scalar's own mobile header sits below ours on small screens. */
@media (max-width: 1024px) {
  .scalar-app .t-doc__header {
    top: var(--topbar-h) !important;
  }
}

/* ------------------------------------------ 13. Centred content column */

/* Scalar leaves the content flush against the sidebar and lets the measure
   trail off into empty space on the right. Give each section a measure of
   its own and centre it in the space beside the sidebar. */
/* The section itself is what gets centred (section 21); the content box just
   fills it, so title and body share a left edge. */
.scalar-app .section-content {
  max-width: 860px;
  margin-inline: 0;
}

/* Operations carry a request/response panel, so they need the wider box. */
.scalar-app .section-content:has(.operation-details),
.scalar-app .section-content:has(.examples),
.scalar-app .section-content:has(.scalar-codeblock-pre) {
  max-width: 1200px;
}

.scalar-app .tag-section-container .markdown,
.scalar-app .introduction-description .markdown {
  max-width: 100%;
}

/* ------------------------------------------------- 14. No search field */

.scalar-app aside .px-3.pt-3 {
  display: none !important;
}

.scalar-app aside [class*='group/items'] {
  padding-top: 16px;
}


/* ---------------------------------------- 15. Centred shell + top space */

/* The NLO docs centre the whole shell — sidebar and content together — inside
   a fixed measure, rather than pinning the sidebar to the viewport edge. */
:root {
  --shell-max: 1240px;
}

/* Scalar's grid resolves its own track widths, so the shell is inset from the
   page instead: symmetric body padding, computed off the same measure the
   topbar uses, keeps the brand aligned with the sidebar's left edge. */
body {
  padding-inline: calc(max(0px, 100% - var(--shell-max)) / 2);
}

.nlo-topbar {
  padding: 12px 0;
}

.nlo-topbar-inner {
  width: 100%;
  max-width: var(--shell-max);
  margin-inline: auto;
  padding-left: 36px;  /* lines the brand up with the sidebar's item text */
  padding-right: 24px;
  display: flex;
  align-items: center;
  gap: 16px;
}

/* Breathing room under the topbar, on both columns. */
/* Breathing room under the topbar. Excludes collapsible bodies: each model in
   the Models section is itself a `.section`, and matched `:first-of-type`, so
   every expanded model opened with 90px of dead space above its description. */
.scalar-app .references-rendered .section:first-of-type:not(.collapsible-section-content) {
  padding-top: 90px;
}

.scalar-app .collapsible-section-content {
  padding-top: 8px;
}

/* Direct child only: every group's nested <ul> also carries `group/items`, so
   an unscoped selector padded each group by 76px and blew the rhythm apart. */
.scalar-app aside > [class*='group/items'] {
  padding-top: 76px;
}

@media (max-width: 900px) {
  .nlo-topbar-inner {
    padding-left: 16px;
    padding-right: 16px;
  }
}

/* Version / spec-format badges above the title: house-keeping for an API
   playground, noise for a documentation site. The row holds only those two
   badges, so hiding the row is safe. */
.scalar-app .introduction-section .section-content > div:has(> .badge) {
  display: none !important;
}

/* ------------------------------------------------ 16. Section eyebrows */

/* The group name, printed above each section title the way the NLO docs do.
   `content` comes from the generated sections.css; this is only the styling,
   so sections without a generated rule render nothing. */
.scalar-app .tag-section-container .section-header::before {
  content: none;
  display: block;
  margin-bottom: 10px;
  font-family: 'Sora', 'Inter', sans-serif;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--doc-link);
}

/* --------------------------------------------- 17. Type parity with NLO */

/* Scalar renders a section title as a <div>, not a heading, so the h1/h2/h3
   rules above never touched it — page titles were coming out Inter 24/600
   instead of Sora 32/700. Operation sections keep Scalar's compact size; they
   are told apart by the method segment their id carries. */
.scalar-app .section-header {
  font-family: 'Sora', 'Inter', sans-serif;
}

.scalar-app
  section[id^='api-1/tag/']:not([id*='/GET/']):not([id*='/POST/']):not([id*='/PUT/']):not([id*='/PATCH/']):not([id*='/DELETE/'])
  .section-header {
  font-size: clamp(26px, 3.2vw, 32px);
  line-height: 1.18;
  letter-spacing: -0.025em;
  font-weight: 700;
}

/* NLO's sidebar: Inter 14/500, line-height 1.65. */
.scalar-app aside [class*='button-label'] {
  font-weight: 500;
  line-height: 1.65;
}

/* NLO's group labels and content eyebrows: Sora 12/700, 0.06em. */
.scalar-app aside li[class*='sidebar-section'] > [class*='group/button'],
.scalar-app .tag-section-container .section-header::before {
  font-size: 12px;
  letter-spacing: 0.06em;
  line-height: 1.65;
}

/* ------------------------------------- 18. Sidebar item states (NLO parity) */

/* Lifted from nlo.finance: 7px/14px in a 9px pill, a 2px left rail that only
   colours when active, grey fill on hover, accent-soft fill when selected.
   Group headers are excluded — they are labels, not targets. */
.scalar-app aside li:not([class*='sidebar-section']) [class*='group/button']:not([class*='button-label']) {
  padding: 7px 14px;
  margin: 1px 0;
  border-radius: 9px;
  border-left: 2px solid transparent;
  color: var(--doc-fg-muted);
  font-weight: 500;
  transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}

/* The :hover selector out-specifies the active one, so exclude the selected
   item — otherwise the orange pill turned grey under the cursor. */
.scalar-app
  aside
  li:not([class*='sidebar-section'])
  [class*='group/button']:not([class*='button-label']):not([class*='sidebar-c-active']):hover {
  background: var(--doc-surface-2) !important;
  color: var(--doc-fg) !important;
}

/* Scalar paints its own active background through a Tailwind utility, hence
   the !important on these three. */
.scalar-app aside li [class*='group/button']:not([class*='button-label'])[class*='sidebar-c-active'] {
  background: var(--doc-accent-soft) !important;
  color: var(--doc-link) !important;
  border-left-color: var(--doc-accent) !important;
  font-weight: 600;
}

/* Scalar colours the label itself, which would otherwise win over the states. */
.scalar-app aside li:not([class*='sidebar-section']) [class*='button-label'] {
  color: inherit;
  font-weight: inherit;
}

/* ------------------------------------------- 19. Code cards (NLO parity) */

/* theme.js wraps every markdown <pre> in this card: a 46px head carrying the
   language label and a copy button, over the code itself. Values are taken
   from nlo.finance's .nlo-docs__codecard. */
.scalar-app .markdown .nlo-codecard {
  margin: 16px 0 24px;
  border: 1px solid var(--doc-code-border);
  border-radius: 12px;
  background: var(--doc-code-bg);
  box-shadow: var(--doc-shadow);
  overflow: hidden;
}

.scalar-app .markdown .nlo-codecard-head {
  display: flex;
  align-items: center;
  gap: 16px;
  min-height: 46px;
  padding: 0 14px 0 18px;
  background: var(--doc-code-head);
  border-bottom: 1px solid var(--doc-code-border);
}

.scalar-app .markdown .nlo-codecard-label {
  font-family: 'JetBrains Mono', 'SF Mono', ui-monospace, monospace;
  font-size: 12.5px;
  letter-spacing: 0.2px;
  color: var(--doc-accent-2);
}

.scalar-app .markdown .nlo-copy {
  margin-left: auto;
  appearance: none;
  display: inline-flex;
  align-items: center;
  padding: 5px 12px;
  border-radius: 7px;
  border: 1px solid rgba(255, 255, 255, 0.14);
  background: rgba(255, 255, 255, 0.05);
  color: rgba(255, 255, 255, 0.75);
  font: 500 12px 'Inter', sans-serif;
  cursor: pointer;
  transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}

.scalar-app .markdown .nlo-copy:hover {
  background: rgba(255, 255, 255, 0.12);
  color: #fff;
  border-color: rgba(255, 255, 255, 0.22);
}

.scalar-app .markdown .nlo-copy.is-copied {
  background: rgba(45, 212, 123, 0.18);
  color: #6ff0a8;
  border-color: rgba(45, 212, 123, 0.3);
}

/* The card owns the frame now, so the <pre> inside gives up its own. */
.scalar-app .markdown .nlo-codecard pre {
  margin: 0 !important;
  padding: 18px 20px !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  background: transparent !important;
  font-size: 13.5px !important;
  line-height: 1.7 !important;
  color: var(--doc-code-fg) !important;
  overflow-x: auto;
}

.scalar-app .markdown .nlo-codecard pre code {
  font-size: inherit !important;
  line-height: inherit !important;
}

/* ------------------------------------------------- 20. Callout variants */

/* build.mjs injects an invisible marker for callouts that open with
   **Tip.** / **Warning.** / **Danger.**; the base blockquote style above is
   the info variant. */
.scalar-app .markdown .callout-kind {
  display: none;
}

.scalar-app .markdown blockquote:has(.callout--tip) {
  border-left-color: var(--doc-green) !important;
  background:
    linear-gradient(
      0deg,
      color-mix(in srgb, var(--doc-green) 12%, transparent),
      color-mix(in srgb, var(--doc-green) 12%, transparent)
    ),
    var(--glass-bg);
}

.scalar-app .markdown blockquote:has(.callout--tip)::before {
  content: '✓';
  background: var(--doc-green);
  font-family: 'Inter', sans-serif;
  font-style: normal;
  font-size: 12px;
}

.scalar-app .markdown blockquote:has(.callout--warning) {
  border-left-color: var(--doc-amber) !important;
  background:
    linear-gradient(
      0deg,
      color-mix(in srgb, var(--doc-amber) 12%, transparent),
      color-mix(in srgb, var(--doc-amber) 12%, transparent)
    ),
    var(--glass-bg);
}

.scalar-app .markdown blockquote:has(.callout--warning)::before {
  content: '!';
  background: var(--doc-amber);
  font-family: 'Inter', sans-serif;
  font-style: normal;
  font-size: 13px;
}

.scalar-app .markdown blockquote:has(.callout--danger) {
  border-left-color: var(--doc-red) !important;
  background:
    linear-gradient(
      0deg,
      color-mix(in srgb, var(--doc-red) 12%, transparent),
      color-mix(in srgb, var(--doc-red) 12%, transparent)
    ),
    var(--glass-bg);
}

.scalar-app .markdown blockquote:has(.callout--danger)::before {
  content: '✕';
  background: var(--doc-red);
  font-family: 'Inter', sans-serif;
  font-style: normal;
  font-size: 11px;
}

/* ------------------------------------------ 21. One left edge per section */

/* The section title lives in .section-header-wrapper, a sibling of
   .section-content — so centring the content alone left the title hanging
   ~110px further left. Centre the whole page section instead, and both the
   title and the body share one left edge, the way the NLO docs read.
   Operation sections are excluded: they need the full width for their
   request/response panel. */
.scalar-app
  section[id^='api-1/tag/']:not([id*='/GET/']):not([id*='/POST/']):not([id*='/PUT/']):not([id*='/PATCH/']):not([id*='/DELETE/']) {
  max-width: 860px;
  margin-inline: auto;
}

/* Same treatment for the landing section. */
.scalar-app .introduction-section {
  max-width: 860px;
  margin-inline: auto;
}

/* Scalar lays the section header out as `grid-cols-2` — the title gets half
   the width and wraps early while the right half sits empty. That column is
   only useful on operations (it carries the auth badge), so collapse it
   everywhere else and let titles use the full measure. */
.scalar-app
  section[id^='api-1/tag/']:not([id*='/GET/']):not([id*='/POST/']):not([id*='/PUT/']):not([id*='/PATCH/']):not([id*='/DELETE/'])
  .section-header-wrapper,
.scalar-app .introduction-section .section-header-wrapper {
  display: block;
}

/* Scalar pads each group with 12px spacer divs above and below; the rhythm
   here comes from the label's own margins instead. */
.scalar-app aside [class*='group/spacer-before'],
.scalar-app aside [class*='group/spacer-after'] {
  display: none;
}

/* ------------------------------------------------------ 22. Models section */

/* Scalar keeps the models past the first few behind a "Show More" button and
   reserves their height with empty, inline-height divs — hundreds of pixels of
   dead space in the middle of the section. Collapse them; expanding fills them
   with content, at which point they are no longer :empty and reappear. */
.scalar-app [id='api-1/models'] > div:empty {
  /* Not display:none — these mount when scrolled into view, and hiding them
     outright means they never do, losing the models they stand in for. */
  height: 0 !important;
  overflow: hidden;
}

/* Match the rest of the document: the section title in Sora, the model names
   left-aligned with every other section. */
.scalar-app [id='api-1/models'] .section-header {
  font-family: 'Sora', 'Inter', sans-serif;
}

/* -------------------------------- 23. Request / response panes stay dark */

/* In light mode Scalar renders the request example dark but the response pane
   white. Markdown code cards are dark in both themes, so bring these onto the
   same palette — every card that actually contains a code block. */
:root[data-theme='light'] .scalar-app .scalar-card:has(.scalar-code-block) {
  background: var(--doc-code-head) !important;
  border-color: var(--doc-code-border) !important;
  color: var(--doc-code-fg) !important;
}

:root[data-theme='light'] .scalar-app .scalar-card:has(.scalar-code-block) .scalar-card-header,
:root[data-theme='light'] .scalar-app .scalar-card:has(.scalar-code-block) .scalar-card-footer {
  background: var(--doc-code-head) !important;
  border-color: var(--doc-code-border) !important;
  color: var(--doc-code-fg) !important;
}

:root[data-theme='light'] .scalar-app .scalar-code-block,
:root[data-theme='light'] .scalar-app .scalar-code-copy-backdrop {
  background: var(--doc-code-bg) !important;
  color: var(--doc-code-fg) !important;
}

/* ------------------------------ 24. Syntax colours on always-dark surfaces */

/* Scalar's highlight palette follows the page theme, but every code surface
   here is dark in both themes — so in light mode the tokens that resolve to
   dark ink (JSON keys, class names, punctuation) went near-black on near-black.
   These are the dark theme's own values, written literally: the `--doc-*`
   tokens hold light-theme colours here, which is exactly the problem. */
:root[data-theme='light'] .scalar-app .nlo-codecard pre,
:root[data-theme='light'] .scalar-app .scalar-code-block {
  color: #e7ecf3;
}

:root[data-theme='light'] .scalar-app .nlo-codecard pre .hljs-attr,
:root[data-theme='light'] .scalar-app .nlo-codecard pre .hljs-title,
:root[data-theme='light'] .scalar-app .nlo-codecard pre .hljs-variable,
:root[data-theme='light'] .scalar-app .nlo-codecard pre .hljs-literal,
:root[data-theme='light'] .scalar-app .nlo-codecard pre .hljs-name,
:root[data-theme='light'] .scalar-app .scalar-code-block .hljs-attr,
:root[data-theme='light'] .scalar-app .scalar-code-block .hljs-title,
:root[data-theme='light'] .scalar-app .scalar-code-block .hljs-variable,
:root[data-theme='light'] .scalar-app .scalar-code-block .hljs-literal,
:root[data-theme='light'] .scalar-app .scalar-code-block .hljs-name {
  color: #f0f2f8 !important;
}

:root[data-theme='light'] .scalar-app .nlo-codecard pre .hljs-title.function_,
:root[data-theme='light'] .scalar-app .nlo-codecard pre .hljs-number,
:root[data-theme='light'] .scalar-app .scalar-code-block .hljs-title.function_,
:root[data-theme='light'] .scalar-app .scalar-code-block .hljs-number {
  color: #ff6723 !important;
}

:root[data-theme='light'] .scalar-app .nlo-codecard pre .hljs-punctuation,
:root[data-theme='light'] .scalar-app .nlo-codecard pre .hljs-meta,
:root[data-theme='light'] .scalar-app .scalar-code-block .hljs-punctuation,
:root[data-theme='light'] .scalar-app .scalar-code-block .hljs-meta {
  color: #9aa0ac !important;
}

:root[data-theme='light'] .scalar-app .nlo-codecard pre .hljs-comment,
:root[data-theme='light'] .scalar-app .scalar-code-block .hljs-comment {
  color: #6b7280 !important;
}

/* The request card's footer holds only "Ask AI Agent" and "Test Request" —
   removing it also removes the built-in try-it runner. */
.scalar-app [class*='request-card-footer'] {
  display: none !important;
}

/* -------------------------------------- 25. Collapsible sidebar groups */

/* theme.js turns each group header into a toggle; this is the affordance and
   the collapsed state. */
.scalar-app aside li[class*='sidebar-section'] > [class*='group/button']:not([class*='button-label']) {
  display: flex;
  align-items: center;
  /* No gap: the leading .scalar-sidebar-indent is zero-width, so an 8px gap only
     pushed the group label 8px right of the item text (136px vs 128px). Zeroing it
     lands the group label on the same left rail as Introduction and its children.
     The caret stays right-aligned via its own margin-left:auto. */
  gap: 0;
  cursor: pointer;
  user-select: none;
  transition: color 0.15s ease;
}

.scalar-app aside li[class*='sidebar-section'] > [class*='group/button']:hover {
  /* Group headers are the fixed hierarchy anchor — keep them at full strength on
     hover. Fading to --doc-fg-muted made the main menu look LIGHTER when hovered. */
  color: var(--doc-fg) !important;
}

.scalar-app .nlo-caret {
  margin-left: auto;
  display: inline-flex;
  width: 12px;
  height: 12px;
  opacity: 0.6;
  transition: transform 0.15s ease, opacity 0.15s ease;
}

.scalar-app .nlo-caret svg {
  width: 12px;
  height: 12px;
}

.scalar-app aside li[class*='sidebar-section']:hover .nlo-caret {
  opacity: 1;
}

/* Closed is the default once theme.js has marked the document scripted, so a
   group is never painted open and then collapsed a tick later. */
:root.nlo-ready .scalar-app aside li[class*='sidebar-section'] > ul {
  display: none;
}

:root.nlo-ready .scalar-app aside li[class*='sidebar-section'].nlo-expanded > ul {
  display: flex;
}

:root.nlo-ready .scalar-app aside li[class*='sidebar-section'] .nlo-caret {
  transform: rotate(-90deg);
}

:root.nlo-ready .scalar-app aside li[class*='sidebar-section'].nlo-expanded .nlo-caret {
  transform: rotate(0deg);
}

/* A closed group keeps its own margin, so the rhythm stays even. */
:root.nlo-ready .scalar-app aside li[class*='sidebar-section'] > [class*='group/button'] {
  margin-bottom: 0;
}

:root.nlo-ready .scalar-app aside li[class*='sidebar-section'].nlo-expanded > [class*='group/button'] {
  margin-bottom: 8px;
}

/* One left rail for every row. Scalar's .scalar-sidebar-indent adds 20px per nesting
   level: tag-group children land at 0 depth (flush), but Introduction's in-page anchors
   (Sections, Networks) sit one level deeper and were pushed 20px right — so its submenu
   looked different from every other submenu. Zero the depth spacer so all page links and
   anchors align identically. Group headers already carry a zero-width spacer, so unaffected. */
.scalar-app aside [class*='scalar-sidebar-indent'] {
  width: 0 !important;
  min-width: 0 !important;
}

/* Introduction is the only top-level PAGE sitting among the group headers, so as a leaf
   link it read muted at rest and DARKENED on hover (--doc-fg + a grey fill). Pin it to a
   fixed dark, non-shifting look so it behaves like the other main-menu items. The child
   combinator (> button) scopes this to Introduction's own row only — its submenu
   (Sections/Networks) and the group children keep the normal leaf hover/active styling. */
.scalar-app aside > ul > li:not([class*='sidebar-section']) > [class*='group/group-button'] [class*='group/button'],
.scalar-app aside > ul > li:not([class*='sidebar-section']) > [class*='group/group-button'] [class*='group/button']:hover,
.scalar-app aside > ul > li:not([class*='sidebar-section']) > [class*='group/group-button'] [class*='button-label'] {
  color: var(--doc-fg) !important;
  background: transparent !important;
  border-left-color: transparent !important;
}

/* Flattened top-level entries (Endpoints, Configuring MetaMask with L1X Network):
   a bundle-of-one section that should read as a PLAIN top-level link, not a
   collapsible section. theme.js tags these .nlo-flat when the only child repeats the
   header name. Hide the header + caret, always show the single child link. The child
   already sits on the left rail with the standard leaf hover/active styling. */
:root.nlo-ready .scalar-app aside li[class*='sidebar-section'].nlo-flat > [class*='group/button'] {
  display: none;
}
:root.nlo-ready .scalar-app aside li[class*='sidebar-section'].nlo-flat > ul {
  display: flex;
  /* The li is display:contents, so section spacing lives on the child list. Match the
     gap the other top-level rows carry between each other. */
  margin-top: 2px;
}

/* Separate the first flattened link from the last collapsible section above it
   (Crosschain → Endpoints). Only the FIRST flat entry — one preceded by a normal
   section — gets the wider gap; consecutive flat links (Endpoints → Configuring
   MetaMask) keep the tight 2px above. Roughly matches the section-to-section rhythm. */
:root.nlo-ready
  .scalar-app
  aside
  li[class*='sidebar-section']:not(.nlo-flat)
  + li[class*='sidebar-section'].nlo-flat
  > ul {
  margin-top: 24px;
}

/* ---------------------------------- 26. Three-level nav (L1X Library umbrella) */
/* The method sections (Account Methods, …) render as siblings of the L1X Library
   umbrella but read as its children: indented one level, hidden while the umbrella
   is collapsed, and each still opening to its own method pages (the third tier).
   theme.js tags them .nlo-nested / .nlo-under-collapsed and the umbrella .nlo-umbrella. */

/* Collapsed umbrella hides its nested sections entirely (any tier). */
:root.nlo-ready .scalar-app aside li[class*='sidebar-section'].nlo-under-collapsed {
  display: none;
}

/* Nested group headers (tiers 2+): read like the method page rows beneath them —
   same 14px/500, same comfortable vertical padding — so the tree looks even and
   uncramped (the base section-header rule gives 0 vertical padding, which is why the
   nested rows collided). Title-case, muted; the caret marks them as groups. */
.scalar-app aside li[class*='sidebar-section'].nlo-nested > [class*='group/button'] {
  margin: 1px 0;
  padding-top: 7px;
  padding-bottom: 7px;
  border-radius: 9px;
  text-transform: none;
  font-size: 14px;
  letter-spacing: 0;
}
.scalar-app aside li[class*='sidebar-section'].nlo-nested > [class*='group/button'] [class*='button-label'] {
  font-weight: 500;
  color: var(--doc-fg-muted);
  text-transform: none;
}
/* Hover affordance to match the leaf rows. */
.scalar-app aside li[class*='sidebar-section'].nlo-nested > [class*='group/button']:hover {
  background: var(--doc-surface-2) !important;
}
.scalar-app aside li[class*='sidebar-section'].nlo-nested > [class*='group/button']:hover [class*='button-label'] {
  color: var(--doc-fg);
}

/* Indent by depth (14px steps to keep five tiers from running off the sidebar).
   Header text ≈ padding-left + 12; leaf-row text ≈ padding-left + 14.
   depth 1 header @28 · d2 @42 · d3 @56 · d4 @70; each group's pages one step deeper. */

/* depth 2 — L1X Library (under the L1X Typescript SDK umbrella). */
.scalar-app aside li[class*='sidebar-section'].nlo-d2 > [class*='group/button'] {
  padding-left: 30px;
}
.scalar-app aside li[class*='sidebar-section'].nlo-d2 > ul li [class*='group/button']:not([class*='button-label']) {
  padding-left: 42px;
}
/* depth 3 — method groups under L1X Library (Account, Core, L1X EVM, Other Methods). */
.scalar-app aside li[class*='sidebar-section'].nlo-d3 > [class*='group/button'] {
  padding-left: 44px;
}
.scalar-app aside li[class*='sidebar-section'].nlo-d3 > ul li [class*='group/button']:not([class*='button-label']) {
  padding-left: 56px;
}
/* depth 4 — token groups under Other Methods (Native / Fungible / Non-fungible). */
.scalar-app aside li[class*='sidebar-section'].nlo-d4 > [class*='group/button'] {
  padding-left: 58px;
}
.scalar-app aside li[class*='sidebar-section'].nlo-d4 > ul li [class*='group/button']:not([class*='button-label']) {
  padding-left: 70px;
}

/* Left rail down each nested block, as in the reference. The nested <li> is display:contents
   (no box for a border), so the rail is a thin line drawn inside each nested row at its
   block's left indent; stacked rows form one continuous line (negative top/bottom closes
   the 1px inter-row margins). One rail x per visual depth. */
.scalar-app aside li[class*='sidebar-section'].nlo-nested > [class*='group/button'],
.scalar-app aside li[class*='sidebar-section'].nlo-d2 > ul > li [class*='group/button']:not([class*='button-label']),
.scalar-app aside li[class*='sidebar-section'].nlo-d3 > ul > li [class*='group/button']:not([class*='button-label']),
.scalar-app aside li[class*='sidebar-section'].nlo-d4 > ul > li [class*='group/button']:not([class*='button-label']) {
  position: relative;
}
.scalar-app aside li[class*='sidebar-section'].nlo-d2 > ul > li [class*='group/button']:not([class*='button-label'])::before,
.scalar-app aside li[class*='sidebar-section'].nlo-d3 > [class*='group/button']::before,
.scalar-app aside li[class*='sidebar-section'].nlo-d3 > ul > li [class*='group/button']:not([class*='button-label'])::before,
.scalar-app aside li[class*='sidebar-section'].nlo-d4 > [class*='group/button']::before,
.scalar-app aside li[class*='sidebar-section'].nlo-d4 > ul > li [class*='group/button']:not([class*='button-label'])::before {
  content: '';
  position: absolute;
  top: -1px;
  bottom: -1px;
  width: 1px;
  background: var(--doc-border);
}
/* rail x = one step left of the row's text, per depth. */
.scalar-app aside li[class*='sidebar-section'].nlo-d2 > ul > li [class*='group/button']:not([class*='button-label'])::before,
.scalar-app aside li[class*='sidebar-section'].nlo-d3 > [class*='group/button']::before {
  left: 30px;
}
.scalar-app aside li[class*='sidebar-section'].nlo-d3 > ul > li [class*='group/button']:not([class*='button-label'])::before,
.scalar-app aside li[class*='sidebar-section'].nlo-d4 > [class*='group/button']::before {
  left: 44px;
}
.scalar-app aside li[class*='sidebar-section'].nlo-d4 > ul > li [class*='group/button']:not([class*='button-label'])::before {
  left: 58px;
}

/* The synthetic "Other Methods" wrapper has no page of its own, so its (empty) list
   never shows and its header should never look active/hover-fillable. */
.scalar-app aside li.nlo-synthetic > ul {
  display: none !important;
}