/* 全站共用的基础组件：按钮、图标按钮、进度条、底部面板、提示条。只引用 tokens.css 的变量。 */
*, *::before, *::after { box-sizing: border-box; }
html, body { height: 100%; }
body { margin: 0; background: var(--c-bg); color: var(--c-text); font: var(--fs-body)/1.5 var(--font); -webkit-text-size-adjust: 100%; }
button { font: inherit; color: inherit; }
[hidden] { display: none !important; }

:focus-visible { outline: 3px solid var(--c-primary); outline-offset: 2px; }

/* 图标：Lucide SVG 用作遮罩，颜色跟随文字色。文件在 /icons/，许可见 /icons/LICENSE */
.ico { display: inline-block; width: 24px; height: 24px; background: currentColor; flex: none;
  -webkit-mask: var(--ico) center / contain no-repeat; mask: var(--ico) center / contain no-repeat; }
.ico-rabbit { --ico: url(/icons/rabbit.svg); }
.ico-turtle { --ico: url(/icons/turtle.svg); }
.ico-languages { --ico: url(/icons/languages.svg); }
.ico-arrow-left { --ico: url(/icons/arrow-left.svg); }
.ico-arrow-right { --ico: url(/icons/arrow-right.svg); }
.ico-rotate-ccw { --ico: url(/icons/rotate-ccw.svg); }
.ico-x { --ico: url(/icons/x.svg); }
.ico-check { --ico: url(/icons/check.svg); }
.ico-arrow-up { --ico: url(/icons/arrow-up.svg); }
.ico-mic { --ico: url(/icons/mic.svg); }
.ico-triangle-alert { --ico: url(/icons/triangle-alert.svg); }
.ico-loader-circle { --ico: url(/icons/loader-circle.svg); animation: spin 1s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
.ico-lg { width: 40px; height: 40px; }
.ico-xl { width: 72px; height: 72px; }

/* 图标按钮：点按区不小于 44px；必须有 aria-label 和 title */
.icon-btn { display: inline-grid; place-items: center; min-width: var(--tap); min-height: var(--tap); padding: 0; border: 0; border-radius: var(--r-pill);
  background: transparent; color: var(--c-text-2); cursor: pointer; text-decoration: none; transition: background-color .15s, color .15s, transform .15s; }
.icon-btn:hover:not(:disabled) { background: var(--c-line); color: var(--c-text); }
.icon-btn:active:not(:disabled) { transform: scale(.96); }
.icon-btn:disabled { color: var(--c-disabled); cursor: not-allowed; }

/* 自动播放被浏览器拦截时，提示点击：轻轻的光圈；减少动态效果时改为静态描边 */
.icon-btn.nudge { animation: nudge 1.6s ease-in-out infinite; }
@keyframes nudge { 0%, 100% { box-shadow: 0 0 0 0 rgba(67, 85, 255, .55); } 50% { box-shadow: 0 0 0 10px rgba(67, 85, 255, 0); } }

/* 文字按钮（完成页等少数地方） */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--sp-2); min-height: var(--tap); padding: 0 var(--sp-5); border: 0; border-radius: var(--r-btn);
  background: var(--c-primary); color: #FFFFFF; font-weight: var(--fw-bold); cursor: pointer; box-shadow: 0 3px 0 var(--c-primary-deep); transition: background-color .15s, transform .1s, box-shadow .1s; }
.btn:hover:not(:disabled) { background: var(--c-primary-deep); }
.btn:active:not(:disabled) { transform: translateY(2px); box-shadow: 0 1px 0 var(--c-primary-deep); }
.btn:disabled { background: var(--c-line); color: var(--c-disabled); box-shadow: none; cursor: not-allowed; }

/* 进度条 */
.progress { flex: 1; height: 8px; border-radius: var(--r-pill); background: var(--c-line); overflow: hidden; }
.progress > i { display: block; height: 100%; width: 0; border-radius: var(--r-pill); background: var(--c-primary); transition: width .3s ease; }

/* 例句里变化的词块 */
mark.chunk { font-weight: var(--fw-bold); white-space: nowrap; background: var(--c-highlight); color: var(--c-text); padding: 0 .2em; margin: 0 -.05em; border-radius: 6px; -webkit-box-decoration-break: clone; box-decoration-break: clone; }

/* 「样例数据」小标签：浅橙底（#EA7F00 混白），上面放 #131313；放在顶栏右侧，不占主要视线 */
.tag { flex: none; padding: 0 var(--sp-2); border-radius: var(--r-pill); background: var(--c-warn-tint); color: var(--c-text); font-size: var(--fs-small); line-height: 22px; white-space: nowrap; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .icon-btn.nudge { box-shadow: 0 0 0 3px var(--c-primary); }
}

/* 练习页的两种按钮（尺寸与颜色取自 Steven 的设计稿，docs/assets/ui-references/design-phone.png）：
   .i52 圆形图标按钮 52px（兔子、乌龟、译文）；.nav-btn 胶囊 52px 高（← → ↻）。
   按钮不出现、不消失、不移动，只在「可用」和「灰色」之间切换。 */
.icon-btn.i52 { width: 52px; height: 52px; min-width: 52px; min-height: 52px; background: var(--c-bg); color: var(--c-primary); }
.icon-btn.i52:hover:not(:disabled) { background: var(--c-line); color: var(--c-primary); }
.icon-btn.i52:disabled { background: var(--c-bg); color: var(--c-disabled); }
.icon-btn.i52[aria-pressed="true"] { background: var(--c-primary); color: #FFFFFF; } /* 译文点开 */
.icon-btn.i52[aria-pressed="true"]:hover:not(:disabled) { background: var(--c-primary); color: #FFFFFF; } /* 点开后鼠标停在上面也不变色（设计稿：底 #4355FF） */
.icon-btn.i52.halo { box-shadow: 0 0 0 4px rgba(67, 85, 255, .16); } /* 第 2 级作答前，提示这是听音入口 */

.icon-btn.nav-btn { flex: 1 1 0; min-width: 0; height: 52px; min-height: 52px; background: var(--c-bg); color: var(--c-primary); }
.icon-btn.nav-btn:hover:not(:disabled) { background: var(--c-line); color: var(--c-primary); }
.icon-btn.nav-btn:disabled { background: var(--c-bg); color: var(--c-disabled); }
.icon-btn.nav-btn.primary { background: var(--c-primary); color: #FFFFFF; }
.icon-btn.nav-btn.primary:hover:not(:disabled) { background: var(--c-primary-deep); color: #FFFFFF; }
.icon-btn.nav-btn.primary:disabled { background: var(--c-line); color: var(--c-disabled); }