/* public/css/base.css —— 设计令牌 + reset + 共用控件原语
 *
 * 为什么单独一份 base:
 * 1. 颜色、圆角、阴影、层级、字体栈全部收在 :root 的 CSS 变量里,面板 / 时间轴 / 图例 / 详情
 *    这些由不同模块交付的样式表只消费变量,不各自硬编码颜色 —— 否则深色主题会在六个文件里
 *    漂移成六种灰。底图颜色是另一处唯一事实(map/style.js,§7.3);--bg 是页面与球外太空的底色(= map/limb-layer.js 的 SPACE_COLOR),不等于底图 background。
 *    第三轮起有两套:`:root` 是深色(默认),`:root[data-theme="light"]` 整套覆盖颜色 / 阴影类令牌(浅色「暖纸」,
 *    --bg = limb-layer.js 的 LIMB_THEMES.light.space);两段的 --bg 各有测试钉住(limb-layer.test.js、theme.test.js)。
 * 2. index.html 只链接 base.css 与 layout.css;各 UI 模块(时间轴 / 面板 / 详情 / 移动端)自带
 *    的样式表由模块自己按 import.meta.url 注入,免得壳去引用尚不存在的文件而在控制台报 404。
 *    模块样式表可以直接用这里的变量与 .a-btn / .a-panel 原语。
 * 3. 无障碍(§11.4):焦点可见环、触控目标 ≥ 44 px、文字对比度 ≥ 4.5:1、prefers-reduced-motion
 *    关掉过渡,都在这里一次性定死,模块不必重复。
 * 4. 不引入 webfont(OFL 不在允许许可清单,§13),只用系统字体栈(§7.3 逐字)。
 */

