/* The showcase of the hosted workstation (app/showcase/, built by
   tools/site/showcase.py): a dark hero, the regime filter, then a card per
   example mission. It loads after tokens.css and site.css and uses their
   tokens, glass recipe (.site-glass) and type; only the card, chip and tag
   shapes are defined here. The hero is dark in both appearances; the list
   follows the system's light or dark appearance. */

.showcase-hero {
	padding: clamp(56px, 7vw, 96px) 0 clamp(48px, 6vw, 80px);
}

.showcase-hero h1 {
	max-width: none;
	font: var(--site-display-1);
	letter-spacing: var(--site-display-1-tracking);
}

.showcase-hero .site-lede {
	max-width: 30em;
}

.showcase-note {
	max-width: 34em;
	margin: var(--hs-space-16) auto 0;
	color: var(--hs-color-text-secondary);
	font: var(--hs-type-caption);
	letter-spacing: var(--hs-type-caption-tracking);
	text-wrap: pretty;
}

/* ----- the list ----------------------------------------------------------------------------------------- */

.showcase-list {
	padding: clamp(32px, 4vw, 56px) 0 var(--site-section-space);
	background: var(--site-page);
	color: var(--hs-color-text-primary);
}

.showcase-toolbar {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: var(--hs-space-12) var(--hs-space-24);
	margin-bottom: clamp(24px, 3vw, 36px);
}

.showcase-filters {
	display: flex;
	flex-wrap: wrap;
	gap: var(--hs-space-8);
}

.showcase-filters[hidden] {
	display: none;
}

.showcase-chip {
	display: inline-flex;
	align-items: center;
	gap: var(--hs-space-6);
	min-height: 36px;
	padding: 0 var(--hs-space-16);
	border: 1px solid var(--site-hairline);
	border-radius: var(--hs-radius-full);
	background: linear-gradient(180deg, var(--site-sheen), transparent 60%), var(--site-glass-wash);
	box-shadow: inset 0 1px 0 var(--site-rim-soft);
	color: var(--hs-color-text-primary);
	font: 500 14px/1 var(--hs-font-family-text);
	letter-spacing: -0.006em;
	cursor: pointer;
	transition: background-color var(--hs-duration-fast) var(--hs-easing-standard), border-color var(--hs-duration-fast) var(--hs-easing-standard), color var(--hs-duration-fast) var(--hs-easing-standard);
}

.showcase-chip:hover {
	border-color: var(--hs-color-border-strong);
}

.showcase-chip[aria-pressed="true"] {
	border-color: transparent;
	background: var(--hs-color-accent-default);
	box-shadow: inset 0 1px 0 var(--site-rim-soft), 0 8px 20px -10px var(--site-glow);
	color: var(--hs-color-text-on-accent);
}

.showcase-chip:focus-visible {
	border-radius: var(--hs-radius-full);
}

.showcase-chip-count {
	color: var(--hs-color-text-secondary);
	font-variant-numeric: var(--hs-numeric-tabular);
}

.showcase-chip[aria-pressed="true"] .showcase-chip-count {
	color: inherit;
	opacity: 0.8;
}

.showcase-status {
	margin: 0;
	color: var(--hs-color-text-secondary);
	font: var(--site-small);
	letter-spacing: var(--site-small-tracking);
	font-variant-numeric: var(--hs-numeric-tabular);
}

.showcase-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(min(100%, 320px), 1fr));
	gap: var(--hs-space-20);
	margin: 0;
	padding: 0;
	list-style: none;
}

.showcase-item {
	display: flex;
	min-width: 0;
}

.showcase-item[hidden] {
	display: none;
}

/* ----- a card --------------------------------------------------------------------------------------------
   One link per card (named by its title, described by its line and facts):
   the example's still inset in a glass card, its regimes, title, line and
   facts, and the call to open it. */

.showcase-card {
	display: flex;
	flex: 1;
	flex-direction: column;
	min-width: 0;
	padding: var(--hs-space-10);
	color: var(--hs-color-text-primary);
	text-decoration: none;
	transition: transform var(--hs-duration-base) var(--hs-easing-standard), box-shadow var(--hs-duration-base) var(--hs-easing-standard), border-color var(--hs-duration-base) var(--hs-easing-standard);
}

.showcase-card:focus-visible {
	border-radius: 28px;
	outline-offset: 3px;
}

