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

   cognitive.css · trackandreact.com

   认知可访问性 — 阅读辅助组件 / 渐进式披露 / 减少选项

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

   依赖：tokens.css

   核心原则：简单语言优于复杂语言，渐进式披露优于一次性展示

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



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

   一、阅读进度条

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



.reading-progress-bar {

  position: fixed;

  top: 0;

  left: 0;

  height: 3px;

  background: linear-gradient(90deg, var(--color-primary-500), var(--color-accent-500));

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

  transition: width 100ms linear;

  will-change: width;

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

}



@media (max-width: 768px) {

  .reading-progress-bar {

    height: 2px;

  }

}



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

   二、预计阅读时间

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



.reading-time {

  display: inline-flex;

  align-items: center;

  gap: var(--space-2);

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

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

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

}



.reading-time::before {

  content: '⏱';

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

}



.reading-time-value {

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

}



/* 阅读时间在文章头部 */

.article-header-meta {

  display: flex;

  align-items: center;

  gap: var(--space-4);

  flex-wrap: wrap;

  margin-bottom: var(--rhythm-normal);

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

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

}



.article-header-meta > * {

  display: inline-flex;

  align-items: center;

  gap: var(--space-1);

}



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

   三、目录导航（桌面端）

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



.table-of-contents {

  position: sticky;

  top: calc(64px + var(--space-4));

  max-height: calc(100vh - 120px);

  overflow-y: auto;

  padding: var(--space-4);

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

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

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

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

  scrollbar-width: thin;

  scrollbar-color: var(--color-neutral-300) transparent;

}



.table-of-contents::-webkit-scrollbar {

  width: 4px;

}



.table-of-contents::-webkit-scrollbar-thumb {

  background-color: var(--color-neutral-300);

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

}



.toc-title {

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

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

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

  text-transform: uppercase;

  letter-spacing: var(--tracking-wide);

  margin-bottom: var(--space-3);

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

  border-bottom: 1px solid var(--color-border);

}



.toc-title::before {

  content: '📑 ';

}



.toc-list {

  display: flex;

  flex-direction: column;

  gap: var(--space-1);

}



.toc-item {

  display: block;

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

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

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

  text-decoration: none;

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

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

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

  border-left: 2px solid transparent;

}



.toc-item:hover {

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

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

  text-decoration: none;

  border-left-color: var(--color-primary-300);

}



.toc-item.active {

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

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

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

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

}



.toc-item-h3 {

  padding-left: var(--space-6);

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

}



/* --- 移动端目录折叠 --- */

@media (max-width: 1024px) {

  .table-of-contents {

    position: static;

    max-height: none;

    margin-bottom: var(--rhythm-normal);

  }



  .toc-list {

    display: none;

  }



  .table-of-contents.open .toc-list {

    display: flex;

  }



  .toc-title {

    cursor: pointer;

    min-height: 44px;

    display: flex;

    align-items: center;

    justify-content: space-between;

  }



  .toc-title::after {

    content: '▼';

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

    transition: transform var(--duration-normal) var(--ease-out);

  }



  .table-of-contents.open .toc-title::after {

    transform: rotate(180deg);

  }

}



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

   四、回到顶部按钮

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



.back-to-top-button {

  position: fixed;

  bottom: var(--space-6);

  right: var(--space-6);

  width: 48px;

  height: 48px;

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

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

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

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

  display: flex;

  align-items: center;

  justify-content: center;

  cursor: pointer;

  opacity: 0;

  visibility: hidden;

  transform: translateY(10px);

  transition: all var(--duration-normal) var(--ease-out);

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

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

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

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

}



.back-to-top-button.visible {

  opacity: 1;

  visibility: visible;

  transform: translateY(0);

}



.back-to-top-button:hover {

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

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

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

  transform: translateY(-2px);

}



.back-to-top-button:focus-visible {

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

  outline-offset: 2px;

}



.back-to-top-button::before {

  content: '↑';

}



@media (max-width: 768px) {

  .back-to-top-button {

    bottom: var(--space-4);

    right: var(--space-4);

    width: 44px;

    height: 44px;

  }

}



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

   五、章节锚点

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



.section-anchor {

  position: relative;

  scroll-margin-top: 80px;

}



.section-anchor-link {

  position: absolute;

  left: -24px;

  top: 50%;

  transform: translateY(-50%);

  width: 20px;

  height: 20px;

  display: flex;

  align-items: center;

  justify-content: center;

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

  text-decoration: none;

  opacity: 0;

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

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

}



