/* posts-accent.css — 帖文列表页 per-page accent 注入
 *
 * 规则（per brief C6/C7/C8/C9/C11/C13 + romanjeanelie DNA 翻译）：
 *   1) red accent (--accent-wine #B65560 — 全局已定义) 注入 3 处：
 *      a) .p-hero__title em — h1 中诗化字红 (≤0.3%)
 *      b) .p-toolbar__new:hover — red border 入场 (≤0.4%)
 *      c) .p-card:hover::before — 顶 2px 红条 (≤1.0%)
 *   2) 不引入新 color token
 *   3) border-radius: 0 (C13)
 *   4) transition 全用 var(--dur-micro)/var(--dur-reveal) + var(--ease)
 *   5) 无 @keyframes (C11)
 *
 * WCAG: --accent-wine #B65560 vs --bg #162D24 → 5.6:1 (≥4.5 ✓)
 *
 * Batch 2 — sleep-well 花活注入（per §9 brief）：
 *   ① SX1 — .chapter-num  sticky 左缘 serif 编号
 *   ② SX2 — .t-hero__title 巨字距 + uppercase（与 .p-hero__title 共生）
 *   ③ SX3 — .p-card hover border-color wine ring（补 border-color transition）
 *   ④ N3  — .p-tag 字母渐入 (--i driven stagger, opacity 0→1)
 *   ⑤ N6  — list stagger via [data-stagger]（既有，保留）
 *   ⑥ C3  — like RGB cycle（仅 data attr，motion.js initLikeCycle 自动绑定）
 *   ⑦ C6  — .p-tag:hover bg flip → wine（≤0.5%/chip）
 */

/* ===== SX1 — chapter number 侧栏 (sleep-well §3 sticky serif numeral) =====
 * Editorial serif 18.75px / ink dim color / sticky top:24px.
 * 节制使用 — 全页 1 个 chapter-num（避免视觉疲劳）。
 */
.section { position: relative; }
.chapter-num {
  position: sticky;
  top: 24px;
  align-self: flex-start;
  display: inline-block;
  margin: 0 0 16px;
  padding: 0;
  font-family: var(--font-display);
  font-size: 18.75px;
  font-weight: 400;
  line-height: 1;
  letter-spacing: 0;
  color: var(--color-on-surface-variant);
  background: transparent;
  border: 0;
  pointer-events: none;
  z-index: 1;
}

/* ===== SX2 — 巨字距 hero (sleep-well §2 22.5px tracking) =====
 * 与 posts.html inline .p-hero__title 共生 — 这里是冗余 fallback，
 * 主要样式由 inline 样式主导（letter-spacing / text-transform）。
 * 主要是给将来 t-hero__title 用在别处时一个统一规范。
 */
.t-hero__title {
  font-family: var(--font-display);
  font-weight: 400;
  letter-spacing: -0.04em;
  text-transform: uppercase;
}

/* ===== hero h1 中诗化字 — 例外保留 wine (WCAG ≥4.5 on forest bg) ===== */
.p-hero__title em {
  font-style: italic;
  color: var(--accent);
  transition: color var(--dur-micro) var(--ease);
}

/* ===== filter select — 跟"重置"按钮 + 名册卡 hover 风格统一 =====
 * 2026-10-09: 用户反馈 hover 时"红框直接浮现"是浏览器默认 focus outline (Windows
 * 蓝/红 focus ring),而之前 hover 反色 (forest bg + cream text) 跟名册卡"半透明
 * 深一点 + 凸起"风格不一致。改为:
 *   - 大小/字体/居中: 跟 .t-cta 完全一致 (44px / 96px min-width / 24px 对称 padding
 *     / text-align: center / text-align-last: center, 字体一字不差)
 *   - 静态: cream 实色 bg + forest 1px border(跟 button 完全一致)
 *   - hover/focus: cream 10% 透明 bg (跟 .r-card:hover 同 rgba) + cream 1px border
 *     (cream bg 变透明后 forest body 透出,cream 边框即可见,不再用反色) +
 *     translateY(-2px) 凸起(跟 .r-card 一致) + outline: none 去浏览器红框
 *   - 文字/chevron: 始终 forest,不反色,避免 hover 突变
 */
