/**
 * Authoring blocks: Callout, Steps, Code, Tabs, FAQ, Lightbox Image and
 * Docs Gallery (plus the lightbox they open).
 *
 * These can sit in any post, not only on docs pages, so nothing here relies
 * on the `.kl-root` design tokens. Neutrals are mixed from the theme's own
 * text colour (`currentColor`), which keeps them right on light and dark
 * themes alike; text keeps the theme's font and colour. Each callout type
 * has one fixed accent, used for its border and icon only (never for text),
 * so contrast never depends on the theme.
 *
 * Icons are CSS masks, not saved markup: the saved HTML stays minimal and
 * can't go stale when an icon changes.
 *
 * Buttons the script adds (tabs, Copy, the lightbox's) carry `:not(#kl)`.
 * It matches every element, but counts as an ID, so these rules outrank a
 * theme's button styling: Twenty Twenty-One's `button:not(:hover):not(
 * :active):not(.has-background)` would otherwise paint tabs as dark buttons.
 */

.kl-callout,
.kl-steps,
.kl-code,
.kl-tabs,
.kl-faq,
.kl-image,
.kl-gallery {
	--kl-c-line: color-mix(in srgb, currentcolor 16%, transparent);
	--kl-c-fill: color-mix(in srgb, currentcolor 4%, transparent);
	--kl-c-muted: color-mix(in srgb, currentcolor 65%, transparent);
	--kl-c-radius: 0.625rem;
	--kl-c-accent: #6456f5;
	box-sizing: border-box;
	margin-block: 1.5em;
}

/* ------------------------------------------------------------------ Callout */

.kl-callout {
	position: relative;
	padding: 0.875em 1.125em 0.875em 3em;
	border: 1px solid color-mix(in srgb, var(--kl-c-accent) 30%, transparent);
	border-left: 4px solid var(--kl-c-accent);
	border-radius: var(--kl-c-radius);
	background: color-mix(in srgb, var(--kl-c-accent) 7%, transparent);
}

.kl-callout::before {
	content: "";
	position: absolute;
	top: 0.95em;
	left: 1em;
	width: 1.25em;
	height: 1.25em;
	background: var(--kl-c-accent);
	mask: var(--kl-c-icon) center / contain no-repeat;
}

.kl-callout.is-note {
	--kl-c-accent: #2f6fe4;
	--kl-c-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cpath d='M12 16v-4M12 8h.01'/%3E%3C/svg%3E");
}

.kl-callout.is-tip {
	--kl-c-accent: #0f8a6c;
	--kl-c-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M15 14c.2-1 .7-1.7 1.5-2.5 1-.9 1.5-2.2 1.5-3.5A6 6 0 0 0 6 8c0 1 .2 2.2 1.5 3.5.7.7 1.3 1.5 1.5 2.5M9 18h6M10 22h4'/%3E%3C/svg%3E");
}

.kl-callout.is-important {
	--kl-c-accent: #6456f5;
	--kl-c-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M11.5 2.3a.5.5 0 0 1 1 0l2.3 4.6a2 2 0 0 0 1.5 1.1l5.2.8a.5.5 0 0 1 .3.9l-3.7 3.6a2 2 0 0 0-.6 1.8l.9 5.1a.5.5 0 0 1-.8.6l-4.6-2.4a2 2 0 0 0-1.9 0l-4.6 2.4a.5.5 0 0 1-.8-.6l.9-5.1a2 2 0 0 0-.6-1.8L2.4 9.7a.5.5 0 0 1 .3-.9l5.2-.8a2 2 0 0 0 1.5-1.1z'/%3E%3C/svg%3E");
}

.kl-callout.is-warning {
	--kl-c-accent: #c26a06;
	--kl-c-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m21.7 18-8-14a2 2 0 0 0-3.5 0l-8 14A2 2 0 0 0 4 21h16a2 2 0 0 0 1.7-3M12 9v4M12 17h.01'/%3E%3C/svg%3E");
}

.kl-callout.is-danger {
	--kl-c-accent: #d42f2f;
	--kl-c-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M7.9 2h8.2L22 7.9v8.2L16.1 22H7.9L2 16.1V7.9zM15 9l-6 6M9 9l6 6'/%3E%3C/svg%3E");
}

