/* ==========================================================================
   components.css · 按钮 / 卡片 / 标签 / 引用 / 编号 / 占位 / 提示块 / 表格
                     / 六维放射 / 世界板块图 / 价值链 / 五级递进 / 条目列表
                     / 分类标签页 / 屏间进度指示
   只引用 tokens.css 变量。
   ========================================================================== */

/* ==========================================================================
   1. 按钮
   ========================================================================== */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  min-height: 48px;
  min-width: 132px;
  padding-inline: var(--space-5);
  border-radius: var(--radius-1);
  font-size: var(--fs-sm);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--ls-wide);
  text-align: center;
  transition: background-color var(--dur-fast) var(--ease-state),
              border-color var(--dur-fast) var(--ease-state),
              color var(--dur-fast) var(--ease-state);
}

.btn--primary {
  background: var(--color-accent);
  border: 1px solid var(--color-accent);
  color: var(--color-ink-inverse);
}

.btn--primary:hover { background: var(--color-btn-hover); border-color: var(--color-btn-hover); }

.btn--primary:active {
  background: var(--color-btn-active);
  border-color: var(--color-btn-active);
  transform: translateY(1px);
}

.btn--primary:focus-visible { outline: 2px solid var(--color-ink); outline-offset: 2px; }

.btn--ghost {
  background: transparent;
  border: 1px solid var(--color-line-control);
  color: var(--color-ink);
}

.btn--ghost:hover {
  background: var(--color-accent-tint);
  border-color: var(--color-accent);
  color: var(--color-accent-ink);
}

.btn--ghost:active { background: var(--color-ghost-active); }

.btn--ghost.on-dark {
  color: var(--color-ink-inverse);
  border-color: var(--color-ghost-border-dark);
}

.btn--ghost.on-dark:hover {
  background: var(--color-ghost-bg-dark);
  color: var(--color-ink-inverse);
  border-color: var(--color-ink-inverse);
}

@media (min-width: 1200px) {
  .btn { min-height: 52px; padding-inline: var(--space-6); }
}

@media (max-width: 480px) {
  .btn { width: 100%; }
}

/* 文字链接按钮（深入阅读 / 页脚链接） */
.btn--text {
  position: relative;
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding-block: var(--space-2);
  font-size: var(--fs-sm);
  font-weight: var(--fw-medium);
  color: var(--color-accent-ink);
  text-decoration: underline;
  text-underline-offset: 4px;
  text-decoration-thickness: 1px;
  text-decoration-color: var(--color-line-strong);
  transition: color var(--dur-fast) var(--ease-state),
              text-decoration-color var(--dur-fast) var(--ease-state);
}

.btn--text__icon {
  margin-left: var(--space-1);
  transition: transform var(--dur-fast) var(--ease-state);
}

.btn--text:hover {
  color: var(--color-accent);
  text-decoration-color: var(--color-accent);
}

.btn--text:hover .btn--text__icon { transform: translateX(3px); }

/* 深底上的强调文字统一用 glow，不用 accent-soft：
   accent-soft(#9DBE6E) 压在首屏实拍的 #414E48 上只有 4.16:1（79.8% 像素不达 4.5）；
   glow(#C6D64F) 同一底色 5.45:1。首屏遮罩加强后实测（1440，字形像素差分）：
   同一条链接 改前 accent-soft 4.07:1 → 改后 glow 8.39:1。 */
.btn--text.on-dark {
  color: var(--color-glow);
  text-decoration-color: var(--color-line-inverse-mid);
}

.btn--text.on-dark:hover { color: var(--color-ink-inverse); }

.btn-row {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  margin-top: var(--space-6);
}

@media (min-width: 768px) {
  .btn-row { flex-direction: row; align-items: center; gap: var(--space-4); }
  .btn { width: auto; }
}

/* ==========================================================================
   2. 卡片
   ========================================================================== */
.card {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  padding: var(--space-4);
  background: var(--color-surface);
  border: 1px solid var(--color-line);
  border-radius: var(--radius-1);
  color: var(--color-ink);
  transition: border-color var(--dur-fast) var(--ease-state),
              background-color var(--dur-fast) var(--ease-state),
              transform var(--dur-fast) var(--ease-state);
}

.card__title {
  font-family: var(--font-display);
  font-size: var(--fs-h4);
  line-height: var(--lh-h4);
  font-weight: var(--fw-semibold);
  color: var(--color-ink);
  letter-spacing: var(--ls-tight);
}

.card__desc {
  font-size: var(--fs-sm);
  line-height: var(--lh-sm);
  color: var(--color-ink-2);
  max-width: none;
}

.card__line {
  font-size: var(--fs-caption);
  line-height: var(--lh-caption);
  color: var(--color-ink-3);
  letter-spacing: var(--ls-normal);
  max-width: none;
}

.card__go {
  margin-top: auto;
  font-size: var(--fs-sm);
  color: var(--color-accent-ink);
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
}

/* 可点击卡（整卡一个 Tab 停留点） */
a.card { text-decoration: none; }

a.card:hover {
  border-color: var(--color-card-border-hover);
  background: var(--color-surface-hover);
}

a.card:hover .card__title { color: var(--color-accent-ink); }

a.card:focus-visible {
  outline: 2px solid var(--color-focus);
  outline-offset: 2px;
}

a.card:active { transform: translateY(1px); }

/* 编号卡 */
.card--numbered { gap: var(--space-4); padding: var(--space-5); }

.card__num {
  display: inline-flex;
  align-items: center;
  gap: var(--space-3);
  font-family: var(--font-num);
  font-size: var(--fs-num);
  font-weight: var(--fw-medium);
  line-height: 1;
  letter-spacing: var(--ls-normal);
  color: var(--color-accent);
  font-variant-numeric: lining-nums tabular-nums;
  opacity: 0.9;
}

.card__num::after {
  content: "";
  width: var(--space-5);
  height: 1px;
  background: var(--color-line-strong);
}

/* 带图标的短语卡（屏 07 / 屏 09） */
.card--icon {
  flex-direction: row;
  align-items: flex-start;
  gap: var(--space-4);
  min-height: 72px;
}

.card--icon .card__icon {
  color: var(--color-ink-2);
  margin-top: 2px;
}

.card--tech .card__icon { color: var(--color-tech); }

