/* ============================================================
   ROLLIT — WRAP  (css/wrap.ad49a1fa.css)
   The in-feed wrap card (js/wrap.73a2ab43.js), its modal, and the two other
   "worth opening today" feed rows that ship with it: verdict shifts
   (js/shifts.b778f82c.js) and the Watching digest (js/digest.b017a533.js).

   All three are FEED FURNITURE: they sit in the same 660px column as
   frame posts, share the surface/border language of .home-strip, and
   lean on the theme variables so light mode needs no second pass.
   ============================================================ */

/* ============================================================
   WRAP CARD (in the feed)

   IT IS A GUEST IN SOMEONE ELSE'S COLUMN. Every measurement here is
   the smallest one that still reads — the card's job is to be
   recognised and opened, and the feed underneath it is what people
   came for. When something has to grow, something else gives.
   ============================================================ */
.wrap-card {
  position: relative; overflow: hidden;
  margin: 0 0 1.2rem; padding: 1rem 1.15rem .9rem;
  border-radius: 18px; border: 1px solid rgba(232,201,107,.32);
  background:
    radial-gradient(120% 140% at 0% 0%, rgba(232,201,107,.16), transparent 55%),
    radial-gradient(120% 140% at 100% 120%, rgba(62,212,154,.10), transparent 52%),
    var(--surface);
  transition: opacity .18s, transform .18s;
}
.wrap-card.is-going { opacity: 0; transform: scale(.98); }
.wrap-card-x {
  position: absolute; top: 10px; right: 10px; cursor: pointer;
  width: 28px; height: 28px; display: grid; place-items: center;
  color: var(--muted); background: transparent; border: 0; border-radius: 50%;
}
.wrap-card-x:hover { color: var(--text); background: rgba(255,255,255,.07); }

.wrap-card-head { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 11px; }
.wrap-card-kicker {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 11px; font-weight: 700; letter-spacing: .7px;
  color: var(--gold); background: rgba(232,201,107,.12);
  border: 1px solid rgba(232,201,107,.32); border-radius: 20px; padding: 3px 11px;
}
.wrap-card-period { font-size: 12.5px; font-weight: 600; color: var(--muted); }

/* Stat tiles are deliberately SMALL. They're the caption under the poster
   wall, not the headline — the artwork is what makes someone recognise
   their own week, so it gets the room. Small ENOUGH, too: a 21px number in a
   14px-tall box was reading as the headline of a card whose headline is the
   poster row under it. */
.wrap-card-tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(78px, 1fr)); gap: 8px; }
.wrap-tile {
  display: flex; flex-direction: column; align-items: center; gap: 1px;
  padding: 5px 6px; border-radius: 11px;
  background: rgba(255,255,255,.03); border: 1px solid var(--border);
}
.wrap-tile-val { font-family: 'Bebas Neue', sans-serif; font-size: 19px; line-height: 1.05; letter-spacing: .5px; }
.wrap-tile-lab { font-size: 8.5px; font-weight: 700; letter-spacing: .5px; color: var(--muted); text-align: center; }

/* ---- POSTER WALL ---- */
/* One row that always FITS. A flex row with fixed-width posters clipped the
   tail on a phone — including the "+N" tile, so the card claimed to show
   everything while hiding four of them. Auto-columns instead: the posters
   shrink to the width available and the count never lies.

   THE CAP IS THE OTHER HALF OF THAT. Bare `1fr` tracks shrink, but they also
   GROW, and the row is a trailer for a period that can hold one title as
   easily as forty: a week with a single film gave that film the whole 660px
   column, and a 2:3 poster 620px wide is 930px tall — one image, three
   screenfuls, in a feed. minmax(0, 56px) keeps the shrink and drops the
   stretch, so a lone poster is the same size as one of ten and the row is a
   strip either way. */
