/* =============================================
   VS CODE DARK THEME + COLORED HEADERS + AFFIX FIX
   ============================================= */

/* --- Base dark theme (VS Code Dark+) --- */
html, body {
  background-color: #1e1e1e;
  color: #d4d4d4;
}

#wrapper {
  background-color: #1e1e1e;
}

a {
  color: #4fc1ff;
}

a:hover, a:focus {
  color: #9cdcfe;
}

a.disable, a.disable:hover {
  color: #808080;
}

code {
  color: #ce9178;
  background-color: #2d2d2d;
}

a code {
  color: #4fc1ff;
  background-color: #2d2d2d;
}

pre {
  background-color: #1e1e1e;
  color: #d4d4d4;
  border: 1px solid #3c3c3c;
}

/* --- Colored headers (VS Code Dark+ palette, muted) --- */
h1, .h1 {
  color: #4e94c2;
  border-bottom: 2px solid #2b4a6b;
  padding-bottom: 8px;
}

h2, .h2 {
  color: #3dab96;
  border-bottom: 1px solid #264f42;
  padding-bottom: 6px;
}

h3, .h3 {
  color: #9e9e9e;
}

h4, .h4 {
  color: #66CDAA;
}

h5, .h5 {
  color: #8a8a8a;
}

h6, .h6 {
  color: #8b8b8b;
}

/* --- Navbar dark --- */
.navbar {
  background-color: #252526;
  border-color: #3c3c3c;
}

.navbar .navbar-brand,
.navbar .navbar-nav > li > a {
  color: #d4d4d4;
}

.navbar .navbar-nav > li > a:hover,
.navbar .navbar-nav > li > a:focus {
  color: #ffffff;
}

header .navbar {
  border-bottom-color: #3c3c3c;
}

.documentation-home-link {
  float: left;
  min-height: 50px;
  padding: 0 15px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: #d4d4d4;
  border-left: 1px solid #3c3c3c;
  font-size: 13px;
  font-weight: 600;
  line-height: 1.2;
  text-decoration: none;
  white-space: nowrap;
}

.documentation-home-link:hover,
.documentation-home-link:focus {
  color: #ffffff;
  background-color: #2d2d2d;
  text-decoration: none;
}

.documentation-home-link__arrow {
  color: #4fc1ff;
  font-size: 18px;
  line-height: 1;
}

@media only screen and (max-width: 600px) {
  .documentation-home-link {
    width: 44px;
    padding: 0;
    justify-content: center;
  }

  .documentation-home-link__label {
    display: none;
  }
}

/* --- Sidebar / TOC dark --- */
.sidenav, .fixed_header, .toc,
.sidetoc, .sidefilter {
  background-color: #252526;
  border-color: #3c3c3c;
}

.sidetoc {
  border-left-color: #3c3c3c;
  border-right-color: #3c3c3c;
}

.sidefilter {
  border-left-color: #3c3c3c;
  border-right-color: #3c3c3c;
}

.toc-filter {
  background: #3c3c3c;
  color: #d4d4d4;
}

.toc-filter > input {
  color: #d4d4d4;
  background: transparent;
}

.toc .nav > li > a {
  color: #cccccc;
}

.toc .nav > li > a:hover,
.toc .nav > li > a:focus {
  color: #ffffff;
}

.toc .nav > li.active > a {
  color: #4fc1ff;
}

body .toc {
  background-color: #252526;
}

/* --- Article area --- */
.article {
  background-color: #1e1e1e;
}

/* --- AFFIX SCROLL FIX --- */
/* A single scrollbar for the whole container */
.sideaffix {
  overflow-y: auto !important;
  overflow-x: hidden;
  max-height: calc(100vh - 200px);
  scrollbar-width: none; /* Firefox */
  -ms-overflow-style: none; /* IE/Edge */
}

.sideaffix::-webkit-scrollbar {
  width: 0;
  background: transparent;
}

/* Nested lists — no scrollbar of their own */
.affix,
.bs-docs-sidebar,
.bs-docs-sidenav,
.affix ul.level1,
.affix ul.level2,
.affix ul.level3 {
  overflow: visible !important;
  max-height: none !important;
}

/* Affix dark styles */
.affix h5 {
  color: #569cd6;
}

.affix ul > li > a {
  color: #cccccc;
}

.affix ul > li > a:hover {
  color: #ffffff;
}

.affix ul > li.active > a,
.affix ul > li.active > a:before {
  color: #4fc1ff;
}

.affix > ul > li > a:before {
  color: #555555;
}

/* --- Breadcrumb dark --- */
.breadcrumb {
  background-color: transparent;
  color: #808080;
}

.breadcrumb > li + li:before {
  color: #555555;
}

/* --- Footer dark --- */
.footer {
  background-color: #252526;
  border-top-color: #3c3c3c;
  color: #808080;
}

