/* ==========================================================================
   AngelVow · Compatibility Report (the components belonging to this page)
   -- The skeleton, the palette and the two-column workbench all come from css/worktool.css and
      css/baobao.css;
      this file only holds what this page alone has: the compatibility bar, the type card, the list of
      friction points and the optional birthday area.
      No destiny calculation happens on this page -- the birthdays only feed the zodiac and star sign
      notes, so they can be left blank.
   ========================================================================== */

/* The large watermark glyph behind the hero and the CTA (the face page and the chat assistant each use their own) */
.cta-band::after { content: "合"; }

/* ==========================================================================
   Layout: a single column -- the form fills the whole width and the result follows below it
   -- The skeleton in worktool.css is "form on the left / fixed-height inner-scrolling output on the
      right": .fxw-grid splits into two columns and
      .fxw-out is absolutely positioned into the right column, scrolling inside itself. This page pulls
      the grid down to one column
      and puts the output card back into normal flow (no fixed height, no inner scroll), so it scrolls
      with the page.
      The scope is limited to this page's #yfForm, leaving worktool.css and the other two tool pages
      untouched.
   ========================================================================== */
.bb-form #yfForm .fxw-grid { grid-template-columns: minmax(0,1fr); }
/* margin-bottom only takes effect while the result card is shown: as soon as the result appears the
   fill-in notes are hidden as a block,
   their 28px of bottom space goes with them, and this makes it up so the sample does not sit flush against the bottom of the result card */
.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;
}
/* Full width means there is no need to squeeze any more: the white space opens up and the two action buttons sit side by side, splitting the width evenly */
.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; }
/* When the full width allows, the three friction points run in two columns, otherwise every one is stretched into a long strip */
@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; }
}

/* ==========================================================================
   The form: the relationship questions plus the optional birthdays
   ========================================================================== */
/* Two short button groups per row on this page; at full width the two columns split the row evenly rather than heaping the buttons on the left (narrow screens go single-column in the media query at the bottom) */
.bb-form #yfForm .tool-row { grid-template-columns: repeat(2, minmax(0,1fr)); }
/* The outer .fxw-formcol is overflow: hidden, so a row of buttons longer than the column is simply clipped.
   worktool.css only allows sideways scrolling below 900px, and this makes it scroll at any width, as insurance against clipping. */
.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; }

/* The submit button is pulled up: the button carries a 0 8px 20px shadow of its own, and with the margin-top from baobao.css
   its distance from the row of sticking points above looks too large, so a negative top margin brings it back;
   the space at the bottom of the card cannot be taken in with it, or the button's shadow would press on the card border, hence a good 14px there. */
.bb-form #yfForm .tool-submit { margin-top: -12px; }
.bb-form #yfForm .tool-adv { padding-bottom: 14px; }

/* Birthdays and what to call each other: baobao.css only styles the inputs inside .tool-row without a border,
   and a date input here needs a visible border for people to see it can be clicked, so it forms its own block. */
.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; }
/* The two birthdays use the same wheel picker as the Soulmate Portrait tool; hidden values retain the IDs relationship.js reads. */
.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); }
/* Date wheel popup (date-only mode shows year, month and day). */
.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-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; }

/* ==========================================================================
   Right column: the analysis output
   ========================================================================== */
/* Compatibility: one large figure with four sub-scores. The figure avoids a ring, which would crowd together on a small screen. */
.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); }
/* The sub-score notes: hung under the progress bars, spanning three columns, only when generated online */
.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; }

/* Their side of it: paired with the one-line read, told apart by a variant edge bar */
.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); }

/* The signals to watch from here: every one is observable, laid out as a list */
.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; }

/* The relationship type card */
.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; }

/* The one-line read: where the two of you are stuck right now */
.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; }

/* Friction points: each one broken into how it shows and what to do */
.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; }

/* Zodiac and star sign notes: shown only when a birthday was filled in */
.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; }

/* Where to go next */
.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; }

/* The one thing least worth doing right now: greyed down, clearly apart from the advice above */
.yf-avoid {
  margin-top: 12px; padding: 11px 13px;
  border: 1px dashed var(--line); border-radius: 8px; background: var(--cream);
}
/* This block is a warning and cannot read fainter than the body: the heading goes cinnabar red and the body copy is lifted from muted to ink-soft,
   with the strikethrough used only to mean "do not do this" -- one step darker and it no longer looks like disabled placeholder text */
.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; }

/* ==========================================================================
   The sample analysis (a static display further down the page, structurally identical to real output)
   ========================================================================== */
.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; }

/* When the full width allows, the four birthday and name fields run on one row */
@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) {
  /* The phone version tightens overall: type size and padding come down together and the gaps between groups close up */
  .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; }
  /* Two columns are kept on a phone: the two dates on one row, the two names on another */
  .yf-birth-grid { gap: 8px; }
  .yf-birth-grid .f label { margin-bottom: 3px; font-size: 11px; }
  /* Keep font-size at 16px: iOS Safari zooms in on focus below 16px, pinning at 16px stops it. The English date placeholder also needs a taller box so its line stays inside. */
  .yf-birth-grid .f input { height: 38px; padding: 3px 8px; font-size: 16px !important; }
  .yf-date { height: 38px; padding: 0 8px; font-size: 16px !important; line-height: 1.2; overflow: hidden; }
  .yf-date-val { min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; line-height: 1.2; }
  .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; }
}
/* The seven rows of fact questions on a phone: the 760px block gives gap 5px + padding 5px 10px, which
   laid out fine when each option was three or four Chinese characters,
   but the same options in English run twice as long, and worktool.css also sets .seg to nowrap +
   overflow-x on a narrow screen,
   with the scrollbar hidden, so the options that overflow simply look cut off at the right edge with no
   sign that they can be dragged into view.
   The button copy has already been trimmed twice (the longest row came down from 94 characters to 44),
   and here the horizontal padding and gap are pulled in further.
   Vertical padding and line-height are untouched, so the button height matches the Chinese site.
   Only the fact questions inside .tool-row have their padding and gap reduced; the "Where things are
   stuck" row inside tool-adv was always
   designed as an fx-scroll-line that slides sideways and is not solved by tightening padding, though its
   type size comes down with the rest (see below). */
@media (max-width: 640px) {
  /* The date picker becomes a bottom sheet on phones, just like the Soulmate Portrait picker. */
  .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; }
  /* Button padding has bottomed out, so the last of the difference no longer comes from the button but
     from the horizontal padding of the two outer containers:
     the 760px block gives .tool-row 4px and the .field inside it another 8px, eating 24px of usable
     width between them.
     Pulling them to 2px / 6px frees up 8px, with no effect at all on the size or the feel of the pills
     themselves. */
  .bb-form #yfForm .tool-row { padding: 2px 2px; }
  .bb-form #yfForm .tool-row .field { padding: 6px 6px; }
  .bb-form #yfForm .tool-row .seg { gap: 2px; }
  /* Padding is already down to 3px and pressing the buttons any further would look cramped, so the last
     step comes from type size:
     the 760px block writes .tool-row and the knots row into the same rule at a flat 12.5px,
     and the same grouping is followed here down to 11.5px, so neither ends up mismatched;
     line-height is untouched and the button height stays as it was. */
  .bb-form #yfForm .tool-row .seg-item,
  .bb-form #yfForm .segm[data-scroll] .seg-item { padding: 5px 3px; font-size: 11.5px; }
}
#sample { padding-left: 12px; padding-right: 12px; }