/* ============================================================
   css/panels/panels-learning.css — 「外文」学习模块公共层（第一窗口的地基）
   ------------------------------------------------------------
   这里只放「整个学习模块都要用」的零件，不放某个页面的排版：
     · 设计与动效令牌（ec- 命名空间，**全模块唯一一份**）
     · 按钮 / 自己画的输入框与行内字段（禁系统默认框）
     · 进度条（细线）与能力值细线轨道
     · 四档掌握度的小标签（生词/认识/会用/熟练）
     · 加载中 / 空白 / 出错 三态
   外文自己的页面排版（返回头、首页、目录式分区入口、学习轨迹、语言与目标）
   在 css/panels/panels-ec.css；公共组件库（帮助小窗 / 抽屉 / 选择器 / 开关 /
   目录行 / 小测选项 / 单词卡 / 原文块 / 数值滚动）在 css/panels/panels-ec-ui.css
   —— 按「功能归属」分，不按「谁的文件」分。

   注意：令牌只许在这里定义一次 —— panels-ec.css 里曾经抄过一份同样的
   #nest-sub-vocabulary 令牌块（长期规则 #214「同一批类名在两个文件里各写一遍
   ＝改一处不生效」），第一窗口这一轮已删掉那一份，只留路牌注释。
   竖屏约束：宽度自适应，窄屏 <370px 不破版、不横向溢出。
   ============================================================ */

#nest-sub-vocabulary {
    /* —— 文字三层（每一层都按「能在纸底上读到」定值，小字也过 4.5:1）—— */
    --ec-ink: var(--text-primary);
    --ec-sub: #6F6860;
    --ec-faint: #8C847B;
    /* —— 细线三层（层级靠线，不靠色块）—— */
    --ec-line: rgba(180,160,140,0.22);
    --ec-line-soft: rgba(180,160,140,0.13);
    --ec-line-strong: rgba(180,160,140,0.34);
    /* —— 承托面（只能看不能吃：卡片/小窗/抽屉的底）—— */
    --ec-bg: var(--bg-primary);
    --ec-bg-soft: rgba(255,252,249,0.62);
    --ec-surface: var(--surface-solid);
    --ec-surface-2: rgba(255,252,249,0.86);
    --ec-fill: rgba(180,160,140,0.10);
    /* —— 强调色（当文字用时一律用 *-ink 那一档，才够对比度）—— */
    --ec-gold-ink: #7A6534;
    --ec-rose-ink: #A5757A;
    --ec-sage-ink: #5E7A6E;
    --ec-lav-ink: #6E6A8A;
    --ec-tap: rgba(201,168,168,0.10);
    /* —— 圆角 / 阴影（2028-09 甲方定：取 C 春日花园那档的圆角，其余仍按 A 纸张编辑风）—— */
    --ec-radius: 16px;
    --ec-radius-s: 12px;
    --ec-shadow-1: 0 1px 2px rgba(30,28,26,0.05);
    --ec-shadow-2: 0 4px 16px rgba(60,50,45,0.10), 0 1px 3px rgba(30,28,26,0.06);
    --ec-shadow-3: 0 10px 34px rgba(60,50,45,0.16), 0 2px 6px rgba(30,28,26,0.08);
    /* —— 动效（手册 2.4：只两档时长 + 一条曲线）—— */
    --ec-ease: cubic-bezier(0.22,0.61,0.36,1);
    --ec-dur: 0.2s;
    --ec-dur-fast: 0.16s;
    --ec-dur-slow: 0.26s;
    /* —— 层级（只此一份，别处不许再写 999）—— */
    --ec-z-sticky: 12;
    --ec-z-scrim: 20;
    --ec-z-sheet: 22;
    --ec-z-toast: 26;
    /* —— 触摸目标下限（不随屏幕缩水）—— */
    --ec-touch: 44px;
}
[data-theme-mode="dark"] #nest-sub-vocabulary {
    --ec-sub: #A79E95;
    --ec-faint: #8A827A;
    --ec-line: rgba(212,184,140,0.18);
    --ec-line-soft: rgba(212,184,140,0.11);
    --ec-line-strong: rgba(212,184,140,0.30);
    --ec-bg-soft: rgba(42,36,32,0.62);
    --ec-surface-2: rgba(42,36,32,0.86);
    --ec-fill: rgba(212,184,140,0.10);
    --ec-gold-ink: #C8AC72;
    --ec-rose-ink: #D0A6A6;
    --ec-sage-ink: #B8C8B0;
    --ec-lav-ink: #C8B8D4;
    --ec-tap: rgba(212,184,184,0.12);
    --ec-shadow-1: 0 1px 2px rgba(0,0,0,0.24);
    --ec-shadow-2: 0 4px 16px rgba(0,0,0,0.30), 0 1px 3px rgba(0,0,0,0.22);
    --ec-shadow-3: 0 10px 34px rgba(0,0,0,0.42), 0 2px 6px rgba(0,0,0,0.28);
}

