/* ============================================================
   css/panels/panels-episode.css — 「外文 · 剧集词库」的排版（2028-09 第 3 窗口）
   ------------------------------------------------------------
   规矩（照公共执行协议 2.3 / 2.4 / 2.5，与 kstar-ui 那一档）：
     · **只消费已有的令牌**（--ec-ink / --ec-sub / --ec-line / --ec-line-soft / --ec-rose-ink /
       --ec-gold-ink / --ec-surface / --ec-radius），不在这里另定义一套颜色
     · 前缀 `ep-` 独占；公共零件（返回头 .ec-header、目录行 .ec-li-row、按钮 .ec-btn、
       抽屉 .ec-sheet、三态 .ec-state…）一律复用，绝不在这一份里重画
     · 触摸目标 ≥44px（视觉本体可以更小，用透明外层扩大命中区）
     · 禁 emoji、禁系统默认控件、禁文字阴影、禁彩虹渐变
     · 支持 prefers-reduced-motion: reduce（见文件末尾）
     · 窄屏 <370px 与 400+ 都要好看（见文件末尾两段媒体查询）
   ============================================================ */

/* ===== 一、加一集：那一行输入 + 「认出来了」那一行 ===== */
.ep-input { width: 100%; }
.ep-parse { min-height: 0; }
.ep-parse-ok {
    display: flex; align-items: baseline; flex-wrap: wrap; gap: 8px;
    margin-top: 10px; padding: 10px 12px;
    border: 1px solid var(--ec-line-soft); border-radius: var(--ec-radius-s);
    background: var(--ec-surface);
}
.ep-parse-en {
    font-family: var(--font-display); font-style: italic; font-size: 11.5px;
    color: var(--ec-gold-ink); letter-spacing: 0.5px;
}
.ep-parse-zh { font-size: 15px; font-weight: 600; color: var(--ec-ink); }
.ep-parse-hint { flex: 1 1 100%; font-size: 11.5px; line-height: 1.7; color: var(--ec-sub); }
.ep-parse-no { margin-top: 10px; font-size: 12px; line-height: 1.7; color: var(--ec-sub); }

/* ===== 二、台词：粘贴框 / 预览开头几行 ===== */
.ep-paste {
    width: 100%; min-height: 132px; margin-top: 10px;
    resize: vertical; line-height: 1.85;
    font-family: var(--font-body);
}
.ep-hint { margin-top: 8px; font-size: 11.5px; line-height: 1.7; color: var(--ec-sub); }
.ep-head-lines {
    margin-top: 10px; padding: 10px 12px;
    border-left: 2px solid rgba(201, 168, 168, 0.45);
    background: rgba(201, 168, 168, 0.05);
}
.ep-head-line {
    font-size: 12.5px; line-height: 1.9; color: var(--ec-ink);
    overflow-wrap: anywhere;
}
.ep-head-line + .ep-head-line { margin-top: 4px; }
.ep-note-line { margin: 4px 0 12px; font-size: 11.5px; line-height: 1.75; color: var(--ec-sub); }
.ep-note-warn {
    margin: 10px 0 0; padding: 10px 12px;
    border: 1px solid rgba(196, 168, 106, 0.35); border-radius: var(--ec-radius-s);
    color: var(--ec-gold-ink);
}
/* 帮她找到的那些页面：<a> 长得跟目录行一样（点开是去她自己的浏览器，不在应用里跳走） */
a.ep-link { text-decoration: none; color: inherit; display: flex; }
.ep-link-t {
    display: block; font-size: 13.5px; line-height: 1.6; color: var(--ec-ink);
    overflow-wrap: anywhere;
}
a.ep-link:active { background: rgba(201, 168, 168, 0.10); }

