/**
 * TP External Link Notice
 *
 * Accessibility notes:
 *  - Colours are checked against WCAG 1.4.3 (4.5:1 for text) and 1.4.11 (3:1
 *    for UI component boundaries). If you change --tpeln-accent, re-check the
 *    contrast of .tpeln-btn--go against white.
 *  - Buttons are at least 44px tall, comfortably over the 24x24 minimum in
 *    WCAG 2.2 target size (2.5.8).
 *  - Focus rings are never removed, and use a 2px outline with an offset so
 *    they stay visible on both light and dark backgrounds (2.4.7, 2.4.13).
 *  - Sizing is in rem so the dialog honours the browser text size, and it
 *    reflows rather than scrolling sideways at 320px / 400% zoom (1.4.10).
 *  - Motion is suppressed for anyone who has asked for less of it (2.3.3).
 */

:root {
	--tpeln-accent: #1d4ed8;
	--tpeln-text: #1a1a1a;
	--tpeln-muted: #4a4a4a;
	--tpeln-border: #767676; /* 3:1 against white, for UI boundaries. */
}

.tpeln-dialog {
	width: min(32rem, calc(100vw - 2rem));
	max-width: 100%;
	padding: 0;
	border: 1px solid var(--tpeln-border);
	border-radius: 0.5rem;
	color: var(--tpeln-text);
	background: #fff;
	box-shadow: 0 0.5rem 2rem rgba( 0, 0, 0, 0.25 );
}

.tpeln-dialog::backdrop {
	background: rgba( 0, 0, 0, 0.55 );
}

.tpeln-inner {
	padding: 1.5rem;
}

.tpeln-title {
	margin: 0 0 0.5rem;
	font-size: 1.25rem;
	line-height: 1.3;
	color: var(--tpeln-text);
}

.tpeln-desc {
	margin: 0 0 1.25rem;
}

.tpeln-message {
	margin: 0;
	line-height: 1.5;
}

.tpeln-domain {
	margin: 0.5rem 0 0;
	color: var(--tpeln-muted);
	/* Long domains must wrap rather than force sideways scrolling. */
	overflow-wrap: anywhere;
	word-break: break-word;
}

.tpeln-remember {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	margin: 0 0 1.25rem;
}

.tpeln-checkbox {
	width: 1.25rem;
	height: 1.25rem;
	flex: 0 0 auto;
}

.tpeln-actions {
	display: flex;
	flex-wrap: wrap;
	gap: 0.75rem;
	justify-content: flex-end;
}

.tpeln-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 2.75rem; /* 44px */
	min-width: 3rem;
	padding: 0.5rem 1.25rem;
	border-radius: 0.375rem;
	font: inherit;
	line-height: 1.2;
	text-align: center;
	text-decoration: none;
	cursor: pointer;
}

.tpeln-btn--cancel {
	color: var(--tpeln-text);
	background: #fff;
	border: 2px solid var(--tpeln-border);
}

.tpeln-btn--cancel:hover {
	background: #f2f2f2;
}

.tpeln-btn--go {
	color: #fff;
	background: var(--tpeln-accent);
	border: 2px solid var(--tpeln-accent);
}

.tpeln-btn--go:hover {
	filter: brightness( 0.9 );
}

/* Never remove the focus ring; make it obvious on either button. */
.tpeln-btn:focus-visible,
.tpeln-checkbox:focus-visible {
	outline: 3px solid var(--tpeln-text);
	outline-offset: 2px;
}

/* Older engines without :focus-visible still get a ring. */
.tpeln-btn:focus,
.tpeln-checkbox:focus {
	outline: 3px solid var(--tpeln-text);
	outline-offset: 2px;
}

/*
 * Visually hidden but available to screen readers. Not display:none, which
 * would hide it from assistive technology as well.
 */
.tpeln-hint {
	position: absolute !important;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip: rect( 0 0 0 0 );
	clip-path: inset( 50% );
	white-space: nowrap;
	border: 0;
}

@media ( prefers-reduced-motion: reduce ) {
	.tpeln-dialog,
	.tpeln-dialog::backdrop {
		animation: none !important;
		transition: none !important;
	}
}

/* Respect a forced-colours / high-contrast setting rather than fighting it. */
@media ( forced-colors: active ) {
	.tpeln-dialog {
		border: 1px solid CanvasText;
	}
	.tpeln-btn {
		border: 2px solid ButtonText;
	}
	.tpeln-btn:focus,
	.tpeln-btn:focus-visible {
		outline: 3px solid Highlight;
	}
}