/* ===========================================================================
   共享组件样式 —— 与 components.ts 配对的那一半(0721 第二十四轮,用户拍板「根治」)。

   为什么单独成文件:DOM 共享了、CSS 不共享,等于没共享 —— 两端还是会各自漂。
   这里的规则是**从 desk.css 原样搬出来的**(不是重写),Mac 与 iPad 同时 link 它。

   分工:
     · 本文件 = 四个已定稿组件自身的样式(稿头 / 添加文稿 / 清理回执 / 显示设置)+ 通用分段控件
     · desk.css = Mac 外壳(左栏 / 工具条 / 上镜台容器 …)
     · pad.html 内联 = iPad 外壳
   触屏差异走 `.d-touch`(components.ts 的 density 参数落在根节点上),不是重写一份。

   纪律:改这几个组件的样子,改这里一处,两端同时变。
   =========================================================================== */

/* —— 稿头文稿状态带(v1.5.3;0715 键帽化):slate 上的 doc 维度体征(清稿·同步·上次拍到)。
   从"细长挤一块的小色点+文字"→ 舒展排布的可按键(明确能点看详情) —— */
.rh-status {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--sp-4);
  padding: var(--sp-1) var(--sp-6) var(--sp-6);
}
.rh-status:empty {
  display: none;
}
.rh-st {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-3);
  font-size: var(--t-caption);
  color: var(--slate-dim);
  padding: var(--sp-3) var(--sp-5);
  border-radius: var(--r-sm);
  background: var(--slate-bg-2);
  border: 1px solid var(--slate-line);
  pointer-events: auto; /* 稿头板整体 pointer-events:none;状态键可点看详情(0715 #4) */
}

.rh-st .icon {
  opacity: 0.9;
}
.rh-st-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--mint);
  flex-shrink: 0;
}

/* 「回到上次停点」动作键(0717 #5):琥珀点亮的键帽 —— 与哑光状态灯(rh-st)拉开层级,
   一眼分清「可按的动作」和「只读的状态」;琥珀与正文黄线同色 = 按它就是去那条线。 */
button.rh-jump {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-3);
  font-size: var(--t-caption);
  font-weight: var(--w-semibold);
  color: var(--amber);
  padding: var(--sp-3) var(--sp-5);
  border-radius: var(--r-sm);
  background: var(--slate-bg-2);
  border: 1px solid var(--amber-line);
  pointer-events: auto;
  cursor: pointer;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.12),
    0 1.5px 3px rgba(0, 0, 0, 0.3);
  transition:
    transform var(--dur-1) var(--ease-io),
    box-shadow var(--dur-1) var(--ease-io);
}
@media (hover: hover) {
  button.rh-jump:hover {
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.16);
  }
}
button.rh-jump:active {
  transform: translateY(0);
  box-shadow: inset 0 1.5px 3px rgba(0, 0, 0, 0.32);
}
button.rh-jump .icon {
  opacity: 0.95;
}

/* 文稿头档案卡(0709 S3):住在首段上方的 lead-in 留白里(那本是焦点线对齐的必要空间),
   像稿件封面 —— 滚过即离开,不占常驻空间。内容=文稿属性(字数/章节/同步/上次上镜),安静低声。 */
.read-head {
  position: absolute;
  top: 0;
  left: 46px;
  right: 46px;
  display: flex;
  flex-direction: column;
  justify-content: center; /* 板在留白里居中,绝不顶出留白上界被裁(0714 出血根治) */
  align-items: stretch;
  pointer-events: none; /* 片头板纯展示,不挡拖动 */
}
/* 极简片头板(0714 #4 二稿 —— 用户:内容只要「标题 + 字数」):slate 道具形体保留(斜纹带签名),
   信息只剩标题+字数。板自适应内容高、居中于留白 → 任何窗口/焦点线下都不出血。 */
