/* 索引展开式与横向平台式标签共用 tabs.js。 */
.tab-strip, [role="tablist"].tab-strip {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin-bottom: 24px;
  padding-bottom: 16px;
  border-bottom: var(--rule) solid var(--border);
}
.tab-strip [role="tab"] {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  max-width: 100%;
  gap: 8px;
  padding: 10px 18px;
  border: var(--rule) solid var(--border);
  border-radius: var(--radius-pill);
  background: var(--clear);
  color: var(--text);
  font-weight: var(--weight-semibold);
}
.tab-strip [role="tab"]:hover { background: var(--bg-panel); color: var(--text); }
.tab-strip [role="tab"][aria-selected="true"] { background: var(--accent); color: var(--bg); border-color: var(--accent); }
[role="tabpanel"] { min-width: 0; }
[role="tabpanel"]:focus-visible { outline-offset: 6px; }
.index { border-top: var(--rule) solid var(--border); padding: 20px var(--page-pad) 112px; }
.index-head { display: flex; justify-content: space-between; align-items: baseline; gap: 24px; margin: 0; font-family: var(--font-mono); font-size: var(--text-xs); letter-spacing: .1em; text-transform: uppercase; color: var(--text-muted); }
.index-grid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 64px; margin-top: 56px; }
.index-aside { align-self: start; position: sticky; top: 32px; }
.index-aside h2 { margin: 0; }
.index-aside p { margin: 16px 0 0; max-width: 26em; font-family: var(--font-serif); font-size: var(--text-lg); line-height: 1.6; color: var(--text-muted); }
.index-list { list-style: none; margin: 0; padding: 0; border-top: var(--rule) solid var(--border); }
.index-row { border-bottom: var(--rule) solid var(--border); }
.index-trigger {
  position: relative;
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 24px;
  width: 100%;
  padding: 22px 4px 22px 22px;
  border: 0;
  background: var(--bg);
  color: var(--text);
  text-decoration: none;
  text-align: left;
  transition: background-color var(--motion-fast);
}
.index-trigger:hover { background: var(--bg-panel); color: var(--text); }
.index-trigger[aria-selected="true"]::before { content: ""; position: absolute; left: 0; top: 14px; bottom: 14px; width: 3px; background: var(--accent); }
.index-trigger .name { font-size: var(--text-lg); font-weight: var(--weight-bold); }
.index-trigger .tag { font-family: var(--font-mono); font-size: var(--text-xs); letter-spacing: .08em; color: var(--text-muted); text-align: right; overflow-wrap: anywhere; }
.spec-card { margin: 0 0 20px 22px; padding: 28px; border-radius: var(--radius-lg); background: var(--bg-panel); color: var(--text); }
.spec-rows { margin: 24px 0; }
.spec-rows > div { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); gap: 20px; padding-block: 12px; border-top: var(--rule) solid var(--border); }
.spec-rows > div:last-child { border-bottom: var(--rule) solid var(--border); }
.spec-rows dt { color: var(--text-muted); font-size: var(--text-sm); }
.spec-rows dd { margin: 0; font-size: var(--text-sm); }

