/* ══════════════════════════════════════════════════════════════
 * Illusia Conquest Badges — sistema visual completo (v1.69.0)
 *
 * Sistema de badges de conquista em 3 trilhas (Colaborador / Leitor /
 * Apoiador), 9 famílias, 5 tiers. Renderizado pela camada PHP geral em
 * `includes/illusia-badges.php` via emblema no comentário (filtro
 * `fictioneer_filter_comment_badge` prio 30) e seção "Minhas Badges" na
 * Conta.
 *
 * ARQUITETURA:
 *   1. Cada badge tem 3 dimensões ortogonais codificadas em data attrs:
 *      - data-track:  "colaborador" | "leitor" | "apoiador"
 *      - data-family: "consistencia" | "producao" | "recepcao" | "leitura"
 *                     | "conclusao" | "comunidade" | "critica"
 *                     | "fandom_follows" | "fandom_likes" | "lealdade" | "apoio"
 *      - data-tier:   "1" | "2" | "3" | "4" | "5"
 *
 *   2. data-family define o ACENTO (--acc / --acc-free) — uma cor por
 *      família, usando os tokens semânticos do tema (amber/sage/teal/
 *      crimson/violet/rose/bronze). O Apoiador é EXCEÇÃO: cada tier tem
 *      sua cor própria (paleta privada Patreon — ametista/esmeralda/
 *      bronze/prata/ouro) definida no override `[data-family="apoio"]
 *      [data-tier="N"]`.
 *
 *   3. data-tier define a DENSIDADE ESTRUTURAL (escada progressiva):
 *      T1: texto puro, cor cheia, sem moldura
 *      T2: + barra lateral 2px sólida (Regra 8 do tema)
 *      T3: + outline 1px completa
 *      T4: + fundo sólido + uppercase reforçado + bold
 *      T5: + Playfair italic + shimmer line ::before + halo ::after
 *
 *   4. Hover universal: `filter: brightness(1.15)` — dialeto Illusia,
 *      sem translateY, sem scale.
 *
 * REGRA DOS 3 TONS: a vitrine de perfil é a única exceção documentada
 * (DESIGN-DIRECTION.md §3) — até 7 acentos podem aparecer ali. No
 * comentário, sempre 1 emblema.
 *
 * @package Illusia Theme
 * @since   1.69.0
 * ══════════════════════════════════════════════════════════════ */

/* ── 1. PALETA PRIVADA APOIADOR ────────────────────────────────
 * Cores narrativas exclusivas do trilho Apoiador (tradição Patreon).
 * NÃO são tokens semânticos globais — só vivem dentro de [data-family="apoio"].
 * O bronze já é token global (--bronze) compartilhado com Lealdade.
 * Distinções intencionais dos acentos do tema:
 *   - amethyst 272° ≠ violet 260° (mais quente)
 *   - emerald 160°  ≠ sage 134° / teal 170° (verde mais saturado)
 *   - silver 220° baixa sat — sem conflito
 *   - gold 46°      ≠ amber 37° (mais amarelo puro)
 * ───────────────────────────────────────────────────────────── */

:root {
  --amethyst-free: 272 55% 65%;
  --emerald-free:  160 65% 50%;
  --silver-free:   220 18% 75%;
  --gold-free:     46 88% 60%;

  --amethyst: hsl(var(--amethyst-free));
  --emerald:  hsl(var(--emerald-free));
  --silver:   hsl(var(--silver-free));
  --gold:     hsl(var(--gold-free));
}

/* ── 2. BADGE BASE ─────────────────────────────────────────────
 * Padrão hairline editorial: Fira Code mono, uppercase, letterspacing,
 * border-radius pílula sutil. Hover = só brilho (regra tag-pill).
 * ───────────────────────────────────────────────────────────── */

.illusia-staff-badge {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2xs);
  padding: .28em .7em;
  font-family: var(--ff-mono);
  font-size: var(--text-2xs);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: .07em;
  line-height: 1.4;
  white-space: nowrap;
  vertical-align: middle;
  position: relative;
  color: var(--acc);
  transition:
    color        var(--t-fast) var(--ease-std),
    background   var(--t-fast) var(--ease-std),
    border-color var(--t-fast) var(--ease-std),
    filter       var(--t-fast) var(--ease-std);
}

.illusia-staff-badge:hover { filter: brightness(1.15); }

.illusia-staff-badge:focus-visible {
  outline: 2px solid var(--amber);
  outline-offset: 2px;
}

.illusia-staff-badge__icon {
  width: 11px;
  height: 11px;
  flex: 0 0 auto;
  stroke: currentColor;
  fill: none;
  stroke-width: 1.4;
  stroke-linecap: round;
  stroke-linejoin: round;
  opacity: 0.9;
}

