/* Watchlist — status tabs, progress cards, status sheet, logged-out invite */

.wl { display: flex; flex-direction: column; gap: 12px; max-width: 1120px; }

/* ---------- Header + tabs ---------- */
.wl-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: calc(64px + var(--safe-t)); padding-top: var(--safe-t); }
.wl-head__title { font-family: var(--disp); font-weight: 400; font-size: 32px; line-height: 1; }
.wl-sort { gap: 6px; padding: 0 12px; font-size: 14px; }
.wl-sort [data-sort-label] { white-space: nowrap; }

.wl-tabs {
  position: sticky; top: 0; z-index: 5;
  display: flex; gap: 8px; overflow-x: auto; scrollbar-width: none;
  margin: -4px calc(var(--gutter) * -1) 0; padding: calc(4px + var(--safe-t)) var(--gutter) 12px;
  background: var(--bg); border-bottom: 1px solid var(--line2);
}
.wl-tabs::-webkit-scrollbar { display: none; }
.wl-tab { flex: none; display: inline-flex; align-items: center; gap: 6px; min-height: 44px; padding: 0 14px; border-radius: var(--r-pill); border: 1px solid var(--line); color: var(--tx2); font-size: 15px; font-weight: 700; white-space: nowrap; }
.wl-tab[aria-selected="true"] { background: var(--st-bg); color: var(--st); border-color: var(--st); }
.wl-tab__n { min-width: 22px; height: 22px; padding: 0 6px; border-radius: var(--r-pill); background: var(--s2); font-size: 13px; line-height: 22px; text-align: center; }
.wl-tab[aria-selected="true"] .wl-tab__n { background: rgba(0,0,0,.12); }

.wl-panel { padding-top: 4px; }
.wl-summary { margin: 4px 0 12px; font-size: 15px; color: var(--tx2); }
.wl-summary b { color: var(--tx); font-weight: 700; }

/* ---------- Items: one markup, styled by data-status ---------- */
.wl-list { display: flex; flex-direction: column; }
.wl-item { display: flex; flex-direction: column; gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--line2); transition: opacity var(--dur-2), transform var(--dur-2) var(--ease); }
.wl-item[data-status="watching"] { padding: 12px; margin-bottom: 12px; border-radius: 20px; background: var(--s1); border: 1px solid var(--line2); }
.wl-item.is-leaving { opacity: 0; transform: translateX(-16px); }
.wl-item.is-new { animation: sbl-rise var(--dur-3) var(--ease-out) both; }

.wl-item__top { display: flex; align-items: center; gap: 12px; }
.wl-item__thumb { flex: none; width: 112px; }
.wl-item__body { flex: 1; min-width: 0; min-height: 48px; display: flex; flex-direction: column; justify-content: center; }
.wl-item__title { font-size: 17px; font-weight: 700; line-height: 1.3; }
.wl-item__meta { font-size: 13px; color: var(--tx3); }
.wl-item__note { display: none; font-size: 14px; font-weight: 600; color: var(--tx2); }
.wl-item__note--gold { color: var(--gold-ink); }
.wl-item[data-status="watching"] [data-note="watching"],
.wl-item[data-status="want_to_watch"] [data-note="want_to_watch"],
.wl-item[data-status="watched"] [data-note="watched"],
.wl-item[data-status="dropped"] [data-note="dropped"] { display: block; }
.wl-item[data-status="dropped"] [data-note="dropped"] { color: var(--ash); }

.wl-item__cta { display: none; flex: none; min-height: 44px; padding: 0 12px; font-weight: 700; }
.wl-item[data-status="want_to_watch"] [data-cta="want_to_watch"],
.wl-item[data-status="dropped"] [data-cta="dropped"] { display: inline-flex; }
.wl-item__more { flex: none; margin-right: -6px; color: var(--tx2); }

