/*
 * Docs pages (/docs/*). Loaded only by docs/doc_page.erb and docs/ask.erb, after app.css.
 * Ask boxes shared with other pages (.ask-box, .docs-deepwiki) stay in app.css.
 */

/* Docs */
.docs-main {
  max-width: 42rem;
  font-size: var(--font-size-base);
  line-height: 1.45;
  color: var(--bs-body-color);
}

.docs-header {
  margin-bottom: var(--space-sm);
}

.docs-header-select .form-select:not([size]):not([multiple]) {
  font-family: var(--header-font-family);
  font-size: var(--font-size-xl);
  font-weight: bold;
  height: auto;
  padding: var(--space-2xs) 2.25rem var(--space-2xs) var(--space-xs);
  margin: 0 0 var(--space-xs);
}

#doc-body h1,
#doc-body h2,
#doc-body h3,
.docs-deepwiki-answer h1,
.docs-deepwiki-answer h2,
.docs-deepwiki-answer h3,
.docs-ask h1,
.docs-ask h2,
.docs-ask h3 {
  scroll-margin-top: 5.5rem;
  line-height: 1.3;
  letter-spacing: -0.02em;
}

#doc-body h1,
.docs-deepwiki-answer h1,
.docs-ask h1 {
  font-size: var(--font-size-2xl);
  margin: 0 0 var(--space-sm);
  padding-bottom: var(--space-xs);
  border-bottom: 2px solid var(--bs-border-color);
}

#doc-body h2,
.docs-deepwiki-answer h2,
.docs-ask h2 {
  font-size: var(--font-size-xl);
  margin: var(--space-xl) 0 var(--space-sm);
  padding-bottom: var(--space-2xs);
  border-bottom: 1px solid var(--bs-border-color);
}

#doc-body h3,
.docs-deepwiki-answer h3,
.docs-ask h3 {
  font-size: var(--font-size-lg);
  margin: var(--space-lg) 0 var(--space-xs);
}

#doc-body p,
.docs-deepwiki-answer p {
  margin-bottom: var(--space-base);
}

#doc-body ul,
#doc-body ol,
.docs-deepwiki-answer ul,
.docs-deepwiki-answer ol {
  padding-left: var(--space-lg);
  margin-bottom: var(--space-base);
}

#doc-body li,
.docs-deepwiki-answer li {
  margin-bottom: var(--space-2xs);
}

#doc-body li > ul,
#doc-body li > ol,
.docs-deepwiki-answer li > ul,
.docs-deepwiki-answer li > ol {
  margin-top: var(--space-2xs);
  margin-bottom: var(--space-2xs);
}

#doc-body a,
.docs-deepwiki-answer a {
  color: var(--theme-500);
}

#doc-body a:hover, #doc-body a:focus,
.docs-deepwiki-answer a:hover,
.docs-deepwiki-answer a:focus {
  color: var(--theme-600);
}

#doc-body p.action a,
.docs-deepwiki-answer p.action a {
  color: var(--bs-white);
  text-decoration: none;
}

#doc-body img,
.docs-deepwiki-answer img {
  max-width: 100%;
  height: auto;
}

#doc-body blockquote,
.docs-deepwiki-answer blockquote {
  font-style: normal;
  color: var(--bs-body-color);
  margin: 0 0 var(--space-base);
}

#doc-body .table,
.docs-deepwiki-answer .table {
  font-size: 0.875em;
  margin-bottom: 0;
}

#doc-body pre,
.docs-deepwiki-answer pre {
  font-size: 0.875em;
  line-height: 1.5;
  padding: 0;
  overflow-x: auto;
  word-break: normal;
  word-wrap: normal;
  background: transparent;
  border: 0;
  border-radius: var(--bs-border-radius-lg);
  margin-bottom: var(--space-lg);
}

#doc-body code,
.docs-deepwiki-answer code {
  font-size: 0.875em;
}

.doc-table-wrap {
  overflow-x: auto;
  margin-bottom: var(--space-lg);
}

.doc-transcript {
  margin: var(--space-xs) 0 var(--space-lg);
  border: 1px solid var(--theme-200);
  border-radius: var(--bs-border-radius-lg);
  background: var(--theme-50);
  padding: var(--space-xs) var(--space-sm);
}

.doc-transcript summary {
  cursor: pointer;
  font-size: var(--font-size-sm);
  color: var(--theme-500);
  font-family: var(--header-font-family);
}

.doc-transcript[open] summary {
  margin-bottom: var(--space-base);
}

.doc-transcript blockquote {
  margin: 0;
  font-size: 0.875em;
  line-height: 1.45;
}

.doc-transcript blockquote p {
  margin-bottom: var(--space-sm);
}

.doc-transcript blockquote p:last-child {
  margin-bottom: 0;
}

.doc-toc-mobile {
  margin: 0 0 var(--space-lg);
  border: 1px solid var(--bs-border-color);
  border-radius: var(--bs-border-radius-lg);
  padding: var(--space-xs) var(--space-sm);
  background: var(--bs-tertiary-bg);
}

