/* forum.css — 论坛 Flarum 化组件层（UI-DS4）。
   借 Flarum 的**模式**（无边框面/行头像节奏/未读用字重/帖体加松/停靠 composer/悬停显操作），
   消费本站温度光谱令牌（tokens.css）——不硬编码品牌色、不改全局 app.css。仅 community 模板加载。
   Flarum 两大签名落地：① 几乎零边框（用 --soft 填充 / --shadow 软阴影分隔，不用 1px 线）
   ② 主色 --c-cool 极克制（链接/激活/主按钮/未读/聚焦边框）。 */

.forum { max-width: 940px; margin: 28px auto 96px; padding: 0 16px; }
.forum-narrow { max-width: 824px; }

/* ---------- 字母头像（确定性配色由内联 hsl 给；此处只管形与居中） ---------- */
.f-av {
  --s: 36px;
  width: var(--s); height: var(--s); border-radius: 50%; flex-shrink: 0;
  display: inline-flex; align-items: center; justify-content: center;
  color: #fff; font-size: calc(var(--s) / 2.2); font-weight: 600; line-height: 1;
  overflow: hidden;
}
.f-av-sm { --s: 22px; }
.f-av-lg { --s: 56px; }

/* ---------- 讨论列表：无边框行 + 头像左槽 + hover 软填充 ---------- */
.disc { list-style: none; margin: 0; padding: 0; }
.disc-row {
  display: grid; grid-template-columns: 40px 1fr auto; gap: 12px; align-items: start;
  padding: 12px; margin: 0 -12px; border-radius: var(--radius-sm);
  text-decoration: none; color: inherit; transition: background .16s;
}
.disc-row:hover { background: var(--soft); }
.disc-row + .disc-row { box-shadow: 0 -1px 0 var(--line); }   /* 发丝分隔，非 1px 边 */
.disc-av { grid-column: 1; margin-top: 2px; }
.disc-main { grid-column: 2; min-width: 0; }
.disc-title {
  font-size: 15.5px; line-height: 1.35; color: var(--ink);
  font-weight: 400;                                            /* 已读=常规字重 */
  margin: 0 0 3px; overflow: hidden; text-overflow: ellipsis; display: -webkit-box;
  -webkit-line-clamp: 2; -webkit-box-orient: vertical;
}
.disc-row.is-unread .disc-title { font-weight: 700; }         /* 未读=字重，不是颜色 */
.disc-meta { font-size: 11.5px; color: var(--muted); display: flex; gap: 7px; flex-wrap: wrap; align-items: center; }
.disc-meta b { color: var(--ink-2); font-weight: 600; }
.disc-side { grid-column: 3; display: flex; flex-direction: column; align-items: flex-end; gap: 4px; text-align: right; }
.disc-count { font-size: 12px; color: var(--muted); white-space: nowrap; }
.disc-row.is-unread .disc-count { color: var(--ink); font-weight: 700; }
.disc-newpill {
  font-size: 10.5px; font-weight: 700; color: #fff; background: var(--c-hot);
  padding: 1px 7px; border-radius: 999px; white-space: nowrap;
}

/* ---------- 标签实心 chip（填充标签色 + 白字，非描边） ---------- */
.tchip {
  display: inline-block; font-size: 11px; font-weight: 600; color: #fff;
  padding: 1px 8px; border-radius: 999px; line-height: 1.6; white-space: nowrap;
  text-decoration: none;
}

