/*
 * customer-docs-theme.css
 * Brand-aligned light theme for the Raxx customer docs site (docs.raxx.app).
 *
 * Design direction: Confidence Engine (locked 2026-04-25).
 * Color tokens sourced from frontend/trademaster_ui/src/styles/brand.css.
 * Typography: system-ui stacks only — no external font imports.
 * Contrast: all body text and interactive labels verified WCAG AA (4.5:1 min).
 *
 * No JavaScript dependencies.
 * No broker vendor names in comments, class names, or generated text.
 */

/* =========================================================================
   1. DESIGN TOKENS (light-theme overrides of brand.css)
   ========================================================================= */

:root {
  /* Surface palette — snow-first (field-guide aesthetic) */
  --docs-bg:         #F5F3EF;   /* cream off-white; warmer than --raxx-snow */
  --docs-bg-surface: #FFFFFF;   /* card, code block, table surfaces */
  --docs-bg-subtle:  #EDEAE4;   /* zebra rows, hover states */
  --docs-sidebar-bg: #EDF0ED;   /* sidebar — very light moss-tinted panel */
  --docs-sidebar-active-bg: #D4E8D3; /* active nav item background */

  /* Text */
  --docs-fg:         #0B0F14;   /* --raxx-ink — primary body text; 17.3:1 on cream */
  --docs-fg-2:       #374151;   /* --raxx-n-700 — secondary body, captions; 9.3:1 */
  --docs-fg-muted:   #6B7280;   /* --raxx-n-500 — meta, breadcrumbs; 4.6:1 on snow */
  --docs-fg-muted-cream: #5C6470; /* adjusted muted for cream bg; 4.5:1 */

  /* Brand accents */
  --docs-accent:     #4A7249;   /* darkened moss — body links; 4.99:1 on cream */
  --docs-accent-hover: #3D6B3C; /* deeper moss on hover; 5.63:1 on cream */
  --docs-accent-display: #5B8C5A; /* --raxx-moss — H1/H2 headings; large text AA */
  --docs-border:     #D9D4CB;   /* warm gray border; harmonizes with cream */
  --docs-border-light: #E6E8EC; /* --raxx-n-100 — table inner borders */

  /* Callout fills */
  --docs-callout-info-bg:    #D6EDD9;
  --docs-callout-info-fg:    #1e3a2f;
  --docs-callout-info-border: #5B8C5A;
  --docs-callout-warn-bg:    #FDF3DC;
  --docs-callout-warn-fg:    #4a2e0a;
  --docs-callout-warn-border: #B08D57;
  --docs-callout-danger-bg:  #FDDADA;
  --docs-callout-danger-fg:  #5a0e10;
  --docs-callout-danger-border: #E5484D;

  /* Code */
  --docs-code-bg:    #EEF0F3;   /* inline code background */
  --docs-code-fg:    #374151;   /* --raxx-n-700; 9.03:1 on code-bg */
  --docs-pre-bg:     #0B0F14;   /* --raxx-ink — fenced code block (dark island) */
  --docs-pre-fg:     #F7F8FA;   /* --raxx-snow */

  /* Typography — system stacks, no external imports */
  --docs-font-sans:  ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont,
                     "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --docs-font-display: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont,
                       "Segoe UI", sans-serif;
  --docs-font-mono:  ui-monospace, "SF Mono", "Cascadia Code", Menlo,
                     Consolas, "Courier New", monospace;

  /* Type scale */
  --docs-fs-h1:    2rem;       /* 32px */
  --docs-fs-h2:    1.5rem;     /* 24px */
  --docs-fs-h3:    1.25rem;    /* 20px */
  --docs-fs-h4:    1.0625rem;  /* 17px */
  --docs-fs-body:  1rem;       /* 16px */
  --docs-fs-sm:    0.875rem;   /* 14px */
  --docs-fs-xs:    0.75rem;    /* 12px */
  --docs-fs-mono:  0.875rem;   /* 14px */

  /* Spacing */
  --docs-space-1:  4px;
  --docs-space-2:  8px;
  --docs-space-3:  12px;
  --docs-space-4:  16px;
  --docs-space-5:  24px;
  --docs-space-6:  32px;
  --docs-space-7:  48px;
  --docs-space-8:  64px;

  /* Radius */
  --docs-radius-sm: 4px;
  --docs-radius:    6px;
  --docs-radius-lg: 10px;

  /* Layout */
  --docs-sidebar-width:  260px;
  --docs-content-max:    720px;
  --docs-page-max:       1160px;
  --docs-content-pad:    var(--docs-space-7);
}


