/* 静室 CSS：09-reading-atlas.css。职责：把已审计的目录、标签和来源关系转化为安静的阅读坐标。 */
@layer pages {
  /* 文章页：阅读罗盘不推荐内容，只说明当前文章真实的分类、主题和标签位置。 */
  .reading-compass {
    display:grid;
    grid-template-columns:minmax(172px, .72fr) minmax(0, 1.8fr);
    gap:var(--grid-gap-standard);
    max-width:var(--container-reading);
    margin:var(--space-5) auto 0;
    padding:var(--space-4) 0;
    border-top:var(--stroke-hairline) solid var(--border-subtle);
    border-bottom:var(--stroke-hairline) solid var(--border-subtle)
  }
  .reading-compass-lead {
    display:flex;
    flex-wrap:wrap;
    align-content:start;
    align-items:baseline;
    gap:var(--space-2) var(--space-3)
  }
  .reading-compass-lead .section-kicker {
    flex-basis:100%;
    margin:0 0 var(--space-1)
  }
  .compass-category {
    color:var(--article-category-ink,var(--category-culture));
    font:400 clamp(1.06rem,1.55vw,1.26rem)/1.35 var(--font-reading);
    letter-spacing:-.02em
  }
  .compass-category:hover { color:var(--article-category-ink,var(--category-culture)) }
  .compass-theme,.compass-role {
    color:var(--text-muted);
    font:600 .61rem/1.45 var(--font-ui);
    letter-spacing:.07em;
    text-transform:uppercase
  }
  .compass-theme:before,.compass-role:before {
    margin-right:var(--space-2);
    color:var(--border-strong);
    content:"·"
  }
  .reading-compass .tag-list {
    align-content:start;
    gap:var(--space-2) var(--space-4);
    margin:0;
    padding-top:var(--space-1)
  }
  .reading-compass .tag-list a.category-tag {
    min-height:28px;
    color:var(--article-category-ink,var(--category-culture));
    font:500 .68rem/1.55 var(--font-ui);
    letter-spacing:.035em
  }
  .reading-compass .tag-list a.category-tag:hover,.reading-compass .tag-list a.category-tag:focus-visible { color:var(--article-category-ink,var(--category-culture)); border-color:currentColor; }
  .reading-compass .tag-list a.category-tag:before { content:"#"; color:currentColor }
  .essay-exits a { white-space:nowrap }

  /* 馆藏页：篇数是地图刻度，不是热度榜。 */
  .library-topography {
    display:grid;
    grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);
    gap:var(--space-8);
    align-items:end;
    max-width:var(--container-feature);
    margin:var(--space-8) auto var(--space-9);
    padding:var(--space-6) 0 var(--space-7);
    border-top:var(--stroke-hairline) solid var(--text-primary);
    border-bottom:var(--stroke-hairline) solid var(--border-strong)
  }
  .library-topography header .section-kicker { margin-bottom:var(--space-3) }
  .library-topography h2 {
    max-width:14ch;
    margin:0;
    font:400 clamp(2rem,3.45vw,3.25rem)/1.15 var(--font-reading);
    letter-spacing:-.045em
  }
  .topography-copy>p {
    max-width:49ch;
    margin:0 0 var(--space-5);
    color:var(--text-secondary);
    font:400 1rem/1.8 var(--font-reading)
  }
  .topography-routes {
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
    border-top:var(--stroke-hairline) solid var(--border-strong)
  }
  .topography-routes a {
    display:grid;
    grid-template-columns:28px minmax(0,1fr) auto;
    gap:var(--space-2);
    align-items:baseline;
    min-height:68px;
    padding:var(--space-3) 0;
    border-bottom:var(--stroke-hairline) solid var(--border-subtle)
  }
  .topography-routes a:nth-child(odd) { padding-right:var(--space-5) }
  .topography-routes a:nth-child(even) {
    padding-left:var(--space-5);
    border-left:var(--stroke-hairline) solid var(--border-subtle)
  }
  .topography-routes span {
    color:var(--text-muted);
    font:600 .57rem/1 var(--font-ui);
    letter-spacing:.09em
  }
  .topography-routes strong {
    color:var(--text-primary);
    font:400 1rem/1.35 var(--font-reading);
    letter-spacing:-.015em
  }
  .topography-routes b {
    color:var(--action-primary);
    font:500 .68rem/1 var(--font-ui);
    font-variant-numeric:tabular-nums
  }
  .topography-routes i {
    display:none;
    color:var(--action-primary);
    font-style:normal
  }
  .topography-routes a:hover strong,.topography-routes a:hover span { color:var(--action-primary) }

  /* 搜索页：真实主题作为可选路线，而非自动填充或趋势推荐。 */
  .search-trails {
    display:flex;
    flex-wrap:wrap;
    gap:var(--space-2) var(--space-4);
    align-items:baseline;
    max-width:var(--container-feature);
    margin:var(--space-4) auto 0;
    color:var(--text-muted)
  }
  .search-trails>span {
    margin-right:var(--space-1);
    font:600 .61rem/1.55 var(--font-ui);
    letter-spacing:.075em
  }
  .search-trails a {
    padding-bottom:2px;
    border-bottom:var(--stroke-hairline) solid var(--border-subtle);
    color:var(--text-secondary);
    font:500 .68rem/1.55 var(--font-ui);
    letter-spacing:.035em
  }
  .search-trails a b {
    margin-left:3px;
    color:var(--action-primary);
    font-weight:600;
    font-variant-numeric:tabular-nums
  }
  .search-trails a:hover { border-color:var(--action-primary); color:var(--action-primary) }

  @media(max-width:760px) {
    .reading-compass {
      grid-template-columns:1fr;
      gap:var(--space-3);
      margin-top:var(--space-5);
      padding-top:var(--space-4);
      padding-bottom:var(--space-4)
    }
    .reading-compass .tag-list { gap:var(--space-2) var(--space-3); padding-top:0 }
    .library-topography {
      grid-template-columns:1fr;
      gap:var(--space-5);
      margin-top:var(--space-7);
      margin-bottom:var(--space-8);
      padding-top:var(--space-5);
      padding-bottom:var(--space-6)
    }
    .library-topography h2 { max-width:16ch; font-size:clamp(1.85rem,8vw,2.5rem) }
    .topography-copy>p { font-size:.98rem; line-height:1.78 }
    .topography-routes { grid-template-columns:1fr }
    .topography-routes a,.topography-routes a:nth-child(odd),.topography-routes a:nth-child(even) {
      grid-template-columns:26px minmax(0,1fr) auto 16px;
      min-height:54px;
      padding:var(--space-3) 0;
      border-left:0
    }
    .topography-routes i { display:block }
    .search-trails { margin-top:var(--space-3); gap:var(--space-2) var(--space-3) }
  }
}