/* ==========================================================================
   意见反馈 · 业务层样式
   在 Onyx UI 之上的一薄层：只补 Onyx 没提供的排版。
   颜色 / 圆角 / 阴影 / 间距一律沿用 --ox-* 变量，所以深浅色自动跟随。
   ========================================================================== */

/* ── 骨架 ─────────────────────────────────────────────────────────────────── */

.fb-main {
  width: 100%;
  max-width: 880px;
  margin-inline: auto;
  padding: var(--ox-sp-8) var(--ox-sp-5) var(--ox-sp-10);
}

/* Onyx 把按钮/分段控件当成 <button> 写，用作 <a> 时补两行 */
a.ox-btn,
a.ox-segmented__item { text-decoration: none; }
.ox-segmented__item { display: inline-flex; align-items: center; justify-content: center; }
.fb-inline { display: inline-flex; margin: 0; }

/* ── 页头 ─────────────────────────────────────────────────────────────────── */

.fb-hero {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: var(--ox-sp-4);
  margin-bottom: var(--ox-sp-5);
}
.fb-hero__body { flex: 1 1 260px; min-width: 0; }
.fb-hero__body .ox-title { margin: 2px 0 6px; }

.fb-back {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-bottom: var(--ox-sp-4);
  font-size: var(--ox-fs-sm);
  color: var(--ox-text-muted);
  text-decoration: none;
}
@media (hover: hover) {
  .fb-back:hover { color: var(--ox-text); }
}

/* ── 工具条 ───────────────────────────────────────────────────────────────── */

.fb-search { flex: 1 1 220px; min-width: 170px; max-width: 340px; }
.fb-wrap { flex-wrap: wrap; }

.fb-tab-count {
  margin-left: 3px;
  color: var(--ox-text-subtle);
  font-variant-numeric: tabular-nums;
}

/* ── 列表 ─────────────────────────────────────────────────────────────────── */

.fb-list { display: flex; flex-direction: column; }

.fb-item {
  position: relative;
  display: flex;
  align-items: flex-start;
  gap: var(--ox-sp-4);
  padding: var(--ox-sp-4) var(--ox-sp-5);
  border-top: 1px solid var(--ox-border);
  text-decoration: none;
  color: inherit;
  transition: background-color var(--ox-dur) var(--ox-ease);
}
.fb-list > .fb-item:first-child { border-top: 0; }
@media (hover: hover) {
  .fb-item:hover { background: var(--ox-surface-2); }
}

.fb-item__icon {
  flex: none;
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  margin-top: 1px;
  border-radius: var(--ox-radius-sm);
  background: var(--ox-success-soft);
  color: var(--ox-success-text);
}
.fb-item__main { flex: 1 1 0%; min-width: 0; }

.fb-item__title {
  margin: 0;
  font-size: var(--ox-fs-md);
  font-weight: 620;
  letter-spacing: -.01em;
  color: var(--ox-text);
  overflow-wrap: anywhere;
}
.fb-item__title a { color: inherit; text-decoration: none; }
@media (hover: hover) {
  .fb-item__title a:hover { color: var(--ox-info-text); }
}

/* 列表行整行可点：链接背后铺一层透明“拉伸点击区”。
   支持按钮那行会被 .fb-item__actions 抬到上层，所以不会被遮住。 */
.fb-item--link .fb-item__title a::after {
  content: "";
  position: absolute;
  inset: 0;
}
.fb-item--link .fb-item__title a:focus-visible { outline: 0; }
.fb-item--link .fb-item__title a:focus-visible::after {
  outline: 2px solid var(--ox-primary);
  outline-offset: -2px;
}

.fb-item__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px var(--ox-sp-2);
  margin: 5px 0 0;
  font-size: var(--ox-fs-sm);
  color: var(--ox-text-muted);
}
.fb-item__excerpt {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
  margin: 6px 0 0;
  font-size: var(--ox-fs-sm);
  color: var(--ox-text-muted);
}

.fb-item__actions {
  position: relative;   /* 盖在整行拉伸链接之上 */
  z-index: 1;
  display: flex;
  flex: none;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
  gap: var(--ox-sp-2);
}
/* 行内带操作按钮的变体：主内容用 flex-basis:0，按钮就不会被挤下去 */
.fb-item--row { flex-wrap: wrap; }

.fb-dot {
  width: 3px;
  height: 3px;
  border-radius: 50%;
  background: currentColor;
  opacity: .45;
}
.fb-num {
  font-family: var(--ox-font-mono);
  font-size: .92em;
  color: var(--ox-text-subtle);
}

/* ── 支持按钮 ─────────────────────────────────────────────────────────── */

