/**
 * DevHub — Pre-launch checklist (the Cutover Ledger).
 *
 * Shared by the /pre-launch/ page and the project hub's Pre-launch tab, both drawn
 * by includes/devhub-pre-launch.php. `.tf-cutover*` is the checklist itself;
 * `.tf-prelaunch*` is the page, the cross-brand overview and the in-place status
 * editors. Visual language matches the Blocks and Pages tabs (dark theme, #1a1d21
 * panels, 8px radius, #68de7c accent). Hand-written like its siblings — no SCSS
 * source.
 */

.tf-cutover {
	display: flex;
	flex-direction: column;
	gap: 16px;
}

.tf-cutover__intro,
.tf-cutover__hosts,
.tf-cutover__empty {
	color: #d4d4d4;
	font-size: 13px;
	line-height: 1.6;
	margin: 0;
}

.tf-cutover__hosts {
	color: #888;
}

.tf-cutover__hosts strong {
	color: #e0e0e0;
	font-weight: 600;
}

.tf-cutover code {
	font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
	font-size: 12px;
	color: #e0e0e0;
	background: #111316;
	padding: 1px 5px;
	border-radius: 4px;
}

.tf-cutover__next {
	display: flex;
	flex-direction: column;
	gap: 6px;
	background: #1a1d21;
	border: 1px solid #2a2d31;
	border-left: 3px solid #68de7c;
	border-radius: 8px;
	padding: 14px 16px;
}

.tf-cutover__next-label {
	color: #68de7c;
	font-size: 11px;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.04em;
}

.tf-cutover__next-title {
	color: #e0e0e0;
	font-size: 14px;
}

.tf-cutover .tf-cutover__next-how {
	display: block;
	padding: 6px 8px;
	white-space: pre-wrap;
	overflow-wrap: anywhere;
}

.tf-cutover__next-meta {
	color: #888;
	font-size: 12px;
}

.tf-cutover__table {
	width: 100%;
	border-collapse: collapse;
	table-layout: fixed;
	font-size: 13px;
}

.tf-cutover__table thead th {
	color: #888;
	font-size: 11px;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.04em;
	text-align: left;
	padding: 6px 10px;
	border-bottom: 1px solid #2a2d31;
}

.tf-cutover__table tbody td {
	padding: 10px;
	border-bottom: 1px solid #1f2226;
	color: #d4d4d4;
	vertical-align: top;
}

.tf-cutover__table tbody tr:last-child td {
	border-bottom: 0;
}

.tf-cutover__col-num {
	width: 32px;
	color: #888;
}

.tf-cutover__col-kind {
	width: 140px;
	color: #aaa;
	font-size: 12px;
}

.tf-cutover__col-status {
	width: 24%;
	overflow-wrap: anywhere;
}

.tf-cutover__title,
.tf-cutover__key,
.tf-cutover__why,
.tf-cutover__waits,
.tf-cutover__note {
	display: block;
}

.tf-cutover__title {
	color: #e0e0e0;
}

.tf-cutover__key {
	margin-top: 2px;
	color: #888;
	font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
	font-size: 11px;
}

.tf-cutover__why,
.tf-cutover__note {
	margin-top: 4px;
	color: #999;
	font-size: 12px;
	line-height: 1.5;
}

.tf-cutover__waits {
	margin-top: 4px;
	color: #e0b050;
	font-size: 12px;
}

.tf-cutover__status--done {
	background: rgba(104, 222, 124, 0.15);
	color: #68de7c;
}

.tf-cutover__status--rehearsed {
	background: rgba(100, 160, 255, 0.15);
	color: #7fb0ff;
}

.tf-cutover__status--pending {
	background: rgba(224, 176, 80, 0.15);
	color: #e0b050;
}

/* Statuses a check can hold, and n/a — beside done / rehearsed / pending above. */
.tf-cutover__status--pass {
	background: rgba(104, 222, 124, 0.15);
	color: #68de7c;
}

.tf-cutover__status--fail {
	background: rgba(255, 110, 110, 0.15);
	color: #ff8a8a;
}

.tf-cutover__status--na {
	background: #2a2d31;
	color: #888;
}

/* ── Page ─────────────────────────────────────────────────────────── */

.tf-prelaunch {
	display: flex;
	flex-direction: column;
	gap: 20px;
}

.tf-prelaunch__title {
	margin: 0;
	color: #e0e0e0;
	font-size: 24px;
}

.tf-prelaunch__lede {
	margin: 4px 0 0;
	color: #999;
	font-size: 14px;
}

.tf-prelaunch__brand {
	margin: 12px 0 0;
	color: #e0e0e0;
	font-size: 18px;
}