.kl-callout__title {
	margin: 0 0 0.25em;
	font-weight: 700;
	line-height: 1.4;
}

.kl-callout__body > :first-child {
	margin-top: 0;
}

.kl-callout__body > :last-child {
	margin-bottom: 0;
}

/* -------------------------------------------------------------------- Steps */

.kl-steps {
	counter-reset: kl-step;
	margin-left: 0;
	padding: 0;
	list-style: none;
}

.kl-step {
	position: relative;
	margin: 0;
	padding: 0 0 1.5em 3em;
	counter-increment: kl-step;
}

/* The number in a circle, joined to the next one by a line. */
.kl-step::before {
	content: counter(kl-step);
	position: absolute;
	top: 0;
	left: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 2em;
	height: 2em;
	border-radius: 999px;
	background: var(--kl-c-accent);
	color: #fff;
	font-size: 0.875em;
	font-weight: 700;
	line-height: 1;
}

.kl-step::after {
	content: "";
	position: absolute;
	top: 2.25em;
	bottom: 0.25em;
	left: calc(0.875em - 1px);
	width: 2px;
	background: var(--kl-c-line);
}

.kl-step:last-child {
	padding-bottom: 0;
}

.kl-step:last-child::after {
	display: none;
}

.kl-step__title {
	margin: 0 0 0.375em;
	padding-top: 0.125em;
	font-size: 1.0625em;
	font-weight: 700;
	line-height: 1.4;
}

.kl-step__body > :first-child {
	margin-top: 0;
}

.kl-step__body > :last-child {
	margin-bottom: 0;
}

/* --------------------------------------------------------------------- Code */

.kl-code {
	position: relative;
	overflow: hidden;
	border: 1px solid var(--kl-c-line);
	border-radius: var(--kl-c-radius);
}

.kl-code__header {
	display: flex;
	align-items: center;
	gap: 0.75em;
	min-height: 2.5em;
	padding: 0.375em 0.5em 0.375em 1em;
	border-bottom: 1px solid var(--kl-c-line);
	background: var(--kl-c-fill);
	font-size: 0.8125em;
}

.kl-code__filename {
	overflow: hidden;
	font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
	font-weight: 600;
	white-space: nowrap;
	text-overflow: ellipsis;
}

.kl-code__lang {
	margin-left: auto;
	color: var(--kl-c-muted);
	font-weight: 600;
	letter-spacing: 0.04em;
	text-transform: uppercase;
}

/* The inner core Code block: the frame belongs to the wrapper. Doubled
   class to outrank docs pages' own `pre` styling (`.kl-root .kl-prose pre`),
   which would draw a second box inside the frame. */
.kl-code.kl-code pre,
.kl-code.kl-code .wp-block-code {
	margin: 0;
	border: 0;
	border-radius: 0;
}

.kl-code__copy:not(#kl) {
	display: inline-flex;
	align-items: center;
	gap: 0.375em;
	margin: 0;
	padding: 0.25em 0.625em;
	border: 1px solid var(--kl-c-line);
	border-radius: 0.375rem;
	background: transparent;
	color: inherit;
	font: inherit;
	font-size: 0.8125rem;
	line-height: 1.5;
	cursor: pointer;
}

.kl-code__copy:not(#kl):hover {
	background: var(--kl-c-fill);
}

.kl-code__copy:not(#kl):focus-visible {
	outline: 2px solid var(--kl-c-accent);
	outline-offset: 1px;
}

/* No header: the copy button floats over the code's top-right corner. */
.kl-code > .kl-code__copy:not(#kl) {
	position: absolute;
	z-index: 1;
	top: 0.5em;
	right: 0.5em;
	backdrop-filter: blur(4px);
}

.kl-code__header .kl-code__lang + .kl-code__copy:not(#kl) {
	margin-left: 0;
}

.kl-code__header .kl-code__copy:not(#kl):first-child {
	margin-left: auto;
}

/*
 * Line numbers: a gutter beside the code (added by the script, and by the
 * editor), not inside it, so copying or selecting the code never picks the
 * numbers up and the gutter stays put while long lines scroll. Both sides
 * get the same fixed type and padding so each number lines up with its line;
 * lines don't wrap, since a wrapped line would push the rest out of step.
 */
