@import url('https://fonts.googleapis.com/css2?family=Figtree:wght@400;500;600;700;800&display=swap');

:root {

  /* ------------------------------------ */
  /* Adjust the following CSS variables to match your brands needs */
  /* ------------------------------------ */

  /* Your main brand color */
  --brand-bg: #007ba9;
  /* Your main brand text color */
  --brand-text: #007ba9;
  /* The color of text when it sits upon your brands color */
  --text-onbrand: #fff;
  /* The color of primary text within the theme - e.g., h1, h2, h3 */
  --text-primary: #282a30;
  /* The color of secondary text within the theme - e.g., p, a, li */
  --text-secondary: #3c4149;
  /* The color of tertiary text within the theme - e.g., footer, small text */
  --text-tertiary: #6f6e77;

  /* ------------------------------------ */
  /* CAUTION: The below variables concern structural elements within the theme. */
  /* You should not need to change these unless you are confident in what you are doing. */
  /* ------------------------------------ */

  --font-family-primary: "Figtree", system-ui, -apple-system, "Segoe UI", "Roboto", "Helvetica", "Arial", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";

  --bg-primary: var(--brand-bg);
  --bg-inverse: #fff;
  --bg-inverse-hover: #f9f8f9;
  --bg-dark: #282a30;
  --text-brand: var(--brand-text);
  --text-inverse: #fff;
  --text-dark: #282a30;
  
  --text-placeholder: rgba(32, 44, 53,0.4);
  --text-inverse-placeholder: rgba(255,255,255,0.8);
  --text-white: #fff;

  --border-primary: #e9e8ea;
  --border-primary-hover: var(--brand-text);
  --border-selected: var(--brand-text);
  --border-brand: var(--brand-text);
  --border-inverse: #fff;

  --system-text: #1570EF;
  --system-border: #B2DDFF;
  --system-bg: #EFF8FF;

  --system-blue-bg: #EFF8FF;
  --system-blue-text: #1849A9;
  --system-blue-border: #528BFF;

  --system-yellow-bg: #FEFBE8;
  --system-yellow-text: #FFC82C;
  --system-yellow-border: #FFC82C;

  --width-primary: 960px;

  /* The hero search field sits on the brand band and stays light in both
     themes; tokenising it removes the need for a dark-mode-only rule. */
  --input-bg: #fff;
  --input-text: #282a30;

  /* Docs shell. --nav-width is occupied by #sidebar in the CSS-only layer and by
     .pd-nav once the JS layer loads, so the reading column never shifts between
     the two. --toc-width is reserved only under html.pd-ready. */
  --nav-width: 264px;
  /* Height of the rail's search button. The nav rail's sticky offset is derived
     from it, so the two cannot overlap when either changes. */
  --search-h: 40px;
  --toc-width: 216px;
  --shell-max: 1440px;
  --measure: 44rem;
  --header-h: 64px;

  --font-settings: "cv01","ss03";
  --font-variations: "opsz" auto;
  --font-xs: 13px;
  --font-s: 14px;
  --font-md: 15px;
  --font-base: 16px;
  --font-lg: 18px;
  --font-xl: 22px;
  --font-hero: 28px;
  --font-h1: 32px;

  --radius-base: 8px;

  --spacing-xxl: 7rem;
  --spacing-xl: 3.25rem;
  --spacing-l: 2.25rem;
  --spacing-m: 1.75rem;
  --spacing-s: 1.25rem;
  --spacing-xs: 1rem;
  --spacing-xxs: 0.875rem;
  --spacing-xxxs: 0.6rem;
  --spacing-xxxxs: 0.2rem;

  --opacity-dimmed: 0.4;

  --lineheight-base: 1.3;

  --shadow-base: rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0.05) 0px 1px 2px 0px;

  --transition-base: all 0.2s ease-in-out;

  --zindex-top: 1040;

}

body {
  font-family: var(--font-family-primary);
  font-size: var(--font-base);
  font-weight: 500;
  line-height: var(--lineheight-base);
  background: var(--bg-inverse);
  /* `clip` rather than `hidden`: overflow:hidden makes <body> a scroll container,
     which silently breaks position:sticky on the nav rail and header. */
  overflow-x: clip;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  -webkit-tap-highlight-color: transparent;
  -webkit-touch-callout: none;
  font-feature-settings: var(--font-settings);
  font-variation-settings: var(--font-variations);
}

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

/* ------------------------------------ */
/* Typography — Figtree throughout                                      */
/* Selectors are scoped to beat Help Scout's base launch-*.css rules.   */
/* ------------------------------------ */

/* Article title — Figtree, like everything else. */
.title,
#fullArticle .title {
  font-family: var(--font-family-primary) !important;
  font-weight: 600 !important;
  font-size: 34px !important;
  letter-spacing: -0.02em;
  line-height: 1.2;
}

/* H1 — Figtree Medium 28px (separate from .title) */
h1,
#docsSearch h1,
#categoryHead h1,
.contentWrapper h1,
#fullArticle h1,
#generic #errorContainer h1 {
  font-family: var(--font-family-primary) !important;
  font-weight: 500 !important;
  font-size: 28px !important;
  letter-spacing: 0;
}

/* H2 — Figtree Medium 24px */
h2,
.collection-category h2,
.collection-category h2 a,
.contentWrapper h2,
#fullArticle h2 {
  font-family: var(--font-family-primary) !important;
  font-weight: 500 !important;
  font-size: 24px !important;
  letter-spacing: 0;
  text-transform: none;
}

/* H3 — Figtree Regular 400, sizes per context */
h3,
.category-list h3,
.contentWrapper h3,
#fullArticle h3,
.related h3,
#sidebar h3 {
  font-family: var(--font-family-primary) !important;
  font-weight: 400 !important;
  letter-spacing: 0;
}

.related h3 {
  font-size: 16px !important;
  text-transform: none !important;
}

#fullArticle h3 {
  font-size: 20px !important;
  text-transform: uppercase !important;
  letter-spacing: 0.04em;
}

.category-list h3 {
  font-size: 20px !important;
  text-transform: none !important;
}

/* Body copy — Figtree Medium 500. Overrides scoped paragraph rules. */
p,
li,
dd,
blockquote,
#fullArticle p,
#fullArticle li,
#fullArticle dd,
#fullArticle blockquote {
  font-family: var(--font-family-primary);
  font-weight: 500;
}

a {
  color: var(--text-brand);
  font-weight: 500;
  transition: color 0.2s ease-in-out;
}

a:hover, a:focus {
  color: var(--text-primary);
  text-decoration: none;
}

