/* WinkPG Developer Portal - docs site theme.
 *
 * Ported from the dx.winkpg.com design direction: a Stripe-shaped documentation shell with a thin
 * header, a persistent left sidebar, a measured content column, and a next-steps footer closing
 * every page.
 *
 * Brand colours are NOT declared here. They arrive as --dxp-brand-* custom properties from
 * /css/brand-tokens.css, which the host renders per instance. This file consumes them and supplies
 * a fallback in every var() so a missing token file degrades to the platform palette rather than to
 * unstyled text. Everything else is expressed against the neutral ramp below, which is what makes
 * an instance's rebrand a three-value change.
 *
 * Both colour schemes are first-class. The portal has no theme toggle: it follows the reader's
 * system preference, which is the right default for a site nobody signs in to.
 */

/* ── Tokens ──────────────────────────────────────────────────────────── */

:root {
    color-scheme: light dark;

    --dxp-bg: #ffffff;
    --dxp-bg-subtle: #f6f7f9;
    --dxp-bg-raised: #ffffff;
    --dxp-bg-code: #16181d;

    --dxp-fg: #16181d;
    --dxp-fg-muted: #5a6072;
    --dxp-fg-faint: #868da0;
    --dxp-fg-code: #e8eaf0;

    --dxp-border: #e3e6ec;
    --dxp-border-strong: #ccd1db;

    --dxp-accent: var(--dxp-brand-primary, #5762A3);
    --dxp-accent-contrast: #ffffff;
    --dxp-accent-subtle: color-mix(in srgb, var(--dxp-accent) 10%, transparent);
    --dxp-highlight: var(--dxp-brand-secondary, #DA0A4F);

    --dxp-method-get: #1a7f5a;
    --dxp-method-post: #2b5fd9;
    --dxp-method-put: #9a6400;
    --dxp-method-patch: #7a4bbd;
    --dxp-method-delete: #c0322b;

    --dxp-radius: 10px;
    --dxp-radius-sm: 6px;
    --dxp-sidebar-width: 17rem;
    --dxp-content-width: 52rem;
    --dxp-header-height: 3.75rem;

    --dxp-font: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", sans-serif;
    --dxp-font-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
}

@media (prefers-color-scheme: dark) {
    :root {
        --dxp-bg: #101216;
        --dxp-bg-subtle: #171a20;
        --dxp-bg-raised: #171a20;
        --dxp-bg-code: #0b0d11;

        --dxp-fg: #e8eaf0;
        --dxp-fg-muted: #9aa1b4;
        --dxp-fg-faint: #737b8f;

        --dxp-border: #262a33;
        --dxp-border-strong: #363c48;

        --dxp-accent-subtle: color-mix(in srgb, var(--dxp-accent) 22%, transparent);

        --dxp-method-get: #48c79a;
        --dxp-method-post: #6f9cff;
        --dxp-method-put: #d8a33a;
        --dxp-method-patch: #b190ea;
        --dxp-method-delete: #ef7a72;
    }
}

/* ── Visibility ──────────────────────────────────────────────────────── */

/* The docs pages keep both branches of a two-state region mounted and hide one, per the platform's
 * DOM-stability rule. They toggle THIS CLASS rather than an inline style="display:none": the host
 * enforces style-src 'self' with no 'unsafe-inline', and style-src covers inline style attributes as
 * well as <style> blocks (style-src-attr falls back to it), so an inline toggle is dropped by the
 * browser and every element meant to be hidden renders visible. Nothing server-side notices, and
 * bUnit reads the rendered attribute rather than the computed style.
 *
 * !important so a hidden element stays hidden regardless of what a display utility on the same
 * element would otherwise set.
 */
.dxp-hidden {
    display: none !important;
}

/* ── Base ────────────────────────────────────────────────────────────── */

*,
*::before,
*::after {
    box-sizing: border-box;
}

body {
    margin: 0;
    background: var(--dxp-bg);
    color: var(--dxp-fg);
    font-family: var(--dxp-font);
    font-size: 16px;
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
}

a {
    color: var(--dxp-accent);
    text-decoration: none;
}

a:hover {
    text-decoration: underline;
}

a:focus-visible,
button:focus-visible,
input:focus-visible {
    outline: 2px solid var(--dxp-accent);
    outline-offset: 2px;
    border-radius: var(--dxp-radius-sm);
}

code {
    font-family: var(--dxp-font-mono);
    font-size: 0.875em;
}

h1, h2, h3 {
    line-height: 1.25;
    margin: 0;
    font-weight: 650;
    letter-spacing: -0.01em;
}

/* ── Shell ───────────────────────────────────────────────────────────── */

.dxp-shell {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}

.dxp-body {
    display: flex;
    align-items: flex-start;
    flex: 1 1 auto;
    width: 100%;
    max-width: 90rem;
    margin: 0 auto;
    padding: 0 1.5rem;
    gap: 2.5rem;
}

.dxp-main {
    flex: 1 1 auto;
    min-width: 0;
    max-width: var(--dxp-content-width);
    padding: 2.5rem 0 4rem;
}

/* ── Header ──────────────────────────────────────────────────────────── */

.dxp-header {
    position: sticky;
    top: 0;
    z-index: 10;
    background: color-mix(in srgb, var(--dxp-bg) 92%, transparent);
    backdrop-filter: saturate(180%) blur(8px);
    border-bottom: 1px solid var(--dxp-border);
}

.dxp-header__inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1.5rem;
    height: var(--dxp-header-height);
    max-width: 90rem;
    margin: 0 auto;
    padding: 0 1.5rem;
}

.dxp-header__brand {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    color: var(--dxp-fg);
    font-weight: 650;
    font-size: 1.05rem;
}

.dxp-header__brand:hover {
    text-decoration: none;
}

.dxp-header__logo {
    height: 1.5rem;
    width: auto;
}

.dxp-header__suffix {
    color: var(--dxp-fg-faint);
    font-weight: 500;
}

.dxp-header__nav {
    display: flex;
    align-items: center;
    gap: 1.25rem;
    flex-wrap: wrap;
}

.dxp-header__link {
    color: var(--dxp-fg-muted);
    font-size: 0.9375rem;
    font-weight: 500;
}

.dxp-header__link:hover {
    color: var(--dxp-fg);
    text-decoration: none;
}

.dxp-header__link--cta {
    padding: 0.375rem 0.875rem;
    border-radius: 999px;
    background: var(--dxp-accent);
    color: var(--dxp-accent-contrast);
}

.dxp-header__link--cta:hover {
    color: var(--dxp-accent-contrast);
    filter: brightness(1.08);
}

/* ── Sidebar ─────────────────────────────────────────────────────────── */

.dxp-sidebar {
    position: sticky;
    top: var(--dxp-header-height);
    flex: 0 0 var(--dxp-sidebar-width);
    width: var(--dxp-sidebar-width);
    max-height: calc(100vh - var(--dxp-header-height));
    overflow-y: auto;
    padding: 2rem 0 3rem;
}

.dxp-sidebar__section + .dxp-sidebar__section {
    margin-top: 1.75rem;
}

.dxp-sidebar__heading {
    font-size: 0.75rem;
    font-weight: 650;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--dxp-fg-faint);
    margin: 0 0 0.5rem;
}

