/* Documentation chrome - shared by the doc pages (_DocPageShared), the
   category index, and the search results page. Linked from each page's
   HeaderContent as a cacheable static file. Page-specific list styles
   (category list, search results) stay inline in their own pages.
   Design tokens come from new-ui/css/colors_and_type.css. */

/* ===== SHARED CHROME WIDTH =====
   The topbar and the layout share ONE reading shell: 1200px normally,
   1440px on doc pages once JS confirms the "On this page" rail exists
   (it adds .has-toc to both, see the min-width media block below). */
.doc-topbar,
.doc-layout {
    max-width: 1200px;
    margin-left: auto;
    margin-right: auto;
}

/* ===== DOC LAYOUT ===== */
.doc-layout {
    display: grid;
    grid-template-columns: 260px minmax(0, 1fr);
    gap: 0;
    min-height: 60vh;
    align-items: start;
}

/* ===== DOC TOPBAR (breadcrumb + actions + search in one chrome line) ===== */
.doc-topbar {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    padding: var(--space-3) var(--space-5);
    border-bottom: 1px solid var(--rule-1);
    background: var(--bg-page);
    flex-wrap: wrap;
}
.doc-crumbs {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    min-width: 0;
    margin-right: auto;
    font-family: var(--font-sans);
    font-size: 13px;
}
.doc-crumbs a { color: var(--slate-700); text-decoration: none; white-space: nowrap; }
.doc-crumbs a:hover { color: var(--navy-900); text-decoration: underline; text-underline-offset: 3px; }
.doc-crumbs-sep { color: var(--fg-4); }
.doc-crumbs-current { color: var(--navy-900); font-weight: 500; white-space: nowrap; }

.doc-topbar-actions {
    display: flex;
    align-items: center;
    gap: var(--space-2);
}
.doc-topbar-actions a {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-family: var(--font-sans);
    font-size: 12px;
    font-weight: 500;
    color: var(--fg-2);
    text-decoration: none;
    white-space: nowrap;
    padding: 5px 10px;
    border: 1px solid var(--rule-3);
    border-radius: var(--radius-2);
    background: var(--bg-surface);
    line-height: 1;
    transition: background 0.15s, border-color 0.15s, color 0.15s;
}
.doc-topbar-actions a:hover {
    background: var(--bg-sunken);
    border-color: var(--navy-600);
    color: var(--navy-900);
    text-decoration: none;
}
.doc-topbar-actions img { height: 14px; width: auto; }
/* The one filled chip in the docs chrome: doc readers are warm trial
   candidates, and this is the only download affordance above the fold. */
.doc-topbar-actions a.doc-topbar-download {
    background: var(--amber-500);
    border-color: var(--amber-600);
    color: var(--paper);
    font-weight: 600;
}
.doc-topbar-actions a.doc-topbar-download:hover {
    background: var(--amber-600);
    border-color: var(--amber-600);
    color: var(--paper);
}

.doc-search {
    display: flex;
    align-items: center;
    gap: 0;
    border: 1px solid var(--rule-3);
    border-radius: var(--radius-2);
    overflow: hidden;
    background: var(--bg-surface);
}
.doc-search:focus-within {
    border-color: var(--navy-600);
    box-shadow: var(--shadow-focus);
}
.doc-search input {
    border: none;
    padding: 7px var(--space-3);
    font-family: var(--font-sans);
    font-size: 13px;
    color: var(--fg-1);
    background: transparent;
    min-width: 180px;
}
/* The wrapper's :focus-within ring is the visible focus indicator. */
.doc-search input:focus { outline: none; }
.doc-search input::placeholder { color: var(--fg-4); }
.doc-search button {
    border: none;
    border-left: 1px solid var(--rule-2);
    padding: 7px 10px;
    background: var(--bg-sunken);
    cursor: pointer;
    display: flex;
    align-items: center;
    color: var(--fg-2);
}
.doc-search button:hover { background: var(--paper-tinted); color: var(--navy-900); }

/* ===== DOC NAV (left column) ===== */
.doc-nav {
    position: sticky;
    top: 72px;
    height: calc(100vh - 80px);
    overflow-y: auto;
    border-right: 1px solid var(--rule-1);
    padding: var(--space-6) 0 var(--space-8);
    background: var(--bg-page);
    scrollbar-width: thin;
    scrollbar-color: var(--rule-2) transparent;
}
.doc-nav::-webkit-scrollbar { width: 4px; }
.doc-nav::-webkit-scrollbar-thumb { background: var(--rule-2); border-radius: 2px; }