/* =========================================================================
   2. RESET + BASE
   ========================================================================= */

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  font-size: 16px;
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  padding: 0;
  font-family: var(--docs-font-sans);
  font-size: var(--docs-fs-body);
  line-height: 1.65;
  color: var(--docs-fg);
  background-color: var(--docs-bg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

img,
video,
svg {
  max-width: 100%;
  height: auto;
  display: block;
}

hr {
  border: none;
  border-top: 1px solid var(--docs-border);
  margin: var(--docs-space-7) 0;
}


/* =========================================================================
   3. TYPOGRAPHY — HEADINGS
   ========================================================================= */

h1,
h2,
h3,
h4,
h5,
h6 {
  font-family: var(--docs-font-display);
  font-weight: 600;
  line-height: 1.25;
  margin-top: var(--docs-space-7);
  margin-bottom: var(--docs-space-3);
  letter-spacing: -0.01em;
  color: var(--docs-fg);
}

h1 {
  font-size: var(--docs-fs-h1);
  font-weight: 700;
  letter-spacing: -0.025em;
  color: var(--docs-fg);
  margin-top: 0;
  border-bottom: 2px solid var(--docs-border);
  padding-bottom: var(--docs-space-4);
  margin-bottom: var(--docs-space-5);
}

h1 .docs-accent-word {
  color: var(--docs-accent-display);
}

h2 {
  font-size: var(--docs-fs-h2);
  font-weight: 600;
  color: var(--docs-accent-display);   /* moss for section headings */
  border-bottom: 1px solid var(--docs-border-light);
  padding-bottom: var(--docs-space-2);
  margin-bottom: var(--docs-space-4);
}

h3 {
  font-size: var(--docs-fs-h3);
  font-weight: 600;
  color: var(--docs-fg);
}

h4 {
  font-size: var(--docs-fs-h4);
  font-weight: 600;
  color: var(--docs-fg-2);
}

h5,
h6 {
  font-size: var(--docs-fs-sm);
  font-weight: 600;
  color: var(--docs-fg-muted-cream);
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

/* First heading on a page gets reduced top margin */
.docs-content > h1:first-child,
.docs-content > h2:first-child {
  margin-top: 0;
}


/* =========================================================================
   4. BODY TEXT + INLINE ELEMENTS
   ========================================================================= */

p {
  margin: 0 0 var(--docs-space-4);
  color: var(--docs-fg);
}

strong,
b {
  font-weight: 600;
  color: var(--docs-fg);
}

em,
i {
  font-style: italic;
}

small {
  font-size: var(--docs-fs-sm);
  color: var(--docs-fg-muted-cream);
}

/* =========================================================================
   5. LINKS
   ========================================================================= */

a {
  color: var(--docs-accent);          /* #4A7249 — 4.99:1 on cream — WCAG AA */
  text-decoration: underline;
  text-underline-offset: 2px;
  text-decoration-thickness: 1px;
  transition: color 0.12s ease;
}

a:hover {
  color: var(--docs-accent-hover);    /* #3D6B3C — 5.63:1 on cream */
  text-decoration-thickness: 2px;
}

a:focus-visible {
  outline: 2px solid var(--docs-accent);
  outline-offset: 2px;
  border-radius: var(--docs-radius-sm);
}

/* Nav links — override base link style */
nav a,
.docs-sidebar a {
  text-decoration: none;
}


/* =========================================================================
   6. INLINE CODE + FENCED CODE BLOCKS
   ========================================================================= */

code {
  font-family: var(--docs-font-mono);
  font-size: 0.9em;
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1;
  background-color: var(--docs-code-bg);
  color: var(--docs-code-fg);          /* #374151 on #EEF0F3 — 9.03:1 */
  padding: 0.15em 0.4em;
  border-radius: var(--docs-radius-sm);
  border: 1px solid var(--docs-border-light);
  word-break: break-word;
}

pre {
  background-color: var(--docs-pre-bg);   /* dark island on light page */
  color: var(--docs-pre-fg);
  border-radius: var(--docs-radius-lg);
  padding: var(--docs-space-5);
  overflow-x: auto;
  margin: var(--docs-space-5) 0;
  line-height: 1.55;
  -webkit-overflow-scrolling: touch;
}

pre code {
  font-size: var(--docs-fs-mono);
  background: none;
  border: none;
  color: inherit;
  padding: 0;
  word-break: normal;
  white-space: pre;
}

/* Scrollbar styling for code blocks — webkit */
pre::-webkit-scrollbar {
  height: 6px;
}

pre::-webkit-scrollbar-track {
  background: #1F2732;
  border-radius: 3px;
}

pre::-webkit-scrollbar-thumb {
  background: #374151;
  border-radius: 3px;
}

pre::-webkit-scrollbar-thumb:hover {
  background: #4A7249;
}


/* =========================================================================
   7. TABLES
   ========================================================================= */

.docs-content table,
table.docs-table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--docs-fs-sm);
  margin: var(--docs-space-5) 0;
  border-radius: var(--docs-radius);
  overflow: hidden;
  border: 1px solid var(--docs-border);
}