.dxp-sidebar__list {
    list-style: none;
    margin: 0;
    padding: 0;
}

.dxp-sidebar__link {
    display: flex;
    align-items: baseline;
    gap: 0.5rem;
    padding: 0.3125rem 0.625rem;
    margin-left: -0.625rem;
    border-radius: var(--dxp-radius-sm);
    color: var(--dxp-fg-muted);
    font-size: 0.9rem;
    line-height: 1.4;
}

.dxp-sidebar__link:hover {
    background: var(--dxp-bg-subtle);
    color: var(--dxp-fg);
    text-decoration: none;
}

.dxp-sidebar__link--current {
    background: var(--dxp-accent-subtle);
    color: var(--dxp-accent);
    font-weight: 600;
}

.dxp-sidebar__method {
    flex: 0 0 auto;
    font-family: var(--dxp-font-mono);
    font-size: 0.625rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    color: var(--dxp-fg-faint);
}

.dxp-sidebar__label {
    min-width: 0;
    overflow-wrap: anywhere;
}

/* ── Search stub ─────────────────────────────────────────────────────── */

.dxp-search {
    position: relative;
    display: flex;
    align-items: center;
    margin-bottom: 1.5rem;
}

.dxp-search__icon {
    position: absolute;
    left: 0.625rem;
    font-size: 0.8rem;
    opacity: 0.55;
    pointer-events: none;
}