.kl-code--numbered {
	display: grid;
	grid-template-columns: auto minmax(0, 1fr);
}

.kl-code--numbered > .kl-code__header {
	grid-column: 1 / -1;
}

.kl-code--numbered > div:not(.kl-code__header, .kl-code__gutter) {
	grid-column: 2;
	min-width: 0;
}

.kl-code.kl-code--numbered pre,
.kl-code__gutter {
	box-sizing: border-box;
	margin: 0;
	padding-block: 1em;
	font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
	font-size: 0.875rem;
	line-height: 1.7;
}

.kl-code.kl-code--numbered pre {
	overflow-x: auto;
	padding-inline: 1em 1.25em;
	white-space: pre;
	overflow-wrap: normal;
	word-break: normal;
}

.kl-code.kl-code--numbered pre code {
	font: inherit;
	white-space: inherit;
}

.kl-code__gutter {
	grid-column: 1;
	padding-inline: 1em 0.75em;
	border-right: 1px solid var(--kl-c-line);
	background: var(--kl-c-fill);
	color: var(--kl-c-muted);
	text-align: right;
	white-space: pre;
	user-select: none;
	font-variant-numeric: tabular-nums;
}

/* --------------------------------------------------------------------- Tabs */

/* Without the script, every panel shows under its own label. */
.kl-tab__label {
	margin: 1em 0 0.5em;
	font-weight: 700;
}

.kl-tab:first-child .kl-tab__label {
	margin-top: 0;
}

.kl-tabs.is-enhanced .kl-tab__label {
	display: none;
}

.kl-tabs__list {
	display: flex;
	flex-wrap: wrap;
	gap: 0.25em;
	margin: 0 0 1em;
	padding: 0;
	border-bottom: 1px solid var(--kl-c-line);
}

.kl-tabs__tab:not(#kl) {
	margin: 0 0 -1px;
	padding: 0.5em 0.875em;
	border: 0;
	border-bottom: 2px solid transparent;
	background: none;
	color: var(--kl-c-muted);
	font: inherit;
	font-size: 0.9375em;
	font-weight: 600;
	cursor: pointer;
}

.kl-tabs__tab:not(#kl):hover {
	color: inherit;
}

.kl-tabs__tab:not(#kl)[aria-selected="true"] {
	border-bottom-color: var(--kl-c-accent);
	color: inherit;
}

.kl-tabs__tab:not(#kl):focus-visible {
	outline: 2px solid var(--kl-c-accent);
	outline-offset: -2px;
	border-radius: 0.25rem;
}

.kl-tab__panel > :first-child {
	margin-top: 0;
}

.kl-tab__panel > :last-child {
	margin-bottom: 0;
}

.kl-tabs.is-enhanced .kl-tab[hidden] {
	display: none;
}

/* ---------------------------------------------------------------------- FAQ */

.kl-faq {
	border-top: 1px solid var(--kl-c-line);
}

.kl-faq__item {
	border-bottom: 1px solid var(--kl-c-line);
}

.kl-faq__question {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1em;
	padding: 1em 0.25em;
	font-weight: 700;
	line-height: 1.4;
	list-style: none;
	cursor: pointer;
}

.kl-faq__question::-webkit-details-marker {
	display: none;
}

/* A chevron that turns when the answer opens. */
.kl-faq__question::after {
	content: "";
	flex: none;
	width: 0.55em;
	height: 0.55em;
	margin-right: 0.25em;
	border-right: 2px solid var(--kl-c-muted);
	border-bottom: 2px solid var(--kl-c-muted);
	transform: rotate(45deg) translateY(-25%);
	transition: transform 150ms ease;
}

.kl-faq__item[open] > .kl-faq__question::after {
	transform: rotate(-135deg) translateY(-25%);
}

.kl-faq__question:focus-visible {
	outline: 2px solid var(--kl-c-accent);
	outline-offset: 2px;
	border-radius: 0.25rem;
}

.kl-faq__answer {
	padding: 0 0.25em 1.125em;
}

.kl-faq__answer > :first-child {
	margin-top: 0;
}

.kl-faq__answer > :last-child {
	margin-bottom: 0;
}

