/* HDR wordmark — paints the "Proof." logo from PQ / BT.2100 assets so it reads
   above SDR white on an HDR display. Loads after themes.css. No JS, no markup.

   BRIGHT themes (terminal, night, acid, brutal) put a light wordmark on a dark
   header, so the whole wordmark has headroom: it is painted from
   assets/hdr/wordmark-<theme>.png — the live element rasterised at dpr 3 from
   this exact border box, with each ink re-encoded as that same colour at
   maximum PQ luminance, tagged BT.2100 PQ. An HDR display therefore shows the
   theme's own colour as bright as it can go; an SDR browser decodes it back to
   the theme's own sRGB values, so nothing regresses without HDR. The text stays
   in the DOM (transparent fill only), so the link box, hit area, text selection,
   focus ring and screen-reader text are all unchanged.

   LIGHT themes (paper, riso, olo) put dark ink on paper. Dark ink has no HDR
   headroom, and lightening it would be a lie, so the type is left exactly as the
   theme drew it and only the period carries the HDR: the same PQ dot, enlarged
   to .34em, still centred on the period's optical position. */

/* ---------- light themes: enlarged HDR period ---------- */

.wordmark .dot{
  color:transparent !important;      /* hide the glyph, keep its layout box */
  text-shadow:none !important;       /* a theme may glow the period; the asset is the glow */
  position:relative;
}

.wordmark .dot::after{
  content:"";
  position:absolute;
  left:50%;
  bottom:.185em;                     /* image centre = period ink centre (.355em) */
  width:.34em;
  height:.34em;
  margin-left:.01em;
  transform:translateX(-50%);
  background:url("hdr/logo-dot-blue.png") center/contain no-repeat;
  pointer-events:none;
}

html[data-theme="olo"] .wordmark .dot::after{
  background-image:url("hdr/logo-dot-teal.png");
}

/* ---------- bright themes: the whole wordmark is the HDR asset ---------- */

html[data-theme="terminal"] .wordmark,
html[data-theme="night"] .wordmark,
html[data-theme="acid"] .wordmark,
html[data-theme="brutal"] .wordmark{
  color:transparent !important;      /* text stays for AT + selection, fill only */
  text-shadow:none !important;
  background-repeat:no-repeat;
  background-position:left center;
  background-size:contain;           /* asset is the element box: 1:1 at any dpr */
}

/* the period is baked into the raster — never paint the dot asset on top */
html[data-theme="terminal"] .wordmark .dot::after,
html[data-theme="night"] .wordmark .dot::after,
html[data-theme="acid"] .wordmark .dot::after,
html[data-theme="brutal"] .wordmark .dot::after{
  content:none !important;
}

html[data-theme="terminal"] .wordmark{background-image:url("hdr/wordmark-terminal.png");}
html[data-theme="night"] .wordmark{background-image:url("hdr/wordmark-night.png");}
html[data-theme="acid"] .wordmark{background-image:url("hdr/wordmark-acid.png");}
html[data-theme="brutal"] .wordmark{background-image:url("hdr/wordmark-brutal.png");}