.section-anchor:hover .section-anchor-link,

.section-anchor-link:focus-visible {

  opacity: 1;

}



.section-anchor-link::before {

  content: '#';

}



.section-anchor-link:hover {

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

  text-decoration: none;

}



@media (max-width: 768px) {

  .section-anchor-link {

    display: none;

  }

}



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

   六、渐进式披露

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



.progressive-disclosure {

  margin: var(--rhythm-normal) 0;

}



.progressive-disclosure > p,

.progressive-disclosure > .pd-summary {

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

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

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

  margin-bottom: var(--space-3);

}



.progressive-disclosure details {

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

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

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

  border-left: 3px solid var(--color-primary-300);

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

}



.progressive-disclosure details details {

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

  border-left-color: var(--color-primary-200);

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

}



.progressive-disclosure summary {

  cursor: pointer;

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

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

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

  min-height: 44px;

  display: flex;

  align-items: center;

  gap: var(--space-2);

  list-style: none;

}



.progressive-disclosure summary::-webkit-details-marker {

  display: none;

}



.progressive-disclosure summary::before {

  content: '+';

  display: inline-flex;

  align-items: center;

  justify-content: center;

  width: 20px;

  height: 20px;

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

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

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

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

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

  transition: transform var(--duration-normal) var(--ease-out);

  flex-shrink: 0;

}



.progressive-disclosure details[open] > summary::before {

  content: '−';

  transform: rotate(180deg);

}



.progressive-disclosure details > *:not(summary) {

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

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

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

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

  padding-left: var(--space-6);

}



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

   七、减少选项 · 折叠组

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



.collapsible-group {

  margin: var(--rhythm-normal) 0;

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

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

  overflow: hidden;

}



.collapsible-group-header {

  display: flex;

  align-items: center;

  justify-content: space-between;

  width: 100%;

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

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

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

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

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

  cursor: pointer;

  min-height: 56px;

  border: none;

  text-align: left;

  transition: background-color var(--duration-fast) var(--ease-out);

}



.collapsible-group-header:hover {

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

}



.collapsible-group-header::after {

  content: '▼';

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

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

  transition: transform var(--duration-normal) var(--ease-out);

  flex-shrink: 0;

}



.collapsible-group.open .collapsible-group-header::after {

  transform: rotate(180deg);

}



.collapsible-group-body {

  max-height: 0;

  overflow: hidden;

  transition: max-height var(--duration-slow) var(--ease-in-out);

}



.collapsible-group.open .collapsible-group-body {

  max-height: 3000px;

}



.collapsible-group-body-inner {

  padding: var(--space-5);

  border-top: 1px solid var(--color-border);

}



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

   八、减少选项 · 选项卡片组

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



.choice-grid {

  display: grid;

  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));

  gap: var(--space-3);

  margin: var(--rhythm-normal) 0;

}



.choice-card {

  display: flex;

  flex-direction: column;

  gap: var(--space-2);

  padding: var(--space-4);

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

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

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

  text-decoration: none;

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

  transition: all var(--duration-normal) var(--ease-out);

  min-height: 100px;

}



.choice-card:hover {

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

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

  transform: translateY(-2px);

  text-decoration: none;

}



.choice-card-title {

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

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

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

}



.choice-card-desc {

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

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

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

}



.choice-card-recommended {

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

  background: linear-gradient(135deg,

    var(--color-accent-alpha-10),

    var(--color-primary-alpha-10));

  position: relative;

}



.choice-card-recommended::before {

  content: '⭐ 推荐';

  position: absolute;

  top: -10px;

  right: var(--space-3);

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

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

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

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

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

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

}



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

   九、语言简化辅助

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



/* --- 术语解释（首次出现时） --- */

.term-definition {

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

  cursor: help;

  position: relative;

  color: inherit;

  text-decoration: none;

}



.term-definition:hover {

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

}



/* --- 简单说明框 --- */

.simple-explanation {

  padding: var(--space-4);

  margin: var(--rhythm-normal) 0;

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

  border-left: 3px solid var(--color-primary-400);

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

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

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

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

}



.simple-explanation::before {

  content: '💡 ';

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

}



.simple-explanation strong {

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

}



/* --- 小结框 --- */

.key-takeaway {

  padding: var(--space-4);

  margin: var(--rhythm-normal) 0;

  background-color: var(--color-accent-alpha-10);

  border: 1px solid var(--color-accent-200);

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

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

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

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

}



