@charset "utf-8";
/* 九年级英语配套录音 —— 视觉风格「课本同源」
   规则：
   1. 尺寸一律用 rem/em，不用 px（焦点环的 max(3px,...) 是下限兜底，例外）。
      根字号 = calc(1rem * var(--ui-scale))，1rem 在根元素解析为浏览器默认字号，
      也就是用户自己的无障碍设置 —— 我们放大它，而不是覆盖它。
   2. 焦点环用 outline，绝不用 box-shadow：forced-colors 模式会剥离 box-shadow。
   3. 不用固定高度、不用 overflow:hidden 包文字，满足 WCAG 1.4.12 文本间距。
*/

/* ---------------------------------------------------------- 主题变量 */

:root {
  --ui-scale: 1;

  --bg:        #FAF7F0;   /* 米白书页色 */
  --fg:        #1A1A1A;
  --fg-soft:   #4A4A4A;
  --panel:     #FFFFFF;
  --line:      #D6CDBB;
  --line-hard: #B8AC93;
  --brand:     #1A3E7C;   /* 教材封面深蓝 */
  --brand-fg:  #FFFFFF;
  --brand-dim: #C8D6EE;
  --accent:    #1A3E7C;
  --focus:     #B23A00;
  --focus-on-brand: #FFD54A;
  --row-hover: #F0EADD;
  --playing-bg:#E8EFF9;
  --border-w:  0.0625rem;
}

:root[data-theme="hc-dark"] {
  --bg: #000000; --fg: #FFFFFF; --fg-soft: #E0E0E0; --panel: #000000;
  --line: #FFFFFF; --line-hard: #FFFFFF; --brand: #000000; --brand-fg: #FFFFFF;
  --brand-dim: #FFFFFF; --accent: #FFFFFF; --focus: #FFFF00; --focus-on-brand: #FFFF00;
  --row-hover: #202020; --playing-bg: #003355; --border-w: 0.125rem;
}

:root[data-theme="yellow-on-black"] {
  --bg: #000000; --fg: #FFFF00; --fg-soft: #E8E800; --panel: #000000;
  --line: #FFFF00; --line-hard: #FFFF00; --brand: #000000; --brand-fg: #FFFF00;
  --brand-dim: #FFFF00; --accent: #FFFF00; --focus: #00FFFF; --focus-on-brand: #00FFFF;
  --row-hover: #262600; --playing-bg: #003333; --border-w: 0.125rem;
}

:root[data-theme="hc-light"] {
  --bg: #FFFFFF; --fg: #000000; --fg-soft: #000000; --panel: #FFFFFF;
  --line: #000000; --line-hard: #000000; --brand: #FFFFFF; --brand-fg: #000000;
  --brand-dim: #000000; --accent: #000000; --focus: #0000CC; --focus-on-brand: #0000CC;
  --row-hover: #E8E8E8; --playing-bg: #DDDDDD; --border-w: 0.125rem;
}

/* 系统级高对比偏好：用户没手动选主题时自动加强 */
@media (prefers-contrast: more) {
  :root:not([data-theme]) {
    --line: #000000; --line-hard: #000000; --fg-soft: #000000;
    --border-w: 0.125rem; --focus: #0000CC;
  }
}

:root[data-scale="125"] { --ui-scale: 1.25; }
:root[data-scale="150"] { --ui-scale: 1.5; }
:root[data-scale="200"] { --ui-scale: 2; }
:root[data-scale="250"] { --ui-scale: 2.5; }

/* ---------------------------------------------------------- 基础 */

html {
  font-size: calc(1rem * var(--ui-scale));
  background: var(--bg);
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--fg);
  font-family: system-ui, -apple-system, "Segoe UI", "PingFang SC",
               "Microsoft YaHei", "Source Han Sans SC", "Noto Sans CJK SC", sans-serif;
  font-size: 1rem;
  line-height: 1.6;
  text-align: left;          /* 绝不 justify：文字河流对低视力和阅读障碍都是负担 */
}

