/* =============================================================================
   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;
}

/* v16.083 — ONE RHYTHM FOR THE LINES UNDER THE TITLE.

   Planning and Watched print the same two blocks in opposite orders, and each
   block carried its own top margin: `.shelf-planning-meta` 4px (below) and
   `.viewed-watched-meta` 6px (34b-shelf-card-universal.css's blanket
   `.card-info > * { margin-top: 6px }`). Measured on a live card that produced
   title →4px→ meta →6px→ director on Watched and title →6px→ director →4px→
   meta on Planning: the same two gaps, swapped, which is exactly the kind of
   mismatch you see without being able to name it.

   Stating one value for all three blocks means the rhythm no longer depends on
   which order the tab happens to emit them in. margin-BOTTOM is zeroed too —
   `.viewed-watched-meta` ships `margin: 3px 0 10px` from
   01-mylists-cards-episodes.css, which on a viewed PLANNING card would stack a
   10px bottom onto the next block's 4px top. */
#mylist-view .card[data-library-section="movies"] .card-info > .shelf-planning-meta,
#mylist-view .card[data-library-section="movies"] .card-info > .viewed-watched-meta,
#mylist-view .card[data-library-section="movies"] .card-info > .card-director-line,
#mylist-view .card[data-library-section="shows"] .card-info > .shelf-planning-meta,
#mylist-view .card[data-library-section="shows"] .card-info > .viewed-watched-meta,
#mylist-view .card[data-library-section="shows"] .card-info > .card-director-line,
#mylist-view .card[data-library-section="anime"] .card-info > .shelf-planning-meta,
#mylist-view .card[data-library-section="anime"] .card-info > .card-director-line {
  margin-top: calc(4 * var(--shelfd-px, 1px)) !important;
  margin-bottom: 0 !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;
}
/* 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 {
  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));
}
/* 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));
}


/* =============================================================================
   v16.074 — VIEWED shelf, Movies → Watched.

   Owner spec: title → year · runtime · genre → director → SPACE → star row.

   Only two things needed changing; the rest of the order already falls out of
   the shared renderer (renderCard builds your shelf and a friend's from the same
   template, with buildViewedShelfWatchedMetaMarkup's `directorOnly` keeping the
   genre/year off the second block so they don't print twice).
   ============================================================================= */

/* 4. THE SPACE. `.friend-view-card .viewed-watched-meta + .watching-stacked-controls`
   in 01-mylists-cards-episodes.css closes this gap to 0 — written when the star
   row sat directly under a three-line meta block and needed no separation. Now
   the director is the only line above it and the spec calls for a deliberate
   break, so this states one. Same-shape selector plus the #mylist-view id, so it
   wins on specificity rather than on !important. */
#mylist-view .card.friend-view-card.card-movies-watched-stacked .viewed-watched-meta {
  margin-bottom: 0;
}
/* v16.078: the gap is no longer a MARGIN — the star row is pinned to the bottom
   of the card instead, level with the poster's bottom edge, so the space between
   the director and the rating is whatever is left over rather than a number.

   Why bottom:0 lands on the poster edge: `.card-header` is a flex row and
   `.card-info` is `flex: 1` with no align-self, so it stretches to the row's
   height — and the row's height is the poster's, since `.card-cover` is
   `align-self: flex-start` with a fixed 2:3 aspect (01-mylists-cards-episodes.css).
   `.card-info` is already `position: relative` on these cards, which is the same
   anchor `.watchlist-card-metadata` uses for its own bottom pin.

   The v16.076 46px margin is deleted rather than left to be overridden — it was
   describing a gap that no longer exists. */
#mylist-view #cards-grid .card.friend-view-card.card-movies-watched-stacked .card-info > .watching-stacked-controls {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  margin: 0 !important;
}

