/* =============================================================================
   Task 59 · 引导「结算卡」+ 报告明细行逐条完成 + 审计加载轻提示
   -----------------------------------------------------------------------------
   层级：结算卡 = --z-tip + 1（必须压过引导气泡，不能反过来被气泡/遮罩压住）
   ========================================================================== */

/* ---------------- 结算卡（居中轻卡 + 半透明遮罩） ---------------- */
.crt-settle-root {
  position: fixed;
  inset: 0;
  z-index: calc(var(--z-tip) + 1);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-4);
  box-sizing: border-box;
}

.crt-settle-mask {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, .28);
  pointer-events: auto;
}

.crt-settle-card {
  position: relative;
  box-sizing: border-box;
  width: min(360px, calc(100vw - 32px));
  max-height: calc(100vh - 32px);
  overflow: auto;
  padding: var(--space-5) var(--space-5) var(--space-4);
  background: var(--color-bg-surface);
  color: var(--color-text-primary);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-xl);
  font-family: var(--font-sans);
  animation: crt-settle-in .22s ease-out both;
}

@keyframes crt-settle-in {
  from { opacity: 0; transform: translateY(6px) scale(.99); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}

.crt-settle-title {
  font-size: var(--text-lg, 17px);
  font-weight: 650;
  line-height: 1.35;
  letter-spacing: .01em;
  margin-bottom: var(--space-3);
}

.crt-settle-lines {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  margin-bottom: var(--space-3);
}

.crt-settle-line {
  display: flex;
  align-items: flex-start;
  gap: var(--space-2);
  font-size: var(--text-sm, 13px);
  line-height: 1.55;
  color: var(--color-text-secondary);
}

.crt-settle-dot {
  flex: 0 0 auto;
  width: 5px;
  height: 5px;
  margin-top: 7px;
  border-radius: 50%;
  background: var(--color-primary);
  opacity: .55;
}

.crt-settle-hint {
  font-size: var(--text-xs, 12px);
  line-height: 1.5;
  color: var(--color-text-tertiary);
  margin-bottom: var(--space-4);
}

.crt-settle-go {
  display: block;
  width: 100%;
  box-sizing: border-box;
  padding: 9px 14px;
  border: 0;
  border-radius: var(--radius-lg, 10px);
  background: var(--color-primary);
  color: var(--color-text-inverse);
  font-family: inherit;
  font-size: var(--text-sm, 13px);
  font-weight: 600;
  cursor: pointer;
  transition: background .15s ease;
}
.crt-settle-go:hover { background: var(--color-primary-hover); }
.crt-settle-go:active { background: var(--color-primary-active); }
.crt-settle-go:focus-visible {
  outline: none;
  box-shadow: var(--shadow-focus);
}

/* ---------------- 第 6 步：报告明细行「逐条完成」 ----------------
   只切状态类，不改数据、不改文案（文本仍是卡片自己的真实步骤名/状态）。 */
.step-row.is-todo { opacity: .45; }
.step-row.is-doing { opacity: 1; }
.step-row.is-doing .t-step-status {
  animation: crt-row-pulse 1s ease-in-out infinite;
}
.step-row.is-done { opacity: 1; }
.step-row.is-done .sn::before {
  content: '✓';
  display: inline-block;
  margin-right: 5px;
  color: var(--color-success-text);
  font-weight: 700;
}
.step-row.is-doing .sn::before {
  content: '';
  display: inline-block;
  width: 6px;
  height: 6px;
  margin-right: 5px;
  border-radius: 50%;
  background: var(--color-primary);
  vertical-align: middle;
  animation: crt-row-dot 1s ease-in-out infinite;
}

@keyframes crt-row-pulse { 0%, 100% { opacity: .55; } 50% { opacity: 1; } }
@keyframes crt-row-dot { 0%, 100% { transform: scale(.7); opacity: .5; } 50% { transform: scale(1); opacity: 1; } }

/* ---------------- 审计页「正在读取审计数据…」轻提示 ----------------
   居中偏下、不吃事件；第 13 步 enter 就绪后由气泡接管时自动移除。 */
.crt-audit-loading {
  position: fixed;
  inset: 0;
  z-index: calc(var(--z-tip) - 1);   /* 低于引导气泡，高于页面内容 */
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-4);
  pointer-events: none;              /* 不挡操作 */
  animation: crt-audit-fade .18s ease-out both;
}

.crt-audit-loading::before {
  content: '';
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, .28);
}

.crt-audit-card {
  position: relative;
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  max-width: min(420px, calc(100vw - 32px));
  padding: var(--space-5);
  background: var(--color-bg-surface);
  color: var(--color-text-primary);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-xl);
  font-family: var(--font-sans);
}

.crt-audit-title {
  font-size: var(--text-base, 15px);
  font-weight: 600;
  line-height: 1.4;
}

.crt-audit-sub {
  margin-top: 4px;
  font-size: var(--text-sm, 13px);
  color: var(--color-text-secondary);
  line-height: 1.5;
}

@keyframes crt-audit-fade {
  from { opacity: 0; }
  to   { opacity: 1; }
}

@keyframes crt-audit-in {
  from { opacity: 0; transform: translate(-50%, 4px); }
  to   { opacity: 1; transform: translate(-50%, 0); }
}

.crt-audit-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--color-primary);
  animation: crt-row-dot 1s ease-in-out infinite;
}

@media (prefers-reduced-motion: reduce) {
  .crt-settle-card,
  .crt-audit-loading,
  .step-row.is-doing .sn::before,
  .step-row.is-doing .t-step-status { animation: none; }
}