.toc { position: sticky; top: 16px; align-self: start; padding: 20px; border-radius: var(--radius-lg); background: var(--bg-panel); color: var(--text); }
.toc-title { margin: 0 0 12px; font-size: var(--text-sm); font-weight: var(--weight-bold); }
.toc ul { margin: 0; padding: 0; list-style: none; }
.toc a { display: block; padding-block: 9px; font-size: var(--text-sm); text-decoration: none; }
.toc a:hover { text-decoration: underline; }
.document-grid { display: grid; grid-template-columns: 240px minmax(0, 1fr); gap: 48px; align-items: start; }
.toc-tabs { display: flex; flex-wrap: wrap; gap: 8px 24px; padding-block: 16px; border-block: var(--rule) solid var(--border); margin-bottom: 32px; }
.toc-tabs a { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; text-decoration: none; font-weight: var(--weight-semibold); }
.faq-item { border-bottom: var(--rule) solid var(--border); }
.faq-item summary { position: relative; padding: 24px 40px 24px 0; list-style: none; font-weight: var(--weight-semibold); cursor: pointer; }
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after { content: "+"; position: absolute; right: 8px; top: 24px; font-family: var(--font-mono); }
.faq-item[open] summary::after { content: "−"; }
.faq-answer { max-width: 70ch; padding-bottom: 24px; color: var(--text-muted); }
.faq-answer > :last-child { margin-bottom: 0; }
.term-card { padding: 28px; background: var(--bg-panel); color: var(--text); border-radius: var(--radius-lg); }
.term-card h3 { margin-bottom: 8px; }
.term-en { display: block; margin-bottom: 18px; font-family: var(--font-mono); font-size: var(--text-xs); color: var(--text-muted); overflow-wrap: anywhere; }
.term-card p { margin-bottom: 16px; }
.term-links { font-size: var(--text-sm); }
.client-card { display: flex; flex-direction: column; gap: 24px; padding: 32px; border-radius: var(--radius-xl); background: var(--bg-panel); color: var(--text); }
.client-head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: start; gap: 12px; }
.client-head h3 { margin: 0; }
.client-card .actions { margin-top: auto; }
.client-version:empty { display: none; }
.client-version { font-family: var(--font-mono); font-size: var(--text-xs); color: var(--text-muted); }
.client-meta { margin: 0; }
.client-meta > div { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); gap: 16px; padding-block: 12px; border-top: var(--rule) solid var(--border); }
.client-meta dt { color: var(--text-muted); font-size: var(--text-sm); }
.client-meta dd { margin: 0; font-size: var(--text-sm); }
.badges { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; }
.badge, .chip {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  max-width: 100%;
  padding: 5px 11px;
  border: var(--rule) solid var(--border);
  border-radius: var(--radius-pill);
  background: var(--clear);
  color: var(--text);
  font-size: var(--text-xs);
  font-weight: var(--weight-medium);
  line-height: 1.5;
  overflow-wrap: anywhere;
  white-space: normal;
  text-decoration: none;
}
.badge-primary { border-color: var(--accent); background: var(--accent); color: var(--bg); }
.badge-recommended { border-color: var(--accent); }
.badge-archived { border-style: dashed; background: var(--bg); color: var(--text-muted); }
.status-dot { display: inline-block; width: 6px; height: 6px; flex-shrink: 0; border-radius: var(--radius-pill); background: var(--text-muted); color: var(--bg); }
.post-card { display: flex; flex-direction: column; padding: 32px; border-radius: var(--radius-xl); background: var(--bg-panel); color: var(--text); }
.post-card h3 { margin-top: 20px; }
.post-card h3 a { text-decoration: none; }
.post-card h3 a:hover { text-decoration: underline; }
.post-summary { font-family: var(--font-serif); font-size: var(--text-lg); }
.post-meta { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 12px; margin-top: auto; padding-top: 20px; border-top: var(--rule) solid var(--border); color: var(--text-muted); font-size: var(--text-xs); font-family: var(--font-mono); }
.callout { margin: 28px 0; padding: 24px 28px; border-left: 3px solid var(--accent); border-radius: 0 var(--radius-lg) var(--radius-lg) 0; background: var(--bg-panel); color: var(--text); }
.callout > :last-child { margin-bottom: 0; }
.callout-title { display: block; margin-bottom: 8px; font-weight: var(--weight-bold); }
.callout-warning { border-left-style: double; border-left-width: 6px; }
.callout-error { border-left-width: 6px; }
.table-scroll { max-width: 100%; min-width: 0; overflow-x: auto; -webkit-overflow-scrolling: touch; }
.data-table { width: 100%; border-collapse: collapse; text-align: left; font-size: var(--text-sm); }
.data-table th, .data-table td, .prose table th, .prose table td, .article-body table th, .article-body table td {
  min-width: 7em;
  padding: 16px 20px;
  border-bottom: var(--rule) solid var(--border);
  vertical-align: top;
  overflow-wrap: normal;
  word-break: normal;
}
.data-table th, .prose table th, .article-body table th { background: var(--bg-panel); color: var(--text); font-weight: var(--weight-semibold); }
.prose table, .article-body table {
  display: block;
  max-width: 100%;
  min-width: 0;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  border-collapse: collapse;
  text-align: left;
}
.prose table code, .article-body table code, .data-table code { overflow-wrap: anywhere; }
.dl-fab {
  position: fixed;
  right: max(20px, env(safe-area-inset-right));
  bottom: max(20px, env(safe-area-inset-bottom));
  z-index: var(--z-fab);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  min-height: 56px;
  max-width: calc(100vw - 40px);
  padding: 14px 20px;
  border: var(--rule) solid var(--ink-line);
  border-radius: var(--radius-pill);
  background: var(--accent);
  color: var(--bg);
  font-size: var(--text-sm);
  font-weight: var(--weight-semibold);
  text-decoration: none;
}
.dl-fab svg { width: 20px; height: 20px; flex-shrink: 0; }
.dl-fab:hover { background: var(--accent-dark); color: var(--bg); }
.has-article-fab .site-footer { padding-bottom: 100px; }
.article-download { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 24px; margin-top: 48px; padding: 32px; border-radius: var(--radius-xl); background: var(--bg-panel); color: var(--text); }
.article-download h2 { font-size: var(--title-h3); margin-top: 0; }
.article-download p { margin-bottom: 0; }