/* 5. THE STAR ROW: glyphs at 24px, number at 15px / weight 400.

   Both were pinned by shared rules in 01-mylists-cards-episodes.css — the glyph
   at calc(18 * --shelfd-px) and the score at 13.5px (a v14.396 rule that
   deliberately made the number smaller than the stars). Scoped to this card so
   both shared rules keep governing every other surface they were written for
   (TV, anime, games Played).

   The svg MUST be resized alongside its span: `.shelf-watched-star-fill` clips
   that svg to the fill percentage, so a box and an svg at different sizes crop
   the gold overlay against the base star instead of overlaying it. */
#mylist-view .card.friend-view-card.card-movies-watched-stacked .shelf-watched-star,
#mylist-view .card.friend-view-card.card-movies-watched-stacked .shelf-watched-star svg {
  width: calc(24 * var(--shelfd-px, 1px));
  height: calc(24 * var(--shelfd-px, 1px));
}
#mylist-view .card.friend-view-card.card-movies-watched-stacked .shelf-watched-score {
  /* v16.077: 18 -> 15px, weight 400. */
  font-size: calc(15 * var(--shelfd-px, 1px));
  font-weight: 400;
  line-height: 1 !important;
}


/* =============================================================================
   v16.079 — "Read Review ›" (VIEWED shelf, Movies → Watched)

   Shares the bottom line with the star row, so both sit level with the poster's
   bottom edge. The stacked-controls container is a COLUMN everywhere else on the
   shelf, so it is turned into a row only for this card — the star row and the
   button are its only two children here (the director moved up into
   .viewed-watched-meta, and a friend's card renders no status pill).
   ============================================================================= */
#mylist-view #cards-grid .card.friend-view-card.card-movies-watched-stacked .card-info > .watching-stacked-controls {
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  gap: calc(10 * var(--shelfd-px, 1px));
}
/* v16.083: the star row is wrapped in `.rating-bubble-bottom-left-slot`, which
   carries `margin-top: 8.3px` from 01-mylists-cards-episodes.css — a rule
   written for the vertical stack this card no longer uses. Under
   `align-items: center` a top margin shifts the item DOWN rather than centring
   it, which is what put the stars ~2px below the Review text (measured: stars
   centred at 606.2, Review at 604).

   Zeroing it lets flex centring do the job, and making the slot itself a
   centred flex box stops its 18px line-height strut from adding height the row
   would then have to centre against. */
#mylist-view #cards-grid .card.friend-view-card.card-movies-watched-stacked .watching-stacked-controls > .rating-bubble-bottom-left-slot {
  display: flex;
  align-items: center;
  margin: 0 !important;
}
#mylist-view .card .shelf-read-review-btn {
  display: inline-flex;
  align-items: center;
  gap: calc(3 * var(--shelfd-px, 1px));
  flex: 0 0 auto;
  margin: 0 !important;
  padding: 0;
  border: 0;
  background: none;
  font-family: 'Sohne', 'DM Sans', sans-serif;
  font-size: calc(14.1 * var(--shelfd-px, 1px));
  font-weight: 400;
  letter-spacing: 0;
  /* answers the `#mylist-view .card * { line-height: 18px !important }` blanket
     in 34b-shelf-card-universal.css — (1,2,0) beats its (1,1,0) */
  line-height: 1 !important;
  /* v16.080: the app's soft lavender accent (#c4b5fd, the token documented in
     00-base-layout.css) rather than white — this is the one tappable thing on
     an otherwise read-only card, and the accent is what marks it as such. */
  color: #c4b5fd;
  white-space: nowrap;
  cursor: pointer;
  -webkit-appearance: none;
          appearance: none;
}
#mylist-view .card .shelf-read-review-chevron {
  font-size: calc(16 * var(--shelfd-px, 1px));
  line-height: 1 !important;
  color: rgba(196, 181, 253, 0.7);
}
#mylist-view .card .shelf-read-review-btn:active {
  opacity: 0.6;
}
body.light-mode #mylist-view .card .shelf-read-review-btn { color: #6d28d9; }
body.light-mode #mylist-view .card .shelf-read-review-chevron { color: rgba(109, 40, 217, 0.7); }