/* Mobile drawer chrome - hidden on desktop, revealed at <=880px. */
.doc-nav-trigger {
    display: none;
    align-items: center;
    gap: 7px;
    padding: 6px 10px;
    background: var(--bg-surface);
    border: 1px solid var(--rule-3);
    border-radius: var(--radius-2);
    font-family: var(--font-sans);
    font-size: 12px;
    font-weight: 600;
    color: var(--navy-900);
    cursor: pointer;
    line-height: 1;
    white-space: nowrap;
}
.doc-nav-trigger:hover { background: var(--bg-sunken); border-color: var(--navy-600); }
.doc-nav-drawer-head {
    display: none;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-3);
    padding: var(--space-4);
    border-bottom: 1px solid var(--rule-1);
    position: sticky;
    top: 0;
    background: var(--bg-page);
    z-index: 1;
}
.doc-nav-drawer-title {
    font-family: var(--font-sans);
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--fg-3);
}
.doc-nav-close {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    background: none;
    border: 1px solid var(--rule-2);
    border-radius: var(--radius-1);
    color: var(--navy-900);
    cursor: pointer;
}
.doc-nav-close:hover { background: var(--bg-sunken); }

.doc-nav-tree {
    list-style: none;
    margin: 0;
    padding: var(--space-2) var(--space-3);
}

.doc-nav-category { margin-bottom: var(--space-3); }

/* Category row: a link plus a chevron-only toggle button (valid interactive
   nesting - the old markup put an <a> inside a <button>). */
.doc-nav-cat-row {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 2px var(--space-2);
    font-family: var(--font-sans);
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--fg-3);
    border-radius: var(--radius-1);
}
.doc-nav-cat-row:hover { background: var(--bg-sunken); }
.doc-nav-cat-link {
    color: inherit;
    text-decoration: none;
    flex: 1;
    min-width: 0;
    padding: 4px 0;
}
.doc-nav-cat-link:hover { color: var(--navy-600); }
.doc-nav-cat-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    margin-left: auto;
    padding: 0;
    background: none;
    border: none;
    border-radius: var(--radius-1);
    color: inherit;
    cursor: pointer;
    flex-shrink: 0;
}
.doc-nav-cat-toggle:hover { background: var(--rule-1); color: var(--navy-900); }
.doc-nav-cat-chevron { transition: transform 0.2s; }
.doc-nav-category.open .doc-nav-cat-chevron { transform: rotate(180deg); }
.doc-nav-folder { color: var(--amber-600); flex-shrink: 0; }

.doc-nav-pages {
    list-style: none;
    margin: 2px 0 var(--space-2) var(--space-4);
    padding: 0;
    overflow: hidden;
}
.doc-nav-category:not(.open) .doc-nav-pages { display: none; }

.doc-nav-page-link {
    display: flex;
    align-items: center;
    gap: 7px;
    padding: 7px var(--space-3);
    font-family: var(--font-sans);
    font-size: 13px;
    color: var(--fg-2);
    text-decoration: none;
    border-radius: var(--radius-1);
    line-height: 1.45;
}
.doc-nav-page-link:hover { color: var(--navy-900); background: var(--bg-sunken); }
.doc-nav-page-link.active {
    color: var(--navy-900);
    font-weight: 600;
    background: var(--paper-tinted);
    border-left: 2px solid var(--amber-500);
    padding-left: calc(var(--space-3) - 2px);
}
.doc-nav-page-link svg { flex-shrink: 0; color: var(--fg-4); }
.doc-nav-page-link.active svg { color: var(--amber-600); }

/* Left-nav drawer overlay (only ever opened on mobile). */
.doc-nav-overlay {
    position: fixed;
    inset: 0;
    z-index: 70;
    background: rgba(10, 24, 40, 0.45);
    opacity: 0;
    visibility: hidden;
    touch-action: none;
    transition: opacity 0.22s ease, visibility 0.22s ease;
}
.doc-nav-overlay.open { opacity: 1; visibility: visible; }

/* ===== DOC CONTENT (right column) ===== */
.doc-content-col {
    padding: var(--space-8) var(--space-12) var(--space-16);
    max-width: 960px;
}

