/* =============================================================================
   v16.099 — "Where to watch" pill + modal

   The pill houses the provider logos on an anime planning card; the sheet names
   each platform, because a 26px logo is not always legible on its own.

   The sheet deliberately matches the status-change modal it sits beside:
   flat #1F1B2A (no gradient, no backdrop blur), 6px corners. Those values are
   the ones set on .game-status-modal in 42-activity-card-overrides.css — two
   sheets opening from the same card should not look like two different apps.
   ============================================================================= */

/* ------------------------------------------------------------------ the pill */
#mylist-view .card .wtw-pill {
  display: inline-flex;
  align-items: center;
  gap: calc(6 * var(--shelfd-px, 1px));
  /* v16.102: 27px tall, matching the status and Episodes pills above it — the
     same height the rest of the app's shelf controls use. Fixed rather than
     padding-derived so it cannot drift when the logo chips are resized. */
  height: calc(27 * var(--shelfd-px, 1px));
  min-height: calc(27 * var(--shelfd-px, 1px));
  box-sizing: border-box;
  /* v16.103: fixed WIDTH as well as height — two overlapped 21px chips (21 + 12)
     + chevron + padding. Stated rather than derived so a one-provider title
     renders the identical button to a nine-provider one. */
  width: calc(63 * var(--shelfd-px, 1px));
  justify-content: center;
  /* v16.107: padding, font-size and colour copied from the Episodes button.
     A <button> with none of these set inherits the UA defaults — 13.33px and
     BLACK text — which is what made the two pills read as different chrome even
     though their background, border, radius, shadow and backdrop-filter were
     already byte-identical. */
  padding: 0 calc(10 * var(--shelfd-px, 1px));
  font-family: 'Sohne', 'DM Sans', sans-serif;
  font-size: calc(12.3 * var(--shelfd-px, 1px));
  color: rgba(255, 255, 255, 0.81);
  border-radius: 999px;
  /* v16.100: same colour as the Episodes pill it sits under — those exact values
     from 01-mylists-cards-episodes.css, not an approximation, so the two stay
     identical on any background. */
  border: 1px solid rgba(255, 255, 255, 0.33);
  background: rgba(15, 15, 15, 0.72);
  /* answers `#mylist-view .card * { line-height: 18px !important }` in
     34b-shelf-card-universal.css — (1,2,0) beats its (1,1,0) */
  line-height: 1 !important;
  cursor: pointer;
  -webkit-appearance: none;
          appearance: none;
  max-width: 100%;
}
#mylist-view .card .wtw-pill:active {
  background: rgba(30, 30, 30, 0.82);
  border-color: rgba(255, 255, 255, 0.46);
}
/* v16.103 — THE STACK.

   Logos overlap like a deck instead of sitting in a row, and the JS caps the
   pill at two. Together that fixes the pill's width: a title on nine services
   renders the same button as one on two. The full list is in the sheet.

   `flex-direction: row-reverse` + a negative margin is what puts the FIRST logo
   on top without needing a z-index per chip — in reverse order the earlier
   sibling paints later. The ring is the card's own background colour, so each
   chip cuts a clean edge out of the one behind it rather than blending into it. */
#mylist-view .card .wtw-pill .wtw-pill-stack {
  display: inline-flex;
  flex-direction: row-reverse;
  align-items: center;
  gap: 0;
  flex: 0 0 auto;
}
/* 26px chips inside a 27px pill would leave half a pixel of border either side —
   21px keeps a real 3px inset top and bottom. */
#mylist-view .card .wtw-pill .mylist-availability-provider {
  width: calc(21 * var(--shelfd-px, 1px));
  height: calc(21 * var(--shelfd-px, 1px));
  min-width: calc(21 * var(--shelfd-px, 1px));
  min-height: calc(21 * var(--shelfd-px, 1px));
  /* v16.107: the ring is the PILL's interior colour, not the card's.
     rgba(15,15,15,0.72) over the card's #222222 resolves to rgb(20,20,20); the
     ring was hardcoded #222222 (the card), so it sat two values lighter than
     what surrounds it and read as a faint extra hairline around each chip. */
  box-shadow: 0 0 0 1.5px rgb(20, 20, 20);
  border: 0;
}
/* every chip except the visually-first (last in DOM, first in row-reverse)
   slides under its neighbour */
