/* The catalogue's own components, at /recipes. The header, hero, search field, buttons and footer
   are the home page's, from /ugt.css, and every size here is a token from /brand.css. The
   breakpoints are the home page's, 900px and 600px; a media query cannot read a token. */

.catalogue .intro-note,
.lead,
.card h3,
.detail-main h1 {
	text-wrap: pretty;
}

/* Category links under the search, on the hero's red */
.shelf-links {
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-2);
	max-width: var(--form);
	margin: var(--space-4) 0 0;
}
.shelf-links a {
	display: inline-flex;
	align-items: center;
	gap: var(--space-2);
	padding: var(--space-2) var(--space-3);
	border: var(--hairline) solid color-mix(in oklch, var(--on-red) 28%, transparent);
	border-radius: var(--radius-pill);
	font-size: var(--text-ui);
	font-weight: var(--weight-ui);
	text-decoration: none;
	transition:
		background var(--ease),
		border-color var(--ease);
}
.shelf-links a:hover,
.shelf-links a[aria-current="page"] {
	background: var(--paper);
	border-color: var(--paper);
	color: var(--ink);
}
.start-top :focus-visible,
.bring-link :focus-visible {
	outline-color: var(--on-red);
}

/* A list page's search band sits under the header, closing in the home page's curve */
.catalogue:not([data-stage="entry"]) .experience {
	border-bottom-right-radius: var(--radius-leaf);
}
.catalogue:not([data-stage="entry"]) .entry-action {
	padding-top: var(--space-5);
}

/* A category: its heading and its cards */
.shelf {
	max-width: var(--page);
	margin: auto;
	padding: var(--space-6) var(--gutter) 0;
}
.shelf + .shelf {
	padding-top: var(--space-7);
}
.shelf-head {
	display: flex;
	align-items: center;
	gap: var(--space-3);
	margin-bottom: var(--space-4);
}
.shelf-icon {
	display: grid;
	place-items: center;
	flex-shrink: 0;
	width: var(--space-6);
	height: var(--space-6);
	border-radius: 50%;
	background: var(--soft);
	color: var(--red-text);
}
.shelf-head > div {
	min-width: 0;
}
.shelf-head h2 {
	font-size: var(--text-section);
	font-weight: var(--weight-display);
	letter-spacing: var(--track-section);
	line-height: var(--leading-heading);
	overflow-wrap: anywhere;
}
.shelf-head p {
	margin-top: var(--space-1);
	color: var(--muted);
	font-size: var(--text-body);
}
.shelf-all {
	display: inline-flex;
	align-items: center;
	gap: var(--space-1);
	margin-left: auto;
	font-size: var(--text-ui);
	font-weight: var(--weight-ui);
	white-space: nowrap;
	text-decoration: none;
}
.shelf-all:hover {
	text-decoration: underline;
}

/* Three across, so a shelf of six fills two rows; two, then one, on narrower screens */
/* A category's jobs, each with how many projects do it */
.job-links {
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-2);
	margin: 0 0 var(--space-4);
}
.job-links a {
	display: inline-flex;
	align-items: center;
	gap: var(--space-2);
	padding: var(--space-2) var(--space-3);
	border: var(--hairline) solid var(--line);
	border-radius: var(--radius-pill);
	font-size: var(--text-ui);
	font-weight: var(--weight-ui);
	text-decoration: none;
	transition:
		background var(--ease),
		border-color var(--ease);
}
.job-links a:hover {
	border-color: var(--ink);
	background: var(--soft);
}
.job-links span {
	color: var(--muted);
	font-variant-numeric: tabular-nums;
}
.job-head {
	display: flex;
	align-items: center;
	gap: var(--space-4);
}
.job-head h1 {
	font-size: var(--text-display);
	font-weight: var(--weight-display);
	letter-spacing: var(--track-display);
	line-height: var(--leading-display);
	overflow-wrap: anywhere;
	text-wrap: balance;
}

