/*
 * 兼容层 —— 给正文里「已有」的下载模块补样式。
 *
 * 分工（重要）：
 *   形态 B  .core-download-warp  插件自带 front.css，是完整设计且不依赖主题。
 *                               本文件**刻意不覆盖**它的布局/配色/列数/动效。
 *   形态 A  .file-download-box   子比自己的区块，没有插件管，由本文件补。
 *   两者都需 Zibll 工具类 + FontAwesome 图标，由本文件补。
 *
 * 加 .gl-prose 前缀限制作用范围，避免影响后台和主题自身组件。
 *
 * @package ChenShu
 * @since   0.1.0
 * @version 0.1.0
 *
 * Copyright (c) 2026 旧人
 * Licensed under GPL-2.0-or-later
 */


/* =========================================================================
   1. Zibll 工具类
   ========================================================================= */
.gl-prose .flex,
.gl-prose .flex0 {
	display: flex;
}

.gl-prose .ac {
	align-items: center;
}

.gl-prose .jc {
	justify-content: center;
}

.gl-prose .jsb {
	justify-content: space-between;
}

.gl-prose .flex1 { flex: 1; min-width: 0; }
.gl-prose .flex0 { flex: 0 0 auto; }

.gl-prose .mr3  { margin-right: 3px; }
.gl-prose .mr6  { margin-right: 6px; }
.gl-prose .mr10 { margin-right: 10px; }
.gl-prose .ml6  { margin-left: 6px; }
.gl-prose .ml10 { margin-left: 10px; }
.gl-prose .ml20 { margin-left: 20px; }
.gl-prose .mt6  { margin-top: 6px; }
.gl-prose .mt10 { margin-top: 10px; }
.gl-prose .mb10 { margin-bottom: 10px; }
.gl-prose .mb20 { margin-bottom: 20px; }

.gl-prose .em09 { font-size: 0.9em; }
.gl-prose .em12 { font-size: 1.2em; }
.gl-prose .muted-3-color { color: var(--gl-muted); }
.gl-prose .muted-2-color { color: var(--gl-text-soft); }

.gl-prose .muted-box {
	background: var(--gl-surface-2);
	border: 1px solid var(--gl-border);
	border-radius: var(--gl-radius);
}

