/* ============================================================================
   外拍 · 灯下玻璃层(第二十八轮)。**仅 pad.html 与 remote.html 加载**;
   Mac(index.html)不加载 —— 摄影棚桌面是另一个世界,分毫不动。

   世界观(docs/视觉方向-灯下玻璃.md):「摄影灯打亮的一组毛玻璃器材」。
   本文件做三件事:
     1. 光场:把外拍两端的地从中性灰换成打了灯的光场(--field-bg + 细颗粒);
     2. 再蒙皮:构件目录(.sj-*)与共享组件在外拍面上的玻璃材质(值全走令牌);
     3. 外拍共用构件:走带键 / 抽屉族 / 自检卡 / 状态灯条 —— pad 与 remote
        从此共用同一份词汇表(此前 .drawer 与 .sheet 各写一份,是呈现漂移之源)。

   纪律:玻璃只有两种厚度(--glass-bg / --glass-bg-strong;深色对应 --glass-d-*);
   光晕只给「正在生效的状态」与「主动作」(tally 律);黑只属于镜头面。
   护栏:lint:tokens / lint:geometry(本文件零裸值)/ verify:cssparity。
   ============================================================================ */

/* ===========================================================================
   1. 光场 —— 打了灯的现场。颗粒用纯灰阶点阵(主题无关的「齿」),盖在渐变上。
   =========================================================================== */
/* 根元素也铺光场:手机浏览器动态视口(地址栏收起/安全区)会露出 html 的默认白底,
   在页面底部渲染成一根「白条」(用户第二十九轮第 7 条)。本文件仅外拍两端加载。 */
html {
  background: var(--field-bg) fixed;
}
.field {
  background: var(--field-bg) fixed;
  /* 建立独立层叠上下文:颗粒层走 z:-1 沉到内容之下、又不逃出本元素 ——
     不许用「给全部子级加 position:relative」的写法(它会覆盖子级自己的
     position:fixed,配对全屏层就是这么被压回文档流的,实证)。 */
  isolation: isolate;
}
.field::before {
  content: '';
  position: fixed;
  inset: 0;
  z-index: var(--z-under);
  pointer-events: none;
  background-image: radial-gradient(rgba(0, 0, 0, 0.013) 1px, transparent 1.3px);
  background-size: var(--sp-8) var(--sp-8);
}

/* ===========================================================================
   2. 构件再蒙皮 · 浅玻璃(默认面)
   =========================================================================== */
/* 卡片:悬浮毛玻璃 */
.sj-card {
  background: var(--glass-bg);
  -webkit-backdrop-filter: var(--glass-blur);
  backdrop-filter: var(--glass-blur);
  box-shadow: var(--sh-glassface);
}
.sj-card.tappable:active:not(:has(button:active)) {
  background: var(--glass-bg-strong);
  box-shadow: var(--sh-accent-soft), var(--sh-glassface);
}
/* 文稿长条沿用玻璃卡投影(覆盖 shared.css 的纸卡投影) */
.srow {
  box-shadow: var(--sh-glassface);
}

/* 次级键:冰晶键帽(不透明微渐变 —— 玻璃上的玻璃会糊,键要「拿得起来」) */
.sj-btn.secondary {
  background: var(--chip-bg);
  box-shadow: var(--sh-glasskey);
}
.sj-btn.secondary:active:not(:disabled) {
  background: var(--chip-bg-active);
  box-shadow: var(--sh-glasskey-down);
}
/* 主动作:强调色实心 + tally 光晕(光只给主动作) */
.sj-btn.primary {
  box-shadow: var(--sh-lit);
}
.sj-btn.primary:active:not(:disabled) {
  box-shadow: var(--sh-accent-soft);
}
.sj-btn.ghost:active:not(:disabled) {
  background: var(--glass-bg-strong);
}
/* 选中态(分段/点亮):浅面上仍是淡底+描边,不发光(光只给主动作与走带) */

/* 状态键:冰晶键帽 */
.sj-status {
  background: var(--chip-bg);
  box-shadow: var(--sh-glasskey);
}
.sj-status:active {
  background: var(--chip-bg-active);
}
.sj-status.flat {
  background: none;
  box-shadow: none;
}
.sj-lamp.tappable {
  background: var(--chip-bg);
  box-shadow: var(--sh-glasskey);
}

/* 输入:玻璃面的纸窗(要写字,底更实) */
.sj-field {
  background: var(--glass-bg-strong);
  -webkit-backdrop-filter: var(--glass-blur);
  backdrop-filter: var(--glass-blur);
}

