/* ==========================================================================
   /vili/ results page — search UI layer (task t_df82744f)
   Loaded on the search page only. Chips, the mobile filter sheet, the active
   filter row and the empty state. Colour, radius and shadows come from the
   tokens in lux.css so this page stays inside the same visual language.
   Visual only: no selector here changes what the server filters on.
   ========================================================================== */

.sronly{
  position:absolute;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0;
}

/* ---------- mobile toolbar: sheet trigger + result count ---------- */
.sfbar{display:none;align-items:center;gap:var(--s3);margin-bottom:var(--s4)}
.sfopen{
  display:inline-flex;align-items:center;gap:.5rem;
  font:inherit;font-size:.9rem;font-weight:600;
  padding:.6rem 1rem;border-radius:var(--r-pill);
  color:var(--ink);background:var(--card);border:1px solid var(--line);
  box-shadow:var(--shadow-sm);cursor:pointer;
}
.sfopen:active{transform:translateY(1px)}
.sfopen svg{color:var(--accent-2)}
.sfbadge{
  min-width:1.3rem;height:1.3rem;padding:0 .3rem;border-radius:var(--r-pill);
  display:inline-flex;align-items:center;justify-content:center;
  background:var(--accent);color:#fff;font-size:.72rem;font-weight:700;
}

/* ---------- result count ---------- */
.rcount{margin:0;font-size:.95rem;color:var(--ink-2)}
.rcount strong{font-size:1.05rem;color:var(--ink);font-variant-numeric:tabular-nums}

/* ---------- the filter rail, as chips ---------- */
/* Results grid: the rail eats 250px, so the cards need their own min to still
   give three columns on a wide screen instead of two fat ones. */
.resultlist .grid.two{grid-template-columns:repeat(auto-fill,minmax(250px,1fr))}
.filters .fgroup{display:flex;flex-wrap:wrap;gap:.4rem}
.filters .fgroup h4{flex:0 0 100%;margin-bottom:.15rem}
.fchk{
  position:relative;display:inline-flex;align-items:center;gap:.4rem;
  padding:.4rem .7rem;border-radius:var(--r-pill);
  border:1px solid var(--line);background:var(--card);
  font-size:.85rem;line-height:1.2;color:var(--ink-2);
  min-height:2.35rem;
  cursor:pointer;transition:border-color var(--t-micro) ease,
    background var(--t-micro) ease,color var(--t-micro) ease,box-shadow var(--t-micro) ease;
}
.fchk:hover{border-color:var(--accent-2);color:var(--ink);box-shadow:var(--shadow-sm)}
.fchk .ficon{flex:none;color:var(--accent-2);transition:color var(--t-micro) ease}
.fchk em{
  font-style:normal;font-size:.75rem;font-variant-numeric:tabular-nums;
  color:var(--ink-3);padding-left:.15rem;
}
/* the native control stays in the DOM (form submit, keyboard) but leaves the
   pill to do the drawing */
