/* =============================================================================
   34b-shelf-card-universal.css
   v14.110 CSS REORG: moved VERBATIM out of 34-mylist-games.css (the games
   shelf file — these rules are UNIVERSAL, they hit EVERY My List category).
   Loads immediately AFTER 34 in index.html so cascade position is unchanged.
   Contents: v11.224 card text line-height 18px !important; v11.226 uniform
   6px gap between card-info children (THE blanket margin that later rules
   must out-specificity — see 01's v14.108 watching-rhythm block); v11.229
   margin collapse; v11.230 HD <img> poster; v11.232 content-visibility
   scroll perf; v11.233/234 status-button notes (skin now lives in 45);
   v11.251 category/status tab type normalization.
   ============================================================================= */

/* =============================================================================
   v11.224 — Title-card text line-height = 18px (My Lists)
   Every text element on a My Lists title card (`#mylist-view .card`) renders
   with a fixed 18px line-height. Scoped to the card root + all descendants so
   titles, status pills, episode counts, ratings, metadata, and footer button
   labels all share an 18px leading. `!important` wins over any per-element
   line-height (incl. existing !important rules). Episode/season detail pages
   and full-page profiles are NOT affected (outside `#mylist-view .card`).
   ============================================================================= */
#mylist-view .card,
#mylist-view .card * {
  line-height: 18px !important;
}

/* =============================================================================
   v11.226 — Uniform 6px vertical gap between EVERY stacked element on a card
   Every stacked child inside `.card-info` (title row, status pill, year,
   artist, genre, progress area, next-episode line, inline rating, comment slot,
   metadata, etc.) is separated by exactly 6px. The first stacked child has no
   top margin so the stack starts flush with the cover top.
   This is a rebuild-over-override: it replaces the prior per-section margins
   (anime 0, shows 0, games 6, movies 8.4, under-title 3) with ONE uniform 6px,
   matching the Games card spacing across every category. Highest-specificity
   `#mylist-view .card .card-info > *` + later declaration + !important wins
   the cascade cleanly. Episode/season pages + profiles are untouched.
   ============================================================================= */
#mylist-view .card .card-info > * {
  margin-top: 6px !important;
}
#mylist-view .card .card-info > *:first-child {
  margin-top: 0 !important;
}

/* v11.229 — collapse stacked internal margins between the episode count and
   the "Where to watch" line. The big gap was three margins stacking:
   .progress-meta margin-bottom (only needed to separate the count from a
   progress BAR) + the 6px card-info gap + .card-availability-line margin-top.
   Planned cards have no progress bar, so the progress-meta margin is wasted
   space. Drop it ONLY when progress-meta is the last child (no bar present),
   and zero the availability line's own top margin so the uniform 6px between
   card-info children is the single source of the gap. Watching cards (which
   DO have a bar) keep progress-meta's margin because it is not :last-child. */
#mylist-view .card .progress-area > .progress-meta:last-child {
  margin-bottom: 0 !important;
}
#mylist-view .card .watchlist-card-metadata > *:first-child {
  margin-top: 0 !important;
}
#mylist-view .card .card-availability-line {
  margin-top: 0 !important;
}

/* =============================================================================
   v11.230 — HD poster: real <img> cover (My Lists, non-game)
   The non-game card cover now renders a real <img> (`.card-cover-img`) instead
   of a CSS background-image. WKWebView applies proper retina downscaling to
   <img>, so the poster reads crisp at 2x/3x; backgrounds looked soft. The img
   fills the existing `.card-cover` box (which is flex + overflow:hidden) via
   absolute positioning so it doesn't fight the flex centering used for the
   emoji/placeholder fallback. Portrait posters use top-center crop (matches the
   old background-position); music covers are square and center-cropped.
   ============================================================================= */
#mylist-view .card .card-cover { position: relative; }
#mylist-view .card .card-cover-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top center;
  display: block;
  border-radius: inherit;
  /* keep the high-res source sharp when scaled into the small box */
  image-rendering: -webkit-optimize-contrast;
}
#mylist-view .card .card-cover-img.card-cover-img-music {
  object-position: center center;
}

