/* Issue drafts and the Drafts tab. Split from files.css so each sheet has one job. Tokens only. */
/* Drafts (the Drafts board): the person's own saved issues at the top of the issues list; a dashed mark, the title, where it came from, when it was saved, Delete. */
.ab-drafts {
	border: 1px solid var(--rule);
	border-radius: var(--radius);
	background: var(--paper);
	margin-bottom: var(--space-4);
	overflow: hidden;
}
.ab-draft-mark {
	flex: none;
	color: var(--muted);
}
.ab-drafts-head {
	display: flex;
	align-items: center;
	gap: var(--space-2);
	min-height: 34px;
	padding: 0 var(--space-4);
	background: var(--surface);
	border-bottom: 1px solid var(--rule);
}
.ab-drafts-head h2 {
	margin: 0;
	font-size: 13px;
	font-weight: 650;
}
.ab-drafts-head .count {
	color: var(--muted);
	font-size: 12px;
}
.ab-drafts-head .only {
	margin-left: auto;
	color: var(--muted);
	font-size: 12px;
}
.ab-draft-row {
	display: grid;
	grid-template-columns: 16px minmax(0, 1fr) auto auto;
	align-items: center;
	column-gap: var(--space-3);
	min-height: 40px;
	padding: 0 var(--space-3) 0 var(--space-4);
	border-bottom: 1px solid var(--rule);
}
.ab-draft-row:last-child {
	border-bottom: 0;
}
.ab-draft-row:hover {
	background: var(--wash);
}
.ab-draft-row .what {
	display: flex;
	align-items: center;
	gap: 10px;
	min-width: 0;
}
.ab-draft-open {
	min-width: 0;
	padding: 0;
	border: 0;
	background: transparent;
	color: var(--ink);
	font: var(--type-ui);
	font-size: 14px;
	font-weight: 500;
	text-align: left;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	cursor: pointer;
}
.ab-draft-open.is-untitled {
	color: var(--muted);
	font-style: italic;
}
.ab-draft-open:hover {
	text-decoration: underline;
}
.ab-draft-from {
	flex: none;
	max-width: 40%;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	padding: 0 7px;
	border-radius: 5px;
	box-shadow: inset 0 0 0 1px var(--rule);
	color: var(--muted);
	font-size: 12px;
	line-height: 20px;
}
.ab-draft-from.is-path {
	padding: 0;
	box-shadow: none;
	font-family: var(--font-mono);
}
.ab-draft-row .saved {
	color: var(--muted);
	font-size: 12px;
	white-space: nowrap;
}
.ab-draft-delete {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 28px;
	height: 28px;
	padding: 0;
	border: 1px solid transparent;
	border-radius: var(--radius);
	background: transparent;
	color: var(--muted);
	cursor: pointer;
}
.ab-draft-delete:hover {
	color: var(--ink);
	background: var(--wash);
}
.ab-drafts .ab-raise-error {
	margin: 0;
	padding: var(--space-2) var(--space-4);
}
@media (max-width: 720px) {
	.ab-draft-row {
		grid-template-columns: 16px minmax(0, 1fr) auto;
	}
	.ab-draft-row .saved {
		display: none;
	}
	.ab-draft-from {
		display: none;
	}
	.ab-drafts-head .only {
		display: none;
	}
}

/* Labels on an issue's page: the list's chip, with × to take it off, and a small field to add one. */
.ab-issue-labels {
	display: inline-flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--space-2);
}
.ab-issue-labels .ab-label {
	gap: 6px;
	padding-right: 4px;
}
.ab-issue-labels .ab-label a {
	color: inherit;
	text-decoration: none;
}
.ab-issue-labels .ab-label a:hover {
	text-decoration: underline;
}
.ab-label-add input {
	width: 120px;
	height: 24px;
	padding: 0 8px;
	border: 0;
	border-radius: 999px;
	box-shadow: inset 0 0 0 1px var(--rule);
	background: transparent;
	color: var(--ink);
	font-family: var(--font-mono);
	font-size: 12px;
}
.ab-label-add input::placeholder {
	color: var(--muted);
	font-family: var(--font-sans);
}
.ab-label-add input:focus {
	outline: 2px solid var(--ink);
	outline-offset: 1px;
}