.rh-slate {
  align-self: stretch;
  max-height: 100%;
  border-radius: var(--r-md);
  background: var(--slate-bg);
  color: var(--slate-text);
  overflow: hidden;
  box-shadow:
    0 14px 34px -12px rgba(20, 15, 5, 0.4),
    0 2px 8px rgba(20, 15, 5, 0.14);
}
.rh-stripe {
  height: 8px;
  background: repeating-linear-gradient(
    -45deg,
    rgba(245, 245, 245, 0.85) 0 12px,
    transparent 12px 24px
  );
  opacity: 0.9;
}
.rh-body {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-6);
  padding: var(--sp-6) var(--sp-6) var(--sp-6);
}
/* 标题=片名:衬线粗体,像片头板上写的片名(最多两行) */
.rh-doc-title {
  font-family: var(--serif);
  font-size: var(--t-title-s);
  font-weight: var(--w-bold);
  line-height: 1.35;
  color: var(--slate-text);
  min-width: 0;
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}
/* 字数=铭牌读数:mono 大字 + 小单位 */
.rh-chars {
  flex-shrink: 0;
  display: flex;
  align-items: baseline;
  gap: var(--sp-1);
}
.rh-chars b {
  font-family: ui-monospace, 'SF Mono', Menlo, monospace;
  font-size: var(--t-display);
  font-weight: var(--w-semibold);
  line-height: 1;
  letter-spacing: 0.5px;
  color: var(--slate-text);
  font-variant-numeric: tabular-nums;
}
.rh-chars small {
  font-size: var(--t-caption);
  color: var(--slate-dim);
}

/* 显示设置面板本体 —— 此前**没有任何样式**(pad 上靠承载容器的 padding 兜着,
   Mac 上靠 desk.css 的外壳)。组件自己的盒子必须住在共享层,否则换个承载就散架。 */
.op-display-body {
  display: flex;
  flex-direction: column;
  /* 间距跟着操作台密度阶梯走(第三十五轮):面板一共 9 块,固定间距在矮屏上
     累积出 60~270px 的溢出 —— 而「还原默认显示」按裁决在末尾整宽,
     于是**它永远是第一个掉出去的**(实测 iPhone 15 Pro 竖屏 663px 处骑在视口边上)。 */
  gap: var(--deck-gap);
  /* 限宽居中(第三十四轮):抽屉可以宽,面板不可以 —— 见 scale.css --panel-max 处的说明。
     窄屏上 min() 自动退让,不会反过来把手机面板挤瘦。 */
  max-width: var(--panel-max);
  width: 100%;
  margin-inline: auto;
}
/* 矮而宽的时候改两列(第三十四轮第 16 条)。
   ⚠️ 判据是**高度**不是宽度:面板一共 9 块 × 44px + 间距 ≈ 470px,竖屏放得下,
   横持手机(340px 高)差 267px。存档里提的「container-type + 宽 ≥520px 两列」实际
   **永远触发不了** —— 面板自己 max-width: var(--panel-max)=430px 封了顶,
   容器宽度到不了 520。(这条是照着存档写完、被 O5 当场判红才发现的。)
   两列时限宽跟着放开:限宽是为了「一根滑杆别超过拇指一次划得完的 360px」,
   两列各占一半,总宽放到 1.6 倍后单根仍在 350px 上下,DENSITY 断言照样过。 */
