/* ══════════════════════════════════════════════════════════════
 * Illusia Badges — Override visual do Fictioneer
 *
 * Redesenho de tags, badges e rating labels seguindo design-guide.html:
 * - Tag pills: Fira Code mono, r-xs, cores semânticas por taxonomia
 * - Comment badges: admin→violet, author→amber, supporter→crimson
 * - Rating labels: sage(E), amber(T), crimson(M)
 *
 * Usa tokens bridge (--bg-* / --fg-*) em vez de --void-* / --ink-*
 * para compatibilidade com dark mode E light mode.
 * Cores via triplets -free (zero rgba literal) — reagem ao modal
 * hue-rotate do Fictioneer automaticamente.
 *
 * @since 1.4.0
 * ══════════════════════════════════════════════════════════════ */

/* ── 1. Custom Properties — Tag Pills ── */

:root {
  /* Tag pill (block display) */
  --tag-background: var(--bg-700);
  --tag-background-hover: var(--bg-600);
  --tag-color: var(--fg-400);
  --tag-color-hover: var(--fg-100);

  /* Tag inline (card taxonomies) */
  --tag-inline-color: var(--fg-600);
  --tag-inline-color-hover: var(--amber);

  /* Tag secondary */
  --tag-secondary-background: transparent;
  --tag-secondary-background-hover: hsl(var(--amber-free) / .04);
  --tag-secondary-color: var(--fg-300);
  --tag-secondary-color-hover: var(--fg-100);
  --tag-secondary-border: 1px solid var(--border-1);
  --tag-secondary-border-hover: 1px solid var(--border-2);

  /* Tag warning (content warnings) */
  --tag-warning-background: hsl(var(--crimson-free) / .07);
  --tag-warning-background-hover: hsl(var(--crimson-free) / .12);
  --tag-warning-color: var(--crimson);
  --tag-warning-color-hover: var(--crimson);
  --tag-warning-border: 1px solid hsl(var(--crimson-free) / .22);
  --tag-warning-border-hover: 1px solid hsl(var(--crimson-free) / .35);

  /* Comment badges */
  --badge-generic-background: var(--bg-600);
  --badge-generic-color: var(--fg-400);
}

/* ── 2. Tag Pill Base Style ── */

:root .tag-pill:not(._inline) {
  position: relative;
  overflow: hidden;
  font-family: var(--ff-mono);
  font-size: var(--text-2xs);
  letter-spacing: .05em;
  padding: .28em .7em .28em 1.7em;
  border-radius: var(--r-xs);
  border: 1px solid var(--border-1);
  white-space: nowrap;
  flex-shrink: 0;
  transition: filter var(--t-fast) var(--ease-std);
}

:root .tag-pill:not(._inline):hover {
  filter: brightness(1.2);
}

:root .tag-pill:focus-visible {
  outline: 2px solid var(--amber);
  outline-offset: 3px;
}

/* ── 3. Tag Pill Inline (Cards) ── */

:root .tag-pill._inline {
  font-family: var(--ff-mono);
  font-size: var(--text-2xs);
  letter-spacing: .03em;
  /* line-height fixa: sem ela o pill herda `normal`, e um termo com glifo
     acentuado (ex.: "Psicológico" → "ó") que cai num font de FALLBACK infla
     a line box → pill mais alto que os de texto ASCII ("Sobrenatural"). Como
     o container (.illusia-card__taxonomies) é flex com align-items:stretch
     (default), esse pill mais alto ainda esticava os vizinhos da mesma linha.
     Travar a line-height iguala todos na altura do render correto (~22.66px). */
  line-height: 1.5;
  padding: .2em .55em;
  border-radius: var(--r-xs);
  border: 1px solid var(--border-1);
  white-space: nowrap;
  flex-shrink: 0;
  transition:
    color var(--t-fast) var(--ease-std),
    filter var(--t-fast) var(--ease-std);
}

:root .tag-pill._inline:hover {
  filter: brightness(1.15);
}

/* ── 4. Taxonomy Colors (semantic) ── */

