/* 资料浏览器：无轮播，胶囊标签 + 灰底文档窗口。 */
.atlas { position: relative; padding: 150px var(--gutter) 140px; text-align: center; }
.atlas-title { margin: 0; }
.atlas-sub { margin: 14px auto 0; max-width: 620px; font-size: 16px; color: var(--text-muted); }
.tabs, [role="tablist"] { display: flex; justify-content: center; flex-wrap: wrap; gap: 8px; min-width: 0; }
.atlas-tabs { margin-top: 36px; }
[role="tab"] {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 42px; padding: 10px 20px;
  border: 1px solid var(--border); border-radius: var(--r-pill);
  background: var(--bg-panel); color: var(--text);
  font-size: 15px; font-weight: var(--weight-medium); line-height: 1.3; text-align: center;
  transition: background-color var(--ease),color var(--ease),border-color var(--ease);
}
[role="tab"]:hover { border-color: var(--accent); color: var(--accent); text-decoration: none; }
[role="tab"][aria-selected="true"] { background: var(--accent); color: var(--on-ink); border-color: var(--accent); }
[role="tabpanel"] { min-width: 0; }
.shell { max-width: 1200px; margin: 40px auto 0; padding: 64px; background: var(--bg-panel-2); color: var(--text); border-radius: var(--r-shell); text-align: left; }
.doc { background: var(--bg-panel); color: var(--text); border-radius: var(--r-window); overflow: hidden; box-shadow: var(--flat-edge); }
.doc-bar { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; min-height: 48px; padding: 10px 22px; border-bottom: 1px solid var(--border); gap: 12px; }
.doc-site { font-family: var(--font-display); font-size: 13px; font-weight: var(--weight-display); }
.doc-file { font-family: var(--font-mono); font-size: 12.5px; color: var(--text-muted); overflow-wrap: anywhere; }
.doc-dots { justify-self: end; display: flex; gap: 7px; }
.doc-dots i { width: 10px; height: 10px; flex-shrink: 0; border-radius: var(--r-circle); background: var(--mute-dot); color: var(--text); }
.doc-body { display: grid; grid-template-columns: minmax(0,5fr) minmax(0,7fr); gap: 48px; padding: 44px 48px 48px; }
.doc-kicker { margin: 0 0 10px; font-family: var(--font-mono); font-size: 12px; color: var(--accent); }
.doc-body h3 { margin: 0; }
.doc-text { margin: 14px 0 0; font-size: 15px; line-height: 1.85; color: var(--text-muted); }
.doc-link { display: inline-block; margin-top: 20px; font-size: 15px; font-weight: var(--weight-semibold); color: var(--accent); }
.yaml .p { color: var(--accent-dark); font-weight: var(--weight-bold); }
.toc {
  display: flex; flex-wrap: wrap; gap: 8px;
  padding: 16px; margin-block: 28px; border-radius: var(--r-window);
  background: var(--bg-panel-2); color: var(--text);
}
.toc a { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; padding: 9px 16px; border-radius: var(--r-pill); color: var(--text-muted); }
.toc a:hover, .toc a[aria-current] { background: var(--bg-panel); color: var(--accent); text-decoration: none; }
/* sticky 仅用于直接父元素包含所有章节的目录。默认目录留在文档流。 */
.toc-sticky { position: sticky; top: 12px; z-index: 10; }
.faq-item { border-bottom: 1px solid var(--border); padding-block: 8px; }
.faq-item summary { position: relative; padding: 20px 44px 20px 0; cursor: pointer; font-weight: var(--weight-semibold); list-style: none; }
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after { content: "+"; position: absolute; right: 8px; top: 17px; font-size: 24px; line-height: 1.2; color: var(--accent); }
.faq-item[open] summary::after { content: "−"; }
.faq-answer { padding: 0 32px 18px 0; color: var(--text-muted); }
.faq-answer p:last-child { margin-bottom: 0; }
.term-card { padding: 30px; border-radius: var(--r-tile); background: var(--bg-panel); color: var(--text); border: 1px solid var(--border); }
.term-card h3 { margin: 12px 0; font-family: var(--font-mono); font-size: 30px; overflow-wrap: anywhere; }
.term-card p { margin-bottom: 18px; color: var(--text-muted); }
.term-card code { font-size: 13px; }
.term-category { color: var(--text-muted); font-size: 12px; }
.badge, .tag {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  max-width: 100%; padding: 4px 10px; border-radius: var(--r-pill);
  background: var(--bg-panel-2); color: var(--text-muted);
  border: 1px solid var(--border); font-size: 12px; line-height: 1.5;
  overflow-wrap: anywhere; white-space: normal; vertical-align: middle;
}
.badge-first { background: var(--accent-dark); color: var(--on-ink); border-color: var(--accent-dark); }
.badge-recommended { background: var(--bg-panel); color: var(--accent); border-color: var(--accent); }
.badge-archived { background: var(--bg-panel-2); color: var(--text-muted); border-color: var(--border); }
.badge-row { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; }
.client-card { padding: 32px; border-radius: var(--r-tile); background: var(--bg-panel); color: var(--text); border: 1px solid var(--border); }
.client-card.is-primary { border-color: var(--accent); }
.client-head { display: flex; align-items: flex-start; gap: 16px; flex-wrap: wrap; }
.client-head > div { flex: 1; min-width: 0; }
.client-icon { width: 56px; height: 56px; flex-shrink: 0; }
.client-head h3 { margin: 0 0 10px; }
.client-card p { color: var(--text-muted); margin: 20px 0; }
.client-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin-top: 24px; }
.client-meta { display: flex; flex-wrap: wrap; gap: 8px 16px; margin-top: 16px; color: var(--text-muted); font-size: 13px; }
[data-version]:empty { display: none; }
.post-card { display: flex; flex-direction: column; align-items: flex-start; padding: 30px; border-radius: var(--r-tile); background: var(--bg-panel); color: var(--text); border: 1px solid var(--border); }
.post-meta { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; font-size: 12px; color: var(--text-muted); }
.post-card h3 { margin: 22px 0 14px; font-size: 22px; }
.post-card h3 a { color: var(--text); }
.post-card h3 a:hover { color: var(--accent); }
.post-card p { color: var(--text-muted); font-size: 15px; }
.post-card .doc-link { margin-top: auto; padding-top: 12px; }
.callout { margin: 24px 0; padding: 24px 28px; border-left: 3px solid var(--accent); border-radius: var(--r-card); background: var(--bg-panel-2); color: var(--text); }
.callout strong { display: block; margin-bottom: 8px; }
.callout p:last-child { margin-bottom: 0; }
.callout-warn { border-color: var(--warn); }
.callout-error { border-color: var(--error); }
.callout-success { border-color: var(--success); }
.table-wrap { max-width: 100%; min-width: 0; overflow-x: auto; -webkit-overflow-scrolling: touch; border: 1px solid var(--border); border-radius: var(--r-card); }
.data-table { width: 100%; border-collapse: collapse; font-size: 14px; background: var(--bg-panel); color: var(--text); }
.data-table caption { text-align: left; padding: 16px; font-weight: var(--weight-semibold); }
.data-table th, .data-table td, .prose table th, .prose table td, .article-body table th, .article-body table td {
  min-width: 7em; padding: 12px 16px; text-align: left; vertical-align: top;
  overflow-wrap: normal; word-break: normal;
}
.data-table th { background: var(--bg-panel-2); color: var(--text-muted); font-size: 12px; font-weight: var(--weight-semibold); }
.data-table td { border-top: 1px solid var(--border); }
.prose table, .article-body table {
  display: block; overflow-x: auto; -webkit-overflow-scrolling: touch;
  max-width: 100%; min-width: 0; border-collapse: collapse;
}
.prose table code, .article-body table code { overflow-wrap: anywhere; }
.article-download {
  display: grid; grid-template-columns: minmax(0,1fr) auto; align-items: center; gap: 24px;
  margin-block: 40px; padding: 28px; border-radius: var(--r-tile); background: var(--bg-panel-2); color: var(--text);
}
.article-download h2, .article-download h3 { font-size: 22px; margin: 0 0 8px; }
.article-download p { margin: 0; font-size: 14px; color: var(--text-muted); }
.dl-fab {
  position: fixed; right: 24px; bottom: max(24px,env(safe-area-inset-bottom)); z-index: 20;
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 46px; padding: 12px 20px 12px 16px; border-radius: var(--r-pill);
  background: var(--accent-dark); color: var(--on-ink);
  font-size: 14px; font-weight: var(--weight-semibold); line-height: 1;
  box-shadow: 0 0 0 3px var(--bg); transition: background-color var(--ease);
}
.dl-fab:hover { background: var(--accent); color: var(--on-ink); text-decoration: none; }
.dl-fab svg { width: 17px; height: 17px; }
.preview-group { margin-top: 48px; }
.preview-group > h3 { margin-bottom: 24px; }
.preview-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 18px; }
.swatch-grid { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 16px; }
.swatch { min-width: 0; margin: 0; }
.swatch-chip { height: 88px; border-radius: var(--r-card); border: 1px solid var(--border); }
.swatch figcaption { padding-top: 8px; font-family: var(--font-mono); font-size: 12px; overflow-wrap: anywhere; }
.sw-bg { background: var(--bg); color: var(--text); }
.sw-panel { background: var(--bg-panel); color: var(--text); }
.sw-panel2 { background: var(--bg-panel-2); color: var(--text); }
.sw-border { background: var(--border); color: var(--text); }
.sw-accent { background: var(--accent); color: var(--on-ink); }
.sw-dark { background: var(--accent-dark); color: var(--on-ink); }
.sw-text { background: var(--text); color: var(--on-ink); }
.sw-muted { background: var(--text-muted); color: var(--on-ink); }
.sw-success { background: var(--success); color: var(--on-ink); }
.sw-warn { background: var(--warn); color: var(--text); }
.sw-error { background: var(--error); color: var(--on-ink); }
.sw-pine { background: var(--tile-pine); color: var(--text); }
.sw-clay { background: var(--tile-clay); color: var(--text); }
.sw-heather { background: var(--tile-heather); color: var(--text); }
.sw-paper { background: var(--paper-soft); color: var(--text); }
.sw-dot { background: var(--mute-dot); color: var(--text); }
.sw-on { background: var(--on-ink); color: var(--text); }
.sw-soft { background: var(--accent-dark); color: var(--on-ink); }
.sw-soft::before { content: ""; display: block; height: 100%; border-radius: inherit; background: var(--on-ink-soft); color: var(--text); }
.sw-line { background: var(--accent-dark); color: var(--on-ink); }
.sw-line::before { content: ""; display: block; height: 100%; border-radius: inherit; background: var(--ink-line); color: var(--on-ink); }
.sw-edge { background: var(--edge); color: var(--text); }
.sw-inkedge { background: var(--ink-edge); color: var(--on-ink); }
.sw-clear { background: var(--clear); color: var(--text); }
.sw-veil { background: var(--veil); color: var(--text); }
@media (max-width:900px) {
  .atlas { padding: 96px var(--gutter); }
  .shell { padding: 16px; border-radius: var(--r-tile); }
  .doc-body { grid-template-columns: 1fr; gap: 28px; padding: 28px 22px; }
  .doc-site { display: none; }
  .doc-bar { grid-template-columns: minmax(0,1fr) auto; }
  .swatch-grid { grid-template-columns: repeat(3,minmax(0,1fr)); }
}
@media (max-width:640px) {
  [role="tab"] { font-size: 13px; padding-inline: 14px; }
  .atlas-tabs { gap: 8px; }
  .toc { padding: 10px; gap: 4px; }
  .toc a { font-size: 14px; padding-inline: 12px; }
  .client-card, .term-card, .post-card { padding: 22px; }
  .article-download { grid-template-columns: 1fr; padding: 22px; }
  .article-download .btn { justify-self: start; }
  .dl-fab { right: 16px; bottom: max(16px,env(safe-area-inset-bottom)); }
  .swatch-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .callout { padding: 20px; }
  .toc-sticky { position: static; }
}