.gl-prose .text-ellipsis-2 {
	display: -webkit-box;
	-webkit-line-clamp: 2;
	line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

.gl-prose .text-center { text-align: center; }
.gl-prose .float-right { float: right; }

.gl-prose .title-theme {
	padding-left: 0.7em;
	border-left: 4px solid var(--gl-accent);
}

/* Zibll 的通用按钮 */
.gl-prose .but {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.35em;
	padding: 0.3em 0.8em;
	background: var(--gl-accent);
	border: 0;
	border-radius: var(--gl-radius-sm, 4px);
	color: #fff;
	font-size: 0.92em;
	font-weight: 500;
	line-height: 1.7;
	vertical-align: middle;
	cursor: pointer;
	transition: 0.15s;
}

.gl-prose .but:hover {
	opacity: 0.88;
	color: #fff;
}

.gl-prose .but.c-blue,
.gl-prose .but.jb-blue { background: #2b7de1; }
.gl-prose .but.c-red,
.gl-prose .but.jb-red { background: #e5484d; }
.gl-prose .but.c-yellow,
.gl-prose .but.jb-yellow { background: #d97706; }
.gl-prose .but.c-green,
.gl-prose .but.jb-green { background: #16a34a; }
.gl-prose .but.c-purple { background: #7c3aed; }
.gl-prose .but.c-pink { background: #db2777; }
.gl-prose .but.padding-lg { padding: 0.5em 2em; }

.gl-prose .badg {
	display: inline-block;
	padding: 0.1em 0.5em;
	border-radius: var(--gl-radius-sm, 4px);
	background: var(--gl-accent-soft);
	color: var(--gl-accent);
	font-size: 0.8em;
	font-weight: 600;
	line-height: 1.7;
}

.gl-prose .alert {
	padding: 0.75em 1em;
	border-radius: var(--gl-radius);
	background: var(--gl-surface-2);
	border: 1px solid var(--gl-border);
}

/* =========================================================================
   2. 形态 A：子比原生下载区块 .file-download-box
   =========================================================================
   这个区块没有插件替它提供样式，所以由我们补。
   ========================================================================= */
.gl-prose .file-download-box {
	padding: 1rem 1.15rem;
	background: var(--gl-surface-2);
	border: 1px solid var(--gl-border);
	border-radius: var(--gl-radius);
}

.gl-prose .file-download-icon {
	display: grid;
	place-items: center;
	width: 38px;
	height: 38px;
	background: var(--gl-accent-soft);
	border-radius: var(--gl-radius-sm);
	color: var(--gl-accent);
}

.gl-prose .file-download-name {
	font-weight: 600;
	font-size: 0.95rem;
	line-height: 1.5;
}

.gl-prose .file-download-btn {
	white-space: nowrap;
}

/* =========================================================================
   3. 形态 B：core-download 插件
   =========================================================================
   插件的 front.css 已定义布局 / 配色 / 列数 / hover 动效 —— 这里不重复。
   只补它没覆盖的三处：
     a. --theme-color / --border-radius 变量兜底
        （插件 CSS 引用了这两个变量，它们原本由 Zibll 定义，换主题后会失效）
     b. .copy-key 复制按钮样式
        （插件只给了个 10×10 的空白背景图占位）
     c. 长资源名不撑破卡片
   ========================================================================= */
.gl-prose .core-download-warp {
	--theme-color: #67c23a;
	--border-radius: 10px;
}

.gl-prose .core-download-warp .copy-key {
	display: inline-block;
	width: auto;
	height: auto;
	min-width: 3.2em;
	padding: 0.05em 0.45em;
	background: var(--theme-color, #67c23a);
	border: 0;
	border-radius: 4px;
	color: #fff;
	font-size: 0.85em;
	font-style: normal;
	line-height: 1.7;
	text-align: center;
	cursor: pointer;
}

.gl-prose .core-download-warp .copy-key:hover {
	opacity: 0.85;
}

.gl-prose .core-download-warp .core-download-netdisk-icon {
	flex-shrink: 0;
}

.gl-prose .core-download-warp .resource-name {
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

/* =========================================================================
   4. FontAwesome 图标兜底
   =========================================================================
   换掉子比后不再加载 font-awesome.min.css（30 KB + 字体文件），
   正文里的 <i class="fa fa-xxx"> 会变成空白。用文字符号兜住常用图标。
   ========================================================================= */
.gl-prose i.fa,
.gl-prose i.far,
.gl-prose i.fas {
	display: inline-block;
	font-style: normal;
	font-family: inherit;
	line-height: 1;
	speak: never;
}

.gl-prose i.fa::before {
	display: inline-block;
	min-width: 1em;
	text-align: center;
}

.gl-prose .fa-download::before       { content: "\2913"; }
.gl-prose .fa-cloud-download::before { content: "\2913"; }
.gl-prose .fa-folder-open-o::before  { content: "\1F4C1"; }
.gl-prose .fa-folder-open::before    { content: "\1F4C2"; }
.gl-prose .fa-folder::before         { content: "\1F4C1"; }
.gl-prose .fa-file-o::before         { content: "\1F4C4"; }
.gl-prose .fa-map-marker::before     { content: "\1F4CD"; }
.gl-prose .fa-heart-o::before,
.gl-prose .fa-heart::before          { content: "\2661"; }
.gl-prose .fa-check::before          { content: "\2713"; }
.gl-prose .fa-long-arrow-left::before  { content: "\2190"; }
.gl-prose .fa-long-arrow-right::before { content: "\2192"; }
.gl-prose .fa-toggle-theme::before   { content: "\25D1"; }
.gl-prose .fa-link::before           { content: "\1F517"; }
.gl-prose .fa-clock-o::before        { content: "\1F550"; }
.gl-prose .fa-eye::before            { content: "\1F441"; }
.gl-prose .fa-comment-o::before      { content: "\1F4AC"; }
.gl-prose .fa-lock::before           { content: "\1F512"; }
.gl-prose .fa-unlock::before         { content: "\1F513"; }
.gl-prose .fa-info-circle::before    { content: "\2139"; }
.gl-prose .fa-exclamation-triangle::before { content: "\26A0"; }

/* =========================================================================
   5. 深色模式适配
   =========================================================================
   插件 front.css 有几处硬编码浅色值（#f0f0f0 / #f3f3f3 / #999999），
   深色背景下会突兀。这里只覆盖颜色，不动布局。
   ========================================================================= */
@media (prefers-color-scheme: dark) {
	.gl-prose .core-download-warp .core-download-item {
		border-color: var(--gl-border);
	}

	.gl-prose .core-download-warp .core-download-item-body {
		background-color: var(--gl-surface-2);
	}

	.gl-prose .core-download-warp .core-download-footer .copyright-str {
		color: var(--gl-muted);
	}

	/* 插件内联 SVG 里的白色填充在深色底上会消失 */
	.gl-prose .core-download-item-header svg [fill="#FFFFFF"],
	.gl-prose .core-download-item-header svg [style*="#FFFFFF"] {
		fill: var(--gl-text-soft) !important;
	}
}

/* =========================================================================
   6. 打印
   ========================================================================= */
@media print {
	.gl-prose .core-download-warp .download-title-right,
	.gl-prose .core-download-item-header svg {
		display: none !important;
	}
}