/* Genre → Teal */
:root .tag-pill._genre,
:root .tag-pill._taxonomy-genre {
  color: var(--teal);
  border-color: hsl(var(--teal-free) / .2);
  background: hsl(var(--teal-free) / .06);
}

/* Fandom → Violet */
:root .tag-pill._fandom,
:root .tag-pill._taxonomy-fandom {
  color: var(--violet);
  border-color: hsl(var(--violet-free) / .22);
  background: hsl(var(--violet-free) / .07);
}

/* Character → Amber */
:root .tag-pill._character,
:root .tag-pill._taxonomy-character {
  color: var(--amber);
  border-color: var(--border-amber);
  background: var(--amber-glow);
}

/* Generic tag → Neutral */
:root .tag-pill._tag {
  color: var(--fg-300);
  border-color: var(--border-1);
  background: hsl(0 0% 100% / .03);
}

/* Content warning → Crimson */
:root .tag-pill._secondary._taxonomy-content_warning {
  color: var(--crimson);
  border-color: hsl(var(--crimson-free) / .22);
  background: hsl(var(--crimson-free) / .07);
}

:root .tag-pill._secondary._taxonomy-content_warning:hover {
  border-color: hsl(var(--crimson-free) / .35);
  background: hsl(var(--crimson-free) / .12);
}

/* ── 5. Tag Group / Container ── */

:root .tag-group {
  gap: var(--space-xs);
}

/* Card tag list — single line with fade mask */
:root .card__tag-list._pills {
  flex-wrap: nowrap;
  overflow: hidden;
  -webkit-mask-image: linear-gradient(to right, black 0%, black 72%, transparent 100%);
  mask-image: linear-gradient(to right, black 0%, black 72%, transparent 100%);
}

/* ── 6. Comment Badges ── */

:root .fictioneer-comment__badge {
  font-family: var(--ff-mono);
  letter-spacing: .05em;
  text-transform: uppercase;
  border-radius: var(--r-xs);
}

/* ── 7. Rating Labels ── */

:root .rating-letter-label {
  font-family: var(--ff-mono);
  font-size: var(--text-2xs);
  letter-spacing: .05em;
  border-radius: var(--r-xs);
  min-width: 1.9em;
  text-align: center;
}

/* Cores por rating: o Fictioneer 5.34.4 emite `_<strtolower(rating)>`
 * (_everyone/_teen/_mature/_adult); as variantes coloridas vivem em
 * `illusia-latest.css` (escopo `.small-card-block`). Classes MPAA
 * legadas (_g/_pg/_pg13/_r/_nc17) nunca são emitidas — removidas (E7). */

/* ── 8. Status Badges (Story Meta) ── */

:root .story__status {
  font-family: var(--ff-mono);
  font-size: var(--text-2xs);
  letter-spacing: .05em;
  text-transform: uppercase;
}

/* Override Fictioneer status icons — fonte única, aplica em cards e single story */
._ongoing .fa-circle::before        { content: var(--icon-status-ongoing); }
._completed .fa-circle-check::before { content: var(--icon-status-completed); }
._oneshot .fa-circle-check::before   { content: var(--icon-status-oneshot); }
._hiatus .fa-circle-pause::before    { content: var(--icon-status-hiatus); }
._canceled .fa-ban::before           { content: var(--icon-status-canceled); }

/* ══════════════════════════════════════════════════════════════
 * 9. LIGHT MODE — accent contrast adjustments
 *
 * Acentos (62-67% L) perdem contraste em fundo claro (~96% L).
 * Texto usa variantes -dim (38-44% L) para WCAG 4.5:1.
 * Bordas e backgrounds ganham mais opacidade para visibilidade.
 * ══════════════════════════════════════════════════════════════ */

:root[data-mode=light] {
  /* Tag inline hover → amber-dim */
  --tag-inline-color-hover: var(--amber-dim);

  /* Tag warning → crimson-dim para contraste */
  --tag-warning-color: var(--crimson-dim);
  --tag-warning-color-hover: var(--crimson-dim);
}