:lang(en) { letter-spacing: 0.02em; }   /* 中文不加字间距 */

* { box-sizing: border-box; }

h1, h2, h3 { line-height: 1.4; }

a { color: var(--accent); }

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

/* ---------------------------------------------------------- 焦点 */

:focus { outline: max(3px, 0.2em) solid var(--focus); outline-offset: 0.125rem; }
:focus:not(:focus-visible) { outline-color: transparent; }
:focus-visible { outline: max(3px, 0.2em) solid var(--focus); outline-offset: 0.125rem; }

.banner :focus-visible, #tabs :focus-visible { outline-color: var(--focus-on-brand); }

.skip {
  position: absolute; left: -100vw; top: 0; z-index: 100;
  background: var(--panel); color: var(--fg);
  padding: 0.75em 1.25em; border: 0.1875rem solid var(--fg); font-weight: 700;
}
.skip:focus { left: 0.5rem; top: 0.5rem; }

/* ---------------------------------------------------------- 横幅 */

.banner {
  background: var(--brand); color: var(--brand-fg);
  border-bottom: 0.25rem solid var(--line-hard);
  padding: 1.1em 1.2em 1em;
}
.banner p { margin: 0; }
.banner-book { font-size: 0.85em; letter-spacing: 0.08em; color: var(--brand-dim); }
.banner-name { font-size: 2em; font-weight: 800; letter-spacing: 0.04em; margin: 0.1em 0 0.15em; }
.banner-vol  { font-size: 0.95em; color: var(--brand-dim); }

/* ---------------------------------------------------------- 选项卡 */

#tabs {
  background: var(--brand);
  border-bottom: var(--border-w) solid var(--line-hard);
}
#tabs ul {
  list-style: none; margin: 0 auto; padding: 0 0.6em;
  max-width: 70rem; display: flex; flex-wrap: wrap; gap: 0.2em;
}
#tabs a {
  display: block;
  padding: 0.7em 1.1em;
  min-height: 2.75rem;
  color: var(--brand-dim);
  text-decoration: none;
  font-size: 1.05em; font-weight: 700;
  /* 下划线用 border：forced-colors 下 border 存活，背景色会被剥离 */
  border-bottom: 0.3em solid transparent;
}
#tabs a:hover { color: var(--brand-fg); }
#tabs a[aria-current="page"] {
  color: var(--brand-fg);
  border-bottom-color: var(--brand-fg);
}

/* ---------------------------------------------------------- 主体 */

main {
  display: block;
  max-width: 70rem; margin: 0 auto; padding: 1.2em 1em 3em;
}
main:focus { outline: none; }

h1 {
  font-size: 1.35em; font-weight: 700; margin: 0.2em 0 0.5em; color: var(--fg);
}
.h1-sub { display: block; font-size: 0.85em; font-weight: 400; color: var(--fg-soft); }

.intro { color: var(--fg-soft); margin: 0 0 1.2em; max-width: 46em; }

h2 { font-size: 1.5em; margin: 0 0 0.2em; }
h2:focus { outline: none; }
.secdesc { color: var(--fg-soft); margin: 0 0 1.2em; max-width: 46em; }

/* ---------------------------------------------------------- 通用按钮 */

.big-btn {
  font: inherit; font-weight: 700;
  color: var(--fg); background: var(--panel);
  border: var(--border-w) solid var(--line-hard);
  border-radius: 0.25em;
  padding: 0.65em 1.1em; min-height: 2.75rem;
  cursor: pointer;
}
.big-btn:hover { background: var(--row-hover); }

#resume-wrap { margin: 0 0 1em; }

/* ---------------------------------------------------------- 学习时长 */

