/* GROWLMASTER V2: A PICTURE WHILE IT COMES, AND THE PLACE OF ONE (Maayan, 2026-11-06). The kit's picture boxes (a
   sheet's picture, a card's and a row's thumbnail, a face): while the picture loads, GrowlMaster's pin (its open eye,
   /growlmaster/icons/pin-open.svg) small in the middle, its opacity breathing slowly, never its size; come, the
   picture fades in and the pin goes; none (or one that could not load), the same pin, still. The state is the
   picture's own (lib/growlmaster/picturesLoad.js data-pic); before that script runs nothing is hidden. Tokens only. */
.gm2-pics :is(.g-picture, .g-avatar) > img { transition: opacity var(--g-slow) var(--g-ease); }
.gm2-pics :is(.g-picture, .g-avatar) > img:not([hidden]):not([data-pic]) { opacity: 0; }
.gm2-pics :is(.g-picture, .g-avatar):has(> img:not([hidden]):not([data-pic]))::before,
.g-avatar:has(> img[data-pic="none"])::before {
  content: ""; position: absolute; inset: 0; margin: auto; width: min(var(--g-face), 50%); height: min(var(--g-face), 50%); pointer-events: none;
  background: currentColor; -webkit-mask: url(/growlmaster/icons/pin-open.svg) center / contain no-repeat; mask: url(/growlmaster/icons/pin-open.svg) center / contain no-repeat; }
.gm2-pics :is(.g-picture, .g-avatar):has(> img:not([hidden]):not([data-pic]))::before { animation: g-breathe calc(var(--g-slow) * 5) var(--g-ease) infinite; }
@keyframes g-breathe { 0%, 100% { opacity: .6; } 50% { opacity: .15; } }
/* the place of a picture: the same pin, still, small */
.g-picture__none svg { width: var(--g-face); height: var(--g-face); }
/* none on a sheet that may change it: "Add image" under the pin, in place of the pencil (kit.js pictureSlot) */
.g-picture__none:has(+ .g-picture__add:not([hidden])) { margin-bottom: var(--g-6); }
.g-picture__add { position: absolute; left: 50%; bottom: var(--g-3); translate: -50% 0; min-height: var(--g-touch); padding: 0 var(--g-3); border: 0; background: none;
  color: var(--g-accent); font: inherit; font-size: var(--g-t-sub); font-weight: var(--g-w-semibold); cursor: pointer; }
.g-picture__add[hidden] { display: none; }
@media (prefers-reduced-motion: reduce) {
  .gm2-pics :is(.g-picture, .g-avatar):has(> img:not([hidden]):not([data-pic]))::before { animation: none; opacity: .3; }
  .gm2-pics :is(.g-picture, .g-avatar) > img { transition: none; }
}