.dxp-search__input {
    width: 100%;
    padding: 0.4375rem 0.625rem 0.4375rem 2rem;
    border: 1px solid var(--dxp-border);
    border-radius: var(--dxp-radius-sm);
    background: var(--dxp-bg-subtle);
    color: var(--dxp-fg-muted);
    font: inherit;
    font-size: 0.875rem;
}

.dxp-search__input:disabled {
    cursor: not-allowed;
    opacity: 0.75;
}

/* ── Hero and sections ───────────────────────────────────────────────── */

.dxp-hero {
    padding-bottom: 2.5rem;
    border-bottom: 1px solid var(--dxp-border);
}

.dxp-hero__title {
    font-size: clamp(1.875rem, 1.4rem + 1.8vw, 2.75rem);
    margin-bottom: 0.75rem;
}

.dxp-hero__lead {
    margin: 0 0 1.5rem;
    font-size: 1.0625rem;
    color: var(--dxp-fg-muted);
    max-width: 42rem;
}

.dxp-hero__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
}

.dxp-hero__meta {
    margin: 1.25rem 0 0;
    font-size: 0.875rem;
    color: var(--dxp-fg-faint);
}

.dxp-section {
    padding-top: 2.5rem;
}

.dxp-section__title {
    font-size: 1.25rem;
    margin-bottom: 0.5rem;
}

.dxp-section__lead {
    margin: 0 0 1.25rem;
    color: var(--dxp-fg-muted);
}

.dxp-article__header {
    padding-bottom: 1.5rem;
    border-bottom: 1px solid var(--dxp-border);
}

.dxp-article__header h1 {
    font-size: clamp(1.625rem, 1.3rem + 1.2vw, 2.125rem);
    margin-bottom: 0.75rem;
}

.dxp-article__lead {
    margin: 1rem 0 0;
    color: var(--dxp-fg-muted);
}

.dxp-article__meta {
    margin: 0.75rem 0 0;
    font-size: 0.875rem;
    color: var(--dxp-fg-faint);
}

.dxp-breadcrumb {
    display: flex;
    gap: 0.5rem;
    margin: 0 0 0.75rem;
    font-size: 0.8125rem;
    color: var(--dxp-fg-faint);
}

.dxp-breadcrumb__separator {
    color: var(--dxp-border-strong);
}

.dxp-muted {
    color: var(--dxp-fg-muted);
}

/* ── Buttons ─────────────────────────────────────────────────────────── */

.dxp-button {
    display: inline-flex;
    align-items: center;
    padding: 0.5625rem 1.125rem;
    border-radius: var(--dxp-radius-sm);
    font-size: 0.9375rem;
    font-weight: 600;
    border: 1px solid transparent;
}

.dxp-button:hover {
    text-decoration: none;
}

.dxp-button--primary {
    background: var(--dxp-accent);
    color: var(--dxp-accent-contrast);
}

.dxp-button--primary:hover {
    color: var(--dxp-accent-contrast);
    filter: brightness(1.08);
}

.dxp-button--ghost {
    border-color: var(--dxp-border-strong);
    color: var(--dxp-fg);
}

.dxp-button--ghost:hover {
    background: var(--dxp-bg-subtle);
}

/* ── Resource cards ──────────────────────────────────────────────────── */

.dxp-cards {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(13rem, 1fr));
    gap: 0.875rem;
}

.dxp-card {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    height: 100%;
    padding: 1rem 1.125rem;
    border: 1px solid var(--dxp-border);
    border-radius: var(--dxp-radius);
    background: var(--dxp-bg-raised);
    color: var(--dxp-fg);
}

