/* ══════════════════════════════════════════════════════════════
 * Illusia Tabs — Block canônico
 *
 * Sistema unificado de tabs do Illusia, análogo ao `.illusia-stat`.
 * Direção visual: "Observatory Bar" — glass container + amber pill,
 * shimmer line âmbar opt-in (Regra 10). Substitui 5 patterns que
 * coexistiam antes da v1.73 (rankings period, story-reviews, author,
 * bookshelf, profile).
 *
 * Convenção de estado ativo:
 *   `._active` (padrão Illusia) | `._current` (legacy Fictioneer) —
 *   ambos aceitos via `:where()` pra que adapters do parent sigam
 *   funcionando sem trocar markup.
 *
 * Seções:
 *   1. Container + variantes
 *   2. List (wrapper das tabs)
 *   3. Tab (estados base, hover, focus, active)
 *   4. Count badge (opcional, dentro da tab)
 *   5. Aside slot (sort toggle, secondary control)
 *   6. Panel (animação de entrada, hidden attr)
 *   7. Light mode
 *   8. Reduced motion
 *   9. Bookshelf adapter (markup Fictioneer → visual canônico)
 *
 * @since 1.73.0
 * ══════════════════════════════════════════════════════════════ */


/* ── 1. Container ──────────────────────────────────────────────
 *
 * Glass-bg + glass-border + radius-md + padding-2xs. Distribui
 * horizontalmente; permite scroll horizontal silencioso quando
 * a row não cabe (sem scrollbar, sem reflow).
 *
 * Modifier `--shimmer` adiciona linha hairline âmbar no topo
 * (Regra 10) — era assinatura do story-reviews na v1.72.x.
 * ────────────────────────────────────────────────────────────── */

.illusia-tabs {
  position: relative;
  display: flex;
  align-items: center;
  gap: var(--space-2xs);
  padding: var(--space-2xs);
  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-md);
  overflow-x: auto;
  scrollbar-width: none;
}
.illusia-tabs::-webkit-scrollbar { display: none; }

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


/* ── 2. List ───────────────────────────────────────────────────
 *
 * Wrapper das tabs. `--equal` distribui largura igual entre tabs
 * (flex 1 1 0) — útil em 2-3 tabs short. Sem ele, cada tab toma
 * o espaço do seu conteúdo (default do rankings).
 * ────────────────────────────────────────────────────────────── */

.illusia-tabs__list {
  display: flex;
  align-items: center;
  gap: var(--space-2xs);
  flex: 1 1 auto;
  min-width: 0;
}

.illusia-tabs__list--equal > .illusia-tabs__tab { flex: 1 1 0; }


/* ── 3. Tab ────────────────────────────────────────────────────
 *
 * ff-mono uppercase 2xs, weight 500 (600 no ativo). Aceita
 * `._active` (padrão Illusia) e `._current` (legacy Fictioneer)
 * via `:where()` pra que adapters não precisem trocar classe.
 * ────────────────────────────────────────────────────────────── */

.illusia-tabs__tab {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2xs);
  padding: var(--space-xs) var(--space-sm);
  font-family: var(--ff-mono);
  font-size: var(--text-2xs);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: .1em;
  color: var(--fg-700);
  text-decoration: none;
  background: transparent;
  border: 1px solid transparent;
  border-radius: var(--r-sm);
  cursor: pointer;
  white-space: nowrap;
  transition:
    color var(--t-fast) var(--ease-std),
    background var(--t-fast) var(--ease-std),
    border-color var(--t-fast) var(--ease-std);
}

.illusia-tabs__tab i {
  font-size: 1em;
  opacity: .7;
  transition: opacity var(--t-fast) var(--ease-std);
}

.illusia-tabs__tab:hover {
  color: var(--fg-400);
  background: hsl(var(--amber-free) / .04);
}

.illusia-tabs__tab:focus-visible {
  outline: 2px solid hsl(var(--amber-free) / .45);
  outline-offset: -2px;
}

