/* Since you last looked, gone, whose view, the outline, Written by. Split from files.css so each sheet has one job. Tokens only. */
/* Since you last looked (F29): a dot in front of what changed, and the band that counts them. */
.newdot {
	display: inline-block;
	flex: none;
	width: 6px;
	height: 6px;
	border-radius: 50%;
	background: var(--new);
}
.ab-frow.is-new .name .newdot {
	align-self: center;
}
.ab-since-band {
	display: flex;
	align-items: center;
	gap: var(--space-2);
	margin: 0;
	color: var(--muted);
	font: var(--type-ui);
}
.ab-since {
	display: inline-flex;
	align-items: center;
	gap: var(--space-1);
	color: var(--muted);
	font: var(--type-ui);
	white-space: nowrap;
}
.ab-since .newdot {
	margin-right: var(--space-1);
}

/* A path with no file at this version (the Gone board). */
.ab-gone {
	display: flex;
	flex-direction: column;
	gap: var(--space-2);
	max-width: var(--measure);
	padding: var(--space-6) var(--space-4);
	color: var(--muted);
	font: var(--type-ui);
}
.ab-gone p {
	margin: 0;
}
.ab-gone .lead {
	color: var(--ink);
	font: var(--type-heading);
}

/* A side panel that is only a line and a button: reading an agent's changes, or why it could not. */
.ab-panel-note {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: var(--space-2);
	padding: var(--space-4);
	color: var(--muted);
}
.ab-panel-note p {
	margin: 0;
}

/* The browser's own checkbox is blue, and blue isn't in the system (Design Lead): ink fill, 14px. */
.ab-raise input[type="checkbox"],
.announce input[type="checkbox"] {
	accent-color: var(--ink);
	width: 14px;
	height: 14px;
	margin: 0 6px 0 0;
}

/* An agent's view of a folder or file (F25): a line that says whose it is. */
.ab-agent-note {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--space-1) var(--space-2);
	margin: 0;
	padding: var(--space-2) var(--space-4);
	border-bottom: 1px solid var(--rule);
	color: var(--muted);
	font: var(--type-ui);
}
.ab-folder .ab-agent-note {
	padding-left: 0;
	padding-right: 0;
	border-bottom: 0;
}
.ab-line .bi .ab-mark {
	align-self: center;
	flex: none;
}

/* Every row has the same small slot before its name (the dot, or nothing), so the names line up. */
.ab-frow .newslot {
	display: inline-flex;
	flex: none;
	align-items: center;
	width: 6px;
	align-self: center;
}

/* A Markdown file rendered: the text, with its outline beside it at the right (under it on a phone). */
.ab-md-wrap {
	display: flex;
	flex-direction: row-reverse;
	align-items: flex-start;
	justify-content: center;
	gap: var(--space-6);
	padding: 0 var(--space-4);
}
.ab-md-wrap .ab-md {
	flex: 1;
	min-width: 0;
	margin: 0;
	padding-left: 0;
	padding-right: 0;
}
.ab-md-wrap .ab-md-outline {
	position: sticky;
	top: var(--space-4);
	flex: none;
	width: 220px;
	padding-top: var(--space-6);
}
@media (max-width: 900px) {
	.ab-md-wrap {
		flex-direction: column;
		align-items: stretch;
		gap: 0;
	}
	.ab-md-wrap .ab-md-outline {
		position: static;
		width: auto;
		padding-bottom: var(--space-2);
	}
}

/* Back in time: the two buttons stay together. */
.ab-when-buttons {
	display: inline-flex;
	align-items: center;
	gap: var(--space-2);
	white-space: nowrap;
	margin-left: var(--space-2);
}

/* A path that isn't here: the actions are buttons, side by side. */
.ab-nothere-links {
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-2);
}

/* Rendered | Source: a two-option switch that shows which one is on. */
.ab-seg {
	display: inline-flex;
	border: 1px solid var(--rule-strong);
	border-radius: var(--radius);
	overflow: hidden;
}
.ab-seg button {
	height: 28px;
	padding: 0 10px;
	border: 0;
	background: transparent;
	color: var(--muted);
	font: var(--type-ui);
	cursor: pointer;
}
.ab-seg button + button {
	border-left: 1px solid var(--rule-strong);
}
.ab-seg button[aria-pressed="true"] {
	background: var(--select);
	color: var(--ink);
	font-weight: 600;
}

/* Rendered Markdown: headings stay under the page's own title in size. */
.ab-md h1 {
	font-size: 28px;
	line-height: 34px;
}
.ab-md h2 {
	font-size: 22px;
	line-height: 28px;
}
.ab-md h3 {
	font-size: 18px;
	line-height: 24px;
}

/* The outline's "On this page": beside the text it is a heading; on a phone, a closed button above it. */
.ab-md-outline summary {
	color: var(--muted);
	font: var(--type-caption);
	cursor: pointer;
}
@media (min-width: 901px) {
	.ab-md-outline summary {
		pointer-events: none;
		list-style: none;
		margin-bottom: var(--space-2);
	}
	.ab-md-outline summary::-webkit-details-marker {
		display: none;
	}
}
@media (max-width: 900px) {
	.ab-md-outline summary {
		display: inline-flex;
		align-items: center;
		height: 28px;
		padding: 0 10px;
		border: 1px solid var(--rule-strong);
		border-radius: var(--radius);
		color: var(--ink);
		font: var(--type-ui);
	}
}

/* Written by (F33): a strip per row, between the name and the last change. */
.ab-frow {
	grid-template-columns: minmax(0, 1fr) 96px 150px 160px;
}
.ab-frow .strip {
	display: flex;
	align-items: center;
}
.ab-frow.up {
	grid-template-columns: minmax(0, 1fr);
}
@media (max-width: 720px) {
	.ab-frow {
		grid-template-columns: minmax(0, 1fr) 150px;
	}
	.ab-frow .strip {
		display: none;
	}
}

/* A row the agent's draft touched: the Last change column says so; on a phone, where that column is hidden, the When cell does. */
.ab-frow .when .unpub {
	display: none;
	align-items: center;
	gap: var(--space-1);
}
@media (max-width: 720px) {
	.ab-frow .when .unpub {
		display: inline-flex;
	}
}