/* --- Tables dark --- */
.table > thead > tr > th,
.table > tbody > tr > td {
  border-color: #3c3c3c;
  color: #d4d4d4;
}

.table > thead > tr > th {
  background-color: #2d2d2d;
}

.table-striped > tbody > tr:nth-of-type(odd) {
  background-color: #1e1e1e;
}

.table-striped > tbody > tr:nth-of-type(even) {
  background-color: #252526;
}

/* --- Alerts dark --- */
.alert-info {
  background-color: #063b49;
  border-color: #3c3c3c;
  color: #9cdcfe;
}

.alert-warning {
  background-color: #4d3a1a;
  border-color: #3c3c3c;
  color: #dcdcaa;
}

.alert-danger {
  background-color: #4b1818;
  border-color: #3c3c3c;
  color: #f48771;
}

/* --- Gradient blends dark --- */
.grad-top {
  background: linear-gradient(rgba(0, 0, 0, 0.3), rgba(0, 0, 0, 0));
}

.grad-bottom {
  background: linear-gradient(rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.3));
}

/* --- Dividers --- */
hr {
  border-color: #3c3c3c;
}

.divider {
  color: #555555;
}

/* --- Search dark --- */
.docs-search {
  background: #3c3c3c;
}

.docs-search > .search-query {
  color: #d4d4d4;
}

#search-results {
  color: #d4d4d4;
}

.search-results-container {
  background: rgba(30, 30, 30, 0.95);
  border-top-color: #3c3c3c;
}

/* --- Inheritance / members sections --- */
.inheritance h5, .inheritedMembers h5 {
  border-bottom-color: #3c3c3c;
  color: #4ec9b0;
}

#fields, #properties, #methods, #events {
  color: #dcdcaa;
}

.declaration, .fieldValue, .parameters, .returns {
  color: #808080;
}

/* --- Tabs dark --- */
.tabGroup a[role="tab"] {
  color: #808080;
  border-bottom-color: #252526;
}

.tabGroup a[role="tab"]:hover,
.tabGroup a[role="tab"]:focus,
.tabGroup a[role="tab"][aria-selected="true"] {
  border-bottom-color: #4fc1ff;
}

.tabGroup a[role="tab"][aria-selected="true"] {
  color: #d4d4d4;
}

.tabGroup a[role="tab"]:hover,
.tabGroup a[role="tab"]:focus {
  color: #4fc1ff;
}

.tabGroup section[role="tabpanel"] {
  border-color: #3c3c3c;
  background-color: #1e1e1e;
}

/* --- Global scrollbar --- */
::-webkit-scrollbar {
  width: 10px;
}

::-webkit-scrollbar-track {
  background: #1e1e1e;
}

::-webkit-scrollbar-thumb {
  background: #424242;
  border-radius: 0;
}

::-webkit-scrollbar-thumb:hover {
  background: #4f4f4f;
}

/* --- Pagination dark --- */
.pagination > li > a {
  color: #4fc1ff;
  background-color: #2d2d2d;
  border-color: #3c3c3c;
}

.pagination > .active > a {
  background-color: #264f78;
  border-color: #264f78;
  color: #ffffff;
}

/* --- Code syntax highlighting (VS Code Dark+) --- */
.hljs,
.hljs-subst {
  color: #d4d4d4;
}

/* Keywords: if, else, return, class, etc. */
.hljs-keyword,
.hljs-selector-tag,
.hljs-literal,
.hljs-section,
.hljs-link {
  color: #569cd6;
}

/* Strings */
.hljs-string,
.hljs-symbol,
.hljs-bullet,
.hljs-addition,
.hljs-template-tag,
.hljs-template-variable {
  color: #ce9178;
}

/* Function names / titles */
.hljs-title,
.hljs-title.function_ {
  color: #dcdcaa;
}

/* Types, classes */
.hljs-type,
.hljs-class .hljs-title,
.hljs-title.class_ {
  color: #4ec9b0;
}

/* Tag names (XML/HTML) */
.hljs-name {
  color: #569cd6;
}

/* Comments, meta */
.hljs-comment,
.hljs-quote,
.hljs-deletion,
.hljs-meta {
  color: #6a9955;
}

/* Reset bold weight */
.hljs-keyword,
.hljs-selector-tag,
.hljs-literal,
.hljs-title,
.hljs-section,
.hljs-doctag,
.hljs-type,
.hljs-name,
.hljs-strong {
  font-weight: normal;
}

/* Numbers */
.hljs-number {
  color: #b5cea8;
}

/* Parameters, attributes */
.hljs-params,
.hljs-attr {
  color: #9cdcfe;
}

/* Variables */
.hljs-variable,
.hljs-attribute {
  color: #9cdcfe;
}

/* Built-in functions */
.hljs-built_in {
  color: #1bdbb5;
}

