/* CF-REF: strand-migration-interrogation.md [4] */
/*
  Strand Lab Page - Site-Specific Layout Only
  All visual styling comes from Strand UI component classes.
  This file contains ONLY page-level layout that no consumer would need.
*/

/* ═══ PAGE SECTIONS (layout spacing) ═══ */

.strand-hero {
	padding-block: clamp(6rem, 12vw, 10rem);
}

.strand-install {
	padding-block: var(--strand-space-12);
}

.strand-features {
	padding-block: clamp(4rem, 8vw, 8rem);
}

.strand-intents {
	padding-block: clamp(4rem, 8vw, 8rem);
}

.strand-setup {
	padding-block: clamp(4rem, 8vw, 8rem);
}

.strand-docs {
	padding-block: clamp(4rem, 8vw, 8rem);
	background: var(--strand-surface-elevated);
	border-top: 1px solid var(--strand-gray-200);
}

.strand-cta {
	padding-block: clamp(4rem, 8vw, 8rem);
	border-top: 1px solid var(--strand-gray-200);
}

.strand-footer {
	padding-block: var(--strand-space-12);
	border-top: 1px solid var(--strand-gray-200);
}

/* ═══ GRIDS (page-specific column layouts) ═══ */

.strand-feature-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
	gap: var(--strand-space-8);
}

.strand-intent-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
	gap: var(--strand-space-8);
	margin-top: var(--strand-space-8);
	align-items: stretch;
}

.strand-intent-grid > .strand-intent {
	display: flex;
	flex-direction: column;
}

.strand-setup-steps {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
	gap: var(--strand-space-8);
	margin-top: var(--strand-space-8);
}

/* ═══ PATTERNS BENTO (spotlight composition) ═══
   The "What are you building?" section. A bento spotlight where
   one primary pattern (the sign-up form) dominates, and four
   support tiles (alerts, navigation, live metrics, content card)
   vary in size around it. Per Principle 2 (Biosynthetic Restraint)
   a composition has exactly one primary element; on desktop the
   primary tile area is roughly 2.4x the largest support tile, and
   the support tiles themselves vary in span (alerts/nav share the
   primary's vertical register with generous half-width rows,
   metrics takes a compact bottom-left cell, and content stretches
   wide across the bottom) so the arrangement reads as a curated
   composition rather than a uniform grid.

   Mobile (<=768px): single column stack in priority order so that
   navigation and live metrics never share a two-column row on a
   narrow screen.
   Desktop (>=769px): asymmetric 8-col bento where every tile has
   enough horizontal room for its full composition:
     ┌────────────────┬────────────────┐
     │                │     alerts     │
     │   primary      ├────────────────┤
     │   (tall)       │      nav       │
     ├────────┬───────┴────────────────┤
     │ metrics│         content        │
     └────────┴─────────────────────────┘
   Primary occupies rows 1-2 x cols 1-4. Alerts takes row 1 x
   cols 5-8. Nav takes row 2 x cols 5-8. Metrics takes row 3 x
   cols 1-3 (the compact outlier). Content takes row 3 x cols
   4-8 (the wide bottom band). */

.strand-lab-patterns-bento {
	display: grid;
	grid-template-columns: 1fr;
	gap: clamp(var(--strand-space-6), 2vw, var(--strand-space-10));
	margin-top: clamp(var(--strand-space-10), 4vw, var(--strand-space-16));
	align-items: stretch;
}

.strand-lab-pattern {
	display: flex;
	flex-direction: column;
	gap: var(--strand-space-5);
	/* Pattern cards must clip any overflowing showcase children
	   so a too-wide preview never bleeds into the page gutter on
	   narrow viewports. The internal showcases use min-width: 0
	   below so they shrink first; this is the safety net. */
	min-width: 0;
	overflow: hidden;
}

.strand-lab-pattern__showcase {
	flex: 1;
	display: flex;
	align-items: stretch;
	justify-content: stretch;
	min-height: 160px;
	/* min-width: 0 lets the showcase shrink below its intrinsic
	   content width when the pattern card is narrower than the
	   showcase children prefer (e.g. a strand-toast with its
	   default 280px min-width). Without this, the showcase keeps
	   its content width and the card overflows. */
	min-width: 0;
}

.strand-lab-pattern__showcase > .strand-viewport {
	flex: 1;
	display: flex;
	align-items: center;
	justify-content: center;
	min-width: 0;
}

