/* ==================== 起名页空状态：表单 + 科普（qiming-intro） ====================
   仅在 /qiming.html 没有起名信息时渲染的模块。表单本体复用 styles.css 的
   .field / .gender / .agree / .name-submit 等类，滚轮选择器复用 birth-picker.css，
   这里只补空状态特有的排版：表单卡宽度、流程步骤、FAQ 折叠、知识入口。
   已出报告的 ready 态不含以下任何类名，故本文件对报告页完全惰性。 */

/* 空状态整体比报告页窄，避免单列表单被拉得过宽 */
.qi-main{max-width:960px}

/* ---------- 表单卡 ---------- */
.qi-form-card{padding:28px 30px 30px}
.qi-form-lead{
  margin:14px 0 0;
  font-size:15px;line-height:1.9;color:var(--ink-muted);
}
/* .name-form 在 styles.css 里是 margin-top:12px，这里与题签行留出更多呼吸 */
.qi-form{margin-top:18px}
/* 报告页把 .qr-restart 放大到 20px，空状态作次要返回链接收回常规字号 */
.qi-form-card .qr-restart{font-size:14px}

/* ---------- 通用分节 ---------- */
.qi-section{margin-top:44px}
/* styles.css 的 .section-head 默认下间距 34px，此处紧凑一档 */
.qi-section .section-head{margin-bottom:26px}
.qi-section .section-title{font-size:clamp(22px,2.6vw,30px)}
.qi-section .section-lead{font-size:14.5px}

/* ---------- 起名流程 ---------- */
/* .qr-panel 自带朱底与内距，这里只接管列表本身 */
.qi-steps{margin-top:44px}
.qi-step-list{
  display:grid;grid-template-columns:repeat(2,minmax(0,1fr));
  gap:20px 30px;margin:0;padding:0;list-style:none;
}
.qi-step{display:flex;align-items:flex-start;gap:14px}
.qi-step-ord{
  flex:none;display:grid;place-items:center;
  width:34px;height:34px;border-radius:4px;
  background:rgba(183,62,62,.08);
  border:1px solid rgba(183,62,62,.22);
  color:var(--zhuyin);
  font:700 17px/1 var(--font-serif);font-style:normal;
}
.qi-step-body{min-width:0}
.qi-step-body strong{
  display:block;
  font:700 17px/1.5 var(--font-serif);color:var(--chengqing);letter-spacing:.04em;
}
.qi-step-body p{
  margin:5px 0 0;
  font-size:14px;line-height:1.9;color:var(--ink-muted);
}

/* ---------- FAQ ---------- */
.qi-faq{display:grid;gap:12px;margin:0;padding:0;list-style:none}
.qi-faq-item{
  border:1px solid var(--line);border-radius:8px;
  background:var(--paper);overflow:hidden;
}
.qi-faq-q{
  display:flex;align-items:center;justify-content:space-between;gap:16px;
  width:100%;padding:17px 20px;text-align:left;
  font:600 16px/1.6 var(--font-serif);color:var(--chengqing);
  transition:background .18s ease;
}
.qi-faq-q:hover{background:var(--xuanbai-dark)}
.qi-faq-q .icon{
  width:18px;height:18px;flex:none;color:var(--gutongjin);
  transition:transform .26s var(--ease-out);
}
.qi-faq-q[aria-expanded="true"] .icon{transform:rotate(180deg)}
.qi-faq-a{
  margin:0;padding:15px 20px 18px;
  border-top:1px dashed var(--line);
  font-size:14.5px;line-height:1.95;color:var(--ink-muted);text-align:justify;
}

/* ---------- 起名知识 / 大师入口 ---------- */
.qi-more-links{
  display:grid;grid-template-columns:repeat(2,minmax(0,1fr));
  gap:16px;margin-top:34px;
}
.qi-more-link{
  display:flex;align-items:center;gap:15px;
  padding:20px 22px;border-radius:8px;
  border:1px solid var(--line);background:var(--paper);
  transition:transform .2s var(--ease-out),border-color .2s ease,box-shadow .2s ease;
}
.qi-more-link:hover{
  transform:translateY(-2px);
  border-color:var(--gutongjin);box-shadow:var(--shadow-sm);
}
.qi-more-link>.qi-more-icon{
  width:46px;height:46px;flex:none;border-radius:50%;
  display:grid;place-items:center;
  color:#8C6A34;background:linear-gradient(150deg,#F0E2C8,#DFC79B);
}
.qi-more-link>.qi-more-icon .icon{width:22px;height:22px}
.qi-more-copy{display:grid;gap:3px;min-width:0;flex:1}
.qi-more-link strong{
  font:700 16px/1.5 var(--font-serif);color:var(--chengqing);letter-spacing:.04em;
}
.qi-more-link small{
  font-family:var(--font-sans);font-size:12.5px;line-height:1.7;color:var(--ink-muted);
}
.qi-more-arrow{
  flex:none;display:inline-grid;place-items:center;color:var(--gutongjin);
  transition:transform .2s var(--ease-out);
}
.qi-more-arrow .icon{width:18px;height:18px}
.qi-more-link:hover .qi-more-arrow{transform:translateX(3px)}

/* ---------- 响应式 ---------- */
@media(max-width:900px){
  .qi-step-list{grid-template-columns:1fr;gap:16px}
}
@media(max-width:700px){
  .qi-form-card{padding:22px 18px 24px}
  .qi-section{margin-top:34px}
  .qi-steps{margin-top:34px}
  .qi-form-lead{font-size:14px}
  .qi-faq-q{padding:15px 16px;font-size:15px}
  .qi-faq-a{padding:13px 16px 16px;font-size:14px}
  .qi-more-links{grid-template-columns:1fr;gap:12px;margin-top:26px}
  .qi-more-link{padding:16px 18px}
}