/* Documentation portal styles.
 *
 * Prefix is bdoc- : the site's own design system already owns bd-card,
 * bd-section-head and bd-usecase-grid, and its rules carry !important.
 *
 * Divi Customizer rules measured 2026-08-11 via curl against
 * http://localhost:8080/docs/quantumbng/users-guide/the-console/, reading
 * the <style id="et-divi-customizer-global-cached-inline-styles"> block:
 *
 *   body, #page-container, .et_pb_section, #main-content {
 *     background-color: var(--bg-primary) !important;
 *     font-family: var(--font-body) !important;    -- resolves to 'Inter'
 *     color: var(--text-secondary) !important;      -- resolves to #94A3B8
 *   }
 *   h1, h2, h3, h4, h5, h6, .et_pb_module_header,
 *   .et_pb_text h1, .et_pb_text h2, .et_pb_text h3, .et_pb_text h4 {
 *     font-family: var(--font-heading) !important;  -- resolves to 'Inter'
 *     color: var(--text-primary) !important;         -- resolves to #E8F4F8
 *     line-height: 1.2;                                -- NOT !important
 *   }
 *   #page-container { padding-top: 80px !important; }  -- fixed #main-header offset
 *   #main-header { position: fixed !important; height approx 66-80px; }
 *   .et_pb_section { padding: var(--section-pad-y) var(--section-pad-x) !important; } -- 6rem 2rem
 *   .et_pb_row { max-width: var(--max-width) !important; }                            -- 1280px
 *   at min-width 1350px only (no !important): .et_pb_row padding 27px 0, .et_pb_section padding 54px 0
 *
 * Structural check: this template (templates/single-bd_doc.php) is NOT run
 * through Divi's page builder wrapper. #bdoc-shell sits directly inside
 * #et-main-area (sibling of #main-header), never inside .et_pb_section or
 * .et_pb_row, so the section/row padding and max-width rules above do not
 * touch it — confirmed by grepping the rendered HTML for #bdoc-shell's
 * ancestors. The only rules that DO reach our markup are the body/heading
 * font-family+color !important rules (h1-h6 get NO font-size from Divi, so
 * heading sizes are otherwise just the UA default) and #page-container's
 * fixed 80px top padding, which we rely on rather than duplicate.
 *
 * Beating the h1-h6 rule needs higher specificity AND !important — the
 * Customizer's rule is already !important, so a tie is decided by document
 * order, and plugin stylesheets load first (i.e. lose). The doubled-class
 * pattern `.bdoc-page.bdoc-page .bdoc-prose h1` (specificity 0,4,1) clears
 * Divi's bare `h1` (0,0,1) and `.et_pb_text h1` (0,1,1) comfortably; kept
 * doubled per the accepted plan pattern rather than trimmed to a single
 * class, so a future edit that drops one class doesn't quietly lose ground
 * if Divi's selectors ever grow more specific.
 *
 * Colour/spacing tokens below match the site's own dark theme (the same
 * custom properties Divi's inline block defines): accent cyan #00D4FF,
 * surface #1A2340, border rgba(0,212,255,0.12), text primary #E8F4F8,
 * text secondary #94A3B8, text muted #4A6080. Hardcoded rather than
 * referencing var(--accent-cyan) etc. so the docs stylesheet does not
 * depend on the Customizer's inline block being present/unchanged.
 */

.bdoc-shell {
  display: grid;
  grid-template-columns: 258px minmax(0, 1fr) 196px;
  gap: 0;
  align-items: start;
  max-width: 1280px;
  margin: 0 auto;
}
/* M1: qbng_docs_render_toc() returns '' when a page has no <h3> anchors
   (e.g. short sections, and every PDF-only page), and the template now
   omits the <aside> entirely in that case rather than rendering an empty
   196px-wide box. Collapse the grid column to match, so the content column
   reclaims the space instead of leaving a dead gutter. */
.bdoc-shell.bdoc-no-toc { grid-template-columns: 258px minmax(0, 1fr); }

