/* The folder page. Split from files.css so each sheet has one job. Tokens only. */
/* The folder page (Folder board): header, facts, the listing. */
.ab-folder {
	display: flex;
	flex-direction: column;
	gap: var(--space-4);
}
.ab-folder-head {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--space-2) var(--space-4);
}
.ab-folder-head .ab-crumbs {
	flex: 1;
	min-width: 0;
}
.ab-folder-facts {
	margin: 0;
	color: var(--muted);
	font: var(--type-ui);
}
.ab-flist {
	display: flex;
	flex-direction: column;
	border-top: 1px solid var(--rule);
}
.ab-frow {
	display: grid;
	grid-template-columns: minmax(0, 1fr) 150px 160px;
	align-items: center;
	gap: var(--space-3);
	min-height: var(--row-listing);
	padding: 0 var(--space-3);
	border-bottom: 1px solid var(--rule);
	color: var(--ink);
	text-decoration: none;
	font: var(--type-ui);
}
.ab-frow:not(.head):hover {
	background: var(--wash);
}
.ab-frow.head {
	min-height: 32px;
	color: var(--muted);
	font: var(--type-caption);
}
.ab-frow .name {
	display: flex;
	align-items: baseline;
	gap: var(--space-2);
	min-width: 0;
	font: var(--type-path);
}
.ab-frow .name a {
	color: var(--ink);
	text-decoration: none;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}
.ab-frow .name a:hover {
	text-decoration: underline;
}
.ab-frow .sub {
	color: var(--muted);
	font: var(--type-caption);
	white-space: nowrap;
}
.ab-frow .when {
	color: var(--muted);
	text-align: right;
	white-space: nowrap;
}
.ab-frow.up .name {
	color: var(--muted);
}
@media (max-width: 720px) {
	.ab-frow {
		grid-template-columns: minmax(0, 1fr) 150px;
	}
	.ab-frow .who {
		display: none;
	}
}
.ab-readme {
	border: 1px solid var(--rule);
	border-radius: var(--radius);
	background: var(--surface);
}
.ab-readme > h2 {
	margin: 0;
	padding: var(--space-2) var(--space-3);
	border-bottom: 1px solid var(--rule);
	color: var(--muted);
	font: var(--type-path);
}
.ab-readme .ab-md {
	margin: 0;
	padding: var(--space-4);
	max-width: none;
}
.ab-readme > pre {
	margin: 0;
	padding: var(--space-3);
	overflow-x: auto;
	color: var(--syn-plain);
	font: var(--type-code);
	white-space: pre-wrap;
	overflow-wrap: anywhere;
}