@media (max-height: 560px) and (min-width: 620px) {
  .op-display-body {
    display: grid;
    grid-template-columns: 1fr 1fr;
    column-gap: var(--sp-7);
    align-content: start;
    max-width: calc(var(--panel-max) * 1.6);
  }
  /* 「还原默认显示」两列时横跨整宽:它是这块面板的收尾动作,不是第 10 个并列项 */
  .op-display-body > .opd-reset,
  .op-display-body > .opd-note {
    grid-column: 1 / -1;
  }
}
/* 轴标题(字号/行距/…)。此前只在 desk.css 里有 → iPad 上是裸的继承字号。 */
.op-lab {
  font-size: var(--t-label);
  color: var(--hud-text-4);
  letter-spacing: 1px;
}
/* 「还原默认显示」现在是标准整宽次级键(.sj-btn secondary block),这里只管它与上一组的距离 */
.opd-reset {
  margin-top: var(--sp-4);
}
.opd-note {
  font-size: var(--t-label);
  color: var(--hud-text-3);
  text-align: center;
  margin-top: var(--sp-1);
}
.opd-hd {
  display: flex;
  align-items: baseline;
  margin-top: var(--sp-1);
  /* #6:锁死行高 → 读数在「标准 ↔ +1」间切换(中文/ASCII 行盒不同)时不再撑动面板高度 */
  height: 16px;
  line-height: 16px;
}
.opd-hd b {
  margin-left: auto;
  font-family: ui-monospace, Menlo, monospace;
  font-size: var(--t-caption);
  color: var(--hud-text-1);
}
/* 滑杆与分段的**长相**已收进构件目录(.sj-slider / .sj-seg,第二十七轮)。
   这里只剩布局关系 —— 此前这两处各写了一份「原生控件 + accent-color」和一份
   自制段控,那正是用户第 13 条「亮白色、风格割裂」的出处,而且 Mac 同病。
   ⚠️ 别再在这里补 `.opd-seg .seg-btn {...}`:它的特异度会盖过构件目录,
   等于把刚统一好的分段键又拆回两套。 */
.opd-slider {
  margin-bottom: var(--sp-1);
}
/* 单行调节轴:标签 · 滑杆(伸展) · 读数。收短长轴、消掉标签与读数间的空白(审计 DENSITY)。
   只作用于 buildDisplayPanel(pad/remote)新出的 .opd-axis;Mac 自建的显示 UI 走 .opd-hd,不受影响。 */
.opd-axis {
  display: flex;
  align-items: center;
  gap: var(--sp-5);
}
.opd-axis .op-lab {
  flex-shrink: 0;
}
.opd-axis .opd-slider {
  flex: 1;
  min-width: 0;
  margin: 0;
}
.opd-axis .opd-val {
  flex-shrink: 0;
  min-width: 2.6em;
  text-align: right;
  font-family: ui-monospace, Menlo, monospace;
  font-size: var(--t-caption);
  color: var(--hud-text-1);
}
.opd-seg {
  gap: var(--sp-3);
}

/* 回执小票的盒子 + 骑缝孔左右定位:同样是「组件自己的样子」,此前只在 desk.css 有 */
.receipt-body-wrap {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
}
.notch.nl {
  left: -8px;
}
.notch.nr {
  right: -8px;
}
.receipt-h {
  text-align: center;
  letter-spacing: 2px;
}
.receipt .sheet-sub {
  text-align: center;
}
.perf {
  position: relative;
  border-top: 2px dashed var(--desk-deep);
  margin: var(--sp-6) var(--sp-1) var(--sp-4);
}
.notch {
  position: absolute;
  top: -8px;
  width: 15px;
  height: 15px;
  border-radius: 50%;
  background: var(--desk-deep);
}

/* ===== 清理回执正文 · 三个显式模块(第三十六轮,用户第 12 条)=================
   旧结构是「一行分类 + 一条 join 出来的跑马字符串」平铺在一起,而且两端
   `.receipt-row` 的子元素顺序**是反的** —— 同一个 class,`b` 和 `.d` 语义相反,
   于是 outdoor.css 那一段其实是在**撤销** shared.css 而不是皮肤化它。
   现在由 components.ts 的 buildReceiptBody 一处生成:
     .rcp-stat  读数格(与监看信息板同一套仪表语汇)
     .rcp-group 分类模块(带标签头)
     .rcp-list  样例列表(逐条独立行,不再 join) */
