/* Movie ratings (IMDb Top 250). The page shell, meta line and explanation come from ratings.css, like the TV
   ratings page; each movie is a shared resource card (resource-card.css: border, surface, hover, focus) and the
   score is ratings.css's heat-map cell. One column, read top to bottom like the chart. */
.imdb-top-list { --rating-cell-size: var(--rating-cell-max); margin: var(--space-ui-4) 0 var(--space-ui-6); }
/* The gap after the rank equals the card's inline padding, so the rank sits centred between the card edge and
   the poster whatever its digit count. Phones: the name, then one line of facts, beside the poster. */
.imdb-top-card { display: grid; grid-template-columns: auto auto minmax(0,1fr) auto; grid-template-areas: "rank poster body score" "rank poster facts score"; align-items: center; column-gap: var(--resource-card-pad-inline); row-gap: var(--space-detail-intra); padding: var(--resource-card-pad-block) var(--resource-card-pad-inline); }
.imdb-top-rank { grid-area: rank; min-width: var(--rating-rank-width); color: var(--text-secondary); font-size: var(--type-value); line-height: var(--leading-detail-value); font-variant-numeric: tabular-nums; text-align: center; }
.imdb-top-poster { grid-area: poster; display: block; width: var(--size-scale-px-44); aspect-ratio: 2/3; object-fit: cover; border: var(--size-scale-px-1) solid var(--border); border-radius: var(--radius-sm); background: var(--bg-surface); }
.imdb-top-body { grid-area: body; align-self: end; display: grid; gap: var(--space-detail-intra); min-width: 0; }
.imdb-top-name { color: var(--text-primary); font-size: var(--type-card-title); line-height: var(--leading-detail-value); overflow-wrap: anywhere; }
.imdb-top-sub,.imdb-top-facts { color: var(--text-muted); font-size: var(--type-meta); line-height: var(--leading-detail-meta); }
.imdb-top-facts { grid-area: facts; align-self: start; display: flex; flex-wrap: wrap; }
.imdb-top-facts > * { white-space: nowrap; }
.imdb-top-card > .rating-cell { grid-area: score; }
/* The meta line breaks between items, never inside the count or the date. */
.imdb-top-keep { white-space: nowrap; }
/* Wide screens: a table. Year, votes and resources are columns lined up across rows; the widths hold the
   longest value in either language (97.5万人评分, 62 resources). */
@media (min-width: 48rem) {
  .imdb-top-card { grid-template-columns: auto auto minmax(0,1fr) var(--rating-movie-year-width) var(--rating-movie-fact-width) var(--rating-movie-fact-width) auto; grid-template-areas: "rank poster body year votes count score"; }
  .imdb-top-body { align-self: center; }
  .imdb-top-facts { display: contents; }
  .imdb-top-sep { display: none; }
  .imdb-top-year { grid-area: year; }
  .imdb-top-votes { grid-area: votes; }
  .imdb-top-count { grid-area: count; }
  .imdb-top-year,.imdb-top-votes,.imdb-top-count { text-align: end; font-variant-numeric: tabular-nums; }
}
/* My follows (assets-src/pages/imdb-top.js, signed-in readers with followed movies only): one muted line above
   the ranking, the count in gold; it opens a compact list in place. Smaller than the ranking rows so the chart
   stays the page's subject. */
.imdb-follow { margin: var(--space-ui-4) 0 0; }
.imdb-follow + .imdb-top-list { margin-top: var(--space-ui-3); }
.imdb-follow-toggle { display: inline-flex; align-items: center; gap: var(--space-scale-px-2); min-height: var(--size-scale-px-32); margin: 0; padding: 0; border: 0; background: transparent; color: var(--text-muted); font-family: inherit; font-size: var(--type-meta); line-height: var(--leading-detail-meta); text-align: left; cursor: pointer; }
.imdb-follow-toggle:hover, .imdb-follow-toggle:focus-visible { color: var(--text-secondary); }
.imdb-follow-count { color: var(--accent); }
.imdb-follow-chevron { display: inline-block; margin-inline-start: var(--space-scale-px-2); transition: transform var(--motion-duration-base); }
.imdb-follow-toggle[aria-expanded="true"] .imdb-follow-chevron { transform: rotate(90deg); }
.imdb-follow-list { margin: var(--space-scale-px-6) 0 0; }
/* resource-card.css gives the list its own display, which would override the hidden attribute. */
.imdb-follow-list[hidden] { display: none; }
.imdb-follow-card { display: grid; grid-template-columns: auto minmax(0,1fr); align-items: center; column-gap: var(--resource-card-pad-inline); padding: var(--space-scale-px-6) var(--resource-card-pad-inline); }
.imdb-follow-poster { display: block; width: var(--size-scale-px-28); aspect-ratio: 2/3; object-fit: cover; border: var(--size-scale-px-1) solid var(--border); border-radius: var(--radius-ui-xs); background: var(--bg-surface); }
.imdb-follow-body { display: grid; gap: var(--space-scale-px-2); min-width: 0; }
.imdb-follow-title { display: flex; align-items: center; gap: var(--space-scale-px-6); min-width: 0; }
.imdb-follow-name { min-width: 0; overflow: hidden; color: var(--text-primary); font-size: var(--type-meta); line-height: var(--leading-detail-meta); white-space: nowrap; text-overflow: ellipsis; }
/* "新版本": the site's "新" badge look (translucent gold fill, gold text). */
.imdb-follow-new { flex-shrink: 0; padding: 0 var(--space-scale-px-5); border-radius: var(--radius-ui-xs); background: var(--follow-badge-fill); color: var(--accent); font-size: var(--type-resource-badge); line-height: var(--leading-section); font-weight: var(--weight-label); }
.imdb-follow-meta { color: var(--text-secondary); font-size: var(--type-resource-badge); line-height: var(--leading-detail-meta); }
.imdb-follow-meta--muted { color: var(--text-muted); }
@media (prefers-reduced-motion: reduce) { .imdb-follow-chevron { transition: none; } }