/* ============================================================
   玻璃拟态换皮层 · glass-theme.css
   ------------------------------------------------------------
   加载顺序必须在 css/style.css 之后。只放 style.css 的令牌表达不了的
   结构性规则：卡片材质、排版层级、按钮形状、区块地面。

   设计令牌来源（Web 抓取数据转译）：
     paper #f6f7f3 · ink #121412 · green #1f6b4c
     blue #1769e0 · muted #686d68 · line rgba(18,20,18,.14)
     ease cubic-bezier(.2,.8,.2,1)
     圆角两套：交互控件 full-pill(999px) / 表面 16px（另有 50% 圆点）
     阴影「单 Y 偏移·零扩散·低透明度·带色调·大模糊」

   三条阿语/RTL 硬护栏（改这个文件前请先读）：
     1. letter-spacing 绝不作用于阿语 —— 会破坏字母连接（cursive joining），
        是排版事故不是风格。宽字距只给拉丁（转写、标签、代码）。
     2. 阿语行高不得沿用紧凑值 —— تَشْكِيل 变音符上下都出格，
        设计系统给拉丁大标题的 1.13 会直接裁掉符号。阿语一律 ≥1.6。
     3. 方向一律用逻辑属性 —— 本应用 <html dir="rtl"> 但 body 覆回 ltr，
        阿语块再各自翻；物理 left/right 会在这些局部 RTL 岛上出错。
   ============================================================ */

/* ────────────────────────────────────────────────
   1. 地面：从绿色渐变洗色收敛到纸白，玻璃才有干净的底
   ──────────────────────────────────────────────── */
