/**
 * OnCue reader styles (UI spec §1.2): single column at every breakpoint,
 * scoped under .oncue. The reader borrows the host theme's font *family*
 * (inherited) but sets its own font *sizes* from an internal base, so the type
 * hierarchy stays consistent across themes; publishers re-skin via --oncue-*
 * custom properties (including --oncue-font-size to rescale the whole reader).
 */
/* Form controls default to the UA font, not the page font — force every
   OnCue control to inherit the host theme's typography. */
.oncue button,
.oncue input,
.oncue select {
	font-family: inherit;
}

/* Consistent, always-visible keyboard focus for every interactive element in
   the reader (WCAG 2.4.7). */
.oncue a:focus-visible,
.oncue button:focus-visible {
	outline: 2px solid var(--oncue-accent);
	outline-offset: 2px;
}

.oncue {
	/* Accent darkened just enough that white-on-accent and accent-on-white both
	   clear WCAG AA 4.5:1 (was #dd3b2f = 4.43:1; now 4.85:1). */
	--oncue-accent: #d3362b;
	--oncue-accent-deep: #b22c21;
	--oncue-muted: #6e6a70;
	/* Faint darkened to 4.76:1 so quiet meta labels still meet AA (was #a7a2a6
	   = 2.51:1, a contrast failure for text). */
	--oncue-faint: #767179;
	--oncue-border: #e7e3e2;
	--oncue-border-2: #efecea;
	--oncue-surface: #f8f5f3;
	--oncue-radius: 10px;
	/* Monospace metadata is the reader's signature: timestamps, badges and
	   section labels are set in mono so the feed reads as live wire coverage. */
	--oncue-mono: ui-monospace, "SF Mono", SFMono-Regular, Menlo, "Cascadia Mono", Consolas, monospace;
	/* The reader's own type base. It inherits the theme's font *family* but
	   sizes everything (all the em values below) off this, not the theme's
	   font-size — so the scale is identical on every theme. Override to rescale. */
	--oncue-font-size: 16px;
	/* Capped to a single-column reading measure and centered by default. Publishers
	   (or the event's Appearance → Width control, via an inline --oncue-max-width)
	   can set 100% to fill the parent container instead. */
	max-width: var(--oncue-max-width, 640px);
	margin-left: auto;
	margin-right: auto;
	font-size: var(--oncue-font-size);
	line-height: 1.6;
}

/* ----------------------------------------------------- theme isolation ---
 * The reader renders inside the host post's content, so the theme's front-end
 * content rules cascade into it (the block editor's iframe does NOT load them,
 * which is why the reader looks correct there but breaks on the front end).
 * OnCue borrows only the theme's font *family* (inherited); every other visual
 * property is set by OnCue. Some themes pad, border, shadow, or float every
 * content image — e.g. `.entry-content img { padding: 15px; box-sizing:
 * border-box }`, which drops OnCue's avatar low and collapses the fixed-size
 * wordmark to nothing.
 *
 * The `.oncue` class is repeated purely to raise specificity: a plain
 * `.oncue img` (0,1,1) only TIES a theme's `.entry-content img` and then loses
 * on load order, even with !important. `.oncue.oncue.oncue img` (0,3,1) beats
 * essentially every real-world theme content-image selector, so OnCue's own
 * styling wins regardless of enqueue order. Force content-box and strip the
 * theme's box styling here; width/height/max-width and border-radius stay on the
 * specific image rules below (which are boosted the same way). */
.oncue.oncue.oncue img {
	box-sizing: content-box !important;
	padding: 0 !important;
	margin: 0 !important;
	border: 0 !important;
	box-shadow: none !important;
	background: none !important;
	min-width: 0 !important;
	min-height: 0 !important;
	float: none !important;
	filter: none !important;
	vertical-align: middle;
}

/* Some themes rule off content headings with a border or a pseudo-element line,
   or inject an <hr> divider when they detect a section heading — the stray dark
   line above the reader. OnCue draws its own dividers, so strip theme borders
   and injected pseudo-lines from OnCue's headings and hide any <hr> the theme
   drops inside the reader. (Same repeated-class specificity boost as above.) */
.oncue.oncue.oncue h2,
.oncue.oncue.oncue h3,
.oncue.oncue.oncue h4 {
	border: 0 !important;
	background: none !important;
}
.oncue.oncue.oncue h2::before, .oncue.oncue.oncue h2::after,
.oncue.oncue.oncue h3::before, .oncue.oncue.oncue h3::after {
	border: 0 !important;
	background: none !important;
}
.oncue.oncue.oncue hr {
	display: none !important;
}

/* Signature "on-air" edge: a thin accent rule capping the top of the reader —
   the one bold accent in an otherwise quiet block. */
.oncue-reader {
	position: relative;
	padding-top: 14px;
}

.oncue-reader::before {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	height: 3px;
	border-radius: 3px;
	background: linear-gradient( 90deg, var(--oncue-accent), var(--oncue-accent-deep) );
}

/* ------------------------------------------------------------ header --- */
.oncue-header {
	margin-bottom: 1.25em;
}

/* Title and status pill share the top row, both aligned to the top; the pill hugs
   the right edge. */
.oncue-titlerow {
	display: flex;
	align-items: flex-start;
	gap: 0.6em;
	flex-wrap: wrap;
}

/* Boosted-specificity + !important reset so the reader's own size AND margin win
   over theme heading rules — some themes set `h2 { margin: 2rem 0 !important }`,
   which a plain `margin: 0` can't beat, pushing the title down inside its flex row
   and stranding the LIVE pill above it. min-width:0 lets a long title wrap its own
   text instead of ever bumping the pill onto its own line. */
.oncue.oncue.oncue .oncue-title {
	margin: 0 !important;
	min-width: 0;
	flex: 1 1 auto;
	font-size: clamp( 1.4em, 1em + 2vw, 1.9em );
	font-weight: 800;
	letter-spacing: -0.02em;
	line-height: 1.1;
}

.oncue-pill {
	display: inline-flex;
	align-items: center;
	gap: 0.4em;
	flex: none;
	font-family: var(--oncue-mono);
	font-size: 0.72em;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.1em;
	padding: 0.3em 0.8em;
	border-radius: 999px;
	background: var(--oncue-surface);
	color: var(--oncue-muted);
	border: 1px solid var(--oncue-border);
}

.oncue-pill--live {
	background: var(--oncue-accent);
	border-color: var(--oncue-accent);
	color: #fff;
	box-shadow: 0 4px 12px color-mix( in srgb, var(--oncue-accent) 24%, transparent );
}