/* =============================================================================
   v11.232 — Smoother My Lists scrolling
   Long libraries repaint every card on each scroll frame (each card has a
   border + gradient + box-shadow). `content-visibility: auto` lets the browser
   SKIP layout/paint for cards currently off-screen, so only the ~handful of
   visible cards are rendered per frame — big win on long lists. The paired
   `contain-intrinsic-size` reserves an estimated height for off-screen cards
   so the scrollbar/position stays stable (no jump) before they paint.
   ~420px is a typical TV/movie card height; the browser refines it after a
   card has been rendered once. Music cards are shorter, so they get a smaller
   estimate. Safe to revert (single block).
   ============================================================================= */
#mylist-view #cards-grid > .card {
  content-visibility: auto;
  contain-intrinsic-size: auto 420px;
}
#mylist-view #cards-grid > .card[data-library-section="music"] {
  contain-intrinsic-size: auto 150px;
}

/* =============================================================================
   v11.233 — Glassy status button (My Lists title cards)
   Rebuild of the visible per-card status button (`.game-status-current-pill`)
   into a modern frosted-glass pill: translucent gradient fill, backdrop blur,
   soft 1px light border, inset top highlight + subtle drop shadow, and a crisp
   press state. Replaces the flat outline-only look. Scoped to
   `body.true-dark-mode #mylist-view` + chained classes so it beats the v10.738
   white-60% outline rule (1,5,0 + !important) without touching the pop-out
   OPTION pills (`.game-status-options .status-pill`) — the selector mechanics
   and per-status active colors are unchanged. Only the resting button skin.
   ============================================================================= */
/* v11.234: selectors now carry TWO ids (#mylist-view + #cards-grid) = (2,x,0)
   so they beat the v10.738 rule (1,5,0 + !important) that pinned the button's
   border + text to white-60% and was suppressing the glass border/tint. */
/* v11.238: ALL status buttons use the French Lilac (#e1b7e5) identity,
   regardless of status — whisper-glass chip in one unified color. The
   per-status tint blocks were removed; this single base rule colors every
   state (watching/watched/paused/etc) the same lilac. */
/* v14.074: the per-card status button chrome (base skin + per-status colors +
   press state) MOVED to 45-default-theme-tail-overrides.css as the single source
   of truth — the status button now matches the Episodes button (uniform dark
   pill, no per-status tint). This block used to be the "authoritative" rule and
   was the root of the status-button cascade battle; removed to end it. Edit the
   status button ONLY in 45 now. The pop-out OPTION pills below are unchanged. */

/* =============================================================================
   v11.251 — My Lists CATEGORY tabs + STATUS tabs: type normalization
   Category tabs (.section-btn: Games / Anime / Music / Movies / TV) and the
   status tabs (.tab-btn: Watching / Watchlist / Watched / Paused):
     - ALL CAPS (text-transform: uppercase)
     - letter-spacing: 0
     - Söhne (app default) font, forced past any contrast/override file
     - status tabs also get line-height: 1 (tightest safe — a literal 0 clips
       the glyphs). Scoped high + !important so 16-light-mode-contrast.css and
       12-pwa-header-continuity.css can't override the family/spacing.
   Two IDs (#mylist-view #mylist-toolbar / #mylist-header) keep specificity
   above the existing rules in 12 + 16. Dark-mode is the only production theme.
   ============================================================================= */
/* Categories (.section-btn) — ALL CAPS, Söhne, 0 tracking. */
#mylist-view #mylist-header .section-btn,
body.true-dark-mode #mylist-view #mylist-header .section-btn {
  font-family: 'Sohne', 'DM Sans', sans-serif !important;
  text-transform: uppercase !important;
  letter-spacing: 0 !important;
}
/* Status tabs (.tab-btn) — v11.253/254: NOT all-caps. Labels keep their
   authored casing (first letter only: "Watching", "Watchlist", …). Söhne,
   0 tracking, tight line-height, 12px (overrides the 13px !important in file 12). */
#mylist-view #mylist-toolbar .tab-btn,
body.true-dark-mode #mylist-view #mylist-toolbar .tab-btn {
  font-family: 'Sohne', 'DM Sans', sans-serif !important;
  text-transform: none !important;
  letter-spacing: 0 !important;
  line-height: 1 !important;
  font-size: 12px !important;
}