/*
 * Docs template layer — /docs/, /docs-category/*, /docs/<slug>/.
 *
 * Unlike every other sheet in design/, this one has no prototype in
 * deployment/wordpress/lab/. BetterDocs renders these 92 URLs from its own view
 * templates, so there is no markup of ours to style: the job is to map the
 * plugin's class names onto the tokens in shared.css, not to lay the pages out
 * again. The plugin's structural CSS — the masonry grid, the sticky sidebar,
 * the table-of-contents scroll-spy — is left doing its work.
 *
 * Load order is shared.css -> fx.css -> p-shared.css -> p-docs.css.
 *
 * TWO THINGS TO KNOW BEFORE EDITING
 *
 * 1. Every rule is scoped to `#qs-docs-main`, and it has to be. The plugin
 *    prints its customizer-generated CSS as an inline <style> in wp_head, which
 *    lands *after* the theme's enqueued <link>s, so a theme rule at equal
 *    specificity loses on source order. Those selectors run to six classes
 *    (`.betterdocs-wrapper.betterdocs-docs-archive-wrapper .betterdocs-category-
 *    grid-wrapper .betterdocs-category-grid-inner-wrapper > .betterdocs-single-
 *    category-wrapper .betterdocs-single-category-inner`); one id outranks all
 *    of them, which is what keeps this file short rather than a mirror of the
 *    plugin's. `#qs-docs-main` is opened by inc/docs.php from header.php.
 *
 * 2. Same constraint as the rest of the lab: no literal colour, radius or size.
 *    Every value below is a var() from shared.css. The `!important`s are only
 *    where the plugin's own inline CSS uses one — there are 71 on a doc page —
 *    and each is against a specific declaration, never a blanket.
 *
 * There is no dark-mode block here because this theme has no dark mode: there
 * is not one `body.dark-mode` or `prefers-color-scheme` rule anywhere in
 * design/. That convention belongs to the Django app's dashboard CSS, which is
 * a different codebase. Adding one here would invent a mode nothing switches.
 */

/* ---------- the region --------------------------------------------------
   The single biggest reason /docs/ read as a different website: BetterDocs is
   full-bleed. The sidebar sat against the left edge of the viewport and the
   contents rail against the right, at any width, while every other template on
   the site is 1200px centred. Nothing else in this file matters as much. */

#qs-docs-main .betterdocs-content-wrapper,
#qs-docs-main .betterdocs-search-form-wrapper > * {
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: var(--s-5);
}

@media (max-width: 560px) {
  #qs-docs-main .betterdocs-content-wrapper,
  #qs-docs-main .betterdocs-search-form-wrapper > * {
    padding-inline: var(--s-4);
  }
}

#qs-docs-main .betterdocs-wrapper { background: var(--canvas); }

/* ---------- page header + search band -----------------------------------
   Index heading is ours (inc/docs.php) and reuses .subhero from p-shared so
   /docs/ shares the contact/about atmosphere (glow, eyebrow, lede measure).
   The search box is still the plugin's and lands immediately after; CSS joins
   the two into one band rather than a title above a grey strip. */

.subhero--docs {
  padding-bottom: 0;
  background: transparent;
}

.subhero--docs .lede { margin: 0; }

/* Category archive: crumb + eyebrow only. The plugin still owns the h1. */
.docs-cat-intro {
  position: relative;
  padding: var(--s-5) 0 0;
  overflow: clip;
}

.docs-cat-intro .crumb { padding-top: 0; }

.docs-cat-intro .eyebrow {
  display: inline-block;
  margin-top: var(--s-3);
}

/* Ours sits above the search band; the plugin's in-column crumb would repeat. */
.docs-cat-intro ~ .betterdocs-wrapper #betterdocs-breadcrumb {
  display: none;
}

/* The plugin hard-codes #f7f7f7 and 50px of block padding here. The band is
   full-bleed by design — only its contents are constrained, above. */
#qs-docs-main .betterdocs-search-form-wrapper {
  background: transparent !important;
  padding-block: var(--s-5) var(--s-7) !important;
  border-bottom: 1px solid var(--line);
}

/* Directly under the subhero on the index, so heading + search read as one. */
#qs-docs-main .subhero--docs + .betterdocs-wrapper .betterdocs-search-form-wrapper {
  padding-top: var(--s-5) !important;
}