.doc-page-title {
    font-family: var(--font-serif);
    font-size: clamp(26px, 3vw, 40px);
    font-weight: 500;
    color: var(--navy-900);
    margin: 0 0 var(--space-8);
    line-height: 1.25;
}

/* ===== PREVIEW BANNER ===== */
.doc-preview-banner {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: var(--space-3) var(--space-4);
    background: var(--amber-50);
    border: 1px solid var(--amber-500);
    border-radius: var(--radius-2);
    font-family: var(--font-sans);
    font-size: 14px;
    color: var(--amber-700);
    margin-bottom: var(--space-4);
}
.doc-preview-banner strong { font-weight: 600; }

/* ===== VIDEO EMBED ===== */
.doc-video-wrap {
    position: relative;
    width: 100%;
    padding-bottom: 56.25%;
    margin-bottom: var(--space-6);
    border-radius: var(--radius-2);
    overflow: hidden;
}
.doc-video-wrap iframe {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    border: 0;
}

/* DB-stored video sections (ComposeDocHtml emits .doc-block-video). The site
   does not load Bootstrap, so the legacy .ratio/.ratio-16x9 classes did nothing
   and the iframe collapsed to its tiny intrinsic size. Make it a real, full-width
   16:9 box so embedded tutorial videos are clearly visible. */
.doc-block-video {
    position: relative;
    width: 100%;
    padding-bottom: 56.25%;
    margin: var(--space-6) 0;
    border-radius: var(--radius-2);
    overflow: hidden;
}
.doc-block-video iframe {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    border: 0;
}

/* Interactive tool embeds injected above specific doc pages. */
.doc-tool-embed { margin: var(--space-6) 0 var(--space-8); }

/* ===== DB-STORED DOC BODY STYLES ===== */
/* These target HTML stored in the database - classes cannot be added to that HTML */
.doc-body {
    font-family: var(--font-sans);
    font-size: 16.5px;
    line-height: 1.8;
    color: var(--fg-2);
    /* Long unbroken tokens (URLs, member names) must wrap, not overflow, on phones. */
    overflow-wrap: break-word;
}
.doc-body p, .doc-body li, .doc-body blockquote { max-width: 74ch; }
.doc-body h1 {
    font-family: var(--font-serif);
    font-size: 28px;
    font-weight: 500;
    color: var(--navy-900);
    margin: var(--space-10) 0 var(--space-4);
    line-height: 1.25;
    padding-bottom: var(--space-3);
    border-bottom: 1px solid var(--rule-1);
}
/* Each h2 opens a new section: a hairline divider plus generous space above
   it separates one section from the next so the page reads as distinct blocks
   instead of one continuous wall of text. The first heading on a page gets no
   divider (it would double up under the title / after the intro). */
