/* 开窗仪式（SPEC-together §3.4）：刻格、钥匙卡、镜头。与首页同一种安静：不用卡片阴影、渐变按钮与图标。 */

/* 镜头：实时的窗、快照与叠加层叠在同一个盒子里，按 4:5 等比放置 */
.kr-camera { position: relative; overflow: hidden; contain: paint; }
.kr-camera > svg.stage, .kr-camera > .kr-shot, .kr-camera > .kr-overlay, .kr-overlay > .kr-layer {
  position: absolute; inset: 0; width: 100%; height: 100%; display: block;
}
.kr-camera > .kr-shot { object-fit: contain; will-change: transform; pointer-events: none; opacity: .01; }
.kr-camera.kr-shooting > .kr-shot { opacity: 1; }
.kr-camera > .kr-overlay { pointer-events: none; overflow: visible; }
.kr-overlay > .kr-layer { overflow: visible; }
/* 叠加层的颜色：变量设在容器上，由各层继承（与窗的角色色同名） */
.kr-overlay .frame { fill: var(--c-frame); }
.kr-overlay .ink-in { fill: var(--c-ink-in); }
.kr-overlay .ink-in-line { fill: none; stroke: var(--c-ink-in); }
.kr-overlay .kr-brass { fill: var(--kr-brass); }
.kr-overlay .kr-brass-shade { fill: var(--kr-brass-shade); }
.kr-overlay .kr-ink-line { stroke: var(--kr-ink); }
.kr-overlay .kr-ink { fill: var(--kr-ink); }
.kr-overlay .kr-carve { fill: none; stroke: var(--kr-carve); stroke-linecap: butt; stroke-linejoin: miter; stroke-miterlimit: 3; }
.kr-overlay .kr-g { transform-box: view-box; transform-origin: 0 0; }
/* 实时的窗自成一层：叠加层上的钥匙、锁、刻号怎么变，都不必重画底下那幅复杂的风景 */
.kr-camera > svg.stage { will-change: opacity; }
.kr-camera.kr-shooting > svg.stage { visibility: hidden; }
/* 快照与实时的窗内容相同：平时以 1% 透明度叠在上面（先画好），拍摄中才完全露出 */

/* 刻格：像木框上刻出的四个凹格；字是圆点，不显示数字 */
.kr-line { display: block; margin: 0 0 .9rem; font-size: 1.05rem; letter-spacing: .06em; }
.kr-quiet { color: var(--ink-muted); }
.kr-cells-wrap { position: relative; display: inline-flex; align-items: center; gap: .9rem; }
.kr-input {
  position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; border: 0; padding: 0; margin: 0;
  font-size: 16px; /* 16px 以上，iOS 聚焦时不缩放页面 */ caret-color: transparent; color: transparent; background: none;
}
.kr-cells { display: flex; gap: .7rem; cursor: text; }
.kr-cell {
  position: relative; width: 2.6rem; height: 3.1rem; display: grid; place-items: center;
  border: 1px solid var(--ink-muted);
  box-shadow: inset 0 2px 0 rgba(0, 0, 0, .18);   /* 刻进去的上沿：一条平涂的暗线，不是投影 */
  font-family: var(--font-serif); font-size: 1.35rem; font-style: normal; letter-spacing: 0;
}
.kr-cell i { font-style: normal; }
.kr-cell::after {
  content: ""; position: absolute; width: .62rem; height: .62rem; border-radius: 50%; background: var(--ink);
  opacity: 0; transform: translateY(-.45rem); transition: opacity .18s ease-out, transform .26s cubic-bezier(.3,.6,.35,1);
}
.kr-cell.is-filled::after { opacity: 1; transform: translateY(0); }
.kr-cell.is-shown::after { opacity: 0; }   /* 点了"显示"：圆点让位给数字 */
.kr-cell.is-current { border-color: var(--ink); }
.kr-cell.is-current::before {
  content: ""; position: absolute; bottom: .55rem; width: 1rem; height: 1px; background: var(--ink);
  animation: kr-blink 1.1s steps(2, start) infinite;
}
@keyframes kr-blink { to { visibility: hidden; } }
.kr-eye {
  position: relative; z-index: 1;   /* 透明的输入框铺满整排，"显示"要浮在它上面才点得到 */
  min-height: 44px; padding: 0 .3rem; border: 0; background: none; color: var(--ink-muted); cursor: pointer;
  font-family: var(--font-sans); font-size: .72rem; letter-spacing: .08em; text-decoration: underline; text-underline-offset: .35em;
}
.kr-note { min-height: 1.6em; margin: .8rem 0 0; color: var(--ink-muted); font-size: .84rem; letter-spacing: .04em; }
.kr-input:focus-visible + .kr-cells .kr-cell { border-color: var(--ink); }

.kr-visually-hidden {
  position: absolute !important; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* 钥匙卡：从下方滑上来，像一张递过来的票 */
.kr-sheet {
  position: fixed; inset: auto 0 0 0; z-index: 40; display: flex; flex-direction: column; align-items: center;
  padding: 1.2rem 1rem calc(1rem + env(safe-area-inset-bottom));
  background: color-mix(in srgb, var(--wall) 88%, #000 12%);
}
.kr-card { margin: 0; }
.kr-card img {
  display: block; width: auto; height: auto; max-width: min(23rem, 86vw);
  max-height: calc(100dvh - 9rem); max-height: calc(100vh - 9rem);
  -webkit-touch-callout: default; user-select: none;
}
.kr-sheet-actions { display: flex; align-items: center; gap: 1.6rem; margin-top: .9rem; }
.kr-act {
  min-height: 44px; display: inline-flex; align-items: center; padding: 0 .2rem; border: 0; background: none;
  color: var(--ink); font: inherit; font-size: .92rem; letter-spacing: .08em; cursor: pointer;
  text-decoration: underline; text-underline-offset: .4em; text-decoration-thickness: 1px;
}
.kr-close {
  min-width: 44px; min-height: 44px; border: 0; background: none; color: var(--ink-muted); font-size: 1.4rem; cursor: pointer;
}
.kr-sheet .kr-note { margin: 0; }

@media (prefers-reduced-motion: reduce) {
  .kr-cell::after { transition: none; }
  .kr-cell.is-current::before { animation: none; }
}