/**
 * Tools — design turn 8, artboard 8a/8b.
 * Palette from admin-tokens.css, so this screen follows light/dark.
 */

.ag-tools {
	font-family: var(--ag-sans);
	color: var(--ag-text);
	max-width: 1200px;
}

.ag-tools__lede {
	max-width: 78ch;
	margin: 0 0 20px;
	font-size: 13.5px;
	line-height: 1.6;
	color: var(--ag-text-soft);
}

.ag-tools__lede strong { color: var(--ag-text); font-weight: 600; }

.ag-tools__cols {
	display: grid;
	grid-template-columns: minmax(0, 1fr) 300px;
	gap: 18px;
	align-items: start;
}

@media (max-width: 900px) {
	.ag-tools__cols { grid-template-columns: minmax(0, 1fr); }
}

.ag-tools__side { display: grid; gap: 18px; }

.ag-tools__panel {
	background: var(--ag-bg);
	border: 1px solid var(--ag-border);
	border-radius: 3px;
	overflow: hidden;
}

.ag-tools__bar {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 12px;
	padding: 11px 16px;
	background: var(--ag-bg-sunk);
	border-bottom: 1px solid var(--ag-rule);
}

.ag-tools__label {
	font-size: 10px;
	font-weight: 600;
	letter-spacing: .13em;
	text-transform: uppercase;
	color: var(--ag-text-faint);
}

.ag-tools__bar-note { font-size: 10.5px; color: var(--ag-text-mute); }

/* ─── a migration ─────────────────────────────────────────────────────── */

.ag-tools__migration {
	display: grid;
	grid-template-columns: 116px minmax(0, 1fr) 260px;
	gap: 18px;
	padding: 16px;
	border-bottom: 1px solid var(--ag-rule-soft);
}

@media (max-width: 1000px) {
	.ag-tools__migration { grid-template-columns: minmax(0, 1fr); gap: 10px; }
}

.ag-tools__state-head {
	display: flex;
	align-items: center;
	gap: 8px;
	font-size: 11.5px;
	font-weight: 600;
	color: var(--ag-text);
}

.ag-tools__swatch {
	display: inline-block;
	width: 9px;
	height: 9px;
	flex: none;
	background: var(--ag-text);
}

/* Not yet applied — the same half-filled mark the other screens use. */
.ag-tools__swatch--pending {
	border: 1px solid var(--ag-warn);
	background: linear-gradient(90deg, var(--ag-warn) 50%, transparent 50%);
}

.ag-tools__state-sub {
	display: block;
	font-family: var(--ag-mono);
	font-size: 10.5px;
	color: var(--ag-text-mute);
	margin-top: 4px;
	padding-left: 17px;
}

.ag-tools__title { font-size: 13.5px; font-weight: 600; color: var(--ag-text); }

.ag-tools__body {
	font-size: 12.5px;
	line-height: 1.6;
	color: var(--ag-text-soft);
	margin-top: 5px;
}

.ag-tools__measure {
	font-family: var(--ag-mono);
	font-size: 11px;
	color: var(--ag-text-mute);
	margin-top: 8px;
}

.ag-tools__note {
	margin-top: 9px;
	padding: 8px 10px;
	border-left: 2px solid var(--ag-warn-rule);
	background: var(--ag-warn-ground);
	font-size: 11.5px;
	line-height: 1.5;
	color: var(--ag-text);
}

.ag-tools__broken-head {
	font-size: 9px;
	font-weight: 600;
	letter-spacing: .13em;
	text-transform: uppercase;
	color: var(--ag-warn);
}

.ag-tools__broken-body {
	font-size: 11.5px;
	line-height: 1.55;
	color: var(--ag-text-soft);
	margin-top: 6px;
}

/* ─── standing note ───────────────────────────────────────────────────── */

.ag-tools__standing {
	padding: 14px 16px 16px;
	background: var(--ag-warn-ground);
	border-top: 1px solid var(--ag-warn-rule);
}

.ag-tools__standing-head {
	font-size: 9px;
	font-weight: 600;
	letter-spacing: .13em;
	text-transform: uppercase;
	color: var(--ag-warn);
	margin-bottom: 6px;
}

.ag-tools__standing p {
	margin: 0;
	font-size: 12px;
	line-height: 1.6;
	color: var(--ag-text-soft);
}

/* ─── side panels ─────────────────────────────────────────────────────── */

.ag-tools__fact {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 10px;
	padding: 7px 16px;
	font-size: 12px;
	color: var(--ag-text-soft);
}

.ag-tools__fact-value {
	font-family: var(--ag-mono);
	font-size: 11px;
	color: var(--ag-text);
	flex: none;
}

.ag-tools__side-note {
	margin: 0;
	padding: 10px 16px 14px;
	font-size: 11px;
	line-height: 1.5;
	color: var(--ag-text-mute);
}

.ag-tools__log { padding: 8px 0 10px; }

.ag-tools__log-line {
	padding: 3px 16px;
	font-family: var(--ag-mono);
	font-size: 10.5px;
	line-height: 1.5;
	color: var(--ag-text-mute);
	overflow-wrap: anywhere;
}

.ag-tools__check {
	display: flex;
	align-items: flex-start;
	gap: 9px;
	padding: 9px 16px;
	font-size: 12px;
	line-height: 1.45;
	color: var(--ag-text-soft);
	border-bottom: 1px solid var(--ag-rule-soft);
}

.ag-tools__check:last-child { border-bottom: 0; }
.ag-tools__check--open { color: var(--ag-warn); }
.ag-tools__check .ag-tools__swatch { margin-top: 3px; }