/* =============================================================================
   v16.085 — MOVIES → PLANNING, rows swapped (own shelf)

   The availability logos move up onto the line the status pill used to hold,
   and the status pill drops into the bottom row between the rating and the
   priority circle. Net effect: the three CONTROLS share one line at the poster's
   bottom edge, with the informational logos on their own line above, instead of
   controls and information alternating.
   ============================================================================= */

/* =============================================================================
   v16.109 — THE SHARED PLANNING STACK (movies, TV, anime)

   All three planning cards render the same markup from one branch in
   renderCard, so everything here is scoped to the CLASS the branch emits rather
   than to each section. `.shelf-planning-stack` only ever exists on a planning
   card, and naming three sections would just be three selectors to keep in step
   — which is precisely how the 4px/10px spacing mismatch happened.

   Spacing is TV Shows / Watching's, measured off a live card: 4px from the
   title, 10px between every item in the stack.

   The v16.090 25.3px control-height override is gone: it was narrowed to movies
   when TV and anime adopted this card, and movies now uses it too, so all three
   take the app-wide 27px from 45-default-theme-tail-overrides.css and
   01-mylists-cards-episodes.css. The body.mylist-tab-* hook that rule introduced
   stays — it remains the only way CSS can say "planning cards only".

   The v16.091 three-column TV row and the .movies-planning-bottom-row rules were
   deleted with the layouts they styled.
   ============================================================================= */

/* The availability block sits inside the stack now. Two rules in
   01-mylists-cards-episodes.css pinned it when it was a direct child of
   .card-info (`position: absolute; bottom: 18px`) and reserved a 46px lane for
   the priority badge — neither selector matches from its new parent, so there is
   nothing to override; these just state the block's own layout. */
#mylist-view #cards-grid .card .shelf-planning-stack > .watchlist-card-metadata {
  position: static;
  width: 100%;
  margin: 0 !important;
  padding-right: 0;
}
#mylist-view #cards-grid .card .card-info > .shelf-planning-stack {
  margin-top: calc(4 * var(--shelfd-px, 1px)) !important;
}
/* 01-mylists-cards-episodes.css gives the Episodes button `margin-top: 8.3px`
   inside a .watching-stacked-controls; this states the stack's own 10px rhythm
   so every gap in it matches. */
#mylist-view #cards-grid .card .shelf-planning-stack > .ep-toggle-bar,
#mylist-view #cards-grid .card .shelf-planning-stack > .mylist-availability-where-to-watch {
  margin-top: calc(10 * var(--shelfd-px, 1px)) !important;
}


/* =============================================================================
   v16.112 — the two lines the pill strips, restored where the spec wants them.

   "New season airing …" sits under the where-to-watch pill, on the stack's own
   10px rhythm so it reads as another line of that block rather than a stray.

   An UNRELEASED title puts its release date in the bottom-left slot, in place of
   the ★. Styled to the rating's weight rather than the muted metadata grey: it
   is occupying the rating's position and should carry the rating's emphasis, not
   look like a caption that drifted down there.
   ============================================================================= */
/* v16.114: the new-season line left the stack for the bottom row — its spacing
   now comes from that row's grid. Rule removed rather than left to match nothing. */
#mylist-view #cards-grid .card .shelf-planning-rating-row > .shelf-planning-release-date {
  font-family: 'Sohne', 'DM Sans', sans-serif;
  font-size: calc(13 * var(--shelfd-px, 1px));
  font-weight: 500;
  letter-spacing: 0;
  line-height: 1 !important;
  color: #67e8f9;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  min-width: 0;
  margin: 0 !important;
}
body.light-mode #mylist-view #cards-grid .card .shelf-planning-rating-row > .shelf-planning-release-date {
  color: #0e7490;
}