/* Clankwallah base styles. Feature sections are added below by later tasks. */

:root {
	--bg: #f6f7f9;
	--surface: #ffffff;
	--text: #1c2330;
	--muted: #5b6577;
	--border: #d9dde5;
	--accent: #2557d6;
	--accent-text: #ffffff;
	--danger: #b3261e;
	--focus: #2557d6;

	--space-1: 0.25rem;
	--space-2: 0.5rem;
	--space-3: 0.75rem;
	--space-4: 1rem;
	--space-5: 1.5rem;
	--radius: 6px;

	--font: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
	--mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
	color-scheme: light dark;
}

@media (prefers-color-scheme: dark) {
	:root {
		--bg: #12161d;
		--surface: #1a202a;
		--text: #e4e8ef;
		--muted: #9aa4b5;
		--border: #2c3442;
		--accent: #6b95f5;
		--accent-text: #0b1020;
		--danger: #f2877f;
		--focus: #8fb0ff;
	}
}

* {
	box-sizing: border-box;
}

body {
	margin: 0;
	background: var(--bg);
	color: var(--text);
	font: 15px/1.45 var(--font);
}

h1, h2, h3 {
	line-height: 1.2;
	margin: 0 0 var(--space-3);
}

/* A long word in a heading, such as a card's title, wraps anywhere: it
   cannot widen the page. */
h1 {
	font-size: 1.4rem;
	overflow-wrap: anywhere;
}

h2 { font-size: 1.15rem; }
h3 { font-size: 1rem; }

a {
	color: var(--accent);
}

code, pre {
	font-family: var(--mono);
	font-size: 0.9em;
}

:focus-visible {
	outline: 2px solid var(--focus);
	outline-offset: 2px;
}

.topbar {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--space-2) var(--space-5);
	padding: var(--space-2) var(--space-4);
	background: var(--surface);
	border-bottom: 1px solid var(--border);
}

.brand {
	font-weight: 700;
	color: var(--text);
	text-decoration: none;
}

.nav {
	display: flex;
	gap: var(--space-1);
	flex: 1 1 auto;
}

.nav-link {
	padding: var(--space-1) var(--space-3);
	border-radius: var(--radius);
	color: var(--muted);
	text-decoration: none;
}

.nav-link:hover {
	color: var(--text);
}

.nav-link.active {
	color: var(--text);
	background: var(--bg);
	font-weight: 600;
}

.user {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	margin-left: auto;
	gap: var(--space-3);
}

.user form {
	margin: 0;
}

.content {
	padding: var(--space-4);
	max-width: 1400px;
	margin: 0 auto;
}

.button {
	font: inherit;
	padding: var(--space-1) var(--space-3);
	border: 1px solid var(--border);
	border-radius: var(--radius);
	background: var(--surface);
	color: var(--text);
	cursor: pointer;
}

.button:hover {
	border-color: var(--accent);
}

.button.primary {
	background: var(--accent);
	border-color: var(--accent);
	color: var(--accent-text);
}

/* Board */

.visually-hidden {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
}

.board-head {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--space-3) var(--space-5);
	margin-bottom: var(--space-3);
}

.board-head h1 {
	margin: 0;
}

.filters {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--space-2);
	flex: 1;
}

.filters input[type="search"] {
	flex: 1 1 14rem;
	max-width: 24rem;
}

input[type="text"],
input[type="search"],
input[type="email"],
input[type="number"],
select,
textarea {
	font: inherit;
	padding: var(--space-1) var(--space-2);
	border: 1px solid var(--border);
	border-radius: var(--radius);
	background: var(--surface);
	color: var(--text);
}

.filters .button {
	margin-left: auto;
}

/* Every column is as tall as the tallest and its cards fill it, so that a
   column takes a drop anywhere in its height (board.js finds the column). */
.columns {
	display: flex;
	gap: var(--space-3);
	align-items: stretch;
	overflow-x: auto;
	padding-bottom: var(--space-3);
}

.board-empty {
	margin: 0 0 var(--space-3);
	color: var(--muted);
}

/* A notice above a page's content, such as that no runner can take a card. */
.notice {
	margin: 0 0 var(--space-3);
	color: var(--danger);
}