:root {
  /* ══ v7 罗盘留白 Compass Zen —— 暖墨 + 罗盘铜(SPEC-v7 §4.2;评审修订 M1:一切底板实色) ══ */

  /* ── 空间(球外)与底色:墨池 ── */
  --bg: #1c1916;                              /* 页面与球外太空的底色(= map/limb-layer.js 的 SPACE_COLOR,测试钉住);首访球缘外紧邻处的颜色 */
  --cz-space-mid: #14120f;                    /* 背景中圈 */
  --cz-space-deep: #0b0a08;                   /* 背景外圈 */
  --cz-space-corner: #070605;                 /* 四角 */

  /* ── 表面:一律实底(LESSONS C5;评审 M1:不模糊时半透明只带来地图鬼影与低对比) ── */
  --bg-elev: #1b1916;
  --panel: #171512;                           /* .a-panel 通用底(实色) */
  --panel-solid: #171512;                     /* = --cz-surface;sticky 首列 */
  --cz-surface: #171512;                      /* sheet / 下拉 / 气泡 / 提示条 */
  --cz-surface-2: #1f1c19;                    /* hover 行、卡片 */
  --cz-surface-3: #2a2622;                    /* 按下 / 选中 */
  --cz-plate: #171512;                        /* 铭牌、坞、右上控件底(实色:压在任何地图上 --text 15.3 : 1、--text-dim 7.7 : 1) */
  --cz-pill: #171512;                         /* 署名药丸、时间气泡、读数药丸(实色) */
  --panel-hover: rgba(255, 246, 232, 0.06);
  --panel-active: rgba(255, 246, 232, 0.10);
  --border: rgba(255, 246, 232, 0.09);        /* 发丝线 */
  --border-strong: rgba(255, 246, 232, 0.16);
  --cz-hair: rgba(255, 246, 232, 0.12);       /* 坞内分隔竖线 1 × 28 */
  --cz-scrim: rgba(7, 6, 5, 0.50);            /* 模态遮罩(不模糊) */

  /* ── 文字:纸白三阶(全部实色,便于核算) ── */
  --text: #efebe4;                            /* 对 --cz-surface 15.3 : 1 */
  --text-dim: #aea89f;                        /* 7.7 : 1 */
  --text-faint: #706b64;                      /* 只许装饰 / 禁用态(3.45 : 1) */
  --text-invert: #171512;

  /* ── 唯一强调色:罗盘铜(只当点和线;落点清单见 SPEC §4.3) ── */
  --accent: #e0956a;
  --accent-strong: #f2b896;                   /* 强调色上的文字 / hover */
  --accent-soft: rgba(224, 149, 106, 0.16);
  --cz-pin-ink: #171512;                      /* 图钉墨:墨线、针尾(= 深色 --cz-surface);两主题同值 */
  --cz-pin-paper: #f7f3ec;                    /* 图钉纸:外圈纸晕、枢轴(对降水蓝 4.52) */
  --cz-pin-copper: #e0956a;                   /* 图钉铜:指针(= 深色 --accent;铜压在墨上一律用亮铜) */
  --ok: #8fd1a8;
  --warn: #e8c15a;
  --danger: #ec7468;
  /* ── 电力字形的暖墨描边(JUDGE-v7-R3 §1.6.0;SPEC-v7-R3-power-A §1.1):主题无关,= COLORS.power.plantStroke;
        深色界面上与底同色(不显),浅色界面上成为色块的轮廓。WP-L 的浅色段不得覆盖它 ── */
  --cz-pw-ring: rgba(20, 16, 12, 0.92);

  /* ── 罗盘环:发丝(LESSONS G:1× 屏上主刻度 α ≥ 0.12、细刻度 ≥ 0.065 才看得见) ── */
  /* fix1(设计评审 M1):环外移到日冕之外的暗区(r + 22)后整体提亮一档,5° 那一档不再画(full 档每 10° 一根) */
  --cz-ring: rgba(255, 244, 228, 0.36);       /* 环圆:实测 1440 首屏比两侧暗区亮 ≥ 50 级(ring-profile) */
  --cz-tick-minor: rgba(255, 244, 228, 0.12); /* 每 10°(slim 每 10°) */
  --cz-tick-mid: rgba(255, 244, 228, 0.16);   /* 每 15°(slim 每 30°) */
  --cz-tick-major: rgba(255, 244, 228, 0.30); /* 每 45° */
  --cz-tick-card: rgba(255, 244, 228, 0.40);  /* 东 / 南 / 西(13 px,只画刻度,不写字 —— 评审 M3) */
  --cz-ring-hot: rgba(255, 244, 228, 0.52);   /* 悬停 / 拖动时圆与刻度统一提到这一档 */

  /* ── 形状 ── */
  --radius-sm: 8px;                           /* chip、下拉行、小按钮 */
  --radius: 12px;                             /* 常用按钮、搜索、投影切换、齿轮 */
  --radius-lg: 16px;                          /* 铭牌、坞 */
  --cz-radius-sheet: 20px;                    /* sheet 顶两角、模态 */
  --cz-round: 50%;                            /* 只给"方位 / 时间":环、迷你罗盘、整球、播放、手柄 */
  --shadow: 0 12px 32px rgba(0, 0, 0, 0.42);
  --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.32);
  --cz-shadow-plate: 0 10px 28px rgba(0, 0, 0, 0.30), inset 0 1px 0 rgba(255, 246, 232, 0.04);
  --cz-shadow-sheet: 0 -16px 44px rgba(0, 0, 0, 0.42);
  --blur: none;                               /* 全站关闭 backdrop-filter(所有用处都写成 var(--blur)) */

  /* ── 间距(4 的倍数) ── */
  --cz-sp-1: 4px;
  --cz-sp-2: 8px;
  --cz-sp-3: 12px;
  --cz-sp-4: 16px;
  --cz-sp-5: 24px;
  --cz-sp-6: 32px;
  --cz-sp-7: 48px;
  --gap: 12px;
  --gap-sm: 8px;
  --tap: 44px;                                /* 触控目标下限(§11.4) */

  /* ── 壳几何(layout.css / compass.js / stage.js 共用的唯一事实;断点重定义在 layout.css) ── */
  --cz-edge: 24px;                            /* ≥1024 24 / 600–1023 16 / <600 12 */
  --cz-ctl-h: 40px;                           /* 右上控件高;coarse 44 */
  --cz-top-band: calc(var(--cz-edge) + var(--cz-ctl-h) + 12px);   /* 76 / 68;手机另算 76 */
  --cz-dock-h: 60px;                          /* ≥1024 单行 60 / 600–1023 两行 104 / <600 两行 108;第 15 轮 A 版本块(layout.css 文末)≥1024 两行 92、触屏 100 */
  --cz-foot-h: 28px;                          /* 署名沟 28 / 24 / 22;A 版本块 ≥1024 署名进坞下行右端,沟缩成 8 px 底缝 */
  --cz-modal-foot: var(--cz-foot-h);          /* 模态遮罩与面板给底部让出的高;A 版署名进坞后设 48、触屏 56(about.js / settings-panel.js 读,第 15 轮决定 32 / 37) */
  --cz-sheet-lift: 0px;                       /* sheet 再上抬多少;第 15 轮定稿 A 不设、恒 0(令牌与读者留着,将来坞下再垫东西时用);0 时逐像素同基线(决定 32) */
  --cz-dock-band: calc(var(--cz-dock-h) + var(--cz-foot-h));      /* 88 / 128 / 130;A 版本块 ≥1024 100、触屏 108 */
  --cz-dock-max: 1120px;
  --cz-col: min(var(--cz-dock-max), calc(100vw - 2 * var(--cz-edge)));
  --cz-gutter: max(var(--cz-edge), calc((100vw - var(--cz-dock-max)) / 2));
  --cz-plate-w: clamp(272px, 21.7vw, 352px);  /* 1440 → 312;1920 → 352 */
  --cz-sheet-peek: 84px;
  /* 900 高 → 512(第三轮浅色 C 段:WP-F 的当前状况行占 29 px 后,1440×900 的概览要 +40 px 才放得下气压行;多给 4 px 余量。
     上限 520 不变 —— ≥ 920 高本来就放得下;≤ 800 高另有矮屏档,见 layout.css) */
  --cz-sheet-half: clamp(360px, calc(52dvh + 44px), 520px);
  --cz-sheet-full: calc(100dvh - var(--cz-top-band) - var(--cz-dock-band) - var(--cz-sheet-lift) - 12px);
  --cz-menu-max: min(44dvh, 340px);           /* 全部图层 sheet 内容封顶(≥ 1024;与电力开关无关的一个值。第三轮 fix2:回到 SPEC-v7 §1.3 的 340 —— 内容区 ≈ 300 px,1440 / 1366 / 1280 中英都不滚动) */
  --cz-stage-y: 0px;                          /* < 1024:(顶带 − 坞带) / 2,见 layout.css */
  /* 兼容旧令牌(模块仍在读) */
  --bar-w: 56px;
  --detail-w: 420px;
  --timeline-h: 88px;                         /* = 坞带;panel.css .lm 预算公式读它(公式被测试钉住,只改令牌) */
  --timeline-h-compact: 56px;                 /* 手机紧凑时间轴(§11.4) */
  --sheet-peek: 96px;                         /* 手机抽屉 peek 档高(§11.4);ui/mobile.js 可覆盖 */

  /* ── 层级(自下而上:地图 → 标注 → 罗盘环 → 快照 → 常规 UI → 面板 → 浮层 → 提示;原值,纯整数) ── */
  --z-map: 0;
  --z-labels: 10;
  --z-compass: 12;                            /* 罗盘环宿主 #compass(#ui 之外的 fixed 层) */
  --z-xfade: 15;                              /* 投影切换的快照交叉淡化层(map.js;盖住标注、不盖 UI) */
  --z-ui: 20;
  --z-panel: 30;
  --z-menu: 40;
  --z-toast: 50;

  /* ── 动效(全部一次性;空闲 0 动画) ── */
  --dur: 120ms;
  --ease: cubic-bezier(0.2, 0, 0, 1);
  --cz-dur-1: 120ms;                          /* 颜色、背景、hover */
  --cz-dur-2: 200ms;                          /* 展开收起、拇指滑块、环显隐 */
  --cz-dur-3: 320ms;                          /* sheet 升起 */
  --cz-dur-rest: 600ms;                       /* 进入静息态 */
  --cz-ease-out: cubic-bezier(0.16, 1, 0.3, 1);   /* expo-out */
  --cz-ease-in: cubic-bezier(0.4, 0, 1, 1);
  --cz-ease-std: cubic-bezier(0.2, 0, 0, 1);

  /* ── 字体(只用系统字体;不引入 webfont) ── */
  --font: "Segoe UI Variable Text", "SF Pro Text", -apple-system, "PingFang SC", "Microsoft YaHei UI",
          "Microsoft YaHei", "Noto Sans CJK SC", system-ui, sans-serif;
  --cz-font-display: "Segoe UI Variable Display", "SF Pro Display", -apple-system, "PingFang SC",
          "Microsoft YaHei UI Light", "Microsoft YaHei UI", "Noto Sans CJK SC", system-ui, sans-serif;
  /* 仪表数字:只用于纯数字 / 度数 / 单位(时刻、刻度、方位、日号) */
  --cz-font-num: "Bahnschrift", "DIN Alternate", "SF Pro Display", "Segoe UI Variable Display", system-ui, sans-serif;
  --font-mono: "Cascadia Mono", "SF Mono", ui-monospace, SFMono-Regular, Consolas, "Liberation Mono", monospace;

  /* ── 字号阶梯(中文最小 12;数字 / 拉丁最小 11) ── */
  --cz-fs-display: clamp(36px, 3.2vw, 56px);  /* 铭牌图层名:1440 → 46 */
  --cz-fs-clock: clamp(24px, 2.1vw, 34px);    /* 铭牌时刻:1440 → 30 */
  --cz-fs-title: 24px;                        /* 详情地名、sheet 标题 */
  --fs-lg: 16px;
  --fs: 14px;                                 /* 坞内按钮、正文 */
  --fs-sm: 13px;                              /* 表格、次要按钮 */
  --fs-xs: 12px;                              /* 最小中文:组标题、日期、meta */
  --cz-fs-num: 11px;                          /* 只给纯数字 / 拉丁:图例刻度、环读数、GMT+8 */
  --cz-fw-light: 300;
  --cz-fw-regular: 400;
  --cz-fw-medium: 500;

  /* ── R3 主题化新增(深色值 = 原写死字面值;浅色值见 :root[data-theme="light"];改法见 JUDGE-v7-R3 §2.7) ── */
  --cz-space-glow: rgba(255, 238, 214, 0.045);          /* layout.css #map 顶光 */
  --cz-inset-hi: rgba(255, 246, 232, 0.06);             /* sheet / 模态顶缘内高光(mobile.css、detail.css、about.js、settings-panel.js) */
  --cz-on-map-shadow: 0 1px 2px rgba(0, 0, 0, 0.85), 0 0 3px rgba(0, 0, 0, 0.7);   /* .a-on-map */
  --border-hot: rgba(255, 246, 232, 0.32);              /* 滚动条拇指 hover */
  --cz-tick-minor-hot: rgba(255, 244, 228, 0.24);       /* stage.css 环悬停 / 拖动 */
  --cz-tick-mid-hot: rgba(255, 244, 228, 0.32);
  --cz-tick-major-hot: rgba(255, 244, 228, 0.48);
  --cz-tick-card-hot: rgba(255, 244, 228, 0.58);
  --accent-wash: rgba(224, 149, 106, 0.10);             /* stage.css "北"悬停底 */
  --cz-dial-ring: rgba(255, 244, 228, 0.28);            /* stage.css 迷你罗盘圈 */
  --cz-dial-tick: rgba(255, 244, 228, 0.42);            /* stage.css 迷你罗盘刻度 */
  --cz-switch-track: rgba(255, 246, 232, 0.14);         /* panel.css、settings-panel.js 开关关态轨 */
  --warn-soft: rgba(242, 193, 78, 0.18);                /* panel.css */
  --warn-line: rgba(232, 193, 90, 0.40);                /* timeline.css、detail.css、about.js、settings-panel.js */
  --cz-checker-a: rgba(255, 255, 255, 0.06);            /* panel.css 色条棋盘底 */
  --cz-checker-b: rgba(255, 255, 255, 0.10);
  --cz-bar-ring: rgba(0, 0, 0, 0.35);                   /* panel.css */
  --cz-cursor-ring: rgba(0, 0, 0, 0.70);                /* panel.css */
  --cz-swatch-ring: rgba(255, 255, 255, 0.35);          /* panel.css */
  --cz-rule-day: rgba(255, 246, 232, 0.24);             /* timeline.css 日界竖线 */
  --cz-track-fill: rgba(255, 246, 232, 0.36);           /* timeline.css 已播放段 */
  --cz-tick-faint: rgba(255, 246, 232, 0.10);           /* timeline.css 6 h 刻度 */
  --cz-link-line: rgba(255, 246, 232, 0.28);            /* about.js 链接下划线 */
  --ov-arrow-stroke: rgba(255, 246, 232, 0.42);         /* detail.css 概览风箭头 */
  --cz-select-arrow: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpolyline points='1,1 5,5 9,1' fill='none' stroke='%23aea89f' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");  /* settings-panel.js 下拉箭头(data URI 读不到变量,整条做成令牌) */
  --cz-icon-edge: none;                                 /* B 段:天气图标(白云 #f3f7fe)在浅色纸面上的发丝墨晕;深色不需要 */
  --cz-shadow-drawer: 0 -16px 44px rgba(0, 0, 0, 0.42); /* C 段:手机抽屉 .a-sheet 的上投影(mobile.css);深色 = --cz-shadow-sheet 原值 */
  --cz-rest-edge: transparent;                          /* fix1(设计评审 L-m1):静息态三块实底的框线;深色退成透明(实底溶进墨池),浅色见下 */

  color-scheme: dark;
}

