/* xp-ocr.css — all rules scoped under html.xp.
   THE OCR MATCH SNIPPET under a search-result tile: the words that made this card come
   back. Deliberately quiet — it is a footnote to the picture, never a second headline.

   THREE CONSTRAINTS, all load-bearing:
   · It NEVER overlays the tile. No position:absolute, no gradient scrim over the image —
     the meme IS the content and covering the punchline is a standing owner complaint. It
     is a normal block below the tile, inside the same .tilecell the curation bar uses.
   · TWO LINES, hard clamped. OCR runs long; an unclamped excerpt would make grid rows
     ragged and push tiles off a phone screen.
   · Lowercase house voice + the mono UI face, like every other terminal readout here. */

html.xp .xp-ocr {
  font-family: var(--mono);
  font-size: 10px;
  line-height: 1.35;
  letter-spacing: calc(.01em * var(--track));
  color: var(--faint);
  text-transform: lowercase;
  padding: 4px 2px 0;
  /* two lines, then ellipsis. -webkit-box is still the only cross-browser line clamp. */
  display: -webkit-box;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  /* OCR is full of long unspaced runs (urls, handles, garbage glyphs) — never let one of
     them widen the grid column. */
  overflow-wrap: anywhere;
  word-break: break-word;
}

/* the matched words. <mark> carries a UA yellow highlight — reset it and use the brand
   amber as INK instead, so the emphasis reads without a coloured block fighting the tile
   underneath it. */
html.xp .xp-ocr .xp-ocr-hit {
  background: none;
  color: var(--accent);
  font-weight: 600;
}

/* Phone: the grid is 2 columns and every pixel of vertical space is a tile you cannot
   see. Slightly tighter, same two lines. */
@media (max-width: 900px) {
  html.xp .xp-ocr { font-size: 9.5px; padding: 3px 1px 0; }
}

/* Reduced transparency / high contrast users get the ink, not the subtlety. */
@media (prefers-contrast: more) {
  html.xp .xp-ocr { color: var(--dim); }
}