/* Category/single keep a lighter search strip — no full subhero above them.
   Must carry #qs-docs-main: the global rule above is one id + one class, so a
   bare .betterdocs-taxonomy-wrapper > … loses on specificity and keeps the
   index padding + divider (Bugbot on #8788). */
#qs-docs-main .docs-cat-intro + .betterdocs-wrapper > .betterdocs-search-form-wrapper,
#qs-docs-main .betterdocs-taxonomy-wrapper > .betterdocs-search-form-wrapper,
#qs-docs-main .betterdocs-single-wrapper > .betterdocs-search-form-wrapper,
#qs-docs-main .betterdocs-content-wrapper > .betterdocs-search-form-wrapper {
  background: transparent !important;
  padding-block: var(--s-4) var(--s-5) !important;
  border-bottom: 0;
}

/* One chrome surface only. Styling both the <form> and the inner wrap drew
   a card-in-card (border + shadow nested), which is what made search look
   bolted on after the subhero landed. */
#qs-docs-main .betterdocs-searchform {
  border-radius: var(--r-md);
  border: 1px solid var(--line-strong);
  background: var(--white);
  box-shadow: var(--shadow-sm);
  padding: var(--s-2) var(--s-3) !important;
}

#qs-docs-main .betterdocs-search-form-input-wrapper,
#qs-docs-main .betterdocs-searchform-input-wrap {
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

#qs-docs-main .betterdocs-searchform input[type='search'],
#qs-docs-main .betterdocs-searchform input[type='text'] {
  font-family: var(--font);
  font-size: var(--t-base);
  color: var(--ink);
  background: transparent;
  min-height: 44px;
}

#qs-docs-main .betterdocs-searchform input::placeholder { color: var(--muted); }

#qs-docs-main .betterdocs-searchform:focus-within {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-tint);
}

/* ⌘K chip and magnifier — plugin chrome that was reading as a third brand.
   The SVG ships at width="38px", which alone made the form ~78px tall. */
#qs-docs-main .betterdocs-searchform .docs-search-icon {
  width: 20px !important;
  height: 20px !important;
  flex: 0 0 auto;
}

#qs-docs-main .betterdocs-searchform .docs-search-icon path,
#qs-docs-main .betterdocs-searchform svg path {
  fill: var(--muted);
  stroke: var(--muted);
}

#qs-docs-main .betterdocs-searchform .search-close,
#qs-docs-main .betterdocs-search-modal-key {
  color: var(--muted);
  border-color: var(--line);
  background: var(--surface);
  border-radius: var(--r-sm);
  font-family: var(--font);
  font-size: var(--t-xs);
}

/* ---------- category cards on the index ----------------------------------
   Same interaction language as contact's .contact-help__item: white panel,
   hairline border, lift on hover. No saturated plugin blue titles. */

#qs-docs-main .betterdocs-content-wrapper { padding-block: var(--s-7); }

#qs-docs-main .betterdocs-docs-archive-wrapper .betterdocs-single-category-inner {
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  box-shadow: var(--shadow-sm);
  height: 100%;
  transition: border-color .2s var(--fx-ease), transform .2s var(--fx-ease-out), box-shadow .2s var(--fx-ease);
}

@media (hover: hover) and (prefers-reduced-motion: no-preference) {
  #qs-docs-main .betterdocs-docs-archive-wrapper .betterdocs-single-category-wrapper:hover .betterdocs-single-category-inner {
    border-color: var(--accent);
    transform: translateY(-2px);
    box-shadow: var(--shadow-md);
  }
}

#qs-docs-main .betterdocs-category-header,
#qs-docs-main .betterdocs-single-category-wrapper .betterdocs-body {
  padding: var(--s-5) !important;
}

#qs-docs-main .betterdocs-single-category-wrapper .betterdocs-body { padding-top: 0 !important; }

#qs-docs-main .betterdocs-category-header-inner {
  display: flex;
  align-items: center;
  gap: var(--s-3);
  padding-bottom: 0 !important;
  border-bottom: 0;
}

/* Uploaded PNGs in the media library, reached through <img src>, so page CSS
   cannot recolour them — only size them. Three of the seven are grey line art
   and will stay grey until someone replaces the artwork. */
#qs-docs-main .betterdocs-category-icon {
  width: var(--s-5);
  height: var(--s-5);
  flex-shrink: 0;
}
#qs-docs-main .betterdocs-category-icon-img {
  width: var(--s-5);
  height: var(--s-5);
  aspect-ratio: 1;
  object-fit: contain;
}

