/**
 * 《未来工坊》宜家式说明书排版 UI
 * 颗粒化展示「步骤1、步骤2」与 Checklist 自检清单
 * 引入本 CSS 后，使用对应 class 即可
 *
 * HTML 示例：
 * <div class="fw-instruction">
 *   <h2 class="fw-instruction__title">项目任务书</h2>
 *   <ol class="fw-instruction__steps">
 *     <li class="fw-instruction__step">
 *       <span class="fw-instruction__step-num">步骤1</span>
 *       <div class="fw-instruction__step-body">
 *         <p class="fw-instruction__step-desc">操作说明...</p>
 *         <ul class="fw-instruction__checklist">
 *           <li class="fw-instruction__check-item"><span class="fw-instruction__check-box">□</span> 自检标准一</li>
 *         </ul>
 *       </div>
 *     </li>
 *   </ol>
 * </div>
 */

/* ---- 容器 ---- */
.fw-instruction {
  font-family: "Noto Sans SC", "Microsoft YaHei", sans-serif;
  max-width: 52rem;
  margin: 0 auto;
  padding: 1rem;
  color: #222;
  line-height: 1.6;
}

.fw-instruction__title {
  font-size: 1.5rem;
  font-weight: 700;
  margin-bottom: 1.25rem;
  padding-bottom: 0.5rem;
  border-bottom: 3px solid #333;
  letter-spacing: 0.02em;
}

/* ---- 步骤列表 ---- */
.fw-instruction__steps {
  list-style: none;
  padding: 0;
  margin: 0;
  counter-reset: fw-step;
}

.fw-instruction__step {
  counter-increment: fw-step;
  margin-bottom: 1.5rem;
  padding: 1rem 1rem 1rem 0;
  border-left: 4px solid #0066cc;
  background: #f8fafc;
  padding-left: 1rem;
  border-radius: 0 6px 6px 0;
}

.fw-instruction__step-num {
  display: inline-block;
  font-weight: 700;
  font-size: 1.1rem;
  color: #0066cc;
  margin-bottom: 0.35rem;
}

.fw-instruction__step-num::before {
  content: "步骤" counter(fw-step) "：";
}

.fw-instruction__step-body {
  margin-left: 0;
}

.fw-instruction__step-desc {
  margin: 0 0 0.75rem 0;
  font-size: 1rem;
}

.fw-instruction__step-desc strong {
  color: #004080;
}

/* ---- 自检清单（非0即100）---- */
.fw-instruction__checklist {
  list-style: none;
  padding: 0;
  margin: 0.5rem 0 0 0;
  font-size: 0.95rem;
  color: #333;
}

.fw-instruction__check-item {
  display: flex;
  align-items: flex-start;
  gap: 0.5rem;
  margin-bottom: 0.4rem;
  padding: 0.35rem 0;
  border-bottom: 1px dashed #ddd;
}

.fw-instruction__check-item:last-child {
  border-bottom: none;
}

.fw-instruction__check-box {
  flex-shrink: 0;
  display: inline-block;
  width: 1.25em;
  height: 1.25em;
  border: 2px solid #333;
  border-radius: 3px;
  text-align: center;
  line-height: 1.1;
  font-size: 0.9em;
}

/* 勾选态（可配合 JS 切换 .is-checked）*/
.fw-instruction__check-item.is-checked .fw-instruction__check-box {
  background: #0066cc;
  border-color: #0066cc;
  color: #fff;
}

.fw-instruction__check-item.is-checked .fw-instruction__check-box::after {
  content: "✓";
}

/* ---- 五步法阶段标签 ---- */
.fw-instruction__phase {
  display: inline-block;
  padding: 0.25rem 0.6rem;
  font-size: 0.85rem;
  font-weight: 600;
  border-radius: 4px;
  margin-right: 0.5rem;
}

.fw-instruction__phase--see   { background: #e3f2fd; color: #1565c0; }
.fw-instruction__phase--try   { background: #fff3e0; color: #e65100; }
.fw-instruction__phase--learn { background: #e8f5e9; color: #2e7d32; }
.fw-instruction__phase--do    { background: #f3e5f5; color: #6a1b9a; }
.fw-instruction__phase--review{ background: #fce4ec; color: #c2185b; }

/* ---- 投屏大字号模式（可选）---- */
@media (min-width: 1200px) {
  .fw-instruction.fw-instruction--projector {
    max-width: 72rem;
    font-size: 1.15rem;
  }

  .fw-instruction.fw-instruction--projector .fw-instruction__title {
    font-size: 1.75rem;
  }

  .fw-instruction.fw-instruction--projector .fw-instruction__step-desc,
  .fw-instruction.fw-instruction--projector .fw-instruction__check-item {
    font-size: 1.1rem;
  }
}