/* ============================================================
   引路：新手引导条
   ------------------------------------------------------------
   一个新号进来，屏幕上只有一段景、一个输入框、一排按钮。
   玩家不知道该先干什么，就只能自己乱试——这不是"探索"，是没人管。

   这条东西挂在正文顶上，只说**下一件事**，说完就走。
   七步走完自动消失，不留"引导进度"的痕迹。
   ============================================================ */

.guide {
  flex: none;
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 12px 18px 0;
  padding: 9px 10px 9px 13px;
  border: 1px solid rgba(217, 164, 65, 0.18);
  border-left: 2px solid var(--jin);
  border-radius: var(--r-sm);
  background: linear-gradient(90deg, rgba(217, 164, 65, 0.075), rgba(217, 164, 65, 0.012));
  animation: guide-in 0.3s var(--ease-out) both;
}

/* display:flex 会盖掉 hidden 的默认 display:none，得自己补回来 */
.guide[hidden] {
  display: none;
}

@keyframes guide-in {
  from {
    opacity: 0;
    transform: translateY(-4px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

/* 第几步。写"3/7"而不是三个点：点数不清，数字一眼知道还剩多少 */
.guide__idx {
  flex: none;
  white-space: nowrap;
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: 0.02em;
  color: var(--t-3);
  user-select: none;
}

.guide__idx b {
  font-size: 12.5px;
  font-weight: 600;
  color: var(--jin);
}

.guide__body {
  flex: 1;
  min-width: 0;
}

.guide__title {
  font-family: var(--serif);
  font-size: 13px;
  letter-spacing: 0.1em;
  color: var(--t-0);
  line-height: 1.3;
}

.guide__hint {
  margin-top: 2px;
  font-size: 11.5px;
  line-height: 1.45;
  color: var(--t-2);
}

/* 按钮上写的是"做什么"，不是"确定"。引路的价值在于点下去真的会发生 */
.guide__go {
  flex: none;
  padding: 6px 12px;
  font-size: 12px;
  letter-spacing: 0.06em;
  white-space: nowrap;
  color: var(--jin);
  border: 1px solid var(--jin-dim);
  border-radius: var(--r-sm);
  background: rgba(217, 164, 65, 0.08);
  transition: all 0.16s var(--ease);
}

.guide__go:active {
  transform: translateY(1px);
  background: rgba(217, 164, 65, 0.2);
}

.guide__go[disabled] {
  opacity: 0.45;
  pointer-events: none;
}

/* 收起。只收起这一步——下一步是新的 id，会重新出来。
   一次「×」把整条引路关到天荒地老，那不如一开始就别给。 */
.guide__close {
  flex: none;
  width: 22px;
  height: 22px;
  display: grid;
  place-items: center;
  font-size: 14px;
  line-height: 1;
  color: var(--t-3);
  border-radius: var(--r-sm);
  transition: color 0.16s var(--ease);
}

.guide__close:active {
  color: var(--t-1);
}

@media (max-width: 820px) {
  .guide {
    margin: 8px 10px 0;
    padding: 8px 8px 8px 11px;
    gap: 8px;
  }
  .guide__title {
    font-size: 12.5px;
  }
  .guide__hint {
    font-size: 11px;
    /* 手机上两行封顶。引路是"提一句"，不是"讲一课" */
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }
  .guide__go {
    padding: 8px 11px;
    font-size: 12px;
  }
}