/* =========================================================
   Chaovisual Gallery — 目錄（TOC）前台樣式

   兩種型態，同一份 HTML：
     ‧ 窄螢幕（含平板）：文章流裡的可摺疊清單（<details>）。
     ‧ 寬螢幕（1400px 起）：浮到文章左側留白處的固定欄，
       跟著捲動並高亮目前章節。

   視覺沿用 1.24.0 之後的「細線」語彙：不畫卡片、不上底色，
   只用一條 1px 的線把清單與內文分開。金色只用在「目前章節」，
   符合佈景主題的用色政策（金色＝互動或狀態，不做裝飾）。
   ========================================================= */

/* ---------------------------------------------------------
   錨點落點
   固定頁首會蓋住跳過去的標題，這裡把落點往下推。
   只在有目錄的頁面載入這支 CSS，所以不影響其他頁面。
   --------------------------------------------------------- */
h2[id],
h3[id],
h4[id] {
	scroll-margin-top: 96px;
}

/* ---------------------------------------------------------
   基本型態：文章流裡的可摺疊清單
   --------------------------------------------------------- */
.cv-toc {
	margin: 0 0 clamp(28px, 4vw, 44px);
	font-family: var(--font-body, inherit);
}

.cv-toc-box {
	border-top: 1px solid var(--line, rgba(255, 255, 255, .08));
	border-bottom: 1px solid var(--line, rgba(255, 255, 255, .08));
}

.cv-toc-sum {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	padding: 14px 2px;
	cursor: pointer;
	list-style: none;
	color: var(--muted, #8a8a92);
	transition: color .3s var(--ease, cubic-bezier(.22, .61, .36, 1));
}

.cv-toc-sum::-webkit-details-marker { display: none; }
.cv-toc-sum:hover { color: var(--ink, #f4f4f2); }

.cv-toc-title {
	font-size: 11px;
	font-weight: 500;
	letter-spacing: .18em;
	text-transform: uppercase;
}

/* 摺疊指示：一個純 CSS 的箭頭，不用字元也不用圖檔。 */
.cv-toc-caret {
	width: 8px;
	height: 8px;
	flex: none;
	border-right: 1px solid currentColor;
	border-bottom: 1px solid currentColor;
	transform: rotate(45deg) translate(-2px, -2px);
	transition: transform .3s var(--ease, cubic-bezier(.22, .61, .36, 1));
}

.cv-toc-box[open] > .cv-toc-sum .cv-toc-caret {
	transform: rotate(-135deg) translate(-2px, -2px);
}

/* ---------------------------------------------------------
   清單
   --------------------------------------------------------- */
.cv-toc-list {
	list-style: none;
	margin: 0;
	padding: 2px 0 16px;
	counter-reset: cvtoc;
}

.cv-toc-i {
	margin: 0;
	padding: 0;
	counter-increment: cvtoc;
}

.cv-toc-a {
	display: block;
	position: relative;
	padding: 7px 0 7px 14px;
	border-left: 1px solid var(--line, rgba(255, 255, 255, .08));
	color: var(--muted, #8a8a92);
	font-size: 13.5px;
	line-height: 1.5;
	text-decoration: none;
	transition: color .3s var(--ease, cubic-bezier(.22, .61, .36, 1)),
	            border-color .3s var(--ease, cubic-bezier(.22, .61, .36, 1));
}

.cv-toc-a:hover,
.cv-toc-a:focus-visible {
	color: var(--ink, #f4f4f2);
	border-left-color: rgba(255, 255, 255, .28);
}

/* 目前讀到的章節。金色在這裡是「狀態」而不是裝飾，符合用色政策。 */
.cv-toc-i.is-current > .cv-toc-a {
	color: var(--ink, #f4f4f2);
	border-left-color: var(--accent, #c9a35b);
}

/* 階層縮排 */
.cv-toc-i.is-l3 > .cv-toc-a { padding-left: 28px; font-size: 12.5px; }
.cv-toc-i.is-l4 > .cv-toc-a { padding-left: 42px; font-size: 12.5px; }

/* 編號 */
.cv-toc.is-numbered .cv-toc-a::before {
	content: counter(cvtoc, decimal-leading-zero);
	margin-right: 8px;
	font-size: 10.5px;
	letter-spacing: .08em;
	color: var(--muted, #8a8a92);
	font-variant-numeric: tabular-nums;
}

/* ---------------------------------------------------------
   寬螢幕：左側固定欄

   作法：float:left ＋ 一個等於「欄寬＋間距」的負左邊界，
   讓浮動元素的邊界盒整個落在內文欄左邊，內文就不會繞排。
   選擇器刻意寫成 .cv-toc.is-rail（權重 0,2,0），才蓋得過
   佈景主題的 .page-body > *{margin-left:auto;margin-right:auto}（0,1,0）。

   1400px 才啟用：再窄一點，內文欄左邊的留白放不下 206px 的欄位。

   註（1.13.2）：全站斷點已經收斂成 480／640／760／900／1024／1200 一組，
   這裡是刻意的例外，理由就是上面那一句——它不是「哪個尺寸看起來順」的選擇，
   而是「206px 的欄位放不放得下」的算術。移到 1200 會讓目錄欄疊到內文上。
   --------------------------------------------------------- */
@media (min-width: 1400px) {

	.cv-toc.is-rail {
		float: left;
		position: sticky;
		top: 104px;
		width: 206px;
		margin: 0 0 24px calc(-1 * (206px + 34px));
		max-height: calc(100dvh - 168px);
		overflow-y: auto;
		overscroll-behavior: contain;
	}

	.cv-toc.is-rail .cv-toc-box {
		border: 0;
	}

	/* 固定欄一律展開，點標題不該把它收起來。 */
	.cv-toc.is-rail .cv-toc-sum {
		pointer-events: none;
		padding: 0 0 12px;
		border-bottom: 1px solid var(--line, rgba(255, 255, 255, .08));
	}

	.cv-toc.is-rail .cv-toc-caret { display: none; }

	.cv-toc.is-rail .cv-toc-list { padding-top: 10px; padding-bottom: 0; }

	.cv-toc.is-rail .cv-toc-a { font-size: 13px; }

	/* 捲動條在深色底上預設很亮，收斂一下。 */
	.cv-toc.is-rail { scrollbar-width: thin; scrollbar-color: rgba(255, 255, 255, .18) transparent; }
	.cv-toc.is-rail::-webkit-scrollbar { width: 3px; }
	.cv-toc.is-rail::-webkit-scrollbar-thumb { background: rgba(255, 255, 255, .18); }
}

/* ---------------------------------------------------------
   無障礙與偏好設定
   --------------------------------------------------------- */
.cv-toc-a:focus-visible {
	outline: 1px solid var(--accent, #c9a35b);
	outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
	.cv-toc-sum,
	.cv-toc-caret,
	.cv-toc-a {
		transition: none;
	}
}