.docs-content th,
table.docs-table th {
  background-color: var(--docs-border-light);  /* --raxx-n-100 */
  color: var(--docs-fg);
  font-weight: 600;
  text-align: left;
  padding: var(--docs-space-3) var(--docs-space-4);
  border-bottom: 2px solid var(--docs-border);
  white-space: nowrap;
}

.docs-content td,
table.docs-table td {
  padding: var(--docs-space-3) var(--docs-space-4);
  border-bottom: 1px solid var(--docs-border-light);
  color: var(--docs-fg);
  vertical-align: top;
}

/* Zebra stripe */
.docs-content tr:nth-child(even) td,
table.docs-table tr:nth-child(even) td {
  background-color: var(--docs-bg-subtle);
}

.docs-content tr:last-child td,
table.docs-table tr:last-child td {
  border-bottom: none;
}

.docs-content tr:hover td,
table.docs-table tr:hover td {
  background-color: var(--docs-sidebar-active-bg);
}

/* Numeric columns */
td.num,
th.num {
  font-family: var(--docs-font-mono);
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1;
  text-align: right;
}

/* Responsive table wrapper — prevents layout breakage on small screens */
.table-wrap {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  margin: var(--docs-space-5) 0;
  border-radius: var(--docs-radius);
  border: 1px solid var(--docs-border);
}

.table-wrap table.docs-table,
.table-wrap .docs-content table {
  margin: 0;
  border: none;
  border-radius: 0;
}


/* =========================================================================
   8. BLOCKQUOTES + CALLOUTS
   ========================================================================= */

blockquote {
  margin: var(--docs-space-5) 0;
  padding: var(--docs-space-4) var(--docs-space-5);
  border-left: 3px solid var(--docs-accent-display);
  background-color: var(--docs-callout-info-bg);
  color: var(--docs-callout-info-fg);
  border-radius: 0 var(--docs-radius) var(--docs-radius) 0;
  font-size: var(--docs-fs-sm);
  line-height: 1.6;
}