.dxp-card:hover {
    border-color: var(--dxp-accent);
    text-decoration: none;
}

.dxp-card__title {
    font-weight: 600;
}

.dxp-card__meta {
    font-size: 0.8125rem;
    color: var(--dxp-fg-faint);
}

/* Guide cards carry a full sentence rather than an endpoint count, so they need a wider track. The
 * modifier sits on the grid rather than on the card because the track size is what has to change:
 * a wider card inside a 13rem track would simply overflow it. */
.dxp-cards--wide {
    grid-template-columns: repeat(auto-fill, minmax(19rem, 1fr));
}

/* ── Operation lists ─────────────────────────────────────────────────── */

.dxp-tag {
    padding-top: 2.5rem;
    scroll-margin-top: calc(var(--dxp-header-height) + 1rem);
}

.dxp-tag__title {
    font-size: 1.25rem;
    margin-bottom: 0.75rem;
}

.dxp-operations {
    list-style: none;
    margin: 0;
    padding: 0;
    border: 1px solid var(--dxp-border);
    border-radius: var(--dxp-radius);
    overflow: hidden;
}

.dxp-operations__item + .dxp-operations__item {
    border-top: 1px solid var(--dxp-border);
}

.dxp-operation {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    padding: 0.875rem 1.125rem;
    color: var(--dxp-fg);
}

.dxp-operation:hover {
    background: var(--dxp-bg-subtle);
    text-decoration: none;
}

.dxp-operation__line {
    display: flex;
    align-items: center;
    gap: 0.625rem;
    flex-wrap: wrap;
}

.dxp-operation__path {
    font-family: var(--dxp-font-mono);
    font-size: 0.8125rem;
    overflow-wrap: anywhere;
}

.dxp-operation__summary {
    font-size: 0.9375rem;
}

.dxp-operation__requirement {
    font-size: 0.8125rem;
    color: var(--dxp-fg-faint);
}

.dxp-endpoint {
    display: flex;
    align-items: center;
    gap: 0.625rem;
    flex-wrap: wrap;
    margin: 0;
    padding: 0.75rem 1rem;
    border: 1px solid var(--dxp-border);
    border-radius: var(--dxp-radius-sm);
    background: var(--dxp-bg-subtle);
}

.dxp-endpoint__path {
    font-family: var(--dxp-font-mono);
    overflow-wrap: anywhere;
}

.dxp-requirement {
    margin: 0.75rem 0 0;
    font-size: 0.875rem;
    color: var(--dxp-fg-muted);
}

/* ── Method and status badges ────────────────────────────────────────── */

.dxp-method {
    display: inline-block;
    min-width: 3.5rem;
    padding: 0.125rem 0.4375rem;
    border-radius: 4px;
    background: var(--dxp-bg-subtle);
    border: 1px solid var(--dxp-border-strong);
    color: var(--dxp-fg-muted);
    font-family: var(--dxp-font-mono);
    font-size: 0.6875rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-align: center;
}

.dxp-method--get { color: var(--dxp-method-get); border-color: currentColor; }
.dxp-method--post { color: var(--dxp-method-post); border-color: currentColor; }
.dxp-method--put { color: var(--dxp-method-put); border-color: currentColor; }
.dxp-method--patch { color: var(--dxp-method-patch); border-color: currentColor; }
.dxp-method--delete { color: var(--dxp-method-delete); border-color: currentColor; }

.dxp-status {
    display: inline-block;
    padding: 0.0625rem 0.4375rem;
    border-radius: 4px;
    border: 1px solid currentColor;
    font-family: var(--dxp-font-mono);
    font-size: 0.75rem;
    font-weight: 700;
}

.dxp-status--2xx { color: var(--dxp-method-get); }
.dxp-status--3xx { color: var(--dxp-method-put); }
.dxp-status--4xx { color: var(--dxp-method-put); }
.dxp-status--5xx { color: var(--dxp-method-delete); }
.dxp-status--other { color: var(--dxp-fg-muted); }

