/* 全站共享：内容卡片（帖子统一使用本套样式）。
   卡片渲染 JS 在 static/js/util/itemcard.js；头像渲染在 base.html 的 avatarHtml。
   .items-grid 单列堆叠也在这，方便其他页面直接复用。

   卡片布局：横向 flex-row，左侧封面固定 96×96 蓝边框 + 圆角，右侧 info
   分上下两段（标题 + 摘要 / footer 含作者·时间·浏览量·评论数）。所有卡片
   等高（min-height:120px）+ 等宽（单列），"长宽保持一致"由布局直接保证。
   —— 卡片本身直角、无阴影，底边 1px 细线分隔相邻卡片（列表 gap:0 贴合）；
   封面保留 10px 圆角。 */
* { box-sizing: border-box; }

/* 卡片网格：单列堆叠，所有卡片等宽；
   高度由封面固定 96px + padding 12×2 = 120px 撑起，info 区不再纵向伸缩。
   minmax(0, 1fr)：fr 轨道的下限默认是网格项 min-content —— 某张卡的标题
   是超长 nowrap 文本（如带版本后缀的长游戏名）时会把整条单列轨道顶出
   视口，导致**整列**卡片右侧被 .app-view 的 overflow-x:hidden 裁掉；
   下限改 0 后轨道永远等于容器宽，长标题交给 .item-name 的 ellipsis 截断 */
.items-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 0;
}

/* 主卡：横向 flex-row + flex-wrap，封面左 / info 右 / footer 跨整卡宽 */
.item-card {
    background: #fff;
    /* 直角无阴影：卡片之间 gap:0 贴合，形成整块连续列表（微信会话列表式）。
       不设 overflow:hidden —— 三点菜单的 popup 要溢出卡片边缘向下展开。
       卡片内唯一带圆角的视觉元素是封面图，由 .item-cover-wrap 自己的
       border-radius + overflow 处理裁切 */
    cursor: pointer;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;             /* footer 用 flex: 1 0 100% 换到下一行 */
    align-items: stretch;
    padding: 12px;
    /* row-gap 8px：发布者 footer 与正文之间收紧；column-gap 12px 保持封面-信息间距 */
    gap: 8px 12px;
    min-height: 120px;
    transition: transform 0.12s;
    /* 点按高亮透明（旧值 rgba(102,126,234,.15) 紫色块已随全站收口下线），
       按压反馈由 .item-card:active 的 scale(.99) 承担 */
    -webkit-tap-highlight-color: transparent;
    /* 给 .hide-badge 等内部绝对定位元素提供锚点（默认 .item-card 不定位会让它们
       跑到外层 .items-grid / document） */
    position: relative;
    /* 左侧 3px accent 条透明占位：kind 卡片（.item-card.kind-*）着色由 JS 从
       WorkKinds 注册表派生注入（见 itemcard.js injectKindColors），
       minigames 等无 kind 卡片保持透明 → 各类卡片内容左对齐一致 */
    border-left: 3px solid transparent;
    /* 底边 1px 细线：卡片 gap:0 贴合后，相邻卡片靠它区分。
       这条线原先画在 .item-card-footer 顶部（分隔正文与发布者行），
       现移到卡片底边，改为卡片之间的分隔线 */
    border-bottom: 1px solid #edf2f7;
}
.item-card:active { transform: scale(0.99); }
.item-card:hover { transform: translateY(-1px); }
/* 「已隐藏」态：「我的」页用于自己未审批的发布，整张卡半透明 + 左上角 chip。
   走 opts.hidden 开关渲染（itemcard.js），与 imageHidden（封面斜纹占位）正交。 */
.item-card.item-card-hidden { opacity: 0.55; }
.hide-badge {
    position: absolute;
    top: 8px;
    left: 8px;
    z-index: 2;
    background: rgba(0,0,0,0.55);
    color: #fff;
    font-size: 0.7rem;
    padding: 2px 8px;
    border-radius: 4px;
}
/* 「已锁定」标识：与 hide-badge 同位置同样式，文案区分（锁定时作者不可删）；
   不属于状态角标体系，保持独立 */