.timer {
  display: flex; flex-wrap: wrap; align-items: center;
  gap: 0.5em 1em;
  background: var(--panel);
  border: var(--border-w) solid var(--line);
  border-left: 0.35em solid var(--brand);
  border-radius: 0.25em;
  padding: 0.6em 0.9em;
  margin: 0 0 1em;
}
.timer-line { margin: 0; flex: 1 1 16em; }
.tm-k { color: var(--fg-soft); font-size: 0.92em; margin-right: 0.4em; }
.timer strong { font-weight: 700; font-variant-numeric: tabular-nums; }
.tm-sep { color: var(--line-hard); margin: 0 0.8em; }
#hist-panel { flex: 1 1 100%; }
.histlist { list-style: none; margin: 0.5em 0 0; padding: 0; max-width: 24em; }
.histlist li {
  padding: 0.4em 0;
  border-bottom: var(--border-w) solid var(--line);
  font-variant-numeric: tabular-nums;
}
.histlist li:last-child { border-bottom: 0; }

/* ---------------------------------------------------------- 设置 */

.settings { margin: 0 0 1.6em; }
.settings-panel {
  border: var(--border-w) solid var(--line);
  background: var(--panel);
  padding: 0.9em 1em; margin-top: 0.6em;
  border-radius: 0.25em;
}
.setrow {
  display: flex; flex-wrap: wrap; align-items: center;
  gap: 0.5em; padding: 0.5em 0;
  border-bottom: var(--border-w) solid var(--line);
}
.setrow:last-of-type { border-bottom: 0; }
.setlabel { font-weight: 700; min-width: 6em; }
.setnow { color: var(--fg-soft); }
.opt {
  font: inherit; color: var(--fg); background: var(--bg);
  border: var(--border-w) solid var(--line-hard); border-radius: 0.25em;
  padding: 0.5em 0.9em; min-height: 2.75rem; min-width: 2.75rem; cursor: pointer;
}
.opt:hover { background: var(--row-hover); }
.opt[aria-pressed="true"] {
  background: var(--brand); color: var(--brand-fg);
  border-color: var(--brand); font-weight: 700;
}
.chk { display: inline-flex; align-items: center; gap: 0.4em; min-height: 2.75rem; cursor: pointer; }
.chk input { width: 1.15em; height: 1.15em; }
.sethint { margin: 0.7em 0 0; }

/* ---------------------------------------------------------- 单元 */

.unit { border-bottom: var(--border-w) solid var(--line); }
.unit-h { margin: 0; font-size: 1em; font-weight: 400; }

.unit-toggle {
  display: flex; align-items: center; flex-wrap: wrap; gap: 0.4em 0.9em;
  width: 100%; min-height: 4rem;
  font: inherit; text-align: left; cursor: pointer;
  background: transparent; color: var(--fg);
  border: 0; border-left: 0.35em solid transparent;
  padding: 0.85em 0.6em;
}
.unit-toggle:hover { background: var(--row-hover); }
.unit-toggle[aria-expanded="true"] { border-left-color: var(--brand); background: var(--row-hover); }

.unit-num {
  flex: none;
  min-width: 2.2em; text-align: center;
  font-size: 1.9em; font-weight: 800; line-height: 1;
  color: var(--brand);
}
.unit-label { flex: 1 1 14em; font-size: 1.1em; font-weight: 700; }
.unit-meta  { flex: none; color: var(--fg-soft); font-size: 0.95em; }

.unit-toggle::after {
  content: "＋"; flex: none; font-size: 1.2em; color: var(--fg-soft);
}
.unit-toggle[aria-expanded="true"]::after { content: "－"; }

.unit-panel { padding: 0 0 0.9em 0.6em; }

/* ---------------------------------------------------------- 音轨行 */

.tracks, .flatlist, .cues { list-style: none; margin: 0; padding: 0; }
.tracks > li, .flatlist > li { margin: 0 0 0.35em; }
.flatlist > li {
  border-bottom: var(--border-w) solid var(--line);
  padding-bottom: 0.5em; margin-bottom: 0.5em;
}

