/* PII Masking — toggle switch + flash-of-unmasked-content prevention. Entire feature is self-contained: remove this file + the JS + the data-pii attributes in templates to uninstall. */ /* ── FOUMC prevention ────────────────────────────────────────────── While JS is loading, hide [data-pii] elements so the user never sees unmasked data. The JS removes .pii-masking-loading once it has processed everything. The cookie-reading script in adds .pii-masked to when masking is active. */ html.pii-masked.pii-masking-loading [data-pii] { visibility: hidden; } /* ── Toggle switch (inside user menu dropdown) ────────────────────── */ .pii-toggle-row { position: relative; display: flex; align-items: center; gap: 10px; width: 100%; padding: 7px 8px; font-family: inherit; font-size: 13px; font-weight: 500; color: #313131; border-radius: 6px; cursor: default; box-sizing: border-box; line-height: calc(1 / .85); } .pii-toggle-row:hover { background: #f2f2f2; color: #0a0a0a; } .pii-toggle-icon { color: #797979; flex-shrink: 0; } .pii-toggle-row:hover .pii-toggle-icon { color: #0a0a0a; } .pii-toggle-label-text { flex: 1; } .pii-toggle { position: relative; display: inline-block; width: 36px; height: 20px; } .pii-toggle-input { opacity: 0; width: 0; height: 0; } .pii-toggle-slider { position: absolute; cursor: pointer; top: 0; left: 0; right: 0; bottom: 0; background-color: #d1d5db; transition: 0.2s; border-radius: 20px; } .pii-toggle-slider::before { position: absolute; content: ""; height: 14px; width: 14px; left: 3px; bottom: 3px; background-color: white; transition: 0.2s; border-radius: 50%; box-shadow: 0 1px 2px rgba(0, 0, 0, 0.15); } .pii-toggle-input:checked + .pii-toggle-slider { background-color: #f59e0b; } .pii-toggle-input:checked + .pii-toggle-slider::before { transform: translateX(16px); } .pii-toggle-input:focus-visible + .pii-toggle-slider { outline: 2px solid #0a0a0a; outline-offset: 2px; } /* ── Masked text visual hint ─────────────────────────────────────── Optional subtle style to visually distinguish masked values. */ html.pii-masked [data-pii] { letter-spacing: 0.02em; } html.pii-masked [data-pii="number"] { font-variant-numeric: tabular-nums; }