/* =============================================================================
   86-filmography-results.css — the filmography, as a search results page
   -----------------------------------------------------------------------------
   Only three things are new here: the sort bar under the header, the count line
   under it, and the filter sheet. The panel, the heading block, the top-right
   control and the result cards are the search page's own and are not restyled —
   the whole point of the move is that this reads as a results page, so anything
   that made it look bespoke would undo it.

   Editorial dark throughout: flat fills, no outlines, the same
   `rgba(38,37,48,0.7)` over `blur(10px)` the app's other surfaces carry.
   ========================================================================== */

/* ── sort bar ─────────────────────────────────────────────────────────────
   Scrolls sideways rather than wrapping: three labels, one of them two words,
   do not fit a narrow phone, and a wrapped row would push the results down a
   line on exactly the screens with the least room. */
.shelfd-filmog-sortbar {
  display: flex;
  align-items: center;
  gap: calc(8 * var(--shelfd-px, 1px));
  padding: calc(2 * var(--shelfd-px, 1px)) 0 calc(10 * var(--shelfd-px, 1px));
  overflow-x: auto;
  scrollbar-width: none;
  -ms-overflow-style: none;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior-x: contain;
}
.shelfd-filmog-sortbar::-webkit-scrollbar { width: 0; height: 0; display: none; }

.shelfd-filmog-sort {
  appearance: none;
  -webkit-appearance: none;
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  gap: calc(5 * var(--shelfd-px, 1px));
  min-height: calc(32 * var(--shelfd-px, 1px));
  padding: 0 calc(13 * var(--shelfd-px, 1px));
  border: 0;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.06);
  color: #ffffff;
  font-family: inherit;
  font-size: calc(12.5 * var(--shelfd-px, 1px));
  font-weight: 500;
  white-space: nowrap;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: background 0.18s ease, transform 0.16s cubic-bezier(0.22, 1, 0.36, 1);
}
.shelfd-filmog-sort:active { transform: scale(0.97); }
/* The app's filled purple, the same one the Library's selected category uses. */
.shelfd-filmog-sort.is-active { background: #7c3aed; }
/* The arrow is part of the active chip, not a separate control: direction only
   means anything for the sort that is actually running. */
.shelfd-filmog-sort-dir {
  font-size: calc(11 * var(--shelfd-px, 1px));
  line-height: 1;
  opacity: 0.85;
}

.shelfd-filmog-count {
  padding-bottom: calc(10 * var(--shelfd-px, 1px));
  color: rgba(255, 255, 255, 0.45);
  font-size: calc(12 * var(--shelfd-px, 1px));
}

/* ── the filter sheet ─────────────────────────────────────────────────────── */
.shelfd-filmog-filter {
  position: fixed;
  inset: 0;
  z-index: 6200;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transition: opacity 200ms ease;
}
.shelfd-filmog-filter.is-open { opacity: 1; }
/* 45% and no blur — the app's standing rule for scrims. */
.shelfd-filmog-filter-scrim {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.45);
}
.shelfd-filmog-filter-panel {
  position: relative;
  z-index: 1;
  width: min(88%, calc(360 * var(--shelfd-px, 1px)));
  max-height: 82vh;
  display: flex;
  flex-direction: column;
  padding: calc(14 * var(--shelfd-px, 1px)) calc(16 * var(--shelfd-px, 1px)) calc(12 * var(--shelfd-px, 1px));
  /* v16.369 (owner): FLAT, not translucent. Same editorial-dark family as every
     other surface, but this one is opaque - it is a working sheet with rows of
     chips to read against, and a filmography grid showing through eleven rating
     pills made both harder to read. `rgb(38,37,48)` is the same colour the rest
     of the app blends toward, so nothing else changes. */
  background: rgb(38, 37, 48);
  border: 0;
  border-radius: calc(16 * var(--shelfd-px, 1px));
  box-shadow: 0 14px 32px rgba(0, 0, 0, 0.32);
  transform: translateY(10px) scale(0.98);
  transition: transform 260ms cubic-bezier(0.22, 1, 0.36, 1);
}
.shelfd-filmog-filter.is-open .shelfd-filmog-filter-panel { transform: none; }
.shelfd-filmog-filter-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: calc(8 * var(--shelfd-px, 1px));
}
.shelfd-filmog-filter-title {
  color: #ffffff;
  font-size: calc(15 * var(--shelfd-px, 1px));
  font-weight: 600;
}
.shelfd-filmog-filter-x {
  appearance: none; -webkit-appearance: none;
  width: calc(30 * var(--shelfd-px, 1px));
  height: calc(30 * var(--shelfd-px, 1px));
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.08);
  color: #ffffff;
  cursor: pointer;
}
.shelfd-filmog-filter-x svg {
  width: calc(16 * var(--shelfd-px, 1px));
  height: calc(16 * var(--shelfd-px, 1px));
}
.shelfd-filmog-filter-body {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  scrollbar-width: none;
  padding-top: calc(10 * var(--shelfd-px, 1px));
}
.shelfd-filmog-filter-body::-webkit-scrollbar { width: 0; display: none; }
.shelfd-filmog-filter-label {
  margin: calc(10 * var(--shelfd-px, 1px)) 0 calc(7 * var(--shelfd-px, 1px));
  color: rgba(255, 255, 255, 0.55);
  font-size: calc(11.5 * var(--shelfd-px, 1px));
  font-weight: 500;
}
/* Wraps rather than scrolls: eleven rating steps on one sideways rail would
   hide most of the scale behind a swipe, and the scale IS the control. */
