/* =============================================================
   Orion Bespoke Modern B2B Documentation Sheet
   Optimized lightweight CSS with zero bloat and high brand-fidelity
   ============================================================= */


:root {
  --coral-500: #D95A4C;   /* Primary Brand Accent */
  --coral-400: #EF6354;
  --ink-900: #0F0F0F;     /* Canvas Text */
  --ink-800: #1C1C1C;     /* Sidebar Dark background */
  --ink-100: #D1D1D1;
  --ink-50:  #E2E2E2;     /* Subtle borders */
  --ink-30:  #EAEAEA;     /* Soft lines */
  --ink-20:  #F8F8F8;     /* Canvas background */
  --ink-10:  #FFFFFF;     /* Cards background */

  --space-xs: 8px;   /* tight — inline gaps, badge padding */
  --space-sm: 16px;  /* paragraph-to-paragraph, list items */
  --space-md: 24px;  /* heading-to-content, card internal padding */
  --space-lg: 40px;  /* h2-to-h2 section breaks, card-to-card gap */
  --space-xl: 64px;  /* page-title to first section */
}

body {
  margin: 0;
  background: var(--ink-20);
  color: var(--ink-900);
  font-family: 'Manrope', system-ui, -apple-system, sans-serif;
  line-height: 1.5;
}

a {
  color: var(--coral-500);
  text-decoration: none;
}
a:hover {
  color: var(--coral-400);
}

