/* ============================================================
   css/panels/panels-ec.css — 「外文」视觉系统（第 2 窗口负责）
   ------------------------------------------------------------
   两份文件按「功能归属」分，不按「谁的文件」分：
     · panels-learning.css  = 整个学习模块的地基（颜色令牌 + 三态 + 按钮/输入框/
                              进度条/四档标签），外文、单词、以后的语法阅读都要用
                              它；只往里加公共零件，不塞某个页面的排版。
     · 本文件 panels-ec.css = 外文自己的视觉层：返回头、首页排版、目录式分区入口、
                              学习轨迹的图表与线条、语言与目标页的东西。
   规矩没变：前缀 ec- 独占；零 emoji；线条图标；禁系统默认框；
   360~430 好看、<370 不破版不横向溢出；减少动效有替代。
   ============================================================ */

/* 注意：令牌（--ec-*）不在这里定义 —— 唯一那份在 css/panels/panels-learning.css 的
   #nest-sub-vocabulary 块里（第一窗口 2028-09 把这里抄过的一份删了）。
   同一批令牌在两个文件里各写一遍＝改一处不生效（长期规则 #214），要加令牌回那一份加。 */

/* ===== 返回头（全外文模块唯一一处，只在这里画）===== */
.ec-header {
    display: flex; align-items: center; gap: 10px;
    /* 页头跟全模块同一条页边距（--ec-gutter：24 / 窄屏 14 / 宽屏 26）——
       原来写死 18px，宽屏上比正文窄、窄屏上比正文宽（2026-10-09 第 7 条统一） */
    padding: 12px var(--ec-gutter, 24px) 10px; position: sticky; top: 0; z-index: 12;
    background: linear-gradient(to bottom, rgba(248,244,239,0.97) 62%, rgba(248,244,239,0));
    backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
}
[data-theme-mode="dark"] .ec-header {
    background: linear-gradient(to bottom, rgba(26,22,20,0.97) 62%, rgba(26,22,20,0));
}
.ec-back {
    width: 34px; height: 34px; flex-shrink: 0; border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    border: 1px solid var(--ec-line-soft); background: rgba(255,252,249,0.6);
    color: var(--ec-sub); cursor: pointer;
    transition: transform var(--ec-dur) var(--ec-ease), color var(--ec-dur) var(--ec-ease), border-color var(--ec-dur) var(--ec-ease);
}
[data-theme-mode="dark"] .ec-back { background: rgba(37,33,32,0.6); }
.ec-back:hover { color: var(--ec-rose-ink); border-color: rgba(201,168,168,0.32); }
.ec-back:active { transform: scale(0.92); }
.ec-header-text { min-width: 0; flex: 1; }
.ec-header-title { font-family: var(--font-body); font-size: 15.5px; font-weight: 600; color: var(--ec-ink); letter-spacing: 0.3px; }
.ec-header-sub { font-family: var(--font-display); font-style: italic; font-size: 10.5px; color: var(--ec-gold-ink); opacity: 0.85; letter-spacing: 1px; margin-top: 1px; }
.ec-header-right { flex-shrink: 0; display: flex; align-items: center; gap: 8px; }

/* 花字副标题（装饰层，不承载功能信息） */
.ec-deco { font-family: var(--font-display); font-style: italic; font-size: 11.5px; letter-spacing: 1.2px; color: var(--ec-gold-ink); opacity: 0.8; text-align: center; margin-top: 2px; }

/* ===== 页眉：外文 · 总览 + 在学哪门语言（编辑排版的页眉，不当卡片）===== */
.ec-crumb { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 20px var(--ec-gutter) 0; }
.ec-crumb-t { font-size: 11.5px; letter-spacing: 1.6px; color: var(--ec-sub); }
.ec-crumb-chip {
    border: 0; background: none; padding: 4px 0; cursor: pointer;
    font-family: var(--font-body); font-size: 12.5px; color: var(--ec-ink);
    display: inline-flex; align-items: center; gap: 8px; max-width: 62%;
    transition: opacity var(--ec-dur) var(--ec-ease);
}
.ec-crumb-chip:active { opacity: 0.6; }
.ec-crumb-chip em { font-style: normal; font-family: var(--font-display); font-size: 11px; color: var(--ec-gold-ink); }

