/* theme-apple-overlay.css — Apple 皮肤「选择器覆盖层」（M183）
   ═══════════════════════════════════════════════════════════════════════════
   分层约定：lims2.css（基座）→ assets/theme-apple.css（M179 变量别名层）→
   本文件（M183 选择器覆盖层）。M179 只能改变量，lims2.css 里写死的字面量够不着；
   本文件用「[data-theme="apple"] 前缀提高特异性」逐条压过那些字面量——
   每条规则都带 [data-theme="apple"]（或下方两处显式豁免的惰性门），不写
   data-theme="apple" 时逐条零命中，页面与现网逐像素一致（CSSOM 可审计）。

   覆盖清单（字面量 → lims2.css 行号 → 本文件的 Apple 值）：
   ┌────────────────────┬──────────────┬──────────────────────────────┐
   │ 按钮 6px 圆角      │ lims2.css:99 │ 胶囊 999px（:111 small 5px 同收）│
   │ .panel 8px         │ lims2.css:88 │ 12px + 发丝线 + 浅投影        │
   │ .modal 9px         │ lims2.css:267│ 16px sheet + 大标题           │
   │ 表头底色 #f8fafb   │ lims2.css:116│ 纯白（保持不透明，粘性表头安全）│
   │ kv 五件套          │ lims2.css:541-543 │ 柔和值框（标签在外，见 ⑥）  │
   │ topbar 半透明白    │ lims2.css:65 │ 纯白 + 发丝线                 │
   │ .status.neutral    │ lims2.css:186│ #f2f2f7（iOS systemGray6）    │
   │ 禁用态 #f4f6f9     │ lims2.css:368/411 │ #f5f5f7 + 三阶灰字       │
   │ toast #1f2937      │ lims2.css:546│ 白底卡片 + 发丝线 + 大阴影    │
   │ 筛选行底色 #f8fafb │ lims2.css:442│ #f5f5f7，控件 8px 内圆角对齐  │
   └────────────────────┴──────────────┴──────────────────────────────┘

   显式豁免（两处，均「不启动就没任何效果」，审计时单独对账）：
   · html[data-theme-anim] — 切换动效的瞬时门，apple-preview 的 JS 只在切换的
     几百毫秒里挂上、结束即摘；平时任何页面都不会有这个属性，逐条零命中。
   · ::view-transition-* — View Transitions 伪元素树，只有 JS 显式调用
     document.startViewTransition() 才会存在；全站只有预览页调用它。

   不得改的文件（本卡约束）：lims2.css / form-kit.js / theme-apple.css（层一）/
   sidebar.js（M181）。侧栏浅色化与彩色图标全部来自 M181 的
   assets/nav-icons/nav-icons.css，本文件不写任何 .sidebar 规则。 */

/* ── ① 全局字距与字形 ────────────────────────────────────────────────────
   Apple 字阶的识别度一半在负字距（大标题收紧）。Windows 无 PingFang 时仍落到
   Noto Sans SC，只在 Mac/装了苹方的机器上真正换字形，安全。 */
[data-theme="apple"] body{-webkit-font-smoothing:antialiased;font-family:-apple-system,BlinkMacSystemFont,"PingFang SC","Noto Sans SC","Microsoft YaHei",system-ui,sans-serif}
[data-theme="apple"] .page-head h1{letter-spacing:-.02em}

/* ── ② 按钮胶囊化（覆盖 lims2.css:99 的 border-radius:6px、:111 的 5px）────
   主/次/危险/幽灵/小型全部经 .button 着色，一条 999px 全收；close-button
   （lims2.css:273 的 5px）转正圆，对齐 macOS 关闭钮。 */
[data-theme="apple"] .button{border-radius:999px}
[data-theme="apple"] .close-button{border-radius:50%}