.column {
	display: flex;
	flex-direction: column;
	flex: 1 0 15rem;
	min-width: 15rem;
	background: var(--bg);
	border: 1px solid var(--border);
	border-radius: var(--radius);
	padding: var(--space-2);
}

.column-head {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	padding: var(--space-1) var(--space-1) var(--space-2);
}

.column-head h2 {
	margin: 0;
	font-size: 0.85rem;
	text-transform: uppercase;
	letter-spacing: 0.04em;
	color: var(--muted);
}

.count {
	font-size: 0.8rem;
	color: var(--muted);
}

.cards {
	display: flex;
	flex-direction: column;
	flex: 1 1 auto;
	gap: var(--space-2);
	min-height: 2.5rem;
}

.card {
	background: var(--surface);
	border: 1px solid var(--border);
	border-radius: var(--radius);
	padding: var(--space-2) var(--space-3);
}

.card-title {
	display: block;
	color: var(--text);
	font-weight: 600;
	font-size: 0.9rem;
	text-decoration: none;
	overflow-wrap: anywhere;
}

.card-title:hover {
	color: var(--accent);
}

.card-meta {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--space-1) var(--space-2);
	margin-top: var(--space-1);
	font-size: 0.78rem;
	color: var(--muted);
}

.chip {
	padding: 0 var(--space-2);
	border: 1px solid var(--border);
	border-radius: 999px;
	line-height: 1.5;
}

.chip-project {
	color: var(--text);
}

.chip-label {
	border-color: var(--accent);
	color: var(--accent);
}

.pr-merge-refusal {
	color: var(--muted);
}

/* Why a card in Done cannot be merged: it must not look like a green one. */
.chip-merge-block {
	border-color: var(--danger);
	color: var(--danger);
}

.chip.merging {
	background: var(--accent);
	border-color: var(--accent);
	color: var(--accent-text);
}

.owner {
	margin-left: auto;
	display: inline-grid;
	place-items: center;
	min-width: 1.6rem;
	height: 1.6rem;
	padding: 0 var(--space-1);
	border-radius: 999px;
	background: var(--accent);
	color: var(--accent-text);
	font-size: 0.7rem;
	font-weight: 700;
}

.dialog {
	width: min(32rem, calc(100vw - 2rem));
	padding: var(--space-4);
	border: 1px solid var(--border);
	border-radius: var(--radius);
	background: var(--surface);
	color: var(--text);
}

.dialog::backdrop {
	background: rgb(0 0 0 / 0.45);
}

.stack {
	display: flex;
	flex-direction: column;
	gap: var(--space-3);
}

.stack label {
	display: flex;
	flex-direction: column;
	gap: var(--space-1);
	font-size: 0.9rem;
}

.stack [hidden] {
	display: none;
}

.dialog-actions {
	display: flex;
	justify-content: flex-end;
	gap: var(--space-2);
}

.form-error {
	margin: 0;
	color: var(--danger);
	font-weight: 600;
}

.card[draggable="true"] {
	cursor: grab;
}

.card.dragging {
	opacity: 0.4;
}

.card-placeholder {
	min-height: 2.5rem;
	border: 2px dashed var(--accent);
	border-radius: var(--radius);
}

.cards.drop-target {
	outline: 2px dashed var(--accent);
	outline-offset: 2px;
}

#toast {
	position: fixed;
	left: 50%;
	bottom: var(--space-4);
	transform: translateX(-50%);
	max-width: calc(100vw - 2rem);
	padding: var(--space-2) var(--space-4);
	border-radius: var(--radius);
	background: var(--text);
	color: var(--bg);
	box-shadow: 0 2px 8px rgb(0 0 0 / 0.3);
}

#toast:empty {
	display: none;
}

/* Card page, projects and runners pages. */
.card-page {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(280px, 380px);
	gap: var(--space-5);
	align-items: start;
}

.card-main {
	max-width: 72ch;
}

.meta-line {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--space-2);
	color: var(--muted);
	margin: 0 0 var(--space-4);
}

.chip-column {
	background: var(--accent);
	color: var(--accent-text);
}

.muted {
	color: var(--muted);
}

.markdown {
	line-height: 1.55;
	overflow-wrap: anywhere;
}