/* ══ 浅色「暖纸 Warm Paper」(JUDGE-v7-R3 §2.2 = SPEC-v7-R3-light-A §1.2):暖纸舞台 + 墨字 + 氧化铜;球外是球的墨色接触影 ══
   html[data-theme] 由 index.html 的内联脚本(首屏)与 ui/theme.js(之后)写;特异度 (0,2,0) 压过 :root。
   只覆盖颜色 / 阴影类令牌:几何、字体、动效、层级(--z-*)不在这里;--cz-pw-ring 与 --cz-pin-* 压在地图上、两主题同值,也不在这里。 */
:root[data-theme="light"] {
  color-scheme: light;

  /* ── 空间(球外):暖纸 → 四角稍深的暖纱(layout.css #map 四圈渐变的结构不变,色标 44 / 54 / 68 vmin) ── */
  --bg: #efe8dc;                      /* = map/limb-layer.js LIMB_THEMES.light.space [239,232,220];首访球缘外紧邻处的颜色 */
  --cz-space-mid: #e8e0d2;
  --cz-space-deep: #e0d6c6;
  --cz-space-corner: #d8cdbb;         /* 四角与 body 底 */
  --cz-space-glow: transparent;       /* 纸是哑光的:不打顶光 */

  /* ── 表面:纸页,一律实底(评审 M1) ── */
  --bg-elev: #f8f3eb;
  --panel: #f8f3eb;
  --panel-solid: #f8f3eb;
  --cz-surface: #f8f3eb;
  --cz-surface-2: #efe8dd;
  --cz-surface-3: #e4dbcd;
  --cz-plate: #f8f3eb;
  --cz-pill: #f8f3eb;
  --panel-hover: rgba(42, 37, 32, 0.06);
  --panel-active: rgba(42, 37, 32, 0.10);
  --border: rgba(42, 37, 32, 0.10);
  --border-strong: rgba(42, 37, 32, 0.18);
  --border-hot: rgba(42, 37, 32, 0.34);
  --cz-hair: rgba(42, 37, 32, 0.14);
  --cz-scrim: rgba(42, 37, 32, 0.32);
  --cz-inset-hi: rgba(255, 255, 255, 0.65);
  --cz-on-map-shadow: none;

  /* ── 文字:墨色三阶 ── */
  --text: #2a2520;                    /* 对 --cz-surface 13.74 : 1 */
  --text-dim: #5c544b;                /* 6.73 : 1 */
  --text-faint: #8a8177;              /* 只许装饰 / 禁用态,3.46 : 1 */
  --text-invert: #f8f3eb;

  /* ── 唯一强调色:氧化铜(色相 21.9°、HSL 饱和 60 %,在评审 M3 的 15–25° / ≤ 70 % 内) ── */
  --accent: #8f4b24;                  /* 纸上 5.94 : 1 */
  --accent-strong: #74391a;           /* hover(8.11 : 1) */
  --accent-soft: rgba(143, 75, 36, 0.14);
  --accent-wash: rgba(143, 75, 36, 0.10);
  --ok: #2f7a4a;      /* 4.75 */
  --warn: #8a6410;    /* 4.86 */
  --danger: #b5392c;  /* 5.30 */
  --warn-soft: rgba(138, 100, 16, 0.14);
  --warn-line: rgba(138, 100, 16, 0.45);

  /* ── 罗盘环:墨的低 α(1× 屏上环圆比纸深 79 级;最细刻度 28 级) ── */
  --cz-ring: rgba(42, 37, 32, 0.40);
  --cz-tick-minor: rgba(42, 37, 32, 0.14);
  --cz-tick-mid: rgba(42, 37, 32, 0.20);
  --cz-tick-major: rgba(42, 37, 32, 0.34);
  --cz-tick-card: rgba(42, 37, 32, 0.44);
  --cz-ring-hot: rgba(42, 37, 32, 0.56);
  --cz-tick-minor-hot: rgba(42, 37, 32, 0.28);
  --cz-tick-mid-hot: rgba(42, 37, 32, 0.36);
  --cz-tick-major-hot: rgba(42, 37, 32, 0.52);
  --cz-tick-card-hot: rgba(42, 37, 32, 0.62);
  --cz-dial-ring: rgba(42, 37, 32, 0.32);
  --cz-dial-tick: rgba(42, 37, 32, 0.46);

  /* ── 阴影:墨的淡影;内高光改白 ── */
  --shadow: 0 12px 32px rgba(58, 51, 44, 0.16);
  --shadow-sm: 0 2px 8px rgba(58, 51, 44, 0.12);
  --cz-shadow-plate: 0 10px 28px rgba(58, 51, 44, 0.12), inset 0 1px 0 rgba(255, 255, 255, 0.70);
  --cz-shadow-sheet: 0 -16px 44px rgba(58, 51, 44, 0.16);
  /* 手机抽屉的上投影收窄(C 段):half 档法定署名抬在抽屉上沿之上 18 px,正落在 -16 / 44 的影子里,纸面药丸被压暗约 8 级
     (署名 6.14 : 1,判官目标 6.5);改成 -4 / 14:影子边缘在抽屉上沿之上 4 px,再往外 14 px(= 署名下沿)只剩约 0.3 %;抽屉轮廓仍由发丝顶边承担 */
  --cz-shadow-drawer: 0 -4px 14px rgba(58, 51, 44, 0.12);
  --cz-rest-edge: rgba(42, 37, 32, 0.10);   /* = 浅色 --border。fix1(设计评审 L-m1):纸色铭牌比舞台亮一档(1.22 : 1),退了框线和影子像一张贴纸 —— 浅色静息态保留发丝框、只退影子 */

  /* ── 小件 ── */
  --cz-switch-track: rgba(42, 37, 32, 0.18);
  --cz-checker-a: rgba(42, 37, 32, 0.05);
  --cz-checker-b: rgba(42, 37, 32, 0.09);
  --cz-bar-ring: rgba(42, 37, 32, 0.22);
  --cz-cursor-ring: rgba(248, 243, 235, 0.90);  /* 游标线是墨(--text),外圈改纸色才与色条分开 */
  --cz-swatch-ring: rgba(42, 37, 32, 0.25);
  --cz-rule-day: rgba(42, 37, 32, 0.26);
  --cz-track-fill: rgba(42, 37, 32, 0.38);
  --cz-tick-faint: rgba(42, 37, 32, 0.12);
  --cz-link-line: rgba(42, 37, 32, 0.30);
  --ov-arrow-stroke: rgba(42, 37, 32, 0.40);
  --cz-select-arrow: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpolyline points='1,1 5,5 9,1' fill='none' stroke='%235c544b' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  --cz-icon-edge: drop-shadow(0 0 0.5px rgb(42, 37, 32)) drop-shadow(0 0 0.5px rgb(42, 37, 32)) drop-shadow(0 0 0.5px rgb(42, 37, 32));   /* 白云图标在纸上 1.05 : 1,勾一圈墨发丝才看得见;第三轮 fix1(QA-视觉 M1):原单层 0.6 px α .55 实测 p95 只有 1.49–1.80,改三层 0.5 px 实墨叠成一圈发丝(p95 ≥ 3) */
}
/* 主题切换的那两帧不做颜色过渡(JUDGE §2.5;ui/theme.js 的 mountTheme 加 / 摘这个类):否则 120 ms 的 background / color
   过渡让一部分控件滑过去、一部分瞬变,录屏里能看到几帧"半深半浅" */
