/* ==========================================================================
   /vili/ browse experience (task t_browse01). Quick chips, collections strip,
   progressive "Load more", skeleton shimmer and the page-swap transition.
   Visual only: nothing here changes what the server filters on. Tokens come
   from lux.css so the page stays inside one visual language.
   ========================================================================== */

/* ---------- collections strip : browse by occasion, real hub links ------- */
.collections{
  display:flex;gap:.4rem;overflow-x:auto;padding:.15rem 0 .55rem;margin-bottom:.35rem;
  scrollbar-width:none;
}
.collections::-webkit-scrollbar{display:none}
.collink{
  display:inline-flex;align-items:center;gap:.4rem;flex:none;
  padding:.45rem .85rem;min-height:2.4rem;border-radius:var(--r-pill);
  border:1px solid var(--line);background:var(--card);
  font-size:.85rem;font-weight:600;color:var(--ink-2);text-decoration:none;
  transition:border-color var(--t-micro) ease,color var(--t-micro) ease,
    box-shadow var(--t-micro) ease,transform var(--t-micro) ease;
}
.collink svg{width:15px;height:15px;flex:none;color:var(--accent-2)}
.collink:hover{border-color:var(--accent-2);color:var(--ink);box-shadow:var(--shadow-sm);transform:translateY(-1px)}

/* ---------- quick chips : one tap to the five-second filters ------------ */
.qrow{margin:.1rem 0 var(--s3)}
.qscroll{
  display:flex;gap:.4rem;overflow-x:auto;padding-bottom:.3rem;
  scroll-snap-type:x proximity;scrollbar-width:thin;
}
.qpill{
  display:inline-flex;align-items:center;gap:.35rem;flex:none;
  padding:.45rem .8rem;min-height:2.5rem;border-radius:var(--r-pill);
  border:1px solid var(--line);background:var(--card);
  font-size:.85rem;font-weight:600;line-height:1.1;color:var(--ink-2);
  text-decoration:none;scroll-snap-align:start;
  transition:background var(--t-micro) ease,border-color var(--t-micro) ease,
    color var(--t-micro) ease,box-shadow var(--t-micro) ease;
}
.qpill svg{width:15px;height:15px;flex:none;color:var(--accent-2)}
.qpill em{
  font-style:normal;font-size:.72rem;font-variant-numeric:tabular-nums;
  color:var(--ink-3);padding-left:.1rem;
}
.qpill:hover{border-color:var(--accent-2);color:var(--ink);box-shadow:var(--shadow-sm)}
.qpill.on{background:var(--accent);border-color:var(--accent);color:#fff}
.qpill.on svg{color:#fff}
.qpill.on em{color:rgba(255,255,255,.75)}
.qpill.zero{opacity:.42;pointer-events:none}

/* ---------- progressive pagination ------------------------------------- */
/* The numbered pager is the no-JS surface; once the browse layer runs, the
   "Load more" button takes over so a page change never reloads the document. */
html.enh nav.pager{display:none}
.lmwrap{display:flex;flex-direction:column;align-items:center;gap:.5rem;margin:var(--s5) 0 var(--s2)}
.lmbtn{
  display:inline-flex;align-items:center;gap:.45rem;
  padding:.7rem 1.5rem;border-radius:var(--r-pill);
  border:1px solid var(--accent);background:var(--card);color:var(--accent);
  font-weight:600;cursor:pointer;
  transition:background var(--t-micro) ease,color var(--t-micro) ease,box-shadow var(--t-micro) ease;
}
.lmbtn:hover{background:var(--accent);color:#fff;box-shadow:var(--shadow-md)}
.lmbtn[aria-busy="true"]{opacity:.7;pointer-events:none}
.lmbtn .lmleft{font-weight:400;font-size:.8rem;opacity:.72}
.lmdone{margin:0;font-size:.85rem;color:var(--ink-3)}

/* ---------- skeleton shimmer while the next page arrives ---------------- */
.skel{
  border:1px solid var(--line);border-radius:var(--r-md);
  background:var(--card);overflow:hidden;
}
.skel .skmedia{
  aspect-ratio:4/3;
  background:linear-gradient(100deg,var(--accent-soft) 30%,rgba(255,255,255,.65) 50%,var(--accent-soft) 70%);
  background-size:220% 100%;
  animation:shimmer 1.1s linear infinite;
}
.skel .skbody{padding:.8rem .9rem 1rem;display:grid;gap:.45rem}
.skel .skline{
  height:.7rem;border-radius:var(--r-pill);
  background:linear-gradient(100deg,var(--accent-soft) 30%,rgba(255,255,255,.65) 50%,var(--accent-soft) 70%);
  background-size:220% 100%;
  animation:shimmer 1.1s linear infinite;
}
.skel .skline.w70{width:70%}
.skel .skline.w45{width:45%}
.skel .skline.tall{height:1.6rem;margin-top:.3rem}
@keyframes shimmer{from{background-position:120% 0}to{background-position:-120% 0}}

/* ---------- the swap: fade the section, slide the cards in ------------- */
/* 250ms, transform+opacity only so the swap never costs layout. */
section.results.swap-in{animation:resIn 250ms cubic-bezier(.2,.6,.2,1) both}
section.results.swap-out{opacity:.45;transition:opacity 120ms ease}
@keyframes resIn{from{opacity:0;transform:translateY(9px)}to{opacity:1;transform:none}}

/* a new card that arrives via "Load more" fades in on its own, so the list
   reads as growth rather than a jump */
.grid > .vcard{scroll-margin-top:calc(var(--hdr-h) + 14px)}
.grid > .vcard.arrive{animation:cardIn 260ms cubic-bezier(.2,.6,.2,1) both}
@keyframes cardIn{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}

.gridpane.off{display:none}
.sortbar .sortsel{margin-left:0}


/* desktop: the chip rail wraps instead of scrolling (there is room), and the
   results keep three across once the column is wide enough for it */
@media (min-width:900px){
  .qscroll{flex-wrap:wrap;overflow-x:visible}
}
@media (min-width:1080px){
  .resultlist .grid.two{grid-template-columns:repeat(auto-fill,minmax(230px,1fr))}
}

@media (max-width:560px){
  .qpill,.collink{font-size:.9rem;padding:.5rem .9rem}
  .lmbtn{width:100%;justify-content:center}
}

@media (prefers-reduced-motion:reduce){
  section.results.swap-in,.grid > .vcard.arrive,.skel .skmedia,.skel .skline{animation:none}
  section.results.swap-out{transition:none}
  .collink:hover{transform:none}
}