/**
 * Components — buttons, cards, stats, proof blocks, FAQ, tables, trust footer.
 * Every surface here is used by the answer-ready page standard (playbook §11).
 */

/* ---- Buttons ----------------------------------------------------------- */

.sfx-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	padding: 14px 28px;
	border: 1px solid transparent;
	border-radius: var(--sfx-radius);
	font-family: var(--sfx-font);
	font-size: 15px;
	font-weight: var(--sfx-w-medium);
	line-height: 1.2;
	text-decoration: none;
	cursor: pointer;
	transition: background var(--sfx-dur) var(--sfx-ease),
	            color var(--sfx-dur) var(--sfx-ease),
	            border-color var(--sfx-dur) var(--sfx-ease);
}

.sfx-btn--primary {
	background: var(--sfx-green);
	border-color: var(--sfx-green);
	color: var(--sfx-ink);           /* dark label on green clears AA */
}
.sfx-btn--primary:hover { background: var(--sfx-green-mid); border-color: var(--sfx-green-mid); color: var(--sfx-ink); }

.sfx-btn--dark {
	background: var(--sfx-ink);
	border-color: var(--sfx-ink);
	color: var(--sfx-white);
}
.sfx-btn--dark:hover { background: var(--sfx-black); color: var(--sfx-green); }

.sfx-btn--ghost {
	background: transparent;
	border-color: currentColor;
	color: inherit;
}
.sfx-btn--ghost:hover { background: var(--sfx-ink); border-color: var(--sfx-ink); color: var(--sfx-white); }

.sfx-invert .sfx-btn--ghost:hover { background: var(--sfx-white); border-color: var(--sfx-white); color: var(--sfx-ink); }

/* ---- Cards ------------------------------------------------------------- */

.sfx-card {
	display: flex;
	flex-direction: column;
	gap: 12px;
	padding: 32px;
	background: var(--sfx-white);
	border: 1px solid var(--sfx-grey-200);
	border-radius: var(--sfx-radius);
}

.sfx-section--alt .sfx-card { background: var(--sfx-white); border-color: var(--sfx-grey-200); }
.sfx-section--dark .sfx-card,
.sfx-section--deep .sfx-card {
	background: rgba(255, 255, 255, 0.04);
	border-color: var(--sfx-hairline);
	color: var(--sfx-text-invert);
}

.sfx-card__title { font-size: var(--sfx-fs-h2-compact); line-height: var(--sfx-lh-tight); margin: 0; }
.sfx-card__body { color: var(--sfx-text-muted); margin: 0; }
.sfx-section--dark .sfx-card__body { color: var(--sfx-text-invert-muted); }
.sfx-card--link { text-decoration: none; color: inherit; transition: border-color var(--sfx-dur) var(--sfx-ease); }
.sfx-card--link:hover { border-color: var(--sfx-green); color: inherit; }

/* ---- Stat row ---------------------------------------------------------- */

.sfx-stat__value {
	font-size: var(--sfx-fs-stat);
	line-height: var(--sfx-lh-heading);
	font-weight: var(--sfx-w-regular);
	margin: 0;
}

.sfx-stat__label { font-size: var(--sfx-fs-small); color: var(--sfx-text-muted); margin: 0; }

/* Every figure resolves through the facts ledger. A value whose ledger entry is
   missing, unapproved or expired renders visibly broken so it cannot ship
   unnoticed — this is the fact-drift control from playbook §B1 made visual. */
.sfx-fact--unresolved {
	background: #FFF3CD;
	border-bottom: 2px dashed #B7791F;
	color: #7A4E00;
	padding: 0 4px;
}

.sfx-fact__source { font-size: var(--sfx-fs-fine); color: var(--sfx-text-muted); }

/* ---- Steps (How it works) --------------------------------------------- */

.sfx-steps { list-style: none; counter-reset: sfx-step; padding: 0; margin: 0; display: grid; gap: 24px; }
.sfx-steps > li { counter-increment: sfx-step; display: grid; grid-template-columns: 56px minmax(0, 1fr); gap: 20px; align-items: start; }
.sfx-steps > li::before {
	content: counter(sfx-step) ".";
	font-size: var(--sfx-fs-h3);
	color: var(--sfx-green);
	line-height: 1.2;
}
.sfx-steps__title { font-size: var(--sfx-fs-h4); font-weight: var(--sfx-w-medium); margin: 0 0 4px; }

/* ---- Proof block (playbook §F2 evidence standard) ---------------------- */

.sfx-proof {
	border-left: 3px solid var(--sfx-green);
	padding: 24px 28px;
	background: var(--sfx-bg-alt);
	border-radius: 0 var(--sfx-radius) var(--sfx-radius) 0;
}

.sfx-proof__metric { font-size: var(--sfx-fs-stat); line-height: 1.2; margin: 0 0 4px; }
.sfx-proof__claim { margin: 0 0 12px; }

/* Method, period, denominator and source travel with the number. A metric without
   them is what the playbook calls a "floating statistic". */
