/**
 * A 版「安静阅读」视觉层：降低装饰和对比度，让日报正文成为页面主角。
 * 只覆盖布局与视觉，不改变归档、目录、划线和笔记的交互逻辑。
 */

:root:not([data-theme="night"]) {
  /* A 版统一排版，但颜色读取当前主题，换肤会真正改变视觉。 */
  --quiet-bg: var(--paper);
  --quiet-panel: color-mix(in srgb, var(--paper-deep) 58%, var(--paper));
  --quiet-card: var(--card);
  --quiet-ink: #000000;
  --quiet-muted: #000000;
  --quiet-line: var(--line);
  --quiet-accent: var(--accent);
  --quiet-accent-soft: color-mix(in srgb, var(--accent) 10%, var(--card));
}

:root:not([data-theme="night"]) body {
  color: #000000;
  background: var(--quiet-bg);
}

:root:not([data-theme="night"]) .paper-grain {
  opacity: 0;
}

:root:not([data-theme="night"]) .masthead {
  grid-template-columns: auto 1fr auto;
  min-height: 66px;
  padding: 0 24px;
  color: var(--quiet-ink);
  background: color-mix(in srgb, var(--quiet-card) 95%, transparent);
  border-bottom: 1px solid var(--quiet-line);
  box-shadow: 0 2px 10px rgba(32, 33, 36, 0.04);
  backdrop-filter: blur(14px);
}

:root:not([data-theme="night"]) .brand-block {
  display: flex;
  align-items: center;
  gap: 9px;
  min-width: 150px;
}

:root:not([data-theme="night"]) .brand-block .edition {
  display: none;
}

:root:not([data-theme="night"]) .brand-block h1 {
  font-size: 17px;
  font-weight: 800;
  letter-spacing: -0.04em;
}

:root:not([data-theme="night"]) .brand-block p {
  margin: 0;
  padding-left: 9px;
  color: var(--quiet-muted);
  border-left: 1px solid var(--quiet-line);
  font-size: 10px;
  letter-spacing: 0.04em;
}

:root:not([data-theme="night"]) .masthead-rule {
  background: var(--quiet-line);
}

:root:not([data-theme="night"]) .metrics {
  gap: 6px;
  align-items: center;
}

:root:not([data-theme="night"]) .metrics div {
  min-width: 56px;
  text-align: right;
}

:root:not([data-theme="night"]) .metrics strong {
  color: var(--quiet-ink);
  font-size: 14px;
}

:root:not([data-theme="night"]) .metrics span {
  color: var(--quiet-muted);
  font-size: 8px;
}

/* 日报阅读页的换肤图标略向右收边，与右侧统计信息拉开一点。 */
:root:not([data-theme="night"]) .masthead .theme-switcher,
:root[data-theme="night"] .masthead .theme-switcher {
  transform: translateX(6px);
}

:root:not([data-theme="night"]) .notes-entry,
:root:not([data-theme="night"]) .research-entry {
  min-height: 24px;
  padding: 0 8px;
  color: var(--quiet-ink);
  background: var(--quiet-card);
  border-color: rgba(32, 33, 36, 0.34);
  font-size: 10px;
  font-weight: 700;
}

:root:not([data-theme="night"]) .notes-entry:hover,
:root:not([data-theme="night"]) .research-entry:hover {
  color: var(--quiet-accent);
  background: var(--quiet-accent-soft);
  border-color: #b9d9cd;
}

:root:not([data-theme="night"]) .theme-trigger {
  width: 30px;
  height: 30px;
  color: var(--quiet-ink);
  background: var(--quiet-card);
  border-color: rgba(32, 33, 36, 0.34);
}

:root:not([data-theme="night"]) .theme-trigger:hover,
:root:not([data-theme="night"]) .theme-trigger[aria-expanded="true"] {
  color: var(--quiet-accent);
  background: var(--quiet-accent-soft);
  border-color: #b9d9cd;
}

:root:not([data-theme="night"]) .reader-shell {
  --archive-width: 218px;
  --toc-width: 230px;
  grid-template-columns: var(--archive-width) minmax(0, 1fr) var(--toc-width);
  background: var(--quiet-bg);
}

:root:not([data-theme="night"]) .reader-shell.is-archive-collapsed {
  grid-template-columns: 0 minmax(0, 1fr) var(--toc-width);
}

:root:not([data-theme="night"]) .reader-shell.is-toc-collapsed {
  grid-template-columns: var(--archive-width) minmax(0, 1fr) 0;
}

