/* 叮叮点歌 dingsong.ai 操作样稿 v1⁠·背景音乐页（BGM 音乐库，FM 114.8）2026-10-21
   加载顺序：ds/tokens.css → ds/bundle.css → shell.css → 这支。只用设计系统的 token：颜色 var(--…)、间距 var(--space-…)、圆角 var(--radius-…)；
   字级只用字级表的值（后面注明级别）。借用的组件：Chip、Segmented（.seg）、Button、RequestSlip（.slip .flow）、Toast、SectionHead 的小标写法。
   新组件（之后补进设计系统）：用途格（.tiles）、用途清单（.uses）、段落标签列（.l3）、筛选栏（.flt）、曲子列（.trk）、下载单（.dl）、补曲中（.bgm-fill）、
   当季（.now-row）、小播放器（.bgm-player）、能量直条（.nrg）、样稿注记（.mock-notes）。 */

/* 程序会改的三个量（播放器高度、手机底部五台高度、iPhone 底部安全区）：默认 0 */
html { --pl-h: 0px; --tabbar-h: 0px; --pl-safe: 0px; }

/* ---------- 图标（bgm-icons.js：24 格、线宽不随大小变） ---------- */
.bi { fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; flex: none; }
.bi * { vector-effect: non-scaling-stroke; }
.bi .fill { fill: currentColor; stroke: none; }
.bi-g { width: 36px; height: 36px; }
.bi-u { width: 26px; height: 26px; }
.bi-i { width: 22px; height: 22px; stroke-width: 1.6; }
.bi-fallback { color: var(--ink-2); }                     /* 还没专属图的用途：先放那一组的图，淡一点 */
.nrg { width: 14px; height: 12px; flex: none; vertical-align: -1px; }
.nrg rect { fill: none; stroke: currentColor; stroke-width: 1.2; vector-effect: non-scaling-stroke; }
.nrg .on { fill: currentColor; }

/* ---------- 频道头 ---------- */
/* 第 3 轮 R3-B1：频道头上下收一点，曲子才进得了第一个画面 */
.bgm-head .wrap { padding-block: var(--space-22) var(--space-10); }
.bgm-home, .bgm-dhead { display: grid; gap: var(--space-10); }
.bgm-dhead:empty { display: none; }
html.bgm-deep .bgm-home { display: none; }   /* 点进某一类以后：首页那一组（大标“BGM 音乐库”、第一句、免费说明）收起来，换成那一类自己的页名（第 3 轮 R3-B2） */
/* 那一类自己的页名：上方小字是面包屑（FM 114.8⁠·BGM 音乐库 › 学校与教学，每段都能点），下面 h1＝这一类 */
.bgm-crumb { display: flex; flex-wrap: wrap; align-items: baseline; column-gap: var(--space-8); font: 800 15px/1.4 var(--font-display); letter-spacing: .08em; color: var(--red-ink); }
.bgm-crumb a { color: var(--red-ink); text-decoration: none; padding-block: var(--space-12); }   /* 行内元素的上下内距：点击范围约 44px 高、不撑高这一行 */
.bgm-crumb a:hover { text-decoration: underline; text-underline-offset: 4px; }
.bgm-crumb .sep { color: var(--ink-2); }
.bgm-dhead .vhead h1 { font-size: clamp(32px, 4.4vw, 52px); line-height: 1.15; font-weight: 700; letter-spacing: -.01em; }   /* page-title：一页一个 h1 */
.bgm-dhead .vhead h1:focus { outline: none; }
.bgm-dhead .vsub { margin-top: 0; }
.bgm-head .kick { font: 800 15px/1 var(--font-display); letter-spacing: .16em; color: var(--red-ink); }   /* kicker：跟这一台的名字一致（FM 114.8⁠·背景音乐） */
.bgm-head h1 { font-size: clamp(32px, 4.4vw, 52px); line-height: 1.1; font-weight: 700; letter-spacing: -.01em; }   /* page-title */
.bgm-head .lead { font-size: 18px; line-height: 1.7; color: var(--ink); max-width: 34em; }   /* lead-text：第一句就讲这页能做什么 */
.bgm-promise { font-size: 16px; line-height: 1.7; color: var(--ink-2); max-width: 46em; }   /* body-small */
html.bgm-deep .bgm-try { display: none; }   /* 点进某一类以后（分享来的链接也一样）：“试试”收掉 */
.bgm-promise a { font-weight: 700; text-underline-offset: 3px; }
.bgm-promise b { color: var(--ink); font-weight: 700; }   /* 读者最先想知道的：要不要钱、要不要注册（读者测试 10-22） */

/* ---------- 每首一页的开头（/bgm/<代号>/，设计评审 10-25 必修 1～3）：曲名当大标，播放与下载整首在第一个画面；不加框、不加底色 ---------- */
.bgm-pin .wrap { display: grid; gap: var(--space-10); padding-block: var(--space-22) var(--space-24); }
/* 手机：补曲后有几首的“用在…”变成三行，320×568 的红色“下载整首 MP3”被挤到底部五台下面 2px（stw-5、stw-13、gam-26）→ 上缘与间距收一点 */
@media (max-width: 640px) { .bgm-pin .wrap { gap: var(--space-8); padding-top: var(--space-14); } }
.bgm-pin .kick { font: 800 15px/1 var(--font-display); letter-spacing: .16em; color: var(--red-ink); }
.bgm-pin .crumb { margin-bottom: 0; }
/* 第 4 轮品味 4：顶端一行面包屑（跟大类页同一个样子）；品味 1：1024 以上两栏，右边是整首波形 */
.pin-top, .pin-l { display: grid; gap: var(--space-10); }
@media (max-width: 640px) { .pin-top, .pin-l { gap: var(--space-8); } }
.pin-crumb { margin-block: calc(-1 * var(--space-10)) calc(-1 * var(--space-6)); }   /* 面包屑的链接上下各有 12px 点击范围：不撑开跟曲名的距离 */
.pin-sub a { color: inherit; text-underline-offset: 3px; }
.pin-wave { display: none; }
@media (min-width: 1024px) {
  .pin-top { grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr); column-gap: var(--space-44); align-items: center; }
  .pin-wave:not([hidden]) { display: grid; gap: var(--space-8); }
}
/* 第 5 轮品味 4：1 分钟以上的曲子，手机与平板也放一条 44px 高的细波形，排在“播放／下载”那一列下面（左栏拆开排：display: contents＋order） */
@media (max-width: 1023px) {
  .pin-l { display: contents; }
  .pin-l > .pin-more { order: 2; }
  .pin-wave.pw-long:not([hidden]) { display: grid; gap: var(--space-4); order: 1; }
  .pin-wave .pw-lane { height: 44px; }
  .pin-wave .pw-help { display: none; }   /* 手机上一行说明太占位置；读屏的名称里已经说了“点波形从那里播” */
}
.pw-lane { position: relative; height: 120px; cursor: pointer; touch-action: manipulation; border-radius: var(--radius-6); }
.pw-svg { display: block; width: 100%; height: 100%; }
.pw-all, .pw-in { fill: none; stroke-width: 3.2; stroke-linecap: round; vector-effect: non-scaling-stroke; }
.pw-all { stroke: var(--line-strong); }
.pw-in { stroke: var(--ink); }   /* 播过的那一段：墨色加深（第 5 轮品味 3：原本整段实心红，同一画面已有红色下载钮与底部播放键）；红色只留给播放线 */
.pw-head { position: absolute; top: 0; bottom: 0; left: var(--p, 0%); width: 2px; transform: translateX(-50%); background: var(--red-ink); opacity: 0; pointer-events: none; }
.pw-lane.on .pw-head { opacity: 1; }
.pw-lane:hover .pw-all { stroke: var(--ink-2); }
.pw-ruler { position: relative; height: 18px; font: 400 12px/1 var(--font-mono); color: var(--ink-2); }   /* mono-label：时间刻度 */
.pw-ruler span { position: absolute; top: 0; transform: translateX(-50%); white-space: nowrap; }
.pw-ruler span:first-child { transform: none; }
.pw-ruler .pw-end { right: 0; transform: none; }
.pw-help { font-size: 14px; line-height: 1.5; color: var(--ink-2); }   /* fine-print */
.bgm-pin h1 { font-size: clamp(32px, 4.4vw, 52px); line-height: 1.15; font-weight: 700; letter-spacing: -.01em; }   /* page-title */
.bgm-pin h1:focus { outline: none; }
.pin-info { font-size: 18px; line-height: 1.6; color: var(--ink); }   /* lead-text：长度⁠·速度⁠·气氛⁠·能量 */
.pin-sub { font-size: 15px; line-height: 1.7; color: var(--ink-2); max-width: 46em; }   /* body-small：主奏、拍子、结尾；用在哪里 */
.pin-acts { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-10) var(--space-14); margin-top: var(--space-4); }
.pin-acts .p-play { min-height: 48px; padding: 0 var(--space-18); font-size: 16px; }
.pin-acts .p-play .gl { width: 18px; height: 18px; }
.pin-acts .btn-main { min-height: 48px; }
.pin-more { display: grid; justify-items: start; }
.pin-more > .trk-dl, .pin-more > .dl { grid-area: auto; }   /* 曲子列里的 grid-area（dl、panel）在这里没有对应的格子，不拿掉会叠在一起 */
.pin-more .dl { justify-self: stretch; }
.pin-more .trk-dl { white-space: normal; text-align: left; line-height: 1.3; padding-block: var(--space-8); }
.pin-sim-h, .pin-lib h2 { margin-top: var(--space-18); font-size: 22px; line-height: 1.3; }   /* item-title */
.pin-lib p, .pin-sim-p { font-size: 16px; line-height: 1.6; color: var(--ink-2); }   /* body-small */
.pin-lib { display: grid; gap: var(--space-8); }
.pin-lib-go { margin-top: var(--space-4); }
/* 第 2 轮（网站主人同意每首一页精简）：在这一首的网址上，页面只留这一首自己的内容；音乐库的区块收起来（按“回到音乐库”不重新加载就回来） */
html.bgm-pinview main > :not(.bgm-pin) { display: none; }
html.bgm-trackpage main > :not(.bgm-pin):not(.bgm-head) { display: none; }   /* 每首一页（build.mjs 3c 加的）：程序跑起来前只留音乐库的头（h1 已是曲名），不先闪出整套音乐库；不跑程序的读者也还看得到曲名 */
.bgm-pin .trk-list { margin-top: 0; }