.key-takeaway::before {

  content: '🎯 ';

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

}



.key-takeaway strong {

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

}



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

   十、注意力管理

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



/* --- 视觉焦点限制（每屏只允许一个主CTA） --- */

.single-focus {

  position: relative;

}



.single-focus > .btn-cta:first-of-type {

  box-shadow: 0 4px 12px var(--color-primary-alpha-20),

              0 0 0 4px var(--color-primary-alpha-10);

}



/* --- 分屏提示（长文打断） --- */

.breathing-space {

  margin: var(--rhythm-breath) 0;

  text-align: center;

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

  font-size: var(--text-2xl);

  letter-spacing: var(--space-4);

  user-select: none;

}



.breathing-space::before {

  content: '· · ·';

}



/* --- 阅读时间预估分段 --- */

.reading-pace {

  display: inline-flex;

  align-items: center;

  gap: var(--space-2);

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

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

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

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

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

}



.reading-pace-fast::before { content: '⚡ '; }

.reading-pace-medium::before { content: '📖 '; }

.reading-pace-slow::before { content: '🧠 '; }



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

   十一、对比表格卡片化（移动端减少认知负荷）

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



.comparison-cards {

  display: none;

}



@media (max-width: 768px) {

  .comparison-table {

    display: none;

  }



  .comparison-cards {

    display: flex;

    flex-direction: column;

    gap: var(--space-4);

    margin: var(--rhythm-normal) 0;

  }



  .comparison-card {

    padding: var(--space-4);

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

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

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

  }



  .comparison-card-title {

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

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

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

    margin-bottom: var(--space-3);

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

    border-bottom: 2px solid var(--color-primary-200);

  }



  .comparison-card-row {

    display: flex;

    justify-content: space-between;

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

    border-bottom: 1px solid var(--color-border);

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

  }



  .comparison-card-row:last-child {

    border-bottom: none;

  }



  .comparison-card-label {

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

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

  }



  .comparison-card-value {

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

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

    text-align: right;

  }

}



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

   十二、长文呼吸感

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



/* --- 在段落之间增加呼吸空间 --- */

.article-content > p + p {

  margin-top: var(--rhythm-normal);

}



/* --- 长段落后的短句缓冲 --- */

.punch-line {

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

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

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

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

  margin: var(--rhythm-normal) 0;

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

  border-left: 3px solid var(--color-primary-400);

}



/* --- 引用块 --- */

.article-content blockquote {

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

  margin: var(--rhythm-normal) 0;

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

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

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

  font-style: italic;

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

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

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

}



.article-content blockquote cite {

  display: block;

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

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

  font-style: normal;

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

}



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

   十三、移动端简化

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



@media (max-width: 768px) {

  .table-of-contents {

    position: static;

    max-height: none;

  }



  .back-to-top-button {

    width: 44px;

    height: 44px;

  }



  .progressive-disclosure details {

    padding: var(--space-3);

  }



  .progressive-disclosure details > *:not(summary) {

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

  }



  .choice-grid {

    grid-template-columns: 1fr;

  }



  .chart-data-cards {

    grid-template-columns: 1fr;

  }

}



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

   十四、减少动效偏好

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



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

  .reading-progress-bar {

    transition: none;

  }



  .back-to-top-button {

    transition: none;

  }



  .collapsible-group-body {

    transition: none;

  }



  .toc-title::after {

    transition: none;

  }

}



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

   十五、阅读辅助组合类

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



/* --- 用于文章头部：一行显示阅读时间+评分+作者 --- */

.article-quick-meta {

  display: flex;

  align-items: center;

  gap: var(--space-4);

  flex-wrap: wrap;

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

  margin-bottom: var(--rhythm-normal);

  border-bottom: 1px solid var(--color-border);

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

}



.article-quick-meta > * {

  display: inline-flex;

  align-items: center;

  gap: var(--space-1);

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

}



/* --- 用于文末：下一步推荐（减少认知负荷） --- */

.next-step-mini {

  display: flex;

  gap: var(--space-3);

  flex-wrap: wrap;

  margin: var(--rhythm-normal) 0;

}



.next-step-mini a {

  display: inline-flex;

  align-items: center;

  gap: var(--space-2);

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

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

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

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

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

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

  text-decoration: none;

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

}



.next-step-mini a:hover {

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

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

  text-decoration: none;

}



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

   cognitive.css 结束

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