/* The class is photo-promise, not privacy-note: an ad blocker's annoyance list hides every element of that class, and
   "Your photos and privacy" was not shown at all in such a browser. Keep "privacy", "cookie" and "consent" out of its name. */
/* "Your photos & privacy" (macros.html privacy_note) and "Erase my photos now" (app-status-privacy.js). */
.photo-promise { margin: 14px 0 4px; font-size: .88rem; color: var(--ink-dim); }
/* The whole row is the button, its chevron at the right edge: down when closed, up when open. */
.photo-promise summary { display: flex; align-items: center; justify-content: space-between; gap: 8px; min-height: 44px; cursor: pointer; list-style: none; color: var(--muted); }
.photo-promise summary::after { content: ""; flex: none; width: 7px; height: 7px; margin: 0 4px 4px 0; border: solid currentColor; border-width: 0 1.6px 1.6px 0; transform: rotate(45deg); transition: transform .2s ease; }
.photo-promise[open] summary::after { margin: 4px 4px 0 0; transform: rotate(-135deg); }
.photo-promise summary:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 6px; }
.photo-promise summary::-webkit-details-marker { display: none; }
.photo-promise summary:hover, .photo-promise[open] summary { color: var(--ink); }
.privacy-body { margin-top: 4px; padding: 12px 14px; border-radius: var(--r-md); background: var(--surface); border: 1px solid var(--line); }
.privacy-body p { margin: 0 0 10px; line-height: 1.5; }
.privacy-erase { margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--line); }
.privacy-erase[hidden] { display: none; }
@media (prefers-reduced-motion: reduce) { .photo-promise summary::after { transition: none; } }
.erase-confirm { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 10px; }
.erase-confirm[hidden] { display: none; }
.erase-confirm p { flex-basis: 100%; margin: 0 0 4px; color: var(--ink); }
.erase-yes { background: var(--danger); color: var(--on-danger); border: 0; border-radius: var(--r-pill); padding: 8px 16px; font-weight: 700; cursor: pointer; }
.erase-yes:disabled { opacity: .6; cursor: progress; }
#erase-status:empty { display: none; }
/* Snaps on the finished page (status/app-status-snaps.js): the photos three across, Share and Save above them. */
.snaps { margin-top: 18px; }
.snaps[hidden] { display: none; }
.snaps-actions { display: flex; flex-wrap: wrap; gap: 10px; margin: 10px 0 4px; }
.snaps-actions [hidden] { display: none; }
.snaps-grid { list-style: none; margin: 10px 0 14px; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.snaps-grid li { min-width: 0; }
.snaps-grid .snap { display: block; width: 100%; aspect-ratio: 1; padding: 0; border: 1px solid var(--line); border-radius: var(--r-md);
  overflow: hidden; background: var(--surface-2); cursor: pointer; }
.snaps-grid .snap img { width: 100%; height: 100%; object-fit: cover; display: block; }
@media (min-width: 700px) { .snaps-grid { grid-template-columns: repeat(5, minmax(0, 1fr)); } }