html {
    /* 原值 #d9e8dc → #edf1e2 饱和偏高；新地面留在纸白家族内做极轻冷暖过渡，
       仍保留一点层次给磨砂卡片去透 */
    background: linear-gradient(165deg, #f2f4ee 0%, #f6f7f3 45%, #eef2ea 100%) fixed;
}

body::before {
    /* 地面装饰层：刻意只用**纵向**线性渐变，不放任何径向光斑。
       实测过：背景里只要存在有限尺寸的局部亮斑（哪怕 alpha 很低、衰减很缓），
       眼睛都会在其水平中线处看到一条竖线 —— Mach 带效应，与梯度陡缓无关。
       首页的层次由 .home-liquid-field 的光斑 + 像素层负责，那两层有遮罩收边。 */
    background: linear-gradient(180deg,
        rgba(31, 107, 76, 0.050) 0%,
        rgba(31, 107, 76, 0.018) 26%,
        rgba(31, 107, 76, 0) 52%,
        rgba(31, 107, 76, 0.014) 78%,
        rgba(31, 107, 76, 0.034) 100%);
}

body.dark {
    background: linear-gradient(165deg, #121412 0%, #171b17 45%, #131613 100%) fixed;
}

body.dark::before {
    /* 地面装饰层：刻意只用**纵向**线性渐变，不放任何径向光斑。
       实测过：背景里只要存在有限尺寸的局部亮斑（哪怕 alpha 很低、衰减很缓），
       眼睛都会在其水平中线处看到一条竖线 —— Mach 带效应，与梯度陡缓无关。
       首页的层次由 .home-liquid-field 的光斑 + 像素层负责，那两层有遮罩收边。 */
    background: linear-gradient(180deg,
        rgba(63, 165, 109, 0.055) 0%,
        rgba(63, 165, 109, 0.020) 28%,
        rgba(63, 165, 109, 0) 54%,
        rgba(63, 165, 109, 0.016) 80%,
        rgba(63, 165, 109, 0.038) 100%);
}

/* ────────────────────────────────────────────────
   2. 玻璃材质
   ------------------------------------------------------------
   注意：style.css 的「液态玻璃质感」区块（blur 26 + 三段渐变底 +
   四边内高光）已经是一套很强的材质，覆盖它列表里的元素（.feature-card /
   .exam-item / .ai-output / .saved-vocab-item / .article-record-item …）。
   本文件在它之后加载、同权重，所以**这里绝不能再声明这些元素的材质**，
   否则会把更强的配方降级成扁平半透明白。这里只补它没覆盖到的 .vls-card。
   ──────────────────────────────────────────────── */
.vls-card {
    /* 与 style.css 液态玻璃同一配方：对角渐变底 + 26px 磨砂 + 四边内高光。
       原值是蓝灰 rgba(90,120,160,.18) 落影，换成带色调的深板岩绿 */
    background: linear-gradient(135deg,
        rgba(255, 255, 255, 0.60) 0%,
        rgba(255, 255, 255, 0.28) 45%,
        rgba(255, 255, 255, 0.45) 100%);
    border: 1px solid rgba(255, 255, 255, 0.72);
    box-shadow:
        0 14px 40px rgba(31, 58, 47, 0.13),
        inset 0 1px 0 rgba(255, 255, 255, 0.95),
        inset 1px 0 0 rgba(255, 255, 255, 0.55),
        inset -1px 0 0 rgba(255, 255, 255, 0.55),
        inset 0 -1px 0 rgba(255, 255, 255, 0.30);
    backdrop-filter: blur(26px) saturate(180%);
    -webkit-backdrop-filter: blur(26px) saturate(180%);
    padding: 34px 22px 26px;
}

/* 圆角不覆写：style.css 已给 .feature-card 定了 var(--radius)，
   这里再写一个值就多出一套圆角系统（§4.4 形状锁定） */
.feature-card {
    padding: 22px 16px;
    /* 只合成 transform：材质面板过渡 background/box-shadow 会逐帧重算 backdrop 模糊 */
    transition: transform 0.28s cubic-bezier(.2, .8, .2, 1);
}

.feature-card:hover {
    /* iOS 语义是「抬起」，光泽变化交给 home-liquid.css 里的 opacity 层，
       不在这里改 box-shadow —— 那会触发整块重新磨砂 */
    transform: translateY(-3px);
}

/* ────────────────────────────────────────────────
   3. 排版层级
   ──────────────────────────────────────────────── */

/* 3a. eyebrow 宽字距小标签 —— 只给拉丁 */
.vls-translit,
.vli-tag,
.vls-pos,
.vocab-pos {
    display: inline-block;
    font-size: 11px;
    line-height: 1.3;
    letter-spacing: 2px;          /* 源 1.8px@11px ≈ 0.164em，量化为 2 */
    text-transform: uppercase;
    font-weight: 600;
    direction: ltr;               /* 转写永远是拉丁，钉住方向 */
}

.vls-translit {
    margin: 12px auto 6px;
    padding: 4px 12px;
    border-radius: var(--radius-sm);
    /* 原为柠檬绿高亮块。用户否掉黄色后并入品牌绿这一族，
       与首页 eyebrow 胶囊（.hero-badge）同一语言 */
    background: rgba(31, 107, 76, 0.10);
    color: var(--primary-dark);
}

/* 淡绿底上，浅色的 --primary-dark 够用（8.5:1），深色模式下它变成中绿、
   压在合成后的深底上只有 3.4:1 —— 所以文字色必须按主题分档，不能一个 token 通吃 */
body.dark .vls-translit,
body.dark .hero-badge {
    color: var(--primary-light);
}

.vli-tag,
.vocab-pos {
    padding: 3px 9px;
    border-radius: var(--radius-sm);
    background: rgba(18, 20, 18, 0.055);
    color: var(--text-muted);
}

.hero-badge {
    /* 原：金色渐变胶囊 + 深绿字。改为 eyebrow 语言（淡绿底，非柠檬绿） */
    display: inline-block;
    background: rgba(31, 107, 76, 0.10);
    color: var(--primary-dark);
    padding: 5px 14px;
    border-radius: var(--radius-sm);
    font-size: 11px;
    line-height: 1.4;
    letter-spacing: 2px;
    text-transform: uppercase;
    font-weight: 600;
    margin-block-end: 18px;
}

/* 中文/混合文案的徽章不做 uppercase 与字距（hero-badge 里是「阿拉伯语阅读专项训练」） */
.hero-badge:lang(zh),
html[lang="ar"] .hero-badge {
    letter-spacing: 0;
    text-transform: none;
    font-size: 12px;
}

/* 3b. 阿语排版护栏
   ------------------------------------------------------------
   护栏按「语言/方向」判定，不按类名 —— 因为 #heroTitle 是多语的：
   js/lang.js:466 会把它换成 "Read in English with Ease" 并同步 dir。
   上一版按 .hero-title-ar 施加 1.85 行高，等于让拉丁标题也吃松行高。

   两条不变量：
     1. 阿语绝不加字距 —— tracking 会破坏字母连接（cursive joining），
        这是排版事故不是风格。唯一保留 !important 的地方就是这条。
     2. 阿语行高 ≥1.7 —— تَشْكِيل 变音符上下都出格，紧凑行高会直接裁掉。

   ⚠ 这里绝不能用 :lang(ar)：lang 会继承，<html lang="ar"> 使**每个元素**
   都命中 :lang(ar)，配合 !important 会把 .vls-translit 等拉丁标签的字距一起压没。
   [dir="rtl"] 是逐元素显式属性（js/lang.js:466 正是这么切的），才是可靠信号。 */
[dir="rtl"] {
    letter-spacing: normal !important;
    line-height: 1.7;
}

/* 恒定是阿语、不带 dir/lang 标记的类，继续按类兜底 */
.vls-word,
.vl-word,
.vocab-arabic,
.arabic,
.quiz-arabic,
.quiz-word,
.fc-word,
.fc-example,
.flashcard-arabic,
.flashcard-example,
.learn-word,
.learn-example,
.lib-detail-ar,
.lib-list-ar,
.lib-ai-ar,
.pp-text,
.passage,
.generated-article,
.saved-vocab-ar,
.temp-vocab-ar,
.wd-cj-cell,
.calli-item,
.vls-option.ar,
.vl-detail-local-word,
.vl-detail-local-ex {
    letter-spacing: normal !important;
    line-height: 1.7;
}

/* 大字号阿语（主词）行高再松一档：字号越大，变音符出格越多 */
.vls-word,
.vl-word {
    line-height: 1.85;
}

.hero-title-ar {
    /* 源语言里大标题用 ink 而非品牌色；绿色让给徽章与 CTA。
       行高不在此声明 —— 交给上面的 dir/lang 护栏，多语文案才能各自正确 */
    font-size: 52px;
    font-weight: 700;         /* 自托管 Naskh 只到 700，800 会静默回退 */
    color: var(--text-primary);
}

.vls-word {
    font-size: 56px;
    font-weight: 700;
    color: var(--text-primary);
}

.vls-word.sm {
    font-size: 40px;
}

/* ────────────────────────────────────────────────
   4. 按钮：源 .button.primary = 绿底白字 radius 16 + 尾随箭头
      原样式是 999px 胶囊，改为设计系统的 16 圆角矩形
   ──────────────────────────────────────────────── */
.vls-main-btn {
    border-radius: var(--radius);
    background: var(--primary);
    color: #fff;
    font-size: 15px;
    font-weight: 600;
    padding: 13px 20px;
    min-height: 44px;          /* 触屏最小点击区 */
    box-shadow: 0 14px 30px rgba(31, 107, 76, 0.18);
    transition: transform 0.2s cubic-bezier(.2, .8, .2, 1);
}

.vls-main-btn:hover {
    /* 只动 transform；阴影若同时变化会因不在过渡列表里而硬跳，故不改阴影 */
    transform: scale(0.985);
}

.vls-mini-btn {
    border-radius: var(--radius-sm);
    border: 1px solid var(--border);
    background: rgba(255, 255, 255, 0.45);
    color: var(--primary);
    font-size: 12px;
    padding: 7px 12px;
    min-height: 34px;
}

.vls-mini-btn:hover {
    background: rgba(31, 107, 76, 0.12);
    border-color: var(--primary-light);
    color: var(--primary-dark);
}

.vls-audio {
    border-radius: 50%;
    background: var(--primary);
    color: #fff;
    box-shadow: 0 10px 28px rgba(18, 20, 18, 0.10);
}

/* ────────────────────────────────────────────────
   5. 数据带：三格统计。强调交给数字本身（品牌绿），
      卡面沿用主题 bg-card —— 不再整块铺色
   ──────────────────────────────────────────────── */
.vl-stats,
.vl-stats-row,
.vl-summary {
    gap: 10px;
}

.vl-stat {
    /* 整块柠檬绿是「这个黄色」最主要的观感来源。撤掉之后回到主题卡面本身
       （style.css 给的是 var(--bg-card) + var(--border)），
       所以浅色/深色两套自动成立，不必再补 body.dark 覆写。
       这里只保留圆角统一（22px → 16px 那一套）与数字规格。 */
    border-radius: var(--radius);
    padding: 16px 10px;
}

.vl-stat b {
    font-size: 40px;
    line-height: 1;            /* 纯数字，源 strong 80/80 = 1.00，允许紧贴 */
    color: var(--primary);     /* 数字承担强调，标签交给次级灰 */
    font-variant-numeric: tabular-nums;
}

/* ────────────────────────────────────────────────
   5.5 会话地面与进度条
   ──────────────────────────────────────────────── */
.vls-view {
    /* 原为蓝灰渐变 #dbe7f5→#d6e4f3，偏离色板；改为纸白家族内的极轻层次 */
    background: linear-gradient(180deg, #f6f7f3 0%, #eef2ea 45%, #f2f4ee 100%);
}

body.dark .vls-view {
    background: linear-gradient(180deg, #121412 0%, #171b17 45%, #131613 100%);
}

.vls-progress {
    background: rgba(18, 20, 18, 0.08);
}

.vls-progress-fill {
    /* 原为绿→柠檬绿，进度条末端会透出黄味；改为同族内由深到浅 */
    background: linear-gradient(90deg, var(--primary-dark), var(--primary-light));
}

/* ────────────────────────────────────────────────
   6. 导航：液态玻璃轨道 + 选中滑块
   ──────────────────────────────────────────────── */

/* 6.1 轨道。材质按面积分级（apple §12「越大的表面越厚」）：
       轨道是全页最大的玻璃面 → 最强模糊 + 最深落影。
       半透明是为了让页面内容从它底下穿过，而不是被一条不透明带子挡掉。
       ⚠ 原来的 .site-header / header.site-header 规则是死代码 ——
       实际类名是 .main-header，从来没匹配上过。 */
.main-nav {
    position: relative;                 /* .nav-thumb 的定位基准 */
    background: linear-gradient(135deg,
        rgba(20, 72, 58, 0.80) 0%,
        rgba(31, 107, 76, 0.72) 55%,
        rgba(47, 139, 103, 0.70) 100%);
    border: 1px solid rgba(255, 255, 255, 0.22);
    box-shadow:
        0 18px 48px rgba(31, 58, 47, 0.22),
        inset 0 1px 0 rgba(255, 255, 255, 0.28);
    backdrop-filter: blur(30px) saturate(180%);
    -webkit-backdrop-filter: blur(30px) saturate(180%);
}

/* 6.2 轨道内的极细竖向发丝纹理。它存在的唯一理由是给滑块一个
   「永远有东西可折射」的参照物：滚到顶时导航正下方是空的
   （.main-content 有 ~88px 顶部留白），没有这层纹理，折射滤镜就是
   对着空气做功。有序、低对比，所以不会显脏。 */
.main-nav::before {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: inherit;
    background: repeating-linear-gradient(90deg,
        rgba(255, 255, 255, 0.035) 0 1px,
        rgba(255, 255, 255, 0) 1px 10px);
    pointer-events: none;
}

/* 6.3 选中滑块。位置由 js/nav-glass.js 写入 --thumb-* 变量。
       用物理 left/top 而不是 inset-inline-*：JS 算出的 offsetLeft 本来就是
       物理值，逻辑属性在 RTL 下会从右边缘起算，两者会对不上。
       （本应用 body{direction:ltr}，但别依赖这个事实。） */
.nav-thumb {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 0;                         /* 在标签之下、纹理之上 */
    width: var(--thumb-w, 0px);
    height: var(--thumb-h, 0px);
    transform: translate3d(var(--thumb-x, 0px), var(--thumb-y, 0px), 0);
    border-radius: 999px;
    /* 上亮下暗的一层薄渐变 = 玻璃的受光面；纯单色的半透明白只会看起来像
       "蒙了层塑料"。顶部高光边 + 底部回光共同构成边缘折射的错觉。 */
    background: linear-gradient(180deg,
        rgba(255, 255, 255, 0.26) 0%,
        rgba(255, 255, 255, 0.10) 52%,
        rgba(255, 255, 255, 0.18) 100%);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.55),   /* 顶部受光边 */
        inset 0 -1px 0 rgba(255, 255, 255, 0.22),
        inset 1px 0 0 rgba(255, 255, 255, 0.16),
        inset -1px 0 0 rgba(255, 255, 255, 0.16),
        0 6px 18px rgba(12, 30, 22, 0.30);
    backdrop-filter: blur(18px) saturate(200%);
    -webkit-backdrop-filter: blur(18px) saturate(200%);
    pointer-events: none;
    opacity: 0;
}

.main-nav[data-thumb="init"] .nav-thumb,
.main-nav[data-thumb="on"] .nav-thumb { opacity: 1; }

/* 首帧不许过渡，否则滑块会从 (0,0) 滑到第一个条目，看起来像坏了 */
.main-nav[data-thumb="init"] .nav-thumb { transition: none; }

/* 临界阻尼曲线：零过冲。导航切换是点按、不携带手势动量，
   按 apple §4 只有甩动/拖拽释放才允许弹跳 —— 加了bounce就显廉价。
   CSS transition 从当前计算值重新插值，天然可打断、不跳位（§3）。 */
.main-nav[data-thumb="on"] .nav-thumb {
    transition:
        transform 320ms cubic-bezier(0.22, 0.61, 0.36, 1),
        width 320ms cubic-bezier(0.22, 0.61, 0.36, 1),
        height 320ms cubic-bezier(0.22, 0.61, 0.36, 1),
        opacity 180ms linear;
}

/* 6.4 折射层。⚠ 只有这一层带 url()。
   这是结构性的降级设计：在不支持 backdrop-filter: url() 的引擎上，
   作废的是**这个子元素上的这一条声明**，而父级 .nav-thumb 的模糊是
   另一个元素上的另一条声明，完全不受牵连 —— 滑块退化成干净磨砂。
   所以不需要 UA 嗅探，也不用赌 @supports 的解析器行为。

   mask 让扭曲只留在边缘环、中心保持光学通透 —— Apple 的液态玻璃就是这样，
   这也是「不能太乱太脏」和「高级感」的来源。 */
.nav-lens {
    position: absolute;
    inset: 0;
    border-radius: inherit;
    backdrop-filter: blur(2px) url(#nav-lens);
    -webkit-backdrop-filter: blur(2px);
    mask-image: radial-gradient(125% 150% at 50% 50%, transparent 50%, #000 86%);
    -webkit-mask-image: radial-gradient(125% 150% at 50% 50%, transparent 50%, #000 86%);
    pointer-events: none;
}

/* 6.5 标签层。必须显式抬到滑块之上：滑块是绝对定位元素，
   而 .nav-link 是非定位的 flex item —— 定位元素默认画在非定位元素上方，
   不给 z-index 标签就会被滑块盖住。 */
.nav-link {
    position: relative;
    z-index: 1;
    border-radius: 999px;
    /* 圆角锁定：交互控件一律 full-pill，表面一律 20px，没有第三种 */
    transition: color 180ms linear, transform 100ms ease-out;
}

/* 触屏按压反馈：在 pointer-down 就响应，不等路由提交（apple §1、§10）。
   原来只有 :hover，手机上等于完全没有反馈。 */
.nav-link:active { transform: scale(0.97); }

.nav-link:hover { color: #fff; }

/* 选中项不再自己画实心绿块 —— 指示交给滑块，避免两套指示打架 */
.nav-link.active {
    background: transparent;
    color: #fff;
    font-weight: 600;
}

/* 抽屉里的克隆条目没有滑块可用（滑块只跟顶部轨道），必须保留实心指示，
   否则窄屏抽屉里看不出当前在哪一页。 */
.nav-drop .nav-link.active {
    background: rgba(31, 107, 76, 0.14);
    color: var(--primary);
}

.nav-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.nav-icon svg {
    width: 15px;
    height: 15px;
    display: block;
}

.exam-tab.active,
.ai-type-tabs .active {
    background: var(--primary);
    border-color: var(--primary);
    color: #fff;
}

/* ────────────────────────────────────────────────
   7. 无障碍：键盘焦点可见环
      换皮把大量元素改成低对比的玻璃面，焦点环必须显式补回
   ──────────────────────────────────────────────── */
:where(a, button, input, textarea, select, [tabindex]):focus-visible {
    outline: 2px solid var(--secondary);
    outline-offset: 2px;
    border-radius: 999px;
}

/* 正文顶部留白改为跟随轨道实际高度。
   原来写死 110px：一是偏大（违反 taste §4.7 hero 顶距 ≤96px），
   二是轨道在 769~900px 会折成两行、高度变成 ~92px，固定值两头都不对。
   --nav-h 由 js/nav-glass.js 发布。 */
.main-content {
    padding-top: calc(var(--nav-h, 56px) + 32px);
}

/* 尊重系统的减少动效偏好：换皮层引入了 scale/translate 过渡 */
@media (prefers-reduced-motion: reduce) {
    .feature-card:hover,
    .vls-main-btn:hover {
        transform: none;
    }
    /* 滑块瞬时到位，不滑过去；折射层停掉（它靠位移产生"流动"感） */
    .main-nav[data-thumb="on"] .nav-thumb { transition: none; }
    .nav-lens { display: none; }
    * {
        transition-duration: 0.01ms !important;
        animation-duration: 0.01ms !important;
    }
}

/* ────────────────────────────────────────────────
   7.5 另外两条降级（apple §14 要求三个独立信号，原来只做了第一条）
   ──────────────────────────────────────────────── */

/* 用户要求减少半透明 → 玻璃转霜白实色、去模糊、去折射。
   半透明是装饰，可读性是需求。 */
@media (prefers-reduced-transparency: reduce) {
    .main-nav {
        background: var(--primary-dark);
        backdrop-filter: none;
        -webkit-backdrop-filter: none;
    }
    .main-nav::before { display: none; }
    .nav-thumb {
        background: rgba(255, 255, 255, 0.26);
        backdrop-filter: none;
        -webkit-backdrop-filter: none;
    }
    .nav-lens { display: none; }
    .vls-card,
    .feature-card,
    .exam-item,
    .ai-output,
    .settings-card,
    .saved-vocab-item,
    .article-record-item {
        background: #fffdf9;
        backdrop-filter: none;
        -webkit-backdrop-filter: none;
    }
}

/* 高对比模式：近实色底 + 明确描边，不靠模糊区分层级 */
@media (prefers-contrast: more) {
    .main-nav {
        background: var(--primary-dark);
        border-color: #fff;
        backdrop-filter: none;
        -webkit-backdrop-filter: none;
    }
    .nav-thumb {
        background: #fff;
        border: 2px solid var(--primary-dark);
        backdrop-filter: none;
        -webkit-backdrop-filter: none;
    }
    .nav-lens { display: none; }
    .nav-link.active { color: var(--primary-dark); }
    .vls-card,
    .feature-card,
    .exam-item {
        background: #fff;
        border: 2px solid var(--text-primary);
    }
}

/* 窄屏：大字号阿语收一档，避免长词溢出卡片 */
@media (max-width: 420px) {
    .hero-title-ar { font-size: 38px; }
    .vls-word { font-size: 42px; }
    .vls-word.sm { font-size: 32px; }
    .vl-stat b { font-size: 32px; }
}

/* ────────────────────────────────────────────────
   8. 性能与兼容性兜底
   ------------------------------------------------------------
   本应用跑在自研 Android WebView APK 上，WebView 版本由设备决定，
   可能老到不支持 backdrop-filter。届时半透明玻璃会直接透出下层文字、
   几乎不可读，所以必须给一条实色退路 —— 而不是等它掉帧或糊成一片。
   ──────────────────────────────────────────────── */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
    .vls-card,
    .feature-card,
    .exam-item,
    .ai-output,
    .settings-card,
    .saved-vocab-item,
    .article-record-item {
        /* 退化为不透明纸白卡片，保留圆角/描边/落影，观感仍成立 */
        background: #fffdf9;
    }

    .main-nav {
        /* 导航失去磨砂后必须给实色，否则与滚动内容混在一起 */
        background: var(--primary-dark);
    }

    .main-header,
    .site-header,
    header.site-header {
        background: var(--bg-primary);
    }
}