.cards {
	--columns: 3;
	display: grid;
	grid-template-columns: repeat(var(--columns), minmax(0, 1fr));
	gap: var(--space-3);
	margin: 0;
	padding: 0;
	list-style: none;
}
.card {
	display: flex;
	flex-direction: column;
	gap: var(--space-3);
	height: 100%;
	padding: var(--space-4);
	border: var(--hairline) solid var(--line);
	border-radius: var(--radius-card) var(--radius-leaf) var(--radius-card) var(--radius-card);
	background: var(--paper);
	text-decoration: none;
	transition:
		border-color var(--ease),
		transform var(--ease);
}
.card:hover {
	border-color: var(--ink);
	transform: translateY(calc(-1 * var(--lift)));
}
.card-project {
	display: flex;
	align-items: center;
	gap: var(--space-2);
	min-width: 0;
	font-size: var(--text-small);
}
.card-project strong {
	font-weight: var(--weight-strong);
}
.card-project span span {
	color: var(--muted);
}
.mark {
	--mark: calc(var(--space-5) + var(--space-1));
	position: relative;
	display: grid;
	place-items: center;
	flex-shrink: 0;
	overflow: hidden;
	width: var(--mark);
	height: var(--mark);
	border: var(--hairline) solid var(--line);
	border-radius: var(--radius-small);
	background: var(--soft);
	color: var(--red-text);
	font-size: var(--text-read);
	font-weight: var(--weight-strong);
}
/* The owner's GitHub avatar, over the letter it falls back to. Once it has loaded it is backed,
   so a transparent logo doesn't show the letter through it; one that fails is removed. */
.mark img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
}
.mark.has-avatar img {
	background: var(--paper);
}
.card h3 {
	font-size: var(--text-card);
	font-weight: var(--weight-display);
	letter-spacing: var(--track-card);
	line-height: var(--leading-card);
	overflow-wrap: anywhere;
}
.card-gives {
	color: var(--muted);
	font-size: var(--text-ui);
	line-height: var(--leading-body);
}
.card-go {
	display: grid;
	place-items: center;
	align-self: flex-end;
	width: var(--space-5);
	height: var(--space-5);
	margin-top: auto;
	border: var(--hairline) solid var(--line);
	border-radius: 50%;
	transition:
		background var(--ease),
		border-color var(--ease),
		color var(--ease);
}
.card:hover .card-go {
	background: var(--button);
	border-color: var(--button);
	color: var(--button-ink);
}

.empty-shelf {
	max-width: var(--measure);
	padding: var(--space-5) 0;
}
.empty-shelf p {
	margin-bottom: var(--space-4);
	color: var(--muted);
	font-size: var(--text-read);
	line-height: var(--leading-read);
}
.pager {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--space-4);
	margin-top: var(--space-5);
}
.back-link {
	display: inline-block;
	margin-top: var(--space-4);
	font-weight: var(--weight-ui);
}

/* Found something else: the red band before the footer */
.bring-link {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--space-5);
	max-width: calc(var(--page) - 2 * var(--gutter));
	margin: var(--space-7) var(--gutter) 0;
	padding: var(--space-5);
	border-radius: 0 var(--radius-leaf) 0 var(--radius-leaf);
	background: var(--red);
	color: var(--on-red);
}
.bring-link h2 {
	font-size: var(--text-section);
	font-weight: var(--weight-display);
	letter-spacing: var(--track-section);
	line-height: var(--leading-heading);
	color: var(--on-red-heading);
}
.bring-link p {
	max-width: var(--measure);
	margin-top: var(--space-2);
	font-size: var(--text-body);
	line-height: var(--leading-body);
}
.bring-link .button {
	background: var(--on-red-button);
	color: var(--on-red-button-ink);
}

/* A project's page and a not-found page */
.page-head {
	max-width: var(--page);
	margin: auto;
	padding: var(--space-4) var(--gutter) 0;
}
.crumb {
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-2);
	margin-bottom: var(--space-5);
	color: var(--muted);
	font-size: var(--text-small);
	overflow-wrap: anywhere;
}
.crumb a {
	text-decoration: none;
}
.crumb a:hover {
	text-decoration: underline;
}
.project-head {
	display: flex;
	align-items: center;
	gap: var(--space-4);
}
.project-head > div {
	min-width: 0;
}
.project-head .mark {
	--mark: calc(var(--space-6) + var(--space-3));
	border-radius: var(--radius-card);
	font-size: var(--text-section);
}
.owner {
	display: inline-flex;
	align-items: center;
	gap: var(--space-1);
	color: var(--muted);
	font-size: var(--text-ui);
	font-weight: var(--weight-ui);
	text-decoration: none;
}
.owner:hover {
	text-decoration: underline;
}
.project-head h1,
.page-head > h1 {
	font-size: var(--text-display);
	font-weight: var(--weight-display);
	letter-spacing: var(--track-display);
	line-height: var(--leading-display);
	overflow-wrap: anywhere;
}
.lead {
	max-width: var(--measure);
	margin-top: var(--space-4);
	color: var(--muted);
	font-size: var(--text-lead);
	line-height: var(--leading-body);
}
.head-actions {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--space-4);
	margin-top: var(--space-5);
}
.page-head + .shelf {
	padding-top: var(--space-6);
}