.rcp {
  display: flex;
  flex-direction: column;
  gap: var(--sp-6);
}
.rcp-stat {
  display: flex;
  flex-direction: column;
  gap: var(--sp-1);
}
.rcp-lab {
  font-size: var(--t-label);
  font-weight: var(--w-bold);
  letter-spacing: 2px;
  color: var(--ink-3);
}
.rcp-num {
  display: flex;
  align-items: baseline;
  gap: var(--sp-3);
}
.rcp-num > b {
  font-family: var(--mono);
  font-size: var(--t-display);
  font-weight: var(--w-semibold);
  color: var(--ink);
  font-variant-numeric: tabular-nums;
  line-height: 1;
}
.rcp-sub {
  font-size: var(--t-label);
  color: var(--ink-3);
}
.rcp-name {
  min-width: 0;
}
.rcp-empty {
  font-size: var(--t-caption);
  color: var(--ink-3);
}
.rcp-group {
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
}
.rcp-head {
  display: flex;
  align-items: baseline;
  gap: var(--sp-4);
  font-size: var(--t-caption);
  font-weight: var(--w-semibold);
  color: var(--ink);
}
.rcp-n {
  margin-left: auto;
  font-weight: var(--w-semibold);
  color: var(--ink-3);
  font-variant-numeric: tabular-nums;
}
.rcp-list {
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
  margin: 0;
  padding-left: var(--sp-6);
  font-size: var(--t-label);
  line-height: 1.7;
  color: var(--ink-3);
  user-select: text;
  -webkit-user-select: text;
}
.rcp-list > li {
  list-style: disc;
}
.receipt-total {
  display: flex;
  font-size: var(--t-caption);
  font-weight: var(--w-bold);
  border-top: 1px solid var(--desk-deep);
  margin-top: var(--sp-4);
  padding: var(--sp-5) 0 var(--sp-2);
}
.receipt-total span {
  margin-left: auto;
}
.zigzag {
  height: 12px;
  margin: var(--sp-4) var(--sp-1) 0;
  background-color: var(--side);
  background-image:
    linear-gradient(-45deg, var(--paper) 8px, transparent 0),
    linear-gradient(45deg, var(--paper) 8px, transparent 0);
  background-size: 16px 16px;
  background-repeat: repeat-x;
  background-position: left top;
}
.receipt-foot {
  background: var(--side);
  border-radius: 0 0 var(--r-md) var(--r-md);
  margin-top: 0;
}
.receipt-note {
  font-size: var(--t-label);
  color: var(--ink-3);
}
.stamp {
  position: absolute;
  right: -14px;
  top: -13px;
  width: 72px;
  height: 72px;
  border: 2px dashed var(--mint);
  border-radius: 50%;
  background: linear-gradient(0deg, var(--mint-bg), var(--mint-bg)), var(--paper);
  color: var(--mint-deep);
  font-size: var(--t-label);
  font-weight: var(--w-bold);
  line-height: 1.5;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  transform: rotate(-13deg);
  letter-spacing: 1px;
}

/* 组件产出的**语义钩子**:长相来自构件目录(.sj-btn / .sj-lamp),这里只管
   它们在各自容器里的布局职责。第九道护栏 verify:css-parity 要求每个共享 class
   在每个消费表面都解析得到规则 —— 「有 DOM 没样式」正是 iPad 上输入框退化成
   浏览器默认控件那一类问题的形状。 */
.card-live,
.card-more {
  flex-shrink: 0;
}
/* 每篇飞书稿唯一入口:飞书蓝图标,常驻可见(第二十七轮从 desk.css **原样搬出**,不是重写) */
.row-feishu {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  color: var(--feishu-brand);
  opacity: 0.9;
  padding: var(--sp-2);
  /* 与同排的 ⋯(.sj-btn → --r-md)同圆角:pad 上本元件同时挂 .sj-btn 与 .row-feishu,
     此前 --r-sm 覆盖 --r-md → 一个 44px 方块配 10px 圆角、旁边兄弟键却 16px(审计 A7)。 */
  border-radius: var(--r-md);
  transition:
    opacity var(--dur-1) var(--ease-io),
    background var(--dur-1) var(--ease-io);
}
/* hover 高亮只给真鼠标 —— 触屏上它会「点一下就粘住」= 审计里那个格格不入的小圆角框。
   触屏上飞书角标只是常显入口,点击直达,不需要 hover 面。 */