blockquote p {
  margin: 0;
  color: inherit;
}

blockquote > * + * {
  margin-top: var(--docs-space-3);
}

/* Callout variants — .callout.[info|warning|danger] */
.callout {
  margin: var(--docs-space-5) 0;
  padding: var(--docs-space-4) var(--docs-space-5);
  border-left: 3px solid;
  border-radius: 0 var(--docs-radius) var(--docs-radius) 0;
  font-size: var(--docs-fs-sm);
  line-height: 1.6;
}

.callout .callout-title {
  font-weight: 700;
  font-size: var(--docs-fs-sm);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin-bottom: var(--docs-space-2);
}

.callout.info {
  background-color: var(--docs-callout-info-bg);    /* #D6EDD9 */
  color: var(--docs-callout-info-fg);               /* #1e3a2f — 9.98:1 on bg */
  border-color: var(--docs-callout-info-border);
}

.callout.warning {
  background-color: var(--docs-callout-warn-bg);    /* #FDF3DC */
  color: var(--docs-callout-warn-fg);               /* #4a2e0a — 11.28:1 on bg */
  border-color: var(--docs-callout-warn-border);
}

.callout.danger {
  background-color: var(--docs-callout-danger-bg);  /* #FDDADA */
  color: var(--docs-callout-danger-fg);             /* #5a0e10 — 10.78:1 on bg */
  border-color: var(--docs-callout-danger-border);
}

.callout p {
  margin: 0;
  color: inherit;
}

.callout > * + * {
  margin-top: var(--docs-space-2);
}


/* =========================================================================
   9. DETAILS / SUMMARY (collapsible sections)
   ========================================================================= */

details {
  margin: var(--docs-space-4) 0;
  border: 1px solid var(--docs-border);
  border-radius: var(--docs-radius);
  background-color: var(--docs-bg-surface);
  overflow: hidden;
}

details + details {
  margin-top: var(--docs-space-2);
}

summary {
  padding: var(--docs-space-3) var(--docs-space-4);
  font-weight: 600;
  font-size: var(--docs-fs-sm);
  color: var(--docs-fg);
  cursor: pointer;
  list-style: none;
  display: flex;
  align-items: center;
  gap: var(--docs-space-2);
  user-select: none;
  border-bottom: 1px solid transparent;
  transition: background-color 0.1s ease;
}

summary::-webkit-details-marker {
  display: none;
}

summary::before {
  content: "";
  display: inline-block;
  width: 0;
  height: 0;
  border-top: 5px solid transparent;
  border-bottom: 5px solid transparent;
  border-left: 7px solid var(--docs-accent);
  transition: transform 0.15s ease;
  flex-shrink: 0;
}

details[open] summary::before {
  transform: rotate(90deg);
}

summary:hover {
  background-color: var(--docs-bg-subtle);
}

details[open] summary {
  border-bottom-color: var(--docs-border-light);
}

details > *:not(summary) {
  padding: var(--docs-space-4);
}

details > p:first-of-type,
details > *:not(summary):first-child {
  padding-top: var(--docs-space-4);
}

details[open] > *:not(summary) {
  animation: docs-expand 0.15s ease;
}

@keyframes docs-expand {
  from { opacity: 0; transform: translateY(-4px); }
  to   { opacity: 1; transform: translateY(0); }
}


/* =========================================================================
   10. LISTS
   ========================================================================= */

ul,
ol {
  padding-left: var(--docs-space-6);
  margin: 0 0 var(--docs-space-4);
}

li {
  margin-bottom: var(--docs-space-1);
  color: var(--docs-fg);
}

li > ul,
li > ol {
  margin-top: var(--docs-space-1);
  margin-bottom: 0;
}

/* Tighter list inside a callout */
.callout ul,
.callout ol {
  padding-left: var(--docs-space-5);
  margin: var(--docs-space-2) 0 0;
}