#mylist-view .card .wtw-pill .wtw-pill-stack > .mylist-availability-provider:not(:last-child) {
  margin-right: calc(-9 * var(--shelfd-px, 1px));
}
/* v16.112: the chevron is gone — the pill already reads as a button, and the
   arrow made it look like a disclosure row rather than a control. */

/* ----------------------------------------------------------------- the sheet */
.wtw-modal-overlay {
  position: fixed;
  inset: 0;
  z-index: 4200;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transition: opacity 200ms ease;
  /* the sheet is interactive the moment it exists; only the fade is animated */
  pointer-events: auto;
}
.wtw-modal-overlay.is-open { opacity: 1; }
.wtw-modal-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.58);
}
.wtw-modal {
  position: relative;
  width: min(calc(100vw - 48px), 260px);
  max-height: min(70vh, 460px);
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  border-radius: 6px;
  border: 1px solid #474450;
  background: #1F1B2A;
  box-shadow: 0 24px 64px rgba(0, 0, 0, 0.52);
  padding: calc(14 * var(--shelfd-px, 1px)) calc(14 * var(--shelfd-px, 1px)) calc(10 * var(--shelfd-px, 1px));
}

/* v16.116: close button, top-right. `position: absolute` inside the sheet rather
   than a flex row beside the title, so the title stays optically centred on the
   sheet instead of on the space left over next to a button. */
.wtw-modal-close {
  position: absolute;
  top: calc(6 * var(--shelfd-px, 1px));
  right: calc(6 * var(--shelfd-px, 1px));
  width: calc(28 * var(--shelfd-px, 1px));
  height: calc(28 * var(--shelfd-px, 1px));
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 0;
  background: none;
  padding: 0;
  font-family: 'Sohne', 'DM Sans', sans-serif;
  font-size: calc(22 * var(--shelfd-px, 1px));
  line-height: 1;
  color: rgba(255, 255, 255, 0.6);
  cursor: pointer;
  -webkit-appearance: none;
          appearance: none;
}
.wtw-modal-close:active { color: #ffffff; }
body.light-mode .wtw-modal-close { color: rgba(20, 18, 28, 0.55); }
.wtw-modal-title {
  text-align: center;
  font-family: 'Sohne', 'DM Sans', sans-serif;
  font-size: calc(14.1 * var(--shelfd-px, 1px));
  font-weight: 600;
  letter-spacing: 0;
  line-height: 1.2;
  color: #ffffff;
  margin-bottom: calc(12 * var(--shelfd-px, 1px));
}
.wtw-modal-list {
  display: flex;
  flex-direction: column;
  gap: calc(10 * var(--shelfd-px, 1px));
}
.wtw-modal-row {
  display: flex;
  align-items: center;
  gap: calc(10 * var(--shelfd-px, 1px));
  min-width: 0;
}
/* the logo chip is the card's own component, restated at sheet size */
.wtw-modal-row .mylist-availability-provider {
  width: calc(28 * var(--shelfd-px, 1px));
  height: calc(28 * var(--shelfd-px, 1px));
  min-width: calc(28 * var(--shelfd-px, 1px));
  min-height: calc(28 * var(--shelfd-px, 1px));
  border-radius: 999px;
  overflow: hidden;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.12);
  flex: 0 0 auto;
}
.wtw-modal-row .mylist-availability-provider img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
/* name on top, how-to-watch under it — a two-line row keeps long service names
   from having to share a line with their qualifier and ellipsing early */
