/* ============================================================
 * spine-heal.css — 节气脊柱「四页导航」+ 五音疗愈 / 六字诀共用件
 * ------------------------------------------------------------
 * 三条约束：
 *   ① 全部走设计令牌，深浅主题自适应（零硬编码 #fff / rgba(20,18,14,…)）。
 *   ② 主规则零 !important（@media 与 html.calm 两类豁免）。
 *   ③ 只有一处连续动画（五音播放指示条 .ft-eq s），已在文末同时登记
 *      html.calm 与 @media (pointer:coarse),(prefers-reduced-motion:reduce)。
 *      新增任何 infinite 动画都必须同步登记这两处。
 * ============================================================ */

/* ---------- 四页导航 ---------- */
.ss-nav {
  display: flex; gap: 10px; margin: 0 0 16px;
  padding: 6px; border-radius: 16px;
  background: var(--card2); border: 1px solid var(--line2);
  overflow-x: auto; -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}
.ss-nav::-webkit-scrollbar { display: none; }

.ss-nb {
  flex: 1 1 0; min-width: 132px;
  display: flex; flex-direction: column; align-items: flex-start; gap: 3px;
  padding: 11px 15px; border: 1px solid transparent; border-radius: 12px;
  background: transparent; color: var(--ink2);
  font-family: inherit; text-align: left; cursor: pointer;
  transition: background .24s, border-color .24s, transform .24s, color .24s;
}
.ss-nb b { font-family: var(--serif); font-size: 16px; font-weight: 700; letter-spacing: .18em; }
.ss-nb span { font-size: 12.5px; color: var(--sub); letter-spacing: .04em; }
.ss-nb:hover { background: var(--card); border-color: var(--line2); transform: translateY(-1px); }
.ss-nb.on {
  background: var(--card); border-color: var(--teal);
  box-shadow: 0 2px 12px color-mix(in srgb, var(--teal) 14%, transparent);
}
.ss-nb.on b { color: var(--teal); }
.ss-nb.on span { color: var(--ink2); }
.ss-nb:focus-visible { outline: 2px solid var(--teal); outline-offset: 2px; }

/* ---------- 手机端：四页签改为 2×2 铺满，不再横滑 ----------
   桌面 4 个页签横向排开最小 132px；390px 屏上会溢出成横向滚动条，
   用户得横滑才够得着「通览」。这里改成两行两列，一屏全见、一次点到。 */
@media (max-width: 640px) {
  .ss-nav {
    display: grid; grid-template-columns: 1fr 1fr; gap: 8px;
    overflow-x: visible; padding: 6px;
  }
  .ss-nb { min-width: 0; padding: 10px 12px; gap: 2px; }
  .ss-nb b { font-size: 15.5px; letter-spacing: .14em; }
  .ss-nb span { font-size: 11.5px; }
}

/* ---------- 页面容器：只切显示，绝不搬运节点 ----------
   spine-solar.js 的事件是委托挂在 mount 宿主上的，节点一旦移出宿主子树，
   闭环链 / 椎骨的点击委托会全部失效 —— 四个 pane 都在宿主内部。 */
.ss-pane { padding-top: 4px; }
.ss-pane[hidden] { display: none; }
.ss-pane > * { margin-bottom: 16px; }
.ss-pane > *:last-child { margin-bottom: 0; }

/* ---------- 疗愈页：两个共用件的外框 ---------- */
.ss-heal-extra { display: grid; gap: 20px; }
.ss-heal-extra > div {
  background: var(--card2); border: 1px solid var(--line2);
  border-radius: var(--r); padding: 18px 20px;
}

/* ══════════════════════════════════════════════════════════
 * 五音疗愈 · 共用组件（five-tone-therapy.js）
 * ══════════════════════════════════════════════════════════ */
.ft-scope-hd {
  display: flex; align-items: flex-end; justify-content: space-between;
  gap: 14px; flex-wrap: wrap; margin-bottom: 14px;
}
.ft-kick {
  font-family: var(--serif); font-size: 12.5px; letter-spacing: .4em;
  color: var(--teal); margin-bottom: 5px;
}
.ft-scope-hd h3 {
  margin: 0 0 5px; font-family: var(--serif);
  font-size: clamp(19px, 2.6vw, 23px); font-weight: 700; letter-spacing: .1em; color: var(--ink);
}
.ft-lead { margin: 0; font-size: 13.5px; line-height: 1.9; color: var(--sub); max-width: 62ch; }
.ft-scope-r { display: flex; align-items: center; gap: 12px; }
.ft-cnt { display: flex; flex-direction: column; align-items: center; line-height: 1.2; }
.ft-cnt b { font-family: var(--serif); font-size: 22px; color: var(--teal); }
.ft-cnt span { font-size: 12px; color: var(--sub); letter-spacing: .06em; }