.play {
  display: flex; align-items: center; flex-wrap: wrap; gap: 0.3em 0.7em;
  width: 100%; min-height: 3rem;
  font: inherit; text-align: left; cursor: pointer;
  background: var(--panel); color: var(--fg);
  border: var(--border-w) solid var(--line);
  border-radius: 0.25em;
  padding: 0.6em 0.8em;
}
.play:hover { background: var(--row-hover); }
.play.row { min-height: 3.5rem; font-size: 1.05em; }

.pl-icon {
  flex: none; width: 1.6em; height: 1.6em;
  border: 0.125em solid currentColor; border-radius: 50%;
  position: relative;
}
.pl-icon::before {
  content: ""; position: absolute; left: 55%; top: 50%;
  transform: translate(-50%, -50%);
  border-left: 0.5em solid currentColor;
  border-top: 0.32em solid transparent;
  border-bottom: 0.32em solid transparent;
}
.play.is-playing .pl-icon::before {
  border: 0; left: 50%;
  width: 0.5em; height: 0.62em;
  border-left: 0.18em solid currentColor;
  border-right: 0.18em solid currentColor;
}
.play.is-playing {
  background: var(--playing-bg);
  border-color: var(--brand); border-left: 0.35em solid var(--brand);
  font-weight: 700;
}

.pl-verb { flex: none; }
.pl-text { flex: 1 1 12em; }
.pl-dur  { flex: none; color: var(--fg-soft); font-variant-numeric: tabular-nums; }
/* 页码只给明眼老师扫读用，不进可访问名（aria-hidden 在 HTML 里） */
.pl-page { flex: none; color: var(--fg-soft); font-size: 0.88em; font-variant-numeric: tabular-nums; }

.stems {
  list-style: none; margin: 0.35em 0 0.6em 2.6em; padding: 0;
  color: var(--fg-soft); font-size: 0.92em;
}
.stems li { margin: 0.15em 0; }
.stems li::before { content: "· "; }

.rowsub { margin: 0.25em 0 0 2.6em; color: var(--fg-soft); font-size: 0.92em; }

.cues { display: flex; flex-wrap: wrap; gap: 0.4em; margin: 0.45em 0 0 2.6em; }
.cue {
  font: inherit; font-size: 0.92em;
  color: var(--fg); background: var(--bg);
  border: var(--border-w) solid var(--line-hard); border-radius: 1em;
  padding: 0.4em 0.9em; min-height: 2.75rem; cursor: pointer;
}
.cue:hover { background: var(--row-hover); }

/* 无 JS 兜底链接：有 JS 时隐藏 */
.fallback { display: block; padding: 0.5em 0; }
html.js .fallback { display: none; }
html.js .play, html.js .cue { display: flex; }
html.no-js .play, html.no-js .cue, html.no-js #player,
html.no-js .settings, html.no-js #resume-wrap { display: none !important; }
html.no-js .unit-panel { display: block !important; }
html.no-js .tabsec[hidden] { display: block !important; }

/* ---------------------------------------------------------- 播放控制 */

#player {
  position: sticky; bottom: 0; z-index: 20;
  background: var(--panel);
  border-top: 0.25rem solid var(--brand);
  padding: 0.7em 1em 0.9em;
}
#player:focus { outline: none; }
.now {
  margin: 0 0 0.5em; font-weight: 700;
  max-width: 70rem; margin-left: auto; margin-right: auto;
}
.ctrls, .seekrow {
  display: flex; flex-wrap: wrap; align-items: center; gap: 0.5em;
  max-width: 70rem; margin: 0 auto;
}
.seekrow { margin-top: 0.5em; }
.ct {
  font: inherit; color: var(--fg); background: var(--bg);
  border: var(--border-w) solid var(--line-hard); border-radius: 0.25em;
  padding: 0.6em 1em; min-height: 2.75rem; cursor: pointer;
}
.ct:hover { background: var(--row-hover); }
.ct-main { font-weight: 700; background: var(--brand); color: var(--brand-fg); border-color: var(--brand); }
.ct-main:hover { filter: brightness(1.15); }
.ct[disabled] { opacity: 0.5; cursor: default; }