.illusia-staff-badge__roman {
  font-family: inherit;
  font-weight: 600;
  letter-spacing: .04em;
  margin-left: 2px;
  opacity: 0.7;
}

.illusia-staff-badge__sep {
  opacity: 0.4;
  margin: 0 1px;
  font-family: var(--ff-mono);
}

/* Sub-label do tipo de colaborador (v1.70.0)
 * Aparece SÓ em badges da trilha colaborador com data-collab-type="autor"
 * OU "tradutor". Tipo "ambos" omite o sub-label (cobertura completa).
 * Detectado via term IDs das obras autoradas — ver
 * illusia_collab_get_user_type() em illusia-badges.php.
 * Hierarquia tipográfica: nome editorial vs metadado mono. */
.illusia-staff-badge__type {
  font-family: var(--ff-mono);
  font-weight: 500;
  font-size: 0.92em;
  text-transform: uppercase;
  letter-spacing: .08em;
  margin-left: var(--space-2xs);
  padding-left: var(--space-2xs);
  border-left: 1px solid currentColor;
  opacity: 0.78; /* v1.71.0: era .55, tava apagado demais */
}

/* No T5 o nome vira Playfair italic; o type CONTINUA Fira Code mono
 * (cria hierarquia: nome editorial · stat romana · metadado utilitário). */
.illusia-staff-badge[data-tier="5"] .illusia-staff-badge__type {
  font-style: normal;
  font-size: 0.78em;
  padding-top: 1px;
}

/* ── 3. FAMÍLIA → ACENTO ──────────────────────────────────────
 * Cada família puxa um acento semântico do tema.
 * Override do Apoiador (multi-tier) está em §6.
 * ───────────────────────────────────────────────────────────── */

/* Leitor */
.illusia-staff-badge[data-family="leitura"]        { --acc: var(--amber);    --acc-free: var(--amber-free); }
.illusia-staff-badge[data-family="conclusao"]      { --acc: var(--sage);     --acc-free: var(--sage-free); }
.illusia-staff-badge[data-family="comunidade"]     { --acc: var(--teal);     --acc-free: var(--teal-free); }
.illusia-staff-badge[data-family="critica"]        { --acc: var(--crimson);  --acc-free: var(--crimson-free); }
.illusia-staff-badge[data-family="fandom_follows"] { --acc: var(--violet);   --acc-free: var(--violet-free); }
.illusia-staff-badge[data-family="fandom_likes"]   { --acc: var(--rose);     --acc-free: var(--rose-free); }
.illusia-staff-badge[data-family="lealdade"]       { --acc: var(--bronze);   --acc-free: var(--bronze-free); }

/* Colaborador — paralelo cromático com famílias-espelho do Leitor */
.illusia-staff-badge[data-family="producao"]       { --acc: var(--amber);    --acc-free: var(--amber-free); }
.illusia-staff-badge[data-family="consistencia"]   { --acc: var(--teal);     --acc-free: var(--teal-free); }
.illusia-staff-badge[data-family="recepcao"]       { --acc: var(--violet);   --acc-free: var(--violet-free); }

/* Apoiador (default — sobrescrito por tier abaixo) */
.illusia-staff-badge[data-family="apoio"]          { --acc: var(--gold);     --acc-free: var(--gold-free); }

/* ── 4. ESCADA T1→T5 — ESTRUTURAL PROGRESSIVA ────────────────
 * Cada tier adiciona uma camada material. NÃO é só opacidade.
 * ───────────────────────────────────────────────────────────── */

/* T1 — Texto puro, cor cheia, sem moldura */
.illusia-staff-badge[data-tier="1"] {
  padding-left: 0;
  padding-right: 0;
  color: var(--acc);
}

/* T2 — + barra lateral 2px sólida + halo sutil (v1.71.0)
 * Transição mais suave T1→T2: ganha âncora + leve presença de fundo. */
.illusia-staff-badge[data-tier="2"] {
  padding-left: .85em;
  border-left: 2px solid var(--acc);
  border-radius: 0;
  background: hsl(var(--acc-free) / .04);
  color: var(--acc);
}

/* T3 — + outline 1px hairline completa + bg sutil (v1.71.0 — antes
 * era transparente; ganhar bg 7% diferencia mais claramente do T2). */
.illusia-staff-badge[data-tier="3"] {
  border: 1px solid hsl(var(--acc-free) / .65);
  border-radius: var(--r-xs);
  background: hsl(var(--acc-free) / .07);
  color: var(--acc);
}