.lock-badge {
    position: absolute;
    top: 8px;
    left: 8px;
    z-index: 2;
    background: rgba(0, 0, 0, 0.55);
    color: #fff;
    font-size: 0.7rem;
    padding: 2px 8px;
    border-radius: 4px;
}
/* 卡片状态角标统一体系：置顶/待审核/驳回/隐藏/认领/回收全部由
   work-status.js::workCardBadges 单一真源派生（itemcard.js 渲染），
   右上角竖排同一容器同一款式，配色按 key 修饰类 card-badge-<key> 区分 */
.card-badges {
    position: absolute;
    top: 8px;
    right: 8px;
    z-index: 2;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 4px;
}
.card-badge {
    background: rgba(90, 103, 216, 0.85);
    color: #fff;
    font-size: 0.7rem;
    padding: 2px 8px;
    border-radius: 4px;
    line-height: 1.4;
    white-space: nowrap;
}
.card-badge-pinned { background: rgba(221, 107, 32, 0.9); }
.card-badge-pending { background: rgba(90, 103, 216, 0.85); }
.card-badge-rejected { background: rgba(229, 62, 62, 0.9); }
.card-badge-hidden { background: rgba(113, 128, 150, 0.9); }
.card-badge-recycled { background: rgba(45, 55, 72, 0.9); }
.card-badge-claimed { background: rgba(128, 90, 213, 0.85); }

/* 左侧封面区：固定 96×96，蓝色边框 + 圆角
   永远渲染（无图时也用占位 emoji / 审批中块占位，保持卡片结构一致） */
