/* ===========================================================
   流体力学实验教学网站 · 设计令牌
   浅色为默认（实验室强光 / 投影可读），深色为可选
   =========================================================== */

:root{
  /* —— 品牌与语义色 —— */
  --brand:        #0a66d0;
  --brand-strong: #0854ad;
  --brand-soft:   #eaf2fe;
  --brand-line:   #bfd9f8;

  /* 流态语义色：层流 / 过渡 / 湍流 */
  /* 流态色本身（含义）不变，只把三个浅底往中性侧挪一点点，
     让徽标与 note 在新的 --surface / --brand-soft 旁边不显脏。
     对比度实测：lam-ink 4.76→4.82、trn-ink 5.51→5.60、tur-ink 5.97→6.11，逐项只升不降。 */
  --lam:      #0f8a5f;
  --lam-bg:   #e6f7f0;
  --trn:      #a86a00;
  --trn-bg:   #fdf3e2;
  --tur:      #c0392b;
  --tur-bg:   #fceceb;
  /* 动能色（伯努利动画里的速度水头 / 粒子加速）：橙，与「过渡」那个 --trn 分开 —— 那是流态约定色，不许借用。
     --ke 画图用，--ke-ink 写字用（对 --ke-bg 与白底都够 4.5:1），深色两份在下面各有一套。 */
  --ke:       #e8721c;
  --ke-ink:   #9a4a0e;
  --ke-bg:    #fdebd9;

  /* —— 中性阶（单色相 ~215°）——
     ⚠ 页面**只用下面的语义名**，不要直接引 --n-*。新增灰一律从这条阶里取，
       不许再 ad-hoc 调一个新灰出来。
     ★ 本轮最核心的一处：--surface-2「台面」从 #f8fafd 调深到 #e8edf4。
       实算：台面/面板的对比度 1.046 → 1.176。别看数字小 —— 高于纯白 1.0 的那部分
       从 0.046 涨到 0.176，是原来的 3.8 倍，这才是眼睛真正拿得到的层次信息。
       三档灰分离度不够，是上一轮"只提高了一点点"的物理原因：
       无论叠多少柔阴影，卡片和背景都还是"贴着"的。 */
  --n-0:  #ffffff;   /* 面板 */
  --n-50: #eef1f6;   /* 地面 */
  --n-100:#f5f7fa;   /* 悬停 */
  --n-150:#e8edf4;   /* 台面（凹进去的读数窗） */
  --n-200:#dbe3ed;   /* 发丝线 */
  --n-300:#c6d0de;   /* 结构线 */
  --n-400:#77869b;   /* 控件边界 */

  /* —— 中性色（语义层）—— */
  --bg:        var(--n-50);
  --surface:   var(--n-0);
  --surface-2: var(--n-150);   /* ★台面：站内 14 处"凹陷面"自动升级 */
  /* ⚠ 悬停必须与台面分家。改前两者共用 --surface-2 —— 台面一调深，
     顶栏返回键、图标按钮、段头、普通按钮的 hover 全变成"按下去/被禁用"的观感。 */
  --hover:     var(--n-100);
  --text:      #141d2b;
  --text-2:    #48586e;
  /* ⚠ 对比度：全站 12–13px 的提示、单位、同步状态都用它，属正文，WCAG AA 要 4.5:1。
     原先 #7b8aa1 对白底只有 3.50、对 --surface-2 是 3.35、对 --brand-soft 只有 3.05 —— 都不合格。
     #5b6b80 → 白底 5.44 / surface-2 5.20 / brand-soft 4.73，三处全过。
     （深色主题的 --muted 已是 5.20 以上，不用动。） */
  --muted:     #5b6b80;
  --line:       var(--n-200);
  --line-soft:  var(--n-200);
  --line-strong:var(--n-300);   /* 卡边、内嵌窗的结构线 */
  /* ⚠ 输入框边框专用。实测原来用 --line，对白底只有 **1.25:1**，
     而 WCAG 1.4.11（非文本对比度）要求 UI 控件边界 ≥3:1 —— 这是一条既有的不合格项。
     #77869b 对面板 3.71、对台面 3.15、对地面 3.27，三处全过。 */
  --line-field: var(--n-400);

  /* —— 阴影 ——
     方向 D 的核心之一：**双层阴影**。单层小阴影在浅灰底上几乎看不出来，
     卡片与背景是"贴着"的；近处 1px 描边影 + 远处大范围柔影，才能把层次拉开。
     ⚠ 打印时必须去掉（见 app.css 末尾的 @media print 收尾块）。 */
  /* —— 阴影纪律（方向「量台」）——
     ① 层次靠**填充色台阶**，不靠阴影；
     ② 阴影只表示"真的浮在别的东西上面"（顶栏 / 底栏 / 答疑面板 / toast / 全屏手写层）；
     ③ 一个边界只用一个信号。
     上一轮同一张卡上叠着 1px 描边 + 双层柔阴影 + 卡顶 2px 渐变条，三个信号互相抵消 ——
     而且装饰全加在**卡片边框**上，学生盯着看的却是卡片**里面**。 */
  --sh-1: none;
  --sh-2: none;
  --sh-3: none;
  --sh-float: 0 1px 0 rgba(16,32,56,.05), 0 3px 8px -2px rgba(16,32,56,.14);
  --sh-modal: 0 2px 6px rgba(16,32,56,.10), 0 18px 40px -14px rgba(16,32,56,.22);
  --btn-sh: none;
  --accent-bar: none;

  /* —— 材质：全部 0~4px 模糊，不进合成层，低端安卓零压力 —— */
  --edge-hi: inset 0 1px 0 rgba(255,255,255,.92);            /* 面板顶部受光边 */
  --bezel:   inset 0 0 0 1px var(--line-strong),
             inset 0 2px 3px -1px rgba(16,32,56,.09);        /* 从面板上挖出来的窗 */
  --press:   inset 0 2px 4px rgba(15,26,46,.20),
             inset 0 0 0 1px var(--line-strong);

  /* —— 动效：全站只有两档时长 —— */
  --dur-1:120ms; --dur-2:200ms; --ease:cubic-bezier(.2,.8,.25,1);

  /* —— 圆角 —— */
  --r-1: 9px;
  --r-2: 12px;
  --r-3: 14px;
  --r-full: 999px;

  /* —— 间距 —— */
  --s-1: 4px;  --s-2: 8px;  --s-3: 12px;
  --s-4: 16px; --s-5: 24px; --s-6: 32px; --s-7: 48px;

  /* —— 字号（移动优先） ——
     ⚠ **层级只能靠字号扛，不能靠字重。**
       实测（教师投影用的那台 Windows + Chrome）：中文与数字的字重都只塌成两档 ——
       400/500 一档、600~900 一档，墨迹像素完全相同。
       所以 `font-weight:800` 是个不存在的层级，写上去只会让人以为改了却毫无变化。
       iPhone 上 PingFang SC 有 Medium(500)/Semibold(600) 之分，但课堂投影看不到。
     改前段标题与正文都是 15px，八个折叠段长得一模一样 —— 这是页面"显得平"的头号原因。 */
  --f-xs: 12px; --f-sm: 14px; --f-md: 16px;
  --f-lg: 19px; --f-xl: 22px; --f-2xl: 28px;
  --f-num: 34px;            /* 读数专用档：只给 .kpi .v / .dout .v.big 用 */

  /* —— 行高：字大行紧、字小行松 —— */
  --lh-tight: 1.15;   /* 大读数 */
  --lh-head:  1.32;   /* 各级标题 */
  --lh-body:  1.65;   /* 正文（刻意不涨，控页面长度） */
  --lh-note:  1.60;   /* 辅助文字 */

  /* —— 触控 —— */
  --tap: 48px;              /* 最小可点区域，手机在实验台边单手操作 */
  --bar-h: 64px;            /* 底部固定操作条高度 */

  /* -apple-system 放在 system-ui 之前：老版本 iOS Safari 不认 system-ui，
     会一路掉到 Helvetica，中文变成很难看的回退字体。 */
  /* 语义别名：全站"达标/注意/不达标"与"层流/过渡/湍流"共用同一套色。
     ⚠ --ok/--warn/--bad 此前**从未定义**，app.css 里一直走 var(--ok,#28c281) 这类回退值，
        那三个 hex 来自旧表的深色调色板，浅色下对比度只有 1.6~2.8:1（投影根本看不清），
        而且深浅主题都不跟随。 */
  --ok:   var(--lam);  --ok-bg:   var(--lam-bg);
  --warn: var(--trn);  --warn-bg: var(--trn-bg);
  --bad:  var(--tur);  --bad-bg:  var(--tur-bg);

  /* 彩色**文字**专用的加深变体：--lam/--trn/--tur 留给图线与边框（大色块 3:1 够），
     徽标与彩色正文改用 -ink，浅色下全部 ≥4.5:1。 */
  --lam-ink:#0a7a54;
  --trn-ink:#8a5600;
  --tur-ink:#a8291c;

  /* 屏幕手写墨色（深色主题下要翻白，否则黑纸黑字） */
  --ink:#111827;

  /* 实心状态块（流态徽标）上的字色。⚠ 三处都要写：这里 + 两个深色块，
     漏一处深色下就是白字压在亮绿底上。
     实测对比度：白字对 lam 5.42 / trn 6.10 / tur 7.00；
     深色下 #0a0f1e 对 lam 9.96 / trn 11.9 / tur 7.5 —— 全部过 AA。 */
  --on-state:#ffffff;

  --font: -apple-system, BlinkMacSystemFont, system-ui, "Segoe UI", Roboto, "Helvetica Neue",
          "PingFang SC", "Microsoft YaHei", "Noto Sans SC", sans-serif;
  --mono: ui-monospace, SFMono-Regular, Menlo, Consolas, "Cascadia Mono", monospace;
}