.strand-lab-pattern__caption {
	display: flex;
	align-items: center;
	gap: var(--strand-space-2);
}

.strand-lab-pattern__composition {
	font-family: var(--strand-font-mono);
	font-size: var(--strand-text-xs);
	letter-spacing: var(--strand-tracking-wide);
	color: var(--strand-gray-500);
}

.strand-lab-pattern--primary .strand-lab-pattern__showcase {
	min-height: 260px;
}

/* ── Nested card inside the Content pattern tile ──
   The content tile's showcase contains a real strand-card so
   developers can read the composition "card wraps a stack with a
   tag" at a glance. The inner card sits on the recessed viewport
   surface, matching how a real content card would appear inside
   an application chrome. */
.strand-lab-pattern__inner-card {
	max-width: 280px;
}

.strand-lab-pattern__card-title {
	font-family: var(--strand-font-sans);
	font-size: var(--strand-text-sm);
	font-weight: var(--strand-weight-semibold);
	color: var(--strand-gray-900);
}

.strand-lab-pattern__card-body {
	margin: 0;
	font-family: var(--strand-font-sans);
	font-size: var(--strand-text-xs);
	line-height: var(--strand-leading-relaxed);
	color: var(--strand-gray-500);
}

@media (min-width: 769px) {
	.strand-lab-patterns-bento {
		grid-template-columns: repeat(8, 1fr);
		grid-template-rows: minmax(220px, auto) minmax(220px, auto) minmax(160px, auto);
		grid-template-areas:
			"primary primary primary primary alerts  alerts  alerts  alerts"
			"primary primary primary primary nav     nav     nav     nav"
			"metrics metrics metrics content content content content content";
	}
	.strand-lab-pattern--primary {
		grid-area: primary;
	}
	.strand-lab-pattern--alerts {
		grid-area: alerts;
	}
	.strand-lab-pattern--nav {
		grid-area: nav;
	}
	.strand-lab-pattern--metrics {
		grid-area: metrics;
	}
	.strand-lab-pattern--content {
		grid-area: content;
	}
	/* Primary spans two rows so its showcase is vertically tall and
	   naturally accommodates the full FormField + Input x 2 + Button
	   composition without a runaway height. */
	.strand-lab-pattern--primary .strand-lab-pattern__showcase {
		min-height: 480px;
	}
	.strand-lab-pattern--alerts .strand-lab-pattern__showcase,
	.strand-lab-pattern--nav .strand-lab-pattern__showcase {
		min-height: 160px;
	}
	.strand-lab-pattern--metrics .strand-lab-pattern__showcase {
		min-height: 120px;
	}
	.strand-lab-pattern--content .strand-lab-pattern__showcase {
		min-height: 120px;
	}
	/* Content tile stretches wide; center the nested card inside. */
	.strand-lab-pattern--content .strand-lab-pattern__inner-card {
		max-width: 440px;
	}
}

/* ═══ HERO ACTIONS ═══ */

.strand-actions {
	display: flex;
	gap: var(--strand-space-4);
	justify-content: center;
	flex-wrap: wrap;
}

/* ═══ INTENT PREVIEW ═══ */

.strand-intent-preview {
	background: var(--strand-surface-recessed);
	box-shadow: var(--strand-shadow-inset);
	border-radius: var(--strand-radius-md);
	padding: var(--strand-space-6);
	margin-bottom: var(--strand-space-4);
	min-height: 80px;
	display: flex;
	align-items: center;
}

.strand-intent-code {
	display: block;
	font-family: var(--strand-font-mono);
	font-size: var(--strand-text-xs);
	color: var(--strand-gray-500);
}

/* ═══ INTENT LABELS ═══ */

.strand-intent-label {
	display: block;
	font-family: var(--strand-font-mono);
	font-size: var(--strand-text-xs);
	letter-spacing: var(--strand-tracking-wider);
	text-transform: uppercase;
	color: var(--strand-gray-500);
	margin-bottom: var(--strand-space-4);
}

/* ═══ PATH CODE ═══ */

.strand-path-code {
	display: block;
	font-family: var(--strand-font-mono);
	font-size: var(--strand-text-xs);
	color: var(--strand-blue-primary);
	background: var(--strand-surface-recessed);
	padding: var(--strand-space-2) var(--strand-space-3);
	border-radius: var(--strand-radius-sm);
	overflow-x: auto;
}