:root:not([data-theme="night"]) .archive-panel,
:root:not([data-theme="night"]) .toc-panel {
  background: var(--quiet-panel);
  border-color: var(--quiet-line);
  backdrop-filter: none;
}

:root:not([data-theme="night"]) .archive-panel {
  padding: 24px 18px;
}

:root:not([data-theme="night"]) .panel-heading {
  margin-bottom: 18px;
  padding-bottom: 11px;
  border-bottom: 1px solid var(--quiet-line);
}

:root:not([data-theme="night"]) .panel-heading span {
  color: var(--quiet-accent);
  font-size: 9px;
}

:root:not([data-theme="night"]) .panel-heading strong {
  color: var(--quiet-ink);
  font-size: 18px;
}

:root:not([data-theme="night"]) .search-box input,
:root:not([data-theme="night"]) .archive-tools select,
:root:not([data-theme="night"]) .archive-tools button {
  min-height: 36px;
  color: var(--quiet-ink);
  background: var(--quiet-card);
  border-color: var(--quiet-line);
}

:root:not([data-theme="night"]) .search-box {
  color: var(--quiet-ink);
}

:root:not([data-theme="night"]) .archive-controls {
  margin-top: 12px;
  padding-top: 12px;
  border-color: var(--quiet-line);
}

:root:not([data-theme="night"]) .archive-year-toggle,
:root:not([data-theme="night"]) .archive-month-toggle,
:root:not([data-theme="night"]) .archive-item,
:root:not([data-theme="night"]) .archive-toggle-meta {
  color: var(--quiet-ink);
}

:root:not([data-theme="night"]) .archive-year-toggle {
  padding: 10px 8px;
  color: var(--quiet-ink);
  border-color: var(--quiet-line);
}

:root:not([data-theme="night"]) .archive-month-toggle {
  color: var(--quiet-ink);
}

:root:not([data-theme="night"]) .archive-item {
  height: 38px;
  padding: 0 10px;
  align-items: center;
  border-color: var(--quiet-line);
  font-size: 11px;
}

:root:not([data-theme="night"]) .archive-item time {
  display: inline-flex;
  align-items: center;
  height: 100%;
  color: var(--quiet-ink);
  font: 700 13px/1 var(--font-sans);
  line-height: 1;
}

:root:not([data-theme="night"]) .archive-item-status {
  display: inline-flex;
  align-items: center;
  justify-self: end;
  height: 100%;
}

:root:not([data-theme="night"]) .archive-item .status-dot {
  width: 8px;
  height: 8px;
}

:root:not([data-theme="night"]) .archive-item .status-dot.is-cached {
  box-shadow: 0 0 0 3px rgba(23, 107, 85, 0.14);
}

/* 批注统计与日期状态点保持同一套深绿色，在浅色选中背景上仍清晰可见。 */
:root:not([data-theme="night"]) .archive-annotation-count {
  color: var(--quiet-accent);
}

:root:not([data-theme="night"]) .archive-item.is-active .archive-annotation-count {
  color: var(--quiet-accent);
}

/* 保留月份到日期的树状缩进，让左侧导航的层级一眼可辨。 */
:root:not([data-theme="night"]) .archive-month-body {
  margin-left: 10px;
  padding-left: 10px;
  border-left: 1px solid var(--quiet-line);
}

:root:not([data-theme="night"]) .archive-month-toggle {
  padding-left: 10px;
}

:root:not([data-theme="night"]) .archive-item:hover {
  color: var(--quiet-accent);
  background: var(--quiet-accent-soft);
}

:root:not([data-theme="night"]) .archive-item.is-active {
  color: var(--quiet-accent);
  background: var(--quiet-accent-soft);
}

:root:not([data-theme="night"]) .archive-item.is-active time {
  color: var(--quiet-accent);
}

:root:not([data-theme="night"]) .archive-item.is-active .status-dot {
  background: var(--quiet-accent);
}

:root:not([data-theme="night"]) .archive-collapse-toggle,
:root:not([data-theme="night"]) .toc-toggle {
  color: var(--quiet-ink);
  background: var(--quiet-card);
  border-color: var(--quiet-line);
  box-shadow: 0 4px 12px rgba(32, 33, 36, 0.08);
}

:root:not([data-theme="night"]) .archive-collapse-toggle:hover,
:root:not([data-theme="night"]) .toc-toggle:hover {
  color: var(--quiet-accent);
  background: var(--quiet-accent-soft);
}