/* ------------------------------------------------- Lightbox Image, Gallery */

.kl-image,
.kl-gallery,
.kl-gallery__figure {
	margin-inline: 0;
}

.kl-image__img,
.kl-gallery__img {
	display: block;
	max-width: 100%;
	height: auto;
}

/* Screenshots with white edges would melt into a white page without this:
   the image sits on a mat, so its own edge shows against it. Neutral grey,
   not `currentcolor`: inside its lightbox link that is the link colour,
   which tinted the frame. Mid-grey at low opacity reads on light and dark
   pages alike. */
.kl-image--framed .kl-image__img {
	box-sizing: border-box;
	padding: clamp(0.5rem, 2.5%, 1rem);
	border: 1px solid rgb(128 128 128 / 22%);
	border-radius: calc(var(--kl-c-radius) * 0.8);
	background: rgb(128 128 128 / 8%);
	box-shadow: 0 1px 2px rgb(0 0 0 / 5%), 0 10px 24px -14px rgb(0 0 0 / 22%);
}


.kl-image__link,
.kl-gallery__link {
	position: relative;
	display: block;
	width: fit-content;
	max-width: 100%;
	border-radius: calc(var(--kl-c-radius) * 0.8);
	cursor: zoom-in;
}

.kl-gallery__link {
	width: 100%;
}

/* An "expand" badge on hover and focus, so readers know it opens. */
.kl-image__link::after,
.kl-gallery__link::after {
	content: "";
	position: absolute;
	top: 0.625rem;
	right: 0.625rem;
	width: 2rem;
	height: 2rem;
	border-radius: 999px;
	background:
		rgb(17 17 32 / 72%) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M15 3h6v6M9 21H3v-6M21 3l-7 7M3 21l7-7'/%3E%3C/svg%3E") center / 1rem no-repeat;
	box-shadow: 0 2px 8px rgb(0 0 0 / 20%);
	opacity: 0;
	transition: opacity 150ms ease;
}

.kl-image__link:hover::after,
.kl-image__link:focus-visible::after,
.kl-gallery__link:hover::after,
.kl-gallery__link:focus-visible::after {
	opacity: 1;
}

.kl-image__link:focus-visible,
.kl-gallery__link:focus-visible {
	outline: 2px solid var(--kl-c-accent);
	outline-offset: 3px;
}

.kl-image__caption,
.kl-gallery__caption {
	text-align: start;
	margin-top: 0.625em;
	color: var(--kl-c-muted);
	font-size: 0.875em;
	line-height: 1.5;
}

.kl-gallery__caption--main {
	margin-top: 1em;
}

/* Gallery: a plain grid. Without cropping, each image keeps its own shape and
   rows line up at the top. */
.kl-gallery .kl-gallery__grid {
	display: grid;
	grid-template-columns: repeat(var(--kl-g-cols, 2), minmax(0, 1fr));
	align-items: start;
	gap: 1.25em 1em;
	margin: 0;
	padding: 0;
	list-style: none;
}

.kl-gallery .kl-gallery__item {
	margin: 0;
	padding: 0;
}

.kl-gallery--cols-1 {
	--kl-g-cols: 1;
}

.kl-gallery--cols-2 {
	--kl-g-cols: 2;
}

.kl-gallery--cols-3 {
	--kl-g-cols: 3;
}

.kl-gallery--cols-4 {
	--kl-g-cols: 4;
}

.kl-gallery__img {
	width: 100%;
	border: 1px solid var(--kl-c-line);
	border-radius: calc(var(--kl-c-radius) * 0.8);
	box-shadow: 0 1px 2px rgb(0 0 0 / 5%), 0 10px 24px -14px rgb(0 0 0 / 22%);
}

/* Cropped: matching tiles, trimmed from the top, where a screenshot's
   context (title bar, page header) usually is. */
.kl-gallery--crop .kl-gallery__img {
	aspect-ratio: 4 / 3;
	object-fit: cover;
	object-position: top;
}

@media (max-width: 600px) {

	.kl-gallery--cols-3,
	.kl-gallery--cols-4 {
		--kl-g-cols: 2;
	}
}

