/* Numbered embed: a small outlined number beside the post that follows you down tall embeds. */
.poke-embed--numbered {
    display: flex;
    justify-content: center;
    align-items: flex-start;
    gap: 12px;
}

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

/*
 * 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 theme's 20px top and bottom tweet margins.
 * 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.
 */
.poke-embed {
    container-type: inline-size;
    --poke-off: 0px;
}

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

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

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

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

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

.postframe .entry .poke-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 theme's 20px margin on rendered tweets */
    padding: 0 6px;
    border: 2px solid #bc0018;
    border-radius: 16px;
    color: #1a1e22;
    font: 600 15px/1 Montserrat, sans-serif;
}

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

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

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

    .postframe .entry .poke-embed__number {
        min-width: 28px;
        height: 28px;
        padding: 0 5px;
        border-radius: 14px;
        font-size: 13px;
    }
}