/* ==========================================================================
   标本 01 — 操作控件 / 铁路行车控制台
   体裁:硬质键帽、围栏、护盖。字面:Bahnschrift SemiCondensed + Consolas。
   外壳不注入;本文件只负责本标本内部。
   ========================================================================== */

html { background: #c9c9c3; }   /* 落地色必须画在最外层,否则 iframe 会露出白底 */
body { margin: 0; }             /* 标本页外边距必须为 0,页边留白由外壳承担 */

/* 落地色必须随版本走:固定成控制台的灰,会在病原版下方露出一条不属于它的灰带 */
html[data-mode="slop"] { background: #f4f3f8; }

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

/* 模式切换:两版都在 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 #17181a; outline-offset: 2px; }

.spn button { 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-row { display: flex; flex-wrap: wrap; gap: .65rem; margin-bottom: .75rem; }

.s-btn {
  border: 0;
  border-radius: 999px;
  padding: .68rem 1.35rem;
  font-size: .9375rem;
  font-weight: 600;
  cursor: pointer;
  transition: transform .2s ease, box-shadow .2s ease, opacity .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); box-shadow: 0 14px 26px -12px rgba(90, 80, 220, .8); }

.s-btn--ghost {
  color: #4b4266;
  background: #f0eef8;
  box-shadow: inset 0 0 0 1px #e2def2;
}

.s-btn--danger {
  color: #fff;
  background: linear-gradient(96deg, #ff6b6b 0%, #ff9a6b 100%);
  box-shadow: 0 10px 22px -12px rgba(230, 90, 90, .7);
}

.s-btn:disabled { opacity: .55; cursor: default; }

.s-btn.is-loading { position: relative; color: rgba(255,255,255,.82); }
.s-btn.is-loading::after {
  content: "";
  display: inline-block;
  width: .75rem; height: .75rem;
  margin-left: .45rem;
  vertical-align: -1px;
  border: 2px solid rgba(255,255,255,.45);
  border-top-color: #fff;
  border-radius: 50%;
  animation: s-spin .8s linear infinite;
}
@keyframes s-spin { to { transform: rotate(360deg); } }

.s-meter {
  display: grid;
  grid-template-columns: auto minmax(0,1fr) auto;
  align-items: center;
  gap: .7rem;
  margin-top: 1.75rem;
  font-size: .8125rem;
  color: #6f6a85;
}
.s-meter__track { height: .5rem; border-radius: 999px; background: #eae7f4; overflow: hidden; }
.s-meter__fill  { display: block; width: 92%; height: 100%; border-radius: 999px;
                  background: linear-gradient(90deg, #7c5cf0, #2f74c8); }
.s-meter__val   { font-weight: 700; color: #4b4266; }

/* ==========================================================================
   修正 —— 铁路行车控制台
   ========================================================================== */

.v-fixed {
  padding: 2.2rem 2rem 3rem;
  background:
    repeating-linear-gradient(0deg, rgba(23,24,26,.045) 0 1px, transparent 1px 5px),
    #c9c9c3;
}

.p-housing {
  max-width: 46rem;
  border: 1px solid #17181a;
  background: #dcdcd6;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.55);
}

/* 铭牌:机箱上的压印条 */
.p-strap {
  display: flex;
  align-items: baseline;
  gap: .85rem;
  padding: .62rem .9rem;
  border-bottom: 1px solid #17181a;
  background: #17181a;
  color: #dcdcd6;
}
.p-strap__id {
  font-family: Consolas, monospace;
  font-size: .75rem;
  letter-spacing: .08em;
}
.p-strap__name {
  font-size: .9375rem;
  font-weight: 600;
  letter-spacing: .06em;
}
.p-strap__note {
  margin-left: auto;
  font-size: .6875rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: #9d9d95;
}

/* 分区:围栏 */
.p-zones { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); }
@media (min-width: 780px) { .p-zones { grid-template-columns: repeat(4, minmax(0,1fr)); } }

.p-zone {
  padding: .9rem 1rem 1.1rem;
  border-right: 1px solid #a8a8a0;
  border-bottom: 1px solid #a8a8a0;
}
.p-zone--wide { grid-column: span 2; }
.p-zone:last-child { border-right: 0; }

.p-zone__h {
  display: flex;
  align-items: center;
  gap: .5rem;
  margin: 0 0 .85rem;
  font-size: .6875rem;
  font-weight: 600;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: #4b4b46;
}
.p-zone__h i { flex: 1; height: 1px; background: #a8a8a0; }
.p-zone--danger .p-zone__h { color: #8f1f14; }
.p-zone--danger .p-zone__h i { background: #8f1f14; }

.p-zone__foot {
  margin: .7rem 0 0;
  font-size: .6875rem;
  letter-spacing: .03em;
  color: #4b4b46;
}

/* 键帽:圈高、斜面、键隙 */
.p-keys { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: .5rem; }

.key {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  gap: .12rem;
  min-height: 3rem;
  padding: .5rem .6rem;
  cursor: pointer;
  color: #17181a;
  background: #cfcfc8;
  border: 1px solid #8f8f88;
  box-shadow: inset 0 -2px 0 #9a9a93, inset 0 1px 0 rgba(255,255,255,.7);
  transition: background .14s linear, transform .06s linear, box-shadow .06s linear;
}
.key:hover { background: #d6d6cf; }
.key:active { transform: translateY(1px); box-shadow: inset 0 0 0 rgba(0,0,0,0); }
.key:focus-visible { outline: 2px solid #17181a; outline-offset: 2px; }

.key__face { font-size: .875rem; font-weight: 600; letter-spacing: .02em; }
.key__en   {
  font-family: Consolas, monospace;
  font-size: .6875rem;
  letter-spacing: .12em;
  color: #3f3f39;
}

.key--tall { grid-row: span 2; min-height: 6.5rem; }

.key--primary {
  background: #2c4f3f;
  border-color: #1c3529;
  box-shadow: inset 0 -2px 0 #163023, inset 0 1px 0 rgba(255,255,255,.16);
  color: #eef2ee;
}
.key--primary:hover { background: #335945; }
.key--primary .key__en { color: #b6ccbe; }

/* 机械压不下去:不是变灰,是剖面变浅、去键面 */
.key:disabled,
.key[aria-disabled="true"] {
  cursor: not-allowed;
  color: #6a6a64;
  background: #bfbfb8;
  border-color: #a4a49d;
  box-shadow: inset 0 0 0 1px #b6b6af;
  transform: none;
}
.key:disabled .key__en { color: #8a8a84; }
.key:disabled .key__face { opacity: .62; }

/* 危险键:护盖之下 */
.guard { position: relative; display: grid; }

.guard__latch {
  display: flex;
  align-items: center;
  gap: .5rem;
  padding: .42rem .6rem;
  cursor: pointer;
  font-size: .75rem;
  letter-spacing: .06em;
  background: #b8412f;
  color: #f4e6e2;
  border: 1px solid #7d2a1d;
  border-bottom: 0;
  user-select: none;
}
.guard__grip { width: .55rem; height: .55rem; border: 1px solid currentColor; }
.guard__box:checked + .guard__latch { background: #8f3324; }
.guard__box:checked + .guard__latch .guard__text { text-decoration: line-through; }
.guard__box:focus-visible + .guard__latch { outline: 2px solid #17181a; outline-offset: 2px; }

.guard .key--stop {
  background: #8f1f14;
  border-color: #5e130c;
  color: #f7ece9;
  box-shadow: inset 0 -2px 0 #4d0f09, inset 0 1px 0 rgba(255,255,255,.14);
}
.guard .key--stop:hover { background: #a02517; }
.guard .key--stop .key__en { color: #e2b7ae; }

.guard__box:not(:checked) ~ .key--stop { filter: saturate(.35) brightness(1.12); }

/* 切换开关 */
.p-switches { display: flex; flex-wrap: wrap; gap: .9rem; align-items: center; }

.sw {
  display: flex;
  align-items: center;
  gap: .5rem;
  cursor: pointer;
  font-size: .8125rem;
}
.sw input { position: absolute; opacity: 0; width: 0; height: 0; }
.sw__track {
  position: relative;
  width: 2.4rem; height: 1.05rem;
  border: 1px solid #8f8f88;
  background: #bfbfb8;
  transition: background .16s linear;
}
.sw__knob {
  position: absolute;
  top: 1px; left: 1px;
  width: .8rem; height: calc(1.05rem - 4px);
  background: #f2f2ee;
  border: 1px solid #6f6f69;
  transition: transform .16s linear;
}
.sw input:checked + .sw__track { background: #2c4f3f; }
.sw input:checked + .sw__track .sw__knob { transform: translateX(1.25rem); }
.sw input:focus-visible + .sw__track { outline: 2px solid #17181a; outline-offset: 2px; }
.sw__state {
  font-family: Consolas, monospace;
  font-size: .6875rem;
  letter-spacing: .08em;
  color: #4b4b46;
  min-width: 2.6rem;      /* 断开/接通 都是两个字,给够宽度免得被裁 */
  display: inline-block;
}

/* 仪表读数:等宽数字 */
.p-reg { margin: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(7.5rem,1fr)); gap: .8rem 1rem; }
.p-reg__cell { border-top: 1px solid #a8a8a0; padding-top: .4rem; }
.p-reg dt { font-size: .6875rem; letter-spacing: .06em; color: #4b4b46; }
.p-reg__val {
  margin: .15rem 0 0;
  font-family: Consolas, monospace;
  font-variant-numeric: tabular-nums;
  font-size: 1.05rem;
  letter-spacing: .01em;
}
.p-reg__val b { font-weight: 400; font-size: 1.35rem; }
.p-reg__val span { font-size: .6875rem; margin-left: .25rem; color: #4b4b46; }
.p-reg__val--word { font-family: 'Bahnschrift', sans-serif; font-size: .9375rem; letter-spacing: .1em; }

/* 日志:只在现实中存在的约束 */
.p-log {
  display: flex;
  align-items: baseline;
  gap: .8rem;
  padding: .55rem .9rem;
  border-top: 1px solid #17181a;
  font-family: Consolas, monospace;
  font-size: .6875rem;
  letter-spacing: .02em;
  color: #3a3a35;
}
.p-log__t { color: #17181a; }
.p-log__c { margin-left: auto; color: #6f6f69; }

/* 巡检中:唯一的动效,单一缓出,不动缩放 */
.key.is-running .key__face::after {
  content: "";
  display: inline-block;
  width: .9rem; height: .5rem;
  margin-left: .4rem;
  vertical-align: 1px;
  background:
    linear-gradient(90deg, #2c4f3f 0 25%, transparent 25% 35%, #2c4f3f 35% 60%, transparent 60% 70%, #2c4f3f 70% 100%);
  background-size: 2.6rem 100%;
  animation: p-poll 1.4s steps(4, end) infinite;
}
@keyframes p-poll { from { background-position: 0 0; } to { background-position: -2.6rem 0; } }

@media (prefers-reduced-motion: reduce) {
  .key.is-running .key__face::after { animation: none; }
}
[data-static] .key.is-running .key__face::after { animation: none; }
[data-static] .s-btn.is-loading::after { animation: none; }

@media (max-width: 620px) {
  .v-slop, .v-fixed { padding-left: 1.1rem; padding-right: 1.1rem; }
  .key--tall { grid-row: auto; min-height: 3rem; }
}