/**
 * Core List block styles registered in includes/list-styles.php, plus the
 * `ws-checklist--stacked` modifier for the interactive-card checklist.
 *
 * Font size and colour block supports still win: preset classes such as
 * `has-small-font-size` are `!important`, and text colour is inherited.
 */

/* Slashes: inline names, centred, with a blue slash after all but the last.
   Each name and its slash never wrap, so a slash can end a line but never
   start one. Add `ws-slashes-break` (or `ws-slashes-break-m` for phones only)
   to a list item to swap its slash for a set line break. */
.wp-block-list.is-style-webstacked-slashes {
	max-width: 44rem;
	margin-inline: auto;
	padding: 0;
	font-size: var(--wp--preset--font-size--lede, 1.25rem);
	line-height: 1.5;
	letter-spacing: -0.01em;
	text-align: center;
	list-style: none;
}

.wp-block-list.is-style-webstacked-slashes > li {
	display: inline;
	margin: 0;
	white-space: nowrap;
}

/* Editor canvas: the item text sits in a block-level rich-text element, and
   there is no white space between items, so the slash carries the space. */
.wp-block-list.is-style-webstacked-slashes > li > .block-editor-rich-text__editable {
	display: inline;
}

.block-editor-block-list__block.wp-block-list.is-style-webstacked-slashes > li:not(:last-child)::after {
	margin-inline-end: 0.45em;
}

