/* ============================================================
 * Kratos-plus · 短代码/特色页公共组件样式（components.css）
 * ------------------------------------------------------------
 * 统一类词表（kr-*），承接"标题卡 / 主体卡 / 图标胶囊 / 卡片 /
 * 分隔线 / 按钮 / 药丸 / 小圆点"的公共外观，取代此前散落在各短代码
 * PHP 内联 <style> 里、并在每个皮肤逐命名空间重复覆盖的样板。
 *
 *   .kr-hd          组件顶部标题卡外壳
 *   .kr-body        组件主体卡外壳（包着轴线/网格/列表：ktl-body/kph-body/kfl-section/ktc-body）
 *   .kr-hd-title    大标题文字
 *   .kr-hd-sub      副标题
 *   .kr-hd-divider  标题下分隔线
 *   .kr-ico         图标胶囊（所有 *-title-icon / *-header-icon / *-section-icon / *-stat-icon / *-heart-icon / *-item-icon）
 *   .kr-card        内容卡片（khs-card/kff-card/ktc-row/kfl-item/kas-section/kft-content/ksl-card）
 *   .kr-btn         按钮（kfl-submit/kfl-copy-btn）
 *   .kr-pill        药丸/计数徽章（kas-pill/kfl-section-count/kfl-visitor-link/kph-year-tag）
 *   .kr-dot         小圆点（ktl-*-dot/ktc-dot/kfl-probe-dot）
 *
 * 新增短代码/特色页只要：markup 挂 kr-* 公共类 + 私有变量走 --khs-* 命名空间 +
 * 把根容器 class 加进下面两处 :is() 别名列表，即可自动继承全部皮肤，
 * 无需改任何皮肤文件（.kratos-search / .kratos-comment-geo / .kratos-dashboard
 * / .kratos-cmdk / .kratos-lpv 均按此方式接入）。
 *
 * 加载顺序：style.css → components.css → 皮肤（kratos-weekday-skin，依赖 kratos-components）。
 * 详见 docs/css-refactor-plan.md。
 *
 * 阶段说明：
 *   - 阶段 1（当前）：markup 已附加 kr-* 类，本文件暂不写任何可视规则，
 *     以保证"零视觉变化"（此时没有任何 CSS 命中 kr-*，外观完全由既有私有类决定）。
 *   - 阶段 3：把各短代码 PHP 内联的"共享默认外观（亮色 + html[data-theme="dark"] 暗色）"
 *     下沉到本文件，并移除被取代的内联规则。
 * ============================================================ */

/* ------------------------------------------------------------
 * 全站字体令牌（跨皮肤统一命名，跨平台阅读友好）
 * ------------------------------------------------------------
 * 三个字体令牌供皮肤覆盖 & 供「自定义字体」一处改全站生效：
 *   --kr-skin-font       正文/主内容字体（承担绝大多数阅读文本）
 *   --kr-skin-font-head  标题/装饰字体（大标题、封面标题、卡片主标题）
 *   --kr-skin-font-ui    UI/元信息字体（时间、按钮、徽章、meta 小字）
 * 默认值走"苹方 + 微软雅黑 + Segoe UI"跨平台无衬线栈，Mac / Windows
 * 两端首字都是系统默认 UI 字，行内 Latin/中文均能保持一致的现代感。
 * 皮肤如需接手正文/标题字体，只需在自己的根规则里覆盖这三个令牌，
 * 不必再逐 selector 声明 font-family；「自定义字体」也统一改这三个变量，
 * 达成"一处开关全站覆盖"。
 * ------------------------------------------------------------ */
:root {
    --kr-skin-font:      var(--kr-user-font,) Verdana, -apple-system, BlinkMacSystemFont, "Segoe UI", "Helvetica Neue", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Noto Sans CJK SC", sans-serif var(--kr-user-font-fallback,);
    --kr-skin-font-head: var(--kr-user-font,) Verdana, -apple-system, BlinkMacSystemFont, "Segoe UI", "Helvetica Neue", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Noto Sans CJK SC", sans-serif var(--kr-user-font-fallback,);
    --kr-skin-font-ui:   var(--kr-user-font,) Verdana, -apple-system, BlinkMacSystemFont, "Segoe UI", "Helvetica Neue", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Noto Sans CJK SC", sans-serif var(--kr-user-font-fallback,);
    --kr-skin-font-num:  ui-monospace, "SF Mono", Menlo, Consolas, "Cascadia Mono", "Roboto Mono", monospace;
}