html.cz-theme-swap *, html.cz-theme-swap *::before, html.cz-theme-swap *::after { transition: none !important; }

/* 超宽屏(≥ 2200,如 2560×1440):铭牌与大字的上限放开一档(fix1 设计评审 m14:原来铭牌封顶 352、模式胶囊 12 px,
   在 2560 宽上显得小)。只在超宽屏生效,1440 / 1920 的 E1 不变 */
@media (min-width: 2200px) {
  :root {
    --cz-plate-w: clamp(272px, 16vw, 400px);
    --cz-fs-display: clamp(36px, 2.5vw, 64px);
    --cz-fs-clock: clamp(24px, 1.5vw, 38px);
  }
}

/* 中文不做 small-caps / 大写 / 宽字距(LESSONS D1 / D2:Chromium 会把汉字也"合成小型大写",缩到约 2/3) */
html:lang(zh) * { font-variant-caps: normal; }

/* 两种"减少动效"都把时长令牌归零(系统偏好 + 设置里的开关) */
@media (prefers-reduced-motion: reduce) {
  :root {
    --cz-dur-1: 0ms;
    --cz-dur-2: 0ms;
    --cz-dur-3: 0ms;
    --cz-dur-rest: 0ms;
  }
}

body[data-reduce-motion="1"] {
  --cz-dur-1: 0ms;
  --cz-dur-2: 0ms;
  --cz-dur-3: 0ms;
  --cz-dur-rest: 0ms;
}

