/*
 * Numbered embed: a small outlined number beside the post that follows you down tall embeds.
 * Sites set their brand on any ancestor, e.g. .entry { --dbx-embed-accent: #bc0018; --dbx-embed-font: Montserrat, sans-serif; }
 */
.dbx-embed--numbered {
    display: flex;
    justify-content: center;
    align-items: flex-start;
    gap: 12px;
}

.dbx-embed__body {
    min-width: 0;
    flex: 0 1 500px;
    display: flow-root; /* keep the rendered tweet's margins inside, so reserved height is predictable */
}

/* Numbered content and images take the full width beside their number. */
.dbx-embed__content {
    min-width: 0;
    flex: 1 1 auto;
}

figure.dbx-image {
    margin: 20px 0; /* top lines up with the number */
}

.dbx-image img {
    display: block;
    max-width: 100%;
    height: auto;
}

.dbx-image figcaption {
    margin-top: 6px;
    font-size: 14px;
    color: #555;
}

/*
 * Hold space for tweets so the page doesn't jump when X's widget loads.
 * The row is the container; the tweet is as wide as the row minus the number, up to 500px.
 * The server gives each measured tweet two lines, height = a + b × width, one for each of X's
 * layouts (it switches at 360px wide). +40px is the 20px top and bottom tweet margins set below.
 * Tested on 13 real tweets at 18 widths: holds 97% of the height (average jump 15px instead of
 * 517px); 95% of gaps are ≤5px. Boris article, first screen: CLS 0.434 → 0.03 on a 375px phone,
 * 0.189 → 0.005 on desktop.
 */
.dbx-embed {
    container-type: inline-size;
    --dbx-off: 0px;
}

.dbx-embed--numbered {
    --dbx-off: 44px; /* number + gap */
}

.dbx-embed__body--x {
    --dbx-w: min(500px, 100cqw - var(--dbx-off));
    /* At 500px the measurement is exact; narrower, hold back up to 16px so a guess rarely leaves a gap. */
    --dbx-safety: min(16px, 500px - var(--dbx-w));
    /* Unmeasured tweets fall back to 200px: every tweet is at least that tall. */
    min-height: calc(var(--dbx-a1, 176px) + var(--dbx-b1, 0) * var(--dbx-w) + 40px - var(--dbx-safety));
}

@container (width < 360px) {
    .dbx-embed:not(.dbx-embed--numbered) .dbx-embed__body--x {
        min-height: calc(var(--dbx-a0, 176px) + var(--dbx-b0, 0) * var(--dbx-w) + 40px - var(--dbx-safety));
    }
}

@container (width < 396px) {
    .dbx-embed--numbered .dbx-embed__body--x {
        min-height: calc(var(--dbx-a0, 176px) + var(--dbx-b0, 0) * var(--dbx-w) + 40px - var(--dbx-safety));
    }
}

/* The height maths above counts on these margins, whatever the theme does. */
.dbx-embed__body--x .twitter-tweet.twitter-tweet-rendered {
    margin: 20px auto !important;
}

/* Themes often fix the pre-render blockquote at 500px, which overflows beside the number on phones. */
.dbx-embed blockquote.twitter-tweet {
    width: auto;
    max-width: 100%;
    box-sizing: border-box;
}

.dbx-embed.dbx-embed--numbered > p.dbx-embed__number {
    position: sticky;
    top: 16px;
    flex: none;
    box-sizing: border-box;
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 32px;
    height: 32px;
    margin: 20px 0 0; /* lines up with the 20px margin on rendered tweets */
    padding: 0 6px;
    border: 2px solid var(--dbx-embed-accent, currentColor);
    border-radius: 16px;
    color: var(--dbx-embed-number-color, inherit);
    font: 600 15px/1 var(--dbx-embed-font, inherit);
}

.dbx-embed__number strong {
    font-weight: inherit;
}

/* Still read out by screen readers, so the number is announced as "1." */
.dbx-embed__dot {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
}

@media (max-width: 480px) {
    .dbx-embed--numbered {
        gap: 8px;
        --dbx-off: 36px;
    }

    .dbx-embed.dbx-embed--numbered > p.dbx-embed__number {
        min-width: 28px;
        height: 28px;
        padding: 0 5px;
        border-radius: 14px;
        font-size: 13px;
    }
}