/* choir.css v1 — 虚拟合唱桌面页（/choir/<歌曲>、/choir/mine）共用样式。
 * 基础组件来自 /css/tokens.css + /css/components.css；这里只放这两页特有的部分。
 * 播放区、歌词卡的写法与 /choir/he-leadeth-me 一致（那一页的样式写在页内，没有改动）。
 */

/* ---------- 页面骨架 ---------- */
#globalNav{display:block;min-height:64px}@media (max-width:720px){#globalNav{min-height:56px}}
[hidden]{display:none !important}
.i.br{fill:currentColor;stroke:none}
.footer .seo nav{display:inline}
/* 面包屑链接：视觉不变，点按区域放大到 44×44（同 /daily/、/about） */
.crumbs a{display:inline-flex;align-items:center;justify-content:center;min-height:44px;min-width:44px;margin:-12px -8px;padding:0 8px}
.choir-head .row{margin-bottom:var(--s-3)}
/* 英文标题较长：单独一行，可以换行 */
.choir-head .page-title small{display:block;margin:var(--s-1) 0 0;white-space:normal}
.choir-head .head-actions{display:flex;flex-wrap:wrap;gap:var(--s-2);margin-top:var(--s-5)}
.choir-deadline{margin-top:var(--s-3);color:var(--text-2);font-size:var(--fs-sm)}
.choir-deadline b{color:var(--text)}
.choir-stack > * + *{margin-top:var(--s-5)}
/* 跳到某一块时让出吸顶顶栏的高度 */
.choir-stack > *,.vc-detail > *,.vc-panel,.vc-status,.rec{scroll-margin-top:88px}
/* 程序把焦点移到整块卡片 / 标题上（读屏用），不画焦点框 */
#join:focus,.vc-detail [tabindex="-1"]:focus,.vc-done [tabindex="-1"]:focus{outline:none}
.choir-stack .notice{font-size:var(--fs-md)}
.choir-stack .notice p + p{margin-top:2px}
.card-sub{margin-top:var(--s-1);color:var(--text-2);font-size:var(--fs-sm)}
.vc-sec-title{font-size:var(--fs-md);font-weight:700;margin-top:var(--s-6)}
/* 加载中的占位块 */
.vc-skel{display:flex;flex-direction:column;gap:var(--s-3);margin-top:var(--s-5)}
.vc-skel span{display:block;height:14px;border-radius:7px;background:var(--surface-2)}
.vc-skel span:nth-child(2){width:80%}.vc-skel span:nth-child(3){width:60%}

/* ---------- 状态标签（补 components.css 的 .tag） ---------- */
.tag-ok{background:var(--success-soft);color:var(--success);font-weight:600}
.tag-warn{background:var(--danger-soft);color:var(--danger);font-weight:600}
.tag-off{background:var(--surface-2);color:var(--text-3)}
.notice-warn{background:var(--danger-soft)}
.notice-warn > .i{color:var(--danger)}
.notice-ok{background:var(--success-soft)}
.notice-ok > .i{color:var(--success)}

/* ---------- 练唱素材播放器（.progress / .ctrl-play 同 /choir/he-leadeth-me 与 /audio/bible） ---------- */
.mat-list{display:flex;flex-direction:column;margin-top:var(--s-4)}
.mat{display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:var(--s-4);align-items:center;padding:var(--s-4) 0;border-top:1px solid var(--border)}
.mat:first-child{border-top:0}
.mat .ctrl-play{width:52px;height:52px}
.mat .ctrl-play .i{width:24px;height:24px}
.mat-title{font-weight:700;color:var(--text)}
.mat-sub{font-size:var(--fs-xs);color:var(--text-3)}
.mat .progress-wrap{margin-top:var(--s-3)}
.mat .times-row{margin-top:4px}
.choir-status{margin-top:var(--s-1);min-height:1.5em;color:var(--text-2);font-size:var(--fs-xs)}
.choir-status.is-error{color:var(--danger)}
.progress-wrap{position:relative;border-radius:3px}
.progress-wrap .progress{margin-top:0}
.progress-wrap .seek{position:absolute;left:0;top:50%;width:100%;height:44px;margin:-22px 0 0;padding:0;opacity:0;cursor:pointer;-webkit-appearance:none;appearance:none;background:transparent}
.progress-wrap .seek:disabled{cursor:default}
.progress-wrap:focus-within{outline:2px solid var(--focus);outline-offset:8px}
.ctrl-play .i-pause{display:none}
.ctrl-play.is-playing .i-play{display:none}
.ctrl-play.is-playing .i-pause{display:block}
.ctrl-play[aria-busy="true"]{opacity:.75}
.ctrl-play:disabled{opacity:.45;cursor:default}

