/* The catalog's own parts, on top of the cozy theme: a card's title, an
   article's row with its type and version, and the versions listed under it.
   Titles, subtitles and labels keep the system's font, which has every
   character; names are drawn in the theme's when it has theirs. */

/* Boards take turns with the theme's sticker and its two sparkles */
#catalog > .board:nth-child(odd) .sparkle,
#catalog > .board:nth-child(even) .board-sticker {
	display: none;
}

/* A section's subsections side by side, and a lone one across the board */
.board .card-list {
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 340px), 1fr));
}

/* A subsection's name, and the sentence on what it is */
.card-title {
	display: grid;
	gap: 2px;
	padding-bottom: 10px;
	border-bottom: 1px dashed var(--line);
}

.card-title h3 {
	margin: 0;
	color: var(--deep-ink);
	font: 400 24px/1.25 var(--display-font);
	-webkit-text-stroke: 0.25px currentColor;
	overflow-wrap: anywhere;
}

.card-title .free-text {
	color: var(--muted);
	font-size: 15px;
	line-height: 1.5;
}

/* An article: its icon, then its title over its type and version, with no
   buttons at the end */
.member {
	grid-template-columns: 48px minmax(0, 1fr);
	align-items: start;
}

.member .file-name {
	padding: 2px 0;
	font-size: 16px;
}

.member .file-meta {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 4px 8px;
}

/* Small chips, which are tags and not buttons: an article's type, and the
   mark on a broken version */
.member .chip {
	flex: 0 1 auto;
	min-height: 0;
	padding: 1px 8px;
	font-size: 13px;
	white-space: normal;
	overflow-wrap: anywhere;
}

.member .chip.broken {
	border-color: var(--red);
	color: var(--deep-ink);
	background:
		var(--paper-fiber), color-mix(in srgb, var(--red) 18%, var(--paper));
}

/* The related versions under an article, on a dashed thread */
.children {
	display: grid;
	gap: 2px;
	margin: 6px 0 2px;
	padding: 0 0 0 12px;
	border-left: 2px dashed var(--line);
	list-style: none;
}

.children:empty {
	display: none;
}

.children li {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 2px 8px;
	min-width: 0;
}

.children a {
	padding: 2px 0;
	color: var(--accent-ink);
	font: 15px/1.5 var(--content-font);
	text-decoration: none;
	overflow-wrap: anywhere;
}

.children a:hover {
	text-decoration: underline dotted;
}

/* A name with characters the theme's fonts lack, all in the system's font */
.board-head h2.system-font,
.card-title h3.system-font,
.member .chip.system-font {
	font-family: var(--content-font);
	-webkit-text-stroke: 0;
}

@media (max-width: 520px) {
	.card-title h3 {
		font-size: 22px;
	}
}

/* Without JavaScript the theme menu would open on an empty picker */
@media (scripting: none) {
	.top-more {
		display: none;
	}
}