/* Scheme-aware tokens: ctdock_colors() mirrors the colours. */
.ctdock {
	--ctdock-accent: light-dark(#1d4ed8, #8ab4ff);
	--ctdock-on-accent: light-dark(#fff, #0b1220);
	--ctdock-surface: light-dark(#fff, #1b1f27);
	--ctdock-text: light-dark(#14181f, #f2f4f7);
	--ctdock-muted: light-dark(#586172, #a5aebc);
	--ctdock-border: light-dark(#d8dce3, #363c48);
	--ctdock-scrim: #0006;
	--ctdock-shadow: 0 10px 30px rgb(0 0 0 / 18%), 0 2px 6px rgb(0 0 0 / 12%);
	--ctdock-radius: 16px;
	--ctdock-size: 56px;
	--ctdock-gap: 12px;
	--ctdock-offset-x: 16px;
	--ctdock-offset-y: 16px;
	--ctdock-z: 99990;

	position: fixed;
	z-index: var(--ctdock-z);
	inset-block-end: calc(var(--ctdock-offset-y) - var(--ctdock-host-bottom, var(--hmf-consent-block, 0px)) + env(safe-area-inset-bottom, 0px));
	inset-inline-end: calc(var(--ctdock-offset-x) + max(env(safe-area-inset-left, 0px), env(safe-area-inset-right, 0px)));
	max-inline-size: calc(100% - 2 * var(--ctdock-offset-x));
	color: var(--ctdock-text);
	color-scheme: light;
	font-size: max(14px, 0.875rem);
	font-weight: 500;
	line-height: 1.4;
	letter-spacing: normal;
	text-align: start;
	text-transform: none;
}

.ctdock[data-edge="start"] {
	inset-inline: calc(var(--ctdock-offset-x) + max(env(safe-area-inset-left, 0px), env(safe-area-inset-right, 0px))) auto;
}

.ctdock,
.ctdock *,
.ctdock ::before,
.ctdock ::after {
	box-sizing: border-box;
}

.ctdock[data-mode="dark"] {
	color-scheme: dark;
}

.ctdock[data-mode="auto"] {
	color-scheme: light dark;
}

/* The transparent border shows in forced colors. */
.ctdock[data-style] button.ctdock__trigger {
	translate: 0 calc(-1 * var(--ctdock-host-bottom, var(--hmf-consent-block, 0px)));
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	min-inline-size: var(--ctdock-size);
	max-inline-size: 100%;
	min-block-size: var(--ctdock-size);
	margin: 0;
	padding: 0 15px;
	border: 1px solid transparent;
	border-radius: 999px;
	background: var(--ctdock-accent);
	box-shadow: var(--ctdock-shadow);
	color: var(--ctdock-on-accent);
	font: inherit;
	letter-spacing: inherit;
	text-transform: inherit;
	appearance: none;
	cursor: pointer;
	touch-action: manipulation;
	-webkit-tap-highlight-color: transparent;
}

.ctdock .ctdock__trigger:hover {
	transform: translateY(-2px);
}

.ctdock .ctdock__trigger:active {
	transform: scale(0.94);
}

.ctdock .ctdock__trigger:focus-visible {
	outline: 2px solid var(--ctdock-text);
	outline-offset: 2px;
	box-shadow: 0 0 0 2px var(--ctdock-surface), var(--ctdock-shadow);
}

.ctdock .ctdock__trigger svg {
	flex: none;
	inline-size: 24px;
	block-size: 24px;
	fill: currentcolor;
}

.ctdock .ctdock__label {
	overflow: hidden;
	min-inline-size: 0;
	max-inline-size: 14em;
	padding-inline-end: 4px;
	text-overflow: ellipsis;
	white-space: nowrap;
}

/* Popover plumbing; closed is hidden without `popover` too. */
.ctdock .ctdock__panel {
	position: fixed;
	inset: auto;
	margin: 0;
	padding: 0;
	border: 0;
	background: var(--ctdock-surface);
	color: var(--ctdock-text);
}

.ctdock .ctdock__panel:not(:is(:popover-open, [data-open])) {
	display: none;
}

@media (prefers-reduced-motion: no-preference) {

	.ctdock .ctdock__trigger {
		transition: transform 0.2s cubic-bezier(0.3, 1.4, 0.6, 1);
	}

	.ctdock[data-pulse] .ctdock__trigger {
		animation: ctdock-pulse 0.6s var(--ctdock-pulse-delay) 2 alternate;
	}

	@keyframes ctdock-pulse {

		to {
			transform: scale(1.15);
		}
	}
}

@media (min-width: 768px) {

	.ctdock[data-devices="phone"] {
		display: none;
	}
}

@media (max-width: 767.98px) {

	.ctdock[data-devices="desktop"] {
		display: none;
	}
}

@media print {

	.ctdock {
		display: none;
	}
}