/* =====================================================================
   qingya-flow.css —— 体况辨识 / 香灸调理 两页的「清雅香灸」视觉层
   2026-11-13 unslop polish mode（方向已与用户确认）
   ---------------------------------------------------------------------
   适用范围：只在 <body class="qy-flow"> 的两页生效
     screening.html（体况辨识） / booking.html（香灸调理）

   🔴 与四屏的关键差别（别照搬 qingya.css 的隐藏规则）：
      四屏是「静态展示层」，可以 body.qy .content > :not(.qy-view){display:none}；
      这两页是**真实交互页** —— 问卷分步/禁忌/选项、预约服务/门店/日期/
      时段/表单全部由既有脚本渲染在原有 DOM 上，一个节点都不能藏。
      尤其 screening.html 的 #quizStep 被 JS appendChild 进 #nav（topbar），
      隐藏 topbar 会让「第几步 / 进度条」直接消失。
      ⇒ 本文件**只覆盖视觉属性**（底色 / 描边 / 字体 / 字距 / 圆角 / 色阶），
        不改 DOM、不改脚本、不改内容与分区顺序、不改功能。

   🔴 顶栏与底栏的取舍：
      · 顶栏保留 sticky（进度条要跟着吸顶），视觉降级为宣纸底 + hairline；
        页面内容顶部另加一块静态渐变矮头图 .qy-flow-hero（与主页 qy-hero-min 同源）。
      · 底栏保留 #bottombar：setBottomBar() 会用它摆问卷/预约操作按钮，
        renderTabbar() 会用它摆三项导航，两种形态都要能用；本文件把两种
        形态都清雅化，并把三项导航的「金色短横线」换成主页的圆点指示器。
      · 话筒 FAB 跟随四屏口径隐藏（用户已确认）。

   字体：与 qingya.css 一致，2026-11-13 晚回退 V2 口径（宋体 / 标题 600 /
   宽字距 / 三档文字色）。**正文仍保持 16px** —— 问卷题干、选项、输入是
   会员要逐字读的主链内容，polish mode 不牺牲可读性，字号不作为风格手段。
   视觉统一靠字体族、字重、字距、色阶与 hairline，不靠把字缩小。
   ===================================================================== */

/* ---------- ① 纸面与头图 ---------- */
body.qy-flow{background:var(--qy-paper);color:var(--qy-ink);font-family:var(--qy-serif);
  -webkit-font-smoothing:antialiased}
body.qy-flow .app{background:var(--qy-paper);box-shadow:none}
body.qy-flow .content{background:var(--qy-paper);padding:0 24px 96px;overflow-x:hidden}