a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible {
  outline: none;
  box-shadow: 0 0 0 1px var(--bg-inverse), 0 0 0 3px var(--border-selected) !important;
  border-radius: var(--radius-base);
  text-decoration: none;
  border-color: transparent !important;
}

a:active, button:active {
  box-shadow: none;
}


input, button, select, textarea {
  font-family: var(--font-family-primary);
  font-size: var(--font-base);
  line-height: 1.3;
}

select {
  width: 220px;
  border: 1px solid var(--border-primary);
  background-color: var(--bg-inverse);
  color: var(--text-primary);
}

.container-fluid {
  width: 100%;
  max-width: var(--width-primary);
  padding-left: 0;
  padding-right: 0;
}

/* The header must line up with the docs shell, which is wider than the
   960px --width-primary that .container-fluid assumes. */
#mainNav .navbar-inner .container-fluid {
  max-width: var(--shell-max);
  padding-left: var(--spacing-s);
  padding-right: var(--spacing-s);
  display: flex;
  align-items: center;
  gap: var(--spacing-xxs);
}

#mainNav .nav-collapse {
  margin-left: auto;
}

#mainNav {
  position: sticky;
  top: 0;
  left: 0;
  z-index: var(--zindex-top);
  background: var(--bg-primary);
}

.navbar {
  margin: 0 !important;
}

.navbar .navbar-inner {
  background: none;
  padding: var(--spacing-xxs);
  box-shadow: none;
}

.navbar .brand {
  font-weight: 500;
  color: var(--text-primary);
  display: inline-flex;
  align-items: center;
  /* Bootstrap pads this generously, which was making the header ~103px tall.
     --header-h is measured at runtime either way, so this is purely visual. */
  padding: 0;
  margin: 0;
  line-height: 1;
}

.navbar .brand img,
.navbar .brand .brand-logo {
  max-width: 100%;
  max-height: 32px;
  height: auto;
  width: auto;
  display: block;
}

.navbar .nav {
  display: flex;
  gap: var(--spacing-s);
}

.navbar .nav a {
  font-size: var(--font-s);
  font-weight: 500;
  text-transform: capitalize;
  
}

.navbar .nav > li > a {
  padding: 11px 0;
}

.navbar .nav li a {
  color: var(--text-secondary);
}

.navbar .nav .active a, .navbar .nav .active a:hover, .navbar .nav .active a:focus {
  color: var(--text-brand);
}

.navbar .nav .active a:before {
  content: "";
  position: absolute;
  left: calc(50% - 2.5px);
  bottom: 4px;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--text-brand);
}

.navbar .nav li a:hover, .navbar .nav li a:focus {
  opacity: 1;
  color: var(--text-brand);
}

.navbar [class^=icon-], [class*=" icon-"], .featherlight-close-icon {
  color: var(--text-secondary);
  opacity: var(--opacity-dimmed);
}

.navbar .nav .active .caret {
  display: none;
}

.navbar .btn-navbar {
  margin: 0;
  color: var(--text-onbrand);
  top: 12px;
}

.navbar .btn-navbar .icon-bar {
  background-color: var(--text-onbrand);
  box-shadow: 0;
  border-radius: 0;
  opacity: 1;
}


.icon-private-lg {
  opacity: var(--opacity-dimmed);
}


/* Homepage only — Help Scout does not render #docsSearch on inner pages. */
#docsSearch {
  background: var(--bg-primary);
  padding: var(--spacing-s) var(--spacing-s) 0;
  border: 0;
  margin-bottom: 0;
}

#docsSearch + #contentArea {
  margin-top: var(--spacing-m);
}

#docsSearch h1 {
  font-weight: 600;
  color: var(--text-onbrand);
  width: 100%;
  max-width: var(--width-primary);
  margin: 0 auto;
  text-align: left;
  font-size: var(--font-hero);
}

#docsSearch #searchBar {
  width: 100%;
  max-width: var(--width-primary);
  margin: 0 auto;
  padding: var(--spacing-m) 0 var(--spacing-l);
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: var(--spacing-xxs);
}

/* Sits on the brand band, so it stays a light field in both themes.
   Driven by --input-* tokens so no theme-conditional rule is needed. */
#docsSearch #searchBar .search-query {
  background-color: var(--input-bg);
  border: 0;
  box-shadow: var(--shadow-base);
  color: var(--input-text);
  height: 60px;
  border-radius: var(--radius-base);
  font-size: var(--font-lg);
}

/* Base CSS hardcodes #fff here, which would stay white in dark mode. */
.contentWrapper {
  background: var(--bg-inverse);
}

#docsSearch #searchBar .search-query::placeholder {
  color: var(--text-placeholder);
}

#docsSearch #searchBar button {
  background: var(--bg-primary);
  border: 0;
  box-shadow: none;
  border-radius: calc(var(--radius-base) - 2px);
  color: var(--text-onbrand);
  font-size: var(--font-s);
  text-shadow: none;
  height: calc(60px - 20px);
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 var(--spacing-xs);
  position: relative;
  top: inherit;
  left: inherit;
  right: 10px;
  font-weight: 600;
  position: absolute;
}

/* ------------------------------------ */
/* Docs shell                                                           */
/* Help Scout ships a Bootstrap 2 float grid (.row-fluid/.span9/.span3) */
/* in launch-*.css, which loads before us. We cannot remove it, so the  */
/* grid rules below neutralise float/width/margin explicitly.           */
/* ------------------------------------ */

#contentArea {
  padding-top: 0;
  max-width: var(--shell-max);
  margin: 0 auto;
  padding-left: var(--spacing-s);
  padding-right: var(--spacing-s);
}

/* Inner pages (collection/category/article) — nav rail + reading column.
   DOM order is #main-content then #sidebar; explicit grid-column puts the rail
   on the left visually while keeping content first in the tab order. */
#contentArea .row-fluid {
  display: grid;
  grid-template-columns: var(--nav-width) minmax(0, 1fr);
  gap: var(--spacing-xl);
  align-items: start;
}

/* Defeat the Bootstrap 2 grid. .span9/.span3 set float+width+margin-left. */
#contentArea .row-fluid > #main-content.span9,
#contentArea .row-fluid > #sidebar.span3 {
  float: none;
  width: auto;
  min-width: 0;
  margin-left: 0;
}

#main-content {
  grid-column: 2;
  grid-row: 1;
  background: none;
  margin: 0;
  padding: 0;
}

/* The nav rail. Was a horizontal search strip under a brand-coloured band. */
#sidebar {
  grid-column: 1;
  grid-row: 1;
  margin: 0;
  display: block;
  position: sticky;
  top: calc(var(--header-h) + var(--spacing-s));
  max-height: calc(100vh - var(--header-h) - var(--spacing-m));
  overflow-y: auto;
  overscroll-behavior: contain;
  padding-right: var(--spacing-xxs);
}

