/* Full-size family photo with mouse, keyboard, and two-finger zoom. */
.family-photo-open { position: relative; display: inline-flex; flex: 0 0 54px; width: 54px; height: 54px; border-radius: 50%; }
.family-photo-open > span { position: absolute; right: -2px; bottom: -2px; width: 19px; height: 19px; background: #253d30; color: white; border: 2px solid var(--paper); border-radius: 50%; font: 14px/15px system-ui; text-align: center; }
.photo-dialog { width: min(1100px, 100vw - 24px); max-width: none; height: min(920px, 100dvh - 24px); max-height: none; padding: 0; border: 1px solid #ffffff25; border-radius: 16px; background: #14201b; color: white; overflow: hidden; }
.photo-dialog::backdrop { background: #07130deb; backdrop-filter: blur(10px); }
.photo-toolbar { height: 66px; display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 8px 14px; }
.photo-toolbar > span { font: italic 1.15rem Georgia, serif; }
.photo-toolbar > div { display: flex; gap: 6px; }
.photo-toolbar button { min-width: 44px; min-height: 44px; border-radius: 8px; border: 1px solid #ffffff40; background: #ffffff12; color: white; font: 18px system-ui; cursor: pointer; touch-action: manipulation; }
.photo-stage { position: relative; height: calc(100% - 110px); overflow: hidden; touch-action: none; cursor: grab; }
.photo-stage:active { cursor: grabbing; }
.photo-stage img { position: absolute; left: 0; top: 0; width: 100%; height: 100%; max-width: none; object-fit: contain; transform-origin: center; user-select: none; -webkit-user-select: none; }
.photo-instructions { height: 44px; margin: 0; padding: 12px; color: #c7d7cb; text-align: center; font-size: .65rem; }
@media(max-width: 480px) { .photo-dialog { width: calc(100vw - 12px); height: calc(100dvh - 12px); border-radius: 12px; } .photo-toolbar { padding: 8px; } .photo-toolbar > span { font-size: .94rem; } .photo-instructions { font-size: .56rem; } }