/* ═══════════════════════════════════════════════════════════════
   公示页皮肤 v1.0 · 1:1 复刻 client-v2.html 的公示页（#p-circle）
   ───────────────────────────────────────────────────────────────
   性质：纯追加覆盖层。回滚：删除本文件 + 删除 index.html 中 1 行 link。
   机制：加载于既有样式之后，靠"同权重后者生效"覆盖；严禁 !important。
   ⚠ 本文件所有选择器一律加 `#page-circle ` 前缀（必需，不是为了好看）：
      `.post-*` 与 `.identity-badge.official` 被 3 个页面共用——
        #page-circle（公示页）/ #page-comment-detail（评论详情）/ #page-profile（收藏公示）。
      加前缀后 ID 优先级碾压 circle.css 的类选择器：既覆盖到位，又保证后两页原样。
   依赖：复用 skin-nearby.css 的 :root 令牌。
   保留的原类名（不得改名，JS 依赖）：
     #circleScroll（滚动容器）、#circleHeader、#circlePostList、
     .like-action / .comment-action / .post-img-wrap / #img_xx（图片方向自适应）
   ═══════════════════════════════════════════════════════════════ */

/* 主题色：本页为靛紫（v2 公示页主题，与底导 [data-theme="circle"] 同色） */
#page-circle{
  --theme:#5B5BD6;
  --theme-active:#4646B8;
  --theme-soft:#EFEFFC;
  background:var(--canvas);
  color:var(--ink);
}

/* 滚动条：与 v2 一致（隐藏；另在 skin-nearby §1.1 有全站统一处理，此处为就近声明） */
#page-circle .circle-scroll{ scrollbar-width:none; -ms-overflow-style:none; }
#page-circle .circle-scroll::-webkit-scrollbar{ display:none; }

/* ────────── §1 顶栏：54px 常驻（照 v2 .hd） ────────── */
#page-circle .circle-header{
  padding:0;
  background:var(--canvas);
  position:sticky;                    /* 常驻：吸附在 .circle-scroll 顶部，内容从其下滚过 */
  top:0;
  z-index:20;                         /* 原 relative/10 → sticky/20，确保帖子滚过时被盖住 */
}
#page-circle .circle-header .top-row{
  height:calc(54px + env(safe-area-inset-top,0px));
  padding:env(safe-area-inset-top,0px) 16px 0;
  display:flex; align-items:center; justify-content:space-between;
}
#page-circle .circle-title{
  font-size:var(--t-title); font-weight:700; letter-spacing:-.3px; color:var(--ink);
}
#page-circle .circle-header-auth{ display:flex; align-items:center; gap:8px; flex-shrink:0; }
/* 登录：墨黑描边胶囊（v2 .btn-login） */
#page-circle .circle-header-login-btn{
  width:auto; min-width:0; height:32px; padding:0 15px;
  background:none; border:1px solid var(--ink); border-radius:var(--r-full);
  color:var(--ink); font-size:var(--t-caption); font-weight:600;
  display:flex; align-items:center; justify-content:center;
  transition:transform 100ms ease-out;
}
#page-circle .circle-header-login-btn:active{ transform:scale(.95); }
/* 优先级需高于上方 display:flex，否则已登录时不隐藏 */
#page-circle .circle-header-login-btn.hidden{ display:none; }
/* 已登录：只显示用户名胶囊，不显示头像（与设备页/回收页一致；JS 亦同步置 none，双保险） */
#page-circle .circle-header-avatar{ display:none; }
#page-circle .circle-header-name{
  height:32px; padding:0 15px 2px; box-sizing:border-box;
  border:1px solid var(--ink); border-radius:var(--r-full);
  background:none; color:var(--ink);
  font-size:var(--t-caption); font-weight:600;
  display:flex; align-items:center;
  /* ⚠ 2026-10-03 光学居中修正：与 #page-raw .user-name 逐值同改
     （中文墨迹天然偏低 → 行高 30 + 底部 2px，文字上移 1px、胶囊总高仍 32）。 */
  line-height:30px;
  max-width:150px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}

/* ────────── §2 公告条：34px 通栏白条 + 发丝下边线（照 v2 .sticky-note） ────────── */
#page-circle .circle-notice-bar{
  height:34px; margin:0; padding:0 16px; gap:8px;
  background:var(--canvas);
  border-radius:0;
  border-bottom:1px solid var(--hairline-soft);
}
#page-circle .circle-notice-icon svg{ width:14px; height:14px; fill:var(--theme); }
#page-circle .circle-notice-text{ flex:1; overflow:hidden; white-space:nowrap; position:relative; }
/* 保留跑马灯滚动（现状）；仅统一字号/颜色/时长 */
#page-circle .circle-notice-text-inner{
  font-size:var(--t-micro);
  font-weight:400;
  color:var(--muted);
  animation:marquee 16s linear infinite;
}
/* ★2026-10-25：没有播报内容时停掉跑马灯（板块保留、文字为空）。
   必须写在这里：本文件在 circle.css **之后**加载，上面的 `animation` 会覆盖基础规则。 */