/* Regular expressions */
.hljs-regexp {
  color: #a8dac9;
}

.hljs-emphasis {
  font-style: italic;
}

/* --- Bash / shell highlighting --- */
.hljs-language-bash .hljs-variable,
.hljs-language-bash .hljs-subst {
  color: #9cdcfe;
}

.hljs-language-bash .hljs-built_in {
  color: #dcdcaa;
}

.hljs-language-bash .hljs-string {
  color: #ce9178;
}

.hljs-language-bash .hljs-keyword {
  color: #569cd6;
}

.hljs-language-bash .hljs-comment {
  color: #6a9955;
}

.hljs-language-bash .hljs-number {
  color: #b5cea8;
}

.hljs-language-bash .hljs-literal {
  color: #569cd6;
}

/* --- ABNF highlighting --- */
.hljs-language-abnf .hljs-attribute {
  color: #9cdcfe;
}

.hljs-language-abnf .hljs-symbol {
  color: #d4d4d4;
}

.hljs-language-abnf .hljs-string {
  color: #ce9178;
}

.hljs-language-abnf .hljs-comment {
  color: #6a9955;
}

.hljs-language-abnf .hljs-keyword {
  color: #569cd6;
}

/* --- XML doc comments (/// <summary> etc.) --- */
.hljs-doctag,
.hljs-tag,
.hljs-name {
  color: #608b4e;
}

.hljs-tag .hljs-attr {
  color: #9cdcfe;
}

.hljs-tag .hljs-string {
  color: #ce9178;
}

/* XML comment content — green like comments */
.hljs-comment .hljs-doctag,
.hljs-comment .hljs-tag,
.hljs-comment .hljs-name {
  color: #6a9955;
}

/* --- Inline code in documentation text --- */
code {
  color: #d4d4d4;
  background-color: #2d2d2d;
  padding: 2px 4px;
  border-radius: 3px;
  border: 1px solid #3c3c3c;
}

a code {
  color: #4fc1ff;
  background-color: #2d2d2d;
}

/* =============================================
   LAYOUT — use the full window width
   The default Bootstrap container is centered with a fixed max-width, which
   leaves a large empty strip on the left and squeezes the content on wide
   screens. Span the whole width and let the three panes fill it.
   ============================================= */

/* Container spans the viewport instead of a centered fixed-width band */
.container,
.container.body-content {
  width: 100%;
  max-width: none;
  margin-left: 0;
  margin-right: 0;
  padding-left: 0;
  padding-right: 0;
}

/* Left table of contents / filter pinned to the left edge, a bit wider */
.sidefilter {
  left: 0;
  width: 320px;
}
.sidetoc {
  left: 0;
  width: 320px;
}

/* Main content fills the gap between the left TOC and the right outline.
   Left rail = sidebar 320 at left:0, content margin-left 336 -> 16 px gap.
   Right rail = affix width 220 at right:16 (rail 236); margin-right 252 mirrors
   the 16 px gap (336 - (320 - 236)), so both gaps are visually symmetric. */
.article.grid-right {
  margin-left: 336px;
  margin-right: 212px;
}

/* The content sits in a Bootstrap .col-md-10 with an empty .col-md-2 beside it
   (the in-page outline is fixed-positioned separately). Let the content column
   fill the whole article area and drop the empty placeholder column's width,
   otherwise ~17% is wasted between the content and the outline. */
.article.grid-right .col-md-10 {
  width: 100%;
}
.article.grid-right .col-md-2 {
  width: 0;
  padding-left: 0;
  padding-right: 0;
}

/* Right in-page outline pinned to the right edge (narrow footprint so the
   content can extend and the right gap matches the left one) */
.sideaffix {
  right: 12px;
  width: 200px;
}

/* Breadcrumb aligns with the content column */
.subnav .breadcrumb {
  padding-left: 336px;
}

/* Readability: larger body text and comfortable line spacing */
.article {
  font-size: 15px;
  line-height: 1.65;
}
.article h1 { font-size: 30px; }
.article h2 { font-size: 23px; }
.article h3 { font-size: 19px; }

/* Notes use the same text size as the surrounding documentation. */
.article blockquote {
  font-size: inherit;
}

/* Indent the list markers 20px beyond surrounding prose, plus their 20px gutter. */
article.content ul,
article.content ol {
  padding-inline-start: 40px;
}

/* Each nested list advances one further 20px step. */
article.content li ul,
article.content li ol {
  padding-inline-start: 20px;
}

/* On narrow screens fall back to the stacked mobile layout */
@media only screen and (max-width: 768px) {
  .article.grid-right { margin-left: 0; margin-right: 0; padding-right: 0; }
  .subnav .breadcrumb { padding-left: 15px; }
}