.markdown :first-child { margin-top: 0; }

.markdown pre {
	overflow-x: auto;
	padding: var(--space-3);
	background: var(--surface);
	border: 1px solid var(--border);
	border-radius: var(--radius);
}

.markdown table {
	border-collapse: collapse;
	display: block;
	max-width: 100%;
	overflow-x: auto;
}

/* A table keeps whole words and scrolls inside its own box (display: block
   above); outside tables a long word still breaks anywhere. */
.markdown th,
.markdown td {
	border: 1px solid var(--border);
	padding: var(--space-1) var(--space-2);
	overflow-wrap: normal;
}

.markdown img {
	max-width: 100%;
}

.card-main section {
	margin-bottom: var(--space-5);
}

.card-main textarea {
	width: 100%;
	font-family: var(--mono);
}

.card-main input[type="text"] {
	width: 100%;
}

.check {
	flex-direction: row !important;
	align-items: center;
}

.panel {
	background: var(--surface);
	border: 1px solid var(--border);
	border-radius: var(--radius);
	padding: var(--space-3) var(--space-4);
	margin-bottom: var(--space-4);
}

.panel h2 {
	margin-top: 0;
}

.panel dl {
	display: grid;
	grid-template-columns: max-content 1fr;
	gap: var(--space-2) var(--space-4);
	margin: 0 0 var(--space-3);
}

.panel dt {
	color: var(--muted);
}

.pr-panel[data-checks="failing"] .pr-checks {
	color: var(--danger);
}

.pr-panel p {
	margin: 0;
	font-size: 0.875rem;
}

.request-changes textarea,
.review-failed textarea {
	width: 100%;
	font-family: var(--mono);
}

/* The live line that a failed review's forms need a reload is for a page
   opened before the review failed; where the forms are, it is not shown. */
#card-review-failed ~ #card-side .review-failed-live {
	display: none;
}

/* The live line that the hold for a failed review ended is for a page that
   still shows that review's forms; everywhere else it is not shown. */
.review-decided-live {
	display: none;
}

#card-review-failed.review-failed-open ~ #card-side .review-decided-live {
	display: block;
}

.panel dd {
	margin: 0;
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: var(--space-2);
}

form.inline {
	display: inline;
	margin: 0;
}

/* A long word in the timeline, such as a command an agent asked for, wraps
   anywhere: it cannot give the grid item a wide min-content and widen the
   page. */
.timeline {
	grid-column: 1 / -1;
	min-width: 0;
	max-width: 72ch;
	overflow-wrap: anywhere;
}

.timeline ol {
	list-style: none;
	margin: 0;
	padding: 0;
	border-left: 2px solid var(--border);
}

.timeline li {
	padding: var(--space-1) var(--space-3);
	overflow-wrap: anywhere;
}

.timeline time {
	color: var(--muted);
	font-size: 0.85rem;
	margin-right: var(--space-2);
}

/* Every wide table sits in one of these: it scrolls sideways inside its
   panel instead of widening the page. */
.table-scroll {
	max-width: 100%;
	overflow-x: auto;
	/* Room for a focus ring at the table's edge: :focus-visible draws 2px
	   at an offset of 2px, which the scrolling box would clip. */
	padding: 4px;
}

.table {
	width: 100%;
	border-collapse: collapse;
	background: var(--surface);
	font-size: 0.92rem;
}

.table th,
.table td {
	text-align: left;
	padding: var(--space-2) var(--space-3);
	border-bottom: 1px solid var(--border);
}

.table th {
	color: var(--muted);
	font-weight: 600;
}

.manage {
	display: flex;
	flex-direction: column;
	gap: var(--space-4);
	max-width: 1000px;
}

.manage .stack input[type="text"] {
	max-width: 360px;
}

.push-actions {
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-2);
}

.push-actions [hidden] {
	display: none;
}

.token-panel code {
	display: block;
	padding: var(--space-2) var(--space-3);
	border: 1px solid var(--border);
	border-radius: var(--radius);
	word-break: break-all;
	user-select: all;
}

