/*
   54-lite-mode.css
   "Lite mode" — an opt-in low-overhead rendering mode for memory-constrained
   devices (e.g. iPhone 12 mini) where iOS WKWebView reloads the page under
   memory pressure ("auto-refresh"). Activated manually from the My List
   settings cogwheel; persisted in localStorage as 'shelfd:lite-mode' and
   applied as html.lite-mode. It has ZERO effect unless that class is present,
   so normal devices are completely unaffected.

   It targets the two biggest, purely-compositor memory costs — nothing here
   moves, resizes, or recolors content, so the layout is identical:

   1. backdrop-filter — iOS snapshots everything behind each blurred element
      into an offscreen buffer EVERY composited frame. With hundreds of these,
      that is the single largest GPU/RAM cost and the most likely trigger of the
      memory-pressure reloads. Removing the live blur keeps each glass panel's
      underlying semi-opaque background, just flat instead of frosted.

   2. will-change — each declaration permanently promotes its element to its own
      compositor layer (a backing bitmap held in RAM). Hundreds of always-on
      hints add up; resetting to auto lets the browser reclaim idle layers.
      These are pure performance hints — removing them changes nothing visually.
*/

html.lite-mode *,
html.lite-mode *::before,
html.lite-mode *::after {
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  will-change: auto !important;
}

/*
   3. content-visibility — let the browser SKIP rendering My List cards that are
      off-screen and, crucially, RECLAIM the decoded poster bitmaps for cards the
      user has scrolled past. Without this, every card scrolled into view stays
      decoded in memory for the life of the page; a long Watched list = hundreds
      of resident bitmaps. This does NOT remove any card — they all stay present
      and scrollable, the browser just doesn't keep their pixels in RAM while
      they're out of view, re-rendering instantly on approach.

      `contain-intrinsic-size: auto 220px` gives off-screen cards a placeholder
      height so the scrollbar stays stable; the `auto` keyword makes the browser
      remember each card's real height after it has been rendered once, so there
      is no scroll jump on revisit. 220px is just the first-paint estimate for a
      not-yet-seen card.

      Scoped to #cards-grid .card only — the exact My List grid the user swipes —
      so nothing else in the app is touched, and only in Lite mode. */
html.lite-mode #cards-grid .card {
  content-visibility: auto;
  contain-intrinsic-size: auto 220px;
}