/* ── Cross-brand overview ─────────────────────────────────────────── */

.tf-prelaunch__overview {
	width: 100%;
	border-collapse: collapse;
	background: #1a1d21;
	border: 1px solid #2a2d31;
	border-radius: 8px;
	font-size: 13px;
}

.tf-prelaunch__overview th {
	padding: 10px 12px;
	border-bottom: 1px solid #2a2d31;
	color: #888;
	font-size: 11px;
	font-weight: 600;
	text-align: left;
	text-transform: uppercase;
	letter-spacing: 0.04em;
}

.tf-prelaunch__overview td {
	padding: 10px 12px;
	border-bottom: 1px solid #1f2226;
	color: #d4d4d4;
}

.tf-prelaunch__overview tr:last-child td {
	border-bottom: 0;
}

.tf-prelaunch__overview tr.is-current td {
	background: #20242a;
}

.tf-prelaunch__overview a {
	color: #e0e0e0;
	font-weight: 600;
	text-decoration: none;
}

.tf-prelaunch__overview a:hover,
.tf-prelaunch__overview a:focus-visible {
	color: #68de7c;
}

.tf-prelaunch__num {
	text-align: right;
	font-variant-numeric: tabular-nums;
}

.tf-prelaunch__num--fail {
	color: #ff8a8a;
	font-weight: 600;
}

.tf-prelaunch__verdict {
	display: inline-block;
	padding: 2px 10px;
	border-radius: 999px;
	font-size: 12px;
	font-weight: 600;
}

.tf-prelaunch__verdict--ready {
	background: rgba(104, 222, 124, 0.15);
	color: #68de7c;
}

.tf-prelaunch__verdict--blocked {
	background: rgba(255, 110, 110, 0.15);
	color: #ff8a8a;
}

.tf-prelaunch__summary {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 10px;
	margin: 0;
	color: #999;
	font-size: 13px;
}

/* ── Severity groups ──────────────────────────────────────────────── */

.tf-prelaunch__group {
	display: flex;
	align-items: baseline;
	gap: 10px;
	margin: 8px 0 0;
	padding-left: 10px;
	border-left: 3px solid #2a2d31;
	color: #e0e0e0;
	font-size: 15px;
}

.tf-prelaunch__group--blocker {
	border-left-color: #ff8a8a;
}

.tf-prelaunch__group--should {
	border-left-color: #e0b050;
}

.tf-prelaunch__group--after-launch {
	border-left-color: #7fb0ff;
}

.tf-prelaunch__group-count {
	color: #888;
	font-size: 12px;
	font-weight: 400;
}

/* ── In-place status editors ──────────────────────────────────────── */

.tf-prelaunch__edit {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
	align-items: center;
}

/* Colour comes from the .tf-cutover__status--<status> class it carries. */
.tf-prelaunch__select {
	padding: 2px 6px;
	border: 1px solid #2a2d31;
	border-radius: 999px;
	font-size: 11px;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.04em;
	cursor: pointer;
}

.tf-prelaunch__note-input {
	flex: 1 1 120px;
	min-width: 0;
	padding: 3px 8px;
	border: 1px solid #2a2d31;
	border-radius: 4px;
	background: #111316;
	color: #d4d4d4;
	font-size: 12px;
}

.tf-prelaunch__save {
	padding: 3px 10px;
	border: 0;
	border-radius: 4px;
	background: #68de7c;
	color: #0f1113;
	font-size: 12px;
	font-weight: 600;
	cursor: pointer;
}

.tf-prelaunch__save:disabled {
	opacity: 0.6;
	cursor: default;
}

.tf-prelaunch__error {
	flex-basis: 100%;
	color: #ff8a8a;
	font-size: 12px;
}

@media (max-width: 900px) {

	.tf-cutover__table thead {
		display: none;
	}

	.tf-cutover__table,
	.tf-cutover__table tbody,
	.tf-cutover__table tr,
	.tf-cutover__table td {
		display: block;
		width: 100%;
	}

	.tf-cutover__table tr {
		padding: 10px 0;
		border-bottom: 1px solid #2a2d31;
	}

	.tf-cutover__table tbody td {
		padding: 4px 0;
		border-bottom: 0;
	}

	.tf-cutover__col-num {
		display: none !important;
	}

	.tf-cutover__table td[data-label]::before {
		content: attr(data-label);
		display: inline-block;
		min-width: 88px;
		color: #888;
		font-size: 11px;
		font-weight: 600;
		text-transform: uppercase;
		letter-spacing: 0.04em;
	}
}