.fb-like { gap: 6px; }
.fb-like__icon { flex: none; }
.fb-like__count { font-variant-numeric: tabular-nums; font-weight: 650; }

/* 借用 Onyx 自己的按钮变量，连悬停 / 按下都跟着走 */
.fb-like.is-liked {
  --_bg: var(--ox-danger-soft);
  --_bg-hover: var(--ox-danger-soft-hover);
  --_fg: var(--ox-danger-text);
}
.fb-like.is-liked .fb-like__icon { fill: currentColor; }
.fb-like[disabled] { cursor: progress; }

/* 只在这一下点击后播，不在页面加载时满屏乱跳 */
.fb-like.is-bumped .fb-like__icon { animation: fb-like-pop .34s var(--ox-ease-out); }

@keyframes fb-like-pop {
  0% { transform: scale(.62); }
  55% { transform: scale(1.22); }
  100% { transform: scale(1); }
}

@media (prefers-reduced-motion: reduce) {
  .fb-like.is-bumped .fb-like__icon { animation: none; }
}

/* 管理台里只读的支持数 */
.fb-like-stat {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  color: var(--ox-danger-text);
  font-variant-numeric: tabular-nums;
}

/* ── 空状态 ───────────────────────────────────────────────────────────────── */

.fb-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--ox-sp-3);
  padding: var(--ox-sp-10) var(--ox-sp-5);
  text-align: center;
}
.fb-empty .ox-subtitle { max-width: 30em; }
.fb-empty__icon {
  display: grid;
  place-items: center;
  width: 46px;
  height: 46px;
  margin-bottom: 2px;
  border-radius: var(--ox-radius-pill);
  background: var(--ox-surface-3);
  color: var(--ox-text-muted);
}

/* ── 分页 ─────────────────────────────────────────────────────────────────── */

.fb-pager {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--ox-sp-3);
  padding: var(--ox-sp-4) var(--ox-sp-5);
  border-top: 1px solid var(--ox-border);
}
.fb-pager__info { font-size: var(--ox-fs-sm); color: var(--ox-text-muted); }

/* ── 详情页 ───────────────────────────────────────────────────────────────── */

.fb-article__title { font-size: var(--ox-fs-2xl); letter-spacing: -.02em; }

.fb-text { white-space: pre-wrap; overflow-wrap: anywhere; margin: 0; }

.fb-detail-meta__name { display: block; font-size: var(--ox-fs-sm); font-weight: 620; }
.fb-detail-meta__time { display: block; font-size: var(--ox-fs-xs); color: var(--ox-text-muted); }

.fb-contact {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 2px 9px;
  border-radius: var(--ox-radius-pill);
  background: var(--ox-surface-3);
  color: var(--ox-text-muted);
  font-size: var(--ox-fs-xs);
  overflow-wrap: anywhere;
}

.fb-footnote {
  margin: var(--ox-sp-4) 0 0;
  font-size: var(--ox-fs-sm);
  color: var(--ox-text-subtle);
  overflow-wrap: anywhere;
}

/* ── 私密链接 ─────────────────────────────────────────────────────────────── */

.fb-permalink {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--ox-sp-3);
  padding: var(--ox-sp-3) var(--ox-sp-4);
  border: 1px dashed var(--ox-border-strong);
  border-radius: var(--ox-radius-md);
  background: var(--ox-surface-2);
}
.fb-permalink__url {
  flex: 1 1 220px;
  min-width: 0;
  font-family: var(--ox-font-mono);
  font-size: var(--ox-fs-sm);
  color: var(--ox-text-muted);
  overflow-wrap: anywhere;
}

/* ── 表单 ─────────────────────────────────────────────────────────────────── */