.card--tech .card__title { font-size: var(--fs-h4); }

.card--tech:hover .card__icon { color: var(--color-tech); }

.card__pair {
  font-size: var(--fs-caption);
  letter-spacing: var(--ls-normal);
  color: var(--color-tech);
  font-weight: var(--fw-medium);
  max-width: none;
}

/* 占位卡（结构占位：一眼看出「结构已定、内容未到」） */
.card--placeholder {
  gap: var(--space-3);
  padding: var(--space-4);
  background: var(--color-surface-sunken);
  border: 1px dashed var(--color-dash);
  text-decoration: none;
}

.card--placeholder .card__title {
  font-size: var(--fs-h4);
  font-weight: var(--fw-medium);
  color: var(--color-ink-3);
}

.card--placeholder .card__desc { color: var(--color-ink-3); }

.card--placeholder:hover {
  border-color: var(--color-accent);
  background: var(--color-surface-sunken);
}

.card--placeholder:hover .card__title { color: var(--color-ink-3); }

.chip--state {
  align-self: flex-start;
  padding: var(--space-1) var(--space-2);
  background: var(--color-chip-sunken);
  color: var(--color-ink-3);
  border-radius: var(--radius-chip);
  font-size: var(--fs-caption);
  letter-spacing: var(--ls-normal);
  order: -1;
}

/* 书脊式文件卡（屏 12 / standard.html） */
.card--doc {
  flex-direction: row;
  align-items: flex-start;
  gap: var(--space-4);
  padding: var(--space-5);
}

.card--doc .card__spine {
  flex: none;
  width: 6px;
  align-self: stretch;
  min-height: 64px;
  background: var(--color-accent);
}

.card--doc .card__body {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

/* 文件卡的状态标签落在正文末尾（不参与占位卡的「角标提前」规则） */
.card--doc .chip--state { order: 0; }

/* 行动单元卡（屏 13） */
.card--action { min-height: 96px; gap: var(--space-2); }

.card--action .card__title { font-size: var(--fs-h4); }

.card--action .card__desc { font-size: var(--fs-caption); }

@media (min-width: 768px) {
  .card { padding: var(--space-5); min-height: 160px; }
  .card--icon { min-height: 96px; }
}

@media (min-width: 1200px) {
  .card--numbered { min-height: 200px; }
  .card--action { min-height: 220px; }
}

/* 手机端：六问卡只留问句，卡高压缩（site-spec §8.1 步 1 削减要求） */
@media (max-width: 767px) {
  .card--compact { min-height: 0; padding: var(--space-4); gap: var(--space-2); }
  .card--compact .card__desc { display: none; }
  .card--compact .card__num {
    font-size: var(--fs-caption);
    gap: var(--space-2);
  }
  .card--compact .card__num::after { width: var(--space-4); }
  .card--compact .card__title { font-size: var(--fs-sm); line-height: var(--lh-sm); }
}

/* ==========================================================================
   3. 标签 chip
   ========================================================================== */
.chip {
  display: inline-flex;
  align-items: center;
  min-height: 32px;
  padding: var(--space-2) var(--space-3);
  background: transparent;
  border: 1px solid var(--color-line-strong);
  border-radius: var(--radius-chip);
  font-size: var(--fs-sm);
  color: var(--color-ink-2);
  letter-spacing: var(--ls-normal);
  transition: background-color var(--dur-fast) var(--ease-state),
              border-color var(--dur-fast) var(--ease-state),
              color var(--dur-fast) var(--ease-state);
}

a.chip:hover,
.chip:hover {
  border-color: var(--color-accent);
  background: var(--color-accent-tint);
  color: var(--color-accent-ink);
}

.chip.is-active {
  background: var(--color-accent);
  border-color: var(--color-accent);
  color: var(--color-ink-inverse);
  box-shadow: inset 2px 0 0 var(--color-accent-ink);
}

.chip-row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
}

.chip-row--tight { gap: var(--space-2); }

@media (min-width: 768px) {
  .chip { min-height: 36px; padding: var(--space-2) var(--space-4); }
  .chip-row { gap: var(--space-3); }
}

/* ==========================================================================
   4. 引用块
   ========================================================================== */
.quote--display {
  position: relative;
  padding-block: var(--space-6);
  padding-left: var(--space-5);
  margin-block: var(--space-7);
  max-width: 820px;
  font-family: var(--font-display);
  font-size: var(--fs-quote);
  line-height: var(--lh-quote);
  font-weight: var(--fw-medium);
  color: var(--color-ink);
  letter-spacing: var(--ls-normal);
}

.quote--display::before {
  content: "";
  position: absolute;
  left: 0;
  top: calc(var(--space-6) + 6px);
  width: 4px;
  height: var(--space-7);
  background: var(--color-accent);
}

.quote--display--center {
  margin-inline: auto;
  text-align: left;
}

.quote--display p { max-width: none; }

.quote {
  padding: var(--space-4);
  background: var(--color-paper-deep);
  border-left: 3px solid var(--color-line-strong);
  border-radius: 0 var(--radius-1) var(--radius-1) 0;
  font-size: var(--fs-body);
  line-height: 1.9;
  color: var(--color-ink-2);
}

.quote p { max-width: none; }

.quote__source {
  display: block;
  margin-top: var(--space-3);
  font-size: var(--fs-caption);
  color: var(--color-ink-3);
  letter-spacing: var(--ls-normal);
}

.section--alt .quote { background: var(--color-paper); }

/* 竖排引言（屏 05 左栏，<768 取消竖排） */
.quote--vertical {
  font-family: var(--font-display);
  font-size: 20px;
  line-height: 1.8;
  font-weight: var(--fw-medium);
  color: var(--color-ink);
  letter-spacing: var(--ls-vertical);
  border-left: 3px solid var(--color-accent);
  padding-left: var(--space-4);
  max-width: none;
}

@media (min-width: 768px) {
  .quote--vertical {
    writing-mode: vertical-rl;
    text-orientation: upright;
    border-left: 0;
    border-right: 1px solid var(--color-line);
    padding-left: 0;
    padding-right: var(--space-5);
    height: 420px;
    max-height: 420px;
    margin-inline: auto;
  }
}