/* ── Chips ───────────────────────────────────────────────────────────── */

.dxp-chips {
    display: inline-flex;
    flex-wrap: wrap;
    gap: 0.25rem;
}

.dxp-chip {
    display: inline-block;
    padding: 0.0625rem 0.4375rem;
    border-radius: 999px;
    background: var(--dxp-bg-subtle);
    border: 1px solid var(--dxp-border);
    color: var(--dxp-fg-faint);
    font-size: 0.6875rem;
    white-space: nowrap;
}

.dxp-chip--required {
    color: var(--dxp-highlight);
    border-color: currentColor;
}

/* A settled payload contract, and an event type registered but not yet publishing. Both read as
 * status rather than as decoration, so each takes a colour of its own rather than sharing the
 * neutral chip: the difference between "you can build against this" and "this will not fire yet" is
 * the single most consequential thing on the event reference. */
.dxp-chip--documented {
    color: var(--dxp-method-get);
    border-color: currentColor;
}

.dxp-chip--pending {
    color: var(--dxp-method-put);
    border-color: currentColor;
}

.dxp-chip--deprecated {
    color: var(--dxp-method-put);
    border-color: currentColor;
}

.dxp-chip--approved {
    color: var(--dxp-method-get);
    border-color: currentColor;
}

.dxp-chip--partial {
    color: var(--dxp-method-put);
    border-color: currentColor;
}

.dxp-chip--refused {
    color: var(--dxp-method-delete);
    border-color: currentColor;
}

/* ── Reference tables ────────────────────────────────────────────────────
 *
 * The scroll container is a separate element rather than `display: block` on
 * the table itself (which is what .dxp-fields does). A table forced to block
 * loses its row/column semantics for assistive technology, and the testing
 * page's tables are wide enough to need real header association. Keeping the
 * table a table and scrolling the wrapper preserves both.
 */

.dxp-table-scroll {
    overflow-x: auto;
    margin: 0.75rem 0 0;
}

.dxp-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.9rem;
}

.dxp-table th,
.dxp-table td {
    padding: 0.4375rem 0.75rem 0.4375rem 0;
    text-align: left;
    vertical-align: top;
    border-bottom: 1px solid var(--dxp-border);
}

.dxp-table thead th {
    color: var(--dxp-fg-faint);
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.02em;
    text-transform: uppercase;
    white-space: nowrap;
    border-bottom-color: var(--dxp-border-strong);
}

.dxp-table tbody th {
    font-weight: 600;
    white-space: nowrap;
}

.dxp-table code {
    white-space: nowrap;
}

.dxp-table__note {
    display: block;
    margin-top: 0.25rem;
    color: var(--dxp-fg-muted);
    font-size: 0.8125rem;
}

.dxp-chip--vendored {
    color: var(--dxp-fg-muted);
}

/* ── Error reference ─────────────────────────────────────────────────── */

/* A worked response body. Scrolls inside itself rather than widening the page: several of the
   example bodies are wider than a phone. */
.dxp-code {
    margin: 0.75rem 0 0;
    padding: 0.875rem 1rem;
    border: 1px solid var(--dxp-border);
    border-radius: var(--dxp-radius-sm);
    background: var(--dxp-bg-subtle);
    font-family: var(--dxp-font-mono);
    font-size: 0.8125rem;
    line-height: 1.5;
    overflow-x: auto;
}

.dxp-code code {
    background: none;
    border: 0;
    padding: 0;
    font-size: inherit;
    white-space: pre;
}

/* Module jump list above the code tables. Wraps rather than scrolling, because the number of
   modules is a property of the instance and can be large. */
.dxp-jump {
    display: flex;
    flex-wrap: wrap;
    gap: 0.375rem;
    margin: 1rem 0 0;
}

.dxp-jump__link {
    padding: 0.1875rem 0.5625rem;
    border: 1px solid var(--dxp-border);
    border-radius: 999px;
    background: var(--dxp-bg-subtle);
    color: var(--dxp-fg-muted);
    font-size: 0.75rem;
    white-space: nowrap;
}

