/* Fill the iframe / viewport so sidebars and the article column reach the bottom. */
:root { --wa-docs-header-h: 72px; }
html { height: 100%; }
body {
  min-height: 100%;
  display: flex;
  flex-direction: column;
}
.lf-top, .qd-top, .mv-top, .de-top, .pf-top,
.topbar, .site-header, header.header, header.topbar {
  flex: 0 0 auto;
}
.lf-layout, .qd-layout, .mv-layout, .de-layout, .pf-layout,
body > .layout {
  flex: 1 1 auto;
  align-items: start;
}

.lf-side, .qd-side, .mv-side, .de-side, .pf-side,
body > .layout > .sidebar, body > .layout > aside.sidebar {
  position: sticky;
  top: var(--wa-docs-header-h, 72px);
  height: calc(100dvh - var(--wa-docs-header-h, 72px));
  max-height: calc(100dvh - var(--wa-docs-header-h, 72px));
  overflow: auto;
  overscroll-behavior: contain;
}

.lf-toc, .qd-toc, .mv-toc, .de-toc, .pf-toc,
body > .layout > .toc, body > .layout > aside.toc {
  position: sticky;
  top: var(--wa-docs-header-h, 72px);
  height: calc(100dvh - var(--wa-docs-header-h, 72px));
  max-height: calc(100dvh - var(--wa-docs-header-h, 72px));
  overflow: auto;
  overscroll-behavior: contain;
}

.wa-docs-pager {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-items: stretch;
  gap: 16px;
  margin: 40px 0 8px;
  padding-top: 20px;
  border-top: 1px solid var(--line, #e5e7eb);
}
.wa-docs-pager > span { min-height: 1px; }
.wa-docs-pager a {
  display: block;
  min-width: 0;
  min-height: 78px;
  padding: 14px 16px;
  border-radius: 12px;
  border: 1px solid var(--line, #e5e7eb);
  color: var(--ink, inherit);
  background: var(--panel, #fff);
  text-decoration: none !important;
  line-height: 1.4;
  box-shadow: 0 8px 22px rgba(15, 23, 42, .04);
}
.wa-docs-pager a:hover {
  border-color: var(--accent, #4f46e5);
  background: var(--soft, #f2f5f8);
}
.wa-docs-pager a small {
  display: block;
  margin-bottom: 7px;
  color: var(--muted, #64748b);
  font-size: 12px;
  font-weight: 700;
}
.wa-docs-pager a strong {
  display: block;
  color: inherit;
  font-size: 15px;
  font-weight: 700;
  line-height: 1.45;
}
.wa-docs-pager .wa-docs-page-next { text-align: right; }

@media (max-width: 720px) {
  .wa-docs-pager { grid-template-columns: 1fr; }
  .wa-docs-pager > span { display: none; }
  .wa-docs-pager .wa-docs-page-next { text-align: left; }
}

.wa-home-btn {
  display: inline-flex;
  align-items: center;
  height: 32px;
  padding: 0 12px;
  margin-left: 6px;
  border-radius: 8px;
  font: 650 13px/1 inherit;
  text-decoration: none !important;
  white-space: nowrap;
  border: 1px solid currentColor;
  color: inherit;
  opacity: 0.88;
  flex-shrink: 0;
}
.wa-home-btn:hover {
  opacity: 1;
}
header .meta {
  display: flex;
  align-items: center;
  gap: 10px;
}

.wa-docs-menu {
  display: none;
  align-items: center;
  gap: 6px;
  margin: 0;
  padding: 6px 10px;
  border: 1px solid currentColor;
  border-radius: 8px;
  background: transparent;
  color: inherit;
  font: 650 13px/1 inherit;
  cursor: pointer;
  white-space: nowrap;
  flex-shrink: 0;
}
.wa-docs-menu:hover { opacity: 0.88; }
.wa-docs-backdrop {
  display: none;
}

@media (max-width: 800px) {
  :root { --wa-docs-header-h: 72px; }

  .wa-docs-menu { display: inline-flex; }

  .lf-top, .qd-top, .mv-top, .de-top, .pf-top,
  .topbar, .site-header, header.header, header.topbar {
    z-index: 90;
  }

  .lf-layout, .qd-layout, .mv-layout, .de-layout, .pf-layout, .layout {
    display: block !important;
    grid-template-columns: none !important;
  }

  .lf-side, .qd-side, .mv-side, .de-side, .pf-side,
  .layout > .sidebar, aside.sidebar {
    position: fixed !important;
    left: 0 !important;
    top: var(--wa-docs-header-h, 72px) !important;
    bottom: 0 !important;
    width: min(300px, 86vw) !important;
    max-width: 86vw !important;
    height: calc(100dvh - var(--wa-docs-header-h, 72px)) !important;
    max-height: calc(100dvh - var(--wa-docs-header-h, 72px)) !important;
    z-index: 80 !important;
    overflow: auto !important;
    transform: translate3d(-105%, 0, 0);
    transition: transform 0.2s ease;
    pointer-events: none;
    box-shadow: none;
  }

  body.wa-docs-nav-open .lf-side,
  body.wa-docs-nav-open .qd-side,
  body.wa-docs-nav-open .mv-side,
  body.wa-docs-nav-open .de-side,
  body.wa-docs-nav-open .pf-side,
  body.wa-docs-nav-open .layout > .sidebar,
  body.wa-docs-nav-open aside.sidebar {
    transform: translate3d(0, 0, 0);
    pointer-events: auto;
    box-shadow: 16px 0 40px rgba(15, 23, 42, 0.18);
  }

  .wa-docs-backdrop {
    display: block;
    position: fixed;
    top: var(--wa-docs-header-h, 72px);
    right: 0;
    bottom: 0;
    left: 0;
    background: rgba(15, 23, 42, 0.4);
    z-index: 70;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.2s ease;
  }
  body.wa-docs-nav-open .wa-docs-backdrop {
    opacity: 1;
    pointer-events: auto;
  }
  body.wa-docs-nav-open {
    overflow: hidden;
  }

  .lf-main, .qd-main, .mv-main, .de-main, .pf-main, .main {
    padding: 20px 16px 64px !important;
    max-width: 100% !important;
  }

  .lf-tabs, .qd-tabs, .mv-tabs, .de-tabs, .pf-tabs,
  header .tabs, .subnav {
    display: flex !important;
    flex-wrap: nowrap;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  .lf-tabs::-webkit-scrollbar,
  .qd-tabs::-webkit-scrollbar,
  .mv-tabs::-webkit-scrollbar,
  .de-tabs::-webkit-scrollbar,
  .pf-tabs::-webkit-scrollbar,
  header .tabs::-webkit-scrollbar,
  .subnav::-webkit-scrollbar { display: none; }

  .lf-top, .qd-top, .mv-top, .de-top, .pf-top,
  .topbar, .site-header, header.header, header.topbar {
    flex-wrap: wrap;
    height: auto;
    row-gap: 6px;
  }
  .topbar .tabs,
  .qd-tabs, .mv-tabs, .de-tabs, .pf-tabs, header.header .tabs, .subnav {
    flex: 1 1 100%;
    order: 8;
    min-width: 0;
  }

  .lf-cta, .qd-cloud, .mv-cta, .de-cta, .pf-cta, header a.btn.primary {
    display: none !important;
  }
  .lf-search, .qd-search, .mv-search, .de-search, .pf-search, input.search, .search-wrap {
    min-width: 0;
    max-width: 42vw;
    width: auto;
    flex: 1 1 120px;
  }
  .search-hits {
    left: 12px !important;
    right: 12px !important;
    width: auto !important;
    max-width: none;
  }
}