/* Photo life — the countdown on a customer's photograph. See /photo-life.js. */
.has-photo-life { position:relative; }
.photo-life { position:absolute; inset:0; pointer-events:none; z-index:3; }

.photo-life-chip {
  position:absolute; top:6px; right:6px; pointer-events:auto; cursor:pointer;
  font:500 11px/1 var(--mono, "IBM Plex Mono", ui-monospace, Consolas, monospace);
  letter-spacing:0.02em; padding:4px 7px; border-radius:999px;
  border:1px solid var(--rule, #222A31); background:rgba(6,8,10,0.78);
  color:var(--ink-soft, #C9CFD4);
}
.photo-life-chip:focus-visible { outline:2px solid var(--amber, #F4B23D); outline-offset:1px; }

/* In the studio's recent strip the top-right corner is the .peek zoom button, the only way
   into the full-size viewer: the chip and its note go to the left instead. */
.recentstrip .photo-life-chip { right:auto; left:6px; }
.recentstrip .photo-life-note { right:auto; left:6px; }

.photo-life[data-tone="amber"] .photo-life-chip { color:var(--amber, #F4B23D); border-color:rgba(244,178,61,0.55); }
.photo-life[data-tone="red"] .photo-life-chip { color:var(--red, #E0705C); border-color:rgba(224,112,92,0.6); }

.photo-life-note {
  position:absolute; top:32px; right:6px; max-width:calc(100% - 12px); pointer-events:auto;
  font-size:11.5px; line-height:1.35; padding:6px 8px; border-radius:6px;
  background:var(--raised, #191F24); border:1px solid var(--rule, #222A31); color:var(--ink, #F7F7F7);
}

.photo-life-line { position:absolute; left:0; right:0; bottom:0; height:3px; background:rgba(255,255,255,0.08); }
.photo-life-fill { display:block; height:100%; width:100%; background:var(--slate, #5B6770); transition:width .6s ease; }
.photo-life[data-tone="amber"] .photo-life-fill { background:var(--amber, #F4B23D); }
.photo-life[data-tone="red"] .photo-life-fill { background:var(--red, #E0705C); }

@media (prefers-reduced-motion: reduce) { .photo-life-fill { transition:none; } }