.oncue-dot {
	width: 0.5em;
	height: 0.5em;
	border-radius: 50%;
	background: currentColor;
	animation: oncue-pulse 1.4s ease-in-out infinite;
}

@keyframes oncue-pulse {
	0%, 100% { opacity: 1; }
	50% { opacity: 0.3; }
}

@media (prefers-reduced-motion: reduce) {
	.oncue-dot { animation: none; }
}

/* Meta line beneath the title, set off by a hairline: "Live since …",
   "Updated … ago", and the recessed brand mark, all in mono small-caps. */
.oncue-meta {
	display: flex;
	align-items: center;
	gap: 0.55em;
	flex-wrap: wrap;
	margin-top: 0.4em;
	padding-top: 0.45em;
	border-top: 1px solid var(--oncue-border-2);
	font-family: var(--oncue-mono);
	font-size: 0.7em;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--oncue-muted);
}

.oncue-since,
.oncue-updated {
	color: var(--oncue-muted);
}

.oncue-dotsep {
	width: 3px;
	height: 3px;
	border-radius: 50%;
	background: var(--oncue-faint);
	flex: none;
}

.oncue-intro {
	margin-bottom: 1.25em;
}

/* ---------------------------------------------------------- coverage --- */
/* A horizontal swipe rail of article cards: fixed height so a long coverage
   list never pushes the live stream down; scroll-snaps under touch and
   drags/scrolls with a trackpad on desktop. A short "peek" of the next card at
   the right edge signals there's more to swipe. */
.oncue-coverage {
	margin-bottom: 1.5em;
}

.oncue-coverage-head {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 0.5em;
	margin-bottom: 0.6em;
}

.oncue .oncue-coverage-title {
	margin: 0;
	font-family: var(--oncue-mono);
	font-size: 0.8em;
	font-weight: 700;
	letter-spacing: 0.12em;
	text-transform: uppercase;
}

.oncue-coverage-all {
	display: inline-flex;
	align-items: center;
	gap: 0.25em;
	font-family: var(--oncue-mono);
	font-size: 0.72em;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--oncue-accent);
	white-space: nowrap;
}

.oncue-arrow-ne {
	flex: none;
}

/* .oncue-scoped and reset so a host theme's `.entry-content ul/li` rules
   (list markers, margins, line-height) can't disturb the rail's geometry. */
.oncue .oncue-coverage-list {
	list-style: none;
	margin: 0;
	/* Vertical padding leaves room for the card's hover lift + shadow, which
	   overflow-x would otherwise clip. */
	padding: 0.4em 0 0.85em;
	display: flex;
	align-items: stretch;
	gap: 0.75em;
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	-webkit-overflow-scrolling: touch;
	scrollbar-width: thin;
}

/* Each card is a flex column that fills its stretched track, so every card in
   the rail is the same height regardless of headline length or host theme —
   the link fills via flex, not height:100% (which a theme can break). */
.oncue .oncue-coverage-card {
	flex: 0 0 60%;
	min-width: 160px;
	max-width: 220px;
	margin: 0;
	padding: 0;
	list-style: none;
	scroll-snap-align: start;
	display: flex;
}

.oncue .oncue-coverage-card__link {
	flex: 1 1 auto;
	display: flex;
	flex-direction: column;
	gap: 0.5em;
	min-height: 0;
	padding: 0.85em 0.9em;
	border: 1px solid var(--oncue-border);
	border-top: 3px solid var(--oncue-accent);
	border-radius: var(--oncue-radius);
	background: var(--oncue-surface);
	color: inherit;
	text-decoration: none;
	transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.oncue-coverage-card__link:hover,
.oncue-coverage-card__link:focus-visible {
	transform: translateY(-2px);
	box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
}

.oncue .oncue-coverage-card__title {
	/* Hold the headline just under the reader's body size regardless of the host
	   theme's heading scale, so cards stay compact and consistent. */
	font-size: 0.9em;
	font-weight: 600;
	line-height: 1.3;
	/* Clamp long headlines to 3 lines and reserve 2 lines minimum, so cards keep
	   a stable, uniform height whether a headline is short or long. */
	display: -webkit-box;
	-webkit-line-clamp: 3;
	-webkit-box-orient: vertical;
	overflow: hidden;
	min-height: 2.6em; /* 2 lines at line-height 1.3 */
}

.oncue-coverage-card__date {
	margin-top: auto;
	padding-top: 0.35em;
	font-family: var(--oncue-mono);
	font-size: 0.72em;
	letter-spacing: 0.03em;
	color: var(--oncue-muted);
}

.oncue-coverage-card__date::after {
	content: " \203a"; /* › — quiet "open" affordance */
}

@media (prefers-reduced-motion: reduce) {
	.oncue-coverage-card__link {
		transition: none;
	}
	.oncue-coverage-card__link:hover,
	.oncue-coverage-card__link:focus-visible {
		transform: none;
	}
}

/* --------------------------------------------------- key highlights --- */
.oncue-highlights {
	position: relative;
	overflow: hidden;
	border: 1px solid var(--oncue-border);
	border-radius: var(--oncue-radius);
	background: var(--oncue-surface);
	padding: 1em 1.25em 1em 1.35em;
	margin-bottom: 1.5em;
}

/* Accent spine down the left edge — ties the AI briefing to the live accent. */
.oncue-highlights::before {
	content: "";
	position: absolute;
	left: 0;
	top: 0;
	bottom: 0;
	width: 3px;
	background: var(--oncue-accent);
}

.oncue-highlights-head {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 0.75em;
	margin-bottom: 0.5em;
}

.oncue .oncue-highlights-title {
	margin: 0;
	font-family: var(--oncue-mono);
	font-size: 0.8em;
	font-weight: 700;
	letter-spacing: 0.12em;
	text-transform: uppercase;
}

.oncue-highlights-meta {
	font-family: var(--oncue-mono);
	font-size: 0.68em;
	color: var(--oncue-faint);
	text-transform: uppercase;
	letter-spacing: 0.1em;
	white-space: nowrap;
}

.oncue-highlights-list {
	list-style: none;
	margin: 0 0 0.6em;
	padding-left: 0;
}

.oncue-highlights-list li {
	position: relative;
	margin-bottom: 0.5em;
	padding-left: 1.1em;
	line-height: 1.45;
}

.oncue-highlights-list li::before {
	content: "";
	position: absolute;
	left: 0.15em;
	top: 0.62em;
	width: 5px;
	height: 5px;
	border-radius: 50%;
	background: var(--oncue-accent);
}

.oncue-cite {
	white-space: nowrap;
}

.oncue-cite a {
	display: inline-block;
	min-width: 1.1em;
	padding: 0 0.25em;
	margin-left: 0.15em;
	font-family: var(--oncue-mono);
	font-size: 0.72em;
	line-height: 1.4;
	text-align: center;
	color: var(--oncue-accent);
	border: 1px solid var(--oncue-border);
	border-radius: 4px;
	text-decoration: none;
}

.oncue-cite a:hover {
	background: var(--oncue-accent);
	border-color: var(--oncue-accent);
	color: #fff;
}

.oncue-highlights-disclosure {
	margin: 0;
	font-family: var(--oncue-mono);
	font-size: 0.62em;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--oncue-faint);
}