/* ==========================================================================
   5. 纵向条目列表（屏 11 研究 9 项 / 栏目页列表型内容）
   ========================================================================== */
.req-list { border-top: 1px solid var(--color-line); }

.req-item {
  display: grid;
  grid-template-columns: 3rem 1fr;
  gap: var(--space-3);
  align-items: baseline;
  padding-block: var(--space-4);
  border-bottom: 1px solid var(--color-line);
}

.req-item__num {
  font-family: var(--font-num);
  font-size: var(--fs-caption);
  font-weight: var(--fw-medium);
  letter-spacing: var(--ls-normal);
  color: var(--color-accent);
  font-variant-numeric: lining-nums tabular-nums;
}

.req-item__title {
  font-family: var(--font-display);
  font-size: var(--fs-h4);
  font-weight: var(--fw-semibold);
  color: var(--color-ink);
  line-height: var(--lh-h4);
}

.req-item__desc {
  grid-column: 2;
  margin-top: var(--space-1);
  font-size: var(--fs-sm);
  line-height: var(--lh-sm);
  color: var(--color-ink-2);
  max-width: 60em;
}

@media (min-width: 1200px) {
  .req-item {
    grid-template-columns: 4.5rem 1fr;
    align-items: center;
    padding-block: var(--space-4);
    min-height: 72px;
  }

  .req-item__num { font-size: var(--fs-num-sm); }

  .req-item__desc { grid-column: 2; margin-top: 0; }
}

/* ==========================================================================
   6. 提示块 notice
   ========================================================================== */
.notice {
  display: grid;
  grid-template-columns: 20px 1fr;
  gap: var(--space-3);
  align-items: start;
  padding: var(--space-4);
  border-left: 3px solid;
  border-radius: 0 var(--radius-1) var(--radius-1) 0;
  margin-block: var(--space-6);
  font-size: var(--fs-sm);
  line-height: 1.78;
}

.notice p { max-width: none; }
.notice p + p { margin-top: var(--space-2); }

.notice__icon { margin-top: 3px; }

.notice--info {
  border-color: var(--color-info);
  background: var(--color-info-bg);
  color: var(--color-info);
}

.notice--warning {
  border-color: var(--color-warning);
  background: var(--color-warning-bg);
  color: var(--color-warning);
}

@media (min-width: 768px) {
  .notice { padding: var(--space-5); }
}

/* ==========================================================================
   7. 表格（案例库七段字段清单 / 国别方向对照）
   ========================================================================== */
.table-wrap {
  width: 100%;
  overflow-x: auto;
  border: 1px solid var(--color-line);
  border-radius: var(--radius-1);
  background: var(--color-surface);
}

.table {
  width: 100%;
  min-width: 32rem;
  font-size: var(--fs-sm);
  color: var(--color-ink-2);
}

.table th,
.table td {
  padding: var(--space-3) var(--space-4);
  text-align: left;
  vertical-align: top;
  border-bottom: 1px solid var(--color-line);
}

.table thead th {
  background: var(--color-surface-sunken);
  font-size: var(--fs-caption);
  font-weight: var(--fw-medium);
  letter-spacing: var(--ls-wide);
  color: var(--color-ink);
  border-bottom: 1px solid var(--color-line-strong);
}

.table tbody th {
  color: var(--color-ink);
  font-weight: var(--fw-medium);
  width: 30%;
}

.table tbody tr:last-child th,
.table tbody tr:last-child td { border-bottom: 0; }

.table tbody tr:hover { background: var(--color-row-hover); }

@media (max-width: 767px) {
  .table-wrap { overflow-x: visible; border: 0; background: none; }

  .table { min-width: 0; display: block; }

  .table thead {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
  }

  .table tbody,
  .table tr,
  .table th,
  .table td { display: block; width: auto; }

  .table tr {
    padding-block: var(--space-4);
    border-bottom: 1px solid var(--color-line);
  }

  .table tbody th {
    padding: 0 0 var(--space-2);
    font-size: var(--fs-caption);
    color: var(--color-ink-3);
  }

  .table td { padding: 0; }

  .table td + td { margin-top: var(--space-2); }

  .table tbody tr:hover { background: transparent; }
}

/* ==========================================================================
   8. 屏 03 六维放射（移动优先：列表态）
   ========================================================================== */
.hex { position: relative; }

.hex__stage {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  width: 100%;
}

.hex__core {
  display: flex;
  align-items: center;
  height: 56px;
  padding-inline: var(--space-5);
  background: var(--color-soil);
  color: var(--color-ink-inverse);
  font-family: var(--font-display);
  font-size: 18px;
  font-weight: var(--fw-semibold);
  letter-spacing: var(--ls-wide);
}

.hex__node {
  display: block;
  width: 100%;
  padding: var(--space-4) var(--space-5);
  text-align: left;
  background: var(--color-surface);
  border: 1px solid var(--color-line);
  border-radius: var(--radius-1);
  transition: background-color var(--dur-fast) var(--ease-state),
              border-color var(--dur-fast) var(--ease-state);
}

.hex__name {
  display: block;
  font-family: var(--font-display);
  font-size: var(--fs-h4);
  font-weight: var(--fw-semibold);
  color: var(--color-ink);
  letter-spacing: var(--ls-normal);
}

.hex__q {
  display: block;
  margin-top: var(--space-2);
  font-size: var(--fs-sm);
  line-height: var(--lh-sm);
  color: var(--color-ink-2);
  /* <768：默认收起，点击展开。
     改前这里是常态可见，于是 <button aria-expanded> 声明了一个并不存在的展开动作，
     触摸用户点了零反馈、读屏还会念「已折叠」而内容其实摊在外面。
     用 max-height 而非 display，因为 ≥768 那段把 .hex__q 改成绝对定位浮层并接管
     max-height（0 → 240px），display 一旦设成 none 会让桌面浮层永远出不来。 */
  max-height: 0;
  overflow: hidden;
  transition: max-height var(--dur-base) var(--ease-out);
}

.hex__node[aria-expanded="true"] .hex__q { max-height: 12em; }

.hex__node[aria-expanded="true"] {
  background: var(--color-accent-tint);
  border-color: var(--color-accent);
}

.hex__hint {
  margin-top: var(--space-4);
  font-size: var(--fs-caption);
  color: var(--color-ink-3);
  max-width: 40em;
}