/* ── Taxonomy pills → glass REFORÇADO (híbrido, decisão live-review) ──
 * Pills NÃO ficam sólidas (uma fileira de 7+ tags viraria parede de cor);
 * em vez disso o glass ganha corpo: texto -dim cheio + fundo .25 + borda
 * .85 (quase outline pleno) pra a cor LER com presença sobre branco. O
 * .08/.3 original lavava (pastel sem glow). teal/violet/crimson `-free` já
 * = -dim no claro; amber não flipa, então fundo/borda usam `-dim-free` pra
 * casar com o texto -dim. ── */

/* Genre → Teal-dim */
:root[data-mode=light] .tag-pill._genre,
:root[data-mode=light] .tag-pill._taxonomy-genre {
  color: var(--teal-dim);
  border-color: hsl(var(--teal-free) / .85);
  background: hsl(var(--teal-free) / .25);
}

/* Fandom → Violet-dim */
:root[data-mode=light] .tag-pill._fandom,
:root[data-mode=light] .tag-pill._taxonomy-fandom {
  color: var(--violet-dim);
  border-color: hsl(var(--violet-free) / .85);
  background: hsl(var(--violet-free) / .25);
}

/* Character → Amber-dim (amber não flipa → -dim-free no fundo/borda) */
:root[data-mode=light] .tag-pill._character,
:root[data-mode=light] .tag-pill._taxonomy-character {
  color: var(--amber-dim);
  border-color: hsl(var(--amber-dim-free) / .85);
  background: hsl(var(--amber-dim-free) / .25);
}

/* Generic tag → cinza inset legível (o branco/.03 do base sumia no claro) */
:root[data-mode=light] .tag-pill._tag {
  color: var(--fg-300);
  border-color: var(--border-2);
  background: hsl(var(--bg-300-free) / .5);
}

/* Content warning → Crimson-dim */
:root[data-mode=light] .tag-pill._secondary._taxonomy-content_warning {
  color: var(--crimson-dim);
  border-color: hsl(var(--crimson-free) / .85);
  background: hsl(var(--crimson-free) / .25);
}

:root[data-mode=light] .tag-pill._secondary._taxonomy-content_warning:hover {
  border-color: hsl(var(--crimson-free) / .95);
  background: hsl(var(--crimson-free) / .35);
}

/* Focus outline → amber-dim */
:root[data-mode=light] .tag-pill:focus-visible {
  outline-color: var(--amber-dim);
}

/* ══════════════════════════════════════════════════════════════
 * 10. WATERMARK ICONS — Taxonomy visual cues
 *
 * Ícone decorativo sutil no fundo das tag pills, posicionado à
 * esquerda e desvanecendo para a direita via mask-image.
 *
 * Ícones de taxonomia (character/genre/content_warning/tag/fandom)
 * usam padrão dual-mask + background-color = token. O SVG monocromático
 * (path sem fill, default black) serve como camada de máscara; a cor
 * vem de `--amber`/`--teal`/`--crimson`/`--violet`/`--fg-700` e responde
 * a dark/light mode e hue-rotate (migrado em R3 — v1.89.0).
 *
 * Bandeiras nacionais de fandom (Brasil/Moçambique/China/Coreia/Japão)
 * mantêm cores HEX **brand-locked**: são definidas por especificação
 * oficial do governo do país (verde/amarelo do Brasil = #009739/#FEDD00
 * por lei) e jamais devem virar tokens. Veja DESIGN-DIRECTION.md §3.
 *
 * @since 1.4.3
 * @since 1.89.0 — dual-mask refactor pra eliminar hex de ícones de taxonomia.
 * ══════════════════════════════════════════════════════════════ */

/* ── 10a. Pseudo-elemento base (compartilhado) ── */

