/* =====================================================================
   cards.css: poster cards, continue-watching tiles, rows, grids and
   episode tiles (ui.js card, continueCard, row, episodeList).
   Mobile first; sizes come from tokens (--card-w, --card-gap, …).
   ===================================================================== */

/* ---------------------------------------------------------------- .card */
.card { position: relative; display: block; min-width: 0; color: var(--text); -webkit-tap-highlight-color: transparent; }
/* The lift shadow switches without a transition: box-shadow blur is never animated. */
.card__media {
  position: relative; isolation: isolate; aspect-ratio: 2 / 3; border-radius: var(--radius-card); overflow: hidden;
  background: var(--surface-1); transition: transform var(--dur-3) var(--ease-calm);
}
.card__media img { width: 100%; height: 100%; object-fit: cover; }
.card__media::after {
  content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
  box-shadow: inset 0 0 0 1px var(--hairline);
}
.card__title {
  margin-top: 10px; color: rgba(245, 245, 247, .92); font-size: var(--fs-callout); font-weight: 500; line-height: 1.3;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; transition: color var(--dur-2);
}
html.is-tv .card__title { margin-top: calc(14px * var(--tvu)); }
.card__meta {
  margin-top: 2px; color: var(--text-3); font-size: var(--fs-caption); font-weight: 500; line-height: 1.35;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
/* Same dots as .meta, but inline so the line can end in an ellipsis. */
.card__meta > * + *::before, .row__focus-meta > * + *::before {
  content: ""; display: inline-block; width: 3px; height: 3px; margin: 0 6px; border-radius: 50%;
  background: currentColor; opacity: .55; vertical-align: middle;
}
.card__score .icon { width: 11px; height: 11px; margin-right: 3px; color: var(--star); vertical-align: -1px; }
@media (max-width: 599px) {
  /* Phones read "2024 · ★ 7,4"; a hidden first part must not leave a leading dot. */
  .card__extra { display: none; }
  .card__meta > .card__extra:first-child + *::before { display: none; }
}

@media (hover: hover) and (pointer: fine) {
  .card:hover .card__media { transform: translateY(-6px) scale(1.04); box-shadow: var(--shadow-2); }
  .card:hover .card__title { color: #fff; }
}
.card:focus-visible { outline: none; box-shadow: none; }
.card:focus-visible .card__media {
  transform: translateY(-6px) scale(1.04);
  outline: 3px solid var(--focus); outline-offset: 3px; box-shadow: 0 0 0 3px var(--focus-halo), var(--shadow-2);
}
.card:focus-visible .card__title { color: #fff; }
.card:active .card__media { transform: scale(.98); transition-duration: var(--dur-1); }
html.is-tv .card:focus-visible .card__media { transform: translateY(-8px) scale(1.06); outline-width: 4px; outline-offset: 4px; }
@media (prefers-reduced-motion: reduce) {
  html .card:focus-visible .card__media, html .card:active .card__media,
  html.is-tv .card:focus-visible .card__media { transform: none; }
}
@media (prefers-reduced-motion: reduce) and (hover: hover) and (pointer: fine) { html .card:hover .card__media { transform: none; } }

/* Typographic title card: missing or broken artwork. */
.card__fallback {
  position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center;
  padding: 14px; text-align: center; background: linear-gradient(160deg, #1c1c21, #111114);
}
.card__fallback .brand__mark { width: 28px; height: 28px; margin-bottom: 12px; opacity: .2; }
.card__fallback-title { color: var(--text); font-size: 15px; font-weight: 600; line-height: 1.3; }

/* --------------------------------------------------- remove (withRemove) */
.card-wrap { position: relative; min-width: 0; }
.card__remove {
  position: absolute; top: 6px; right: 6px; z-index: var(--z-raised);
  display: grid; place-items: center; width: 44px; height: 44px; color: #fff;
}
.card__remove > span {
  display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%;
  background: rgba(0, 0, 0, .55); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .18);
}
.card__remove .icon { width: 14px; height: 14px; stroke-width: 2.2; }
.card__remove:focus-visible { outline: none; box-shadow: none; }
.card__remove:focus-visible > span {
  outline: 2px solid var(--focus); outline-offset: 2px;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .18), 0 0 0 2px var(--focus-halo);
}
/* Mouse devices reveal it on hover or focus; touch and TV always show it. */
@media (hover: hover) and (pointer: fine) {
  .card__remove { opacity: 0; transition: opacity var(--dur-2); }
  .card-wrap:hover .card__remove, .card-wrap:focus-within .card__remove { opacity: 1; }
  .card__remove:hover > span { background: rgba(0, 0, 0, .8); }
}

/* ------------------------------------------- continue watching (.card--wide) */
.card--wide .card__media { aspect-ratio: 16 / 9; }
.card--wide .card__media::after { background: var(--scrim-art); }
.card--wide .card__title { font-size: 14px; }
.card__over {
  position: absolute; left: 12px; right: 56px; bottom: 22px; z-index: 1;
  display: flex; flex-direction: column; gap: 2px; font-size: 13px; line-height: 1.3; text-shadow: var(--text-shadow-img);
}
.card__ep, .card__left { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.card__ep { color: #fff; font-weight: 600; }
.card__left { color: rgba(255, 255, 255, .85); font-weight: 500; }
.card__progress {
  position: absolute; left: 12px; right: 12px; bottom: 10px; z-index: 1; height: 4px; overflow: hidden;
  border-radius: 2px; background: var(--progress-track);
}
.card__progress > span { display: block; height: 100%; background: var(--progress); transform-origin: left; }
/* Touch and TV: a small, always visible glyph. Mouse: a centred disc on hover/focus. */
.card__play {
  position: absolute; right: 12px; bottom: 22px; z-index: 1; display: grid; place-items: center;
  width: 32px; height: 32px; border-radius: 50%; background: rgba(0, 0, 0, .5); color: #fff;
}
.card__play .icon { width: 16px; height: 16px; }
.card__play .spinner { display: none; }
@media (hover: hover) and (pointer: fine) {
  .card__play {
    top: 50%; left: 50%; right: auto; bottom: auto; width: 48px; height: 48px; margin: -24px 0 0 -24px;
    background: rgba(255, 255, 255, .92); color: #0b0b0d; opacity: 0; transition: opacity var(--dur-2);
  }
  .card__play .icon { width: 20px; height: 20px; }
  .card__play .spinner { border-color: rgba(11, 11, 13, .2); border-top-color: #0b0b0d; }
  .card--wide:hover .card__play { opacity: 1; }
}
.card--wide:focus-visible .card__play, .card.is-busy .card__play { opacity: 1; }
.card.is-busy { pointer-events: none; }
.card.is-busy .card__play .icon { display: none; }
.card.is-busy .card__play .spinner { display: block; }

/* -------------------------------------------------- ranked (.card--ranked) */
/* TOP collection shelves: an outlined numeral tucked behind each poster. */
.row--ranked .row__track { grid-auto-columns: max-content; }
.card--ranked {
  --rank-w: calc(var(--card-w) * .5);
  display: grid; grid-template-columns: var(--rank-w) var(--card-w); align-items: end;
}
.card--ranked.is-2d { --rank-w: calc(var(--card-w) * .78); }
.card__rank {
  position: relative; z-index: 0; justify-self: end; margin-right: calc(var(--card-w) * -.1);
  /* Lifted by the caption height so the numeral sits on the poster's bottom edge. */
  margin-bottom: calc(10px + var(--fs-callout) * 1.3);
  font: 800 calc(var(--card-w) * 1)/.78 var(--font); letter-spacing: -.06em; color: var(--bg);
  -webkit-text-stroke: 2px rgba(255, 255, 255, .42);
  -webkit-text-stroke: max(2px, calc(var(--card-w) * .012)) rgba(255, 255, 255, .42);
  paint-order: stroke; user-select: none;
}
html.is-tv .card__rank { margin-bottom: calc(14px * var(--tvu) + var(--fs-callout) * 1.3); }
@supports not (-webkit-text-stroke: 1px) { .card__rank { color: var(--text-3); } }
.card--ranked .card__body { position: relative; z-index: 1; min-width: 0; }

/* ------------------------------------------------ "Ver todo" end tile */
/* Only for D-pad and TV, where the head link is out of the arrow-key path. */
.card--more { display: none; }
body.is-dpad .card--more, html.is-tv .card--more { display: block; }
.card--more .card__media {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px;
  color: var(--text); font-size: 16px; font-weight: 600;
}
.card--more .card__media .icon { width: 24px; height: 24px; }
.row--wide .card--more .card__media { aspect-ratio: 16 / 9; }
.row--ranked .card--more { width: var(--card-w); align-self: start; }

/* ----------------------------------------------------------------- rows */
.rows { position: relative; z-index: var(--z-raised); display: flex; flex-direction: column; gap: var(--rows-gap); }
.rows--top { padding-top: calc(var(--header-h) + 32px); }
/* Off-screen rows skip layout and paint until they scroll near (first line: engines without "auto"). */
.row {
  content-visibility: auto;
  contain-intrinsic-size: 1px calc(var(--card-w) * 1.5 + 120px);
  contain-intrinsic-size: auto calc(var(--card-w) * 1.5 + 120px);
}
.row--wide {
  contain-intrinsic-size: 1px calc(var(--card-wide-w) * .5625 + 120px);
  contain-intrinsic-size: auto calc(var(--card-wide-w) * .5625 + 120px);
}
.row__head { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; padding: 0 var(--gutter); margin-bottom: 12px; }
html.is-tv .row__head { margin-bottom: calc(20px * var(--tvu)); }
.row__title { min-width: 0; font-size: var(--fs-title-2); font-weight: 600; line-height: var(--lh-title-2); letter-spacing: var(--ls-title-2); }
.row__focus-meta { display: none; }
html.is-tv .row__focus-meta { display: block; margin-right: auto; color: var(--text-2); font-size: var(--fs-caption); white-space: nowrap; }
.row__link {
  display: inline-flex; align-items: center; gap: 2px; flex: none; min-height: 44px; padding: 0 8px; margin-right: -8px;
  color: var(--text); font-size: 14px; font-weight: 600;
}
.row__link .icon { width: 16px; height: 16px; transition: transform var(--dur-2) var(--ease-calm); }
@media (hover: hover) and (pointer: fine) { .row__link:hover .icon { transform: translateX(3px); } }
.row__link:focus-visible .icon { transform: translateX(3px); }
html.is-tv .row__link { min-height: var(--control); font-size: var(--fs-callout); }

.row__viewport { position: relative; }
/* The padding leaves room for the lift and the focus ring; the negative margin gives the space back. */
.row__track {
  display: grid; grid-auto-flow: column; grid-auto-columns: var(--card-w); gap: var(--card-gap);
  overflow-x: auto; overscroll-behavior-x: contain; scrollbar-width: none;
  padding: var(--track-pad-top) var(--gutter) var(--track-pad-bottom);
  margin: calc(-1 * var(--track-pad-top)) 0 calc(-1 * var(--track-pad-bottom));
  scroll-padding: 0 var(--gutter);
}
.row__track::-webkit-scrollbar { display: none; }
.row__track > * { scroll-margin-block: 96px; }
.row--wide .row__track { grid-auto-columns: var(--card-wide-w); }
/* Snap only for touch; wheels and trackpads scroll freely. */
@media (pointer: coarse) {
  .row__track { scroll-snap-type: x mandatory; }
  .row__track > * { scroll-snap-align: start; }
}

/* Arrows exist for mouse users only (tabindex=-1, aria-hidden). */
.row__arrow { display: none; }
@media (hover: hover) and (pointer: fine) {
  .row__arrow {
    position: absolute; top: var(--track-pad-top); z-index: var(--z-row-arrow);
    display: flex; align-items: center; justify-content: center; width: 56px; height: calc(var(--card-w) * 1.5);
    color: #fff; opacity: 0; transition: opacity var(--dur-2);
  }
  .row--wide .row__arrow { height: calc(var(--card-wide-w) * .5625); }
  .row__arrow--prev { left: 0; background: linear-gradient(90deg, rgba(11, 11, 13, .85), rgba(11, 11, 13, 0)); }
  .row__arrow--next { right: 0; background: linear-gradient(270deg, rgba(11, 11, 13, .85), rgba(11, 11, 13, 0)); }
  .row__arrow .icon { width: 32px; height: 32px; stroke-width: 2.2; filter: drop-shadow(0 1px 2px rgba(0, 0, 0, .6)); }
  .row__viewport:hover .row__arrow:not(:disabled) { opacity: 1; }
  .row__arrow:disabled { visibility: hidden; }
}
html.is-tv .row__arrow { display: none; }

/* ----------------------------------------------------------------- grid */
.grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(var(--card-w), 1fr)); gap: 32px var(--card-gap); }
/* Columns still share the spare width (1fr), but a poster stops at 232px (the 262w source is never
   upscaled); wide screens get a slightly larger gap instead. TV's own --card-w may be larger. */
.grid > :not(.empty) { max-width: max(var(--card-w), 232px); }
/* D-pad moves keep the focused card clear of the fixed header and tab bar. */
.grid > * { scroll-margin: calc(var(--header-h) + 16px) 0 calc(var(--tabbar-total) + 16px); }
@media (min-width: 1120px) { .grid { gap: 40px var(--card-gap); } }
@media (max-width: 599px) { .grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px 10px; } }
html.is-tv .grid { gap: calc(56px * var(--tvu)) var(--card-gap); }

/* ------------------------------------------------------- episode tiles */
.ranges { margin-bottom: 16px; }
.ranges .segmented { max-width: 100%; }

.ep-grid, .ep-list { list-style: none; padding: 0; margin: 0; max-width: var(--content-max); }

/* Numbered grid: seasons whose episodes have no names. */
.ep-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 12px; }
@media (max-width: 599px) { .ep-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; } }
html.is-tv .ep-grid { grid-template-columns: repeat(auto-fill, minmax(calc(200px * var(--tvu)), 1fr)); gap: calc(16px * var(--tvu)); }