.fchk input{
  position:absolute;width:1px;height:1px;opacity:0;margin:0;pointer-events:none;
}
.fchk:has(input:checked){
  background:var(--accent);border-color:var(--accent);color:#fff;font-weight:600;
}
.fchk:has(input:checked) .ficon{color:#D8BC93}
.fchk:has(input:checked) em{color:rgba(255,255,255,.75)}
.fchk:has(input:focus-visible){outline:2px solid var(--accent-2);outline-offset:2px}
.fchk.zero{opacity:.45}
.fchk.zero:hover{opacity:.7}

.factions{display:flex;flex-direction:column;gap:.6rem;align-items:stretch}
.factions .reset{font-size:.8125rem;text-align:center;color:var(--ink-3);
  text-decoration:underline;text-underline-offset:3px}

/* the sheet's own header is a phone-only thing */
.fpbar{display:none;align-items:center;justify-content:space-between;gap:var(--s4)}
.fptitle{font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;
  color:var(--ink-3);font-weight:700}
.sfclose{
  width:2rem;height:2rem;border-radius:var(--r-pill);border:1px solid var(--line);
  background:var(--card);color:var(--ink-2);font-size:1.05rem;line-height:1;
  cursor:pointer;display:inline-flex;align-items:center;justify-content:center;
}

/* ---------- active filters ---------- */
.activechips{
  display:flex;flex-wrap:wrap;align-items:center;gap:.4rem;
  margin-bottom:var(--s4);padding-bottom:var(--s4);
  border-bottom:1px solid var(--line);
}
.aclabel{font-size:.75rem;letter-spacing:.1em;text-transform:uppercase;
  color:var(--ink-3);font-weight:700;margin-right:.2rem}
.chip-x{
  display:inline-flex;align-items:center;gap:.4rem;
  padding:.35rem .65rem;border-radius:var(--r-pill);
  border:1px solid var(--line);background:var(--accent-soft);
  font-size:.82rem;color:var(--ink);text-decoration:none;
  transition:border-color var(--t-micro) ease,background var(--t-micro) ease;
}
.chip-x:hover{border-color:var(--accent-2);background:var(--card)}
.chip-x .xmark{color:var(--ink-3);font-size:.95rem;line-height:1}
.chip-x:hover .xmark{color:var(--err)}
.acclear{font-size:.8rem;color:var(--ink-3);text-decoration:underline;
  text-underline-offset:3px;margin-left:.25rem}
.acclear:hover{color:var(--ink)}

/* ---------- empty state ---------- */
.empty{
  padding:var(--s7) var(--s5);border:1px solid var(--line);border-radius:var(--r-lg);
  background:var(--card);box-shadow:var(--shadow-sm);text-align:center;
}
.empty h3{margin-bottom:var(--s2)}
.emptylede{color:var(--ink-2);max-width:46ch;margin:0 auto var(--s5)}
.emptybox{margin:0 auto var(--s5);max-width:38rem}
.emptybox h4{
  font-size:.72rem;letter-spacing:.12em;text-transform:uppercase;
  color:var(--ink-3);font-weight:700;margin-bottom:.6rem;
}
.chiprow{display:flex;flex-wrap:wrap;gap:.4rem;justify-content:center}
.emptyacts{display:flex;flex-wrap:wrap;gap:.6rem;justify-content:center}

/* ---------- phones: the rail becomes a bottom sheet ---------- */
@media (max-width:860px){
  .sfbar{display:flex}
  .sortbar .rcount{display:none}
  .fpbar{display:flex}
  .filters{
    position:fixed;left:0;right:0;bottom:0;top:auto;z-index:70;
    max-height:88vh;overflow-y:auto;overscroll-behavior:contain;
    display:flex;flex-direction:column;gap:var(--s4);
    padding:var(--s4) var(--gutter) calc(var(--s5) + env(safe-area-inset-bottom));
    border:0;border-top:1px solid var(--line);border-radius:var(--r-lg) var(--r-lg) 0 0;
    background:var(--bg);box-shadow:var(--shadow-lg);
    transform:translateY(101%);transition:transform var(--t-hover) ease;
    visibility:hidden;
  }
  body.sf-sheet .filters{transform:none;visibility:visible}
  body.sf-sheet{overflow:hidden}
  body.sf-sheet::after{
    content:"";position:fixed;inset:0;z-index:60;
    background:rgba(18,47,42,.42);backdrop-filter:blur(2px);
  }
  .filters .fgroup{display:flex;flex-wrap:wrap;gap:.4rem}
  .fchk{font-size:.9rem;padding:.5rem .8rem}
  .factions{
    position:sticky;bottom:0;background:var(--bg);
    padding-top:var(--s3);padding-bottom:.2rem;border-top:1px solid var(--line);
  }
  .factions .btn.wide{width:100%}
}

@media (max-width:560px){
  .resultlist .grid.two{grid-template-columns:1fr}
}

@media (prefers-reduced-motion:reduce){
  .filters{transition:none}
}