.wtw-modal-text {
  display: flex;
  flex-direction: column;
  gap: calc(1 * var(--shelfd-px, 1px));
  min-width: 0;
}
.wtw-modal-name {
  font-family: 'Sohne', 'DM Sans', sans-serif;
  font-size: calc(14.1 * var(--shelfd-px, 1px));
  font-weight: 500;
  letter-spacing: 0;
  line-height: 1.25;
  color: rgba(255, 255, 255, 0.92);
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.wtw-modal-how {
  font-family: 'Sohne', 'DM Sans', sans-serif;
  font-size: calc(12 * var(--shelfd-px, 1px));
  font-weight: 400;
  letter-spacing: 0;
  line-height: 1.2;
  white-space: nowrap;
}
/* included in a subscription vs costs money — the one distinction the sheet
   exists to make, so the two carry different ink rather than only different words */
.wtw-modal-how--stream { color: #6ee7b7; }
.wtw-modal-how--buy    { color: rgba(255, 255, 255, 0.55); }
body.light-mode .wtw-modal-how--stream { color: #047857; }
body.light-mode .wtw-modal-how--buy    { color: rgba(20, 18, 28, 0.55); }

body.light-mode .wtw-modal { background: #ffffff; border-color: rgba(20, 18, 28, 0.14); }
body.light-mode .wtw-modal-title { color: #14121c; }
body.light-mode .wtw-modal-name { color: rgba(20, 18, 28, 0.86); }

/* -------------------------------------------- the ★ row, on the poster's edge */
/* v16.100: rating LEFT, priority RIGHT, one row on the poster's bottom edge.
   `right: 0` as well as `left: 0` is what lets space-between reach the card's
   full width — without it the row shrink-wraps the rating and the circle sits
   beside it instead of at the far edge.

   v16.104: scoped to the CLASS, not to a section. Anime and TV planning render
   the same card from the same branch, so `.shelf-planning-rating-row` only ever
   exists on that card and naming each section here would just be two selectors
   that have to be kept in step. (Renamed from .anime-planning-rating-row for the
   same reason — it is no longer anime's.) */
/* v16.114: THREE slots — rating/date LEFT, "new season" CENTRE, priority RIGHT.

   A grid with a fixed centre column, not flex. Under flex the middle item lands
   wherever the two outer widths leave it, and `space-between` puts a LONE child
   on the left — which is how the priority circle ended up left-aligned on cards
   whose rating had not resolved.

   Columns are assigned BY CLASS so a missing slot never shifts the others: a
   released title has no date, an unreleased one has no ★, most titles have no
   new-season line, and a viewed shelf has no priority circle. */
#mylist-view #cards-grid .card .shelf-planning-rating-row {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  margin: 0 !important;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: calc(8 * var(--shelfd-px, 1px));
}
#mylist-view #cards-grid .card .shelf-planning-rating-row > .shelf-title-rating,
#mylist-view #cards-grid .card .shelf-planning-rating-row > .shelf-planning-release-date {
  grid-column: 1;
  justify-self: start;
}
#mylist-view #cards-grid .card .shelf-planning-rating-row > .mylist-availability-new-season {
  grid-column: 2;
  justify-self: center;
  margin: 0 !important;
  white-space: nowrap;
  min-width: 0;
}
#mylist-view #cards-grid .card .shelf-planning-rating-row > .watchlist-priority-slot {
  position: static;
  grid-column: 3;
  justify-self: end;
  margin: 0 !important;
}
#mylist-view #cards-grid .card .shelf-planning-rating-row > .shelf-title-rating {
  margin: 0 !important;
  height: calc(25.3 * var(--shelfd-px, 1px));
  align-items: center;
  gap: calc(5 * var(--shelfd-px, 1px));
}
#mylist-view #cards-grid .card .shelf-planning-rating-row .shelfd-star-glyph {
  --shelfd-star-size: calc(18 * var(--shelfd-px, 1px));
}
#mylist-view #cards-grid .card .shelf-planning-rating-row .shelf-title-rating-score {
  font-size: calc(15 * var(--shelfd-px, 1px));
}


/* v16.116: SCROLL LOCK while the sheet is open. The shelf is a long list and the
   sheet is centred over it; letting the page keep scrolling underneath moves the
   card the sheet belongs to out from under it. The overlay also swallows
   touchmove in JS — `overflow: hidden` alone does not stop iOS rubber-banding. */
body.shelfd-wtw-open {
  overflow: hidden !important;
  touch-action: none;
}