/* The Drafts tab (the abso Drafts canvas, board Main): a facts row; Unpublished, Named drafts and Refused as rows in a bordered table; the quiet box. */
.ab-dr {
	display: flex;
	flex-direction: column;
	gap: 28px;
	padding: 24px 0 64px;
}
.ab-dr header {
	display: flex;
	flex-direction: column;
	gap: 6px;
}
.ab-dr h1 {
	margin: 0;
	font-size: 26px;
	line-height: 32px;
	font-weight: 750;
	letter-spacing: -0.02em;
}
.ab-dr-facts {
	margin: 0;
	color: var(--muted);
	font: var(--type-ui);
}
.ab-dr-mono {
	font-family: var(--font-mono);
	color: var(--ink);
	font-variant-numeric: tabular-nums;
}
.ab-dr-section {
	display: flex;
	flex-direction: column;
	gap: 10px;
}
.ab-dr-section .head {
	display: flex;
	align-items: baseline;
	gap: 8px;
}
.ab-dr-section h2 {
	margin: 0;
	font-size: 15px;
	line-height: 20px;
	font-weight: 650;
}
.ab-dr-section .head .ab-dr-mono {
	font-size: 12px;
	color: var(--muted);
}
.ab-dr-section .rows {
	border-radius: 8px;
	overflow: hidden;
	box-shadow: inset 0 0 0 1px var(--rule);
}
.ab-dr-row {
	display: grid;
	align-items: center;
	column-gap: 16px;
	min-height: 56px;
	padding: 8px 16px;
	border-bottom: 1px solid var(--rule);
}
.ab-dr-row:last-child {
	border-bottom: 0;
}
.ab-dr-row:hover {
	background: var(--wash);
}
.ab-dr-row .who,
.ab-dr-row .what {
	display: flex;
	flex-direction: column;
	min-width: 0;
}
.ab-dr-row .name {
	font-weight: 600;
}
.ab-dr-row .name.mono {
	font-family: var(--font-mono);
}
.ab-dr-row .sub {
	color: var(--muted);
	font-size: 12px;
	line-height: 16px;
}
.ab-dr-row .path {
	font-family: var(--font-mono);
	font-size: 12px;
	color: var(--ink);
	text-decoration: none;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}