/* ═══ SETUP STEPS ═══ */

.strand-setup-step {
	background: var(--strand-surface-elevated);
	border: 1px solid var(--strand-border-subtle);
	border-radius: var(--strand-radius-lg);
	padding: var(--strand-space-6);
	box-shadow: var(--strand-elevation-1);
}

/* ═══ SETUP STEP NUMBER ═══ */

.strand-setup-step-num {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: var(--strand-space-8);
	height: var(--strand-space-8);
	border-radius: var(--strand-radius-full);
	background: var(--strand-blue-glow);
	color: var(--strand-blue-primary);
	font-family: var(--strand-font-mono);
	font-size: var(--strand-text-sm);
	font-weight: var(--strand-weight-semibold);
	margin-bottom: var(--strand-space-3);
}

/* ═══ SETUP FRAMEWORK NOTES ═══ */

.strand-setup-note-block {
	text-align: center;
}

.strand-setup-framework {
	font-size: var(--strand-text-sm);
	color: var(--strand-gray-500);
	margin-bottom: var(--strand-space-2);
	line-height: var(--strand-leading-relaxed);
}

.strand-setup-framework strong {
	color: var(--strand-gray-700);
}

.strand-setup-framework a {
	color: var(--strand-blue-primary);
	text-decoration: none;
}

.strand-setup-framework a:hover {
	color: var(--strand-blue-vivid);
}

.strand-setup-step-title {
	font-size: var(--strand-text-lg);
	font-weight: var(--strand-weight-medium);
	color: var(--strand-gray-800);
	margin-bottom: var(--strand-space-3);
}

.strand-setup-code {
	font-family: var(--strand-font-mono);
	font-size: var(--strand-text-xs);
	color: var(--strand-blue-midnight);
	background: var(--strand-surface-recessed);
	padding: var(--strand-space-3) var(--strand-space-4);
	border-radius: var(--strand-radius-md);
	overflow-x: auto;
	display: block;
	line-height: 1.7;
	white-space: pre;
	margin: 0;
}

.strand-setup-note {
	font-size: var(--strand-text-xs);
	color: var(--strand-gray-400);
	margin-top: var(--strand-space-2);
}

/* ═══ COMPONENT DOC CARDS ═══ */

.strand-docs-cat {
	margin-top: var(--strand-space-12);
	margin-bottom: var(--strand-space-6);
	padding-bottom: var(--strand-space-2);
	border-bottom: 1px solid var(--strand-gray-200);
}

.strand-docs-cat:first-of-type {
	margin-top: var(--strand-space-8);
}

.strand-doc {
	background: var(--strand-surface-primary);
	border: 1px solid var(--strand-border-subtle);
	border-radius: var(--strand-radius-lg);
	padding: var(--strand-space-8);
	margin-bottom: var(--strand-space-8);
}

.strand-doc-header {
	margin-bottom: var(--strand-space-4);
}

.strand-doc-name {
	font-family: var(--strand-font-mono);
	font-size: var(--strand-text-base);
	font-weight: var(--strand-weight-semibold);
	color: var(--strand-blue-midnight);
	margin: 0 0 var(--strand-space-1);
}

.strand-doc-desc {
	font-size: var(--strand-text-sm);
	color: var(--strand-gray-500);
	line-height: var(--strand-leading-relaxed);
	margin: 0;
}

.strand-doc-preview {
	background: var(--strand-surface-recessed);
	box-shadow: var(--strand-shadow-inset);
	border-radius: var(--strand-radius-lg);
	padding: var(--strand-space-8);
	margin-bottom: var(--strand-space-6);
	display: flex;
	align-items: center;
	gap: var(--strand-space-4);
	flex-wrap: wrap;
	overflow: hidden;
}

.strand-doc-states {
	display: flex;
	gap: var(--strand-space-8);
	flex-wrap: wrap;
	margin-bottom: var(--strand-space-6);
	padding: var(--strand-space-6);
	background: var(--strand-surface-recessed);
	box-shadow: var(--strand-shadow-inset);
	border-radius: var(--strand-radius-lg);
}

.strand-doc-state-label {
	font-family: var(--strand-font-mono);
	font-size: var(--strand-text-xs);
	letter-spacing: var(--strand-tracking-wider);
	text-transform: uppercase;
	color: var(--strand-gray-500);
}