/* The full-bleed brand band behind the old search strip. */
#sidebar:before {
  content: none;
}

#sidebar h3 {
  display: block;
  font-size: var(--font-xs);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--text-tertiary);
  margin: var(--spacing-s) 0 var(--spacing-xxs);
}

#sidebar .nav-list {
  display: block;
  list-style: none;
  margin: 0;
  padding: 0;
}

#sidebar .nav-list li {
  list-style: none;
  margin: 0;
}

#sidebar .nav-list > li > a {
  display: block;
  padding: var(--spacing-xxxs) var(--spacing-xxs);
  border-radius: calc(var(--radius-base) - 3px);
  font-size: var(--font-md);
  font-weight: 500;
  line-height: 1.4;
  color: var(--text-secondary);
  text-decoration: none;
  transition: var(--transition-base);
}

#sidebar .nav-list > li > a:hover {
  background: var(--bg-inverse-hover);
  color: var(--text-primary);
}

#sidebar .nav-list > li.active > a {
  background: var(--bg-inverse-hover);
  color: var(--text-brand);
  font-weight: 600;
}

/* Help Scout reveals a chevron on the active item via
   `#sidebar .nav-list .active a .icon-arrow{display:inline-block}` (0,1,3,1).
   Mirror that selector exactly — equal specificity, and our sheet loads last. */
#sidebar .nav-list a .icon-arrow,
#sidebar .nav-list .active a .icon-arrow,
#sidebar .nav-list .active a:focus .icon-arrow,
#sidebar .nav-list .active a:hover .icon-arrow {
  display: none;
}

/* Rail search box — compact, not the 60px hero input. */
#sidebar #searchBar {
  margin: 0 0 var(--spacing-xxs);
}

#sidebar #searchBar .search-query {
  background-color: var(--bg-inverse);
  border: 1px solid var(--border-primary);
  box-shadow: none;
  color: var(--text-primary);
  height: 38px;
  width: 100%;
  border-radius: calc(var(--radius-base) - 2px);
  font-size: var(--font-s);
  padding: 0 var(--spacing-m) 0 var(--spacing-xxs);
}

#sidebar #searchBar .search-query:focus {
  border-color: var(--border-primary-hover);
  outline: none;
}

#searchBar.sm {
  position: relative;
}

#searchBar.sm button {
  height: 38px;
  right: var(--spacing-xxxs);
}

#searchBar {
  z-index: 100;
}

/* Reading column. Measure-constrained; the grid cell is wider than the text so
   the right side has room for the TOC rail once JS reserves it. */
.contentWrapper {
  max-width: var(--measure);
}

/* Anchor jumps must clear the sticky header. */
#fullArticle h2,
#fullArticle h3 {
  scroll-margin-top: calc(var(--header-h) + var(--spacing-s));
}

/* ------------------------------------ */
/* Help Scout chrome that fights the docs feel                          */
/* ------------------------------------ */

/* Sort dropdown — a KB affordance, not a docs one. */
#categoryHead .sort {
  display: none;
}

/* Print link floats over the title. */
#fullArticle .printArticle {
  opacity: 0;
  transition: var(--transition-base);
}

#fullArticle:hover .printArticle {
  opacity: 0.5;
}

#fullArticle .printArticle:hover {
  opacity: 1;
}


.collection-category .category-list, .category-list {
  display: grid;
  grid-template-columns: repeat(1, 1fr);
  gap: var(--spacing-s);
  margin-bottom: var(--spacing-l);
}

.category-list.two-col .category {
  width: auto;
}

.category-list .category {
  margin: 0;
  box-shadow: var(--shadow-base);
  border-radius: var(--radius-base);
  border: 1px solid var(--border-primary);
  display: flex;
  flex-direction: column;
  gap: calc(var(--spacing-xxs) / 2);
  transition: var(--transition-base);
  position: relative;
  padding: var(--spacing-s) var(--spacing-s) var(--spacing-m);
  background: var(--bg-inverse);
}

.category-list .category:before {
  content: "";
  left: 45px;
  top: 50%;
  transform: translate3d(0, -50%, 0);
  position: absolute;
  color: var(--text-secondary);
  opacity: var(--opacity-dimmed);
  width: 50px;
  height: 50px;
  background-image: url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNDgiIGhlaWdodD0iNDgiIHZpZXdCb3g9IjAgMCA0OCA0OCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZD0iTTQgNkgxNkMxOC4xMjE3IDYgMjAuMTU2NiA2Ljg0Mjg1IDIxLjY1NjkgOC4zNDMxNUMyMy4xNTcxIDkuODQzNDQgMjQgMTEuODc4MyAyNCAxNFY0MkMyNCA0MC40MDg3IDIzLjM2NzkgMzguODgyNiAyMi4yNDI2IDM3Ljc1NzRDMjEuMTE3NCAzNi42MzIxIDE5LjU5MTMgMzYgMTggMzZINFY2WiIgc3Ryb2tlPSIjODE4QzlDIiBzdHJva2Utd2lkdGg9IjIiIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIgc3Ryb2tlLWxpbmVqb2luPSJyb3VuZCIvPgo8cGF0aCBkPSJNNDQgNkgzMkMyOS44NzgzIDYgMjcuODQzNCA2Ljg0Mjg1IDI2LjM0MzEgOC4zNDMxNUMyNC44NDI5IDkuODQzNDQgMjQgMTEuODc4MyAyNCAxNFY0MkMyNCA0MC40MDg3IDI0LjYzMjEgMzguODgyNiAyNS43NTc0IDM3Ljc1NzRDMjYuODgyNiAzNi42MzIxIDI4LjQwODcgMzYgMzAgMzZINDRWNloiIHN0cm9rZT0iIzgxOEM5QyIgc3Ryb2tlLXdpZHRoPSIyIiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiLz4KPC9zdmc+Cg==");
}

.category-list .category:hover {
  border-color: var(--border-primary-hover);
  background: var(--bg-inverse);
}

.category-list .category:hover h3 {
  color: var(--text-brand);
}

.category-list .category:hover .article-count {
  color: var(--text-tertiary);
}

.collection-category h2 a {
  color: var(--text-primary);
  font-size: var(--font-xl);
  font-weight: 500;
}

.category-list h3 {
  margin: 0;
  padding: 0 0 0 var(--spacing-xxl);
  text-align: left;
  font-size: var(--font-base);
  color: var(--text-primary);
  font-weight: 600;
  transition: var(--transition-base);
}

.category-list .category p {
  margin: 0;
  padding: 0 0 0 var(--spacing-xxl);
  text-align: left;
  font-size: var(--font-base);
  color: var(--text-secondary);
  font-weight: 400;
}