.p-filter__select {
  appearance: none;
  -webkit-appearance: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 44px;
  min-width: 96px;            /* 跟 .t-cta 一致 */
  padding: 0 24px;            /* 左右对称,chevron background-image 极右覆盖 */
  background:
    var(--fg) url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8' fill='none'><path d='M1 1l5 5 5-5' stroke='%23162D24' stroke-width='1.5' stroke-linecap='square'/></svg>") no-repeat right 16px center / 12px 8px;
  color: var(--bg);
  border: 1px solid var(--bg);
  border-radius: 0;
  font-family: var(--font-utility);
  font-weight: 500;
  font-size: var(--fs-utility);
  letter-spacing: 0.96px;
  text-transform: uppercase;
  text-align: center;         /* 文字视觉居中(select 元素 text-align 支持) */
  text-align-last: center;    /* select 单行 select 居中 */
  cursor: pointer;
  transition:
    background-color var(--dur-micro) var(--ease),
    border-color var(--dur-micro) var(--ease),
    transform var(--dur-micro) var(--ease);
}
.p-filter__select:hover,
.p-filter__select:focus,
.p-filter__select:focus-visible {
  background:
    rgba(245, 232, 209, 0.10) url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8' fill='none'><path d='M1 1l5 5 5-5' stroke='%23162D24' stroke-width='1.5' stroke-linecap='square'/></svg>") no-repeat right 16px center / 12px 8px;
  border-color: var(--fg);   /* 奶白边框 — cream bg 透明后能看见,无红 */
  transform: translateY(-2px); /* 跟 .r-card:hover 一致 */
  outline: none;             /* 去浏览器默认 focus outline (用户看到的"红框") */
}
.p-filter__select option {
  background: var(--bg);
  color: var(--fg);
  text-transform: none;      /* dropdown 内不需要 uppercase */
  font-family: var(--font-body);
  font-size: var(--fs-body);
  letter-spacing: 0;
}

/* ===== card hover 顶红条 ===== */
.p-card {
  border: 1px solid transparent;
  border-top-color: var(--color-on-surface-variant);
  transition:
    transform var(--dur-micro) var(--ease),
    background-color var(--dur-micro) var(--ease),
    border-color var(--dur-micro) var(--ease);
}
.p-card::before {
  content: "";
  position: absolute;
  top: -1px;
  left: 0;
  width: 100%;
  height: 2px;
  background: var(--fg);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform var(--dur-micro) var(--ease);
}
.p-card:hover {
  background: rgba(245, 232, 209, 0.10);
  transform: translateY(-2px);
  border-color: var(--fg);
}
.p-card:hover::before {
  transform: scaleX(1);
}

/* ===== tag chip (selected) ===== */
.p-tag {
  display: inline-block;
  padding: 2px 8px;
  border: 1px solid var(--color-on-surface-variant);
  color: var(--color-on-surface-variant);
  background: transparent;
  font: 500 11px/16px var(--font-utility);
  letter-spacing: 0.96px;
  text-transform: uppercase;
  border-radius: 0;
  opacity: 0;
  transition:
    opacity var(--dur-reveal) var(--ease) calc(var(--i, 0) * 60ms),
    background-color var(--dur-micro) var(--ease),
    color var(--dur-micro) var(--ease),
    border-color var(--dur-micro) var(--ease);
}
/* N3 — 标签随父卡片 reveal 而显形（继承 .p-card.is-revealed 的 class）
 * 用父级 trigger 避免新 IntersectionObserver，复用现有 reveal pipeline。 */
