/* The public page: on top of style.css. */
.human { display: flex; justify-content: center; margin: 0 0 12px; }
.human:empty { display: none; }

.lite-steps li { justify-content: flex-start; }
.lite-steps li.skipped { opacity: .45; }
.lite-steps li.skipped::before { content: "–"; }

.adding { margin: 8px 0 0; font-size: 13px; color: var(--accent); }
.art.loading img.reveal { filter: blur(8px) saturate(.7); }
.catalog { color: var(--text); }

/* rotate the photo: a round button on its top-right corner */
.rotate {
  position: absolute; top: 10px; right: 10px; z-index: 2; width: 40px; height: 40px; padding: 9px;
  border: 0; border-radius: 50%; cursor: pointer; line-height: 0;
  background: rgba(17, 17, 17, .72); color: var(--text); box-shadow: 0 0 0 1px rgba(255, 255, 255, .18);
}
.rotate svg { width: 100%; height: 100%; fill: currentColor; }
.rotate:hover, .rotate:focus-visible { color: var(--accent); outline: none; }
.rotate:active svg { transform: rotate(90deg); transition: transform .15s; }


/* Cloudflare wants a click: frame the checkbox so it's easy to spot */
.human.ask { padding: 10px; border: 1px solid var(--accent); border-radius: 12px; flex-direction: column; align-items: center; gap: 6px; }
.human.ask::before { content: "One quick check before we search:"; color: var(--muted); font-size: 14px; line-height: 1.3; }