/* One issue, and StatusMark. Split from files.css so each sheet has one job. Tokens only. */
/* One issue (Issues, the Issue board): the properties, the activity, and the version out for it beside them. */
.ab-issue {
	flex: 1;
	min-width: 0;
	min-height: 0;
	display: flex;
}
.ab-issue-main {
	flex: none;
	width: min(640px, 48%);
	min-height: 0;
	overflow: auto;
	padding: var(--space-6) var(--space-6) var(--space-6);
	border-right: 1px solid var(--rule);
	box-sizing: border-box;
}
.ab-issue-main h1 {
	margin: var(--space-3) 0 var(--space-4);
	font: var(--type-display);
}
.ab-issue-main h1 .num {
	color: var(--muted);
	font-family: var(--font-mono);
	font-size: 20px;
	font-weight: 500;
}
.ab-issue-version .num {
	color: var(--muted);
	font-family: var(--font-mono);
	font-weight: 450;
}
.ab-props {
	display: grid;
	grid-template-columns: 110px minmax(0, 1fr);
	gap: var(--space-2) var(--space-3);
	margin: 0 0 22px;
	font: var(--type-ui);
}
.ab-props dt {
	color: var(--muted);
}
.ab-props dd {
	margin: 0;
	min-width: 0;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--space-1) var(--space-2);
}
.ab-status {
	display: inline-flex;
	align-items: center;
	gap: var(--space-2);
	color: var(--ink);
}
.ab-status.st-open,
.ab-status.st-dropped {
	color: var(--muted);
}
.ab-status.st-blocked {
	color: var(--fail);
}
.ab-status.st-done {
	color: var(--pass);
}
.ab-subs {
	display: inline-flex;
	gap: 3px;
}
.ab-subs i {
	display: block;
	width: 10px;
	height: 10px;
	border-radius: 50%;
	box-shadow: inset 0 0 0 1.5px var(--muted);
}
.ab-subs i.st-in-progress {
	box-shadow: inset 0 0 0 1.5px var(--ink);
}
.ab-subs i.st-in-review {
	box-shadow: inset 0 0 0 1.5px var(--ink);
	background: radial-gradient(circle, var(--ink) 25%, transparent 30%);
}
.ab-subs i.st-blocked {
	box-shadow: inset 0 0 0 1.5px var(--fail);
}
.ab-subs i.st-done {
	background: var(--pass);
	box-shadow: none;
}
.ab-activity h2 {
	margin: 22px 0 var(--space-2);
	font-family: var(--font-sans);
	font-size: 13px;
	font-weight: 650;
}
.ab-activity ol {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
}
.ab-activity li {
	display: flex;
	align-items: baseline;
	gap: var(--space-2);
	padding: var(--space-2) 0;
	border-top: 1px solid var(--rule);
	font: var(--type-ui);
	color: var(--muted);
}
.ab-activity li b {
	color: var(--ink);
	font-weight: 600;
}
.ab-activity li .lead {
	flex: none;
	width: 16px;
	display: inline-flex;
	align-items: center;
	align-self: center;
}
.ab-activity li .what {
	flex: 1;
	min-width: 0;
}
.ab-activity li .when {
	flex: none;
	white-space: nowrap;
	margin-left: auto;
	padding-left: var(--space-3);
}
.ab-issue-desc {
	margin: 0 0 22px;
	padding-top: 22px;
	border-top: 1px solid var(--rule);
}
.ab-issue-desc .ab-md,
.ab-issue-main .ab-issue-desc .ab-md {
	margin: 0;
	padding: 0;
	max-width: none;
}
.ab-crumbs .parent {
	display: inline-flex;
	gap: 0.5ch;
	max-width: 22ch;
	min-width: 0;
}
.ab-crumbs .parent .t {
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}
.ab-chip {
	display: inline-flex;
	align-items: center;
	padding: 0 8px;
	border-radius: 999px;
	background: var(--wash);
	color: var(--ink);
	text-decoration: none;
	line-height: 22px;
	font-family: var(--font-mono);
	font-size: 12px;
}
.ab-chip:hover {
	box-shadow: inset 0 0 0 1px var(--faint);
}
.ab-props dd .ab-agent {
	margin-right: var(--space-1);
}
.ab-issue-version .head .ab-btn {
	margin-left: auto;
}
.ab-issue-version {
	flex: 1;
	min-width: 0;
	min-height: 0;
	overflow: auto;
	padding: var(--space-6);
	box-sizing: border-box;
}
.ab-issue-version .head {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--space-2) var(--space-3);
}
.ab-issue-version .head h2 {
	margin: 0;
	font: var(--type-heading);
}
.ab-issue-version .head .when,
.ab-issue-version .head .counts {
	color: var(--muted);
	font: var(--type-ui);
}
.ab-issue-version .message {
	margin: var(--space-2) 0 var(--space-4);
	color: var(--muted);
	font: var(--type-ui);
}
.ab-issue-version .files {
	display: flex;
	flex-direction: column;
	margin-bottom: var(--space-4);
	border-top: 1px solid var(--rule);
}
.ab-issue-version .files a {
	display: flex;
	justify-content: space-between;
	gap: var(--space-3);
	padding: var(--space-2) 0;
	border-bottom: 1px solid var(--rule);
	color: var(--ink);
	text-decoration: none;
	font: var(--type-path);
}
.ab-issue-version .files a .num {
	color: var(--muted);
}
.ab-issue-version .diff {
	margin-bottom: var(--space-6);
}
.ab-issue-version .diff h3 {
	margin: 0 0 var(--space-2);
	font: var(--type-path);
}
@media (max-width: 720px) {
	.ab-activity li {
		flex-wrap: wrap;
	}
	.ab-activity li .what {
		flex: 1 1 calc(100% - 28px);
	}
	.ab-activity li .when {
		flex: 1 1 100%;
		margin-left: 0;
		padding: 0 0 0 24px;
		font-size: 12px;
	}
}
@media (max-width: 900px) {
	.ab-issue {
		flex-direction: column;
		overflow: auto;
	}
	.ab-issue-main,
	.ab-issue-version {
		width: auto;
		overflow: visible;
		border-right: 0;
	}
	.ab-crumbs .parent .t {
		display: none;
	}
}

/* StatusMark (Issues): the five marks. Open and dropped are muted, the rest ink; the colour never says the status. */
.ab-status {
	display: inline-flex;
	align-items: center;
	gap: var(--space-2);
	white-space: nowrap;
}
.ab-status-mark {
	flex: none;
	display: block;
	color: var(--ink);
}
.ab-status-mark.is-dim {
	color: var(--muted);
}
.ab-status-mark .ring {
	fill: none;
	stroke: currentColor;
	stroke-width: 1.5;
}
.ab-status-mark.is-in-progress .ring {
	stroke-dasharray: 2.3 1.8;
}
.ab-status-mark .dot {
	fill: currentColor;
}
.ab-status-mark .bar {
	stroke: currentColor;
	stroke-width: 1.6;
	stroke-linecap: round;
}
.ab-status-mark .disc {
	fill: currentColor;
}
.ab-status-mark .check {
	fill: none;
	stroke: var(--on-ink);
	stroke-width: 1.6;
	stroke-linecap: round;
	stroke-linejoin: round;
}
.ab-visually-hidden {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
}