/* 弹层三形态:承重玻璃(strong) */
.sj-sheet,
.sj-pop {
  background: var(--glass-bg-strong);
  -webkit-backdrop-filter: var(--glass-blur-strong);
  backdrop-filter: var(--glass-blur-strong);
}
.sj-pop {
  box-shadow: var(--sh-glassface-2);
}
.sj-menu .sj-row {
  background: none;
}
.sj-menu .sj-row:active {
  background: var(--glass-bg);
}
/* 弹壳单面律第三十六轮**上提到 shared.css** —— 它此前只写在这份文件里,
   而这份文件只有 pad/remote 加载,Mac 从来没拿到过(仪器②当场照出来)。
   规则住在只有一半表面加载的文件里,等于只对一半表面成立。别再在这里补一份。 */
/* 模态壳(dialog 本体在 shared.css,这里换玻璃面;backdrop 沿用 HUD scrim) */
dialog {
  background: var(--glass-bg-strong);
  -webkit-backdrop-filter: var(--glass-blur-strong);
  backdrop-filter: var(--glass-blur-strong);
  box-shadow: var(--sh-glassface-2);
}
dialog.on-dark {
  background: var(--glass-d-bg-strong);
  box-shadow: var(--sh-d-glassface);
}
/* 弹窗遮罩与 .scrim 同语言:轻黑 + 霜化,光场的颜色透过来 —— 玻璃浮在光上,不是浮在夜里 */
dialog::backdrop {
  background: var(--field-scrim);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
}

/* 列表行/分段:玻璃上的安静面 */
.sj-row {
  background: rgba(255, 255, 255, 0.5);
}
.sj-row:active {
  background: var(--glass-bg-strong);
}
.sj-seg > button {
  background: rgba(255, 255, 255, 0.55);
  box-shadow: 0 0 0 1px var(--glass-edge);
}
.sj-seg > button:active {
  background: var(--glass-bg-strong);
}

/* ===========================================================================
   3. 构件再蒙皮 · 深玻璃(.on-dark:黑舞台上的控制坞 / 深色抽屉)
   =========================================================================== */
.on-dark .sj-btn.secondary {
  background: var(--glass-d-key);
  box-shadow: var(--sh-d-glasskey);
}
.on-dark .sj-btn.secondary:active:not(:disabled) {
  background: var(--glass-d-key-2);
  box-shadow: var(--sh-d-glasskey-down);
}
.on-dark .sj-btn.primary {
  background: var(--accent);
  color: var(--on-accent);
  box-shadow: var(--sh-lit);
}
.on-dark .sj-sheet,
.on-dark .sj-pop,
.on-dark .sj-drawer {
  background: var(--glass-d-bg-strong);
  -webkit-backdrop-filter: var(--glass-blur-strong);
  backdrop-filter: var(--glass-blur-strong);
}
.on-dark .sj-row {
  background: var(--glass-d-key);
}
.on-dark .sj-row:active {
  background: var(--glass-d-key-2);
}
.on-dark .sj-status {
  background: var(--glass-d-key);
  box-shadow: var(--sh-d-glasskey);
}
.on-dark .sj-seg > button {
  background: var(--glass-d-key);
  box-shadow: 0 0 0 1px var(--glass-d-ring);
}
.on-dark .sj-seg > button:active {
  background: var(--glass-d-key-2);
}
.on-dark .sj-field {
  background: var(--glass-d-key);
}

/* ===========================================================================
   4.(第二十九轮撤下)深色品牌主板已退场:光场世界里不留场记板时代的深色遗物,
      首页顶栏与遥控端同语法 —— 裸文字品牌 + 玻璃状态键,浮在光上。
   =========================================================================== */

/* ===========================================================================
   5. 悬浮坞(底部玻璃条:pad 文稿库底栏)。参考视频的 bottom bar 语言。
   =========================================================================== */
.glass-dock {
  background: var(--glass-bg);
  -webkit-backdrop-filter: var(--glass-blur);
  backdrop-filter: var(--glass-blur);
  border-radius: var(--r-xl);
  box-shadow: var(--sh-glassface);
  padding: var(--sp-4) var(--sp-5);
}

/* ===========================================================================
   6. 抽屉族(pad 上镜台 + remote 共用;§2 判决 1 的彻底完成)。
      浅色面默认玻璃白;黑舞台上加 .on-dark = 深玻璃。
   =========================================================================== */