.dxp-jump__link:hover {
    border-color: var(--dxp-accent);
    color: var(--dxp-accent);
    text-decoration: none;
}

/* ── Field tables ────────────────────────────────────────────────────── */

.dxp-fields {
    width: 100%;
    border-collapse: collapse;
    margin: 0.75rem 0 0;
    font-size: 0.9rem;
    display: block;
    overflow-x: auto;
}

.dxp-fields th,
.dxp-fields td {
    text-align: left;
    vertical-align: top;
    padding: 0.5rem 0.75rem 0.5rem 0;
    border-bottom: 1px solid var(--dxp-border);
}

.dxp-fields th {
    font-size: 0.75rem;
    font-weight: 650;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: var(--dxp-fg-faint);
}

.dxp-fields__name {
    white-space: nowrap;
}

.dxp-fields__type {
    font-family: var(--dxp-font-mono);
    font-size: 0.8125rem;
    color: var(--dxp-fg-muted);
}

.dxp-fields__description {
    color: var(--dxp-fg-muted);
}

.dxp-response + .dxp-response {
    margin-top: 1.75rem;
}

.dxp-response__title {
    display: flex;
    align-items: center;
    gap: 0.625rem;
    font-size: 1rem;
    font-weight: 600;
}

.dxp-plain-list {
    margin: 0.75rem 0 0;
    padding-left: 1.125rem;
    color: var(--dxp-fg-muted);
}

/* ── Notices ─────────────────────────────────────────────────────────── */

.dxp-notice {
    margin-top: 2rem;
    padding: 1.25rem 1.375rem;
    border: 1px solid var(--dxp-border-strong);
    border-left: 3px solid var(--dxp-highlight);
    border-radius: var(--dxp-radius);
    background: var(--dxp-bg-subtle);
}

.dxp-notice__title {
    font-size: 1.0625rem;
    margin-bottom: 0.5rem;
}

.dxp-notice p {
    margin: 0.5rem 0 0;
    color: var(--dxp-fg-muted);
}

/* "That guide is part of the product documentation" is information, not a fault: the address was
 * right and the guide exists, it just lives in the application. The neutral accent says so, where
 * the default highlight would read as an error. */
.dxp-notice--not-published {
    border-left-color: var(--dxp-accent);
}

/* The one page every refused sign-in lands on. It says the same thing whatever the reason, so it
 * gets the neutral accent rather than the fault highlight: for the caller this is a statement about
 * their access, not a report that something broke. */
.dxp-notice--denied {
    border-left-color: var(--dxp-accent);
}

/* ── Authenticated portal ────────────────────────────────────────────── */

/* The portal shell has no sidebar, so its content column centres in the body instead of sitting
 * beside one. */
.dxp-main--portal {
    margin: 0 auto;
}

/* Facts about the current session: a two-column list of term and value. Grid rather than float,
 * so a long value wraps under its own column instead of under the term. */
.dxp-facts {
    display: grid;
    grid-template-columns: minmax(8rem, max-content) 1fr;
    gap: 0.5rem 1.5rem;
    margin: 1.25rem 0 0;
}

.dxp-facts__term {
    color: var(--dxp-fg-muted);
    font-weight: 600;
}

.dxp-facts__value {
    margin: 0;
    font-family: var(--dxp-font-mono);
    word-break: break-word;
}

@media (max-width: 40rem) {
    .dxp-facts {
        grid-template-columns: 1fr;
        gap: 0.125rem;
    }

    .dxp-facts__value {
        margin-bottom: 0.75rem;
    }
}

/* ── Guide prose ─────────────────────────────────────────────────────── */

/* Rendered guide markdown. Everything under here is authored content, so the selectors are element
 * selectors scoped to the wrapper rather than classes: the renderer emits plain HTML and no class
 * ever reaches it.
 *
 * Headings carry an explicit size ramp with real steps and asymmetric spacing (the gap above a
 * heading exceeds the gap below it, so it binds to the copy it introduces rather than floating
 * between two blocks). The in-app guide surface learned this the hard way: leaving the levels on
 * the framework default put h2 and h3 within about ten percent of each other, and on a long guide a
 * subsection became indistinguishable from the section containing it. */