/* =========================================================================
   11. PAGE LAYOUT — TOP NAV
   ========================================================================= */

.docs-topnav {
  position: sticky;
  top: 0;
  z-index: 100;
  background-color: var(--docs-bg-surface);
  border-bottom: 1px solid var(--docs-border);
  height: 56px;
  display: flex;
  align-items: center;
}

.docs-topnav-inner {
  max-width: var(--docs-page-max);
  margin: 0 auto;
  padding: 0 var(--docs-space-5);
  display: flex;
  align-items: center;
  gap: var(--docs-space-5);
  width: 100%;
}

.docs-topnav .docs-wordmark {
  font-family: var(--docs-font-display);
  font-weight: 700;
  font-size: 18px;
  letter-spacing: -0.02em;
  color: var(--docs-fg);
  text-decoration: none;
  white-space: nowrap;
}

.docs-topnav .docs-wordmark-suffix {
  font-weight: 400;
  color: var(--docs-fg-muted-cream);
  font-size: var(--docs-fs-sm);
  margin-left: var(--docs-space-2);
}

.docs-topnav-links {
  display: flex;
  align-items: center;
  gap: var(--docs-space-5);
  margin-left: auto;
}

.docs-topnav-links a {
  color: var(--docs-fg-2);
  font-size: var(--docs-fs-sm);
  font-weight: 500;
  text-decoration: none;
  transition: color 0.12s ease;
}

.docs-topnav-links a:hover {
  color: var(--docs-accent);
}

.docs-topnav-links a.active {
  color: var(--docs-accent);
  font-weight: 600;
}

/* Mobile hamburger toggle — hidden by default */
.docs-nav-toggle {
  display: none;
  background: none;
  border: none;
  padding: var(--docs-space-2);
  cursor: pointer;
  color: var(--docs-fg);
  margin-left: auto;
}

.docs-nav-toggle svg {
  display: block;
  width: 20px;
  height: 20px;
}


/* =========================================================================
   12. PAGE LAYOUT — SIDEBAR + CONTENT GRID
   ========================================================================= */

.docs-layout {
  max-width: var(--docs-page-max);
  margin: 0 auto;
  padding: 0 var(--docs-space-5);
  display: grid;
  grid-template-columns: var(--docs-sidebar-width) 1fr;
  gap: var(--docs-space-7);
  align-items: start;
  min-height: calc(100vh - 56px);
}

.docs-sidebar {
  position: sticky;
  top: 72px;   /* topnav height + gap */
  max-height: calc(100vh - 88px);
  overflow-y: auto;
  background-color: transparent;
  padding: var(--docs-space-6) 0 var(--docs-space-7);
  scrollbar-width: thin;
  scrollbar-color: var(--docs-border) transparent;
}

.docs-sidebar::-webkit-scrollbar {
  width: 4px;
}

.docs-sidebar::-webkit-scrollbar-thumb {
  background: var(--docs-border);
  border-radius: 2px;
}

.docs-sidebar-section {
  margin-bottom: var(--docs-space-5);
}

.docs-sidebar-heading {
  font-size: var(--docs-fs-xs);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--docs-fg-muted-cream);
  padding: 0 var(--docs-space-3);
  margin-bottom: var(--docs-space-2);
  display: block;
}

.docs-sidebar-nav {
  list-style: none;
  margin: 0;
  padding: 0;
}

.docs-sidebar-nav li {
  margin: 0;
}

.docs-sidebar-nav a {
  display: block;
  padding: var(--docs-space-2) var(--docs-space-3);
  border-radius: var(--docs-radius);
  font-size: var(--docs-fs-sm);
  font-weight: 400;
  color: var(--docs-fg-2);          /* #374151 on #EDF0ED — 16.7:1 */
  text-decoration: none;
  transition: color 0.1s ease, background-color 0.1s ease;
  line-height: 1.4;
}