/* 深色：跟随系统 */
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
  --lam-ink:var(--lam); --trn-ink:var(--trn); --tur-ink:var(--tur); --ink:#e7ecff;
  --on-state:#0a0f1e;

    --brand:      #57a8ff;
    --brand-strong: #8ec2ff;
    --brand-soft: #132743;
    --brand-line: #2a4a78;

    --lam:    #34d399; --lam-bg: #0e3126;
    --trn:    #fbbf24; --trn-bg: #332910;
    --tur:    #f87171; --tur-bg: #42211e;
    --ke:     #ffa552; --ke-ink: #ffb26b; --ke-bg: #3a2210;

    --bg:         #0a0f1e;
    --surface:    #131b2f;
    --surface-2:  #060b17;
    --text:       #e9eefc;
    --text-2:     #b5c3e0;
    --muted:      #8797b6;
    --line:       #243052;
    --line-soft:  #1a2340;
  --hover:      #1c2540;
  --line-strong:#3a496a;
  --line-field: #6d7da4;

  /* 阴影纪律：静态卡片不投影，只有真浮层才有 */
  --sh-1: none; --sh-2: none; --sh-3: none;
  --sh-float:0 1px 0 rgba(0,0,0,.5), 0 4px 10px -2px rgba(0,0,0,.55);
  --sh-modal:0 3px 8px rgba(0,0,0,.55), 0 22px 48px -16px rgba(0,0,0,.62);
  --btn-sh: none;
  /* 深色下 --edge-hi 才是"有材质"的全部秘密：一道极淡的顶部受光边。
     没有它，深色卡片就是一块死掉的色块。 */
  --edge-hi: inset 0 1px 0 rgba(255,255,255,.055);
  --bezel:   inset 0 0 0 1px var(--line-strong),
             inset 0 2px 4px -1px rgba(0,0,0,.60);
  --press:   inset 0 2px 5px rgba(0,0,0,.6), inset 0 0 0 1px var(--line-strong);
  }
}

