/* Library: search, genre filter chips, poster grid, detail sheet. */

.library__head { display: flex; gap: .6rem; align-items: center; margin: .2rem 0 .8rem; }
.library__search {
  flex: 1; background: var(--bg-raise); border: 1px solid var(--line);
  border-radius: 999px; padding: .6rem 1rem; color: var(--ink);
  transition: border-color .2s;
}
.library__search::placeholder { color: var(--ink-mute); }
.library__search:focus { border-color: var(--ember); outline: none; }

.library__filterbar { display: flex; gap: .45rem; overflow-x: auto; padding-bottom: .7rem; scrollbar-width: none; }
.library__filterbar::-webkit-scrollbar { display: none; }
.chip {
  flex: 0 0 auto; background: var(--bg-raise); border: 1px solid var(--line);
  color: var(--ink-dim); border-radius: 999px; padding: .32rem .8rem;
  font-size: var(--step--1); cursor: pointer; white-space: nowrap; transition: all .18s var(--ease);
}
.chip.is-on { background: var(--ember); border-color: var(--ember); color: #241206; font-weight: 600; }

/* poster grid */
.grid {
  display: grid; gap: clamp(10px, 2.4vw, 18px);
  grid-template-columns: repeat(auto-fill, minmax(clamp(104px, 30vw, 168px), 1fr));
}
.card { cursor: pointer; border: 0; background: none; padding: 0; text-align: left; }
.card__poster {
  position: relative; aspect-ratio: 2/3; border-radius: var(--radius); overflow: hidden;
  background: var(--bg-card) center/cover no-repeat; box-shadow: var(--shadow);
  transition: transform .22s var(--ease), box-shadow .22s var(--ease);
}
.card__poster::after {
  content: ""; position: absolute; inset: 0; border-radius: inherit;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.05); pointer-events: none;
}
.card:hover .card__poster, .card:focus-visible .card__poster {
  transform: translateY(-4px);
  box-shadow: 0 16px 30px rgba(0,0,0,.5), 0 0 0 1px var(--ember), 0 8px 40px var(--glow);
}
.card__fallback {
  position: absolute; inset: 0; display: grid; place-items: center; padding: .6rem;
  font-family: var(--f-display); font-weight: 600; text-align: center; color: var(--ink-dim);
  background: linear-gradient(150deg, var(--bg-hi), var(--bg-card));
}
.card__meta { margin-top: .45rem; }
.card__title { font-size: var(--step-0); font-weight: 500; line-height: 1.2; }
.card__sub { font-size: var(--step--1); color: var(--ink-mute); margin-top: .05rem; }
.card__rating {
  position: absolute; top: .5rem; left: .5rem; z-index: 2;
  background: rgba(20,12,8,.78); backdrop-filter: blur(4px); color: var(--ink);
  font-size: .66rem; font-weight: 700; letter-spacing: .04em;
  padding: .12rem .38rem; border-radius: 5px; border: 1px solid rgba(255,255,255,.12);
}

.empty {
  text-align: center; color: var(--ink-mute); padding: 4rem 1rem; font-family: var(--f-display);
  font-size: var(--step-1);
}

/* --- detail sheet --- */
.sheet { position: fixed; inset: 0; z-index: 40; display: grid; }
.sheet[hidden] { display: none; }
.sheet__scrim { position: absolute; inset: 0; background: rgba(8,5,3,.72); backdrop-filter: blur(3px); }
.sheet__card {
  position: relative; z-index: 1; align-self: end; margin: 0 auto; width: min(680px, 100%);
  background: var(--bg-raise); border: 1px solid var(--line);
  border-radius: var(--radius-lg) var(--radius-lg) 0 0; box-shadow: var(--shadow);
  max-height: 92vh; overflow: auto; animation: sheetUp .32s var(--ease);
}
@media (min-width: 720px) { .sheet__card { align-self: center; border-radius: var(--radius-lg); } }
@keyframes sheetUp { from { transform: translateY(30px); opacity: 0; } to { transform: none; opacity: 1; } }

.detail__hero { position: relative; aspect-ratio: 16/9; background: var(--bg-card) center/cover; }
.detail__hero::after { content: ""; position: absolute; inset: 0; background: linear-gradient(transparent 30%, var(--bg-raise)); }
.detail__body { padding: 0 clamp(18px, 4vw, 30px) 26px; margin-top: -3.2rem; position: relative; }
.detail__title { font-size: var(--step-2); }
.detail__facts { display: flex; flex-wrap: wrap; gap: .5rem .9rem; color: var(--ink-dim); font-size: var(--step--1); margin: .5rem 0 .1rem; align-items: center; }
.detail__facts .dot { width: 3px; height: 3px; border-radius: 50%; background: var(--ink-mute); }
.detail__genres { display: flex; flex-wrap: wrap; gap: .35rem; margin: .8rem 0; }
.tag { font-size: var(--step--1); color: var(--ember-soft); border: 1px solid var(--line); border-radius: 999px; padding: .18rem .6rem; }
.detail__overview { color: var(--ink-dim); margin: .7rem 0 1.3rem; max-width: 60ch; }
.detail__actions { display: flex; gap: .6rem; flex-wrap: wrap; }
.btn-cast {
  flex: 1; min-width: 200px; border: 0; cursor: pointer; border-radius: 999px;
  padding: .9rem 1.4rem; font-size: var(--step-0); font-weight: 700; letter-spacing: .01em;
  color: #241005; background: linear-gradient(180deg, var(--ember-soft), var(--ember));
  box-shadow: 0 6px 22px var(--glow); transition: transform .15s var(--ease), box-shadow .2s;
  display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
}
.btn-cast:hover { transform: translateY(-1px); box-shadow: 0 10px 30px var(--glow-hot); }
.btn-cast:active { transform: translateY(0); }
.btn-cast[disabled] { opacity: .55; cursor: default; box-shadow: none; }
.btn-close {
  position: absolute; top: .8rem; right: .8rem; z-index: 3; width: 36px; height: 36px; border-radius: 50%;
  background: rgba(20,12,8,.7); border: 1px solid rgba(255,255,255,.14); color: var(--ink); cursor: pointer; font-size: 1.1rem;
}