/*
 * 网页剪藏来源卡片。
 *
 * 只在 knowledge_items 有对应 web_clips 记录时渲染（KnowledgeItemResponse.source 非 null）。
 *
 * ⚠️ 颜色只能用 reading-theme.css 里**确实存在**的语义变量。
 * 这份文件第一版写的是 var(--kb-border-color, #e5e7eb) 这类名字 —— 六个变量名全是编的，
 * 于是六个浅色兜底值永远生效，暗色主题下整张卡片白底白框，比正文还亮。
 * 而且它「看起来」是走变量的，注释里还写着「不要硬编码浅灰」，很难一眼看出问题。
 * 加变量前先 `grep -- "--你要用的名字:" css/reading-theme.css` 确认它真的被定义过。
 *
 * 本文件用到的都在 reading-theme.css 的 :root 与 [data-theme="dark"] 两处成对定义：
 *   --kb-paper-soft / --kb-paper-panel / --kb-paper-line / --kb-ink-soft / --kb-ink-muted
 *   --color-primary（reading-theme.css 里映射到 --kb-accent；它在 variables.css 里是蓝色，
 *   但 index.html 把 reading-theme.css 放在 variables.css 之后加载，所以暖色那份生效）
 *
 * 注意 css/theme.css **没有被 index.html 引入**，别拿它里面的变量当数。
 */
.clip-source {
    margin: 10px 0 14px;
    padding: 10px 12px;
    border: 1px solid var(--kb-paper-line);
    border-radius: 8px;
    background: var(--kb-paper-soft);
    font-size: 13px;
    line-height: 1.75;
    /* 用 ink-soft 而不是更淡的 ink-muted：13px 正文配 ink-muted 在浅色纸面上
       对比度只有 3.8，达不到 WCAG AA 的 4.5。换成 ink-soft 后浅色 7.4、暗色 7.2 */
    color: var(--kb-ink-soft);
}

.clip-source-head {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 6px;
    margin-bottom: 4px;
}

/* 徽标比卡片底色更靠近纸面，才能在卡片里再分出一层 */
.clip-source-badge {
    display: inline-block;
    padding: 1px 7px;
    border-radius: 999px;
    border: 1px solid var(--kb-paper-line);
    background: var(--kb-paper-panel);
    font-size: 11px;
    color: var(--kb-ink-soft);
}

.clip-source-link {
    color: var(--color-primary);
    word-break: break-all;
}

.clip-source-link:hover {
    text-decoration: underline;
}

/*
 * 外链图片提示。归档失败的图片在阅读时仍会向原站发请求，用户有权知道。
 *
 * 这里是全文件唯一写死颜色的地方，因为项目里**没有**主题感知的警示色令牌：
 * variables.css 的 --color-warning (#F39C12) 只在 :root 定义一次、暗色下不变，
 * 压在浅色纸面 (--kb-paper-soft #f7f2e7) 上对比度只有 2 出头，正文字号根本读不清。
 * 所以按本项目既有的 [data-theme="dark"] 覆盖写法显式给两套值。
 * 将来若 reading-theme.css 补了成对的警示色令牌，这两条应该换成那个令牌。
 */
.clip-source-warn {
    margin-top: 4px;
    color: #8a5a00;
}

[data-theme="dark"] .clip-source-warn {
    color: #e0b562;
}

@media (max-width: 1023px) {
    .clip-source {
        margin: 8px 12px 12px;
    }
}