@media (hover: hover) {
  .row-feishu:hover {
    opacity: 1;
    background: var(--feishu-brand-weak);
  }
}
/* 账号槽:已登录时组件**故意不放东西**(状态住顶栏,不重复说)→ 空了就别占位 */
.add-account:empty {
  display: none;
}
.add-account {
  display: flex;
  align-items: center;
  gap: var(--sp-4);
  font-size: var(--t-caption);
  color: var(--ink-3);
}
/* 弹层底行:左次级 / 右主动作。`.spacer` 撑开中间(它现在住在 primitives.css) */
.sheet-foot {
  display: flex;
  align-items: center;
  gap: var(--sp-4);
}

/* ---------------------------------------------------------------------------
   文稿长条(buildScriptRow,第二十七轮)—— 单列时间序,不是网格画廊。
   高度由内容决定,行与行之间不互相拉齐 → 不会再出现「短标题那条空掉半张」。
   --------------------------------------------------------------------------- */
.srow {
  flex-direction: row;
  align-items: center;
  gap: var(--sp-6);
  padding: var(--sp-5) var(--sp-6);
  /* 塑体积:文稿卡是「桌上一叠稿」,要浮起来,不是贴在浅底上的死白方块 */
  box-shadow: var(--sh-card);
}
.srow > .sr-main {
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
  flex: 1;
  min-width: 0;
}
.srow > .sr-main > .t {
  /* 标题是「选哪篇」的第一信息,从 --t-body(与正文同级)升格到 --t-title-s 粗体,立层级 */
  font-size: var(--t-title-s);
  font-weight: var(--w-bold);
  line-height: 1.35;
  letter-spacing: -0.01em;
  color: var(--ink);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
/* 右侧读数块(字数 + 时长):填掉标题与动作间的死白 + 给「这稿多长/多久」该有的分量 */
.srow > .sr-count {
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: var(--sp-1);
  font-variant-numeric: tabular-nums;
}
.srow > .sr-count > .sr-num {
  display: flex;
  align-items: baseline;
  gap: var(--sp-2);
}
.srow > .sr-count > .sr-num > .n {
  font-family: var(--mono);
  font-size: var(--t-title);
  font-weight: var(--w-bold);
  color: var(--ink);
  line-height: 1;
}
.srow > .sr-count > .sr-num > .u {
  font-size: var(--t-caption);
  color: var(--ink-3);
}
.d-touch.srow > .sr-count > .sr-num > .n {
  font-size: var(--t-title-l, var(--t-title));
}
.srow > .sr-main > .m {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--sp-3);
  font-size: var(--t-caption);
  color: var(--ink-2);
  font-variant-numeric: tabular-nums;
}
.srow .m > .c > .n {
  font-family: var(--mono);
  font-weight: var(--w-semibold);
  color: var(--ink);
}
.srow .m > .sep {
  color: var(--hair-2);
}
.srow .m > .src {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-3);
}
/* 同步健康只用一颗圆点表达(与 Mac 的 row-sub 同一语言);
   飞书双色鸟只出现在「在飞书打开」那枚能按的键上 —— 一行里一只鸟。 */
.srow .m > .src > .sdot {
  width: 6px;
  height: 6px;
  border-radius: var(--r-circle);
  background: var(--ink-3);
  flex-shrink: 0;
}
.srow.tone-ok .m > .src > .sdot {
  background: var(--mint);
}
.srow.tone-warn .m > .src {
  color: var(--amber-ink);
}
.srow.tone-warn .m > .src > .sdot {
  background: var(--amber);
}
.srow .m > .tail {
  color: var(--ink-3);
}
.srow > .sr-acts {
  display: flex;
  align-items: center;
  gap: var(--sp-4);
  flex-shrink: 0;
}
/* 鼠标密度:次级键(在飞书打开 / ⋯)hover 才浮现,常态安静;
   触屏没有 hover,一律常显 —— 这是**密度差异**,不是两套设计。 */