.wrap-wall-row {
  display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 56px);
  justify-content: start;
  gap: 6px; margin-top: 10px;
}
.wrap-wall-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(66px, 1fr)); gap: 7px;
}
.wrap-poster {
  position: relative; display: block; aspect-ratio: 2 / 3; border-radius: 8px;
  overflow: hidden; background: rgba(255,255,255,.05); flex-shrink: 0;
  border: 1px solid var(--border); text-decoration: none;
}
.wrap-poster img { width: 100%; height: 100%; object-fit: cover; display: block; }
.wrap-poster:hover { border-color: var(--gold); }
.wrap-poster-star {
  position: absolute; right: 3px; bottom: 3px; min-width: 17px; padding: 0 3px;
  font-size: 10px; font-weight: 800; line-height: 16px; text-align: center;
  color: #160d2e; background: var(--gold); border-radius: 5px;
}
.wrap-poster-more {
  display: grid; place-items: center; font-size: 13px; font-weight: 700; color: var(--muted);
  background: rgba(255,255,255,.04);
}

/* ---- SHORT LINES (the "what happened" sentences) ---- */
.wrap-lines { display: flex; flex-direction: column; gap: 3px; margin-top: 10px; }
.wrap-line {
  display: flex; align-items: center; gap: 8px; text-decoration: none;
  font-size: 12.5px; color: var(--muted); line-height: 1.4;
}
.wrap-line i { font-size: 14px; color: var(--gold); flex-shrink: 0; }
.wrap-line b { color: var(--text); font-weight: 600; }
a.wrap-line:hover b { color: var(--gold); }

.wrap-card-actions { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 10px; }
.wrap-btn {
  display: inline-flex; align-items: center; gap: 6px; cursor: pointer; white-space: nowrap;
  font-size: 13px; font-weight: 600; font-family: inherit;
  color: #160d2e; background: linear-gradient(180deg, #f2d885, var(--gold));
  border: 1px solid var(--gold); border-radius: 11px; padding: 8px 14px;
}
.wrap-btn:hover { filter: brightness(1.05); }
.wrap-btn.ghost { color: var(--text); background: rgba(255,255,255,.04); border-color: var(--border); }
.wrap-btn.ghost:hover { color: var(--gold); border-color: var(--gold); }

/* ============================================================
   WRAP MODAL
   ============================================================ */
.wrap-bg {
  position: fixed; inset: 0; z-index: 2600; display: flex; align-items: center; justify-content: center;
  padding: 1.2rem; background: rgba(4,5,9,.74); backdrop-filter: blur(4px);
  opacity: 0; pointer-events: none; transition: opacity .18s;
}
.wrap-bg.open { opacity: 1; pointer-events: auto; }
.wrap-modal {
  position: relative; width: min(520px, 100%); max-height: 88vh; overflow-y: auto;
  padding: 1.4rem 1.5rem 1.6rem; border-radius: 20px;
  border: 1px solid rgba(232,201,107,.28);
  background:
    radial-gradient(110% 90% at 0% 0%, rgba(232,201,107,.13), transparent 55%),
    var(--surface);
  transform: translateY(8px); transition: transform .2s;
}
.wrap-bg.open .wrap-modal { transform: none; }
.wrap-close {
  position: absolute; top: 12px; right: 12px; cursor: pointer;
  width: 30px; height: 30px; display: grid; place-items: center;
  color: var(--muted); background: rgba(255,255,255,.05); border: 0; border-radius: 50%;
}
.wrap-close:hover { color: var(--text); }

