ed11y-element-panel {
	outline: 0;
	opacity: 1;
}

ed11y-element-result {
	position: absolute !important;
	z-index: calc(var(--ed11y-buttonZIndex, 9999) - 1) !important;
	outline: 0;
	opacity: 1;
}

.ed11y-hidden-highlight {
	box-shadow:
		inset 0 0 0 2px var(--ed11y-warning, #fad859),
		inset 0 0 0 3px var(--ed11y-primary, #276499),
		0 0 0 3px var(--ed11y-warning, #fad859),
		0 0 0 4px var(--ed11y-primary, #276499),
		0 0 1px 5px !important;
}

.ed11y-ring-red {
	outline: 2px solid transparent;
	box-shadow:
		0 0 0 1px #fff,
		inset 0 0 0 2px var(--ed11y-alert, #b80519),
		0 0 0 3px var(--ed11y-alert, #b80519),
		0 0 1px 3px !important;
}

.ed11y-ring-yellow {
	outline: 2px solid var(--ed11y-warning, #fad859) !important;
	outline-offset: 1px !important;
	box-shadow:
		0 0 0 1px #fff,
		inset 0 0 0 2px var(--ed11y-warning, #fad859),
		0 0 0 3px var(--ed11y-warning, #fad859),
		0 0 0 4px !important;
}

.ed11y-wrapper :focus-visible:not([tabindex="-1"]) {
	outline: 2px solid var(--ed11y-focusRing);
	box-shadow:
		inset 0 0 0 1px #fff,
		0 0 0 3px var(--ed11y-primary, #276499),
		0 0 0 5px var(--ed11y-primaryText) !important;
}

/* All elements =========================== */

:host(.ed11y-element) {
	/* this will not work. */
	all: initial;
}

.ed11y-wrapper .visually-hidden {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	text-indent: 1px;
}

.ed11y-wrapper {
	font-family:
		var(
			--ed11y-baseFontFamily,
			-apple-system,
			BlinkMacSystemFont,
			"Segoe UI",
			Roboto,
			"Helvetica Neue",
			Arial
		),
		sans-serif;
	font-size: var(--ed11y-baseFontSize, 14px);
	line-height: 1.5;
	opacity: 1 !important;
	word-wrap: break-word;

	.badge {
		display: inline-block;
		vertical-align: middle;
		padding: 0 0.5em;
		margin: -2px 0.25em 0 0;
		font-size: 12px;
		font-weight: 400;
		color: var(--ed11y-primaryText);
		background: var(--ed11y-primary);
		border: 1px solid;
		border-radius: 1em;
		position: relative;
		z-index: 2;
		line-height: 1.5;

		&:has(.link-icon) {
			display: none;
		}
	}
}

.ed11y-small {
	font-size: max(0.9em, 13px);
	opacity: 0.9;
}

.ed11y-sr-only {
	position: absolute;
	display: block;
	width: 1px;
	height: 1px;
	overflow: hidden;
	opacity: 0;
}

.ed11y-wrapper button {
	margin: 0;
	font-family: inherit;
	font-size: 0.7857em;
	font-weight: 500;
	color: var(--ed11y-primaryText, #fffdf7);
	text-align: center;
	cursor: pointer;
	background: inherit;
	border: 0;
}

/* Panel ================================ */
:host(ed11y-element-panel.ed11y-element) {
	position: fixed;
	z-index: calc(var(--ed11y-buttonZIndex, 9999) + 10000);
	opacity: 0;
	transition: opacity 0.25s ease-in;
}

:host(ed11y-element-panel.ed11y-element):focus,
.ed11y-wrapper div:focus {
	outline: transparent;
}

.ed11y-panel-wrapper {
	color: var(--ed11y-text, #20160c);
	border-radius: var(--ed11y-borderRadius, 1px);

	a {
		color: inherit;
	}

	.content {
		color: var(--ed11y-text, #20160c);
		background: var(--ed11y-bg);
		border-top: 0;
		border-radius: var(--ed11y-borderRadius, 3px);
		box-shadow: var(--ed11y-panelBarShadow);

		button {
			padding: 7px 5px;
			margin: 5px 0 5px 1px;
			color: inherit;
			background: inherit;
			border: 1px var(--ed11y-button, transparent) solid;
			border-radius: var(--ed11y-borderRadius, 1px);

			&:hover {
				color: var(--ed11y-text, #20160c);
				background: var(--ed11y-bg, #fffffe);
				box-shadow: inset 0 0 0 1px var(--ed11y-text, #20160c);
			}
		}

		summary {
			position: sticky;
			top: 0;
			z-index: 1;
			width: auto;
			padding: 6px 10px 6px 0;
			font-weight: 400;
			color: var(--ed11y-primaryText);
			cursor: pointer;
			background-color: var(--ed11y-primary);
			box-shadow: 0 0 1px;

			&::marker,
			&::-webkit-details-marker {
				display: none;
				color: transparent;
			}

			&:hover {
				box-shadow:
					0 0 0 1px var(--ed11y-primaryText),
					inset 0 0 0 1px var(--ed11y-primary),
					inset 0 0 0 2px;
			}
		}

		details {
			min-width: 160px;
			max-height: max(240px, 45vh);
			overflow: auto;
		}

		.details {
			padding: 0 8px 8px 13px;
		}
	}

	&:has(details[open]) .content {
		width: clamp(160px, 50vw, 280px);
	}

	button[hidden] {
		display: none !important;
	}
}

.ed11y-wrapper .ed11y-warning {
	color: #111;
	background: var(--ed11y-warning, #fad859);
}

.ed11y-error {
	color: #fff;
	background: var(--ed11y-bgHighlight, #7b1919);
}

.ed11y-buttonbar {
	display: inline-grid;
	grid-template-columns: 1fr repeat(5, min-content);
	grid-template-rows: 0.429em 2em 0.5em 1fr;
	grid-template-areas:
		"upad   upad        upad        upad        upad    upad"
		"pad    reports     showHidden  visualize   toggle  next"
		"dpad   dpad        dpad        dpad        dpad    dpad"
		"tools  tools       tools       tools       tools   tools ";
	grid-auto-flow: column;
	justify-items: end;
	min-height: 35px;

	& > button,
	& > a {
		min-width: 2.125em;
		height: 2em;
		padding: 0;
		font-size: 1em;
		line-height: 1.5em;
		color: var(--ed11y-activeColor);
		text-align: center;
		background: var(--ed11y-activeBackground);
		box-shadow:
			0 1px var(--ed11y-activePanelBorder),
			0 -1px var(--ed11y-activePanelBorder),
			-1px 0 var(--ed11y-activeBorder),
			2px 0 var(--ed11y-activeBackground),
			-2px 0 var(--ed11y-activeBackground);

		svg {
			width: 1.071em;
			margin: 5px -1px 3px 0;
			vertical-align: top;
			opacity: 0.98;
		}
	}

	&:hover,
	&:focus-within,
	&:has(.ed11y-preview) {
		grid-template-rows: 2em 2em 0.5em 1fr;
	}

	&:has(#ed11y-toggle.disabled) #ed11y-visualize,
	&:has(#ed11y-toggle.disabled) #ed11y-visualizers {
		display: none;
	}
}

button.ed11y-jump {
	grid-area: next;
	margin-left: -6px;
	padding-left: 3px;
	border-radius: 0 0.5em 0.5em 0;
	box-shadow:
		0 0 0 1px var(--ed11y-activePanelBorder),
		-2px 0 var(--ed11y-activeBackground);

	.toggle-count {
		display: block;
		min-width: 1.375em;
		padding: 0 6px 0 9px;
	}

	svg {
		display: none;
	}

	&:hover {
		svg {
			display: initial;
			width: 0.643em;
			margin: 0.5em 0 0 5%;
		}

		.toggle-count {
			visibility: hidden;
		}
	}
}

@media (prefers-reduced-motion: reduce) {
	.ed11y-shut .ed11y-buttonbar a,
	.ed11y-shut .ed11y-buttonbar button:not(#ed11y-toggle, .next) {
		color: #111;
		background: #c0c0c0;
		box-shadow:
			0 1px,
			0 -1px,
			-1px 0;
		transition:
			background-color 0.2s ease-in,
			opacity 0.2s ease-in,
			box-shadow 0.2s ease-in;
	}

	.ed11y-result button {
		transition: none;
	}
}

#ed11y-show-hidden {
	grid-area: showHidden;

	svg + svg,
	&[data-ed11y-pressed="true"] svg:first-child {
		display: none;
	}

	svg {
		margin: 5px 1px 2px 0;
	}

	svg:first-child,
	&[data-ed11y-pressed="true"] svg + svg {
		display: initial;
	}
}

#ed11y-visualize {
	grid-area: visualize;
	padding: 0 12px 0 6px;
	margin-right: -3px;
}

#ed11y-reports-link,
#ed11y-show-hidden:first-child,
.ed11y-buttonbar [hidden]:first-child + #ed11y-visualize {
	padding: 0 6px 0 10px;
	border-radius: 0.5em 0 0 0.5em;
	box-shadow:
		-1px 0 var(--ed11y-activePanelBorder),
		0 -1px var(--ed11y-activePanelBorder),
		0 1px var(--ed11y-activePanelBorder),
		2px 0 var(--ed11y-activeBackground);
}

.ed11y-buttonbar [hidden]:first-child + #ed11y-visualize {
	padding: 0 11px 0 10px;
}

#ed11y-reports-link {
	padding: 0 0 0 4px;
	grid-area: reports;

	svg {
		width: 1em;
		margin: 0.5em 0 0 -1px;
	}
}

#ed11y-panel {
	.ed11y-buttonbar {
		& > a:hover,
		& > button:not(#ed11y-toggle):hover {
			z-index: 1;
			box-shadow:
				0 0 0 1px var(--ed11y-activePanelBorder),
				inset 0 0 0 1px var(--ed11y-activeBackground),
				inset 0 0 0 2px var(--ed11y-activeColor);
		}

		button[data-ed11y-pressed="true"],
		button[aria-pressed="true"],
		#ed11y-visualize[data-ed11y-pressed="true"] {
			box-shadow:
				inset 1px 1px 3px 1px #000,
				0 0 0 1px var(--ed11y-activeBackground),
				7px 0 var(--ed11y-activeBackground);
		}

		button .ed11y-sr-only {
			color: transparent;
			transition: color 0.2s ease-out;
		}

		& > :hover .ed11y-sr-only,
		& > :focus-visible .ed11y-sr-only,
		.ed11y-preview .ed11y-sr-only {
			top: -0.1875em;
			right: 0;
			width: auto;
			min-width: max-content;
			padding: 0 0.5em;
			line-height: 1.75;
			height: 1.75em;
			color: var(--ed11y-activeColor);
			text-align: start;
			white-space: nowrap;
			background: var(--ed11y-activeBackground);
			box-shadow: 0 0 1px;
			opacity: 1;
			border-radius: var(--ed11y-borderRadius);
			overflow: visible;

			&::after {
				content: "";
				display: block;
				height: 10px;
			}
		}
	}

	summary:focus-visible {
		outline-offset: -4px;
	}

	summary .close-details svg {
		display: none;
	}

	details[open] .close-details svg {
		float: right;
		margin: 2px 0 0 10px;
		display: block;
		width: 12px;
	}
}

/* todo 3.x: test*/
.ed11y-pin-left .ed11y-buttonbar .ed11y-preview .ed11y-sr-only,
.ed11y-pin-left .ed11y-buttonbar > :hover .ed11y-sr-only,
.ed11y-pin-left .ed11y-buttonbar > :focus-visible .ed11y-sr-only {
	right: auto;
	left: 0;
}

.ed11y-toggle-circle {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	min-width: 1.5em;
	height: 1.5em;
	padding: 0.375em;
	font-size: clamp(1em, 2vw, 1.2em);
	border: 0;
	border-radius: 100%;
	transition: box-shadow 0.1s;

	.close-icon {
		width: 0.9em;
		margin: 0;
	}

	.pass-icon,
	.close-icon {
		display: none;
	}
}

#ed11y-toggle {
	z-index: 2;
	display: flex;
	flex-direction: row;
	align-items: center;
	width: auto;
	padding: 0;
	margin: 0 -3px;
	overflow: visible;
	font-size: 1em;
	background: transparent;
	border-right: 0;
	box-shadow: none;
	opacity: 1;
	grid-area: toggle;

	&.disabled .ed11y-toggle-circle,
	&.disabled:hover .ed11y-toggle-circle {
		color: #222;
		background: #bbb;
		box-shadow: inset 0 0 0 2px #333;
	}

	.errors-icon {
		width: 0.75em;
	}
}

.ed11y-active #ed11y-toggle {
	&:hover,
	&:focus-visible {
		.errors-icon,
		.pass-icon {
			display: none;
		}

		.close-icon {
			display: block;
		}
	}
}

.ed11y-shut {
	width: auto;
	background: transparent;
	border-radius: 100%;
	box-shadow: none;

	.ed11y-buttonbar {
		grid-template-columns: repeat(6, min-content);
		width: min-content;
	}

	a,
	button:not(#ed11y-toggle, .next) {
		color: #111;
		background: #c0c0c0;
		box-shadow:
			0 1px,
			0 -1px,
			-1px 0;
		transition: all 0.2s;
	}

	#ed11y-reports-link,
	#ed11y-show-hidden:first-child,
	[hidden]:first-child + #ed11y-visualize {
		box-shadow:
			-1px 0,
			0 -1px,
			0 1px,
			2px 0;
	}

	#ed11y-toggle {
		margin: 0 -4px;
	}

	.ed11y-buttonbar > *:not(.ed11y-jump) {
		width: 0;
		min-width: 0;
		overflow: hidden;
		opacity: 0;
	}

	&#ed11y-panel:not(.ed11y-pin-left) .ed11y-jump,
	&#ed11y-panel:not(.ed11y-pin-left) .ed11y-buttonbar:hover > *,
	&:has(:focus-visible) .ed11y-buttonbar > *:not(#ed11y-toggle) {
		min-width: 2.125em;
		overflow: visible;
		opacity: 1;
	}
}

.ed11y-pass {
	.ed11y-toggle-circle {
		min-width: 1.25em;
		height: 1.25em;
		font-family: georgia, serif;
		line-height: 1;
		color: var(--ed11y-primaryText, #fffdf7);
		background: var(--ed11y-primary, #276499);
		box-shadow:
			inset 0 0 0 1px var(--ed11y-activeBackground, #276499),
			inset 0 0 0 2.5px #fffe;
	}

	.errors-icon {
		display: none;
	}

	.pass-icon {
		display: block;
	}

	#ed11y-toggle:hover .ed11y-toggle-circle {
		box-shadow:
			inset 0 0 0 1px #fffe,
			inset 0 0 0 3px var(--ed11y-primary, #276499),
			0 0 1px var(--ed11y-primary, #276499);

		.close-icon {
			width: 0.75em;
			margin-top: 1px;
		}
	}
}

.ed11y-warnings {
	.ed11y-toggle-circle {
		color: #000b;
		background-color: var(--ed11y-warning, #fad859);
		box-shadow:
			inset 0 0 0 2px var(--ed11y-warning, #fad859),
			inset 0 0 0 3px #000b,
			0 0 2px #000;
	}

	#ed11y-toggle:hover .ed11y-toggle-circle {
		box-shadow:
			inset 0 0 0 2px var(--ed11y-warning, #fad859),
			inset 0 0 0 4px #000b,
			0 0 2px #000;
	}

	&.ed11y-active #ed11y-toggle:hover .ed11y-toggle-circle {
		box-shadow:
			inset 0 0 0 3px var(--ed11y-warning, #fad859),
			0 0 1px 1px;
	}
}

.ed11y-errors {
	#ed11y-toggle {
		.ed11y-toggle-circle {
			color: var(--ed11y-alert, #b80519);
			background: #fefefe;
			box-shadow:
				inset 0 0 0 3px,
				1px 1px 5px 0 rgb(0 0 0 / 50%);
		}

		&:hover .ed11y-toggle-circle {
			box-shadow:
				inset 0 0 0 1px var(--ed11y-alert),
				inset 0 0 0 5px #fffd,
				1px 1px 5px 0 rgb(0 0 0 / 50%);
		}
	}

	&.ed11y-active #ed11y-toggle:hover .ed11y-toggle-circle {
		box-shadow: inset 0 0 0 4px;
	}

	#ed11y-visualize {
		padding-right: 10px;
	}
}

#ed11y-headings-tab summary > svg {
	width: 16px;
	margin: 0 8px -3px -1px;
}

#ed11y-alts-tab summary > svg {
	width: 18px;
	margin: 0 8px -3px -2px;
}

#ed11y-readability-tab {
	summary > svg {
		width: 18px;
		margin: 0 8px -3px -2px;
	}

	strong {
		font-weight: 600;
	}

	#readability-info {
		margin: 0.7em 0 0.25em;
		font-size: 1.25em;
		font-weight: 700;

		&:has(br) {
			font-size: 1em;

			& + ul {
				display: none;
			}
		}

		br {
			display: none;
		}
	}

	.readability-score {
		padding: 2px 5px;
		font-size: 14px;
		font-weight: 600;
		color: var(--ed11y-primaryText);
		background-color: var(--ed11y-primary);
		border-radius: 4px;
		margin-inline-start: 5px;
	}

	.ed11y-warning {
		color: var(--ed11y-warningText);
		background-color: var(--ed11y-warning);
		box-shadow: inset 0 0 1px;
	}

	ul {
		display: flex;
		flex-wrap: wrap;
		padding: 0;
		margin: 0 0 0.5em;
		font-size: 93%;
		list-style: none;
		gap: 0 8px;
	}
}

.ed11y-decorative {
	font-style: italic;
	font-weight: 200;
	opacity: 0.8;
}

#ed11y-visualizers {
	grid-area: tools;
	max-width: 280px;

	details {
		&:has(.ed11y-warning) {
			summary {
				color: var(--ed11y-warningText);
				background-color: var(--ed11y-warning);
			}

			scrollbar-color: var(--ed11y-text) var(--ed11y-bg);
		}

		&:has(.ed11y-error) {
			summary {
				color: #fffe;
				background-color: var(--ed11y-alert);
			}

			scrollbar-color: var(--ed11y-alert) var(--ed11y-bg);
		}
	}

	li.ed11y-warning {
		box-shadow: inset 0 0 1px #000;
	}
}

#ed11y-outline,
#ed11y-alt-list {
	padding: 0;
	list-style: none;
}

#ed11y-outline {
	margin: 0 0 0 -7px;

	li {
		padding: 3px 8px;
		margin: 5px -8px;
		border-radius: 12px 0 0 12px;
	}

	a {
		display: block;
		text-decoration: none;
		font-weight: 300;

		strong {
			font-weight: 500;
		}

		&:hover {
			text-decoration: underline;
		}
	}
}

#ed11y-alt-list {
	margin: 0 4px 0 6px;

	li {
		margin-left: -8px;
	}

	.alt-parent {
		display: flex;
		flex-wrap: wrap;
		align-items: center;
		padding: 8px;
		margin: 8px 0;
		text-decoration: none;
		word-break: break-word;
		box-shadow:
			0 0 0 3px var(--ed11y-bg, #fffffe),
			0 -3px 1px var(--ed11y-primary, #276499);
		gap: 1em;
	}

	a.alt-parent {
		&:hover,
		&:focus-visible {
			text-decoration: underline;
		}
	}

	span {
		flex: 0 1 calc(100% - 100px);
	}

	img {
		flex: 0 1 80px;
		width: 80px;
	}

	.ed11y-warning,
	.ed11y-error,
	.ed11y-warning + li,
	.ed11y-error + li {
		a {
			box-shadow: none;
		}
	}

	.ed11y-warning,
	.ed11y-error {
		border-radius: 4px;
	}
}

#ed11y-message:not(:empty) {
	width: max(240px, 45vh);
	padding: 1px 5px 2px;
	font-weight: 600;
	color: #fff;
	background: var(--ed11y-alert);
}

/* Result toggle button ================= */

:host(ed11y-element-result.ed11y-element) {
	position: absolute;
	z-index: calc(var(--ed11y-buttonZIndex, 9999) - 1);
	opacity: 0;
	transition: opacity 0.5s ease-out;
}

:host(ed11y-element-result.ed11y-element[data-ed11y-open="true"]),
ed11y-element-result[data-ed11y-open="true"] {
	z-index: calc(var(--ed11y-buttonZIndex, 9999) + 10000) !important;
}

.ed11y-editable-result {
	top: 0 !important;
	left: 0 !important;
}

.ed11y-result-wrapper {
	width: 2.375em;
	height: 2.375em;
	overflow: visible;
	color: var(--ed11y-text, #20160c);

	button {
		font-weight: 600;
		background: var(--ed11y-primary, #276499);
		transition:
			width 0.2s ease,
			height 0.2s ease,
			margin 0.2s ease;
	}

	.toggle {
		position: absolute;
		z-index: 1;
		display: inline-block;
		width: 2em;
		height: 2em;
		padding: 0;
		font-size: clamp(1.14em, 1.5vw, 1.3125em);
		line-height: 1;
		color: var(--ed11y-alert, #b80519);
		vertical-align: middle;
		cursor: pointer;
		background: #fefefe;
		border: 0;
		border-radius: 50%;
		box-shadow:
			inset 0 0 0 1px var(--ed11y-alert, #b80519),
			inset 0 0 0 2px #fefefe,
			inset 0 0 0 6px var(--ed11y-alert, #b80519);

		&::before {
			content: "!";
		}

		&:hover,
		&[aria-expanded="true"] {
			border: 2px solid var(--ed11y-ok, #1f5381);
			box-shadow:
				inset 0 0 0 1px var(--ed11y-alert, #b80519),
				inset 0 0 0 2px #fefefe,
				inset 0 0 0 6px var(--ed11y-alert, #b80519),
				0 0 0 2px var(--ed11y-primary, #276499),
				0 0 0 3px transparent;
		}

		&.dismissed {
			color: #fffdf7;
			background: var(--ed11y-ok, #1f5381);
			box-shadow:
				inset 0 0 0 2px var(--ed11y-ok, #1f5381),
				inset 0 0 0 3px #fffdf7,
				inset 0 0 0 6px var(--ed11y-ok, #1f5381);

			svg {
				width: 0.8125em;
				margin: 0.1875em;
				vertical-align: top;
			}

			&::before {
				content: "";
			}
		}

		&.dismissable {
			color: #333;
			background: var(--ed11y-warning, #fad859);
			box-shadow:
				inset 0 0 0 1px #000d,
				inset 0 0 0 2px #0005,
				inset 0 0 0 3px var(--ed11y-warning, #fad859),
				inset 0 0 0 4px #444,
				inset 0 0 0 6px var(--ed11y-warning, #fad859);

			&::before {
				content: "?";
			}

			&:hover,
			&[aria-expanded="true"] {
				border: 2px solid var(--ed11y-primary, #276499);
				box-shadow:
					inset 0 0 0 2px #276499,
					inset 0 0 0 3px var(--ed11y-warning, #fad859),
					inset 0 0 0 4px #444,
					inset 0 0 0 6px var(--ed11y-warning, #fad859);
			}
		}
	}
}

:host(ed11y-element-result.ed11y-preload) button {
	width: 4em;
	height: 4em;
	margin: -1em 0 0 -1em;
}

/* Tip/modal ============================ */

:host(ed11y-element-tip.ed11y-element) {
	position: absolute;
	top: 10vh;
	left: 2vw;
	z-index: calc(var(--ed11y-buttonZIndex, 9999) - 1);
	display: none;
}

:host(ed11y-element-tip.ed11y-element[data-ed11y-open="true"]) {
	z-index: calc(var(--ed11y-buttonZIndex, 9999) + 10001) !important;
	display: block;
}

.ed11y-tip-wrapper {
	position: relative;
	overflow: visible;
	color: var(--ed11y-text, #20160c);

	.tip {
		position: absolute;
		z-index: 1;
		display: none;
		width: clamp(18em, 36em, 80vw);
		min-width: 200px;
		margin: calc(var(--ed11y-outlineWidth, 0px) + var(--ed11y-outlineWidth, 0px));
		background: var(--ed11y-bg, #fffffe);
		border: 2px solid var(--ed11y-primary, #276499);
		border-bottom: 0;
		border-radius: var(--ed11y-borderRadius);
		box-shadow: 0 0 0 var(--ed11y-outlineWidth, 0) var(--ed11y-bg, #fffffe);
	}

	.close {
		position: absolute;
		right: 0;
		width: 32px;
		height: 32px;
		border-radius: 0 calc(var(--ed11y-borderRadius) - 2px);
		box-shadow: -1px 1px;

		&:hover {
			color: var(--ed11y-primary, #276499);
			background: var(--ed11y-primaryText, #fffffe);
			box-shadow: inset 1px -1px var(--ed11y-primary, #276499);
		}

		svg {
			width: 12px;
			margin-left: 2px;
		}
	}

	.badge {
		color: var(--ed11y-warningText);
		background: var(--ed11y-warning);
	}

	&.open .tip {
		display: block;
	}

	.arrow {
		position: absolute;
		display: none;
		width: 20px;
		height: 20px;
		margin: 0 0 0 calc(var(--ed11y-outlineWidth) + var(--ed11y-outlineWidth));
		content: "";
		box-shadow:
			inset 0 0 0 2px var(--ed11y-primary, #276499),
			inset 0 0 0 3px var(--ed11y-bg, #fffffe),
			0 0 0 1px var(--ed11y-primary, #276499);
		transform: rotate(45deg);

		&[data-direction="whompwhomp"] {
			visibility: hidden;
		}

		&[data-direction="left"] {
			margin: 0 calc(var(--ed11y-outlineWidth, 0px) + var(--ed11y-outlineWidth, 0px)) 0 0;
			background: linear-gradient(
				45deg,
				transparent 0%,
				transparent 48%,
				var(--ed11y-primary, #276499) 49%
			);

			& + .tip {
				margin-right: calc(var(--ed11y-outlineWidth) + var(--ed11y-outlineWidth));
			}
		}

		&[data-direction="under"] {
			margin: calc(var(--ed11y-outlineWidth, 0px) + var(--ed11y-outlineWidth, 0px)) 0 0;
			background: linear-gradient(
				-45deg,
				transparent 0%,
				transparent 48%,
				var(--ed11y-primary, #276499) 49%
			);
		}

		&[data-direction="above"] {
			margin: 0 0 var(--ed11y-outlineWidth, 0) 0;
			background: linear-gradient(
				135deg,
				transparent 0%,
				transparent 48%,
				var(--ed11y-primary, #276499) 49%
			);

			& + .tip {
				margin-bottom: calc(var(--ed11y-outlineWidth) + var(--ed11y-outlineWidth));
			}
		}

		&[data-direction="right"] {
			background: linear-gradient(
				-135deg,
				transparent 0%,
				transparent 48%,
				var(--ed11y-primary, #276499) 49%
			);
		}
	}

	&.open .arrow {
		display: block;
	}

	code,
	i {
		display: inline-block;
		background-color: var(--ed11y-code, #cbd8f3);
		padding-inline: 2px;
		font-weight: 500;
		color: #000;
		font-style: normal;
		border-radius: 2px;
		line-height: 1.25;
	}

	code {
		font-family: monospace;
	}
}

@keyframes ed11y-fade-in {
	0% {
		opacity: 0;
	}

	50% {
		opacity: 0;
	}

	100% {
		opacity: 1;
	}
}

.ed11y-tip-wrapper {
	.invisible-alert:not(:empty) {
		padding: 13px 12px 12px 16px;
		margin: 10px 6px 0px -1px;
		font-size: 90%;
		font-style: italic;
		font-weight: bold;
		line-height: 1.2;
		color: #010101;
		background: var(--ed11y-warning);
	}

	.why {
		font-size: max(0.9em, 14px);
		line-height: 1.2;
		opacity: 0.9;

		li {
			line-height: 1.2;
		}
	}

	.why::before {
		content: "";
		border-top: 1px solid var(--ed11y-text);
		margin-top: 1.25em;
		padding-top: 0.5em;
		display: block;
		opacity: 0.45;
	}

	.footer {
		display: grid;
		clear: both;
		color: var(--ed11y-primaryText, #fffdf7);
		background: var(--ed11y-primary, #276499);
		grid-template-columns: min-content 1fr repeat(3, min-content);
		grid-template-rows: 2.124em;
		grid-template-areas: "badge buttons previous next focus";

		svg {
			width: 12px;
			height: 12px;
		}

		button,
		summary {
			line-height: 1;
			border-left: 1px solid;
		}

		& > button,
		& > summary {
			display: flex;
			align-items: center;
			justify-content: center;
			width: 2.75em;
		}

		summary > div {
			display: inline-block;
		}

		& > details summary {
			display: flex;
			align-items: center;
			justify-content: center;
			width: 2.161em;
			height: 100%;
			padding: 0;
			cursor: pointer;
			background: var(--ed11y-primary, #276499);

			&::marker,
			&::-webkit-details-marker {
				display: none;
			}
		}

		& > details {
			grid-area: help;
		}

		button:hover,
		summary:hover,
		summary:focus-visible,
		details[open] summary {
			color: var(--ed11y-primary, #20160c);
			background: var(--ed11y-primaryText, #fffffe);
			opacity: 0.9;
		}
	}

	.prev {
		grid-area: previous;

		svg {
			transform: rotate(180deg) translateY(-1px);
		}
	}

	.next {
		grid-area: next;
	}

	.ed11y-tip-help-content {
		position: absolute;
		padding: 0.5em 1em 1em;
		overflow: auto;
		line-height: 1.3;
		color: var(--ed11y-primaryText, #fffdf7);
		text-align: start;
		background: var(--ed11y-primary, #276499);
		border-bottom: 1px solid var(--ed11y-bg);
		inset: 1px 1px 2.1em;
	}

	p {
		margin-block: 0.6125em;

		&.hr {
			margin-top: 1em;

			&::before {
				content: "";
				display: block;
				border-top: 1px solid;
				height: 0.9em;
				opacity: 0.5;
			}
		}

		&:last-child {
			margin-block-end: 0.306em;
		}
	}

	.title + p {
		margin-top: 0;
	}

	.title {
		padding: 10px 0 0.6125em 0;
		margin-right: 40px;
		font-size: 1.125em;
		font-weight: bold;
		outline: transparent;
		opacity: 0.9;

		&:focus {
			outline: none;
			box-shadow: none;
		}
	}

	.content {
		padding: 0 13px 1.14em 16px;
	}

	button {
		font-weight: 600;
		color: var(--ed11y-primaryText, #fffdf7);
		text-align: center;
		background: var(--ed11y-primary, #276499);
	}

	ul {
		margin-block: 0.643em;
		padding-inline-start: 20px;

		&:last-child {
			margin-block-end: 0.321em;
		}
	}

	li {
		line-height: 1.143;

		& + li {
			margin-top: 0.5em;
		}
	}

	table {
		margin: 20px;
		border-spacing: 0;
	}

	th,
	td {
		padding: 5px 10px;
		border: 0;
		box-shadow: 0 0 0 1px;
	}

	a {
		color: inherit;

		&:hover,
		&:focus-visible {
			text-decoration-style: double;
			text-decoration-skip-ink: none;
		}
	}

	svg {
		max-width: 100%;
		overflow: visible;
	}

	.sa11y-tip {
		margin: 0.75em 0;

		hr {
			opacity: 0;
		}
	}

	.dismiss,
	.ed11y-custom-edit-links a,
	.ed11y-tip-button {
		display: inline-flex;
		align-items: center;
		height: 100%;
		padding: 0 11px;
		margin: 0;
		font-size: 0.7857em;
		font-weight: 600;
		line-height: 1;
		vertical-align: bottom;
		cursor: pointer;

		summary {
			height: 100%;
			padding: 0 10px;
			line-height: 2.75em;
			user-select: none;
		}

		span {
			display: inline-flex;
			align-items: center;
			margin-right: 6px;
		}
	}

	.content-footer {
		display: flex;
		align-items: end;
		justify-content: space-between;
		padding-top: 1em;
		margin-bottom: -4px;
	}

	.message .content-footer {
		padding: 0.5em 0 4px;
	}

	.message:has(#color-pickers:last-child) + .content-footer .count {
		margin-top: -2em;
	}

	.count {
		margin-bottom: -2px;
		font-size: 0.857em;
		line-height: 1.25;
		text-align: end;
		opacity: 0.75;
	}

	.ed11y-custom-edit-links,
	.ed11y-tip-buttons {
		a,
		button {
			height: 2.5em;
			margin-right: 1px;
			color: var(--ed11y-bg, #fffffe);
			text-decoration: none;
			background: var(--ed11y-text, #20160c);

			&:hover {
				text-decoration: underline;
			}

			&:first-child {
				border-top-left-radius: var(--ed11y-borderRadius, 1px);
				border-bottom-left-radius: var(--ed11y-borderRadius, 1px);
			}

			&:last-child {
				border-top-right-radius: var(--ed11y-borderRadius, 1px);
				border-bottom-right-radius: var(--ed11y-borderRadius, 1px);
			}
		}

		.ed11y-transfer-icon svg {
			height: 12px;
			margin: 0 2px 0 0;
		}

		.ed11y-custom-edit-icon {
			display: inline-block;
			width: 0.8375em;
			margin-right: 0.325em;
			vertical-align: middle;
		}
	}

	details.dismiss {
		padding: 0;

		.dismiss {
			min-height: 2.5em;
			margin: 1em 1em 0;
			font-size: inherit;
			border-radius: var(--ed11y-borderRadius, 1px);
		}
	}

	.ed11y-bulk-actions-content {
		position: absolute;
		right: 0;
		bottom: 2.75em;
		z-index: 1;
		display: flex;
		flex-direction: column;
		align-items: baseline;
		width: max-content;
		padding-bottom: 1em;
		margin: -1px 0 0 -1px;
		background: var(--ed11y-primary, #fffffe);
		border: 1px solid var(--ed11y-primaryText, #fffffe);

		.dismiss {
			color: var(--ed11y-primary, #fffffe);
			background: var(--ed11y-primaryText, #fffffe);
			border-radius: var(--ed11y-borderRadius, 1px);
		}
	}

	.dismiss[open] {
		color: var(--ed11y-primary, #fffffe);
		background: var(--ed11y-primaryText, #276499);
		border-radius: 0 var(--ed11y-borderRadius, 1px) 0 0;
	}

	.dismissed-note {
		display: inline-block;
		padding: 0.5em 1em;
		font-style: italic;
		color: #333;
		background: var(--ed11y-warning, #fad859);
		border-radius: 2px;
	}

	.ed11y-tip-dismissals {
		grid-area: buttons;
		display: flex;
		justify-content: end;
	}

	.error-badge {
		grid-area: badge;
		display: inline-flex;
		width: max-content;
		align-items: center;
		height: 100%;
		padding: 0 11px;
		line-height: 1;
		font-size: 14px;
		opacity: 0.9;
	}
}

.ed11y-dismiss-icon {
	width: 0.9em;
	margin-bottom: -0.1em;
}

@media screen and (max-width: 640px) {
	.ed11y-tip-wrapper {
		.error-badge {
			display: none;
		}
	}
}

/* Heading level visualizer ============= */
:host(ed11y-element-heading-label.ed11y-element) {
	position: absolute;
	margin-top: -0.5em;
	z-index: calc(var(--ed11y-buttonZIndex) - 2);
}

.ed11y-heading-wrapper {
	padding: 0 0.5em;
	margin-left: 35px;
	font-weight: 400;
	line-height: 1.2;
	color: var(--ed11y-primaryText, #fffdf7);
	background: var(--ed11y-primary, #276499);
	border-radius: var(--ed11y-borderRadius, 1px);
	box-shadow:
		0 0 1px var(--ed11y-bg, #fffffe),
		0 0 0 4px var(--ed11y-primary, #276499),
		1px 1px 5px 2px #000;
	opacity: 0.95;
}

/* Alt text visualizer ================== */

:host(ed11y-element-alt.ed11y-element) {
	position: absolute;
}

.ed11y-alt-wrapper {
	position: absolute;
	right: 0;
	bottom: 0;
	left: 0;

	& > span {
		position: absolute;
		right: 0;
		bottom: 12px;
		left: 0;
		z-index: calc(var(--ed11y-buttonZIndex, 9999) - 1);
		min-width: 10em;
		padding: 6px;
		font-weight: 500;
		box-shadow:
			0 1px,
			0 -1px;
	}

	.ed11y-pass {
		color: var(--ed11y-primaryText, #fffdf7);
		background: var(--ed11y-primary, #276499);
	}
}

/*** new needs to be placed *****/

ed11y-element-result[data-ed11y-open="false"]:not(:hover, :focus) {
	opacity: 0.94;
}

.intersecting[data-ed11y-open="false"]:not(:hover, :focus-visible) {
	filter: saturate(0);
	opacity: 0.25;
	transition:
		opacity 0.3s ease,
		filter 0.3s ease;
}

.ed11y-offscreen,
ed11y-element-result.ed11y-preload,
.ed11y-preload {
	opacity: 0 !important;
}

/* High contrast mode. */
@media (forced-colors: active) {
	.ed11y-wrapper .tip,
	.ed11y-wrapper button,
	.ed11y-wrapper summary,
	.ed11y-wrapper details,
	.ed11y-wrapper button.toggle,
	.ed11y-wrapper .ed11y-toggle-circle,
	.ed11y-tip-header,
	.ed11y-buttonbar > a {
		border: 2px ButtonBorder solid;
	}

	.ed11y-wrapper.open div.arrow {
		background: ButtonBorder;
	}

	.ed11y-tip-header {
		&,
		button,
		summary {
			margin: -2px;
		}
	}

	.ed11y-wrapper button:hover,
	.ed11y-wrapper summary:hover,
	.ed11y-buttonbar > a:hover {
		outline: 3px solid;
	}

	.ed11y-buttonbar {
		& > a {
			height: auto;
		}

		& > :hover .ed11y-sr-only,
		& > :focus-visible .ed11y-sr-only {
			border: 2px ButtonBorder solid;
		}
	}

	#ed11y-toggle {
		margin: 0 -5px;
		border: 0;
	}
}

/* *************************************** */
/*            Sa11y Contrast               */
/* *************************************** */
.ed11y-contrast-tools {
	#contrast-preview {
		max-height: 100px;
		padding: 5px;
		margin-top: 10px;
		overflow: clip;
		line-height: 1;
		overflow-wrap: break-word;
		background-color: #e8e8e8;
		background-image:
			linear-gradient(45deg, #ccc 25%, transparent 25%, transparent 75%, #ccc 75%, #ccc),
			linear-gradient(45deg, #ccc 25%, transparent 25%, transparent 75%, #ccc 75%, #ccc);
		background-position:
			0 0,
			5px 5px;
		background-size: 10px 10px;
		border: 2px dashed var(--ed11y-primary);
		border-radius: 3.2px;
	}

	#contrast-preview:empty {
		display: none;
	}

	#color-pickers {
		display: flex;
		margin-top: 10px;
	}

	#color-pickers label {
		display: flex;
		align-items: center;

		&[for="bg"] {
			flex-direction: row-reverse;
			gap: 7px;
		}
	}

	#color-pickers input {
		margin-inline-start: 7px;
		cursor: pointer;
	}

	input[type="color" i] {
		padding: 2px;
		background: var(--ed11y-bg);
		border-color: var(--ed11y-primary);
		border-style: solid;
		border-width: 1px;
		border-radius: 50%;
		inline-size: 44px;
		block-size: 44px;
	}

	input[type="color" i]::-webkit-color-swatch-wrapper {
		padding: 1px;
	}

	input[type="color" i]::-webkit-color-swatch {
		border-color: var(--ed11y-primary);
		border-radius: 50%;
	}

	input[type="color" i]::-moz-color-swatch {
		border-color: var(--ed11y-primary);
		border-radius: 50%;
	}

	input[type="color" i].unknown {
		box-shadow: 0 0 0 2px var(--ed11y-warning);
	}

	div.unknown {
		display: inline-block;
		position: relative;

		&::after {
			z-index: 2;
			color: #fff;
			pointer-events: none;
			content: "?";
			justify-content: center;
			align-items: center;
			width: 44px;
			height: 44px;
			margin: -46px 7px;
			font-size: 22px;
			display: flex;
			position: absolute;
		}
	}

	.badge {
		color: #fefefe;
		background: var(--ed11y-alert);
	}

	#contrast {
		margin-right: -0.5em;
		border-right: 0;
		border-radius: 1em 0 0 1em;

		&::after {
			content: ":";
		}
	}

	#value {
		padding-left: 0;
		border-left: 0;
		border-radius: 0 1em 1em 0;
	}

	.good-contrast {
		color: var(--ed11y-primaryText);
		background: var(--ed11y-primary);
	}

	.good-contrast[hidden] {
		display: none;
	}

	hr {
		margin: 0.5em 0 0.75em;
		border-bottom: none;
		opacity: 0.5;
	}
}

.ed11y-hidden,
.ed11y-wrapper .ed11y-hidden {
	display: none;
}

.ed11y-console-error {
	border: 4px solid var(--ed11y-primary, #276499);
	position: fixed;
	bottom: 0;
	background: white;
	color: #222;
	width: 90%;
	left: 5%;
	z-index: 99999;

	.error {
		border: 1px dashed;
		padding: 1em;
	}
}