/* ===== 第一视觉「继续学习」：大标题 + 一句说明 + 极细进度线 ===== */
.ec-lead { position: relative; padding: 28px var(--ec-gutter) 26px; border-bottom: 1px solid var(--ec-line); }
.ec-lead::after {
    content: 'Overview'; position: absolute; right: 4px; bottom: 4px;
    font-family: var(--font-display); font-style: italic; font-size: 40px; line-height: 1;
    color: var(--gold); opacity: 0.10; pointer-events: none;
}
.ec-lead-en { font-family: var(--font-display); font-style: italic; font-size: 11.5px; letter-spacing: 1.5px; color: var(--ec-gold-ink); }
.ec-lead-hit { display: block; width: 100%; border: 0; background: none; padding: 0; text-align: left; cursor: pointer; font-family: var(--font-body); }
.ec-lead-h {
    display: block; font-family: var(--font-body); font-size: 24px; font-weight: 600;
    color: var(--ec-ink); margin: 12px 0 0; line-height: 1.4; letter-spacing: 0.4px;
    text-wrap: balance; max-width: 15em;
    transition: color var(--ec-dur) var(--ec-ease);
}
.ec-lead-hit:active .ec-lead-h { color: var(--ec-rose-ink); }
.ec-lead-sub { font-size: 12.5px; color: var(--ec-sub); line-height: 1.75; margin-top: 10px; max-width: 22em; }
/* ★ 甲方第 9 条：「接着背」那个按钮删掉之后，这一行只剩右边的百分比 → 靠右对齐 */
.ec-lead-go { display: flex; align-items: baseline; justify-content: flex-end; gap: 12px; margin-top: 16px; }
.ec-lead-count { font-family: var(--font-display); font-size: 12px; color: var(--ec-sub); flex-shrink: 0; }
.ec-lead .ec-bar { margin-top: 16px; }
.ec-link {
    border: 0; background: none; padding: 6px 0; cursor: pointer;
    font-family: var(--font-body); font-size: 14px; color: var(--ec-rose-ink);
    display: inline-flex; align-items: center; gap: 4px;
    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-link:hover { color: var(--ec-rose); }
.ec-link:active { gap: 9px; }

/* ===== 区块 ===== */
.ec-block { padding: 26px var(--ec-gutter) 0; }
.ec-block-head { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; margin-bottom: 14px; }
.ec-block-title { font-family: var(--font-body); font-size: 13px; font-weight: 600; color: var(--ec-ink); letter-spacing: 2px; }
.ec-block-en { font-family: var(--font-display); font-style: italic; font-size: 11px; color: var(--ec-gold-ink); opacity: 0.85; }
.ec-streak { font-size: 11.5px; color: var(--ec-sub); }
.ec-hint { font-size: 11.5px; line-height: 1.75; color: var(--ec-sub); margin-top: 8px; }
.ec-quiet { font-size: 12.5px; line-height: 1.85; color: var(--ec-sub); padding: 2px 0 4px; }

/* ===== 今天：一排数字（细细的纸面承托，不再是一条悬空的横线）=====
   · 原文第 1 条：甲方原话「它的所有组件基本是死死地贴着边的，并没有任何的间隙，
   这导致整个页面很丑，而且字是散落在页面上的，**不是被包在框里的**」。
   真根因：这一块原来只有上下两条 1px 细线（`border-top/bottom`），**左右没有边、没有底**
   —— 数字就真的「悬在纸上」，跟旁边有卡片承托的那些块不是一套语言。
   现在给它一个真正的纸面容器（浅底 + 细边 + 圆角 + 内边距），与全外文其它块的节奏一致：
   页面左右留白 = --ec-gutter（24px），容器自己再留 10px 内边距给数字透气。 */
.ec-metrics {
    display: flex; align-items: stretch;
    margin: 0 var(--ec-gutter); padding: 2px 10px;
    border: 1px solid var(--ec-line); border-radius: var(--ec-radius);
    background: var(--ec-surface-2);
}
.ec-metric {
    /* ★ 甲方第 11 条：四格里的数字与标题「不居中、框里偏上」——
       原因是这一格只有左右居中（text-align），上下靠 padding 凑，行高不同就飘。
       现在按列 flex 真正居中（数字+标题+副信息整组居中），padding 只留最小的那一圈。 */
    display: flex; flex-direction: column; justify-content: center; align-items: center;
    flex: 1 1 0; min-width: 0; padding: 10px 4px; text-align: center;
    background: none; border: 0; border-left: 1px solid var(--ec-line-soft);
    font-family: var(--font-body); cursor: pointer;
    transition: background var(--ec-dur) var(--ec-ease);
}
.ec-metric:first-child { border-left: 0; }
.ec-metric:active { background: rgba(201,168,168,0.10); }
.ec-metric.is-dim { cursor: default; }
.ec-metric.is-dim:active { background: none; }
.ec-metric-val { display: block; font-family: var(--font-body); font-size: 18.5px; font-weight: 600; color: var(--ec-ink); line-height: 1.15; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ec-metric-val i { font-style: normal; font-size: 10.5px; color: var(--ec-sub); margin-left: 1px; }
/* 那一格的第二行小字（「还剩 24 个 · 已复习 20」）：同一件事的补充，
   绝不换行、绝不撑宽 —— 值行本身也不许折成两行（一折整排就高低不齐，
   甲方原话「字是散落在页面上的」有一半来自这里）。 */
.ec-metric-extra {
    display: block; margin-top: 3px; font-size: 10px; line-height: 1.35; color: var(--ec-sub);
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.ec-metric.is-alert .ec-metric-val { color: var(--ec-rose-ink); }
.ec-metric.is-zero .ec-metric-val { color: var(--ec-sub); font-weight: 500; }
.ec-metric-label { display: block; font-size: 11px; color: var(--ec-sub); margin-top: 5px; white-space: nowrap; }
.ec-today-minor { display: flex; gap: 6px 16px; flex-wrap: wrap; padding: 12px 2px 0; }
.ec-minor-item { font-size: 11.5px; color: var(--ec-sub); }
.ec-minor-item em { font-style: normal; color: var(--ec-ink); }

/* ===== 分区入口：目录式（淡花字编号 + 中文 + 淡英文 + 右侧状态 + 细箭头）===== */
.ec-list { border-top: 1px solid var(--ec-line); }
.ec-li {
    width: 100%; display: flex; align-items: center; gap: 13px;
    padding: 14px 2px; border: 0; border-bottom: 1px solid var(--ec-line);
    background: none; text-align: left; cursor: pointer; font-family: var(--font-body);
    transition: padding-left var(--ec-dur) var(--ec-ease), background var(--ec-dur) var(--ec-ease);
}
.ec-li:hover { background: rgba(201,168,168,0.05); }
.ec-li:active { background: rgba(201,168,168,0.10); padding-left: 6px; }
.ec-li.is-disabled { cursor: default; }
.ec-li.is-disabled:active { padding-left: 2px; background: none; }
/* 编号：宽到两档，绝不因「10」把标题挤歪 */
.ec-idx { flex: 0 0 22px; width: 22px; font-family: var(--font-display); font-style: italic; font-size: 12px; color: var(--ec-gold-ink); opacity: 0.9; }
.ec-li-text { flex: 1 1 auto; min-width: 0; }
.ec-li-label { display: block; font-size: 14.5px; font-weight: 500; color: var(--ec-ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ec-li-en { display: block; font-family: var(--font-display); font-style: italic; font-size: 10.5px; color: var(--ec-gold-ink); opacity: 0.85; margin-top: 3px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ec-li-right { flex: 0 0 auto; display: inline-flex; align-items: center; gap: 7px; font-size: 11.5px; color: var(--ec-sub); }
.ec-li-num { font-size: 12px; color: var(--ec-sub); }
.ec-li-arrow { display: inline-flex; color: var(--ec-sub); opacity: 0.75; }

/* 少数地方仍用「圆图标 + 两行」的旧行（轨迹页那几条「还等着上线的」） */
.ec-rows { border-top: 1px solid var(--ec-line); }
.ec-row {
    width: 100%; display: flex; align-items: center; gap: 12px;
    padding: 13px 2px; border: 0; border-bottom: 1px solid var(--ec-line);
    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);
}
.ec-row:hover { background: rgba(201,168,168,0.05); }
.ec-row:active { background: rgba(201,168,168,0.10); }
.ec-row.is-disabled { opacity: 0.75; cursor: default; }
.ec-row-icon { flex-shrink: 0; width: 34px; height: 34px; border-radius: 50%; display: flex; align-items: center; justify-content: center; color: var(--ec-rose-ink); background: var(--rose-light); }
.ec-row-text { min-width: 0; flex: 1; }
.ec-row-label { display: block; font-size: 14px; color: var(--ec-ink); }
.ec-row-desc { display: block; font-size: 11.5px; color: var(--ec-sub); margin-top: 2px; line-height: 1.55; }
.ec-row-right { flex-shrink: 0; display: flex; align-items: center; gap: 6px; color: var(--ec-sub); }
.ec-row-num { font-size: 12px; color: var(--ec-sub); }
.ec-tag-soon { font-size: 11.5px; color: var(--ec-sub); }

/* ===== 轻入口：让他陪你看今天的词（不抢「继续学习」的主位）===== */
.ec-ask {
    display: flex; align-items: center; justify-content: center; gap: 7px;
    margin: 24px var(--ec-gutter) 0; padding: 11px 0; width: calc(100% - var(--ec-gutter) * 2);
    border: 1px dashed var(--ec-line); border-radius: var(--ec-radius-s);
    background: none; color: var(--ec-sub); font-family: var(--font-body); font-size: 12.5px;
    cursor: pointer; transition: color var(--ec-dur) var(--ec-ease), border-color var(--ec-dur) var(--ec-ease);
}
.ec-ask:hover { color: var(--ec-rose-ink); border-color: rgba(201,168,168,0.42); }
.ec-ask:active { transform: scale(0.99); }

/* ===== 底部小注（真实数字，不装饰）===== */
.ec-foot { padding: 22px var(--ec-gutter) calc(28px + var(--safe-bottom, 0px)); font-size: 11.5px; line-height: 1.85; color: var(--ec-sub); text-align: center; }

/* ===== 学习轨迹 ===== */
.ec-lines { padding: 4px var(--ec-gutter, 24px) 0; }
.ec-line { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; padding: 11px 0; border-bottom: 1px solid var(--ec-line-soft); }
.ec-line-row { padding: 10px 0; }
.ec-line-top { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; margin-bottom: 6px; }
.ec-line-name { font-size: 13px; color: var(--ec-ink); min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ec-line-label { font-size: 12.5px; color: var(--ec-sub); }
.ec-line-val { font-size: 13px; color: var(--ec-ink); font-family: var(--font-body); flex-shrink: 0; }
.ec-tier-bar { display: flex; height: 8px; border-radius: 999px; overflow: hidden; background: rgba(180,160,140,0.14); }
.ec-tier-seg { display: block; height: 100%; transition: width 0.3s var(--ec-ease); }
.ec-tier-seg.ec-tier-faint { background: rgba(180,150,135,0.55); }
.ec-tier-seg.ec-tier-known { background: var(--lavender); }
.ec-tier-seg.ec-tier-usable { background: var(--sage); }
.ec-tier-seg.ec-tier-fluent { background: var(--gold); }
.ec-tier-legend { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 10px; }
.ec-tier-legend-item { display: inline-flex; align-items: center; gap: 5px; }
.ec-tier-legend-item em { font-style: normal; font-size: 12px; color: var(--ec-sub); }
.ec-heat { display: grid; grid-template-columns: repeat(10, 1fr); gap: 4px; }
.ec-heat-cell { display: block; aspect-ratio: 1 / 1; border-radius: 3px; background: rgba(180,160,140,0.14); }
.ec-heat-cell.is-on { background: linear-gradient(180deg, var(--rose), rgba(201,168,168, calc(0.35 + var(--h, 0%) / 200))); }
.ec-heat-note { font-size: 11px; color: var(--ec-sub); margin-top: 8px; }
/* 学了一周的一排小圆点（首页用） */
.ec-week { display: flex; gap: 5px; align-items: center; }
.ec-week i { width: 8px; height: 8px; border-radius: 50%; background: rgba(180,160,140,0.22); }
.ec-week i.is-on { background: var(--rose); }

/* ===== 语言与目标 ===== */
.ec-langs { display: flex; flex-wrap: wrap; gap: 8px; }
.ec-lang-btn {
    min-width: 92px; flex: 1 1 92px; padding: 10px 12px; text-align: left;
    border-radius: var(--ec-radius-s); border: 1px solid var(--ec-line-soft);
    background: var(--surface-solid); cursor: pointer; font-family: var(--font-body);
    transition: transform 0.16s var(--ec-ease), border-color var(--ec-dur) var(--ec-ease), box-shadow var(--ec-dur) var(--ec-ease);
}
.ec-lang-btn:active { transform: scale(0.97); }
.ec-lang-btn.is-on { border-color: var(--rose); box-shadow: 0 0 0 1px var(--rose) inset; }
.ec-lang-btn.is-dim { opacity: 0.6; cursor: default; }
.ec-lang-zh { display: block; font-size: 13.5px; color: var(--ec-ink); }
.ec-lang-en { display: block; font-family: var(--font-display); font-style: italic; font-size: 10.5px; color: var(--ec-gold-ink); opacity: 0.85; margin-top: 1px; }
.ec-lang-soon { display: block; font-size: 10.5px; color: var(--ec-sub); margin-top: 2px; }
.ec-exam-row { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; }
.ec-exam-name { flex: 1 1 auto; min-width: 0; }
.ec-exam-target { flex: 0 0 88px; width: 88px; text-align: center; }
.ec-row-del { flex-shrink: 0; width: 30px; height: 30px; border-radius: 50%; border: 1px solid var(--ec-line-soft); background: none; color: var(--ec-sub); cursor: pointer; display: flex; align-items: center; justify-content: center; transform: rotate(90deg); transition: color var(--ec-dur) var(--ec-ease), transform var(--ec-dur) var(--ec-ease); }
.ec-row-del:hover { color: var(--ec-rose-ink); }

/* ===== 分区「还在做」的真页面壳 ===== */
.ec-soon { padding-top: 28px; }
.ec-roadmap { max-width: 300px; margin: 18px auto 0; text-align: left; }
.ec-road-item { display: flex; align-items: center; gap: 10px; padding: 9px 2px; border-bottom: 1px solid var(--ec-line-soft); }
.ec-road-idx { flex-shrink: 0; width: 20px; height: 20px; border-radius: 50%; border: 1px solid var(--ec-line); color: var(--ec-gold-ink); font-size: 11px; line-height: 18px; text-align: center; }
.ec-road-label { font-size: 13px; color: var(--ec-ink); }
.ec-soon-note { max-width: 300px; margin: 16px auto 0; font-size: 11.5px; line-height: 1.85; color: var(--ec-sub); }
.ec-when-row { display: flex; align-items: center; justify-content: center; gap: 10px; flex-wrap: wrap; margin: 10px 0 2px; }
.ec-when { font-size: 11.5px; color: var(--ec-sub); }

/* 设置页里那两行小字（沿用既有卡片，只补英文标签样式） */
.vsc-en { font-family: var(--font-display); font-style: italic; font-size: 10px; color: var(--ec-gold-ink); opacity: 0.8; letter-spacing: 1px; margin-left: 8px; }

/* 竖屏居中限宽：桌面端也当手机屏看（与全站一致） */
@media (min-width: 481px) {
    .ec-header, .ec-foot { max-width: 480px; margin-left: auto; margin-right: auto; }
}

/* ===== 窄屏（<370px）=====
   左右留白不在这里写（只认 --ec-gutter 一处，2028w12learn1 统一）：从前这里给
   .ec-crumb / .ec-lead / .ec-block / .ec-foot / .ec-lines 各补了一遍 14px，
   于是「宽屏 26」这套在别处又各写一遍 —— 现在全删，只留字号与栅格。 */
@media (max-width: 369px) {
    .ec-crumb-chip { max-width: 58%; font-size: 12px; gap: 6px; }
    .ec-lead::after { font-size: 34px; right: 8px; top: 10px; }
    .ec-lead-h { font-size: 20px; max-width: 12em; }
    .ec-metric { padding: 13px 2px 11px; }
    .ec-metric-val { font-size: 16.5px; }
    .ec-metric-label { font-size: 10.5px; }
    .ec-li { gap: 10px; padding: 13px 2px; }
    .ec-li-label { font-size: 14px; }
    .ec-idx { flex-basis: 19px; width: 19px; font-size: 11px; }
    .ec-lang-btn { min-width: 78px; flex-basis: 78px; }
    .ec-exam-target { flex-basis: 72px; width: 72px; }
    .ec-heat { grid-template-columns: repeat(6, 1fr); }
    .ec-header { padding: 10px 12px 8px; }
}
@media (min-width: 431px) {
    .ec-heat { grid-template-columns: repeat(10, 1fr); }
}
@media (min-width: 431px) {
    .ec-heat { grid-template-columns: repeat(10, 1fr); }
}

/* 减少动效偏好：一律不闪、不位移 */
@media (prefers-reduced-motion: reduce) {
    .ec-bar-fill, .ec-tier-seg, .ec-btn, .ec-row, .ec-li, .ec-back, .ec-lang-btn, .ec-lang-chip, .ec-row-del, .ec-metric, .ec-ask {
        transition: none !important;
        transform: none !important;
    }
}