.docs-sidebar-nav a:hover {
  color: var(--docs-accent);
  background-color: var(--docs-bg-subtle);
}

.docs-sidebar-nav a.active {
  font-weight: 600;
  color: var(--docs-fg);
  background-color: var(--docs-sidebar-active-bg);  /* #D4E8D3 */
  /* ink on #D4E8D3 = 14.9:1 */
}

.docs-sidebar-nav a.active::before {
  content: "";
  display: inline-block;
  width: 3px;
  height: 3px;
  border-radius: 50%;
  background-color: var(--docs-accent-display);
  margin-right: var(--docs-space-2);
  vertical-align: middle;
}

/* Nested nav (sub-items) */
.docs-sidebar-nav .sub-nav {
  list-style: none;
  margin: 0;
  padding: 0 0 0 var(--docs-space-4);
}

.docs-sidebar-nav .sub-nav a {
  font-size: var(--docs-fs-xs);
  color: var(--docs-fg-muted-cream);
  padding-top: 3px;
  padding-bottom: 3px;
}

.docs-sidebar-nav .sub-nav a:hover {
  color: var(--docs-accent);
}

/* Sidebar divider */
.docs-sidebar-divider {
  border: none;
  border-top: 1px solid var(--docs-border-light);
  margin: var(--docs-space-4) var(--docs-space-3);
}

/* "Back to top" link — typically at bottom of sidebar */
.docs-sidebar-back {
  font-size: var(--docs-fs-xs);
  color: var(--docs-fg-muted-cream);
  text-decoration: none;
  padding: var(--docs-space-2) var(--docs-space-3);
  display: block;
  transition: color 0.1s ease;
}

.docs-sidebar-back:hover {
  color: var(--docs-accent);
}


/* =========================================================================
   13. MAIN CONTENT AREA
   ========================================================================= */

.docs-content {
  padding: var(--docs-space-6) 0 var(--docs-space-8);
  max-width: var(--docs-content-max);
  min-width: 0;   /* prevents grid blowout */
}

/* Page header (title + meta) */
.docs-page-header {
  margin-bottom: var(--docs-space-6);
  padding-bottom: var(--docs-space-5);
  border-bottom: 1px solid var(--docs-border);
}

.docs-page-meta {
  font-size: var(--docs-fs-xs);
  color: var(--docs-fg-muted-cream);
  margin-top: var(--docs-space-2);
  display: flex;
  align-items: center;
  gap: var(--docs-space-3);
  flex-wrap: wrap;
}

.docs-page-meta .docs-updated {
  font-family: var(--docs-font-mono);
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1;
}

/* Breadcrumb */
.docs-breadcrumb {
  font-size: var(--docs-fs-xs);
  color: var(--docs-fg-muted-cream);
  margin-bottom: var(--docs-space-4);
  display: flex;
  align-items: center;
  gap: var(--docs-space-2);
  flex-wrap: wrap;
}

.docs-breadcrumb a {
  color: var(--docs-fg-muted-cream);
  text-decoration: none;
}

.docs-breadcrumb a:hover {
  color: var(--docs-accent);
}

.docs-breadcrumb-sep {
  color: var(--docs-fg-muted-cream);
  opacity: 0.5;
}


/* =========================================================================
   14. FOOTER — "LAST UPDATED" + PAGE FOOTER
   ========================================================================= */

/* Per-page "last updated" — builder generates; CSS styles it */
.docs-last-updated {
  margin-top: var(--docs-space-7);
  padding-top: var(--docs-space-4);
  border-top: 1px solid var(--docs-border);
  font-size: var(--docs-fs-xs);
  color: var(--docs-fg-muted-cream);
  display: flex;
  align-items: center;
  gap: var(--docs-space-2);
}

.docs-last-updated time {
  font-family: var(--docs-font-mono);
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1;
}