/* =============================================
   SPRUTCAM LIGHT THEME
   Uses the light surfaces, graphite text and red accent of sprut.ru.
   ============================================= */
:root {
  color-scheme: light;
  --doc-ink: #1f1f1f;
  --doc-muted: #68727b;
  --doc-line: #dfe3e5;
  --doc-canvas: #f4f6f7;
  --doc-panel: #ffffff;
  --doc-soft: #eceff0;
  --doc-red: #ff3333;
  --doc-red-dark: #d92323;
  --doc-link: #1269d9;
}

html,
body,
#wrapper {
  color: var(--doc-ink);
  background: var(--doc-canvas);
  font-family: "Segoe UI", Arial, sans-serif;
}

a,
a code,
.card-link {
  color: var(--doc-link);
}

a:hover,
a:focus,
a code:hover {
  color: #0052cc;
}

/* Make cross-page links easy to find within documentation text. */
article.content a[href]:not(.anchorjs-link) {
  color: #0052cc;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.16em;
}

article.content a[href]:not(.anchorjs-link):hover,
article.content a[href]:not(.anchorjs-link):focus {
  color: #003d99;
  text-decoration-thickness: 2px;
}

article.content a[href]:not(.anchorjs-link) code {
  color: inherit;
}

a.disable,
a.disable:hover,
.declaration,
.fieldValue,
.parameters,
.returns {
  color: var(--doc-muted);
}

/* Top navigation */
.navbar,
header .navbar {
  background: var(--doc-soft);
  border-color: var(--doc-line);
}

.navbar .navbar-brand,
.navbar .navbar-nav > li > a,
.documentation-home-link {
  color: var(--doc-ink);
}

.navbar .navbar-brand:hover,
.navbar .navbar-brand:focus,
.navbar .navbar-nav > li > a:hover,
.navbar .navbar-nav > li > a:focus,
.documentation-home-link:hover,
.documentation-home-link:focus {
  color: var(--doc-ink);
  background: var(--doc-panel);
}

.navbar-brand img {
  filter: none;
  opacity: 1;
}

.navbar-brand:has(img#logo) {
  display: flex;
  align-items: center;
}

.navbar-brand #logo g {
  fill: var(--doc-red-dark);
}

.documentation-home-link {
  border-left-color: #cedadc;
}

.documentation-home-link__arrow {
  color: var(--doc-red-dark);
}

.navbar-toggle,
.navbar-inverse .navbar-toggle {
  border-color: #c7d3d6;
}

.navbar-inverse .navbar-toggle .icon-bar {
  background-color: var(--doc-ink);
}

.subnav.navbar,
.subnav.navbar-default {
  background: rgba(255, 255, 255, .96);
  border-color: var(--doc-line);
  box-shadow: 0 5px 18px rgba(9, 32, 35, .04);
}

/* Left navigation and filters */
.sidenav,
.fixed_header,
.toc,
.sidetoc,
.sidefilter,
body .toc {
  color: var(--doc-ink);
  background: var(--doc-panel);
  border-color: var(--doc-line);
}

.sidetoc,
.sidefilter {
  border-left-color: var(--doc-line);
  border-right-color: var(--doc-line);
}

.toc-filter,
.docs-search {
  color: var(--doc-ink);
  background: var(--doc-soft);
  border-color: var(--doc-line);
}

.toc-filter > input,
.docs-search > .search-query,
#search-query,
.form-control {
  color: var(--doc-ink);
  background: transparent;
}

.toc-filter > input::placeholder,
.docs-search > .search-query::placeholder,
#search-query::placeholder {
  color: #839097;
}

.toc .nav > li > a,
.affix ul > li > a {
  color: #3c4a51;
}

.toc .nav > li > a:hover,
.toc .nav > li > a:focus,
.affix ul > li > a:hover {
  color: var(--doc-ink);
  background: #f6faf9;
}

.toc .nav > li.active > a,
.affix ul > li.active > a,
.affix ul > li.active > a:before {
  color: var(--doc-red-dark);
}

.affix > ul > li > a:before,
.divider {
  color: #a3b0b5;
}

.affix h5 {
  color: var(--doc-ink);
}

/* Article and headings */
.article,
.sideaffix,
.affix {
  color: var(--doc-ink);
  background: var(--doc-panel);
}

h1,
.h1 {
  color: var(--doc-ink);
  border-bottom-color: var(--doc-red);
}

h2,
.h2 {
  color: #25323a;
  border-bottom-color: #cbd7da;
}

/* Separate every H3 section, including the first one on each page. */
article.content h3 {
  border-top: 1px solid #cbd7da;
  padding-top: 12px;
  margin-top: 24px;
}

h3,
.h3,
h4,
.h4,
h5,
.h5,
h6,
.h6 {
  color: #35444b;
}

.breadcrumb {
  color: var(--doc-muted);
  background: transparent;
}