.illusia-tabs__tab:where(._active, ._current) {
  color: var(--amber);
  background: hsl(var(--amber-free) / .1);
  font-weight: 600;
}

.illusia-tabs__tab:where(._active, ._current) i { opacity: 1; }


/* ── 4. Count badge ────────────────────────────────────────────
 *
 * Pill numérica dentro da tab (bookshelf, story-reviews). ff-mono
 * 3xs, fundo glass dim. No ativo adota tint âmbar.
 * ────────────────────────────────────────────────────────────── */

.illusia-tabs__count {
  font-family: var(--ff-mono);
  font-size: var(--text-3xs);
  color: var(--fg-900);
  padding: .15em .45em;
  background: hsl(var(--bg-800-free) / .6);
  border-radius: var(--r-xs);
  letter-spacing: .04em;
  line-height: 1.4;
}

.illusia-tabs__tab:where(._active, ._current) .illusia-tabs__count {
  color: hsl(var(--amber-free) / .9);
  background: hsl(var(--amber-free) / .12);
}


/* ── 5. Aside slot ─────────────────────────────────────────────
 *
 * Botão lateral (sort toggle, secondary control). Separado das
 * tabs por hairline esquerdo. `__aside-btn` é o padrão de
 * trigger ícone — clamp 28-32px.
 * ────────────────────────────────────────────────────────────── */

.illusia-tabs__aside {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2xs);
  margin-left: auto;
  padding-left: var(--space-xs);
  border-left: 1px solid var(--border-1);
}

.illusia-tabs__aside-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: clamp(28px, 3vw, 32px);
  height: clamp(28px, 3vw, 32px);
  border-radius: var(--r-sm);
  color: var(--fg-600);
  text-decoration: none;
  background: transparent;
  border: 0;
  cursor: pointer;
  transition:
    color var(--t-fast) var(--ease-std),
    background var(--t-fast) var(--ease-std);
}

.illusia-tabs__aside-btn:hover {
  color: var(--amber);
  background: hsl(var(--amber-free) / .06);
}

.illusia-tabs__aside-btn:focus-visible {
  outline: 2px solid hsl(var(--amber-free) / .45);
  outline-offset: 2px;
}


/* ── 6. Panel ──────────────────────────────────────────────────
 *
 * Painel de conteúdo. Visibilidade controlada pelo atributo
 * HTML `hidden` (gerenciado pelo `illusia-tabs.js`). Animação
 * de entrada quando aparece.
 * ────────────────────────────────────────────────────────────── */

.illusia-tabs__panel {
  animation: illusia-tabs-panel-in var(--t-mid) var(--ease-expo);
}

.illusia-tabs__panel[hidden] {
  display: none;
}

@keyframes illusia-tabs-panel-in {
  from {
    opacity: 0;
    transform: translateY(clamp(4px, .8vw, 8px));
  }
  to {
    opacity: 1;
    transform: none;
  }
}


/* ── 7. Light mode ─────────────────────────────────────────────
 *
 * Tokens fazem 90% do trabalho. Único ajuste: pill ativa fica
 * mais densa pra compensar o bg claro.
 * ────────────────────────────────────────────────────────────── */

:where(:root[data-mode="light"]) .illusia-tabs__tab:where(._active, ._current) {
  color: var(--amber-dim);
  background: hsl(var(--amber-free) / .14);
}


/* ── 8. Reduced motion ─────────────────────────────────────────
 * ────────────────────────────────────────────────────────────── */

@media (prefers-reduced-motion: reduce) {
  .illusia-tabs__tab,
  .illusia-tabs__tab i,
  .illusia-tabs__aside-btn,
  .illusia-tabs__panel {
    transition: none;
    animation: none;
  }
}