/* ---------- 搜索 ---------- */
.bgm-search-wrap { display: grid; gap: var(--space-10); padding-bottom: var(--space-16); }
.bgm-search { display: flex; gap: var(--space-8); max-width: 760px; }
.q-field { position: relative; flex: 1 1 auto; min-width: 0; }
.q-field input { width: 100%; min-height: 48px; margin: 0; padding: 0 var(--space-12) 0 var(--space-44); border: 1.5px solid var(--line-strong); border-radius: var(--radius-pill); background: var(--bg); color: var(--ink); font: 400 17px/1.3 var(--font-body); -webkit-appearance: none; appearance: none; }   /* 17px：iPhone 不会自动放大 */
.q-field input::placeholder { color: var(--ink-2); opacity: 1; }
.q-field input:hover { border-color: var(--ink); }
.q-field .q-ico { position: absolute; left: var(--space-16); top: 50%; width: 20px; height: 20px; transform: translateY(-50%); color: var(--ink-2); pointer-events: none; }
.bgm-search .btn { min-height: 48px; }
.bgm-try { display: flex; align-items: center; gap: var(--space-8); overflow-x: auto; overscroll-behavior-x: contain; scrollbar-width: none; padding-block: var(--space-4); }
.bgm-try::-webkit-scrollbar { display: none; }
.bgm-try > span { flex: none; font-size: 14px; color: var(--ink-2); }   /* fine-print */
.bgm-try .chip { flex: none; min-height: 40px; padding-inline: var(--space-14); font-size: 14px; }
@media (pointer: coarse) { .bgm-try .chip { min-height: var(--tap-min); } }
@media (max-width: 640px) {   /* 手机：频道头、搜索收紧一点，第一屏看得到两排用途格 */
  .bgm-head h1, .bgm-pin h1, .bgm-dhead .vhead h1 { font-size: 34px; }   /* 各页页名在手机统一 34px（设计评审 10-25：各页 32／34／40／52px 不一） */
  .bgm-head .wrap { padding-block: var(--space-18) var(--space-6); }
  .bgm-home, .bgm-dhead { gap: var(--space-8); }
  .bgm-head .lead { font-size: 17px; }
  .bgm-promise { font-size: 15px; line-height: 1.6; }
  .bgm-search-wrap { gap: var(--space-4); padding-bottom: var(--space-8); }
  .bgm-try { padding-block: 0; }
}
.q-banner { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-8) var(--space-12); padding: var(--space-10) 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); font-size: 16px; }
.q-banner b { font-weight: 700; }
.q-banner .chip { cursor: default; }
.q-banner .q-x { cursor: pointer; }
.q-song { flex-basis: 100%; font-size: 16px; line-height: 1.6; color: var(--ink); }   /* 搜的是有名的那首歌、这里没有：直接讲（读者测试 10-24） */