.breadcrumb > li + li:before {
  color: #a3b0b5;
}

hr {
  border-color: var(--doc-line);
}

/* Code and API reference */
code,
a code {
  color: #a62323;
  background: #f4f4f4;
  border-color: var(--doc-line);
}

pre,
.hljs,
.hljs-subst {
  color: var(--doc-ink);
  background: #f7f9f9;
  border-color: var(--doc-line);
}

.hljs-keyword,
.hljs-selector-tag,
.hljs-literal,
.hljs-section,
.hljs-link,
.hljs-language-bash .hljs-keyword,
.hljs-language-bash .hljs-literal,
.hljs-language-abnf .hljs-keyword {
  color: #0000b8;
}

.hljs-string,
.hljs-symbol,
.hljs-bullet,
.hljs-addition,
.hljs-template-tag,
.hljs-template-variable,
.hljs-language-bash .hljs-string,
.hljs-language-abnf .hljs-string,
.hljs-tag .hljs-string {
  color: #a31515;
}

.hljs-title,
.hljs-title.function_,
.hljs-language-bash .hljs-built_in {
  color: #795e26;
}

.hljs-type,
.hljs-class .hljs-title,
.hljs-title.class_,
.hljs-built_in {
  color: #267f99;
}

.hljs-name,
.hljs-language-abnf .hljs-attribute,
.hljs-tag .hljs-attr,
.hljs-params,
.hljs-attr,
.hljs-variable,
.hljs-attribute,
.hljs-language-bash .hljs-variable,
.hljs-language-bash .hljs-subst {
  color: #001080;
}

.hljs-comment,
.hljs-quote,
.hljs-deletion,
.hljs-meta,
.hljs-language-bash .hljs-comment,
.hljs-language-abnf .hljs-comment,
.hljs-comment .hljs-doctag,
.hljs-comment .hljs-tag,
.hljs-comment .hljs-name {
  color: #008000;
}

.hljs-number,
.hljs-language-bash .hljs-number {
  color: #098658;
}

.hljs-language-abnf .hljs-symbol {
  color: var(--doc-ink);
}

.hljs-doctag,
.hljs-tag,
.hljs-name {
  color: #800000;
}

.inheritance h5,
.inheritedMembers h5 {
  color: #267f99;
  border-bottom-color: var(--doc-line);
}

#fields,
#properties,
#methods,
#events {
  color: #795e26;
}

/* Tables, callouts, tabs and pagination */
.table > thead > tr > th,
.table > tbody > tr > td {
  color: var(--doc-ink);
  border-color: var(--doc-line);
}

.table > thead > tr > th {
  background: var(--doc-soft);
}

.table-striped > tbody > tr:nth-of-type(odd) {
  background: #fafcfc;
}

.table-striped > tbody > tr:nth-of-type(even) {
  background: var(--doc-panel);
}

.alert-info {
  color: #14556c;
  background: #eaf7fb;
  border-color: #b9dce7;
}

.alert-warning {
  color: #6d5212;
  background: #fff8df;
  border-color: #ead99a;
}

.alert-danger {
  color: #8e2020;
  background: #fff0f0;
  border-color: #efc0c0;
}

.grad-top {
  background: linear-gradient(rgba(244, 247, 247, .9), rgba(244, 247, 247, 0));
}

.grad-bottom {
  background: linear-gradient(rgba(244, 247, 247, 0), rgba(244, 247, 247, .9));
}

.tabGroup a[role="tab"] {
  color: var(--doc-muted);
  border-bottom-color: var(--doc-line);
}

.tabGroup a[role="tab"]:hover,
.tabGroup a[role="tab"]:focus,
.tabGroup a[role="tab"][aria-selected="true"] {
  color: var(--doc-red-dark);
  border-bottom-color: var(--doc-red);
}

.tabGroup section[role="tabpanel"] {
  color: var(--doc-ink);
  background: var(--doc-panel);
  border-color: var(--doc-line);
}

.pagination > li > a {
  color: var(--doc-red-dark);
  background: var(--doc-panel);
  border-color: var(--doc-line);
}

.pagination > .active > a,
.pagination > .active > a:hover {
  color: #ffffff;
  background: var(--doc-red-dark);
  border-color: var(--doc-red-dark);
}

/* Search results rendered by main.js */
#search-results {
  color: var(--doc-ink);
}

#search-results mark,
article mark {
  padding: 0 .08em;
  color: inherit;
  background: #ffe783;
  border-radius: 2px;
}

.search-results-container {
  color: var(--doc-ink);
  background: rgba(255, 255, 255, .98);
  border-top-color: var(--doc-line);
}

#toc-member-results,
#toc-filter-tags {
  color: var(--doc-ink) !important;
  background: var(--doc-panel) !important;
  border-color: var(--doc-line) !important;
  box-shadow: 0 12px 30px rgba(9, 32, 35, .14) !important;
}