.qy-flow-hero{position:relative;height:140px;margin:0 -24px 20px;padding:0 24px;
  background:linear-gradient(150deg,#DFE1D2 0%,#B9C2A9 48%,#68775D 100%);
  color:#FDFCF6;overflow:hidden;text-shadow:0 1px 2px rgba(45,55,40,.28)}
.qy-flow-hero .qy-flow-brand{position:absolute;left:24px;top:20px;
  font-size:15px;letter-spacing:.42em;font-weight:400;color:rgba(255,255,255,.98)}
.qy-flow-hero .qy-flow-en{position:absolute;left:24px;top:44px;
  font:8.5px/1 Georgia,serif;letter-spacing:.30em;color:rgba(255,255,255,.90)}
.qy-flow-hero .qy-flow-title{position:absolute;left:24px;bottom:28px;
  font-size:20px;letter-spacing:.16em;font-weight:400;color:#FFFDF6;
  text-shadow:0 1px 3px rgba(45,55,40,.36)}
.qy-flow-hero .qy-flow-sub{position:absolute;left:24px;bottom:10px;
  font-size:10px;letter-spacing:.08em;color:rgba(255,255,255,.92)}
.qy-flow-hero .qy-flow-rule{position:absolute;left:24px;bottom:60px;
  width:24px;height:1px;background:rgba(255,255,255,.72)}

/* ---------- ② 顶栏：保留功能，只把深绿实心降级为宣纸细线 ---------- */
body.qy-flow .topbar{background:rgba(248,247,242,.96);color:var(--qy-ink);
  border-bottom:1px solid var(--qy-line);box-shadow:none;
  backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px)}
body.qy-flow .topbar .accentbar{display:none}
body.qy-flow .topbar .brand,body.qy-flow .topbar .bn,
body.qy-flow .topbar a,body.qy-flow .topbar button{color:var(--qy-ink)}
/* 页面内联 <style> 里有 #nav .brand（ID 权重），这里带上 #nav 才压得住 */
body.qy-flow #nav .brand{font-size:15px;letter-spacing:.14em;font-weight:600}
body.qy-flow #nav .brand .logo{width:28px;height:28px;border-radius:4px;
  background:#40503C;color:#FDFCF6;border:0;font-size:15px;letter-spacing:0}
body.qy-flow .nav .who{background:transparent;border:1px solid var(--qy-line2);
  color:var(--qy-ink2);border-radius:4px;font-weight:400;font-size:10px;letter-spacing:.06em}
body.qy-flow .nav .nav-big,body.qy-flow .nav .nav-family,
body.qy-flow .nav .nav-logout,body.qy-flow .nav .back{
  background:transparent;border:1px solid var(--qy-line2);color:var(--qy-ink2);border-radius:4px}
body.qy-flow .nav .nav-big[aria-pressed="true"]{background:#40503C;border-color:#40503C;color:#FDFCF6}
/* 问卷进度块（被 JS 搬进 #nav）：去掉深绿条，改细线 + 宋体小字 */
body.qy-flow .topbar .step{margin:0;padding:0 24px 12px;background:transparent}
body.qy-flow .topbar .step .label{font-size:11px;letter-spacing:.10em;
  color:var(--qy-mute);font-weight:400}
body.qy-flow .topbar .progress{height:2px;background:var(--qy-line);border-radius:0}
body.qy-flow .topbar .progress i{background:var(--qy-gold)}

/* ---------- ③ 分区标题：粗竖线 → 细金线，700 黑字 → 600 宋体宽字距 ---------- */
body.qy-flow .content .section{margin:20px 0 12px;gap:8px}
body.qy-flow #quizArea .section{margin-bottom:12px}
body.qy-flow .content .section .bar{width:1px;height:14px;border-radius:0;
  background:var(--qy-gold);flex:none}
body.qy-flow .content .section h2{font-size:15px;font-weight:600;
  letter-spacing:.14em;color:var(--qy-ink)}
body.qy-flow .content .section .tip{font-size:10px;letter-spacing:.02em;
  background:transparent;color:var(--qy-mute);padding:0;border-radius:0;line-height:1.6}

/* ---------- ④ 卡片与选项：金线双层封边 → hairline 白卡 ---------- */
body.qy-flow .content .card,
body.qy-flow .content .panel,
body.qy-flow .content .qcard,
body.qy-flow .content .svc-card,
body.qy-flow .content .room-block,
body.qy-flow .content .store-head,
body.qy-flow .content .ci-row,
body.qy-flow .content .dchip,
body.qy-flow .content .slot,
body.qy-flow .content .opt,
body.qy-flow .content .pick-row,
body.qy-flow .content .info-row,
body.qy-flow .content .field input,
body.qy-flow .content .field textarea,
body.qy-flow .content input,
body.qy-flow .content textarea{
  background:var(--qy-card);border:1px solid var(--qy-line);border-radius:4px;
  box-shadow:none;color:var(--qy-ink)}
body.qy-flow .content .card::after,
body.qy-flow .content .panel::after{display:none}
body.qy-flow .content .card,body.qy-flow .content .qcard{padding:16px;margin-bottom:12px}
body.qy-flow .content .card-title,body.qy-flow .content .qcard h3,
body.qy-flow .content .panel h3{color:var(--qy-ink);font-weight:600;letter-spacing:.10em}
body.qy-flow .content .card-title::before{display:none}
body.qy-flow .content .card ul li::before{color:var(--qy-gold)}

/* 题干 / 出处：正文 16px 不缩，只换字体族、字重、字距与色阶 */
body.qy-flow .content .qcard .q{font-family:var(--qy-serif);font-size:16px;
  font-weight:600;letter-spacing:.04em;line-height:1.7;color:var(--qy-ink)}
body.qy-flow .content .qcard .q .num{font-size:12px;font-weight:400;
  color:var(--qy-gold);margin-right:8px;letter-spacing:.06em}
body.qy-flow .content .qcard .q-hint{font-size:13px;line-height:1.8;
  color:var(--qy-ink2);letter-spacing:.02em}
body.qy-flow .content .qcard .q-src{font-size:11px;color:var(--qy-mute);
  border-top:1px solid var(--qy-line);letter-spacing:.02em;line-height:1.7}
body.qy-flow .content .opt{font-family:var(--qy-serif);font-size:16px;
  letter-spacing:.06em;transition:background-color 150ms var(--qy-ease),
  border-color 150ms var(--qy-ease),color 150ms var(--qy-ease)}
body.qy-flow .content .opt .radio{border-color:var(--qy-line2)}
body.qy-flow .content .opt.selected{background:#F2F3EB;border-color:#68775D;
  color:var(--qy-ink);font-weight:600}
body.qy-flow .content .opt.selected .radio{border-color:#68775D}
body.qy-flow .content .opt.selected .radio::after{background:#68775D}
body.qy-flow .content .opt.yes-selected{background:#FBF1EF;border-color:#B4776B;color:#8C4438}
body.qy-flow .content .opt.yes-selected .radio{border-color:#B4776B}
body.qy-flow .content .opt.yes-selected .radio::after{background:#B4776B}
/* 禁忌卡：保留功能红痕，颜色降到同一世界的低饱和朱色 */
body.qy-flow .content .qcard.contra-hit{border-color:#D9A79E;background:#FBF3F1}
body.qy-flow .content .qcard.contra-hit .q,
body.qy-flow .content .qcard.contra-hit .q .num{color:#9E5348}
body.qy-flow .content .contra-note{border-top:1px solid var(--qy-line);
  color:#9E5348;font-weight:600;letter-spacing:.04em}

/* 服务卡：去掉浅青装饰色块，图标回到文字色 */
body.qy-flow .content .svc-card .ic{background:transparent;color:var(--qy-ink2)}
body.qy-flow .content .svc-card .nm{font-weight:600;letter-spacing:.10em;color:var(--qy-ink)}
body.qy-flow .content .svc-card .go{font-size:11px;letter-spacing:.06em;color:var(--qy-mute)}
body.qy-flow .content .svc-card.on{border-color:#68775D;background:#F2F3EB}
body.qy-flow .content .sh-name{font-weight:600;letter-spacing:.08em;color:var(--qy-ink)}
body.qy-flow .content .sh-sub,body.qy-flow .content .sh-caret,
body.qy-flow .content .ci-sub,body.qy-flow .content .qy-flow-meta{
  font-size:11px;letter-spacing:.02em;color:var(--qy-mute)}
body.qy-flow .content .dchip,body.qy-flow .content .slot,
body.qy-flow .content .ci-row{font-family:var(--qy-serif);letter-spacing:.04em}
body.qy-flow .content .dchip.on,body.qy-flow .content .slot.on,
body.qy-flow .content .ci-row.on{border-color:#68775D;background:#F2F3EB;color:var(--qy-ink)}
body.qy-flow .content .st-badge{background:transparent;border:1px solid var(--qy-line2);
  color:var(--qy-ink2);border-radius:4px;font-weight:400}

/* ---------- ⑤ 提示 / 表单 / 免责 ---------- */
body.qy-flow .content .alert{border:1px solid var(--qy-line);border-radius:4px;
  border-left:1px solid var(--qy-line);font-family:var(--qy-serif);
  font-size:13px;line-height:1.8;letter-spacing:.02em;color:var(--qy-ink2);
  background:var(--qy-card)}
body.qy-flow .content .alert strong{font-size:13px;letter-spacing:.06em;color:var(--qy-ink)}
body.qy-flow .content .alert.info{border-color:var(--qy-line);background:#F4F5EE}
body.qy-flow .content .alert.danger{border-color:#E2C4BD;background:#FBF3F1;color:#9E5348}
body.qy-flow .content .alert.warn{border-color:#E3D8BC;background:#FAF6EA;color:#8A713A}
body.qy-flow .content .empty{color:var(--qy-mute);font-size:12px;letter-spacing:.06em}
body.qy-flow .content .disclaimer{border:1px solid var(--qy-line);border-radius:4px;
  color:var(--qy-mute);font-size:10px;line-height:1.75;letter-spacing:.02em;
  background:transparent}

/* ---------- ⑥ 按钮：金色实心 → 墨绿实色 / 细线次按钮 ---------- */
body.qy-flow .btn{font-family:var(--qy-serif);letter-spacing:.10em;font-weight:600;
  border-radius:4px;transition:background-color 150ms var(--qy-ease),
  color 150ms var(--qy-ease),border-color 150ms var(--qy-ease)}
body.qy-flow .btn-primary,body.qy-flow .btn.primary{background:#4C5A47;
  color:#FFFDF6;border:1px solid #4C5A47;box-shadow:none}
body.qy-flow .btn-primary:active,body.qy-flow .btn.primary:active{
  background:#3C4839;color:#FFFDF6}
body.qy-flow .btn-ghost,body.qy-flow .btn.secondary,body.qy-flow .btn.ghost{
  background:transparent;color:var(--qy-ink);border:1px solid var(--qy-line2)}
body.qy-flow .btn:disabled,body.qy-flow .btn.disabled{background:#E6E4DB;
  border-color:#E6E4DB;color:var(--qy-mute)}

/* ---------- ⑦ 底栏：两种形态都要能用 ---------- */
/* ⚠️ 不能写死 height:64px —— setBottomBar() 摆的是 padding:12px 的 .btn-sm，
   固定高度会把按钮文字挤出可视区（首轮截图实测「下一步」被裁掉半行）。
   改用 min-height + 上下 padding，让两种形态都由内容撑开。 */
body.qy-flow .bottombar{background:rgba(248,247,242,.96);
  border-top:1px solid var(--qy-line);min-height:64px;height:auto;
  padding:12px 16px calc(12px + env(safe-area-inset-bottom));
  backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px)}
body.qy-flow .bottombar.as-tabs{padding:8px 16px calc(8px + env(safe-area-inset-bottom))}
/* 三项导航：主页的圆点指示器（app.js 的 svg 仍隐藏，别删 icon 字段） */
body.qy-flow .tabbar button{display:flex;flex-direction:column;align-items:center;
  justify-content:center;gap:6px;font-family:var(--qy-serif);
  font-size:10.5px;letter-spacing:.10em;font-weight:400;
  color:var(--qy-mute);background:transparent;border-radius:0;padding:8px 2px}
body.qy-flow .tabbar button svg{display:none}
body.qy-flow .tabbar button::before{content:"";position:static;transform:none;
  width:12px;height:12px;border-radius:50%;border:1px solid #B9B9A9;
  background:transparent;margin:0}
body.qy-flow .tabbar button.on{color:var(--qy-ink);font-weight:600;background:transparent}
body.qy-flow .tabbar button.on::before{position:static;top:auto;left:auto;
  transform:none;width:12px;height:12px;border-radius:50%;
  background:#40503C;border-color:#40503C;margin:0}
body.qy-flow .bottombar .on,body.qy-flow .bottombar .active{color:var(--qy-ink)}
/* 操作按钮形态（setBottomBar 摆的「上一步 / 下一步 / 提交预约」） */
body.qy-flow .bottombar > .btn-row{gap:8px}
body.qy-flow .bottombar .btn{width:auto}

/* ---------- ⑧ 去装饰 / 焦点 / 动效 ---------- */
body.qy-flow #voiceMicAny,body.qy-flow #voicePanelAny{display:none!important}
body.qy-flow .content .card,body.qy-flow .content .qcard,
body.qy-flow .content .svc-card,body.qy-flow .content .opt,
body.qy-flow .content .btn{box-shadow:none}
body.qy-flow a:focus-visible,body.qy-flow button:focus-visible,
body.qy-flow input:focus-visible,body.qy-flow textarea:focus-visible{
  outline:2px solid var(--qy-gold);outline-offset:2px}
@media (prefers-reduced-motion: reduce){
  body.qy-flow .btn,body.qy-flow .opt,body.qy-flow .tabbar button{transition:none}
}
/* 320px：页边收 16px，头图与内容同步，不横向溢出 */
@media (max-width:340px){
  body.qy-flow .content{padding:0 16px 96px}
  .qy-flow-hero{margin:0 -16px 20px;padding:0 16px}
  .qy-flow-hero .qy-flow-brand,.qy-flow-hero .qy-flow-en,
  .qy-flow-hero .qy-flow-title,.qy-flow-hero .qy-flow-sub,
  .qy-flow-hero .qy-flow-rule{left:16px}
  body.qy-flow .topbar .step{padding:0 16px 12px}
}