.shelfd-filmog-chips {
  display: flex;
  flex-wrap: wrap;
  gap: calc(6 * var(--shelfd-px, 1px));
}
.shelfd-filmog-chip {
  appearance: none; -webkit-appearance: none;
  min-height: calc(30 * var(--shelfd-px, 1px));
  padding: 0 calc(11 * var(--shelfd-px, 1px));
  border: 0;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.06);
  color: #ffffff;
  font-family: inherit;
  font-size: calc(12.5 * var(--shelfd-px, 1px));
  font-weight: 500;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.shelfd-filmog-chip.is-active { background: #7c3aed; }
/* v16.369 (owner): the rating steps carry the app's own star ahead of the
   number, so the scale reads as a RATING rather than as a bare figure that
   could be a year or a count. The mask paints in currentColor, so it inherits
   the chip's own text colour on both the resting and the selected pill. */
.shelfd-filmog-chip-star {
  --shelfd-star-size: calc(11 * var(--shelfd-px, 1px));
  margin-right: calc(4 * var(--shelfd-px, 1px));
  vertical-align: -1px;
}
.shelfd-filmog-filter-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: calc(10 * var(--shelfd-px, 1px));
  padding-top: calc(12 * var(--shelfd-px, 1px));
}
.shelfd-filmog-filter-clear,
.shelfd-filmog-filter-done {
  appearance: none; -webkit-appearance: none;
  min-height: calc(36 * var(--shelfd-px, 1px));
  padding: 0 calc(16 * var(--shelfd-px, 1px));
  border: 0;
  border-radius: 999px;
  font-family: inherit;
  font-size: calc(13 * var(--shelfd-px, 1px));
  font-weight: 500;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.shelfd-filmog-filter-clear {
  background: transparent;
  color: rgba(255, 255, 255, 0.6);
  padding-left: 0;
}
.shelfd-filmog-filter-done {
  background: rgba(255, 255, 255, 0.10);
  color: #ffffff;
}
@media (prefers-reduced-motion: reduce) {
  .shelfd-filmog-filter,
  .shelfd-filmog-filter-panel { transition: none; }
}


/* =============================================================================
   v16.368 — THE FILMOGRAPHY OPENS ON TOP, WHEREVER IT WAS OPENED FROM
   -----------------------------------------------------------------------------
   The results panel lives inside #shelfd-search-page, which sits at z-index
   2100. Every surface that can open a filmography sits ABOVE that:

     library grid overlay      2600   (hold a person -> Filmography)
     full-page media profile   3900   (a person profile, a cast row)
     tier list overlay         9200

   So the page opened correctly and was then covered by whatever opened it.
   Raising the search page for the life of this panel is the fix rather than
   lowering each origin — there is one page to promote and an open-ended list of
   places it can be reached from, and a filmography is a destination: nothing it
   was opened from should be in front of it.

   Scoped to a body class set only while a filmography panel is mounted, so the
   search page's normal storey is untouched everywhere else.
   ========================================================================== */
body.shelfd-filmog-on-top #shelfd-search-page {
  z-index: 9600 !important;
}


/* v16.371 (owner): 9px of breathing room down both edges of the results page.
   Set on the panel BODY, which is the element that scrolls and the one every
   other rule here already treats as the page — putting it on the grid instead
   would leave the sort bar and the count line flush against the edge while the
   posters sat inset. Scoped to this panel so no other results page moves. */
.shelfd-filmog-panel .shelfd-search-preset-panel-body {
  padding-left: 9px;
  padding-right: 9px;
}