/* ==========================================================================

   a11y.css · trackandreact.com

   可访问性系统 — 焦点状态/跳过导航/屏幕阅读器类/对比度保障

   生成者：Crystal Yifei Liu · 2026-09-25

   依赖：tokens.css

   目标：WCAG 2.1 AA 合规

   ========================================================================== */



/* ==========================================================================

   一、焦点状态系统

   ========================================================================== */



/* --- 全局焦点可见状态 --- */

:focus-visible {

  outline: 2px solid var(--color-primary-500);

  outline-offset: 2px;

  border-radius: var(--radius-sm);

}



:focus:not(:focus-visible) {

  outline: none;

}



/* --- 按钮焦点 --- */

button:focus-visible,

.btn-cta:focus-visible,

.btn-secondary:focus-visible,

.btn-dhgate:focus-visible {

  outline: 2px solid var(--color-primary-500);

  outline-offset: 3px;

  box-shadow: var(--shadow-focus);

}



/* --- 链接焦点 --- */

a:focus-visible {

  outline: 2px solid var(--color-primary-500);

  outline-offset: 2px;

  text-decoration: underline;

}



/* --- 表单元素焦点 --- */

input:focus-visible,

textarea:focus-visible,

select:focus-visible {

  outline: 2px solid var(--color-primary-500);

  outline-offset: 0;

  border-color: var(--color-primary-500);

  box-shadow: var(--shadow-focus);

}



/* --- FAQ 折叠区焦点 --- */

.faq-question:focus-visible,

.testing-methodology summary:focus-visible {

  outline: 2px solid var(--color-primary-500);

  outline-offset: -2px;

  background-color: var(--color-surface);

}



/* --- 主题切换器焦点 --- */

.theme-toggle:focus-visible,

.theme-option:focus-visible,

.nav-toggle:focus-visible {

  outline: 2px solid var(--color-primary-500);

  outline-offset: 2px;

  box-shadow: var(--shadow-focus);

}



/* --- 卡片/可点击容器焦点 --- */

.article-card:focus-visible,

.silo-card:focus-visible,

.pick-card:focus-within,

.quick-pick-card:focus-visible,

.editors-pick-card:focus-visible {

  outline: 2px solid var(--color-primary-500);

  outline-offset: 2px;

  box-shadow: var(--shadow-md);

}



/* --- 内链视觉样式焦点 --- */

.link-category:focus-visible,

.link-advanced:focus-visible,

.link-lateral:focus-visible,

.exploration-hook:focus-visible {

  outline: 2px solid var(--color-primary-500);

  outline-offset: 2px;

}



/* --- 跳到主内容链接焦点 --- */

.skip-to-main:focus-visible {

  top: 0;

  outline: 3px solid var(--color-primary-600);

  outline-offset: 0;

}



/* ==========================================================================

   二、跳过导航链接

   ========================================================================== */



.skip-to-main {

  position: absolute;

  top: -100px;

  left: var(--space-4);

  padding: var(--space-3) var(--space-5);

  background-color: var(--color-primary-600);

  color: hsl(0, 0%, 100%);

  font-size: var(--text-base);

  font-weight: var(--font-semibold);

  border-radius: 0 0 var(--radius-md) var(--radius-md);

  z-index: var(--z-toast);

  transition: top var(--duration-fast) var(--ease-out);

  text-decoration: none;

}



.skip-to-main:focus {

  top: 0;

  color: hsl(0, 0%, 100%);

  text-decoration: none;

}



/* ==========================================================================

   三、屏幕阅读器专用类

   ========================================================================== */



/* --- 视觉隐藏但屏幕阅读器可读 --- */

.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;

}



/* --- 屏幕阅读器可读，获得焦点时可见 --- */

.sr-only-focusable:not(:focus):not(:focus-within) {

  position: absolute;

  width: 1px;

  height: 1px;

  padding: 0;

  margin: -1px;

  overflow: hidden;

  clip: rect(0, 0, 0, 0);

  white-space: nowrap;

  border: 0;

}