/* The plugin renders these in its own blue with a rule under them, which is
   what made the index read as a third-party page. They are card titles. */
#qs-docs-main .betterdocs-category-title {
  font-size: var(--t-lg);
  font-weight: 700;
  color: var(--ink);
  letter-spacing: -.022em;
  line-height: var(--lh-snug);
  border-bottom: 0;
  padding-bottom: 0;
  margin: 0;
  flex: 1 1 auto;
}

#qs-docs-main a .betterdocs-category-title:hover { color: var(--accent); }

/* Was a saturated blue disc floating at the card's top-right. A count is
   supporting information, so it gets the soft-chip treatment the rest of the
   site uses for the same job. */
#qs-docs-main .betterdocs-category-items-counts,
#qs-docs-main .betterdocs-category-items-counts span {
  background: var(--accent-tint) !important;
  color: var(--accent) !important;
  border-radius: var(--r-full);
  font-size: var(--t-xs);
  font-weight: 700;
  line-height: 1;
  width: auto;
  height: auto;
  min-width: 0;
  padding: var(--s-1) var(--s-2);
  box-shadow: none;
}

#qs-docs-main .betterdocs-category-items-counts { padding: 0; }

/* ---------- article lists (index cards, category archive, sidebar) ------- */

#qs-docs-main .betterdocs-articles-list,
#qs-docs-main .betterdocs-taxonomy-doc-category > ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--s-2);
}

#qs-docs-main .betterdocs-articles-list li,
#qs-docs-main .betterdocs-taxonomy-doc-category li {
  display: flex;
  align-items: flex-start;
  gap: var(--s-2);
  margin: 0;
}

#qs-docs-main .betterdocs-articles-list a,
#qs-docs-main .betterdocs-taxonomy-doc-category a {
  display: block;
  min-height: 24px;
  padding-block: 6px;
  color: var(--body);
  font-size: var(--t-sm);
  line-height: var(--lh-body);
  text-decoration: none;
  border-radius: var(--r-sm);
}

#qs-docs-main .betterdocs-articles-list a:hover,
#qs-docs-main .betterdocs-taxonomy-doc-category a:hover {
  color: var(--accent);
  text-decoration: underline;
}

/* Inline SVG, so unlike the category icons these do take a colour. Soften
   them: the list is readable without a document glyph on every row. */
#qs-docs-main .betterdocs-articles-list li > svg,
#qs-docs-main .betterdocs-taxonomy-doc-category li > svg {
  width: var(--s-4);
  height: var(--s-4);
  flex: 0 0 auto;
  margin-top: var(--s-1);
  opacity: .55;
}

#qs-docs-main .betterdocs-articles-list li > svg .st0,
#qs-docs-main .betterdocs-taxonomy-doc-category li > svg .st0 { fill: var(--muted); }

/* "Explore More" — the one button in the docs region. Matches .btn--ghost. */
#qs-docs-main .betterdocs-footer a,
#qs-docs-main .betterdocs-explore-btn {
  display: inline-flex;
  align-items: center;
  border: 1px solid var(--line-strong);
  border-radius: var(--r-full);
  background: var(--white);
  padding: var(--s-2) var(--s-4);
  font-size: var(--t-sm);
  font-weight: 600;
  color: var(--ink);
  text-decoration: none;
}

#qs-docs-main .betterdocs-footer a:hover,
#qs-docs-main .betterdocs-explore-btn:hover {
  border-color: var(--accent);
  color: var(--accent);
}

/* ---------- breadcrumb --------------------------------------------------
   Already rendered by the plugin on all 84 single docs and all 7 category
   archives — this styles what is there rather than adding anything. Matches
   p-shared's .crumb, except that the separator is the plugin's inline SVG
   chevron rather than a "/" pseudo-element, so it is recoloured, not replaced.
   /docs/ has no breadcrumb and needs none: it is the root of the section and a
   crumb there would only restate the h1. */

#qs-docs-main .betterdocs-breadcrumb { margin-bottom: var(--s-5); }

/* Two ids, and it needs both. The plugin paints this list #f9fafb inside a 20px
   pill from `#betterdocs-breadcrumb.betterdocs-breadcrumb.layout-2 .betterdocs-
   breadcrumb-list` — 1 id and 3 classes — which drew a grey bar the width of the
   content column above every doc title. `#qs-docs-main` alone loses to it. This
   is the one selector in the file where the plugin brings an id of its own. */