@media (max-width: 800px) {
	.card-page {
		grid-template-columns: minmax(0, 1fr);
		gap: 0;
	}

	/* One column, in the order a person on a phone needs it: the title, the
	   live line, the description, then the pull request with its Merge
	   button and the Request changes form, then the thread, attachments and
	   edit form, the side panels and the timeline. The two columns' children
	   become the grid's items, so that order can interleave them; their own
	   margins keep them apart. A new section in .card-main or .card-column
	   must be given an order here on purpose: without one it has order 0
	   and lands between the description and the pull request. */
	.card-main,
	.card-column {
		display: contents;
	}

	/* .card-main's max-width no longer applies once it has no box: its
	   sections keep the same measure themselves. */
	.card-main > * {
		max-width: 72ch;
	}

	#card-comments,
	#card-attachments,
	#card-edit {
		order: 1;
	}

	/* After the Request changes form, as in the document. */
	#card-review-failed {
		order: 0;
	}

	#card-side {
		order: 2;
	}

	.card-page > .timeline {
		order: 3;
	}
}

/* Session page */

.session-page {
	display: flex;
	flex-direction: column;
	gap: var(--space-4);
	max-width: 1000px;
}

.session-facts {
	display: grid;
	grid-template-columns: max-content 1fr;
	gap: var(--space-1) var(--space-4);
	margin: 0 0 var(--space-3);
}

.session-facts dt {
	color: var(--muted);
}

.session-facts dd {
	margin: 0;
}

.session-actions {
	display: flex;
	gap: var(--space-2);
	align-items: center;
}

/* How a session ended: the runner's error and the agent's summary. */
.session-outcome {
	margin: 0 0 var(--space-3);
}

.session-outcome p {
	margin: 0;
	white-space: pre-wrap;
	overflow-wrap: anywhere;
}

.session-error p {
	color: var(--danger);
}

.button.danger {
	border-color: var(--danger);
	color: var(--danger);
}

.log {
	display: flex;
	flex-direction: column;
	gap: var(--space-2);
}

.log .load-earlier {
	align-self: center;
}

.item {
	padding: var(--space-2) var(--space-3);
	border: 1px solid var(--border);
	border-left-width: 4px;
	border-radius: var(--radius);
	background: var(--surface);
	min-width: 0;
}

.item.sub {
	margin-left: var(--space-5);
}

.item-text { border-left-color: var(--accent); }
.item-thinking { border-left-color: var(--muted); }
.item-tool_use,
.item-tool_result { border-left-color: var(--border); }
.item-result { border-left-color: var(--accent); }
.item-stderr,
.item-rate_limit { border-left-color: var(--danger); }

.item summary {
	cursor: pointer;
}

.item-head {
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-2);
	align-items: baseline;
}

.item-time {
	color: var(--muted);
	font-family: var(--mono);
	font-size: 0.8rem;
}

.item-title {
	font-weight: 600;
	overflow-wrap: anywhere;
}

.item-thinking .item-title,
.item-note .item-title {
	color: var(--muted);
}

.item pre.item-body {
	margin: var(--space-2) 0 0;
	font-family: var(--mono);
	font-size: 0.85rem;
	white-space: pre-wrap;
	overflow-wrap: anywhere;
	max-height: 24rem;
	overflow: auto;
}

.item .markdown {
	margin-top: var(--space-2);
}

.item-cut {
	margin: var(--space-1) 0 0;
	font-size: 0.85rem;
}

.badge {
	padding: 0 var(--space-2);
	border: 1px solid var(--border);
	border-radius: 999px;
	font-size: 0.75rem;
}

.badge-error {
	border-color: var(--danger);
	color: var(--danger);
}

/* Alerts and the bell */

.bell {
	display: inline-flex;
	align-items: center;
	gap: var(--space-2);
	padding: var(--space-1) var(--space-3);
	border-radius: var(--radius);
	color: var(--muted);
	text-decoration: none;
}

/* The bell's live wrapper has no box: the bell is the topbar's flex item,
   as its order and margins in the phone layout expect. */
.bell-live {
	display: contents;
}

.runners-roles-live {
	display: contents;
}

.bell:hover {
	color: var(--text);
}

.bell-count {
	min-width: 1.5em;
	padding: 0 var(--space-2);
	border-radius: 999px;
	background: var(--danger);
	color: var(--surface);
	font-size: 0.8rem;
	font-weight: 700;
	text-align: center;
}