/* ---------- 帖内楼层流：扁平 + 头像左槽 + 悬停显操作 ---------- */
.fstream { margin: 4px 0 0; }
.fpost {
  position: relative; display: grid; grid-template-columns: 44px 1fr; gap: 12px;
  padding: 18px 4px; transition: box-shadow .2s;
}
.fpost + .fpost { box-shadow: 0 -1px 0 var(--line); }
.fpost.is-best { background: var(--ok-soft); border-radius: var(--radius-sm); padding-left: 12px; padding-right: 12px; }
.fpost-av { grid-column: 1; }
.fpost-body { grid-column: 2; min-width: 0; }
.fpost-head { display: flex; gap: 8px; align-items: baseline; flex-wrap: wrap; font-size: 12.5px; color: var(--muted); }
.fpost-author { color: var(--ink); font-weight: 600; text-decoration: none; }
.fpost-author:hover { color: var(--c-cool); }
.fpost-content { margin: 8px 0 10px; font-size: 15px; line-height: 1.75; color: var(--ink); overflow-wrap: break-word; }
.fpost-content > *:last-child { margin-bottom: 0; }
.fpost-actions { display: flex; gap: 4px; align-items: center; opacity: 1; transition: opacity .18s; flex-wrap: wrap; }
/* 桌面：安静直到悬停/聚焦（Flarum 手感）；触屏无 hover 故默认显 */
@media (hover: hover) and (min-width: 821px) {
  .fpost-actions { opacity: 0; }
  .fpost:hover .fpost-actions, .fpost:focus-within .fpost-actions { opacity: 1; }
}
.fpost-act {
  background: transparent; border: 0; cursor: pointer; color: var(--muted);
  font-size: 12px; padding: 4px 8px; border-radius: var(--radius-sm); display: inline-flex; gap: 4px; align-items: center;
}
.fpost-act:hover { background: var(--soft); color: var(--ink); }
.fpost-act.is-on { color: var(--c-cool); font-weight: 600; }

/* 事件帖：静默灰一行，图标占左槽 */
.fevent { display: grid; grid-template-columns: 44px 1fr; gap: 12px; padding: 9px 4px; font-size: 12.5px; color: var(--muted); box-shadow: 0 -1px 0 var(--line); }
.fevent-ico { grid-column: 1; text-align: right; opacity: .5; }
.fevent b { color: var(--ink-2); }

/* 跳未读 / 时间断层 小标签（大写-粗-11px 编辑体） */
.flabel { text-transform: uppercase; letter-spacing: .04em; font-weight: 700; font-size: 11px; color: var(--muted); }

/* ---------- 骨架屏（灰条替代转圈） ---------- */
.skel { background: var(--soft); border-radius: var(--radius-sm); animation: fpulse 1.2s ease-in-out infinite; }
.skel-line { height: 12px; margin-bottom: 8px; }
@keyframes fpulse { 0%,100% { opacity: 1; } 50% { opacity: .5; } }