.toc-member-result {
  color: #39484e !important;
  border-bottom-color: #eaf0f1 !important;
}

.toc-member-result:hover {
  color: var(--doc-ink) !important;
  background: #fff1f1 !important;
}

#toc-member-results::-webkit-scrollbar-thumb {
  background: #c2ced1 !important;
}

/* Footer and scrollbars */
.footer {
  color: var(--doc-muted);
  background: var(--doc-soft);
  border-top-color: var(--doc-line);
}

/* Keep footer text inset on both sides. */
.footer > .container {
  padding-left: 16px;
  padding-right: 16px;
}

::-webkit-scrollbar-track {
  background: #eaf0f1;
}

::-webkit-scrollbar-thumb {
  background: #c2ced1;
}

::-webkit-scrollbar-thumb:hover {
  background: #a3b0b5;
}

@media only screen and (max-width: 768px) {
  .article,
  .sideaffix,
  .affix {
    background: var(--doc-panel);
  }
}

/* Local manual navigation readability overrides. */
.toc .nav > li > a { font-size: 16px; line-height: 1.5; }
.toc .nav > li > ul > li > a { font-size: 16px; line-height: 1.5; }
.toc .nav > li > ul > li > ul > li > a { font-size: 16px; line-height: 1.5; }
.toc-filter > input { font-size: 16px; }


/* Legacy Scroll indentation and expand controls. */
/* The HTML export encoded hierarchy as margin-left on paragraphs. The converter emits
   zero-height markers so Markdown remains semantic while the visual indentation is kept. */
.legacy-indent-marker { display: block; height: 0; overflow: hidden; }
.legacy-indent-30 + p, .legacy-indent-30 + ul, .legacy-indent-30 + ol, .legacy-indent-30 + table, .legacy-indent-30 + blockquote { margin-left: 30px; }
.legacy-indent-60 + p, .legacy-indent-60 + ul, .legacy-indent-60 + ol, .legacy-indent-60 + table, .legacy-indent-60 + blockquote { margin-left: 60px; }
.legacy-indent-90 + p, .legacy-indent-90 + ul, .legacy-indent-90 + ol, .legacy-indent-90 + table, .legacy-indent-90 + blockquote { margin-left: 90px; }
.legacy-indent-120 + p, .legacy-indent-120 + ul, .legacy-indent-120 + ol, .legacy-indent-120 + table, .legacy-indent-120 + blockquote { margin-left: 120px; }
.legacy-indent-150 + p, .legacy-indent-150 + ul, .legacy-indent-150 + ol, .legacy-indent-150 + table, .legacy-indent-150 + blockquote { margin-left: 150px; }
.legacy-indent-180 + p, .legacy-indent-180 + ul, .legacy-indent-180 + ol, .legacy-indent-180 + table, .legacy-indent-180 + blockquote { margin-left: 180px; }
.legacy-indent-210 + p, .legacy-indent-210 + ul, .legacy-indent-210 + ol, .legacy-indent-210 + table, .legacy-indent-210 + blockquote { margin-left: 210px; }
.legacy-indent-240 + p, .legacy-indent-240 + ul, .legacy-indent-240 + ol, .legacy-indent-240 + table, .legacy-indent-240 + blockquote { margin-left: 240px; }
.legacy-indent-270 + p, .legacy-indent-270 + ul, .legacy-indent-270 + ol, .legacy-indent-270 + table, .legacy-indent-270 + blockquote { margin-left: 270px; }
.legacy-indent-300 + p, .legacy-indent-300 + ul, .legacy-indent-300 + ol, .legacy-indent-300 + table, .legacy-indent-300 + blockquote { margin-left: 300px; }
.legacy-indent-330 + p, .legacy-indent-330 + ul, .legacy-indent-330 + ol, .legacy-indent-330 + table, .legacy-indent-330 + blockquote { margin-left: 330px; }
.legacy-indent-360 + p, .legacy-indent-360 + ul, .legacy-indent-360 + ol, .legacy-indent-360 + table, .legacy-indent-360 + blockquote { margin-left: 360px; }
.legacy-indent-390 + p, .legacy-indent-390 + ul, .legacy-indent-390 + ol, .legacy-indent-390 + table, .legacy-indent-390 + blockquote { margin-left: 390px; }
.legacy-indent-420 + p, .legacy-indent-420 + ul, .legacy-indent-420 + ol, .legacy-indent-420 + table, .legacy-indent-420 + blockquote { margin-left: 420px; }
.legacy-indent-450 + p, .legacy-indent-450 + ul, .legacy-indent-450 + ol, .legacy-indent-450 + table, .legacy-indent-450 + blockquote { margin-left: 450px; }
.legacy-indent-480 + p, .legacy-indent-480 + ul, .legacy-indent-480 + ol, .legacy-indent-480 + table, .legacy-indent-480 + blockquote { margin-left: 480px; }
.legacy-indent-510 + p, .legacy-indent-510 + ul, .legacy-indent-510 + ol, .legacy-indent-510 + table, .legacy-indent-510 + blockquote { margin-left: 510px; }
.legacy-indent-540 + p, .legacy-indent-540 + ul, .legacy-indent-540 + ol, .legacy-indent-540 + table, .legacy-indent-540 + blockquote { margin-left: 540px; }