:root .tag-pill._taxonomy-character::before,
:root .tag-pill._taxonomy-genre::before,
:root .tag-pill._taxonomy-content_warning::before,
:root .tag-pill._taxonomy-fandom::before,
:root .tag-pill._tag::before,
:root .tag-pill._taxonomy-post_tag::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 3em;
  pointer-events: none;
  background-repeat: no-repeat;
  background-position: center left;
  background-size: auto 100%;
  opacity: .7;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-image: linear-gradient(to right, black 10%, transparent 90%);
  mask-image: linear-gradient(to right, black 10%, transparent 90%);
}

/* Inline pills — sem watermark */
:root .tag-pill._inline::before {
  display: none;
}

/* ── 10b. Ícones de taxonomia (token-driven via dual mask) ──
 * Padrão: background-color = token (amber/teal/crimson/violet/fg-700),
 * mask-image = (icon-svg-monochrome, fade-gradient) com mask-composite:intersect.
 * Final = forma do ícone × fade, colorida pelo token. Responde a dark/light/hue. */

:root .tag-pill._taxonomy-character::before,
:root .tag-pill._taxonomy-genre::before,
:root .tag-pill._taxonomy-content_warning::before,
:root .tag-pill._taxonomy-fandom::before,
:root .tag-pill._tag::before,
:root .tag-pill._taxonomy-post_tag::before {
  -webkit-mask-position: center left, 0 0;
  mask-position: center left, 0 0;
  -webkit-mask-size: auto 100%, 100% 100%;
  mask-size: auto 100%, 100% 100%;
  -webkit-mask-mode: alpha, alpha;
  mask-mode: alpha, alpha;
  -webkit-mask-composite: source-in;
  mask-composite: intersect;
}

/* Character → Pessoa (silhueta) — Amber */
:root .tag-pill._taxonomy-character::before {
  background-color: var(--amber);
  -webkit-mask-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='12' cy='7' r='4'/%3E%3Cpath d='M12 13c-4.42 0-8 1.79-8 4v1h16v-1c0-2.21-3.58-4-8-4z'/%3E%3C/svg%3E"),
    linear-gradient(to right, black 10%, transparent 90%);
  mask-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='12' cy='7' r='4'/%3E%3Cpath d='M12 13c-4.42 0-8 1.79-8 4v1h16v-1c0-2.21-3.58-4-8-4z'/%3E%3C/svg%3E"),
    linear-gradient(to right, black 10%, transparent 90%);
}

/* Genre → Livro aberto — Teal */
:root .tag-pill._taxonomy-genre::before {
  background-color: var(--teal);
  -webkit-mask-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M21 4H3a1 1 0 0 0-1 1v14a1 1 0 0 0 1 1h18a1 1 0 0 0 1-1V5a1 1 0 0 0-1-1zm-1 14H4V6h7v9l3-2 3 2V6h3v12z'/%3E%3C/svg%3E"),
    linear-gradient(to right, black 10%, transparent 90%);
  mask-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M21 4H3a1 1 0 0 0-1 1v14a1 1 0 0 0 1 1h18a1 1 0 0 0 1-1V5a1 1 0 0 0-1-1zm-1 14H4V6h7v9l3-2 3 2V6h3v12z'/%3E%3C/svg%3E"),
    linear-gradient(to right, black 10%, transparent 90%);
}

/* Content warning → Triângulo de alerta — Crimson */
:root .tag-pill._taxonomy-content_warning::before {
  background-color: var(--crimson);
  -webkit-mask-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M1 21h22L12 2 1 21zm12-3h-2v-2h2v2zm0-4h-2v-4h2v4z'/%3E%3C/svg%3E"),
    linear-gradient(to right, black 10%, transparent 90%);
  mask-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M1 21h22L12 2 1 21zm12-3h-2v-2h2v2zm0-4h-2v-4h2v4z'/%3E%3C/svg%3E"),
    linear-gradient(to right, black 10%, transparent 90%);
}