.scrim {
  position: fixed;
  inset: 0;
  z-index: var(--z-scrim);
  background: var(--field-scrim);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
  animation: sjScrimIn var(--dur-2) var(--ease);
  transition: opacity var(--dur-2) var(--ease-io);
}
.scrim.out {
  opacity: 0;
}
.drawer {
  position: fixed;
  left: 50%;
  bottom: 0;
  width: min(560px, 100vw);
  /* 74% → 88%(第三十五轮第 16 条):显示设置一共 9 块,74% 在 iPhone 15 Pro 竖屏
     只给到 491px,末尾的「还原默认显示」正好骑在视口边上被切一半。
     抽屉高一点不影响它的身份 —— 它本来就是「拉起来调完就收」的底部 sheet,
     而**被切一半的按钮**会让人以为界面坏了(用户当面点的就是这一类)。 */
  max-height: 88%;
  z-index: var(--z-layer);
  display: flex;
  flex-direction: column;
  padding: var(--sp-3) var(--sp-6) calc(env(safe-area-inset-bottom) + var(--sp-5));
  border-radius: var(--r-xl) var(--r-xl) 0 0;
  background: var(--glass-bg-strong);
  -webkit-backdrop-filter: var(--glass-blur-strong);
  backdrop-filter: var(--glass-blur-strong);
  box-shadow: var(--sh-glassface-2);
  color: var(--ink);
  transform: translateX(-50%);
  transition: transform var(--dur-3) var(--ease-io);
}
.drawer.out {
  transform: translateX(-50%) translateY(100%);
}
.drawer.on-dark {
  background: var(--glass-d-bg-strong);
  box-shadow: var(--sh-d-glassface);
  color: var(--hud-text-1);
}
/* 把手横杠:iOS 底部 sheet 的可拖暗示(纯装饰,不可点) */
.drawer::before {
  content: '';
  align-self: center;
  flex-shrink: 0;
  width: var(--sp-8);
  height: var(--sp-2);
  margin-top: var(--sp-3);
  border-radius: var(--r-full);
  background: rgba(0, 0, 0, 0.14);
}
.drawer.on-dark::before {
  background: rgba(255, 255, 255, 0.18);
}
.dw-hd {
  display: flex;
  align-items: center;
  flex-shrink: 0;
  padding: var(--sp-4) var(--sp-1) var(--sp-4);
  font-size: var(--t-caption);
  font-weight: var(--w-semibold);
  letter-spacing: 0.08em;
  color: var(--ink-3);
}
.drawer.on-dark .dw-hd {
  color: var(--hud-text-3);
}
.dw-x {
  margin-left: auto;
  color: var(--accent-ink);
  font-size: var(--t-body);
  font-weight: var(--w-bold);
  min-height: var(--h-md);
  min-width: var(--h-md);
  padding: 0 var(--sp-4);
}
.drawer.on-dark .dw-x {
  color: var(--accent-ondark);
}
.dw-body {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
  /* overflow-y:auto 会连横向一起裁,键帽的描边环与投影正好被切在边上(用户第二十九轮
     第 9 条「按钮边缘被切」)。负边距外扩 + 等量内衬,让影子有地方落。 */
  padding: var(--sp-1) var(--sp-4) var(--sp-5);
  margin-inline: calc(var(--sp-4) * -1);
}
/* 章节行(两端同一构件;当前章=强调色整块淡底,不贴竖条) */
.crow {
  display: flex;
  align-items: center;
  gap: var(--sp-4);
  min-height: var(--tap);
  padding: var(--sp-5) var(--sp-5);
  border-radius: var(--r-md);
  background: rgba(255, 255, 255, 0.5);
  margin-bottom: var(--sp-3);
  font-size: var(--t-body);
  color: var(--ink);
  transition: background var(--dur-1) var(--ease-io);
}
.crow:active {
  background: var(--glass-bg-strong);
}
.crow .no {
  width: var(--sp-7);
  flex-shrink: 0;
  font-size: var(--t-caption);
  color: var(--ink-3);
  font-variant-numeric: tabular-nums;
}
.crow.cur {
  background: var(--accent-weak);
  color: var(--ink);
  font-weight: var(--w-semibold);
  box-shadow: inset 0 0 0 1.5px var(--accent-line);
}
.crow.cur .no {
  color: var(--accent-ink);
}
.crow.past {
  color: var(--ink-3);
}
.drawer.on-dark .crow {
  background: var(--glass-d-key);
  color: var(--hud-text-1);
}
.drawer.on-dark .crow:active {
  background: var(--glass-d-key-2);
}
.drawer.on-dark .crow .no {
  color: var(--hud-text-4);
}
.drawer.on-dark .crow.cur {
  background: var(--accent-ondark-weak);
  color: var(--hud-text-0);
  box-shadow: inset 0 0 0 1.5px var(--accent-ondark-line);
}
.drawer.on-dark .crow.cur .no {
  color: var(--accent-ondark);
}
.drawer.on-dark .crow.past {
  color: var(--hud-text-3);
}

/* ===========================================================================
   7. 走带 / 步进 / 次级键(现场控制的键盘;pad 上镜台与 remote 共用)。
      tally 律:点亮的那枚 = 强调色实心 + 光晕,隔一臂也读得出「正在滚」。
   =========================================================================== */

/* 触控键一律 manipulation(第三十四轮,用户「所有按钮都有延迟」的第二因):
   关掉双击缩放的等待窗。页面虽写了 user-scalable=no,但微信/飞书的 WKWebView
   对它的遵守并不一致 —— 不显式声明就可能白等一次双击判定。
   (.step 另有 touch-action:none —— 它要吃住按住连调的手势,不在此列) */
.tkey,
.mkey,
.skey,
.jchip,
.crow {
  touch-action: manipulation;
}

