/* rw-demo.css — the live sample-redaction demo widget.
   Self-contained; every class is rwdemo-prefixed so it drops into any page
   (index.html + redact-pdf.html both embed the same markup). No external
   assets — CSP-safe. */

.rwdemo{ max-width:680px; margin:0 auto; font-family:"Inter",system-ui,sans-serif; }
.rwdemo *{ box-sizing:border-box; }

.rwdemo-frame{ background:#fff; border:1px solid #E8E6DF; border-radius:10px;
  box-shadow:0 14px 34px -18px rgba(17,24,39,.22); overflow:hidden; }
.rwdemo-bar{ display:flex; align-items:center; gap:8px; padding:10px 14px;
  border-bottom:1px solid #E8E6DF; background:#FAFAF8;
  font-family:"JetBrains Mono",monospace; font-size:11px; letter-spacing:.06em;
  text-transform:uppercase; color:#4F4F4F; }
.rwdemo-dots{ display:flex; gap:4px; }
.rwdemo-dots span{ width:8px; height:8px; border-radius:50%; background:#E8E6DF; }
.rwdemo-stage{ margin-left:auto; }
.rwdemo-chip{ font-family:"JetBrains Mono",monospace; font-size:11px;
  letter-spacing:.05em; padding:3px 10px; border-radius:999px; white-space:nowrap; }
.rwdemo-chip--review{ background:#FFF7E6; color:#8a6d1a; border:1px solid #EAD9A8; }
.rwdemo-chip--verified{ background:#0E2E50; color:#fff; border:1px solid #0E2E50; }

.rwdemo-doc{ padding:20px 22px; font-size:14.5px; line-height:2.05; color:#1f2937; }
.rwdemo-doc p{ margin:0 0 10px; }

/* A finding: yellow highlight in review, black box after redaction.
   Click toggles keep-visible (unchecked) — the review concept in one gesture. */
.rwdemo-hit{ background:#FDE68A; border-radius:3px; padding:1px 4px; cursor:pointer;
  transition:background .45s ease, color .45s ease; border-bottom:2px solid #F59E0B;
  -webkit-user-select:none; user-select:none; }
.rwdemo-hit::after{ content:"×"; font-size:11px; font-weight:700; color:#92400E;
  margin-left:3px; opacity:.55; }
.rwdemo-hit.rwdemo-keep{ background:transparent; border-bottom:2px dotted #9CA3AF; }
.rwdemo-hit.rwdemo-keep::after{ content:"kept"; font-size:10px; color:#6B7280;
  font-family:"JetBrains Mono",monospace; }
.rwdemo.rwdemo--done .rwdemo-hit{ cursor:default; }
.rwdemo.rwdemo--done .rwdemo-hit:not(.rwdemo-keep){ background:#111827;
  color:transparent; border-bottom-color:#111827; text-shadow:none; }
.rwdemo.rwdemo--done .rwdemo-hit:not(.rwdemo-keep)::after{ content:""; }
.rwdemo.rwdemo--done .rwdemo-hit.rwdemo-keep{ border-bottom:none; }
.rwdemo.rwdemo--done .rwdemo-hit.rwdemo-keep::after{ content:""; }

.rwdemo-foot{ border-top:1px solid #E8E6DF; padding:14px 18px; background:#FAFAF8; }
.rwdemo-hint{ margin:0 0 10px; font-size:12.5px; color:#4F4F4F; }
.rwdemo-hint strong{ color:#111; }
.rwdemo-btn{ display:inline-block; border:0; cursor:pointer; background:#B8860B;
  color:#fff; font-weight:600; font-size:14.5px; padding:11px 24px;
  border-radius:999px; font-family:inherit; }
.rwdemo-btn:disabled{ opacity:.55; cursor:default; }
.rwdemo-verifyline{ display:none; margin:10px 0 0; font-family:"JetBrains Mono",monospace;
  font-size:12px; color:#4F4F4F; }
.rwdemo--verifying .rwdemo-verifyline{ display:block; }
.rwdemo-result{ display:none; margin-top:12px; }
.rwdemo--done .rwdemo-result{ display:block; }
.rwdemo--done .rwdemo-btn--approve, .rwdemo--verifying .rwdemo-btn--approve{ display:none; }
.rwdemo--done .rwdemo-hint, .rwdemo--verifying .rwdemo-hint{ display:none; }
.rwdemo-result p{ margin:0 0 10px; font-size:13.5px; color:#1f2937; }
.rwdemo-result p strong{ color:#111; }
.rwdemo-reset{ background:none; border:0; padding:0; margin-left:14px; cursor:pointer;
  font-size:12.5px; color:#4F4F4F; text-decoration:underline; font-family:inherit; }
.rwdemo-note{ margin:10px auto 0; max-width:680px; text-align:center; font-size:12px;
  color:#4F4F4F; }