#qs-docs-main #betterdocs-breadcrumb .betterdocs-breadcrumb-list {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--s-2);
  list-style: none;
  margin: 0;
  padding: 0;
  background: transparent;
  border-radius: 0;
}

#qs-docs-main .betterdocs-breadcrumb-item,
#qs-docs-main .betterdocs-breadcrumb-item a {
  font-size: var(--t-sm);
  color: var(--muted);
  text-decoration: none;
  margin: 0;
}

#qs-docs-main .betterdocs-breadcrumb-item a:hover {
  color: var(--accent);
  text-decoration: underline;
}

#qs-docs-main .betterdocs-breadcrumb-item.current,
#qs-docs-main .betterdocs-breadcrumb-item.item-current { color: var(--ink); font-weight: 600; }

#qs-docs-main .breadcrumb-delimiter-icon path { fill: var(--line-strong); stroke: var(--line-strong); }

/* ---------- category sidebar --------------------------------------------
   Layout-8 / sidebar-layout-7 still ship mint active washes and a floating
   4px ::before bar parked at left:-11px. That bar is what made long FAQ
   titles look disconnected from the grey nest rail. Restyle to one language:
   continuous left rail on the list, active row as tint + accent border, no
   document glyphs, titles that wrap cleanly. */

#qs-docs-main .betterdocs-sidebar,
#qs-docs-main .betterdocs-full-sidebar-left {
  background: var(--surface);
  border-right: 1px solid var(--line);
}

#qs-docs-main .betterdocs-sidebar .betterdocs-single-category-inner {
  background: transparent;
  border: 0;
  border-radius: 0;
  box-shadow: none;
}

/* Layout-7 draws a 1px grey ::before down the whole active category at
   left:18px. That is the "thin tree line" that sat next to the old floating
   active bar and never lined up with anything. Our list border-left is the
   nest rail now, so kill the plugin's. */
#qs-docs-main .betterdocs-sidebar .betterdocs-single-category-wrapper::before,
#qs-docs-main .betterdocs-sidebar .betterdocs-single-category-wrapper::after,
#qs-docs-main .betterdocs-sidebar .betterdocs-single-category-wrapper.active::before,
#qs-docs-main .betterdocs-sidebar .betterdocs-single-category-wrapper.active::after {
  content: none !important;
  display: none !important;
  width: 0 !important;
  height: 0 !important;
  background: transparent !important;
}

/* Sidebar search — same chrome as the index search, smaller. */
#qs-docs-main .betterdocs-sidebar .betterdocs-searchform,
#qs-docs-main .betterdocs-full-sidebar-left .betterdocs-searchform {
  margin: var(--s-4) var(--s-4) var(--s-3);
  padding: var(--s-1) var(--s-2) !important;
}

#qs-docs-main .betterdocs-sidebar .betterdocs-category-header-inner {
  display: flex;
  align-items: center;
  gap: var(--s-2);
  width: 100%;
}

#qs-docs-main .betterdocs-sidebar .betterdocs-category-icon {
  width: 20px;
  height: 20px;
  margin: 0 !important;
  flex: 0 0 auto;
}

#qs-docs-main .betterdocs-sidebar .betterdocs-category-icon img,
#qs-docs-main .betterdocs-sidebar .betterdocs-category-icon svg {
  width: 18px !important;
  height: 18px !important;
  display: block;
}

#qs-docs-main .betterdocs-sidebar .betterdocs-category-title {
  flex: 1 1 auto;
  min-width: 0;
  font-size: var(--t-sm);
  font-weight: 600;
  line-height: var(--lh-snug);
  color: var(--ink);
}

#qs-docs-main .betterdocs-sidebar .betterdocs-category-title a {
  color: inherit;
  text-decoration: none;
}

/* Count chip — sit on the right, never collide with the title. */
#qs-docs-main .betterdocs-sidebar .betterdocs-category-items-counts,
#qs-docs-main .betterdocs-sidebar .betterdocs-category-items-counts span {
  flex: 0 0 auto;
  margin-left: auto;
  background: var(--white) !important;
  color: var(--muted) !important;
  border: 1px solid var(--line);
  border-radius: var(--r-full);
  font-size: var(--t-xs);
  font-weight: 700;
  line-height: 1;
  min-width: 0;
  width: auto !important;
  height: auto !important;
  padding: 2px 7px !important;
  box-shadow: none !important;
}