/* ── ③ 面板 / 卡片：12px 白底 + 发丝线 + 一层若隐若现的投影 ────────────────
   覆盖 lims2.css:88 的 border-radius:8px。#f5f5f7 画布上白卡不描重边，
   发丝线 + 4% 投影给「浮在桌面上」的一点点厚度。 */
[data-theme="apple"] .panel{border-radius:12px;border-color:#e5e5ea;box-shadow:0 1px 3px rgba(0,0,0,.04)}
[data-theme="apple"] .card{border-radius:12px}
[data-theme="apple"] .login-card{border-radius:14px}
[data-theme="apple"] .inline-note{border-radius:10px}

/* ── ④ 表格：去框线，只留行间发丝线；表头转小号标签 ────────────────────────
   覆盖 lims2.css:116（th 底色 #f8fafb、border-block 上下双线）。
   · 底色必须保持**不透明**：粘性表头靠 th 自己的实底挡住滚过的行
     （lims2.css:123 起的注释），这里换 #fff 而不是 transparent。
   · border-block-start-width:0 摘掉表头上沿那条线，只留与首行之间的发丝线。
   · 小号 + 疏字距 + 600：Apple 的「栏目签名」写法；CJK 不受 uppercase 影响，
     西文自动转大写。
   · 筛选行（lims2.css:442 的 #f8fafb）转 #f5f5f7：iOS「灰底上放白控件」的
     分组底，与控件 8px 内圆角同一套几何（见 ⑧）。 */
[data-theme="apple"] th{background:#fff;color:var(--muted);font-size:10px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;border-block-start-width:0;border-block-end-color:#e5e5ea}
[data-theme="apple"] td{border-bottom-color:#e5e5ea}
[data-theme="apple"] .filter-head-row>td{background:#f5f5f7}

/* ── ⑤ 状态胶囊（覆盖 lims2.css:186 的 #f0f2f5）────────────────────────────
   基座已是 999px 胶囊，这里只补中性档的 iOS 灰与一点内距，其余四档色
   已由 M179 变量层自动跟随。 */
[data-theme="apple"] .status{padding:3px 9px}
[data-theme="apple"] .status.neutral{background:#f2f2f7;color:#6e6e73}

/* ── ⑥ 只读详情 kv：柔和值框（覆盖 lims2.css:541-543 的字面量；2026-10 拍板定稿）──
   形态抄自 references/apple-preview/index.html 的 .kvc 定稿（M184 自审计抽查的
   柔和值框）：标签裸排在值框**外**，值框 = 柔和浅灰填充 #f5f5f7 + 细深灰边框
   1px #a1a1a6 + 10px 圆角 + 7px 12px 内距 + 14px/600——原「标签和值同块灰底」
   （M183 的 iOS 分组行）与更早的「灰底重边框小圆角」一并退役。
   结构契约：.kv 里 span = 标签、b = 值（报价页联系人/详情 KV、apple-preview
   的 kv 演示都是这一结构）；容器转透明后版面仍由 .kv-grid 的 grid 撑起，
   标签与值框的纵距 = span 的 margin-bottom 5px。
   五个被覆盖的字面量：底色 #f8fafb→(容器 none、值框 #f5f5f7)、内距 9px 11px→
   (容器 0、值框 7px 12px)、标签 10px→11px、值 13px→14px、值上距 3px→0
   （改由标签下距承担）；边框 1px var(--line)→1px #a1a1a6 挪到值框上。
   字号（R1 P2-2）：标签/值框用 :root[data-theme="apple"] 前缀抬高到 (0,4,1)，
   严格压过报价页 business.css M190 段的 html[data-font] .kv-grid .kv span/b
   (0,3,2)——那段是柔和定稿之前的旧 10/13px，不改它（非本卡 scope），靠特异性
   让报价页也显示定稿的 11/14px；同时接 --font-size-scale 倍率（未挂字体偏好
   层的页面 fallback 1，与字面量逐像素相等），八档字号随动。 */
[data-theme="apple"] .kv-grid{gap:12px}
[data-theme="apple"] .kv-grid .kv{background:none;border:0;border-radius:0;padding:0}
:root[data-theme="apple"] .kv-grid .kv span{margin:0 0 5px;color:var(--muted);font-size:calc(11px*var(--font-size-scale,1));letter-spacing:.02em}
:root[data-theme="apple"] .kv-grid .kv b{margin-top:0;font-size:calc(14px*var(--font-size-scale,1));font-weight:600;color:var(--text);line-height:1.45;word-break:normal;overflow-wrap:anywhere;background:#f5f5f7;border:1px solid #a1a1a6;border-radius:10px;padding:7px 12px}

/* ── ⑦ 弹窗 → sheet（覆盖 lims2.css:267 的 border-radius:9px、:271 的 18px）─
   大圆角 + 更柔的入场曲线；标题放大加粗收紧字距（iOS「大标题」栏）。
   遮罩从蓝黑 rgba(10,24,36,.46) 换成 Apple 中性黑 rgba(29,29,31,.4)
   （lims2.css:246）。头/脚发丝线随 --line 自动是 #e5e5ea，不必另写。 */
[data-theme="apple"] .modal{border-radius:16px;animation:modal-in .24s cubic-bezier(.22,1,.36,1)}
[data-theme="apple"] .modal-header h2{font-size:21px;font-weight:700;letter-spacing:-.01em}
[data-theme="apple"] .modal-backdrop{background:rgba(29,29,31,.4)}

/* ── ⑧ 控件内圆角 6px→8px（覆盖 lims2.css:361/399/438/527）────────────────
   输入类控件统一 8px（Apple 文本框的连续圆角观感），与 ④ 的筛选行灰底
   同一套几何；choices 引擎面板的内框圆角走 M179 暴露的
   --choices-border-radius 变量，这里从 6px 提到 8px 对齐。
   表头筛选行（M86）的 DOM 链是 INPUT < LABEL.fk-filter-field <
   TD < TR.filter-head-row，没有 .filter-row 祖先（r1 评审 p2-1），
   基座对这批输入/日期框连 6px 都没给（算出 0px 直角）——故显式补
   .filter-head-row 与 .fk-filter-field 两个变体；choices 克隆检索框
   不受影响（PARITY_STYLE 对它的 border-radius:0 特异度更高）。 */
[data-theme="apple"] .form-grid input,
[data-theme="apple"] .form-grid select,
[data-theme="apple"] .form-grid textarea,
[data-theme="apple"] select,
[data-theme="apple"] .filter-row input,
[data-theme="apple"] .filter-row select,
[data-theme="apple"] .filter-head-row input,
[data-theme="apple"] .filter-head-row select,
[data-theme="apple"] .fk-filter-field input,
[data-theme="apple"] .fk-filter-field select,
[data-theme="apple"] .formkit-picker .formkit-picker-search{border-radius:8px}
[data-theme="apple"]{--choices-border-radius:8px}

/* ── ⑨ 顶栏纯白 + 发丝线（覆盖 lims2.css:65 的 rgba(255,255,255,.96)）────── */
[data-theme="apple"] .topbar{background:#fff;border-bottom-color:#e5e5ea}

/* ── ⑩ 禁用态 Apple 灰（覆盖 lims2.css:368/411 的 #f4f6f9）──────────────── */
[data-theme="apple"] .form-grid input:disabled,
[data-theme="apple"] .form-grid select:disabled,
[data-theme="apple"] .form-grid textarea:disabled,
[data-theme="apple"] select:disabled{background-color:#f5f5f7;color:#a1a1a6}

/* ── ⑪ toast → 白底卡片（覆盖 lims2.css:546 的 #1f2937 与 7px 圆角）──────── */
[data-theme="apple"] .toast{background:#fff;color:#1d1d1f;border:1px solid #e5e5ea;border-radius:14px;box-shadow:0 12px 32px rgba(0,0,0,.14)}
[data-theme="apple"] .toast p{color:#1d1d1f}

/* ── ⑫ 形态过渡（切换的「非揭幕」部分）───────────────────────────────────
   主题切到 apple 的那一次样式重算里，形状属性带 260ms 补间：圆角长出来、
   灰底与发丝线淡入，不是整页瞬变。基座 .button 自带 transition:.15s ease，
   这里整条替换（色变节奏保持 .15s 档，形状给足 260ms）。
   lims2.css:596 的 prefers-reduced-motion 全局 *{transition:none!important}
   会把这里一并关掉，减少动效用户自动拿到瞬时切换。 */
[data-theme="apple"] .button{transition:border-radius .26s cubic-bezier(.22,1,.36,1),background-color .15s ease,border-color .15s ease,box-shadow .15s ease,color .15s ease}
[data-theme="apple"] .panel,
[data-theme="apple"] .modal,
[data-theme="apple"] .kv-grid .kv,
[data-theme="apple"] .kv-grid .kv b,
[data-theme="apple"] .status,
[data-theme="apple"] .toast,
[data-theme="apple"] .inline-note,
[data-theme="apple"] .login-card{transition:border-radius .26s cubic-bezier(.22,1,.36,1),background-color .22s ease,border-color .22s ease,box-shadow .22s ease}
[data-theme="apple"] th,
[data-theme="apple"] td{transition:background-color .22s ease,border-color .22s ease}
[data-theme="apple"] .form-grid input,
[data-theme="apple"] .form-grid select,
[data-theme="apple"] .form-grid textarea,
[data-theme="apple"] select,
[data-theme="apple"] .filter-row input,
[data-theme="apple"] .filter-row select,
[data-theme="apple"] .filter-head-row input,
[data-theme="apple"] .filter-head-row select,
[data-theme="apple"] .fk-filter-field input,
[data-theme="apple"] .fk-filter-field select{transition:border-radius .26s cubic-bezier(.22,1,.36,1),background-color .22s ease,border-color .22s ease,box-shadow .15s ease}

/* ── ⑬ 切换揭幕（View Transitions，本卡重心）──────────────────────────────
   点开关的那一下：新状态以开关按钮为圆心径向展开盖过旧状态（420ms，
   cubic-bezier(.22,1,.36,1)），旧快照原位垫底不淡出。圆心/半径由 JS 写进
   html 的 --reveal-*（快照坐标 = 视口坐标），伪元素树从 :root 继承。
   浏览器不支持 VT 时由 JS 走 220ms 交叉淡入退路，这里的规则完全不参与。 */
::view-transition-old(root){animation:none}
::view-transition-new(root){animation:vt-apple-reveal .42s cubic-bezier(.22,1,.36,1) both}
@keyframes vt-apple-reveal{
  from{clip-path:circle(0px at var(--reveal-x,50%) var(--reveal-y,50%))}
  to{clip-path:circle(var(--reveal-r,9999px) at var(--reveal-x,50%) var(--reveal-y,50%))}
}
/* 开关按钮自己成组（名字由 ⑭ 的瞬时门在切换期间挂上）：旧快照保持不动垫底，
   JS 在新快照上补间 borderRadius 6px→999px，就是「胶囊长出来」的那 260ms。 */
::view-transition-old(apple-toggle){animation:none}

/* ── ⑭ 切换瞬时门（html[data-theme-anim]，JS 只在切换的几百毫秒内挂/摘）────
   · 彩色图标错峰：揭幕期间图标在快照里是隐藏的，揭幕结束后由 JS 逐个
     20-30ms 错峰淡入（每枚 240ms、scale .5→1）——「新皮肤点到侧栏，图标
     一枚枚落进来」的第二拍。
   · 开关按钮的 view-transition-name 同理只在切换期间存在，平时零作用。 */
html[data-theme-anim] .nav-ico{opacity:0}
html[data-theme-anim] #theme-toggle{view-transition-name:apple-toggle}