/* Dismissible advert panel shown on a tool page reached from the home page.
 *
 * Layout is mobile first, matching the rest of the site: a bottom sheet on a
 * phone, a narrower sheet on a tablet, and a side panel from 1024px up. The
 * panel never covers the tool: on a phone it is capped at 45% of the viewport
 * height, and on a desktop at 360px wide, so the tool stays visible and usable
 * beneath it.
 *
 * Sizes follow the Better Ads Standard for anchor-style placements: no more
 * than 30% of the viewport height on tall screens and never more than 45% at
 * any size. A required close control is drawn at a comfortable target on every
 * device, because on a phone the close button is the only way out.
 */

.sk-tool-ad {
	position: fixed;
	z-index: 2147483000;
	display: flex;
	flex-direction: column;
	background: var(--sk-surface, #ffffff);
	color: var(--sk-ink, #22303a);
	border: 1px solid var(--sk-line, #dce4ea);
	box-shadow: 0 12px 34px rgba(16, 24, 40, 0.18);
	box-sizing: border-box;
	overflow: hidden;
	animation: sk-tool-ad-in 200ms ease-out;
}

/* Phone: a bottom sheet.
 *
 * The existing anchor unit also lives at the bottom of the viewport, so the
 * sheet is offset by whatever height that unit has reserved. Without this the
 * two would overlap and the close button would be hidden behind the anchor. */
.sk-tool-ad {
	left: 0;
	right: 0;
	bottom: var(--sk-anchor-h, 0px);
	/* A definite height, not a max-height. AdSense replaces the sizing of the
	   box around its unit with an inline !important declaration, which no
	   stylesheet rule can outrank, so the cap has to come from the panel being
	   a fixed size that the advert fills rather than one it grows. */
	height: 45vh;
	border-width: 1px 0 0;
	border-radius: 14px 14px 0 0;
}

.sk-tool-ad-bar {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 10px;
	padding: 8px 12px;
	border-bottom: 1px solid var(--sk-line, #dce4ea);
	flex: none;
}

.sk-tool-ad-label {
	color: var(--sk-muted, #5f7180);
	font-size: 0.7rem;
	letter-spacing: 0.09em;
	text-transform: uppercase;
}

/* Comfortably above the 44px target on touch, because this is the only exit. */
.sk-tool-ad-close {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	margin: -6px -6px -6px 0;
	padding: 0;
	border: 0;
	border-radius: 10px;
	background: transparent;
	color: var(--sk-muted, #5f7180);
	font-size: 1.4rem;
	line-height: 1;
	cursor: pointer;
	flex: none;
}

.sk-tool-ad-close:hover,
.sk-tool-ad-close:focus-visible {
	background: rgba(16, 24, 40, 0.07);
	color: var(--sk-ink, #22303a);
}

.sk-tool-ad-close:focus-visible {
	outline: 2px solid var(--sk-purple, #7b61ff);
	outline-offset: 2px;
}

/* The unit scrolls on its own rather than pushing the page, so a tall creative
   cannot grow the sheet past its cap and cover the tool. */
.sk-tool-ad-body {
	flex: 1 1 auto;
	min-height: 0;
	overflow-y: auto;
	-webkit-overflow-scrolling: touch;
	padding: 8px 12px 12px;
}

/* AdSense writes "height: auto !important; max-height: none !important" onto
 * the direct parent of its <ins> when a unit fills, in order to size the
 * container to the creative. That write lands on .sk-tool-ad-unit, so the cap
 * stays on the outer panel. Without this wrapper the network's inline style
 * overrode the panel's max-height and a phone sheet could cover the tool. */
.sk-tool-ad-unit {
	display: block;
	max-width: 100%;
}

.sk-tool-ad-body > ins,
.sk-tool-ad-unit > ins {
	display: block;
	max-width: 100%;
}

.sk-tool-ad-out {
	animation: sk-tool-ad-out 200ms ease-in forwards;
}

@keyframes sk-tool-ad-in {
	from { opacity: 0; transform: translateY(14px); }
	to   { opacity: 1; transform: translateY(0); }
}

@keyframes sk-tool-ad-out {
	from { opacity: 1; transform: translateY(0); }
	to   { opacity: 0; transform: translateY(14px); }
}

/* -------------------------------------------------------------- 768px and up
 * Tablet: centre the sheet and cap its width so it does not stretch the full
 * tablet screen, where a full-width strip reads as a banner rather than a
 * panel. Kept at the bottom so the thumb still reaches the close control. */
@media (min-width: 768px) {
	.sk-tool-ad {
		left: 50%;
		right: auto;
		width: min(560px, calc(100vw - 64px));
		transform: translateX(-50%);
		border-width: 1px;
		border-radius: 14px;
		height: 40vh;
		margin-bottom: 18px;
	}

	.sk-tool-ad-close {
		width: 44px;
		height: 44px;
		font-size: 1.5rem;
	}

	/* The transform in the base keyframes would fight the centring translate on
	   this breakpoint, so the animation is redefined against it. */
	@keyframes sk-tool-ad-in {
		from { opacity: 0; transform: translateX(-50%) translateY(16px); }
		to   { opacity: 1; transform: translateX(-50%) translateY(0); }
	}

	@keyframes sk-tool-ad-out {
		from { opacity: 1; transform: translateX(-50%) translateY(0); }
		to   { opacity: 0; transform: translateX(-50%) translateY(16px); }
	}
}

/* ------------------------------------------------------------ 1024px and up
 * Desktop: a side panel pinned to the bottom right. It sits clear of the
 * content column rather than over it, and is capped at 360px so it never
 * dominates the screen. */
@media (min-width: 1024px) {
	.sk-tool-ad {
		left: auto;
		right: 22px;
		bottom: calc(var(--sk-anchor-h, 0px) + 22px);
		transform: none;
		width: 360px;
		height: 420px;
		margin-bottom: 0;
		border-radius: 14px;
	}

	@keyframes sk-tool-ad-in {
		from { opacity: 0; transform: translateY(18px); }
		to   { opacity: 1; transform: translateY(0); }
	}

	@keyframes sk-tool-ad-out {
		from { opacity: 1; transform: translateY(0); }
		to   { opacity: 0; transform: translateY(18px); }
	}
}

/* Dark scheme. The panel borrows the page tokens, and these defaults only
   apply where a token is missing. */
html[data-sk-scheme="dark"] .sk-tool-ad {
	background: var(--sk-surface, #16161a);
	color: var(--sk-ink, #e8e8ef);
	border-color: var(--sk-line, #2a2a33);
	box-shadow: 0 12px 34px rgba(0, 0, 0, 0.5);
}

html[data-sk-scheme="dark"] .sk-tool-ad-close:hover,
html[data-sk-scheme="dark"] .sk-tool-ad-close:focus-visible {
	background: rgba(255, 255, 255, 0.1);
}

/* Reserve room at the end of the document while the panel is open, so the last
   line of the tool is not permanently behind it. The script sets the variable
   to the measured height. */
.sk-tool-ad-on body {
	padding-bottom: var(--sk-tool-ad-h, 0px);
}

@media (prefers-reduced-motion: reduce) {
	.sk-tool-ad,
	.sk-tool-ad-out {
		animation: none;
	}
}