.ab-dr-row .lines {
	display: flex;
	justify-content: flex-end;
	gap: 6px;
	font-family: var(--font-mono);
	font-size: 12px;
}
.ab-dr-row .lines .add {
	color: var(--pass);
}
.ab-dr-row .lines .del {
	color: var(--fail);
}
.ab-dr-base {
	color: var(--muted);
	font-size: 12px;
	white-space: nowrap;
}
.ab-dr-base .sep {
	margin: 0 6px;
	color: var(--faint);
}
.ab-dr-base .behind {
	color: var(--ink);
}
.ab-dr-row .when {
	color: var(--muted);
	font-size: 12px;
	text-align: right;
	white-space: nowrap;
}
.ab-dr-row .open {
	justify-self: end;
}
.ab-dr-row.is-unpublished {
	grid-template-columns: 16px minmax(140px, 1fr) minmax(0, 2fr) 64px 150px 150px 64px;
}
.ab-dr-row.is-named {
	grid-template-columns: 16px minmax(160px, 1fr) minmax(0, 1.6fr) 150px 150px;
}
.ab-dr-row.is-refused {
	grid-template-columns: 16px minmax(0, 1fr) auto;
}
.ab-dr-refused-mark {
	color: var(--fail);
}
.ab-dr-row .since {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	color: var(--muted);
	font-size: 12px;
	white-space: nowrap;
}
.ab-dr-row .since .ok {
	fill: var(--pass);
}
.ab-dr-row .since .tick {
	stroke: var(--paper);
}
.ab-dr-row .sub .sep {
	margin: 0 6px;
	color: var(--faint);
}
.ab-dr-fold {
	display: none;
	align-items: center;
	gap: 10px;
	min-height: 44px;
	padding: 0 16px;
	border: 0;
	border-radius: 8px;
	box-shadow: inset 0 0 0 1px var(--rule);
	background: transparent;
	color: var(--ink);
	font: var(--type-ui);
	cursor: pointer;
	text-align: left;
}
.ab-dr-fold .chev {
	margin-left: auto;
	color: var(--muted);
}
.ab-dr-quiet {
	display: flex;
	flex-direction: column;
	gap: 4px;
	padding: 16px;
	border-radius: 8px;
	box-shadow: inset 0 0 0 1px var(--rule);
	background: var(--surface);
}
.ab-dr-quiet span {
	color: var(--muted);
}
@media (max-width: 720px) {
	.ab-dr-row.is-unpublished,
	.ab-dr-row.is-named {
		grid-template-columns: 16px minmax(0, 1fr);
	}
	/* On a phone the whole row is the link and Open is not drawn: nothing can overflow. */
	.ab-dr-row.is-unpublished {
		position: relative;
	}
	.ab-dr-row.is-unpublished .open {
		position: static;
		width: 0;
		height: 0;
		padding: 0;
		border: 0;
		font-size: 0;
		overflow: visible;
	}
	.ab-dr-row.is-unpublished .open::after {
		content: "";
		position: absolute;
		inset: 0;
	}
	.ab-dr-row .what,
	.ab-dr-row .lines,
	.ab-dr-base,
	.ab-dr-row .versions {
		display: none;
	}
	.ab-dr-row.is-unpublished .when {
		display: none;
	}
	/* PhoneQuiet: no facts row; a named draft is a card (mark, name and owner, then its versions, base and when it moved); Refused is one line with its count that opens. */
	.ab-dr-facts {
		display: none;
	}
	.ab-dr h1 {
		font-size: 24px;
		line-height: 30px;
	}
	.ab-dr-row.is-named {
		display: flex;
		flex-wrap: wrap;
		align-items: center;
		gap: 4px 8px;
		padding: 14px 16px;
	}
	.ab-dr-row.is-named .who {
		flex: 1 1 calc(100% - 28px);
		flex-direction: row;
		align-items: center;
		gap: 8px;
	}
	.ab-dr-row.is-named .versions,
	.ab-dr-row.is-named .ab-dr-base {
		display: inline;
	}
	.ab-dr-row.is-named .versions + .ab-dr-base::before {
		content: "·";
		margin-right: 8px;
		color: var(--faint);
	}
	.ab-dr-row.is-named .when:not(:empty) {
		flex-basis: 100%;
		text-align: left;
	}
	.ab-dr-row.is-named .when:not(:empty)::before {
		content: "last moved ";
	}
	.ab-dr-section.is-named-cards .rows {
		display: flex;
		flex-direction: column;
		gap: 8px;
		border-radius: 0;
		overflow: visible;
		box-shadow: none;
	}
	.ab-dr-row.is-named {
		border: 0;
		border-radius: 8px;
		box-shadow: inset 0 0 0 1px var(--rule);
	}
	.ab-dr-section.is-fold .head {
		display: flex;
	}
	.ab-dr-section.is-fold .ab-dr-fold {
		display: flex;
	}
	.ab-dr-section.is-fold:not(.is-open) .rows {
		display: none;
	}
	.ab-dr-section.is-fold.is-open .ab-dr-fold .chev {
		transform: rotate(180deg);
	}
	.ab-dr-row.is-refused {
		grid-template-columns: 16px minmax(0, 1fr);
	}
	.ab-dr-row .since {
		grid-column: 2;
	}
}