/* Page Layout Wrappers */
.orion-app {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

.orion-header {
  position: sticky;
  top: 0;
  z-index: 60;
  display: flex;
  align-items: center;
  gap: 24px;
  height: 64px;
  padding: 0 24px;
  background: var(--ink-10);
  border-bottom: 1px solid var(--ink-50);
}

.orion-logo-group {
  display: flex;
  align-items: center;
  text-decoration: none;
}
.orion-logo-group img {
  height: 24px;
  display: block;
}
.orion-header .divider {
  width: 1px;
  height: 20px;
  background: var(--ink-50);
}
.orion-header-products {
  display: flex;
  align-items: center;
  gap: 18px;
  min-width: 216px;
}
.orion-header-product-link {
  font-size: 14.5px;
  font-weight: 500;
  color: var(--ink-900);
  text-decoration: none;
  padding-bottom: 2px;
  border-bottom: 2px solid transparent;
}
.orion-header-product-link.active {
  font-weight: 700;
  color: var(--coral-500);
  border-bottom-color: var(--coral-500);
}

.orion-search-box {
  flex: 1;
  display: flex;
  justify-content: center;
}
/* Algolia DocSearch, themed to the Igloo palette. These override the defaults
   in docsearch/button.css, which loads before this sheet. */
:root {
  --docsearch-font-family: 'Manrope', system-ui, sans-serif;
  --docsearch-primary-color: #D95A4C;
  --docsearch-highlight-color: #D95A4C;
  --docsearch-focus-color: #D95A4C;
  --docsearch-soft-primary-color: #FBEAE8;
  --docsearch-hit-highlight-color: #D95A4C1A;
  --docsearch-text-color: #1C1C1C;
  --docsearch-subtle-color: #E2E2E2;
  --docsearch-search-button-background: #F8F8F8;
  --docsearch-search-button-text-color: #676767;
}
.orion-search-box .DocSearch-Button {
  width: 100%;
  max-width: 420px;
}

.orion-ask-ai-btn {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 9px 16px;
  border: 1px solid #D1D1D1;
  border-radius: 999px;
  background: #FFFFFF;
  font-family: inherit;
  font-size: 14px;
  font-weight: 700;
  color: #0F0F0F;
  cursor: pointer;
}
.orion-header-cta {
  display: inline-flex;
  padding: 10px 18px;
  border-radius: 999px;
  background: #D95A4C;
  color: #FFFFFF;
  font-size: 14px;
  font-weight: 700;
  text-decoration: none;
  white-space: nowrap;
}

/* Mobile navigation: menu button, drawer product switch and backdrop.
   Hidden on desktop; the 768px media query turns them on. */
.orion-nav-toggle,
.orion-sidebar-products,
.orion-nav-backdrop {
  display: none;
}

.orion-header-actions {
  display: flex;
  align-items: center;
  gap: 10px;
  /* Right-aligns regardless of whether .orion-search-box (flex: 1) is
     present — that box is Ask AI's entrypoint and is entirely absent from
     the emitted HTML in production builds (see ShowAskAI in generator.go). */
  margin-left: auto;
}

/* Sidebar Dark Navigation */
.orion-sidebar {
  width: 240px;
  flex-shrink: 0;
  position: sticky;
  top: 114px;
  max-height: calc(100vh - 114px);
  overflow-y: auto;
  overflow-x: hidden;
  overscroll-behavior-y: contain;
  background: var(--ink-800);
  padding: 12px 0 24px;
  /* Manrope loads with font-display: swap (see the @font-face in the page head), so the
     sidebar's own text briefly renders in a fallback font before swapping in
     — a small reflow. Without this, Chrome/Firefox's CSS Scroll Anchoring
     "compensates" for that reflow by silently nudging this container's own
     scrollTop, clipping the top of whatever was showing (usually the active
     link's own label) even after JS has already set the correct scroll
     position (see initSidebarScroll in orion.js). */
  overflow-anchor: none;
}
.orion-sidebar-cat {
  font-size: 11px;
  color: #828282;
  padding: 18px 20px 6px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  font-weight: 700;
}
.orion-sidebar-link {
  display: flex;
  align-items: center;
  width: 100%;
  text-align: left;
  padding: 9px 20px 9px 17px;
  background: transparent;
  border: none;
  border-left: 3px solid transparent;
  color: rgba(255,255,255,0.72);
  font-family: inherit;
  font-size: 14.5px;
  font-weight: 500;
  cursor: pointer;
  text-decoration: none;
}
.orion-sidebar-link.active {
  background: rgba(255,255,255,0.06);
  border-left-color: var(--coral-500);
  color: #FFFFFF;
  font-weight: 700;
}

/* Content Layout Columns */
.orion-main-col {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
}
.orion-main {
  display: flex;
  justify-content: center;
  gap: 32px;
  padding: 0 32px;
}
.orion-content {
  max-width: 820px;
  width: 100%;
  min-width: 0;
  padding: 32px 0 96px;
}

.orion-content h1 {
  margin-top: 0;
  margin-bottom: var(--space-md);
}
.orion-content h2 {
  margin-top: var(--space-xl);
  margin-bottom: var(--space-sm);
}
.orion-content h2:first-of-type {
  margin-top: 0;
}
.orion-content h3 {
  margin-top: var(--space-lg);
  margin-bottom: var(--space-xs);
}
.orion-content p,
.orion-content ul,
.orion-content ol {
  margin-top: 0;
  margin-bottom: var(--space-sm);
  line-height: 1.6;
}
.sync-code-group {
  margin: var(--space-md) 0;
}
/* Inline code spans (markdown `backticks`) — code blocks inside <pre> carry
   their own inline style="" attributes from renderBlocksHTML, which always
   win over this regardless of selector specificity, so scoping to :not(pre)
   is a clarity guard rather than a functional necessity. */
.orion-content code:not(pre code) {
  font-family: ui-monospace, 'SF Mono', Menlo, monospace;
  font-size: 0.9em;
  background: #E8E8E8;
  color: #C4392E;
  padding: 2px 6px;
  border-radius: 4px;
}
/* Inside a blockquote (tinted #FDEFEE background), the neutral grey pill reads
   muddy against the pink — use a darker coral tint instead so it still pops. */
.orion-content blockquote code:not(pre code) {
  background: rgba(217, 90, 76, 0.14);
  color: #B33A2E;
}
.orion-content blockquote {
  margin: 0 0 var(--space-sm);
  padding: 10px 16px;
  border-left: 3px solid var(--coral-500);
  background: #FDEFEE;
  border-radius: 0 6px 6px 0;
  color: var(--ink-900);
}
.orion-content blockquote p {
  margin: 0;
}
.orion-content .mermaid {
  display: flex;
  justify-content: center;
  margin: var(--space-md) 0;
  padding: 20px;
  background: #FFFFFF;
  border: 1px solid #E2E2E2;
  border-radius: 8px;
  overflow-x: auto;
}

/* Table of Contents Sticky Column */
.orion-toc-aside {
  width: 200px;
  flex-shrink: 0;
  position: sticky;
  top: 114px;
  height: calc(100vh - 114px);
  padding: 36px 0;
  overflow-y: auto;
}
.orion-toc-title {
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: #828282;
}
.orion-toc-links {
  display: flex;
  flex-direction: column;
  gap: 2px;
  margin-top: 10px;
}
.orion-toc-link {
  font-size: 13.5px;
  color: #494949;
  padding: 5px 0;
  line-height: 1.4;
  text-decoration: none;
}
.orion-toc-link-sub {
  padding-left: 14px;
  font-size: 12.5px;
}
.orion-toc-link:hover {
  color: var(--coral-500);
}

/* Beautiful custom cards/tables styling */
table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  margin: var(--space-md) 0;
  background: var(--ink-10);
  border: 1px solid var(--ink-50);
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 1px 3px rgba(0,0,0,0.04);
}
th {
  text-align: left;
  padding: 12px 20px;
  background: #FBFBFB;
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: #828282;
  border-bottom: 1px solid var(--ink-30);
}
td {
  padding: 16px 20px;
  font-size: 14px;
  color: #494949;
  border-bottom: 1px solid var(--ink-30);
  line-height: 1.5;
}
tr:last-child td {
  border-bottom: none;
}