/* Tight on purpose. The plugin gives .betterdocs-sidebar-content a fixed height
   with overflow:auto, so every pixel of row padding pushes a category out of
   sight and behind a scroll. */
#qs-docs-main .betterdocs-sidebar .betterdocs-category-header {
  padding: var(--s-2) var(--s-3) !important;
  border-radius: var(--r-sm);
  border: 1px solid transparent;
  background: transparent !important;
}

#qs-docs-main .betterdocs-sidebar .betterdocs-body {
  padding: var(--s-1) var(--s-3) var(--s-3) !important;
}

#qs-docs-main .betterdocs-sidebar .category-grid.active .betterdocs-category-title,
#qs-docs-main .betterdocs-sidebar .betterdocs-single-category-wrapper.active .betterdocs-category-title {
  color: var(--accent);
}

#qs-docs-main .betterdocs-sidebar .betterdocs-single-category-wrapper.active .betterdocs-category-header {
  background: var(--accent-tint) !important;
  border-color: transparent !important;
}

#qs-docs-main .betterdocs-sidebar .betterdocs-single-category-wrapper.active .betterdocs-category-items-counts,
#qs-docs-main .betterdocs-sidebar .betterdocs-single-category-wrapper.active .betterdocs-category-items-counts span {
  background: var(--white) !important;
  color: var(--accent) !important;
  border-color: var(--accent-tint);
}

/* Article list: one continuous nest rail, no per-row document icons.
   Selectors include .betterdocs-full-sidebar-left as well as .betterdocs-
   sidebar: layout-8 marks the left rail with both classes today, but the
   ::before kill below is scoped to full-sidebar-left alone, so the border
   width that replaces it has to land on that selector too (Bugbot on #8793). */
#qs-docs-main .betterdocs-sidebar .betterdocs-articles-list,
#qs-docs-main .betterdocs-full-sidebar-left .betterdocs-articles-list {
  gap: 2px;
  margin: var(--s-1) 0 0;
  padding: 0 0 0 var(--s-3);
  border-left: 1px solid var(--line);
}

#qs-docs-main .betterdocs-sidebar .betterdocs-articles-list li,
#qs-docs-main .betterdocs-full-sidebar-left .betterdocs-articles-list li {
  display: block;
  position: relative;
  gap: 0;
  margin: 0;
  padding: 0;
}

/* Plugin drops an <svg> before every title. In a 205px rail they steal the
   indent the nest line already provides and force long FAQ titles to wrap
   earlier than they need to. */
#qs-docs-main .betterdocs-sidebar .betterdocs-articles-list li > svg,
#qs-docs-main .betterdocs-full-sidebar-left .betterdocs-articles-list li > svg {
  display: none !important;
}

#qs-docs-main .betterdocs-sidebar .betterdocs-articles-list a,
#qs-docs-main .betterdocs-full-sidebar-left .betterdocs-articles-list a {
  display: block;
  position: relative;
  margin: 0;
  margin-left: calc(-1 * var(--s-3));
  padding: var(--s-2) var(--s-2) var(--s-2) calc(var(--s-3) - 2px);
  border-left: 2px solid transparent;
  border-radius: 0 var(--r-sm) var(--r-sm) 0;
  font-size: var(--t-sm);
  font-weight: 500;
  line-height: 1.35;
  color: var(--body);
  text-decoration: none;
  background: transparent;
}

#qs-docs-main .betterdocs-sidebar .betterdocs-articles-list a span {
  display: block;
}

/* Kill the plugin's absolute 4px bar (left:-11px). The border-left above is
   the active mark now, and it stays on the nest rail. */
#qs-docs-main .betterdocs-sidebar .betterdocs-articles-list a::before,
#qs-docs-main .betterdocs-sidebar .betterdocs-articles-list a:before,
#qs-docs-main .betterdocs-sidebar .betterdocs-articles-list a.active::before,
#qs-docs-main .betterdocs-sidebar .betterdocs-articles-list a.active:before,
#qs-docs-main .betterdocs-full-sidebar-left .betterdocs-articles-list a::before,
#qs-docs-main .betterdocs-full-sidebar-left .betterdocs-articles-list a:before {
  content: none !important;
  display: none !important;
  width: 0 !important;
  height: 0 !important;
  background: transparent !important;
}

