/**
 * DataTracks Portal Embed - front-end styles.
 *
 * Only the wrapper is styled. Everything inside the frame is a separate document
 * on its own origin, so the portal's own stylesheets (MUI, Ant Design, Handsontable,
 * rc-dock) cannot reach out into the theme and the theme cannot reach in.
 */

.dtpe-embed {
	position: relative;
	width: 100%;
	margin: 0 0 1.5em;
	background: #fff;
	border: 1px solid rgba(0, 0, 0, 0.08);
	border-radius: 8px;
	overflow: hidden;
	box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06);
}

.dtpe-embed__frame {
	display: block;
	width: 100%;
	/* Height comes from the shortcode as an inline custom property on the wrapper.
	   The fallback matters: if the inline style is ever stripped (some caching or
	   sanitising plugins remove style attributes), an unsized iframe collapses to
	   the HTML default of 150px and looks broken rather than merely mis-sized. */
	height: var(--dtpe-height, 820px);
	min-height: 420px;
	border: 0;
	color-scheme: light;
}

/* The portal is a desktop-first application; below the WordPress tablet breakpoint
   give it a little more vertical room so its own layout has somewhere to go. */
@media screen and (max-width: 782px) {
	.dtpe-embed {
		border-radius: 6px;
	}

	.dtpe-embed__frame {
		min-height: 560px;
	}
}

/* Editor-only notice - never shown to visitors (see the capability check in PHP). */
.dtpe-error {
	padding: 12px 16px;
	border-left: 4px solid #d63638;
	background: #fcf0f1;
	color: #1d2327;
}