/* ==========================================================================
   天使之约 · 缘分分析（本页专属组件）
   —— 骨架、配色、两栏工作台全部沿用 css/worktool.css 与 css/baobao.css；
      本文件只写这一页独有的东西：相合度条、缘分类型牌、磨合点列表、生日选填区。
      本页不做命理测算，生日只用于生肖与星座的相处提示，因此可以留空。
   ========================================================================== */

/* 首屏与 CTA 的大字水印改为「合」（面相页是「缘」，聊天助手是「语」） */
.cta-band::after { content: "合"; }

/* ==========================================================================
   版面：单栏 —— 表单铺满整幅宽度，分析结果接在表单下方
   —— worktool.css 的骨架是「左表单 / 右定高内滚输出」：.fxw-grid 分两列、
      .fxw-out 绝对定位钉死在右栏并在内部滚动。本页把 grid 收成一列，
      再把输出卡片放回正常文档流（不定高、不内滚），随页面一起滚。
      作用域限定在本页的 #yfForm 内，worktool.css 与另外两个工具页不受影响。
   ========================================================================== */
.bb-form #yfForm .fxw-grid { grid-template-columns: minmax(0,1fr); }
/* margin-bottom 只在结果卡显示时生效：结果一出来「填写说明」就整块隐藏，
   它那 28px 下间距随之消失，这里补上，别让分析样例贴着结果卡的底边 */
.bb-form #yfForm .yf-out {
  position: static; inset: auto; display: block; min-height: 0; margin: 16px 0 34px;
}
.bb-form #yfForm .yf-out .fxw-screen {
  flex: none; overflow: visible; padding: 16px; scrollbar-gutter: auto;
}
/* 通栏之后不必再挤成窄栏：留白放开，两个操作按钮并排并平分宽度 */
.bb-form #yfForm .yf-out .fxw-screen .ai-loading { padding: 46px 6px; }
.bb-form #yfForm .yf-out .fxw-screen .bb-result-title { font-size: 19px; }
.bb-form #yfForm .yf-out .fxw-screen .ai-acts { flex-direction: row; flex-wrap: nowrap; gap: 10px; }
.bb-form #yfForm .yf-out .fxw-screen .ai-acts .btn { width: auto; flex: 1 1 0; text-align: center; }
/* 通栏够宽时三个磨合点排两列，不然每条都拉成一根长条 */
@media (min-width: 1000px) {
  .bb-form #yfForm .yf-out .yf-knots { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 10px; }
  .bb-form #yfForm .yf-out .yf-knots > b { grid-column: 1 / -1; margin-bottom: 0; }
  .bb-form #yfForm .yf-out .yf-knot { margin-bottom: 0; }
}

/* ==========================================================================
   表单区：关系问答 + 生日选填
   ========================================================================== */
/* 本页每排两组短按钮；通栏后两列平分整行，不把按钮堆在左边（窄屏在最下方媒体查询里改单列） */
.bb-form #yfForm .tool-row { grid-template-columns: repeat(2, minmax(0,1fr)); }
/* 外层 .fxw-formcol 是 overflow: hidden，所以一行按钮比列宽长时会被直接裁掉。
   worktool.css 只在 900px 以下给了横滑，这里改成任何宽度下都能横滑，当作不被裁切的保险。 */
.bb-form #yfForm .tool-row .field { min-width: 0; }
.bb-form #yfForm .tool-row .seg {
  max-width: 100%; overflow-x: auto; padding-bottom: 2px;
  scrollbar-width: none; -webkit-overflow-scrolling: touch;
}
.bb-form #yfForm .tool-row .seg::-webkit-scrollbar { display: none; }
.bb-form #yfForm .tool-row .seg-item { flex: 0 0 auto; }

/* 提交按钮往上收：按钮自带 0 8px 20px 的投影，再加 baobao.css 的 margin-top，
   它与上面卡点那排的距离会看着偏大，这里用负上边距拉回；
   卡底留白不能一起收掉，否则按钮的投影会压在卡片边框上，所以底部留够 14px。 */