.category-list .category .article-count {
  margin: calc(var(--spacing-xxs) / 2) 0 0;
  padding: 0 0 0 var(--spacing-xxl);
  text-align: left;
  font-size: var(--font-s);
  color: var(--text-tertiary);
  transition: var(--transition-base);
}


.contentWrapper {
  border: 0;
  border-radius: var(--radius-base);
  padding: var(--spacing-s) 0;
  background: var(--bg-inverse);
  min-height: auto;
}

.contentWrapper > .appMessage {
  top: 6px;
  font-size: var(--font-xs) !important;
  border-radius: var(--radius-base) var(--radius-base) 0 0;
  background: var(--system-blue-bg);
  color: var(--system-blue-text);
  border-bottom: 0;
  padding: var(--spacing-xxxs);
}

.contentWrapper > .appMessage em {
  font-size: var(--font-xs);
  font-weight: 500;
  background: var(--system-blue-border);
  color: var(--text-white);
  text-transform: none;
  display: inline-flex;
  justify-content: center;
  align-items: center;
  border-radius: calc(var(--radius-base) - 4px);
  padding: 0 var(--spacing-xxxs);
  height: 20px;
}

.contentWrapper h1 + ul.articleList {
  margin-top: var(--spacing-l);
}

#categoryHead h1 {
  font-size: var(--font-xl);
  font-weight: 500;
  margin-bottom: var(--spacing-l);
  color: var(--text-primary);
}

#categoryHead .sort {
  top: 0;
}


[class^=icon-], [class*=" icon-"], .featherlight-close-icon {
  color: var(--text-secondary);
}


.articleList {
  padding: var(--spacing-s);
  border-radius: var(--radius-base);
  border: 1px solid var(--border-primary);
  box-shadow: var(--shadow-base);
  display: flex;
  flex-direction: column;
  width: 100;
  margin: 0;
}

.articleList li {
  margin: 0;
  padding: 0;
}

.articleList a {
  margin: 0;
  font-size: var(--font-base);
  padding: var(--spacing-xxs);
  border-radius: var(--radius-base);
  display: flex;
  width: 100%;
  transition: var(--transition-base);
  position: relative;
}

.articleList a::before {
  content: "";
  position: absolute;
  right: 20px;
  top: 24px;
  transform: rotate(45deg);
  width: 6px;
  height: 2px;
  background: var(--text-brand);
}
.articleList a::after {
  content: "";
  position: absolute;
  right: 20px;
  top: 27px;
  transform: rotate(-45deg);
  width: 6px;
  height: 2px;
  background: var(--text-brand);
}

.articleList a:hover {
  text-decoration: none;
  color: var(--text-brand);
  background: var(--bg-inverse-hover);
}

.articleList a i {
  display: none;
}

.articleList a:hover span {
  text-decoration: none;
}

#serp .articlesFound strong {
  color: var(--text-primary);
}

.contentWrapper h1 {
  font-size: var(--font-xl);
  font-weight: 500;
  color: var(--text-primary);
}

.contentWrapper h1 strong {
  font-weight: 500;
  color: var(--text-primary);
}

#serp .articlesFound, #serp .nada {
  font-size: var(--font-s);
  color: var(--text-tertiary);
  margin: 0 0 var(--spacing-l);
}

#serp .articleList > li {
  margin: 0;
  padding: 0;
  transition: var(--transition-base);
  border-radius: var(--radius-base);
}

#serp .articleList > li:hover {
  background: var(--bg-inverse-hover);
}

#serp .articleList > li a {
  font-size: var(--font-base);
  font-weight: 500;
}

#serp .articleList > li p {
  margin: 0 0 var(--spacing-xxxs);
  color: var(--text-tertiary);
  padding: 0 var(--spacing-xxs) var(--spacing-xxs);
}

#serp-dd {
  top: 92px;
  border-radius: var(--radius-base);
  border: 0;
  border: 1px solid var(--border-primary);
  background: var(--bg-inverse);
  box-shadow: var(--shadow-base);
}

#serp-dd.sb {
  width: 100%;
  top: 64px;
  border-radius: var(--radius-base);
}

#serp-dd .result>li.active {
  background: var(--bg-inverse-hover);
}

#serp-dd .result>li.private a {
  color: var(--text-tertiary);
}

#serp-dd .result a:hover {
  color: var(--text-brand);
  background: var(--bg-inverse-hover);
}

#serp-dd .result a:hover, #serp-dd .result > li.active, #fullArticle strong a, #fullArticle a strong, .collection a, .contentWrapper a, .most-pop-articles .popArticles a, .most-pop-articles .popArticles a:hover span {
  color: var(--text-brand);
}

#serp-dd .noResults {
  color: var(--text-tertiary);
}

/* error page */

#generic {
  padding: var(--spacing-s);
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--bg-inverse);
}

#generic #errorContainer {
  padding: var(--spacing-m) var(--spacing-xl);
  border: 1px solid var(--border-primary);
  border-radius: var(--radius-base);
  background: var(--bg-inverse);
  display: flex;
  flex-direction: column;
  gap: var(--spacing-xxxs);
  box-shadow: var(--shadow-base);
}

#generic #errorContainer h1 {
  font-size: var(--font-lg);
  font-weight: 500;
  color: var(--text-primary);
  margin: 0;
  line-height: inherit;
}

#errorContainer p {
  line-height: inherit;
  font-size: var(--font-base);
  margin: 0;
  color: var(--text-tertiary);
}

#errorContainer .icon-error {
  display: none;
}

/* articles */

#fullArticle {
  position: relative;
  font-size: var(--font-base);
  color: var(--text-primary);
  line-height: 1.3;
  margin: 0 auto;
  max-width: 640px;
  width: 100%;
  border-radius: var(--radius-base);
  padding-bottom: var(--spacing-l);
}

#fullArticle.withPreview {
  padding-top: 0;
}

/* The purchased theme drew a card outline around the article with an oversized
   pseudo-element (960px wide, bleeding 160px each side). The docs layout uses
   column rules instead, so it is gone. */
#fullArticle::before {
  content: none;
}

#fullArticle .title {
  font-size: var(--font-h1);
  font-weight: 600;
  color: var(--text-primary);
  margin: var(--spacing-l) 0;
}

#fullArticle .printArticle {
  display: none;
}

#fullArticle .admin-edit {
  display: inline-flex;
  margin: 0 0 var(--spacing-m);
  color: var(--system-text);
  background: var(--system-bg);
  box-shadow: 0 0 0 1px var(--system-border);
}