#qs-docs-main .betterdocs-sidebar .betterdocs-articles-list a:hover,
#qs-docs-main .betterdocs-full-sidebar-left .betterdocs-articles-list li:not(:has(> ul)) a:hover {
  background-color: var(--white) !important;
  color: var(--ink) !important;
  border-left-color: var(--line-strong);
  text-decoration: none;
}

#qs-docs-main .betterdocs-sidebar .betterdocs-articles-list a.active,
#qs-docs-main .betterdocs-full-sidebar-left .betterdocs-articles-list a.active {
  background-color: var(--accent-tint) !important;
  color: var(--accent) !important;
  border-left-color: var(--accent) !important;
  font-weight: 600;
}

/* ---------- the article -------------------------------------------------- */

#qs-docs-main .betterdocs-entry-title {
  font-size: var(--t-3xl);
  color: var(--ink);
  line-height: var(--lh-snug);
  letter-spacing: -.022em;
  /* The migrated betterdocs_settings sets text-transform: uppercase on this
     element. It only bites on layout-1, which the single-doc pin deliberately
     avoids, but the declaration is live in the inline CSS and one layout change
     away from shouting all 84 doc titles. */
  text-transform: none !important;
}

#qs-docs-main .betterdocs-entry-header { margin-bottom: var(--s-4); }

#qs-docs-main .reading-time,
#qs-docs-main .betterdocs.reading-time,
#qs-docs-main .betterdocs-print-date,
#qs-docs-main .betterdocs-last-updated {
  font-size: var(--t-sm);
  color: var(--muted);
}

/* Plugin paints reading-time #F9FAFB / 16px radius. Match .pill. */
#qs-docs-main .betterdocs.reading-time,
#qs-docs-main .reading-time {
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
  background: var(--surface) !important;
  border: 1px solid var(--line);
  border-radius: var(--r-full) !important;
  padding: var(--s-1) var(--s-3) !important;
  margin-bottom: var(--s-5) !important;
}

#qs-docs-main .betterdocs.reading-time p,
#qs-docs-main .reading-time p {
  margin: 0;
  color: var(--muted) !important;
  font-size: var(--t-sm) !important;
  font-weight: 600 !important;
}

#qs-docs-main .betterdocs.reading-time svg path,
#qs-docs-main .reading-time svg path {
  fill: var(--muted) !important;
}

/* Long-form measure and rhythm, matching p-shared's .prose. The plugin ships
   neither: paragraphs ran together with no space between them and no measure,
   which at 1440 put ~110 characters on a line. */
#qs-docs-main .betterdocs-content {
  max-width: 42em;
  font-size: var(--t-base);
  line-height: var(--lh-prose);
  color: var(--body);
}

#qs-docs-main .betterdocs-content > * + * { margin-top: var(--s-4); }

#qs-docs-main .betterdocs-content h2 { font-size: var(--t-2xl); }
#qs-docs-main .betterdocs-content h3 { font-size: var(--t-xl); }
#qs-docs-main .betterdocs-content h4 { font-size: var(--t-lg); }

#qs-docs-main .betterdocs-content h2,
#qs-docs-main .betterdocs-content h3,
#qs-docs-main .betterdocs-content h4 {
  color: var(--ink);
  line-height: var(--lh-snug);
  letter-spacing: -.022em;
  margin-top: var(--s-7);
  /* .topbar is sticky at ~77px, and the table of contents is the main way
     through a 3,000-word doc; without this every jump link parks its target
     underneath the header. Same value as p-prose. */
  scroll-margin-top: calc(var(--s-8) + var(--s-5));
}

#qs-docs-main .betterdocs-content h4 { margin-top: var(--s-5); }
#qs-docs-main .betterdocs-content > :first-child { margin-top: 0; }

#qs-docs-main .betterdocs-content a {
  color: var(--accent);
  text-decoration: underline;
}

#qs-docs-main .betterdocs-content ul,
#qs-docs-main .betterdocs-content ol {
  margin: 0;
  padding-left: var(--s-5);
  display: flex;
  flex-direction: column;
  gap: var(--s-2);
}

#qs-docs-main .betterdocs-content img {
  border-radius: var(--r-sm);
  max-width: 100%;
  height: auto;
}

#qs-docs-main .betterdocs-content figure { margin: 0; }

#qs-docs-main .betterdocs-content table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--t-sm);
}

