/* Layout: the textbook page itself is the reading surface; invisible word hotspots and speaker badges sit on top of it */
:root {
  --bg: #eef1e8;
  --paper: #ffffff;
  --ink: #23302a;
  --muted: #66746b;
  --line: #d7dfd0;
  --unit: #5f9e3a;
  --spk: #e0513b;
  --hl: rgba(255, 214, 64, .38);
  --hover: rgba(95, 158, 58, .22);
  --zh: "PingFang SC", "Hiragino Sans GB", "Noto Sans SC", system-ui, sans-serif;
}
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) {
  --bg: #151a16; --paper: #1f2620; --ink: #e6ece4; --muted: #9aa89e; --line: #2f3a31; --unit: #8cc867; color-scheme: dark } }
:root[data-theme="dark"] { --bg: #151a16; --paper: #1f2620; --ink: #e6ece4; --muted: #9aa89e; --line: #2f3a31; --unit: #8cc867; color-scheme: dark }

body { background: var(--bg); color: var(--ink); font-family: var(--zh); }
.wrap { max-width: 860px; margin: 0 auto; padding-block: 16px 220px;
  padding-left: max(16px, env(safe-area-inset-left, 0px)); padding-right: max(16px, env(safe-area-inset-right, 0px));
  display: grid; gap: 14px; }
.top { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.top h1 { font-size: 20px; margin: 0 8px 0 0; }
.tab { font: 600 15px var(--zh); padding: 8px 16px; border-radius: 999px; border: 1px solid var(--line); background: var(--paper); color: var(--ink); cursor: pointer; }
.tab[aria-selected="true"] { background: var(--unit); border-color: var(--unit); color: var(--paper); }
.bar { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; background: var(--paper); border: 1px solid var(--line); border-radius: 14px; padding: 10px 12px; }
.bar audio { flex: 1 1 260px; min-width: 0; height: 36px; }
.bar .lbl { font-size: 14px; color: var(--muted); }
.btn { font: 500 14px var(--zh); padding: 7px 12px; border-radius: 10px; border: 1px solid var(--line); background: var(--paper); color: var(--ink); cursor: pointer; }
.btn.on { border-color: var(--unit); color: var(--unit); font-weight: 600; }
button:focus-visible { outline: 3px solid var(--unit); outline-offset: 2px; }

.page { position: relative; border-radius: 6px; overflow: hidden; box-shadow: 0 1px 3px rgba(0,0,0,.15); background: #fff; }
.page img { display: block; width: 100%; height: auto; }
.wd { position: absolute; border-radius: 3px; cursor: pointer; }
.wd:hover, .wd.cur { background: var(--hover); }
.wd.on { background: var(--hl); }
.spk { position: absolute; padding: 0; border: 0; background: transparent; cursor: pointer; display: grid; place-items: center; }
.spk::before { content: ""; position: absolute; inset: -10px; }  /* larger touch target */
.spk span { width: 100%; height: 100%; border-radius: 50%; background: var(--spk); color: #fff; display: grid; place-items: center; box-shadow: 0 1px 3px rgba(0,0,0,.3); }
.spk svg { width: 62%; height: 62%; }
.spk.playing span { background: var(--unit); }

.tip { position: fixed; z-index: 30; max-width: min(300px, calc(100vw - 32px)); background: var(--ink); color: var(--bg);
  border-radius: 10px; padding: 8px 12px; display: grid; gap: 1px; box-shadow: 0 6px 20px rgba(0,0,0,.25); pointer-events: none; }
.tip b { font-size: 18px; } .tip i { font-style: normal; opacity: .75; } .tip span { font-size: 15px; }

.sheet { position: fixed; left: 0; right: 0; bottom: 0; z-index: 20; background: var(--paper); border-top: 1px solid var(--line);
  box-shadow: 0 -6px 20px rgba(0,0,0,.12);
  padding-block: 14px calc(14px + env(safe-area-inset-bottom, 0px));
  padding-left: max(16px, env(safe-area-inset-left, 0px)); padding-right: max(16px, env(safe-area-inset-right, 0px)); }
.sheet-in { max-width: 860px; margin: 0 auto; display: grid; gap: 6px; }
.sheet .en { font-size: 19px; line-height: 1.45; font-weight: 600; }
.sheet .zh { font-size: 17px; line-height: 1.5; }
.sheet .note { font-size: 15px; line-height: 1.6; color: var(--muted); border-left: 3px solid var(--unit); padding-left: 10px; }
.sheet .row { display: flex; gap: 8px; justify-content: flex-end; }
.hint { font-size: 13px; color: var(--muted); margin: 0; }

* { box-sizing: border-box; }
[hidden] { display: none !important; }
body { margin: 0; }
a { color: var(--unit); text-underline-offset: 3px; }
.wrap { padding-bottom: 32px; }
.wrap.lesson { padding-bottom: 260px; }
.page { container-type: inline-size; }
.wd { padding: 0; border: 0; background: transparent; z-index: 2; }
.highlight { position: absolute; background: var(--hl); pointer-events: none; z-index: 1; }
.spk { width: 44px; height: 44px; transform: translate(-50%,-50%); z-index: 3; }
.spk::before { display: none; }
.spk span { min-width: 7px; min-height: 7px; pointer-events: none; }
.spk svg { pointer-events: none; }
.sheet { max-height: 48dvh; overflow-y: auto; }
.tip { max-width: min(300px,calc(100vw - 16px)); }
select { max-width: 100%; min-height:44px; font: inherit; padding: 8px; border: 1px solid var(--line); border-radius: 8px; background: var(--paper); color: var(--ink); }
.top select:last-child { flex: 1 1 230px; min-width: 0; }
.btn, .tab { min-height: 44px; }
.bar audio { width: 100%; }
.book-card,.unit-card,.resume { display:block; padding: 22px; border:1px solid var(--line); border-radius:16px; background:var(--paper); }
.book-card { text-decoration:none; border-top:8px solid var(--unit); }
.book-card h2 { margin-top:4px; }
.unit-card { border-top:7px solid var(--unit); }
.unit-card h2 { color:var(--unit); margin-top:0; }
.unit-card ol { list-style:none; padding:0; margin:0; }
.unit-card li a { display:flex; gap:12px; padding:14px 0; text-decoration:none; border-top:1px solid var(--line); color:var(--ink); }
.unit-card li span { flex:0 0 78px; color:var(--unit); }
.unit-grid { display:grid; gap:18px; grid-template-columns:repeat(auto-fit,minmax(min(100%,320px),1fr)); }
nav.bottom { display:flex; flex-wrap:wrap; gap:16px; justify-content:space-between; }
#status { color:#ad3428; min-height:20px; }
@media (max-width:480px){ .wrap { padding-left:8px; padding-right:8px; } .top h1{font-size:19px;} .sheet .en{font-size:17px;} }
/* Grid tracks must shrink below native select/audio intrinsic widths on phones. */
.wrap, .sheet-in { grid-template-columns: minmax(0, 1fr); }
.wrap > *, .top > *, .bar > * { min-width: 0; }
#pages { grid-template-columns: minmax(0, 1fr); }
.bar audio { max-width: 100%; }
/* Let words stay reachable under enlarged speaker hit areas. The page handler
   resolves overlapping 44px targets by the nearest visible speaker. */
.spk { pointer-events: none; }
.spk span { pointer-events: auto; }