/* =============================================================================
   17b-shelf-card-meta.css
   v14.110 CSS REORG: moved VERBATIM out of 17-auth-flow-setup.css (the auth
   file — none of this is auth). Loads immediately AFTER 17 in index.html so
   every rule keeps its cascade position (17 loads LATE, after 45 — these
   overrides rely on that; do NOT move them earlier).
   Contents: My List card + game-profile typography downshift (v10.355),
   card-year/genre/progress font sizes, music Details pill, rating-star
   revert (v10.369), compact game-card hides, TV watching rating shift +
   next-episode slot under the progress bar.
   ============================================================================= */

/* v10.355: My Lists + My List Game Profile typography downshift.
   User-requested global pass for these two surfaces only:
   - subtract 5px from visible text controls/labels
   - reduce numeric font weights by ~200
   - move each page surface down by 10px from its current placement.
*/
body.main-tab-mylist #mylist-view .main-content,
#mylist-view .main-content {
  padding-top: 18px !important;
}

#mylist-view .section-btn {
  font-size: 9px !important;
  font-weight: 500 !important;
}#mylist-view #mylist-toolbar .tab-btn,
#mylist-view .tab-btn {
  font-size: 16px !important;
  font-weight: 200 !important;
}
#mylist-view #mylist-toolbar .tab-btn.active,
#mylist-view .tab-btn.active {
  font-weight: 400 !important;
}
#mylist-view .tab-count {
  font-size: 5px !important;
}
#mylist-view .games-playing-toggle {
  font-size: 11px !important;
  font-weight: 600 !important;
}
#mylist-view .games-playing-toggle.active {
  font-weight: 700 !important;
}
#mylist-view .games-playing-toggle small {
  font-size: 10px !important;
  font-weight: 700 !important;
}
#mylist-view .search-input,
#mylist-view input[type="text"],
#mylist-view input[type="number"]:not(.watchlist-priority-input),
#mylist-view input[type="url"] {
  font-size: 8px !important;
  font-weight: 300 !important;
}
/* v11.497: `.watchlist-priority-input` is EXCLUDED from the 8px group above.
   This rule's `#mylist-view input[type="number"]` (id+attr+element) outranked
   `#mylist-view .watchlist-priority-input` even with !important, forcing the
   priority number to a computed 8px. That both shrank it AND tripped iOS
   focus-zoom (computed < 16px). Excluding it lets the single-source-of-truth
   rule in 01-mylists-cards-episodes.css (computed 16px, visually 11px via
   transform) own the priority input — no zoom, correct size. */
#mylist-view .btn-primary,
#mylist-view .btn-secondary {
  font-size: 8px !important;
  font-weight: 400 !important;
}
#mylist-view .btn-sm {
  font-size: 6px !important;
}
#mylist-view .sort-btn-label {
  font-size: 6px !important;
}
#mylist-view .sort-btn-icon,
#mylist-view .sort-dropdown-arrow {
  font-size: 11px !important;
}
#mylist-view .sort-direction-toggle {
  font-size: 7px !important;
  font-weight: 650 !important;
}
#mylist-view .sort-direction-toggle strong {
  font-size: 10px !important;
}
#mylist-view .sort-dropdown-item {
  font-size: 9px !important;
  font-weight: 300 !important;
}
/* v11.482: removed a stray `#mylist-view .card-title { 10px/400 !important }`
   override that lived here — title type has ONE source of truth in 01
   (#mylist-view .card-title). */
#mylist-view .card-genre,
#mylist-view .card-release-date,
#mylist-view .progress-meta,
#mylist-view .progress-percent-inline,
#mylist-view .rating-label,
#mylist-view .season-progress,
#mylist-view .season-arrow {
  font-size: 6px !important;
  font-weight: 400 !important;
}
/* v10.438: year font-size bumped 7px -> 10px per spec ("year font size
   should be ten"). The 7px shared override was too small and made the
   year line on movie/TV/anime watchlist cards visibly under-weighted
   against the title and genre. 10px sits balanced between the 11px
   meta (genre) and the smaller secondary text. `card-availability-line`
   kept at 7px (separate concern — release-date / availability badge,
   intended to read as a tiny meta tag). */
#mylist-view .card-year.mylist-watchlist-year {
  font-size: 10px !important;
  font-weight: 500 !important;
}
#mylist-view .card-availability-line {
  font-size: 7px !important;
  font-weight: 500 !important;
}
/* v10.403 / v10.408: `.card-artist` (music card artist line under the
   title) opts OUT of the 7px shared compact-text override above.
   Spec: 11px, white at 75% opacity (bumped from 60% in v10.408). Base
   values live in 01-mylists-cards-episodes.css; the !important here
   just makes sure this override wins the cascade. */
