/* Anonymize for AI — the REVERSIBLE tool. It reuses Redact's editor (the overlay lives on , so these rules style it via the .redact-alias modifier the editor adds), then has its own result screen. Accent = the brand primary (transform / reversible), never redact's --danger red, so the two mental models never blur. No @keyframes here: entrances ride the shared .kp-enter / kpRise; the editor's own motion (editorBoxIn, the findings bar, the focus reticle) is reused as-is. Every transition lists explicit props; the global reduced-motion gate covers them. */ /* ── Alias mode inside the reused Redact editor ─────────────────────────────── */ /* Each detection box shows its placeholder token instead of a black fill — a live preview of what the output reads as. Higher specificity than redact.css's peek fills so the pill always wins regardless of the Peek toggle. */ /* The box is COLOUR-CODED BY CATEGORY — the same per-category --rc the redact editor uses (set via [data-category] in redact.css) — so a glance maps each placeholder to what it hides, exactly like redact. The pale fill is white-anchored so it stays opaque (it must COVER the original word) and light regardless of app theme, since the box overlays the always-white PDF page. Redact draws its category ring with `outline` (not border) and its peek fill is !important-free, so an !important opaque background + outline override wins cleanly. The reversible-vs-destructive identity is carried by the token text + the result screen, not the box hue. */ .redact-editor.redact-alias .redact-rect { background: color-mix(in srgb, var(--rc) 13%, white) !important; /* opaque pale category tint */ outline: 1.5px solid var(--rc) !important; /* category ring, like redact */ outline-offset: -1px !important; box-shadow: none !important; transition: background .15s, outline-color .15s !important; } /* Disarmed — skipped in the walk, its category switched off, or unchecked in the list. It is NOT being anonymized: the value stays as the original for the AI to read. Match REDACT's review-tier candidate exactly: the diagonal category-hue HATCH (--rc-hatch, defined on .redact-rect in redact.css) — the FILL itself, not just the dashed ring, marks it "a guess / kept as original", so anonymize's unsure and skipped candidates read like redact's review boxes instead of a flat tint. The hatch is translucent (colored stripes + see-through gaps) so the real word still shows through underneath — exactly what this kept-as-original state needs, and what redact relies on too. (.dismissed always rides with .review here since a disarmed box is unarmed; both selectors are listed so a focused-skip and a category-off box read identically.) Higher specificity + !important beats the base alias pill's `background` shorthand, which would otherwise reset background-image back to none. */ .redact-editor.redact-alias .redact-rect.review, .redact-editor.redact-alias .redact-rect.dismissed { background-color: color-mix(in srgb, var(--rc) 8%, transparent) !important; background-image: var(--rc-hatch) !important; outline: 1.5px dashed var(--rc) !important; outline-offset: -1px !important; } /* No placeholder token survives onto a disarmed box (redrawRects omits it), but guard against any path that leaves one — a kept-original box must show the real word, never a stale "[PERSON_1]" over it. */ .redact-editor.redact-alias .redact-rect.review .redact-rect-token, .redact-editor.redact-alias .redact-rect.dismissed .redact-rect-token { display: none; } /* The review-walk spotlight, alias-tinted. A focused box that WILL anonymize keeps a bold SOLID indigo outline; one that's kept-as-original (skipped in the walk, or its category switched off) keeps the DASHED outline — bolder + darker than the resting dash — so "this is the current match" never overrides "this one stays as the original". The amber reticle + caret the editor appends still mark which is focused. */ .redact-editor.redact-alias .redact-rect.focused:not(.review):not(.dismissed) { outline: 2px solid color-mix(in srgb, var(--rc) 70%, #1e293b) !important; /* category hue, darkened = "current" */ } .redact-editor.redact-alias .redact-rect.focused.review, .redact-editor.redact-alias .redact-rect.focused.dismissed { outline: 2px dashed color-mix(in srgb, var(--rc) 70%, #1e293b) !important; outline-offset: -1px !important; } .redact-rect-token { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; padding: 0 3px; font: 700 11px/1 ui-monospace, SFMono-Regular, Menlo, monospace; letter-spacing: -.2px; color: color-mix(in srgb, var(--rc) 45%, #1e293b); /* category hue, anchored dark for legibility on the pale pill */ white-space: nowrap; overflow: hidden; text-overflow: ellipsis; pointer-events: none; transition: opacity .15s; } /* Peek — the same reveal redact uses, retargeted: while it's on (the eye button or a held Space) the ARMED pills go translucent and their token fades, so you read the ORIGINAL word under each placeholder and confirm the mapping. Disarmed boxes (.review/.dismissed) already reveal their original, so peek leaves them be. Higher specificity + !important beats the opaque base pill above. */ .redact-editor.redact-alias .redact-rect-layer.peek .redact-rect:not(.draft):not(.review):not(.dismissed), .redact-editor.redact-alias .redact-rect-layer.peek-temp .redact-rect:not(.draft):not(.review):not(.dismissed) { background: color-mix(in srgb, var(--rc) 20%, transparent) !important; } .redact-editor.redact-alias .redact-rect-layer.peek .redact-rect-token, .redact-editor.redact-alias .redact-rect-layer.peek-temp .redact-rect-token { opacity: .16; } /* Peek OFF, but the FOCUSED match in a review walk still reveals its original word — you can't decide on a value you can't see under the placeholder. Mirror peek's reveal for that one armed pill (translucent category fill + faded token) so the original reads through, exactly as it does under peek-on. .review/.dismissed pills already show their original (hatch, no token), so they're excluded. The bold focused outline above and the editor's amber reticle/caret still mark which box is current. */ .redact-editor.redact-alias .redact-rect-layer:not(.peek):not(.peek-temp) .redact-rect.focused:not(.draft):not(.review):not(.dismissed) { background: color-mix(in srgb, var(--rc) 20%, transparent) !important; } .redact-editor.redact-alias .redact-rect-layer:not(.peek):not(.peek-temp) .redact-rect.focused:not(.review):not(.dismissed) .redact-rect-token { opacity: .16; } /* ── Result screen ──────────────────────────────────────────────────────────── */ .anon-output { margin-top: 20px; } .anon-banner { background: color-mix(in srgb, var(--primary) 10%, transparent); border: 1px solid color-mix(in srgb, var(--primary) 30%, transparent); border-radius: 10px; padding: 12px 14px; margin-bottom: 18px; font-size: 14px; } .anon-result-grid { display: grid; grid-template-columns: 280px 1fr; gap: 20px; align-items: start; } .anon-file-box { border: 1px solid var(--border); border-radius: 14px; padding: 22px 20px; background: var(--surface); text-align: center; display: flex; flex-direction: column; align-items: center; gap: 8px; } .anon-file-ico { width: 56px; height: 56px; border-radius: 14px; display: inline-flex; align-items: center; justify-content: center; color: var(--primary); background: color-mix(in srgb, var(--primary) 12%, transparent); } .anon-file-name { font-weight: 600; font-size: 14px; word-break: break-all; } .anon-file-sub { font-size: 12px; color: var(--muted); min-height: 1.2em; } .anon-file-dl { margin-top: 6px; width: 100%; transition: transform .15s, box-shadow .15s; } .anon-file-dl:not(:disabled):hover { transform: translateY(-2px); box-shadow: 0 4px 14px color-mix(in srgb, var(--primary) 26%, transparent); } .anon-file-note { font-size: 12px; color: var(--muted); margin: 8px 0 0; line-height: 1.55; } .anon-file-box.is-failed .anon-file-ico { color: var(--muted); background: var(--surface-2, rgba(100,116,139,.1)); } /* Determinate progress while the placeholder PDF builds in the background. Mirrors redact's apply-progress bar (solid var(--primary) fill, linear advance) so the sibling tools read the same; the track uses the file-icon's faint-primary tint so it stays visible in light mode too (--bg is white there). Fades out on completion — never snap-hides. */ .anon-build-progress { width: 100%; transition: opacity .18s ease-in; } .anon-build-progress.is-hidden { opacity: 0; } .anon-build-bar { height: 6px; background: color-mix(in srgb, var(--primary) 12%, transparent); border-radius: 999px; overflow: hidden; } .anon-build-fill { height: 100%; width: 0; background: var(--primary); border-radius: 999px; transition: width .15s linear; } .anon-build-slow { font-size: 11px; color: var(--muted); margin: 6px 0 0; line-height: 1.4; } .anon-build-slow:not([hidden]) { animation: kpRise .2s cubic-bezier(.2, .7, .3, 1) both; } .anon-copy-box h3 { margin: 0 0 8px; font-size: 15px; } .anon-out-text, .anon-reidentify-in, .anon-reidentify-out { width: 100%; box-sizing: border-box; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 13px; border: 1px solid var(--border); border-radius: 10px; padding: 12px; resize: vertical; transition: border-color .15s, box-shadow .15s; } .anon-out-text:focus, .anon-reidentify-in:focus, .anon-reidentify-out:focus { outline: none; border-color: var(--primary); box-shadow: 0 0 0 3px color-mix(in srgb, var(--primary) 18%, transparent); } .anon-out-actions { display: flex; gap: 10px; flex-wrap: wrap; margin: 12px 0 0; } .anon-again { margin-top: 18px; } .anon-hint { font-size: 12px; color: var(--muted); margin: 4px 0; } .anon-notice { text-align: center; padding: 28px; } .anon-notice h3 { margin: 0 0 8px; } .anon-notice-actions { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; margin-top: 18px; } /* Demoted re-identify (paste-back) — collapsible, secondary to copy-and-go. */ .anon-restore { margin-top: 20px; border: 1px solid var(--border); border-radius: 10px; overflow: hidden; } .anon-restore > summary { list-style: none; cursor: pointer; display: flex; align-items: center; gap: 8px; padding: 12px 14px; font-weight: 600; transition: background-color .15s; } .anon-restore > summary::-webkit-details-marker { display: none; } .anon-restore > summary:hover { background: color-mix(in srgb, var(--primary) 6%, transparent); } .anon-restore > summary:focus-visible { outline: 2px solid var(--primary); outline-offset: -2px; } .anon-restore[open] > summary { border-bottom: 1px solid var(--border); } .anon-restore-caret { display: inline-block; color: var(--muted); font-size: 18px; line-height: 1; transition: transform .2s cubic-bezier(.2, .7, .3, 1); } .anon-restore[open] .anon-restore-caret { transform: rotate(90deg); } .anon-restore-body { padding: 14px; } @media (max-width: 760px) { .anon-result-grid { grid-template-columns: 1fr; } } /* ── Text-review screen (non-PDF anonymize path) ─────────────────────────── */ .anon-text-card { display: flex; flex-direction: column; gap: 14px; } .anon-text-summary { color: var(--text-soft); font-size: .95rem; } .anon-text-pane { white-space: pre-wrap; word-break: break-word; line-height: 1.7; max-height: 52vh; overflow: auto; padding: 16px; border: 1px solid var(--border); border-radius: 12px; background: var(--bg-soft); color: var(--text); font-size: 1rem; } .anon-text-pane:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; } .anon-pill { display: inline; font: inherit; cursor: pointer; padding: 1px 6px; margin: 0 1px; border-radius: 6px; border: 1px solid color-mix(in srgb, var(--pill, #64748b) 55%, transparent); background: color-mix(in srgb, var(--pill, #64748b) 16%, transparent); color: var(--text); transition: background-color .15s, border-color .15s, box-shadow .15s; } .anon-pill:hover { background: color-mix(in srgb, var(--pill, #64748b) 28%, transparent); } .anon-pill:focus-visible { outline: 2px solid var(--primary); outline-offset: 1px; } .anon-pill.is-uncertain { border-style: dashed; } .anon-pill.is-kept { background: transparent; border-color: color-mix(in srgb, var(--pill, #64748b) 35%, transparent); text-decoration: underline dotted; } /* ── "or paste text" affordance under the cage ───────────────────────────── */ .anon-paste-link { display: inline-flex; align-items: center; gap: 6px; margin: 10px auto 0; background: none; border: none; cursor: pointer; color: var(--primary); font: inherit; text-decoration: underline; } .anon-paste-link:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; border-radius: 4px; } .anon-paste-panel { display: flex; flex-direction: column; gap: 10px; margin-top: 12px; } .anon-paste-panel textarea { width: 100%; min-height: 160px; resize: vertical; padding: 12px; border: 1px solid var(--border); border-radius: 12px; background: var(--bg-soft); color: var(--text); font: inherit; transition: border-color .15s, box-shadow .15s; } .anon-paste-panel textarea:focus-visible { outline: none; border-color: var(--primary); box-shadow: 0 0 0 3px color-mix(in srgb, var(--primary) 25%, transparent); }