.srow > .sr-acts > .sj-btn.ghost {
  opacity: 0;
  transition: opacity var(--dur-1) var(--ease-io);
}
@media (hover: hover) {
  .srow:hover > .sr-acts > .sj-btn.ghost {
    opacity: 1;
  }
}
.srow:focus-within > .sr-acts > .sj-btn.ghost {
  opacity: 1;
}
.d-touch.srow > .sr-acts > .sj-btn.ghost {
  opacity: 1;
}
/* 窄屏(手机竖屏 / 分屏):动作换行到 meta 下面,不压缩标题 */
@media (max-width: 520px) {
  .srow {
    flex-wrap: wrap;
  }
  .srow > .sr-acts {
    width: 100%;
    justify-content: flex-end;
  }
}

.seg {
  display: flex;
  gap: var(--sp-3);
}
.seg-btn {
  font-size: var(--t-caption);
  padding: var(--sp-3) var(--sp-5);
  border-radius: var(--r-full);
  border: 1px solid var(--hair-2);
  background: var(--paper);
  color: var(--ink-2);
}

.link-status {
  font-size: var(--t-caption);
  padding: var(--sp-4) var(--sp-5);
  border-radius: var(--r-sm);
  margin-bottom: var(--sp-4);
  line-height: 1.5;
}

/* —— 添加稿件:单一智能输入 ——
   `.add-sheet` 此前**两端都没有样式**:Mac 靠弹窗外壳兜着,iPad 靠承载卡的 padding 兜着,
   于是换个承载(第二十五轮把它从弹窗改成就地展开)就散架 —— 用户第 14 条「巨丑无比」。
   组件自己的盒子必须住在共享层。 */
.add-sheet {
  display: flex;
  flex-direction: column;
  gap: var(--sp-5);
}
.add-sheet > h3 {
  font-size: var(--t-title-s);
  font-weight: var(--w-bold);
}
/* 输入行:只有输入框。
   「粘贴」键第三十四轮第 2 条移到底行(用户拍板),此前它 position:absolute 浮在框正中 ——
   那正是交互规范 §4 自己禁止的「浮层压内容」,而且要靠 `:has(:placeholder-shown)` 才不挡字:
   一枚必须靠躲闪才能共存的键,说明它站错了地方。 */
.add-field {
  display: flex;
}
/* 粘贴键现在是底行的常驻动作(与「添加」同族并排)——
   不再需要「有内容即隐藏」:它不压任何东西,而且贴第二段、贴错了想重贴时它都还得在。 */
.add-paste {
  flex: 0 0 auto;
}
/* 「添加」比「粘贴」更宽(用户第三十五轮当面裁的):两枚键紧挨着,间距不用拉开,
   靠**宽度**分主次 —— 尺寸表频次/权重,是这个项目一直在用的盲按纪律的同一条。 */
.sheet-foot .sj-btn.primary {
  padding-inline: var(--sp-8);
}
#new-input {
  font-family: inherit;
  min-height: var(--h-xl);
  line-height: 1.7;
}
/* 添加文稿三种方式:每条配对应 icon,清晰直观(#9) */
.new-ways {
  display: flex;
  flex-direction: column;
  gap: var(--sp-4);
  margin: var(--sp-3) var(--sp-1) var(--sp-1);
}
.new-way {
  display: flex;
  align-items: center;
  gap: var(--sp-4);
  font-size: var(--t-caption);
  color: var(--ink-2);
}
.new-way .ico {
  color: var(--ink-3);
  flex-shrink: 0;
}
.new-way .nw-feishu {
  color: var(--feishu-brand);
}

