/* list.css — 文章列表：状态徽章 / admin 选中操作组 / tabs ＋新建 / 置顶翻转动画 */

/* 加载中 / 空态 / 保密提示 */
.list-loading,
.secret-hint {
  padding: 1.4rem 1.2rem; /* 与行内边距一致 */
  text-align: center;
  font-size: 0.7rem;
  color: #94a3b8;
}
.secret-hint a {
  color: #2563eb;
  margin-left: 0.4rem;
  text-decoration: none;
}
.secret-hint a:hover {
  text-decoration: underline;
}

/* ==================== 列表行结构 ====================
 * [状态徽章] [标题] [选中操作组] [日期]
 * 徽章恒占位 → 所有标题纵向对齐；标题字号 ×1.3
 */
.list-item {
  position: relative;
}
.list-item .title {
  font-size: inherit; /* 继承 .list-item 的 clamp 基准：行高/标题同一公式联动，防公式分叉 */
}
.list-item .date {
  font-size: 0.6rem;
  color: var(--muted);
  flex-shrink: 0;
  margin-left: 0.8rem;
}

/* ---- 状态徽章（最左圆点）：蓝圆=置顶、深绿=仅加密、灰圆=无状态；圆内含白色单字 顶/密（加密优先） ---- */
.item-flags {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  margin-right: 0.4rem;
}
.item-flags .dot {
  display: flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  width: 0.72rem; /* 与预渲染 PNG 显示尺寸一致 */
  height: 0.72rem;
  min-width: 0.72rem;
  aspect-ratio: 1 / 1; /* 强制正圆，杜绝拉伸成椭圆 */
  border-radius: 50%;
  background-color: #94a3b8; /* 灰圆 = 无状态背景 */
  background-repeat: no-repeat;
  background-position: center;
  background-size: 100% 100%; /* 预渲染 PNG 贴满正圆，无 img 拉伸路径 */
  overflow: hidden;
  flex-shrink: 0;
  align-self: center;
  line-height: 0;
}
.item-flags .dot.pin {
  background: #2563eb; /* 置顶蓝（img 覆盖底色，作为无头无尾保险） */
}
.item-flags .dot.secret {
  background: #15803d; /* 加密深绿 */
}

/* ==================== 选中态 ==================== */
/* 强调背景覆盖整个卡片：破 .content 左右 padding 横贯全宽 */
.list-item.selected {
  background: #eaf1ff; /* 行已横贯整卡（左右内边距随行走），无需负 margin */
}

/* ---- 选中操作组（仅 admin：icon 上 / 文本下） ---- */
/* 未选中时按钮 visibility:hidden 但仍占位 —— 选中后行宽不变，不产生横向滚动 */
.item-ops {
  display: inline-flex;
  align-items: center;
  gap: clamp(0.05rem, calc(0.03rem + 0.15vw), 0.1rem); /* 原 桌面0.1/移动0.05 双值 → 连续 */
  margin-left: clamp(0.4rem, calc(0.3rem + 0.5vw), 0.6rem); /* 原 桌面0.6/移动0.4 → 连续 */
  flex-shrink: 0;
}
.op-btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start; /* 不再 space-between：消除剩余空间挤出的“大 gap”，由 gap 精确控制 */
  gap: 0.02rem; /* 原 0.08rem → 缩小到 1/4（用户要求再减半 → 真间距极小） */
  width: clamp(1.55rem, calc(1.4rem + 0.7vw), 1.9rem); /* 原 桌面1.9/移动1.55 双值 → 连续 */
  height: 2.3rem; /* 固定按钮高度：icon 顶、文本底，四个按钮文本基线严格对齐 */
  padding: 0.15rem 0 0.18rem;
  border: none;
  border-radius: 0.35rem;
  background: transparent;
  color: #64748b;
  cursor: pointer;
  font-family: inherit;
  visibility: hidden; /* 未选中不显示，但保留宽度参与布局 */
  transition: background 0.15s, color 0.15s, opacity 0.15s;
}
.list-item.selected .op-btn {
  visibility: visible;
  /* 滑入动画由 JS 一次性内联播放（playOpsSlideIn），此规则不含常驻动画 */
}
.op-btn .icon {
  width: 1.058rem; /* 原 0.92rem 放大 15% */
  height: 1.058rem;
  margin-top: 4px; /* 原 2px 下移 2px（pin/lock 基准）；以 27.6px 最大图标（编辑）为基准，四按钮 icon 中心对齐 */
}
/* 图标视觉对齐：edit 较基准大、trash 较基准小（等比 +15%），保持视觉统一 */
.op-btn .icon[data-ic="ic-edit"] {
  width: 1.38rem; /* 原 1.25→1.31→1.38rem，连续放大到用户满意 */
  height: 1.38rem;
  margin-top: 1px; /* 27.6px 最大：微降 1px 视觉与其余拉平 */
}
.op-btn .icon[data-ic="ic-trash"] {
  width: 1.131rem; /* 原 0.983rem 放大 15% */
  height: 1.131rem;
  margin-top: 3px; /* 原 1px 下移 2px */
}
.op-btn .lbl {
  font-size: 0.55rem; /* 原 0.48rem(桌面9.6px/移动≈6.7px) 过小，升到 0.55rem */
  line-height: 1;
  display: block; /* 文本水平居中、单行，四按钮文本严格同一行 */
  text-align: center;
  white-space: nowrap;
}
/* 图标高度差异 → 文本被推低：按差值反向补偿 margin-top，使四个按钮文本顶/底严格对齐
   icon 下移 2px 后 label 同步回抬 2px（参考线：edit label 顶≈31px，edit label mt0） */