.tkey {
  /* 走带键跟着操作台密度阶梯走(第三十五轮):`--h-xl` 是一个固定 60px,
     在 340px 高的横持手机上它和别的固定值一起把控制轨顶出视口 88px。
     `--deck-h` 从可用高度连续插值,地板是 44px 的命中区 —— 现场盲按仍够大。 */
  min-height: var(--deck-h-lg);
  border-radius: var(--r-md);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-4);
  font-size: var(--t-title-s);
  font-weight: var(--w-bold);
  background: var(--chip-bg);
  color: var(--ink);
  box-shadow: var(--sh-glasskey);
  transition:
    background var(--dur-1) var(--ease-io),
    color var(--dur-1) var(--ease-io),
    box-shadow var(--dur-1) var(--ease-io),
    transform var(--dur-1) var(--ease-io),
    opacity var(--dur-2) var(--ease);
}
/* 图标键(第三十五轮第 4 条):走带两枚只留图标,文字进 aria-label。
   图标键不需要文字那么宽,省下的宽度让给「结束上镜」—— 它是全屏唯一的红、
   也是唯一的出口,此前在 iPhone SE 竖屏上四个字挤成一团。 */
.tkey.ico-only {
  gap: 0;
}
.tkey.ico-only .t-ico {
  transform: scale(1.15); /* 少了文字之后,图标自己得撑起这枚键的分量 */
}
.tkey:active:not(:disabled) {
  transform: translateY(1px);
  background: var(--chip-bg-active);
  box-shadow: var(--sh-glasskey-down);
}
.tkey:disabled {
  opacity: 0.38;
  box-shadow: none;
}
.tkey.lit {
  background: var(--accent);
  color: var(--on-accent);
  box-shadow: var(--sh-lit);
}
.tkey svg {
  width: var(--ic-md);
  height: var(--ic-md);
}
.tkey .t-ico {
  display: inline-flex;
}
.on-dark .tkey {
  background: var(--glass-d-key);
  color: var(--hud-text-1);
  box-shadow: var(--sh-d-glasskey);
}
.on-dark .tkey:active:not(:disabled) {
  background: var(--glass-d-key-2);
  box-shadow: var(--sh-d-glasskey-down);
}
.on-dark .tkey.lit {
  background: var(--accent);
  color: var(--on-accent);
  box-shadow: var(--sh-lit);
}
/* 暂停键点亮 = 中性墨面(用户第三十轮第 2 条):高饱和蓝只属于「正在滚动」,
   停住是安静的事实 —— 两枚键点亮后一眼可分,不再是两坨一样的蓝。
   第三十四轮降一阶:原来直接用 --ink(正文墨,近黑),整块键面成了全屏最重的元素,
   「安静的事实」反而喊得最大声。改用 --tally-neutral(石墨),裁决不变,只调明度。 */
.tkey.neutral.lit {
  background: var(--tally-neutral);
  color: var(--tally-neutral-ink);
  box-shadow: none;
}
.on-dark .tkey.neutral.lit {
  background: var(--glass-d-key-2);
  color: var(--hud-text-0);
  box-shadow: inset 0 0 0 1.5px var(--glass-d-line);
}
/* 禁用即熄灯:未上镜时走带态没有意义,点亮一枚按不动的键是自相矛盾(tally 只说真话) */
.tkey.lit:disabled,
.on-dark .tkey.lit:disabled {
  background: var(--chip-bg);
  color: inherit;
  box-shadow: none;
}
.on-dark .tkey.lit:disabled {
  background: var(--glass-d-key);
}
/* 走带排里的出口(pad 上镜台):与 .mkey.exit 同一语言 —— 全屏唯一的红 */
.tkey.danger {
  color: var(--red);
  background: var(--red-bg);
  box-shadow: inset 0 0 0 1.5px var(--red-line);
  font-size: var(--t-body-s);
  font-weight: var(--w-semibold);
}
.tkey.danger:active:not(:disabled) {
  background: var(--red);
  color: var(--on-accent);
  box-shadow: var(--glow-red);
}
.on-dark .tkey.danger {
  color: var(--red-ondark);
  background: var(--hud-scrim-red);
  box-shadow: inset 0 0 0 1.5px var(--red-line);
}
.on-dark .tkey.danger:active:not(:disabled) {
  background: var(--red);
  color: var(--on-accent);
  box-shadow: var(--glow-red);
}

/* 大步进键(remote 速度 −/+:与走带同阶,要盲按) */
.step {
  min-height: var(--h-xl);
  border-radius: var(--r-md);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: var(--t-title);
  background: var(--chip-bg);
  color: var(--ink);
  box-shadow: var(--sh-glasskey);
  touch-action: none;
  transition:
    background var(--dur-1) var(--ease-io),
    transform var(--dur-1) var(--ease-io),
    box-shadow var(--dur-1) var(--ease-io),
    opacity var(--dur-2) var(--ease);
}
.step:active:not(:disabled) {
  background: var(--chip-bg-active);
  transform: translateY(1px);
  box-shadow: var(--sh-glasskey-down);
}
.step:disabled {
  opacity: 0.38;
  box-shadow: none;
}