.strand-doc-snippet {
	font-family: var(--strand-font-mono);
	font-size: var(--strand-text-xs);
	color: var(--strand-blue-midnight);
	background: var(--strand-surface-recessed);
	padding: var(--strand-space-3) var(--strand-space-4);
	border-radius: var(--strand-radius-md);
	overflow-x: auto;
	margin-top: var(--strand-space-5);
	white-space: pre;
	line-height: 1.6;
}

.strand-doc-snippet code {
	font-family: inherit;
	font-size: inherit;
}

.strand-doc-state {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: var(--strand-space-2);
}

.strand-doc-props {
	width: 100%;
	border-collapse: collapse;
	font-size: var(--strand-text-xs);
	margin-bottom: var(--strand-space-3);
}

.strand-doc-props th {
	text-align: left;
	padding: var(--strand-space-3);
	border-bottom: 1px solid var(--strand-gray-200);
}

.strand-doc-props td {
	padding: var(--strand-space-3);
	color: var(--strand-gray-600);
	border-bottom: 1px solid var(--strand-border-subtle);
	font-size: var(--strand-text-sm);
	vertical-align: top;
	line-height: var(--strand-leading-relaxed);
}

.strand-doc-props td code {
	font-family: var(--strand-font-mono);
	font-size: inherit;
	color: var(--strand-blue-deep);
}

/* ═══ CTA ═══ */

.strand-cta-heading {
	font-size: clamp(1.5rem, 3vw + 0.5rem, 2.5rem);
	font-weight: var(--strand-weight-light);
	letter-spacing: var(--strand-tracking-tighter);
	color: var(--strand-blue-midnight);
	margin-bottom: var(--strand-space-4);
}

.strand-cta-desc {
	font-size: var(--strand-text-base);
	color: var(--strand-gray-500);
	max-width: 50ch;
	margin: 0 auto var(--strand-space-8);
	line-height: var(--strand-leading-relaxed);
}

.strand-cta-actions {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: var(--strand-space-4);
}

.strand-cta-link {
	font-size: var(--strand-text-sm);
	color: var(--strand-blue-primary);
	text-decoration: none;
	transition: color var(--strand-duration-fast) var(--strand-ease-out-quart);
	display: inline-flex;
	align-items: center;
	min-height: var(--strand-touch-target);
	padding-block: var(--strand-space-2);
}

.strand-cta-link:hover {
	color: var(--strand-blue-vivid);
}

/* ═══ FOOTER ═══ */

.strand-footer-link {
	font-family: var(--strand-font-mono);
	font-size: var(--strand-text-xs);
	letter-spacing: var(--strand-tracking-wider);
	color: var(--strand-gray-400);
	text-decoration: none;
	transition: color var(--strand-duration-fast) ease;
}

.strand-footer-link:hover {
	color: var(--strand-blue-primary);
}

/* ═══ INSTALL TABS (CSS-only, page-specific interaction) ═══
   Framework picker for the strand install snippet. Pure CSS
   radio-button tab pattern with no JS required. The :has() rules
   are tied to specific #fw-* radio IDs which is why this lives
   at the consumer level rather than in strand-ui. Five frameworks:
   react/preact, vue, svelte, css-only, bulma. */

.strand-install-tabs {
	text-align: center;
}

.strand-install-tabs input[type="radio"] {
	position: absolute;
	opacity: 0;
	pointer-events: none;
}

.strand-install-tabs label {
	font-family: var(--strand-font-mono);
	font-size: var(--strand-text-xs);
	font-weight: var(--strand-weight-medium);
	letter-spacing: var(--strand-tracking-widest);
	text-transform: uppercase;
	color: var(--strand-gray-600);
	padding: var(--strand-space-2) var(--strand-space-4);
	cursor: pointer;
	border-bottom: 2px solid transparent;
	transition: color var(--strand-duration-fast) ease, border-color var(--strand-duration-fast) ease;
	min-height: var(--strand-touch-target);
	display: inline-flex;
	align-items: center;
}

.strand-install-tabs label:hover {
	color: var(--strand-blue-primary);
}