/* A recipe's page */
.detail-layout {
	--panel: 380px;
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, var(--panel));
	align-items: start;
	gap: var(--space-7);
	max-width: var(--page);
	margin: auto;
	padding: var(--space-4) var(--gutter) 0;
}
.project-line {
	display: flex;
	align-items: center;
	gap: var(--space-3);
	margin-bottom: var(--space-4);
}
.project-line > div {
	min-width: 0;
}
.project-line a {
	display: inline-flex;
	align-items: center;
	gap: var(--space-1);
	font-size: var(--text-ui);
	font-weight: var(--weight-strong);
	text-decoration: none;
	overflow-wrap: anywhere;
}
.project-line a:hover {
	text-decoration: underline;
}
.project-line span:not(.mark) {
	display: block;
	color: var(--muted);
	font-size: var(--text-small);
}
.detail-main h1 {
	max-width: 20ch;
	font-size: var(--text-title);
	font-weight: var(--weight-display);
	letter-spacing: var(--track-title);
	line-height: var(--leading-display);
	overflow-wrap: anywhere;
}
.facts {
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-2) var(--space-4);
	margin: var(--space-4) 0 0;
	padding: 0;
	list-style: none;
	font-size: var(--text-ui);
}
.facts li {
	display: inline-flex;
	align-items: center;
	gap: var(--space-1);
}
.facts svg {
	color: var(--red-text);
}
.outcome {
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
	align-items: stretch;
	gap: var(--space-3);
	margin-top: var(--space-5);
}
.outcome section {
	padding: var(--space-4);
	border-radius: var(--radius-card);
	background: var(--soft);
}
.outcome h2 {
	margin-bottom: var(--space-2);
	color: var(--muted);
	font-size: var(--text-label);
	font-weight: var(--weight-strong);
	letter-spacing: var(--track-label);
	text-transform: uppercase;
}
.outcome ul {
	display: grid;
	gap: var(--space-2);
	margin: 0;
	padding: 0;
	list-style: none;
}
.outcome li,
.outcome p {
	font-size: var(--text-read);
	line-height: var(--leading-body);
	overflow-wrap: anywhere;
}
/* A recipe writes what you bring and get to follow "You get"; standing alone, each starts a line */
.outcome li::first-letter {
	text-transform: uppercase;
}
.outcome-arrow {
	align-self: center;
	color: var(--red-text);
}
.choices {
	margin-top: var(--space-5);
}
.choices h2 {
	font-size: var(--text-heading);
	font-weight: var(--weight-display);
	letter-spacing: var(--track-card);
}
.choices > p {
	margin-top: var(--space-1);
	color: var(--muted);
	font-size: var(--text-body);
}
.choices ul {
	display: grid;
	gap: var(--space-2);
	margin-top: var(--space-3);
	padding-left: var(--space-4);
	font-size: var(--text-body);
	line-height: var(--leading-body);
}
.technical {
	margin-top: var(--space-5);
}
.technical > details {
	border-top: var(--hairline) solid var(--line);
}
.technical > details:last-child {
	border-bottom: var(--hairline) solid var(--line);
}
.technical summary {
	width: 100%;
	padding: var(--space-3) 0;
	font-size: var(--text-body);
	font-weight: var(--weight-ui);
}
.technical details > p,
.technical details > ul {
	max-width: var(--measure);
	margin: 0 0 var(--space-3);
	color: var(--muted);
	font-size: var(--text-ui);
	line-height: var(--leading-read);
}
.technical strong {
	color: var(--ink);
	font-weight: var(--weight-strong);
}
.technical ul {
	padding-left: var(--space-4);
}
.technical li + li {
	margin-top: var(--space-2);
}
.catalogue code {
	font-family: ui-monospace, monospace;
	font-size: 0.85em;
	overflow-wrap: anywhere;
}