.alerts-page {
	display: flex;
	flex-direction: column;
	gap: var(--space-3);
	max-width: 900px;
}

.alerts-head {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: var(--space-3);
}

.alerts-head h1 {
	margin: 0;
}

.alerts-views {
	display: flex;
	gap: var(--space-1);
}

#alert-list {
	display: flex;
	flex-direction: column;
	gap: var(--space-3);
}

.alert {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	gap: var(--space-3);
	padding: var(--space-3) var(--space-4);
	background: var(--surface);
	border: 1px solid var(--border);
	border-left-width: 4px;
	border-radius: var(--radius);
}

.alert[data-kind="permission"],
.alert[data-kind="comment"] {
	border-left-color: var(--accent);
}

.alert[data-kind="problem"],
.alert[data-kind="session_failed"] {
	border-left-color: var(--danger);
}

.alert-body {
	flex: 1 1 20rem;
	min-width: 0;
}

.alert-title {
	margin: 0 0 var(--space-1);
	font-size: 1rem;
	overflow-wrap: anywhere;
}

.alert .meta-line {
	margin: 0 0 var(--space-2);
}

.alert-text {
	margin: 0;
	white-space: pre-wrap;
	overflow-wrap: anywhere;
}

/* What a permission request asks, from a runner or an agent. */
.alert pre.action {
	margin: 0 0 var(--space-2);
	padding: var(--space-2) var(--space-3);
	background: var(--bg);
	border: 1px solid var(--border);
	border-radius: var(--radius);
	white-space: pre-wrap;
	overflow-wrap: anywhere;
}

.alert-reason {
	margin: 0 0 var(--space-2);
	overflow-wrap: anywhere;
}

.alert-detail summary {
	cursor: pointer;
}

.alert-detail pre {
	max-height: 24rem;
	overflow: auto;
	margin: var(--space-2) 0 0;
}

.decide-form {
	flex: 1 1 18rem;
}

.decide-form input[type="text"] {
	width: 100%;
}

.decide-buttons {
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-2);
}

/* The pattern wraps, so that its end, where a * usually is, stays in view.
   Where the browser has field-sizing, the field is as tall as the pattern;
   elsewhere its rows (patternRows) leave room for it. */
.decide-form .pattern-field {
	font-family: var(--mono);
	width: 100%;
	min-height: 44px;
	field-sizing: content;
	resize: vertical;
	overflow-wrap: anywhere;
}

.pattern-note {
	margin: 0;
	font-size: 0.85rem;
}

/* A grant's pattern is shown as it matches: every space counts. */
.grant-list {
	list-style: none;
	margin: 0;
	padding: 0;
}

.grant-list li {
	padding: var(--space-2) 0;
	border-bottom: 1px solid var(--border);
}

.grant-pattern {
	white-space: pre-wrap;
	overflow-wrap: anywhere;
	margin-left: var(--space-2);
}

.grant-list form {
	margin: 0;
}

.alert-actions {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-start;
	gap: var(--space-2);
}

.alert-actions form {
	margin: 0;
}

.chip-blocking {
	border-color: var(--danger);
	color: var(--danger);
}

.alert-resolved {
	opacity: 0.8;
}

.resolved-alerts summary {
	cursor: pointer;
	margin-bottom: var(--space-3);
}

.resolved-alerts .alert {
	margin-bottom: var(--space-2);
}

/* The bar that replaces a refresh the person would have lost typing to. */
.alert-stale {
	display: none;
	margin: 0;
	padding: var(--space-2) var(--space-3);
	border: 1px solid var(--accent);
	border-radius: var(--radius);
	background: var(--surface);
}

#alert-list[data-stale] .alert-stale {
	display: block;
}

.card-alerts {
	margin: 0;
	padding-left: var(--space-4);
}

/* The thread of comments on the card page and the form below it. */
#card-thread {
	display: flex;
	flex-direction: column;
	gap: var(--space-3);
	margin-bottom: var(--space-3);
}

.comment {
	padding: var(--space-3) var(--space-4);
	background: var(--surface);
	border: 1px solid var(--border);
	border-left-width: 4px;
	border-radius: var(--radius);
	overflow-wrap: anywhere;
}

