/* ==========================================================================
   Hongguo 详情页样式（detail.css）
   --------------------------------------------------------------------------
   职责：详情视图（选集 / 复制密钥 / 复制 ffmpeg / 播放）全部 class hooks，
   与 web/js/detail.js 头部注释的 CSS 契约一一对应（REVIEW_NOTES.md P1-3）。
   变量契约：只引用 web/css/tokens.css 的 --color-* 等 token（TOKEN_SOT.md
   蓝系冻结，禁止 --hg-*、禁止裸 hex）。共享组件 .btn / .card / .code-chip /
   .toast / .empty-state 已由 app.css 落地，本文件只做视图专属结构与扩展。
   规格依据：design-system/MASTER.md §6.1/§6.4/§6.6/§6.8/§6.9 +
   design-system/pages/detail.md（封面 144/120、选集网格 72px、高级参数 96px）。
   移动优先；断点 min-width: 768px。
   ========================================================================== */

/* ------------------------------------------------------------------
   1. 视图容器（detail.js renderShell 只加类，显隐走 app.css .view[hidden]）
   ------------------------------------------------------------------ */
.detail-view {
  display: flex;
  flex-direction: column;
  gap: var(--space-6); /* 返回行距 Hero 24px（detail.md §3.1） */
}

/* 防御：.detail-view 的 display 不得压过 hidden（壳层显隐唯一入口） */
.detail-view[hidden] {
  display: none;
}

/* ------------------------------------------------------------------
   2. 返回行（detail.md §3.1：Ghost sm；MASTER §6.1 Ghost）
   ------------------------------------------------------------------ */
.detail-back {
  position: relative; /* 窄屏触控扩展区定位 */
  align-self: flex-start;
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  min-height: var(--control-height-sm);
  padding: 0 var(--space-3);
  border-radius: var(--radius-md);
  font-size: var(--text-sm);
  color: var(--color-text-secondary);
  transition: background-color var(--dur-fast) var(--ease-standard),
    color var(--dur-fast) var(--ease-standard);
}

.detail-back:hover {
  background: var(--color-fill);
  color: var(--color-text);
}

/* ------------------------------------------------------------------
   3. Hero 面板（detail.md §3.2：白卡 padding 24，封面 3/4）
   ------------------------------------------------------------------ */
.series-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-4);
  padding: var(--space-6);
  text-align: center;
}

.series-cover {
  width: 120px; /* 移动端封面宽（detail.md §3.2） */
  aspect-ratio: var(--cover-ratio);
  flex: none;
  overflow: hidden;
  border-radius: var(--radius-lg);
  background: var(--color-surface-sunken);
  box-shadow: var(--shadow-card);
}

.series-cover img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* 缺封面占位：sunken 底 + 居中胶片符号（无 hex，stroke 用命名色+透明度） */
.series-cover--empty {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-opacity='0.16' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='2.5' y='4' width='19' height='16' rx='3'/%3E%3Cpath d='M7 4v16M17 4v16M2.5 9h4.5M2.5 15h4.5M17 9h4.5M17 15h4.5'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: center;
  background-size: var(--icon-lg);
}

.series-info {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.series-title {
  margin: 0;
  font-size: var(--text-xl);
  font-weight: 600;
  line-height: 1.25;
  display: -webkit-box; /* 剧名最多 2 行（detail.md §3.2） */
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.series-meta {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: var(--space-2);
}

/* 集数 tag（MASTER §6.4：accent-soft 底必须配 accent-strong 字） */
.series-tag {
  display: inline-flex;
  align-items: center;
  height: 20px; /* §6.4 徽章规格值 */
  padding: 0 var(--space-2);
  border-radius: var(--radius-sm);
  background: var(--color-accent-soft);
  color: var(--color-accent-strong);
  font-size: var(--text-xs);
  font-weight: 500;
  white-space: nowrap;
}

.series-id {
  font-family: var(--font-mono);
  font-feature-settings: var(--font-feature-tnum);
  font-size: var(--text-xs);
  color: var(--color-text-tertiary);
}

/* 简介最多 3 行（detail.md §3.2），无简介字段时 JS 不渲染本块 */
.series-intro {
  margin: 0;
  font-size: var(--text-md);
  line-height: 1.5;
  color: var(--color-text-secondary);
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* ------------------------------------------------------------------
   4. 选集区（detail.js：网格 + >60 折叠展开）
   ------------------------------------------------------------------ */
.episode-section {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.episode-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-3);
}

.episode-title {
  margin: 0;
  font-size: var(--text-lg);
  font-weight: 600;
  line-height: 1.25;
}

.episode-count {
  font-size: var(--text-sm);
  color: var(--color-text-secondary);
}

.episode-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(72px, 1fr)); /* 选集格规格值 */
  gap: var(--space-2);
}