.sr-only-focusable:focus,

.sr-only-focusable:focus-within {

  position: static;

  width: auto;

  height: auto;

  padding: var(--space-2) var(--space-4);

  margin: 0;

  overflow: visible;

  clip: auto;

  white-space: normal;

  background-color: var(--color-primary-600);

  color: hsl(0, 0%, 100%);

  border-radius: var(--radius-md);

}



/* --- 视觉隐藏但保持可点击区域 --- */

.invisible-text {

  color: transparent;

  font-size: 0;

  line-height: 0;

}



/* ==========================================================================

   四、对比度保障

   ========================================================================== */



/* --- 深色背景上的浅色文字（高对比） --- */

.high-contrast-text {

  color: var(--color-text-primary);

  font-weight: var(--font-medium);

}



/* --- 低对比度辅助文字（仅用于次要信息） --- */

.muted-text {

  color: var(--color-text-secondary);

}



/* --- 确保placeholder对比度达标 --- */

::placeholder {

  color: var(--color-text-tertiary);

  opacity: 1;

}



/* --- 禁用状态可见性 --- */

[disabled],

.disabled {

  opacity: 0.5;

  cursor: not-allowed;

  pointer-events: none;

}



/* --- 高对比度模式适配 --- */

@media (prefers-contrast: more) {

  :root {

    --color-text-primary: hsl(0, 0%, 0%);

    --color-text-secondary: hsl(0, 0%, 20%);

    --color-text-tertiary: hsl(0, 0%, 35%);

    --color-border: hsl(0, 0%, 50%);

    --color-border-strong: hsl(0, 0%, 35%);

  }



  .btn-cta,

  .btn-secondary,

  .btn-dhgate {

    border: 2px solid currentColor;

  }



  .article-card,

  .card,

  .silo-card {

    border-width: 2px;

  }

}



/* ==========================================================================

   五、ARIA 状态视觉反馈

   ========================================================================== */



/* --- 当前页面指示 --- */

[aria-current="page"] {

  color: var(--color-primary-600);

  font-weight: var(--font-semibold);

}



[aria-current="page"]::after {

  content: '';

  display: block;

  height: 2px;

  background-color: var(--color-primary-500);

  margin-top: var(--space-1);

}



/* --- 展开/收起状态 --- */

[aria-expanded="true"] .faq-icon {

  transform: rotate(45deg);

}



[aria-expanded="false"] .faq-icon {

  transform: rotate(0deg);

}



/* --- 选中状态 --- */

[aria-selected="true"] {

  background-color: var(--color-primary-100);

  color: var(--color-primary-700);

}



/* --- 按下状态（主题切换器） --- */

[aria-pressed="true"] {

  background-color: var(--color-primary-500);

  color: hsl(0, 0%, 100%);

}



/* --- 加载状态 --- */

[aria-busy="true"] {

  cursor: wait;

  opacity: 0.7;

}



[aria-busy="true"]::after {

  content: '';

  display: inline-block;

  width: 12px;

  height: 12px;

  margin-left: var(--space-2);

  border: 2px solid var(--color-neutral-300);

  border-top-color: var(--color-primary-500);

  border-radius: var(--radius-full);

  animation: spin 0.8s linear infinite;

}



/* --- 提示/警告/错误 --- */

[role="alert"] {

  padding: var(--space-4);

  background-color: hsl(0, 70%, 97%);

  border-left: 4px solid var(--color-error);

  border-radius: var(--radius-sm);

  color: var(--color-text-primary);

}



[role="status"] {

  padding: var(--space-4);

  background-color: var(--color-primary-50);

  border-left: 4px solid var(--color-primary-500);

  border-radius: var(--radius-sm);

  color: var(--color-text-primary);

}



/* ==========================================================================

   六、触摸目标尺寸保障

   ========================================================================== */



/* --- 所有交互元素最小尺寸 --- */

