.photo-with-caption[data-photo-rotation]{position:relative}
.photo-with-caption[data-photo-rotation] > img[data-photo-rotate-target]{transform:rotate(var(--photo-rotation,0deg));transform-origin:center;transition:transform .22s ease}
.photo-with-caption[data-photo-rotation="90"] > img[data-photo-rotate-target],
.photo-with-caption[data-photo-rotation="270"] > img[data-photo-rotate-target]{aspect-ratio:1/1;object-fit:contain!important;background:#f3ece2}

/* The whole corner stays easy to touch, but no permanent large control is
   painted over the family photo. The tiny controls appear after that touch. */
.photo-rotation-corner{position:absolute;z-index:5;left:4px;top:4px;width:36px!important;height:36px!important;padding:0!important;border:0!important;border-radius:8px!important;background:transparent!important;color:#fff!important;opacity:.015;box-shadow:none!important;touch-action:manipulation}
.photo-rotation-corner span{font-size:15px;line-height:1}
.photo-with-caption.rotation-tools-open .photo-rotation-corner,
.photo-rotation-corner:focus-visible{opacity:.85;background:#221e1bd1!important}
.photo-rotation-tools{position:absolute;z-index:6;left:5px;top:43px;display:flex;gap:4px;opacity:0;visibility:hidden;pointer-events:none;transform:translateY(-5px);transition:opacity .14s ease,transform .14s ease,visibility .14s}
.photo-with-caption.rotation-tools-open .photo-rotation-tools{opacity:1;visibility:visible;pointer-events:auto;transform:none}
.photo-rotation-tools button{display:grid!important;place-items:center;width:30px!important;height:30px!important;min-width:0!important;padding:0!important;border:1px solid #fff9!important;border-radius:8px!important;background:#221e1be8!important;color:#fff!important;font-size:16px!important;line-height:1!important;box-shadow:0 2px 9px #0005!important;touch-action:manipulation}
.photo-rotation-tools button:disabled{opacity:.45}
.photo-rotation-toast{position:fixed;z-index:2147483647;left:50%;bottom:max(18px,env(safe-area-inset-bottom));translate:-50% 0;padding:9px 13px;border-radius:999px;background:#26211eea;color:#fff;font-size:.82rem;font-weight:800;box-shadow:0 6px 24px #0004;pointer-events:none}

.image-viewer-rotation-corner{position:absolute!important;z-index:8!important;left:max(5px,env(safe-area-inset-left))!important;top:max(5px,env(safe-area-inset-top))!important;width:40px!important;height:40px!important;padding:0!important;border:0!important;border-radius:9px!important;background:transparent!important;color:#fff!important;opacity:.015;box-shadow:none!important;touch-action:manipulation}
.image-viewer-rotation-corner[hidden],.image-viewer-rotation-tools[hidden]{display:none!important}
.image-viewer-overlay.rotation-tools-open .image-viewer-rotation-corner,.image-viewer-rotation-corner:focus-visible{opacity:.9;background:#221e1bdc!important}
.image-viewer-rotation-corner span{font-size:16px;line-height:1}
.image-viewer-rotation-tools{position:absolute;z-index:9;left:max(6px,env(safe-area-inset-left));top:max(50px,calc(env(safe-area-inset-top) + 50px));display:flex;gap:5px}
.image-viewer-rotation-tools button{display:grid!important;place-items:center;width:32px!important;height:32px!important;min-width:0!important;padding:0!important;border:1px solid #fff9!important;border-radius:8px!important;background:#221e1bee!important;color:#fff!important;font-size:17px!important;line-height:1!important;box-shadow:0 2px 10px #0006!important;touch-action:manipulation}

@media(pointer:fine){.photo-rotation-corner:hover,.image-viewer-rotation-corner:hover{opacity:.7;background:#221e1bb8!important}}
@media(pointer:coarse){
  .photo-rotation-corner{width:40px!important;height:40px!important}
  .photo-rotation-tools{top:47px}
  .photo-rotation-tools button{width:32px!important;height:32px!important}
  .image-viewer-overlay.photo-has-rotation .image-viewer-stage{display:grid!important;place-items:center!important;overflow:auto!important;padding:0!important}
  .image-viewer-overlay.photo-has-rotation .image-viewer-stage img{display:block!important;width:auto!important;height:auto!important;max-width:100vw!important;max-height:100dvh!important;margin:auto!important;transform-origin:center center!important}
  .image-viewer-overlay.photo-quarter-turn .image-viewer-stage img{max-width:100dvh!important;max-height:100vw!important}
}