/*
 * Skill Suites - Figure Lightbox styles.
 *
 * The overlay gets its own explicit surface colors (backdrop + card) instead of relying on the
 * page theme, so it looks the same whether the site is in a light or a dark reading mode. The
 * diagrams themselves were authored assuming a light background (see the per-source figure CSS
 * this project generates), so the card behind the SVG is always light, on purpose, even on a
 * dark page.
 */

.ss-lightbox-overlay {
	--ss-lb-backdrop: rgba(10, 13, 16, 0.94);
	--ss-lb-surface: #f4f6f7;
	--ss-lb-ink: #14212b;
	--ss-lb-muted: #c9d2d6;
	--ss-lb-control-bg: rgba(20, 24, 28, 0.72);
	--ss-lb-control-border: rgba(255, 255, 255, 0.55);
	--ss-lb-control-fg: #ffffff;
	--ss-lb-drag-fade: 1;

	position: fixed;
	inset: 0;
	z-index: 2147483000;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	background: var(--ss-lb-backdrop);
	opacity: 0;
	transition: opacity 200ms ease;
}

.ss-lightbox-overlay[hidden] {
	display: none;
}

.ss-lightbox-overlay.is-open {
	opacity: var(--ss-lb-drag-fade);
}

/* Close button: top right, a real <button>, readable over both a dark backdrop and the light
   figure card because its own background and border are explicit, not inherited. */
.ss-lightbox-close {
	position: absolute;
	top: max(14px, env(safe-area-inset-top, 0px));
	right: max(14px, env(safe-area-inset-right, 0px));
	z-index: 2;
	width: 44px;
	height: 44px;
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: 999px;
	border: 1px solid var(--ss-lb-control-border);
	background: var(--ss-lb-control-bg);
	color: var(--ss-lb-control-fg);
	cursor: pointer;
	padding: 0;
}

.ss-lightbox-close:hover {
	background: rgba(20, 24, 28, 0.9);
}

.ss-lightbox-close:focus-visible {
	outline: 2px solid #ffffff;
	outline-offset: 2px;
}

.ss-lightbox-close svg {
	width: 20px;
	height: 20px;
	display: block;
}

/* "3 of 9" counter, also the aria-live region announced on arrow-key navigation. */
.ss-lightbox-counter {
	position: absolute;
	top: max(14px, env(safe-area-inset-top, 0px));
	left: max(14px, env(safe-area-inset-right, 0px));
	z-index: 2;
	padding: 8px 12px;
	border-radius: 999px;
	border: 1px solid var(--ss-lb-control-border);
	background: var(--ss-lb-control-bg);
	color: var(--ss-lb-control-fg);
	font: 600 12px/1 system-ui, -apple-system, "Segoe UI", sans-serif;
	letter-spacing: 0.02em;
}

.ss-lightbox-counter[hidden] {
	display: none;
}

.ss-lightbox-stage {
	position: relative;
	width: 100%;
	height: 100%;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 64px 20px 40px;
	touch-action: none; /* our own pointer handlers own pinch, pan and swipe here */
	overflow: hidden;
}

.ss-lightbox-frame {
	max-width: min(96vw, 1400px);
	max-height: 100%;
	display: flex;
	flex-direction: column;
	align-items: center;
	will-change: transform;
	transform: translate3d(0, 0, 0) scale(1);
}

.ss-lightbox-frame--transition {
	transition: transform 220ms ease;
}

/* The moved-in <figure class="ss-figure ssfig-SOURCE"> keeps its classes (so the page's scoped
   .ssfig-SOURCE CSS keeps applying) but its site-default card chrome (background, border, page
   margin) is neutralised here, scoped only to when it is a descendant of our frame, so nothing
   about how it looks back in the article is touched. */
.ss-lightbox-frame .ss-figure {
	margin: 0;
	padding: 0;
	background: var(--ss-lb-surface);
	border: 1px solid rgba(20, 33, 43, 0.12);
	border-radius: 8px;
	overflow: visible;
	max-width: 100%;
	max-height: 100%;
	display: flex;
	flex-direction: column;
	align-items: stretch;
	padding: 16px 16px 12px;
	box-shadow: 0 18px 40px rgba(0, 0, 0, 0.35);
}

.ss-lightbox-frame .ss-figure svg {
	display: block;
	width: 100%;
	height: auto;
	max-height: 70vh;
	/* Graceful fallback for the rare inline SVG with neither a viewBox nor width/height: without
	   a floor here, an unsized SVG can collapse to a near-invisible box instead of just being
	   smaller than ideal. Every source SVG on this site currently has a viewBox, so in practice
	   this line only guards against a future export that forgets one. */
	min-height: 120px;
}

.ss-lightbox-frame .ss-cap {
	color: var(--ss-lb-ink);
	margin: 10px 2px 0;
	padding-top: 10px;
	border-top: 1px solid rgba(20, 33, 43, 0.12);
	font: 500 13px/1.5 system-ui, -apple-system, "Segoe UI", sans-serif;
}

/* Plain <img> secondary case: the frame holds a clone of the image plus a generated caption. */
.ss-lightbox-frame--image img {
	display: block;
	max-width: 100%;
	max-height: 74vh;
	width: auto;
	height: auto;
	border-radius: 6px;
	background: var(--ss-lb-surface);
}

.ss-lightbox-caption-generated {
	color: var(--ss-lb-muted);
	margin: 10px 2px 0;
	font: 500 13px/1.5 system-ui, -apple-system, "Segoe UI", sans-serif;
	text-align: center;
}

/* Trigger affordance on the article page itself (not inside the overlay). */
.ss-lightbox-trigger {
	cursor: zoom-in;
}

.ss-figure .ss-lightbox-trigger:focus-visible,
img.ss-lightbox-trigger:focus-visible {
	outline: 2px solid #0e6ba8;
	outline-offset: 3px;
}

/* Respect prefers-reduced-motion everywhere in the overlay: no fade, no eased pan/zoom snap. */
@media (prefers-reduced-motion: reduce) {
	.ss-lightbox-overlay,
	.ss-lightbox-frame,
	.ss-lightbox-frame--transition {
		transition: none !important;
	}
}