.wrap-nav { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; margin: 0 34px 1.1rem 0; }
.wrap-kinds { display: flex; gap: 6px; }
.wrap-kind {
  cursor: pointer; font-family: inherit; font-size: 12.5px; font-weight: 600;
  color: var(--muted); background: rgba(255,255,255,.04);
  border: 1px solid var(--border); border-radius: 20px; padding: 6px 14px;
}
.wrap-kind.active { color: #160d2e; background: var(--gold); border-color: var(--gold); }
.wrap-steps { display: flex; align-items: center; gap: 8px; }
.wrap-step {
  cursor: pointer; width: 28px; height: 28px; display: grid; place-items: center;
  color: var(--text); background: rgba(255,255,255,.04);
  border: 1px solid var(--border); border-radius: 9px;
}
.wrap-step:disabled { opacity: .35; cursor: default; }
.wrap-step-label { font-size: 12.5px; font-weight: 600; color: var(--muted); min-width: 92px; text-align: center; }

.wrap-hero { margin-bottom: 1.2rem; }
.wrap-hero-kicker {
  display: inline-block; font-size: 10.5px; font-weight: 700; letter-spacing: .8px; color: var(--gold);
}
.wrap-hero-time {
  font-family: 'Bebas Neue', sans-serif; font-size: clamp(2.6rem, 11vw, 3.6rem);
  line-height: 1; letter-spacing: 1px; color: var(--text); margin: 4px 0 4px;
}
/* Minutes arrive a beat after the rest (a TMDB round-trip); say so quietly
   instead of flashing a wrong number that then jumps. */
.wrap-hero-time.is-pending { opacity: .45; }
.wrap-hero-sub { font-size: 13px; color: var(--muted); }

/* One wrapping row of small chips, so the numbers cost four lines instead of
   a seven-box grid and the poster wall above them gets the space. */
.wrap-chipstats { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 1.1rem; }
.wrap-statchip {
  display: inline-flex; align-items: center; gap: 5px; padding: 4px 10px;
  border-radius: 20px; background: rgba(255,255,255,.04); border: 1px solid var(--border);
  font-size: 11.5px; color: var(--muted); white-space: nowrap;
}
.wrap-statchip i { font-size: 13px; color: var(--gold); }
.wrap-statchip b { font-size: 13px; color: var(--text); font-weight: 700; }

.wrap-sec { margin-bottom: 1.1rem; }
.wrap-sec-h { font-size: 10.5px; font-weight: 700; letter-spacing: .7px; text-transform: uppercase; color: var(--muted); margin-bottom: 8px; }
.wrap-best {
  display: flex; align-items: center; gap: 12px; padding: 10px; text-decoration: none;
  border-radius: 13px; background: rgba(255,255,255,.03); border: 1px solid var(--border);
}
.wrap-best:hover { border-color: rgba(232,201,107,.42); }
.wrap-best img, .wrap-best-ph { width: 52px; height: 78px; border-radius: 8px; object-fit: cover; flex-shrink: 0; }
.wrap-best-ph { display: grid; place-items: center; background: rgba(255,255,255,.05); color: var(--dim); }
.wrap-best b { display: block; font-size: 15px; color: var(--text); }
.wrap-best-meta { font-size: 12.5px; color: var(--muted); }

.wrap-chips { display: flex; flex-wrap: wrap; gap: 7px; }
.wrap-chip {
  font-size: 12.5px; font-weight: 600; text-decoration: none; color: var(--text);
  background: rgba(255,255,255,.04); border: 1px solid var(--border);
  border-radius: 20px; padding: 5px 12px;
}
.wrap-chip:hover { border-color: var(--gold); color: var(--gold); }
.wrap-chip.flat { color: var(--muted); }
.wrap-chip.flat:hover { color: var(--muted); border-color: var(--border); }

.wrap-dist { display: flex; flex-direction: column; gap: 7px; }
.wrap-dist-row { display: flex; align-items: center; gap: 10px; font-size: 12.5px; color: var(--muted); }
.wrap-dist-lab { width: 68px; flex-shrink: 0; }
.wrap-dist-track { flex: 1; height: 8px; border-radius: 4px; background: rgba(255,255,255,.07); overflow: hidden; }
.wrap-dist-fill { display: block; height: 100%; border-radius: 4px; }
.wrap-dist-n { width: 20px; text-align: right; font-weight: 700; color: var(--text); }

.wrap-modal-actions { display: flex; justify-content: center; margin-top: 1.2rem; }
.wrap-empty { text-align: center; padding: 2.4rem 1rem; color: var(--muted); }
.wrap-empty i { font-size: 2.2rem; color: var(--dim); }
.wrap-empty div { margin-top: 10px; font-size: 14.5px; color: var(--text); }
.wrap-empty p { font-size: 13px; margin-top: 6px; }

/* ============================================================
   VERDICT SHIFTS  (js/shifts.b778f82c.js)
   A strip of "this moved" cards — same scroller furniture as the
   People / Titles strips so it reads as part of the feed, not an ad.
   ============================================================ */
.shift-card {
  display: flex; gap: 10px; align-items: flex-start; width: 232px; flex-shrink: 0;
  padding: 10px; border-radius: 13px; text-decoration: none;
  background: var(--surface); border: 1px solid var(--border);
}
.shift-card:hover { border-color: rgba(232,201,107,.42); }
.shift-poster { width: 44px; height: 66px; border-radius: 7px; object-fit: cover; flex-shrink: 0; }
.shift-poster-ph { display: grid; place-items: center; background: rgba(255,255,255,.05); color: var(--dim); }
.shift-txt { min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.shift-title { font-size: 13.5px; font-weight: 600; color: var(--text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.shift-line { font-size: 11.5px; color: var(--muted); line-height: 1.35; }
.shift-move { display: inline-flex; align-items: center; gap: 4px; font-size: 11px; font-weight: 700; letter-spacing: .4px; }
.shift-move.up { color: var(--toproll); }
.shift-move.down { color: var(--flop); }
.shift-move.gap { color: var(--predict); }

/* ============================================================
   WATCHING DIGEST  (js/digest.b017a533.js)
   ============================================================ */
.digest {
  margin: 0 0 1.2rem; padding: 1rem 1.1rem;
  border-radius: 16px; background: var(--surface); border: 1px solid var(--border);
  transition: opacity .18s, transform .18s;
}
.digest.is-going { opacity: 0; transform: scale(.98); }
.digest-head {
  display: flex; align-items: center; gap: 7px; margin-bottom: 10px;
  font-size: 11px; font-weight: 700; letter-spacing: .7px; text-transform: uppercase; color: var(--muted);
}
.digest-head i { font-size: 14px; color: var(--gold); }
.digest-head .digest-see { margin-left: auto; font-size: 11.5px; font-weight: 600; color: var(--gold); text-decoration: none; text-transform: none; letter-spacing: 0; }

/* The way to close it. IN the head row rather than floating over the corner
   like the wrap's X — the digest is text on a plain surface with nothing for a
   button to sit on top of, and the head already ends in a right-hand slot. The
   negative margins let it claim a 22px hit area without making the row
   taller. */
.digest-x {
  display: grid; place-items: center; cursor: pointer;
  width: 22px; height: 22px; margin: -4px -5px -4px 4px; padding: 0;
  color: var(--dim); background: transparent; border: 0; border-radius: 50%;
  font-family: inherit; font-size: 13px; line-height: 1;
}
.digest-x:hover { color: var(--text); background: rgba(255,255,255,.07); }
.digest-row {
  display: flex; align-items: center; gap: 9px; padding: 7px 0;
  font-size: 13px; color: var(--muted); text-decoration: none; border-top: 1px solid var(--border);
}
.digest-row:first-of-type { border-top: 0; }
.digest-avatar { width: 26px; height: 26px; border-radius: 50%; overflow: hidden; flex-shrink: 0; }
.digest-body { min-width: 0; flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.digest-body b { color: var(--text); font-weight: 600; }
.digest-body .digest-title { color: var(--text); }
.digest-star { font-weight: 700; color: var(--gold); flex-shrink: 0; }
.digest-time { font-size: 11.5px; color: var(--dim); flex-shrink: 0; }

/* ---- the tail, and the way to it ----
   Four rows is the default because the row is a nudge, not a page. The rest
   are in the DOM from the first paint and hidden here, so opening is a class
   flip — display:flex on the way back, not `block`, or every reopened row
   would lay itself out differently from the four above it. */
.digest-row-more { display: none; }
.digest.is-open .digest-row-more { display: flex; }
.digest-toggle {
  display: block; width: 100%; margin: 6px 0 -2px; padding: 7px 0 0; cursor: pointer;
  font-family: inherit; font-size: 12px; font-weight: 600; text-align: center;
  color: var(--gold); background: transparent; border: 0; border-top: 1px solid var(--border);
}
.digest-toggle:hover { color: var(--text); }

/* ---- phone ---- */
@media (max-width: 720px) {
  .wrap-card { padding: 1.1rem 1rem 1rem; border-radius: 16px; }
  .wrap-card-tiles { grid-template-columns: repeat(4, 1fr); gap: 6px; }
  .wrap-tile-val { font-size: 18px; }
  .wrap-wall-grid { grid-template-columns: repeat(auto-fill, minmax(58px, 1fr)); gap: 6px; }
  .wrap-modal { padding: 1.2rem 1.1rem 1.4rem; max-height: 92vh; }
  .wrap-nav { margin-right: 30px; }
  .wrap-step-label { min-width: 78px; font-size: 12px; }
  /* A thumb needs more than 22px, and here there is room to give it without
     the row growing — the head has spare height on either side. */
  .digest-x { width: 30px; height: 30px; margin: -8px -8px -8px 4px; font-size: 15px; }
}