.btn {
  text-shadow: none;
  color: var(--text-primary);
  background: var(--bg-inverse);
  border: 0;
  box-shadow: 0 0 0 1px var(--border-primary);
  display: inline-flex;
  height: 40px;
  padding: 0 var(--spacing-xs);
  align-items: center;
  justify-content: center;
  transition: var(--transition-base);
  font-size: var(--font-xs);
  font-weight: 500;
  border-radius: var(--radius-base);
}

.btn:hover {
  background: var(--bg-inverse-hover);
}

#fullArticle h1, #fullArticle h2, #fullArticle h3, #fullArticle h4, #fullArticle h5 {
  margin-bottom: var(--spacing-s);
  font-weight: 600;
  color: var(--text-primary);
}


#fullArticle p, #fullArticle ul, #fullArticle ol, #fullArticle li, #fullArticle div, #fullArticle blockquote, #fullArticle dd, #fullArticle table {
  font-size: var(--font-base);
  color: var(--text-secondary);
  margin-bottom: var(--spacing-m);
}

#fullArticle li {
  margin-bottom: var(--spacing-xxxs);
}

#fullArticle h2 {
  font-size: var(--font-xl);
  color: var(--text-primary);
}

#fullArticle table thead {
  color: var(--text-primary);
}

#fullArticle table {
  border: 1px solid var(--border-primary);
}

#fullArticle .callout-yellow, #fullArticle .callout-blue, #fullArticle .callout-red, #fullArticle .callout-green, #fullArticle .callout, #fullArticle .private-note {
  color: var(--text-primary);
  font-size: var(--font-sd);
  padding: var(--spacing-s) var(--spacing-m);
  margin-bottom: var(--spacing-m);
}

#fullArticle .callout-blue {
  background: var(--system-blue-bg);
  border-color: var(--system-blue-border);
}

#fullArticle .callout-blue p {
  color: var(--system-blue-text);
}

#fullArticle .callout-yellow {
  background: var(--system-yellow-bg);
  border-color: var(--system-yellow-border);
}

#fullArticle strong {
  color: var(--text-primary);
}

#fullArticle table th, #fullArticle table td {
  border-top: 1px solid var(--border-primary);
}

#fullArticle pre, #fullArticle code {
  background: var(--bg-inverse-hover);
  padding: var(--spacing-xxxxs);
  font-size: var(--font-xs);
  line-height: var(--lineheight-base);
  color: var(--text-secondary);
  margin: 0 0 var(--spacing-m);
  border-radius: 0;
  border-color: var(--border-primary);
}

#fullArticle blockquote {
  border: 0;
  box-shadow: inset 5px 0 0 0 var(--border-primary);
  padding: var(--spacing-xxs) var(--spacing-s);
}

#fullArticle img {
  border: 0;
  border-radius: 0;
  padding: 0;
  margin: var(--spacing-m) 0;
}

/* article footer */

.articleFoot {
  margin: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--spacing-s) 0;
  display: none;
}

.articleFoot p.lu, .articleFoot time.lu {
  float: none;
  margin: 0;
}

.articleFoot p.help {
  margin: 0;
}

.articleFoot p, .articleFoot time {
  font-family: var(--font-family-primary);
  font-size: var(--font-xs);
  font-weight: 400;
  font-style: normal;
  color: var(--text-tertiary);
}

.articleFoot .icon-contact {
  display: none;
}

#sbContact {
  border: 0;
  color: var(--text-primary);
  font-weight: 500;
  margin-right: 3px;
}

#sbContact:hover {
  border: 0;
  color: var(--text-primary);
}

.contentWrapper.withRelated {
  padding-bottom: 0;
}

.related {
  background: var(--bg-inverse);
  border-radius: var(--radius-base);
  border: 1px solid var(--border-primary);
  box-shadow: var(--shadow-base);
  padding: var(--spacing-m);
  margin: var(--spacing-s) 0;
}

.related h3 {
  text-transform: none;
  font-size: var(--font-xs);
  color: var(--text-primary);
  line-height: var(--lineheight-base);
  padding-left: var(--spacing-xxs);
}

.related ul {
  margin: 0;
  padding: var(--spacing-xs) 0 0;
  display: flex;
  flex-direction: column;
}

.related ul > li {
  padding: 0;
}

.related ul > li a {
  line-height: var(--lineheight-base);
  display: flex;
  margin: 0;
  font-size: var(--font-base);
  padding: var(--spacing-xxs);
  border-radius: var(--radius-base);
  display: flex;
  width: 100%;
  transition: var(--transition-base);
  position: relative;

}

.related ul > li a:hover {
  color: var(--text-brand);
  background: var(--bg-inverse-hover);
}

.related ul > li a:hover span {
  text-decoration: none;
}

.related ul > li a i {
  display: none;
}

footer {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--spacing-m) 0;
  font-size: var(--font-s);
  color: var(--text-tertiary);
}

footer p, footer p a {
  margin: 0;
  color: var(--text-tertiary);
  font-size: var(--font-xs);
}

footer p a:hover {
  color: var(--text-primary);
}


/* ratings */

.articleRatings {
  box-shadow: none;
  border: 0;
  margin-top: var(--spacing-xl);
  background: var(--bg-inverse-hover);
  border-radius: var(--radius-base);
  font-size: var(--font-s);
  color: var(--text-tertiary);
  padding: var(--spacing-m);
}

.rateAction {
  background: var(--bg-inverse-hover);
  box-shadow: none;
  border-color: var(--text-tertiary);
}

.rating-face {
  fill: var(--text-tertiary);
}

.rateAction:not([disabled=disabled]):hover, .rateAction:not([disabled=disabled]):focus {
  box-shadow: none;
}

/* breakpoints */

/* Below the two-column threshold the rail stacks above the content and stops
   being sticky. Without JS there is nothing to collapse it into, so keep it
   short: the search field plus the current collection's categories. */
@media (max-width: 1023px) {
  #contentArea .row-fluid {
  grid-template-columns: minmax(0, 1fr);
  gap: var(--spacing-s);
  }

  #contentArea .row-fluid > #main-content.span9 {
  grid-column: 1;
  grid-row: 2;
  }

  #contentArea .row-fluid > #sidebar.span3 {
  grid-column: 1;
  grid-row: 1;
  position: static;
  max-height: none;
  overflow-y: visible;
  padding-right: 0;
  padding-bottom: var(--spacing-s);
  border-bottom: 1px solid var(--border-primary);
  }

  #sidebar h3 {
  margin-top: 0;
  }

  .contentWrapper {
  max-width: none;
  }
}

@media (max-width: 768px) and (max-width: 480px) {
  #searchBar button span {
  display: none;
  }

  #searchBar .search-query {
  margin-right: 0;
  }
}