/* ---------- 成品 ---------- */
.vc-media{display:block;width:100%;margin-top:var(--s-4)}
video.vc-media{border-radius:var(--r-md);background:#000;max-height:70vh}

/* ---------- 歌词卡（同 /choir/he-leadeth-me） ---------- */
.lyrics{padding:var(--s-6)}
.lyrics-body{display:flex;flex-direction:column;gap:var(--s-5);margin-top:var(--s-5)}
.lyric{display:grid;grid-template-columns:44px minmax(0,1fr);gap:var(--s-3);align-items:start}
.lyric .vno{display:grid;place-items:center;width:32px;height:32px;margin-top:4px;border-radius:50%;background:var(--primary-soft);color:var(--on-primary-soft);font-size:var(--fs-sm);font-weight:700}
.lyric .tag{margin-top:7px;justify-self:start}
.lyric p{margin:0;font-size:var(--fs-read);line-height:var(--lh-read);color:var(--text)}
.lyric.is-chorus p{color:var(--primary);font-weight:600}
.lyrics-note{margin-top:var(--s-5);color:var(--text-3);font-size:var(--fs-sm)}

/* ---------- 录音说明 ---------- */
.vc-howto{list-style:none;margin:var(--s-5) 0 0;padding:0;display:flex;flex-direction:column;gap:var(--s-4);counter-reset:howto}
.vc-howto li{display:grid;grid-template-columns:32px minmax(0,1fr);gap:var(--s-3);align-items:start;counter-increment:howto;color:var(--text-2);line-height:1.7}
.vc-howto li::before{content:counter(howto);display:grid;place-items:center;width:28px;height:28px;margin-top:1px;border-radius:50%;background:var(--primary-soft);color:var(--on-primary-soft);font-size:var(--fs-sm);font-weight:700}
.vc-howto b{color:var(--text)}
.vc-quote{margin:var(--s-3) 0 0;padding:12px 16px;border-left:3px solid var(--primary);border-radius:0 var(--r-md) var(--r-md) 0;background:var(--surface-2);color:var(--text-2);font-size:var(--fs-sm);line-height:1.7}

/* ---------- 表单 ---------- */
.vc-form{margin-top:var(--s-5)}
.field .req{font-weight:500;color:var(--danger)}
.field .count{align-self:flex-end;font-size:var(--fs-xs);color:var(--text-3);font-variant-numeric:tabular-nums}
.vc-check{display:flex;align-items:flex-start;gap:10px;padding:12px 14px;border-radius:var(--r-md);border:1px solid var(--border-strong);background:var(--surface);color:var(--text);font-size:var(--fs-sm);line-height:1.6;cursor:pointer}
.vc-check input{width:18px;height:18px;margin:2px 0 0;flex:none;accent-color:var(--primary)}
.vc-check.is-on{border-color:var(--primary);background:var(--primary-soft)}
.vc-check.is-invalid{border-color:var(--danger);box-shadow:0 0 0 3px var(--danger-soft)}
.vc-check .sub{display:block;margin-top:2px;font-size:var(--fs-xs);color:var(--text-3)}
.vc-part{display:flex;align-items:center;gap:var(--s-2);min-height:44px;font-weight:600}
.vc-fixed-value{display:flex;align-items:center;gap:var(--s-2);min-height:44px;padding:0 14px;border-radius:var(--r-md);background:var(--surface-2);color:var(--text);font-weight:600}

/* 行内状态（成功 / 失败），同 /my 的 .status */
.vc-status{display:none;align-items:flex-start;gap:var(--s-2);padding:12px 16px;border-radius:var(--r-md);background:var(--surface-2);color:var(--text-2);font-size:var(--fs-sm);line-height:1.6}
.vc-status.show{display:flex}
.vc-status > .i{flex:none;margin-top:3px}
.vc-status.ok{background:var(--success-soft);color:var(--success)}
.vc-status.err{background:var(--danger-soft);color:var(--danger)}
.vc-status .body{min-width:0}
.vc-status .body p + p{margin-top:4px}
.vc-status .acts{display:flex;flex-wrap:wrap;gap:var(--s-2);margin-top:var(--s-2)}
.vc-status a{color:inherit;font-weight:700;text-decoration:underline}
.vc-status .btn{text-decoration:none}

/* 上传进度 */
.vc-upload{display:flex;flex-direction:column;gap:6px}
.vc-upload .bar{height:8px;border-radius:4px;background:var(--surface-3);overflow:hidden}
.vc-upload .bar i{display:block;height:100%;width:0;background:var(--primary);transition:width .2s}
.vc-upload .bar.is-indet i{width:30% !important;animation:vc-indet 1.2s ease-in-out infinite}
.vc-upload .txt{font-size:var(--fs-sm);color:var(--text-2);font-variant-numeric:tabular-nums}
@keyframes vc-indet{0%{transform:translateX(-100%)}100%{transform:translateX(340%)}}

/* ---------- 录音 / 上传组件 ---------- */
.rec{display:flex;flex-direction:column;gap:var(--s-4)}
.rec .seg{flex-wrap:wrap;max-width:100%}
.rec .seg button{height:40px}
.rec .seg button:disabled{opacity:.45;cursor:not-allowed}
.rec .seg button:focus-visible{outline:2px solid var(--focus);outline-offset:2px}
.rec-panel{display:flex;flex-direction:column;gap:var(--s-4)}
.rec-opts{display:flex;flex-wrap:wrap;align-items:center;gap:var(--s-3) var(--s-5)}
.rec-opts .field{gap:4px}
.rec-vol{display:flex;align-items:center;gap:var(--s-2);font-size:var(--fs-sm);color:var(--text-2)}
.rec-vol input{width:140px;accent-color:var(--primary)}
.rec-stage{display:grid;grid-template-columns:auto minmax(0,1fr);gap:var(--s-5);align-items:center;padding:var(--s-5);border-radius:var(--r-lg);background:var(--surface-2)}
.rec-btn{display:inline-flex;align-items:center;justify-content:center;gap:var(--s-2);height:52px;padding:0 24px;border:0;border-radius:var(--r-pill);background:var(--danger);color:#fff;font-size:var(--fs-md);font-weight:700;cursor:pointer;white-space:nowrap}
.rec-btn .dot{width:12px;height:12px;background:#fff}
.rec-btn.is-rec{background:var(--text);color:var(--bg)}
.rec-btn.is-rec .dot{border-radius:2px;background:currentColor}
.rec-btn:disabled{opacity:.5;cursor:default}
.rec-btn:focus-visible{outline:2px solid var(--focus);outline-offset:3px}
.rec-live{min-width:0}
.rec-time{font-size:var(--fs-2xl);font-weight:700;font-variant-numeric:tabular-nums;line-height:1.2;color:var(--text)}
.rec-time .lim{font-size:var(--fs-sm);font-weight:500;color:var(--text-3)}
.rec-meter{height:6px;margin-top:var(--s-2);border-radius:3px;background:var(--surface-3);overflow:hidden}
.rec-meter i{display:block;height:100%;width:0;background:var(--success);transition:width .08s linear}
.rec-meter.is-hot i{background:var(--danger)}
.rec-msg{margin-top:var(--s-2);font-size:var(--fs-sm);color:var(--text-2);min-height:1.6em}
.rec-msg.is-error{color:var(--danger)}
.rec-file{display:flex;flex-wrap:wrap;align-items:center;gap:var(--s-3)}
.rec-file input[type=file]{position:absolute;width:1px;height:1px;opacity:0;pointer-events:none}
.rec-file input[type=file]:focus-visible + label{outline:2px solid var(--focus);outline-offset:2px}
.rec-take{display:flex;flex-direction:column;gap:var(--s-3);padding:var(--s-5);border-radius:var(--r-lg);border:1px solid var(--border-strong)}
.rec-take .head{display:flex;flex-wrap:wrap;align-items:baseline;gap:var(--s-1) var(--s-3)}
.rec-take .head b{font-size:var(--fs-md)}
.rec-take .meta{font-size:var(--fs-sm);color:var(--text-3);font-variant-numeric:tabular-nums}
.rec-take audio{width:100%}
.rec-take .acts{display:flex;flex-wrap:wrap;gap:var(--s-2)}
.rec-warn{display:flex;flex-direction:column;gap:var(--s-2)}

/* ---------- 投稿码 ---------- */
.vc-code{font-family:var(--font-mono);font-weight:700;letter-spacing:.04em;word-break:break-all;color:var(--text)}
.vc-code-big{font-size:var(--fs-2xl);line-height:1.3}
.vc-code-row{display:flex;flex-wrap:wrap;align-items:center;gap:var(--s-2) var(--s-3);margin-top:var(--s-3)}
.vc-code-row .lbl{font-size:var(--fs-sm);color:var(--text-3)}
.vc-done{display:flex;flex-direction:column;gap:var(--s-4)}
.vc-done .acts{display:flex;flex-wrap:wrap;gap:var(--s-2)}

/* ---------- 我的合唱 ---------- */
.vc-lookup{margin-top:var(--s-4)}
.vc-lookup .field .error{margin-top:2px}
.vc-rows .list-row{width:100%;text-align:left;font:inherit;background:var(--surface);border-left:0;border-right:0;border-bottom:0;cursor:pointer}
.vc-rows .list-row:first-child{border-top:0}
.vc-rows .list-row .grow{min-width:0}
.vc-rows .list-row .sub{word-break:break-all}
.vc-rows .chev{flex:none}
.vc-detail > * + *{margin-top:var(--s-5)}
.vc-detail .card-pad > * + *{margin-top:var(--s-4)}
.vc-detail .info-list{align-items:start}
.vc-detail .info-list dd{word-break:break-word;white-space:pre-wrap}
.vc-actions{display:flex;flex-wrap:wrap;gap:var(--s-2)}
.btn-danger-text{color:var(--danger)}
.btn-danger-text:hover{background:var(--danger-soft)}
.vc-panel{padding:var(--s-5);border-radius:var(--r-lg);border:1px solid var(--border-strong);background:var(--surface)}
.vc-panel > h3{font-size:var(--fs-md);font-weight:700;margin-bottom:var(--s-4)}
.vc-versions{display:flex;flex-direction:column;margin-top:var(--s-4)}
.vc-version{display:flex;flex-direction:column;gap:var(--s-2);padding:var(--s-4) 0;border-top:1px solid var(--border)}
.vc-version:first-child{border-top:0;padding-top:0}
.vc-version .head{display:flex;flex-wrap:wrap;align-items:center;gap:var(--s-2)}
.vc-version .head b{font-size:var(--fs-md)}
.vc-version .meta{font-size:var(--fs-xs);color:var(--text-3);font-variant-numeric:tabular-nums}
.vc-version .play{display:flex;flex-wrap:wrap;align-items:center;gap:var(--s-2) var(--s-3)}
.vc-version audio{flex:1 1 260px;min-width:0;max-width:100%}

/* ---------- 确认框（同 /my 的 .modal） ---------- */
.modal{position:fixed;inset:0;z-index:9000;display:flex;align-items:flex-start;justify-content:center;padding:18vh var(--s-4) var(--s-4)}
.modal-scrim{position:absolute;inset:0;background:rgba(8,12,20,.45)}
.modal-card{position:relative;width:min(480px,100%);max-height:76vh;overflow:auto;padding:var(--s-6);display:flex;flex-direction:column;gap:var(--s-3)}
.modal-title{font-size:var(--fs-lg);font-weight:700}
.modal-text{color:var(--text-2);font-size:var(--fs-sm);line-height:1.7}
.modal-actions{justify-content:flex-end}

@media (max-width:720px){
  .lyrics{padding:var(--s-5)}
  .lyric{grid-template-columns:40px minmax(0,1fr)}
  .lyric p{font-size:18px}
  .mat{grid-template-columns:auto minmax(0,1fr);gap:var(--s-3)}
  .mat .mat-dl{grid-column:1 / -1;justify-self:start}
  .rec-stage{grid-template-columns:minmax(0,1fr);gap:var(--s-4);padding:var(--s-4)}
  .rec-btn{width:100%}
  .vc-code-big{font-size:var(--fs-xl)}
  .modal{align-items:flex-end;padding:0}
  .modal-card{width:100%;max-height:88vh;border-radius:var(--r-lg) var(--r-lg) 0 0;padding:var(--s-5) var(--s-4) calc(var(--s-5) + env(safe-area-inset-bottom))}
  .modal-actions .btn{flex:1 1 0}
  .vc-detail .info-list{grid-template-columns:minmax(0,1fr);gap:2px}
  .vc-detail .info-list dd{margin-bottom:var(--s-2)}
}
@media (prefers-reduced-motion:reduce){
  .vc-upload .bar.is-indet i{animation:none;width:100% !important;opacity:.5}
  .rec-meter i,.vc-upload .bar i{transition:none}
}