/* ---------- 停靠式底部 composer（P1 旗舰交互） ---------- */
.cdock {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 60;
  background: var(--card); box-shadow: 0 -2px 16px rgba(11,58,99,.14);
  border-radius: var(--radius) var(--radius) 0 0;
  transform: translateY(100%); transition: transform .2s ease-out, height .2s ease-out;
  display: flex; flex-direction: column; height: min(52vh, 420px);
  max-width: 940px; margin: 0 auto;
}
.cdock.is-open { transform: translateY(0); }
.cdock.is-min { height: 46px; }
.cdock.is-full { height: 100%; border-radius: 0; top: 0; max-width: none; }
.cdock-bar {
  display: flex; align-items: center; gap: 8px; padding: 10px 14px; cursor: pointer;
  box-shadow: 0 1px 0 var(--line); flex-shrink: 0;
}
.cdock-title { font-weight: 600; font-size: 14px; flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cdock-ctl { background: transparent; border: 0; cursor: pointer; color: var(--muted); font-size: 14px; padding: 4px 8px; border-radius: var(--radius-sm); }
.cdock-ctl:hover { background: var(--soft); color: var(--ink); }
.cdock-body { flex: 1; overflow: auto; padding: 12px 14px; }
.cdock.is-min .cdock-body { display: none; }
.cdock-fab {                              /* 唤起按钮：右下角悬浮 */
  position: fixed; right: 20px; bottom: 20px; z-index: 55;
}

/* ---------- Scrubber 读位条（右栏浮标；position:fixed 不入布局流，零溢出风险） ---------- */
.scrubber {
  position: fixed; top: 118px; bottom: 118px; z-index: 30; width: 34px;
  display: flex; flex-direction: column; align-items: center; gap: 8px;
  color: var(--muted); font-size: 10.5px; user-select: none;
}
.scrubber-btn { background: transparent; border: 0; cursor: pointer; color: var(--muted); font-size: 15px; line-height: 1; padding: 2px; border-radius: var(--radius-sm); }
.scrubber-btn:hover { color: var(--c-cool); background: var(--soft); }
.scrubber-track { position: relative; width: 5px; flex: 1; background: var(--soft); border-radius: 999px; cursor: pointer; min-height: 90px; }
.scrubber-bar { position: absolute; left: 0; top: 0; width: 5px; background: var(--c-cool); border-radius: 999px; opacity: .35; }
.scrubber-handle { position: absolute; left: 50%; top: 0; transform: translate(-50%, -50%); width: 14px; height: 14px; border-radius: 50%; background: var(--c-cool); box-shadow: 0 2px 6px rgba(11,58,99,.28); cursor: grab; }
.scrubber-handle:active { cursor: grabbing; }
.scrubber-info { font-variant-numeric: tabular-nums; text-align: center; white-space: nowrap; }
@media (max-width: 999px) { .scrubber { display: none; } }   /* 窄屏隐藏，改用底部跳未读/回顶 */

/* ---------- 排序/子导航条 ---------- */
.fbar { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; margin: 0 0 14px; }
.fbar-sp { flex: 1; }

/* ---------- 排序 segmented control（2026-08-06） ----------
   分类筛选（板块/标签）与排序是两件事，此前两行控件是同款胶囊、视觉重量一样重，
   读者读不出层级。排序属次级操作 ⇒ 降一档：无边框文字态 + 选中项浮起。
   ⛔ 不新增颜色，全部取既有令牌。 */
.f-sortbar { display: flex; align-items: center; gap: 10px; margin: 0 0 12px; flex-wrap: wrap; }
.f-sortbar-lab { font-family: var(--mono); font-size: 11px; letter-spacing: .1em;
  text-transform: uppercase; color: var(--muted); }
.f-seg { display: inline-flex; background: var(--soft); border: 1px solid var(--line);
  border-radius: 9px; padding: 3px; gap: 2px; }
.f-seg-btn { font-size: 12.5px; line-height: 1.5; padding: 4px 11px; border-radius: 6px;
  color: var(--muted); text-decoration: none; white-space: nowrap;
  transition: background .18s, color .18s; }
.f-seg-btn:hover { color: var(--ink); }
.f-seg-btn.is-on { background: var(--card); color: var(--ink); font-weight: 600;
  box-shadow: 0 1px 3px rgba(11, 58, 99, .10); }
.f-seg-btn:focus-visible { outline: 2px solid var(--c-cool); outline-offset: 1px; }

/* ---------- 讨论行摘要（2026-08-06） ----------
   一条帖子只有标题+标签+时间时，列表撑不起版面（1 条帖的页面下半截全空）。
   摘要取正文前段，两行截断——⛔ 用既有字段，不改模型。 */
.disc-exc { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  overflow: hidden; font-size: 12.5px; line-height: 1.55; color: var(--muted);
  margin: 3px 0 4px; }

/* ---------- 响应式（三端硬验收：≤820 单列化头像收窄，≤680 更紧，≤380 保底） ---------- */
@media (max-width: 820px) {
  .fpost { grid-template-columns: 34px 1fr; gap: 10px; }
  .fevent { grid-template-columns: 34px 1fr; gap: 10px; }
  .fpost-av .f-av { --s: 30px; }
  .cdock { border-radius: var(--radius) var(--radius) 0 0; height: min(60vh, 460px); }
}
@media (max-width: 680px) {
  /* 触控目标 ≥44px（开发红线④③）——桌面的 27px 高在手机上点不准 */
  .f-seg { width: 100%; }
  .f-seg-btn { flex: 1; min-height: 42px; display: flex; align-items: center;
    justify-content: center; padding: 0 8px; }
  .disc-row { grid-template-columns: 32px 1fr; }
  .disc-side { grid-column: 2; grid-row: 2; flex-direction: row; align-items: center; margin-top: 4px; }
  .disc-av .f-av { --s: 30px; }
  .fpost-content { font-size: 14.5px; }
  .cdock, .cdock-fab { }         /* 移动 composer 走全屏态由 JS 控 */
}
@media (max-width: 380px) {
  .forum { padding: 0 11px; }
  .disc-title { font-size: 14.5px; }
}