/* ================================================================
   filters-sheet.css — Full de filtres en mode compacte (D371, D376)
   ----------------------------------------------------------------
   Marcatge i comportament: `createDockedFilters({ presentation: 'sheet' })`
   (packages/core-js/create-docked-filters.js). El full penja de <body>, per
   sobre del topbar, la capçalera de resultats, la barra inferior i el
   reproductor; l'<aside> de controls hi viatja mentre és obert.

   Cap media query de producte: la fàbrica només obre el full en mode
   compacte (el tanca en sortir-ne) i escriu on es col·loca a
   `data-placement` (`bottom` fins a `sheetBottomMaxPx`, `side` per sobre).
   Així cada producte hi posa el seu llindar sense tocar aquest fitxer.

   L'alçada és la del contingut, amb sostre a la del viewport visual (teclat
   inclòs): amb pocs filtres es veu la llista al darrere i amb molts el cos fa
   scroll a dins.

   Tokens que ha de definir el producte: --results-header-bg, --chrome-bar-bg
   (capçalera del full: el to de la barra de navegació, no el de la capçalera
   de pàgina), --ui-scrim, --border-subtle, --radius-2xl, --radius-full, --space-2, --font-ui,
   --font-lg, --font-md, --font-xs, --ink, --card, --color-primary-strong,
   --focus, --shadow-soft, --shadow-viewport-foot-up.
   ================================================================ */

.filters-sheet {
  position: fixed;
  inset: 0;
  z-index: 400;
  pointer-events: none;
  visibility: hidden;
  transition: visibility 0s linear .32s;
}
.filters-sheet.is-open {
  pointer-events: auto;
  visibility: visible;
  transition: visibility 0s;
}
/* El <body> només es bloqueja si ja era ell qui feia scroll: la fàbrica ho
   mira en obrir i hi posa `filters-sheet-lock-body`. Bloquejar-lo sempre el
   feia contenidor de scroll i la llista saltava a dalt. */
html.filters-sheet-open { overflow: hidden; }
html.filters-sheet-lock-body body { overflow: hidden; }

.filters-sheet__scrim {
  position: absolute;
  inset: 0;
  border: 0;
  padding: 0;
  background: var(--ui-scrim);
  opacity: 0;
  transition: opacity .28s ease;
  cursor: pointer;
}
.filters-sheet.is-open .filters-sheet__scrim { opacity: 1; }

.filters-sheet__panel {
  position: absolute;
  left: 0;
  right: 0;
  bottom: var(--filters-sheet-kb, 0px);
  display: flex;
  flex-direction: column;
  /* 24 px de fons visible a dalt: és on es toca per tancar quan el full és ple. */
  max-height: calc(var(--filters-sheet-vh, 100dvh) - env(safe-area-inset-top) - 24px);
  background: var(--results-header-bg);
  border-radius: var(--radius-2xl) var(--radius-2xl) 0 0;
  box-shadow: var(--shadow-viewport-foot-up);
  transform: translateY(100%);
  transition: transform .32s cubic-bezier(.22,.61,.36,1);
  outline: none;
}
.filters-sheet.is-open .filters-sheet__panel { transform: none; }
.filters-sheet__panel.is-dragging { transition: none; }

.filters-sheet__head {
  position: relative;
  flex: none;
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: 16px 6px 8px 16px;
  border-bottom: 1px solid var(--border-subtle);
  border-radius: var(--radius-2xl) var(--radius-2xl) 0 0;
  background: var(--chrome-bar-bg);
  touch-action: none;
}
.filters-sheet__grip {
  position: absolute;
  top: 6px;
  left: 50%;
  width: 36px;
  height: 4px;
  border-radius: var(--radius-full);
  background: var(--border-subtle);
  transform: translateX(-50%);
}
.filters-sheet__title {
  flex: 1;
  min-width: 0;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin: 0;
  font-family: var(--font-ui);
  font-weight: 900;
  font-size: var(--font-lg);
  color: var(--ink);
}
/* El nom de la pàgina va al mateix text que «Filtres»: si fos un fill flex,
   el gap de 8 px separaria el punt. min-width 0 deixa que el nom salti de
   línia i el Tancar es quedi a la dreta. */
.filters-sheet__heading {
  min-width: 0;
}
.filters-sheet__count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 20px;
  height: 20px;
  padding: 0 6px;
  box-sizing: border-box;
  border-radius: var(--radius-full);
  background: var(--color-primary-strong);
  color: var(--card);
  font-size: var(--font-xs);
  font-weight: 900;
  line-height: 1;
  font-variant-numeric: tabular-nums;
}
.filters-sheet__count[hidden] { display: none; }
/* El tancament és el pill «Tancar» del producte (.btn.btn-ghost.sidebar-close).
   .sidebar-close neix amb display:none; aquí es força visible sense tornar-lo una creu de 44. */
.filters-sheet .filters-sheet__close {
  display: inline-flex;
  flex-shrink: 0;
}
.filters-sheet__close:focus-visible,
.filters-sheet__apply:focus-visible {
  outline: none;
  box-shadow: var(--focus);
}

.filters-sheet__body {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: thin;
  scrollbar-gutter: stable;
  padding: var(--space-2) 6px 12px;
  overflow-x: clip;
}

.filters-sheet__foot {
  flex: none;
  padding: 10px 14px calc(10px + env(safe-area-inset-bottom));
  border-top: 1px solid var(--border-subtle);
  background: var(--results-header-bg);
}
.filters-sheet__apply {
  display: block;
  width: 100%;
  min-height: 44px;
  padding: 10px 16px;
  border: 1px solid var(--color-primary-strong);
  border-radius: var(--radius-full);
  background: var(--color-primary-strong);
  color: var(--card);
  font-family: var(--font-ui);
  font-weight: 800;
  font-size: var(--font-md);
  line-height: 1.2;
  cursor: pointer;
  appearance: none;
  -webkit-appearance: none;
}

/* De costat (pantalla ampla): entra per la dreta, a tota l'alçada, sense
   arrossegar per tancar. */
.filters-sheet[data-placement="side"] .filters-sheet__panel {
  top: 0;
  left: auto;
  width: min(420px, 90vw);
  max-height: none;
  border-radius: var(--radius-2xl) 0 0 var(--radius-2xl);
  box-shadow: var(--shadow-soft);
  transform: translateX(100%);
}
.filters-sheet[data-placement="side"].is-open .filters-sheet__panel { transform: none; }
.filters-sheet[data-placement="side"] .filters-sheet__head {
  border-radius: var(--radius-2xl) 0 0 0;
  touch-action: auto;
}
.filters-sheet[data-placement="side"] .filters-sheet__grip { display: none; }

@media (prefers-reduced-motion: reduce) {
  .filters-sheet,
  .filters-sheet__scrim,
  .filters-sheet__panel { transition: none; }
}