/* "Individual account / Partner account" comparison table: column-tinted
   via CSS so the markdown source can stay a plain, clean GFM table. */
.build-compare-table td:first-child {
  font-weight: 700;
  color: #1C1C1C;
}
.build-compare-table th:nth-child(2),
.build-compare-table td:nth-child(2) {
  background: #FFF5F3;
}
.build-compare-table th:nth-child(3),
.build-compare-table td:nth-child(3) {
  background: #F8F8F8;
}
.build-compare-table th:nth-child(2) {
  color: #D95A4C;
  border-bottom: 2px solid #D95A4C;
}
.build-compare-table th:nth-child(3) {
  color: #1C1C1C;
  border-bottom: 2px solid #1C1C1C;
}

/* API-reference endpoint cards */
.api-endpoint-card {
  border: 1px solid var(--ink-50);
  background: var(--ink-10);
  border-radius: 8px;
  padding: var(--space-md);
  margin: var(--space-lg) 0;
}
/* First heading = endpoint title (h3 on x-tagGroups pages). */
.api-endpoint-card > h2:first-child,
.api-endpoint-card > h3:first-child {
  margin-top: 0;
  font-size: 1.5em;
}
/* Section headings directly inside an endpoint card (Path/Query/Body Parameters,
   Responses, Request Example). Ungrouped pages render them as h3, x-tagGroups
   pages as h4, so both levels get the same style. */
.api-endpoint-card > h3:not(:first-child),
.api-endpoint-card > h4 {
  font-size: 22px;
  font-weight: 700;
  color: #1C1C1C;
  letter-spacing: -0.01em;
  margin-top: var(--space-md);
  margin-bottom: var(--space-sm);
}

.endpoint-badge-row {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: var(--space-sm);
}
.method-badge {
  display: inline-flex;
  align-items: center;
  padding: 4px 12px;
  border-radius: 999px;
  font-size: 12.5px;
  font-weight: 700;
  border: 1px solid transparent;
}
.method-badge-get {
  background: #E1EFFE;
  color: #1E429F;
  border-color: #C3DDFD;
}
.method-badge-post {
  background: #DEF7EC;
  color: #03543F;
  border-color: #BCF0DA;
}
.method-badge-patch {
  background: #FEF3C7;
  color: #92400E;
  border-color: #FDE68A;
}
.method-badge-delete {
  background: #FDE8E8;
  color: #9B1C1C;
  border-color: #F8B4B4;
}
.endpoint-path {
  font-family: ui-monospace, 'SF Mono', Menlo, monospace;
  font-size: 13.5px;
  color: var(--ink-900);
  min-width: 0;
  overflow-wrap: anywhere;
}
.endpoint-base {
  opacity: 0.8;
}

