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

   cognitive.css · Our Smart Baby

   认知可访问性系统

   加载顺序：9/34

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



/* 1. 阅读进度条 */

.reading-progress-bar {

  position: fixed;

  top: 0;

  left: 0;

  width: 0%;

  height: 3px;

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

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

  transition: width 50ms linear;

}



/* 2. 预计阅读时间 */

.reading-time {

  display: inline-flex;

  align-items: center;

  gap: var(--space-1);

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

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

}



.reading-time::before {

  content: '📖';

  font-size: 0.9em;

}



/* 3. 目录导航 · 桌面端 */

.table-of-contents {

  position: sticky;

  top: 88px;

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

  overflow-y: auto;

  padding: var(--space-4);

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

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

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

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

}



.table-of-contents h4 {

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

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

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

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

  text-transform: uppercase;

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

}



.table-of-contents ul {

  padding-left: 0;

}



.table-of-contents li {

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

}



.table-of-contents a {

  display: block;

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

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

  border-left: 2px solid transparent;

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

}



.table-of-contents a:hover {

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

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

}



.table-of-contents a.active {

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

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

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

}



.table-of-contents .toc-h3 {

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

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

}



/* 4. 回到顶部按钮 */

.back-to-top-btn {

  position: fixed;

  right: var(--space-5);

  bottom: var(--space-5);

  width: 48px;

  height: 48px;

  border-radius: 50%;

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

  color: white;

  display: flex;

  align-items: center;

  justify-content: center;

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

  opacity: 0;

  visibility: hidden;

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

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

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

}



.back-to-top-btn.visible {

  opacity: 1;

  visibility: visible;

}



.back-to-top-btn:hover {

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

  transform: translateY(-2px);

}



/* 5. 章节锚点 */

.section-anchor {

  position: relative;

}



.section-anchor .anchor-link {

  position: absolute;

  left: -24px;

  top: 50%;

  transform: translateY(-50%);

  opacity: 0;

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

  text-decoration: none;

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

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

  min-width: 44px;

  min-height: 44px;

  display: flex;

  align-items: center;

  justify-content: center;

}



.section-anchor:hover .anchor-link {

  opacity: 1;

}



/* 6. 渐进式披露 */

.progressive-disclosure {

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

}



.progressive-disclosure > details {

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

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

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

  overflow: hidden;

}



.progressive-disclosure summary {

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

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

  cursor: pointer;

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

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

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

  list-style: none;

  min-height: 44px;

  display: flex;

  align-items: center;

}



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

  display: none;

}



.progressive-disclosure summary::before {

  content: '▸';

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

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

}



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

  transform: rotate(90deg);

}



.progressive-disclosure > details details {

  margin: var(--space-3);

}



/* 7. 减少选项 · 折叠 */

.collapsible-list {

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

}



.collapsible-list > details {

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

}



.collapsible-list summary {

  cursor: pointer;

  padding: var(--space-2);

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

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

  min-height: 44px;

  display: flex;

  align-items: center;

}



/* 8. 简化语言提示 */

.plain-language {

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

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

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

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

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

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

}



.plain-language::before {

  content: '💡 ';

}



/* 9. 术语解释 */

.term-explanation {

  border-bottom: 1px dotted var(--color-primary-400);

  cursor: help;

  position: relative;

}



.term-explanation::after {

  content: attr(data-tooltip);

  position: absolute;

  bottom: 100%;

  left: 50%;

  transform: translateX(-50%);

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

  color: white;

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

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

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

  white-space: nowrap;

  opacity: 0;

  visibility: hidden;

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

  pointer-events: none;

}



.term-explanation:hover::after {

  opacity: 1;

  visibility: visible;

}



/* 10. 移动端适配 */

@media (max-width: 768px) {

  .table-of-contents {

    position: static;

    max-height: none;

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

  }



  .back-to-top-btn {

    width: 44px;

    height: 44px;

    right: var(--space-3);

    bottom: var(--space-3);

  }



  .section-anchor .anchor-link {

    position: static;

    opacity: 0.6;

    min-width: 32px;

    min-height: 32px;

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

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

  }



  .term-explanation::after {

    left: 0;

    transform: none;

    white-space: normal;

    max-width: 200px;

  }

}