.article details { margin: 0 0 10px 0; }
.article details > summary { color: #d92323; font-weight: 600; cursor: pointer; list-style-position: outside; }
.article details > summary::marker { color: #000; font-size: 16px; }
.article details > summary::-webkit-details-marker { display: inline-block; }
.article details[open] > summary { margin-bottom: 10px; }

/* Expanded text is indented throughout the manual, including nested groups. */
article.content details > p,
article.content details > ul,
article.content details > ol,
article.content details > blockquote,
article.content details > .table-responsive,
article.content details > details,
article.content .parameter-options > p,
article.content .parameter-options > ul,
article.content .parameter-options > ol,
article.content .parameter-options > blockquote,
article.content .parameter-options > .table-responsive,
article.content .parameter-options > details {
  margin-inline-start: var(--guide-text-left, 20px);
}

/* Options form a nested group beneath their parent parameter. */
article.content .parameter-options {
  margin-inline-start: 20px;
}

/* Links/Leads: the catalogue is one step deeper than its introduction. */
article.content details.links-leads-items > p {
  margin-inline-start: var(--guide-text-left, 40px);
}

article.content details.links-leads-items > p:first-of-type {
  margin-inline-start: var(--guide-text-left, 20px);
}

/* Structured guide layout. Each indentation step is two character cells. */
.documentation-guide {
  --guide-indent: 2ch;
}

.documentation-guide > h1,
.documentation-guide > h2,
.documentation-guide > p {
  margin-inline-start: 0;
}

.documentation-guide > h3 {
  margin-inline-start: var(--guide-indent);
  margin-top: 1.75em;
}

.documentation-guide > h2,
.documentation-guide > h3 {
  font-weight: 600;
}

.documentation-guide > h3 ~ p,
.documentation-guide > h3 ~ ul,
.documentation-guide > h3 ~ ol,
.documentation-guide > h3 ~ table,
.documentation-guide > h3 ~ .table-responsive,
.documentation-guide > h3 ~ blockquote {
  margin-inline-start: calc(3 * var(--guide-indent));
}

.documentation-guide > h3 ~ .guide-subheading,
.documentation-guide > h3 ~ details {
  margin-inline-start: calc(2 * var(--guide-indent));
}

.documentation-guide .guide-subheading {
  margin-top: 1.25em;
  margin-bottom: 0.75em;
  font-size: inherit;
}

.documentation-guide details > p,
.documentation-guide details > ul,
.documentation-guide details > ol {
  margin-inline-start: var(--guide-indent);
}

.documentation-guide details > .guide-subheading {
  margin-inline-start: 0;
}

/* Standalone illustrations sit 60px to the right of their text block. */
article.content .guide-figure {
  display: grid;
  grid-template-columns: 60px minmax(0, 1fr);
  /* Keep the previous image sizes when prose uses the full article width. */
  max-width: 100ch;
}

article.content .guide-figure::before {
  content: "";
}

/* Keep separate images visibly distinct when Markdown places them in one row. */
article.content .guide-figure-content {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: 16px;
  min-width: 0;
}

article.content .guide-figure-content > * {
  max-width: 100%;
  min-width: 0;
}

/* The opening illustration remains aligned with the page title. */
article.content .guide-figure-intro {
  grid-template-columns: 0 minmax(0, 1fr);
}

/* Opening illustrations throughout the guide; small command icons keep their size. */
article.content .guide-figure-intro img.guide-intro-illustration {
  width: 500px;
  height: auto;
}

/* Approved image widths remain responsive, including inside image rows. */
article.content img[data-guide-width],
article.content .guide-figure img[data-guide-width] {
  width: var(--guide-image-width);
  height: auto;
}

/* Consecutive illustrations form a single row and shrink together when needed. */
article.content .guide-auto-image-row {
  display: flex;
  align-items: flex-start;
  gap: var(--guide-row-gap, 16px);
  margin: 0 0 10px;
  margin-inline-start: var(--guide-row-margin, 0px);
  padding-inline-start: var(--guide-row-left, 0px);
  padding-top: var(--guide-row-top, 0px);
  box-sizing: border-box;
}

article.content .guide-auto-image-row > .guide-figure,
article.content .guide-auto-image-row > .guide-figure.guide-figure-saved {
  display: block;
  flex: 0 0 auto;
  width: var(--guide-row-width);
  min-width: 0;
  max-width: none;
  margin: 0;
  padding: 0;
}

article.content .guide-auto-image-row > .guide-figure::before { display: none; }
article.content .guide-auto-image-row .guide-figure-content { flex-wrap: nowrap; gap: var(--guide-row-gap, 16px); }
article.content .guide-auto-image-row .guide-figure-content img {
  width: var(--guide-row-image-width);
  height: auto;
  flex: 0 0 auto;
}

article.content .guide-text-saved {
  margin-inline-start: var(--guide-text-left);
  padding-top: var(--guide-text-top);
}

/* Per-image spacing approved in the local visual editor. */
article.content .guide-figure.guide-figure-saved {
  display: grid;
  grid-template-columns: var(--guide-figure-left) minmax(0, 1fr);
  padding-top: var(--guide-figure-top);
}

article.content .guide-figure.guide-figure-saved::before {
  content: "";
  white-space: normal;
}

@media (max-width: 640px) {
  .documentation-guide { --guide-indent: 1ch; }
}

/* Operation references: H2 application area, H3 tabs, H4 parameter groups. */
.operation-reference > p,
.operation-reference h1,
.operation-reference h2,
.operation-reference h3,
.operation-reference h4,
.operation-reference h5,
.operation-reference h6 {
  margin-inline-start: 0;
}

.operation-reference > h3 ~ p,
.operation-reference > h3 ~ ul,
.operation-reference > h3 ~ ol,
.operation-reference > h3 ~ blockquote,
.operation-reference > h3 ~ .table-responsive,
.operation-reference details > p,
.operation-reference details > ul,
.operation-reference details > ol,
.operation-reference details > blockquote,
.operation-reference details > .table-responsive {
  margin-inline-start: 20px;
}

/* Release-note item headings and prose share the approved Home Page indent. */
article.content .release-note-content {
  --guide-text-left: 40px;
}

/* The H2 underline already separates an immediately following release-note H3. */
article.content h2 + h3.release-note-section {
  border-top: 0;
  padding-top: 0;
}

/* H2/H3 section contents; retain approved paragraph offsets. */
article.content .guide-h2-content,
article.content .guide-h3-content {
  margin-inline-start: var(--guide-text-left, 20px);
}

article.content table.guide-h2-content,
article.content table.guide-h3-content {
  width: calc(100% - var(--guide-text-left, 20px));
}

/* Operation catalogue illustrations share the 250 x 220 Lathe facing frame. */
article.content .operation-catalog table {
  table-layout: fixed;
}

article.content .operation-catalog th:first-child,
article.content .operation-catalog td:first-child {
  width: 270px;
}

article.content .operation-catalog .guide-figure {
  grid-template-columns: 0 minmax(0, 1fr);
  margin: 0;
}

article.content .guide-figure.table-figure {
  grid-template-columns: 0 minmax(0, 1fr);
  margin: 0;
}

article.content .operation-catalog img {
  width: 250px;
  height: 220px;
  object-fit: contain;
  object-position: left center;
}

/* Captioned release-note comparisons keep each pair together. */
article.content .release-note-comparison {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px 24px;
  max-width: 800px;
  margin: 0 0 20px 60px;
  break-inside: avoid;
}

article.content .release-note-comparison > figure {
  display: grid;
  grid-template-rows: subgrid;
  grid-row: span 2;
  align-items: start;
  justify-items: center;
  min-width: 0;
  margin: 0;
}

article.content .release-note-comparison figcaption {
  text-align: center;
}

article.content .release-note-comparison img {
  display: block;
  max-width: 100%;
  height: auto;
}

#autocollapse .navbar-header {
  display: flex;
  align-items: center;
  padding-left: 16px;
}

#autocollapse .documentation-heading {
  display: flex;
  align-items: baseline;
  min-width: 0;
}

#autocollapse .documentation-heading > .navbar-nav {
  display: flex;
  float: none;
  margin: 0;
}

#autocollapse .documentation-heading > .navbar-nav > li {
  float: none;
}

#autocollapse .documentation-heading > .navbar-nav::before,
#autocollapse .documentation-heading > .navbar-nav::after {
  display: none;
}

#autocollapse .navbar-header > .navbar-toggle {
  order: 3;
  flex-shrink: 0;
  margin-left: auto;
}

#documentation-version {
  flex-shrink: 0;
  margin-right: 16px;
  color: var(--doc-muted);
  font-size: 12px;
  line-height: 16px;
  font-variant-numeric: tabular-nums;
}

@media print {
  #documentation-version {
    display: none;
  }
}

/* The sidebar toggle stays within the viewport on narrow screens. */
@media only screen and (max-width: 768px) {
  .sidenav { width: 100%; margin-left: 0; margin-right: 0; }
}