/* ── 8b. Mobile (≤480px) ───────────────────────────────────────
 *
 * Tabs com 4+ entradas + texto longo (ex: "Trilhas & Conquistas")
 * estouram em mobile. Reduzimos letter-spacing/padding pra ganhar
 * largura horizontal. O `overflow-x: auto` do container já garante
 * scroll gracioso em qualquer estouro residual.
 * ────────────────────────────────────────────────────────────── */

@media (max-width: 480px) {
  .illusia-tabs__tab,
  .bookshelf__tabs .tabs__item,
  .story__tabs .tabs__item {
    padding: var(--space-xs) var(--space-2xs);
    letter-spacing: .06em;
    font-size: var(--text-3xs);
  }

  .illusia-tabs__count,
  .bookshelf__tabs .tabs__item .item-number {
    padding: .1em .35em;
  }

  .illusia-tabs__aside,
  .bookshelf__tabs .bookshelf__sorting,
  .story__tabs .story__chapter-list-toggles {
    padding-left: var(--space-2xs);
  }
}


/* ── 9. Bookshelf adapter ──────────────────────────────────────
 *
 * Página /listas/ (bookshelf) usa o template do parent Fictioneer
 * (`singular-bookshelf.php`) que renderiza:
 *   <section class="bookshelf__tabs">
 *     <div class="tabs">
 *       <a class="tabs__item _current">…</a>
 *     </div>
 *     <div class="bookshelf__sorting">…</div>
 *   </section>
 *
 * Pra não duplicar template, mapeamos esse markup pro visual
 * canônico via seletores chained. O CSS funcional (skeleton,
 * cards, bookmarks, sort icon) continua em `illusia-bookshelf.css`.
 * ────────────────────────────────────────────────────────────── */

.bookshelf__tabs {
  position: relative;
  display: flex;
  align-items: center;
  gap: var(--space-2xs);
  padding: var(--space-2xs);
  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-md);
  /* Override do `.tabs-wrapper` do parent (que tem spacing-top). */
  margin-bottom: var(--space-md);
}

.bookshelf__tabs .tabs {
  display: flex;
  align-items: center;
  gap: var(--space-2xs);
  flex: 1 1 auto;
  min-width: 0;
  overflow-x: auto;
  scrollbar-width: none;
  margin-bottom: 0;
}
.bookshelf__tabs .tabs::-webkit-scrollbar { display: none; }

.bookshelf__tabs .tabs__item {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2xs);
  padding: var(--space-xs) var(--space-sm);
  font-family: var(--ff-mono);
  font-size: var(--text-2xs);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: .1em;
  color: var(--fg-700);
  text-decoration: none;
  background: transparent;
  border: 1px solid transparent;
  border-radius: var(--r-sm);
  white-space: nowrap;
  text-shadow: none;
  transition:
    color var(--t-fast) var(--ease-std),
    background var(--t-fast) var(--ease-std);
}

.bookshelf__tabs .tabs__item:hover {
  color: var(--fg-400);
  background: hsl(var(--amber-free) / .04);
  text-shadow: none;
}

.bookshelf__tabs .tabs__item:focus-visible {
  outline: 2px solid hsl(var(--amber-free) / .45);
  outline-offset: -2px;
}

.bookshelf__tabs .tabs__item._current {
  color: var(--amber);
  background: hsl(var(--amber-free) / .1);
  font-weight: 600;
  text-shadow: none;
}

/* Count badge ("item-number" do Fictioneer) → canonical look */
.bookshelf__tabs .tabs__item .item-number {
  font-family: var(--ff-mono);
  font-size: var(--text-3xs);
  color: var(--fg-900);
  padding: .15em .45em;
  background: hsl(var(--bg-800-free) / .6);
  border-radius: var(--r-xs);
  letter-spacing: .04em;
  line-height: 1.4;
}

.bookshelf__tabs .tabs__item._current .item-number {
  color: hsl(var(--amber-free) / .9);
  background: hsl(var(--amber-free) / .12);
}

.bookshelf__tabs .tabs__item .item-number .fa-spinner {
  font-size: .85em;
}