.ep { position: relative; width: 100%; text-align: left; color: var(--text); transition: background-color var(--dur-2); }
.ep--num {
  display: flex; flex-direction: column; justify-content: space-between; height: 76px; padding: 12px 14px;
  border-radius: var(--radius-tile); background: var(--surface-1);
  content-visibility: auto; contain-intrinsic-size: auto 76px;
}
@media (max-width: 599px) { .ep--num { height: 68px; contain-intrinsic-size: auto 68px; } }
html.is-tv .ep--num { height: calc(96px * var(--tvu)); }
.ep__n { font-size: 26px; font-weight: 700; line-height: 1; }
html.is-tv .ep__n { font-size: calc(34px * var(--tvu)); }
.ep--num.is-watched .ep__n { color: var(--text-2); }
.ep__meta { color: var(--text-2); font-size: 13px; font-weight: 500; line-height: 1.3; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ep__check { position: absolute; top: 10px; right: 10px; width: 18px; height: 18px; color: var(--text-3); }
.ep__bar { position: absolute; left: 12px; right: 12px; bottom: 8px; height: 3px; border-radius: 2px; background: var(--progress-track); overflow: hidden; }
.ep__bar > span { display: block; height: 100%; background: var(--progress); transform-origin: left; }
.ep.is-resume { box-shadow: inset 0 0 0 2px var(--text); }
.ep:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; background: var(--surface-2); }
@media (hover: hover) and (pointer: fine) { .ep:hover { background: var(--surface-2); } }