.episode-btn {
  height: var(--touch-target-min); /* 44px，天然满足触控目标 */
  border: 1px solid var(--color-border); /* border-box：1.5px 不挤布局 */
  border-radius: var(--radius-md);
  background: var(--color-surface);
  font-size: var(--text-md);
  line-height: 1;
  font-feature-settings: var(--font-feature-tnum); /* 集数等宽数字 */
  color: var(--color-text);
  transition: background-color var(--dur-fast) var(--ease-standard),
    border-color var(--dur-fast) var(--ease-standard),
    color var(--dur-fast) var(--ease-standard);
}

.episode-btn:hover:not(.is-active):not(:disabled) {
  background: var(--color-surface-sunken);
}

/* 当前集：accent-soft 底 + accent-strong 字 + 1.5px accent 描边 */
.episode-btn.is-active {
  background: var(--color-accent-soft);
  color: var(--color-accent-strong);
  border-width: 1.5px;
  border-color: var(--color-accent);
  font-weight: 500;
}

.episode-btn:disabled {
  opacity: 0.45;
  cursor: default;
  pointer-events: none;
}

/* “展开全部 / 收起”：Ghost 居中 */
.episode-toggle {
  align-self: center;
  min-height: var(--touch-target-min);
  padding: 0 var(--space-4);
  border-radius: var(--radius-md);
  font-size: var(--text-sm);
  color: var(--color-text-secondary);
  transition: background-color var(--dur-fast) var(--ease-standard),
    color var(--dur-fast) var(--ease-standard);
}

.episode-toggle:hover {
  background: var(--color-fill);
  color: var(--color-text);
}

/* ------------------------------------------------------------------
   5. 操作面板（detail.js 灵魂区：密钥条 / ffmpeg 条 / 播放 / 高级参数）
   ------------------------------------------------------------------ */
.detail-panel {
  padding: var(--space-5);
  transition: opacity var(--dur-fast) var(--ease-standard); /* 120ms 交叉淡入 */
}

.detail-panel.is-switching {
  opacity: 0; /* detail.js 换集时短暂置 0 再渲染新内容，避免布局跳动 */
}

.panel-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--space-3);
  margin-bottom: var(--space-4);
}

.panel-episode {
  font-size: var(--text-md);
  font-weight: 600;
}

.variant-row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
}

/* 清晰度单选 chip（MASTER §6.4：选中 = accent-soft + accent-strong + 1px accent） */
.detail-view .chip {
  position: relative;
  display: inline-flex;
  align-items: center;
  min-height: var(--control-height-sm);
  padding: 0 var(--space-3);
  border: 1px solid transparent; /* 选中描边不挤布局（border-box） */
  border-radius: var(--radius-sm);
  background: var(--color-fill);
  font-size: var(--text-xs);
  font-weight: 500;
  color: var(--color-text-secondary);
  transition: background-color var(--dur-fast) var(--ease-standard),
    border-color var(--dur-fast) var(--ease-standard),
    color var(--dur-fast) var(--ease-standard);
}

.detail-view .chip:hover:not(.is-active) {
  background: var(--color-fill-strong);
  color: var(--color-text);
}

.detail-view .chip.is-active {
  background: var(--color-accent-soft);
  color: var(--color-accent-strong);
  border-color: var(--color-accent);
}

.panel-row + .panel-row {
  margin-top: var(--space-4);
}

.panel-label {
  display: block;
  margin-bottom: var(--space-2);
  font-size: var(--text-sm);
  color: var(--color-text-secondary);
}

/* code-chip 基础形在 app.css；这里补 detail 语义态 */
.detail-view .code-chip > code {
  user-select: all; /* 32 位密钥一键全选（MASTER §3/§6.6） */
}

.detail-view .code-chip > code.is-empty {
  font-family: var(--font-sans); /* 提示文案不是代码 */
  color: var(--color-text-tertiary);
}

/* 单集密钥失败：“获取失败，点此重试”（pages/detail.md 状态表） */
.chip-retry {
  font-size: var(--text-sm);
  color: var(--color-accent-strong);
}

.chip-retry:hover {
  text-decoration: underline;
}

.panel-actions {
  margin-top: var(--space-5);
}

/* 播放：详情页唯一 Primary（MASTER §1.2），高 44 */
.play-btn {
  width: 100%; /* 移动端主按钮通栏（detail.md §3.2） */
  height: var(--touch-target-min);
  padding: 0 var(--space-5);
}

/* 复制成功反馈：仅文字/描边变 success 色，图标已由 JS 换 ✓（功能色不单独表意） */
.detail-view .btn.is-copied {
  color: var(--color-success);
}

/* ------------------------------------------------------------------
   6. 高级参数（detail.md §3.5：默认折叠；字段名 96px + mono 值横滚）
   ------------------------------------------------------------------ */
.detail-advanced {
  margin-top: var(--space-5);
  padding-top: var(--space-4);
  border-top: 1px solid var(--color-divider);
}