.sfx-proof__meta {
	display: grid;
	grid-template-columns: max-content minmax(0, 1fr);
	gap: 4px 16px;
	margin: 0;
	font-size: var(--sfx-fs-fine);
	color: var(--sfx-text-muted);
}
.sfx-proof__meta dt { font-weight: var(--sfx-w-semibold); }
.sfx-proof__meta dd { margin: 0; }

/* ---- Selection criteria ------------------------------------------------ */

.sfx-criteria { list-style: none; padding: 0; margin: 0; display: grid; gap: 16px; }
.sfx-criteria > li { padding-left: 28px; position: relative; }
.sfx-criteria > li::before {
	content: "";
	position: absolute;
	left: 0; top: 0.55em;
	width: 12px; height: 2px;
	background: var(--sfx-green);
}
.sfx-criteria__term { font-weight: var(--sfx-w-semibold); }

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

/* Rendered with <details> so answers are present in the server HTML and readable
   without JavaScript. FAQPage schema is only emitted when this markup exists
   (see inc/schema/guards.php). */
.sfx-faq { display: grid; gap: 0; border-top: 1px solid var(--sfx-hairline-dark); }
.sfx-faq__item { border-bottom: 1px solid var(--sfx-hairline-dark); }
.sfx-faq__q {
	cursor: pointer;
	list-style: none;
	padding: 20px 40px 20px 0;
	font-size: var(--sfx-fs-h4);
	font-weight: var(--sfx-w-medium);
	position: relative;
}
.sfx-faq__q::-webkit-details-marker { display: none; }
.sfx-faq__q::after {
	content: "+";
	position: absolute;
	right: 8px; top: 50%;
	transform: translateY(-50%);
	color: var(--sfx-green);
	font-size: 24px;
	line-height: 1;
}
.sfx-faq__item[open] .sfx-faq__q::after { content: "\2212"; } /* − */
.sfx-faq__a { padding: 0 40px 24px 0; color: var(--sfx-text-muted); max-width: var(--sfx-measure); }

/* ---- Tables ------------------------------------------------------------ */

.sfx-table-wrap { overflow-x: auto; }
.sfx-table { width: 100%; border-collapse: collapse; font-size: var(--sfx-fs-small); }
.sfx-table th, .sfx-table td { padding: 14px 16px; text-align: left; border-bottom: 1px solid var(--sfx-hairline-dark); vertical-align: top; }
.sfx-table th { font-weight: var(--sfx-w-semibold); }
.sfx-table thead th { border-bottom-width: 2px; }

/* ---- Trust footer (playbook §11 block 11) ------------------------------ */

.sfx-trust {
	margin-top: var(--sfx-section-y-sm);
	padding-top: 28px;
	border-top: 1px solid var(--sfx-hairline-dark);
	font-size: var(--sfx-fs-small);
	color: var(--sfx-text-muted);
	display: grid;
	gap: 16px;
}

.sfx-trust__reviewer { display: flex; align-items: center; gap: 12px; }
.sfx-trust__reviewer img { width: 44px; height: 44px; border-radius: 50%; }
.sfx-trust__sources { padding-left: 1.2em; margin: 0; }

/* ---- Breadcrumbs ------------------------------------------------------- */

.sfx-breadcrumbs { font-size: var(--sfx-fs-fine); color: var(--sfx-text-muted); margin-bottom: 16px; }
.sfx-breadcrumbs ol { list-style: none; display: flex; flex-wrap: wrap; gap: 8px; padding: 0; margin: 0; }
.sfx-breadcrumbs li:not(:last-child)::after { content: "/"; margin-left: 8px; color: var(--sfx-grey-400); }

/* On the dark hero the muted ink used for the current crumb falls to about
   1.4:1. These grounds get the inverted muted tone instead, which clears AA. */
.sfx-invert .sfx-breadcrumbs,
.sfx-section--dark .sfx-breadcrumbs,
.sfx-section--deep .sfx-breadcrumbs { color: var(--sfx-text-invert-muted); }

.sfx-invert .sfx-breadcrumbs li:not(:last-child)::after,
.sfx-section--dark .sfx-breadcrumbs li:not(:last-child)::after { color: var(--sfx-ink-300); }

/* ---- Contents rail ----------------------------------------------------- */

.sfx-toc { border-left: 1px solid var(--sfx-hairline-dark); padding-left: 20px; }
.sfx-toc ol { list-style: none; padding: 0; margin: 0; display: grid; gap: 10px; }
.sfx-toc a { text-decoration: none; color: var(--sfx-text-muted); }
.sfx-toc a:hover { color: var(--sfx-ink); }

/* ---- Notice ------------------------------------------------------------ */

.sfx-notice {
	padding: 16px 20px;
	border-radius: var(--sfx-radius);
	background: var(--sfx-bg-alt);
	border-left: 3px solid var(--sfx-green);
	font-size: var(--sfx-fs-small);
}