/**
 * Calucon Third-Party Embed Gate placeholder panel.
 *
 * Every colour, radius and spacing resolves from a custom property with a
 * fallback (PLAN.md §7.3), so themes restyle without a specificity war.
 */

.cg-embed,
.cg-withdraw {
	--cg-bg: var( --wp--preset--color--base, #1b1b1b );
	--cg-fg: var( --wp--preset--color--contrast, #f0f0f0 );
	--cg-accent: var( --wp--preset--color--accent-8, #5c9e00 );
	/* Pairs with --cg-accent, NOT with the panel background: a theme that
	   defines base (light) but no accent-8 preset would otherwise paint
	   near-white text on the green fallback — ~3.1:1, a WCAG 1.4.3 failure.
	   #1b1b1b on #5c9e00 is 5.2:1; themes overriding --cg-accent set this too. */
	--cg-accent-fg: #1b1b1b;
	--cg-radius: 4px;
	--cg-gap: 0.75rem;
	--cg-font: inherit;

	box-sizing: border-box;
	background: var( --cg-bg );
	color: var( --cg-fg );
	border-radius: var( --cg-radius );
	font-family: var( --cg-font );
	overflow: auto; /* Last resort: contents scroll rather than clip (WCAG 1.4.10). */
}

/* Layout preservation where no reserved box exists (PLAN.md §5.3): occupy
   the space the embed would, or the page reflows on activation. The
   renderer sets --cg-aspect from the embed's own width/height.

   It is a MINIMUM, not a cage. A theme with roomy type needs more height
   for the notice, button and links than 9/16 of a phone's width, and a
   hard aspect-ratio box turned that into a scrollbar nobody notices — the
   privacy link sat below the fold of the panel itself. The ratio now lives
   on a spacer sharing one grid cell with the panel, so the box is the
   taller of the two and nothing is ever hidden. */
.cg-embed:not( .cg-embed--active ) {
	display: grid;
	/* One column, bounded to the container. A grid's default auto column
	   takes its MAX-CONTENT width, which stops the notice wrapping and
	   pushes the panel into a sideways scroll on a phone. */
	grid-template-columns: minmax( 0, 1fr );
}

.cg-embed:not( .cg-embed--active )::before {
	content: '';
	grid-area: 1 / 1;
	width: 100%;
	aspect-ratio: var( --cg-aspect, auto );
}

.cg-embed:not( .cg-embed--active ) > * {
	grid-area: 1 / 1;
	min-width: 0;
}

/* An SDK's own reserved box (Calendly's inline-widget div is empty with a
   fixed height) would otherwise leave a tall blank gap above the panel
   while gated. Only ever an EMPTY element directly before a panel — a
   companion carrying real fallback content, like a tweet's blockquote, has
   children and is untouched. It returns the moment the panel activates,
   because the SDK renders into it. */
:empty:has( + .cg-embed:not( .cg-embed--active ) ) {
	display: none;
}

/* The core block-theme trap (PLAN.md §5.3), which comes in two eras:

   Legacy core reserves the wp-has-aspect-ratio box with an empty ::before
   padding spacer and lifts the iframe out of flow on top of it — an in-flow
   panel would render under a large empty rectangle. Modern core (measured
   on 6.8) ships no spacer and reserves height on the *iframe itself*,
   which is exactly the element the gate removes — a panel positioned
   absolutely into "the reserved box" collapses to 0px and is invisible.

   So: the panel stays in flow and reserves its own space via --cg-aspect,
   and where a legacy spacer exists it is suppressed while gated so the box
   does not double in height. After activation the selector stops matching,
   the legacy spacer returns, and core's own iframe rules take over. */
.wp-has-aspect-ratio .wp-block-embed__wrapper {
	position: relative;
}

.wp-has-aspect-ratio .wp-block-embed__wrapper:has( > .cg-embed:not( .cg-embed--active ) )::before {
	content: none;
}

.cg-embed__panel {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: var( --cg-gap );
	padding: var( --cg-gap );
}

/* Owner-supplied poster image (PLAN.md §5.4, media-library variant): the
   image and the panel share one grid cell, panel painted on top. The image
   is always site-origin — the integration layer refuses anything else. */
.cg-embed--poster:not( .cg-embed--active ) {
	display: grid;
	/* One cell bounded to the container: an auto-sized row would take the
	   image's intrinsic scaled height, which never quite equals the
	   aspect-ratio box above — and overflow: auto turns that stray pixel
	   (or a poster with a different ratio) into a dead scrollbar. */
	grid-template-rows: minmax( 0, 1fr );
	grid-template-columns: minmax( 0, 1fr );
}

.cg-embed--poster:not( .cg-embed--active ) > * {
	grid-area: 1 / 1;
}

.cg-embed__poster {
	display: block;
	width: 100%;
	height: 100%;
	min-width: 0;
	min-height: 0;
	object-fit: cover;
	border-radius: var( --cg-radius );
}

/* Over an image the panel must paint its own solid background — text
   contrast is measured against the panel's background (WCAG 1.4.3), and
   an image underneath makes "the page's background" unknowable. This also
   deliberately overrides the minimal preset's transparent container. */
.cg-embed--poster:not( .cg-embed--active ) .cg-embed__panel {
	align-self: end;
	justify-self: start;
	margin: var( --cg-gap );
	max-width: calc( 100% - 2 * var( --cg-gap ) );
	background: var( --cg-bg );
	border-radius: var( --cg-radius );
}

/* Safety net: gate.js removes the poster on activation; if a theme's own
   script re-inserts children, the image must still never sit on top of the
   playing embed. */
.cg-embed--active .cg-embed__poster {
	display: none;
}

.cg-embed__note {
	margin: 0;
	font-size: 0.9375em;
	line-height: 1.5;
}

/* A <button> does not inherit typography — the UA stylesheet substitutes the
   system UI font. Inherit explicitly or the control looks bolted-on
   (PLAN.md §7.3). */
.cg-embed__button {
	font-family: inherit;
	font-weight: inherit;
	letter-spacing: inherit;
	font-size: 1em;
	min-width: 24px;
	min-height: 24px; /* WCAG 2.5.8 hit-area floor. */
	padding: 0.5em 1em;
	border: 1px solid var( --cg-accent );
	border-radius: var( --cg-radius );
	background: var( --cg-accent );
	color: var( --cg-accent-fg );
	cursor: pointer;
}

.cg-embed__button:focus-visible {
	outline: 2px solid var( --cg-fg );
	outline-offset: 2px;
}

.cg-embed__fallback,
.cg-embed__privacy {
	margin: 0;
	font-size: 0.875em;
}

/* The panel paints its own background, so the link colour must not be left
   to the browser default (#0000EE on a dark panel is 1.3:1 — a WCAG 1.4.3
   failure, PLAN.md §7.3). Underline stays: affordance not by colour alone. */
.cg-embed__fallback a,
.cg-embed__privacy a {
	color: var( --cg-fg );
	text-decoration: underline;
}

/* Loading announcement (PLAN.md §8): polite, visible, quiet. Inherits
   --cg-fg so contrast holds on the panel's own background. */
.cg-embed__status {
	display: block;
	padding: 0 var( --cg-gap );
	font-size: 0.875em;
	color: var( --cg-fg );
}

.cg-embed__status:empty {
	display: none;
}

/* Error announcement (PLAN.md §8): role="alert" with a route to the
   fallback. Colours stay on the panel's own tokens — a red on an unknown
   theme background is a contrast gamble; the alert role and the text do
   the signalling, not colour alone (WCAG 1.4.1). */
.cg-embed__error {
	margin: 0;
	padding: var( --cg-gap );
	font-size: 0.9375em;
	color: var( --cg-fg );
}

.cg-embed__error a {
	color: var( --cg-fg );
	text-decoration: underline;
}

.cg-embed--active {
	background: transparent;
	overflow: visible;
	aspect-ratio: auto; /* Core's own embed rules size the real iframe. */
}

/* An active container may still announce loading/errors: keep those
   readable while the background is transparent by falling back to the
   page's own colours. */
.cg-embed--active .cg-embed__status,
.cg-embed--active .cg-embed__error {
	color: inherit;
}

.cg-embed--active:focus {
	outline: none;
}

.cg-embed--active iframe {
	display: block;
	max-width: 100%;
	border: 0;
}

@media ( prefers-reduced-motion: no-preference ) {
	.cg-embed__button {
		transition: filter 120ms ease;
	}

	.cg-embed__button:hover {
		filter: brightness( 1.1 );
	}
}

/* The withdrawal control (§6.2 shortcode/block). It shares the panel's
   tokens (the token block above includes .cg-withdraw), so every colour,
   radius and appearance setting restyles it in step with the panels. It
   sits on the PAGE background, not the panel's: the filled default is
   self-contained (accent on accent-fg), and the outline/link variants
   inherit the page's own text colour. */
.cg-withdraw {
	font-family: inherit;
	font-weight: inherit;
	letter-spacing: inherit;
	font-size: 1em;
	min-width: 24px;
	min-height: 24px; /* WCAG 2.5.8 hit-area floor, same as the load button. */
	padding: 0.5em 1em;
	border: 1px solid var( --cg-accent );
	border-radius: var( --cg-radius );
	background: var( --cg-accent );
	color: var( --cg-accent-fg );
	cursor: pointer;
}

.cg-withdraw:focus-visible {
	outline: 2px solid currentColor;
	outline-offset: 2px;
}

.cg-withdraw--outline {
	background: transparent;
	color: inherit;
}

.cg-withdraw--link {
	background: none;
	border: none;
	padding: 0;
	color: inherit;
	text-decoration: underline;
}

.cg-withdraw__status {
	margin-inline-start: 0.5em; /* Logical: follows RTL. */
}

/* Windows High Contrast / forced colours: the system palette replaces
   ours, so rely on borders (which forced-colors keeps) rather than fills
   to keep the panel, the buttons and the glyph distinguishable. */
@media ( forced-colors: active ) {
	.cg-embed,
	.cg-withdraw {
		border: 1px solid CanvasText;
	}

	.cg-embed__button,
	.cg-withdraw {
		border: 1px solid ButtonText;
	}

	.cg-embed__button::before {
		background: ButtonText;
	}

	.cg-embed__button:focus-visible,
	.cg-withdraw:focus-visible {
		outline: 2px solid Highlight;
	}
}

/* The withdrawal control's wrapper. Block-level so a block theme's
   constrained-layout rule (max-width + margin-inline:auto on the content
   wrapper's children) can place it: applied to the bare inline-level
   <button> those auto margins do nothing, and the control ends up against
   the left edge of the full-width wrapper instead of lining up with the
   text around it. The button itself keeps its intrinsic width. */
.cg-withdraw-block {
	display: block;
}

/* A silent companion loader (PLAN.md §3.5): a script that accompanies an
   iframe of the same provider is gated without a panel of its own. Never
   painted, whatever a theme does to .cg-embed. */
.cg-embed--silent {
	display: none !important;
}