/* ─────────────────────────────────────────────────────────────────────────────
   drawer.css — filter panels slide in from the right instead of covering the page.

   The point is that the CARDS stay readable while you filter. A centred modal over a dark
   scrim hides exactly the thing you are filtering; a drawer over a light scrim does not.

   Two class families are handled because the site grew two names for the same idea:
     .fmodal / .fpanel                    timeline.html
     .filter-modal-overlay / .filter-modal  dokkan_tracker.html (and its category modal)

   Opening needs TWO steps: `.open` makes the overlay displayable, then `.lit` on a later
   frame runs the slide. Setting both in one frame skips the transition entirely, because the
   element goes from display:none straight to its final transform with nothing to interpolate.
   Closing removes `.lit`, waits for the slide out, then removes `.open`.
   drawer.js does that sequencing.
   ───────────────────────────────────────────────────────────────────────────── */

.fmodal,
.filter-modal-overlay {
  position: fixed;
  inset: 0;
  z-index: 900;
  background: rgba(0, 0, 0, 0);
  display: none;
  align-items: stretch;
  justify-content: flex-end;
  padding: 0;
  transition: background .26s ease;
}

.fmodal.open,
.filter-modal-overlay.open { display: flex; }

/* the scrim stays light on purpose -- dark enough to focus the panel, not so dark that the
   grid behind it is unreadable */
.fmodal.lit,
.filter-modal-overlay.lit { background: rgba(0, 0, 0, .34); }

.fpanel,
.filter-modal {
  width: min(460px, 100%);
  max-width: none;
  height: 100%;
  max-height: none;
  display: flex;
  flex-direction: column;
  border: none;
  border-left: 1px solid rgba(255, 255, 255, .09);
  border-radius: 0;
  overflow: hidden;
  background: linear-gradient(180deg, #242733 0%, #191b23 60%, #15161d 100%);
  box-shadow: -18px 0 46px rgba(0, 0, 0, .55);
  transform: translateX(100%);
  transition: transform .28s cubic-bezier(.25, .8, .3, 1);
}

.fmodal.lit .fpanel,
.filter-modal-overlay.lit .filter-modal { transform: none; }

/* the body is the only part that scrolls, so the header and footer stay put */
.filter-modal-body { flex: 1 1 auto; overflow-y: auto; }

/* On a phone the panel was width:100%, which threw away the whole point of a drawer --
   you could no longer see the grid you were filtering. Two changes bring that back:
   leave a strip of the page uncovered, and let the panel itself be translucent.

   The blur is what keeps the label text readable over a busy card grid; without it a
   .9 alpha panel over LR art is hard to read. Where backdrop-filter is unsupported the
   alpha alone is still opaque enough to fall back to. */
@media (max-width: 560px) {
  .fpanel,
  .filter-modal {
    width: 90%;
    background: linear-gradient(180deg,
                rgba(36, 39, 51, .90) 0%,
                rgba(25, 27, 35, .92) 60%,
                rgba(21, 22, 29, .94) 100%);
    -webkit-backdrop-filter: blur(14px) saturate(1.15);
            backdrop-filter: blur(14px) saturate(1.15);
  }
  /* a lighter scrim too, so the uncovered strip actually shows something */
  .fmodal.lit,
  .filter-modal-overlay.lit { background: rgba(0, 0, 0, .28); }
}