#mylist-view .card-artist {
  font-size: 11px !important;
  font-weight: 500 !important;
  color: rgba(255, 255, 255, 0.75) !important;
}
#mylist-view .status-pill {
  font-size: 6px !important;
  font-weight: 400 !important;
}
#mylist-view .card-action-row .comments-btn,
#mylist-view .card-action-row .ep-toggle-bar.card-footer-btn,
#mylist-view .game-library-card .comments-btn,
#mylist-view .card-action-row .comments-btn-label,
#mylist-view .card-action-row .ep-toggle-bar.card-footer-btn span:first-child,
#mylist-view .mylist-bottom-export-badge {
  font-size: 6px !important;
  font-weight: 450 !important;
}
/* v10.402: "Details" pill on music cards (formerly "Tracklist") opts
   OUT of the 6px shared compact-text override above. Bumped to 10px
   per spec while keeping the same 450 weight; the pill geometry in
   01-mylists-cards-episodes.css was retuned (height 32 -> 24, padding
   12 -> 9) to hug the larger text. */
#mylist-view .card-tracklist-btn {
  font-size: 10px !important;
  font-weight: 450 !important;
}
#mylist-view .card-comment-body,
#mylist-view .card-comment-body.card-comment-body--watched-media {
  font-size: 7px !important;
  font-weight: 200 !important;
}
/* v10.436: `.watchlist-priority-input` removed from this group. The
   group's font-size: 6px / font-weight: 550 was forcing the priority
   bubble's number to render at 6px/550 with `!important`, which beat
   the v10.434 rule in 01-mylists-cards-episodes.css (same specificity,
   loaded earlier). Per spec the priority number should be 11px / 400 —
   the v10.434 rule in 01-mylists handles that now; this group keeps
   its 6px/550 treatment for the cover-picker UI bits it was originally
   meant for. */
#mylist-view .screenlist-game-cover-picker-status,
#mylist-view .screenlist-game-cover-choice span,
#mylist-view .screenlist-game-cover-choice small,
#mylist-view .screenlist-game-cover-empty {
  font-size: 6px !important;
  font-weight: 550 !important;
}
#mylist-view .card-cover.screenlist-game-cover-pending span {
  font-size: 6px !important;
  font-weight: 600 !important;
}
#mylist-view .star-label,
#cards-grid .card .rating-area .stars[data-prefix="overall"] .star-label {
  font-size: 13px !important;
  font-weight: 600 !important;
}
#cards-grid .card .rating-area .stars[data-prefix="overall"],
#cards-grid .card .rating-area .stars[data-prefix="overall"] .star-btn {
  --star-size: 17px !important;
  font-size: 17px !important;
}
#cards-grid .card .rating-area .stars[data-prefix="overall"] .star-btn {
  width: 17px !important;
  min-width: 17px !important;
}
#cards-grid .card .rating-area .stars.rating-scale-five[data-prefix="overall"]:not(.is-expanded) .star-btn:first-of-type {
  width: 17px !important;
  min-width: 17px !important;
}

/* v11.043: REMOVED a stray game-profile font-override block that lived here
   (topbar 9px, Edit 8px, panel-head 8px, stat values 37px/35px/29px, etc.,
   all `!important`). It loaded after 01-mylists-cards-episodes.css and was
   stomping the v11.042 game-profile rebuild — that's why the rank names
   rendered ~37px and clipped to "Ascenda…"/"Diamon…". The rebuild in
   01-mylists-cards-episodes.css is now the single source of truth for this
   page's typography. */

/* v10.369: revert My Lists title-card ratings back to the regular visible
   10-star interaction. This overrides the compact one-star chip presentation
   while keeping the same `rate()` save path and star markup. */
#cards-grid .card .rating-area .stars[data-prefix="overall"] {
  --star-size: 16px !important;
  width: auto !important;
  max-width: 100% !important;
  min-height: 24px !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 2px !important;
  padding: 0 !important;
  overflow: visible !important;
  vertical-align: middle !important;
  transform: none !important;
  transition: none !important;
}

#cards-grid .card .rating-area .stars[data-prefix="overall"] .star-btn,
#cards-grid .card .rating-area .stars[data-prefix="overall"]:not(.is-expanded) .star-btn,
#cards-grid .card .rating-area .stars[data-prefix="overall"]:not(.is-expanded) .star-btn:not(:first-of-type),
#cards-grid .card .rating-area .stars[data-prefix="overall"].is-expanded .star-btn {
  display: inline-flex !important;
  flex: 0 0 auto !important;
  width: 16px !important;
  min-width: 16px !important;
  height: 22px !important;
  align-items: center !important;
  justify-content: center !important;
  font-size: 16px !important;
  line-height: 1 !important;
}

