/* =============================================================================
   v16.064 — SHELF CARD TITLE RATING + META LINE (Movies → Planning)

   The media's own score, rendered directly under the card title on both your
   own shelf and a viewed user's shelf. Markup comes from
   js/94-shelf-title-rating.js.

   Spec: ONE star glyph + the rating number, nothing else. The number is white
   at full opacity, weight 500; the star is champagne gold.

   The star is `.shelfd-star-glyph` from 91-shelfd-star-glyph.css — the app's
   own masked mark, painted in `currentColor`. Gold is therefore applied as a
   `color` on the glyph span alone, which is the whole mechanism that shared
   mark was built for: no override of its mask, no second star asset.
   #E6C766 is the same champagne gold the shelf's read-only star row uses
   (.shelf-watched-star-fill in 01-mylists-cards-episodes.css).

   Sizes use the adaptive --shelfd-px token, so the row scales with the rest of
   the type from the 375pt iPhone up to the 440pt Pro Max with no breakpoints.
   ============================================================================= */

.shelf-title-rating {
  display: flex;
  align-items: center;
  gap: calc(4.5 * var(--shelfd-px, 1px));
  line-height: 1;
  min-width: 0;
}
.shelf-title-rating[hidden] { display: none; }

/* The glyph defaults to 0.72em — the height the old U+2605 character occupied.
   Set explicitly here so the star's size is stated by this surface rather than
   inherited from a default that exists for backwards compatibility elsewhere. */
.shelf-title-rating .shelfd-star-glyph {
  --shelfd-star-size: calc(12.6 * var(--shelfd-px, 1px));
  /* the mark's optical centre sits slightly above its bounding-box centre */
  --shelfd-star-nudge: -0.5px;
  /* champagne gold — the mask paints in currentColor, so this is the whole
     colour change; the number keeps its own white below. */
  color: #E6C766;
}

.shelf-title-rating-score {
  font-family: 'Sohne', 'DM Sans', sans-serif;
  font-size: calc(14.1 * var(--shelfd-px, 1px));
  font-weight: 500;
  line-height: 1;
  letter-spacing: 0;
  color: #ffffff;
  white-space: nowrap;
}

/* 34b-shelf-card-universal.css sets `#mylist-view .card * { line-height: 18px
   !important }` on every descendant of a shelf card. An 18px strut around a
   14.1px number and a 12.6px glyph is ~4px of dead leading, which on this card
   pushes the status pill down and eats into the bottom-anchored availability
   block.

   Beating it takes SPECIFICITY, not just !important: `#mylist-view .card *` is
   (1,1,0), so a bare `.shelf-title-rating` loses the tie no matter how many
   !importants it carries. Hence the same `#mylist-view .card` prefix here.
   -------------------------------------------------------------------------- */
#mylist-view .card .shelf-title-rating,
#mylist-view .card .shelf-title-rating .shelf-title-rating-score,
#mylist-view .card .shelf-title-rating .shelfd-star-glyph {
  line-height: 1 !important;
}

/* -----------------------------------------------------------------------------
   Placement: the card's SECOND LINE — directly under the title.

   One slot, rendered as a direct child of `.card-info`, so your own shelf and a
   viewed user's shelf share the same position by construction rather than by
   two rules kept in step.

   `.card-info > *` carries a blanket `margin-top: 6px !important` from
   34b-shelf-card-universal.css. 6px is a full metadata gap; the rating belongs
   TO the title, so it is pulled tight to it and the block that follows supplies
   the real separation.
   -------------------------------------------------------------------------- */
#mylist-view .card .card-info > .shelf-title-rating {
  margin-top: calc(4 * var(--shelfd-px, 1px)) !important;
  margin-bottom: 0;
}

/* Own shelf: the stacked controls (director → status → priority) follow, and
   own the gap below the rating. */
#mylist-view .card .shelf-title-rating + .watching-stacked-controls {
  margin-top: calc(8 * var(--shelfd-px, 1px)) !important;
}

/* Viewed shelf: the director/genres/year block follows instead, and already
   carries a top margin of its own — restated so the two don't stack. */
#mylist-view .card .shelf-title-rating + .viewed-watched-meta {
  margin-top: calc(6 * var(--shelfd-px, 1px)) !important;
}


/* =============================================================================
   v16.062 — THE META LINE:  1993 · 2h 1m · Crime, Drama

   Third line of the card, under the rating. Muted so the reading order down the
   column is title (600, 17.1px) → rating (500, 14.1px, white) → this (400, 12px,
   62% white) → director. Each step down in weight and brightness is what makes
   the block scan as one unit instead of four competing lines.

   Single line by contract: genres are capped at 2 in JS AND clipped here, so a
   long combination ellipses rather than wrapping and re-opening the vertical
   gap this line exists to close.
   ============================================================================= */
.shelf-planning-meta {
  font-family: 'Sohne', 'DM Sans', sans-serif;
  font-size: calc(12 * var(--shelfd-px, 1px));
  font-weight: 400;
  letter-spacing: 0;
  color: rgba(255, 255, 255, 0.62);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
  min-width: 0;
}
.shelf-planning-meta[hidden] { display: none; }
body.light-mode .shelf-planning-meta { color: rgba(20, 18, 28, 0.66); }

/* Same specificity answer as the rating row above — `#mylist-view .card *` is
   (1,1,0) and would otherwise impose an 18px strut on a 12px line. */
#mylist-view .card .shelf-planning-meta {
  line-height: 1.25 !important;
}

