/* 关注按钮样式 —— 独立文件，不挤进 style.css
 *
 * 【为什么单独一个文件】
 * `style.css` 已有 298 行，项目规范是单文件 ≤300 行。
 * 把按钮样式塞进去必然超限，且改一行就可能顶破红线。
 * 拆成独立文件后：style.css 一行不动（零回归风险），
 * 新文件自带规范检查。
 *
 * 【颜色纪律】与主样式表一致：颜色值只出现在下方 :root 里，
 * 其余一律 var()。主表的 `:root` 已定义品牌/语义色，
 * 这里只补关注按钮**特有**的语义色，不重复定义已有 token。
 *
 * 【不用emoji 作图标】关注状态用内联 SVG（星标）表达。
 */
:root {
  /* 关注 = 想收到通知 → 用品牌色系，和「查价」这一主动作同源 */
  --watch-on-bg:    var(--brand);
  --watch-on-fg:    var(--surface);
  --watch-off-bg:   var(--surface);
  --watch-off-fg:   var(--brand);
  /* 关注成功后短暂高亮，让销售确认「点到了」 */
  --watch-flash-bg: var(--success-tint);
}

/* ---- 关注条容器 ---- */
/* 由 app.js 的 renderDetail 输出（类名是 watchbar，标签是 div）。
   放在标题下方、报价表上方：销售看完型号第一眼就能决定要不要盯这台。 */
.watchbar {
  margin: var(--space-3) 0;
  display: flex;
  align-items: center;
  /* 🔴 说明文字要能换行，按钮不能被挤。
     这行是实测修的：390px 窄屏下说明文字较长，
     按钮被 flex 压缩后「已关注」被折成「已关 / 注」两行 ——
     按钮高度不变（44px 达标）但宽度塌了，很难看也不专业。
     `flex-wrap: wrap` 让说明掉到下一行，按钮保持完整。 */
  flex-wrap: wrap;
  gap: var(--space-2);
}

/* ---- 关注按钮 ---- */
.watch {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  /* 🔴 触摸目标 ≥44px（与主表 .cand / .back 同标准） */
  min-height: var(--a11y-min-touch);
  padding: 0 var(--space-4);
  font-family: inherit;
  font-size: var(--text-base);
  border-radius: var(--radius-pill);
  border: 1px solid var(--brand);
  cursor: pointer;
  /* 🔴 不许被 flex 容器压缩，且文案不折行。
     `flex: none` 阻止 flex-shrink，`nowrap` 兜住文案。
     少了这两条，窄屏下按钮文字会被挤成多行（实测踩过）。 */
  flex: none;
  white-space: nowrap;
  /* 切换状态要有反馈，否则销售点了不知道成没成 */
  transition: background-color .15s ease, color .15s ease;
}

.watch:focus-visible { outline: none; box-shadow: var(--focus-ring); }

/* 未关注：白底描边 —— 「可点」但不抢主视觉 */
.watch--off {
  background: var(--watch-off-bg);
  color: var(--watch-off-fg);
}
.watch--off:hover { background: var(--brand-tint); }

/* 已关注：实心 —— 销售一眼看出这台在监控中 */
.watch--on {
  background: var(--watch-on-bg);
  color: var(--watch-on-fg);
}
.watch--on:hover { background: var(--brand-hover); }

.watch__icon {
  width: 18px;
  height: 18px;
  flex: none;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* 已关注时星标填实 —— 用图形而非颜色单独承载状态，
   色弱用户也能分辨（只靠颜色区分是可达性缺陷）。 */
.watch--on .watch__icon { fill: currentColor; }

/* 请求进行中：禁用 + 变淡，防止连点产生重复请求 */
.watch[disabled] { opacity: .6; cursor: progress; }

/* 点成功后的短暂高亮，一秒后由JS 移除 */
.watch--flash { background: var(--watch-flash-bg); }

/* ---- 关注状态说明 ---- */
.watchnote {
  margin: var(--space-2) 0 0;
  font-size: var(--text-sm);
  color: var(--muted);
  /* 说明文字允许换行并在按钮下方占满整行（窄屏时 flex-wrap 会换行） */
  flex: 1 1 100%;
}

/* 操作失败才用 danger色 —— 关注失败要让销售知道，
   否则他以为关注成功了、然后一直等推送。
   ⚠️ 但措辞用「没成功」而不是「错误」：这不是系统坏了，是这次操作没成。 */
.watchnote--bad { color: var(--danger); }