@media (hover: hover) {
	.showcase-card:hover {
		border-color: var(--hs-color-border-strong);
		box-shadow: var(--site-depth), 0 28px 60px -32px var(--site-glow);
	}
}

@media (hover: hover) and (prefers-reduced-motion: no-preference) {
	.showcase-card:hover {
		transform: translateY(-3px);
	}
}

.showcase-media {
	display: block;
	overflow: hidden;
	aspect-ratio: 16 / 10;
	border-radius: 20px;
	background: var(--hs-color-surface-canvas);
	box-shadow: 0 0 0 1px var(--site-hairline);
}

.showcase-media img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.showcase-body {
	display: flex;
	flex: 1;
	flex-direction: column;
	padding: var(--hs-space-16) var(--hs-space-12) var(--hs-space-12);
}

.showcase-card.has-no-image .showcase-body {
	padding-top: var(--hs-space-20);
}

.showcase-tags {
	display: flex;
	flex-wrap: wrap;
	gap: var(--hs-space-6);
	margin: 0 0 var(--hs-space-12);
	padding: 0;
	list-style: none;
}

.showcase-tag {
	padding: var(--hs-space-2) var(--hs-space-8);
	border: 1px solid var(--site-hairline);
	border-radius: var(--hs-radius-full);
	background: var(--site-glass-wash);
	color: var(--hs-color-text-primary);
	font: 600 12px/18px var(--hs-font-family-text);
	letter-spacing: 0.01em;
}

.showcase-tag.is-kind {
	background: transparent;
	color: var(--hs-color-text-secondary);
	font-weight: 500;
}

.showcase-title {
	margin: 0;
	font: 600 22px/1.2 var(--hs-font-family-display);
	letter-spacing: -0.02em;
	text-wrap: balance;
}

.showcase-line {
	margin: var(--hs-space-8) 0 0;
	color: var(--hs-color-text-secondary);
	font: var(--site-small);
	letter-spacing: var(--site-small-tracking);
	text-wrap: pretty;
}

.showcase-facts {
	display: flex;
	flex-wrap: wrap;
	margin: var(--hs-space-12) 0 0;
	padding: 0;
	list-style: none;
	color: var(--hs-color-text-secondary);
	font: 400 13px/1.5 var(--hs-font-family-text);
	letter-spacing: -0.003em;
	font-variant-numeric: var(--hs-numeric-tabular);
}

.showcase-facts li:not(:last-child)::after {
	content: "·";
	margin: 0 var(--hs-space-6);
	color: var(--hs-color-text-tertiary);
}

.showcase-open {
	display: inline-flex;
	align-items: center;
	gap: var(--hs-space-4);
	margin-top: auto;
	padding-top: var(--hs-space-16);
	color: var(--hs-color-accent-text);
	font: 600 15px/1.3 var(--hs-font-family-text);
	letter-spacing: -0.009em;
}

.showcase-open::after {
	content: "›";
	font-size: 1.2em;
	line-height: 1;
	transition: transform var(--hs-duration-fast) var(--hs-easing-standard);
}

@media (hover: hover) and (prefers-reduced-motion: no-preference) {
	.showcase-card:hover .showcase-open::after {
		transform: translateX(3px);
	}
}

/* ----- footer ------------------------------------------------------------------------------------------- */

.showcase-footnotes {
	display: grid;
	gap: var(--hs-space-8);
	max-width: 760px;
	margin: 0 0 var(--hs-space-32);
	padding: 0;
	list-style: none;
	text-wrap: pretty;
}

/* ----- small screens ------------------------------------------------------------------------------------ */

@media (max-width: 640px) {
	.showcase-toolbar {
		flex-direction: column;
		align-items: flex-start;
	}

	.showcase-title {
		font-size: 20px;
	}
}

/* ----- preferences -------------------------------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
	.showcase-card,
	.showcase-chip,
	.showcase-open::after {
		transition: none;
	}
}

@media (prefers-reduced-transparency: reduce) {
	.showcase-chip,
	.showcase-tag {
		background: var(--hs-color-glass-card-solid);
	}

	.showcase-chip[aria-pressed="true"] {
		background: var(--hs-color-accent-default);
	}
}

@media (forced-colors: active) {
	.showcase-chip,
	.showcase-tag,
	.showcase-media {
		border: 1px solid CanvasText;
	}

	.showcase-chip[aria-pressed="true"] {
		background: Highlight;
		color: HighlightText;
	}

	.showcase-chip[aria-pressed="true"] .showcase-chip-count {
		color: HighlightText;
	}
}