:root:not([data-theme="night"]) .article-panel {
  width: min(900px, 100%);
  padding: 42px 50px 100px;
  background: var(--quiet-bg);
}

:root:not([data-theme="night"]) .article-hero {
  margin-bottom: 36px;
  padding: 0 0 20px;
  background: color-mix(in srgb, var(--quiet-bg) 96%, transparent);
  border-bottom: 1px solid var(--quiet-line);
  backdrop-filter: blur(14px);
}

:root:not([data-theme="night"]) .article-hero::after {
  width: 46px;
  border-bottom-width: 2px;
  border-color: var(--quiet-accent);
}

:root:not([data-theme="night"]) .article-kicker,
:root:not([data-theme="night"]) .loading-kicker {
  color: var(--quiet-accent);
  font-size: 10px;
}

:root:not([data-theme="night"]) .article-hero h2 {
  margin: 12px 0 8px;
  color: var(--quiet-ink);
  font-size: 34px;
  line-height: 1.15;
}

:root:not([data-theme="night"]) .article-meta {
  color: var(--quiet-muted);
  font-size: 11px;
}

:root:not([data-theme="night"]) .community-action,
:root:not([data-theme="night"]) .annotation-toggle {
  height: 24px;
  min-height: 24px;
  min-width: 0;
  padding: 0 8px;
  color: var(--quiet-ink);
  background: var(--quiet-card);
  border: 1px solid rgba(32, 33, 36, 0.34);
  border-radius: 999px;
  font-size: 10px;
  font-weight: 700;
  line-height: 22px;
}

:root:not([data-theme="night"]) .community-action:hover,
:root:not([data-theme="night"]) .annotation-toggle:hover,
:root:not([data-theme="night"]) .annotation-toggle[aria-expanded="true"] {
  color: var(--quiet-accent);
  background: var(--quiet-accent-soft);
  border-color: #b9d9cd;
}

/* 正文顶部操作与目录按钮共用一套轻量胶囊规范。 */
:root:not([data-theme="night"]) .theme-popover {
  width: 246px;
  padding: 12px;
  color: var(--quiet-ink);
  background: var(--quiet-card);
  border: 1px solid var(--quiet-line);
  border-radius: 10px;
  box-shadow: 0 14px 30px rgba(32, 33, 36, 0.12);
  backdrop-filter: none;
}

:root:not([data-theme="night"]) .theme-popover::before {
  background: var(--quiet-card);
  border-color: var(--quiet-line);
}

:root:not([data-theme="night"]) .theme-popover-heading {
  padding: 2px 2px 9px;
  border-color: var(--quiet-line);
}

:root:not([data-theme="night"]) .theme-popover-heading span {
  color: var(--quiet-accent);
}

:root:not([data-theme="night"]) .theme-popover-heading strong,
:root:not([data-theme="night"]) .theme-popover-heading small {
  color: var(--quiet-ink);
}

:root:not([data-theme="night"]) .theme-popover-heading small {
  font-size: 9px;
}

:root:not([data-theme="night"]) .theme-options {
  gap: 3px;
  padding-top: 7px;
}

:root:not([data-theme="night"]) .theme-option {
  grid-template-columns: 48px 1fr;
  gap: 9px;
  min-height: 42px;
  padding: 6px 7px;
  border-radius: 8px;
}

:root:not([data-theme="night"]) .theme-option:hover {
  background: var(--quiet-accent-soft);
  border-color: #b9d9cd;
  transform: none;
}

:root:not([data-theme="night"]) .theme-option.is-active {
  background: var(--quiet-accent-soft);
  border-color: #b9d9cd;
}

:root:not([data-theme="night"]) .theme-option-swatch {
  width: 44px;
  height: 22px;
  border-color: var(--quiet-line);
  border-radius: 6px;
  box-shadow: none;
}

:root:not([data-theme="night"]) .theme-popover .theme-option-copy strong {
  color: var(--quiet-ink);
  font-size: 11px;
}

:root:not([data-theme="night"]) .theme-option-copy small {
  color: var(--quiet-muted);
  font-size: 9px;
}

:root:not([data-theme="night"]) .intro-block {
  padding: 14px 16px;
  color: var(--quiet-ink);
  background: var(--quiet-accent-soft);
  border-left: 3px solid var(--quiet-accent);
  font-size: 14px;
  line-height: 1.72;
}

:root:not([data-theme="night"]) .daily-section {
  margin-bottom: 46px;
}

:root:not([data-theme="night"]) .section-heading {
  grid-template-columns: 30px 1fr;
  gap: 15px;
  margin-bottom: 22px;
}

