/* ============================================================
   tfx-card-outline.css
   ============================================================
   Global black 1px outline for white text that OVERLAYS the
   card thumbnail image (i.e. lives INSIDE the card frame).
   Applies on every page (index, video, shorts, categories) in
   both light and dark mode.

   SCOPE — what gets the outline:
     - .video-length and .video-views badges on every video /
       short card (durations + view counts overlay the thumb).
     - .category-row .nr-title — index Categories-row card
       titles (positioned absolutely on the thumb).
     - .tfx-cat-title and .tfx-cat-count on the categories
       landing cards (overlay the card image).

   SCOPE — what is deliberately NOT outlined:
     - .video-quality (4K / 1080p / 720p / 360p / VR pill
       badges) — these have their own pill background, no
       outline needed.
     - .cw-title / .nr-title (non-category-row) / .tr-title /
       .shorts-title / .creator-tag — these sit UNDER the
       thumb in the meta area, OUTSIDE the card frame; light /
       dark colour handled by light-mode.css.

   Where light-mode COLOUR overrides live:
     In light-mode.css (the single source of truth for all
     body.light-mode rules). Do NOT add colour overrides here.

   Why -webkit-text-stroke instead of text-shadow:
     The text-shadow outline shifts ~1px on hover when a parent
     card transforms (lift / scale) because the shadow is a
     separate paint layer subject to sub-pixel rounding
     independent of the glyph. -webkit-text-stroke renders as
     part of the glyph itself, so the outline moves in lockstep
     with the text and can't shift relative to it. paint-order:
     stroke fill paints the stroke first then the fill over it,
     keeping the letterforms full-weight (otherwise the stroke
     eats into the glyph and the text looks thinner).
   ============================================================ */

.cw-card .video-length,
.cw-card .video-views,

.nr-card .video-length,
.nr-card .video-views,

.tr-card .video-length,
.tr-card .video-views,

.shorts-card .video-length,
.shorts-card .video-views,

.category-row .nr-title,

.tfx-cat-card .tfx-cat-title,
.tfx-cat-card .tfx-cat-count {
	-webkit-text-stroke: 1px #000;
	paint-order: stroke fill;
}