/* =============================================================================
 * TEAM FORGE — Forge XI Role Avatar Library (WEB PHASE 1E)
 * Discovery library: hero + filters + search + canonical role grid. Builds on
 * forge-xi.css tokens (--fx-*) and reuses its .fx-grid/.fx-visual placeholder
 * classes (no duplication). All selectors are .lib-scoped. Dark, editorial.
 *
 * FAZ 14F: kutuphane artik kendi sayfasi degil, /forge-xi icindeki #roller
 * bolumudur. .lib-main / .lib-hero / .lib-h1 / .lib-lead / .lib-eyebrow kurallari
 * o sayfaya ait DEGIL (baslik isini gateway'in .gw-section-head'i yapiyor) ->
 * OLU KOD olarak kaldirildi. Kalan .lib-* kurallari bolum icinde kullaniliyor.
 * ========================================================================== */

/* Capa hedefi: yapiskan header'in altina denk gelmesin. */
#roller { scroll-margin-top: 84px; }
/* Bolum, gateway izgarasinin icinde yasar; ozet serit basliktan sonra nefes alsin. */
.gw-lib .lib-summary { margin: 4px 0 18px; }

.lib-summary { display: flex; gap: 26px; flex-wrap: wrap; }
.lib-summary div { display: flex; flex-direction: column; }
.lib-summary .n { font-family: var(--fx-font-display); font-size: 1.7rem; color: var(--fx-gold); line-height: 1; }
.lib-summary .l { font-size: 0.78rem; text-transform: uppercase; letter-spacing: 0.1em; color: var(--fx-muted); margin-top: 4px; }

/* --------------------------- B. controls --------------------------------- */
.lib-controls { display: flex; flex-wrap: wrap; align-items: center; gap: 14px; padding: 8px 0 6px; border-top: 1px solid var(--fx-line-soft); margin-top: 6px; }
.lib-filters { display: flex; gap: 10px; flex-wrap: wrap; }
.lib-chip {
  font-family: var(--fx-font-body); font-size: 0.85rem; color: var(--fx-muted);
  background: var(--fx-panel); border: 1px solid var(--fx-line-soft); border-radius: 999px;
  padding: 9px 16px; cursor: pointer; transition: color .15s, border-color .15s, background .15s;
  display: inline-flex; align-items: center; gap: 7px; min-height: 40px;
}
.lib-chip:hover { color: var(--fx-ink); border-color: var(--fx-line); }
.lib-chip[aria-pressed="true"] { color: #10100c; background: var(--fx-gold); border-color: var(--fx-gold); }
.lib-chip .c { font-variant-numeric: tabular-nums; opacity: 0.75; font-size: 0.78rem; }
.lib-chip[aria-pressed="true"] .c { opacity: 0.85; }
.lib-chip:focus-visible { outline: 2px solid var(--fx-gold); outline-offset: 2px; }

.lib-search { position: relative; margin-left: auto; flex: 1 1 220px; max-width: 320px; min-width: 180px; }
.lib-search input {
  width: 100%; box-sizing: border-box; background: var(--fx-panel); color: var(--fx-ink);
  border: 1px solid var(--fx-line-soft); border-radius: 10px; padding: 11px 36px 11px 14px; font: inherit; font-size: 0.9rem;
}
.lib-search input::placeholder { color: var(--fx-muted); }
.lib-search input:focus-visible { outline: 2px solid var(--fx-gold); outline-offset: 1px; border-color: var(--fx-line); }
.lib-clear {
  position: absolute; right: 6px; top: 50%; transform: translateY(-50%); width: 26px; height: 26px;
  display: none; place-items: center; background: transparent; border: 0; color: var(--fx-muted); cursor: pointer; border-radius: 6px; font-size: 1.1rem; line-height: 1;
}
.lib-search[data-has-value="true"] .lib-clear { display: grid; }
.lib-clear:hover { color: var(--fx-gold); }
.lib-clear:focus-visible { outline: 2px solid var(--fx-gold); }

.lib-status-row { display: flex; align-items: center; justify-content: space-between; gap: 14px; flex-wrap: wrap; margin: 14px 0 20px; }
.lib-count { color: var(--fx-muted); font-size: 0.88rem; }
.lib-count b { color: var(--fx-ink); font-weight: 600; }
.lib-reset { background: transparent; border: 0; color: var(--fx-gold); font: inherit; font-size: 0.85rem; cursor: pointer; text-decoration: underline; text-underline-offset: 3px; padding: 4px; }
.lib-reset[hidden] { display: none; }
.lib-reset:focus-visible { outline: 2px solid var(--fx-gold); outline-offset: 2px; }

/* ------------------------------ D. cards --------------------------------- */
/* Reuses .fx-grid + .fx-card + .fx-visual from forge-xi.css; adds library extras. */
.lib-card-zone { font-size: 0.74rem; color: var(--fx-muted); letter-spacing: 0.02em; margin: 2px 0 6px; }
.lib-card-action { margin-top: 10px; font-size: 0.72rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--fx-gold); }
/* Restrained protagonist label — same card size/frame as every other role. */
.lib-ana { display: inline-block; margin-bottom: 8px; font-size: 0.62rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--fx-gold-dim); border: 1px solid var(--fx-line-soft); border-radius: 999px; padding: 2px 8px; }

/* ----------------------------- empty state ------------------------------- */
.lib-empty { padding: 48px 0; text-align: center; }
.lib-empty[hidden] { display: none; }
.lib-empty p { color: var(--fx-muted); font-size: 1rem; margin: 0 0 16px; }
.lib-empty .lib-empty-clear { display: inline-block; text-decoration: none; font-family: var(--fx-font-display); text-transform: uppercase; letter-spacing: 0.08em; font-size: 0.85rem; padding: 11px 20px; border-radius: 10px; border: 1px solid var(--fx-line); color: var(--fx-ink); background: transparent; cursor: pointer; }
.lib-empty .lib-empty-clear:hover { border-color: var(--fx-gold); color: var(--fx-gold); }
.lib-empty .lib-empty-clear:focus-visible { outline: 2px solid var(--fx-gold); outline-offset: 2px; }

/* registry-missing fallback (public-safe, no dev terms) */
.lib-fallback { color: var(--fx-muted); padding: 40px 0; }

@media (max-width: 560px) {
  .lib-search { margin-left: 0; max-width: none; flex-basis: 100%; }
}
@media (prefers-reduced-motion: reduce) {
  .lib-chip { transition: none; }
}

/* Faz 10b: kütüphane çıkışı — sessiz yönlendirme, satış baskısı yok. */
.lib-exit { margin: 40px auto 0; max-width: 640px; padding: 22px 24px; text-align: center;
  border: 1px solid var(--fx-line-soft); border-radius: 16px;
  background: linear-gradient(180deg, rgba(212,175,55,0.05), transparent); }
.lib-exit-line { margin: 0; font-family: var(--fx-font-display); text-transform: uppercase;
  letter-spacing: 0.06em; font-size: 0.95rem; color: var(--fx-ink); }
.lib-exit-sub { margin: 8px 0 0; font-size: 0.88rem; line-height: 1.6; color: var(--fx-muted); }