/* 装置的拼贴只在家谱画板中使用，不作交互强调色。 */
.cl { position: absolute; z-index: 2; aspect-ratio: 1; background-color: var(--c); color: var(--bg-panel2); }
.k-ochre { --c: var(--collage-ochre); }
.k-sage { --c: var(--collage-sage); }
.k-dust { --c: var(--collage-dust); }
.k-clay { --c: var(--collage-clay); }
.k2-ochre { --c2: var(--collage-ochre); }
.k2-sage { --c2: var(--collage-sage); }
.k2-dust { --c2: var(--collage-dust); }
.k2-clay { --c2: var(--collage-clay); }
.m-halftone { background-image: radial-gradient(circle, var(--collage-ink) 0 1.2px, var(--clear) 1.7px); background-size: 6px 6px; }
.m-halftone-split { background-image: radial-gradient(circle, var(--collage-ink) 0 1.1px, var(--clear) 1.6px), linear-gradient(var(--c) 0 56%, var(--c2) 56%); background-size: 5px 5px, 100% 100%; }
.m-stripe { background-image: repeating-linear-gradient(0deg, var(--clear) 0 6px, var(--collage-ink) 6px 7px); }
.m-stripe-v { background-image: repeating-linear-gradient(90deg, var(--clear) 0 5px, var(--collage-ink-soft) 5px 9px), linear-gradient(90deg, var(--c) 0 62%, var(--c2) 62%); }
.m-grid { background-image: linear-gradient(var(--collage-ink-soft) 1px, var(--clear) 1px), linear-gradient(90deg, var(--collage-ink-soft) 1px, var(--clear) 1px); background-size: 8px 8px; }
.m-torn { background-image: linear-gradient(131deg, var(--clear) 0 47.2%, var(--ink-label) 47.2% 48.4%, var(--clear) 48.4%), linear-gradient(126deg, var(--c) 0 46%, var(--ink-label) 46% 49.5%, var(--c2) 49.5%); }
.m-dots { background-image: radial-gradient(circle, var(--c2) 0 2.6px, var(--clear) 3.1px); background-size: 11px 11px; background-position: 2px 2px; }
.m-cat { display: grid; place-items: end center; overflow: hidden; }
.m-cat svg { width: 86%; height: 86%; display: block; }
.m-cat .cat-cut { fill: var(--bg-panel2); }
.sq-r1 { left: 25.79%; top: 4.05%; width: 7.89%; }
.sq-r2 { left: 65.79%; top: 6.49%; width: 7.37%; }
.sq-c1 { left: 52.63%; top: 30.54%; width: 7.63%; }
.sq-p1 { left: 5.26%; top: 27.84%; width: 8.42%; }
.sq-p2 { left: 30.53%; top: 37.84%; width: 7.63%; }
.sq-m1 { left: 87.89%; top: 25.68%; width: 8.42%; }
.sq-m2 { left: 65.79%; top: 38.38%; width: 7.89%; }
.sq-d1 { left: 27.89%; top: 52.97%; width: 8.16%; }
.sq-d2 { left: 5.79%; top: 65.95%; width: 7.89%; }
.sq-d3 { left: 11.84%; top: 64.32%; width: 7.37%; }
.sq-t1 { left: 40.26%; top: 63.51%; width: 7.37%; }
.sq-x1 { left: 61.58%; top: 52.97%; width: 7.89%; }
.sq-x2 { left: 87.37%; top: 63.24%; width: 8.68%; }
.sq-g1 { left: 5.26%; top: 87.30%; width: 8.16%; }
.sq-g2 { left: 26.84%; top: 87.84%; width: 7.89%; }
.sq-g3 { left: 32.37%; top: 90.81%; width: 7.37%; }
.sq-u1 { left: 85.53%; top: 76.49%; width: 8.42%; }
.sq-u2 { left: 67.37%; top: 87.30%; width: 7.89%; }