/* T4 — + fundo sólido + uppercase reforçado + bold + shimmer top (v1.71.0)
 * Ganha border-left 2px (mesma âncora do T5) + shimmer hairline pra
 * marcar a transição visual pro tier lendário. */
.illusia-staff-badge[data-tier="4"] {
  border: 1px solid hsl(var(--acc-free) / .8);
  border-left: 2px solid var(--acc);
  border-radius: var(--r-xs);
  background: hsl(var(--acc-free) / .15);
  color: var(--acc);
  font-weight: 600;
  letter-spacing: .12em;
  padding: .32em .85em;
  overflow: visible;
  position: relative;
}
.illusia-staff-badge[data-tier="4"]::before {
  content: '';
  position: absolute;
  top: 0; left: 18%; right: 18%;
  height: 1px;
  background: linear-gradient(90deg,
    transparent,
    hsl(var(--acc-free) / .4),
    transparent);
  pointer-events: none;
}
.illusia-staff-badge[data-tier="4"] .illusia-staff-badge__icon { stroke-width: 1.6; opacity: 1; }

/* T5 — Editorial: Playfair italic + shimmer + halo + border-left
 * v1.71.0: font-size reduzido (.82 → .7rem) pra ficar proporcional ao
 * texto do comentário. */
.illusia-staff-badge[data-tier="5"] {
  border: 1px solid hsl(var(--acc-free) / .55);
  border-left: 2px solid var(--acc);
  border-radius: var(--r-xs);
  background: hsl(var(--acc-free) / .14);
  color: var(--acc);
  font-family: var(--ff-display);
  font-style: italic;
  font-weight: 700;
  text-transform: none;
  letter-spacing: 0;
  font-size: var(--text-xs);
  padding: .18em .85em;
  overflow: visible;
}

/* Shimmer line no topo (Regra 10 do tema — elevação tem shimmer) */
.illusia-staff-badge[data-tier="5"]::before {
  content: '';
  position: absolute;
  top: 0;
  left: 14%;
  right: 14%;
  height: 1px;
  background: linear-gradient(90deg,
    transparent,
    hsl(var(--acc-free) / .7),
    transparent);
  pointer-events: none;
}

/* Halo discreto (substitui animation glow barroco do Patreon original) */
.illusia-staff-badge[data-tier="5"]::after {
  content: '';
  position: absolute;
  inset: -1px;
  border-radius: inherit;
  box-shadow: 0 0 clamp(10px, 1.5vw, 16px) hsl(var(--acc-free) / .22);
  pointer-events: none;
  z-index: -1;
}

.illusia-staff-badge[data-tier="5"] .illusia-staff-badge__icon { stroke-width: 1.7; opacity: 1; }

.illusia-staff-badge[data-tier="5"] .illusia-staff-badge__roman {
  font-family: var(--ff-display);
  font-style: italic;
  font-weight: 700;
  opacity: 0.85;
  font-size: 1em;
  letter-spacing: 0;
}

/* ── 4b. PSEUDO-BADGE DE ROLE WP (v1.71.0) ──────────────────────
 * Quando o usuário não tem conquista T4-T5 (ou escolhe explicitamente
 * 'role' no chooser), renderiza pseudo-badge com o cargo institucional
 * no mesmo dialeto das conquistas (Fira Code mono, outline + bg sutil).
 * Cor varia por data-role-color (admin/editor/mod/autor/tradutor/etc).
 * Visualmente análoga ao T3 das conquistas (outline + bg 7%) mas SEM
 * silhueta SVG nem numeral romano — só o label do cargo.
 * ─────────────────────────────────────────────────────────────── */

.illusia-staff-badge.illusia-staff-badge--role {
  display: inline-flex;
  align-items: center;
  padding: .28em .75em;
  font-family: var(--ff-mono);
  font-size: var(--text-2xs);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: .07em;
  line-height: 1.4;
  white-space: nowrap;
  vertical-align: middle;
  position: relative;
  border: 1px solid hsl(var(--role-acc-free, var(--amber-free)) / .65);
  background: hsl(var(--role-acc-free, var(--amber-free)) / .08);
  border-radius: var(--r-xs);
  color: var(--role-acc, var(--amber));
  transition: filter var(--t-fast) var(--ease-std);
}
.illusia-staff-badge.illusia-staff-badge--role:hover { filter: brightness(1.15); }

