/* Ad slot container and label.
 *
 * Only loaded on pages where the manual slot renders, so this costs nothing on
 * the pages that are left to Auto ads.
 *
 * The point of the container rather than a bare <ins> is that a unit needs to be
 * visibly an advert. An unlabelled block sitting under a download button is
 * the layout that produces accidental clicks, and an accidental click is a
 * policy matter rather than a cosmetic one.
 *
 * This styles placement and nothing else. It does not hide, delay, refresh or
 * reposition a unit based on whether it filled.
 */

.sk-ad {
	margin: 34px 0 0;
	padding: 14px 0 0;
	border-top: 1px solid var(--sk-line, #e5ddec);
}

/* The mid-content slot sits between two prose sections, so it needs air on both
 * sides. Without this it sits flush against the heading that follows and reads
 * as part of the tool rather than as a labelled break in the text. */
.sk-ad[data-sk-ad="mid-content"] {
	margin: 38px 0;
	padding: 18px 0;
}

/* Keep the unit inside the content column.
 *
 * Auto ads were placing units wider than the text block, which is the
 * "advert hanging off the edge of the screen" case. Clamping the container is
 * what stops a full-width-responsive unit from doing it here. */
.sk-ad > ins {
	display: block;
	max-width: 100%;
}

.sk-ad-label {
	display: block;
	margin-bottom: 8px;
	color: #6b7280;
	font-size: .72rem;
	letter-spacing: .09em;
	text-transform: uppercase;
}

/* Bottom anchor unit.
 *
 * The Better Ads Standard permits an anchor ad but caps it at 30% of the
 * viewport and requires that the visitor can dismiss it. Both limits are
 * enforced here, and the unit only appears after the visitor has scrolled past
 * the first screen, so the hero is never covered.
 *
 * The height is left to the unit rather than fixed: too short would clip the
 * advert, which is a policy problem, and too tall would leave a blank band. The
 * script measures the result and reserves exactly that much space at the end of
 * the document, which is what keeps the last paragraph readable.
 */

.sk-anchor-ad {
	position: fixed;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: 9990;
	max-height: 30vh;
	overflow: hidden;
	padding: 0 46px calc(4px + env(safe-area-inset-bottom, 0px)) 10px;
	background: var(--sk-surface, #fff);
	border-top: 1px solid var(--sk-line, #e5ddec);
	box-shadow: 0 -10px 30px rgba(60, 40, 80, .13);
}

.sk-anchor-ad[hidden] {
	display: none !important;
}

.sk-anchor-head {
	display: flex;
	align-items: center;
	height: 20px;
	max-width: 970px;
	margin: 0 auto;
}

.sk-anchor-label {
	color: #6b7280;
	font-size: .62rem;
	letter-spacing: .09em;
	text-transform: uppercase;
}

.sk-anchor-ad ins.adsbygoogle {
	display: block;
	width: 100%;
	max-width: 970px;
	margin: 0 auto;
	min-height: 50px;
}

.sk-anchor-close {
	position: absolute;
	top: 0;
	right: 0;
	width: 42px;
	height: 42px;
	padding: 0;
	border: 0;
	background: transparent;
	color: #6b7280;
	font-size: 22px;
	line-height: 1;
	cursor: pointer;
}

.sk-anchor-close:hover,
.sk-anchor-close:focus-visible {
	color: #452b61;
}

/* Reserve the strip the bar covers. The value is measured by the script; the
 * fallback only applies for the instant before the first measurement. */
html.sk-anchor-on body {
	padding-bottom: calc(var(--sk-anchor-h, 100px) + env(safe-area-inset-bottom, 0px));
}

@media (min-width: 720px) {
	.sk-anchor-ad {
		padding-left: 46px;
	}

	.sk-anchor-ad ins.adsbygoogle {
		min-height: 90px;
	}
}

html[data-sk-scheme="dark"] .sk-anchor-ad {
	background: #1b1826;
	border-top-color: #38314a;
	box-shadow: 0 -10px 30px rgba(0, 0, 0, .5);
}

html[data-sk-scheme="dark"] .sk-anchor-label,
html[data-sk-scheme="dark"] .sk-anchor-close {
	color: #a79cb8;
}

html[data-sk-scheme="dark"] .sk-anchor-close:hover,
html[data-sk-scheme="dark"] .sk-anchor-close:focus-visible {
	color: #e3cff7;
}