/* Site-wide footer */
.docs-site-footer {
  background-color: var(--docs-fg);          /* --raxx-ink */
  color: #B8BEC7;                            /* --raxx-n-300 */
  padding: var(--docs-space-7) var(--docs-space-5);
  font-size: var(--docs-fs-sm);
}

.docs-site-footer-inner {
  max-width: var(--docs-page-max);
  margin: 0 auto;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--docs-space-5);
  flex-wrap: wrap;
}

.docs-site-footer-brand {
  font-family: var(--docs-font-display);
  font-weight: 700;
  font-size: 18px;
  letter-spacing: -0.02em;
  color: #F7F8FA;                            /* --raxx-snow */
}

.docs-site-footer-copy {
  font-size: var(--docs-fs-xs);
  color: #6B7280;                            /* --raxx-n-500 */
  margin-top: 4px;
}

.docs-site-footer-links {
  display: flex;
  gap: var(--docs-space-5);
  flex-wrap: wrap;
}

.docs-site-footer-links a {
  color: #B8BEC7;
  text-decoration: none;
  transition: color 0.12s ease;
}

.docs-site-footer-links a:hover {
  color: #F7F8FA;
}


/* =========================================================================
   15. UTILITY — BADGES, LABELS, VERSION CHIPS
   ========================================================================= */

.docs-badge {
  display: inline-flex;
  align-items: center;
  padding: 2px 8px;
  border-radius: 999px;
  font-size: var(--docs-fs-xs);
  font-weight: 600;
  letter-spacing: 0.03em;
  vertical-align: middle;
  line-height: 1.6;
}

.docs-badge-stable {
  background-color: var(--docs-callout-info-bg);
  color: var(--docs-callout-info-fg);
  border: 1px solid var(--docs-callout-info-border);
}

.docs-badge-beta {
  background-color: var(--docs-callout-warn-bg);
  color: var(--docs-callout-warn-fg);
  border: 1px solid var(--docs-callout-warn-border);
}

.docs-badge-deprecated {
  background-color: var(--docs-callout-danger-bg);
  color: var(--docs-callout-danger-fg);
  border: 1px solid var(--docs-callout-danger-border);
}

/* Version chip in code (e.g. "v1.10") */
.docs-version {
  font-family: var(--docs-font-mono);
  font-size: var(--docs-fs-xs);
  color: var(--docs-fg-muted-cream);
  background-color: var(--docs-code-bg);
  padding: 1px 6px;
  border-radius: var(--docs-radius-sm);
  border: 1px solid var(--docs-border-light);
}


/* =========================================================================
   16. SKIP LINK (accessibility)
   ========================================================================= */

.docs-skip-link {
  position: absolute;
  top: -100px;
  left: var(--docs-space-4);
  background-color: var(--docs-accent);
  color: #fff;
  padding: var(--docs-space-2) var(--docs-space-4);
  border-radius: var(--docs-radius);
  font-size: var(--docs-fs-sm);
  font-weight: 600;
  text-decoration: none;
  z-index: 999;
  transition: top 0.1s ease;
}

.docs-skip-link:focus {
  top: var(--docs-space-2);
}


/* =========================================================================
   17. RESPONSIVE — TABLET (max-width: 1024px)
   ========================================================================= */

@media (max-width: 1024px) {
  :root {
    --docs-sidebar-width: 220px;
  }

  .docs-layout {
    gap: var(--docs-space-5);
  }

  .docs-topnav-links {
    gap: var(--docs-space-4);
  }
}


/* =========================================================================
   18. RESPONSIVE — MOBILE (max-width: 640px)
   ========================================================================= */

