/* Hosted lab embed ([cybrlabs_hosted] shortcode).
   Both states share one look. Logged-in shows the live hosted card in an iframe;
   logged-out shows a matching card built here. The palette mirrors the hosted
   app (cream card #eeefe9, edge #d0d1c8, ink #151515, primary #3b82f6 /
   #1d4ed8) so the two states read as the same design. */

.cybrlabs-hosted {
	margin: 1.5rem 0;
}

/* Logged-in: the iframe is the live hosted card, already cream inside. Give it
   the same size and rounded edge so it matches the logged-out card. Fills the
   container's width; the shortcode's width attribute adds an inline max-width
   cap when one is wanted. */
.cybrlabs-hosted-frame {
	width: 100%;
	height: 500px;
	border: 1px solid #d0d1c8;
	border-radius: 10px;
	display: block;
	background: #eeefe9;
}

/* Loading state: a placeholder with the card's shape and shimmering bars where
   the title, chips, description, and button will appear. Shown while the launch
   link is minted and the iframe loads, then swapped out; sized like the iframe
   so the page doesn't jump. */
.cybrlabs-hosted-skeleton {
	box-sizing: border-box;
	position: relative;
	width: 100%;
	display: flex;
	flex-direction: column;
	gap: 18px;
	background: #eeefe9;
	border: 1px solid #d0d1c8;
	border-radius: 10px;
	padding: 32px;
}

/* Visible loading text, floating centered over the shimmer bars. Doubles as
   the announcement for screen readers via role="status". */
.cybrlabs-hosted-skeleton-label {
	position: absolute;
	left: 50%;
	top: 50%;
	transform: translate(-50%, -50%);
	background: #ffffff;
	border: 1px solid #d0d1c8;
	border-radius: 999px;
	padding: 9px 18px;
	font-family: ui-monospace, "Source Code Pro", Menlo, Consolas, monospace;
	font-size: 13px;
	line-height: 1;
	color: #404040;
	white-space: nowrap;
}

