City-Lifeline-Cockpit/src/modules/cockpit/styles/tokens.css

/**
 * 驾驶舱视觉 token —— 唯一来源。
 *
 * 主色、语义色、文字色、字体、字号、间距、层级都只在这里声明一份：设计公司交付正式视觉资源后
 * 改本文件即可全驾驶舱生效（票 06 的「视觉资源可替换」就落在这里）。
 * 例外：组件里各自的装饰性渐变/辉光（散落的 rgba，如面板切角高光、扫描线）不属主题色，
 * 换肤时需个别替换——它们不影响信息架构，也不构成第二份主题定义。
 *
 * 为什么挂 `.cockpit-shell` 而不是 `:root`：
 * 下面这些名字（--cyan / --text / --font / --muted 等）都很通用，挂到 :root 会顺着
 * 全局样式漏进宿主应用与 src/plugins 里的插件样式；挂在外壳根元素上，靠 CSS 自定义
 * 属性的继承只作用于驾驶舱子树，既集中又好收敛。
 *
 * 批次 2（票 15，2026-10-12）：色值与设计基准按蓝湖 2026-10-12 版（v3/v4）主画板
 * Desktop-6「总体概览」与全稿色板替换；事实基线见
 * .scratch/lanhu-cockpit-asset-replacement/research/15-batch2-token-baseline.md。
 */