/* API Reference: Content-Type row, parameter tables, response badges.
   Built by the generator from a plain-markdown convention (see
   styleAPIReferencePage in pkg/docs/generator.go) so endpoint pages stay
   clean GFM markdown in their .md/llms.txt form. */
.content-type-row {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 14px;
}
.content-type-label {
  font-size: 13.5px;
  color: #676767;
  font-weight: 500;
}
.content-type-pill {
  padding: 3px 10px;
  border-radius: 6px;
  font-size: 12.5px;
  font-family: ui-monospace, 'SF Mono', Menlo, monospace;
  font-weight: 700;
  background: #EAEAEA;
  color: #1C1C1C;
  border: 1px solid #D1D1D1;
}
.param-table td:first-child {
  font-family: ui-monospace, 'SF Mono', Menlo, monospace;
  font-weight: 700;
  color: #1C1C1C;
}
.orion-content .param-name {
  font-family: ui-monospace, 'SF Mono', Menlo, monospace;
  font-size: 15px;
  font-weight: 700;
  color: #1C1C1C;
  background: none;
  border: none;
  padding: 0;
}
.param-type {
  margin-left: 6px;
  color: #676767;
  font-size: 14px;
}
.orion-content .param-tree,
.orion-content .param-tree ul {
  list-style: none;
  margin: 0;
  padding-left: 18px;
  border-left: 1px solid #D1D1D1;
}
.orion-content .param-tree > li {
  margin-left: 0;
}
.orion-content .param-tree li li {
  margin: 0;
  padding: 2px 0;
}
.orion-content .param-tree li {
  position: relative;
  list-style: none;
  font-size: 14px;
  line-height: 1.6;
  padding: 6px 0;
  margin: 0 0 12px;
}
.orion-content .param-tree li::before {
  content: "";
  position: absolute;
  left: -18px;
  top: 15px;
  width: 14px;
  border-top: 1px solid #D1D1D1;
}
.orion-content .param-tree .param-name {
  font-size: 14px;
}
.orion-content .param-tree .param-type {
  font-size: 14px;
}
.param-required {
  color: #9B1C1C;
  font-weight: 700;
}
.orion-content .param-tree .param-required {
  margin-left: 6px;
}
.param-internal {
  position: relative;
  display: inline-block;
  margin-left: 6px;
  padding: 0 8px;
  border-radius: 4px;
  /* Base color stays under the moving highlight, so no frame shows a bare badge. */
  background: rgba(217, 90, 76, 0.85) linear-gradient(90deg, transparent 40%, rgba(255, 255, 255, 0.45) 50%, transparent 60%) no-repeat;
  background-size: 250% 100%;
  animation: param-internal-shimmer 1.8s ease-in-out infinite;
  color: #FFFFFF;
  font-size: 12px;
  font-weight: 700;
  line-height: 20px;
  vertical-align: 1px;
  cursor: help;
  outline-offset: 2px;
}
/* Rendered only on hover or focus: even invisible, an absolutely positioned
   tooltip near the right edge widens the page on phones. */