/* —— 稿头信息板 / 仪表 / 断连告警 / 回位提示 / 黄线小签:出现即淡入升起 —— */
.read-head {
  animation: fadeRise 0.24s var(--ease);
}

/* ---------------------------------------------------------------------------
   触屏密度(density: 'touch'):只调尺寸与命中区,不改结构、不改层级。
   规则:任何可点元素的命中区 ≥44px;字号略放大;悬停态在触屏上无意义,不做。
   --------------------------------------------------------------------------- */
/* 触屏下这两枚是**可点的键**(点开看证据 / 跳回停点),命中区必须够 44 ——
   旧值 34 恰好是「看起来像给触屏放大过、其实还在下限以下」,验收器也只查了高才漏掉。 */
.d-touch .rh-st,
.d-touch button.rh-jump {
  min-height: var(--h-md);
  font-size: var(--t-caption);
}
.d-touch .rh-doc-title {
  font-size: var(--t-title-s);
}
.d-touch .rh-chars b {
  font-size: var(--t-display);
}
.d-touch .seg-btn {
  min-height: var(--h-md);
  font-size: var(--t-body-s);
  padding: 0 var(--sp-6);
}
.d-touch .opd-slider {
  height: 44px;
}
.d-touch .opd-reset {
  min-height: var(--h-md);
  font-size: var(--t-body-s);
}
.d-touch #new-input {
  min-height: var(--h-xl);
  font-size: var(--t-body); /* iOS 上 <16px 的输入框会触发聚焦缩放 */
}
.d-touch .new-way {
  min-height: var(--h-sm);
}

/* 触屏密度补全(第二十五轮批 D):显示设置面板从 Mac 搬到手机后,这几处仍是鼠标尺寸。
   命中区 ≥44 是硬线,读数行也要能放下两行中文。 */
.d-touch .opd-hd {
  height: auto;
  min-height: var(--h-sm);
  line-height: 1.4;
  align-items: center;
}
.d-touch .opd-hd b {
  font-size: var(--t-body-s);
}
.d-touch .opd-reset {
  min-height: var(--h-md);
  height: auto;
  font-size: var(--t-body-s);
}

/* ===========================================================================
   模态弹层的**壳**(第二十七轮补进共享层)。

   为什么必须在这里而不是各页内联:用户第 3 条「手机遥控点结束上镜,弹窗圆角有白边,
   而且位置在左上角」。真因两条,都是「壳没跟着组件走」:
     · `remote.html` 的 reset `* { margin: 0 }` 把 `dialog` 的 `margin: auto` 干掉了
       → 模态不再居中,贴到左上角;
     · 没有 `border: none` → UA 默认给 dialog 画 2px 实线边 + 白底
       → 一圈白边包着里面圆角的 `.sj-sheet`。
   pad.html 的内联样式里恰好写过这两句,remote.html 没有 —— 于是同一枚 buildConfirm
   在两个端上一个正常一个坏掉。**这是「只共享 DOM 不共享壳」的第三例。**
   护栏 verify:cssparity 现已把元素选择器(dialog/textarea/input)一并纳入。
   =========================================================================== */
dialog {
  margin: auto;
  padding: 0;
  border: none;
  border-radius: var(--r-xl);
  background: var(--paper);
  color: var(--ink);
  box-shadow: var(--sh-3);
  max-width: min(92vw, 560px);
  max-height: calc(100vh - var(--sp-7));
}
/* 入场动画必须收窄到 [open](第三十七轮修)。
   写在裸 `dialog` 上时,`both` 的填充态在关闭之后**继续生效** —— 动画在层叠里压过过渡,
   于是 desk.css:2498 那条 `dialog.sheet:not([open]) { opacity: 0 }` 的 allow-discrete 退场
   根本没机会跑,Mac 端所有弹窗变成硬切消失。verify-motion 一直在报这条,
   而它落在「红但退出码正确」那 7 支里,没人当真。 */
