/* ==========================================================================
   Documentation guides  (03 · Inner pages / fhir-guide.jsx + unity-guide.jsx)

   One stylesheet for both guides. The comp's chrome - gradient hero, tab strip
   sitting on the hero, sticky side nav - wraps editable HTML that comes from the
   PageContent table, so .vd-doc-body deliberately re-styles arbitrary legacy
   markup rather than assuming a structure.
   ========================================================================== */

.vd-doc { display: flex; flex-direction: column; background: #FAF9FD; }

/* ---------- Hero ---------- */

.vd-doc-hero {
    position: relative;
    overflow: hidden;
    /* Fix (VCO-1108): 0 bottom padding left the intro paragraph's last line
       (and the tab strip, on a shared-group page) sitting flush against the
       gradient's edge, on Unity/FHIR Process Overview and the FHIR/Unity FAQ
       pages - this bottom gap is what the top/sides already had. */
    padding: 30px 40px 28px;
    background: linear-gradient(135deg, #2E2155 0%, #403C7E 60%, #7A3578 100%);
}

.vd-doc-hero::after {
    content: "";
    position: absolute;
    inset: 0;
    opacity: .5;
    pointer-events: none;
    background:
        radial-gradient(560px 260px at 92% -20%, rgba(199, 232, 245, .3), transparent 70%),
        radial-gradient(460px 240px at 4% 130%, rgba(250, 181, 84, .28), transparent 70%);
}

.vd-doc-hero-inner { position: relative; z-index: 1; max-width: 1180px; }

.vd-doc-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 4px 12px;
    border-radius: 99px;
    background: rgba(255, 255, 255, .14);
    border: 1px solid rgba(255, 255, 255, .24);
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 1.3px;
    text-transform: uppercase;
    color: var(--gold);
}

.vd-doc-hero h1 {
    font-size: 31px;
    font-weight: 700;
    letter-spacing: -.9px;
    color: #fff;
    margin: 14px 0 0;
}

.vd-doc-hero p {
    font-size: 14px;
    line-height: 1.6;
    color: rgba(255, 255, 255, .8);
    margin: 10px 0 0;
    max-width: 660px;
}

/* ---------- Tab strip ---------- */

.vd-doc-tabs {
    display: flex;
    gap: 6px;
    margin-top: 22px;
    overflow-x: auto;
    /* Fix (site crawl, 2026-09): same overflow-x/overflow-y pairing gotcha
       fixed on .vd-tabs (manage-account.css) - overflow-x alone resolves
       overflow-y to "auto" too, which can render a phantom vertical
       scrollbar on a borderline content/box height match. scrollbar-width
       only hides Firefox's overlay scrollbar, not Chrome's classic one. */
    overflow-y: hidden;
    scrollbar-width: none;
}

.vd-doc-tabs::-webkit-scrollbar { display: none; }

.vd-doc-tab {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 18px;
    border: 0;
    border-radius: 10px 10px 0 0;
    font-family: inherit;
    font-size: 13px;
    font-weight: 700;
    white-space: nowrap;
    text-decoration: none;
    background: rgba(255, 255, 255, .12);
}

/* .vd-dash a (dashboard.css) is a class+tag selector, which beats a bare
   .vd-doc-tab class selector - inactive tabs were rendering dark indigo
   text on the purple hero instead of white. Scoping to .vd-doc-tabs
   .vd-doc-tab raises the specificity enough to win without !important. */
.vd-doc-tabs .vd-doc-tab { color: rgba(255, 255, 255, .85); }
.vd-doc-tabs .vd-doc-tab:hover { color: #fff; }
.vd-doc-tabs .vd-doc-tab.is-active,
.vd-doc-tabs .vd-doc-tab.is-active:hover { color: var(--blackberry); }

.vd-doc-tab:hover { background: rgba(255, 255, 255, .2); text-decoration: none; }

.vd-doc-tab.is-active {
    background: #FAF9FD;
}

.vd-doc-tab.is-active:hover { background: #FAF9FD; }

/* ---------- Layout below the hero ---------- */

.vd-doc-main {
    display: grid;
    grid-template-columns: 214px minmax(0, 1fr);
    gap: 34px;
    padding: 30px 40px 60px;
    max-width: 1180px;
}

.vd-doc-side {
    position: sticky;
    top: 16px;
    align-self: start;
    display: flex;
    flex-direction: column;
    background: #fff;
    border: 1px solid var(--line-soft);
    border-radius: 10px;
    padding: 14px 0 4px;
}

.vd-doc-side-head {
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 1px;
    text-transform: uppercase;
    color: #3D3654;
    padding: 0 14px 10px;
}

/* The anchor list is built from the content's own headings, so it can be long
   on a consolidated tab - cap it and let it scroll instead of running off the
   viewport. */
.vd-doc-side-links {
    display: flex;
    flex-direction: column;
    max-height: calc(100vh - 160px);
    overflow-y: auto;
    scrollbar-width: thin;
}

.vd-doc-side-links::-webkit-scrollbar { width: 8px; }
.vd-doc-side-links::-webkit-scrollbar-thumb {
    background: #E2DEEC;
    border-radius: 99px;
    border: 2px solid transparent;
    background-clip: content-box;
}

/* Headings get scroll-margin so an anchor jump clears the sticky app top bar. */
.vd-doc-body h2[id],
.vd-doc-body h3[id] { scroll-margin-top: 72px; }

.vd-doc-side a {
    padding: 10px 14px;
    border-top: 1px solid var(--line-soft);
    font-size: 12.5px;
    color: #3D3654;
    text-decoration: none;
}

.vd-doc-side-links a:first-child { border-top: 0; }

.vd-doc-side a:hover { color: var(--plum); text-decoration: none; }
.vd-doc-side a.is-active { color: var(--plum); font-weight: 600; }

/* ---------- Content column ----------
   The comp (fhir-guide.jsx) never wraps the whole article in a card - only
   individual pieces (tables, step lists, callouts) get their own border. A
   card around the full column read as a stray outline framing the prose, so
   this stays a plain column on the .vd-doc background instead. */

.vd-doc-article {
    min-width: 0;
}

.vd-doc-article > h2:first-child,
.vd-doc-article > .vd-doc-title { margin-top: 0; }

.vd-doc-title {
    font-size: 22px;
    font-weight: 700;
    letter-spacing: -.5px;
    color: var(--blackberry);
    margin: 0 0 6px;
}

.vd-doc-updated { font-size: 11.5px; color: var(--muted); margin: 0 0 22px; }

/* ---------- Injected PageContent HTML ----------
   This markup is authored in the portal's own editor and is decades-old in
   places, so the rules below are defensive: normalise headings, tables, code
   and images without assuming any particular nesting.                        */

.vd-doc-body { font-size: 13.5px; line-height: 1.7; color: var(--body); }

.vd-doc-body h1,
.vd-doc-body h2,
.vd-doc-body h3,
.vd-doc-body h4 {
    color: var(--blackberry);
    font-weight: 700;
    line-height: 1.3;
    margin: 28px 0 10px;
}

.vd-doc-body h1 { font-size: 21px; letter-spacing: -.4px; }
.vd-doc-body h2 { font-size: 18px; letter-spacing: -.3px; }
.vd-doc-body h3 { font-size: 15px; }
.vd-doc-body h4 { font-size: 13.5px; }
.vd-doc-body > *:first-child { margin-top: 0; }

.vd-doc-body p { margin: 0 0 14px; }

/* adp.css's global reset (`ol, ul { list-style: none; }`, plus the Eric
   Meyer `font: inherit` reset on strong/b) strips both list markers and
   bold weight site-wide - restore them here since PageContent HTML relies
   on <ol>/<ul>/<strong> reading like actual lists and emphasis. */
.vd-doc-body ul { list-style: disc; margin: 0 0 16px; padding-left: 22px; }
.vd-doc-body ol { list-style: decimal; margin: 0 0 16px; padding-left: 22px; }
.vd-doc-body li { margin-bottom: 6px; }
.vd-doc-body strong, .vd-doc-body b { font-weight: 700; }

.vd-doc-body a { color: var(--plum); text-decoration: underline; }
.vd-doc-body a:hover { color: #6A2D69; }

.vd-doc-body img { max-width: 100%; height: auto; border-radius: 8px; }

.vd-doc-body code, .vd-doc-body tt {
    font-family: var(--mono, ui-monospace, 'SF Mono', Menlo, monospace);
    font-size: 12px;
    background: #F3F0F9;
    color: var(--indigo);
    border-radius: 4px;
    padding: 1px 5px;
}

/* Dark code blocks, matching the comp's FGCode component. */
.vd-doc-body pre {
    background: var(--midnight);
    color: #E5E0F5;
    border: 1px solid var(--blackberry);
    border-radius: 12px;
    padding: 14px 16px;
    margin: 0 0 18px;
    overflow: auto;
    font-family: var(--mono, ui-monospace, 'SF Mono', Menlo, monospace);
    font-size: 12px;
    line-height: 1.65;
}

.vd-doc-body pre code { background: none; color: inherit; padding: 0; }

.vd-doc-body table {
    width: 100%;
    border-collapse: collapse;
    font-size: 12.5px;
    margin: 0 0 20px;
    border: 1px solid #ECE9F2;
    border-radius: 12px;
    overflow: hidden;
}

.vd-doc-body th {
    text-align: left;
    padding: 10px 16px;
    background: #FAF9FD;
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: .6px;
    text-transform: uppercase;
    color: #3D3654;
}

.vd-doc-body td { padding: 11px 16px; border-top: 1px solid #F1EEF7; vertical-align: top; }

.vd-doc-body blockquote {
    margin: 0 0 18px;
    padding: 14px 18px;
    border-radius: 12px;
    background: rgba(98, 130, 193, .07);
    border: 1px solid rgba(98, 130, 193, .3);
}

.vd-doc-body hr { border: 0; border-top: 1px solid var(--line); margin: 26px 0; }

/* Legacy content often carries its own fixed-width containers. */
.vd-doc-body .container { width: 100%; max-width: none; padding: 0; }

/* adp.css defines a global .bsection { background: #eae9ee; } for the old
   site's boxed page sections. Raw PageContent HTML still carries that class
   from the legacy editor, and since adp.css loads unconditionally (not
   gated behind .vd-legacy), it painted a stray gray panel into these pages
   too - neutralize it here the same way .container is neutralized above. */
.vd-doc-body .bsection { background: none; padding: 0; }

/* ---------- FAQ accordion ----------
   The FAQ PageContent rows are already accordion markup from the legacy
   editor (.acc_item / .acc_trigger / .acc_container) - the old page had
   jQuery to toggle them. Nothing in this shell styled or wired that, so
   every answer rendered expanded at once. These rules give them the comp's
   card shape (unity-guide.jsx UGFaqItem); the script in DocGuide.cshtml
   does the collapsing. adp.css's .acc_trigger a { color:#40619B; font-size:16pt }
   has to be overridden explicitly - it is a class+tag selector. */

.vd-doc-body .acc_item {
    background: #fff;
    border: 1px solid #ECE9F2;
    border-radius: 12px;
    overflow: hidden;
    margin: 0 0 8px;
}

/* Fix (VCO-1138): every rule below used to target `.acc_trigger > a` -
   but the FAQ PageContent rows write .acc_trigger as a bare
   <h3>question</h3>, never with a nested <a>, so none of this ever
   matched anything and the trigger rendered as plain unstyled text
   (and, per DocGuide.cshtml's script, could never be clicked open -
   see that fix's comment). Targets .acc_trigger directly now. */
.vd-doc-body .acc_trigger {
    margin: 0;
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 18px;
    color: var(--blackberry);
    font-size: 13.5px;
    font-weight: 700;
    line-height: 1.45;
    cursor: pointer;
}

.vd-doc-body .acc_trigger:hover { background: #FBFAFD; }

/* Some FAQ rows (Unity's) still wrap the question in a legacy
   <a href="#">, which picked up adp.css's .acc_trigger a (16pt, link
   colour, underline) and made every Unity question look like a large
   hyperlink. Render it exactly like the bare-text FHIR questions. */
.vd-doc-body .acc_trigger > a,
.vd-doc-body .acc_trigger > a:hover,
.vd-doc-body .acc_trigger > a:focus {
    color: inherit;
    font: inherit;
    text-decoration: none;
}

/* Chevron, rotated when the item is open. */
.vd-doc-body .acc_trigger::after {
    content: "";
    flex: 0 0 9px;
    width: 9px;
    height: 9px;
    margin-left: auto;
    border-right: 2px solid #6D6680;
    border-bottom: 2px solid #6D6680;
    transform: rotate(45deg) translateY(-2px);
    transition: transform .14s ease;
}

.vd-doc-body .acc_item.is-open .acc_trigger::after {
    transform: rotate(225deg) translateY(-2px);
}

.vd-doc-body .acc_container {
    padding: 0 18px 16px;
    font-size: 13px;
    line-height: 1.7;
    color: var(--body);
}

.vd-doc-body .acc_container > *:first-child { margin-top: 0; }
.vd-doc-body .acc_container > *:last-child { margin-bottom: 0; }

/* Collapsed by default once the script has run. Gated on .js-acc so the
   content still reads fully expanded if the script never executes. */
.vd-doc-body.js-acc .acc_item:not(.is-open) .acc_container { display: none; }

/* ---------- FAQ callouts / subheads / tables ----------
   Mirrors UGCallout, UGSubHead and UGTable in unity-guide.jsx. PageContent
   is arbitrary HTML, so these are plain classes the authored row applies
   rather than components. */

.vd-fq-callout {
    display: flex;
    flex-direction: column;
    gap: 3px;
    padding: 16px 18px;
    margin: 0 0 18px;
    border-radius: 12px;
    font-size: 13px;
    line-height: 1.65;
}

.vd-fq-callout > *:last-child { margin-bottom: 0; }
.vd-fq-callout-title { font-weight: 700; }

.vd-fq-callout--info {
    background: rgba(98, 130, 193, .07);
    border: 1px solid rgba(98, 130, 193, .3);
}
.vd-fq-callout--info .vd-fq-callout-title { color: var(--blueberry); }

.vd-fq-callout--warn {
    background: rgba(250, 181, 84, .1);
    border: 1px solid rgba(250, 181, 84, .42);
}
.vd-fq-callout--warn .vd-fq-callout-title { color: #8A5A08; }

.vd-fq-callout--danger {
    background: rgba(230, 89, 76, .07);
    border: 1px solid rgba(230, 89, 76, .32);
}
.vd-fq-callout--danger .vd-fq-callout-title { color: #B23D32; }

/* Sub-line under an h4 subhead. */
.vd-doc-body .vd-fq-sub {
    margin: -4px 0 14px;
    font-size: 12.5px;
    line-height: 1.6;
    color: #3D3654;
}

/* Language label sitting directly above a <pre>, like UGCode's header row. */
.vd-doc-body .vd-fq-codelabel {
    margin: 0 0 6px;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 1px;
    text-transform: uppercase;
    color: var(--plum);
}

/* UGTable bolds the first column. Scoped to a class so legacy tables in
   other PageContent rows are unaffected. */
.vd-doc-body .vd-fq-table td:first-child {
    font-weight: 700;
    color: var(--blackberry);
}

/* UGTable's `mono` prop monospaces one column. Which column differs by
   table, so these are named for the column rather than reusing one flag:
   --monokey for tables whose FIRST column is an identifier (field names,
   Magic arguments, launch parameters), --monoval for tables whose SECOND
   column is the example value (the My Apps credentials table). */
.vd-doc-body .vd-fq-table--monokey td:first-child {
    font-family: var(--mono, ui-monospace, 'SF Mono', Menlo, monospace);
    font-weight: 700;
}

.vd-doc-body .vd-fq-table--monoval td:nth-child(2) {
    font-family: var(--mono, ui-monospace, 'SF Mono', Menlo, monospace);
    font-size: 11.5px;
}

/* ---------- Unity guide layout blocks ----------
   Mirrors UGCard, UGStepHead, UGSampleGrid and the inline card grids in
   unity-guide.jsx. PageContent is arbitrary HTML, so these are plain classes
   the authored rows apply rather than components. */

.vd-doc-body .vd-ug-grid2,
.vd-doc-body .vd-ug-grid3 {
    display: grid;
    gap: 14px;
    margin: 0 0 18px;
}

.vd-doc-body .vd-ug-grid2 { grid-template-columns: 1fr 1fr; }
.vd-doc-body .vd-ug-grid3 { grid-template-columns: repeat(3, 1fr); }

.vd-doc-body .vd-ug-card {
    background: #fff;
    border: 1px solid #ECE9F2;
    border-radius: 12px;
    padding: 15px 17px;
    box-shadow: 0 1px 2px rgba(46, 33, 85, .05);
}

.vd-doc-body .vd-ug-card--pm { border-top: 3px solid var(--plum); }
.vd-doc-body .vd-ug-card--ehr { border-top: 3px solid var(--blackberry); }

.vd-doc-body .vd-ug-card-title {
    font-size: 13.5px;
    font-weight: 700;
    color: var(--blackberry);
    margin: 0 0 4px;
}

.vd-doc-body .vd-ug-card--pm .vd-ug-card-title,
.vd-doc-body .vd-ug-card--ehr .vd-ug-card-title { font-size: 15.5px; }

.vd-doc-body .vd-ug-card-note {
    font-size: 11.5px;
    color: #3D3654;
    margin: 0 0 13px;
}

.vd-doc-body .vd-ug-card p { font-size: 12.5px; line-height: 1.6; color: #3D3654; margin: 0; }
.vd-doc-body .vd-ug-card p + p { margin-top: 10px; }

/* Checkmark bullet list inside the product cards. */
.vd-doc-body .vd-ug-check { list-style: none; margin: 0; padding: 0; }

.vd-doc-body .vd-ug-check li {
    position: relative;
    padding-left: 21px;
    margin-bottom: 8px;
    font-size: 12.5px;
    line-height: 1.5;
    color: #3D3654;
}

.vd-doc-body .vd-ug-check li:last-child { margin-bottom: 0; }

.vd-doc-body .vd-ug-check li::before {
    content: "";
    position: absolute;
    left: 2px;
    top: 5px;
    width: 9px;
    height: 5px;
    border-left: 2px solid currentColor;
    border-bottom: 2px solid currentColor;
    transform: rotate(-45deg);
}

.vd-doc-body .vd-ug-card--pm .vd-ug-check li::before { color: var(--plum); }
.vd-doc-body .vd-ug-card--ehr .vd-ug-check li::before { color: var(--blackberry); }

/* Numbered step card (UGStepHead / the onboarding step cards). */
.vd-doc-body .vd-ug-step {
    display: flex;
    gap: 15px;
    align-items: flex-start;
    background: #fff;
    border: 1px solid #ECE9F2;
    border-radius: 12px;
    padding: 18px 20px;
    margin: 0 0 12px;
    box-shadow: 0 1px 2px rgba(46, 33, 85, .05);
}

.vd-doc-body .vd-ug-step-num {
    flex: 0 0 30px;
    width: 30px;
    height: 30px;
    border-radius: 9px;
    background: var(--plum);
    color: #fff;
    display: grid;
    place-items: center;
    font-size: 13px;
    font-weight: 700;
}

.vd-doc-body .vd-ug-step-body { flex: 1 1 auto; min-width: 0; }

.vd-doc-body .vd-ug-step-title {
    font-size: 15px;
    font-weight: 700;
    color: var(--blackberry);
    margin: 0 0 4px;
}

.vd-doc-body .vd-ug-step-body p { font-size: 13px; line-height: 1.65; color: #3D3654; margin: 0 0 10px; }
.vd-doc-body .vd-ug-step-body > *:last-child { margin-bottom: 0; }

/* Sub-steps within a step card. */
.vd-doc-body .vd-ug-substeps { list-style: none; margin: 12px 0 0; padding: 0; counter-reset: ugsub; }

.vd-doc-body .vd-ug-substeps > li {
    position: relative;
    counter-increment: ugsub;
    padding-left: 32px;
    margin-bottom: 10px;
    font-size: 12.5px;
    line-height: 1.6;
    color: #3D3654;
}

.vd-doc-body .vd-ug-substeps > li::before {
    content: counter(ugsub);
    position: absolute;
    left: 0;
    top: 0;
    width: 21px;
    height: 21px;
    border-radius: 99px;
    background: rgba(122, 53, 120, .12);
    color: var(--plum);
    display: grid;
    place-items: center;
    font-size: 11px;
    font-weight: 700;
}

.vd-doc-body .vd-ug-substeps b { color: var(--blackberry); }

/* Plain numbered list used by "Path to production" - one bordered row each. */
.vd-doc-body .vd-ug-rows { list-style: none; margin: 0 0 18px; padding: 0; counter-reset: ugrow; }

.vd-doc-body .vd-ug-rows > li {
    position: relative;
    counter-increment: ugrow;
    background: #fff;
    border: 1px solid #ECE9F2;
    border-radius: 10px;
    padding: 12px 16px 12px 46px;
    margin-bottom: 10px;
    font-size: 13px;
    line-height: 1.6;
    color: #3D3654;
}

.vd-doc-body .vd-ug-rows > li::before {
    content: counter(ugrow);
    position: absolute;
    left: 16px;
    top: 12px;
    width: 20px;
    height: 20px;
    border-radius: 99px;
    background: rgba(122, 53, 120, .12);
    color: var(--plum);
    display: grid;
    place-items: center;
    font-size: 11px;
    font-weight: 700;
}

/* Uppercase mini-heading above a table or grid. */
.vd-doc-body .vd-ug-eyebrow {
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .6px;
    text-transform: uppercase;
    color: #3D3654;
    margin: 22px 0 10px;
}

/* "Setup:" footer inside the connection-type cards. */
.vd-doc-body .vd-ug-setup {
    margin-top: 10px;
    padding-top: 10px;
    border-top: 1px dashed #ECE9F2;
    font-size: 11.5px;
    line-height: 1.55;
}

.vd-doc-body .vd-ug-setup b { color: var(--blackberry); }

/* Endpoint URL chips. */
.vd-doc-body .vd-ug-endpoints { display: flex; flex-direction: column; gap: 7px; }

.vd-doc-body .vd-ug-endpoints code {
    display: block;
    background: #FAF9FD;
    border: 1px solid #F1EEF7;
    color: var(--blackberry);
    border-radius: 7px;
    padding: 7px 10px;
    font-size: 11.5px;
    overflow-wrap: anywhere;
}

/* Code-sample cards with a language badge (UGSampleGrid). */
.vd-doc-body .vd-ug-samples {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
    margin: 0 0 18px;
}

.vd-doc-body .vd-ug-sample {
    display: flex;
    gap: 13px;
    align-items: flex-start;
    background: #fff;
    border: 1px solid #ECE9F2;
    border-radius: 12px;
    padding: 15px 17px;
    text-decoration: none;
    transition: border-color .12s ease;
}

.vd-doc-body .vd-ug-sample:hover { border-color: var(--plum); text-decoration: none; }

.vd-doc-body .vd-ug-lang {
    flex: 0 0 34px;
    width: 34px;
    height: 34px;
    border-radius: 9px;
    display: grid;
    place-items: center;
    font-size: 10px;
    font-weight: 700;
}

.vd-doc-body .vd-ug-lang--cs { background: rgba(98, 130, 193, .12); color: #6282C1; }
.vd-doc-body .vd-ug-lang--java { background: rgba(168, 118, 26, .12); color: #A8761A; }
.vd-doc-body .vd-ug-lang--ruby { background: rgba(230, 89, 76, .12); color: #E6594C; }
.vd-doc-body .vd-ug-lang--py { background: rgba(46, 125, 111, .12); color: #2E7D6F; }
/* Postman collections (moved here from Sandboxes' removed "Tools & downloads"). */
.vd-doc-body .vd-ug-lang--postman { background: rgba(255, 108, 55, .12); color: #E0531F; }

.vd-doc-body .vd-ug-sample-main { flex: 1 1 auto; min-width: 0; }

.vd-doc-body .vd-ug-sample-file {
    font-family: var(--mono, ui-monospace, 'SF Mono', Menlo, monospace);
    font-size: 12px;
    font-weight: 700;
    color: var(--blackberry);
    overflow-wrap: anywhere;
    background: none;
    padding: 0;
}

.vd-doc-body .vd-ug-sample-desc {
    display: block;
    font-size: 12px;
    line-height: 1.55;
    color: #3D3654;
    margin-top: 4px;
}

/* Download call-to-action row (certification package). */
.vd-doc-body .vd-ug-dl {
    display: flex;
    align-items: center;
    gap: 14px;
    background: #fff;
    border: 1px solid rgba(122, 53, 120, .34);
    border-radius: 12px;
    padding: 16px 18px;
    margin: 0 0 18px;
    text-decoration: none;
    box-shadow: 0 1px 2px rgba(46, 33, 85, .06);
}

.vd-doc-body .vd-ug-dl:hover { border-color: var(--plum); text-decoration: none; }
.vd-doc-body .vd-ug-dl-main { flex: 1 1 auto; min-width: 0; }

.vd-doc-body .vd-ug-dl-title {
    display: block;
    font-size: 14px;
    font-weight: 700;
    color: var(--blackberry);
}

.vd-doc-body .vd-ug-dl-sub { display: block; font-size: 12px; color: #3D3654; margin-top: 2px; }

.vd-doc-body .vd-ug-dl-btn {
    flex: 0 0 auto;
    font-size: 12.5px;
    font-weight: 700;
    color: #fff;
    background: var(--plum);
    border-radius: 8px;
    padding: 9px 16px;
}

@media (max-width: 900px) {
    .vd-doc-body .vd-ug-grid2,
    .vd-doc-body .vd-ug-grid3,
    .vd-doc-body .vd-ug-samples { grid-template-columns: 1fr; }
}

/* ---------- Unavailable ---------- */

.vd-doc-warn {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 14px 16px;
    border-radius: 10px;
    font-size: 12.5px;
    line-height: 1.55;
    background: rgba(250, 181, 84, .14);
    border: 1px solid rgba(250, 181, 84, .5);
    color: #7A4E06;
}

.vd-doc-warn svg { width: 15px; height: 15px; flex: 0 0 15px; margin-top: 1px; }

/* ---------- Responsive ---------- */

@media (max-width: 1000px) {
    .vd-doc-main { grid-template-columns: 1fr; gap: 20px; padding: 22px 20px 44px; }
    .vd-doc-side { position: static; flex-direction: row; flex-wrap: wrap; gap: 6px; }
    .vd-doc-side-head { display: none; }
    .vd-doc-side a { border-left: 0; border: 1px solid var(--line); background: #fff; }
    .vd-doc-hero { padding: 24px 20px 22px; }
    .vd-doc-hero h1 { font-size: 25px; }
    .vd-doc-article { padding: 22px 20px 26px; }
}

/* VCO-1308: collapsible list (FHIR Configuration > Bulk data export flow >
   "Resources supported by bulk export") - the comp's FGBulkResources toggle. */
.vd-doc-body .vd-fq-details { background: #fff; border: 1px solid #ECE9F2; border-radius: 12px; margin: 0 0 16px; }
.vd-doc-body .vd-fq-details > summary { cursor: pointer; padding: 12px 16px; font-size: 13.5px; font-weight: 700; color: var(--blackberry, #2E2155); list-style-position: inside; }
.vd-doc-body .vd-fq-details > p { padding: 0 16px 14px; margin: 0; display: flex; flex-wrap: wrap; gap: 6px; }