:root:not([data-theme="night"]) .section-number {
  color: var(--quiet-accent);
  font-size: 19px;
}

:root:not([data-theme="night"]) .section-category {
  color: var(--quiet-muted);
  font-size: 10px;
}

:root:not([data-theme="night"]) .section-heading h3 {
  color: var(--quiet-ink);
  font-size: 21px;
  line-height: 1.3;
}

:root:not([data-theme="night"]) .section-body {
  padding-left: 45px;
  color: var(--quiet-ink);
  font-size: 15px;
  line-height: 1.9;
  overflow-wrap: anywhere;
  word-break: break-word;
}

:root:not([data-theme="night"]) .section-body .subpoint-title {
  color: var(--quiet-ink);
  font-size: 15px;
  border-color: var(--quiet-line);
  overflow-wrap: anywhere;
}

:root:not([data-theme="night"]) .section-body a,
:root:not([data-theme="night"]) .article-title-link,
:root:not([data-theme="night"]) .reference-links a {
  overflow-wrap: anywhere;
  word-break: break-word;
}

:root:not([data-theme="night"]) .toc-panel {
  padding: 25px 20px;
}

:root:not([data-theme="night"]) .toc-panel .panel-heading {
  margin-bottom: 16px;
}

:root:not([data-theme="night"]) .toc-depth-toggle {
  color: var(--quiet-ink);
  background: var(--quiet-card);
  border-color: var(--quiet-line);
}

:root:not([data-theme="night"]) .toc-depth-toggle:hover,
:root:not([data-theme="night"]) .toc-depth-toggle[aria-expanded="true"] {
  color: var(--quiet-accent);
  background: var(--quiet-accent-soft);
  border-color: #b9d9cd;
}

:root:not([data-theme="night"]) .toc-link {
  color: var(--quiet-muted);
  border-color: var(--quiet-line);
  border-radius: 8px;
  font-size: 12px;
}

:root:not([data-theme="night"]) .toc-link:not(.is-subpoint) {
  color: var(--quiet-ink);
  font-weight: 600;
}

:root:not([data-theme="night"]) .toc-link:hover {
  color: var(--quiet-accent);
  background: var(--quiet-accent-soft);
}

:root:not([data-theme="night"]) .toc-link.is-subpoint {
  /* 二级观点用纯黑正文色，保证在所有浅色皮肤中一眼可读。 */
  color: #000;
  font-size: 11px;
}

:root:not([data-theme="night"]) .day-navigation-card {
  color: var(--quiet-ink);
  background: var(--quiet-card);
  border-color: var(--quiet-line);
}

:root:not([data-theme="night"]) .day-navigation-card:hover:not(:disabled) {
  color: var(--quiet-accent);
  background: var(--quiet-accent-soft);
  border-color: #b9d9cd;
}

@media (max-width: 1080px) {
  :root:not([data-theme="night"]) .article-panel {
    padding-inline: 36px;
  }
}

@media (max-width: 720px) {
  /* 所有主题的手机端都允许长链接和长英文断行，避免正文撑破视口。 */
  .section-body,
  .section-body p,
  .section-body a,
  .reference-links a,
  .article-title-link {
    overflow-wrap: anywhere;
    word-break: break-word;
  }

  :root:not([data-theme="night"]) .masthead {
    min-height: 60px;
    padding: 0 16px;
  }

  :root:not([data-theme="night"]) .article-panel {
    width: 100%;
    padding: 28px 22px 72px;
  }

  :root:not([data-theme="night"]) .article-hero h2 {
    font-size: 27px;
  }

  :root:not([data-theme="night"]) .section-heading {
    grid-template-columns: 30px 1fr;
  }

  :root:not([data-theme="night"]) .section-body {
    padding-left: 0;
    font-size: 15px;
  }
}

/* 深夜阅读沿用 A 版的几何布局，只替换成夜间颜色，避免换肤时侧栏突然变宽。 */
:root[data-theme="night"] .masthead {
  grid-template-columns: auto 1fr auto;
  min-height: 66px;
  padding: 0 24px;
}

:root[data-theme="night"] .brand-block {
  display: flex;
  align-items: center;
  gap: 9px;
  min-width: 150px;
}

:root[data-theme="night"] .brand-block .edition {
  display: none;
}

:root[data-theme="night"] .brand-block h1 {
  font-size: 17px;
  letter-spacing: -0.04em;
}