/* 线条图标：与全站同款（1.5 描边、圆角端点、跟随文字色） */
.ec-icon { display: block; }

/* ===== 按钮 ===== */
.ec-btn {
    min-height: var(--ec-touch); padding: 10px 18px; border-radius: 999px;
    border: 1px solid var(--ec-line); background: var(--ec-surface);
    color: var(--ec-ink); font-family: var(--font-body); font-size: 13.5px;
    cursor: pointer;
    transition: transform var(--ec-dur-fast) var(--ec-ease), box-shadow var(--ec-dur) var(--ec-ease), background var(--ec-dur) var(--ec-ease), border-color var(--ec-dur) var(--ec-ease);
}
.ec-btn:hover { box-shadow: var(--ec-shadow-1); }
.ec-btn:active { transform: scale(0.96); }
.ec-btn-primary { background: #A57C7C; border-color: #A57C7C; color: #fff; box-shadow: var(--ec-shadow-1), 0 5px 16px rgba(165,124,124,0.20); }
.ec-btn-primary:hover { background: #9A7171; border-color: #9A7171; box-shadow: var(--ec-shadow-1), 0 3px 10px rgba(165,124,124,0.18); }
.ec-btn-primary:active { box-shadow: var(--ec-shadow-1); }
[data-theme-mode="dark"] .ec-btn-primary { background: var(--rose); border-color: var(--rose); color: #241F1D; box-shadow: var(--ec-shadow-1), 0 5px 16px rgba(212,184,184,0.16); }
[data-theme-mode="dark"] .ec-btn-primary:hover { background: var(--rose-hover); border-color: var(--rose-hover); }
.ec-btn-wide { width: 100%; }
/* 文字按钮：像一条会动的细线，不是第三个圆按钮 */
.ec-btn-text {
    border: 0; background: none; padding: 6px 0; min-height: 32px;
    font-family: var(--font-body); font-size: 13.5px; color: var(--ec-rose-ink);
    display: inline-flex; align-items: center; gap: 4px; cursor: pointer;
    border-bottom: 1px solid rgba(201,168,168,0.45);
    transition: gap var(--ec-dur) var(--ec-ease), color var(--ec-dur) var(--ec-ease);
}
.ec-btn-text:active { gap: 8px; }
.ec-actions { display: flex; gap: 10px; justify-content: center; margin-top: 16px; flex-wrap: wrap; }
.ec-actions-fixed { padding: 8px 16px calc(20px + var(--safe-bottom, 0px)); }
.ec-mini-btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 4px;
    min-height: var(--ec-touch); min-width: var(--ec-touch);
    padding: 4px 10px; border-radius: 999px; border: 1px solid var(--ec-line);
    background: none; color: var(--ec-sub); font-family: var(--font-body); font-size: 12px; cursor: pointer;
    transition: color var(--ec-dur) var(--ec-ease), border-color var(--ec-dur) var(--ec-ease), transform var(--ec-dur-fast) var(--ec-ease);
}
.ec-mini-btn:active { transform: scale(0.94); }
.ec-mini-btn:hover { color: var(--ec-rose-ink); border-color: rgba(201,168,168,0.35); }

/* ===== 进度条与能力值细线 =====
   手册要求「能力值轨道用细线，不做粗厚进度条」——细线那档走 .is-thin。 */
.ec-bar { height: 5px; border-radius: 999px; background: rgba(180,160,140,0.16); overflow: hidden; }
.ec-bar.is-thin { height: 3px; }
.ec-bar-fill { height: 100%; border-radius: 999px; background: linear-gradient(90deg, var(--rose), var(--gold)); transition: width 0.3s var(--ec-ease); }
/* 能力值：中文 + 英文花字 + 数值 + 细线，一项一行 */
.ec-cap { display: grid; grid-template-columns: 1fr auto; gap: 3px 10px; padding: 11px 0; border-bottom: 1px solid var(--ec-line-soft); }
.ec-cap-name { font-size: 13.5px; color: var(--ec-ink); }
.ec-cap-en { font-family: var(--font-display); font-style: italic; font-size: 10.5px; color: var(--ec-gold-ink); opacity: 0.9; margin-left: 7px; }
.ec-cap-val { font-size: 13.5px; color: var(--ec-ink); text-align: right; white-space: nowrap; }
.ec-cap-val i { font-style: normal; font-size: 10.5px; color: var(--ec-faint); margin-left: 1px; }
.ec-cap-bar { grid-column: 1 / -1; margin-top: 5px; }
.ec-cap-note { grid-column: 1 / -1; font-size: 11px; color: var(--ec-sub); margin-top: 4px; }

/* ===== 四档掌握度的小标签 ===== */
.ec-tier { display: inline-block; padding: 2px 8px; border-radius: 999px; font-size: 11.5px; line-height: 1.6; border: 1px solid transparent; }
.ec-tier-faint { color: #8A6A5A; background: rgba(180,150,135,0.14); }
.ec-tier-known { color: var(--ec-lav-ink); background: var(--lavender-light); }
.ec-tier-usable { color: var(--ec-sage-ink); background: var(--sage-light); }
.ec-tier-fluent { color: var(--ec-gold-ink); background: var(--gold-light); }
[data-theme-mode="dark"] .ec-tier-faint { color: #C0A795; }

/* ===== 三态：加载中 / 空白 / 出错 =====
   加载中说清在干什么；空白教她怎么开始；出错给出口（重试 / 返回）。 */
.ec-state { padding: 40px var(--ec-gutter, 24px); text-align: center; }
.ec-state-sub { font-size: 12.5px; line-height: 1.75; color: var(--ec-sub); margin-top: 6px; }
.ec-empty-mark {
    width: 48px; height: 48px; margin: 0 auto 12px; border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    color: var(--ec-rose-ink); background: var(--rose-light);
}
.ec-err-mark { color: var(--ec-gold-ink); background: var(--gold-light); }
.ec-empty-en { font-family: var(--font-script); font-size: 22px; color: var(--rose); margin-bottom: 2px; line-height: 1.3; }
.ec-empty-title { font-family: var(--font-body); font-size: 15px; font-weight: 600; color: var(--ec-ink); }
.ec-loading .ec-skel { display: flex; flex-direction: column; gap: 10px; max-width: 260px; margin: 0 auto 14px; }
.ec-loading .ec-skel span { display: block; height: 12px; border-radius: 6px; background: linear-gradient(90deg, rgba(180,160,140,0.14), rgba(180,160,140,0.26), rgba(180,160,140,0.14)); background-size: 200% 100%; animation: ecShimmer 1.6s ease-in-out infinite; }
.ec-loading .ec-skel span:nth-child(1) { width: 100%; }
.ec-loading .ec-skel span:nth-child(2) { width: 72%; }
.ec-loading .ec-skel span:nth-child(3) { width: 48%; }
@keyframes ecShimmer { 0% { background-position: 120% 0; } 100% { background-position: -20% 0; } }

/* ===== 自己画的输入框与行内字段（禁系统默认框）===== */
.ec-input {
    min-height: var(--ec-touch); width: 100%; box-sizing: border-box;
    padding: 9px 12px; border-radius: var(--ec-radius-s);
    border: 1px solid var(--ec-line-soft); background: var(--ec-surface);
    color: var(--ec-ink); font-family: var(--font-body); font-size: 14px;
    box-shadow: inset 0 1px 2px rgba(30,28,26,0.04);
    transition: border-color var(--ec-dur) var(--ec-ease), box-shadow var(--ec-dur) var(--ec-ease);
}
.ec-input:focus { outline: none; border-color: var(--rose); box-shadow: 0 0 0 3px var(--rose-light); }
.ec-input::placeholder { color: var(--ec-faint); }
.ec-inline-field { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.ec-inline-field .ec-input { flex: 1 1 120px; min-width: 0; }
.ec-num { max-width: 110px; text-align: center; }
.ec-unit { font-size: 12.5px; color: var(--ec-sub); flex-shrink: 0; }
/* 多行：写作 / 粘贴原文用（自己画，不用系统默认滚动条外露） */
.ec-textarea {
    min-height: 120px; width: 100%; box-sizing: border-box; resize: vertical;
    padding: 12px; line-height: 1.85; border-radius: var(--ec-radius-s);
    border: 1px solid var(--ec-line-soft); background: var(--ec-surface);
    color: var(--ec-ink); font-family: var(--font-body); font-size: 14px;
    box-shadow: inset 0 1px 2px rgba(30,28,26,0.04);
    transition: border-color var(--ec-dur) var(--ec-ease), box-shadow var(--ec-dur) var(--ec-ease);
}
.ec-textarea:focus { outline: none; border-color: var(--rose); box-shadow: 0 0 0 3px var(--rose-light); }
.ec-textarea::-webkit-scrollbar { width: 3px; }
.ec-textarea::-webkit-scrollbar-thumb { background: var(--ec-line-strong); border-radius: 999px; }

/* ============================================================
   周报（第 11 窗口）：wk- 前缀，只属于这一页
   ------------------------------------------------------------
   三个零件：跟他汇报这一周的看板（细线格，不堆卡片）／七天的进步曲线（纯 CSS 柱，
   不用图表库）／下周做什么（一条一条的话）。
   ============================================================ */
.ec-weekly { padding-top: 4px; }
.wk-board {
    display: grid; grid-template-columns: repeat(auto-fit, minmax(84px, 1fr));
    gap: 14px 10px; padding: 4px 0 2px;
}
.wk-fact { text-align: center; min-width: 0; }
.wk-fact-v {
    display: block; font-family: var(--font-display); font-size: 19px; line-height: 1.2;
    color: var(--ec-ink); font-variant-numeric: tabular-nums;
}
.wk-fact-k { display: block; margin-top: 4px; font-size: 11px; color: var(--ec-sub); }
/* 七天的柱：一格一天，柱高＝那天的真实分钟数（最少留一点头，看得出「学了」） */
.wk-curve { display: flex; align-items: flex-end; gap: 6px; height: 92px; padding: 6px 0 0; }
.wk-bar { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; height: 100%; }
.wk-bar i {
    display: block; width: 100%; max-width: 30px; height: var(--h, 0%);
    background: linear-gradient(180deg, var(--rose), rgba(201,168,168,0.35));
    border-radius: 6px 6px 2px 2px;
    transition: height var(--ec-dur-slow) var(--ec-ease);
}
.wk-bar em { display: block; margin-top: 6px; font-style: normal; font-size: 10px; color: var(--ec-faint); }
.wk-advice { display: flex; flex-direction: column; gap: 9px; padding: 2px 0 2px; }
.wk-advice-i {
    font-size: 12.5px; line-height: 1.85; color: var(--ec-ink);
    padding-left: 12px; position: relative;
}
.wk-advice-i::before {
    content: ''; position: absolute; left: 0; top: 0.72em;
    width: 5px; height: 5px; border-radius: 50%; background: var(--rose);
}
@media (max-width: 369px) {
    .wk-fact-v { font-size: 17px; }
    .wk-curve { height: 78px; gap: 4px; }
}
@media (prefers-reduced-motion: reduce) {
    .wk-bar i { transition: none !important; }
}

/* 减少动效偏好：一律不闪、不位移 */
@media (prefers-reduced-motion: reduce) {
    .ec-loading .ec-skel span { animation: none; }
    .ec-bar-fill, .ec-btn, .ec-btn-text, .ec-mini-btn, .ec-input, .ec-textarea, .ec-cap { transition: none !important; transform: none !important; }
}