/* Image Redact safety/UX additions. Keep separate until app.js is refactored. */

.redact-steps,
.safety-checklist,
.nw-faq,
.format-note,
.mask-help,
.save-status {
  border: 1px solid var(--nw-border);
  background: rgba(2, 6, 23, 0.02);
  border-radius: var(--nw-radius);
}

.redact-steps {
  margin: 12px 0 14px;
  padding: 14px 16px;
}

.redact-steps h2,
.safety-checklist h2,
.nw-faq h2 {
  margin: 0 0 10px;
  font-size: 16px;
}

.redact-steps ol {
  margin: 0;
  padding-left: 20px;
  color: var(--nw-dim);
  font-size: 13px;
}

.redact-steps li + li {
  margin-top: 4px;
}

.redact-step-note,
.format-note p,
.safety-checklist p,
.safety-checklist li,
.nw-faq p {
  color: var(--nw-dim);
  font-size: 13px;
}

.redact-step-note {
  margin: 10px 0 0;
}

.format-note {
  margin-top: 10px;
  padding: 10px 12px;
}

.format-note p {
  margin: 0;
}

.btn-safety {
  width: fit-content;
  border-color: rgba(245, 158, 11, 0.38);
  background: rgba(245, 158, 11, 0.10);
}

.mask-help {
  margin: 0 14px 12px;
  padding: 12px 14px !important;
}

.mask-help dl {
  margin: 0;
  display: grid;
  gap: 6px 10px;
  grid-template-columns: auto 1fr;
  font-size: 12px;
}

.mask-help dt {
  font-weight: 900;
  color: var(--nw-text);
}

.mask-help dd {
  margin: 0;
  color: var(--nw-dim);
}

.save-status {
  display: none;
  margin-top: 10px;
  padding: 10px 12px;
  color: var(--nw-dim);
  font-size: 12px;
}

.save-status.is-visible {
  display: block;
}

.save-status.is-error {
  border-color: rgba(220, 38, 38, 0.32);
  background: rgba(220, 38, 38, 0.08);
}

.save-status.is-ok {
  border-color: rgba(22, 163, 74, 0.30);
  background: rgba(22, 163, 74, 0.08);
}

.safety-checklist {
  margin: 14px 0 18px;
  padding: 14px 16px;
}

.safety-checklist ul {
  margin: 8px 0 0;
  padding-left: 20px;
}

.safety-links {
  margin: 10px 0 0;
  font-weight: 800;
}

.nw-faq {
  margin: 18px 0;
  padding: 14px 16px;
}

.nw-faq details {
  border-top: 1px solid rgba(15, 23, 42, 0.10);
  padding: 10px 0;
}

.nw-faq details:first-of-type {
  border-top: 0;
}

.nw-faq summary {
  cursor: pointer;
  font-weight: 900;
  color: var(--nw-text);
}

.nw-faq p {
  margin: 8px 0 0;
}

.legacy-export-compat {
  display: none !important;
}

@media (max-width: 480px) {
  .redact-steps,
  .safety-checklist,
  .nw-faq {
    padding: 12px 12px;
  }

  .mask-help dl {
    grid-template-columns: 1fr;
  }

  .mask-help dt {
    margin-top: 4px;
  }

  .btn-safety {
    width: 100%;
  }
}