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

@import url('https://fonts.googleapis.com/css2?family=Manrope:wght@400;500;600;700&display=swap');

: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;
}
.orion-search-bar {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  max-width: 420px;
  background: #F3F3F3;
  border-radius: 8px;
  padding: 9px 14px;
  color: #676767;
  font-size: 14px;
}

.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 via @import (a non-render-blocking network fetch), 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;
}

/* "Build for yourself / Build for others" 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;
}
.api-endpoint-card h2 {
  margin-top: 0;
}
.api-endpoint-card h3 {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: #828282;
  margin-top: var(--space-lg);
  margin-bottom: var(--space-xs);
}

.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);
}

/* 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;
}
.param-required {
  color: #9B1C1C;
  font-weight: 700;
}
.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-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 */
.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-sidebar {
    display: none !important;
  }
  .orion-header-products {
    display: none !important;
  }
  .orion-search-box {
    max-width: 200px;
  }
}

/* =============================================================
   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;
}