/* seal.css —— 03 授权（权限图示的绳逐档伸缩、盖印动画 stamp 关键帧、印痕环、对话框下沉、「完全放开」）与 04 会话日志（分支、联动）的交互样式。
   负责人：seal+journal 负责人。静态 / 无 JS 终态与几何在 tether.css「03 授权」「04 会话」，这里不改那边的坐标。
   .seal.is-live / .journal.is-live 由 seal.js / journal.js 初始化成功后加上：模块没跑起来时，页面停在静态终态。
   减弱动效：tether.css 全局关掉 animation / transition；盖印的 120ms 淡入走 Web Animations（seal.js）。 */

/* ── 03 权限图示的绳：每帧 8px、24ms 一帧，共 --steps 帧（seal.js 按 |Δ| / 8 写入），每一帧的宽度都是 8 的整数倍 ── */
.rl-fig.is-anim .rl-rope,
.rl-fig.is-anim .rl-reach { transition: width calc(var(--steps) * 24ms) steps(var(--steps), end); }
.rl-fig.is-anim .rl-end { transition: left calc(var(--steps) * 24ms) steps(var(--steps), end); }
/* 「完全放开」：有 JS 时绳长 = 图示宽度向上取整到 8 的倍数，伸出图示右缘被裁掉，读作「不再系住」。
   绳端结不拆而是藏起来：收短时它在图示外，跟着绳端一帧帧滑回来。 */
.seal.is-live .rl-fig[data-len="open"] .rl-rope,
.seal.is-live .rl-fig[data-len="open"] .rl-reach { width: var(--rl); }
.seal.is-live .rl-fig[data-len="open"] .rl-end { display: block; visibility: hidden; }

/* ── 03 对话框按钮：JRPG 指令列，聚焦的那一项左侧出现小手（按钮列左边留 16px 给它） ── */
.dlg-btns { column-gap: 16px; padding-left: 16px; }
@media (max-width: 379px) { .dlg-btns { column-gap: 12px; } }   /* 360：「批准这一次」「拒绝」「无人值守」和印槽排在一行（16 + 86 + 12 + 50 + 12 + 56 = 232 ≤ 234） */
.dlg-btns > button { position: relative; }
.dlg-btns > button:focus-visible::before {
  content: ""; position: absolute; left: -15px; top: calc(50% - 5px); width: 13px; height: 10px; pointer-events: none;
  background: url("/assets/ui/hand.svg") 0 0 / 13px 10px no-repeat; image-rendering: pixelated;
  animation: hd-cursor-bob 1.2s steps(1, end) infinite;
}

/* ── 03 「完全放开」：从不询问，也就不弹卡 —— 卡的位置只剩一个空凹槽和那句说明 ── */
.seal.is-live .dlg[data-rope="open"],
.seal.is-live .dlg[data-rope="open"]:hover,
.seal.is-live .dlg[data-rope="open"]:focus-within {
  border-image: none; padding: 12px 16px;
  background: var(--c-sunken); box-shadow: inset 0 0 0 1px var(--c-slot-edge), var(--slot-shadow);
}
.seal.is-live .dlg[data-rope="open"] .dlg-body { margin-top: 0; color: var(--c-text2); }

/* ── 03 盖印：330ms。S2-24 在 24×24 盒里，transform-origin 12px 12px，整数 3× → 2× → 1×（72 / 48 / 24px）。
   0ms 3×（.35，上移 2px）· 40ms 2×（.7，上移 1px）· 80ms 1×（下沉 1px，对话框同时下沉 1px 40ms）· 120ms 归位；
   印痕环 30 / 36 / 42 依次在 90 / 170 / 250ms 出现（.55 / .35 / .15，一次只亮一圈），330ms 全部收起。
   盖印过程中 data-state 仍是 idle：用 .is-stamping 让印提前显示（(0,5,0) 比 tether.css 按状态隐藏的 (0,4,0) 更具体，不用 !important）。 */
@keyframes stamp {
  0%      { transform: scale(3); opacity: .35; translate: 0 -2px; }
  33.333% { transform: scale(2); opacity: .7;  translate: 0 -1px; }
  66.667% { transform: scale(1); opacity: 1;   translate: 0 1px; }
  100%    { transform: none;     opacity: 1;   translate: 0 0; }
}
@keyframes dlg-sink { 0% { translate: 0 0; } 66.667% { translate: 0 1px; } 100% { translate: 0 0; } }
@keyframes ring-a { 0% { opacity: 0; } 27.273% { opacity: .55; } 51.515% { opacity: 0; } 100% { opacity: 0; } }
@keyframes ring-b { 0% { opacity: 0; } 51.515% { opacity: .35; } 75.758% { opacity: 0; } 100% { opacity: 0; } }
@keyframes ring-c { 0% { opacity: 0; } 75.758% { opacity: .15; } 100% { opacity: 0; } }

.dlg.is-stamping[data-state] .seal-stamp[data-for],
.dlg.is-fading[data-state] .seal-stamp[data-for] { display: block; }
.dlg.is-stamping { animation: dlg-sink 120ms steps(1, end) both; }
.dlg.is-stamping .seal-stamp { animation: stamp 120ms steps(1, end) both; }
.dlg.is-stamping .seal-slot .ring { display: block; opacity: 0; animation: 330ms steps(1, end) both; }
.dlg.is-stamping .seal-slot .r30 { animation-name: ring-a; }
.dlg.is-stamping .seal-slot .r36 { animation-name: ring-b; }
.dlg.is-stamping .seal-slot .r42 { animation-name: ring-c; }

/* ── 04 会话日志：分支 ─────────────────────────────────────────────────────
   --br-gap 两个新结的间距；--br-drop 竖绳长度（桌面的标签挂在结下方，journal.js 会把竖绳加长到最低一行事件类型下方 12px，
   经过本结自己的标签时从字后面穿过，那一段不画）。
   分支画在 #jr-branch 里（整数 left / top 由 journal.js 写），结的按钮层盖在分支上面，竖绳的上端藏在选中结下面。 */
.jr { --br-gap: 56px; --br-drop: 24px; }
@media (max-width: 1023px) { .jr { --br-gap: 32px; --br-drop: 16px; } }
.journal.is-live .jr-knots { z-index: 1; }
.jr-branch { position: absolute; inset: 0; pointer-events: none; }
.jr-branch > * { position: absolute; }
.jr-br-lab { white-space: nowrap; color: var(--c-text1); }