.fb-switch { align-items: flex-start; }
.fb-switch .ox-switch__track { margin-top: 2px; }
.fb-switch__text { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.fb-switch__title { font-size: var(--ox-fs-md); font-weight: 600; }

.fb-counter {
  font-size: var(--ox-fs-xs);
  color: var(--ox-text-subtle);
  font-variant-numeric: tabular-nums;
}
.fb-counter.is-near { color: var(--ox-warning-text); }
.fb-counter.is-over { color: var(--ox-danger-text); }

/* ── 登录 / 错误页 ────────────────────────────────────────────────────────── */

.fb-login { max-width: 440px; margin: var(--ox-sp-8) auto 0; }

/* ==========================================================================
   移动端
   断点跟 Onyx 保持一致：≤1024 隐藏 .ox-hide-md，≤640 隐藏 .ox-hide-sm。
   ========================================================================== */

/* ── 平板 ──────────────────────────────────────────────────────────────── */
@media (max-width: 1024px) {
  .fb-main { max-width: 720px; }
}

/* ── 手机 ──────────────────────────────────────────────────────────────── */
@media (max-width: 640px) {
  .fb-main {
    max-width: none;
    padding: var(--ox-sp-6) max(var(--ox-sp-4), env(safe-area-inset-left, 0px)) var(--ox-sp-8);
  }

  /* 页头：标题与主按钮各占一整行 */
  .fb-hero { flex-direction: column; align-items: stretch; gap: var(--ox-sp-3); }
  /* 竖排之后 flex-basis 变成「高度」而不是宽度了 ——
     桌面端的 260px 基准必须重置，否则标题下面会空出一大片 */
  .fb-hero__body { flex: 1 1 auto; }
  .fb-hero .ox-title { font-size: var(--ox-fs-2xl); }
  .fb-hero > .ox-btn { width: 100%; }

  /* 工具条：搜索独占一行，排序 / 筛选紧随其后 */
  .fb-toolbar {
    flex-wrap: wrap;
    row-gap: var(--ox-sp-3);
    padding: var(--ox-sp-3) var(--ox-sp-4);
  }
  .fb-toolbar > .ox-spacer { display: none; }
  .fb-search { flex: 1 1 100%; max-width: none; }
  .fb-toolbar > .ox-segmented { flex: 1 1 auto; }
  .fb-toolbar > .ox-segmented .ox-segmented__item { flex: 1 1 auto; padding-inline: 8px; }

  /* 公开列表：图标 + 正文占第一行，支持按钮另起一行 */
  .fb-item--link {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    column-gap: var(--ox-sp-3);
    row-gap: var(--ox-sp-2);
    padding: var(--ox-sp-4);
  }
  .fb-item--link .fb-item__icon { grid-area: 1 / 1; }
  .fb-item--link .fb-item__main { grid-area: 1 / 2; }
  .fb-item--link .fb-item__actions { grid-area: 2 / 2; justify-content: flex-start; }

  /* 管理列表：正文与操作各占一整行 */
  .fb-item--row { flex-direction: column; gap: var(--ox-sp-3); padding: var(--ox-sp-4); }
  .fb-item--row .fb-item__main,
  .fb-item--row .fb-item__actions { flex: 1 1 auto; width: 100%; }
  .fb-item--row .fb-item__actions { justify-content: flex-start; }

  /* 详情页底部：支持按钮与联系方式都换到自己的行 */
  .fb-detail-meta { flex-wrap: wrap; row-gap: var(--ox-sp-3); }
  .fb-detail-meta > .ox-spacer { display: none; }
  .fb-detail-meta__like { flex: 1 1 100%; }
  .fb-detail-meta__like .ox-btn { width: 100%; }
  .fb-detail-meta .fb-contact { flex: 1 1 100%; }

  /* 卡片页脚：主按钮拉满一行 */
  .fb-bar { flex-wrap: wrap; row-gap: var(--ox-sp-3); }
  .fb-bar > .ox-btn--primary { flex: 1 1 100%; }
  .fb-bar > .ox-spacer { display: none; }
  /* “站长操作 / 查看 / 公开 / 删除”这类页脚在窄机上也要能换行 */
  .ox-card__footer { flex-wrap: wrap; row-gap: var(--ox-sp-2); }

  .fb-permalink { padding: var(--ox-sp-3); }
  .fb-permalink__url { flex: 1 1 100%; font-size: var(--ox-fs-xs); }
  .fb-permalink > .ox-btn { flex: 1 1 100%; }

  .fb-pager { flex-wrap: wrap; padding: var(--ox-sp-3) var(--ox-sp-4); }
  .fb-pager__info { flex: 1 1 100%; order: 3; text-align: center; }
  .fb-pager > .ox-btn { flex: 1 1 auto; }

  .fb-login { margin-top: var(--ox-sp-6); }
  .fb-footnote { font-size: var(--ox-fs-xs); }
}

/* ── 窄机（iPhone SE 这一档） ─────────────────────────────────────────── */
@media (max-width: 380px) {
  .fb-item__title { font-size: var(--ox-fs-sm); }
  .fb-item--link .fb-item__icon {
    width: 24px;
    height: 24px;
  }
}

/* ── 触摸设备 ─────────────────────────────────────────────────────────── */
@media (pointer: coarse) {
  /* 列表行给足点击高度（Onyx 只管 .ox-btn 这类控件） */
  .fb-item--link { min-height: 64px; }
  .fb-back { min-height: 40px; }
  /* 文字直接点得到，不用长按 */
  .fb-item__title,
  .fb-item__meta { -webkit-user-select: text; user-select: text; }
}