/* ==========================================================================
   标本 02 — 表单与校验 / DIN 工业测量仪表标签
   体裁:仪表铭牌与检验单。标注线把量名引到输入井,井下是该量的刻度;
   单位与公差是内容,不是装饰。字面:Bahnschrift Condensed(量名/区名)、
   Consolas(数值与刻度)、Noto Sans CJK SC(中文)。
   外壳不注入;本文件只负责本标本内部。
   ========================================================================== */

html { background: #d9d6cb; }   /* 落地色画在最外层,否则 iframe 露白底 */
/* 落地色随版本走:固定成修正版的地面色,会在病原版下方露出不属于它的色带 */
html[data-mode="slop"] { background: #f4f3f8; }
body { margin: 0; }                    /* 页边留白由外壳承担 */

.spn {
  margin: 0;
  font-family: 'Bahnschrift', 'Noto Sans CJK SC', 'Microsoft YaHei', sans-serif;
  color: #17181a;
  background: #d9d6cb;
  -webkit-font-smoothing: antialiased;
}

/* 唯一一处全局重置:格宽是按 border-box 推的(位数 × 1ch + 单位位 + 井内留白 + 边框) */
*, *::before, *::after { box-sizing: border-box; }

/* 模式切换:两版都在 DOM 里,靠属性显隐 */
[data-mode="slop"]  .v-fixed { display: none; }
[data-mode="fixed"] .v-slop  { display: none; }

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

:focus-visible { outline: 2px solid #1b1c19; outline-offset: 2px; }

.spn button, .spn input, .spn select { font: inherit; }

/* ==========================================================================
   病原 —— AI 味版本
   浮动标签一聚焦就上移淡出;占位符灰底白字;必填只靠红星;
   六个字段等宽等高、没有分组;错误只有一行泛用红字。
   ========================================================================== */

.v-slop {
  padding: 3rem 2rem;
  background: #f4f3f8;
  font-family: 'Segoe UI', 'Noto Sans CJK SC', 'Microsoft YaHei', sans-serif;
}

.s-card {
  max-width: 34rem;
  padding: 2rem;
  border-radius: 1.5rem;
  background: #fff;
  box-shadow: 0 18px 44px -22px rgba(76, 58, 138, .34);
}

.s-eyebrow {
  margin: 0 0 .55rem;
  font-size: .8125rem;
  font-weight: 600;
  letter-spacing: .04em;
  background: linear-gradient(92deg, #7c5cf0 0%, #2f74c8 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.s-h { margin: 0 0 .5rem; font-size: 1.5rem; font-weight: 700; letter-spacing: -.01em; }

.s-sub { margin: 0 0 1.5rem; font-size: .9375rem; line-height: 1.6; color: #6f6a85; }

/* 等宽等高的字段网格:分组只靠间距,间距又不承载任何含义 */
.s-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; }

.s-field { position: relative; }

.s-input {
  width: 100%;
  height: 3.4rem;
  padding: 1.35rem 1rem .35rem;
  border: 0;
  border-radius: 14px;
  background: #e9ebf2;
  box-shadow: inset 0 2px 6px rgba(38, 32, 80, .10);
  font-size: .9375rem;
  color: #2b2a3d;
}
/* 灰底白字占位:对比度约 1.1:1 */
.s-input::placeholder { color: #fff; }
.s-input:focus { outline: 2px solid #7c5cf0; outline-offset: 1px; }

/* 浮动标签:聚焦即上移并淡出 —— 名字没了 */
.s-float {
  position: absolute;
  left: 1rem;
  top: 50%;
  transform: translateY(-50%);
  font-size: .9375rem;
  color: #8d90a8;
  pointer-events: none;
  transition: transform .18s ease, opacity .18s ease;
}
.s-input:focus + .s-float,
.s-input:not(:placeholder-shown) + .s-float {
  transform: translateY(-1.6rem) scale(.82);
  opacity: 0;
}

/* 必填:只有一个红星,没有一句话说它必填 */
.s-req { color: #ff5b7f; margin-left: .12rem; }

.s-field.is-bad .s-input {
  box-shadow: inset 0 2px 6px rgba(38, 32, 80, .10), 0 0 0 2px rgba(255, 91, 127, .38);
}

/* 错误:一行泛用红字,不说哪个字段、为什么、怎么办 */
.s-err { margin: .9rem 0 0; font-size: .8125rem; color: #b8285a; }
.s-err[hidden] { display: none; }

.s-actions { display: flex; flex-wrap: wrap; gap: .6rem; margin-top: 1.4rem; }

.s-btn {
  border: 0;
  border-radius: 999px;
  padding: .7rem 1.4rem;
  font-size: .9375rem;
  font-weight: 600;
  cursor: pointer;
  transition: transform .2s ease, box-shadow .2s ease;
}
.s-btn--primary {
  color: #fff;
  background: linear-gradient(96deg, #7c5cf0 0%, #2f74c8 100%);
  box-shadow: 0 10px 22px -12px rgba(90, 80, 220, .75);
}
.s-btn--primary:hover { transform: translateY(-1px); }
.s-btn--ghost { color: #4b4266; background: #f0eef8; box-shadow: inset 0 0 0 1px #e2def2; }
.s-btn:focus-visible { outline: 2px solid #4b4266; outline-offset: 2px; }

.s-foot { margin: 1rem 0 0; font-size: .75rem; color: #6f6a85; }

/* ==========================================================================
   修正 —— DIN 工业测量仪表标签 / 检验单
   色域四个值加一个故障色:面板灰、铭牌白、墨、细线,加一个朱红。
   朱红只出现在「超差」这一件事上 —— 合格用实心墨章,不用绿。
   ========================================================================== */

.v-fixed {
  --paper: #d9d6cb;
  --plate: #eceae1;
  --ink:   #1b1c19;
  --rule:  #5f5d55;
  --fault: #9d2b17;
  --f-din:   'Bahnschrift Condensed', 'Bahnschrift SemiCondensed', 'Bahnschrift', 'Arial Narrow', sans-serif;
  --f-label: 'Bahnschrift Condensed', 'Bahnschrift', 'Noto Sans CJK SC', 'Microsoft YaHei UI', sans-serif;
  --f-cjk:   'Noto Sans CJK SC', 'Microsoft YaHei UI', sans-serif;
  --f-num:   Consolas, 'Cascadia Mono', 'Lucida Console', monospace;

  padding: 2.2rem 2rem 3rem;
  background: var(--paper);
}

.p-plate {
  max-width: 47rem;
  border: 1px solid var(--ink);
  background: var(--plate);
}

/* 铭牌条:机箱上的压印条 */
.p-plate__head {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: .35rem .8rem;
  padding: .58rem .9rem;
  background: var(--ink);
  color: var(--plate);
}
.p-plate__id   { font-family: var(--f-num); font-size: .75rem; letter-spacing: .1em; }
.p-plate__name { font-family: var(--f-label); font-size: .9375rem; font-weight: 600; letter-spacing: .1em; }
.p-plate__rule { font-family: var(--f-cjk); font-size: .75rem; color: #b7b4a9; }
.p-plate__rev  { margin-left: auto; font-family: var(--f-num); font-size: .6875rem; letter-spacing: .12em; color: #b7b4a9; }

.p-form { display: grid; gap: 1.5rem 1.7rem; padding: 1.1rem .9rem 1.2rem; }
@media (min-width: 900px) {
  .p-form { grid-template-columns: minmax(0, 1fr) 15.5rem; align-items: start; }
}

.p-fences { display: flex; flex-direction: column; gap: 1.15rem; }

/* 围栏:相关字段围在一个带区名的框里,框线就是分组本身 */
.p-fence {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: 1.3rem 1.35rem;
  min-width: 0;
  padding: .55rem .9rem 1rem;
  border: 1px solid var(--rule);
  background: var(--paper);
}
.p-fence__name {
  flex: 1 0 100%;
  margin: 0 0 -.35rem;
  padding-bottom: .3rem;
  border-bottom: 1px solid var(--rule);
  font-family: var(--f-label);
  font-size: .8125rem;
  font-weight: 600;
  letter-spacing: .14em;
  color: var(--ink);
}
.p-fence__name i {
  font-family: var(--f-din);
  font-style: normal;
  font-weight: 400;
  font-size: .6875rem;
  letter-spacing: .2em;
  color: var(--rule);
}

/* --------------------------------------------------------------------------
   读数单元
   格宽不是网格给的,是量程给的:
   width = 位数 × 1ch(输入井字体 Consolas 的数字宽)+ 单位位 + 井内留白。
   所以「额定电压 0–1000 V」(4 位 + V)比「台数 1–99 台」(2 位 + 台)宽,
   两者本来就不该一样宽。改 --digits 或 --unit-w,格宽与刻度线一起变。
   -------------------------------------------------------------------------- */
.cell {
  --digits: 4;
  --unit-w: 1.15rem;
  flex: 0 0 auto;
  position: relative;
  width: calc(var(--digits) * 1ch + var(--unit-w) + .8rem + 2px);
  font: 400 1.25rem/1 Consolas, 'Cascadia Mono', 'Lucida Console', monospace;
}
.cell::after { content: ""; display: block; clear: both; }

/* 标注线:量名 + 量名基线上的一条细线 */
.cell__rail {
  display: flex;
  align-items: baseline;
  gap: .4rem;
  padding-bottom: .26rem;
  border-bottom: 1px solid var(--rule);
}
.cell__name {
  font-family: var(--f-label);
  font-size: .875rem;
  font-weight: 600;
  letter-spacing: .02em;
  line-height: 1.2;
  color: var(--ink);
  white-space: nowrap;
}
.cell__mark {
  margin-left: auto;
  font-family: var(--f-din);
  font-size: .6875rem;
  letter-spacing: .08em;
  color: var(--rule);
  white-space: nowrap;
}

/* 引线:从标注基线折进输入井左上角 —— 这条线是真的,不是装饰 */
.cell__lead {
  position: absolute;
  left: 0;
  top: -1.05rem;
  width: .5rem;
  height: 1.05rem;
  border-left: 1px solid var(--ink);
  border-bottom: 1px solid var(--ink);
}

/* 输入井:值 + 单位,单位前有一条分隔线 */
.cell__well {
  position: relative;
  display: flex;
  align-items: stretch;
  height: 2.45rem;
  margin-top: 1.05rem;
  border: 1px solid var(--ink);
  background: var(--plate);
}
.cell__in {
  flex: 1 1 auto;
  min-width: 0;
  padding: 0 .4rem;
  border: 0;
  background: transparent;
  font: 400 1.25rem/1 Consolas, 'Cascadia Mono', 'Lucida Console', monospace;
  color: var(--ink);
  text-align: right;          /* 数字靠单位对齐,像仪表读数 */
  font-variant-numeric: tabular-nums;
}
.cell__unit {
  flex: 0 0 var(--unit-w);
  display: flex;
  align-items: center;
  justify-content: center;
  border-left: 1px solid var(--rule);
  font: 400 .8125rem/1 'Bahnschrift', 'Noto Sans CJK SC', 'Microsoft YaHei UI', sans-serif;
  color: #3f4038;
}

/* 刻度:井下方一条带端点刻度的尺寸线,两端就是允许上下限 */
.cell__scale { display: flex; align-items: center; gap: .28rem; margin-top: .3rem; }
.cell__end { font-family: var(--f-num); font-size: .75rem; line-height: 1; color: #4a4b43; }
.cell__rule { position: relative; flex: 1 1 auto; height: 1px; background: var(--rule); }
.cell__rule::before,
.cell__rule::after {
  content: "";
  position: absolute;
  top: -3px;
  width: 1px;
  height: 7px;
  background: var(--rule);
}
.cell__rule::before { left: 0; }
.cell__rule::after  { right: 0; }
/* 中间刻度(量程中点)与指针(当前值在量程上的位置) */
.cell__grat { position: absolute; top: -2px; width: 1px; height: 5px; background: var(--rule); left: calc(var(--p, 0) * 100%); }
.cell__ptr {
  position: absolute;
  top: -5px;
  width: 2px;
  height: 11px;
  background: var(--ink);
  left: calc(var(--p, 0) * 100%);
  transform: translateX(-1px);
}

/* 判定章:合格是实心墨章,超差是朱红空章 */
.cell__stamp {
  display: none;
  float: right;
  clear: both;
  margin: .4rem 0 0;
  padding: .1rem .3rem .12rem;
  border: 1px solid var(--ink);
  font-family: var(--f-din);
  font-size: .6875rem;
  line-height: 1.2;
  letter-spacing: .1em;
}
.cell__stamp[data-on] { display: block; }
.cell__stamp[data-stamp="ok"][data-on]  { background: var(--ink); color: var(--plate); }
.cell__stamp[data-stamp="bad"][data-on] { border-color: var(--fault); color: var(--fault); }
/* 空着不是超差:点线框、不染红。三种判定章在灰度下也分得开:实心 / 实线 / 点线 */
.cell__stamp[data-stamp="miss"][data-on] { border-style: dashed; color: var(--ink); }

/* 状态:超差。只有出错的那一格变,不是六格一起红 */
.cell[data-state="bad"] .cell__well { border-color: var(--fault); box-shadow: inset 0 0 0 1px var(--fault); }
.cell[data-state="bad"] .cell__rail { border-bottom-color: var(--fault); }
.cell[data-state="bad"] .cell__lead { border-color: var(--fault); }
.cell[data-state="bad"] .cell__ptr  { background: var(--fault); top: -6px; height: 13px; }
.cell[data-state="bad"] .cell__name { color: var(--fault); }
.cell[data-side="high"] .cell__rule::after  { background: var(--fault); width: 2px; }
.cell[data-side="high"] .cell__end:last-child  { color: var(--fault); }
.cell[data-side="low"]  .cell__rule::before { background: var(--fault); width: 2px; }
.cell[data-side="low"]  .cell__end:first-child { color: var(--fault); }

/* 状态:未填。必填项空着 —— 井框点线,不染红,因为空不是「错」 */
.cell[data-state="miss"] .cell__well { border-style: dashed; }

/* 状态:焦点。焦点环画在井框上,不在输入框内部被裁掉 */
.cell__well:has(.cell__in:focus-visible) { outline: 2px solid var(--ink); outline-offset: 2px; }
.cell__well:has(.cell__in:focus-visible) .cell__in { outline: none; }

/* 状态:锁定。禁用不是变淡:斜线填充 + 一个「锁定」字样 + 一句原因 */
.cell--locked .cell__well {
  border-color: var(--rule);
  background:
    repeating-linear-gradient(45deg, rgba(27, 28, 25, .17) 0 1px, transparent 1px 5px),
    var(--plate);
}
.cell--locked .cell__rail { border-bottom-color: var(--rule); }
.cell--locked .cell__lead { border-color: var(--rule); }
.cell--locked .cell__mark { color: var(--ink); }
.cell--locked .cell__in { color: var(--ink); opacity: 1; -webkit-text-fill-color: var(--ink); text-align: left; padding-left: .45rem; }
.cell--locked .cell__in:disabled { cursor: not-allowed; }

/* 下拉:枚举本身就是「允许范围」,所以它不需要刻度线 */
.cell--pick .cell__well { background: var(--plate); }
.cell__in--pick { text-align: left; padding-left: .45rem; appearance: none; cursor: pointer; font-size: 1.05rem; }
.cell__caret {
  flex: 0 0 auto;
  align-self: center;
  width: 0; height: 0;
  margin-right: .5rem;
  border-left: 5px solid transparent;
  border-right: 5px solid transparent;
  border-top: 6px solid var(--ink);
}

/* 操作行 */
.p-actions { display: flex; flex-wrap: wrap; gap: .6rem; padding-top: .2rem; }
.p-btn {
  padding: .52rem .95rem;
  border: 1px solid var(--ink);
  background: var(--plate);
  color: var(--ink);
  font-family: var(--f-label);
  font-size: .8125rem;
  letter-spacing: .1em;
  cursor: pointer;
  box-shadow: inset 0 -2px 0 rgba(27, 28, 25, .18);
}
.p-btn:hover { background: #e3e0d5; }
.p-btn:active { box-shadow: inset 0 2px 0 rgba(27, 28, 25, .2); }
.p-btn--main { background: var(--ink); color: var(--plate); box-shadow: inset 0 -2px 0 rgba(0, 0, 0, .5); }
.p-btn--main:hover { background: #2c2e29; }
.p-btn:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }
.p-btn--main:focus-visible { outline: 3px solid var(--fault); outline-offset: 2px; }

/* --------------------------------------------------------------------------
   判定栏:错误指名道姓 —— 哪个字段、为什么不行、改成什么才行。
   每条都与字段用 aria-describedby 真实关联。
   -------------------------------------------------------------------------- */
.p-margin { border-top: 2px solid var(--ink); padding-top: .6rem; }

.p-margin__h {
  margin: 0 0 .55rem;
  font-family: var(--f-label);
  font-size: .8125rem;
  font-weight: 600;
  letter-spacing: .18em;
  color: var(--ink);
}

.p-verdict { margin: 0 0 .9rem; padding: .5rem .6rem .55rem; border: 1px solid var(--ink); background: var(--plate); }
.p-verdict__mark {
  display: block;
  margin-bottom: .25rem;
  font-family: var(--f-label);
  font-size: .75rem;
  font-weight: 600;
  letter-spacing: .16em;
  color: var(--ink);
}
.p-verdict__mark[data-bad="true"] { color: var(--fault); }
.p-verdict__text { display: block; font-family: var(--f-cjk); font-size: .8125rem; line-height: 1.6; }

.p-hold { margin: 0 0 .9rem; padding-top: .55rem; border-top: 1px solid var(--rule); }
.p-hold__h {
  margin: 0 0 .3rem;
  font-family: var(--f-label);
  font-size: .75rem;
  font-weight: 600;
  letter-spacing: .12em;
  color: var(--ink);
}
.p-hold p { margin: 0; font-family: var(--f-cjk); font-size: .8125rem; line-height: 1.6; color: #3f4038; }

.p-notes { display: flex; flex-direction: column; gap: .8rem; margin: 0; padding: 0; list-style: none; }
.p-note {
  position: relative;
  padding-left: .95rem;
  font-family: var(--f-cjk);
  font-size: .8125rem;
  line-height: 1.65;
  color: var(--ink);
}
.p-note[hidden] { display: none; }
.p-note::before {
  content: "";
  position: absolute;
  left: 0;
  top: .55rem;
  width: .38rem; height: .38rem;
  background: var(--fault);
}
.p-note b { color: var(--fault); font-weight: 700; }
.p-note i { font-family: var(--f-num); font-style: normal; font-variant-numeric: tabular-nums; }
.p-note--gen b { color: var(--fault); }

.p-margin__foot {
  margin: 1.1rem 0 0;
  padding-top: .5rem;
  border-top: 1px solid var(--rule);
  font-family: var(--f-cjk);
  font-size: .75rem;
  line-height: 1.6;
  color: #4a4b43;
}

/* 日志条:与 01 同构 */
.p-log {
  display: flex;
  align-items: baseline;
  gap: .8rem;
  padding: .5rem .9rem;
  border-top: 1px solid var(--ink);
  font-family: var(--f-num);
  font-size: .6875rem;
  letter-spacing: .02em;
  color: #3a3b34;
}
.p-log__t { color: var(--ink); }
.p-log__c { margin-left: auto; color: #5e5f57; }

/* 动效只在这里:病原版的浮动标签。static 与 reduce 下关掉 */
[data-static] .s-float { transition: none; }
@media (prefers-reduced-motion: reduce) {
  .s-float { transition: none; }
  .s-btn { transition: none; }
}

@media (max-width: 620px) {
  .v-slop, .v-fixed { padding-left: 1.1rem; padding-right: 1.1rem; }
  .v-slop { padding-top: 2rem; }
  .s-card { padding: 1.35rem; border-radius: 1.1rem; }
  .s-grid { grid-template-columns: minmax(0, 1fr); }
  .p-plate__rev { margin-left: 0; }
}