a,

button,

[role="button"],

input[type="submit"],

input[type="button"],

.faq-question,

summary,

.theme-option {

  min-height: 44px;

  min-width: 44px;

  display: inline-flex;

  align-items: center;

}



/* --- 文本内链接例外（文章正文中的链接不需要44px高度） --- */

.article-content a,

p a,

li a,

td a {

  min-height: auto;

  min-width: auto;

  display: inline;

}



/* --- 相邻可点击元素最小间距 --- */

.btn-cta + .btn-cta,

.btn-secondary + .btn-secondary,

.btn-dhgate + .btn-dhgate,

.nav-link + .nav-link,

.theme-option + .theme-option {

  margin-left: var(--space-2);

}



/* ==========================================================================

   七、键盘导航增强

   ========================================================================== */



/* --- 自定义Tab顺序辅助 --- */

[tabindex="-1"]:focus {

  outline: none;

}



/* --- 键盘导航提示 --- */

.keyboard-focus-indicator {

  position: relative;

}



.keyboard-focus-indicator::before {

  content: '';

  position: absolute;

  inset: -4px;

  border: 2px dashed var(--color-primary-300);

  border-radius: var(--radius-md);

  opacity: 0;

  transition: opacity var(--duration-fast) var(--ease-out);

  pointer-events: none;

}



.keyboard-focus-indicator:focus-visible::before {

  opacity: 1;

}



/* --- 跳过重复导航（用于长列表） --- */

.skip-repeated-nav {

  position: absolute;

  top: -100px;

  left: 0;

  padding: var(--space-2) var(--space-4);

  background-color: var(--color-surface);

  border: 1px solid var(--color-primary-500);

  border-radius: var(--radius-md);

  z-index: var(--z-toast);

  transition: top var(--duration-fast) var(--ease-out);

}



.skip-repeated-nav:focus {

  top: var(--space-2);

}



/* ==========================================================================

   八、屏幕阅读器动态通知

   ========================================================================== */



/* --- 实时区域（视觉隐藏但屏幕阅读器可读） --- */

.live-region {

  position: absolute;

  width: 1px;

  height: 1px;

  padding: 0;

  margin: -1px;

  overflow: hidden;

  clip: rect(0, 0, 0, 0);

  white-space: nowrap;

  border: 0;

}



/* --- 礼貌通知（不打断） --- */

[aria-live="polite"] {

  /* 使用sr-only类配合 */

}



/* --- 紧急通知（立即播报） --- */

[aria-live="assertive"] {

  /* 仅用于严重错误 */

}



/* ==========================================================================

   九、视觉隐藏但语义可见的标题

   ========================================================================== */



/* --- 用于页面结构完整性（如section无可见标题） --- */

.sr-only-heading {

  position: absolute;

  width: 1px;

  height: 1px;

  padding: 0;

  margin: -1px;

  overflow: hidden;

  clip: rect(0, 0, 0, 0);

  white-space: nowrap;

  border: 0;

}



/* ==========================================================================

   十、高对比度边框与分隔线

   ========================================================================== */



/* --- 确保关键分隔线可见 --- */

.faq-item,

.comparison-table th,

.comparison-table td,

.review-card,

.card,

.article-card {

  border-color: var(--color-border);

}



@media (prefers-contrast: more) {

  .faq-item,

  .comparison-table th,

  .comparison-table td,

  .review-card,

  .card,

  .article-card {

    border-color: var(--color-border-strong);

    border-width: 2px;

  }

}



/* ==========================================================================

   十一、字体大小与阅读辅助

   ========================================================================== */



/* --- 尊重用户字体大小偏好 --- */

html {

  font-size: 100%;

}



/* 当用户放大字体时，布局不崩坏 */

@media (min-resolution: 120dpi) {

  body {

    line-height: var(--leading-relaxed);

  }

}



/* --- 长文阅读宽度限制 --- */

.readable-content {

  max-width: var(--reading-max-width);

  margin-left: auto;

  margin-right: auto;

}