/* ---------- 区段 ---------- */
.bgm-sec { padding-block: var(--space-22); border-top: 1px solid var(--line); }
@media (max-width: 640px) { .bgm-sec { padding-block: var(--space-22); } #bgm-nav .sec-head { margin-bottom: var(--space-6); } #bgm-nav { padding-top: var(--space-14); } }
.bgm-sec > .sec-head { margin-bottom: var(--space-18); }
.sec-head h2 { font-size: clamp(26px, 3vw, 40px); line-height: 1.2; }   /* section-title（手机 26） */
.sec-head .kick { font: 800 15px/1 var(--font-display); letter-spacing: .16em; color: var(--red-ink); }

/* ---------- 第一层：用途格（新组件）——图标在左、名字＋例子在右，不加底框 ----------
   第 3 轮 R3-B1：原本一格 116px 高（图标在上、字在下），两排就占掉半个画面，曲子被推到第 2～3 个画面 → 紧凑格：电脑 6 栏 2 排、平板 4 栏、手机 2 栏
   R3-B6：例子原本用“⁠·”接、在“⁠·”后面换行，行尾留一个孤单的“⁠·”→ 每个词各自一块、用间距分开；手机只留第一个词 */
.tiles { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); column-gap: var(--space-8); }
.tile { display: grid; grid-template-columns: 40px minmax(0, 1fr); grid-template-areas: "ic b" "ic s"; column-gap: var(--space-10); row-gap: var(--space-2); align-items: center; align-content: center; height: 100%; min-height: 64px; padding: var(--space-8) var(--space-6); border-radius: var(--radius-14); color: var(--ink); text-align: left; text-decoration: none; }
.tile:hover { background: var(--panel); }
.tile:hover b { text-decoration: underline; text-underline-offset: 4px; }
.tile b { grid-area: b; align-self: end; font-size: 16px; line-height: 1.3; font-weight: 700; word-break: keep-all; }   /* body-small，加粗 */
/* body-small 15px、主文字色（读者测试 10-24：小安靠这行小字才找到“生日”，13px 淡灰太小太淡） */
.tile small { grid-area: s; align-self: start; display: flex; flex-wrap: wrap; column-gap: var(--space-8); font-size: 15px; line-height: 1.35; color: var(--ink); }
.tile small .w { white-space: nowrap; }
.tile small .gl { width: 15px; height: 15px; margin-inline-start: var(--space-4); vertical-align: -0.125em; }
/* 格子的图标 40px（设计评审 10-24：36px 跟字比起来太轻；设计系统乐器图标 .ic 是 42px，同一个份量） */
.tile .bi-g { grid-area: ic; width: 40px; height: 40px; margin: 0; }
.tile .cnt-fill { grid-column: 2; justify-self: start; margin-top: var(--space-2); }
@media (min-width: 1024px) { .tiles > li:nth-child(n+7) { border-top: 1px solid var(--line); } }   /* 电脑 6 栏：前 6 格与后 6 格之间一条细线 */
@media (max-width: 1023px) { .tiles { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
/* 1024 宽一格只剩约 96px：图标 34px、名字 15px，“铃声与提示音”才放得进一行 */
@media (min-width: 1024px) and (max-width: 1279px) { .tile { grid-template-columns: 34px minmax(0, 1fr); column-gap: var(--space-8); } .tile .bi-g { width: 34px; height: 34px; } .tile b { font-size: 15px; } }
@media (min-width: 641px) { #bgm-nav .sec-head { margin-bottom: var(--space-10); } }
@media (max-width: 640px) {
  .tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--space-6); }
  .tile { min-height: 48px; padding: var(--space-4); column-gap: var(--space-8); }
  .tile b { font-size: 15px; }
  .tile small { line-height: 1.3; }
}
/* 例子只放前两个词，一行放得下（三个词在手机与 1024～1280 宽会挤成两行，曲子就被推出第一个画面；两个词在 320 宽最长约 83px，格子里放得下约 93px）。
   手机原本想只留一个词，但只剩两个字的一行读起来像孤字（bgm-lines 量到 24 处），两个词刚好一行 */
.tile small .w ~ .w ~ .w, .tile small .w ~ .w ~ .sr { display: none; }
/* 第 4 轮 R4-B10：320 宽“长辈与社区”例子换行、“铃声与提示音”名字断两行，同一列两格不等高 → 340px 以下图标缩成 32px（字级不动），名字与例子都一行放得下 */
@media (max-width: 340px) {
  .tile { grid-template-columns: 32px minmax(0, 1fr); column-gap: var(--space-6); }
  .tile .bi-g { width: 32px; height: 32px; }
  .tile b { white-space: nowrap; }
  .tile small { flex-wrap: nowrap; column-gap: var(--space-6); }
}
/* 英日文（10-27 接线）：大类名字与例子比中文长（Workplaces & organizations、入場・ウォームアップ），上面“一行放得下”的设置会撑出格子、整页横卷（390 宽量到 624px）→
   英日文页照空白（英文，太长的字加连字号）或文节（日文）换行；例子的词也可以在词内换行 */
html:is([lang="en"], [lang="ja"]) .tile b, html:is([lang="en"], [lang="ja"]) .tile small .w { white-space: normal; overflow-wrap: break-word; }
html[lang="en"] .tile b, html[lang="en"] .tile small .w { hyphens: auto; }
@media (max-width: 340px) { html:is([lang="en"], [lang="ja"]) .tile small { flex-wrap: wrap; } }
/* 英日文：按钮字比中文长（“Print this explanation (to attach to …)”“Want background music of your own? …”），设计系统的 .btn 不换行，手机上撑出画面 → 背景音乐页里的按钮可以换行 */
html:is([lang="en"], [lang="ja"]) #main .btn { white-space: normal; line-height: 1.3; text-align: start; max-width: 100%; }
/* 英文：节目表左栏的段落名（Entrance (processional)、Award presentations）在 320 宽放不下一个字 → 长字加连字号换行 */
html[lang="en"] .prog .flow > li > .step { hyphens: auto; overflow-wrap: break-word; min-width: 0; }

/* ---------- “文字＋箭头”的链接＝胶囊钮（照设计系统 .set-more 的样子：line-strong 外框、15px 粗体、44px 高；主控 10-21 全站一致） ---------- */
.pill { display: inline-flex; align-items: center; gap: var(--space-8); min-height: var(--tap-min); padding: 0 var(--space-16); border: 1.5px solid var(--line-strong); border-radius: var(--radius-pill); background: transparent; color: var(--ink); font: 700 15px/1 var(--font-body); text-decoration: none; cursor: pointer; }
.pill:hover { border-color: var(--ink); }
.pill .gl { width: 16px; height: 16px; }

/* ---------- 面包屑、组页与用途页的头 ---------- */
.crumb { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-6) var(--space-8); margin-bottom: var(--space-14); font-size: 15px; color: var(--ink-2); }
.crumb [aria-current] { color: var(--ink); font-weight: 700; }
.vhead { display: flex; align-items: center; gap: var(--space-12); }
.vhead h2 { font-size: clamp(26px, 3vw, 40px); line-height: 1.2; }   /* section-title */
.vhead h2:focus { outline: none; }
.vsub { margin-top: var(--space-8); font-size: 16px; line-height: 1.7; color: var(--ink-2); max-width: 46em; }   /* body-small */
.bridge-row { display: flex; flex-wrap: wrap; gap: var(--space-8); margin-top: var(--space-12); }
/* 第 4 轮 R4-B3：“铃声与提示音”大类页的三条路；手机上跟用途胶囊一样排成一排横卷（不把清单往下推三行） */
@media (max-width: 640px) {
  .uses-chips + .bridge-row { flex-wrap: nowrap; overflow-x: auto; overscroll-behavior-x: contain; scrollbar-width: none; margin-top: var(--space-6); padding: var(--space-2) var(--space-4) var(--space-4); }
  .uses-chips + .bridge-row::-webkit-scrollbar { display: none; }
  .uses-chips + .bridge-row .pill { flex: none; }
}
/* 第 4 轮 R4-B4：还没有专用曲的节庆，收成清单下面一行小字（每个都能点） */
.sea-empty { margin-top: var(--space-18); font-size: 15px; line-height: 1.9; color: var(--ink-2); }
.sea-empty a { color: var(--ink); }
@media (pointer: coarse) { .sea-empty a { display: inline-block; min-height: var(--tap-min); line-height: var(--tap-min); } }
.sea-one + .sea-empty { margin-top: var(--space-6); }
@media (max-width: 640px) { .sea-one { display: none; } }   /* 小事修正 10-26：手机的节日胶囊列已经有这几个（标“1”），不重复 */

