/* Paket 13: tab Petugas Keluarga. Memakai variabel tema (mode terang dan gelap otomatis). */
.fm-bar { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; justify-content: space-between; margin: 6px 0 12px; padding: 12px 14px; background: var(--card); border: 1px solid var(--line); border-radius: 12px; }
.fm-grp { margin-top: 18px; }
.fm-h { margin: 0 0 8px; display: flex; align-items: baseline; gap: 10px; font: 700 1.2rem/1.2 var(--serif); color: var(--text); }
.fm-h::before { content: '◆'; font-size: .5rem; color: var(--gold, #b08d4f); transform: translateY(-.15em); }
.fm-list { background: var(--card); border: 1px solid var(--line); border-radius: 12px; overflow: hidden; }
.fm-row { display: grid; grid-template-columns: minmax(180px, 1fr) minmax(0, 1.4fr); gap: 8px 18px; padding: 12px 16px; border-top: 1px solid var(--line); align-items: center; }
.fm-row:first-child { border-top: 0; }
.fm-role b { color: var(--text); margin-right: 8px; }
.fm-role small, .fm-who small { display: block; color: var(--muted); font-size: .8rem; margin-top: 2px; }
.fm-who { display: flex; flex-wrap: wrap; gap: 4px 14px; align-items: baseline; }
.fm-name { font-weight: 600; color: var(--text); }
.fm-blank { color: var(--muted); font-style: italic; }
.fm-ph { color: var(--gold, #9a7a3a); font-size: .9rem; text-decoration: none; }
a.fm-ph:hover { text-decoration: underline; }
.fm-who small { flex-basis: 100%; }
.fm-in { display: grid; grid-template-columns: 1.3fr 1fr; gap: 8px; }
.fm-in input:last-child { grid-column: 1 / -1; }
@media (max-width: 720px) { .fm-row { grid-template-columns: 1fr; } .fm-in { grid-template-columns: 1fr; } }