/* 「保單上嘅人，係咪家人？」零件（family-sug-ui.js）—— 一個零件四個畫面共用；樣板 10-19 用戶批（D1WMHZzrn7QFtztiG7g774）。
   顏色全部用 tokens.css 變數（品牌色由 team.js 換皮）；冇寫死色值。
   10-20 第二次推：撳位（加入／唔係家人／同一人／兩個人／連結／關係選單／日期格）一律 ≥44px（iPad 觸控；tools/headless/needs2-famsug.spec.js 量） */
.fsg{border:1.5px solid var(--brand-gold-deep);border-radius:var(--r-md);background:var(--accent-soft);padding:var(--sp-3) var(--sp-4);margin:0 0 var(--sp-3);display:flex;flex-direction:column;gap:var(--sp-1);font-size:var(--fs-md)}
.fsg-fam{display:flex;flex-wrap:wrap;align-items:center;gap:var(--sp-2);margin-bottom:var(--sp-2)}
.fsg-fam .lb{font-size:var(--fs-xs);color:var(--muted);margin-right:var(--sp-1)}
.fsg-mem{display:inline-flex;align-items:baseline;gap:var(--sp-1h);border:1px solid var(--line);border-radius:var(--r-pill);padding:3px var(--sp-3);font-size:var(--fs-sm);background:var(--card)}
.fsg-mem small{color:var(--muted);font-size:var(--fs-xs)}
.fsg-mem .lk{color:var(--ok);font-size:var(--fs-xs);font-weight:700}
.fsg-mem.new{border-color:var(--ok);background:var(--ok-soft);animation:fsg-pop .5s ease}
@keyframes fsg-pop{from{transform:scale(.85);opacity:0}to{transform:none;opacity:1}}
@media (prefers-reduced-motion:reduce){.fsg-mem.new{animation:none}}
.fsg-h{margin:0 0 var(--sp-1h);font-size:var(--fs-lg);display:flex;align-items:center;gap:var(--sp-2)}
.fsg-h .n{font-family:var(--mono);font-size:var(--fs-xs);background:var(--card);border-radius:var(--r-pill);padding:0 var(--sp-2);color:var(--ink2);font-weight:500}
.fsg-row{display:grid;grid-template-columns:minmax(150px,1fr) auto;gap:var(--sp-2h) var(--sp-4);align-items:center;padding:var(--sp-3) 0;border-top:1px solid var(--line)}
.fsg-h + .fsg-row,.fsg-h + .fsg-ask{border-top:0}
@media (max-width:620px){.fsg-row{grid-template-columns:1fr}}
.fsg-row .who b{font-size:var(--fs-md)}
.fsg-row .who .sub{font-size:var(--fs-sm);color:var(--muted);margin-left:var(--sp-1h)}
.fsg-row .who .src{font-size:var(--fs-xs);color:var(--muted);margin-left:var(--sp-1)}
.fsg-row .who .me{font-size:var(--fs-xs);color:var(--muted);margin-left:var(--sp-1)}
.fsg-row .eq{display:inline-block;margin:0 var(--sp-2);color:var(--brand-gold-deep);font-weight:700;font-family:var(--mono)}
.fsg-row .ev{display:flex;flex-wrap:wrap;gap:var(--sp-1h);margin-top:5px}
.fsg-row .ev span{font-size:var(--fs-xs);color:var(--ink2);background:var(--card);border:1px solid var(--line);border-radius:var(--r-sm);padding:0 7px;font-variant-numeric:tabular-nums}
.fsg-row .ev .cl{color:var(--ok);background:var(--ok-soft);border-color:transparent;font-weight:700}
.fsg-row .act,.fsg-ask .act{display:flex;flex-wrap:wrap;align-items:center;gap:var(--sp-1h);justify-content:flex-end}
@media (max-width:620px){.fsg-row .act{justify-content:flex-start}}
.fsg-rel{font:inherit;font-size:var(--fs-md);min-height:44px;min-width:150px;padding:0 var(--sp-2h);border-radius:var(--r-sm);border:1px solid var(--line);background:var(--card);color:var(--ink);cursor:pointer}
.fsg-rel.empty-v{color:var(--muted)}
.fsg-rel.guess{border:1.5px dashed var(--brand-gold-deep)}
.fsg-rel.set{border:1.5px solid var(--primary);font-weight:700}
.fsg-dob{font:inherit;font-size:var(--fs-sm);min-height:44px;border:1px solid var(--line);border-radius:var(--r-sm);padding:0 var(--sp-2);background:var(--card);color:var(--ink);width:150px}
.fsg-dobw{display:inline-flex;align-items:center;gap:var(--sp-1h);font-size:var(--fs-sm);color:var(--ink2)}
.fsg-dobw .opt{font-size:var(--fs-xs);color:var(--muted)}
.fsg-add{font:inherit;font-size:var(--fs-md);font-weight:700;min-height:44px;padding:0 18px;border-radius:var(--r-md);border:0;background:var(--primary);color:var(--primary-ink);cursor:pointer}
.fsg-add:disabled{background:var(--line);color:var(--muted);cursor:not-allowed}
.fsg-skip{font:inherit;font-size:var(--fs-sm);border:0;background:none;color:var(--muted);text-decoration:underline;cursor:pointer;min-height:44px;padding:0 var(--sp-1)}
.fsg-b2{font:inherit;font-size:var(--fs-md);font-weight:700;min-height:44px;padding:0 var(--sp-4);border-radius:var(--r-md);border:1.5px solid var(--primary);background:var(--card);color:var(--ink);cursor:pointer}
.fsg-b2.plain{border-color:var(--line);font-weight:500;color:var(--ink2)}
.fsg-b2:disabled{opacity:.55;cursor:not-allowed}
.fsg-rel:focus-visible,.fsg-dob:focus-visible,.fsg-add:focus-visible,.fsg-skip:focus-visible,.fsg-b2:focus-visible{outline:2px solid var(--brand-gold-deep);outline-offset:2px}
.fsg-ask{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:var(--sp-2) var(--sp-3);background:var(--card);border:1px solid var(--ok);border-radius:var(--r-md);padding:var(--sp-2h) var(--sp-3);margin-bottom:var(--sp-1h)}
.fsg-empty{font-size:var(--fs-sm);color:var(--muted);padding:var(--sp-1h) 0}
.fsg-more{font-size:var(--fs-sm);color:var(--muted);padding-top:var(--sp-2)}
/* 10-29 手機版（用戶真機指正：要絕對整齊、少佔位、用彈出式選單）—— 一人一行兩層：名＋歲數性別｜右邊關係 ›；下面細標籤（唔摺行，太長收省略號）。
   撳行彈 .th-sheet 底片：關係逐行揀（估中嗰個預先揀好）、出生日期、「係咪即係佢」、加入、唔係家人。iPad／電腦唔出呢款 DOM */