.ft-stop {
  padding: 8px 16px; border-radius: 999px; cursor: pointer;
  background: transparent; border: 1px solid var(--line); color: var(--ink2);
  font-family: inherit; font-size: 13px; letter-spacing: .06em;
  transition: opacity .2s, border-color .2s;
}
.ft-stop:hover:not(:disabled) { border-color: var(--accent); color: var(--accent); }
.ft-stop:disabled { opacity: .4; cursor: default; }

/* 五音切换 */
.ft-tones { display: grid; grid-template-columns: repeat(5, 1fr); gap: 8px; margin-bottom: 12px; }
.ft-tone {
  display: flex; flex-direction: column; align-items: center; gap: 3px;
  padding: 11px 6px; border-radius: 12px; cursor: pointer;
  background: var(--card); border: 1px solid var(--line2); color: var(--ink2);
  font-family: inherit;
  transition: border-color .22s, background .22s, transform .22s;
}
.ft-tone:hover { transform: translateY(-2px); border-color: var(--tc); }
.ft-tt {
  font-family: var(--serif); font-style: normal;
  font-size: 21px; font-weight: 700; letter-spacing: .06em; color: var(--ink);
}
.ft-tn { font-size: 12px; color: var(--sub); }
.ft-tone.on {
  border-color: var(--tc);
  background: linear-gradient(180deg, color-mix(in srgb, var(--tc) 16%, var(--card)), var(--card));
}
.ft-tone.on .ft-tt { color: var(--tc); }
.ft-tone.on .ft-tn { color: var(--ink2); }

/* 当前音释义 */
.ft-mean {
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  padding: 12px 16px; border-radius: 12px; margin-bottom: 12px;
  background: linear-gradient(90deg, color-mix(in srgb, var(--tc) 12%, transparent), transparent);
  border-left: 3px solid var(--tc);
}
.ft-m-i {
  font-family: var(--serif); font-size: 20px; font-weight: 700;
  letter-spacing: .1em; color: var(--tc); flex: none;
}
.ft-m-t { flex: 1; font-size: 13.5px; color: var(--ink2); letter-spacing: .04em; }
.ft-all {
  flex: none; padding: 7px 15px; border-radius: 999px; cursor: pointer;
  background: var(--teal); border: 1px solid var(--teal); color: var(--bg);
  font-family: inherit; font-size: 13px; letter-spacing: .06em;
  transition: opacity .2s, transform .18s;
}
.ft-all:hover { opacity: .88; }
.ft-all:active { transform: scale(.97); }