@media (max-width: 768px){
  body {
  padding: 0;
  }

  .collection-category h2 {
  text-align: left;
  }

  #docsSearch {
  margin: 0;
  }

  #contentArea {
  padding: 0 var(--spacing-s);
  }

  .navbar .nav {
  flex-direction: column;
  }

  #fullArticle::before {
  display: none;
  }

  #sidebar {
  padding: 0;
  margin-bottom: 0;
  }

  #mainNav {
  position: relative;
  }

}



/* ------------------------------------ */
/* Light only                                                           */
/* Dark mode was removed deliberately. `color-scheme: light` keeps the  */
/* browser's own UI — form controls, scrollbars, the canvas behind the  */
/* page — light even when the OS is set to dark, which is what stops a  */
/* dark-mode visitor seeing white text in native widgets.               */
/* ------------------------------------ */

:root {
  color-scheme: light;
}

/* ==================================================================== */
/* Layer 2 — styles for the JS enhancement layer.                       */
/*                                                                      */
/* EVERY rule that changes layout is gated on html.pd-ready, which the  */
/* bundle sets only after it has successfully inserted its DOM. If the  */
/* script 404s or throws, none of this applies and the page renders as  */
/* the CSS-only theme — in particular there is no orphaned empty rail.  */
/* ==================================================================== */

/* Help Scout's original grid row still holds #sidebar (and the search form
   app4.min.js binds to). Hide it, but keep it in the DOM. */
html.pd-ready #contentArea > .row-fluid {
  display: none;
}

/* Two rows so the search trigger sits above the nav in the rail column rather
   than on top of it; the content and TOC columns span both. */
html.pd-ready .pd-shell {
  display: grid;
  grid-template-columns: var(--nav-width) minmax(0, 1fr);
  grid-template-rows: auto minmax(0, 1fr);
  column-gap: var(--spacing-xl);
  row-gap: var(--spacing-xxs);
  align-items: start;
}

html.pd-ready.pd-has-toc .pd-shell {
  grid-template-columns: var(--nav-width) minmax(0, 1fr) var(--toc-width);
}

html.pd-ready .pd-main {
  grid-column: 2;
  grid-row: 1 / span 2;
  min-width: 0;
  max-width: var(--measure);
}

/* The Layer 1 rule that neutralises Bootstrap's float grid is scoped to
   `#contentArea .row-fluid > ...`, which stops matching the moment the JS moves
   #main-content into .pd-shell — at which point .span9's float, percentage
   width and margin-left come back and the content escapes its column. Restate
   it for the moved node. */
html.pd-ready .pd-shell .span9,
html.pd-ready .pd-shell .span3,
html.pd-ready .pd-shell .span12,
html.pd-ready .pd-shell #main-content {
  float: none;
  width: auto;
  min-width: 0;
  margin-left: 0;
}

/* .pd-main already applies the measure; a second cap here would compound. */
html.pd-ready .pd-main .contentWrapper {
  max-width: none;
}

/* ---------------- nav rail ---------------- */

.pd-nav,
.pd-toc,
.pd-search-trigger,
.pd-backdrop,
.pd-nav-open,
.pd-toc-m {
  display: none;
}

html.pd-ready .pd-nav {
  display: block;
  grid-column: 1;
  grid-row: 2;
  position: sticky;
  /* Clears the header AND the sticky search button above it. */
  top: calc(var(--header-h) + var(--spacing-s) + var(--search-h) + var(--spacing-xs));
  max-height: calc(100vh - var(--header-h) - var(--search-h) - var(--spacing-xl));
  overflow-y: auto;
  overscroll-behavior: contain;
  padding-right: var(--spacing-xxs);
}

html.pd-ready .pd-search-trigger {
  display: flex;
  grid-column: 1;
  grid-row: 1;
  align-self: start;
  align-items: center;
  gap: var(--spacing-xxxs);
  width: 100%;
  position: sticky;
  top: calc(var(--header-h) + var(--spacing-s));
  height: var(--search-h);
  padding: 0 var(--spacing-xxxs) 0 var(--spacing-xxs);
  background: var(--bg-inverse);
  border: 1px solid var(--border-primary);
  border-radius: calc(var(--radius-base) - 2px);
  color: var(--text-tertiary);
  font-family: var(--font-family-primary);
  font-size: var(--font-s);
  text-align: left;
  cursor: pointer;
  transition: var(--transition-base);
}

.pd-search-icon {
  flex: 0 0 auto;
  width: 15px;
  height: 15px;
  opacity: 0.75;
}