.bb-form #yfForm .tool-submit { margin-top: -12px; }
.bb-form #yfForm .tool-adv { padding-bottom: 14px; }

/* 生日与称呼：baobao.css 只给 .tool-row 里的 input 做了无边框样式，
   这里的 date 输入需要看得见边框才知道能点，所以单独成块。 */
.yf-birth { padding: 14px 14px 4px; border-bottom: 1px solid var(--line); }
.yf-birth-head { display: flex; align-items: baseline; gap: 10px; margin-bottom: 9px; }
.yf-birth-head b { flex: 0 0 auto; color: var(--ink); font-family: var(--serif); font-size: 15px; white-space: nowrap; }
.yf-birth-head span { color: var(--ink-soft); font-size: 12px; }
.yf-birth-grid { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 10px; }
.yf-birth-grid .f label {
  display: block; margin-bottom: 4px;
  color: var(--ink-soft); font-size: 11.5px; font-weight: 600; letter-spacing: .03em;
}
.yf-birth-grid .f input {
  display: block; width: 100%; min-width: 0; height: 34px; padding: 4px 10px;
  border: 1px solid var(--line); border-radius: 7px; background: var(--fx-field);
  color: var(--ink); color-scheme: light;
  font-family: inherit; font-size: 13.5px;
  transition: border-color .2s, background .2s;
}
.yf-birth-grid .f input:focus { outline: none; border-color: var(--vermilion); background: var(--paper); }
.yf-birth-grid .f input::placeholder { color: rgba(32,29,43,.34); }
.yf-birth-tip { margin: 8px 2px 0; color: var(--muted); font-size: 11.5px; line-height: 1.7; }
.yf-birth-tip b { color: var(--vermilion); font-weight: 700; }
/* 两个生日使用与正缘画像相同的滚轮选择器；隐藏值仍保留原 ID，relationship.js 无需改动。 */
.yf-birth-grid .f input[type="hidden"] { display: none; }
.yf-date {
  display: flex; align-items: center; justify-content: space-between; gap: 8px; width: 100%; min-width: 0; height: 34px; padding: 4px 10px;
  box-sizing: border-box; -webkit-appearance: none; appearance: none;
  border: 1px solid var(--line); border-radius: 7px; background: var(--fx-field); color: rgba(32,29,43,.34);
  font: inherit; font-size: 13.5px; text-align: left; cursor: pointer; transition: border-color .2s, background .2s;
}
.yf-date::after { content: ''; flex: none; width: 6px; height: 6px; margin: -3px 2px 0 0; border: solid #b99aa8; border-width: 0 1.5px 1.5px 0; transform: rotate(45deg); }
.yf-date.filled { color: var(--ink); }
.yf-date:focus-visible, .yf-date.on { outline: 0; border-color: var(--vermilion); background: var(--paper); box-shadow: 0 0 0 3px rgba(173,23,79,.1); }
/* 出生日期滚轮弹层（与 /zh/soulmate 同款，日期模式只显示年月日三列）。 */
.qm-mask { position: fixed; inset: 0; z-index: 998; background: rgba(32,29,43,.34); }
.qm-panel { position: fixed; z-index: 999; overflow: hidden; border: 1px solid var(--line); border-radius: 6px; background: var(--paper); box-shadow: 0 18px 48px rgba(90,30,55,.22); }
.qm-pick { width: 470px; max-width: calc(100vw - 24px); }
.qm-pick-date { width: 300px; }
.qm-head { display: flex; align-items: center; flex-wrap: wrap; gap: 14px; padding: 11px 14px; border-bottom: 1px solid var(--line); background: linear-gradient(180deg, var(--cream), var(--paper)); }
.qm-cur { flex: 1 1 100%; color: var(--ink); font-size: 13px; font-weight: 700; }
.qm-opt { display: flex; gap: 14px; }.qm-radio { display: inline-flex; align-items: center; gap: 5px; color: var(--ink-soft); font-size: 12.5px; cursor: pointer; user-select: none; }.qm-mark { width: 13px; height: 13px; border: 1px solid #d9c3cd; border-radius: 50%; }.qm-check .qm-mark { border-radius: 3px; }.qm-radio.on { color: var(--vermilion); font-weight: 700; }.qm-radio.on .qm-mark { border-color: var(--vermilion); background: var(--vermilion); box-shadow: inset 0 0 0 2px #fff; }.qm-radio.off { opacity: .32; cursor: not-allowed; }
.qm-ok { margin-left: auto; padding: 6px 18px; border: 0; border-radius: 5px; background: var(--vermilion); color: #fff; font: inherit; font-size: 13px; font-weight: 700; cursor: pointer; }.qm-ok:hover { background: var(--vermilion-dark); }
.qm-cols { display: grid; grid-template-columns: repeat(5, 1fr); }.qm-pick-date .qm-cols { grid-template-columns: repeat(3, 1fr); }.qm-col { min-width: 0; }.qm-col + .qm-col { border-left: 1px solid var(--line); }.qm-col-t { padding: 6px 0; background: var(--cream); color: var(--ink-soft); font-size: 11.5px; text-align: center; }.qm-col-list { position: relative; height: 212px; overflow-y: auto; }.qm-col-i { padding: 6px 2px; color: #4d4651; font-size: 13px; text-align: center; cursor: pointer; }.qm-col-i:hover { background: var(--cream); }.qm-col-i.on { background: var(--vermilion); color: #fff; font-weight: 700; }

/* ==========================================================================
   右栏：分析输出
   ========================================================================== */
/* 相合度：一个大数字 + 四条分项。数字不用圆环，避免小屏里挤成一团。 */
.yf-score {
  display: flex; align-items: center; gap: 14px;
  padding: 13px 14px; border: 1px solid var(--line); border-radius: 8px;
  background: var(--vermilion-soft);
}
.yf-score .num {
  flex: 0 0 auto; min-width: 66px; text-align: center;
  color: var(--vermilion); font-family: var(--serif); font-weight: 800;
  font-size: 40px; line-height: 1;
}
.yf-score .num i { font-style: normal; font-size: 15px; font-weight: 700; }
.yf-score .txt { min-width: 0; }
.yf-score .txt b { display: block; margin-bottom: 3px; color: var(--ink); font-family: var(--serif); font-size: 15.5px; }
.yf-score .txt p { margin: 0; color: var(--ink-soft); font-size: 12.5px; line-height: 1.8; }

.yf-bars { display: grid; gap: 8px; margin-top: 12px; }
.yf-bar { display: grid; grid-template-columns: 62px 1fr 34px; align-items: center; gap: 9px; }
.yf-bar span { color: var(--ink-soft); font-size: 12px; }
.yf-bar em {
  color: var(--ink-soft); font-style: normal; font-size: 12px; font-weight: 700;
  font-variant-numeric: tabular-nums; text-align: right;
}
.yf-bar .track { height: 7px; border-radius: 99px; background: rgba(32,29,43,.08); overflow: hidden; }
.yf-bar .track i { display: block; height: 100%; border-radius: 99px; background: var(--gold); transition: width .5s ease; }
.yf-bar.low .track i { background: rgba(32,29,43,.28); }
.yf-bar.high .track i { background: var(--vermilion); }
/* 分项解读：只在在线生成时挂在进度条下方，横跨三列 */
.yf-bars:has(.note) { gap: 13px; }
.yf-bar { row-gap: 4px; }
.yf-bar .note {
  grid-column: 1 / -1; margin: 0;
  color: var(--muted); font-size: 12px; line-height: 1.8;
}
.yf-bar .note b { color: var(--ink-soft); font-weight: 700; }

/* 对方视角：与「一句读心」形成一组，用变体边条区分立场 */
.yf-ta {
  margin-top: 12px; padding: 11px 13px;
  border-left: 3px solid var(--jade, #3f7d6e); border-radius: 0 7px 7px 0;
  background: var(--paper);
}
.yf-ta > b { display: block; margin-bottom: 6px; color: var(--ink); font-family: var(--serif); font-size: 14px; }
.yf-ta p { margin: 0; color: var(--ink-soft); font-size: 13px; line-height: 1.9; }
.yf-ta p b { color: var(--vermilion); font-weight: 700; }
.yf-ta p.basis {
  margin-top: 7px; padding-top: 7px; border-top: 1px dashed var(--line);
  color: var(--muted); font-size: 12px; line-height: 1.8;
}
.yf-ta p.basis b { color: var(--ink-soft); }

/* 接下来要盯的信号：每条都是可观察的，排成清单 */
.yf-signal { margin-top: 12px; }
.yf-signal > b { display: block; margin-bottom: 8px; color: var(--ink); font-family: var(--serif); font-size: 14.5px; }
.yf-sig {
  margin-bottom: 8px; padding: 10px 12px;
  border: 1px solid var(--line); border-radius: 8px; background: var(--cream);
}
.yf-sig:last-child { margin-bottom: 0; }
.yf-sig h5 {
  display: flex; align-items: center; gap: 7px; margin: 0 0 5px;
  color: var(--ink); font-family: var(--serif); font-size: 13.5px;
}
.yf-sig h5 .no {
  flex: 0 0 auto; display: grid; place-items: center; width: 18px; height: 18px;
  border-radius: 50%; border: 1px solid var(--gold); background: var(--gold-soft);
  color: #9a6f1f; font-family: var(--sans); font-size: 11px; font-weight: 700; line-height: 1;
}
.yf-sig p { margin: 0; color: var(--ink-soft); font-size: 12.5px; line-height: 1.85; }
.yf-sig p b { color: var(--vermilion); font-weight: 700; }

/* 缘分类型牌 */
.yf-type {
  margin-top: 12px; padding: 12px 13px;
  border: 1px solid var(--line); border-radius: 8px; background: var(--paper);
}
.yf-type .tag {
  display: inline-block; margin-bottom: 7px; padding: 2px 10px; border-radius: 999px;
  background: var(--vermilion); color: #fff; font-size: 11.5px; font-weight: 700;
}
.yf-type h4 { margin: 0 0 5px; color: var(--ink); font-family: var(--serif); font-size: 16px; }
.yf-type p { margin: 0; color: var(--ink-soft); font-size: 13px; line-height: 1.9; }

/* 一句读心：你们现在卡在哪 */
.yf-read {
  margin-top: 12px; padding: 11px 13px;
  border-left: 3px solid var(--gold); border-radius: 0 7px 7px 0;
  background: var(--cream-mid); color: var(--ink); font-size: 13.5px; line-height: 1.9;
}
.yf-read b { color: var(--vermilion); font-weight: 700; }

/* 磨合点：逐条拆成「表现 → 怎么办」 */
.yf-knots { margin-top: 12px; }
.yf-knots > b { display: block; margin-bottom: 8px; color: var(--ink); font-family: var(--serif); font-size: 14.5px; }
.yf-knot {
  position: relative; margin-bottom: 9px; padding: 11px 12px 11px 40px;
  border: 1px solid var(--line); border-radius: 8px; background: var(--paper);
  transition: border-color .2s, box-shadow .2s;
}
.yf-knot:last-child { margin-bottom: 0; }
.yf-knot:hover { border-color: var(--gold); box-shadow: var(--shadow-sm); }
.yf-knot .no {
  position: absolute; left: 12px; top: 11px;
  display: grid; place-items: center; width: 19px; height: 19px;
  border-radius: 50%; background: var(--vermilion); color: #fff;
  font-size: 11.5px; font-weight: 700; line-height: 1;
}
.yf-knot h5 { margin: 0 0 5px; color: var(--ink); font-family: var(--serif); font-size: 14px; }
.yf-knot p { margin: 0; color: var(--ink-soft); font-size: 12.5px; line-height: 1.85; }
.yf-knot p.fix { margin-top: 7px; padding-top: 7px; border-top: 1px dashed var(--line); color: var(--muted); font-size: 12px; }
.yf-knot p.fix b { color: var(--ink-soft); font-weight: 700; }

/* 生肖与星座提示：只在填了生日时出现 */
.yf-zodiac {
  margin-top: 12px; padding: 11px 13px;
  border: 1px dashed var(--gold); border-radius: 8px; background: var(--gold-soft);
}
.yf-zodiac > b { display: block; margin-bottom: 6px; color: var(--ink); font-family: var(--serif); font-size: 14px; }
.yf-zodiac p { margin: 0 0 6px; color: var(--ink-soft); font-size: 12.5px; line-height: 1.85; }
.yf-zodiac p:last-child { margin-bottom: 0; }
.yf-zodiac .pair { color: var(--vermilion); font-weight: 700; }

/* 下一步怎么走 */
.yf-next {
  margin-top: 12px; padding: 12px 13px;
  border: 1px solid var(--line); border-left: 3px solid var(--vermilion); border-radius: 0 8px 8px 0;
  background: var(--cream);
}
.yf-next > b { display: block; margin-bottom: 5px; color: var(--vermilion); font-family: var(--serif); font-size: 14px; }
.yf-next p { margin: 0 0 7px; color: var(--ink-soft); font-size: 13px; line-height: 1.9; }
.yf-next p:last-child { margin-bottom: 0; }
.yf-next .when { color: var(--ink); font-weight: 700; }

/* 现在最不该做的一件事：压灰，和上面的建议一眼分得开 */
.yf-avoid {
  margin-top: 12px; padding: 11px 13px;
  border: 1px dashed var(--line); border-radius: 8px; background: var(--cream);
}
/* 这块是警示，不能比正文还淡：标题改服砂红，正文从 muted 提到 ink-soft，
   删除线只用来表「别这么做」，加深一档后不再像被禁用的占位文字 */
.yf-avoid > b {
  display: inline-block; margin-bottom: 7px; padding: 2px 9px; border-radius: 999px;
  background: var(--vermilion-soft); color: var(--vermilion-dark); font-size: 11.5px; font-weight: 700;
}
.yf-avoid .txt { margin: 0; color: var(--ink-soft); font-size: 13.5px; line-height: 1.85; text-decoration: line-through; text-decoration-color: rgba(161,44,32,.45); }
.yf-avoid .why { margin: 7px 0 0; color: var(--ink-soft); font-size: 12.5px; line-height: 1.8; }
.yf-disclaim { margin: 14px 0 0; color: var(--muted); font-size: 11.5px; line-height: 1.8; }

/* ==========================================================================
   分析样例（页面下方静态展示，结构与真实输出完全一致）
   ========================================================================== */
.yf-sample-note {
  display: inline-block; margin-left: 9px; padding: 2px 9px; border-radius: 99px;
  border: 1px solid var(--line); background: var(--cream);
  color: var(--muted); font-family: var(--sans); font-size: 11.5px; font-weight: 600;
}
.yf-sample-lead { margin: -6px 0 16px; color: var(--ink-soft); font-size: 13.5px; line-height: 1.9; }
.yf-sample-grid { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 14px; align-items: start; }

/* 通栏够宽时，生日与称呼四项排成一行 */
@media (min-width: 1000px) {
  .yf-birth-grid { grid-template-columns: repeat(4, minmax(0,1fr)); }
}

@media (max-width: 900px) {
  .bb-form #yfForm .tool-row { grid-template-columns: 1fr; }
  .yf-sample-grid { grid-template-columns: minmax(0,1fr); }
}
@media (max-width: 760px) {
  /* 手机版整体收紧：字号与内边距同时调小，每组之间的上下距离拉近 */
  .bb-form #yfForm .block-title { margin-bottom: 8px; padding: 13px 12px 0; font-size: 16px; }
  .bb-form #yfForm .tool-row { padding: 2px 4px; }
  .bb-form #yfForm .tool-row .field { padding: 6px 8px; }
  .bb-form #yfForm .tool-row .field label { margin-bottom: 3px; font-size: 11px; }
  .bb-form #yfForm .seg, .bb-form #yfForm .segm { gap: 5px; }
  .bb-form #yfForm .tool-row .seg-item,
  .bb-form #yfForm .segm[data-scroll] .seg-item { padding: 5px 10px; font-size: 12.5px; line-height: 18px; }
  .bb-form #yfForm .tool-adv { padding: 11px 8px 12px; }
  .bb-form #yfForm .tool-adv .block-sub { margin-bottom: 8px; font-size: 11.5px; }
  .bb-form #yfForm .tool-submit { margin-top: -10px; }
  .bb-form #yfForm .tool-submit .btn { min-height: 40px; padding: 9px 20px; font-size: 14px; }
  .yf-birth { padding: 10px 11px 4px; }
  .yf-birth-head { margin-bottom: 7px; }
  .yf-birth-head b { font-size: 14px; }
  .yf-birth-head span { font-size: 11px; }
  /* 手机版保持两列：两个日期一排、两个称呼一排 */
  .yf-birth-grid { gap: 8px; }
  .yf-birth-grid .f label { margin-bottom: 3px; font-size: 11px; }
  /* 字号保持 16px：iOS Safari 在小于 16px 时聚焦会自动放大，设死 16px 就不放了 */
  .yf-birth-grid .f input { height: 32px; padding: 3px 8px; font-size: 16px !important; }
  .yf-date { height: 32px; padding: 3px 8px; font-size: 16px !important; }
  .yf-birth-tip { margin-top: 7px; font-size: 11px; line-height: 1.65; }
  .yf-score { gap: 11px; padding: 12px; }
  .yf-score .num { min-width: 54px; font-size: 34px; }
  .yf-bar { grid-template-columns: 56px 1fr 30px; gap: 7px; }
}
/* 手机端八排事实题：worktool.css 在窄屏把 .seg 设成了 nowrap + overflow-x 横向滑动，
   滑动条又是隐藏的，溢出那几项看上去就是被右边缘切掉，看不出还能往左拉。
   汉字没有缩写余地，所以只能从空白上抠：外层两层容器的左右内距、胶囊自己的横向内距、
   以及胶囊之间的间距，三层共腾出约 80px。
   字号守住 12.5px 不降：中文再小就难认了，而且这里是英文站要照搬的基准。
   纵向 padding 与 line-height 也不动，按钮高度和行数维持原样。 */
@media (max-width: 640px) {
  /* 日期选择器在手机端改为底部抽屉，两个日期不会再被原生 date 控件挤压、重叠。 */
  .qm-panel { left: 0 !important; right: 0; top: auto !important; bottom: 0; border-radius: 6px 6px 0 0; }
  .qm-pick, .qm-pick-date { width: auto; max-width: none; }
  .qm-col-i { padding: 8px 1px; font-size: 12.5px; }
  /* 760px 那段是 .tool-row 左右各 4px、里面的 .field 再各 8px，两边共吃掉 24px 可用宽。
     收成 2px / 6px 后多出 8px，对卡片的观感几乎看不出来。 */
  .bb-form #yfForm .tool-row { padding: 2px 2px; }
  .bb-form #yfForm .tool-row .field { padding: 6px 6px; }
  .bb-form #yfForm .tool-row .seg { gap: 3px; }
  /* 胶囊横向内距 10px → 5px，六项的那排一下省 60px，是这里最大的一笔。
     knots 那排本来就是 fx-scroll-line 横向滑动的设计，不跟着收；
     但它与事实题在 760px 那段同用一条规则，此处单独列出事实题，不会误伤它。 */
  .bb-form #yfForm .tool-row .seg-item { padding: 5px 5px; }
}
#sample { padding-left: 12px; padding-right: 12px; }