/* shutterai.cam - object remover tool.
   Uses the site tokens from styles.css: --cream, --cream-2, --ink, --ink-2,
   --muted, --plum, --line, --radius, --serif, --sans. */

.rm {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: #fff;
  padding: 1.2rem;
  margin: 1.6rem 0 2rem;
  font-family: var(--sans);
  max-width: 100%;
}

.rm h3 { font-size: 1.15rem; margin: 0 0 .3rem; }
.rm .rm-sub { font-size: .9rem; color: var(--ink-2); margin: 0 0 1rem; max-width: 62ch; }
.rm .rm-sub b { color: var(--ink); }

/* ---------- drop zone ---------- */
.rm-drop {
  border: 1px dashed var(--line);
  border-radius: 16px;
  background: var(--cream);
  padding: 1.6rem 1.2rem;
  text-align: center;
  transition: border-color .15s ease, background .15s ease;
}
.rm-drop.is-over { border-color: var(--plum); background: var(--cream-2); }
.rm-drop p { margin: .6rem 0 0; font-size: .85rem; color: var(--muted); }

.rm-picker { display: inline-block; }
.rm-pick {
  display: inline-flex; align-items: center; gap: .5rem;
  background: var(--ink); color: var(--cream);
  border-radius: 999px; padding: .7rem 1.2rem;
  font-weight: 700; font-size: .95rem; cursor: pointer;
  font-family: var(--sans);
}
.rm-pick:hover { background: var(--plum); }
.rm input[type="file"] {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.rm input[type="file"]:focus-visible + .rm-pick { outline: 2px solid var(--plum); outline-offset: 3px; }

/* ---------- canvas stage ---------- */
.rm-canvas-wrap {
  position: relative;
  border-radius: 16px;
  overflow: hidden;
  background: var(--cream-2);
  line-height: 0;
  touch-action: none;
}
.rm-canvas-wrap canvas {
  display: block;
  width: 100%;
  height: auto;
  cursor: crosshair;
  touch-action: none;
}
.rm-ring {
  position: absolute;
  border: 1px solid rgba(255, 255, 255, .95);
  box-shadow: 0 0 0 1px rgba(43, 28, 37, .55);
  border-radius: 50%;
  transform: translate(-50%, -50%);
  pointer-events: none;
}
.rm.is-busy .rm-canvas-wrap canvas { cursor: progress; }

/* ---------- controls ---------- */
/* display on .rm-row would otherwise beat the hidden attribute */
.rm [hidden] { display: none !important; }
.rm-row {
  display: flex; flex-wrap: wrap; align-items: center; gap: .7rem 1.1rem;
  margin-top: .9rem;
}
.rm-row > .rm-field { display: flex; align-items: center; gap: .5rem; }
.rm-field label, .rm-legend { font-size: .8rem; font-weight: 700; color: var(--ink); }
.rm-field output { font-size: .8rem; color: var(--muted); min-width: 4.4ch; }
.rm input[type="range"] { accent-color: var(--plum); width: 150px; }
.rm input[type="range"]:focus-visible { outline: 2px solid var(--plum); outline-offset: 3px; }

.rm-btn {
  border: 1px solid var(--line); background: #fff; color: var(--ink);
  border-radius: 999px; padding: .5rem 1rem;
  font-size: .85rem; font-weight: 700; font-family: var(--sans);
  cursor: pointer;
}
.rm-btn:hover:not(:disabled) { border-color: var(--plum); color: var(--plum); }
.rm-btn:focus-visible { outline: 2px solid var(--plum); outline-offset: 2px; }
.rm-btn:disabled { opacity: .45; cursor: not-allowed; }
.rm-btn[aria-pressed="true"] { background: var(--ink); color: var(--cream); border-color: var(--ink); }
.rm-btn.rm-go { background: var(--plum); color: #fff; border-color: var(--plum); padding: .55rem 1.2rem; }
.rm-btn.rm-go:hover:not(:disabled) { background: var(--ink); border-color: var(--ink); color: var(--cream); }
.rm-group { display: flex; gap: .4rem; }

.rm-modes { border: 0; padding: 0; margin: .9rem 0 0; display: flex; flex-wrap: wrap; gap: .5rem .9rem; align-items: center; }
.rm-modes .rm-legend { margin-right: .2rem; }
.rm-modes label { display: inline-flex; align-items: center; gap: .35rem; font-size: .85rem; color: var(--ink-2); cursor: pointer; }
.rm-modes input[type="radio"] { accent-color: var(--plum); }
.rm-modes input[type="radio"]:focus-visible { outline: 2px solid var(--plum); outline-offset: 2px; }

/* ---------- status + progress ---------- */
.rm-status { font-size: .85rem; color: var(--ink-2); margin: .8rem 0 0; min-height: 2.4em; max-width: 68ch; }
.rm-status.is-warn { color: var(--plum); font-weight: 600; }

.rm-progress { height: 4px; border-radius: 999px; background: var(--cream-2); overflow: hidden; margin-top: .7rem; }
.rm-progress i { display: block; height: 100%; width: 0; background: var(--plum); transition: width .12s linear; }

.rm-note {
  font-size: .8rem; color: var(--muted); margin: .9rem 0 0;
  border-top: 1px solid var(--line); padding-top: .8rem; max-width: 70ch;
}
.rm-note b { color: var(--ink-2); }

@media (max-width: 640px) {
  .rm { padding: 1rem .9rem; }
  .rm input[type="range"] { width: 110px; }
  .rm-row { gap: .6rem .8rem; }
}