/* Takes the slack so the shortcut hint stays pinned right. */
.pd-search-label {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

html.pd-ready .pd-search-trigger:hover {
  border-color: var(--border-primary-hover);
  color: var(--text-primary);
}

.pd-kbd {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 34px;
  height: 22px;
  font-family: var(--font-family-primary);
  font-size: var(--font-xs);
  line-height: 1;
  color: var(--text-tertiary);
  background: var(--bg-inverse-hover);
  border: 1px solid var(--border-primary);
  border-radius: 4px;
  padding: 0 5px;
}

.pd-nav-list,
.pd-nav-sub {
  list-style: none;
  margin: 0;
  padding: 0;
}

.pd-nav-sub {
  margin-left: var(--spacing-xxs);
  padding-left: var(--spacing-xxxs);
  border-left: 1px solid var(--border-primary);
}

.pd-nav-row {
  display: flex;
  align-items: center;
  gap: 2px;
}

.pd-nav-a {
  display: block;
  flex: 1 1 auto;
  padding: var(--spacing-xxxs) var(--spacing-xxs);
  border-radius: calc(var(--radius-base) - 3px);
  font-size: var(--font-md);
  font-weight: 500;
  line-height: 1.35;
  color: var(--text-secondary);
  text-decoration: none;
  transition: var(--transition-base);
}

.pd-nav-a:hover {
  background: none;
  color: var(--text-tertiary);
  text-decoration: none;
}

.pd-nav-a:hover .pd-chev {
  color: var(--text-tertiary);
}

.pd-nav-a.is-current {
  background: var(--bg-inverse-hover);
  color: var(--text-brand);
  font-weight: 600;
}

.pd-nav-cat {
  color: var(--text-primary);
}

.pd-nav-toggle {
  flex: 0 0 auto;
  width: 20px;
  height: 20px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: none;
  border: 0;
  padding: 0;
  cursor: pointer;
  color: var(--text-tertiary);
}

.pd-chev {
  width: 0;
  height: 0;
  border-left: 4px solid currentColor;
  border-top: 3.5px solid transparent;
  border-bottom: 3.5px solid transparent;
  transition: transform 0.15s ease-in-out;
}

.pd-nav-toggle[aria-expanded="true"] .pd-chev {
  transform: rotate(90deg);
}

/* ---------------- on this page ---------------- */

html.pd-ready.pd-has-toc .pd-toc {
  display: block;
  grid-column: 3;
  grid-row: 1 / span 2;
  position: sticky;
  top: calc(var(--header-h) + var(--spacing-xl));
  max-height: calc(100vh - var(--header-h) - var(--spacing-xl) - var(--spacing-s));
  overflow-y: auto;
  overscroll-behavior: contain;
}

.pd-toc-list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.pd-toc-list li {
  list-style: none;
  margin: 0;
}

/* No rule or marker — the active heading is indicated by colour alone. */
.pd-toc-a {
  display: block;
  padding: 4px 0;
  font-size: var(--font-s);
  line-height: 1.35;
  color: var(--text-tertiary);
  text-decoration: none;
  transition: color 0.15s ease-in-out;
}

.pd-toc-a:hover {
  color: var(--text-secondary);
  text-decoration: none;
}

.pd-toc-a.is-on {
  color: var(--text-brand);
  font-weight: 600;
}

.pd-toc-h3 {
  padding-left: var(--spacing-xs);
}

/* ---------------- screen-reader helper ---------------- */

.pd-sr {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* ---------------- command palette ---------------- */

.pd-palette {
  padding: 0;
  border: 0;
  background: none;
  max-width: 560px;
  width: calc(100% - 2rem);
  /* The `* { margin: 0 }` reset near the top of this file beats the UA's
     `dialog:modal { margin: auto }`, so centring has to be restated here. */
  margin-inline: auto;
  margin-top: 12vh;
  margin-bottom: auto;
}

.pd-palette::backdrop {
  background: rgba(16, 18, 22, 0.45);
  backdrop-filter: blur(2px);
}

.pd-palette-box {
  background: var(--bg-inverse);
  border: 1px solid var(--border-primary);
  border-radius: var(--radius-base);
  box-shadow: 0 16px 48px rgba(0, 0, 0, 0.22);
  overflow: hidden;
}

/* Help Scout's base CSS carries a Bootstrap 2 rule —
     input[type=text] { height:18px; padding:4px 6px; font-size:12px; ... }
   — whose specificity (0,1,1) beats a bare class, which is why this field kept
   collapsing to an 18px slot. The extra qualifiers take it to (0,2,1), and the
   properties that rule sets are reset explicitly rather than left to chance. */
.pd-palette .pd-palette-box input.pd-palette-input {
  box-sizing: border-box;
  display: block;
  width: 100%;
  height: 56px;
  margin: 0;
  border: 0;
  border-bottom: 1px solid var(--border-primary);
  border-radius: 0;
  background: none;
  padding: 0 var(--spacing-s);
  font-family: var(--font-family-primary);
  font-size: var(--font-lg);
  line-height: 56px;
  color: var(--text-primary);
}

.pd-palette .pd-palette-box input.pd-palette-input::placeholder {
  color: var(--text-tertiary);
}

.pd-palette .pd-palette-box input.pd-palette-input:focus {
  outline: none;
  box-shadow: none !important;
}

.pd-palette-list {
  list-style: none;
  margin: 0;
  padding: var(--spacing-xxxs);
  max-height: 52vh;
  overflow-y: auto;
}

.pd-palette-list:empty {
  display: none;
}

.pd-palette-item {
  list-style: none;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 3px;
  min-height: 46px;
  padding: var(--spacing-xxxs) var(--spacing-xxs);
  border-radius: calc(var(--radius-base) - 3px);
  cursor: pointer;
}

.pd-palette-item[aria-selected="true"] {
  background: var(--bg-inverse-hover);
}

.pd-palette-name {
  font-size: var(--font-md);
  font-weight: 600;
  color: var(--text-primary);
}

.pd-palette-prev {
  font-size: var(--font-s);
  color: var(--text-tertiary);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* ---------------- responsive ---------------- */

/* No room for the TOC rail; it becomes a <details> above the article. */
@media (max-width: 1279px) {
  html.pd-ready.pd-has-toc .pd-shell {
  grid-template-columns: var(--nav-width) minmax(0, 1fr);
  }

  html.pd-ready.pd-has-toc .pd-toc {
  display: none;
  }

  /* ...and so must its column rule, or it draws through the article text. */
  html.pd-ready.pd-has-toc .pd-shell::after {
  content: none;
  }

  html.pd-ready .pd-toc-m {
  display: block;
  margin-bottom: var(--spacing-s);
  border: 1px solid var(--border-primary);
  border-radius: calc(var(--radius-base) - 2px);
  padding: var(--spacing-xxs);
  }

  html.pd-ready .pd-toc-m summary {
  cursor: pointer;
  font-size: var(--font-s);
  font-weight: 600;
  color: var(--text-secondary);
  }

  html.pd-ready .pd-toc-m .pd-toc-list {
  margin-top: var(--spacing-xxxs);
  }
}

/* Off-canvas drawer. Same element, repositioned — never reparented, so no
   handlers are lost and no ids are duplicated across breakpoints. */
@media (max-width: 1023px) {
  html.pd-ready .pd-shell,
  html.pd-ready.pd-has-toc .pd-shell {
  grid-template-columns: minmax(0, 1fr);
  grid-template-rows: auto auto;
  }

  html.pd-ready .pd-main {
  grid-column: 1;
  grid-row: 2;
  max-width: none;
  }

  html.pd-ready .pd-search-trigger {
  position: static;
  grid-column: 1;
  margin-bottom: var(--spacing-s);
  }

  html.pd-ready .pd-nav {
  position: fixed;
  top: 0;
  left: 0;
  bottom: 0;
  width: min(84vw, 320px);
  max-height: none;
  z-index: calc(var(--zindex-top) + 2);
  background: var(--bg-inverse);
  border-right: 1px solid var(--border-primary);
  padding: var(--spacing-s);
  transform: translateX(-100%);
  transition: transform 0.2s ease-in-out;
  }

  html.pd-drawer-open.pd-ready .pd-nav {
  transform: translateX(0);
  }

  /* Our drawer supersedes Help Scout's own mobile menu — two burgers side by
     side is just confusing. Hidden, not removed: app4.min.js still binds to it.
     (.nav-collapse is already hidden at every width.) */
  html.pd-ready #mainNav .btn-navbar {
  display: none;
  }

  html.pd-ready .pd-nav-open {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  margin-right: var(--spacing-xxs);
  background: none;
  border: 0;
  cursor: pointer;
  color: var(--text-onbrand);
  }

  .pd-burger,
  .pd-burger::before,
  .pd-burger::after {
  display: block;
  width: 18px;
  height: 2px;
  background: currentColor;
  border-radius: 2px;
  }

  .pd-burger {
  position: relative;
  }

  .pd-burger::before,
  .pd-burger::after {
  content: "";
  position: absolute;
  left: 0;
  }

  .pd-burger::before { top: -6px; }
  .pd-burger::after  { top: 6px; }

  html.pd-drawer-open .pd-backdrop {
  display: block;
  position: fixed;
  inset: 0;
  z-index: calc(var(--zindex-top) + 1);
  background: rgba(16, 18, 22, 0.45);
  }

  body.pd-locked {
  position: fixed;
  width: 100%;
  overflow: hidden;
  }
}

@media (prefers-reduced-motion: reduce) {
  .pd-nav,
  .pd-chev {
  transition: none;
  }
}

/* ---------------- client-side navigation ---------------- */

/* Thin top progress bar while a page is being fetched. Only ever visible when
   the JS layer is driving navigation. */
.pd-progress {
  display: none;
}

html.pd-ready .pd-progress {
  display: block;
  position: fixed;
  top: 0;
  left: 0;
  height: 2px;
  width: 0;
  z-index: calc(var(--zindex-top) + 5);
  background: var(--text-brand);
  opacity: 0;
  transition: width 0.25s ease-out, opacity 0.2s ease-in-out;
}

html.pd-ready.pd-navigating .pd-progress {
  width: 82%;
  opacity: 1;
  /* Creeps toward the right while waiting, then the class drops and it fades. */
  transition: width 6s cubic-bezier(0.1, 0.8, 0.2, 1), opacity 0.15s ease-in-out;
}

/* Dim the outgoing content just enough to signal work, without a flash on the
   fast cache-hit path. */
html.pd-ready.pd-navigating .pd-main {
  opacity: 0.65;
  transition: opacity 0.15s ease-in-out 0.12s;
}

html.pd-ready .pd-main h1:focus {
  outline: none;
}

@media (prefers-reduced-motion: reduce) {
  html.pd-ready .pd-progress,
  html.pd-ready.pd-navigating .pd-main {
  transition: none;
  }
}


/* ==================================================================== */
/* Chrome: transparent header + consistent section rules                */
/* ==================================================================== */

/* The header now sits on the page background rather than a brand-coloured
   band, with a single hairline separating it from the content. */
#mainNav {
  background: var(--bg-inverse);
  border-bottom: 1px solid var(--border-primary);
}

.navbar .navbar-inner {
  background: none;
  box-shadow: none;
}

/* The uploaded logo renders as-is; nothing to swap for a second theme. */

html.pd-ready .pd-nav-open {
  color: var(--text-secondary);
}

/* The rail carries the full Collection > Category > Article tree, so Help
   Scout's own collection links in the header are redundant. Hidden only under
   pd-ready: without the bundle this is the only way to reach a collection, and
   it stays in the DOM either way because app4.min.js binds to it. */
html.pd-ready #mainNav .nav-collapse {
  display: none;
}

