/* Attachments on the posting page (2026-10-22): the drop zone, previews, rotate */
.ks-drop { display:flex; gap:0.6rem; align-items:center; margin:0.6rem 0; padding:0.8rem 1rem; border:2px dashed rgba(127,127,127,0.5); border-radius:6px; font-size:0.9em; line-height:1.45; }
.ks-drop .fa { font-size:1.6em; opacity:0.7; }
form.ks-dragging .ks-drop { border-color:#c9a227; background:rgba(201,162,39,0.08); }
form.ks-dragging #message { outline:2px dashed #c9a227; }
.ks-attach-thumb { width:56px; height:56px; object-fit:cover; border-radius:4px; float:left; margin:0 0.6rem 0.3rem 0; background:rgba(127,127,127,0.15); }
.ks-rotate { display:inline-flex; gap:0.25rem; margin-left:0.4rem; vertical-align:middle; }
.ks-rotate .btn { padding:0 0.45rem; line-height:1.6; }
.ks-drop.ks-converting::after { content:'Converting a HEIC photo…'; margin-left:auto; font-style:italic; opacity:0.8; white-space:nowrap; }
/* turning a photo (2026-10-22): the preview turns at once, dims with a spinner, then a brief ✓ */
.ks-thumb-wrap { position:relative; float:left; width:56px; height:56px; margin:0 0.6rem 0.3rem 0; }
.ks-thumb-wrap .ks-attach-thumb { float:none; margin:0; display:block; transition:transform 0.25s ease, opacity 0.2s ease; }
.ks-thumb-wrap.ks-turning .ks-attach-thumb { opacity:0.45; }
.ks-thumb-wrap.ks-turning::after { content:''; position:absolute; top:50%; left:50%; width:20px; height:20px; margin:-10px 0 0 -10px;
  border:2px solid rgba(255,255,255,0.35); border-top-color:#c9a227; border-radius:50%; animation:ks-spin 0.7s linear infinite; }
.ks-thumb-wrap.ks-turned::after { content:'✓'; position:absolute; right:-4px; bottom:-4px; width:18px; height:18px; border-radius:50%;
  background:#3c9a5f; color:#fff; font-size:12px; line-height:18px; text-align:center; animation:ks-pop 1.4s ease forwards; }
@keyframes ks-spin { to { transform:rotate(360deg); } }
@keyframes ks-pop { 0% { transform:scale(0.4); opacity:0; } 15% { transform:scale(1.1); opacity:1; } 80% { opacity:1; } 100% { opacity:0; } }
.ks-rotate .btn:disabled { opacity:0.45; cursor:progress; }
.ks-rotate-note { font-size:0.8em; color:#d9534f; margin-left:0.4rem; align-self:center; }
@media (prefers-reduced-motion: reduce) { .ks-thumb-wrap .ks-attach-thumb { transition:none; } .ks-thumb-wrap.ks-turning::after { animation:none; } }