/* 第二层：用途清单（新组件）——每列 小图＋名称＋“用在…”＋曲数或补曲中 */
.uses { list-style: none; margin: var(--space-18) 0 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--space-28); }
.uses > li { border-top: 1px solid var(--line); }
.use-row { display: grid; grid-template-columns: 26px minmax(0, 1fr) auto; align-items: center; column-gap: var(--space-12); min-height: 56px; padding: var(--space-8) var(--space-4); border-radius: var(--radius-6); color: var(--ink); text-decoration: none; }
.use-row:hover { background: var(--panel); }
.use-row:hover b { text-decoration: underline; text-underline-offset: 4px; }
.use-row b { display: block; font-size: 17px; line-height: 1.35; font-weight: 700; }   /* body，加粗 */
.use-row small { display: block; margin-top: var(--space-4); font-size: 14px; line-height: 1.5; color: var(--ink-2); }   /* fine-print */
.use-row .go { display: inline-flex; align-items: center; gap: var(--space-6); white-space: nowrap; }
.use-row .go .gl { width: 16px; height: 16px; color: var(--ink-2); }
.uses-region { margin-top: var(--space-22); font: 700 15px/1.25 var(--font-body); color: var(--ink-2); grid-column: 1 / -1; }   /* ui-label：节庆依地区分段 */
.uses-region + li, .uses > li.first { border-top-color: var(--line); }
@media (max-width: 760px) { .uses { grid-template-columns: minmax(0, 1fr); } }
.uses-first { margin-top: 0; }
/* 电脑：用途三栏、“用在…”一行（放不下的用…；点进用途页看得到整句）——8 个用途从 4 排变 3 排，第一个画面看得到曲子（第 3 轮 R3-B1） */
@media (min-width: 1024px) { .uses { grid-template-columns: repeat(3, minmax(0, 1fr)); } .use-row small { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .use-row small wbr { display: none; } }   /* 外框以词换行插的 <wbr> 在 nowrap 里照样会换行，这里关掉 */   /* 页名移到频道头以后，用途清单就是这一段的第一样东西 */
/* 用途在手机是一排横卷的胶囊（第 3 轮 R3-B1：8 列用途在手机占一整个画面）；电脑、平板照旧两栏清单 */
.uses-chips { display: none; }
/* 第 5 轮 R5-B8：节日页（?g=season&s=…）电脑也只放一排胶囊（手机那一排的样子），12 张节日卡片不再把第一首推出第一个画面 */
.uses-chips.sea-chips-all { display: flex; gap: var(--space-8); padding: var(--space-4) var(--space-4) var(--space-6); }
@media (min-width: 641px) { .uses-chips.sea-chips-all { flex-wrap: wrap; } }   /* 手机照旧一排横卷（下面 640 以下那一段） */
.uses-chips.sea-chips-all .chip { text-decoration: none; font-size: 14px; min-height: var(--tap-min); padding-inline: var(--space-14); }
@media (max-width: 640px) {
  #bgm-nav .uses:not(:has(.uses-region)) { display: none; }
  .uses-chips { display: flex; gap: var(--space-8); overflow-x: auto; overscroll-behavior-x: contain; scrollbar-width: none; padding: var(--space-4) var(--space-4) var(--space-6); }
  .uses-chips::-webkit-scrollbar { display: none; }
  .uses-chips .chip { flex: none; text-decoration: none; font-size: 14px; min-height: var(--tap-min); padding-inline: var(--space-14); }
  html.bgm-deep #bgm-nav { padding-block: var(--space-10); }
}

/* 曲数与补曲中 */
.cnt { font-size: 15px; line-height: 1.2; font-weight: 700; font-variant-numeric: tabular-nums; color: var(--ink); }   /* ui-label */
/* caption：“还在做”。实线框（读者测试 10-24：虚线框看起来按不下去，可是整列都按得下去） */
.cnt-fill { display: inline-block; padding: var(--space-4) var(--space-10); border: 1.5px solid var(--line-strong); border-radius: var(--radius-pill); font-size: 13px; line-height: 1.2; font-weight: 700; color: var(--ink-2); white-space: nowrap; }
.cnt-quiet { color: var(--ink-2); font-weight: 400; }

/* 这类音乐通常要什么（研究 15 的典型需求） */
.need-box { margin-top: var(--space-14); border-top: 1px solid var(--line); }
.need-box > summary { display: flex; align-items: center; gap: var(--space-8); min-height: 44px; cursor: pointer; font-size: 16px; font-weight: 700; list-style: none; }
.need-box > summary::-webkit-details-marker { display: none; }
.need-box > summary .gl { width: 16px; height: 16px; transition: transform .15s; }
.need-box[open] > summary .gl { transform: rotate(180deg); }
.need { display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: var(--space-6) var(--space-16); margin: 0 0 var(--space-12); font-size: 16px; line-height: 1.6; }   /* body-small */
.need dt { color: var(--ink-2); }
.need dd { margin: 0; color: var(--ink); }
/* 以词换行：外框在词与词之间插 <wbr>，设计系统只替 h1～h3、p、li 开 keep-all；这页的说明字也在 span、b、dt、dd、small、summary、h4 里（不然“循环”会断成“循／环”）。一个词太长还是会断，不会撑破 */
:where(#main) :is(span, b, dt, dd, label, small, summary, h4) { word-break: keep-all; overflow-wrap: break-word; }

/* 第三层：段落／情境标签列（新组件）——结果上方一排横卷 */
.l3-wrap { margin-top: var(--space-14); }
.l3-cap { font-size: 14px; color: var(--ink-2); margin-bottom: var(--space-6); }   /* fine-print */
.l3 { display: flex; gap: var(--space-8); overflow-x: auto; overscroll-behavior-x: contain; padding: var(--space-4) var(--space-4) var(--space-10); scrollbar-width: thin; }
.l3 .chip { flex: none; text-decoration: none; font-size: 14px; min-height: 40px; padding-inline: var(--space-14); }
.chip .n { font: 400 13px/1 var(--font-mono); color: var(--ink-2); }
.chip[aria-current="true"], .chip[aria-pressed="true"] { background: var(--amber); border-color: var(--amber); color: var(--on-amber); }
.chip[aria-current="true"] .n, .chip[aria-pressed="true"] .n { color: var(--on-amber); }
/* 0 首的段落标签照样按得下去（点了看相近的曲子），所以不用虚线框，只把字放淡 */
.chip.zero { color: var(--ink-2); }
/* 横卷的一排还有没露出来的：右缘淡出（遮罩只看透明度，var(--ink) 只是“不透明”的意思）；卷到底就不淡出 */
.hs.more-r { -webkit-mask-image: linear-gradient(to right, var(--ink) calc(100% - 56px), transparent); mask-image: linear-gradient(to right, var(--ink) calc(100% - 56px), transparent); }
.l3-more { margin-inline-start: var(--space-8); color: var(--ink); font-weight: 700; }
.l3-more::after { content: " →"; }
.chip.zero[aria-current="true"] { color: var(--on-amber); }

/* ---------- 当季（新组件） ---------- */
.now-row { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0 var(--space-18); }
.now-card { display: grid; grid-template-columns: 26px minmax(0, 1fr); column-gap: var(--space-10); row-gap: var(--space-4); align-items: start; height: 100%; padding: var(--space-12) var(--space-4); border-top: 2px solid var(--line); color: var(--ink); text-decoration: none; }
.now-card:hover b { text-decoration: underline; text-underline-offset: 4px; }
.now-card .bi-u { grid-row: span 3; }
.now-card b { font-size: 17px; line-height: 1.35; font-weight: 700; }   /* body，加粗 */
.now-card .when { font-size: 14px; line-height: 1.5; color: var(--ink-2); }   /* fine-print */
.now-card .cnt, .now-card .cnt-fill { justify-self: start; }
.now-card .cnt-in { color: var(--ink); font-weight: 700; }   /* 曲数接在日期后面 */
@media (max-width: 760px) { .now-row { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
/* 当季加起来不到 3 首：不占一整区，只留一行链接（设计评审 10-25 品味 7） */
#bgm-now.now-compact { padding-block: var(--space-14); }
.now-line { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--space-4) var(--space-12); font-size: 16px; line-height: 1.6; }
.now-line-h { font-weight: 700; color: var(--ink); }
.now-link { color: var(--ink); text-underline-offset: 4px; }
.now-link .when { color: var(--ink-2); }
.now-link .cnt-in { color: var(--ink); font-weight: 700; }
@media (pointer: coarse) { .now-link { display: inline-flex; flex-wrap: wrap; align-items: center; min-height: var(--tap-min); } }

/* ---------- 节目表（RequestSlip＋Segmented；新加：每段一颗播放、一颗下载） ---------- */
.prog .seg { margin-bottom: var(--space-18); }
.prog .seg button[aria-pressed="true"] { background: var(--amber); color: var(--on-amber); }   /* 第 3 轮 R3-B3：同一页的“选中”只有一种样子（琥珀），跟筛选、段落标签一样 */
.prog .slip { max-width: 860px; }
.prog .slip h3 { font-size: 22px; line-height: 1.3; }   /* item-title */
.prog .flow { margin-top: var(--space-12); }
.prog .flow > li { grid-template-columns: 8.5em minmax(0, 1fr) auto auto auto; grid-template-areas: "step t len play dl" "panel panel panel panel panel"; align-items: center; column-gap: var(--space-12); }
.prog .flow > li > .step { grid-area: step; display: grid; gap: var(--space-4); }
.prog .flow > li > .step small { font-size: 13px; line-height: 1.4; font-weight: 400; color: var(--ink-2); }   /* caption：行话旁边的白话 */
.prog .flow > li > .t { grid-area: t; display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-4) var(--space-8); }
.prog .flow > li > .len { grid-area: len; color: var(--ink-2); white-space: nowrap; font-size: 15px; }
.prog .flow > li > .p-play { grid-area: play; }
.prog .flow > li > .trk-dl { grid-area: dl; }
.prog .flow > li > .dl { grid-area: panel; }
.prog-acts { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-12) var(--space-18); margin-top: var(--space-18); }
.prog-acts .fine { max-width: 36em; }
#prog-all { background: var(--ink); color: var(--bg); }   /* 全部播放＝墨色按钮（红色只给录音、正在播与主按钮） */
@media (max-width: 640px) {
  .prog .flow > li { grid-template-columns: minmax(0, 1fr) auto auto; grid-template-areas: "step len play" "t t dl" "panel panel panel"; row-gap: var(--space-6); }
}

/* ---------- 找曲子：左栏筛选＋右栏结果（电脑版的版面写在筛选栏样式后面，才盖得过去） ---------- */
.find { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-18); }

