/**
 * 無料版プラグインのドキュメント（swch_doc）専用スタイル。
 *
 * 本文レイアウト（.swch-guide-*）と図版（.swch-guide-figure / .swch-lp-figph）は
 * 販売ガイドと共通なので product.css をそのまま使う。ここは差分だけ:
 * 言語スイッチャー / 英語ページの注記 / 入れ子目次 / 一覧ページ。
 *
 * デザイントークン（--swch-*）は product.css の :root で定義済み。
 *
 * @package swell-child
 */

/* --------------------------------------------------------------------------
   言語スイッチャー
   -------------------------------------------------------------------------- */

.swch-doc-langswitch {
	display: flex;
	justify-content: flex-end;
	gap: 4px;
	margin: 0 0 20px;
}

.swch-doc-langswitch a {
	padding: 6px 14px;
	border: 1px solid var(--swch-border);
	border-radius: 999px;
	font-size: 0.8125rem;
	font-weight: 500;
	line-height: 1.4;
	color: var(--swch-text-secondary);
	text-decoration: none;
	background: var(--swch-white);
	transition: color var(--swch-transition), border-color var(--swch-transition), background var(--swch-transition);
}

.swch-doc-langswitch a:hover {
	color: var(--swch-accent);
	border-color: var(--swch-accent);
}

.swch-doc-langswitch a[aria-current="page"] {
	color: var(--swch-white);
	background: var(--swch-accent);
	border-color: var(--swch-accent);
	cursor: default;
}

/* --------------------------------------------------------------------------
   ヘッダー（無料版バッジ・リード）
   -------------------------------------------------------------------------- */

.swch-doc-badge {
	display: inline-block;
	margin-left: 10px;
	padding: 3px 10px;
	border-radius: 999px;
	font-size: 0.6875rem;
	font-weight: 700;
	letter-spacing: .04em;
	color: var(--swch-accent);
	background: var(--swch-accent-light);
	vertical-align: middle;
}

/* --------------------------------------------------------------------------
   注記ブロック
   （英語ページでは「ここは日本語サイトの中の英語ドキュメント」であることと、
     英語だけで完結できる出口を先に提示する）
   -------------------------------------------------------------------------- */

.swch-doc-note {
	margin: 0 0 32px;
	padding: 16px 20px;
	border: 1px solid var(--swch-border);
	border-left: 3px solid var(--swch-accent);
	border-radius: var(--swch-radius-sm);
	background: var(--swch-bg);
}

.swch-doc-note p {
	margin: 0;
	font-size: 0.875rem;
	line-height: 1.8;
	color: var(--swch-text-secondary);
}

.swch-doc-links {
	display: flex;
	flex-wrap: wrap;
	gap: 8px 20px;
	margin: 12px 0 0;
	padding: 0;
	list-style: none;
	font-size: 0.875rem;
}

.swch-doc-links li { margin: 0; }

.swch-doc-links a {
	color: var(--swch-accent);
	text-decoration: none;
	font-weight: 500;
}

.swch-doc-links a:hover { text-decoration: underline; }

/* --------------------------------------------------------------------------
   入れ子目次（h2 + h3）
   ルートの <ol> は .swch-guide-toc-list を保持しているため、
   product.css の a のレール（margin-left:-13px / border-left）は
   入れ子の <a> にもそのまま効く。ここではインデントと調子だけ変える。
   -------------------------------------------------------------------------- */

.swch-doc-toc-sub {
	list-style: none;
	margin: 0;
	padding: 0;
}

.swch-doc-toc-sub a {
	padding-top: 4px;
	padding-bottom: 4px;
	padding-left: 26px;
	font-size: 0.9375em;
	color: var(--swch-text-muted);
}

/* アンカー移動時、固定ヘッダーに h3 が隠れないための余白
   （product.css の h2 版と揃える）。 */
.swch-guide-doc h3 { scroll-margin-top: 88px; }

/* --------------------------------------------------------------------------
   英語ページの本文
   欧文は同じ字数でも行が長く見えるため、行長と行間を詰める。
   -------------------------------------------------------------------------- */

.swch-doc-lang-en .swch-guide-doc {
	font-size: 0.9375rem;
	line-height: 1.75;
}

.swch-doc-lang-en .swch-guide-doc code,
.swch-doc-lang-en .swch-guide-doc pre { font-size: 0.85em; }

/* --------------------------------------------------------------------------
   フッター導線
   -------------------------------------------------------------------------- */

.swch-doc-foot {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
	margin-top: 56px;
	padding-top: 28px;
	border-top: 1px solid var(--swch-border-light);
}

.swch-doc-foot-note {
	flex-basis: 100%;
	margin: 4px 0 0;
	font-size: 0.8125rem;
	color: var(--swch-text-muted);
}

/* --------------------------------------------------------------------------
   一覧（/docs/）
   -------------------------------------------------------------------------- */

.swch-doc-archive {
	max-width: 880px;
	margin: 0 auto;
	padding: 56px 20px 88px;
}

.swch-doc-archive-lead {
	margin: 12px 0 40px;
	color: var(--swch-text-secondary);
	line-height: 1.9;
}

.swch-doc-list {
	display: grid;
	gap: 16px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.swch-doc-card {
	padding: 24px;
	border: 1px solid var(--swch-border);
	border-radius: var(--swch-radius);
	background: var(--swch-white);
	box-shadow: var(--swch-shadow-card);
	transition: box-shadow var(--swch-transition), border-color var(--swch-transition);
}

.swch-doc-card:hover {
	border-color: var(--swch-accent);
	box-shadow: var(--swch-shadow-card-hover);
}

.swch-doc-card-title {
	margin: 0 0 8px;
	font-size: 1.0625rem;
	font-weight: 700;
	line-height: 1.5;
}

.swch-doc-card-title a {
	color: var(--swch-text);
	text-decoration: none;
}

.swch-doc-card-title a:hover { color: var(--swch-accent); }

.swch-doc-card-excerpt {
	margin: 0 0 14px;
	font-size: 0.875rem;
	line-height: 1.8;
	color: var(--swch-text-secondary);
}

.swch-doc-card-langs {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin: 0;
	padding: 0;
	list-style: none;
	font-size: 0.8125rem;
}

.swch-doc-card-langs a {
	padding: 4px 12px;
	border: 1px solid var(--swch-border);
	border-radius: 999px;
	color: var(--swch-text-secondary);
	text-decoration: none;
	transition: color var(--swch-transition), border-color var(--swch-transition);
}

.swch-doc-card-langs a:hover {
	color: var(--swch-accent);
	border-color: var(--swch-accent);
}

@media (max-width: 600px) {
	.swch-doc-langswitch { justify-content: flex-start; }
	.swch-doc-archive { padding: 40px 16px 64px; }
}