@media (min-width: 768px) {
  .hex__stage {
    position: relative;
    display: block;
    width: 660px;
    height: 620px;
    margin-inline: auto;
  }

  /* 6 条中央圆→节点的连线：重复锥形渐变出 60° 等分的细线，
     再用径向遮罩切掉中央圆内部与节点圆内部，不需要额外 DOM。
     可见段 = 中央圆边缘(88) → 节点圆内缘(210−66)。
     连线是「六维环绕」的结构表达，属 WCAG 1.4.11 的图形对象，要 3:1：
     原 #D2D8C2(＝--color-n200) 压在纸底上只有 1.30:1，改用 --color-line-control
     得 3.39:1。同时把 opacity 从 0.9 提到 1——0.9 会把实色合成成 #948D80，
     对纸底只剩 2.93:1，新色就白换了。 */
  .hex__stage::before {
    content: "";
    position: absolute;
    inset: 0;
    --r-core: 88px;
    --r-node: 144px;
    background: repeating-conic-gradient(from -0.1deg,
      var(--color-line-control) 0 0.2deg, transparent 0.2deg 60deg);
    -webkit-mask: radial-gradient(circle at 50% 50%,
      transparent 0 var(--r-core),
      var(--color-ink) var(--r-core) var(--r-node),
      transparent var(--r-node));
    mask: radial-gradient(circle at 50% 50%,
      transparent 0 var(--r-core),
      var(--color-ink) var(--r-core) var(--r-node),
      transparent var(--r-node));
    opacity: 1;
    pointer-events: none;
  }

  .hex__core {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    width: 176px;
    height: 176px;
    border-radius: var(--radius-round);
    background: var(--color-paper);
    border: 1px solid var(--color-accent);
    color: var(--color-ink);
    justify-content: center;
    padding-inline: 0;
    text-align: center;
    font-size: var(--fs-h4);
    letter-spacing: var(--ls-wide);
  }

  .hex__node {
    position: absolute;
    left: 50%;
    top: 50%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 132px;
    height: 132px;
    padding: var(--space-2);
    border-radius: var(--radius-round);
    border-color: var(--color-line-control);
    background: var(--color-paper);
    text-align: center;
  }

  .hex__name {
    font-size: var(--fs-sm);
    line-height: 1.35;
    text-align: center;
  }

  /* rotate(θ) translateY(-R) rotate(-θ)：反向旋转保证节点文字不跟着转 */
  .hex__node:nth-child(2) { transform: translate(-50%,-50%) rotate(0deg) translateY(-210px) rotate(0deg); }
  .hex__node:nth-child(3) { transform: translate(-50%,-50%) rotate(60deg) translateY(-210px) rotate(-60deg); }
  .hex__node:nth-child(4) { transform: translate(-50%,-50%) rotate(120deg) translateY(-210px) rotate(-120deg); }
  .hex__node:nth-child(5) { transform: translate(-50%,-50%) rotate(180deg) translateY(-210px) rotate(-180deg); }
  .hex__node:nth-child(6) { transform: translate(-50%,-50%) rotate(240deg) translateY(-210px) rotate(-240deg); }
  .hex__node:nth-child(7) { transform: translate(-50%,-50%) rotate(300deg) translateY(-210px) rotate(-300deg); }

  .hex__q {
    position: absolute;
    left: 50%;
    width: 240px;
    margin-top: 0;
    padding: var(--space-3) var(--space-4);
    transform: translateX(-50%);
    background: var(--color-surface);
    border: 1px solid var(--color-line-strong);
    border-radius: var(--radius-1);
    box-shadow: var(--shadow-float);
    opacity: 0;
    visibility: hidden;
    max-height: 0;
    overflow: hidden;
    transition: opacity var(--dur-fast) var(--ease-out),
                max-height var(--dur-base) var(--ease-out),
                visibility var(--dur-base) var(--ease-out);
    z-index: var(--z-sticky);
  }

  /* 上半圈节点（土地 / 水资源 / 文明）：问题向下展开 */
  .hex__node:nth-child(2) .hex__q,
  .hex__node:nth-child(3) .hex__q,
  .hex__node:nth-child(7) .hex__q {
    top: calc(100% + var(--space-4));
  }

  /* 下半圈节点（生态 / 产业 / 经济）：问题向上展开 */
  .hex__node:nth-child(4) .hex__q,
  .hex__node:nth-child(5) .hex__q,
  .hex__node:nth-child(6) .hex__q {
    bottom: calc(100% + var(--space-4));
  }

  .hex__node:hover .hex__q,
  .hex__node:focus-visible .hex__q,
  .hex__node[aria-expanded="true"] .hex__q {
    opacity: 1;
    visibility: visible;
    max-height: 240px;
  }

  .hex__node:hover,
  .hex__node[aria-expanded="true"] {
    background: var(--color-accent-tint);
    border-color: var(--color-accent);
  }

  .hex__node:hover .hex__name,
  .hex__node[aria-expanded="true"] .hex__name { color: var(--color-accent-ink); }

  .hex__node:focus-visible { outline-offset: 3px; }

  .hex__hint { text-align: center; margin-inline: auto; }
}

@media (min-width: 1200px) {
  .hex__stage { width: 860px; height: 720px; }

  .hex__stage::before { --r-node: 202px; }

  .hex__core { width: 176px; height: 176px; font-size: var(--fs-h3); }

  .hex__node { width: 132px; height: 132px; }

  .hex__node:nth-child(2) { transform: translate(-50%,-50%) rotate(0deg) translateY(-268px) rotate(0deg); }
  .hex__node:nth-child(3) { transform: translate(-50%,-50%) rotate(60deg) translateY(-268px) rotate(-60deg); }
  .hex__node:nth-child(4) { transform: translate(-50%,-50%) rotate(120deg) translateY(-268px) rotate(-120deg); }
  .hex__node:nth-child(5) { transform: translate(-50%,-50%) rotate(180deg) translateY(-268px) rotate(-180deg); }
  .hex__node:nth-child(6) { transform: translate(-50%,-50%) rotate(240deg) translateY(-268px) rotate(-240deg); }
  .hex__node:nth-child(7) { transform: translate(-50%,-50%) rotate(300deg) translateY(-268px) rotate(-300deg); }
}