:root[data-theme="night"] .brand-block p {
  margin: 0;
  padding-left: 9px;
  font-size: 10px;
  letter-spacing: 0.04em;
}

:root[data-theme="night"] .metrics {
  gap: 6px;
  align-items: center;
}

:root[data-theme="night"] .metrics div {
  min-width: 56px;
}

:root[data-theme="night"] .metrics strong {
  font-size: 14px;
}

:root[data-theme="night"] .metrics span {
  font-size: 8px;
}

:root[data-theme="night"] .reader-shell {
  --archive-width: 218px;
  --toc-width: 230px;
  grid-template-columns: var(--archive-width) minmax(0, 1fr) var(--toc-width);
}

:root[data-theme="night"] .reader-shell.is-archive-collapsed {
  grid-template-columns: 0 minmax(0, 1fr) var(--toc-width);
}

:root[data-theme="night"] .reader-shell.is-toc-collapsed {
  grid-template-columns: var(--archive-width) minmax(0, 1fr) 0;
}

:root[data-theme="night"] .archive-panel {
  padding: 24px 18px;
}

:root[data-theme="night"] .archive-month-body {
  margin-left: 10px;
  padding-left: 10px;
}

:root[data-theme="night"] .archive-month-toggle {
  padding-left: 10px;
}

:root[data-theme="night"] .archive-item {
  height: 38px;
  align-items: center;
  padding: 0 10px;
}

:root[data-theme="night"] .archive-item time {
  display: inline-flex;
  align-items: center;
  height: 100%;
  line-height: 1;
}

:root[data-theme="night"] .archive-item-status {
  display: inline-flex;
  align-items: center;
  justify-self: end;
  height: 100%;
}

:root[data-theme="night"] .article-panel {
  width: min(900px, 100%);
  padding: 42px 50px 100px;
}

:root[data-theme="night"] .article-hero {
  margin-bottom: 36px;
  padding: 0 0 20px;
}

:root[data-theme="night"] .article-hero h2 {
  margin: 12px 0 8px;
  font-size: 34px;
  line-height: 1.15;
}

:root[data-theme="night"] .section-heading {
  grid-template-columns: 30px 1fr;
  gap: 15px;
  margin-bottom: 22px;
}

:root[data-theme="night"] .section-body {
  padding-left: 45px;
  font-size: 15px;
  line-height: 1.9;
  overflow-wrap: anywhere;
  word-break: break-word;
}

:root[data-theme="night"] .toc-panel {
  padding: 25px 20px;
}

:root[data-theme="night"] .toc-link {
  color: var(--ink);
  font-size: 12px;
}

/* 深夜阅读保持同样的一级、二级字号梯度，但不用黑字以免融入深色背景。 */
:root[data-theme="night"] .toc-link.is-subpoint {
  color: var(--ink);
  font-size: 11px;
}

:root[data-theme="night"] .community-action,
:root[data-theme="night"] .annotation-toggle {
  height: 24px;
  min-height: 24px;
  min-width: 0;
  padding: 0 8px;
  line-height: 22px;
}

/* 夜间主题的原文黄底高亮必须使用深色字，避免浅色正文与黄底对比不足。 */
:root[data-theme="night"] .rich-highlight {
  color: #3b2a00;
  background: #ffe89a;
}

/* 夜间主题的选区工具栏使用深色按钮，避免白字落在浅色按钮底上。 */
:root[data-theme="night"] .annotation-action,
:root[data-theme="night"] .annotation-color-select {
  color: var(--masthead-text);
  background: var(--masthead-bg);
  border-color: var(--line);
  box-shadow: 0 7px 18px rgba(0, 0, 0, 0.34);
}

:root[data-theme="night"] .annotation-action:hover,
:root[data-theme="night"] .annotation-color-select:hover {
  color: #fff;
  background: var(--accent);
  border-color: var(--accent);
}

:root[data-theme="night"] .annotation-color-select option {
  color: var(--masthead-text);
  background: var(--paper-deep);
}

@media (max-width: 1080px) {
  :root[data-theme="night"] .article-panel {
    padding-inline: 36px;
  }
}

@media (max-width: 720px) {
  :root[data-theme="night"] .masthead {
    min-height: 60px;
    padding: 0 16px;
  }

  :root[data-theme="night"] .article-panel {
    width: 100%;
    padding: 28px 22px 72px;
  }

  :root[data-theme="night"] .article-hero h2 {
    font-size: 27px;
  }

  :root[data-theme="night"] .section-body {
    padding-left: 0;
  }
}