/**
 * Article body components ("eco-*"): the 9(+2) building blocks a hand-
 * authored post body (pasted into a Custom HTML block) is composed from —
 * see ARTICLE_DESIGN_STANDARD.md. Originally shipped as a per-article
 * inline <style> block (wordpress-記事HTML-*.html); moved here per that
 * standard's §7/§5 so future articles only ever paste markup + class
 * names, never a <style> tag, and every article shares one stylesheet.
 *
 * Loaded only for `is_singular('post')` (see inc/single-redesign.php) —
 * scoped under `.eco-article`, sitting inside `.entry-content` next to the
 * AI Editor's own `.ecolog-*` components (inc/article-components.php,
 * styled in single-redesign.css). The two families cover different
 * authoring paths and are never mixed for the same role (design standard
 * §6): `.eco-*` is for a human-authored body, `.ecolog-*` for AI Editor
 * output. Same tokens (--sr-*, --color-primary-*, --space-*), same
 * `@layer overrides` as the rest of the redesign so specificity ties
 * resolve the same way.
 *
 * @package EcoLog
 */

@layer overrides {
	.eco-article {
		box-sizing: border-box;
	}

	.eco-article *,
	.eco-article *::before,
	.eco-article *::after {
		box-sizing: inherit;
	}

	/* ---------- Label: small mono eyebrow shared by every component ---------- */
	.eco-label {
		margin: 0;
		font-family: var(--sr-font-mono);
		font-size: 0.6875rem;
		letter-spacing: 0.1em;
		text-transform: uppercase;
		color: var(--sr-muted);
	}

	/* ---------- Lead: body-authored intro paragraph (News/Research/Solution
	   article types — "何が発表されたか" / "研究の目的" / "解決したい問題").
	   Explainer articles rely on the post excerpt (entry-hero__lede) for
	   this role instead and skip .eco-lead entirely (design standard §7,
	   two-layer structure — 導入文 is normally テーマ側, so this exists only
	   for the article types where the body itself needs its own opening
	   framing paragraph before the first h2). Not boxed — a lead paragraph
	   is still running text, just visually heavier than the muted body. ---------- */
	.eco-lead {
		margin-top: var(--space-4);
		font-size: 1.125rem;
		line-height: 1.8;
		font-weight: 500;
		color: var(--sr-ink);
	}

	/* ---------- Note: project/supplement card (article intro, 1 per article) ---------- */
	.eco-note {
		margin-top: var(--space-4);
		padding: var(--space-4);
		background: var(--sr-bg);
		border: 1px solid var(--sr-border);
	}

	.eco-note__title {
		margin: 0;
		font-size: 0.9375rem;
		font-weight: 700;
		color: var(--sr-ink);
	}

	.eco-note > * + * {
		margin-top: var(--space-3);
	}

	/* ---------- One phrase: dark band, "一言で言うと" (max 1 per h2) ---------- */
	.eco-onephrase {
		margin-top: var(--space-4);
		padding: var(--space-6);
		background: var(--sr-ink);
	}

	.eco-onephrase__label {
		margin: 0;
		font-family: var(--sr-font-mono);
		font-size: 0.6875rem;
		letter-spacing: 0.14em;
		text-transform: uppercase;
		color: rgb(244 244 238 / 50%);
	}

	.eco-onephrase__text {
		margin: var(--space-3) 0 0;
		font-size: clamp(1.125rem, 2.4vw, 1.5rem);
		line-height: 1.55;
		font-weight: 500;
		color: #f4f4ee;
		text-wrap: pretty;
	}

	.eco-onephrase__sub {
		margin: var(--space-3) 0 0;
		font-size: 0.875rem;
		line-height: 1.85;
		color: #d3d3ce;
	}

	/* ---------- Pull: reader question / emphasis (top+bottom hairline only) ---------- */
	.eco-pull {
		margin: var(--space-8) 0 0;
		padding: var(--space-4) 0;
		border-top: 1px solid var(--sr-border);
		border-bottom: 1px solid var(--sr-border);
	}

	.eco-pull p {
		margin: 0;
		font-size: 1.375rem;
		line-height: 1.5;
		font-weight: 500;
		color: var(--sr-ink);
		text-wrap: pretty;
	}

	/* ---------- List: hairline-separated item list (01 + name + symbol) ---------- */
	.eco-list {
		margin: var(--space-6) 0 0;
		padding: 0;
		list-style: none;
		display: grid;
		grid-template-columns: minmax(0, 1fr);
	}

	.eco-list > li {
		display: grid;
		grid-template-columns: 32px 1fr auto;
		align-items: baseline;
		gap: var(--space-2);
		padding: 14px 0;
		border-top: 1px solid var(--sr-border);
	}

	.eco-list__no,
	.eco-list__sym {
		font-family: var(--sr-font-mono);
		font-size: 0.8125rem;
		color: var(--sr-muted);
	}

	.eco-list__name {
		font-size: 0.9375rem;
		color: var(--sr-ink);
	}

	/* ---------- Def: per-item explainer (number + definition list) ---------- */
	.eco-def {
		margin-top: var(--space-6);
		padding-top: var(--space-3);
		border-top: 1px solid var(--sr-border);
		display: grid;
		grid-template-columns: 48px 1fr;
		gap: 0 var(--space-3);
	}

	.eco-def__no {
		margin: 0;
		font-family: var(--sr-font-mono);
		font-size: 0.8125rem;
		color: var(--sr-muted);
	}

	.eco-def__name {
		margin: 0;
	}

	.eco-def__name span {
		font-family: var(--sr-font-mono);
		font-size: 0.875rem;
		font-weight: 400;
		color: var(--sr-muted);
	}

	.eco-def dl {
		margin: var(--space-3) 0 0;
		display: grid;
		grid-template-columns: auto 1fr;
		gap: var(--space-2) var(--space-3);
		font-size: 0.9375rem;
	}

	.eco-def dt {
		margin: 0;
		padding-top: 4px;
		font-family: var(--sr-font-mono);
		font-size: 0.6875rem;
		letter-spacing: 0.06em;
		text-transform: uppercase;
		color: var(--sr-muted);
	}

	.eco-def dd {
		margin: 0;
		line-height: 1.7;
		color: var(--sr-ink);
	}

	.eco-def__aside {
		margin: var(--space-3) 0 0;
		font-size: 0.875rem;
		line-height: 1.85;
		color: var(--sr-muted);
	}

	/* ---------- Key: key-points summary (only fill, 1 per article) ---------- */
	.eco-key {
		margin-top: var(--space-4);
		padding: var(--space-6);
		background: var(--color-primary-tint);
		border: 1px solid var(--sr-border);
		border-left: 4px solid var(--color-primary-600);
	}

	.eco-key__title {
		margin: 0;
		font-size: 0.9375rem;
		font-weight: 700;
		color: var(--sr-ink);
	}

	.eco-key ol {
		counter-reset: eco-key;
		margin: var(--space-3) 0 0;
		padding: 0;
		list-style: none;
		display: grid;
		gap: var(--space-3);
	}

	.eco-key ol > li {
		counter-increment: eco-key;
		display: flex;
		gap: var(--space-3);
		align-items: baseline;
		font-size: 0.9375rem;
		line-height: 1.8;
		color: var(--sr-ink);
	}

	.eco-key ol > li::before {
		content: counter(eco-key, decimal-leading-zero);
		flex: none;
		display: grid;
		place-items: center;
		width: 22px;
		height: 22px;
		border: 1px solid var(--color-primary-600);
		color: var(--color-primary-700);
		font-family: var(--sr-font-mono);
		font-size: 0.625rem;
	}

	/* ---------- Warning: 注意（caution/limitation callout). Bordered like
	   .eco-note (background: --sr-bg, same as the page — not a "fill"), an
	   --sr-ink left accent distinguishes it from .eco-key's green-tint
	   fill without introducing a 3rd box color (design standard §2's "3
	   種類以上のボックス色" prohibition — .eco-note/.eco-warning/.eco-action
	   all share the same unfilled card, only the left-accent color and
	   label text tell them apart). ---------- */
	.eco-warning {
		margin-top: var(--space-4);
		padding: var(--space-4);
		background: var(--sr-bg);
		border: 1px solid var(--sr-border);
		border-left: 3px solid var(--sr-ink);
	}

	.eco-warning__title {
		margin: 0;
		font-size: 0.9375rem;
		font-weight: 700;
		color: var(--sr-ink);
	}

	.eco-warning > * + * {
		margin-top: var(--space-3);
	}

	/* ---------- Action: 行動案（reader-facing numbered action list). Same
	   numbered-badge device as .eco-key, but unfilled/ink-accented so it
	   reads as "things you can do" rather than "the official summary"
	   (.eco-key stays the one green-tint box, per article, per §5). ---------- */
	.eco-action {
		margin-top: var(--space-4);
		padding: var(--space-4);
		border: 1px solid var(--sr-border);
	}

	.eco-action__title {
		margin: 0;
		font-size: 0.9375rem;
		font-weight: 700;
		color: var(--sr-ink);
	}

	.eco-action ol {
		counter-reset: eco-action;
		margin: var(--space-3) 0 0;
		padding: 0;
		list-style: none;
		display: grid;
		gap: var(--space-3);
	}

	.eco-action ol > li {
		counter-increment: eco-action;
		display: flex;
		gap: var(--space-3);
		align-items: baseline;
		font-size: 0.9375rem;
		line-height: 1.8;
		color: var(--sr-ink);
	}

	.eco-action ol > li::before {
		content: counter(eco-action, decimal-leading-zero);
		flex: none;
		display: grid;
		place-items: center;
		width: 22px;
		height: 22px;
		border: 1px solid var(--sr-ink);
		color: var(--sr-ink);
		font-family: var(--sr-font-mono);
		font-size: 0.625rem;
	}

	/* ---------- Block: next-up / related-article divider (1-3 per article) ---------- */
	.eco-block {
		margin-top: var(--space-8);
		padding-top: var(--space-4);
		border-top: 1px solid var(--sr-border);
	}

	.eco-block h3 {
		margin: var(--space-3) 0 0;
		line-height: 1.45;
		color: var(--sr-ink);
		text-wrap: pretty;
	}

	.eco-block p {
		margin: var(--space-2) 0 0;
	}

	.eco-block__link {
		display: inline-flex;
		align-items: baseline;
		gap: var(--space-2);
		margin-top: var(--space-3);
		font-family: var(--sr-font-mono);
		font-size: 0.8125rem;
		letter-spacing: 0.04em;
		color: var(--sr-ink);
		text-decoration: none;
		border-bottom: 1px solid currentcolor;
		padding-bottom: 7px;
	}

	.eco-block__link:hover,
	.eco-block__link:focus-visible {
		opacity: 0.62;
	}

	/* ---------- Table: comparison / data table (graph-or-table minimum) ---------- */
	.eco-table-wrap {
		margin: var(--space-6) 0 0;
		max-width: 100%;
		overflow-x: auto;
	}

	.eco-table {
		width: 100%;
		border-collapse: collapse;
		font-size: 0.875rem;
	}

	.eco-table thead th {
		padding: 8px var(--space-3) 8px 0;
		text-align: left;
		border-bottom: 1px solid var(--sr-border);
		font-family: var(--sr-font-mono);
		font-size: 0.6875rem;
		font-weight: 500;
		letter-spacing: 0.08em;
		text-transform: uppercase;
		color: var(--sr-muted);
	}

	.eco-table tbody th {
		padding: 12px var(--space-3) 12px 0;
		text-align: left;
		white-space: nowrap;
		border-bottom: 1px solid var(--sr-border-subtle);
		font-family: var(--sr-font-mono);
		font-size: 0.8125rem;
		font-weight: 500;
		color: var(--sr-ink);
	}

	.eco-table td {
		padding: 12px 0;
		border-bottom: 1px solid var(--sr-border-subtle);
		line-height: 1.7;
		color: var(--sr-muted);
	}

	/* Data-source / unit / period line directly under a table or chart —
	   design standard §4 requires every graph/table to name its numbers'
	   unit, covered period, and source; this is the one place that line
	   lives so ecolog_validate_article_html() has a single selector to
	   check for it. */
	.eco-table__source {
		margin: var(--space-2) 0 0;
		font-size: 0.75rem;
		line-height: 1.7;
		color: var(--sr-muted);
		overflow-wrap: break-word;
	}

	.eco-table__source a {
		color: var(--sr-ink);
		text-decoration: none;
		border-bottom: 1px solid currentcolor;
	}

	/* ---------- Takeaway: the required "何が読み取れるか" sentence right
	   after a graph/table/chart-figure (design standard §4.2). A label +
	   plain paragraph, not boxed, so it reads as part of the body copy
	   rather than a 5th callout type — ecolog_validate_article_html()
	   looks for this specific class immediately after .eco-table-wrap /
	   figure.eco-figure--chart rather than guessing at "the next <p>". ---------- */
	.eco-takeaway {
		margin-top: var(--space-3);
	}

	.eco-takeaway__label {
		margin: 0;
		font-family: var(--sr-font-mono);
		font-size: 0.6875rem;
		letter-spacing: 0.1em;
		text-transform: uppercase;
		color: var(--sr-muted);
	}

	.eco-takeaway p {
		margin: var(--space-2) 0 0;
		font-size: 0.9375rem;
		line-height: 1.8;
		color: var(--sr-ink);
	}

	/* ---------- Sources: footnote-style citation list (1 per article, end) ---------- */
	.eco-sources {
		margin: var(--space-8) 0 0;
		padding-top: var(--space-4);
		border-top: 1px solid var(--sr-border);
	}

	.eco-sources ol {
		margin: var(--space-3) 0 0;
		padding-inline-start: 1.25em;
		display: grid;
		gap: var(--space-2);
	}

	.eco-sources li {
		font-size: 0.8125rem;
		line-height: 1.85;
		color: var(--sr-muted);
		overflow-wrap: break-word;
	}

	/* ---------- Cite: inline in-body link from a specific number/claim
	   down to its .eco-sources entry (design standard §4: "本文内の重要な
	   数値から出典へ移動できるようにする"). Small/superscript-style so it
	   doesn't compete with real inline links (.entry-content a). ---------- */
	.eco-cite {
		font-family: var(--sr-font-mono);
		font-size: 0.75em;
		color: var(--sr-ink);
		text-decoration: none;
		border-bottom: 1px solid currentcolor;
		padding: 0 2px;
	}

	.eco-cite:hover,
	.eco-cite:focus-visible {
		opacity: 0.62;
	}

	/* ---------- Figure credit: photographer / license line for a body
	   photo, appended inside <figcaption> after the descriptive caption
	   sentence (design standard §3: every externally-sourced photo must
	   record its credit/license). Kept as its own small line rather than
	   folded into the caption sentence so the two stay visually and
	   semantically distinct — one describes the photo, the other
	   attributes it. */
	.eco-figure__credit {
		display: block;
		margin-top: 4px;
		font-size: 0.75rem;
		color: var(--sr-muted);
		overflow-wrap: break-word;
	}

	.eco-figure__credit a {
		color: inherit;
		text-decoration: none;
		border-bottom: 1px solid currentcolor;
	}

	/* Phase 34: `.eco-feedback` (a hand-authored "役に立った/役に立たなかった"
	   placeholder) was removed here — inc/environmental-pulse.php +
	   template-parts/content/environmental-pulse.php already render a real,
	   working reader survey (Environmental Pulse, REST-backed, eligibility
	   managed by the ecolog-content-model plugin) automatically after
	   entry-content on every eligible post. A body-authored feedback block
	   would only duplicate it with a non-functional one — see
	   ARTICLE_DESIGN_STANDARD.md §"二層構造". */

	@media (max-width: 600px) {
		.eco-onephrase,
		.eco-key,
		.eco-note {
			padding: var(--space-4);
		}

		.eco-def {
			grid-template-columns: 36px 1fr;
		}

		.eco-def dl {
			grid-template-columns: 1fr;
			gap: 4px;
		}

		.eco-def dt {
			padding-top: var(--space-2);
		}
	}
}