/* ------------------------------------------------------------
 * 皮肤关闭态（<html> 无 data-weekday-skin 属性）默认外观
 * ------------------------------------------------------------
 * 皮肤开启时 <html data-weekday-skin="..."> 由各皮肤文件接管卡片形态，
 * 故此段用 :not([data-weekday-skin]) 锁定"仅皮肤关闭态"，不影响任何皮肤。
 * data-theme（亮/暗）是另一个独立属性，本段亮暗通用。
 * ------------------------------------------------------------ */

/* 卡片元素统一直角（标题卡 / 主体卡 / 内容卡） */
html:not([data-weekday-skin]) :is(.kr-hd, .kr-body, .kr-card) {
    border-radius: 0;
}

body {
    font-variant-numeric: slashed-zero;
    font-feature-settings: "ss02", "zero";
}

/* ------------------------------------------------------------
 * 短代码「命名空间变量 → 皮肤令牌」公共别名层
 * ------------------------------------------------------------
 * 此前每个皮肤都要为每个短代码重复一遍「私有变量映射到 --kr-skin-*」的样板
 * （9 个皮肤 × 每命名空间十余行）。这些映射在各皮肤间字节级一致，属于纯重复，
 * 故上收到本文件一次。皮肤只需定义 --kr-skin-* / --kr-* 的取值即可。
 *
 * 作用域 html[data-weekday-skin]：仅在任一皮肤激活时生效；皮肤关闭态
 * （无该属性）不命中，短代码回落到各自 PHP 内联默认值，与重构前一致。
 * 与皮肤内同名规则同特异性 (0,3,1)，且本文件先于皮肤加载，故皮肤如需
 * 个性化（如 retro 的强调色对调）只要再写一条即可覆盖本层。
 * ------------------------------------------------------------ */

/* 归档 kas：亮色 —— 多数皮肤的通用映射（retro 在自身文件内覆盖强调色三行） */
html[data-weekday-skin]:not([data-theme="dark"]) .kratos-archives-shortcode {
    --kas-bg-1: var(--kr-skin-bg) !important;
    --kas-bg-2: var(--kr-skin-bg) !important;
    --kas-bg-3: var(--kr-skin-bg) !important;
    --kas-fg: var(--kr-skin-text) !important;
    --kas-fg-soft: var(--kr-skin-text) !important;
    --kas-fg-dim: var(--kr-skin-muted) !important;
    --kas-fg-mute: var(--kr-skin-muted) !important;
    --kas-accent: var(--kr-skin-accent) !important;
    --kas-accent-2: var(--kr-skin-accent-hover) !important;
    --kas-line: var(--kr-skin-card-line) !important;
    --kas-line-strong: var(--kr-skin-accent) !important;
    --kas-card-bg: var(--kr-skin-card-bg) !important;
}
/* 归档 kas：暗色 —— 9 皮肤一致 */
html[data-theme="dark"][data-weekday-skin] .kratos-archives-shortcode {
    --kas-accent: var(--kr-accent) !important;
    --kas-accent-2: var(--kr-link-hover) !important;
    --kas-line-strong: var(--kr-accent) !important;
}

/* khs 命名空间（走心/榜首/友链/时间轴/热度图/博友圈 共用）：亮色
 * —— 多数皮肤通用映射（retro 在自身文件内覆盖强调色 8 行） */