/* 次级键(章节 / 显示设置 / 结束上镜;remote 底排与 pad 控制台共用) */
.mkey {
  flex: 1;
  min-width: 0;
  min-height: var(--tap);
  border-radius: var(--r-md);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-3);
  font-size: var(--t-body-s);
  font-weight: var(--w-semibold);
  background: var(--chip-bg);
  color: var(--ink);
  box-shadow: var(--sh-glasskey);
  white-space: nowrap;
  transition:
    background var(--dur-1) var(--ease-io),
    color var(--dur-1) var(--ease-io),
    transform var(--dur-1) var(--ease-io),
    opacity var(--dur-2) var(--ease),
    box-shadow var(--dur-1) var(--ease-io);
}
.mkey:active:not(:disabled) {
  background: var(--chip-bg-active);
  transform: translateY(1px);
  box-shadow: var(--sh-glasskey-down);
}
.mkey:disabled {
  opacity: 0.38;
}
.mkey svg {
  width: var(--ic-sm);
  height: var(--ic-sm);
}
.mkey .b-ico {
  display: inline-flex;
  opacity: 0.85;
}
/* 幽灵档(低频,静止无面) */
.mkey.quiet {
  background: none;
  color: var(--ink-2);
  box-shadow: inset 0 0 0 1px var(--glass-edge);
}
.mkey.quiet:active:not(:disabled) {
  background: var(--glass-bg);
}
/* **唯一的出口** = 全屏唯一的红(红玻璃;按下才实心) */
.mkey.exit {
  flex: 0 0 auto;
  padding: 0 var(--sp-6);
  color: var(--red);
  background: var(--red-bg);
  box-shadow: inset 0 0 0 1.5px var(--red-line);
}
.mkey.exit:active:not(:disabled) {
  background: var(--red);
  color: var(--on-accent);
  box-shadow: var(--glow-red);
}
.mkey.exit:disabled {
  opacity: 0.45;
}
.on-dark .mkey {
  background: var(--glass-d-key);
  color: var(--hud-text-1);
  box-shadow: var(--sh-d-glasskey);
}
.on-dark .mkey:active:not(:disabled) {
  background: var(--glass-d-key-2);
  box-shadow: var(--sh-d-glasskey-down);
}
.on-dark .mkey.quiet {
  background: none;
  color: var(--hud-text-2);
  box-shadow: inset 0 0 0 1px var(--glass-d-ring);
}
.on-dark .mkey.exit {
  color: var(--red-ondark);
  background: var(--hud-scrim-red);
  box-shadow: inset 0 0 0 1.5px var(--red-line);
}
.on-dark .mkey.exit:active:not(:disabled) {
  background: var(--red);
  color: var(--on-accent);
  box-shadow: var(--glow-red);
}

/* 小步进键(pad 控制台速度组) */
.skey {
  width: var(--tap);
  height: var(--tap);
  border-radius: var(--r-md);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--ink);
  background: var(--chip-bg);
  box-shadow: var(--sh-glasskey);
  transition:
    background var(--dur-1) var(--ease-io),
    transform var(--dur-1) var(--ease-io);
}
.skey:active {
  background: var(--chip-bg-active);
  transform: translateY(1px);
}
.skey:disabled {
  opacity: 0.35;
}
.skey svg {
  width: var(--ic-sm);
  height: var(--ic-sm);
}
.on-dark .skey {
  color: var(--hud-text-1);
  background: var(--glass-d-key);
  box-shadow: var(--sh-d-glasskey);
}
.on-dark .skey:active {
  background: var(--glass-d-key-2);
}

/* 灯(哑光平贴,只陈述 —— 灯与键两个阶层) */
.lamp {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-4);
  font-size: var(--t-caption);
  color: var(--ink-2);
  font-variant-numeric: tabular-nums;
}
.lamp i.dot {
  width: var(--sp-4);
  height: var(--sp-4);
  border-radius: var(--r-circle);
  background: var(--ink-3);
  transition: background var(--dur-1) var(--ease-io);
}
.lamp.on i.dot {
  background: var(--mint);
}
.on-dark .lamp {
  color: var(--hud-text-4);
}
.on-dark .lamp i.dot {
  background: var(--hud-text-4);
}
.on-dark .lamp.on i.dot {
  background: var(--hud-ok);
}

