/*--------------------------------------------------------------
# Reading Progress Bar
--------------------------------------------------------------*/
.bpmb-reading-progress-container {
    /* Highlights derived from the accent, so a red or green brand never gets a foreign blue bar. */
    --bpmb-progress-glow: #4a8fe8;
    --bpmb-progress-glow: color-mix(in srgb, var(--bpmb-primary, #2563eb) 70%, #fff);
    --bpmb-progress-done-glow: #34ce57;
    --bpmb-progress-done-glow: color-mix(in srgb, var(--bpmb-success, #16a34a) 70%, #fff);
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 4px;
    background: var(--bpmb-progress-track);
    z-index: 9999;
    opacity: 0;
    transition: opacity 0.3s ease;
}

.bpmb-reading-progress-container.is-visible {
    opacity: 1;
}

.bpmb-reading-progress-bar {
    height: 100%;
    width: 0;
    background: linear-gradient(90deg, var(--bpmb-primary, #2563eb) 0%, var(--bpmb-progress-glow) 50%, var(--bpmb-primary, #2563eb) 100%);
    background-size: 200% 100%;
    border-radius: 0 2px 2px 0;
    transition: width 0.1s ease-out;
    position: relative;
}

/* Shimmer effect */
.bpmb-reading-progress-bar::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(90deg,
            transparent 0%,
            rgba(255, 255, 255, 0.4) 50%,
            transparent 100%);
    animation: bpmb-shimmer 2s infinite;
}

@keyframes bpmb-shimmer {
    0% {
        transform: translateX(-100%);
    }

    100% {
        transform: translateX(100%);
    }
}

/* Pulse glow when reading */
.bpmb-reading-progress-bar::before {
    content: '';
    position: absolute;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 8px;
    height: 8px;
    background: var(--bpmb-progress-glow);
    border-radius: 50%;
    opacity: 0;
    box-shadow: 0 0 8px var(--bpmb-progress-glow);
    transition: opacity 0.3s ease;
}

.bpmb-reading-progress-container.is-reading .bpmb-reading-progress-bar::before {
    opacity: 1;
    animation: bpmb-pulse 1.5s ease-in-out infinite;
}

@keyframes bpmb-pulse {

    0%,
    100% {
        transform: translateY(-50%) scale(1);
        box-shadow: 0 0 8px var(--bpmb-progress-glow);
    }

    50% {
        transform: translateY(-50%) scale(1.3);
        box-shadow: 0 0 16px var(--bpmb-progress-glow);
    }
}

/* Complete state */
.bpmb-reading-progress-container.is-complete .bpmb-reading-progress-bar {
    background: linear-gradient(90deg, var(--bpmb-success, #16a34a) 0%, var(--bpmb-progress-done-glow) 100%);
}

.bpmb-reading-progress-container.is-complete .bpmb-reading-progress-bar::before {
    background: var(--bpmb-progress-done-glow);
    box-shadow: 0 0 8px var(--bpmb-progress-done-glow);
    opacity: 0;
}

/* Admin bar offset */
.admin-bar .bpmb-reading-progress-container {
    top: 32px;
}

@media screen and (max-width: 782px) {
    .admin-bar .bpmb-reading-progress-container {
        top: 46px;
    }
}

/*--------------------------------------------------------------
# Reading Info Bar
--------------------------------------------------------------*/
.bpmb-reading-info {
    margin-top: var(--bpmb-space-2xl, 32px);
    padding: var(--bpmb-space-sm, 12px) 0;
    border-top: 1px solid var(--bpmb-border-color, #e0e0e0);
}

.bpmb-reading-info-inner {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-start;
    gap: var(--bpmb-space-md, 16px);
}

.bpmb-info-item {
    display: inline-flex;
    align-items: center;
    gap: var(--bpmb-space-xs, 6px);
    font-size: var(--bpmb-font-size-md, 14px);
    color: var(--bpmb-text-secondary, #666);
    opacity: 0;
    transform: translateY(10px);
    animation: bpmb-fade-in-up 0.5s ease forwards;
}

.bpmb-info-item:nth-child(1) {
    animation-delay: 0.1s;
}

.bpmb-info-item:nth-child(3) {
    animation-delay: 0.2s;
}

.bpmb-info-item:nth-child(5) {
    animation-delay: 0.3s;
}

@keyframes bpmb-fade-in-up {
    from {
        opacity: 0;
        transform: translateY(10px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.bpmb-info-item svg {
    width: 16px;
    height: 16px;
    color: var(--bpmb-primary, #2563eb);
    flex-shrink: 0;
}

.bpmb-info-value {
    font-weight: 600;
    color: var(--bpmb-text-primary, #333);
}

.bpmb-info-separator {
    width: 4px;
    height: 4px;
    background: var(--bpmb-border-color-dark, #ccc);
    border-radius: 50%;
    opacity: 0;
    animation: bpmb-fade-in 0.3s ease forwards;
    animation-delay: 0.15s;
}

.bpmb-info-separator:nth-child(4) {
    animation-delay: 0.25s;
}

@keyframes bpmb-fade-in {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

/* Dark mode needs no block of its own: every colour above is a token, and bpmb-front.css flips
 * the tokens under the theme's dark switch (Reign's `html[data-bx-mode="dark"]` included). */

/*--------------------------------------------------------------
# Mobile
--------------------------------------------------------------*/
@media only screen and (max-width: 480px) {
    .bpmb-reading-info-inner {
        gap: 8px;
    }

    .bpmb-info-item {
        font-size: var(--bpmb-font-size-xs, 12px);
    }

    .bpmb-info-item svg {
        width: 14px;
        height: 14px;
    }
}
/* ==========================================================================
   Images inside a post

   The editor's image tool offers the member Stretch / Border / Background. The HTML converter
   used to read only the URL and the caption, so every one of those was silently discarded on
   save — a member toggled Stretch, pressed Publish, and their choice evaporated. The converter
   now carries them through as classes; these are the rules that make them mean something.
   ========================================================================== */

.bpmb-image-block {
	margin: var(--bpmb-space-lg) 0;
}

.bpmb-image-block img {
	display: block;
	width: 100%;
	height: auto;
	border-radius: var(--bpmb-radius-md);
}

.bpmb-image-block figcaption {
	margin-block-start: var(--bpmb-space-sm);
	color: var(--bpmb-text-secondary);
	font-size: var(--bpmb-font-size-sm);
	text-align: center;
}

/* Stretch: break out of the content column, up to the viewport. Capped at 100vw and centred with
   a negative inline margin so it does not create a horizontal scrollbar — which is what a naive
   `width: 100vw` does on every page that has one. */
.bpmb-image-block.is-stretched img {
	max-width: 100vw;
	width: 100vw;
	margin-inline-start: 50%;
	transform: translateX(-50%);
	border-radius: 0;
}

.bpmb-image-block.has-border img {
	border: 1px solid var(--bpmb-border-color);
}

.bpmb-image-block.has-background {
	padding: var(--bpmb-space-lg);
	background: var(--bpmb-bg-secondary);
	border-radius: var(--bpmb-radius-lg);
}

.bpmb-image-block.has-background img {
	max-width: 60%;
	margin-inline: auto;
}

@media screen and (max-width: 640px) {
	/* A stretched image on a phone is already full-bleed; the negative margin would only push it
	   off-screen. And a backgrounded image at 60% is a thumbnail nobody can see. */
	.bpmb-image-block.is-stretched img {
		width: 100%;
		margin-inline-start: 0;
		transform: none;
	}

	.bpmb-image-block.has-background {
		padding: var(--bpmb-space-md);
	}

	.bpmb-image-block.has-background img {
		max-width: 100%;
	}
}

/* ---------------------------------------------------------------------------
 * The engagement bar under the article: clap, and save-for-later.
 *
 * The BUTTONS are already styled in bpmb-ui.css (.bpmb-clap-btn/.bpmb-bookmark-btn),
 * where they `all: unset` and rebuild themselves, so no theme's button reset can
 * reach them. This is only the bar that holds them.
 *
 * EVERY value bottoms out in a literal, exactly like the rest of the design system:
 * `var(--bpmb-border-color, #e2e8f0)`. The plugin must look right on a theme that
 * defines nothing at all -- so the token is an OPPORTUNITY for the theme to restyle
 * us, never a REQUIREMENT that it must. Logical properties throughout, so it mirrors
 * itself in RTL with no second rule.
 * ------------------------------------------------------------------------- */
.bpmb-single-engagement {
	display: flex;
	align-items: center;
	gap: var( --bpmb-space-md, 1rem );
	flex-wrap: wrap;
	margin-block: var( --bpmb-space-xl, 1.5rem ) 0;
	padding-block: var( --bpmb-space-md, 1rem );
	border-block-start: 1px solid var( --bpmb-border-color, #e2e8f0 );
}

/* A guest, and the post's own author, see the clap COUNT with no button beside it.
 * Left bare in the flex row it reads as a stray number, so give it a button's
 * vertical rhythm. */
.bpmb-single-engagement .bpmb-claps--readonly {
	display: inline-flex;
	align-items: center;
	min-height: 2.5rem;
	font-size: var( --bpmb-font-size-md, 0.9375rem );
	color: var( --bpmb-text-secondary, #6b7280 );
}

/* The guest's way in: a text link, so it cannot be mistaken for the clap it explains. */
.bpmb-single-engagement__login {
	font-size: var( --bpmb-font-size-sm, 0.875rem );
	color: var( --bpmb-primary-ink, var( --bpmb-primary, #2563eb ) );
	text-decoration: underline;
	text-underline-offset: 2px;
}

@media ( max-width: 480px ) {
	.bpmb-single-engagement {
		gap: var( --bpmb-space-sm, 0.75rem );
	}
}

/* -------------------------------------------------------------------------
 * The author box under the article: who wrote it, a way to their blog, and Follow.
 *
 * Avatar | name, bio, (visitor: "Join to follow writers") | Follow. Stacks under 480px so the
 * Follow button gets a full-width row instead of squeezing the bio into a column of three words.
 * ------------------------------------------------------------------------- */
.bpmb-author-box {
	display: grid;
	grid-template-columns: auto minmax( 0, 1fr ) auto;
	align-items: start;
	gap: var( --bpmb-space-md, 1rem );
	margin-block: var( --bpmb-space-xl, 1.5rem ) 0;
	padding: var( --bpmb-space-lg, 1.5rem );
	background: var( --bpmb-bg-secondary, #f8fafc );
	border: 1px solid var( --bpmb-border-color, #e2e8f0 );
	border-radius: var( --bpmb-radius-lg, 10px );
}

.bpmb-author-box__avatar img {
	display: block;
	width: 64px;
	height: 64px;
	border-radius: 50%;
}

.bpmb-author-box__eyebrow {
	margin: 0;
	font-size: var( --bpmb-font-size-xs, 0.75rem );
	font-weight: 600;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: var( --bpmb-text-secondary, #6b7280 );
}

.bpmb-author-box__name {
	margin: var( --bpmb-space-xs, 0.25rem ) 0 0;
	font-size: var( --bpmb-font-size-xl, 1.125rem );
	line-height: 1.3;
}

.bpmb-author-box__name a {
	color: var( --bpmb-text-primary, #111827 );
	text-decoration: none;
}

.bpmb-author-box__name a:hover,
.bpmb-author-box__name a:focus-visible {
	color: var( --bpmb-primary-ink, var( --bpmb-primary, #2563eb ) );
	text-decoration: underline;
}

.bpmb-author-box__bio {
	margin: var( --bpmb-space-sm, 0.5rem ) 0 0;
	max-width: 65ch;
	font-size: var( --bpmb-font-size-md, 0.875rem );
	line-height: 1.6;
	color: var( --bpmb-text-secondary, #6b7280 );
}

.bpmb-author-box__join {
	margin: var( --bpmb-space-sm, 0.5rem ) 0 0;
	font-size: var( --bpmb-font-size-md, 0.875rem );
}

.bpmb-author-box__join a {
	color: var( --bpmb-primary-ink, var( --bpmb-primary, #2563eb ) );
	font-weight: 600;
}

.bpmb-author-box__action {
	align-self: center;
}

@media ( max-width: 480px ) {
	.bpmb-author-box {
		grid-template-columns: auto minmax( 0, 1fr );
		padding: var( --bpmb-space-md, 1rem );
	}

	.bpmb-author-box__avatar img {
		width: 48px;
		height: 48px;
	}

	.bpmb-author-box__action {
		grid-column: 1 / -1;
	}

	.bpmb-author-box__action .bpmb-follow-btn {
		width: 100% !important;
	}
}