/*
Theme Name: Methodology
Theme URI: https://methodology.ru
Author: Key Account
Author URI: https://keyaccount.ru
Description: Presentation layer of Methodology.ru: theme.json, templates, template parts and static patterns only. All logic lives in the methodology-core plugin.
Version: 0.7.0
Requires at least: 7.1
Tested up to: 7.1
Requires PHP: 8.3
License: Proprietary
Text Domain: methodology
*/

/*
 * Tokens live in theme.json (UX-DR1–UX-DR5, UX-DR41). This file holds only what
 * theme.json cannot express. Weights go through font-weight: the browser maps
 * them onto the wght axis, so font-variation-settings carries SHRP only.
 */

/* Geologica sharpness axis (UX-DR2): text 0, headings 100. */
body {
	font-variation-settings: "SHRP" var(--wp--custom--sharpness--text);
}

:where(h1, h2, h3, h4, h5, h6) {
	font-variation-settings: "SHRP" var(--wp--custom--sharpness--heading);
}

/* Headings inside article text: 48px above, 16px to their text or the next heading (UX-DR3). */
.wp-block-post-content > :is(h2, h3, h4, h5, h6) {
	margin-block-start: var(--wp--preset--spacing--12);
	margin-block-end: 0;
}

.wp-block-post-content > :is(h2, h3, h4, h5, h6) + * {
	margin-block-start: var(--wp--preset--spacing--4);
}

.wp-block-post-content > :is(h2, h3, h4, h5, h6):first-child {
	margin-block-start: 0;
}

/* Form controls use the text tokens instead of the browser's small system font. */
:where(input, select, textarea) {
	font: inherit;
}

:where(button) {
	font-family: inherit;
	font-size: var(--wp--preset--font-size--button);
	font-weight: var(--wp--custom--type--button--font-weight);
	line-height: var(--wp--custom--type--button--line-height);
}

/* ======================================================================
 * Page frame: header, main, footer (story 1.5; UX-DR7, UX-DR25, UX-DR39,
 * UX-DR52). Markup: parts/header.html, parts/footer.html and the mtd/menu
 * block of methodology-core. The plugin script marks the header .is-stuck
 * while the page is scrolled and the header menu .is-open; everything else
 * is here. Breakpoints follow mockup v6: 960px and 820px.
 * ==================================================================== */

html {
	scroll-padding-top: calc(var(--wp-admin--admin-bar--position-offset, 0px) + var(--wp--custom--layout--header-height) + var(--wp--preset--spacing--4));
}

/* Template parts follow each other without the root block gap. */
.wp-site-blocks > :is(.site-header, header.wp-block-template-part),
.wp-site-blocks > :is(.site-header, header.wp-block-template-part) + *,
.wp-site-blocks > :is(.site-footer, footer.wp-block-template-part) {
	margin-block-start: 0;
}

.wp-site-blocks > .site-main {
	padding-block: var(--wp--custom--layout--section) var(--wp--custom--layout--band);
}

/* ---------------------------------------------------------------- header */

/* Always sticky; a fixed height, so the stuck state changes colours only. */
.wp-site-blocks > :is(.site-header, header.wp-block-template-part) {
	position: sticky;
	top: var(--wp-admin--admin-bar--position-offset, 0px);
	z-index: 20;
	background-color: var(--wp--preset--color--background);
	transition: background-color var(--wp--custom--motion--dur-2) var(--wp--custom--motion--ease-ui);
}

/* Line under the stuck header (200ms). */
.wp-site-blocks > :is(.site-header, header.wp-block-template-part)::after {
	content: "";
	position: absolute;
	inset: auto 0 0;
	height: 1px;
	background-color: var(--wp--preset--color--line);
	opacity: 0;
	pointer-events: none;
	transition: opacity var(--wp--custom--motion--dur-2) var(--wp--custom--motion--ease-ui);
}

.wp-site-blocks > :is(.site-header, header.wp-block-template-part).is-stuck::after {
	opacity: 1;
}

/* Stuck: white at 88 % with an 8px blur; without backdrop-filter it stays solid white. */
@supports ((backdrop-filter: blur(8px)) or (-webkit-backdrop-filter: blur(8px))) and (background-color: color-mix(in srgb, white 88%, transparent)) {
	.wp-site-blocks > :is(.site-header, header.wp-block-template-part).is-stuck {
		background-color: color-mix(in srgb, var(--wp--preset--color--background) 88%, transparent);
		-webkit-backdrop-filter: blur(8px);
		backdrop-filter: blur(8px);
	}
}

:is(.site-header, header.wp-block-template-part) .site-header__inner {
	box-sizing: border-box;
	display: flex;
	align-items: center;
	gap: var(--wp--custom--layout--gutter);
	max-width: var(--wp--style--global--wide-size);
	min-height: var(--wp--custom--layout--header-height);
	margin-inline: auto;
	padding-inline: var(--wp--custom--layout--page-margin);
}

:is(.site-header, header.wp-block-template-part) .site-header__inner > * {
	margin-block: 0;
}

/*
 * Word mark: as wide as the margin field, so the menu starts on the line of the main column.
 * Like every header and footer link it keeps a 44px hit area; the type size stays as designed.
 */
.site-mark {
	box-sizing: border-box;
	display: inline-flex;
	align-items: center;
	flex: none;
	min-block-size: 44px;
	width: var(--wp--custom--layout--margin-column);
	color: var(--wp--preset--color--ink);
	font-size: var(--wp--preset--font-size--wordmark);
	font-weight: var(--wp--custom--type--wordmark--font-weight);
	line-height: var(--wp--custom--type--wordmark--line-height);
	letter-spacing: var(--wp--custom--type--wordmark--letter-spacing);
	font-variation-settings: "SHRP" var(--wp--custom--sharpness--heading);
	text-decoration: none;
	white-space: nowrap;
}

.site-mark__tld {
	color: var(--wp--preset--color--ink-muted);
	font-weight: normal;
}

:is(.site-header, header.wp-block-template-part) :focus-visible {
	outline: 2px solid var(--wp--preset--color--accent);
	outline-offset: 2px;
}

.wp-block-mtd-menu.is-menu-header {
	flex: 1 1 auto;
	min-width: 0;
}

.is-menu-header .mtd-menu__toggle {
	display: none;
}

.is-menu-header .mtd-menu__list {
	display: flex;
	flex-wrap: wrap;
	gap: 0 var(--wp--preset--spacing--6);
	margin: 0;
	padding: 0;
	list-style: none;
}

.is-menu-header .mtd-menu__list a {
	display: block;
	padding-block: var(--wp--preset--spacing--3);
	color: var(--wp--preset--color--ink);
	font-size: var(--wp--preset--font-size--nav);
	font-weight: var(--wp--custom--type--nav--font-weight);
	line-height: var(--wp--custom--type--nav--line-height);
	text-decoration: none;
	white-space: nowrap;
	transition: color var(--wp--custom--motion--dur-1) var(--wp--custom--motion--ease-ui);
}