@media (max-width: 640px) {
  :root {
    --docs-fs-h1:  1.625rem;   /* 26px */
    --docs-fs-h2:  1.25rem;    /* 20px */
    --docs-fs-h3:  1.125rem;   /* 18px */
  }

  /* Topnav: hide link list, show hamburger */
  .docs-topnav-links {
    display: none;
  }

  .docs-nav-toggle {
    display: flex;
    align-items: center;
  }

  /* Sidebar: off-canvas by default, toggled by .sidebar-open on body */
  .docs-layout {
    grid-template-columns: 1fr;
    padding: 0 var(--docs-space-4);
    gap: 0;
  }

  .docs-sidebar {
    display: none;
    position: fixed;
    top: 56px;
    left: 0;
    width: 280px;
    height: calc(100vh - 56px);
    z-index: 90;
    background-color: var(--docs-bg-surface);
    border-right: 1px solid var(--docs-border);
    box-shadow: 4px 0 24px rgba(11, 15, 20, 0.12);
    padding: var(--docs-space-5);
    overflow-y: auto;
  }

  /* Toggle state — add .sidebar-open to body via JS in consuming page */
  body.sidebar-open .docs-sidebar {
    display: block;
  }

  /* Backdrop */
  body.sidebar-open::before {
    content: "";
    position: fixed;
    inset: 0;
    background: rgba(11, 15, 20, 0.4);
    z-index: 89;
  }

  .docs-content {
    padding: var(--docs-space-5) 0 var(--docs-space-7);
  }

  /* Tables scroll on mobile */
  .docs-content table {
    display: block;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    white-space: nowrap;
  }

  /* Code blocks */
  pre {
    padding: var(--docs-space-4);
    border-radius: var(--docs-radius);
    font-size: 0.8125rem;
  }

  /* Footer */
  .docs-site-footer-inner {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--docs-space-4);
  }

  .docs-site-footer-links {
    gap: var(--docs-space-4);
  }
}


/* =========================================================================
   19. RESPONSIVE — SMALL MOBILE (max-width: 320px)
   ========================================================================= */

@media (max-width: 320px) {
  :root {
    --docs-fs-h1: 1.375rem;
    --docs-fs-h2: 1.125rem;
    --docs-fs-body: 0.9375rem;
  }

  .docs-layout {
    padding: 0 var(--docs-space-3);
  }

  pre {
    font-size: 0.75rem;
    padding: var(--docs-space-3);
  }
}


/* =========================================================================
   20. PRINT STYLES
   ========================================================================= */

@media print {
  /* Drop sidebar, expand body to full width */
  .docs-topnav,
  .docs-sidebar,
  .docs-nav-toggle,
  .docs-site-footer,
  .docs-last-updated {
    display: none !important;
  }

  .docs-layout {
    display: block;
    max-width: 100%;
    padding: 0;
  }

  .docs-content {
    max-width: 100%;
    padding: 0;
  }

  body {
    background: #fff;
    color: #000;
    font-size: 11pt;
    line-height: 1.5;
  }

  h1, h2, h3, h4 {
    color: #000;
    page-break-after: avoid;
    orphans: 3;
    widows: 3;
  }

  pre, blockquote {
    page-break-inside: avoid;
  }

  pre {
    background: #f4f4f4;
    color: #111;
    border: 1px solid #ccc;
    padding: 10pt;
    font-size: 9pt;
  }

  pre code {
    color: inherit;
  }

  a {
    color: #000;
    text-decoration: underline;
  }

  a[href^="http"]::after {
    content: " (" attr(href) ")";
    font-size: 8pt;
    color: #555;
  }

  table {
    border-collapse: collapse;
    width: 100%;
    page-break-inside: avoid;
  }

  th, td {
    border: 1px solid #999;
    padding: 4pt 6pt;
  }

  th {
    background: #eee;
    color: #000;
  }

  .callout,
  blockquote {
    border-left: 2pt solid #999;
    background: #f9f9f9;
    padding: 8pt 10pt;
    color: #000;
  }
}


/* =========================================================================
   21. REDUCED MOTION
   ========================================================================= */

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }

  details[open] > *:not(summary) {
    animation: none;
  }
}