.detail-advanced > summary {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  padding: var(--space-1) var(--space-2);
  border-radius: var(--radius-sm);
  font-size: var(--text-sm);
  color: var(--color-text-secondary);
  cursor: pointer;
  list-style: none;
  transition: color var(--dur-fast) var(--ease-standard);
}

.detail-advanced > summary::-webkit-details-marker {
  display: none;
}

.detail-advanced > summary::before {
  content: "›";
  transition: transform var(--dur-base) var(--ease-standard); /* chevron 旋转 180ms */
}

.detail-advanced[open] > summary::before {
  transform: rotate(90deg);
}

.detail-advanced > summary:hover {
  color: var(--color-text);
}

.advanced-list {
  margin: var(--space-3) 0 0;
  display: grid;
  grid-template-columns: 96px minmax(0, 1fr); /* 字段名列宽（detail.md §3.5） */
  column-gap: var(--space-3);
  row-gap: var(--space-2);
}

.advanced-list > dt {
  font-size: var(--text-sm);
  color: var(--color-text-secondary);
}

.advanced-list > dd {
  margin: 0;
  font-family: var(--font-mono);
  font-feature-settings: var(--font-feature-tnum);
  font-size: var(--text-xs);
  color: var(--color-text);
  overflow-x: auto; /* 原始值完整可复制，视觉横向滚动 */
  white-space: nowrap;
}

/* ------------------------------------------------------------------
   7. 骨架屏（MASTER §6.8：版式 1:1；shimmer 与 search.css 同构、作用域隔离）
   ------------------------------------------------------------------ */
.detail-skeleton {
  display: flex;
  flex-direction: column;
  gap: var(--space-6);
}

.detail-view .skeleton-block {
  position: relative;
  display: block;
  overflow: hidden;
  background: var(--color-fill-strong);
}

/* 45° 半透明白扫光，1.2s 线性无限（与 search.css 同名 keyframes，定义一致） */
.detail-view .skeleton-block::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    45deg,
    transparent 35%,
    color-mix(in srgb, var(--color-surface) 55%, transparent) 50%,
    transparent 65%
  );
  transform: translateX(-100%);
  animation: skeleton-sweep 1.2s linear infinite;
}

@keyframes skeleton-sweep {
  to {
    transform: translateX(100%);
  }
}

.skeleton-cover {
  width: 120px;
  aspect-ratio: var(--cover-ratio);
  flex: none;
  border-radius: var(--radius-lg);
}

.skeleton-lines {
  flex: 1;
  width: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: var(--space-3);
}

.skeleton-line {
  height: var(--space-3);
  border-radius: var(--radius-sm);
}

.detail-view .w-60 {
  width: 60%;
}

.detail-view .w-70 {
  width: 70%;
}

.detail-view .w-90 {
  width: 90%;
}

.skeleton-episode {
  height: var(--touch-target-min);
  border-radius: var(--radius-md);
}

.skeleton-chip {
  width: 55%;
  height: var(--space-3);
  border-radius: var(--radius-sm);
}

/* tokens.css 注释：骨架 shimmer 由组件层退化为静态灰块 */
@media (prefers-reduced-motion: reduce) {
  .detail-view .skeleton-block {
    background: var(--color-fill);
  }

  .detail-view .skeleton-block::after {
    display: none;
  }
}

/* ------------------------------------------------------------------
   8. 错误 / 空态（MASTER §6.9：居中、说明 + 重试；不用插画）
   ------------------------------------------------------------------ */
.detail-error {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-4);
  padding: var(--space-12) var(--space-4);
  text-align: center;
}

.detail-error-text {
  margin: 0;
  font-size: var(--text-lg);
  font-weight: 500;
  color: var(--color-text);
}

.detail-empty {
  padding: var(--space-8) var(--space-4);
  text-align: center;
  font-size: var(--text-sm);
  color: var(--color-text-secondary);
}

/* ------------------------------------------------------------------
   9. 窄屏触控补足（MASTER §5/§6.1：不足 44px 的可点元素加透明扩展区）
   ------------------------------------------------------------------ */
.detail-back::after,
.detail-view .chip::after {
  content: "";
  position: absolute;
  inset: calc((var(--touch-target-min) - var(--control-height-sm)) / -2);
}

/* ------------------------------------------------------------------
   10. 桌面断点（≥768px：Hero 横排、封面 144、剧名 2xl、取消触控扩展区）
   ------------------------------------------------------------------ */
@media (min-width: 768px) {
  .series-card {
    flex-direction: row;
    align-items: flex-start;
    gap: var(--space-5);
    text-align: left;
  }

  .series-cover,
  .skeleton-cover {
    width: 144px; /* 桌面封面宽（detail.md §3.2） */
  }

  .series-title {
    font-size: var(--text-2xl);
  }

  .series-meta {
    justify-content: flex-start;
  }

  .play-btn {
    width: auto; /* 桌面主按钮宽度自适应内容 */
  }

  .detail-back::after,
  .detail-view .chip::after {
    content: none;
  }
}