/* ============================================================
 * PureBlog 下载中心插件 · 前台样式
 * v1.2.3 配色同步改版：
 *   · 令牌全部继承主题 :root（--primary / --card / --soft / --border /
 *     --text / --radius …），站长在后台改主色、圆角、切换深浅色或换「页面效果」
 *     皮肤，下载组件自动跟随；兜底值写在 :where(:root)（特异性 0），
 *     仅当主题没定义该令牌时才生效。
 *   · 底色复合（可读性底线）—— --soft 在「透明 / 毛玻璃 / 苹果风 / 液态玻璃」
 *     皮肤下是 transparent 或极低不透明度，直接用会看不清文字。因此底色走
 *     「不透明的 --overlay-bg 打底 + --soft 叠一层色调」：既跟随皮肤配色，
 *     又保证任何页面效果下都有实底衬托文字。
 *   · 文字对比度 —— 正文用 --text-body，次要信息用 --text-muted，
 *     不再用 --text-light（浅灰在任何半透明底上都会糊）。
 *   · 已删除全部权限 / 付费相关的死样式（费用标签、扫码弹窗等）。
 * 深浅色（html[data-theme="dark"]）与站点共用 pb_theme cookie，全站同步。
 * ============================================================ */

/* ============ 设计令牌（特异性 0，主题永远优先） ============ */
:where(:root) {
    --pbd-primary: var(--primary, #475569);
    --pbd-primary-hover: var(--primary-hover, #334155);
    --pbd-primary-dark: var(--primary-dark, #1e293b);
    --pbd-primary-light: var(--primary-light, rgba(71, 85, 105, .1));
    --pbd-grad: var(--gradient, linear-gradient(135deg, #475569, #57534e));

    --pbd-bg: var(--bg, #f3f4f6);
    --pbd-card: var(--card, #ffffff);
    /* 不透明浮层底：皮肤把 --card / --soft 设为透明时靠它兜住文字对比度 */
    --pbd-overlay: var(--overlay-bg, var(--card, #ffffff));
    --pbd-soft: var(--soft, #f9fafb);

    --pbd-text: var(--text, #1f2937);
    --pbd-text-body: var(--text-body, #374151);
    --pbd-text-muted: var(--text-muted, #6b7280);
    --pbd-text-light: var(--text-light, #9ca3af);
    --pbd-border: var(--border, #e5e7eb);

    --pbd-shadow: var(--shadow-sm, 0 1px 3px rgba(0,0,0,.08));
    --pbd-shadow-md: var(--shadow-md, 0 4px 12px rgba(0,0,0,.1));

    --pbd-radius: var(--radius, 10px);
    --pbd-radius-sm: var(--radius-sm, 6px);

    /* 直连下载按钮的语义绿（全站唯一的非主题强调色，白字实底，任何皮肤下都可读） */
    --pbd-success: #15803d;         /* #16a34a 配白字只有 3.29:1，压深后 5.02:1 达标 */
    --pbd-success-hover: #14532d;
}

/* ============ 下载区块 ============ */
/* 正文内容框右上角浮动卡片：宽 520 固定，高度随资源数量自适应，最高 240；
   超过 240 的内容不滚动也不裁切，改为「上一页 / 下一页」翻页（见 JS） */
.pbd-download-wrap {
    display: flex;
    flex-direction: column;
    float: right;
    width: 520px;
    height: auto;
    max-height: 240px;
    max-width: 100%;
    margin: 8px 0 8px 8px;   /* 左侧 8px = 正文绕排文字与虚线框的间距 */
    padding: 10px 12px;
    border: 1px dashed var(--border, var(--pbd-border, #e5e7eb));
    border-radius: var(--radius, var(--pbd-radius, 10px));
    /* 不透明底 + 皮肤色调叠加：换任何页面效果都不会透出背景导致文字看不清 */
    background-color: var(--overlay-bg, var(--pbd-card, #ffffff));
    background-image: linear-gradient(
        0deg,
        var(--soft, var(--pbd-soft, #f9fafb)),
        var(--soft, var(--pbd-soft, #f9fafb))
    );
    font-size: .85rem;
    line-height: 1.5;
    color: var(--text-body, var(--pbd-text-body, #374151));
    box-sizing: border-box;
    overflow: hidden;
}

.pbd-download-header {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-shrink: 0;
    padding: 0 0 6px;
    background: none;
    color: var(--text, var(--pbd-text, #1f2937));
    font-weight: 700;
    font-size: .85rem;
}

.pbd-download-header .pbd-icon {
    width: 20px;
    height: 20px;
    fill: currentColor;
    flex-shrink: 0;
}

.pbd-download-header .pbd-count {
    margin-left: auto;
    font-size: .8rem;
    opacity: .85;
    font-weight: 400;
    color: var(--text-muted, var(--pbd-text-muted, #6b7280));
}

/* ============ 资源列表（固定框内不滚动，超出改为翻页） ============ */
.pbd-download-list {
    flex: 0 1 auto;      /* 不撑满：内容少时卡片自然变矮，放不下时才收缩并触发分页 */
    min-height: 0;
    padding: 0;
    overflow: hidden;
}

/* ============ 上一页 / 下一页 分页 ============ */
.pbd-download-pager {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-shrink: 0;
    margin-top: 6px;
    padding-top: 6px;
    border-top: 1px solid var(--border, var(--pbd-border, #e5e7eb));
}

.pbd-download-pager[hidden] {
    display: none;
}

.pbd-page-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 3px 10px;
    border: 1px solid var(--border, var(--pbd-border, #e5e7eb));
    border-radius: var(--pbd-radius-sm);
    background: var(--card, var(--pbd-card, #ffffff));
    color: var(--text-body, var(--pbd-text-body, #374151));
    font-size: .78rem;
    line-height: 1.4;
    cursor: pointer;
    transition: all .2s;
}

.pbd-page-btn:hover:not(:disabled) {
    /* 文字保持主题正文色，只换底与描边：避免暖色系主色当文字色时对比度不足 */
    border-color: var(--primary, var(--pbd-primary, #475569));
    background: var(--primary-light, var(--pbd-primary-light, rgba(71, 85, 105, .1)));
    color: var(--text, var(--pbd-text, #1f2937));
}

.pbd-page-btn:disabled {
    opacity: .45;
    cursor: not-allowed;
}

.pbd-page-num {
    flex: 1;
    text-align: center;
    font-size: .78rem;
    color: var(--text-muted, var(--pbd-text-muted, #6b7280));
}

/* ============ 资源条目 ============ */
.pbd-download-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 5px 0;
    border-radius: var(--pbd-radius-sm);
    flex-wrap: nowrap;
}

.pbd-download-item + .pbd-download-item {
    border-top: 1px solid var(--pbd-border);
}

.pbd-download-item:hover {
    background: var(--pbd-soft);
}

/* ============ 文件信息 ============ */
.pbd-file-info {
    flex: 1;
    min-width: 0;
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}

.pbd-file-name {
    font-weight: 500;
    color: var(--pbd-text);
    word-break: break-all;
    font-size: .9rem;
}

.pbd-file-size,
.pbd-file-count {
    font-size: .8rem;
    color: var(--text-muted, var(--pbd-text-muted, #6b7280));
    flex-shrink: 0;
}

/* 来源标签：底色取主题主色的浅色版，文字用主题正文色，换配色自动跟随 */
.pbd-file-source {
    display: inline-flex;
    align-items: center;
    padding: 2px 8px;
    border-radius: var(--pbd-radius-sm);
    font-size: .72rem;
    font-weight: 500;
    color: var(--text, var(--pbd-text, #1f2937));
    background: var(--primary-light, var(--pbd-primary-light, rgba(71, 85, 105, .1)));
    flex-shrink: 0;
}

/* ============ 操作按钮 ============ */
.pbd-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 5px 12px;
    border-radius: var(--pbd-radius-sm);
    border: 1px solid transparent;   /* 占位边框：让主色按钮描边时不改变尺寸 */
    font-size: .8rem;
    font-weight: 500;
    cursor: pointer;
    transition: all .2s;
    color: #fff;
    line-height: 1;
    white-space: nowrap;
}

.pbd-btn svg {
    width: 14px;
    height: 14px;
    fill: currentColor;
    flex-shrink: 0;
}

/* 组件是 JS 插进正文框里的，会被主题的 `.post-content-single a`（0,1,1）
   盖掉颜色并加上下划线（它把正文链接染成 --primary）。
   必须用更高特异性把按钮文字压回白色、去掉下划线 —— 否则按钮文字和主色底
   同色，等于完全看不见（锌灰 / 岩石 / 石墨三套尤其明显）。 */
.pbd-download-wrap a.pbd-btn,
.pbd-download-wrap a.pbd-btn:hover,
.pbd-download-wrap a.pbd-btn:visited,
.pbd-download-wrap a.pbd-btn:active {
    color: #fff;
    text-decoration: none;
}

.pbd-btn:disabled {
    opacity: .6;
    cursor: not-allowed;
}

/* 直连地址：语义绿（唯一非主题强调色，白字实底保证可读） */
.pbd-btn-download {
    background: var(--pbd-success);
}

.pbd-btn-download:hover:not(:disabled) {
    background: var(--pbd-success-hover);
}

/* 网盘地址：跟随 toneScheme，但实底必须用 --primary-dark + 白字。
   若直接用 --primary，锌灰 / 岩石 / 石墨这三套在深色模式下会反转成浅灰
   （#a1a1aa / #a8a29e / #94a3b8），白字对比度只剩 2.5:1，根本看不清；
   --primary-dark 在 10 套配色 × 明暗下都是深底，白字对比度 4.99 ~ 13:1 全部达标。 */
.pbd-btn-net {
    background: var(--primary-dark, var(--pbd-primary-dark, #1e293b));
    border-color: var(--primary, var(--pbd-primary, #475569));
}

.pbd-btn-net:hover {
    filter: brightness(.9);   /* 不用 --primary-hover：暖色系 hover 会变亮反而降低白字对比度 */
}

/* ============ 多地址平铺 ============ */
.pbd-download-item {
    flex-direction: column;
    align-items: stretch;
    gap: 4px;
}

.pbd-download-item .pbd-file-info {
    flex: none;
}

/* 地址行两列排布：单条占满整行，两条并排，三条起自动折行 —— 同样高度能多放内容 */
.pbd-link-list {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    gap: 5px;
}

.pbd-link-row {
    flex: 1 1 calc(50% - 4px);
    min-width: 0;
    box-sizing: border-box;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 4px 8px;
    border: 1px solid var(--border, var(--pbd-border, #e5e7eb));
    border-radius: var(--pbd-radius-sm);
    background: var(--card, var(--pbd-card, #ffffff));
    flex-wrap: wrap;
}

.pbd-link-info {
    flex: 1;
    min-width: 0;
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

.pbd-link-row .pbd-btn {
    flex-shrink: 0;
}

/* ============ 响应式 ============ */
/* 窄屏放不下 520 浮动卡：取消浮动与限高，回到整宽块（此时不再限高，完整展开、不分页） */
@media (max-width: 900px) {
    .pbd-download-wrap {
        float: none;
        width: auto;
        height: auto;
        max-height: none;
        margin: 0 0 18px;
    }

    .pbd-download-list {
        overflow: visible;
    }
}

@media (max-width: 640px) {
    /* 与 .post-copyright 的窄屏规格一致 */
    .pbd-download-wrap {
        margin: 0 18px 18px;
        padding: 14px 16px;
    }

    .pbd-download-header {
        padding: 0 0 8px;
        font-size: .85rem;
    }

    .pbd-download-item {
        flex-wrap: wrap;
        padding: 10px 0;
        gap: 8px;
    }

    .pbd-file-info {
        width: 100%;
        order: 1;
    }

    .pbd-link-list {
        flex-direction: column;
    }

    .pbd-link-row {
        flex-direction: column;
        align-items: stretch;
    }

    .pbd-link-row .pbd-btn {
        width: 100%;
        justify-content: center;
    }

    .pbd-btn {
        width: 100%;
        padding: 10px;
        font-size: .9rem;
    }
}