/* Generic tag → Hashtag — Neutro (fg-700) */
:root .tag-pill._tag::before,
:root .tag-pill._taxonomy-post_tag::before {
  background-color: var(--fg-700);
  -webkit-mask-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M10 3L8 9H3v2h4.5l-1 4H3v2h3l-2 6h2l2-6h4l-2 6h2l2-6h3v-2h-2.5l1-4H19V9h-3l2-6h-2l-2 6h-4l2-6h-2zm-.5 8h4l-1 4h-4l1-4z'/%3E%3C/svg%3E"),
    linear-gradient(to right, black 10%, transparent 90%);
  mask-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M10 3L8 9H3v2h4.5l-1 4H3v2h3l-2 6h2l2-6h4l-2 6h2l2-6h3v-2h-2.5l1-4H19V9h-3l2-6h-2l-2 6h-4l2-6h-2zm-.5 8h4l-1 4h-4l1-4z'/%3E%3C/svg%3E"),
    linear-gradient(to right, black 10%, transparent 90%);
}

/* ── 10c. Fandom — Globo (fallback para slugs não mapeados) — Violet ── */

:root .tag-pill._taxonomy-fandom::before {
  background-color: var(--violet);
  -webkit-mask-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm-1 17.93c-3.95-.49-7-3.85-7-7.93 0-.62.08-1.21.21-1.79L9 15v1c0 1.1.9 2 2 2v1.93zm6.9-2.54c-.26-.81-1-1.39-1.9-1.39h-1v-3c0-.55-.45-1-1-1H8v-2h2c.55 0 1-.45 1-1V7h2c1.1 0 2-.9 2-2v-.41c2.93 1.19 5 4.06 5 7.41 0 2.08-.8 3.97-2.1 5.39z'/%3E%3C/svg%3E"),
    linear-gradient(to right, black 10%, transparent 90%);
  mask-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm-1 17.93c-3.95-.49-7-3.85-7-7.93 0-.62.08-1.21.21-1.79L9 15v1c0 1.1.9 2 2 2v1.93zm6.9-2.54c-.26-.81-1-1.39-1.9-1.39h-1v-3c0-.55-.45-1-1-1H8v-2h2c.55 0 1-.45 1-1V7h2c1.1 0 2-.9 2-2v-.41c2.93 1.19 5 4.06 5 7.41 0 2.08-.8 3.97-2.1 5.39z'/%3E%3C/svg%3E"),
    linear-gradient(to right, black 10%, transparent 90%);
}

/* ── 10d. Fandom — Bandeiras nacionais (brand-locked, single fade-mask + colored bg-image) ──
 * Override do globo: reseta mask-composite/dual-mask pra fade-only, restaura
 * background-image com cores HEX oficiais. Cores fixas por especificação
 * de governo (e.g. verde brasileiro #009739 é norma oficial). */

/* Flags — shared reset (single fade-mask sobre bg-image colorido) */
:root .tag-pill._taxonomy-fandom._taxonomy-slug-brasileira::before,
:root .tag-pill._taxonomy-fandom._taxonomy-slug-mocambicana::before,
:root .tag-pill._taxonomy-fandom._taxonomy-slug-chinesa::before,
:root .tag-pill._taxonomy-fandom._taxonomy-slug-coreana::before,
:root .tag-pill._taxonomy-fandom._taxonomy-slug-japonesa::before {
  background-color: transparent;
  -webkit-mask-image: linear-gradient(to right, black 10%, transparent 90%);
  mask-image: linear-gradient(to right, black 10%, transparent 90%);
  -webkit-mask-position: 0 0;
  mask-position: 0 0;
  -webkit-mask-size: 100% 100%;
  mask-size: 100% 100%;
  -webkit-mask-composite: source-over;
  mask-composite: add;
}

/* Brasil 🇧🇷 — verde #009739, amarelo #FEDD00, azul #012169 (Lei Federal nº 5.700/1971) */
:root .tag-pill._taxonomy-fandom._taxonomy-slug-brasileira::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 20'%3E%3Crect width='30' height='20' fill='%23009739'/%3E%3Cpolygon points='15,2 28,10 15,18 2,10' fill='%23FEDD00'/%3E%3Ccircle cx='15' cy='10' r='4.5' fill='%23012169'/%3E%3C/svg%3E");
  opacity: .12;
}

