/* ============================================================
   coloring-library.css — "Netflix for kids" gallery (Phase 6).
   NEW file. Self-contained styling that also inherits app theme
   tokens when present. Large touch targets, colorful, smooth.
   ============================================================ */

.clrlib {
  --s: var(--c-surface, #fff);
  --bd: var(--c-border, #e6e6ef);
  --pri: var(--c-primary, #5b6bff);
  --acc: var(--c-accent, #ff6b9d);
  --mut: var(--c-muted, #8a8aa3);
  font-family: "Noto Kufi Arabic", system-ui, sans-serif; color: #2b2b3a;
  background: var(--c-bg, #f6f4ff); min-height: 100%;
}
.clrlib * { box-sizing: border-box; }

/* pop-in (self-contained; harmless if the app's animations.css is also present) */
@keyframes clrlibPop { 0% { opacity: 0; transform: scale(.9); } 60% { transform: scale(1.03); } 100% { opacity: 1; transform: scale(1); } }
.clrlib .anim-pop { animation: clrlibPop .28s cubic-bezier(.34,1.56,.64,1) both; }

/* ---- header ---- */
.clrlib-header {
  position: sticky; top: 0; z-index: 10; display: flex; align-items: center; gap: 12px;
  padding: 12px 18px; background: var(--s); border-bottom: 1px solid var(--bd); flex-wrap: wrap;
}
.clrlib-brand { display: flex; align-items: center; gap: 8px; font-weight: 700; }
.clrlib-brand__logo { font-size: 24px; }
.clrlib-brand__title { color: var(--acc); font-size: 18px; }
.clrlib-search { flex: 1; min-width: 160px; }
.clrlib-search__input {
  width: 100%; font: inherit; padding: 11px 16px; border-radius: 30px;
  border: 2px solid var(--bd); background: var(--c-bg, #f6f4ff); outline: none;
}
.clrlib-search__input:focus { border-color: var(--pri); }
.clrlib-tabs { display: flex; gap: 6px; }
.clrlib-tab {
  width: 44px; height: 44px; border-radius: 14px; border: 2px solid var(--bd);
  background: var(--s); cursor: pointer; font-size: 18px;
}
.clrlib-tab.is-active { background: var(--pri); color: #fff; border-color: var(--pri); }

/* ---- filters ---- */
.clrlib-filterswrap { background: var(--s); border-bottom: 1px solid var(--bd); padding: 10px 18px; }
.clrlib-filters { display: flex; flex-direction: column; gap: 10px; }
.clrlib-fgroup { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.clrlib-fgroup__label { font-size: 13px; font-weight: 700; color: var(--mut); min-width: 54px; }
.clrlib-fgroup__chips { display: flex; gap: 6px; flex-wrap: wrap; }
.clrlib-fchip {
  font: inherit; font-size: 13px; font-weight: 700; cursor: pointer;
  border: 2px solid var(--bd); background: var(--s); color: #2b2b3a;
  border-radius: 30px; padding: 7px 13px;
}
.clrlib-fchip.is-active { background: var(--pri); color: #fff; border-color: var(--pri); }
.clrlib-fclear { align-self: flex-start; font: inherit; font-weight: 700; color: var(--acc); background: none; border: none; cursor: pointer; }

/* ---- content ---- */
.clrlib-content { padding: 12px 0 40px; }

/* ---- rows (shelves) ---- */
.clrlib-row { margin: 8px 0 20px; }
.clrlib-row__head { display: flex; align-items: baseline; gap: 10px; padding: 0 18px 8px; }
.clrlib-row__title { margin: 0; font-size: 18px; font-weight: 700; }
.clrlib-row__count { color: var(--mut); font-size: 13px; }
.clrlib-row__track {
  display: flex; gap: 14px; overflow-x: auto; padding: 6px 18px 10px;
  scroll-snap-type: x proximity; -webkit-overflow-scrolling: touch;
}
.clrlib-row__track > * { scroll-snap-align: start; }

/* ---- artwork card ---- */
.clrlib-card {
  flex: 0 0 auto; width: 158px; background: var(--s); border: 1px solid var(--bd);
  border-radius: 18px; padding: 8px; cursor: pointer; font: inherit; text-align: center;
  box-shadow: 0 6px 16px var(--c-shadow, rgba(91,107,255,.12));
  transition: transform .14s ease, box-shadow .14s ease;
}
.clrlib-card:hover { transform: translateY(-4px); box-shadow: 0 14px 28px var(--c-shadow, rgba(91,107,255,.18)); }
.clrlib-card--lg { width: 200px; }
.clrlib-card__thumb {
  position: relative; aspect-ratio: 1; border-radius: 14px; overflow: hidden;
  display: flex; align-items: center; justify-content: center; margin-bottom: 8px;
}
.clrlib-card__emoji { font-size: 52px; position: absolute; z-index: 0; opacity: .85; }
.clrlib-card__img {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain;
  padding: 8px; opacity: 0; transition: opacity .35s ease; z-index: 1; background: #fff;
}
.clrlib-card__img.is-loaded { opacity: 1; }
.clrlib-card__img.is-error { display: none; }
.clrlib-card__title { font-weight: 700; font-size: 14px; }
.clrlib-card__meta { display: flex; gap: 4px; justify-content: center; margin-top: 4px; }
.clrlib-chip { font-size: 11px; font-weight: 700; color: var(--mut); background: var(--c-bg, #f2f4ff); border-radius: 20px; padding: 2px 8px; }

.clrlib-heart {
  position: absolute; top: 6px; inset-inline-start: 6px; z-index: 2; border: none;
  background: rgba(255,255,255,.85); width: 30px; height: 30px; border-radius: 50%;
  cursor: pointer; font-size: 15px; box-shadow: 0 2px 6px rgba(0,0,0,.15);
}
.clrlib-card__badge {
  position: absolute; top: 6px; inset-inline-end: 6px; z-index: 2;
  background: var(--acc); color: #fff; font-size: 11px; font-weight: 700;
  padding: 3px 8px; border-radius: 20px;
}

/* ---- featured pack cards ---- */
.clrlib-row__track--packs .clrlib-pack { }
.clrlib-pack {
  flex: 0 0 auto; width: 190px; height: 120px; border: none; cursor: pointer; font: inherit;
  border-radius: 20px; color: #fff; display: flex; flex-direction: column; justify-content: flex-end;
  padding: 14px; text-align: start; gap: 2px;
  background: linear-gradient(135deg, #ff9ec4, #8ea2ff);
  box-shadow: 0 10px 24px rgba(91,107,255,.22);
}
.clrlib-pack:nth-child(3n+2) { background: linear-gradient(135deg, #a0e8c4, #6bc3ff); }
.clrlib-pack:nth-child(3n) { background: linear-gradient(135deg, #ffd782, #ff9ec4); }
.clrlib-pack__emoji { font-size: 34px; }
.clrlib-pack__title { font-size: 17px; font-weight: 700; }
.clrlib-pack__count { font-size: 12px; opacity: .9; }

/* ---- grid / list results ---- */
.clrlib-results__head { padding: 4px 18px 10px; color: var(--mut); font-weight: 700; }
.clrlib-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: 14px; padding: 0 18px;
}
.clrlib-grid .clrlib-card { width: auto; }
.clrlib-list { display: flex; flex-direction: column; gap: 8px; padding: 0 18px; }
.clrlib-listrow {
  display: flex; align-items: center; gap: 12px; width: 100%; text-align: start;
  background: var(--s); border: 1px solid var(--bd); border-radius: 16px; padding: 10px 14px;
  cursor: pointer; font: inherit;
}
.clrlib-listrow:hover { border-color: var(--pri); }
.clrlib-listrow__emoji { font-size: 28px; }
.clrlib-listrow__title { flex: 1; font-weight: 700; }
.clrlib-listrow .clrlib-heart { position: static; box-shadow: none; background: transparent; }
.clrlib-sentinel { height: 1px; }

/* ---- skeletons ---- */
.clrlib-skel { pointer-events: none; }
.clrlib-skel__line { height: 12px; border-radius: 6px; margin: 6px 4px; }
.clrlib-skel__line--sm { width: 60%; margin-inline: auto; }
.clrlib-shimmer {
  background: linear-gradient(100deg, #e9ecff 30%, #f4f6ff 50%, #e9ecff 70%);
  background-size: 200% 100%; animation: clrlibShimmer 1.2s infinite;
}
@keyframes clrlibShimmer { 0% { background-position: 200% 0; } 100% { background-position: -200% 0; } }

/* ---- empty states ---- */
.clrlib-empty { text-align: center; padding: 50px 20px; color: var(--mut); }
.clrlib-empty--row { flex: 0 0 auto; width: auto; padding: 24px; display: flex; align-items: center; gap: 10px; }
.clrlib-empty__emoji { font-size: 44px; }
.clrlib-empty__title { font-size: 18px; font-weight: 700; color: #2b2b3a; margin-top: 8px; }
.clrlib-empty__text { font-size: 14px; margin-top: 4px; }
.clrlib-empty__btn { margin-top: 14px; font: inherit; font-weight: 700; color: #fff; background: var(--pri); border: none; border-radius: 30px; padding: 10px 20px; cursor: pointer; }

/* ---- launcher overlay (hosts the Coloring Module) ---- */
.clrlib-launcher {
  position: fixed; inset: 0; z-index: 1000; background: #eef1ff;
  display: flex; flex-direction: column; opacity: 0; pointer-events: none;
  transform: translateY(12px); transition: opacity .22s ease, transform .22s ease;
}
.clrlib-launcher.is-open { opacity: 1; pointer-events: auto; transform: none; }
.clrlib-launcher__bar { padding: 8px 12px; background: #fff; border-bottom: 1px solid var(--bd); }
.clrlib-launcher__back { font: inherit; font-weight: 700; color: var(--pri); background: #fff; border: 2px solid var(--bd); border-radius: 30px; padding: 8px 16px; cursor: pointer; }
.clrlib-launcher__stage { flex: 1; min-height: 0; }

/* ---- responsive ---- */
@media (max-width: 620px) {
  .clrlib-brand__title { display: none; }
  .clrlib-card { width: 132px; }
  .clrlib-pack { width: 160px; height: 104px; }
  .clrlib-grid { grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: 10px; }
}