/* ─────────────────────────── reset ─────────────────────────── */

*,
*::before,
*::after { box-sizing: border-box; }

html,
body {
  margin: 0;
  padding: 0;
  height: 100%;
  overflow: hidden;                 /* 整页不滚动:面板内部各自滚 */
  overscroll-behavior: none;        /* 移动端下拉不触发浏览器刷新 */
}

body {
  background: var(--bg);
  color: var(--text);
  font: var(--fs) / 1.45 var(--font);
  -webkit-text-size-adjust: 100%;
  -webkit-tap-highlight-color: transparent;
  text-rendering: optimizeLegibility;
}

h1, h2, h3, h4, p, figure, blockquote, dl, dd { margin: 0; }
ul, ol { margin: 0; padding: 0; list-style: none; }

img, svg, canvas { display: block; max-width: 100%; }

button, input, select, textarea {
  font: inherit;
  color: inherit;
  margin: 0;
}

button {
  background: none;
  border: 0;
  padding: 0;
  cursor: pointer;
  color: inherit;
}

a { color: var(--accent); text-decoration: none; }
a:hover { color: var(--accent-strong); text-decoration: underline; }

/* ─────────────────────────── 焦点与无障碍 ─────────────────────────── */

:focus { outline: none; }

/* v7:焦点环不改元素圆角 —— 圆形控件(播放、地球工具、环上的"北")的焦点环跟着自身形状走 */
:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