/* 桌面推来的 shareable 状态 chip(remote 信息板内;只读的灯,不是键) */
.rst {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  font-size: var(--t-caption);
  padding: var(--sp-1) var(--sp-4);
  border-radius: var(--r-sm);
  background: rgba(255, 255, 255, 0.5);
  box-shadow: 0 0 0 1px var(--glass-edge);
  color: var(--ink-2);
  animation: chipIn var(--dur-2) var(--ease);
}
@keyframes chipIn {
  from {
    opacity: 0;
    transform: translateY(3px);
  }
}
.rst i {
  width: var(--sp-3);
  height: var(--sp-3);
  border-radius: var(--r-circle);
  background: var(--mint);
  transition: background var(--dur-1) var(--ease-io);
}
.rst.neutral i {
  background: var(--ink-3);
}
.rst.warn {
  color: var(--amber-ink);
  box-shadow: 0 0 0 1px var(--amber-line);
}
.rst.warn i {
  background: var(--amber);
}
.rst.bad {
  color: var(--red);
  box-shadow: 0 0 0 1px var(--red-line);
}
.rst.bad i {
  background: var(--red);
}

/* 自检卡(pad 舞台自检 / remote 监看自检 —— 同一构件) */
.diag {
  position: fixed;
  left: var(--sp-5);
  right: var(--sp-5);
  bottom: calc(env(safe-area-inset-bottom) + var(--sp-5));
  z-index: var(--z-pop);
  background: var(--glass-bg-strong);
  -webkit-backdrop-filter: var(--glass-blur-strong);
  backdrop-filter: var(--glass-blur-strong);
  border-radius: var(--r-lg);
  padding: var(--sp-5) var(--sp-6);
  box-shadow: var(--sh-glassface-2);
  color: var(--ink);
  animation: sjPopRise var(--dur-2) var(--ease-io) both;
}
.diag h4 {
  font-size: var(--t-caption);
  letter-spacing: 0.16em;
  color: var(--ink-3);
  margin-bottom: var(--sp-4);
  font-weight: var(--w-bold);
}
.diag .diag-lines div,
.diag > div > div {
  font-size: var(--t-label);
  line-height: 1.8;
  font-family: var(--mono);
  word-break: break-all;
}
.diag button {
  margin-top: var(--sp-4);
  width: 100%;
  min-height: var(--tap);
  border-radius: var(--r-sm);
  background: var(--chip-bg);
  box-shadow: var(--sh-glasskey);
  color: var(--ink);
  font-size: var(--t-caption);
}
.diag.on-dark {
  background: var(--glass-d-bg-strong);
  box-shadow: var(--sh-d-glassface);
  color: var(--hud-text-1);
}
.diag.on-dark h4 {
  color: var(--hud-text-3);
}
.diag.on-dark button {
  background: var(--glass-d-key);
  box-shadow: var(--sh-d-glasskey);
  color: var(--hud-text-1);
}

/* 角落小胶囊键(上镜台左上:出口 + 回全屏)。深玻璃,随 #chrome 自隐 */
.corner-exit,
.corner-fs {
  min-height: var(--tap);
  padding: 0 var(--sp-5);
  border-radius: var(--r-md);
  display: inline-flex;
  align-items: center;
  gap: var(--sp-3);
  font-size: var(--t-caption);
  font-weight: var(--w-semibold);
  background: var(--glass-d-bg);
  -webkit-backdrop-filter: var(--glass-blur);
  backdrop-filter: var(--glass-blur);
  box-shadow: var(--sh-d-glasskey);
  transition:
    background var(--dur-1) var(--ease-io),
    transform var(--dur-1) var(--ease-io);
}
.corner-exit {
  color: var(--red-ondark);
}
.corner-exit:active {
  background: var(--red);
  color: var(--on-accent);
  transform: translateY(1px);
}
/* 回全屏 = 恢复类动作:强调色点亮(它出现即代表有事要修,不与红出口抢身份) */
.corner-fs {
  color: var(--accent-ondark);
  box-shadow: inset 0 0 0 1.5px var(--accent-ondark-line), var(--sh-d-glasskey);
}
.corner-fs:active {
  background: var(--accent);
  color: var(--on-accent);
  transform: translateY(1px);
}
.corner-exit svg,
.corner-fs svg {
  width: var(--ic-sm);
  height: var(--ic-sm);
}

/* 浮出的回执条 / toast:深玻璃(两端同语) */
.toast-glass {
  background: var(--glass-d-bg-strong);
  -webkit-backdrop-filter: var(--glass-blur);
  backdrop-filter: var(--glass-blur);
  color: var(--slate-text);
  box-shadow: var(--sh-d-glassface);
}

/* 稿头片头板:第二十九轮随「深色遗物退场」一并翻明 —— 白瓷片头板,
   斜纹签名保留但改为墨色蚀刻(整个外拍网页端唯一保留签名的位置)。
   Mac 端不加载本文件,摄影棚世界的深色场记板原样不动。 */
