/**
 * 后台设置页：代码配色预览区布局
 *
 * 🔴 这个文件**只负责把预览框摆好**，绝不改代码块的外观。
 *    代码块的一切外观（背景、边框、token 颜色）都来自两个前台文件：
 *      assets/hljs/styles/<配色>.min.css   → token 颜色
 *      assets/css/highlight.css            → 卡片骨架
 *    在这里另写一套样式会让"预览"和"前台"不一致，比没有预览更误导人。
 *
 * 唯一必须在这里做的是**作用域隔离**：后台页面没有正文容器
 * （.k-main .details .article .content），highlight.css 里大量规则带这个前缀，
 * 单看 .cb 的规则在后台也能生效（那些规则都写了无前缀的兜底选择器），
 * 但行号槽之类的尺寸依赖父级字号，所以这里要显式给一个正常的正文环境。
 */

.yang-hl-preview {
	margin: 12px 0 4px;
	padding: 14px 16px 10px;
	border: 1px solid #dcdcde;
	border-radius: 6px;
	background: #fff;
	max-width: 860px;
	box-sizing: border-box;
}

.yang-hl-preview-head {
	display: flex;
	align-items: baseline;
	flex-wrap: wrap;
	gap: 8px;
	margin-bottom: 10px;
	padding-bottom: 8px;
	border-bottom: 1px solid #f0f0f1;
}

.yang-hl-preview-title {
	font-size: 13px;
	font-weight: 600;
	color: #1d2327;
}

.yang-hl-preview-name {
	font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
	font-size: 12px;
	font-weight: 600;
	color: #2271b1;
	padding: 1px 7px;
	border-radius: 4px;
	background: #f0f6fc;
	border: 1px solid #c5d9ed;
}

.yang-hl-preview-hint {
	font-size: 12px;
	color: #646970;
}

.yang-hl-preview-note {
	margin: 8px 0 0;
	font-size: 12px;
	color: #646970;
	line-height: 1.6;
}

/* 预览里的卡片：
 * ① 给一个明确的字号基准（后台正文字号是 13px，代码用 12.5px 与前台一致）
 * ② 限制高度，样例只有 13 行不需要滚动，但要防止窄屏下溢出 */
.yang-hl-preview .cb {
	margin: 0;
}

.yang-hl-preview .cb pre,
.yang-hl-preview .cb code {
	font-size: 12.5px;
	line-height: 1.62;
}

/* 复制按钮在预览里没有实际功能（disabled），视觉上弱化，避免用户以为能点 */
.yang-hl-preview .cb-copy[disabled] {
	opacity: .45;
	cursor: default;
	pointer-events: none;
}

/* 后台配色切换时，卡片边框跟着深浅走，避免"深色代码 + 白边框"的割裂感。
 * 这里只调边框和顶栏，token 颜色一律交给配色 CSS。 */
.yang-hl-preview .cb[data-kind="dark"] {
	border-color: #3a3f46;
}

.yang-hl-preview .cb[data-kind="dark"] .cb-bar {
	background: #21262d;
	border-bottom-color: #3a3f46;
}

.yang-hl-preview .cb[data-kind="dark"] .cb-lang {
	color: #adbac7;
	background: #2d333b;
	border-color: #444c56;
}

.yang-hl-preview .cb[data-kind="dark"] .cb-body {
	background: #22272e;
}

@media screen and (max-width: 782px) {
	.yang-hl-preview {
		padding: 10px 10px 8px;
	}
	.yang-hl-preview-hint {
		flex-basis: 100%;
	}
}

/* ── 上色失败的可视标记 ──────────────────────────────────
 *
 * 3.2.44 的教训：预览没上色时，画面上和"某套配色本来就很朴素"
 * 完全无法区分。用户在后台看到单色代码，只能猜是配色问题还是坏了。
 * ⇒ 上色失败时打一个 data 标记，这里给一道醒目的虚线框，
 *   让"坏了"和"配色就这样"在视觉上立刻分开。
 *
 * 判据：这是**降级提示**，不是正常态。所以颜色用后台的警告橙
 * （#dba617），不引入新色值。 */
.yang-hl-preview .cb[data-hl-failed="1"] {
	outline: 2px dashed #dba617;
	outline-offset: 2px;
}

.yang-hl-preview .cb[data-hl-failed="1"] .cb-bar::after {
	content: "预览未能上色，请查看浏览器控制台";
	margin-left: auto;
	padding-left: 8px;
	font-size: 11px;
	color: #dba617;
	white-space: nowrap;
}