.param-internal::after {
  content: attr(data-tooltip);
  display: none;
  position: absolute;
  bottom: calc(100% + 6px);
  left: 50%;
  transform: translateX(-50%) translateY(4px);
  width: max-content;
  max-width: min(240px, 70vw);
  padding: 6px 10px;
  border-radius: 6px;
  background: #1C1C1C;
  color: #FFFFFF;
  font-size: 12px;
  font-weight: 400;
  line-height: 1.4;
  white-space: normal;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.15s ease, transform 0.15s ease;
  z-index: 10;
}
.param-internal:hover::after,
.param-internal:focus-visible::after {
  display: block;
  opacity: 1;
  transform: translateX(-50%);
}
.orion-content blockquote.internal-notice {
  background: #FDEFEE linear-gradient(90deg, transparent 40%, rgba(217, 90, 76, 0.16) 50%, transparent 60%) no-repeat;
  background-size: 250% 100%;
  animation: param-internal-shimmer 1.8s ease-in-out infinite;
}
@keyframes param-internal-shimmer {
  0% { background-position: 100% 0; }
  100% { background-position: 0% 0; }
}
@media (prefers-reduced-motion: reduce) {
  .param-internal,
  .orion-content blockquote.internal-notice {
    animation: none;
  }
}
.response-badges {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 12px;
}
.response-descriptions {
  margin-bottom: 16px;
}
.response-description-panel {
  margin: 0;
  color: #676767;
  font-size: 14px;
  line-height: 1.6;
}
.response-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 12px;
  border-radius: 999px;
  font-size: 12.5px;
  font-weight: 700;
  border: 1px solid transparent;
  cursor: pointer;
  user-select: none;
}
.response-badge.active {
  box-shadow: 0 0 0 2px rgba(28, 28, 28, 0.55);
}
.response-body-label {
  margin: var(--space-sm) 0 8px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: #828282;
}
.response-example-panel {
  margin-bottom: var(--space-sm);
}
.response-example-empty p {
  margin: 0;
  padding: 14px 16px;
  background: #F8F8F8;
  border: 1px dashed var(--ink-100);
  border-radius: 8px;
  color: #676767;
  font-size: 13.5px;
}
.response-badge-2xx {
  background: #DEF7EC;
  color: #03543F;
  border-color: #BCF0DA;
}
.response-badge-204 {
  background: #E1EFFE;
  color: #1E429F;
  border-color: #C3DDFD;
}
.response-badge-4xx {
  background: #FDE8E8;
  color: #9B1C1C;
  border-color: #F8B4B4;
}
.response-badge-other {
  background: #F8F8F8;
  color: #494949;
  border-color: #E2E2E2;
}

/* Global Lang Sticky Bar Selection */
.global-lang-bar {
  display: flex;
  align-items: center;
  gap: 4px;
  background: var(--ink-10);
  border-bottom: 1px solid var(--ink-50);
  padding: 0 24px;
  position: sticky;
  top: 64px;
  z-index: 50;
}
.global-lang-btn {
  background: none;
  border: none;
  padding: 12px 16px;
  font-family: inherit;
  font-size: 14px;
  font-weight: 700;
  color: #676767;
  cursor: pointer;
  border-bottom: 2px solid transparent;
}
.global-lang-btn.active {
  color: var(--coral-500);
  border-bottom-color: var(--coral-500);
}
.global-lang-btn:hover {
  color: var(--ink-900);
}

/* Per-block language tabs and copy button inside a sync-code-group */
/* The tab list scrolls sideways when it is wider than the code block, so
   every language stays reachable on narrow screens. */
.lang-tabs-header > div:first-child {
  min-width: 0;
  overflow-x: auto;
  scrollbar-width: none;
}
.lang-tabs-header > div:first-child::-webkit-scrollbar {
  display: none;
}
.lang-tabs-header .tab-btn {
  flex-shrink: 0;
}
.tab-btn,
.global-lang-btn {
  transition: color 120ms ease, border-color 120ms ease;
}
.tab-btn:hover {
  color: #FFFFFF !important;
}
.code-copy-btn:hover {
  color: #FFFFFF !important;
}

/* Icon crossfade: both icons occupy the same box, only opacity animates */
.copy-icon {
  opacity: 0;
  transition: opacity 120ms ease;
}
.copy-icon-default {
  opacity: 1;
}
.code-copy-btn.copied .copy-icon-default {
  opacity: 0;
}
.code-copy-btn.copied .copy-icon-check {
  opacity: 1;
  color: #a6e3a1;
}

/* Lang blocks sit stacked in the same grid cell (see .sync-lang-track); only opacity crossfades, no display toggle.
   Default to showing the first block before JS assigns .show/.hidden on load, avoiding a stacked-text flash. */