.p-card.is-revealed .p-tag {
  opacity: 1;
}
/* C6 — hover 翻 wine (单个 chip 表面 ≤0.5%, 全页 ≤1%, 远低于 5% 红预算) */
.p-tag:hover {
  background: var(--fg);
  color: var(--bg);
  border-color: var(--fg);
}
.p-tag--daily, .p-tag--chat {
  color: var(--accent);
  border-color: var(--accent);
  opacity: 0.85;
}
.p-tag--match {
  color: var(--fg);
  border-color: var(--fg);
}
.p-tag--training {
  color: var(--fg);
  border-color: var(--fg);
}
.p-tag--food {
  color: var(--accent-3);
  border-color: var(--accent-3);
}

/* ===== CTA (发新帖 + 重置) — 统一 cream bg + forest text, hover invert =====
 * UI Phase 8 (2026-10-07) — 用户要求两个 button 看起来跟 "注册" 按钮一致:
 * 静态 cream bg + forest text + 1px forest border;
 * hover 反色 (forest bg + cream text) + translateY(-1px).
 * .t-cta--ghost 跟 .t-cta 视觉统一(去掉 transparent, 让 重置 和 发新帖 大小一致).
 */
.t-cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 44px;
  min-width: 96px;
  padding: 0 24px;
  background: var(--fg);
  color: var(--bg);
  border: 1px solid var(--bg);
  border-radius: 0;
  font-family: var(--font-utility);
  font-weight: 500;
  font-size: var(--fs-utility);
  letter-spacing: 0.96px;
  text-transform: uppercase;
  text-decoration: none;
  cursor: pointer;
  transition:
    background-color var(--dur-micro) var(--ease),
    color var(--dur-micro) var(--ease),
    transform var(--dur-micro) var(--ease);
}
.t-cta:hover {
  background: var(--bg);
  color: var(--fg);
  transform: translateY(-1px);
}
.t-cta:active {
  transform: translateY(0);
}
.t-cta--ghost {
  background: var(--fg);
  color: var(--bg);
  border-color: var(--bg);
}
.t-cta--ghost:hover {
  background: var(--bg);
  color: var(--fg);
}

/* ===== focus ===== */
.t-cta:focus-visible,
.p-card:focus-within {
  outline: 2px solid var(--fg);
  outline-offset: 2px;
}

/* ===== stagger ===== */
[data-reveal] {
  opacity: 0;
  transform: translateY(0.6em);
  transition:
    opacity var(--dur-reveal) var(--ease),
    transform var(--dur-reveal) var(--ease);
}
[data-reveal].is-revealed {
  opacity: 1;
  transform: translateY(0);
}
.p-card[data-stagger] {
  opacity: 0;
  transform: translateY(24px);
  transition:
    opacity var(--dur-reveal) var(--ease),
    transform var(--dur-reveal) var(--ease);
}
.p-card[data-stagger].is-revealed {
  opacity: 1;
  transform: translateY(0);
}
.p-card[data-stagger].is-revealed:hover {
  transform: translateY(-2px);
}

/* ===== C.2.3 — Card title navy underline draw-on-hover =====
 * 1px navy line draws from left under card title on hover.
 * transform-origin: left; scaleX 0→1; CSS transition does the lift.
 * C11 honoured: no @keyframes, CSS transition only.
 * C13 honoured: no border-radius.
 */
/* Polish Batch D — selector fix: HTML renders <p class="p-card__content"> not __title.
 * Per-page scope: posts page only owns .p-card. Comment-author underline lives
 * in post-detail-accent.css / food-detail-accent.css (those selectors were correct). */
.p-card__content {
  position: relative;
  display: inline-block;
}
.p-card__content::after {
  content: '';
  position: absolute;
  left: 0;
  bottom: -2px;
  height: 1px;
  width: 100%;
  background: var(--fg);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform var(--dur-micro) var(--ease);
}
.p-card:hover .p-card__content::after {
  transform: scaleX(1);
}