/* The ranking rail owns all rank10 styles, across phone and tablet layouts. */
.rank10 {
  --rank-poster-width: clamp(124px, 18.6vw, 158px);
  display: flex;
  gap: 10px;
  width: 100%;
  min-width: 0;
  box-sizing: border-box;
  overflow-x: auto;
  overflow-y: hidden;
  padding: 14px 20px 12px;
  scroll-padding-inline: 20px;
  overscroll-behavior-x: contain;
  scrollbar-width: none;
  touch-action: auto;
  cursor: grab;
}
.rank10::-webkit-scrollbar { display: none; }
.rank10.is-dragging, .rank10.is-dragging .rank10-item { cursor: grabbing; }
.rank10-item {
  position: relative;
  display: grid;
  grid-template-columns: max-content var(--rank-poster-width);
  grid-template-rows: auto auto;
  align-content: start;
  flex: 0 0 auto;
  appearance: none;
  padding: 0;
  border: 0;
  background: transparent;
  color: inherit;
  font: inherit;
  text-align: left;
  cursor: pointer;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
}
.rank10-col { display: contents; }
.rank10-num {
  grid-column: 1;
  grid-row: 1;
  align-self: end;
  position: relative;
  z-index: 2;
  /* Share the poster edge instead of reserving a full numeral-wide gutter. */
  margin: 0 -.28em -1px 0;
  padding-right: 5px;
  color: #111114;
  -webkit-text-stroke: 2px #96969e;
  font: 900 clamp(104px, 16.8vw, 138px)/.8 Arial, sans-serif;
  letter-spacing: -.09em;
  pointer-events: none;
}
.rank10-poster {
  grid-column: 2;
  grid-row: 1;
  position: relative;
  z-index: 1;
  display: block;
  width: var(--rank-poster-width);
  aspect-ratio: 2 / 3;
  box-sizing: border-box;
  border: 1px solid #ffffff24;
  border-radius: 10px;
  background: #1b1b20;
  overflow: hidden;
}
.rank10-poster img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  pointer-events: none;
  -webkit-user-drag: none;
}
.rank10-cap {
  grid-column: 2;
  grid-row: 2;
  display: flex;
  flex-direction: column;
  gap: 3px;
  min-width: 0;
  padding-top: 9px;
}
.rank10-cap strong {
  display: -webkit-box;
  overflow: hidden;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  color: #f3f3f5;
  font: 700 15px/1.4 var(--c-sans);
  letter-spacing: -.025em;
  overflow-wrap: anywhere;
}
.rank10-stats { color: #97979f; font: 500 12px/1.5 var(--c-sans); }
/* The big rank numeral covers the poster's bottom-left, so the HTML title layer sits at the top with an inverted scrim.
   Posters with a baked title hide that layer entirely (crack-parity.css .has-baked-title). */
.rank10-poster .thumb-story-copy { top: 8px; bottom: auto; }
.rank10-poster .thumb-story-overlay {
  background: linear-gradient(180deg, rgba(4, 4, 6, .92) 0%, rgba(4, 4, 6, .55) 28%, rgba(5, 5, 7, .12) 54%, rgba(4, 4, 6, .4) 100%);
}
.rank10-stats i { color: #aa737a; vertical-align: -1px; }
.rank10-hook { display: none; }
.ranking-actions { display: flex; align-items: center; gap: 4px; flex: none; }
.ranking-disclosure { margin: 0 0 12px; color: #a59b9f; font: 400 12px/1.6 var(--c-sans); }
.ranking-badge { margin-right: 6px; color: #fa5363; font: 850 12px/1 var(--c-sans); letter-spacing: .035em; white-space: nowrap; }
.ranking-actions button {
  display: grid;
  place-items: center;
  width: 36px;
  min-height: 44px;
  padding: 0;
  border: 1px solid #ffffff20;
  border-radius: 8px;
  color: #f0f0f3;
  background: transparent;
  cursor: pointer;
}
.ranking-actions button i { font-size: 19px; }
.ranking-actions button:disabled { opacity: .28; cursor: default; }
.rank10:focus-visible, .rank10-item:focus-visible, .ranking-actions button:focus-visible {
  outline: 2px solid #f65265;
  outline-offset: 3px;
  border-radius: 10px;
}
@media (hover: hover) {
  .rank10-item:hover .rank10-num { -webkit-text-stroke-color: #f65265; }
  .rank10-item:hover .rank10-poster { border-color: #f6526580; }
  .ranking-actions button:hover:not(:disabled) { background: #f6526517; border-color: #f6526580; }
}
@media (min-width: 768px) {
  .rank10 { padding-inline: 5px; scroll-padding-inline: 5px; }
}
/* Phones: the PICK 10 heading and its disclosure use the same 16px gutter as every other home section. */
@media (max-width: 767px) {
  .rank-heading-row { padding-inline: 16px; }
  .ranking-disclosure { padding-inline: 16px; }
}
@media (max-width: 479px) {
  .rank10 { gap: 8px; padding-inline: 16px; scroll-padding-inline: 16px; }
  .rank10-cap strong { font-size: 14px; }
  .ranking-actions { gap: 2px; }
  .ranking-actions button { width: 28px; border-color: transparent; }
  .ranking-badge { font-size: 10px; margin-right: 2px; }
}