/* Photo Mapper: the photo in the question sheet and the full-screen viewer. Built on accent.css and history.css. */
.photo-card { position: relative; display: block; width: 100%; padding: 0; margin: 4px 0 10px; border: 1px solid var(--line); border-radius: var(--rx-sm, 3px); background: var(--card-2); overflow: hidden; cursor: zoom-in; height: min(30vh, 220px); }
.photo-card img { display: block; width: 100%; height: 100%; object-fit: cover; }
.photo-zoom { position: absolute; right: 8px; bottom: 8px; display: grid; place-items: center; width: 36px; height: 36px; border-radius: var(--rx-sm, 3px); background: rgba(13, 12, 18, 0.7); color: var(--ink); }
.photo-zoom .material-symbols-rounded { font-size: 22px; }
.photo-view { position: fixed; inset: 0; z-index: 3000; display: grid; place-items: center; padding: 56px 8px 8px; background: rgba(13, 12, 18, 0.96); cursor: zoom-out; }
.photo-view[hidden] { display: none; }
/* The picture is sized against the screen, not its container: a percentage height inside this grid grows with a tall
   photo, so it overflowed and the top and bottom were cut off. Now any photo is shown whole, as large as fits. */
.photo-view { grid-template-columns: minmax(0, 1fr); grid-template-rows: minmax(0, 1fr); overflow: auto; }
.photo-view img { max-width: 100%; max-height: calc(100vh - 64px); max-height: calc(100dvh - 64px); width: auto; height: auto; margin: auto; object-fit: contain; }
.photo-close { position: absolute; top: calc(8px + env(safe-area-inset-top, 0px)); right: 8px; display: grid; place-items: center; width: 44px; height: 44px; border: 1px solid var(--line); border-radius: var(--rx-sm, 3px); background: var(--card); color: var(--ink); cursor: pointer; }
.photo-credit { margin: 4px 0 8px; font-size: 12px; color: var(--muted); overflow-wrap: anywhere; }
.photo-credit a { color: var(--muted); text-decoration: underline; }
@media (min-width: 641px) {
  .photo-card { height: min(34vh, 260px); }
}
/* the photo is a native <details>: its summary row is the label and the Hide/Show button, so it works without JavaScript */
.photo-details > summary { list-style: none; }
.photo-details > summary::-webkit-details-marker { display: none; }
.photo-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; min-height: 44px; cursor: pointer; }
.photo-toggle-text { display: inline-flex; align-items: center; gap: 8px; margin-left: auto; color: var(--muted); font-size: 14px; font-weight: 600; }
.photo-head:hover .photo-toggle-text { color: var(--ink); }
.photo-toggle-text::before { content: "Hide photo"; order: 0; }
.photo-details:not([open]) .photo-toggle-text::before { content: "Show photo"; }
/* a chevron drawn with borders (not an icon font, so it looks the same everywhere): down to hide, up to show */
.photo-toggle-text::after { content: ""; order: 1; width: 8px; height: 8px; margin-top: -3px; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(45deg); }
.photo-details:not([open]) .photo-toggle-text::after { margin-top: 3px; transform: rotate(-135deg); }
.event-card.is-answered .chips { display: none; }

/* the collapsed photo on the results screen */
.photo-ref img { display: block; width: 100%; max-height: 260px; margin-top: 6px; object-fit: cover; border: 1px solid var(--line); border-radius: var(--rx-sm, 3px); }