.sync-lang-block {
  opacity: 0;
  pointer-events: none;
  transition: opacity 120ms ease;
}
.sync-lang-block:first-of-type {
  opacity: 1;
  pointer-events: auto;
}
.hidden {
  opacity: 0 !important;
  pointer-events: none !important;
}
.show {
  opacity: 1 !important;
  pointer-events: auto !important;
}

@keyframes dc-fade {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: none; }
}

/* =============================================================
   Catppuccin Mocha Syntax Highlighting Color Overrides
   ============================================================= */

/* Container background & general token color */
code[class*="language-"],
pre[class*="language-"] {
  color: #cdd6f4 !important;
  text-shadow: none !important;
}
pre[class*="language-"] {
  background: #1e1e2e !important;
  border: 1px solid rgba(255, 255, 255, 0.05) !important;
  max-width: 100%;
  overflow-x: auto;
}

/* Comments, prolog, doctype, cdata */
.token.comment,
.token.prolog,
.token.doctype,
.token.cdata {
  color: #6c7086 !important;
  font-style: italic !important;
}

/* Punctuation */
.token.punctuation {
  color: #9399b2 !important;
}

/* Namespace */
.token.namespace {
  opacity: .7;
}

/* Properties, tags, booleans, numbers, constants, symbols, deleted */
.token.property,
.token.tag,
.token.boolean,
.token.number,
.token.constant,
.token.symbol,
.token.deleted {
  color: #fab387 !important;
}

/* Selectors, attribute names, strings, characters, builtins, inserted */
.token.selector,
.token.attr-name,
.token.string,
.token.char,
.token.builtin,
.token.inserted {
  color: #a6e3a1 !important;
}

/* Operators, entities, URLs, CSS strings */
.token.operator,
.token.entity,
.token.url,
.language-css .token.string,
.style .token.string {
  color: #89dceb !important;
  background: none !important;
}

/* Keywords, attributes, values, CSS values */
.token.atrule,
.token.attr-value,
.token.keyword {
  color: #cba6f7 !important;
  font-weight: bold !important;
}

/* Functions, class names */
.token.function,
.token.class-name {
  color: #89b4fa !important;
}

/* Regexes, important flags, variables */
.token.regex,
.token.important,
.token.variable {
  color: #f5e0dc !important;
}

/* Bold and italic markup states */
.token.important,
.token.bold {
  font-weight: bold !important;
}
.token.italic {
  font-style: italic !important;
}

/* Entity cursor map helper */
.token.entity {
  cursor: help;
}

/* Responsive Media Queries */
@media (max-width: 1024px) {
  .orion-toc-aside {
    display: none !important;
  }
  .orion-main {
    padding: 0 16px;
  }
}