.item-cover-wrap {
    flex: none;
    width: 96px;
    height: 96px;
    border: 2px solid var(--primary, #667eea);
    border-radius: 10px;
    overflow: hidden;
    background: #edf2f7;
    display: flex;
    align-items: center;
    justify-content: center;
}
/* 「审批中」专用样式：浅灰斜纹 + 「审批中」字 + 灰边框（区别于已审批的蓝框） */
.item-cover-wrap.pending-review {
    border-color: #cbd5e0;
    background: repeating-linear-gradient(45deg, #f7fafc, #f7fafc 10px, #edf2f7 10px, #edf2f7 20px);
    color: #a0aec0;
    font-size: 0.78rem;
    font-weight: 600;
    letter-spacing: 2px;
    text-align: center;
}
/* 无图占位：浅灰底 + 虚线边框，与有图卡片区分 */
.item-cover-wrap.no-image-placeholder {
    background: #f7fafc;
    border-color: #cbd5e0;
    border-style: dashed;
    color: #a0aec0;
}
.item-cover {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
/* 素材卡封面：矢量素材原样展示（contain 不裁剪），白底衬托透明 SVG */
.item-cover.item-cover-svg {
    object-fit: contain;
    padding: 6px;
    box-sizing: border-box;
    background: #fff;
}
.item-cover-placeholder {
    font-size: 42px;
    line-height: 1;
    user-select: none;
}

/* 右侧 info 区：flex 列布局，标题/摘要在顶部，footer 推到底 */
.item-info {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: 4px;
}
/* 上半：标题 + 摘要 */
.item-info-top { min-height: 0; }
.item-name {
    font-size: 1rem;
    font-weight: 600;
    color: var(--primary, #667eea);
    line-height: 1.3;
    margin-bottom: 2px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.item-name:hover { text-decoration: underline; }
/* 编号徽标：低调灰色小字，跟在作品名称后；id 缺失（旧数据）时 JS 不渲染；
   有版本的作品版本号固定拼在编号后（G433_V3），见 itemcard.js idBadgeHtml */
.item-id-badge {
    font-size: 0.72rem;
    font-weight: 400;
    color: #a0aec0;
    margin-left: 6px;
}
/* 外接站点在线/离线角标（B 方案）：8px 圆点，跟随编号徽标后。
   data-state 由 itemcard.js bindExtsiteStatusObserver 探测 /api/extsite/{ref}/availability
   后原地更新：unknown 灰 / online 绿 / offline 红（带红晕）。 */
.extsite-status {
    display: inline-block;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    margin-left: 6px;
    vertical-align: middle;
    flex: none;
    background: #cbd5e0;
}
.extsite-status[data-state="online"] { background: #38a169; }
.extsite-status[data-state="offline"] { background: #e53e3e; box-shadow: 0 0 0 2px rgba(229, 62, 62, 0.25); }
/* 卡片摘要：2 行截断 + 灰字 */
.item-excerpt {
    font-size: 0.82rem;
    color: #718096;
    line-height: 1.4;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    margin-bottom: 2px;
}
/* 评分角标（豆瓣式）：标题下方一行，★ + 分数 + N人评。
   仅列表接口下发了 rating_average / rating_count 的条目（minigames）才渲染，
   字段驱动（itemcard.js renderRatingBadge），post 无此字段自然不出。
   配色与详情页评分区（itemview.js .giv-rating）同源：分数红、星星金 */
.item-rating {
    display: flex;
    align-items: baseline;
    gap: 4px;
    margin-bottom: 2px;
}
.item-rating-star {
    color: #f6ad55;
    font-size: 0.85rem;
    line-height: 1;
    transition: transform 0.15s;
}
/* 卡片 hover 时星星轻微放大，与整卡上浮的 hover 反馈呼应 */
.item-card:hover .item-rating-star { transform: scale(1.15); }
.item-rating-score {
    color: #e53e3e;
    font-weight: 800;
    font-size: 0.95rem;
    line-height: 1;
    font-variant-numeric: tabular-nums;
    letter-spacing: 0.3px;
}
.item-rating-count {
    color: #a0aec0;
    font-size: 0.72rem;
}
/* 无人评分态：灰星 + 灰字「评分人数不足」，与详情页 .giv-rating-score.none 同灰阶 */
.item-rating-star.none { color: #cbd5e0; }
.item-rating-none {
    color: #a0aec0;
    font-size: 0.78rem;
}

/* footer 行：跨整张卡宽度（flex: 1 0 100% 换到下一行），靠左发布者·时间、靠右浏览量·评论数。
   原先顶部的分隔细线已移到 .item-card 底边（border-bottom），改作卡片间分隔，
   footer 与正文之间仅靠卡片 row-gap 8px 留白 */
.item-card-footer {
    flex: 1 0 100%;
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 0.75rem;
    color: #718096;
    /* 整行只留一行文字的高度：行高由内容（头像 18px / ⋮ 22px）决定 */
    margin-top: 0;
    /* name 链接的点击不应该被 footer 容器的 click 透传到卡片整体；
       footer 不是按钮，cursor:default 让它显式放弃点击语义 */
    cursor: default;
}
.item-author {
    display: flex;
    align-items: center;
    gap: 4px;
    min-width: 0;
}
.item-author .avatar {
    width: 18px;
    height: 18px;
    font-size: 0.7rem;
    flex: none;
}
.item-author a {
    color: #4a5568;
    text-decoration: none;
    font-weight: 500;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 140px;
}
.item-author a:hover { color: #2b6cb0; }
.item-author .item-time {
    color: #a0aec0;
}

.item-stats {
    margin-left: auto;
    display: flex;
    gap: 12px;
    color: #718096;
    flex: none;
}
.item-stat {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    font-variant-numeric: tabular-nums;
}
.item-stat svg {
    width: 13px;
    height: 13px;
    fill: currentColor;
}
.item-stat em {
    font-style: normal;
}
.item-stat.link {
    cursor: pointer;
}
.item-stat.link:hover {
    color: var(--primary, #667eea);
}

/* kind 卡片各一色的左侧 accent 条不在此维护：kind → 颜色由注册表声明
   （app/services/kinds.py 的 KindSpec.color → window.__WORK_KINDS → WorkKinds），
   itemcard.js 运行时派生 .item-card.kind-* 规则注入（唯一真源，历史漂移教训：
   kind-score 在卡片边框 #dd6b20 / 详情徽章 #c53030 各写各的）。minigames 无 kind
   字段 → 归为「script」着色；无 kind 条目不着色（基类透明 border-left 占位）。 */

/* 三点菜单现在嵌在 footer 右侧，与浏览量·评论数同一行 */
.item-menu { flex: none; position: relative; margin-left: 4px; }

/* 三点按钮：放在 footer 右侧（与 👁 💬 同排），没动作时整块不渲染（renderActions 返回空字符串） */
.item-menu-trigger {
    width: 22px;
    height: 22px;
    /* mobile-shell.css 的全局 button 基线给了 min-height:44px，会把 footer 撑成
       44px 高——同 messages.css .conv-card 的覆盖套路，压到 22×22，
       让发布者行收进"一行文字"的高度 */
    min-height: 22px;
    border: none;
    background: transparent;
    color: #a0aec0;
    font-size: 1rem;
    line-height: 1;
    cursor: pointer;
    border-radius: 50%;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    /* 字距撑开让三个点视觉上分开 */
    letter-spacing: 1px;
    transition: background 0.15s, color 0.15s;
}
.item-menu-trigger:hover {
    background: #edf2f7;
    color: var(--primary, #667eea);
}

/* 三点弹出菜单：默认向下展开（trigger 下方 4px 起）。
   展开方向由 itemcard.js bindMenuToggle 的 positionPopup 在打开时判定：
   下方放不下最后一项 → 加 .open-up 翻转为向上；上下都放不下 → 选空间大的一侧。
   默认 display:none，.open 时显示 */
.item-menu-popup {
    display: none;
    position: absolute;
    top: calc(100% + 4px);      /* trigger 下方 4px 起 */
    bottom: auto;
    right: 0;
    width: max-content;      /* 宽度跟随最长一项文案，避免短标签留下大片空白 */
    min-width: 72px;
    background: #fff;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    box-shadow: 0 6px 20px rgba(0,0,0,0.12);
    padding: 4px 0;
    z-index: 20;
}
/* 向上展开变体：锚到 trigger 上方（positionPopup 判定下方空间不足时挂上） */
.item-menu-popup.open-up {
    top: auto;
    bottom: calc(100% + 4px);   /* trigger 上方 4px 起 */
}
.item-menu-popup.open { display: block; }

/* 打开三点菜单的卡片整体抬升到兄弟卡片之上。
   原因：.item-card:hover / :active 带 transform，会形成层叠上下文，popup 的
   z-index:20 被锁在卡片内部——向下展开盖到下一张卡区域时会被下一张卡整个遮住。
   menu-open 标记由 itemcard.js 的 openPopup / closePopup 成对维护。 */
.item-card.menu-open { z-index: 30; }

/* 操作按钮：popup 内是竖排列表，每条占满 */
.item-admin-actions {
    display: flex;
    flex-direction: column;
}
.item-admin-actions button {
    width: 100%;
    text-align: left;
    padding: 8px 14px;
    font-size: 0.85rem;
    border: none;
    background: transparent;
    color: #4a5568;
    cursor: pointer;
    border-radius: 0;
    min-height: 36px;
}
.item-admin-actions button:hover { background: #edf2f7; }
.item-admin-actions button.btn-danger {
    color: #d4380d;
}
.item-admin-actions button.btn-danger:hover { background: #fff5f5; }

/* 标签本身。chips 行 HTML 由 chip-renderer.js 统一产出（类名 .giv-chip / .giv-chip.giv-script-link），
   视觉契约与详情页一致；卡片尺寸压缩的覆写（.item-card .giv-chip）由 chip-renderer.js
   注入的 CSS 承担，本文件不再维护 .item-tag 类。 */
.item-tags {
    display: flex;
    gap: 4px;
    flex-wrap: wrap;
}

/* 行优先网格的空 / 加载占位：让 .items-grid .empty 等节点跨整行，
   避免被压成首列竖条。仅限定 .items-grid 下，避免覆盖 my.css 等页面级 .empty */
.items-grid .empty,
.items-grid .loading {
    text-align: center;
    color: #718096;
    padding: 40px 20px;
    grid-column: 1 / -1;
}