.doc-body h2 {
    font-family: var(--font-serif);
    font-size: 24px;
    font-weight: 500;
    color: var(--navy-900);
    margin: var(--space-10) 0 var(--space-4);
    padding-top: var(--space-6);
    border-top: 1px solid var(--rule-1);
    line-height: 1.3;
}
.doc-body > h2:first-child {
    margin-top: 0;
    padding-top: 0;
    border-top: none;
}
.doc-body h3 {
    font-family: var(--font-sans);
    font-size: 17px;
    font-weight: 600;
    color: var(--navy-900);
    margin: var(--space-8) 0 var(--space-2);
    line-height: 1.35;
}
.doc-body h4, .doc-body h5, .doc-body h6 {
    font-family: var(--font-sans);
    font-size: 15px;
    font-weight: 600;
    color: var(--fg-1);
    margin: var(--space-5) 0 var(--space-2);
}
/* Anchor jumps from the "On this page" rail must clear the sticky top bar. */
.doc-body h1, .doc-body h2, .doc-body h3, .doc-body h4 { scroll-margin-top: 88px; }
.doc-body p { margin: 0 0 var(--space-5); }
.doc-body a { color: var(--navy-600); text-decoration: underline; text-underline-offset: 3px; }
.doc-body a:hover { color: var(--navy-900); }
.doc-body ul, .doc-body ol {
    margin: 0 0 var(--space-4) var(--space-6);
    padding: 0;
}
.doc-body li { margin-bottom: var(--space-1); }
.doc-body strong, .doc-body b { font-weight: 600; color: var(--fg-1); }
.doc-body em, .doc-body i { font-style: italic; }
.doc-body hr {
    border: none;
    border-top: 1px solid var(--rule-1);
    margin: var(--space-8) 0;
}
.doc-body blockquote {
    border-left: 3px solid var(--amber-500);
    margin: var(--space-6) 0;
    padding: var(--space-3) var(--space-6);
    background: var(--paper-tinted);
    border-radius: 0 var(--radius-2) var(--radius-2) 0;
    color: var(--fg-2);
    font-style: italic;
}
.doc-body code {
    font-family: var(--font-mono);
    font-size: 0.875em;
    background: var(--paper-tinted);
    border: 1px solid var(--rule-2);
    border-radius: var(--radius-1);
    padding: 1px 5px;
    color: var(--fg-1);
}
/* Keyboard keys typed as <kbd> in DB body HTML (e.g. "press Ctrl+Z"). */
.doc-body kbd {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-family: var(--font-mono);
    font-size: 12px;
    background: var(--bg-sunken);
    color: var(--navy-900);
    border: 1px solid var(--rule-3);
    border-bottom-width: 2px;
    border-radius: var(--radius-1);
    padding: 1px 6px;
    min-width: 18px;
    vertical-align: 1px;
    margin: 0 1px;
}
.doc-body pre {
    position: relative; /* anchors the injected copy button */
    font-family: var(--font-mono);
    font-size: 13px;
    /* Code blocks carry their own VS-light inline styling (cream background,
       colored syntax). Provide a matching light fallback and do NOT override
       the inline styles - so the stored colors show. */
    background: #f6f6f1;
    color: #1c1c1c;
    border: 1px solid #e4e2d8;
    border-radius: var(--radius-2);
    padding: var(--space-5) var(--space-6);
    overflow-x: auto; /* fallback for a single unbreakable token wider than the block */
    white-space: pre-wrap;
    word-break: break-word;
    margin: 0 0 var(--space-6);
    line-height: 1.6;
}
/* Code blocks carry their own VS-light inline syntax colors - let them show. */
.doc-body pre * {
    background: transparent;
}
.doc-body pre code {
    background: none;
    border: none;
    padding: 0;
    font-size: inherit;
}
/* Copy-to-clipboard button injected by JS into every .doc-body pre. */
.doc-code-copy {
    position: absolute;
    top: 8px;
    right: 8px;
    width: 30px;
    height: 28px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: rgba(20, 30, 50, 0.05);
    border: 1px solid rgba(20, 30, 50, 0.14);
    border-radius: var(--radius-1);
    color: rgba(30, 41, 59, 0.7);
    cursor: pointer;
    opacity: 0;
    transition: opacity 0.15s, background 0.15s;
}
.doc-body pre:hover .doc-code-copy,
.doc-code-copy:focus-visible { opacity: 1; }
.doc-code-copy:hover { background: rgba(20, 30, 50, 0.10); }
.doc-code-copy.copied { color: #2f8f5b; border-color: #2f8f5b; }
/* Touch devices have no hover - keep it visible so it is usable on mobile. */
@media (hover: none) {
    .doc-code-copy { opacity: 0.85; }
}
.doc-body img {
    max-width: 100%;
    height: auto;
    border-radius: var(--radius-2);
    border: 1px solid var(--rule-2);
    display: block;
    margin: var(--space-5) auto;
}
.doc-body figure { margin: var(--space-5) 0; }
.doc-body figcaption {
    font-size: 12px;
    color: var(--fg-3);
    font-family: var(--font-sans);
    margin-top: var(--space-2);
    text-align: center;
}
/* Tables - overflow-scroll on mobile */
.doc-body table {
    width: 100%;
    border-collapse: collapse;
    font-size: 14px;
    margin: 0 0 var(--space-6);
    min-width: 480px;
}
.doc-body-table-wrap {
    overflow-x: auto;
    margin: 0 0 var(--space-6);
    border-radius: var(--radius-2);
    border: 1px solid var(--rule-2);
}
.doc-body-table-wrap .doc-body table {
    margin: 0;
    border: none;
    border-radius: 0;
}
.doc-body table th {
    font-family: var(--font-sans);
    font-weight: 600;
    font-size: 13px;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    color: var(--fg-3);
    background: var(--paper-tinted);
    padding: var(--space-2) var(--space-3);
    border-bottom: 1px solid var(--rule-2);
    text-align: left;
}
.doc-body table td {
    padding: var(--space-2) var(--space-3);
    border-bottom: 1px solid var(--rule-1);
    vertical-align: top;
}
.doc-body table tr:last-child td { border-bottom: none; }
.doc-body table tr:nth-child(even) td { background: var(--bg-sunken); }

/* ===== DOC SECTION GRID =====
   The DB composer emits <div class="row align-items-center g-4 doc-block-row">
   with col-md-7 (text, always first in DOM) + col-md-5 (media) and flips the
   visual order via order-md-last. The site does not load Bootstrap, so this
   grid IS the layout for those rows. */
.doc-block-row {
    display: grid;
    grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
    gap: var(--space-10);
    align-items: center;
}
.doc-block-row > .order-md-last { order: 2; }
/* When the row is flipped (text carries .order-md-last) the media lands in the
   first cell - mirror the ratio so text keeps the wider measure. Progressive
   enhancement: without :has() the row still renders, just ratio-mirrored. */
.doc-block-row:has(> .order-md-last) {
    grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
}
.doc-block-image img { max-width: 100%; }

/* Empty state */
.doc-empty-state {
    padding: var(--space-12) var(--space-8);
    text-align: center;
    color: var(--fg-3);
    font-family: var(--font-sans);
    font-size: 15px;
    line-height: 1.6;
    border: 1px dashed var(--rule-2);
    border-radius: var(--radius-3);
    max-width: 480px;
    margin: var(--space-8) auto;
}

/* ===== PREV / NEXT NAVIGATION ===== */
.doc-pager {
    display: flex;
    gap: var(--space-4);
    margin-top: var(--space-10);
    padding-top: var(--space-6);
    border-top: 1px solid var(--rule-1);
    font-family: var(--font-sans);
}
.doc-pager-prev { margin-right: auto; }
.doc-pager-next { margin-left: auto; text-align: right; }
.doc-pager-index { display: flex; align-items: flex-end; }
.doc-pager-index a { font-size: 13px; color: var(--fg-3); }
.doc-pager-label {
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--fg-3);
    font-weight: 600;
    margin-bottom: 4px;
}
.doc-pager a {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 14px;
    font-weight: 500;
    color: var(--navy-600);
    text-decoration: none;
    border: 1px solid var(--rule-2);
    padding: var(--space-2) var(--space-4);
    border-radius: var(--radius-2);
    transition: background 0.15s, border-color 0.15s;
}
.doc-pager a:hover {
    background: var(--bg-sunken);
    border-color: var(--navy-600);
    color: var(--navy-900);
}

