/* ============================================================================
 * inscribe.css —— 铭刻原语三模态（识别 / 配对 / 补全）
 * 依据：design/art/primitive-visual-language.md §10.1
 *   🔒 三种模态共用同一套「符文构件」（见 base.css .rune），
 *      差别只在【排布】，不在【外观】——这是「同一个动作的三种排布」的视觉承诺。
 *   🔒 候选每次随机排序（引擎侧 shuffle），正解无位置偏好。
 *   🔒 选错不标红，只黯淡。
 * ========================================================================== */

.insc {
  display: flex;
  flex-direction: column;
  min-height: calc(100vh - 150px);
  min-height: calc(100dvh - 150px);
}

/* ---------- 进度：本轮第 n / N 张 ---------- */
.insc-prog {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 10px 0 2px;
}
.insc-prog .track { flex: 1; height: 4px; }
.insc-prog .track > i { background: var(--accent); }
.insc-prog .n { font-size: 12px; color: var(--text-2); }

/* ---------- 题面 ---------- */
.insc-stem {
  margin: 18px 0 6px;
  font-size: 19px;
  line-height: 1.55;
  color: var(--text-1);
  word-break: break-word;
}
.insc-kicker {
  font-size: 12px;
  color: var(--text-2);
  letter-spacing: .04em;
}
.insc-body { flex: 1; }

/* ============================================================
 * 模态一 · 识别 recognize —— 候选纵向铺开，一列到底
 * ============================================================ */
.m-recognize {
  display: grid;
  gap: 10px;
  margin-top: 18px;
}
.m-recognize .rune {
  width: 100%;
  justify-content: flex-start;
  text-align: left;
  padding: 13px 16px;
  font-size: 17px;
}

/* ============================================================
 * 模态二 · 配对 match —— 左右两栏，先点左再点右
 * ============================================================ */
.m-match {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin-top: 18px;
}
.m-match .col { display: grid; gap: 10px; align-content: start; }
.m-match .rune { width: 100%; font-size: 16px; padding: 12px 10px; }
.m-match .col-head {
  font-size: 11px;
  color: var(--text-3);
  letter-spacing: .1em;
  text-align: center;
  padding-bottom: 2px;
}

/* ============================================================
 * 模态三 · 补全 complete —— 槽位行 + 候选池
 * ============================================================ */
.m-complete { margin-top: 18px; }

.slots {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  padding: 14px;
  border-radius: var(--r-md);
  background: var(--surface-2);
  margin-bottom: 16px;
  min-height: 72px;
  align-items: center;
}
.slot {
  min-width: var(--rune-min-w);
  min-height: var(--rune-min-h);
  border-radius: var(--r-md);
  border: 1.5px dashed var(--hairline);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  color: var(--text-3);
  background: transparent;
  transition: transform var(--dur-inter) var(--ease-enter),
              border-color var(--dur-inter) var(--ease-enter),
              background-color var(--dur-inter) var(--ease-enter);
}
/* 当前待填槽位：灵光实线，指明「下一笔落在这」 */
.slot[data-state="active"] {
  border-style: solid;
  border-color: var(--accent);
  color: var(--text-2);
}
/* 吸附反馈：150ms ease-enter + 单次 scale(1.03)，不做二次回弹 */
.slot[data-state="filled"] {
  border-style: solid;
  border-color: var(--ok);
  background: var(--ok-tint);
  color: var(--ok-text);
  font-weight: 600;
  animation: snapIn var(--dur-inter) var(--ease-enter) both;
}
@keyframes snapIn {
  from { transform: scale(1); }
  60%  { transform: scale(1.03); }
  to   { transform: scale(1); }
}
.slot-idx {
  font-size: 10px;
  color: var(--text-3);
  align-self: flex-start;
  margin: 4px 0 0 5px;
}

.pool {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}
.pool .rune { font-size: 16px; }

.insc-tools {
  display: flex;
  gap: 10px;
  align-items: center;
  margin-top: 14px;
}

/* ---------- 轻推演侧栏（be 动词：semantic_payload.light_derivation） ---------- */
/* 🔒 MVP 定位：不阻塞、不判定，只把「依主语定形」这条规则在补全时可见化。
 *    derive_lite 为真才渲染；其余 complete 卡完全不受影响。 */
.derive-lite {
  margin-top: 14px;
  border: 1px solid var(--border);
  border-left: 3px solid var(--ornament);
  border-radius: var(--r-sm);
  padding: 10px 12px;
  background: var(--surface);
}
.derive-lite .dl-head {
  font-size: 11px;
  letter-spacing: .1em;
  color: var(--ornament);
  font-family: var(--font-sutra);
  margin-bottom: 4px;
}
.derive-lite .dl-rule { font-size: 13px; color: var(--text-2); line-height: 1.5; }
.derive-lite .dl-binds {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 8px;
}
.dl-bind {
  font-size: 12px;
  padding: 3px 9px;
  border-radius: var(--r-pill);
  border: 1px solid var(--border);
  color: var(--text-2);
  transition: opacity var(--dur-micro) var(--ease-standard),
              border-color var(--dur-micro) var(--ease-standard),
              color var(--dur-micro) var(--ease-standard);
}
/* 当前槽位对应的绑定行高亮：只标「该看哪一条」，不给答案 */
.dl-bind[data-active="1"] { border-color: var(--accent); color: var(--text-1); font-weight: 600; }
.dl-bind[data-done="1"]   { border-color: var(--ok); color: var(--ok-text); }
.dl-bind .form-hidden     { color: var(--text-3); }

/* ---------- 底部操作条 ---------- */
.insc-foot {
  position: sticky;
  bottom: 0;
  margin: 18px calc(var(--gutter) * -1) 0;
  padding: 12px var(--gutter) calc(12px + env(safe-area-inset-bottom));
  background: color-mix(in srgb, var(--bg) 92%, transparent);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border-top: 1px solid var(--border);
  display: flex;
  gap: 10px;
  align-items: center;
}
.insc-foot .btn-primary { flex: 1; }
.insc-verdict {
  flex: 1;
  font-size: 13px;
  color: var(--text-2);
  min-height: 20px;
}
.insc-verdict[data-tone="ok"] { color: var(--ok-text); }