/* ============================================================================
   云课堂 · 集成桥接样式 v2（integration bridge）
   ----------------------------------------------------------------------------
   定位：app.css（设计系统，122 个 yk- 类）之后的**补丁层**。
   内容：只包含 app.css 里【没有任何规则】的类，逐条用词边界正则核对过，
         因此不会覆盖、不会重定义设计系统里已有的任何选择器。
   令牌：完全沿用 app.css 的 :root 变量（--yk-primary / --yk-sp-* / --yk-r-* / --yk-fs-*）。
   ============================================================================ */

/* ---------------------------------------------------------------------------
   1. 首页：学段宫格（app.css 只有 yk-stats，语义是"统计数字"，不是"入口宫格"）
   --------------------------------------------------------------------------- */
.yk-stages{
  display:grid;grid-template-columns:repeat(3,1fr);
  gap:var(--yk-sp-2);padding:var(--yk-sp-3);
  background:var(--yk-surface);
}
.yk-stage{
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:2px;min-height:62px;padding:var(--yk-sp-2) 4px;
  background:var(--yk-primary-soft2);
  border:1px solid #ffe0c2;border-radius:var(--yk-r-sm);
  text-decoration:none;text-align:center;
  transition:transform var(--yk-t-fast) var(--yk-ease),background var(--yk-t-fast);
  -webkit-tap-highlight-color:transparent;
}
.yk-stage:active{transform:scale(.97);background:var(--yk-primary-soft)}
.yk-stage b{font-size:var(--yk-fs-14);font-weight:600;color:var(--yk-ink1);line-height:1.2}
.yk-stage i{font-size:var(--yk-fs-11);font-style:normal;color:var(--yk-ink3)}
@media (min-width:620px){.yk-stages{grid-template-columns:repeat(5,1fr)}}

/* Hero 里的行动按钮区 */
.yk-hero-btn{display:flex;gap:var(--yk-sp-3);margin-top:var(--yk-sp-4)}
.yk-hero .yk-btn-ghost{
  min-height:40px;padding:0 18px;font-size:var(--yk-fs-14);
  color:#fff;background:rgba(255,255,255,.18);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.6);
}
.yk-hero .yk-btn-ghost:active{background:rgba(255,255,255,.3)}

/* ---------------------------------------------------------------------------
   2. 头部动作区（app.css 用 yk-hd-actions；主程序输出的是 yk-hd-act，两者都兜住）
   --------------------------------------------------------------------------- */