.bdoc-rail-left  { position: sticky; top: 90px; align-self: start; max-height: calc(100vh - 110px); overflow-y: auto; padding: 1.5rem 1.25rem; }
.bdoc-rail-right { position: sticky; top: 90px; align-self: start; max-height: calc(100vh - 110px); overflow-y: auto; padding: 1.5rem 1rem; }
.bdoc-main       { min-width: 0; padding: 1.5rem 1.25rem 3rem 2.25rem; }

/* Prose measure applies to TEXT only.
 *
 * A ~70ch measure is right for reading paragraphs and wrong for everything
 * else. Capping the whole column at 70ch (~635px at this size) meant tables
 * inherited it: a 6-column table on the Operator Guide squeezed "OPERATIONS"
 * into "OPERATION / S" while ~120px of the content column sat unused to its
 * right, plus a ~170px gap before the TOC rail. Text keeps the measure;
 * tables, code, images and figures get the full column.
 */
/* The measure goes on the TEXT elements, not on the container. Capping
   .bdoc-prose itself was the bug: a child cannot be wider than the box that
   contains it, so `width:100%` on a table still resolved to 70ch. Leaving the
   container full-width and capping paragraphs/lists/headings instead gives
   text a comfortable measure while tables, code and screenshots use the whole
   column. */
.bdoc-prose { max-width: none; }
.bdoc-prose > p,
.bdoc-prose > ul,
.bdoc-prose > ol,
.bdoc-prose > dl,
.bdoc-prose > blockquote,
.bdoc-prose > h1,
.bdoc-prose > h2,
.bdoc-prose > h3,
.bdoc-prose > h4,
.bdoc-prose > h5,
.bdoc-prose > h6 { max-width: 74ch; }

/* Wide content must scroll inside its own container, never the page body. */
.bdoc-prose table { display: block; overflow-x: auto; }
.bdoc-prose pre   { overflow-x: auto; }
.bdoc-prose img   { max-width: 100%; height: auto; }

/* Tables read better using the width they now have: let columns size to
   content rather than splitting evenly, and stop header cells wrapping
   mid-word — the "OPERATION / S" break this change exists to fix. */
.bdoc-prose table       { width: 100%; border-collapse: collapse; }
.bdoc-prose table th    { white-space: nowrap; }
.bdoc-prose table td    { vertical-align: top; }
/* I3: a single very long token (URL, PCI address run together, etc.) with
   no natural break point must wrap inside the prose column instead of
   pushing the whole page wider than the viewport. Tables/<pre> already
   scroll in their own box (above); this covers inline text and inline
   <code>, the two paths measured to blow out body.scrollWidth. */
.bdoc-prose,
.bdoc-page.bdoc-page .bdoc-prose code {
  overflow-wrap: anywhere;
}

/* Rail labels + tree/toc lists */
.bdoc-rail-label {
  font-family: "JetBrains Mono", "Fira Code", ui-monospace, Menlo, monospace;
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  color: #00D4FF;
  text-transform: uppercase;
  margin: 1.5rem 0 0.5rem;
}
.bdoc-rail-label:first-child { margin-top: 0; }
/* Category headings sit above the document/chapter links, so they read as a
   tier rather than as another link: white against the accent-blue used by the
   links, "Current document" and "On this page". */
