/**
 * FlintHub — 个性化推荐插件 · 前台样式
 *
 * ⚠️ 颜色一律走 --mn-* 主题变量，fallback = 浅色主题目标色（规范 §11.7）。
 *    禁止硬编码 #fff / #333 / #0066cc —— 暗夜星辰主题下会「白卡片 + 浅色文字」失读。
 * ⚠️ 零内联：本文件不写 @import，不依赖行内 style。
 *
 * @file plugins/feed_algo/assets/style.css
 */

/* 容器内边距：.mn-section 自身没有 padding，外层必须补（规范 §11.3-23） */
.fa-wrap {
    padding: 16px 20px 24px;
}

/* 并列卡片之间的纵向间距由容器统一给，不逐块写 margin */
.fa-wrap > * + * {
    margin-top: 18px;
}

/* 降级提示条 */
.fa-note {
    margin: 0 0 12px;
    padding: 8px 12px;
    font-size: 13px;
    line-height: 1.5;
    color: var(--mn-text-muted, #888);
    background: var(--mn-bg-subtle, #f7f8fa);
    border: 1px solid var(--mn-border-light, #eef0f3);
    border-radius: 6px;
}

/* 兜底位角标 */
.fa-tag-spare {
    background: var(--mn-warning-subtle, #fef3c7);
    color: var(--mn-warning-text, #92400e);
    border: 1px solid var(--mn-warning-border, #fde68a);
}

/* 「不感兴趣」按钮：默认低存在感，hover 才明显 */
.fa-hide {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    padding: 0;
    border: 1px solid transparent;
    border-radius: 6px;
    background: transparent;
    color: var(--mn-text-muted, #999);
    cursor: pointer;
    transition: color .15s, background-color .15s, border-color .15s;
}

.fa-hide:hover,
.fa-hide:focus-visible {
    color: var(--mn-error, #dc2626);
    background: var(--mn-error-subtle, #fef2f2);
    border-color: var(--mn-error-border, #fecaca);
    outline: none;
}

.fa-hide[disabled] {
    opacity: .4;
    cursor: default;
}

/* 分页 */
.fa-pager {
    display: flex;
    gap: 10px;
    padding: 14px 0 2px;
}

.fa-pager-btn {
    display: inline-flex;
    align-items: center;
    height: 32px;
    padding: 0 14px;
    font-size: 13px;
    border-radius: 6px;
    border: 1px solid var(--mn-border, #e5e7eb);
    background: var(--mn-bg-card, #fff);
    color: var(--mn-text, #333);
    text-decoration: none;
    transition: border-color .15s, color .15s;
}

.fa-pager-btn:hover {
    border-color: var(--mn-primary, #0066cc);
    color: var(--mn-primary, #0066cc);
}

/* 移动端：容器内边距收窄，与核心列表页一致 */
@media (max-width: 640px) {
    .fa-wrap {
        padding: 12px 14px 20px;
    }
}

/* ---- 预设标题色（与核心 Thread::PRESET_TITLE_COLORS 一一对应）----
 * 视图零内联：颜色由 class 表达，而不是 style="color:..."（规范 §7.3）。
 * 值来自核心白名单，Reader::colorClass() 做纯映射，未知值不上色。
 */
.fa-c-red    { color: var(--mn-error, #dc2626); font-weight: 600; }
.fa-c-amber  { color: var(--mn-warning-text, #d97706); font-weight: 600; }
.fa-c-green  { color: var(--mn-success, #16a34a); font-weight: 600; }
.fa-c-blue   { color: var(--mn-primary, #2563eb); font-weight: 600; }
.fa-c-violet { color: var(--mn-text-link, #7c3aed); font-weight: 600; }

/* ==========================================================================
   右栏「为你推荐」卡片（1.5.0 起取代首页列表替换）
   --------------------------------------------------------------------------
   复用核心 .mn-panel / .mn-panel-title / .mn-stat-list / .mn-stat-item 的骨架，
   只补「长标题截断」与「底部更多」两处核心没有的规则。
   提权到 (0,2,0) 覆盖核心 .mn-stat-item 的 space-between，避免长标题把回复数挤出行外。
   ========================================================================== */

.fa-panel .mn-stat-item {
    gap: 8px;
}

.fa-panel .mn-stat-label {
    flex: 1;
    min-width: 0;
}

.fa-panel .mn-stat-value {
    flex: none;
    font-size: 13px;
    font-weight: 600;
    color: var(--mn-text-muted, #888);
}

/* 序号：纯文字，不占方块（与热榜面板同一视觉语言） */
.fa-panel-rank {
    flex: none;
    width: 13px;
    font-style: normal;
    font-size: 12px;
    line-height: 1.6;
    text-align: center;
    color: var(--mn-text-muted, #888);
}

.fa-panel-rank-top {
    color: var(--mn-primary, #0066cc);
    font-weight: 700;
}

/* 标题：单行截断，hover 用 title 属性看全 */
.fa-panel .fa-panel-title {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    color: var(--mn-text, #333);
    text-decoration: none;
}

.fa-panel .fa-panel-title:hover {
    color: var(--mn-primary, #0066cc);
}

/* 底部「查看更多 → /feed」 */
.fa-panel-more {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
    margin-top: 8px;
    padding-top: 9px;
    border-top: 1px solid var(--mn-border-light, #eef0f3);
    font-size: 12px;
    color: var(--mn-text-muted, #888);
    text-decoration: none;
    transition: color .15s;
}

.fa-panel-more:hover {
    color: var(--mn-primary, #0066cc);
}