/* One relationship language: a heart and a bar, without numeric scores. */
.relationship-meter { display: flex; align-items: center; gap: 10px; width: 100%; min-width: 0; color: var(--accent); }
.relationship-track { display: block; position: relative; flex: 1; min-width: 0; height: 7px; overflow: hidden; border-radius: 99px; background: var(--line); }
.relationship-fill, .relationship-trail { position: absolute; inset: 0 auto 0 0; display: block; border-radius: inherit; }
.relationship-fill { width: var(--relation-to); background: currentColor; }
.relationship-trail { width: var(--relation-from); background: currentColor; opacity: .28; }
.relationship-meter > .icon { flex: 0 0 18px; width: 18px; height: 18px; fill: currentColor; }
.relationship-meter.is-animated .relationship-fill { animation: relationship-change 1.1s cubic-bezier(.2,.7,.25,1) .25s both; }
.relationship-meter.is-animated.increasing > .icon { animation: relationship-heart .7s ease-in-out .5s 2; }
.relationship-meter.is-animated.decreasing > .icon { animation: relationship-heart-fade 1.1s ease .25s both; }
@keyframes relationship-change { from { width: var(--relation-from); } to { width: var(--relation-to); } }
@keyframes relationship-heart { 50% { transform: scale(1.2); } }
@keyframes relationship-heart-fade { 40% { opacity: .35; } }
.contact-overlay .relationship-meter { margin-top: 12px; color: #ff9bbb; }
.contact-overlay .relationship-track { background: #ffffff30; }
.contact-overlay .relationship-meter > .icon { width: 15px; height: 15px; flex-basis: 15px; }
.summary-entry .relationship-meter, .journal .relationship-meter { max-width: 260px; margin: 12px 0; }
.neglect-report .neglect-person { display: grid; grid-template-columns: minmax(60px, auto) minmax(60px, 1fr); align-items: center; gap: 8px 14px; padding: 12px 0; border-top: 1px solid var(--line); }
.neglect-person > small { grid-column: 1 / -1; font-size: 11px; color: var(--muted); }
.neglect-person .relationship-meter { margin: 0; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }

/* Contacts share the image-overlay layout used by management cards. */
.person-card { position: relative; overflow: hidden; background: #24212f; }
.person-card .card-open { display: block; width: 100%; aspect-ratio: 5/7; min-height: 240px; padding: 0; color: #fff9f2; }
.person-card .card-open > .portrait { position: absolute; top: 0; left: 50%; height: 100%; width: auto; min-width: 100%; transform: translateX(-50%); }
.person-card .card-open::after { inset: 0; background: linear-gradient(180deg, transparent 30%, #15121b55 53%, #15121bf0 90%); }
.contact-overlay { position: absolute; z-index: 1; bottom: 16px; left: 14px; right: 14px; text-align: left; text-shadow: 0 2px 9px #0006; }
.person-card.complete:has(.confess-mini) .contact-overlay { bottom: 66px; }
.person-card.complete .card-open { min-height: 290px; }
.person-card .confess-mini { position: absolute; z-index: 2; left: 12px; right: 12px; bottom: 12px; width: calc(100% - 24px); margin: 0; }
.hunt-place-card:disabled { opacity: .45; cursor: not-allowed; filter: saturate(.4); }
.hunt-counts { align-items: center; flex-wrap: wrap; }
.hunt-counts p { margin: 0; font-size: 14px; color: var(--muted); }
@media (max-width: 540px) {
  .person-card .card-open { min-height: 230px; }
  .contact-overlay { left: 10px; right: 10px; bottom: 12px; }
  .hunt-place-card { min-height: 180px; }
  .hunt-counts > span { flex: none; }
}