/* 深色：手动切换（优先级高于系统） */
:root[data-theme="dark"]{
  --lam-ink:var(--lam); --trn-ink:var(--trn); --tur-ink:var(--tur); --ink:#e7ecff;
  --on-state:#0a0f1e;

  --brand:      #57a8ff;
  --brand-strong: #8ec2ff;
  --brand-soft: #132743;
  --brand-line: #2a4a78;

  --lam:    #34d399; --lam-bg: #0e3126;
  --trn:    #fbbf24; --trn-bg: #332910;
  --tur:    #f87171; --tur-bg: #42211e;
  --ke:     #ffa552; --ke-ink: #ffb26b; --ke-bg: #3a2210;

  --bg:         #0a0f1e;
  --surface:    #131b2f;
  --surface-2:  #060b17;
  --text:       #e9eefc;
  --text-2:     #b5c3e0;
  --muted:      #8797b6;
  --line:       #243052;
  --line-soft:  #1a2340;
  --hover:      #1c2540;
  --line-strong:#3a496a;
  --line-field: #6d7da4;

  /* 阴影纪律：静态卡片不投影，只有真浮层才有 */
  --sh-1: none; --sh-2: none; --sh-3: none;
  --sh-float:0 1px 0 rgba(0,0,0,.5), 0 4px 10px -2px rgba(0,0,0,.55);
  --sh-modal:0 3px 8px rgba(0,0,0,.55), 0 22px 48px -16px rgba(0,0,0,.62);
  --btn-sh: none;
  /* 深色下 --edge-hi 才是"有材质"的全部秘密：一道极淡的顶部受光边。
     没有它，深色卡片就是一块死掉的色块。 */
  --edge-hi: inset 0 1px 0 rgba(255,255,255,.055);
  --bezel:   inset 0 0 0 1px var(--line-strong),
             inset 0 2px 4px -1px rgba(0,0,0,.60);
  --press:   inset 0 2px 5px rgba(0,0,0,.6), inset 0 0 0 1px var(--line-strong);
}