dialog[open] {
  animation: sjSheetIn var(--dur-2) var(--ease-io) both;
}
/* backdrop 的 background 必须留在**原特异度**上(第三十七轮的一次自造回归)。
   第一版把它一起提到 `dialog[open]::backdrop`,特异度从 (0,0,1) 升到 (0,1,1) ——
   当场夺走了 outdoor.css:137 `dialog::backdrop { background: var(--field-scrim) }` 的覆盖,
   外拍两端的「结束上镜」确认弹窗背后整页被压成 HUD 深色遮罩(视觉回归 3 张,差异 75~97%)。
   只有**动画**需要收窄到 [open](那是 `both` 填充压死退场过渡的病灶),颜色不需要。 */
dialog::backdrop {
  background: var(--hud-scrim);
}
dialog[open]::backdrop {
  animation: sjScrimIn var(--dur-2) var(--ease) both;
}
dialog.out {
  animation: sjSheetOut var(--dur-1) var(--ease-io) both;
}
/* 深色面上的弹层(上镜台/遥控台的「结束上镜」确认):
   一块纯白弹窗砸在全黑提词屏上,在片场是真的会影响拍摄(那块屏就是光源)。 */
dialog.on-dark {
  background: var(--hud-popover);
  color: var(--hud-text-1);
  box-shadow: var(--sh-d-3);
}
/* ===== 弹壳单面律(第三十三轮立,第三十六轮**上提到共享层**)==================
   壳(dialog)负责脸,直接子级的 .sj-sheet 只留骨架。两层都画 =
   两套圆角与两条受光边错位 1px 叠加 —— 用户第 11 条「圆角和高光没匹配上」。

   为什么现在才上提:这条规则第三十三轮只写进了 `outdoor.css`,而那份文件
   **只有 pad/remote 加载** —— Mac 从来没拿到过,`desk.css` 里也没有对应的重置。
   仪器②(verify-dialog-geometry)第一次跑就把它照出来:
   Mac 的破坏性确认「壳(底有/影有) 子级(底有/影有) · 两层都在画玻璃」。
   规则住在只有一半表面加载的文件里,等于只对一半表面成立。

   ⚠️ 深色那条必须显式写 `dialog.on-dark > .sj-sheet`(特异度 0,2,1):
   `primitives.css` 的 `.on-dark .sj-sheet`(0,2,0)会压过 `dialog > .sj-sheet`(0,1,1),
   于是内层又把玻璃画回来。**别赌源序**(复盘 A15)。 */
dialog > .sj-sheet,
dialog.on-dark > .sj-sheet {
  background: none;
  box-shadow: none;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  /* 圆角跟壳走,不自带一个:内层贴着壳(inset 0),两者不一致时内层的裁剪边
     会在角上露出一道 —— Mac 上实测壳 16 / 内层 26,差 10px。
     `inherit` 而不是再写一个值:壳的圆角是世界观决定的(Mac 16 / 外拍 26),
     骨架不该有自己的意见。 */
  border-radius: inherit;
}
/* 弹窗标题为了「打开即可 Esc/读屏」挂了 tabindex=-1 + autofocus,
   而 WebKit 会给它画一圈蓝色焦点环 —— 三张金标里都有,是纯噪音。
   焦点环只给键盘导航(:focus-visible),这条此前只写在 pad.html 里,同样是半个表面。 */
[tabindex='-1']:focus {
  outline: none;
}
@keyframes sjSheetIn {
  from {
    opacity: 0;
    transform: translateY(10px) scale(0.98);
  }
}
@keyframes sjSheetOut {
  to {
    opacity: 0;
    transform: translateY(6px) scale(0.985);
  }
}


/* 单键告知(第三十七轮)。壳沿用 .sj-confirm 的长矩形与几何 —— 同族同形;
   区别只在**没有取消键、也不是危险色**:它说的是「已经怎样了」,不是「要不要」。 */
.sj-notice > .sj-foot > .sj-btn.primary.solid {
  background: var(--accent);
  color: var(--on-accent);
  border-color: transparent;
}