/* ============================================================
   censor.css — drop-in text redaction ("censor mode")
   Works with ZERO JavaScript. Framework-agnostic.

   Tags (inline text):
     <censor-fix>          covered, permanent
     <censor-hover>        covered, reveals on hover/focus/tap
     <censor-hover-invert> visible, covers on hover/focus/tap

   Attribute API (any element, e.g. existing <span>, <p>):
     data-censor="fix" | "hover" | "hover-invert"

   Block/media API (images, photos, cards -> black square):
     wrap the media and set data-censor-box="fix|hover|hover-invert"

   Theme with CSS custom properties (set anywhere up the tree):
     --censor-color   bar color            (default #000)
     --censor-radius  bar corner radius    (default 0.06em)
     --censor-pad     inline padding       (default 0 0.12em)
     --censor-speed   transition duration  (default 140ms)
     --censor-ease    transition easing    (default ease)

   NOTE: this is *visual* redaction, not security. The real text
   stays in the DOM (good for SEO/selection). If a value must be
   truly secret, don't render it client-side.
   ============================================================ */

:where(censor-fix, censor-hover, censor-hover-invert, [data-censor]) {
  --censor-color: #000;
  --censor-radius: 0.06em;
  --censor-pad: 0 0.12em;
  --censor-speed: 140ms;
  --censor-ease: ease;

  border-radius: var(--censor-radius);
  padding: var(--censor-pad);
  cursor: default;
  -webkit-box-decoration-break: clone;
          box-decoration-break: clone;   /* clean bars across wrapped lines */
  transition: color var(--censor-speed) var(--censor-ease),
              background-color var(--censor-speed) var(--censor-ease);
}

/* --- covered by default: fix + hover ------------------------ */
:where(censor-fix, censor-hover,
       [data-censor="fix"], [data-censor="hover"]) {
  background-color: var(--censor-color);
  color: transparent;
}

/* stop drag-select from lifting the hidden text out of a fixed bar */
:where(censor-fix, [data-censor="fix"])::selection {
  background: var(--censor-color);
  color: transparent;
}

/* --- hover / focus / tap reveals ---------------------------- */
:where(censor-hover, [data-censor="hover"]):hover,
:where(censor-hover, [data-censor="hover"]):focus-visible,
:where(censor-hover, [data-censor="hover"])[data-revealed] {
  background-color: transparent;
  color: inherit;
}

/* --- invert: visible, covers on hover / focus / tap --------- */
:where(censor-hover-invert, [data-censor="hover-invert"]):hover,
:where(censor-hover-invert, [data-censor="hover-invert"]):focus-visible,
:where(censor-hover-invert, [data-censor="hover-invert"])[data-covered] {
  background-color: var(--censor-color);
  color: transparent;
}

/* ============================================================
   Block / media variant — turns an image or card into a
   black square that behaves the same way.
   Usage: <span data-censor-box="hover"><img ...></span>
   ============================================================ */
:where([data-censor-box]) {
  --censor-color: #000;
  --censor-speed: 140ms;
  --censor-ease: ease;
  position: relative;
  display: inline-block;
}
:where([data-censor-box])::after {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--censor-color);
  transition: opacity var(--censor-speed) var(--censor-ease);
  pointer-events: none;
}
:where([data-censor-box="fix"])::after,
:where([data-censor-box="hover"])::after      { opacity: 1; }
:where([data-censor-box="hover-invert"])::after { opacity: 0; }

:where([data-censor-box="hover"]):hover::after,
:where([data-censor-box="hover"]):focus-visible::after,
:where([data-censor-box="hover"])[data-revealed]::after { opacity: 0; }

:where([data-censor-box="hover-invert"]):hover::after,
:where([data-censor-box="hover-invert"]):focus-visible::after,
:where([data-censor-box="hover-invert"])[data-covered]::after { opacity: 1; }

/* ------------------------------------------------------------ */
@media (prefers-reduced-motion: reduce) {
  :where(censor-fix, censor-hover, censor-hover-invert,
         [data-censor], [data-censor-box])::after,
  :where(censor-fix, censor-hover, censor-hover-invert,
         [data-censor], [data-censor-box]) {
    transition: none;
  }
}

/* Keep redactions solid when printing (reveal-on-hover can't apply on paper) */
@media print {
  :where(censor-hover, [data-censor="hover"]) {
    background-color: var(--censor-color) !important;
    color: transparent !important;
  }
}