/* Private library + shared bookmark control. No blur, polling, layout animation. */
:root { --favorite-toast-bottom: calc(var(--nav-h) + 6rem + env(safe-area-inset-bottom)); }
.favorite[hidden], .favorite-notice[hidden] { display: none; }
.card { position: relative; }
.card__media { position: relative; }
.card__shot { min-block-size: calc(var(--tap-min) + 2 * var(--s-2)); }
.card .card__link, .card .card__link:is(:hover, :active) { transform: none; }
.card .card__link::after { content: ''; position: absolute; inset: 0; z-index: 1; }
.card__media > .favorite--compact, .player > .favorite--compact {
  position: absolute; bottom: var(--s-2); right: var(--s-2); z-index: 2;
  width: var(--tap-min); min-height: var(--tap-min); padding: 0;
  background: #25252b; color: #fff; border: 0;
  border-radius: var(--radius-lg); corner-shape: squircle;
}
.player > .favorite--compact { bottom: calc(48px + var(--s-2)); }
.player[data-stuck="1"] > .favorite--compact { display: none; }
@media (hover: hover) { .card:hover:not(:focus-within) .card__shot { box-shadow: var(--shadow-2); } }
.favorite[aria-pressed="true"] { color: var(--brand-fg); background: var(--brand-bg); }
.favorite[aria-pressed="true"] .i { fill: currentColor; }
.favorite[aria-busy="true"] { opacity: .7; }
.top__personal-btn[data-has-favorites="1"] .i { fill: currentColor; }
.personal { padding-block: var(--s-5); min-height: 60vh; }
.personal h1 { margin-block: var(--s-5); }
.account-profile { display: flex; align-items: center; gap: var(--s-3); margin-block: var(--s-4); }
.account-profile[hidden] { display: none; }
.account-profile__avatar { border-radius: var(--radius-lg); corner-shape: squircle; }
.account-profile__name { font-size: var(--fs-22); font-weight: var(--fw-bold); overflow-wrap: anywhere; }
.account-actions { display: flex; flex-wrap: wrap; gap: var(--s-3); margin-block: var(--s-4); }
.favorites-summary { display: flex; align-items: center; gap: var(--s-4); flex-wrap: wrap; margin-block: var(--s-5); }
.favorites-empty { padding-block: var(--s-6); }
.favorite-unavailable { padding: var(--s-4); background: var(--surface); border-radius: var(--radius-xl); }
.favorite-notice {
  position: fixed; inset: 0; z-index: 60; display: grid; justify-items: center; align-items: end;
  padding: var(--s-4) var(--s-4) 0;
  overflow: hidden; pointer-events: none; contain: layout style;
}
.favorite-notice__flight { grid-area: 1 / 1; max-width: min(100%, 32rem); }
.favorite-notice__tile {
  max-width: min(100%, 32rem); padding: 14px 22px; border: 0;
  border-radius: 14px; corner-shape: squircle;
  background: #25252b; color: #fff;
  box-shadow: 0 5px 0 #111216, 0 14px 24px #0003;
  text-align: center; transform-origin: center 80%;
  animation: favorite-message-in 180ms ease-in-out both;
}
.favorite-notice__flight[data-kind="message"] { margin-bottom: var(--favorite-toast-bottom); }
.favorite-notice[data-undo="1"] .favorite-notice__flight[data-kind="message"] {
  margin-bottom: calc(var(--favorite-toast-bottom) + var(--tap-min) + var(--s-2));
}
.favorite-notice__flight[data-kind="feedback"] {
  animation: favorite-ballistic-y var(--favorite-flight-duration, 1.2s) linear both;
}
.favorite-notice__flight[data-kind="feedback"] .favorite-notice__tile {
  padding: 7px 12px; border-radius: 11px;
  font-weight: 700; font-size: 16px; line-height: 20px; white-space: nowrap;
  background: linear-gradient(155deg, #fff, #ebedf0); color: #171a1d;
  box-shadow: 0 3px 0 #9ca2aa, 0 8px 16px #0003;
  transform-origin: center;
  animation: favorite-ballistic-spin var(--favorite-flight-duration, 1.2s) linear both;
}
.favorite-notice__flight[data-kind="feedback"][data-saved="1"] .favorite-notice__tile {
  background: linear-gradient(155deg, #e8ff73, #c6ff00); color: #111400;
  box-shadow: 0 3px 0 #718b00, 0 8px 16px #0003;
}
.favorite-notice__text { position: relative; }
.favorite-notice__text[data-shine-text]::after {
  content: attr(data-shine-text); position: absolute; inset: 0; color: transparent;
  background: linear-gradient(105deg, transparent 38%, #fff 49%, transparent 60%);
  background-size: 260% 100%; background-position: 150% 0;
  -webkit-background-clip: text; background-clip: text;
  animation: favorite-text-shine 260ms 150ms ease-in-out both;
}
.favorite-notice__undo {
  position: absolute; bottom: var(--favorite-toast-bottom); pointer-events: auto;
  background: #fff; color: #151519; border: 0;
}
@media (min-width: 641px) {
  :root { --favorite-toast-bottom: var(--s-5); }
}
/* Exact quadratic rise/fall: x(u)=u for both Béziers, y(u)=2u-u² / u².
   Half the flight on each side of the apex; there is no hold or easing of gravity. */
@keyframes favorite-ballistic-y {
  0% { transform: translate3d(0, 64px, 0); animation-timing-function: cubic-bezier(.333333, .666667, .666667, 1); }
  50% { transform: translate3d(0, calc(64px - var(--favorite-flight-height, 300px)), 0); animation-timing-function: cubic-bezier(.333333, 0, .666667, .333333); }
  100% { transform: translate3d(0, 64px, 0); }
}
@keyframes favorite-ballistic-spin {
  0% { opacity: 0; transform: perspective(650px) translate3d(var(--favorite-x-start, 0px), 0, 0) rotateX(var(--favorite-tilt-start, -8deg)) rotateZ(var(--favorite-angle-start, -8deg)); }
  8%, 92% { opacity: 1; }
  100% { opacity: 0; transform: perspective(650px) translate3d(var(--favorite-x-end, 48px), 0, 0) rotateX(var(--favorite-tilt-end, 12deg)) rotateZ(var(--favorite-angle-end, 32deg)); }
}
@keyframes favorite-text-shine { from { background-position: 150% 0; } to { background-position: -150% 0; } }
@keyframes favorite-message-in { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) {
  .favorite-notice__flight[data-kind="feedback"] { margin-bottom: var(--favorite-toast-bottom); animation: none; }
  .favorite-notice[data-undo="1"] .favorite-notice__flight[data-kind="feedback"] { margin-bottom: calc(var(--favorite-toast-bottom) + var(--tap-min) + var(--s-2)); }
  .favorite-notice__flight[data-kind="feedback"] .favorite-notice__tile { animation: none; }
  .favorite-notice__text[data-shine-text]::after { display: none; animation: none; }
  .favorite-notice__flight[data-kind="message"] .favorite-notice__tile { animation: none; }
}
.favorite:focus-visible { outline: none; box-shadow: var(--focus-ring); }

/* A personal collection starts in adjacent columns, even when it has only two cards. */
.personal [data-masonry] { --stagger: 0px; }