/* Quick camera: a steady shutter button at the bottom right while exploring, a crisp shutter,
   and a small print of the newest shot that opens the photo booth. */
.quick-camera-dock {
  position: absolute; z-index: 19;
  right: var(--qc-right, calc(54px + var(--safe-right, 0px)));
  bottom: var(--qc-bottom, calc(231px + var(--safe-bottom, 0px)));
  width: 54px; height: 54px;
  opacity: 0; visibility: hidden; pointer-events: none;
  transition: opacity .25s ease, visibility 0s linear .25s, bottom .35s cubic-bezier(.2,.8,.3,1);
}
.quick-camera-dock.is-ready { opacity: 1; visibility: visible; pointer-events: auto; transition: opacity .25s ease, visibility 0s, bottom .35s cubic-bezier(.2,.8,.3,1); }
/* Compact layouts: stacked directly above Bloom (54px tall, 22px up) with an 11px gap. */
body[data-compact=true] .quick-camera-dock { right: calc(20px + var(--safe-right, 0px)); bottom: calc(87px + var(--safe-bottom, 0px)); }

.quick-camera {
  display: grid; place-items: center; width: 100%; height: 100%; padding: 0;
  color: var(--cream, #f3f0dd); background: #183e2bd9;
  border: 1px solid #d2dfb24d; border-radius: 50%;
  box-shadow: 0 10px 26px #0218104d;
  backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
  touch-action: manipulation; transition: background-color .15s, border-color .15s;
}
.quick-camera svg { width: 23px; height: 23px; stroke-width: 1.45; }
.quick-camera:hover { background-color: #31563ce6; border-color: #dae9bb; }
.quick-camera:active { background-color: #3c6145f0; }
.quick-camera:focus-visible, .quick-roll:focus-visible { outline: 2px solid var(--lime, #cfdfab); outline-offset: 4px; }

/* The newest shot, as a little print that slides out from the camera. */
.quick-roll {
  position: absolute; width: 50px; height: 50px; padding: 3px;
  background: var(--cream, #f3f0dd); border: 0; border-radius: 12px;
  box-shadow: 0 10px 24px #02181073, 0 0 0 1px #cfdfab4d;
  rotate: -4deg; opacity: 0; visibility: hidden;
  transition: opacity .2s ease, translate .3s cubic-bezier(.2,.8,.3,1), visibility 0s linear .3s;
}
.quick-roll[hidden] { display: none; }
.quick-roll[data-side=above] { right: 2px; bottom: calc(100% + 10px); translate: 0 12px; }
.quick-roll[data-side=left] { right: calc(100% + 10px); bottom: 2px; translate: 12px 0; }
.quick-roll.is-shown { opacity: 1; visibility: visible; translate: 0 0; transition: opacity .2s ease, translate .3s cubic-bezier(.2,.8,.3,1), visibility 0s; }
.quick-roll img { display: block; width: 100%; height: 100%; object-fit: cover; border-radius: 9px; }
.quick-roll-count {
  position: absolute; top: -8px; right: -8px; min-width: 21px; height: 21px; padding: 0 6px;
  border-radius: 11px; background: #cfdfab; color: #12251d; box-shadow: 0 0 0 2px #0a1c17;
  font: 400 11px/21px var(--sans, sans-serif); text-align: center; rotate: 4deg;
}
.quick-roll-count:empty { display: none; }

/* Shutter: two dark blades meet in the middle and part again, with a soft flash as they open. */
.quick-shutter { position: absolute; inset: 0; z-index: 40; overflow: hidden; pointer-events: none; }
.quick-shutter[hidden] { display: none; }
.quick-shutter-blade { position: absolute; left: 0; right: 0; height: calc(50% + 1px); background: linear-gradient(#03110c, #0a1c17); }
.quick-shutter-blade:first-child { top: 0; transform: translateY(-112%); border-bottom: 1px solid #cfdfab38; box-shadow: 0 10px 30px #000b; }
.quick-shutter-blade:nth-child(2) { bottom: 0; transform: translateY(112%); background: linear-gradient(#0a1c17, #03110c); border-top: 1px solid #cfdfab38; box-shadow: 0 -10px 30px #000b; }
.quick-shutter-flash { position: absolute; inset: 0; opacity: 0; background: radial-gradient(ellipse at 50% 45%, #fffdf5, var(--cream, #f3f0dd) 55%, #e4efcf); }

/* Compact: the nearby pills and the caption keep their usual centred spot and look. When a pill row reaches
   the camera column, the camera itself rises above the caption band (js/quick-camera.js shareBand, as on
   m-ew.com) and comes back down once the pills go. With the caption's bottom at 148px, a two line caption
   ends about 229px up; 239px leaves about 10px of air. */
body[data-compact=true].quick-camera-lift .quick-camera-dock { bottom: calc(239px + var(--safe-bottom, 0px)); }
/* Narrow phones: the longest captions wrap to three lines (up to about 251px), so the camera rises a line further. */
@media (max-width: 340px) {
  body[data-compact=true].quick-camera-lift .quick-camera-dock { bottom: calc(261px + var(--safe-bottom, 0px)); }
}
/* Short landscape phones: the caption shifts left so it stops clear of the camera column. */
@media (max-height: 500px) and (orientation: landscape) {
  body[data-compact=true].has-quick-camera .forest-notice { left: 60%; width: min(300px, 42vw); }
}
/* The caption rests while Tools is open, so no fragment peeks out beside the panel. */
body:has(#forest-kit[open]) .forest-notice { opacity: 0; }

@media (prefers-reduced-motion: reduce) {
  .quick-roll, .quick-roll.is-shown { translate: 0 0; }
  .quick-camera-dock { transition: opacity .25s ease, visibility 0s linear .25s; }
  .quick-camera-dock.is-ready { transition: opacity .25s ease, visibility 0s; }
}

/* When the print has to share space with the notice caption, the caption steps up above it. */
.forest-notice { transition: opacity .5s, translate .3s cubic-bezier(.2,.8,.3,1); }
body.quick-roll-nudge .forest-notice { translate: -50% -62px; }