.wp-block-list.is-style-webstacked-slashes > li:not(:last-child)::after {
	content: "/" / "";
	margin-inline: 0.42em 0.18em;
	color: var(--wp--preset--color--accent, #155eef);
	font-weight: 300;
}

.has-ink-background-color .wp-block-list.is-style-webstacked-slashes > li:not(:last-child)::after,
.has-ink-old-background-color .wp-block-list.is-style-webstacked-slashes > li:not(:last-child)::after {
	color: var(--wp--preset--color--accent-soft, #afcbff);
}

.wp-block-list.is-style-webstacked-slashes > li.ws-slashes-break::after {
	content: "\A" / "";
	margin: 0;
	white-space: pre;
}

@media (max-width: 699px) {

	.wp-block-list.is-style-webstacked-slashes > li.ws-slashes-break-m::after {
		content: "\A" / "";
		margin: 0;
		white-space: pre;
	}
}

/* Tags: small tinted pills in a wrapping row. */
.wp-block-list.is-style-webstacked-tags {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
	padding: 0;
	list-style: none;
}

.wp-block-list.is-style-webstacked-tags > li {
	margin: 0;
	padding: 0.35rem 0.85rem;
	border-radius: var(--wp--preset--border-radius--pill, 999px);
	background: color-mix(in srgb, var(--wp--preset--color--accent, #155eef) 6%, #fff);
	color: var(--wp--preset--color--accent-hover, #0e48c4);
	font-size: 0.875rem;
	font-weight: 600;
	line-height: 1.3;
}

/* Numbered: circled numbers beside medium-weight lines. Accent circles with
   white numerals by default; white circles with accent numerals on an accent
   background (the closing plate). */
.wp-block-list.is-style-webstacked-numbered {
	display: grid;
	gap: 1rem;
	padding: 0;
	counter-reset: ws-numbered;
	list-style: none;
}

.wp-block-list.is-style-webstacked-numbered > li {
	display: flex;
	align-items: center;
	gap: 1rem;
	margin: 0;
	font-size: var(--wp--preset--font-size--card-small, 1.5rem);
	font-weight: 500;
	line-height: 1.2;
	letter-spacing: -0.025em;
	counter-increment: ws-numbered;
}

.wp-block-list.is-style-webstacked-numbered > li::before {
	content: counter(ws-numbered) / "";
	display: grid;
	flex: none;
	place-items: center;
	width: 2.75rem;
	height: 2.75rem;
	border-radius: 50%;
	background: var(--wp--preset--color--accent, #155eef);
	color: var(--wp--preset--color--on-accent, #fff);
	font-size: 1.125rem;
	font-weight: 650;
	letter-spacing: 0;
	font-variant-numeric: tabular-nums;
}

.has-accent-background-color .wp-block-list.is-style-webstacked-numbered > li::before {
	background: var(--wp--preset--color--on-accent, #fff);
	color: var(--wp--preset--color--accent, #155eef);
}

@media (max-width: 640px) {

	.wp-block-list.is-style-webstacked-numbered > li {
		gap: 0.875rem;
		font-size: 1.25rem;
	}

	.wp-block-list.is-style-webstacked-numbered > li::before {
		width: 2.5rem;
		height: 2.5rem;
		font-size: 1rem;
	}
}

/* Stacked checklist: `ws-checklist ws-checklist--stacked` on a List block,
   each item written as `<strong>First line</strong><br>Second line`. A solid
   accent tick, a bold first line and a muted second line. The extra classes
   in each selector outrank the base `ws-checklist` rules in the
   interactive-card block CSS, whatever the load order. */
:is(ul, ol).wp-block-list.ws-checklist.ws-checklist--stacked {
	--ws-check-gap: 1.125rem;
	--ws-check-pad: 1.25rem;
	--ws-check-size: 1.75rem;
	padding: 0;
	list-style: none;
}

:is(ul, ol).wp-block-list.ws-checklist.ws-checklist--stacked > li {
	display: block;
	position: relative;
	margin: 0;
	padding: var(--ws-check-pad) 0 var(--ws-check-pad) calc(var(--ws-check-size) + var(--ws-check-gap));
	border-top: 1px solid var(--wp--preset--color--line, rgb(17 21 29 / 14%));
	color: var(--wp--preset--color--ink-muted, #626d79);
	font-size: var(--wp--preset--font-size--small, 1rem);
	line-height: 1.5;
	text-wrap: pretty;
}

:is(ul, ol).wp-block-list.ws-checklist.ws-checklist--stacked > li:first-child {
	--ws-check-pad: 0.25rem;
	border-top: 0;
	padding-bottom: 1.25rem;
}

:is(ul, ol).wp-block-list.ws-checklist.ws-checklist--stacked > li:last-child {
	padding-bottom: 0;
}

:is(ul, ol).wp-block-list.ws-checklist.ws-checklist--stacked > li::before {
	content: "";
	position: absolute;
	top: calc(var(--ws-check-pad) + 0.05rem);
	left: 0;
	width: var(--ws-check-size);
	height: var(--ws-check-size);
	border-radius: 50%;
	background: var(--wp--preset--color--accent, #155eef) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='m3 8.5 3.2 3L13 4.5' fill='none' stroke='%23fff' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 0.85rem no-repeat;
	transform: none;
}

:is(ul, ol).wp-block-list.ws-checklist.ws-checklist--stacked > li > strong:first-child,
:is(ul, ol).wp-block-list.ws-checklist.ws-checklist--stacked > li > .block-editor-rich-text__editable > strong:first-child {
	display: block;
	margin-bottom: 0.3rem;
	color: var(--wp--preset--color--ink, #15171e);
	font-size: clamp(1.1875rem, 1.45vw, 1.3125rem);
	font-weight: 500;
	line-height: 1.3;
	letter-spacing: -0.02em;
}

/* The strong is a block, so the line break after it would add an empty line. */
:is(ul, ol).wp-block-list.ws-checklist.ws-checklist--stacked > li > strong:first-child + br,
:is(ul, ol).wp-block-list.ws-checklist.ws-checklist--stacked > li > .block-editor-rich-text__editable > strong:first-child + br {
	display: none;
}

/* Dark (embossed) cards. */
.is-style-embossed :is(ul, ol).wp-block-list.ws-checklist.ws-checklist--stacked > li {
	border-top-color: var(--wp--preset--color--line-light, rgb(255 255 255 / 16%));
	color: var(--wp--preset--color--dark-copy, #bec6d0);
}

.is-style-embossed :is(ul, ol).wp-block-list.ws-checklist.ws-checklist--stacked > li:first-child {
	border-top: 0;
}

.is-style-embossed :is(ul, ol).wp-block-list.ws-checklist.ws-checklist--stacked > li > strong:first-child,
.is-style-embossed :is(ul, ol).wp-block-list.ws-checklist.ws-checklist--stacked > li > .block-editor-rich-text__editable > strong:first-child {
	color: var(--wp--preset--color--on-contrast, #fff);
}

@media (max-width: 600px) {

	:is(ul, ol).wp-block-list.ws-checklist.ws-checklist--stacked {
		--ws-check-gap: 0.875rem;
		--ws-check-pad: 1.05rem;
	}

	:is(ul, ol).wp-block-list.ws-checklist.ws-checklist--stacked > li:first-child {
		--ws-check-pad: 0.15rem;
		padding-bottom: 1.05rem;
	}

	:is(ul, ol).wp-block-list.ws-checklist.ws-checklist--stacked > li > strong:first-child,
	:is(ul, ol).wp-block-list.ws-checklist.ws-checklist--stacked > li > .block-editor-rich-text__editable > strong:first-child {
		font-size: 1.125rem;
	}
}