/* 曲目表 */
.ft-list { display: grid; gap: 8px; }
.ft-empty { padding: 22px; text-align: center; font-size: 13.5px; color: var(--sub); }
.ft-item {
  display: grid; grid-template-columns: 34px 1fr auto; align-items: center; gap: 12px;
  padding: 11px 15px; border-radius: 12px; cursor: pointer;
  background: var(--card); border: 1px solid var(--line2);
  transition: border-color .22s, transform .22s, background .22s;
}
.ft-item:hover { transform: translateY(-1px); border-color: var(--tc); }
.ft-item:focus-visible { outline: 2px solid var(--tc); outline-offset: 2px; }
.ft-item.on {
  border-color: var(--tc);
  background: linear-gradient(90deg, color-mix(in srgb, var(--tc) 12%, var(--card)), var(--card));
}
.ft-i-n { font-family: var(--serif); font-size: 15px; color: var(--sub); text-align: center; }
.ft-i-m { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.ft-i-m b { font-family: var(--serif); font-size: 15.5px; font-weight: 700; color: var(--ink); letter-spacing: .06em; }
.ft-i-m em {
  font-style: normal; font-size: 12.5px; color: var(--sub); line-height: 1.7;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.ft-i-b { display: flex; align-items: center; gap: 8px; flex: none; }
.ft-i-b b { font-size: 12.5px; font-weight: 400; color: var(--sub); letter-spacing: .1em; }
.ft-item.on .ft-i-b b { color: var(--tc); }

/* 播放指示条：只在 .on 时动，命名 keep */
.ft-eq { display: none; align-items: flex-end; gap: 2px; height: 14px; }
.ft-eq s { display: block; width: 3px; background: var(--tc); text-decoration: none; border-radius: 2px; }
.ft-item.on .ft-eq { display: inline-flex; }
.ft-item.on .ft-eq s { animation: ftEq .9s ease-in-out infinite; }
.ft-item.on .ft-eq s:nth-child(2) { animation-delay: .18s; }
.ft-item.on .ft-eq s:nth-child(3) { animation-delay: .36s; }
@keyframes ftEq {
  0%, 100% { height: 4px; opacity: .55; }
  50% { height: 14px; opacity: 1; }
}

/* ══════════════════════════════════════════════════════════
 * 六字诀呼吸法 · 深化练习（liuzijue-practice.js）
 * ══════════════════════════════════════════════════════════ */
.lz-scope { --jc: var(--teal); }
.lz-kick {
  font-family: var(--serif); font-size: 12.5px; letter-spacing: .4em;
  color: var(--jc); margin-bottom: 5px;
}
.lz-hd h3 {
  margin: 0 0 5px; font-family: var(--serif);
  font-size: clamp(19px, 2.6vw, 23px); font-weight: 700; letter-spacing: .1em; color: var(--ink);
}
.lz-lead { margin: 0 0 14px; font-size: 13.5px; line-height: 1.9; color: var(--sub); }

/* 字诀 / 呼吸模式 */
.lz-jues { display: grid; grid-template-columns: repeat(6, 1fr); gap: 8px; margin-bottom: 10px; }
.lz-jue {
  display: flex; flex-direction: column; align-items: center; gap: 2px;
  padding: 10px 4px; border-radius: 12px; cursor: pointer;
  background: var(--card); border: 1px solid var(--line2); color: var(--ink2);
  font-family: inherit;
  transition: border-color .22s, background .22s, transform .22s;
}
.lz-jue:hover { transform: translateY(-2px); border-color: var(--jc); }
.lz-jue b {
  font-family: var(--serif); font-style: normal; font-size: 22px;
  font-weight: 700; letter-spacing: .04em; color: var(--ink);
}
.lz-jue span { font-size: 12px; color: var(--sub); }
.lz-jue.on {
  border-color: var(--jc);
  background: linear-gradient(180deg, color-mix(in srgb, var(--jc) 16%, var(--card)), var(--card));
}
.lz-jue.on b { color: var(--jc); }

.lz-modes { display: grid; grid-template-columns: repeat(5, 1fr); gap: 8px; margin-bottom: 16px; }
.lz-mode {
  display: flex; flex-direction: column; align-items: center; gap: 2px;
  padding: 9px 5px; border-radius: 12px; cursor: pointer;
  background: var(--card); border: 1px solid var(--line2); color: var(--ink2);
  font-family: inherit;
  transition: border-color .22s, transform .22s, background .22s;
}
.lz-mode:hover { transform: translateY(-1px); border-color: var(--teal); }
.lz-mode i { font-style: normal; font-size: 16px; color: var(--teal); }
.lz-mode b { font-family: var(--serif); font-size: 14.5px; font-weight: 700; color: var(--ink); letter-spacing: .06em; }
.lz-mode span { font-size: 11.5px; color: var(--sub); }
.lz-mode.on { border-color: var(--teal); background: var(--teal-soft); }
.lz-mode.on b { color: var(--teal); }

/* 呼吸盘 */
.lz-stage {
  position: relative; height: 300px; margin-bottom: 14px;
  border-radius: 18px;
  background:
    radial-gradient(circle at 50% 45%, color-mix(in srgb, var(--jc) 10%, transparent), transparent 62%),
    var(--bg2);
  border: 1px solid var(--line2);
  display: flex; align-items: center; justify-content: center;
}
.lz-ring {
  position: absolute; width: 230px; height: 230px; border-radius: 50%;
  border: 1px solid color-mix(in srgb, var(--jc) 34%, transparent);
  opacity: .75; transform: scale(.62);
  transition: opacity .3s;
}
.lz-ring-i {
  position: absolute; inset: 12px; border-radius: 50%;
  border: 1px dashed color-mix(in srgb, var(--jc) 26%, transparent);
  transform: scale(.62);
}
.lz-orb {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%) scale(.62);
  width: 150px; height: 150px; border-radius: 50%;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px;
  background: radial-gradient(circle at 50% 34%, color-mix(in srgb, var(--jc) 40%, var(--card)), var(--card));
  box-shadow: 0 8px 34px color-mix(in srgb, var(--jc) 24%, transparent);
}
.lz-orb b {
  font-family: var(--serif); font-size: 54px; font-weight: 700;
  letter-spacing: .06em; color: var(--ink); line-height: 1.1;
}
.lz-orb em { font-style: normal; font-size: 13px; color: var(--sub); letter-spacing: .14em; }
.lz-ph {
  position: absolute; top: 16px; left: 0; right: 0; text-align: center;
  font-family: var(--serif); font-size: 18px; letter-spacing: .28em; color: var(--ink);
}
.lz-cd {
  position: absolute; bottom: 16px; left: 0; right: 0; text-align: center;
  font-family: var(--serif); font-size: 26px; font-weight: 700; color: var(--jc);
}
.lz-chant {
  position: absolute; bottom: 48px; left: 0; right: 0; text-align: center;
  font-family: var(--serif); font-size: 20px; letter-spacing: .3em; color: var(--ink2);
  min-height: 1.4em;
}
.lz-scope.pre .lz-ph { color: var(--teal); }

/* 数据条 */
.lz-meter {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-bottom: 14px;
}
.lz-m-i {
  display: flex; flex-direction: column; align-items: center; gap: 3px;
  padding: 10px 8px; border-radius: 12px;
  background: var(--card); border: 1px solid var(--line2);
}
.lz-m-i span { font-size: 12px; color: var(--sub); letter-spacing: .12em; }
.lz-m-i b { font-family: var(--serif); font-size: 17px; font-weight: 700; color: var(--ink); letter-spacing: .06em; }

/* 控制条 */
.lz-ctl { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 12px; }
.lz-b {
  padding: 9px 17px; border-radius: 999px; cursor: pointer;
  background: var(--card); border: 1px solid var(--line); color: var(--ink2);
  font-family: inherit; font-size: 13.5px; letter-spacing: .08em;
  transition: transform .18s, border-color .2s, opacity .2s;
}
.lz-b:hover { transform: translateY(-1px); border-color: var(--teal); }
.lz-b:active { transform: scale(.97); }
.lz-b:disabled { opacity: .4; cursor: default; transform: none; }
.lz-b.go { background: var(--teal); border-color: var(--teal); color: var(--bg); }
.lz-b.stop { border-color: var(--line); color: var(--accent); }
.lz-b.off { opacity: .45; }
.lz-note { font-size: 12.5px; color: var(--sub); margin-bottom: 12px; line-height: 1.8; }

/* 导引字幕 */
.lz-guide {
  border: 1px solid var(--line2); border-left: 3px solid var(--jc);
  border-radius: 12px; background: var(--card);
  padding: 0; max-height: 0; overflow: hidden; opacity: 0;
  transition: max-height .4s, opacity .3s, padding .3s;
}
.lz-guide.open { max-height: 460px; opacity: 1; padding: 14px 16px; overflow-y: auto; }
.lz-gd-hd {
  font-family: var(--serif); font-size: 12.5px; letter-spacing: .24em;
  color: var(--sub); margin-bottom: 8px;
}
.lz-gd-body p { margin: 0 0 7px; font-size: 14.5px; line-height: 2; color: var(--ink2); }
.lz-gd-body p:last-child { margin-bottom: 0; }

/* ---------- 响应式（与全站断点保持一致） ---------- */
@media (max-width: 1024px) {
  .lz-jues { grid-template-columns: repeat(3, 1fr); }
  .lz-modes { grid-template-columns: repeat(3, 1fr); }
  .ft-tones { grid-template-columns: repeat(5, 1fr); }
}
@media (max-width: 860px) {
  .ss-nav { gap: 6px; padding: 5px; }
  .ss-nb { min-width: 116px; padding: 10px 12px; }
  .ss-nb b { font-size: 15px; letter-spacing: .12em; }
  .ss-nb span { font-size: 11.5px; }
  .lz-modes { grid-template-columns: repeat(2, 1fr); }
  .ss-heal-extra > div { padding: 15px 16px; }
}
@media (max-width: 640px) {
  .ss-nb { flex: 0 0 auto; min-width: 104px; }
  .ft-tones { grid-template-columns: repeat(5, 1fr); gap: 5px; }
  .ft-tone { padding: 9px 3px; }
  .ft-tt { font-size: 18px; }
  .ft-tn { font-size: 11px; }
  .ft-item { grid-template-columns: 26px 1fr; padding: 10px 12px; }
  .ft-i-b { grid-column: 2; justify-content: flex-start; }
  .ft-scope-r { width: 100%; justify-content: space-between; }
  .lz-jues { grid-template-columns: repeat(3, 1fr); }
  .lz-stage { height: 250px; }
  .lz-ring { width: 190px; height: 190px; }
  .lz-orb { width: 124px; height: 124px; }
  .lz-orb b { font-size: 44px; }
  .lz-meter { grid-template-columns: 1fr; }
  .lz-ctl .lz-b { flex: 1 1 auto; text-align: center; }
}

/* ---------- 触屏 / 减弱动效：关闭唯一的连续动画 ---------- */
@media (pointer: coarse), (prefers-reduced-motion: reduce) {
  .ft-item.on .ft-eq s { animation: none !important; }
  .lz-guide { transition: none !important; }
  .ss-nb, .ft-tone, .ft-item, .lz-jue, .lz-mode, .lz-b { transition: none !important; }
}