.comment[data-author="agent"] {
	border-left-color: var(--accent);
}

.comment .meta-line {
	margin: 0 0 var(--space-2);
}

.comment .markdown > :last-child {
	margin-bottom: 0;
}

#comment-form textarea,
.answer-form textarea {
	width: 100%;
	font-family: var(--mono);
}

.answer-form {
	flex: 1 1 18rem;
}

@media (max-width: 700px) {
	.topbar {
		flex-wrap: wrap;
		gap: var(--space-2) var(--space-3);
	}

	/* Brand, bell and user on the first row; the navigation below it. */
	.brand {
		order: 1;
	}

	.bell {
		order: 2;
		margin-left: auto;
	}

	.user {
		order: 3;
		margin-left: 0;
	}

	.nav {
		order: 4;
		flex: 0 0 100%;
		overflow-x: auto;
		white-space: nowrap;
	}

	.alerts-page {
		max-width: none;
	}

	.alert {
		flex-direction: column;
	}

	/* The column wraps, so a line is as wide as its widest item: the body
	   is held to the alert's width, and a table in it scrolls inside its
	   own box (.markdown table). */
	.alert-body {
		flex-basis: auto;
		min-width: 0;
		max-width: 100%;
	}

	.alert-actions {
		flex-direction: column;
		align-items: stretch;
	}

	.alert-actions .button,
	.alert-actions input[type="text"] {
		min-height: 44px;
		width: 100%;
	}

	.alert pre {
		white-space: pre-wrap;
		overflow-wrap: anywhere;
	}

	/* Fields iOS does not zoom into. The typed inputs are named for their
	   specificity: the rule that sets their font is an attribute selector. */
	input,
	input[type="text"],
	input[type="search"],
	input[type="email"],
	input[type="number"],
	select,
	textarea {
		font-size: 16px;
	}

	/* Targets a finger can hit. */
	.button,
	.nav-link,
	.bell,
	.filters input,
	.filters select,
	.check,
	select {
		min-height: 40px;
	}

	/* A link styled as a button, such as Raw log, centres its text too. */
	.button:not([hidden]),
	.nav-link {
		display: inline-flex;
		align-items: center;
		justify-content: center;
	}

	/* A Blocked chip may wrap at a phone's width, so its corners and padding
	   suit two lines. */
	.chip-blocked {
		border-radius: var(--radius);
		padding: 1px var(--space-2);
	}

	/* A link in a chip, such as Blocked by #N, stays inline: vertical
	   padding on an inline box grows the area a finger hits without making
	   the line or the chip taller. Its text box is about 14px (0.78rem
	   text), so 13px above and below make it 40px; the chip around it is
	   about 22px (17.5px line, 1px padding and 1px border each side), so
	   the link reaches about 9px above and below the chip. The rows of
	   chips leave room for that: 20px between two rows covers the 9px of
	   each, and 12px above the first row keeps it off the card's title. */
	.chip-blocked a {
		padding: 13px 0;
	}

	.card-meta,
	#card-live {
		row-gap: 20px;
	}

	.card-meta {
		margin-top: 12px;
	}

	/* Should any of it still reach the title, the title wins the tap. */
	.card-title {
		position: relative;
		z-index: 1;
	}

	/* A link that is a row of a list is a target a finger can hit. */
	.epic-subcards a,
	.dep-list a {
		padding-block: 10px;
	}

	/* Every summary, such as "Why it waits" or "Resolved (n)". */
	summary {
		min-height: 40px;
		padding-block: 9px;
	}

	/* In the column of an alert's actions a form is as tall as its fields. */
	.answer-form,
	.decide-form {
		flex: 0 0 auto;
	}
}

.files {
  list-style: none;
  margin: 0 0 1rem;
  padding: 0;
}

.files li {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
  padding: 0.25rem 0;
}

/* Waits, decisions and the message form on the session page. */

.session-wait,
.session-link {
	margin: 0 0 var(--space-2);
	overflow-wrap: anywhere;
}

.resume-message {
	margin: 0 0 var(--space-3);
}

.resume-message pre,
.blocked-list pre {
	margin: var(--space-2) 0 0;
	font-family: var(--mono);
	font-size: 0.85rem;
	white-space: pre-wrap;
	overflow-wrap: anywhere;
	max-height: 16rem;
	overflow: auto;
}

