/* Penanda keluarga — tampilan chip dua-orang, kartu ringkasan, dan panel di drawer.
   Memakai token Astryx (tema neutral); tanpa emoji, semua ikon SVG. */

/* ---------- chip penanda per orang ---------- */
.chip-baris { display:flex; gap:5px; flex-wrap:wrap; margin-top:4px; }
.chip-penanda {
  display:inline-flex; align-items:center; gap:4px; padding:1px 7px 1px 2px;
  border:1px solid var(--color-border-emphasized); border-radius:999px;
  font-size:var(--font-size-xs); font-weight:var(--font-weight-medium);
  background:var(--color-background-muted); color:var(--color-text-secondary); white-space:nowrap;
}
.chip-penanda .inisial {
  width:16px; height:16px; border-radius:999px; display:grid; place-items:center;
  font-size:9px; font-weight:700; background:var(--color-background-inverted); color:var(--color-text-inverted);
}
.chip-penanda .ikon { width:11px; height:11px; }
.chip-penanda.belum { border-style:dashed; }
.chip-penanda.belum .inisial { background:transparent; color:var(--color-text-secondary);
  border:1px dashed var(--color-border-emphasized); }
.chip-penanda.dilihat { border-color:var(--color-accent); color:var(--color-text-accent); }
.chip-penanda.dilihat .inisial { background:var(--color-accent); color:var(--color-on-accent); }
.chip-penanda.suka { border-color:var(--color-success); color:var(--color-success); background:var(--color-success-muted); }
.chip-penanda.suka .inisial { background:var(--color-success); color:#fff; }
.chip-penanda.tolak { border-color:var(--color-error); color:var(--color-error); background:var(--color-error-muted); }
.chip-penanda.tolak .inisial { background:var(--color-error); color:#fff; }
.chip-penanda.ragu { border-color:var(--color-warning); color:var(--color-warning); background:var(--color-warning-muted); }
.chip-penanda.ragu .inisial { background:var(--color-warning); color:#fff; }

/* warna kesimpulan status gabungan */
[data-tingkat="hijau"] { color:var(--color-success); }
[data-tingkat="merah"] { color:var(--color-error); }
[data-tingkat="kuning"] { color:var(--color-warning); }

/* ---------- kartu ringkasan (bisa diklik sebagai filter) ---------- */
.stat-kartu {
  text-align:left; cursor:pointer; font-family:inherit; color:var(--color-text-primary);
  border:1px solid var(--color-border); background:var(--color-background-card);
  border-radius:var(--radius-md); padding:10px 14px; min-width:132px;
}
.stat-kartu .angka { font-size:var(--font-size-2xl); font-weight:var(--font-weight-semibold); }
.stat-kartu .keterangan { font-size:var(--font-size-xs); color:var(--color-text-secondary); }
.stat-kartu:hover { background:var(--color-background-muted); }
.stat-kartu.aktif { border-color:var(--color-accent); box-shadow:inset 0 0 0 1px var(--color-accent); }
.stat-kartu.aksi { border-color:var(--color-accent); background:var(--color-accent-muted); }
.stat-kartu.hijau .angka { color:var(--color-success); }
.stat-kartu.merah .angka { color:var(--color-error); }
.stat-kartu.kuning .angka { color:var(--color-warning); }

/* ---------- panel dua-orang di drawer ---------- */
.panel-penanda {
  border:1px solid var(--color-border); border-radius:var(--radius-md);
  padding:12px 14px; margin-top:12px; background:var(--color-background-card);
}
.panel-penanda.pasangan { background:var(--color-background-muted); }
.panel-penanda-kosong { border:1px dashed var(--color-border-emphasized); border-radius:var(--radius-md);
  padding:12px 14px; margin-top:12px; text-align:center; }
.head-panel { display:flex; align-items:center; gap:8px; }
.inisial.besar {
  width:26px; height:26px; border-radius:999px; display:grid; place-items:center;
  font-size:11px; font-weight:700; color:#fff; background:var(--color-accent);
}
.inisial.besar.pasangan { background:var(--color-success); }
.panel-penanda input { width:100%; margin-top:4px; padding:8px 10px; border-radius:var(--radius-sm);
  border:1px solid var(--color-border-emphasized); background:var(--color-background-card);
  color:var(--color-text-primary); font-family:inherit; font-size:var(--font-size-sm); }

/* ---------- tombol reaksi ---------- */
.btn.suka { border-color:var(--color-success); color:var(--color-success); }
.btn.suka.aktif { background:var(--color-success); border-color:var(--color-success); color:#fff; }
.btn.tolak { border-color:var(--color-error); color:var(--color-error); }
.btn.tolak.aktif { background:var(--color-error); border-color:var(--color-error); color:#fff; }
.btn.ragu { border-color:var(--color-warning); color:var(--color-warning); }
.btn.ragu.aktif { background:var(--color-warning); border-color:var(--color-warning); color:#fff; }
.btn.aktif { background:var(--color-background-inverted); border-color:var(--color-background-inverted);
  color:var(--color-text-inverted); }
.btn.suka.aktif, .btn.tolak.aktif, .btn.ragu.aktif { color:#fff; }
.btn.kecil { padding:3px 9px; font-size:var(--font-size-xs); }


/* ---------- halaman "Pilihan Kita" (analitik penanda) ---------- */
.kelompok { margin-bottom: var(--spacing-4); }
.kelompok h3 { font-size: var(--font-size-sm); margin: 0 0 var(--spacing-2); }
.baris-rumah {
  display: flex; justify-content: space-between; gap: var(--spacing-3); align-items: center;
  padding: 8px 10px; border: 1px solid var(--color-border); border-radius: var(--radius-sm);
  margin-bottom: 6px; cursor: pointer; background: var(--color-background-card);
}
.baris-rumah:hover { background: var(--color-background-muted); }
.baris-rumah .info { min-width: 0; }
.baris-rumah .nama { font-weight: var(--font-weight-medium); font-size: var(--font-size-sm); overflow-wrap: anywhere; }
.baris-rumah .nilai { text-align: right; flex: 0 0 auto; }
.baris-rumah .harga { font-weight: var(--font-weight-semibold); font-size: var(--font-size-sm); white-space: nowrap; }
.daftar-preferensi { margin: 0; padding-left: 18px; font-size: var(--font-size-sm); }
.daftar-preferensi li { margin-bottom: 5px; }
.baris-batang {
  display: grid; grid-template-columns: minmax(72px, 30%) 1fr auto; gap: 8px;
  align-items: center; margin-bottom: 5px; font-size: var(--font-size-xs);
}
.baris-batang .label { overflow-wrap: anywhere; }
.baris-batang .jalur { display: block; background: var(--color-background-muted);
  border-radius: 999px; height: 8px; overflow: hidden; }
.baris-batang .isi { display: block; height: 100%; border-radius: 999px; }
.baris-batang .angka { white-space: nowrap; }
.tabel-ringkas { width: 100%; border-collapse: collapse; font-size: var(--font-size-xs); }
.tabel-ringkas th, .tabel-ringkas td { padding: 5px 6px; border-bottom: 1px solid var(--color-border); text-align: left; }
.tabel-ringkas th { color: var(--color-text-secondary); font-weight: var(--font-weight-medium); }
.tabel-ringkas .num { text-align: right; font-variant-numeric: tabular-nums; }

@media (max-width: 760px) {
  .baris-rumah { flex-wrap: wrap; }
  .baris-rumah .nilai { text-align: left; }
  .baris-batang { grid-template-columns: 1fr auto; }
  .baris-batang .jalur { grid-column: 1 / -1; }
}