/* ═══ 打字音开关（word / exam 共用）— 复刻小程序 app.wxss 的 .ts-row / .ts-toggle ═══
   与两页日期按钮同族：藏青渐变底 + 金边 + 圆角矩形，并排时高度与质感一致。
   图标一律 SVG data-URI（铁律：禁用 emoji / 平台字形）。喇叭白 = 开，喇叭红 = 关。
   换算口径：小程序 rpx ÷ 2 = web px；默认取小程序 ≥500px 大屏档规格（WEB 是桌面站），
   ≤640px 手机档再回到 scale(0.8) 的紧凑规格，与两页 cal-btn 的手机档处理一致。 */

/* 2026-09-29 起 word / exam 的页顶黄徽章（h1 > .title-badge）是本行第一个子元素：
   整行 stretch 对齐 → 徽章高度 = 两黑钮高度；h1 去外边距，徽章文字垂直居中。 */
.ts-row { display: inline-flex; align-items: stretch; gap: clamp(10px, 1.2vw, 16px); }
.ts-row .word-title, .ts-row .exam-title { margin: 0; display: flex; }
.ts-row .title-badge { align-self: stretch; display: inline-flex; align-items: center; white-space: nowrap; }

.ts-toggle {
  display: inline-flex; align-items: center; gap: clamp(8px, 0.9vw, 12px);
  padding: clamp(12px, 1.4vw, 16px) clamp(16px, 1.8vw, 22px);
  border-radius: 16px;
  border: 1.5px solid rgba(201,164,75, 0.3);
  background: linear-gradient(135deg, rgba(26,26,42,0.95), rgba(15,23,42,0.95));
  box-shadow: 0 0 20px rgba(180,130,40,0.12), inset 0 1px 0 rgba(255,255,255,0.06);
  cursor: pointer;
  font: inherit; color: inherit;
  -webkit-appearance: none; appearance: none;
  transition: box-shadow .35s cubic-bezier(0.25,0.1,0.25,1), border-color .35s cubic-bezier(0.25,0.1,0.25,1);
}
/* 小程序的 hover-class，web 用 :hover / :active 复现 */
.ts-toggle:hover, .ts-toggle:active {
  border-color: rgba(226,193,112,0.6);
  box-shadow: 0 0 32px rgba(180,130,40,0.25), inset 0 1px 0 rgba(255,255,255,0.06);
}
.ts-toggle:focus { outline: none; }
.ts-toggle:focus-visible { border-color: rgba(226,193,112,0.6); }

.ts-toggle__kbd, .ts-toggle__spk {
  width: clamp(20px, 2vw, 24px); height: clamp(20px, 2vw, 24px); flex-shrink: 0;
  background-size: contain; background-repeat: no-repeat; background-position: center;
}
/* 键盘图标（白色描边） */
.ts-toggle__kbd {
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='%23ffffff'%20stroke-width='1.8'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Crect%20x='2'%20y='6'%20width='20'%20height='12'%20rx='2.5'/%3E%3Cline%20x1='6'%20y1='10'%20x2='6.01'%20y2='10'/%3E%3Cline%20x1='10'%20y1='10'%20x2='10.01'%20y2='10'/%3E%3Cline%20x1='14'%20y1='10'%20x2='14.01'%20y2='10'/%3E%3Cline%20x1='18'%20y1='10'%20x2='18.01'%20y2='10'/%3E%3Cline%20x1='8'%20y1='14'%20x2='16'%20y2='14'/%3E%3C/svg%3E");
}
/* 喇叭白 = 开 */
.ts-toggle__spk {
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='%23ffffff'%20stroke-width='1.8'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Cpolygon%20points='11%205%206%209%202.5%209%202.5%2015%206%2015%2011%2019'%20fill='%23ffffff'/%3E%3Cpath%20d='M15%209.5a3.5%203.5%200%200%201%200%205'/%3E%3Cpath%20d='M17.8%206.8a7.5%207.5%200%200%201%200%2010.4'/%3E%3C/svg%3E");
}
/* 喇叭红 = 关：只换喇叭图，其余样式不动 */
.ts-toggle--off .ts-toggle__spk {
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='%23ff4d4f'%20stroke-width='1.8'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Cpolygon%20points='11%205%206%209%202.5%209%202.5%2015%206%2015%2011%2019'%20fill='%23ff4d4f'/%3E%3Cpath%20d='M15%209.5a3.5%203.5%200%200%201%200%205'/%3E%3Cpath%20d='M17.8%206.8a7.5%207.5%200%200%201%200%2010.4'/%3E%3C/svg%3E");
}