/* 2px accent line under the text: on hover and on the current section. */
.is-menu-header .mtd-menu__label {
	position: relative;
}

.is-menu-header .mtd-menu__label::after {
	content: "";
	position: absolute;
	right: 0;
	bottom: calc(-1 * var(--wp--preset--spacing--2));
	left: 0;
	height: 2px;
	background-color: var(--wp--preset--color--accent);
	transform: scaleX(0);
	transform-origin: left;
	transition: transform var(--wp--custom--motion--dur-2) var(--wp--custom--motion--ease-ui);
}

.is-menu-header .mtd-menu__list a[aria-current="page"] {
	color: var(--wp--preset--color--accent);
}

.is-menu-header .mtd-menu__list a[aria-current="page"] .mtd-menu__label::after {
	transform: scaleX(1);
}

@media (hover: hover) {
	.is-menu-header .mtd-menu__list a:hover .mtd-menu__label::after {
		transform: scaleX(1);
	}
}

/* ---------------------------------------------------------------- footer */

/* Dark, large, still (UX-DR25); lighter text on the dark background. */
.wp-site-blocks > :is(.site-footer, footer.wp-block-template-part) {
	background-color: var(--wp--preset--color--footer);
	color: var(--wp--preset--color--on-footer);
	font-weight: var(--wp--custom--type--footer-link--font-weight);
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

:is(.site-footer, footer.wp-block-template-part) .site-footer__inner {
	box-sizing: border-box;
	max-width: var(--wp--style--global--wide-size);
	margin-inline: auto;
	padding: var(--wp--preset--spacing--16) var(--wp--custom--layout--page-margin) var(--wp--preset--spacing--8);
}

:is(.site-footer, footer.wp-block-template-part) .site-footer__inner > *,
:is(.site-footer, footer.wp-block-template-part) .site-footer__top > *,
:is(.site-footer, footer.wp-block-template-part) .site-footer__brand > *,
:is(.site-footer, footer.wp-block-template-part) .site-footer__cols > *,
:is(.site-footer, footer.wp-block-template-part) .site-footer__bottom > * {
	margin-block: 0;
}

:is(.site-footer, footer.wp-block-template-part) .site-footer__top {
	display: grid;
	grid-template-columns: var(--wp--custom--layout--margin-column) minmax(0, 1fr);
	gap: var(--wp--custom--layout--gutter);
}

:is(.site-footer, footer.wp-block-template-part) .site-mark {
	width: auto;
	color: var(--wp--preset--color--on-footer);
	font-size: var(--wp--preset--font-size--title-section);
}

:is(.site-footer, footer.wp-block-template-part) .site-mark__tld {
	color: var(--wp--preset--color--on-footer-muted);
}

:is(.site-footer, footer.wp-block-template-part) .site-footer__brand > .site-footer__about {
	max-width: 28ch;
	margin-block-start: var(--wp--preset--spacing--3);
	color: var(--wp--preset--color--on-footer-muted);
	font-size: var(--wp--preset--font-size--footer-link);
	line-height: var(--wp--custom--type--footer-link--line-height);
}

/* Columns come from WordPress menus; a menu without items is not rendered at all. */
:is(.site-footer, footer.wp-block-template-part) .site-footer__cols {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: var(--wp--preset--spacing--8) var(--wp--preset--spacing--6);
	align-items: start;
}

:is(.site-footer, footer.wp-block-template-part) .mtd-menu__title {
	margin: 0 0 var(--wp--preset--spacing--3);
	color: var(--wp--preset--color--on-footer-muted);
	font-size: var(--wp--preset--font-size--footer-heading);
	font-weight: var(--wp--custom--type--footer-heading--font-weight);
	line-height: var(--wp--custom--type--footer-heading--line-height);
	letter-spacing: var(--wp--custom--type--footer-heading--letter-spacing);
	font-variation-settings: "SHRP" var(--wp--custom--sharpness--text);
}

:is(.site-footer, footer.wp-block-template-part) .mtd-menu__list {
	display: flex;
	flex-direction: column;
	margin: 0;
	padding: 0;
	list-style: none;
}

:is(.site-footer, footer.wp-block-template-part) .mtd-menu__list a {
	display: inline-flex;
	align-items: center;
	min-block-size: 44px;
	color: var(--wp--preset--color--on-footer);
	font-size: var(--wp--preset--font-size--footer-link);
	font-weight: var(--wp--custom--type--footer-link--font-weight);
	line-height: var(--wp--custom--type--footer-link--line-height);
	letter-spacing: var(--wp--custom--type--footer-link--letter-spacing);
	text-decoration-line: none;
	text-decoration-thickness: 1px;
	text-underline-offset: 3px;
}

@media (hover: hover) {
	:is(.site-footer, footer.wp-block-template-part) .mtd-menu__list a:hover {
		text-decoration-line: underline;
		text-decoration-color: currentColor;
	}
}

:is(.site-footer, footer.wp-block-template-part) .site-footer__bottom {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: var(--wp--preset--spacing--2) var(--wp--preset--spacing--6);
	margin-block-start: var(--wp--preset--spacing--12);
	padding-block-start: var(--wp--preset--spacing--6);
	border-top: 1px solid color-mix(in srgb, var(--wp--preset--color--on-footer) 18%, transparent);
	color: var(--wp--preset--color--on-footer-muted);
	font-size: var(--wp--preset--font-size--footer-heading);
	line-height: var(--wp--custom--type--footer-heading--line-height);
}

/* The Key Account credit is an ordinary text link. */
:is(.site-footer, footer.wp-block-template-part) .site-footer__bottom a {
	display: inline-flex;
	align-items: center;
	min-block-size: 44px;
	color: inherit;
	text-decoration-line: underline;
	text-decoration-thickness: 1px;
	text-underline-offset: 3px;
	text-decoration-color: color-mix(in srgb, currentColor 50%, transparent);
}

@media (hover: hover) {
	:is(.site-footer, footer.wp-block-template-part) .site-footer__bottom a:hover {
		text-decoration-color: currentColor;
	}
}

/* Editor preview of a menu without items (the site renders nothing there). */
.mtd-menu__empty {
	margin: 0;
	font-size: var(--wp--preset--font-size--caption);
	line-height: var(--wp--custom--type--caption--line-height);
}

:is(.site-footer, footer.wp-block-template-part) .mtd-menu__empty {
	color: var(--wp--preset--color--on-footer-muted);
}

:is(.site-footer, footer.wp-block-template-part) :focus-visible {
	outline: 2px solid var(--wp--preset--color--on-footer);
	outline-offset: 2px;
}

/* ----------------------------------------------------------- breakpoints */

@media (max-width: 960px) {
	:is(.site-header, header.wp-block-template-part) .site-header__inner {
		gap: var(--wp--custom--layout--gutter-tablet);
	}

	.site-mark {
		width: var(--wp--custom--layout--margin-column-tablet);
	}

	.is-menu-header .mtd-menu__list {
		gap: 0 var(--wp--preset--spacing--4);
	}

	:is(.site-footer, footer.wp-block-template-part) .site-footer__top {
		grid-template-columns: minmax(0, 1fr);
		gap: var(--wp--custom--layout--gutter-tablet);
	}

	:is(.site-footer, footer.wp-block-template-part) .site-footer__cols {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

/* Up to 820px: header 64px, the word mark loses its field width, the menu goes behind «Меню». */
@media (max-width: 820px) {
	html {
		scroll-padding-top: calc(var(--wp-admin--admin-bar--position-offset, 0px) + var(--wp--custom--layout--header-height-mobile) + var(--wp--preset--spacing--4));
	}

	:is(.site-header, header.wp-block-template-part) .site-header__inner {
		flex-wrap: wrap;
		gap: 0 var(--wp--preset--spacing--4);
		min-height: var(--wp--custom--layout--header-height-mobile);
	}

	/* The mark row keeps the 64px height when the links wrap below it. */
	:is(.site-header, header.wp-block-template-part) .site-mark {
		width: auto;
		min-block-size: var(--wp--custom--layout--header-height-mobile);
	}

	/* Until the menu script runs the links stay visible on their own row under the mark. */
	.wp-block-mtd-menu.is-menu-header {
		flex: 1 0 100%;
	}
}

/* Behind «Меню» only once the menu script has run (.is-ready); otherwise the links stay visible. */
@media (max-width: 820px) {
	.wp-block-mtd-menu.is-menu-header.is-ready {
		display: flex;
		flex: 1 1 auto;
		justify-content: flex-end;
	}

	.is-menu-header.is-ready .mtd-menu__toggle {
		display: inline-flex;
		align-items: center;
		min-height: 44px;
		margin: 0;
		padding: 0 var(--wp--preset--spacing--4);
		border: 1px solid var(--wp--preset--color--line);
		border-radius: var(--wp--preset--border-radius--default);
		background: none;
		color: var(--wp--preset--color--ink);
		font-size: var(--wp--preset--font-size--nav);
		font-weight: var(--wp--custom--type--nav--font-weight);
		line-height: var(--wp--custom--type--nav--line-height);
		cursor: pointer;
	}

	.is-menu-header.is-ready .mtd-menu__list {
		display: none;
	}

	/* Open: a white panel under the header, over the page, so nothing below moves. */
	.is-menu-header.is-ready.is-open .mtd-menu__list {
		position: absolute;
		top: 100%;
		right: 0;
		left: 0;
		display: flex;
		flex-direction: column;
		flex-wrap: nowrap;
		gap: 0;
		padding: var(--wp--preset--spacing--2) var(--wp--custom--layout--page-margin) var(--wp--preset--spacing--4);
		border-bottom: 1px solid var(--wp--preset--color--line);
		background-color: var(--wp--preset--color--background);
	}

	.is-menu-header.is-ready.is-open .mtd-menu__list > li + li {
		border-top: 1px solid var(--wp--preset--color--line);
	}
}

@media (max-width: 480px) {
	:is(.site-footer, footer.wp-block-template-part) .site-footer__cols {
		grid-template-columns: minmax(0, 1fr);
		gap: var(--wp--preset--spacing--6);
	}
}

/* ======================================================================
 * Grid with the left field, links, buttons, fields, focus and motion
 * (story 1.6; UX-DR6, UX-DR8–UX-DR10, UX-DR24, UX-DR41–UX-DR46, UX-DR52).
 *
 * Every block of a page is a row of the row-with-field pattern
 * (patterns/row-with-field.php): a label in the left field and the main
 * column, or a full-width band (patterns/row-with-field-band.php). There is
 * no empty left field; full width belongs to the subscribe band and the
 * footer only. The field comes first in the markup, so Tab reaches it before
 * the main column.
 *
 * Breakpoints: from 960px the field is 220px with a 48px gutter; 820–960px
 * 160/32; up to 820px the field becomes a line above the text and does not
 * stick. At 640, 480 and 360px the grid itself does not change; the
 * minimum width without horizontal scrolling is 360px.
 * ==================================================================== */

/* ------------------------------------------------------------------ grid */

/*
 * A row is the same container as the header (1200px, page margins), and its
 * field is as wide as the word mark with the same gutter: the main column
 * starts on the line of the header menu.
 */
.row-with-field {
	box-sizing: border-box;
	display: grid;
	grid-template-columns: var(--wp--custom--layout--margin-column) minmax(0, 1fr);
	column-gap: var(--wp--custom--layout--gutter);
	align-items: start;
	max-width: var(--wp--style--global--wide-size);
	margin-inline: auto;
	padding-inline: var(--wp--custom--layout--page-margin);
}

/* Grid cells and field items ignore the flow gap of the group layout. */
.wp-block-group.row-with-field > *,
.wp-block-group.row-with-field__field > * {
	margin-block: 0;
}

/* Rows of one page follow each other at the section distance. */
.site-main > .row-with-field + .row-with-field {
	margin-block-start: var(--wp--custom--layout--section);
}

/*
 * Left field: labels 14/500 in ink-muted, 12px apart. It sticks 108px below
 * the top of the window inside its own row and leaves together with the row.
 * A field taller than the window scrolls on its own; the 4px padding,
 * offset by a negative margin, keeps focus frames of its items unclipped.
 */
.row-with-field__field {
	position: sticky;
	top: calc(var(--wp-admin--admin-bar--position-offset, 0px) + var(--wp--custom--layout--sticky-offset) - var(--wp--preset--spacing--1));
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: var(--wp--preset--spacing--3);
	min-width: 0;
	max-height: calc(100vh - var(--wp-admin--admin-bar--position-offset, 0px) - var(--wp--custom--layout--sticky-offset));
	padding: var(--wp--preset--spacing--1);
	overflow-y: auto;
	overflow-wrap: anywhere;
	color: var(--wp--preset--color--ink-muted);
	font-size: var(--wp--preset--font-size--label);
	font-weight: var(--wp--custom--type--label--font-weight);
	line-height: var(--wp--custom--type--label--line-height);
}

/* Two classes: above the flow-gap reset of grid cells. */
.wp-block-group.row-with-field > .row-with-field__field {
	margin: calc(-1 * var(--wp--preset--spacing--1));
}

/*
 * A standalone link in the field (a direct child, or a paragraph block with
 * the class row-with-field__link that holds only the link) is a 44px target.
 * Links inside a sentence of the field stay inline.
 */
.row-with-field__field > a,
.row-with-field__field > .row-with-field__link > a {
	display: inline-flex;
	align-items: center;
	min-block-size: 44px;
}

/*
 * Main column. Root padding (useRootPaddingAwareAlignments) is zero inside
 * it, so constrained groups and covers in the post content keep the column
 * line instead of adding the page margin again.
 */
.row-with-field__main {
	--wp--style--root--padding-left: 0px;
	--wp--style--root--padding-right: 0px;
	min-width: 0;
	overflow-wrap: break-word;
}

/* The first line of the column starts level with the field label (lists included). */
.row-with-field__main .wp-block-post-template > li > :first-child {
	margin-block-start: 0;
}

/* Titles and text keep the 640px measure from the column line (not centred). */
.row-with-field__main :is(.wp-block-post-title, .wp-block-post-content > *) {
	max-width: var(--wp--style--global--content-size);
}

/* Wide and full width blocks in the text take the whole main column. */
.row-with-field__main .wp-block-post-content > :is(.alignwide, .alignfull) {
	max-width: none;
	margin-inline: 0;
}

/* Band: full window width, accent background; its content in the page container. */
.row-with-field.row-with-field--band {
	display: block;
	max-width: none;
	padding: var(--wp--custom--layout--band) 0;
	background-color: var(--wp--preset--color--accent);
	color: var(--wp--preset--color--on-accent);
}

/* A band at the end of the page meets the footer without a white strip. */
.wp-site-blocks > .site-main:has(> .row-with-field--band:last-child) {
	padding-block-end: 0;
}

.row-with-field__inner {
	box-sizing: border-box;
	max-width: var(--wp--style--global--wide-size);
	margin-inline: auto;
	padding-inline: var(--wp--custom--layout--page-margin);
}

.row-with-field--band :is(h1, h2, h3) {
	line-height: var(--wp--custom--type--headline-band--line-height);
}

.row-with-field--band p {
	color: var(--wp--preset--color--on-accent-muted);
}

/* ----------------------------------------------------------------- links */

/*
 * Links (UX-DR9): ink (theme.json), a 1px underline in ink at 35 % with a 3px
 * offset; on hover the underline takes the text colour. Only colours change,
 * in 120ms. Longhands only: the core link style keeps the underline line, and
 * links styled without an underline (menus, the word mark) stay without it.
 */
:root a:where(:not(.wp-element-button)) {
	text-decoration-thickness: 1px;
	text-underline-offset: 3px;
	text-decoration-color: color-mix(in srgb, var(--wp--preset--color--ink) 35%, transparent);
	transition: color var(--wp--custom--motion--dur-1) var(--wp--custom--motion--ease-ui), text-decoration-color var(--wp--custom--motion--dur-1) var(--wp--custom--motion--ease-ui);
}

@media (hover: hover) {
	:root a:where(:not(.wp-element-button)):hover {
		text-decoration-color: currentColor;
	}
}

/* Links on the band: white with a half-white underline (two classes: above the rule above). */
.row-with-field.row-with-field--band a:where(:not(.wp-element-button)) {
	color: var(--wp--preset--color--on-accent);
	text-decoration-color: color-mix(in srgb, var(--wp--preset--color--on-accent) 50%, transparent);
}

/* Pagination links are 44px targets. */
.wp-block-query-pagination a {
	display: inline-flex;
	align-items: center;
	min-block-size: 44px;
}

/* --------------------------------------------------------------- buttons */

/*
 * Buttons (UX-DR8). Colours, frame, padding and type have one source each:
 * the main button — theme.json elements.button; outline — theme.json
 * styles.blocks.core/button.variations.outline; «На полосе подписки» and
 * «Опасное действие» — block styles in styles/button-on-accent.json and
 * styles/button-danger.json (editable in the Site Editor). Here: the 44px
 * height, hover and press, the disabled state. Hover is an instant solid
 * fill: no transition, no effects, no arrows. A disabled button
 * (:disabled or aria-disabled="true") keeps its colours and does not fill.
 */
:root :is(.wp-element-button, .wp-block-button__link) {
	box-sizing: border-box;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 44px;
	text-align: center;
	text-decoration: none;
	cursor: pointer;
	transition: none;
}

/* Hover and press: solid accent-hover with white text (main and outline). */
:is(.wp-element-button, .wp-block-button__link):not(:disabled, [aria-disabled="true"]):active {
	border-color: var(--wp--preset--color--accent-hover);
	background-color: var(--wp--preset--color--accent-hover);
	color: var(--wp--preset--color--on-accent);
}

.is-style-on-accent > .wp-block-button__link:not([aria-disabled="true"]):active {
	border-color: var(--wp--preset--color--on-accent);
}

.is-style-danger > .wp-block-button__link:not([aria-disabled="true"]):active {
	border-color: var(--wp--preset--color--error);
	background-color: var(--wp--preset--color--error);
}

@media (hover: hover) {
	:is(.wp-element-button, .wp-block-button__link):not(:disabled, [aria-disabled="true"]):hover {
		border-color: var(--wp--preset--color--accent-hover);
		background-color: var(--wp--preset--color--accent-hover);
		color: var(--wp--preset--color--on-accent);
	}

	.is-style-on-accent > .wp-block-button__link:not([aria-disabled="true"]):hover {
		border-color: var(--wp--preset--color--on-accent);
	}

	.is-style-danger > .wp-block-button__link:not([aria-disabled="true"]):hover {
		border-color: var(--wp--preset--color--error);
		background-color: var(--wp--preset--color--error);
	}
}

:root :is(.wp-element-button, .wp-block-button__link):is(:disabled, [aria-disabled="true"]) {
	cursor: not-allowed;
}

/* ---------------------------------------------------------------- fields */

/*
 * Fields (UX-DR24): 1px input-border frame and white background
 * (theme.json, elements.textInput), at least 44px high. The frame darkens to
 * ink-muted on hover (mockup v6), turns accent on focus and error when the
 * value is invalid (aria-invalid="true", or :user-invalid after the person
 * has left the field); an invalid field keeps the error frame on focus.
 * Disabled: surface background, muted text. Markup of a field in
 * methodology-core forms: the label above the field, the error under it,
 * tied to the field with aria-describedby and announced (role="alert"):
 *
 *   <div class="mtd-field">
 *     <label for="f-email">Почта</label>
 *     <input id="f-email" type="email" aria-invalid="true" aria-describedby="f-email-error">
 *     <p class="mtd-field__error" id="f-email-error" role="alert">…</p>
 *   </div>
 *
 * The global styles give text fields one element of weight
 * (input:where([type=…]), textarea); the state rules below carry
 * :root plus a pseudo-class, so they win regardless of stylesheet order.
 */
:where(input:not([type="checkbox"], [type="radio"], [type="hidden"], [type="submit"], [type="button"], [type="reset"], [type="image"], [type="range"], [type="color"], [type="file"]), select, textarea) {
	box-sizing: border-box;
	min-height: 44px;
	padding: var(--wp--preset--spacing--2) var(--wp--preset--spacing--3);
	border: 1px solid var(--wp--preset--color--input-border);
	border-radius: var(--wp--preset--border-radius--default);
	background-color: var(--wp--preset--color--background);
	color: var(--wp--preset--color--ink);
	transition: border-color var(--wp--custom--motion--dur-1) var(--wp--custom--motion--ease-ui);
}

@media (hover: hover) {
	:root :where(input:not([type="checkbox"], [type="radio"], [type="submit"], [type="button"], [type="reset"], [type="image"]), select, textarea):hover {
		border-color: var(--wp--preset--color--ink-muted);
	}
}

:root :where(input:not([type="checkbox"], [type="radio"], [type="submit"], [type="button"], [type="reset"], [type="image"]), select, textarea):focus-visible {
	border-color: var(--wp--preset--color--accent);
}

:root :where(input:not([type="checkbox"], [type="radio"], [type="submit"], [type="button"], [type="reset"], [type="image"]), select, textarea):is([aria-invalid="true"], :user-invalid) {
	border-color: var(--wp--preset--color--error);
}

:root :where(input:not([type="checkbox"], [type="radio"], [type="submit"], [type="button"], [type="reset"], [type="image"]), select, textarea):disabled {
	border-color: var(--wp--preset--color--input-border);
	background-color: var(--wp--preset--color--surface);
	color: var(--wp--preset--color--ink-muted);
	cursor: not-allowed;
}

/*
 * Checkbox and radio (mockup v6): a 16px box in accent, 3px down to sit on
 * the first line of its text. The label is the 44px target. Markup: the box
 * and its text in one label, the text in a single <span> (a link inside
 * stays in the sentence), or a label[for] right after the box:
 *
 *   <label><input type="checkbox" name="consent"> <span>Согласен на обработку персональных данных по <a href="…">политике</a></span></label>
 *   <input type="checkbox" id="f-news"> <label for="f-news">Получать письма</label>
 */
:where(input[type="checkbox"], input[type="radio"]) {
	inline-size: var(--wp--preset--spacing--4);
	block-size: var(--wp--preset--spacing--4);
	accent-color: var(--wp--preset--color--accent);
}

label:has(> :is(input[type="checkbox"], input[type="radio"])),
:is(input[type="checkbox"], input[type="radio"]) + label[for] {
	display: inline-flex;
	align-items: flex-start;
	gap: var(--wp--preset--spacing--2);
	min-block-size: 44px;
	cursor: pointer;
}

label > :is(input[type="checkbox"], input[type="radio"]) {
	flex: none;
	margin: 3px 0 0;
}

.mtd-field {
	display: flex;
	flex-direction: column;
	align-items: stretch;
	gap: var(--wp--preset--spacing--2);
}

.mtd-field > label {
	color: var(--wp--preset--color--ink);
	font-size: var(--wp--preset--font-size--label);
	font-weight: var(--wp--custom--type--label--font-weight);
	line-height: var(--wp--custom--type--label--line-height);
}

.mtd-field__error {
	margin: 0;
	color: var(--wp--preset--color--error);
	font-size: var(--wp--preset--font-size--body-sm);
	line-height: var(--wp--custom--type--body-sm--line-height);
}

/* ----------------------------------------------------------------- focus */

/*
 * Focus (UX-DR46): a 2px accent frame with a 2px offset on every interactive
 * element. :where() keeps the weight of a single class, so the footer and the
 * band can switch the frame to their light colour.
 */
:where(a[href], area[href], button, input, select, textarea, summary, iframe, audio[controls], video[controls], [contenteditable]:not([contenteditable="false"]), [tabindex]:not([tabindex="-1"])):focus-visible {
	outline: 2px solid var(--wp--preset--color--accent);
	outline-offset: 2px;
}

/* On the accent band the frame is white, as in the footer. */
.row-with-field--band :focus-visible {
	outline-color: var(--wp--preset--color--on-accent);
}

/* ----------------------------------------------------------- breakpoints */

@media (max-width: 960px) {
	.row-with-field {
		grid-template-columns: var(--wp--custom--layout--margin-column-tablet) minmax(0, 1fr);
		column-gap: var(--wp--custom--layout--gutter-tablet);
	}
}

/* Up to 820px the field is a line above the main column and does not stick. */
@media (max-width: 820px) {
	.row-with-field {
		grid-template-columns: minmax(0, 1fr);
		row-gap: var(--wp--preset--spacing--4);
	}

	.row-with-field__field {
		position: static;
		flex-direction: row;
		flex-wrap: wrap;
		align-items: center;
		gap: var(--wp--preset--spacing--2) var(--wp--preset--spacing--4);
		max-height: none;
		padding: 0;
		overflow: visible;
	}

	.wp-block-group.row-with-field > .row-with-field__field {
		margin: 0;
	}

	.row-with-field.row-with-field--band {
		padding-block: var(--wp--custom--layout--section);
	}
}

/* ---------------------------------------------------------------- motion */

/*
 * Motion (UX-DR41, UX-DR44, UX-DR45). Only transform, opacity and colours are
 * animated, and every transition names its property: the keyword "all" and
 * transitions without a property are banned (server/check.sh looks for
 * them). Durations and curves are theme.json tokens.
 *
 * Reduced motion: animations end at once (one 0.01ms run), and every
 * component that moves with transform switches that transition off here, so
 * lines (the header menu underline, later the contents marker) change at
 * once; colour and opacity transitions keep their own lists. A later story
 * that needs an opacity-only fade under reduced motion uses a transition,
 * not an animation, and adds its moving selectors to this block.
 */
@media (prefers-reduced-motion: reduce) {
	*,
	*::before,
	*::after {
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
		scroll-behavior: auto !important;
	}

	.is-menu-header .mtd-menu__label::after {
		transition: none;
	}
}

/* ======================================================================
 * Themes: theme icon and theme rows (story 1.7; UX-DR11, UX-DR17, UX-DR47,
 * UX-DR52). Markup: the mtd/theme-icon and mtd/theme-list blocks of
 * methodology-core; the page «Темы» is templates/page-themes.html. Icon
 * files are assets/theme-icons/<key>-<px>.webp (tools/theme-icons.sh).
 * ==================================================================== */

/* ------------------------------------------------------------ theme icon */

.mtd-theme-icon__img {
	display: block;
	flex: none;
	max-width: none;
	object-fit: contain;
}

/* With the name: the engraving above the name, both one link in accent (mockup v7). */
.mtd-theme-icon__link {
	display: inline-flex;
	flex-direction: column;
	align-items: flex-start;
	gap: var(--wp--preset--spacing--2);
	color: var(--wp--preset--color--accent);
	text-decoration-line: none;
}

.mtd-theme-icon__label {
	font-size: var(--wp--preset--font-size--label);
	font-weight: var(--wp--custom--type--label--font-weight);
	line-height: var(--wp--custom--type--label--line-height);
	text-decoration-thickness: 1px;
	text-underline-offset: 3px;
}

@media (hover: hover) {
	.mtd-theme-icon__link:hover .mtd-theme-icon__label {
		text-decoration-line: underline;
	}
}

/* ------------------------------------------------------------ theme rows */

/*
 * A row per theme (UX-DR17). The whole row is one link: the 56px icon two
 * lines tall, then the name, a dotted leader and the article count on the
 * first line and the description under the name. A row without an icon
 * keeps the empty icon column, so the names stay on one line. Hover: a 4px
 * accent line on the left grows by transform and the name turns accent,
 * 120ms, keyboard focus the same; under reduced motion the line appears at once.
 */
.mtd-theme-list {
	margin-inline: 0;
	padding: 0;
	list-style: none;
}

.row-with-field__main > .mtd-theme-list {
	margin-block-start: var(--wp--preset--spacing--8);
}

.mtd-theme-list__item {
	margin: 0;
}

.mtd-theme-list__item + .mtd-theme-list__item {
	border-top: 1px solid var(--wp--preset--color--line);
}

.mtd-theme-list__link {
	position: relative;
	display: grid;
	grid-template-columns: var(--wp--custom--theme-icon--theme-list) auto minmax(0, 1fr) auto;
	align-items: baseline;
	gap: var(--wp--preset--spacing--1) var(--wp--preset--spacing--3);
	padding-block: var(--wp--preset--spacing--3);
	color: var(--wp--preset--color--ink);
	text-decoration-line: none;
}

.mtd-theme-list__link::before {
	content: "";
	position: absolute;
	top: var(--wp--preset--spacing--3);
	bottom: var(--wp--preset--spacing--3);
	left: calc(-1 * var(--wp--preset--spacing--4));
	width: var(--wp--preset--spacing--1);
	background-color: var(--wp--preset--color--accent);
	transform: scaleY(0);
	transform-origin: top;
	transition: transform var(--wp--custom--motion--dur-1) var(--wp--custom--motion--ease-ui);
	pointer-events: none;
}

.mtd-theme-list__icon {
	grid-column: 1;
	grid-row: 1 / span 2;
	align-self: center;
	width: var(--wp--custom--theme-icon--theme-list);
	height: var(--wp--custom--theme-icon--theme-list);
	object-fit: contain;
}

.mtd-theme-list__name {
	grid-column: 2;
	grid-row: 1;
	font-size: var(--wp--preset--font-size--title-list);
	font-weight: var(--wp--custom--type--title-list--font-weight);
	line-height: var(--wp--custom--type--title-list--line-height);
	letter-spacing: var(--wp--custom--type--title-list--letter-spacing);
	font-variation-settings: "SHRP" var(--wp--custom--sharpness--card);
	transition: color var(--wp--custom--motion--dur-1) var(--wp--custom--motion--ease-ui);
}

/* Dotted leader in the leader colour, lifted to the middle of the lowercase letters. */
.mtd-theme-list__leader {
	grid-column: 3;
	grid-row: 1;
	height: 3px;
	background: radial-gradient(circle, var(--wp--preset--color--leader) 1px, transparent 1.4px) 0 0 / 7px 3px repeat-x;
	transform: translateY(-5px);
}

.mtd-theme-list__count {
	grid-column: 4;
	grid-row: 1;
	color: var(--wp--preset--color--ink-muted);
	font-size: var(--wp--preset--font-size--caption);
	font-weight: var(--wp--custom--type--caption--font-weight);
	line-height: var(--wp--custom--type--caption--line-height);
	white-space: nowrap;
}

.mtd-theme-list__about {
	grid-column: 2 / -1;
	grid-row: 2;
	color: var(--wp--preset--color--ink-muted);
	font-size: var(--wp--preset--font-size--body-sm);
	font-weight: var(--wp--custom--type--body-sm--font-weight);
	line-height: var(--wp--custom--type--body-sm--line-height);
}

/* Keyboard focus shows the same line and accent name as hover, besides the focus frame. */
.mtd-theme-list__link:focus-visible::before {
	transform: scaleY(1);
}

.mtd-theme-list__link:focus-visible .mtd-theme-list__name {
	color: var(--wp--preset--color--accent);
}

@media (hover: hover) {
	.mtd-theme-list__link:hover::before {
		transform: scaleY(1);
	}

	.mtd-theme-list__link:hover .mtd-theme-list__name {
		color: var(--wp--preset--color--accent);
	}
}

/* Editor preview of a theme block that renders nothing on the site. */
.mtd-editor-hint {
	margin: 0;
	color: var(--wp--preset--color--ink-muted);
	font-size: var(--wp--preset--font-size--caption);
	line-height: var(--wp--custom--type--caption--line-height);
}

/* ----------------------------------------------------------- breakpoints */

/* Up to 820px (UX-DR52): the 160px icon with its name shrinks to 72px beside the name; 120px without a name to 56px. */
@media (max-width: 820px) {
	.wp-block-mtd-theme-icon.is-size-160.has-label .mtd-theme-icon__link {
		flex-direction: row;
		align-items: center;
		gap: var(--wp--preset--spacing--3);
	}

	.wp-block-mtd-theme-icon.is-size-160.has-label .mtd-theme-icon__img {
		width: var(--wp--custom--theme-icon--mobile-header);
		height: var(--wp--custom--theme-icon--mobile-header);
	}

	.wp-block-mtd-theme-icon.is-size-120:not(.has-label) .mtd-theme-icon__img {
		width: var(--wp--custom--theme-icon--tool-field-mobile);
		height: var(--wp--custom--theme-icon--tool-field-mobile);
	}
}

/* Up to 640px the leader is hidden; the name takes the free width. */
@media (max-width: 640px) {
	.mtd-theme-list__link {
		grid-template-columns: var(--wp--custom--theme-icon--theme-list) minmax(0, 1fr) auto;
	}

	.mtd-theme-list__leader {
		display: none;
	}

	.mtd-theme-list__count {
		grid-column: 3;
	}
}

/* Up to 480px the count goes under the name, so long names wrap by whole words down to 360px. */
@media (max-width: 480px) {
	.mtd-theme-list__link {
		grid-template-columns: var(--wp--custom--theme-icon--theme-list) minmax(0, 1fr);
	}

	.mtd-theme-list__icon {
		grid-row: 1 / span 3;
	}

	.mtd-theme-list__count {
		grid-column: 2;
		grid-row: 2;
	}

	.mtd-theme-list__about {
		grid-row: 3;
	}
}

/* Reduced motion: the hover line appears at once; the colour change stays. */
@media (prefers-reduced-motion: reduce) {
	.mtd-theme-list__link::before {
		transition: none;
	}
}

/* ======================================================================
 * Author: photo, the «Автор» row and the byline (story 1.10; UX-DR13,
 * UX-DR40, UX-DR64). Markup: the mtd/author and mtd/byline blocks of
 * methodology-core. The page «О проекте» is templates/page-about.html, whose
 * <main> is the page content; its starter rows are patterns/page-about.php.
 * The jump to #author clears the header by scroll-padding-top on html (above).
 * ==================================================================== */

/* -------------------------------------------------------------- the rows */

/* A heading in the field (mockup v6 .field h2): 15px ink, the field line height, no tracking. */
.row-with-field__field > :is(h2, h3) {
	margin: 0;
	color: var(--wp--preset--color--ink);
	font-size: var(--wp--preset--font-size--body-sm);
	line-height: var(--wp--custom--type--label--line-height);
	letter-spacing: 0;
}

/* Text written straight into a row of the page content keeps the 640px measure, like article text. */
.row-with-field__main > :is(p, .wp-block-heading, .wp-block-list) {
	max-width: var(--wp--style--global--content-size);
}

/* ------------------------------------------------------------- the photo */

/*
 * Round author photo (UX-DR13): 24 card, 32 lead article, 40 article header,
 * 88 the «Автор» block. The image is cropped to the circle; without a photo
 * the same circle in photo-placeholder with the photo-silhouette figure.
 */
.mtd-photo {
	box-sizing: border-box;
	display: block;
	flex: none;
	width: var(--wp--custom--photo--header);
	height: var(--wp--custom--photo--header);
	max-width: none;
	overflow: hidden;
	border-radius: var(--wp--preset--border-radius--full);
	background-color: var(--wp--preset--color--photo-placeholder);
	object-fit: cover;
}

.mtd-photo.is-size-24 {
	width: var(--wp--custom--photo--card);
	height: var(--wp--custom--photo--card);
}

.mtd-photo.is-size-32 {
	width: var(--wp--custom--photo--lead);
	height: var(--wp--custom--photo--lead);
}

.mtd-photo.is-size-88 {
	width: var(--wp--custom--photo--author);
	height: var(--wp--custom--photo--author);
}

.mtd-photo__silhouette {
	display: block;
	width: 100%;
	height: 100%;
	fill: var(--wp--preset--color--photo-silhouette);
}

/* ------------------------------------------------------- the «Автор» row */

/* The block row is a <section>, not a group: the field keeps the 4px offset of group rows (story 1.6) so labels line up. */
.wp-block-mtd-author.row-with-field > .row-with-field__field {
	margin: calc(-1 * var(--wp--preset--spacing--1));
}

@media (max-width: 820px) {
	.wp-block-mtd-author.row-with-field > .row-with-field__field {
		margin: 0;
	}
}

/* The 88px photo, then the name 15/550 and the text in ink-muted, centred on the photo (mockup v6 .author). */
.mtd-author__card {
	display: grid;
	grid-template-columns: var(--wp--custom--photo--author) minmax(0, 1fr);
	align-items: center;
	gap: var(--wp--preset--spacing--4);
	max-width: var(--wp--style--global--content-size);
}

.mtd-author__text {
	min-width: 0;
}

.mtd-author__text > * {
	margin: 0;
}

.mtd-author__name {
	color: var(--wp--preset--color--ink);
	font-size: var(--wp--preset--font-size--body-sm);
	font-weight: var(--wp--custom--type--author-name--font-weight);
	line-height: var(--wp--custom--type--author-name--line-height);
}

.mtd-author__about {
	color: var(--wp--preset--color--ink-muted);
	font-size: var(--wp--preset--font-size--body-sm);
	font-weight: var(--wp--custom--type--body-sm--font-weight);
	line-height: var(--wp--custom--type--body-sm--line-height);
}

/* A blank line in «Биографические сведения» starts a new paragraph. */
.mtd-author__about + .mtd-author__about {
	margin-block-start: var(--wp--preset--spacing--2);
}

/* ------------------------------------------------------------ the byline */

/*
 * Byline (UX-DR13; mockup v6 .byline and .mini): the photo, then the name
 * 15/550 and, when the date is on, «Обновлено …» in caption ink-muted under
 * it. 12px between the photo and the name at 40, 8px at 32 and 24.
 */
.wp-block-mtd-byline {
	display: flex;
	align-items: center;
	gap: var(--wp--preset--spacing--3);
}

.wp-block-mtd-byline:is(.is-size-24, .is-size-32) {
	gap: var(--wp--preset--spacing--2);
}

.mtd-byline__text {
	display: flex;
	flex-direction: column;
	min-width: 0;
}

.mtd-byline__name {
	color: var(--wp--preset--color--ink);
	font-size: var(--wp--preset--font-size--body-sm);
	font-weight: var(--wp--custom--type--author-name--font-weight);
	line-height: var(--wp--custom--type--author-name--line-height);
}

.mtd-byline__date {
	color: var(--wp--preset--color--ink-muted);
	font-size: var(--wp--preset--font-size--caption);
	font-weight: var(--wp--custom--type--caption--font-weight);
	line-height: var(--wp--custom--type--author-name--line-height);
}

/* ======================================================================
 * Article page (story 1.11; UX-DR3, UX-DR11, UX-DR12, UX-DR14–UX-DR16,
 * UX-DR57). Markup: templates/single.html — the header row (in the field the
 * theme icon 160 with its name and «Статья»; on the right the title, the
 * subtitle, the byline 40 with «Обновлено …» and the reading time) and the
 * text row (the contents in the field, the article text) — built from the
 * mtd/theme-icon, mtd/byline, mtd/read-time and mtd/contents blocks of
 * methodology-core. The text keeps the 640px measure, body 17/350/1.6 and the
 * 48/16px headings of stories 1.4 and 1.6 (top of this file). The contents
 * script of the plugin marks the current section and, where the browser has
 * no scroll-driven animations, sets the reading line through a class.
 * ==================================================================== */

/* ------------------------------------------------------- the header row */

/* The text row follows the header row at 32px (mockup v6 .art-head). */
.site-main > .mtd-article-head + .row-with-field {
	margin-block-start: var(--wp--preset--spacing--8);
}

/* Type of material (UX-DR12): caption ink-muted with the 16px document icon, quieter than the theme. */
.mtd-kind {
	display: inline-flex;
	align-items: center;
	gap: var(--wp--preset--spacing--2);
	min-block-size: 24px;
	margin: 0;
	color: var(--wp--preset--color--ink-muted);
	font-size: var(--wp--preset--font-size--caption);
	font-weight: var(--wp--custom--type--caption--font-weight);
	line-height: var(--wp--custom--type--caption--line-height);
}

.mtd-kind__icon,
.mtd-read-time__icon {
	flex: none;
	width: 16px;
	height: 16px;
	fill: none;
	stroke: currentColor;
	stroke-width: 1.3;
}

/* Title headline-page (theme.json h1) up to 22 characters, the subtitle dek in ink-muted up to 46 (mockup v6). */
.mtd-article-head .wp-block-post-title {
	max-width: 22ch;
}

.mtd-article-head .mtd-dek {
	max-width: 46ch;
	margin-block: var(--wp--preset--spacing--4) 0;
	color: var(--wp--preset--color--ink-muted);
	font-size: var(--wp--preset--font-size--dek);
	font-weight: var(--wp--custom--type--dek--font-weight);
	line-height: var(--wp--custom--type--dek--line-height);
}

/* The byline and the reading time on one line, 32px apart, 24px under the subtitle; they wrap on a narrow screen. */
.mtd-article-head .mtd-article-meta {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--wp--preset--spacing--4) var(--wp--preset--spacing--8);
	margin-block: var(--wp--preset--spacing--6) 0;
}

.mtd-article-meta > * {
	margin-block: 0;
}

/* Reading time (UX-DR14): the 16px clock and «12 минут чтения», caption ink-muted. */
.wp-block-mtd-read-time {
	display: inline-flex;
	align-items: center;
	gap: var(--wp--preset--spacing--2);
	margin: 0;
	color: var(--wp--preset--color--ink-muted);
	font-size: var(--wp--preset--font-size--caption);
	font-weight: var(--wp--custom--type--caption--font-weight);
	line-height: var(--wp--custom--type--caption--line-height);
}

/* The byline name links to the «Автор» block of «О проекте»: a 44px hit area around the line, the date does not move. */
a.mtd-byline__name {
	position: relative;
}

a.mtd-byline__name::after {
	content: "";
	position: absolute;
	inset: calc((100% - 44px) / 2) -4px;
}

/* ---------------------------------------------------------- the contents */

/*
 * Contents (UX-DR15; mockup v6 .contents): «Содержание» in label ink, then
 * numbered items 14/350/1.4 in ink-muted, each a link to its heading. The
 * current section (aria-current="true", set by the plugin script) turns ink
 * and gets a 2px accent line on the left, 200ms; the line grows by
 * transform. The field makes it stick at 108px; up to 820px it stands above
 * the text on the surface background and does not stick. A touch screen
 * gets 44px items. The jump to a heading clears the header by
 * scroll-padding-top on html (story 1.10).
 */
nav.wp-block-mtd-contents {
	align-self: stretch;
	min-width: 0;
}

.mtd-contents__title {
	margin: 0 0 var(--wp--preset--spacing--2);
	color: var(--wp--preset--color--ink);
	font-size: var(--wp--preset--font-size--label);
	font-weight: var(--wp--custom--type--label--font-weight);
	line-height: var(--wp--custom--type--label--line-height);
	letter-spacing: 0;
}

.mtd-contents__list {
	display: flex;
	flex-direction: column;
	margin: 0;
	padding: 0;
	list-style: none;
	counter-reset: mtd-contents;
}

.mtd-contents__item {
	margin: 0;
	counter-increment: mtd-contents;
}

/* Two classes: above the transition and colour of the global link rule. */
.wp-block-mtd-contents .mtd-contents__link {
	position: relative;
	display: grid;
	grid-template-columns: 20px minmax(0, 1fr);
	padding: var(--wp--preset--spacing--1) 0 var(--wp--preset--spacing--1) var(--wp--preset--spacing--3);
	color: var(--wp--preset--color--ink-muted);
	font-size: var(--wp--preset--font-size--label);
	font-weight: var(--wp--custom--type--contents--font-weight);
	line-height: var(--wp--custom--type--contents--line-height);
	text-decoration-line: none;
	transition: color var(--wp--custom--motion--dur-2) var(--wp--custom--motion--ease-ui);
}

.mtd-contents__link::before {
	content: counter(mtd-contents);
	font-variant-numeric: tabular-nums;
}

.mtd-contents__link::after {
	content: "";
	position: absolute;
	top: var(--wp--preset--spacing--1);
	bottom: var(--wp--preset--spacing--1);
	left: 0;
	width: 2px;
	background-color: var(--wp--preset--color--accent);
	transform: scaleY(0);
	pointer-events: none;
	transition: transform var(--wp--custom--motion--dur-2) var(--wp--custom--motion--ease-ui);
}

.wp-block-mtd-contents .mtd-contents__link[aria-current="true"] {
	color: var(--wp--preset--color--ink);
}

.mtd-contents__link[aria-current="true"]::after {
	transform: scaleY(1);
}

@media (hover: hover) {
	.wp-block-mtd-contents .mtd-contents__link:hover {
		color: var(--wp--preset--color--ink);
	}
}

@media (pointer: coarse) {
	.wp-block-mtd-contents .mtd-contents__link {
		box-sizing: border-box;
		align-items: center;
		min-block-size: 44px;
	}
}

@media (max-width: 820px) {
	nav.wp-block-mtd-contents {
		box-sizing: border-box;
		flex: 1 1 100%;
		padding: var(--wp--preset--spacing--4);
		background-color: var(--wp--preset--color--surface);
	}
}

/* ------------------------------------------------------ the reading line */

/*
 * Reading line (UX-DR16): 2px accent along the bottom edge of the header, on
 * an article only (body.single-post); its length is the share of the text
 * read — from the top of the text at the top of the window to its end at the
 * bottom of the window. Main path: a scroll-driven animation on the view
 * timeline of the text. Fallback: where the browser has no scroll-driven
 * animations but has IntersectionObserver, the contents script of
 * methodology-core puts .has-read-progress and --mtd-read-progress (0–1) on
 * the header. Without both the line stays hidden and nothing else changes.
 * Only transform moves; the line follows the reader's own scrolling, so it
 * stays under reduced motion.
 */
.single-post .wp-site-blocks > :is(.site-header, header.wp-block-template-part)::before {
	content: "";
	position: absolute;
	inset: auto 0 0;
	z-index: 1;
	display: none;
	height: 2px;
	background-color: var(--wp--preset--color--accent);
	transform: scaleX(0);
	transform-origin: left;
	pointer-events: none;
}

.single-post .wp-site-blocks > :is(.site-header, header.wp-block-template-part).has-read-progress::before {
	display: block;
	transform: scaleX(var(--mtd-read-progress, 0));
}

@supports (animation-timeline: view()) and (timeline-scope: none) {
	body.single-post {
		timeline-scope: --mtd-article;
	}

	/* Inset 0: the range starts at the top of the window, not below scroll-padding-top (the default auto). */
	.single-post .site-main .wp-block-post-content {
		view-timeline: --mtd-article block;
		view-timeline-inset: 0;
	}

	.single-post .wp-site-blocks > :is(.site-header, header.wp-block-template-part)::before {
		display: block;
		animation: mtd-read-progress linear both;
		animation-timeline: --mtd-article;
		animation-range: contain 0% contain 100%;
	}
}

@keyframes mtd-read-progress {
	from {
		transform: scaleX(0);
	}

	to {
		transform: scaleX(1);
	}
}

/* Reduced motion: the contents line changes at once; the colour change stays. */
@media (prefers-reduced-motion: reduce) {
	.mtd-contents__link::after {
		transition: none;
	}
}