/* ============================================================
 * Code Slots 样式 —— 对齐 reactbits.dev/micro/code-slots 原版
 *
 * 原版是「深色槽位 + 强调色填充层」的层次结构：
 *   .zx-cs-slot   槽位底（--cs-slot）
 *   .zx-cs-fill   强调色层，scale 从中心长出（--cs-accent）
 *   .zx-cs-digit  数字，浮在 fill 之上（--cs-digit）
 * 高 = size × 1.18（原版 --cs-height），不是正方形。
 *
 * 配色全部走 CSS 变量，各站覆盖即可。
 * ============================================================ */

.zx-cs {
  /* 深色原版默认值 */
  --cs-accent: #f5f5f5;
  --cs-ink: #f5f5f5;
  --cs-slot: #27272a;
  --cs-digit: #18181b;
  --cs-danger: #ff3b30;
  --cs-danger-soft: 20%;

  --cs-size: 44px;
  /* 高度按原版比例 size × 1.18 联动：各站只改 --cs-size 就够，
     不会漏掉 height 变成另一种比例（之前三站都踩过这个坑）。
     calc 依赖浏览器支持，现代浏览器均可；不支持时各站已显式覆盖。 */
  --cs-height: calc(var(--cs-size) * 1.18);
  --cs-gap: 8px;
  --cs-radius: 12px;
  --cs-font: calc(var(--cs-size) * .5);

  position: relative;
  display: block;
  /* 格位行居中。行是 inline-flex（行内级盒），margin:0 auto 对它无效 ——
     auto 外边距只对块级盒或 flex/grid 子项生效，行内盒会算成 0
     （2026-10-15 实测：加了 margin:0 auto 读回来仍是 margin-left:0px）。
     所以由父级用 text-align 居中这行行内盒。 */
  text-align: center;
}

/* 格位行 */
.zx-cs-row {
  position: relative;
  display: inline-flex;
  gap: var(--cs-gap);
  cursor: text;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
  transition: opacity 200ms ease;
}

.zx-cs-row[data-status="error"] .zx-cs-slot {
  background: color-mix(in srgb, var(--cs-danger) var(--cs-danger-soft), var(--cs-slot));
}
.zx-cs-row[data-status="error"] .zx-cs-fill {
  background: var(--cs-danger);
}

/* 成功态：accent 铺满整行，数字淡出，只留一个勾 */
.zx-cs-row[data-status="success"] .zx-cs-slot {
  background: transparent;
}
.zx-cs-row[data-status="success"] .zx-cs-fill {
  background: var(--cs-accent);
}

/* wash：accent 色块，从中间往两侧铺开（clip-path 动画） */
.zx-cs-wash {
  position: absolute;
  inset: 0;
  z-index: 3;
  display: grid;
  place-items: center;
  border-radius: var(--cs-radius);
  background: var(--cs-accent);
  color: var(--cs-digit);
  opacity: 0;
  pointer-events: none;
  will-change: clip-path;
}

.zx-cs-check {
  /* z-index 要显式给：wash 是 grid 容器，正常流里 check 会在其后，
     但 z-index: auto 的元素在 stacking context 里排不到带 z-index 的
     wash 前面（实测 check 的 z-index 读到 auto）。 */
  position: relative;
  z-index: 4;
  display: grid;
  place-items: center;
  opacity: 0;
  will-change: transform, opacity;
}

/* 成功时输入层彻底让位，避免键盘还开着 */
.zx-cs-row[data-status="success"] .zx-cs-input {
  pointer-events: none;
}

/* 真实 input：透明覆盖（移动端键盘 / 粘贴 / 短信自动填充） */
.zx-cs-input {
  position: absolute;
  inset: 0;
  z-index: 4;
  margin: 0;
  padding: 0;
  border: 0;
  outline: 0;
  background: transparent;
  color: transparent;
  caret-color: transparent;
  font-size: 16px;
  opacity: 0;
  cursor: inherit;
  -webkit-appearance: none;
  appearance: none;
}

/* 单个槽位 */
.zx-cs-slot {
  position: relative;
  width: var(--cs-size);
  height: var(--cs-height);
  border-radius: var(--cs-radius);
  overflow: hidden;
  background: var(--cs-slot);
  transition: background-color 200ms ease;
  user-select: none;
  -webkit-user-select: none;
}

/* 强调色填充层：scale 从中心弹出 */
.zx-cs-fill {
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: var(--cs-accent);
  transform-origin: center;
  transform: scale(0);
  transition: background-color 200ms ease;
}

@media (hover: hover) and (pointer: fine) {
  .zx-cs-row[data-status="idle"]:hover .zx-cs-slot:not([data-active]) {
    background: color-mix(in srgb, var(--cs-ink) 4%, var(--cs-slot));
  }
}

/* 当前该填的那一格 */
.zx-cs-slot[data-active] {
  background: color-mix(in srgb, var(--cs-ink) 8%, var(--cs-slot));
}

/* 数字 */
.zx-cs-digit {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: grid;
  place-items: center;
  color: var(--cs-digit);
  font-family: inherit;
  font-size: var(--cs-font);
  font-weight: 600;
  line-height: 1;
  font-variant-numeric: tabular-nums;
  opacity: 0;
}

/* 光标：跨格滑动 + 闪烁 */
.zx-cs-caret {
  position: absolute;
  z-index: 3;
  top: 25%;
  left: calc(var(--cs-size) / 2 - 0.75px);
  width: 1.5px;
  height: 50%;
  opacity: 0;
  pointer-events: none;
}

.zx-cs-caret[data-show] {
  opacity: 1;
}

.zx-cs-caret-line {
  display: block;
  width: 100%;
  height: 100%;
  background: var(--cs-ink);
  animation: zx-cs-blink 1s linear infinite;
}

@keyframes zx-cs-blink {
  0%, 49.9% { opacity: 1; }
  50%, 100% { opacity: 0; }
}

/* 提示行：格式说明 / 错误原因。预留高度避免出现时顶动布局 */
.zx-cs-hint {
  margin-top: 8px;
  min-height: 18px;
  font-size: 12px;
  line-height: 1.5;
  text-align: center;
  color: #94a3b8;
}

.zx-cs-hint.is-error {
  color: var(--cs-danger);
}

/* 窄屏：整体缩小，保证 6 格加间距不溢出 */
@media (max-width: 360px) {
  .zx-cs {
    --cs-size: 38px;
    --cs-height: 45px;
    --cs-gap: 6px;
    --cs-radius: 10px;
    --cs-font: 19px;
  }
}

@media (prefers-reduced-motion: reduce) {
  /* 只保留不透明度变化，去掉所有位移与缩放 */
  .zx-cs-fill { transition: none; }
  .zx-cs-digit { transform: none !important; transition: opacity 150ms ease; }
  .zx-cs-check { transform: none !important; transition: opacity 150ms ease; }
  .zx-cs-wash { transition: none; }
  .zx-cs-caret-line { animation: none; }
  .zx-cs-row { transition: none; }
  .zx-cs-slot { transition: none; }
}