.strand-install-tabs:has(#fw-react:checked) label[for="fw-react"],
.strand-install-tabs:has(#fw-vue:checked) label[for="fw-vue"],
.strand-install-tabs:has(#fw-svelte:checked) label[for="fw-svelte"],
.strand-install-tabs:has(#fw-css:checked) label[for="fw-css"],
.strand-install-tabs:has(#fw-bulma:checked) label[for="fw-bulma"] {
	color: var(--strand-blue-primary);
	border-bottom-color: var(--strand-blue-primary);
}

.strand-install-tabs input[type="radio"]:focus-visible + label {
	outline: 2px solid var(--strand-blue-primary);
	outline-offset: 2px;
}

.strand-install-panel {
	display: none;
	margin-top: var(--strand-space-4);
}

.strand-install-tabs:has(#fw-react:checked) .strand-install-panel[data-fw="react"],
.strand-install-tabs:has(#fw-vue:checked) .strand-install-panel[data-fw="vue"],
.strand-install-tabs:has(#fw-svelte:checked) .strand-install-panel[data-fw="svelte"],
.strand-install-tabs:has(#fw-css:checked) .strand-install-panel[data-fw="css"],
.strand-install-tabs:has(#fw-bulma:checked) .strand-install-panel[data-fw="bulma"] {
	display: block;
}

@media (prefers-reduced-motion: reduce) {
	.strand-install-tabs label {
		transition: none;
	}
}

/* ═══ INSTALL HINT (below the framework picker) ═══
   Centered subtle hint with inline mono code and link.
   Page-specific because no other surface composes a
   "framework picker hint" of this exact shape. */

.strand-install-hint {
	text-align: center;
	font-size: var(--strand-text-xs);
	color: var(--strand-gray-400);
	margin-top: var(--strand-space-6);
	line-height: var(--strand-leading-relaxed);
}

.strand-install-hint code {
	font-family: var(--strand-font-mono);
	font-size: inherit;
}

.strand-install-hint a {
	color: var(--strand-blue-primary);
	text-decoration: none;
}

.strand-install-hint a:hover {
	color: var(--strand-blue-vivid);
}

/* ═══ LABELED SHOWCASE PANEL ═══
   A single recessed instrument panel that holds multiple labeled
   sub-sections (e.g. Variants / Size / State). Replaces the older
   pattern of stacking two separate .strand-viewport blocks, which
   read visually as "two rectangles cut from one" and looked rushed.
   Used on the Button doc card; other component cards with a single
   sub-section continue to use strand-viewport--flex directly. */

.strand-lab-showcase-panel {
	gap: var(--strand-space-6);
}

.strand-lab-showcase-row {
	display: grid;
	grid-template-columns: minmax(6ch, auto) 1fr;
	align-items: center;
	gap: var(--strand-space-6);
}

.strand-lab-showcase-row__label {
	justify-self: start;
}

.strand-lab-showcase-row__body {
	display: flex;
	align-items: center;
	gap: var(--strand-space-4);
	flex-wrap: wrap;
	min-width: 0;
}

@media (max-width: 620px) {
	.strand-lab-showcase-row {
		grid-template-columns: 1fr;
		gap: var(--strand-space-3);
	}
}

/* ═══ SHOWCASE INPUT ROWS ═══
   Component reference rows are flex containers where each
   input variant shares space and wraps gracefully. The min-
   width tier prevents inputs from collapsing too narrow to
   read placeholder text. */

.strand-lab-input-row {
	flex: 1;
	min-width: 200px;
}

.strand-lab-input-row--wide {
	flex: 1;
	min-width: 250px;
}

/* ═══ SHOWCASE CARD VARIANT TILES ═══
   Card showcase row uses smaller min-width tiles. */

.strand-lab-card-tile {
	flex: 1;
	min-width: 140px;
}

.strand-lab-card-tile__label {
	font-size: var(--strand-text-sm);
	color: var(--strand-gray-600);
}

.strand-lab-card-tile__hint {
	font-size: var(--strand-text-xs);
	color: var(--strand-gray-400);
}

/* ═══ FEATURE UPDATE CARD COPY ═══
   Used inside the "Content layout" intent showcase. */

.strand-lab-feature-card__title {
	font-weight: var(--strand-weight-medium);
	color: var(--strand-gray-800);
}

.strand-lab-feature-card__desc {
	font-size: var(--strand-text-sm);
	color: var(--strand-gray-500);
}

/* ═══ AVATAR WASH (showcase) ═══
   Wash-tinted avatar variant for the Avatar reference card.
   Page-local because it is purely cosmetic differentiation
   for showcase legibility, not a generally useful avatar
   color theme that other consumers would compose. */

.strand-lab-avatar-wash {
	background: var(--strand-blue-wash);
}

.strand-lab-avatar-wash .strand-avatar__initials {
	color: var(--strand-blue-deep);
}

/* ═══ TABLE CELL TAG (mini) ═══
   Table cells embed Tag components but at a slightly smaller
   font for visual rhythm with the data row. */

.strand-lab-tag-mini {
	font-size: var(--strand-text-xs);
}

/* ═══ STACK SHOWCASE (color block sub-stacks) ═══
   The Stack reference card embeds two nested stacks of
   colored squares to demonstrate horizontal vs vertical. */

.strand-lab-stack-demo {
	padding: var(--strand-space-3);
	background: var(--strand-surface-recessed);
	border-radius: var(--strand-radius-md);
}

.strand-lab-swatch {
	width: var(--strand-space-10);
	height: var(--strand-space-10);
	border-radius: var(--strand-radius-sm);
}

.strand-lab-swatch--bar {
	width: 100px;
	height: var(--strand-space-5);
}

.strand-lab-swatch--wash {
	background: var(--strand-blue-wash);
}

.strand-lab-swatch--indicator {
	background: var(--strand-blue-indicator);
}

.strand-lab-swatch--primary {
	background: var(--strand-blue-primary);
}

/* ═══ GRID SHOWCASE (cell tiles) ═══
   The Grid reference card uses simple wash-blue rectangles
   to demonstrate column distribution. */

.strand-lab-grid-cell {
	height: var(--strand-space-8);
	background: var(--strand-blue-wash);
	border-radius: var(--strand-radius-sm);
}

/* ═══ CONTAINER SHOWCASE (width tiers) ═══
   The Container reference card layers four bars of varying
   width and opacity to depict the 4 size tiers. */

.strand-lab-container-bar {
	height: var(--strand-space-4);
	background: var(--strand-blue-primary);
	border-radius: var(--strand-radius-sm);
}

.strand-lab-container-bar--full {
	max-width: 100%;
	opacity: 0.3;
}

.strand-lab-container-bar--wide {
	max-width: 80%;
	opacity: 0.5;
}

.strand-lab-container-bar--default {
	max-width: 60%;
	opacity: 0.7;
}

.strand-lab-container-bar--narrow {
	max-width: 50%;
	opacity: 1;
}

.strand-lab-container-legend {
	display: flex;
	justify-content: space-between;
	margin-top: var(--strand-space-3);
	font-family: var(--strand-font-mono);
	font-size: var(--strand-text-xs);
	color: var(--strand-gray-500);
}

/* ═══ SECTION SHOWCASE (variant tiles) ═══
   Two dashed-bordered tiles demonstrate the standard vs hero
   section padding rhythm. */

.strand-lab-section-tile {
	flex: 1;
	border: 1px dashed var(--strand-gray-300);
	border-radius: var(--strand-radius-md);
	padding: var(--strand-space-4) var(--strand-space-3);
	text-align: center;
	font-size: var(--strand-text-xs);
	color: var(--strand-gray-500);
}

.strand-lab-section-tile--hero {
	padding-block: var(--strand-space-8);
}

/* ═══ DIALOG SHOWCASE STAGE ═══
   A dimmed wrapper that simulates the modal backdrop, plus
   sizing overrides for the embedded dialog panel. */

.strand-lab-dialog-stage {
	background: var(--strand-backdrop);
	border-radius: var(--strand-radius-lg);
	padding: var(--strand-space-8);
	display: flex;
	justify-content: center;
}

.strand-lab-dialog-panel-demo {
	position: static;
	max-width: 320px;
	width: 100%;
}

.strand-lab-dialog-title-demo {
	font-size: var(--strand-text-base);
}

.strand-lab-dialog-body-demo {
	font-size: var(--strand-text-sm);
	color: var(--strand-gray-500);
}

/* ═══ TOOLTIP SHOWCASE WRAPPER ═══
   Frees the tooltip example to display absolutely positioned
   above its anchor without disturbing the row layout. */

/* The showcase tooltip wrapper needs an inline-block stage with extra
   top margin so the absolutely-positioned tooltip has room to render
   above the trigger button without colliding with the row above. */
.strand-lab-tooltip-anchor {
	position: relative;
	display: inline-block;
	margin-top: var(--strand-space-8);
}

/* Compound selector to outweigh `.strand-static .strand-tooltip { position: static }`
   from the upstream static cascade. The showcase tooltip needs to fall
   back to its normal absolute positioning rules so it floats above the
   anchor button. The position-bearing rules (bottom/left/transform) all
   come from `.strand-tooltip--top` upstream and are honored once
   position is restored to absolute. */
.strand-tooltip.strand-lab-tooltip-demo {
	position: absolute;
}

/* ═══ PROGRESS SHOWCASE TRACK WRAPPER ═══
   The Progress reference card embeds a progress bar inside
   a flex row alongside a ring; the wrapper sizes the bar
   while the ring keeps its native size. */

.strand-lab-progress-track {
	flex: 1;
	min-width: 200px;
}

/* ═══ SKELETON SHOWCASE ═══
   Hand-shaped skeleton blocks for the Skeleton reference. */

.strand-lab-skeleton-circle {
	width: var(--strand-space-10);
	height: var(--strand-space-10);
	flex-shrink: 0;
}

.strand-lab-skeleton-line--60 {
	width: 60%;
	height: 14px;
}

.strand-lab-skeleton-line--90 {
	width: 90%;
	height: 14px;
}

.strand-lab-skeleton-block {
	width: 100%;
	height: 80px;
}

/* ═══ SETUP STEPS (vertical full-width stack) ═══
   The "Get running in three steps" section stacks vertically
   instead of using auto-fit grid columns. Each step has a long
   code snippet that needs the full container width to be readable.
   The horizontal grid was squishing the cards so the text wrapped
   awkwardly and individual lines were truncated. */

.strand-lab-setup-steps {
	max-width: 720px;
	margin-inline: auto;
}

/* ═══ NAVIGATION PATTERN PREVIEW (Breadcrumb + Tabs) ═══
   The Breadcrumb + Tabs preview lives inside a pattern card whose
   width is constrained by the auto-fit pattern grid. With three
   tab buttons and a 3-segment breadcrumb path, the content
   overflows narrow cards. Allow horizontal scroll on the inner
   wrapper so the showcase remains usable at narrow column widths
   without spilling out of the card. */

.strand-lab-pattern-nav {
	overflow-x: auto;
	width: 100%;
}

.strand-lab-pattern-nav .strand-tabs__tab {
	white-space: nowrap;
}

/* ═══ DOC CARD CODE BLOCK ═══
   The earlier "flat caption" override that stripped all chrome
   from .strand-card:has(.strand-viewport) > .strand-code-block
   went too far. It made the code text float with no visible
   container, with a copy button hovering at the right edge with
   nothing connecting them. The user reported this as a regression.

   Default strand-ui treatment (recessed gray + 1px border + 16px
   padding) is the right answer here, identical to how trust lab
   renders standalone code blocks. The earlier "double nested"
   concern about a code box stacked under a viewport box is real
   but the right fix is to differentiate the two surfaces (e.g.
   slightly different background tone) at the strand-ui primitive
   level, NOT to strip all chrome from the inner box. That work
   belongs in CodeBlock.css upstream.

   Scoped via :has() so this only targets doc cards that contain
   a viewport. Setup cards, install panels, and any card without a
   viewport keep the default recessed code block treatment. */
.strand-card:has(.strand-viewport) > .strand-code-block > .strand-code-block__pre,
.strand-card:has(.strand-viewport) > .strand-code-block > .strand-code-block__pre code {
	background-color: transparent;
}

.strand-card:has(.strand-viewport) > .strand-code-block > .strand-code-block__pre {
	border: none;
	border-top: 1px solid var(--strand-border-subtle);
	border-radius: 0;
	padding: var(--strand-space-4) 0 0 0;
	margin-top: var(--strand-space-2);
	box-shadow: none;
}

/* Reserve right-side padding for the copy button without the
   recessed gray box. The button still anchors via the
   .strand-code-block wrapper's relative position. */
.strand-card:has(.strand-viewport)
	> .strand-code-block[data-strand-copy]
	> .strand-code-block__pre {
	padding-right: var(--strand-space-10);
}

/* The copy button inside a flat caption code block should also
   shed its elevated surface so it reads as an icon next to the
   code, not a floating card. */
.strand-card:has(.strand-viewport) > .strand-code-block > .strand-code-block__copy {
	background-color: transparent;
	border-color: transparent;
}

.strand-card:has(.strand-viewport) > .strand-code-block > .strand-code-block__copy:hover,
.strand-card:has(.strand-viewport) > .strand-code-block > .strand-code-block__copy:focus-visible {
	background-color: var(--strand-surface-elevated);
	border-color: var(--strand-blue-primary);
}

/* ═══ PATTERN SHOWCASE MOBILE FIT ═══
   The pattern showcases inside .strand-lab-pattern__showcase render
   real strand-ui components inside a presentation-mode .strand-static
   wrapper. Some of those components ship with intrinsic min-width
   floors that make sense in production (e.g. .strand-toast has
   min-width: 280px so a floating toast never collapses into a
   thin pill). On a narrow pattern card those floors push the child
   past the parent card edge and bleed into the page gutter.

   The right long-term fix is upstream: Strand's static.css should
   release intrinsic min-widths for any component that appears
   inline inside .strand-static. Until that ships, this lab-page
   override constrains the showcase children to fit their parent
   card. This file is page-local so the constraint is scoped to
   the strand lab and does not affect other consumers.

   See: docs/cf/no-hand-edit-strand-ui-css.md (do not hand-edit
   strand-ui.css; route through the Strand repo + sync). The
   override below targets the lab page only and respects the rule. */
.strand-lab-pattern__showcase .strand-toast {
	min-width: 0;
	max-width: 100%;
	width: 100%;
}

/* Alerts already have min-width: 0 upstream but their content
   does not always wrap; widen the wrap rule for the long-text
   error message inside the showcase so the alert never overflows
   the parent card width on narrow viewports. */
.strand-lab-pattern__showcase .strand-alert {
	min-width: 0;
	max-width: 100%;
	width: 100%;
}

.strand-lab-pattern__showcase .strand-alert__content {
	min-width: 0;
	overflow-wrap: anywhere;
}

/* The showcase's strand-static wrapper is itself a flex container
   with its viewport child stretching to fill. Force the inner
   strand-stack used to lay out alerts/toasts/breadcrumbs/tabs to
   collapse below its intrinsic content width on mobile so the
   pattern card stays inside the viewport. */
.strand-lab-pattern__showcase .strand-stack {
	min-width: 0;
}

/* The breadcrumb separator and tab list both use white-space: nowrap
   internally; on a 375px viewport with 3 tab buttons + 3 crumb
   segments the row outweighs the card width. Allow the breadcrumb
   list to scroll horizontally as a last resort so the parent card
   never bleeds. */
.strand-lab-pattern__showcase .strand-breadcrumb {
	min-width: 0;
}

.strand-lab-pattern__showcase .strand-breadcrumb__list {
	flex-wrap: wrap;
	min-width: 0;
}

.strand-lab-pattern__showcase .strand-tabs {
	min-width: 0;
	max-width: 100%;
	overflow-x: auto;
}

/* CODE BLOCK MOBILE WRAP
   On narrow viewports the default strand-ui code block uses
   white-space: pre, meaning long snippets render as a single
   horizontally scrolling line. The copy button is absolutely
   positioned at top-right and sits on top of the first line of
   code, so on mobile it covers characters the user needs to read.

   Fix: at narrow viewports, allow code text to wrap so the full
   snippet is visible inside the pre content box, and the copy
   button reserved right-padding lines up with a wrap break
   instead of being painted over the text.

   Reserved right-padding is widened from space-10 (40px) to
   space-12 (48px) on mobile for ~10px of clearance outside any
   sub-pixel wrap drift from overflow-wrap: anywhere.

   This is page-level glue for the strand lab page. Upstream Strand
   may grow a responsive variant later; for now it lives here. */
@media (max-width: 640px) {
	.strand-code-block__pre,
	.strand-code-block__pre code {
		white-space: pre-wrap;
		overflow-wrap: anywhere;
		word-break: normal;
	}

	.strand-code-block[data-strand-copy] > .strand-code-block__pre {
		padding-right: var(--strand-space-12);
	}

	.strand-card:has(.strand-viewport)
		> .strand-code-block[data-strand-copy]
		> .strand-code-block__pre {
		padding-right: var(--strand-space-12);
	}
}