/* ==========================================================================
   9. 屏 06 世界海岸线地图（移动优先：9 行列表）
   ========================================================================== */
.map { position: relative; }

.map__stage { display: none; }

.map__list {
  display: grid;
  gap: 0;
  border-top: 1px solid var(--color-line);
}

.map__row {
  display: grid;
  grid-template-columns: 20px 1fr;
  gap: var(--space-3);
  align-items: start;
  padding-block: var(--space-4);
  border-bottom: 1px solid var(--color-line);
  min-height: 64px;
}

.map__row::before {
  content: "";
  width: 6px;
  height: 6px;
  margin-top: 9px;
  border-radius: var(--radius-round);
  background: var(--color-accent);
}

.map__row-name {
  font-family: var(--font-display);
  font-size: var(--fs-h4);
  font-weight: var(--fw-semibold);
  color: var(--color-ink);
  line-height: var(--lh-h4);
}

.map__row-note {
  grid-column: 2;
  margin-top: var(--space-1);
  font-size: var(--fs-sm);
  color: var(--color-ink-3);
  line-height: var(--lh-sm);
  max-width: none;
}

.map__note {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  margin-top: var(--space-5);
  font-size: var(--fs-caption);
  color: var(--color-ink-3);
  letter-spacing: var(--ls-normal);
}

.map__note::before {
  content: "";
  flex: 1;
  height: 1px;
  background: var(--color-line);
}

.map__note span { flex: none; }

.map__note--inset { margin-top: var(--space-5); }

@media (min-width: 768px) {
  .map__stage {
    display: block;
    position: relative;
    width: 100%;
    max-width: 1000px;
    /* 与 images/world-map.svg 的 viewBox 严格同比（1000 x 394）。
       这里的 394 和 <img> 上的 width/height 必须是同一个数：
       三处一旦对不上，要么舞台留边、要么图片被拉伸，且会额外产生 CLS。 */
    aspect-ratio: 1000 / 394;
    margin-inline: auto;
  }

  /* 地图配色写不进 CSS：<img> 引用的是独立 SVG 文档，外部样式表进不去。
   SVG 内部自带描边 #8A8274（= --color-line-control，stroke-width 1.1）、无填充。
   无填充是刻意的——源数据几乎没有内环，一填充黑海、里海、五大湖都会变成陆地。 */
  .map__svg {
    display: block;
    width: 100%;
    height: 100%;
    /* 兜底：万一哪天 width/height 与 viewBox 比例失配，宁可留边也不要变形 */
    object-fit: contain;
  }

  /* 九点的 --x / --y 是等距圆柱正算结果，不是美术微调值：
       x% = ((经度 + 26) mod 360) / 3.6      y% = (84 − 纬度) / 1.4184
     式中的 26 是 world-map.svg 的经度接缝（自 26°W 起绕行一周，图幅中心约 154°E）。
     换图 = 换接缝，九个 x 必须全部重算，否则九点会整体漂到海里。 */
  .map__pin {
    position: absolute;
    left: var(--x);
    top: var(--y);
    transform: translate(-50%, -50%);
    display: grid;
    place-items: center;
    width: 44px;
    height: 44px;
    border-radius: var(--radius-round);
    color: var(--color-ink);
  }

  .map__pin::before {
    content: "";
    width: 10px;
    height: 10px;
    border-radius: var(--radius-round);
    background: var(--color-accent);
    box-shadow: 0 0 0 4px var(--color-pin-halo);
    transition: width var(--dur-fast) var(--ease-state),
                height var(--dur-fast) var(--ease-state),
                box-shadow var(--dur-fast) var(--ease-state);
  }

  .map__pin:hover::before,
  .map__pin:focus-visible::before,
  .map__pin[aria-expanded="true"]::before {
    width: 14px;
    height: 14px;
    box-shadow: 0 0 0 8px var(--color-pin-halo-strong);
  }

  .map__pin-label {
    position: absolute;
    top: 50%;
    left: calc(100% + var(--space-1));
    transform: translateY(-50%);
    font-size: var(--fs-caption);
    font-weight: var(--fw-medium);
    letter-spacing: var(--ls-normal);
    color: var(--color-ink);
    white-space: nowrap;
    pointer-events: none;
  }

  .map__pin--left .map__pin-label {
    left: auto;
    right: calc(100% + var(--space-1));
  }

  .map__pop {
    position: absolute;
    top: calc(var(--y) + 26px);
    left: clamp(var(--space-2), var(--x), calc(100% - 288px));
    width: 280px;
    padding: var(--space-3) var(--space-4);
    background: var(--color-surface);
    border: 1px solid var(--color-line-strong);
    border-radius: var(--radius-1);
    box-shadow: var(--shadow-float);
    font-size: var(--fs-sm);
    line-height: var(--lh-sm);
    color: var(--color-ink-2);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity var(--dur-fast) var(--ease-out),
                visibility var(--dur-fast) var(--ease-out);
    z-index: var(--z-sticky);
  }

  .map__pop--above {
    top: auto;
    bottom: calc(100% - var(--y) + 26px);
  }

  .map__pop-title {
    display: block;
    font-family: var(--font-display);
    font-size: 18px;
    font-weight: var(--fw-semibold);
    color: var(--color-ink);
    margin-bottom: var(--space-2);
  }

  .map__pin:hover + .map__pop,
  .map__pin:focus-visible + .map__pop,
  .map__pin[aria-expanded="true"] + .map__pop {
    opacity: 1;
    visibility: visible;
  }

  .map__list {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
    border: 0;
  }
}

/* ==========================================================================
   10. 屏 08 / industry 价值链（移动优先：纵向时间轴）
   ========================================================================== */
.chain {
  position: relative;
  display: block;
  padding-left: 36px;
  --dot-halo: var(--color-paper);
}

.chain::before {
  content: "";
  position: absolute;
  left: 20px;
  top: var(--space-2);
  bottom: var(--space-2);
  width: 1px;
  background: var(--color-line-control);
}

.chain__step {
  position: relative;
  padding-block: var(--space-3);
  background: transparent;
  border: 0;
}

.chain__step::before {
  content: "";
  position: absolute;
  left: -20px;
  top: 22px;
  width: 10px;
  height: 10px;
  border-radius: var(--radius-round);
  background: var(--color-accent);
  box-shadow: 0 0 0 4px var(--dot-halo);
}