html[data-dev="phone"] .fsg{padding:var(--sp-1) var(--sp-3);gap:0;border-width:1px}
html[data-dev="phone"] .fsg-fam{flex-wrap:nowrap;overflow:hidden;margin:var(--sp-2) 0 0}
html[data-dev="phone"] .fsg-fam .fsg-mem{flex:none}
html[data-dev="phone"] .fsg-h{font-size:var(--fs-md);margin:var(--sp-2) 0 var(--sp-1);min-height:28px}
html[data-dev="phone"] .fsg-row.ph{display:block;padding:0;border-top:1px solid var(--line)}
html[data-dev="phone"] .fsg-h + .fsg-row.ph{border-top:1px solid var(--line)}
html[data-dev="phone"] .fsg-pr{all:unset;box-sizing:border-box;display:grid;grid-template-columns:minmax(0,1fr) auto;column-gap:var(--sp-2);row-gap:2px;align-items:center;width:100%;min-height:60px;padding:var(--sp-2) 0;cursor:pointer;-webkit-tap-highlight-color:transparent}
html[data-dev="phone"] .fsg-pr:focus-visible{outline:2px solid var(--brand-gold-deep);outline-offset:-2px;border-radius:var(--r-sm)}
html[data-dev="phone"] .fsg-pr .nm{display:flex;align-items:baseline;gap:var(--sp-1h);min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
html[data-dev="phone"] .fsg-pr .nm b{font-size:var(--fs-md);overflow:hidden;text-overflow:ellipsis}
html[data-dev="phone"] .fsg-pr .sub,html[data-dev="phone"] .fsg-psh-h .sub{font-size:var(--fs-sm);color:var(--muted);flex:none}
html[data-dev="phone"] .fsg-pr .rv{display:inline-flex;align-items:center;gap:2px;font-size:var(--fs-sm);color:var(--ink2);white-space:nowrap}
html[data-dev="phone"] .fsg-pr .rv::after{content:"";width:7px;height:7px;margin:0 3px 0 6px;border:solid var(--muted);border-width:0 1.5px 1.5px 0;transform:rotate(-45deg)}
html[data-dev="phone"] .fsg-pr .rv.guess{color:var(--brand-gold-deep)}
html[data-dev="phone"] .fsg-pr .rv.set{color:var(--ink);font-weight:700}
html[data-dev="phone"] .fsg-pr .rv.empty-v{color:var(--link)}
html[data-dev="phone"] .fsg-pr .ev{grid-column:1 / -1;display:flex;gap:var(--sp-1);flex-wrap:nowrap;overflow:hidden;min-width:0;margin:0}
html[data-dev="phone"] .fsg-pr .ev span{flex:none;font-size:var(--fs-xs);color:var(--ink2);background:var(--card);border:1px solid var(--line);border-radius:var(--r-sm);padding:0 6px;line-height:20px}
html[data-dev="phone"] .fsg-pr .ev .cl{color:var(--ok);background:var(--ok-soft);border-color:transparent;font-weight:700}
html[data-dev="phone"] .fsg-pr.ro{cursor:default}
/* 「甲 ＝？ 乙」同「同時連結佢嘅客戶檔？」：字一行、掣一行並排平分 */
html[data-dev="phone"] .fsg-row.pair{grid-template-columns:1fr;gap:var(--sp-2);padding:var(--sp-2h) 0}
html[data-dev="phone"] .fsg-row.pair .act,html[data-dev="phone"] .fsg-ask .act{display:grid;grid-template-columns:1fr 1fr;gap:var(--sp-2);width:100%;justify-content:stretch}
html[data-dev="phone"] .fsg-row.pair .fsg-b2,html[data-dev="phone"] .fsg-ask .fsg-b2{width:100%;padding:0 var(--sp-2)}
html[data-dev="phone"] .fsg-ask{padding:var(--sp-2h) var(--sp-3);margin:var(--sp-2) 0}
html[data-dev="phone"] .fsg-more{padding:var(--sp-2) 0;border-top:1px solid var(--line)}
/* 底片 */
html[data-dev="phone"] .fsg-psh .box{display:flex;flex-direction:column;gap:var(--sp-3);padding:var(--sp-2) var(--sp-4) calc(var(--sp-4) + env(safe-area-inset-bottom,0px))}
html[data-dev="phone"] .fsg-psh-h{display:flex;align-items:center;justify-content:space-between;gap:var(--sp-2);min-height:48px;border-bottom:1px solid var(--line)}
html[data-dev="phone"] .fsg-psh-h .nm{display:flex;align-items:baseline;gap:var(--sp-1h);min-width:0}
html[data-dev="phone"] .fsg-psh-h .nm b{font-size:var(--fs-lg);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
html[data-dev="phone"] .fsg-psh-h .x{all:unset;min-height:44px;padding:0 var(--sp-1);font-size:var(--fs-md);color:var(--link);cursor:pointer}
html[data-dev="phone"] .fsg-psh .ev{display:flex;flex-wrap:wrap;gap:var(--sp-1)}
html[data-dev="phone"] .fsg-psh .ev span{font-size:var(--fs-xs);color:var(--ink2);background:var(--card);border:1px solid var(--line);border-radius:var(--r-sm);padding:0 6px;line-height:20px}
/* 關係兩欄格（十幾個選項唔使捲）；格線用 1px 間隙透出底色 */
html[data-dev="phone"] .fsg-opts{display:grid;grid-template-columns:1fr 1fr;gap:1px;background:var(--line);border:1px solid var(--line);border-radius:var(--r-md);overflow:hidden;flex:none}
html[data-dev="phone"] .fsg-opt{all:unset;box-sizing:border-box;display:flex;align-items:center;gap:var(--sp-1);min-height:48px;padding:0 var(--sp-3);font-size:var(--fs-md);color:var(--ink);background:var(--card);cursor:pointer;min-width:0}
html[data-dev="phone"] .fsg-opt > span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
html[data-dev="phone"] .fsg-opt small{font-size:var(--fs-sm);color:var(--brand-gold-deep)}
html[data-dev="phone"] .fsg-opt.on{font-weight:700}
html[data-dev="phone"] .fsg-opt.on::after{content:"";margin-left:auto;width:12px;height:6px;border:solid var(--primary);border-width:0 0 2px 2px;transform:translateY(-2px) rotate(-45deg)}
html[data-dev="phone"] .fsg-opt:focus-visible{outline:2px solid var(--brand-gold-deep);outline-offset:-2px}
html[data-dev="phone"] .fsg-psh-dob .fsg-dobw{display:flex;width:100%}
html[data-dev="phone"] .fsg-psh-dob .fsg-dob{flex:1;width:auto}
html[data-dev="phone"] .fsg-psh-x{display:flex;flex-wrap:wrap;gap:var(--sp-2)}
html[data-dev="phone"] .fsg-psh .fsg-add{width:100%;min-height:48px}
html[data-dev="phone"] .fsg-psh .fsg-skip{align-self:center}
html[data-dev="phone"] .fsg-pcb{display:flex;flex-direction:column}
html[data-dev="phone"] .fsg-pcb > .fsg-ask{margin:var(--sp-2h) 0}
html[data-dev="phone"] .fsg-psh .ev .cl{color:var(--ok);background:var(--ok-soft);border-color:transparent;font-weight:700}