/**
 * 「パソコンで困ったこと」/ "Computer Troubles" の記事用スタイル。
 *
 * inc/pc-series.php が /pc/ と /en/pc/ 配下の固定ページだけで読み込む。
 * すべて .miweno-pc-article の中に閉じ、サイト全体の見た目は変えない。
 * 色はテーマのパレット（theme.json / miweno.css の変数）を基本にし、
 * 状態色（注意・成功）だけを、本文とのコントラスト 4.5:1 以上で足している。
 */

.miweno-pc-article {
	--pc-ink: var(--wp--preset--color--contrast, #13161b);
	--pc-ink-soft: #3b414c;
	--pc-muted: var(--miweno-muted, #5b6270);
	--pc-accent: var(--miweno-accent, #26457a);
	--pc-accent-soft: var(--miweno-accent-soft, #eef1f7);
	--pc-surface: var(--miweno-surface, #f6f6f3);
	--pc-outline: var(--miweno-outline, #e3e3dd);
	--pc-line: #c9cbc4;
	--pc-warn: #7a4d00;
	--pc-warn-line: #a86a00;
	--pc-warn-bg: #fbf5e6;
	--pc-ok: #24563a;
	--pc-ok-line: #2f6b47;
	--pc-ok-bg: #edf5ef;
	--pc-alert: #8e2f2f;
	--pc-alert-bg: #f8eeee;
	--pc-radius: 10px;

	padding-block: var(--wp--preset--spacing--40) var(--wp--preset--spacing--70);
	color: var(--pc-ink);
	font-size: 1.0625rem;
	line-height: 1.95;
	letter-spacing: 0.02em;
	line-break: strict;
	overflow-wrap: anywhere;
}

.miweno-pc-article.is-lang-en {
	font-size: 1.125rem;
	line-height: 1.72;
	letter-spacing: 0;
	overflow-wrap: break-word;
	hyphens: manual;
}

/* 縦のリズム。ブロック同士の間隔を記事の中だけで決める。 */
.miweno-pc-article > * + *,
.miweno-pc-article :where(.miweno-pc-callout, .miweno-pc-cmd, .miweno-pc-download, .miweno-pc-toc, .wp-block-details) > * + * {
	margin-block-start: 1.15em;
}

.miweno-pc-article > * {
	margin-block-end: 0;
}

.miweno-pc-article p,
.miweno-pc-article li {
	text-wrap: pretty;
}

.miweno-pc-article :is(h1, h2, h3) {
	color: var(--pc-ink);
	text-wrap: balance;
	word-break: auto-phrase;
	scroll-margin-top: 1.5rem;
}

.miweno-pc-article strong {
	font-weight: 700;
}

.miweno-pc-article a:where(:not(.wp-element-button)) {
	color: var(--pc-accent);
	text-decoration-thickness: 1px;
	text-underline-offset: 0.22em;
}

.miweno-pc-article a:where(:not(.wp-element-button)):hover {
	color: var(--pc-ink);
}

.miweno-pc-article :not(pre) > code {
	padding: 0.08em 0.36em;
	border-radius: 4px;
	background: var(--pc-surface);
	border: 1px solid var(--pc-outline);
	font-family: var(--wp--preset--font-family--mono);
	font-size: 0.86em;
	letter-spacing: 0;
	overflow-wrap: anywhere;
}

/* 見出し -------------------------------------------------------- */

.miweno-pc-article h2 {
	position: relative;
	margin-block-start: clamp(3rem, 6vw, 4.5rem);
	padding-block-start: 1.4rem;
	border-top: 1px solid var(--pc-outline);
	font-size: clamp(1.45rem, 1.2rem + 0.9vw, 1.85rem);
	line-height: 1.4;
	letter-spacing: 0.01em;
}

.miweno-pc-article h2::before {
	content: "";
	position: absolute;
	top: -2px;
	left: 0;
	width: 3rem;
	height: 3px;
	background: var(--pc-accent);
}

.miweno-pc-article h3 {
	margin-block-start: 2.4rem;
	font-size: clamp(1.15rem, 1.05rem + 0.35vw, 1.3rem);
	line-height: 1.5;
}

.miweno-pc-article.is-lang-en :is(h2, h3) {
	letter-spacing: -0.01em;
	line-height: 1.3;
}

/* 冒頭（タイトル・リード） ------------------------------------------ */

.miweno-pc-article .miweno-pc-hero {
	padding-block: var(--wp--preset--spacing--30) var(--wp--preset--spacing--20);
}

.miweno-pc-hero > * + * {
	margin-block-start: 1rem;
}

.miweno-pc-hero__eyebrow {
	color: var(--pc-accent);
	font-size: var(--wp--preset--font-size--x-small);
	font-weight: 700;
	letter-spacing: 0.14em;
	text-transform: uppercase;
}

.miweno-pc-article h1.miweno-pc-hero__title {
	margin: 0;
	word-break: keep-all; /* 日本語は <wbr> の位置（文節）でだけ改行する */
	font-size: clamp(1.7rem, 1.15rem + 2.3vw, 2.6rem);
	line-height: 1.38;
	letter-spacing: 0.01em;
}

.miweno-pc-article.is-lang-en h1.miweno-pc-hero__title {
	line-height: 1.18;
	letter-spacing: -0.02em;
}

.miweno-pc-hero__lead {
	color: var(--pc-ink-soft);
	font-size: 1.125em;
	line-height: 1.85;
}

.is-lang-en .miweno-pc-hero__lead {
	line-height: 1.6;
}

.miweno-pc-hero__meta {
	padding-block-start: 0.75rem;
	border-top: 1px solid var(--pc-outline);
	color: var(--pc-muted);
	font-size: var(--wp--preset--font-size--x-small);
}

/* 救出実績の数字 ------------------------------------------------- */

.miweno-pc-article .miweno-pc-stats {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 0.75rem;
}

.miweno-pc-article .miweno-pc-stats > * {
	margin: 0;
	max-width: none;
}

.miweno-pc-stat {
	padding: 1rem 1.1rem 0.9rem;
	border: 1px solid var(--pc-outline);
	border-radius: var(--pc-radius);
	background: var(--pc-surface);
}

.miweno-pc-stat > * {
	margin: 0;
}

.miweno-pc-stat__value {
	color: var(--pc-accent);
	font-size: clamp(1.5rem, 1.2rem + 1vw, 2rem);
	font-weight: 700;
	line-height: 1.2;
	letter-spacing: -0.01em;
	font-variant-numeric: tabular-nums;
	white-space: nowrap;
}

.miweno-pc-stat__label {
	margin-block-start: 0.35rem !important;
	word-break: keep-all;
	color: var(--pc-ink-soft);
	font-size: 0.8125rem;
	line-height: 1.5;
}

/* 目次 ---------------------------------------------------------- */

.miweno-pc-toc {
	padding: 1.25rem 1.5rem;
	border: 1px solid var(--pc-outline);
	border-radius: var(--pc-radius);
	background: var(--pc-surface);
}

.miweno-pc-toc__title {
	font-weight: 700;
	font-size: 0.9375rem;
}

.miweno-pc-toc ol {
	margin: 0.5rem 0 0;
	padding-inline-start: 1.6em;
	columns: 2;
	column-gap: 2rem;
	font-size: 0.9375rem;
	line-height: 1.6;
}

.miweno-pc-toc li {
	break-inside: avoid;
	padding-block: 0.2rem;
}

.miweno-pc-toc li::marker {
	color: var(--pc-muted);
	font-variant-numeric: tabular-nums;
}

/* 注意欄 -------------------------------------------------------- */

.miweno-pc-callout {
	padding: 1rem 1.25rem;
	border-left: 4px solid var(--pc-accent);
	border-radius: 0 var(--pc-radius) var(--pc-radius) 0;
	background: var(--pc-accent-soft);
}

.miweno-pc-callout > * {
	margin-block: 0;
}

.miweno-pc-callout__title {
	color: var(--pc-accent);
	font-size: 0.9375rem;
	line-height: 1.6;
}

.miweno-pc-callout.is-warning {
	border-left-color: var(--pc-warn-line);
	background: var(--pc-warn-bg);
}

.miweno-pc-callout.is-warning .miweno-pc-callout__title {
	color: var(--pc-warn);
}

.miweno-pc-callout.is-success {
	border-left-color: var(--pc-ok-line);
	background: var(--pc-ok-bg);
}

.miweno-pc-callout.is-important {
	border-left-color: var(--pc-alert);
	background: var(--pc-alert-bg);
}

.miweno-pc-callout.is-important .miweno-pc-callout__title {
	color: var(--pc-alert);
}

.miweno-pc-callout.is-pending {
	border: 2px dashed var(--pc-warn-line);
	border-radius: var(--pc-radius);
	background: #fff;
	color: var(--pc-warn);
	font-weight: 700;
}

/* 手順の番号 ------------------------------------------------------ */

.miweno-pc-article ol.miweno-pc-steps {
	padding: 0;
	list-style: none;
	counter-reset: pc-step;
}

.miweno-pc-steps > li {
	position: relative;
	padding-inline-start: 2.75rem;
	counter-increment: pc-step;
}

.miweno-pc-steps > li + li {
	margin-block-start: 0.85rem;
}

.miweno-pc-steps > li::before {
	content: counter(pc-step);
	position: absolute;
	top: 0.15em;
	left: 0;
	display: grid;
	place-items: center;
	width: 1.85rem;
	height: 1.85rem;
	border-radius: 50%;
	background: var(--pc-accent);
	color: #fff;
	font-size: 0.875rem;
	font-weight: 700;
	line-height: 1;
}

/* コマンド ------------------------------------------------------- */

.miweno-pc-legend {
	padding: 0.9rem 1.25rem;
	border: 1px solid var(--pc-outline);
	border-radius: var(--pc-radius);
	font-size: 0.9375rem;
}

.miweno-pc-legend__title {
	font-weight: 700;
}

.miweno-pc-legend ul {
	margin: 0.35rem 0 0;
	padding: 0;
	list-style: none;
	line-height: 1.7;
}

.miweno-pc-legend li + li {
	margin-block-start: 0.3rem;
}

.miweno-pc-badge {
	display: inline-block;
	margin-inline-end: 0.4rem;
	padding: 0.05rem 0.55rem;
	border: 1px solid currentColor;
	border-radius: 999px;
	font-size: 0.75rem;
	font-weight: 700;
	line-height: 1.6;
	letter-spacing: 0.03em;
	white-space: nowrap;
	vertical-align: 0.08em;
}

.miweno-pc-badge.is-read { color: var(--pc-ok); background: var(--pc-ok-bg); }
.miweno-pc-badge.is-install { color: var(--pc-ink-soft); background: var(--pc-surface); }
.miweno-pc-badge.is-admin { color: var(--pc-accent); background: var(--pc-accent-soft); }
.miweno-pc-badge.is-write { color: var(--pc-warn); background: var(--pc-warn-bg); }

.miweno-pc-cmd {
	border: 1px solid var(--pc-line);
	border-radius: var(--pc-radius);
	background: var(--pc-surface);
	overflow: hidden;
}

.miweno-pc-cmd.is-write {
	border-color: var(--pc-warn-line);
	box-shadow: inset 4px 0 0 var(--pc-warn-line);
}

.miweno-pc-cmd > * {
	margin: 0 !important;
	max-width: none !important;
}

.miweno-pc-cmd__head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 0.5rem;
	padding: 0.45rem 0.6rem 0.45rem 0.85rem;
	border-bottom: 1px solid var(--pc-outline);
	background: #fff;
	line-height: 1.4;
}

.miweno-pc-cmd__edit {
	padding: 0.55rem 0.95rem;
	border-bottom: 1px solid var(--pc-outline);
	background: var(--pc-warn-bg);
	color: var(--pc-ink);
	font-size: 0.875rem;
	line-height: 1.6;
}

.miweno-pc-copy {
	flex: none;
	min-height: 2rem;
	padding: 0.2rem 0.8rem;
	border: 1px solid var(--pc-line);
	border-radius: 6px;
	background: #fff;
	color: var(--pc-ink);
	font: 600 0.8125rem/1.4 var(--wp--preset--font-family--sans);
	cursor: pointer;
}

.miweno-pc-copy:hover {
	border-color: var(--pc-accent);
	color: var(--pc-accent);
}

.miweno-pc-copy.is-done {
	border-color: var(--pc-ok-line);
	color: var(--pc-ok);
}

.miweno-pc-article pre.wp-block-code {
	margin: 0;
	padding: 1rem 1.15rem;
	border-radius: var(--pc-radius);
	font-family: var(--wp--preset--font-family--mono);
	font-size: 0.875rem;
	line-height: 1.65;
	letter-spacing: 0;
	tab-size: 4;
}

.miweno-pc-article pre.wp-block-code code {
	font-family: inherit;
}

/* コマンドは画面幅で折り返す（スマートフォンで右端が隠れない）。コピーは改行なしの元の文字列。 */
.miweno-pc-article pre.wp-block-code.is-command {
	border: 0;
	border-radius: 0;
	background: var(--pc-surface);
	color: var(--pc-ink);
	font-size: 0.9rem;
}

.miweno-pc-article pre.wp-block-code.is-command code {
	white-space: pre-wrap;
	overflow-wrap: anywhere;
}

/* 出力例・抜粋は、桁をそろえたまま横スクロール。コマンドと見分けられるよう白地＋破線。 */
.miweno-pc-article pre.wp-block-code:is(.is-output, .is-excerpt) {
	border: 1px dashed var(--pc-line);
	background: #fff;
	color: var(--pc-ink-soft);
	overflow-x: auto;
}

.miweno-pc-article pre.wp-block-code:is(.is-output, .is-excerpt) code {
	display: block;
	white-space: pre;
	overflow-wrap: normal;
	min-width: max-content;
}

.miweno-pc-article pre.wp-block-code:is(.is-output, .is-excerpt)::before {
	display: block;
	margin-block-end: 0.5rem;
	color: var(--pc-muted);
	font: 700 0.75rem/1.4 var(--wp--preset--font-family--sans);
	letter-spacing: 0.06em;
}

.miweno-pc-article pre.wp-block-code.is-output::before { content: "出力例（入力しないでください）"; }
.miweno-pc-article pre.wp-block-code.is-excerpt::before { content: "コードの抜粋（このままでは実行できません）"; }
.miweno-pc-article.is-lang-en pre.wp-block-code.is-output::before { content: "Sample output (do not type this)"; }
.miweno-pc-article.is-lang-en pre.wp-block-code.is-excerpt::before { content: "Code excerpt (not a runnable command)"; }
.miweno-pc-article pre.wp-block-code.is-output.is-result::before { content: "実際の出力（入力しないでください）"; }
.miweno-pc-article.is-lang-en pre.wp-block-code.is-output.is-result::before { content: "Actual output (do not type this)"; }

/* 表 ----------------------------------------------------------- */

.miweno-pc-article figure.wp-block-table {
	margin-inline: 0;
	overflow-x: auto;
}

.miweno-pc-article .wp-block-table table {
	width: 100%;
	border-collapse: collapse;
	font-size: 0.9375rem;
	line-height: 1.65;
}

.miweno-pc-article .wp-block-table :is(th, td) {
	padding: 0.6rem 0.75rem;
	border: 0;
	border-bottom: 1px solid var(--pc-outline);
	text-align: left;
	vertical-align: top;
}

.miweno-pc-article .wp-block-table thead th {
	border-bottom: 2px solid var(--pc-line);
	color: var(--pc-ink-soft);
	font-size: 0.8125rem;
	letter-spacing: 0.04em;
	white-space: nowrap;
}

.miweno-pc-article .wp-block-table thead {
	border-bottom: 0; /* コア既定の太い線を使わない */
}

.miweno-pc-article .wp-block-table td:first-child {
	font-weight: 600;
	word-break: keep-all; /* 「1回目」などを途中で折り返さない */
	overflow-wrap: normal; /* anywhere のままだと列の最小幅が縮み、keep-all が効かない */
}

.miweno-pc-article .wp-block-table td:first-child code {
	font-weight: 400;
}

.miweno-pc-article .wp-block-table td code {
	white-space: normal;
}

.miweno-pc-article .wp-block-table tr:last-child td {
	border-bottom: 0;
}

/* 数値の列（ファイル数・バイト数）を右寄せでそろえる。 */
.miweno-pc-article .wp-block-table td:is(:nth-child(2), :nth-child(3)):only-of-type,
.miweno-pc-article #verify ~ .wp-block-table td + td {
	font-variant-numeric: tabular-nums;
}

/* 図 ----------------------------------------------------------- */

.miweno-pc-figure {
	margin-inline: 0;
	padding: 1.25rem;
	border: 1px solid var(--pc-outline);
	border-radius: var(--pc-radius);
	background: #fff;
}

.miweno-pc-diagram {
	display: block;
	width: 100%;
	max-width: 30rem;
	height: auto;
	margin-inline: auto;
	font-family: var(--wp--preset--font-family--sans);
}

.miweno-pc-diagram rect { fill: #fff; stroke: #8a8f99; stroke-width: 1.25; }
.miweno-pc-diagram text { fill: var(--pc-ink); }
.miweno-pc-diagram .lane { fill: var(--pc-accent); font-size: 15px; font-weight: 700; letter-spacing: 0.04em; }
.miweno-pc-diagram line { stroke: #5b6270; stroke-width: 1.5; }
.miweno-pc-diagram line.bad { stroke: var(--pc-alert); stroke-dasharray: 4 3; }
.miweno-pc-diagram .bad rect { fill: var(--pc-alert-bg); stroke: var(--pc-alert); stroke-width: 2; }
.miweno-pc-diagram .bad text { fill: var(--pc-alert); font-weight: 700; }
.miweno-pc-diagram .ok rect { fill: var(--pc-accent-soft); stroke: var(--pc-accent); }
.miweno-pc-diagram .dim rect { fill: var(--pc-surface); stroke: #b4b7bd; stroke-dasharray: 4 3; }
.miweno-pc-diagram .dim text { fill: var(--pc-ink-soft); }

.miweno-pc-figure figcaption {
	margin-block-start: 1rem;
	color: var(--pc-ink-soft);
	font-size: 0.875rem;
	line-height: 1.75;
}

/* 詳細（FAQ） ---------------------------------------------------- */

.miweno-pc-article .wp-block-details {
	padding: 0.85rem 1.15rem;
	border: 1px solid var(--pc-outline);
	border-radius: var(--pc-radius);
}

.miweno-pc-article .wp-block-details + .wp-block-details {
	margin-block-start: 0.6rem;
}

.miweno-pc-article .wp-block-details summary {
	cursor: pointer;
	font-weight: 700;
	line-height: 1.6;
}

.miweno-pc-article .wp-block-details[open] summary {
	margin-block-end: 0.5rem;
}

/* ダウンロード --------------------------------------------------- */

.miweno-pc-download {
	padding: 1.5rem;
	border: 1px solid var(--pc-line);
	border-radius: 14px;
	background: var(--pc-surface);
}

.miweno-pc-download__title {
	font-size: 1.125rem;
}

.miweno-pc-download .wp-block-table td:first-child,
.miweno-pc-download .wp-block-table th {
	width: 9rem;
	color: var(--pc-ink-soft);
	font-weight: 600;
	font-size: 0.875rem;
}

.miweno-pc-download .wp-block-table td {
	font-weight: 400 !important;
}

/* 一覧ページのカード ---------------------------------------------- */

.miweno-pc-card {
	padding: 1.4rem 1.5rem;
}

.miweno-pc-card > * {
	margin-block: 0;
}

.miweno-pc-card > * + * {
	margin-block-start: 0.5rem;
}

.miweno-pc-card__num {
	color: var(--pc-accent);
	font-size: 0.8125rem;
	font-weight: 700;
	letter-spacing: 0.08em;
}

.miweno-pc-article h3.miweno-pc-card__title {
	margin-block-start: 0.35rem;
	font-size: 1.15rem;
	line-height: 1.55;
}

.miweno-pc-card__title a {
	color: inherit !important;
	text-decoration: none;
}

.miweno-pc-card__title a::after {
	content: "";
	position: absolute;
	inset: 0;
}

.miweno-pc-card__desc {
	color: var(--pc-ink-soft);
	font-size: 0.9375rem;
	line-height: 1.75;
}

.miweno-pc-fineprint {
	color: var(--pc-muted);
	font-size: 0.8125rem;
	line-height: 1.75;
}

/* タブレット・スマートフォン -------------------------------------------- */

@media (max-width: 781px) {
	.miweno-pc-article .miweno-pc-stats {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.miweno-pc-toc ol {
		columns: 1;
	}
}

@media (max-width: 480px) {
	.miweno-pc-article {
		font-size: 1rem;
	}

	.miweno-pc-article.is-lang-en {
		font-size: 1.0625rem;
	}

	.miweno-pc-toc,
	.miweno-pc-download {
		padding: 1rem 1.1rem;
	}

	.miweno-pc-figure {
		padding: 0.75rem;
	}

	.miweno-pc-article .wp-block-table table {
		font-size: 0.875rem;
	}

	.miweno-pc-article .wp-block-table :is(th, td) {
		padding: 0.5rem 0.5rem;
	}

	/* 2列の表（エラー一覧・比較・ダウンロード情報）は、スマートフォンでは縦に積む。 */
	.miweno-pc-article .wp-block-table tr:has(> :nth-child(2):last-child) > * {
		display: block;
		width: auto !important;
	}

	.miweno-pc-article .wp-block-table tbody tr:has(> :nth-child(2):last-child) > :first-child {
		padding-block-end: 0.1rem;
		border-bottom: 0;
	}

	.miweno-pc-article .wp-block-table thead tr:has(> :nth-child(2):last-child) {
		display: none; /* 見出し行は積むと意味がないので隠す（各行の1つ目が見出しの役割） */
	}

	.miweno-pc-article pre.wp-block-code {
		padding: 0.85rem 0.9rem;
		font-size: 0.8125rem;
	}
}

@media (prefers-reduced-motion: no-preference) {
	html:has(.miweno-pc-article) {
		scroll-behavior: smooth;
	}
}