.doc-last-updated {
    font-family: var(--font-sans);
    font-size: 12px;
    color: var(--fg-3);
    margin-top: var(--space-6);
    font-style: italic;
}

/* ===== DOCS-ROOT PRODUCT FRAMING (one quiet serif line under the h1) ===== */
.doc-home-lede {
    font-family: var(--font-serif);
    font-size: 17px;
    font-style: italic;
    line-height: 1.6;
    color: var(--fg-2);
    max-width: 66ch;
    margin: 0 0 var(--space-6);
}
.doc-home-lede a {
    font-family: var(--font-sans);
    font-style: normal;
    font-size: 14px;
    color: var(--navy-700);
    text-decoration: none;
    white-space: nowrap;
    margin-left: 6px;
}
.doc-home-lede a:hover { color: var(--navy-900); text-decoration: underline; text-underline-offset: 3px; }

/* ===== END-OF-ARTICLE NEXT STEP (quiet card, one filled action) ===== */
.doc-next-step {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-6);
    margin-top: var(--space-8);
    padding: var(--space-6);
    background: var(--bg-surface);
    border: 1px solid var(--rule-2);
    border-left: 3px solid var(--amber-500);
    border-radius: var(--radius-2);
}
.doc-next-step-title {
    font-family: var(--font-serif);
    font-size: 19px;
    font-weight: 500;
    color: var(--navy-900);
    margin-bottom: 4px;
}
.doc-next-step-sub {
    font-family: var(--font-sans);
    font-size: 14px;
    line-height: 1.55;
    color: var(--fg-2);
    margin: 0;
}
.doc-next-step-demo {
    font-family: var(--font-sans);
    font-size: 12.5px;
    color: var(--fg-3);
    margin: 6px 0 0;
}
.doc-next-step-demo a { color: var(--navy-700); font-weight: 500; }
.doc-next-step-demo a:hover { color: var(--navy-900); }
.doc-next-step-action { flex-shrink: 0; }
@media (max-width: 880px) {
    .doc-next-step { flex-direction: column; align-items: stretch; }
    .doc-next-step-action .btn { width: 100%; justify-content: center; }
}