.chain__num {
  display: block;
  font-family: var(--font-num);
  font-size: var(--fs-caption);
  font-weight: var(--fw-medium);
  color: var(--color-accent-ink);
  letter-spacing: var(--ls-normal);
  margin-bottom: var(--space-1);
}

.chain__name {
  display: block;
  font-family: var(--font-display);
  font-size: var(--fs-body);
  font-weight: var(--fw-semibold);
  color: var(--color-ink);
}

.chain__desc {
  display: block;
  margin-top: var(--space-1);
  font-size: var(--fs-caption);
  line-height: var(--lh-sm);
  color: var(--color-ink-3);
  max-width: 30em;
}

@media (min-width: 768px) {
  .chain {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    padding-left: 0;
  }

  .chain::before { display: none; }

  .chain__step {
    flex: 0 0 calc((100% - 18px) / 4);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: auto;
    min-height: 92px;
    /* 右侧留白大于左侧：箭头右端是斜切口，等距内边距会把释义切掉 */
    padding: var(--space-2) var(--space-4) var(--space-2) var(--space-3);
    text-align: center;
    background: var(--color-surface);
    clip-path: polygon(0 0, calc(100% - 14px) 0, 100% 50%,
                       calc(100% - 14px) 100%, 0 100%, 14px 50%);
  }

  .chain__step:nth-child(4n+1) {
    clip-path: polygon(0 0, calc(100% - 14px) 0, 100% 50%,
                       calc(100% - 14px) 100%, 0 100%);
  }

  .chain__step:nth-child(5)::after {
    content: "";
    position: absolute;
    left: -14px;
    top: -10px;
    width: 10px;
    height: 10px;
    border-right: 1px solid var(--color-line-control);
    border-bottom: 1px solid var(--color-line-control);
    transform: rotate(45deg);
  }

  .chain__step::before {
    left: auto;
    top: auto;
    position: static;
    width: auto;
    height: auto;
    border-radius: 0;
    background: none;
    box-shadow: none;
  }

  .chain__step:nth-child(even) { background: var(--color-step-alt); }

  .chain__num { margin-bottom: 2px; font-size: var(--fs-num-sm); }

  .chain__name { font-size: var(--fs-sm); }

  .chain__desc {
    flex: 0 0 auto;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    margin-top: var(--space-1);
    font-size: var(--fs-caption);
    line-height: 1.45;
    text-align: center;
    max-width: 100%;
  }

  /* clip-path 会裁掉 outline，焦点态必须用内嵌 box-shadow */
  .chain__step:focus-visible {
    outline: none;
    box-shadow: inset 0 0 0 2px var(--color-focus);
  }
}

@media (min-width: 1200px) {
  .chain__step { flex: 0 0 calc((100% - 42px) / 8); min-width: 132px; }

  /* 8 箭头窄格（约 132px）放不下 13px 释义，只留编号 + 环节名；
     完整释义在 4 列栅格（768–1199 与 industry 的 .chain--wide）里呈现。
     已知取舍：桌面端信息量少于平板端。若要两端一致，需把 8 连排改成
     4+4 两行（即 .chain--wide 的做法），但会削弱「一条链」的视觉，暂不做。 */
  .chain:not(.chain--wide) .chain__desc { display: none; }

  /* 栏目页读文场景：4+4 宽栅格，让 13px 释义两行放得下、不截断 */
  .chain--wide .chain__step { flex: 0 0 calc((100% - 18px) / 4); }

  /* 栏目页读文场景：4+4 宽栅格，让 13px 释义两行放得下、不截断 */
  .chain--wide .chain__step { flex: 0 0 calc((100% - 18px) / 4); }
}

/* ==========================================================================
   11. 五级递进（屏 12 / standard.html）
   ========================================================================== */
.steps {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.steps__item {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-3) var(--space-4);
  background: var(--color-surface);
  border: 1px solid var(--color-line);
  border-radius: var(--radius-1);
  font-size: var(--fs-sm);
  font-weight: var(--fw-medium);
  color: var(--color-ink);
}

.steps__num {
  font-family: var(--font-num);
  font-size: var(--fs-caption);
  color: var(--color-accent);
  letter-spacing: var(--ls-normal);
}

.steps__arrow {
  color: var(--color-line-strong);
  transform: rotate(90deg);
  flex: none;
}

.steps__desc {
  display: block;
  margin-top: var(--space-1);
  font-size: var(--fs-caption);
  font-weight: var(--fw-regular);
  color: var(--color-ink-3);
  line-height: var(--lh-sm);
  max-width: none;
}

@media (min-width: 768px) {
  .steps {
    flex-direction: row;
    align-items: stretch;
    flex-wrap: wrap;
    gap: var(--space-2);
  }

  .steps__item {
    flex: 1 1 0;
    min-width: 0;
    min-height: 56px;
    padding: var(--space-2) var(--space-3);
    font-size: var(--fs-caption);
  }

  .steps__arrow { transform: none; }
}

@media (min-width: 1200px) {
  .steps__item { font-size: var(--fs-sm); padding: var(--space-3) var(--space-4); }
}

/* ==========================================================================
   12. 分类标签页（屏 10 五类实践）
   ========================================================================== */
.tabs__list {
  display: flex;
  flex-wrap: nowrap;
  gap: var(--space-2);
  overflow-x: auto;
  scrollbar-width: none;
  padding-bottom: var(--space-2);
  -webkit-mask-image: linear-gradient(90deg,
    transparent 0, var(--color-ink) var(--space-4),
    var(--color-ink) calc(100% - var(--space-4)), transparent 100%);
  mask-image: linear-gradient(90deg,
    transparent 0, var(--color-ink) var(--space-4),
    var(--color-ink) calc(100% - var(--space-4)), transparent 100%);
}

.tabs__list::-webkit-scrollbar { display: none; }

.tabs__btn {
  flex: none;
  min-height: 44px;
  padding: var(--space-2) var(--space-4);
  background: transparent;
  border: 1px solid var(--color-line-strong);
  border-radius: var(--radius-chip);
  font-size: var(--fs-sm);
  color: var(--color-ink-2);
  transition: background-color var(--dur-fast) var(--ease-state),
              border-color var(--dur-fast) var(--ease-state),
              color var(--dur-fast) var(--ease-state);
}