.dxp-guide {
    margin-top: 2rem;
}

.dxp-guide > :first-child {
    margin-top: 0;
}

.dxp-guide h2,
.dxp-guide h3,
.dxp-guide h4 {
    line-height: 1.25;
    font-weight: 650;
    letter-spacing: -0.01em;
}

.dxp-guide h2 {
    font-size: 1.5rem;
    margin: 3rem 0 0.875rem;
    padding-top: 1.75rem;
    border-top: 1px solid var(--dxp-border);
}

.dxp-guide h3 {
    font-size: 1.1875rem;
    margin: 2.25rem 0 0.625rem;
}

.dxp-guide h4 {
    font-size: 1rem;
    margin: 1.75rem 0 0.5rem;
    color: var(--dxp-fg-muted);
}

.dxp-guide p {
    margin: 0 0 1rem;
}

.dxp-guide ul,
.dxp-guide ol {
    margin: 0 0 1rem;
    padding-left: 1.375rem;
}

.dxp-guide li + li {
    margin-top: 0.375rem;
}

.dxp-guide blockquote {
    margin: 0 0 1rem;
    padding: 0.75rem 1.125rem;
    border-left: 3px solid var(--dxp-accent);
    border-radius: 0 var(--dxp-radius-sm) var(--dxp-radius-sm) 0;
    background: var(--dxp-bg-subtle);
    color: var(--dxp-fg-muted);
}

.dxp-guide blockquote > :last-child {
    margin-bottom: 0;
}

.dxp-guide code {
    padding: 0.0625rem 0.3125rem;
    border-radius: var(--dxp-radius-sm);
    background: var(--dxp-bg-subtle);
    border: 1px solid var(--dxp-border);
}

/* A code block scrolls inside its own box. The page body must never scroll horizontally, and a
 * request payload is exactly the kind of content that would otherwise force it to. */
.dxp-guide pre {
    margin: 0 0 1.25rem;
    padding: 1rem 1.125rem;
    border-radius: var(--dxp-radius);
    background: var(--dxp-bg-code);
    color: var(--dxp-fg-code);
    overflow-x: auto;
}

.dxp-guide pre code {
    padding: 0;
    border: 0;
    background: none;
    color: inherit;
    font-size: 0.8125rem;
    line-height: 1.6;
}

/* Same reasoning as the code block: a wide comparison table scrolls in its own box. */
.dxp-guide table {
    display: block;
    width: 100%;
    margin: 0 0 1.25rem;
    border-collapse: collapse;
    overflow-x: auto;
    font-size: 0.9rem;
}

.dxp-guide th,
.dxp-guide td {
    text-align: left;
    vertical-align: top;
    padding: 0.5rem 0.75rem 0.5rem 0;
    border-bottom: 1px solid var(--dxp-border);
}

.dxp-guide th {
    font-size: 0.75rem;
    font-weight: 650;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: var(--dxp-fg-faint);
}

.dxp-guide hr {
    margin: 2.5rem 0;
    border: 0;
    border-top: 1px solid var(--dxp-border);
}

.dxp-guide img {
    max-width: 100%;
    height: auto;
}

/* ── Next steps ──────────────────────────────────────────────────────── */

.dxp-next-steps {
    margin-top: 3.5rem;
    padding-top: 2rem;
    border-top: 1px solid var(--dxp-border);
}

.dxp-next-steps__title {
    font-size: 1.125rem;
    margin-bottom: 1rem;
}

.dxp-next-steps__grid {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
    gap: 0.875rem;
}

.dxp-next-steps__card {
    display: flex;
    flex-direction: column;
    gap: 0.3125rem;
    height: 100%;
    padding: 1rem 1.125rem;
    border: 1px solid var(--dxp-border);
    border-radius: var(--dxp-radius);
    background: var(--dxp-bg-raised);
    color: var(--dxp-fg);
}

.dxp-next-steps__card:hover {
    border-color: var(--dxp-accent);
    text-decoration: none;
}

.dxp-next-steps__card-title {
    font-weight: 600;
    color: var(--dxp-accent);
}

