/* Kole UI Mobile · Steps 样式 — 对齐移动端规格 §15
   步骤条：纯展示；状态不只靠颜色（进行中加粗 + 已完成用勾选字符）；
   步骤过多时横向可滚动。 */

.kole-m-steps {
  --kole-m-steps-dot-size: 24px;
  display: flex;
  align-items: flex-start;
  gap: 0;
  margin: 0;
  padding: var(--kole-space-16) var(--kole-m-gutter);
  background: var(--kole-color-card-bg);
  font-family: var(--kole-font-family);
  list-style: none;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

.kole-m-steps__item {
  position: relative;
  flex: 1 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--kole-space-8);
  min-width: 72px;
  color: var(--kole-color-text-secondary);
  font-size: var(--kole-m-font-size-label);
  line-height: 1.3;
  text-align: center;
}

.kole-m-steps__dot {
  box-sizing: border-box;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--kole-m-steps-dot-size);
  height: var(--kole-m-steps-dot-size);
  border: 1px solid var(--kole-color-border);
  border-radius: 50%;
  background: var(--kole-color-card-bg);
  color: var(--kole-color-text-secondary);
  font-size: var(--kole-m-font-size-caption);
  line-height: 1;
}

.kole-m-steps__label {
  max-width: 100%;
  overflow-wrap: anywhere;
}

/* 连接线：由每项的 ::after 画到下一项（最后一项不画） */
.kole-m-steps__item:not(:last-child)::after {
  content: '';
  position: absolute;
  top: calc(var(--kole-m-steps-dot-size) / 2);
  inset-inline-start: calc(50% + var(--kole-m-steps-dot-size) / 2 + var(--kole-space-4));
  width: calc(100% - var(--kole-m-steps-dot-size) - var(--kole-space-8));
  height: 1px;
  background: var(--kole-color-border);
}

/* 变体 status=process：进行中（品牌色 + 加粗） */
.kole-m-steps__item--process { color: var(--kole-color-brand); font-weight: 500; }

.kole-m-steps__item--process .kole-m-steps__dot {
  border-color: var(--kole-color-brand);
  background: var(--kole-color-brand);
  color: var(--kole-color-text-inverse);
}

/* 变体 status=finish：已完成（品牌色 + 勾选） */
.kole-m-steps__item--finish { color: var(--kole-color-text-body); }

.kole-m-steps__item--finish .kole-m-steps__dot {
  border-color: var(--kole-color-brand);
  color: var(--kole-color-brand);
}

.kole-m-steps__item--finish:not(:last-child)::after { background: var(--kole-color-brand); }

/* 变体 status=error：错误（错误色 + 感叹号） */
.kole-m-steps__item--error { color: var(--kole-color-error); }

.kole-m-steps__item--error .kole-m-steps__dot {
  border-color: var(--kole-color-error);
  color: var(--kole-color-error);
}

/* 变体 direction=vertical：纵向排列，连接线改为竖线 */
.kole-m-steps--vertical {
  flex-direction: column;
  gap: var(--kole-space-16);
  overflow-x: visible;
}

.kole-m-steps--vertical .kole-m-steps__item {
  flex-direction: row;
  align-items: flex-start;
  justify-content: flex-start;
  width: 100%;
  min-width: 0;
  text-align: start;
}

.kole-m-steps--vertical .kole-m-steps__item:not(:last-child)::after {
  top: calc(var(--kole-m-steps-dot-size) + var(--kole-space-4));
  inset-inline-start: calc(var(--kole-m-steps-dot-size) / 2);
  width: 1px;
  height: calc(100% - var(--kole-m-steps-dot-size));
}

.kole-m-steps__content { min-width: 0; }