/* =========================================================================== Conceptual Health® — security primitives (shared across every product) Two responsibilities, one file: 1. WATERMARK — a per-session diagonal mark stamped across every screen so a phone-camera photo of a provider's display is traceable to the viewing user, the location, and the second it was taken. 2. REDACT — a one-press toggle that masks every PHI / PII element on the page so a provider can step away from their screen without exposing a patient if a non-authorized person walks up. Load this CSS on every authenticated surface (clinical, datavault, guardian-orb, provider-ai, admin) AFTER kit-framework.css. The companion ch-security.js wires up the keyboard shortcut, the floating control, and the watermark stamp. =========================================================================== */ /* ── Watermark ──────────────────────────────────────────────────────────── */ /* The watermark renders as a fixed full-viewport overlay at the very top of the stacking context. It is non-interactive (pointer-events: none) and semi-transparent so on-screen reading is unaffected, but a camera capture picks it up sharply because the human eye averages it out and silicon doesn't. The stamp text is set by ch-security.js at runtime. */ .ch-wm { /* Watermark temporarily disabled for review — was overlaying data and making dense screens hard to read. Stamp text is still set at runtime by ch-security.js so we can re-enable by removing this display:none. */ display: none !important; position: fixed; inset: 0; z-index: 2147483600; /* below redact-veil, above everything else */ pointer-events: none; user-select: none; overflow: hidden; mix-blend-mode: multiply; /* survives screenshots in light/dark */ opacity: 0.085; /* invisible-ish; sharp on photo */ font: 600 11px/1.25 "JetBrains Mono", ui-monospace, Menlo, Monaco, "Courier New", monospace; letter-spacing: 0.02em; color: var(--ink, #0c1116); } .ch-wm__grid { position: absolute; inset: -25%; /* extends past viewport so rotation fills */ display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 56px 80px; transform: rotate(-22deg); transform-origin: center; } .ch-wm__cell { white-space: nowrap; } .ch-wm__cell b { font-weight: 700; } .ch-wm__cell em { font-style: normal; opacity: 0.78; } /* When the user explicitly identifies themselves as authorized to take a screen capture (admin export flow, marketing screenshot, etc.), the watermark goes BOLD and adds a banner so it's never silently disabled. */ .ch-wm[data-mode="export"] { opacity: 0.18; mix-blend-mode: normal; } .ch-wm[data-mode="export"] .ch-wm__cell { color: var(--guardian, #b94038); } /* ── Redact (PHI/PII hide) ──────────────────────────────────────────────── */ /* Two redaction modes: [data-pii] — names, emails, phones, addresses, IDs [data-phi] — diagnosis, medication names, lab values, anything clinical When the page has class .ch-redacted, both classes get masked. data-redact="off" on a specific element opts it out (e.g. a header logo that incidentally contains "Smith Pediatrics" — the practice name, not a patient). */ html.ch-redacted [data-pii]:not([data-redact="off"]), html.ch-redacted [data-phi]:not([data-redact="off"]) { position: relative; color: transparent !important; text-shadow: none !important; background-image: linear-gradient( 90deg, rgba(12, 17, 22, 0.92) 0, rgba(12, 17, 22, 0.92) 100% ); background-size: 100% 1.05em; background-position: 0 center; background-repeat: no-repeat; border-radius: 2px; /* keep block-level layout — don't collapse the box */ } /* Image-shaped elements (photos, signatures, ID scans) get fully blacked. */ html.ch-redacted img[data-pii]:not([data-redact="off"]), html.ch-redacted img[data-phi]:not([data-redact="off"]), html.ch-redacted [data-pii="image"]:not([data-redact="off"]), html.ch-redacted [data-phi="image"]:not([data-redact="off"]) { filter: contrast(0) brightness(0) !important; } /* Form fields and inputs */ html.ch-redacted input[data-pii]:not([data-redact="off"]), html.ch-redacted input[data-phi]:not([data-redact="off"]), html.ch-redacted textarea[data-pii]:not([data-redact="off"]), html.ch-redacted textarea[data-phi]:not([data-redact="off"]) { -webkit-text-security: disc; text-security: disc; color: var(--ink, #0c1116) !important; background-image: none !important; } /* When redacted, banner across the top so the provider can never forget the page is masked (and a third party can't social-engineer them). */ html.ch-redacted::before { content: "PRIVACY MODE — PHI / PII redacted · press ⌘⇧H to reveal"; position: fixed; top: 0; left: 0; right: 0; z-index: 2147483640; padding: 8px 16px; background: var(--guardian, #b94038); color: #fff; font: 600 11px/1.4 "Inter", system-ui, sans-serif; letter-spacing: 0.18em; text-transform: uppercase; text-align: center; pointer-events: none; } /* ── Floating control chip ─────────────────────────────────────────────── */ /* Lives bottom-right; users can drag if it gets in the way. The chip is keyboard-accessible (Tab → Enter) so providers don't need to touch the trackpad. */ .ch-sec-chip { position: fixed; right: 20px; bottom: 20px; z-index: 2147483630; display: inline-flex; align-items: center; gap: 8px; padding: 10px 14px; border-radius: 999px; background: var(--ink, #0c1116); color: var(--bg, #f7f4ec); border: 1px solid rgba(255,255,255,0.12); box-shadow: 0 12px 32px rgba(12,17,22,0.18); font: 600 12px/1 "Inter", system-ui, sans-serif; letter-spacing: 0.06em; text-transform: uppercase; cursor: pointer; user-select: none; transition: transform .12s ease, background .12s ease; } .ch-sec-chip:hover { transform: translateY(-1px); } .ch-sec-chip[data-on="true"] { background: var(--guardian, #b94038); } .ch-sec-chip__dot { width: 8px; height: 8px; border-radius: 50%; background: var(--halo, #c89a3a); box-shadow: 0 0 0 2px rgba(255,255,255,0.18); } .ch-sec-chip[data-on="true"] .ch-sec-chip__dot { background: #fff; animation: chSecPulse 1.2s ease-in-out infinite; } @keyframes chSecPulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.35; } } .ch-sec-chip__kbd { display: inline-block; padding: 2px 6px; border-radius: 4px; background: rgba(255,255,255,0.12); font-family: "JetBrains Mono", ui-monospace, monospace; font-size: 10px; letter-spacing: 0; }