#cards-grid .card .rating-area .stars.rating-scale-five[data-prefix="overall"],
#cards-grid .card .rating-area .stars.rating-scale-five[data-prefix="overall"].is-expanded {
  max-width: 100% !important;
  gap: 0 !important;
}

#cards-grid .card .rating-area .stars.rating-scale-five[data-prefix="overall"] .star-btn.half-step,
#cards-grid .card .rating-area .stars.rating-scale-five[data-prefix="overall"].is-expanded .star-btn.half-step,
#cards-grid .card .rating-area .stars.rating-scale-five[data-prefix="overall"]:not(.is-expanded) .star-btn:first-of-type {
  width: 8px !important;
  min-width: 8px !important;
  height: 22px !important;
}

#cards-grid .card .rating-area .stars[data-prefix="overall"] .star-label {
  min-width: auto !important;
  margin-left: 5px !important;
  color: #ffffff !important;
  font-size: 12px !important;
  font-weight: 500 !important;
  line-height: 1 !important;
}

/* v11.482: DELETED — this ungated `!important` block forced the card title to
   18px / 600 / letter-spacing:0 and was the hidden rule overriding the title spec
   (most visible on Music, whose bare <span> title it uniquely matched). Its only
   legitimate job was forcing the Söhne face onto the title <button>s on phones;
   that is now handled by the SINGLE source-of-truth rule
   `#mylist-view .card-title{…}` in 01-mylists-cards-episodes.css, which is ungated,
   sets Söhne on the wrapper + <span> + all three button variants, and (being scoped
   to #mylist-view) also covers the status-swipe preview grid. Do NOT re-add a
   card-title font rule here. */

/* v14.074: REMOVED — this TV/anime Watching lavender-outline rule loaded AFTER
   45 and was the last thing overriding the new uniform status button (it painted
   the lavender ring seen on the Watching pill). The status button now matches the
   Episodes button via the single source of truth in
   45-default-theme-tail-overrides.css. Do NOT re-add per-status status-pill
   colors here — they belong in that one 45 block. */

/* v10.376: Games Playing + Backlog title cards no longer carry the legacy
   bottom-right edit affordance/details footer, so the card ends just under
   the poster instead of reserving the old lower action band. */
#mylist-view #cards-grid .card.game-playing-backlog-compact-card {
  padding-bottom: 0 !important;
}

#mylist-view #cards-grid .card.game-playing-backlog-compact-card .card-header {
  padding-bottom: 14px !important;
}

#mylist-view #cards-grid .card.game-playing-backlog-compact-card .game-details-panel,
#mylist-view #cards-grid .card.game-playing-backlog-compact-card .game-card-comment-drop {
  display: none !important;
  pointer-events: none !important;
}

/* v10.380: TV Shows Watching/Paused move the full rating control to the
   lower-left action band, aligned with the poster, while next-episode metadata
   occupies the old rating slot directly under the progress bar. */
#mylist-view #cards-grid .card.tv-show-progress-rating-shift-card .card-action-row {
  padding-left: 14px !important;
  align-items: center !important;
  gap: 10px !important;
}

#mylist-view #cards-grid .card.tv-show-progress-rating-shift-card .tv-show-bottom-rating-slot {
  flex: 0 1 auto !important;
  min-width: 0 !important;
  margin-right: auto !important;
  overflow: visible !important;
}

#mylist-view #cards-grid .card.tv-show-progress-rating-shift-card .tv-show-bottom-rating-slot .rating-area {
  margin: 0 !important;
}

#mylist-view #cards-grid .card.tv-show-progress-rating-shift-card .tv-show-bottom-rating-slot .stars[data-prefix="overall"] {
  width: auto !important;
  max-width: none !important;
  overflow: visible !important;
}

#mylist-view #cards-grid .card.tv-show-progress-rating-shift-card .tv-show-next-episode-slot {
  min-height: 14px;
  margin-top: 3px; /* v14.106: uniform 3px gap between metadata lines */
}

#mylist-view #cards-grid .card.tv-show-progress-rating-shift-card .tv-show-next-episode-slot:not(.has-next-episode) {
  display: none;
}

#mylist-view #cards-grid .card.tv-show-progress-rating-shift-card .tv-show-next-episode-slot .card-next-episode {
  display: block;
  max-width: 100%;
  margin: 0;
  font-size: 11px;
  line-height: 1; /* v14.107: matches the other metadata lines for an even 3px rhythm */
}