@media (max-width: 768px) {
  .orion-header {
    gap: 12px;
    padding: 0 16px;
  }
  .orion-header .divider,
  .orion-header-products {
    display: none !important;
  }
  .orion-nav-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 40px;
    height: 40px;
    margin-left: -8px;
    padding: 0;
    border: none;
    border-radius: 8px;
    background: transparent;
    color: var(--ink-900);
    cursor: pointer;
  }
  /* Search collapses to a 40px icon next to the actions; DocSearch's own
     button keeps a 56px minimum that overlapped Ask AI on 375px screens. */
  .orion-search-box {
    flex: 0 0 auto;
    margin-left: auto;
  }
  .orion-search-box .DocSearch-Button {
    width: 40px;
    min-width: 0;
    height: 40px;
    margin: 0;
    padding: 0;
    justify-content: center;
  }
  .orion-header-actions {
    margin-left: 0;
  }
  .orion-header-cta {
    padding: 8px 14px;
    font-size: 13px;
  }
  .orion-ask-ai-btn {
    padding: 8px;
  }
  .orion-ask-ai-label {
    display: none;
  }

  /* The sidebar becomes a drawer under the header. The backdrop sits under
     the header too, so the menu button stays reachable to close it. */
  .orion-sidebar {
    position: fixed;
    left: 0;
    bottom: 0;
    z-index: 58;
    width: min(280px, 85vw);
    max-height: none !important;
    transform: translateX(-100%);
    visibility: hidden;
    transition: transform 200ms ease, visibility 200ms;
  }
  body.nav-open .orion-sidebar {
    transform: none;
    visibility: visible;
  }
  body.nav-open .orion-nav-backdrop {
    display: block;
    position: fixed;
    inset: 0;
    z-index: 55;
    background: rgba(28, 28, 28, 0.5);
  }
  body.nav-open {
    overflow: hidden;
  }
  .orion-sidebar-products {
    display: flex;
    gap: 8px;
    padding: 4px 16px 12px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  }
  .orion-sidebar-product {
    flex: 1;
    padding: 8px 0;
    border-radius: 6px;
    color: rgba(255, 255, 255, 0.72);
    font-size: 14px;
    font-weight: 600;
    text-align: center;
    text-decoration: none;
  }
  .orion-sidebar-product.active {
    background: rgba(255, 255, 255, 0.08);
    color: var(--coral-500);
    font-weight: 700;
  }

  /* Tighter table cells, and cells and inline code may wrap anywhere, so
     tables shrink to the screen instead of widening the page. */
  th {
    padding: 10px 12px;
  }
  td {
    padding: 12px;
  }
  th,
  td,
  .orion-content code:not(pre code) {
    overflow-wrap: anywhere;
  }

  /* Language tabs scroll sideways instead of widening the page. */
  .global-lang-bar {
    padding: 0 8px;
    overflow-x: auto;
    scrollbar-width: none;
  }
  .global-lang-bar::-webkit-scrollbar {
    display: none;
  }
  .global-lang-btn {
    flex-shrink: 0;
    padding: 12px;
  }
}

/* Narrow phones: show only the igloo mark by cropping the logo to its left
   24px. Staging (Ask AI present) needs this sooner than production. */
@media (max-width: 400px) {
  .orion-header:has(.orion-ask-ai-btn) .orion-logo-group img {
    width: 24px;
    object-fit: cover;
    object-position: left center;
  }
}
@media (max-width: 340px) {
  .orion-logo-group img {
    width: 24px;
    object-fit: cover;
    object-position: left center;
  }
}

@media (max-width: 768px) and (prefers-reduced-motion: reduce) {
  .orion-sidebar {
    transition: none;
  }
}

/* =============================================================
   Anchor Scroll Offset & Section Border Glow on Target Navigation
   ============================================================= */

html {
  scroll-behavior: smooth;
}

:target,
h1[id],
h2[id],
h3[id],
h4[id],
.api-endpoint-card,
[id] {
  scroll-margin-top: 165px;
}

/* Coral border glow animation when section or endpoint card is targeted (200ms delay, 1.5s duration) */
@keyframes sectionGlow {
  0% {
    border-color: var(--ink-50);
    box-shadow: 0 0 0 0 rgba(217, 90, 76, 0);
  }
  25% {
    border-color: var(--coral-500);
    box-shadow: 0 0 0 5px rgba(217, 90, 76, 0.4), 0 8px 24px rgba(217, 90, 76, 0.2);
  }
  70% {
    border-color: var(--coral-500);
    box-shadow: 0 0 0 3px rgba(217, 90, 76, 0.25), 0 4px 16px rgba(217, 90, 76, 0.1);
  }
  100% {
    border-color: var(--coral-500);
    box-shadow: 0 0 0 2px rgba(217, 90, 76, 0.15);
  }
}

.api-endpoint-card:has(:target),
.api-endpoint-card:target {
  animation: sectionGlow 1.5s cubic-bezier(0.2, 0, 0, 1) 200ms forwards;
}

/* Standalone heading target indicator */
h1:target,
h2:target,
h3:target,
h4:target {
  color: var(--coral-500);
  border-left: 4px solid var(--coral-500);
  padding-left: 12px;
  margin-left: -16px;
  transition: border-left 300ms ease, padding-left 300ms ease, color 300ms ease;
}