/**
 * 文章内的「切换标签」（packtabs）—— 纯 CSS 单选开关，无 JS。
 * 目前用在文章 /46.html（GTA 字体包：传承版 / 增强版 切换）。
 *
 * 标记写法：
 *   <div class="packtabs">
 *   <input type="radio" name="packtabs" id="pk1" checked><label for="pk1">传承版</label><input type="radio" name="packtabs" id="pk2"><label for="pk2">增强版</label>
 *   <div class="packtabs__pane" id="pk-pane1">…</div>
 *   <div class="packtabs__pane" id="pk-pane2">…</div>
 *   </div>
 *
 * 两个坑（都吃过）：
 * 1) 选择器别用直接子代（.packtabs > input、~ #pane）：WordPress 的 wpautop 会把标签行包进 <p>，
 *    结构一变就失效（单选框露出来、面板不切）。所以用后代选择器 + :has() 判选中。
 * 2) 同一组的 input 与 label 必须写在同一行，否则 wpautop 在换行处插 <br />，标签会折成两行。
 * 放在子主题而不内联在正文里，是为了后台编辑器改正文时不会破坏样式。
 */
.packtabs { margin: 6px 0 0; }
.packtabs > p { margin: 0; }
.packtabs input[type="radio"] { position: absolute; opacity: 0; pointer-events: none; }
.packtabs label { display: inline-block; min-width: 112px; text-align: center; padding: 8px 18px; margin: 0 8px 0 0; border-radius: 10px; font-size: 15px; font-weight: 600; color: var(--text-secondary); background: var(--bg-secondary); cursor: pointer; user-select: none; transition: background .2s, color .2s; }
.packtabs label:hover { color: var(--text-primary); }
.packtabs input[type="radio"]:checked + label { background: var(--theme-color); color: #fff; }
.packtabs__pane { display: none; margin-top: 18px; }
.packtabs:has(#pk1:checked) #pk-pane1,
.packtabs:has(#pk2:checked) #pk-pane2 { display: block; }