/* ═══ 手机档（≤640px）：两钮各自 scale(0.8)，缩放留白已构成间距，故 gap:0 ═══ */
@media (max-width: 640px) {
  /* 手机档一行塞不下三个 → 允许换行居中，胶囊自然落到自己那一行 */
  .ts-row { gap: 0; flex-wrap: wrap; justify-content: center; row-gap: 10px; }
  .ts-toggle {
    transform: scale(0.8); transform-origin: center center;
    padding: 14px 17px;
    border-radius: 12px;
    gap: 7px;
  }
  .ts-toggle__kbd, .ts-toggle__spk { width: 20px; height: 20px; }
}

/* ═══ 2026-09-29 站长定案：word / exam 页顶按钮改「方案4 · 泡泡糖果冻」马卡龙糖果色 ═══
   2026-09-29 追加 exam 同款（原「exam 保持藏青金不变」作废，站长明确：exam 也要和 word 一样糖果色）。
   两页共用同一套语言：饱和糖果底 #4ecdc4 + 3px 白描边 + 底部实心果冻投影（0 5px 0 深一档同色）+ 白图标(描边2)。
   与 word.css / exam.css 的徽章 / 日期钮是同一套规格。 */
.word-section .ts-toggle, .exam-section .ts-toggle {
  border: 3px solid #fff;
  border-radius: 16px;
  background: #4ecdc4;
  box-shadow: 0 5px 0 #35b3a9, 0 8px 16px rgba(53,179,169,0.4);
}
.word-section .ts-toggle:hover, .exam-section .ts-toggle:hover,
.word-section .ts-toggle:active, .exam-section .ts-toggle:active,
.word-section .ts-toggle:focus-visible, .exam-section .ts-toggle:focus-visible {
  border-color: #fff;
  box-shadow: 0 5px 0 #35b3a9, 0 10px 22px rgba(53,179,169,0.5);
}
.word-section .ts-toggle__kbd, .exam-section .ts-toggle__kbd {
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='%23ffffff'%20stroke-width='2'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Crect%20x='2'%20y='6'%20width='20'%20height='12'%20rx='2.5'/%3E%3Cline%20x1='6'%20y1='10'%20x2='6.01'%20y2='10'/%3E%3Cline%20x1='10'%20y1='10'%20x2='10.01'%20y2='10'/%3E%3Cline%20x1='14'%20y1='10'%20x2='14.01'%20y2='10'/%3E%3Cline%20x1='18'%20y1='10'%20x2='18.01'%20y2='10'/%3E%3Cline%20x1='8'%20y1='14'%20x2='16'%20y2='14'/%3E%3C/svg%3E");
}
.word-section .ts-toggle__spk, .exam-section .ts-toggle__spk {
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='%23ffffff'%20stroke-width='2'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Cpolygon%20points='11%205%206%209%202.5%209%202.5%2015%206%2015%2011%2019'%20fill='%23ffffff'/%3E%3Cpath%20d='M15%209.5a3.5%203.5%200%200%201%200%205'/%3E%3Cpath%20d='M17.8%206.8a7.5%207.5%200%200%201%200%2010.4'/%3E%3C/svg%3E");
}
/* 关闭态喇叭仍是红，但要压过上面的 scoped 白图（双类 + 后代，特异性更高） */
.word-section .ts-toggle--off .ts-toggle__spk, .exam-section .ts-toggle--off .ts-toggle__spk {
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='%23ff4d4f'%20stroke-width='2'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Cpolygon%20points='11%205%206%209%202.5%209%202.5%2015%206%2015%2011%2019'%20fill='%23ff4d4f'/%3E%3Cpath%20d='M15%209.5a3.5%203.5%200%200%201%200%205'/%3E%3Cpath%20d='M17.8%206.8a7.5%207.5%200%200%201%200%2010.4'/%3E%3C/svg%3E");
}