/*!
 * SVMPForge — docs.css
 * Page-specific styles for the Documentation, Changelog and Support templates
 * and the Appearance → Site Setup admin screen. Loaded on those views only
 * (depends on main.css on the front end; self-contained in wp-admin).
 *
 * INDEX
 *  01 Docs        crumbs, header, in-page TOC, article index, footer row, pager
 *  02 Changelog   .sf-changelog release list
 *  03 Support     .sf-support two-column layout, .sf-contact form, honeypot
 *  04 Site Setup  .sf-setup admin screen
 */

/* ==========================================================================
   01 Docs
   ========================================================================== */
.sf-docs__header { max-width: none; margin-bottom: var(--sf-space-5); }
.sf-docs__header .sf-lead { max-width: 60ch; }
.sf-docs__crumbs { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; }
.sf-docs__crumbs a { color: var(--sf-brand); text-decoration: none; }
.sf-docs__crumbs a:hover { text-decoration: underline; }
.sf-docs__crumbs .sf-docs__crumb-sep { color: var(--sf-line-strong); }
.sf-docs__crumbs .sf-docs__crumb-current { color: var(--sf-muted); }

/* --------------------------------------------------------------------------
 * Product-shell hero
 * ----------------------------------------------------------------------- */
.sf-docs-hero {
	padding-block: clamp(36px, 4.5vw, 64px) clamp(40px, 5vw, 72px);
}
.sf-docs-hero--compact {
	padding-block: clamp(16px, 2vw, 24px);
}
.sf-docs-hero--compact .sf-docs-hero__head {
	max-width: 46rem;
}
.sf-docs-hero--compact .sf-h1 {
	font-size: clamp(1.55rem, 1.2rem + 1.1vw, 2.1rem);
	letter-spacing: -0.03em;
	color: #fff;
}
.sf-docs-hero--compact .sf-lead {
	margin-top: 8px;
	max-width: 62ch;
	font-size: 0.9875rem;
}
.sf-docs-hero__back {
	margin: 0 0 12px;
	font-size: 0.8125rem;
	font-weight: 600;
}
.sf-docs-hero__back a {
	color: var(--sf-on-dark-brand, #5EEAD4);
	text-decoration: none;
}
.sf-docs-hero__back a:hover { text-decoration: underline; }
.sf-docs-hero__grid { align-items: center; }
@media (min-width: 600px) and (max-width: 899px) {
	.sf-docs-hero__grid.sf-grid--split { grid-template-columns: 1fr; }
}
.sf-docs-hero__copy { min-width: 0; }
.sf-docs-hero__head {
	display: block;
	max-width: 40rem;
	margin-bottom: 0;
}
.sf-docs-hero--article .sf-docs-hero__head { max-width: 52rem; }
.sf-docs-hero__head .sf-h1 {
	font-size: clamp(2.15rem, 1.4rem + 2.2vw, 3.2rem);
	letter-spacing: -0.04em;
	color: #fff;
}
.sf-docs-hero--compact .sf-docs-hero__head .sf-h1 {
	font-size: clamp(1.55rem, 1.2rem + 1.1vw, 2.1rem);
	letter-spacing: -0.03em;
}
.sf-docs-hero__head .sf-lead {
	margin-top: var(--sf-space-4);
	max-width: 52ch;
	font-size: 1.0625rem;
}
.sf-docs-hero--compact .sf-docs-hero__head .sf-lead {
	margin-top: 8px;
	max-width: 62ch;
	font-size: 0.9875rem;
}
.sf-docs-hero .sf-docs__crumbs a.sf-docs__crumb-root {
	background: rgba(255, 255, 255, .08);
	border-color: rgba(255, 255, 255, .18);
	color: #fff;
}
.sf-docs-hero .sf-docs__crumbs a.sf-docs__crumb-root::before { background: #fff; }
.sf-docs-hero .sf-docs__crumbs a.sf-docs__crumb-root:hover {
	background: rgba(255, 255, 255, .14);
	border-color: rgba(255, 255, 255, .32);
	color: #fff;
}
.sf-docs-hero .sf-docs__crumb-sep { color: rgba(255, 255, 255, .35); }
.sf-docs-hero .sf-docs__crumb-current { color: var(--sf-on-dark-muted); }

.sf-docs-hero__facts {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 10px;
	list-style: none;
	margin: var(--sf-space-6) 0 0;
	padding: 0;
	max-width: 28rem;
}
.sf-docs-hero__facts li {
	padding: 14px 16px;
	background: rgba(255, 255, 255, .055);
	border: 1px solid rgba(255, 255, 255, .12);
	border-radius: 16px;
	backdrop-filter: blur(14px);
	-webkit-backdrop-filter: blur(14px);
}
.sf-docs-hero__value {
	display: block;
	font-family: var(--sf-font-display);
	font-size: clamp(1.5rem, 1.2rem + 1vw, 2rem);
	font-weight: 700;
	letter-spacing: -0.03em;
	line-height: 1.1;
	color: #fff;
}
.sf-docs-hero__label {
	display: block;
	margin-top: 4px;
	font-family: var(--sf-font-mono);
	font-size: 0.6875rem;
	font-weight: 500;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--sf-on-dark-muted);
}

.sf-docs-map { min-width: 0; }
.sf-docs-map__panel {
	margin: 0;
	box-shadow: var(--sf-shadow-window, 0 24px 48px -24px rgba(15, 18, 40, .55));
}
.sf-docs-hero .sf-docs-map a.sf-docs-map__card { color: var(--sf-ink); }
.sf-docs-map__list {
	display: grid;
	grid-template-columns: 1fr;
	list-style: none;
	margin: 0;
	padding: 0;
	max-height: min(420px, 58vh);
	overflow: auto;
}
.sf-docs-map__list li { min-width: 0; }
.sf-docs-map__list li + li .sf-docs-map__card { border-top: 1px solid var(--sf-line); }
.sf-docs-map__card {
	display: grid;
	grid-template-columns: 2rem minmax(0, 1fr) auto;
	align-items: center;
	gap: 8px;
	min-height: 48px;
	padding: 10px 14px;
	background: transparent;
	border: 0;
	border-radius: 0;
	color: inherit;
	text-decoration: none;
	transition: background .16s var(--sf-ease);
}
.sf-docs-map__num {
	font-family: var(--sf-font-mono);
	font-size: 0.6875rem;
	font-weight: 600;
	letter-spacing: 0.04em;
	color: var(--sf-brand);
}
.sf-docs-map__name {
	font-size: 0.875rem;
	font-weight: 600;
	color: var(--sf-ink);
	line-height: 1.25;
}
.sf-docs-map__count {
	font-family: var(--sf-font-mono);
	font-size: 0.75rem;
	font-weight: 500;
	color: var(--sf-muted);
	font-variant-numeric: tabular-nums;
}
.sf-docs-map__card:hover,
.sf-docs-map__card:focus-visible {
	background: var(--sf-brand-tint, #F0FDFA);
}
.sf-docs-map__list li:first-child .sf-docs-map__card {
	background: linear-gradient(90deg, rgba(15, 118, 110, .06), transparent 70%);
}
@media (min-width: 520px) {
	.sf-docs-map__list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.sf-docs-map__list li:nth-child(2) .sf-docs-map__card { border-top: 0; }
	.sf-docs-map__list li:nth-child(odd) .sf-docs-map__card {
		border-inline-end: 1px solid var(--sf-line);
	}
}

.sf-docs__flow {
	background:
		radial-gradient(900px 420px at 8% 0%, rgba(13, 148, 136, .08), transparent 70%),
		radial-gradient(700px 380px at 100% 12%, rgba(15, 118, 110, .06), transparent 70%),
		var(--sf-ground-2, #E4E8EE);
	padding-block: clamp(24px, 3vw, 40px) clamp(40px, 5vw, 72px);
}
.sf-page--docs-handbook .sf-docs__flow {
	padding-block: 16px clamp(28px, 4vw, 48px);
}
.sf-page--docs-handbook .sf-docs__content {
	max-width: none;
}
@media (min-width: 900px) {
	.sf-page--docs-handbook .sf-docs {
		grid-template-columns: 220px minmax(0, 1fr);
		gap: 20px;
	}
	.sf-page--docs-handbook .sf-docs__sidebar {
		top: calc(var(--sf-header-h) + 12px);
		max-height: calc(100vh - var(--sf-header-h) - 24px);
	}
	.sf-page--docs-handbook .sf-docs__content {
		padding: var(--sf-space-5);
	}
}
@media (min-width: 1200px) {
	.sf-page--docs-handbook .sf-docs {
		grid-template-columns: 236px minmax(0, 1fr);
		gap: 24px;
	}
	.sf-page--docs-handbook .sf-docs__content {
		padding: var(--sf-space-5) var(--sf-space-6);
	}
}

.sf-docs__overview { scroll-margin-top: calc(var(--sf-header-h) + 16px); }
.sf-docs__article {
	margin-top: 1.25rem;
	padding-top: 1.25rem;
	border-top: 1px solid rgba(15, 118, 110, .14);
	scroll-margin-top: calc(var(--sf-header-h) + 16px);
}
.sf-docs__article-title {
	display: flex;
	align-items: center;
	gap: 10px;
	margin: 0 0 0.55rem;
	font-family: var(--sf-font-display);
	font-size: 1.25rem;
	font-weight: 600;
	letter-spacing: -0.03em;
	line-height: 1.25;
	color: var(--sf-ink);
}
.sf-docs__article-title::before {
	content: "";
	width: 3px;
	height: 1.05em;
	border-radius: 2px;
	background: var(--sf-grad-brand);
	flex: none;
}
.sf-docs__chapter {
	margin: 1.4rem 0 0.4rem;
	scroll-margin-top: calc(var(--sf-header-h) + 16px);
}

/* Handbook body: section titles, not homepage H2s, and no 2em holes. */
.sf-page--docs-handbook .sf-docs__content .sf-prose {
	margin-top: 0;
	font-size: 1rem;
	line-height: 1.62;
}
.sf-page--docs-handbook .sf-docs__content .sf-prose > * + * { margin-top: 0.7em; }
.sf-page--docs-handbook .sf-docs__content .sf-prose h2 {
	display: flex;
	align-items: center;
	gap: 10px;
	margin: 1.05em 0 0;
	padding: 0.8em 0 0;
	border-top: 1px solid rgba(15, 118, 110, .12);
	font-family: var(--sf-font-display);
	font-size: 1.125rem;
	font-weight: 600;
	line-height: 1.3;
	letter-spacing: -0.02em;
	color: var(--sf-ink);
}
.sf-page--docs-handbook .sf-docs__content .sf-prose h2::before {
	content: "";
	width: 3px;
	height: 0.95em;
	border-radius: 2px;
	background: var(--sf-grad-brand);
	flex: none;
}
.sf-page--docs-handbook .sf-docs__content .sf-prose > h2:first-child {
	margin-top: 0.85em;
	padding-top: 0;
	border-top: 0;
}
.sf-page--docs-handbook .sf-docs__content .sf-prose h2 + * { margin-top: 0.4em; }
.sf-page--docs-handbook .sf-docs__content .sf-prose h3 {
	margin-top: 1em;
	font-size: 1.02rem;
	letter-spacing: -0.015em;
}
.sf-page--docs-handbook .sf-docs__content .sf-prose h3 + * { margin-top: 0.35em; }
.sf-page--docs-handbook .sf-docs__content .sf-prose ol,
.sf-page--docs-handbook .sf-docs__content .sf-prose ul { margin-top: 0.4em; }
.sf-page--docs-handbook .sf-docs__content .sf-prose li + li { margin-top: 0.2em; }
.sf-page--docs-handbook .sf-docs__content .sf-prose .sf-table-wrap { margin-top: 0.5em; }
.sf-page--docs-handbook .sf-docs__content .sf-prose p + .sf-table-wrap { margin-top: 0.55em; }

.sf-page--docs-handbook .sf-docs__end {
	margin-top: 1.25rem;
	padding: 0.85rem 0 0;
	border: 0;
	border-top: 1px solid rgba(15, 118, 110, .12);
	border-radius: 0;
	background: none;
	overflow: visible;
}
.sf-page--docs-handbook .sf-docs__end::before { display: none; }
.sf-page--docs-handbook .sf-docs__end .sf-docs__foot,
.sf-page--docs-handbook .sf-docs__end > .sf-docs__foot:first-child {
	margin-top: 0;
	padding-top: 0;
	border-top: 0;
}

.sf-docs__index-group { scroll-margin-top: calc(var(--sf-header-h) + 24px); }
@media (prefers-reduced-motion: reduce) {
	.sf-docs-map__card { transition: none; }
}

/* Sidebar: v3 — hover is a quiet slate wash, the active item sits on the
   brand tint in brand ink (overrides the main.css base link styles). */
.sf-docs__tree a:hover { color: var(--sf-ink); background: var(--sf-surface-2); }
.sf-docs__tree a.is-active, .sf-docs__tree a[aria-current] { color: var(--sf-brand-ink); background: var(--sf-brand-tint); border-inline-start-color: var(--sf-brand); font-weight: 600; }

/* Sidebar: in-page headings of the current article under its link */
.sf-docs__tree .sf-docs__toc-sub { list-style: none; margin: 2px 0 6px; padding: 0; border-inline-start: 0; }
.sf-docs__tree .sf-docs__toc-sub a { padding: 4px 12px 4px 28px; font-size: 0.8125rem; line-height: 1.4; color: var(--sf-muted); font-weight: 400; background: none; border-inline-start-color: transparent; }
.sf-docs__tree .sf-docs__toc-sub a:hover { color: var(--sf-ink); background: var(--sf-surface-2); }
.sf-docs__tree .sf-docs__toc-sub a.is-active, .sf-docs__tree .sf-docs__toc-sub a[aria-current] { color: var(--sf-brand-ink); background: var(--sf-brand-tint); font-weight: 500; border-inline-start-color: var(--sf-brand); }
.sf-docs__tree > li > a.sf-docs__root { font-weight: 600; color: var(--sf-ink); }
.sf-docs__sidebar-foot { margin-top: var(--sf-space-5); padding-top: var(--sf-space-4); border-top: var(--sf-border); font-size: 0.8125rem; color: var(--sf-muted); }
.sf-docs__sidebar-foot a { display: inline-flex; align-items: center; gap: 6px; font-weight: 600; text-decoration: none; }
.sf-docs__sidebar-foot a:hover { text-decoration: underline; }

/* main.css reveals the closed <details> body from 900px up; engines that hide
   details content with content-visibility need the content box unhidden too. */
@media (min-width: 900px) {
	.sf-docs__mobile-toggle:not([open]) > div { display: block; }
	.sf-docs__mobile-toggle::details-content { content-visibility: visible; block-size: auto; overflow: visible; }
}

/* Long tables inside docs never widen the column */
.sf-docs__content .sf-table-wrap > table { min-width: 0; }

/* Article index on the Documentation parent page */
.sf-docs__index { margin-top: var(--sf-space-7); padding-top: var(--sf-space-6); border-top: var(--sf-border); }
.sf-docs__index .sf-h3 { margin-bottom: var(--sf-space-4); }
.sf-docs__index .sf-grid { gap: var(--sf-space-3); }
.sf-docs__index a.sf-card { display: flex; flex-direction: column; gap: 6px; padding: var(--sf-space-4); }
.sf-docs__index .sf-card__title { display: flex; align-items: center; justify-content: space-between; gap: 8px; font-size: 0.9375rem; }
.sf-docs__index .sf-card__title .sf-icon { flex: none; color: var(--sf-muted); }
.sf-docs__index a.sf-card:hover .sf-card__title { color: var(--sf-brand); }
.sf-docs__index a.sf-card p { font-size: 0.8125rem; line-height: 1.5; color: var(--sf-ink-2); }
@media (min-width: 600px) { .sf-docs__index .sf-grid { gap: var(--sf-space-4); } }

/* Footer row: last updated + edit link */
.sf-docs__foot { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px var(--sf-space-5); margin-top: var(--sf-space-7); padding-top: var(--sf-space-4); border-top: var(--sf-border); font-family: var(--sf-font-mono); font-size: 0.75rem; color: var(--sf-muted); }
.sf-docs__foot a { display: inline-flex; align-items: center; gap: 6px; color: var(--sf-brand); text-decoration: none; }
.sf-docs__foot a:hover { text-decoration: underline; }
.sf-docs__pager { margin-top: var(--sf-space-5); border-top: 0; padding-top: 0; }
.sf-docs__pager a:only-child.sf-docs__pager--next { grid-column: -2 / -1; }
.sf-docs__pager .sf-post-nav__title { display: block; }


/* --------------------------------------------------------------------------
 * v3 colour + motion pass.
 *
 * The article column keeps its white ground and its measure — this is
 * reference material and must stay calm. The colour goes into the furniture
 * around it: a brand wash across the top of the page, the sidebar panel, the
 * breadcrumb chip and the prev/next footer.
 * ----------------------------------------------------------------------- */

.sf-docs__band {
	position: relative;
}
.sf-docs__content {
	background: var(--sf-surface);
	border: 1px solid rgba(15, 118, 110, .14);
	border-radius: var(--sf-r-xl);
	box-shadow: var(--sf-shadow-card);
	padding: var(--sf-space-6);
}
@media (min-width: 900px) {
	.sf-docs__content { padding: var(--sf-space-7); }
}

/* Breadcrumb: the root is a brand chip, the current page reads as ink. */
.sf-docs__crumbs { gap: 6px 8px; }
.sf-docs__crumbs a.sf-docs__crumb-root {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	padding: 3px 11px;
	border: 1px solid rgba(15, 118, 110, .18);
	border-radius: 999px;
	background: var(--sf-brand-tint);
	color: var(--sf-brand-ink);          /* 8.88:1 on --sf-brand-tint */
	text-decoration: none;
}
.sf-docs__crumbs a.sf-docs__crumb-root::before {
	content: "";
	width: 6px;
	height: 6px;
	border-radius: 50%;
	background: var(--sf-grad-brand, var(--sf-brand));
	flex: none;
}
.sf-docs__crumbs a.sf-docs__crumb-root:hover {
	background: var(--sf-surface);
	border-color: var(--sf-brand);
	text-decoration: none;
}
.sf-docs__crumbs .sf-docs__crumb-current { color: var(--sf-ink-2); }

/* Brand hairline between the page header and the article body. */
.sf-docs__rule { margin: 0 0 var(--sf-space-6); }

/* Sidebar panel: from 900px the tree sits on its own card with a gradient
   cap, so the rail carries colour while the reading column stays white. */
.sf-docs__group {
	display: flex;
	align-items: center;
	gap: 8px;
	color: var(--sf-ink-2);              /* 9.90:1 on --sf-surface-2 */
	font-weight: 600;
	letter-spacing: 0.09em;
}
.sf-docs__group::before {
	content: "";
	width: 14px;
	height: 2px;
	border-radius: 2px;
	background: var(--sf-grad-brand, var(--sf-brand));
	flex: none;
}
.sf-docs__tree a.is-active, .sf-docs__tree a[aria-current] { box-shadow: inset 0 0 0 1px rgba(15, 118, 110, .12); }
.sf-docs__tree > li > a.sf-docs__root.is-active { color: var(--sf-brand-ink); }

.sf-docs__sidebar-foot {
	margin-top: var(--sf-space-5);
	padding: var(--sf-space-4);
	border-top: 0;
	border-radius: var(--sf-r);
	background: var(--sf-brand-tint);
	color: var(--sf-brand-ink);          /* 8.88:1 on --sf-brand-tint */
}
.sf-docs__sidebar-foot p { margin-bottom: 6px; }
.sf-docs__sidebar-foot a { color: var(--sf-brand-ink); }

@media (min-width: 900px) {
	/* The frame goes on the sticky element itself — it is the scroll container,
	   so the border and ground stay put and only the tree scrolls inside. */
	.sf-docs__sidebar {
		padding: 0;
		border: var(--sf-border);
		border-radius: var(--sf-r-lg);
		background: linear-gradient(180deg, var(--sf-surface) 0%, var(--sf-surface-2) 100%);
		box-shadow: var(--sf-shadow-card);
	}
	.sf-docs__sidebar .sf-docs__mobile-toggle { margin-bottom: 0; }
	.sf-docs__mobile-toggle > .sf-docs__panel {
		position: relative;
		padding: var(--sf-space-5) var(--sf-space-4) var(--sf-space-4);
	}
	.sf-docs__panel::before {
		content: "";
		position: absolute;
		inset: 0 0 auto 0;
		height: 3px;
		background: var(--sf-grad-brand, var(--sf-brand));
	}
}

/* Below 900px the tree lives behind the summary button, so the button is
   what carries the colour. */
@media (max-width: 899px) {
	.sf-docs__mobile-toggle summary {
		background: var(--sf-brand-tint);
		border-color: rgba(15, 118, 110, .22);
		color: var(--sf-brand-ink);      /* 8.88:1 on --sf-brand-tint */
	}
	.sf-docs__mobile-toggle summary::after { border-inline-end-color: var(--sf-brand); border-bottom-color: var(--sf-brand); }
}

/* Article index on the Documentation parent: a tinted panel so the card grid
   reads as an index, not as more article. */
.sf-docs__index {
	position: relative;
	overflow: hidden;
	margin-top: var(--sf-space-7);
	padding: var(--sf-space-5);
	border: var(--sf-border);
	border-radius: var(--sf-r-lg);
	background: var(--sf-surface-2);
}
.sf-docs__index::before {
	content: "";
	position: absolute;
	inset: 0 0 auto 0;
	height: 220px;
	background:
		radial-gradient(600px 220px at 12% 0%, rgba(13, 148, 136, .10), transparent 70%),
		radial-gradient(520px 200px at 88% 0%, rgba(15, 118, 110, .08), transparent 72%);
	pointer-events: none;
}
.sf-docs__index > * { position: relative; z-index: 1; }
.sf-docs__index .sf-eyebrow {
	display: flex;
	align-items: center;
	gap: 8px;
	color: var(--sf-brand-ink);          /* 7.51:1 on the washed panel */
}
.sf-docs__index .sf-eyebrow::before {
	content: "";
	width: 14px;
	height: 2px;
	border-radius: 2px;
	background: var(--sf-grad-brand, var(--sf-brand));
	flex: none;
}
.sf-docs__index a.sf-card:hover { border-color: var(--sf-brand); }
.sf-docs__index .sf-grid:last-child { margin-bottom: 0; }

/* Prev/next + last-updated on a light tinted band. */
.sf-docs__end {
	position: relative;
	overflow: hidden;
	margin-top: var(--sf-space-7);
	padding: var(--sf-space-5);
	border: var(--sf-border);
	border-radius: var(--sf-r-lg);
	background: linear-gradient(180deg, rgba(240, 253, 250, .75) 0%, var(--sf-surface-2) 70%);
}
.sf-docs__end::before {
	content: "";
	position: absolute;
	inset: 0 0 auto 0;
	height: 3px;
	background: var(--sf-grad-brand, var(--sf-brand));
}
.sf-docs__end > * { position: relative; z-index: 1; }
.sf-docs__end .sf-docs__pager { margin-top: 0; }
.sf-docs__end .sf-docs__pager a { background: var(--sf-surface); box-shadow: var(--sf-shadow-card); }
.sf-docs__end .sf-docs__foot { margin-top: var(--sf-space-5); }
.sf-docs__end > .sf-docs__foot:first-child { margin-top: 0; padding-top: 0; border-top: 0; }

/* ==========================================================================
   02 Changelog
   ========================================================================== */
.sf-changelog__intro { margin-bottom: var(--sf-space-6); }
.sf-changelog { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--sf-space-5); }
.sf-changelog__release { display: grid; gap: var(--sf-space-3); grid-template-columns: 1fr; scroll-margin-top: calc(var(--sf-header-h) + 24px); }
.sf-changelog__meta { display: flex; flex-wrap: wrap; align-items: center; align-content: flex-start; gap: 8px 12px; }
/* v3: the version number is a gradient pill */
.sf-changelog__version { font-family: var(--sf-font-mono); font-size: 1rem; font-weight: 600; letter-spacing: 0; line-height: 1; font-variant-numeric: tabular-nums; }
.sf-changelog__version a { display: inline-flex; align-items: center; min-height: 30px; padding: 2px 14px; border-radius: 999px; background: var(--sf-grad-brand, var(--sf-brand)); color: #fff; text-decoration: none; }
.sf-changelog__version a:hover { color: #fff; filter: brightness(1.08); }
.sf-changelog__date { font-family: var(--sf-font-mono); font-size: 0.75rem; color: var(--sf-muted); }
.sf-changelog__body { background: var(--sf-surface); border: var(--sf-border); border-radius: var(--sf-r-lg); box-shadow: var(--sf-shadow-card, 0 1px 2px rgba(15, 23, 42, .05), 0 8px 24px -12px rgba(15, 23, 42, .12)); padding: var(--sf-space-5); min-width: 0; }
.sf-changelog__body .sf-prose { max-width: none; font-size: 1rem; }
.sf-changelog__body .sf-prose > :first-child { margin-top: 0; }
.sf-changelog__body .sf-prose h3 { font-family: var(--sf-font-mono); font-size: 0.6875rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--sf-muted); font-weight: 500; margin-top: 1.6em; }
.sf-changelog__body .sf-prose h3 + * { margin-top: 0.5em; }
.sf-changelog__body .sf-prose ul { padding-inline-start: 1.2em; }
.sf-changelog__body .sf-prose li + li { margin-top: 0.4em; }
.sf-changelog__foot { display: grid; gap: var(--sf-space-4); margin-top: var(--sf-space-7); }
@media (min-width: 600px) {
	.sf-changelog__release { grid-template-columns: 168px minmax(0, 1fr); gap: var(--sf-space-5); }
	.sf-changelog__meta { flex-direction: column; align-items: flex-start; }
	.sf-changelog__foot { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 900px) {
	.sf-changelog__meta { position: sticky; top: calc(var(--sf-header-h) + 24px); }
	.sf-changelog__release { grid-template-columns: 200px minmax(0, 1fr); gap: var(--sf-space-6); }
	.sf-changelog__body { padding: var(--sf-space-6); }
}


/* --------------------------------------------------------------------------
 * v3 colour + motion pass: the release list becomes a timeline.
 *
 * The page is now three bands — accent (header), tint (releases), accent
 * (update cards) — so the releases sit on slate rather than white, and a
 * gradient rule with a marker per release replaces the plain stack.
 * ----------------------------------------------------------------------- */
.sf-changelog__top { padding-bottom: var(--sf-space-6); }
.sf-changelog__top > .sf-container > :last-child { margin-bottom: 0; }
.sf-changelog__band { padding-block: var(--sf-space-7); }
.sf-changelog__end { padding-block: var(--sf-space-6) var(--sf-space-7); }
.sf-changelog__end .sf-changelog__foot { margin-top: 0; }

/* The timeline rule. The <ol> is a grid, so this has to be absolutely
   positioned — a static ::before would become a grid item. */
.sf-changelog { padding-inline-start: 28px; }
.sf-changelog__release { position: relative; }
/* The connector is drawn per release rather than once down the whole list, so
   the rule stops at the last marker instead of trailing off the end. The <li>
   is a grid container, so this has to be absolutely positioned — a static
   pseudo-element would become a grid item. */
.sf-changelog__release:not(:last-child)::after {
	content: "";
	position: absolute;
	inset-inline-start: -23px;
	top: 25px;
	bottom: calc(var(--sf-space-5) * -1);
	width: 2px;
	border-radius: 2px;
	background: linear-gradient(180deg, rgba(15, 118, 110, .55) 0%, rgba(15, 118, 110, .42) 100%);
	pointer-events: none;
}
.sf-changelog__marker {
	position: absolute;
	inset-inline-start: -28px;
	top: 9px;
	width: 12px;
	height: 12px;
	border-radius: 50%;
	background: var(--sf-grad-brand, var(--sf-brand));
	box-shadow: 0 0 0 4px var(--sf-surface-2), 0 0 0 5px rgba(15, 118, 110, .18);
}
.sf-changelog__release.is-latest .sf-changelog__marker {
	box-shadow: 0 0 0 4px var(--sf-surface-2), 0 0 0 6px rgba(15, 118, 110, .26), 0 6px 16px -4px rgba(15, 118, 110, .5);
}

/* Version pill and its meta line. --sf-muted does not clear AA on the washed
   tint ground, so the date and the note step up to --sf-ink-2 (7.84:1). */
.sf-changelog__version a { box-shadow: 0 6px 16px -8px rgba(15, 118, 110, .7); }
.sf-changelog__band .sf-changelog__date { color: var(--sf-ink-2); }

/* The two update cards close the page with a brand cap each. */
.sf-changelog__foot .sf-card {
	position: relative;
	border-radius: var(--sf-r-xl);
	border-color: rgba(15, 118, 110, .16);
	box-shadow: var(--sf-e2, var(--sf-shadow-card));
}
.sf-changelog__foot .sf-card::before {
	content: "";
	position: absolute;
	inset: 0 0 auto 0;
	height: 3px;
	border-radius: var(--sf-r-xl) var(--sf-r-xl) 0 0;
	background: var(--sf-grad-brand, var(--sf-brand));
}

/* ==========================================================================
   03 Support — form column + aside
   ========================================================================== */
.sf-support { display: grid; gap: var(--sf-space-6); grid-template-columns: 1fr; align-items: start; }
.sf-support__main > .sf-prose { margin-bottom: var(--sf-space-6); }
.sf-support__aside { display: grid; gap: var(--sf-space-4); min-width: 0; }
.sf-support__aside .sf-card > .sf-h4 { margin-bottom: var(--sf-space-3); }
.sf-support__aside .sf-steps__item { padding-block: 12px; grid-template-columns: 24px minmax(0, 1fr); gap: 12px; }
.sf-support__aside .sf-steps__num { width: 24px; height: 24px; font-size: 0.6875rem; }
.sf-support__aside .sf-steps__title { font-size: 0.9375rem; margin-top: 1px; }
.sf-support__aside .sf-steps__text { font-size: 0.875rem; margin-top: 2px; }
.sf-support__aside .sf-dl { grid-template-columns: 1fr; gap: 2px; }
.sf-support__aside .sf-dl dd { margin-bottom: 10px; font-size: 0.9375rem; }
.sf-support__aside .sf-dl dd:last-child { margin-bottom: 0; }
.sf-support__links { list-style: none; margin: 0; padding: 0; }
.sf-support__links li { padding: 7px 0; border-top: var(--sf-border); }
.sf-support__links li:first-child { border-top: 0; padding-top: 0; }
.sf-support__links li:last-child { padding-bottom: 0; }
.sf-support__links a { display: inline-flex; align-items: center; gap: 6px; font-weight: 600; font-size: 0.9375rem; text-decoration: none; }
.sf-support__links a:hover { text-decoration: underline; }
.sf-support__links .sf-icon { color: var(--sf-muted); flex: none; }
.sf-support__email { display: inline-flex; align-items: center; gap: 8px; font-family: var(--sf-font-mono); font-size: 0.9375rem; font-weight: 500; text-decoration: none; }
.sf-support__email:hover { text-decoration: underline; }
@media (min-width: 900px) {
	.sf-support { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: var(--sf-space-8); }
}
@media (min-width: 1200px) { .sf-support { gap: var(--sf-space-9); } }

/* Contact form */
.sf-contact { background: var(--sf-surface); border: var(--sf-border); border-radius: var(--sf-r); padding: var(--sf-space-5); scroll-margin-top: calc(var(--sf-header-h) + 16px); }
.sf-contact__head { margin-bottom: var(--sf-space-5); }
.sf-contact__head .sf-h3 { margin-bottom: 6px; }
.sf-contact__head p { color: var(--sf-ink-2); font-size: 0.9375rem; }
.sf-contact .sf-notice { margin-bottom: var(--sf-space-5); }
.sf-contact .sf-notice ul { margin: 6px 0 0; padding-inline-start: 1.2em; }
.sf-contact .sf-notice li + li { margin-top: 2px; }
.sf-contact .sf-field { margin-bottom: var(--sf-space-4); }
.sf-contact .sf-field--consent { margin-top: var(--sf-space-2); }
.sf-contact .sf-field--consent .sf-checkbox { font-size: 0.875rem; }
.sf-contact .sf-form-actions { margin-top: var(--sf-space-4); justify-content: space-between; }
.sf-contact__fine { font-size: 0.8125rem; color: var(--sf-muted); flex: 1 1 240px; }
.sf-contact__count { font-family: var(--sf-font-mono); font-size: 0.75rem; }
@media (min-width: 600px) { .sf-contact { padding: var(--sf-space-6); } }
/* Honeypot: off-screen, never display:none (some bots skip hidden fields) */
.sf-hp { position: absolute !important; inset-inline-start: -9999px; top: auto; width: 1px; height: 1px; overflow: hidden; opacity: 0; pointer-events: none; }


/* --------------------------------------------------------------------------
 * v3 colour + motion pass: the header sits on the accent wash and the whole
 * form/aside row sits on the slate tint, so the form card and the three aside
 * cards read as white objects on a coloured ground instead of white on white.
 * The form markup, names, honeypot, nonce and handler are untouched.
 * ----------------------------------------------------------------------- */
.sf-support__top { padding-bottom: var(--sf-space-6); }
.sf-support__top .sf-page-header { margin-bottom: 0; }
.sf-support__band { padding-block: var(--sf-space-7); }

/* Form card: lifted off the tint, with a brand cap. */
.sf-support__main .sf-contact {
	position: relative;
	border-radius: var(--sf-r-xl);
	border-color: rgba(15, 118, 110, .16);
	box-shadow: var(--sf-shadow-card);
}
.sf-support__main .sf-contact::before {
	content: "";
	position: absolute;
	inset: 0 0 auto 0;
	height: 3px;
	border-radius: var(--sf-r-xl) var(--sf-r-xl) 0 0;
	background: var(--sf-grad-brand, var(--sf-brand));
}

/* Aside cards: a gradient tick beside each heading rather than four caps. */
.sf-support__aside .sf-card > .sf-h4 { display: flex; align-items: center; gap: 9px; }
.sf-support__aside .sf-card > .sf-h4::before {
	content: "";
	width: 4px;
	height: 18px;
	border-radius: 2px;
	background: var(--sf-grad-brand, var(--sf-brand));
	flex: none;
}
.sf-support__aside .sf-steps__num {
	background: var(--sf-brand-tint);
	border-color: rgba(15, 118, 110, .28);
	color: var(--sf-brand-ink);          /* 8.88:1 on --sf-brand-tint */
}
.sf-support__aside .sf-dl dt { color: var(--sf-brand-ink); }   /* 9.93:1 on white */
.sf-support__links .sf-icon { color: var(--sf-brand); }
.sf-support__email { color: var(--sf-brand-ink); }

/* ==========================================================================
   04 Site Setup (wp-admin) — self-contained, no tokens from main.css
   ========================================================================== */
.sf-setup { max-width: 1040px; }
.sf-setup__lead { font-size: 14px; max-width: 76ch; margin: 8px 0 16px; }
.sf-setup__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 14px; margin: 16px 0; }
.sf-setup__card { background: #fff; border: 1px solid #dcdcde; border-radius: 6px; padding: 14px 16px; }
.sf-setup__card h2 { margin: 0 0 8px; font-size: 13px; text-transform: uppercase; letter-spacing: .04em; color: #50575e; }
.sf-setup__card ul { margin: 0; padding-inline-start: 18px; font-size: 13px; }
.sf-setup__card li { margin: 0 0 4px; }
.sf-setup__card .sf-setup__count { display: block; margin-top: 8px; font-size: 12px; color: #646970; }
.sf-setup__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; margin: 16px 0 24px; }
.sf-setup__actions form { display: inline-flex; align-items: center; gap: 10px; }
.sf-setup__actions .description { margin: 0; }
.sf-setup__status { display: inline-block; padding: 2px 9px; border-radius: 999px; font-size: 11px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; line-height: 1.6; white-space: nowrap; }
.sf-setup__status--created { background: #ECFDF5; color: #065F46; }
.sf-setup__status--updated { background: #F0FDFA; color: #134E4A; }
.sf-setup__status--adopted { background: #FFFBEB; color: #92400E; }
.sf-setup__status--existed { background: #f0f0f1; color: #3c434a; }
.sf-setup__status--skipped { background: #f0f0f1; color: #646970; }
.sf-setup__status--error { background: #FEF2F2; color: #B91C1C; }
.sf-setup__results { margin-top: 12px; }
.sf-setup__results th, .sf-setup__results td { vertical-align: middle; }
.sf-setup__results .column-group { width: 120px; color: #646970; }
.sf-setup__results .column-status { width: 110px; }
.sf-setup__results .column-links { width: 140px; white-space: nowrap; }
.sf-setup__summary { display: flex; flex-wrap: wrap; gap: 8px 14px; margin: 12px 0; font-size: 13px; }
.sf-setup__summary span { display: inline-flex; align-items: center; gap: 6px; }
.sf-setup__summary b { font-variant-numeric: tabular-nums; }