/* 会变的数字一律等宽(时刻、刻度、元信息在播放 / 拖动时不跳宽) */
body { font-variant-numeric: tabular-nums; }

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* ─────────────────────────── 滚动条 ─────────────────────────── */

* {
  scrollbar-width: thin;
  scrollbar-color: var(--border-strong) transparent;
}

*::-webkit-scrollbar { width: 8px; height: 8px; }
*::-webkit-scrollbar-track { background: transparent; }
*::-webkit-scrollbar-thumb {
  background: var(--border-strong);
  border-radius: 4px;
}
*::-webkit-scrollbar-thumb:hover { background: var(--border-hot); }

/* ─────────────────────────── 共用原语 ─────────────────────────── */

/* 浮层容器:图层菜单、模式条、图例、设置、关于都用它当底 */
.a-panel {
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  backdrop-filter: var(--blur);
  -webkit-backdrop-filter: var(--blur);
  color: var(--text);
}

/* 通用按钮:图标按钮与文字按钮共用。v7:圆角矩形(正圆只给"方位 / 时间");按下态只抬一级表面
   (--cz-surface-3)、文字转 --text —— 强调色不铺底,只出现在"当前值"的小标记上(短线、圆点、手柄)。 */
.a-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--gap-sm);
  min-height: 32px;
  padding: 6px 10px;
  border-radius: var(--radius-sm);
  color: var(--text-dim);
  background: transparent;
  transition: background var(--dur) var(--ease), color var(--dur) var(--ease);
}

