/**
 * MF Suite — TL;DR box (divb-hq#297).
 *
 * Round 2 of `design/tldr-box-r2.html`. The stylesheet styles **parts**, never designs: a
 * design is a row of four in `Mf_Tldr_Designs` (edge, marker, layout, size), and the box
 * carries one class per part. Values are the blog's own, measured on blog.mayflower.de on
 * 2026-10-27: ink #111, grey #636363, hairline #e5e5e5, 4px radius; the type is the theme's.
 *
 * The tokens on `.mf-tldr` are read by `Mf_Tldr_ContrastTest`, which holds every text pair
 * to 4.5:1 against its own surface — change a colour here and that test says whether it
 * still reads.
 */

.mf-tldr {
	--mf-tldr-ink: #111;
	--mf-tldr-muted: #636363;
	--mf-tldr-hair: #e5e5e5;
	--mf-tldr-accent: #e35205;
	--mf-tldr-blue: #1d4f99;
	--mf-tldr-grey: #f5f5f5;
	--mf-tldr-blue-surface: #eef2f8;

	box-sizing: border-box;
	color: var(--mf-tldr-ink);
}

/* The heading: small capitals, whatever the theme does to an h2. */
.mf-tldr .mf-tldr__title {
	margin: 0 0 0.75rem;
	font-family: inherit;
	font-size: 0.8125rem;
	font-weight: 700;
	line-height: 1.3;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: inherit;
}

/* The readable name behind "TL;DR" — the suite's own rule, not a theme's `.screen-reader-text`. */
.mf-tldr__name {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	border: 0;
	clip-path: inset(50%);
	white-space: nowrap;
}

.mf-tldr .mf-tldr__text,
.mf-tldr .mf-tldr__list {
	margin: 0;
	font-size: inherit;
	line-height: 1.5;
}

.mf-tldr .mf-tldr__list {
	padding: 0 0 0 1.2em;
}

.mf-tldr .mf-tldr__list > li {
	margin: 0;
}

.mf-tldr .mf-tldr__list > li + li {
	margin-top: 0.4em;
}

/* Edge */
.mf-tldr--edge-hairlines {
	padding: 1.25rem 0;
	border-top: 1px solid var(--mf-tldr-hair);
	border-bottom: 1px solid var(--mf-tldr-hair);
}

.mf-tldr--edge-accent {
	padding: 0.125rem 0 0.125rem 1.25rem;
	border-left: 3px solid var(--mf-tldr-accent);
}

.mf-tldr--edge-grey,
.mf-tldr--edge-frame,
.mf-tldr--edge-blue {
	padding: 1.25rem 1.5rem;
	border-radius: 4px;
}

.mf-tldr--edge-grey {
	background: var(--mf-tldr-grey);
}

.mf-tldr--edge-frame {
	border: 1px solid var(--mf-tldr-hair);
}

.mf-tldr--edge-blue {
	background: var(--mf-tldr-blue-surface);
}

.mf-tldr--edge-blue .mf-tldr__title {
	color: var(--mf-tldr-blue);
}

/* Marker: numbers and check marks sit in a column of their own, so a long line hangs. */
.mf-tldr--marker-number .mf-tldr__list,
.mf-tldr--marker-check .mf-tldr__list {
	padding: 0;
	list-style: none;
}

.mf-tldr--marker-number .mf-tldr__list {
	counter-reset: mf-tldr;
}

.mf-tldr--marker-number .mf-tldr__list > li,
.mf-tldr--marker-check .mf-tldr__list > li {
	display: grid;
	grid-template-columns: 1.8em 1fr;
}

.mf-tldr--marker-number .mf-tldr__list > li {
	counter-increment: mf-tldr;
}

.mf-tldr--marker-number .mf-tldr__list > li::before {
	content: counter(mf-tldr);
	font-weight: 600;
	font-variant-numeric: tabular-nums;
	color: var(--mf-tldr-blue);
}

.mf-tldr--marker-check .mf-tldr__list > li::before {
	content: "";
	box-sizing: border-box;
	width: 0.4em;
	height: 0.75em;
	margin: 0.2em 0 0 0.3em;
	border: solid var(--mf-tldr-blue);
	border-width: 0 0.15em 0.15em 0;
	transform: rotate(45deg);
}

.mf-tldr__keyword {
	font-weight: 700;
}

/* Layout */
@media (min-width: 600px) {

	.mf-tldr--layout-side-title {
		display: grid;
		grid-template-columns: 150px 1fr;
		column-gap: 1.5rem;
	}

	.mf-tldr--layout-side-title .mf-tldr__title {
		margin: 0.35em 0 0;
	}
}

.mf-tldr__saves {
	font-weight: 400;
	letter-spacing: 0;
	text-transform: none;
	color: var(--mf-tldr-muted);
}

/* Size */
.mf-tldr--size-compact {
	padding-top: 1rem;
	padding-bottom: 1rem;
	font-size: 0.875em;
}

.mf-tldr--size-compact .mf-tldr__list > li + li {
	margin-top: 0.2em;
}