/* 筛选栏（新组件） */
.flt-bar { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-8) var(--space-12); }
.flt-h { font: 700 17px/1.3 var(--font-body); }   /* body，加粗 */
@media (max-width: 1023px) { .flt-h { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; } #flt { padding-top: var(--space-8); } }
.flt-toggle { display: inline-flex; align-items: center; gap: var(--space-8); min-height: 44px; padding: 0 var(--space-18); border: 1.5px solid var(--line-strong); border-radius: var(--radius-pill); background: transparent; color: var(--ink); font: 700 16px/1 var(--font-body); cursor: pointer; }
.flt-toggle:hover { border-color: var(--ink); }
.flt-toggle .gl { width: 18px; height: 18px; }
.flt-toggle[aria-expanded="true"] { border-color: var(--ink); }
.flt-toggle .gl:last-child, .trk-dl .chev { transition: transform .15s; }
.flt-toggle[aria-expanded="true"] .gl:last-child, .trk-dl[aria-expanded="true"] .chev { transform: rotate(180deg); }
.flt-clear { min-height: 44px; padding: 0 var(--space-8); border: 0; background: transparent; color: var(--red-ink); font: 700 15px/1 var(--font-body); text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.flt-note { margin-top: var(--space-8); font-size: 14px; line-height: 1.6; color: var(--ink-2); }   /* fine-print */
.facet { padding-block: var(--space-14); border-top: 1px solid var(--line); }
.facet:first-of-type { margin-top: var(--space-10); }
.facet > h3, .facet > .fh { margin: 0 0 var(--space-10); font: 700 15px/1.25 var(--font-body); }   /* ui-label */
.facet .sub { margin: var(--space-12) 0 var(--space-8); font-size: 14px; line-height: 1.4; color: var(--ink-2); }   /* fine-print */
.opts { display: flex; flex-wrap: wrap; gap: var(--space-6); }
.opt { display: inline-flex; align-items: center; gap: var(--space-6); min-height: 36px; padding: var(--space-6) var(--space-12); border: 1.5px solid var(--line-strong); border-radius: var(--radius-pill); background: transparent; color: var(--ink); font: 700 14px/1.2 var(--font-body); text-align: left; cursor: pointer; }   /* tool-label 字级 */
.opt:hover { border-color: var(--ink); }
.opt .n { font: 400 13px/1 var(--font-mono); color: var(--ink-2); }
.opt .x { display: block; font-size: 13px; font-weight: 400; color: var(--ink-2); }   /* 速度的“每分钟几拍” */
.opt[aria-pressed="true"] { background: var(--amber); border-color: var(--amber); color: var(--on-amber); }
.opt[aria-pressed="true"] .n, .opt[aria-pressed="true"] .x { color: var(--on-amber); }
/* 选中的选项与段落标签前面加一个勾：浅色琥珀底对页面底只有约 2.3:1，光靠颜色分不出选了没（色弱也一样）；勾对琥珀底约 6.6:1 */
.opt .ok, .l3 .chip .ok { width: 16px; height: 16px; flex: none; }
.opt[aria-disabled="true"] { border-style: dashed; color: var(--ink-2); cursor: default; }   /* 0 首：变淡但字看得清楚（用 ink-2，不用透明度） */
.opt[aria-disabled="true"]:hover { border-color: var(--line-strong); }
.opt .bi-i { width: 22px; height: 22px; }
.opt .nrg { width: 16px; height: 14px; }
.facet details { border-top: 1px dashed var(--line); }
.facet details:first-of-type { border-top: 0; }
.facet summary { display: flex; align-items: center; justify-content: space-between; gap: var(--space-8); min-height: 40px; cursor: pointer; font-size: 15px; font-weight: 700; list-style: none; }
.facet summary::-webkit-details-marker { display: none; }
.facet summary .gl { width: 16px; height: 16px; transition: transform .15s; }
.facet details[open] summary .gl { transform: rotate(180deg); }
.facet details .opts { padding-bottom: var(--space-10); }
.facet summary .n { font: 400 13px/1 var(--font-mono); color: var(--ink-2); }
/* 手机：筛选面板约 1,350px 高，底部黏一颗“看结果（N 首）”；墨色，不用红（红色只给主按钮与正在播） */
/* 让开手机底部五台与播放器（不然按到的是底部菜单）；底下垫一条页面底色，卷过去的选项不会跟按钮叠在一起（不用阴影：页面样式不写色码） */
.flt-done { position: sticky; bottom: calc(var(--tabbar-h) + var(--pl-h) + var(--space-12)); padding-top: var(--space-12); background: var(--bg); }
.flt-go { width: 100%; justify-content: center; min-height: 48px; background: var(--ink); color: var(--bg); }
.flt-go:hover { filter: brightness(1.2); }
#flt .opt, #flt summary { scroll-margin-bottom: calc(var(--tabbar-h) + var(--pl-h) + 72px); }   /* 用 Tab 走到面板下方时，不被黏住的“看结果”盖住 */
@media (min-width: 1024px) {
  .flt-done { display: none; }
  .find { grid-template-columns: 272px minmax(0, 1fr); gap: var(--space-28) var(--space-44); align-items: start; }
  /* 设计评审第 2 轮 D1：原本侧栏黏在顶端、自己卷（内容 1,354px，1280×800 只看得到 645px），“速度”“主奏乐器”“节庆季节”整组不在画面上、“快”被切半颗，
     Mac 上连滚动条都看不到 → 不黏住、不自己卷，跟清单一起往下卷（Artlist、Epidemic Sound 的侧栏也是跟着页面卷） */
  .side { padding-right: var(--space-6); }
  .flt-toggle { display: none; }
  .flt[hidden] { display: block !important; }   /* 电脑上筛选常驻（手机才收起来） */
}

/* 结果头 */
.res-head { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-8) var(--space-14); }
.res-head h2 { font-size: 26px; line-height: 1.25; margin-right: auto; }   /* program-title */
.res-head h2:focus { outline: none; }
.res-count { font: 700 15px/1.2 var(--font-body); color: var(--ink-2); font-variant-numeric: tabular-nums; }
.grp-best { margin-top: var(--space-8); font-size: 16px; line-height: 1.7; color: var(--ink); max-width: 46em; }   /* body-small：大类页“先列最适合的 20 首”（设计评审第 2 轮） */
.sort { display: inline-flex; align-items: center; gap: var(--space-8); font-size: 15px; color: var(--ink-2); }
.sort select { min-height: 40px; font-size: 15px; }
.active { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-6) var(--space-8); margin-top: var(--space-12); }
.active > span { font-size: 14px; color: var(--ink-2); }
.active .chip .gl { width: 12px; height: 12px; }
.legend { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-4) var(--space-12); margin-top: var(--space-10); font-size: 14px; line-height: 1.5; color: var(--ink-2); }   /* fine-print：直条＝能量的图例 */
.legend span { display: inline-flex; align-items: center; gap: var(--space-6); }
.sec-label { margin: var(--space-22) 0 var(--space-6); font: 700 15px/1.25 var(--font-body); color: var(--ink-2); }   /* ui-label：专为这个场合／各段落可用 */
.sec-label:first-child { margin-top: var(--space-14); }