.cockpit-shell {
    /* 设计像素 --u：**按视口高度**缩放，不按宽度（维护者 2026-10-23）。
       原先写 `0.0694vw`（1440 宽基准）：屏幕一拉宽，字号、顶栏、间距全部同比放大 ——
       超宽屏上"文字和顶部菜单缩放太多"，而驾驶舱的**信息密度是由高度承载的**，
       多出来的宽度应该用来**多放内容/留白**，不该把同一屏内容整体吹大。
       改为 0.1235vh：1080 高时 1.333（与改动前 1920×1080 完全一致，16:9 屏观感不变），
       1440 高时 1.778，封顶 2px（2160 高即 4K），下限 1px 保住 1280×720 的可读性承诺。
       效果：3840×1080 / 3440×1440 这类"只加宽不加高"的屏上，元素**不再放大**；
       元素大小由占比（高度份额）决定，而不是被宽度推着长。 */
    --u: clamp(1px, 0.1235vh, 2px);

    /* ---- 底色与面板 ----
       设计稿（9/9 画板一致）：页面底 #010514；面板 = #02091b@0.28 底 + 蓝色九停渐变
       （取首停 #00359c@0.34 为 mid、末停 #000f34@0.38 为 bot）；内嵌容器 #001f5c@0.50；
       面板边框 #01abea@0.35（唯一一套，45 个 Panel 节点无一例外）。
       维护者反馈地图透底影响读数：运行时不透明度改为 .88/.82/.90，中段加深至 #001c46；
       CockpitPanel 叠加 12px 磨砂模糊，属于已确认可读性偏差。
       2026-10-22 维护者要求稍微调透（有磨砂兜底）：三档各降 0.08 → .80/.74/.82；
       同日再调：--panel-mid → 0.6、再 → 0.5（渐变中段对透出地图的观感影响最明显）；
       磨砂模糊同步增强 12px → 16px（CockpitPanel）。
       2026-10-23 维护者要求**颜色渐变**（色相可感知，不只是透明度）：
       先是「亮蓝（顶）→ 中蓝 → 深邃近黑蓝（底）」，同日反转并调透：
       **深邃近黑蓝（顶）→ 半透中蓝 → 亮科技蓝（底）**，亮蓝沉底收边；
       --panel-mid 继续调低 0.5 → 0.4。
       同日再收：**取消面板背景的颜色渐变**（三停色相归一 #001c46，只保留透明度节奏
       .82/.4/.8）；颜色渐变转移到**数据统计指标卡片**（--stat-card-bg，KPI 卡消费）。 */
    --bg-0: #010514;
    /* 票 18（批次 5）：第二底色（设计稿面板顶 #02091b 的基色）——页面氛围底的中停与
       地图画布占位底共用一份；此前 CockpitShell 氛围底渐变与 MapCanvas 底各写一份裸值。 */
    --bg-1: #02091b;
    --panel-top: rgba(0, 28, 70, 0.82);
    --panel-mid: rgba(0, 28, 70, 0.4);
    --panel-bot: rgba(0, 28, 70, 0.8);
    /* 数据统计指标卡片（.panel-kpi 等）的颜色渐变：深蓝（顶）→ 亮科技蓝（底），
       与面板底色同族但色相可感知；卡片更小，alpha 比面板淡（不喧宾夺主）。
       2026-10-23 维护者：反向试一试（原为亮蓝→深蓝）。 */
    --stat-card-bg: linear-gradient(180deg, rgba(0, 28, 70, 0.6) 0%, rgba(0, 82, 155, 0.45) 100%);
    --panel-line: rgba(1, 171, 234, 0.35);
    --panel-line-hi: #01abea;
    --inset: rgba(0, 31, 92, 0.5);

    /* ---- 主色 ----
       设计稿强调主色 #01abea（281 处：面板表头/边框/交互强调）；
       #00b8ff（59 处）语义不同——一级模式/行业 chip 的选中与部分标题，单列 --cyan-hi。
       深档 --cyan-d 取全稿 #009de9。 */
    --cyan: #01abea;
    --cyan-hi: #00b8ff;
    --cyan-d: #009de9;

    /* ---- 语义色：事件四级与点位状态共用一套调色板（ADR 0006 / 0008）----
       色键只说优先级与深浅，不说业务：同一个 --lv1 在事件里是「1 级」、在点位状态里是「报警」。
       两套标签词与形状见 domain/statusTones.js（事件）与 domain/pointStatus.js（点位状态）。
       色值取设计稿状态词实测：报警 #ff3b52 / 预警·处置中 #ffb020 / 进行中·待接单 #01abea /
       正常·在线 #27d17a / 离线·无数据 #5680b0。 */
    --lv1: #ff3b52;
    --lv2: #ffb020;
    --lv3: #01abea;
    --lv4: #27d17a;
    --neutral: #5680b0;
    /* 维护者 2026-11-13：预警「已处置」用紫色高亮（四档语义色里没有紫色位）。
       只服务设备详情事件列表的状态徽标，不并入 lv1–lv4 的优先级语义。 */
    --status-handled: #a970ff;
    /* 点位状态统计：连接中断、无设备、未知状态、关联缺失各用独立颜色。
       票 45（维护者裁定）：「无关联设备」是**附加状态**，色键改**绿色系黄绿**（与正常在线同族、
       与 lv4 正绿区分），且只在设备没有业务异常时替代正常态；业务异常按业务状态色显示。 */
    --point-offline: #94a3b8;
    --point-empty: #c4d5e8;
    --point-unknown: #a970ff;
    --point-unassociated: #a3e635;

    /* ---- 行业语义色（2026-10-13 维护者要求：UI 与统计图表用行业色区分类别）----
       色值取自批次 1 入库的四枚行业切图主色（probe-industry-colors.mjs 实测）：
       燃气=火焰红 / 供水=水滴青 / 排水=雨滴绿 / 窨井=井盖紫。
       消费点：条形图行业行、环形图行业扇区（PanelBlocks 的 toneColor 映射）。 */
    --industry-gas: #fe3b53;
    --industry-water: #01abea;
    --industry-drainage: #27d17a;
    --industry-manhole: #a970ff;

    /* ---- 统计图表分类色（2026-10-13：堆叠条/环形图/条形图的非语义类别用）----
       维护者反馈「单色系分类分不清类别」+「工单状态要更明显的颜色区分」：给无业务语义
       的类别一组可辨分类色（按维护者要求调整；不声称全部为蓝湖实测值）。
       工单八态逐态落不同色相（见 panelBlocks.barTone）：流程五态用蓝/橙/青/紫/青绿，
       终态走业务语义色（已结案=绿、延期中=黄、已取消=红）——语义正确且彼此可辨。
       消费点：stacked 分段/图例、donut 扇区/图例、bars 行（PanelBlocks toneColor 映射）。 */
    --chart-c1: #1780ff;
    --chart-c2: #ff8a48;
    --chart-c3: #00b8ff;
    --chart-c4: #a970ff;
    --chart-c5: #00ceea;
    --chart-c6: #27d17a;
    --chart-c7: #ffb020;
    --chart-c8: #5680b0;

    /* ---- 文字 ----
       设计稿四级文字：标题/重点 #d7ecff（17px 面板标题、14px 条目）、正文 #88b7e8（12px）、
       辅助 #5680b0（10px 时间戳/标注）、强调 #ffffff（KPI 数值/选中态）。
       --text-strong 为本批新增（消费点：KPI 数值、选中态文字）。 */
    --text: #d7ecff;
    --text-2: #88b7e8;
    --text-strong: #ffffff;
    --muted: #5680b0;

    /* ---- 字体 ----
       槽位名与语义由票 03 锁定；票 17（批次 4）只把白名单 Web 字体插到**系统回退链之前**，
       回退链原样保留在后面 —— 子集外汉字（动态数据里的设备名/点位名/事件文本）落到系统字体。
       Web 字体由 domain/fontFaces.js 按授权门禁注入 @font-face（规格 11）：门禁不通过时
       不存在对应 @font-face，浏览器解析不到该字族，自然继续往后落到系统栈，故本取值无需改动。 */
    --font: "Noto Sans SC Subset", "Microsoft YaHei UI", "Microsoft YaHei", "PingFang SC", "Noto Sans SC", sans-serif;
    --num: "Rajdhani Subset", "Share Tech Mono Subset", "Bahnschrift SemiBold", "Bahnschrift", "DIN Alternate", "Segoe UI Semibold", var(--font);
    /* 顶栏系统栈（票 17 第四轮：筛选条/状态 chip 等小字用系统黑体——子集 Noto 在小字号+辉光上发虚）。
       票 17 第七轮：--font-title 槽已撤销——设计稿（D2 nav 取证）菜单文字为 PingFang 常规体
       （Apple 系统字体，按规格 11 走系统回退栈、不打包），选中态靠 nav/title-bg 切图底板 + 白色字，
       无界黑失去全部消费点，槽位与 @font-face 一并移除（证据仍在归档，可随时恢复）。 */
    --font-topbar: "Microsoft YaHei UI", "Microsoft YaHei", "PingFang SC", "Noto Sans SC", sans-serif;

    /* ---- 字号 ----
       2026-10-12 批次 1：维护者走查反馈「文字偏小、看不清」，整体上调 1px——该可读性结论
       是真机走查得出的，本批沿用为基准（不按设计稿 10–12px 回退，登记为可读性偏差）。
       --fs-kpi 为本批新增：面板 KPI 数值（设计稿 20px Rajdhani；消费点 PanelBlocks
       .panel-kpi__value）。设计稿另有大号指标 25px（主画板顶部状态区），现有面板结构无对应
       消费点，按规格 03「无消费点不提交」暂不设槽位（票 15 已登记）。 */
    /* 指标类型名称（KPI label / 卡片名）—— 维护者 2026-10-23「保持现状」，不要动这一档。 */
    --fs-caption: calc(11.5 * var(--u));
    --fs-body: calc(14 * var(--u));
    --fs-title: calc(15.5 * var(--u));
    --fs-heading: calc(18 * var(--u));
    /* 指标数值是页面上**最大**的一类字（维护者 2026-10-23 第 1 条），但必须装得进格子 ——
       2026-10-26 浏览器走查实测：在线率「27.3%」是 5 个字符，26u 时超出所在格子约 14px。
       取 22u：仍明显大于块标题(18u)与名称(11.5u)，且 5 字符在分格内放得下。 */
    --fs-kpi: calc(22 * var(--u));
    /* 补充说明（口径小字、块右上角小字、卡片备注、面板底部说明）——
       维护者 2026-10-23 第 3 条「字体大小缩小」，独立一档，不再和类型名称同号。
       9.2u ≈ 名称的 0.8 倍：还在可读范围内，但明显退到第三层级。 */
    --fs-note: calc(9.2 * var(--u));

    /* ---- 间距 ----
       设计稿兄弟垂直间距众数 8u（×26），次众数 5/12/15；现有三档语义保留。 */
    --space-1: calc(4 * var(--u));
    --space-2: calc(8 * var(--u));
    --space-3: calc(12 * var(--u));

    /* ---- 布局尺寸 ---- */
    /* 左右两栏的宽度（票 10 起两级详情浮层要贴着它让位，所以从组件样式提到这里只留一份）。
       设计稿左右栏宽 347；2026-10-13 维护者反馈两侧面板稍宽、挤压中央一张图，收窄 5%（347→330）。

       **2026-10-23 修：上限改成与 --u 同比**（维护者反馈「宽屏下面板太窄导致内容变形」）。
       原先是 `clamp(280px, 330u, 460px)` —— 上限是**死数 460px**，而 --u 会随视口放大到 2，
       于是大屏上"设计像素宽度"被压到 460/2 = 230u（设计稿是 330u），面板相对缩水 30%，
       卡内文字却按 --u 放大 —— 一边放大一边挤，就是"内容变形"的观感。
       现在上限取 `330u × 1.4 = 462u`（与下限同一坐标系、随 u 走），只是把原来的像素上限
       换算成了设计像素上限，**比例在各分辨率下恒定**。
       另加"不超过视口 22%"的护栏：极宽屏（32:9）上两栏各取 330u 会挤掉中央一张图。 */
    --column-w: clamp(280px, calc(330 * var(--u)), min(calc(462 * var(--u)), 22vw));

    /* 让位宽度（票 11 三轮）：中央浮层/事件详情要避开"两侧面板占掉多少"。
       正常（16:9）时就是一条栏宽；超宽屏（>= 3:1）时栏内两块并排，栏变成两条栏宽。
       消费点用这一条而不是直接乘 --column-w —— 否则宽屏下浮层会压在面板上。 */
    --rail-w: var(--column-w);

    /* 票 48：一张图**底部读数带**的高度（管线颜色图例贴带底，与两侧栏面板底边并排对齐）。
       这条带上的东西不止一个：图例占 `bottom: 0`，定位反馈浮层（票 38）必须起算在这条带**之上**，
       否则图例贴底后就压住浮层。两边共吃这一个数——写两个魔法数是「两处真相」的老毛病。 */
    --map-bottom-band: calc(26 * var(--u));

    /* ---- 层级 ---- */
    --z-map: 0;
    --z-columns: 2;
    --z-overlay: 2;

    /* ---- 阴影 ----
       设计稿主阴影 #00071a@0.18 blur28 y12（46 处）；维持现有模糊结构、取设计色。 */
    --shadow: 0 18px 44px rgba(0, 7, 26, 0.55);

    /* ---- 滚动条 ----
       2026-10-13 维护者反馈：默认滚动条与 UI 格格不入。统一细滚动条：
       轨道透明（面板底自透）、滑块用面板线色、hover 提亮为主色。
       只允许竖向滚动；横向由各容器的 minmax(0,1fr) 网格 + overflow-wrap 保证不裁内容。 */
    --scrollbar-size: calc(6 * var(--u));
    --scrollbar-thumb: rgba(1, 171, 234, 0.35);
    --scrollbar-thumb-hover: rgba(1, 171, 234, 0.7);
}

/* 驾驶舱子树内的滚动条统一视觉（细、深色系、无默认灰白块）。
   写在 .cockpit-shell 下靠继承作用域，不漏进宿主应用。 */
.cockpit-shell * {
    scrollbar-width: thin;
    scrollbar-color: var(--scrollbar-thumb) transparent;
}

.cockpit-shell *::-webkit-scrollbar {
    width: var(--scrollbar-size);
    height: 0; /* 横向滚动条严格不出现（高度 0 隐藏；容器本身 overflow-x 不产生横向滚动） */
}

.cockpit-shell *::-webkit-scrollbar-track {
    background: transparent;
}

.cockpit-shell *::-webkit-scrollbar-thumb {
    background: var(--scrollbar-thumb);
}

.cockpit-shell *::-webkit-scrollbar-thumb:hover {
    background: var(--scrollbar-thumb-hover);
}

.cockpit-shell *::-webkit-scrollbar-corner {
    background: transparent;
}