.op-btn .icon[data-ic="ic-pin-on"] + .lbl,
.op-btn .icon[data-ic="ic-pin-off"] + .lbl,
.op-btn .icon[data-ic="ic-lock-on"] + .lbl,
.op-btn .icon[data-ic="ic-lock-off"] + .lbl {
  margin-top: 2px; /* 图标 21px 下移后（+margin4=25）→ 补 2px 对齐 27.6px */
}
.op-btn .icon[data-ic="ic-trash"] + .lbl {
  margin-top: 2px; /* 图标 23px 下移后（+margin3）→ 补 2px 对齐 */
}
.op-btn .icon[data-ic="ic-edit"] + .lbl {
  margin-top: 0;
}
.op-btn:hover {
  opacity: 0.85; /* 仅轻度变淡，颜色恒定不变 */
}
/* 操作按钮颜色任何情况下都不变（置顶/加密状态只靠图标表达，颜色只用于左侧状态 tag）；无背景高亮 */
.op-btn.del:hover {
  opacity: 0.85;
}
@keyframes opSlideIn {
  from {
    transform: translateX(0.9rem);
    opacity: 0;
  }
  to {
    transform: translateX(0);
    opacity: 1;
  }
}
/* 按压脉冲（与导航/标签点击同款：先缩小再放大），高特异性覆盖滑入动画 */
.list-item.selected .op-btn.clicking {
  animation: opPress 0.45s ease;
}
@keyframes opPress {
  0% {
    transform: scale(1);
  }
  40% {
    transform: scale(0.8);
  }
  75% {
    transform: scale(1.3);
  }
  100% {
    transform: scale(1);
  }
}

/* ---- 窄屏收紧已由上方 clamp 连续化覆盖，不再需要 480 断点 ---- */

/* ==================== tabs ＋新建（仅 admin，嵌在激活标签按钮内、贴其右侧） ==================== */
/* 加号绝对定位在激活按钮右内侧：不占文档流，标签文本居中不受影响；上 icon 下文本，灰字 */
.tab-plus {
  display: none;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.05rem; /* icon 与文本间距缩小 */
  padding: 0.15rem 0.1rem; /* 紧凑：不影响标签文本位置 */
  border: none;
  background: none;
  color: #64748b; /* 灰色 */
  cursor: pointer;
  line-height: 1;
}
.tab-plus .icon {
  width: 0.72rem;
  height: 0.72rem;
  transform: scale(1.18, 0.88); /* 保留原图标，仅视觉压扁：横向拉宽 18%、纵向压缩 12% */
}
.tab-plus .lbl {
  font-size: 0.5rem; /* 原 0.42rem 微字，升到 0.5rem */
  line-height: 1;
}
/* 激活按钮本身已是 position:relative，加号整体与二级标签垂直中心对齐 */
body.is-admin .tab-btn.active .tab-plus {
  display: inline-flex;
  position: absolute;
  right: 0.42rem;
  top: 50%;
  transform: translateY(-50%);
}
.tab-plus:hover {
  opacity: 0.7;
}
.tab-plus:active {
  transform: scale(0.9);
}

/* ==================== 删除确认弹窗 ==================== */
.confirm-card {
  width: min(17rem, calc(100vw - 2rem));
}
.confirm-text {
  font-size: 0.7rem;
  color: #334155;
  margin: 0.7rem 0 1rem;
  line-height: 1.6;
}
.confirm-actions {
  display: flex;
  justify-content: flex-end;
  gap: 0.5rem;
}
.confirm-cancel,
.confirm-ok {
  height: 1.7rem;
  padding: 0 0.8rem;
  border-radius: 0.3rem;
  font-size: 0.7rem;
  cursor: pointer;
  border: 1px solid #cbd5e1;
  background: #fff;
  color: #334155;
}
.confirm-ok {
  background: #dc2626;
  border-color: #dc2626;
  color: #fff;
}
.confirm-cancel:hover {
  border-color: #94a3b8;
}
.confirm-ok:hover {
  opacity: 0.9;
}