#page-circle .circle-notice-text-inner:empty,
#page-circle .circle-fixed-notice-inner:empty{ animation:none; padding-left:0; }

/* ────────── §3 帖子流：去卡面、改发丝线分隔（照 v2 .posts / .post） ────────── */
#page-circle .circle-post-list{ padding:20px 16px 0; }
#page-circle .post-card{
  background:none;
  border-radius:0;
  box-shadow:none;
  padding:0 0 20px;
  margin:0 0 20px;
  border-bottom:1px solid var(--hairline-soft);
}
#page-circle .circle-end-tip{
  padding:30px 0 34px;
  font-size:var(--t-micro);
  color:var(--muted-soft);
  letter-spacing:.6px;
}

/* ────────── §4 帖头：头像 / 昵称 / 官方徽章 / 时间 / 状态徽章 ────────── */
#page-circle .post-header{ display:flex; align-items:center; gap:10px; margin-bottom:0; }
#page-circle .post-avatar{
  width:36px; height:36px; border-radius:50%; overflow:hidden; flex-shrink:0;
  background:var(--surface-strong);
}
#page-circle .post-user-info{ flex:1; min-width:0; }
#page-circle .post-nickname{
  display:flex; align-items:center; gap:5px;      /* 全站统一 5px（原 6px） */
  font-size:var(--t-body); font-weight:600; color:var(--ink);
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
/* 官方徽章：淡紫底 + 紫字（替代原金色镂空描边） */
#page-circle .identity-badge.official{
  height:17px; padding:0 6px; margin-left:0;
  border:none; border-radius:var(--r-sm);
  background:var(--theme-soft); color:var(--theme);
  font-size:10.5px; font-weight:600; line-height:1;
  display:inline-flex; align-items:center; justify-content:center; flex-shrink:0;
}
#page-circle .post-time{ font-size:var(--t-micro); color:var(--muted-soft); margin-top:3px; }
#page-circle .post-status-badge{
  height:24px; padding:0 10px; border-radius:var(--r-full);
  font-size:var(--t-tiny); font-weight:600;
  display:flex; align-items:center; flex-shrink:0;
  align-self:center;                  /* 覆盖原 flex-start：v2 与头像垂直居中 */
}
#page-circle .post-status-badge.ongoing{ background:var(--theme-soft); color:var(--theme); }
#page-circle .post-status-badge.ended{ background:var(--surface-strong); color:var(--muted-soft); }

/* ────────── §5 标题（正文保持现状全文展开，不加截断） ────────── */
#page-circle .post-title{
  margin:12px 0 0;
  font-size:17px; font-weight:600; line-height:1.35; letter-spacing:-.2px;
  color:var(--ink);
  font-family:inherit;                /* 去掉原「Heiti SC/SimHei」覆写，回归全站字体 */
  text-align:left;
}
#page-circle .post-body{
  margin:8px 0 0;
  font-size:var(--t-body); line-height:1.55; color:var(--body);
}

/* ────────── §6 图片：圆角 8→14px、间距对齐（单图比例保持现状不裁切） ────────── */
#page-circle .post-images{ gap:6px; margin:12px 0 0; }
#page-circle .post-img-wrap{ border-radius:var(--r-md); background:var(--surface-strong); }
#page-circle .post-images.single .post-img-wrap.vertical{ width:calc(50% - 3px); }   /* 原 -2px（间距 4px→6px 同步） */
#page-circle .post-images.double .post-img-wrap{ width:calc(50% - 3px); }            /* 原 -2px */

/* ────────── §7 动作行：去上分割线；点赞改主题紫 ────────── */
#page-circle .post-actions{ gap:24px; margin-top:14px; padding-top:0; border-top:none; }
#page-circle .post-action{ gap:5px; font-size:var(--t-micro); color:var(--muted); }
#page-circle .post-action svg{ width:18px; height:18px; stroke:var(--muted); stroke-width:1.8; fill:none; }
#page-circle .post-action.liked{ color:var(--theme); }
#page-circle .post-action.liked svg{ stroke:var(--theme); fill:var(--theme); }