/* ============================================================
   社区模块共享样式
   1) .community-subnav —— 四个社区页面统一的分区导航
   2) .community-page  —— 我的社区／审核台／增长数据等页面的版式
   3) 少量对 /community 与详情页既有版式的响应式修补
   颜色一律走 ds.css 的 token，带回退值供未引入 ds.css 的页面使用。
   ============================================================ */

/* ── 1. 分区导航 ─────────────────────────────────────────────
   放在站点表头之下，桌面端跟着表头一起吸顶（表头 52px）。
   移动端表头换成 .mob-header 且底部另有固定导航，这里回到普通流，
   不再叠第二条吸顶栏去吃掉本来就不多的首屏。 */
.community-subnav{
  background:#fff;
  border-bottom:1px solid var(--bd,#e2e8f0);
  box-shadow:0 1px 2px rgba(16,42,80,.04);
}
.community-subnav-inner{
  max-width:var(--container,1200px);
  margin:0 auto;
  padding:0 24px;
  height:52px;
  display:flex;
  align-items:center;
  gap:4px;
  overflow-x:auto;
  overflow-y:hidden;
  scrollbar-width:none;
  -ms-overflow-style:none;
}
.community-subnav-inner::-webkit-scrollbar{display:none}
.community-subnav a{
  flex:0 0 auto;
  display:inline-flex;
  align-items:center;
  gap:6px;
  height:36px;
  padding:0 14px;
  border-radius:9px;
  color:var(--mu,#64748b);
  font-size:14px;
  font-weight:600;
  line-height:1;
  white-space:nowrap;
  text-decoration:none;
  transition:background .15s,color .15s;
}
.community-subnav a:hover{background:var(--p-50,#f0f7ff);color:var(--pd,#155a9e)}
.community-subnav a[aria-current="page"]{background:var(--p,#1a6fc4);color:#fff}
.community-subnav a:focus-visible{outline:2px solid var(--p,#1a6fc4);outline-offset:2px}
.community-subnav .cs-icon{font-size:14px;line-height:1}
/* 发帖是这套导航里唯一的主行动，靠右并用站点的橙色行动色。 */
.community-subnav .cs-post{
  margin-left:auto;
  background:linear-gradient(135deg,var(--o,#f57c00),var(--o2,#ff9800));
  color:#fff;
  font-weight:700;
  box-shadow:0 2px 8px rgba(245,124,0,.28);
}
.community-subnav .cs-post:hover{background:linear-gradient(135deg,#e06f00,#f57c00);color:#fff}
.community-subnav .cs-post[aria-current="page"]{background:linear-gradient(135deg,#d96500,#ef7b00);color:#fff}
.community-unread{
  min-width:18px;height:18px;padding:0 5px;
  display:inline-flex;align-items:center;justify-content:center;
  border-radius:9px;background:var(--r,#e53935);color:#fff;
  font-size:11px;font-weight:700;line-height:1;
}
.community-subnav a[aria-current="page"] .community-unread{background:rgba(255,255,255,.28)}
.community-subnav.is-admin{background:#f8fafc}

@media(min-width:900px){
  .community-subnav{position:sticky;top:var(--nav-h,52px);z-index:280}
}
@media(max-width:899px){
  .community-subnav-inner{height:48px;padding:0 12px;gap:2px}
  .community-subnav a{height:34px;padding:0 11px;font-size:13px}
  /* margin-left:auto 会把它推到横滑区之外，移动端根本看不见；
     底部固定导航已经有「发布」，这里不必再放一个够不着的按钮。 */
  .community-subnav .cs-post{display:none}
}

/* 窄屏表头：只在站点表头隐藏的断点以下出现 */
.community-mob-header{display:none}
@media(max-width:899px){
  .community-mob-header{
    display:flex;align-items:center;justify-content:space-between;gap:10px;
    padding:10px 14px;background:rgba(10,30,70,.96);
    position:sticky;top:0;z-index:300;
  }
  .community-mob-header .cmh-logo{
    display:flex;align-items:center;gap:7px;
    color:#fff;font-weight:700;font-size:15.5px;text-decoration:none;
  }
  .community-mob-header .cmh-logo img{border-radius:6px}
  .community-mob-header .cmh-pub{
    background:linear-gradient(135deg,var(--o,#f57c00),var(--o2,#ff9800));color:#fff;
    padding:7px 13px;border-radius:20px;font-size:12px;font-weight:700;
    text-decoration:none;white-space:nowrap;
  }
}

/* ── 2. 社区内页版式（我的社区／审核台／增长数据／私密帖／改稿） ── */
.community-page{
  max-width:940px;
  margin:0 auto;
  padding:28px 24px 72px;
  font:15px/1.7 "Noto Sans SC","Microsoft YaHei",sans-serif;
  color:var(--tx,#1e293b);
}
.community-page-head{margin-bottom:20px}
.community-page h1{font-size:24px;font-weight:800;letter-spacing:-.2px;margin:0 0 6px}
.community-page-head p{margin:0;color:var(--mu,#64748b);font-size:14px}
.community-page h2{font-size:17px;font-weight:700;margin:0 0 12px}
.community-page h3{font-size:15px;font-weight:700;margin:0 0 8px}

.community-card{
  background:#fff;
  border:1px solid var(--bd,#e2e8f0);
  border-radius:14px;
  padding:20px 22px;
  margin:0 0 14px;
  box-shadow:0 1px 3px rgba(16,42,80,.04);
  overflow-wrap:anywhere;
}
.community-card > :first-child{margin-top:0}
.community-card > :last-child{margin-bottom:0}
.community-card p{margin:8px 0}
.community-card a{color:var(--p,#1a6fc4)}
.community-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:14px}
.community-grid .community-card{margin:0}

/* 分段控件：主分类用胶囊，次级筛选用更轻的一层 */
.community-tabs{display:flex;flex-wrap:wrap;gap:6px;margin:0 0 14px}
.community-tabs a{
  display:inline-flex;align-items:center;justify-content:center;
  height:38px;padding:0 15px;border-radius:9px;
  border:1px solid var(--bd,#e2e8f0);background:#fff;
  color:var(--mu,#475569);font-size:14px;font-weight:600;text-decoration:none;
  transition:.15s;
}
.community-tabs a:hover{border-color:#bcd6f0;background:var(--p-50,#f0f7ff);color:var(--pd,#155a9e)}
.community-tabs a[aria-current]{background:var(--p,#1a6fc4);border-color:var(--p,#1a6fc4);color:#fff}
.community-tabs.is-sub a{height:32px;padding:0 12px;border-radius:16px;font-size:13px;font-weight:500}

.community-actions{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin:14px 0 0}
.community-button{
  display:inline-flex;align-items:center;justify-content:center;gap:6px;
  height:38px;padding:0 16px;border-radius:9px;
  border:1px solid var(--bd,#cbd5e1);background:#fff;
  color:var(--pd,#155a9e);font:600 14px/1 inherit;font-family:inherit;
  text-decoration:none;cursor:pointer;transition:.15s;
}
.community-button:hover{border-color:#bcd6f0;background:var(--p-50,#f0f7ff)}
.community-button.primary{background:var(--p,#1a6fc4);border-color:var(--p,#1a6fc4);color:#fff}
.community-button.primary:hover{background:var(--pd,#155a9e);border-color:var(--pd,#155a9e)}
.community-button.quiet{border-color:transparent;background:transparent}
.community-button.quiet:hover{background:#f1f5f9}
.community-button.danger{color:var(--rd,#c62828);border-color:#f3c9c7}
.community-button.danger:hover{background:#fff4f3;border-color:#e9a9a5}

/* 表单：字段有自己的合理宽度，而不是每个输入框都撑满整块卡片 */
.community-page label{display:block;margin:14px 0 6px;font-size:13.5px;font-weight:600;color:#334155}
.community-page label:first-of-type{margin-top:0}
.community-page input:not([type=checkbox]):not([type=radio]),
.community-page select,
.community-page textarea{
  width:100%;max-width:520px;
  min-height:40px;padding:9px 12px;
  border:1px solid #cbd5e1;border-radius:9px;
  font:15px/1.5 inherit;color:inherit;background:#fff;
  box-sizing:border-box;transition:border-color .15s,box-shadow .15s;
}
.community-page textarea{min-height:120px;resize:vertical}
.community-page select[multiple]{min-height:0;height:auto;padding:6px 8px}
.community-page select[multiple] option{padding:4px 6px;border-radius:5px}
.community-page input:focus,.community-page select:focus,.community-page textarea:focus{
  outline:none;border-color:var(--p,#1a6fc4);box-shadow:0 0 0 3px rgba(26,111,196,.14);
}
.community-page input[type=file]{padding:8px 10px;background:#f8fafc}
.community-field-row{display:flex;flex-wrap:wrap;gap:16px}
.community-field-row > div{flex:1 1 200px;min-width:0}
.community-field-row select,.community-field-row input{max-width:none}
.community-hint{margin:6px 0 0;font-size:12.5px;color:var(--mu,#64748b)}

/* 状态与提示 */
.community-status{
  display:inline-flex;align-items:center;align-self:flex-start;
  flex:0 0 auto;width:auto;height:22px;padding:0 9px;
  border-radius:6px;background:#eef4fb;color:#315c87;
  font-size:12.5px;font-weight:600;
}
.community-status.pending{background:#fff5dc;color:#8a5d0f}
.community-status.returned{background:#fdece9;color:#9f291c}
.community-status.live{background:#e7f6ea;color:#1c6b2a}
.community-note{
  padding:11px 14px;border-radius:0 9px 9px 0;
  background:var(--p-50,#f0f7ff);border-left:3px solid var(--p,#1a6fc4);
  margin:12px 0;font-size:14px;
}
.community-note.warn{background:#fdece9;border-left-color:var(--r,#e53935)}
.community-muted{color:var(--mu,#64748b);font-size:13px}
.community-meta{display:flex;flex-wrap:wrap;gap:8px;color:var(--mu,#64748b);font-size:13px;margin:8px 0}
.community-meta span::after{content:"·";margin-left:8px;color:#cbd5e1}
.community-meta span:last-child::after{content:""}

/* 列表项：标题是入口，状态在上，操作在下 */
/* 纵向 flex 的默认 stretch 会把状态标签拉成整条横幅 */
.community-item{display:flex;flex-direction:column;align-items:flex-start;gap:2px}
.community-item > *{max-width:100%}
.community-item form,.community-item .community-note,.community-item table{width:100%}
.community-item h2{font-size:16px;font-weight:700;margin:6px 0 0;line-height:1.5}
.community-item h2 a{color:var(--tx,#1e293b);text-decoration:none}
.community-item h2 a:hover{color:var(--p,#1a6fc4);text-decoration:underline}
.community-item.is-unread{border-left:3px solid var(--p,#1a6fc4)}

/* 空状态 */
.community-empty{text-align:center;padding:40px 24px}
.community-empty .ce-icon{font-size:32px;line-height:1;margin-bottom:10px}
.community-empty h2{font-size:16px;margin:0 0 6px}
.community-empty p{color:var(--mu,#64748b);margin:0 0 16px}

/* 分页 */
.community-pager{display:flex;align-items:center;justify-content:center;gap:12px;margin:20px 0 0}
.community-pager .pg-info{color:var(--mu,#64748b);font-size:13px}

.community-page table{width:100%;border-collapse:collapse;font-size:14px}
.community-page th,.community-page td{text-align:left;border-bottom:1px solid var(--bd,#e2e8f0);padding:10px 8px}
.community-page a:focus-visible,.community-page button:focus-visible{outline:2px solid var(--p,#1a6fc4);outline-offset:2px}

/* 指标卡 */
.community-metric strong{display:block;font-size:28px;font-weight:800;line-height:1.2;margin:2px 0 6px;color:var(--tx,#1e293b)}
.community-metric h2{font-size:14px;color:var(--mu,#64748b);font-weight:600;margin:0}
.community-metric p{font-size:12.5px;color:var(--mu,#64748b);margin:0}

/* 内页页脚，与站点其余页面同一套 */
.community-footer{
  text-align:center;color:var(--mu,#64748b);font-size:12px;
  padding:26px 16px 22px;border-top:1px solid var(--bd,#e2e8f0);background:#fff;
}
.community-footer a{color:var(--mu,#64748b);margin:0 6px;text-decoration:none}
.community-footer a:hover{color:var(--p,#1a6fc4)}

@media(max-width:899px){
  .community-page{padding:20px 14px 88px}
  .community-page h1{font-size:21px}
  .community-card{padding:16px;border-radius:12px}
  .community-grid{grid-template-columns:minmax(0,1fr)}
  .community-page input:not([type=checkbox]):not([type=radio]),
  .community-page select,.community-page textarea{max-width:none;font-size:16px}
  .community-tabs{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;margin-left:-14px;margin-right:-14px;padding:0 14px}
  .community-tabs::-webkit-scrollbar{display:none}
  .community-tabs a{flex:0 0 auto}
  .community-footer{padding-bottom:calc(22px + env(safe-area-inset-bottom))}
}

/* 移动端底部固定导航：原来 /community、详情页各写一份，发帖页干脆没有。
   统一放这里一份，社区各页表现一致。 */
.mob-nav{display:none}
@media(max-width:899px){
  .mob-nav{
    display:flex;position:fixed;left:0;right:0;bottom:0;z-index:350;
    background:#fff;border-top:1px solid var(--bd,#e2e8f0);
    padding:0 0 env(safe-area-inset-bottom);
    box-shadow:0 -2px 12px rgba(23,47,72,.08);
  }
  .mob-nav a{
    flex:1;min-width:0;min-height:56px;
    display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;
    padding:6px 2px;color:var(--mu,#64748b);font-size:10.5px;text-decoration:none;
  }
  .mob-nav a.active{color:var(--p,#1a6fc4);font-weight:700}
  .mob-nav .mn-icon{font-size:21px;line-height:1.1}
  .mob-nav a.pub-btn{
    color:#fff;background:linear-gradient(135deg,var(--o,#f57c00),var(--o2,#ff9800));
    border-radius:14px 14px 0 0;margin:0 6px;font-weight:700;
    box-shadow:0 -3px 14px rgba(245,124,0,.28);
  }
  body{padding-bottom:calc(56px + env(safe-area-inset-bottom))}
}

/* ── 悬浮按钮的排布 ──────────────────────────────────────────
   社区页上同时有三个 fixed 按钮，各自的定位分散在三份样式里：
     #ux-btt   回到顶部（ux.js 注入）  bottom:76px left:16px
     .fab-post 发帖（page-community.css） bottom:72px right:16px
     #hw-fab   智多星助手（helper.css）   bottom:74px right:14px
   后两个几乎落在同一点，移动端直接叠在一起，而且三个都压在
   56px 高的底部导航上。这里统一按同一个基准线重新排：
   底部导航之上留一行放「回到顶部」和助手，发帖再叠一层。 */
@media(max-width:899px){
  :root{--comm-fab-base:calc(66px + env(safe-area-inset-bottom))}
  body:has(.community-subnav) #ux-btt{
    bottom:var(--comm-fab-base)!important;left:14px!important;right:auto!important;z-index:340;
  }
  body:has(.community-subnav) #hw-fab{
    bottom:var(--comm-fab-base)!important;right:14px!important;z-index:340;
  }
  body:has(.community-subnav) #hw-tip{bottom:calc(var(--comm-fab-base) + 60px)!important;right:14px!important}
  /* 发帖叠在助手上面一层，两者都不再压住底部导航 */
  body:has(.community-subnav) .fab-post{
    bottom:calc(var(--comm-fab-base) + 62px)!important;right:14px!important;z-index:340;
  }
  /* 正在写帖子时不需要再弹一个发帖入口，助手也让位给编辑器 */
  body:has(#post-form) .fab-post,body:has(#post-form) #hw-fab{display:none!important}
}
@media(min-width:900px){
  /* 桌面端助手和回到顶部同在右下角，助手让开一行 */
  body:has(.community-subnav) #hw-fab{bottom:88px}
}

/* ── 3. /community 与详情页的既有版式修补 ────────────────────── */
.community-options{margin:16px 0;padding:0 14px;border:1px solid var(--bd,#dce5ef);border-radius:10px;background:#f8fafc}
.community-options summary{min-height:44px;display:list-item;padding:12px 0;cursor:pointer;font-weight:600;color:#315c87}
.community-options[open]{padding-bottom:14px}
.community-options summary:focus-visible{outline:2px solid var(--p,#1768b2);outline-offset:3px}

/* 表头 + 子导航已经占掉两条，封面再来 220px 首屏就只剩标题了 */
body:has(.community-subnav) .group-cover{height:150px;min-height:0}
body:has(.community-subnav) .comm-wrap{margin-top:16px}
@media(max-width:899px){
  body:has(.community-subnav) .group-cover{height:96px}
  body:has(.community-subnav) .group-icon{width:56px;height:56px;font-size:26px;margin-top:-28px}
  body:has(.community-subnav) .group-name{font-size:19px;line-height:1.4}
}

.comm-wrap .post-card{border:1px solid #dce5ef;border-radius:14px;box-shadow:0 2px 8px rgba(22,54,90,.02);margin-bottom:18px}
.comm-wrap .post-card-body{padding:20px 22px}
.comm-wrap .post-title{font-size:19px;line-height:1.55;margin:12px 0 8px;overflow-wrap:anywhere}
.comm-wrap .post-excerpt{font-size:15px;line-height:1.75;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.comm-wrap .post-tags{gap:6px;margin:12px 0}
.comm-wrap .post-imgs-1 img{width:100%;height:auto;max-height:360px;object-fit:contain;background:#f3f6fa}
.comm-wrap .post-actions{margin-top:14px;gap:4px}
.comm-wrap .action-btn{min-height:44px}
.comm-wrap .feed-toolbar{flex-wrap:wrap;gap:12px}
.comm-wrap .sort-tabs{max-width:100%;overflow-x:auto;white-space:nowrap}
.comm-wrap .comm-search{flex:1 1 220px;min-width:0}
.comm-wrap .comm-search input{min-width:0;width:100%;min-height:44px}

.rich-content,.post-content{overflow-wrap:anywhere}
.community-rich{overflow-wrap:anywhere}
.community-rich img,.post-content img,.rich-content img{max-width:100%;height:auto}
.community-rich table,.post-content table{display:block;max-width:100%;overflow:auto}
.community-rich pre,.post-content pre{white-space:pre-wrap;overflow-wrap:anywhere}
.comm-bubble,.post-author-info{min-width:0}
.post-author-name{flex-wrap:wrap}
.comment-item,.comm-reply-item{scroll-margin-top:118px}

/* 帖子筛选（地区／类型）：与排序标签同一层级的一行控件 */
/* 两种用法：列表页是紧凑的一行筛选（select 直接是子元素），
   发帖/改稿页是「标签在上」的字段（包在 .cd-field 里）。 */
.community-dimensions{display:flex;gap:10px;flex-wrap:wrap;align-items:flex-end;margin:14px 0}
.community-dimensions select{
  min-height:40px;padding:9px 12px;
  border:1px solid #c8d8e8;border-radius:9px;background:#fff;font:inherit;
}
.community-dimensions > select{flex:0 1 auto;width:auto;min-width:132px;max-width:100%}
.community-dimensions > button{flex:0 0 auto}
.community-dimensions .cd-field{flex:1 1 200px;min-width:0}
.community-dimensions .cd-field select{width:100%}
.community-dimensions select:focus{outline:none;border-color:var(--p,#1a6fc4);box-shadow:0 0 0 3px rgba(26,111,196,.14)}

@media(max-width:899px){
  .comm-wrap{padding:0 12px;margin-top:14px}
  .comm-wrap .post-card-body{padding:16px}
  .comm-wrap .post-title{font-size:18px}
  .comm-wrap .post-imgs-1 img{max-height:260px}
  .comm-wrap .comm-search{flex-basis:100%}
  .comm-wrap .sort-tabs{display:flex;flex-wrap:nowrap;justify-content:flex-start;gap:4px;overflow-x:auto;width:100%;min-width:0;scrollbar-width:thin}
  .comm-wrap .sort-tab{flex:0 0 auto;width:auto;min-height:40px;padding:10px 12px;line-height:20px;white-space:nowrap;text-align:center}
  .comm-wrap .feed-toolbar{padding:10px;gap:8px}
  #post-form .community-dimensions{display:block}
  #post-form input:not([type=checkbox]):not([type=hidden]),#post-form select,#post-form .editor-body{font-size:16px}
  #post-form .editor-body{min-height:220px;line-height:1.8}
  #post-form .tb-btn,#post-form .tb-select{min-height:44px;min-width:36px}
  #post-form .cat-picker{grid-template-columns:repeat(2,minmax(0,1fr))}
  .comment-item,.comm-reply-item{scroll-margin-top:70px}
}

@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto!important}
  *,*::before,*::after{animation-duration:.01ms!important;transition-duration:.01ms!important}
}