/* ---------- 曲子列（新组件）：播放键｜曲名⁠·长度⁠·速度⁠·气氛｜下载 ---------- */
.trk-list { list-style: none; margin: var(--space-6) 0 0; padding: 0; }
.trk { position: relative; display: grid; grid-template-columns: 44px minmax(0, 1fr) auto; grid-template-areas: "play main dl" "panel panel panel"; column-gap: var(--space-12); align-items: center; padding-block: var(--space-12); border-top: 1px solid var(--line); }
.trk:last-child { border-bottom: 1px solid var(--line); }
/* 卷到某一首时（旧的 ?t= 分享网址、播放器的“下载”）让开固定的页眉（设计评审 10-25 必修 1） */
.trk, .prog .flow > li, #pin-h { scroll-margin-top: calc(var(--header-height) + var(--space-12)); }
.trk-play { grid-area: play; width: 44px; height: 44px; padding: 0; border: 1.5px solid var(--line-strong); border-radius: 50%; background: transparent; color: var(--ink); display: grid; place-items: center; cursor: pointer; }
.trk-play:hover { border-color: var(--ink); }
.trk-play .gl { width: 18px; height: 18px; }
.trk-play .gl.play { transform: translateX(1px); }
/* 清单那一列“正在播”：红字＋红色描边，不是实心红（网站主人 10-25 定案：手机上清单那列与底部播放器原本各一颗红色实心暂停钮 → 清单改描边、播放器留红，每个画面只有一颗红色实心） */
.trk.on .trk-play { background: transparent; border-color: var(--red-ink); color: var(--red-ink); }
/* 设计评审第 2 轮 D2：胶囊形的播放键（每首一页、节目表）播放中原本也是红色实心，跟旁边红色“下载整首 MP3”同高同形同色 →
   描边照旧（line-strong）、字与图标用 red-ink，加音量表三条（设计系统 ON AIR 的音量表）；红色实心只留给主按钮 */
.p-play.on { color: var(--red-ink); border-color: var(--line-strong); }
.p-meter { display: inline-flex; align-items: flex-end; gap: var(--space-2); height: 14px; margin-inline-start: var(--space-2); }
.p-meter i { width: 3px; border-radius: var(--radius-2); background: currentColor; transform-origin: bottom; }
.p-meter i:nth-child(1) { height: 45%; } .p-meter i:nth-child(2) { height: 80%; } .p-meter i:nth-child(3) { height: 60%; }
.p-play.on .p-meter i { animation: vu .45s ease-in-out infinite alternate; }   /* 读者自己按了播放才出现（不是卷动动态）；减少动态时外框整站关掉动画 */
.p-play.on .p-meter i:nth-child(2) { animation-delay: .12s; } .p-play.on .p-meter i:nth-child(3) { animation-delay: .24s; }
.trk-main { grid-area: main; min-width: 0; display: grid; gap: var(--space-4); color: var(--ink); text-decoration: none; border-radius: var(--radius-6); }
/* 曲名那一块连到这一首自己的页面（第 2 轮）：平常不画底线（一整列都是底线太吵），滑过时曲名画底线 */
@media (hover: hover) { .trk-main:hover .trk-t { text-decoration: underline; text-underline-offset: 4px; } }
.trk-t { font-size: 17px; line-height: 1.35; font-weight: 700; }   /* body，加粗 */
/* 正在播的曲名不改红字：red-ink 对浅色底只有 6.0:1，曲名是主要文字要 ≥7；“正在播”由红色暂停钮＋红色进度条表示 */
.trk-m { display: block; font-size: 14px; line-height: 1.6; color: var(--ink-2); }   /* fine-print：一行字（点号紧贴），太长才换行 */
.trk-m .nrg { margin-left: var(--space-4); }
/* 第 5 轮 R5-B5：手机上每一列第一行都停在“⁠·”、长曲“2 分／58 秒”被拆两行 → 小字分两组（长度⁠·速度｜气氛⁠·能量）。
   第 6 轮 R6-B2：第 5 轮用外框裁切藏“⁠·”，一组在组内换行时裁掉的是真的字（320 宽 61% 的列）→ 不裁切。
   每一小块（.nw：“2 分 58 秒⁠·中速”“温馨、”“明亮⁠·有活力”；外框以词换行不会在 .nw 里插 <wbr>）不换行，只在块与块之间换行：数字不拆、行头行尾没有“⁠·”。
   手机（767 以下）两组各一行；两组中间的“⁠·”（.tg-sep，包在第二组第一块的开头）只给读屏念。电脑上两组同一行，“⁠·”跟前面黏在一起 */