.cybrlabs-hosted-skeleton-line {
	display: block;
	border-radius: 6px;
	background: linear-gradient(90deg, #e2e3db 25%, #d6d7ce 37%, #e2e3db 63%);
	background-size: 400% 100%;
	animation: cybrlabs-hosted-shimmer 1.4s ease infinite;
}

.cybrlabs-hosted-skeleton-title {
	height: 30px;
	width: 45%;
}

.cybrlabs-hosted-skeleton-chips {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
}

.cybrlabs-hosted-skeleton-chip {
	height: 32px;
	width: 120px;
}

.cybrlabs-hosted-skeleton-text {
	height: 15px;
	width: 88%;
}

.cybrlabs-hosted-skeleton-text--short {
	width: 62%;
}

.cybrlabs-hosted-skeleton-button {
	height: 48px;
	width: 160px;
	margin-top: 6px;
}

/* Dark page: the JS tags the container and the embed URL carries theme=dark,
   so the card inside the iframe renders navy; the placeholder pieces here
   match it so nothing flashes cream first. Palette mirrors the hosted app
   (navy #151725, surface #1f2336). */
.cybrlabs-hosted--dark .cybrlabs-hosted-frame,
.cybrlabs-hosted--dark .cybrlabs-hosted-skeleton {
	background: #151725;
	border-color: rgba(255, 255, 255, 0.14);
}

.cybrlabs-hosted--dark .cybrlabs-hosted-skeleton-line {
	background: linear-gradient(90deg, #1f2336 25%, #2a2f49 37%, #1f2336 63%);
	background-size: 400% 100%;
}

.cybrlabs-hosted--dark .cybrlabs-hosted-skeleton-label {
	background: #1f2336;
	border-color: rgba(255, 255, 255, 0.14);
	color: #cbd5e1;
}

@keyframes cybrlabs-hosted-shimmer {
	0% {
		background-position: 100% 0;
	}
	100% {
		background-position: 0 0;
	}
}

@media (prefers-reduced-motion: reduce) {
	.cybrlabs-hosted-skeleton-line {
		animation: none;
	}
}

/* Status and error messages (mint failed, lab unavailable, rate limit
   countdown). Rendered as a card matching the embed's look so it reads as part
   of the same design and stays legible on light and dark pages alike; the
   Retry button lives inside it. */
.cybrlabs-hosted-status {
	box-sizing: border-box;
	background: #eeefe9;
	border: 1px solid #d0d1c8;
	border-radius: 10px;
	padding: 24px 28px;
	font-family: var(--font-inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif);
	font-size: 15px;
	line-height: 1.6;
	color: #151515;
}

.cybrlabs-hosted-status a {
	color: #1d4aff;
}

.cybrlabs-hosted--dark .cybrlabs-hosted-status {
	background: #151725;
	border-color: rgba(255, 255, 255, 0.14);
	color: #cbd5e1;
}

.cybrlabs-hosted--dark .cybrlabs-hosted-status a {
	color: #93c5fd;
}

/* Every status card (upgrade prompt, errors, rate-limit countdown) shows the
   Hands-On Lab chip above its message so the card still reads as a lab. The
   chip classes are shared with the logged-out card; only the status card gets
   dark treatment (the logged-out card stays cream on dark pages), so the dark
   chip colors are scoped here. */
.cybrlabs-hosted--dark .cybrlabs-hosted-status .cybrlabs-hosted-chip {
	background: #1f2336;
	border-color: rgba(255, 255, 255, 0.14);
	color: #cbd5e1;
}

.cybrlabs-hosted--dark .cybrlabs-hosted-status .cybrlabs-hosted-chip-icon {
	color: #93c5fd;
}

.cybrlabs-hosted-retry-row {
	margin-top: 14px;
}

/* Same shape as the launch button so the recovery action looks as real as the
   action it replaces. */
.cybrlabs-hosted-retry {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	border: 0;
	border-radius: 6px;
	padding: 10px 18px;
	font-size: 15px;
	font-weight: 700;
	color: #ffffff;
	background: #3b82f6;
	box-shadow: 0 3px 0 #1d4ed8;
	cursor: pointer;
}

.cybrlabs-hosted-retry:hover {
	transform: translateY(1px);
	box-shadow: 0 2px 0 #1d4ed8;
}

/* Logged-out: a card that matches the live hosted card. Fills the container's
   width, same as the iframe; the shortcode's width attribute adds an inline
   max-width cap when one is wanted. */
.cybrlabs-hosted-card {
	box-sizing: border-box;
	background: #eeefe9;
	color: #151515;
	padding: 32px;
	border: 1px solid #d0d1c8;
	border-radius: 10px;
	font-family: var(--font-inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif);
}

.cybrlabs-hosted-name {
	margin: 0 0 16px;
	font-size: 1.6rem;
	font-weight: 700;
	letter-spacing: -0.01em;
	line-height: 1.2;
	color: #151515;
}

.cybrlabs-hosted-chips {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin-bottom: 16px;
}

.cybrlabs-hosted-chip {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	border: 1px solid #d0d1c8;
	background: #ffffff;
	border-radius: 6px;
	padding: 7px 14px;
	font-family: ui-monospace, "Source Code Pro", Menlo, Consolas, monospace;
	font-size: 13px;
	line-height: 1;
	color: #404040;
}

/* Mirrors the icon color on the live card's chips. */
.cybrlabs-hosted-chip-icon {
	flex-shrink: 0;
	color: #1d4ed8;
}

/* The description sits below the launch actions, so it spaces itself with a
   top margin; hidden until the lab info fills it in. */
.cybrlabs-hosted-description {
	margin: 20px 0 0;
	font-size: 16px;
	line-height: 1.7;
	color: #404040;
}

.cybrlabs-hosted-actions {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 12px;
}

/* Same shape as the live card's Launch button; greyed out because a
   logged-out visitor cannot launch. */
.cybrlabs-hosted-launch {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	border: 0;
	border-radius: 6px;
	padding: 12px 20px;
	font-size: 16px;
	font-weight: 700;
	color: #ffffff;
	background: #3b82f6;
	box-shadow: 0 3px 0 #1d4ed8;
	cursor: pointer;
}

.cybrlabs-hosted-launch:disabled,
.cybrlabs-hosted-launch[disabled] {
	background: #c9cbc3;
	box-shadow: 0 3px 0 #a9aaa1;
	color: #6b6d66;
	cursor: not-allowed;
}

.cybrlabs-hosted-launch-icon {
	flex-shrink: 0;
}

.cybrlabs-hosted-login-note {
	margin: 0;
	font-size: 14px;
	color: #404040;
}

.cybrlabs-hosted-login-note a {
	color: #1d4aff;
}