.doc-toc-mobile summary {
  cursor: pointer;
  font-family: var(--header-font-family);
  color: var(--bs-body-color);
}

.doc-toc-mobile .doc-index {
  margin-top: var(--space-sm);
  max-height: 60vh;
  overflow-y: auto;
}

.doc-toc-mobile .doc-index-headings {
  max-height: none;
}

.doc-index {
  font-size: var(--font-size-sm);
  line-height: 1.35;
}

.doc-index-headings,
.doc-index-h3s {
  list-style: none;
  margin: 0;
  padding: 0;
}

.doc-index-select {
  margin-bottom: var(--space-sm);
}

.doc-index-headings {
  margin: var(--space-2xs) 0 0;
}

.doc-link {
  display: block;
  padding: var(--space-2xs) 0 var(--space-2xs) var(--space-sm);
  color: var(--bs-body-color);
  text-decoration: none;
  border-left: 2px solid transparent;
}

.doc-link:hover, .doc-link:focus {
  color: var(--theme-500);
  text-decoration: none;
}

.doc-link.active {
  border-left-color: var(--theme-500);
  color: var(--bs-body-color);
}

.doc-index-h3s .doc-link {
  padding-left: var(--space-lg);
  font-size: 0.875em;
  color: var(--bs-secondary-color);
}

/* Just below the header and #content's padding, as tall as the rest of the viewport */
#sticky-index {
  position: sticky;
  top: calc(var(--header-offset) + var(--content-padding));
  height: calc(100vh - var(--header-offset) - var(--content-padding));
  display: flex;
  flex-direction: column;
  overflow: hidden;
  padding-right: var(--space-sm);
}

#sticky-index .doc-search,
#sticky-index .doc-index-select {
  flex-shrink: 0;
}

#sticky-index .doc-index {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  min-height: 0;
}

#sticky-index .doc-index-headings {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  scrollbar-width: thin;
  scrollbar-color: var(--bs-gray-500) transparent;
}

.doc-search {
  position: relative;
  margin-bottom: var(--space-sm);
}

.doc-search .bi-search {
  position: absolute;
  left: 0.6rem;
  top: 50%;
  transform: translateY(-50%);
  color: var(--bs-secondary-color);
  pointer-events: none;
  font-size: 0.85rem;
}

.doc-search .doc-search-input {
  padding-left: 1.85rem;
}

.doc-search .doc-search-input:focus {
  outline: none;
  box-shadow: none !important;
}

#docs-layout {
  overflow-anchor: none;
}

.docs-ask {
  margin-left: auto;
  margin-right: auto;
}

.docs-ask .docs-ask-status {
  min-height: 1.5em;
}

.docs-ask .docs-ask-status-word {
  display: inline-block;
  opacity: 1;
  transition: opacity 1s ease;
}

.docs-ask .docs-ask-status-word.is-fading {
  opacity: 0;
}

.docs-ask .docs-deepwiki-source {
  margin-top: var(--space-lg);
}

.docs-ask .docs-deepwiki-source p {
  margin-bottom: 0;
}

.docs-ask .docs-deepwiki-source hr {
  margin: var(--space-lg) 0;
}

@media (prefers-reduced-motion: reduce) {
  .docs-ask .docs-ask-status-word {
    transition: none;
  }
}

#docs-layout.is-searching .doc-index,
#docs-layout.is-searching .doc-index-select,
#docs-layout.is-searching .doc-toc-mobile,
#docs-layout.is-searching #doc-body,
#docs-layout.is-searching .docs-question {
  display: none !important;
}

#docs-layout.is-searching #doc-search-results {
  display: block;
}

.doc-search-results {
  display: none;
}

.doc-search-count {
  color: var(--bs-secondary-color);
  margin-bottom: var(--space-sm);
}

.doc-search-list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.doc-search-result {
  display: block;
  padding: var(--space-sm) 0;
  border-bottom: 1px solid var(--bs-border-color);
  color: var(--bs-body-color);
  text-decoration: none;
}

.doc-search-result:hover, .doc-search-result:focus {
  color: var(--bs-body-color);
  text-decoration: none;
}

.doc-search-result:hover .doc-search-heading, .doc-search-result:focus .doc-search-heading {
  color: var(--theme-500);
}

.doc-search-page {
  display: block;
  font-size: var(--font-size-xs);
  color: var(--bs-secondary-color);
  margin-bottom: var(--space-2xs);
}

.doc-search-heading {
  display: block;
  font-family: var(--header-font-family);
  font-weight: bold;
  font-size: var(--font-size-base);
  line-height: 1.3;
  letter-spacing: -0.02em;
}

.doc-search-snippet {
  display: block;
  margin-top: var(--space-2xs);
  font-size: 0.875em;
  line-height: 1.4;
  color: var(--bs-secondary-color);
}