/* The lightbox: one <dialog> for the page, always dark whatever the theme. */
.kl-lightbox-open {
	overflow: hidden;
}

.kl-lightbox[open] {
	position: fixed;
	inset: 0;
	box-sizing: border-box;
	display: grid;
	place-items: center;
	width: 100%;
	max-width: none;
	height: 100%;
	max-height: none;
	margin: 0;
	padding: 3.75rem 4.5rem;
	border: 0;
	background: transparent;
	color: #fff;
	overflow: hidden;
}

.kl-lightbox::backdrop {
	background: rgb(12 12 24 / 95%);
}

.kl-lightbox__figure {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 0.875rem;
	min-height: 0;
	max-width: 100%;
	max-height: 100%;
	margin: 0;
}

.kl-lightbox__img {
	display: block;
	width: auto;
	max-width: 100%;
	height: auto;
	max-height: calc(100vh - 10rem);
	max-height: calc(100dvh - 10rem);
	border-radius: 0.5rem;
	box-shadow: 0 20px 60px rgb(0 0 0 / 45%);
	object-fit: contain;
}

.kl-lightbox__caption {
	max-width: 65ch;
	color: rgb(255 255 255 / 85%);
	font-size: 0.9375rem;
	line-height: 1.5;
	text-align: center;
}

.kl-lightbox__count {
	position: absolute;
	top: 1.25rem;
	left: 1.5rem;
	margin: 0;
	color: rgb(255 255 255 / 75%);
	font-size: 0.875rem;
	font-variant-numeric: tabular-nums;
}

.kl-lightbox__button:not(#kl) {
	position: absolute;
	display: grid;
	place-items: center;
	width: 2.75rem;
	height: 2.75rem;
	margin: 0;
	padding: 0;
	border: 0;
	border-radius: 999px;
	background: rgb(255 255 255 / 12%);
	color: #fff;
	cursor: pointer;
}

.kl-lightbox__button:not(#kl)[hidden] {
	display: none;
}

.kl-lightbox__button:not(#kl):hover {
	background: rgb(255 255 255 / 24%);
}

/* Themes ring every focused button; ours ring only for keyboard focus. */
.kl-lightbox__button:not(#kl):focus:not(:focus-visible) {
	outline: none;
}

.kl-lightbox__button:not(#kl):focus-visible {
	outline: 2px solid #fff;
	outline-offset: 2px;
}

.kl-lightbox__button:not(#kl)::before {
	content: "";
	width: 1.25rem;
	height: 1.25rem;
	background: currentcolor;
	mask: var(--kl-lb-icon) center / contain no-repeat;
}

.kl-lightbox__close:not(#kl) {
	--kl-lb-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M18 6 6 18M6 6l12 12'/%3E%3C/svg%3E");
	top: 0.75rem;
	right: 0.75rem;
}

.kl-lightbox__prev:not(#kl),
.kl-lightbox__next:not(#kl) {
	top: 50%;
	transform: translateY(-50%);
}

.kl-lightbox__prev:not(#kl) {
	--kl-lb-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m15 18-6-6 6-6'/%3E%3C/svg%3E");
	left: 0.75rem;
}

.kl-lightbox__next:not(#kl) {
	--kl-lb-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m9 18 6-6-6-6'/%3E%3C/svg%3E");
	right: 0.75rem;
}

/* Phones: arrows move under the image, leaving it the full width. */
@media (max-width: 600px) {

	.kl-lightbox[open] {
		padding: 3.75rem 0.75rem 4.75rem;
	}

	.kl-lightbox__prev:not(#kl),
	.kl-lightbox__next:not(#kl) {
		top: auto;
		bottom: 1rem;
		transform: none;
	}

	.kl-lightbox__prev:not(#kl) {
		left: calc(50% - 3.25rem);
	}

	.kl-lightbox__next:not(#kl) {
		right: calc(50% - 3.25rem);
	}
}

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

	.kl-lightbox[open] {
		animation: kl-lightbox-in 160ms ease-out;
	}
}

@keyframes kl-lightbox-in {

	from {
		opacity: 0;
	}
}

@media (prefers-reduced-motion: reduce) {

	.kl-faq__question::after,
	.kl-image__link::after,
	.kl-gallery__link::after {
		transition: none;
	}
}