/* =====================================================================
   全站深色 token — 規格 docs/superpowers/specs/2026-10-20-dark-theme.md
   html.jnc-dark 由 js/jnc-theme.js 在第一次繪製前加上。
   特異度 (0,1,1) 高於各頁 :root (0,1,0),所以各頁同名 token 一律被這裡蓋過、與載入順序無關。
   只放共用 token 與最基本的頁面底色;寫死的顏色由各頁 CSS 檔尾的「深色」區段處理。
   淺色時這個檔沒有任何作用(全部規則都在 html.jnc-dark 底下)。
   ===================================================================== */
/* 只在螢幕套用:列印/匯出 PDF 維持各頁淺色 token */
@media screen {
	html.jnc-dark {
		color-scheme: dark;

		/* 底色 / 面板 */
		--bg: #121418;
		--page: #121418;
		--surface: #22272f;
		--surface-2: #2a2f38;
		--raised: #2a2f38;
		--surface-raised: #2a2f38;
		--surface-hover: #30353f;

		/* 文字 / 框線 */
		--text: #e6e8eb;
		--muted: #9aa3ae;
		--line: #3a404a;
		--line-soft: #2a2f38;
		--border: #3a404a;
		--border-soft: #2a2f38;

		/* 主色:使用者要求深色主色調亮、與底色拉開(圖示鈕 var(--jacc-d, #5fa2e8) 疊淡底 var(--jacc-d-soft, #273a52));--acc-strong 為實心鈕 hover */
		--acc: var(--jacc-d, #5fa2e8);
		--acc-strong: var(--jacc-d-strong, #4a90dc);
		--acc-soft: var(--jacc-d-soft, #273a52);
		--acc-soft-2: var(--jacc-d-soft2, #2e4664);
		--accent: var(--jacc-d, #5fa2e8);
		--accent-strong: var(--jacc-d-strong, #4a90dc);
		--accent-soft: var(--jacc-d-soft, #273a52);

		/* 語意色 */
		--ok: #4cc27a;
		--ok-soft: #173326;
		--success: #4cc27a;
		--success-soft: #173326;
		--warn: #f0883e;
		--warn-soft: #3a2616;
		--danger: #f06262;
		--danger-soft: #3a1d21;
		--off: #7b828c;
		--off-soft: #2a2f38;
		--disabled: #7b828c;

		/* 輸入框(使用者 2026-10-21 選定:比卡片深一階,像凹進卡片的欄位) */
		--field-bg: #1a1d23;
		--field-line: #3a404a;

		/* 陰影 / 焦點 */
		--shadow: 0 4px 14px rgba(0, 0, 0, .45);
		--shadow-panel: 0 10px 30px rgba(0, 0, 0, .55);
		/* --focus 不在這裡定義:各頁有的當顏色(outline)、有的當 box-shadow,格式不一,由各頁自己的深色區段處理 */

		/* 設定頁系列(3_10 等)別名 */
		--settings-bg: #121418;
		--settings-surface: #22272f;
		--settings-surface-raised: #2a2f38;
		--settings-ink: #e6e8eb;
		--settings-muted: #9aa3ae;
		--settings-line: #3a404a;
		--settings-primary: var(--jacc-d, #5fa2e8);
		--settings-primary-hover: var(--jacc-d-strong, #4a90dc);
		--settings-primary-soft: var(--jacc-d-soft, #273a52);

		/* v2 系列別名 */
		--v2-text: #e6e8eb;
		--v2-muted: #9aa3ae;
		--v2-line: #3a404a;
		--v2-soft: var(--jacc-d-soft, #273a52);
		--v2-accent: var(--jacc-d, #5fa2e8);
		--v2-accent-dark: var(--jacc-d-strong, #4a90dc);
		--v2-warn: #f06262;
		--v2-warn-bg: #3a1d21;
		--v2-rec: #4cc27a;
		--v2-rec-bg: #173326;

		background-color: #121418;
		color: #e6e8eb;
	}

	html.jnc-dark body {
		background-color: #121418;
		color: #e6e8eb;
	}

	/* 捲軸:不寫 ::-webkit-scrollbar-* —— WebKit 只要樣式表裡有這類規則(即使深色選擇器不成立)就會改變捲軸佔位,
	   淺色 S_CB_Total 手機收合時分頁列少 18px。深色捲軸交給 color-scheme: dark。 */

	/* 勾選框/單選鈕(沒有 class 的原生控制項;有 class 的由各頁自己處理)。
	   使用者 2026-10-21 要求「勾選的框不明顯要全站看過」:原生/反相灰方塊在卡片上只有 ~1.7:1 → 改自畫:
	   未勾選 = 欄位底 + 1.5px #7b828c 框(對卡片 ~3.8:1);勾選 = 主色底 + 白勾(單選:主色框 + 主色圓點)。 */
	html.jnc-dark input[type=checkbox]:not([class]),
	html.jnc-dark input[type=radio]:not([class]) {
		-webkit-appearance: none;
		appearance: none;
		box-sizing: border-box;
		width: 16px;
		height: 16px;
		flex: none;
		vertical-align: -3px;
		border: 1.5px solid #7b828c;
		border-radius: 4px;
		background: var(--field-bg, #1a1d23) center / 80% 80% no-repeat;
		cursor: pointer;
	}
	html.jnc-dark input[type=radio]:not([class]) {
		border-radius: 50%;
	}
	html.jnc-dark input[type=checkbox]:not([class]):hover,
	html.jnc-dark input[type=radio]:not([class]):hover {
		border-color: var(--jacc-d-link, #8cc4f5);
	}
	html.jnc-dark input[type=checkbox]:not([class]):checked {
		border-color: var(--jacc-d, #5fa2e8);
		background-color: var(--jacc-d, #5fa2e8);
		background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='white' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3.5 8.4l3 3 6-6.4'/%3E%3C/svg%3E");
	}
	html.jnc-dark input[type=radio]:not([class]):checked {
		border-color: var(--jacc-d, #5fa2e8);
		background-image: radial-gradient(circle, var(--jacc-d, #5fa2e8) 0 45%, transparent 50%);
		background-size: 100% 100%;
	}
	html.jnc-dark input[type=checkbox]:not([class]):focus-visible,
	html.jnc-dark input[type=radio]:not([class]):focus-visible {
		outline: 2px solid var(--jacc-d-link, #8cc4f5);
		outline-offset: 1px;
	}
	html.jnc-dark input[type=checkbox]:not([class]):disabled,
	html.jnc-dark input[type=radio]:not([class]):disabled {
		opacity: .45;
		cursor: default;
	}
	/* 有 class 的原生勾選框:至少給主色 */
	html.jnc-dark input[type=checkbox],
	html.jnc-dark input[type=radio] {
		accent-color: var(--jacc-d, #5fa2e8);
	}

	/* iframe:外層 color-scheme 為 dark、內嵌文件為 light(圖表元件、沒引入 jnc-theme 的頁)時,瀏覽器會把 iframe 畫成不透明白底。
	   iframe 元素一律宣告 light → 淺色內嵌文件維持透明;深色內嵌頁自己有深色底,不受影響。 */
	html.jnc-dark iframe {
		color-scheme: light;
	}

	/* 選取反白 */
	html.jnc-dark ::selection { background: #3a5f88; color: #fff; }
}