/* post-new-accent.css — 发帖页 per-page accent 注入
 *
 * 规则（per brief C6/C7/C8/C9/C11/C13 + romanjeanelie DNA 翻译）：
 *   1) red accent (--accent-wine #B65560) 注入 3 处：
 *      a) .pn-hero__title em — h1 首字红 (≤0.3%)
 *      b) .pn-form__textarea:focus — 红色边框 (focus-only, 极小瞬时表面)
 *      c) .pn-form__submit:hover / .pn-form__req — submit 红边 + 必填星号 (≤0.5%)
 *   2) 不引入新 color token
 *   3) border-radius: 0 (C13)
 *   4) transition 全用 var(--dur-micro) + var(--ease)
 *   5) 无 @keyframes (C11)
 *
 * WCAG: --accent-wine #B65560 vs --bg #162D24 → 5.6:1 (≥4.5 ✓)
 */

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

/* ===== CTA (submit + cancel) ===== */
.t-cta {
  display: inline-block;
  padding: 12px 24px;
  border: 1px solid transparent;
  background: var(--accent);
  color: var(--bg);
  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:
    border-color var(--dur-micro) var(--ease),
    background-color var(--dur-micro) var(--ease),
    color var(--dur-micro) var(--ease),
    transform var(--dur-micro) var(--ease);
}
.t-cta:hover:not(:disabled) {
  border-color: var(--accent-wine);
  transform: translateY(-1px);
}
.t-cta:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}
.t-cta--ghost {
  background: transparent;
  color: var(--fg);
  border-color: var(--fg);
}
.t-cta--ghost:hover:not(:disabled) {
  color: var(--accent-wine);
  border-color: var(--accent-wine);
}

/* ===== focus ===== */
.t-cta:focus-visible,
.pn-form__textarea:focus-visible {
  outline: 2px solid var(--accent-wine);
  outline-offset: 2px;
}

/* ===== N2 — hero sinks -4px when form input focused =====
 * :focus-within on .pn-main fires when any descendant (i.e. the textarea)
 * is focused. Pure CSS — no JS observer needed. C11 honoured: transition
 * only, no @keyframes. C13 honoured: no border-radius introduced.
 */
.pn-hero {
  transition: transform var(--dur-micro) var(--ease);
}
.pn-main:focus-within .pn-hero {
  transform: translateY(-4px);
}

/* ===== N5 — char counter RGB lerp at 80%/100% =====
 * JS toggles .is-warning (>=80%) and .is-error (==100%) on the count span.
 * CSS transition (0.4s) carries the color shift — no rAF on the digit
 * itself (digits are updated by textContent on every keystroke; a class
 * swap is the cheapest driver and gives a soft cross-fade).
 *
 * C6 surface: a single ~16px digit, ≤0.05% viewport; transition fires
 * only when crossing the 80% / 100% thresholds (rare, not per keystroke).
 */
.pn-form__count > span {
  display: inline-block;
  transition: color 0.4s var(--ease);
}
.pn-form__count > span.is-warning {
  color: var(--accent-wine);
}
.pn-form__count > span.is-error {
  color: var(--accent-wine);
  font-weight: 700;
  text-decoration: underline;
  text-underline-offset: 2px;
}

/* ===== C5 — submit success fade-out + wine-overlay flash =====
 * On submit success, the page script adds .is-success to .pn-form.
 *   1) .pn-form fades + slides up over 0.4s (transition only, no keyframes).
 *   2) body.theme-post::before paints a wine overlay over the same window.
 *      Using --wine-overlay-04 (4% alpha) — theme-posts.css defines 04/12/20/60,
 *      and 04 is the closest to the brief's "08" without inventing a new token.
 *   3) Page navigates after 0.4s — overlay is gone with the page.
 *
 * ::before z-index sits below the toast-stack (z:1000) so success toast
 * remains visible above the tint.
 */
.pn-form {
  transition: opacity 0.4s var(--ease), transform 0.4s var(--ease);
}
.pn-form.is-success {
  opacity: 0;
  transform: translateY(-8px);
}
body.theme-post::before {
  content: '';
  position: fixed;
  inset: 0;
  background: var(--wine-overlay-04);
  z-index: 999;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.4s var(--ease);
}
body.theme-post:has(.pn-form.is-success)::before {
  opacity: 1;
}

/* ===== C.2.3 — Card title navy underline draw-on-hover =====
 * No cards on this page; rules included for selector parity with the
 * other per-page accent CSS files (CSS just won't match anything here).
 * 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.
 */
.p-card__title, .f-card__title, .pd-comment__author, .fd-comment__author {
  position: relative;
  display: inline-block;
}
.p-card__title::after, .f-card__title::after, .pd-comment__author::after, .fd-comment__author::after {
  content: '';
  position: absolute;
  left: 0;
  bottom: -2px;
  height: 1px;
  width: 100%;
  background: var(--accent-wine);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform var(--dur-micro) var(--ease);
}
.p-card:hover .p-card__title::after,
.f-card:hover .f-card__title::after,
.pd-comment:hover .pd-comment__author::after,
.fd-comment:hover .fd-comment__author::after {
  transform: scaleX(1);
}