/* The search-and-filter bar is a separate control from the category chips above
   it (tier 2), so it stands off from them rather than crowding up against the row. */
.controls { display:flex; flex-wrap:wrap; gap:8px; align-items:center; margin-top:14px; }
input, select { font:inherit; color:var(--fg); background:var(--card);
  border:1px solid var(--line); border-radius:8px; padding:7px 10px; }
input[type=search] { min-width:200px; flex:1; }
.chip { cursor:pointer; user-select:none; border:1px solid var(--line);
  background:var(--card); color:var(--muted); border-radius:20px;
  padding:6px 13px; font:inherit; font-size:13px; }
.chip.on { background:var(--accent); color:#fff; border-color:var(--accent); }
.chip:focus-visible { outline:2px solid var(--accent); outline-offset:2px; }
main { padding:18px 20px 60px; }
.grid { display:grid; gap:16px 14px;
  grid-template-columns:repeat(auto-fill,minmax(140px,1fr)); }
.card { background:var(--card); border:1px solid var(--line); border-radius:12px;
  overflow:hidden; box-shadow:var(--shadow); display:flex; flex-direction:column; }
.card a { color:inherit; text-decoration:none; }
.thumb { aspect-ratio:2/3; background:var(--line); position:relative;
  display:flex; align-items:center; justify-content:center; overflow:hidden; }
.thumb img { width:100%; height:100%; object-fit:cover; }
/* Toy set images are wide product shots, not portrait covers; letterbox them
   instead of cropping to a sliver. */
.thumb.contain img { object-fit:contain; }
.thumb .ph { padding:10px; text-align:center; font-size:13px; font-weight:600;
  color:#fff; width:100%; height:100%; display:flex; align-items:center;
  justify-content:center; }
.badge { position:absolute; top:7px; left:7px; font-size:10px; font-weight:700;
  text-transform:uppercase; letter-spacing:.04em; background:rgba(0,0,0,.6);
  color:#fff; padding:2px 6px; border-radius:5px; }
.meta { padding:8px 9px 10px; }
.t { font-weight:600; font-size:13px; line-height:1.25;
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical;
  overflow:hidden; }
.c { color:var(--muted); font-size:12px; margin-top:2px;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
/* Which release this copy is. Its own line, never the tail of the creator line:
   it is the whole reason two cards for one film are not the same card. */
.ed { color:var(--accent); font-size:11px; font-weight:600; margin-top:3px;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.empty { color:var(--muted); padding:40px; text-align:center; }
.card { cursor:pointer; }
.card:focus-visible { outline:2px solid var(--accent); outline-offset:2px; }

/* Creator tiles: a mosaic of up to four covers standing in for the person */
.cmosaic { aspect-ratio:1/1; background:var(--line); display:grid; gap:1px;
  grid-template-columns:1fr 1fr; grid-auto-rows:1fr; overflow:hidden; }
.cmosaic.n1 { grid-template-columns:1fr; }
.cmosaic.n3 > :first-child { grid-row:span 2; }
.cmosaic img { width:100%; height:100%; object-fit:cover; display:block; }
.cmosaic .ph { padding:10px; text-align:center; font-size:13px; font-weight:600;
  color:#fff; display:flex; align-items:center; justify-content:center; }
.crumb { margin:0 0 16px; font-size:14px; color:var(--muted); }
.crumb .back { cursor:pointer; color:var(--accent); }
.crumb .back:hover { text-decoration:underline; }
.crumb b { color:var(--fg); font-weight:650; }
/* Collection cards in the grid: stacked look + member count */
.count { position:absolute; bottom:7px; left:7px; font-size:10px; font-weight:700;
  background:rgba(0,0,0,.6); color:#fff; padding:2px 6px; border-radius:5px; }
.card.coll { box-shadow:var(--shadow), 5px 5px 0 -1px var(--card), 6px 6px 0 -1px var(--line); }

@media (max-width:600px) {
  /* The header must not eat the phone screen: one compact row of controls
     that scrolls sideways, instead of wrapping to three sticky rows. */
  .controls { flex-wrap:nowrap; overflow-x:auto; scrollbar-width:none;
    -webkit-overflow-scrolling:touch; }
  .controls::-webkit-scrollbar { display:none; }
  input[type=search] { min-width:150px; flex:0 0 160px; }
  .chip, select { flex:none; white-space:nowrap; }
  main { padding:14px 12px 60px; }
  .grid { gap:12px 10px; grid-template-columns:repeat(auto-fill,minmax(110px,1fr)); }
  .modal { padding:10px; }
  .dhead { flex-direction:column; }
  .dcover { width:120px; }
  .fk { width:100px; }
}