/*
 * Theme isolation for the highlights box. The reader renders inside the host
 * post's .entry-content, so a theme's content rules (li { list-style: disc },
 * p { font-size: … }) cascade in and out-rank our (0,1,0) selectors above —
 * producing a native disc *on top of* our ::before dot, and inflating the
 * disclosure to body-copy size. Repeat the class for specificity, matching
 * the guard block near the top of this file.
 */
.oncue.oncue.oncue .oncue-highlights-list li {
	list-style: none;
}

.oncue.oncue.oncue .oncue-highlights-list li::marker {
	content: none;
}

.oncue.oncue.oncue .oncue-highlights-disclosure {
	font-size: 0.62em;
}

/* -------------------------------------------------------------- pill --- */
.oncue-pill-new {
	display: inline-flex;
	align-items: center;
	gap: 0.4em;
	margin: 0 auto 1em;
	padding: 0.5em 1.25em;
	border: none;
	border-radius: 999px;
	background: var(--oncue-accent);
	color: #fff;
	font-weight: 600;
	cursor: pointer;
	position: sticky;
	top: 1em;
	z-index: 5;
	box-shadow: 0 2px 10px rgba(0, 0, 0, 0.18);
	animation: oncue-pill-in 0.3s ease-out;
}

/* Center the inline-flex pill within the stream column. */
.oncue-pill-new:not([hidden]) {
	display: flex;
	width: fit-content;
}

/* A class selector would otherwise beat the UA [hidden] rule and leave an
   empty pill on screen; restore hiding so it truly returns to default. */
.oncue-pill-new[hidden] {
	display: none;
}

/* Upward cue: new posts land at the top of the stream. */
.oncue-pill-new::before {
	content: '↑';
	font-size: 1.1em;
	line-height: 1;
}

.oncue-pill-new:focus-visible {
	outline: 2px solid currentColor;
	outline-offset: 2px;
}

@keyframes oncue-pill-in {
	from {
		opacity: 0;
		transform: translateY(-0.4em);
	}
	to {
		opacity: 1;
		transform: translateY(0);
	}
}

@media (prefers-reduced-motion: reduce) {
	.oncue-pill-new { animation: none; }
}

.oncue-ended-marker {
	text-align: center;
	color: var(--oncue-muted);
	border-top: 1px solid var(--oncue-border);
	border-bottom: 1px solid var(--oncue-border);
	padding: 0.5em 0;
}

/* ------------------------------------------------------------ stream --- */
.oncue-stream {
	display: flex;
	flex-direction: column;
	position: relative;
}

/* Chronicle timeline: a continuous rail formed by each entry's left border,
   with a node dot per entry. Purely visual — no markup change, so the PHP and
   JS entry renderers stay identical. */
.oncue-entry {
	display: flex;
	gap: 0.85em;
	position: relative;
	/* Symmetric horizontal padding, uniform across every state (normal, pinned,
	   highlighted) so the right-aligned permalink timestamp lands in the same
	   place in all cases — never hugging the column edge on one row and inset on
	   the next. */
	padding: 1.1em 1.5em;
	margin-left: 7px;
	border-left: 2px solid var(--oncue-border);
}