/* 预览页专用展示家具；色值仍全部来自全站令牌。 */
.symbol-bank { position: absolute; width: 0; height: 0; overflow: hidden; }
.swatch-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 190px), 1fr)); gap: 16px; }
.swatch { margin: 0; border: var(--rule) solid var(--border); border-radius: var(--radius-btn); overflow: hidden; }
.swatch-color { display: block; height: 76px; background: var(--swatch); color: var(--text); }
.swatch figcaption { padding: 12px; font-family: var(--font-mono); font-size: var(--text-xs); overflow-wrap: anywhere; background: var(--bg); color: var(--text); }
.sw-bg { --swatch: var(--bg); }
.sw-panel { --swatch: var(--bg-panel); }
.sw-panel2 { --swatch: var(--bg-panel2); }
.sw-border { --swatch: var(--border); }
.sw-accent { --swatch: var(--accent); }
.sw-accent-dark { --swatch: var(--accent-dark); }
.sw-text { --swatch: var(--text); }
.sw-muted { --swatch: var(--text-muted); }
.sw-success { --swatch: var(--success); }
.sw-warn { --swatch: var(--warn); }
.sw-error { --swatch: var(--error); }
.sw-ochre { --swatch: var(--collage-ochre); }
.sw-sage { --swatch: var(--collage-sage); }
.sw-dust { --swatch: var(--collage-dust); }
.sw-clay { --swatch: var(--collage-clay); }
.sw-cink { --swatch: var(--collage-ink); }
.sw-cink-soft { --swatch: var(--collage-ink-soft); }
.sw-line { --swatch: var(--ink-line); }
.sw-root { --swatch: var(--ink-root); }
.sw-label { --swatch: var(--ink-label); }
.sw-value { --swatch: var(--ink-value); }
.sw-note { --swatch: var(--ink-note); }
.sw-clear { --swatch: var(--clear); }
.sw-veil { --swatch: var(--veil); }
.type-display { font-family: var(--font-display); font-weight: var(--weight-display); font-size: var(--title-h1); line-height: 1.2; }
.preview-rule { border-top: var(--rule) solid var(--border); }

@media (max-width: 860px) {
  .index-grid { grid-template-columns: minmax(0, 1fr); gap: 32px; margin-top: 32px; }
  .index-aside { position: static; }
  .document-grid { grid-template-columns: minmax(0, 1fr); gap: 32px; }
  .toc { position: static; }
  .article-download { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 640px) {
  .index { padding-bottom: 56px; }
  .index-head { flex-wrap: wrap; gap: 8px; }
  .index-trigger { gap: 12px; padding-left: 16px; }
  .spec-card { margin-left: 0; padding: 24px; }
  .spec-rows > div { grid-template-columns: minmax(0, 1fr); gap: 6px; }
  .client-card, .post-card { padding: 24px; }
  .client-meta > div { grid-template-columns: minmax(0, 1fr); gap: 6px; }
  .callout { padding: 20px; }
  .article-download { padding: 24px; }
  .type-display { font-size: clamp(24px, 6vw, 30px); }
}