.earlier-part {
	margin: 0 0 var(--space-2);
}

.message-form {
	margin-top: var(--space-3);
}

.message-form textarea {
	width: 100%;
	box-sizing: border-box;
}

.permission-chip {
	display: inline-block;
	margin: var(--space-2) 0 0;
	padding: 0 var(--space-2);
	border: 1px solid var(--border);
	border-radius: var(--radius);
	font-size: 0.85rem;
	overflow-wrap: anywhere;
}

.blocked-list {
	margin: 0 0 var(--space-2);
	padding-left: var(--space-4);
}

.blocked-list summary {
	cursor: pointer;
	overflow-wrap: anywhere;
}

@media (max-width: 700px) {
	.session-page {
		max-width: 100%;
		min-width: 0;
	}

	.session-header {
		overflow-wrap: anywhere;
	}

	/* The facts stay a grid of two columns: the name, then the value. */
	.session-facts {
		grid-template-columns: minmax(0, max-content) minmax(0, 1fr);
		gap: var(--space-1) var(--space-3);
	}

	.session-actions {
		flex-direction: column;
		align-items: stretch;
	}

	.session-actions form {
		display: block;
	}

	.session-actions form,
	.session-actions .button,
	.message-form .button {
		width: 100%;
		min-height: 44px;
		box-sizing: border-box;
	}

	.item pre {
		white-space: pre-wrap;
		overflow-wrap: anywhere;
	}

	.item.sub {
		margin-left: 0.75rem;
	}

	/* iOS Safari zooms the page when a field with a smaller font gets focus. */
	.session-header input,
	.session-header textarea {
		font-size: 16px;
	}
}

/* A comment from GitHub: the place in the code of an inline remark, and
   the chip of an author from outside the organisation. */
.comment-place {
	margin: 0;
	color: var(--muted);
	overflow-wrap: anywhere;
}

.chip-outside {
	border-color: var(--danger);
}

/* The review rounds of a card, grouped by claim, newest first. */
.review-claim h3 {
	margin: var(--space-3) 0 var(--space-2);
	font-size: 1rem;
}

.review {
	border-top: 1px solid var(--border);
	padding-top: var(--space-2);
	margin-bottom: var(--space-3);
}

.review-head {
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-2);
	margin: 0 0 var(--space-2);
}

.review-findings {
	margin: 0;
	padding-left: var(--space-3);
}

.review-findings li {
	margin-bottom: var(--space-2);
}

.review-findings code {
	overflow-wrap: anywhere;
}

.chip-review-failed,
.severity-critical {
	border-color: var(--danger);
	color: var(--danger);
}

.severity-important {
	border-color: var(--accent);
	color: var(--accent);
}

/* The plan of a card and what it waits for (phase 4). An agent's text
   wraps inside the panel, never wider than the screen. */
.plan-verdict {
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-2);
	margin: 0 0 var(--space-2);
}

.plan .agent-text {
	white-space: pre-wrap;
	overflow-wrap: anywhere;
}

/* The planner's outcome on its own page: wrapped inside its box. */
.plan-outcome {
	max-width: 100%;
	margin: 0;
	padding: var(--space-2);
	border: 1px solid var(--border);
	border-radius: var(--radius);
	background: var(--surface);
	font-size: 0.85rem;
	white-space: pre-wrap;
	overflow-wrap: anywhere;
	overflow-x: auto;
}

.dep-list {
	margin: 0;
	padding: 0;
	list-style: none;
}

.dep-list li {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--space-2);
	margin-bottom: var(--space-2);
}

.dep-list a {
	overflow-wrap: anywhere;
}

.chip-blocked a {
	color: inherit;
}

/* An epic's subcards and its chips (Task 6). */
.epic-subcards {
	margin: 0;
	padding: 0;
	list-style: none;
}

.epic-subcards li {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: var(--space-2);
	margin-bottom: var(--space-2);
}

.epic-subcards a,
#card-epic p {
	overflow-wrap: anywhere;
	min-width: 0;
}

.chip-epic,
.chip-progress {
	border-color: var(--accent);
	color: var(--accent);
}