.rh-slate {
  background: var(--chip-bg);
  color: var(--ink);
  box-shadow: var(--sh-glassface-2);
}
.rh-stripe {
  background: repeating-linear-gradient(
    -45deg,
    var(--ink) 0 var(--sp-6),
    transparent var(--sp-6) var(--sp-8)
  );
  opacity: 0.08;
}
.rh-doc-title,
.rh-chars b {
  color: var(--ink);
}
.rh-chars small {
  color: var(--ink-3);
}
.rh-st {
  background: rgba(20, 24, 32, 0.04);
  border-color: transparent;
  color: var(--ink-2);
}
.d-touch .rh-st {
  box-shadow: none;
}
button.rh-jump {
  background: var(--amber-bg);
  border-color: var(--amber-line);
  color: var(--amber-ink);
  box-shadow: var(--sh-glasskey);
}

/* ===========================================================================
   仪表词汇(第三十轮下沉共享):读数格 / 章节芯片 / 速度面板 —— pad 上镜台与
   remote 同一份(「控制台全面向手机端统一」)。浅色默认,.on-dark 深玻璃变体。
   =========================================================================== */
.inf-cell {
  display: flex;
  flex-direction: column;
  gap: var(--sp-1);
  min-width: 0;
}
.inf-cell.grow {
  flex: 1;
}
.inf-lab {
  font-size: var(--t-label);
  font-weight: var(--w-bold);
  letter-spacing: 2px;
  color: var(--ink-3);
}
.inf-num {
  display: flex;
  align-items: baseline;
  gap: var(--sp-2);
}
.inf-num b {
  font-family: var(--mono);
  font-size: var(--t-hero);
  font-weight: var(--w-semibold);
  color: var(--ink);
  font-variant-numeric: tabular-nums;
  line-height: 1;
}
.inf-sub {
  font-size: var(--t-label);
  color: var(--ink-3);
}
.on-dark .inf-lab,
.on-dark .inf-sub {
  color: var(--hud-text-4);
}
.on-dark .inf-num b {
  color: var(--hud-text-0);
}
/* 章节芯片 = 读数即入口(键帽材质;省掉一枚重复的「章节」键) */
.jchip {
  flex: 0 1 46%;
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--sp-1);
  text-align: left;
  padding: var(--sp-3) var(--sp-5);
  border-radius: var(--r-md);
  background: var(--chip-bg);
  box-shadow: var(--sh-glasskey);
  transition:
    background var(--dur-1) var(--ease-io),
    transform var(--dur-1) var(--ease-io),
    box-shadow var(--dur-1) var(--ease-io),
    opacity var(--dur-2) var(--ease);
}
.jchip:active:not(:disabled) {
  background: var(--chip-bg-active);
  transform: translateY(1px);
  box-shadow: var(--sh-glasskey-down);
}
.jchip:disabled {
  opacity: 0.38;
  box-shadow: none;
}
.jchip .jc-hd {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
}
.jchip .jc-ic {
  display: inline-flex;
  opacity: 0.6;
}
.jchip .jc-v {
  font-size: var(--t-body-s);
  font-weight: var(--w-semibold);
  color: var(--ink);
  line-height: 1.35;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}
.on-dark .jchip {
  background: var(--glass-d-key);
  box-shadow: var(--sh-d-glasskey);
}
.on-dark .jchip:active:not(:disabled) {
  background: var(--glass-d-key-2);
  box-shadow: var(--sh-d-glasskey-down);
}
.on-dark .jchip .jc-v {
  color: var(--hud-text-1);
}
/* 速度面板:标签+读数一行,滑杆夹在两枚盲按 ± 之间 */
.speed {
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
  padding: var(--sp-4) var(--sp-5) var(--sp-5);
  border-radius: var(--r-lg);
  background: rgba(255, 255, 255, 0.45);
  box-shadow: var(--sh-glassinset);
  transition: opacity var(--dur-2) var(--ease);
}
.sp-hd {
  display: flex;
  align-items: baseline;
}
.sp-hd .sp-val {
  margin-left: auto;
  font-family: var(--mono);
  font-size: var(--t-title);
  font-weight: var(--w-bold);
  color: var(--ink);
  font-variant-numeric: tabular-nums;
  line-height: 1;
}
.sp-hd .sp-val small {
  font-size: var(--t-caption);
  font-weight: var(--w-normal);
  color: var(--ink-3);
  margin-left: var(--sp-2);
}
.sp-row {
  display: flex;
  align-items: center;
  gap: var(--sp-4);
}
.sp-row .step {
  flex: 0 0 var(--h-xl);
  min-height: var(--h-lg);
  font-size: var(--t-title-s);
}
.sp-row .skey {
  flex: 0 0 var(--tap);
}
.sp-row .sj-slider {
  flex: 1;
  min-width: 0;
}
.on-dark .speed {
  background: rgba(255, 255, 255, 0.06);
  box-shadow: none;
}
.on-dark .sp-hd .sp-val {
  color: var(--hud-text-0);
}
.on-dark .sp-hd .sp-val small {
  color: var(--hud-text-4);
}