/* `.bookshelf__sorting` é o slot lateral; replica `__aside`. */
.bookshelf__tabs .bookshelf__sorting {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2xs);
  margin-left: auto;
  padding-left: var(--space-xs);
  border-left: 1px solid var(--border-1);
  flex-shrink: 0;
}

:where(:root[data-mode="light"]) .bookshelf__tabs .tabs__item._current {
  color: var(--amber-dim);
  background: hsl(var(--amber-free) / .14);
}

:where(:root[data-mode="light"]) .bookshelf__tabs .tabs__item._current .item-number {
  color: var(--amber-dim);
  background: hsl(var(--amber-free) / .16);
}


/* ── 10. Single Story adapter (Fictioneer) ─────────────────────
 *
 * `fictioneer_story_tabs()` renderiza:
 *   <section class="story__tabs tabs-wrapper">
 *     <div class="tabs">
 *       <button class="tabs__item _current">Capítulos</button>
 *       <button class="tabs__item">Blog</button>
 *     </div>
 *     <div class="story__chapter-list-toggles">
 *       <button class="list-button story__toggle">…</button>
 *     </div>
 *   </section>
 *
 * Mapeamos esse markup pro visual canônico. As toggles (View/Order)
 * viram aside lateral. Comportamento JS (Stimulus `fictioneer-story`)
 * preservado.
 * ────────────────────────────────────────────────────────────── */

.story__tabs {
  position: relative;
  display: flex;
  align-items: center;
  gap: var(--space-2xs);
  padding: var(--space-2xs);
  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-md);
  margin-bottom: var(--space-md);
}

.story__tabs > .tabs {
  display: flex;
  align-items: center;
  gap: var(--space-2xs);
  flex: 1 1 auto;
  min-width: 0;
  overflow-x: auto;
  scrollbar-width: none;
}
.story__tabs > .tabs::-webkit-scrollbar { display: none; }

.story__tabs .tabs__item {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2xs);
  padding: var(--space-xs) var(--space-sm);
  font-family: var(--ff-mono);
  font-size: var(--text-2xs);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: .1em;
  color: var(--fg-700);
  text-decoration: none;
  background: transparent;
  border: 1px solid transparent;
  border-radius: var(--r-sm);
  white-space: nowrap;
  text-shadow: none;
  cursor: pointer;
  transition:
    color var(--t-fast) var(--ease-std),
    background var(--t-fast) var(--ease-std);
}

.story__tabs .tabs__item:hover {
  color: var(--fg-400);
  background: hsl(var(--amber-free) / .04);
  text-shadow: none;
}

.story__tabs .tabs__item:focus-visible {
  outline: 2px solid hsl(var(--amber-free) / .45);
  outline-offset: -2px;
}

.story__tabs .story__toggle:focus-visible {
  outline: 2px solid hsl(var(--amber-free) / .45);
  outline-offset: 2px;
}

.story__tabs .tabs__item._current {
  color: var(--amber);
  background: hsl(var(--amber-free) / .1);
  font-weight: 600;
  text-shadow: none;
}

/* View + Order toggles viram aside lateral */
.story__tabs .story__chapter-list-toggles {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2xs);
  margin-left: auto;
  padding-left: var(--space-xs);
  border-left: 1px solid var(--border-1);
  flex-shrink: 0;
}

.story__tabs .story__toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: clamp(28px, 3vw, 32px);
  height: clamp(28px, 3vw, 32px);
  border-radius: var(--r-sm);
  color: var(--fg-600);
  text-decoration: none;
  background: transparent;
  border: 0;
  cursor: pointer;
  transition:
    color var(--t-fast) var(--ease-std),
    background var(--t-fast) var(--ease-std);
}

.story__tabs .story__toggle:hover {
  color: var(--amber);
  background: hsl(var(--amber-free) / .06);
}

:where(:root[data-mode="light"]) .story__tabs .tabs__item._current {
  color: var(--amber-dim);
  background: hsl(var(--amber-free) / .14);
}