#seek { flex: 1 1 12em; min-width: 8em; height: 2.75rem; accent-color: var(--brand); }
.tcur, .ttot { font-variant-numeric: tabular-nums; color: var(--fg-soft); min-width: 3em; }
.rate { display: inline-flex; align-items: center; gap: 0.4em; }
.rate select { font: inherit; padding: 0.45em; min-height: 2.75rem; }

/* ---------------------------------------------------------- 页脚 */

footer {
  max-width: 70rem; margin: 0 auto; padding: 1.5em 1em 2.5em;
  color: var(--fg-soft); font-size: 0.92em;
  border-top: var(--border-w) solid var(--line);
}
footer p { margin: 0.3em 0; }

/* ---------------------------------------------------------- 窄屏收紧播放条 */
/* 手机上固定播放条不能占掉半屏。按钮仍保持 2.75rem 最小高度（触控目标），
   只收紧内边距和间距，让五个控件排成两行而不是五行。 */
@media (max-width: 34em) {
  #player { padding: 0.45em 0.6em 0.6em; }
  .now { font-size: 0.95em; margin-bottom: 0.4em; }
  .ctrls, .seekrow { gap: 0.3em; }
  .seekrow { margin-top: 0.4em; }
  .ct { padding: 0.5em 0.55em; font-size: 0.95em; }
  /* 进度条这一行必须挤在一行里，否则播放条会吃掉三分之一屏 */
  .seekrow { flex-wrap: nowrap; }
  .tcur, .ttot { min-width: 0; font-size: 0.85em; }
  #seek { min-width: 4em; }
  .rate { font-size: 0.9em; flex: none; }
  .rate select { padding: 0.35em 0.2em; }
  /* select 有 aria-label，隐藏这两个字不影响读屏 */
  .rate > span {
    position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
    overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
  }
  main { padding: 1em 0.7em 2.5em; }
  h1 { font-size: 1.2em; }
  .unit-toggle { padding: 0.75em 0.4em; }
  .unit-num { font-size: 1.6em; min-width: 1.6em; }
  .stems, .rowsub, .cues { margin-left: 1.2em; }
}

/* ---------------------------------------------------------- 大字号时的换行 */

:root[data-scale="200"] .unit-toggle,
:root[data-scale="250"] .unit-toggle,
:root[data-scale="200"] .play,
:root[data-scale="250"] .play {
  flex-direction: column; align-items: flex-start;
}
:root[data-scale="250"] .banner-name { font-size: 1.5em; }

/* ---------------------------------------------------------- 系统偏好 */

@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; animation: none !important; scroll-behavior: auto !important; }
}

@media (forced-colors: active) {
  /* 背景色会被系统剥离，靠 border 传达状态 —— 本设计的选中态本来就是 border */
  .play.is-playing { border-width: 0.25em; }
  .unit-toggle[aria-expanded="true"] { border-left-width: 0.35em; }
  .opt[aria-pressed="true"] { border-width: 0.25em; }
  #tabs a[aria-current="page"] { border-bottom-width: 0.3em; }
  :focus-visible { outline: max(3px, 0.2em) solid; }
}

@media print {
  #player, #tabs, .settings, .skip, #resume-wrap, .fallback { display: none !important; }
  .tabsec[hidden] { display: block !important; }
  .unit-panel { display: block !important; }
  body { background: #fff; color: #000; font-size: 11pt; }
  .banner { background: #fff; color: #000; border-bottom: 2pt solid #000; }
  .banner-book, .banner-vol { color: #000; }
  .play { border: 0; padding: 0.1em 0; background: none; }
  .pl-icon, .unit-toggle::after { display: none; }
  a { text-decoration: none; color: #000; }
}