#qs-docs-main .betterdocs-content th,
#qs-docs-main .betterdocs-content td {
  text-align: left;
  padding: var(--s-3);
  border-bottom: 1px solid var(--line);
  vertical-align: top;
}

#qs-docs-main .betterdocs-content th { color: var(--ink); font-weight: 600; }

#qs-docs-main .betterdocs-content code,
#qs-docs-main .betterdocs-content pre {
  font-family: var(--mono);
  font-size: var(--t-sm);
  background: var(--surface);
  border-radius: var(--r-sm);
}

#qs-docs-main .betterdocs-content code { padding: 0 var(--s-1); }
#qs-docs-main .betterdocs-content pre { padding: var(--s-4); overflow-x: auto; }

/* The category archive's own heading — an h1 since inc/docs.php promoted it. */
#qs-docs-main .betterdocs-entry-heading {
  font-size: var(--t-3xl);
  color: var(--ink);
  line-height: var(--lh-snug);
  letter-spacing: -.022em;
  margin: 0 0 var(--s-5);
}

#qs-docs-main .betterdocs-taxonomy-doc-category { margin-top: var(--s-5); }

/* Category archive / list view — rows, not floating mini-cards. A full-bleed
   stack with hairline separators reads closer to contact's help list than a
   pile of bordered pills with document icons. */
#qs-docs-main .betterdocs-taxonomy-wrapper .betterdocs-taxonomy-doc-category,
#qs-docs-main .betterdocs-category-archive-wrapper .docs-content-full-main .betterdocs-articles-list,
#qs-docs-main .betterdocs-category-archive-wrapper .betterdocs-taxonomy-doc-category > ul {
  display: flex;
  flex-direction: column;
  gap: 0;
  margin-top: var(--s-4);
  padding: 0;
  list-style: none;
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  background: var(--white);
  overflow: hidden;
}

#qs-docs-main .betterdocs-taxonomy-wrapper .betterdocs-taxonomy-doc-category li,
#qs-docs-main .betterdocs-category-archive-wrapper .docs-content-full-main li,
#qs-docs-main .betterdocs-category-archive-wrapper .betterdocs-taxonomy-doc-category li {
  margin: 0;
  padding: 0;
  display: block;
  border-bottom: 1px solid var(--line);
}

#qs-docs-main .betterdocs-taxonomy-wrapper .betterdocs-taxonomy-doc-category li:last-child,
#qs-docs-main .betterdocs-category-archive-wrapper .docs-content-full-main li:last-child,
#qs-docs-main .betterdocs-category-archive-wrapper .betterdocs-taxonomy-doc-category li:last-child {
  border-bottom: 0;
}

#qs-docs-main .betterdocs-taxonomy-wrapper .betterdocs-taxonomy-doc-category li > svg,
#qs-docs-main .betterdocs-category-archive-wrapper .docs-content-full-main li > svg,
#qs-docs-main .betterdocs-category-archive-wrapper .betterdocs-taxonomy-doc-category li > svg {
  display: none !important;
}

#qs-docs-main .betterdocs-taxonomy-wrapper .betterdocs-taxonomy-doc-category a,
#qs-docs-main .betterdocs-category-archive-wrapper .docs-content-full-main .betterdocs-articles-list a,
#qs-docs-main .betterdocs-category-archive-wrapper .betterdocs-taxonomy-doc-category a {
  display: flex;
  align-items: center;
  gap: var(--s-3);
  width: 100%;
  margin: 0;
  padding: var(--s-4) var(--s-5);
  border: 0;
  border-radius: 0;
  background: transparent;
  color: var(--ink);
  font-size: var(--t-base);
  font-weight: 600;
  line-height: var(--lh-snug);
  text-decoration: none;
  transition: background-color .15s var(--fx-ease), color .15s var(--fx-ease);
}

#qs-docs-main .betterdocs-taxonomy-wrapper .betterdocs-taxonomy-doc-category a:hover,
#qs-docs-main .betterdocs-category-archive-wrapper .docs-content-full-main .betterdocs-articles-list a:hover,
#qs-docs-main .betterdocs-category-archive-wrapper .betterdocs-taxonomy-doc-category a:hover {
  background: var(--accent-tint);
  color: var(--accent);
  text-decoration: none;
  transform: none;
}

/* ---------- table of contents -------------------------------------------
   Continuous rail on the <ul>, active item overlays it. Per-item borders with
   flex gap left a stub of line above the first entry (the owner's complaint). */