.tabs__btn:hover {
  border-color: var(--color-accent);
  background: var(--color-accent-tint);
  color: var(--color-accent-ink);
}

.tabs__btn[aria-selected="true"] {
  background: var(--color-accent);
  border-color: var(--color-accent);
  color: var(--color-ink-inverse);
  font-weight: var(--fw-semibold);
  box-shadow: inset 2px 0 0 var(--color-accent-ink);
}

.tabs__panel { margin-top: var(--space-6); }

.tabs__panel > .tabs__note {
  margin-bottom: var(--space-4);
  font-size: var(--fs-sm);
  line-height: var(--lh-sm);
  color: var(--color-ink-2);
  max-width: 60em;
}

@media (min-width: 768px) {
  .tabs__list {
    flex-wrap: wrap;
    overflow-x: visible;
    -webkit-mask-image: none;
    mask-image: none;
  }
}

/* ==========================================================================
   13. 屏间/分区进度指示（首页右侧 14 点；九个栏目页右侧各 5 点 S1–S5）
   ========================================================================== */
.progress {
  display: none;
}

.progress__dot {
  position: relative;
  display: grid;
  place-items: center;
  width: 44px;
  height: 24px;            /* 原 22px，不达 WCAG 2.5.8 的 24×24 下限 */
  color: var(--color-ink-3);
}

/* 命中区外扩到 44px 高。
   为什么不用 height:44px：这是 14 个点纵向紧排的导轨，44×14 会撑到 616px，
   在 800px 高的视口里放不下。故视觉高度取 24px（守 WCAG 下限），
   再用伪元素把可点区域做到 44px（守本站 ≥44px 的触控口径）。
   相邻命中区会重叠 20px，落点仍是最接近的那个点，不产生误跳。
   WCAG 2.5.8 的 24×24 下限满足；站内 44×44 的自定标准在此处不适用
   ——纵向命中区 24–36px 是「14 点塞进 800px 视口」的刻意取舍，不是缺陷。 */
.progress__dot::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: -10px;
  bottom: -10px;
}

.progress__dot::before {
  content: "";
  width: 8px;
  height: 8px;
  border-radius: var(--radius-round);
  background: var(--color-n300);
  box-shadow: 0 0 0 1px var(--color-n500);
  transition: width var(--dur-fast) var(--ease-state),
              height var(--dur-fast) var(--ease-state),
              background-color var(--dur-fast) var(--ease-state);
}

.progress__dot-label {
  position: absolute;
  /* 原 calc(100% + var(--space-2))｜标签右缘恒压进内容列 4px（实测 1101 vs 1105），
     屏 02 会正好落在 03 号卡右上角，看着像卡片里的错字。
     收到 100% 后整体右移 8px，右缘 1109，让开内容列。不动色面、不隐藏信息。 */
  right: 100%;
  top: 50%;
  transform: translateY(-50%);
  font-size: var(--fs-caption);
  letter-spacing: var(--ls-normal);
  color: var(--color-accent-ink);
  white-space: nowrap;
  opacity: 0;
  transition: opacity var(--dur-fast) var(--ease-out);
  pointer-events: none;
}

.progress__dot:hover::before {
  box-shadow: 0 0 0 1px var(--color-accent);
}

.progress__dot:hover .progress__dot-label { opacity: 1; }

.progress__dot.is-active::before {
  width: 10px;
  height: 10px;
  background: var(--color-accent);
  box-shadow: 0 0 0 1px var(--color-accent);
}

.progress__dot.is-active .progress__dot-label { opacity: 1; }

.progress__dot:focus-visible {
  outline: 2px solid var(--color-focus);
  outline-offset: 2px;
  border-radius: var(--radius-round);
}

.progress__dot.is-active:focus-visible .progress__dot-label { opacity: 1; }

/* 反色态：当前屏是深底（屏 01 hero / 屏 14 vision）时，进度点与屏名整体转浅色。
   注意这个变体不能按「压在 soil 纯色底上」算：进度条是 fixed 定位，
   屏 01/14 时它压在照片 + 遮罩上。视觉组实测 accent-soft 屏 14 4.12:1（23.9% 不达）、
   屏 01 3.75:1（33.3%）。切 glow 后本机实测（字形像素差分，取最差）：
   屏 14 3.57 → 4.68:1（不达 4.5 的像素 23.8% → 0%）、
   屏 01 3.43 → 4.50:1（14.1% → 0.2%）。 */
.progress--inverse .progress__dot-label { color: var(--color-glow); }

.progress--inverse .progress__dot::before {
  background-color: var(--color-n500);
  box-shadow: 0 0 0 1px var(--color-n300);
}

.progress--inverse .progress__dot:hover::before {
  box-shadow: 0 0 0 1px var(--color-accent-soft);
}

.progress--inverse .progress__dot.is-active::before {
  background-color: var(--color-accent-soft);
  box-shadow: 0 0 0 1px var(--color-accent-soft);
}

.progress--inverse .progress__dot:focus-visible { outline-color: var(--color-focus-inverse); }

@media (min-width: 1200px) {
  .progress {
    display: flex;
    flex-direction: column;
    /* 2026-10-30 圆点改容器统一 gap 的等距排布（原 --gap 分组 margin 已删）：
       点高 24 + gap 4 = 28px 恒定间距，14 点全轨 388px，800px 高视口放得下。 */
    gap: var(--space-1);
    align-items: center;
    position: fixed;
    right: var(--space-6);
    top: 50%;
    transform: translateY(-50%);
    z-index: var(--z-progress);
  }
}

@media (min-width: 768px) and (max-width: 1199px) {
  .progress-bar { display: block; }
}

@media (max-width: 767px) {
  .progress-bar { display: none; }
}

@media (min-width: 1200px) {
  .progress-bar { display: none; }
}

/* ==========================================================================
   14. 字段清单 / 键值列表（案例库七段、系统覆盖范围等）
   ========================================================================== */
.kv-list {
  display: grid;
  gap: 0;
  border-top: 1px solid var(--color-line);
}

.kv-list__row {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-1);
  padding-block: var(--space-4);
  border-bottom: 1px solid var(--color-line);
}

