/* family.css — "ดวงครอบครัว" tab on the สมพงษ์ page. Same mooncake-box world: lacquer red, foil gold, ivory.
   Each person carries one colour everywhere (avatar, graph line, legend, dots). */

.fm { text-align: left; }
.fm-head { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; margin: 6px 0 0; }
.fm-title { margin: 0; font: 600 20px/1.3 'Kanit', sans-serif; color: #7A2927; }
.fm-count { font: 500 12.5px 'Kanit', sans-serif; color: #9A712F; }
.fm-empty { margin: 8px 0 0; font: 14px/1.7 'Sarabun', sans-serif; color: #5E4A3D; }
.fm-first { display: grid; gap: 8px; margin: 14px 0 0; }

/* avatars */
.fm-av { flex: none; display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; color: #FFF6E0; font: 600 18px/1 'Kanit', sans-serif; box-shadow: inset 0 0 0 2px rgba(255, 244, 214, .35); }
.fm-av.sm { width: 26px; height: 26px; font-size: 13px; box-shadow: none; }
.fm-av.lg { width: 46px; height: 46px; font-size: 21px; }
.fm-av-add { background: #FFFDF8; color: #951A22; box-shadow: inset 0 0 0 1px #C9A868; font: 400 24px/1 Georgia, serif; }

/* people chips */
.fm-chips { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin: 12px 0 0; }
.fm-chip { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 10px; align-items: center; min-height: 58px; padding: 8px 10px; border-radius: 8px; border: 1px solid #D9C8A8; background: #FFFDF8; text-align: left; transition: transform .12s ease-out; }
.fm-chip:active { transform: scale(.97); }
.fm-chip-tx { display: grid; min-width: 0; }
.fm-chip-tx b { font: 600 15px/1.3 'Kanit', sans-serif; color: #382C27; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fm-chip-tx small { font: 12px/1.4 'Sarabun', sans-serif; color: #86715E; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fm-add { border-style: dashed; border-color: #C9A868; background: transparent; }
.fm-add .fm-chip-tx b { color: #951A22; }

/* form */
.fm-formcard { margin: 14px 0 0; padding: 16px; border-radius: 8px; border: 1px solid #C9A868; background: #FFF9EB; }
.fm-form-h { font: 600 17px 'Kanit', sans-serif; color: #7A2927; }
.fm-formcard .fl { display: block; margin-top: 14px; }
.fm-formcard .fl small { font: 12px 'Sarabun', sans-serif; color: #86715E; margin-left: 4px; }
.fm-formcard input, .fm-formcard select { display: block; width: 100%; margin-top: 6px; background: #FFFDF8 !important; }
.fm-seg { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; margin-top: 6px; }
.fm-seg button { min-height: 46px; border-radius: 6px; border: 1px solid #D9C8A8; background: #FFFDF8; color: #5E4A3D; font: 500 14.5px 'Kanit', sans-serif; }
.fm-seg button[aria-checked="true"] { background: #951A22; border-color: #951A22; color: #FFF3D6; }
.fm-err { margin: 10px 0 0; min-height: 1em; font: 13px 'Sarabun', sans-serif; color: #951A22; }
.fm-form-btns { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 8px; }
.fm-del { display: block; width: 100%; margin: 12px 0 0; min-height: 44px; border: 0; background: none; color: #86715E; font: 13.5px 'Sarabun', sans-serif; text-decoration: underline; text-underline-offset: 4px; }
.fm-del[data-sure="1"] { color: #951A22; font-weight: 600; }

/* section headings */
.fm-h { margin: 28px 0 0; font: 600 18px/1.3 'Kanit', sans-serif; color: #7A2927; }
.fm-sub { margin: 4px 0 0; font: 13.5px/1.6 'Sarabun', sans-serif; color: #5E4A3D; }

/* overview */
.fm-over { display: grid; gap: 10px; margin: 12px 0 0; }
.fm-row { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 12px; align-items: start; padding: 13px; border-radius: 8px; border: 1px solid #D9C8A8; background: #FFFDF8; }
.fm-row-top { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 8px; }
.fm-row-top b { font: 600 16px/1.3 'Kanit', sans-serif; color: #382C27; }
.fm-row-top small { font: 12.5px 'Sarabun', sans-serif; color: #86715E; }
.fm-chong { font: 500 11px/1.7 'Kanit', sans-serif; font-style: normal; padding: 0 8px; border-radius: 999px; background: #F6DEDA; color: #8A1C24; }
.fm-row-theme { margin-top: 3px; font: 600 15px/1.35 'Kanit', sans-serif; color: #951A22; }
.fm-row p { margin: 2px 0 0; font: 13.5px/1.6 'Sarabun', sans-serif; color: #5E4A3D; }
.fm-row-year { margin-top: 6px; font: 12.5px/1.6 'Sarabun', sans-serif; color: #86715E; }
.fm-row-year em, .fm-yd em { font: 500 11px/1.7 'Kanit', sans-serif; font-style: normal; padding: 1px 8px; border-radius: 999px; margin-left: 4px; white-space: nowrap; }
.fm .lv-hi { background: #951A22; color: #FFF3D6; }
.fm .lv-mid { background: #F3E8CF; color: #7A5B25; }
.fm .lv-lo { background: #EFEAE1; color: #6F685E; }
.fm-score { display: grid; justify-items: center; align-content: center; width: 50px; height: 50px; border-radius: 50%; box-shadow: inset 0 0 0 2px #D9B56A; }
.fm-score b { font: 600 18px/1 'Oswald', sans-serif; color: #382C27; }
.fm-score small { font: 9.5px/1.2 'Sarabun', sans-serif; color: #86715E; }

/* legend + graph */
.fm-legend, .fm-who { display: flex; flex-wrap: wrap; gap: 6px; margin: 10px 0 0; }
.fm-lg { display: inline-flex; align-items: center; gap: 7px; min-height: 40px; padding: 0 12px 0 10px; border-radius: 999px; border: 1px solid #D9C8A8; background: #FFFDF8; color: #382C27; font: 500 13.5px 'Kanit', sans-serif; transition: transform .12s ease-out; }
.fm-lg i { width: 11px; height: 11px; border-radius: 50%; flex: none; }
.fm-lg.on { border-color: #951A22; box-shadow: 0 0 0 1px #951A22; }
.fm-lg:active { transform: scale(.97); }
.fm-graph { margin: 8px -4px 0; }
.fm-svg { display: block; width: 100%; height: auto; overflow: visible; }
.fm-years { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 5px; margin: 10px 0 0; }
.fm-y { min-width: 0; min-height: 44px; padding: 0; border-radius: 6px; border: 1px solid #E4D2A9; background: #FFFDF8; color: #86715E; font: 600 13px/1 'Oswald', sans-serif; }
.fm-y.is-cur { box-shadow: inset 0 -3px 0 #951A22; }
.fm-y.on { background: #951A22; border-color: #951A22; color: #FFF3D6; }
.fm-yeardetail { margin: 12px 0 0; padding: 13px; border-radius: 8px; border: 1px solid #D9C8A8; background: #FFFDF8; }
.fm-yd-h { font: 600 14px 'Kanit', sans-serif; color: #951A22; }
.fm-yd { list-style: none; margin: 8px 0 0; padding: 0; display: grid; gap: 8px; }
.fm-yd li { display: grid; grid-template-columns: 26px minmax(0, 84px) minmax(0, 1fr) auto; gap: 8px; align-items: center; }
.fm-yd-n { display: grid; font: 600 13.5px/1.3 'Kanit', sans-serif; color: #382C27; overflow: hidden; }
.fm-yd-n small { font: 11.5px 'Sarabun', sans-serif; font-weight: 400; color: #86715E; }
.fm-yd-t { font: 13px/1.45 'Sarabun', sans-serif; color: #5E4A3D; }

/* shared days */
.fm-days { list-style: none; margin: 12px 0 0; padding: 0; display: grid; gap: 6px; }
.fm-days li { display: grid; grid-template-columns: minmax(0, 104px) minmax(0, 1fr) auto; gap: 10px; align-items: center; min-height: 44px; padding: 6px 12px; border-radius: 8px; border: 1px solid #E4D2A9; background: #FFFDF8; }
.fm-days b { font: 600 14px 'Kanit', sans-serif; color: #382C27; }
.fm-day-dots { display: flex; flex-wrap: wrap; gap: 4px; }
.fm-day-dots i { width: 12px; height: 12px; border-radius: 50%; }
.fm-days em { font: 500 12px 'Kanit', sans-serif; font-style: normal; color: #7A5B25; white-space: nowrap; }

/* pairs */
.fm-pairone { margin: 12px 0 0; padding: 13px; border-radius: 8px; border: 1px solid #D9C8A8; background: #FFFDF8; }
.fm-pairone b { font: 600 15px 'Kanit', sans-serif; color: #951A22; }
.fm-pairone p, .fm-pairtext p { margin: 4px 0 0; font: 14px/1.65 'Sarabun', sans-serif; color: #5E4A3D; }
.fm-matrix { display: grid; grid-template-columns: 30px repeat(var(--n), minmax(0, 1fr)); gap: 4px; margin: 12px 0 0; align-items: center; justify-items: center; }
.fm-mx-h { display: grid; place-items: center; }
.fm-mx { width: 100%; aspect-ratio: 1; min-height: 34px; max-height: 48px; padding: 0; border-radius: 6px; border: 1px solid transparent; font: 400 16px/1 serif; display: grid; place-items: center; }
.fm-mx.k-gen { background: #EBDDB8; color: #8A6424; }
.fm-mx.k-same { background: #FFFDF8; color: #86715E; border-color: #E4D2A9; }
.fm-mx.k-ctl { background: #EFEAE1; color: #8E867A; }
.fm-mx.on { border-color: #951A22; box-shadow: 0 0 0 1px #951A22; }
.fm-mx-x { width: 100%; aspect-ratio: 1; max-height: 48px; border-radius: 6px; background: repeating-linear-gradient(135deg, transparent 0 5px, #EFE6D2 5px 6px); }
.fm-mx-legend { display: flex; flex-wrap: wrap; gap: 4px 14px; margin: 10px 0 0; font: 12px 'Sarabun', sans-serif; color: #86715E; }
.fm-mx-legend i { font-style: normal; margin-right: 5px; }
.fm-mx-legend .k-gen { color: #8A6424; }
.fm-pairtext { min-height: 1em; margin: 8px 0 0; }
.fm-pairtext p { padding: 11px 13px; border-radius: 8px; border: 1px solid #D9C8A8; background: #FFFDF8; }

/* 10-year periods */
.fm-needsex { margin: 12px 0 0; padding: 13px; border-radius: 8px; border: 1px dashed #C9A868; }
.fm-needsex p { margin: 0 0 10px; font: 13.5px/1.6 'Sarabun', sans-serif; color: #5E4A3D; }
.fm-needsex .btn { width: 100%; min-height: 44px; }
.fm-dec { list-style: none; margin: 12px 0 0; padding: 0 0 0 16px; border-left: 2px solid #E4D2A9; display: grid; gap: 12px; }
.fm-dec li { position: relative; display: grid; gap: 1px; }
.fm-dec li::before { content: ""; position: absolute; left: -22px; top: 6px; width: 10px; height: 10px; border-radius: 50%; background: #FFF9EB; box-shadow: 0 0 0 2px #C9A868; }
.fm-dec li.is-cur::before { background: #951A22; box-shadow: 0 0 0 2px #951A22, 0 0 0 5px rgba(149, 26, 34, .15); }
.fm-dec-y { font: 500 12.5px 'Oswald', sans-serif; color: #86715E; letter-spacing: .2px; }
.fm-dec-y i { font: 500 11px/1.7 'Kanit', sans-serif; font-style: normal; margin-left: 8px; padding: 1px 8px; border-radius: 999px; background: #951A22; color: #FFF3D6; }
.fm-dec b { font: 500 14.5px/1.4 'Kanit', sans-serif; color: #5E4A3D; }
.fm-dec li.is-cur b { font-weight: 600; font-size: 16px; color: #382C27; }
.fm-dec p { margin: 2px 0 0; font: 13.5px/1.6 'Sarabun', sans-serif; color: #5E4A3D; }

.fm-save { width: 100%; margin: 26px 0 0; }
.fm-how { margin: 12px 0 0; font: 11.5px/1.65 'Sarabun', sans-serif; color: #86715E; }

@media (max-width: 350px) { .fm-chips { grid-template-columns: 1fr; } .fm-yd li { grid-template-columns: 26px minmax(0, 1fr) auto; } .fm-yd-t { grid-column: 2 / -1; } }
@media (prefers-reduced-motion: reduce) { .fm-chip, .fm-lg { transition: none; } .fm-chip:active, .fm-lg:active { transform: none; } }