/* --- 确保正文不被强制对齐破坏可读性 --- */

.article-content p,

.readable-content p {

  text-align: left;

  hyphens: auto;

  -webkit-hyphens: auto;

  -ms-hyphens: auto;

}



/* ==========================================================================

   十二、减少动画偏好（强制）

   ========================================================================== */



@media (prefers-reduced-motion: reduce) {

  *,

  *::before,

  *::after {

    animation-duration: 0.01ms !important;

    animation-iteration-count: 1 !important;

    transition-duration: 0.01ms !important;

    scroll-behavior: auto !important;

  }



  .spinner {

    animation: none;

    border-top-color: var(--color-primary-500);

    border-right-color: var(--color-primary-500);

  }



  [aria-busy="true"]::after {

    animation: none;

  }

}



/* ==========================================================================

   十三、颜色非唯一信息载体

   ========================================================================== */



/* --- 错误/成功/警告不仅靠颜色区分 --- */

.status-error::before {

  content: '✕ ';

  font-weight: var(--font-bold);

}



.status-success::before {

  content: '✓ ';

  font-weight: var(--font-bold);

}



.status-warning::before {

  content: '⚠ ';

  font-weight: var(--font-bold);

}



/* --- 链接不仅靠颜色区分（下划线辅助） --- */

.article-content a:not(.btn-cta):not(.btn-secondary):not(.btn-dhgate):not(.no-underline) {

  text-decoration: underline;

  text-decoration-thickness: 1px;

  text-underline-offset: 2px;

}



.article-content a:hover {

  text-decoration-thickness: 2px;

}



/* ==========================================================================

   十四、打印样式

   ========================================================================== */



@media print {

  .nav,

  .footer,

  .sidebar,

  .back-to-top,

  .reading-progress,

  .exploration-hook,

  .theme-switcher,

  .skip-to-main,

  .btn-cta,

  .btn-secondary,

  .btn-dhgate,

  .affiliate-timestamp {

    display: none !important;

  }



  body {

    background: white;

    color: black;

    font-size: 12pt;

  }



  a {

    color: black;

    text-decoration: underline;

  }



  a[href]::after {

    content: " (" attr(href) ")";

    font-size: 10pt;

    color: #666;

  }



  .article-card,

  .card {

    border: 1px solid #ccc;

    box-shadow: none;

  }

}



/* ==========================================================================

   十五、屏幕方向适配

   ========================================================================== */



@media (orientation: landscape) and (max-height: 500px) {

  .nav {

    position: relative;

  }



  .hero {

    padding: var(--rhythm-loose) 0;

  }

}



/* ==========================================================================

   十六、悬停能力检测（触屏设备无hover）

   ========================================================================== */



@media (hover: none) {

  .hover-lift:hover,

  .hover-scale:hover {

    transform: none;

    box-shadow: none;

  }



  .link-underline::after {

    display: none;

  }



  .hover-arrow::after {

    transform: none;

  }

}



/* ==========================================================================

   十七、触摸设备增强

   ========================================================================== */



@media (pointer: coarse) {

  /* 触摸设备增大可点击区域 */

  .nav-link,

  .faq-question,

  .footer-col a {

    padding: var(--space-3) 0;

  }



  /* 触摸设备移除悬停效果 */

  .article-card:hover,

  .card:hover,

  .silo-card:hover {

    transform: none;

  }

}



/* ==========================================================================

   十八、安全区域适配（iPhone刘海屏）

   ========================================================================== */



@supports (padding: max(0px)) {

  .nav-inner,

  .container,

  .footer-inner {

    padding-left: max(var(--gutter), env(safe-area-inset-left));

    padding-right: max(var(--gutter), env(safe-area-inset-right));

  }



  .back-to-top {

    bottom: max(var(--space-6), env(safe-area-inset-bottom));

  }

}



/* ==========================================================================

   a11y.css 结束

   ========================================================================== */