.kv-list__key {
  font-size: var(--fs-caption);
  font-weight: var(--fw-medium);
  color: var(--color-ink-3);
  letter-spacing: var(--ls-normal);
  max-width: none;
}

.kv-list__val {
  font-size: var(--fs-sm);
  line-height: var(--lh-sm);
  color: var(--color-ink-2);
  max-width: 60em;
}

@media (min-width: 768px) {
  .kv-list__row {
    grid-template-columns: 12rem 1fr;
    gap: var(--space-5);
    align-items: baseline;
  }
}

/* ==========================================================================
   15. 内联图标
   ========================================================================== */
.icon {
  width: 24px;
  height: 24px;
  stroke: currentColor;
  stroke-width: 1.5;
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.icon--sm { width: 20px; height: 20px; }

.icon--lg { width: 28px; height: 28px; }

/* ==========================================================================
   15b. 手风琴条目（原生 details/summary，无 JS、键盘天然可用）
       用于 china.html 十个内容方向、world.html 九个分区
   ========================================================================== */
.acc-list { border-top: 1px solid var(--color-line); }

.acc { border-bottom: 1px solid var(--color-line); }

.acc > summary {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  min-height: 48px;
  padding-block: var(--space-3);
  cursor: pointer;
  list-style: none;
  font-family: var(--font-display);
  font-size: var(--fs-h4);
  font-weight: var(--fw-semibold);
  color: var(--color-ink);
  letter-spacing: var(--ls-normal);
}

.acc > summary::-webkit-details-marker { display: none; }

.acc__index {
  flex: none;
  font-family: var(--font-num);
  font-size: var(--fs-caption);
  font-weight: var(--fw-medium);
  color: var(--color-accent);
  letter-spacing: var(--ls-normal);
}

.acc__sign {
  position: relative;
  flex: none;
  margin-left: auto;
  width: 16px;
  height: 16px;
}

.acc__sign::before,
.acc__sign::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 12px;
  height: 1px;
  background: var(--color-line-control);
  transform: translate(-50%, -50%);
}

.acc__sign::after { transform: translate(-50%, -50%) rotate(90deg); }

.acc[open] > summary { color: var(--color-accent-ink); }

.acc[open] .acc__sign::after { display: none; }

.acc__body {
  padding-bottom: var(--space-4);
  font-size: var(--fs-sm);
  line-height: var(--lh-sm);
  color: var(--color-ink-2);
  max-width: 60em;
}

.acc__body p { max-width: none; }

/* ==========================================================================
   15c. 卡片内的核心问题行 / 字段清单小列表
   ========================================================================== */
.card__q {
  font-family: var(--font-display);
  font-size: var(--fs-h4);
  line-height: 1.5;
  font-weight: var(--fw-medium);
  color: var(--color-accent-ink);
  max-width: none;
}

.card__label {
  display: block;
  font-size: var(--fs-caption);
  font-weight: var(--fw-medium);
  letter-spacing: var(--ls-normal);
  color: var(--color-ink-3);
  margin-bottom: var(--space-1);
}

.field-mini {
  display: grid;
  gap: var(--space-2);
  margin-top: var(--space-1);
}

.field-mini li {
  position: relative;
  padding-left: var(--space-4);
  font-size: var(--fs-caption);
  line-height: var(--lh-sm);
  color: var(--color-ink-3);
}

.field-mini li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.62em;
  width: 6px;
  height: 1px;
  background: var(--color-line-control);
}

/* 分类卡（practice.html S2：类别 + 释义 + 下挂占位卡） */
.card--cat { gap: var(--space-4); }

.card--cat .card__head {
  display: grid;
  gap: var(--space-2);
}

.card--cat .card__slots {
  display: grid;
  gap: var(--space-2);
  margin-top: auto;
}

.slot-mini {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-3);
  background: var(--color-surface-sunken);
  border: 1px dashed var(--color-dash);
  border-radius: var(--radius-1);
  font-size: var(--fs-caption);
  color: var(--color-ink-3);
  text-decoration: none;
  transition: border-color var(--dur-fast) var(--ease-state);
}

.slot-mini:hover { border-color: var(--color-accent); }

/* ==========================================================================
   16. 引用式立场块（practice.html S5 / action.html）
   ========================================================================== */
.standfirst {
  padding: var(--space-5);
  background: var(--color-accent-tint);
  border: 1px solid var(--color-line);
  border-left: 4px solid var(--color-accent);
  border-radius: 0 var(--radius-1) var(--radius-1) 0;
}

.standfirst__text {
  font-family: var(--font-display);
  font-size: var(--fs-h3);
  line-height: var(--lh-h3);
  font-weight: var(--fw-semibold);
  color: var(--color-ink);
  max-width: 30em;
}

.standfirst__note {
  margin-top: var(--space-4);
  font-size: var(--fs-sm);
  line-height: var(--lh-sm);
  color: var(--color-ink-2);
  max-width: 60em;
}

@media (min-width: 1200px) {
  .standfirst { padding: var(--space-7); }
}

/* ==========================================================================
   17. 第二语义：土褐作用域（.mod-earth）
   换色后 --color-accent 全局是活绿。但「根系 / 土层 / 传统」这几处语义
   需要暖色支点，否则屏 05 中国农耕文明、屏 08 传统类标签会一起变绿，
   「东方」的暖色基座消失。
   做法：只在 .mod-earth 作用域内把 accent 四兄弟换成 earth 四兄弟，
   子元素全部继承，不新增任何组件选择器。
   纪律：earth 与 accent 不同框——同一组件内不得既用绿又用褐，
   近补色相邻会产生脏边。故本类只加在两处整屏/整页语境。
   ========================================================================== */
.mod-earth {
  --color-accent:      var(--color-earth);
  --color-accent-ink:  var(--color-earth-ink);
  --color-accent-soft: var(--color-earth-soft);
  --color-accent-tint: var(--color-earth-tint);
}

/* ==========================================================================
   18. 触控目标 ≥44px（仅 <768）
   这两个本来就是一整块可点区域，直接用 min-height 抬到 44，
   自然高度 43.89 / 42.05，增量 0.11 / 1.95px，肉眼不可辨。
   ========================================================================== */
@media (max-width: 767px) {
  .chip,
  .slot-mini { min-height: 44px; }
}