.yk-hd-act{
  display:flex;align-items:center;gap:var(--yk-sp-2);
  flex:0 0 auto;margin-left:auto;
}
.yk-hd-btn-p{background:#fff;color:var(--yk-primary-d);font-weight:600}
.yk-hd-btn-p:active{background:#fff3e8}

/* ---------------------------------------------------------------------------
   3. 课程详情页（app.css 只定义了 cnt / play 两个子元素，容器与其它子项缺失）
   --------------------------------------------------------------------------- */
.yk-detail{
  background:var(--yk-surface);
  border-radius:var(--yk-r-md);
  margin:var(--yk-sp-3) 0;
  overflow:hidden;
  box-shadow:var(--yk-sh-card);
}
.yk-detail-hero{position:relative;background:#f0f0f0}
.yk-detail-hero img{
  display:block;width:100%;height:auto;
  aspect-ratio:16/9;object-fit:cover;
}
.yk-detail-mask{
  position:absolute;left:0;right:0;bottom:0;
  display:flex;justify-content:flex-end;
  padding:var(--yk-sp-2) var(--yk-sp-3);
  background:linear-gradient(to top,rgba(0,0,0,.55),transparent);
  pointer-events:none;
}
.yk-detail-meta{
  display:flex;flex-wrap:wrap;gap:6px var(--yk-sp-3);
  margin-top:var(--yk-sp-2);
  font-size:var(--yk-fs-12);color:var(--yk-ink3);
}
.yk-detail-intro{
  margin-top:var(--yk-sp-3);padding-top:var(--yk-sp-3);
  border-top:1px solid var(--yk-line2);
  font-size:var(--yk-fs-13);line-height:1.75;color:var(--yk-ink2);
}
.yk-detail-bd{padding:var(--yk-sp-3) var(--yk-sp-4) var(--yk-sp-4)}
.yk-detail-bd h1{
  font-size:var(--yk-fs-18);font-weight:700;line-height:1.4;
  color:var(--yk-ink1);
}
.yk-tag-s{background:var(--yk-primary-soft)!important;color:var(--yk-primary-d)!important}

/* ---------------------------------------------------------------------------
   4. 播放页信息区（app.css 有 yk-player / yk-player-head / yk-play-back / yk-playopt，
      但没有外层的 yk-play、信息区 yk-play-info、标题区 yk-play-now、按钮排 yk-playctl）
   --------------------------------------------------------------------------- */
.yk-play{display:block}
.yk-play-info{
  background:var(--yk-surface);
  padding:var(--yk-sp-3) var(--yk-sp-4) var(--yk-sp-4);
  border-radius:0 0 var(--yk-r-md) var(--yk-r-md);
  margin-bottom:var(--yk-sp-3);
  box-shadow:var(--yk-sh-card);
}
.yk-play-now{flex:1;min-width:0}
.yk-play-now b{
  display:block;font-size:var(--yk-fs-16);font-weight:600;line-height:1.4;
  color:var(--yk-ink1);
  overflow:hidden;text-overflow:ellipsis;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;
}
.yk-play-now span{display:block;margin-top:3px;font-size:var(--yk-fs-12);color:var(--yk-ink3)}
.yk-playctl{display:flex;gap:var(--yk-sp-2);margin-top:var(--yk-sp-3)}
.yk-playctl .yk-btn{flex:1;min-height:40px;font-size:var(--yk-fs-13);padding:0 6px}
.yk-playctl .yk-btn[disabled]{opacity:.45;pointer-events:none}
.yk-player-lock{
  position:absolute;inset:0;display:flex;flex-direction:column;
  align-items:center;justify-content:center;gap:var(--yk-sp-2);
  padding:var(--yk-sp-4);text-align:center;
  background:rgba(0,0,0,.72);color:#fff;font-size:var(--yk-fs-13);
}
.yk-player-lock b{font-size:var(--yk-fs-16)}

/* ---------------------------------------------------------------------------
   5. 课程目录：列表容器 + 选集浮层列表（app.css 有 yk-ep / yk-episodes / yk-sheet*，
      但缺这两个"列表包裹层"）
   --------------------------------------------------------------------------- */
.yk-ep-list{display:block}
.yk-sheet-list{
  max-height:56vh;overflow-y:auto;
  -webkit-overflow-scrolling:touch;overscroll-behavior:contain;
}

/* ---------------------------------------------------------------------------
   6. 搜索页表单容器
   --------------------------------------------------------------------------- */
.yk-search{margin-bottom:var(--yk-sp-3)}

/* ---------------------------------------------------------------------------
   7. 卡片面板（"我的"页、后台用；app.css 有 yk-sec 但语义是整段卡片，
      yk-panel-hd/bd 是面板内的标题条与内容区）
   --------------------------------------------------------------------------- */
.yk-panel-hd{
  padding:var(--yk-sp-3) var(--yk-sp-4);
  font-size:var(--yk-fs-14);font-weight:700;color:var(--yk-ink1);
  border-bottom:1px solid var(--yk-line2);
}
.yk-panel-bd{padding:var(--yk-sp-3) var(--yk-sp-4)}
.yk-panel-bd .yk-chips{margin:0}

/* ---------------------------------------------------------------------------
   8. 表格（后台授权管理页）
   --------------------------------------------------------------------------- */
.yk-table{
  width:100%;border-collapse:collapse;
  font-size:var(--yk-fs-13);
  background:var(--yk-surface);
}
.yk-table th,
.yk-table td{
  padding:var(--yk-sp-2) var(--yk-sp-3);
  text-align:left;vertical-align:middle;
  border-bottom:1px solid var(--yk-line2);
  white-space:nowrap;
}
.yk-table th{
  font-size:var(--yk-fs-12);font-weight:600;
  color:var(--yk-ink3);background:#fafafa;
}
.yk-table td .yk-tag{margin:1px 2px 1px 0}

/* ---------------------------------------------------------------------------
   9. 登录/注册表单
   --------------------------------------------------------------------------- */
.yk-form-alt{
  margin-top:var(--yk-sp-3);
  font-size:var(--yk-fs-13);color:var(--yk-ink3);text-align:center;
}
.yk-form-alt a{color:var(--yk-primary-d);font-weight:500}

/* ---------------------------------------------------------------------------
   16. 选集浮层：内容区必须盖在遮罩之上
   app.css 给 .yk-sheet-mask 设了 z-index:80，而 .yk-sheet-bd 是 z-index:auto(0)，
   两者在 .yk-sheet 的层叠上下文内 → 遮罩压住内容区，
   表现为「关闭按钮和选集条目都点不动」（Playwright 报 pointer events intercepted）。
   给内容区提升层级即可；遮罩仍在浮层之外可点（点它关闭）。
   ⚠️ 这是只能靠真实点击才暴露的问题，DOM/尺寸检查都发现不了。
   --------------------------------------------------------------------------- */
.yk-sheet-bd{position:relative;z-index:1}
/* 浮层内部列表滚动时不要带动背景 */
.yk-sheet-list{overscroll-behavior:contain;-webkit-overflow-scrolling:touch}

/* ---------------------------------------------------------------------------
   17. 移动端收口（纯增强，不覆盖设计系统）
   --------------------------------------------------------------------------- */
@media (max-width:360px){
  .yk-stages{grid-template-columns:repeat(2,1fr)}
  .yk-playctl{flex-wrap:wrap}
  .yk-playctl .yk-btn{flex:1 1 46%}
}

/* ---------------------------------------------------------------------------
   14. 浮层打开时锁定背景滚动
   （app.css 的 .yk-noscroll 只是"隐藏滚动条"，不是"禁止滚动"，名称易混；
     这里用独立的 yk-lock 明确语义，由 JS 在 openSheet/closeSheet 时切换）
   --------------------------------------------------------------------------- */
body.yk-lock{overflow:hidden;touch-action:none}

/* ---------------------------------------------------------------------------
   15. PC 端内容居中限宽（原第 13 节，编辑时注释头曾被误删，已补回）
   设计系统给了 .yk-wrap{max-width:var(--yk-page);margin:0 auto}，
   但主程序的内容块是 .yk-main 的直接子元素，未套该容器 →
   在 1440px 屏上内容铺满整屏（卡片被拉得过大、阅读行长），观感不专业。
   这里只对已知内容块限宽居中；.yk-hero 不在列表里，**保持全宽橙色横幅**。
   ≥820px 才生效，手机端完全不受影响。
   --------------------------------------------------------------------------- */
@media (min-width:820px){
  .yk-main > .yk-sec,
  .yk-main > .yk-sec-hd,
  .yk-main > .yk-grid,
  .yk-main > .yk-chips,
  .yk-main > .yk-stages,
  .yk-main > .yk-detail,
  .yk-main > .yk-episodes,
  .yk-main > .yk-play,
  .yk-main > .yk-form,
  .yk-main > .yk-note,
  .yk-main > .yk-pager,
  .yk-main > .yk-empty,
  .yk-main > .yk-card-panel,
  .yk-main > .yk-table-wrap,
  .yk-main > .yk-actions,
  .yk-main > #yk-anon-cont > .yk-sec{
    max-width:var(--yk-page);
    margin-left:auto;
    margin-right:auto;
  }
}
/* 视频元素保持直角：黑底与白卡之间不留圆角接缝 */
.yk-player-box{position:relative;background:#000}
.yk-player-box video{border-radius:0}

/* ---------------------------------------------------------------------------
   11. 音频课播放器（不能塞进 16:9 视频框 —— 会变成一大块纯黑）
      改成深色紧凑卡：封面 + 标题 + 播放条，高度约 240px
   --------------------------------------------------------------------------- */
.yk-player-box.is-audio{
  aspect-ratio:auto;height:auto;min-height:0;
  background:#1b1b1f;
}
.yk-audio-box{
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:var(--yk-sp-3);
  padding:var(--yk-sp-6) var(--yk-sp-4);
  background:linear-gradient(160deg,#26262b,#131316);
}
.yk-audio-poster{
  width:112px;height:112px;object-fit:cover;
  border-radius:var(--yk-r-md);
  box-shadow:0 10px 28px rgba(0,0,0,.45);
}
.yk-audio-t{
  max-width:100%;
  font-size:var(--yk-fs-14);font-weight:600;line-height:1.4;
  color:#fff;text-align:center;
  overflow:hidden;text-overflow:ellipsis;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;
}
.yk-audio-box audio{
  width:100%;max-width:420px;
  background:transparent;border-radius:var(--yk-r-pill);
}
@media (max-width:360px){
  .yk-audio-poster{width:88px;height:88px}
}