.dxp-next-steps__card-text {
    font-size: 0.875rem;
    color: var(--dxp-fg-muted);
}

.dxp-next-steps__card-external {
    font-size: 0.75rem;
    color: var(--dxp-fg-faint);
}

/* ── Footer ──────────────────────────────────────────────────────────── */

.dxp-footer {
    border-top: 1px solid var(--dxp-border);
    background: var(--dxp-bg-subtle);
}

.dxp-footer__inner {
    display: flex;
    flex-wrap: wrap;
    gap: 2.5rem;
    max-width: 90rem;
    margin: 0 auto;
    padding: 2.5rem 1.5rem;
}

.dxp-footer__brand {
    flex: 1 1 18rem;
    min-width: 0;
}

.dxp-footer__wordmark {
    font-weight: 650;
}

.dxp-footer__tagline {
    margin: 0.375rem 0 0;
    font-size: 0.875rem;
    color: var(--dxp-fg-muted);
    max-width: 26rem;
}

.dxp-footer__links {
    flex: 0 0 auto;
}

.dxp-footer__heading {
    font-size: 0.75rem;
    font-weight: 650;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--dxp-fg-faint);
    margin: 0 0 0.5rem;
}

.dxp-footer__list {
    list-style: none;
    margin: 0;
    padding: 0;
    font-size: 0.9rem;
}

.dxp-footer__list li + li {
    margin-top: 0.25rem;
}

/* ── Not found (host-level fallback) ─────────────────────────────────── */

.developer-portal-landing {
    max-width: 44rem;
    margin: 0 auto;
    padding: 4rem 1.5rem;
}

.developer-portal-landing h1 {
    font-size: 2rem;
    margin: 0 0 0.75rem;
}

.developer-portal-landing p {
    margin: 0;
    color: var(--dxp-fg-muted);
}

/* ── Code blocks ─────────────────────────────────────────────────────── */

/* Rendered verbatim, never highlighted: highlighting here would need either a script (script-src is
 * closed and there is no interactive render mode to hydrate one) or a server-side tokenizer, and
 * neither earns its keep against a JSON payload and one C# file. */
.dxp-code {
    margin: 1rem 0 0;
}

.dxp-code__caption {
    margin-bottom: 0.375rem;
    font-size: 0.6875rem;
    font-weight: 650;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: var(--dxp-fg-faint);
}

.dxp-code__body {
    margin: 0;
    padding: 1rem 1.125rem;
    border-radius: var(--dxp-radius);
    background: var(--dxp-bg-code);
    color: var(--dxp-fg-code);
    font-family: var(--dxp-font-mono);
    font-size: 0.8125rem;
    line-height: 1.55;
    /* The block scrolls on its own so a long line never widens the page. */
    overflow-x: auto;
    tab-size: 4;
}

.dxp-code__body code {
    font-size: inherit;
}

/* ── Webhook event reference ─────────────────────────────────────────── */

.dxp-event {
    padding: 1.5rem 0;
    border-top: 1px solid var(--dxp-border);
    scroll-margin-top: calc(var(--dxp-header-height) + 1rem);
}

.dxp-event__title {
    font-size: 1rem;
    font-family: var(--dxp-font-mono);
}

.dxp-event__chips {
    display: flex;
    flex-wrap: wrap;
    gap: 0.375rem;
    margin: 0.5rem 0 0;
}

.dxp-event__name {
    margin: 0.625rem 0 0;
    font-weight: 600;
}

.dxp-event__description {
    margin: 0.25rem 0 0;
    color: var(--dxp-fg-muted);
}

/* ── Narrow viewports ────────────────────────────────────────────────── */

@media (max-width: 60rem) {
    .dxp-body {
        flex-direction: column;
        gap: 0;
    }

    .dxp-sidebar {
        position: static;
        flex-basis: auto;
        width: 100%;
        max-height: none;
        padding: 1.5rem 0 0;
        border-bottom: 1px solid var(--dxp-border);
    }

    .dxp-main {
        max-width: none;
        padding-top: 1.75rem;
    }
}