.pdf-redact {
  --redact-gap: var(--s3);
  --redact-section-gap: var(--s4);
  --redact-small-gap: var(--s1);
  --redact-control-size: var(--touch);
  --redact-field-width: 7rem;
  --redact-canvas-limit: 48rem;
  --redact-radius: .75rem;
  --redact-mask: #000;
  --redact-draft-line: 2px;
  --redact-draft-color: var(--focus);
  --redact-draft-fill: rgba(255, 106, 90, .25);
  --redact-confirm-size: 1.25rem;
  --redact-mobile-breakpoint: 31.25rem;
  min-inline-size: var(--zero);
  overflow-wrap: anywhere;
}

.redact-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--redact-gap);
  margin-block: var(--redact-section-gap);
}

.redact-source-actions {
  min-inline-size: var(--zero);
}

#redact-file-name {
  min-inline-size: var(--zero);
  max-inline-size: 100%;
  overflow-wrap: anywhere;
}

#redact-cancel {
  margin-inline-start: auto;
}

#redact-workspace {
  margin-block: var(--redact-section-gap);
  min-inline-size: var(--zero);
}

.redact-page-control {
  display: inline-flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--redact-gap);
  margin-block-end: var(--redact-section-gap);
}

.redact-canvas-wrap {
  position: relative;
  display: block;
  inline-size: fit-content;
  max-inline-size: min(100%, var(--redact-canvas-limit));
  overflow: hidden;
  border: var(--border) solid var(--line);
  line-height: var(--zero);
  touch-action: none;
}

#redact-canvas {
  display: block;
  inline-size: auto;
  max-inline-size: 100%;
  block-size: auto;
  cursor: crosshair;
}

#redact-overlay {
  position: absolute;
  inset: var(--zero);
  pointer-events: none;
}

.redact-mask {
  position: absolute;
  background: var(--redact-mask);
  opacity: 1;
}

.redact-draft {
  position: absolute;
  border: var(--redact-draft-line) dashed var(--redact-draft-color);
  background: var(--redact-draft-fill);
}

.redact-locked #redact-canvas {
  cursor: not-allowed;
}

#redact-fields {
  display: flex;
  flex-wrap: wrap;
  align-items: end;
  gap: var(--redact-gap);
  min-inline-size: var(--zero);
  padding: var(--s3);
  border: var(--border) solid var(--line);
  border-radius: var(--redact-radius);
}

#redact-fields label {
  display: grid;
  gap: var(--redact-small-gap);
  min-inline-size: var(--zero);
}

#redact-fields input {
  inline-size: var(--redact-field-width);
  min-block-size: var(--redact-control-size);
  max-inline-size: 100%;
}

.redact-confirm {
  display: flex;
  align-items: flex-start;
  gap: var(--s2);
  margin-block: var(--redact-section-gap);
}

.redact-confirm input {
  flex: none;
  min-inline-size: var(--redact-confirm-size);
  min-block-size: var(--redact-confirm-size);
}

#redact-list {
  max-inline-size: 100%;
  padding-inline-start: var(--s6);
}

#redact-list li {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--redact-gap);
  min-inline-size: var(--zero);
  margin-block: var(--s2);
}

#redact-list button,
.redact-retry {
  min-block-size: var(--redact-control-size);
}

#redact-error {
  padding: var(--s3);
  border-inline-start: var(--focus-width) solid var(--focus);
}

#redact-result {
  margin-block: var(--redact-section-gap);
}

@media (max-width: 31.25rem) {
  .redact-source-actions {
    align-items: stretch;
  }

  #redact-file-name {
    flex-basis: 100%;
  }

  #redact-cancel {
    margin-inline-start: var(--zero);
  }

  #redact-fields {
    display: grid;
    grid-template-columns: repeat(2, minmax(var(--zero), 1fr));
  }

  #redact-fields input {
    inline-size: 100%;
  }

  #redact-add {
    grid-column: 1 / -1;
  }
}