/* Tight under the rating; the director block below opens the next real gap. */
#mylist-view .card .card-info > .shelf-planning-meta {
  margin-top: calc(4 * var(--shelfd-px, 1px)) !important;
}
#mylist-view .card .shelf-planning-meta + .watching-stacked-controls {
  margin-top: calc(8 * var(--shelfd-px, 1px)) !important;
}
#mylist-view .card .shelf-planning-meta + .viewed-watched-meta {
  margin-top: calc(6 * var(--shelfd-px, 1px)) !important;
}

/* =============================================================================
   v16.062 — "Where to watch" logos, label removed (movies planning).

   The JS drops the label text and stamps .mylist-availability-logos-only. The
   row keeps its class and position; only the leading gap needs closing, since
   the flex `gap: 8px` in 01-mylists-cards-episodes.css was spacing the label
   from the logos and now has nothing on its left.
   ============================================================================= */
#mylist-view .card .mylist-availability-where-to-watch.mylist-availability-logos-only {
  gap: 0;
}


/* =============================================================================
   v16.063 — MOVIES → PLANNING: ONE TOP-DOWN FLOW, ONE LEFT EDGE

   Two things were making this card read as wrong, and neither was the choice of
   elements:

   1. A HOLE IN THE MIDDLE.
      The poster is 2:3 and sets the card's height (`align-self: flex-start`,
      01-mylists-cards-episodes.css:728), so the card is ~180pt tall while the
      text column only needs ~130pt. The availability block was absolutely
      pinned to `bottom: 18px`, which put all ~50pt of that slack in the MIDDLE
      of the column — a gap between the status pill and the logos with nothing
      in it. Slack at the bottom of a block reads as padding; slack in the
      middle reads as a missing element.

      So: movies planning drops the absolute pin and flows top-down. The slack
      collects under the last line, where the eye reads it as breathing room.
      TV/anime planning and movies WATCHED keep the pinned block — their content
      is taller and the pin is load-bearing there (see the v14.316 note about
      the TV card's Episodes button).

   2. A RAGGED LEFT EDGE.
      Measured off the card, the column's lines started at four different x
      positions. `.card-director-line` carries `padding-left: 2.33px`
      (01-mylists-cards-episodes.css, a v14.145 artifact from an old mock), so
      the director sat ~2pt right of the title, meta line, pill and logos. Four
      stacked lines on three different left edges is exactly the kind of thing
      that looks wrong without looking like anything in particular.
   ============================================================================= */

/* 1) The bottom row — provider logos left, priority circle right, one line.

   v16.064 moved BOTH out of absolute positioning and into a real flex row in
   renderCard, so the two align because they are siblings rather than because
   two independent absolute offsets happen to agree. That also retires the
   pinning rules in 01-mylists-cards-episodes.css by making them un-matchable
   here: `.card-info > .watchlist-card-metadata` and `.watching-stacked-controls
   > .watchlist-priority-slot` no longer describe where either element lives, so
   nothing has to be overridden — the old rules simply stop applying. */
#mylist-view #cards-grid .card.movies-watchlist-card .movies-planning-bottom-row {
  display: flex;
  /* flex-END, not center: an unreleased film prints a release-date line above
     the logos inside the metadata column, and the circle must stay level with
     the LOGOS, not with the middle of a column that grew a line. */
  align-items: flex-end;
  justify-content: space-between;
  gap: calc(10 * var(--shelfd-px, 1px));
  margin-top: calc(12 * var(--shelfd-px, 1px)) !important;
}
#mylist-view #cards-grid .card.movies-watchlist-card .movies-planning-bottom-row > .watchlist-card-metadata {
  margin: 0 !important;
  padding-right: 0;
  min-width: 0;
  flex: 1 1 auto;
}
#mylist-view #cards-grid .card.movies-watchlist-card .movies-planning-bottom-row > .watchlist-priority-slot {
  margin: 0 !important;
  flex: 0 0 auto;
}

/* 2) Provider logos: 20px → 26pt, and the priority circle matched to them.
   Equal circles across the row is what makes it read as one row of controls
   rather than two unrelated things that happen to share a line. The base
   20px in 01-mylists-cards-episodes.css is a fixed pixel value; sizing in
   --shelfd-px here also makes them scale with the device like everything else
   on the card. */
#mylist-view #cards-grid .card.movies-watchlist-card .mylist-availability-provider,
#mylist-view #cards-grid .card.movies-watchlist-card .movies-planning-bottom-row > .watchlist-priority-slot {
  width: calc(26 * var(--shelfd-px, 1px));
  height: calc(26 * var(--shelfd-px, 1px));
  min-width: calc(26 * var(--shelfd-px, 1px));
  min-height: calc(26 * var(--shelfd-px, 1px));
}
#mylist-view #cards-grid .card.movies-watchlist-card .mylist-availability-providers {
  gap: calc(7 * var(--shelfd-px, 1px));
}
/* the number rides up with the circle */
#mylist-view #cards-grid .card.movies-watchlist-card .movies-planning-bottom-row .watchlist-priority-input {
  font-size: calc(10.5 * var(--shelfd-px, 1px));
}

/* 2) One left edge for every line in the column. */
#mylist-view .card.movies-watchlist-card .card-director-line {
  padding-left: 0;
}

/* The star's leftmost point is the tip of a ray, so its painted mass begins
   inside its bounding box and the row reads indented next to flat-sided text.
   A 1px optical pull lines the star up with the title's stem. */
#mylist-view .card.movies-watchlist-card .shelf-title-rating .shelfd-star-glyph {
  margin-left: calc(-1 * var(--shelfd-px, 1px));
}