#qs-docs-main .betterdocs-toc {
  font-size: var(--t-sm);
  padding-top: var(--s-1);
}

#qs-docs-main .betterdocs-toc .toc-title {
  display: block;
  font-size: var(--t-xs);
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--muted);
  margin: 0 0 var(--s-3);
  padding: 0;
}

#qs-docs-main .betterdocs-toc ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0;
  border-left: 2px solid var(--line);
}

#qs-docs-main .betterdocs-toc ul ul {
  margin: 0;
  padding-left: var(--s-3);
  border-left: 0;
}

#qs-docs-main .betterdocs-toc li { margin: 0; }

#qs-docs-main .betterdocs-toc a {
  display: block;
  color: var(--body);
  border-left: 2px solid transparent;
  margin-left: -2px;
  padding: var(--s-2) var(--s-3);
  text-decoration: none;
  line-height: var(--lh-snug);
  background: transparent !important;
}

#qs-docs-main .betterdocs-toc a:hover,
#qs-docs-main .betterdocs-toc li.active > a,
#qs-docs-main .betterdocs-toc a.active {
  color: var(--accent);
  border-left-color: var(--accent);
  background: transparent !important;
}

#qs-docs-main .betterdocs-toc a.active::after,
#qs-docs-main .betterdocs-toc a.active:after,
#qs-docs-main .betterdocs-toc li.active > a::after,
#qs-docs-main .betterdocs-toc a::after,
#qs-docs-main .betterdocs-toc a:after {
  content: none !important;
  display: none !important;
  background: transparent !important;
}

@media (prefers-reduced-motion: no-preference) {
  #qs-docs-main .betterdocs-toc a { transition: color .2s var(--fx-ease), border-left-color .2s var(--fx-ease); }
}

/* ---------- entry footer: tags, print, share, prev/next ------------------ */

#qs-docs-main .betterdocs-entry-footer {
  margin-top: var(--s-7);
  padding-top: var(--s-5);
  border-top: 1px solid var(--line);
}

#qs-docs-main .betterdocs-social-share-title,
#qs-docs-main .betterdocs-entry-footer .betterdocs-tags {
  font-size: var(--t-sm);
  color: var(--muted);
}

#qs-docs-main .betterdocs-navigation a {
  color: var(--body);
  font-size: var(--t-sm);
  text-decoration: none;
}

#qs-docs-main .betterdocs-navigation a:hover { color: var(--accent); }

/* ---------- mobile ------------------------------------------------------
   768px rather than the design's usual 900, and deliberately: this is where
   BetterDocs' own single.css collapses the sidebar and the contents rail into
   two icon buttons. Styling those buttons at a different width than the one
   that creates them would leave a band where they are visible and unstyled. */

@media (max-width: 768px) {
  /* Do not force-hide .betterdocs-sidebar — the plugin toggles it from the
     mobile-nav icons. Only drop the desktop divider. */
  #qs-docs-main .betterdocs-sidebar,
  #qs-docs-main .betterdocs-full-sidebar-left {
    border-right: 0;
    background: var(--white);
  }

  #qs-docs-main .betterdocs-mobile-nav {
    display: flex;
    gap: var(--s-3);
    margin-bottom: var(--s-4);
  }

  #qs-docs-main .betterdocs-sidebar-icon,
  #qs-docs-main .betterdocs-toc-icon {
    border: 1px solid var(--line);
    border-radius: var(--r-sm);
    background: var(--white);
    padding: var(--s-2);
  }

  #qs-docs-main .betterdocs-entry-title,
  #qs-docs-main .betterdocs-entry-heading,
  .subhero--docs h1 { font-size: var(--t-2xl); }

  .subhero--docs { padding-top: var(--s-6); }
  .subhero--docs .lede { font-size: var(--t-base); }

  #qs-docs-main .betterdocs-content-wrapper { padding-block: var(--s-6); }

  #qs-docs-main .betterdocs-search-form-wrapper {
    padding-block: var(--s-4) var(--s-6) !important;
  }

  #qs-docs-main .betterdocs-taxonomy-wrapper .betterdocs-taxonomy-doc-category a,
  #qs-docs-main .betterdocs-category-archive-wrapper .docs-content-full-main .betterdocs-articles-list a {
    padding: var(--s-3) var(--s-4);
    font-size: var(--t-sm);
  }
}