/* Titled list. */
.ep-list { display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px; }
@media (min-width: 1120px) { .ep-list:not(.ep-list--compact) { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
html.is-tv .ep-list:not(.ep-list--compact) { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: calc(20px * var(--tvu)); }
.ep--row { display: grid; grid-template-columns: 64px 1fr; gap: 16px; align-items: center; min-height: 88px; padding: 12px; border-radius: var(--radius-tile); }
.ep--row.is-resume { box-shadow: inset 0 0 0 1px var(--line-strong); }
.ep__tile {
  position: relative; display: flex; align-items: center; justify-content: center; width: 64px; height: 64px;
  border-radius: var(--radius); background: var(--surface-2); font-size: 24px; font-weight: 700; overflow: hidden;
}
.ep__tile .icon { width: 20px; height: 20px; }
.ep.is-watched .ep__tile { background: var(--surface-1); color: var(--text-2); }
.ep.is-watched .ep__tile .icon { width: 22px; height: 22px; }
.ep__tile .ep__bar { left: 8px; right: 8px; bottom: 8px; }
.ep__text { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.ep__over { color: var(--text-2); }
.ep__title { font-size: 16px; font-weight: 600; line-height: 1.3; }
@media (max-width: 599px) {
  .ep--row { grid-template-columns: 56px 1fr; min-height: 76px; }
  .ep__tile { width: 56px; height: 56px; }
  .ep__title { font-size: 15px; }
}

/* Compact: the player's episode panel and sheet. */
.ep-list--compact { gap: 4px; }
.ep-list--compact .ep--row { grid-template-columns: 48px 1fr; min-height: 64px; padding: 8px 10px; border-radius: 12px; gap: 14px; }
.ep-list--compact .ep__tile { width: 48px; height: 48px; font-size: 18px; border-radius: 10px; }
.ep-list--compact .ep__title { font-size: 15px; }
.ep-list--compact .ep[aria-current="true"] { background: rgba(255, 255, 255, .08); }
.ep-list--compact .ep[aria-current="true"]::before {
  content: ""; position: absolute; left: 0; top: 12px; bottom: 12px; width: 3px; border-radius: 2px; background: #fff;
}
@media (hover: hover) and (pointer: fine) { .ep-list--compact .ep:hover { background: rgba(255, 255, 255, .08); } }
.ep-list--compact .ep:focus-visible { outline: 2px solid var(--focus); outline-offset: -2px; box-shadow: none; background: rgba(255, 255, 255, .08); }