.oncue-entry::before {
	content: "";
	position: absolute;
	left: -6px;
	top: 1.5em;
	width: 10px;
	height: 10px;
	box-sizing: border-box;
	border-radius: 50%;
	background: var(--oncue-bg, #fff);
	border: 2px solid var(--oncue-border);
	box-shadow: 0 0 0 3px var(--oncue-bg, #fff);
}

/* The newest update anchors the top of the rail: a solid accent node with a
   soft broadcast ring pulsing out of it. */
.oncue-entry:first-child::before {
	background: var(--oncue-accent);
	border-color: var(--oncue-accent);
}

.oncue-entry:first-child::after {
	content: "";
	position: absolute;
	/* box-sizing:border-box so the 2px border doesn't add to the 18px box —
	   without it the ring rendered 22px and sat 2px down-and-right of the node. */
	box-sizing: border-box;
	left: -10px;
	top: 1.5em;
	margin-top: -4px;
	width: 18px;
	height: 18px;
	border-radius: 50%;
	border: 2px solid var(--oncue-accent);
	opacity: 0.5;
	pointer-events: none;
	animation: oncue-ring 1.8s ease-out infinite;
}

@keyframes oncue-ring {
	from { transform: scale( 0.5 ); opacity: 0.6; }
	to { transform: scale( 1.25 ); opacity: 0; }
}

@media (prefers-reduced-motion: reduce) {
	.oncue-entry:first-child::after { animation: none; opacity: 0.35; }
	.oncue-entry.is-new,
	.oncue-entry.is-highlighted { animation: none; }
}

/* Key updates get a ringed (hollow-accent) node, so the rail itself flags the
   moments that matter as a reader scans down it. */
.oncue-entry.is-key::before {
	background: var(--oncue-bg, #fff);
	border-color: var(--oncue-accent);
}

.oncue-entry.is-pinned {
	background: var(--oncue-surface);
	border-radius: var(--oncue-radius);
}

.oncue-entry.is-pinned::before {
	background: var(--oncue-accent);
}

.oncue-entry.is-new {
	animation: oncue-fade-in 0.4s ease-out;
}

/* Deep-linked (cited) entry: a soft accent wash that pulses in on arrival and
   settles into a quiet persistent tint, with the rail lit up — no boxy outline.
   color-mix degrades gracefully to the plain surface tint on older browsers. */
.oncue-entry.is-highlighted {
	background-color: var(--oncue-surface);
	background-color: color-mix( in srgb, var(--oncue-accent) 7%, transparent );
	border-left-color: var(--oncue-accent);
	border-radius: 0 var(--oncue-radius) var(--oncue-radius) 0;
	animation: oncue-highlight 1.4s ease-out;
}

.oncue-entry.is-highlighted::before {
	background: var(--oncue-accent);
	box-shadow: 0 0 0 4px color-mix( in srgb, var(--oncue-accent) 22%, transparent );
}

@keyframes oncue-highlight {
	from { background-color: color-mix( in srgb, var(--oncue-accent) 24%, transparent ); }
}

@keyframes oncue-fade-in {
	from { opacity: 0; transform: translateY(-6px); }
	to { opacity: 1; transform: none; }
}

/* Origin cap: the rail runs on from the last entry and terminates in a hollow
   node — the mirror of the accent node that anchors the top. Same geometry as
   an entry so it reads as the timeline's first beat, not an added element. */
.oncue-stream-start {
	position: relative;
	margin-left: 7px;
	border-left: 2px solid var(--oncue-border);
	padding: 1.1em 1.5em;
	display: flex;
	align-items: center;
}

/* Hollow terminus node — same size/offset as an entry node, but open, to read
   as an endpoint rather than another update. */
.oncue-stream-start::before {
	content: "";
	position: absolute;
	left: -6px;
	top: 50%;
	transform: translateY(-50%);
	width: 10px;
	height: 10px;
	border-radius: 50%;
	background: var(--oncue-bg, #fff);
	border: 2px solid var(--oncue-border);
	box-shadow: 0 0 0 3px var(--oncue-bg, #fff);
	z-index: 1;
}

/* Paint over the rail below the node so it stops at the origin instead of
   trailing off the bottom. */
.oncue-stream-start::after {
	content: "";
	position: absolute;
	left: -2px;
	top: 50%;
	bottom: 0;
	width: 2px;
	background: var(--oncue-bg, #fff);
}

.oncue-stream-start__label {
	font-family: var(--oncue-mono);
	font-size: 0.66em;
	font-weight: 600;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--oncue-faint);
}

.oncue-stream-start__date {
	font-weight: 400;
	letter-spacing: 0.02em;
	opacity: 0.8;
}

.oncue-stream-start__date::before {
	content: "·";
	margin: 0 0.4em;
	opacity: 0.6;
}

/* The class's display:flex would beat the UA [hidden] rule (same fix as the
   pill); the cap must stay hidden until load-more has fetched the full
   history. */
.oncue-stream-start[hidden] {
	display: none;
}

/* ------------------------------------------------- sponsorship slots --- */
/* A sponsor card is not an update: it spans the full column and the timeline
   rail deliberately breaks around it — no node, no avatar, no timestamp — so
   readers parse "not editorial" before reading a word. The accent is never
   used here; it stays the editorial voice (live pill, key badge, rail nodes).
   The sponsor's own artwork carries whatever color the deal brings. */
.oncue-slot {
	margin: 0.9em 0;
}

.oncue-sponsor {
	display: flex;
	flex-direction: column;
	gap: 0.65em;
	padding: 1em 1.25em;
	border: 1px solid var(--oncue-border);
	border-radius: var(--oncue-radius);
	background: var(--oncue-surface);
}

/* The mandatory disclosure, in the reader's mono meta register, capped by a
   hairline so the label reads as part of the card's chrome, not its copy. */
.oncue-sponsor-label {
	display: flex;
	align-items: center;
	gap: 0.6em;
	font-family: var(--oncue-mono);
	font-size: 0.62em;
	font-weight: 700;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--oncue-faint);
}

.oncue-sponsor-label::after {
	content: "";
	flex: 1;
	height: 1px;
	background: var(--oncue-border);
}

/* Optional banner creative: full card width, natively uploaded. */
.oncue-sponsor-banner {
	display: block;
	line-height: 0;
}

.oncue-sponsor-banner img {
	display: block;
	width: 100%;
	height: auto;
	border-radius: calc(var(--oncue-radius) - 4px);
}

.oncue-sponsor-row {
	display: flex;
	align-items: center;
	gap: 0.85em;
	flex-wrap: wrap;
}

/* Logos arrive in every shape; a fixed tile with object-fit keeps any of
   them sitting calmly in the stream. */
.oncue-sponsor-logo {
	flex: none;
	width: 2.75em;
	height: 2.75em;
	border-radius: 0.55em;
	overflow: hidden;
	background: #fff;
	border: 1px solid var(--oncue-border);
}

/* !important + .oncue scope so a host theme's content-image rules can't
   deform the fixed logo tile (see the avatar note above). */
.oncue.oncue.oncue .oncue-sponsor-logo img {
	display: block;
	width: 100% !important;
	height: 100% !important;
	max-width: none !important;
	object-fit: contain;
}

.oncue-sponsor-copy {
	flex: 1;
	min-width: 0;
}

.oncue-sponsor-name {
	display: block;
	font-size: 0.9em;
	font-weight: 800;
	letter-spacing: -0.01em;
}

.oncue-sponsor-tag {
	display: block;
	margin-top: 1px;
	font-size: 0.85em;
	color: var(--oncue-muted);
}

/* Quiet pill CTA, mirroring the load-more button's register. */
.oncue-sponsor-cta {
	flex: none;
	display: inline-flex;
	align-items: center;
	gap: 0.4em;
	font-family: var(--oncue-mono);
	font-size: 0.66em;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: inherit;
	text-decoration: none;
	white-space: nowrap;
	border: 1px solid var(--oncue-border);
	border-radius: 999px;
	padding: 0.7em 1.4em;
}

.oncue-sponsor-cta:hover,
.oncue-sponsor-cta:focus-visible {
	border-color: currentColor;
}

/* --------------------------------------------------------- load more --- */
/* Pages older entries into the stream. Sits in normal flow between the
   stream and the footer credit — it never overlaps the "Powered by" line.
   Quiet mono treatment to match the origin cap it stands in for. */
.oncue-loadmore {
	display: flex;
	justify-content: center;
	margin: 0.5em 0 0.75em;
}

.oncue-loadmore__btn {
	font-family: var(--oncue-mono);
	font-size: 0.66em;
	font-weight: 600;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--oncue-muted);
	background: none;
	border: 1px solid var(--oncue-border);
	border-radius: 999px;
	padding: 0.7em 1.6em;
	cursor: pointer;
}

.oncue-loadmore__btn:hover:not(:disabled) {
	color: var(--oncue-accent);
	border-color: currentColor;
}

.oncue-loadmore__btn:disabled {
	opacity: 0.6;
	cursor: default;
}

.oncue-loadmore__btn:focus-visible {
	outline: 2px solid currentColor;
	outline-offset: 2px;
}

/* Sized in em off the reader's base — the same base the byline scales from —
   so the avatar stays proportional to the byline instead of a fixed pixel size.
   font-size is set on the initials child, not here, so the em box stays 1:1
   with the base. */
.oncue-avatar {
	flex: 0 0 2.375em;
	width: 2.375em;
	height: 2.375em;
	border-radius: 50%;
	overflow: hidden;
	background: var(--oncue-border);
	display: flex;
	align-items: center;
	justify-content: center;
	font-weight: 700;
	color: var(--oncue-muted);
}

/* Initials track the byline's size. */
.oncue-avatar span {
	font-size: 0.8em;
}

/* !important + .oncue scope so a host theme's content-image rules
   (`.entry-content img { height: auto !important }` and the like) can't
   deform the framed avatar — otherwise a non-square source overflows the
   circle and shows sliced. */
.oncue.oncue.oncue .oncue-avatar img {
	width: 100% !important;
	height: 100% !important;
	max-width: none !important;
	object-fit: cover;
}

.oncue-entry-body {
	flex: 1;
	min-width: 0;
}

.oncue-entry-header {
	display: flex;
	align-items: baseline;
	gap: 0.6em;
	flex-wrap: wrap;
	margin-bottom: 0.35em;
}

.oncue-byline {
	font-size: 0.9em;
	font-weight: 700;
	letter-spacing: -0.01em;
}

.oncue-badge {
	font-family: var(--oncue-mono);
	font-size: 0.62em;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.08em;
	background: var(--oncue-border);
	color: var(--oncue-muted);
	border-radius: 4px;
	padding: 0.2em 0.5em;
}

.oncue-badge--key {
	background: var(--oncue-accent);
	color: #fff;
}

.oncue-time {
	margin-left: auto;
	font-family: var(--oncue-mono);
	font-size: 0.72em;
	letter-spacing: 0.02em;
	color: var(--oncue-muted);
	text-decoration: none;
	white-space: nowrap;
}

.oncue-time:hover {
	color: var(--oncue-accent);
}

.oncue-entry-content > :first-child { margin-top: 0; }
.oncue-entry-content > :last-child { margin-bottom: 0; }

/* Break an unbroken run of characters (a pasted URL or a stray run-on "word")
   so it wraps inside the column instead of overflowing the container. */
.oncue-entry-content {
	overflow-wrap: anywhere;
	word-break: break-word;
}

/* Pin the body text to the reader's base rather than the theme's content size
   (`.entry-content p`, etc.), which specificity would otherwise win. The font
   *family* is still inherited — only the size is the reader's own. */
.oncue .oncue-entry-content {
	font-size: 1em;
	line-height: 1.65;
}

.oncue .oncue-entry-content p,
.oncue .oncue-entry-content ul,
.oncue .oncue-entry-content ol,
.oncue .oncue-entry-content li {
	font-size: inherit;
}

/* Lists in an update body (e.g. bullets shared from Slack). Theme-isolated with
   the repeated-class form so a host theme's .entry-content list rules can't
   override the marker, indent, or spacing — keeping them consistent with the
   rest of the reader. */
.oncue.oncue.oncue .oncue-entry-content ul,
.oncue.oncue.oncue .oncue-entry-content ol {
	margin: 0.5em 0;
	padding-left: 1.5em;
}

.oncue.oncue.oncue .oncue-entry-content ul {
	list-style: disc;
}

.oncue.oncue.oncue .oncue-entry-content ol {
	list-style: decimal;
}

.oncue.oncue.oncue .oncue-entry-content li {
	margin: 0.25em 0;
	padding-left: 0.15em;
	line-height: 1.5;
}

.oncue.oncue.oncue .oncue-entry-content li::marker {
	color: var(--oncue-accent);
}

/* Headings & divider from the composer's block styles (spec §6). */
.oncue-entry-content h1,
.oncue-entry-content h2,
.oncue-entry-content h3,
.oncue-entry-content h4,
.oncue-entry-content h5,
.oncue-entry-content h6 {
	margin: 0.6em 0 0.3em;
	line-height: 1.25;
	font-weight: 600;
}
.oncue .oncue-entry-content h1 { font-size: 1.6em; }
.oncue .oncue-entry-content h2 { font-size: 1.4em; }
.oncue .oncue-entry-content h3 { font-size: 1.2em; }
.oncue .oncue-entry-content h4 { font-size: 1.05em; }
.oncue .oncue-entry-content h5 { font-size: 0.95em; }
.oncue .oncue-entry-content h6 { font-size: 0.85em; text-transform: uppercase; letter-spacing: 0.04em; }
.oncue-entry-content hr {
	border: 0;
	border-top: 1px solid var(--oncue-border);
	margin: 0.9em 0;
}

/* Pull-quote: editorial styling — a large decorative quotation glyph, serif
   quote text, and an attribution set off by a short accent rule. Matches the
   composer preview (admin.css). Without this a blockquote rendered as plain
   indented text. */
.oncue-entry-content blockquote {
	position: relative;
	margin: 1.3em 0;
	padding: 0.1em 0.5em 0.1em 2.6em;
	border: 0;
	background: none;
	font-family: Georgia, "Iowan Old Style", "Times New Roman", serif;
	font-size: 1.2em;
	line-height: 1.55;
	font-style: italic;
}
.oncue-entry-content blockquote::before {
	content: "\201C";
	position: absolute;
	left: -0.05em;
	top: -0.12em;
	font-family: Georgia, "Times New Roman", serif;
	font-size: 3.4em;
	line-height: 1;
	color: var(--oncue-accent);
	opacity: 0.22;
	pointer-events: none;
}
.oncue-entry-content blockquote p { margin: 0 0 0.4em; }
.oncue-entry-content blockquote cite {
	display: flex;
	align-items: center;
	gap: 0.7em;
	margin-top: 0.6em;
	font-family: inherit;
	font-style: normal;
	font-size: 0.62em;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.09em;
	color: var(--oncue-muted);
}
.oncue-entry-content blockquote cite::before {
	content: "";
	flex: none;
	width: 1.8em;
	height: 2px;
	background: var(--oncue-accent);
}

/* Media (spec §6.2): responsive, portrait clips capped.
 *
 * These MUST carry the .oncue.oncue.oncue boost described at the top of this
 * file. A plain `.oncue-entry-content img` is (0,1,1) — exactly the same
 * specificity as a theme's `.entry-content img`, so it only TIES and then loses
 * on load order. Themes that set a fixed height, `object-fit: cover`, or
 * `width: 100%` on content images were winning that tie and squashing ingested
 * photos (a portrait phone shot from Slack got cropped to a letterbox). Every
 * other image rule in this file was already boosted; this one was the gap.
 *
 * width/height are forced back to auto so the intrinsic ratio from the img's
 * own width/height attributes always governs — an image is never stretched to
 * fill a box. max-height caps tall portrait shots; because width is auto, the
 * browser scales both axes together, so a cap crops nothing. */
.oncue.oncue.oncue .oncue-entry-content img,
.oncue.oncue.oncue .oncue-entry-content video,
.oncue.oncue.oncue .oncue-entry-content iframe,
.oncue.oncue.oncue .oncue-media img {
	display: block;
	width: auto !important;
	height: auto !important;
	max-width: 100% !important;
	max-height: 80vh;
	object-fit: contain !important;
	border-radius: var(--oncue-radius);
}

.oncue.oncue.oncue .oncue-entry-content audio {
	width: 100%;
	max-width: 100%;
}

.oncue-media-video {
	max-height: 80vh; /* portrait cap, spec §6.2 */
	width: auto;
	max-width: 100%;
}

.oncue-media {
	margin: 0.75em 0 0;
}

/* Centered, so a portrait shot held back by max-height (or any source narrower
   than the column) sits in the middle rather than stranded on the left. Images
   are deliberately never upscaled past their intrinsic width — width:auto above
   means a small source stays small instead of going soft. */
.oncue.oncue.oncue .oncue-media img {
	margin-inline: auto !important;
}

.oncue-media figcaption {
	margin-top: 0.4em;
	font-family: var(--oncue-mono);
	font-size: 0.72em;
	letter-spacing: 0.02em;
	line-height: 1.4;
	color: var(--oncue-muted);
}

/* ----------------------------------------------------- related card --- */
.oncue-related-card {
	display: block;
	border: 1px solid var(--oncue-border);
	border-radius: var(--oncue-radius);
	overflow: hidden;
	text-decoration: none;
	color: inherit;
	margin-top: 0.5em;
	/* One shared horizontal inset on the card, so every text row lines up. Rows
	   must NOT re-pad horizontally in em — em resolves against each row's own
	   font-size, which is what made the small host label sit less indented than
	   the title. Bottom padding lives here (not on the last row, which varies:
	   description vs byline) so the text never crowds the border. The image breaks
	   back out to full-bleed below. */
	padding: 0 1em 0.9em;
}

.oncue-related-card:hover {
	border-color: var(--oncue-muted);
}

/* Contained with a top gap and rounded corners, so the image sits inside the
   card's inset and never butts up against the top or side border. width forced
   past a host theme's content-image rules; height stays auto (the theme's own
   `height: auto` matches), capped by max-height. */
.oncue.oncue.oncue .oncue-related-image {
	width: 100% !important;
	margin: 0.9em 0 0;
	display: block;
	max-height: 280px;
	object-fit: cover;
	border-radius: 8px;
}

.oncue-related-tag {
	display: block;
	font-family: var(--oncue-mono);
	font-size: 0.65em;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.1em;
	color: var(--oncue-muted);
	padding: 0.9em 0 0;
}

.oncue-related-title {
	display: block;
	font-weight: 700;
	padding: 0.25em 0 0;
}

.oncue-related-desc {
	display: block;
	font-size: 0.9em;
	color: var(--oncue-muted);
	padding: 0.25em 0 0;
}

.oncue-related-byline {
	display: block;
	font-size: 0.8em;
	color: var(--oncue-muted);
	/* Bottom space is the card's job now (see .oncue-related-card), so whichever
	   row is last — description or byline — clears the border by the same amount. */
	padding: 0.4em 0 0;
}

/* The card is an <a>, so a host theme that underlines content links would
   underline the whole card. Keep only the title decorated — the headline's link
   affordance — and force the meta rows (host, description, byline) clean.
   Boosted specificity + !important so the theme's link rule can't win. */
.oncue.oncue.oncue .oncue-related-card,
.oncue.oncue.oncue .oncue-related-tag,
.oncue.oncue.oncue .oncue-related-desc,
.oncue.oncue.oncue .oncue-related-byline {
	text-decoration: none !important;
}

.oncue.oncue.oncue .oncue-related-title {
	text-decoration: underline !important;
	text-decoration-thickness: 1px;
	text-underline-offset: 2px;
}

/* -------------------------------------------------------------- share --- */
.oncue-share {
	display: flex;
	align-items: center;
	gap: 0.15em;
	flex-wrap: wrap;
	margin-top: 0.6em;
}

/* Compact icon actions: permalink, embed, share. */
.oncue-tool {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 2em;
	height: 2em;
	padding: 0;
	border: 0;
	border-radius: 999px;
	background: transparent;
	color: var(--oncue-muted);
	text-decoration: none;
	cursor: pointer;
	-webkit-tap-highlight-color: transparent;
	transition: background-color 0.15s ease, color 0.15s ease;
}

.oncue-tool:hover,
.oncue-tool:focus-visible {
	background: var(--oncue-surface);
	color: inherit;
}

.oncue-tool.is-done {
	color: #16a34a;
}

.oncue-ic {
	width: 1.05em;
	height: 1.05em;
}

/* Reaction: a tool button that grows a tally beside its icon. Auto width (the
   others are round) so the count has somewhere to go, and enough left padding
   that the icon stays centred on its own at zero. */
.oncue-react {
	width: auto;
	min-width: 2em;
	gap: 0.3em;
	padding: 0 0.55em;
}

.oncue-react-count {
	font-size: 0.82em;
	font-variant-numeric: tabular-nums;
	line-height: 1;
}

/* Empty at zero — collapse the gap so the button reads as a plain icon. */
.oncue-react-count:empty {
	display: none;
}

.oncue-react.is-reacted {
	color: var(--oncue-accent);
}

.oncue-react.is-reacted .oncue-ic {
	fill: currentColor;
	fill-opacity: 0.15;
}

/* Press feedback on the icon only, so the count doesn't jitter as it changes. */
.oncue-react:active .oncue-ic {
	transform: scale(0.88);
}

.oncue-react .oncue-ic {
	transition: transform 0.15s ease, fill-opacity 0.15s ease;
}

.oncue-react.is-reacting {
	opacity: 0.7;
}

@media (prefers-reduced-motion: reduce) {
	.oncue-react .oncue-ic {
		transition: none;
	}

	.oncue-react:active .oncue-ic {
		transform: none;
	}
}

/* Share popover, anchored above the share button. */
.oncue-share-more {
	position: relative;
	display: inline-flex;
}

.oncue-share-menu {
	position: absolute;
	z-index: 20;
	bottom: calc(100% + 0.35em);
	left: 0;
	min-width: 11em;
	padding: 0.3em;
	border: 1px solid var(--oncue-border);
	border-radius: 10px;
	background: #fff;
	box-shadow: 0 6px 24px rgba(0, 0, 0, 0.12);
}

.oncue-share-item {
	display: flex;
	align-items: center;
	gap: 0.6em;
	width: 100%;
	box-sizing: border-box;
	padding: 0.5em 0.6em;
	border: 0;
	border-radius: 7px;
	background: transparent;
	color: inherit;
	font-size: 0.8em;
	text-align: left;
	text-decoration: none;
	cursor: pointer;
}

.oncue-share-item:hover,
.oncue-share-item:focus-visible {
	background: var(--oncue-surface);
}

.oncue-share-item svg {
	width: 1.15em;
	height: 1.15em;
	flex: 0 0 auto;
	color: var(--oncue-muted);
}

/* Text pill buttons (e.g. the embed panel's Copy code). */
.oncue-btn {
	font-size: 0.75em;
	padding: 0.3em 0.7em;
	border: 1px solid var(--oncue-border);
	border-radius: 999px;
	background: transparent;
	color: var(--oncue-muted);
	cursor: pointer;
}

.oncue-btn:hover {
	border-color: var(--oncue-muted);
	color: inherit;
}

/* Copyable embed snippet revealed by the Embed button. */
.oncue-embed-panel {
	margin-top: 0.5em;
	width: 100%;
}

.oncue-embed-panel textarea {
	width: 100%;
	min-height: 4.5em;
	font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
	font-size: 0.75em;
	line-height: 1.4;
	padding: 0.6em 0.7em;
	border: 1px solid var(--oncue-border);
	border-radius: 8px;
	background: var(--oncue-surface);
	color: inherit;
	resize: vertical;
	box-sizing: border-box;
}

.oncue-embed-panel-actions {
	display: flex;
	gap: 0.4em;
	margin-top: 0.4em;
}

/* Standalone single-entry embed document (served in an iframe). */
.oncue-embed-doc {
	max-width: 100%;
}

.oncue-embed-doc .oncue-entry {
	margin-left: 0;
	border-left: 0;
	border-bottom: 0;
	/* Full-bleed single entry in the embed iframe — no rail, no side gutters. */
	padding: 1.1em 0;
}

.oncue-embed-doc .oncue-entry::before,
.oncue-embed-doc .oncue-entry::after {
	display: none;
}

.oncue-embed-credit {
	display: inline-block;
	margin-top: 0.75em;
	font-size: 0.8em;
	color: var(--oncue-muted);
	text-decoration: none;
}

.oncue-embed-credit:hover {
	text-decoration: underline;
}

/* Persistent "Powered by OnCue" mark beneath the liveblog stream. */
.oncue-footer {
	margin-top: 1.25em;
	padding-top: 0.9em;
	border-top: 1px solid var(--oncue-border);
	text-align: center;
}

.oncue-credit {
	display: inline-flex;
	align-items: center;
	gap: 0.45em;
	font-size: 0.78em;
	line-height: 1;
	color: var(--oncue-muted);
	text-decoration: none;
	opacity: 0.85;
	transition: opacity 0.15s ease;
}

.oncue-credit:hover {
	opacity: 1;
}

/* 3:1 wordmark, sized by height so width tracks automatically. !important +
   .oncue scope so a host theme's `img { height: auto !important }` can't force
   the mark to its native 750px width and overflow the footer. */
.oncue.oncue.oncue img.oncue-credit__mark {
	width: auto !important;
	height: 1.35em !important;
	max-width: none !important;
	flex: none;
	display: block;
}

.oncue-credit__text {
	font-family: var(--oncue-mono);
	letter-spacing: 0.12em;
	text-transform: uppercase;
	font-size: 0.8em;
	font-weight: 600;
}

/* The wordmark ships black on transparent, matching the default light reader.
   Dark skins (set via the --oncue-* vars, not the OS) can invert it by adding
   `.oncue-reader--dark .oncue-credit__mark { filter: invert(1); }`. */

/* ------------------------------------------------------------- states --- */
.oncue.is-offline::after {
	content: "Reconnecting…";
	display: block;
	text-align: center;
	color: var(--oncue-muted);
	font-size: 0.85em;
	padding: 0.5em;
}

.oncue-empty {
	text-align: center;
	color: var(--oncue-muted);
	padding: 2em 0;
}

/* --------------------------------------------------------------- embeds --- */
.oncue-embed {
	margin: 0.75em 0;
}

.oncue-embed-frame {
	position: relative;
	width: 100%;
	aspect-ratio: 16 / 9;
	background: #000;
	border-radius: 8px;
	overflow: hidden;
}

.oncue-embed-frame iframe {
	position: absolute;
	inset: 0;
	width: 100% !important;
	height: 100% !important;
	border: 0;
}

.oncue-embed .twitter-tweet,
.oncue-embed .instagram-media {
	margin-left: auto !important;
	margin-right: auto !important;
}

/* No-JS / unresolved fallback: a tidy link chip. */
.oncue-embed:not(.is-resolved) > a {
	display: inline-block;
	max-width: 100%;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	padding: 8px 12px;
	border: 1px solid var(--oncue-border, #e2e4e7);
	border-radius: 8px;
	word-break: break-all;
}

/* --------------------------------------------------------- touch targets --- */
/* On touch devices, grow the compact icon actions and share items to the 44px
   minimum tap target (WCAG 2.5.5 / iOS HIG). Desktop keeps its denser sizing;
   the icon glyph itself is unchanged — only the hit area grows. */
@media (pointer: coarse) {
	.oncue-share {
		gap: 0.25em;
	}

	.oncue-tool {
		width: 44px;
		height: 44px;
	}

	/* The reaction button carries a tally, so it grows past the square minimum
	   rather than clipping it — 44px stays the floor, not the width. */
	.oncue-react {
		width: auto;
		min-width: 44px;
	}

	.oncue-share-item {
		padding: 0.7em 0.7em;
	}

	.oncue-cite a {
		min-width: 1.6em;
		padding: 0.2em 0.45em;
	}
}

/* -------------------------------------------------------------- polls --- */
/* A multiple-choice poll entry: the question, then either tappable choices or,
   once this reader has voted, a horizontal bar chart of the tallies. */
.oncue-poll {
	border: 1px solid var(--oncue-border);
	border-radius: var(--oncue-radius);
	background: var(--oncue-surface);
	padding: 0.85em 0.95em;
}

/* .oncue-entry-content-scoped so the poll's own type beats the reader's body
   -text rule (.oncue .oncue-entry-content p) — polls render inside the content. */
.oncue .oncue-entry-content p.oncue-poll-q {
	margin: 0 0 0.7em;
	font-size: 0.9375em;
	font-weight: 700;
	line-height: 1.35;
}

.oncue-poll-options {
	display: flex;
	flex-direction: column;
	gap: 0.5em;
}

/* Both states share one box — identical size, padding, border and radius — so
   voting swaps a choice for its result bar in place, with no layout jump. The
   only difference is what sits inside: a plain label before, a label + meter +
   percentage after. */
.oncue-poll-opt,
.oncue-poll-result {
	position: relative;
	display: flex;
	align-items: center;
	gap: 0.6em;
	/* Pin the box + type explicitly: a <button> (choice) and a <div> (result)
	   otherwise diverge on UA defaults — border-box vs content-box (the result
	   rows were spilling past the card) and a non-inherited button font-size (the
	   choices rendered smaller). Both now render identically. */
	box-sizing: border-box;
	width: 100%;
	min-height: 2.6em;
	padding: 0.5em 0.8em;
	text-align: left;
	color: inherit;
	font-family: inherit;
	font-size: 0.9375em;
	line-height: 1.35;
	background: var(--oncue-bg, #fff);
	border: 1px solid var(--oncue-border);
	border-radius: var(--oncue-radius);
	overflow: hidden;
}

/* Un-voted state: each choice is a tappable button. */
.oncue-poll-opt {
	cursor: pointer;
	transition: border-color 0.12s ease, background-color 0.12s ease;
}

.oncue-poll-opt:hover,
.oncue-poll-opt:focus-visible {
	border-color: var(--oncue-accent);
	background: color-mix( in srgb, var(--oncue-accent) 6%, transparent );
}

.oncue-poll.is-voting .oncue-poll-opt {
	opacity: 0.6;
	pointer-events: none;
}

/* Voted state: a labelled meter bar per option. The track is the row; the bar
   grows to the option's share of the vote. */
.oncue-poll-meter {
	position: absolute;
	inset: 0;
	z-index: 0;
}

.oncue-poll-bar {
	display: block;
	height: 100%;
	width: 0;
	background: color-mix( in srgb, var(--oncue-accent) 14%, transparent );
	transition: width 0.5s cubic-bezier( 0.22, 1, 0.36, 1 );
}

.oncue-poll-result.is-chosen {
	border-color: var(--oncue-accent);
}

.oncue-poll-result.is-chosen .oncue-poll-bar {
	background: color-mix( in srgb, var(--oncue-accent) 26%, transparent );
}

.oncue-poll-opt-text {
	position: relative;
	z-index: 1;
	flex: 1 1 auto;
}

.oncue-poll-result.is-chosen .oncue-poll-opt-text {
	font-weight: 600;
}

.oncue-poll-pct {
	position: relative;
	z-index: 1;
	flex: 0 0 auto;
	font-family: var(--oncue-mono);
	font-variant-numeric: tabular-nums;
	font-weight: 700;
}

.oncue .oncue-entry-content p.oncue-poll-total {
	margin: 0.7em 0 0;
	font-family: var(--oncue-mono);
	font-size: 0.72em;
	letter-spacing: 0.02em;
	color: var(--oncue-muted);
}

/* A poll whose live record couldn't be loaded: its stored question + choices,
   preserved as a static (non-votable) card so the feed never loses content. The
   choice rows reuse the live poll's choose-state box for visual consistency. */
.oncue .oncue-entry-content .oncue-poll--archived p {
	margin: 0 0 0.7em;
	font-size: 0.9375em;
	font-weight: 700;
	line-height: 1.35;
}

.oncue-poll--archived ul {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 0.5em;
}

.oncue .oncue-entry-content .oncue-poll--archived li {
	box-sizing: border-box;
	padding: 0.5em 0.8em;
	font-size: 0.9375em;
	line-height: 1.35;
	background: var(--oncue-bg, #fff);
	border: 1px solid var(--oncue-border);
	border-radius: var(--oncue-radius);
}

@media (prefers-reduced-motion: reduce) {
	.oncue-poll-bar {
		transition: none;
	}
}

/* ------------------------------------------------------- lightbox --- */
/* Tapping a photo in the stream opens it full-size. Built on <dialog> so the
   browser supplies the top layer, focus containment, and Escape-to-close for
   free — no focus-trap code and nothing that can be painted over by a host
   theme's z-index. Styles are scoped to .oncue-lightbox rather than .oncue
   because the dialog is appended to <body>, outside the reader's subtree. */
.oncue-lightbox {
	width: 100vw;
	max-width: 100vw;
	height: 100dvh;
	max-height: 100dvh;
	padding: 0;
	border: 0;
	background: rgba( 0, 0, 0, 0.92 );
	overscroll-behavior: contain;
}

.oncue-lightbox::backdrop {
	background: rgba( 0, 0, 0, 0.92 );
}

.oncue-lightbox-figure {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 0.75rem;
	width: 100%;
	height: 100%;
	margin: 0;
	padding: max( 1rem, env( safe-area-inset-top ) ) 1rem
		max( 1rem, env( safe-area-inset-bottom ) );
	box-sizing: border-box;
}

/* The whole point of the lightbox: show the image at its real proportions,
   bounded only by the viewport. No cropping, no forced box. */
.oncue-lightbox-figure img {
	max-width: 100%;
	max-height: 100%;
	width: auto;
	height: auto;
	object-fit: contain;
	border-radius: 2px;
}

.oncue-lightbox-caption {
	flex: none;
	max-width: 46rem;
	margin: 0;
	color: rgba( 255, 255, 255, 0.86 );
	font-family: var( --oncue-mono, ui-monospace, monospace );
	font-size: 0.78rem;
	line-height: 1.45;
	text-align: center;
}

.oncue-lightbox-close {
	position: absolute;
	top: max( 0.5rem, env( safe-area-inset-top ) );
	right: 0.5rem;
	/* 44px: the minimum comfortable touch target, which matters here because
	   the reader is used one-handed on a phone more than anywhere else. */
	width: 44px;
	height: 44px;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: rgba( 0, 0, 0, 0.55 );
	color: #fff;
	font-size: 1.5rem;
	line-height: 1;
	cursor: pointer;
}

.oncue-lightbox-close:hover,
.oncue-lightbox-close:focus-visible {
	background: rgba( 255, 255, 255, 0.22 );
}

/* Only advertise the affordance where a pointer can actually hover; on touch
   the cursor change is meaningless and the zoom hint just adds noise. */
@media ( hover: hover ) {
	.oncue.oncue.oncue .oncue-media img {
		cursor: zoom-in;
	}
}