[data-role-color="crimson"] { --role-acc: var(--crimson); --role-acc-free: var(--crimson-free); }
[data-role-color="violet"]  { --role-acc: var(--violet);  --role-acc-free: var(--violet-free); }
[data-role-color="teal"]    { --role-acc: var(--teal);    --role-acc-free: var(--teal-free); }
[data-role-color="amber"]   { --role-acc: var(--amber);   --role-acc-free: var(--amber-free); }
[data-role-color="sage"]    { --role-acc: var(--sage);    --role-acc-free: var(--sage-free); }
[data-role-color="rose"]    { --role-acc: var(--rose);    --role-acc-free: var(--rose-free); }
[data-role-color="bronze"]  { --role-acc: var(--bronze);  --role-acc-free: var(--bronze-free); }

/* ── 5. APOIADOR — PALETA PRIVADA POR TIER ────────────────────
 * Override do --acc por tier, dentro de data-family="apoio".
 * Mantém a tradição Patreon: cada nível tem identidade cromática fixa.
 * ───────────────────────────────────────────────────────────── */

.illusia-staff-badge[data-family="apoio"][data-tier="1"] { --acc: var(--amethyst); --acc-free: var(--amethyst-free); }
.illusia-staff-badge[data-family="apoio"][data-tier="2"] { --acc: var(--emerald);  --acc-free: var(--emerald-free); }
.illusia-staff-badge[data-family="apoio"][data-tier="3"] { --acc: var(--bronze);   --acc-free: var(--bronze-free); }
.illusia-staff-badge[data-family="apoio"][data-tier="4"] { --acc: var(--silver);   --acc-free: var(--silver-free); }
.illusia-staff-badge[data-family="apoio"][data-tier="5"] { --acc: var(--gold);     --acc-free: var(--gold-free); }

/* ── 6. CARD "MINHAS BADGES" NA CONTA ─────────────────────────
 * Container do chooser + lista de badges no perfil.
 * Glass card padrão Illusia (Regra 10 — shimmer no topo).
 * ───────────────────────────────────────────────────────────── */

.illusia-badges-card {
  position: relative;
  margin: var(--space-md) 0;
  padding: var(--space-md);
  background: var(--glass-bg);
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
  border: 1px solid var(--glass-border);
  border-radius: var(--r-xl);
}

.illusia-badges-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 12%;
  right: 12%;
  height: 1px;
  background: linear-gradient(90deg,
    transparent,
    hsl(var(--amber-free) / .15),
    transparent);
  pointer-events: none;
}

.illusia-badges-card__title {
  font-family: var(--ff-display);
  font-weight: 600;
  font-size: var(--text-md);
  color: var(--ink-0);
  margin: 0 0 var(--space-sm);
  letter-spacing: -.003em;
}

.illusia-badges-card__badge-list {
  list-style: none;
  margin: 0 0 var(--space-md);
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-md);
  align-items: center;
}

.illusia-badges-card__badge-list .illusia-staff-badge {
  margin-left: 0;
}

.illusia-badges-card__chooser {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-sm);
  padding-top: var(--space-sm);
  border-top: 1px solid var(--border-1);
  margin: 0;
}

.illusia-badges-card__chooser label {
  font-family: var(--ff-mono);
  font-size: var(--text-2xs);
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--ink-5);
}

.illusia-badges-card__chooser select {
  background: hsl(var(--void-0-free) / .6);
  border: 1px solid var(--border-1);
  border-radius: var(--r-md);
  color: var(--ink-1);
  font-family: var(--ff-ui);
  font-size: var(--text-sm);
  padding: .55em var(--space-md);
  max-width: 100%;
  transition:
    border-color var(--t-fast) var(--ease-std),
    box-shadow   var(--t-fast) var(--ease-std);
}

.illusia-badges-card__chooser select:focus {
  outline: none;
  border-color: var(--border-amber);
  box-shadow: 0 0 0 3px hsl(var(--amber-free) / .08);
}

#illusia-badge-choice-status {
  font-family: var(--ff-mono);
  font-size: var(--text-2xs);
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--ink-6);
  min-width: 60px;
}

/* ── 7. RESPONSIVE ────────────────────────────────────────────
 * Mobile keeps full system; badges flow naturally via flex-wrap.
 * ───────────────────────────────────────────────────────────── */

@media (max-width: 600px) {
  .illusia-badges-card__chooser {
    flex-direction: column;
    align-items: flex-start;
  }
  .illusia-badges-card__chooser select {
    width: 100%;
  }
}

/* ── 8. REDUCED MOTION ────────────────────────────────────────
 * Transições rápidas já são respeitosas, mas explícito é bom.
 * ───────────────────────────────────────────────────────────── */

@media (prefers-reduced-motion: reduce) {
  .illusia-staff-badge {
    transition-duration: 0ms;
  }
}