/**
 * ZH Library Prose Layout
 * 依赖 tokens.css + base.css + site-chrome.css — 适用于调研页、文章页
 */

/* —— Shell: 侧栏 + 正文 —— */

.shell {
  display: grid;
  grid-template-columns: var(--zh-sidebar-width) minmax(0, var(--zh-content-width));
  gap: var(--zh-shell-gap);
  width: min(
    100% - var(--zh-page-gutter),
    calc(var(--zh-content-width) + var(--zh-sidebar-width) + var(--zh-shell-gap))
  );
  margin-inline: auto;
  padding: var(--zh-space-8) 0 var(--zh-space-16);
}

.sidebar {
  position: sticky;
  top: var(--zh-space-8);
  align-self: start;
}

.sidebar-meta {
  margin: 0 0 var(--zh-space-5);
  font-size: var(--zh-text-xs);
  color: var(--zh-color-muted);
  line-height: var(--zh-leading-snug);
}

.sidebar nav {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
  font-size: var(--zh-text-md);
}

.sidebar nav a {
  display: block;
  padding: 0.3rem 0 0.3rem var(--zh-space-3);
  margin-left: calc(-1 * var(--zh-space-3));
  text-decoration: none;
  color: var(--zh-color-muted);
  border-left: var(--zh-border-active) solid transparent;
  line-height: var(--zh-leading-tight);
}

.sidebar nav a:hover,
.sidebar nav a.active {
  color: var(--zh-color-text);
}

.sidebar nav a.active {
  border-left-color: var(--zh-color-text);
}

/* —— 正文区（作用域 .prose） —— */

.prose .meta {
  margin: 0 0 var(--zh-space-8);
  font-size: var(--zh-text-md);
  color: var(--zh-color-muted);
}

.prose h1 {
  font-size: var(--zh-text-lg);
  font-weight: var(--zh-weight-semibold);
  line-height: var(--zh-leading-tight);
  letter-spacing: var(--zh-tracking-tight);
  margin: 0 0 var(--zh-space-3);
}

.prose .lead {
  margin: 0 0 var(--zh-space-10);
  color: var(--zh-color-muted);
}

.prose section {
  padding: var(--zh-space-8) 0;
  border-bottom: var(--zh-border-width) solid var(--zh-color-line);
  scroll-margin-top: var(--zh-space-6);
}

.prose section:first-of-type { padding-top: 0; }
.prose section:last-of-type { border-bottom: none; }

.prose h2 {
  font-size: var(--zh-text-sm);
  font-weight: var(--zh-weight-semibold);
  letter-spacing: var(--zh-tracking-wide);
  text-transform: uppercase;
  color: var(--zh-color-muted);
  margin: 0 0 var(--zh-space-3);
}

.prose .hint {
  margin: 0 0 var(--zh-space-4);
  color: var(--zh-color-muted);
}

.prose ul {
  margin: 0;
  padding-left: 1.15rem;
}

.prose ul li { margin-bottom: 0.35rem; }
.prose ul li:last-child { margin-bottom: 0; }

.prose dl.facts {
  margin: var(--zh-space-5) 0 0;
  font-size: var(--zh-text-md);
  color: var(--zh-color-muted);
}

.prose dl.facts div {
  display: grid;
  grid-template-columns: 3.5rem 1fr;
  gap: var(--zh-space-2) var(--zh-space-4);
  margin-bottom: 0.35rem;
}

.prose dl.facts div:last-child { margin-bottom: 0; }

.prose dl.facts dt { margin: 0; color: var(--zh-color-muted); }
.prose dl.facts dd { margin: 0; color: var(--zh-color-text); }

.prose .pair article { margin-bottom: var(--zh-space-5); }
.prose .pair article:last-child { margin-bottom: 0; }

.prose .pair .label {
  font-size: var(--zh-text-md);
  font-weight: var(--zh-weight-semibold);
  margin: 0 0 var(--zh-space-1);
}

.prose .pair p {
  margin: 0;
  color: var(--zh-color-muted);
  font-size: var(--zh-text-md);
  line-height: var(--zh-leading-normal);
}

.prose footer {
  margin-top: var(--zh-space-10);
  padding-top: var(--zh-space-8);
  border-top: var(--zh-border-width) solid var(--zh-color-line);
  font-size: var(--zh-text-sm);
  color: var(--zh-color-muted);
  line-height: var(--zh-leading-normal);
}

.prose footer p { margin: 0; }

@media (max-width: 720px) {
  .shell {
    grid-template-columns: 1fr;
    gap: 0;
  }

  .sidebar {
    position: static;
    padding-bottom: var(--zh-space-6);
    margin-bottom: var(--zh-space-8);
    border-bottom: var(--zh-border-width) solid var(--zh-color-line);
  }

  .sidebar nav {
    flex-flow: row wrap;
    gap: 0.35rem var(--zh-space-3);
  }

  .sidebar nav a {
    padding: 0;
    margin: 0;
    border-left: none;
  }

  .sidebar nav a.active {
    text-decoration: underline;
    text-underline-offset: var(--zh-underline-offset);
  }
}