/**
 * PM Software Core - scoped styling for the [an] shortcode and the /go gate.
 * Every rule is namespaced so the host theme is never affected.
 */

/* The hidden attribute must win over theme display rules. */
.psc-anlink__result[hidden],
.psc-gate__reveal[hidden],
.psc-gate__status[hidden],
.psc-gate__progress[hidden],
.psc-anlink__status[hidden] {
	display: none !important;
}

.psc-anlink {
	margin: 0.75em 0;
}

.psc-anlink__status {
	font-weight: 600;
	font-family: Arial, Helvetica, sans-serif;
}

.psc-anlink__time {
	font-variant-numeric: tabular-nums;
}

/* Announce completion once; the visible timer has its own non-live semantics. */
.psc-anlink__announcement {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
	border: 0;
}

.psc-anlink__result {
	margin-top: 0.5em;
}

/* ------------------------------------------------------------------ gate --- */

/* Remove the inherited illustration only on the bound gateway page. */
body.psc-gateway-page {
	background-image: none;
	background-color: var(--bg, #f5f6f8);
}

.psc-gate {
	--gate-surface: var(--surface, #fff);
	--gate-text: var(--text-strong, #20252b);
	--gate-muted: var(--muted-strong, #59636d);
	--gate-border: var(--border, #dce1e6);
	--gate-primary: var(--primary, #2465a7);
	--gate-on-primary: var(--primary-contrast, #fff);
	--gate-success: var(--success, #16704a);
	--gate-error: var(--error, #b42318);
	width: 100%;
	min-width: 0;
	min-height: 580px;
	min-height: max(580px, calc(100svh - 180px));
	display: grid;
	align-content: center;
	padding: 48px 24px 64px;
	color: var(--gate-text);
	font-family: inherit;
	text-align: center;
}

.psc-gate *,
.psc-gate {
	box-sizing: border-box;
}

.psc-gate__inner {
	width: 100%;
	max-width: 740px;
	margin-inline: auto;
	padding: 36px 48px 28px;
	background: var(--gate-surface);
	border: 1px solid var(--gate-border);
	border-radius: var(--r-lg, 12px);
	box-shadow: var(--shadow-sm, 0 1px 2px rgb(16 20 24 / 5%));
}

.psc-gate__indicator {
	display: block;
	width: 28px;
	height: 28px;
	margin: 0 auto 16px;
	border: 2px solid var(--gate-border);
	border-top-color: var(--gate-primary);
	border-radius: 50%;
}

.psc-gate--authorized:not(.is-ready) .psc-gate__indicator {
	animation: psc-gate-spin 1s linear infinite;
}

.psc-gate.is-ready .psc-gate__indicator {
	border-color: var(--gate-success);
}

.psc-gate.is-ready .psc-gate__indicator::after {
	content: '';
	display: block;
	width: 7px;
	height: 12px;
	margin: 4px auto 0;
	border: solid var(--gate-success);
	border-width: 0 2px 2px 0;
	transform: rotate(45deg);
}

.psc-gate--malformed .psc-gate__indicator,
.psc-gate--unauthorized .psc-gate__indicator {
	border-color: var(--gate-error);
	color: var(--gate-error);
}

.psc-gate--malformed .psc-gate__indicator::after,
.psc-gate--unauthorized .psc-gate__indicator::after {
	content: '!';
	font-weight: 700;
	line-height: 24px;
}

.psc-gate .psc-gate__title {
	margin: 0;
	font-size: clamp(1.375rem, 1.12rem + 1vw, 1.875rem);
	font-weight: 600;
	line-height: 1.4;
	letter-spacing: -0.025em;
	color: var(--gate-text);
	text-wrap: balance;
}

/* Keep the waiting/ready stage stable; mobile headings need two lines. */
.psc-gate--authorized .psc-gate__title {
	min-height: 1.4em;
	display: grid;
	align-content: center;
}

.psc-gate__description,
.psc-gate__box > p {
	margin: 12px auto 0;
	max-width: 52ch;
	font-size: 0.9375rem;
	line-height: 1.7;
	color: var(--gate-muted);
	text-wrap: pretty;
}

.psc-gate__description {
	min-height: 3.4em;
}

.psc-gate__stage {
	display: grid;
	align-items: center;
	min-height: 144px;
	padding-block: 20px;
}

.psc-gate__prefix {
	display: block;
	margin-bottom: 4px;
	color: var(--gate-muted);
	font-size: 0.8125rem;
}

.psc-gate__time {
	display: block;
	font-size: clamp(3.5rem, 3rem + 2vw, 4.5rem);
	font-weight: 600;
	line-height: 1.15;
	letter-spacing: -0.04em;
	font-variant-numeric: tabular-nums;
	color: var(--gate-text);
}

.psc-gate .psc-gate__button {
	display: inline-flex;
	justify-content: center;
	align-items: center;
	min-height: 52px;
	max-width: 100%;
	padding: 12px 28px;
	font-size: 1rem;
	font-weight: 600;
	line-height: 1.5;
	color: var(--gate-on-primary);
	background: var(--gate-primary);
	border: 1px solid transparent;
	border-radius: var(--r-md, 8px);
	text-decoration: none;
	transition: background-color 180ms ease;
}

.psc-gate .psc-gate__button:hover {
	background: var(--primary-hover, #174c80);
	color: var(--gate-on-primary);
}

.psc-gate__new-tab {
	margin: 10px 0 0;
	color: var(--gate-muted);
	font-size: 0.8125rem;
	line-height: 1.6;
}

.psc-gate__progress {
	height: 4px;
	background: var(--gate-border);
	border-radius: 4px;
	overflow: hidden;
}

.psc-gate__progress > span {
	display: block;
	width: 100%;
	height: 100%;
	background: var(--gate-primary);
	transform: scaleX(0);
	transform-origin: left center;
	transition: transform 180ms linear;
}

.psc-gate.is-ready .psc-gate__progress > span {
	background: var(--gate-success);
}

.psc-gate__note {
	margin-top: 28px;
	padding-top: 24px;
	border-top: 1px solid var(--gate-border);
	text-align: left;
}

.psc-gate__password-row {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
}

.psc-gate__password-text {
	min-width: 0;
}

.psc-gate__password-label {
	display: block;
	margin-bottom: 4px;
	font-size: 0.8125rem;
	color: var(--gate-muted);
}

.psc-gate #psc-go-password {
	padding: 0;
	background: none;
	font: 500 1rem/1.6 var(--pm-font-mono, monospace);
	color: var(--gate-text);
	overflow-wrap: anywhere;
}

.psc-gate .psc-gate__copy {
	flex: 0 0 auto;
	min-height: 44px;
	min-width: 96px;
	padding: 8px 12px;
	background: var(--gate-surface);
	color: var(--gate-text);
	border: 1px solid var(--border-strong, #aeb8c2);
	border-radius: var(--r-sm, 5px);
	font-family: inherit;
	font-size: 0.8125rem;
	font-weight: 600;
	line-height: 1.5;
	cursor: pointer;
	transition: background-color 180ms ease;
}

.psc-gate .psc-gate__copy:hover {
	background: var(--surface-muted, #f5f6f8);
}

.psc-gate__copy[hidden] {
	display: none !important;
}

.psc-gate__copy-feedback {
	min-height: 1.6em;
	margin: 4px 0 8px;
	color: var(--gate-success);
	font-size: 0.8125rem;
	line-height: 1.6;
}

.psc-gate__copy-feedback.is-error {
	color: var(--gate-error);
}

.psc-gate .psc-gate__help,
.psc-gate .psc-gate__home {
	display: inline-flex;
	align-items: center;
	min-height: 44px;
	font-size: 0.875rem;
	line-height: 1.6;
	color: var(--gate-primary);
	text-decoration: underline;
	text-underline-offset: 4px;
	overflow-wrap: anywhere;
}

.psc-gate__recovery {
	margin: 24px 0 8px;
	color: var(--gate-muted);
	font-size: 0.875rem;
	line-height: 1.6;
}

.psc-gate a:focus-visible,
.psc-gate button:focus-visible {
	outline: 2px solid var(--focus, #2465a7);
	outline-offset: 4px;
}

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

@keyframes psc-gate-spin {
	to { transform: rotate(360deg); }
}

@media (max-width: 600px) {
	.psc-gate {
		padding: 32px 16px 40px;
		min-height: 540px;
	}

	.psc-gate__inner {
		padding: 28px 20px 20px;
	}

	.psc-gate__stage {
		min-height: 156px;
	}

	.psc-gate--authorized .psc-gate__title {
		min-height: 2.8em;
	}

	.psc-gate .psc-gate__button {
		width: 100%;
		padding-inline: 16px;
	}

	.psc-gate__password-row {
		gap: 12px;
	}
}

@media (prefers-reduced-motion: reduce) {
	.psc-gate *,
	.psc-gate--authorized:not(.is-ready) .psc-gate__indicator {
		animation: none;
		transition: none;
	}
}