/* ===== 三、剧集列表那一行：中文正题（英文花字是书名，说明在下面）===== */
.ep-row-zh {
    display: block; font-size: 14.5px; font-weight: 500; color: var(--ec-ink);
    margin-top: 3px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.ep-head-btn { flex-shrink: 0; }
.ec-ep .ep-danger .ec-li-row-en { color: var(--ec-rose-ink); }
.ep-src { text-align: left; }

/* ===== 四、这一集的台词（一句一行；点一句就去听那一句）===== */
.ep-script {
    margin-top: 12px;
    border-top: 1px solid var(--ec-line);
}
.ep-line {
    display: flex; align-items: flex-start; gap: 10px; width: 100%;
    padding: 11px 2px; border: 0; border-bottom: 1px solid var(--ec-line-soft);
    background: none; text-align: left; cursor: pointer;
    font-family: var(--font-body);
    transition: background var(--ec-dur) var(--ec-ease), padding-left var(--ec-dur) var(--ec-ease);
}
.ep-line:active { background: rgba(201, 168, 168, 0.10); padding-left: 6px; }
.ep-line-play {
    flex-shrink: 0; width: 22px; height: 22px; margin-top: 1px;
    display: inline-flex; align-items: center; justify-content: center;
    border: 1px solid var(--ec-line-strong); border-radius: 50%;
    color: var(--ec-rose-ink);
}
.ep-line-t {
    flex: 1 1 auto; min-width: 0;
    font-size: 13.5px; line-height: 1.8; color: var(--ec-ink);
    overflow-wrap: anywhere;
}
.ep-line-at {
    flex-shrink: 0; padding-top: 2px;
    font-family: var(--font-mono, monospace); font-size: 10.5px; color: var(--ec-sub);
    font-variant-numeric: tabular-nums;
}

/* ===== 五、「这个词出现在哪几句」===== */
.ep-word-lines { margin-top: 8px; }
.ep-wline {
    padding: 10px 0 12px; border-bottom: 1px solid var(--ec-line-soft);
}
.ep-wline-w {
    display: flex; align-items: baseline; gap: 8px;
    font-family: var(--font-display); font-size: 15px; color: var(--ec-ink);
}
.ep-wline-n { font-family: var(--font-body); font-size: 11px; color: var(--ec-sub); }
.ep-wline-s {
    display: flex; align-items: flex-start; gap: 8px; width: 100%;
    margin-top: 6px; padding: 6px 0; border: 0; background: none;
    text-align: left; cursor: pointer; font-family: var(--font-body);
    font-size: 12.5px; line-height: 1.75; color: var(--ec-sub);
    overflow-wrap: anywhere;
}
.ep-wline-play {
    flex-shrink: 0; width: 18px; height: 18px; margin-top: 2px;
    display: inline-flex; align-items: center; justify-content: center;
    border: 1px solid var(--ec-line-strong); border-radius: 50%;
    color: var(--ec-rose-ink);
}
.ep-wline-s:active { color: var(--ec-ink); }

/* ===== 六、挑词：候选词那一列（自绘勾选，禁系统 checkbox 外观）===== */
.ec-ep-mode-note { margin: 12px 0 0; }
.ep-cands { margin-top: 6px; }
.ep-cand {
    display: flex; align-items: flex-start; gap: 4px;
    border-bottom: 1px solid var(--ec-line-soft);
    opacity: 0; transform: translateY(4px);
    transition: opacity 0.24s var(--ec-ease), transform 0.24s var(--ec-ease), background var(--ec-dur) var(--ec-ease);
}
.ep-cands.is-in .ep-cand { opacity: 1; transform: none; }
.ep-cand.is-on { background: rgba(201, 168, 168, 0.06); }
/* 勾选框：视觉 22px，命中区撑到 44px（透明外层） */
.ep-cand-box {
    flex: 0 0 44px; min-height: 52px; padding: 15px 0 0 2px;
    border: 0; background: none; cursor: pointer;
}
.ep-cand-tick {
    display: flex; align-items: center; justify-content: center;
    width: 22px; height: 22px;
    border: 1px solid var(--ec-line-strong); border-radius: 6px;
    font-size: 13px; line-height: 1; color: transparent;
    transition: background var(--ec-dur) var(--ec-ease), border-color var(--ec-dur) var(--ec-ease), color var(--ec-dur) var(--ec-ease);
}
.ep-cand.is-on .ep-cand-tick {
    background: var(--rose); border-color: var(--rose); color: #fff;
}
.ep-cand-box:active .ep-cand-tick { transform: scale(0.92); }
.ep-cand-main {
    flex: 1 1 auto; min-width: 0; padding: 14px 0 14px 4px;
    border: 0; background: none; text-align: left; cursor: pointer;
    font-family: var(--font-body);
}
.ep-cand-w {
    display: block; font-family: var(--font-display); font-size: 17px; line-height: 1.3; color: var(--ec-ink);
    overflow-wrap: anywhere;
}
.ep-cand-ph {
    margin-left: 8px; font-family: var(--font-mono, monospace);
    font-size: 11px; color: var(--ec-sub); letter-spacing: 0.3px;
}
.ep-cand-z { display: block; margin-top: 3px; font-size: 13px; line-height: 1.65; color: var(--ec-ink); }
.ep-cand-m { display: block; margin-top: 4px; font-size: 11.5px; line-height: 1.65; color: var(--ec-sub); }
.ep-cand-more {
    flex: 0 0 44px; min-height: 52px; border: 0; background: none; cursor: pointer;
    color: var(--ec-sub); display: flex; align-items: center; justify-content: center;
}
.ep-cand-more:active { color: var(--ec-rose-ink); transform: scale(0.94); }

/* ===== 七、窄屏（<370）与 400+：只收间距与字号，绝不改结构 ===== */
@media (max-width: 370px) {
    .ep-cand-box { flex-basis: 40px; }
    .ep-cand-main { padding-right: 2px; }
    .ep-cand-more { flex-basis: 40px; }
    .ep-cand-w { font-size: 16px; }
    .ep-line-t { font-size: 13px; }
    .ep-parse-ok { padding: 9px 10px; }
}
@media (min-width: 400px) {
    .ec-ep .ec-page-sub { max-width: 26em; }
}

/* ===== 八、减少动效（必须支持）===== */
@media (prefers-reduced-motion: reduce) {
    .ep-cand, .ep-cands.is-in .ep-cand { opacity: 1; transform: none; transition: none; }
    .ep-line, .ep-cand-box:active .ep-cand-tick, .ep-cand-more:active { transition: none; transform: none; }
}