/* Flip & Rotate Image — local styles (site.css/ui.js/layout.html are shared and not edited here). */

/* ---------- Action buttons (mirror / flip / turn) ---------- */
.if-actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: .55rem;
}
.if-action {
  flex-direction: column;
  gap: .2rem;
  min-height: 74px;
  padding: .7rem .6rem;
  text-align: center;
  white-space: normal;
}
.if-action .icon { width: 22px; height: 22px; }
.if-action-label { font-weight: 650; font-size: .88rem; line-height: 1.15; }
.if-action-sub { font-weight: 500; font-size: .74rem; color: var(--text-faint); }
.if-action-wide { grid-column: 1 / -1; flex-direction: row; min-height: 50px; }
.if-action-wide .if-action-label { margin-inline-end: .3em; }

/* Squash/rotate "juice" so each action reads clearly, without pretending to draw the real flip. */
.if-anim-x { animation: if-squash-x .32s var(--ease-spring) both; }
.if-anim-y { animation: if-squash-y .32s var(--ease-spring) both; }
.if-anim-cw { animation: if-nudge-cw .32s var(--ease-spring) both; }
.if-anim-ccw { animation: if-nudge-ccw .32s var(--ease-spring) both; }
.if-anim-pop { animation: if-pop .38s var(--ease-spring) both; }
@keyframes if-squash-x { 0% { transform: scaleX(.82); opacity: .75; } 55% { transform: scaleX(1.05); opacity: 1; } 100% { transform: scaleX(1); } }
@keyframes if-squash-y { 0% { transform: scaleY(.82); opacity: .75; } 55% { transform: scaleY(1.05); opacity: 1; } 100% { transform: scaleY(1); } }
@keyframes if-nudge-cw { 0% { transform: rotate(-7deg) scale(.95); opacity: .8; } 100% { transform: rotate(0) scale(1); opacity: 1; } }
@keyframes if-nudge-ccw { 0% { transform: rotate(7deg) scale(.95); opacity: .8; } 100% { transform: rotate(0) scale(1); opacity: 1; } }
@keyframes if-pop { 0% { transform: scale(.88) rotate(-4deg); opacity: .8; } 55% { transform: scale(1.04) rotate(1deg); } 100% { transform: scale(1) rotate(0); opacity: 1; } }

/* ---------- State text / reset row ---------- */
.if-state {
  margin: .7rem 0 0; padding: .5rem .75rem;
  background: var(--primary-softer); color: var(--primary);
  border-radius: var(--radius-sm); font-weight: 600; font-size: .86rem; text-align: center;
}
.if-reset-row { margin-top: .7rem; flex-wrap: wrap; gap: .5rem; }
.if-key-hint { display: inline-flex; align-items: center; gap: .4em; margin: 0; }
.if-key-hint .icon { width: 15px; height: 15px; flex: none; }

/* ---------- Straighten grid overlay ---------- */
.if-grid {
  position: absolute; inset: 0; pointer-events: none;
  opacity: 0; transition: opacity .18s var(--ease);
  background-image:
    linear-gradient(color-mix(in srgb, var(--primary) 55%, transparent) 1px, transparent 1px),
    linear-gradient(90deg, color-mix(in srgb, var(--primary) 55%, transparent) 1px, transparent 1px);
  background-size: 33.34% 33.34%;
  background-position: center;
}
.if-grid.is-visible { opacity: 1; }

/* ---------- Corner colour swatches ---------- */
.if-bg-row { display: flex; flex-wrap: wrap; align-items: center; gap: .55rem; }
.if-swatch-transparent {
  background-color: var(--checker-b);
  background-image: conic-gradient(var(--checker-a) 25%, transparent 0 50%, var(--checker-a) 0 75%, transparent 0);
  background-size: 12px 12px;
}
.if-bg-custom-wrap { position: relative; display: inline-flex; width: 34px; height: 34px; }
.if-bg-custom-wrap input[type="color"] {
  width: 34px; height: 34px; padding: 0; border-radius: 50%; border: 2px solid var(--surface);
  box-shadow: 0 0 0 1px var(--border-strong);
}
/* Touch: match the 40px tap target the shared .swatch buttons next to it already get at this pointer type. */
@media (pointer: coarse) {
  .if-bg-custom-wrap, .if-bg-custom-wrap input[type="color"] { width: 40px; height: 40px; }
}
.if-bg-custom-icon {
  position: absolute; inset: 0; margin: auto; width: 15px; height: 15px;
  color: #fff; mix-blend-mode: difference; pointer-events: none;
}

/* ---------- File list extras (row states not covered by the shared .file-item) ---------- */
.file-item { cursor: pointer; transition: border-color .15s, background-color .15s; }
.file-item.is-active { border-color: var(--primary); background: var(--primary-softer); }
.file-item.is-error { border-color: color-mix(in srgb, var(--danger) 40%, var(--border)); }
.if-row-actions { display: flex; align-items: center; gap: .35rem; flex: none; }
.if-file-status { display: inline-flex; align-items: center; gap: .35em; font-size: .78rem; color: var(--text-faint); }
.if-file-status-error { color: var(--danger); }
.if-file-status .icon { width: 14px; height: 14px; }

@media (max-width: 480px) {
  .if-action { min-height: 68px; }
}