/* Polyfetti — cleaning up a photograph. Loads after counter.css and tools.css. */

.promise {
  background: var(--good-wash);
  border: 1px solid var(--good-edge);
  border-radius: 12px;
  color: var(--ink-soft);
  font-size: var(--step--1);
  line-height: 1.65;
  margin: 16px 0 0;
  padding: 14px 16px;
}
.promise b { color: var(--good); }

.stage {
  background: var(--paper-sunk);
  border: 1px solid var(--rule);
  border-radius: 14px;
  display: inline-block;
  line-height: 0;
  margin: 4px 0 16px;
  max-width: 100%;
  overflow: hidden;
  position: relative;
}
#canvas {
  cursor: crosshair;
  display: block;
  height: auto;
  max-width: 100%;
  touch-action: none;
}
.crop {
  border: 2px dashed var(--shu);
  background: rgba(201, 60, 38, .12);
  pointer-events: none;
  position: absolute;
}

.controls { display: grid; gap: 14px; }
.control-row { display: flex; flex-wrap: wrap; gap: 8px 14px; align-items: center; }

.slider { display: block; }
.slider > span {
  color: var(--muted);
  display: block;
  font-size: var(--step--1);
  margin-bottom: 6px;
}
.slider output { color: var(--ink); font-variant-numeric: tabular-nums; }
.slider input[type="range"] { accent-color: var(--shu); width: 100%; }

.check {
  align-items: center;
  color: var(--ink-soft);
  display: inline-flex;
  font-size: var(--step--1);
  gap: 7px;
}
.check input { accent-color: var(--shu); }

.facts { margin-top: 18px; }