html[data-weekday-skin]:not([data-theme="dark"]) :is(
    .kratos-heart-shortcode, .kratos-topcommenters, .kratos-friend-links,
    .kratos-timeline, .kratos-heatmap, .kratos-friend-feed, .kratos-now, .kratos-otd,
    .kratos-now-header, .kratos-now-history, .kratos-otd-header, .kratos-otd-widget,
    .kratos-home, .kratos-search, .kratos-comment-geo, .kratos-dashboard,
    .kratos-cmdk, .kratos-lpv, .kratos-series-text, .kratos-ai-summary,
    .kratos-ref-links) {
    --khs-bg-1: var(--kr-skin-bg) !important;
    --khs-bg-2: var(--kr-skin-bg) !important;
    --khs-bg-3: var(--kr-skin-bg) !important;
    --khs-fg: var(--kr-skin-text) !important;
    --khs-fg-soft: var(--kr-skin-text) !important;
    --khs-fg-dim: var(--kr-skin-muted) !important;
    --khs-fg-mute: var(--kr-skin-muted) !important;
    --khs-accent: var(--kr-skin-accent) !important;
    --khs-accent-2: var(--kr-skin-accent-hover) !important;
    --khs-line: var(--kr-skin-card-line) !important;
    --khs-line-strong: var(--kr-skin-accent) !important;
    --khs-card-bg: var(--kr-skin-card-bg) !important;
    --khs-page-on: #fff !important;
    --khs-stat-comment-1: var(--kr-skin-accent) !important;
    --khs-stat-comment-2: var(--kr-skin-accent-hover) !important;
    --khs-stat-post-1: var(--kr-skin-accent) !important;
    --khs-stat-post-2: var(--kr-skin-accent-hover) !important;
    --khs-stat-user-1: var(--kr-skin-accent) !important;
    --khs-stat-user-2: var(--kr-skin-accent-hover) !important;
    --khs-heart-fill: var(--kr-skin-accent) !important;
}
/* khs 命名空间：暗色 —— 9 皮肤一致 */
html[data-theme="dark"][data-weekday-skin] :is(
    .kratos-heart-shortcode, .kratos-topcommenters, .kratos-friend-links,
    .kratos-timeline, .kratos-heatmap, .kratos-friend-feed, .kratos-now, .kratos-otd,
    .kratos-now-header, .kratos-now-history, .kratos-otd-header, .kratos-otd-widget,
    .kratos-home, .kratos-search, .kratos-comment-geo, .kratos-dashboard,
    .kratos-cmdk, .kratos-lpv, .kratos-series-text, .kratos-ai-summary,
    .kratos-ref-links) {
    --khs-accent: var(--kr-accent) !important;
    --khs-accent-2: var(--kr-link-hover) !important;
    --khs-line-strong: var(--kr-accent) !important;
    --khs-heart-fill: var(--kr-accent) !important;
    --khs-stat-comment-1: var(--kr-accent) !important;
    --khs-stat-comment-2: var(--kr-link-hover) !important;
    --khs-stat-post-1: var(--kr-accent) !important;
    --khs-stat-post-2: var(--kr-link-hover) !important;
    --khs-stat-user-1: var(--kr-accent) !important;
    --khs-stat-user-2: var(--kr-link-hover) !important;
}

/* ------------------------------------------------------------
 * AI 摘要卡片（M2 · 简约版）
 * ------------------------------------------------------------
 * 外壳承担全部视觉：左侧 2px 渐变亮条 + 极浅 accent 渐变底 + 圆角。
 * 内部 .kratos-ai-summary-hd / -body 一律透明、无边框、无描边。
 * 注意：markup 上刻意不挂公共类 kr-hd / kr-body（避免皮肤卡片规则套成"卡中卡"），
 * 只把根容器登记进上面两处 --khs-* 别名列表，让配色跟皮肤走。
 * ------------------------------------------------------------ */