/* ===== ON THIS PAGE (right rail) ===== */
/* Faithful to the original cloud design's .docs-toc: a sticky, floating
   table of contents built from the page's section headers, with scroll-spy.
   Hidden by default; revealed only on wide screens when JS finds >= 2
   headings (it adds .has-toc to .doc-layout and .doc-topbar). */
.doc-toc {
    display: none;
    position: sticky;
    top: 72px;
    align-self: start;
    max-height: calc(100vh - 80px);
    overflow-y: auto;
    padding: var(--space-8) var(--space-4) var(--space-8) var(--space-5);
    scrollbar-width: thin;
    scrollbar-color: var(--rule-2) transparent;
}
.doc-toc::-webkit-scrollbar { width: 4px; }
.doc-toc::-webkit-scrollbar-thumb { background: var(--rule-2); border-radius: 2px; }
.doc-toc-h {
    font-family: var(--font-sans);
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    color: var(--fg-3);
    margin: 0 0 var(--space-3);
}
.doc-toc-list {
    list-style: none;
    margin: 0;
    padding: 0;
    border-left: 1px solid var(--rule-1);
}
.doc-toc-list li a {
    display: block;
    padding: 4px var(--space-3);
    margin-left: -1px;
    border-left: 2px solid transparent;
    font-family: var(--font-sans);
    font-size: 12.5px;
    line-height: 1.45;
    color: var(--fg-3);
    text-decoration: none;
    transition: color 0.15s, border-color 0.15s;
}
.doc-toc-list li a:hover { color: var(--navy-900); }
.doc-toc-list li a.active {
    color: var(--navy-900);
    font-weight: 600;
    border-left-color: var(--amber-500);
}
.doc-toc-list li.depth-3 a {
    padding-left: var(--space-6);
    font-size: 12px;
}

/* "On this page" as a collapsible dropdown above the content - shown below the
   rail breakpoint so tablet/mobile readers still get section jump-links. */
.doc-toc-mobile {
    display: none;
    background: var(--bg-page);
    border: 1px solid var(--rule-2);
    border-radius: var(--radius-2);
    margin-bottom: var(--space-6);
    overflow: hidden;
}
.doc-toc-mobile-trigger {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px var(--space-4);
    background: transparent;
    border: 0;
    cursor: pointer;
    font-family: var(--font-sans);
    font-size: 13px;
    font-weight: 600;
    color: var(--navy-900);
    text-align: left;
}
.doc-toc-mobile-trigger svg { color: var(--fg-3); transition: transform 0.2s; flex-shrink: 0; }
.doc-toc-mobile.open .doc-toc-mobile-trigger svg { transform: rotate(180deg); }
.doc-toc-mobile-body { display: none; padding: 0 var(--space-4) var(--space-3); }
.doc-toc-mobile.open .doc-toc-mobile-body { display: block; }
.doc-toc-mobile-body .doc-toc-list { border-left: 1px solid var(--rule-1); }

/* ===== AHP CTA (injected into specific doc bodies) ===== */
.doc-ahp-cta {
    margin-top: var(--space-8);
    background: var(--bg-sunken);
    border: 1px solid var(--rule-2);
    border-left: 3px solid var(--amber-500);
    border-radius: 0 var(--radius-2) var(--radius-2) 0;
    padding: var(--space-4) var(--space-6);
    display: flex; align-items: center; justify-content: space-between;
    gap: var(--space-4); flex-wrap: wrap;
}
.doc-ahp-cta .dac-text { font-family: var(--font-sans); font-size: var(--text-sm); color: var(--fg-2); margin: 0; max-width: 58ch; }
.doc-ahp-cta .dac-text strong { color: var(--fg-1); }
.doc-ahp-cta .btn { flex: 0 0 auto; }
/* The generic ".doc-body a" rule above paints links navy + underline, which
   would override the amber button's own white label and make it unreadable on
   its amber fill. Restore the button's intended look for any CTA in doc body. */
.doc-body .doc-ahp-cta a.btn-primary,
.doc-body .doc-ahp-cta a.btn-primary:hover {
    color: #fff;
    text-decoration: none;
}

/* ===== FOCUS VISIBILITY ===== */
.doc-nav-trigger:focus-visible,
.doc-nav-close:focus-visible,
.doc-toc-mobile-trigger:focus-visible,
.doc-nav-cat-toggle:focus-visible,
.doc-code-copy:focus-visible {
    outline: none;
    box-shadow: var(--shadow-focus);
}

