/**
 * 全局可访问性补丁
 *
 * 之前各模块用 `outline: none` 把默认聚焦环抹掉了，但没有补上视觉替代，
 * 键盘 / 屏幕阅读器用户基本看不到焦点位置。这里集中给：
 *
 * 1. `:focus-visible`：仅键盘聚焦时显示焦点环，不影响鼠标点击观感
 * 2. `.sr-only`：屏幕阅读器朗读但视觉隐藏的 utility class
 * 3. `.skip-link`：跳到主内容的链接，Tab 第一下出现
 * 4. `prefers-reduced-motion`：尊重系统级"减少动画"偏好
 *
 * 这个文件作为关键样式表加载（首屏阻塞 OK，体积 < 1KB）。
 */

/* === 全局 :focus-visible 焦点环（仅键盘聚焦显示）===
 * 颜色用 #d54793（--primary-strong），对白底约 4.5:1，达到 WCAG AA 非文字对比度 3:1 标准
 * 同时保留品牌粉色调。 */
:focus-visible {
  outline: 2px solid #d54793;
  outline-offset: 3px;
  border-radius: 4px;
}

/* 卡片 / 列表项 / FAB 等"非典型可聚焦"元素的焦点环更明显 */
a.list-card:focus-visible,
a.tl-card:focus-visible,
a.detail-card:focus-visible,
button.fab-btn:focus-visible,
button.toggle-btn:focus-visible {
  outline: 3px solid #d54793;
  outline-offset: 4px;
  box-shadow: 0 0 0 6px rgba(213, 71, 147, 0.18);
}

/* 表单控件聚焦时同时改边框色（很多模块本来就这么做）+ 给一个柔和外环 */
input:focus-visible,
textarea:focus-visible,
select:focus-visible,
.custom-select-trigger:focus-visible {
  outline: none;
  border-color: #d54793;
  box-shadow: 0 0 0 3px rgba(213, 71, 147, 0.25);
}

/* === 屏幕阅读器专用：视觉隐藏但被朗读 === */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* === 跳到主内容链接：Tab 第一下浮现 === */
.skip-link {
  position: absolute;
  top: -100px;
  left: 0;
  background: #d54793;
  color: #fff;
  padding: 10px 16px;
  font-weight: 600;
  text-decoration: none;
  border-radius: 0 0 8px 0;
  z-index: 10000;
  transition: top 0.2s ease;
}
.skip-link:focus,
.skip-link:focus-visible {
  top: 0;
  outline: 3px solid #fff;
  outline-offset: -3px;
}

/* === 尊重 reduced-motion ===
 * 重要：之前用 `*, *::before, *::after { animation/transition: 0.01ms !important }`
 * 把所有动画一刀切了。在 Windows "显示动画" 关闭时，整站的 hover / 切换 / 焦点
 * 微动效都会消失，UI 显得"卡卡的"，用户会以为链接坏了。
 *
 * 现在只针对"装饰性长循环动画"（漂浮装饰、加载 spinner 之类）做缩短，
 * 交互过渡（hover / focus / 卡片浮起）保留正常体验。
 *
 * 命中的类：
 * - `.float-item` 登录页心形漂浮装饰
 * - `.loader-spinner` 各种加载圈
 * - `.timer-dot` 计时器小点的脉动
 * - 其它带 `animation-iteration-count: infinite` 的元素：通过 `[style*="infinite"]`
 *   兜不住，所以只显式列模块名
 *
 * 如果将来要让某条 transition 在 reduced-motion 下变快，
 * 在那条规则里自己写 `@media (prefers-reduced-motion: reduce) { ... }`。
 */
@media (prefers-reduced-motion: reduce) {
  .float-item,
  .loader-spinner,
  .timer-dot,
  .floating-decorations *,
  [data-decorative-animation] {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
  }
  /* 平滑滚动也保留：滚动行为本身不会让人晕，只是慢一点 */
}