@media (max-width: 767px) {
  .trk-m .tg { display: block; }
  .trk-m .tg-sep { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }   /* 同 .sr：看不到、读屏念得到 */
}
.trk-m .tag { margin-right: var(--space-6); vertical-align: 1px; }   /* 标签放在这一行最前面：“相近”一眼看得到，也不会单独掉到第二行 */
.dim { color: var(--ink-2); font-weight: 400; }
.tag { display: inline-flex; align-items: center; padding: var(--space-4) var(--space-8); border: 1px solid var(--line-strong); border-radius: var(--radius-pill); font-size: 13px; line-height: 1; font-weight: 700; color: var(--ink-2); white-space: nowrap; }   /* caption */
.tag.near { border-style: dashed; }
.trk-dl { grid-area: dl; display: inline-flex; align-items: center; gap: var(--space-6); min-height: 44px; padding: 0 var(--space-14); border: 1.5px solid var(--line-strong); border-radius: var(--radius-pill); background: transparent; color: var(--ink); font: 700 15px/1 var(--font-body); cursor: pointer; white-space: nowrap; }   /* 看起来就是按钮：有框、有字 */
.trk-dl:hover { border-color: var(--ink); }
.trk-dl .gl { width: 18px; height: 18px; }
.trk-dl[aria-expanded="true"] { border-color: var(--ink); }
.trk-dl .chev { width: 14px; height: 14px; margin-inline-start: calc(-1 * var(--space-2)); }
.trk-bar { position: absolute; left: 0; right: 0; bottom: -1px; height: 2px; pointer-events: none; }
.trk-bar i { display: block; height: 100%; background: var(--red); transform: scaleX(0); transform-origin: left; }
.p-play { display: inline-flex; align-items: center; justify-content: center; gap: var(--space-6); min-height: 40px; padding: 0 var(--space-14); border: 1.5px solid var(--line-strong); border-radius: var(--radius-pill); background: transparent; color: var(--ink); font: 700 14px/1 var(--font-body); cursor: pointer; white-space: nowrap; }
.p-play:hover { border-color: var(--ink); }
.p-play .gl { width: 14px; height: 14px; }
.more-row { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-12); margin-top: var(--space-18); }
.more-row .fine { flex: 1 1 14em; }
.prog .flow > li > .trk-dl, .prog .flow > li > .p-play { justify-self: end; }
@media (max-width: 400px) { .trk-dl { padding: 0 var(--space-12); gap: var(--space-4); } }   /* 很窄的手机：下载钮照样写“下载”（长辈靠字认按钮），只把内距收一点 */
@media (pointer: coarse) {   /* 触摸：每个可点的东西至少 44px 高（句子里的链接也撑高，不靠手指点准） */
  .p-play, #main .chip, .opt, .sort select, .facet summary, .pl-seek { min-height: var(--tap-min); }
  /* 设计评审第 2 轮 D6：原本把句子里的链接撑成 inline-flex 44px 高，含链接那一行的行距从 24px 变 34px →
     改用上下内距把点击范围撑开（行内元素的上下内距不会撑高那一行，点击范围照样约 44px 高） */
  .bgm-promise a, .dl-note a, .lic .fine a, .lic ul.plain a, .lic-terms a { display: inline; padding-block: var(--space-12); }
}

/* ---------- 提示词单（新组件；10-27 由下载单改成 BGM 词库）：按“提示词”原地展开；上缘撕线（同节目表） ---------- */
.dl { grid-area: panel; display: grid; gap: var(--space-14); margin-top: var(--space-12); padding: var(--space-14) 0 var(--space-6); border-top: 2px dashed var(--line); }
.dl-note { font-size: 15px; line-height: 1.7; color: var(--ink-2); max-width: 52em; }
.dl-note a { font-weight: 700; text-underline-offset: 3px; }
.dl-acts { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-8); }
.dl-acts .chip { text-decoration: none; font-size: 14px; min-height: 40px; padding-inline: var(--space-14); }
.dl-acts .gl { width: 15px; height: 15px; }
.dl-meta { font-size: 14px; line-height: 1.6; color: var(--ink-2); }   /* fine-print */
/* 提示词框本身（.pr-h、.pr-text…）在设计系统 bundle.css（PromptPanel），铃声页共用 */
.dl-acts .btn-main .gl { width: 18px; height: 18px; }
@media (pointer: coarse) { .dl-acts .chip { min-height: var(--tap-min); } }

/* ---------- 补曲中（新组件）：这类音乐通常要什么＋相近可试听＋自己写一首＋写信告诉我们 ---------- */
.bgm-fill { display: grid; gap: var(--space-14); margin-top: var(--space-14); padding-top: var(--space-18); border-top: 2px dashed var(--line-strong); }
.bgm-fill h3 { font-size: 22px; line-height: 1.3; }   /* item-title */
.bgm-fill > p { font-size: 16px; line-height: 1.7; color: var(--ink); max-width: 46em; }
.bgm-fill .need { margin-bottom: 0; }
.bgm-fill h4 { margin: var(--space-10) 0 0; font: 700 17px/1.35 var(--font-body); }
.bgm-fill .near-note { font-size: 14px; color: var(--ink-2); }
.ask { display: grid; gap: var(--space-12); margin-top: var(--space-6); padding-top: var(--space-14); border-top: 1px solid var(--line); }
.ask-acts { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-10) var(--space-14); }
.ask-acts .btn .gl { width: 18px; height: 18px; }
.mail-line { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-6) var(--space-10); font-size: 16px; line-height: 1.6; }
.mail-line .mail { font-family: var(--font-mono); color: var(--ink); overflow-wrap: anywhere; }
@media (pointer: coarse) { .mail-line .chip { min-height: var(--tap-min); padding-inline: var(--space-16); } }

/* 找不到（研究 09／规划书 v2 §8.3 的顺序） */
.none { display: grid; gap: var(--space-14); margin-top: var(--space-14); }
.none h3 { font-size: 22px; line-height: 1.3; }   /* item-title */
.none h4 { margin: var(--space-6) 0 0; font: 700 16px/1.4 var(--font-body); }
.none .row { display: flex; flex-wrap: wrap; gap: var(--space-8); }
.none .row .chip { text-decoration: none; font-size: 14px; min-height: 40px; padding-inline: var(--space-14); }

/* ---------- 授权说明、怎么做的、找不到想要的 ---------- */
.lic-terms { margin: var(--space-14) 0 0; padding-left: var(--space-26); display: grid; gap: var(--space-10); font-size: 16px; line-height: 1.75; max-width: 50em; }
.lic-terms > li::marker { font-weight: 700; }
.lic-sub { margin: var(--space-6) 0; padding-left: var(--space-26); display: grid; gap: var(--space-4); }
.lic-terms a { text-underline-offset: 3px; }
.lic-ok { list-style: none; margin: var(--space-14) 0 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-8) var(--space-28); }
.lic-ok li { display: flex; align-items: flex-start; gap: var(--space-10); font-size: 17px; line-height: 1.6; }
.lic-ok .gl { width: 20px; height: 20px; margin-top: var(--space-4); }
.lic h3 { margin: var(--space-24) 0 var(--space-8); font-size: 22px; line-height: 1.3; }   /* item-title */
.lic ul.plain { margin: 0; padding-left: var(--space-22); display: grid; gap: var(--space-6); font-size: 16px; line-height: 1.7; max-width: 50em; }
.lic .lead { font-size: 18px; line-height: 1.7; max-width: 40em; }
.lic .fine { margin-top: var(--space-18); max-width: 52em; }
.lic .fine a { text-underline-offset: 3px; }
.lic-acts { margin-top: var(--space-18); display: flex; flex-wrap: wrap; gap: var(--space-10); }
.lic-acts .btn .gl, .how .btn .gl { width: 18px; height: 18px; }
.how ul { margin: 0; padding-left: var(--space-22); display: grid; gap: var(--space-8); font-size: 16px; line-height: 1.7; max-width: 50em; }
.how .btn { margin-top: var(--space-18); }
@media (max-width: 760px) { .lic-ok { grid-template-columns: minmax(0, 1fr); } }

/* ---------- 样稿注记（正式网站不会有）：页脚上方、默认收起 ---------- */
.mock-notes { margin-block: var(--space-28) var(--space-12); padding-top: var(--space-10); border-top: 1px dashed var(--line-strong); font-size: 14px; line-height: 1.7; color: var(--ink-2); }
.mock-notes > summary { display: flex; align-items: center; min-height: 44px; cursor: pointer; font-weight: 700; color: var(--ink); }
.mock-notes ol { margin: var(--space-6) 0 0; padding-left: var(--space-22); display: grid; gap: var(--space-6); max-width: 60em; }

