/* ============================================================
   OI伴学 · 首次使用引导（做题页新手导览）
   文件：public/css/onboarding.css
   配套：public/js/onboarding.js
   引用方式（由主 agent 在 index.html 统一添加）：
     <link rel="stylesheet" href="/css/onboarding.css">
   说明：
     - 所有类名均以 oi-onb- 为前缀，避免与现有样式冲突。
     - 颜色全部走 tokens.css 的 CSS 变量（--brand / --card 等），
       浅色 / 暗黑主题自动适配。
     - z-index 取 2500：高于页面常规内容（页面内最高约 1000+），
       低于站内确认弹窗 .cd-overlay（z-index:3000，见 style.css:911）。
       注意：草稿纸 overlay #sketchpad-overlay 为 10000，若引导过程中
       用户打开草稿纸，草稿纸会盖住引导层，属预期行为。
   ============================================================ */

/* —— 根容器：覆盖全屏，不拦截事件（事件由 mask 控制）—— */
.oi-onb-root {
  position: fixed;
  inset: 0;
  z-index: 2500; /* < .cd-overlay(3000)，高于普通页面内容 */
  font-family: var(--font-ui, 'PingFang SC', 'Microsoft YaHei', sans-serif);
  pointer-events: none;
}

/* —— 遮罩：拦截页面交互。有 spotlight 时自身透明（变暗由 spotlight 的
      box-shadow 完成）；无目标（居中卡片）时自身半透明变暗。—— */
.oi-onb-mask {
  position: absolute;
  inset: 0;
  pointer-events: auto;
  background: transparent;
  transition: background 0.2s ease;
}
.oi-onb-mask.oi-onb-mask--dim {
  background: rgba(15, 23, 42, 0.55);
}

/* —— 聚光灯镂空：利用超大 box-shadow 把目标以外的区域压暗 —— */
.oi-onb-spotlight {
  position: absolute;
  pointer-events: none;
  border-radius: var(--r-md, 12px);
  box-shadow: 0 0 0 9999px rgba(15, 23, 42, 0.55);
  outline: 2px solid var(--brand, #2563eb);
  outline-offset: 2px;
  transition: top 0.25s ease, left 0.25s ease,
              width 0.25s ease, height 0.25s ease;
}

/* —— 气泡卡片 —— */
.oi-onb-card {
  position: absolute;
  pointer-events: auto;
  width: min(360px, calc(100vw - 24px));
  background: var(--card, #ffffff);
  color: var(--text, #0f172a);
  border: 1px solid var(--border, #e2e8f0);
  border-radius: var(--r-lg, 16px);
  box-shadow: var(--shadow-lg, 0 12px 28px -6px rgba(15, 23, 42, 0.18));
  padding: var(--sp-5, 20px);
  box-sizing: border-box;
  transition: top 0.25s ease, left 0.25s ease;
}

/* 居中卡片（欢迎 / 完成步骤） */
.oi-onb-card.oi-onb-card--center {
  left: 50% !important;
  top: 50% !important;
  transform: translate(-50%, -50%);
  text-align: center;
}

.oi-onb-card-title {
  font-size: var(--fs-lg, 1.125rem);
  font-weight: 700;
  margin: 0 0 var(--sp-2, 8px);
  color: var(--text, #0f172a);
}

.oi-onb-card-body {
  font-size: var(--fs-base, 0.9375rem);
  line-height: 1.7;
  color: var(--text-secondary, #475569);
  margin: 0 0 var(--sp-4, 16px);
}

/* —— 步骤指示器（圆点 + 计数）—— */
.oi-onb-progress {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-bottom: var(--sp-3, 12px);
}
.oi-onb-card--center .oi-onb-progress { justify-content: center; }
.oi-onb-dot {
  width: 7px;
  height: 7px;
  border-radius: var(--r-pill, 999px);
  background: var(--border, #e2e8f0);
  transition: background 0.2s ease;
}
.oi-onb-dot.oi-onb-dot--active { background: var(--brand, #2563eb); }
.oi-onb-step-num {
  margin-left: auto;
  font-size: var(--fs-xs, 0.75rem);
  color: var(--text-tertiary, #64748b);
}

/* —— 按钮区 —— */
.oi-onb-actions {
  display: flex;
  align-items: center;
  gap: var(--sp-3, 12px);
}
.oi-onb-card--center .oi-onb-actions { justify-content: center; }

.oi-onb-btn {
  appearance: none;
  border: 1px solid var(--border, #e2e8f0);
  background: var(--card, #ffffff);
  color: var(--text-secondary, #475569);
  border-radius: var(--r-sm, 8px);
  padding: 9px 18px;
  font-size: var(--fs-base, 0.9375rem);
  font-family: inherit;
  cursor: pointer;
  min-height: 40px;
  transition: background 0.15s ease, border-color 0.15s ease;
}
.oi-onb-btn:hover { background: var(--bg-alt, #f1f5f9); }

.oi-onb-btn--primary {
  background: var(--brand, #2563eb);
  border-color: var(--brand, #2563eb);
  color: #ffffff;
  font-weight: 600;
}
.oi-onb-btn--primary:hover { background: var(--brand-dark, #1d4ed8); }

/* 「跳过」为弱化的文字按钮，靠右 */
.oi-onb-btn--skip {
  margin-left: auto;
  border: none;
  background: transparent;
  color: var(--text-tertiary, #64748b);
  padding: 9px 8px;
}
.oi-onb-btn--skip:hover {
  background: transparent;
  color: var(--text, #0f172a);
  text-decoration: underline;
}
.oi-onb-card--center .oi-onb-btn--skip { margin-left: 0; }

/* —— 手机端（max-width:767px）：气泡改为底部全宽卡片，大按钮 —— */
@media (max-width: 767px) {
  .oi-onb-card,
  .oi-onb-card.oi-onb-card--center {
    left: 0 !important;
    right: 0;
    top: auto !important;
    bottom: 0;
    transform: none;
    width: 100%;
    max-width: none;
    border-radius: var(--r-lg, 16px) var(--r-lg, 16px) 0 0;
    border-left: none;
    border-right: none;
    border-bottom: none;
    padding: var(--sp-5, 20px) var(--sp-4, 16px)
             calc(var(--sp-5, 20px) + env(safe-area-inset-bottom, 0px));
    text-align: left;
  }
  .oi-onb-card--center .oi-onb-progress { justify-content: flex-start; }
  .oi-onb-card--center .oi-onb-actions { justify-content: flex-start; }
  .oi-onb-btn {
    flex: 1;
    min-height: 46px; /* ≥44px 触控目标 */
    font-size: var(--fs-md, 1rem);
  }
  .oi-onb-btn--skip {
    flex: 0 0 auto;
    min-height: 46px;
  }
}

/* —— 降低动效偏好 —— */
@media (prefers-reduced-motion: reduce) {
  .oi-onb-spotlight,
  .oi-onb-card,
  .oi-onb-mask { transition: none; }
}