.kratos-ai-summary {
    --kai-accent: var(--khs-accent, var(--kr-skin-accent, #4b7bec));
    --kai-accent-soft: color-mix(in srgb, var(--kai-accent) 8%, transparent);
    --kai-accent-fade: color-mix(in srgb, var(--kai-accent) 2%, transparent);
    --kai-fg: var(--khs-fg, var(--kr-skin-text, #1f2933));
    --kai-fg-dim: var(--khs-fg-dim, var(--kr-skin-muted, #6b7683));

    position: relative;
    margin: 0 0 24px;
    padding: 18px 22px 18px 24px;
    background:
        linear-gradient(180deg, var(--kai-accent-soft) 0%, var(--kai-accent-fade) 60%, transparent 100%);
    border: 0;
    border-radius: 10px;
    box-shadow: none;
    overflow: hidden;
    isolation: isolate;
}
.kratos-ai-summary::before {
    content: "";
    position: absolute;
    left: 0; top: 0; bottom: 0;
    width: 2px;
    background: linear-gradient(180deg, var(--kai-accent) 0%, color-mix(in srgb, var(--kai-accent) 20%, transparent) 100%);
}

/* 头部：透明、无背景、无边框 */
.kratos-ai-summary .kratos-ai-summary-hd {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 0 0 8px;
    padding: 0;
    background: transparent;
    border: 0;
    box-shadow: none;
}
.kratos-ai-summary .kratos-ai-summary-title {
    font-size: 12px;
    font-weight: 600;
    letter-spacing: .16em;
    color: var(--kai-fg-dim);
    text-transform: uppercase;
    background: transparent;
}
.kratos-ai-summary .kratos-ai-summary-title::before {
    content: "";
    display: inline-block;
    width: 4px; height: 4px;
    margin-right: 8px;
    vertical-align: 2px;
    background: var(--kai-accent);
    border-radius: 50%;
}

/* 正文：字号刻意小于文章正文、颜色走 muted，不与正文抢焦点。
 * 显式给内层 <p><li> 也设 font-size / line-height，因为主题 .details p / .entry-content p
 * 特异性 (0,1,1) 会盖过 .kratos-ai-summary-body 的 (0,2,0)。这里给到 (0,3,1) 且 !important。 */
.kratos-ai-summary .kratos-ai-summary-body {
    margin: 0;
    padding: 0;
    background: transparent;
    border: 0;
    box-shadow: none;
    font: 400 clamp(12.5px, 0.86em, 14px)/1.7 inherit;
    color: var(--kai-fg-dim);
}
.kratos-ai-summary .kratos-ai-summary-body p,
.kratos-ai-summary .kratos-ai-summary-body li,
.kratos-ai-summary .kratos-ai-summary-body ul,
.kratos-ai-summary .kratos-ai-summary-body ol,
.kratos-ai-summary .kratos-ai-summary-body blockquote {
    font-size: clamp(12.5px, 0.86em, 14px) !important;
    line-height: 1.7 !important;
    color: var(--kai-fg-dim) !important;
}
/* strong/em 在 muted 底色上略提亮，保证语义可见但仍低于正文 */
.kratos-ai-summary .kratos-ai-summary-body strong {
    color: var(--kai-fg);
    font-weight: 600;
}
.kratos-ai-summary .kratos-ai-summary-body em {
    color: var(--kai-fg-dim);
    font-style: normal;
}

/* 打字机效果：无光标 */
.kratos-ai-summary .kratos-ai-summary-body > *:first-child { margin-top: 0; }
.kratos-ai-summary .kratos-ai-summary-body > *:last-child  { margin-bottom: 0; }
.kratos-ai-summary .kratos-ai-summary-body p {
    margin: 0 0 10px;
    color: var(--kai-fg);
}
.kratos-ai-summary .kratos-ai-summary-body strong { color: var(--kai-fg); font-weight: 600; }
.kratos-ai-summary .kratos-ai-summary-body em { color: var(--kai-fg-dim); font-style: normal; }
.kratos-ai-summary .kratos-ai-summary-body a {
    color: var(--kai-accent);
    text-decoration: none;
    border-bottom: 1px dashed color-mix(in srgb, var(--kai-accent) 50%, transparent);
}
.kratos-ai-summary .kratos-ai-summary-body a:hover { border-bottom-style: solid; }

/* guide 预设的收益列表 */
.kratos-ai-summary .kratos-ai-summary-body ul {
    margin: 10px 0 0;
    padding: 0;
    list-style: none;
    display: grid;
    gap: 6px;
}
.kratos-ai-summary .kratos-ai-summary-body li {
    position: relative;
    margin: 0;
    padding: 0 0 0 20px;
    font-size: .95em;
    color: var(--kai-fg);
}
.kratos-ai-summary .kratos-ai-summary-body li::before {
    content: "";
    position: absolute;
    left: 4px;
    top: .72em;
    width: 6px; height: 6px;
    border-top: 1.5px solid var(--kai-accent);
    border-right: 1.5px solid var(--kai-accent);
    transform: rotate(45deg);
}

/* tldr 预设：更紧凑 */
.kratos-ai-summary--tldr .kratos-ai-summary-body { font-size: clamp(13.5px, 0.98em, 14.5px); line-height: 1.7; }

/* stale 提示：极简小字，无背景 */
.kratos-ai-summary .kratos-ai-summary-stale {
    display: block;
    margin: 8px 0 0;
    font-size: 11.5px;
    line-height: 1.6;
    color: var(--kai-fg-dim);
}
.kratos-ai-summary .kratos-ai-summary-stale::before {
    content: "· ";
    color: var(--kai-accent);
}

/* ---- 小屏 ---- */
@media (max-width: 640px) {
    .kratos-ai-summary { margin: 0 0 18px; padding: 14px 16px 14px 18px; border-radius: 8px; }
    .kratos-ai-summary .kratos-ai-summary-body,
    .kratos-ai-summary .kratos-ai-summary-body p,
    .kratos-ai-summary .kratos-ai-summary-body li { font-size: 13px !important; line-height: 1.7 !important; }
    .kratos-ai-summary .kratos-ai-summary-title { font-size: 10.5px; letter-spacing: .14em; }
}