/* ===========================================================
   桌面自适应 · 唯一断点表（2026-08-23，教师：「电脑上就按电脑屏幕大小显示」）
   全站 min-width 查询只许出现这三个数，新增视图照抄，**不要发明第四档**：
     T1  >=  900px  宽屏起步：平板横屏 / 小笔记本（本站原有断点，沿用）
     T2  >= 1200px  桌面主力：1280 / 1366 / 1440 / 1536 笔记本
     T3  >= 1600px  大屏与教室投影：1707(1080p@125%) / 1920
   叠加限定（不算档位）：and (pointer:fine) —— 只在真·鼠标设备上压缩触控尺寸，
     iPad Pro 横屏也是 1366px，但它是触摸设备，不能按桌面对待。
   已有的 max-width:520 / 640 是手机专用，一律不动。

   ⚠ 屏幕变大是**字变大、分栏变多**，不是把每行拉长 ——
     正文一行超过约 90 个汉字就难读。T3 的 1180px 配合放大后的字号，
     每行仍是 ~65 个汉字，与 T2 一致。
   ⚠ media query 里用不了 var()，这三个数只能字面量重复；
     改动时全局 grep "min-width:" 校一遍。
   =========================================================== */
:root{
  --wrap-max:      760px;   /* 内容列。.wrap 与顶/底栏对齐都读它 */
  --wrap-max-wide:1180px;   /* .wrap.wide（teacher.html，唯一会被投影的页） */
}
@media (min-width: 900px){ :root{ --wrap-max: 840px; --wrap-max-wide:1180px } }
@media (min-width:1200px){ :root{ --wrap-max:1040px; --wrap-max-wide:1440px } }
@media (min-width:1600px){ :root{ --wrap-max:1180px; --wrap-max-wide:1660px } }

/* 屏幕越大字越大 —— 这三档以前只放宽了内容列，字号一动不动，
   于是投影到教室后排时和手机上一样小。断点仍然只有 900 / 1200 / 1600 三个数。
   T3 校验：行长 = --wrap-max 1180 / 18px ≈ 65 个汉字，与本文件顶部注释规定的一致。 */
@media (min-width: 900px){ :root{ --f-lg:20px; --f-xl:24px; --f-2xl:32px; --f-num:38px } }
@media (min-width:1200px){ :root{ --f-xs:13px; --f-sm:15px; --f-md:17px;
                                  --f-lg:21px; --f-xl:26px; --f-2xl:36px; --f-num:44px } }
@media (min-width:1600px){ :root{ --f-xs:14px; --f-sm:16px; --f-md:18px;
                                  --f-lg:24px; --f-xl:30px; --f-2xl:42px; --f-num:56px } }