/**
 * NexWordX: Connect Account. The frontend card, Deploy to Vercel (steps, progress, log) and
 * the other hosts. Every class starts with nxp-admin-connect; the colour tokens come from
 * nexwordx-admin.css (.nxp-admin), with fallbacks so the screen reads without it.
 */

.nxp-admin-connect [hidden] {
	display: none !important;
}

.nxp-admin-connect .nxp-admin-connect__intro {
	max-width: 760px;
	margin: 4px 0 18px;
	color: var(--nxp-a-muted, #5f675d);
	font-size: 14px;
}

/* Wide screens: Vercel on the left, the frontend and the other hosts on the right. The DOM
 * order (frontend, Vercel, hosts) is the reading order on narrow screens. */
.nxp-admin-connect .nxp-admin-connect__grid {
	display: grid;
	grid-template-areas:
		"vercel frontend"
		"server frontend"
		"server hosts";
	grid-template-columns: minmax(0, 3fr) minmax(0, 2fr);
	align-items: start;
	gap: 18px;
}

.nxp-admin-connect .nxp-admin-connect-card--frontend {
	grid-area: frontend;
}

.nxp-admin-connect .nxp-admin-connect-card--vercel {
	grid-area: vercel;
}

.nxp-admin-connect .nxp-admin-connect-card--hosts {
	grid-area: hosts;
}

.nxp-admin-connect .nxp-admin-connect-card--server {
	grid-area: server;
}

@media (max-width: 1180px) {
	.nxp-admin-connect .nxp-admin-connect__grid {
		grid-template-areas:
			"frontend"
			"vercel"
			"server"
			"hosts";
		grid-template-columns: minmax(0, 1fr);
	}
}

/* Cards. */
.nxp-admin-connect .nxp-admin-connect-card {
	min-width: 0;
	padding: 20px 22px;
	border: 1px solid var(--nxp-a-line, #e1e4dd);
	border-radius: 14px;
	background: #fff;
	box-shadow: var(--nxp-a-shadow, 0 1px 2px rgba(16, 20, 15, 0.04));
}

.nxp-admin-connect .nxp-admin-connect-card__head {
	display: flex;
	align-items: flex-start;
	gap: 12px;
	margin: 0 0 18px;
}

.nxp-admin-connect .nxp-admin-connect-card__icon {
	display: grid;
	flex: none;
	place-items: center;
	width: 40px;
	height: 40px;
	border-radius: 10px;
	background: var(--nxp-a-dark, #10140f);
	color: var(--nxp-a-volt, #65f545);
}

.nxp-admin-connect .nxp-admin-connect-card__icon .dashicons {
	width: 22px;
	height: 22px;
	font-size: 22px;
}

.nxp-admin-connect .nxp-admin-connect-card__icon--vercel {
	background: #000;
}

/* Vercel's mark is a plain triangle: drawn, not shipped as a logo file. */
.nxp-admin-connect .nxp-admin-connect-triangle {
	width: 0;
	height: 0;
	border-right: 10px solid transparent;
	border-bottom: 17px solid #fff;
	border-left: 10px solid transparent;
	transform: translateY(-1px);
}

.nxp-admin-connect .nxp-admin-connect-card__title {
	flex: 1;
	min-width: 0;
}

.nxp-admin-connect .nxp-admin-connect-card__title h2 {
	margin: 2px 0 0;
	padding: 0;
	font-size: 16px;
	line-height: 1.3;
}

.nxp-admin-connect .nxp-admin-connect-card__title p {
	margin: 2px 0 0;
	color: var(--nxp-a-muted, #5f675d);
}

.nxp-admin-connect .nxp-admin-connect-pill {
	flex: none;
	padding: 3px 10px;
	border-radius: 999px;
	font-size: 12px;
	font-weight: 600;
	white-space: nowrap;
}

.nxp-admin-connect .nxp-admin-connect-pill.is-on {
	background: #e7f6ea;
	color: var(--nxp-a-green, #1e7a32);
}

.nxp-admin-connect .nxp-admin-connect-pill.is-off {
	background: #fff4dc;
	color: var(--nxp-a-amber, #8a5a00);
}

/* Fields. */
.nxp-admin-connect .nxp-admin-connect-field {
	margin: 0 0 18px;
}

.nxp-admin-connect .nxp-admin-connect-field > label,
.nxp-admin-connect .nxp-admin-connect-label {
	display: block;
	margin: 0 0 6px;
	font-weight: 600;
}

.nxp-admin-connect .nxp-admin-connect-field .description {
	margin: 6px 0 0;
}

.nxp-admin-connect .nxp-admin-connect-row {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px;
}

.nxp-admin-connect .nxp-admin-connect-row input[type="url"],
.nxp-admin-connect .nxp-admin-connect-row input[type="text"] {
	flex: 1 1 220px;
	min-width: 0;
	max-width: 100%;
}

.nxp-admin-connect .nxp-admin-connect-field > input[type="password"],
.nxp-admin-connect .nxp-admin-connect-field > input[type="text"] {
	width: 100%;
	max-width: 420px;
}

.nxp-admin-connect .nxp-admin-connect-subtitle {
	margin: 0 0 8px;
	font-size: 13px;
}

.nxp-admin-connect .nxp-admin-connect-actions {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px;
	margin: 0;
}

.nxp-admin-connect .nxp-admin-connect-check {
	display: flex;
	align-items: center;
	gap: 6px;
	margin: 10px 0 0;
	padding: 8px 12px;
	border-radius: 8px;
	background: #fff8e6;
	color: var(--nxp-a-amber, #8a5a00);
	font-weight: 600;
}

.nxp-admin-connect .nxp-admin-connect-check input {
	margin: 0;
}

.nxp-admin-connect .nxp-admin-connect-status {
	margin: 8px 0 0;
	font-weight: 600;
}

.nxp-admin-connect .nxp-admin-connect-status:empty {
	display: none;
}

.nxp-admin-connect .nxp-admin-connect-status.is-ok {
	color: var(--nxp-a-green, #1e7a32);
}

.nxp-admin-connect .nxp-admin-connect-status.is-error {
	color: var(--nxp-a-red, #b32d2e);
}

.nxp-admin-connect .nxp-admin-connect-status.is-busy {
	color: var(--nxp-a-muted, #5f675d);
}

.nxp-admin-connect .button-link.nxp-admin-connect-quiet,
.nxp-admin-connect .button-link.nxp-admin-connect-quiet:hover {
	color: var(--nxp-a-muted, #5f675d);
}

.nxp-admin-connect .button-link.nxp-admin-connect-danger,
.nxp-admin-connect .button-link.nxp-admin-connect-danger:hover,
.nxp-admin-connect .button-link.nxp-admin-connect-danger:focus {
	color: var(--nxp-a-red, #b32d2e);
}

.nxp-admin-connect .nxp-admin-connect-more {
	margin: 10px 0 0;
}

/* The warning about a WordPress site the internet cannot reach. */
.nxp-admin-connect .nxp-admin-connect-warning {
	display: flex;
	align-items: flex-start;
	gap: 12px;
	margin: 0 0 18px;
	padding: 16px 18px;
	border: 1px solid #f0d58a;
	border-radius: 14px;
	background: #fff8e6;
	color: #4d3800;
}

.nxp-admin-connect .nxp-admin-connect-warning > .dashicons {
	flex: none;
	width: 24px;
	height: 24px;
	color: var(--nxp-a-amber, #8a5a00);
	font-size: 24px;
}

.nxp-admin-connect .nxp-admin-connect-warning h2 {
	margin: 0 0 4px;
	padding: 0;
	font-size: 15px;
}

.nxp-admin-connect .nxp-admin-connect-warning p {
	max-width: 820px;
	margin: 0 0 4px;
}

/* The webhook log (compact). */
.nxp-admin-connect .nxp-admin-connect-webhooks {
	margin: 0;
	padding: 0;
	list-style: none;
}

.nxp-admin-connect .nxp-admin-connect-webhooks li {
	display: grid;
	grid-template-columns: 7.5em minmax(0, 1fr);
	gap: 2px 10px;
	margin: 0;
	padding: 7px 0;
	border-top: 1px solid var(--nxp-a-line, #e1e4dd);
}

.nxp-admin-connect .nxp-admin-connect-webhooks li:first-child {
	border-top: 0;
}

.nxp-admin-connect .nxp-admin-connect-webhooks__when {
	grid-row: span 2;
	color: var(--nxp-a-muted, #5f675d);
}

.nxp-admin-connect .nxp-admin-connect-webhooks__what {
	overflow-wrap: anywhere;
}

.nxp-admin-connect .nxp-admin-connect-webhooks__answer {
	font-weight: 600;
	overflow-wrap: anywhere;
}

.nxp-admin-connect .nxp-admin-connect-webhooks .is-ok .nxp-admin-connect-webhooks__answer {
	color: var(--nxp-a-green, #1e7a32);
}

.nxp-admin-connect .nxp-admin-connect-webhooks .is-error .nxp-admin-connect-webhooks__answer {
	color: var(--nxp-a-red, #b32d2e);
}

/* Vercel: connecting. */
.nxp-admin-connect .nxp-admin-connect-howto {
	margin: 0 0 16px 18px;
}

.nxp-admin-connect .nxp-admin-connect-howto li {
	margin: 0 0 6px;
}

.nxp-admin-connect .nxp-admin-connect-account {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 6px 10px;
	margin: 0 0 18px;
	padding: 10px 12px;
	border-radius: 10px;
	background: var(--nxp-a-soft, #f4f6f2);
}

.nxp-admin-connect .nxp-admin-connect-account > .dashicons {
	color: var(--nxp-a-green, #1e7a32);
}

.nxp-admin-connect .nxp-admin-connect-account__text {
	flex: 1 1 260px;
	min-width: 0;
	font-weight: 600;
	overflow-wrap: anywhere;
}

.nxp-admin-connect .nxp-admin-connect-account__actions {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
}

.nxp-admin-connect .button.nxp-admin-connect-deploy {
	min-width: 110px;
}

/* The live site. */
.nxp-admin-connect .nxp-admin-connect-last {
	margin: 0 0 18px;
	padding: 12px 14px;
	border: 1px solid var(--nxp-a-line, #e1e4dd);
	border-radius: 10px;
}

.nxp-admin-connect .nxp-admin-connect-last p {
	margin: 0 0 4px;
}

.nxp-admin-connect .nxp-admin-connect-last__site {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 6px;
	overflow-wrap: anywhere;
}

.nxp-admin-connect .nxp-admin-connect-live-dot {
	width: 9px;
	height: 9px;
	border-radius: 50%;
	background: var(--nxp-a-green, #1e7a32);
	box-shadow: 0 0 0 3px rgba(30, 122, 50, 0.18);
}

/* The deployment: six steps, the upload progress, the outcome and the log. */
.nxp-admin-connect .nxp-admin-connect-job {
	margin: 0 0 18px;
}

.nxp-admin-connect .nxp-admin-connect-steps {
	display: grid;
	grid-auto-columns: minmax(0, 1fr);
	grid-auto-flow: column;
	gap: 6px;
	margin: 0 0 14px;
	padding: 0;
	list-style: none;
	counter-reset: nxp-admin-connect-step;
}

.nxp-admin-connect .nxp-admin-connect-steps li {
	position: relative;
	margin: 0;
	padding: 32px 2px 0;
	color: var(--nxp-a-muted, #5f675d);
	font-size: 12px;
	line-height: 1.35;
	text-align: center;
	counter-increment: nxp-admin-connect-step;
}

.nxp-admin-connect .nxp-admin-connect-steps li::before {
	position: absolute;
	z-index: 1;
	top: 0;
	left: 50%;
	display: grid;
	place-items: center;
	box-sizing: border-box;
	width: 24px;
	height: 24px;
	margin-left: -12px;
	border: 1px solid var(--nxp-a-line, #e1e4dd);
	border-radius: 50%;
	background: #fff;
	content: counter(nxp-admin-connect-step);
	font-weight: 700;
}

/* The line joining a step to the next one. */
.nxp-admin-connect .nxp-admin-connect-steps li::after {
	position: absolute;
	top: 11px;
	right: calc(-50% + 9px);
	left: calc(50% + 15px);
	height: 2px;
	background: var(--nxp-a-line, #e1e4dd);
	content: "";
}

.nxp-admin-connect .nxp-admin-connect-steps li:last-child::after {
	display: none;
}

.nxp-admin-connect .nxp-admin-connect-steps li.is-done {
	color: var(--nxp-a-ink, #151a14);
}

.nxp-admin-connect .nxp-admin-connect-steps li.is-done::before {
	border-color: var(--nxp-a-green, #1e7a32);
	background: var(--nxp-a-green, #1e7a32);
	color: #fff;
	content: "\2713";
}

.nxp-admin-connect .nxp-admin-connect-steps li.is-done::after {
	background: var(--nxp-a-green, #1e7a32);
}

.nxp-admin-connect .nxp-admin-connect-steps li.is-active {
	color: var(--nxp-a-ink, #151a14);
	font-weight: 600;
}

.nxp-admin-connect .nxp-admin-connect-steps li.is-active::before {
	border-color: var(--nxp-a-dark, #10140f);
	background: var(--nxp-a-dark, #10140f);
	color: var(--nxp-a-volt, #65f545);
	animation: nxp-admin-connect-pulse 1.4s ease-in-out infinite;
}

.nxp-admin-connect .nxp-admin-connect-steps li.is-error {
	color: var(--nxp-a-red, #b32d2e);
	font-weight: 600;
}

.nxp-admin-connect .nxp-admin-connect-steps li.is-error::before {
	border-color: var(--nxp-a-red, #b32d2e);
	background: var(--nxp-a-red, #b32d2e);
	color: #fff;
	content: "!";
}

@keyframes nxp-admin-connect-pulse {

	0%,
	100% {
		box-shadow: 0 0 0 0 rgba(101, 245, 69, 0.45);
	}

	50% {
		box-shadow: 0 0 0 6px rgba(101, 245, 69, 0);
	}
}

@media (prefers-reduced-motion: reduce) {

	.nxp-admin-connect .nxp-admin-connect-steps li.is-active::before {
		animation: none;
	}
}

/* Phones: the steps as a list. */
@media (max-width: 600px) {

	.nxp-admin-connect .nxp-admin-connect-steps {
		grid-auto-flow: row;
		grid-template-columns: minmax(0, 1fr);
		gap: 8px;
	}

	.nxp-admin-connect .nxp-admin-connect-steps li {
		min-height: 24px;
		padding: 3px 0 0 34px;
		text-align: left;
	}

	.nxp-admin-connect .nxp-admin-connect-steps li::before {
		left: 0;
		margin-left: 0;
	}

	.nxp-admin-connect .nxp-admin-connect-steps li::after {
		display: none;
	}
}

.nxp-admin-connect .nxp-admin-connect-progress {
	display: grid;
	grid-template-columns: auto minmax(0, 1fr) auto;
	align-items: center;
	gap: 10px;
	margin: 0 0 12px;
}

.nxp-admin-connect .nxp-admin-connect-progress label {
	font-weight: 600;
}

.nxp-admin-connect .nxp-admin-connect-progress progress {
	width: 100%;
	height: 8px;
	overflow: hidden;
	border: 0;
	border-radius: 999px;
	background: var(--nxp-a-soft, #f4f6f2);
	appearance: none;
}

.nxp-admin-connect .nxp-admin-connect-progress progress::-webkit-progress-bar {
	border-radius: 999px;
	background: var(--nxp-a-soft, #f4f6f2);
}

.nxp-admin-connect .nxp-admin-connect-progress progress::-webkit-progress-value {
	border-radius: 999px;
	background: var(--nxp-a-green, #1e7a32);
}

.nxp-admin-connect .nxp-admin-connect-progress progress::-moz-progress-bar {
	border-radius: 999px;
	background: var(--nxp-a-green, #1e7a32);
}

.nxp-admin-connect .nxp-admin-connect-progress__text {
	color: var(--nxp-a-muted, #5f675d);
	font-variant-numeric: tabular-nums;
}

.nxp-admin-connect .nxp-admin-connect-alert {
	margin: 0 0 12px;
	padding: 12px 14px;
	border-radius: 10px;
}

.nxp-admin-connect .nxp-admin-connect-alert p {
	margin: 0 0 8px;
	overflow-wrap: anywhere;
}

.nxp-admin-connect .nxp-admin-connect-alert p:last-child {
	margin-bottom: 0;
}

.nxp-admin-connect .nxp-admin-connect-alert.is-error {
	border: 1px solid #f1c4c4;
	background: #fcf0f1;
	color: #6b1d1d;
}

.nxp-admin-connect .nxp-admin-connect-alert.is-ok {
	border: 1px solid #bfe3c7;
	background: #edf8ef;
	color: #14522a;
	font-weight: 600;
}

.nxp-admin-connect .nxp-admin-connect-alert.is-warning {
	border: 1px solid #f0d58a;
	background: #fff8e6;
	color: #4d3800;
	font-weight: 600;
}

.nxp-admin-connect .nxp-admin-connect-logbox summary {
	font-weight: 600;
	cursor: pointer;
}

.nxp-admin-connect .nxp-admin-connect-log {
	max-height: 260px;
	margin: 8px 0 0;
	padding: 10px 12px;
	overflow-y: auto;
	border-radius: 10px;
	background: var(--nxp-a-dark, #10140f);
	color: #e9ede6;
	font-family: Menlo, Consolas, "Liberation Mono", monospace;
	font-size: 12px;
	line-height: 1.6;
	list-style: none;
}

.nxp-admin-connect .nxp-admin-connect-log:empty {
	display: none;
}

.nxp-admin-connect .nxp-admin-connect-log li {
	margin: 0;
	overflow-wrap: anywhere;
}

.nxp-admin-connect .nxp-admin-connect-log time {
	margin-right: 6px;
	color: #8f9a8b;
}

.nxp-admin-connect .nxp-admin-connect-log .is-success {
	color: var(--nxp-a-volt, #65f545);
}

.nxp-admin-connect .nxp-admin-connect-log .is-warning {
	color: #ffd479;
}

.nxp-admin-connect .nxp-admin-connect-log .is-error {
	color: #ff9c9c;
}

.nxp-admin-connect .nxp-admin-connect-hobby {
	display: flex;
	align-items: flex-start;
	gap: 6px;
	margin: 6px 0 0;
	padding-top: 14px;
	border-top: 1px solid var(--nxp-a-line, #e1e4dd);
	color: var(--nxp-a-muted, #5f675d);
}

.nxp-admin-connect .nxp-admin-connect-hobby .dashicons {
	flex: none;
	width: 18px;
	height: 18px;
	font-size: 18px;
}

/* Other hosts. */
.nxp-admin-connect .nxp-admin-connect-download {
	margin: 0 0 14px;
}

.nxp-admin-connect .nxp-admin-connect-download .button .dashicons {
	width: 16px;
	height: 16px;
	margin-top: 5px;
	font-size: 16px;
}

.nxp-admin-connect .nxp-admin-connect-env,
.nxp-admin-connect .nxp-admin-connect-host pre {
	max-width: 100%;
	margin: 6px 0 12px;
	padding: 10px 12px;
	overflow-x: auto;
	border-radius: 10px;
	background: var(--nxp-a-dark, #10140f);
	color: #e9ede6;
	font-size: 12px;
	line-height: 1.7;
	white-space: pre;
}

.nxp-admin-connect .nxp-admin-connect-host {
	margin: 0 0 8px;
	padding: 10px 14px;
	border: 1px solid var(--nxp-a-line, #e1e4dd);
	border-radius: 10px;
	background: var(--nxp-a-soft, #f4f6f2);
}

.nxp-admin-connect .nxp-admin-connect-host summary {
	font-weight: 600;
	cursor: pointer;
}

.nxp-admin-connect .nxp-admin-connect-host ol {
	margin: 10px 0 4px 20px;
}

.nxp-admin-connect .nxp-admin-connect-host li {
	margin: 0 0 8px;
}

.nxp-admin-connect .nxp-admin-connect-host pre {
	white-space: pre-wrap;
	word-break: break-all;
}

/* Your own server: the command wraps and selects in one click. */
.nxp-admin-connect .nxp-admin-connect-server-command pre {
	white-space: pre-wrap;
	overflow-wrap: anywhere;
	user-select: all;
}

.nxp-admin-connect .nxp-admin-connect-server-command .nxp-admin-connect-nowrap {
	white-space: nowrap;
}