.wl-item__prog { display: none; align-items: center; gap: 12px; }
.wl-item[data-status="watching"] .wl-item__prog { display: flex; }
.wl-item__bar { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 6px; }
.wl-item__nums { display: flex; justify-content: space-between; gap: 8px; font-size: 13px; }
.wl-item__nums b { font-weight: 700; }
.wl-item__pct { font-weight: 700; color: var(--gold-ink); }
.wl-item__tick { flex: none; gap: 6px; min-height: 44px; padding: 0 14px; font-size: 14px; font-weight: 700; }

.wl-empty, .wl-allempty { padding: 24px 0 8px; }
.wl-allempty .empty__actions { width: 100%; max-width: 360px; flex-direction: column; }

/* ---------- Sheets ---------- */
.wl-sheet__head { flex: 1; min-width: 0; line-height: 1.25; }
.wl-sheet__sub { display: block; margin-top: 2px; font-size: 14px; color: var(--tx3); }
.wl-options { display: flex; flex-direction: column; gap: 8px; }
.wl-options .option { min-height: 72px; }
.wl-sheet__note { margin-top: 14px; font-size: 14px; line-height: 1.45; color: var(--tx3); }
.wl-sheet__remove { padding: 0 14px; color: var(--danger); font-weight: 700; }

/* ---------- Logged out ---------- */
.wl-invite { position: relative; overflow: hidden; display: flex; flex-direction: column; gap: 10px; padding: 36px 20px 22px; border-radius: 24px; background: linear-gradient(135deg, #B8241C 0%, #7A120E 62%, #4A0B08 100%); color: #FDEBC8; }
.wl-invite__art { position: absolute; right: -34px; top: 24px; opacity: .16; }
.wl-invite__eyebrow { font-size: 13px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: #F4A21E; }
.wl-invite__title { max-width: 300px; font-family: var(--disp); font-weight: 400; font-size: 32px; line-height: 1.1; }
.wl-invite__text { max-width: 420px; font-size: 16px; line-height: 1.5; color: rgba(253,235,200,.9); }
.wl-invite__list { display: flex; flex-direction: column; gap: 10px; margin: 6px 0 4px; }
.wl-invite__list li { display: flex; align-items: center; gap: 12px; font-size: 15px; line-height: 1.35; }
.wl-invite__icon { flex: none; width: 40px; height: 40px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; background: rgba(10,4,3,.3); color: #F4A21E; }
.wl-invite__cta { margin-top: 6px; background: #F4A21E; color: #1E0C06; }
.wl-invite__fine { font-size: 13px; text-align: center; color: rgba(253,235,200,.78); }
.wl-invite__more { display: flex; gap: 10px; margin-top: 8px; }
.wl-invite__more > .btn { flex: 1; padding: 0 10px; }

/* ---------- Tablet + desktop ---------- */
@media (min-width: 720px) {
  .wl-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 24px; align-items: start; }
  .wl-panel[data-panel="watching"] .wl-list { gap: 0 16px; }
  .wl-invite { padding: 44px 36px 30px; }
  .wl-invite__cta { align-self: flex-start; padding: 0 28px; }
  .wl-invite__fine { text-align: left; }
  .wl-invite__more { max-width: 520px; }
}

@media (min-width: 1024px) {
  .wl { gap: 16px; padding-top: 32px; }
  .wl-head { min-height: 64px; padding-top: 0; }
  .wl-head__title { font-size: 48px; }
  .wl-sort { min-height: 46px; padding: 0 16px; font-size: 15px; }
  .wl-tabs { position: static; margin: 0; padding: 0 0 16px; }
  .wl-tab { min-height: 46px; padding: 0 18px; font-size: 16px; }
  .wl-summary { font-size: 17px; margin: 8px 0 16px; }
  .wl-list { grid-template-columns: repeat(auto-fill, minmax(460px, 1fr)); }
  .wl-item__thumb { width: 136px; }
  .wl-invite { max-width: 760px; }
  .wl-invite__title { max-width: none; font-size: 44px; }
  .wl-invite__text { font-size: 18px; }
}