.bdoc-rail-label-cat { color: #FFFFFF; }
.bdoc-tree, .bdoc-kids, .bdoc-toc { list-style: none; margin: 0 0 0.5rem; padding: 0; }
.bdoc-tree a, .bdoc-kids a {
  display: block;
  padding: 0.3rem 0.6rem;
  color: #94A3B8;
  text-decoration: none;
  border-radius: 4px;
  font-size: 0.9rem;
}
.bdoc-tree a:hover, .bdoc-kids a:hover { color: #E8F4F8; background: rgba(0, 212, 255, 0.06); }
.bdoc-tree a[aria-current="true"] { color: #00D4FF; font-weight: 600; }
.bdoc-kids { margin-left: 0.75rem; border-left: 1px solid rgba(0, 212, 255, 0.12); }
.bdoc-kids a.is-current { color: #00D4FF; }

/* Typography overrides. The doubled class raises specificity above Divi's
   Customizer rules; removing the duplicate silently breaks this. Values come
   from the approved preview, which uses the site's own dark tokens. */
.bdoc-page.bdoc-page .bdoc-prose h1 {
  font-size: 2rem !important;
  line-height: 1.2 !important;
  letter-spacing: -0.02em !important;
  margin: 0 0 0.75rem !important;
  text-wrap: balance;
}
.bdoc-page.bdoc-page .bdoc-prose h2 {
  font-size: 1.3125rem !important;
  margin: 2.25rem 0 0.6rem !important;
  padding-top: 0.9rem !important;
  border-top: 1px solid rgba(0, 212, 255, 0.12);
  scroll-margin-top: 90px;
}
.bdoc-page.bdoc-page .bdoc-prose h3 {
  font-size: 1.0625rem !important;
  margin: 1.75rem 0 0.5rem !important;
  scroll-margin-top: 90px;
}
.bdoc-page.bdoc-page .bdoc-prose code {
  font-family: "JetBrains Mono", "Fira Code", ui-monospace, Menlo, monospace;
  font-size: 0.85em;
  color: #00D4FF;
  background: #1A2340;
  border: 1px solid rgba(0, 212, 255, 0.12);
  border-radius: 4px;
  padding: 0.12em 0.4em;
}
.bdoc-page.bdoc-page .bdoc-prose pre code {
  background: none;
  border: none;
  padding: 0;
}
.bdoc-page.bdoc-page .bdoc-prose pre {
  background: #1A2340;
  border: 1px solid rgba(0, 212, 255, 0.12);
  border-radius: 8px;
  padding: 1rem 1.25rem;
}
.bdoc-page.bdoc-page .bdoc-prose a {
  color: #00D4FF !important;
  text-decoration: none;
}
.bdoc-page.bdoc-page .bdoc-prose a:hover { text-decoration: underline; }

/* I2: body copy. Confirmed via the Customizer's cached inline-style block
   (same source as the docblock measurement above) that
   `p,.et_pb_text p,.et_pb_blurb_description{color:var(--text-secondary)!important;line-height:1.7}`
   is the only !important rule reaching plain paragraphs/list items here —
   font-size and margin are NOT !important, but the doubled-class pattern
   is kept anyway for consistency with the rest of this block and so a
   later Customizer change adding font-size/margin !important there
   doesn't silently regress this. Tables and figcaptions carry no Divi
   !important rule at all (confirmed the same way), so those two get plain
   selectors instead. */
.bdoc-page.bdoc-page .bdoc-prose p {
  font-size: 1rem !important;
  line-height: 1.6 !important;
  color: #CFE0E8 !important;
  margin: 0 0 1rem !important;
}
.bdoc-page.bdoc-page .bdoc-prose li {
  font-size: 1rem !important;
  line-height: 1.6 !important;
  color: #CFE0E8 !important;
  margin: 0 0 0.4rem !important;
}
.bdoc-prose ul, .bdoc-prose ol { margin: 0 0 1rem; padding-left: 1.5rem; }
.bdoc-prose li:last-child { margin-bottom: 0; }

.bdoc-prose table {
  width: 100%;
  border-collapse: collapse;
  margin: 0 0 1.5rem;
  font-size: 0.9rem;
}
.bdoc-prose th, .bdoc-prose td {
  text-align: left;
  padding: 0.6rem 0.9rem;
  border-bottom: 1px solid rgba(0, 212, 255, 0.12);
  color: #CFE0E8;
}
.bdoc-prose thead th {
  color: #E8F4F8;
  font-weight: 600;
  border-bottom: 1px solid rgba(0, 212, 255, 0.3);
}

.bdoc-prose figure { margin: 1.5rem 0; }
.bdoc-prose figcaption {
  font-size: 0.8rem;
  color: #4A6080;
  margin-top: 0.4rem;
}

/* I6: PDF-only rows/notes */
.bdoc-doc-pdfonly {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.3rem 0.6rem;
  color: #4A6080;
  font-size: 0.9rem;
}
.bdoc-pdfonly {
  background: rgba(0, 212, 255, 0.04);
  border: 1px solid rgba(0, 212, 255, 0.12);
  border-radius: 8px;
  padding: 1.25rem 1.5rem;
}
.bdoc-pdfonly p { margin: 0 0 0.75rem !important; }
.bdoc-pdfonly p:last-child { margin-bottom: 0 !important; }

/* scroll-margin-top on the headings keeps anchor jumps clear of the fixed
   #main-header, which is 80-90px tall and would otherwise cover the target. */

/* Breadcrumb */
.bdoc-crumbs { font-size: 0.85rem; color: #4A6080; margin-bottom: 1rem; }
/* Accent blue: the trail is a navigation control, and at #4A6080 it read as
   disabled body text rather than as links. The current crumb stays muted so
   "where you are" is still distinct from "where you can go". */
.bdoc-crumbs a { color: #00D4FF; text-decoration: none; }
.bdoc-crumbs a:hover { color: #7FE7FF; text-decoration: underline; }
.bdoc-crumb-sep { margin: 0 0.4rem; color: #4A6080; }
.bdoc-crumb-current { color: #94A3B8; }
.bdoc-crumb-version { color: #F59E0B; font-weight: 600; }

/* Archived-version banner */
.bdoc-banner {
  background: rgba(245, 158, 11, 0.08);
  border: 1px solid rgba(245, 158, 11, 0.35);
  border-radius: 8px;
  color: #E8F4F8;
  padding: 0.85rem 1.1rem;
  margin-bottom: 1.25rem;
  font-size: 0.9rem;
}
.bdoc-banner a { color: #00D4FF; }

/* Tools row: version dropdown + PDF link + updated stamp */
.bdoc-tools { display: flex; align-items: center; gap: 1rem; flex-wrap: wrap; margin-bottom: 1.5rem; }
.bdoc-vsel { position: relative; }
.bdoc-vbtn {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  background: #1A2340;
  border: 1px solid rgba(0, 212, 255, 0.12);
  color: #E8F4F8;
  border-radius: 6px;
  padding: 0.4rem 0.75rem;
  font-size: 0.85rem;
  cursor: pointer;
}
.bdoc-vbtn:hover { border-color: rgba(0, 212, 255, 0.4); }
.bdoc-caret { font-size: 0.7em; color: #4A6080; }
.bdoc-vmenu {
  position: absolute;
  top: calc(100% + 4px);
  left: 0;
  min-width: 190px;
  list-style: none;
  margin: 0;
  padding: 0.35rem;
  background: #151D35;
  border: 1px solid rgba(0, 212, 255, 0.12);
  border-radius: 8px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4);
  z-index: 20;
}
.bdoc-vmenu[hidden] { display: none; }
.bdoc-vmenu a {
  display: flex;
  justify-content: space-between;
  gap: 0.5rem;
  padding: 0.4rem 0.6rem;
  color: #94A3B8;
  text-decoration: none;
  border-radius: 4px;
  font-size: 0.85rem;
}
.bdoc-vmenu a:hover { background: rgba(0, 212, 255, 0.08); color: #E8F4F8; }
.bdoc-vmenu a[aria-current="true"] { color: #00D4FF; }
.bdoc-v-tag { color: #4A6080; font-size: 0.75rem; }
.bdoc-pdf { color: #00D4FF; font-size: 0.85rem; text-decoration: none; }
.bdoc-pdf:hover { text-decoration: underline; }
.bdoc-stamp { color: #4A6080; font-size: 0.8rem; }

/* Prev / next */
.bdoc-prevnext {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
  margin-top: 2.5rem;
  padding-top: 1.5rem;
  border-top: 1px solid rgba(0, 212, 255, 0.12);
}
.bdoc-prevnext a {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  padding: 0.85rem 1rem;
  border: 1px solid #00D4FF;
  border-radius: 8px;
  color: #00D4FF;
  text-decoration: none;
}
.bdoc-prevnext a:hover { border-color: #00D4FF; background: rgba(0, 212, 255, 0.07); }
.bdoc-next { text-align: right; align-items: flex-end; }
/* Both halves in accent blue: "Previous/Next" and the section title it goes to
   are one control, and the direction word was the quieter of the two despite
   being what tells you which way you are moving. */
.bdoc-pn-k { font-size: 0.75rem; color: #00D4FF; text-transform: uppercase; letter-spacing: 0.05em; }
.bdoc-pn-t { color: #00D4FF; font-size: 0.9rem; }

/* Task 6: "Need help? Contact support" footer link. */
.bdoc-page.bdoc-page .bdoc-support-link {
  font-size: 0.85rem !important;
  color: #4A6080 !important;
  margin: 1.5rem 0 0 !important;
}
.bdoc-support-link a {
  color: #00D4FF;
  text-decoration: none;
  font-weight: 600;
}
.bdoc-support-link a:hover { text-decoration: underline; }

/* I1: hub (`[bd_docs_hub]`) and library (`[bd_docs_library]`) pages.
 * These render on ordinary WordPress pages (see qbng_docs_maybe_create_pages())
 * through the classic, non-Visual-Builder page template — confirmed via the
 * rendered markup: `.entry-content` wraps the shortcode output directly,
 * with no `.et_pb_row`/`.et_pb_text` ancestor. That matters because Divi's
 * h1-h6 and `p` Customizer rules (see the file docblock) use BARE element
 * selectors (`h1,h2,...,h6` / `p,.et_pb_text p,...`), so — unlike the
 * .et_pb_text-scoped rules elsewhere in Divi — they apply here too and the
 * doubled-class !important treatment is still required for card headings
 * and body copy. Nothing else measured here (links, the grid, the chips)
 * has a competing Divi rule.
 */
.bdoc-library { max-width: 1280px; margin: 0 auto; }
.bdoc-grp {
  font-family: "JetBrains Mono", "Fira Code", ui-monospace, Menlo, monospace;
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  color: #00D4FF;
  text-transform: uppercase;
  margin: 2rem 0 0.75rem;
}
.bdoc-grp:first-child { margin-top: 0; }

.bdoc-cards {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 1.25rem;
  margin: 0 0 0.5rem;
}
.bdoc-card {
  display: flex;
  flex-direction: column;
  background: #151D35;
  border: 1px solid rgba(0, 212, 255, 0.12);
  border-radius: 10px;
  padding: 1.5rem;
}
.bdoc-page.bdoc-page .bdoc-card h3 {
  font-family: "Inter", sans-serif !important;
  font-size: 1.1rem !important;
  line-height: 1.3 !important;
  color: #E8F4F8 !important;
  margin: 0 0 0.5rem !important;
}
.bdoc-page.bdoc-page .bdoc-card p {
  font-size: 0.9rem !important;
  line-height: 1.5 !important;
  color: #94A3B8 !important;
  margin: 0 0 1rem !important;
  flex-grow: 1;
}
.bdoc-card-meta { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-bottom: 1rem; }
.bdoc-chip {
  display: inline-flex;
  align-items: center;
  padding: 0.25rem 0.65rem;
  border-radius: 999px;
  font-size: 0.75rem;
  background: rgba(0, 212, 255, 0.08);
  color: #94A3B8;
  border: 1px solid rgba(0, 212, 255, 0.12);
  white-space: nowrap;
}
.bdoc-chip-online { color: #00D4FF; border-color: rgba(0, 212, 255, 0.3); }
.bdoc-chip-pdf { color: #F59E0B; border-color: rgba(245, 158, 11, 0.3); background: rgba(245, 158, 11, 0.08); }

.bdoc-card-acts { display: flex; align-items: center; gap: 1.25rem; margin-top: auto; }
.bdoc-go, .bdoc-dl { font-size: 0.9rem; font-weight: 600; text-decoration: none; }
.bdoc-go { color: #00D4FF; }
.bdoc-go:hover { text-decoration: underline; }
.bdoc-dl { color: #94A3B8; }
.bdoc-dl:hover { color: #E8F4F8; }

@media (max-width: 1080px) { .bdoc-shell { grid-template-columns: 220px minmax(0,1fr); } .bdoc-rail-right { display: none; } }
@media (max-width: 760px)  { .bdoc-shell { grid-template-columns: 1fr; } .bdoc-rail-left { display: none; } .bdoc-prevnext { grid-template-columns: 1fr; } }

/* I7: visible keyboard focus. Verified with a real Tab traversal that every
   interactive element below matches :focus-visible but computes
   `outline: none; box-shadow: none` — a WCAG 2.1 SC 2.4.7 AA failure. The
   suppressor lives in the theme's base stylesheet (not the Customizer
   inline block checked elsewhere in this file, and not this stylesheet
   either — there was no focus rule here to begin with), so this uses the
   same doubled-class + !important treatment as the rest of the file to
   guarantee it wins regardless of where the reset comes from. */
.bdoc-page.bdoc-page .bdoc-tree a:focus-visible,
.bdoc-page.bdoc-page .bdoc-kids a:focus-visible,
.bdoc-page.bdoc-page .bdoc-toc a:focus-visible,
.bdoc-page.bdoc-page .bdoc-vbtn:focus-visible,
.bdoc-page.bdoc-page .bdoc-vmenu a:focus-visible,
.bdoc-page.bdoc-page .bdoc-crumbs a:focus-visible,
.bdoc-page.bdoc-page .bdoc-prevnext a:focus-visible,
.bdoc-page.bdoc-page .bdoc-navtoggle:focus-visible,
.bdoc-page.bdoc-page .bdoc-card a:focus-visible,
.bdoc-page.bdoc-page .bdoc-search-submit:focus-visible,
.bdoc-page.bdoc-page .bdoc-search-widen:focus-visible,
.bdoc-page.bdoc-page .bdoc-search-hit-title a:focus-visible,
.bdoc-page.bdoc-page .bdoc-search-empty a:focus-visible,
.bdoc-page.bdoc-page .bdoc-search-results .page-numbers:focus-visible {
  outline: 2px solid #00D4FF !important;
  outline-offset: 2px !important;
  box-shadow: 0 0 0 4px rgba(0, 212, 255, 0.25) !important;
  border-radius: 4px;
}
/* .bdoc-prevnext a and .bdoc-card already have their own border-radius;
   don't fight it. */
.bdoc-page.bdoc-page .bdoc-prevnext a:focus-visible { border-radius: 8px; }

/* Mobile navigation drawer + TOC scrollspy (Task 7). */
.bdoc-navtoggle { display: none; }
.bdoc-toc a { display: block; padding: 0.28rem 0.7rem; color: #4A6080;
              text-decoration: none; border-left: 2px solid transparent; margin-left: -1px; }
.bdoc-toc a:hover { color: #94A3B8; }
.bdoc-toc a.is-current { color: #00D4FF; border-left-color: #00D4FF; }

@media (max-width: 760px) {
  .bdoc-navtoggle { display: block; margin: 1rem 2.25rem 0; background: #1A2340;
                    border: 1px solid rgba(0, 212, 255, 0.12); color: #E8F4F8;
                    border-radius: 6px; padding: 0.5rem 0.85rem; font-size: 0.85rem; }
  .bdoc-rail-left { display: none; position: static; max-height: none; }
  .bdoc-rail-left.is-open { display: block; }
}

/* Docs-scoped search form (Task 2), rendered in the left rail and atop the
   library. Matches the rail's dark input styling used elsewhere in this
   file.
   F1: the field and the submit button are separate flex children so the
   button sits outside the input rather than floating over the DOCS chip —
   .bdoc-search-field is the positioning context the chip is still
   absolute-positioned against. */
.bdoc-search { position: relative; margin-bottom: 1.25rem; display: flex; align-items: stretch; gap: 0.35rem; }
.bdoc-search-field { position: relative; flex: 1 1 auto; min-width: 0; }
.bdoc-search-field input[type="search"] {
  width: 100%; font: inherit; font-size: 0.8125rem;
  padding: 0.55rem 3.2rem 0.55rem 0.8rem;
  background: #0A0E1A; color: #E8F4F8;
  border: 1px solid rgba(0, 212, 255, 0.12); border-radius: 0.5rem;
}
.bdoc-search-field input[type="search"]:focus { border-color: rgba(0, 212, 255, 0.40); outline: none; }
.bdoc-search-scope {
  position: absolute; right: 0.5rem; top: 50%; transform: translateY(-50%);
  font-size: 0.5625rem; letter-spacing: 0.06em; color: #00D4FF;
  background: rgba(0, 212, 255, 0.1); padding: 0.15rem 0.4rem; border-radius: 3px;
}
.bdoc-search-submit {
  flex: 0 0 auto; display: flex; align-items: center; justify-content: center;
  width: 2.1rem; padding: 0; cursor: pointer;
  background: #0A0E1A; color: #00D4FF;
  border: 1px solid rgba(0, 212, 255, 0.12); border-radius: 0.5rem;
}
.bdoc-search-submit:hover { border-color: rgba(0, 212, 255, 0.40); }
.bdoc-search-icon { width: 14px; height: 14px; }

/* F2: docs-scoped search results page (templates/search-bd_doc.php).
   Reuses the .bdoc-shell / .bdoc-rail-left / .bdoc-main grid above; adds
   only what that grid doesn't already give a results list. */
.bdoc-search-results { max-width: 70ch; }
.bdoc-search-results .bdoc-title {
  font-size: 1.75rem; line-height: 1.2; letter-spacing: -0.02em; margin: 0 0 0.75rem;
}
.bdoc-search-meta { font-size: 0.9rem; color: #94A3B8; margin: 0 0 1.75rem; }
.bdoc-search-meta strong { color: #E8F4F8; }
.bdoc-search-widen { margin-left: 0.5rem; color: #00D4FF; text-decoration: none; font-weight: 600; white-space: nowrap; }
.bdoc-search-widen:hover { text-decoration: underline; }

.bdoc-search-hits { list-style: none; margin: 0; padding: 0; }
.bdoc-search-hit { padding: 1.1rem 0; border-top: 1px solid rgba(0, 212, 255, 0.12); }
.bdoc-search-hit:first-child { border-top: none; padding-top: 0; }
.bdoc-search-hit-crumb {
  font-family: "JetBrains Mono", "Fira Code", ui-monospace, Menlo, monospace;
  font-size: 0.7rem; letter-spacing: 0.04em; text-transform: uppercase;
  color: #00D4FF; margin: 0 0 0.3rem;
}
.bdoc-search-hit-title { font-size: 1.0625rem; margin: 0 0 0.35rem; }
/* Both the crumb (which document/section this hit belongs to) and the title
   are the scannable parts of a result — accent blue so the eye lands on them
   rather than on the excerpt. */
.bdoc-search-hit-title a { color: #00D4FF; text-decoration: none; }
.bdoc-search-hit-title a:hover { color: #7FE7FF; text-decoration: underline; }
.bdoc-search-hit-excerpt { font-size: 0.875rem; color: #94A3B8; margin: 0; }

.bdoc-search-empty { padding: 1.5rem 0; color: #94A3B8; }
.bdoc-search-empty p { margin: 0 0 0.75rem; }
.bdoc-search-empty a { color: #00D4FF; text-decoration: none; font-weight: 600; }
.bdoc-search-empty a:hover { text-decoration: underline; }

.bdoc-search-results nav.navigation.pagination { margin-top: 1.5rem; font-size: 0.85rem; }
.bdoc-search-results nav.navigation.pagination .page-numbers {
  display: inline-block; padding: 0.3rem 0.65rem; margin-right: 0.35rem;
  color: #94A3B8; text-decoration: none; border-radius: 4px;
}
.bdoc-search-results nav.navigation.pagination .page-numbers.current { color: #00D4FF; font-weight: 600; }
.bdoc-search-results nav.navigation.pagination .page-numbers:hover { color: #E8F4F8; background: rgba(0, 212, 255, 0.06); }

/* ── Current-document group in the left rail ─────────────────────────────
   The open document is lifted out of its category and rendered first, so the
   rail starts with what you are reading instead of burying it in a list of
   every other document. */
.bdoc-rail-label-current { color: #00D4FF; }
.bdoc-tree-current { margin-bottom: 1.25rem; padding-bottom: 1rem; border-bottom: 1px solid rgba(0, 212, 255, 0.18); }
.bdoc-tree-current .bdoc-doc.is-open > a { color: #00D4FF; font-weight: 600; }

/* ── DOCS scope chip: hoverable/focusable so its tooltip is reachable ──── */
.bdoc-search-scope { cursor: help; }
.bdoc-search-scope:focus-visible { outline: 2px solid #00D4FF; outline-offset: 2px; border-radius: 4px; }

/* ── Library card: direct PDF download ──────────────────────────────────── */
.bdoc-dl {
  border: 1px solid rgba(0, 212, 255, 0.35);
  border-radius: 999px;
  padding: 0.2rem 0.6rem;
  color: #00D4FF !important;
}
.bdoc-dl:hover { border-color: #00D4FF; background: rgba(0, 212, 255, 0.08); color: #7FE7FF !important; }

/* The search-hit crumb is a <p>, and Divi's Customizer emits
   `p, .et_pb_text p { color: var(--text-secondary) !important }` inline.
   !important beats specificity, so the doubled-class trick alone is not
   enough here — measured: the crumb computed to #94A3B8 (Divi's body colour)
   with both the plain and the doubled selector. Same reason the other
   .bdoc-page.bdoc-page rules in this file carry !important. */
.bdoc-page.bdoc-page .bdoc-search-hit-crumb { color: #00D4FF !important; }

/* ── Library card actions: matched pills ────────────────────────────────
   "Read Online" and "Download PDF" are peers — the same shape so neither
   reads as the lesser option. .bdoc-go was a bare text link before. */
.bdoc-go {
  border: 1px solid rgba(0, 212, 255, 0.35);
  border-radius: 999px;
  padding: 0.2rem 0.6rem;   /* identical to .bdoc-dl so the pair reads as a set */
  color: #00D4FF !important;
}
.bdoc-go:hover { border-color: #00D4FF; background: rgba(0, 212, 255, 0.08); color: #7FE7FF !important; }
.bdoc-card-acts { display: flex; flex-wrap: wrap; gap: 0.5rem; align-items: center; }

/* ── DOCS chip tooltip ──────────────────────────────────────────────────
   Deliberately not the native title= attribute: that waits ~1s, cannot be
   styled, and never appears on touch. */
/* NO position override here. The chip is already `position: absolute;
   right: .5rem; top: 50%` inside .bdoc-search-field, and it carries a
   transform — so it is already a containing block for the bubble below.
   Setting position:relative dropped it back into normal flow: it fell out of
   the search box entirely and landed on top of the first category heading,
   dragging the tooltip off the left edge of the screen with it. */
.bdoc-search-scope::after {
  content: attr(data-tip);
  position: absolute;
  top: calc(100% + 10px);
  right: 0;
  z-index: 40;
  width: max-content;
  max-width: 264px;
  padding: 0.5rem 0.65rem;
  border: 1px solid rgba(0, 212, 255, 0.35);
  border-radius: 8px;
  background: #0F1629;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.45);
  color: #E8F4F8;
  font-family: system-ui, -apple-system, "Segoe UI", sans-serif;
  font-size: 0.75rem;
  font-weight: 400;
  letter-spacing: 0;
  text-transform: none;
  line-height: 1.45;
  white-space: normal;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-3px);
  transition: opacity .12s ease, transform .12s ease, visibility .12s;
  pointer-events: none;
}
.bdoc-search-scope:hover::after,
.bdoc-search-scope:focus-visible::after { opacity: 1; visibility: visible; transform: translateY(0); }
@media (prefers-reduced-motion: reduce) { .bdoc-search-scope::after { transition: none; } }