.a-btn:hover { background: var(--panel-hover); color: var(--text); }
.a-btn:active { background: var(--panel-active); }
.a-btn[aria-pressed="true"],
.a-btn[aria-checked="true"],
.a-btn.is-active {
  background: var(--cz-surface-3);
  color: var(--text);
}
.a-btn[disabled],
.a-btn[aria-disabled="true"] {
  color: var(--text-faint);
  cursor: default;
  pointer-events: none;
}

/* 触控档:手机上所有可点控件放大到 44 px(§11.4) */
.a-btn-tap {
  min-width: var(--tap);
  min-height: var(--tap);
}

.a-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 3px 8px;
  border-radius: 999px;
  border: 1px solid var(--border);
  font-size: var(--fs-sm);
  color: var(--text-dim);
  white-space: nowrap;
}

.a-icon {
  width: 20px;
  height: 20px;
  flex: none;
  stroke: currentColor;
  fill: none;
}

/* 图例/标注这类叠在地图上的文字:描边保证对比度(§11.4) */
.a-on-map {
  text-shadow: var(--cz-on-map-shadow);
}

.a-num { font-variant-numeric: tabular-nums; }

/* ─────────────────────────── 署名行(§13) ─────────────────────────── */

/* v7:右下署名沟里一枚常驻实底药丸(评审 M1:--cz-pill 实色)—— 压在任何彩色地图 / sheet 上 --text-dim 都是 7.7 : 1;
   z 4 压在一切 sheet 之上(layout.css),静息态不作用于它(LESSONS C2:不按状态加底,常驻)。
   电力三段 inline-block:换行只落在段与段之间(LESSONS C3)。 */