/* Wide screens: open the third column and show the rail. Widen the shell so
   adding the 240px rail does not squeeze the reading measure. */
/* Constant reading shell on every doc page: the 1440px width and the 260px
   nav column are identical whether or not a page has an "On this page" rail,
   so navigating between pages never shifts the layout or the left nav. The
   240px rail column is always reserved (content is capped at 960px, so a page
   without a rail looks the same); the rail itself only becomes visible when
   JS adds .has-toc after finding >= 2 headings. */
@media (min-width: 1160px) {
    .doc-topbar,
    .doc-layout { max-width: 1440px; }
    .doc-layout { grid-template-columns: 260px minmax(0, 1fr) 240px; }
    .doc-layout.has-toc .doc-toc { display: block; }
}

/* Below the rail breakpoint, surface the TOC as the dropdown instead. */
@media (max-width: 1159px) {
    .doc-layout.has-toc .doc-toc-mobile { display: block; }
}

/* ===== RESPONSIVE ===== */
@media (max-width: 880px) {
    .doc-layout {
        grid-template-columns: minmax(0, 1fr);
    }
    /* Left nav becomes an off-canvas slide-in drawer. */
    .doc-nav {
        position: fixed;
        top: 0;
        left: 0;
        bottom: 0;
        height: 100%;
        width: 84%;
        max-width: 320px;
        z-index: 71;
        border-right: 1px solid var(--rule-2);
        border-bottom: none;
        padding: 0 0 var(--space-8);
        background: var(--bg-page);
        box-shadow: 12px 0 40px rgba(10, 24, 40, 0.15);
        transform: translateX(-100%);
        transition: transform 0.22s ease;
        overscroll-behavior: contain;
    }
    .doc-nav.open { transform: translateX(0); }
    .doc-nav-trigger { display: inline-flex; padding: 11px 14px; }
    .doc-nav-drawer-head { display: flex; }
    .doc-nav-close { width: 40px; height: 40px; }
    .doc-nav-cat-toggle { width: 34px; height: 34px; }
    .doc-nav-tree {
        padding: var(--space-3);
    }
    .doc-nav-page-link { padding: 11px var(--space-3); }
    .doc-nav-page-link.active { padding-left: calc(var(--space-3) - 2px); }
    .doc-content-col {
        padding: var(--space-6) var(--space-4) var(--space-10);
        max-width: none;
    }
    /* Sticky tools bar tucked under the 56px mobile topnav. The breadcrumb
       trail yields so the sticky chrome stays compact. */
    .doc-topbar {
        position: sticky;
        top: 56px;
        z-index: 40;
        padding: var(--space-3) var(--space-4);
        gap: var(--space-3);
    }
    .doc-crumbs { display: none; }
    .doc-search button { padding: 11px 14px; }
    /* 16px input font is the iOS no-auto-zoom threshold. */
    .doc-search input { padding: 11px var(--space-3); font-size: 16px; }
    .doc-toc-mobile-body .doc-toc-list li a { padding: 9px var(--space-3); }
    .doc-code-copy { width: 38px; height: 34px; }
    /* Anchor jumps must also clear the sticky tools bar on phones. */
    .doc-body h1, .doc-body h2, .doc-body h3, .doc-body h4 { scroll-margin-top: 132px; }
    .doc-block-row,
    .doc-block-row:has(> .order-md-last) {
        grid-template-columns: minmax(0, 1fr);
        gap: var(--space-4);
    }
    /* Text is first in the composer's DOM order - keep it first when stacked. */
    .doc-block-row > .order-md-last { order: 0; }
    .doc-pager {
        flex-direction: column;
        gap: var(--space-3);
    }
    .doc-pager-prev, .doc-pager-next { margin: 0; text-align: left; }
}
@media (max-width: 480px) {
    /* Keep the sticky bar a clean two rows: trigger + search share the first
       row, the action chips (Download / NuGet / Purchase) wrap to a second. */
    .doc-nav-trigger { order: 0; }
    .doc-search { order: 1; flex: 1 1 auto; min-width: 0; }
    .doc-search input { min-width: 0; width: 100%; flex: 1; }
    .doc-topbar-actions { order: 2; flex-basis: 100%; }
    .doc-body table { min-width: 340px; }
}