/* One vertical rule between the nav rail and the reading column, matching the
   header hairline. Nothing between the content and the TOC. */
html.pd-ready .pd-shell {
  position: relative;
}

html.pd-ready .pd-shell::before,
html.pd-ready .pd-shell::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  width: 1px;
  background: var(--border-primary);
  pointer-events: none;
}

/* Between the nav rail and the reading column. */
html.pd-ready .pd-shell::before {
  left: calc(var(--nav-width) + (var(--spacing-xl) / 2));
}

/* Between the reading column and the "On this page" rail. Only drawn when that
   rail is actually present. */
html.pd-ready .pd-shell::after {
  content: none;
}

html.pd-ready.pd-has-toc .pd-shell::after {
  content: "";
  right: calc(var(--toc-width) + (var(--spacing-xl) / 2));
}

/* The hero band only ever appeared on the home page, which now opens on an
   article. Keep it on brand but drop it to a normal section. */
#docsSearch {
  background: none;
  padding-top: var(--spacing-m);
}

#docsSearch h1 {
  color: var(--text-primary);
}

#docsSearch #searchBar .search-query {
  border: 1px solid var(--border-primary);
}

/* ---------------- home renders an article ---------------- */

/* Hide the collection-card content until the article replaces it, so it never
   flashes. Removed again if the article cannot be loaded. */
html.pd-home-pending .pd-main > * {
  visibility: hidden;
}

/* Help Scout only renders the hero on "/", but it lives outside #contentArea,
   so a client-side navigation away from home left it on screen. The rail has
   its own search field and Cmd-K, so it is redundant whenever JS is driving. */
html.pd-ready #docsSearch {
  display: none;
}

/* ---------------- nav rail: category disclosure ---------------- */

/* Categories are buttons now, so they need the anchor's box reset. */
button.pd-nav-a {
  display: flex;
  align-items: center;
  gap: var(--spacing-xxxxs);
  width: 100%;
  background: none;
  border: 0;
  text-align: left;
  cursor: pointer;
  font-family: var(--font-family-primary);
  color: var(--text-primary);
}

/* Collection > Category > Article. Each level steps down in weight so the
   hierarchy reads at a glance inside a 264px rail. */
.pd-nav-col {
  font-weight: 600;
  color: var(--text-primary);
}

.pd-nav-cat {
  font-weight: 500;
  color: var(--text-primary);
}

.pd-nav-art {
  font-weight: 500;
  color: var(--text-secondary);
}

.pd-nav-a .pd-chev {
  flex: 0 0 auto;
  margin-left: var(--spacing-xxxs);
  color: var(--text-tertiary);
  opacity: 0.7;
}

.pd-nav-a[aria-expanded="true"] .pd-chev {
  transform: rotate(90deg);
}

.pd-nav-label {
  flex: 1 1 auto;
  min-width: 0;
}

/* Top-level collections get a little air between them. */
.pd-nav-list > .pd-nav-item + .pd-nav-item {
  margin-top: var(--spacing-xxxs);
}

/* The rail's nesting rule, aligned under the chevron. Indent is modest because
   an article can now sit two levels deep inside a 264px rail. */
.pd-nav-sub {
  margin-left: var(--spacing-xxxs);
  padding-left: var(--spacing-xxxs);
  border-left: 1px solid var(--border-primary);
}

/* The chevron now trails its row, so article text lines up with its siblings
   without any extra indent — depth comes from .pd-nav-sub alone. */

@media (max-width: 1023px) {
  /* The drawer supplies its own edge; the shell rules would float in space. */
  html.pd-ready .pd-shell::before,
  html.pd-ready .pd-shell::after,
  html.pd-ready.pd-has-toc .pd-shell::after {
  content: none;
  display: none;
  }
}