#attribution-link {
  display: inline-block;
  padding: 3px 10px;
  border-radius: var(--radius-sm);
  background: var(--cz-pill);
  box-shadow: inset 0 0 0 1px var(--border);
  color: var(--text-dim);
  font-size: var(--fs-xs);
  line-height: 1.5;
  white-space: nowrap;
  transition: color var(--dur) var(--ease), background var(--dur) var(--ease);
}

#attribution-link [data-power-attrib]:not([hidden]) { display: inline-block; white-space: pre; }

#attribution-link:hover {
  color: var(--text);
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-color: var(--border-strong);
}

/* 手机宽度允许署名换行(r8 终审 M2):打开电力设施层后按钮里会追加 OpenStreetMap / GEM / DeepOWT 三段法定署名,
   nowrap 会把原有的 Open-Meteo · ECMWF · Natural Earth 挤出屏幕左缘(390 px 实拍)。换行而不是缩写 ——
   OSMF 署名指南要求写出 "OpenStreetMap";每段电力署名自身不断开,只在段与段之间折行。 */
@media (max-width: 599px) {
  #attribution-link {
    max-width: calc(100vw - 2 * var(--gap, 8px));
    white-space: normal;
    text-align: right;
  }

  #attribution-link [data-power-attrib] { white-space: nowrap; }
}

/* ─────────────────────────── MapLibre 默认件的收敛 ─────────────────────────── */

.maplibregl-map { font: inherit; }

/* 自带的 attribution / logo 不用:署名由 #attribution 与"关于"页承担(§13) */
.maplibregl-ctrl-attrib,
.maplibregl-ctrl-logo { display: none !important; }

.maplibregl-canvas:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }

/* ─────────────────────────── noscript ─────────────────────────── */

.noscript-note {
  position: fixed;
  inset: auto 0 0 0;
  z-index: var(--z-toast);
  padding: 14px;
  text-align: center;
  background: var(--panel-solid);
  border-top: 1px solid var(--border);
}

/* 中英两行(noscript 里 i18n 跑不起来):去掉 <p> 的默认外边距,行距自己给 */
.noscript-note p {
  margin: 0;
}

.noscript-note p + p {
  margin-top: 6px;
  color: var(--text-dim);
}

/* ─────────────────────────── 减少动效(§11.4) ─────────────────────────── */

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}