/* 滑杆休眠(未上镜):与其它控件同一副禁用面孔 */
.sj-slider:disabled {
  opacity: 0.38;
  cursor: default;
}

/* 显示设置面板落进**浅色抽屉**时的文字色(shared.css 按深色 HUD 写死了 --hud-text-*;
   remote 翻明后抽屉是浅玻璃 —— 近白的读数在白底上会隐形) */
.drawer:not(.on-dark) .op-lab {
  color: var(--ink-3);
}
.drawer:not(.on-dark) .opd-hd b,
.drawer:not(.on-dark) .opd-axis .opd-val {
  color: var(--ink);
}
.drawer:not(.on-dark) .opd-note {
  color: var(--ink-2);
}

/* ===========================================================================
   清理回执 · 网页端重构(第三十二轮第 8 条):结构化 + 标签化。
   小票戏剧道具(图章/骑缝孔/锯齿)在网页端退役 —— 它们在窄弹窗里叠字(实证 bug);
   Mac 摄影棚保留原样(本文件不加载)。分类 = 标签芯片墙,样例 = 安静列表。
   =========================================================================== */
#pad-receipt .stamp,
#pad-receipt .perf,
#pad-receipt .zigzag {
  display: none;
}
#pad-receipt .receipt-h {
  text-align: left;
  letter-spacing: 0.3em;
  font-size: var(--t-title-s);
  font-weight: var(--w-bold);
}
#pad-receipt .sheet-sub {
  text-align: left;
  font-family: var(--mono);
  font-variant-numeric: tabular-nums;
  color: var(--ink-2);
}
#pad-receipt #receipt-body {
  display: flex;
  flex-direction: column;
  gap: var(--sp-4);
  padding-top: var(--sp-3);
}
/* 外拍皮肤:分类头做成标签芯片(第三十二轮「回执标签化」的延续),样例列表安静。
   ⚠️ 这里只**加皮肤**,不改结构 —— 结构由 components.ts 一处生成,两端同一棵树。
   旧版这一段是在撤销 shared.css 的子元素语义(`b` 与 `.d` 两端相反),那是漂移之源。 */
#pad-receipt .rcp-head {
  align-self: flex-start;
  align-items: center;
  padding: var(--sp-2) var(--sp-5);
  border-radius: var(--r-full);
  background: rgba(20, 24, 32, 0.05);
}
#pad-receipt .rcp-n {
  margin-left: var(--sp-2);
  font-family: var(--mono);
}
#pad-receipt .rcp-list {
  padding-left: var(--sp-7);
  color: var(--ink-3);
  line-height: 1.75;
}
#pad-receipt .receipt-foot {
  background: none;
  border-radius: 0;
  border-top: 1px solid var(--glass-edge);
  padding-top: var(--sp-4);
}

@media (prefers-reduced-motion: reduce) {
  .drawer,
  .scrim,
  .tkey,
  .step,
  .mkey,
  .skey,
  .crow,
  .rst,
  .diag {
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
  }
}

/* ===========================================================================
   曲率语言(第三十轮第 6 条):全部按钮族统一 --r-md 一档(唯一例外:.lg 主动作胶囊
   =角色差异);支持 corner-shape 的引擎上启用 iOS 式连续曲率(渐进增强)。
   =========================================================================== */
@supports (corner-shape: squircle) {
  .sj-btn,
  .sj-status,
  .sj-card,
  .sj-field,
  .sj-row,
  .sj-seg > button,
  .tkey,
  .mkey,
  .skey,
  .step,
  .crow,
  .rst,
  .drawer,
  .diag,
  dialog,
  /* 第三十六轮补齐:这批此前漏在名单外,于是**壳是 squircle、内层是 round**,
     数字一样(26 vs 26)、45° 角处偏离最大 —— 用户第 11 条说的「没匹配上」就是它。
     漏名单比写错值更难发现:值不一致一眼看得出,族不一致要盯着角看。 */
  .sj-sheet,
  .sj-confirm,
  .sj-pop,
  .sj-menu,
  .sj-drawer,
  .glass-dock,
  .speed,
  .jchip,
  .sj-panel-inset,
  .sj-tag,
  .pway,
  .rcp-head,
  #read-col,
  #console {
    corner-shape: squircle;
  }
}


/* 弹层遮罩(第三十七轮)。sj-pop 在外拍端是玻璃,而它盖住的稿卡/加稿卡也是玻璃 ——
   两层同材质叠在一起没有任何分隔,弹层看起来像「没打开」。dialog 早就有 ::backdrop,
   popover 这一族缺的是同一件事。用色沿用 --field-scrim,与模态同源。 */
#pop-scrim {
  position: fixed;
  inset: 0;
  z-index: calc(var(--z-pop) - 1);
  background: var(--field-scrim);
  animation: sjScrimIn var(--dur-2) var(--ease) both;
}
#pop-scrim.out {
  animation: sjPopFade var(--dur-1) var(--ease-io) both;
}