/* ---------- 底部小播放器（新组件）：机器面板（glass），手机在底部五台上面 ---------- */
.bgm-player { position: fixed; left: 0; right: 0; bottom: var(--tabbar-h); z-index: 29; background: var(--glass); color: var(--glass-ink); border-top: 1px solid var(--glass-rule); padding: var(--space-8) max(var(--space-16), env(safe-area-inset-right, 0px)) calc(var(--space-8) + var(--pl-safe)) max(var(--space-16), env(safe-area-inset-left, 0px)); }
.bgm-player :focus-visible { outline-color: var(--glass-red-ink); }   /* 深色面板里的焦点框（设计系统第 4 版规则） */
.pl-in { max-width: 1148px; margin: 0 auto; display: grid; grid-template-columns: auto minmax(0, 16em) minmax(0, 1fr) auto; grid-template-areas: "play info seek btns"; align-items: center; gap: var(--space-8) var(--space-14); }
.pl-play { grid-area: play; width: 48px; height: 48px; padding: 0; border: 0; border-radius: 50%; background: var(--glass-2); color: var(--glass-ink); box-shadow: inset 0 0 0 1.5px var(--glass-edge); display: grid; place-items: center; cursor: pointer; }
.pl-play .gl { width: 20px; height: 20px; }
.bgm-player.playing .pl-play { background: var(--glass-red); color: var(--on-amber); box-shadow: none; }   /* 深色面板上的“正在播”用 glass-red（对面板日 5.4／夜 6.6:1；--red 只有 3.0），三角形用深色字（5.9:1），同音乐教室的“下一个” */
.pl-info { grid-area: info; min-width: 0; display: grid; gap: var(--space-4); }
.pl-top { display: flex; align-items: center; gap: var(--space-8); min-width: 0; }
.pl-t { font-size: 16px; line-height: 1.3; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }   /* body-small，加粗 */
.pl-time { font-size: 13px; line-height: 1.3; color: var(--glass-dim); font-variant-numeric: tabular-nums; white-space: nowrap; }   /* caption */
.pl-onair { flex: none; display: inline-flex; align-items: center; gap: var(--space-4); padding: var(--space-4) var(--space-8); border-radius: var(--radius-pill); background: var(--red); color: var(--on-red); font: 800 12px/1 var(--font-display); letter-spacing: .14em; visibility: hidden; }
.bgm-player.playing .pl-onair { visibility: visible; }   /* 平常不亮（常亮会被读成“正在直播”）；真的在播才亮 */
.pl-seek { grid-area: seek; width: 100%; min-width: 0; height: 40px; margin: 0; accent-color: var(--glass-red-line); cursor: pointer; }
.pl-btns { grid-area: btns; display: flex; align-items: center; gap: var(--space-6); }
.pl-btn { width: 40px; height: 40px; padding: 0; border: 0; border-radius: 50%; background: transparent; color: var(--glass-ink); box-shadow: inset 0 0 0 1.5px var(--glass-edge); display: grid; place-items: center; cursor: pointer; flex: none; }
.pl-btn:hover, .pl-play:hover { filter: brightness(1.25); }
.pl-btn .gl { width: 16px; height: 16px; }
.pl-btn:disabled { opacity: .35; cursor: not-allowed; filter: none; }
/* 播完以后：单曲循环／本类轮播（用户 10-27）的外观在设计系统 bundle.css（PlayModes）；这里只管它在播放器里的位置 */
.pl-meter { display: inline-flex; align-items: flex-end; gap: var(--space-4); height: 14px; }
.pl-meter i { width: 3px; border-radius: var(--radius-2); background: var(--amber); transform-origin: bottom; }
.pl-meter i:nth-child(1) { height: 45%; } .pl-meter i:nth-child(2) { height: 80%; } .pl-meter i:nth-child(3) { height: 60%; }
.bgm-player.playing .pl-meter i { animation: vu .45s ease-in-out infinite alternate; }
.bgm-player.playing .pl-meter i:nth-child(2) { animation-delay: .12s; } .bgm-player.playing .pl-meter i:nth-child(3) { animation-delay: .24s; }
/* 键盘说明（空格键、上下键、左右键）：第 3 轮 R3-B10 从播放器拿掉，改成播放器的 aria-describedby（#pl-keys-d，只给读屏）；大屏幕播放器只剩一列控制 */
@media (min-width: 901px) { .pl-seek { height: 28px; } }
@media (max-width: 900px) {
  .pl-in { grid-template-columns: auto minmax(0, 1fr) auto; grid-template-areas: "play info btns" "seek seek seek"; row-gap: var(--space-4); }
  .pl-seek { height: 32px; }
}
/* 手机收起来时顶端的细进度线（D7）；电脑、手机展开时有完整的进度条，不显示 */
.pl-line { display: none; position: absolute; left: 0; right: 0; top: 0; height: 3px; pointer-events: none; }
.pl-line i { display: block; height: 100%; background: var(--glass-red-line); transform: scaleX(0); transform-origin: left; }
.pl-exp { display: none; }
@media (max-width: 640px) {
  /* 设计评审第 2 轮 D7：原本两排 113px＋底部五台 56px＝169px，320×568 播放中内容只剩 58% →
     平常收成一列（播放｜曲名＋时间｜下一首｜关掉，约 60px），进度改成播放器顶端 3px 细线；点曲名展开“上一首｜进度条”与“播完以后”两排。
     （10-22：手机拿掉播放器的下载钮（清单那一列就有“下载”）与 ON AIR（播放键变红已经表示正在播）；10-25 第 1 轮：进度条要够宽，展开时吃满整排） */
  .pl-line { display: block; }
  .pl-play { width: var(--tap-min); height: var(--tap-min); }   /* 一列的高度＝44px 的钮＋上下内距 */
  .bgm-player.pl-open .pl-line { display: none; }
  .pl-in { grid-template-columns: auto minmax(0, 1fr) auto auto; grid-template-areas: "play info nx cl"; column-gap: var(--space-6); row-gap: var(--space-6); }
  .bgm-player.pl-open .pl-in { grid-template-areas: "play info nx cl" "pv seek seek seek" "au au au au"; }   /* 进度条吃满第二排（320 宽约 220px），“播完以后”放第三排 */
  .bgm-player.pl-open .pl-end { justify-self: start; }
  .pl-btns { display: contents; }
  #pl-prev { grid-area: pv; } #pl-next { grid-area: nx; } .pl-end { grid-area: au; } #pl-close { grid-area: cl; justify-self: end; }
  #pl-prev, .pl-seek, .pl-end { display: none; }
  .bgm-player.pl-open #pl-prev { display: grid; }
  .bgm-player.pl-open .pl-end { display: inline-flex; }
  .bgm-player.pl-open .pl-seek { display: block; }
  /* 点曲名展开：整块曲名＋时间就是按钮（透明、盖在上面），右边一个小箭头告诉读者点得开 */
  .pl-info { position: relative; padding-inline-end: var(--space-22); }
  .pl-exp { display: block; position: absolute; inset: calc(-1 * var(--space-4)) 0; width: 100%; min-height: var(--tap-min); padding: 0; border: 0; border-radius: var(--radius-6); background: transparent; color: var(--glass-dim); cursor: pointer; }
  .pl-exp .gl { position: absolute; right: 0; top: 50%; width: 16px; height: 16px; transform: translateY(-50%); transition: transform .15s; }
  .bgm-player.pl-open .pl-exp .gl { transform: translateY(-50%) rotate(180deg); }
  .pl-time { overflow: hidden; text-overflow: ellipsis; }
  .pl-onair { display: none; }
  .pl-mode { font-size: 13px; }
}
@media (pointer: coarse) { .pl-btn { width: auto; min-width: var(--tap-min); min-height: var(--tap-min); height: var(--tap-min); } .pl-mode { min-height: var(--tap-min); } }
/* 播放器出现时：页脚往上让位、焦点跟提示列不被盖住 */
html.has-player body { padding-bottom: var(--pl-h); }
html.has-player { scroll-padding-bottom: calc(var(--pl-h) + var(--tabbar-h) + var(--space-12)); }
html.has-player #toast { bottom: calc(var(--pl-h) + var(--tabbar-h) + var(--space-12)); }