/* Starting it: the red panel beside the recipe */
.start-panel {
	position: sticky;
	top: var(--space-4);
	overflow: hidden;
	border: var(--hairline) solid var(--line);
	border-radius: 0 var(--radius-leaf) 0 var(--radius-card);
	background: var(--paper);
}
.start-top {
	padding: var(--space-5) var(--space-4) var(--space-4);
	background: var(--red);
	color: var(--on-red);
}
.start-top h2 {
	font-size: var(--text-panel);
	font-weight: var(--weight-display);
	letter-spacing: var(--track-title);
	line-height: var(--leading-display);
	color: var(--on-red-heading);
}
.start-top p {
	margin-top: var(--space-3);
	font-size: var(--text-body);
	line-height: var(--leading-body);
}
.start-top .button {
	width: 100%;
	margin-top: var(--space-4);
	background: var(--on-red-button);
	color: var(--on-red-button-ink);
}
.share-status:empty,
.copy-status:empty {
	display: none;
}
.install {
	padding: 0 var(--space-4);
}
.install > summary {
	width: 100%;
	padding-block: var(--space-4);
	font-size: var(--text-ui);
	font-weight: var(--weight-ui);
}
.install p {
	margin-bottom: var(--space-3);
	color: var(--muted);
	font-size: var(--text-small);
	line-height: var(--leading-read);
}
.install-command {
	padding: var(--space-3) 0;
	border-top: var(--hairline) solid var(--line);
}
.install-command > span {
	display: block;
	font-size: var(--text-label);
	font-weight: var(--weight-strong);
}
.install-command code {
	display: block;
	margin: var(--space-2) 0;
	font-size: var(--text-label);
}
.copy-command {
	padding: var(--space-1) var(--space-3);
	border: var(--hairline) solid var(--line);
	border-radius: var(--radius-pill);
	background: var(--soft);
	color: var(--ink);
	font-size: var(--text-label);
}
.terminal-help > summary {
	padding-block: var(--space-2);
	font-size: var(--text-small);
	text-decoration: underline;
}
.need-help {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--space-3);
	padding: var(--space-4);
	border-top: var(--hairline) solid var(--line);
	font-size: var(--text-small);
	text-decoration: none;
}
.need-help:hover {
	background: var(--soft);
}

@media (max-width: 900px) {
	.cards {
		--columns: 2;
	}
	.detail-layout {
		display: flex;
		flex-direction: column;
		gap: var(--space-5);
	}
	.start-panel {
		position: static;
		width: 100%;
	}
}
@media (max-width: 600px) {
	.shelf {
		padding-top: var(--space-5);
	}
	.shelf + .shelf {
		padding-top: var(--space-6);
	}
	.shelf-head {
		display: grid;
		grid-template-columns: auto minmax(0, 1fr);
		align-items: start;
		gap: var(--space-2) var(--space-3);
	}
	.shelf-icon {
		width: var(--space-5);
		height: var(--space-5);
	}
	.shelf-all {
		grid-column: 2;
		justify-self: start;
		margin-left: 0;
	}
	/* One row that scrolls sideways, edge to edge, so the categories don't push the page down;
	   its padding keeps room for a link's focus ring, which a scroller would otherwise clip */
	.shelf-links {
		flex-wrap: nowrap;
		overflow-x: auto;
		scrollbar-width: none;
		margin: calc(var(--space-4) - var(--space-2)) calc(-1 * var(--gutter)) calc(-1 * var(--space-2));
		padding: var(--space-2) var(--gutter);
	}
	.shelf-links a {
		flex-shrink: 0;
		font-size: var(--text-small);
	}
	.cards {
		--columns: 1;
	}
	.card {
		padding: var(--space-4) var(--space-3);
	}
	.bring-link {
		flex-direction: column;
		align-items: flex-start;
		padding: var(--space-5) var(--space-4);
	}
	.outcome {
		grid-template-columns: 1fr;
	}
	.outcome-arrow {
		justify-self: center;
		transform: rotate(90deg);
	}
	.project-head {
		gap: var(--space-3);
	}
	.project-head .mark {
		--mark: var(--space-6);
	}
}
@media (prefers-reduced-motion: reduce) {
	.card,
	.card-go,
	.shelf-links a,
	.job-links a {
		transition: none;
	}
}