/* Moçambique 🇲🇿 — verde #009739, preto #000, amarelo #FFD100, vermelho #D21034 (Constituição art. 296) */
:root .tag-pill._taxonomy-fandom._taxonomy-slug-mocambicana::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 20'%3E%3Crect width='30' height='7' fill='%23009739'/%3E%3Crect y='7' width='30' height='6' fill='%23000'/%3E%3Crect y='13' width='30' height='7' fill='%23FFD100'/%3E%3Cpolygon points='0,0 12,10 0,20' fill='%23D21034'/%3E%3C/svg%3E");
  opacity: .12;
}

/* China 🇨🇳 — vermelho #DE2910, amarelo #FFDE00 (Lei da Bandeira Nacional 1990) */
:root .tag-pill._taxonomy-fandom._taxonomy-slug-chinesa::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 20'%3E%3Crect width='30' height='20' fill='%23DE2910'/%3E%3Cpolygon points='5,3 6.2,6.5 3,4.8 7,4.8 3.8,6.5' fill='%23FFDE00'/%3E%3C/svg%3E");
  opacity: .12;
}

/* Coreia do Sul 🇰🇷 — branco, vermelho #C60C30, azul #003478 (Decreto Presidencial 2011) */
:root .tag-pill._taxonomy-fandom._taxonomy-slug-coreana::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 20'%3E%3Crect width='30' height='20' fill='%23fff'/%3E%3Ccircle cx='15' cy='10' r='5' fill='%23C60C30'/%3E%3Cpath d='M15,5a5,5 0 0,1 0,10a2.5,2.5 0 0,1 0-5a2.5,2.5 0 0,0 0-5z' fill='%23003478'/%3E%3C/svg%3E");
  opacity: .10;
}

/* Japão 🇯🇵 — branco, vermelho #BC002D (Lei nº 127/1999) */
:root .tag-pill._taxonomy-fandom._taxonomy-slug-japonesa::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 20'%3E%3Crect width='30' height='20' fill='%23fff'/%3E%3Ccircle cx='15' cy='10' r='5' fill='%23BC002D'/%3E%3C/svg%3E");
  opacity: .10;
}

/* Ocidental (multi-país) → usa o globo padrão do fandom */

/* ── 10e. Watermark Icons — Light Mode ── */

/* Ícones monocromáticos (mask + cor de acento): com as pills mais fortes
 * (v2.9.21) os ghosts a .12 sumiam. Voltam pra .7 — paridade com o dark
 * (base, opacity .7). A máscara fade-left mantém o ícone forte só no padding
 * esquerdo, fora do texto, então não atrapalha leitura. Globo do fandom
 * (mono violet) entra junto. */
:root[data-mode=light] .tag-pill._taxonomy-character::before,
:root[data-mode=light] .tag-pill._taxonomy-genre::before,
:root[data-mode=light] .tag-pill._taxonomy-content_warning::before,
:root[data-mode=light] .tag-pill._tag::before,
:root[data-mode=light] .tag-pill._taxonomy-post_tag::before,
:root[data-mode=light] .tag-pill._taxonomy-fandom::before {
  opacity: .7;
}

/* Bandeiras (SVG full-color, brand-locked): a .7 dominariam o pill. Sobem
 * de .08/.10 pra .25 — acompanham a presença dos ícones mono sem gritar.
 * (Coreia/Japão têm fundo branco que some no claro; só o emblema lê.) */
:root[data-mode=light] .tag-pill._taxonomy-fandom._taxonomy-slug-coreana::before,
:root[data-mode=light] .tag-pill._taxonomy-fandom._taxonomy-slug-japonesa::before,
:root[data-mode=light] .tag-pill._taxonomy-fandom._taxonomy-slug-brasileira::before,
:root[data-mode=light] .tag-pill._taxonomy-fandom._taxonomy-slug-mocambicana::before,
:root[data-mode=light] .tag-pill._taxonomy-fandom._taxonomy-slug-chinesa::before {
  opacity: .25;
}