/* Keep the document controls while sharing the public page frame and background. */
:root {
  --page-max: var(--public-max-width, 1600px);
  --sidebar-width: 224px;
  --rail-width: 204px;
  --content-max: 1040px;
  --header-height: var(--public-header-height, 88px);
  --docs-column-gap: 32px;
  --docs-page-gutter: var(--public-gutter, 24px);
  --bg: var(--public-bg, #100b07);
  --text: var(--color-text-primary, #fff3e4);
  --text-2: var(--color-text-secondary, #d9c7b4);
  --text-3: var(--color-text-muted, #bba994);
  --muted: var(--color-text-muted, #bba994);
  --line: var(--color-border, #4b3627);
  --line-strong: var(--color-primary, #f3b970);
  --accent: var(--color-primary, #f3b970);
  --accent-2: var(--color-primary-light, #ffe1ae);
  --surface: var(--color-bg-card, #21170f);
  --surface-2: var(--color-bg-secondary, #19110c);
  --surface-hover: var(--color-bg-hover, #2d2017);
  --docs-info-bg: #1434387a;
  --docs-info-border: #38d5d157;
  --docs-tip-bg: #12322375;
  --docs-tip-border: #36d39952;
  --docs-warn-bg: #3a27107a;
  --docs-warn-border: #f59e0b6b;
  --docs-panel-shadow: 0 12px 28px #00000024;
}

:root[data-theme="light"] {
  --docs-info-bg: #edf8f8;
  --docs-info-border: #a4d6d5;
  --docs-tip-bg: #edf7f0;
  --docs-tip-border: #a7d1b6;
  --docs-warn-bg: #fff5e3;
  --docs-warn-border: #ddbd84;
  --docs-panel-shadow: 0 12px 28px #5b36140d;
}

body[data-public-page="docs"] {
  background-color: var(--bg);
  color: var(--text);
}

/* The shared stylesheet owns both pseudo-elements; remove the old grid mask. */
body[data-public-page="docs"]::before {
  -webkit-mask-image: none;
  mask-image: none;
}

body[data-public-page="docs"] .main {
  width: min(var(--page-max), calc(100% - 2 * var(--docs-page-gutter))) !important;
  max-width: calc(100% - 2 * var(--docs-page-gutter)) !important;
  padding: 36px calc(var(--rail-width) + var(--docs-column-gap)) 88px calc(var(--sidebar-width) + var(--docs-column-gap));
}

body[data-public-page="docs"] .main-inner {
  width: 100% !important;
  max-width: var(--content-max) !important;
  margin-inline: auto;
}

body[data-public-page="docs"] .main section > p,
body[data-public-page="docs"] .main section > ul,
body[data-public-page="docs"] .main section > ol {
  max-width: 84ch;
}

body[data-public-page="docs"] .sidebar {
  top: calc(var(--header-height) + 20px);
  left: max(var(--docs-page-gutter), calc((100vw - var(--page-max)) / 2));
  width: var(--sidebar-width);
  height: calc(100dvh - var(--header-height) - 40px);
}

body[data-public-page="docs"] .doc-rail {
  display: block;
  top: calc(var(--header-height) + 20px);
  right: max(var(--docs-page-gutter), calc((100vw - var(--page-max)) / 2));
  width: var(--rail-width);
}

body[data-public-page="docs"] .rail-row {
  grid-template-columns: 64px minmax(0, 1fr);
}

body[data-public-page="docs"] .rail-row b {
  min-width: 0;
  overflow-wrap: anywhere;
}

body[data-public-page="docs"] .sidebar-link,
body[data-public-page="docs"] .doc-search-result {
  min-height: 44px;
}

body[data-public-page="docs"] .code-block,
body[data-public-page="docs"] .table-wrapper {
  min-width: 0;
  max-width: 100%;
}

body[data-public-page="docs"] .sidebar,
body[data-public-page="docs"] .rail-card,
body[data-public-page="docs"] .doc-search-panel,
body[data-public-page="docs"] .feature-card,
body[data-public-page="docs"] .pricing-card,
body[data-public-page="docs"] .tool-card,
body[data-public-page="docs"] .step,
body[data-public-page="docs"] .config-box,
body[data-public-page="docs"] .faq-item,
body[data-public-page="docs"] .table-wrapper {
  background: var(--surface);
  border-color: var(--line);
  box-shadow: var(--docs-panel-shadow);
}

body[data-public-page="docs"] .feature-card:hover,
body[data-public-page="docs"] .pricing-card:hover,
body[data-public-page="docs"] .tool-card:hover,
body[data-public-page="docs"] .step:hover,
body[data-public-page="docs"] .faq-q:hover,
body[data-public-page="docs"] .sidebar-link.active,
body[data-public-page="docs"] .doc-search-result:hover {
  background: var(--surface-hover);
}

body[data-public-page="docs"] .callout-info {
  background: var(--docs-info-bg);
  border-color: var(--docs-info-border);
}

body[data-public-page="docs"] .callout-tip {
  background: var(--docs-tip-bg);
  border-color: var(--docs-tip-border);
}

body[data-public-page="docs"] .callout-warn {
  background: var(--docs-warn-bg);
  border-color: var(--docs-warn-border);
}

body[data-public-page="docs"] .step code,
body[data-public-page="docs"] p code,
body[data-public-page="docs"] li code,
body[data-public-page="docs"] td code,
body[data-public-page="docs"] th {
  color: var(--text);
  border-color: var(--line);
  background: var(--surface-hover);
}

body[data-public-page="docs"] .rail-row,
body[data-public-page="docs"] .config-row,
body[data-public-page="docs"] th,
body[data-public-page="docs"] td,
body[data-public-page="docs"] section {
  border-color: var(--line);
}

body[data-public-page="docs"] .main a:not(.btn-console):not(.login-link):not(.header-logo):not(.sidebar-link):not(.header-nav-link) {
  color: var(--accent);
}

body[data-public-page="docs"] .doc-search-close {
  color: var(--text-2);
  background: var(--surface-hover);
  border-color: var(--line);
  min-width: 44px;
  min-height: 44px;
}

@media (max-width: 1380px) {
  body[data-public-page="docs"] .doc-rail {
    display: none;
  }

  body[data-public-page="docs"] .main {
    padding-right: 0;
  }
}

@media (max-width: 1120px) {
  body[data-public-page="docs"] .main {
    padding: 32px 0 72px;
  }

  body[data-public-page="docs"] .sidebar {
    top: 0;
    left: 0;
    z-index: 90;
    width: min(86vw, 320px);
    height: 100dvh;
  }

  body[data-public-page="docs"] .sidebar-overlay {
    z-index: 85;
  }
}

@media (max-width: 760px) {
  :root {
    --docs-page-gutter: 16px;
  }

  body[data-public-page="docs"] .main {
    padding-block: 24px 56px;
  }

  body[data-public-page="docs"] .main h1 {
    width: auto !important;
    max-width: 100% !important;
  }
}